/* =====================================================================
   DoTarot — "The Tarot Table" (7 Oct 2026)
   Home scenes, ambient layer, card back, motion tokens.
   Loaded after foundation.css. Uses tokens only; transform/opacity only.
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  /* aliases so new work speaks one vocabulary */
  --color-bg:var(--bg); --color-bg-elevated:var(--elevated); --color-paper:var(--surface);
  --color-gold:var(--gold); --color-green:var(--back-a); --color-text:var(--ink); --color-muted:var(--muted);
  --space-section:clamp(64px,9vh,112px);
  /* motion */
  --motion-micro:160ms; --motion-ui:280ms; --motion-card:560ms; --motion-flip:640ms; --motion-scene:960ms; --motion-ambient:24s;
  --ease-standard:cubic-bezier(.22,.61,.36,1); --ease-card:cubic-bezier(.2,.7,.2,1); --ease-scene:cubic-bezier(.16,1,.3,1);
  /* type (home) — display 34–44 / 38–48 / 48–76 · section 30–38 / 36–54 */
  --t-display-home:clamp(2.125rem,1.35rem + 2.6vw,3.875rem);
  --t-section:var(--t-h2); /* section titles sit one step under page titles */
  --t-body-home:clamp(1rem,.96rem + .2vw,1.1875rem);
  --ambient-ink:#1A2023; --ambient-light:rgba(255,252,240,.75);
}
:root[data-theme="dark"]{--ambient-ink:#E1E4DD;--ambient-light:rgba(120,185,172,.10)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ambient-ink:#E1E4DD;--ambient-light:rgba(120,185,172,.10)}}
@property --sx{syntax:"<number>";inherits:true;initial-value:50}
@property --sy{syntax:"<number>";inherits:true;initial-value:50}
@property --sx2{syntax:"<number>";inherits:true;initial-value:50}
@property --sy2{syntax:"<number>";inherits:true;initial-value:50}

/* ---------- the DoTarot card back: one original drawing, everywhere ---------- */
.cb{background:#1D443F url("art/card-back.svg") center/100% 100% no-repeat}
.cb::before,.cb::after{content:none}
:root[data-theme="dark"] .cb{filter:brightness(.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cb{filter:brightness(.9)}}

/* ---------- visual environment: one reusable field of light, embossed line and chart ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
/* Paper grain: one static tile, rasterised once. Gives the field the tooth of printed stock
   so the engraved motifs read as ink on paper rather than vector lines on a screen. */
.ambient::after{content:"";position:absolute;inset:0;opacity:.06;background-size:180px;
  /* pre-tinted specks, normal compositing: no blend mode, no filter, so it costs one static texture */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .12 0 0 0 1.1 -.25'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .ambient::after{opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .9 0 0 0 0 .82 0 0 0 1.1 -.25'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ambient::after{opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .9 0 0 0 0 .82 0 0 0 1.1 -.25'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}}
.amb-light{position:absolute;left:0;top:0;width:110vmax;height:110vmax;margin:-55vmax 0 0 -55vmax;border-radius:50%;
  background:radial-gradient(closest-side,var(--ambient-light),transparent 70%);
  transform:translate(var(--lx,70vw),var(--ly,40vh));opacity:var(--la,1);transition:transform 1.4s var(--ease-scene),opacity 1.4s var(--ease-scene)}
.amb-grid{position:absolute;inset:0;opacity:var(--grid,0);transition:opacity 1.2s var(--ease-scene);
  background-image:linear-gradient(var(--ambient-ink) 1px,transparent 1px),linear-gradient(90deg,var(--ambient-ink) 1px,transparent 1px);background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse at 78% 55%,#000 0,transparent 68%);mask-image:radial-gradient(ellipse at 78% 55%,#000 0,transparent 68%)}
.amb-warm{position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 90% 100%,color-mix(in srgb,var(--gold) 8%,transparent),transparent 78%);opacity:var(--warm,0);transition:opacity 1.2s var(--ease-scene)}
.amb-frag{position:absolute;inset:0;color:var(--ambient-ink)}
.amb-frag>*{position:absolute;pointer-events:none;transition:opacity 1.2s var(--ease-scene),transform 1.4s var(--ease-scene)}
.amb-arch,.amb-chart,.amb-sun,.amb-vine{display:block;background:var(--gold);-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
/* the arch is a doorway: its open base runs off the bottom of the screen instead of stopping mid-air */
.amb-arch{width:min(40vw,520px);aspect-ratio:520/660;right:-10%;bottom:-7%;opacity:var(--env-arch-op);transform:translate3d(var(--env-arch-x),var(--env-arch-y),0);
  -webkit-mask-image:url("art/environment-arch.svg");mask-image:url("art/environment-arch.svg")}
.amb-chart{width:min(35vw,460px);aspect-ratio:1;left:-9%;bottom:-14%;opacity:var(--env-chart-op);transform:translate3d(0,var(--env-chart-y),0);
  -webkit-mask-image:url("art/environment-chart.svg");mask-image:url("art/environment-chart.svg")}
.amb-sun{left:2.5%;top:8%;width:clamp(120px,13vw,200px);aspect-ratio:1;opacity:var(--env-sun-op);-webkit-mask-image:url("art/environment-sun.svg");mask-image:url("art/environment-sun.svg")}
.amb-vine{left:6%;bottom:4%;width:clamp(56px,5.6vw,88px);aspect-ratio:140/420;background:var(--accent);opacity:var(--env-vine-op);-webkit-mask-image:url("art/environment-vine.svg");mask-image:url("art/environment-vine.svg")}
body{--lx:60vw;--ly:40vh;--la:.7;--env-arch-op:.055;--env-chart-op:.055;--env-sun-op:.05;--env-vine-op:.065;--env-arch-x:0px;--env-arch-y:0px;--env-chart-y:0px}
/* Scene values only alter the field behind content. No per-frame scroll work. */
body[data-scene="hero"]{--lx:72vw;--ly:44vh;--la:1;--grid:0;--warm:0;--env-arch-op:.12;--env-chart-op:.11;--env-sun-op:.065;--env-vine-op:.08}
body[data-scene="spot"]{--lx:28vw;--ly:50vh;--la:1;--grid:0;--warm:0;--env-arch-op:.035;--env-chart-op:.045;--env-sun-op:.025;--env-vine-op:.04;--env-arch-x:4px}
body[data-scene="paper"]{--lx:50vw;--ly:30vh;--la:.7;--grid:0;--warm:.28;--env-arch-op:.055;--env-chart-op:.035;--env-sun-op:.035;--env-vine-op:.07}
body[data-scene="grid"]{--lx:50vw;--ly:55vh;--la:.6;--grid:.035;--warm:0;--env-arch-op:.035;--env-chart-op:.12;--env-sun-op:.025;--env-vine-op:.04;--env-chart-y:-4px}
body[data-scene="path"]{--lx:50vw;--ly:62vh;--la:.8;--grid:0;--warm:.18;--env-arch-op:.09;--env-chart-op:.07;--env-sun-op:.04;--env-vine-op:.09;--env-arch-y:4px}
body[data-scene="table"]{--lx:50vw;--ly:90vh;--la:1;--grid:.02;--warm:.16;--env-arch-op:.09;--env-chart-op:.07;--env-sun-op:.04;--env-vine-op:.07}
body[data-environment="me"]{--lx:83vw;--ly:30vh;--la:.8;--warm:.25;--env-arch-op:.13;--env-chart-op:.085;--env-sun-op:.04;--env-vine-op:.09}
body[data-environment="learn"]{--lx:75vw;--ly:48vh;--env-arch-op:.045;--env-chart-op:.1;--env-sun-op:.03;--env-vine-op:.06}
body[data-environment="deck"]{--env-arch-op:.05;--env-chart-op:.09;--env-sun-op:.03;--env-vine-op:.04}
body.immersive .ambient{opacity:0}
@media (min-width:761px) and (max-width:1100px){
  .amb-arch{width:43vw;right:-19%;bottom:-6%}
  .amb-chart{width:42vw;left:-18%;bottom:-12%}
  .amb-vine{display:none}
}
@media (max-width:760px){
  body[data-scene="hero"]{--env-arch-op:.075;--env-chart-op:.07}
  body[data-environment="me"]{--env-arch-op:.08;--env-chart-op:.055}
  .amb-arch{width:75vw;right:-37%;bottom:-5%}
  .amb-chart{width:68vw;left:-36%;bottom:-21%}
  .amb-sun,.amb-vine{display:none}
  .amb-grid{display:none}
}
@media (prefers-reduced-motion:reduce){
  .amb-light,.amb-warm,.amb-grid,.amb-frag>*{transition:none!important;transform:none!important}
}

/* The home page uses one paper/ink field all the way through its sections. */
:root[data-theme="dark"] body.on-home,:root[data-theme="dark"] body:has(.hero3){--bg:#111718}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.on-home,:root:not([data-theme="light"]) body:has(.hero3){--bg:#111718}}

/* A sparse sky behind the page content. It frames the edges and never catches input. */
@property --sky-cool{syntax:"<color>";inherits:false;initial-value:rgba(167,194,204,.35)}
@property --sky-warm{syntax:"<color>";inherits:false;initial-value:rgba(237,222,192,.26)}
.sky-overlay{
  position:fixed;inset:0;z-index:0;overflow:hidden;contain:strict;pointer-events:none;
  color:rgba(142,112,48,.8);--sky-cool:rgba(186,202,196,.22);--sky-warm:rgba(238,214,166,.30);--sky-hi:rgba(255,253,246,.85);
  opacity:1;transition:opacity 480ms ease,color 480ms ease,--sky-cool 480ms ease,--sky-warm 480ms ease;
}
:root[data-theme="dark"] .sky-overlay{
  color:rgba(233,215,169,.95);--sky-cool:rgba(67,91,111,.43);--sky-warm:rgba(99,101,100,.22);--sky-hi:rgba(150,172,184,.12);opacity:1;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sky-overlay{
    color:rgba(233,215,169,.95);--sky-cool:rgba(67,91,111,.43);--sky-warm:rgba(99,101,100,.22);--sky-hi:rgba(150,172,184,.12);opacity:1;
  }
}
:root body.immersive .sky-overlay{opacity:0}
body.immersive .sky-mist,body.immersive .sky-star{animation-play-state:paused}
.sky-mist{
  position:absolute;width:clamp(310px,59vw,900px);height:clamp(160px,31vh,340px);
  /* Root cause of the "cut" clouds: the old mask used the default farthest-corner size, so it was
     still ~30% opaque at the box edges while the puffs extended past them. Now every puff sits
     inside the box and the mask is closest-side, i.e. exactly zero at the edges.
     Lit tops (--sky-hi) over a cooler underside give the bank volume instead of a flat smear. */
  background:radial-gradient(ellipse 22% 26% at 34% 44%,var(--sky-hi),transparent 70%),
    radial-gradient(ellipse 18% 22% at 52% 36%,var(--sky-hi),transparent 70%),
    radial-gradient(ellipse 20% 18% at 68% 48%,var(--sky-hi),transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 60%,var(--sky-cool),transparent 72%),
    radial-gradient(ellipse 34% 34% at 40% 46%,var(--sky-warm),transparent 72%);
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);
  opacity:.65;
}
.sky-mist-near{left:-16vw;top:17%}
.sky-mist-far{right:-19vw;top:48%;opacity:.48;scale:-1 1}
.sky-star{position:absolute;width:18px;height:18px;opacity:.58}
.sky-star::before{content:"";position:absolute;inset:2px;background:currentColor;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.sky-star::after{content:"";position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,currentColor 0,transparent 64%);opacity:.2}
.sky-star-1{left:8%;top:16%;scale:.75}
.sky-star-2{left:17%;top:64%;scale:.48}
.sky-star-3{right:9%;top:23%;scale:.58}
.sky-star-4{right:17%;top:58%;scale:.82}
.sky-star-5{left:8%;bottom:12%;scale:.55}
.sky-star-6{right:6%;bottom:14%;scale:.45}
@keyframes sky-drift-near{0%{transform:translate3d(-14px,2px,0);opacity:.55}54%{opacity:.72}100%{transform:translate3d(24px,-5px,0);opacity:.59}}
@keyframes sky-drift-far{0%{transform:translate3d(14px,-3px,0);opacity:.4}46%{opacity:.57}100%{transform:translate3d(-24px,4px,0);opacity:.43}}
@keyframes sky-twinkle{0%,100%{opacity:.22}32%{opacity:.42}51%{opacity:1}70%{opacity:.46}}
@media (prefers-reduced-motion:no-preference){
  .sky-mist-near{animation:sky-drift-near 34s ease-in-out infinite alternate}
  .sky-mist-far{animation:sky-drift-far 43s ease-in-out -17s infinite alternate}
  .sky-star{animation:sky-twinkle 7.2s ease-in-out infinite}
  .sky-star-2{animation-duration:9.6s;animation-delay:-4s}
  .sky-star-3{animation-duration:8.3s;animation-delay:-6s}
  .sky-star-4{animation-duration:10.8s;animation-delay:-2s}
  .sky-star-5{animation-duration:6.7s;animation-delay:-5s}
  .sky-star-6{animation-duration:9.1s;animation-delay:-7s}
}
@media (min-width:761px) and (max-width:1100px){
  .sky-mist{width:clamp(300px,55vw,620px);height:clamp(150px,26vh,260px)}
  .sky-mist-near{left:-25vw;top:24%}
  .sky-mist-far{right:-28vw;top:59%}
  .sky-star-2,.sky-star-6{display:none}
}
@media (max-width:760px){
  .sky-overlay{opacity:.88}
  :root[data-theme="dark"] .sky-overlay{opacity:.9}
  .sky-mist{width:80vw;height:clamp(120px,23vh,180px)}
  .sky-mist-near{left:-43vw;top:27%;opacity:.52}
  .sky-mist-far,.sky-star-2,.sky-star-4,.sky-star-5,.sky-star-6{display:none}
  .sky-star-1{left:5%;top:19%;scale:.7}
  .sky-star-3{right:5%;top:60%;scale:.68}
}
@media (max-width:760px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sky-overlay{opacity:.9}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .sky-mist-near{animation-duration:48s}
  .sky-star{animation-duration:8.8s}
}
@media (prefers-reduced-motion:reduce){
  .sky-mist,.sky-star{animation:none!important;transform:none!important}
  .sky-overlay{transition:none}
}

/* ---------- shared home rhythm & type ---------- */
body.on-home .h2{font-size:var(--t-section);line-height:var(--lh-head);letter-spacing:-.01em;text-wrap:balance}
body.on-home .sec{padding:var(--space-section) 0}
@media (max-width:760px){:root{--space-section:clamp(56px,8vh,80px)}}
body.on-home .sec-head p.ink2,body.on-home .sec-head .ink2{max-width:40ch}

/* =====================================================================
   01 · ENTER — cards first. An arc of face-down cards is the hero and the first action.
   Motion types: atmosphere (relief and scene changes),
   interaction (hover/focus parts the neighbours, the touched card lifts),
   transition (the chosen card moves to the centre and turns over).
   ===================================================================== */
.hero3{overflow-x:clip;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--topbar));padding:clamp(16px,4vh,48px) 0 clamp(28px,5vh,64px)}
.hero3-copy{text-align:center}
.hero3 .hero2-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,3.4vw,2.9rem);line-height:1.25;letter-spacing:-.02em;margin:var(--space-sm) auto 0;max-width:22em;text-wrap:balance}
.hero3 .hero2-title em{font-style:normal;color:var(--accent)}
.hero3-foot{text-align:center}
.hero3 .hero2-lede{font-family:var(--serif);font-size:var(--t-lead);line-height:1.7;color:var(--ink-2);margin:0 auto var(--space-md);max-width:34em;text-wrap:balance}
.hero3-foot .actions{justify-content:center;gap:var(--space-sm) var(--space-lg)}

.table2{position:relative;width:100%;height:clamp(360px,54svh,540px);margin:clamp(8px,2vh,24px) 0;display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"deck" "words";justify-items:center;--tilt:5deg;container-type:inline-size}
.table2-light{position:absolute;inset:0 8% 10%;border-radius:50%;background:radial-gradient(closest-side,var(--table),transparent);pointer-events:none}
.deck2{grid-area:deck;position:relative;align-self:center;width:var(--cw);aspect-ratio:var(--ratio);transition:scale var(--motion-card) var(--ease-card)}
.deck2 .layer{position:absolute;inset:0}
.l-star,.l-fool{opacity:.6}
/* faint faces behind the arc: the deck has pictures inside */
.deck2 .peek{position:absolute;--w:calc(var(--cw) * .74);width:var(--w);opacity:.5;box-shadow:var(--e1);transition:opacity var(--motion-ui) var(--ease-standard),translate var(--motion-card) var(--ease-card)}
.l-star .peek{left:calc(100% + var(--cw) * .9);top:-24%;rotate:11deg}
.l-fool .peek{right:calc(100% + var(--cw) * .9);top:-18%;rotate:-10deg}
.deck2.assemble .layer>*{animation:assemble var(--motion-scene) var(--ease-scene) both}
.deck2.assemble .l-arc .fan-card{animation:deal var(--motion-scene) var(--ease-scene) both;animation-delay:calc((3 - var(--k2)) * 40ms)}
@keyframes assemble{from{transform:translate(var(--ax,0),var(--ay,14px)) rotate(var(--ar,0deg))}}
@keyframes deal{from{translate:calc(var(--k) * var(--gap) * -1) 10px}}
.l-star{--ax:-20px;--ay:16px;--ar:-3deg}.l-fool{--ax:20px;--ay:12px;--ar:3deg}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .l-star{animation:float var(--motion-ambient) ease-in-out infinite alternate}
  .l-fool{animation:float var(--motion-ambient) ease-in-out -12s infinite alternate-reverse}
}
@keyframes float{from{translate:0 -4px}to{translate:0 4px}}

/* the arc */
.fan2{position:absolute;inset:0;--gap:min(var(--cw) * .6, (100cqw - var(--cw) - 40px) / 6)}
.fan-card{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer;perspective:1400px;-webkit-tap-highlight-color:transparent;z-index:calc(10 - var(--k2));--push:0;--lift:0;
  transform:translateX(calc(var(--k) * var(--gap) * (1 + var(--open,0) * .14) + var(--push) * 16px)) translateY(calc(var(--k2) * var(--cw) * var(--fan-drop,.03) - var(--lift) * 16px)) rotate(calc(var(--k) * var(--tilt)));
  transition:transform var(--motion-card) var(--ease-card),opacity var(--motion-ui) var(--ease-standard),visibility 0s linear 0s}
.fan-card .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform var(--motion-flip) var(--ease-card)}
.fan-card .side{position:absolute;inset:0;border-radius:5% / 2.85%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--e2)}
.fan-card .side.back .cb{position:absolute;inset:0}
.fan-card:focus-visible{outline:none}
.fan-card:focus-visible .side.back{box-shadow:0 0 0 2px var(--accent),var(--e3)}
.table2[data-state="rest"] .fan-card:focus-visible{--lift:1}
@media (hover:hover) and (pointer:fine){.table2[data-state="rest"] .fan-card:hover{--lift:1}.table2[data-state="rest"] .fan-card:hover .side.back{box-shadow:var(--e3)}}
.table2[data-state="rest"] .fan-card:active{--lift:.6}
.draw-cap{grid-area:words;position:relative;margin:var(--space-sm) 0 0;min-height:1.6em;text-align:center;font-size:var(--t-small);color:var(--ink-2);max-width:min(46ch,100% - 32px);text-wrap:balance}
.table2{--cw:clamp(150px,13.5vw,196px)}
.deck2{transition:scale var(--motion-card) var(--ease-card),translate var(--motion-card) var(--ease-card)}

@media (max-width:760px){
  .hero3{justify-content:flex-start;min-height:0;padding-top:clamp(12px,3vh,28px)}
  .table2{height:clamp(300px,92vw,400px);--tilt:5deg}
  .table2{--cw:clamp(96px,27vw,140px)}
  .fan-card.outer{display:none}
  .fan2{--gap:min(var(--cw) * .58, (100cqw - var(--cw) - 44px) / 4)}
  .l-star .peek{left:calc(100% + var(--cw) * .5);top:-12%}
  .l-fool .peek{right:calc(100% + var(--cw) * .5);top:-9%}
  .hero3-foot .actions{flex-direction:column;align-items:center;gap:var(--space-sm)}
}

/* =====================================================================
   02 · LEARNING TO SEE
   ===================================================================== */
.see{padding:var(--space-section) 0 calc(var(--space-section) * .6)}
.see-head{margin-bottom:var(--space-xl)}
.see-head .eyebrow{display:block;margin-bottom:var(--space-sm)}
.see-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"card steps" "card end";column-gap:clamp(32px,6vw,96px);
  transition:--sx var(--motion-flip) var(--ease-card),--sy var(--motion-flip) var(--ease-card),--sx2 var(--motion-flip) var(--ease-card),--sy2 var(--motion-flip) var(--ease-card)}
.see-card{grid-area:card;position:sticky;top:calc(var(--topbar) + 6vh);align-self:start;margin:0;display:grid;justify-items:center;gap:var(--space-sm)}
.see-art{position:relative;width:min(100%,clamp(220px,26vw,340px),calc((100svh - var(--topbar) - 22vh) * .569));aspect-ratio:var(--ratio);border-radius:4% / 2.3%;overflow:hidden;box-shadow:var(--e3);container-type:size}
.see-art img{width:100%;height:100%;object-fit:cover;filter:var(--art-filter)}
.see-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at calc(var(--sx) * 1%) calc(var(--sy) * 1%),transparent 0 13cqw,rgba(12,16,18,.36) 26cqw)}
.see-grid.two .see-veil{background:radial-gradient(circle at calc(var(--sx) * 1%) calc(var(--sy) * 1%),transparent 0 11cqw,transparent 13cqw,rgba(12,16,18,0) 0),
  radial-gradient(circle at calc(var(--sx2) * 1%) calc(var(--sy2) * 1%),transparent 0 11cqw,rgba(12,16,18,.36) 24cqw)}
.see-ring{position:absolute;left:0;top:0;width:22cqw;aspect-ratio:1;margin:-11cqw 0 0 -11cqw;border-radius:50%;border:1px solid #F3E6B8;box-shadow:0 0 0 4px rgba(243,230,184,.16);
  transform:translate(calc(var(--sx) * 1cqw),calc(var(--sy) * 1cqh));pointer-events:none}
.see-ring.r2{opacity:0;transform:translate(calc(var(--sx2) * 1cqw),calc(var(--sy2) * 1cqh));transition:opacity var(--motion-ui)}
.see-grid.two .see-ring.r2{opacity:1}
.see-cap{text-align:center;font-size:var(--t-small);color:var(--ink-2);min-height:3.2em;max-width:30ch}
.see-cap b{display:block;font-family:var(--serif);font-weight:500;color:var(--ink)}
.see-cap span{font-family:var(--mono);font-size:var(--t-caption);color:var(--gold)}
.see-tabs{display:none}
.see-steps{grid-area:steps;list-style:none;margin:0;padding:6vh 0 4vh}
.see-step{min-height:44svh;display:flex;flex-direction:column;justify-content:center;max-width:32em;transition:opacity var(--motion-ui) var(--ease-standard)}
.see-step:not(.on){opacity:.42}
.see-step .num{font-family:var(--display);font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1;color:var(--gold)}
.see-step h3{margin:var(--space-xs) 0 var(--space-sm)}
.see-step p{font-family:var(--serif);font-size:var(--t-lead);line-height:1.75;color:var(--ink-2);margin:0}
.see-end{grid-area:end;padding-bottom:var(--space-lg)}
@media (max-width:760px),(max-width:1024px) and (orientation:portrait){
  /* phones + portrait tablets: no sticky scroll — one card, four tabs, the highlight moves on the same card */
  .see{padding-top:var(--space-2xl)}
  .see-head{margin-bottom:var(--space-lg)}
  .see-grid{grid-template-columns:1fr;grid-template-areas:"card" "tabs" "steps" "end"}
  .see-card{position:static}
  .see-art{width:min(54vw,212px,36svh)}
  .see-tabs{grid-area:tabs;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:var(--space-md) 0 0;border-bottom:1px solid var(--rule)}
  .see-tabs button{min-height:var(--tap);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:6px 2px 8px;border:0;background:none;cursor:pointer;color:var(--muted);font:inherit;font-size:var(--t-label);position:relative}
  .see-tabs .n{font-family:var(--mono);font-size:var(--t-caption)}
  .see-tabs button[aria-pressed="true"]{color:var(--ink)}
  .see-tabs button[aria-pressed="true"]::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;background:var(--gold)}
  .see-steps{display:grid;padding:var(--space-md) 0 0}
  .see-step{grid-area:1/1;min-height:0;display:block;visibility:hidden;opacity:0}
  .see-step.on{visibility:visible;opacity:1}
  .see-step .num,.see-step h3{display:none}
  .see-step p{font-size:var(--t-body)}
  .see-end{padding:var(--space-md) 0 0}
}

/* =====================================================================
   04 · 22 · 40 · 16 — scattered cards settle into a system (once)
   ===================================================================== */
.dx-eq .fan .tc{transition:transform var(--motion-card) var(--ease-card),translate var(--motion-scene) var(--ease-scene) var(--dd,0ms),rotate var(--motion-scene) var(--ease-scene) var(--dd,0ms)}
.dx-eq.scatter .fan .tc{translate:var(--dx) var(--dy);rotate:var(--dr)}
.dx-eq .pile>span:not(.fan){transition:opacity var(--motion-card) var(--ease-standard) 240ms}
.dx-eq.scatter .pile>span:not(.fan){opacity:0}
.pile .ds{max-width:22ch}
/* phones keep the three piles stacked: seeing 22 + 40 + 16 together is the lesson */


/* =====================================================================
   05 · THE FOOL'S JOURNEY — a path, not a carousel
   ===================================================================== */
.journey .sec-head{margin-bottom:var(--space-lg)}
.j-rail{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-inline:contain;padding:var(--space-lg) 0 var(--space-md)}
.j-rail::-webkit-scrollbar{display:none}
/* 12 Oct: the path line used to run through the middle of the card art (top: card height × .5) and
   across the full scroll width. It is now a timeline UNDER the art: it runs between the first and
   last card, sits behind everything in its own stacking context, and each card has a node on it
   (filled when that card is open). Card art is never crossed by a decorative line. */
.j-track{--jw:clamp(96px,8vw,116px);--jpad:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));--jline:calc(26px + var(--jw) * 1.7567 + 14px);
  position:relative;isolation:isolate;list-style:none;margin:0;display:flex;gap:clamp(14px,1.6vw,26px);width:max-content;padding:0 var(--jpad)}
.j-track::before,.j-track::after{content:"";position:absolute;z-index:-1;left:var(--jpad);right:var(--jpad);top:var(--jline);height:1px;pointer-events:none}
.j-track::before{background:var(--rule)}
.j-track::after{opacity:0;transition:opacity var(--motion-ui);background:radial-gradient(160px 1px at calc(var(--hx,-999px) - var(--jpad)) 50%,var(--gold),transparent)}
.j-track:hover::after{opacity:1}
.j-card::before{content:"";position:absolute;left:0;top:calc(var(--jw) * 1.7567 + 14px - 4px);width:9px;height:9px;border-radius:50%;box-sizing:border-box;border:1px solid var(--rule);background:var(--bg);transition:background var(--motion-ui),border-color var(--motion-ui)}
.j-card.on::before{background:var(--gold);border-color:var(--gold)}
.j-stop.act-start .j-card::before{border-color:var(--gold)}
.j-stop{position:relative;scroll-snap-align:center;padding-top:26px}
.j-act{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.04em;color:var(--muted)}
.j-act b{color:var(--gold);font-weight:500}
.j-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:var(--jw);border:0;background:none;padding:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.j-card .tc{--w:var(--jw);transform:translateY(calc(var(--lift,0) * -4px));transition:transform var(--motion-micro) linear,box-shadow var(--motion-ui)}
.j-card.on .tc{transform:translateY(-8px);box-shadow:var(--e3),0 0 0 2px var(--gold)}
.j-card:focus-visible{outline:none}.j-card:focus-visible .tc{box-shadow:0 0 0 2px var(--accent),var(--e2)}
.j-num{font-family:var(--display);font-size:1.1rem;color:var(--gold);line-height:1;margin-top:22px}
.j-name{font-size:var(--t-label);color:var(--ink-2);line-height:1.3}
.j-foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-lg);align-items:start}
.j-nav{display:flex;gap:var(--space-xs)}
.j-nav .nudge{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);background:var(--surface);color:var(--ink);cursor:pointer;font-size:1.2rem}
.j-panel{min-height:8.5em;max-width:56ch}
.j-panel:empty::before{content:attr(data-hint);color:var(--muted)}
.j-panel .h3{margin:var(--space-2xs) 0 var(--space-xs)}
.j-panel .th{font-size:var(--t-small);color:var(--muted);font-family:var(--body)}
.j-panel p{margin:0 0 var(--space-xs);font-family:var(--serif);color:var(--ink-2);line-height:1.7}
@media (hover:hover) and (pointer:fine){.j-card:hover .j-name{color:var(--ink)}}
@media (max-width:760px){
  .j-rail{scroll-snap-type:x mandatory;padding-top:var(--space-md)}
  .j-track{--jw:46vw;--jpad:27vw;gap:var(--space-md)}
  .j-name{font-size:var(--t-body)}
  .j-num{font-size:1.4rem}
  .j-foot{grid-template-columns:1fr;gap:var(--space-sm)}
  .j-nav{display:none}
  .j-panel{min-height:9.5em}
  .j-panel .eyebrow,.j-panel .h3{display:none}
}

/* =====================================================================
   06 · PRACTICE (compact) · 07 · MY TAROT
   ===================================================================== */
.practice .sec-head .actions{gap:var(--space-xs) var(--space-lg)}
@media (max-width:760px){
  .practice .path{display:grid;grid-auto-flow:column;grid-auto-columns:72%;grid-template-columns:none;gap:var(--space-md);overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) var(--space-sm);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .practice .path::before{display:none}
  .practice .stg{display:flex;scroll-snap-align:start;padding:0}
  .practice .stg .art{height:120px;--w:46px;background:none}
}
body.on-home .home-mt{padding-block:calc(var(--space-section) * .7)}

/* =====================================================================
   FOOTER — closing the book
   ===================================================================== */
.foot{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 55% 90% at 100% 100%,color-mix(in srgb,var(--gold) 5%,transparent),transparent 80%),var(--bg)}
body.on-home .foot{border-top:0;background:none}
.foot::before,.foot::after{content:"";position:absolute;z-index:0;pointer-events:none;background:var(--gold);-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
.foot::before{width:clamp(250px,28vw,400px);aspect-ratio:520/660;right:-8%;top:-34%;opacity:.075;-webkit-mask-image:url("art/environment-arch.svg");mask-image:url("art/environment-arch.svg")}
.foot::after{width:clamp(210px,22vw,330px);aspect-ratio:1;left:-7%;bottom:-52%;opacity:.065;-webkit-mask-image:url("art/environment-chart.svg");mask-image:url("art/environment-chart.svg")}
.foot>.wrap{position:relative;z-index:1}
@media (max-width:760px){.foot::before{width:230px;right:-33%;top:-12%;opacity:.06}.foot::after{display:none}}
.foot-close{border-top:1px solid var(--rule);margin-top:var(--space-lg);padding-top:var(--space-md);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm) var(--space-lg);font-size:var(--t-small);color:var(--muted)}
.foot-close .link{font-size:inherit;color:var(--ink-2)}
.foot .support .support-sun-wrap{display:none}

/* =====================================================================
   DETAILS — nav, buttons, card links
   ===================================================================== */
/* Active nav = one system everywhere: ink colour, medium weight and the 1px underline from styles.css.
   (12 Oct: the gold sun that sat above the active "อ่านไพ่" item was removed — it read as a theme
   control, not a location. The sun keeps its meaning only in the support indicator.) */
.nav a[aria-current="page"]{font-weight:500}
.nav a[aria-current="page"]::after{background:var(--gold);height:1.5px}
@media (hover:hover) and (pointer:fine){
  .btn:not(.ghost):not(.accent){position:relative;isolation:isolate;overflow:hidden}
  .btn:not(.ghost):not(.accent)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform var(--motion-ui) var(--ease-standard)}
  .btn:not(.ghost):not(.accent):hover{background:var(--ink)}
  .btn:not(.ghost):not(.accent):hover::before{transform:scaleX(1)}
  .cell{position:relative}
  .cell::after{content:attr(data-explore);position:absolute;left:8px;right:8px;top:8px;padding:6px 8px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--surface) 92%,transparent);font-size:var(--t-caption);color:var(--ink);opacity:0;transform:translateY(4px);transition:opacity var(--motion-micro),transform var(--motion-ui) var(--ease-standard);pointer-events:none;text-align:center}
  .cell:hover::after{opacity:1;transform:none}
}

/* ---------- reduced motion: every state, no travel ---------- */
@media (prefers-reduced-motion:reduce){
  .deck2 .layer,.fan-card,.fan-card .in,.deck2,.see-grid,.see-step,.dx-eq .fan .tc,.j-card .tc,.amb-light,.amb-grid,.amb-warm{transition:none!important;animation:none!important}
}
@media (max-width:760px){.tabbar{min-height:calc(60px + var(--safe-b))}}
@media (max-width:760px){
  .home-dx .pile .fan{--w:58px}
  .home-dx .dx-eq{gap:var(--space-md)}
  .home-dx .pile .big{font-size:3rem}
  .home-dx .pile .go{display:none}
  .foot .support>p:first-of-type{display:none}
}

/* Chapter numbers support the editorial story. */
.eyebrow .chap{font-family:var(--display);font-weight:400;color:var(--gold);margin-right:.7em;letter-spacing:0}
/* 02 · ASK */
.ask-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-lg) clamp(32px,6vw,96px);align-items:end}
.ask .h2{margin:var(--space-sm) 0 var(--space-md)}
.ask .ink2{max-width:36ch;margin:0}
.ask-pick{display:grid;gap:var(--space-sm);justify-items:start}
.ask-row{display:flex;flex-wrap:wrap;gap:10px}
.ask-row[hidden]{display:none}
.ask-chip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border:1px solid var(--rule);border-radius:999px;background:var(--elevated);color:var(--ink);font:inherit;font-size:1rem;text-decoration:none;cursor:pointer;transition:border-color var(--motion-micro) ease,background var(--motion-micro) ease,transform var(--motion-micro) ease}
.ask-chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.ask-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ask-chip.more{background:transparent;color:var(--ink-2);border-style:dashed}
.ask-ph{min-height:1.6em;margin:var(--space-2xs) 0 var(--space-xs);font-size:.8rem;color:var(--muted)}
@media (max-width:760px){.ask-inner{grid-template-columns:1fr;align-items:start}.ask-chip{min-height:44px;padding:0 16px}}

/* One centered reading invitation. The spacing follows the shared 8/12/20/32 scale. */
.hero3{position:relative;isolation:isolate;--hero-near:var(--space-sm);--hero-step:var(--space-md);--hero-breath:var(--space-lg);--fan-drop:.01}
.hero3-copy{text-align:center;position:relative;z-index:2}
.hero3-copy .eyebrow{display:block;font-size:.72rem;font-weight:400;letter-spacing:.1em;line-height:1.5}
.hero3 .hero2-title{margin:0 auto;max-width:20ch;font-size:var(--t-display);line-height:var(--lh-head)}
.hero3 .hero2-title em{display:block}
.hero3-intro{max-width:42ch;margin:var(--hero-step) auto 0;color:var(--ink-2);font-size:var(--t-body-home);line-height:1.6;text-wrap:balance}
.hero3 .table2{margin:var(--hero-step) 0 0;height:clamp(320px,45svh,470px)}
.hero3 .deck2{translate:0 0}
.hero3 .draw-cap{font-family:var(--serif);font-size:var(--t-lead);line-height:1.45;color:var(--ink);margin:var(--space-xs) 0 0} /* never touches the fanned cards above it */
.hero3-foot{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.hero3-actions{justify-content:center;margin:var(--hero-breath) 0 0}
.hero3-assurance{order:1;text-align:center;color:var(--muted);font-size:var(--t-caption);line-height:1.5;margin:var(--hero-near) 0 0}
.hero3-secondary{order:2;display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);font-size:var(--t-small);margin-top:var(--hero-step)}
.hero3-secondary .link{color:var(--ink-2)}
.hero3 .hero2-lede{order:3;font-size:var(--t-small);max-width:38ch;margin:var(--hero-step) 0 0;color:var(--muted)}
.hero3 .fan-card:focus-visible .side.back{box-shadow:0 0 0 3px var(--accent),var(--e3)}
.hero3 .fan-card{touch-action:manipulation}
.hero3 .fan-card:active{--lift:1}
/* Keep the illustrated field quiet and finite: no perpetual ambient repaint. */
.amb-light,.l-star,.l-fool{animation:none!important}
.amb-frag{will-change:auto}
@media (min-width:761px) and (max-width:1100px){
  .hero3{padding-block:var(--space-md) var(--space-xl)}
  .hero3 .hero2-title{font-size:clamp(2.3rem,4vw,3.1rem)}
  .hero3 .table2{height:clamp(330px,36svh,365px);--cw:clamp(132px,13vw,145px)}
}
@media (max-width:760px){
  .hero3{justify-content:flex-start;padding-block:var(--space-sm) var(--space-xl);--hero-step:var(--space-sm);--hero-breath:var(--space-md)}
  .hero3-copy .eyebrow{font-size:.68rem;letter-spacing:.085em}
  .hero3 .hero2-title{font-size:clamp(1.92rem,7.6vw,2.8rem);max-width:18ch;line-height:var(--lh-head)}
  .hero3-intro{font-size:var(--t-small);max-width:36ch}
  .hero3 .table2{height:clamp(245px,64vw,315px);--cw:clamp(96px,25vw,125px)}
  .hero3 .draw-cap{font-size:var(--t-small)}
  .hero3-assurance{font-size:.72rem;max-width:35ch}
  .hero3-secondary{gap:4px var(--space-md);font-size:.8rem}
  .hero3 .hero2-lede{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .hero3 .fan-card,.hero3 .deck2{transition:none!important}
}
@media (min-width:1101px){.hero3 .table2{height:clamp(340px,40svh,420px);--cw:clamp(136px,min(11vw,16.5svh),160px);--tilt:4deg}}
@media (min-width:761px) and (max-width:1100px) and (orientation:landscape){
  .hero3 .table2{height:clamp(315px,36svh,365px)}
}
@media (max-width:380px) and (max-height:650px){
  .hero3{padding-top:var(--space-xs);--hero-near:var(--space-xs);--hero-step:var(--space-xs);--hero-breath:var(--space-sm)}
  .hero3 .hero2-title{font-size:1.86rem}
  .hero3-intro{font-size:.8rem}
  .hero3 .table2{height:226px;--cw:82px}
  .hero3 .draw-cap{font-size:.82rem}
  .hero3-assurance,.hero3-secondary,.hero3 .hero2-lede{margin-top:var(--space-xs)}
}

/* Landing prototype — one celestial relief around the existing deck.
   Paired masks make a printed highlight and its recessed edge without filters. */
@property --hero-surface-light{syntax:"<color>";inherits:false;initial-value:rgba(255,255,250,.34)}
.hero3{
  --hero-relief-light:#FFFEF8;--hero-relief-shade:#667778;
  --hero-relief-light-opacity:.64;--hero-relief-shade-opacity:.19;--hero-surface-light:rgba(255,255,250,.34);
  background-color:transparent;
  background-image:radial-gradient(ellipse 54% 48% at 50% 47%,var(--hero-surface-light),transparent 85%);
  transition:--hero-surface-light 480ms ease;
}
.theme-shift .hero3{transition:--hero-surface-light 480ms ease!important}
:root[data-theme="dark"] .hero3{
  --hero-relief-light:#BAA87B;--hero-relief-shade:#020607;
  --hero-relief-light-opacity:.30;--hero-relief-shade-opacity:.60;--hero-surface-light:rgba(177,153,100,.025);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero3{
    --hero-relief-light:#BAA87B;--hero-relief-shade:#020607;
    --hero-relief-light-opacity:.30;--hero-relief-shade-opacity:.60;--hero-surface-light:rgba(177,153,100,.025);
  }
}
.hero3::before,.hero3::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:clamp(160px,17vw,250px);aspect-ratio:260/340;right:max(-5vw,-70px);top:clamp(90px,14%,160px);
  -webkit-mask:url("art/hero-relief-crescent.svg") center/contain no-repeat;
  mask:url("art/hero-relief-crescent.svg") center/contain no-repeat;
  transform:translate3d(var(--relief-x),var(--relief-y),0);
  transition:background-color 480ms ease,opacity 480ms ease;
}
.hero3::before{background-color:var(--hero-relief-light);opacity:var(--hero-relief-light-opacity);--relief-x:-1px;--relief-y:-1px}
.hero3::after{background-color:var(--hero-relief-shade);opacity:var(--hero-relief-shade-opacity);--relief-x:1px;--relief-y:1px}
.hero3 .hero3-foot{position:relative;z-index:1}
.hero3 .table2{z-index:1}
.hero3 .table2::before,.hero3 .table2::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(82vw,1030px);aspect-ratio:1000/400;left:50%;top:58%;
  -webkit-mask:url("art/hero-relief-halo.svg") center/contain no-repeat;
  mask:url("art/hero-relief-halo.svg") center/contain no-repeat;
  transform:translate3d(calc(-50% + var(--relief-x)),calc(-50% + var(--relief-y)),0);
  transition:background-color 480ms ease,opacity 480ms ease;
}
.hero3 .table2::before{background-color:var(--hero-relief-light);opacity:var(--hero-relief-light-opacity);--relief-x:-1px;--relief-y:-1px}
.hero3 .table2::after{background-color:var(--hero-relief-shade);opacity:var(--hero-relief-shade-opacity);--relief-x:1px;--relief-y:1px}
.hero3 .table2-light{background:radial-gradient(ellipse 50% 45% at 50% 46%,color-mix(in srgb,var(--gold) 4%,transparent),transparent 82%)}
.hero3 .deck2,.hero3 .draw-cap{z-index:1}
@keyframes hero-relief-breathe{
  from{transform:translate3d(calc(-50% + var(--relief-x) - 2px),calc(-50% + var(--relief-y) + 2px),0) rotate(-.65deg)}
  to{transform:translate3d(calc(-50% + var(--relief-x) + 2px),calc(-50% + var(--relief-y) - 2px),0) rotate(.65deg)}
}
@keyframes hero-crescent-drift{
  from{transform:translate3d(var(--relief-x),calc(var(--relief-y) + 2px),0) rotate(-.5deg)}
  to{transform:translate3d(var(--relief-x),calc(var(--relief-y) - 2px),0) rotate(.5deg)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero3 .table2::before,.hero3 .table2::after{animation:hero-relief-breathe 36s ease-in-out infinite alternate}
  .hero3::before,.hero3::after{animation:hero-crescent-drift 29s ease-in-out infinite alternate}
  body:not([data-scene="hero"]) .hero3::before,body:not([data-scene="hero"]) .hero3::after,
  body:not([data-scene="hero"]) .hero3 .table2::before,body:not([data-scene="hero"]) .hero3 .table2::after{animation-play-state:paused}
}
@media (min-width:761px) and (max-width:1100px){
  .hero3::before,.hero3::after{width:clamp(135px,16vw,185px);right:-5vw;top:19%}
  .hero3 .table2::before,.hero3 .table2::after{width:90vw;top:54%}
}
@media (max-width:760px){
  .hero3::before,.hero3::after{width:clamp(105px,30vw,145px);right:-11%;top:clamp(195px,29%,240px);opacity:calc(var(--hero-relief-light-opacity) * .55)}
  .hero3::after{opacity:calc(var(--hero-relief-shade-opacity) * .55)}
  .hero3 .table2::before,.hero3 .table2::after{width:120vw;top:49%;opacity:calc(var(--hero-relief-light-opacity) * .62)}
  .hero3 .table2::after{opacity:calc(var(--hero-relief-shade-opacity) * .62)}
  .hero3::before,.hero3::after,.hero3 .table2::before,.hero3 .table2::after{animation:none!important}
}
@media (prefers-reduced-motion:reduce){
  .hero3::before,.hero3::after,.hero3 .table2::before,.hero3 .table2::after{animation:none!important;transition:none!important}
  .hero3,.theme-shift .hero3{transition:none!important}
}

/* ===== 2026-10-10 · quieter field: fewer, fainter art marks (delete this block to restore the previous look) ===== */
.amb-sun,.amb-vine,.amb-chart{display:none}
.amb-arch{opacity:calc(var(--env-arch-op)*.4)}
.hero3::before{opacity:calc(var(--hero-relief-light-opacity)*.35)}
.hero3::after{opacity:calc(var(--hero-relief-shade-opacity)*.2)}
.hero3 .table2::before{opacity:calc(var(--hero-relief-light-opacity)*.3)}
.hero3 .table2::after{opacity:calc(var(--hero-relief-shade-opacity)*.15)}
.foot::after{display:none}
.foot::before{opacity:.035}
/* ===== end quieter field ===== */

/* ===================== Golden Dawn · 36 Decans (11 Oct) =====================
   Reuses the chip, rule, gold and type tokens. Element tints use the suit colours already in the system. */
.dx-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:999px;background:var(--elevated);color:var(--ink);font:inherit;font-size:.92rem;cursor:pointer;transition:border-color var(--motion-micro,160ms) ease,background var(--motion-micro,160ms) ease}
.dx-chip:hover{border-color:var(--accent)}
.dx-chip:focus-visible,.dx-layer:focus-visible,.dx-gd-sel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dx-chip[aria-pressed="true"],.dx-chip.cur{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.dx-chip.today{border-style:dashed}
.dx-chip.cur{cursor:default}
.dx-gd-sel select{min-height:44px;max-width:100%;padding:0 36px 0 14px;border:1px solid var(--rule);border-radius:999px;background:var(--elevated);color:var(--ink);font:inherit;font-size:.92rem}
.dc-rel-h{display:block;width:100%;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);margin-bottom:2px}
.dx-gd-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:var(--space-lg,40px)}
.dx-gd-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:start}
.dx-gd-stage{position:relative;margin:0;aspect-ratio:1;max-width:520px;width:100%;justify-self:center;display:grid;place-items:center}
.dw{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dw-ring{fill:none;stroke:var(--rule)}
.dw-ticks line{stroke:var(--rule)}
.dw-seg{fill:transparent;stroke:var(--rule);stroke-width:.6;cursor:pointer;transition:fill var(--motion-ui,280ms) ease}
.dw-seg.el-fire{--elc:var(--wands)}.dw-seg.el-water{--elc:var(--cups)}.dw-seg.el-air{--elc:var(--swords)}.dw-seg.el-earth{--elc:var(--pentacles)}
.dw-seg:hover{fill:color-mix(in srgb,var(--elc) 22%,transparent)}
.dw-seg.on{fill:var(--elc);stroke:var(--gold);stroke-width:1.4}
.dw-sign{font-size:15px;fill:var(--muted);text-anchor:middle;dominant-baseline:central;font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",var(--body),serif}
.dw-sign.on{fill:var(--ink);font-weight:600}
.dx-gd-card{position:relative;z-index:1;width:34%;display:block;--w:100%;border-radius:6px;box-shadow:var(--e2);transition:transform var(--motion-ui,280ms) var(--ease-out,ease)}
.dx-gd-card .tc{width:100%}
.dx-gd-card:hover{transform:translateY(-4px)}
.dx-gd-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.dx-gd-cap{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font-family:var(--mono);font-size:.76rem;color:var(--ink-2)}
.dx-layers{list-style:none;margin:0 0 var(--space-md,24px);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dx-layer{width:100%;min-height:64px;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r-md,12px);background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:border-color var(--motion-micro,160ms) ease,background var(--motion-micro,160ms) ease}
.dx-layer .n{grid-row:span 2;font-family:var(--display);font-size:1.3rem;color:var(--gold);line-height:1}
.dx-layer .t{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--muted)}
.dx-layer .v{font-size:.95rem;line-height:1.4;overflow-wrap:anywhere}
.dx-layer:hover{border-color:var(--accent)}
.dx-layer[aria-pressed="true"]{border-color:var(--ink);background:var(--elevated)}
.dx-gd-panel{min-height:15em;padding-top:var(--space-sm,16px);border-top:1px solid var(--rule)}
.dx-gd-panel .h3{margin:0 0 8px}
.dx-gd-panel .th{font-size:.8em;color:var(--ink-2)}
.dx-gd-panel .ink2{max-width:var(--measure,62ch)}
.dc-title{font-family:var(--serif);color:var(--gold);margin:0 0 10px}
.dc-rel{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.dc-rel .dx-chip{min-height:40px;font-size:.85rem;padding:0 12px}
.gd-scope{margin-top:56px}
.gd-scope .link{margin-left:6px}
.gd-plus{margin-top:clamp(48px,8vh,88px);padding:clamp(28px,4vw,48px);border:1px solid var(--rule);border-radius:var(--r-lg,20px);background:var(--elevated);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px clamp(24px,4vw,56px)}
.gd-plus .h3{margin:10px 0 14px;font-size:var(--t-h3);line-height:var(--lh-head);text-wrap:balance}
.gd-plus-q .ink2{max-width:46ch;margin:0}
.gd-plus-value{margin:var(--space-md) 0 0;padding-left:14px;border-left:2px solid var(--gold);font-family:var(--serif);font-size:var(--t-lead);line-height:1.6;color:var(--ink);max-width:30ch;text-wrap:pretty}
/* Worked example: free layers above, Plus layers below — the difference is visible, not explained. */
.gdx{margin:0;align-self:start;border:1px solid var(--rule-2);border-radius:var(--r-md);background:var(--surface);padding:14px clamp(14px,2vw,20px) 6px}
.gdx-cap{margin:0 0 6px}
.gdx-tag{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--muted);border:1px dashed var(--input);border-radius:var(--r-pill);padding:3px 10px}
.gdx-steps{list-style:none;margin:0;padding:0}
.gdx-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--rule-2)}
.gdx-steps li:first-child{border-top:0}
.gdx-steps li>div{min-width:0}
.gdx-card{flex:none}.gdx-card .tc{--w:44px}
.gdx-k{display:flex;align-items:center;gap:8px;font-size:var(--t-caption);color:var(--muted);line-height:1.4}
.gdx-k em{font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink-2)}
.gdx-plus .gdx-k em{background:var(--gold-subtle);color:var(--gold)}
.gdx-steps b{display:block;font-weight:500;font-size:var(--t-small);line-height:1.5;margin-top:2px}
.gdx-v{display:block;font-size:var(--t-caption);color:var(--ink-2);line-height:1.5;margin-top:2px}
.gdx-plus{position:relative}
.gdx-plus:first-of-type,.gdx-free+.gdx-plus{border-top:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.gdx-out p{margin:4px 0 0;font-family:var(--serif);font-size:var(--t-small);line-height:1.65;color:var(--ink)}
.gd-plus-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.gd-plus-cta .fine{margin:0}
/* Learning Path: real progress */
.lp-start{font-size:.78rem;color:var(--ink-2);margin:14px 0 4px}
.lp-here{font-family:var(--mono);font-style:normal;font-size:.68rem;letter-spacing:.04em;color:var(--accent);margin-left:8px;vertical-align:middle}
.lp-bar{display:block;height:2px;background:var(--rule);max-width:160px}
.lp-bar i{display:block;height:100%;background:var(--gold)}
.stg.here .t{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px}
/* Closing */
.home-close .h2{margin:16px 0 var(--space-lg,40px)}
.close-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,40px)}
.close-item{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:22px 0;border-top:1px solid var(--ink);text-decoration:none;color:var(--ink)}
.close-item .ci-n{font-family:var(--serif);font-size:var(--t-h3,1.4rem)}
.close-item .ci-d{grid-column:1;color:var(--ink-2);font-size:.95rem}
.close-item .ar{grid-row:1;grid-column:2;transition:transform var(--motion-micro,160ms) ease}
.close-item:hover .ar{transform:translateX(4px)}
.close-item:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.close-me{margin-top:var(--space-md,24px)}
@media (max-width:900px){
  .dx-gd-body{grid-template-columns:1fr}
  .dx-gd-stage{max-width:min(440px,100%)}
  .gd-plus{grid-template-columns:1fr}
  .close-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .dx-layers{grid-template-columns:1fr 1fr;gap:6px}
  .dx-layer{min-height:58px;padding:8px 10px;grid-template-columns:22px 1fr;column-gap:8px}
  .dx-layer .v{font-size:.86rem}
  .dw-sign{font-size:18px}
  .gd-plus{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){.dw-seg,.dx-gd-card,.close-item .ar{transition:none}}

/* ===================== สำรับ 78 ใบ · study hub ===================== */
.deck-page{padding-top:clamp(28px,6vh,64px);padding-bottom:clamp(64px,10vh,120px)}
/* ---- Learning navigator (5 sections). Each item is a card: number + RWS icon + title + one-line scope + go cue.
   Current section = gold edge + tinted ground + "กำลังดู" label (three cues, never colour alone).
   Mobile-first: one full-width list — every section visible at once, no sideways scroll. ---- */
.deck-tabs{margin:0 0 clamp(28px,5vh,48px)}
.deck-nav-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 var(--space-sm);font-size:var(--t-small);color:var(--muted)}
.deck-nav-h .mono{font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase}
.deck-nav-tip{color:var(--ink-2)}
.dn-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.dn-list>li{display:flex;min-width:0}
.dn-list>li>.dn{flex:1 1 auto;min-width:0}
.dn{--dn-edge:color-mix(in srgb,var(--ink) 18%,var(--rule));position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"n ic t go" "n ic d go";column-gap:12px;row-gap:1px;align-items:center;min-height:60px;padding:10px 14px 10px 12px;
  border:1px solid var(--dn-edge);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface) 62%,transparent);color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:border-color var(--motion-micro,160ms),background-color var(--motion-micro,160ms),transform var(--motion-ui,220ms) var(--ease-standard,var(--ease)),box-shadow var(--motion-ui,220ms)}
.dn-n{grid-area:n;font-family:var(--display);font-size:.95rem;line-height:1;color:var(--gold);min-width:1.4em}
.dn-ic{grid-area:ic;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink-2);transition:color var(--motion-micro,160ms),background-color var(--motion-micro,160ms)}
.dn-ic svg{width:22px;height:22px;display:block}
.dn-t{grid-area:t;font-size:1rem;font-weight:500;line-height:1.35;align-self:end}
.dn-d{grid-area:d;font-size:var(--t-caption);line-height:1.4;color:var(--muted);align-self:start}
.dn-d .nw{white-space:nowrap}
.dn-go{grid-area:go;justify-self:end;font-size:1.05rem;line-height:1;color:var(--ink-2);transition:transform var(--motion-ui,220ms) var(--ease-standard,var(--ease)),color var(--motion-micro,160ms)}
.dn:active{transform:scale(.985);background:color-mix(in srgb,var(--gold) 9%,var(--surface))}
.dn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dn[aria-current]{--dn-edge:var(--gold);background:color-mix(in srgb,var(--gold-subtle) 70%,var(--surface));box-shadow:inset 3px 0 0 var(--gold)}
.dn[aria-current] .dn-t{font-weight:600}
.dn[aria-current] .dn-ic{color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.dn[aria-current] .dn-go{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.04em;color:var(--gold)}
@media (hover:hover) and (pointer:fine){
  .dn:hover{--dn-edge:color-mix(in srgb,var(--ink) 34%,var(--rule));background:var(--surface);transform:translateY(-2px);box-shadow:var(--e1)}
  .dn:hover .dn-go{color:var(--accent);transform:translateX(3px)}
  .dn:hover .dn-ic{color:var(--ink)}
  .dn[aria-current]:hover{--dn-edge:var(--gold);transform:none;box-shadow:inset 3px 0 0 var(--gold)}
  .dn[aria-current]:hover .dn-go{transform:none;color:var(--gold)}
  .dn[aria-current]:hover .dn-ic{color:var(--gold)}
}
/* Arriving on a section: the gold edge draws in once (state change made visible, no layout movement). */
@keyframes dn-arrive{from{box-shadow:inset 0 0 0 var(--gold)}to{box-shadow:inset 3px 0 0 var(--gold)}}
.view:not(.first) .dn[aria-current]{animation:dn-arrive .45s var(--ease-out) both}

/* Very narrow list (large text / zoom on small phones): give the title the full width — number hides (it is decorative), the go cue drops under the scope. */
.dn-list{container:dn/inline-size}
@container dn (max-width:17em){
  .dn{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic t" "ic d" "ic go"}
  .dn .dn-n{display:none}
  .dn .dn-go{justify-self:start;margin-top:4px}
}
/* Tablet: 3 + 2, Golden Dawn spans two columns (its own wider tile). Cards stack: number + icon, title, scope, go. */
@media (min-width:600px){
  .dn-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .dn-list>li:nth-child(5){grid-column:span 2}
  .dn{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;grid-template-areas:"n ic" "t t" "d go";align-items:start;row-gap:2px;min-height:128px;padding:16px 16px 14px;box-shadow:none}
  .dn[aria-current]{box-shadow:inset 0 3px 0 var(--gold)}
  .dn-n{font-size:1.25rem;align-self:start}
  .dn-ic{width:40px;height:40px;margin-bottom:10px}
  .dn-ic svg{width:24px;height:24px}
  .dn-t{font-size:var(--t-card-title,1.05rem);align-self:auto}
  .dn-d{font-size:var(--t-label);align-self:start}
  .dn-go{align-self:end}
  @keyframes dn-arrive-top{from{box-shadow:inset 0 0 0 var(--gold)}to{box-shadow:inset 0 3px 0 var(--gold)}}
  .view:not(.first) .dn[aria-current]{animation-name:dn-arrive-top}
  @media (hover:hover) and (pointer:fine){.dn[aria-current]:hover{box-shadow:inset 0 3px 0 var(--gold)}}
}
/* Desktop: one editorial row of five. */
@media (min-width:960px){
  .dn-list{grid-template-columns:repeat(5,minmax(0,1fr))}
  .dn-list>li:nth-child(5){grid-column:auto}
  .dn{min-height:148px;padding:18px 18px 16px}
}
@media (min-width:960px) and (max-width:1199px){.dn{padding:16px 14px 14px}.dn-d{font-size:var(--t-caption)}}

/* Prev / next at the end of every section: keeps the reader moving without scrolling back up. */
.deck-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(48px,8vh,88px);padding-top:var(--space-md);border-top:1px solid var(--rule)}
.dp{display:flex;flex-direction:column;gap:4px;min-height:64px;justify-content:center;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-md);text-decoration:none;color:var(--ink);transition:border-color var(--motion-micro,160ms),background-color var(--motion-micro,160ms),transform var(--motion-ui,220ms) var(--ease-standard,var(--ease))}
.dp-next{grid-column:2;text-align:right;align-items:flex-end}
.dp-l{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.04em;color:var(--muted)}
.dp-t{font-size:var(--t-card-title,1.05rem);font-weight:500}
.dp-n{font-family:var(--display);font-weight:400;color:var(--gold);margin-right:.25em}
.dp:active{transform:scale(.985)}
.dp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.dp:hover{border-color:color-mix(in srgb,var(--ink) 34%,var(--rule));background:var(--surface)}.dp:hover .dp-l{color:var(--accent)}}

@media (prefers-reduced-motion:reduce){.dn,.dn-go,.dp{transition:none}.dn:hover,.dn:active,.dp:active{transform:none}.view .dn[aria-current]{animation:none}}
.deck-layers{margin-top:clamp(56px,9vh,96px);padding-top:var(--space-md,24px);border-top:1px solid var(--rule)}
.dl3{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dl3 li{display:flex;flex-direction:column;gap:4px}
.dl3 b{font-family:var(--display);color:var(--gold);font-weight:400}
.dl3 span{color:var(--ink-2);font-size:.94rem}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 clamp(20px,3vw,40px);margin-top:var(--space-md,24px)}
.st-tool{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:20px 0;border-top:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.st-n{font-family:var(--serif);font-size:1.15rem}
.st-why{grid-column:1;color:var(--ink-2);font-size:.94rem}
.st-meta{grid-column:1;font-size:.68rem;color:var(--muted)}
.st-tool .ar{grid-row:1;grid-column:2}
.st-tool:hover .st-n{color:var(--accent)}
.st-tool:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.deck-body .see{padding-top:0}
.deck-body .see .wrap{padding-left:0;padding-right:0}
.deck-tools{margin-top:clamp(40px,7vh,72px)}
.deck-gdt{margin-top:clamp(72px,11vh,120px)}
.deck-gd .h3,.deck-gdt .h3{margin-bottom:16px}
.dc-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dc-scroll{overflow-x:auto;border-top:1px solid var(--ink)}
.dc-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dc-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:720px}
.dc-table th,.dc-table td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.dc-table thead th{font-family:var(--mono);font-size:.7rem;font-weight:400;color:var(--muted);letter-spacing:.05em}
.dc-table tbody th{font-weight:500}
.dc-table a{color:var(--ink)}
.dc-el{display:inline-block;padding:0 8px;border-radius:999px;font-size:.8rem;border:1px solid currentColor}
.dc-el.el-fire{color:var(--wands)}.dc-el.el-water{color:var(--cups)}.dc-el.el-air{color:var(--swords)}.dc-el.el-earth{color:var(--pentacles)}
/* card page · advanced layer */
.dc-card{margin-top:28px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dc-card summary{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;min-height:56px;padding:14px 0;cursor:pointer;list-style:none}
.dc-card summary::-webkit-details-marker{display:none}
.dc-card summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--muted)}
.dc-card[open] summary::after{content:"−"}
.dc-card summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dc-card-sum{color:var(--ink-2);font-size:.92rem}
.dc-dl{margin:0 0 14px;display:grid;gap:8px}
.dc-dl div{display:grid;grid-template-columns:110px 1fr;gap:12px}
.dc-dl dt{font-family:var(--mono);font-size:.72rem;color:var(--muted);padding-top:3px}
.dc-dl dd{margin:0}
@media (max-width:760px){.dl3{grid-template-columns:1fr}.dc-dl div{grid-template-columns:90px 1fr}}
/* Two columns only where they fit; below 761px the shared .sec-head stack applies (it was overridden here, squeezing the title on phones). */
@media (min-width:900px){.deck-page .sec-head{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
@media (max-width:899px){.deck-page .sec-head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.dx-gd-info{margin-top:44px}}
.deck-body .see-head .h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}

/* =====================================================================
   SUPPORT (12 Oct 2026) — an editorial colophon, not a donation banner.
   A sunken sheet with a gold rule; copy left, what-it-pays-for right.
   ===================================================================== */
body.on-home .sec.home-support{padding:0 0 var(--space-section)}
.home-support .hs-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-lg) clamp(32px,6vw,96px);padding-block:clamp(32px,5vw,64px);padding-inline:clamp(20px,4vw,56px);border-top:2px solid var(--gold);background:color-mix(in srgb,var(--sunken) 70%,var(--bg));border-radius:0 0 var(--r-lg) var(--r-lg)}
.home-support .h2{margin:var(--space-xs) 0 var(--space-md)}
.hs-lede{margin:0;max-width:44ch;font-family:var(--serif);font-size:var(--t-body);line-height:1.8;color:var(--ink-2);text-wrap:pretty}
.hs-actions{margin-top:var(--space-lg);gap:var(--space-xs) var(--space-md)}
.hs-note{font-size:var(--t-small);color:var(--muted)}
.hs-sun{margin:var(--space-lg) 0 0}
.hs-h{margin:0 0 var(--space-sm);font-family:var(--mono);font-weight:400;font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hs-uses ol{list-style:none;margin:0;padding:0;counter-reset:hs}
.hs-uses li{counter-increment:hs;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:12px 0;border-top:1px solid var(--rule);font-size:var(--t-body);line-height:1.6;color:var(--ink)}
.hs-uses li::before{content:counter(hs);font-family:var(--display);color:var(--gold);font-size:1.15rem;line-height:1.4}
.hs-diff{margin:var(--space-md) 0 0;font-size:var(--t-small);line-height:1.7;color:var(--ink-2)}
.hs-diff b{font-weight:500;color:var(--ink)}
@media (max-width:760px){
  .home-support .hs-grid{grid-template-columns:1fr;border-radius:0;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .hs-actions{flex-direction:column;align-items:flex-start}
}