/* Shared editorial atmosphere for the research and tutoring detail pages.
   Loaded last on both pages: it owns the section films, the scrims that keep
   copy readable over them, and Japanese line-breaking. */
body.detail-editorial { background:#000 !important; }

body.detail-editorial section:not(.hero),
body.detail-editorial .hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:transparent !important;
}

/* ---- section films: one fixed stage, one layer per film, cross-faded ---- */
.film-stage {
  position:fixed;
  z-index:0;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  height:100lvh;
  overflow:hidden;
  background:#000;
  pointer-events:none;
}
.film-layer {
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  opacity:0;
  transition:opacity 1.1s ease;
}
.film-layer.is-active { opacity:1; }
.film-layer video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .7s ease;
}
.film-layer video.is-ready { opacity:1; }
/* The film stays bright; this veil only evens out the exposure. */
.film-stage::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(var(--film-veil,3,8,14),.3);
}
body.detail-research { --film-veil:2,12,18; }
body.detail-tutoring { --film-veil:8,9,18; }

/* The header and progress bar stay fixed; everything else stacks above the stage. */
body.detail-editorial > :not(.film-stage):not(script):not(header):not(.progress) { position:relative; z-index:1; }
body.detail-editorial > .bg { display:none; }
body.detail-editorial .hero>.hero-inner,
body.detail-editorial .hero>.scrollcue { position:relative; z-index:2; }
body.detail-editorial section>.wrap { position:relative; z-index:1; }

/* Copy sits on the left, so the left edge carries the shade and the right
   two fifths of the frame keep the film visible. */
body.detail-editorial section:not(.hero)::before { content:none !important; }
body.detail-editorial section:not(.hero)::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(var(--film-veil),.86),rgba(var(--film-veil),.66) 46%,rgba(var(--film-veil),.3)) !important;
  pointer-events:none;
}
body.detail-editorial .hero::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:
    radial-gradient(ellipse 62% 54% at 50% 56%,rgba(var(--film-veil),.66),transparent 72%),
    linear-gradient(180deg,rgba(var(--film-veil),.5),transparent 26%,transparent 70%,rgba(var(--film-veil),.74));
  pointer-events:none;
}
body.detail-editorial .divider { display:none; }
body.detail-editorial footer { background:rgba(var(--film-veil),.88); margin-top:0; }

body.detail-editorial section>.wrap,
body.detail-editorial footer>.wrap {
  width:min(1540px,calc(100vw - 42px));
  max-width:1540px !important;
  padding-inline:clamp(20px,3vw,48px) !important;
}
body.detail-editorial :is(h2.title,.reelhead,.hero h1,p.lead,.hero .sub) { text-shadow:0 2px 22px rgba(0,0,0,.62); }

/* Panels carry their own surface so they read over any frame of the film. */
body.detail-editorial :is(.rolecard,.result,.vrow,.linkcard,.chip,.mcard,.exp,.update,.figcard,.award,.quote,.callout,.flow-step,.proof-row,.trust-strip) {
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
          backdrop-filter:blur(14px) saturate(1.1);
}
body.detail-editorial :is(.rolecard,.result,.vrow,.linkcard,.chip,.mcard,.exp,.update) {
  background:linear-gradient(150deg,rgba(var(--film-veil),.78),rgba(var(--film-veil),.6));
}
body.detail-editorial :is(.quote,.callout) { background:linear-gradient(90deg,rgba(var(--film-veil),.8),rgba(var(--film-veil),.46)); }

/* height:auto lets the 16:9 ratio win over the height attribute, which
   otherwise stretched these figures into tall crops. */
.firefly-research-visual {
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border:1px solid rgba(126,241,223,.18);
}
.genome-visual { min-height:260px; object-position:center; }

/* ---- labels and line breaking ---- */
.eyebrow { flex-wrap:wrap; row-gap:2px; }
.eyebrow>span { white-space:nowrap; }
.eyebrow>span+span::before { content:"·"; margin-right:12px; opacity:.7; }
html[lang="ja"] .eyebrow .eyebrow-ja { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-style:normal; letter-spacing:.2em; }

/* Japanese copy breaks between phrases, never inside a word. Browsers without
   auto-phrase still honour the .nb groups written into the headings. */
html[lang="ja"] body.detail-editorial :is(h1,h2,h3,p,li,dd,dt,blockquote,figcaption,.figcaption,.callout,.an,.as,.lt,.ls,.et,.ed,.lb,.big) {
  line-break:strict;
  word-break:auto-phrase;
  overflow-wrap:anywhere;
}
.nb { display:inline-block; }
body.detail-editorial :is(h2.title,.reelhead,.hero h1) { text-wrap:balance; }
body.detail-editorial :is(p.lead,.hero .sub,.rolecard p,.result p,.vrow p,.mcard p,.disc p,.update p,.flow-step p) { text-wrap:pretty; }
body.detail-editorial h2.title .accent,
body.detail-editorial .reelhead .accent { font-family:"Cormorant Garamond","Noto Serif JP",serif; font-style:italic; }
html[lang="ja"] body.detail-editorial h2.title .accent,
html[lang="ja"] body.detail-editorial .reelhead .accent { font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif; font-style:normal; }

/* A drop cap splits Japanese words in two, so only the English edition keeps it. */
html[lang="en"] .detail-dropcap::first-letter {
  float:left;
  margin:.08em .14em 0 0;
  color:var(--bio-cyan,var(--amber,#7ef1df));
  font-family:"Cormorant Garamond","Times New Roman",serif;
  font-size:3.4em;
  font-weight:500;
  line-height:.72;
}

body.detail-editorial section p b,
body.detail-editorial section p strong { color:#fff; }
body.detail-research .disc h3 { font-size:clamp(1.55rem,2.2vw,2.15rem) !important; }
body.detail-research .disc p { font-size:clamp(1rem,1.12vw,1.12rem) !important; line-height:1.9; }
body.detail-research .badge { white-space:nowrap; font-size:clamp(1rem,1.15vw,1.2rem) !important; line-height:1.25 !important; }

body.detail-motion-ready .detail-reveal {
  opacity:0;
  transform:translateY(42px);
  /* Timing comes from yamada-refinement-20260821.css, which declares it !important. */
}
body.detail-motion-ready .detail-reveal.detail-visible { opacity:1; transform:none; }

/* ---- tutoring page: hero proof, actions, lesson flow, profile proof ---- */
body.detail-tutoring .hero { padding-top:132px; }
body.detail-tutoring .hero h1 { font-size:clamp(2.3rem,5.2vw,4.4rem); line-height:1.22; letter-spacing:.02em; }
body.detail-tutoring .hero-inner { max-width:1080px; }
body.detail-tutoring .hero .sub { max-width:44ch; }
.trust-strip {
  display:grid;
  grid-template-columns:.8fr 1fr 1fr 1.3fr;
  width:min(1080px,100%);
  margin:34px auto 0;
  border:1px solid rgba(255,196,107,.34);
  background:rgba(8,9,18,.62);
  text-align:left;
}
.trust-strip>div { padding:16px 20px 17px; border-left:1px solid rgba(255,196,107,.2); }
.trust-strip>div:first-child { border-left:0; }
.trust-strip dt {
  margin:0 0 5px;
  color:var(--amber);
  font-family:"Cormorant Garamond",serif;
  font-size:.82rem;
  font-style:italic;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.trust-strip dd { margin:0; color:#fff; font-size:1.02rem; font-weight:600; line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:28px; }
.action {
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:56px;
  padding:0 26px;
  border:1px solid var(--amber);
  color:#fff;
  font-size:.98rem;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  background:rgba(8,9,18,.6);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.action::after { content:""; width:26px; height:1px; background:currentColor; transition:width .25s ease; }
.action:hover,.action:focus-visible { transform:translateY(-2px); background:rgba(255,196,107,.18); }
.action:hover::after,.action:focus-visible::after { width:38px; }
.action:focus-visible { outline:3px solid #fff; outline-offset:-7px; }
.action--solid:focus-visible { outline-color:#0b0f1a; }
/* clip-path cuts anything drawn outside the box, so the focus ring sits inside it; the 1px border it cuts at the two notched corners is redrawn as a diagonal. */
.action { position:relative; }
.action:not(.action--solid)::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(45deg,transparent calc(50% - 1px),var(--amber) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) right top/12px 12px no-repeat,linear-gradient(45deg,transparent calc(50% - 1px),var(--amber) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) left bottom/12px 12px no-repeat; }
/* The reveal leaves clip-path:inset(0) on these wrappers; a small negative inset stops it cutting the lifted button and the row's focus ring. */
body.detail-motion-ready :is(.hero-actions,.section-more,a.proof-row).reveal.in { clip-path:inset(-10px); }
.action--solid { background:var(--amber); color:#0b0f1a; }
.action--solid:hover,.action--solid:focus-visible { background:#ffd592; }

.flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:42px 0 0; padding:0; list-style:none; counter-reset:flow; border:1px solid var(--line2); }
.flow-step { position:relative; padding:26px 22px 28px; border-left:1px solid var(--line2); background:linear-gradient(160deg,rgba(8,9,18,.8),rgba(8,9,18,.58)); counter-increment:flow; }
.flow-step:first-child { border-left:0; }
.flow-step::before {
  content:counter(flow,decimal-leading-zero);
  display:block;
  margin-bottom:22px;
  color:var(--amber);
  font-family:"Cormorant Garamond",serif;
  font-size:2rem;
  font-style:italic;
  line-height:1;
}
.flow-step h3 { margin:0 0 10px; color:#fff; font-size:1.12rem; line-height:1.5; }
.flow-step p { margin:0; color:#c6cfe4; font-size:.9rem; line-height:1.85; }

.proof { display:grid; gap:0; margin:34px 0 0; padding:0; list-style:none; border-top:1px solid var(--line2); }
.proof-row {
  display:grid;
  grid-template-columns:118px minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  padding:18px 20px;
  border-bottom:1px solid var(--line2);
  background:rgba(8,9,18,.6);
  color:inherit;
  text-decoration:none;
  transition:background .25s ease;
}
a.proof-row:hover,a.proof-row:focus-visible { background:rgba(255,196,107,.12); }
.proof-row .pk { color:var(--amber); font-family:"Cormorant Garamond",serif; font-size:.95rem; font-style:italic; letter-spacing:.12em; }
.proof-row .pt { display:block; color:#fff; font-size:1.02rem; font-weight:600; line-height:1.6; }
.proof-row .ps { display:block; margin-top:2px; color:var(--muted); font-size:.84rem; line-height:1.6; }
.proof-row .pa { color:var(--amber); font-size:.8rem; letter-spacing:.08em; white-space:nowrap; }
.section-more { margin:26px 0 0; }

body.detail-editorial .linkcard .lt,
body.detail-editorial .linkcard .ls { display:block; }
body.detail-editorial .linkcard .ls { word-break:normal; overflow-wrap:anywhere; }
/* ---- consultation box ---- */
.consult-box {
  display:grid;
  gap:18px;
  max-width:760px;
  margin:34px 0 0;
  padding:clamp(20px,3vw,34px);
  border:1px solid rgba(255,196,107,.4);
  background:rgba(8,9,18,.78);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
}
.consult-field { display:grid; gap:8px; }
.consult-field>span { color:#fff; font-size:.95rem; font-weight:700; letter-spacing:.04em; }
.consult-field :is(input,textarea) {
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(150,168,224,.5);
  border-radius:2px;
  background:rgba(4,6,14,.82);
  color:#fff;
  font:inherit;
  font-size:1rem;
  line-height:1.7;
}
.consult-field textarea { min-height:168px; resize:vertical; }
.consult-field :is(input,textarea)::placeholder { color:#8a94b4; }
.consult-field :is(input,textarea):focus-visible { border-color:var(--amber); outline:2px solid var(--amber); outline-offset:2px; }
/* Left empty by people; filled only by automated senders. */
.consult-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consult-send { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px 22px; }
.consult-send .action { cursor:pointer; font-family:inherit; }
.consult-send .action:disabled { cursor:progress; opacity:.6; transform:none; }
.consult-note { margin:0; color:#c6cfe4; font-size:.84rem; line-height:1.75; }
.consult-note a { color:var(--amber); }
.consult-status { min-height:1.7em; margin:0; font-size:.95rem; font-weight:600; }
.consult-status[data-state="done"] { color:#8ff5e6; }
.consult-status[data-state="error"] { color:#ffb4a2; }
.consult-status[data-state="pending"] { color:#c6cfe4; }
.consult-sub { margin:64px 0 8px; color:#fff; font-size:clamp(1.25rem,2.2vw,1.6rem); }
html[lang="ja"] .consult-sub { font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif; }
.consult-sublead { max-width:64ch; margin:0; color:#c6cfe4; font-size:.95rem; }
body.detail-tutoring .results { margin-top:34px; }
body.detail-tutoring .result p,
body.detail-tutoring .rolecard p,
body.detail-tutoring .vrow p,
body.detail-tutoring .growth-card p { color:#c6cfe4; }
body.detail-tutoring .growth-card { background:linear-gradient(150deg,rgba(14,20,44,.88),rgba(8,12,26,.8)); }
body.detail-tutoring .growth-card p { font-size:.9rem; }
body.detail-tutoring .growth-proof { margin-left:0; padding-left:0; font-size:.9rem; color:#c6cfe4; }

@media (max-width:1100px) {
  .flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flow-step:nth-child(odd) { border-left:0; }
  .flow-step:nth-child(n+3) { border-top:1px solid var(--line2); }
  .flow-step:last-child:nth-child(odd) { grid-column:1 / -1; }
}

@media (max-width:760px) {
  /* On a phone the copy fills the width, so the shade runs top to bottom instead. */
  body.detail-editorial section:not(.hero)::after {
    background:linear-gradient(180deg,rgba(var(--film-veil),.7),rgba(var(--film-veil),.8)) !important;
  }
  body.detail-editorial section>.wrap,
  body.detail-editorial footer>.wrap { width:calc(100vw - 24px); padding-inline:12px !important; }
  /* Two deliberate rows on a phone: the English label, then the Japanese one. */
  .eyebrow { display:inline-grid; grid-template-columns:22px auto; align-items:center; gap:2px 9px; font-size:.86rem; letter-spacing:.2em; }
  .eyebrow::before { width:22px; }
  .eyebrow>span+span { grid-column:2; }
  .eyebrow>span+span::before { content:none; }
  .hero .eyebrow { justify-items:center; }
  body.detail-tutoring .hero { padding-top:104px; }
  body.detail-tutoring .hero h1 { font-size:clamp(1.75rem,8vw,2.6rem); }
  /* On a phone the proof becomes a one-column record: label left, value right. */
  .trust-strip { grid-template-columns:1fr; margin-top:22px; }
  .trust-strip>div { display:grid; grid-template-columns:6.4em minmax(0,1fr); align-items:baseline; gap:10px; padding:11px 14px; border-left:0; }
  .trust-strip>div+div { border-top:1px solid rgba(255,196,107,.2); }
  .trust-strip dt { margin:0; font-size:.72rem; letter-spacing:.14em; }
  .trust-strip dd { font-size:.9rem; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .action { justify-content:space-between; }
  .flow { grid-template-columns:1fr; margin-top:28px; }
  .flow-step { border-left:0; padding:20px 18px 22px; }
  .flow-step:nth-child(n+2) { border-top:1px solid var(--line2); }
  .flow-step::before { margin-bottom:12px; font-size:1.7rem; }
  .proof-row { grid-template-columns:1fr; gap:6px; padding:16px 14px; }
  .consult-send { grid-template-columns:1fr; }
  .consult-sub { margin-top:44px; }
}

/* The lead keeps its emphasis; inside cards it must not outrank the card heading. */
body.detail-tutoring :is(.flow-step,.result,.vrow,.growth-card,.consult-send) .phrase-emphasis { font-size:1em; font-weight:600; color:#e6ecf8; letter-spacing:inherit; line-height:inherit; }
body.detail-tutoring .action .phrase-emphasis { font:inherit; color:inherit; letter-spacing:inherit; }

@media (prefers-reduced-motion:reduce) {
  .film-layer,.film-layer video,.action,.action::after { transition:none; }
  body.detail-motion-ready .detail-reveal { opacity:1 !important; filter:none !important; transform:none !important; transition:none !important; }
}