/* ==========================================================================
   WHITE LOBSTER — 1966 spy-picture main title, airbrushed in 1985.
   Drenched color fields, one per title card, hard cuts between them.
   ========================================================================== */

@font-face{font-family:Ultra;src:url(/assets/fonts/ultra.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow Cond';src:url(/assets/fonts/barlowcond-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(/assets/fonts/courierprime-400.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --ink:#0B0A09;
  --bone:#F4E8D3;
  --tangerine:#FF5A1F;
  --magenta:#C9095A;
  --turquoise:#08B3B8;
  --gold:#F5B622;
  --claw-red:#B4232A;
  --navy:#1B2C6B;
  --photo-edge:#FFFFFF;
  --placeholder:#6B5D45;

  /* cast shadows are tinted from the field the object sits on, never neutral grey */
  --cast-hero:rgb(4 10 34 / .55);
  --cast-hard-turquoise:rgb(6 74 76 / .55);
  --cast-soft-turquoise:rgb(4 40 41 / .4);
  --cast-hard-bone:rgb(11 10 9 / .18);
  --cast-soft-bone:rgb(11 10 9 / .25);

  --fg:var(--ink);
  --bg:var(--tangerine);

  --pad:clamp(1.25rem,5vw,4.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:Barlow,system-ui,sans-serif;
  font-size:clamp(1.0625rem,.98rem + .42vw,1.1875rem);
  line-height:1.55;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:var(--ink);color:var(--bone);
  padding:.75rem 1.25rem;font-family:'Barlow Cond',sans-serif;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------- title cards ---------------------------------------------- */

.card{
  background:var(--bg);
  color:var(--fg);
  padding:clamp(3.5rem,11vw,7rem) var(--pad);
  position:relative;
}
.card--navy     {--bg:var(--navy);     --fg:var(--bone)}
.card--tangerine{--bg:var(--tangerine);--fg:var(--ink)}
.card--ink      {--bg:var(--ink);      --fg:var(--bone)}
.card--turquoise{--bg:var(--turquoise);--fg:var(--ink)}
.card--bone     {--bg:var(--bone);     --fg:var(--ink);isolation:isolate}

/* fibre tooth on the document card — the one section that is literally paper */
.card--bone::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  filter:url(#tooth);opacity:.5;mix-blend-mode:multiply;
}
.card--bone>*{position:relative;z-index:1}
.card--gold     {--bg:var(--gold);     --fg:var(--ink)}
.card--magenta  {--bg:var(--magenta);  --fg:var(--bone)}

/* ---------- type ------------------------------------------------------ */

.display{
  font-family:Ultra,Georgia,serif;
  font-weight:400;
  font-size:clamp(2.75rem,11.5vw,4.75rem);
  line-height:.92;
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-wrap:balance;
  overflow-wrap:break-word;
  margin:0 0 1.25rem;
}
.display--xl{font-size:clamp(3rem,13.5vw,6rem)}

.micro-h{
  font-family:'Barlow Cond',sans-serif;
  font-size:.9375rem;letter-spacing:.22em;text-transform:uppercase;
  margin:2.75rem 0 .875rem;
}

.typed{
  font-family:'Courier Prime',monospace;
  font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 2.5rem;
}

.lede{
  max-width:34ch;
  font-size:clamp(1.1875rem,1.05rem + .6vw,1.4375rem);
  line-height:1.45;
  margin:0 0 2.25rem;
}

p{max-width:68ch}

/* ---------- buttons --------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  min-height:56px;padding:.875rem 1.5rem;
  font-family:'Barlow Cond',sans-serif;font-weight:700;
  font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border:3px solid var(--fg);
  background:var(--fg);color:var(--bg);
  cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease);
}
.btn--hollow{background:transparent;color:var(--fg)}
.btn--sm{min-height:48px;font-size:1.0625rem;padding:.625rem 1.125rem}
.btn--wide{width:100%;max-width:26rem}

@media (hover:hover){
  .btn--solid:hover{transform:translateY(-3px)}
  .btn--hollow:hover{background:var(--fg);color:var(--bg)}
}
.btn:active{transform:translateY(1px)}

.ico{width:1.375em;height:1.375em;fill:currentColor;flex:none}

.actions{display:flex;flex-wrap:wrap;gap:.75rem}

:where(a,button,input):focus-visible{
  outline:3px solid var(--fg);
  outline-offset:3px;
}

/* ---------- 01 · main title ------------------------------------------- */

/* grid with a minmax(0,1fr) column, so display type and the wide wordmark
   can never drag the hero past the viewport */
.hero{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(10rem,1fr);
  padding-top:clamp(1rem,3vw,2rem);
  padding-bottom:0;
  overflow:hidden;
}

.stamp-line{
  display:flex;flex-wrap:wrap;gap:.5rem .75rem;
  font-family:'Courier Prime',monospace;
  font-size:.6875rem;letter-spacing:.14em;
  margin:0 0 clamp(1.5rem,5vw,3rem);
  max-width:none;
}

.hero__copy{position:relative;z-index:2}
.hero__name{margin:0}

/* the poster cast shadow has to read against the field it sits on: ink is
   invisible on navy, so the hero mark casts in claw-red — which also makes the
   character's red and blue arm bands read as deliberate brand colour */
.wordmark{
  width:min(100%,30rem);
  margin-bottom:clamp(.75rem,2.5vw,1.25rem);
  filter:drop-shadow(4px 5px 0 var(--claw-red));
}

.hero .display--xl{margin-bottom:.5rem}

.hero__sub{
  font-family:'Barlow Cond',sans-serif;font-weight:700;
  font-size:clamp(1.25rem,5vw,1.75rem);letter-spacing:.05em;text-transform:uppercase;
  margin:0 0 1.75rem;
}

/* the crop is authored, not inherited from device height: the figure fills whatever
   the title card has left and is cut by the card's own bottom edge, always */
.hero__figure{
  position:relative;z-index:1;
  width:100%;height:100%;
  /* cap at the height where cover would start eating the claws off the sides:
     above it the figure simply stops growing and stays flush to the card edge */
  max-height:calc((100vw - 2 * var(--pad)) * 1.606);
  object-fit:cover;object-position:top center;
  align-self:end;justify-self:center;
  filter:drop-shadow(10px 14px 18px var(--cast-hero));
}

@media (min-width:56rem){
  .hero{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    grid-template-rows:auto 1fr;
    column-gap:var(--pad);
    align-items:end;
  }
  .stamp-line{grid-column:1/-1}
  .hero__copy{align-self:center;padding-bottom:clamp(2rem,5vw,4rem)}
  .hero__figure{
    width:auto;height:100%;max-width:100%;
    object-fit:contain;object-position:bottom center;
    align-self:stretch;justify-self:center;margin-bottom:-2%;
  }
}

/* ---------- 02 · channels --------------------------------------------- */

.channels{list-style:none;margin:0;padding:0;max-width:62rem;border-top:2px solid var(--fg)}
.channels li{border-bottom:2px solid var(--fg)}

.channels a{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"ico name go" "ico meta go";
  align-items:center;
  column-gap:1rem;
  padding:1.125rem .5rem;
  min-height:76px;
  text-decoration:none;
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.channels .ico{grid-area:ico;width:1.75rem;height:1.75rem}
.channels__name{
  grid-area:name;
  font-family:Ultra,Georgia,serif;font-size:clamp(1.5rem,6.5vw,2.125rem);
  line-height:1;letter-spacing:-.02em;text-transform:uppercase;
}
.channels__meta{
  grid-area:meta;
  font-family:'Courier Prime',monospace;font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;margin-top:.3rem;
}
.channels__go{grid-area:go;width:1.5rem;height:1.5rem;fill:currentColor;transition:transform .16s var(--ease)}

@media (hover:hover){
  .channels a:hover{background:var(--navy);color:var(--bone)}
  .channels a:hover .channels__go{transform:translateX(6px)}
}
.channels a:active{background:var(--navy);color:var(--bone)}
.channels a:focus-visible{outline-offset:-4px}

/* ---------- 03 · the record ------------------------------------------- */

.record__art{margin:0 0 2.5rem}
.record__art img{
  width:min(100%,20rem);
  border:6px solid var(--bone);
  box-shadow:14px 16px 0 -2px var(--cast-hard-turquoise), 18px 22px 34px var(--cast-soft-turquoise);
  transform:rotate(-2.5deg);
}

.exhibits{list-style:none;margin:0;padding:0;max-width:52ch}
.exhibits li{
  display:grid;grid-template-columns:1.75rem 1fr;
  padding:.875rem 0;
  border-bottom:1px solid rgb(11 10 9 / .35);
  font-size:1.0625rem;line-height:1.4;
}
.exhibits li::before{
  content:"";width:.5rem;height:.5rem;background:currentColor;margin-top:.6rem;
}

.advisory{
  display:flex;flex-direction:column;align-items:center;
  width:max-content;
  background:var(--ink);color:var(--bone);
  padding:.4rem .9rem .5rem;margin:2rem 0 2.25rem;
  filter:url(#inked);
  font-family:'Barlow Cond',sans-serif;font-weight:700;text-transform:uppercase;
  line-height:1;
}
.advisory span{font-size:1.125rem;letter-spacing:.02em}
.advisory b{font-size:.625rem;letter-spacing:.14em;margin-top:.28rem;font-weight:700}

@media (min-width:56rem){
  .record{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .record__art{margin:0}
  .record__art img{width:22rem}
}

/* ---------- 04 · the dossier ------------------------------------------ */

.dossier__head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.5rem;margin-bottom:2rem}
.dossier__head .display{margin:0}

/* pressed, not drawn: the turbulence filter breaks the rule and eats holes in the
   ink so the impression reads as rubber on paper rather than a CSS border */
.stamp{
  display:flex;flex-direction:column;align-items:center;
  font-family:'Barlow Cond',sans-serif;font-weight:700;text-transform:uppercase;
  color:var(--claw-red);border:4px double var(--claw-red);
  padding:.4rem 1rem .5rem;margin:0;
  transform:rotate(-6deg);
  font-size:1.5rem;letter-spacing:.08em;line-height:1;
  filter:url(#inked);
  mix-blend-mode:multiply;
}
.stamp small{font-size:.625rem;letter-spacing:.2em;margin-top:.3rem}

.evidence{margin:0 0 2.5rem}
.evidence img{
  border:8px solid var(--photo-edge);
  box-shadow:10px 12px 0 -2px var(--cast-hard-bone), 14px 18px 30px var(--cast-soft-bone);
  transform:rotate(1.5deg);
}
.evidence figcaption{
  font-family:'Courier Prime',monospace;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;margin-top:1.25rem;max-width:34ch;
}

.report{max-width:64ch;font-family:'Courier Prime',monospace;font-size:1rem;line-height:1.72}
.report p{margin:0 0 1.35rem;max-width:none}
.report__meta{font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase}

.bar{
  border:0;padding:0 .1em;margin:0;
  background:var(--ink);color:transparent;
  font:inherit;letter-spacing:-.06em;
  cursor:pointer;vertical-align:baseline;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.bar[data-open]{background:transparent;color:var(--ink);letter-spacing:0}
.bar[data-denied]{background:var(--claw-red);animation:jolt .3s var(--ease)}

@keyframes jolt{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

.report__denied{
  display:block;margin-top:.6rem;
  font-family:'Barlow Cond',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.8125rem;color:var(--claw-red);
}

#dossier-toggle{margin-top:.75rem}

@media (min-width:56rem){
  .dossier{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
    column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .dossier__head{grid-column:1/-1}
  .dossier .report{grid-column:1;grid-row:2}
  .dossier .evidence{grid-column:2;grid-row:2;margin:.5rem 0 0}
}

/* ---------- 05 · dugatto ----------------------------------------------- */

.provenance__copy{margin-bottom:2rem}
.provenance .lede{max-width:46ch;margin-bottom:1.25rem}
.provenance .beta{max-width:46ch;margin:0;font-size:1.0625rem;line-height:1.5}
.beta-tag{
  display:inline-block;background:var(--ink);color:var(--bone);
  font-family:'Barlow Cond',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:.75rem;letter-spacing:.18em;padding:.15rem .5rem .2rem;margin-right:.5rem;
  vertical-align:.1em;
}
.provenance__ask{margin-bottom:3rem}
.provenance__ask .btn{
  min-height:72px;font-size:1.5rem;padding:1.125rem 2rem;gap:.875rem;
}

/* the arrow is painted, not drawn: the same turbulence filter that inks the
   advisory stamp keeps the stroke from reading as a vector curve */
.cta-arrow{
  display:block;width:9.5rem;height:auto;
  margin:0 0 -1.5rem 1rem;
  color:var(--claw-red);filter:url(#inked);
  position:relative;z-index:1;pointer-events:none;
}
.release-note{margin:2.5rem 0 0}

@media (min-width:56rem){
  /* the ask fills the card's width instead of orphaning a narrow column */
  .provenance__ask{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(2.5rem,5vw,5rem);align-items:end;
  }
  .provenance__copy{margin-bottom:0}
  .provenance__ask{margin-bottom:3.5rem}
  .provenance__ask .btn{width:auto;min-width:22rem;min-height:80px;font-size:1.75rem}
  .cta-point{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:end}
  .cta-arrow{width:10.5rem;margin:0 -2.25rem 0 0;transform:rotate(-24deg)}
}

.does{
  list-style:none;margin:0 0 2.75rem;padding:0;max-width:60ch;
  border-top:2px solid var(--ink);
}
.does li{border-bottom:2px solid var(--ink);padding:1.375rem 0}
.does h3{
  font-family:Ultra,Georgia,serif;font-weight:400;
  font-size:clamp(1.125rem,4.5vw,1.375rem);line-height:1.1;letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 .5rem;
}
.does p{margin:0;font-size:1.0625rem;line-height:1.5}
.beta-tag--h{vertical-align:.25em}

@media (min-width:56rem){
  .does{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:0 clamp(2rem,4vw,4rem);max-width:none;
  }
}

/* ---------- 06 · merch + list ------------------------------------------ */

.signup{max-width:34rem}
.signup label{
  display:block;
  font-family:'Barlow Cond',sans-serif;font-weight:700;
  font-size:.9375rem;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:.625rem;
}
.signup__row{display:flex;flex-direction:column;gap:.75rem}

.signup input{
  min-height:56px;padding:.75rem 1rem;
  border:3px solid var(--bone);background:var(--bone);color:var(--ink);
  font-family:Barlow,sans-serif;font-size:1.125rem;
  width:100%;
}
.signup input::placeholder{color:var(--placeholder);opacity:1}
.signup input:invalid:not(:placeholder-shown){border-color:var(--ink)}
.signup .btn{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.signup .btn:disabled{opacity:.6;cursor:progress}

.signup__msg{margin:.875rem 0 0;font-family:'Barlow Cond',sans-serif;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-size:1rem;min-height:1.5rem}
.signup__fine{margin:.5rem 0 0;font-size:.875rem;max-width:40ch}

@media (min-width:34rem){
  .signup__row{flex-direction:row}
  .signup input{flex:1}
}

/* ---------- legal pages ------------------------------------------------- */

.legal .typed a{text-decoration:none;border-bottom:1px solid currentColor}
.legal__body{max-width:66ch}
.legal__body h2{
  font-family:Ultra,Georgia,serif;font-weight:400;
  font-size:clamp(1.375rem,5.5vw,1.875rem);line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;margin:3rem 0 .875rem;
}
.legal__body h3{
  font-family:'Barlow Cond',sans-serif;font-weight:700;
  font-size:.9375rem;letter-spacing:.18em;text-transform:uppercase;
  margin:2rem 0 .625rem;
}
.legal__body p{margin:0 0 1.125rem}
.legal__body ul{margin:0 0 1.125rem;padding:0;list-style:none;max-width:66ch}
.legal__body li{display:grid;grid-template-columns:1.75rem 1fr;padding:.5rem 0}
.legal__body li::before{content:"";width:.5rem;height:.5rem;background:currentColor;margin-top:.6rem}
.legal__body a{text-decoration:none;border-bottom:2px solid var(--claw-red);padding-bottom:.1rem}

/* ---------- footer ------------------------------------------------------ */

.foot{padding-top:clamp(2.5rem,8vw,4rem);text-align:center}
.foot__mark{width:6rem;margin:0 auto 1.75rem}
.foot__links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 1.5rem;
  font-family:'Barlow Cond',sans-serif;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-size:1rem;
  margin-bottom:1.75rem;
}
.foot__links a{text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent}
.foot__links a:hover{border-bottom-color:var(--tangerine)}
.foot__legal{
  margin:1.5rem auto 0;
  font-family:'Barlow Cond',sans-serif;font-weight:700;
  font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase;
}
.foot__legal a{text-decoration:none;border-bottom:2px solid var(--tangerine);padding-bottom:.15rem}
.foot__fine{
  font-family:'Courier Prime',monospace;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;margin:0 auto;max-width:46ch;
}

/* ---------- the one authored moment ------------------------------------- */

@media (prefers-reduced-motion:no-preference){
  .hero .wordmark{animation:drop .55s var(--ease) both}
  .hero .display--xl{animation:wipe .62s var(--ease) .12s both}
  .hero__sub{animation:rise .5s var(--ease) .3s both}
  .hero .actions{animation:rise .5s var(--ease) .4s both}
  .hero__figure{animation:enter .85s var(--ease) .18s both}
}

@keyframes drop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -10% 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes enter{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}

/* honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* the filter/symbol definitions carry no visual weight of their own */
.defs{position:absolute}