/* Marsha Familaro Enright — design system.
   Ported verbatim from website-concepts/site/v2/b/index.html (Option B,
   'Dark-to-Light'), the client-approved concept. Two registers: CINEMA (ink)
   and PAGE (ivory). Do not restyle without checking against that source. */
/* ============================================================
   CINEMA & PAGE — two registers, one system.
   CINEMA  : ink field, monochrome portrait, the connections.
   PAGE    : ivory field, generous measure, everything you read.
   ============================================================ */
:root{
  --ink:#14130f;
  --ink-2:#1b1a15;
  --ivory:#f6f1e6;
  --ivory-2:#efe9db;
  --brass:#a8843f;
  --brass-lt:#c9a765;
  --brass-dk:#7e5f26;
  --oxblood:#7d2b2f;

  --on-ink:#f6f1e6;
  --on-ink-dim:rgba(246,241,230,.68);
  --on-ink-faint:rgba(246,241,230,.52);
  --rule-dark:rgba(246,241,230,.14);

  --on-ivory:#14130f;
  --on-ivory-dim:#5c574c;
  --on-ivory-faint:#6f6a5d;
  --rule-light:rgba(20,19,15,.16);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --ui:'Source Sans 3','Source Sans 3 fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --gut:clamp(22px,5vw,72px);
  --maxw:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);
  color:var(--on-ink);
  font-family:var(--ui);
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(168,132,63,.32)}
:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:1000px}

/* ---------- shared type ---------- */
.kicker{
  font-family:var(--ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--brass-lt);
  display:flex;align-items:center;gap:14px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--brass);flex:none}
.page .kicker{color:var(--brass-dk)}
.page .kicker::before{background:var(--brass-dk);opacity:.7}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.005em;line-height:1.1}
.h-sec{font-size:clamp(30px,3.6vw,50px);line-height:1.08;margin-top:16px;max-width:20ch}
.lede{font-size:clamp(17px,1.35vw,19px);line-height:1.6;max-width:60ch}

.btn{
  display:inline-block;
  font-family:var(--ui);
  font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  padding:15px 30px;
  border:1px solid var(--brass);
  color:var(--brass-lt);
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn:hover{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.btn.fill{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn.fill:hover{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--ink)}
.page .btn{border-color:var(--brass-dk);color:var(--brass-dk)}
.page .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.page .btn.fill{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.page .btn.fill:hover{background:var(--oxblood);border-color:var(--oxblood);color:var(--ivory)}

.txtlink{
  font-family:var(--ui);
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-lt);
  border-bottom:1px solid rgba(201,167,101,.4);
  padding-bottom:3px;
  transition:color .3s ease,border-color .3s ease;
  display:inline-block;
}
.txtlink:hover{color:var(--ivory);border-color:var(--ivory)}
.page .txtlink{color:var(--oxblood);border-bottom-color:rgba(125,43,47,.35)}
.page .txtlink:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- reveals ---------- */
.rv{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(22px);
    transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv.d1{transition-delay:.1s}
  .js .rv.d2{transition-delay:.2s}
  .js .rv.d3{transition-delay:.3s}
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .5s ease,border-color .5s ease,color .5s ease;
  border-bottom:1px solid transparent;
}
.hdr-in{
  max-width:var(--maxw);margin:0 auto;
  padding:18px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{
  font-family:var(--display);
  font-size:15px;letter-spacing:.04em;
  color:var(--on-ink);
  white-space:nowrap;
  transition:color .5s ease;
}
.brand em{font-style:italic;color:var(--brass-lt);transition:color .5s ease}
.nav{display:flex;gap:clamp(14px,2.1vw,30px)}
.nav a{
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-dim);
  transition:color .3s ease;
  padding:4px 0;
}
.nav a:hover{color:var(--brass-lt)}
body.scrolled .hdr{background:rgba(20,19,15,.86);backdrop-filter:blur(9px);border-bottom-color:var(--rule-dark)}
body.hdr-page .hdr{background:rgba(246,241,230,.92);backdrop-filter:blur(9px);border-bottom-color:var(--rule-light)}
body.hdr-page .brand{color:var(--on-ivory)}
body.hdr-page .brand em{color:var(--brass-dk)}
body.hdr-page .nav a{color:var(--on-ivory-dim)}
body.hdr-page .nav a:hover{color:var(--oxblood)}
body.hdr-page .menu-btn{color:var(--on-ivory)}
body.hdr-page .menu-btn .bars::before,body.hdr-page .menu-btn .bars::after{background:var(--on-ivory)}

.menu-btn{
  display:none;background:none;border:0;cursor:pointer;
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-ink);
  align-items:center;gap:11px;padding:6px 0;
}
.menu-btn .bars{display:inline-block;width:20px;height:9px;position:relative}
.menu-btn .bars::before,.menu-btn .bars::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--on-ink);
  transition:transform .4s ease,top .4s ease,bottom .4s ease,background .5s ease;
}
.menu-btn .bars::before{top:0}
.menu-btn .bars::after{bottom:0}
body.nav-open .menu-btn .bars::before{top:4px;transform:rotate(45deg)}
body.nav-open .menu-btn .bars::after{bottom:4px;transform:rotate(-45deg)}
body.nav-open .menu-btn,body.nav-open .brand{color:var(--on-ink)}
body.nav-open .menu-btn .bars::before,body.nav-open .menu-btn .bars::after{background:var(--on-ink)}

.overlay{
  position:fixed;inset:0;z-index:70;
  background:rgba(20,19,15,.975);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s;
}
@media (prefers-reduced-motion:reduce){.overlay{transition:none}}
body.nav-open .overlay{opacity:1;visibility:visible;transition:opacity .45s ease}
body.nav-open{overflow:hidden}
.overlay ul{list-style:none;text-align:center}
.overlay li{margin:clamp(8px,2.2vh,18px) 0}
.overlay a{font-family:var(--display);font-size:clamp(26px,7vw,40px);color:var(--on-ink)}
.overlay a:hover{color:var(--brass-lt)}
.overlay .ov-note{
  margin-top:clamp(20px,5vh,42px);text-align:center;
  font-family:var(--display);font-style:italic;font-size:16px;color:var(--brass-lt);
}

/* ============================================================
   CINEMA — hero
   ============================================================ */
.cinema{background:var(--ink);color:var(--on-ink)}
.hero{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:clamp(34px,6vw,110px);
  align-items:center;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(104px,15vh,150px) var(--gut) clamp(56px,10vh,110px);
}
.hero-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass-lt);
  display:flex;align-items:center;gap:14px;
}
.hero-eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);flex:none}
.hero h1{
  margin-top:clamp(20px,3vh,30px);
  font-size:clamp(37px,5.3vw,74px);
  line-height:1.04;
  max-width:14ch;
  font-weight:400;
}
.hero-rule{width:64px;height:1px;background:var(--brass);margin:clamp(22px,3.4vh,34px) 0}
.tagline{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(23px,2.7vw,39px);
  line-height:1.22;
  color:var(--ivory);
  max-width:19ch;
}
.hero-dek{
  margin-top:clamp(16px,2.4vh,24px);
  color:var(--on-ink-dim);
  max-width:47ch;
  font-size:clamp(15.5px,1.15vw,17.5px);
  font-weight:300;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vh,40px)}

/* portrait plate — grayscale only, brass keyline */
.plate-hold{position:relative}
.plate{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--ink-2);
}
.plate img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 26%;
  filter:grayscale(1) contrast(1.07) brightness(.83);
}
.plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,19,15,.42),rgba(20,19,15,0) 46%);
  pointer-events:none;
}
.plate-hold::after{
  content:"";position:absolute;inset:-15px;
  border:1px solid rgba(168,132,63,.5);
  pointer-events:none;
}
.plate-cap{
  margin-top:30px;
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--on-ink-faint);
}
.plate-cap span{color:var(--brass-lt)}

@media (prefers-reduced-motion:no-preference){
  .js .hero-eyebrow,.js .hero h1,.js .hero-rule,.js .tagline,
  .js .hero-dek,.js .hero-ctas,.js .plate-hold,.js .plate-cap{
    opacity:0;transform:translateY(20px);
    animation:heroIn 1.25s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .js .hero h1{animation-delay:.08s}
  .js .hero-rule{animation-delay:.18s}
  .js .tagline{animation-delay:.26s}
  .js .hero-dek{animation-delay:.36s}
  .js .hero-ctas{animation-delay:.46s}
  .js .plate-hold{animation-delay:.2s}
  .js .plate-cap{animation-delay:.5s}
  @keyframes heroIn{to{opacity:1;transform:none}}
}

/* ============================================================
   CINEMA — the connections
   ============================================================ */
.connect{
  background:var(--ink);
  border-top:1px solid var(--rule-dark);
  padding:clamp(78px,13vh,140px) 0 clamp(60px,10vh,110px);
}
.connect-head{max-width:64ch}
.connect-head p.body{
  margin-top:22px;color:var(--on-ink-dim);font-weight:300;
  font-size:clamp(16px,1.25vw,18.5px);max-width:58ch;
}
.dia-hold{margin-top:clamp(16px,2.6vh,32px)}
.dia{width:100%;height:auto;display:block;max-width:1080px;margin:0 auto}
.dia .dl{font-family:var(--display);font-size:17px;letter-spacing:.03em;fill:var(--ivory);font-weight:400}
.dia .dn{font-family:var(--ui);font-size:11px;letter-spacing:.14em;fill:var(--brass);font-weight:600}
.dia-mob{display:none}
.dia-legend{display:none}
@media (prefers-reduced-motion:no-preference){
  .js .chord{stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
  .js .dia-hold.in .chord{stroke-dashoffset:0}
  .js .dia-hold .dnode,.js .dia-hold .dl,.js .dia-hold .dn{opacity:0;transition:opacity .9s ease .35s}
  .js .dia-hold.in .dnode,.js .dia-hold.in .dl,.js .dia-hold.in .dn{opacity:1}
}
.connect-foot{
  margin-top:clamp(30px,5vh,52px);
  display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;justify-content:space-between;
}
.connect-foot p{color:var(--on-ink-faint);font-size:14px;max-width:52ch}

/* ============================================================
   THE TURN — cinema hands over to page
   ============================================================ */
.page{background:var(--ivory);color:var(--on-ivory)}
.page a{color:inherit}
.turn{
  position:relative;
  padding:clamp(84px,15vh,170px) 0 clamp(62px,10vh,110px);
}
.turn::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--brass)}
@media (prefers-reduced-motion:no-preference){
  /* The wipe MUST live on an inner element, never on .turn itself: a clip-path that
     collapses the observed element to zero height also zeroes its intersection rect,
     so IntersectionObserver never fires and the section stays hidden permanently. */
  .js .turn > .wrap{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.16,.84,.44,1)}
  .js .turn.in > .wrap{clip-path:inset(0 0 0 0)}
}
.turn-lede{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(25px,3.3vw,45px);
  line-height:1.24;
  max-width:21ch;
  margin-top:18px;
}
.turn-lede em{font-style:italic;color:var(--oxblood)}

/* about */
.about-grid{
  margin-top:clamp(46px,7vh,80px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,500px);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.about-body p{
  color:var(--on-ivory-dim);
  font-weight:300;
  font-size:clamp(16px,1.2vw,18px);
  max-width:56ch;
  margin-bottom:20px;
}
.about-body p strong{color:var(--on-ivory);font-weight:600}
.about-figure figure{margin:0}
.about-figure .ph{aspect-ratio:4/5;overflow:hidden;background:var(--ivory-2)}
.about-figure img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.about-figure figcaption{
  margin-top:14px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ivory-faint);
}
.about-facts{
  list-style:none;margin:clamp(28px,4vh,40px) 0 0;
  border-top:1px solid var(--rule-light);
}
.about-facts li{
  border-bottom:1px solid var(--rule-light);
  padding:13px 0;
  display:grid;grid-template-columns:132px 1fr;gap:10px 22px;
  font-size:15.5px;color:var(--on-ivory-dim);font-weight:300;
}
.about-facts li b{
  font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-dk);padding-top:4px;
}

/* ============================================================
   PAGE — the writing
   ============================================================ */
.sec{padding:clamp(70px,11vh,130px) 0;border-top:1px solid var(--rule-light)}
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(34px,5vh,58px);
}
.sec-head .h-sec{margin-top:14px}
.sec-note{font-size:13.5px;color:var(--on-ivory-faint);max-width:34ch;font-weight:300}

.feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(24px,4vw,60px);
  align-items:end;
  padding-bottom:clamp(34px,5vh,52px);
  border-bottom:1px solid var(--rule-light);
}
.feature .fmeta{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-dk);margin-bottom:16px;
}
.feature h3{font-size:clamp(27px,3.3vw,44px);line-height:1.12;max-width:19ch}
.feature h3 a{transition:color .3s ease}
.feature h3 a:hover{color:var(--oxblood)}
.feature p{
  margin-top:20px;color:var(--on-ivory-dim);font-weight:300;
  max-width:58ch;font-size:clamp(16px,1.2vw,18px);
}
.feature .fside{padding-bottom:6px}
.feature .fside p{
  margin:0 0 18px;font-size:14px;color:var(--on-ivory-faint);max-width:30ch;
}

.essays{list-style:none;margin-top:8px}
.essays li{border-bottom:1px solid var(--rule-light)}
.essays a{
  display:grid;grid-template-columns:76px minmax(0,1fr) auto;
  gap:8px 26px;align-items:baseline;
  padding:19px 4px;
  transition:background .3s ease,padding-left .3s ease;
}
.essays a:hover{background:rgba(20,19,15,.035);padding-left:12px}
.essays .yr{
  font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--brass-dk);
}
.essays .ttl{font-family:var(--display);font-size:clamp(18px,1.6vw,23px);line-height:1.3}
.essays .tag{
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ivory-faint);white-space:nowrap;
}
.sec-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center}

/* ============================================================
   PAGE — topic hubs, presented as one body
   ============================================================ */
.hubs{list-style:none;border-top:1px solid var(--rule-light)}
.hubs li{border-bottom:1px solid var(--rule-light)}
.hub{
  display:grid;grid-template-columns:70px minmax(0,1fr) auto;
  gap:10px 26px;align-items:start;
  padding:26px 4px;
  transition:background .3s ease;
}
.hub:hover{background:rgba(20,19,15,.035)}
.hub-num{
  font-family:var(--display);font-style:italic;font-size:20px;
  color:var(--brass-dk);padding-top:2px;
}
.hub-name{
  display:block;font-family:var(--display);
  font-size:clamp(20px,1.9vw,27px);line-height:1.2;
}
.hub-desc{
  display:block;margin-top:10px;color:var(--on-ivory-dim);
  font-weight:300;font-size:15.5px;max-width:62ch;
}
.hub-thread{
  display:block;margin-top:12px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-dk);
}
.hub-thread i{font-style:normal;color:var(--on-ivory-faint);margin-right:8px}
.hub-go{
  font-family:var(--display);font-size:20px;color:var(--on-ivory-faint);
  padding-top:4px;transition:transform .3s ease,color .3s ease;
}
.hub:hover .hub-go{color:var(--oxblood);transform:translateX(5px)}

/* ============================================================
   PAGE — featured interviews
   ============================================================ */
.films{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,34px);
}
.film{
  display:flex;flex-direction:column;
  background:var(--ivory-2);
  border:1px solid var(--rule-light);
  padding:clamp(24px,2.6vw,36px);
  min-height:290px;
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.film:hover{background:#e8e0cd;border-color:rgba(20,19,15,.3);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.film:hover{transform:none}}
.film .fnum{
  font-family:var(--display);font-style:italic;font-size:17px;color:var(--brass-dk);
  margin-bottom:auto;
}
.film .fshow{
  margin-top:34px;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-ivory-faint);
}
.film h3{
  margin-top:14px;
  font-size:clamp(21px,1.9vw,27px);line-height:1.22;
}
.film .fgo{
  margin-top:26px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oxblood);
}
.more-media{
  margin-top:clamp(38px,6vh,64px);
  border-top:1px solid var(--rule-light);
  padding-top:28px;
}
.more-media h4{
  font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-ivory-faint);margin-bottom:8px;
}
.mlist{
  list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:0 clamp(24px,4vw,56px);
}
.mlist li{border-bottom:1px solid var(--rule-light)}
.mlist a,.mlist .row{
  display:flex;align-items:baseline;gap:14px;justify-content:space-between;
  padding:14px 2px;transition:color .3s ease,padding-left .3s ease;
}
.mlist a:hover{color:var(--oxblood);padding-left:8px}
.mlist .mname{font-family:var(--display);font-size:17.5px;line-height:1.35}
.mlist .mnote{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ivory-faint);text-align:right;
}
/* The grid puts three ~340px cards per row at desktop width, but several notes
   are intrinsically 370-480px wide. With nowrap they refused to shrink and
   spilled into the neighbouring card (measured overlap up to 75px). Flex items
   default to min-width:auto, so the shrink has to be unlocked explicitly. */
.mlist a,.mlist .row,.mlist .mname,.mlist .mnote{min-width:0}
.mlist .mnote{flex:1 1 auto;white-space:normal;overflow-wrap:anywhere}

/* ============================================================
   PAGE — Reliance College
   ============================================================ */
.prog-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,5vw,80px);align-items:start;
}
.prog-intro p{
  color:var(--on-ivory-dim);font-weight:300;
  font-size:clamp(16px,1.2vw,18px);max-width:44ch;
}
.prog-intro .btn{margin-top:28px}
.programs{list-style:none;border-top:1px solid var(--rule-light)}
.programs li{
  border-bottom:1px solid var(--rule-light);
  padding:20px 2px;
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px 18px;
}
.programs li::before{
  content:"";width:7px;height:7px;margin-top:9px;
  background:var(--brass);transform:rotate(45deg);
}
.programs b{font-family:var(--display);font-weight:400;font-size:20px;display:block;line-height:1.3}
.programs span{display:block;margin-top:5px;color:var(--on-ivory-dim);font-size:15px;font-weight:300}
.programs a.plink{color:var(--oxblood);border-bottom:1px solid rgba(125,43,47,.35)}
.programs a.plink:hover{border-bottom-color:var(--oxblood)}

/* ============================================================
   PAGE — photographs (natural warm colour)
   ============================================================ */
.photos{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.8vw,26px);
}
.photos figure{margin:0}
.photos img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.03);
}
.photos .ph-frame{overflow:hidden;background:var(--ivory-2)}
.photos figcaption{
  margin-top:11px;
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-ivory-faint);
}
.ph-a{grid-column:span 4}
.ph-a .ph-frame{aspect-ratio:3/2}
.ph-b{grid-column:span 2}
.ph-b .ph-frame{aspect-ratio:4/5}
.ph-b img{object-position:25% 50%}
.ph-c{grid-column:span 2}
.ph-c .ph-frame{aspect-ratio:1/1}
.ph-d{grid-column:span 2}
.ph-d .ph-frame{aspect-ratio:1/1}
.ph-e{grid-column:span 2}
.ph-e .ph-frame{aspect-ratio:1/1}
.photo-note{
  margin-top:26px;font-size:13.5px;color:var(--on-ivory-faint);
  font-weight:300;max-width:58ch;
}

/* ============================================================
   CINEMA — closing chapter
   ============================================================ */
.speak{
  background:var(--ink);color:var(--on-ink);
  padding:clamp(84px,15vh,165px) 0;
  position:relative;
}
.speak::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--brass)}
.speak-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(28px,5vw,80px);align-items:end;
}
.speak h2{font-size:clamp(30px,4vw,54px);line-height:1.08;max-width:16ch}
.speak p{
  margin-top:22px;color:var(--on-ink-dim);font-weight:300;
  max-width:52ch;font-size:clamp(16px,1.2vw,18px);
}
.speak .sk-side{padding-bottom:8px}
.speak .sk-side p{margin:0 0 22px;font-size:14px;color:var(--on-ink-faint);max-width:34ch}

.email{
  background:var(--ink-2);color:var(--on-ink);
  border-top:1px solid var(--rule-dark);
  padding:clamp(74px,12vh,130px) 0;
  text-align:center;
}
.email .kicker{justify-content:center}
.email h2{font-size:clamp(26px,3.2vw,42px);margin:18px auto 14px;max-width:20ch}
.email p.sub{color:var(--on-ink-dim);max-width:46ch;margin:0 auto 34px;font-weight:300}
.nl{
  display:flex;max-width:460px;margin:0 auto;
  border-bottom:1px solid rgba(246,241,230,.34);
}
.nl input{
  flex:1;min-width:0;background:none;border:0;color:var(--on-ink);
  font-family:var(--ui);font-size:16px;font-weight:300;padding:14px 4px;
}
.nl input::placeholder{color:var(--on-ink-faint)}
.nl button{
  background:none;border:0;cursor:pointer;
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-lt);padding:14px 4px 14px 20px;
  transition:color .3s ease;
}
.nl button:hover{color:var(--ivory)}
.email .fine{margin-top:20px;font-size:12.5px;color:var(--on-ink-faint)}

footer{background:var(--ink);border-top:1px solid var(--rule-dark);padding:40px 0 108px}
.foot{
  display:flex;flex-wrap:wrap;gap:18px 40px;
  align-items:baseline;justify-content:space-between;
  font-size:12.5px;color:var(--on-ink-faint);
}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 24px}
.foot nav a{letter-spacing:.1em;transition:color .3s ease}
.foot nav a:hover{color:var(--ivory)}
.foot .soc{display:flex;gap:20px}
.foot .credit{flex-basis:100%}
.foot .credit a{text-decoration:underline;text-underline-offset:3px;transition:color .3s ease}
.foot .credit a:hover{color:var(--ivory)}

/* ---------- motion opt-out ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
    animation-duration:.01ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
  .hub:hover .hub-go{transform:none}
  .essays a:hover,.mlist a:hover{padding-left:0}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .about-grid{grid-template-columns:1fr}
  .about-figure{max-width:400px}
  .prog-grid{grid-template-columns:1fr}
  .speak-grid{grid-template-columns:1fr;align-items:start}
  .speak .sk-side{padding-bottom:0}
  .films{grid-template-columns:1fr}
  .film{min-height:0}
  .film .fnum{margin-bottom:20px}
  .film .fshow{margin-top:0}
}
@media (max-width:960px){
  .hero{grid-template-columns:1fr;align-items:start;gap:clamp(28px,4vh,46px)}
  .plate-hold{max-width:290px}
  .feature{grid-template-columns:1fr;align-items:start}
  .feature .fside{padding-bottom:0}
}
@media (max-width:860px){
  .nav{display:none}
  .menu-btn{display:flex}
}
@media (max-width:760px){
  .sec-head{display:block}
  .sec-note{max-width:50ch;margin-top:14px}
  .feature .fside p,.speak .sk-side p{max-width:50ch}
  .connect-foot p{max-width:none}
  .dia{display:none}
  .dia-mob{display:block;width:100%;max-width:400px;margin:0 auto;height:auto}
  .dia-legend{
    display:grid;grid-template-columns:1fr;gap:0;
    list-style:none;margin:30px auto 0;max-width:420px;
    border-top:1px solid var(--rule-dark);
  }
  .dia-legend li{border-bottom:1px solid var(--rule-dark)}
  .dia-legend a{
    display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:baseline;
    padding:13px 2px;
  }
  .dia-legend .lnum{font-family:var(--display);font-style:italic;color:var(--brass-lt);font-size:15px}
  .dia-legend .lname{font-family:var(--display);font-size:17px;line-height:1.3}
}
@media (max-width:640px){
  body{font-size:16px}
  .btn{padding:14px 18px;letter-spacing:.16em;font-size:11px}
  .hero{padding:clamp(80px,10.5vh,120px) var(--gut) clamp(40px,6vh,110px)}
  .hero h1{margin-top:18px}
  .hero-rule{margin:20px 0}
  .hero-ctas{gap:8px;margin-top:clamp(22px,3vh,40px)}
  .plate-hold{max-width:200px}
  .plate-hold::after{inset:-10px}
  .plate-cap{margin-top:20px;letter-spacing:.18em}
  .essays a{grid-template-columns:66px minmax(0,1fr)}
  .essays .tag{grid-column:2;white-space:normal}
  .hub{grid-template-columns:44px minmax(0,1fr);gap:8px 16px}
  .hub-go{display:none}
  .about-facts li{grid-template-columns:1fr;gap:3px}
  .about-facts li b{padding-top:0}
  .photos{grid-template-columns:repeat(2,1fr)}
  .ph-a{grid-column:span 2}
  .ph-b,.ph-c,.ph-d,.ph-e{grid-column:span 1}
  .ph-b .ph-frame,.ph-c .ph-frame,.ph-d .ph-frame,.ph-e .ph-frame{aspect-ratio:1/1}
  .mlist a{flex-direction:column;gap:4px;align-items:flex-start}
  .mlist .mnote{text-align:left}
  .nl{flex-direction:column;border-bottom:0}
  .nl input{border-bottom:1px solid rgba(246,241,230,.34);text-align:center}
  .nl button{padding:16px 0 0}
  .foot{flex-direction:column;gap:18px}
}

/* ============================================================
   INTERIOR PAGES — P3
   Everything below extends the Option B system above. New rules only:
   no value from the concept is redefined, and every colour, typeface and
   rhythm is drawn from the :root tokens already declared.
   ============================================================ */

/* Interior pages live entirely in the PAGE register, so the body itself
   carries the ivory field rather than a .page wrapper mid-scroll. */
body.interior{background:var(--ivory);color:var(--on-ivory)}
body.interior .hdr{background:rgba(246,241,230,.92);backdrop-filter:blur(9px);
  border-bottom-color:var(--rule-light)}
body.interior .brand{color:var(--on-ivory)}
body.interior .brand em{color:var(--brass-dk)}
body.interior .nav a{color:var(--on-ivory-dim)}
body.interior .nav a:hover{color:var(--oxblood)}
body.interior .nav a[aria-current="page"]{color:var(--oxblood)}
body.interior .menu-btn{color:var(--on-ivory)}
body.interior .menu-btn .bars::before,body.interior .menu-btn .bars::after{background:var(--on-ivory)}
body.interior.nav-open .menu-btn,body.interior.nav-open .brand{color:var(--on-ink)}
body.interior.nav-open .menu-btn .bars::before,
body.interior.nav-open .menu-btn .bars::after{background:var(--on-ink)}

/* ---------- page head ---------- */
.pagehead{padding:clamp(118px,17vh,180px) 0 clamp(34px,5vh,56px)}
.pagehead h1{font-size:clamp(34px,4.6vw,62px);line-height:1.06;max-width:17ch;margin-top:16px}
.pagehead .lede{margin-top:22px;color:var(--on-ivory-dim);font-weight:300;
  font-size:clamp(16px,1.2vw,18.5px);max-width:56ch}
.pagehead-grid{display:grid;grid-template-columns:minmax(0,1fr) 160px;
  gap:clamp(24px,4vw,60px);align-items:start}
.hub-mark{width:160px;height:160px;display:block}
.crumb{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-ivory-faint);margin-bottom:20px}
.crumb a{color:var(--brass-dk)}
.crumb a:hover{color:var(--oxblood)}

/* ---------- archive ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:8px 10px;padding:22px 0 6px;
  border-top:1px solid var(--rule-light)}
.filterbar .fb-lbl{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-ivory-faint);width:100%;margin-bottom:4px}
.chip{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:9px 15px;border:1px solid var(--rule-light);
  color:var(--on-ivory-dim);background:none;cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.chip:hover{border-color:var(--brass-dk);color:var(--brass-dk)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.chip .chip-n{opacity:.55;margin-left:7px;font-weight:500}

.arch-group{margin-top:clamp(40px,6vh,64px)}
.arch-group > h2{font-size:clamp(22px,2.2vw,30px);line-height:1.15;
  padding-bottom:14px;border-bottom:1px solid var(--brass-dk)}
.arch-group .grp-note{margin-top:12px;font-size:13.5px;color:var(--on-ivory-faint);
  font-weight:300;max-width:58ch}
.arch{list-style:none;margin-top:6px}
.arch li{border-bottom:1px solid var(--rule-light)}
.arch a{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:8px 26px;
  align-items:baseline;padding:19px 4px;transition:background .3s ease,padding-left .3s ease}
.arch a:hover{background:rgba(20,19,15,.035);padding-left:12px}
.arch .yr{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--brass-dk)}
.arch .ttl{font-family:var(--display);font-size:clamp(18px,1.6vw,23px);line-height:1.3}
.arch .meta{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ivory-faint);white-space:nowrap;text-align:right}
.arch .out{color:var(--oxblood)}
.arch .sec-mark{display:inline-block;margin-left:10px;font-family:var(--display);
  font-style:italic;font-size:15px;color:var(--brass-dk);letter-spacing:0;text-transform:none}
.arch-empty{padding:40px 4px;color:var(--on-ivory-faint);font-weight:300}
.arch-count{margin-top:26px;font-size:13.5px;color:var(--on-ivory-faint);font-weight:300}

/* Secondary-hub rows sit lighter than primaries, so a hub page reads as
   "these are mine" followed by "these run through me". */
.arch li.is-secondary .ttl{color:var(--on-ivory-dim)}
.arch li.is-secondary .yr{color:var(--on-ivory-faint)}
.also-divider{display:flex;align-items:center;gap:16px;
  margin:clamp(38px,6vh,58px) 0 4px;color:var(--on-ivory-faint)}
.also-divider span{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap}
.also-divider::before,.also-divider::after{content:"";height:1px;background:var(--rule-light);flex:1}

/* ---------- essay ---------- */
.essay-head{padding:clamp(118px,17vh,180px) 0 0}
.essay-head h1{font-size:clamp(30px,4vw,52px);line-height:1.1;max-width:20ch;margin-top:16px}
.essay-meta{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule-light);
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ivory-faint)}
.essay-meta .tagset{display:flex;flex-wrap:wrap;gap:8px 14px}
.essay-meta a{color:var(--brass-dk);border-bottom:1px solid rgba(126,95,38,.3);padding-bottom:2px}
.essay-meta a:hover{color:var(--oxblood);border-bottom-color:var(--oxblood)}

.prose{max-width:66ch;margin:clamp(40px,6vh,64px) 0 0;
  font-family:var(--display);font-weight:300;
  font-size:clamp(17.5px,1.3vw,19.5px);line-height:1.72;color:var(--on-ivory);
  /* Imported prose contains bare URLs long enough to push the viewport wide on
     a phone — let them break rather than scroll the page sideways. */
  overflow-wrap:break-word}
.prose a{overflow-wrap:anywhere}
.prose > * + *{margin-top:1.25em}
.prose h2{font-size:clamp(24px,2.4vw,33px);line-height:1.18;margin-top:1.9em}
.prose h3{font-size:clamp(20px,1.9vw,26px);line-height:1.22;margin-top:1.7em}
.prose h4{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-dk);margin-top:1.9em}
.prose a{color:var(--oxblood);border-bottom:1px solid rgba(125,43,47,.32)}
.prose a:hover{border-bottom-color:var(--oxblood)}
.prose blockquote{border-left:1px solid var(--brass);padding-left:clamp(18px,2.4vw,30px);
  font-style:italic;color:var(--on-ivory-dim)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.5em}
.prose img{margin:2em 0;background:var(--ivory-2)}
.prose hr{border:0;border-top:1px solid var(--rule-light);margin:2.4em 0}
.prose em{font-style:italic}
.prose strong{font-weight:600;color:var(--on-ivory)}

.linkout-note{max-width:60ch;margin-top:clamp(40px,6vh,64px);
  border:1px solid var(--rule-light);background:var(--ivory-2);
  padding:clamp(26px,3vw,38px)}
.linkout-note p{color:var(--on-ivory-dim);font-weight:300;
  font-size:clamp(16px,1.2vw,18px)}
.linkout-note .pub{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-dk);margin-bottom:14px}
.linkout-note .btn{margin-top:24px}

/* Author's own readings of an essay. Sits between the prose and prev/next,
   borrowing the linkout-note frame so it reads as part of the same system. */
.readings{max-width:60ch;margin-top:clamp(40px,6vh,64px);
  border:1px solid var(--rule-light);background:var(--ivory-2);
  padding:clamp(26px,3vw,38px)}
.readings .rkicker{font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-dk);margin-bottom:12px}
.readings .rnote{color:var(--on-ivory-dim);font-weight:300;
  font-size:clamp(15px,1.1vw,17px);margin-bottom:20px;max-width:46ch}
.readings .rlist{list-style:none;margin:0;padding:0}
.readings .rlist li{border-top:1px solid var(--rule-light)}
.readings .rlist a{display:flex;align-items:baseline;gap:16px;
  padding:13px 2px;transition:color .3s ease,padding-left .3s ease}
.readings .rlist a:hover{color:var(--oxblood);padding-left:6px}
.readings .rnum{font-size:10.5px;font-weight:600;letter-spacing:.16em;
  color:var(--brass-dk);flex:0 0 auto;min-width:1.4em}
.readings .rttl{font-family:var(--display);font-size:clamp(16px,1.3vw,18.5px);
  line-height:1.35;min-width:0}

.prevnext{margin-top:clamp(60px,9vh,100px);border-top:1px solid var(--rule-light);
  display:grid;grid-template-columns:1fr 1fr;gap:0}
.prevnext a{padding:26px 4px;transition:background .3s ease}
.prevnext a:hover{background:rgba(20,19,15,.035)}
.prevnext .pn-dir{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-dk);display:block;margin-bottom:10px}
.prevnext .pn-ttl{font-family:var(--display);font-size:clamp(17px,1.5vw,21px);line-height:1.3;
  display:block;max-width:28ch}
.prevnext .pn-next{text-align:right;border-left:1px solid var(--rule-light);padding-left:26px}
.prevnext .pn-next .pn-ttl{margin-left:auto}

/* ---------- forms ---------- */
.form{max-width:620px;margin-top:clamp(38px,6vh,58px)}
.field{margin-bottom:26px}
.field label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-dk);margin-bottom:9px}
.field input,.field textarea,.field select{
  width:100%;background:none;border:0;border-bottom:1px solid var(--rule-light);
  font-family:var(--ui);font-size:17px;font-weight:300;color:var(--on-ivory);
  padding:11px 2px;transition:border-color .3s ease}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--brass-dk)}
.field .hint{margin-top:8px;font-size:12.5px;color:var(--on-ivory-faint);font-weight:300}
.form button[type=submit]{margin-top:8px}
.form button.btn{background:var(--ink);color:var(--ivory);border-color:var(--ink);cursor:pointer}
.form button.btn:hover{background:var(--oxblood);border-color:var(--oxblood)}

/* ---------- misc interior ---------- */
.arc{list-style:none;margin-top:clamp(34px,5vh,52px);border-top:1px solid var(--rule-light)}
.arc li{border-bottom:1px solid var(--rule-light);padding:22px 2px;
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px 20px}
.arc li::before{content:"";width:7px;height:7px;margin-top:10px;
  background:var(--brass);transform:rotate(45deg)}
.arc b{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.7vw,23px);
  display:block;line-height:1.3}
.arc span{display:block;margin-top:7px;color:var(--on-ivory-dim);font-size:15.5px;font-weight:300;
  max-width:62ch}

.hublist{list-style:none;margin-top:clamp(34px,5vh,52px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 clamp(30px,4vw,56px);border-top:1px solid var(--rule-light)}
.hublist li{border-bottom:1px solid var(--rule-light)}
.hublist a{display:grid;grid-template-columns:34px 1fr auto;gap:6px 16px;align-items:baseline;
  padding:20px 2px;transition:background .3s ease,padding-left .3s ease}
.hublist a:hover{background:rgba(20,19,15,.035);padding-left:8px}
.hublist .hl-num{font-family:var(--display);font-style:italic;font-size:18px;color:var(--brass-dk)}
.hublist .hl-name{font-family:var(--display);font-size:clamp(18px,1.6vw,22px);line-height:1.28}
.hublist .hl-n{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--on-ivory-faint)}

.notfound{min-height:70svh;display:grid;place-items:center;text-align:center;
  padding:clamp(130px,20vh,200px) 0 clamp(70px,12vh,120px)}
.notfound h1{font-size:clamp(46px,8vw,110px);line-height:1;color:var(--brass-dk)}
.notfound p{margin-top:22px;color:var(--on-ivory-dim);font-weight:300;
  font-size:clamp(17px,1.3vw,19px);max-width:44ch}
.notfound .btn{margin-top:34px}

@media (max-width:860px){
  .pagehead-grid{grid-template-columns:1fr}
  .hub-mark{width:120px;height:120px}
  .prevnext{grid-template-columns:1fr}
  .prevnext .pn-next{text-align:left;border-left:0;padding-left:4px;
    border-top:1px solid var(--rule-light)}
  .prevnext .pn-next .pn-ttl{margin-left:0}
}
@media (max-width:640px){
  .arch a{grid-template-columns:66px minmax(0,1fr)}
  .arch .meta{grid-column:2;white-space:normal;text-align:left}
  .prose{font-size:17px}
}

/* ------------------------------------------------------------
   Interior pages inherit Option B's LIGHT-register component colours.
   B scoped those overrides to `.page`, the ivory block inside the homepage.
   Interior pages are ivory end to end and use `body.interior` instead, so
   without this they fell back to the dark-register brass — kickers and
   buttons at 2.02:1 on ivory. Same declarations as `.page`, no new values.
   ------------------------------------------------------------ */
body.interior .kicker{color:var(--brass-dk)}
body.interior .kicker::before{background:var(--brass-dk);opacity:.7}
body.interior .btn{border-color:var(--brass-dk);color:var(--brass-dk)}
body.interior .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
body.interior .btn.fill{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
body.interior .btn.fill:hover{background:var(--oxblood);border-color:var(--oxblood);color:var(--ivory)}
body.interior .txtlink{color:var(--oxblood);border-bottom-color:rgba(125,43,47,.35)}
body.interior .txtlink:hover{color:var(--ink);border-bottom-color:var(--ink)}
body.interior a{color:inherit}

/* Count badge was .55 opacity of --on-ivory-dim → 2.42:1. */
.chip .chip-n{opacity:1;color:var(--on-ivory-faint)}
.chip[aria-pressed="true"] .chip-n{color:rgba(246,241,230,.72)}

/* The crumb link sat at 1.09:1 against the text beside it — underline it so
   colour is not the only signal. */
.crumb a{border-bottom:1px solid rgba(126,95,38,.45);padding-bottom:1px}
.crumb a:hover{border-bottom-color:var(--oxblood)}

/* Metric-matched fallback for the UI face.
   Source Sans 3 sets ~86% the width of Helvetica/Arial at the same size, so
   before it loaded the filter chips wrapped to one more row and everything
   below jumped 29px on swap (CLS 0.10 on mobile). size-adjust makes the
   fallback occupy the same space, so nothing moves. Layout is unchanged. */
@font-face{
  font-family:'Source Sans 3 fallback';
  src:local('Helvetica Neue'),local('Helvetica'),local('Arial');
  size-adjust:86.3%;
  ascent-override:97%;
  descent-override:29%;
  line-gap-override:0%;
}