/* ============================================================
   Joshua B. Mantilla

   The palette is lifted from the portrait: night navy for the two
   dark bands (hero and sign-off), teal from the backlight for
   accents on paper, amber from the desk lamp for accents on dark.
   Teal never sits on navy and amber never sits on paper, so each
   accent only appears where it clears contrast.

   Type: Instrument Serif for display, a tall narrow serif; Manrope
   for everything else.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{
  font-family:'Instrument Serif';
  src:url(../fonts/InstrumentSerif.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url(../fonts/InstrumentSerif-Italic.woff2) format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url(../fonts/Manrope.woff2) format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --paper:#F6F4EF;
  --paper-2:#ECE8E0;       /* the tools band */
  --tile:#DFDAD0;          /* empty frame before a poster lands */
  --ink:#12151A;
  --ink-2:#474C55;
  --ink-3:#5C616A;

  --night:#0C1119;
  --night-2:#141B27;
  --on-night:#EEF0F2;
  --on-night-2:#A9B1BC;

  --teal:#0D6674;          /* fills, white type on it */
  --teal-ink:#0A5561;      /* text on paper */
  --amber:#EBAA5F;         /* text and rules on night only */

  --rule:rgba(18,21,26,.14);
  --rule-2:rgba(18,21,26,.08);
  --rule-night:rgba(238,240,242,.16);

  --disp:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.2,.8,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --pad:clamp(16px,4.5vw,64px);
  --maxw:1560px;
  --r:6px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-weight:400;
  font-size:clamp(15px,1vw,16.5px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
ul,dl,dd{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.hero :focus-visible,.reach :focus-visible,.lb :focus-visible,.nav:not(.is-stuck) :focus-visible{outline-color:var(--amber)}

.skip{
  position:fixed;top:10px;left:10px;z-index:1200;transform:translateY(-200%);
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r);
  font-size:13px;font-weight:600;transition:transform .25s var(--ease);
}
.skip:focus{transform:none}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   nav: fixed, light type over the hero, paper once it leaves.
   Hides going down, returns going up.
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;color:var(--on-night);
  border-bottom:1px solid transparent;
  transition:transform .5s var(--ease-out),background .35s linear,color .35s linear,border-color .35s linear;
}
.nav.is-stuck{
  background:rgba(246,244,239,.88);color:var(--ink);border-bottom-color:var(--rule);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
}
.nav.is-hidden{transform:translateY(-104%)}
.nav__in{
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
}
.brand{display:flex;align-items:baseline;gap:12px;margin-right:auto;min-width:0}
.brand__name{font-family:var(--disp);font-size:24px;line-height:1;letter-spacing:.005em;white-space:nowrap}
.nav__links{display:flex;gap:clamp(16px,2.2vw,32px)}
.nav__links a{
  position:relative;padding-block:4px;font-size:13px;font-weight:500;white-space:nowrap;
  opacity:.86;transition:opacity .3s var(--ease);
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease-out);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav__cta{
  padding:9px 18px;border-radius:100px;font-size:13px;font-weight:600;
  background:var(--amber);color:var(--night);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease-out);
}
.nav__cta:hover{transform:translateY(-1px)}
.nav.is-stuck .nav__cta{background:var(--teal);color:#fff}
.nav.is-stuck .nav__cta:hover{background:var(--teal-ink)}
@media (max-width:860px){.nav__links{display:none}}
@media (max-width:480px){.brand__name{font-size:21px}}

/* ============================================================
   hero: the portrait, full bleed. He sits right of centre with
   the dark wall to his left, which is where the type goes.
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  background:var(--night);color:var(--on-night);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 30%}
/* a wash from the left, heavy only where the type sits, plus a floor so
   the bottom row reads over the desk */
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(12,17,25,.92) 0%,rgba(12,17,25,.78) 30%,rgba(12,17,25,.28) 52%,rgba(12,17,25,0) 64%),
    linear-gradient(0deg,rgba(12,17,25,.94) 0%,rgba(12,17,25,.5) 18%,rgba(12,17,25,0) 38%);
}
.hero__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(110px,16vh,170px) var(--pad) clamp(34px,6vh,70px);
}
.hero__name{
  margin-top:clamp(14px,2.4vh,26px);
  font-family:var(--disp);font-weight:400;
  font-size:clamp(58px,10.4vw,168px);line-height:.9;letter-spacing:-.018em;
}
/* the clip box needs slack or the descenders are shaved */
.hero__name .mask{display:block;overflow:hidden;padding-block:.04em .12em;margin-block:-.04em -.12em}
.hero__name .mask>span{display:block}
.hero__name .mask+.mask>span{font-style:italic;color:var(--amber);padding-left:.5em}
.hero__tag{
  margin-top:clamp(18px,3vh,30px);
  font-family:var(--disp);font-size:clamp(24px,2.3vw,36px);line-height:1.1;
}
.hero__tag em{color:var(--amber)}
.hero__lede{max-width:46ch;margin-top:12px;color:#C9CFD7;font-size:clamp(15px,1.08vw,17.5px);line-height:1.6}

.hero__down{
  position:absolute;right:var(--pad);bottom:clamp(34px,6vh,70px);
  display:flex;align-items:center;gap:12px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2);
  transition:color .3s var(--ease);
}
.hero__down:hover{color:var(--on-night)}
.hero__down i{display:block;width:40px;height:1px;background:var(--rule-night);position:relative;overflow:hidden}
.hero__down i::after{content:'';position:absolute;inset:0;background:var(--amber);transform:translateX(-100%);animation:sweep 2.6s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

@media (max-width:980px){.hero__down{display:none}}
@media (max-width:760px){
  /* portrait up top, type underneath, so the face is never written over */
  .hero{justify-content:flex-start;min-height:0}
  .hero__bg{bottom:auto;height:62svh}
  .hero__bg img{object-position:70% 20%}
  .hero::before{
    background:linear-gradient(0deg,var(--night) 0%,var(--night) calc(100% - 62svh),rgba(12,17,25,.55) calc(100% - 50svh),rgba(12,17,25,0) calc(100% - 30svh));
  }
  .hero__in{padding-top:44svh;padding-bottom:clamp(44px,8vh,64px)}
  .hero__name .mask+.mask>span{padding-left:.3em}
}

/* ============================================================
   section heads: a numbered label, a big serif line, a note
   ============================================================ */
.sec{max-width:var(--maxw);margin-inline:auto;padding:clamp(64px,9vw,128px) var(--pad)}
.sec--flush{padding-inline:0}
.sec--flush .head{padding-inline:var(--pad)}
.sec--band{max-width:none;background:var(--paper-2)}
.sec--band>*{max-width:calc(var(--maxw) - 2 * var(--pad));margin-inline:auto}

.head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px 40px;margin-bottom:clamp(26px,3.4vw,48px);
}
.head__n{
  display:flex;align-items:center;gap:12px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.head__n b{
  display:inline-grid;place-items:center;min-width:32px;height:22px;padding:0 8px;border-radius:100px;
  background:var(--teal);color:#fff;font-weight:700;letter-spacing:.04em;font-size:11px;
}
.head__h{
  margin-top:14px;font-family:var(--disp);font-weight:400;
  font-size:clamp(36px,5vw,76px);line-height:1;letter-spacing:-.015em;
}
.head__h i{color:var(--teal-ink)}
.head__note{max-width:38ch;font-size:14px;color:var(--ink-2)}

/* ---------- project tabs (graphic design) ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{
  position:relative;overflow:hidden;isolation:isolate;
  padding:8px 16px;border-radius:100px;border:1px solid var(--rule);
  font-size:13px;font-weight:500;color:var(--ink-2);
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.tab::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease-out);
}
.tab:hover{color:var(--ink);border-color:var(--ink-3)}
.tab[aria-selected="true"]{color:var(--paper);border-color:var(--ink)}
.tab[aria-selected="true"]::before{transform:none}
.tab sup{font-size:10px;margin-left:4px;opacity:.7;vertical-align:.3em}
/* phones: one row that swipes, rather than the tabs wrapping to two */
@media (max-width:640px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad)}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto}
}

/* ============================================================
   shorts: a feed wall. Staggered columns that slide past each
   other at different speeds as the page scrolls. The markup is a
   flat list; JS deals it into columns, so with JS off it is a
   plain grid and nothing is lost.
   ============================================================ */
.feed{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);
  max-width:1320px;margin-inline:auto;
}
.feed.is-cols{display:flex;align-items:flex-start;padding-block:40px 0}
.feed__col{flex:1 1 0;min-width:0;display:grid;gap:clamp(22px,2.4vw,36px);will-change:transform}
/* the resting stagger: every other column starts lower */
.feed__col:nth-child(even){margin-top:clamp(60px,9vw,140px)}
@media (max-width:1100px){.feed{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.feed{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.feed__col{gap:20px}}

.feed__hit{display:block;width:100%;text-align:left}
.feed__frame{
  display:block;position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:12px;background:var(--tile);
  box-shadow:0 0 0 1px var(--rule-2),0 22px 40px -30px rgba(12,17,25,.55);
  transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out);
}
.feed__frame video{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.feed__hit:hover .feed__frame{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 0 0 1px var(--rule-2),0 40px 60px -34px rgba(12,17,25,.65)}
.feed__col:nth-child(even) .feed__hit:hover .feed__frame{transform:translateY(-8px) rotate(.6deg)}
.feed__hit:hover .feed__frame video{transform:scale(1.04)}
/* both overlays are opaque enough to read over a pure white frame */
.feed__time{
  position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:100px;
  background:rgba(12,17,25,.72);color:#fff;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
}
.feed__play{
  position:absolute;left:50%;top:50%;padding:10px 16px;border-radius:100px;
  background:var(--teal);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;
  opacity:0;transform:translate(-50%,-35%);transition:opacity .35s var(--ease),transform .5s var(--ease-out);
}
.feed__hit:hover .feed__play,.feed__hit:focus-visible .feed__play{opacity:1;transform:translate(-50%,-50%)}
.feed__cap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 10px;align-items:baseline;margin-top:12px;padding-inline:2px}
.feed__cap i{grid-row:1/3;font-style:normal;font-size:11.5px;font-weight:700;color:var(--teal-ink);font-variant-numeric:tabular-nums}
.feed__cap b{font-family:var(--disp);font-weight:400;font-size:clamp(20px,1.6vw,26px);line-height:1.08;transition:color .3s var(--ease)}
.feed__cap em{font-style:normal;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed__hit:hover .feed__cap b{color:var(--teal-ink)}
@media (max-width:640px){
  .feed__frame{border-radius:9px}
  .feed__cap b{font-size:18px}
  .feed__cap em{font-size:11.5px}
  .feed__play{display:none}
}
/* the parallax needs somewhere to go: the section is clipped so the
   columns never slide over the next heading */
#short-form{overflow:clip;overflow-clip-margin:24px}

/* ============================================================
   graphic design: one project at a time, as a spread. The note
   on the left, a bento of frames on the right with the lead
   piece at double size.
   ============================================================ */
.spread{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,72px);align-items:start;
  margin-top:clamp(24px,3vw,40px);
}
.spread[hidden]{display:none}
.js .spread.is-fresh{animation:spreadIn .6s var(--ease-out)}
@keyframes spreadIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.spread:focus-visible{outline-offset:8px}
.spread__info{position:sticky;top:96px;max-width:40ch}
.spread__h{font-family:var(--disp);font-weight:400;font-size:clamp(44px,5vw,80px);line-height:.95;letter-spacing:-.015em}
.spread__note{margin-top:16px;color:var(--ink-2)}
.spread__count{
  margin-top:20px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);
}
/* every asset is 4:5; the lead spans two columns and two rows, so it is
   4:5 as well and every row lines up */
.bento{
  --cell:clamp(150px,14.2vw,212px);
  display:grid;grid-template-columns:repeat(var(--cols),var(--cell));gap:12px;
}
.bento .lead{grid-column:span 2;grid-row:span 2}
.tile{
  display:block;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r);background:var(--tile);box-shadow:0 0 0 1px var(--rule-2);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);
}
.lead .tile{height:100%;aspect-ratio:auto}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tile:hover{transform:translateY(-5px);box-shadow:0 0 0 1px var(--rule-2),0 28px 44px -26px rgba(12,17,25,.55)}
.tile:hover img{transform:scale(1.03)}
.tile__cap{
  position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);
  padding:5px 10px;border-radius:100px;background:rgba(12,17,25,.78);color:#fff;
  font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .45s var(--ease-out);
}
.tile:hover .tile__cap,.tile:focus-visible .tile__cap{opacity:1;transform:none}

@media (max-width:1100px){
  .spread{grid-template-columns:minmax(0,1fr)}
  .spread__info{position:static;max-width:60ch}
  .bento{--cell:minmax(0,1fr)}
}
@media (max-width:640px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* an odd small tile left alone on the last row takes the full width */
  .bento li:last-child:nth-child(even){grid-column:span 2}
  .bento li:last-child:nth-child(even) .tile{aspect-ratio:8/5}
  .tile__cap{opacity:1;transform:none}
}

/* ============================================================
   tools: a bordered grid, the mark and name on one line and the
   job each tool does under it
   ============================================================ */
/* 5 / 3 columns: the counts that divide fifteen, so no row ends ragged.
   Phones take two, and the fifteenth spans the last row. */
.kit{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
@media (max-width:1100px){.kit{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){
  .kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit li:last-child:nth-child(odd){grid-column:span 2}
}
.kit li{display:flex;min-width:0}
.kit__a{
  flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;
  padding:clamp(16px,1.6vw,22px) clamp(14px,1.4vw,20px);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  color:var(--ink);transition:background .35s var(--ease),color .35s var(--ease);
}
.kit__a:hover{background:rgba(255,255,255,.55);color:var(--teal-ink)}
.kit__a i{
  grid-row:1/3;width:24px;height:24px;background:currentColor;
  /* mask-image is set inline per tool: a url() in this stylesheet would
     resolve against /css/ and silently find nothing */
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.kit__a span{font-weight:600;font-size:14.5px;line-height:1.25;min-width:0}
.kit__a em{font-style:normal;font-size:12.5px;color:var(--ink-3);line-height:1.3}
@media (max-width:480px){
  .kit__a{grid-template-columns:1fr;gap:6px}
  .kit__a i{grid-row:auto}
}

/* ============================================================
   sign-off: back to night, mirroring the hero
   ============================================================ */
.reach{background:var(--night);color:var(--on-night)}
.reach__in{
  max-width:var(--maxw);margin-inline:auto;text-align:center;
  padding:clamp(80px,12vw,170px) var(--pad) clamp(60px,8vw,110px);
}
.reach__mail{
  display:inline-block;padding-bottom:.06em;
  font-family:var(--disp);font-size:clamp(28px,6vw,96px);line-height:1.05;letter-spacing:-.02em;
  overflow-wrap:anywhere;
  background:linear-gradient(var(--amber),var(--amber)) 0 100% / 0 2px no-repeat;
  transition:background-size .7s var(--ease-out),color .3s var(--ease);
}
.reach__mail:hover{background-size:100% 2px;color:var(--amber)}
/* Instrument Serif's 1 is a plain stem and reads as a lowercase l, so
   "mantilla12" read "mantillal2". The digits borrow the UI face. */
.reach__dig{font-family:var(--ui);font-weight:300;font-size:.86em;letter-spacing:-.03em}
.reach__meta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 30px;margin-top:clamp(26px,3.4vw,44px);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2);
}

/* other ways to reach: one component, in the sign-off and the dialog */
.alt{display:flex;flex-wrap:wrap;gap:12px clamp(22px,3vw,40px)}
.alt--reach{justify-content:center;margin-top:clamp(22px,3vw,34px)}
.alt__a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:500;color:var(--ink-2);transition:color .3s var(--ease);
}
button.alt__a{text-align:left;cursor:copy}
.alt__a svg{flex:0 0 auto;width:19px;height:19px;color:var(--teal-ink)}
.alt__a:hover{color:var(--teal-ink)}
.reach .alt__a{color:var(--on-night-2);font-size:clamp(15px,1.2vw,17px)}
.reach .alt__a svg{color:var(--amber)}
.reach .alt__a:hover{color:var(--on-night)}

/* ---------- footer ---------- */
.foot{
  background:var(--night);color:var(--on-night-2);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  padding:22px var(--pad) 28px;border-top:1px solid var(--rule-night);
  font-size:13px;
}
.foot a{transition:color .3s var(--ease)}
.foot a:hover{color:var(--amber)}

/* ============================================================
   contact dialog
   ============================================================ */
html:has(.contact[open]){overflow:hidden}
.contact{
  padding:0;border:0;background:transparent;color:var(--ink);
  width:min(92vw,480px);max-width:none;max-height:calc(100svh - 32px);
}
.contact::backdrop{background:rgba(12,17,25,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.contact__card{position:relative;overflow:hidden;border-radius:10px;background:var(--paper);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.contact__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:62% 30%}
.contact__x{
  position:absolute;top:12px;right:12px;padding:7px 13px;border-radius:100px;
  font-size:12px;font-weight:600;background:rgba(12,17,25,.7);color:#fff;
  transition:background .3s var(--ease);
}
.contact__x:hover{background:var(--night)}
.contact__body{padding:clamp(20px,3vw,26px) clamp(20px,3vw,28px) clamp(24px,3vw,30px)}
.contact__name{font-family:var(--disp);font-weight:400;font-size:clamp(34px,6vw,44px);line-height:1}
.contact__role{margin-top:4px;color:var(--ink-2)}
.contact__mail{
  display:flex;align-items:center;gap:10px;margin-top:18px;
  color:var(--teal-ink);font-weight:600;font-size:clamp(15px,2.2vw,17px);overflow-wrap:anywhere;
}
.contact__mail svg{flex:0 0 auto;width:19px;height:19px}
.contact__mail:hover span{text-decoration:underline;text-underline-offset:3px}
.contact .alt{display:grid;gap:10px;margin-top:10px}
.contact__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{
  padding:11px 18px;border-radius:100px;font-size:13px;font-weight:600;
  background:var(--ink);color:var(--paper);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{background:var(--teal)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn--ghost:hover{background:transparent;color:var(--teal-ink);box-shadow:inset 0 0 0 1px var(--teal-ink)}
.contact[open]{animation:dlgIn .45s var(--ease-out)}
.contact[open]::backdrop{animation:dlgFade .35s var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dlgFade{from{opacity:0}to{opacity:1}}

/* ============================================================
   lightbox: the media on the left, what it is on the right
   ============================================================ */
.lb{position:fixed;inset:0;z-index:1000}
.lb[hidden]{display:none}
.lb__bg{
  position:absolute;inset:0;background:rgba(12,17,25,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .4s var(--ease);
}
.lb__box{
  position:relative;height:100%;overflow-y:auto;color:var(--on-night);
  display:grid;grid-template-columns:auto minmax(0,380px);justify-content:center;align-items:center;
  gap:clamp(24px,4vw,64px);
  padding:clamp(64px,9vh,96px) clamp(16px,5vw,80px) clamp(80px,11vh,110px);
}
.lb.is-ready .lb__bg{opacity:1}
/* shrink-wrapped: the stage takes the media's own size, so nothing is
   ever pillarboxed against a black plate */
/* overflow:clip, not hidden. A grid item with overflow:hidden gets an
   automatic minimum height of 0, so on a phone the row was sized smaller
   than the video and the video spilled up off the screen and down over
   the title. clip still rounds the corners but keeps the real height. */
.lb__stage{
  width:max-content;max-width:100%;overflow:clip;border-radius:var(--r);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.8);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .5s var(--ease),transform .6s var(--ease-out);
}
.lb__stage video,.lb__stage img{display:block;width:auto;height:auto;max-width:100%;max-height:78vh}
.lb__body{opacity:0;transform:translateY(14px);transition:opacity .6s .1s var(--ease),transform .7s .1s var(--ease-out)}
.lb.is-ready .lb__stage,.lb.is-ready .lb__body{opacity:1;transform:none}
.lb__kick{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.lb__title{margin-top:10px;font-family:var(--disp);font-weight:400;font-size:clamp(34px,3.6vw,56px);line-height:1}
.lb__blurb{margin-top:16px;color:#C9CFD7;font-size:15px}
.lb__blurb:empty{display:none}
.lb__meta{margin-top:22px;border-top:1px solid var(--rule-night)}
.lb__meta:empty{display:none}
.lb__meta div{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule-night);font-size:14px}
.lb__meta dt{flex:0 0 84px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2);padding-top:2px}
.lb__x{
  position:fixed;top:clamp(14px,2.4vh,26px);right:clamp(14px,3vw,34px);z-index:2;
  padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;
  background:var(--on-night);color:var(--night);transition:background .3s var(--ease);
}
.lb__x:hover{background:var(--amber)}
.lb__nav{
  position:fixed;left:50%;bottom:clamp(16px,3vh,30px);transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:12px;
  /* a solid pill: on a phone the notes scroll underneath it */
  padding:6px;border-radius:100px;background:var(--night);
  box-shadow:0 0 0 1px var(--rule-night),0 12px 30px -12px rgba(0,0,0,.7);
}
.lb__nav[hidden]{display:none}
.lb__arrow{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  color:var(--on-night);border:1px solid var(--rule-night);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.lb__arrow:hover{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
.lb__count{min-width:64px;text-align:center;font-size:13px;color:var(--on-night-2);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .lb__box{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;gap:22px}
  /* short enough that the title shows under the video without scrolling */
  .lb__stage video,.lb__stage img{max-height:min(64vh,58svh)}
  .lb__body{width:100%;max-width:560px}
  /* in the flow, after the notes, and sticky: it rides along while the
     notes scroll and parks below them at the end instead of covering them */
  .lb__box{padding-bottom:18px}
  .lb__nav{position:sticky;left:auto;bottom:14px;transform:none;justify-self:center}
}

/* ============================================================
   motion
   ============================================================ */
/* the page is complete before JS: only .js hides things to reveal them */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .85s var(--ease-out)}
.js .rv.is-in{opacity:1;transform:none}

.js .hero__name .mask>span{transform:translateY(110%);transition:transform 1.1s var(--ease-out)}
.js .hero__name .mask+.mask>span{transition-delay:.12s}
.js .hero.is-lit .hero__name .mask>span{transform:none}
.js .hero__tag,.js .hero__lede,.js .hero__down{
  opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .9s var(--ease-out);
}
.js .hero.is-lit .hero__tag{opacity:1;transform:none;transition-delay:.45s}
.js .hero.is-lit .hero__lede{opacity:1;transform:none;transition-delay:.58s}
.js .hero.is-lit .hero__down{opacity:1;transform:none;transition-delay:.9s}
.js .hero__bg img{transform:scale(1.08);transition:transform 2.6s var(--ease-out)}
.js .hero.is-lit .hero__bg img{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;
  }
  .js .rv,.js .hero__tag,.js .hero__lede,.js .hero__down{opacity:1!important;transform:none!important}
  .js .hero__name .mask>span,.js .hero__bg img{transform:none!important}
  }