/* kafkagarden.com — "Endpapers" */

:root{
  --ground:#232220;
  --ground-deep:#1a1917;
  --ground-lift:#2c2a27;
  --rule:#3b3833;
  --rule-soft:#302e2a;
  --ink:#e8e3d8;          /* bone text on dark */
  --ink-quiet:#a49d90;
  --ink-faint:#7c7568;
  --paper:#efe9dc;        /* paper insets */
  --paper-ink:#1c1a15;
  --paper-quiet:#5b554a;
  --accent:#a4351f;       /* ink-brown / oxide */
  --accent-lift:#c96a4e;
  --brass:#c9b48a;

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  --fs-micro:.66rem;
  --fs-label:.75rem;
  --fs-meta:.92rem;
  --fs-body:1.28rem;
  --fs-lead:1.6rem;
  --fs-h2:2rem;
  --fs-h1:clamp(2.4rem,5.2vw,4.1rem);
  --fs-mega:clamp(2.8rem,7vw,6rem);

  --measure:70ch;
  --pad:clamp(20px,5vw,64px);
  --maxw:1360px;
}

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

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--serif);font-size:var(--fs-body);line-height:1.68;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(201,180,138,.34)}
a:hover{color:#f4efe4;border-bottom-color:#f4efe4}
p{text-wrap:pretty;margin:0 0 1.15em}
h1,h2,h3,h4{text-wrap:balance;margin:0;font-weight:400;overflow-wrap:break-word}
p,li,dd,figcaption,span{overflow-wrap:break-word}
ul,ol{margin:0;padding:0}
hr{border:0;border-top:1px solid var(--rule);margin:0}
:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);color:var(--paper-ink);padding:10px 16px}

/* ---------- address markers: the signature ---------- */
.marker{
  font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:center;gap:14px;
}
.marker::after{content:"";flex:1;height:1px;background:var(--rule)}
.marker b{font-weight:500;color:var(--accent-lift)}
.marker--paper{color:var(--paper-quiet)}
.marker--paper::after{background:rgba(28,26,21,.2)}
.marker--paper b{color:var(--accent)}

.addr{
  font-family:var(--sans);font-weight:600;letter-spacing:-.015em;
  line-height:1.02;color:var(--ink);
}

/* ---------- masthead ---------- */
.masthead{background:var(--ground-deep);border-bottom:1px solid var(--rule)}
.masthead__bar{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding-block:20px;
}
.logo{display:flex;flex-direction:column;gap:7px;border:0}
.logo__word{
  font-family:var(--serif);font-weight:600;font-size:1.34rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink);line-height:1;white-space:nowrap;
}
.logo__sub{white-space:nowrap}
.logo__sub{
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-lift);
}
.nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);flex-wrap:wrap;justify-content:flex-end}
.nav a{
  font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-quiet);border:0;padding-block:6px;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--accent-lift)}
.nav .nav__browse{color:var(--accent-lift)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ground-deep);min-height:clamp(560px,86vh,900px);display:flex;flex-direction:column;justify-content:flex-end}
.hero__img{position:absolute;inset:0;overflow:hidden}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 36%;filter:grayscale(.4) contrast(1.02) brightness(.6)}
.hero__img::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(26,25,23,.5) 0%,rgba(26,25,23,.12) 26%,rgba(26,25,23,.74) 64%,rgba(26,25,23,.94) 86%,var(--ground-deep) 100%),
    linear-gradient(90deg,rgba(26,25,23,.62) 0%,rgba(26,25,23,.12) 62%,rgba(26,25,23,0) 100%);
}
.hero__body{position:relative;margin-top:0;padding-top:clamp(120px,26vh,300px);padding-bottom:clamp(44px,6vw,80px);z-index:1}
.hero h1{
  font-family:var(--sans);font-weight:600;font-size:var(--fs-mega);
  line-height:.98;letter-spacing:-.025em;margin:18px 0 22px;max-width:20ch;
}
.hero__dek{font-size:var(--fs-lead);line-height:1.44;color:var(--ink-quiet);max-width:52ch}
.hero__credit{
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:26px;
}

/* ---------- generic band ---------- */
.band{padding-block:clamp(52px,7vw,96px)}
.band--paper{background:var(--paper);color:var(--paper-ink)}
.band--paper a{color:var(--accent);border-bottom-color:rgba(164,53,31,.3)}
.band--paper a:hover{color:var(--paper-ink);border-bottom-color:var(--paper-ink)}
.band--deep{background:var(--ground-deep)}
.band__head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(28px,4vw,48px)}
.band__title{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1;max-width:22ch}
.band__intro{color:var(--ink-quiet);max-width:60ch;font-size:1.18rem}
.band--paper .band__intro{color:var(--paper-quiet)}

/* ---------- the walk (section index) ---------- */
.walk{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.walk__stop{
  display:grid;grid-template-columns:88px minmax(0,1.05fr) minmax(0,1.15fr) auto;
  gap:clamp(16px,3vw,44px);align-items:baseline;
  padding-block:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--rule);
  color:inherit;
}
a.walk__stop{border-bottom:1px solid var(--rule)}
a.walk__stop:hover{background:var(--ground-lift);color:inherit}
a.walk__stop:hover .walk__name{color:var(--accent-lift)}
.walk__no{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.18em;color:var(--ink-faint)}
.walk__name{font-family:var(--sans);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;letter-spacing:-.02em}
.walk__blurb{color:var(--ink-quiet);font-size:1.1rem;line-height:1.55}
.walk__count{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}

/* ---------- lead article ---------- */
.lead-piece{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.lead-piece__fig{margin:0;position:relative}
.lead-piece__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.3) contrast(1.02)}
.lead-piece__body{display:flex;flex-direction:column;gap:18px}
.lead-piece h2{font-family:var(--sans);font-weight:600;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.02;letter-spacing:-.025em}
.lead-piece h2 a{color:inherit;border:0}
.lead-piece h2 a:hover{color:var(--accent-lift)}
.lead-piece__dek{font-size:1.3rem;line-height:1.55;color:var(--ink-quiet);max-width:54ch}

.meta{
  font-family:var(--sans);font-size:var(--fs-meta);letter-spacing:.02em;
  color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.meta span{white-space:nowrap}
.meta span+span::before{content:"·";margin-right:10px;color:var(--rule)}
.band--paper .meta{color:var(--paper-quiet)}
.band--paper .meta span+span::before{color:rgba(28,26,21,.28)}

.readon{
  font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-lift);border:0;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
}
.readon svg{width:22px;height:9px}
.readon:hover{color:var(--ink)}

/* ---------- endpapers (supporters) ---------- */
.endpapers{background:var(--ground-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.endpapers__head{display:flex;flex-direction:column;gap:14px;max-width:74ch}
.endpapers__title{font-family:var(--sans);font-weight:600;font-size:1.55rem;letter-spacing:-.01em}
.endpapers__note{color:var(--ink-quiet);font-size:1.1rem;line-height:1.6}
.endpapers__leaf{margin-top:clamp(26px,3vw,40px)}
.endpapers__leafname{
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:14px;
}
.endpapers__run{display:flex;flex-wrap:wrap;gap:14px}

.sponsor{
  flex:1 1 232px;min-width:232px;
  display:flex;flex-direction:column;gap:14px;
  padding:18px;background:var(--ground-lift);border:1px solid var(--rule);
  color:var(--ink-quiet);
}
.sponsor:hover{border-color:var(--ink-faint)}
.sponsor img{
  width:100%;height:56px;max-width:100%;object-fit:contain;object-position:center;
  background:#100f0e;padding:8px 16px;border:1px solid #000;
}
.sponsor-blurb{
  display:block;min-height:4.4em;font-family:var(--sans);font-size:.95rem;line-height:1.5;
  color:var(--ink-quiet);
}
.sponsor.feat{flex:1 1 320px;min-width:320px;padding:22px}
.sponsor.feat img{height:72px}
.sponsor.feat .sponsor-blurb{min-height:3.4em;font-size:1rem}

/* ---------- card grids ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(20px,2.4vw,34px)}
.card{
  display:flex;flex-direction:column;height:100%;border:0;color:inherit;
  background:var(--ground-lift);border:1px solid var(--rule-soft);
}
.card:hover{border-color:var(--ink-faint)}
.card:hover .card__title{color:var(--accent-lift)}
.card__img{aspect-ratio:3/2;width:100%;object-fit:cover;filter:grayscale(.4) contrast(1.02) brightness(.86)}
.card__noimg{
  aspect-ratio:3/2;width:100%;display:flex;align-items:flex-end;padding:16px;
  background:repeating-linear-gradient(135deg,#26241f,#26241f 8px,#222019 8px,#222019 16px);
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.card__body{display:flex;flex-direction:column;gap:11px;padding:20px;flex:1}
.card__kicker{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lift)}
.card__title{font-family:var(--sans);font-weight:600;font-size:1.22rem;line-height:1.22;letter-spacing:-.012em;min-height:2.44em}
.card__dek{color:var(--ink-quiet);font-size:1.06rem;line-height:1.5}
.card .meta{margin-top:auto;padding-top:6px}

/* ---------- pull quote band ---------- */
.quoteband{background:var(--paper);color:var(--paper-ink)}
.quoteband__inner{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.quoteband blockquote{margin:0}
.quoteband .de{font-size:clamp(1.55rem,2.8vw,2.35rem);line-height:1.34;color:var(--paper-ink)}
.quoteband .en{font-size:1.18rem;line-height:1.6;color:var(--paper-quiet);margin-top:20px;max-width:52ch}
.quoteband cite{
  display:block;margin-top:24px;font-style:normal;font-family:var(--sans);
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.quoteband__aside{border-left:1px solid rgba(28,26,21,.18);padding-left:clamp(18px,2vw,30px);font-size:1.06rem;line-height:1.62;color:var(--paper-quiet)}

/* ---------- footer ---------- */
.foot{background:var(--ground-deep);border-top:1px solid var(--rule);padding-block:clamp(40px,5vw,64px)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.foot__disclaimer{font-size:1.08rem;line-height:1.62;color:var(--ink-quiet);max-width:52ch}
.foot__col h4{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.foot__col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot__col a{font-family:var(--sans);font-size:1rem;color:var(--ink-quiet);border:0}
.foot__col a:hover{color:var(--ink)}
.foot__rule{margin-top:clamp(30px,4vw,50px);padding-top:22px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}

/* ================= ARTICLE ================= */
.article{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;
  grid-template-columns:min(var(--measure),100%) minmax(0,1fr);
  padding-bottom:clamp(40px,6vw,80px);
}
.article>*{grid-column:1}
.article>.wide{grid-column:1 / -1;max-width:min(104ch,100%)}
.article>.related{grid-column:1 / -1;max-width:min(104ch,100%)}

.art-hero{position:relative;background:var(--ground-deep);border-bottom:1px solid var(--rule)}
.art-hero__img{height:clamp(280px,48vh,500px);overflow:hidden;position:relative}
.art-hero__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.03) brightness(.7)}
.art-hero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,23,.3),rgba(26,25,23,.92))}
.art-hero__body{position:relative;z-index:1;padding-block:clamp(30px,4vw,48px)}
.art-hero--flat{background:var(--ground-deep)}
.art-hero--flat .art-hero__body{padding-block:clamp(64px,9vw,120px);position:relative}
.art-hero--flat .art-hero__body::before{
  content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--rule);
}
.art-hero--flat .art-hero__body::after{
  content:"";position:absolute;left:var(--pad);bottom:0;width:120px;height:3px;background:var(--accent);
}
.art-hero--photo .art-hero__body{margin-top:clamp(-150px,-13vh,-70px)}
.art-hero h1{
  font-family:var(--sans);font-weight:600;font-size:var(--fs-h1);line-height:1.0;
  letter-spacing:-.028em;margin:18px 0 0;max-width:20ch;
}
.art-hero__credit{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:22px}

.article .lead{
  font-size:var(--fs-lead);line-height:1.46;color:var(--ink);
  margin:clamp(28px,3.5vw,44px) 0 clamp(24px,3vw,36px);
  padding-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--rule);
}
.article .meta{margin-bottom:clamp(26px,3vw,38px)}
.article h2{
  font-family:var(--sans);font-weight:600;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.02em;
  margin:clamp(38px,4.5vw,64px) 0 20px;
}
.article h2::before{
  content:"";display:block;width:52px;height:2px;background:var(--accent);margin-bottom:18px;
}
.article p{margin:0 0 1.15em}
.article p:last-child{margin-bottom:0}
.article ul,.article ol{margin:0 0 1.3em 0;padding-left:1.3em}
.article li{margin-bottom:.5em}
.article em{font-style:italic}
.article .note{font-family:var(--sans);font-size:1.02rem;line-height:1.6;color:var(--ink-quiet);
  border-left:2px solid var(--accent);padding-left:18px}
.article-end{margin-block:clamp(44px,5vw,70px) 0;font-family:var(--sans);font-size:var(--fs-micro);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
  border-top:1px solid var(--rule);padding-top:20px}

/* --- the leaf: paper inset that interrupts the prose --- */
.leaf{
  background:var(--paper);color:var(--paper-ink);
  margin-block:clamp(36px,4.5vw,64px);
  padding:clamp(26px,3.4vw,46px) clamp(22px,3vw,44px);
}
.leaf a{color:var(--accent);border-bottom-color:rgba(164,53,31,.3)}
.leaf a:hover{color:var(--paper-ink);border-bottom-color:var(--paper-ink)}
.leaf__title{
  font-family:var(--sans);font-weight:600;font-size:1.42rem;line-height:1.16;letter-spacing:-.012em;
  color:var(--paper-ink);margin:12px 0 clamp(18px,2vw,28px);max-width:34ch;
}
.leaf--dark{background:var(--ground-lift);color:var(--ink);border:1px solid var(--rule)}
.leaf--dark .leaf__title{color:var(--ink)}

/* key-terms / list leaf */
.deflist{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(18px,2.2vw,32px);margin:0;padding:0}
.deflist li{display:flex;flex-direction:column;gap:7px;border-top:1px solid rgba(28,26,21,.16);padding-top:14px}
.deflist dfn,.deflist b{font-family:var(--sans);font-weight:600;font-style:normal;font-size:1.02rem;
  letter-spacing:.01em;color:var(--accent);display:block}
.deflist span{font-size:1.1rem;line-height:1.55;color:var(--paper-quiet)}
.leaf--dark .deflist li{border-top-color:var(--rule)}
.leaf--dark .deflist span{color:var(--ink-quiet)}
.leaf--dark .deflist dfn,.leaf--dark .deflist b{color:var(--accent-lift)}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(14px,2.4vw,36px);
  padding:16px 0;border-top:1px solid rgba(28,26,21,.16);align-items:baseline;
}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.35;letter-spacing:.01em;color:var(--accent)}
.t-what{font-size:1.12rem;line-height:1.55;color:var(--paper-quiet)}
.leaf--dark .timeline li{border-top-color:var(--rule)}
.leaf--dark .t-when{color:var(--accent-lift)}
.leaf--dark .t-what{color:var(--ink-quiet)}

/* plain list leaf */
.leaflist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:lf}
.leaflist li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;font-size:1.12rem;line-height:1.55;color:var(--paper-quiet)}
.leaflist li::before{counter-increment:lf;content:counter(lf,decimal-leading-zero);
  font-family:var(--sans);font-size:.82rem;letter-spacing:.1em;color:var(--accent);padding-top:.35em}
.leaf--dark .leaflist li{color:var(--ink-quiet)}
.leaf--dark .leaflist li::before{color:var(--accent-lift)}

/* article figure */
.article-figure{margin:clamp(32px,4vw,56px) 0}
.article-figure img{width:100%;object-fit:cover;filter:grayscale(.3) contrast(1.02)}
.article-figure figcaption,.gallery figcaption{
  font-family:var(--sans);font-size:.98rem;line-height:1.55;color:var(--ink-faint);
  margin-top:12px;max-width:62ch;
}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;margin:clamp(30px,4vw,50px) 0}
.gallery figure{margin:0}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:grayscale(.35) contrast(1.02)}

/* pullquote / blockquote / callout */
.pullquote{margin:clamp(34px,4vw,56px) 0;padding:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pullquote p{font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.34;color:var(--ink);margin:0;padding:28px 0}
.blockquote{margin:clamp(30px,3.4vw,46px) 0;padding-left:24px;border-left:2px solid var(--accent)}
.blockquote p{font-size:1.34rem;line-height:1.5;margin:0 0 .6em}
.blockquote cite{font-style:normal;font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.callout{margin:clamp(30px,3.4vw,46px) 0;background:var(--ground-lift);border:1px solid var(--rule);padding:24px 26px}
.callout p{margin:0;font-size:1.16rem;line-height:1.6;color:var(--ink-quiet)}

/* tables */
.datatable,.versus{width:100%;border-collapse:collapse;margin:clamp(28px,3.4vw,44px) 0;font-family:var(--sans);font-size:1rem}
.datatable caption,.versus caption{text-align:left;font-size:var(--fs-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);padding-bottom:12px}
.datatable th,.versus th{text-align:left;font-weight:600;font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--rule);padding:0 16px 10px 0}
.datatable td,.versus td{border-bottom:1px solid var(--rule-soft);padding:14px 16px 14px 0;
  vertical-align:top;color:var(--ink-quiet);line-height:1.5}
.datatable tr td:first-child,.versus tr td:first-child{color:var(--ink)}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:clamp(28px,3.4vw,44px) 0}
.statblock{background:var(--ground);padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--sans);font-weight:600;font-size:2.3rem;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.stat-label{font-family:var(--sans);font-size:.92rem;line-height:1.4;color:var(--ink-faint)}
.leaf .statrow{background:rgba(28,26,21,.16);border-color:rgba(28,26,21,.16)}
.leaf .statblock{background:var(--paper)}
.leaf .stat-num{color:var(--paper-ink)}
.leaf .stat-label{color:var(--paper-quiet)}

/* charts */
.chart{margin:clamp(28px,3.4vw,44px) 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-family:var(--sans);font-size:.98rem;color:var(--ink-faint);margin-top:14px}

/* cards / refs */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;margin:clamp(28px,3.4vw,44px) 0}
.profile-card{background:var(--ground-lift);border:1px solid var(--rule);padding:22px;display:flex;flex-direction:column;gap:10px}
.profile-card .p-photo{width:76px;height:76px;object-fit:cover;filter:grayscale(1)}
.profile-card h3{font-family:var(--sans);font-weight:600;font-size:1.18rem}
.profile-card .p-role{font-family:var(--sans);font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-lift);margin:0}
.profile-card p{font-size:1.08rem;line-height:1.55;color:var(--ink-quiet);margin:0}
.profile-card .p-links{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--sans);font-size:.95rem}
.profile-card .p-attr{font-family:var(--sans);font-size:.88rem;color:var(--ink-faint)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;margin:clamp(24px,3vw,40px) 0}
.org-card{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 14px;
  align-items:center;padding:16px;background:var(--ground-lift);border:1px solid var(--rule);color:inherit}
.org-card:hover{border-color:var(--ink-faint)}
.org-logo{grid-row:1/3;width:44px;height:44px;object-fit:contain;background:#100f0e}
.org-name{font-family:var(--sans);font-weight:600;font-size:1.02rem;align-self:end}
.org-host{font-family:var(--sans);font-size:.88rem;color:var(--ink-faint);align-self:start}
.entity-ref{white-space:nowrap}

.further-grid,.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:14px;margin:0;padding:0;list-style:none}
.related-links li{display:flex}
.further-grid a,.related-links a{
  display:flex;flex-direction:column;gap:8px;width:100%;padding:20px;
  background:var(--ground-lift);border:1px solid var(--rule);color:var(--ink);
  font-family:var(--sans);font-size:1.08rem;line-height:1.3;letter-spacing:-.008em;
}
.further-grid a:hover,.related-links a:hover{border-color:var(--ink-faint);color:var(--accent-lift)}
.related-links .rl-kicker{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}

.related{margin-block:clamp(40px,5vw,68px)}
.related__head{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:18px;border-top:1px solid var(--rule);padding-top:20px}

/* ---------- category / hub ---------- */
.cat-list{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list>li>a{
  display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1fr) auto;
  gap:clamp(14px,2.6vw,36px);align-items:baseline;padding:clamp(18px,2.4vw,26px) 0;
  border:0;color:inherit;
}
.cat-list>li>a:hover{background:var(--ground-lift)}
.cat-list>li>a:hover .cl-title{color:var(--accent-lift)}
.cl-no{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;color:var(--ink-faint)}
.cl-title{font-family:var(--sans);font-weight:600;font-size:1.32rem;line-height:1.2;letter-spacing:-.015em}
.cl-dek{font-size:1.08rem;line-height:1.5;color:var(--ink-quiet)}
.cl-read{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap}

.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(24px,3vw,44px)}
.hub__col h3{font-family:var(--sans);font-weight:600;font-size:1.42rem;letter-spacing:-.015em;margin-bottom:8px}
.hub__col h3 a{color:inherit;border:0}
.hub__col h3 a:hover{color:var(--accent-lift)}
.hub__col p{color:var(--ink-quiet);font-size:1.06rem;line-height:1.55;margin-bottom:16px}
.hub__col ul{list-style:none;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--rule);padding-top:14px}
.hub__col li a{font-family:var(--sans);font-size:1.02rem;line-height:1.35;color:var(--ink-quiet);border:0}
.hub__col li a:hover{color:var(--ink)}

/* section band figure */
.band-figure{margin:0 0 clamp(30px,4vw,48px)}
.band-figure img{width:100%;aspect-ratio:21/9;object-fit:cover;filter:grayscale(.4) contrast(1.02) brightness(.86)}
@media (max-width:700px){.band-figure img{aspect-ratio:3/2}}
.band-figure figcaption{font-family:var(--sans);font-size:.98rem;line-height:1.55;color:var(--ink-faint);margin-top:12px;max-width:64ch}

/* prose pages (about/contact/404) */
.page-prose{max-width:var(--measure)}
.page-prose h2{font-family:var(--sans);font-weight:600;font-size:1.6rem;letter-spacing:-.015em;margin:clamp(30px,3.4vw,44px) 0 14px}
.page-prose ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 1.2em}
.page-prose ul li{padding-left:18px;position:relative;color:var(--ink-quiet)}
.page-prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--accent)}

/* expander */
.expander{margin-top:16px}
.expander input{position:absolute;opacity:0;width:0;height:0}
.expander__more{display:none}
.expander input:checked~.expander__more{display:block}
.expander label{
  display:inline-block;margin-top:14px;cursor:pointer;font-family:var(--sans);font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lift);
  border-bottom:1px solid rgba(201,106,78,.4);padding-bottom:3px;
}
.expander label:hover{color:var(--ink);border-bottom-color:var(--ink)}
.expander input:checked~label .lbl-more{display:none}
.expander label .lbl-less{display:none}
.expander input:checked~label .lbl-less{display:inline}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .lead-piece{grid-template-columns:1fr}
  .quoteband__inner{grid-template-columns:1fr}
  .quoteband__aside{border-left:0;border-top:1px solid rgba(28,26,21,.18);padding-left:0;padding-top:22px}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__disclaimer{grid-column:1/-1}
}
@media (max-width:820px){
  :root{--fs-body:1.2rem;--fs-lead:1.38rem;--fs-h2:1.62rem}
  .walk__stop{grid-template-columns:52px minmax(0,1fr);row-gap:10px}
  .walk__blurb{grid-column:2}
  .walk__count{grid-column:2}
  .cat-list>li>a{grid-template-columns:44px minmax(0,1fr);row-gap:8px}
  .cl-dek,.cl-read{grid-column:2}
  .timeline li{grid-template-columns:1fr;gap:6px}
  .hero__body{padding-top:clamp(90px,18vh,160px)}
  .art-hero--photo .art-hero__body{margin-top:-60px}
  .sponsor,.sponsor.feat{flex:1 1 100%;min-width:0}
}
@media (max-width:640px){
  .foot__grid{grid-template-columns:1fr}
  .datatable,.versus{display:block;overflow-x:auto;white-space:normal}
  .related-links,.further-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .nav{gap:16px}
  .logo__word{font-size:1.16rem;letter-spacing:.26em}
  .logo__sub{white-space:normal;letter-spacing:.12em}
  .sponsor img{height:48px;padding:6px 10px}
}
@media print{
  body{background:#fff;color:#000}
  .masthead,.foot,.endpapers{display:none}
}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.endpapers__run .sponsor.sponsor img{height:56px!important}

/* kafka-clamp-2: the two back-endpaper leaves (rows 2 and 3) show two lines of copy and no more —
   operator's call on this build. The front leaf's three featured tiles keep their full sentence.
   display needs !important because sp-blurb-unhide above forces display:block. */
.endpapers__run .sponsor:not(.feat) .sponsor-blurb{
  display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;min-height:3em;max-height:3em;
}

/* op-nav-collapse: this nav printed 313px of stacked links at 390 before any content
   (6 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "block-fill", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (20px measured) the button carries the build's
   gutter (clamp(20px,5vw,64px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (860px here), where the button appears and the nav starts closed.
   Folded with the "display" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:860px){
  .menu-switch{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:auto;border:1px solid currentColor;border-radius:3px;padding:12px 16px;background:color-mix(in srgb, currentColor 9%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-switch-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .nav{display:none}
  .menu-switch-c:checked ~ .nav{display:flex}
  .wrap.masthead__bar:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .nav)){display:none}
}

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 802px at 390, 7% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 802 -> 570px (29% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(9px,3.89vw,56px)!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px}
}

/* op-money-columns: the supporters block ran one tile per row — 13 tiles,
   2301px at 390, 22% of the whole page. Two columns bring it to
   1592px (31% shorter). Checked before writing: no new overflow, smallest mark still
   119px wide, longest blurb 2 lines, tile heights 155-381px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.endpapers__run), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .endpapers__run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .endpapers__run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .endpapers__run > * *{min-width:0!important;max-width:100%}
    .endpapers__run img,.endpapers__run svg{max-width:100%;height:auto}

}

/* op-blurb-rows: money blurbs ran to 11 rows at 390, 608px of tier across
   3 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .endpapers__run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:72px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .endpapers__run (3 tiles), .endpapers__run (5 tiles), .endpapers__run (5 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .endpapers__run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .endpapers__run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .endpapers__run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 688px (88 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 1 of "min(var(--measure),100%) minmax(0,1fr)" (declared in .article) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article.article{grid-template-columns:min(798px, 100%) minmax(0,1fr)!important}
}
@media (min-width:1600px){
  article.article{grid-template-columns:min(clamp(798px, 55.417vw, 958px), 100%) minmax(0,1fr)!important}
  article.article > :is(p:not([class])){font-size:clamp(20.48px,1.4222vw,24.58px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (688px) and was left behind when the text went to 798px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  div.art-hero--photo h1{max-width:min(798px, 100%)!important}
}
@media (min-width:1600px){
  div.art-hero--photo h1{max-width:min(calc(clamp(798px, 55.417vw, 958px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-hover-pad */
a.walk__stop{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-hover-pad */
.cat-list > li > a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){text-wrap: balance; margin: 0px; font-weight: 400; overflow-wrap: break-word;}
.hub__col h2:where(.rt-h3){font-family: var(--sans); font-weight: 600; font-size: 1.42rem; letter-spacing: -0.015em; margin-bottom: 8px;}
.hub__col h2:where(.rt-h3) a{color: inherit; border: 0px;}
.hub__col h2:where(.rt-h3) a:hover{color: var(--accent-lift);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.article > figure.article-figure.wide > img,
  div.art-hero.art-hero--photo > div.art-hero__img > img,
  div.cards > a.card > img.card__img,
  div.lead-piece > figure.lead-piece__fig > img,
  div.wrap > figure.band-figure > img,
  section.hero > div.hero__img > img){height:auto}
/* op-img-dims:end */