:root{
  --ink:#0b0b0c; --bg:#ffffff; --line:#e6e6e6; --grey:#77777c; --soft:#a8a8ad;
  --sans:"Inter Tight",system-ui,-apple-system,sans-serif; --serif:"Newsreader",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);min-height:100vh}
a{color:inherit;text-decoration:none}

.bar{position:sticky;top:0;z-index:5;display:flex;align-items:baseline;gap:1rem;padding:1.1rem clamp(1rem,2.4vw,2rem);background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.mark{font-family:var(--sans);font-weight:600;font-size:1.2rem;letter-spacing:-.02em}
.tag{font-size:1rem;font-weight:400;letter-spacing:-.01em;color:var(--soft)}
.edition{margin-left:auto;font-size:.82rem;letter-spacing:-.005em;color:var(--grey)}
.edition .sep{margin:0 .5em;color:var(--soft)}
.daynav{display:flex;gap:1rem;font-size:.95rem;margin-left:1.4rem}
.daynav a.off{opacity:.2;pointer-events:none}

/* the wall */
.wall{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(34px,3.4vw,52px);grid-auto-flow:dense;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.page{position:relative;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;padding:clamp(1.1rem,1.9vw,2rem);
  transition:background-color .35s ease,color .35s ease}
.page:hover{background:var(--ink);color:#fff}
.page:hover .dateline,.page:hover .dek,.page:hover .mast .name{color:rgba(255,255,255,.62)}

.mast{display:flex;align-items:baseline;gap:.5rem}
.mast .name{font-weight:600;font-size:.82rem;letter-spacing:-.005em;line-height:1.2;color:var(--ink);white-space:nowrap;transition:color .35s}
.dateline{font-size:.82rem;letter-spacing:-.005em;color:var(--soft);padding-top:.15rem;transition:color .35s}
.hl{font-family:var(--sans);font-weight:600;line-height:1.04;letter-spacing:-.035em;margin:auto 0 0;padding-top:1rem;text-wrap:balance}
.dek{font-weight:400;line-height:1.42;letter-spacing:-.005em;color:var(--grey);margin-top:.8rem;max-width:40em;transition:color .35s;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.en{position:absolute;top:clamp(1.1rem,1.9vw,2rem);right:clamp(1.1rem,1.9vw,2rem);font-size:.7rem;font-weight:500;letter-spacing:.02em;color:var(--soft)}

/* lead page: inverted */
.page:nth-child(1){background:var(--ink);color:#fff}
.page:nth-child(1) .mast .name{color:#fff}
.page:nth-child(1) .dateline{color:rgba(255,255,255,.5)}
.page:nth-child(1) .dek{color:rgba(255,255,255,.66)}
.page:nth-child(1):hover{background:#1c1c1f}

/* paste-up for the 12 pages of an edition */
.page:nth-child(1){grid-column:1/7;grid-row:1/13}
.page:nth-child(2){grid-column:7/13;grid-row:1/7}
.page:nth-child(3){grid-column:7/10;grid-row:7/13}
.page:nth-child(4){grid-column:10/13;grid-row:7/13}
.page:nth-child(5){grid-column:1/5;grid-row:13/22}
.page:nth-child(6){grid-column:5/9;grid-row:13/18}
.page:nth-child(7){grid-column:5/9;grid-row:18/22}
.page:nth-child(8){grid-column:9/13;grid-row:13/18}
.page:nth-child(9){grid-column:9/13;grid-row:18/22}
.page:nth-child(10){grid-column:1/5;grid-row:22/28}
.page:nth-child(11){grid-column:5/9;grid-row:22/28}
.page:nth-child(12){grid-column:9/13;grid-row:22/28}
.page:nth-child(n+13){grid-column:span 4;grid-row:span 6}
.s-xl .dek{font-size:clamp(1.02rem,1.3vw,1.2rem);-webkit-line-clamp:2} .s-l .dek,.s-w .dek{font-size:.92rem;-webkit-line-clamp:2}
.s-m .dek,.s-s .dek{display:none}
.s-xl .hl{font-size:clamp(2.4rem,4.1vw,4rem)} .s-w .hl,.s-l .hl{font-size:clamp(1.6rem,2.3vw,2.25rem)} .s-m .hl,.s-s .hl{font-size:clamp(1.15rem,1.5vw,1.45rem);letter-spacing:-.025em;line-height:1.12}

.empty{grid-column:1/-1;background:var(--bg);text-align:center;color:var(--grey);padding:5rem 0}

.foot{padding:2.6rem clamp(1rem,2.4vw,2rem) 3rem;display:grid;grid-template-columns:1fr auto;gap:1.5rem 3rem;align-items:end}
.foot p{font-size:.72rem;line-height:1.6;color:var(--soft);max-width:44rem}
.foot .credit{grid-column:2;grid-row:1/3;font-size:.95rem;font-weight:500;letter-spacing:-.01em;color:var(--ink);max-width:none;align-self:end}
.foot .credit a{border-bottom:1px solid var(--line);transition:border-color .2s}
.foot .credit a:hover{border-color:var(--ink)}
.archive h2{font-size:.82rem;font-weight:600;color:var(--soft);margin-bottom:.7rem}
.archive ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.archive a{font-size:.95rem;font-weight:500;letter-spacing:-.01em}
.archive a small{font-size:.75rem;font-weight:400;color:var(--soft);margin-right:.35rem}
.archive a[aria-current]{text-decoration:underline;text-underline-offset:4px}

.page{opacity:0;animation:fade .6s ease forwards}
@keyframes fade{to{opacity:1}}
.still .page{animation:none;opacity:1}

@media (max-width:1000px){
  .wall{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .page:nth-child(n){grid-column:span 1;grid-row:auto;min-height:15rem}
  .page:nth-child(1),.page:nth-child(2),.page:nth-child(5){grid-column:1/-1}
  .page:nth-child(1){min-height:28rem}
}
@media (max-width:560px){
  .tag,.edition .sep,#edition{display:none}
  .page:nth-child(n){grid-column:1/-1;min-height:9rem}
  .page:nth-child(1){min-height:24rem}
  .foot{grid-template-columns:1fr}
  .foot .credit{grid-column:1;grid-row:auto}
}
@media (prefers-reduced-motion:reduce){.page{animation:none;opacity:1}.page{transition:none}}