:root{
  /* SUMI & PEARL
     Warm near-black ground, pearl paper, one persimmon. Near-monochrome by
     intent: with a single colour on the page, the storyteller portraits are
     the only other thing carrying hue.

     Every value is derived, not eyeballed. build/palette.py is the gate and
     must print ALL PASS before any of these change:

         python3 build/palette.py

     ACCENT HIERARCHY — the split is a contrast constraint, not a preference.
       --accent        fills and borders ONLY. 3.64:1 on the ground: clears
                       the 3:1 floor for interface components, fails the
                       4.5:1 floor for text. Never set type in it.
       --accent-lift   the text-safe persimmon, 5.08:1. This is the accent
                       visitors actually read.
       --on-accent     the label that sits on an --accent fill, 4.89:1.
       --second        ceremonial pearl-grey: the tagline, sponsor amounts,
                       the intermission marker. Deliberately quiet — in a
                       monochrome scheme a second hue would break the idea.

     Token names are scheme-neutral on purpose. This palette has changed
     twice; names that encode a colour ("seal", "gold") go stale the moment
     it changes again. */
  --ink:#121110;
  --ink-raised:#1B1A18;
  --ink-hover:#242220;
  --ink-line:rgba(244,240,232,.16);
  --paper:#F4F0E8;
  --paper-dim:rgba(244,240,232,.66);
  --paper-faint:rgba(244,240,232,.51);

  --accent:#C63B24;
  --accent-lift:#DD5B46;
  --accent-bright:#E58171;
  --accent-wash:rgba(198,59,36,.12);
  --on-accent:#FFF7EF;

  --second:#9A958C;
  --second-lift:#B5B0A6;

  /* The "* fallback" faces are metric-matched local fonts declared in
     polish.css. They sit second so the first paint occupies the same space
     the webfont will, and the swap does not reflow the page. */
  --display:"Zen Old Mincho","Mincho fallback",'Hiragino Mincho ProN',"Yu Mincho",Georgia,serif;
  --body:"EB Garamond","Garamond fallback",Garamond,Georgia,serif;
  --caps:"Noto Sans JP","Sans JP fallback","Hiragino Sans","Helvetica Neue",sans-serif;
  --measure:36rem;
  --gutter:clamp(1.25rem,5vw,4.5rem);
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(1.12rem,1.06rem + .3vw,1.26rem);
  line-height:1.66;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--accent-bright);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  max-width:70rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.eyebrow{
  font-family:var(--caps);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent-lift);
  margin:0;
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--paper);
  color:var(--ink);
  padding:.7rem 1rem;
  font-family:var(--caps);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.9rem;
  z-index:99;
}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- masthead ---------- */

.masthead{
  border-bottom:1px solid var(--ink-line);
  position:sticky;
  top:0;
  background:rgba(18,17,16,.93);
  backdrop-filter:blur(10px);
  z-index:20;
}
.masthead .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:4.5rem;
}
.mark{
  font-family:var(--caps);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1.15;
}
.mark span{
  display:block;
  font-weight:400;
  font-size:.8rem;
  letter-spacing:.3em;
  color:var(--accent-lift);
  margin-top:.2rem;
}
.masthead nav{
  display:flex;
  gap:1.9rem;
  font-family:var(--caps);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.masthead nav a{
  text-decoration:none;
  color:var(--paper-dim);
  padding-block:.4rem;
  border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;
}
.masthead nav a:hover{color:var(--accent-bright);border-bottom-color:var(--accent-lift)}
/* The rule that used to live here hid every nav link past the second one on
   small screens, which silently removed Program, Support, and Connect from the
   phone experience entirely. Mobile navigation is now a real disclosure menu;
   see the mobile section at the end of this file. */

/* ---------- hero ---------- */

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(4rem,10vw,7.5rem) clamp(3rem,7vw,5rem);
  border-bottom:1px solid var(--ink-line);
  text-align:center;
  background:
    radial-gradient(60rem 26rem at 50% -6rem,rgba(198,59,36,.16),transparent 70%),
    var(--ink);
}
/* Full-bleed hero photograph. Drop the file in and it appears behind the
   title; if the file is absent nothing breaks, the hero just stays black. */
.hero-media{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(180deg,rgba(18,17,16,.80) 0%,rgba(18,17,16,.62) 42%,rgba(18,17,16,.97) 100%),
    url("https://aahfestival.org/images/festival/aahf-sam-stage.jpg");
  background-size:cover;
  background-position:center 32%;
  background-repeat:no-repeat;
}
.hero-credit{
  font-family:var(--caps);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper-faint);
  margin:2.5rem 0 0;
}
.status{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-family:var(--caps);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--paper-faint);
  margin-bottom:1.8rem;
}
.status::before{
  content:"";
  width:.4rem;
  height:.4rem;
  transform:rotate(45deg);
  background:var(--second);
  flex:none;
}
h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.9rem,10.5vw,7rem);
  line-height:.94;
  letter-spacing:-.012em;
  margin:0 0 1.5rem;
  font-feature-settings:"palt" 1;
}
h1 em{
  font-style:italic;
  font-weight:400;
  color:var(--accent-lift);
}
.subtitle{
  font-family:var(--caps);
  font-size:clamp(1rem,.9rem + .5vw,1.3rem);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--accent-lift);
  margin:0 0 2rem;
}
.lede{
  font-size:clamp(1.1rem,1rem + .6vw,1.35rem);
  line-height:1.55;
  max-width:var(--measure);
  margin:0 auto 2.5rem;
  color:var(--paper-dim);
}
.lede strong{color:var(--paper);font-weight:400}

.vitals{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 3rem;
  font-family:var(--caps);
  font-size:1.02rem;
  letter-spacing:.06em;
  color:var(--paper);
  padding-top:2rem;
  margin:2.75rem 0 0;
  border-top:1px solid var(--ink-line);
}
.vitals div{padding-block:.5rem}
.vitals dt{
  color:var(--accent-lift);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  margin-bottom:.3rem;
}
.vitals dd{margin:0}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--caps);
  font-size:.98rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.8rem 1.6rem;
  border:1px solid var(--accent-lift);
  color:var(--accent-lift);
  background:transparent;
  transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{background:var(--accent-wash);color:var(--accent-bright);border-color:var(--accent-bright)}
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
.btn-primary:hover{background:var(--accent-bright);border-color:var(--accent-bright);color:var(--on-accent)}
.btn svg{flex:none;opacity:.85}

/* ---------- section frame ---------- */

.band{
  padding-block:clamp(3.5rem,8vw,6rem);
  border-bottom:1px solid var(--ink-line);
}
.band-head{
  max-width:44rem;
  margin:0 auto clamp(2.5rem,5vw,3.5rem);
  text-align:center;
}
.band-head h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,1.3rem + 2vw,2.9rem);
  line-height:1.1;
  letter-spacing:-.008em;
  margin:.9rem 0 .85rem;
  font-feature-settings:"palt" 1;
}
.band-head p{
  margin:0;
  color:var(--paper-dim);
}

/* ---------- signature: running order ---------- */

.order{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--ink-line);
}
.entry{
  position:relative;
  display:block;
  text-align:center;
  padding:2.5rem 1rem 2.4rem;
  border-bottom:1px solid var(--ink-line);
  text-decoration:none;
  transition:background .2s;
}
.entry:hover,.entry:focus-visible{background:rgba(221,91,70,.06)}

/* Storyteller portrait, shown as a hung frame. The Asian Monologues portraits are
   transparent PNG cutouts that carry their own frame, so they sit on nothing and
   are never cropped. Images that arrive as plain rectangles get .plain, which
   adds a gold frame of our own. If a file fails to load the <img> hides itself
   and the gold monogram plate underneath takes over. */
.portrait{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(7rem,15vw,9.5rem);
  aspect-ratio:1;
  margin:0 auto 1.5rem;
  transition:transform .28s;
}
.portrait img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:grayscale(.3) contrast(1.04);
  transition:filter .28s;
}
.portrait.plain img{
  object-fit:cover;
  border:1px solid var(--accent-lift);
  padding:0;
}
.portrait .monogram{
  position:absolute;
  inset:8%;
  display:grid;
  place-items:center;
  border:1px solid var(--accent-lift);
  background:var(--ink-raised);
  font-family:var(--caps);
  font-size:clamp(1.6rem,4vw,2.2rem);
  font-weight:600;
  letter-spacing:.12em;
  color:var(--accent-lift);
}
.entry:hover .portrait{transform:translateY(-3px) scale(1.03)}
.entry:hover .portrait img{filter:grayscale(0) contrast(1.04)}

.entry-num{
  display:block;
  font-family:var(--caps);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--accent-lift);
  margin-bottom:.7rem;
}

.entry-name{
  display:block;
  font-family:var(--caps);
  font-weight:600;
  font-size:clamp(2rem,1.3rem + 3vw,3.4rem);
  line-height:1.05;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 .8rem;
}
.entry-line{
  margin:0 auto 1.2rem;
  color:var(--paper-dim);
  max-width:34rem;
  font-size:1.04rem;
  line-height:1.55;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  margin-bottom:1.3rem;
}
.tag{
  font-family:var(--caps);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--paper-faint);
  border:1px solid var(--ink-line);
  padding:.22rem .7rem;
}
.entry-go{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--caps);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-lift);
  border:1px solid var(--accent-lift);
  padding:.55rem 1.35rem;
  white-space:nowrap;
  transition:background .18s,color .18s;
}
.entry:hover .entry-go{background:var(--accent);color:var(--on-accent)}

/* ---------- program block ---------- */

.two-col{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:1px;
  background:var(--ink-line);
  border:1px solid var(--ink-line);
  overflow:hidden;
}
.cell{
  background:var(--ink-raised);
  padding:0 0 clamp(1.75rem,3vw,2.5rem);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.75rem;
  transition:background .2s;
}
.cell:hover{background:var(--ink-hover)}
.cell-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  padding-inline:clamp(1.75rem,3vw,2.5rem);
}
/* Card thumbnail. Removes itself cleanly if the file is not present. */
.cell-media{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
  margin-bottom:clamp(1.25rem,2.5vw,1.75rem);
  border-bottom:1px solid var(--ink-line);
  background:#161E31;
}
.cell-media[hidden]{display:none}
.cell-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(.4) brightness(.85);
  transition:filter .28s,transform .5s;
}
.cell:hover .cell-media img{filter:grayscale(0) brightness(1);transform:scale(1.04)}
.cell-media[hidden]+.cell-body{padding-top:clamp(1.75rem,3vw,2.5rem)}
.cell h3{
  font-family:var(--caps);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0;
}
.cell p{
  margin:0;
  font-size:.97rem;
  line-height:1.55;
  color:var(--paper-dim);
}
.cell .entry-go{margin-top:.5rem}
.cell:hover .entry-go{background:var(--accent);color:var(--on-accent)}

/* ---------- faq ---------- */

.faq{max-width:44rem;margin-inline:auto}
.faq details{
  border-bottom:1px solid var(--ink-line);
}
.faq details:first-of-type{border-top:1px solid var(--ink-line)}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:1.4rem 2.5rem 1.4rem 0;
  font-family:var(--caps);
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-bright)}
.faq summary::after{
  content:"+";
  position:absolute;
  right:.25rem;
  top:1.15rem;
  font-family:var(--caps);
  font-size:1.5rem;
  color:var(--accent-lift);
  transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{
  margin:0 0 1.5rem;
  color:var(--paper-dim);
}

/* ---------- support ---------- */

.tiers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:1rem;
  margin-bottom:2rem;
}
.tier{
  border:1px solid var(--ink-line);
  padding:2rem 1.75rem;
  background:var(--ink-raised);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.tier .amount{
  font-family:var(--display);
  font-size:2.4rem;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--accent-lift);
  display:block;
  line-height:1;
  margin-bottom:.8rem;
}
.tier h2{
  font-family:var(--caps);
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 .5rem;
}
.tier p{
  margin:0 0 1.4rem;
  font-size:.96rem;
  color:var(--paper-dim);
  line-height:1.55;
}

/* ---------- sponsors ---------- */

/* Partner logo grid. Each tile holds a logo; tiles whose logo file is
   missing fall back to the partner's name set in type. */
.partners{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));
  gap:1px;
  background:var(--ink-line);
  border:1px solid var(--ink-line);
  max-width:62rem;
  margin-inline:auto;
  padding:0;
}
.partners li{
  list-style:none;
  background:var(--ink-raised);
  min-height:7rem;
  padding:1.25rem 1rem;
  display:grid;
  place-items:center;
  text-align:center;
  transition:background .2s;
}
.partners li:hover{background:var(--ink-hover)}
.partners img{
  max-width:100%;
  max-height:3.25rem;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:opacity .2s,filter .2s;
}
/* Logos supplied as transparent artwork are flattened to one warm white, so the
   whole wall reads as a single set regardless of each file's original colour. */
.partners li.inv img{
  filter:brightness(0) invert(1);
  opacity:.80;
}
.partners li.inv:hover img{opacity:1}
/* Logos supplied with their own opaque background keep their real colours and
   sit on a light chip, which is the only way they stay legible on black. */
.partners li.chip img{
  background:#F4EFE4;
  padding:.5rem .6rem;
  border-radius:.2rem;
  max-height:3.6rem;
  opacity:.9;
}
.partners li.chip:hover img{opacity:1}
.logo-fallback{
  font-family:var(--caps);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.14em;
  line-height:1.25;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.partners li.is-missing img{display:none}
.partners li:not(.is-missing) .logo-fallback{display:none}
.partners li.lead{
  background:var(--accent-wash);
  border:1px solid rgba(198,59,36,.5);
}
.partners li.lead:hover{background:rgba(198,59,36,.18)}
.partners li.lead .logo-fallback{color:var(--accent-bright);font-weight:600}
.partners li.lead img{opacity:1;max-height:3.9rem}

/* ---------- signup + footer ---------- */

.signup{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  max-width:30rem;
  margin-top:1.5rem;
}
.signup input{
  flex:1 1 13rem;
  background:transparent;
  border:1px solid var(--ink-line);
  padding:.8rem 1.1rem;
  color:var(--paper);
  font-family:var(--caps);
  font-size:1rem;
  letter-spacing:.08em;
}
.signup input::placeholder{color:var(--paper-faint)}
.signup input:focus{border-color:var(--accent-lift);outline:none}
.signup button{
  font-family:var(--caps);
  font-size:.98rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:.8rem 1.6rem;
  border:1px solid var(--accent-lift);
  background:var(--accent);
  color:var(--on-accent);
  cursor:pointer;
  transition:background .18s;
}
.signup button:hover{background:var(--accent-bright)}
.fineprint{
  font-family:var(--body);
  font-size:.85rem;
  line-height:1.6;
  color:var(--paper-faint);
  margin:.9rem 0 0;
  max-width:30rem;
}

footer{
  padding-block:clamp(3rem,6vw,4.5rem) 3rem;
}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--ink-line);
}
.foot-grid h2{
  font-family:var(--caps);
  font-size:.85rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent-lift);
  margin:0 0 1rem;
  font-weight:600;
}
.foot-grid ul{margin:0;padding:0;list-style:none}
.foot-grid li{margin-bottom:.5rem}
.foot-grid a{
  color:var(--paper-dim);
  text-decoration:none;
  font-size:.95rem;
  transition:color .18s;
}
.foot-grid a:hover{color:var(--accent-bright)}
.foot-grid p{
  margin:0;
  font-size:.95rem;
  color:var(--paper-dim);
  line-height:1.55;
}
.colophon{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding-top:2rem;
  font-family:var(--caps);
  font-size:.88rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper-faint);
}
.colophon a{color:var(--paper-faint);text-decoration:none}
.colophon a:hover{color:var(--accent-lift)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   Additions for the multi-page archive. Everything above this
   line is the original single-page stylesheet, unchanged.
   ============================================================ */

/* ---------- generic page header (non-home pages) ---------- */

.pagehead{
  padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--ink-line);
  background:
    radial-gradient(48rem 20rem at 50% -4rem,rgba(198,59,36,.14),transparent 70%),
    var(--ink);
}
.pagehead .wrap{max-width:56rem;text-align:center}
.pagehead h1{
  font-size:clamp(2.1rem,1.4rem + 3vw,3.9rem);
  line-height:1.02;
  margin:.85rem 0 1.1rem;
}
.pagehead .lede{margin-bottom:1.75rem}

.crumbs{
  font-family:var(--caps);
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--paper-faint);
  margin:0 0 1.25rem;
}
.crumbs a{color:var(--paper-faint);text-decoration:none}
.crumbs a:hover{color:var(--accent-lift)}
.crumbs span{margin-inline:.5rem;opacity:.5}

.meta-line{
  font-family:var(--caps);
  font-size:.92rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper-faint);
  margin:1.5rem 0 0;
}
.meta-line b{color:var(--paper);font-weight:500}

/* ---------- prose ---------- */

.prose{max-width:var(--measure);margin-inline:auto}
.prose h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  line-height:1.15;
  letter-spacing:-.008em;
  margin:2.5rem 0 .9rem;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-family:var(--caps);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:2rem 0 .6rem;
}
.prose p{margin:0 0 1.15rem}
.prose ul{margin:0 0 1.4rem;padding-left:1.2rem}
.prose li{margin-bottom:.5rem;color:var(--paper-dim)}
.prose a{color:var(--accent-lift);text-decoration:underline;text-underline-offset:.2em}
.prose a:hover{color:var(--accent-bright)}
.prose > p{color:var(--paper-dim)}

/* ---------- story page ---------- */

.story-figure{
  max-width:44rem;
  margin:0 auto clamp(2rem,4vw,3rem);
  border:1px solid var(--accent-lift);
  background:var(--ink-raised);
  padding:.6rem;
}
.story-figure img{
  display:block;
  width:100%;
  height:auto;
  filter:grayscale(.25) contrast(1.04);
}
.story-figure figcaption{
  font-family:var(--caps);
  font-size:.82rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--paper-faint);
  text-align:center;
  padding:.9rem .5rem .3rem;
}

.pager{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid var(--ink-line);
  padding-top:2rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
.pager a{
  text-decoration:none;
  max-width:20rem;
  color:var(--paper-dim);
  transition:color .18s;
}
.pager a:hover{color:var(--accent-bright)}
.pager .dir{
  display:block;
  font-family:var(--caps);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent-lift);
  margin-bottom:.35rem;
}
.pager .who{
  font-family:var(--caps);
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pager .next{text-align:right;margin-left:auto}

/* ---------- person cards (cast / crew) ---------- */

.people{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:1px;
  background:var(--ink-line);
  border:1px solid var(--ink-line);
}
.person{
  background:var(--ink-raised);
  padding:clamp(1.75rem,3vw,2.4rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.person .portrait{margin-bottom:1.25rem}
.person .role{
  font-family:var(--caps);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-lift);
  margin:0 0 .55rem;
}
.person h3{
  font-family:var(--caps);
  font-weight:600;
  font-size:1.5rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin:0 0 .8rem;
}
.person .lead{margin:0 0 .9rem;color:var(--paper);font-size:1.02rem;line-height:1.55}
.person .bio{margin:0 0 1.2rem;color:var(--paper-dim);font-size:.97rem;line-height:1.6}
.person .tags{margin-bottom:0;margin-top:auto}

/* ---------- roster / credit lists ---------- */

.roster{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:1px;
  background:var(--ink-line);
  border:1px solid var(--ink-line);
  list-style:none;
  margin:0;
  padding:0;
}
.roster li{
  background:var(--ink-raised);
  padding:1.1rem 1rem;
  text-align:center;
  font-family:var(--caps);
  font-size:1.02rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.roster li.mark{color:var(--accent-lift);letter-spacing:.26em;font-weight:600}

.credits{
  max-width:44rem;
  margin-inline:auto;
  border-top:1px solid var(--ink-line);
}
.credits div{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem 2rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--ink-line);
}
.credits dt{
  font-family:var(--caps);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent-lift);
  margin:0;
}
.credits dd{
  margin:0;
  font-family:var(--caps);
  font-size:1.15rem;
  letter-spacing:.06em;
  text-align:right;
  flex:1 1 12rem;
}

/* ---------- notice / callout ---------- */

.notice{
  max-width:44rem;
  margin:0 auto clamp(2rem,4vw,3rem);
  border:1px solid rgba(198,59,36,.45);
  background:var(--accent-wash);
  padding:clamp(1.4rem,3vw,2rem);
  text-align:center;
}
.notice p{margin:0 0 .8rem;color:var(--paper-dim)}
.notice p:last-child{margin-bottom:0}
.notice .eyebrow{margin-bottom:.6rem}
.notice a{color:var(--accent-bright)}

/* ---------- simple link list ---------- */

.linklist{
  list-style:none;
  margin:0;
  padding:0;
  max-width:44rem;
  margin-inline:auto;
  border-top:1px solid var(--ink-line);
}
.linklist li{border-bottom:1px solid var(--ink-line)}
.linklist a{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.35rem 1.5rem;
  padding:1.15rem .25rem;
  text-decoration:none;
  transition:background .18s,padding-left .18s;
}
.linklist a:hover{background:rgba(221,91,70,.06);padding-left:.75rem}
.linklist .t{
  font-family:var(--caps);
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.linklist a:hover .t{color:var(--accent-bright)}
.linklist .d{color:var(--paper-faint);font-size:.95rem;flex:1 1 14rem;text-align:right}

/* ---------- 404 ---------- */

.oops{
  min-height:60vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding-block:clamp(3rem,8vw,6rem);
}
.oops h1{font-size:clamp(2.4rem,1.5rem + 4vw,4.5rem)}

/* ---------- misc ---------- */

.center{text-align:center}
.stack-actions{margin-top:2rem}
.band-tight{padding-block:clamp(2.5rem,5vw,3.5rem)}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.masthead nav a[aria-current="page"]{color:var(--accent-lift);border-bottom-color:var(--accent-lift)}

/* ============================================================
   Type tuning that survives the face change.

   The Playbill stack (Bodoni Moda + Oswald) was replaced by
   Zen Old Mincho + Noto Sans JP. The rules below are the ones
   that are about the BODY face or about structure, so they still
   hold. Everything specific to the old display and caps faces
   now lives in indigo.css, which loads after this file.
   ============================================================ */

h1,h2,.amount{
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
}

/* EB Garamond has a notably small x-height, so anything sized in
   absolute rem needs lifting. This is unchanged: the body face did
   not move. */
.person .lead{font-size:1.1rem}
.person .bio{font-size:1.04rem}
.cell p{font-size:1.04rem}
.tier p{font-size:1.03rem}
.entry-line{font-size:1.12rem}
.fineprint{font-size:.95rem}
.foot-grid p,.foot-grid a{font-size:1.02rem}
.linklist .d{font-size:1rem}

/* Amounts and dates read better aligned. */
.amount,.vitals dd{font-variant-numeric:tabular-nums}

/* ============================================================
   The touring show: city cards, trademark mark
   ============================================================ */

/* The trademark symbol. Small, raised, and hidden from screen readers in the
   wordmark, where it would otherwise be read aloud on every single page. */
.tm{
  font-size:.32em;
  font-family:var(--caps);
  font-weight:500;
  letter-spacing:0;
  vertical-align:super;
  line-height:1;
  margin-left:.12em;
  color:var(--accent-lift);
}
.mark .tm{font-size:.55em;vertical-align:super}

.trademark-line{
  max-width:none;
  padding-top:1.5rem;
  margin:1.5rem 0 0;
  border-top:1px solid var(--ink-line);
  color:var(--paper-faint);
}

/* ---------- performance film ---------- */

.video{
  max-width:52rem;
  margin:0 auto clamp(2rem,4vw,2.75rem);
}
.video-frame{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--accent-lift);
  background:
    radial-gradient(60% 70% at 50% 40%,rgba(198,59,36,.14),transparent 70%),
    var(--ink-raised);
  overflow:hidden;
}

/* Hidden until site.js runs. Without JavaScript the caption's "Watch on
   Vimeo" link is the whole interface, rather than a button that does
   nothing when pressed. */
.video-play{display:none}
.js-nav .video-play{
  display:flex;
  position:absolute;
  inset:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  width:100%;
  padding:1.5rem;
  background:transparent;
  border:0;
  color:var(--paper);
  cursor:pointer;
  text-align:center;
  transition:background .2s;
}
.js-nav .video-play:hover{background:rgba(221,91,70,.07)}

.video-play-icon{
  width:clamp(3.4rem,8vw,4.6rem);
  aspect-ratio:1;
  border:1px solid var(--accent-lift);
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
  transition:background .2s,transform .2s;
}
/* Triangle drawn with borders so no image or inline SVG is needed. */
.video-play-icon::after{
  content:"";
  width:0;
  height:0;
  margin-left:.28em;
  border-top:.62em solid transparent;
  border-bottom:.62em solid transparent;
  border-left:1.02em solid var(--accent-lift);
  font-size:clamp(1rem,2.2vw,1.25rem);
  transition:border-left-color .2s;
}
.video-play:hover .video-play-icon{
  background:var(--accent);
  transform:scale(1.04);
}
.video-play:hover .video-play-icon::after{border-left-color:var(--on-accent)}

.video-play-label{
  font-family:var(--caps);
  font-size:clamp(1rem,.9rem + .4vw,1.2rem);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-lift);
}
.video-play-note{
  font-family:var(--body);
  font-size:.92rem;
  line-height:1.5;
  color:var(--paper-faint);
  max-width:26rem;
}

.video-embed{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.video figcaption{
  font-family:var(--caps);
  font-size:.85rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper-faint);
  text-align:center;
  padding-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1rem;
  align-items:baseline;
  justify-content:center;
}
.video-fallback{color:var(--accent-lift);text-decoration:none;white-space:nowrap}
.video-fallback:hover{color:var(--accent-bright);text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  .video-play,.video-play-icon{transition:none}
  .video-play:hover .video-play-icon{transform:none}
}

@media(max-width:46rem){
  .video-play{padding:1.15rem}
  .video-play-note{font-size:.88rem}
}

@media print{
  .video-frame{display:none !important}
  .video figcaption{color:#333 !important;justify-content:flex-start}
  .video-fallback{color:#000 !important}
  .video-fallback::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ---------- city cards ---------- */

.cities{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:1px;
  background:var(--ink-line);
  border:1px solid var(--ink-line);
}
.city{
  background:var(--ink-raised);
  padding:clamp(1.75rem,3vw,2.4rem);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  text-decoration:none;
  transition:background .2s;
}
.city:hover{background:var(--ink-hover)}

.city-status{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--caps);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper-faint);
  border:1px solid var(--ink-line);
  padding:.25rem .7rem;
  margin-bottom:1.25rem;
}
.city-status::before{
  content:"";
  width:.4rem;
  height:.4rem;
  flex:none;
  transform:rotate(45deg);
  background:currentColor;
}
/* Status is carried by the label text as well as the colour, so the
   distinction does not depend on colour vision. */
.city-performed .city-status{color:var(--accent-lift);border-color:rgba(198,59,36,.5)}
.city-development .city-status{color:var(--paper-dim)}

.city-name{
  font-family:var(--caps);
  font-weight:500;
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.3rem);
  line-height:1.05;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--paper);
}
.city-state{
  font-family:var(--caps);
  font-size:.85rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent-lift);
  margin-top:.3rem;
}
.city-blurb{
  margin:1rem 0 1.4rem;
  color:var(--paper-dim);
  font-size:1.02rem;
  line-height:1.55;
}
.city .entry-go{margin-top:auto}
.city:hover .entry-go{background:var(--accent);color:var(--on-accent)}

@media(max-width:46rem){
  .city{padding:1.9rem 1.35rem}
  .city .entry-go{padding:.75rem 1.35rem}
}

@media print{
  .tm{color:#000 !important}
  .city{border:1px solid #bbb !important;background:none !important}
  .city-name,.city-state{color:#000 !important}
  .city-status{color:#555 !important;border-color:#bbb !important}
  .trademark-line{color:#333 !important;border-color:#bbb !important}
}

/* ============================================================
   Mobile
   ============================================================ */

/* Nothing should ever scroll sideways. If a long unbroken string does show up
   in content, it wraps instead of widening the page. */
html{overflow-x:hidden;scroll-behavior:smooth}
body{overflow-x:clip}
img,svg,video{max-width:100%}

/* The masthead is sticky, so in-page anchors would otherwise land underneath
   it. Reserve its height plus a little breathing room. */
html{scroll-padding-top:5.5rem}
[id]{scroll-margin-top:5.5rem}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* Notched phones: keep the fixed chrome and the page gutters clear of the
   rounded corners and the home indicator. */
.masthead .wrap{
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
footer{padding-bottom:max(3rem,env(safe-area-inset-bottom))}

/* Grey flash on tap reads as a bug on a dark site. */
a,button,summary{-webkit-tap-highlight-color:rgba(221,91,70,.2)}

/* ---------- navigation ---------- */

.nav-toggle{
  display:none;
  align-items:center;
  gap:.6rem;
  background:transparent;
  border:1px solid var(--ink-line);
  color:var(--paper);
  font-family:var(--caps);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:.65rem 1rem;
  min-height:44px;
  cursor:pointer;
  transition:border-color .18s,color .18s;
}
.nav-toggle:hover{border-color:var(--accent-lift);color:var(--accent-bright)}

.nav-bars{
  position:relative;
  display:block;
  width:1.15rem;
  height:2px;
  background:currentColor;
  transition:background .18s;
}
.nav-bars::before,
.nav-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:currentColor;
  transition:transform .2s ease;
}
.nav-bars::before{top:-6px}
.nav-bars::after{top:6px}

/* Open state turns the three bars into a cross. */
[data-open] .nav-bars{background:transparent}
[data-open] .nav-bars::before{transform:translateY(6px) rotate(45deg)}
[data-open] .nav-bars::after{transform:translateY(-6px) rotate(-45deg)}

@media(prefers-reduced-motion:reduce){
  .nav-bars,.nav-bars::before,.nav-bars::after{transition:none}
}

@media(max-width:52rem){
  /* Without JS this block never applies, because .js-nav is only added by the
     script. The nav then stays a wrapped row and every link remains tappable. */
  .js-nav .nav-toggle{display:inline-flex}

  .js-nav .masthead nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(18,17,16,.985);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--ink-line);
    padding:.25rem 0 .75rem;
    max-height:calc(100dvh - 4.5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .js-nav .masthead[data-open] nav{display:flex}

  .js-nav .masthead nav a{
    padding:1rem max(var(--gutter),env(safe-area-inset-left));
    border-bottom:1px solid var(--ink-line);
    border-top:0;
    font-size:1.05rem;
    letter-spacing:.2em;
    color:var(--paper);
  }
  .js-nav .masthead nav a:last-child{border-bottom:0}
  .js-nav .masthead nav a:hover,
  .js-nav .masthead nav a[aria-current="page"]{
    background:rgba(221,91,70,.08);
    color:var(--accent-bright);
  }
}

/* Nav stays a row above the breakpoint but may wrap on awkward widths. */
.masthead nav{flex-wrap:wrap}
.masthead .wrap{gap:1rem}

/* No-JS fallback at phone width.
   The menu button only appears once the script adds .js-nav, so without
   JavaScript this row is the navigation. Six items at full size wrapped into
   three tall rows and swallowed the viewport, so the fallback gets its own
   compact treatment: full width under the wordmark, smaller type, tight gaps.
   It is plainer than the disclosure menu, and it works. */
@media(max-width:52rem){
  html:not(.js-nav) .masthead .wrap{
    flex-wrap:wrap;
    gap:.5rem 0;
    padding-block:.75rem;
    min-height:0;
  }
  html:not(.js-nav) .masthead nav{
    flex-basis:100%;
    gap:.35rem 1.15rem;
    font-size:.82rem;
    letter-spacing:.12em;
    padding-top:.5rem;
    border-top:1px solid var(--ink-line);
  }
  html:not(.js-nav) .masthead nav a{padding-block:.3rem}
  html:not(.js-nav) .mark{font-size:.95rem}
  html:not(.js-nav) .mark span{font-size:.7rem;letter-spacing:.22em}
}

/* ---------- layout at phone width ---------- */

@media(max-width:46rem){
  /* Vitals as a two-up grid rather than a flex row that squeezes to one word
     per line. */
  .vitals{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem 1.5rem;
    text-align:left;
    justify-content:start;
  }
  .vitals div{padding-block:0}

  /* Full-width buttons are far easier to hit than centred pills. */
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{
    justify-content:center;
    width:100%;
    padding-block:.95rem;
  }

  /* Right-aligned secondary text reads as broken once rows wrap. */
  .linklist .d,
  .credits dd,
  .pager .next{text-align:left}
  .pager .next{margin-left:0}
  .pager{gap:1.75rem}
  .pager a{max-width:none}
  .linklist a{gap:.35rem}
  .linklist a:hover{padding-left:.25rem}
  .credits dd{flex-basis:100%}

  /* Tap targets. 44px is the floor. */
  .entry-go{padding:.75rem 1.35rem}
  .faq summary{padding-block:1.15rem}
  .foot-grid li{margin-bottom:.85rem}
  .foot-grid a{display:inline-block;padding-block:.2rem}
  .crumbs a{display:inline-block;padding-block:.25rem}

  /* Story entries: tighten the vertical rhythm so the list is scannable. */
  .entry{padding:2rem .25rem 1.9rem}
  .portrait{margin-bottom:1.15rem}

  .band-head{margin-bottom:2rem}
  .story-figure{padding:.45rem}
  .notice{padding:1.35rem 1.15rem}
  .person{padding:1.9rem 1.35rem}
  .tier{padding:1.75rem 1.35rem}
}

@media(max-width:30rem){
  .vitals{grid-template-columns:1fr}
  .roster{grid-template-columns:1fr}
  .colophon{flex-direction:column;gap:.5rem}
  .partners{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- story figures ---------- */

/* The room crops are between 134px and 254px wide. The figure is capped near
   natural size by an inline max-width on each page so they stay crisp, and the
   frame is centred rather than stretched. */
.story-figure{margin-inline:auto}
.story-figure img{
  image-rendering:auto;
  margin-inline:auto;
}

/* ============================================================
   Utility classes replacing former style="" attributes.

   These exist so the Content-Security-Policy can set
   style-src 'self' https://fonts.googleapis.com with no
   'unsafe-inline'. Adding a style attribute back to the markup
   would require loosening that policy site-wide, so don't.
   ============================================================ */

.mt-md{margin-top:1.25rem}
.mt-lg{margin-top:clamp(2rem,4vw,3rem)}
.band-head-sub{margin-top:clamp(2.5rem,5vw,3.5rem);margin-bottom:1.5rem}
.tiers-solo{max-width:24rem;margin-inline:auto}
.figure-qr{max-width:20rem}
.story-summary{font-size:1.2rem;color:var(--paper)}

/* ============================================================
   Print

   People print memorial programs and story pages to keep or to
   hand to someone who is not online. The dark palette is for
   screens; on paper it is ink on white, chrome removed, and
   link destinations spelled out so a printed page still works.
   ============================================================ */

@media print{
  html,body{
    background:#fff !important;
    color:#000 !important;
    font-size:11.5pt;
    line-height:1.5;
  }
  .masthead,.nav-toggle,#primary-nav,.skip,.actions,.pager,
  .partners,.foot-grid,.entry-go,.crumbs{display:none !important}

  .hero,.pagehead,.band{
    background:none !important;
    border:0 !important;
    padding-block:0 !important;
  }
  .hero-media{display:none !important}
  main{padding-top:0}

  h1,h2,h3,.entry-name,.person h2,.tier h2{color:#000 !important}
  .eyebrow,.eyebrow *{color:#555 !important}
  .lede,.entry-line,.person .lead,.person .bio,.prose p,.prose li,
  .notice p,.cell p,.meta-line{color:#111 !important}
  .meta-line b{color:#000 !important}

  .notice,.tier,.person,.roster li,.credits div,.story-figure{
    border-color:#bbb !important;
    background:none !important;
  }
  .tag{border-color:#bbb !important;color:#444 !important}
  .story-figure img{filter:none !important}

  /* A printed link is useless without its destination. Internal links get the
     site's own origin so the page can be followed from paper. */
  .prose a[href^="http"]::after,
  .notice a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:9pt;
    color:#555;
    word-break:break-all;
  }

  a{text-decoration:underline;color:#000 !important}
  h1,h2,h3{page-break-after:avoid}
  .person,.tier,.story-figure,figure{page-break-inside:avoid}
  .band{page-break-before:auto}
}

/* ============================================================
   Accent-fill corrections and Mincho type tuning.

   Loaded after the other stylesheets so it wins. Two jobs:
   fix the accent fills that a straight token swap gets wrong,
   and retune metrics for the display and caps faces.
   ============================================================ */

/* ---------- accent fills ----------
   --accent-lift is deliberately light so it clears 4.5:1 as TEXT on the
   ground. That makes it wrong as a FILL: a warm-white label on it does not
   reach 4.5:1. Anything filled uses the deeper --accent, where the same
   label clears comfortably.

   Rule of thumb: accent-lift for things you read, accent for things you
   read *on*. An earlier palette shipped this backwards and put 3.09:1
   labels on every primary button. Run build/palette.py if you touch either. */
.btn-primary,
.btn-primary:hover,
.entry:hover .entry-go,
.cell:hover .entry-go,
.city:hover .entry-go,
.linklist a:hover .entry-go,
.signup button{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
.btn-primary:hover,
.signup button:hover{
  background:var(--accent-lift);
  border-color:var(--accent-lift);
  color:var(--ink);
}
.video-play:hover .video-play-icon{background:var(--accent)}
.video-play:hover .video-play-icon::after{border-left-color:var(--on-accent)}

/* ---------- ceremonial second ----------
   In a near-monochrome scheme the ceremonial colour is a pearl-grey rather
   than a second hue: another colour here would undo the whole idea. It marks
   the few places where the meaning is ceremony rather than action. Everything
   interactive is the accent.

   NOTE: this is where the festival's inherited gold used to live. Sumi &
   pearl has no gold in it at all. If that thread needs keeping, a restrained
   brass such as #B08D57 clears 4.5:1 on this ground — change --second in
   base.css and re-run build/palette.py. */
.subtitle{color:var(--second)}
.tier .amount{color:var(--second)}
.roster li.mark{color:var(--second)}
.partners li.lead{
  background:rgba(154,149,140,.09);
  border:1px solid rgba(154,149,140,.4);
}
.partners li.lead:hover{background:rgba(154,149,140,.15)}
.partners li.lead .logo-fallback{color:var(--second)}
.mark span{color:var(--second)}
.tm{color:var(--second)}

/* ---------- Zen Old Mincho ----------
   A Mincho shares the Didone's high stroke contrast, which is why the
   swap holds the same character. It has no optical-size axis, so the
   opsz settings the previous face relied on are gone; "palt" tightens
   the proportional metrics instead. Mincho Latin does not want the
   negative tracking a Didone tolerates. */
h1,h2,.prose h2,.pagehead h1,.oops h1{
  font-feature-settings:"palt" 1;
  font-synthesis-weight:none;
}
h1{font-weight:400;letter-spacing:-.005em}
.hero h1{letter-spacing:0}
h2,.prose h2{font-weight:400;letter-spacing:0}
.tier .amount{font-weight:500;letter-spacing:-.01em}

/* ---------- Noto Sans JP ----------
   Oswald was condensed; Noto Sans JP is normal width, so every letter-spaced
   caps run got noticeably wider. The tracking comes down across the board and
   the big marquee sizes come down a step, or headings wrap where they used to
   fit. In exchange the face covers Japanese, Korean and Chinese alongside
   Latin, so a name in kanji or a Tagalog diacritic renders correctly instead
   of falling back to a mismatched font. */
.eyebrow{font-size:.82rem;letter-spacing:.2em;font-weight:600}
.masthead nav{gap:1.35rem;font-size:.88rem;letter-spacing:.12em}
.mark{font-size:.98rem;letter-spacing:.1em;font-weight:700}
.mark span{font-size:.72rem;letter-spacing:.2em}
.subtitle{font-size:clamp(.92rem,.82rem + .4vw,1.1rem);letter-spacing:.24em}
.status{font-size:.82rem;letter-spacing:.18em}
.hero-credit{font-size:.74rem;letter-spacing:.16em}

.entry-name{
  font-size:clamp(1.6rem,1.1rem + 2.2vw,2.5rem);
  letter-spacing:.02em;
  font-weight:500;
}
.entry-num{font-size:.78rem;letter-spacing:.24em}
.city-name{font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem);letter-spacing:.02em}
.city-state{font-size:.78rem;letter-spacing:.18em}
.city-status{font-size:.72rem;letter-spacing:.16em}

.btn,.nav-toggle{font-size:.88rem;letter-spacing:.14em}
.entry-go{font-size:.82rem;letter-spacing:.14em}
.tag{font-size:.75rem;letter-spacing:.14em}
.vitals{font-size:.98rem}
.vitals dt{font-size:.72rem;letter-spacing:.2em}
.person .role{font-size:.74rem;letter-spacing:.16em}
.person h3{font-size:1.25rem;letter-spacing:.04em;font-weight:500}
.credits dt{font-size:.76rem;letter-spacing:.18em}
.credits dd{font-size:1.05rem;letter-spacing:.02em}
.roster li{font-size:.95rem;letter-spacing:.08em}
.roster li.mark{letter-spacing:.18em}
.linklist .t{font-size:1.02rem;letter-spacing:.08em;font-weight:500}
.pager .dir{font-size:.74rem;letter-spacing:.2em}
.pager .who{font-size:1.05rem;letter-spacing:.04em;font-weight:500}
.crumbs{font-size:.78rem;letter-spacing:.14em}
.meta-line{font-size:.82rem;letter-spacing:.12em}
.story-figure figcaption{font-size:.74rem;letter-spacing:.14em}
.video figcaption{font-size:.78rem;letter-spacing:.12em}
.video-play-label{letter-spacing:.14em}
.faq summary{font-size:1.08rem;letter-spacing:.08em;font-weight:500}
.prose h3{font-size:1.05rem;letter-spacing:.1em;font-weight:500}
.cell h3{font-size:1.15rem;letter-spacing:.08em;font-weight:500}
.tier h2{font-size:1.1rem;letter-spacing:.08em;font-weight:500}
.foot-grid h2{font-size:.78rem;letter-spacing:.18em}
.colophon{font-size:.8rem;letter-spacing:.1em}
.skip{letter-spacing:.08em}

@media(max-width:52rem){
  .js-nav .masthead nav a{font-size:.95rem;letter-spacing:.12em}
  html:not(.js-nav) .masthead nav{font-size:.76rem;letter-spacing:.08em}
}

/* ---------- print ----------
   The accent and the ceremonial grey both flatten to ink on paper. */
@media print{
  .subtitle,.tier .amount,.roster li.mark,.mark span,.tm,
  .city-state,.video-play-label{color:#000 !important}
  .btn-primary,.entry-go{background:none !important;color:#000 !important}
  .partners li.lead{background:none !important;border-color:#bbb !important}
}

/* ============================================================
   Polish

   Everything here is progressive enhancement: a browser that
   does not support a feature simply renders the site as it did
   before. Nothing below is required for the site to work.
   ============================================================ */

/* ---------- font fallback metrics ----------
   The three webfonts load asynchronously, so text is first painted in a
   fallback and then reflows when the real face arrives. These faces make the
   local fallback occupy the same space as the webfont, so the swap is
   invisible instead of a jolt.

   The numbers are measured, not guessed: each face was rendered beside its
   webfont in a browser and the overrides tuned until advance width and
   ascent matched to 0.00%. Re-measure if a font changes — EB Garamond's
   values moved by five points between a first estimate and the real
   measurement, which is the difference between this working and not.

   ascent/descent are divided by size-adjust because the overrides apply to
   the already-scaled font. */

@font-face{
  font-family:"Mincho fallback";
  src:local("Georgia"),local("Times New Roman"),local("Times");
  size-adjust:101.25%;
  ascent-override:114.6%;
  descent-override:28.6%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Garamond fallback";
  src:local("Georgia"),local("Times New Roman"),local("Times");
  size-adjust:86.73%;
  ascent-override:116.5%;
  descent-override:34.6%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Sans JP fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  size-adjust:103.83%;
  ascent-override:111.7%;
  descent-override:27.9%;
  line-gap-override:0%;
}

/* ---------- cross-document view transitions ----------
   Navigating between pages animates instead of hard-cutting. The masthead and
   footer are named, so they hold still while the page content changes rather
   than cross-fading with everything else — which is what makes it read as one
   continuous surface rather than a slideshow.

   Unsupported browsers navigate normally. */
@view-transition{navigation:auto}

.masthead{view-transition-name:masthead}
footer{view-transition-name:sitefooter}

::view-transition-old(root),
::view-transition-new(root){animation-duration:.26s}

/* ---------- typographic wrapping ----------
   balance stops a heading dropping a single orphan word onto its own line,
   which is the thing that makes a headline look accidental. pretty does the
   same for the last line of a paragraph. */
h1,h2,h3,
.entry-name,.city-name,.pager .who,.linklist .t,
.band-head p,.lede{text-wrap:balance}

p,li,dd,figcaption,.person .bio,.city-blurb{text-wrap:pretty}

/* ---------- render only what is on screen ----------
   The home page carries fifteen story entries and twenty-five partner tiles;
   the cast page carries ten portrait cards. Skipping layout and paint for the
   parts nobody is looking at yet is free.

   contain-intrinsic-size uses the auto keyword so the browser remembers each
   section's real height after first render and the scrollbar stops jumping. */
.band{
  content-visibility:auto;
  contain-intrinsic-size:auto 40rem;
}

/* content-visibility hides off-screen content from the printer too, which
   would silently produce a mostly blank page. */
@media print{
  .band{content-visibility:visible}
}

/* ---------- selection and scrollbar ----------
   Small, but they are the sort of thing that reads as unfinished when the
   browser default shows through on a dark site. */
::selection{
  background:var(--accent);
  color:var(--on-accent);
  text-shadow:none;
}
html{scrollbar-color:var(--accent) var(--ink-raised)}

/* ---------- reduced motion ----------
   A view transition is motion. Anyone who has asked for less of it gets an
   instant navigation instead. */
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

/* Generated: story figure caps, 1.5x the intrinsic width of each
   room crop. See ROOM_SIZE in data.py. */
.fig-clarance{max-width:301px}
.fig-emma{max-width:273px}
.fig-family{max-width:250px}
.fig-gina{max-width:393px}
.fig-haroldalmakids{max-width:240px}
.fig-mere{max-width:294px}
.fig-nakarafamily{max-width:258px}
.fig-nakatauncle{max-width:244px}
.fig-oldwoman{max-width:306px}
.fig-samestud{max-width:249px}
.fig-samwife{max-width:235px}
.fig-stephbaby{max-width:213px}
.fig-stephlola{max-width:241px}
.fig-tc{max-width:373px}
.fig-woman{max-width:261px}