/* ------------------------------------------------------------------
   site.css — every style for the Soundpit site.
   Colours and type live in the :root block at the top; the rest runs in
   page order: base, top chrome, ground-line nav, hero and logo, Play,
   About, Work, Contact, footer, then the short-screen and lightbox rules.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Soundpit — one page, one line.
   The logo's baseline is the organising idea: a single ground line runs
   under everything, and things that are "active" drop into the pit below
   it, the way the p does in the wordmark. Black on white; colour only
   appears in the instruments, and only while they are being played.
   ------------------------------------------------------------------ */
:root{
  --paper:#FFFFFF;
  --ink:#111111;
  --ink-soft:#707070;
  --line:#111111;
  --hair:rgba(17,17,17,.22);
  --green:#2F7557;
  --orange:#E97132;
  --violet:#A25FBF;
  --mustard:#E8BD4E;

  --display:"Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --sans:"Funnel Sans", "Funnel Display", system-ui, sans-serif;

  --gutter:clamp(20px, 5vw, 72px);
  --measure:62ch;
  --stroke:1px;                /* one hairline everywhere, like the wordmark */
  --ground:68px;              /* height of the bottom nav */
  --ease:cubic-bezier(.3,.9,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  padding-bottom:var(--ground);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--mustard); color:var(--ink)}
a{color:inherit; text-decoration:none}
p{margin:0 0 1em; max-width:var(--measure)}
h1,h2,h3{font-family:var(--display); margin:0; font-weight:400; line-height:1.05; letter-spacing:-.015em}
svg{display:block}
button{font:inherit; color:inherit}
:focus-visible{outline:1.5px solid var(--ink); outline-offset:4px; border-radius:2px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- top chrome: tiny wordmark + sound switch ---------- */
.top{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px var(--gutter);
  pointer-events:none;
}
.top > *{pointer-events:auto}
.top .mini{
  width:132px; opacity:0; transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.top .mini svg{width:100%; height:auto}
body.scrolled .top .mini{opacity:1; transform:none}

/* Content fades into the paper as it scrolls under the top chrome, so the
   small wordmark always sits on a plain ground (mirrors the ground line). */
.veil{
  position:fixed; left:0; right:0; top:0; height:120px; z-index:15;
  pointer-events:none; opacity:0;
  transition:opacity .45s var(--ease);
  background:linear-gradient(to bottom,
    var(--paper) 0, var(--paper) 58px, rgba(255,255,255,0) 120px);
}
body.scrolled .veil{opacity:1}

.sound{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; padding:6px 0; cursor:pointer;
  font-size:14px; color:var(--ink-soft);
}
.sound svg{width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round}
.sound .wave{transition:opacity .3s}
.sound[aria-pressed="false"] .wave{opacity:0}
.sound[aria-pressed="false"] .cross{opacity:1}
.sound .cross{opacity:0; transition:opacity .3s}

/* ---------- ground line nav (fixed, bottom) ---------- */
.ground{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  height:var(--ground);
  padding:0 var(--gutter);
  background:linear-gradient(to top, var(--paper) 70%, rgba(255,255,255,0));
}
.ground .rail{
  position:absolute; left:var(--gutter); right:var(--gutter); top:26px;
  height:var(--stroke); background:var(--line);
}
.ground .runner{
  position:absolute; top:22px; width:9px; height:9px; margin-left:-4.5px;
  border:var(--stroke) solid var(--ink); background:var(--paper);
  left:var(--gutter);
  transition:left .12s linear;
}
.ground ul{
  list-style:none; margin:0; padding:0;
  position:absolute; left:var(--gutter); right:var(--gutter); top:0; height:100%;
  display:flex; justify-content:space-between;
}
.ground li{position:relative; flex:0 0 auto}
.ground li:first-child{margin-left:20px}
.ground li:last-child{margin-right:8px}
.ground a{
  position:relative; display:block; height:var(--ground); width:max-content;
  font-family:var(--display); font-size:15px; font-weight:500; letter-spacing:.01em;
}
.ground a .label{
  display:block; padding-top:4px; white-space:nowrap;
  transition:transform .45s var(--ease), color .3s;
}
.ground a .stem{
  position:absolute; left:0; top:26px; width:var(--stroke); height:0;
  background:var(--ink); transition:height .35s var(--ease);
}
.ground a .mark{
  position:absolute; left:-3.5px; top:22.5px; width:9px; height:9px;
  border:var(--stroke) solid var(--ink); background:var(--paper);
  transition:transform .45s var(--ease), background .3s;
}
.ground a:hover .label{color:var(--ink-soft)}
/* the active section drops into the pit */
.ground a[aria-current="true"] .stem{height:16px}
.ground a[aria-current="true"] .mark{transform:translateY(24px); background:var(--ink)}
.ground a[aria-current="true"] .label{transform:translate(16px, 36px)}

@media (max-width:640px){
  .ground a{font-size:13px}
  .ground li:first-child{margin-left:12px}
}

/* ---------- layout primitives ---------- */
.wrap{max-width:1180px; margin:0 auto; padding-inline:var(--gutter)}
section{padding:clamp(44px, 9.5vh, 109px) 0}
section + section{--pad-top:clamp(58px, 13.1vh, 133px); padding-top:var(--pad-top)}
/* Jump links (nav, hero buttons) land each section so its title sits ~150px down —
   clear of the top fade and the wordmark band, at every screen height. */
section[id]{scroll-margin-top:max(0px, calc(150px - var(--pad-top, 0px)))}
.title{
  font-size:clamp(36px, min(7vw, 10vh), 72px); font-weight:300; letter-spacing:-.03em;
  padding-bottom:.12em; margin-bottom:clamp(22px, 5vh, 67px);
  border-bottom:var(--stroke) solid var(--line);
}
.intro{
  font-family:var(--sans); font-weight:400;          /* same face as the body copy */
  font-size:clamp(17px, min(1.7vw, 2.4vh), 20px);
  line-height:1.55; letter-spacing:0;
  max-width:none;                                    /* runs the full width of both columns */
  text-align:justify; text-justify:inter-word; hyphens:manual;
  margin:0 0 clamp(34px, 5.5vh, 64px);
}
@media (max-width:620px){.intro{text-align:left; hyphens:manual}}
.lead{font-size:clamp(18px, min(2.1vw, 3vh), 24px); font-family:var(--display); font-weight:400; line-height:1.35; max-width:30ch; letter-spacing:-.01em}
.subhead{font-family:var(--display); font-size:22px; font-weight:500; margin:0 0 .6em; letter-spacing:-.01em}
.muted{color:var(--ink-soft)}
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px; border:var(--stroke) solid var(--ink); border-radius:999px;
  background:none; cursor:pointer; font-family:var(--display); font-weight:500; font-size:16px;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn:active{transform:translateY(2px)}
.btn.primary{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.btn.primary:hover{background:var(--paper); color:var(--ink)}
.textlink{border-bottom:var(--stroke) solid var(--hair); padding-bottom:1px; transition:border-color .3s}
.textlink:hover{border-color:var(--ink)}

/* ---------- hero ---------- */
.hero{
  min-height:calc(100svh - var(--ground));
  display:grid; align-content:center; justify-items:center; text-align:center;
  padding-block:clamp(40px, 6.5vh, 76px) clamp(24px, 4vh, 48px);   /* uneven on purpose: sits the block a little below centre */
  max-width:none;                     /* the wordmark can run wider than the text column */
}
/* the wordmark is the whole hero now — wide, but never taller than about half the screen */
.hero .logo{width:min(1060px, 100%, 128vh); --k:.6}   /* --k is refined by site.js to hold a hairline */
.hero .logo svg{width:100%; height:auto; overflow:visible}
/* Stroke weights, joins and ends all come from the logo file itself, and each
   one is multiplied by --k. site.js sets --k from the logo's drawn width so the
   line stays a ~1px hairline at every screen size, with the letters' relative
   weights untouched. */
.logo path{fill:none; stroke:var(--ink)}
/* the small wordmark keeps a true 1px line at any size */
.top .mini path{vector-effect:non-scaling-stroke; stroke-width:1px !important}
.hero h1{font-size:clamp(18px, min(2.1vw, 3vh), 24px); font-weight:400; max-width:44ch; text-wrap:balance; line-height:1.35; margin:clamp(6px, 1.4vh, 16px) auto 0; letter-spacing:-.01em}   /* matches .lead; small gap because the logo box already has a margin below the pit dot */
.hero .actions{display:flex; gap:26px; align-items:center; flex-wrap:wrap; justify-content:center; margin-top:clamp(20px, 3.3vh, 33px)}

/* the wordmark draws itself once, like a monoline pen */
.logo.draw path{
  /* gap longer than the path so no zero-length dash (and no stray square cap) shows before a stroke starts */
  stroke-dasharray:1 1.2; stroke-dashoffset:1;
  animation:draw .9s var(--ease) forwards;
}
.logo.draw path.sq{animation-duration:.35s}
.logo.draw path.rev{stroke-dashoffset:-1; animation-duration:.4s}  /* t hook: drawn from the stem outward */
.logo.draw path.tick{animation-duration:.25s}                       /* t foot: the short flick at the end */
.logo.draw path.flip{stroke-dashoffset:-1}                         /* right baseline: drawn left to right like the rest */
@keyframes draw{to{stroke-dashoffset:0}}
.logo.draw ~ h1, .logo.draw ~ .actions{animation:rise .8s var(--ease) 2.9s both}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .logo.draw path{animation:none; stroke-dashoffset:0}
  .logo.draw ~ h1, .logo.draw ~ .actions{animation:none}
  .inst .ripple.go{animation:none}
}

/* ---------- play: the instruments ---------- */
.pit-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:34px 24px; align-items:end; margin:0 0 56px;
}
.inst{
  --c:var(--ink);
  text-align:center; user-select:none; -webkit-user-select:none; touch-action:none;
}
.inst svg{display:block; height:clamp(168px, 17vw, 218px); width:auto; max-width:100%; margin:0 auto; overflow:visible}
.inst .art{
  fill:none; stroke:var(--ink); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  transition:stroke .35s var(--ease);
}
.inst.on .art{stroke:var(--c)}
.inst h3{font-size:19px; font-weight:500; margin:14px 0 4px; letter-spacing:-.01em}
.inst .hint{font-size:14px; color:var(--ink-soft); margin:0}
.inst .ripple{fill:none; stroke:var(--c); stroke-width:1; opacity:0; vector-effect:non-scaling-stroke}
.inst .ripple.go{animation:ripple .9s var(--ease) forwards}
@keyframes ripple{0%{opacity:.9; transform:scale(.4)} 100%{opacity:0; transform:scale(1.6)}}
.inst .ripple{transform-box:fill-box; transform-origin:center}

.wheel{cursor:grab}
.wheel.dragging{cursor:grabbing}
.wheel .rotor{transform-box:fill-box; transform-origin:center}

.pendulum{cursor:grab}
.pendulum.dragging{cursor:grabbing}
.pendulum .bob{fill:var(--paper)}   /* solid so the rod does not show through */

.mic{cursor:pointer}
.mic .arc{opacity:0; transition:opacity .25s}
.mic.on .arc{opacity:1}

.accordion{cursor:ew-resize}
.accordion .arm{transition:none}

.play-note{
  display:grid; grid-template-columns:1fr 1fr; gap:24px 80px;   /* full width: the right column ends at the rule */
}
.play-note p{
  max-width:none; margin:0;
  font-family:var(--sans); font-size:clamp(17px, min(1.7vw, 2.4vh), 20px); line-height:1.55;   /* same as .intro */
}
@media (max-width:760px){.play-note{grid-template-columns:1fr}}
.play-note p, .person p{text-align:justify; text-justify:inter-word; hyphens:manual}
@media (max-width:620px){.play-note p, .person p{text-align:left; hyphens:manual}}
.quiet i{width:9px; height:9px; border:var(--stroke) solid currentColor; display:inline-block}
.quiet{
  margin-top:28px; display:inline-flex; gap:10px; align-items:center;
  font-size:14px; color:var(--ink-soft);
}

/* ---------- about ---------- */
.why{
  display:grid; grid-template-columns:1fr 1fr; gap:22px 80px;
  margin-bottom:clamp(56px, 9.8vh, 112px);
  align-items:start;
}
.why p{margin:0}
@media (max-width:760px){
  .why{grid-template-columns:1fr; gap:14px}
  .why .lead:nth-of-type(2){margin-top:26px}   /* stacked: lead, body, lead, body */
  .why > :nth-child(1){order:1} .why > :nth-child(3){order:2}
  .why > :nth-child(2){order:3} .why > :nth-child(4){order:4}
}
/* the pair shot above the two bios */
.photos.duo{justify-content:center; margin-bottom:clamp(40px, 6vh, 72px)}
.photos.duo figure{
  aspect-ratio:3939 / 2999;                /* the photo's own shape */
  flex:0 0 auto; width:min(930px, 100%, 102vh); cursor:default;
}
/* fill the frame edge to edge — only the rounded corners clip it */
.photos.duo img{object-fit:cover}
.people{display:grid; grid-template-columns:1fr 1fr; gap:48px 80px}
@media (max-width:760px){.people{grid-template-columns:1fr}}
.person .portrait{
  aspect-ratio:4/5; max-width:320px; margin-bottom:22px;
  border:var(--stroke) solid var(--ink); border-radius:28px; overflow:hidden;
  display:grid; place-items:center; position:relative;
}
.person .portrait img{width:100%; height:100%; object-fit:cover; display:block}
.person .portrait.empty img{display:none}
.person .portrait .ph{display:none; font-size:14px; color:var(--ink-soft)}
.person .portrait.empty .ph{display:block}
.person h3{font-size:clamp(22px, min(2.7vw, 3.8vh), 30px); font-weight:400; margin-bottom:6px; letter-spacing:-.02em}
.person .role{color:var(--ink-soft); margin-bottom:18px}
.person p{max-width:none}
.mid{font-size:clamp(24px, min(3.8vw, 5.4vh), 40px); font-weight:300; letter-spacing:-.025em; padding-bottom:.18em; margin-bottom:28px; border-bottom:var(--stroke) solid var(--hair)}
.rude{max-width:none; margin-bottom:clamp(40px, 6vh, 64px)}
.rude-lead{max-width:none}
.rude, .rude-lead{text-align:justify; text-justify:inter-word; hyphens:manual}
@media (max-width:620px){.rude, .rude-lead{text-align:left; hyphens:manual}}

/* ---------- work ---------- */
.reel{
  display:flex; gap:18px; overflow-x:auto;
  padding:4px 0 22px; margin:clamp(14px, 3vh, 34px) calc(-1 * var(--gutter)) clamp(56px, 9vh, 96px); padding-left:var(--gutter); padding-right:var(--gutter);
  cursor:grab; scrollbar-width:none;
}
.reel::-webkit-scrollbar{display:none}
.reel.dragging{cursor:grabbing}
/* 2:3 — the shape of the narrowest of the stills, so nothing is cropped
   tighter than that one and the wider shots lose as little as possible */
.reel figure{
  flex:0 0 min(252px, 54vw, 40vh); margin:0;
  aspect-ratio:2/3; cursor:zoom-in; border:var(--stroke) solid var(--ink); border-radius:22px; overflow:hidden;
  position:relative; display:grid; place-items:center; background:var(--paper);
}
.reel img{width:100%; height:100%; object-fit:cover; display:block}
.reel figure.empty img{display:none}
.reel .ph{display:none; text-align:center; font-size:14px; color:var(--ink-soft)}
.reel figure.empty .ph{display:block}
.reel .ph svg{width:44px; height:44px; margin:0 auto 10px; fill:none; stroke:var(--ink); stroke-width:1; stroke-linejoin:round}

.works{display:grid; gap:clamp(96px, 14vh, 170px)}
.work-head{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.work-head h3{font-size:clamp(22px, min(2.7vw, 3.8vh), 30px); font-weight:400; letter-spacing:-.02em}
.work-head .year{color:var(--ink-soft); font-family:var(--display); font-size:18px}
/* Mach 1 mixes landscape stills with a vertical clip, so the gallery runs as
   justified rows: every item shares one row height and takes the width its own
   shape asks for. No carousel here — the reel above is the one you swipe. */
/* photo credit under a gallery: small, quiet, the name a hairline link */
.credit{margin:18px 0 0; font-size:17px; color:var(--ink-soft); max-width:none}
.credit a{color:var(--ink); border-bottom:var(--stroke) solid var(--hair); padding-bottom:1px; transition:border-color .3s}
.credit a:hover{border-color:var(--ink)}
.photos{
  --gap:20px;
  display:flex; flex-wrap:wrap; gap:var(--gap); align-items:flex-start;
}
.photos figure{
  margin:0; width:100%;
  border:var(--stroke) solid var(--ink); border-radius:18px; overflow:hidden;
  display:grid; place-items:center; position:relative; background:var(--paper);
}
/* a plain pair: half each */
.photos figure.land{flex:0 0 calc((100% - var(--gap)) / 2); aspect-ratio:3/2}
/* a photo sharing its line with the vertical clip: 1.5h + 0.5625h = one line,
   which puts the photo at 72.73% and the clip at 27.27% — both end up the same
   height, and the line runs the full width like the one above it */
.photos figure.land.with-port{flex-basis:calc((100% - var(--gap)) * 0.7273)}
.photos figure.port{flex:0 0 calc((100% - var(--gap)) * 0.2727); aspect-ratio:9/16}
.photos img, .photos video{width:100%; height:100%; object-fit:cover; display:block}
.photos figure.empty img, .photos figure.empty video{display:none}
.photos figure:not(.empty), .reel figure:not(.empty){cursor:zoom-in}
.photos.duo figure{cursor:default}
/* a soft mark so a video frame doesn't read as a still */
.play{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  transition:transform .35s var(--ease);
}
.play svg{width:clamp(52px, 24%, 76px); height:auto; overflow:visible;
  filter:drop-shadow(0 2px 14px rgba(17,17,17,.18))}
.play circle{fill:var(--paper); fill-opacity:.9; stroke:none}
.play path{fill:var(--ink); stroke:var(--ink); stroke-width:5; stroke-linejoin:round}
figure:hover > .play{transform:scale(1.05)}
figure:hover > .play circle{fill-opacity:1}
.play circle{transition:fill-opacity .35s var(--ease)}
figure.empty > .play{display:none}
.photos .ph svg{width:34px; height:34px; margin:0 auto 8px; fill:none; stroke:var(--ink); stroke-width:1; stroke-linejoin:round}
@media (max-width:620px){.photos figure, .photos figure.land, .photos figure.land.with-port, .photos figure.port{flex-basis:100%}}
.photos .ph{display:none; font-size:13px; color:var(--ink-soft); text-align:center; padding:0 10px}
.photos figure.empty .ph{display:block}
/* On a short window (a landscape laptop, a rotated tablet) everything tightens
   so a section — Contact especially — still fits on one screen. */
@media (max-height:900px) and (min-width:760px){
  .title{font-size:clamp(32px, min(5.6vw, 8vh), 60px)}
  section{padding:clamp(32px, 6vh, 64px) 0}
  section + section{--pad-top:clamp(38px, 7.5vh, 78px)}
  .title{margin-bottom:clamp(16px, 3vh, 34px)}
  .why{margin-bottom:clamp(28px, 5vh, 56px)}
  .works{gap:clamp(48px, 9vh, 96px)}
  .photos.duo figure{width:min(780px, 100%, 86vh)}
  .photos.duo{margin-bottom:clamp(22px, 4vh, 44px)}
  .people{gap:28px 80px}
  .rude{margin-bottom:clamp(22px, 4vh, 44px)}
  .inst svg{height:min(196px, 24vh)}
  .contact-grid{gap:28px 64px}
  .field{margin-bottom:16px}
  .field textarea{min-height:88px}
  .hero .logo{width:min(900px, 100%, 118vh)}
}

/* Enlarged view: the same outlined frame, most of the screen, own shape kept */
.lightbox{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  padding:clamp(16px, 4vw, 56px); background:rgba(255,255,255,.96);
  opacity:0; transition:opacity .28s var(--ease);
}
@supports (backdrop-filter:blur(4px)){.lightbox{backdrop-filter:blur(6px)}}
.lightbox.on{opacity:1}
.lightbox[hidden]{display:none}
.lb-frame{
  margin:0; border:var(--stroke) solid var(--ink); border-radius:22px;
  overflow:hidden; background:var(--paper); display:grid; line-height:0;
  max-width:100%; max-height:100%;
}
.lb-frame img, .lb-frame video{
  display:block; width:auto; height:auto;
  max-width:min(92vw, 1400px); max-height:84vh;
}
.lb-close{
  position:fixed; top:20px; right:22px; z-index:1;
  background:none; border:0; cursor:pointer; padding:8px;
  font-family:var(--display); font-size:15px; letter-spacing:.02em; color:var(--ink);
}
.lb-close:hover{color:var(--ink-soft)}
.soon{
  display:inline-flex; align-items:center; gap:12px; padding:10px 16px 10px 12px;
  border:var(--stroke) solid var(--hair); border-radius:999px; color:var(--ink-soft); font-size:15px;
}
.soon i{width:9px; height:9px; border:var(--stroke) solid var(--ink); display:inline-block}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:48px 80px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.field{display:grid; gap:8px; margin-bottom:26px}
.field label{font-family:var(--display); font-weight:500; font-size:16px}
.field input,.field textarea{
  width:100%; background:none; border:0; border-bottom:var(--stroke) solid var(--ink);
  padding:10px 0; font:inherit; color:var(--ink); border-radius:0;
  transition:border-color .3s;
}
.field textarea{min-height:120px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(17,17,17,.38)}
.field input:focus,.field textarea:focus{outline:none; border-bottom-color:var(--ink); border-bottom-width:2px}
.field small{color:var(--ink-soft); font-size:13px}
.form-foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.form-msg{font-size:15px; color:var(--ink-soft)}
.form-msg.ok{color:var(--ink)}
.form-msg.err{color:var(--orange)}
.honey{position:absolute; left:-9999px; opacity:0; height:0; width:0}
.ways{display:grid; gap:28px; align-content:start}
.ways h3{font-size:16px; font-weight:500; color:var(--ink-soft); margin-bottom:6px}
.ways a{display:table}              /* one link per line, underline only as wide as the text */
.ways a + a{margin-top:10px}
.ways a{font-family:var(--display); font-size:clamp(18px, min(2vw, 2.9vh), 22px); letter-spacing:-.01em}
.ways a{border-bottom:var(--stroke) solid var(--hair); padding-bottom:2px; transition:border-color .3s}
.ways a:hover{border-color:var(--ink)}

footer{padding:40px 0 30px; color:var(--ink-soft); font-size:14px}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

/* ------------------------------------------------------------------
   Acknowledgement of Country — the first thing a visitor sees.
   The page underneath waits: it doesn't scroll, and the logo holds its
   drawing until Enter is pressed, so nobody misses it. The html element
   gets .entered once they're in (see site.js); within the same visit it's
   already set before the page paints, so it never flashes up again.
   ------------------------------------------------------------------ */
.aoc{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; padding:clamp(16px, 4vw, 48px);
  background:rgba(255,255,255,.7);
  transition:opacity .7s var(--ease), visibility 0s linear .7s;
}
@supports (backdrop-filter:blur(4px)){.aoc{backdrop-filter:blur(12px)}}
.aoc-card{
  width:100%; max-width:600px; max-height:100%; overflow:auto;
  background:var(--paper); border:var(--stroke) solid var(--ink); border-radius:22px;
  padding:clamp(30px, 5vw, 56px) clamp(24px, 5vw, 56px);
  text-align:center;
  transition:transform .7s var(--ease);
}
.aoc h2{
  font-family:var(--display); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(24px, min(2.6vw, 3.6vh), 32px); margin:0 0 clamp(18px, 3vh, 28px);
}
.aoc p{
  font-family:var(--sans); font-size:clamp(16px, min(1.6vw, 2.3vh), 18px); line-height:1.6;
  max-width:46ch; margin:0 auto 14px; text-wrap:balance;
}
.aoc .aoc-close{font-family:var(--display); font-size:clamp(17px, min(1.8vw, 2.6vh), 20px); margin-top:clamp(18px, 3vh, 26px)}
.aoc .btn{margin-top:clamp(20px, 3.5vh, 32px); min-width:9em; justify-content:center}

/* while it's up: page still, drawing held */
html:not(.entered) body{overflow:hidden}
html:not(.entered) .logo.draw path,
html:not(.entered) .logo.draw ~ h1,
html:not(.entered) .logo.draw ~ .actions{animation-play-state:paused}

/* once in: fade the whole thing away */
.entered .aoc{opacity:0; visibility:hidden; pointer-events:none}
.aoc[hidden]{display:none}
.entered .aoc-card{transform:translateY(10px)}
@media (prefers-reduced-motion: reduce){.aoc, .aoc-card{transition:none}}