/* ════════════════════════════════════════════════════════════════
   C·Sc · Scroll Type — スクロール拡縮タイポ
   架空タイプファウンダリー FOUNDRY ÅNGSTRÖM の新作書体 QUARTZ DISPLAY
   sticky stage × 4 panel × Fraunces 可変軸（opsz/wght/SOFT/WONK）
   ════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:where(html,body){line-break:strict;word-break:normal;overflow-wrap:break-word}
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li){text-wrap:pretty}

:root{
  --bg:#f4f3ee;
  --ink:#0a0a0a;
  --muted:#6a6a6a;
  --line:#d8d6cc;
  --paper:#fff;
  --hi:#ff2d55;
  --alt:#0066ff;
  --font:'DM Sans','Noto Sans JP',sans-serif;
  --display:'Fraunces','DM Sans',serif;
  --mono:'JetBrains Mono',monospace;

  /* stage tokens */
  --st-bg:#0a0a0a;
  --st-ink:#f4f3ee;
  --st-dim:rgba(255,255,255,.55);
  --st-faint:rgba(255,255,255,.10);
  --st-line:rgba(255,255,255,.08);
  --hairline:rgba(255,255,255,.32);
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.65}
a{color:inherit;text-decoration:none}

/* ─── HEADER ─── */
header.site{
  position:sticky;top:0;z-index:50;background:var(--bg);
  padding:1rem clamp(1.2rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--ink);
  --site-h:56px;
}
.back{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;display:inline-flex;align-items:center;gap:.6em}
.back .arrow{transition:transform .25s}
.back:hover .arrow{transform:translateX(-.3em)}
.cell-marker{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;color:var(--hi)}

/* ─── intro ─── */
.intro{
  max-width:1200px;margin:0 auto;
  padding:clamp(5rem,12vw,9rem) clamp(1.5rem,4vw,3rem) clamp(3rem,8vw,6rem);
  min-height:78vh;display:flex;flex-direction:column;justify-content:center;
}
.kicker{
  display:inline-block;align-self:flex-start;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;color:var(--muted);
  margin-bottom:1.8rem;
}
.intro h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(4rem,15vw,10rem);
  line-height:.94;letter-spacing:-.025em;
  font-variation-settings:'opsz' 144,'wght' 500,'SOFT' 28,'WONK' 0;
}
.intro .lead{font-size:clamp(1rem,1.25vw,1.15rem);color:var(--muted);max-width:36em;margin-top:2rem;line-height:1.95}
.intro .lead code{font-family:var(--mono);font-size:.86em;background:var(--paper);padding:.1em .35em;border:1px solid var(--line)}
.intro .lead strong{color:var(--ink);font-weight:500;border-bottom:1px solid var(--ink)}
.scroll-cue{margin-top:2.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;color:var(--muted);animation:cue 1.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes cue{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.4;transform:translateY(.3em)}}

/* ════════════════════════════════════════════
   COMPONENT: .scroll-type
   - section 全体 600vh、内部 .st-stage が sticky 100vh
   - 各 .st-panel は data-from/-to の進捗範囲で fade
   - 要素ごとに data-prop-* で値範囲をスクロールで補間
   ════════════════════════════════════════════ */

.scroll-type{
  position:relative;
  background:var(--st-bg);color:var(--st-ink);
  --st-section:600vh;
  --site-header-h:56px;
  height:var(--st-section);
}

/* masthead は section の冒頭に絶対配置 → stage 上に貼る */
.st-masthead{
  position:absolute;left:0;right:0;top:0;z-index:30;
  background:var(--st-bg);
  display:flex;justify-content:space-between;align-items:center;gap:1.4rem;
  padding:.95rem clamp(1.2rem,3vw,2.4rem);
  border-bottom:1px solid var(--st-line);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;color:var(--st-dim);
}
.st-brand{display:inline-flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.st-bm{
  font-family:var(--display);font-style:normal;color:var(--hi);
  font-size:1.1rem;line-height:1;letter-spacing:0;
  font-variation-settings:'wght' 720;
}
.st-bn{color:#fff;font-weight:700;letter-spacing:.32em;font-size:.74rem}
.st-bd{color:rgba(255,255,255,.42)}

.st-progress-meta{display:inline-flex;align-items:center;gap:.85rem;color:#fff}
.st-pct{
  font-variant-numeric:tabular-nums;font-weight:500;
  letter-spacing:.18em;font-size:.74rem;
  min-width:2.6em;text-align:right;
}
.st-pct i{font-style:normal;color:rgba(255,255,255,.4);margin-left:.1em;font-size:.78em}
.st-track{width:140px;height:1px;background:var(--st-faint);position:relative;overflow:hidden;display:inline-block}
.st-track i{
  position:absolute;left:0;top:0;height:100%;width:var(--rp,0%);
  background:var(--hi);
  transition:width .15s linear;
}

/* ── sticky stage ── */
.st-stage{
  position:sticky;
  top:var(--site-header-h);
  height:calc(100vh - var(--site-header-h));
  width:100%;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  /* masthead 高さぶん padding-top */
  padding-top:54px;
}

/* hint */
.st-scroll-hint{
  position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.32em;color:rgba(255,255,255,.5);
  z-index:25;
  animation:hint-bob 1.8s ease-in-out infinite;
}
@keyframes hint-bob{
  0%,100%{transform:translate(-50%,0);opacity:.7}
  50%    {transform:translate(-50%,.5em);opacity:1}
}

/* ── 各 panel ── */
.st-panel{
  position:absolute;inset:54px 0 0 0;
  display:grid;place-items:center;
  padding:clamp(2rem,5vw,4rem);
  opacity:0;visibility:hidden;
  pointer-events:none;
  text-align:center;
  transition:opacity .25s ease;
}
.st-panel.is-on{opacity:var(--panel-op,1);visibility:visible;pointer-events:auto}

/* tag（パネル番号 / セクション名） */
.st-tag{
  position:absolute;left:clamp(1.2rem,3vw,2.4rem);top:clamp(1.2rem,3vw,2.4rem);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.32em;
  color:var(--hi);font-weight:500;
  text-transform:uppercase;
}
.st-tag--top{color:rgba(255,255,255,.5)}

/* ────────── 01 COVER ────────── */
.st-panel--cover{
  grid-template-rows:auto auto auto;
  align-content:center;justify-items:center;
  gap:clamp(1.4rem,3vw,2.4rem);
}
.st-cover-title{
  font-family:var(--display);font-weight:500;line-height:.88;
  color:#fff;
  font-variation-settings:'opsz' 144,'wght' 500,'SOFT' 14,'WONK' 0;
  letter-spacing:-.025em;
  /* font-size / letter-spacing / wght / opsz は JS が CSS 変数経由で書き込む */
  font-size:var(--prop-fsize,180px);
  letter-spacing:calc(var(--prop-tracking,-1) * .01em);
  font-variation-settings:'opsz' var(--prop-opsz,144),'wght' var(--prop-wght,500),'SOFT' 14,'WONK' 0;
  will-change:font-size,letter-spacing,font-variation-settings;
}
.st-cover-sub{
  font-family:var(--display);font-weight:400;color:rgba(255,255,255,.78);
  font-size:clamp(1.1rem,2.2vw,1.7rem);line-height:1.4;
  font-variation-settings:'opsz' 24,'wght' 360,'SOFT' 50,'WONK' 0;
  opacity:var(--prop-opacity,1);
  max-width:32em;
}
.st-cover-sub em{font-style:italic;color:var(--hi)}
.st-cover-meta{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .9rem;justify-content:center;
  margin-top:.8rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;
  color:rgba(255,255,255,.55);
  opacity:var(--prop-opacity,1);
}
.st-cover-meta li{display:inline-flex;gap:.5em;align-items:baseline;border:1px solid rgba(255,255,255,.18);padding:.4em .7em}
.st-cover-meta span{color:rgba(255,255,255,.4)}

/* ────────── 02 ANATOMY ────────── */
.st-panel--anatomy{align-content:center}
.st-glyph-stage{
  position:relative;
  width:100%;max-width:1100px;aspect-ratio:1.6;
  display:grid;place-items:center;
}
.st-glyph{
  font-family:var(--display);font-weight:400;color:#fff;
  font-size:var(--prop-fsize,360px);
  line-height:.85;
  font-variation-settings:
    'opsz' var(--prop-opsz,144),
    'wght' var(--prop-wght,500),
    'SOFT' var(--prop-soft,0),
    'WONK' 0;
  text-shadow:0 22px 80px rgba(255,45,85,.2);
  will-change:font-size,font-variation-settings;
}

/* annotations：ヘアラインの「指差し」 */
.st-ann{
  position:absolute;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;
  color:rgba(255,255,255,.85);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  max-width:14rem;
  padding:.4em .6em;
  background:rgba(0,0,0,.32);backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.12);
  opacity:var(--prop-show,0);
  transform:translateY(var(--ann-ty,0));
  transition:opacity .3s ease, transform .3s ease;
}
.ann-no{color:var(--hi);font-weight:500}
.ann-l{color:#fff;font-weight:500;letter-spacing:.22em}
.ann-d{display:block;width:100%;color:rgba(255,255,255,.5);font-family:var(--font);font-size:.7rem;letter-spacing:.06em;text-transform:none;margin-top:.2em}

/* 注釈の位置：ヘアラインで Q を指す */
.st-ann--bowl    {top:14%;left:6%}
.st-ann--bowl::after,
.st-ann--counter::after,
.st-ann--tail::after,
.st-ann--terminal::after,
.st-ann--baseline::after{
  content:"";position:absolute;background:linear-gradient(to right,transparent,var(--hairline) 35%,var(--hairline));
  height:1px;
}
.st-ann--bowl::after    {left:100%;top:50%;width:120px}
.st-ann--counter {top:30%;right:8%}
.st-ann--counter::after {right:100%;top:50%;width:140px;background:linear-gradient(to left,transparent,var(--hairline) 35%,var(--hairline))}
.st-ann--tail     {bottom:18%;left:18%}
.st-ann--tail::after    {left:100%;top:50%;width:100px}
.st-ann--terminal {bottom:8%;right:14%}
.st-ann--terminal::after{right:100%;top:50%;width:80px;background:linear-gradient(to left,transparent,var(--hairline) 35%,var(--hairline))}
.st-ann--baseline {bottom:34%;right:6%}
.st-ann--baseline::after{right:100%;top:50%;width:160px;background:linear-gradient(to left,transparent,var(--hairline) 35%,var(--hairline))}

@media(max-width:760px){
  .st-ann{font-size:.58rem;max-width:10rem}
  .st-ann::after{display:none}
  .st-ann--bowl    {top:6%;left:2%}
  .st-ann--counter {top:18%;right:2%}
  .st-ann--tail    {bottom:24%;left:2%}
  .st-ann--terminal{bottom:8%;right:2%}
  .st-ann--baseline{bottom:38%;right:2%}
}

/* ────────── 03 WEIGHT AXIS ────────── */
.st-panel--weights{align-content:center}
.st-weight-stage{
  position:relative;width:100%;max-width:1200px;display:grid;
  grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.6rem);
  align-items:center;justify-items:start;
}
.st-word{
  font-family:var(--display);color:#fff;
  font-size:clamp(3.4rem,11vw,8.2rem);
  line-height:.92;letter-spacing:calc(var(--prop-tracking,-1) * .01em);
  font-variation-settings:
    'opsz' var(--prop-opsz,144),
    'wght' var(--prop-wght,500),
    'SOFT' var(--prop-soft,0),
    'WONK' 0;
  text-align:left;width:100%;
  will-change:font-variation-settings,letter-spacing;
}
.st-weight-readout{
  position:absolute;top:0;right:0;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;
  text-align:right;color:rgba(255,255,255,.6);
}
.wt-name{display:block;color:#fff;font-weight:500;font-size:.86rem;letter-spacing:.32em}
.wt-num{display:block;color:var(--hi);font-variant-numeric:tabular-nums;font-size:.7rem;margin-top:.3em}

.st-weight-ladder{
  list-style:none;display:flex;flex-direction:column;gap:.45rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:rgba(255,255,255,.4);
}
.st-weight-ladder li{display:inline-flex;gap:.6rem;align-items:baseline;transition:color .3s ease}
.st-weight-ladder li span{color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums}
.st-weight-ladder li.is-on{color:#fff}
.st-weight-ladder li.is-on span{color:var(--hi)}

@media(max-width:760px){
  .st-weight-stage{grid-template-columns:1fr}
  .st-weight-ladder{flex-direction:row;flex-wrap:wrap}
  .st-weight-readout{position:static;text-align:left;margin-top:.6rem}
}

/* ────────── 04 SPECIMEN + SPEC CARD ────────── */
.st-panel--specimen{align-content:start;padding-top:clamp(3rem,7vw,5rem)}
.st-specimen-stage{
  width:100%;max-width:1200px;
  display:grid;gap:clamp(2rem,4vw,3.4rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:980px){
  .st-specimen-stage{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

.st-quote{
  font-family:var(--display);color:#fff;font-weight:400;
  line-height:1.05;text-align:left;
  font-variation-settings:
    'opsz' var(--prop-opsz,144),
    'wght' var(--prop-wght,500),
    'SOFT' 30,
    'WONK' var(--prop-wonk,0);
  letter-spacing:-.015em;
}
.st-quote span{
  display:block;
  font-size:var(--prop-fsize,52px);
  font-style:italic;
}
.st-quote span:nth-child(2){font-style:normal;color:rgba(255,255,255,.85)}
.st-quote span:nth-child(3){color:var(--hi)}

.st-spec-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  padding:1.6rem 1.6rem 1.2rem;
  opacity:var(--prop-opacity,1);
  text-align:left;
  font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.85);
}
.st-spec-card header{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.7rem;margin-bottom:.9rem;
  border-bottom:1px solid var(--st-line);
}
.st-spec-card h4{
  font-family:var(--display);font-weight:500;color:#fff;
  font-size:1.5rem;letter-spacing:-.01em;line-height:1;
  font-variation-settings:'opsz' 36,'wght' 560;
}
.sc-ver{font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;color:rgba(255,255,255,.4)}

.st-spec-card dl{
  display:grid;grid-template-columns:max-content 1fr;column-gap:1rem;row-gap:.55rem;
}
.st-spec-card dt{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;
  color:rgba(255,255,255,.42);text-transform:uppercase;
  padding-top:.3rem;
}
.st-spec-card dd{color:rgba(255,255,255,.92);line-height:1.55}
.st-spec-card dd em{font-style:italic;color:rgba(255,255,255,.6);font-family:var(--display);font-size:.96em}
.st-spec-card dd i{font-style:normal;font-family:var(--mono);font-size:.84em;color:rgba(255,255,255,.75)}

.st-spec-card footer{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem;
  padding-top:1rem;border-top:1px solid var(--st-line);
}

/* CTA（magnetic） */
.cta{
  position:relative;display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;font-weight:500;
  color:rgba(255,255,255,.95);
  background:transparent;border:1px solid rgba(255,255,255,.3);
  padding:.9em 1.3em;cursor:pointer;overflow:hidden;
  transition:color .25s ease,border-color .25s ease;
}
.cta::before{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-101%);transition:transform .42s cubic-bezier(.7,0,.2,1)}
.cta > *{position:relative;z-index:1}
.cta:hover{color:#0a0a0a;border-color:#fff}
.cta:hover::before{transform:translateX(0)}
.cta-arrow{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cta:hover .cta-arrow{transform:translateY(.2em)}
.cta--solid{background:#fff;color:#0a0a0a;border-color:#fff}
.cta--solid::before{background:var(--hi)}
.cta--solid:hover{color:#fff}

/* ── stage 下のフッターメタ ── */
.st-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  background:var(--st-bg);color:var(--st-dim);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem clamp(1.2rem,3vw,2.4rem);
  border-top:1px solid var(--st-line);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;
}

/* ════════════ reduced motion ════════════ */
@media (prefers-reduced-motion: reduce){
  .st-cover-title,.st-glyph,.st-word,.st-quote span,.st-cover-sub,.st-cover-meta,.st-spec-card,.st-ann{
    opacity:1 !important;visibility:visible !important;
    /* 中点値の概算で固定 */
    font-size:initial;font-variation-settings:initial;letter-spacing:initial;
  }
  .scroll-cue,.st-scroll-hint{animation:none}
}

/* END COMPONENT */


/* ─── NOTES ─── */
.notes{max-width:1100px;margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1.5rem,4vw,3rem)}
.shou{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--ink);margin-bottom:2.5rem}
.shou h2{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:700;letter-spacing:.04em}
.shou .no{font-family:var(--mono);font-size:.78rem;letter-spacing:.25em;color:var(--muted)}
.frame{font-size:.92rem;line-height:1.9;color:var(--muted);max-width:46em;margin:-1rem 0 2rem;padding:1rem 1.2rem;border-left:3px solid var(--hi);background:var(--paper)}
.frame code{font-family:var(--mono);font-size:.88em;background:var(--bg);padding:.1em .35em;border:1px solid var(--line)}
.notes-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:3rem}
@media(min-width:780px){.notes-grid{grid-template-columns:repeat(3,1fr)}}
.note{position:relative;background:var(--paper);border:1px solid var(--ink);padding:1.5rem 1.4rem 1.4rem}
.note-no{position:absolute;top:1rem;right:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--muted)}
.note h3{font-size:1.02rem;font-weight:700;margin-bottom:.7rem;letter-spacing:.02em}
.note p{font-size:.86rem;color:var(--muted);line-height:1.8}
.note code,.var span code{font-family:var(--mono);font-size:.85em;background:var(--bg);padding:.1em .35em;border:1px solid var(--line)}
.sub-h{font-size:1rem;font-weight:700;letter-spacing:.04em;margin:2rem 0 1rem;padding-bottom:.7rem;border-bottom:1px dashed var(--ink)}
.vars{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--ink);background:var(--paper)}
.var{display:grid;grid-template-columns:minmax(8rem,auto) 1fr auto;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);align-items:center}
.var:last-child{border-bottom:none}
.var code{font-family:var(--mono);font-size:.82rem;color:var(--hi);font-weight:500}
.var span{font-size:.85rem;color:var(--muted);line-height:1.5}
.var em{font-family:var(--mono);font-size:.78rem;font-style:normal;color:var(--ink);background:var(--bg);padding:.15em .55em;border:1px solid var(--line);white-space:nowrap}
@media(max-width:680px){.var{grid-template-columns:1fr;gap:.3rem;padding:.9rem 1rem}.var em{justify-self:start}}
.a11y{list-style:none;display:grid;gap:.6rem;background:var(--paper);border:1px solid var(--ink);padding:1rem 1.2rem;margin-top:1rem}
.a11y li{position:relative;padding-left:1.2em;font-size:.88rem;line-height:1.75;color:var(--muted)}
.a11y li::before{content:"→";position:absolute;left:0;top:0;color:var(--hi);font-family:var(--mono)}
.a11y code{font-family:var(--mono);font-size:.85em;background:var(--bg);padding:.1em .35em;border:1px solid var(--line)}

/* ─── FOOTER ─── */
footer{
  padding:2rem clamp(1.2rem,4vw,3rem) 1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--muted);
  border-top:1px solid var(--ink);
}
footer a{color:var(--ink)}