/* =====================================================================
   ATTENTION, ENGINEERED. — design system
   Genre: paper + faint pixel grid + quantized heat field + stepped motion.
   Everything snaps to the cell. Nothing fades when it can step.
   ===================================================================== */

@font-face{
  font-family:"Grotesk AE";
  src:url("../assets/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight:300 700;
  font-display:swap;
}

:root{
  --paper:#ffffff;
  --ink:#0a0a0a;
  --muted:#8b8b8b;
  --body:#2a2a2a;
  /* the four heat bands + the neon core (the field's whole palette) */
  --b1:#181242;   /* deep indigo — cold edge          */
  --b2:#4438ff;   /* electric indigo — mid            */
  --b3:#ff3dc8;   /* magenta — hot                    */
  --b4:#ff5a1f;   /* signal orange — hottest band     */
  --neon:#caff00; /* acid — the cursor core / signal  */
  --line:rgba(10,10,10,.12);
  --line-2:rgba(10,10,10,.06);
  --cell:14px; --gutter:56px; --maxw:1176px; --radius:26px;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
}
@media(max-width:680px){ :root{--gutter:28px;} }

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth; overscroll-behavior:none;}
body{margin:0; overscroll-behavior:none; background:var(--paper); color:var(--ink); overflow-x:hidden;
  font-family:"Grotesk AE","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased;}
a{color:inherit;}
.mono{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;}

/* pixel-stepped corners (the staircase). Shared by buttons, chips, arrows. */
.pxcorners, .btn, .ctabtn, .sg-teaser, .sg-again, .sl-arrow{
  clip-path:polygon(10px 0, calc(100% - 10px) 0, calc(100% - 10px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 10px, 100% 10px,
    100% calc(100% - 10px), calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) calc(100% - 5px), calc(100% - 10px) calc(100% - 5px),
    calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 10px), 0 calc(100% - 10px),
    0 10px, 5px 10px, 5px 5px, 10px 5px, 10px 0);
}

/* ===== the field ===== */
#field{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none;}

/* ===== pixel controls (cell / brush) ===== */
.pxctl{position:fixed; left:16px; bottom:16px; z-index:200; display:flex; align-items:center; gap:5px;
  padding:7px 9px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(10,10,10,.12); border-radius:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  transition:opacity .35s ease, transform .35s ease;}
.pxctl .lbl{color:var(--muted); margin:0 3px;}
.pxctl .lbl:first-child{margin-left:0;}
.pxctl button{font:inherit; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(10,10,10,.16); background:#fff; color:var(--ink); border-radius:6px; cursor:pointer; padding:0;
  transition:background .15s,border-color .15s;}
.pxctl button:hover{border-color:rgba(10,10,10,.45);}
.pxctl button.on{background:var(--ink); color:#fff; border-color:var(--ink);}
.pxctl.hide{opacity:0; transform:translateY(8px); pointer-events:none;}
@media(max-width:720px){ .pxctl{display:none;} }

/* ===== return mark (appears when the hero header scrolls away) ===== */
.marklink{position:fixed; top:14px; left:16px; z-index:60; display:inline-flex; padding:6px; background:var(--paper);
  border:1px solid var(--line-2); color:var(--ink); transform:translateY(-190%); pointer-events:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .2s ease;}
.marklink.show{transform:none; pointer-events:auto;}
.marklink:hover{border-color:var(--ink);}
.marklink svg{width:26px; height:26px; display:block;}

/* ===== hero ===== */
.hero{position:relative; min-height:100vh; background:transparent; z-index:1;}
.hhead{position:relative; z-index:5; background:#fff; padding:0 var(--gutter);}
.hhead::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--line);
  transform-origin:left; transform:scaleX(0); animation:lineGrowX .9s cubic-bezier(.16,1,.3,1) .5s both;}
.hgrid{max-width:var(--maxw); margin:0 auto; padding:calc(var(--cell)*2) 0 calc(var(--cell)*2 + 2px);
  display:grid; grid-template-columns:1fr; gap:calc(var(--cell)*3); align-items:stretch;}
@media(min-width:900px){ .hgrid{grid-template-columns:1.6fr 1fr;} }
.hl{margin:0; align-self:start; font-weight:400; text-transform:uppercase;
  font-size:clamp(32px,5.2vw,82px); line-height:.92; letter-spacing:-.035em;}
@keyframes heroIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
@keyframes heroLine{ from{transform:translateY(115%);} to{transform:translateY(0);} }
@keyframes lineGrowX{ to{transform:scaleX(1);} }
@keyframes lineGrowY{ to{transform:scaleY(1);} }
.hhead .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em;}
.hhead .ln > span{display:block; transform:translateY(115%); animation:heroLine .95s steps(6) both;}
.hl .ln:nth-child(1) > span{animation-delay:.10s;}
.hl .ln:nth-child(2) > span{animation-delay:.21s;}
.hdesc .ln:nth-child(1) > span{animation-delay:.36s;}
.hdesc .ln:nth-child(2) > span{animation-delay:.44s;}
.htag{animation:heroIn .9s steps(6) .58s both;}
.hfoot svg{animation:heroIn .9s steps(6) .78s both;}
.hcol{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:calc(var(--cell)*2);}
@media(min-width:900px){
  .hcol{padding-left:calc(var(--cell)*3);}
  .hcol::before{content:""; position:absolute; left:0; top:calc(var(--cell)*-2); bottom:calc(var(--cell)*-2); width:1px;
    background:var(--line); transform-origin:top; transform:scaleY(0); animation:lineGrowY .85s cubic-bezier(.16,1,.3,1) .42s both;}
}
.hdesc{margin:0; font-weight:400; text-transform:uppercase; font-size:clamp(13px,1.45vw,20px); line-height:1.18; letter-spacing:-.01em;}
.hdesc span{display:block; text-align:justify; text-align-last:justify; -webkit-text-align-last:justify;}
.hfoot{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.hfoot .aemark{width:34px; height:34px; display:block; flex:none; margin-top:2px;}
/* the mark: a choppy spin every so often, and on hover */
.aemark{transform-origin:50% 50%;}
@keyframes markSpin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
.aemark:hover, .aemark.spin{animation:markSpin .9s steps(12);}
.htag{margin:0; font-size:13px; line-height:1.45; max-width:34ch; text-align:right;}

main{position:relative; z-index:2;}
.sheet{position:relative; z-index:2; background:transparent;}
.hero + .intro{margin-top:-24vh;}
.intro ~ .sheet, .caro + .sheet{margin-top:0;}

/* ===== intro lead ===== */
.intro{position:relative; z-index:2; padding:calc(var(--cell)*7) var(--gutter) 0;}
.intro .wrap{max-width:var(--maxw); margin:0 auto;}
.intro .lead{font-size:clamp(26px,3.4vw,46px); line-height:1.06; letter-spacing:-.02em; font-weight:400; margin:0; opacity:0;}
.intro .lead.ready{opacity:1;}
.intro .lead em{font-style:normal; color:var(--muted);}
.intro .lead .ln{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em;}
.intro .lead .ln > span{display:block; transform:translateY(115%); transition:transform .85s steps(6);}
.intro .lead.in .ln > span{transform:translateY(0);}

/* ===== carousel ===== */
.caro{position:relative; z-index:2; background:transparent; padding:calc(var(--cell)*7) var(--gutter);}
.caro .ch{max-width:var(--maxw); margin:0 auto calc(var(--cell)*2); display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--cell)*1.5);}
.caro .ch h2{font-size:clamp(26px,3.4vw,46px); line-height:1.06; font-weight:400; letter-spacing:-.02em; margin:0; max-width:18ch;}
.caro .ch p{max-width:62ch; margin:0; color:var(--body); font-size:clamp(15px,1.15vw,18px); line-height:1.62;}
.track-wrap{position:relative; overflow:hidden; margin:0 calc(-1 * var(--gutter)); padding:calc(var(--cell)*3) 0;
  touch-action:pan-y; user-select:none; -webkit-user-select:none;}
.track-wrap, .track-wrap *{cursor:grab;}
.track-wrap.drag, .track-wrap.drag *{cursor:grabbing !important;}
.track{display:flex; gap:28px; width:max-content; padding:0 max(var(--gutter), calc((100vw - var(--maxw)) / 2)); will-change:transform;}
.slide{flex:0 0 auto; width:min(90vw,420px); display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:0; padding:0 0 26px; text-decoration:none; color:inherit;}
.slide .tile{position:relative; width:100%; height:350px; overflow:hidden; background:transparent;}
.slide .tile canvas{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none;}
.slide .t{font-size:clamp(22px,2.2vw,30px); font-weight:500; letter-spacing:-.02em; margin:20px 0 0;}
.slide .d{color:var(--body); font-size:14.5px; line-height:1.5; margin:9px 26px 0; max-width:32ch;}
.slide .num{position:absolute; top:10px; left:10px; z-index:2; display:inline-grid; place-items:center; min-width:24px; height:24px;
  padding:0 4px; background:var(--b1); color:#fff; font-family:var(--mono); font-size:9px; letter-spacing:.08em;}
.sl-arrow{position:absolute; top:calc(var(--cell)*3 + 175px); transform:translateY(-50%); z-index:6; width:42px; height:42px;
  border:0; background:var(--ink); color:#fff; display:none; align-items:center; justify-content:center; padding:0; cursor:pointer;
  transition:background .2s ease, opacity .25s ease;}
.sl-arrow.prev{left:16px;} .sl-arrow.next{right:16px;}
.sl-arrow svg{width:18px; height:18px;}
.sl-arrow:hover{background:var(--b2);}
.sl-arrow[disabled]{opacity:0; pointer-events:none;}
@media(hover:hover) and (pointer:fine){ .sl-arrow{display:flex;} }

/* ===== pull quote (black sheet) ===== */
.quote{position:relative; z-index:2; padding:clamp(80px,14vh,180px) var(--gutter); background:var(--ink); color:var(--paper);
  border-radius:var(--radius); margin:0 8px;}
.quote .wrap{max-width:var(--maxw); margin:0 auto;}
.quote .q{font-size:clamp(32px,6vw,98px); line-height:1; letter-spacing:-.03em; font-weight:300; margin:0; max-width:15ch;}
.quote .attr{margin-top:26px; color:rgba(255,255,255,.5);}
.quote .after{margin-top:30px; font-size:clamp(15px,1.2vw,19px); line-height:1.6; max-width:40ch; color:rgba(255,255,255,.82);}

/* ===== editorial ===== */
section.ed{padding:calc(var(--cell)*9) var(--gutter);}
.ed .wrap{max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; gap:calc(var(--cell)*2);}
@media(min-width:860px){
  .ed .wrap{display:grid; grid-template-columns:.82fr 1.18fr; column-gap:calc(var(--cell)*6); row-gap:0; align-items:start;}
  .ed .head{margin:0;}
}
.ed .kick{color:var(--muted); margin:14px 0 0; font-size:10px;}
.ed h2{font-size:clamp(26px,3.4vw,46px); line-height:1.06; letter-spacing:-.02em; font-weight:400; margin:0; max-width:16ch;}
.ed p{font-size:clamp(15px,1.15vw,18px); line-height:1.62; max-width:48ch; margin:0 0 1.05em; color:var(--body);
  text-align:justify; text-align-last:left;}
.ed p:last-child{margin-bottom:0;}
.ed p.s{color:var(--muted); font-size:14px;}
.ed strong{font-weight:500; color:var(--ink);}
.ed .wrap > .reveal:not(.head) > p{max-width:none;}

/* the two faces */
.two{display:grid; grid-template-columns:1fr; gap:calc(var(--cell)*2); max-width:none; margin:calc(var(--cell)*3.5) 0;}
@media(min-width:560px){ .two{grid-template-columns:1fr 1fr;} }
.two .c{position:relative; text-align:center;}
.two .c .l{color:var(--muted); margin-bottom:7px;}
.two .c p{font-size:14px; margin:0; text-wrap:balance; text-align:center; text-align-last:center;}
.two .c .face{display:block; width:128px; height:128px; margin:2px auto 18px; transform-origin:50% 58%;
  will-change:transform; transition:transform .3s ease;}
.two .c .face.jolt{animation:faceJolt .5s steps(5);}
@keyframes faceJolt{0%{transform:translate(0,0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}100%{transform:translate(0,0)}}
.two .c .face.settle{transform:scale(1.04);}

/* ===== process / stack rows ===== */
.proc{position:relative; z-index:2; padding:calc(var(--cell)*7) var(--gutter);}
.proc .wrap{max-width:var(--maxw); margin:0 auto;}
.proc .ph{display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--cell)*2); margin-bottom:calc(var(--cell)*3);}
.proc .ph h2{font-size:clamp(26px,3.4vw,46px); line-height:1.04; letter-spacing:-.02em; font-weight:400; margin:0;}
.proc .ph .pd{color:var(--body); font-size:clamp(15px,1.15vw,18px); line-height:1.62; max-width:46ch; margin:0;}
.proc .flowviz{width:100%; aspect-ratio:3/1; margin-bottom:clamp(14px,2.4vh,26px);}
.proc .flowviz canvas{width:100%; height:100%; display:block;}
.proc .steps{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media(min-width:840px){ .proc .steps{grid-template-columns:repeat(4,1fr);} }
.proc .step{position:relative; display:flex; flex-direction:column; gap:13px; transition:opacity .3s ease;}
@media(hover:hover){
  .proc .steps:hover .step{opacity:.45;}
  .proc .steps .step:hover{opacity:1;}
  .proc .steps .step{cursor:none; padding-bottom:17px;}
  .proc .pxline{position:absolute; left:0; right:0; bottom:0; height:8px; opacity:0; transition:opacity .25s steps(3); pointer-events:none;}
  .proc .step:hover .pxline{opacity:1;}
  .proc .pxline::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(10,10,10,.12) 0 8px,transparent 8px 9px);}
  .proc .pxline i{position:absolute; top:0; left:0; width:62px; height:8px;
    background:repeating-linear-gradient(90deg,#0a0a0a 0 8px,transparent 8px 9px); transform:translateX(var(--lx,0px));}
}
.proc .dl{display:flex; align-items:center; gap:9px; line-height:1.25; margin-top:2px;}
.proc .dl .dn{display:inline-grid; place-items:center; width:22px; height:22px; flex:none; background:var(--b1); color:#fff;
  font-family:var(--mono); font-size:9px; letter-spacing:.04em;
  clip-path:polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px),
    calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px),
    0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0);}
.proc .dl .dt{font-size:15px; font-weight:500;}
.proc .dd{margin:0; font-size:13.5px; line-height:1.5; color:var(--body);}

/* levels list */
.ed .pts{list-style:none; margin:calc(var(--cell)*2) 0 0; padding:0;}
.ed .pts li{display:grid; grid-template-columns:auto 1fr; gap:var(--cell); align-items:baseline; padding:var(--cell) 0;
  border-top:1px solid var(--line); font-size:15px; line-height:1.5; color:var(--body);}
.ed .pts li .n{color:var(--muted); white-space:nowrap;}
.ed .pts li b{font-weight:500; color:var(--ink);}
.ed .pts li:last-child{border-bottom:1px solid var(--line);}
#levels p.s{margin-top:calc(var(--cell)*2); font-size:clamp(15px,1.15vw,18px); color:var(--body);}

/* ===== buttons ===== */
.btn, .ctabtn, .sg-again, .sg-teaser{position:relative; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:clamp(15px,1.2vw,18px); font-weight:500; letter-spacing:-.01em; padding:16px 36px;
  background:var(--ink); color:#fff; border:0; cursor:pointer; transition:background .2s;}
.btn:hover, .ctabtn:hover, .sg-again:hover, .sg-teaser:hover{background:var(--b2);}
.btn .lbl, .ctabtn .lbl, .sg-again .lbl, .sg-teaser .lbl{position:relative; z-index:2;}
.btn .pxfx, .ctabtn .pxfx, .sg-again .pxfx, .sg-teaser .pxfx{position:absolute; inset:0; z-index:1; display:grid; pointer-events:none;}

/* ===== cta ===== */
.cta{position:relative; z-index:2; background:transparent; padding:calc(var(--cell)*12) var(--gutter);}
.cta .wrap{max-width:var(--maxw); margin:0 auto; text-align:center;}
.cta .ctabtn{margin-top:38px;}
.cta .meta{margin:30px auto 0; font-size:clamp(15px,1.2vw,19px); line-height:1.6; max-width:46ch; color:var(--muted); text-wrap:balance;}
.cta .meta a{color:var(--ink); text-decoration:none;
  background:repeating-linear-gradient(90deg,var(--ink) 0 4px,transparent 4px 7px) left bottom/0% 3px no-repeat;
  transition:background-size .45s cubic-bezier(.16,1,.3,1); padding-bottom:2px;}
.cta .meta a:hover{background-size:100% 3px;}

/* ===== footer: the signal game ===== */
footer{position:relative; z-index:2; height:calc(var(--cell)*9); background:transparent; overflow:hidden; cursor:pointer;
  transition:height .55s cubic-bezier(.16,1,.3,1);}
footer.playing{height:min(52vh,390px); cursor:default;}
footer #sigscape{position:absolute; left:0; bottom:0; width:100%; height:calc(var(--cell)*9); z-index:2; display:block; pointer-events:none;}
footer.playing #sigscape{top:0; bottom:auto; height:min(52vh,390px);}
.sg-teaser{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
  transition:opacity .35s, transform .35s, background .2s;}
footer.playing .sg-teaser{opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.86);}
.sg-teaser .sg-blocks{display:inline-block; margin-left:9px; vertical-align:-3px;}
.sg-teaser .sg-blocks canvas{display:block;}
#signalgame{position:absolute; inset:0; z-index:3; display:none; pointer-events:none; font-family:var(--mono);}
footer.playing #signalgame{display:block;}
#signalgame .sg-score{position:absolute; top:18px; left:22px; font-size:clamp(15px,2vw,22px); letter-spacing:.08em; color:var(--ink);}
#signalgame .sg-hint{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); text-align:center; font-size:11px;
  line-height:1.7; color:var(--muted); letter-spacing:.02em;}
#signalgame .sg-pad{position:absolute; right:20px; bottom:20px; display:grid; grid-template-columns:repeat(2,44px); gap:8px; pointer-events:auto;}
#signalgame .sg-pad button, #signalgame .sg-close{border:0; background:#fff; color:var(--ink); cursor:pointer; display:grid;
  place-items:center; pointer-events:auto; box-shadow:0 2px 12px rgba(10,10,10,.14); transition:background .15s,color .15s;
  clip-path:polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px),
    0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0);}
#signalgame .sg-pad button{width:44px; height:44px;}
#signalgame .sg-pad button svg, #signalgame .sg-close svg{width:18px; height:18px; display:block;}
#signalgame .sg-pad button:hover, #signalgame .sg-close:hover{background:var(--ink); color:#fff;}
#signalgame .sg-close{position:absolute; top:18px; right:20px; width:38px; height:38px; z-index:6;}
#signalgame .sg-over{position:absolute; inset:0; z-index:5; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; text-align:center; pointer-events:auto; background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:sgOver .3s ease both;}
#signalgame.sg-isover .sg-over{display:flex;}
@keyframes sgOver{from{opacity:0;} to{opacity:1;}}
#signalgame .sg-over .ttl{font-family:"Grotesk AE",sans-serif; font-size:clamp(22px,3.2vw,34px); font-weight:400;
  letter-spacing:-.02em; color:var(--ink); line-height:1;}
.sg-again{font-size:14px; padding:13px 30px;}
@media(max-width:680px){
  .sg-teaser{font-size:11px; letter-spacing:.18em; padding:11px 18px;}
  footer.playing{height:min(58vh,460px);}
  footer.playing #sigscape{top:0; bottom:auto; height:calc(min(58vh,460px) - 88px);}
  #signalgame .sg-close{top:10px; right:12px; width:36px; height:36px;}
  #signalgame .sg-hint{display:none;}
  #signalgame .sg-pad{left:50%; right:auto; bottom:22px; transform:translateX(-50%); grid-template-columns:repeat(2,52px); gap:8px;}
  #signalgame .sg-pad button{width:52px; height:52px; font-size:20px;}
}

/* ===== reveals: stepped slide, no fade ===== */
.reveal{transform:translateY(18px); transition:transform .8s steps(6);}
.reveal.in{transform:none;}

/* ===== mobile ===== */
@media(max-width:720px){
  .ed p{text-align:left;}
  .hdesc span{text-align:left; -webkit-text-align-last:left; text-align-last:left;}
  .hfoot{flex-direction:column; gap:10px; align-items:flex-start;}
  .htag{text-align:left; max-width:none; width:100%;}
  .hero + .intro{margin-top:-30vh;}
  .ed{padding:calc(var(--cell)*5) var(--gutter);}
  .proc{padding:calc(var(--cell)*4) var(--gutter);}
  .caro{padding:calc(var(--cell)*4) var(--gutter);}
  .cta{padding:calc(var(--cell)*7) var(--gutter);}
}

/* ===== reduced motion ===== */
@media(prefers-reduced-motion: reduce){
  .hhead .ln > span{animation:none; transform:none;}
  .htag, .hfoot svg{animation:none;}
  .hhead::after{animation:none; transform:scaleX(1);}
  .hcol::before{animation:none; transform:scaleY(1);}
  .aemark:hover, .aemark.spin{animation:none;}
  .reveal{transform:none;}
  .intro .lead{opacity:1;}
  .intro .lead .ln > span{transform:none;}
}