/* ===========================================================
   A PLACE TO THINK
   a-place-to-think.neocities.org
   Essays by Christa Smith, PhD
   =========================================================== */

/* ---------- self-hosted variable fonts (no third-party requests) ---------- */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900;
  font-display:swap; src:url("fonts/fraunces-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:100 900;
  font-display:swap; src:url("fonts/fraunces-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader"; font-style:normal; font-weight:200 800;
  font-display:swap; src:url("fonts/newsreader-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader"; font-style:italic; font-weight:200 800;
  font-display:swap; src:url("fonts/newsreader-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900;
  font-display:swap; src:url("fonts/inter-normal.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root{
  --paper:      #FBF9F5;
  --paper-warm: #F4F0E8;
  --ink:        #14181A;
  --ink-soft:   #3A4247;
  --muted:      #6E767B;
  --faint:      #9AA1A5;
  --rule:       rgba(20,24,26,.13);
  --rule-soft:  rgba(20,24,26,.07);
  --accent:     #0F6F6A;
  --accent-lit: #2E9C93;
  --night:      #0F1315;
  --night-2:    #171C1F;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text:    "Newsreader", Georgia, "Times New Roman", serif;
  --micro:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 34rem;          /* reading column */
  --gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --rhythm:  clamp(4.5rem, 11vh, 9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1.0625rem, .55vw + .94rem, 1.1875rem);
  font-weight:380;
  line-height:1.72;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
}
img{ max-width:100%; height:auto; display:block; }
::selection{ background:var(--accent); color:var(--paper); }

/* film-grain paper tooth */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ink); color:var(--paper); padding:.7rem 1.1rem;
  font-family:var(--micro); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- layout primitives ---------- */
.wrap{ width:min(78rem, 100% - var(--gutter)*2); margin-inline:auto; }
.col{ width:min(var(--measure), 100%); margin-inline:auto; }
.col--left{ margin-inline:0; }

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--micro); font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin:0 0 1.4rem;
}
.eyebrow--muted{ color:var(--faint); }

h1,h2,h3{ font-family:var(--display); font-weight:330; letter-spacing:-.018em; line-height:1.03; margin:0; }
h1{
  font-size:clamp(2.6rem, 7.4vw, 6.1rem);
  font-variation-settings:"SOFT" 22,"WONK" 1,"opsz" 144;
  line-height:.99; letter-spacing:-.032em;
}
h2{
  font-size:clamp(1.85rem, 3.4vw, 3rem);
  font-variation-settings:"SOFT" 16,"WONK" 1,"opsz" 72;
  letter-spacing:-.026em; line-height:1.06;
}
h3{
  font-size:clamp(1.3rem, 1.9vw, 1.65rem);
  font-variation-settings:"SOFT" 12,"opsz" 36;
  letter-spacing:-.018em; line-height:1.18;
}
h1 em,h2 em,h3 em{ font-style:italic; font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144; }

p{ margin:0 0 1.45em; }
.lede{
  font-size:clamp(1.25rem,1.35vw + .95rem,1.55rem);
  line-height:1.55; font-weight:320; color:var(--ink-soft);
  letter-spacing:-.005em;
}
.small{ font-family:var(--micro); font-size:.8125rem; line-height:1.6; color:var(--muted); }
.caps{
  font-family:var(--micro); font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
}

/* drop cap */
.dropcap::first-letter{
  font-family:var(--display); font-weight:300;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144;
  float:left; font-size:4.4em; line-height:.78;
  margin:.06em .09em -.04em -.045em; color:var(--accent);
}

/* ---------- links ---------- */
a{ color:inherit; }
.prose a,
a.link{
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-position:0 92%;
  background-size:100% 1px;
  padding-bottom:.06em;
  transition:background-size .3s var(--ease), color .3s var(--ease);
}
.prose a:hover,
a.link:hover{ color:var(--accent); background-size:100% 2px; }
.prose a:focus-visible,
a.link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* outbound marker */
a[data-out]::after{
  content:"↗"; font-family:var(--micro); font-size:.62em;
  vertical-align:.42em; margin-left:.18em; color:var(--accent);
  opacity:.55; transition:opacity .3s var(--ease), transform .3s var(--ease);
  display:inline-block;
}
a[data-out]:hover::after{ opacity:1; transform:translate(1px,-1px); }

/* ---------- rules ---------- */
.rule{ border:0; height:1px; background:var(--rule); margin:0; }
.rule--soft{ background:var(--rule-soft); }
.rule--short{ width:3.25rem; height:1px; background:var(--accent); margin:0 0 2rem; }

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--rule-soft);
}
.masthead__inner{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1.05rem 0 .95rem;
}
.brand{
  font-family:var(--micro); font-size:.72rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; text-decoration:none; color:var(--ink);
  white-space:nowrap;
}
.brand span{ color:var(--accent); }
.nav{ display:flex; gap:clamp(1rem,2.6vw,2.1rem); align-items:baseline; }
.nav a{
  font-family:var(--micro); font-size:.72rem; font-weight:450;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  color:var(--muted); position:relative; padding-bottom:.25rem;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); transition:width .35s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--ink); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ width:100%; }
@media (max-width:34rem){
  .nav{ gap:1rem; }
  .nav a{ font-size:.65rem; letter-spacing:.1em; }
  .brand{ font-size:.65rem; letter-spacing:.18em; }
}

/* reading progress */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-lit));
  z-index:70; transition:width .12s linear;
}

/* ---------- hero ---------- */
.hero{
  padding:clamp(4.5rem,13vh,10rem) 0 clamp(3.5rem,9vh,7rem);
  position:relative;
}
.hero h1{ max-width:15ch; }
.hero__sub{
  margin-top:clamp(2rem,4vh,3.25rem);
  display:grid; grid-template-columns:1fr; gap:1.6rem;
  max-width:var(--measure);
}
.hero__meta{
  margin-top:clamp(3rem,7vh,5rem);
  display:flex; flex-wrap:wrap; gap:.65rem 2.2rem; align-items:baseline;
  padding-top:1.4rem; border-top:1px solid var(--rule);
}
.hero__meta span{ font-family:var(--micro); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }

/* ---------- sections ---------- */
section{ padding-block:var(--rhythm); }
.section-label{
  display:flex; align-items:baseline; gap:1.1rem; margin-bottom:clamp(2rem,4vh,3.2rem);
}
.section-label::after{ content:""; flex:1; height:1px; background:var(--rule); }
.section-label .caps{ color:var(--faint); }

/* ---------- prose ---------- */
.prose{ max-width:var(--measure); }
.prose h2{ margin:2.6em 0 .7em; }
.prose h3{ margin:2.2em 0 .6em; }
.prose h2:first-child,.prose h3:first-child{ margin-top:0; }
.prose blockquote{
  margin:2.4rem 0; padding:0 0 0 1.6rem;
  border-left:1px solid var(--accent);
  font-family:var(--display); font-weight:300; font-style:italic;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 60;
  font-size:clamp(1.3rem,1.5vw,1.6rem); line-height:1.34; color:var(--ink);
  letter-spacing:-.015em;
}
.prose blockquote p{ margin:0; }
.prose ul{ padding-left:1.1rem; margin:0 0 1.45em; }
.prose li{ margin-bottom:.55em; padding-left:.35rem; }
.prose li::marker{ color:var(--accent); }

/* pull quote, full width */
.pull{
  margin:clamp(3rem,7vh,5rem) 0;
  padding:clamp(2rem,4vh,3rem) 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  text-align:center;
}
.pull p{
  margin:0 auto; max-width:24ch;
  font-family:var(--display); font-weight:300; font-style:italic;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
  font-size:clamp(1.7rem,4.2vw,3.15rem); line-height:1.1; letter-spacing:-.028em;
}

/* ---------- figures / plates ---------- */
.plate{ margin:0; padding-block:clamp(1rem,3vh,2rem); }
.plate__frame{
  position:relative; overflow:hidden; background:var(--night);
}
.plate__frame img{
  width:100%; display:block;
  filter:saturate(.9) contrast(1.03);
  transform:scale(1.04);
  transition:transform 1.6s var(--ease), filter 1.2s var(--ease);
}
.plate:hover .plate__frame img{ transform:scale(1); filter:saturate(1) contrast(1.02); }
.plate figcaption{
  display:flex; gap:1.1rem; align-items:baseline; justify-content:space-between;
  margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--rule-soft);
  font-family:var(--micro); font-size:.7rem; letter-spacing:.1em; color:var(--faint);
  text-transform:uppercase;
}
.plate figcaption em{ font-style:normal; color:var(--muted); text-transform:none; letter-spacing:.02em; font-size:.78rem; }

/* ---------- rooms (photo + text) ---------- */
.room{ padding-block:clamp(3rem,8vh,6rem); border-top:1px solid var(--rule-soft); }
.room:first-of-type{ border-top:0; }
.room__grid{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:56rem){
  .room__grid{ grid-template-columns:1.35fr .85fr; }
  .room--flip .room__grid{ grid-template-columns:.85fr 1.35fr; }
  .room--flip .room__media{ order:2; }
  .room--flip .room__body{ order:1; }
  .room__body{ position:sticky; top:6.5rem; }
}
.room__num{
  font-family:var(--micro); font-size:.68rem; letter-spacing:.24em;
  color:var(--accent); text-transform:uppercase; display:block; margin-bottom:1rem;
}
.room__body h3{ margin-bottom:1.1rem; }
.room__body p{ color:var(--ink-soft); }
.room__more{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.4rem;
  font-family:var(--micro); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--accent);
}
.room__more .arrow{ transition:transform .35s var(--ease); display:inline-block; }
.room__more:hover .arrow{ transform:translateX(5px); }
.room__more:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* ---------- night band ---------- */
.night{
  background:var(--night); color:var(--paper-warm);
  --rule:rgba(251,249,245,.15); --rule-soft:rgba(251,249,245,.08);
  --ink:#F4F0E8; --ink-soft:rgba(244,240,232,.78); --muted:rgba(244,240,232,.6);
  --faint:rgba(244,240,232,.42); --accent:var(--accent-lit);
}
.night h1,.night h2,.night h3{ color:var(--paper-warm); }
.night .prose a{ color:var(--paper-warm); background-image:linear-gradient(var(--accent-lit),var(--accent-lit)); }
.night .prose a:hover{ color:var(--accent-lit); }

/* ---------- index list (essays / notes) ---------- */
.list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.list li{ border-bottom:1px solid var(--rule); }
.list a{
  display:grid; gap:.35rem 2rem; align-items:baseline;
  grid-template-columns:1fr; padding:1.6rem 0; text-decoration:none;
  transition:padding-left .4s var(--ease), color .3s var(--ease);
}
@media (min-width:46rem){
  .list a{ grid-template-columns:5.5rem 1fr 8rem; padding:1.85rem 0; }
}
.list a:hover{ padding-left:.75rem; }
.list a:hover .list__title{ color:var(--accent); }
.list a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.list__num{ font-family:var(--micro); font-size:.68rem; letter-spacing:.2em; color:var(--faint); text-transform:uppercase; }
.list__title{
  font-family:var(--display); font-weight:330; font-variation-settings:"SOFT" 14,"opsz" 48;
  font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.2; letter-spacing:-.02em;
  transition:color .3s var(--ease);
}
.list__meta{ font-family:var(--micro); font-size:.7rem; letter-spacing:.12em; color:var(--faint); text-transform:uppercase; }

/* ---------- note cards ---------- */
.notes{ display:grid; gap:0; }
.note{ padding-block:clamp(2.2rem,5vh,3.6rem); border-top:1px solid var(--rule); }
.note:first-child{ border-top:0; padding-top:0; }
.note__head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.note__idx{ font-family:var(--micro); font-size:.68rem; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; }
.note__body{ max-width:var(--measure); }
@media (min-width:64rem){
  .note{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
  .note__head{
    flex-direction:column; align-items:flex-start; gap:1rem; margin-bottom:0;
    position:sticky; top:7rem;
  }
  .note__head h3{ text-wrap:balance; }
}

/* ---------- article + sticky rail ---------- */
.article-grid{ display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1fr; }
@media (min-width:68rem){
  .article-grid{ grid-template-columns:minmax(0,var(--measure)) 1fr; align-items:start; }
  .rail{ position:sticky; top:7rem; }
}
.rail{ padding-top:.4rem; }
.rail h4{
  font-family:var(--micro); font-size:.66rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); margin:0 0 1rem;
}
.rail ol{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); counter-reset:rail; }
.rail li{ border-bottom:1px solid var(--rule-soft); counter-increment:rail; }
.rail a{
  display:grid; grid-template-columns:1.6rem 1fr; gap:.6rem; align-items:baseline;
  padding:.78rem 0; text-decoration:none; color:var(--muted);
  font-family:var(--micro); font-size:.78rem; line-height:1.4;
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.rail a::before{
  content:counter(rail,decimal-leading-zero);
  font-size:.62rem; letter-spacing:.14em; color:var(--faint);
}
.rail a:hover{ color:var(--accent); padding-left:.3rem; }
.rail a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.rail__note{
  margin-top:1.6rem; font-family:var(--micro); font-size:.72rem; line-height:1.65; color:var(--faint);
}
@media (max-width:67.99rem){ .rail{ display:none; } }

/* ---------- callout ---------- */
.callout{
  margin:clamp(2.5rem,6vh,4rem) 0; padding:clamp(1.6rem,3.5vw,2.4rem);
  background:var(--paper-warm); border-left:2px solid var(--accent);
}
.callout p:last-child{ margin-bottom:0; }
.callout .caps{ color:var(--accent); display:block; margin-bottom:.8rem; }

/* ---------- author card ---------- */
.author{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:start;
  grid-template-columns:1fr;
  padding-top:clamp(2rem,4vh,3rem); border-top:1px solid var(--rule);
}
@media (min-width:48rem){ .author{ grid-template-columns:11rem 1fr; } }
.author__mark{
  width:100%; max-width:11rem; aspect-ratio:1; background:var(--paper-warm);
  display:grid; place-items:center; border:1px solid var(--rule);
}
.author__mark span{
  font-family:var(--display); font-size:2.6rem; font-weight:300;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144; font-style:italic; color:var(--accent);
}
.author__body p{ margin-bottom:1rem; }

/* ---------- footer ---------- */
.colophon{
  background:var(--night); color:var(--paper-warm);
  --rule:rgba(251,249,245,.14); --muted:rgba(244,240,232,.58); --faint:rgba(244,240,232,.4);
  padding-block:clamp(3.5rem,9vh,6rem);
}
.colophon__grid{
  display:grid; gap:2.6rem; grid-template-columns:1fr;
}
@media (min-width:52rem){ .colophon__grid{ grid-template-columns:1.4fr .8fr .8fr; gap:3.5rem; } }
.colophon h4{
  font-family:var(--micro); font-size:.68rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(244,240,232,.4); margin:0 0 1.1rem;
}
.colophon p{ color:rgba(244,240,232,.72); font-size:1rem; margin-bottom:1rem; }
.colophon ul{ list-style:none; margin:0; padding:0; }
.colophon li{ margin-bottom:.6rem; }
.colophon a{
  color:rgba(244,240,232,.78); text-decoration:none; font-size:.95rem;
  border-bottom:1px solid rgba(244,240,232,.18); padding-bottom:1px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.colophon a:hover{ color:var(--accent-lit); border-color:var(--accent-lit); }
.colophon__base{
  margin-top:clamp(2.5rem,6vh,4rem); padding-top:1.4rem;
  border-top:1px solid rgba(251,249,245,.14);
  display:flex; flex-wrap:wrap; gap:.7rem 2rem; justify-content:space-between;
  font-family:var(--micro); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(244,240,232,.38);
}
.colophon__mark{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
  font-size:clamp(2rem,4.6vw,3.2rem); letter-spacing:-.03em; line-height:1;
  color:var(--paper-warm); margin:0 0 1.4rem; text-transform:none;
}

/* ---------- disclosure strip ---------- */
.disclosure{
  padding-block:2.2rem; border-top:1px solid var(--rule-soft);
  font-family:var(--micro); font-size:.72rem; line-height:1.7; color:var(--faint);
  max-width:52rem;
}
.disclosure a{ color:var(--muted); }

/* ---------- reveal animation ---------- */
[data-reveal]{ opacity:0; transform:translateY(14px); }
.is-in[data-reveal]{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .plate__frame img{ transform:none !important; transition:none !important; }
}

/* ---------- 404 ---------- */
.lost{ min-height:66vh; display:grid; place-content:center; text-align:center; }
.lost h1{ margin-bottom:1.5rem; }

/* ===========================================================
   ADDITIONS — v2
   =========================================================== */

/* full-bleed */
.bleed{ width:100vw; margin-left:calc(50% - 50vw); }

/* breadcrumb */
.crumbs{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;
  font-family:var(--micro); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); padding-top:2rem;
}
.crumbs a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease); }
.crumbs a:hover{ color:var(--accent); border-color:var(--accent); }
.crumbs span[aria-hidden]{ opacity:.45; }

/* image duos / trios */
.duo,.trio{ display:grid; gap:clamp(1rem,2.4vw,2rem); grid-template-columns:1fr; margin-block:clamp(2.5rem,6vh,4.5rem); }
@media (min-width:44rem){
  .duo{ grid-template-columns:1fr 1fr; }
  .duo--weighted{ grid-template-columns:1.5fr 1fr; align-items:end; }
}
@media (min-width:58rem){ .trio{ grid-template-columns:repeat(3,1fr); } }
.duo .plate,.trio .plate{ padding-block:0; }

/* plate variants */
.plate--tall .plate__frame{ aspect-ratio:4/5; }
.plate--wide .plate__frame{ aspect-ratio:16/7; }
.plate--square .plate__frame{ aspect-ratio:1; }
.plate--tall .plate__frame img,
.plate--wide .plate__frame img,
.plate--square .plate__frame img{ width:100%; height:100%; object-fit:cover; }
.plate--top .plate__frame img{ object-position:50% 22%; }

/* band: full-bleed cinematic image with caption bar */
.band{ margin-block:clamp(3rem,8vh,6rem); }
.band__frame{ position:relative; overflow:hidden; background:var(--night); }
.band__frame img{ width:100%; display:block; }
.band__cap{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; justify-content:space-between;
  font-family:var(--micro); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); padding-top:.75rem;
}
.band__cap em{ font-style:normal; text-transform:none; letter-spacing:.02em; font-size:.78rem; color:var(--muted); }

/* essay index cards */
.cards{ display:grid; gap:0; border-top:1px solid var(--rule); }
.card{ border-bottom:1px solid var(--rule); }
.card a{
  display:grid; gap:1.4rem; grid-template-columns:1fr; align-items:start;
  padding:clamp(1.6rem,3.5vh,2.4rem) 0; text-decoration:none;
  transition:padding-left .4s var(--ease);
}
@media (min-width:52rem){ .card a{ grid-template-columns:15rem 1fr; gap:clamp(1.6rem,4vw,3rem); } }
.card a:hover{ padding-left:.7rem; }
.card a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.card__thumb{ overflow:hidden; background:var(--night); aspect-ratio:5/3; }
.card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); filter:saturate(.92); }
.card a:hover .card__thumb img{ transform:scale(1.05); }
.card__kicker{ font-family:var(--micro); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:.7rem; }
.card__title{
  font-family:var(--display); font-weight:330; font-variation-settings:"opsz" 60;
  font-size:clamp(1.35rem,2.2vw,1.9rem); line-height:1.14; letter-spacing:-.022em;
  display:block; margin-bottom:.7rem; color:var(--ink); transition:color .3s var(--ease);
}
.card a:hover .card__title{ color:var(--accent); }
.card__dek{ color:var(--ink-soft); font-size:1.02rem; line-height:1.6; max-width:46ch; margin:0; }
.card__meta{ font-family:var(--micro); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:.9rem; display:block; }

/* Q&A */
.qa{ border-top:1px solid var(--rule); }
.qa details{ border-bottom:1px solid var(--rule); }
.qa summary{
  list-style:none; cursor:pointer; padding:1.5rem 2.5rem 1.5rem 0; position:relative;
  font-family:var(--display); font-weight:340; font-variation-settings:"opsz" 42;
  font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.3; letter-spacing:-.016em;
  transition:color .3s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--accent); }
.qa summary::after{
  content:""; position:absolute; right:.35rem; top:calc(50% - .35rem);
  width:.7rem; height:.7rem; border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.qa details[open] summary::after{ transform:rotate(-135deg); }
.qa summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.qa__body{ padding:0 0 1.9rem; max-width:var(--measure); }
.qa__body p:last-child{ margin-bottom:0; }

/* campaign grid */
.campaign{ column-count:1; column-gap:clamp(1.2rem,3vw,2.4rem); }
@media (min-width:46rem){ .campaign{ column-count:2; } }
@media (min-width:74rem){ .campaign{ column-count:3; } }
.campaign figure{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 clamp(1.6rem,3.4vw,2.6rem);
}
.campaign figure picture{ display:block; overflow:hidden; background:var(--night); }
.campaign figure img{ transition:transform 1.2s var(--ease); }
.campaign figure:hover img{ transform:scale(1.03); }
.campaign img{ width:100%; display:block; background:var(--night); }
.campaign figcaption{
  margin-top:.7rem; font-family:var(--micro); font-size:.68rem; letter-spacing:.08em;
  color:var(--faint); line-height:1.6;
}
.campaign figcaption strong{ display:block; color:var(--muted); font-weight:450; text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; margin-bottom:.25rem; }

/* margin note */
.mnote{
  font-family:var(--micro); font-size:.78rem; line-height:1.65; color:var(--muted);
  border-left:1px solid var(--accent); padding-left:1rem; margin:2rem 0;
}

/* next / prev */
.pager{
  display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:clamp(3rem,7vh,5rem);
  padding-top:1.6rem; border-top:1px solid var(--rule);
}
@media (min-width:48rem){ .pager{ grid-template-columns:1fr 1fr; } }
.pager a{ text-decoration:none; display:block; padding:.4rem 0; }
.pager span{ display:block; font-family:var(--micro); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:.5rem; }
.pager strong{
  font-family:var(--display); font-weight:330; font-variation-settings:"opsz" 42;
  font-size:1.25rem; line-height:1.2; letter-spacing:-.02em; color:var(--ink);
  transition:color .3s var(--ease);
}
.pager a:hover strong{ color:var(--accent); }
.pager .pager__next{ text-align:left; }
@media (min-width:48rem){ .pager .pager__next{ text-align:right; } }

/* nav overflow on small screens */
@media (max-width:52rem){
  .masthead__inner{ flex-direction:column; align-items:flex-start; gap:.6rem; padding-bottom:.7rem; }
  .nav{ width:100%; overflow-x:auto; padding-bottom:.2rem; scrollbar-width:none; }
  .nav::-webkit-scrollbar{ display:none; }
}