/* ==========================================================================
   Airborne Artworks -- main.css
   Image-led, parallax-driven, monochrome with one acid accent.
   Type: Archivo (variable width + weight) for display, Instrument Sans for UI.
   No serifs, no blend-mode compositing tricks, no template furniture.
   ========================================================================== */

:root{
  --ink:#07080a;
  --ink-2:#0c0e11;
  --ink-3:#13161a;
  --paper:#f5f6f7;
  --paper-2:#e9eaec;
  --dim:rgba(245,246,247,.58);
  --faint:rgba(245,246,247,.3);
  --line:rgba(245,246,247,.11);
  --acid:#c3dbe6;
  --disp:"Archivo","Inter Tight",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ui:"Instrument Sans","Archivo",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(18px,4vw,72px);
  --e:cubic-bezier(.19,1,.22,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --r:clamp(14px,2.2vw,30px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lock,body.lock{overflow:hidden}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--ui);font-weight:400;font-size:16px;line-height:1.5;
  letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{margin:0;padding:0;list-style:none}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

/* --------------------------------------------------------------- typography */
.d1,.d2,.d3,h1,h2,h3{
  font-family:var(--disp);font-weight:700;line-height:.9;
  letter-spacing:-.045em;margin:0;text-wrap:balance;
}
h1,.d1{font-size:clamp(2.9rem,11.5vw,10.5rem);font-variation-settings:"wdth" 92,"wght" 700}
h2,.d2{font-size:clamp(2.1rem,6.4vw,5.4rem);font-variation-settings:"wdth" 95,"wght" 650}
h3,.d3{font-size:clamp(1.25rem,2.5vw,2.1rem);letter-spacing:-.035em;font-variation-settings:"wdth" 100,"wght" 600}
.thin{font-variation-settings:"wdth" 88,"wght" 300}
.acid{color:var(--acid)}
.outline{
  color:transparent;-webkit-text-stroke:1px var(--dim);letter-spacing:.01em;
}
.lbl{
  font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.lbl--acid{color:var(--acid)}
.lede{font-size:clamp(1rem,1.55vw,1.28rem);line-height:1.45;color:var(--dim);max-width:46ch;letter-spacing:-.012em}
/* Notes for Christian: things in the mockup he has to confirm or replace.
   Highlighter yellow with near-black text, so they read as marker on a page
   and cannot be mistaken for finished copy. */
.flag,.prod__pr{color:#141210;background:#f2d23a;letter-spacing:0;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:.15em .4em;border-radius:2px}
.flag{font-size:.8rem}
/* Block-level flags hug their text instead of painting a full-width bar --
   the point is a highlighter stroke over a note, not a banner. */
p.flag{display:inline-block;max-width:72ch}
/* Shop prices are invented too, so they carry the same marker rather than
   sitting there looking like a real price list. */
.prod__pr{font-weight:600}

/* -------------------------------------------------------------- overlays */
.grain{
  position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
.vig{
  position:fixed;inset:0;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 clamp(90px,14vw,240px) rgba(0,0,0,.3);
}

/* ---------------------------------------------------------------- cursor
   A dot at rest; over anything watchable it becomes the drone, props turning.
   White with a dark shadow so it holds up over photography as well as ink. */
.cur{
  position:fixed;top:0;left:0;z-index:900;pointer-events:none;
  width:8px;height:8px;border-radius:99px;background:var(--acid);
  display:grid;place-items:center;
  transition:width .4s var(--e),height .4s var(--e),background .3s,border-radius .3s;
}
.cur.big{width:74px;height:74px;background:transparent;border-radius:0}
.cur__drone{
  position:absolute;width:100%;height:100%;
  opacity:0;transform:scale(.5) rotate(-25deg);
  transition:opacity .3s var(--e),transform .45s var(--e);
  color:var(--paper);
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.6));
}
.cur.big .cur__drone{opacity:1;transform:none}
.cur__frame{fill:currentColor;stroke:currentColor;stroke-linejoin:round}
.cur__lens{fill:var(--ink);opacity:.5}
.cur__props .p{
  fill:currentColor;opacity:.55;transform-box:fill-box;transform-origin:50% 50%;
  animation:prop .3s linear infinite;
}
.cur__props .p2,.cur__props .p3{animation-direction:reverse}
.cur__lt--port{fill:#ff3b30}
.cur__lt--star{fill:#30d158}
.cur__lt{animation:droneBlink 2.4s steps(1,end) infinite}
.cur span{
  position:absolute;top:calc(100% + 4px);
  font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper);white-space:nowrap;
  opacity:0;transform:translateY(-4px);transition:.3s var(--e);
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.cur.big span{opacity:1;transform:none}
@media (hover:none),(max-width:900px){.cur{display:none}}

/* -------------------------------------------------------------- preloader */
.pre{
  position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:grid;grid-template-rows:1fr auto;padding:var(--pad);
  transform:translateY(0);transition:transform 1.05s var(--e-io);
}
.pre.done{transform:translateY(-101%);pointer-events:none}
.pre.gone{display:none}
.pre__mid{align-self:center;justify-self:center;text-align:center;width:min(900px,90vw)}
.pre__word{
  font-family:var(--disp);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(2.6rem,11vw,9rem);line-height:.86;
  font-variation-settings:"wdth" 90,"wght" 700;
}
.pre__word i{
  display:inline-block;font-style:normal;
  transform:translateY(105%);opacity:0;
  transition:transform 1s var(--e),opacity .6s;
}
.pre.in .pre__word i{transform:none;opacity:1}
.pre__foot{display:flex;justify-content:space-between;align-items:end;gap:20px}
.pre__num{
  font-family:var(--disp);font-variation-settings:"wdth" 80,"wght" 300;
  font-size:clamp(2.4rem,7vw,5rem);line-height:.8;letter-spacing:-.05em;color:var(--acid);
}
.pre__rule{flex:1;height:1px;background:var(--line);position:relative;margin-bottom:10px}
.pre__rule i{position:absolute;inset:0 auto 0 0;width:0;background:var(--acid);transition:width .3s linear}

/* ------------------------------------------------------------------- nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:600;
  display:flex;align-items:center;gap:clamp(14px,3vw,34px);
  padding:18px var(--pad);
  transition:transform .7s var(--e),background .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(7,8,10,.78);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line)}
.nav.up{transform:translateY(-102%)}
.nav__mark{
  font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:-.02em;
  font-variation-settings:"wdth" 105,"wght" 700;margin-right:auto;
  display:flex;align-items:center;gap:9px;text-transform:uppercase;
}
/* Navigation lights. Red to port, green to starboard, strobing out of phase
   the way an aircraft's do. --lt-c is set per side. */
.lt{
  width:7px;height:7px;border-radius:99px;flex:none;
  background:var(--lt-c);
  box-shadow:0 0 6px var(--lt-c),0 0 14px color-mix(in srgb,var(--lt-c) 55%,transparent);
  animation:navlight 2.4s steps(1,end) infinite;
}
.lt--port{--lt-c:#ff3b30}
.lt--star{--lt-c:#30d158}
@keyframes navlight{
  0%{opacity:1}
  14%{opacity:.12}
  24%{opacity:1}
  38%{opacity:.12}
  100%{opacity:.12}
}
/* Footer wordmark carries the same pair, scaled to the type. */
.foot__mark .lt{
  /* Beats the older `.foot__mark i` rule, which was still painting these with
     the ice accent instead of the navigation colours used in the header. */
  width:.07em;height:.07em;
  background:var(--lt-c);
  box-shadow:0 0 .05em var(--lt-c),0 0 .12em color-mix(in srgb,var(--lt-c) 55%,transparent);
}
@media (prefers-reduced-motion:reduce){.lt{animation:none;opacity:1}}
.nav__links{display:flex;gap:clamp(14px,2vw,28px);align-items:center}
.nav__links a{
  font-size:12.5px;font-weight:500;letter-spacing:-.005em;position:relative;padding:5px 0;
  color:var(--dim);transition:color .35s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:1px;height:1px;width:100%;background:var(--acid);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e);
}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after,.nav__links a.on::after{transform:scaleX(1)}
.nav__links a.on{color:var(--paper)}
.nav__cta{
  border:1px solid var(--line);border-radius:99px;padding:8px 17px!important;color:var(--paper)!important;
  transition:.4s var(--e);
}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)!important}
.bag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500}
.bag__n{
  min-width:19px;height:19px;border-radius:99px;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;padding:0 5px;
}
.burger{display:none;width:24px;height:12px;position:relative}
.burger i{position:absolute;left:0;right:0;height:1.5px;background:var(--paper);border-radius:2px;transition:.45s var(--e)}
.burger i:first-child{top:0}.burger i:last-child{bottom:0}
.burger.on i:first-child{top:5px;transform:rotate(45deg)}
.burger.on i:last-child{bottom:5.5px;transform:rotate(-45deg)}
@media (max-width:940px){.nav__links{display:none}.burger{display:block}}

/* ---------------------------------------------------------------- drawer */
.draw{
  position:fixed;inset:0;z-index:590;background:var(--ink-2);
  display:grid;grid-template-rows:1fr auto;padding:calc(var(--pad) + 60px) var(--pad) var(--pad);
  transform:translateY(-101%);transition:transform .85s var(--e-io);
}
.draw.on{transform:none}
.draw nav{align-self:center;display:flex;flex-direction:column}
.draw nav a{
  font-family:var(--disp);font-weight:700;font-variation-settings:"wdth" 92,"wght" 700;
  font-size:clamp(2.2rem,12vw,5.4rem);line-height:1.02;letter-spacing:-.05em;
  display:flex;align-items:baseline;gap:14px;padding:4px 0;
  opacity:0;transform:translateY(30px);transition:opacity .8s var(--e),transform .8s var(--e),color .3s;
}
.draw.on nav a{opacity:1;transform:none}
.draw.on nav a:nth-child(1){transition-delay:.2s}
.draw.on nav a:nth-child(2){transition-delay:.26s}
.draw.on nav a:nth-child(3){transition-delay:.32s}
.draw.on nav a:nth-child(4){transition-delay:.38s}
.draw.on nav a:nth-child(5){transition-delay:.44s}
.draw nav a em{font-family:var(--ui);font-size:11px;font-style:normal;color:var(--acid);letter-spacing:.14em}
.draw nav a:hover{color:var(--acid)}
.draw__foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ================================================================== HERO */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero__plane{position:absolute;inset:-8% -4%;will-change:transform}
.hero__plane img,.hero__plane video{width:100%;height:100%;object-fit:cover}
.hero__plane--back{z-index:0}
.hero__plane--mid{
  z-index:1;inset:auto;left:50%;bottom:-4%;width:min(64vw,860px);
  transform:translateX(-50%);opacity:.5;
  mask-image:radial-gradient(70% 62% at 50% 82%,#000 12%,rgba(0,0,0,.35) 55%,transparent 82%);
  -webkit-mask-image:radial-gradient(70% 62% at 50% 82%,#000 12%,rgba(0,0,0,.35) 55%,transparent 82%);
}
.hero__scrim{
  position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(115% 75% at 50% 22%,rgba(7,8,10,0) 0%,rgba(7,8,10,.5) 62%,rgba(7,8,10,.94) 100%),
    linear-gradient(to top,var(--ink) 1%,rgba(7,8,10,.1) 38%);
}
.hero__type{
  position:absolute;z-index:3;left:var(--pad);right:var(--pad);top:50%;
  transform:translateY(-50%);text-align:center;
}
.hero__type h1{font-variation-settings:"wdth" 88,"wght" 700}
.hero__sub{
  margin:22px auto 0;display:flex;gap:8px 26px;justify-content:center;flex-wrap:wrap;
  opacity:0;transform:translateY(12px);transition:.9s var(--e) .55s;
}
.hero.go .hero__sub{opacity:1;transform:none}
.hero__foot{
  position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:26px;
  display:flex;justify-content:space-between;align-items:end;gap:18px;
  opacity:0;transition:.9s var(--e) .75s;
}
.hero.go .hero__foot{opacity:1}
.hero__foot .r{text-align:right}
.cue{display:flex;align-items:center;gap:10px}
.cue i{width:1px;height:40px;background:linear-gradient(var(--acid),transparent);transform-origin:top;animation:cue 2.1s var(--e) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* line / char reveal primitives */
.ln{display:block;overflow:hidden;padding-bottom:.22em}
.ln > i{display:block;font-style:normal;transform:translateY(108%);transition:transform 1.15s var(--e)}
.go .ln > i,.in .ln > i{transform:none}
.go .ln:nth-child(2) > i{transition-delay:.09s}
.go .ln:nth-child(3) > i{transition-delay:.18s}
.ch{display:inline-block;transform:translateY(105%);opacity:0}
.in .ch{animation:chIn .85s var(--e) forwards}
@keyframes chIn{to{transform:none;opacity:1}}

/* ============================================================== ticker */
.tick{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:14px 0;background:var(--ink);position:relative;z-index:3;
}
.tick__t{display:flex;gap:44px;white-space:nowrap;width:max-content;will-change:transform}
.tick__t span{
  font-family:var(--disp);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(1.5rem,3.6vw,2.9rem);font-variation-settings:"wdth" 78,"wght" 700;
  color:var(--dim);text-transform:uppercase;
}
.tick__t span.dot{font-size:1rem;color:var(--acid);align-self:center}

/* ======================================================== stacked panels
   Each .panel scales down and dims as the next one rides over it.        */
.stackwrap{position:relative}
.panel{min-height:190svh;position:relative}
.panel__in{
  position:sticky;top:0;height:100svh;border-radius:var(--r);overflow:hidden;
  background:var(--ink);will-change:transform,filter;
}
/* Panel scrim is bottom-weighted only -- the frame stays legible. */
.panel__scrim{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(7,8,10,.9) 0%,rgba(7,8,10,.42) 34%,rgba(7,8,10,0) 68%);
}
.panel__cap{
  position:absolute;z-index:3;left:var(--pad);right:var(--pad);
  bottom:clamp(34px,6vh,80px);max-width:min(760px,86vw);
}
/* Caption type is sized for the caption box, not for a full section head. */
.panel__cap h2{font-size:clamp(1.9rem,5vw,4.2rem);margin-top:10px}
.panel__cap .lede{margin-top:12px;max-width:40ch;font-size:clamp(.92rem,1.25vw,1.08rem)}

/* -------------------------------------------------------------- parallax */
.pfig{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink-3)}
.pfig img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);will-change:transform}
.pfig--fill{position:absolute;inset:0;border-radius:0}
.pfig--fill img{height:100%}
.pfig--16 img{aspect-ratio:16/9}
.pfig--43 img{aspect-ratio:4/3}
.pfig--45 img{aspect-ratio:4/5}
/* The portrait is a square crop of a full-length shot, so anything tighter
   than 1:1 takes his head and his feet with it. */
.pfig--11 img{aspect-ratio:1/1;transform:none}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--e)}
.clip.in{clip-path:inset(0 0 0 0)}

/* ------------------------------------------------------------- sec heads */
.sec{padding:clamp(84px,13vh,180px) var(--pad)}
.sec--tight{padding-top:clamp(48px,7vh,90px)}
.sechead{display:grid;gap:18px;max-width:1040px;margin-bottom:clamp(34px,5vw,66px)}
.sechead__row{display:flex;align-items:baseline;gap:16px}
.sechead__row .rule{flex:1;height:1px;background:var(--line)}

/* --------------------------------------------------- editorial light band */
.light{background:var(--paper);color:var(--ink)}
.light .lbl{color:rgba(7,8,10,.42)}
.light .lede{color:rgba(7,8,10,.62)}
.light .outline{-webkit-text-stroke-color:rgba(7,8,10,.3)}
.light .pfig{background:var(--paper-2)}
.editorial{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,5vw,80px);align-items:center;
}
.editorial__stack{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px)}
.editorial__stack .pfig:first-child{grid-column:1/-1}
@media (max-width:880px){.editorial{grid-template-columns:1fr}}

/* ==================================================== pinned horizontal */
.pin{position:relative}
.pin__view{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.pin__track{display:flex;gap:clamp(12px,1.8vw,28px);padding:0 var(--pad);will-change:transform;align-items:center}
.slab{position:relative;flex:none;width:clamp(300px,38vw,620px);border-radius:var(--r);overflow:hidden}
.slab--tall{width:clamp(250px,28vw,440px)}
.slab--wide{width:clamp(360px,54vw,880px)}
.slab img{width:100%;object-fit:cover;transform:scale(1.16);will-change:transform}
.slab--tall img{aspect-ratio:3/4}
.slab img{aspect-ratio:4/3}
.slab--wide img{aspect-ratio:16/9}
.slab__cap{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  align-items:end;gap:12px;padding:38px 18px 15px;
  background:linear-gradient(to top,rgba(7,8,10,.78),rgba(7,8,10,0));
}
.slab__cap b{
  font-family:var(--disp);font-weight:700;font-variation-settings:"wdth" 96,"wght" 650;
  font-size:clamp(.95rem,1.5vw,1.35rem);letter-spacing:-.03em;
  text-shadow:0 2px 20px rgba(0,0,0,.7);
}
.slab__cap span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pin__hint{
  position:absolute;z-index:3;right:var(--pad);bottom:34px;display:flex;align-items:center;gap:10px;
}
.pin__hint i{width:44px;height:1px;background:var(--acid);transform-origin:left;animation:swipe 2.4s var(--e) infinite}
@keyframes swipe{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}

/* ================================================ scroll-lit paragraph */
.lit{
  font-family:var(--disp);font-weight:600;font-variation-settings:"wdth" 94,"wght" 600;
  font-size:clamp(1.5rem,4.2vw,3.4rem);line-height:1.1;letter-spacing:-.04em;
  max-width:26ch;margin:0;
}
.lit .rw{display:inline-block;color:rgba(245,246,247,.14);transition:color .45s linear}
.lit .rw.lit-on{color:var(--paper)}

.litwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(28px,6vw,90px);align-items:center}
.litfig{margin:0}
.litfig img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92)}
.litfig figcaption{margin-top:12px}
@media (max-width:820px){
  .litwrap{grid-template-columns:1fr;gap:34px}
  .litfig img{aspect-ratio:3/2}
}

/* ---------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line)}
.stats > div{background:var(--ink);padding:clamp(26px,4vw,50px) var(--pad)}
.light .stats{background:rgba(7,8,10,.12)}
.light .stats > div{background:var(--paper)}
.stats b{
  display:block;font-family:var(--disp);font-weight:700;
  font-variation-settings:"wdth" 80,"wght" 700;
  font-size:clamp(2.1rem,5.4vw,4rem);line-height:.85;letter-spacing:-.055em;margin-bottom:10px;
}

/* -------------------------------------------------------------- services */
.svc > li{
  position:relative;display:grid;grid-template-columns:52px 1.05fr 1.5fr auto;
  gap:clamp(14px,3vw,40px);align-items:center;
  padding:clamp(20px,3.2vw,38px) var(--pad);border-top:1px solid var(--line);
  transition:background .55s var(--e);
}
.svc > li:last-child{border-bottom:1px solid var(--line)}
.svc > li:hover{background:var(--ink-3)}
.svc p{margin:0;color:var(--dim);font-size:.94rem;max-width:46ch}
.svc__pr{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.svc__peek{
  position:absolute;right:clamp(110px,15vw,250px);top:50%;width:200px;aspect-ratio:4/3;
  object-fit:cover;border-radius:10px;pointer-events:none;opacity:0;
  transform:translateY(-50%) scale(.72) rotate(-6deg);transition:.75s var(--e);
}
.svc > li:hover .svc__peek{opacity:1;transform:translateY(-50%) scale(1) rotate(-3deg)}
@media (max-width:900px){
  .svc > li{grid-template-columns:40px 1fr;grid-template-areas:"n h" ". p" ". r"}
  .svc__n{grid-area:n}.svc h3{grid-area:h}.svc p{grid-area:p}.svc__pr{grid-area:r}
  .svc__peek{display:none}
}
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;padding:clamp(40px,6vw,74px) var(--pad)}
.creds li{border-left:1px solid var(--acid);padding-left:15px}
.creds b{display:block;font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.creds span{font-size:12.5px;color:var(--faint)}

/* ------------------------------------------------------------------ shop */
.tabs{display:flex;gap:8px;margin-bottom:clamp(24px,3.4vw,40px)}
.tabs button{
  border:1px solid var(--line);border-radius:99px;padding:9px 20px;font-size:12px;font-weight:500;
  transition:.4s var(--e);
}
.tabs button:hover{border-color:var(--dim)}
.tabs button.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:clamp(14px,2vw,30px)}
.grid.off{display:none}
.prod{opacity:0;transform:translateY(26px);transition:opacity .85s var(--e),transform .85s var(--e)}
.prod.in{opacity:1;transform:none}
.prod__img{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink-3)}
.prod__img img{aspect-ratio:4/5;width:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.prod__img--m img{aspect-ratio:1/1;filter:saturate(.45) brightness(.82)}
.prod:hover .prod__img img{transform:scale(1.05)}
.prod__tag{
  position:absolute;top:12px;left:12px;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(7,8,10,.62);backdrop-filter:blur(8px);
  padding:5px 10px;border-radius:99px;
}
.prod__b{padding:15px 0 0}
.prod__loc{margin:3px 0 13px;font-size:12px;color:var(--faint)}
.sizes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.sizes button{border:1px solid var(--line);padding:5px 11px;border-radius:7px;font-size:11.5px;font-weight:500;transition:.3s var(--e)}
.sizes button.on{border-color:var(--acid);color:var(--acid)}
.prod__buy{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:13px}
.prod__pr{font-family:var(--disp);font-weight:600;font-size:1.1rem;letter-spacing:-.03em}
.add{border:1px solid var(--paper);border-radius:99px;padding:8px 19px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:.4s var(--e)}
.add:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ------------------------------------------------------------------ bag */
.cart{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);z-index:700;background:var(--ink-2);
  border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .75s var(--e-io);
}
.cart.on{transform:none}
.cart__h{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid var(--line)}
.cart__b{flex:1;overflow-y:auto;padding:16px 22px}
.empty{color:var(--faint);font-size:14px;padding:18px 0}
.ci{display:grid;grid-template-columns:56px 1fr auto;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.ci img{width:56px;aspect-ratio:4/5;object-fit:cover;border-radius:7px}
.ci b{display:block;font-weight:600;font-size:13.5px}
.ci small{color:var(--faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.ci__q{display:flex;align-items:center;gap:8px;margin-top:6px}
.ci__q button{width:20px;height:20px;border:1px solid var(--line);border-radius:5px;line-height:1;font-size:13px}
.ci__rm{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ci__rm:hover{color:var(--acid)}
.cart__f{padding:20px 22px;border-top:1px solid var(--line)}
.cart__t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.cart__t b{font-family:var(--disp);font-weight:700;font-size:1.8rem;letter-spacing:-.04em}
.scrim{position:fixed;inset:0;z-index:690;background:rgba(4,5,6,.62);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .5s}
.scrim.on{opacity:1;pointer-events:auto}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;border:1px solid currentColor;border-radius:99px;
  padding:13px 27px;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  transition:.45s var(--e);position:relative;overflow:hidden;
}
.btn span{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--paper);z-index:0;
  transform:translateY(101%);transition:transform .55s var(--e);
}
.btn:hover{color:var(--ink);border-color:var(--paper)}
.btn:hover::before{transform:none}
.btn--solid{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn--solid::before{background:var(--acid)}
.btn--full{width:100%;justify-content:center}

/* ------------------------------------------------------------- flight log */
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:clamp(26px,3.5vw,44px)}
.filters button{border:1px solid var(--line);border-radius:99px;padding:8px 17px;font-size:11.5px;font-weight:500;transition:.4s var(--e)}
.filters button.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.log{display:flex;flex-direction:column}
.entry{
  display:grid;grid-template-columns:110px 1fr 1.2fr;gap:clamp(16px,3vw,46px);
  padding:clamp(22px,3.4vw,44px) 0;border-top:1px solid var(--line);align-items:start;
  opacity:0;transform:translateY(24px);transition:opacity .85s var(--e),transform .85s var(--e);
}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry.in{opacity:1;transform:none}
.entry.out{display:none}
.entry__m{display:flex;flex-direction:column;gap:5px}
.entry__m b{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:-.02em;color:var(--acid)}
.entry p{color:var(--dim);margin:10px 0 14px;font-size:.94rem;max-width:44ch}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags i{font-style:normal;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:4px 9px;color:var(--faint)}
.entry__media{position:relative;overflow:hidden;border-radius:var(--r)}
.entry__media img{aspect-ratio:16/10;width:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--e)}
.entry:hover .entry__media img{transform:scale(1.19)}
/* Bottom corner, not the middle: a centred badge covers the subject the
   moment the preview starts playing. */
.play{
  position:absolute;z-index:3;inset:auto 14px 14px auto;display:block;
  transition:opacity .4s var(--e),transform .4s var(--e);
}
.entry__media.playing .play,.tile.playing .play{opacity:0;transform:translateY(8px) scale(.9)}
.play i{
  width:42px;height:42px;border-radius:99px;border:1px solid rgba(245,246,247,.45);
  background:rgba(7,8,10,.45);backdrop-filter:blur(8px);display:grid;place-items:center;
  transition:.5s var(--e);
}
.play i::after{content:"";border-left:8px solid var(--paper);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.entry:hover .play i{background:var(--paper);border-color:var(--paper);transform:scale(1.12)}
.entry:hover .play i::after{border-left-color:var(--ink)}
@media (max-width:920px){.entry{grid-template-columns:1fr;gap:14px}.entry__media{order:-1}}

/* ------------------------------------------------------------------- map */
.mapbox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-3)}
#map{height:clamp(360px,64vh,680px);width:100%;background:var(--ink-3)}
.leaflet-container{background:var(--ink-3)!important;font-family:var(--ui)!important}
.leaflet-tile{filter:grayscale(1) invert(.94) contrast(.85) brightness(.82)}
.leaflet-control-attribution{background:rgba(7,8,10,.72)!important;color:var(--faint)!important;font-size:10px!important}
.leaflet-control-attribution a{color:var(--dim)!important}
.leaflet-bar{border:1px solid var(--line)!important}
.leaflet-bar a{background:var(--ink-2)!important;color:var(--paper)!important;border-bottom-color:var(--line)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--ink-2)!important;color:var(--paper)!important;border-radius:10px!important;box-shadow:0 14px 50px rgba(0,0,0,.7)!important}
.leaflet-popup-content{margin:13px 15px!important;font-size:13px!important}
.leaflet-popup-content b{display:block;font-family:var(--disp);font-weight:700;font-size:1.1rem;letter-spacing:-.03em;margin-bottom:2px}
.leaflet-popup-content em{font-style:normal;color:var(--faint);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.leaflet-popup-content a{color:var(--acid);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:inline-block;margin-top:8px}
.leaflet-popup-close-button{color:var(--faint)!important}
.dot{width:13px;height:13px;border-radius:99px;background:var(--acid);animation:pulse 2.6s infinite}
.dot.old{background:var(--dim);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(195,219,230,.55)}70%{box-shadow:0 0 0 17px rgba(195,219,230,0)}100%{box-shadow:0 0 0 0 rgba(195,219,230,0)}}
.legend{display:flex;gap:20px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--line)}
.legend i{width:8px;height:8px;border-radius:99px;background:var(--acid);display:inline-block;margin-right:7px}
.legend i.d{background:var(--dim)}

/* --------------------------------------------------------------- contact */
.big{
  font-family:var(--disp);font-weight:700;font-variation-settings:"wdth" 76,"wght" 700;
  font-size:clamp(3.4rem,17vw,16rem);line-height:.8;letter-spacing:-.06em;
  color:var(--ink-3);white-space:nowrap;user-select:none;will-change:transform;
}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);margin-top:clamp(26px,4vw,60px)}
@media (max-width:880px){.cgrid{grid-template-columns:1fr}}
.clist{display:flex;flex-direction:column;gap:13px;margin-top:30px}
.clist li{display:flex;gap:13px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:11px;flex-wrap:wrap}
.clist > li > span:first-child{min-width:82px}
.clist em{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acid);font-style:normal}

.form{display:flex;flex-direction:column;gap:4px}
.field{position:relative;border-bottom:1px solid var(--line);padding-top:20px;transition:border-color .4s}
.field:focus-within{border-color:var(--acid)}
.field input,.field textarea{width:100%;background:none;border:0;color:var(--paper);font:inherit;padding:8px 0;resize:none}
.field input:focus,.field textarea:focus{outline:none}
.field label{position:absolute;left:0;top:22px;font-size:14px;color:var(--faint);pointer-events:none;transition:.4s var(--e)}
.field input:focus+label,.field textarea:focus+label,.field.has label{top:0;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acid)}
.form .btn{margin-top:24px;align-self:flex-start}
.note{font-size:11.5px;color:var(--faint);margin:11px 0 0}
.note.ok{color:var(--acid)}

/* ---------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);padding:clamp(40px,6vw,80px) var(--pad) 26px;position:relative;z-index:3;background:var(--ink)}
.foot__mark{
  font-family:var(--disp);font-weight:700;font-variation-settings:"wdth" 74,"wght" 700;
  font-size:clamp(2.2rem,12.5vw,11rem);line-height:.82;letter-spacing:-.055em;margin-bottom:36px;
  display:flex;align-items:center;gap:.06em;
}
.foot__mark i{width:.1em;height:.1em;border-radius:99px;background:var(--acid);flex:none}
.foot__cols{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.foot__cols a{font-size:12px;font-weight:500;color:var(--dim);transition:color .3s}
.foot__cols a:hover{color:var(--acid)}
.foot__legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px}

/* ----------------------------------------------------------------- toast */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:800;transform:translate(-50%,150%);
  background:var(--paper);color:var(--ink);padding:12px 24px;border-radius:99px;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .6s var(--e);
}
.toast.on{transform:translate(-50%,0)}

/* ------------------------------------------------------------- page intro */
.phero{padding:clamp(130px,20vh,250px) var(--pad) clamp(34px,5vw,70px)}
.phero .lede{margin-top:22px}

/* --------------------------------------------------------- reveal default */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .grain{display:none}
  .rv,.prod,.entry{opacity:1!important;transform:none!important}
  .ln > i,.ch{transform:none!important;opacity:1!important}
  .clip{clip-path:none!important}
  .lit .rw{color:var(--paper)}
  .pfig img,.slab img,.entry__media img{transform:none}
}


/* ==================================================== page transition
   The same wipe as the intro, reused on internal navigation. Slats sweep
   in over the outgoing page, the next document's preloader wipes them off. */
.curtain{
  position:fixed;inset:0;z-index:1200;pointer-events:none;display:flex;
}
.curtain.on{pointer-events:auto}
.curtain__s{
  flex:1;background:var(--ink);transform:translateY(101%);
  transition:transform .62s var(--e-io);
}
.curtain.on .curtain__s{transform:none}
.curtain__s:nth-child(2){transition-delay:.05s}
.curtain__s:nth-child(3){transition-delay:.1s}
.curtain__s:nth-child(4){transition-delay:.15s}
.curtain__s:nth-child(5){transition-delay:.2s}
.curtain__word{
  position:fixed;inset:0;z-index:1201;display:grid;place-items:center;pointer-events:none;
  font-family:var(--disp);font-weight:700;font-variation-settings:"wdth" 80,"wght" 700;
  font-size:clamp(1.4rem,5vw,3.4rem);letter-spacing:-.05em;
  opacity:0;transform:translateY(16px);transition:.5s var(--e);
}
.curtain.on ~ .curtain__word,.curtain__word.on{opacity:1;transform:none;transition-delay:.22s}


/* ==================================================== mosaic feed
   Dense, image-led grid. Each tile shows a still until hover, when a short
   self-hosted loop fades in over it. Nothing downloads until then. */
.mosaic{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
  grid-auto-rows:220px;gap:clamp(8px,1.1vw,16px);
}
.mosaic.off,.log.off{display:none}
.tile{
  position:relative;overflow:hidden;border-radius:calc(var(--r) * .6);background:var(--ink-3);
  display:block;grid-row:span 1;
}
.tile--tall{grid-row:span 2}
.tile--wide{grid-column:span 2}
@media (max-width:640px){.tile--wide{grid-column:span 1}}
.tile img,.tile__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e),opacity .45s var(--e);
}
.tile__v{opacity:0;z-index:1}
.tile.playing .tile__v{opacity:1}
.tile.playing img{transform:scale(1.04)}
.tile:hover img{transform:scale(1.04)}
.tile__badge{
  position:absolute;z-index:3;top:10px;right:10px;font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:99px;
  background:rgba(7,8,10,.6);backdrop-filter:blur(6px);
}
.tile__cap{
  position:absolute;z-index:3;inset:auto 0 0 0;padding:44px 14px 13px;
  display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(to top,rgba(7,8,10,.85),rgba(7,8,10,0));
  transform:translateY(6px);opacity:.9;transition:.5s var(--e);
}
.tile:hover .tile__cap{transform:none;opacity:1}
.tile__cap b{
  font-family:var(--disp);font-weight:650;font-variation-settings:"wdth" 96,"wght" 650;
  font-size:1rem;letter-spacing:-.03em;line-height:1.1;
}
.tile__cap span{font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.tile.out,.entry.out{display:none}

/* Preview loops in the flight log and the home rail use the same mechanism. */
.entry__media .tile__v,.slab .tile__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1;
  transition:opacity .45s var(--e);
}
.entry__media.playing .tile__v,.slab.playing .tile__v{opacity:1}
.entry__media .play,.slab__cap{z-index:2}

/* View switch */
.views{display:flex;gap:7px;margin-bottom:18px}
.views button{
  border:1px solid var(--line);border-radius:99px;padding:8px 18px;font-size:11.5px;
  font-weight:500;transition:.4s var(--e);
}
.views button.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* Clustered map pin showing how many flights share a spot. */
.dot.many{
  width:22px;height:22px;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--ink);
  font-family:var(--ui);
}
.filters button em{font-style:normal;opacity:.5;margin-left:4px}

/* Hero loop layered over the panel still, revealed once it plays. */
.panel__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  opacity:0;transition:opacity 1.1s var(--e);
}
.panel__v[data-ready],.panel__in:hover .panel__v{opacity:1}
.panel__v{opacity:1}


/* ============================================ drone in the wordmark
   A silhouette flying laps inside AIRBORNE ARTWORKS. Black reads as a cut-out
   against the white letterforms; over the dark ground it half-disappears,
   which is the point -- it passes behind the word and comes back.
   The path is in percentages so it tracks the responsive type. */
/* Shrink-wrapped to the text: as a full-width flex block the drone's percentage
   path spanned the whole viewport and it spent most of the lap in empty space
   to the right of the word. */
.foot__mark{position:relative;isolation:isolate;width:max-content;max-width:100%;overflow:hidden}
.drone{
  position:absolute;top:0;left:0;
  width:clamp(20px,3vw,44px);height:auto;
  color:#05060a;z-index:2;pointer-events:none;
  animation:droneFly 34s cubic-bezier(.45,0,.55,1) infinite;
  filter:drop-shadow(0 0 2px rgba(245,246,247,.5));
}
.drone__frame{fill:currentColor;stroke:currentColor;stroke-linejoin:round}
.drone__lens{fill:#fff;opacity:.35}
.drone__props .p{fill:currentColor;opacity:.5;transform-box:fill-box;transform-origin:50% 50%}
.drone__props .p{animation:prop .32s linear infinite}
.drone__props .p2,.drone__props .p3{animation-direction:reverse}
.drone__lt{r:3.6}
.drone__lt--port{fill:#ff3b30}
.drone__lt--star{fill:#30d158}
.drone__lt{animation:droneBlink 2.4s steps(1,end) infinite}

@keyframes prop{to{transform:rotate(360deg)}}
@keyframes droneBlink{0%{opacity:1}16%{opacity:.15}30%{opacity:1}46%{opacity:.15}100%{opacity:.15}}

/* Waypoints trace the two lines of the wordmark, banking into each turn.
   left/top drive the path because percentage transforms would resolve against
   the drone itself rather than the wordmark. */
@keyframes droneFly{
  0%   {left:8%;  top:32%;  transform:translate(-50%,-50%) rotate(16deg)}
  11%  {left:24%; top:64%;  transform:translate(-50%,-50%) rotate(34deg)}
  22%  {left:44%; top:34%;  transform:translate(-50%,-50%) rotate(-12deg)}
  32%  {left:63%; top:60%;  transform:translate(-50%,-50%) rotate(26deg)}
  42%  {left:86%; top:38%;  transform:translate(-50%,-50%) rotate(-18deg)}
  53%  {left:90%; top:66%;  transform:translate(-50%,-50%) rotate(170deg)}
  64%  {left:66%; top:40%;  transform:translate(-50%,-50%) rotate(196deg)}
  75%  {left:40%; top:66%;  transform:translate(-50%,-50%) rotate(206deg)}
  86%  {left:18%; top:38%;  transform:translate(-50%,-50%) rotate(330deg)}
  100% {left:8%;  top:32%;  transform:translate(-50%,-50%) rotate(376deg)}
}

@media (prefers-reduced-motion:reduce){
  .drone{animation:none;left:44%;top:44%;transform:translate(-50%,-50%)}
  .drone__props .p,.drone__lt{animation:none}
}

/* Marks a panel whose background is a licensed stand-in rather than his work.
   Deliberately visible: an unmarked one would misrepresent the portfolio. */
.stand-in{
  position:absolute;z-index:4;top:14px;left:14px;
  font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#141210;
  /* Same yellow as .flag: this panel is not his footage, which is exactly the
     kind of thing he has to see and decide about. */
  background:#f2d23a;
  padding:5px 10px;border-radius:99px;border:1px solid rgba(20,18,16,.25);
}


/* ==================================================== landing (landing.html)
   The front door: wordmark, one drone holding station with its navigation
   lights running, and a way in. Deliberately quiet -- the site behind it is
   loud, so this is a held breath rather than a second hero.
   Everything here is scoped under .land so it cannot leak into the site. */
.land{
  min-height:100svh;display:grid;place-items:center;
  grid-template-rows:1fr auto;gap:0;padding:clamp(24px,5vw,56px);
  position:relative;overflow:hidden;
}
/* A slow drift behind the type, so the page is never quite still. */
.land::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 38% at 22% 26%,rgba(195,219,230,.09),transparent 70%),
    radial-gradient(40% 34% at 78% 72%,rgba(195,219,230,.06),transparent 70%);
  animation:landDrift 44s ease-in-out infinite alternate;
}
@keyframes landDrift{to{transform:translate3d(3%,-3%,0) scale(1.08)}}

.land__mid{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:clamp(18px,3vw,30px)}
.land__lbl{font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--paper-2);opacity:.62}

/* The wordmark carries the same port/starboard pair as the header, sized to
   the type rather than to pixels so it scales with the display font. */
.land__mark{
  position:relative;font-family:var(--disp);font-weight:800;
  font-size:clamp(22px,5.6vw,76px);line-height:.94;letter-spacing:-.035em;
  text-transform:uppercase;font-variation-settings:"wdth" 96,"wght" 800;
  display:flex;align-items:center;gap:.34em;white-space:nowrap;
}
.land__mark{max-width:100%}
.land__mark .lt{width:.075em;height:.075em;
  box-shadow:0 0 .06em var(--lt-c),0 0 .16em color-mix(in srgb,var(--lt-c) 55%,transparent)}

/* The drone hovers over the wordmark instead of flying the footer's laps --
   at this size a lap would leave the frame and read as a loading spinner. */
.land__drone{
  width:clamp(56px,9vw,104px);height:auto;color:var(--paper);
  animation:landHover 6.5s ease-in-out infinite;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.55));
}
@keyframes landHover{
  0%,100%{transform:translate3d(0,0,0) rotate(-2.5deg)}
  50%    {transform:translate3d(0,-13px,0) rotate(2.5deg)}
}

.land__enter{margin-top:clamp(6px,1.4vw,14px)}
.land__foot{position:relative;z-index:1;width:100%;display:flex;justify-content:space-between;
  align-items:center;gap:16px;font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--paper-2);opacity:.5}
.land__skip{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
@media (max-width:560px){
  /* .land__mark is nowrap with max-width:100%, but a nowrap flex row does
     not actually shrink to fit -- it just overflows, and since it starts
     flush at the left padding edge rather than overflowing evenly, the
     result reads as clipped to the right rather than centred. 6.9vw was
     measured against the rendered scrollWidth at 320-560px, not guessed,
     and keeps "Airborne Artworks" plus its two nav-light icons inside the
     viewport across that whole range. */
  .land__mark{font-size:clamp(20px,6.9vw,40px);gap:.3em}
  .land__foot{flex-direction:column;gap:10px;text-align:center}
}

/* -------------------------------------------------- landing countdown
   Stands in for .land__enter on the "coming soon" build only -- see
   maintenance/index.html. Kept here rather than a second stylesheet so it
   can never drift out of step with the rest of the landing page. */
.land__cd{display:flex;align-items:flex-start;gap:clamp(12px,2.6vw,26px);
  margin-top:clamp(6px,1.4vw,14px)}
.land__cd .u{display:grid;justify-items:center;gap:7px;min-width:2.2em}
.land__cd .u b{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 96,"wght" 800;
  font-size:clamp(24px,4.4vw,46px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.land__cd .u span{font-family:var(--ui);font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper-2);opacity:.55}
.land__cd .sep{font-family:var(--disp);font-weight:800;font-size:clamp(24px,4.4vw,46px);
  line-height:1;color:var(--paper-2);opacity:.28;padding-top:.03em}
@media (max-width:560px){
  .land__cd{gap:10px}
}

/* ------------------------------------------------- landing mini-game
   Coming-soon build only (maintenance/index.html + assets/js/drone.js).
   Purely additive: .land__drone--live and .land__dronebox layer on top
   of the ordinary .land__drone above, so the real landing page (which
   never gets these classes) is untouched. The drone leaves the document
   flow to roam .land freely; .land__dronebox is an invisible spacer left
   in its old flow position so the wordmark below does not jump up. */
.land__dronebox{width:clamp(56px,9vw,104px);height:clamp(56px,9vw,104px)}
.land__drone--live{
  position:absolute;top:0;left:0;z-index:2;pointer-events:none;
  animation:none;will-change:transform;
}
.obstacles{position:absolute;inset:0;z-index:2;pointer-events:none}
.obstacle{
  position:absolute;pointer-events:none;border-radius:50%;
  width:var(--size);height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border:2.5px solid var(--line);transition:transform .3s var(--e),border-color .3s,box-shadow .3s;
}
.obstacle::before{content:"";position:absolute;inset:26%;border-radius:50%;border:1px solid var(--line)}
.obstacle.hit{border-color:var(--acid);box-shadow:0 0 22px rgba(195,219,230,.5);transform:scale(1.2)}
@media (prefers-reduced-motion:reduce){
  .obstacle{transition:none}
}

/* Sound-unlock hint -- same label typography as .land__foot, but lit in the
   accent colour rather than muted, so it reads as a prompt rather than a
   footnote. Fades out (see drone.js) once the browser actually grants audio. */
.land__hint{
  font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acid);
  text-shadow:0 0 10px rgba(195,219,230,.7),0 0 22px rgba(195,219,230,.4);
  transition:opacity .6s var(--e);
}
.land__hint.gone{opacity:0}
@media (prefers-reduced-motion:reduce){
  .land::before,.land__drone{animation:none}
}


/* Marker colours, last word.
   Component rules further down the sheet set their own colour -- .svc__pr goes
   faint, .prod__pr takes the display face -- and would otherwise beat the
   .flag block near the top, which is exactly where the highlight would quietly
   stop working. Restating them here keeps every unconfirmed value marked.
   The class is doubled to out-specify descendant rules such as
   `.creds li span`, which was painting flagged text at 30% opacity on yellow. */
.flag.flag,.prod__pr.prod__pr{color:#141210;background:#f2d23a;opacity:1}