/* 推し読 / OSHIDOKU — COLOR SYSTEM v130
   Blue = reading, discovery, navigation
   Coral = affection, favorites, appreciation
   Charcoal = literary typography; cool neutrals = reading surfaces
   Legacy color literals throughout this stylesheet normalized to this palette. */
:root {
  --brand: #01A2CE;
  --brand-deep: #006F8C;
  --brand-hover: #005F78;
  --brand-soft: #EAF8FC;
  --brand-line: #C9E9F2;
  --warm: #E87959;
  --warm-deep: #B34E36;
  --warm-text: #A9452D;
  --warm-soft: #FFF3EE;
  --warm-line: #F1C9BB;
  --warm-decorative: #F5B58B;
  --ink: #28353D;
  --muted: #5C7180;
  --canvas: #F5FAFC;
  --surface: #FFFFFF;
  --border: #D8E7EF;
  --bg: var(--canvas);
  --bg-soft: var(--canvas);
  --paper: var(--surface);
  --line: var(--border);
  --text: var(--ink);
  --accent: var(--brand);
  --brand-glow: rgba(1,162,206,.18);
  --shadow: 0 14px 34px rgba(0,111,140,.08);
}

:root{

  /* Re:READ 2026: controlled blue + coral */
  --radius:24px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Noto Sans JP',system-ui,sans-serif;color:var(--text);background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.inner{width:min(1180px, calc(100% - 48px));margin:0 auto}
.narrow{width:min(860px, calc(100% - 48px))}
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(245,250,252,.75)}

.service-hero{padding:54px 0 64px;background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%);border-bottom:1px solid #F5FAFC}
.service-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.service-copy h1{margin:0 0 18px;font-size:64px;line-height:1.08;letter-spacing:.015em;font-weight:900}
.service-lead{max-width:600px;margin:0 0 18px;font-size:16px;line-height:2;color:#006F8C}
.service-points{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:10px;color:#006F8C}
.service-points li{position:relative;padding-left:18px;font-size:14px;line-height:1.8}
.service-points li::before{content:"";position:absolute;left:0;top:.8em;width:7px;height:7px;border-radius:50%;background:#01A2CE;transform:translateY(-50%)}
.persona-cloud{position:relative;min-height:620px;padding-top:12px}
.float-card{position:absolute;display:block;padding:10px;background:rgba(255,255,255,.88);border:1px solid #F5FAFC;border-radius:28px;box-shadow:0 24px 50px rgba(40,53,61,.10);backdrop-filter:blur(8px);width:170px;text-decoration:none}
.float-card img{width:100%;aspect-ratio:3 / 4;display:block;border-radius:22px;object-fit:cover;margin-bottom:12px}
.float-card strong{display:block;font-size:17px;line-height:1.15;margin-bottom:6px;font-weight:800;color:#28353D}
.float-card span{display:block;font-size:10px;line-height:1.4;color:#006F8C;font-weight:800;margin-bottom:2px}
.card-sumiko{top:30px;left:20px;transform:rotate(-4deg)}
.card-misaki{top:12px;right:38px;transform:rotate(3deg)}
.card-keisuke{top:220px;right:10px;transform:rotate(-2deg)}
.card-yuki{top:280px;left:56px;transform:rotate(4deg)}
.card-ayaka{bottom:18px;right:74px;transform:rotate(-3deg)}
.float-quote{position:absolute;padding:14px 18px;border-radius:22px;background:#FFFFFF;border:1px solid #F5FAFC;box-shadow:0 12px 28px rgba(40,53,61,.06);font-size:13px;line-height:1.7;color:#006F8C}
.quote-a{top:150px;left:0;max-width:190px}
.quote-b{top:150px;right:94px;max-width:200px}
.quote-c{bottom:128px;left:220px;max-width:220px}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;flex-direction:column;gap:2px}
.brand-mark{font-size:30px;font-weight:800;letter-spacing:.02em}
.brand-copy{font-size:11px;color:var(--muted);letter-spacing:.02em;line-height:1.5;max-width:420px}
.header-nav{display:flex;gap:26px;align-items:center;font-size:14px;color:#28353D}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 24px;font-weight:700;transition:.25s ease;border:1px solid transparent}
.btn:hover{transform:translateY(-1px)}
.btn-small{padding:12px 18px;background:#01A2CE;color:#FFFFFF}
.btn-primary{background:#01A2CE;color:#FFFFFF;box-shadow:var(--shadow)}
.btn-light{background:#FFFFFF;border-color:var(--line);color:#28353D}
.hero{padding:72px 0 42px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
.hero-copy h1{font-size:64px;line-height:1.08;margin:0 0 18px;font-weight:800;letter-spacing:-.03em}
.hero-copy h1 span{color:#01A2CE;display:inline-block;margin-top:8px}
.eyebrow{margin:0 0 14px;font-size:12px;letter-spacing:.14em;color:#5C7180;font-weight:700;line-height:1.8}
.hero-lead{font-size:16px;line-height:2;color:#006F8C;max-width:600px;margin:0}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-readers-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end;padding:10px 0}
.hero-reader-card{background:linear-gradient(180deg,#F5FAFC 0%, #FFFFFF 100%);border-radius:28px;overflow:hidden;box-shadow:0 20px 40px rgba(40,53,61,.08)}
.hero-reader-card:nth-child(1),.hero-reader-card:nth-child(4){transform:translateY(28px)}
.hero-reader-card:nth-child(2),.hero-reader-card:nth-child(5){transform:translateY(0)}
.hero-reader-card:nth-child(3){transform:translateY(16px)}
.hero-reader-card img{width:100%;height:265px;object-fit:cover}
.hero-reader-meta{padding:14px 16px 20px}
.hero-reader-meta strong{display:block;font-size:18px;margin-bottom:4px}
.hero-reader-meta span{font-size:13px;color:var(--muted);line-height:1.5}
.hero-copy-shell{position:relative;padding:14px 0}
.hero-kicker{display:inline-flex;align-items:center;margin:0 0 14px;padding:8px 14px;border-radius:999px;border:1px solid #F5FAFC;background:#F5FAFC;font-size:12px;font-weight:800;letter-spacing:.12em;color:#006F8C}
.hero-mini-note{margin:0 0 12px;color:#5C7180;font-size:14px;line-height:1.9;max-width:560px}

.section{padding:42px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}
.section-head.left{justify-content:flex-start}
.section-head h2{font-size:38px;line-height:1.2;margin:0 0 8px;font-weight:800;letter-spacing:-.035em}
.section-head p{margin:0;color:var(--muted)}
.section-link{color:#01A2CE;font-weight:700}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work-card{display:flex;flex-direction:column;height:100%;background:var(--paper);border:1px solid rgba(245,250,252,.95);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.thumb-link{position:relative;display:block}
.work-thumb{width:100%;height:186px;object-fit:cover}
.pill{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 16px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.05em;color:#006F8C;border:1px solid rgba(255,255,255,.68);box-shadow:0 10px 24px rgba(40,53,61,.08)}
.work-body{display:flex;flex-direction:column;flex:1;padding:18px}
.work-body h3{margin:0 0 14px;font-size:22px;line-height:1.45;letter-spacing:-.025em;font-weight:700}
.author-row{display:flex;align-items:center;gap:10px;font-size:14px;color:#006F8C;margin-bottom:18px;flex-wrap:wrap}
.author-row img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.note-link{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:#28353D;color:#FFFFFF;border:1px solid #28353D;border-radius:999px;padding:9px 15px;font-size:12px;font-weight:700;letter-spacing:.02em;box-shadow:0 6px 16px rgba(40,53,61,.08);transition:.2s ease}.note-link::after{content:"↗";font-size:12px}.note-link:hover{transform:translateY(-1px);background:#28353D}
.work-summary-mini{margin:0 0 16px;color:#006F8C;line-height:1.85;font-size:14px}
.summary-box{margin:0 0 18px;padding:18px 20px 20px;border-radius:22px;background:#F5FAFC;border:1px solid #F5FAFC}
.summary-box span{display:inline-block;margin-bottom:2px;font-size:14px;letter-spacing:.04em;color:#5C7180;font-weight:700}
.comment-preview{position:relative;height:470px;overflow:hidden;margin-top:6px}
.comment-fade{position:absolute;left:0;right:0;bottom:0;padding:96px 0 20px;display:flex;justify-content:center;align-items:flex-end;background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.74) 35%, rgba(255,255,255,.96) 70%, rgba(255,255,255,1) 100%)}
.comment-more-link{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid #F5FAFC;color:#006F8C;font-weight:700;font-size:14px;box-shadow:0 8px 22px rgba(40,53,61,.05)}
.comment-more-link:hover{transform:translateY(-1px)}
.comment-stream{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.comment-bubble{display:flex;align-items:flex-start;gap:10px;max-width:96%}
.comment-bubble.right{margin-left:auto;flex-direction:row-reverse}
.comment-reader{width:48px;flex:none;text-align:center}
.comment-reader img{width:42px;height:42px;border-radius:50%;object-fit:cover;margin:0 auto 4px;box-shadow:0 4px 10px rgba(40,53,61,.08)}
.comment-reader-name{display:block;font-size:10px;color:#5C7180;font-weight:700;line-height:1.25;white-space:nowrap}
.comment-bubble-box{background:#F5FAFC;border:1px solid #F5FAFC;border-radius:18px;padding:11px 14px;flex:1}
.comment-bubble.left .comment-bubble-box{border-top-left-radius:8px}
.comment-bubble.right .comment-bubble-box{border-top-right-radius:8px;background:#F5FAFC;border-color:#F5FAFC}
.comment-bubble-box p{margin:0;font-size:13px;line-height:1.8;color:#006F8C}
.work-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:13px;color:#5C7180}
.work-meta-single{justify-content:flex-end}
.reader-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.reader-card{background:var(--paper);border:1px solid rgba(245,250,252,.95);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s ease, box-shadow .2s ease}
.reader-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(40,53,61,.09)}
.reader-card a{display:flex;flex-direction:column;height:470px;padding:20px;text-align:center;position:relative;cursor:pointer}
.reader-card a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.78) 48%,rgba(255,255,255,.96) 75%,rgba(255,255,255,1) 100%);pointer-events:none}
.reader-card img{width:126px;height:126px;border-radius:50%;object-fit:cover;margin:0 auto 14px;flex:none}
.reader-card h3{margin:0 0 6px;font-size:24px;flex:none}
.reader-role{margin:0 0 12px;color:#006F8C;font-size:14px;flex:none}
.reader-intro{margin:0;color:#006F8C;line-height:1.8;font-size:14px;text-align:left;overflow:hidden}
.site-footer{margin-top:32px;padding:34px 0 56px;border-top:1px solid rgba(245,250,252,.9)}
.footer-inner{text-align:center}
.footer-brand{font-size:24px;font-weight:800;margin:0 0 6px}
.footer-copy{margin:0 0 10px;color:#01A2CE}
.footer-note{margin:0;color:#5C7180;font-size:13px}
.profile-hero,.work-hero,.use-section{padding:50px 0}
.profile-hero-inner{display:grid;grid-template-columns:minmax(260px,320px) minmax(320px,460px);gap:64px;align-items:start;justify-content:center;max-width:980px;margin:0 auto}
.work-hero-inner{display:grid;grid-template-columns:460px 1fr;gap:42px;align-items:start}
.profile-main-image{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}
.work-hero-thumb{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}
.profile-visual{display:flex;flex-direction:column;gap:16px}
.profile-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.profile-thumb{padding:0;border:0;background:transparent;cursor:pointer;border-radius:18px;overflow:hidden;opacity:.92;transition:.2s ease}
.profile-thumb:hover{transform:translateY(-2px)}
.profile-thumb.is-active{box-shadow:0 0 0 2px #01A2CE inset, 0 10px 22px rgba(40,53,61,.12);opacity:1}
.profile-thumb img{width:100%;aspect-ratio:1 / 1;object-fit:cover;display:block;border-radius:18px}
.profile-copy{padding-top:10px}
.profile-roman{margin:0 0 12px;font-size:14px;letter-spacing:.24em;font-weight:800;color:#5C7180;text-transform:uppercase}
.profile-copy h1{margin:0 0 6px;font-size:54px;line-height:1.12}
.work-hero-copy h1{margin:0 0 16px;font-size:24px;line-height:1.35;font-weight:600;letter-spacing:-.01em;font-family:'Noto Sans JP',system-ui,sans-serif}
.work-author-top{margin-bottom:16px;padding-bottom:18px;border-bottom:1px solid #F5FAFC}
.work-summary{margin:8px 0 0}

.profile-role{margin:0 0 18px;font-size:16px;color:#5C7180}
.profile-intro,.work-summary{font-size:16px;line-height:2;color:#006F8C}
.stack-list,.comment-detail-list{display:grid;gap:16px}
.stack-card,.detail-card,.form-card{background:var(--paper);border:1px solid rgba(245,250,252,.95);border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.stack-card{display:flex;justify-content:space-between;gap:20px;align-items:center}
.stack-kicker{margin:0 0 8px;font-size:12px;color:#5C7180;letter-spacing:.12em}
.stack-card h3{margin:0 0 12px;font-size:28px}
.stack-comment{margin:0;color:#28353D;line-height:1.9}
.stack-link{white-space:nowrap;color:#01A2CE;font-weight:700}
.detail-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.detail-head img{width:58px;height:58px;border-radius:50%;object-fit:cover}
.detail-head h3{margin:0 0 4px;font-size:24px}
.detail-head p{margin:0;color:#5C7180;font-size:14px}
.detail-text{margin:0 0 14px;line-height:2;color:#28353D}
.detail-actions{display:flex;justify-content:flex-end;font-size:14px;color:#01A2CE;font-weight:700}
.use-form{display:grid;gap:12px;margin-top:18px}
.use-form label{font-size:14px;font-weight:700}
.use-form input{width:100%;padding:16px 18px;border-radius:16px;border:1px solid var(--line);font:inherit;background:#FFFFFF}
.result-box{margin-top:18px;background:#F5FAFC;border:1px solid #F5FAFC;border-radius:18px;padding:18px}
.result-ok{margin:0 0 10px;font-weight:800;color:#01A2CE}

/* --- Magazine-style top --- */
.mag-hero{padding:48px 0 58px;background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%);border-bottom:1px solid #F5FAFC}
.mag-masthead{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:18px;margin-bottom:32px;border-bottom:1px solid #D8E7EF}
.mag-edition{margin:0 0 4px;font-family:'Noto Sans JP',system-ui,sans-serif;font-size:13px;letter-spacing:.18em;color:#5C7180}
.mag-date{margin:0;font-size:12px;color:#5C7180;letter-spacing:.08em}
.mag-use-link{font-size:13px;color:#01A2CE;font-weight:700}
.mag-feature{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.mag-feature-copy{padding:14px 0}
.mag-category{margin:0 0 16px;font-family:'Noto Sans JP',system-ui,sans-serif;font-size:12px;letter-spacing:.22em;color:#01A2CE}
.mag-feature h1{font-family:'Noto Sans JP',system-ui,sans-serif;font-size:58px;line-height:1.12;font-weight:800;letter-spacing:-.045em;margin:0 0 20px}
.mag-byline{display:flex;gap:16px;align-items:center;margin-bottom:24px;color:#5C7180;font-size:13px}
.mag-byline span+span{padding-left:16px;border-left:1px solid #D8E7EF}
.mag-summary{max-width:610px;margin:0;font-family:'Noto Sans JP',system-ui,sans-serif;font-size:15px;line-height:2.05;font-weight:400;color:#28353D}
.mag-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:28px}
.mag-text-link{font-size:14px;color:#01A2CE;font-weight:700}
.mag-feature-visual{position:relative;padding-bottom:84px}
.mag-feature-image{width:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:4px;box-shadow:0 22px 50px rgba(40,53,61,.12)}
.mag-reader-strip{position:absolute;left:22px;right:22px;bottom:50px;display:flex;justify-content:center;gap:10px}
.mag-reader-dot{display:flex;flex-direction:column;align-items:center;gap:5px}
.mag-reader-dot img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:4px solid #FFFFFF;box-shadow:0 6px 16px rgba(40,53,61,.14)}
.mag-reader-dot span{font-size:10px;color:#006F8C;font-weight:700}
.mag-pullquote{position:absolute;right:0;bottom:0;width:min(420px,86%);padding:16px 18px;background:rgba(255,255,255,.96);border-left:3px solid #01A2CE;box-shadow:0 12px 30px rgba(40,53,61,.08)}
.mag-pullquote p{margin:0 0 8px;font-family:'Noto Sans JP',system-ui,sans-serif;font-size:14px;line-height:1.85;font-weight:400;color:#28353D}
.mag-pullquote span{font-size:11px;color:#5C7180;letter-spacing:.04em}

/* More editorial section titles */
.section-head h2{font-family:'Noto Sans JP',system-ui,sans-serif;font-weight:800;letter-spacing:-.035em}
.work-body h3{font-family:'Noto Sans JP',system-ui,sans-serif;font-weight:700}
.reader-card h3{font-family:'Noto Sans JP',system-ui,sans-serif;font-weight:800}

@media (max-width: 1100px){
  .mag-feature{grid-template-columns:1fr;gap:32px}
  .mag-feature h1{font-size:52px}

  .hero-grid,.profile-hero-inner,.work-hero-inner{grid-template-columns:1fr}
  .profile-gallery{grid-template-columns:repeat(4, minmax(0,1fr));gap:10px}
  .hero-copy h1{font-size:50px;line-height:1.12}
  .works-grid{grid-template-columns:1fr}
  .comment-preview{height:430px}
  .reader-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 820px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .header-nav{flex-wrap:wrap;gap:16px}
  .hero-readers-panel{grid-template-columns:repeat(2,1fr)}
  .section-head{align-items:flex-start;flex-direction:column}
}

@media (max-width: 900px){
  .work-hero-inner{grid-template-columns:1fr;gap:22px}
  .work-hero-copy h1{font-size:24px;line-height:1.35}
}
@media (max-width: 700px){
  .mag-masthead{align-items:flex-start;gap:16px}
  .mag-feature h1{font-size:40px}
  .mag-summary{font-size:15px}
  .mag-feature-visual{padding-bottom:104px}
  .mag-reader-strip{left:8px;right:8px;gap:5px}
  .mag-reader-dot img{width:44px;height:44px}
  .mag-pullquote{width:94%}
}
@media (max-width: 560px){
  .work-body h3{font-size:19px;line-height:1.45}
  .inner{width:min(100% - 28px, 1000px)}
  .hero-copy h1,.profile-copy h1,.section-head h2{font-size:34px}
  .profile-thumb img{border-radius:14px}
  .hero-mini-note{font-size:13px}
  .comment-preview{height:395px}
  .work-hero-copy h1{font-size:22px;line-height:1.4}
  .hero-readers-panel,.reader-grid{grid-template-columns:1fr 1fr}
  .hero-reader-card img{height:210px}
  .stack-card{flex-direction:column;align-items:flex-start}
}

.detail-head-link{width:max-content;max-width:100%;border-radius:14px;padding:4px 6px 4px 0;transition:.2s ease}
.detail-head-link:hover{opacity:.72}


.brand-copy,.section-head p,.reader-role,.reader-intro,.profile-role,.profile-intro,.work-summary-mini,.author-row{
  font-weight:400;
}
.eyebrow,.mag-edition,.mag-category,.stack-kicker{
  font-weight:800;
  letter-spacing:.14em;
}
.profile-copy h1{
  font-weight:900;
  letter-spacing:-.045em;
}

@media (max-width: 1100px){
  .service-hero-inner{grid-template-columns:1fr;gap:30px}
  .persona-cloud{min-height:500px}
  .profile-hero-inner{grid-template-columns:1fr;justify-content:start;gap:30px}
}
@media (max-width: 700px){
  .service-copy h1{font-size:42px}
  .persona-cloud{min-height:560px}
  .float-card{width:145px;padding:9px}
  .float-card img{border-radius:18px}
  .float-card strong{font-size:15px}
  .card-sumiko{left:0}
  .card-misaki{right:0}
  .card-keisuke{right:4px;top:210px}
  .card-yuki{left:12px;top:290px}
  .card-ayaka{right:18px;bottom:10px}
  .quote-a{left:0;top:135px}
  .quote-b{right:0;top:136px}
  .quote-c{left:70px;bottom:118px;max-width:180px}
}
@media (max-width: 560px){
  .service-copy h1{font-size:36px}
  .profile-visual{max-width:100%}
  .profile-gallery{gap:8px}
  .profile-thumb img{border-radius:12px}
}

.compact-preview{height:182px;margin-top:2px}
.single-comment-stream{gap:0;margin-top:0}
.preview-detail-bubble{max-width:100%}
.preview-detail-bubble .comment-bubble-box{padding:13px 16px 18px}
.preview-detail-bubble .comment-bubble-box p{font-size:14px;line-height:1.95}
.compact-fade{padding:82px 0 16px;background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.76) 38%, rgba(255,255,255,.96) 72%, rgba(255,255,255,1) 100%)}
.compact-fade .comment-more-link{background:rgba(255,255,255,.96)}

@media (max-width: 900px){.compact-preview{height:174px}}
@media (max-width: 560px){.compact-preview{height:166px}.preview-detail-bubble .comment-bubble-box p{font-size:13px;line-height:1.85}}

@media (max-width: 1100px){
  .profile-hero-inner{grid-template-columns:minmax(240px,320px) minmax(300px,420px);gap:42px;max-width:860px}
}
@media (max-width: 900px){
  .profile-hero-inner{grid-template-columns:1fr;max-width:540px;gap:28px}
  .profile-visual{max-width:380px}
}
@media (max-width: 560px){
  .profile-copy h1{font-size:42px}
  .profile-roman{font-size:12px;letter-spacing:.2em;margin-bottom:10px}
}

.new-reads-head h2{font-size:18px;font-weight:400;letter-spacing:.02em;color:#5C7180;margin:0}
@media (max-width: 560px){.new-reads-head h2{font-size:16px}}

.float-card-body{padding:2px 4px 6px}
.float-card em{display:block;font-style:normal;font-size:10px;line-height:1.55;color:#5C7180;font-weight:600}
.float-card:hover{transform:translateY(-2px);box-shadow:0 28px 56px rgba(40,53,61,.12)}
.card-sumiko{top:180px;left:0;transform:rotate(-3deg)}
.card-misaki{top:70px;left:140px;transform:rotate(1.5deg)}
.card-keisuke{top:110px;left:300px;transform:rotate(-1.6deg)}
.card-yuki{top:145px;left:470px;transform:rotate(2.6deg)}
.card-ayaka{top:195px;left:620px;transform:rotate(-2.4deg)}
.new-reads-head h2{font-size:18px;font-weight:400;letter-spacing:.03em;color:#5C7180;margin:0}
@media (max-width: 1200px){.persona-cloud{min-height:520px}.float-card{width:150px}.card-sumiko{left:10px}.card-misaki{left:118px}.card-keisuke{left:262px}.card-yuki{left:410px}.card-ayaka{left:548px}}
@media (max-width: 700px){.service-copy h1{letter-spacing:.01em}.persona-cloud{min-height:450px}.float-card{width:120px;padding:8px}.card-sumiko{left:0;top:150px}.card-misaki{left:84px;top:50px}.card-keisuke{left:170px;top:90px}.card-yuki{left:255px;top:132px}.card-ayaka{left:130px;top:255px}.float-card strong{font-size:13px}.float-card span,.float-card em{font-size:9px;line-height:1.35}}

.profile-copy h1{font-size:30px;line-height:1.18;letter-spacing:-.02em}
.reader-works-head h2{font-size:22px;line-height:1.3;letter-spacing:-.015em;font-weight:700}
.hero-actions .btn:only-child{min-width:300px}
@media (max-width: 560px){.profile-copy h1{font-size:26px}.reader-works-head h2{font-size:18px}.hero-actions .btn:only-child{min-width:0;width:100%}}

.author-row-textonly{gap:12px}
.author-handle{font-size:14px;font-weight:600;letter-spacing:.02em;color:#006F8C}
.author-row-large .author-handle{font-size:16px}
.footer-copy{color:#28353D}
.work-note-bottom{margin-top:26px;display:flex;justify-content:center}
.work-note-bottom .btn{min-width:260px}

/* ABOUT */
.about-hero{padding:76px 0 64px;border-bottom:1px solid #F5FAFC;background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%)}
.about-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.about-hero h1{margin:0;font-size:56px;line-height:1.15;letter-spacing:-.04em;font-weight:900}
.about-hero-copy{font-size:17px;line-height:2;color:#006F8C}
.about-hero-copy p{margin:0 0 14px}
.about-number-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.about-number-grid article{padding:28px;border:1px solid #F5FAFC;border-radius:26px;background:#FFFFFF}
.about-number-grid article>span{display:block;margin-bottom:28px;font-size:12px;letter-spacing:.18em;font-weight:800;color:#5C7180}
.about-number-grid h2{margin:0 0 12px;font-size:24px;letter-spacing:-.02em}
.about-number-grid p{margin:0;font-size:14px;line-height:1.9;color:#5C7180}
.about-persona-section{background:#F5FAFC}
.about-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.about-split h2{margin:0;font-size:48px;line-height:1.15;letter-spacing:-.04em;font-weight:900}
.about-copy-stack{font-size:16px;line-height:2;color:#006F8C}
.about-copy-stack p{margin:0 0 14px}
.about-difference{text-align:center}
.about-difference h2{margin:0 0 18px;font-size:44px;letter-spacing:-.035em}
.about-large-copy{max-width:760px;margin:0 auto;font-size:17px;line-height:2;color:#006F8C}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.voice-card{padding:24px;border-radius:24px;border:1px solid #F5FAFC;background:#FFFFFF;min-height:180px}
.voice-card span{display:inline-block;margin-bottom:18px;font-size:11px;letter-spacing:.12em;font-weight:800;color:#5C7180}
.voice-card p{margin:0;font-size:14px;line-height:1.9;color:#5C7180}
.pending-voice{background:linear-gradient(180deg,#FFFFFF,#FFFFFF)}
.membership-cta-section{padding:72px 0;background:#28353D;color:#FFFFFF}
.membership-cta{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.membership-cta .eyebrow{color:#D8E7EF}
.membership-cta h2{margin:0 0 12px;font-size:38px;line-height:1.3;letter-spacing:-.03em}
.membership-cta p{margin:0;color:#F5FAFC;line-height:1.8}
.membership-cta-side{display:flex;align-items:center;gap:22px}
.membership-price{display:flex;align-items:baseline;gap:8px}
.membership-price span{font-size:12px;letter-spacing:.08em}
.membership-price strong{font-size:38px;line-height:1}
.membership-cta .btn-primary{background:#FFFFFF;color:#01A2CE;box-shadow:none}
.membership-card{margin-top:28px;padding:28px;border:1px solid #F5FAFC;border-radius:24px;background:#FFFFFF}
.membership-card h2{margin:0 0 12px;font-size:28px}
.membership-card p{line-height:1.8;color:#5C7180}
.membership-join{margin-top:18px}
@media(max-width:900px){
  .about-hero-inner,.about-split,.membership-cta{grid-template-columns:1fr}
  .about-number-grid,.voice-grid{grid-template-columns:1fr}
  .about-hero h1{font-size:42px}
  .about-split h2{font-size:38px}
  .membership-cta-side{justify-content:space-between}
}
@media(max-width:560px){
  .about-hero{padding:48px 0}
  .about-hero h1{font-size:34px}
  .about-difference h2{font-size:32px}
  .membership-cta h2{font-size:30px}
  .membership-cta-side{align-items:flex-start;flex-direction:column}
}


/* v3.2: tighter top hero + alternating persona flow + fixed lower comment CTA */
.service-hero{padding:34px 0 38px;overflow:hidden}
.service-hero-inner{gap:34px}
.service-copy h1{margin-bottom:14px;line-height:1.04}
.service-lead{margin-bottom:14px;line-height:1.8}
.service-points{gap:6px;margin-bottom:20px}
.hero-actions{margin-top:20px}
.persona-cloud{min-height:455px;padding-top:0;overflow:hidden}
.float-card{width:152px}
.float-card img{aspect-ratio:3 / 4;margin-bottom:10px}
.card-sumiko{top:112px;left:0;animation:personaFlowDown 10s ease-in-out infinite alternate}
.card-misaki{top:38px;left:126px;animation:personaFlowUp 12s ease-in-out infinite alternate}
.card-keisuke{top:78px;left:262px;animation:personaFlowDown 11s ease-in-out infinite alternate}
.card-yuki{top:118px;left:398px;animation:personaFlowUp 13s ease-in-out infinite alternate}
.card-ayaka{top:92px;left:528px;animation:personaFlowDown 12.5s ease-in-out infinite alternate}
@keyframes personaFlowDown{
  from{translate:0 -36px}
  to{translate:0 42px}
}
@keyframes personaFlowUp{
  from{translate:0 42px}
  to{translate:0 -36px}
}
.float-card:hover{animation-play-state:paused}

.compact-preview{height:250px;margin-top:4px}
.compact-fade{height:96px;padding:0 0 14px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 34%,rgba(255,255,255,.88) 70%,rgba(255,255,255,1) 100%)}
.compact-fade .comment-more-link{margin:0 auto}

@media (max-width:1200px){
  .persona-cloud{min-height:430px}
  .float-card{width:138px}
  .card-sumiko{left:4px;top:108px}
  .card-misaki{left:108px;top:40px}
  .card-keisuke{left:228px;top:76px}
  .card-yuki{left:348px;top:116px}
  .card-ayaka{left:458px;top:88px}
}
@media (max-width:900px){
  .service-hero{padding:30px 0 34px}
  .persona-cloud{min-height:410px}
  .compact-preview{height:238px}
}
@media (max-width:700px){
  .persona-cloud{min-height:390px}
  .float-card{width:112px}
  .card-sumiko{left:0;top:98px}
  .card-misaki{left:72px;top:36px}
  .card-keisuke{left:148px;top:70px}
  .card-yuki{left:224px;top:106px}
  .card-ayaka{left:122px;top:220px}
}
@media (max-width:560px){
  .service-hero{padding:26px 0 30px}
  .compact-preview{height:226px}
  .compact-fade{height:90px;padding-bottom:12px}
}

/* v3.3 work card refinement */
.work-title-line{display:block}
.work-author-inline{font-size:.58em;font-weight:500;color:#5C7180;letter-spacing:.01em;white-space:nowrap}
.compact-preview{height:330px;margin-top:auto;padding-top:8px}
.preview-two-comments{display:flex;flex-direction:column;gap:14px}
.compact-fade{height:100px;padding:0 0 14px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 30%,rgba(255,255,255,.92) 72%,rgba(255,255,255,1) 100%)}
.compact-fade .comment-more-link{margin:0 auto;min-width:170px}
@media (max-width:900px){.compact-preview{height:310px}}
@media (max-width:560px){.compact-preview{height:292px}.work-author-inline{font-size:.62em}}

.five-reader-link{gap:10px;padding:10px 18px 10px 12px}
.five-reader-faces{display:flex;align-items:center;padding-left:4px}
.five-reader-faces img{width:23px;height:23px;border-radius:50%;object-fit:cover;border:2px solid #FFFFFF;background:#F5FAFC;box-shadow:0 2px 5px rgba(40,53,61,.08);margin-left:-6px}
.five-reader-faces img:first-child{margin-left:0}
@media (max-width:560px){.five-reader-link{gap:8px;padding:9px 14px 9px 10px}.five-reader-faces img{width:20px;height:20px;margin-left:-5px}}

/* v3.6 compact work cards */
@media (min-width: 901px){
  .work-card{height:610px}
  .work-thumb{height:170px}
  .work-body{min-height:0}
  .work-summary-mini{margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .compact-preview{height:210px;margin-top:auto;padding-top:6px}
  .preview-two-comments{gap:12px;max-height:180px;overflow:hidden}
  .compact-fade{height:84px;padding-bottom:12px}
}
.five-reader-link{min-width:240px;gap:12px;padding:11px 22px 11px 14px}
.five-reader-faces img{width:26px;height:26px;margin-left:-6px}
@media (max-width:560px){
  .five-reader-link{min-width:220px;gap:9px;padding:10px 16px 10px 11px}
  .five-reader-faces img{width:23px;height:23px;margin-left:-5px}
}


/* v3.7 reader-face button refinement */
.five-reader-link{
  min-width: 286px;
  gap: 14px;
  padding: 12px 26px 12px 16px;
}
.five-reader-faces img{
  width: 30px;
  height: 30px;
  margin-left: -7px;
}
@media (max-width:560px){
  .five-reader-link{
    min-width: 272px;
    gap: 12px;
    padding: 12px 18px 12px 14px;
    background: #01A2CE;
    color: #FFFFFF;
    border-color: #01A2CE;
    box-shadow: 0 10px 24px rgba(40,53,61,.18);
  }
  .five-reader-link:hover,
  .five-reader-link:focus{
    color: #FFFFFF;
    background: #01A2CE;
    border-color: #01A2CE;
  }
  .five-reader-faces img{
    width: 33px;
    height: 33px;
    margin-left: -8px;
    border-color: rgba(255,255,255,.92);
  }
}


/* v3.8 compact header + mobile hamburger + visual-first hero */
.header-inner{padding:9px 0}
.brand-mark{font-size:20px;line-height:1;font-weight:900}
.brand-copy{font-size:9px;line-height:1.25;max-width:300px}
.header-nav{gap:20px;font-size:13px}
.header-nav .btn-small{padding:9px 14px}
.menu-toggle{display:none;width:34px;height:30px;border:0;background:transparent;padding:5px;cursor:pointer;position:relative;z-index:30}
.menu-toggle span{display:block;height:2px;background:#28353D;border-radius:10px;margin:4px 0;transition:.22s ease}
.mobile-hero-overlay{display:none}

@media (max-width:820px){
  .site-header{min-height:44px}
  .inner.header-inner{width:calc(100% - 24px)}
  .header-inner{padding:6px 0;min-height:44px;flex-direction:row;align-items:center;gap:0}
  .brand{gap:0}
  .brand-mark{font-size:19px}
  .brand-copy{display:none}
  .menu-toggle{display:block}
  .header-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:12px 18px 18px;background:rgba(255,255,255,.98);border-bottom:1px solid #F5FAFC;box-shadow:0 16px 28px rgba(40,53,61,.08);flex-direction:column;align-items:stretch;gap:0}
  .header-nav a{display:block;padding:12px 6px;border-bottom:1px solid rgba(245,250,252,.75);font-size:14px}
  .header-nav a:last-child{border-bottom:0;margin-top:8px;text-align:center;padding:11px 14px}
  .menu-open .header-nav{display:flex}
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(2){opacity:0}
  .menu-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

@media (max-width:700px){
  .service-hero{padding:0 0 24px}
  .service-hero-inner{display:flex;flex-direction:column;gap:16px}
  .persona-cloud{order:-1;width:100%;min-height:328px;margin:0;overflow:hidden;border-radius:0 0 28px 28px}
  .mobile-hero-overlay{display:block;position:absolute;left:0;right:0;bottom:0;z-index:8;padding:72px 18px 18px;background:linear-gradient(180deg,rgba(245,250,252,0) 0%,rgba(245,250,252,.72) 48%,rgba(245,250,252,.97) 82%,#FFFFFF 100%);pointer-events:none}
  .mobile-hero-overlay p{margin:0 0 7px;font-size:9px;letter-spacing:.16em;font-weight:800;color:#5C7180}
  .mobile-hero-overlay h2{margin:0;font-size:34px;line-height:1.05;letter-spacing:.01em;font-weight:900;color:#28353D}
  .service-copy{width:100%}
  .service-copy>.eyebrow,.service-copy>h1{display:none}
  .service-lead{font-size:14px;line-height:1.85;margin-bottom:12px}
  .service-points{margin-bottom:16px;gap:4px}
  .service-points li{font-size:13px;line-height:1.7}
  .hero-actions{margin-top:16px;gap:10px}
  .hero-actions .btn{padding:12px 16px;font-size:13px}

  .float-card{width:112px;padding:7px;border-radius:22px;box-shadow:0 15px 34px rgba(40,53,61,.11)}
  .float-card img{border-radius:17px;margin-bottom:7px}
  .float-card-body{padding:0 2px 4px}
  .float-card strong{font-size:13px;margin-bottom:3px}
  .float-card span,.float-card em{font-size:8px}
  .card-sumiko{left:-10px;top:82px}
  .card-misaki{left:70px;top:18px}
  .card-keisuke{left:150px;top:52px}
  .card-yuki{left:230px;top:88px}
  .card-ayaka{left:310px;top:38px}
}

@media (max-width:430px){
  .persona-cloud{min-height:310px}
  .mobile-hero-overlay{padding:66px 14px 16px}
  .mobile-hero-overlay h2{font-size:31px}
  .float-card{width:102px}
  .card-sumiko{left:-24px;top:86px}
  .card-misaki{left:52px;top:16px}
  .card-keisuke{left:126px;top:50px}
  .card-yuki{left:200px;top:86px}
  .card-ayaka{left:274px;top:34px}
}


/* v3.9 mobile profile + reader cards refinement */
/* slightly wider tracking for all button-like controls */
.btn,
.btn-small,
.note-link,
.comment-more-link,
.section-link,
.stack-link,
.detail-actions a,
.membership-join,
.work-note-bottom .btn{
  letter-spacing:.055em;
}

/* reader cards: shorter desktop height with fade around the 3rd line */
.reader-card a{
  height:320px;
  padding:18px;
}
.reader-card img{
  width:96px;
  height:96px;
  margin-bottom:10px;
}
.reader-card h3{
  font-size:21px;
  margin-bottom:4px;
}
.reader-role{
  font-size:13px;
  margin-bottom:9px;
}
.reader-intro{
  position:relative;
  font-size:13px;
  line-height:1.75;
  max-height:68px;
  overflow:hidden;
}
.reader-card a::after{
  height:86px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 24%,rgba(255,255,255,.78) 63%,rgba(255,255,255,1) 100%);
}

@media (max-width:900px){
  /* persona detail: smaller and cleaner on mobile/tablet */
  .profile-hero{padding:28px 0 34px}
  .profile-hero-inner{max-width:620px;gap:22px}
  .profile-visual{max-width:300px;margin:0 auto;width:100%;gap:12px}
  .profile-main-image{border-radius:20px}
  .profile-gallery{gap:8px}
  .profile-thumb{border-radius:13px}
  .profile-thumb img{border-radius:13px}
  .profile-copy{padding-top:0}
}

@media (max-width:560px){
  /* persona detail image is intentionally compact on phones */
  .profile-hero{padding:18px 0 24px}
  .profile-hero-inner{gap:18px}
  .profile-visual{max-width:238px}
  .profile-main-image{border-radius:18px}
  .profile-gallery{gap:6px}
  .profile-thumb{border-radius:10px}
  .profile-thumb img{border-radius:10px}
  .profile-copy{text-align:left}
  .profile-copy .eyebrow{font-size:9px;margin-bottom:8px}
  .profile-copy h1{font-size:25px}
  .profile-roman{font-size:10px;letter-spacing:.16em;margin-bottom:8px}
  .profile-role{font-size:13px;margin-bottom:10px}
  .profile-intro{font-size:13px;line-height:1.8}
  .profile-copy .hero-actions{margin-top:18px}

  /* readers list becomes horizontal bars instead of cramped two-column cards */
  .reader-grid{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .reader-card{
    border-radius:18px;
  }
  .reader-card a{
    height:126px;
    min-height:126px;
    padding:12px 14px;
    display:grid;
    grid-template-columns:78px 1fr;
    grid-template-rows:auto auto 1fr;
    column-gap:14px;
    row-gap:2px;
    align-items:start;
    text-align:left;
  }
  .reader-card img{
    grid-column:1;
    grid-row:1 / 4;
    width:78px;
    height:78px;
    margin:10px 0 0;
    border-radius:22px;
  }
  .reader-card h3{
    grid-column:2;
    grid-row:1;
    margin:1px 0 0;
    font-size:18px;
    line-height:1.3;
  }
  .reader-role{
    grid-column:2;
    grid-row:2;
    margin:0;
    font-size:11px;
    line-height:1.5;
  }
  .reader-intro{
    grid-column:2;
    grid-row:3;
    margin-top:4px;
    font-size:11px;
    line-height:1.55;
    max-height:35px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-align:left;
    padding-right:4px;
  }
  .reader-card a::after{
    left:92px;
    height:48px;
    bottom:0;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 62%,rgba(255,255,255,1) 100%);
  }
}


/* v4.0 work-page pill fix + dark five-reader CTA */
/* On work detail pages the generic .pill used absolute positioning,
   which could escape under the sticky header. Keep the category tag in-flow. */
.work-hero-copy .pill{
  position: static;
  display: inline-flex;
  width: max-content;
  top: auto;
  left: auto;
  margin: 0 0 14px;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Five-reader CTA: navy on every viewport, white type. */
.compact-fade .five-reader-link{
  background: #01A2CE;
  color: #FFFFFF;
  border-color: #01A2CE;
  box-shadow: 0 10px 24px rgba(40,53,61,.18);
}
.compact-fade .five-reader-link:hover,
.compact-fade .five-reader-link:focus{
  background: #005F78;
  color: #FFFFFF;
  border-color: #005F78;
}
.compact-fade .five-reader-faces img{
  border-color: rgba(255,255,255,.95);
}

@media (max-width:560px){
  .compact-fade .five-reader-link{
    background:#01A2CE;
    color:#FFFFFF;
    border-color:#01A2CE;
  }
}

/* v4.1 smaller / more translucent category tags */
.thumb-link .pill{
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.46);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 11px;
  font-size: 10px;
  letter-spacing: .035em;
  box-shadow: 0 6px 16px rgba(40,53,61,.055);
}
.work-hero-copy .pill{
  background: rgba(255,255,255,.34);
  border-color: rgba(255,255,255,.48);
  padding: 5px 11px;
  font-size: 10px;
}
@media (max-width:560px){
  .thumb-link .pill,
  .work-hero-copy .pill{
    padding: 5px 10px;
    font-size: 9.5px;
  }
}


/* v4.2 preview fade raised on desktop + tighter mobile preview */
/* Desktop/tablet: lift the fade higher so the lower blur starts earlier */
.compact-preview{
  height: 300px;
}
.preview-two-comments{
  max-height: 248px;
  overflow: hidden;
}
.compact-fade{
  height: 132px;
  padding: 0 0 16px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.24) 18%,
    rgba(255,255,255,.72) 46%,
    rgba(255,255,255,.94) 72%,
    rgba(255,255,255,1) 100%);
}
.compact-fade .five-reader-link{
  background:#01A2CE;
  color:#FFFFFF;
  border-color:#01A2CE;
}
.compact-fade .five-reader-link:hover,
.compact-fade .five-reader-link:focus{
  background:#005F78;
  color:#FFFFFF;
  border-color:#005F78;
}

@media (min-width: 901px){
  .work-card{height: 590px;}
  .compact-preview{height: 260px; margin-top:auto; padding-top:6px;}
  .preview-two-comments{max-height: 206px; gap: 12px;}
  .compact-fade{height: 122px; padding-bottom: 14px;}
}

@media (max-width: 900px){
  .compact-preview{height: 250px;}
  .preview-two-comments{max-height: 194px;}
  .compact-fade{height: 118px;}
}

/* Phone: end around roughly 4 lines of the first comment. */
@media (max-width: 560px){
  .work-card{height: 560px;}
  .compact-preview{
    height: 166px;
    margin-top: auto;
    padding-top: 4px;
  }
  .preview-two-comments{
    max-height: 116px;
    overflow: hidden;
    gap: 10px;
  }
  .preview-two-comments .preview-detail-bubble:nth-child(n+2){
    display:none;
  }
  .preview-two-comments .preview-detail-bubble .comment-bubble-box p{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.8;
  }
  .compact-fade{
    height: 86px;
    padding-bottom: 12px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.42) 18%,
      rgba(255,255,255,.88) 56%,
      rgba(255,255,255,1) 100%);
  }
  .compact-fade .five-reader-link{
    background:#01A2CE;
    color:#FFFFFF;
    border-color:#01A2CE;
  }
}


/* v4.3 ABOUT expansion + new footer */
.about-hero-v2{
  padding:72px 0 58px;
  background:#FFFFFF;
}
.about-hero-v2-inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:76px;
  align-items:end;
}
.about-hero-v2 h1{
  margin:0;
  font-size:58px;
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:900;
}
.about-hero-lead{
  max-width:580px;
  padding-bottom:4px;
  font-size:16px;
  line-height:2;
  color:#5C7180;
}
.about-hero-lead p{margin:0 0 12px}

.about-persona-top{
  padding-top:64px;
  padding-bottom:34px;
}
.about-persona-photo-stage{
  position:relative;
  min-height:430px;
  margin-top:44px;
}
.about-persona-photo{
  position:absolute;
  width:190px;
  padding:10px 10px 14px;
  background:rgba(255,255,255,.94);
  border:1px solid #F5FAFC;
  border-radius:26px;
  box-shadow:0 24px 50px rgba(40,53,61,.10);
}
.about-persona-photo img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:20px;
  display:block;
  margin-bottom:12px;
}
.about-persona-photo strong{
  display:block;
  font-size:18px;
  margin-bottom:3px;
}
.about-persona-photo span{
  font-size:11px;
  line-height:1.5;
  color:#5C7180;
}
.about-persona-photo.card-1{left:3%;top:86px;transform:rotate(-4deg)}
.about-persona-photo.card-2{left:22%;top:8px;transform:rotate(2deg)}
.about-persona-photo.card-3{left:42%;top:62px;transform:rotate(-1.5deg)}
.about-persona-photo.card-4{left:62%;top:16px;transform:rotate(2.5deg)}
.about-persona-photo.card-5{left:81%;top:96px;transform:rotate(-3deg)}

.about-section-head h2{
  font-size:38px;
}
.about-reading-section{
  background:#FFFFFF;
}
.about-reading-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:64px;
  align-items:center;
}
.about-reading-photo img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 20px 42px rgba(40,53,61,.08);
}
.about-reading-copy h2,
.about-public-grid h2{
  margin:0 0 18px;
  font-size:42px;
  line-height:1.25;
  letter-spacing:-.035em;
}
.about-reading-copy p,
.about-public-grid p{
  margin:0 0 14px;
  font-size:15px;
  line-height:2;
  color:#5C7180;
}
.text-link-arrow{
  display:inline-block;
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  color:#01A2CE;
}

.about-public-section{
  background:#F5FAFC;
}
.about-public-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:64px;
  align-items:center;
}
.about-public-works{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.about-mini-work{
  display:block;
  padding:8px 8px 12px;
  background:#FFFFFF;
  border:1px solid #F5FAFC;
  border-radius:18px;
  box-shadow:0 12px 26px rgba(40,53,61,.06);
}
.about-mini-work img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:13px;
  display:block;
  margin-bottom:9px;
}
.about-mini-work span{
  display:block;
  font-size:11px;
  line-height:1.55;
  font-weight:700;
  color:#28353D;
}

/* footer */
.site-footer-v2{
  margin-top:0;
  padding:54px 0 22px;
  background:#28353D;
  color:#FFFFFF;
  border-top:0;
}
.footer-v2-grid{
  display:grid;
  grid-template-columns:1.4fr .7fr .7fr;
  gap:56px;
  align-items:start;
}
.footer-logo{
  display:inline-block;
  font-size:28px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
  color:#FFFFFF;
  margin-bottom:12px;
}
.footer-v2-brand p{
  margin:0;
  color:#D8E7EF;
  font-size:13px;
  letter-spacing:.04em;
}
.footer-v2-menu{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.footer-v2-label{
  margin:0 0 5px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  color:#5C7180;
}
.footer-v2-menu a{
  color:#FFFFFF;
  font-size:13px;
}
.footer-v2-menu a:hover{color:#FFFFFF}
.footer-v2-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:42px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#5C7180;
  font-size:10px;
  letter-spacing:.04em;
}

@media(max-width:1000px){
  .about-persona-photo{width:160px}
  .about-persona-photo.card-1{left:0}
  .about-persona-photo.card-2{left:20%}
  .about-persona-photo.card-3{left:40%}
  .about-persona-photo.card-4{left:60%}
  .about-persona-photo.card-5{left:79%}
}

@media(max-width:900px){
  .about-hero-v2-inner,
  .about-reading-grid,
  .about-public-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .about-hero-v2 h1{font-size:44px}
  .about-persona-photo-stage{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
    min-height:0;
    margin-top:32px;
  }
  .about-persona-photo{
    position:static;
    width:auto;
    transform:none!important;
    padding:6px 6px 9px;
    border-radius:18px;
  }
  .about-persona-photo img{border-radius:14px;margin-bottom:7px}
  .about-persona-photo strong{font-size:13px}
  .about-persona-photo span{font-size:9px}
  .about-public-works{max-width:620px}
  .footer-v2-grid{
    grid-template-columns:1fr 1fr;
  }
  .footer-v2-brand{
    grid-column:1 / -1;
  }
}

@media(max-width:560px){
  .about-hero-v2{padding:42px 0 34px}
  .about-hero-v2 h1{font-size:34px}
  .about-hero-lead{font-size:14px;line-height:1.9}
  .about-persona-top{padding-top:42px}
  .about-persona-photo-stage{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .about-persona-photo:nth-child(5){grid-column:1 / -1;max-width:50%;justify-self:center}
  .about-reading-copy h2,
  .about-public-grid h2{font-size:30px}
  .about-public-works{grid-template-columns:1fr 1fr}
  .about-mini-work:nth-child(3){grid-column:1 / -1}
  .footer-v2-grid{
    grid-template-columns:1fr;
    gap:26px;
  }
  .footer-v2-brand{grid-column:auto}
  .footer-v2-bottom{
    flex-direction:column;
    gap:6px;
    margin-top:30px;
  }
}


/* v4.4 reader cards: near-square + stronger fade */
@media (min-width:561px){
  .reader-card a{
    height:auto;
    min-height:0;
    aspect-ratio:1 / 1;
    padding:16px;
  }

  .reader-card img{
    width:86px;
    height:86px;
    margin-bottom:8px;
  }

  .reader-card h3{
    font-size:20px;
    margin-bottom:3px;
  }

  .reader-role{
    font-size:12px;
    margin-bottom:7px;
  }

  .reader-intro{
    font-size:12px;
    line-height:1.72;
    max-height:74px;
    overflow:hidden;
  }

  .reader-card a::after{
    height:118px;
    background:linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.18) 16%,
      rgba(255,255,255,.60) 42%,
      rgba(255,255,255,.90) 68%,
      rgba(255,255,255,1) 100%
    );
  }
}

/* keep the mobile horizontal-bar treatment */
@media (max-width:560px){
  .reader-card a{
    aspect-ratio:auto;
  }
}


/* v4.5 Re:READ brand color audit */
.section-link,
.stack-link,
.detail-actions a,
.mag-use-link,
.mag-text-link{
  color:var(--brand);
}

.section-link:hover,
.stack-link:hover,
.detail-actions a:hover,
.mag-use-link:hover,
.mag-text-link:hover{
  color:var(--brand-hover);
}

.hero-copy h1 span,
.mag-category{
  color:var(--brand);
}

.mag-pullquote{
  border-left-color:var(--brand);
}

.btn-primary,
.btn-small,
.compact-fade .five-reader-link{
  background:var(--brand);
  border-color:var(--brand);
  color:#FFFFFF;
}

.btn-primary:hover,
.btn-small:hover,
.compact-fade .five-reader-link:hover{
  background:var(--brand-hover);
  border-color:var(--brand-hover);
}

.service-points li::before{
  background:var(--brand);
}

.profile-thumb.is-active{
  box-shadow:0 0 0 2px var(--brand) inset, 0 10px 22px rgba(40,53,61,.12);
}

/* Keep the second speech bubble distinct without introducing a second brand hue. */
.comment-bubble.right .comment-bubble-box{
  background:var(--brand-soft);
  border-color:var(--brand-line);
}

/* Footer uses the deepest tone of the same navy family. */
.site-footer-v2{
  background:var(--brand-deep);
}


/* v4.6 remove navy shadow from five-reader CTA + shorten mobile work cards */
.compact-fade .five-reader-link{
  box-shadow:none !important;
}

/* smartphone: 80px shorter than the previous 560px work card */
@media (max-width:560px){
  .work-card{
    height:480px !important;
  }

  .work-thumb{
    height:145px;
  }

  .work-body{
    padding:14px 16px;
    min-height:0;
  }

  .work-body h3{
    margin-bottom:8px;
    font-size:18px;
    line-height:1.38;
  }

  .work-summary-mini{
    font-size:12px;
    line-height:1.65;
    margin-bottom:4px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .compact-preview{
    height:142px;
    padding-top:2px;
  }

  .preview-two-comments{
    max-height:94px;
  }

  .preview-two-comments .preview-detail-bubble .comment-bubble-box p{
    -webkit-line-clamp:4;
    font-size:12px;
    line-height:1.7;
  }

  .compact-fade{
    height:78px;
    padding-bottom:10px;
  }
}


/* v4.7 green + brown brand experiment */
:root{
  --earth:#5C7180;
  --earth-soft:#FFFFFF;
}

.eyebrow,
.mag-edition,
.stack-kicker,
.footer-v2-label{
  color:var(--earth);
}

/* keep CTA / links green, use brown only as a quiet editorial accent */
.work-author-inline,
.author-handle{
  color:var(--earth);
}

/* subtle warm line around translucent tags */
.thumb-link .pill,
.work-hero-copy .pill{
  border-color:rgba(92,113,128,.22);
}

/* footer labels stay readable on dark green */
.site-footer-v2 .footer-v2-label{
  color:#D8E7EF;
}


/* v4.8 reader cards: smoother lower fade + slightly shorter horizontal-leaning desktop cards */
@media (min-width:561px){
  .reader-grid{
    gap:20px;
  }

  .reader-card a{
    aspect-ratio:1.08 / 1;
    padding:16px 18px 18px;
    overflow:hidden;
  }

  .reader-card img{
    width:82px;
    height:82px;
    margin-bottom:10px;
  }

  .reader-card h3{
    font-size:19px;
    margin-bottom:4px;
  }

  .reader-role{
    font-size:12px;
    line-height:1.45;
    margin-bottom:8px;
  }

  .reader-intro{
    font-size:12px;
    line-height:1.75;
    max-height:78px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,
      rgba(40,53,61,1) 0%,
      rgba(40,53,61,1) 52%,
      rgba(40,53,61,.94) 66%,
      rgba(40,53,61,.76) 80%,
      rgba(40,53,61,.40) 92%,
      rgba(40,53,61,0) 100%);
    mask-image:linear-gradient(180deg,
      rgba(40,53,61,1) 0%,
      rgba(40,53,61,1) 52%,
      rgba(40,53,61,.94) 66%,
      rgba(40,53,61,.76) 80%,
      rgba(40,53,61,.40) 92%,
      rgba(40,53,61,0) 100%);
  }

  .reader-card a::after{
    height:150px;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.12) 16%,
      rgba(255,255,255,.26) 32%,
      rgba(255,255,255,.48) 50%,
      rgba(255,255,255,.72) 70%,
      rgba(255,255,255,.90) 86%,
      rgba(255,255,255,1) 100%);
  }
}


/* v4.9 work detail comments: profile left, readable text column right */
@media (min-width: 901px){
  .comment-detail-list{
    gap:18px;
  }

  .detail-card{
    display:grid;
    grid-template-columns:190px minmax(0, 1fr);
    grid-template-rows:auto auto;
    column-gap:34px;
    row-gap:12px;
    padding:28px 32px;
    align-items:start;
  }

  .detail-head{
    grid-column:1;
    grid-row:1 / 3;
    margin:0;
    align-items:flex-start;
  }

  .detail-head img{
    width:72px;
    height:72px;
    flex:none;
  }

  .detail-head h3{
    font-size:22px;
    margin-top:2px;
  }

  .detail-head p{
    font-size:12px;
    line-height:1.55;
  }

  .detail-text{
    grid-column:2;
    grid-row:1;
    max-width:720px;
    margin:0;
    font-size:15px;
    line-height:2.05;
  }

  .detail-actions{
    grid-column:2;
    grid-row:2;
    justify-content:flex-end;
    max-width:720px;
    margin-top:4px;
  }
}

/* Paragraph breaks should feel intentional, not overly airy. */
.detail-text br + br{
  line-height:1.2;
}


/* v5.0 lighter / younger Re:READ visual system */
body{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%);
}
.site-header{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(245,250,252,.72);
}
.service-hero{
  position:relative;
  overflow:visible;
  padding:48px 0 52px;
  background:
    radial-gradient(circle at 82% 18%,rgba(245,250,252,.80) 0,rgba(245,250,252,0) 27%),
    radial-gradient(circle at 62% 82%,rgba(245,250,252,.72) 0,rgba(245,250,252,0) 26%),
    linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%);
}
.service-hero::before{
  content:"";
  position:absolute;
  width:280px;height:280px;border-radius:50%;
  right:-70px;top:40px;
  background:rgba(255,255,255,.44);
  filter:blur(2px);
  pointer-events:none;
}
.service-copy h1{
  letter-spacing:-.045em;
}
.service-copy .eyebrow,
.eyebrow{
  color:#5C7180;
}
.hero-actions{margin-top:24px}
.btn-primary,.btn-small,.compact-fade .five-reader-link{
  background:var(--brand);
  border-color:var(--brand);
  box-shadow:none;
}
.btn-primary:hover,.btn-small:hover,.compact-fade .five-reader-link:hover{
  background:var(--brand-hover);
  border-color:var(--brand-hover);
}
.btn-light{
  background:rgba(255,255,255,.78);
  border-color:#F5FAFC;
  backdrop-filter:blur(8px);
}
.float-card{
  background:rgba(255,255,255,.78);
  border-color:rgba(245,250,252,.9);
  box-shadow:0 18px 44px rgba(40,53,61,.09);
}
.thumb-link .pill,
.work-hero-copy .pill{
  border-color:rgba(92,113,128,.20);
}
.comment-bubble.right .comment-bubble-box{
  background:#FFFFFF;
  border-color:#F5FAFC;
}
.work-card,.reader-card,.detail-card,.voice-card,.about-number-grid article,.about-mini-work{
  border-color:#F5FAFC;
  box-shadow:0 12px 30px rgba(40,53,61,.055);
}

/* About: move the short service explanation here and present it as a clean AI-era intro */
.about-hero-v2{
  position:relative;
  overflow:hidden;
  padding:68px 0 58px;
  background:
    radial-gradient(circle at 88% 12%,rgba(245,250,252,.90),transparent 26%),
    radial-gradient(circle at 14% 100%,rgba(245,250,252,.82),transparent 29%),
    linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%);
}
.about-hero-v2::after{
  content:"";
  position:absolute;
  width:360px;height:360px;
  border-radius:50%;
  right:-130px;bottom:-210px;
  background:rgba(255,255,255,.64);
}
.about-hero-v2-inner{position:relative;z-index:1}
.about-hero-v2 h1{
  font-size:60px;
  letter-spacing:-.05em;
  line-height:1.08;
}
.about-hero-lead{
  color:#5C7180;
  font-size:16px;
  line-height:1.95;
}
.about-quick-intro{
  position:relative;
  z-index:1;
  margin-top:42px;
  padding:22px 24px;
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:32px;
  align-items:center;
  border:1px solid rgba(245,250,252,.95);
  border-radius:26px;
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 42px rgba(40,53,61,.06);
}
.about-quick-copy p{margin:0;color:#5C7180;font-size:13px;line-height:1.75}
.about-quick-copy .about-quick-main{
  margin-bottom:6px;
  color:#28353D;
  font-size:16px;
  font-weight:700;
}
.about-quick-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.about-quick-points div{
  min-height:92px;
  padding:14px 14px 12px;
  border-radius:18px;
  background:linear-gradient(180deg,#FFFFFF,#F5FAFC);
  border:1px solid #F5FAFC;
}
.about-quick-points span{
  display:block;
  margin-bottom:10px;
  color:#5C7180;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}
.about-quick-points strong{
  display:block;
  color:#28353D;
  font-size:12px;
  line-height:1.55;
}
.about-persona-section{background:#F5FAFC}
.about-reading-section{background:#FFFFFF}
.about-public-section{background:#FFFFFF}
.membership-cta-section{background:linear-gradient(135deg,#006F8C,#28353D)}
.site-footer-v2{background:#28353D}
.footer-v2-label{color:#D8E7EF!important}

@media(max-width:900px){
  .about-quick-intro{grid-template-columns:1fr;gap:18px}
  .about-quick-points{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .service-hero{padding:24px 0 28px}
  .about-hero-v2{padding:42px 0 36px}
  .about-hero-v2 h1{font-size:36px}
  .about-quick-intro{margin-top:26px;padding:16px;border-radius:20px}
  .about-quick-points{grid-template-columns:1fr;gap:8px}
  .about-quick-points div{min-height:0;display:grid;grid-template-columns:34px 1fr;align-items:center;padding:11px 12px}
  .about-quick-points span{margin:0}
}


/* v5.1 hero persona flow refinement: remove the boxed clipping feel */
.service-hero-inner{overflow:visible;align-items:center}
.persona-cloud{min-height:500px;padding:24px 18px 18px;overflow:visible;isolation:isolate}
.float-card{will-change:transform}
.card-sumiko{left:6px}
.card-misaki{left:142px}
.card-keisuke{left:286px}
.card-yuki{left:430px}
.card-ayaka{left:566px}

@media (max-width:1200px){
  .persona-cloud{min-height:470px;padding:18px 8px 14px}
  .card-sumiko{left:0}
  .card-misaki{left:112px}
  .card-keisuke{left:242px}
  .card-yuki{left:372px}
  .card-ayaka{left:492px}
}

@media (max-width:900px){
  .persona-cloud{min-height:440px}
}

@media (max-width:700px){
  .service-hero{overflow:visible}
  .persona-cloud{order:-1;width:100%;min-height:344px;margin:0;padding:10px 0 6px;overflow:visible;border-radius:0}
  .card-sumiko{left:-4px;top:94px}
  .card-misaki{left:72px;top:14px}
  .card-keisuke{left:152px;top:50px}
  .card-yuki{left:232px;top:88px}
  .card-ayaka{left:312px;top:36px}
}

@media (max-width:430px){
  .persona-cloud{min-height:324px}
  .card-sumiko{left:-16px;top:96px}
  .card-misaki{left:54px;top:14px}
  .card-keisuke{left:126px;top:48px}
  .card-yuki{left:198px;top:84px}
  .card-ayaka{left:270px;top:32px}
}


/* v5.2 reader card fade refinement: narrower, softer lower fade */
@media (min-width:561px){
  .reader-intro{
    -webkit-mask-image:linear-gradient(180deg,
      rgba(40,53,61,1) 0%,
      rgba(40,53,61,1) 70%,
      rgba(40,53,61,.98) 78%,
      rgba(40,53,61,.88) 86%,
      rgba(40,53,61,.55) 94%,
      rgba(40,53,61,0) 100%);
    mask-image:linear-gradient(180deg,
      rgba(40,53,61,1) 0%,
      rgba(40,53,61,1) 70%,
      rgba(40,53,61,.98) 78%,
      rgba(40,53,61,.88) 86%,
      rgba(40,53,61,.55) 94%,
      rgba(40,53,61,0) 100%);
  }

  .reader-card a::after{
    height:102px;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.06) 34%,
      rgba(255,255,255,.20) 52%,
      rgba(255,255,255,.48) 72%,
      rgba(255,255,255,.82) 88%,
      rgba(255,255,255,1) 100%);
  }
}

@media (max-width:560px){
  .reader-intro{
    max-height:31px;
  }

  .reader-card a::after{
    left:92px;
    height:36px;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.26) 54%,
      rgba(255,255,255,.88) 82%,
      rgba(255,255,255,1) 100%);
  }
}


/* v5.3 top hero gallery: continuous vertical columns */
.service-hero-inner{grid-template-columns:minmax(320px,470px) minmax(440px,1fr);gap:54px;align-items:center}
.service-copy{position:relative;z-index:2}
.service-copy h1{font-size:clamp(56px,6.4vw,84px);line-height:.98;margin:0;letter-spacing:-.06em}
.persona-cloud{
  position:relative;
  min-height:640px;
  padding:18px;
  overflow:hidden;
  border-radius:40px;
  isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,.18));
  border:1px solid rgba(245,250,252,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.persona-cloud::before,
.persona-cloud::after{
  content:"";
  position:absolute;
  left:0;right:0;z-index:2;pointer-events:none;
}
.persona-cloud::before{top:0;height:72px;background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.72) 42%,rgba(255,255,255,0) 100%)}
.persona-cloud::after{bottom:0;height:84px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 54%,rgba(255,255,255,1) 100%)}
.hero-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;height:604px;align-items:start}
.hero-gallery-column{position:relative;height:100%;overflow:hidden}
.hero-gallery-column.offset-1{padding-top:0}
.hero-gallery-column.offset-2{padding-top:58px}
.hero-gallery-column.offset-3{padding-top:28px}
.hero-gallery-column.offset-4{padding-top:86px}
.hero-gallery-track{display:flex;flex-direction:column;gap:16px;will-change:transform}
.hero-gallery-column.dir-down .hero-gallery-track{animation:heroGalleryDown 34s linear infinite}
.hero-gallery-column.dir-up .hero-gallery-track{animation:heroGalleryUp 34s linear infinite}
.hero-gallery-item{
  display:block;
  aspect-ratio:1 / 1.42;
  overflow:hidden;
  border-radius:22px;
  background:#FFFFFF;
  border:1px solid rgba(245,250,252,.9);
  box-shadow:0 16px 40px rgba(40,53,61,.10);
  transform:translateZ(0);
}
.hero-gallery-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hero-gallery-item:hover img{transform:scale(1.04)}
@keyframes heroGalleryUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes heroGalleryDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}

@media (max-width:1200px){
  .service-hero-inner{grid-template-columns:minmax(280px,400px) minmax(360px,1fr);gap:38px}
  .persona-cloud{min-height:560px;padding:14px;border-radius:34px}
  .hero-gallery{height:520px;gap:14px}
  .hero-gallery-track{gap:14px}
  .hero-gallery-column.offset-2{padding-top:44px}
  .hero-gallery-column.offset-3{padding-top:20px}
  .hero-gallery-column.offset-4{padding-top:64px}
  .hero-gallery-item{border-radius:18px}
}

@media (max-width:900px){
  .service-hero-inner{grid-template-columns:1fr;gap:24px}
  .persona-cloud{order:-1;min-height:430px;padding:12px 12px 10px;border-radius:0 0 30px 30px}
  .hero-gallery{height:396px;gap:10px}
  .hero-gallery-track{gap:10px}
  .hero-gallery-column.offset-2{padding-top:30px}
  .hero-gallery-column.offset-3{padding-top:14px}
  .hero-gallery-column.offset-4{padding-top:44px}
  .hero-gallery-item{border-radius:16px}
}

@media (max-width:700px){
  .service-hero{padding:0 0 28px}
  .persona-cloud{width:100%;min-height:352px;margin:0;padding:10px 10px 8px;border-radius:0 0 28px 28px}
  .hero-gallery{grid-template-columns:repeat(3,minmax(0,1fr));height:332px;gap:10px}
  .hero-gallery-column:nth-child(4){display:none}
  .hero-gallery-column.offset-1{padding-top:0}
  .hero-gallery-column.offset-2{padding-top:28px}
  .hero-gallery-column.offset-3{padding-top:12px}
  .hero-gallery-item{aspect-ratio:1 / 1.36;border-radius:15px}
}

@media (max-width:430px){
  .persona-cloud{min-height:320px;padding:10px 8px 6px}
  .hero-gallery{grid-template-columns:repeat(2,minmax(0,1fr));height:292px;gap:9px}
  .hero-gallery-column:nth-child(3),.hero-gallery-column:nth-child(4){display:none}
  .hero-gallery-column.offset-2{padding-top:24px}
  .hero-gallery-item{aspect-ratio:1 / 1.32;border-radius:14px}
}


/* v5.4 work detail comments refined */
.detail-side{display:flex;flex-direction:column;gap:14px}
.detail-actions-side{justify-content:flex-start;margin-top:2px}
.detail-page-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(216,231,239,.95);
  background:#FFFFFF;color:#01A2CE;font-size:14px;font-weight:700;
  letter-spacing:.02em;transition:.2s ease;
}
.detail-page-btn:hover{background:#FFFFFF;border-color:#5C7180;transform:translateY(-1px)}
.detail-text{font-size:16px;line-height:2;color:#28353D}
.detail-text br{content:""}

@media (min-width: 901px){
  .detail-card{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    column-gap:46px;
    row-gap:0;
    padding:32px 34px;
    align-items:center;
  }
  .detail-side{
    grid-column:1;
    align-self:center;
    justify-content:center;
    min-height:100%;
  }
  .detail-head{
    margin:0;
    align-items:center;
    gap:16px;
  }
  .detail-head img{width:92px;height:92px;flex:none}
  .detail-head h3{font-size:22px;margin:0 0 6px}
  .detail-head p{font-size:14px;line-height:1.7}
  .detail-text{
    grid-column:2;
    margin:0;
    max-width:940px;
    font-size:18px;
    line-height:1.95;
  }
}

@media (max-width: 900px){
  .detail-card{padding:24px 22px}
  .detail-side{margin-bottom:14px}
  .detail-head{align-items:center;margin-bottom:0}
  .detail-head img{width:72px;height:72px}
  .detail-head h3{font-size:26px}
  .detail-head p{font-size:14px;line-height:1.65}
  .detail-text{font-size:15px;line-height:1.95;margin:0}
}


/* v5.5 top hero refined: smaller headline, de-boxed gallery, softer continuous flow */
.service-copy h1{max-width:4.2em}

@media (min-width: 901px){
  .service-hero{padding:52px 0 58px;overflow:visible}
  .service-hero-inner{
    grid-template-columns:minmax(300px,410px) minmax(560px,1fr);
    gap:34px;
    align-items:center;
  }
  .service-copy h1{
    font-size:clamp(48px,5.1vw,72px);
    line-height:.92;
    letter-spacing:-.05em;
    margin:0;
  }
  .persona-cloud{
    min-height:650px;
    width:calc(100% + max(0px, 50vw - 590px));
    margin-right:calc(-1 * max(0px, 50vw - 590px));
    padding:0 0 0 8px;
    overflow:visible;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .persona-cloud::before,
  .persona-cloud::after{
    left:-12px;
    right:-12px;
    z-index:3;
  }
  .persona-cloud::before{
    top:-2px;
    height:82px;
    background:linear-gradient(180deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.76) 34%,
      rgba(255,255,255,.22) 66%,
      rgba(255,255,255,0) 100%);
  }
  .persona-cloud::after{
    bottom:-2px;
    height:96px;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.18) 30%,
      rgba(255,255,255,.76) 72%,
      rgba(255,255,255,1) 100%);
  }
  .hero-gallery{
    height:650px;
    gap:18px;
    align-items:start;
    overflow:visible;
  }
  .hero-gallery-column{
    height:100%;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,
      rgba(40,53,61,0) 0%,
      rgba(40,53,61,.85) 9%,
      rgba(40,53,61,1) 18%,
      rgba(40,53,61,1) 82%,
      rgba(40,53,61,.85) 91%,
      rgba(40,53,61,0) 100%);
    mask-image:linear-gradient(180deg,
      rgba(40,53,61,0) 0%,
      rgba(40,53,61,.85) 9%,
      rgba(40,53,61,1) 18%,
      rgba(40,53,61,1) 82%,
      rgba(40,53,61,.85) 91%,
      rgba(40,53,61,0) 100%);
  }
  .hero-gallery-column.offset-1{padding-top:12px}
  .hero-gallery-column.offset-2{padding-top:74px}
  .hero-gallery-column.offset-3{padding-top:34px}
  .hero-gallery-column.offset-4{padding-top:104px}
  .hero-gallery-track{gap:18px;will-change:transform}
  .hero-gallery-column.dir-down .hero-gallery-track,
  .hero-gallery-column.dir-up .hero-gallery-track{animation-duration:52s}
  .hero-gallery-item{
    aspect-ratio:1 / 1.48;
    border-radius:15px;
    border:1px solid rgba(245,250,252,.72);
    background:rgba(255,255,255,.68);
    box-shadow:0 14px 30px rgba(40,53,61,.08);
    transform:skewX(-3.8deg) translateZ(0);
    transform-origin:center;
  }
  .hero-gallery-item img{
    transform:skewX(3.8deg) scale(1.085);
    transform-origin:center;
    transition:transform .7s ease;
  }
  .hero-gallery-item:hover img{transform:skewX(3.8deg) scale(1.12)}
}

@media (max-width: 1200px) and (min-width: 901px){
  .service-hero-inner{grid-template-columns:minmax(280px,360px) minmax(460px,1fr);gap:28px}
  .service-copy h1{font-size:clamp(44px,4.7vw,62px)}
  .persona-cloud{min-height:600px}
  .hero-gallery{height:600px;gap:15px}
  .hero-gallery-track{gap:15px}
  .hero-gallery-column.offset-2{padding-top:58px}
  .hero-gallery-column.offset-3{padding-top:28px}
  .hero-gallery-column.offset-4{padding-top:86px}
}

@media (max-width: 900px){
  .service-hero{padding:0 0 28px;overflow:visible}
  .service-hero-inner{grid-template-columns:1fr;gap:24px}
  .service-copy h1{
    font-size:clamp(34px,9.2vw,48px);
    line-height:.95;
    letter-spacing:-.045em;
    max-width:5.2em;
  }
  .persona-cloud{
    order:-1;
    width:100%;
    min-height:372px;
    margin:0;
    padding:0;
    overflow:visible;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .persona-cloud::before,
  .persona-cloud::after{left:-6px;right:-6px;z-index:3}
  .persona-cloud::before{
    height:48px;
    background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.68) 45%,rgba(255,255,255,0) 100%);
  }
  .persona-cloud::after{
    height:54px;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.48) 56%,rgba(255,255,255,1) 100%);
  }
  .hero-gallery{height:372px;gap:10px;overflow:visible}
  .hero-gallery-column{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,rgba(40,53,61,0) 0%,rgba(40,53,61,.9) 10%,rgba(40,53,61,1) 20%,rgba(40,53,61,1) 80%,rgba(40,53,61,.9) 90%,rgba(40,53,61,0) 100%);
    mask-image:linear-gradient(180deg,rgba(40,53,61,0) 0%,rgba(40,53,61,.9) 10%,rgba(40,53,61,1) 20%,rgba(40,53,61,1) 80%,rgba(40,53,61,.9) 90%,rgba(40,53,61,0) 100%);
  }
  .hero-gallery-track{gap:10px}
  .hero-gallery-column.dir-down .hero-gallery-track,
  .hero-gallery-column.dir-up .hero-gallery-track{animation-duration:48s}
  .hero-gallery-item{
    border-radius:12px;
    border:1px solid rgba(245,250,252,.64);
    box-shadow:0 12px 24px rgba(40,53,61,.06);
    transform:skewX(-3deg) translateZ(0);
  }
  .hero-gallery-item img{transform:skewX(3deg) scale(1.08)}
  .hero-gallery-item:hover img{transform:skewX(3deg) scale(1.11)}
}

@media (max-width: 700px){
  .hero-gallery{grid-template-columns:repeat(3,minmax(0,1fr));height:340px;gap:10px}
  .hero-gallery-column.offset-1{padding-top:6px}
  .hero-gallery-column.offset-2{padding-top:28px}
  .hero-gallery-column.offset-3{padding-top:14px}
  .hero-gallery-item{aspect-ratio:1 / 1.34}
}

@media (max-width: 430px){
  .persona-cloud{min-height:324px}
  .hero-gallery{grid-template-columns:repeat(2,minmax(0,1fr));height:314px;gap:9px}
  .hero-gallery-column:nth-child(3),.hero-gallery-column:nth-child(4){display:none}
  .hero-gallery-column.offset-2{padding-top:22px}
  .hero-gallery-item{aspect-ratio:1 / 1.28;border-radius:11px}
}


/* v5.6 detail cards + footer spacing refinement */
.site-footer-v2{
  margin-top:72px;
  padding:68px 0 26px;
}

.detail-side{
  justify-content:center;
}

.detail-head{
  display:flex;
  align-items:center;
}

.detail-head-avatar{
  display:inline-flex;
  flex:none;
  border-radius:50%;
}

.detail-head-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}

.detail-actions-side{
  display:flex;
  justify-content:flex-start;
  grid-column:auto;
  grid-row:auto;
  max-width:none;
  margin-top:6px;
}

.detail-page-btn{
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  color:#5C7180;
  background:rgba(255,255,255,.7);
}

.detail-text{
  font-size:14px;
  line-height:1.92;
  font-weight:400;
  color:#5C7180;
}

@media (min-width: 901px){
  .detail-card{
    grid-template-columns:250px minmax(0, 720px);
    column-gap:62px;
    padding:36px 40px;
    align-items:center;
  }

  .detail-side{
    align-self:center;
  }

  .detail-head{
    gap:18px;
    align-items:center;
  }

  .detail-head img{
    width:84px;
    height:84px;
  }

  .detail-head h3{
    font-size:20px;
    margin:0 0 2px;
  }

  .detail-head p{
    font-size:12px;
    line-height:1.55;
    margin:0;
    color:#5C7180;
  }

  .detail-text{
    max-width:700px;
    font-size:14px;
    line-height:1.95;
    letter-spacing:.01em;
  }
}

@media (max-width: 900px){
  .site-footer-v2{
    margin-top:52px;
    padding:58px 0 24px;
  }

  .detail-card{
    padding:26px 22px;
  }

  .detail-head{
    gap:14px;
    align-items:center;
  }

  .detail-head-copy{
    gap:2px;
  }

  .detail-head h3{
    font-size:22px;
    margin:0 0 2px;
  }

  .detail-head p{
    margin:0;
    font-size:13px;
    color:#5C7180;
  }

  .detail-actions-side{
    margin-top:8px;
  }

  .detail-page-btn{
    min-height:24px;
    padding:0 9px;
    font-size:10px;
  }

  .detail-text{
    font-size:13px;
    line-height:1.9;
    margin:0;
  }
}


/* v5.7 hero reader panels + simplified header */
.brand{gap:0}
.brand-copy{display:none !important}

@media (min-width: 901px){
  .service-hero{padding:40px 0 52px}
  .service-hero-inner{
    grid-template-columns:minmax(280px, 360px) minmax(860px, 1fr);
    gap:26px;
    align-items:center;
  }
  .service-copy h1{
    max-width:4em;
    font-size:clamp(38px,4.5vw,58px);
    line-height:.96;
    letter-spacing:-.05em;
  }
  .persona-cloud{
    min-height:610px;
    width:calc(100% + max(0px, 50vw - 660px) + 60px);
    margin-right:calc(-1 * (max(0px, 50vw - 660px) + 60px));
    padding-right:0;
  }
  .hero-gallery{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    height:610px;
  }
  .hero-gallery-column{overflow:hidden}
  .hero-gallery-column.offset-1{padding-top:0}
  .hero-gallery-column.offset-2{padding-top:58px}
  .hero-gallery-column.offset-3{padding-top:24px}
  .hero-gallery-column.offset-4{padding-top:84px}
  .hero-gallery-column.offset-5{padding-top:38px}
  .hero-gallery-column.offset-6{padding-top:104px}
  .hero-gallery-track{gap:12px}
  .hero-gallery-column.dir-down .hero-gallery-track,
  .hero-gallery-column.dir-up .hero-gallery-track{animation-duration:76s}
}

.hero-gallery-item{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:0.76;
  border-radius:14px;
  border:1px solid rgba(245,250,252,.82);
  background:#FFFFFF;
  box-shadow:0 10px 24px rgba(40,53,61,.08);
  transform:skewX(-4deg) translateZ(0);
}
.hero-gallery-item img{
  width:112%;
  height:100%;
  object-fit:cover;
  transform:skewX(4deg) scale(1.08) translateX(-4%);
  transform-origin:center;
  transition:transform .8s ease;
}
.hero-gallery-item:hover img{transform:skewX(4deg) scale(1.12) translateX(-4%)}
.hero-gallery-meta{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(245,250,252,.95);
  backdrop-filter:blur(8px);
  transform:skewX(4deg);
}
.hero-gallery-meta strong{
  font-size:14px;
  line-height:1.1;
  color:#28353D;
  font-weight:800;
}
.hero-gallery-meta small{
  font-size:10px;
  line-height:1.3;
  color:#5C7180;
  font-weight:700;
}

@media (max-width: 900px){
  .service-copy h1{
    font-size:clamp(30px,8.4vw,42px);
    max-width:4.4em;
  }
  .persona-cloud{min-height:356px}
  .hero-gallery{
    grid-template-columns:repeat(4,minmax(0,1fr));
    height:356px;
    gap:8px;
  }
  .hero-gallery-column:nth-child(5),
  .hero-gallery-column:nth-child(6){display:none}
  .hero-gallery-column.offset-1{padding-top:0}
  .hero-gallery-column.offset-2{padding-top:22px}
  .hero-gallery-column.offset-3{padding-top:8px}
  .hero-gallery-column.offset-4{padding-top:34px}
  .hero-gallery-track{gap:8px}
  .hero-gallery-column.dir-down .hero-gallery-track,
  .hero-gallery-column.dir-up .hero-gallery-track{animation-duration:72s}
  .hero-gallery-item{
    border-radius:11px;
    aspect-ratio:0.72;
  }
  .hero-gallery-item img{
    width:116%;
    transform:skewX(4deg) scale(1.08) translateX(-6%);
  }
  .hero-gallery-meta{
    top:6px;
    left:6px;
    right:6px;
    padding:6px 7px;
    border-radius:10px;
  }
  .hero-gallery-meta strong{font-size:11px}
  .hero-gallery-meta small{font-size:8.5px; line-height:1.2}
}

@media (max-width: 560px){
  .hero-gallery{height:318px}
  .mobile-hero-overlay{display:none}
}

.works-section{padding-top:12px}
.works-grid{margin-top:0}


/* v57 persona naming, hero gallery, and compact meta tuning */
.site-header .brand-copy{display:none !important}

.service-hero{overflow:hidden}
.service-hero-inner{
  grid-template-columns:minmax(280px,380px) minmax(0,1fr);
  gap:48px;
  align-items:center;
}
.service-copy h1{
  font-size:clamp(56px,6.6vw,92px);
  line-height:.92;
  letter-spacing:-.05em;
  max-width:5.4em;
}
.service-copy .eyebrow{
  font-size:11px;
  color:#5C7180;
  letter-spacing:.18em;
}
.persona-cloud{
  min-height:620px;
  width:calc(100% + max(0px, 50vw - 620px) + 88px);
  margin-right:calc(-1 * (max(0px, 50vw - 620px) + 88px));
  padding-right:0;
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(40,53,61,.9) 8%, rgba(40,53,61,.95) 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(40,53,61,.9) 8%, rgba(40,53,61,.95) 92%, transparent 100%);
}
.hero-gallery{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  height:620px;
  overflow:visible;
}
.hero-gallery-column{
  overflow:hidden;
}
.hero-gallery-column.offset-1{padding-top:0}
.hero-gallery-column.offset-2{padding-top:64px}
.hero-gallery-column.offset-3{padding-top:26px}
.hero-gallery-column.offset-4{padding-top:92px}
.hero-gallery-column.offset-5{padding-top:40px}
.hero-gallery-column.offset-6{padding-top:112px}
.hero-gallery-track{
  gap:14px;
}
.hero-gallery-column.dir-down .hero-gallery-track,
.hero-gallery-column.dir-up .hero-gallery-track{
  animation-duration:92s;
}
.hero-gallery-item{
  aspect-ratio:.72;
  border-radius:12px;
  border:0;
  background:transparent;
  box-shadow:none;
  transform:skewX(-6deg) translateZ(0);
}
.hero-gallery-item img{
  width:118%;
  height:100%;
  object-fit:cover;
  transform:skewX(6deg) scale(1.06) translateX(-8%);
  border-radius:12px;
}
.hero-gallery-item:hover img{
  transform:skewX(6deg) scale(1.09) translateX(-8%);
}
.hero-gallery-meta{
  top:10px;
  left:10px;
  right:10px;
  gap:2px;
  padding:7px 9px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(245,250,252,.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transform:skewX(6deg);
}
.hero-gallery-meta strong{
  font-size:12px;
  line-height:1.08;
}
.hero-gallery-meta small{
  font-size:9px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.works-section{padding-top:22px}
.works-grid{margin-top:0}

.reader-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.reader-card a{
  height:400px;
  padding:22px 22px 18px;
}
.reader-card a::after{
  height:88px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 34%,rgba(255,255,255,.56) 60%,rgba(255,255,255,.92) 82%,rgba(255,255,255,1) 100%);
}
.reader-card img{
  width:112px;
  height:112px;
  margin-bottom:12px;
}
.reader-card h3{
  margin:0 0 8px;
  font-size:clamp(24px,1.95vw,32px);
  line-height:1.02;
}
.reader-role{
  margin:0 0 12px;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.reader-intro{
  font-size:13px;
  line-height:1.82;
}

.comment-preview{height:186px}
.compact-preview{height:186px}
.compact-fade{
  padding:66px 0 16px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 26%, rgba(255,255,255,.58) 58%, rgba(255,255,255,.92) 82%, rgba(255,255,255,1) 100%);
}
.five-reader-link,
.compact-fade .five-reader-link{
  min-width:220px;
  box-shadow:none;
}

.detail-card{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  column-gap:66px;
  align-items:center;
  padding:38px 40px;
}
.detail-head{
  gap:16px;
  align-items:center;
  margin-bottom:0;
}
.detail-head-copy{display:flex;flex-direction:column;align-items:flex-start}
.detail-head img{
  width:84px;
  height:84px;
}
.detail-head h3{
  margin:0 0 4px;
  font-size:20px;
}
.detail-head p{
  margin:0;
  font-size:12px;
  color:#5C7180;
  white-space:nowrap;
}
.detail-actions-side{
  margin-top:8px;
}
.detail-page-btn{
  min-height:22px;
  padding:0 8px;
  border:1px solid #D8E7EF;
  background:#FFFFFF;
  color:#5C7180;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.detail-text{
  max-width:780px;
  margin:0;
  font-size:13px;
  line-height:1.96;
  font-weight:400;
  color:#28353D;
}

@media (max-width: 1100px){
  .reader-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width: 900px){
  .service-hero{padding:34px 0 42px}
  .service-hero-inner{
    grid-template-columns:1fr;
    gap:24px;
  }
  .service-copy h1{
    font-size:clamp(42px,9vw,56px);
    max-width:6em;
  }
  .persona-cloud{
    min-height:360px;
    width:100%;
    margin-right:0;
  }
  .hero-gallery{
    grid-template-columns:repeat(4,minmax(0,1fr));
    height:360px;
    gap:10px;
  }
  .hero-gallery-column:nth-child(5),
  .hero-gallery-column:nth-child(6){display:none}
  .hero-gallery-column.offset-1{padding-top:0}
  .hero-gallery-column.offset-2{padding-top:24px}
  .hero-gallery-column.offset-3{padding-top:10px}
  .hero-gallery-column.offset-4{padding-top:38px}
  .hero-gallery-track{gap:10px}
  .hero-gallery-column.dir-down .hero-gallery-track,
  .hero-gallery-column.dir-up .hero-gallery-track{animation-duration:84s}
  .hero-gallery-item{aspect-ratio:.7;border-radius:10px;transform:skewX(-5deg)}
  .hero-gallery-item img{border-radius:10px;transform:skewX(5deg) scale(1.06) translateX(-8%)}
  .hero-gallery-meta{top:6px;left:6px;right:6px;padding:6px 7px;border-radius:9px;transform:skewX(5deg)}
  .hero-gallery-meta strong{font-size:10px}
  .hero-gallery-meta small{font-size:8px}

  .reader-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .reader-card a{height:338px;padding:18px 16px 14px}
  .reader-card img{width:92px;height:92px}
  .reader-card h3{font-size:clamp(20px,5.6vw,28px)}
  .reader-role{font-size:11px;margin-bottom:10px}
  .reader-intro{font-size:12px;line-height:1.76}

  .detail-card{
    grid-template-columns:1fr;
    row-gap:18px;
    padding:24px 22px;
    align-items:start;
  }
  .detail-head img{width:74px;height:74px}
  .detail-head h3{font-size:22px}
  .detail-head p{font-size:11px}
  .detail-text{font-size:12.5px;line-height:1.9}
}

@media (max-width: 560px){
  .service-copy h1{
    font-size:clamp(36px,10.6vw,48px);
    max-width:6.2em;
  }
  .hero-actions{gap:10px}
  .btn{padding:13px 20px}
  .hero-gallery{height:328px}
  .reader-card a{height:324px}
  .comment-preview,.compact-preview{height:170px}
  .compact-fade{padding:58px 0 14px}
}


/* v58 warmer speech bubbles, alternating preview starts, and copy refinement */
.comment-bubble-box{
  background:#F5FAFC;
  border-color:#F5FAFC;
  box-shadow:0 8px 20px rgba(40,53,61,.04);
}
.comment-bubble.right .comment-bubble-box{
  background:#F5FAFC;
  border-color:#F5FAFC;
}
.work-card.preview-start-green .preview-two-comments .preview-detail-bubble:first-child .comment-bubble-box{
  background:#F5FAFC;
  border-color:#F5FAFC;
}
.work-card.preview-start-green .preview-two-comments .preview-detail-bubble:nth-child(2) .comment-bubble-box{
  background:#F5FAFC;
  border-color:#F5FAFC;
}
.work-card.preview-start-green .preview-two-comments .preview-detail-bubble:first-child .comment-reader-name,
.work-card.preview-start-green .preview-two-comments .preview-detail-bubble:nth-child(2) .comment-reader-name{
  color:#5C7180;
}

.detail-card{
  position:relative;
  align-items:center;
}
.detail-quote-bubble{
  position:relative;
  border-radius:26px;
  padding:20px 24px;
  box-shadow:0 12px 26px rgba(40,53,61,.04);
}
.detail-card.tone-warm .detail-quote-bubble{
  background:linear-gradient(180deg,#F5FAFC 0%,#F5FAFC 100%);
  border:1px solid #F5FAFC;
}
.detail-card.tone-green .detail-quote-bubble{
  background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%);
  border:1px solid #F5FAFC;
}
.detail-quote-bubble::before{
  content:'';
  position:absolute;
  left:-9px;
  top:34px;
  width:18px;
  height:18px;
  border-radius:4px;
  transform:rotate(45deg);
}
.detail-card.tone-warm .detail-quote-bubble::before{
  background:#F5FAFC;
  border-left:1px solid #F5FAFC;
  border-bottom:1px solid #F5FAFC;
}
.detail-card.tone-green .detail-quote-bubble::before{
  background:#FFFFFF;
  border-left:1px solid #F5FAFC;
  border-bottom:1px solid #F5FAFC;
}
.detail-text{
  color:#28353D;
}
.detail-card.tone-warm .detail-text strong,
.detail-card.tone-green .detail-text strong{
  font-weight:700;
}

.about-quick-copy p:last-child,
.section-head.left p:last-child{
  max-width:58em;
}

@media (max-width: 900px){
  .detail-quote-bubble{
    padding:18px 18px 18px 20px;
  }
  .detail-quote-bubble::before{
    left:18px;
    top:-8px;
    width:16px;
    height:16px;
    transform:rotate(45deg);
    border-left:none !important;
    border-bottom:none !important;
  }
  .detail-card.tone-warm .detail-quote-bubble::before{
    border-top:1px solid #F5FAFC;
    border-left:1px solid #F5FAFC;
  }
  .detail-card.tone-green .detail-quote-bubble::before{
    border-top:1px solid #F5FAFC;
    border-left:1px solid #F5FAFC;
  }
}


/* v59 persona traits chips */
.profile-traits{display:flex;flex-wrap:wrap;gap:10px 10px;margin-top:18px;max-width:560px}
.profile-trait{display:inline-flex;align-items:center;min-height:34px;padding:8px 14px;border-radius:999px;background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%);border:1px solid #F5FAFC;color:#5C7180;font-size:13px;font-weight:700;letter-spacing:.02em;box-shadow:0 8px 18px rgba(40,53,61,.05)}
.profile-trait:nth-child(3n+2){background:linear-gradient(180deg,#F5FAFC 0%,#F5FAFC 100%);border-color:#F5FAFC;color:#5C7180}
.profile-trait:nth-child(3n){background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%);border-color:#F5FAFC;color:#006F8C}
@media (max-width: 900px){.profile-traits{gap:8px 8px;margin-top:14px}.profile-trait{min-height:30px;padding:7px 11px;font-size:12px}}
@media (max-width: 560px){.profile-traits{max-width:none}.profile-trait{font-size:11px;padding:6px 10px}}



/* v61: hero gallery shape refinement
   写真を菱形にするのではなく、カードそのものをゆるい平行四辺形に調整 */
.hero-gallery-item{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  box-shadow:none;
  transform:skewX(-6deg) translateZ(0);
  transform-origin:center center;
  isolation:isolate;
}
.hero-gallery-item img{
  width:114%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  transform:skewX(6deg) scale(1.04) translateX(-6%);
  transform-origin:center center;
}
.hero-gallery-item:hover img{
  transform:skewX(6deg) scale(1.08) translateX(-6%);
}
.hero-gallery-meta{
  transform:skewX(6deg);
  transform-origin:center center;
  top:8px;
  left:8px;
  right:8px;
}

@media (max-width: 900px){
  .hero-gallery-item{
    transform:skewX(-5deg) translateZ(0);
    border-radius:10px;
  }
  .hero-gallery-item img{
    width:112%;
    transform:skewX(5deg) scale(1.04) translateX(-5%);
  }
  .hero-gallery-item:hover img{
    transform:skewX(5deg) scale(1.07) translateX(-5%);
  }
  .hero-gallery-meta{
    transform:skewX(5deg);
  }
}



/* v6.2: work preview flow, compact persona profile, sticky-header anchor offset */
html{scroll-padding-top:88px}
#works,#readers{scroll-margin-top:88px}

/* Start the reader comment immediately after each individual work summary.
   Do not vertically align comment starts between cards. */
.work-body{justify-content:flex-start}
.work-summary-mini{flex:none}
.comment-preview.compact-preview{
  margin-top:0 !important;
  padding-top:0 !important;
  flex:none;
}

/* Persona profile: slightly more compact vertically on desktop */
@media (min-width:901px){
  .profile-hero{padding:34px 0 38px}
  .profile-hero-inner{
    grid-template-columns:minmax(250px,292px) minmax(360px,480px);
    gap:50px;
    align-items:center;
    max-width:900px;
  }
  .profile-visual{gap:11px}
  .profile-gallery{gap:9px}
  .profile-thumb{border-radius:14px}
  .profile-thumb img{border-radius:14px}
  .profile-copy{padding-top:0}
  .profile-copy .eyebrow{margin-bottom:8px}
  .profile-copy h1{margin-bottom:2px;font-size:42px}
  .profile-roman{margin:0 0 12px;font-size:12px;letter-spacing:.22em}
  .profile-role{margin:0 0 12px;font-size:15px}
  .profile-intro{font-size:14px;line-height:1.85}
  .profile-traits{margin-top:12px;gap:7px 8px}
  .profile-trait{min-height:30px;padding:6px 11px;font-size:11px}
  .profile-copy .hero-actions{margin-top:18px}
  .profile-copy .hero-actions .btn{padding:13px 24px;min-width:0}
}

@media (max-width:900px){
  html{scroll-padding-top:68px}
  #works,#readers{scroll-margin-top:68px}
  .comment-preview.compact-preview{margin-top:0 !important;padding-top:0 !important}
}

/* v6.3 hero gallery + smaller service copy */
.mobile-hero-overlay{display:none !important}

.service-copy .hero-subcopy{
  margin:14px 0 0;
  font-size:16px;
  line-height:1.7;
  color:#5C7180;
  font-weight:600;
  letter-spacing:.02em;
}

@media (min-width: 901px){
  .service-hero{padding:44px 0 54px;overflow:visible}
  .service-hero-inner{
    grid-template-columns:minmax(290px,420px) minmax(640px,1fr);
    gap:34px;
    align-items:center;
  }
  .service-copy h1{
    max-width:none;
    font-size:clamp(34px,4.5vw,56px);
    line-height:1.06;
    letter-spacing:-.035em;
    margin:0;
  }
  .service-copy .eyebrow{margin-bottom:14px}
  .hero-actions{margin-top:24px}

  .persona-cloud{
    min-height:640px;
    width:calc(100% + max(0px, 50vw - 590px));
    margin-right:calc(-1 * max(0px, 50vw - 590px));
    padding:0 0 0 10px;
    overflow:visible;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .persona-cloud::before,
  .persona-cloud::after{
    left:-10px;
    right:-24px;
    z-index:2;
    pointer-events:none;
  }
  .persona-cloud::before{
    top:0;
    height:48px;
    background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.6) 55%,rgba(255,255,255,0) 100%);
  }
  .persona-cloud::after{
    bottom:0;
    height:58px;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.46) 56%,rgba(255,255,255,1) 100%);
  }

  .hero-gallery{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:14px;
    height:640px;
    align-items:start;
    overflow:visible;
  }
  .hero-gallery-column{
    position:relative;
    height:100%;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,rgba(40,53,61,0) 0%,rgba(40,53,61,.85) 10%,rgba(40,53,61,1) 20%,rgba(40,53,61,1) 80%,rgba(40,53,61,.85) 90%,rgba(40,53,61,0) 100%);
    mask-image:linear-gradient(180deg,rgba(40,53,61,0) 0%,rgba(40,53,61,.85) 10%,rgba(40,53,61,1) 20%,rgba(40,53,61,1) 80%,rgba(40,53,61,.85) 90%,rgba(40,53,61,0) 100%);
  }
  .hero-gallery-column.offset-1{padding-top:4px}
  .hero-gallery-column.offset-2{padding-top:64px}
  .hero-gallery-column.offset-3{padding-top:24px}
  .hero-gallery-column.offset-4{padding-top:82px}
  .hero-gallery-column.offset-5{padding-top:14px}
  .hero-gallery-column.offset-6{padding-top:96px}
  .hero-gallery-track{display:flex;flex-direction:column;gap:14px;will-change:transform}
  .hero-gallery-column.dir-down .hero-gallery-track,
  .hero-gallery-column.dir-up .hero-gallery-track{animation-duration:60s}

  .hero-gallery-item{
    position:relative;
    display:block;
    aspect-ratio:0.78 / 1.44;
    clip-path:polygon(11% 0,100% 0,89% 100%,0 100%);
    border-radius:14px;
    overflow:hidden;
    border:none;
    background:#FFFFFF;
    box-shadow:none;
    transform:none;
  }
  .hero-gallery-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:none;
    transition:transform .7s ease;
  }
  .hero-gallery-item:hover img{transform:scale(1.05)}
  .hero-gallery-meta{
    position:absolute;
    top:8px;
    left:8px;
    right:8px;
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:7px 10px 8px;
    border-radius:12px;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(6px);
    box-shadow:0 6px 18px rgba(92,113,128,.06);
    transform:none;
  }
  .hero-gallery-meta strong{font-size:14px;line-height:1.15;color:#28353D}
  .hero-gallery-meta small{font-size:11px;line-height:1.25;color:#5C7180}
}

@media (max-width: 1200px) and (min-width: 901px){
  .service-copy h1{font-size:clamp(32px,4vw,50px)}
  .persona-cloud{min-height:600px}
  .hero-gallery{height:600px;gap:12px}
  .hero-gallery-track{gap:12px}
  .hero-gallery-column.offset-2{padding-top:54px}
  .hero-gallery-column.offset-3{padding-top:20px}
  .hero-gallery-column.offset-4{padding-top:72px}
  .hero-gallery-column.offset-6{padding-top:84px}
  .hero-gallery-meta strong{font-size:12px}
  .hero-gallery-meta small{font-size:10px}
}

@media (max-width: 900px){
  .service-hero{padding:18px 0 28px;overflow:visible}
  .service-hero-inner{grid-template-columns:1fr;gap:18px}
  .service-copy>.eyebrow,
  .service-copy>h1,
  .service-copy>.hero-subcopy{display:block}
  .service-copy h1{
    font-size:clamp(28px,8vw,40px);
    line-height:1.12;
    letter-spacing:-.03em;
    max-width:none;
  }
  .service-copy .hero-subcopy{margin-top:10px;font-size:14px;line-height:1.65}
  .hero-actions{margin-top:18px}

  .persona-cloud{
    order:-1;
    width:100%;
    min-height:344px;
    margin:0;
    padding:0;
    overflow:visible;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .persona-cloud::before,
  .persona-cloud::after{left:-4px;right:-4px;z-index:2}
  .persona-cloud::before{height:34px;background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.56) 58%,rgba(255,255,255,0) 100%)}
  .persona-cloud::after{height:40px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 56%,rgba(255,255,255,1) 100%)}

  .hero-gallery{grid-template-columns:repeat(4,minmax(0,1fr));height:344px;gap:10px;overflow:visible}
  .hero-gallery-column:nth-child(5),
  .hero-gallery-column:nth-child(6){display:none}
  .hero-gallery-column.offset-1{padding-top:4px}
  .hero-gallery-column.offset-2{padding-top:28px}
  .hero-gallery-column.offset-3{padding-top:12px}
  .hero-gallery-column.offset-4{padding-top:36px}
  .hero-gallery-column{overflow:hidden}
  .hero-gallery-track{gap:10px}
  .hero-gallery-column.dir-down .hero-gallery-track,
  .hero-gallery-column.dir-up .hero-gallery-track{animation-duration:56s}
  .hero-gallery-item{
    aspect-ratio:0.8 / 1.36;
    clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
    border-radius:10px;
    overflow:hidden;
    transform:none;
    box-shadow:none;
  }
  .hero-gallery-item img{width:100%;height:100%;object-fit:cover;transform:none}
  .hero-gallery-item:hover img{transform:scale(1.04)}
  .hero-gallery-meta{
    top:6px;
    left:6px;
    right:6px;
    padding:5px 7px 6px;
    border-radius:10px;
    background:rgba(255,255,255,.84);
    backdrop-filter:blur(5px);
    transform:none;
  }
  .hero-gallery-meta strong{font-size:10px;line-height:1.15}
  .hero-gallery-meta small{font-size:8px;line-height:1.2}
}

@media (max-width: 560px){
  .hero-gallery{height:312px;gap:8px}
  .hero-gallery-column.offset-2{padding-top:22px}
  .hero-gallery-column.offset-3{padding-top:10px}
  .hero-gallery-column.offset-4{padding-top:30px}
}

/* v6.4 layout refinements -------------------------------------------------- */

/* 1) Work cards: forget arbitrary line counts.
   The five-reader CTA is fixed at the true bottom of every card and the
   comment content simply fills the available space above it. */
.work-card{
  display:flex;
  flex-direction:column;
}
.work-body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.work-summary-mini{
  flex:none;
}
.comment-preview.compact-preview{
  position:relative;
  flex:1 1 auto;
  height:auto !important;
  min-height:0;
  margin-top:0 !important;
  padding:0 0 86px !important;
  overflow:hidden;
}
.preview-two-comments{
  max-height:none !important;
  overflow:visible !important;
  gap:12px;
}
.preview-two-comments .preview-detail-bubble:nth-child(n+2){
  display:flex !important;
}
.preview-two-comments .preview-detail-bubble .comment-bubble-box p{
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;
  overflow:visible !important;
}
.compact-fade{
  position:absolute !important;
  left:0;
  right:0;
  bottom:0;
  z-index:8;
  height:82px !important;
  padding:0 0 12px !important;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 28%,
    rgba(255,255,255,.72) 60%,
    rgba(255,255,255,.96) 84%,
    rgba(255,255,255,1) 100%) !important;
}
.compact-fade .five-reader-link{
  margin:0 auto !important;
}

@media (min-width:901px){
  .work-card{height:590px}
}
@media (max-width:900px){
  .work-card{height:560px}
  .comment-preview.compact-preview{padding-bottom:80px !important}
  .compact-fade{height:76px !important;padding-bottom:10px !important}
}
@media (max-width:560px){
  .work-card{height:480px !important}
  .comment-preview.compact-preview{
    height:auto !important;
    padding:0 0 74px !important;
  }
  .preview-two-comments{max-height:none !important}
  .preview-two-comments .preview-detail-bubble .comment-bubble-box p{
    font-size:12px;
    line-height:1.7;
  }
  .compact-fade{height:70px !important;padding-bottom:9px !important}
}

/* 2) Restore the reader grid proportions/fade to the compact state that
   worked well before the later tall-card override. */
@media (min-width:561px){
  .reader-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
  }
  .reader-card a{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1.08 / 1;
    padding:16px 18px 18px;
    overflow:hidden;
  }
  .reader-card img{
    width:82px;
    height:82px;
    margin-bottom:10px;
  }
  .reader-card h3{
    margin:0 0 4px;
    font-size:19px;
    line-height:1.25;
  }
  .reader-role{
    margin:0 0 8px;
    font-size:12px;
    line-height:1.45;
  }
  .reader-intro{
    font-size:12px;
    line-height:1.75;
    max-height:78px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,
      rgba(40,53,61,1) 0%,
      rgba(40,53,61,1) 70%,
      rgba(40,53,61,.98) 78%,
      rgba(40,53,61,.88) 86%,
      rgba(40,53,61,.55) 94%,
      rgba(40,53,61,0) 100%);
    mask-image:linear-gradient(180deg,
      rgba(40,53,61,1) 0%,
      rgba(40,53,61,1) 70%,
      rgba(40,53,61,.98) 78%,
      rgba(40,53,61,.88) 86%,
      rgba(40,53,61,.55) 94%,
      rgba(40,53,61,0) 100%);
  }
  .reader-card a::after{
    height:102px;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.06) 34%,
      rgba(255,255,255,.20) 52%,
      rgba(255,255,255,.48) 72%,
      rgba(255,255,255,.82) 88%,
      rgba(255,255,255,1) 100%);
  }
}

@media (max-width:560px){
  .reader-grid{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .reader-card{border-radius:18px}
  .reader-card a{
    height:126px !important;
    min-height:126px !important;
    aspect-ratio:auto !important;
    padding:12px 14px;
    display:grid;
    grid-template-columns:78px 1fr;
    grid-template-rows:auto auto 1fr;
    column-gap:14px;
    row-gap:2px;
    align-items:start;
    text-align:left;
  }
  .reader-card img{
    grid-column:1;
    grid-row:1 / 4;
    width:78px;
    height:78px;
    margin:10px 0 0;
    border-radius:22px;
  }
  .reader-card h3{
    grid-column:2;
    grid-row:1;
    margin:1px 0 0;
    font-size:18px;
    line-height:1.3;
  }
  .reader-role{
    grid-column:2;
    grid-row:2;
    margin:0;
    font-size:11px;
    line-height:1.5;
  }
  .reader-intro{
    grid-column:2;
    grid-row:3;
    margin-top:4px;
    font-size:11px;
    line-height:1.55;
    max-height:35px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-align:left;
    padding-right:4px;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .reader-card a::after{
    left:92px;
    height:36px;
    bottom:0;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.26) 54%,
      rgba(255,255,255,.88) 82%,
      rgba(255,255,255,1) 100%);
  }
}

/* 3) Reader-discovery section: clearer copy hierarchy, lighter and warmer. */
.readers-section .section-head{
  align-items:flex-end;
}
.readers-section .section-head h2{
  max-width:760px;
  font-size:clamp(18px,2.1vw,27px);
  line-height:1.18;
  letter-spacing:-.02em;
}
.readers-section .section-head p:not(.eyebrow){
  max-width:760px;
  font-size:15px;
  line-height:1.9;
  color:#5C7180;
}

/* 4) Reader's work cards: smaller titles and a little warmth/design. */
.stack-list{gap:18px}
.stack-card{
  position:relative;
  overflow:hidden;
  padding:22px 26px;
  border-radius:22px;
  border:1px solid #F5FAFC;
  background:linear-gradient(135deg,#FFFFFF 0%,#F5FAFC 100%);
  box-shadow:0 14px 34px rgba(40,53,61,.055);
}
.stack-card:nth-child(even){
  border-color:#F5FAFC;
  background:linear-gradient(135deg,#FFFFFF 0%,#F5FAFC 100%);
}
.stack-card::before{
  content:"";
  position:absolute;
  width:78px;
  height:78px;
  right:-30px;
  top:-34px;
  border-radius:50%;
  background:rgba(245,250,252,.20);
  pointer-events:none;
}
.stack-card:nth-child(even)::before{background:rgba(216,231,239,.20)}
.stack-kicker{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  margin:0 0 9px;
  padding:4px 10px;
  border-radius:999px;
  background:#F5FAFC;
  color:#5C7180;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
}
.stack-card:nth-child(even) .stack-kicker{
  background:#F5FAFC;
  color:#5C7180;
}
.stack-card h3{
  margin:0 0 10px;
  font-size:21px;
  line-height:1.45;
  letter-spacing:-.02em;
}
.stack-comment{
  font-size:14px;
  line-height:1.9;
  color:#28353D;
}
.stack-link{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #D8E7EF;
  background:rgba(255,255,255,.74);
  color:#01A2CE;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}
.stack-link:hover{background:#FFFFFF;color:#005F78}

@media (max-width:560px){
  .stack-card{padding:18px 18px 20px;gap:14px}
  .stack-card h3{font-size:18px;line-height:1.5}
  .stack-comment{font-size:13px;line-height:1.85}
  .stack-link{font-size:11px;min-height:32px}
}

/* 5) Other reader recommendations at the bottom of each persona page. */
.other-readers-section{
  padding-top:30px;
  padding-bottom:76px;
}
.other-readers-head{
  margin-bottom:18px;
}
.other-readers-head h2{
  margin:5px 0 6px;
  font-size:26px;
  line-height:1.35;
  letter-spacing:-.02em;
}
.other-readers-head p:not(.eyebrow){
  margin:0;
  color:#5C7180;
  font-size:13px;
}
.other-readers-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.other-reader-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid #F5FAFC;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 26px rgba(40,53,61,.05);
  color:#28353D;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.other-reader-card:nth-child(even){background:#F5FAFC;border-color:#F5FAFC}
.other-reader-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(40,53,61,.08);
  border-color:#D8E7EF;
}
.other-reader-card img{
  width:58px;
  height:58px;
  flex:none;
  object-fit:cover;
  border-radius:16px;
}
.other-reader-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.other-reader-copy strong{
  font-size:15px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.other-reader-copy span{
  font-size:10px;
  color:#5C7180;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.other-reader-copy em{
  margin-top:4px;
  font-style:normal;
  color:#5C7180;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.other-reader-arrow{
  margin-left:auto;
  color:#5C7180;
  font-size:14px;
  flex:none;
}

@media (max-width:900px){
  .other-readers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .other-readers-section{padding-top:18px;padding-bottom:48px}
  .other-readers-head h2{font-size:21px}
  .other-readers-grid{
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding-bottom:6px;
    scroll-snap-type:x proximity;
  }
  .other-reader-card{
    flex:0 0 248px;
    scroll-snap-align:start;
  }
}

/* v65 work comments refreshed + header CTA restored */
.header-inner{
  gap:20px;
}
.header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
}
.header-mobile-actions{
  display:none;
  align-items:center;
  gap:10px;
}
.header-cta-desktop{
  margin-left:8px;
  padding:11px 18px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.header-cta-mobile{
  min-height:34px;
  padding:9px 12px;
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}

.comment-detail-list-refined{
  gap:20px;
}
.work-comment-card{
  position:relative;
  overflow:hidden;
  padding:26px 28px;
  border-radius:26px;
  border:1px solid #F5FAFC;
  background:linear-gradient(135deg,#FFFFFF 0%,#F5FAFC 100%);
  box-shadow:0 14px 34px rgba(40,53,61,.055);
}
.work-comment-card.tone-green{
  border-color:#F5FAFC;
  background:linear-gradient(135deg,#FFFFFF 0%,#F5FAFC 100%);
}
.work-comment-card::before{
  content:"";
  position:absolute;
  width:86px;
  height:86px;
  right:-30px;
  top:-34px;
  border-radius:50%;
  background:rgba(245,250,252,.20);
  pointer-events:none;
}
.work-comment-card.tone-green::before{
  background:rgba(216,231,239,.20);
}
.work-comment-main{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:30px;
  align-items:center;
}
.work-comment-reader{
  display:flex;
  align-items:center;
  gap:16px;
}
.work-comment-avatar{
  flex:none;
}
.work-comment-avatar img{
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 10px 24px rgba(40,53,61,.08);
}
.work-comment-reader-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.work-comment-reader-copy h3{
  margin:0 0 6px;
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.02em;
}
.work-comment-reader-copy p{
  margin:0 0 12px;
  color:#5C7180;
  font-size:14px;
  line-height:1.6;
}
.work-comment-page{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid #D8E7EF;
  background:rgba(255,255,255,.74);
  color:#01A2CE;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}
.work-comment-page:hover{
  background:#FFFFFF;
  color:#005F78;
}
.work-comment-copy-block{
  min-width:0;
}
.work-comment-text{
  margin:0;
  font-size:15px;
  line-height:2.05;
  color:#28353D;
}

@media (max-width: 900px){
  .work-comment-main{
    grid-template-columns:1fr;
    gap:18px;
    align-items:start;
  }
  .work-comment-card{
    padding:22px 20px;
  }
  .work-comment-avatar img{
    width:78px;
    height:78px;
  }
  .work-comment-reader-copy h3{
    font-size:22px;
  }
  .work-comment-reader-copy p{
    margin-bottom:10px;
    font-size:13px;
  }
  .work-comment-text{
    font-size:14px;
    line-height:1.95;
  }
}

@media (max-width: 768px){
  .header-mobile-actions{
    display:flex;
  }
  .header-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:12px 18px 18px;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid #F5FAFC;
    box-shadow:0 16px 28px rgba(40,53,61,.08);
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .header-nav a{
    display:block;
    padding:12px 6px;
    border-bottom:1px solid rgba(245,250,252,.75);
    font-size:14px;
  }
  .header-nav .header-cta-desktop{
    display:none;
  }
  .menu-open .header-nav{
    display:flex;
  }
}

@media (min-width: 769px){
  .header-mobile-actions{
    display:none;
  }
  .header-nav{
    display:flex !important;
    align-items:center;
  }
}

@media (max-width: 560px){
  .header-inner{
    padding:14px 0;
  }
  .brand-mark{
    font-size:26px;
  }
  .header-actions{
    gap:10px;
  }
  .header-mobile-actions{
    gap:8px;
  }
  .header-cta-mobile{
    padding:8px 10px;
    font-size:10px;
  }
  .work-comment-card{
    padding:18px 16px;
    border-radius:22px;
  }
  .work-comment-reader{
    gap:12px;
  }
  .work-comment-avatar img{
    width:68px;
    height:68px;
  }
  .work-comment-reader-copy h3{
    font-size:20px;
  }
  .work-comment-page{
    min-height:33px;
    padding:0 14px;
    font-size:12px;
  }
  .work-comment-text{
    font-size:13px;
    line-height:1.9;
  }
}

/* v66 mobile hero gallery full-bleed refinement */
@media (max-width: 900px){
  .service-hero{padding:12px 0 26px;overflow:visible}
  .service-hero-inner{gap:14px}
  .persona-cloud{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    min-height:300px;
    padding:0 12px;
  }
  .persona-cloud::before,
  .persona-cloud::after{left:0;right:0}
  .hero-gallery{
    grid-template-columns:repeat(4,minmax(0,1fr));
    height:286px;
    gap:8px;
  }
  .hero-gallery-column:nth-child(5){display:block}
  .hero-gallery-column:nth-child(6){display:none}
  .hero-gallery-column.offset-1{padding-top:0}
  .hero-gallery-column.offset-2{padding-top:18px}
  .hero-gallery-column.offset-3{padding-top:8px}
  .hero-gallery-column.offset-4{padding-top:24px}
  .hero-gallery-column.offset-5{padding-top:12px}
  .hero-gallery-track{gap:8px}
  .hero-gallery-column.dir-down .hero-gallery-track,
  .hero-gallery-column.dir-up .hero-gallery-track{animation-duration:54s}
}

@media (max-width: 560px){
  .service-hero{padding:10px 0 24px}
  .service-hero-inner{gap:12px}
  .persona-cloud{
    min-height:262px;
    padding:0 8px;
  }
  .persona-cloud::before{height:26px}
  .persona-cloud::after{height:32px}
  .hero-gallery{
    grid-template-columns:repeat(5,minmax(0,1fr));
    height:248px;
    gap:6px;
  }
  .hero-gallery-column:nth-child(5){display:block}
  .hero-gallery-column:nth-child(6){display:none}
  .hero-gallery-column.offset-1{padding-top:0}
  .hero-gallery-column.offset-2{padding-top:16px}
  .hero-gallery-column.offset-3{padding-top:7px}
  .hero-gallery-column.offset-4{padding-top:22px}
  .hero-gallery-column.offset-5{padding-top:11px}
  .hero-gallery-track{gap:6px}
  .hero-gallery-item{
    aspect-ratio:0.74 / 1.26;
    border-radius:8px;
  }
  .hero-gallery-meta{
    top:auto;
    left:6px;
    right:6px;
    bottom:8px;
    padding:0;
    background:transparent;
    backdrop-filter:none;
    box-shadow:none;
  }
  .hero-gallery-meta strong,
  .hero-gallery-meta small{
    color:rgba(255,255,255,.96);
    text-shadow:0 1px 8px rgba(40,53,61,.35);
    font-weight:500;
  }
  .hero-gallery-meta strong{display:block;font-size:9.5px;line-height:1.15}
  .hero-gallery-meta small{display:block;margin-top:2px;font-size:7.5px;line-height:1.15}
}


/* v68 requested refinements ------------------------------------------------ */

/* Tiny, neutral Profile link on work-comment cards */
.work-comment-page{
  min-height:24px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  font-size:9px !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:none;
  line-height:1 !important;
}

/* Work page: remove the oversized blank area before COMMENTS */
.work-hero{
  padding-bottom:20px !important;
}
.work-hero + .section{
  padding-top:18px !important;
}

/* Top-page work cards: give the introduction a little breathing room
   before the reader comments begin. */
.work-card .work-summary-mini{
  margin-bottom:18px !important;
}
.work-card .comment-preview.compact-preview{
  margin-top:4px !important;
}

/* Mobile key visual: truly edge-to-edge, 5 narrow columns, shorter overall */
@media (max-width:900px){
  .persona-cloud{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:0 !important;
    padding-right:0 !important;
    min-height:244px !important;
  }
  .hero-gallery{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    height:232px !important;
    gap:5px !important;
  }
  .hero-gallery-column:nth-child(5){
    display:block !important;
  }
  .hero-gallery-column:nth-child(6){
    display:none !important;
  }
  .hero-gallery-track{
    gap:5px !important;
  }
  .hero-gallery-item{
    aspect-ratio:.76 / 1.12 !important;
    border-radius:7px !important;
  }
}

@media (max-width:560px){
  .service-hero{
    padding-top:6px !important;
    padding-bottom:20px !important;
  }
  .service-hero-inner{
    gap:10px !important;
  }
  .persona-cloud{
    min-height:218px !important;
  }
  .persona-cloud::before{
    height:22px !important;
  }
  .persona-cloud::after{
    height:26px !important;
  }
  .hero-gallery{
    height:206px !important;
    gap:4px !important;
  }
  .hero-gallery-track{
    gap:4px !important;
  }
  .hero-gallery-column.offset-1{padding-top:0 !important}
  .hero-gallery-column.offset-2{padding-top:12px !important}
  .hero-gallery-column.offset-3{padding-top:5px !important}
  .hero-gallery-column.offset-4{padding-top:17px !important}
  .hero-gallery-column.offset-5{padding-top:9px !important}
  .hero-gallery-item{
    border-radius:6px !important;
  }
  .hero-gallery-meta{
    left:4px !important;
    right:4px !important;
    bottom:5px !important;
  }
  .hero-gallery-meta strong{
    font-size:8.5px !important;
  }
  .hero-gallery-meta small{
    font-size:6.8px !important;
  }

  .work-hero{
    padding-bottom:14px !important;
  }
  .work-hero + .section{
    padding-top:16px !important;
  }
  .work-card .work-summary-mini{
    margin-bottom:14px !important;
  }
}


/* v69 — fully reflect the skipped screenshot-chat requests ---------------- */

/* 1) Hero gallery: shorter cards, no profile plaque, small white text at bottom.
      Make the whole card a gently slanted parallelogram and reverse the
      asymmetric rounded-corner direction from column to column. */
@media (min-width:901px){
  .service-hero{
    padding-top:26px !important;
    padding-bottom:26px !important;
  }
  .persona-cloud{
    min-height:430px !important;
  }
  .hero-gallery{
    height:418px !important;
    gap:10px !important;
  }
  .hero-gallery-track{
    gap:10px !important;
  }
  .hero-gallery-column.offset-1{padding-top:0 !important}
  .hero-gallery-column.offset-2{padding-top:34px !important}
  .hero-gallery-column.offset-3{padding-top:13px !important}
  .hero-gallery-column.offset-4{padding-top:48px !important}
  .hero-gallery-column.offset-5{padding-top:22px !important}
  .hero-gallery-column.offset-6{padding-top:58px !important}

  .hero-gallery-item{
    aspect-ratio:.82 / 1 !important;
    clip-path:none !important;
    transform:skewX(-4deg) !important;
    overflow:hidden !important;
    box-shadow:none !important;
    background:#F5FAFC !important;
  }
  .hero-gallery-column:nth-child(odd) .hero-gallery-item{
    border-radius:6px 18px 6px 18px !important;
  }
  .hero-gallery-column:nth-child(even) .hero-gallery-item{
    border-radius:18px 6px 18px 6px !important;
  }
  .hero-gallery-item img{
    width:112% !important;
    height:100% !important;
    object-fit:cover !important;
    transform:skewX(4deg) scale(1.04) translateX(-5%) !important;
  }
  .hero-gallery-item:hover img{
    transform:skewX(4deg) scale(1.08) translateX(-5%) !important;
  }
  .hero-gallery-item::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:34%;
    background:linear-gradient(180deg,rgba(40,53,61,0) 0%,rgba(40,53,61,.10) 42%,rgba(40,53,61,.48) 100%);
    pointer-events:none;
  }
  .hero-gallery-meta{
    z-index:2 !important;
    top:auto !important;
    left:14px !important;
    right:12px !important;
    bottom:12px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
    transform:skewX(4deg) !important;
  }
  .hero-gallery-meta strong,
  .hero-gallery-meta small{
    display:block !important;
    color:rgba(255,255,255,.96) !important;
    text-shadow:0 1px 8px rgba(40,53,61,.32) !important;
    font-weight:400 !important;
    letter-spacing:.02em !important;
  }
  .hero-gallery-meta strong{
    font-size:11px !important;
    line-height:1.2 !important;
  }
  .hero-gallery-meta small{
    margin-top:3px !important;
    font-size:8.5px !important;
    line-height:1.25 !important;
  }

  /* 2) More breathing room between hero and the works below */
  .works-section{
    padding-top:58px !important;
  }
}

/* Mobile: edge-to-edge 5 columns, but noticeably shorter than before. */
@media (max-width:900px){
  .persona-cloud{
    min-height:192px !important;
  }
  .hero-gallery{
    height:182px !important;
    gap:4px !important;
  }
  .hero-gallery-track{
    gap:4px !important;
  }
  .hero-gallery-item{
    aspect-ratio:.88 / 1 !important;
    clip-path:none !important;
    transform:skewX(-3deg) !important;
    overflow:hidden !important;
    background:#F5FAFC !important;
  }
  .hero-gallery-column:nth-child(odd) .hero-gallery-item{
    border-radius:4px 12px 4px 12px !important;
  }
  .hero-gallery-column:nth-child(even) .hero-gallery-item{
    border-radius:12px 4px 12px 4px !important;
  }
  .hero-gallery-item img{
    width:110% !important;
    height:100% !important;
    object-fit:cover !important;
    transform:skewX(3deg) scale(1.04) translateX(-5%) !important;
  }
  .hero-gallery-item:hover img{
    transform:skewX(3deg) scale(1.06) translateX(-5%) !important;
  }
  .hero-gallery-item::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:40%;
    background:linear-gradient(180deg,rgba(40,53,61,0) 0%,rgba(40,53,61,.12) 45%,rgba(40,53,61,.52) 100%);
    pointer-events:none;
  }
  .hero-gallery-meta{
    z-index:2 !important;
    top:auto !important;
    left:6px !important;
    right:5px !important;
    bottom:6px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
    transform:skewX(3deg) !important;
  }
  .hero-gallery-meta strong,
  .hero-gallery-meta small{
    display:block !important;
    color:#FFFFFF !important;
    font-weight:400 !important;
    text-shadow:0 1px 5px rgba(40,53,61,.4) !important;
  }
  .hero-gallery-meta strong{font-size:8px !important;line-height:1.1 !important}
  .hero-gallery-meta small{font-size:6.5px !important;line-height:1.1 !important;margin-top:2px !important}

  .works-section{
    padding-top:42px !important;
  }
}

@media (max-width:560px){
  .service-hero{
    padding-top:4px !important;
    padding-bottom:16px !important;
  }
  .persona-cloud{
    min-height:174px !important;
  }
  .hero-gallery{
    height:164px !important;
    gap:3px !important;
  }
  .hero-gallery-track{gap:3px !important}
  .hero-gallery-column.offset-1{padding-top:0 !important}
  .hero-gallery-column.offset-2{padding-top:9px !important}
  .hero-gallery-column.offset-3{padding-top:4px !important}
  .hero-gallery-column.offset-4{padding-top:13px !important}
  .hero-gallery-column.offset-5{padding-top:7px !important}
  .works-section{
    padding-top:38px !important;
  }
}

/* 3) Profile column on work comments a little farther to the right */
@media (min-width:901px){
  .work-comment-main{
    grid-template-columns:270px minmax(0,1fr) !important;
    gap:34px !important;
  }
  .work-comment-reader{
    padding-left:34px !important;
  }
}

/* Reader page work list: title followed by author name */
.stack-author-inline{
  margin-left:7px;
  color:#5C7180;
  font-size:.56em;
  font-weight:500;
  letter-spacing:.01em;
  white-space:normal;
}

/* 4) Five-reader roundtable prototype */
.roundtable-section{
  margin-top:48px;
  padding:32px 34px 34px;
  border:1px solid #F5FAFC;
  border-radius:28px;
  background:
    radial-gradient(circle at 92% 12%,rgba(216,231,239,.22),transparent 28%),
    linear-gradient(135deg,#FFFFFF 0%,#FFFFFF 100%);
  box-shadow:0 18px 42px rgba(40,53,61,.06);
}
.roundtable-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}
.roundtable-head h2{
  margin:0 0 8px;
  font-size:30px;
  line-height:1.2;
  letter-spacing:-.025em;
}
.roundtable-head p:not(.eyebrow){
  margin:0;
  color:#5C7180;
  font-size:13px;
  line-height:1.75;
}
.roundtable-members{
  display:flex;
  flex-shrink:0;
  padding-left:10px;
}
.roundtable-members a{
  width:42px;
  height:42px;
  margin-left:-9px;
  border-radius:50%;
  border:3px solid #FFFFFF;
  overflow:hidden;
  box-shadow:0 5px 14px rgba(40,53,61,.10);
}
.roundtable-members a:first-child{margin-left:0}
.roundtable-members img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.roundtable-thread{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.roundtable-line{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:24px;
  align-items:center;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid #F5FAFC;
  background:rgba(245,250,252,.82);
}
.roundtable-line.tone-green{
  border-color:#F5FAFC;
  background:rgba(245,250,252,.88);
}
.roundtable-person{
  display:flex;
  align-items:center;
  gap:11px;
  color:#28353D;
}
.roundtable-person img{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
}
.roundtable-person span{
  min-width:0;
}
.roundtable-person strong,
.roundtable-person small{
  display:block;
}
.roundtable-person strong{
  font-size:13px;
  line-height:1.3;
}
.roundtable-person small{
  margin-top:3px;
  color:#5C7180;
  font-size:9px;
  line-height:1.3;
}
.roundtable-line>p{
  margin:0;
  color:#28353D;
  font-size:13px;
  line-height:1.85;
}

@media (max-width:700px){
  .roundtable-section{
    margin-top:34px;
    padding:24px 18px 22px;
    border-radius:22px;
  }
  .roundtable-head{
    display:block;
    margin-bottom:18px;
  }
  .roundtable-head h2{font-size:24px}
  .roundtable-members{margin-top:16px;padding-left:0}
  .roundtable-members a{
    width:38px;
    height:38px;
  }
  .roundtable-line{
    grid-template-columns:1fr;
    gap:10px;
    padding:14px 14px 15px;
  }
  .roundtable-line>p{
    font-size:12.5px;
    line-height:1.8;
  }
}

/* Keep the long explanatory sentence exactly under the COMMENTS heading,
   but make the block easier to scan. */
.section-head.left{
  margin-bottom:26px !important;
}
.section-head.left p:not(.eyebrow){
  max-width:980px !important;
  line-height:1.85 !important;
}

/* v70 author pages -------------------------------------------------------- */
.work-author-link,
.author-handle-link,
.stack-author-link{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease, opacity .2s ease;
}
.work-author-link:hover,
.author-handle-link:hover,
.stack-author-link:hover{
  color:#01A2CE;
}

.author-page{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%);
}
.author-hero{
  padding-top:86px;
  padding-bottom:78px;
}
.author-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
  gap:70px;
  align-items:center;
}
.author-hero-copy h1{
  margin:8px 0 4px;
  font-size:clamp(52px,6vw,88px);
  line-height:1;
  letter-spacing:-.05em;
  color:#28353D;
}
.author-roman{
  margin:0 0 28px;
  color:#5C7180;
  font-size:13px;
  font-weight:700;
  letter-spacing:.28em;
}
.author-intro{
  max-width:620px;
  margin:0;
  color:#5C7180;
  font-size:16px;
  line-height:2;
}
.author-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.author-stats span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border:1px solid #F5FAFC;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#5C7180;
  font-size:11px;
  letter-spacing:.02em;
}
.author-stats strong{
  color:#28353D;
  font-size:13px;
}
.author-actions{
  margin-top:26px;
}
.author-actions .btn{
  min-width:142px;
}
.author-featured{
  position:relative;
  display:block;
  min-height:410px;
  overflow:hidden;
  border-radius:28px 10px 28px 10px;
  background:#F5FAFC;
  box-shadow:0 24px 50px rgba(40,53,61,.09);
}
.author-featured::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(40,53,61,0) 42%,rgba(40,53,61,.52) 100%);
  pointer-events:none;
}
.author-featured img{
  width:100%;
  height:100%;
  min-height:410px;
  object-fit:cover;
  transition:transform .6s ease;
}
.author-featured:hover img{
  transform:scale(1.025);
}
.author-featured-overlay{
  position:absolute;
  z-index:2;
  left:28px;
  right:28px;
  bottom:26px;
  color:#FFFFFF;
}
.author-featured-overlay small,
.author-featured-overlay strong{
  display:block;
}
.author-featured-overlay small{
  margin-bottom:8px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  opacity:.78;
}
.author-featured-overlay strong{
  font-size:24px;
  line-height:1.45;
  letter-spacing:-.02em;
}

.author-works-section{
  padding-top:66px;
}
.author-section-head{
  margin-bottom:30px;
}
.author-work-list{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.author-work-card{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  overflow:hidden;
  border:1px solid #F5FAFC;
  border-radius:26px;
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 34px rgba(40,53,61,.05);
}
.author-work-card:nth-child(even){
  border-color:#F5FAFC;
}
.author-work-thumb{
  position:relative;
  display:block;
  min-height:235px;
  overflow:hidden;
}
.author-work-thumb img{
  width:100%;
  height:100%;
  min-height:235px;
  object-fit:cover;
  transition:transform .5s ease;
}
.author-work-thumb:hover img{
  transform:scale(1.025);
}
.author-work-thumb span{
  position:absolute;
  left:18px;
  top:18px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(8px);
  color:#5C7180;
  font-size:10px;
  font-weight:700;
}
.author-work-copy{
  display:flex;
  flex-direction:column;
  padding:28px 30px 24px;
}
.author-work-copy h3{
  margin:0;
  font-size:26px;
  line-height:1.45;
  letter-spacing:-.02em;
}
.author-work-copy h3 a{
  color:#28353D;
}
.author-work-copy>p{
  max-width:780px;
  margin:16px 0 24px;
  color:#5C7180;
  font-size:14px;
  line-height:1.9;
}
.author-work-bottom{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.author-work-readers{
  display:flex;
  align-items:center;
  padding-left:8px;
}
.author-work-readers a{
  width:38px;
  height:38px;
  margin-left:-8px;
  overflow:hidden;
  border:3px solid #FFFFFF;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 4px 12px rgba(40,53,61,.07);
}
.author-work-readers a:first-child{
  margin-left:0;
}
.author-work-readers img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.author-work-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  background:#5C7180;
  color:#FFFFFF;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}
.author-work-link:hover{
  background:#5C7180;
}
.author-empty{
  padding:40px;
  border:1px solid #F5FAFC;
  border-radius:22px;
  background:#FFFFFF;
  color:#5C7180;
  text-align:center;
}

.author-readers-section{
  padding-top:52px;
  padding-bottom:92px;
}
.author-reader-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.author-reader-mini{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  padding:12px;
  border:1px solid #F5FAFC;
  border-radius:18px;
  background:rgba(255,255,255,.76);
  transition:transform .2s ease, box-shadow .2s ease;
}
.author-reader-mini:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(40,53,61,.06);
}
.author-reader-mini img{
  flex:none;
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
}
.author-reader-mini span{
  min-width:0;
}
.author-reader-mini strong,
.author-reader-mini small{
  display:block;
}
.author-reader-mini strong{
  color:#28353D;
  font-size:13px;
  line-height:1.3;
}
.author-reader-mini small{
  margin-top:4px;
  color:#5C7180;
  font-size:9px;
  line-height:1.45;
}

@media (max-width:900px){
  .author-hero{
    padding-top:50px;
    padding-bottom:48px;
  }
  .author-hero-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .author-hero-copy h1{
    font-size:54px;
  }
  .author-featured{
    min-height:300px;
  }
  .author-featured img{
    min-height:300px;
  }
  .author-work-card{
    grid-template-columns:220px minmax(0,1fr);
  }
  .author-reader-strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:650px){
  .author-hero{
    padding-top:38px;
  }
  .author-hero-copy h1{
    font-size:46px;
  }
  .author-intro{
    font-size:14px;
    line-height:1.9;
  }
  .author-featured{
    min-height:230px;
    border-radius:20px 8px 20px 8px;
  }
  .author-featured img{
    min-height:230px;
  }
  .author-featured-overlay{
    left:20px;
    right:20px;
    bottom:18px;
  }
  .author-featured-overlay strong{
    font-size:19px;
  }
  .author-work-card{
    display:block;
    border-radius:22px;
  }
  .author-work-thumb{
    min-height:190px;
  }
  .author-work-thumb img{
    min-height:190px;
  }
  .author-work-copy{
    padding:22px 20px 20px;
  }
  .author-work-copy h3{
    font-size:21px;
  }
  .author-work-copy>p{
    margin:13px 0 20px;
    font-size:13px;
    line-height:1.85;
  }
  .author-work-bottom{
    align-items:flex-end;
  }
  .author-work-readers a{
    width:34px;
    height:34px;
  }
  .author-work-link{
    min-height:38px;
    padding:0 14px;
    font-size:11px;
  }
  .author-reader-strip{
    grid-template-columns:1fr 1fr;
    gap:9px;
  }
  .author-reader-mini{
    padding:10px;
  }
  .author-reader-mini img{
    width:44px;
    height:44px;
  }
  .author-reader-mini strong{
    font-size:12px;
  }
}

/* v7.1 | 5人の読後会 - 連続した会話のデザイン */
.roundtable-section{
  background:linear-gradient(145deg,#FFFFFF 0%,#FFFFFF 75%);
  padding:32px 32px 38px;
}
.roundtable-head{
  align-items:center;
  margin-bottom:24px;
}
.roundtable-conversation{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:4px 0 0;
}
.roundtable-conversation::before{
  content:"";
  position:absolute;
  top:17px;
  bottom:22px;
  left:37px;
  width:1px;
  background:linear-gradient(180deg,transparent,#F5FAFC 8%,#F5FAFC 92%,transparent);
  pointer-events:none;
}
.roundtable-message{
  position:relative;
  display:grid;
  grid-template-columns:75px minmax(0,1fr);
  align-items:start;
  gap:14px;
  transition:transform .2s ease;
}
.roundtable-message.is-reply{
  margin-left:26px;
}
.roundtable-message.is-reply::before{
  content:"";
  position:absolute;
  left:-24px;
  top:31px;
  width:18px;
  height:1px;
  background:#D8E7EF;
}
.roundtable-speaker{
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  color:#28353D;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  line-height:1.35;
}
.roundtable-speaker img{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #FFFFFF;
  box-shadow:0 5px 14px rgba(40,53,61,.09);
}
.roundtable-speech{
  position:relative;
  max-width:720px;
  width:fit-content;
  padding:16px 22px;
  border-radius:6px 22px 22px 22px;
  border:1px solid #F5FAFC;
  background:rgba(245,250,252,.94);
  color:#28353D;
  font-size:14px;
  line-height:1.9;
}
.roundtable-message.tone-green .roundtable-speech{
  background:#F5FAFC;
  border-color:#F5FAFC;
}
.roundtable-speech p{margin:0}
.roundtable-message.is-reply .roundtable-speech{
  border-top-left-radius:22px;
}
.roundtable-conversation .roundtable-message:last-child .roundtable-speech{
  box-shadow:0 4px 20px rgba(40,53,61,.04);
}
@media(max-width:700px){
  .roundtable-section{padding:22px 15px 24px}
  .roundtable-head{margin-bottom:20px}
  .roundtable-conversation{gap:14px}
  .roundtable-conversation::before{left:26px}
  .roundtable-message{grid-template-columns:52px minmax(0,1fr);gap:9px}
  .roundtable-message.is-reply{margin-left:12px}
  .roundtable-message.is-reply::before{left:-12px;width:10px;top:25px}
  .roundtable-speaker{font-size:10px;gap:4px}
  .roundtable-speaker img{width:39px;height:39px;border-width:2px}
  .roundtable-speech{padding:12px 14px;border-radius:5px 16px 16px 16px;font-size:12.5px;line-height:1.85}
  .roundtable-message.is-reply .roundtable-speech{border-top-left-radius:16px}
}

/* v7.2 / 読後会を開くと軽いSMS風の順次再生 */
.roundtable-reveal{
  margin:4px 0 0;
}
.roundtable-open{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  padding:17px 21px;
  border:1px solid #F5FAFC;
  border-radius:20px;
  background:#FFFFFF;
  color:#006F8C;
  font-size:15px;
  font-weight:750;
  letter-spacing:.04em;
  list-style:none;
  transition:background .2s ease;
}
.roundtable-open::-webkit-details-marker{display:none}
.roundtable-open:hover{background:#FFFFFF}
.roundtable-open-arrow{font-size:22px;font-weight:400;line-height:1;transition:transform .2s ease}
.roundtable-reveal[open] .roundtable-open-arrow{transform:rotate(135deg)}
.roundtable-playback{
  border-radius:0 0 21px 21px;
  padding:19px 0 0;
}
.roundtable-playback-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}
.roundtable-playback-status{color:#5C7180;font-size:11px;letter-spacing:.02em}
.roundtable-show-all{
  border:1px solid #F5FAFC;
  background:#FFFFFF;
  color:#006F8C;
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.roundtable-show-all:hover{background:#F5FAFC}
.roundtable-show-all[hidden]{display:none}
.roundtable-reveal .roundtable-conversation{
  overflow-y:auto;
  max-height:460px;
  min-height:120px;
  padding:12px 12px 18px 4px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#F5FAFC transparent;
}
.roundtable-reveal.is-playing .roundtable-message:not(.is-visible):not(.is-typing){display:none}
.roundtable-reveal.is-playing .roundtable-message.is-visible{animation:roundtableArrive .24s ease both}
@keyframes roundtableArrive{
  from{opacity:.2;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
.roundtable-typing{display:none;align-items:center;gap:5px;min-height:24px}
.roundtable-typing i{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5C7180;
  animation:roundtableDots 1.05s ease-in-out infinite;
}
.roundtable-typing i:nth-child(2){animation-delay:.15s}
.roundtable-typing i:nth-child(3){animation-delay:.30s}
@keyframes roundtableDots{
  0%,65%,100%{transform:translateY(0);opacity:.38}
  32%{transform:translateY(-4px);opacity:1}
}
.roundtable-reveal.is-playing .roundtable-message.is-typing .roundtable-speech p{display:none}
.roundtable-reveal.is-playing .roundtable-message.is-typing .roundtable-typing{display:inline-flex}
.roundtable-reveal .roundtable-conversation::before{display:none}
.roundtable-reveal .roundtable-message.is-reply{margin-left:0}
.roundtable-reveal .roundtable-message.is-reply::before{display:none}
@media(max-width:700px){
  .roundtable-section{padding:20px 13px 23px}
  .roundtable-open{padding:13px 15px;border-radius:16px;font-size:13px}
  .roundtable-reveal .roundtable-conversation{max-height:380px;padding:8px 6px 16px 0}
  .roundtable-playback-bar{margin-bottom:10px}
  .roundtable-playback-status{font-size:10px}
  .roundtable-show-all{padding:7px 11px;font-size:11px}
  .roundtable-reveal .roundtable-speech{max-width:100%;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .roundtable-typing i,.roundtable-reveal.is-playing .roundtable-message.is-visible{animation:none}
}

/* v7.2 / スマホでもビジュアルを真のフルブリード5列に */
@media(max-width:900px){
  .service-hero{
    padding:8px 0 23px !important;
    overflow:hidden !important;
  }
  .service-hero .service-hero-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:16px !important;
    overflow:visible !important;
  }
  .service-hero .persona-cloud{
    box-sizing:border-box !important;
    order:-1 !important;
    position:relative !important;
    flex:none !important;
    align-self:center !important;
    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;
    height:225px !important;
    min-height:225px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    transform:none !important;
  }
  .service-hero .persona-cloud::before,
  .service-hero .persona-cloud::after{left:0 !important;right:0 !important;z-index:4 !important}
  .service-hero .persona-cloud::before{height:19px !important}
  .service-hero .persona-cloud::after{height:25px !important}
  .service-hero .hero-gallery{
    box-sizing:border-box !important;
    width:100% !important;
    height:225px !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:5px !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  .service-hero .hero-gallery-column{
    min-width:0 !important;
    height:100% !important;
    display:block !important;
    overflow:hidden !important;
  }
  .service-hero .hero-gallery-column:nth-child(n+6){display:none !important}
  .service-hero .hero-gallery-column.offset-1{padding-top:0 !important}
  .service-hero .hero-gallery-column.offset-2{padding-top:13px !important}
  .service-hero .hero-gallery-column.offset-3{padding-top:4px !important}
  .service-hero .hero-gallery-column.offset-4{padding-top:19px !important}
  .service-hero .hero-gallery-column.offset-5{padding-top:9px !important}
  .service-hero .hero-gallery-track{gap:5px !important}
  .service-hero .hero-gallery-item{aspect-ratio:.84 / 1.18 !important}
  .service-hero .hero-gallery-meta{
    top:auto !important;
    bottom:6px !important;
    left:5px !important;
    right:5px !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }
  .service-hero .hero-gallery-meta strong,
  .service-hero .hero-gallery-meta small{
    color:#FFFFFF !important;
    text-shadow:0 1px 5px rgba(40,53,61,.56) !important;
    font-weight:400 !important;
  }
  .service-hero .hero-gallery-meta strong{font-size:9px !important;line-height:1.2 !important}
  .service-hero .hero-gallery-meta small{font-size:7px !important;line-height:1.1 !important}
  .service-hero .service-copy{width:100% !important;max-width:620px !important;min-width:0 !important}
}
@media(max-width:560px){
  .service-hero .persona-cloud{
    height:194px !important;
    min-height:194px !important;
  }
  .service-hero .hero-gallery{
    height:194px !important;
    gap:4px !important;
  }
  .service-hero .hero-gallery-track{gap:4px !important}
  .service-hero .hero-gallery-item{aspect-ratio:.84 / 1.13 !important}
  .service-hero .hero-gallery-meta strong{font-size:8px !important}
  .service-hero .hero-gallery-meta small{font-size:6.5px !important}
}

/* v7.3: SMS-style five-person dialogue, typed progressively after opening */
.roundtable-playback-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.roundtable-replay{
  border:1px solid #D8E7EF;
  background:#F5FAFC;
  color:#006F8C;
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.roundtable-replay:hover{background:#F5FAFC}
.roundtable-replay[hidden]{display:none !important}
.roundtable-reveal .roundtable-speech p{white-space:pre-line;overflow-wrap:anywhere}
.roundtable-reveal.is-playing .roundtable-message.is-writing .roundtable-speech p::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:3px;
  background:#5C7180;
  vertical-align:-.12em;
  animation:roundtableCaret .8s steps(1) infinite;
}
@keyframes roundtableCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.roundtable-reveal.is-playing .roundtable-message.is-typing .roundtable-speech{
  min-width:78px;
  padding-top:13px;
  padding-bottom:13px;
}
.roundtable-reveal.is-playing .roundtable-message.is-typing .roundtable-typing{display:inline-flex}
.roundtable-reveal .roundtable-conversation{
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.82));
  border:1px solid #F5FAFC;
  border-radius:18px;
  padding:18px 16px 20px !important;
  scroll-behavior:auto;
}
@media(max-width:700px){
  .roundtable-reveal .roundtable-conversation{
    max-height:440px;
    border-radius:16px;
    padding:12px 8px 18px !important;
  }
  .roundtable-playback-controls{gap:6px}
  .roundtable-replay,.roundtable-show-all{font-size:11px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){
  .roundtable-reveal.is-playing .roundtable-message.is-writing .roundtable-speech p::after{animation:none}
}

/* Mobile KV: 5 complete columns across the ENTIRE viewport, no 3-column crop. */
@media(max-width:900px){
  .service-hero .persona-cloud{
    position:relative !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    flex:0 0 auto !important;
    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    height:220px !important;
    min-height:220px !important;
    overflow:hidden !important;
  }
  .service-hero .hero-gallery{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    width:100% !important;
    height:220px !important;
    display:grid !important;
    gap:5px !important;
  }
  .service-hero .hero-gallery-column:nth-child(-n+5){display:block !important}
  .service-hero .hero-gallery-column:nth-child(n+6){display:none !important}
  .service-hero .hero-gallery-column{min-width:0 !important;max-width:100% !important}
  .service-hero .hero-gallery-item{width:100% !important;box-sizing:border-box !important}
}
@media(max-width:560px){
  .service-hero .persona-cloud,
  .service-hero .hero-gallery{
    height:198px !important;
    min-height:198px !important;
  }
  .service-hero .hero-gallery{gap:4px !important}
  .service-hero .hero-gallery-track{gap:4px !important}
}
@media(max-width:900px){
  /* Center the edge-to-edge gallery relative to the viewport, not the narrow .inner. */
  .service-hero .persona-cloud{
    align-self:flex-start !important;
  }
}

/* ==============================================================
   v7.4 / 読後会 — SMSに着想を得た5人の会話体験
   既存の作品コメントや作者ページのスタイルは変えない。
   ============================================================== */
.roundtable-section{margin-top:62px;padding:30px;border:1px solid #F5FAFC;border-radius:30px;background:linear-gradient(145deg,#FFFFFF,#F5FAFC)}
.roundtable-head{margin-bottom:22px}
.roundtable-head h2{font-size:clamp(25px,3.2vw,34px);letter-spacing:-.035em}
.roundtable-reveal{margin:0}
.roundtable-reveal .roundtable-open{padding:17px 21px;display:flex;justify-content:flex-start;align-items:center;gap:13px;border-radius:20px;background:#FFFFFF;border:1px solid #F5FAFC;box-shadow:0 12px 30px rgba(40,53,61,.05)}
.roundtable-open-icon{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;color:#FFFFFF;background:#5C7180;font-size:19px;flex:none}
.roundtable-open-text{display:grid;gap:2px;flex:1;min-width:0}
.roundtable-open-text strong{font-size:14px;line-height:1.35;color:#28353D}
.roundtable-open-text small{font-size:11px;font-weight:500;line-height:1.45;color:#5C7180}
.roundtable-reveal .roundtable-open-arrow{font-size:20px;color:#5C7180}
.roundtable-reveal[open] .roundtable-open{border-radius:20px 20px 10px 10px;background:#FFFFFF}
.roundtable-reveal .roundtable-playback{padding:11px 0 0}
.roundtable-chat-appbar{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid #F5FAFC;border-radius:20px 20px 0 0;border-bottom:0;background:rgba(255,255,255,.95)}
.roundtable-chat-appbar-faces{display:flex;align-items:center;padding-left:9px;flex-shrink:0}
.roundtable-chat-appbar-faces img{width:30px;height:30px;margin-left:-9px;border:2px solid #FFFFFF;border-radius:50%;object-fit:cover;box-shadow:0 3px 8px rgba(40,53,61,.10)}
.roundtable-chat-appbar-copy{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px}
.roundtable-chat-appbar-copy strong{font-size:13px;line-height:1.3;color:#28353D}
.roundtable-chat-appbar-copy span{font-size:10px;line-height:1.45;color:#5C7180}
.roundtable-chat-live{display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.08em;font-weight:800;color:#5C7180}
.roundtable-chat-live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5C7180}
.roundtable-reveal.is-playing .roundtable-chat-live i{animation:rtLivePulse 1.5s ease-in-out infinite}
@keyframes rtLivePulse{0%,100%{opacity:.5}50%{opacity:1;box-shadow:0 0 0 4px rgba(92,113,128,.1)}}
.roundtable-playback-bar{margin:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border:1px solid #F5FAFC;border-bottom:0;background:#FFFFFF}
.roundtable-playback-indicator{display:flex;min-width:0;flex-direction:column;gap:2px}
.roundtable-playback-status{font-size:11px;color:#5C7180;line-height:1.35;font-weight:700}
.roundtable-progress{font-size:10px;font-variant-numeric:tabular-nums;color:#5C7180}
.roundtable-playback-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.roundtable-playback-controls button{font-family:inherit;cursor:pointer;font-size:10px;line-height:1.3;padding:8px 11px;font-weight:700;border-radius:999px;min-height:31px;letter-spacing:.025em;border:1px solid #F5FAFC;background:#FFFFFF;color:#5C7180;white-space:nowrap;transition:background .2s ease, transform .15s ease}
.roundtable-playback-controls button:active{transform:scale(.97)}
.roundtable-playback-controls button:hover{background:#F5FAFC}
.roundtable-playback-controls button[hidden]{display:none!important}
.roundtable-playback-controls .roundtable-show-all{color:#FFFFFF;background:#5C7180;border-color:#5C7180}
.roundtable-playback-controls .roundtable-show-all:hover{background:#006F8C}
.roundtable-chat-stage{border:1px solid #F5FAFC;border-radius:0 0 22px 22px;overflow:hidden;background:#FFFFFF}
.roundtable-reveal .roundtable-conversation{position:relative;display:flex;flex-direction:column;gap:14px;min-height:270px;max-height:min(62vh,600px);overflow:auto;padding:27px 26px 30px!important;border:0;border-radius:0;background:radial-gradient(ellipse at 12% 6%,rgba(245,250,252,.78),transparent 36%),linear-gradient(170deg,#FFFFFF,#FFFFFF)}
.roundtable-reveal .roundtable-conversation::before{display:none}
.roundtable-chat-day{align-self:center;padding:6px 13px;background:rgba(245,250,252,.72);border-radius:999px;color:#5C7180;font-weight:500;font-size:10px;margin:2px 0 14px;letter-spacing:.02em}
.roundtable-reveal .roundtable-message,.roundtable-reveal .roundtable-message.is-reply{width:100%;display:grid;grid-template-columns:39px minmax(0,1fr);column-gap:12px;align-items:start;margin:0;gap:12px;transition:none}
.roundtable-reveal .roundtable-message::before,.roundtable-reveal .roundtable-message.is-reply::before{display:none}
.roundtable-reveal .roundtable-speaker{display:block;align-self:start;margin-top:18px;line-height:0;z-index:1}
.roundtable-reveal .roundtable-speaker img{display:block;width:39px;height:39px;object-fit:cover;border-radius:50%;border:2px solid #FFFFFF;box-shadow:0 3px 12px rgba(40,53,61,.08)}
.roundtable-message-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.roundtable-speaker-name{font-size:11px;line-height:1.4;color:#5C7180;font-weight:700;margin:0 0 4px 7px;text-decoration:none}
.roundtable-speaker-name:hover{text-decoration:underline}
.roundtable-reveal .roundtable-speech,.roundtable-reveal .roundtable-message.is-reply .roundtable-speech{position:relative;width:fit-content;min-width:65px;max-width:min(620px,95%);padding:12px 17px;border-radius:5px 19px 19px 19px;background:#FFFFFF;border:1px solid #F5FAFC;color:#28353D;font-size:13px;line-height:1.8;box-shadow:0 5px 20px rgba(40,53,61,.035)}
.roundtable-reveal .roundtable-message.tone-green .roundtable-speech{background:#F5FAFC;border-color:#F5FAFC}
.roundtable-reveal .roundtable-message:nth-child(5n+2) .roundtable-speech{background:#F5FAFC;border-color:#F5FAFC}
.roundtable-reveal .roundtable-message:nth-child(5n+4) .roundtable-speech{background:#F5FAFC;border-color:#F5FAFC}
.roundtable-reveal .roundtable-message .roundtable-speech p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.roundtable-reveal.is-playing .roundtable-message:not(.is-visible):not(.is-typing){display:none}
.roundtable-reveal.is-playing .roundtable-message.is-visible{animation:rtMessageIn .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes rtMessageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.roundtable-reveal.is-playing .roundtable-message.is-typing .roundtable-speech p{display:none}
.roundtable-reveal.is-playing .roundtable-message.is-typing .roundtable-typing{display:flex;align-items:center;gap:5px;min-width:43px;min-height:24px}
.roundtable-reveal.is-playing .roundtable-message.is-writing .roundtable-speech p::after{content:"";display:inline-block;width:2px;height:1em;margin:0 0 0 2px;vertical-align:-.12em;background:#5C7180;animation:rtCaretBlink .75s steps(1) infinite}
@keyframes rtCaretBlink{0%,49%{opacity:.95}50%,100%{opacity:0}}
.roundtable-reveal .roundtable-typing i{width:6px;height:6px;border-radius:50%;background:#5C7180;animation:rtDotHop 1.1s infinite ease-in-out}
.roundtable-reveal .roundtable-typing i:nth-child(2){animation-delay:.15s}
.roundtable-reveal .roundtable-typing i:nth-child(3){animation-delay:.3s}
@keyframes rtDotHop{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.roundtable-chat-end{display:none;align-self:center;margin:14px 0 0;padding:8px 16px;border-radius:100px;background:#F5FAFC;color:#5C7180;font-size:11px;font-weight:600}
.roundtable-chat-end.is-visible{display:block}
.roundtable-chat-end span{color:#D8E7EF;margin-left:4px}
.roundtable-chat-bottom{height:45px;display:flex;align-items:center;justify-content:center;gap:15px;background:#FFFFFF;border-top:1px solid #F5FAFC;color:#5C7180;font-size:10px;letter-spacing:.05em}
.roundtable-chat-bottom span:first-child{color:#D8E7EF;font-size:18px}
.roundtable-chat-bottom span:last-child{color:#D8E7EF;font-size:16px}
.roundtable-reveal.is-paused .roundtable-chat-live i{animation:none;background:#D8E7EF}
.roundtable-reveal:focus-within .roundtable-open:focus-visible,.roundtable-reveal button:focus-visible,.roundtable-reveal a:focus-visible,.roundtable-conversation:focus-visible{outline:3px solid #5C7180;outline-offset:3px}
@media(max-width:700px){
 .roundtable-section{margin-top:38px;padding:19px 12px 20px;border-radius:22px}
 .roundtable-head{display:block;margin-bottom:18px}
 .roundtable-head h2{font-size:24px}
 .roundtable-reveal .roundtable-open{padding:13px 14px;gap:10px}
 .roundtable-open-icon{width:32px;height:32px;font-size:16px}
 .roundtable-open-text strong{font-size:13px}
 .roundtable-open-text small{font-size:10px}
 .roundtable-chat-appbar{padding:12px 11px;gap:9px;border-radius:17px 17px 0 0}
 .roundtable-chat-appbar-faces img{width:24px;height:24px}
 .roundtable-chat-appbar-copy strong{font-size:12px}
 .roundtable-chat-appbar-copy span{font-size:9px}
 .roundtable-chat-live{font-size:8px}
 .roundtable-playback-bar{padding:9px;gap:7px;align-items:center}
 .roundtable-playback-status{font-size:10px}
 .roundtable-progress{font-size:9px}
 .roundtable-playback-controls{gap:4px}
 .roundtable-playback-controls button{font-size:9px;padding:7px 8px;min-height:30px}
 .roundtable-reveal .roundtable-conversation{max-height:430px;min-height:245px;padding:18px 10px 22px!important;gap:13px}
 .roundtable-reveal .roundtable-message,.roundtable-reveal .roundtable-message.is-reply{grid-template-columns:30px minmax(0,1fr);gap:7px}
 .roundtable-reveal .roundtable-speaker{margin-top:18px}
 .roundtable-reveal .roundtable-speaker img{width:30px;height:30px}
 .roundtable-speaker-name{font-size:10px;margin-bottom:3px}
 .roundtable-reveal .roundtable-speech,.roundtable-reveal .roundtable-message.is-reply .roundtable-speech{max-width:99%;border-radius:5px 15px 15px 15px;padding:10px 12px;font-size:12px;line-height:1.85}
 .roundtable-chat-bottom{height:40px;font-size:9px}
}
@media(max-width:430px){
 .roundtable-chat-appbar-copy span{max-width:200px}
 .roundtable-playback-bar{flex-wrap:wrap}
 .roundtable-playback-indicator{flex:1}
 .roundtable-playback-controls{flex:none}
 .roundtable-reveal .roundtable-conversation{max-height:min(55vh,420px)}
}
@media(prefers-reduced-motion:reduce){
 .roundtable-reveal *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* v7.4 / mobile gallery: five equal columns and genuine edge-to-edge width */
@media(max-width:900px){
 .service-hero .service-hero-inner{display:flex!important;flex-direction:column;align-items:stretch;gap:12px!important}
 .service-hero .persona-cloud{order:-1!important;position:relative!important;left:auto!important;transform:none!important;align-self:stretch!important;box-sizing:border-box!important;display:block!important;width:100vw!important;min-width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:0!important;height:205px!important;min-height:205px!important;overflow:hidden!important;border:0!important;border-radius:0!important}
 .service-hero .hero-gallery{width:100%!important;min-width:0!important;height:205px!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important;padding:0 4px!important;box-sizing:border-box!important}
 .service-hero .hero-gallery-column{min-width:0!important;width:auto!important;max-width:none!important;overflow:hidden!important}
 .service-hero .hero-gallery-column:nth-child(-n+5){display:block!important}
 .service-hero .hero-gallery-column:nth-child(n+6){display:none!important}
 .service-hero .hero-gallery-track{gap:5px!important}
 .service-hero .hero-gallery-item{width:100%!important;box-sizing:border-box!important;aspect-ratio:.8/1!important}
 .service-hero .service-copy{width:100%!important;max-width:none!important;min-width:0!important}
}
@media(max-width:560px){
 .service-hero .persona-cloud{height:184px!important;min-height:184px!important}
 .service-hero .hero-gallery{height:184px!important;gap:4px!important;padding:0 3px!important}
 .service-hero .hero-gallery-track{gap:4px!important}
 .service-hero .hero-gallery-item{aspect-ratio:.8/1!important;border-radius:8px!important}
 .service-hero .hero-gallery-meta strong{font-size:8px!important}
 .service-hero .hero-gallery-meta small{font-size:6.5px!important}
}

/* Reply relationships are visible even when someone skims the finished log. */
.roundtable-message-label{display:flex;align-items:baseline;gap:10px;margin:0 0 4px 7px;min-width:0;flex-wrap:wrap}
.roundtable-message-label .roundtable-speaker-name{margin:0}
.roundtable-reply-cue{font-size:9px;line-height:1.4;color:#5C7180;letter-spacing:.01em}
@media(max-width:700px){.roundtable-message-label{gap:6px;margin-bottom:4px}.roundtable-reply-cue{font-size:8px}}

/* v7.5 — a quieter heading above comments and roundtable */
.work-comments-heading{
  margin-bottom:18px !important;
  align-items:center;
}
.work-comments-heading h2{
  margin:0;
  font-size:20px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.055em;
  color:#5C7180;
}
@media(max-width:700px){
  .work-comments-heading{margin-bottom:14px !important}
  .work-comments-heading h2{font-size:16px;letter-spacing:.045em}
}


/* v7.6 author & persona design refinements ---------------------------------- */
/* The occupation label stays compact in the profile column. */
.work-comment-reader-copy{min-width:0}
.work-comment-reader-copy h3{margin-bottom:5px}
.work-comment-reader-copy p{
  white-space:nowrap;
  font-size:11px;
  line-height:1.32;
  font-weight:500;
  letter-spacing:-.025em;
  margin:0 0 5px;
}
.work-comment-reader-copy .work-comment-page{
  margin-top:0;
  min-height:23px!important;
  font-size:9px!important;
  padding:0 9px!important;
}
@media(min-width:901px){
  .work-comment-main{grid-template-columns:268px minmax(0,1fr);gap:26px}
  .work-comment-reader{gap:12px;padding-left:12px}
  .work-comment-avatar img{width:77px;height:77px}
}
@media(max-width:900px){
  .work-comment-reader-copy p{font-size:11px;margin-bottom:5px}
  .work-comment-reader{gap:12px}
}
@media(max-width:420px){
  .work-comment-reader-copy p{font-size:10px;letter-spacing:-.03em}
  .work-comment-reader-copy h3{margin-bottom:4px}
}

/* The decorative pastel patches become slowly drifting ellipses. */
.work-comment-card::before,.stack-card::before{
  width:132px;
  height:74px;
  right:-27px;
  top:-22px;
  border-radius:50%;
  background:radial-gradient(ellipse at 40% 45%, rgba(245,250,252,.34),rgba(245,250,252,.14) 72%,rgba(245,250,252,.035) 100%);
  transform-origin:50% 50%;
  will-change:transform;
  animation:reread-pastel-orbit 22s ease-in-out infinite alternate;
  pointer-events:none;
}
.work-comment-card.tone-green::before,.stack-card:nth-child(even)::before{
  background:radial-gradient(ellipse at 40% 40%, rgba(216,231,239,.35),rgba(216,231,239,.13) 72%,rgba(216,231,239,.025) 100%);
  animation-delay:-9s;
  animation-duration:26s;
}
.stack-card:nth-child(3n)::before,.work-comment-card:nth-child(3n)::before{
  animation-delay:-13s;
  animation-duration:29s;
}
@keyframes reread-pastel-orbit{
  0%{transform:translate3d(0,0,0) rotate(-23deg)}
  25%{transform:translate3d(-13px,10px,0) rotate(8deg)}
  60%{transform:translate3d(-24px,20px,0) rotate(44deg)}
  100%{transform:translate3d(-8px,5px,0) rotate(102deg)}
}
@media(max-width:600px){
  .work-comment-card::before,.stack-card::before{width:98px;height:57px;right:-20px;top:-17px}
}
@media(prefers-reduced-motion:reduce){
  .work-comment-card::before,.stack-card::before{animation:none!important;transform:rotate(-18deg)!important}
}

/* Author page headline, compact intro-to-works transition. */
.author-hero-copy h1{font-size:clamp(32px,3.15vw,45px);line-height:1.18;letter-spacing:-.035em}
.author-hero{padding-top:62px;padding-bottom:36px}
.author-works-section{padding-top:18px}
.author-section-head{margin-bottom:17px!important}
.author-section-head h2{font-size:clamp(22px,2.3vw,28px);font-weight:700}
.author-featured,.author-featured img{min-height:340px}
@media(max-width:900px){
  .author-hero{padding-top:38px;padding-bottom:22px}
  .author-hero-copy h1{font-size:32px}
  .author-works-section{padding-top:15px}
  .author-featured,.author-featured img{min-height:260px}
}
@media(max-width:650px){
  .author-hero{padding-top:28px;padding-bottom:15px}
  .author-hero-grid{gap:22px}
  .author-hero-copy h1{font-size:25px;margin-top:5px}
  .author-roman{margin-bottom:17px}
  .author-stats{margin-top:17px}
  .author-actions{margin-top:15px}
  .author-works-section{padding-top:9px}
  .author-section-head{margin-bottom:14px!important}
  .author-section-head h2{font-size:22px}
  .author-featured,.author-featured img{min-height:216px}
}

/* A clickable author name must look like a link even before hovering. */
a.work-author-link,a.stack-author-link,a.author-handle-link{
  display:inline-flex;
  align-items:center;
  gap:2px;
  width:fit-content;
  max-width:100%;
  color:#5C7180;
  font-weight:600;
  border-bottom:1px solid rgba(92,113,128,.38);
  text-underline-offset:3px;
  transition:color .22s ease,border-color .22s ease;
}
a.work-author-link::after,a.stack-author-link::after,a.author-handle-link::after{
  content:'↗';
  display:inline-block;
  font-size:.82em;
  margin-left:3px;
  font-weight:500;
}
a.work-author-link:hover,a.stack-author-link:hover,a.author-handle-link:hover{
  color:#006F8C;
  border-bottom-color:#006F8C;
}
a.work-author-link:focus-visible,a.stack-author-link:focus-visible,a.author-handle-link:focus-visible{
  outline:2px solid #01A2CE;
  outline-offset:3px;
  border-radius:3px;
}
/* Preserve title and author on one flowing line when space permits. */
.work-title-line a.work-author-link,.stack-card h3 a.stack-author-link{
  font-size:.58em;
  vertical-align:baseline;
  white-space:nowrap;
}

/* Genre tags: avoid a solid white patch; let some cover image show through. */
.thumb-link .pill,.work-hero-copy .pill{
  background:rgba(255,255,255,.31)!important;
  border-color:rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  box-shadow:0 6px 15px rgba(40,53,61,.055)!important;
}
.author-work-thumb span{
  background:rgba(255,255,255,.36);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

/* v7.6 final polish: unbroken age / occupation and understated Profile link */
.work-comment-reader-copy{
  flex:1 1 auto;
  min-width:0;
}
.work-comment-reader-copy h3{
  margin-bottom:5px;
}
.work-comment-reader-copy p{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10.5px;
  font-weight:450;
  line-height:1.35;
  letter-spacing:-.035em;
  margin-bottom:4px;
}
.work-comment-reader-copy a.work-comment-page{
  margin-top:0;
  min-height:24px!important;
  padding:0 10px!important;
  font-size:9px!important;
  font-weight:600;
  letter-spacing:.06em;
  white-space:nowrap;
}
/* Large Japanese names still fit without making the profile column wider. */
@media (max-width:900px){
  .work-comment-reader-copy p{font-size:10.5px}
}
@media (max-width:430px){
  .work-comment-reader-copy p{font-size:10px}
}
/* Gentle elliptical accent: keep the text and clickable controls above it. */
.work-comment-card::before,.stack-card::before{
  opacity:.95;
  z-index:0;
}
.work-comment-card > *, .stack-card > *{
  position:relative;
  z-index:1;
}


/* v7.7 Author discovery and author's ongoing catalog */
/* Writer names are clearly clickable, but remain visually secondary to a work title. */
.work-title-line a.work-author-link,
.stack-card h3 a.stack-author-link,
a.author-handle-link{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  gap:3px;
  width:auto;
  max-width:100%;
  white-space:nowrap;
  padding:3px 7px 4px;
  border:1px solid #F5FAFC;
  border-bottom:1px solid #D8E7EF;
  border-radius:7px;
  background:rgba(245,250,252,.62);
  color:#006F8C;
  line-height:1.25;
  font-weight:650;
  text-decoration:none;
  box-shadow:0 1px 0 rgba(0,111,140,.025);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.work-title-line a.work-author-link:hover,
.stack-card h3 a.stack-author-link:hover,
a.author-handle-link:hover{
  background:#F5FAFC;
  border-color:#5C7180;
  color:#006F8C;
  transform:translateY(-1px);
}
.work-title-line a.work-author-link:focus-visible,
.stack-card h3 a.stack-author-link:focus-visible,
a.author-handle-link:focus-visible{
  outline:2px solid #006F8C;
  outline-offset:2px;
}
.work-title-line a.work-author-link,
.stack-card h3 a.stack-author-link{
  font-size:.48em;
  letter-spacing:.01em;
}
a.author-handle-link{
  font-size:12px;
  letter-spacing:.015em;
}
.work-title-line a.work-author-link::after,
.stack-card h3 a.stack-author-link::after,
a.author-handle-link::after{
  content:'↗';
  font-size:.94em;
  margin-left:3px;
  line-height:1;
}
/* Make the author hero / work shelf feel like one connected page. */
.author-page .author-hero{
  padding-bottom:10px;
}
.author-page .author-hero-grid{
  gap:46px;
}
.author-page .author-featured,
.author-page .author-featured img{
  min-height:270px;
}
.author-page .author-featured{
  height:270px;
}
.author-page .author-works-section{
  padding-top:12px;
}
.author-page .author-section-head{
  margin-bottom:16px !important;
}
.author-page .author-works-section .author-section-head h2{
  font-size:clamp(19px,1.8vw,23px);
  letter-spacing:-.025em;
  font-weight:650;
}
.author-page .author-readers-section .author-section-head h2{
  font-size:clamp(21px,2vw,27px);
  font-weight:700;
}
@media (max-width:900px){
  .author-page .author-hero{padding-bottom:8px;}
  .author-page .author-hero-grid{gap:22px;}
  .author-page .author-featured,
  .author-page .author-featured img{min-height:220px;}
  .author-page .author-featured{height:220px;}
  .author-page .author-works-section{padding-top:8px;}
}
@media (max-width:650px){
  .author-page .author-hero{padding-bottom:4px;}
  .author-page .author-hero-grid{gap:17px;}
  .author-page .author-featured,
  .author-page .author-featured img{min-height:180px;}
  .author-page .author-featured{height:180px;}
  .author-page .author-works-section{padding-top:8px;}
  .author-page .author-works-section .author-section-head h2{font-size:19px;}
  .author-page .author-readers-section .author-section-head h2{font-size:20px;}
  .author-page .author-section-head{margin-bottom:13px!important;}
  .work-title-line a.work-author-link,
  .stack-card h3 a.stack-author-link{font-size:.52em;padding:3px 6px;}
}


/* v7.8 compact work hero + cleaner author page */
.thumb-link .pill,
.work-hero-copy .pill,
.author-work-thumb span{
  background:rgba(255,255,255,.52)!important;
  border-color:rgba(255,255,255,.78)!important;
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  box-shadow:0 8px 18px rgba(40,53,61,.065)!important;
}
.work-hero{padding-top:42px;padding-bottom:24px;}
.work-hero .inner.work-hero-inner{
  max-width:1160px;
  margin:0 auto;
  grid-template-columns:minmax(300px, 470px) minmax(360px, 620px);
  justify-content:center;
  gap:58px;
  align-items:center;
}
.work-hero-thumb{
  border-radius:28px;
}
.work-title-line-hero{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 8px;
  margin:0 0 18px;
}
.work-title-line-hero span:first-child{display:inline;}
.work-title-line-hero a.work-author-link{
  font-size:.46em;
  vertical-align:baseline;
}
.work-hero-copy h1.work-title-line-hero{font-size:clamp(28px,2.65vw,42px);line-height:1.28;max-width:17em;}
.work-hero-actions{display:flex;justify-content:flex-end;margin:0 0 20px;}
.work-summary-compact,
.summary-box .work-summary-compact{
  font-size:15px;
  line-height:1.92;
  color:#5C7180;
}
.summary-box{padding:16px 20px 18px;max-width:620px;}
.summary-box span{font-size:13px;margin-bottom:4px;}
.author-page .author-roman{display:none!important;}
.author-page .author-hero-grid{max-width:1020px;margin:0 auto;justify-content:center;}
.author-page .author-hero-copy{max-width:520px;}
.author-page .author-hero-copy h1{margin-bottom:12px;}
.author-page .author-intro{margin-top:0;}
@media (max-width:1000px){
  .work-hero .inner.work-hero-inner{grid-template-columns:minmax(270px,420px) minmax(320px,1fr);gap:34px;}
  .work-hero-copy h1.work-title-line-hero{font-size:clamp(25px,3.2vw,34px);}
}
@media (max-width:760px){
  .work-hero{padding-top:26px;padding-bottom:16px;}
  .work-hero .inner.work-hero-inner{grid-template-columns:1fr;max-width:690px;gap:18px;align-items:start;}
  .work-hero-thumb{max-width:640px;margin:0 auto;}
  .work-hero-copy{max-width:640px;margin:0 auto;}
  .work-title-line-hero{margin-bottom:12px;}
  .work-hero-actions{justify-content:flex-start;margin-bottom:14px;}
  .summary-box{max-width:none;}
}
@media (max-width:430px){
  .work-hero-copy h1.work-title-line-hero{font-size:22px;line-height:1.34;}
  .work-title-line-hero a.work-author-link{font-size:.52em;}
  .summary-box{padding:14px 16px 16px;border-radius:18px;}
  .summary-box span{font-size:12px;}
  .work-summary-compact,.summary-box .work-summary-compact{font-size:14px;line-height:1.82;}
}


/* v7.9 top gallery shape, tighter readers, mobile top reveal, footer legal */
:root{--site-header-mobile:88px;}
html{scroll-padding-top:92px;}
.service-copy h1{line-height:1.12!important;}
.hero-gallery{gap:10px!important;}
.hero-gallery-track{gap:10px!important;}
.hero-gallery-item{
  transform:none!important;
  border-radius:22px!important;
  aspect-ratio:0.74!important;
}
.hero-gallery-item img{
  transform:none!important;
  border-radius:22px!important;
}
.hero-gallery-item:hover img{transform:scale(1.04)!important;}
.hero-gallery-meta{
  transform:none!important;
  border-radius:14px!important;
}
.hero-gallery-column.offset-1{padding-top:2px!important;}
.hero-gallery-column.offset-2{padding-top:50px!important;}
.hero-gallery-column.offset-3{padding-top:18px!important;}
.hero-gallery-column.offset-4{padding-top:70px!important;}
.hero-gallery-column.offset-5{padding-top:16px!important;}
.hero-gallery-column.offset-6{padding-top:82px!important;}
.reader-grid{gap:16px!important;}
.reader-card a{height:448px!important;padding:18px 20px!important;}
.reader-card img{width:116px!important;height:116px!important;margin-bottom:12px!important;}
.reader-card h3{margin-bottom:4px!important;}
.reader-role{margin-bottom:10px!important;}
.reader-intro{font-size:13.5px!important;line-height:1.78!important;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
.footer-v2-grid{grid-template-columns:1.15fr 1fr 1fr 1fr!important;}
.legal-page{padding:56px 0 76px;}
.legal-inner{max-width:860px;}
.legal-kicker{margin:0 0 10px;font-size:12px;letter-spacing:.18em;font-weight:800;color:#5C7180;}
.legal-page h1{margin:0 0 16px;font-size:clamp(32px,4vw,44px);line-height:1.16;letter-spacing:-.03em;}
.legal-lead{margin:0 0 28px;font-size:15px;line-height:1.9;color:#5C7180;}
.legal-card{background:var(--paper);border:1px solid rgba(245,250,252,.95);border-radius:22px;padding:22px 24px;margin-bottom:16px;box-shadow:0 12px 32px rgba(40,53,61,.06);}
.legal-card h2{margin:0 0 12px;font-size:20px;line-height:1.4;}
.legal-card p,.legal-card li,.legal-card dd{font-size:15px;line-height:1.95;color:#28353D;}
.legal-card ul{margin:8px 0 0 1.2em;padding:0;}
.legal-dl{display:grid;grid-template-columns:170px 1fr;gap:10px 18px;margin:0;}
.legal-dl dt{font-weight:700;color:#28353D;}
.legal-dl dd{margin:0;}
.legal-inline-link{color:var(--brand);font-weight:700;}
@media (max-width:1024px){
  .footer-v2-grid{grid-template-columns:1fr 1fr!important;gap:24px 28px!important;}
}
@media (max-width:760px){
  html{scroll-padding-top:86px;}
  .service-hero{padding-top:20px!important;}
  .service-copy h1{line-height:1.14!important;}
  .hero-gallery{grid-template-columns:repeat(4,minmax(0,1fr))!important;height:336px!important;gap:8px!important;}
  .hero-gallery-track{gap:8px!important;}
  .hero-gallery-column:nth-child(5),.hero-gallery-column:nth-child(6){display:none!important;}
  .hero-gallery-column.offset-1{padding-top:0!important;}
  .hero-gallery-column.offset-2{padding-top:18px!important;}
  .hero-gallery-column.offset-3{padding-top:8px!important;}
  .hero-gallery-column.offset-4{padding-top:26px!important;}
  .hero-gallery-item{aspect-ratio:0.76!important;border-radius:14px!important;}
  .hero-gallery-item img{border-radius:14px!important;}
  .hero-gallery-meta{left:7px!important;right:7px!important;bottom:7px!important;top:auto!important;padding:7px 7px!important;border-radius:10px!important;}
  .hero-gallery-meta strong{font-size:10px!important;}
  .hero-gallery-meta small{font-size:8px!important;line-height:1.2!important;}
  .reader-card a{height:422px!important;padding:16px 16px 18px!important;}
  .reader-card img{width:102px!important;height:102px!important;margin-bottom:10px!important;}
  .reader-card h3{font-size:21px!important;}
  .reader-role{font-size:13px!important;}
  .reader-intro{-webkit-line-clamp:5;font-size:13px!important;line-height:1.75!important;}
  .legal-page{padding:34px 0 52px;}
  .legal-card{padding:18px 16px;border-radius:18px;}
  .legal-dl{grid-template-columns:1fr;gap:4px 0;}
}


/* v8.0 — balanced gallery, improved mobile scrolling, tighter reader cards */
/* Normal rectangular tiles; keep the alternating vertical flow but remove skewed cuts. */
.service-hero .hero-gallery,
.service-hero .hero-gallery-track{gap:6px!important;}
.service-hero .hero-gallery-item,
.service-hero .hero-gallery-column:nth-child(odd) .hero-gallery-item,
.service-hero .hero-gallery-column:nth-child(even) .hero-gallery-item{
  border-radius:14px!important;
  clip-path:none!important;
  transform:none!important;
}
.service-hero .hero-gallery-item img,
.service-hero .hero-gallery-item:hover img{
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  transform:none!important;
  object-fit:cover!important;
}
.service-hero .hero-gallery-item:hover img{transform:scale(1.025)!important;}
.service-hero .hero-gallery-meta{transform:none!important;}
/* A little more air between the two large headline lines. */
.service-copy h1{line-height:1.22!important;}

/* Compress readers slightly without disturbing the four-column arrangement. */
.reader-card a{height:405px!important;padding:17px 19px 16px!important;}
.reader-card img{width:108px!important;height:108px!important;margin-bottom:11px!important;}
.reader-card h3{margin-bottom:3px!important;}
.reader-role{margin-bottom:8px!important;}
.reader-intro{font-size:13px!important;line-height:1.75!important;}

/* The author's own note is visible alongside their name. */
.author-page .author-heading-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:8px 0 20px;}
.author-page .author-heading-row h1{margin:0!important;min-width:0;}
.author-note-pill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:9px 17px;background:#28353D;color:#FFFFFF;border:1px solid #28353D;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;letter-spacing:.06em;transition:background .2s ease,transform .2s ease;}
.author-note-pill:hover,.author-note-pill:focus-visible{background:#28353D;transform:translateY(-1px);}
.author-note-pill span{font-size:14px;}

@media(max-width:900px){
  .service-hero .hero-gallery,
  .service-hero .hero-gallery-track{gap:4px!important;}
  .service-hero .hero-gallery-item,
  .service-hero .hero-gallery-column:nth-child(odd) .hero-gallery-item,
  .service-hero .hero-gallery-column:nth-child(even) .hero-gallery-item{border-radius:9px!important;}
  .reader-card a{height:378px!important;padding:15px 15px 16px!important;}
  .reader-card img{width:100px!important;height:100px!important;}
  .reader-intro{-webkit-line-clamp:5!important;}
}
@media(max-width:820px){
  /* iPhone: header scrolls off screen naturally instead of covering the gallery
     and blocking a full return to its first row. */
  .site-header{position:relative!important;top:auto!important;}
  html{scroll-padding-top:0!important;}
  #works,#readers{scroll-margin-top:18px!important;}
  .service-hero .hero-gallery,.service-hero .persona-cloud{touch-action:pan-y;}
  .service-copy h1{line-height:1.2!important;}
}
@media(max-width:650px){
  .author-page .author-heading-row{gap:8px 12px;margin:8px 0 18px;}
  .author-note-pill{font-size:11px;min-height:32px;padding:7px 12px;}
  .reader-card a{height:365px!important;}
  .reader-card img{width:90px!important;height:90px!important;}
}


/* v8.1 compact work hero, rectangular top gallery, tighter reader cards */
.service-copy h1{line-height:1.16!important;}
.service-hero .hero-gallery,
.service-hero .hero-gallery-track{gap:5px!important;}
.service-hero .hero-gallery-item,
.service-hero .hero-gallery-column:nth-child(odd) .hero-gallery-item,
.service-hero .hero-gallery-column:nth-child(even) .hero-gallery-item{
  border-radius:18px!important;
}
.service-hero .hero-gallery-item img,
.service-hero .hero-gallery-item:hover img{
  border-radius:18px!important;
}
.reader-card a{height:392px!important;padding:17px 18px 14px!important;}
.reader-card img{width:104px!important;height:104px!important;margin-bottom:10px!important;}
.reader-card h3{margin-bottom:2px!important;}
.reader-role{margin-bottom:7px!important;}
.reader-intro{-webkit-line-clamp:5!important;font-size:12.8px!important;line-height:1.72!important;}

.work-hero{padding-top:26px!important;padding-bottom:8px!important;}
.work-hero .inner.work-hero-inner{
  width:min(860px, calc(100% - 48px));
  max-width:860px!important;
  grid-template-columns:minmax(320px, 360px) minmax(0, 1fr)!important;
  gap:30px!important;
  align-items:start!important;
}
.work-hero-visual{position:relative;}
.work-hero-thumb{
  width:100%;
  aspect-ratio:1 / 1!important;
  border-radius:26px!important;
  box-shadow:0 14px 32px rgba(40,53,61,.07)!important;
}
.work-hero-image-pill{
  position:absolute;
  left:16px;
  top:16px;
  margin:0!important;
  z-index:2;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(255,255,255,.88)!important;
  box-shadow:0 8px 18px rgba(40,53,61,.06)!important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.work-hero-copy{padding-top:8px;}
.work-hero-copy h1.work-title-line-hero{
  font-size:clamp(18px,2.15vw,27px)!important;
  line-height:1.42!important;
  margin:0 0 10px!important;
  max-width:none!important;
}
.work-title-line-hero{gap:4px 8px!important;}
.work-title-line-hero a.work-author-link,
.work-author-inline{
  font-size:.44em!important;
  font-weight:600!important;
  color:#5C7180!important;
}
.work-hero-actions{
  justify-content:flex-start!important;
  margin:0 0 12px!important;
}
.note-link{
  min-height:34px;
  padding:8px 14px!important;
  font-size:11px!important;
}
.summary-box{
  padding:14px 16px 15px!important;
  border-radius:20px!important;
  max-width:none!important;
}
.summary-box span{font-size:12px!important;margin-bottom:4px!important;}
.work-summary-compact,
.summary-box .work-summary-compact{
  font-size:13.5px!important;
  line-height:1.82!important;
}

@media (max-width:900px){
  .service-hero .hero-gallery,
  .service-hero .hero-gallery-track{gap:4px!important;}
  .reader-card a{height:372px!important;padding:15px 14px 14px!important;}
  .reader-card img{width:96px!important;height:96px!important;}
  .work-hero .inner.work-hero-inner{
    width:min(860px, calc(100% - 32px));
    max-width:660px!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  .work-hero-thumb{aspect-ratio:16 / 10!important;max-width:100%!important;}
  .work-hero-copy{padding-top:0;}
}
@media (max-width:560px){
  .service-copy h1{line-height:1.14!important;}
  .reader-card a{height:356px!important;}
  .reader-card img{width:88px!important;height:88px!important;}
  .work-hero{padding-top:18px!important;padding-bottom:4px!important;}
  .work-hero-thumb{border-radius:20px!important;}
  .work-hero-image-pill{left:12px;top:12px;}
  .work-hero-copy h1.work-title-line-hero{font-size:20px!important;line-height:1.36!important;}
  .work-title-line-hero a.work-author-link,.work-author-inline{font-size:.50em!important;}
  .summary-box{padding:13px 14px 14px!important;border-radius:17px!important;}
  .work-summary-compact,.summary-box .work-summary-compact{font-size:13px!important;line-height:1.75!important;}
}


/* v8.2 — legal disclosure as a true two-column row table.
   Labels and values share one grid row and one separator to avoid drift. */
.legal-page-commerce{
  padding:58px 0 78px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%);
}
.legal-page-commerce .legal-inner{
  width:min(1050px,calc(100% - 48px));
  max-width:1050px;
}
.legal-page-commerce .legal-kicker{margin-bottom:12px;}
.legal-page-commerce h1{margin-bottom:15px;}
.legal-page-commerce .legal-lead{
  max-width:800px;
  margin-bottom:29px;
  font-size:14px;
  line-height:1.9;
}
.legal-spec-table{
  margin:0;
  padding:0;
  border-top:1px solid #F5FAFC;
}
.legal-spec-row{
  display:grid;
  grid-template-columns:minmax(175px,27%) minmax(0,1fr);
  align-items:start;
  column-gap:28px;
  padding:25px 10px 26px;
  border-bottom:1px solid #F5FAFC;
}
.legal-spec-row dt,
.legal-spec-row dd{
  margin:0;
  padding:0;
  font-size:14px;
  font-weight:400;
  line-height:1.95;
  overflow-wrap:anywhere;
}
.legal-spec-row dt{color:#5C7180;font-weight:600;}
.legal-spec-row dd{color:#28353D;}
.legal-publication-note{
  margin:24px 6px 0;
  font-size:12px;
  line-height:1.8;
  color:#5C7180;
}
@media(max-width:700px){
  .legal-page-commerce{padding:32px 0 50px;}
  .legal-page-commerce .legal-inner{width:calc(100% - 32px);}
  .legal-page-commerce .legal-lead{font-size:13px;margin-bottom:20px;}
  .legal-spec-row{grid-template-columns:1fr;row-gap:4px;padding:17px 4px 19px;}
  .legal-spec-row dt{font-size:12px;line-height:1.6;}
  .legal-spec-row dd{font-size:13px;line-height:1.85;}
  .legal-publication-note{font-size:11px;margin-top:16px;}
}


/* v8.3: reader comment spacing and square profile link */
.work-comment-card .work-comment-reader{
  gap:22px!important;
}
.work-comment-card .work-comment-reader-copy a.work-comment-page{
  border-radius:7px!important;
  min-height:25px!important;
  padding:2px 11px!important;
  line-height:1.35!important;
  margin-top:2px!important;
}
@media(max-width:900px){
  .work-comment-card .work-comment-reader{gap:18px!important;}
}
@media(max-width:560px){
  .work-comment-card .work-comment-reader{gap:15px!important;}
  .work-comment-card .work-comment-reader-copy a.work-comment-page{
    border-radius:6px!important;
    min-height:24px!important;
  }
}

/* v8.3: unified layout for the front-page reader grid.
   This overrides conflicting height and text flow rules from earlier versions. */
.readers-section .reader-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px!important;
  align-items:stretch;
}
.readers-section .reader-card{
  min-width:0;
  overflow:hidden;
  border-radius:21px;
  background:#FFFFFF;
}
.readers-section .reader-card > a{
  box-sizing:border-box!important;
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:292px!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  padding:20px 18px 17px!important;
  overflow:hidden!important;
  text-align:center;
}
.readers-section .reader-card > a::after{content:none!important;display:none!important;}
.readers-section .reader-card img{
  width:99px!important;
  height:99px!important;
  flex:0 0 auto!important;
  margin:0 auto 9px!important;
  object-fit:cover;
}
.readers-section .reader-card h3{
  width:100%;min-width:0;
  margin:0 0 4px!important;
  font-size:21px!important;
  line-height:1.3!important;
  overflow-wrap:anywhere;
  flex:0 0 auto;
}
.readers-section .reader-card .reader-role{
  width:100%!important;
  min-width:0;
  max-width:100%!important;
  flex:0 0 auto;
  margin:0 0 11px!important;
  font-size:12px!important;
  line-height:1.45!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
}
.readers-section .reader-card .reader-intro{
  box-sizing:border-box!important;
  display:block!important;
  flex:0 1 auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  max-height:86px!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  font-size:13px!important;
  line-height:1.72!important;
  font-weight:400!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:normal!important;
  overflow:hidden!important;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:initial!important;
  -webkit-mask-image:linear-gradient(to bottom,black 0%,black 65%,transparent 100%);
  mask-image:linear-gradient(to bottom,black 0%,black 65%,transparent 100%);
}
@media(min-width:561px) and (max-width:1000px){
  .readers-section .reader-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .readers-section .reader-card > a{height:302px!important;padding:17px 15px!important;}
  .readers-section .reader-card img{width:88px!important;height:88px!important;}
  .readers-section .reader-card h3{font-size:19px!important;}
}
@media(min-width:561px) and (max-width:740px){
  .readers-section .reader-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important;}
}
@media(max-width:560px){
  .readers-section .reader-grid{grid-template-columns:1fr!important;gap:11px!important;}
  .readers-section .reader-card{border-radius:17px;}
  .readers-section .reader-card > a{
    display:grid!important;
    grid-template-columns:78px minmax(0,1fr)!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    align-items:start!important;
    column-gap:14px!important;
    row-gap:3px!important;
    height:134px!important;
    padding:12px 13px!important;
    text-align:left!important;
  }
  .readers-section .reader-card img{
    grid-column:1;grid-row:1 / 4;
    width:77px!important;height:77px!important;
    margin:9px 0 0!important;
    border-radius:17px!important;
  }
  .readers-section .reader-card h3{
    grid-column:2;grid-row:1;
    margin:0!important;
    text-align:left;
    font-size:18px!important;
  }
  .readers-section .reader-card .reader-role{
    grid-column:2;grid-row:2;
    text-align:left!important;
    font-size:11px!important;
    margin:0!important;
  }
  .readers-section .reader-card .reader-intro{
    grid-column:2;grid-row:3;
    display:block!important;
    max-height:40px!important;
    margin-top:2px!important;
    font-size:11.5px!important;
    line-height:1.55!important;
    -webkit-mask-image:linear-gradient(to bottom,black 0%,black 73%,transparent 100%);
    mask-image:linear-gradient(to bottom,black 0%,black 73%,transparent 100%);
  }
}


/* v8.4 — roundtable icon stability + mobile fixed header recovery */
.roundtable-open-icon{
  width:36px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-radius:50%!important;
  background:#5C7180!important;
  color:#FFFFFF!important;
  line-height:0!important;
  overflow:hidden;
}
.roundtable-open-icon svg{
  display:block;
  width:18px;
  height:18px;
}
.roundtable-open-icon svg path{
  fill:none;
  stroke:#FFFFFF;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:560px){
  .roundtable-open-icon{
    width:32px!important;
    height:32px!important;
  }
  .roundtable-open-icon svg{
    width:16px;
    height:16px;
  }
}

/* On mobile, keep the header visible on every page and reserve its height
   so the top of the page never hides underneath it. */
@media (max-width:820px){
  :root{--mobile-header-offset:62px;}
  html{scroll-padding-top:calc(var(--mobile-header-offset) + 8px)!important;}
  body{padding-top:var(--mobile-header-offset)!important;}
  .site-header{
    position:fixed!important;
    top:0!important;
    left:0;
    right:0;
    width:100%;
    z-index:1200!important;
    min-height:var(--mobile-header-offset);
    background:rgba(255,255,255,.94)!important;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  .site-header .header-inner{
    min-height:var(--mobile-header-offset);
    align-items:center;
  }
  #works,#readers,#faq,#pricing,#contact{scroll-margin-top:calc(var(--mobile-header-offset) + 8px)!important;}
}
@media (max-width:560px){
  :root{--mobile-header-offset:72px;}
  .site-header .header-inner{min-height:var(--mobile-header-offset);}
}


/* v8.5 — footer simplification, compact work hero, refreshed Misaki image */
.footer-v2-bottom{
  justify-content:center!important;
  text-align:center!important;
}
.footer-v2-bottom span{
  display:inline-block;
}
@media(max-width:560px){
  .footer-v2-bottom{align-items:center!important;}
}

.work-title-line-hero{
  align-items:center!important;
  gap:10px 14px!important;
}
.work-title-line-hero .work-author-chip,
.work-author-chip{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px;
  padding:8px 14px!important;
  border-radius:12px!important;
  background:#FFFFFF!important;
  border:1px solid #D8E7EF!important;
  color:#5C7180!important;
  font-size:.34em!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  text-decoration:none!important;
  vertical-align:middle;
  white-space:nowrap;
  transform:translateY(-1px);
}
.work-title-line-hero .work-author-chip:hover,
.work-title-line-hero .work-author-chip:focus-visible{
  background:#F5FAFC!important;
  color:#5C7180!important;
  box-shadow:0 6px 14px rgba(40,53,61,.08);
}
.work-hero-copy h1.work-title-line-hero{
  max-width:14.5em!important;
  margin-bottom:14px!important;
}
.work-hero-copy .summary-box{margin-top:0!important;}
@media (max-width:760px){
  .work-title-line-hero{gap:10px 10px!important;}
  .work-title-line-hero .work-author-chip{font-size:.42em!important;padding:7px 12px!important;}
}
@media (max-width:430px){
  .work-title-line-hero .work-author-chip{font-size:.5em!important;padding:7px 11px!important;border-radius:10px!important;}
}

/* Ensure the refreshed Misaki portrait fills circular crops cleanly,
   while square uses remain natural and edge-to-edge. */
img[src*="misaki_refresh_20261008"]{
  object-fit:cover!important;
  object-position:center center!important;
}
.profile-main-image[src*="misaki_refresh_20261008"]{
  object-position:center center!important;
}
.profile-thumb img[src*="misaki_refresh_20261008"],
.reader-card img[src*="misaki_refresh_20261008"],
.work-comment-avatar img[src*="misaki_refresh_20261008"],
.roundtable-speaker img[src*="misaki_refresh_20261008"],
.roundtable-members img[src*="misaki_refresh_20261008"],
.other-reader-card img[src*="misaki_refresh_20261008"]{
  object-fit:cover!important;
  object-position:center center!important;
}


/* v8.7 — fix work hero meta layout and refresh Aoi portrait */
.work-hero-copy h1.work-title-line-hero{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 12px!important;
}
.work-hero-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 14px;
  flex-wrap:wrap;
  margin:0 0 14px;
}
.work-hero-meta .work-author-chip{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px;
  padding:8px 16px!important;
  border-radius:16px!important;
}
.work-hero-meta .work-author-chip::after{content:none!important;}
.work-hero-meta .note-link{margin-left:auto;}
@media (max-width:560px){
  .work-hero-meta{align-items:flex-start;gap:10px 10px;margin-bottom:12px;}
  .work-hero-meta .note-link{margin-left:0;}
}
img[src*="reader_aoi_night_20261008"]{
  object-fit:cover!important;
  object-position:center center!important;
}
.profile-main-image[src*="reader_aoi_night_20261008"]{
  object-position:center center!important;
}
.profile-thumb img[src*="reader_aoi_night_20261008"],
.reader-card img[src*="reader_aoi_night_20261008"],
.work-comment-avatar img[src*="reader_aoi_night_20261008"],
.roundtable-speaker img[src*="reader_aoi_night_20261008"],
.roundtable-members img[src*="reader_aoi_night_20261008"],
.other-reader-card img[src*="reader_aoi_night_20261008"]{
  object-fit:cover!important;
  object-position:center center!important;
}

/* v8.8 — make the work and its readers the focus of the homepage */
/* Keep the introductory synopsis as a discreet two-line hint. Full text remains on the work page. */
.works-section .work-card .work-body h3.work-title-line{
  font-size:18px!important;
  line-height:1.48!important;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:10px!important;
}
.works-section .work-card .work-body h3.work-title-line a.work-author-link{
  font-size:11px!important;
  line-height:1.25;
  letter-spacing:.01em;
}
.works-section .work-card .work-summary-mini{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  font-size:13px!important;
  line-height:1.75!important;
  margin-bottom:12px!important;
}
@media (max-width:560px){
  .works-section .work-card .work-body h3.work-title-line{
    font-size:17px!important;
    line-height:1.42!important;
    margin-bottom:8px!important;
  }
  .works-section .work-card .work-summary-mini{
    font-size:12px!important;
    line-height:1.65!important;
    margin-bottom:8px!important;
  }
}


/* v8.9 — centered editorial heading for work comments */
.work-comments-heading{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:0!important;
  width:100%;
  max-width:860px;
  margin:0 auto 28px!important;
  text-align:center;
}
.work-comments-heading .work-comments-kicker{
  display:block;
  margin-bottom:9px;
  font-size:10px;
  font-weight:750;
  letter-spacing:.29em;
  line-height:1.7;
  color:#5C7180;
}
.work-comments-heading h2{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:7px;
  width:100%;
  margin:0!important;
  color:#28353D;
  font-size:clamp(23px,2.65vw,31px)!important;
  line-height:1.5!important;
  letter-spacing:.025em!important;
  font-weight:750!important;
}
.work-comments-heading .work-comments-amp{
  font-family:Georgia,'Times New Roman',serif;
  font-size:.84em;
  font-weight:400;
  color:#D8E7EF;
  padding:0 3px;
}
.work-comments-ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:12px;
  width:116px;
  height:6px;
}
.work-comments-ornament i{
  display:block;
  width:42px;
  height:1px;
  background:#D8E7EF;
}
.work-comments-ornament b{
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#D8E7EF;
  transform:rotate(45deg);
}
@media (max-width:700px){
  .work-comments-heading{margin-bottom:22px!important;}
  .work-comments-heading .work-comments-kicker{font-size:9px;margin-bottom:7px;letter-spacing:.23em;}
  .work-comments-heading h2{font-size:clamp(18px,5vw,24px)!important;gap:4px;letter-spacing:0!important;}
  .work-comments-heading .work-comments-amp{padding:0 1px;}
  .work-comments-ornament{margin-top:9px;}
}


/* v9.0 — personality-led hero gallery; tighter but intact work cards */
/* Match small editorial text with a deliberate, readable 3-line caption. */
.service-hero .hero-gallery-item::after{
  height:51%!important;
  background:linear-gradient(180deg,rgba(40,53,61,0) 0%,rgba(40,53,61,.09) 29%,rgba(40,53,61,.63) 100%)!important;
}
.service-hero .hero-gallery-meta{
  left:12px!important;
  right:10px!important;
  bottom:11px!important;
  max-width:calc(100% - 20px);
  padding:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  text-align:left;
}
.service-hero .hero-gallery-meta strong{
  font-size:clamp(12px,1.03vw,15px)!important;
  line-height:1.18!important;
  font-weight:700!important;
  letter-spacing:.015em!important;
  color:#FFFFFF!important;
}
.service-hero .hero-gallery-meta small{
  font-size:clamp(9px,.75vw,11px)!important;
  line-height:1.3!important;
  font-weight:500!important;
  margin-top:4px!important;
  color:#FFFFFF!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.service-hero .hero-gallery-one-liner{
  display:block!important;
  width:100%;
  margin-top:8px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.44);
  color:rgba(255,255,255,.95);
  font-size:clamp(8px,.7vw,10px)!important;
  font-style:normal;
  line-height:1.25;
  font-weight:450;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 9px rgba(40,53,61,.45);
}
.service-hero .hero-gallery-item:hover .hero-gallery-one-liner{
  border-top-color:rgba(255,255,255,.68);
}

/* Make the 3-column work cards about 80% of the previous height.
   Keep the CTA anchored to the bottom of each card and never force its text to clip. */
@media (min-width:901px){
  .works-section .work-card{height:496px!important;min-height:0!important;}
  .works-section .work-thumb{height:156px!important;object-fit:cover;}
  .works-section .work-body{padding:14px 18px 13px!important;min-height:0;}
  .works-section .work-card .work-body h3.work-title-line{margin-bottom:7px!important;}
  .works-section .work-card .work-summary-mini{margin-bottom:9px!important;}
  .works-section .comment-preview.compact-preview{min-height:0!important;}
}
@media (min-width:561px) and (max-width:900px){
  .works-section .work-card{height:480px!important;min-height:0!important;}
  .works-section .work-thumb{height:154px!important;}
  .works-section .work-body{padding:14px!important;min-height:0;}
}
@media (max-width:900px){
  .service-hero .hero-gallery-meta{left:7px!important;right:5px!important;bottom:7px!important;}
  .service-hero .hero-gallery-meta strong{font-size:10px!important;line-height:1.12!important;}
  .service-hero .hero-gallery-meta small{font-size:7px!important;line-height:1.15!important;margin-top:2px!important;}
  .service-hero .hero-gallery-one-liner{font-size:7px!important;padding-top:4px;margin-top:4px;}
}
@media (max-width:560px){
  .works-section .work-card{height:410px!important;min-height:0!important;}
  .works-section .work-thumb{height:138px!important;}
  .works-section .work-body{padding:12px 14px 10px!important;min-height:0;}
  .works-section .work-card .work-body h3.work-title-line{margin-bottom:5px!important;}
  .works-section .work-card .work-summary-mini{margin-bottom:6px!important;}
  .works-section .comment-preview.compact-preview{min-height:0!important;}
  .service-hero .hero-gallery-meta{left:5px!important;right:3px!important;bottom:5px!important;}
  .service-hero .hero-gallery-meta strong{font-size:9px!important;}
  .service-hero .hero-gallery-meta small{font-size:6.6px!important;}
  .service-hero .hero-gallery-one-liner{font-size:6.2px!important;padding-top:3px;margin-top:3px;letter-spacing:0;}
}
@media (prefers-reduced-motion:reduce){
  .service-hero .hero-gallery-track{animation:none!important;}
}


/* v9.0 final — tactile persona tags, safe work-card sizing, iOS sticky header */
.service-hero .hero-gallery-traits{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:4px;
  margin-top:7px;
  min-width:0;
}
.service-hero .hero-gallery-trait{
  display:inline-block;
  max-width:50%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.44);
  background:rgba(40,53,61,.23);
  border-radius:5px;
  font-size:clamp(8px,.63vw,10px);
  font-weight:550;
  line-height:1.3;
  letter-spacing:0;
  color:#FFFFFF;
  text-shadow:0 1px 4px rgba(40,53,61,.35);
}
/* Avoid old pseudo-bubble styles; personality is shown in unobtrusive captions. */
.service-hero .hero-gallery-meta{
  display:block;
  pointer-events:none;
}
.service-hero .hero-gallery-meta strong{
  font-size:clamp(12px,1vw,16px)!important;
  line-height:1.24!important;
}
.service-hero .hero-gallery-meta small{
  font-size:clamp(9px,.79vw,12px)!important;
}
@media(min-width:901px){
  .works-section .work-card{height:496px!important;}
  .works-section .work-card .comment-preview{
    flex:1;
    min-height:0!important;
    height:auto!important;
    overflow:hidden;
    position:relative;
  }
  .works-section .work-card .work-body{overflow:hidden;}
  .works-section .work-card .comment-fade{bottom:0!important;}
}
@media(max-width:900px){
  .service-hero .hero-gallery-meta strong{font-size:11px!important;}
  .service-hero .hero-gallery-meta small{font-size:8px!important;}
  .service-hero .hero-gallery-traits{gap:3px;margin-top:5px;}
  .service-hero .hero-gallery-trait{font-size:7px;padding:2px 4px;}
}
@media(max-width:600px){
  .service-hero .hero-gallery-meta strong{font-size:10px!important;}
  .service-hero .hero-gallery-meta small{font-size:7px!important;}
  .service-hero .hero-gallery-traits{margin-top:4px;}
  .service-hero .hero-gallery-trait{font-size:7px;max-width:100%;padding:2px 3px;}
  .service-hero .hero-gallery-trait.trait-secondary{display:none;}
  .works-section .work-card .comment-preview{
    flex:1;
    min-height:0!important;
    height:auto!important;
    overflow:hidden;
  }
  .works-section .work-card .work-body{overflow:hidden;}
  .works-section .work-card .comment-fade{bottom:0!important;}
}
/* iPhone / Android: keep the header continuously visible WITHOUT overlaying
   the top of the document. Sticky participates in normal layout, unlike fixed
   positioning plus a fragile hard-coded body padding. */
@media(max-width:820px){
  body{padding-top:0!important;}
  .site-header{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    z-index:1200!important;
    width:100%;
    min-height:0!important;
    background:rgba(255,255,255,.97)!important;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  html{scroll-padding-top:84px!important;}
  #works,#readers,#faq,#pricing,#contact{scroll-margin-top:84px!important;}
}
@media(min-width:561px) and (max-width:820px){
  html{scroll-padding-top:74px!important;}
  #works,#readers,#faq,#pricing,#contact{scroll-margin-top:74px!important;}
}


/* v9.1 — clarity and rhythm, responsive cards, real pagination and FAQ */
/* Reader cards: true line-clamp ellipses, no fading mask. */
.readers-section .reader-card .reader-intro,
.readers-section .reader-card .reader-intro::after{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
  display:-webkit-box!important;
  max-height:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  opacity:1!important;
  color:#5C7180!important;
}
.readers-section .reader-card > a{
  height:260px!important;
  padding:15px 17px 14px!important;
}
.readers-section .reader-card img{
  width:83px!important;
  height:83px!important;
  margin-bottom:7px!important;
}
.readers-section .reader-card h3{font-size:19px!important;margin-bottom:3px!important;}
.readers-section .reader-card .reader-role{margin-bottom:8px!important;}
.readers-section .reader-card .reader-intro{font-size:12.7px!important;line-height:1.65!important;}
@media (min-width:561px) and (max-width:1000px){
  .readers-section .reader-card > a{height:258px!important;padding:13px!important;}
  .readers-section .reader-card img{width:78px!important;height:78px!important;}
}
@media (max-width:560px){
  .readers-section .reader-card > a{
    height:112px!important;
    padding:11px 13px!important;
    grid-template-columns:69px minmax(0,1fr)!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    gap:1px 13px!important;
  }
  .readers-section .reader-card img{width:67px!important;height:67px!important;margin:8px 0 0!important;}
  .readers-section .reader-card h3{font-size:16px!important;}
  .readers-section .reader-card .reader-role{font-size:10px!important;line-height:1.3!important;margin:0!important;}
  .readers-section .reader-card .reader-intro{
    -webkit-line-clamp:2!important;
    font-size:11px!important;
    line-height:1.45!important;
    max-height:none!important;
    margin-top:2px!important;
  }
  .readers-section .reader-card{border-radius:15px!important;}
}
/* Mobile hero galleries: softer squared-corner crop; keep the last line visible. */
@media(max-width:820px){
  .service-hero .hero-gallery-item,
  .service-hero .hero-gallery-column:nth-child(odd) .hero-gallery-item,
  .service-hero .hero-gallery-column:nth-child(even) .hero-gallery-item,
  .service-hero .hero-gallery-item img{
    border-radius:7px!important;
  }
  .service-hero .hero-gallery-meta{bottom:5px!important;padding:2px 3px!important;}
  .service-hero .hero-gallery-traits{display:none!important;}
  .service-hero .hero-gallery-item::after{border-radius:0 0 7px 7px!important;}
}
/* Slimmer sticky header, more comfortable navigation when opened. */
@media(max-width:820px){
  .site-header .header-inner{min-height:0!important;padding:5px 0!important;}
  .site-header{min-height:0!important;}
  .header-nav{padding:15px 22px 24px!important;}
  .header-nav a{padding:17px 7px!important;line-height:1.6!important;font-size:14px!important;}
  .header-nav a:last-child{margin-top:10px!important;padding:12px 16px!important;}
  html{scroll-padding-top:70px!important;}
  #works,#readers,#faq,#pricing,#contact,#membership{scroll-margin-top:70px!important;}
}
@media(max-width:560px){
  .site-header .header-inner{padding:4px 0!important;min-height:0!important;}
  .site-header .brand-mark{font-size:19px!important;}
  .header-cta-mobile{padding:7px 10px!important;font-size:10px!important;}
  .menu-toggle{height:28px!important;}
  .footer-v2-brand p{
    font-size:10px!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
  }
}
/* Author page: featured image is redundant on narrow screens. */
@media(max-width:700px){
  .author-page .author-featured{display:none!important;}
  .author-page .author-hero-grid{display:block!important;}
}
/* Pagination components on both collection pages. */
.pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin:28px 0 0;}
.pagination a,.pagination span{display:inline-flex;justify-content:center;align-items:center;min-width:38px;height:38px;padding:0 12px;border-radius:12px;border:1px solid #F5FAFC;background:#FFFFFF;color:#5C7180;font-size:13px;font-weight:650;text-decoration:none;}
.pagination a:hover{background:#F5FAFC;}
.pagination .current{background:#5C7180;color:#FFFFFF;border-color:#5C7180;}
.empty-history{padding:28px;text-align:center;color:#5C7180;}
/* FAQ design */
.faq-page{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%);}
.faq-hero{padding:76px 0 22px;text-align:center;}
.faq-hero .eyebrow{color:#5C7180;font-size:11px;letter-spacing:.24em;font-weight:750;}
.faq-hero h1{font-size:clamp(29px,4vw,44px);letter-spacing:.035em;margin:10px 0 10px;}
.faq-hero p:last-child{color:#5C7180;font-size:15px;line-height:1.8;}
.faq-section{padding:26px 0 90px;}
.faq-list{max-width:850px;}
.faq-item{border:1px solid #F5FAFC;border-radius:20px;background:rgba(255,255,255,.94);margin-bottom:13px;overflow:hidden;box-shadow:0 10px 30px rgba(40,53,61,.035);}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:18px;min-height:75px;padding:18px 24px;color:#28353D;font-size:17px;font-weight:700;line-height:1.55;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-num{color:#5C7180;font-size:11px;letter-spacing:.1em;font-weight:800;flex-shrink:0;}
.faq-chevron{margin-left:auto;flex-shrink:0;width:11px;height:11px;border-right:2px solid #5C7180;border-bottom:2px solid #5C7180;transform:rotate(45deg);transition:transform .2s ease;}
.faq-item[open] .faq-chevron{transform:rotate(225deg);}
.faq-answer{padding:0 58px 24px;color:#5C7180;font-size:14px;line-height:2;}
.faq-bottom{margin:36px auto 0;text-align:center;}
.faq-bottom p{font-size:14px;color:#5C7180;margin-bottom:16px;}
@media(max-width:600px){
  .faq-hero{padding:42px 0 12px;}
  .faq-hero p:last-child{font-size:12px;}
  .faq-section{padding:16px 0 60px;}
  .faq-item{border-radius:14px;margin-bottom:9px;}
  .faq-item summary{min-height:66px;padding:16px;gap:10px;font-size:14px;}
  .faq-num{font-size:10px;}
  .faq-answer{padding:0 16px 19px 38px;font-size:12px;line-height:1.95;}
}
/* Keep the full desktop navigation from crowding the brand at tablet widths. */
@media(min-width:769px) and (max-width:1100px){
  .header-nav a[href="faq.php"]{display:none!important;}
}


/* v9.2 — more breathing room in the six-column gallery, detailed literary synopses */
.service-hero .hero-gallery{gap:9px!important;}
.service-hero .hero-gallery-track{gap:9px!important;}
/* On work pages the full story introduction can breathe, while the home cards
   retain their independently clamped short previews. */
.work-hero-copy .summary-box .work-summary-long{
  font-size:14px!important;
  line-height:2!important;
  letter-spacing:.012em;
}
@media(max-width:820px){
 .service-hero .hero-gallery{gap:6px!important;}
 .service-hero .hero-gallery-track{gap:6px!important;}
}
@media(max-width:560px){
 .work-hero-copy .summary-box .work-summary-long{font-size:13.5px!important;line-height:1.95!important;}
}


/* ---------------------- Re:READ v9.3 ---------------------- */
/* Fixed, non-overlapping mobile header. The flow spacer is a DOM element,
   not body padding: scrolling all the way to document Y=0 always reveals
   the first content pixel below the navigation. */
.header-flow-spacer{display:none;}
@media(max-width:820px){
  :root{--rr-header-space:70px;}
  html{scroll-padding-top:0!important;overflow-y:auto!important;}
  body{padding-top:0!important;min-height:0!important;overflow-y:visible!important;}
  .site-header{
    position:fixed!important;
    top:0!important;left:0!important;right:0!important;
    height:auto!important;min-height:0!important;width:100%!important;
    z-index:2500!important;
    margin:0!important;
    transform:none!important;
    background:rgba(255,255,255,.98)!important;
    border-bottom:1px solid #F5FAFC;
  }
  .header-flow-spacer{display:block!important;height:var(--rr-header-space)!important;width:100%;flex:0 0 auto;}
  .site-header .header-inner{min-height:70px!important;padding:9px 0!important;}
  #works,#readers,#roundtable-title,#faq,#pricing,#contact,#membership{scroll-margin-top:calc(var(--rr-header-space) + 15px)!important;}
  .site-header .header-nav{top:100%;}
  /* Avoid scroll anchoring on independently animated columns */
  .persona-cloud,.hero-gallery,.hero-gallery-column,.hero-gallery-track{overflow-anchor:none;}
}
@media(max-width:560px){
  .site-header .header-inner{min-height:69px!important;padding:10px 0!important;}
  .site-header .brand-mark{font-size:20px!important;}
  .header-cta-mobile{font-size:10px!important;padding:8px 11px!important;}
}

/* Top hero: show that the five readers also talk to one another. */
.hero-roundtable-promo{
  display:flex;align-items:center;gap:11px;
  width:min(100%,390px);margin-top:20px;
  padding:12px 13px;border-radius:19px;
  border:1px solid #F5FAFC;background:linear-gradient(110deg,#FFFFFF,#F5FAFC);
  box-shadow:0 14px 30px rgba(0,111,140,.055);
  transition:transform .25s,box-shadow .25s;
}
.hero-roundtable-promo:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(0,111,140,.09);}
.hero-roundtable-promo-avatars{display:flex;flex:none;padding-left:6px;}
.hero-roundtable-promo-avatars img{width:30px;height:30px;border:2px solid #FFFFFF;border-radius:50%;object-fit:cover;margin-left:-6px;box-shadow:0 2px 8px #D8E7EF;}
.hero-roundtable-promo-copy{display:grid;gap:3px;min-width:0;flex:1;}
.hero-roundtable-promo-copy strong{font-size:13px;color:#28353D;letter-spacing:.045em;}
.hero-roundtable-promo-copy small{font-size:10.5px;line-height:1.4;color:#5C7180;}
.hero-roundtable-promo-play{width:29px;height:29px;flex:none;display:grid;place-items:center;border-radius:50%;background:#5C7180;color:white;font-size:9px;padding-left:1px;}
@media(max-width:900px){.service-hero .hero-roundtable-promo{margin:14px 0 7px;}}
@media(max-width:560px){
  .hero-roundtable-promo{width:100%;max-width:none;margin-top:11px!important;padding:10px 12px;}
  .hero-roundtable-promo-copy strong{font-size:12px;}
  .hero-roundtable-promo-copy small{font-size:10px;}
}

/* Conversational invitation: warm, tactile card + play-shaped button. */
.roundtable-section{
  background:radial-gradient(ellipse at 92% 0%,rgba(245,250,252,.65),transparent 52%),
             linear-gradient(138deg,#FFFFFF,#FFFFFF 64%,#F5FAFC)!important;
  border-color:#F5FAFC!important;
  box-shadow:0 20px 55px rgba(40,53,61,.06);
}
.roundtable-reveal .roundtable-open{background:rgba(255,255,255,.96)!important;}
.roundtable-open-arrow,.roundtable-reveal .roundtable-open-arrow{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;
  transform:none!important;
}
.roundtable-open-arrow svg{display:block;width:38px;height:38px;transition:transform .24s ease;filter:drop-shadow(0 3px 5px rgba(0,111,140,.1));}
.roundtable-open-arrow svg circle{fill:#01A2CE;stroke:#F5FAFC;stroke-width:1.5;}
.roundtable-open-arrow svg path{fill:#FFFFFF;stroke:none;}
.roundtable-reveal[open] .roundtable-open-arrow svg{transform:scale(.93);}
.roundtable-reveal .roundtable-open:hover .roundtable-open-arrow svg{transform:scale(1.07);}
@media(max-width:560px){.roundtable-open-arrow,.roundtable-reveal .roundtable-open-arrow{width:36px;height:36px}.roundtable-open-arrow svg{width:34px;height:34px}}

/* Deliberate space above the final note link. */
.work-note-bottom{margin-top:56px!important;}
@media(max-width:700px){.work-note-bottom{margin-top:44px!important;}}

/* Footer links are quietly separated by hairline rules. */
.site-footer-v2 .footer-v2-menu a{
  border-bottom:1px solid rgba(255,255,255,.16)!important;
  padding:11px 0 12px!important;
  margin:0!important;
}
.site-footer-v2 .footer-v2-menu a:last-child{border-bottom-color:rgba(255,255,255,.12)!important;}

/* Distinct author action on work pages with exactly one arrow. */
.work-hero-meta a.work-author-chip{
  display:inline-flex!important;align-items:center!important;gap:6px;
  white-space:nowrap;
}
.work-hero-meta a.work-author-chip::after{
  content:'↗'!important;position:static!important;display:inline-block!important;
  font-size:12px!important;line-height:1!important;margin:0 0 0 3px!important;
  color:#5C7180;
}

/* Gallery: long Japanese names never wrap; role labels never truncate.
   On narrow screens grow the height and bring the fading foot lower. */
@media(max-width:820px){
  .service-hero .hero-gallery-meta strong{
    display:block!important;white-space:nowrap!important;word-break:keep-all!important;
    overflow:visible!important;text-overflow:clip!important;
    font-size:clamp(9px,1.45vw,11px)!important;
    letter-spacing:-.045em!important;
  }
  .service-hero .hero-gallery-meta small{
    display:block!important;white-space:nowrap!important;word-break:keep-all!important;
    overflow:visible!important;text-overflow:clip!important;
    font-size:clamp(6px,.96vw,8px)!important;
    letter-spacing:-.065em!important;
  }
}
@media(max-width:560px){
  .service-hero .persona-cloud{
    height:266px!important;min-height:266px!important;
    overflow:visible!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  .service-hero .hero-gallery{height:266px!important;}
  .service-hero .hero-gallery-item{border-radius:9px!important;}
  .service-hero .hero-gallery-meta{left:4px!important;right:2px!important;bottom:7px!important;}
  .service-hero .hero-gallery-meta strong{font-size:clamp(8.4px,2.5vw,10px)!important;line-height:1.1!important;}
  .service-hero .hero-gallery-meta small{font-size:clamp(5.4px,1.55vw,6.8px)!important;line-height:1.2!important;margin-top:3px!important;}
  .service-hero .persona-cloud::after{
    content:"";display:block!important;pointer-events:none;
    position:absolute;left:0;right:0;bottom:-80px!important;
    height:150px!important;z-index:5;
    background:linear-gradient(0deg,#FFFFFF 4%,rgba(255,255,255,.94) 34%,rgba(255,255,255,0) 100%)!important;
  }
  .service-hero .hero-gallery-column{
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  .service-hero .service-copy{position:relative;z-index:6;}
  .service-hero .hero-gallery-traits{display:none!important;}
}

/* Work library: progressive server-rendered batches with a clear next action. */
.works-more{text-align:center;padding:26px 0 9px;}
.works-more p{margin:0 0 11px;color:#5C7180;font-size:11px;letter-spacing:.13em;}
.works-more-button{display:inline-flex;gap:30px;align-items:center;justify-content:center;min-width:235px;padding:12px 20px;border-radius:999px;border:1px solid #D8E7EF;background:#FFFFFF;color:#006F8C;font-size:13px;font-weight:750;box-shadow:0 12px 26px rgba(0,111,140,.045);}
.works-more-button:hover{background:#F5FAFC;}
.works-more-button span{font-weight:400;font-size:19px;line-height:1;}

/* Slightly softer, more consistent relationship between hero and comments. */
.work-hero + .section{padding-top:44px!important;}
@media(max-width:700px){.work-hero + .section{padding-top:40px!important;}}


/* v9.4 — reader hashtag labels and restrained typography */
.service-hero .hero-gallery-meta strong{
  font-size:clamp(10px,.82vw,13px)!important;
  font-weight:610!important;
  line-height:1.23!important;
  letter-spacing:.01em!important;
}
.service-hero .hero-gallery-meta small{
  font-size:clamp(8px,.64vw,10px)!important;
  font-weight:400!important;
  line-height:1.3!important;
  color:rgba(255,255,255,.93)!important;
  letter-spacing:.005em!important;
}
.service-hero .hero-gallery-traits{
  display:flex!important;
  align-items:center;
  flex-wrap:nowrap;
  gap:5px;
  margin-top:7px;
  max-width:100%;
  min-width:0;
}
.service-hero .hero-gallery-trait{
  display:inline-block!important;
  flex:0 1 auto;
  min-width:0;
  max-width:49%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.43)!important;
  border-radius:5px!important;
  padding:3px 6px!important;
  background:rgba(255,255,255,.18)!important;
  color:#FFFFFF!important;
  font-size:clamp(7px,.52vw,9px)!important;
  font-weight:480!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  text-shadow:0 1px 5px rgba(40,53,61,.3);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
@media(max-width:900px){
  .service-hero .hero-gallery-meta strong{
    font-size:clamp(9px,1.4vw,11px)!important;
    font-weight:600!important;
  }
  .service-hero .hero-gallery-meta small{
    font-size:clamp(7px,.95vw,8.5px)!important;
    font-weight:400!important;
  }
  .service-hero .hero-gallery-traits{
    display:flex!important;
    margin-top:4px!important;
    gap:3px!important;
  }
  .service-hero .hero-gallery-trait{
    padding:2px 4px!important;
    font-size:clamp(6.5px,.9vw,8px)!important;
  }
}
@media(max-width:600px){
  /* A single complete hashtag keeps narrow mobile portrait panels readable. */
  .service-hero .hero-gallery-traits{
    display:flex!important;
    margin-top:4px!important;
    gap:0!important;
  }
  .service-hero .hero-gallery-trait{
    max-width:100%!important;
    font-size:clamp(6.5px,1.65vw,7.4px)!important;
    padding:2px 3px!important;
    white-space:nowrap!important;
    text-overflow:clip!important;
  }
  .service-hero .hero-gallery-trait.trait-secondary{display:none!important;}
  .service-hero .hero-gallery-meta strong{
    font-size:clamp(8.4px,2.48vw,10px)!important;
    font-weight:600!important;
  }
  .service-hero .hero-gallery-meta small{
    font-size:clamp(5.5px,1.52vw,6.8px)!important;
    font-weight:400!important;
  }
}

/* v9.4 — clear secondary action after the external note destination */
.work-note-bottom{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:13px!important;
}
.work-note-bottom .work-browse-more{
  color:#5C7180!important;
  border-color:#D8E7EF!important;
  background:#FFFFFF!important;
  box-shadow:none!important;
}
.work-note-bottom .work-browse-more:hover,
.work-note-bottom .work-browse-more:focus-visible{
  background:#F5FAFC!important;
  border-color:#D8E7EF!important;
}
@media(max-width:560px){
  .work-note-bottom .btn{width:min(100%,300px)!important;min-width:0!important;}
}

/* v9.5 — compact author chips beside work titles; align with last title line */
.works-section .work-card .work-body h3.work-title-line a.work-author-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center;
  vertical-align:middle!important;
  position:relative;
  top:-1px;
  width:auto;
  min-height:0!important;
  padding:2px 6px!important;
  margin:0 0 0 2px!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  border-radius:5px!important;
  white-space:nowrap;
}
.works-section .work-card .work-body h3.work-title-line a.work-author-link::after{
  font-size:9px!important;
  line-height:1!important;
  margin-left:2px!important;
  vertical-align:middle;
}
@media (max-width:560px){
  .works-section .work-card .work-body h3.work-title-line a.work-author-link{
    font-size:9px!important;
    padding:2px 5px!important;
    top:-1px;
  }
  .works-section .work-card .work-body h3.work-title-line a.work-author-link::after{
    font-size:8px!important;
  }
}


/* v9.6: six visible works by default; reveal new work cards in place. */
.works-grid > .work-card:nth-child(n+10):not(.is-revealed){display:none!important;}
.works-more-button{font-family:inherit;cursor:pointer;}
.works-more-button:focus-visible{outline:3px solid #5C7180;outline-offset:4px;}
.works-grid > .work-card.is-revealed{animation:work-card-arrival .35s ease both;}
@keyframes work-card-arrival{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.works-grid > .work-card.is-revealed{animation:none;}}

.works-grid > .work-card.is-revealed{scroll-margin-top:110px;}

/* =====================================================================
   Re:READ v9.7 — Reader discovery, balanced cards, conversational hero
   ===================================================================== */

/* Hero: a little more breathing room on desktop only. */
@media (min-width:901px){
  .service-hero{padding-top:76px!important;padding-bottom:75px!important;}
  .service-hero .persona-cloud{min-height:670px!important;}
  .service-hero .hero-gallery{height:670px!important;}
}

/* The roundtable preview is a warm invitation, rather than a plain UI strip. */
.service-hero .hero-roundtable-promo{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(100%,425px)!important;
  padding:15px 16px!important;
  gap:13px!important;
  border-radius:24px!important;
  border:1px solid #F5FAFC!important;
  background:linear-gradient(122deg,rgba(245,250,252,.98),rgba(245,250,252,.95) 72%,rgba(245,250,252,.92))!important;
  box-shadow:0 18px 38px rgba(0,111,140,.07),inset 0 1px 0 #FFFFFF!important;
}
.service-hero .hero-roundtable-promo::before{
  content:"";position:absolute;pointer-events:none;z-index:-1;
  width:128px;height:100px;right:-18px;top:-26px;
  background:radial-gradient(ellipse at 50% 45%,rgba(245,250,252,.3),transparent 70%);
  border-radius:50%;transform:rotate(-18deg);
}
.service-hero .hero-roundtable-promo::after{
  content:"✦";pointer-events:none;position:absolute;right:43px;top:8px;
  color:#5C7180;font-size:12px;opacity:.66;
}
.service-hero .hero-roundtable-promo-avatars img{
  width:36px;height:36px;border:2px solid #FFFFFF;
  box-shadow:0 4px 9px rgba(40,53,61,.11);
}
.service-hero .hero-roundtable-promo-copy strong{font-size:15px!important;letter-spacing:.02em!important;}
.service-hero .hero-roundtable-promo-copy small{font-size:11.2px!important;color:#5C7180!important;line-height:1.55!important;}
.service-hero .hero-roundtable-promo-play{
  width:37px!important;height:37px!important;font-size:12px!important;
  background:#01A2CE!important;box-shadow:0 6px 15px rgba(0,111,140,.17);
}
.service-hero .hero-roundtable-promo-play:hover{background:#006F8C!important;transform:scale(1.06);}
@media(max-width:560px){
  .service-hero .hero-roundtable-promo{padding:11px 12px!important;gap:9px!important;width:100%!important;border-radius:19px!important;}
  .service-hero .hero-roundtable-promo-avatars img{width:30px;height:30px;}
  .service-hero .hero-roundtable-promo-copy strong{font-size:13px!important;}
  .service-hero .hero-roundtable-promo-copy small{font-size:10px!important;}
  .service-hero .hero-roundtable-promo-play{width:33px!important;height:33px!important;}
}

/* Reader cards: auto-size to the intro rather than leaving a big blank bottom. */
.readers-section .reader-grid,.reader-list-page .reader-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:19px!important;align-items:stretch;
}
.readers-section .reader-card,.reader-list-page .reader-card{
  position:relative;isolation:isolate;min-width:0;overflow:hidden;
  border-radius:22px!important;border:1px solid #F5FAFC!important;
  background:linear-gradient(158deg,#FFFFFF 0%,#FFFFFF 59%,#FFFFFF 100%)!important;
  box-shadow:0 11px 30px rgba(40,53,61,.04)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.readers-section .reader-card:nth-child(4n+2),.reader-list-page .reader-card:nth-child(4n+2){
  background:linear-gradient(155deg,#FFFFFF 0%,#FFFFFF 52%,#F5FAFC 100%)!important;
  border-color:#F5FAFC!important;
}
.readers-section .reader-card:hover,.reader-list-page .reader-card:hover{
  transform:translateY(-4px);box-shadow:0 19px 43px rgba(40,53,61,.1)!important;border-color:#D8E7EF!important;
}
.readers-section .reader-card > a,.reader-list-page .reader-card > a{
  position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:flex-start!important;text-align:center!important;
  box-sizing:border-box!important;width:100%!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  padding:20px 17px 19px!important;gap:0!important;overflow:visible!important;
}
.readers-section .reader-card > a::after,.reader-list-page .reader-card > a::after{
  display:none!important;content:none!important;
}
.readers-section .reader-card > a::before,.reader-list-page .reader-card > a::before{
  content:"";position:absolute;left:-28px;top:-30px;
  width:100px;height:100px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(245,250,252,.40),transparent 72%);
}
.readers-section .reader-card:nth-child(4n+2)>a::before,.reader-list-page .reader-card:nth-child(4n+2)>a::before{
  background:radial-gradient(circle,rgba(245,250,252,.42),transparent 72%);
}
.readers-section .reader-card img,.reader-list-page .reader-card img{
  display:block!important;grid-column:auto!important;grid-row:auto!important;
  width:93px!important;height:93px!important;flex:0 0 93px!important;
  margin:0 auto 10px!important;border-radius:50%!important;
  object-fit:cover;box-shadow:0 6px 18px rgba(40,53,61,.08);
}
.readers-section .reader-card h3,.reader-list-page .reader-card h3{
  grid-column:auto!important;grid-row:auto!important;width:100%!important;
  font-size:18px!important;font-weight:800!important;line-height:1.35!important;
  margin:0 0 2px!important;overflow-wrap:normal!important;word-break:keep-all!important;
}
.readers-section .reader-card .reader-role,.reader-list-page .reader-card .reader-role{
  grid-column:auto!important;grid-row:auto!important;width:100%!important;
  font-size:11.5px!important;color:#5C7180!important;line-height:1.6!important;
  margin:0 0 12px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
}
.readers-section .reader-card .reader-intro,.reader-list-page .reader-card .reader-intro{
  grid-column:auto!important;grid-row:auto!important;align-self:stretch!important;text-align:left!important;
  display:-webkit-box!important;-webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;line-clamp:3;overflow:hidden!important;
  width:100%!important;max-height:none!important;min-height:0!important;
  margin:0!important;padding:0!important;
  font-size:12.4px!important;line-height:1.72!important;color:#28353D!important;opacity:1!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.readers-section .reader-card .reader-intro::after,.reader-list-page .reader-card .reader-intro::after{display:none!important;content:none!important;}
.reader-card-number{
  position:absolute;right:13px;top:12px;z-index:2;
  display:inline-flex;gap:6px;align-items:center;font-family:inherit;
  color:#D8E7EF;font-size:9px;letter-spacing:.07em;font-weight:650;
}
.reader-card-number i{font-style:normal;font-size:15px;font-weight:500;transition:transform .2s ease;}
.reader-card:hover .reader-card-number i{transform:translate(2px,-2px);}
@media(min-width:601px) and (max-width:1030px){
  .readers-section .reader-grid,.reader-list-page .reader-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:600px){
  .readers-section .reader-grid,.reader-list-page .reader-grid{grid-template-columns:1fr!important;gap:11px!important;}
  .readers-section .reader-card,.reader-list-page .reader-card{border-radius:16px!important;}
  .readers-section .reader-card > a,.reader-list-page .reader-card > a{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    column-gap:13px!important;row-gap:1px!important;
    align-content:center!important;align-items:start!important;
    min-height:107px!important;height:auto!important;
    padding:12px 35px 12px 13px!important;
    text-align:left!important;
  }
  .readers-section .reader-card img,.reader-list-page .reader-card img{
    grid-column:1!important;grid-row:1 / span 3!important;
    width:68px!important;height:68px!important;flex:none!important;
    margin:0!important;align-self:center!important;
  }
  .readers-section .reader-card h3,.reader-list-page .reader-card h3{
    grid-column:2!important;grid-row:1!important;margin:0!important;font-size:16px!important;
  }
  .readers-section .reader-card .reader-role,.reader-list-page .reader-card .reader-role{
    grid-column:2!important;grid-row:2!important;font-size:10.4px!important;line-height:1.35!important;
    margin:1px 0 2px!important;
  }
  .readers-section .reader-card .reader-intro,.reader-list-page .reader-card .reader-intro{
    grid-column:2!important;grid-row:3!important;
    -webkit-line-clamp:2!important;line-clamp:2;font-size:11px!important;line-height:1.55!important;
  }
  .reader-card-number{top:9px;right:10px;font-size:8px;}
  .reader-card-number i{font-size:13px;}
}

/* Show twelve characteristic readers, with a clear link to the full index. */
.reader-directory-cta{
  width:min(100%,560px);margin:34px auto 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.reader-directory-ornament{display:grid;place-items:center;width:31px;height:31px;border:1px solid #F5FAFC;border-radius:50%;color:#5C7180;background:#FFFFFF;font-size:15px;}
.reader-directory-cta p{margin:1px 0 6px;font-size:12px;color:#5C7180;letter-spacing:.055em;}
.reader-directory-button{
  display:inline-flex;align-items:center;justify-content:center;gap:30px;
  min-width:244px;min-height:47px;padding:12px 20px;
  border:1px solid #D8E7EF;border-radius:999px;background:#FFFFFF;
  color:#006F8C;font-weight:750;font-size:13px;letter-spacing:.055em;
  box-shadow:0 13px 26px rgba(40,53,61,.055);transition:background .2s ease,transform .2s ease;
}
.reader-directory-button:hover{background:#F5FAFC;transform:translateY(-2px);}
.reader-directory-button span{font-size:18px;font-weight:400;}
@media(max-width:600px){.reader-directory-cta{margin-top:24px;}.reader-directory-button{width:min(100%,280px);}}

/* The dedicated reader directory works with 24 sample readers today, and 100 later. */
.reader-list-page{min-height:60vh;background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%);}
.reader-list-hero{position:relative;overflow:hidden;padding:70px 0 48px;background:radial-gradient(circle at 84% 25%,rgba(245,250,252,.8),transparent 38%),linear-gradient(116deg,#FFFFFF,#FFFFFF);border-bottom:1px solid #F5FAFC;}
.reader-list-hero .inner{position:relative;}
.reader-list-hero .eyebrow{letter-spacing:.24em;color:#5C7180;font-size:11px;margin-bottom:12px;}
.reader-list-hero h1{margin:0 0 15px;font-size:clamp(28px,3.5vw,43px);line-height:1.4;letter-spacing:-.022em;max-width:850px;}
.reader-list-hero p:not(.eyebrow){font-size:13px;color:#5C7180;line-height:2;max-width:600px;margin:0;}
.reader-list-hero-art{position:absolute;right:10px;bottom:-22px;display:grid;gap:4px;transform:rotate(-8deg);font-size:11px;color:#5C7180;opacity:.65;pointer-events:none;}
.reader-list-hero-art b{font-size:15px;font-weight:600;color:#5C7180;}
.reader-list-hero-art i{position:absolute;right:-24px;top:-22px;font-size:34px;font-style:normal;color:#5C7180;}
.reader-list-section{padding-top:38px;padding-bottom:88px;}
.reader-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:17px;flex-wrap:wrap;margin-bottom:18px;}
.reader-sort{display:flex;align-items:center;gap:5px;background:#F5FAFC;border:1px solid #F5FAFC;border-radius:999px;padding:5px;}
.reader-sort-tab{display:inline-flex;justify-content:center;align-items:center;padding:11px 17px;border-radius:999px;color:#5C7180;min-width:82px;font-size:12px;font-weight:700;transition:.2s;}
.reader-sort-tab:hover{background:#F5FAFC;}
.reader-sort-tab.is-active{background:#006F8C;color:#FFFFFF;box-shadow:0 4px 11px rgba(40,53,61,.12);}
.reader-search{display:flex;align-items:center;gap:7px;max-width:100%;}
.reader-search-field{display:flex;align-items:center;gap:9px;min-height:44px;border:1px solid #F5FAFC;background:#FFFFFF;border-radius:999px;padding:0 14px;color:#5C7180;}
.reader-search-field:focus-within{outline:2px solid #D8E7EF;outline-offset:2px;}
.reader-search-field input{width:174px;min-width:0;font-family:inherit;border:0;outline:0;background:transparent;color:#28353D;font-size:13px;}
.reader-search button{border:1px solid #006F8C;background:#006F8C;border-radius:999px;color:#FFFFFF;font-family:inherit;font-weight:700;font-size:12px;min-height:44px;padding:0 19px;cursor:pointer;}
.reader-search button:hover{background:#006F8C;}
.reader-list-status{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:0 1px 22px;color:#5C7180;font-size:12px;}
.reader-list-status a{color:#006F8C;text-decoration:underline;text-underline-offset:4px;}
.reader-directory-pagination{margin-top:34px;}
.reader-list-empty{text-align:center;background:#FFFFFF;border:1px solid #F5FAFC;border-radius:20px;padding:45px 20px;color:#5C7180;}
.reader-list-empty a{display:inline-block;margin-top:8px;text-decoration:underline;text-underline-offset:4px;}
.reader-list-note{margin:24px 0 0;font-size:11px;color:#5C7180;line-height:1.8;text-align:center;}
@media(max-width:700px){
  .reader-list-hero{padding:43px 0 34px;}
  .reader-list-hero h1{font-size:25px;line-height:1.46;}
  .reader-list-hero-art{opacity:.22;right:6px;bottom:-18px;}
  .reader-list-section{padding-top:27px;}
  .reader-list-toolbar{flex-direction:column;align-items:stretch;gap:13px;}
  .reader-sort{justify-content:space-between;}
  .reader-sort-tab{min-width:0;flex:1;padding:10px 8px;font-size:11px;}
  .reader-search{width:100%;}
  .reader-search-field{flex:1;}
  .reader-search-field input{width:100%;}
  .reader-list-status{padding-bottom:17px;}
}
@media(prefers-reduced-motion:reduce){.readers-section .reader-card,.reader-list-page .reader-card,.reader-directory-button{transition:none!important;}}

/* v9.8 — gentle reactions, favorites and refined comment title */
.work-comments-heading{gap:6px!important;}
.work-comments-heading h2{
  display:flex!important;align-items:baseline!important;justify-content:center!important;
  flex-wrap:wrap!important;column-gap:clamp(7px,1vw,16px)!important;
  font-size:clamp(25px,3vw,39px)!important;letter-spacing:.005em!important;
}
.work-comments-heading .work-comments-amp{margin:0!important;padding:0!important;}
@media(max-width:560px){
  .work-comments-heading h2{font-size:clamp(22px,5.5vw,28px)!important;column-gap:8px!important;}
}
.work-hero-meta a.work-author-chip,.work-hero-meta .work-author-chip{
  border-radius:9px!important;
}
.work-comment-actions{display:flex;justify-content:flex-end;margin-top:15px;}
.reader-appreciate,.reader-favorite{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:8px 14px;min-height:36px;
  border:1px solid #F5FAFC;border-radius:999px;
  background:rgba(255,255,255,.82);color:#5C7180;
  font:inherit;font-size:12px;font-weight:600;line-height:1.25;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.reader-appreciate:hover,.reader-favorite:hover{background:#F5FAFC;transform:translateY(-1px);border-color:#D8E7EF;}
.reader-appreciate:focus-visible,.reader-favorite:focus-visible{outline:2px solid #5C7180;outline-offset:3px;}
.reader-appreciate[data-active="true"],.reader-favorite[data-active="true"]{background:#F5FAFC;border-color:#D8E7EF;color:#006F8C;}
.engagement-heart{font-size:19px;line-height:1;font-weight:400;}
.reader-appreciate[data-active="true"] .engagement-heart,.reader-favorite[data-active="true"] .engagement-heart{color:#F1C9BB;}
.engagement-count{min-width:1.35em;font-size:11px;font-weight:700;color:#5C7180;font-variant-numeric:tabular-nums;}
.reader-appreciate:disabled,.reader-favorite:disabled{opacity:.65;cursor:progress;}
.profile-copy .hero-actions{display:flex!important;flex-wrap:wrap;align-items:center;gap:11px!important;}
.profile-copy .reader-favorite{min-height:42px;padding:10px 17px;background:#FFFFFF;border-color:#F5FAFC;color:#5C7180;gap:12px;box-shadow:0 8px 24px rgba(92,113,128,.06);}
.profile-copy .reader-favorite .engagement-count{display:inline-flex;align-items:center;justify-content:center;min-width:29px;height:29px;padding:0 10px;margin-left:2px;border-radius:999px;border:1px solid rgba(216,231,239,.55);background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.98) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 10px rgba(92,113,128,.10);font-size:12px;font-weight:700;letter-spacing:.02em;color:#5C7180;font-variant-numeric:tabular-nums;}
.profile-copy .reader-favorite[data-active="true"]{background:#F5FAFC;border-color:#F1C9BB;color:#5C7180;}
.profile-copy .reader-favorite[data-active="true"] .engagement-count{border-color:rgba(241,201,187,.45);background:linear-gradient(180deg,#F5FAFC 0%,#F5FAFC 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 3px 10px rgba(92,113,128,.12);color:#5C7180;}
@media(max-width:560px){
  .reader-appreciate{font-size:11px;padding:8px 11px;}
  .profile-copy .hero-actions{align-items:stretch!important;}
  .profile-copy .reader-favorite{flex:1;font-size:12px;justify-content:center;}
  .profile-copy .reader-favorite .engagement-count{min-width:27px;height:27px;padding:0 8px;}
}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}


/* =====================================================================
   v9.9 — concise reader directory, stable decorative typography,
   precise desktop hero spacing
   ===================================================================== */
/* Remove the decorative circular symbol above the reader directory CTA. */
.reader-directory-ornament { display:none!important; }
.reader-directory-cta { gap:7px; }

/* Directory heading accent: words only; avoids emoji replacement on iOS. */
.reader-list-hero-art {
  position:absolute;
  right:12px;
  top:5px;
  bottom:auto;
  display:block;
  max-width:max-content;
  transform:rotate(-5deg);
  white-space:nowrap;
  font-size:13px;
  line-height:1.5;
  letter-spacing:.07em;
  font-weight:650;
  color:#5C7180;
  opacity:.76;
  text-align:right;
  pointer-events:none;
}
@media(max-width:700px) {
  .reader-list-hero .inner { position:relative; }
  .reader-list-hero-art {
    top:0;
    right:0;
    bottom:auto;
    max-width:60%;
    transform:none;
    font-size:9px;
    line-height:1.3;
    letter-spacing:.015em;
    color:#5C7180;
    opacity:.85;
  }
}

/* Shave 20px off both desktop hero edges without changing mobile. */
@media(min-width:901px) {
  .service-hero { padding-top:56px!important; padding-bottom:55px!important; }
}


/* v10.0: Smaller, more balanced titles on author and work detail pages.
   Scoped to the relevant pages; the main cards and body text are unchanged. */
.author-page .author-heading-row {
  gap:8px 12px;
  margin-bottom:16px;
}
.author-page .author-heading-row h1 {
  font-size:clamp(26px,2.15vw,31px)!important;
  line-height:1.25!important;
  letter-spacing:-.035em;
}
.author-page .author-heading-row .author-note-pill {
  min-height:30px;
  padding:6px 11px;
  gap:6px;
  font-size:10px;
  line-height:1.3;
  letter-spacing:.025em;
}
.author-page .author-heading-row .author-note-pill span {
  font-size:11px;
  line-height:1;
}
/* The centered '感想 ＆ ５人の読後会' sign — about half-size. */
.work-comments-heading h2 {
  font-size:19px!important;
  line-height:1.5!important;
  column-gap:6px!important;
  font-weight:750!important;
}
/* The reader's name beside each work comment. */
.work-comment-card .work-comment-reader-copy h3 {
  font-size:18px!important;
  line-height:1.3!important;
  letter-spacing:-.02em;
}
/* Separate heading introducing the five-person conversation. */
.roundtable-section .roundtable-head h2 {
  font-size:18px!important;
  line-height:1.4!important;
  letter-spacing:-.025em;
}
@media(max-width:900px){
  .author-page .author-heading-row h1{font-size:26px!important;}
  .work-comment-card .work-comment-reader-copy h3{font-size:17px!important;}
}
@media(max-width:650px){
  .author-page .author-heading-row h1{font-size:22px!important;}
  .author-page .author-heading-row .author-note-pill{
    min-height:28px;
    padding:5px 9px;
    font-size:9px;
  }
  .author-page .author-heading-row{gap:7px 10px;margin-bottom:14px;}
  .work-comments-heading h2{
    font-size:15px!important;
    column-gap:4px!important;
  }
  .work-comment-card .work-comment-reader-copy h3{font-size:16px!important;}
  .roundtable-section .roundtable-head h2{font-size:16px!important;}
}


/* v10.1 — Restore editorial two-line, angled motto. Mobile sort controls slimmer. */
.reader-list-hero .reader-list-hero-art {
  position:absolute;
  right:clamp(14px, 2.8vw, 36px);
  top:12px;
  bottom:auto;
  width:max-content;
  max-width:34%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  white-space:nowrap;
  text-align:left;
  transform:rotate(-8deg);
  transform-origin:65% 50%;
  color:#5C7180;
  font-size:17px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:.045em;
  opacity:.78;
  pointer-events:none;
}
.reader-list-hero .reader-list-hero-art > span {
  display:block;
  padding-left:2px;
}
.reader-list-hero .reader-list-hero-art > b {
  display:block;
  font-size:22px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.01em;
  color:#5C7180;
}
@media (max-width:700px){
  .reader-list-hero .reader-list-hero-art {
    top:5px;
    right:6px;
    max-width:58%;
    gap:2px;
    transform:rotate(-8deg);
    font-size:11px;
    line-height:1.2;
    letter-spacing:.012em;
    opacity:.8;
  }
  .reader-list-hero .reader-list-hero-art > b {
    font-size:14px;
    line-height:1.24;
  }
  .reader-list-section .reader-sort {
    padding:3px;
    gap:3px;
  }
  .reader-list-section .reader-sort-tab {
    min-height:34px;
    padding:6px 9px;
    line-height:1.3;
  }
}


/* =====================================================================
   v10.2 — calm headline / shorter desktop gallery fade / conversation card
   ===================================================================== */
.service-hero .service-copy .hero-subcopy{
  font-size:13.5px!important;
  line-height:1.75!important;
  letter-spacing:.035em!important;
  font-weight:500!important;
  color:#5C7180!important;
  margin-top:16px!important;
}

/* Five distinct lives actually appear together. Small overlapping speech
   shapes, rather than decorative stars, suggest back-and-forth conversation. */
.service-hero .hero-roundtable-promo{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:100px;
  width:min(100%,440px)!important;
  margin-top:20px!important;
  padding:16px 18px!important;
  border:1px solid #F5FAFC!important;
  border-radius:22px!important;
  background:linear-gradient(114deg,rgba(255,255,255,.98) 4%,rgba(255,255,255,.97) 56%,rgba(245,250,252,.95) 100%)!important;
  box-shadow:0 14px 36px rgba(40,53,61,.075),inset 0 1px 0 rgba(255,255,255,.9)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
.service-hero .hero-roundtable-promo::after{content:none!important;}
.service-hero .hero-roundtable-promo::before{
  content:""!important;
  position:absolute;
  top:-42px!important;
  right:-45px!important;
  width:180px!important;
  height:148px!important;
  background:radial-gradient(ellipse,rgba(245,250,252,.25) 5%,transparent 70%)!important;
  pointer-events:none;
}
.service-hero .hero-roundtable-promo-avatars{
  position:relative;
  isolation:isolate;
  display:flex!important;
  align-items:center!important;
  flex:0 0 115px!important;
  width:115px!important;
  height:62px!important;
  margin:0!important;
  padding:0 0 0 7px!important;
}
.service-hero .hero-roundtable-promo-avatars::before,
.service-hero .hero-roundtable-promo-avatars::after{
  content:"";
  position:absolute;
  z-index:-1;
  border:1px solid rgba(216,231,239,.67);
  border-radius:12px 12px 12px 4px;
  width:57px;
  height:27px;
  background:rgba(245,250,252,.85);
  transform:rotate(-10deg);
  top:2px;left:8px;
}
.service-hero .hero-roundtable-promo-avatars::after{
  width:50px;height:25px;
  left:48px;top:35px;
  background:rgba(245,250,252,.85);
  border-color:rgba(245,250,252,.64);
  border-radius:12px 12px 4px 12px;
  transform:rotate(10deg);
}
.service-hero .hero-roundtable-promo-avatars img{
  display:block!important;
  width:36px!important;
  height:36px!important;
  flex:0 0 36px!important;
  border-radius:50%!important;
  border:2px solid #FFFFFF!important;
  object-fit:cover!important;
  margin-left:-13px!important;
  box-shadow:0 3px 8px rgba(40,53,61,.12)!important;
}
.service-hero .hero-roundtable-promo-avatars img:first-child{margin-left:0!important;transform:translateY(-6px);}
.service-hero .hero-roundtable-promo-avatars img:nth-child(2){transform:translateY(3px);}
.service-hero .hero-roundtable-promo-avatars img:nth-child(3){transform:translateY(-5px);}
.service-hero .hero-roundtable-promo-avatars img:nth-child(4){transform:translateY(5px);}
.service-hero .hero-roundtable-promo-avatars img:nth-child(5){transform:translateY(-2px);}
.service-hero .hero-roundtable-promo-copy{
  display:flex!important;flex-direction:column!important;
  flex:1 1 auto!important;min-width:0!important;gap:3px!important;
  align-items:flex-start!important;text-align:left!important;
}
.service-hero .hero-roundtable-promo-kicker{
  display:block!important;
  font-size:8px!important;
  line-height:1.3!important;
  letter-spacing:.14em!important;
  font-weight:700!important;
  color:#5C7180!important;
}
.service-hero .hero-roundtable-promo-copy strong{
  font-size:17px!important;letter-spacing:-.015em!important;
  line-height:1.25!important;color:#006F8C!important;
}
.service-hero .hero-roundtable-promo-copy small{
  font-size:10.6px!important;
  letter-spacing:.01em!important;
  line-height:1.55!important;
  color:#5C7180!important;
}
.service-hero .hero-roundtable-promo-play{
  flex:0 0 40px!important;
  width:40px!important;height:40px!important;
  display:grid!important;place-items:center!important;
  padding:0!important;
  color:white!important;background:#006F8C!important;
  box-shadow:0 5px 14px rgba(0,111,140,.14)!important;
  border-radius:50%!important;
  transform:none;
  transition:background .22s ease,transform .22s ease;
}
.service-hero .hero-roundtable-promo-play svg{display:block;transform:translateX(1px);}
.service-hero .hero-roundtable-promo-play:hover,
.service-hero .hero-roundtable-promo-play:focus-visible{
  transform:scale(1.06)!important;background:#006F8C!important;
}
@media(min-width:901px){
  /* Less vertical mass, less doubled fading: individual column masks handle
     the seamless edges, while short overlays keep the background consistent. */
  .service-hero{padding-top:45px!important;padding-bottom:44px!important;}
  .service-hero .persona-cloud{min-height:630px!important;
    -webkit-mask-image:none!important;mask-image:none!important;}
  .service-hero .hero-gallery{height:630px!important;}
  .service-hero .hero-gallery-column{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#28353D 8%,#28353D 92%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,transparent 0%,#28353D 8%,#28353D 92%,transparent 100%)!important;
  }
  .service-hero .persona-cloud::before{height:18px!important;top:0!important;
    background:linear-gradient(to bottom,#FFFFFF 0%,rgba(255,255,255,0) 100%)!important;}
  .service-hero .persona-cloud::after{height:23px!important;bottom:0!important;
    background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#FFFFFF 100%)!important;}
}
@media(max-width:900px){
  .service-hero .service-copy .hero-subcopy{font-size:12.5px!important;line-height:1.6!important;margin-top:11px!important;}
}
@media(max-width:560px){
  .service-hero .hero-roundtable-promo{
    min-height:88px;
    padding:12px 13px!important;
    gap:9px!important;
    border-radius:19px!important;
  }
  .service-hero .hero-roundtable-promo-avatars{
    flex-basis:88px!important;
    width:88px!important;
    height:54px!important;
    padding-left:3px!important;
  }
  .service-hero .hero-roundtable-promo-avatars img{
    width:29px!important;height:29px!important;flex-basis:29px!important;
    margin-left:-11px!important;
  }
  .service-hero .hero-roundtable-promo-avatars::before{width:42px;height:22px;left:3px;top:2px;}
  .service-hero .hero-roundtable-promo-avatars::after{width:36px;height:22px;left:35px;top:30px;}
  .service-hero .hero-roundtable-promo-kicker{font-size:6.8px!important;letter-spacing:.065em!important;}
  .service-hero .hero-roundtable-promo-copy strong{font-size:14px!important;}
  .service-hero .hero-roundtable-promo-copy small{font-size:9.5px!important;}
  .service-hero .hero-roundtable-promo-play{width:32px!important;height:32px!important;flex-basis:32px!important;}
  .service-hero .hero-roundtable-promo-play svg{width:13px;height:13px;}
}
@media(max-width:360px){
  .service-hero .hero-roundtable-promo-kicker{display:none!important;}
  .service-hero .hero-roundtable-promo-avatars{flex-basis:70px!important;width:70px!important;}
  .service-hero .hero-roundtable-promo-avatars img{width:26px!important;height:26px!important;flex-basis:26px!important;}
}
@media(prefers-reduced-motion:reduce){
  .service-hero .hero-roundtable-promo,.service-hero .hero-roundtable-promo-play{transition:none!important;}
}


/* v10.3 — even, close spacing around the ampersand and a more legible
   compact author chip alongside work-card titles. */
.work-comments-heading h2{
  column-gap:3px!important;
  gap:3px!important;
}
.work-comments-heading h2 > span{
  margin-inline:0!important;
}
.work-comments-heading .work-comments-amp{
  margin:0!important;
  padding:0!important;
  letter-spacing:0!important;
}
/* The author chip should have the same visual line height as the title
   instead of looking like a tiny footnote below the text. */
.works-section .work-card .work-body h3.work-title-line a.work-author-link{
  min-height:24px!important;
  height:auto!important;
  padding:4px 7px!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  border-radius:6px!important;
  vertical-align:middle!important;
  top:-1px!important;
  box-sizing:border-box;
}
@media(max-width:560px){
  .work-comments-heading h2{
    column-gap:2px!important;
    gap:2px!important;
  }
  .works-section .work-card .work-body h3.work-title-line a.work-author-link{
    min-height:23px!important;
    padding:3px 6px!important;
    font-size:9.5px!important;
    line-height:1.2!important;
    top:-1px!important;
  }
}


/* Re:READ v10.4 — Restore the uncluttered three-person conversation teaser.
   Keep the copy and play icon from the current version. */
.service-hero .hero-roundtable-promo{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:unset!important;
  padding:12px 15px!important;
  border-radius:23px!important;
}
.service-hero .hero-roundtable-promo::before,
.service-hero .hero-roundtable-promo::after,
.service-hero .hero-roundtable-promo-avatars::before,
.service-hero .hero-roundtable-promo-avatars::after{
  content:none!important;
  display:none!important;
}
.service-hero .hero-roundtable-promo-avatars{
  display:flex!important;
  flex:0 0 88px!important;
  width:88px!important;
  height:auto!important;
  padding:0 0 0 5px!important;
  align-items:center!important;
  isolation:auto!important;
  margin:0!important;
}
.service-hero .hero-roundtable-promo-avatars img{
  width:35px!important;
  height:35px!important;
  flex:0 0 35px!important;
  margin-left:-7px!important;
  transform:none!important;
  box-shadow:0 3px 9px rgba(40,53,61,.11)!important;
}
.service-hero .hero-roundtable-promo-avatars img:first-child{margin-left:0!important;transform:none!important;}
.service-hero .hero-roundtable-promo-copy{
  flex:1 1 0!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  text-align:left!important;
}
.service-hero .hero-roundtable-promo-copy strong{font-size:15px!important;}
.service-hero .hero-roundtable-promo-copy small{font-size:11px!important;line-height:1.45!important;}
.service-hero .hero-roundtable-promo-play{
  flex:0 0 36px!important;
  width:36px!important;
  height:36px!important;
  transform:none!important;
}
@media(max-width:560px){
  .service-hero .hero-roundtable-promo{padding:11px 12px!important;gap:9px!important;min-height:78px!important;}
  .service-hero .hero-roundtable-promo-avatars{flex-basis:76px!important;width:76px!important;padding-left:2px!important;}
  .service-hero .hero-roundtable-promo-avatars img{width:30px!important;height:30px!important;flex-basis:30px!important;margin-left:-7px!important;}
  .service-hero .hero-roundtable-promo-copy strong{font-size:13px!important;}
  .service-hero .hero-roundtable-promo-copy small{font-size:10px!important;}
  .service-hero .hero-roundtable-promo-play{width:33px!important;height:33px!important;flex-basis:33px!important;}
}

/* Exactly +3px compared with v10.3, including compact screen rules. */
.service-hero .service-copy .hero-subcopy{font-size:16.5px!important;}
@media(max-width:900px){
  .service-hero .service-copy .hero-subcopy{font-size:15.5px!important;}
}

/* The action button is four pixels shorter: reduce its vertical padding by
   two pixels on both sides, without altering faces or horizontal spacing. */
.works-section .compact-fade .five-reader-link{
  padding-top:10px!important;
  padding-bottom:10px!important;
}

/* Magazine-cover title inspired by the author page's RECENT WORK visual.
   Category stays on top of the image and keeps its existing size. */
.works-section .work-card .work-cover{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  flex:0 0 auto;
}
.works-section .work-card .work-photo-link{display:block;position:relative;}
.works-section .work-card .work-photo-link::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(40,53,61,0) 34%,rgba(40,53,61,.10) 52%,rgba(40,53,61,.56) 100%);
}
.works-section .work-card .work-photo-link .pill{
  z-index:3;
}
.works-section .work-card .work-cover h3.work-cover-title{
  position:absolute;
  z-index:4;
  left:16px;
  right:16px;
  bottom:14px;
  margin:0!important;
  padding:0!important;
  font-size:22px!important;
  font-weight:700!important;
  line-height:1.42!important;
  letter-spacing:-.02em!important;
  color:#FFFFFF!important;
  text-shadow:0 1px 5px rgba(40,53,61,.18);
}
.works-section .work-card .work-cover h3.work-cover-title>a:first-child{
  color:#FFFFFF!important;
}
.works-section .work-card .work-cover h3.work-cover-title>a:first-child:hover{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.works-section .work-card .work-cover h3.work-cover-title a.work-author-link{
  display:inline-block!important;
  margin-left:8px!important;
  background:none!important;
  border:none!important;
  color:#FFFFFF!important;
  text-shadow:none!important;
  min-height:auto!important;
  padding:0!important;
  font-size:12.5px!important;
  font-weight:600!important;
  line-height:1.2!important;
  vertical-align:baseline!important;
  border-radius:0!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px!important;
  white-space:nowrap!important;
}
.works-section .work-card .work-body>.work-summary-mini{margin-top:0!important;}
@media(max-width:560px){
  .works-section .work-card .work-cover h3.work-cover-title{
    left:13px;
    right:13px;
    bottom:11px;
    font-size:20px!important;
    line-height:1.38!important;
  }
  .works-section .work-card .work-cover h3.work-cover-title a.work-author-link{
    margin-left:7px!important;
    font-size:11.5px!important;
  }
}


/* v10.5 | Open the full reader directory beneath the four suggestions. */
.other-readers-all{
  display:flex;
  justify-content:center;
  margin-top:28px;
}
.other-readers-all .reader-directory-button{min-width:242px;}

/* v10.5 | Mobile work page: reduce only the space above the comments title. */
@media(max-width:700px){
  .work-hero + .section{padding-top:28px!important;}
  .other-readers-all{margin-top:20px;}
  .other-readers-all .reader-directory-button{width:min(100%,280px);}
}


/* Re:READ v10.6 | note-proportion work covers and compact reader feedback */
/* note article thumbnail: 1280 x 670 (approx. 1.91:1). Keep image ratio
   consistent whether the original artwork is square or landscape. */
.works-section .work-card .work-photo-link{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:1280 / 670;
}
.works-section .work-card .work-photo-link > img.work-thumb{
  display:block;
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
/* Preserve the magazine-style image overlay and its category. Only title is -4px. */
.works-section .work-card .work-cover h3.work-cover-title{
  font-size:14px!important;
  line-height:1.48!important;
}
/* The taller cover should not eat the visible comment area. */
@media(min-width:901px){
  .works-section .work-card{height:526px!important;}
}
@media(min-width:561px) and (max-width:900px){
  .works-section .work-card{height:506px!important;}
}
@media(max-width:560px){
  .works-section .work-card{height:468px!important;}
  .works-section .work-card .work-cover h3.work-cover-title{
    font-size:13px!important;
    line-height:1.42!important;
  }
}
/* Vote button now belongs to the left reader information, rather than
   to the bottom of the long comment. */
.work-comment-card .work-comment-reader-controls{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  width:max-content;
  max-width:100%;
}
.work-comment-card .work-comment-reader-controls .compact-reader-appreciate{
  display:inline-flex;
  box-sizing:border-box;
  min-height:25px!important;
  height:25px!important;
  padding:2px 8px!important;
  gap:5px;
  border-radius:7px;
  font-size:9px!important;
  font-weight:600;
  line-height:1!important;
  white-space:nowrap;
}
.work-comment-card .compact-reader-appreciate .engagement-heart{font-size:14px;line-height:1;}
.work-comment-card .compact-reader-appreciate .engagement-count{font-size:9px;min-width:9px;}
/* Same height as the Profile chip on mobile. */
@media(max-width:900px){
  .work-comment-card .work-comment-reader-controls{
    flex-direction:row;
    align-items:center;
    flex-wrap:nowrap;
    gap:7px;
  }
  .work-comment-card .work-comment-reader-controls .work-comment-page{
    min-height:25px!important;
    height:25px!important;
    box-sizing:border-box;
    margin:0!important;
  }
}
@media(max-width:420px){
  .work-comment-card .work-comment-reader-controls{gap:6px;}
  .work-comment-card .work-comment-reader-controls .compact-reader-appreciate{padding-inline:7px!important;gap:4px;}
}


/* v10.8 | requested polish ------------------------------------------------ */
/* Top-page work panel: category/tag text in white for stronger contrast. */
.works-section .work-card .work-photo-link .pill{
  color:#FFFFFF !important;
  text-shadow:0 1px 4px rgba(40,53,61,.20) !important;
}
/* Keep the byline clearly recognizable as a link. */
.works-section .work-card .work-cover h3.work-cover-title a.work-author-link{
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:3px !important;
}
/* Mobile top gallery: 5 columns -> 4 columns. */
@media (max-width:900px){
  .hero-gallery{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .hero-gallery-column:nth-child(5),
  .hero-gallery-column:nth-child(6){display:none !important;}
  .hero-gallery-column.offset-1{padding-top:0 !important;}
  .hero-gallery-column.offset-2{padding-top:16px !important;}
  .hero-gallery-column.offset-3{padding-top:7px !important;}
  .hero-gallery-column.offset-4{padding-top:22px !important;}
}
@media (max-width:560px){
  .hero-gallery{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    height:206px !important;
    gap:4px !important;
  }
  .hero-gallery-column:nth-child(5),
  .hero-gallery-column:nth-child(6){display:none !important;}
  .hero-gallery-column.offset-1{padding-top:0 !important;}
  .hero-gallery-column.offset-2{padding-top:12px !important;}
  .hero-gallery-column.offset-3{padding-top:5px !important;}
  .hero-gallery-column.offset-4{padding-top:17px !important;}
}
/* Work-page comment actions: align Profile and Like chips neatly. */
.work-comment-card .work-comment-reader-controls{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:8px !important;
}
.work-comment-card .work-comment-reader-controls .work-comment-page,
.work-comment-card .work-comment-reader-controls .compact-reader-appreciate{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:26px !important;
  height:26px !important;
  box-sizing:border-box !important;
  margin:0 !important;
  vertical-align:middle !important;
}
.work-comment-card .work-comment-reader-controls .work-comment-page{
  padding:0 10px !important;
}
.work-comment-card .work-comment-reader-controls .compact-reader-appreciate{
  padding:0 9px !important;
  gap:5px !important;
}
@media (max-width:900px){
  .work-comment-card .work-comment-reader-controls{
    flex-direction:row !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
  }
  .work-comment-card .work-comment-reader-controls .work-comment-page,
  .work-comment-card .work-comment-reader-controls .compact-reader-appreciate{
    min-height:26px !important;
    height:26px !important;
  }
}


/* v10.9 — 5人の読後会 headline: +3px, desktop and mobile */
.service-hero .hero-roundtable-promo-copy strong{
  font-size:18px!important;
}
@media(max-width:900px){
  .service-hero .hero-roundtable-promo-copy strong{font-size:16px!important;}
}

/* v11.0 | iOS/mobile scroll-to-top header recovery.
   A fixed header plus a JS-sized spacer caused intermittent offset/overlap
   when Safari restored scroll positions. Keep the header in normal document
   flow instead: it remains visible while scrolling, but Y=0 is never covered. */
@media (max-width:820px){
  html{
    scroll-padding-top:calc(var(--rr-header-space, 70px) + 12px)!important;
    overflow-y:auto!important;
  }
  body{
    padding-top:0!important;
    overflow-y:visible!important;
  }
  .site-header{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    transform:none!important;
    margin:0!important;
    z-index:2500!important;
  }
  .header-flow-spacer{
    display:none!important;
    height:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
  }
  #works,#readers,#roundtable-title,#faq,#pricing,#contact,#membership{
    scroll-margin-top:calc(var(--rr-header-space, 70px) + 12px)!important;
  }
}

/* v11.1 | Mobile gallery: four visible columns, overriding legacy five-column
   rules with the service-hero specificity used by earlier themes. */
@media (max-width:900px){
  .service-hero .hero-gallery{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .service-hero .hero-gallery-column:nth-child(-n+4){
    display:block!important;
  }
  .service-hero .hero-gallery-column:nth-child(n+5){
    display:none!important;
  }
}


/* v11.2 | Align Profile and ありがとう controls without inherited link margins.
   Old `.work-comment-reader-copy a.work-comment-page` had a 2px margin-top
   with greater specificity than the previous alignment rules. */
.work-comment-card .work-comment-reader-copy .work-comment-reader-controls{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:8px!important;
  line-height:normal!important;
}
.work-comment-card .work-comment-reader-copy .work-comment-reader-controls a.work-comment-page,
.work-comment-card .work-comment-reader-copy .work-comment-reader-controls button.compact-reader-appreciate{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:flex-start!important;
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  height:26px!important;
  min-height:26px!important;
  max-height:26px!important;
  margin:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  line-height:1!important;
  transform:none;
}
.work-comment-card .work-comment-reader-copy .work-comment-reader-controls a.work-comment-page{
  padding-left:10px!important;
  padding-right:10px!important;
}
.work-comment-card .work-comment-reader-copy .work-comment-reader-controls button.compact-reader-appreciate{
  padding-left:8px!important;
  padding-right:8px!important;
  gap:5px!important;
}
@media(max-width:900px){
  .work-comment-card .work-comment-reader-copy .work-comment-reader-controls{
    flex-direction:row!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
  }
  .work-comment-card .work-comment-reader-copy .work-comment-reader-controls a.work-comment-page,
  .work-comment-card .work-comment-reader-copy .work-comment-reader-controls button.compact-reader-appreciate{
    align-self:center!important;
  }
}
@media(max-width:420px){
  .work-comment-card .work-comment-reader-copy .work-comment-reader-controls button.compact-reader-appreciate{
    padding-left:6px!important;
    padding-right:6px!important;
    gap:4px!important;
  }
}


/* v11.3 | Home work-card byline: remove decorative arrow only.
   The author's underlined text remains a genuine profile link. */
.works-section .work-card .work-cover h3.work-cover-title a.work-author-link::after{
  content:none!important;
  display:none!important;
}


/* v11.5 | Readable categories on homepage thumbnails.
   Light artwork needs a dark label on a consistent, nearly opaque surface. */
.works-section .work-card .work-photo-link .pill{
  color:#28353D!important;
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(255,255,255,.93)!important;
  text-shadow:none!important;
}


/* v11.9 | Keep linked author names legible; make only the “by-” label light. */
.works-section .work-card .work-cover h3.work-cover-title a.work-author-link .work-by-prefix{
  font-weight:300!important;
}


/* Re:READ v12.0 | nine-work batches, four-column mobile gallery refinement,
   safer non-overlay mobile header, and an animated conversation invitation. */

/* Mobile header: no fixed/sticky overlays, no compensation spacer. The header
   stays in normal document flow, so returning to scrollY=0 can't hide hero. */
@media (max-width:900px) {
  html {
    scroll-padding-top:0!important;
    overflow-y:auto!important;
  }
  body {
    padding-top:0!important;
    overflow-y:visible!important;
  }
  body > .site-header {
    position:sticky!important;
    inset:auto!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    transform:none!important;
    z-index:1200!important;
  }
  .header-flow-spacer { display:none!important; height:0!important; }
  #works,#readers,#roundtable-title,#faq,#pricing,#contact,#membership {
    scroll-margin-top:14px!important;
  }
}

/* Gallery: no top veil, clearer faces immediately beneath the header.
   Make only the bottom fade a touch stronger, independent of image masks. */
@media (max-width:900px) {
  .service-hero .persona-cloud::before {
    content:none!important;
    display:none!important;
    height:0!important;
    background:none!important;
  }
  .service-hero .persona-cloud::after {
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:58px!important;
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.48) 55%,
      rgba(255,255,255,.96) 100%)!important;
    pointer-events:none!important;
    z-index:5!important;
  }
  .service-hero .hero-gallery-column {
    -webkit-mask-image:linear-gradient(to bottom,
      #28353D 0%,#28353D 76%,rgba(40,53,61,.92) 85%,rgba(40,53,61,.6) 93%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,
      #28353D 0%,#28353D 76%,rgba(40,53,61,.92) 85%,rgba(40,53,61,.6) 93%,transparent 100%)!important;
  }
  .service-hero .hero-gallery {
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .service-hero .hero-gallery-column:nth-child(n+5) {display:none!important;}
}
@media (max-width:560px) {
  .service-hero .persona-cloud::after {
    height:67px!important;
    bottom:0!important;
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.58) 55%,
      rgba(255,255,255,.98) 100%)!important;
  }
}

/* In the promo card the avatars and copy should breathe. */
.service-hero .hero-roundtable-promo {
  column-gap:17px!important;
}
.service-hero .hero-roundtable-promo-avatars {
  margin-right:2px!important;
}
.service-hero .hero-roundtable-promo-play {
  position:relative!important;
  isolation:isolate;
  overflow:visible!important;
  background:#006F8C!important;
  border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:0 5px 15px rgba(0,111,140,.18), 0 0 0 4px rgba(0,111,140,.12)!important;
  animation:rr-play-gentle 3.1s ease-in-out infinite!important;
}
.service-hero .hero-roundtable-promo-play::before,
.service-hero .hero-roundtable-promo-play::after {
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(0,111,140,.38);
  border-radius:50%;
  pointer-events:none;
}
.service-hero .hero-roundtable-promo-play::after {
  inset:-9px;
  border-color:rgba(0,111,140,.22);
  animation:rr-play-ring 3.1s ease-out infinite;
}
.service-hero .hero-roundtable-promo-play svg {
  position:relative;
  z-index:1;
}
.service-hero .hero-roundtable-promo-play:hover,
.service-hero .hero-roundtable-promo-play:focus-visible {
  background:#006F8C!important;
  animation-play-state:paused!important;
}
@keyframes rr-play-gentle {
  0%,72%,100% { box-shadow:0 5px 15px rgba(0,111,140,.18),0 0 0 4px rgba(0,111,140,.12); }
  42% { box-shadow:0 7px 19px rgba(0,111,140,.24),0 0 0 6px rgba(0,111,140,.17); }
}
@keyframes rr-play-ring {
  0%,35% {opacity:.32;transform:scale(.96);}
  65% {opacity:.75;transform:scale(1.08);}
  100% {opacity:.32;transform:scale(1.14);}
}
@media(max-width:560px) {
  .service-hero .hero-roundtable-promo {gap:12px!important;}
  .service-hero .hero-roundtable-promo-avatars {margin-right:0!important;}
}
@media(prefers-reduced-motion:reduce) {
  .service-hero .hero-roundtable-promo-play,
  .service-hero .hero-roundtable-promo-play::after {animation:none!important;}
}

/* v12.1 | Work cards: desktop -30px / mobile -20px. Keep note ratio & CTA anchor. */

@media(min-width:901px){
  .works-section .work-card{height:466px!important;}
}
@media(min-width:561px) and (max-width:900px){
  .works-section .work-card{height:466px!important;}
}
@media(max-width:560px){
  .works-section .work-card{height:428px!important;}
}

/* v12.1 tablet-safe work-card layout: keep note cover proportions and
   a legible CTA on mid-sized viewports, without affecting phone / PC cards. */
@media (min-width:701px) and (max-width:900px){
  .works-section .works-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .works-section .compact-fade .five-reader-link{min-width:0;max-width:100%;}
}
@media (min-width:561px) and (max-width:700px){
  .works-section .works-grid{grid-template-columns:1fr;}
  .works-section .work-card{height:620px!important;}
}

/* Re:READ v12.2 | A slightly quicker invitation pulse on both play affordances.
   Match the home promo's gentle glow + breathing ring on the work-page
   reading-roundtable play control without changing disclosure/playback behavior. */
.service-hero .hero-roundtable-promo-play,
.roundtable-reveal .roundtable-open-arrow {
  animation:rr-play-gentle 2.35s ease-in-out infinite!important;
}
.service-hero .hero-roundtable-promo-play::after,
.roundtable-reveal .roundtable-open-arrow::after {
  animation:rr-play-ring 2.35s ease-out infinite!important;
}
.roundtable-reveal .roundtable-open-arrow {
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-radius:50%;
}
.roundtable-reveal .roundtable-open-arrow::before,
.roundtable-reveal .roundtable-open-arrow::after {
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(0,111,140,.38);
  border-radius:50%;
  pointer-events:none;
}
.roundtable-reveal .roundtable-open-arrow::after {
  inset:-9px;
  border-color:rgba(0,111,140,.22);
}
.roundtable-reveal .roundtable-open-arrow svg {
  position:relative;
  z-index:1;
}
.roundtable-reveal .roundtable-open:hover .roundtable-open-arrow,
.roundtable-reveal .roundtable-open:focus-visible .roundtable-open-arrow {
  animation-play-state:paused!important;
}
@media(prefers-reduced-motion:reduce) {
  .service-hero .hero-roundtable-promo-play,
  .service-hero .hero-roundtable-promo-play::after,
  .roundtable-reveal .roundtable-open-arrow,
  .roundtable-reveal .roundtable-open-arrow::after {
    animation:none!important;
  }
}

/* v124 — Home roundtable invitation: portraits/text are informational.
   The animated play control is the only link (and the only click target). */
.service-hero .hero-roundtable-promo,
.service-hero .hero-roundtable-promo:hover {
  transform:none!important;
  cursor:default!important;
  border-color:#F5FAFC!important;
  box-shadow:0 14px 36px rgba(40,53,61,.075),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.service-hero .hero-roundtable-promo-play {
  text-decoration:none!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent;
}
.service-hero .hero-roundtable-promo-play:hover,
.service-hero .hero-roundtable-promo-play:focus-visible {
  background:#006F8C!important;
  animation-play-state:paused!important;
  transform:scale(1.06)!important;
}
.service-hero .hero-roundtable-promo-play:focus-visible {
  outline:2px solid #006F8C!important;
  outline-offset:5px!important;
}


/* Re:READ v12.5 | image-based wordmark refresh */
.brand{display:inline-flex!important;align-items:center!important;justify-content:flex-start;line-height:1;}
.brand-logo-image{display:block;width:138px;max-width:100%;height:auto;}
.footer-logo{display:inline-flex;align-items:center;line-height:1;margin-bottom:14px;}
.footer-logo-image{display:block;width:152px;max-width:100%;height:auto;}
@media (max-width:820px){
  .brand-logo-image{width:126px;}
}
@media (max-width:560px){
  .brand-logo-image{width:118px;}
  .footer-logo-image{width:138px;}
}


/* Re:READ v12.6 — "推し読者" (existing favorite data retained) */
.profile-copy .reader-oshi{
  position:relative;isolation:isolate;
  border-color:#FFF3EE;color:#5C7180;
  background:linear-gradient(140deg,#FFFFFF,#F5FAFC);
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.profile-copy .reader-oshi:hover{background:#F5FAFC;border-color:#F1C9BB;box-shadow:0 10px 24px rgba(92,113,128,.12);}
.profile-copy .reader-oshi[data-active="true"]{background:#F5FAFC;border-color:#F1C9BB;color:#5C7180;}
.profile-copy .reader-oshi .engagement-heart{display:inline-block;font-size:20px;color:#F1C9BB;transform-origin:center;}
.profile-copy .reader-oshi[data-active="true"] .engagement-heart{color:#F5B58B;}
.profile-copy .reader-oshi .engagement-count{font-variant-numeric:tabular-nums;}
.reader-oshi-hint{font-size:11.5px;letter-spacing:.01em;color:#5C7180;margin:9px 0 0;line-height:1.65;}
@keyframes rr-oshi-heart-pop{
  0%{transform:scale(.78)}55%{transform:scale(1.24)}100%{transform:scale(1)}
}
@keyframes rr-oshi-count-pop{
  0%{transform:scale(.82);opacity:.65}55%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}
}
.reader-oshi.is-oshi-animating .engagement-heart{animation:rr-oshi-heart-pop .42s cubic-bezier(.2,.8,.2,1) both;}
.reader-oshi.is-oshi-animating .engagement-count{animation:rr-oshi-count-pop .44s cubic-bezier(.2,.8,.2,1) both;}
/* The badge is informational; the complete card remains a single profile link. */
.reader-list-page .reader-directory-card .reader-oshi-total{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  width:max-content;max-width:100%;margin:13px auto 0;padding:5px 11px;
  border:1px solid #F5FAFC;border-radius:999px;background:#F5FAFC;
  color:#5C7180;font-size:10.5px;line-height:1.4;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;
}
.reader-oshi-total-heart{font-size:13px;font-weight:500;line-height:1;color:#F5B58B;}
.reader-oshi-total-number{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;}
@media(max-width:600px){
  .reader-list-page .reader-directory-card > a{grid-template-rows:auto auto auto auto!important;}
  .reader-list-page .reader-directory-card .reader-oshi-total{
    grid-column:2;grid-row:4;justify-self:start;margin:7px 0 0;padding:4px 9px;font-size:10px;
  }
  .reader-oshi-hint{font-size:10.5px;}
}
@media(prefers-reduced-motion:reduce){
  .reader-oshi.is-oshi-animating .engagement-heart,
  .reader-oshi.is-oshi-animating .engagement-count{animation:none!important;}
}


/* Re:READ v12.7 | author page oshi readers block */
.author-reader-subgroup{margin-top:34px;}
.author-subsection-head{margin-top:0!important;margin-bottom:15px!important;}
.author-reader-subgroup .author-section-head p:last-child{max-width:680px;}
@media (max-width:650px){
  .author-reader-subgroup{margin-top:26px;}
  .author-subsection-head{margin-bottom:12px!important;}
}


/* 推し読 v12.8 | full brand refresh: cyan + charcoal */
:root{
  --radius:24px;
}
body{background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%)!important;color:var(--text)!important;}
.site-header{background:rgba(255,255,255,.92)!important;border-bottom:1px solid rgba(245,250,252,.9)!important;}
.service-hero{background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%)!important;border-bottom:1px solid var(--line)!important;}
.service-lead,.service-points,.hero-lead,.hero-mini-note,.author-row,.work-summary-mini,.comment-bubble-box p,.section-head p,.reader-intro,.reader-role,.work-meta,.footer-note,.legal-lead,.faq-answer,.author-intro,.author-reader-mini small{color:var(--muted)!important;}
.hero-copy h1 span,.section-link,.footer-copy{color:var(--brand)!important;}
.service-points li::before{background:var(--brand)!important;}
.btn-small,.btn-primary{background:var(--brand)!important;border-color:var(--brand)!important;color:#FFFFFF!important;box-shadow:0 14px 28px rgba(234,248,252,.22)!important;}
.btn-small:hover,.btn-primary:hover{background:var(--brand-hover)!important;border-color:var(--brand-hover)!important;}
.btn-light{background:#FFFFFF!important;border-color:var(--line)!important;color:var(--text)!important;}
.float-card,.float-quote,.work-card,.reader-card,.author-work-card,.author-reader-mini,.summary-box,.comment-bubble.left .comment-bubble-box,.comment-more-link,.hero-reader-card,.hero-kicker,.roundtable-open,.roundtable-chat-appbar,.work-comment-card,.author-featured,.author-note-pill{border-color:var(--line)!important;}
.hero-reader-card{background:linear-gradient(180deg,#F5FAFC 0%,#FFFFFF 100%)!important;box-shadow:0 20px 40px rgba(0,111,140,.08)!important;}
.hero-kicker,.author-note-pill,.comment-more-link{background:#F5FAFC!important;color:#006F8C!important;}
.summary-box,.comment-bubble.left .comment-bubble-box,.work-comment-card.tone-warm .work-comment-copy-block,.work-comment-card.tone-green .work-comment-copy-block{background:#F5FAFC!important;}
.comment-bubble.right .comment-bubble-box,.roundtable-message.tone-green .roundtable-speech{background:var(--brand-soft)!important;border-color:var(--brand-line)!important;}
.pill{background:rgba(255,255,255,.78)!important;border-color:rgba(245,250,252,.92)!important;color:#006F8C!important;}
.note-link{background:var(--brand-deep)!important;border-color:var(--brand-deep)!important;}
.note-link:hover{background:#28353D!important;}
.site-footer-v2{background:var(--brand-deep)!important;}
.footer-v2-label{color:#EAF8FC!important;}
.footer-v2-brand p,.footer-v2-bottom,.site-footer-v2 .footer-v2-menu a{color:#F5FAFC!important;}
.site-footer-v2 .footer-v2-menu a:hover{color:#FFFFFF!important;}
.membership-cta-section{background:linear-gradient(135deg,#28353D,#28353D)!important;}
.about-persona-section{background:#F5FAFC!important;}
.about-public-section{background:#F5FAFC!important;}
.brand-logo-image{display:block;width:182px;max-width:100%;height:auto;}
.footer-logo-image{display:block;width:192px;max-width:100%;height:auto;}
.reader-appreciate,.reader-favorite{border-color:#D8E7EF!important;background:rgba(255,255,255,.9)!important;color:#006F8C!important;}
.reader-appreciate:hover,.reader-favorite:hover{background:#F5FAFC!important;transform:translateY(-1px);border-color:#EAF8FC!important;}
.reader-appreciate:focus-visible,.reader-favorite:focus-visible{outline:2px solid #EAF8FC!important;outline-offset:3px;}
.reader-appreciate[data-active="true"],.reader-favorite[data-active="true"]{background:#F5FAFC!important;border-color:#EAF8FC!important;color:#006F8C!important;}
.reader-appreciate[data-active="true"] .engagement-heart,.reader-favorite[data-active="true"] .engagement-heart{color:#01A2CE!important;}
.engagement-count{color:#01A2CE!important;}
.profile-copy .reader-favorite{background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%)!important;border-color:#EAF8FC!important;color:#006F8C!important;box-shadow:0 8px 24px rgba(1,162,206,.10)!important;}
.profile-copy .reader-favorite .engagement-count{border-color:#EAF8FC!important;background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 3px 10px rgba(1,162,206,.12)!important;color:#01A2CE!important;}
.profile-copy .reader-favorite[data-active="true"]{background:#F5FAFC!important;border-color:#EAF8FC!important;color:#006F8C!important;}
.profile-copy .reader-favorite[data-active="true"] .engagement-count{border-color:#EAF8FC!important;background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 3px 10px rgba(1,162,206,.14)!important;color:#006F8C!important;}
.profile-copy .reader-oshi{border-color:#EAF8FC!important;color:#006F8C!important;background:linear-gradient(140deg,#FFFFFF,#F5FAFC)!important;box-shadow:0 8px 22px rgba(234,248,252,.08)!important;}
.profile-copy .reader-oshi:hover{background:#F5FAFC!important;border-color:#EAF8FC!important;box-shadow:0 10px 24px rgba(234,248,252,.14)!important;}
.profile-copy .reader-oshi[data-active="true"]{background:#F5FAFC!important;border-color:#EAF8FC!important;color:#006F8C!important;}
.profile-copy .reader-oshi .engagement-heart,.profile-copy .reader-oshi[data-active="true"] .engagement-heart{color:#01A2CE!important;}
.reader-oshi-hint{color:#006F8C!important;}
.reader-list-page .reader-directory-card .reader-oshi-total{border-color:#D8E7EF!important;background:#F5FAFC!important;color:#006F8C!important;}
.reader-oshi-total-heart{color:#01A2CE!important;}
.reader-list-hero .reader-list-hero-art{color:#C9E9F2!important;}
.reader-list-hero .reader-list-hero-art > b{color:#01A2CE!important;}
@media (max-width:820px){.brand-logo-image{width:164px;}.footer-logo-image{width:176px;}}
@media (max-width:560px){.brand-logo-image{width:150px;}.footer-logo-image{width:164px;}}


/* 推し読 v12.9 | tagline typography, full color cleanup, playback button refresh */
.catch-copy > span{display:inline-block;}
.tagline-no{display:inline-block;font-size:.82em;line-height:1;vertical-align:baseline;transform:translateY(-.04em);margin-inline:.02em;}
.footer-tagline{display:flex;flex-direction:column;gap:2px;}
.footer-tagline > span{display:block;}
@media(max-width:560px){.tagline-no{font-size:.84em;}}

/* global micro cleanup */
.header-nav{color:var(--text)!important;}
.work-card,.reader-card,.author-work-card,.author-featured,.stack-card,.other-reader-card,.work-comment-card,.roundtable-section,.roundtable-open,.hero-roundtable-promo{box-shadow:0 14px 34px rgba(0,111,140,.07)!important;}
.work-card,.reader-card,.author-work-card,.author-featured,.stack-card,.other-reader-card,.work-comment-card,.roundtable-section,.roundtable-open,.summary-box,.comment-more-link{border-color:var(--line)!important;}
.work-card,.reader-card,.author-work-card,.author-featured,.stack-card,.other-reader-card,.work-comment-card,.roundtable-open,.hero-roundtable-promo,.summary-box,.comment-bubble.left .comment-bubble-box{background:#FFFFFF!important;}

/* fix mixed warm/cool comment areas */
.work-comment-card{background:linear-gradient(135deg,#FFFFFF 0%,#F5FAFC 100%)!important;border-color:#F5FAFC!important;box-shadow:0 18px 38px rgba(0,111,140,.08)!important;}
.work-comment-card.tone-green{background:linear-gradient(135deg,#FFFFFF 0%,#F5FAFC 100%)!important;border-color:#F5FAFC!important;}
.work-comment-card::before{background:rgba(234,248,252,.10)!important;}
.work-comment-card.tone-green::before{background:rgba(40,53,61,.06)!important;}
.work-comment-copy-block{background:#F5FAFC!important;border:1px solid #F5FAFC!important;color:#28353D!important;box-shadow:none!important;}
.work-comment-copy-block p,.work-comment-copy-block li{color:#006F8C!important;}
.work-comment-reader-copy h3{color:#28353D!important;}
.work-comment-reader-copy p,.work-comment-reader-copy span,.work-comment-reader-copy small{color:#006F8C!important;}

/* other/related readers */
.other-reader-card,.other-reader-card:nth-child(even){background:#FFFFFF!important;border-color:#F5FAFC!important;color:#28353D!important;}
.other-reader-card:hover{border-color:#EAF8FC!important;box-shadow:0 16px 32px rgba(234,248,252,.10)!important;}
.other-reader-copy span{color:#006F8C!important;}
.other-reader-copy em,.other-reader-arrow{color:#01A2CE!important;}

/* comment stream cards */
.summary-box{background:#F5FAFC!important;}
.summary-box span{color:#006F8C!important;}
.comment-fade{background:linear-gradient(180deg, rgba(245,250,252,0) 0%, rgba(245,250,252,.75) 35%, rgba(245,250,252,.96) 70%, rgba(245,250,252,1) 100%)!important;}
.comment-more-link{background:rgba(255,255,255,.95)!important;color:#01A2CE!important;border-color:#D8E7EF!important;}
.comment-more-link:hover{background:#F5FAFC!important;}

/* top roundtable promo */
.hero-roundtable-promo{background:linear-gradient(135deg,#FFFFFF 0%,#F5FAFC 100%)!important;border:1px solid #F5FAFC!important;border-radius:24px!important;box-shadow:0 16px 34px rgba(234,248,252,.08)!important;}
.hero-roundtable-promo::before{background:linear-gradient(135deg,rgba(234,248,252,.10),rgba(234,248,252,0))!important;}
.hero-roundtable-promo-avatars img{border-color:#FFFFFF!important;box-shadow:0 3px 10px rgba(0,111,140,.12)!important;}
.hero-roundtable-promo-copy strong{color:#28353D!important;}
.hero-roundtable-promo-copy small{color:#006F8C!important;}
.hero-roundtable-promo-play{width:40px!important;height:40px!important;flex-basis:40px!important;border:1px solid #EAF8FC!important;border-radius:999px!important;background:linear-gradient(180deg,#EAF8FC 0%,#C9E9F2 100%)!important;color:#FFFFFF!important;box-shadow:0 10px 22px rgba(234,248,252,.28)!important;transition:transform .2s ease, box-shadow .2s ease, background .2s ease!important;}
.hero-roundtable-promo-play svg{width:14px!important;height:14px!important;transform:translateX(1px);} 
.hero-roundtable-promo-play:hover,.hero-roundtable-promo-play:focus-visible{background:linear-gradient(180deg,#EAF8FC 0%,#C9E9F2 100%)!important;box-shadow:0 13px 26px rgba(234,248,252,.34)!important;transform:translateY(-1px) scale(1.03)!important;}

/* card CTA to the five-reader conversation */
.five-reader-link,.compact-fade .five-reader-link{background:linear-gradient(135deg,#FFFFFF 0%,#F5FAFC 100%)!important;border:1px solid #F5FAFC!important;color:#006F8C!important;box-shadow:0 10px 22px rgba(234,248,252,.08)!important;}
.five-reader-link:hover,.five-reader-link:focus,.compact-fade .five-reader-link:hover,.compact-fade .five-reader-link:focus{background:#F5FAFC!important;border-color:#EAF8FC!important;color:#006F8C!important;}
.five-reader-faces img{border-color:#FFFFFF!important;box-shadow:0 2px 8px rgba(234,248,252,.10)!important;}

/* work page roundtable open button + replay controls */
.roundtable-section{background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%)!important;border:1px solid #F5FAFC!important;}
.roundtable-open{padding:18px 22px!important;border:1px solid #F5FAFC!important;border-radius:22px!important;background:linear-gradient(135deg,#FFFFFF 0%,#F5FAFC 100%)!important;color:#006F8C!important;box-shadow:0 12px 26px rgba(234,248,252,.06)!important;}
.roundtable-open:hover{background:#F5FAFC!important;}
.roundtable-open-icon{width:40px!important;height:40px!important;border-radius:999px!important;background:linear-gradient(180deg,#EAF8FC 0%,#C9E9F2 100%)!important;color:#FFFFFF!important;box-shadow:0 10px 20px rgba(234,248,252,.26)!important;}
.roundtable-open-icon svg{width:18px!important;height:18px!important;}
.roundtable-open-icon svg path{stroke:#FFFFFF!important;stroke-width:2.1!important;stroke-linecap:round!important;stroke-linejoin:round!important;fill:none!important;}
.roundtable-open-text strong{color:#28353D!important;font-size:14px!important;}
.roundtable-open-text small{color:#006F8C!important;font-size:11px!important;}
.roundtable-open-arrow,.roundtable-reveal .roundtable-open-arrow{width:40px!important;height:40px!important;display:grid!important;place-items:center!important;}
.roundtable-open-arrow svg{width:40px!important;height:40px!important;filter:drop-shadow(0 8px 16px rgba(234,248,252,.20))!important;}
.roundtable-open-arrow svg circle{fill:#EAF8FC!important;stroke:#EAF8FC!important;stroke-width:1.3!important;}
.roundtable-open-arrow svg path{fill:#FFFFFF!important;}
.roundtable-reveal[open] .roundtable-open-arrow svg{transform:scale(.96)!important;}
.roundtable-playback{padding-top:18px!important;}
.roundtable-chat-appbar{background:#F5FAFC!important;border:1px solid #F5FAFC!important;}
.roundtable-chat-appbar-copy strong{color:#28353D!important;}
.roundtable-chat-appbar-copy span{color:#006F8C!important;}
.roundtable-chat-live{background:#F5FAFC!important;color:#01A2CE!important;border-color:#EAF8FC!important;}
.roundtable-playback-status,.roundtable-progress{color:#006F8C!important;}
.roundtable-show-all,.roundtable-pause,.roundtable-speed,.roundtable-replay{border:1px solid #D8E7EF!important;background:#FFFFFF!important;color:#006F8C!important;box-shadow:none!important;}
.roundtable-show-all:hover,.roundtable-pause:hover,.roundtable-speed:hover,.roundtable-replay:hover{background:#F5FAFC!important;border-color:#EAF8FC!important;}
.roundtable-reveal .roundtable-conversation{scrollbar-color:#EAF8FC transparent!important;}
.roundtable-message{gap:15px!important;}
.roundtable-speaker{color:#006F8C!important;}
.roundtable-speaker img{border-color:#F5FAFC!important;box-shadow:0 5px 14px rgba(0,111,140,.10)!important;}
.roundtable-speech{background:#FFFFFF!important;border:1px solid #F5FAFC!important;color:#006F8C!important;border-radius:10px 22px 22px 22px!important;}
.roundtable-message.tone-green .roundtable-speech{background:#F5FAFC!important;border-color:#D8E7EF!important;}
.roundtable-conversation::before,.roundtable-message.is-reply::before{background:#F5FAFC!important;}
.roundtable-typing i{background:#EAF8FC!important;}

/* profile traits and small legacy green remnants */
.profile-trait{background:linear-gradient(180deg,#F5FAFC 0%,#F5FAFC 100%)!important;border-color:#F5FAFC!important;color:#01A2CE!important;box-shadow:0 8px 18px rgba(234,248,252,.06)!important;}
.stack-card,.other-reader-card{border-color:#F5FAFC!important;background:#FFFFFF!important;}
.stack-card::before,.work-comment-card::before{filter:none!important;}
.work-meta,.other-reader-copy strong + span,.author-row{color:#006F8C!important;}


/* ===== OSHIDOKU v130 — semantic component color rules ===== */
/* Surface, typography and boundaries */
body { color:var(--ink)!important; background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFC 100%)!important; }
.site-header { background:rgba(255,255,255,.96)!important; border-bottom:1px solid var(--border)!important; }
.site-footer-v2 { background:var(--ink)!important; }
.header-nav a, .header-nav { color:var(--ink)!important; }
.header-nav a:hover, .section-link { color:var(--brand-deep)!important; }
.service-hero { background:linear-gradient(180deg,#FFFFFF 0%,#EAF8FC 100%)!important; border-color:var(--border)!important; }
/* Cool-only reading surfaces: avoid rectangles of inconsistent pastel behind comments. */
.work-comment-card, .work-comment-card.tone-green {
 background:linear-gradient(135deg,#FFFFFF,#F5FAFC)!important;
 border:1px solid var(--border)!important;
 box-shadow:0 15px 35px rgba(0,111,140,.07)!important;
}
.work-comment-card.tone-green { background:linear-gradient(135deg,#FFFFFF,#EAF8FC)!important; }
.work-comment-card::before { background:rgba(1,162,206,.08)!important; }
.work-comment-card.tone-green::before { background:rgba(0,111,140,.07)!important; }
.work-comment-card .work-comment-copy-block,
.work-comment-card.tone-green .work-comment-copy-block,
.work-comment-card.tone-warm .work-comment-copy-block {
 background:transparent!important; border:0!important; outline:none!important;
 box-shadow:none!important; padding:0!important;
}
.work-comment-card .work-comment-text {
 color:var(--ink)!important; background:transparent!important;
 box-shadow:none!important; -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.work-comment-card .work-comment-reader-copy h3 { color:var(--ink)!important; }
.work-comment-card .work-comment-reader-copy p { color:var(--muted)!important; }
.summary-box, .comment-bubble.left .comment-bubble-box { background:var(--canvas)!important; border-color:var(--border)!important; }
.comment-bubble.right .comment-bubble-box { background:var(--brand-soft)!important; border-color:var(--brand-line)!important; }
.work-card, .reader-card, .author-work-card, .author-reader-mini, .other-reader-card, .stack-card { background:#FFFFFF!important; border-color:var(--border)!important; }
.work-card:hover, .reader-card:hover, .author-reader-mini:hover, .other-reader-card:hover { box-shadow:0 17px 34px rgba(0,111,140,.10)!important; }
/* Clear blue is a brand icon color, not a white-label button fill. */
.btn-primary, .btn-small, .header-cta-desktop, .header-cta-mobile {
 background:var(--brand-deep)!important; border-color:var(--brand-deep)!important;
 color:#FFFFFF!important; box-shadow:0 10px 24px rgba(0,111,140,.15)!important;
}
.btn-primary:hover, .btn-small:hover, .header-cta-desktop:hover, .header-cta-mobile:hover {
 background:var(--brand-hover)!important;border-color:var(--brand-hover)!important;
}
.btn-light { color:var(--ink)!important; border-color:var(--border)!important; background:#FFFFFF!important; }
/* Coral is exclusively for emotional responses: 推し and いいね. */
.reader-appreciate, .reader-favorite, .profile-copy .reader-oshi, .profile-copy .reader-favorite {
 background:#FFF3EE!important; border:1px solid #F1C9BB!important;
 color:#A9452D!important; box-shadow:0 6px 16px rgba(179,78,54,.07)!important;
}
.reader-appreciate:hover, .reader-favorite:hover, .profile-copy .reader-oshi:hover {
 background:#FFF3EE!important; border-color:#E87959!important;
 box-shadow:0 8px 20px rgba(179,78,54,.12)!important;
}
.reader-appreciate[data-active="true"], .reader-favorite[data-active="true"],
.profile-copy .reader-favorite[data-active="true"], .profile-copy .reader-oshi[data-active="true"] {
 background:#B34E36!important; border-color:#B34E36!important; color:#FFFFFF!important;
}
.reader-appreciate .engagement-heart, .reader-favorite .engagement-heart,
.profile-copy .reader-oshi .engagement-heart, .reader-oshi-total-heart,
.reader-appreciate .engagement-count, .reader-favorite .engagement-count {
 color:#B34E36!important;
}
.reader-appreciate[data-active="true"] .engagement-heart, .reader-favorite[data-active="true"] .engagement-heart,
.profile-copy .reader-oshi[data-active="true"] .engagement-heart,
.reader-appreciate[data-active="true"] .engagement-count, .reader-favorite[data-active="true"] .engagement-count {
 color:#FFFFFF!important;
}
.profile-copy .reader-favorite .engagement-count,
.profile-copy .reader-oshi .engagement-count {
 background:#FFFFFF!important; border:1px solid #F1C9BB!important;
 color:#A9452D!important; box-shadow:none!important;
}
.profile-copy .reader-favorite[data-active="true"] .engagement-count,
.profile-copy .reader-oshi[data-active="true"] .engagement-count {
 color:#A9452D!important; background:#FFFFFF!important; border-color:#FFF3EE!important;
}
.reader-list-page .reader-directory-card .reader-oshi-total {
 background:#FFF3EE!important; border:1px solid #F1C9BB!important;
 color:#A9452D!important;
}
.reader-list-page .reader-directory-card .reader-oshi-total-heart,
.reader-list-page .reader-directory-card .reader-oshi-total-number {color:#A9452D!important;}
/* Playback always uses the cool blue action language. Preserve existing pulse periods. */
.service-hero .hero-roundtable-promo,
.hero-roundtable-promo { background:linear-gradient(135deg,#FFFFFF,#EAF8FC)!important; border-color:#C9E9F2!important; }
.service-hero .hero-roundtable-promo-play, .hero-roundtable-promo-play {
 background:var(--brand-deep)!important; border:1px solid var(--brand-line)!important;
 color:#FFFFFF!important; box-shadow:0 8px 22px rgba(0,111,140,.23)!important;
}
.service-hero .hero-roundtable-promo-play:hover,.hero-roundtable-promo-play:hover {
 background:var(--brand-hover)!important;
}
.roundtable-section, .roundtable-open { border-color:var(--border)!important; background:linear-gradient(135deg,#FFFFFF,#EAF8FC)!important; }
.roundtable-open-icon,.roundtable-open-arrow svg circle { background:var(--brand-deep)!important; fill:var(--brand-deep)!important; }
.roundtable-open-arrow svg circle { stroke:var(--brand-line)!important; }
.roundtable-open-arrow svg path { fill:#FFFFFF!important; }
.roundtable-open-text strong {color:var(--ink)!important;}
.roundtable-open-text small {color:var(--muted)!important;}
.roundtable-speech {background:#FFFFFF!important;border-color:var(--border)!important;color:var(--ink)!important;}
.roundtable-message.tone-green .roundtable-speech {background:var(--brand-soft)!important;border-color:var(--brand-line)!important;}
.roundtable-chat-appbar {background:var(--canvas)!important;border-color:var(--border)!important;}
.roundtable-chat-appbar-copy strong {color:var(--ink)!important;}
.roundtable-chat-appbar-copy span {color:var(--muted)!important;}
.roundtable-pause,.roundtable-speed,.roundtable-replay,.roundtable-show-all {
 background:#FFFFFF!important;border-color:var(--border)!important;color:var(--brand-deep)!important;
}
/* Banner and card accents no longer inherit legacy green or beige. */
.hero-reader-card,.hero-kicker,.profile-trait,.about-persona-section,.about-public-section {
 background:var(--brand-soft)!important;border-color:var(--brand-line)!important;
}
.author-reader-mini small, .hero-roundtable-promo-copy small, .work-meta {color:var(--muted)!important;}
.footer-tagline {color:#FFFFFF!important;}
/* Accessibility */
:where(a,button,summary,input,select,textarea):focus-visible {outline:2px solid var(--brand-deep);outline-offset:3px;}
@media(prefers-reduced-motion:reduce) {
 .hero-roundtable-promo-play::before,.hero-roundtable-promo-play::after,
 .roundtable-open-arrow::before,.roundtable-open-arrow::after {animation:none!important;}
}

/* v130 legibility pass: navigation CTA must stay white on the deep-blue fill. */
.header-nav a.btn,
.header-nav a.btn-small,
.header-nav a.header-cta-desktop,
.header-mobile-actions a.btn,
.header-mobile-actions a.btn-small,
.header-mobile-actions a.header-cta-mobile { color:#FFFFFF!important; }
.header-nav a.btn:hover,
.header-nav a.header-cta-desktop:hover,
.header-mobile-actions a.header-cta-mobile:hover { color:#FFFFFF!important; }
/* Keep animated photo strips inside their intended visual window. */
.service-hero { overflow-x:clip; }

/* Interactive labels: every white-on-blue small-text state uses a WCAG AA-safe dark blue. */
.reader-sort-tab.is-active,.reader-search button{background:#006F8C!important;color:#FFFFFF!important;border-color:#006F8C!important;}
.reader-sort-tab.is-active:hover,.reader-search button:hover{background:#005F78!important;border-color:#005F78!important;}
.membership-cta-section{background:linear-gradient(130deg,#006F8C 0%,#28353D 100%)!important;color:#FFFFFF!important;}


/* 推し読 v131 | hero emphasis, smaller logo, gallery behind header, refined nav */
.brand-logo-image{width:136px!important;max-width:100%;height:auto!important;}
.footer-logo-image{width:168px!important;max-width:100%;height:auto!important;}
@media (max-width:820px){.brand-logo-image{width:124px!important;}.footer-logo-image{width:156px!important;}}
@media (max-width:560px){.brand-logo-image{width:116px!important;}.footer-logo-image{width:148px!important;}}

.catch-copy{letter-spacing:-.02em!important;}
.catch-copy > span{display:inline-block!important;}
.tagline-key{display:inline-block;}
.tagline-key-cool{color:var(--brand)!important;}
.tagline-key-warm{color:var(--warm)!important;}
.service-copy .catch-copy .tagline-key-cool,.about-persona-section .catch-copy .tagline-key-cool{filter:drop-shadow(0 8px 18px rgba(1,162,206,.10));}
.service-copy .catch-copy .tagline-key-warm,.about-persona-section .catch-copy .tagline-key-warm{filter:drop-shadow(0 8px 18px rgba(232,121,89,.10));}
.footer-tagline .tagline-key-cool{color:#78D7EE!important;}
.footer-tagline .tagline-key-warm{color:#F2AE96!important;}

/* refined desktop/mobile nav */
.header-inner{padding:14px 0!important;}
.header-nav{gap:8px!important;font-size:14px!important;}
.header-nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px 12px!important;border-radius:999px;font-weight:700;letter-spacing:.01em;color:var(--ink)!important;transition:background .18s ease,color .18s ease,transform .18s ease;}
.header-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:999px;background:transparent;transition:background .18s ease,transform .18s ease;transform:scaleX(.4);transform-origin:center;}
.header-nav a:hover{background:#F1FAFD!important;color:#1D556A!important;transform:translateY(-1px);}
.header-nav a:hover::after{background:rgba(1,162,206,.42);transform:scaleX(1);}
.header-nav .nav-brand-link{padding-inline:14px!important;background:linear-gradient(180deg,#FFFFFF 0%,#F6FBFD 100%)!important;border:1px solid rgba(201,233,242,.9);box-shadow:0 8px 18px rgba(1,162,206,.06);}
.header-nav .nav-brand-link::after{left:16px;right:16px;}
.nav-brand-accent{color:var(--brand)!important;}
.header-nav .header-cta-desktop{padding:12px 18px!important;}
.header-nav .header-cta-desktop::after{display:none!important;}
@media (max-width:960px){.header-nav{gap:4px!important;}.header-nav a{padding:9px 10px!important;font-size:13px!important;}}
@media (max-width:820px){
  .header-nav{padding:12px 16px 18px!important;background:rgba(255,255,255,.98)!important;backdrop-filter:blur(12px);}
  .header-nav a{justify-content:flex-start;padding:13px 10px!important;border-radius:14px;}
  .header-nav a::after{left:10px;right:auto;bottom:7px;width:28px;transform:none;}
  .header-nav .nav-brand-link{border-radius:14px;background:linear-gradient(180deg,#FFFFFF 0%,#F3FBFE 100%)!important;}
}

/* hero gallery should emerge from behind header */
.site-header{background:rgba(255,255,255,.86)!important;backdrop-filter:blur(14px)!important;}
.service-hero{padding-top:0!important;overflow:hidden!important;}
.service-hero-inner{align-items:start!important;}
.service-copy{padding-top:56px!important;}
.persona-cloud{padding-top:0!important;margin-top:-52px!important;min-height:640px!important;}
.service-hero .persona-cloud::before{display:none!important;background:none!important;height:0!important;}
.service-hero .persona-cloud::after{height:22px!important;background:linear-gradient(180deg,rgba(245,250,252,0) 0%, rgba(245,250,252,.48) 60%, #F5FAFC 100%)!important;}
@media (max-width:980px){.service-copy{padding-top:42px!important;}.persona-cloud{margin-top:-36px!important;min-height:560px!important;}}
@media (max-width:820px){.service-hero{padding-top:0!important;}.service-hero-inner{gap:24px!important;}.service-copy{padding-top:30px!important;}.persona-cloud{margin-top:-20px!important;min-height:400px!important;}.mobile-hero-overlay{background:none!important;padding-top:18px!important;padding-bottom:6px!important;}}
@media (max-width:560px){.service-copy{padding-top:22px!important;}.persona-cloud{margin-top:-14px!important;min-height:356px!important;}}

/* slight polish around gallery stage */
.hero-gallery-item{border:1px solid rgba(201,233,242,.70)!important;box-shadow:0 16px 28px rgba(0,111,140,.06)!important;}
.hero-gallery-meta{background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.96) 100%)!important;}



/* 推し読 v132 | oshi hint placement and stronger five-reader CTA */
.profile-copy .hero-actions{align-items:flex-start!important;gap:14px 16px!important;}
.reader-oshi-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:min(320px,100%);max-width:360px;}
.reader-oshi-wrap .reader-oshi{width:100%;justify-content:flex-start!important;min-height:56px!important;padding:12px 18px!important;}
.reader-oshi-wrap .reader-oshi .engagement-count{margin-left:auto!important;}
.reader-oshi-hint{margin:0 4px;color:var(--warm-text)!important;font-size:12px!important;line-height:1.72!important;letter-spacing:.01em;max-width:30ch;}
@media (max-width:820px){
  .reader-oshi-wrap{min-width:0;width:100%;max-width:none;}
  .profile-copy .hero-actions{gap:12px!important;}
  .reader-oshi-hint{font-size:11.5px!important;max-width:none;}
}

/* five-reader CTA on work cards: same bold capsule language as primary CTA, with white knocked-out text */
.works-section .compact-fade .five-reader-link{
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
  min-width:min(292px,100%)!important;max-width:100%!important;min-height:74px!important;
  padding:12px 22px 12px 14px!important;gap:14px!important;
  border-radius:999px!important;border:0!important;
  background:linear-gradient(180deg,var(--brand-deep) 0%, var(--brand-hover) 100%)!important;
  color:#FFFFFF!important;box-shadow:0 16px 30px rgba(0,95,120,.22)!important;
}
.works-section .compact-fade .five-reader-link:hover,
.works-section .compact-fade .five-reader-link:focus{
  background:linear-gradient(180deg,#0A7E9C 0%, #00566D 100%)!important;
  color:#FFFFFF!important;box-shadow:0 18px 34px rgba(0,95,120,.28)!important;
}
.works-section .compact-fade .five-reader-link > span:last-child{font-size:15px!important;font-weight:800!important;letter-spacing:.02em!important;line-height:1.2!important;white-space:nowrap;}
.works-section .compact-fade .five-reader-faces{display:inline-flex;align-items:center;flex:0 0 auto;padding-left:1px;}
.works-section .compact-fade .five-reader-faces img{width:42px!important;height:42px!important;margin-left:-10px!important;border:3px solid #FFFFFF!important;box-shadow:0 6px 14px rgba(0,44,58,.18)!important;}
.works-section .compact-fade .five-reader-faces img:first-child{margin-left:0!important;}
@media (max-width:820px){
  .works-section .compact-fade .five-reader-link{min-width:0!important;width:auto!important;min-height:66px!important;padding:11px 18px 11px 12px!important;gap:12px!important;}
  .works-section .compact-fade .five-reader-link > span:last-child{font-size:14px!important;}
  .works-section .compact-fade .five-reader-faces img{width:36px!important;height:36px!important;margin-left:-9px!important;}
}
@media (max-width:560px){
  .works-section .compact-fade .five-reader-link{min-height:60px!important;padding:10px 16px 10px 11px!important;gap:10px!important;}
  .works-section .compact-fade .five-reader-link > span:last-child{font-size:13px!important;}
  .works-section .compact-fade .five-reader-faces img{width:32px!important;height:32px!important;margin-left:-8px!important;}
}


/* 推し読 v133 | enlarge footer tagline under logo */
.footer-v2-brand .footer-tagline{margin-top:10px!important;gap:6px!important;font-size:19px!important;line-height:1.42!important;font-weight:800!important;letter-spacing:-.01em!important;}
.footer-v2-brand .footer-tagline > span{display:block!important;}
.footer-v2-brand .footer-tagline .tagline-no{font-size:.8em!important;}
@media (max-width:820px){.footer-v2-brand .footer-tagline{font-size:17px!important;gap:5px!important;line-height:1.4!important;}}
@media (max-width:560px){.footer-v2-brand .footer-tagline{font-size:15px!important;gap:4px!important;line-height:1.36!important;}}


/* 推し読 v134 | clear gallery foot / compact mobile fade / persistent mobile header */
/* PC: the gallery's bottom images meet the section boundary without a white veil or gutter. */
@media (min-width:901px) {
  .service-hero { padding-bottom:0!important; }
  .service-hero .persona-cloud {
    margin-bottom:0!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .service-hero .persona-cloud::after {
    content:none!important;display:none!important;
    height:0!important;background:none!important;
  }
  .service-hero .hero-gallery,
  .service-hero .hero-gallery-column {
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .service-hero .hero-gallery {
    height:640px!important;
    margin-bottom:0!important;
  }
  .service-hero .persona-cloud{min-height:640px!important;height:640px!important;}
}
/* Mobile: restore true sticky behavior. No extra spacer or scroll-position offset. */
@media (max-width:900px) {
  html {scroll-padding-top:calc(var(--rr-header-space, 70px) + 12px)!important;}
  body {padding-top:0!important;overflow-y:visible!important;}
  body > .site-header {
    position:-webkit-sticky!important;
    position:sticky!important;
    top:0!important;
    left:auto!important;right:auto!important;
    width:100%!important;
    z-index:2500!important;
    margin:0!important;
    transform:none!important;
  }
  .header-flow-spacer {display:none!important;height:0!important;}
  #works,#readers,#roundtable-title,#faq,#pricing,#contact,#membership {
    scroll-margin-top:calc(var(--rr-header-space, 70px) + 12px)!important;
  }
  /* Remove the older full-height image mask; one short veil controls the fade. */
  .service-hero .persona-cloud {
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  /* Keep the mobile gallery's soft ending, but make the veil shallower. */
  .service-hero .persona-cloud::after {
    content:""!important;display:block!important;
    top:auto!important;bottom:0!important;
    height:50px!important;
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 47%,
      rgba(255,255,255,1) 100%)!important;
    pointer-events:none!important;
    z-index:5!important;
  }
  .service-hero .hero-gallery-column {
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}
@media (max-width:560px) {
  .service-hero .persona-cloud::after {
    bottom:0!important;
    height:42px!important;
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.62) 44%,
      rgba(255,255,255,.98) 86%,
      #FFFFFF 100%)!important;
  }
}


/* 推し読 v135 | smaller header logo, no photo borders, warmer content & coral profiles */
:root{
  --warm:#E87959;
  --warm-deep:#B34E36;
  --warm-soft:#FFF3EE;
  --warm-line:#F1C9BB;
  --warm-text:#A45A47;
}
/* smaller logo */
.brand-logo-image{width:104px!important;max-width:100%;height:auto!important;}
.footer-logo-image{width:156px!important;max-width:100%;height:auto!important;}
@media (max-width:820px){.brand-logo-image{width:96px!important;}.footer-logo-image{width:146px!important;}}
@media (max-width:560px){.brand-logo-image{width:92px!important;}.footer-logo-image{width:138px!important;}}

/* remove borders around the hero photo gallery area */
.service-hero .hero-gallery-item,
.service-hero .hero-gallery-column:nth-child(odd) .hero-gallery-item,
.service-hero .hero-gallery-column:nth-child(even) .hero-gallery-item{border:none!important;box-shadow:none!important;background:transparent!important;outline:none!important;}
.service-hero .hero-gallery-item img,
.service-hero .hero-gallery-item:hover img{border:none!important;box-shadow:none!important;}
.service-hero .hero-gallery-item::after{display:none!important;}
.hero-gallery-meta{background:linear-gradient(180deg,rgba(255,255,255,.00) 0%,rgba(28,38,46,.16) 40%,rgba(28,38,46,.44) 100%)!important;}

/* warmer surfaces for works / comments / feelings */
.work-card,.author-work-card,.stack-card,.work-comment-card,.summary-box,.comment-bubble.left .comment-bubble-box,.comment-bubble.right .comment-bubble-box,.comment-more-link,.author-featured,.author-note-pill{border-color:var(--warm-line)!important;}
.author-work-card,.stack-card,.author-featured{background:linear-gradient(180deg,#FFFFFF 0%, #FFF9F6 100%)!important;}
.summary-box{background:linear-gradient(180deg,#FFF8F4 0%, #FFF3EE 100%)!important;border-color:var(--warm-line)!important;box-shadow:0 10px 26px rgba(179,78,54,.06)!important;}
.summary-box span{color:var(--warm-text)!important;}
.work-summary-compact,.work-hero-copy .summary-box .work-summary-long,.work-summary{color:#6A5048!important;}
.comment-bubble.left .comment-bubble-box{background:linear-gradient(180deg,#FFF8F4 0%, #FFF3EE 100%)!important;border-color:var(--warm-line)!important;}
.comment-bubble.right .comment-bubble-box{background:linear-gradient(180deg,#FFF6F1 0%, #FEEDE6 100%)!important;border-color:var(--warm-line)!important;}
.comment-bubble-box p,.preview-detail-bubble .comment-bubble-box p{color:#80574B!important;}
.comment-reader-name,.work-comment-copy-block p,.work-comment-copy-block li{color:#6C5148!important;}
.comment-more-link{background:#FFF7F2!important;color:var(--warm-deep)!important;border-color:var(--warm-line)!important;}
.comment-more-link:hover{background:#FFF0E8!important;}
.stack-card::before,.work-comment-card::before{background:rgba(232,121,89,.09)!important;filter:none!important;}
.stack-card:nth-child(even)::before,.work-comment-card.tone-green::before{background:rgba(245,181,139,.12)!important;}
.stack-card h3,.author-featured h3,.work-comment-reader-copy h3,.work-cover-title>a:first-child,.works-section .work-card .work-body h3.work-title-line a.work-author-link{color:#5A3E36!important;}
.works-section .work-card .work-summary-mini,.author-row,.work-meta,.other-reader-copy span{color:#7D635A!important;}

/* Profile buttons and profile page in coral */
.profile-role{color:var(--warm-text)!important;}
.profile-intro{color:#86584A!important;}
.profile-trait{background:linear-gradient(180deg,#FFF8F4 0%, #FFF1EA 100%)!important;border-color:var(--warm-line)!important;color:var(--warm-deep)!important;box-shadow:0 8px 18px rgba(179,78,54,.05)!important;}
.profile-trait:nth-child(3n+2),.profile-trait:nth-child(3n){background:linear-gradient(180deg,#FFF7F2 0%, #FFF0E8 100%)!important;border-color:var(--warm-line)!important;color:var(--warm-deep)!important;}
.profile-copy .btn.btn-primary{background:linear-gradient(180deg,var(--warm-deep) 0%, #A9452D 100%)!important;border-color:var(--warm-deep)!important;box-shadow:0 14px 28px rgba(179,78,54,.24)!important;}
.profile-copy .btn.btn-primary:hover{background:linear-gradient(180deg,#C15A40 0%, #943A25 100%)!important;border-color:#943A25!important;}
.profile-copy .reader-favorite, .profile-copy .reader-oshi{background:linear-gradient(180deg,#FFFFFF 0%, #FFF6F1 100%)!important;border-color:var(--warm-line)!important;color:var(--warm-deep)!important;box-shadow:0 8px 24px rgba(179,78,54,.10)!important;}
.profile-copy .reader-favorite .engagement-count,.profile-copy .reader-oshi .engagement-count{border-color:var(--warm-line)!important;background:linear-gradient(180deg,#FFFFFF 0%, #FFF2EB 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 3px 10px rgba(179,78,54,.10)!important;color:var(--warm-deep)!important;}
.profile-copy .reader-favorite[data-active="true"],.profile-copy .reader-oshi[data-active="true"]{background:#FFF0E8!important;border-color:#E7AF9D!important;color:#8F412C!important;}
.profile-copy .reader-favorite[data-active="true"] .engagement-count,.profile-copy .reader-oshi[data-active="true"] .engagement-count{background:linear-gradient(180deg,#FFFFFF 0%, #FFEAE0 100%)!important;border-color:#EDB8A8!important;color:#8F412C!important;}
.profile-copy .reader-oshi .engagement-heart,.profile-copy .reader-favorite .engagement-heart{color:var(--warm)!important;}
.reader-oshi-hint{color:var(--warm-text)!important;}

/* Coral Profile buttons inside work/comment sections */
.work-comment-page,
.work-comment-card .work-comment-reader-copy a.work-comment-page,
.work-comment-card .work-comment-reader-controls .work-comment-page,
.author-work-link{background:linear-gradient(180deg,#FFF7F2 0%, #FFF0E8 100%)!important;border-color:var(--warm-line)!important;color:var(--warm-deep)!important;box-shadow:0 8px 18px rgba(179,78,54,.08)!important;}
.work-comment-page:hover,
.work-comment-card .work-comment-reader-copy a.work-comment-page:hover,
.work-comment-card .work-comment-reader-controls .work-comment-page:hover,
.author-work-link:hover{background:linear-gradient(180deg,#FFF0E8 0%, #FFE8DE 100%)!important;border-color:#EAB29F!important;color:#8E402A!important;box-shadow:0 10px 22px rgba(179,78,54,.12)!important;}

/* gentle warm tone for note/intro sections */
.author-note-pill,.hero-kicker{background:#FFF6F1!important;color:var(--warm-text)!important;border-color:var(--warm-line)!important;}


/* 推し読 v137 | white inner comment box + cleaner solid CTA */
/* inner content area in comment/feeling cards should feel white, not bluish */
.work-comment-card .work-comment-copy-block,
.work-comment-card.tone-green .work-comment-copy-block,
.work-comment-card.tone-warm .work-comment-copy-block{
  background:#FFFFFF!important;
  border:1px solid var(--warm-line)!important;
  box-shadow:0 8px 20px rgba(179,78,54,.04)!important;
}
.work-comment-card .work-comment-copy-block p,
.work-comment-card .work-comment-copy-block li,
.work-comment-card .work-comment-text{
  color:#6C5148!important;
}
/* area behind the CTA should stay clean and white */
.compact-fade{
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.66) 32%,rgba(255,255,255,.94) 62%,rgba(255,255,255,1) 100%)!important;
}
.work-comment-card .compact-fade,
.work-card .compact-fade{
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.54) 26%,rgba(255,255,255,.92) 58%,rgba(255,255,255,1) 100%)!important;
}
/* fix blue slab feeling below CTA */
.work-comment-card .compact-fade::before,
.work-comment-card .compact-fade::after,
.work-card .compact-fade::before,
.work-card .compact-fade::after{display:none!important;}

/* CTA button: remove the heavy gradient, use elegant solid brand blue */
.works-section .compact-fade .five-reader-link,
.work-comment-card .compact-fade .five-reader-link,
.work-card .compact-fade .five-reader-link{
  background:#0B7997!important;
  background-image:none!important;
  border:1px solid rgba(11,121,151,.98)!important;
  color:#FFFFFF!important;
  box-shadow:0 14px 26px rgba(0,95,120,.16)!important;
}
.works-section .compact-fade .five-reader-link:hover,
.works-section .compact-fade .five-reader-link:focus,
.work-comment-card .compact-fade .five-reader-link:hover,
.work-comment-card .compact-fade .five-reader-link:focus,
.work-card .compact-fade .five-reader-link:hover,
.work-card .compact-fade .five-reader-link:focus{
  background:#096B86!important;
  background-image:none!important;
  border-color:#096B86!important;
  color:#FFFFFF!important;
  box-shadow:0 16px 30px rgba(0,95,120,.20)!important;
}
.works-section .compact-fade .five-reader-faces img,
.work-comment-card .compact-fade .five-reader-faces img,
.work-card .compact-fade .five-reader-faces img{
  box-shadow:0 4px 12px rgba(0,44,58,.14)!important;
}


/* 推し読 v138 | home copy positioning and cleaner navigation */
/* Desktop only: bring the left-side hero composition a little lower, without shifting gallery. */
@media (min-width:1025px) {
  .service-hero .service-copy {transform:translateY(22px)!important;}
}
/* The '推し読とは' navigation item is no longer outlined or filled. */
.site-header .header-nav .nav-brand-link {
  border:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
.site-header .header-nav .nav-brand-link:hover,
.site-header .header-nav .nav-brand-link:focus-visible {
  background:#F1FAFD!important;
  box-shadow:none!important;
}
.site-header .header-nav .nav-brand-link .nav-brand-accent {color:var(--brand)!important;}
/* Reduce the extra gap following the desktop gallery slightly. */
@media (min-width:901px) {
  .works-section {padding-top:40px!important;}
}


/* 推し読 v139: HOME work cards are completely white inside.
   The previous v135 warm gradient targeted .work-card itself; v137 only
   targeted .work-comment-card on the detail page, so homepage stayed tinted.
   Keep coral as a fine border/accent, never as the card's body fill. */
.works-section .work-card,
.works-section .work-card.preview-start-green,
.works-section .work-card.preview-start-warm,
.works-section .work-card .work-body,
.works-section .work-card .comment-preview,
.works-section .work-card .comment-stream,
.works-section .work-card .preview-two-comments,
.works-section .work-card .comment-bubble-box,
.works-section .work-card .comment-bubble.left .comment-bubble-box,
.works-section .work-card .comment-bubble.right .comment-bubble-box,
.works-section .work-card.preview-start-green .comment-bubble-box,
.works-section .work-card.preview-start-warm .comment-bubble-box,
.works-section .work-card.preview-start-green .preview-detail-bubble .comment-bubble-box,
.works-section .work-card.preview-start-warm .preview-detail-bubble .comment-bubble-box {
  background:#FFFFFF!important;
  background-image:none!important;
}
.works-section .work-card {
  border-color:var(--warm-line)!important;
}
.works-section .work-card .comment-bubble-box {
  border:1px solid var(--warm-line)!important;
  box-shadow:none!important;
}
/* Gradient veil fades to the same true white as the card, no cyan or peach slab. */
.works-section .work-card .comment-fade.compact-fade {
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.68) 31%,
    rgba(255,255,255,.95) 61%,
    #FFFFFF 100%)!important;
}
/* Prevent translucent decorative layers from re-tinting the preview. */
.works-section .work-card .comment-preview::before,
.works-section .work-card .comment-preview::after,
.works-section .work-card .comment-stream::before,
.works-section .work-card .comment-stream::after {
  background-color:transparent!important;
}


/* 推し読 v140 | redesign work CTA, restore refined Re:READ feel for reader directory, comment color variations */
/* --- 1) Top work cards: refined CTA and comment color variations --- */
.works-section .work-card .comment-preview{padding-top:4px!important;}
.works-section .work-card .comment-stream{gap:12px!important;}
.works-section .work-card .comment-bubble{align-items:flex-start!important;}
.works-section .work-card .comment-bubble-box{
  border:1px solid transparent!important;
  border-radius:20px!important;
  padding:14px 15px!important;
  box-shadow:none!important;
}
.works-section .work-card.preview-start-warm .comment-bubble.left .comment-bubble-box{background:#FFF7F2!important;border-color:#F0CBC0!important;color:#6C5148!important;}
.works-section .work-card.preview-start-warm .comment-bubble.right .comment-bubble-box{background:#FFFDF9!important;border-color:#EFE0D1!important;color:#6A564E!important;}
.works-section .work-card.preview-start-green .comment-bubble.left .comment-bubble-box{background:#F4FBFE!important;border-color:#D5E7EF!important;color:#516473!important;}
.works-section .work-card.preview-start-green .comment-bubble.right .comment-bubble-box{background:#F9FCFA!important;border-color:#DEE9E2!important;color:#58685F!important;}
.works-section .work-card .comment-reader-name{color:#7B625A!important;}
.works-section .work-card.preview-start-green .comment-reader-name{color:#617886!important;}

.works-section .compact-fade{
  height:86px!important;
  padding:0 14px 10px!important;
  display:flex!important;align-items:flex-end!important;justify-content:center!important;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.54) 28%,rgba(255,255,255,.92) 68%,rgba(255,255,255,1) 100%)!important;
}
.works-section .compact-fade .five-reader-link{
  position:relative;display:flex!important;align-items:center!important;justify-content:flex-start!important;
  width:100%!important;max-width:none!important;min-width:0!important;min-height:58px!important;
  padding:10px 58px 10px 14px!important;gap:12px!important;
  border-radius:999px!important;border:1px solid #D9E5EC!important;
  background:#FFFFFF!important;color:#28353D!important;
  box-shadow:0 10px 24px rgba(40,53,61,.07)!important;
}
.works-section .compact-fade .five-reader-link > span:last-child{font-size:14px!important;font-weight:800!important;letter-spacing:.01em!important;color:#28353D!important;line-height:1.2!important;white-space:nowrap!important;}
.works-section .compact-fade .five-reader-link::after{
  content:"↗";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  background:#006F8C;color:#FFFFFF;font-size:13px;font-weight:700;box-shadow:0 6px 14px rgba(0,111,140,.18);
}
.works-section .compact-fade .five-reader-link:hover,.works-section .compact-fade .five-reader-link:focus{transform:translateY(-1px)!important;box-shadow:0 14px 26px rgba(40,53,61,.10)!important;background:#FFFFFF!important;color:#28353D!important;}
.works-section .compact-fade .five-reader-faces{display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;padding-left:0!important;}
.works-section .compact-fade .five-reader-faces img{width:34px!important;height:34px!important;margin-left:-7px!important;border:2px solid #FFFFFF!important;box-shadow:0 3px 8px rgba(40,53,61,.10)!important;}
.works-section .compact-fade .five-reader-faces img:first-child{margin-left:0!important;}
.works-section .work-card.preview-start-warm .compact-fade .five-reader-link{border-color:#E8CEC1!important;background:#FFFDFC!important;box-shadow:0 10px 24px rgba(179,78,54,.08)!important;}
.works-section .work-card.preview-start-warm .compact-fade .five-reader-link::after{background:#C56E52!important;box-shadow:0 6px 14px rgba(179,78,54,.18)!important;}
.works-section .work-card.preview-start-green .compact-fade .five-reader-link{border-color:#D7E6EE!important;background:#FCFEFF!important;box-shadow:0 10px 24px rgba(0,111,140,.08)!important;}
.works-section .work-card.preview-start-green .compact-fade .five-reader-link::after{background:#0A7792!important;}
@media (max-width:820px){
  .works-section .compact-fade{height:78px!important;padding:0 12px 9px!important;}
  .works-section .compact-fade .five-reader-link{min-height:54px!important;padding:9px 52px 9px 12px!important;}
  .works-section .compact-fade .five-reader-link > span:last-child{font-size:13px!important;}
  .works-section .compact-fade .five-reader-link::after{width:31px;height:31px;right:10px;font-size:12px;}
  .works-section .compact-fade .five-reader-faces img{width:31px!important;height:31px!important;}
}
@media (max-width:560px){
  .works-section .compact-fade{height:72px!important;padding:0 10px 8px!important;}
  .works-section .compact-fade .five-reader-link{min-height:50px!important;padding:8px 48px 8px 10px!important;gap:10px!important;}
  .works-section .compact-fade .five-reader-link > span:last-child{font-size:12.5px!important;}
  .works-section .compact-fade .five-reader-faces img{width:28px!important;height:28px!important;margin-left:-6px!important;}
}

/* --- 2) Reader directory: refined Re:READ style --- */
.readers-section .reader-card,.reader-list-page .reader-card{
  border:1px solid #E6EEF2!important;
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFEFF 100%)!important;
  box-shadow:0 14px 30px rgba(40,53,61,.045)!important;
}
.readers-section .reader-card:nth-child(4n+2),.reader-list-page .reader-card:nth-child(4n+2),
.readers-section .reader-card:nth-child(4n+4),.reader-list-page .reader-card:nth-child(4n+4){background:linear-gradient(180deg,#FFFFFF 0%,#FFFCFA 100%)!important;}
.readers-section .reader-card:hover,.reader-list-page .reader-card:hover{box-shadow:0 20px 38px rgba(40,53,61,.08)!important;border-color:#D9E6EC!important;}
.readers-section .reader-card::before,.reader-list-page .reader-card::before{
  content:"";position:absolute;left:18px;top:0;width:54px;height:4px;border-radius:0 0 999px 999px;
  background:#9ED7E9;z-index:2;
}
.readers-section .reader-card:nth-child(4n+2)::before,.reader-list-page .reader-card:nth-child(4n+2)::before,
.readers-section .reader-card:nth-child(4n+4)::before,.reader-list-page .reader-card:nth-child(4n+4)::before{background:#F0B59F;}
.readers-section .reader-card > a,.reader-list-page .reader-card > a{padding:22px 18px 18px!important;}
.readers-section .reader-card > a::before,.reader-list-page .reader-card > a::before{
  content:"";position:absolute;left:-12px;top:-14px;width:92px;height:92px;border-radius:50%;
  background:radial-gradient(circle,rgba(1,162,206,.065),transparent 72%);pointer-events:none;
}
.readers-section .reader-card:nth-child(4n+2) > a::before,.reader-list-page .reader-card:nth-child(4n+2) > a::before,
.readers-section .reader-card:nth-child(4n+4) > a::before,.reader-list-page .reader-card:nth-child(4n+4) > a::before{background:radial-gradient(circle,rgba(232,121,89,.075),transparent 72%);}
.readers-section .reader-card img,.reader-list-page .reader-card img{box-shadow:0 8px 20px rgba(40,53,61,.07)!important;}
.readers-section .reader-card h3,.reader-list-page .reader-card h3{font-size:18px!important;letter-spacing:-.01em!important;color:#24313A!important;}
.readers-section .reader-card .reader-role,.reader-list-page .reader-card .reader-role{color:#69808D!important;}
.readers-section .reader-card .reader-intro,.reader-list-page .reader-card .reader-intro{color:#465863!important;}
.reader-card-number{top:14px!important;right:14px!important;color:#C7D7E0!important;font-size:8.5px!important;letter-spacing:.08em!important;font-weight:700!important;}
.reader-card-number i{
  display:grid!important;place-items:center!important;width:20px;height:20px;border-radius:50%;
  background:#F3FAFD;color:#7AA4B5;font-size:11px!important;font-weight:700!important;
}
.readers-section .reader-card:nth-child(4n+2) .reader-card-number i,.reader-list-page .reader-card:nth-child(4n+2) .reader-card-number i,
.readers-section .reader-card:nth-child(4n+4) .reader-card-number i,.reader-list-page .reader-card:nth-child(4n+4) .reader-card-number i{background:#FFF4EE;color:#B86A52;}
.readers-section .reader-card:hover .reader-card-number i,.reader-list-page .reader-card:hover .reader-card-number i{transform:translate(2px,-2px)!important;}
.readers-section .reader-card .reader-oshi-total,.reader-list-page .reader-card .reader-oshi-total{
  background:#FFFFFF!important;border:1px solid #E7EDF1!important;box-shadow:0 6px 14px rgba(40,53,61,.05)!important;
}
.readers-section .reader-card:nth-child(4n+2) .reader-oshi-total,.reader-list-page .reader-card:nth-child(4n+2) .reader-oshi-total,
.readers-section .reader-card:nth-child(4n+4) .reader-oshi-total,.reader-list-page .reader-card:nth-child(4n+4) .reader-oshi-total{border-color:#F0D8CF!important;background:#FFFDFC!important;}

/* --- 3) work comment blocks on detail/list pages get soft variations --- */
.work-comment-card{background:#FFFFFF!important;border-color:#ECD6CC!important;}
.work-comment-card::before{background:rgba(232,121,89,.06)!important;}
.work-comment-card.tone-green{background:#FFFFFF!important;border-color:#D7E5EC!important;}
.work-comment-card.tone-green::before{background:rgba(1,162,206,.06)!important;}
.work-comment-card .work-comment-copy-block{background:#FFFFFF!important;border:1px solid #F0D9CF!important;box-shadow:0 8px 20px rgba(179,78,54,.035)!important;padding:20px 22px!important;}
.work-comment-card.tone-green .work-comment-copy-block{background:#FBFEFF!important;border-color:#DAE9F0!important;box-shadow:0 8px 20px rgba(0,111,140,.035)!important;}
.work-comment-card.tone-warm .work-comment-copy-block{background:#FFF9F6!important;border-color:#F0D1C4!important;box-shadow:0 8px 20px rgba(179,78,54,.04)!important;}
.work-comment-card .work-comment-copy-block p,.work-comment-card .work-comment-copy-block li{color:#6C5148!important;}
.work-comment-card.tone-green .work-comment-copy-block p,.work-comment-card.tone-green .work-comment-copy-block li{color:#506474!important;}
.work-comment-card.tone-warm .work-comment-copy-block p,.work-comment-card.tone-warm .work-comment-copy-block li{color:#7A574B!important;}
.work-comment-card .work-comment-reader-copy h3{color:#2E3840!important;}
.work-comment-card .work-comment-reader-copy p,.work-comment-card .work-comment-reader-copy span{color:#7B655D!important;}
.work-comment-card.tone-green .work-comment-reader-copy p,.work-comment-card.tone-green .work-comment-reader-copy span{color:#6B8190!important;}


/* OSHIDOKU v141 — 20px further desktop-only hero shift and outlined work CTA */
/* v138 shifted 22px. This intentionally sets a total of 42px. */
@media (min-width:1025px){
  .service-hero .service-copy{transform:translateY(42px)!important;}
}

/* Match the understated outlined '推し読者を見つける' CTA; no pill shadow. */
.works-section .work-card .comment-fade.compact-fade a.five-reader-link,
.works-section .work-card.preview-start-warm .comment-fade.compact-fade a.five-reader-link,
.works-section .work-card.preview-start-green .comment-fade.compact-fade a.five-reader-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-height:58px!important;
  padding:9px 46px 9px 16px!important;
  border:1px solid #CEE5F1!important;
  border-radius:999px!important;
  background:#FFFFFF!important;
  background-image:none!important;
  color:#006F8C!important;
  box-shadow:none!important;
  text-decoration:none!important;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease!important;
}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link > span:last-child{
  color:#006F8C!important;
  font-weight:800!important;
  font-size:14px!important;
  letter-spacing:.01em!important;
  line-height:1.3!important;
  white-space:nowrap!important;
}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link::after,
.works-section .work-card.preview-start-warm .comment-fade.compact-fade a.five-reader-link::after,
.works-section .work-card.preview-start-green .comment-fade.compact-fade a.five-reader-link::after{
  content:"↗"!important;
  position:absolute!important;
  right:17px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  color:#006F8C!important;
  box-shadow:none!important;
  font-size:22px!important;
  font-weight:400!important;
  line-height:1!important;
}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link:hover,
.works-section .work-card .comment-fade.compact-fade a.five-reader-link:focus-visible{
  background:#F3FBFE!important;
  background-image:none!important;
  color:#006F8C!important;
  border-color:#A4D7E9!important;
  box-shadow:none!important;
  transform:none!important;
}
.works-section .work-card .comment-fade.compact-fade .five-reader-faces img{
  box-shadow:none!important;
}
@media (max-width:820px){
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link{
    min-height:54px!important;
    padding:8px 43px 8px 12px!important;
    gap:10px!important;
  }
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link > span:last-child{font-size:13px!important;}
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link::after{right:13px!important;font-size:19px!important;}
}
@media (max-width:560px){
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link{
    min-height:50px!important;
    padding:8px 36px 8px 9px!important;
    gap:8px!important;
  }
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link > span:last-child{font-size:12px!important;}
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link::after{right:12px!important;font-size:18px!important;}
}

/* Ensure variant card selectors don't override compact spacing on phones. */
@media (max-width:560px){
  .works-section .work-card.preview-start-warm .comment-fade.compact-fade a.five-reader-link,
  .works-section .work-card.preview-start-green .comment-fade.compact-fade a.five-reader-link{
    min-height:50px!important;
    padding:8px 36px 8px 9px!important;
    gap:8px!important;
  }
  .works-section .work-card .comment-fade.compact-fade .five-reader-faces img{
    width:28px!important;
    height:28px!important;
  }
}


/* 推し読 v142 | readable readers hero art, 3-face CTA, gender color logic */
/* Readers page hero art */
.reader-list-hero .reader-list-hero-art{opacity:1!important;right:22px!important;bottom:-8px!important;transform:rotate(-6deg)!important;gap:1px!important;color:#8EBBD0!important;}
.reader-list-hero .reader-list-hero-art > span{font-size:19px!important;font-weight:700!important;letter-spacing:.02em!important;color:#A9D8E8!important;text-shadow:0 1px 0 rgba(255,255,255,.85)!important;}
.reader-list-hero .reader-list-hero-art > b{font-size:34px!important;line-height:1.05!important;font-weight:800!important;color:#4FAED5!important;text-shadow:0 1px 0 rgba(255,255,255,.92)!important;}
@media (max-width:820px){.reader-list-hero .reader-list-hero-art{right:10px!important;bottom:-4px!important;transform:rotate(-5deg)!important;}.reader-list-hero .reader-list-hero-art > span{font-size:16px!important;}.reader-list-hero .reader-list-hero-art > b{font-size:28px!important;}}
@media (max-width:560px){.reader-list-hero .reader-list-hero-art > span{font-size:14px!important;}.reader-list-hero .reader-list-hero-art > b{font-size:24px!important;}}

/* Gender color system */
:root{--gender-male:#0B7997;--gender-male-line:#CFE4EC;--gender-male-soft:#F4FBFE;--gender-male-text:#4F6976;--gender-female:#C97557;--gender-female-line:#F0CDC0;--gender-female-soft:#FFF7F2;--gender-female-text:#7A584D;}
.reader-card.theme-male::before,.reader-card.theme-male .reader-card-number i{background:#D9EEF5!important;color:var(--gender-male)!important;}
.reader-card.theme-female::before,.reader-card.theme-female .reader-card-number i{background:#FFF0E8!important;color:var(--gender-female)!important;}
.readers-section .reader-card.theme-male,.reader-list-page .reader-card.theme-male{background:linear-gradient(180deg,#FFFFFF 0%,#FBFEFF 100%)!important;}
.readers-section .reader-card.theme-female,.reader-list-page .reader-card.theme-female{background:linear-gradient(180deg,#FFFFFF 0%,#FFFCFA 100%)!important;}
.readers-section .reader-card.theme-male > a::before,.reader-list-page .reader-card.theme-male > a::before{background:radial-gradient(circle,rgba(1,162,206,.075),transparent 72%)!important;}
.readers-section .reader-card.theme-female > a::before,.reader-list-page .reader-card.theme-female > a::before{background:radial-gradient(circle,rgba(232,121,89,.078),transparent 72%)!important;}
.reader-card.theme-male .reader-role,.reader-card.theme-male .reader-oshi-total-heart{color:#658491!important;}
.reader-card.theme-female .reader-role,.reader-card.theme-female .reader-oshi-total-heart{color:#9A6B5C!important;}
.reader-card.theme-male .reader-oshi-total{border-color:#D7E6EE!important;background:#FCFEFF!important;}
.reader-card.theme-female .reader-oshi-total{border-color:#F0D8CF!important;background:#FFFDFC!important;}

/* Work detail cards by gender */
.work-comment-card.theme-male{border-color:var(--gender-male-line)!important;}
.work-comment-card.theme-male::before{background:rgba(1,162,206,.06)!important;}
.work-comment-card.theme-male .work-comment-copy-block{background:#FBFEFF!important;border-color:#D9E8EF!important;box-shadow:0 8px 20px rgba(0,111,140,.035)!important;}
.work-comment-card.theme-male .work-comment-copy-block p,.work-comment-card.theme-male .work-comment-copy-block li,.work-comment-card.theme-male .work-comment-reader-copy p,.work-comment-card.theme-male .work-comment-reader-copy span{color:#58707E!important;}
.work-comment-card.theme-male .work-comment-page,.work-comment-card.theme-male .compact-reader-appreciate{border-color:#D5E5ED!important;background:#FCFEFF!important;color:var(--gender-male)!important;}
.work-comment-card.theme-female{border-color:var(--gender-female-line)!important;}
.work-comment-card.theme-female::before{background:rgba(232,121,89,.06)!important;}
.work-comment-card.theme-female .work-comment-copy-block{background:#FFF9F6!important;border-color:#F0D3C8!important;box-shadow:0 8px 20px rgba(179,78,54,.04)!important;}
.work-comment-card.theme-female .work-comment-copy-block p,.work-comment-card.theme-female .work-comment-copy-block li,.work-comment-card.theme-female .work-comment-reader-copy p,.work-comment-card.theme-female .work-comment-reader-copy span{color:#76574C!important;}
.work-comment-card.theme-female .work-comment-page,.work-comment-card.theme-female .compact-reader-appreciate{border-color:#F0CDC0!important;background:#FFF7F2!important;color:var(--gender-female)!important;}

/* Top work preview comments by gender */
.works-section .work-card .comment-bubble.theme-male .comment-bubble-box{background:#F4FBFE!important;border-color:#D5E7EF!important;color:#516473!important;}
.works-section .work-card .comment-bubble.theme-female .comment-bubble-box{background:#FFF7F2!important;border-color:#F0CBC0!important;color:#6C5148!important;}
.works-section .work-card .comment-bubble.theme-male .comment-reader-name{color:#607B89!important;}
.works-section .work-card .comment-bubble.theme-female .comment-reader-name{color:#896659!important;}

/* 3-face CTA with safe text spacing */
.works-section .work-card .comment-fade.compact-fade a.five-reader-link{padding:9px 72px 9px 14px!important;gap:12px!important;}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link > span:last-child{padding-right:0!important;flex:1 1 auto!important;text-align:left!important;}
.works-section .work-card .comment-fade.compact-fade .five-reader-faces{min-width:86px!important;flex:0 0 auto!important;}
.works-section .work-card .comment-fade.compact-fade .five-reader-faces img{width:38px!important;height:38px!important;margin-left:-10px!important;}
.works-section .work-card .comment-fade.compact-fade .five-reader-faces img:first-child{margin-left:0!important;}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link.theme-male{border-color:var(--gender-male-line)!important;background:#FFFFFF!important;color:var(--gender-male)!important;}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link.theme-male > span:last-child,.works-section .work-card .comment-fade.compact-fade a.five-reader-link.theme-male::after{color:var(--gender-male)!important;}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link.theme-female{border-color:var(--gender-female-line)!important;background:#FFFFFF!important;color:var(--gender-female)!important;}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link.theme-female > span:last-child,.works-section .work-card .comment-fade.compact-fade a.five-reader-link.theme-female::after{color:var(--gender-female)!important;}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link:hover,.works-section .work-card .comment-fade.compact-fade a.five-reader-link:focus-visible{background:#FFFEFD!important;}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link.theme-male:hover,.works-section .work-card .comment-fade.compact-fade a.five-reader-link.theme-male:focus-visible{background:#F6FCFE!important;border-color:#B6D9E7!important;}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link.theme-female:hover,.works-section .work-card .comment-fade.compact-fade a.five-reader-link.theme-female:focus-visible{background:#FFF8F5!important;border-color:#E9BEAF!important;}
@media (max-width:820px){.works-section .work-card .comment-fade.compact-fade a.five-reader-link{padding:8px 64px 8px 12px!important;}.works-section .work-card .comment-fade.compact-fade .five-reader-faces{min-width:76px!important;}.works-section .work-card .comment-fade.compact-fade .five-reader-faces img{width:33px!important;height:33px!important;margin-left:-9px!important;}}
@media (max-width:560px){.works-section .work-card .comment-fade.compact-fade a.five-reader-link{padding:8px 48px 8px 10px!important;gap:8px!important;}.works-section .work-card .comment-fade.compact-fade .five-reader-faces{min-width:66px!important;}.works-section .work-card .comment-fade.compact-fade .five-reader-faces img{width:28px!important;height:28px!important;margin-left:-7px!important;}.works-section .work-card .comment-fade.compact-fade a.five-reader-link > span:last-child{font-size:11.5px!important;}}


/* 推し読 v143 | more breathing room below desktop gallery */
@media (min-width:1025px) {
  .works-section { padding-top:68px!important; }
}


/* 推し読 v144 | 5-face CTA perfected + blue outer frame for blue theme cards */
/* outer frame follows theme */
.works-section .work-card.theme-male{border-color:#CFE4EC!important;background:#FCFEFF!important;}
.works-section .work-card.theme-female{border-color:#F0CDC0!important;background:#FFFDFC!important;}

/* CTA: keep 5 faces, prevent overlap with arrow button */
.works-section .work-card .comment-fade.compact-fade{padding-inline:14px!important;}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link,
.works-section .work-card.preview-start-warm .comment-fade.compact-fade a.five-reader-link,
.works-section .work-card.preview-start-green .comment-fade.compact-fade a.five-reader-link{
  display:grid!important;
  grid-template-columns:min-content minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:16px!important;
  min-height:72px!important;
  padding:11px 92px 11px 16px!important;
  overflow:hidden!important;
}
.works-section .work-card .comment-fade.compact-fade .five-reader-faces{
  min-width:162px!important;
  width:162px!important;
  flex:none!important;
  display:flex!important;align-items:center!important;
}
.works-section .work-card .comment-fade.compact-fade .five-reader-faces img{
  width:38px!important;height:38px!important;margin-left:-10px!important;
  border:2px solid #FFFFFF!important;
}
.works-section .work-card .comment-fade.compact-fade .five-reader-faces img:first-child{margin-left:0!important;}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link > span:last-child{
  min-width:0!important;
  display:block!important;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  padding-right:0!important;
}
.works-section .work-card .comment-fade.compact-fade a.five-reader-link::after,
.works-section .work-card.preview-start-warm .comment-fade.compact-fade a.five-reader-link::after,
.works-section .work-card.preview-start-green .comment-fade.compact-fade a.five-reader-link::after{
  right:14px!important;
  width:48px!important;height:48px!important;
  font-size:24px!important;
}
/* hover retains elegance */
.works-section .work-card .comment-fade.compact-fade a.five-reader-link:hover,
.works-section .work-card .comment-fade.compact-fade a.five-reader-link:focus-visible{transform:translateY(-1px)!important;}

@media (max-width:1100px){
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link{padding:10px 82px 10px 14px!important;column-gap:14px!important;min-height:68px!important;}
  .works-section .work-card .comment-fade.compact-fade .five-reader-faces{min-width:146px!important;width:146px!important;}
  .works-section .work-card .comment-fade.compact-fade .five-reader-faces img{width:34px!important;height:34px!important;margin-left:-9px!important;}
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link > span:last-child{font-size:13px!important;}
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link::after{width:44px!important;height:44px!important;font-size:22px!important;right:12px!important;}
}
@media (max-width:820px){
  .works-section .work-card .comment-fade.compact-fade{padding-inline:12px!important;}
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link{padding:9px 74px 9px 12px!important;column-gap:12px!important;min-height:62px!important;}
  .works-section .work-card .comment-fade.compact-fade .five-reader-faces{min-width:128px!important;width:128px!important;}
  .works-section .work-card .comment-fade.compact-fade .five-reader-faces img{width:31px!important;height:31px!important;margin-left:-8px!important;}
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link > span:last-child{font-size:12.5px!important;}
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link::after{width:40px!important;height:40px!important;font-size:20px!important;right:11px!important;}
}
@media (max-width:560px){
  .works-section .work-card .comment-fade.compact-fade{padding-inline:10px!important;}
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link{padding:8px 64px 8px 10px!important;column-gap:10px!important;min-height:56px!important;}
  .works-section .work-card .comment-fade.compact-fade .five-reader-faces{min-width:102px!important;width:102px!important;}
  .works-section .work-card .comment-fade.compact-fade .five-reader-faces img{width:27px!important;height:27px!important;margin-left:-7px!important;}
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link > span:last-child{font-size:11.5px!important;}
  .works-section .work-card .comment-fade.compact-fade a.five-reader-link::after{width:36px!important;height:36px!important;font-size:18px!important;right:10px!important;}
}


/* 推し読 v145 | final CTA polish + Re:READ-like pastel roundtable colors */
/* ===== top work card CTA: restore clean, non-broken layout ===== */
.works-section .work-card .comment-fade.compact-fade{padding:0 14px 10px!important;height:88px!important;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.56) 28%,rgba(255,255,255,.94) 70%,rgba(255,255,255,1) 100%)!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;
  width:100%!important;min-width:0!important;max-width:none!important;min-height:60px!important;
  padding:9px 84px 9px 14px!important;gap:14px!important;
  border-radius:999px!important;background:#FFFFFF!important;box-shadow:none!important;
  text-decoration:none!important;overflow:hidden!important;
}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-female{border:1.5px solid #F0CDC0!important;background:#FFFCFB!important;color:#24313A!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-male{border:1.5px solid #CFE4EC!important;background:#FCFEFF!important;color:#24313A!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link::after{
  content:"↗"!important;position:absolute!important;right:14px!important;top:50%!important;transform:translateY(-50%)!important;
  width:46px!important;height:46px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  font-size:22px!important;font-weight:800!important;line-height:1!important;box-shadow:none!important;
}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-female::after{background:#CC7454!important;color:#FFFFFF!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-male::after{background:#0D86A5!important;color:#FFFFFF!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;width:150px!important;min-width:150px!important;padding-left:0!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces img{width:36px!important;height:36px!important;margin-left:-9px!important;border:2px solid #FFFFFF!important;box-shadow:none!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces img:first-child{margin-left:0!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span:last-child{display:block!important;flex:1 1 auto!important;min-width:0!important;padding-right:0!important;font-size:14px!important;font-weight:800!important;line-height:1.2!important;letter-spacing:.01em!important;white-space:nowrap!important;color:#24313A!important;overflow:visible!important;text-overflow:clip!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link:hover,.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link:focus-visible{transform:none!important;background:#FFFFFF!important;box-shadow:none!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-female:hover,.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-female:focus-visible{background:#FFF8F5!important;border-color:#E9BEAF!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-male:hover,.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-male:focus-visible{background:#F7FCFE!important;border-color:#B9DCEA!important;}
@media (max-width:1100px){
  .works-section .work-card .comment-fade.compact-fade{height:84px!important;padding:0 12px 9px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{min-height:58px!important;padding:9px 78px 9px 12px!important;gap:12px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{width:138px!important;min-width:138px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces img{width:34px!important;height:34px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span:last-child{font-size:13px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link::after{width:42px!important;height:42px!important;font-size:20px!important;right:12px!important;}
}
@media (max-width:820px){
  .works-section .work-card .comment-fade.compact-fade{height:78px!important;padding:0 10px 8px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{min-height:54px!important;padding:8px 70px 8px 10px!important;gap:10px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{width:124px!important;min-width:124px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces img{width:31px!important;height:31px!important;margin-left:-8px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span:last-child{font-size:12.5px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link::after{width:38px!important;height:38px!important;font-size:18px!important;right:11px!important;}
}
@media (max-width:560px){
  .works-section .work-card .comment-fade.compact-fade{height:72px!important;padding:0 9px 8px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{min-height:50px!important;padding:7px 58px 7px 9px!important;gap:8px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{width:106px!important;min-width:106px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces img{width:27px!important;height:27px!important;margin-left:-7px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span:last-child{font-size:11.5px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link::after{width:34px!important;height:34px!important;font-size:17px!important;right:9px!important;}
}

/* ===== roundtable: Re:READ-like soft per-reader palette ===== */
.roundtable-reveal .roundtable-message{--rt-bg:#FFFFFF;--rt-border:#E7EEF2;--rt-text:#465761;--rt-name:#6D818D;--rt-dot:#90A9B6;}
.roundtable-reveal .roundtable-message[data-reader="misaki"]{--rt-bg:#FFF4EF;--rt-border:#F2D1C5;--rt-text:#77594D;--rt-name:#B56F5A;--rt-dot:#D1907C;}
.roundtable-reveal .roundtable-message[data-reader="sumiko"]{--rt-bg:#FFF8F1;--rt-border:#EEDFCF;--rt-text:#7A6657;--rt-name:#A78871;--rt-dot:#C7AA93;}
.roundtable-reveal .roundtable-message[data-reader="keisuke"]{--rt-bg:#F3FAFE;--rt-border:#D6E8F1;--rt-text:#546975;--rt-name:#6F95A8;--rt-dot:#8FB3C4;}
.roundtable-reveal .roundtable-message[data-reader="aoi"]{--rt-bg:#F2FBF8;--rt-border:#D8EBE4;--rt-text:#556B64;--rt-name:#6E9C8E;--rt-dot:#8AB6A8;}
.roundtable-reveal .roundtable-message[data-reader="kenichi"]{--rt-bg:#FFFBEF;--rt-border:#EEE4C8;--rt-text:#746951;--rt-name:#AA9662;--rt-dot:#C7B27B;}
.roundtable-reveal .roundtable-message .roundtable-speaker-name{color:var(--rt-name)!important;}
.roundtable-reveal .roundtable-message .roundtable-reply-cue{color:var(--rt-name)!important;opacity:.84!important;}
.roundtable-reveal .roundtable-message .roundtable-speech,.roundtable-reveal .roundtable-message.is-reply .roundtable-speech{background:var(--rt-bg)!important;border:1px solid var(--rt-border)!important;color:var(--rt-text)!important;box-shadow:none!important;}
.roundtable-reveal .roundtable-message .roundtable-typing i{background:var(--rt-dot)!important;}
.roundtable-reveal .roundtable-message .roundtable-speech p::after{background:var(--rt-dot)!important;}
.roundtable-reveal .roundtable-conversation{background:radial-gradient(ellipse at 12% 6%,rgba(245,250,252,.62),transparent 36%),linear-gradient(170deg,#FFFFFF,#FFFFFF)!important;}
.roundtable-chat-day{background:#F7FBFD!important;border:1px solid #E6EEF2!important;color:#7A8F9B!important;}
.roundtable-chat-end{background:#F7FBFD!important;color:#6E8591!important;border:1px solid #E6EEF2!important;}
.roundtable-chat-bottom{background:#FFFFFF!important;border-top:1px solid #EDF3F6!important;color:#728895!important;}
.roundtable-chat-bottom span:first-child,.roundtable-chat-bottom span:last-child{color:#D7E4EA!important;}


/* 推し読 v146: compact header logo only on smartphones */
@media (max-width:600px){
  .site-header .brand-logo-image{width:84px!important;height:auto!important;}
}


/* 推し読 v147 | tidy directory cards, CTA spacing, simpler comment text box, horizontal profile actions */
/* 1) Remove directory numbering visual remnants */
.reader-card-number{display:none!important;}
.readers-section .reader-card > a,.reader-list-page .reader-card > a{padding-top:20px!important;}

/* 2) CTA keep current vibe, fix text/button overlap */
.works-section .work-card .comment-fade.compact-fade{height:88px!important;padding:0 14px 10px!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:14px!important;
  min-height:60px!important;
  padding:9px 92px 9px 14px!important;
  overflow:hidden!important;
}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{width:150px!important;min-width:150px!important;}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span:last-child{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:14px!important;
  line-height:1.2!important;
  padding-right:0!important;
}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link::after{right:14px!important;width:46px!important;height:46px!important;font-size:22px!important;}
@media (max-width:1100px){
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{grid-template-columns:138px minmax(0,1fr)!important;padding:9px 84px 9px 12px!important;column-gap:12px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{width:138px!important;min-width:138px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span:last-child{font-size:13px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link::after{width:42px!important;height:42px!important;font-size:20px!important;right:12px!important;}
}
@media (max-width:820px){
  .works-section .work-card .comment-fade.compact-fade{height:78px!important;padding:0 10px 8px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{grid-template-columns:124px minmax(0,1fr)!important;padding:8px 72px 8px 10px!important;column-gap:10px!important;min-height:54px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{width:124px!important;min-width:124px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span:last-child{font-size:12.5px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link::after{width:38px!important;height:38px!important;font-size:18px!important;right:11px!important;}
}
@media (max-width:560px){
  .works-section .work-card .comment-fade.compact-fade{height:72px!important;padding:0 9px 8px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{grid-template-columns:106px minmax(0,1fr)!important;padding:7px 58px 7px 9px!important;column-gap:8px!important;min-height:50px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{width:106px!important;min-width:106px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span:last-child{font-size:11.5px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link::after{width:34px!important;height:34px!important;font-size:17px!important;right:9px!important;}
}

/* 3) Remove inner rectangular box around comment text */
.work-comment-copy-block,
.work-comment-card .work-comment-copy-block,
.work-comment-card.tone-green .work-comment-copy-block,
.work-comment-card.tone-warm .work-comment-copy-block,
.work-comment-card.theme-male .work-comment-copy-block,
.work-comment-card.theme-female .work-comment-copy-block{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important;
}

/* 4) Reader profile action area horizontal on desktop */
.profile-copy .hero-actions{display:flex!important;flex-wrap:nowrap!important;align-items:flex-start!important;gap:14px!important;}
.profile-copy .hero-actions .btn-primary{flex:0 0 auto!important;min-width:0!important;white-space:nowrap!important;}
.profile-copy .reader-oshi-wrap{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important;flex:1 1 auto!important;}
.profile-copy .reader-favorite{width:auto!important;min-width:0!important;justify-content:flex-start!important;}
.profile-copy .reader-oshi-hint{margin-top:10px!important;max-width:320px!important;}
@media (max-width:760px){
  .profile-copy .hero-actions{flex-wrap:wrap!important;align-items:stretch!important;}
  .profile-copy .hero-actions .btn-primary{width:100%!important;text-align:center!important;}
  .profile-copy .reader-oshi-wrap{width:100%!important;}
  .profile-copy .reader-favorite{width:100%!important;justify-content:center!important;}
  .profile-copy .reader-oshi-hint{max-width:none!important;}
}


/* 推し読 v148: Match first reader's comment theme and CTA.
   CTA has its own markup/classes so legacy five-reader-link CSS cannot override it. */
.works-section .work-card.theme-male {
  --first-comment-tint: #F4FBFE;
  --first-comment-border: #CFE4EC;
  --first-comment-ink: #526F7E;
  --comment-cta-accent: #0D86A5;
  --comment-cta-border: #CFE4EC;
  --comment-cta-surface: #FCFEFF;
}
.works-section .work-card.theme-female {
  --first-comment-tint: #FFF7F2;
  --first-comment-border: #F0CDC0;
  --first-comment-ink: #76574C;
  --comment-cta-accent: #CC7454;
  --comment-cta-border: #F0CDC0;
  --comment-cta-surface: #FFFCFB;
}
/* The first bubble's color and the corresponding CTA share one reader-theme source. */
.works-section .work-card .comment-bubble:first-child.theme-male .comment-bubble-box,
.works-section .work-card.theme-male .comment-bubble:first-child .comment-bubble-box {
  background: #F4FBFE !important;
  border-color: #CFE4EC !important;
  color: #526F7E !important;
}
.works-section .work-card .comment-bubble:first-child.theme-female .comment-bubble-box,
.works-section .work-card.theme-female .comment-bubble:first-child .comment-bubble-box {
  background: #FFF7F2 !important;
  border-color: #F0CDC0 !important;
  color: #76574C !important;
}
.works-section .work-card.theme-male .comment-bubble:first-child .comment-bubble-box p {color:#526F7E !important;}
.works-section .work-card.theme-female .comment-bubble:first-child .comment-bubble-box p {color:#76574C !important;}

/* Three explicit areas: 5 avatars | complete label | circular arrow. */
.works-section .work-card .comment-fade.compact-fade {
  padding: 0 12px 10px !important;
  height: 88px !important;
  container-type: inline-size;
}
.works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta {
  box-sizing: border-box !important;
  position:relative !important;
  display:grid !important;
  grid-template-columns:max-content minmax(0,1fr) max-content !important;
  align-items:center !important;
  justify-items:start !important;
  gap:9px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:62px !important;
  padding:7px 10px !important;
  margin:0 !important;
  border:1.5px solid var(--comment-cta-border, #CFE4EC) !important;
  border-radius:999px !important;
  background:var(--comment-cta-surface,#FFFFFF) !important;
  box-shadow:none !important;
  text-decoration:none !important;
  color:#28353D !important;
  transition:background-color .2s ease,border-color .2s ease !important;
}
.works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta::before,
.works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta::after {content:none!important;display:none!important;}
.works-section .work-card .reader-comments-cta-faces {
  display:inline-flex !important;
  align-items:center !important;
  flex:none !important;
  min-width:0 !important;
  white-space:nowrap !important;
}
.works-section .work-card .reader-comments-cta-faces img {
  display:block !important;
  box-sizing:border-box !important;
  width:34px !important;
  height:34px !important;
  flex:0 0 auto !important;
  border:2px solid #FFFFFF !important;
  border-radius:50% !important;
  margin-left:-9px !important;
  box-shadow:none !important;
  object-fit:cover !important;
}
.works-section .work-card .reader-comments-cta-faces img:first-child {margin-left:0!important;}
.works-section .work-card .reader-comments-cta-label {
  display:block !important;
  min-width:0 !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  letter-spacing:-.025em !important;
  white-space:nowrap !important;
  overflow:visible !important;
  color:#28353D !important;
}
.works-section .work-card .reader-comments-cta-arrow {
  display:grid !important;
  place-items:center !important;
  justify-self:end !important;
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  background:var(--comment-cta-accent,#0D86A5) !important;
  color:#FFFFFF !important;
  font-family:system-ui,sans-serif !important;
  font-size:24px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:none !important;
  flex:none !important;
}
.works-section .work-card .reader-comments-cta:hover,
.works-section .work-card .reader-comments-cta:focus-visible {
  background:var(--first-comment-tint,#F4FBFE) !important;
  box-shadow:none !important;
}
.works-section .work-card .reader-comments-cta:focus-visible {
  outline:3px solid var(--comment-cta-accent) !important;
  outline-offset:3px !important;
}
/* Resize by ACTUAL card width rather than viewport width (three-column grid). */
@container (max-width: 420px) {
  .works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta {gap:7px!important;padding:7px 9px!important;min-height:57px!important;}
  .works-section .work-card .reader-comments-cta-faces img {width:30px!important;height:30px!important;margin-left:-9px!important;}
  .works-section .work-card .reader-comments-cta-label {font-size:12px!important;}
  .works-section .work-card .reader-comments-cta-arrow {width:38px!important;height:38px!important;font-size:21px!important;}
}
@container (max-width: 330px) {
  .works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta {gap:6px!important;padding:6px 8px!important;min-height:53px!important;}
  .works-section .work-card .reader-comments-cta-faces img {width:27px!important;height:27px!important;margin-left:-8px!important;}
  .works-section .work-card .reader-comments-cta-label {font-size:11.5px!important;letter-spacing:-.04em!important;}
  .works-section .work-card .reader-comments-cta-arrow {width:34px!important;height:34px!important;font-size:19px!important;}
}
@container (max-width: 280px) {
  .works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta {gap:4px!important;padding:6px 7px!important;}
  .works-section .work-card .reader-comments-cta-faces img {width:23px!important;height:23px!important;margin-left:-7px!important;}
  .works-section .work-card .reader-comments-cta-label {font-size:10.5px!important;}
  .works-section .work-card .reader-comments-cta-arrow {width:30px!important;height:30px!important;font-size:17px!important;}
}
@media (max-width:560px) {
  .works-section .work-card .comment-fade.compact-fade {height:72px!important;padding:0 9px 8px!important;}
}

/* On exceptionally narrow cards, preserve the entire CTA label on two lines. */
@container (max-width: 260px) {
  .works-section .work-card .reader-comments-cta-label {
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.25 !important;
  }
}


/* 推し読 v149 | restrained nav / Apple-inspired frosted tags / coherent CTAs */
/* Navigation labels are no longer split by decorative accent colors. */
.site-header .header-nav > a:not(.btn) {color:#28353D!important;}

/* Frosted translucent work tags over the cover artwork. */
.works-section .work-card .work-photo-link .pill,
.work-hero .work-hero-image-pill {
  background:rgba(255,255,255,.70)!important;
  color:#28353D!important;
  border:1px solid rgba(255,255,255,.76)!important;
  box-shadow:0 3px 14px rgba(40,53,61,.07),inset 0 1px 0 rgba(255,255,255,.38)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  text-shadow:none!important;
}
@supports not ((backdrop-filter:blur(5px)) or (-webkit-backdrop-filter:blur(5px))){
  .works-section .work-card .work-photo-link .pill,.work-hero .work-hero-image-pill{background:rgba(255,255,255,.90)!important;}
}

/* 4px smaller round arrow for the five-reader CTA, all container breakpoints. */
.works-section .work-card .reader-comments-cta-arrow{width:40px!important;height:40px!important;font-size:22px!important;}
@container (max-width:420px){.works-section .work-card .reader-comments-cta-arrow{width:34px!important;height:34px!important;font-size:19px!important;}}
@container (max-width:330px){.works-section .work-card .reader-comments-cta-arrow{width:30px!important;height:30px!important;font-size:17px!important;}}
@container (max-width:280px){.works-section .work-card .reader-comments-cta-arrow{width:26px!important;height:26px!important;font-size:15px!important;}}

/* 'noteを見る' now matches the clean filled blue 'noteで読む' button. */
.author-page .author-heading-row .author-note-pill,
.author-page .author-heading-row .author-note-pill:visited{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:9px!important;min-height:38px!important;
  padding:9px 18px!important;border-radius:999px!important;
  background:#00758F!important;border:1px solid #00758F!important;
  color:#FFFFFF!important;box-shadow:none!important;
  font-size:12px!important;font-weight:800!important;
  letter-spacing:.012em!important;white-space:nowrap!important;
}
.author-page .author-heading-row .author-note-pill span{font-size:14px!important;color:#FFFFFF!important;}
.author-page .author-heading-row .author-note-pill:hover,
.author-page .author-heading-row .author-note-pill:focus-visible{
  background:#005F78!important;border-color:#005F78!important;
  color:#FFFFFF!important;box-shadow:none!important;
}
@media(max-width:560px){
  .author-page .author-heading-row .author-note-pill{min-height:34px!important;padding:7px 13px!important;font-size:11px!important;}
}


/* v150 | CTA balance / mobile readers hero / stronger cover titles / solid directory button / gender-themed reader pages */
/* 1) Top card CTA balance: larger faces, label shifted right, slightly smaller arrow */
.works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta{
  grid-template-columns:176px minmax(0,1fr) 40px !important;
  gap:12px !important;
  padding:8px 12px !important;
}
.works-section .work-card .reader-comments-cta-faces img{width:38px !important;height:38px !important;margin-left:-10px !important;}
.works-section .work-card .reader-comments-cta-label{font-size:15px !important;justify-self:start !important;padding-left:6px !important;}
.works-section .work-card .reader-comments-cta-arrow{width:40px !important;height:40px !important;font-size:22px !important;}
@media (max-width:820px){
  .works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta{grid-template-columns:162px minmax(0,1fr) 38px !important;gap:10px !important;padding:8px 11px !important;}
  .works-section .work-card .reader-comments-cta-faces img{width:35px !important;height:35px !important;}
  .works-section .work-card .reader-comments-cta-label{font-size:14px !important;padding-left:4px !important;}
  .works-section .work-card .reader-comments-cta-arrow{width:38px !important;height:38px !important;font-size:20px !important;}
}
@media (max-width:560px){
  .works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta{grid-template-columns:142px minmax(0,1fr) 34px !important;gap:8px !important;padding:7px 10px !important;}
  .works-section .work-card .reader-comments-cta-faces img{width:31px !important;height:31px !important;margin-left:-9px !important;}
  .works-section .work-card .reader-comments-cta-label{font-size:12.5px !important;padding-left:2px !important;}
  .works-section .work-card .reader-comments-cta-arrow{width:34px !important;height:34px !important;font-size:18px !important;}
}

/* 2) Mobile readers hero: editorial accent no longer overlaps headline */
@media (max-width:700px){
  .reader-list-hero{padding:40px 0 32px !important;}
  .reader-list-hero .inner{display:flex;flex-direction:column;}
  .reader-list-hero .reader-list-hero-art{
    position:relative !important;
    top:auto !important; right:auto !important; bottom:auto !important;
    order:2;
    align-self:flex-end;
    max-width:74%;
    margin:-2px 4px 10px 0;
    transform:rotate(-7deg);
    font-size:12px !important;
    line-height:1.18 !important;
    opacity:.92 !important;
  }
  .reader-list-hero h1{order:3;margin:0 0 14px !important;}
  .reader-list-hero p:not(.eyebrow){order:4;}
  .reader-list-hero .reader-list-hero-art > b{font-size:16px !important;}
}

/* 3) Cover title +3px */
.works-section .work-card .work-cover h3.work-cover-title{font-size:25px !important;}
@media(max-width:560px){.works-section .work-card .work-cover h3.work-cover-title{font-size:23px !important;}}

/* 4) Reader directory button: blue filled with white text */
.reader-directory-button{background:#0D86A5 !important;border-color:#0D86A5 !important;color:#FFFFFF !important;box-shadow:none !important;}
.reader-directory-button:hover{background:#0A7894 !important;border-color:#0A7894 !important;color:#FFFFFF !important;transform:translateY(-1px) !important;}
.reader-directory-button span{color:#FFFFFF !important;}

/* 5) Reader page actions & gender theme */
.reader-profile-page .profile-copy .hero-actions{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:14px !important;}
.reader-profile-page .profile-copy .hero-actions > .btn-primary,
.reader-profile-page .profile-copy .hero-actions > .reader-favorite{flex:0 1 auto !important;min-width:min(100%, 320px) !important;}
.reader-profile-page .reader-oshi-hint{width:100% !important;margin:10px auto 0 !important;text-align:center !important;max-width:36ch !important;}
@media (max-width:760px){
  .reader-profile-page .profile-copy .hero-actions > .btn-primary,
  .reader-profile-page .profile-copy .hero-actions > .reader-favorite{width:100% !important;}
}
.reader-profile-page.theme-male .profile-role,
.reader-profile-page.theme-male .profile-intro,
.reader-profile-page.theme-male .reader-oshi-hint,
.reader-profile-page.theme-male .stack-kicker,
.reader-profile-page.theme-male .stack-comment,
.reader-profile-page.theme-male .other-reader-copy span,
.reader-profile-page.theme-male .other-reader-copy em{color:#5D7684 !important;}
.reader-profile-page.theme-male .profile-trait{background:#F5FAFC !important;border-color:#CFE4EC !important;color:#0D86A5 !important;}
.reader-profile-page.theme-male .btn.btn-primary{background:#0D86A5 !important;border-color:#0D86A5 !important;color:#FFFFFF !important;box-shadow:0 12px 24px rgba(13,134,165,.18) !important;}
.reader-profile-page.theme-male .btn.btn-primary:hover{background:#0A7894 !important;border-color:#0A7894 !important;}
.reader-profile-page.theme-male .reader-favorite,.reader-profile-page.theme-male .reader-oshi{background:#FFFFFF !important;border-color:#CFE4EC !important;color:#0D86A5 !important;box-shadow:none !important;}
.reader-profile-page.theme-male .reader-favorite .engagement-heart,.reader-profile-page.theme-male .reader-oshi .engagement-heart{color:#0D86A5 !important;}
.reader-profile-page.theme-male .reader-favorite .engagement-count,.reader-profile-page.theme-male .reader-oshi .engagement-count{border-color:#CFE4EC !important;background:#F5FAFC !important;color:#0D86A5 !important;box-shadow:none !important;}
.reader-profile-page.theme-male .reader-works-head h2,.reader-profile-page.theme-male .other-readers-head h2{color:#28353D !important;}
.reader-profile-page.theme-male .other-reader-arrow{color:#0D86A5 !important;}

.reader-profile-page.theme-female .profile-role,
.reader-profile-page.theme-female .profile-intro,
.reader-profile-page.theme-female .reader-oshi-hint,
.reader-profile-page.theme-female .stack-kicker,
.reader-profile-page.theme-female .stack-comment,
.reader-profile-page.theme-female .other-reader-copy span,
.reader-profile-page.theme-female .other-reader-copy em{color:#8A6558 !important;}
.reader-profile-page.theme-female .profile-trait{background:#FFF6F1 !important;border-color:#E9C7B9 !important;color:#BD674A !important;}
.reader-profile-page.theme-female .btn.btn-primary{background:linear-gradient(180deg,#BF5C3F 0%, #A94730 100%) !important;border-color:#BF5C3F !important;color:#FFFFFF !important;box-shadow:0 12px 24px rgba(191,92,63,.18) !important;}
.reader-profile-page.theme-female .btn.btn-primary:hover{background:linear-gradient(180deg,#B25136 0%, #973F2A 100%) !important;border-color:#973F2A !important;}
.reader-profile-page.theme-female .reader-favorite,.reader-profile-page.theme-female .reader-oshi{background:#FFFFFF !important;border-color:#E9C7B9 !important;color:#BD674A !important;box-shadow:none !important;}
.reader-profile-page.theme-female .reader-favorite .engagement-heart,.reader-profile-page.theme-female .reader-oshi .engagement-heart{color:#D07151 !important;}
.reader-profile-page.theme-female .reader-favorite .engagement-count,.reader-profile-page.theme-female .reader-oshi .engagement-count{border-color:#E9C7B9 !important;background:#FFF6F1 !important;color:#BD674A !important;box-shadow:none !important;}
.reader-profile-page.theme-female .reader-works-head h2,.reader-profile-page.theme-female .other-readers-head h2{color:#5A3E36 !important;}
.reader-profile-page.theme-female .other-reader-arrow{color:#D07151 !important;}


/* v151 — reader profile color contract, smaller header-only logo, flat header CTA. */
/* The footer logo is intentionally not modified here. */
.site-header .brand-logo-image { width:88px !important; height:auto !important; }
@media (max-width:820px){ .site-header .brand-logo-image { width:70px !important; } }
@media (max-width:600px){ .site-header .brand-logo-image { width:58px !important; } }

/* Keep the main nav CTA solid and shadow-free, including focus and hover. */
.site-header .header-nav a.header-cta-desktop,
.site-header .header-nav a.header-cta-desktop:hover,
.site-header .header-nav a.header-cta-desktop:focus-visible,
.site-header .header-mobile-actions a.header-cta-mobile,
.site-header .header-mobile-actions a.header-cta-mobile:hover,
.site-header .header-mobile-actions a.header-cta-mobile:focus-visible {
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;
}

/* One shared set of reader-profile tokens for all the small UI elements. */
.reader-profile-page.theme-female {
  --reader-accent:#B34E36;
  --reader-accent-hover:#973E29;
  --reader-bg:#FFF6F1;
  --reader-bg-card:#FFFCFA;
  --reader-border:#F0C9BA;
  --reader-copy:#7E5B50;
  --reader-decor:rgba(232,121,89,.085);
}
.reader-profile-page.theme-male {
  --reader-accent:#006F8C;
  --reader-accent-hover:#005F78;
  --reader-bg:#EFF9FC;
  --reader-bg-card:#FBFEFF;
  --reader-border:#CEE5EE;
  --reader-copy:#546F7D;
  --reader-decor:rgba(1,162,206,.075);
}

/* History cards used to keep the old blue chips even on coral pages. */
.reader-profile-page .stack-card,
.reader-profile-page .stack-card:nth-child(even) {
  border-color:var(--reader-border) !important;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--reader-bg-card) 100%) !important;
  box-shadow:0 13px 30px rgba(40,53,61,.055) !important;
}
.reader-profile-page .stack-card::before,
.reader-profile-page .stack-card:nth-child(even)::before {
  background:var(--reader-decor) !important;
}
.reader-profile-page .stack-card .stack-kicker,
.reader-profile-page .stack-card:nth-child(even) .stack-kicker {
  color:var(--reader-accent) !important;
  background:var(--reader-bg) !important;
  border:1px solid var(--reader-border) !important;
  letter-spacing:.055em !important;
}
.reader-profile-page .stack-card h3 > a:first-child {color:#28353D !important;}
.reader-profile-page .stack-card h3 > a:first-child:hover {color:var(--reader-accent) !important;}
.reader-profile-page .stack-card h3 a.stack-author-link,
.reader-profile-page .stack-card h3 a.stack-author-link:visited {
  color:var(--reader-accent) !important;
  background:var(--reader-bg) !important;
  border-color:var(--reader-border) !important;
  box-shadow:none !important;
}
.reader-profile-page .stack-card h3 a.stack-author-link:hover,
.reader-profile-page .stack-card h3 a.stack-author-link:focus-visible {
  color:var(--reader-accent-hover) !important;
  background:var(--reader-bg) !important;
  border-color:var(--reader-accent) !important;
}
.reader-profile-page .stack-card h3 a.stack-author-link:focus-visible,
.reader-profile-page .stack-link:focus-visible {
  outline:2px solid var(--reader-accent) !important;
  outline-offset:3px !important;
}
.reader-profile-page .stack-card .stack-comment {color:var(--reader-copy) !important;}
.reader-profile-page .stack-card > a.stack-link,
.reader-profile-page .stack-card > a.stack-link:visited {
  color:var(--reader-accent) !important;
  background:#FFFFFF !important;
  border:1px solid var(--reader-border) !important;
  box-shadow:none !important;
}
.reader-profile-page .stack-card > a.stack-link:hover,
.reader-profile-page .stack-card > a.stack-link:focus-visible {
  color:var(--reader-accent-hover) !important;
  border-color:var(--reader-accent) !important;
  background:var(--reader-bg) !important;
}

/* Profile header, gallery, supporting links, and pagination use the same hue. */
.reader-profile-page .profile-roman,
.reader-profile-page .profile-role,
.reader-profile-page .profile-copy .eyebrow,
.reader-profile-page .reader-works-head .eyebrow,
.reader-profile-page .other-readers-head .eyebrow,
.reader-profile-page .other-reader-copy span,
.reader-profile-page .other-reader-copy em,
.reader-profile-page .other-reader-arrow {
  color:var(--reader-accent) !important;
}
.reader-profile-page .profile-thumb.is-active {
  box-shadow:inset 0 0 0 2px var(--reader-accent) !important;
}
.reader-profile-page .profile-trait,
.reader-profile-page .profile-trait:nth-child(3n+2),
.reader-profile-page .profile-trait:nth-child(3n) {
  color:var(--reader-accent) !important;
  background:var(--reader-bg) !important;
  border-color:var(--reader-border) !important;
}
.reader-profile-page .other-reader-card,
.reader-profile-page .other-reader-card:nth-child(even) {
  background:#FFFFFF !important;
  border-color:var(--reader-border) !important;
}
.reader-profile-page .other-reader-card:hover {border-color:var(--reader-accent) !important;}
.reader-profile-page .other-readers-all .reader-directory-button {
  background:var(--reader-accent) !important;
  border-color:var(--reader-accent) !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
}
.reader-profile-page .other-readers-all .reader-directory-button:hover {background:var(--reader-accent-hover) !important;}
.reader-profile-page .pagination a {border-color:var(--reader-border) !important;color:var(--reader-accent) !important;}
.reader-profile-page .pagination a:hover {background:var(--reader-bg) !important;}
.reader-profile-page .pagination .current {background:var(--reader-accent) !important;border-color:var(--reader-accent) !important;color:#FFFFFF !important;}


/* v152 | keep reader action buttons horizontal, tighten CTA label, inline tiny profile chip */
/* 1) Reader page actions: always side-by-side, hint centered beneath */
.reader-profile-page .profile-copy .hero-actions{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:stretch!important;gap:14px!important;}
.reader-profile-page .profile-copy .hero-actions > .btn-primary,
.reader-profile-page .profile-copy .hero-actions > .reader-favorite{flex:1 1 0!important;min-width:0!important;width:calc(50% - 7px)!important;max-width:320px!important;}
.reader-profile-page .profile-copy .hero-actions > .btn-primary{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;}
.reader-profile-page .profile-copy .reader-favorite{justify-content:center!important;}
.reader-profile-page .reader-oshi-hint{display:block!important;width:100%!important;max-width:32ch!important;margin:14px auto 0!important;text-align:center!important;}
@media (max-width:560px){
  .reader-profile-page .profile-copy .hero-actions{gap:10px!important;}
  .reader-profile-page .profile-copy .hero-actions > .btn-primary,
  .reader-profile-page .profile-copy .hero-actions > .reader-favorite{width:calc(50% - 5px)!important;padding-left:12px!important;padding-right:12px!important;font-size:12px!important;}
  .reader-profile-page .profile-copy .reader-favorite{gap:8px!important;}
  .reader-profile-page .profile-copy .reader-favorite .engagement-count{min-width:25px!important;height:25px!important;padding:0 7px!important;}
}

/* 2) 5人の感想を見る: smaller label, closer to icons, avoid arrow overlap */
.works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta{grid-template-columns:178px minmax(0,1fr) 40px!important;gap:8px!important;padding:8px 12px!important;}
.works-section .work-card .reader-comments-cta-label{font-size:13px!important;line-height:1!important;letter-spacing:0!important;justify-self:start!important;padding-left:0!important;white-space:nowrap!important;}
.works-section .work-card .reader-comments-cta-faces{justify-self:start!important;}
.works-section .work-card .reader-comments-cta-arrow{width:40px!important;height:40px!important;font-size:21px!important;}
@media (max-width:820px){
  .works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta{grid-template-columns:164px minmax(0,1fr) 38px!important;gap:7px!important;padding:8px 11px!important;}
  .works-section .work-card .reader-comments-cta-label{font-size:12px!important;}
  .works-section .work-card .reader-comments-cta-arrow{width:38px!important;height:38px!important;font-size:20px!important;}
}
@media (max-width:560px){
  .works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta{grid-template-columns:146px minmax(0,1fr) 34px!important;gap:6px!important;padding:7px 10px!important;}
  .works-section .work-card .reader-comments-cta-label{font-size:11px!important;}
  .works-section .work-card .reader-comments-cta-arrow{width:34px!important;height:34px!important;font-size:18px!important;}
}

/* 3) Work comment reader header: tiny gray Profile chip next to name */
.work-comment-card .work-comment-reader-copy .work-comment-reader-headline{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;margin:0 0 4px!important;}
.work-comment-card .work-comment-reader-copy .work-comment-reader-headline h3{margin:0!important;}
.work-comment-card .work-comment-reader-copy .work-comment-page-inline{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:18px!important;min-height:18px!important;padding:0 7px!important;border-radius:999px!important;background:#F4F6F7!important;border:1px solid #D9E0E4!important;color:#7B8992!important;font-size:9px!important;font-weight:700!important;letter-spacing:.04em!important;line-height:1!important;box-shadow:none!important;text-transform:none!important;}
.work-comment-card .work-comment-reader-copy .work-comment-page-inline:hover{background:#EEF2F4!important;color:#5E6A72!important;border-color:#CED7DD!important;}
.work-comment-card .work-comment-reader-copy .work-comment-reader-controls{margin-top:8px!important;}
.work-comment-card .work-comment-reader-copy .work-comment-reader-controls .work-comment-page{display:none!important;}

/* v153 — OshiDoku Letters: quiet encouragement from opted-in favorite readers */
.site-header .header-nav a.header-letters-link{white-space:nowrap;position:relative;gap:5px;display:inline-flex;align-items:center;}
.header-letters-count{display:inline-flex;align-items:center;justify-content:center;background:#C86C51;color:#FFFFFF;border-radius:999px;font-size:9px;font-weight:800;min-width:19px;height:19px;padding:0 4px;line-height:1;}
.header-letters-count[hidden]{display:none!important;}
.header-mobile-letter{display:none;position:relative;flex:0 0 36px;height:36px;align-items:center;justify-content:center;background:#FFF6F1;border:1px solid #F1D9CE;border-radius:50%;color:#BD674A!important;font-size:18px;text-decoration:none;}
.header-mobile-letter .header-letters-count{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;font-size:9px;}
@media (min-width:821px) and (max-width:1180px){.site-header .header-nav{gap:2px!important;font-size:12px!important;}.site-header .header-nav a{padding:9px 7px!important;}.site-header .header-nav a.header-cta-desktop{padding:10px 11px!important;font-size:11px!important;}}
@media(max-width:820px){.header-mobile-letter{display:inline-flex!important;}.header-mobile-actions{gap:9px!important;}.site-header .header-nav a.header-letters-link{width:100%;}}
@media(max-width:370px){.header-mobile-letter{width:31px;height:31px;flex-basis:31px;}.header-mobile-actions{gap:6px!important;}}
.letters-page{background:#F8FBFC;}
.letters-hero{position:relative;padding:70px 0 68px;background:radial-gradient(ellipse at 80% 20%,rgba(255,232,221,.46),transparent 42%),linear-gradient(140deg,#FFFFFF 0%,#F5FAFC 95%);border-bottom:1px solid #E3EDF2;overflow:hidden;}
.letters-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:55px;max-width:1130px;}
.letters-heading{max-width:720px;}
.letters-heading .eyebrow{font-size:11px;letter-spacing:.19em;color:#7B91A1;font-weight:800;}
.letters-heading h1{font-size:clamp(34px,4.2vw,54px);line-height:1.35;letter-spacing:-.055em;color:#28353D;margin:15px 0 24px;font-weight:900;}
.letters-heading h1 span{color:#006F8C;}
.letters-heading>p:not(.eyebrow){font-size:16px;line-height:2;color:#5C7180;max-width:650px;}
.letters-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px;}
.letters-chips span{font-size:11px;font-weight:700;color:#6D8190;background:#FFFFFF;border:1px solid #DEEAF0;border-radius:999px;padding:8px 14px;}
.letters-envelope{position:relative;aspect-ratio:1.28;background:#FFFFFF;border:1px solid #EFD3C7;border-radius:28px;box-shadow:0 27px 65px rgba(163,108,86,.11);display:flex;flex-direction:column;justify-content:space-between;padding:23px 25px;transform:rotate(5deg);overflow:hidden;}
.letters-envelope::before{content:"";position:absolute;left:0;right:0;top:32%;height:1px;background:#F0D8CF;transform:rotate(24deg);transform-origin:left center;}
.letters-envelope::after{content:"";position:absolute;left:0;right:0;top:32%;height:1px;background:#F0D8CF;transform:rotate(-24deg);transform-origin:right center;}
.letters-envelope-top{z-index:1;letter-spacing:.22em;color:#8A9DA7;font-size:11px;font-weight:800;}
.letters-envelope-heart{z-index:1;align-self:center;font-size:80px;line-height:1;color:#D67C60;font-weight:300;}
.letters-envelope-bottom{z-index:1;color:#8B6D61;font-size:12px;font-weight:600;text-align:right;}
.letters-content{padding:60px 0 100px;}
.letters-layout{display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:30px;align-items:start;max-width:1140px;}
.letters-main{min-width:0;}
.letters-section-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin:0 0 25px;}
.letters-section-head .eyebrow{font-size:10px;letter-spacing:.14em;color:#8197A4;font-weight:800;}
.letters-section-head h2{margin:6px 0 0;font-size:26px;color:#28353D;letter-spacing:-.03em;}
.letters-unread-chip{border-radius:999px;background:#FFF1EA;color:#B34E36;padding:6px 12px;font-size:11px;font-weight:800;}
.letters-list{display:flex;flex-direction:column;gap:20px;}
.letters-card{--letter-color:#0D86A5;--letter-border:#D7E8F0;--letter-bg:#F7FCFE;border:1px solid var(--letter-border);background:#FFFFFF;border-radius:26px;padding:26px 30px;box-shadow:0 14px 36px rgba(40,53,61,.035);}
.letters-card.theme-female{--letter-color:#C56D50;--letter-border:#F0D0C4;--letter-bg:#FFF7F2;}
.letters-card.theme-male{--letter-color:#0D86A5;--letter-border:#CEE4ED;--letter-bg:#F3FAFD;}
.letters-card.is-new{box-shadow:0 14px 42px rgba(40,53,61,.075);}
.letters-card-head{display:flex;justify-content:space-between;align-items:center;gap:15px;}
.letters-persona{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-width:0;color:#28353D!important;}
.letters-persona img{width:55px;height:55px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #FFFFFF;box-shadow:0 3px 11px rgba(40,53,61,.08);}
.letters-persona span{display:flex;flex-direction:column;gap:3px;}
.letters-persona strong{font-size:17px;white-space:nowrap;}
.letters-persona small{color:#748893;font-size:11px;}
.letters-card-meta{display:flex;align-items:center;gap:8px;flex:none;}
.letters-card-meta time{font-size:10px;color:#82939E;}
.letters-new-dot{font-weight:800;font-size:9px;letter-spacing:.08em;background:#FFF2EC;color:#C56D50;border-radius:999px;padding:5px 8px;}
.letters-message{margin:20px 0 10px;padding:24px 26px;font-size:15px;line-height:2.15;border-radius:18px;background:var(--letter-bg);color:#40535E;overflow-wrap:anywhere;}
.letters-card.theme-female .letters-message{color:#72564B;}
.letters-signature{font-size:12px;font-weight:700;text-align:right;color:var(--letter-color);margin:8px 0 0;}
.letters-history-note{font-size:11px;color:#82929A;line-height:1.8;margin:20px 0 0;}
.letters-empty{border:1px dashed #CDE3EA;border-radius:26px;background:#FFFFFF;padding:68px 25px;text-align:center;}
.letters-empty-icon{font-size:38px;color:#0D86A5;margin-bottom:10px;}
.letters-empty h3{font-size:20px;color:#28353D;margin:10px 0;}
.letters-empty p{max-width:430px;margin:12px auto 22px;line-height:1.9;font-size:13px;color:#728893;}
.letters-find-readers{display:inline-flex;background:#006F8C;color:#FFFFFF!important;text-decoration:none;border-radius:999px;padding:12px 22px;font-size:13px;font-weight:800;}
.letters-settings,.letters-favorites{border:1px solid #E1EAEE;background:#FFFFFF;border-radius:25px;padding:25px;box-shadow:0 12px 32px rgba(40,53,61,.035);}
.letters-settings .eyebrow{color:#8297A0;font-size:10px;letter-spacing:.15em;}
.letters-settings h2{font-size:22px;margin:8px 0 18px;}
.letters-status-line{display:inline-flex;gap:9px;align-items:center;font-size:12px;font-weight:700;color:#5E7380;margin-bottom:22px;}
.letters-status-dot{width:8px;height:8px;background:#B8C8CF;border-radius:50%;}
.letters-status-dot.is-on{background:#0D86A5;box-shadow:0 0 0 3px #E8F6FA;}
.letters-setting-label{display:block;font-size:12px;font-weight:700;color:#5C7180;margin:0 0 9px;}
.letters-frequency{display:block;appearance:auto;width:100%;padding:13px 14px;border:1px solid #D9E7ED;color:#28353D;background:#FAFDFE;border-radius:12px;font:inherit;font-size:13px;margin-bottom:15px;}
.letters-toggle{display:block;width:100%;border:0;background:#006F8C;border-radius:999px;padding:15px 11px;color:#FFFFFF;font-size:13px;font-weight:800;cursor:pointer;transition:background .15s ease;}
.letters-toggle:hover{background:#005F78;}
.letters-toggle.is-active{background:#FFFFFF;border:1px solid #D8E7EF;color:#5C7180;}
.letters-toggle:disabled,.letters-frequency:disabled{opacity:.6;cursor:wait;}
.letters-feedback{font-size:11px;color:#B34E36;margin:9px 0 0;min-height:1em;line-height:1.7;}
.letters-setting-footnote{font-size:11px;line-height:1.85;color:#788995;margin:12px 0 0;}
.letters-favorites{margin-top:18px;}
.letters-favorites-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:18px;}
.letters-favorites-heading h3{font-size:16px;margin:0;}
.letters-favorites-heading>span{font-size:12px;color:#728895;}
.letters-favorite-list{display:flex;flex-direction:column;gap:11px;}
.letters-favorite-item{display:flex;align-items:center;gap:10px;text-decoration:none;color:#28353D!important;font-size:12px;font-weight:700;}
.letters-favorite-item img{width:37px;height:37px;flex:none;border-radius:50%;object-fit:cover;}
.letters-favorite-arrow{margin-left:auto;color:#88A1AF;}
.letters-favorite-item.theme-female .letters-favorite-arrow{color:#C56D50;}
.letters-add-reader{display:block;text-align:center;margin-top:20px;font-size:12px;font-weight:800;color:#006F8C!important;text-decoration:none;border-top:1px solid #ECF2F5;padding-top:15px;}
.letters-favorite-empty{font-size:12px;color:#8296A0;line-height:1.8;}
@media(max-width:1020px){.letters-layout{grid-template-columns:minmax(0,1fr) 290px;gap:20px;}.letters-hero-inner{grid-template-columns:minmax(0,1fr) 240px;gap:25px;}}
@media(max-width:800px){.letters-hero{padding:42px 0 46px;}.letters-hero-inner{grid-template-columns:1fr;}.letters-envelope{display:none;}.letters-layout{grid-template-columns:1fr;}.letters-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:14px;}.letters-favorites{margin:0;}.letters-content{padding:40px 0 70px;}}
@media(max-width:590px){.letters-sidebar{display:flex;flex-direction:column;}.letters-hero{padding:28px 0 35px;}.letters-heading h1{font-size:32px;margin-bottom:14px;}.letters-heading>p:not(.eyebrow){font-size:13px;}.letters-chips{gap:6px;}.letters-chips span{font-size:9px;padding:7px 10px;}.letters-content{padding:29px 0 65px;}.letters-section-head h2{font-size:20px;}.letters-card{padding:18px 17px;border-radius:21px;}.letters-persona img{width:46px;height:46px;}.letters-persona strong{font-size:14px;}.letters-persona small{font-size:10px;}.letters-card-meta{flex-direction:column;align-items:flex-end;gap:4px;}.letters-card-meta time{font-size:9px;}.letters-message{font-size:13px;line-height:2;padding:16px;margin:15px 0 7px;}.letters-settings,.letters-favorites{padding:22px;}}
@media(prefers-reduced-motion:reduce){.letters-toggle{transition:none;}}

/* v154 | compact editorial titles; CTA label should never sit below the arrow */
/* Work cover titles: -3px from v153 */
.works-section .work-card .work-cover h3.work-cover-title {font-size:22px!important;}
@media (max-width:560px){
  .works-section .work-card .work-cover h3.work-cover-title{font-size:20px!important;}
}

/* Allow the avatar row to occupy only the pixels it actually draws.
   Fixed 178px columns in v150+ caused the text to be squeezed. */
.works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta {
  display:grid!important;
  grid-template-columns:max-content minmax(0,1fr) max-content!important;
  gap:5px!important;
  padding:7px 10px!important;
  justify-items:start!important;
  align-items:center!important;
  overflow:visible!important;
}
.works-section .work-card .reader-comments-cta-faces{
  width:max-content!important;
  min-width:0!important;
  max-width:none!important;
  display:inline-flex!important;
  flex:0 0 auto!important;
  justify-self:start!important;
}
.works-section .work-card .reader-comments-cta-faces img{
  width:38px!important;
  height:38px!important;
  margin-left:-14px!important;
}
.works-section .work-card .reader-comments-cta-faces img:first-child{margin-left:0!important;}
.works-section .work-card .reader-comments-cta-label{
  min-width:0!important;
  white-space:nowrap!important;
  font-size:12px!important;
  letter-spacing:-.055em!important;
  padding:0!important;
  margin:0!important;
  justify-self:start!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.works-section .work-card .reader-comments-cta-arrow{
  position:static!important;
  width:36px!important;
  height:36px!important;
  justify-self:end!important;
  font-size:20px!important;
  flex:0 0 36px!important;
}
@container (max-width:360px){
  .works-section .work-card .reader-comments-cta-faces img{width:34px!important;height:34px!important;margin-left:-13px!important;}
  .works-section .work-card .reader-comments-cta-label{font-size:11.5px!important;}
  .works-section .work-card .reader-comments-cta-arrow{width:34px!important;height:34px!important;font-size:19px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta{padding:7px 9px!important;gap:4px!important;}
}
@container (max-width:310px){
  .works-section .work-card .reader-comments-cta-faces img{width:30px!important;height:30px!important;margin-left:-12px!important;}
  .works-section .work-card .reader-comments-cta-label{font-size:10.5px!important;letter-spacing:-.065em!important;}
  .works-section .work-card .reader-comments-cta-arrow{width:30px!important;height:30px!important;font-size:17px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta{padding:6px 7px!important;gap:3px!important;}
}
@container (max-width:250px){
  .works-section .work-card .reader-comments-cta-faces img{width:26px!important;height:26px!important;margin-left:-10px!important;}
  .works-section .work-card .reader-comments-cta-label{font-size:10px!important;white-space:normal!important;line-height:1.2!important;overflow-wrap:anywhere!important;}
  .works-section .work-card .reader-comments-cta-arrow{width:28px!important;height:28px!important;font-size:15px!important;}
}


/* v155 – On-demand letters, clean envelope, type-in presentation */
.letters-envelope::before,.letters-envelope::after{display:none!important;content:none!important;}
.letters-unread-chip[hidden]{display:none!important;}
.letters-receive-panel{display:flex;align-items:center;flex-wrap:wrap;gap:15px 24px;padding:23px 24px;margin-bottom:24px;background:#FFFFFF;border:1px solid #E7EDEF;border-radius:24px;box-shadow:0 10px 25px rgba(40,53,61,.035);}
.letters-receive-copy{display:flex;flex-direction:column;gap:7px;flex:1 1 210px;}
.letters-receive-copy strong{font-size:17px;letter-spacing:-.025em;color:#28353D;}
.letters-receive-copy span{font-size:12px;line-height:1.8;color:#718490;}
.letters-receive-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:0 0 auto;min-height:54px;padding:13px 24px;background:#006F8C;border:1px solid #006F8C;color:#FFFFFF;font-size:14px;font-weight:800;border-radius:999px;cursor:pointer;transition:background .2s ease, transform .2s ease;}
.letters-receive-button:hover:not(:disabled){background:#005F78;transform:translateY(-1px);}
.letters-receive-button:focus-visible{outline:3px solid #91D5E6;outline-offset:3px;}
.letters-receive-button:disabled{background:#A6BCC5;border-color:#A6BCC5;cursor:not-allowed;}
.letters-receive-hint{margin:0;width:100%;font-size:11px;color:#C1745B;}
.letters-receive-panel .letters-feedback{width:100%;margin:0;}
.letters-nickname{display:block;width:100%;box-sizing:border-box;border:1px solid #D9E7ED;border-radius:13px;padding:13px 14px;background:#FBFEFF;color:#28353D;font:inherit;font-size:14px;outline-offset:2px;}
.letters-nickname:focus-visible{outline:2px solid #57ADC4;}
.letters-name-copy{font-size:12px;line-height:1.8;color:#708390;margin:0 0 20px;}
.letters-save-name{display:block;margin-top:14px;border:1px solid #D6E7ED;background:#FFFFFF;color:#006F8C;font-weight:800;font-size:12px;padding:10px 15px;border-radius:999px;cursor:pointer;}
.letters-save-name:hover{background:#F4FBFE;}
.letters-save-name:disabled{opacity:.55;cursor:wait;}
.letters-card.is-appearing{animation:odLetterReveal .45s ease-out both;}
@keyframes odLetterReveal{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.letters-message.is-writing{min-height:85px;}
.letters-typing-dots{display:inline-flex;align-items:center;gap:5px;padding:0 0 0 3px;vertical-align:middle;}
.letters-typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--letter-color);animation:odDotBounce 1.1s ease-in-out infinite;}
.letters-typing-dots i:nth-child(2){animation-delay:.15s;}
.letters-typing-dots i:nth-child(3){animation-delay:.3s;}
@keyframes odDotBounce{0%,65%,100%{transform:translateY(0);opacity:.3;}30%{transform:translateY(-4px);opacity:1;}}
.letters-type-caret{display:inline-block;width:2px;height:1em;margin-left:2px;background:var(--letter-color);vertical-align:-.16em;animation:odCaret .7s step-end infinite;}
@keyframes odCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.letters-history-note{margin-top:17px;}
@media(max-width:590px){.letters-receive-panel{padding:20px 17px;gap:14px;margin-bottom:19px;}.letters-receive-copy{flex-basis:100%;}.letters-receive-button{width:100%;}.letters-receive-copy strong{font-size:16px;}}
@media(prefers-reduced-motion:reduce){.letters-card.is-appearing,.letters-typing-dots i,.letters-type-caret{animation:none!important;}}


/* =====================================================================
   v156 — soft coral letters; legible work CTA; compact header letter icon
   ===================================================================== */

/* Reader action note: one centered line, including on narrow phones. */
.reader-profile-page .reader-oshi-hint {
  display:block !important;
  margin:15px 0 0 !important;
  padding:0 1px !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  text-align:center !important;
  white-space:nowrap !important;
  font-size:clamp(10px, 1.05vw, 13px) !important;
  letter-spacing:-.025em !important;
  line-height:1.6 !important;
}
@media (max-width:700px) {
  .reader-profile-page .reader-oshi-hint {font-size:clamp(10px,2.7vw,12px) !important;letter-spacing:-.035em !important;}
}

/* The cover title is reduced by precisely 3px from v154 (22/20). */
.works-section .work-card .work-cover h3.work-cover-title {font-size:19px !important;line-height:1.46 !important;}
@media(max-width:560px) {
  .works-section .work-card .work-cover h3.work-cover-title {font-size:17px !important;}
}

/* CTA label +3px at each respective responsive width.  Keep arrows in an
   independent last column and overlap the faces a touch more where necessary. */
.works-section .work-card .comment-fade.compact-fade > a.reader-comments-cta {
  display:grid !important;
  grid-template-columns:max-content minmax(0,1fr) max-content !important;
  column-gap:4px !important;
  overflow:hidden !important;
  padding:7px 9px !important;
}
.works-section .work-card .reader-comments-cta-faces {min-width:0 !important;width:max-content !important;}
.works-section .work-card .reader-comments-cta-faces img {width:38px !important;height:38px !important;margin-left:-16px !important;}
.works-section .work-card .reader-comments-cta-faces img:first-child{margin-left:0 !important;}
.works-section .work-card .reader-comments-cta-label {
  padding:0 !important;
  margin:0 !important;
  font-size:15px !important;
  letter-spacing:-.07em !important;
  white-space:nowrap !important;
  min-width:0 !important;
  justify-self:start !important;
  overflow:visible !important;
  line-height:1.25 !important;
}
.works-section .work-card .reader-comments-cta-arrow{position:static !important;justify-self:end !important;width:36px !important;height:36px !important;}
@container (max-width:360px){
  .works-section .work-card .reader-comments-cta-faces img{width:34px !important;height:34px !important;margin-left:-15px !important;}
  .works-section .work-card .reader-comments-cta-label{font-size:14.5px !important;}
  .works-section .work-card .reader-comments-cta-arrow{width:34px !important;height:34px !important;}
}
@container (max-width:310px){
  .works-section .work-card .reader-comments-cta-faces img{width:30px !important;height:30px !important;margin-left:-14px !important;}
  .works-section .work-card .reader-comments-cta-label{font-size:13.5px !important;}
  .works-section .work-card .reader-comments-cta-arrow{width:30px !important;height:30px !important;}
}
@container (max-width:250px){
  .works-section .work-card .reader-comments-cta-faces img{width:26px !important;height:26px !important;margin-left:-13px !important;}
  .works-section .work-card .reader-comments-cta-label{font-size:12px !important;line-height:1.18 !important;white-space:normal !important;}
  .works-section .work-card .reader-comments-cta-arrow{width:28px !important;height:28px !important;}
}

/* Header logo: only phones grow 4px; footer logo remains untouched. */
@media(max-width:600px){.site-header .brand-logo-image {width:62px !important;}}

/* Vector envelope with discreet heart seal, used consistently in navigation
   and on the letters page; no platform-specific emoji rendering. */
.letter-line-icon{display:inline-block;flex:0 0 auto;width:18px;height:18px;overflow:visible;vertical-align:middle;}
.site-header .header-nav .letter-line-icon{width:15px;height:15px;color:#C46E52;}
.site-header .header-mobile-letter{
  background:#FFF9F5 !important;border:1px solid #EDCABA !important;
  color:#BF6A4F !important;box-shadow:none !important;
}
.header-mobile-letter .letter-line-icon{width:20px;height:20px;}
.header-mobile-letter:hover,.header-mobile-letter:focus-visible{background:#FFEFE6 !important;border-color:#DFA892 !important;}

/* Page-wide warm palette: retain reader-specific individual cards while
   changing every surrounding letter UI from residual blue to coral. */
.letters-page {
  --od-coral:#C36A4D;
  --od-coral-deep:#AA5037;
  --od-coral-pale:#FFF5F0;
  --od-coral-border:#F0D2C4;
  --od-coral-text:#805F53;
  background:linear-gradient(180deg,#FFFDFC 0%,#FFFAF7 55%,#FFFFFF 100%) !important;
}
.letters-page .letters-hero{
  background:radial-gradient(ellipse at 84% 13%,rgba(248,201,178,.34),transparent 46%),
  linear-gradient(126deg,#FFFDFB 0%,#FFF5EF 98%) !important;
  border-bottom:1px solid #F0D9CE !important;
}
.letters-page .letters-heading .eyebrow,
.letters-page .letters-section-head .eyebrow,
.letters-page .letters-settings .eyebrow{color:#B9755E !important;}
.letters-page .letters-heading h1,
.letters-page .letters-section-head h2,
.letters-page .letters-settings h2,
.letters-page .letters-favorites-heading h3 {color:#493A35 !important;}
.letters-page .letters-heading h1 span{color:var(--od-coral) !important;}
.letters-page .letters-heading > p:not(.eyebrow),
.letters-page .letters-receive-copy span,
.letters-page .letters-name-copy,
.letters-page .letters-setting-footnote,
.letters-page .letters-history-note,
.letters-page .letters-favorite-empty,
.letters-page .letters-empty p {color:var(--od-coral-text) !important;}
.letters-page .letters-chips span{
  background:rgba(255,255,255,.75) !important;
  border-color:#F1D8CC !important;
  color:#9E6653 !important;
}
.letters-page .letters-envelope {background:#FFFEFD !important;border-color:#E9C5B5 !important;box-shadow:0 22px 54px rgba(173,90,59,.10) !important;}
.letters-page .letters-envelope-top {color:#AF816F !important;}
.letters-page .letters-envelope-heart {color:#D17759 !important;}
.letters-page .letters-envelope-bottom {color:#8D6A5B !important;}
.letters-page .letters-receive-panel,
.letters-page .letters-settings,
.letters-page .letters-favorites{
  border:1px solid var(--od-coral-border) !important;
  background:#FFFFFF !important;
  box-shadow:0 12px 28px rgba(168,81,52,.045) !important;
}
.letters-page .letters-receive-copy strong {color:#594137 !important;}
.letters-page .letters-receive-button,
.letters-page .letters-find-readers{
  background:var(--od-coral) !important;
  border:1px solid var(--od-coral) !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
}
.letters-page .letters-receive-button:hover:not(:disabled),
.letters-page .letters-find-readers:hover{background:var(--od-coral-deep) !important;border-color:var(--od-coral-deep) !important;}
.letters-page .letters-receive-button:focus-visible,
.letters-page .letters-save-name:focus-visible,
.letters-page .letters-nickname:focus-visible {outline:2px solid var(--od-coral) !important;outline-offset:3px !important;}
.letters-page .letters-receive-button:disabled {background:#D8B8AA !important;border-color:#D8B8AA !important;}
.letters-page .letters-receive-button .letter-line-icon {width:19px;height:19px;}
.letters-page .letters-unread-chip,
.letters-page .letters-new-dot{background:#FFF0E8 !important;color:#B95F42 !important;}
.letters-page .letters-nickname{
  background:#FFFCFA !important;
  border:1px solid var(--od-coral-border) !important;
  color:#59433B !important;
}
.letters-page .letters-nickname::placeholder{color:#B79C91 !important;}
.letters-page .letters-setting-label,
.letters-page .letters-favorites-heading>span {color:#9B6E5D !important;}
.letters-page .letters-save-name{
  background:#FFF6F1 !important;border:1px solid #ECC8B9 !important;
  color:#AC573A !important;
}
.letters-page .letters-save-name:hover {background:#FFEDE4 !important;}
.letters-page .letters-add-reader {color:#B96145 !important;border-color:#F1DCD2 !important;}
.letters-page .letters-favorite-arrow,
.letters-page .letters-favorite-item.theme-female .letters-favorite-arrow{color:#C36A4D !important;}
.letters-page .letters-status-line,
.letters-page .letters-empty-icon{color:#B8664B !important;}
.letters-page .letters-empty {
  border:1px dashed #E9BDAC !important;
  background:#FFFCFA !important;
}
.letters-page .letters-empty-icon .letter-line-icon {width:44px;height:44px;}
.letters-page .letters-empty h3 {color:#5D473D !important;}
.letters-page .letters-card {
  box-shadow:0 12px 32px rgba(173,90,59,.045) !important;
}
.letters-page .letters-card.is-new{box-shadow:0 14px 36px rgba(173,90,59,.085) !important;}
.letters-page .letters-card.theme-male{
  --letter-color:#4A9BB1;--letter-border:#DCE9ED;--letter-bg:#F5FAFC;
}
.letters-page .letters-card.theme-female{
  --letter-color:#C36A4D;--letter-border:#F0D2C4;--letter-bg:#FFF5F0;
}
.letters-page .letters-persona small,
.letters-page .letters-card-meta time {color:#9C786A !important;}
.letters-page .letters-message {color:#735B51 !important;}
.letters-page .letters-card.theme-male .letters-message {color:#58717A !important;}

/* v157 - member-only service pathways */
.header-member-lock{display:inline-flex;align-items:center;margin-left:1px;opacity:.62;vertical-align:middle}
.header-login-link{color:#AF604A!important;font-size:12px!important;white-space:nowrap}
@media (min-width:821px){.header-nav{gap:3px!important}.header-nav a{padding:10px 8px!important}.header-nav .header-cta-desktop{padding:11px 15px!important}}
@media (max-width:820px){.header-login-link{font-size:14px!important}}
.member-entry-page{background:linear-gradient(180deg,#FFFDFC 0%,#F9FCFE 74%,#FFF 100%);min-height:70vh}
.member-entry-hero{padding:80px 0 42px;text-align:center;background:radial-gradient(ellipse at 20% 20%,rgba(249,224,211,.6),transparent 45%)}
.member-entry-hero .eyebrow{color:#BC735D;letter-spacing:.2em;font-size:12px}
.member-entry-hero h1{font-size:clamp(32px,4.5vw,50px);color:#28353D;margin:12px 0 18px}
.member-entry-hero p:not(.eyebrow){line-height:2;color:#687785;font-size:15px;margin:0}
.member-entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;padding-top:10px;padding-bottom:95px}
.member-login-card,.member-benefits{background:#FFF;border:1px solid #E9EFF2;border-radius:32px;padding:40px;box-shadow:0 18px 42px rgba(34,54,63,.045)}
.member-login-card .eyebrow,.member-benefits .eyebrow,.member-account-heading .eyebrow{color:#C87859;font-size:11px;letter-spacing:.16em}
.member-login-card h2,.member-benefits h2{font-size:24px;margin:12px 0 25px;color:#29353C}
.member-login-form{display:flex;flex-direction:column;gap:10px}
.member-login-form label{font-size:13px;font-weight:750;color:#586670;margin-top:8px}
.member-login-form input{width:100%;background:#FFF;border:1px solid #DCE6EA;border-radius:14px;padding:15px 16px;font-size:16px;color:#29353C;outline:none}
.member-login-form input:focus{border-color:#0D86A5;box-shadow:0 0 0 3px rgba(13,134,165,.08)}
.member-login-button{display:flex;align-items:center;justify-content:center;gap:22px;width:100%;margin-top:16px;border:0;border-radius:999px;background:#087B99;color:#FFF;font-size:16px;font-weight:800;padding:17px;cursor:pointer}
.member-login-button:hover{background:#066A86}
.member-login-caption{font-size:12px!important;line-height:1.85!important;color:#8C8D8D!important;margin:24px 0 0!important}
.member-login-error{border:1px solid #E7B2A5;background:#FFF5F0;color:#AE5140;padding:12px 15px;border-radius:12px;font-size:13px}
.member-benefit{display:flex;gap:17px;padding:15px 0;border-bottom:1px solid #F1F0EE}
.member-benefit-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:14px;background:#FFF2ED;color:#C17457;font-size:12px;font-weight:800}
.member-benefit h3{font-size:16px;color:#29353C;margin:0 0 7px}
.member-benefit p{font-size:13px;color:#74808A;line-height:1.8;margin:0}
.member-about-link{display:inline-flex;gap:15px;margin-top:26px;color:#C17457;font-weight:800;text-decoration:none}
.member-account-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}
.member-account-heading h2{font-size:28px;margin:5px 0 10px}.member-account-heading p:not(.eyebrow){color:#7B858B;font-size:13px}
.member-logout{padding:9px 20px;border:1px solid #DFE6E9;border-radius:999px;background:#FFF;color:#647782;cursor:pointer}
.member-access-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.member-access-card{display:block;text-decoration:none;background:#F4FAFD;border:1px solid #D5E7ED;border-radius:26px;padding:32px;min-height:190px;transition:transform .2s ease}
.member-access-card:hover{transform:translateY(-3px)}
.member-access-card.member-access-warm{background:#FFF6F1;border-color:#EFCCBF}
.member-access-no{font-size:11px;color:#748894;font-weight:700;letter-spacing:.1em}
.member-access-card h3{font-size:22px;color:#26343A;margin:16px 0 14px}
.member-access-card h3 span{float:right}.member-access-card p{font-size:13px;line-height:1.8;color:#697C88;margin:0}
.member-account-note{color:#84919A;font-size:13px;text-align:center;margin:36px 0}
@media (max-width:820px){.member-entry-grid,.member-access-cards{grid-template-columns:1fr}.member-entry-hero{padding:55px 0 34px}.member-login-card,.member-benefits{padding:28px 24px}.member-entry-grid{gap:18px}.member-account-heading{flex-wrap:wrap}.member-access-card{min-height:155px}}

/* ==================================================================
   推し読 v158 — restrained mobile header, complete ABOUT, work cover,
   transparent AI-to-AI reaction badges.  Footer branding untouched.
   ================================================================== */
/* Mobile: sticky header stays IN the document, never reserves a phantom
   fixed-header spacer.  Anchor offsets are for intentional links only. */
@media (max-width:900px){
  html {scroll-padding-top:calc(var(--rr-header-space, 66px) + 10px)!important;overflow-y:auto!important;}
  body {padding-top:0!important;overflow-y:visible!important;transform:none!important;}
  html body > .site-header {
    position:-webkit-sticky!important;position:sticky!important;
    top:0!important;bottom:auto!important;left:auto!important;right:auto!important;
    width:100%!important;height:auto!important;min-height:0!important;
    margin:0!important;transform:none!important;
    z-index:3000!important;
  }
  .header-flow-spacer {display:none!important;height:0!important;}
  .site-header .header-nav {top:100%!important;}
  #works,#readers,#roundtable-title,#membership {scroll-margin-top:calc(var(--rr-header-space, 66px) + 10px)!important;}
}
@media (max-width:600px){
  .site-header .brand-logo-image {width:68px!important;height:auto!important;}
  .site-header .menu-toggle {width:42px!important;padding:4px 3px!important;}
  .site-header .menu-toggle span {height:2px!important;width:100%!important;margin:5px 0!important;}
  /* Less of the gallery is visible, and the introduction starts higher. */
  .service-hero .service-copy {padding-top:10px!important;transform:none!important;}
  .service-hero .service-hero-inner {gap:6px!important;}
  .service-hero .persona-cloud {min-height:280px!important;height:280px!important;margin-top:-6px!important;}
  .service-hero .hero-gallery {height:280px!important;max-height:280px!important;}
  .service-hero .mobile-hero-overlay {padding-top:8px!important;padding-bottom:2px!important;}
  .service-hero .persona-cloud::after{height:36px!important;}
}
@media (min-width:601px) and (max-width:900px){
  .service-hero .persona-cloud{min-height:355px!important;height:355px!important;}
  .service-hero .hero-gallery{height:355px!important;}
}
/* Tiny invitation, not another loud primary CTA. */
.service-hero .hero-letter-teaser{font-size:12px;line-height:1.8;color:#986957;max-width:550px;margin:18px 0 0;letter-spacing:.012em;}
.service-hero .hero-letter-teaser-icon{display:inline-block;margin-right:7px;color:#D27455;font-size:16px;vertical-align:-1px;}
.service-hero .hero-letter-teaser a{display:inline-block;color:#AD5E44;text-underline-offset:4px;text-decoration:underline;font-weight:750;margin-left:4px;}
@media(max-width:600px){.service-hero .hero-letter-teaser{font-size:11px;line-height:1.65;margin-top:10px;}}

/* Work's image is now the same editorial photo + in-image title/byline as home. */
.work-hero .work-hero-cover{position:relative!important;min-width:0;overflow:hidden;border-radius:22px;isolation:isolate;}
.work-hero .work-hero-cover .work-hero-thumb{width:100%!important;height:100%!important;min-height:310px;aspect-ratio:4/3!important;object-fit:cover!important;border-radius:0!important;box-shadow:none!important;}
.work-hero .work-hero-cover::after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(180deg,rgba(23,34,39,0),rgba(23,34,39,.18) 27%,rgba(23,34,39,.68) 100%);z-index:1;pointer-events:none;}
.work-hero .work-hero-cover .work-hero-image-pill{z-index:3;top:17px!important;left:17px!important;background:rgba(255,255,255,.84)!important;border:1px solid rgba(255,255,255,.85)!important;backdrop-filter:blur(16px)!important;color:#28353D!important;box-shadow:none!important;}
.work-hero .work-hero-cover-caption{position:absolute;bottom:24px;left:23px;right:23px;z-index:3;color:white;text-shadow:0 2px 10px rgba(12,24,28,.21);}
.work-hero .work-hero-cover-caption h1{font-size:clamp(21px,2vw,29px)!important;font-weight:800!important;line-height:1.5!important;letter-spacing:-.025em!important;margin:0 0 8px!important;color:#fff!important;overflow-wrap:anywhere;}
.work-hero .work-hero-cover-caption .work-hero-cover-author{display:inline-flex;align-items:center;gap:1px;color:#FFFFFF!important;font-size:13px;font-weight:700;text-underline-offset:4px;text-decoration:underline;line-height:1.4;}
.work-hero .work-hero-cover-caption .work-hero-cover-author span{font-weight:400;}
.work-hero .work-hero-copy .summary-box > span:first-child{display:flex!important;align-items:center!important;gap:11px;color:#B66B54!important;}
.work-hero .work-hero-copy .summary-box > span:first-child::before{content:"";display:block;flex:0 0 28px;height:1px;background:#E4AD9C;}
.work-hero .work-hero-copy .work-hero-meta{margin:0 0 12px!important;}
.work-comments-heading h2,.work-comments-heading h2 span,.work-comments-heading .work-comments-amp{color:#0D86A5!important;}
.work-comments-heading .work-comments-kicker{color:#648F9F!important;}
@media(max-width:900px){
 .work-hero .work-hero-cover{width:100%;}
 .work-hero .work-hero-cover .work-hero-thumb{min-height:0;aspect-ratio:16/10!important;}
 .work-hero .work-hero-cover-caption{bottom:16px;left:16px;right:16px;}
 .work-hero .work-hero-cover-caption h1{font-size:clamp(19px,5vw,26px)!important;margin-bottom:5px!important;}
}
@media(max-width:560px){.work-hero .work-hero-cover .work-hero-thumb{aspect-ratio:16/11!important;}}
/* AI reactions never inflate the counter for human visitors. */
.work-comment-card .work-comment-reader-copy .work-comment-reader-controls{gap:7px!important;flex-wrap:wrap!important;}
.ai-appreciation{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid #E1E9ED;border-radius:99px;background:#FCFDFE;color:#64818D;font-size:10px;font-weight:750;line-height:1.25;white-space:nowrap;}
.ai-appreciation-faces{display:inline-flex;align-items:center;}
.ai-appreciation-faces img{width:16px;height:16px;border-radius:50%;object-fit:cover;border:1px solid #fff;margin-left:-4px;}
.ai-appreciation-faces img:first-child{margin-left:0;}
.work-comment-card.theme-female .ai-appreciation{background:#FFF9F6;border-color:#F1DBD2;color:#9D705E;}
.work-comment-card.theme-male .ai-appreciation{background:#F4FAFC;border-color:#D8E9F0;color:#698895;}

/* ABOUT v158 — magazine-like section rhythm and current product journey. */
.about-v158 {--ab-ink:#26363C;--ab-blue:#0D86A5;--ab-coral:#CA7358;color:var(--ab-ink);}
.about-v158 .section{padding:80px 0;}
.about-v158 h2{font-size:clamp(27px,3vw,42px);line-height:1.35;letter-spacing:-.04em;margin:0 0 20px;font-weight:850;}
.about-v158 p{line-height:1.95;}
.about-v158-hero{padding:95px 0 110px;background:radial-gradient(circle at 85% 25%,#F4FCFE,transparent 45%),linear-gradient(145deg,#FFFFFF 40%,#FFF8F4 100%);overflow:hidden;}
.about-v158-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:66px;}
.about-v158-hero-copy h1{font-weight:900;font-size:clamp(37px,4.5vw,65px);line-height:1.28;letter-spacing:-.055em;margin:0 0 27px;}
.about-v158-hero-copy h1 span{color:#087F9E;}
.about-v158-hero-copy > p:not(.eyebrow){font-size:15px;color:#617782;max-width:570px;}
.about-v158-hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 10px;}
.about-v158-hero-buttons .btn{font-size:13px;box-shadow:none!important;}
.about-v158-hero-copy .about-v158-hero-footnote{font-size:11px!important;color:#8A9CA4!important;margin-top:22px;}
.about-v158-hero-visual{height:500px;position:relative;}
.about-v158-face{position:absolute;background:#FFFFFF;padding:8px;border-radius:22px;box-shadow:0 20px 35px rgba(40,53,61,.10);width:155px;transition:transform .2s;}
.about-v158-face:hover{transform:translateY(-5px) rotate(0deg)!important;}
.about-v158-face img{width:100%;height:157px;object-fit:cover;border-radius:15px;}
.about-v158-face span{display:block;font-size:12px;font-weight:800;padding:8px 4px 2px;}
.about-v158-face-1{top:2%;left:7%;transform:rotate(-8deg)}.about-v158-face-2{top:0;right:7%;transform:rotate(6deg)}.about-v158-face-3{top:31%;left:36%;transform:rotate(3deg)}.about-v158-face-4{bottom:2%;left:4%;transform:rotate(6deg)}.about-v158-face-5{bottom:2%;right:4%;transform:rotate(-6deg)}
.about-v158-visual-note{position:absolute;top:44%;left:1%;color:#C67B61;font-size:13px;font-weight:850;line-height:1.8;letter-spacing:.08em;transform:rotate(-7deg);}
.about-v158-values{background:#F5FAFC;}
.about-v158-values-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center;}
.about-v158-values .catch-copy{font-size:clamp(30px,3.9vw,57px);font-weight:900;}
.about-v158-values-grid > div:last-child p{font-size:16px;color:#617782;max-width:530px;}
.about-v158-heading{margin-bottom:38px;text-align:center;}.about-v158-heading p:last-child{color:#76909A;margin:0;font-size:14px;}
.about-v158-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.about-v158-feature{padding:35px 36px 30px;border-radius:29px;border:1px solid var(--about-line,#D7E7ED);background:var(--about-bg,#F8FCFD);min-height:265px;display:flex;flex-direction:column;}
.about-v158-feature-no{font-size:11px;letter-spacing:.17em;color:var(--about-accent,#0D86A5);font-weight:850;margin-bottom:17px;}
.about-v158-feature h3{font-size:clamp(20px,2vw,27px);line-height:1.5;margin:0 0 13px;font-weight:850;letter-spacing:-.035em;}
.about-v158-feature p{font-size:14px;color:#657882;margin:0 0 24px;line-height:1.9;flex:1;}
.about-v158-feature a{color:var(--about-accent,#0D86A5);font-size:13px;font-weight:800;display:flex;align-items:center;gap:6px;}
.about-v158-feature-blue{--about-bg:#F5FBFE;--about-line:#D7E7EF;--about-accent:#0D86A5;}
.about-v158-feature-coral{--about-bg:#FFF9F5;--about-line:#F0D6CA;--about-accent:#C46B51;}
.about-v158-feature-sand{--about-bg:#FFFDF8;--about-line:#EAE0CC;--about-accent:#A78559;}
.about-v158-feature-blush{--about-bg:#FFF5F2;--about-line:#F3CEC4;--about-accent:#C16B55;}
.about-v158-reader-spotlight{background:linear-gradient(140deg,#FFF9F5,#FFFFFF 65%);}
.about-v158-spotlight-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center;}
.about-v158-spotlight-photos{display:flex;align-items:center;justify-content:center;gap:12px;}
.about-v158-spotlight-photos a{display:block;width:33.333%;text-align:center;font-size:12px;font-weight:800;color:#6E8790;}
.about-v158-spotlight-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:70px 70px 23px 23px;box-shadow:0 13px 25px rgba(40,53,61,.1);margin-bottom:12px;}
.about-v158-spotlight-photos a:nth-child(2){transform:translateY(34px)}.about-v158-spotlight-photos a:nth-child(3){transform:translateY(-23px)}
.about-v158-spotlight-grid p:not(.eyebrow){color:#617782;font-size:15px;}
.about-v158 .text-link-arrow{color:#0D86A5;text-decoration:none;}
.about-v158-works{background:#F7FBFC;}
.about-v158-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.about-v158-work{display:flex;flex-direction:column;background:#FFF;border:1px solid #DFE9ED;border-radius:22px;overflow:hidden;min-width:0;}
.about-v158-work img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.about-v158-work span{font-size:10px;color:#C16F55;letter-spacing:.04em;font-weight:800;padding:20px 22px 0;}
.about-v158-work strong{display:block;font-size:18px;line-height:1.55;letter-spacing:-.025em;padding:8px 22px 14px;flex:1;}
.about-v158-work small{display:block;color:#0D86A5;font-size:12px;font-weight:800;padding:0 22px 23px;}
.about-v158-members-grid{display:grid;grid-template-columns:1fr .8fr;gap:75px;align-items:center;}
.about-v158-members p:not(.eyebrow){color:#617782;font-size:15px;}
.about-v158-members .about-v158-smallprint{font-size:11px!important;color:#8A9BA2!important;}
.about-v158-members-panel{padding:37px;border-radius:28px;background:#FFF6F1;border:1px solid #F0D3C6;display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.about-v158-members-panel > span{font-weight:850;color:#C16F55;letter-spacing:.14em;font-size:11px;}
.about-v158-members-panel h3{font-size:clamp(20px,2.3vw,29px);line-height:1.5;margin:0;}
.about-v158-members-panel .btn{box-shadow:none!important;font-size:13px;}
.about-v158-end{background:#273942;color:white;text-align:center;padding:95px 0;}
.about-v158-end p{font-size:14px;color:#BBD0D7;}
.about-v158-end h2{font-size:clamp(34px,4vw,54px);color:#FFFFFF;margin:18px 0 35px;}
.about-v158-end .btn{box-shadow:none!important;}
@media(max-width:900px){
 .about-v158 .section{padding:57px 0;}
 .about-v158-hero{padding:58px 0 72px;}
 .about-v158-hero-grid{grid-template-columns:1fr;gap:30px;}
 .about-v158-hero-visual{height:340px;max-width:510px;width:100%;margin:auto;}
 .about-v158-face{width:125px;}
 .about-v158-face img{height:118px;}
 .about-v158-visual-note{left:12%;top:45%;}
 .about-v158-values-grid,.about-v158-spotlight-grid,.about-v158-members-grid{grid-template-columns:1fr;gap:35px;}
 .about-v158-spotlight-photos{max-width:560px;}
 .about-v158-work-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px){
 .about-v158-hero{padding:46px 0 50px;}
 .about-v158-hero-copy h1{font-size:clamp(30px,8vw,42px);}
 .about-v158-hero-copy > p:not(.eyebrow){font-size:13px;}
 .about-v158-hero-buttons .btn{width:100%;}
 .about-v158-hero-visual{height:270px;}
 .about-v158-face{width:94px;padding:5px;border-radius:14px;}
 .about-v158-face img{height:96px;border-radius:10px;}
 .about-v158-face span{font-size:10px;padding:6px 3px 1px;}
 .about-v158-visual-note{font-size:10px;}
 .about-v158-feature-grid,.about-v158-work-grid{grid-template-columns:1fr;}
 .about-v158-feature{padding:27px 23px;min-height:0;}
 .about-v158-spotlight-photos{gap:7px;}
 .about-v158-spotlight-photos img{border-radius:50px 50px 17px 17px;}
 .about-v158-members-panel{padding:26px 23px;}
 .about-v158 h2{font-size:clamp(24px,7vw,32px);}
}


/* v159 | Reader CTA theme consistency and member feature previews */
.works-section .work-card.theme-female .comment-fade.compact-fade .reader-comments-cta-label {
  color:#A95036 !important;
}
.works-section .work-card.theme-male .comment-fade.compact-fade .reader-comments-cta-label {
  color:#006D89 !important;
}
.works-section .work-card.theme-female .comment-fade.compact-fade .reader-comments-cta:hover .reader-comments-cta-label,
.works-section .work-card.theme-female .comment-fade.compact-fade .reader-comments-cta:focus-visible .reader-comments-cta-label {color:#A95036 !important;}
.works-section .work-card.theme-male .comment-fade.compact-fade .reader-comments-cta:hover .reader-comments-cta-label,
.works-section .work-card.theme-male .comment-fade.compact-fade .reader-comments-cta:focus-visible .reader-comments-cta-label {color:#006D89 !important;}

/* Override generic header-nav hover rule that turned the CTA text pale. */
.site-header .header-nav a.header-cta-desktop,
.site-header .header-nav a.header-cta-desktop:link,
.site-header .header-nav a.header-cta-desktop:visited,
.site-header .header-nav a.header-cta-desktop:hover,
.site-header .header-nav a.header-cta-desktop:focus-visible,
.site-header .header-mobile-actions a.header-cta-mobile,
.site-header .header-mobile-actions a.header-cta-mobile:hover,
.site-header .header-mobile-actions a.header-cta-mobile:focus-visible {
  color:#FFFFFF !important;
  text-shadow:none !important;
  opacity:1 !important;
  box-shadow:none !important;
  background:#006E89 !important;
  border-color:#006E89 !important;
  filter:none !important;
}
.site-header .header-nav a.header-cta-desktop:hover,
.site-header .header-nav a.header-cta-desktop:focus-visible,
.site-header .header-mobile-actions a.header-cta-mobile:hover,
.site-header .header-mobile-actions a.header-cta-mobile:focus-visible {
  background:#00546B !important;
  border-color:#00546B !important;
}

.use-guest-teaser,.letters-preview-banner {
  margin:18px 0 24px;padding:25px 28px;border:1px solid #EED1C5;
  border-radius:22px;background:linear-gradient(135deg,#FFF8F4,#FFFFFF);
}
.use-guest-label,.letters-preview-banner>span,.letters-preview-mark {
  display:block;color:#B86B50;font-size:10px;font-weight:850;letter-spacing:.16em;margin-bottom:9px;
}
.use-guest-teaser strong,.letters-preview-banner strong {
  display:block;font-size:clamp(17px,2vw,22px);font-weight:850;color:#553E35;line-height:1.5;
}
.use-guest-teaser p,.letters-preview-banner p {font-size:13px;line-height:1.95;color:#80675B;margin:10px 0 0;}
.use-guest-note {font-size:12px!important;color:#8B776D!important;line-height:1.8!important;margin:6px 0!important;display:flex;gap:7px;align-items:flex-start;}
.use-guest-note svg{margin-top:3px;flex:none;}
.use-preview-page .use-form .btn-primary{box-shadow:none!important;}
.use-preview-page .use-form .btn-primary:hover{color:#FFFFFF!important;}
.letters-guest-preview .letters-guest-cta{display:inline-flex!important;align-items:center;justify-content:center;gap:9px;text-decoration:none!important;min-height:52px;}
.letters-guest-preview .letters-guest-cta:hover{color:#FFFFFF!important;}
.letters-preview-sample{border:1px solid #EBD3C8;background:#FFFDFC;border-radius:26px;padding:28px;margin-top:22px;box-shadow:0 9px 30px rgba(170,105,77,.045);}
.letters-preview-persona{display:flex;gap:13px;align-items:center;margin:17px 0 14px;}
.letters-preview-persona img{width:50px;height:50px;border-radius:50%;object-fit:cover;}
.letters-preview-persona span{display:flex;flex-direction:column;gap:3px;}
.letters-preview-persona strong{font-size:16px;color:#503E36;}
.letters-preview-persona small{font-size:11px;color:#AB8B7C;}
.letters-preview-sample-text{font-size:15px;line-height:2;color:#795E51;background:#FFF6F0;border-radius:16px;padding:18px 20px;margin:4px 0 14px;}
.letters-preview-end{font-size:11px;color:#AB8E7F;line-height:1.8;}
.letters-guest-preview .letters-guest-save{display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;min-height:40px;}
.letters-guest-preview .letters-favorites-heading>span{display:none;}
@media(max-width:600px){
  .use-guest-teaser,.letters-preview-banner,.letters-preview-sample{padding:22px 18px;}
  .letters-preview-sample-text{font-size:13px;padding:15px;}
}


/* v160 — Desktop letter shortcut + matching member login typography */
@media (min-width:821px){
  .site-header .header-nav a.header-desktop-letter{
    position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 39px!important;width:39px!important;height:39px!important;min-width:39px!important;
    padding:0!important;border-radius:50%!important;border:1px solid #EECDBF!important;
    background:#FFF6F1!important;color:#BC6A50!important;box-shadow:none!important;
    transform:none!important;line-height:1!important;
  }
  .site-header .header-nav a.header-desktop-letter:hover,
  .site-header .header-nav a.header-desktop-letter:focus-visible{
    background:#FFEDE3!important;color:#A4543C!important;border-color:#DFB29F!important;
    transform:translateY(-1px)!important;
  }
  .site-header .header-nav a.header-desktop-letter::after{content:none!important;display:none!important;}
  .site-header .header-nav a.header-desktop-letter .header-letters-count{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;font-size:9px;}
  .site-header .header-nav a.header-login-link{font-size:14px!important;font-weight:700!important;}
}
@media (min-width:821px) and (max-width:1180px){
  .site-header .header-nav a.header-login-link{font-size:12px!important;}
  .site-header .header-nav a.header-desktop-letter{flex-basis:34px!important;min-width:34px!important;width:34px!important;height:34px!important;}
}
@media (max-width:820px){
  .site-header .header-nav a.header-desktop-letter{display:none!important;}
  .site-header .header-nav a.header-login-link{font-size:14px!important;}
}
@media (min-width:821px) and (max-width:960px){
  /* This breakpoint makes the other menu labels 13px as well. */
  .site-header .header-nav a.header-login-link{font-size:13px!important;}
}


/* v161 — header letters icon: coral filled circle, white envelope, tiny white dot */
.site-header .header-nav .letter-line-icon,
.site-header .header-mobile-letter .letter-line-icon{
  color:#FFFFFF !important;
  width:18px !important;
  height:18px !important;
}
.site-header .header-mobile-letter .letter-line-icon{width:17px !important;height:17px !important;}
.site-header .header-nav a.header-desktop-letter,
.site-header .header-mobile-letter{
  position:relative !important;
  overflow:visible !important;
  background:#C86F53 !important;
  border:1px solid #C86F53 !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
}
.site-header .header-nav a.header-desktop-letter:hover,
.site-header .header-nav a.header-desktop-letter:focus-visible,
.site-header .header-mobile-letter:hover,
.site-header .header-mobile-letter:focus-visible{
  background:#B96045 !important;
  border-color:#B96045 !important;
  color:#FFFFFF !important;
}
.site-header .header-nav a.header-desktop-letter::before,
.site-header .header-mobile-letter::before{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#FFFFFF;
  top:6px;
  right:6px;
  box-shadow:0 0 0 1px rgba(200,111,83,.16);
}
@media (max-width:370px){
  .site-header .header-mobile-letter::before{top:4px;right:4px;width:7px;height:7px;}
}
.site-header .header-nav a.header-desktop-letter .header-letters-count,
.header-mobile-letter .header-letters-count{
  background:#FFFFFF !important;
  color:#C86F53 !important;
  border:1px solid rgba(200,111,83,.18) !important;
  box-shadow:none !important;
}


/* v162 — CTA spacing polish + coral about button */
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{
  padding:9px 84px 9px 18px!important;
  gap:18px!important;
}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{
  width:164px!important;
  min-width:164px!important;
}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces img{
  margin-left:-6px!important;
}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span:last-child{
  margin-left:4px!important;
}
@media (max-width:1100px){
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{padding:9px 78px 9px 16px!important;gap:15px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{width:150px!important;min-width:150px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces img{margin-left:-6px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span:last-child{margin-left:2px!important;}
}
@media (max-width:820px){
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{padding:8px 70px 8px 14px!important;gap:12px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{width:132px!important;min-width:132px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces img{margin-left:-6px!important;}
}
@media (max-width:560px){
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link{padding:7px 58px 7px 12px!important;gap:10px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces{width:112px!important;min-width:112px!important;}
  .works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link > span.five-reader-faces img{margin-left:-5px!important;}
}

/* top hero secondary button: use the same coral as "100通り" with white text */
.profile-copy .hero-actions .btn.btn-light{
  background:#E87959!important;
  border-color:#E87959!important;
  color:#FFFFFF!important;
  box-shadow:0 12px 24px rgba(232,121,89,.18)!important;
}
.profile-copy .hero-actions .btn.btn-light:hover,
.profile-copy .hero-actions .btn.btn-light:focus-visible{
  background:#D96E50!important;
  border-color:#D96E50!important;
  color:#FFFFFF!important;
}


/* v163 — color alignment for reader CTA and work card CTA */
/* 5人の感想を見る: text color follows the CTA theme */
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-female{
  color:var(--warm)!important;
}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-female > span:last-child{
  color:var(--warm)!important;
}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-male{
  color:var(--brand)!important;
}
.works-section .work-card .comment-fade.compact-fade > a.comment-more-link.five-reader-link.theme-male > span:last-child{
  color:var(--brand)!important;
}

/* reader page primary CTA: male = 100人 blue, female = 100通り coral */
.reader-profile-page.theme-male .btn.btn-primary{
  background:var(--brand)!important;
  border-color:var(--brand)!important;
  color:#FFFFFF!important;
  box-shadow:0 12px 24px rgba(1,162,206,.20)!important;
}
.reader-profile-page.theme-male .btn.btn-primary:hover,
.reader-profile-page.theme-male .btn.btn-primary:focus-visible{
  background:#018DB3!important;
  border-color:#018DB3!important;
  color:#FFFFFF!important;
}
.reader-profile-page.theme-female .btn.btn-primary{
  background:var(--warm)!important;
  border-color:var(--warm)!important;
  color:#FFFFFF!important;
  box-shadow:0 12px 24px rgba(232,121,89,.20)!important;
}
.reader-profile-page.theme-female .btn.btn-primary:hover,
.reader-profile-page.theme-female .btn.btn-primary:focus-visible{
  background:#D96E50!important;
  border-color:#D96E50!important;
  color:#FFFFFF!important;
}


/* v164 — letters page: nickname panel removed, favorites only */
.letters-sidebar{display:block}
.letters-sidebar .letters-favorites{margin-top:0}
@media(max-width:800px){.letters-sidebar{display:block}}
@media(max-width:590px){.letters-sidebar{display:block}}

/* v164 — work detail roundtable in warm coral tones */
.roundtable-section{
  background:linear-gradient(180deg,#FFF8F5 0%,#FFFDFB 100%)!important;
  border:1px solid #F1CEC2!important;
  box-shadow:0 20px 48px rgba(191,100,75,.08)!important;
}
.roundtable-head h2,
.roundtable-head p{color:#6F4E45!important}
.roundtable-reveal .roundtable-open{
  background:#FFFFFF!important;
  border:1px solid #F1CEC2!important;
  box-shadow:0 12px 28px rgba(191,100,75,.08)!important;
}
.roundtable-open-icon{background:#C96F53!important;color:#FFF!important;box-shadow:none!important}
.roundtable-open-text strong,.roundtable-chat-appbar-copy strong{color:#6F4E45!important}
.roundtable-open-text small,.roundtable-chat-appbar-copy span,.roundtable-head .eyebrow,.roundtable-chat-live{color:#A07567!important}
.roundtable-chat-live i{background:#C96F53!important}
.roundtable-chat-shell{border:1px solid #F1CEC2!important;background:#FFFFFF!important;box-shadow:0 18px 40px rgba(191,100,75,.08)!important}
.roundtable-chat-appbar{background:linear-gradient(180deg,#FFF5F0 0%,#FFF9F6 100%)!important;border-bottom:1px solid #F1CEC2!important}
.roundtable-playback-bar{background:#FFFFFF!important;border-top:1px solid #F6DFD7!important;border-bottom:1px solid #F6DFD7!important}
.roundtable-playback-status,.roundtable-progress{color:#9A7466!important}
.roundtable-playback-controls button{background:#FFF7F3!important;border:1px solid #EBC8BA!important;color:#B4654C!important;box-shadow:none!important}
.roundtable-playback-controls button:hover,.roundtable-playback-controls button:focus-visible{background:#FCEDE7!important;border-color:#D78C72!important;color:#A65640!important}
.roundtable-conversation::before{background:linear-gradient(180deg,transparent,#F4DDD5 8%,#F4DDD5 92%,transparent)!important}
.roundtable-message.is-reply::before{background:#E4B9AA!important}
.roundtable-reveal .roundtable-speaker-name{color:#A07060!important}
.roundtable-reveal .roundtable-speech,.roundtable-reveal .roundtable-message.is-reply .roundtable-speech{color:#6A4B42!important;box-shadow:0 10px 26px rgba(191,100,75,.06)!important}
.roundtable-reveal .roundtable-message:nth-child(5n+1) .roundtable-speech{background:#FFF3EE!important;border-color:#F3CFC2!important}
.roundtable-reveal .roundtable-message:nth-child(5n+2) .roundtable-speech{background:#FFF8F3!important;border-color:#F5D9CC!important}
.roundtable-reveal .roundtable-message:nth-child(5n+3) .roundtable-speech{background:#FFF6F8!important;border-color:#F0D5DD!important}
.roundtable-reveal .roundtable-message:nth-child(5n+4) .roundtable-speech{background:#FFF7F0!important;border-color:#F3D7C5!important}
.roundtable-reveal .roundtable-message:nth-child(5n+5) .roundtable-speech{background:#FFF4F1!important;border-color:#F1CEC2!important}
.roundtable-reveal .roundtable-message.is-writing .roundtable-speech p::after{background:#B86B54!important}
.roundtable-reveal .roundtable-typing i{background:#C96F53!important}
.roundtable-chat-end{background:#FFF3EE!important;color:#A07060!important}
.roundtable-chat-end span,.roundtable-chat-bottom span:first-child,.roundtable-chat-bottom span:last-child{color:#E4B9AA!important}
.roundtable-chat-bottom{background:#FFFDFB!important;border-top:1px solid #F3DED5!important;color:#A07060!important}
.roundtable-reveal:focus-within .roundtable-open:focus-visible,.roundtable-reveal button:focus-visible,.roundtable-reveal a:focus-visible,.roundtable-conversation:focus-visible{outline:3px solid #D18469!important}


/* v165 — requested polish */
/* Work-page heading: blue 感想, black ampersand, coral roundtable */
.work-comments-heading h2 > span:first-child{color:#0D86A5!important;}
.work-comments-heading h2 > .work-comments-amp{color:#28353D!important;}
.work-comments-heading h2 > span:last-child{color:#E97B57!important;}

/* Work hero: same editorial rhythm as home cards, note-like wide ratio */
@media (min-width:901px){
  .work-hero .inner.work-hero-inner{grid-template-columns:minmax(0,1.02fr) minmax(350px,.88fr)!important;gap:58px!important;align-items:center!important;max-width:1220px!important;}
  .work-hero .work-hero-copy{display:flex!important;flex-direction:column!important;justify-content:center!important;align-self:stretch!important;padding-top:0!important;}
  .work-hero .work-hero-cover .work-hero-thumb{aspect-ratio:16/9!important;min-height:0!important;}
  .work-hero .work-hero-cover-caption h1{font-size:19px!important;line-height:1.46!important;font-weight:800!important;letter-spacing:-.03em!important;}
}
@media (max-width:900px){
  .work-hero .work-hero-cover .work-hero-thumb{aspect-ratio:16/9!important;}
  .work-hero .work-hero-cover-caption h1{font-size:17px!important;line-height:1.46!important;}
}
.work-hero .work-hero-copy .summary-box{margin-block:auto!important;}
.work-hero .work-hero-copy .summary-box > span:first-child{margin-bottom:14px!important;}
.work-hero .work-hero-copy .summary-box .work-summary-long{margin-top:0!important;}
/* by- line should be clean, without underline */
.work-hero .work-hero-cover-caption .work-hero-cover-author{ text-decoration:none!important; border-bottom:none!important; }
.work-hero .work-hero-cover-caption .work-hero-cover-author:hover,
.work-hero .work-hero-cover-caption .work-hero-cover-author:focus-visible{ text-decoration:none!important; }

/* Readers hero art: only 視点 in coral */
.reader-list-hero .reader-list-hero-art > span{color:#A9D8E8!important;}
.reader-list-hero .reader-list-hero-art > b{color:#4FAED5!important;}
.reader-list-hero .reader-list-hero-art > b > span{color:#E97B57!important;}

/* Work-comment tiny profile chip: gray, slimmer, simpler, with arrow */
.work-comment-card .work-comment-reader-copy .work-comment-page-inline{
  height:16px!important;
  min-height:16px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  background:#FFFFFF!important;
  border:1px solid #D8DDE2!important;
  color:#7C8790!important;
  font-size:8.5px!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
  line-height:1!important;
  box-shadow:none!important;
}
.work-comment-card .work-comment-reader-copy .work-comment-page-inline::after{content:"→";margin-left:3px;font-size:9px;line-height:1;color:currentColor;}
.work-comment-card .work-comment-reader-copy .work-comment-page-inline:hover,
.work-comment-card .work-comment-reader-copy .work-comment-page-inline:focus-visible{background:#F5F7F8!important;color:#5F6A72!important;border-color:#D0D6DB!important;}

/* Warm coral roundtable area on work page */
.roundtable-section{background:linear-gradient(180deg,#FFF8F4 0%,#FFFDFC 100%)!important;border-color:#F1D2C7!important;box-shadow:0 22px 52px rgba(191,100,75,.08)!important;}
.roundtable-head h2{color:#C86D51!important;}
.roundtable-head p,.roundtable-chat-appbar-copy span,.roundtable-open-text small,.roundtable-playback-status,.roundtable-progress{color:#9C7667!important;}
.roundtable-members a{box-shadow:0 10px 24px rgba(191,100,75,.08)!important;}
.roundtable-open{background:#FFFFFF!important;border:1px solid #F1D2C7!important;box-shadow:0 12px 26px rgba(191,100,75,.07)!important;}
.roundtable-open-icon,.roundtable-open-arrow circle{background:#D97E62!important;color:#FFF!important;fill:#D97E62!important;stroke:#D97E62!important;}
.roundtable-open-arrow path{fill:#FFF!important;}
.roundtable-open-text strong,.roundtable-chat-appbar-copy strong{color:#6B4B41!important;}
.roundtable-chat-shell{background:#FFFFFF!important;border:1px solid #F1D2C7!important;box-shadow:0 18px 40px rgba(191,100,75,.08)!important;}
.roundtable-chat-appbar{background:linear-gradient(180deg,#FFF6F1 0%,#FFFDFB 100%)!important;border-bottom:1px solid #F4DCD3!important;}
.roundtable-chat-live,.roundtable-chat-live span{color:#D97E62!important;}
.roundtable-chat-live i{background:#D97E62!important;}
.roundtable-playback-bar{background:#FFFFFF!important;border-top:1px solid #F5E2DA!important;border-bottom:1px solid #F5E2DA!important;}
.roundtable-playback-controls button{background:#FFF9F6!important;border:1px solid #EBCBBC!important;color:#BA654B!important;box-shadow:none!important;}
.roundtable-playback-controls button:hover,.roundtable-playback-controls button:focus-visible{background:#FCEDE6!important;border-color:#DB9B84!important;color:#A95740!important;}
.roundtable-conversation::before{background:linear-gradient(180deg,transparent,#F3DED5 8%,#F3DED5 92%,transparent)!important;}
.roundtable-reveal .roundtable-speaker-name{color:#A26F5D!important;}
.roundtable-reply-cue{color:#BC826E!important;}
.roundtable-message.is-reply::before{background:#E5BDAE!important;}
.roundtable-reveal .roundtable-speech,.roundtable-reveal .roundtable-message.is-reply .roundtable-speech{color:#6B4B41!important;box-shadow:0 10px 24px rgba(191,100,75,.06)!important;}
.roundtable-reveal .roundtable-message:nth-child(5n+1) .roundtable-speech{background:#FFF2EC!important;border-color:#F2D0C3!important;}
.roundtable-reveal .roundtable-message:nth-child(5n+2) .roundtable-speech{background:#FFF8F2!important;border-color:#F3DBCE!important;}
.roundtable-reveal .roundtable-message:nth-child(5n+3) .roundtable-speech{background:#FFF5F7!important;border-color:#EFD7DF!important;}
.roundtable-reveal .roundtable-message:nth-child(5n+4) .roundtable-speech{background:#FFF7EF!important;border-color:#F2D8C8!important;}
.roundtable-reveal .roundtable-message:nth-child(5n+5) .roundtable-speech{background:#FFF4F0!important;border-color:#F1D0C5!important;}
.roundtable-reveal .roundtable-message.is-writing .roundtable-speech p::after{background:#BF6C54!important;}
.roundtable-reveal .roundtable-typing i{background:#D97E62!important;}
.roundtable-chat-end{background:#FFF4EF!important;color:#A77767!important;}
.roundtable-chat-end span,.roundtable-chat-bottom span:first-child,.roundtable-chat-bottom span:last-child{color:#E7C0B3!important;}
.roundtable-chat-bottom{background:#FFFDFC!important;border-top:1px solid #F4E0D8!important;color:#A77767!important;}


/* v166 — letters guest panel + slower, gentler receive flow */
.letters-panel-label{margin:0 0 8px;display:block;color:#B86B50;font-size:10px;font-weight:850;letter-spacing:.16em;}
.letters-guest-preview .letters-receive-panel-guest{
  background:linear-gradient(135deg,#FFF8F4 0%,#FFFFFF 100%)!important;
  border:1px solid #EED1C5!important;
  box-shadow:0 9px 30px rgba(170,105,77,.045)!important;
  padding:28px 28px!important;
  margin-top:18px!important;
  gap:18px 26px!important;
}
.letters-guest-preview .letters-receive-panel-guest .letters-receive-copy{flex:1 1 420px!important;gap:8px!important;}
.letters-guest-preview .letters-receive-panel-guest .letters-receive-copy strong{font-size:clamp(17px,2vw,22px)!important;font-weight:850!important;color:#553E35!important;line-height:1.5!important;}
.letters-guest-preview .letters-receive-panel-guest .letters-receive-copy span{font-size:13px!important;line-height:1.95!important;color:#80675B!important;}
.letters-guest-preview .letters-receive-panel-guest .letters-receive-button{margin-left:auto!important;}
.letters-guest-preview .letters-preview-banner{display:none!important;}
.letters-preview-sample-text{font-size:15px;line-height:2.05;color:#795E51;background:#FFF6F0;border-radius:16px;padding:18px 20px;margin:4px 0 14px;}
@media(max-width:700px){
  .letters-guest-preview .letters-receive-panel-guest{padding:22px 18px!important;}
  .letters-guest-preview .letters-receive-panel-guest .letters-receive-copy{flex-basis:100%!important;}
}


/* v167: AI empathy badge enlarged/clickable + precise mobile hamburger X */
.ai-appreciation-wrap{position:relative;display:inline-flex;align-items:center;}
.ai-appreciation{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #E1E9ED;border-radius:999px;background:#FCFDFE;color:#64818D;font-size:11px;font-weight:780;line-height:1.2;white-space:nowrap;cursor:pointer;appearance:none;-webkit-appearance:none;transition:background-color .18s ease,border-color .18s ease,transform .18s ease;touch-action:manipulation;}
.ai-appreciation:hover{transform:translateY(-1px);}
.ai-appreciation:focus-visible{outline:2px solid rgba(68,138,167,.24);outline-offset:2px;}
.ai-appreciation-faces{display:inline-flex;align-items:center;padding-right:2px;}
.ai-appreciation-faces img{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-3px;}
.ai-appreciation-faces img:first-child{margin-left:0;}
.ai-appreciation-popover{position:absolute;left:0;top:calc(100% + 8px);z-index:25;min-width:190px;max-width:250px;padding:10px 12px;border-radius:14px;background:#FFFFFF;box-shadow:0 12px 28px rgba(31,41,55,.12);border:1px solid #E7ECEF;color:#546A76;}
.ai-appreciation-popover strong{display:block;margin:0 0 4px;font-size:10px;letter-spacing:.08em;color:#7B92A0;}
.ai-appreciation-popover p{margin:0;font-size:12px;line-height:1.65;color:inherit;}
.work-comment-card.theme-female .ai-appreciation{background:#FFF9F6;border-color:#F1DBD2;color:#9D705E;}
.work-comment-card.theme-male .ai-appreciation{background:#F4FAFC;border-color:#D8E9F0;color:#698895;}
.work-comment-card.theme-female .ai-appreciation-popover{border-color:#F1DBD2;background:#FFFDFC;color:#8A6757;}
.work-comment-card.theme-male .ai-appreciation-popover{border-color:#D8E9F0;background:#FEFFFF;color:#5E7785;}

@media (max-width:820px){
  .site-header .menu-toggle{display:block;position:relative;width:46px!important;height:34px!important;padding:0 5px!important;}
  .site-header .menu-toggle span{position:absolute;left:6px;right:6px;width:auto!important;height:2px!important;margin:0!important;border-radius:999px;background:#28353D;transform-origin:center center;transition:top .22s ease, transform .22s ease, opacity .18s ease;}
  .site-header .menu-toggle span:nth-child(1){top:9px;}
  .site-header .menu-toggle span:nth-child(2){top:16px;}
  .site-header .menu-toggle span:nth-child(3){top:23px;}
  .menu-open .site-header .menu-toggle span:nth-child(1){top:16px;transform:rotate(45deg);}
  .menu-open .site-header .menu-toggle span:nth-child(2){opacity:0;}
  .menu-open .site-header .menu-toggle span:nth-child(3){top:16px;transform:rotate(-45deg);}
}

/* v168 — roundtable play affordance + day label fully coral on work page */
.roundtable-reveal .roundtable-open-arrow,
.roundtable-reveal .roundtable-open-icon{
  color:var(--warm) !important;
}
.roundtable-reveal .roundtable-open-icon{
  background:linear-gradient(180deg,#FDE8E0 0%, #F9C4B2 100%) !important;
  box-shadow:0 10px 24px rgba(232,121,89,.20) !important;
}
.roundtable-reveal .roundtable-open-icon svg path{
  stroke:#FFFFFF !important;
}
.roundtable-reveal .roundtable-open-arrow::before{
  border-color:rgba(232,121,89,.34) !important;
}
.roundtable-reveal .roundtable-open-arrow::after{
  border-color:rgba(232,121,89,.18) !important;
}
.roundtable-reveal .roundtable-open-arrow svg{
  filter:drop-shadow(0 8px 16px rgba(232,121,89,.18)) !important;
}
.roundtable-reveal .roundtable-open-arrow svg circle{
  fill:var(--warm) !important;
  stroke:#F5C3B4 !important;
}
.roundtable-reveal .roundtable-open-arrow svg path{
  fill:#FFFFFF !important;
}
.roundtable-chat-day{
  background:linear-gradient(180deg,#FFF3EE 0%, #FDE9E1 100%) !important;
  border:1px solid #F1C9BB !important;
  color:var(--warm-text) !important;
  box-shadow:0 6px 14px rgba(232,121,89,.08) !important;
}


/* v169 — refine header letter icon, author byline underline, stronger author stat outline */
:root{
  --oshidoku-coral:#E97B57;
  --oshidoku-coral-deep:#D86D4D;
}
.site-header .header-nav .letter-line-icon,
.site-header .header-mobile-letter .letter-line-icon{
  width:19px !important;
  height:19px !important;
  color:#FFFFFF !important;
}
.site-header .header-mobile-letter .letter-line-icon{
  width:18px !important;
  height:18px !important;
}
.site-header .header-nav a.header-desktop-letter,
.site-header .header-mobile-letter{
  background:var(--oshidoku-coral) !important;
  border-color:var(--oshidoku-coral) !important;
}
.site-header .header-nav a.header-desktop-letter:hover,
.site-header .header-nav a.header-desktop-letter:focus-visible,
.site-header .header-mobile-letter:hover,
.site-header .header-mobile-letter:focus-visible{
  background:var(--oshidoku-coral-deep) !important;
  border-color:var(--oshidoku-coral-deep) !important;
}
.site-header .header-nav a.header-desktop-letter::before,
.site-header .header-mobile-letter::before{
  width:6px !important;
  height:6px !important;
  top:7px !important;
  right:7px !important;
  background:#FFFFFF !important;
  box-shadow:0 0 0 1px rgba(233,123,87,.14) !important;
}
@media (max-width:370px){
  .site-header .header-mobile-letter::before{
    top:5px !important;
    right:5px !important;
    width:5px !important;
    height:5px !important;
  }
}
.site-header .header-nav a.header-desktop-letter .header-letters-count,
.header-mobile-letter .header-letters-count{
  color:var(--oshidoku-coral) !important;
  border-color:rgba(233,123,87,.2) !important;
}

/* by- text without underline, underline only on author name */
.work-hero .work-hero-cover-caption .work-hero-cover-author,
.works-section .work-card .work-cover h3.work-cover-title a.work-author-link{
  text-decoration:none !important;
}
.work-hero .work-hero-cover-caption .work-hero-cover-author > .author-link-name,
.works-section .work-card .work-cover h3.work-cover-title a.work-author-link > .author-link-name{
  display:inline-block;
  border-bottom:2px solid currentColor;
  line-height:1.05;
  padding-bottom:1px;
}
.work-hero .work-hero-cover-caption .work-hero-cover-author > span:first-child,
.works-section .work-card .work-cover h3.work-cover-title a.work-author-link > .work-by-prefix{
  border-bottom:none !important;
  text-decoration:none !important;
  margin-right:.12em;
}

/* author stats chips — a clearer outline */
.author-stats span{
  border:1px solid #CFE0E9 !important;
  background:#FFFFFF !important;
  box-shadow:0 1px 0 rgba(140,169,184,.08) !important;
  color:#5B7182 !important;
}
.author-stats strong{
  color:#263640 !important;
}


/* v170 — remove AI empathy pill; place Profile under avatar; unify male/female colors */
.work-comment-card .ai-appreciation-wrap,
.work-comment-card .ai-appreciation,
.work-comment-card .ai-appreciation-popover{display:none!important;}

.work-comment-card .work-comment-reader{
  align-items:flex-start!important;
}
.work-comment-card .work-comment-reader-side{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:8px!important;
  flex:0 0 auto!important;
}
.work-comment-card .work-comment-avatar{
  display:block!important;
}
.work-comment-card .work-comment-reader-copy .work-comment-reader-headline{
  gap:0!important;
}
.work-comment-card .work-comment-reader-copy .work-comment-page-inline{display:none!important;}
.work-comment-card .work-comment-page-avatar{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:92px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 12px!important;
  border-radius:12px!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
.work-comment-card .work-comment-page-avatar::after{
  content:"→";
  margin-left:5px;
  font-size:10px;
  line-height:1;
  color:currentColor;
}
.work-comment-card.theme-male .work-comment-page-avatar{
  background:#FFFFFF!important;
  border:1px solid #CFE4EC!important;
  color:#0D86A5!important;
}
.work-comment-card.theme-male .work-comment-page-avatar:hover,
.work-comment-card.theme-male .work-comment-page-avatar:focus-visible{
  background:#F5FAFC!important;
  border-color:#BADBE7!important;
  color:#0A7894!important;
}
.work-comment-card.theme-female .work-comment-page-avatar{
  background:#FFFFFF!important;
  border:1px solid #E9C7B9!important;
  color:#BD674A!important;
}
.work-comment-card.theme-female .work-comment-page-avatar:hover,
.work-comment-card.theme-female .work-comment-page-avatar:focus-visible{
  background:#FFF6F1!important;
  border-color:#DEB09F!important;
  color:#AB593E!important;
}
@media (max-width:820px){
  .work-comment-card .work-comment-reader-side{gap:7px!important;}
  .work-comment-card .work-comment-page-avatar{
    min-width:84px!important;
    height:28px!important;
    min-height:28px!important;
    border-radius:11px!important;
    font-size:9.5px!important;
  }
}


/* v171 — coral copy/link, fully clickable roundtable teaser, warmer roundtable threads */
.service-hero .hero-letter-teaser,
.service-hero .hero-letter-teaser a,
.service-hero .hero-letter-teaser .hero-letter-teaser-icon{
  color:var(--oshidoku-coral) !important;
}
.service-hero .hero-letter-teaser a{
  text-decoration-color:rgba(233,123,87,.55) !important;
}
.service-hero .hero-roundtable-promo{
  text-decoration:none !important;
  color:inherit !important;
  cursor:pointer;
}
.service-hero .hero-roundtable-promo *{pointer-events:none;}
.service-hero .hero-roundtable-promo:hover .hero-roundtable-promo-copy strong,
.service-hero .hero-roundtable-promo:focus-visible .hero-roundtable-promo-copy strong{
  color:#0D86A5 !important;
}

/* Work-page roundtable opener: remove lingering blue and keep full coral tone */
.roundtable-reveal .roundtable-open-arrow,
.roundtable-reveal .roundtable-open-arrow::before,
.roundtable-reveal .roundtable-open-arrow::after,
.roundtable-reveal .roundtable-open-arrow svg,
.roundtable-reveal .roundtable-open-arrow svg circle,
.roundtable-reveal .roundtable-open-icon{
  box-shadow:none !important;
  filter:none !important;
}
.roundtable-reveal .roundtable-open-arrow::before{
  border-color:rgba(233,123,87,.34) !important;
  background:transparent !important;
}
.roundtable-reveal .roundtable-open-arrow::after{
  border-color:rgba(233,123,87,.18) !important;
  background:transparent !important;
}
.roundtable-reveal .roundtable-open-arrow svg circle,
.roundtable-reveal .roundtable-open-icon{
  fill:var(--oshidoku-coral) !important;
  stroke:#F2C6B8 !important;
  background:var(--oshidoku-coral) !important;
}
.roundtable-reveal .roundtable-open-arrow svg path{fill:#FFFFFF !important;}

/* Roundtable conversation colors should follow each speaker's name tone. */
.roundtable-reveal .roundtable-message{--rt-bg:#FFF7F3;--rt-border:#F1D7CC;--rt-text:#75584D;--rt-name:#C36E53;--rt-dot:#D08B73;}
.roundtable-reveal .roundtable-message[data-reader="misaki"]{--rt-bg:#FFF3EE;--rt-border:#F2D1C5;--rt-text:#7B5B50;--rt-name:#C66C52;--rt-dot:#D68870;}
.roundtable-reveal .roundtable-message[data-reader="sumiko"]{--rt-bg:#FFF8F1;--rt-border:#EEDFCF;--rt-text:#7B6659;--rt-name:#B1826E;--rt-dot:#C7A28F;}
.roundtable-reveal .roundtable-message[data-reader="keisuke"]{--rt-bg:#EEF7FB;--rt-border:#D3E6EF;--rt-text:#556C78;--rt-name:#5A91AB;--rt-dot:#86ADC0;}
.roundtable-reveal .roundtable-message[data-reader="kenichi"]{--rt-bg:#F1F9FC;--rt-border:#D6E9F2;--rt-text:#586E79;--rt-name:#5D93AB;--rt-dot:#88B1C4;}
.roundtable-reveal .roundtable-message[data-reader="nana"]{--rt-bg:#F2F8FD;--rt-border:#D9E8F0;--rt-text:#58707C;--rt-name:#6C96AD;--rt-dot:#8FB5C8;}
.roundtable-reveal .roundtable-message[data-reader="yuki"]{--rt-bg:#F1FBF8;--rt-border:#D8ECE5;--rt-text:#557067;--rt-name:#6E9F92;--rt-dot:#8BB8AA;}
.roundtable-reveal .roundtable-message[data-reader="ayaka"]{--rt-bg:#FFF6F2;--rt-border:#F0D6CC;--rt-text:#7A6258;--rt-name:#A98474;--rt-dot:#C6A392;}
.roundtable-reveal .roundtable-message[data-reader="aoi"]{--rt-bg:#F2FBF8;--rt-border:#D8EBE4;--rt-text:#556B64;--rt-name:#6E9C8E;--rt-dot:#8AB6A8;}
.roundtable-reveal .roundtable-message .roundtable-speaker-name,
.roundtable-reveal .roundtable-message .roundtable-reply-cue{
  color:var(--rt-name) !important;
  opacity:1 !important;
}
.roundtable-reveal .roundtable-message .roundtable-speech,
.roundtable-reveal .roundtable-message.is-reply .roundtable-speech{
  background:var(--rt-bg) !important;
  border:1px solid var(--rt-border) !important;
  color:var(--rt-text) !important;
  box-shadow:none !important;
}
.roundtable-reveal .roundtable-message .roundtable-speech p,
.roundtable-reveal .roundtable-message .roundtable-speech p *{
  color:var(--rt-text) !important;
}
.roundtable-reveal .roundtable-message .roundtable-typing i,
.roundtable-reveal .roundtable-message.is-writing .roundtable-speech p::after{
  background:var(--rt-dot) !important;
}

/* Keep the read-through stat chips clearer. */
.author-stats span{
  border-color:#C7D9E3 !important;
  box-shadow:0 1px 0 rgba(126,155,170,.10) !important;
}


/* v172 — final polish: thinner author underline, coral reader CTA, refined use-page teaser */
.work-hero .work-hero-cover-caption .work-hero-cover-author > .author-link-name,
.works-section .work-card .work-cover h3.work-cover-title a.work-author-link > .author-link-name{
  border-bottom-width:1px !important;
  padding-bottom:0 !important;
}

/* Top-page mini reader CTA should use the coral from "100通り". */
.reader-directory-button{
  background:var(--oshidoku-coral) !important;
  border-color:var(--oshidoku-coral) !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
}
.reader-directory-button:hover,
.reader-directory-button:focus-visible{
  background:var(--oshidoku-coral-deep) !important;
  border-color:var(--oshidoku-coral-deep) !important;
  color:#FFFFFF !important;
  transform:translateY(-1px) !important;
}
.reader-directory-button span{color:#FFFFFF !important;}

/* Reduce avatar overlap in the 5-readers CTA and move the label slightly away. */
.service-hero .hero-roundtable-promo{column-gap:22px !important;}
.service-hero .hero-roundtable-promo-avatars{padding-left:4px !important; margin-right:4px !important;}
.service-hero .hero-roundtable-promo-avatars img{margin-left:-4px !important;}
.service-hero .hero-roundtable-promo-copy{margin-left:5px !important;}
@media(max-width:560px){
  .service-hero .hero-roundtable-promo{column-gap:16px !important;}
  .service-hero .hero-roundtable-promo-copy{margin-left:3px !important;}
}

/* Use page: show featured readers and make the guest button narrower with a blue/coral sign-up link below. */
.use-reader-avatars{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
}
.use-reader-avatars img{
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #FFFFFF;
  box-shadow:0 6px 16px rgba(92,113,128,.12);
  margin-left:-10px;
}
.use-reader-avatars img:first-child{margin-left:0;}
.use-preview-page .use-form .btn-primary{
  width:min(100%,760px) !important;
  margin:6px auto 0 !important;
  align-self:center !important;
  display:flex !important;
  justify-content:center !important;
}
.use-register-link{
  margin:10px 0 0 !important;
  text-align:center;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
}
.use-register-link a{
  color:#0D86A5;
  text-decoration:none;
  border-bottom:1px solid rgba(13,134,165,.35);
}
.use-register-link a::after{
  content:' ↗';
  color:var(--oshidoku-coral);
}
.use-register-link a:hover,
.use-register-link a:focus-visible{
  color:var(--oshidoku-coral);
  border-bottom-color:rgba(233,123,87,.45);
}
@media(min-width:900px){
  .use-preview-page .use-form .btn-primary{max-width:48%;}
}
@media(max-width:640px){
  .use-reader-avatars img{width:46px;height:46px;margin-left:-9px;}
  .use-preview-page .use-form .btn-primary{max-width:100%;}
}


/* v173 — integrated inline letter link and smallest legible profile chip */
.service-hero .hero-letter-teaser a,
.service-hero .hero-letter-teaser a:visited{
  display:inline !important;
  margin:0 !important;
  font-weight:850 !important;
  color:var(--oshidoku-coral) !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  white-space:nowrap;
}
.service-hero .hero-letter-teaser a strong{font-weight:850 !important;}
.service-hero .hero-letter-teaser a:hover,
.service-hero .hero-letter-teaser a:focus-visible{
  color:var(--oshidoku-coral-deep) !important;
}
.work-comment-card .work-comment-reader-side{gap:6px!important;}
.work-comment-card .work-comment-page-avatar{
  width:max-content!important;
  min-width:0!important;
  max-width:100%!important;
  height:23px!important;
  min-height:23px!important;
  padding:0 7px!important;
  margin:0!important;
  border-radius:8px!important;
  font-size:9px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
.work-comment-card .work-comment-page-avatar::after{
  margin-left:3px!important;
  font-size:9px!important;
}
@media (max-width:820px){
  .work-comment-card .work-comment-reader-side{gap:5px!important;}
  .work-comment-card .work-comment-page-avatar{
    width:max-content!important;
    min-width:0!important;
    height:23px!important;
    min-height:23px!important;
    padding:0 7px!important;
    border-radius:8px!important;
    font-size:9px!important;
  }
}


/* v174 — keep homepage roundtable teaser subtitle on a single line. */
.service-hero .hero-roundtable-promo{
  column-gap:11px!important;
  padding-left:12px!important;
  padding-right:12px!important;
}
.service-hero .hero-roundtable-promo-avatars{
  flex-basis:85px!important;
  width:85px!important;
  min-width:85px!important;
  margin-right:0!important;
}
.service-hero .hero-roundtable-promo-copy{
  min-width:0!important;
  margin-left:0!important;
}
.service-hero .hero-roundtable-promo-copy .promo-description{
  display:block!important;
  white-space:nowrap!important;
  font-size:10.5px!important;
  letter-spacing:-.045em!important;
  line-height:1.5!important;
}
.service-hero .promo-description-short{display:none!important;}
.service-hero .hero-roundtable-promo-play{
  flex-basis:36px!important;
  width:36px!important;
}
@media (max-width:560px){
  .service-hero .hero-roundtable-promo{
    column-gap:8px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .service-hero .hero-roundtable-promo-avatars{
    flex-basis:72px!important;
    width:72px!important;
    min-width:72px!important;
  }
  .service-hero .hero-roundtable-promo-play{
    flex-basis:32px!important;
    width:32px!important;
  }
  .service-hero .hero-roundtable-promo-copy .promo-description{font-size:9px!important;letter-spacing:-.045em!important;}
  .service-hero .promo-description-full{display:none!important;}
  .service-hero .promo-description-short{display:inline!important;}
}
@media (max-width:360px){
  .service-hero .hero-roundtable-promo{column-gap:6px!important;}
  .service-hero .hero-roundtable-promo-avatars{flex-basis:67px!important;width:67px!important;min-width:67px!important;}
  .service-hero .hero-roundtable-promo-copy .promo-description{font-size:8.2px!important;}
}


/* v175 work hero balance */
@media (min-width: 901px){
  .work-hero .inner.work-hero-inner{
    grid-template-columns:minmax(0,1.02fr) minmax(400px,.86fr)!important;
    gap:56px!important;
    align-items:stretch!important;
  }
  .work-hero .work-hero-cover{
    display:flex!important;
    height:100%!important;
    min-height:100%!important;
  }
  .work-hero .work-hero-cover .work-hero-thumb{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
  }
  .work-hero .work-hero-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-self:stretch!important;
  }
  .work-hero .work-hero-copy .summary-box{
    min-height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  .work-hero .work-hero-image-pill{
    top:14px!important;
    left:14px!important;
    padding:7px 17px!important;
    font-size:12px!important;
    line-height:1.2!important;
    border-radius:999px!important;
  }
}

@media (max-width: 900px){
  .work-hero .work-hero-image-pill{
    padding:6px 14px!important;
    font-size:11px!important;
    line-height:1.15!important;
  }
}