/* Angela Trimbur Dance
   Display: Fraunces (variable, SOFT + WONK axes turned up — a serif that
   refuses to sit still). Body: Familjen Grotesk. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Familjen+Grotesk:wght@400;500;600;700&display=swap');

:root{
  color-scheme: light;
  --paper:#f7f4ed;
  --surface:#ffffff;
  --ink:#17130f;
  --muted:#6d645b;
  --faint:#a99f94;
  --line:rgba(23,19,15,.13);
  --line-2:rgba(23,19,15,.26);
  --red:#c82226;            /* sampled from Angela's mockup */
  --red-soft:#f7e2e0;
  --red-deep:#8f1519;
  /* legacy aliases so existing rules keep working */
  --pink:#c82226;
  --pink-soft:#f7e2e0;
  --teal:#17130f;
  --teal-soft:#eceae5;
  --display:'Fraunces',Georgia,serif;
  --sans:'Familjen Grotesk',system-ui,sans-serif;
  --max:1200px;
  --ease:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.58;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
::selection{background:var(--pink);color:#fff}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;
  font-variation-settings:'SOFT' 40,'WONK' 1;letter-spacing:-.015em}
h1{font-size:clamp(44px,8vw,86px);line-height:.95;font-weight:700;
  font-variation-settings:'SOFT' 60,'WONK' 1}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.02;color:var(--ink)}
h3{font-size:20px;line-height:1.16}
p{margin:0 0 1em}
.lede{color:var(--muted);font-size:16px;max-width:600px}

/* ---------------- header ---------------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(251,247,241,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--max);margin:0 auto;padding:11px 24px}
.brand{font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.02;
  letter-spacing:-.005em;font-variation-settings:'SOFT' 60,'WONK' 1;
  transition:transform .4s var(--ease)}
.brand span{display:block}
.brand .atda{font-size:10px;letter-spacing:.22em;color:var(--ink);line-height:1;
  margin-bottom:3px;font-weight:700}
.brand:hover{transform:rotate(-2.5deg) scale(1.03)}
@media (max-width:820px){.brand{font-size:14px}.brand .atda{font-size:10px}}

/* ---------------- buttons ---------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:13px;font-weight:600;padding:11px 22px;
  border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;
  cursor:pointer;
  transition:transform .3s var(--ease),background .2s,color .2s,box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-2px) rotate(-1deg);background:var(--ink);color:var(--paper);
  box-shadow:0 8px 0 -2px rgba(23,19,15,.16)}
.btn:active{transform:translateY(1px) rotate(0deg);box-shadow:0 2px 0 -1px rgba(23,19,15,.2)}
.btn.pink{background:var(--pink);border-color:var(--pink);color:#fff}
.btn.pink:hover{background:var(--ink);border-color:var(--ink);
  box-shadow:0 8px 0 -2px rgba(255,45,135,.3)}
.btn.sm{padding:9px 16px;font-size:12px}

/* sparkle particles injected by js */
.spark{position:fixed;pointer-events:none;z-index:9999;will-change:transform,opacity;
  animation:spark .62s var(--ease) forwards}
@keyframes spark{
  0%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:1}
  55%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)))
        scale(var(--s)) rotate(var(--r));opacity:0}
}

/* ---------------- sections ---------------- */
section{padding:64px 0}
section.tight{padding:44px 0}
.section-head{margin-bottom:28px}
.section-head .lede{margin-top:10px}

.rise{opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}

/* ---------------- hero ---------------- */
.hero{padding:18px 0 0}
.hero-media{position:relative;max-width:1140px;margin:0 auto;border-radius:22px;overflow:hidden;
  aspect-ratio:16/9}
.hero-media picture{position:absolute;inset:0;display:block}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center center}

/* NYT quote sits on the photo */
/* Angela: "something still feels off with the whimsical line, it's like too
   aligned with the title... maybe it's italicized?"
   Cause: the quote and its attribution were Fraunces 600 — the same family AND
   weight as the wordmark directly above, centred — so the three read as one
   stacked masthead. Fixes, in order of effect:
     - the quote is a real italic (the ital axis is now requested above; without
       it font-style:italic only gets a synthesised oblique)
     - weight 500 against the wordmark's 600
     - the attribution drops to the sans, so it reads as a credit not display type
     - more top padding, so the block is not butted against the header */
.hero-quote{position:absolute;left:0;right:0;top:0;padding:46px 26px 0;text-align:center;z-index:2}
.hero-quote q{display:block;quotes:none;color:#fff;font-family:var(--display);
  font-style:italic;font-weight:500;
  font-variation-settings:'SOFT' 50,'WONK' 1;
  font-size:clamp(19px,2.6vw,31px);line-height:1.14;
  text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero-quote cite{display:block;font-style:normal;color:rgba(255,255,255,.92);
  font-family:var(--sans);font-weight:500;font-size:clamp(12px,1.25vw,15px);
  letter-spacing:.04em;margin-top:9px;text-shadow:0 2px 14px rgba(0,0,0,.5)}

/* intro panel — separated from the logo strip */
.intro{padding:0 0 34px}
/* Copy left, actions right. The headline breaks after "shell" so it sets as
   two even lines instead of leaving "top of it" stranded. */
.intro-box{background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:22px 28px;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(30px,4vw,64px)}
.intro-box>div:first-child{flex:0 1 auto;min-width:0}
.intro-box>.cta-row{flex:0 0 auto}
.intro-box h1{font-size:clamp(26px,3.6vw,39px);line-height:1;margin:0}
.intro-box .lede{margin-top:9px;font-size:15px;max-width:none}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:820px){
  .hero{padding:14px 0 0}
  .hero-media{border-radius:16px;aspect-ratio:4/3;margin:0 14px}
  .hero-media img{object-position:76% 60%}
  .hero-quote{padding:22px 18px 0}
  .intro{padding:0 0 44px}
  .intro-box{padding:24px 22px 26px;display:block;border-radius:18px}
  /* the forced break is desktop typography; let it wrap naturally when narrow */
  .intro-box h1 br{display:none}
  .intro-box .cta-row{margin-top:18px}
  .intro-box .cta-row .btn{flex:1;justify-content:center}
}

/* pull quote — no rules, no bars, just size */
.pull{margin:44px 0 0;max-width:640px}
.pull q{font-family:var(--display);font-weight:600;font-variation-settings:'SOFT' 70,'WONK' 1;
  font-size:clamp(26px,3.6vw,40px);line-height:1.1;quotes:none;color:var(--ink);display:block}
.pull cite{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:14px}

/* ---------------- credibility band ---------------- */
.creds{padding:28px 0 26px;background:var(--paper)}
.press-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 34px}
.press-row img{width:auto;opacity:.85;transition:transform .35s var(--ease),opacity .25s}
.press-row img:hover{opacity:1;transform:translateY(-3px) rotate(-2deg)}
.l-nyt{height:44px}
.l-vogue{height:18px}
.l-nylon{height:12.5px}
.l-cut{height:20px}
.l-forbes{height:20px}
.l-nowness{height:13px}
.l-kinfolk{height:11.5px}
.l-rs{height:18px}.l-bazaar{height:17px}.l-timeout{height:19px}
@media (max-width:600px){
  .press-row{gap:16px 28px}
    .l-nyt{height:38px}.l-vogue{height:16px}.l-nylon{height:11px}
  .l-cut{height:18px}.l-forbes{height:18px}.l-nowness{height:12px}.l-kinfolk{height:10px}
  .l-rs{height:16px}.l-bazaar{height:15px}.l-timeout{height:17px}
}

/* ---------------- calendar ---------------- */
.cal-shell{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.views{display:inline-flex;background:rgba(23,19,15,.055);border-radius:999px;padding:4px;gap:2px}
.views button{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:8px 17px;border:none;
  background:transparent;color:var(--muted);border-radius:999px;cursor:pointer;
  transition:color .2s,background .3s var(--ease),transform .3s var(--ease)}
.views button:hover{color:var(--ink)}
.views button[aria-selected="true"]{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 4px rgba(23,19,15,.16)}
.views button:active{transform:scale(.94)}

.btn-today{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:9px 17px;
  border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  cursor:pointer;transition:transform .3s var(--ease),background .2s}
.btn-today:hover{background:rgba(23,19,15,.05);transform:translateY(-1px)}

.cal-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin:20px 0 8px}
.cal-nav button{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;
  transition:transform .3s var(--ease),background .2s}
.cal-nav button:hover:not(:disabled){background:rgba(23,19,15,.05);transform:scale(1.1)}
.cal-nav button:active:not(:disabled){transform:scale(.9)}
.cal-nav button:disabled{opacity:.28;cursor:not-allowed}
.cal-title{font-size:14px;font-weight:600;min-width:190px;text-align:center}

.legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:10px}
.legend span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:999px}

.tz{font-size:12.5px;color:var(--faint);text-align:center;margin:16px 0 0}
.panel{border:1px solid var(--line);border-radius:14px;overflow:hidden}

.dow{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.dow div{padding:11px 8px;text-align:center;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.month{display:grid;grid-template-columns:repeat(7,1fr)}
.cell{min-height:100px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:9px;display:flex;flex-direction:column;gap:6px}
.cell:nth-child(7n){border-right:none}
.cell.blank{background:rgba(23,19,15,.022)}
.date{font-size:12px;color:var(--faint);font-weight:500}
.cell.today .date{background:var(--pink);color:#fff;border-radius:999px;
  width:22px;height:22px;display:grid;place-items:center;font-weight:700;
  animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}

/* chips — filled pills, no accent bars */
.chip{display:block;border-radius:10px;padding:7px 9px;background:var(--pink-soft);
  color:var(--ink);transition:transform .28s var(--ease),background .2s}
.chip:hover{background:var(--pink);color:#fff;transform:translateY(-2px) rotate(-1.2deg)}
.chip:hover .ct{color:rgba(255,255,255,.85)}
.chip .ct{display:block;font-size:10.5px;color:var(--muted);font-weight:500}
.chip .cn{display:block;font-size:11.5px;font-weight:600;line-height:1.22}
.chip.save,.chip.kids{background:#e7e4dd}
.chip.save:hover,.chip.kids:hover{background:var(--ink);color:#fff}
.chip.out{background:rgba(23,19,15,.045);opacity:.62}
.chip.out:hover{background:rgba(23,19,15,.06);color:inherit;transform:none}
.chip.out .ct{color:var(--faint)}

.week{display:grid;grid-template-columns:repeat(7,1fr)}
.wcol{border-right:1px solid var(--line);min-height:190px;display:flex;flex-direction:column}
.wcol:last-child{border-right:none}
.wcol .whead{text-align:center;padding:11px 6px;border-bottom:1px solid var(--line)}
.wcol .wd{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.wcol .wn{font-size:18px;font-weight:700;line-height:1.25}
.wcol.today .wn,.wcol.today .wd{color:var(--pink)}
.wcol .stack{padding:11px 9px;display:flex;flex-direction:column;gap:8px;flex:1}

.list-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 17px;border-bottom:1px solid var(--line);flex-wrap:wrap;
  transition:background .25s,transform .3s var(--ease)}
.list-row:last-child{border-bottom:none}
.list-row:hover{background:var(--pink-soft);transform:translateX(4px)}
.list-row .when{font-size:12.5px;font-weight:600;color:var(--pink);min-width:112px}
.list-row .what{font-family:var(--display);font-weight:600;font-size:23px;line-height:1;
  flex:1;min-width:180px;font-variation-settings:'SOFT' 40,'WONK' 1}
.list-row .meta{font-size:13px;color:var(--muted)}
.tag{font-size:11.5px;font-weight:600;padding:7px 13px;border-radius:999px;
  border:1.5px solid var(--line-2);color:var(--muted);white-space:nowrap}
.tag.live{border-color:var(--pink);color:var(--pink)}
.tag.out{opacity:.5}

@media (max-width:760px){
  .dow{display:none}
  .month{grid-template-columns:1fr}
  .cell{min-height:0;flex-direction:row;gap:12px;border-right:none;padding:13px 15px}
  .cell.blank,.cell.empty-day{display:none}
  .date{min-width:26px;padding-top:2px}
  .cell .stack{flex:1;display:flex;flex-direction:column;gap:7px}
  .week{grid-template-columns:1fr}
  .wcol{border-right:none;border-bottom:1px solid var(--line);min-height:0;
    flex-direction:row;align-items:flex-start;gap:8px;padding:4px 0}
  .wcol .whead{border-bottom:none;display:flex;gap:9px;align-items:baseline;
    min-width:82px;padding:13px 15px;text-align:left}
  .wcol .stack{padding:11px 15px 11px 0}
  .cal-shell{padding:13px}
  .legend{justify-content:flex-start}
}

/* ---------------- cards ---------------- */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.g3{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 14px 30px rgba(23,19,15,.09)}
.card .thumb{aspect-ratio:4/5;background:var(--pink-soft);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:19px 21px 23px}
.card .body h3{color:var(--ink)}
.card .body p{color:var(--muted);font-size:15px;margin:9px 0 0}

/* ---------------- about ---------------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:38px;align-items:center}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}}
.about-grid img{border-radius:18px;aspect-ratio:4/5;object-fit:cover;width:100%}

footer.site{border-top:1px solid var(--line);margin-top:52px;padding:34px 0 30px}
footer.site .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer.site a{color:var(--muted);font-size:13px;transition:color .2s,transform .3s var(--ease);
  display:inline-block}
footer.site a:hover{color:var(--pink);transform:translateY(-2px)}
.f-links{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.werk-strip{background:var(--ink);padding:18px 0}
.werk-strip .wrap{display:flex;justify-content:center}
.werk-strip a{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  opacity:.86;transition:opacity .2s}
.werk-strip a:hover{opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rise{opacity:1;transform:none}
}

/* ---------------- save the date ---------------- */
.chip.save{background:var(--teal-soft);color:var(--ink)}
.chip.save:hover{background:var(--teal);color:#fff}
.chip.save:hover .ct{color:rgba(255,255,255,.85)}
.chip .cn em{font-style:normal;font-weight:400;color:var(--muted);display:block;font-size:11px}
.chip:hover .cn em{color:rgba(255,255,255,.8)}
.tag.save{border-color:var(--teal);color:var(--teal)}
.list-row .what em{font-family:var(--sans);font-style:normal;font-weight:500;
  font-size:14px;color:var(--muted);display:block;margin-top:3px}

/* ---------------- alerts signup ---------------- */
.alerts{background:var(--teal-soft);border-radius:20px;padding:36px;
  display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
@media (max-width:820px){.alerts{grid-template-columns:1fr;padding:30px;gap:22px}}
.alerts h2{color:var(--ink)}
.signup{display:flex;gap:10px;flex-wrap:wrap}
.signup input{flex:1;min-width:190px;font-family:var(--sans);font-size:15px;
  padding:14px 18px;border-radius:999px;border:1.5px solid var(--ink);
  background:var(--surface);color:var(--ink);transition:box-shadow .3s var(--ease)}
.signup input::placeholder{color:var(--faint)}
.signup input:focus{outline:none;box-shadow:0 0 0 3px rgba(0,163,150,.3)}
.signup-msg{flex-basis:100%;font-size:13px;color:var(--muted);margin:0}
.signup-msg.success{color:var(--teal)}
.signup-msg.error{color:var(--pink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ---------------- modals ---------------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(23,19,15,.42);backdrop-filter:blur(3px);
  animation:fade .2s ease}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative;background:var(--surface);border-radius:22px;padding:32px 34px;
  width:100%;max-width:430px;box-shadow:0 24px 60px rgba(23,19,15,.24);
  animation:rise .32s var(--ease)}
.sheet.wide{max-width:680px}
@keyframes rise{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.sheet .x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:26px;
  line-height:1;color:var(--faint);cursor:pointer;padding:4px 8px}
.sheet .x:hover{color:var(--ink)}
.sheet h3{margin:0 0 6px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);margin:0 0 8px}
.sheet .meta{color:var(--muted);font-size:15px;margin:0 0 14px}
.body-note{color:var(--muted);font-size:14.5px;margin:0 0 18px}
.err{color:var(--pink);font-size:13.5px;margin:10px 0 0}
.field{font-family:var(--sans);font-size:15px;padding:12px 16px;border-radius:999px;
  border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);flex:1;min-width:150px}
.field:focus{outline:none;box-shadow:0 0 0 3px rgba(255,45,135,.25)}

.rows{display:flex;flex-direction:column;gap:10px;max-height:44vh;overflow-y:auto;padding-right:4px}
.arow{display:grid;grid-template-columns:1.25fr .85fr .7fr .95fr auto auto;gap:8px;align-items:center}
@media (max-width:640px){.arow{grid-template-columns:1fr 1fr;}}
.arow input{font-family:var(--sans);font-size:13.5px;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);width:100%}
.arow input:focus{outline:none;border-color:var(--pink)}
.icon{border:1px solid var(--line-2);background:var(--surface);border-radius:9px;
  width:32px;height:32px;cursor:pointer;font-size:14px;line-height:1;color:var(--muted)}
.icon:hover{border-color:var(--pink);color:var(--pink)}


/* ---------------- add to calendar picker ---------------- */
.cal-apps{display:flex;gap:9px;flex-wrap:wrap}
.cal-apps .app{flex:1;min-width:96px;font-family:var(--sans);font-size:14px;font-weight:600;
  padding:13px 10px;border-radius:14px;border:1.5px solid var(--line-2);
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:transform .3s var(--ease),border-color .2s,background .2s}
.cal-apps .app:hover{border-color:var(--pink);color:var(--pink);
  transform:translateY(-2px) rotate(-1deg)}
.cal-apps .app:active{transform:translateY(1px)}


/* ---------------- ATDA class roster ---------------- */
/* Cover art carries the class name, so no repeated headings.
   Every cover is 3:2 so the grid stays even. */
.roster{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 26px}
@media (max-width:760px){.roster{grid-template-columns:1fr;gap:28px}}

.ccard{display:flex;flex-direction:column;gap:14px}
.cimg{border-radius:16px;overflow:hidden;aspect-ratio:3/2;background:var(--red-soft);
  border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ccard:hover .cimg{transform:translateY(-5px) rotate(-.5deg);
  box-shadow:0 16px 34px rgba(23,19,15,.13)}
.ccard:hover .cimg img{transform:scale(1.04)}
.ccard h3{color:var(--ink);margin:0}
.ccard p{color:var(--muted);font-size:14.5px;margin:5px 0 0;max-width:46ch}
.ccard{gap:11px}

/* placeholder tile for covers Angela has not sent yet */
.await{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;font-family:var(--display);font-weight:600;
  font-size:26px;color:var(--red);text-align:center;padding:16px}
.await em{font-family:var(--sans);font-style:normal;font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* ---------------- live class cards ---------------- */
/* Structure mirrors the class rows on Angela's Werk profile. */
.live-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:820px){.live-cards{grid-template-columns:1fr}}
.lcard{display:grid;grid-template-columns:104px 1fr;gap:15px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:14px;align-items:stretch;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .2s}
.lcard:hover{transform:translateY(-3px);border-color:var(--line-2);
  box-shadow:0 14px 30px rgba(23,19,15,.10)}

/* width + align-self:start are load-bearing. The card is align-items:stretch,
   so without them the thumb fills the row height and aspect-ratio derives its
   WIDTH from that height — overflowing the 104px/88px track and sliding under
   the text. Measured 118.5px wide in an 88px column at 390px once the title
   wraps to two lines. Width is authoritative; 3:4 then sets the height. */
.lthumb{border-radius:11px;overflow:hidden;background:var(--red-soft);
  aspect-ratio:3/4;width:100%;align-self:start;
  display:flex;align-items:center;justify-content:center}
.lthumb img{width:100%;height:100%;object-fit:cover}
.lph{font-family:var(--display);font-weight:600;font-size:15px;color:var(--red);
  text-align:center;padding:8px;line-height:1.05}

.lbody{display:flex;flex-direction:column;gap:5px;padding:2px 4px 2px 0}
.ltop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lwhen{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.lwhen svg{width:14px;height:14px;flex:none}
.lprice{font-size:13px;font-weight:700;color:var(--red);white-space:nowrap}
.lcard h3{font-size:19px;line-height:1.15;margin:1px 0 0;color:var(--ink)}
.lwith{font-size:13.5px;color:var(--muted);margin:0}
.lwith b{color:var(--ink);font-weight:600}
.lloc{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin:1px 0 0}
.lloc svg{width:14px;height:14px;flex:none}
.lcta{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  margin-top:auto;padding:8px 13px;border-radius:999px;background:var(--pink);
  color:#fff;font-size:12px;font-weight:700;line-height:1;
  transition:background .2s,transform .25s var(--ease)}
.lcard:hover .lcta{background:var(--ink);transform:translateY(-1px)}
.none{color:var(--muted);font-size:15px;margin:0}

@media (max-width:600px){
  .lcard{grid-template-columns:88px 1fr;gap:14px;padding:12px}
  .lcard h3{font-size:17px}
}

/* Admin: a utility link in the calendar footer, not an action for visitors.
   Same weight and colour as the timezone note beside it. */
.cal-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-link{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--faint); /* matches .tz */
  letter-spacing:.02em;text-decoration:underline;text-underline-offset:3px;
  transition:color .2s}
.admin-link:hover{color:var(--muted)}
.arow input[data-f="mins"]{max-width:76px}

/* Header mark (alignment and the CTA are set in the nav block further down). */
/* One line at every width. Inline (not the base `.brand span{display:block}`)
   so the real space between the two halves is what separates them. */
.brand .wordmark > span{display:inline}
@media (min-width:900px){
  /* Desktop has room, so the mark is larger and stays on one line. */
  .brand .wordmark{white-space:nowrap;font-size:clamp(22px,4.2vw,60px);
    line-height:1.06;letter-spacing:-.02em}
  .brand .atda{font-size:12px;letter-spacing:.3em}
}

@media (max-width:899px){
  /* One line on mobile: the <br> is suppressed and the size is set so the
     whole wordmark fits the content box without wrapping. */
  .brand .wordmark{display:block;white-space:nowrap;
    font-size:clamp(15px,4.6vw,22px);line-height:1.06;letter-spacing:-.015em}
  .brand .atda{font-size:10.5px}
}

/* Hero full-bleed, edge to edge. 21/9 is a desktop ratio: at 390px it is a
   ~167px letterbox that decapitates a standing subject, so mobile keeps a
   taller crop. Full-bleed at both — only the ratio changes. */
.hero .hero-media{max-width:none;width:100%;margin:0;border-radius:0;aspect-ratio:4/3}
.hero .hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 63%}
@media (min-width:900px){
  /* Taller than 21/9 so there is curtain above her head for the quote to sit
     on. 16/9 also crops less of the 3:2 source — 85% of its height is visible
     against 65% at 21/9 — and the crop is pulled up (12%) to put that recovered
     height above her rather than below. The trophy plaque still clears. */
  .hero .hero-media{aspect-ratio:16/9}
  .hero .hero-media img{object-position:50% 12%}
}
.hero-quote q{font-size:clamp(24px,3.4vw,44px)}
.hero-quote cite{font-size:clamp(13px,1.2vw,17px)}
@media (max-width:899px){
  /* Quote sits below the wordmark in the hierarchy on mobile: the title is
     ~17.9px at 390, so the quote is deliberately smaller than that. */
  .hero-quote q{font-size:clamp(13px,3.8vw,15.5px)}
  .hero-quote cite{font-size:clamp(11px,2.7vw,12.5px)}
}

/* Logo strip: ten marks in two rows of five from 901px up (forced by
   .pr-break.d after the 5th — see components/press.js), at the full desktop
   optical set (~750px per row). Phones: three rows, 4/3/3 (.pr-break.m).
   Keep the ratios between heights if retuning. */
.creds .wrap{max-width:1280px;padding:0 24px}
.press-row{--rg:26px;gap:0 44px;flex-wrap:wrap}
/* Row spacing is margin on the logos, not row-gap: a break sits on its own
   zero-height line, and row-gap would count that line as a second gap. */
.press-row > a{margin:calc(var(--rg) / 2) 0}
.pr-break{flex-basis:100%;height:0}
.pr-break.m{display:none}
@media (max-width:600px){.pr-break.d{display:none}.pr-break.m{display:block}}
.l-nyt{height:68px}.l-vogue{height:28px}.l-nylon{height:19px}
.l-cut{height:31px}.l-forbes{height:31px}.l-nowness{height:21px}.l-kinfolk{height:17px}
.l-rs{height:30px}.l-bazaar{height:27px}.l-timeout{height:30px}
@media (max-width:900px){
  .press-row{flex-wrap:wrap;gap:16px 28px}
  .l-nyt{height:38px}.l-vogue{height:16px}.l-nylon{height:11px}
  .l-cut{height:18px}.l-forbes{height:18px}.l-nowness{height:12px}.l-kinfolk{height:10px}
  .l-rs{height:16px}.l-bazaar{height:15px}.l-timeout{height:17px}
}
.none a{color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* ---------------- FAQ accordion ---------------- */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{margin:0;font-size:inherit;font-weight:inherit}
.faq-q button{width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;background:none;border:0;padding:18px 2px;cursor:pointer;text-align:left;
  font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,21px);
  line-height:1.28;letter-spacing:-.01em;color:var(--ink)}
.faq-q button:hover{color:var(--red)}
.faq-q button:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.chev{width:20px;height:20px;flex:none;margin-top:3px;color:var(--faint);
  transition:transform .25s var(--ease),color .2s}
.faq-q button:hover .chev{color:var(--red)}
.faq-q button[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--red)}
.faq-a-in{padding:0 2px 20px;max-width:68ch;color:var(--muted);font-size:15px;line-height:1.62}
.faq-a-in a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){
  .faq-q button{padding:16px 0;gap:12px}
  .faq-a-in{padding:0 0 18px;font-size:14.5px}
}
/* Desktop: the accordion is narrower than the container, so centre it and its
   heading as one block rather than leaving it pinned to the left margin with
   dead space beside it. Mobile is full width and keeps the shared left edge. */
@media (min-width:900px){
  #faq .section-head{text-align:center}
}

/* Passed classes in "Classes this month": greyed card, black-and-white art,
   grey inert "Passed" pill. A <div>, not a link, so there is no hover lift. */
.lcard.past{opacity:.85;background:var(--paper)}
.lcard.past .lthumb img{filter:grayscale(1)}
.lcard.past h3,.lcard.past .lwith b{color:var(--muted)}
.lcard.past .lcta{background:#8f8984;color:#fff;cursor:default}

/* NYT attribution larger, so the credit carries weight under the quote. */
.hero-quote cite{font-size:clamp(20px,2.2vw,30px);margin-top:12px}
@media (max-width:899px){.hero-quote cite{font-size:clamp(14px,4vw,17px)}}

/* Card art bleeds: no padding around the image, which fills the card's full
   height and is clipped to the card's left corners. The body keeps the inset.
   aspect-ratio is dropped so height comes from the row (stretch), not from
   the width — see the .lthumb note above for why that pairing matters. */
.lcard{padding:0;overflow:hidden}
.lthumb{aspect-ratio:auto;height:100%;align-self:stretch;border-radius:0}
.lbody{padding:14px 14px 14px 0}
@media (max-width:600px){
  .lcard{padding:0}
  .lbody{padding:12px 12px 12px 0}
}


/* Header lockup. Desktop: ATDA and the full name on one line, vertically
   centred, email button far right. Below 900px it stacks and centres:
   ATDA, the name, then the button. The name is part of the logo, not a
   caption, so it stays large at every width. */
.nav-row{justify-content:space-between}
.nav-row .btn.nav-cta{display:inline-flex;flex:none;white-space:nowrap}
.brand .atda{line-height:1;margin:0;letter-spacing:.14em}
.brand .wordmark{display:block;white-space:nowrap;font-weight:600;
  letter-spacing:.005em;line-height:1.1}
.brand .wordmark > span{display:inline}
@media (min-width:900px){
  .nav-row{padding:14px 24px}
  .brand{display:flex;align-items:center;gap:clamp(16px,1.8vw,28px);text-align:left}
  .brand .atda{font-size:clamp(44px,4.4vw,64px);letter-spacing:.16em}
  .brand .wordmark{font-size:clamp(19px,calc(5.33vw - 28px),36px)}
  .nav-row .btn.nav-cta{padding:12px 22px;font-size:14px}
}
@media (max-width:899px){
  .nav-row{flex-direction:column;align-items:center;gap:10px;padding:12px 16px 14px}
  .brand{text-align:center}
  /* padding-left offsets the trailing letter-spacing so ATDA centres optically */
  .brand .atda{display:block;font-size:clamp(32px,9vw,42px);padding-left:.14em;margin-bottom:5px}
  .brand .wordmark{font-size:clamp(16px,5.2vw,24px)}
  .nav-row .btn.nav-cta{padding:10px 20px;font-size:13px}
}

/* "Get out of your shell" — Framed. Centred panel, same width as the class
   listings (.wrap), thin warm border, no shadow. Desktop: two-line headline,
   one-line support copy, buttons side by side. Mobile (<600px): headline
   wraps naturally (balanced), support copy on two lines, buttons stacked. */
.intro{padding:24px 0 8px}
.intro .intro-box{display:block;text-align:center;padding:48px;border-radius:20px;
  border:1px solid var(--line);box-shadow:none}
.intro .intro-box h1{font-size:clamp(30px,3.6vw,50px);line-height:1.06;
  letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.intro .intro-box .lede{margin:24px auto 0;font-size:clamp(20px,1.5vw,22px);
  line-height:1.4;color:var(--ink)}
.intro .intro-box .lede b{font-weight:600}
.intro .intro-box .cta-row{justify-content:center;gap:12px;margin-top:28px}
.intro .intro-box .cta-row .btn{min-height:48px;flex:0 0 auto}
@media (max-width:820px){
  .intro .intro-box h1 br{display:none}
}
@media (max-width:599px){
  .intro .intro-box{padding:24px}
  .intro .intro-box .lede span{display:block}
  .intro .intro-box .cta-row{flex-direction:column;align-items:stretch}
  .intro .intro-box .cta-row .btn{width:100%}
}

/* Admin editor: a real table. One row per date, every field on one line,
   labelled columns. Narrow screens scroll the table sideways rather than
   wrapping a row onto two lines. */
.sheet.wide{max-width:940px}
.atable{overflow:auto;max-height:52vh;margin-top:6px}
.atable .arow{grid-template-columns:minmax(150px,1.6fr) 150px 118px minmax(120px,1.2fr) 76px 34px 34px;
  min-width:760px;gap:8px}
.atable .rows{max-height:none;overflow:visible;padding-right:0}
.arow-head{position:sticky;top:0;z-index:1;background:var(--surface);
  padding:0 0 6px;border-bottom:1px solid var(--line);margin-bottom:10px}
.arow-head span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.atable .arow input[data-f="mins"]{max-width:none}
.atable .icon{width:34px;height:34px}

/* Sold-out classes in the calendar are not links: no pointer, no hover. */
.chip.out,.list-row.out{cursor:default}
.list-row.out:hover{background:none;transform:none}

/* Sold-out cards share the greyed "past" look but keep colour art — only
   passed classes go black and white. Empty month: one full-width card. */
.lcard.past.out .lthumb img{filter:none}
.lcard.lempty{grid-column:1/-1;display:block;text-align:center;padding:36px 28px}
.lcard.lempty:hover{transform:none;box-shadow:none;border-color:var(--line)}
.lcard.lempty h3{font-size:clamp(20px,2vw,26px);margin:0 0 8px}
.lcard.lempty p{color:var(--muted);margin:0 auto 20px;max-width:46ch}
.lcard.lempty .btn{min-height:48px}

/* Homepage press logos link to /press; the <a> is a plain block so the row
   lays out exactly as before. */
.press-row a{display:block;border-radius:6px}
.press-row a:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ================= Press + Gallery pages ================= */
/* Built from the homepage's own pieces: .wrap width, display h1/h2, .lede,
   .kicker, white bordered panels, .card hover lift. Nothing new in type or
   colour. */
.page-hero{padding:56px 0 6px}
.page-hero .kicker{margin-bottom:10px}
.page-hero h1{font-size:clamp(40px,6vw,72px);line-height:.98;max-width:16ch}
.page-hero .lede{margin-top:16px;font-size:clamp(16px,1.4vw,19px);max-width:56ch}
@media (max-width:600px){.page-hero{padding:36px 0 0}}

/* links that are whole cards get the site's red focus ring */
.pcard .body:focus-visible,.pfeat a:focus-visible,.pshot:focus-visible,.pbtn:focus-visible,
.gcard:focus-visible,.cphoto:focus-visible,
.cnav a:focus-visible,.back-link:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Publication marks are the original logo files (white, made for the old dark
   site); brightness(0) inks them so they sit on cream like the homepage row. */
.plogo{height:20px;width:auto;max-width:160px;object-fit:contain;object-position:left center;
  filter:brightness(0);opacity:.85;align-self:flex-start}

/* featured article: image left, story right; stacks on mobile */
.pfeat{display:grid;grid-template-columns:1.05fr 1fr;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;overflow:hidden}
.pfeat-body{padding:clamp(24px,4vw,52px);display:flex;flex-direction:column;gap:16px;justify-content:center}
.pfeat-body .plogo{height:30px;max-width:240px}
.pfeat-body .kicker{margin:0}
.pfeat-body h2{font-size:clamp(26px,3vw,40px);line-height:1.04}
.pfeat-body .pquote{font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(18px,1.6vw,21px);line-height:1.4;color:var(--ink);margin:0}
.pfeat-body .btn{align-self:flex-start;min-height:48px;margin-top:6px}
@media (max-width:820px){.pfeat{grid-template-columns:1fr}}

/* press grid: 3 / 2 / 1 columns, whole card clickable, .card hover */
.press-featured-sec{padding-top:28px}
.press-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:960px){.press-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.press-grid{grid-template-columns:1fr;gap:20px}}
.pcard{display:flex;flex-direction:column}
.pcard .body{display:flex;flex-direction:column;gap:10px;flex:1}
.pcard .body:hover h3{color:var(--red)}
.pcard .body .kicker{margin:0}
.pcard .body h3{font-size:19px;line-height:1.18}
.pcard .pquote{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.plink{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--red)}

/* gallery index: 3-col editorial grid. .wide spans two columns at 16:10 and
   sits beside a .tall 4:5 card — both resolve to the same row height. The
   three-up rows are square. Tablet: 2 columns, no spans. Mobile: 1 column. */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px}
.gcard{display:flex;flex-direction:column;gap:12px}
.gcard.wide{grid-column:span 2}
.gimg{border-radius:16px;overflow:hidden;background:var(--red-soft);border:1px solid var(--line);
  aspect-ratio:1/1;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.gcard.wide .gimg{aspect-ratio:16/10}
.gcard.tall .gimg{aspect-ratio:4/5}
.gimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gcard:hover .gimg{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 16px 34px rgba(23,19,15,.13)}
.gcard:hover .gimg img{transform:scale(1.04)}
.gmeta h3{font-size:20px;line-height:1.16}
.gmeta p{margin:5px 0 0;color:var(--muted);font-size:14px}
.garrow{display:inline-block;color:var(--red);transition:transform .3s var(--ease)}
.gcard:hover .garrow{transform:translateX(4px)}
@media (max-width:900px){
  .ggrid{grid-template-columns:repeat(2,1fr)}
  .gcard.wide{grid-column:span 1}
  .gcard.wide .gimg,.gcard .gimg{aspect-ratio:4/5}
}
@media (max-width:560px){
  .ggrid{grid-template-columns:1fr;gap:28px}
  .gcard .gimg,.gcard.wide .gimg{aspect-ratio:4/3}
}

/* collection page */
.chero{padding-top:36px}
.back-link{display:inline-block;font-size:13px;font-weight:600;color:var(--muted);
  margin-bottom:18px;transition:color .2s}
.back-link:hover{color:var(--red)}
.chero h1{font-size:clamp(34px,5vw,60px);max-width:22ch}
.ccredit{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--ink)}

/* justified rows: flex-grow/basis from each photo's aspect ratio (inline) */
.cgrid{display:flex;flex-wrap:wrap;gap:8px}
.cgrid::after{content:'';flex-grow:999999}
.cphoto{position:relative;display:block;border-radius:8px;overflow:hidden;background:var(--red-soft);cursor:zoom-in}
.cphoto i{display:block}
.cphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),opacity .3s}
.cphoto:hover img{transform:scale(1.03)}
@media (max-width:600px){
  .cgrid{gap:5px}
  .cphoto{border-radius:6px}
}

.cnav{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;
  margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.cnav-prev,.cnav-next{display:flex;flex-direction:column;gap:4px;min-width:0}
.cnav-next{text-align:right;align-items:flex-end}
.cnav span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cnav b{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2;transition:color .2s}
.cnav a:hover b{color:var(--red)}
.cnav .btn{min-height:44px}
@media (max-width:600px){
  .cnav{grid-template-columns:1fr 1fr}
  .cnav .btn{grid-column:1/-1;grid-row:2;justify-self:center}
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:300;background:rgba(23,19,15,.97);
  display:flex;align-items:center;justify-content:center;padding:56px 70px}
.lb[hidden]{display:none}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}
.lb-fig img{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;object-fit:contain;border-radius:6px}
.lb-count{color:rgba(255,255,255,.75);font-size:13px;font-weight:600;letter-spacing:.06em}
.lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;cursor:pointer;transition:background .2s}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-x{top:14px;right:16px;width:44px;height:44px;font-size:26px;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:30px;line-height:1}
.lb-prev{left:12px}.lb-next{right:12px}
@media (max-width:600px){
  .lb{padding:60px 8px 70px}
  .lb-nav{top:auto;bottom:14px;transform:none}
  .lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}
}

/* Article image strip: every image the article has, one per view, scroll-snap.
   Swipe/trackpad scrolls it; the arrow pill steps it; tapping an image opens
   the lightbox. Article pages are tall screenshots, so the crop is top-anchored
   (the lightbox shows the whole page). */
.pmedia{position:relative;background:var(--red-soft)}
.pcard .pmedia{aspect-ratio:4/3}
.pfeat .pmedia{min-height:100%;aspect-ratio:auto}
@media (max-width:820px){.pfeat .pmedia{aspect-ratio:4/3}}
.pstrip{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.pstrip::-webkit-scrollbar{display:none}
.pshot{flex:0 0 100%;height:100%;scroll-snap-align:start;padding:0;margin:0;border:0;
  background:none;cursor:zoom-in;overflow:hidden;display:block}
.pshot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease)}
.pshot:hover img{transform:scale(1.03)}
.pfeat .pshot img{max-height:620px}
.pctl{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;
  padding:4px;border-radius:999px;background:rgba(23,19,15,.72);color:#fff;backdrop-filter:blur(6px)}
.pbtn{width:32px;height:32px;border-radius:999px;border:0;background:transparent;color:#fff;
  font-size:22px;line-height:1;cursor:pointer;transition:background .2s}
.pbtn:hover:not(:disabled){background:rgba(255,255,255,.18)}
.pbtn:disabled{opacity:.35;cursor:default}
.pcount{font-size:12px;font-weight:600;letter-spacing:.04em;min-width:42px;text-align:center}

/* Header actions: Substack (word) and Instagram (mark) as outline pills —
   the site's default .btn (ink border, ink-fill hover) — then the red email
   button. All three share one height; Instagram is a round pill. */
.nav-actions{display:flex;align-items:center;gap:10px;flex:none}
.nav-actions .btn{height:44px;min-height:44px}
.nav-actions .nav-link{padding:0 20px;font-size:14px}
.nav-actions .nav-ig{width:44px;padding:0}
.nav-actions .nav-ig svg{width:20px;height:20px}
@media (max-width:899px){
  .nav-actions .btn{height:40px;min-height:40px}
  .nav-actions .nav-link{padding:0 16px;font-size:13px}
  .nav-actions .nav-ig{width:40px}
}
.nav-actions .btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Logo strip sizes per layout (see the strip note above).
   Tablet 601–900px: two rows of five at 0.7x the desktop set.
   Phones: three rows (4/3/3); heights scale with the viewport so the widest
   row (NYT, Vogue, Nylon, The Cut) always fits — 0.85x the small set at
   320px up to 1.3x on larger phones. */
@media (min-width:601px) and (max-width:900px){
  .press-row{--rg:22px;gap:0 28px}
  .l-nyt{height:47.6px} .l-vogue{height:19.6px} .l-nylon{height:13.3px} .l-cut{height:21.7px} .l-forbes{height:21.7px} .l-nowness{height:14.7px} .l-kinfolk{height:11.9px} .l-rs{height:21.0px} .l-bazaar{height:18.9px} .l-timeout{height:21.0px}
}
@media (max-width:600px){
  .press-row{--rg:18px;gap:0 16px}
  .l-nyt{height:clamp(32.3px,calc(14.844vw - 14.25px),49.4px)}
  .l-vogue{height:clamp(13.6px,calc(6.250vw - 6.00px),20.8px)}
  .l-nylon{height:clamp(9.3px,calc(4.297vw - 4.12px),14.3px)}
  .l-cut{height:clamp(15.3px,calc(7.031vw - 6.75px),23.4px)}
  .l-forbes{height:clamp(15.3px,calc(7.031vw - 6.75px),23.4px)}
  .l-nowness{height:clamp(10.2px,calc(4.688vw - 4.50px),15.6px)}
  .l-kinfolk{height:clamp(8.5px,calc(3.906vw - 3.75px),13.0px)}
  .l-rs{height:clamp(13.6px,calc(6.250vw - 6.00px),20.8px)}
  .l-bazaar{height:clamp(12.8px,calc(5.859vw - 5.62px),19.5px)}
  .l-timeout{height:clamp(14.4px,calc(6.641vw - 6.38px),22.1px)}
}

/* Intro panel description, between the headline and ALL LEVELS. */
.intro .intro-box .intro-blurb{margin:20px auto 0;max-width:52ch;color:var(--muted);
  font-size:clamp(17px,1.4vw,19px);line-height:1.5;text-wrap:balance}
.intro .intro-box .intro-blurb + .lede{margin-top:18px}
@media (max-width:599px){.intro .intro-box .intro-blurb{font-size:16.5px;margin-top:16px}}

/* Choreography (/work): one white panel per project, credits left, film or
   photo right; stacks below 820px. Logos use the press-page ink treatment. */
.work-list{display:flex;flex-direction:column;gap:24px}
.witem{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(22px,4vw,48px);
  align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(20px,3vw,36px)}
.wtext{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.wtext .kicker{margin:0}
.wtext h2{font-size:clamp(24px,2.6vw,34px);line-height:1.08}
.wtext h2 a{transition:color .2s}
.wtext h2 a:hover{color:var(--red)}
.wlogo{height:auto;max-height:44px;max-width:180px}
.wlines{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.wbody{margin:0;color:var(--ink);font-size:16px;line-height:1.6;max-width:46ch}
.wbody a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.wtext .plink{margin-top:4px;padding:0}
.wvideo{width:100%;border-radius:14px;overflow:hidden;background:var(--ink)}
.wvideo iframe{width:100%;height:100%;border:0;display:block}
.wphoto{display:block;max-width:420px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  margin-left:auto;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.wphoto:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 16px 34px rgba(23,19,15,.13)}
.wphoto img{width:100%;height:auto}
.wphoto:focus-visible,.wtext a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (max-width:820px){
  .witem{grid-template-columns:1fr}
  .wphoto{margin:0 auto;max-width:100%}
}
.wlogo{max-height:56px;max-width:200px}
.wpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.wcard{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.wcard .wlogo{height:44px;max-height:44px}
.wcard .wphoto{margin:0;max-width:none;width:100%}
@media (max-width:640px){.wpair{grid-template-columns:1fr}}