/* saju09 landing renewal — prototype v2: scene scroll with depth (spec v0.5). White paper for the tail, gothic everywhere, one seal red. */
:root{
  --paper:#FFFFFF; --ink:#1C1C1E; --muted:#6E6E73; --line:rgba(28,28,30,.12); --tint:#F5F5F7;
  --red:#B32B18; --red-deep:#9A2414; --red-on-dark:#E0664C; --night:#1B1512; --on-night:#FFF8F0;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --cjk:'Apple SD Gothic Neo','Noto Sans KR','Noto Sans CJK KR','Malgun Gothic',sans-serif;
  --s-in:16px; --s-between:24px; --s-group:48px; --s-section:96px;
  --maxw:1120px; --gutter:20px; --bar-h:64px;
  --r-card:16px; --r-frame:24px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.6s;
  --display-photo:clamp(44px,6.5vw,72px); --display:clamp(40px,5.5vw,60px); --h2:clamp(28px,4vw,40px); --h3:clamp(20px,2.4vw,24px);
  --lead:clamp(18px,2.2vw,22px); --body:16px; --cap:13px; --num:clamp(56px,8vw,72px); --glyph:clamp(64px,9vw,104px); --classic:clamp(30px,4.6vw,54px);
  --scene-h:240svh;
}
@media (min-width:768px){ :root{ --s-section:144px; --gutter:32px; --body:17px; } }

*,*::before,*::after{ box-sizing:border-box }
html{ background:var(--paper); color:var(--ink); font:400 var(--body)/1.7 var(--sans); -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; overflow-x:clip; scroll-padding-top:calc(var(--bar-h) + 12px); letter-spacing:-.01em }
body{ margin:0; overflow-x:clip; word-break:keep-all; overflow-wrap:break-word; background:#0B0F16 }
main{ background:var(--paper) }
img,video{ display:block; max-width:100% } img{ height:auto }
a{ color:inherit; text-decoration:none } p,h1,h2,h3,figure,dl,dd,ol,ul{ margin:0 } ol,ul{ padding:0; list-style:none }
button,input{ font:inherit; color:inherit }
*:focus-visible{ outline:2px solid var(--red); outline-offset:2px; border-radius:2px }
.sr-only{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
section{ padding-block:var(--s-section) }

/* type */
.eyebrow{ font-size:var(--cap); font-weight:600; color:var(--muted); letter-spacing:.01em; margin-bottom:14px }
.display{ font-size:var(--display); font-weight:600; line-height:1.15; letter-spacing:-.03em; text-wrap:balance }
.h2{ font-size:var(--h2); font-weight:600; line-height:1.2; letter-spacing:-.025em; text-wrap:balance }
.h3{ font-size:var(--h3); font-weight:600; line-height:1.3; letter-spacing:-.015em }
.lead{ font-size:var(--lead); line-height:1.6; color:var(--muted); margin-top:var(--s-between); max-width:640px; text-wrap:pretty }
.lead.center{ margin-inline:auto }
.cap{ font-size:var(--cap); line-height:1.6; color:var(--muted) }
.hanja{ font-family:var(--cjk); font-weight:500 }
.num{ font-size:var(--num); font-weight:500; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; white-space:nowrap }
.num small{ font-size:.4em; font-weight:500; letter-spacing:-.01em; margin-left:4px; color:var(--muted) }
.badge{ display:inline-block; font-size:12px; font-weight:600; color:var(--red); padding:2px 8px; border-radius:var(--r-pill); background:rgba(179,43,24,.08); line-height:1.4; vertical-align:middle }
.badge-w{ display:inline-block; font-size:12px; font-weight:600; color:#fff; padding:2px 9px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.7); line-height:1.5; vertical-align:middle }
.pill{ display:inline-block; font-size:13px; font-weight:600; color:#fff; background:var(--red); padding:2px 10px; border-radius:var(--r-pill); margin-right:10px; letter-spacing:0 }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:var(--r-pill); border:1px solid transparent; font-weight:600; font-size:16px; line-height:1; white-space:nowrap; cursor:pointer; transition:transform .1s ease-out, background-color .15s, border-color .15s, color .15s, opacity .25s; -webkit-tap-highlight-color:transparent; background:none }
.btn:active{ transform:scale(.97) }
.btn-primary{ background:var(--red); color:#fff } .btn-primary:hover{ background:var(--red-deep) }
.btn-ghost{ border-color:var(--ink); color:var(--ink) } .btn-ghost:hover{ background:rgba(28,28,30,.05) }
.btn-text{ padding-inline:8px; font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px } .btn-text:hover{ text-decoration-color:currentColor }
.on-photo .btn-ghost,.dark-block .btn-ghost{ border-color:rgba(255,255,255,.7); color:#fff } .on-photo .btn-ghost:hover,.dark-block .btn-ghost:hover{ background:rgba(255,255,255,.12) }
.on-photo .btn-text{ color:#fff; text-decoration-color:rgba(255,255,255,.4) }

/* L3 bar */
.bar{ position:fixed; inset:0 0 auto 0; z-index:50; height:var(--bar-h); transition:background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.bar .wrap{ height:100%; display:flex; align-items:center; gap:18px }
.bar.on-photo{ color:#fff; background:rgba(10,8,6,.34) }
.bar.on-paper{ background:rgba(255,255,255,.94); color:var(--ink); box-shadow:0 1px 0 var(--line) }
.bar.on-light{ background:rgba(255,255,255,.22); color:var(--ink) }
.mark{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:16px; letter-spacing:-.01em }
.mark img{ width:26px; height:26px } .mark .logo-white{ display:none } .bar.on-photo .mark .logo-red{ display:none } .bar.on-photo .mark .logo-white{ display:block }
.bar-nav{ display:none; gap:20px; font-size:14px; opacity:.9 } .bar-nav a{ padding:8px 0 }
.bar .cta{ margin-left:auto; min-height:40px; padding-inline:16px; font-size:14px; opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity .25s var(--ease), transform .25s var(--ease) }
.bar.show-cta .cta{ opacity:1; pointer-events:auto; transform:none }
html:not(.js) .bar .cta{ opacity:1; pointer-events:auto; transform:none }
@media (min-width:768px){ .bar-nav{ display:flex; margin-left:12px } .bar .cta{ min-height:42px; padding-inline:18px; font-size:15px } }

/* ── canvas runs: one sticky canvas per run; scenes are stacked inside it with five photographic depth layers ──
   photo (slow) · far ridge · mid ridge · near-mid ridge · near pines (fast, carries its ground: the cover). No lids, no scrims. */
.canvas-wrap{ position:relative; height:calc(var(--n) * var(--scene-h)); padding:0 }
.canvas-wrap:first-of-type{ height:calc(var(--n) * 240svh) }
.canvas{ position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate; background:var(--bg); color:#fff }
.sc{ position:absolute; inset:0; visibility:hidden }
.ly{ position:absolute; left:0; right:0; will-change:transform,opacity; pointer-events:none } .ly img{ max-width:none } /* the global img max-width clamp would cut the 140%/110% wide bands */
.photo{ inset:0; opacity:0 } .photo img{ position:absolute; left:0; top:-6%; width:100%; height:112%; object-fit:cover; object-position:center 50% }
.far,.mid,.mid2{ top:auto; bottom:-1.5svh }
.near{ top:calc(100svh - var(--near-show)); bottom:auto; height:auto } .near img{ position:relative; display:block; width:100%; height:auto } .near .fill{ display:block; position:relative; margin-top:-2px; height:260svh; background:linear-gradient(180deg,var(--fill-top,var(--fill)) 0,var(--fill) 24svh,var(--fill) 100%) }
.far img,.mid img,.mid2 img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:center top }
.far{ height:30svh } .mid{ height:24svh } .mid2{ height:19svh } .near{ z-index:6 } :root{ --near-show:22svh }
/* short transition (L1→L2→L3→L4): the band carries only a thin dark ground that fades into the next landscape — a touch of black, not a full black screen */
.sc[data-wipe] .near .fill{ height:46svh; -webkit-mask-image:linear-gradient(#000 0, #000 40%, transparent 100%); mask-image:linear-gradient(#000 0, #000 40%, transparent 100%) } /* a short dark ground under the band, fading out into the next landscape */
.mid[data-drift] img{ left:-5%; width:110% }
.copy{ position:absolute; inset:0; z-index:5; display:grid; align-items:center; will-change:transform,opacity }
.copy .wrap{ width:100%; padding-top:var(--bar-h); padding-bottom:var(--bar-h) }
.copy .act{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; margin-top:var(--s-group) }
.hero-copy{ align-items:end; z-index:7 } /* v1: the copy sits over the foreground pines */ .hero-copy .wrap{ padding-top:calc(var(--bar-h) + 48px); padding-bottom:80px } @media (min-width:768px){ .hero-copy .wrap{ padding-bottom:120px } }
.sc[data-scene="hero"] .photo img{ top:0; height:108%; object-position:center 92% }
.sc[data-scene="l5"] .photo img{ object-position:center 40% }
/* bright scenes: ink type on the sky — nothing is laid over the photo */
.sc[data-tone="ink"] .copy{ color:var(--ink) }
.sc[data-tone="ink"] .eyebrow,.sc[data-tone="ink"] .lead,.sc[data-tone="ink"] .lvl-what,.sc[data-tone="ink"] .lvl-lesson span:last-child,.sc[data-tone="ink"] .lvl-note{ color:var(--ink) }
.sc[data-tone="ink"] .btn-text{ color:var(--ink); text-decoration-color:rgba(28,28,30,.3) }
.sc[data-tone="ink"] .lvl-lesson{ border-top-color:rgba(28,28,30,.25) }
.sc[data-tone="ink"] .badge-w{ color:var(--red); border-color:rgba(179,43,24,.5) }
/* night scenes: white type, glyph-level shadow only */
.sc[data-tone="light"] .copy{ color:#fff } .sc[data-tone="light"] .eyebrow{ color:rgba(255,255,255,.85) }
.sc[data-tone="light"] .lead,.sc[data-tone="light"] .lvl-what{ color:rgba(255,255,255,.92) }
.sc[data-tone="light"] .lvl-name,.sc[data-tone="light"] .line{ text-shadow:0 1px 2px rgba(0,0,0,.45), 0 0 18px rgba(0,0,0,.3) }
.copy.center{ text-align:center } .copy.center .wrap{ padding-bottom:var(--bar-h) }
.hero-copy h1{ font-size:var(--display-photo); font-weight:600; line-height:1.12; letter-spacing:-.03em; max-width:16ch; text-wrap:balance }
.hero-copy .lead{ max-width:500px }
.hero-copy .ln{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em } .hero-copy .ln > span{ display:inline-block; will-change:transform }
.js .hero-copy .ln > span{ transform:translateY(112%); opacity:0; transition:transform .9s var(--ease), opacity .5s var(--ease) }
.js .hero-copy .eyebrow,.js .hero-copy .lead,.js .hero-copy .act{ opacity:0; transform:translateY(14px); transition:transform .8s var(--ease), opacity .6s var(--ease) }
.js.intro .hero-copy .ln > span,.js.intro .hero-copy .eyebrow,.js.intro .hero-copy .lead,.js.intro .hero-copy .act{ transform:none; opacity:1 }
.js .hero-copy .eyebrow{ transition-delay:.05s } .js .hero-copy .ln:nth-child(1) > span{ transition-delay:.15s } .js .hero-copy .ln:nth-child(2) > span{ transition-delay:.27s } .js .hero-copy .lead{ transition-delay:.5s } .js .hero-copy .act{ transition-delay:.62s }
.static .hero-copy .ln > span,.static .hero-copy .eyebrow,.static .hero-copy .lead,.static .hero-copy .act{ transition:none; transform:none; opacity:1 }
.copy .line{ font-family:var(--cjk); font-size:var(--classic); line-height:1.35; font-weight:500; letter-spacing:.06em; text-wrap:balance; color:var(--on-night) }
.copy .line .ch{ display:inline-flex; flex-direction:column; align-items:center; margin:0 .035em; letter-spacing:0; vertical-align:top } .copy .line .ch > span{ line-height:1.1 } /* each character with its Korean reading right under it */
.copy .line .ch small{ font-family:var(--sans); font-size:12px; font-weight:500; line-height:1; margin-top:2px; color:rgba(255,248,240,.78) }
@media (min-width:768px){ .copy .line .ch small{ font-size:13px; margin-top:3px } }
.copy .tr{ font-size:var(--lead); line-height:1.65; margin:var(--s-between) auto 0; max-width:620px; color:rgba(255,248,240,.92) }
.copy .src{ margin-top:var(--s-group); font-size:var(--cap); color:rgba(255,248,240,.75); line-height:1.7 } .copy .src b{ color:rgba(255,248,240,.96); font-weight:600 }
.lvl-name{ font-size:clamp(48px,8vw,96px); font-weight:600; line-height:1.05; letter-spacing:-.035em }
.lvl-what{ font-size:var(--lead); line-height:1.6; max-width:560px; margin-top:var(--s-between) }
.lvl-lesson{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:var(--s-group); padding-top:18px; border-top:1px solid rgba(255,255,255,.3); max-width:560px; font-size:15px } .lvl-lesson b{ font-weight:600; font-size:17px } .lvl-lesson span:last-child{ color:rgba(255,255,255,.8); font-size:var(--cap) }
.lvl-note{ margin-top:14px; font-size:var(--cap); color:rgba(255,255,255,.8); max-width:560px }

/* ── dark block: content on the hero's near colour ── */
.dark-block{ background:#0B0F16; color:var(--on-night); position:relative; z-index:1 }
.dark-block .eyebrow{ color:rgba(255,248,240,.72) } .dark-block .lead{ color:rgba(255,248,240,.8) } .dark-block .cap{ color:rgba(255,248,240,.62) }
.glyph{ text-align:center } .glyph .lead{ margin-inline:auto }
.chart{ margin:var(--s-group) auto 0; max-width:860px; background:rgba(255,248,240,.06); border:1px solid rgba(255,248,240,.14); border-radius:var(--r-frame); padding:28px 12px 24px }
.pillars{ display:grid; grid-template-columns:repeat(4,1fr) }
.pillar{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:8px 4px 10px }
.pillar + .pillar::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:rgba(255,248,240,.14) }
.pillar .lab{ font-size:var(--cap); color:rgba(255,248,240,.62); font-weight:600 }
.pillar .g{ font-family:var(--cjk); font-size:var(--glyph); line-height:1; font-weight:500; color:var(--on-night) }
.pillar .g.me{ color:var(--red-on-dark) }
.pillar .sub{ font-size:12px; color:rgba(255,248,240,.62) } .pillar .me-tag{ color:var(--red-on-dark); font-weight:600 }
.chart-foot{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin:20px 8px 0; padding-top:18px; border-top:1px solid rgba(255,248,240,.14); text-align:left }
.chart-foot form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.chart-foot input{ min-height:44px; padding:0 14px; border:1px solid rgba(255,248,240,.24); border-radius:12px; background:rgba(255,248,240,.06); color:var(--on-night); font-size:15px; width:150px; color-scheme:dark }
.chart-foot input[type=time]{ width:124px }
.chart-foot .btn{ min-height:44px }
@media (max-width:640px){ .chart{ padding:18px 6px 16px } .chart-foot{ margin-inline:4px } .chart-foot form{ width:100% } .chart-foot input,.chart-foot input[type=time]{ width:100% } .chart-foot .btn{ width:100% } }

.why .row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px; margin-top:var(--s-group) }
.shot{ display:flex; flex-direction:column; border-radius:var(--r-card); background:rgba(255,248,240,.06); border:1px solid rgba(255,248,240,.14); overflow:hidden; min-height:230px }
.shot-h{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; font-size:12px; color:rgba(255,248,240,.62); border-bottom:1px solid rgba(255,248,240,.14); background:rgba(255,248,240,.04) }
.shot-h b{ font-weight:600; color:var(--on-night) }
.shot-b{ display:flex; flex-direction:column; gap:14px; padding:16px 14px 16px; flex:1 }
.shot-b p{ font-size:14px; line-height:1.55; color:rgba(255,248,240,.72); margin-top:auto }
.pair{ display:flex; gap:10px } .pair .cell{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; background:rgba(255,248,240,.08); border-radius:10px } .pair i{ font-style:normal; font-size:12px; color:rgba(255,248,240,.62) } .pair b{ font-size:32px; font-weight:500 }
.rule{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 8px; background:rgba(255,248,240,.08); border-radius:10px; font-size:26px } .rule .op{ font-size:16px; color:rgba(255,248,240,.62) } .rule .res{ color:var(--red-on-dark); font-size:34px }
.lines{ display:grid; gap:6px } .lines span{ display:grid; grid-template-columns:40px 1fr; gap:8px; align-items:center; padding:9px 10px; background:rgba(255,248,240,.08); border-radius:10px; font-size:14px } .lines i{ font-style:normal; font-size:12px; font-weight:600; color:rgba(255,248,240,.62) }
.warn{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; padding:12px 12px; background:rgba(255,248,240,.08); border-radius:10px; font-size:14px; font-weight:600 } .warn i{ font-style:normal; font-size:12px; font-weight:600; color:var(--on-night); padding:2px 8px; border-radius:var(--r-pill); border:1px solid rgba(255,248,240,.3) }

/* ── paper tail ── */
.paper{ position:relative; background:var(--paper); z-index:1 }
.paper-lid{ height:60svh; background:#05080E; pointer-events:none }

.numbers .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 24px; margin-top:var(--s-group); padding-top:var(--s-between); border-top:1px solid var(--ink) }
.numbers .grid li{ display:flex; flex-direction:column; gap:8px }
.numbers .foot{ margin-top:var(--s-group) }
@media (min-width:768px){ .numbers .grid{ grid-template-columns:repeat(5,1fr) } }

.learning{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; color:var(--on-night); isolation:isolate; padding-block:var(--s-section); background:var(--night) }
.learning .inner{ width:100% }
.learning .bed{ position:absolute; inset:0; z-index:-1; overflow:hidden } .learning .bed img{ width:100%; height:100%; object-fit:cover; object-position:center 40% }
.learning .bed::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.3) 35%,rgba(0,0,0,.62) 100%) }
.learning .eyebrow{ color:rgba(255,248,240,.78) } .learning .lead{ color:rgba(255,248,240,.86) }
.learn-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:var(--s-group) }
@media (min-width:768px){ .learn-grid{ grid-template-columns:repeat(6,1fr) } .learn-card{ grid-column:span 3 } .learn-card:nth-child(5){ grid-column:span 6 } }
@media (min-width:1024px){ .learn-card{ grid-column:span 2 } .learn-card:nth-child(4),.learn-card:nth-child(5){ grid-column:span 3 } }
.learn-card{ padding:18px 20px 20px; border-radius:var(--r-card); background:rgba(20,14,10,.62); border:1px solid rgba(255,248,240,.18); color:var(--on-night); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.learn-card .k{ font-size:var(--cap); font-weight:600; opacity:.8 }
.learn-card .t{ font-weight:600; font-size:var(--h3); margin-top:4px }
.learn-card .d{ font-size:15px; margin-top:6px; line-height:1.55; color:rgba(255,248,240,.9) }
.learn-card .ui{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,248,240,.18); font-size:14px; line-height:1.6 }
.learn-card .ui .q{ font-weight:600 } .learn-card .ui .opts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px } .learn-card .ui .opts span{ padding:4px 10px; border-radius:var(--r-pill); border:1px solid rgba(255,248,240,.35) } .learn-card .ui .opts span.ok{ background:var(--on-night); color:var(--night); border-color:var(--on-night) }

.price .split{ display:grid; grid-template-columns:1fr; gap:var(--s-group); margin-top:var(--s-group); padding-top:var(--s-between); border-top:1px solid var(--ink) }
.price .amt{ display:flex; flex-direction:column; align-items:flex-start; gap:10px } .price .amt .btn{ margin-top:8px }
.price ul.terms{ display:grid; gap:0; font-size:15px }
.price ul.terms li{ display:grid; grid-template-columns:110px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line) } .price ul.terms li:first-child{ border-top:0; padding-top:0 }
.price ul.terms b{ font-weight:600; color:var(--muted); font-size:var(--cap); padding-top:3px }
@media (min-width:768px){ .price .split{ grid-template-columns:1fr 1.2fr } }

.cta{ text-align:center }
.cta .act{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 16px; margin-top:var(--s-group) }
.cta .mini-chart{ display:inline-flex; gap:14px; margin-bottom:var(--s-between); font-family:var(--cjk); font-size:26px; color:var(--muted); letter-spacing:.08em } .cta .mini-chart b{ color:var(--red); font-weight:500 }

.fields .rail{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:var(--s-group) var(--gutter) 8px; margin:0 calc(var(--gutter) * -1); scrollbar-width:none } .fields .rail::-webkit-scrollbar{ display:none }
.fields .card{ flex:0 0 min(68%,240px); scroll-snap-align:start; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); background:var(--paper) }
.fields .card img{ aspect-ratio:4/3; width:100%; object-fit:cover }
.fields .card .t{ padding:12px 14px 14px; display:flex; justify-content:space-between; align-items:baseline; gap:8px } .fields .card .t b{ font-weight:600 } .fields .card .t small{ color:var(--muted); font-size:var(--cap) }

.foot{ background:var(--paper); border-top:1px solid var(--line); padding-block:48px 56px; font-size:14px; color:var(--muted) }
.foot .fam{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:16px 24px; margin-bottom:40px }
.foot .fam a{ display:grid; gap:4px; padding:14px 0; border-top:1px solid var(--line); color:var(--ink) } .foot .fam b{ font-weight:600 } .foot .fam small{ color:var(--muted) }
.foot .co{ display:grid; gap:4px; line-height:1.7 } .foot .legal{ margin-top:16px; display:flex; flex-wrap:wrap; gap:14px }

/* mobile: silhouettes read bigger */
@media (max-width:767px){ .sc .photo img{ object-position:16% 50% } .sc[data-scene="hero"] .photo img{ object-position:30% 92% } .far,.mid,.mid2{ bottom:-1svh } .far{ height:24svh } .mid{ height:20svh } .mid2{ height:16svh } :root{ --near-show:18svh } .near img{ width:140%; margin-left:-20% } .photo img{ object-position:62% 0% } :root{ --scene-h:220svh } }

/* motion: visible by default; .js hides reveal targets until in view, with a 1.2s safety release */
.js .rv{ opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease) }
.js .rv.in,.js.released .rv{ opacity:1; transform:none }
.js .rv-seq > *{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease) }
.js .rv-seq.in > *,.js.released .rv-seq > *{ opacity:1; transform:none }
.js .rv-seq.in > :nth-child(1){ transition-delay:.0s } .js .rv-seq.in > :nth-child(2){ transition-delay:.1s } .js .rv-seq.in > :nth-child(3){ transition-delay:.2s } .js .rv-seq.in > :nth-child(4){ transition-delay:.3s } .js .rv-seq.in > :nth-child(5){ transition-delay:.4s }

/* static (reduced motion or no JS): scenes stack, silhouettes rest at the bottom, veils off */
.static .canvas-wrap,html:not(.js) .canvas-wrap{ height:auto } .static .canvas,html:not(.js) .canvas{ position:relative; height:auto } .static .sc,html:not(.js) .sc{ position:relative; height:100svh; visibility:visible; overflow:hidden } .static .near .fill,html:not(.js) .near .fill{ display:none } .static .photo,html:not(.js) .photo{ opacity:1 }
.static .paper-lid,html:not(.js) .paper-lid{ display:none }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important }
  .js .rv,.js .rv-seq > *{ opacity:1; transform:none }
}