/* La Sobremesa — newspaper site
   off-white grain paper + black ink (the logo), highlighter yellow (the authors' marks),
   blue only comes from the Grainwave illustrations */
:root {
  --paper: #f4f3ef;
  --card: #fbf9f3;  /* boxes: a warm paper white, pure #fff reads blue next to the paper */
  --ink: #0e0e0d;
  --ink-2: #3d3c39;
  --ink-3: #74716b;
  --hair: #d3d0c8;
  --mark: #ffd966;
  --mark-2: #f6d23a;

  --head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap: 1240px;
  --gutter: 16px;
  --col: 24px;
}
@media (min-width: 720px) { :root { --gutter: 32px; --col: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.5 var(--serif);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* paper grain, like the brand header */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 100;
  opacity: .28; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.4  0 0 0 0 0.4  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--mark-2); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 200; }
.skip:focus { left: 8px; }

/* highlighter hover on headlines, like the yellow marks in the letters */
.card__title a, .lead__title a, .hlist a, .toc__t, .edition__sub, .edcard__t {
  background-image: linear-gradient(var(--mark), var(--mark));
  background-size: 0 .42em; background-position: 0 88%; background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.card__title a:hover, .lead__title a:hover, .hlist a:hover, .toc a:hover .toc__t, .edition:hover .edition__sub, .edcard:hover .edcard__t {
  background-size: 100% .42em;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: calc(680px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- small type ---------- */
.eyebrow, .kicker, .meta, .more, .topbar, .sections, .btn, .rulehead h2, .toc__sec, .row__date, .edition__n {
  font-family: var(--head);
}
.eyebrow { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.kicker {
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  background: var(--mark); padding: 3px 6px 2px; line-height: 1.2;
}
.kicker:hover { background: var(--ink); color: var(--mark); }
.kicker--issue { background: none; color: var(--ink-3); padding-left: 8px; font-weight: 700; }
.kicker--issue:hover { background: none; color: var(--ink); }
.meta { margin: 0; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.meta span { margin: 0 4px; }
.more { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink); border-bottom: 2px solid var(--mark-2); }
.more:hover { background: var(--mark); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  border: 2px solid var(--ink); border-radius: 999px;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--mark); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--light { background: var(--mark); color: var(--ink); border-color: var(--mark); }
.btn--light:hover { background: var(--paper); border-color: var(--paper); }
.btn--sub { min-height: 36px; padding: 0 16px; font-size: 13px; }

/* ---------- top bar + masthead ---------- */
.topbar { border-bottom: 1px solid var(--hair); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.topbar__in { display: flex; align-items: center; gap: 16px; min-height: 38px; }
.topbar__ed { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.topbar__sponsor { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.topbar__sponsor img { height: 15px; width: auto; }
.topbar__sponsor:hover { color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mark-2); box-shadow: 0 0 0 3px rgba(246, 210, 58, .3); }
@media (max-width: 719px) { .topbar__date { display: none; } }

.masthead__in {
  display: grid; grid-template-columns: 1fr minmax(0, 2.4fr) 1fr; align-items: center; gap: 24px;
  padding-top: 18px; padding-bottom: 16px;
}
.masthead__name { grid-column: 2; display: block; }
.masthead__name img { width: 100%; max-width: 520px; margin: 0 auto; mix-blend-mode: multiply; }
.masthead--big .masthead__in { padding-top: 34px; padding-bottom: 28px; }
.masthead--big .masthead__name img { max-width: 900px; }
.masthead__side { margin: 0; font: italic 400 15px/1.35 var(--serif); color: var(--ink-2); }
.masthead__side--r { text-align: right; }
@media (max-width: 899px) {
  .masthead__in { grid-template-columns: 1fr; gap: 10px; }
  .masthead__name { grid-column: 1; }
  .masthead__side { display: none; }
  .masthead--big .masthead__side--l { display: block; order: 2; text-align: center; }
  .masthead--big .masthead__side--l br { display: none; }
}

.avatar { display: inline-block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); background: var(--mark); flex: none; }
.avatar--txt { display: inline-grid; place-items: center; font: 800 16px var(--head); }
.avatar--l { width: 56px; height: 56px; }

.sections {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.sections__in { display: flex; align-items: center; gap: 12px; min-height: 50px; }
.sections__home { display: none; padding-right: 14px; border-right: 1px solid var(--hair); }
.sections__home img { width: 150px; mix-blend-mode: multiply; }
.sections.is-stuck .sections__home { display: block; }
.sections__list { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.sections__list::-webkit-scrollbar { display: none; }
.sections__list a {
  padding: 14px 10px; font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  font-stretch: 90%;
}
.sections__list a:hover, .sections__list a[aria-current] { background: var(--mark); }
@media (max-width: 899px) {
  .sections__list { justify-content: flex-start; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .sections.is-stuck .sections__home { display: none; }
}

/* ---------- section headers ---------- */
.rulehead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 3px solid var(--ink); padding-top: 10px; margin-bottom: 20px;
}
.rulehead h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; font-stretch: 85%; }
.rulehead h2 a:hover { background: var(--mark); color: var(--ink); }
.rulehead__note { font: italic 16px/1.3 var(--serif); color: var(--ink-2); }
.rulehead--light { border-color: var(--paper); }

/* ---------- headlines ---------- */
.card__title, .lead__title, .story__title, .pagehead h1, .edhead h1, .story__body h2, .edcard__t, .writer h3,
.front__edition h2, .band--sub h2, .toc__t, .hlist a, .edition__sub {
  font-family: var(--head); font-stretch: 88%; letter-spacing: -.015em;
}

/* ---------- cards ---------- */
.card { display: flex; flex-direction: column; gap: 10px; }
.card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.card__img img, .lead__img img, .row__img img, .edition__img img, .edcard__img img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;
}
.is-portrait img { object-position: 50% 30%; }
.card:hover .card__img img, .lead:hover .lead__img img, .row:hover .row__img img { transform: scale(1.03); }
.card__kick { display: flex; flex-wrap: wrap; align-items: center; }
.card__title { margin: 2px 0 0; font-size: 22px; font-weight: 800; line-height: 1.08; text-wrap: balance; }
.card__dek { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.card--t { padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.card--t:last-child { border-bottom: 0; }
.card--s .card__title { font-size: 20px; }
.card--l .card__title { font-size: clamp(30px, 4vw, 46px); font-weight: 900; line-height: 1; }
.card--l .card__dek { font-size: 19px; }

.hlist { list-style: none; margin: 0; padding: 0; }
.hlist li { padding: 12px 0; border-top: 1px solid var(--hair); display: grid; gap: 4px; align-content: start; }
.hlist a { justify-self: start; font-size: 17px; font-weight: 750; line-height: 1.15; }
.hlist--num { counter-reset: n; }
.hlist--num li { counter-increment: n; grid-template-columns: 34px 1fr; column-gap: 8px; }
.hlist--num li::before { content: counter(n); grid-row: span 2; font: 900 30px/1 var(--head); font-stretch: 75%; }

/* ---------- front page ---------- */
.front { display: grid; gap: var(--col); padding: 28px 0 48px; }
@media (min-width: 1000px) {
  .front { grid-template-columns: 1fr 2.1fr 1fr; }
  .front__side { padding-right: var(--col); border-right: 1px solid var(--hair); }
  .front__edition { padding-left: var(--col); border-left: 1px solid var(--hair); }
}
@media (max-width: 999px) { .front__lead { order: -1; } }
@media (min-width: 640px) and (max-width: 999px) {
  .front { grid-template-columns: 1fr 1fr; }
  .front__lead { grid-column: 1 / -1; }
}
.front__side { display: flex; flex-direction: column; gap: 20px; }
.lead { display: flex; flex-direction: column; gap: 12px; }
.lead__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); margin-bottom: 4px; }
.lead__title { margin: 0; font-size: clamp(36px, 4.8vw, 62px); font-weight: 900; line-height: .98; text-wrap: balance; }
.lead__dek { margin: 0; font-size: 20px; line-height: 1.45; color: var(--ink-2); }
.front__edition h2 { margin: 0; font-size: 30px; font-weight: 900; line-height: 1; }
.front__edsub { margin: 8px 0 14px; font-style: italic; color: var(--ink-2); font-size: 16px; }
.front__edition .more { margin-top: 14px; }

/* black bands */
.band { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.band--prev { padding: 36px 0 48px; }
.band--prev .rulehead h2, .band--prev .rulehead__note { color: var(--paper); }
.band .meta { color: rgba(244, 243, 239, .62); }
.band .kicker--issue { color: rgba(244, 243, 239, .62); }
.band .card__title a { background-image: linear-gradient(rgba(255, 217, 102, .5), rgba(255, 217, 102, .5)); }
.band .card__img { background: #222; }
.band .plate { background: var(--paper); color: var(--ink); }
.band .plate__sec { color: var(--ink); }
.grid4, .grid3 { display: grid; gap: var(--col); }
@media (min-width: 640px) { .grid4, .grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid4 { grid-template-columns: repeat(4, 1fr); } .grid3 { grid-template-columns: repeat(3, 1fr); } }

/* section blocks */
.secgrid { display: grid; gap: 48px var(--col); padding: 48px 0 24px; }
@media (min-width: 720px) { .secgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .secgrid { grid-template-columns: repeat(3, 1fr); } }
.secblock { display: flex; flex-direction: column; gap: 14px; }
.secblock .rulehead { margin-bottom: 4px; }

/* writers: framed like the sponsor block */
.writers { padding-top: 56px; padding-bottom: 8px; }
.writers__in { display: grid; align-items: stretch; border: 2px solid var(--ink); background: var(--card); }
.writers__list { display: grid; gap: 24px 48px; padding: 32px; }
@media (min-width: 820px) { .writers__list { grid-template-columns: 1fr 1fr; } .writers__list .eyebrow { grid-column: 1 / -1; } }
.writers__list .eyebrow { margin: 0; }
.writers__list .eyebrow a:hover { background: var(--mark); }
.writer h3 { margin: 0 0 10px; font-size: 34px; font-weight: 900; line-height: 1; }
.writer h3 a { display: inline-flex; align-items: center; gap: 12px; }
.writer h3 img[alt="Phantom"] { height: 30px; width: auto; }
.writer p { margin: 0 0 10px; }
.writer .meta a { color: var(--ink); border-bottom: 2px solid var(--mark-2); }

/* subscribe band */
.band--sub { padding: 0; }
.band--sub .band__in { display: grid; gap: 0; align-items: center; }
@media (min-width: 860px) { .band--sub .band__in { grid-template-columns: 1fr 1.15fr; } }
.band__text { padding: 48px 0; }
@media (min-width: 860px) { .band__text { padding: 56px 40px 56px 0; } }
.band--sub h2 { margin: 0 0 12px; font-size: clamp(42px, 6vw, 76px); font-weight: 900; line-height: .95; }
.band--sub p { font-size: 19px; max-width: 30em; margin: 0 0 24px; color: rgba(244, 243, 239, .85); }
.band--sub .eyebrow { color: var(--mark); }
.band__art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 32px; }
@media (min-width: 860px) { .band__art { margin: 0; } }

/* sponsor */
.sponsorblock { padding-top: 0; padding-bottom: 56px; }
.sponsorblock__in { display: grid; align-items: stretch; border: 2px solid var(--ink); background: var(--card); transition: box-shadow .2s; }
@media (min-width: 760px) { .sponsorblock__in { grid-template-columns: 1fr 1.2fr; } }
.sponsorblock__art { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sponsorblock__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 32px; }
.sponsorblock__logo { width: 220px; height: auto; }
.sponsorblock__line { font: 19px/1.45 var(--serif); color: var(--ink-2); max-width: 30em; }
.sponsorblock__in:hover { box-shadow: 6px 6px 0 var(--mark-2); }

/* editions strip */
.editions-strip { padding-top: 56px; padding-bottom: 56px; }
.editions {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
  gap: 20px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory;
}
.edition { display: grid; gap: 6px; align-content: start; scroll-snap-align: start; }
.edition__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); display: block; }
.edition__n { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.edition__sub { justify-self: start; font-size: 16px; font-weight: 700; line-height: 1.2; }

/* typeset plate for chapters without a picture */
.plate {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  width: 100%; height: 100%; padding: 7% 8%;
  background: var(--ink); color: var(--paper); overflow: hidden;
}
.plate::after { content: ""; position: absolute; right: 8%; top: 8%; width: 26px; height: 10px; background: var(--mark); }
.plate__sec { font: 800 11px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--mark); }
.plate__t {
  font: 900 clamp(20px, 2.3vw, 34px)/.98 var(--head); font-stretch: 85%; letter-spacing: -.015em; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.plate__no { font: italic 13px/1 var(--serif); opacity: .7; }
.card--s .plate__t, .row__img .plate__t { font-size: clamp(16px, 1.6vw, 22px); }
.row__img .plate { padding: 10px; }
.row__img .plate__sec, .row__img .plate__no, .row__img .plate::after { display: none; }
.lead__img .plate__t { font-size: clamp(32px, 4.4vw, 58px); }

/* ---------- article ---------- */
.story { padding-top: 40px; }
.story__head { text-align: center; }
.story__head .card__kick { justify-content: center; }
.story__title { margin: 16px 0; font-size: clamp(38px, 6.4vw, 76px); font-weight: 900; line-height: .96; text-wrap: balance; }
.story__dek { margin: 0 auto; max-width: 34em; font: italic 400 21px/1.45 var(--serif); color: var(--ink-2); }
.story__by { margin: 24px 0 0; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.story__by p { margin: 0; font: 700 15px/1.4 var(--head); display: flex; align-items: center; justify-content: center; gap: 10px; }
.story__by a { border-bottom: 2px solid var(--mark-2); }
.story__by .meta { margin-top: 4px; font-weight: 500; display: block; }
.story__pfps { display: inline-flex; }
.story__pfps .avatar { width: 34px; height: 34px; }
.story__pfps .avatar + .avatar { margin-left: -8px; }
.story__hero { max-width: 1100px; margin: 32px auto 0; padding: 0 var(--gutter); }
.story__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.story__body figcaption { margin-top: 8px; font: 13px/1.4 var(--head); color: var(--ink-3); }
.story__nohero { max-width: 680px; margin: 32px auto 0; border: 0; border-top: 3px solid var(--ink); }
.story__body { padding-top: 36px; font-size: 20px; line-height: 1.62; }
.story__body > p { margin: 0 0 1.05em; }
.story__body > .lede::first-letter {
  float: left; font: 900 4.2em/.82 var(--head); font-stretch: 80%; margin: .05em .1em 0 0;
  background: var(--mark); padding: .06em .08em .02em;
}
.story__body a { text-decoration: underline; text-decoration-color: var(--mark-2); text-decoration-thickness: 3px; text-underline-offset: 2px; }
.story__body a:hover { background: var(--mark); }
.story__body h2 { margin: 1.8em 0 .5em; font-size: 30px; font-weight: 900; line-height: 1.05; }
.story__body h3 { margin: 1.5em 0 .4em; font: 800 15px/1.3 var(--head); letter-spacing: .06em; text-transform: uppercase; }
.story__body ul, .story__body ol { margin: 0 0 1.2em; padding-left: 1.2em; }
.story__body li { margin-bottom: .5em; }
.story__body li::marker { font-weight: 800; }
.story__body strong { font-weight: 650; }
.story__body p.speaker {
  margin: 2em 0 .6em; padding: 5px 8px 4px; width: max-content; background: var(--mark);
  font: 800 13px/1 var(--head); letter-spacing: .1em; text-transform: uppercase;
}
.pull {
  margin: 1.6em 0; padding: 14px 0 14px 22px; border-left: 6px solid var(--mark-2);
  font: 800 27px/1.18 var(--head); font-stretch: 88%; letter-spacing: -.01em;
}
.pull p { margin: 0; }
.pull strong, .pull em { font-weight: inherit; font-style: inherit; }
.note { margin: 1.5em 0; padding: 20px 22px; background: var(--card); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--mark-2); font-size: 18px; }
.note p { margin: 0 0 .6em; } .note p:last-child { margin: 0; }
.inline { margin: 1.8em 0; }
@media (min-width: 900px) { .inline { margin-left: -80px; margin-right: -80px; } }
.dinkus { border: 0; height: auto; margin: 2em 0; text-align: center; }
.dinkus::before { content: "■ ■ ■"; font-size: 10px; letter-spacing: 1.2em; }
.tweet {
  display: grid; gap: 10px; margin: 1.6em 0; padding: 18px 20px;
  border: 2px solid var(--ink); background: var(--card); text-decoration: none !important;
}
.story__body .tweet:hover { box-shadow: 5px 5px 0 var(--mark-2); background: var(--card); }
.tweet-who { font: 13px/1.3 var(--head); color: var(--ink-3); }
.tweet-who b { color: var(--ink); }
.tweet-text { font-size: 17px; line-height: 1.5; }
.tweet img { max-height: 340px; width: 100%; object-fit: cover; }
.tweet-go { font: 700 13px var(--head); }
.media-note { font: 15px/1.5 var(--head) !important; padding: 12px 16px; border: 2px dashed var(--ink-3); }

.story__foot { padding-top: 20px; padding-bottom: 56px; }
.story__src { margin: 32px 0 20px; padding-top: 16px; border-top: 3px solid var(--ink); font: italic 17px/1.5 var(--serif); color: var(--ink-2); }
.story__src a { font-style: normal; font-weight: 600; border-bottom: 2px solid var(--mark-2); color: var(--ink); }
.story__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.story__sponsor { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font: 600 12px var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.story__sponsor img { height: 18px; width: auto; }
.after { display: grid; gap: 48px; padding-bottom: 64px; }

/* ---------- listings ---------- */
.pagehead { padding: 40px 0 28px; border-bottom: 3px solid var(--ink); margin-bottom: 32px; }
.pagehead h1 { margin: 0 0 12px; font-size: clamp(48px, 8vw, 104px); font-weight: 900; line-height: .9; text-transform: uppercase; font-stretch: 80%; }
.pagehead p { margin: 0; font-size: 20px; color: var(--ink-2); max-width: 40em; }
.pagehead p a { border-bottom: 2px solid var(--mark-2); color: var(--ink); }
.listing { display: grid; gap: 40px var(--col); padding-bottom: 64px; }
@media (min-width: 1000px) {
  .listing { grid-template-columns: 1fr 1.25fr; align-items: start; }
  .listing > .card { position: sticky; top: 72px; }
}
.rows { display: grid; }
.row { display: grid; grid-template-columns: 1fr 120px; gap: 6px 20px; padding: 20px 0; border-top: 1px solid var(--hair); }
.row:first-child { border-top: 0; padding-top: 0; }
.row__date { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.row__date br { display: none; }
.row__date a { margin-left: 8px; color: var(--ink-3); }
.row__body { display: grid; gap: 6px; align-content: start; }
.row__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
@media (min-width: 640px) {
  .row { grid-template-columns: 110px 1fr 180px; }
  .row__date { grid-column: auto; }
  .row__date br { display: block; }
  .row__date a { margin-left: 0; }
}

/* ---------- edition page ---------- */
.edhead { display: grid; gap: var(--col); padding: 40px 0 32px; align-items: center; }
@media (min-width: 900px) { .edhead { grid-template-columns: 1fr 1.2fr; } }
.edhead h1 { margin: 0; font-size: clamp(52px, 8vw, 104px); font-weight: 900; line-height: .88; text-transform: uppercase; font-stretch: 78%; }
.edhead__sub { margin: 14px 0 18px; font: italic 24px/1.3 var(--serif); color: var(--ink-2); }
.edhead__intro { font-size: 18px; color: var(--ink-2); margin-bottom: 16px; }
.edhead__intro p { margin: 0 0 .6em; }
.edhead__cover { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.edhead__cover img { width: 100%; height: 100%; object-fit: cover; }
.toc { list-style: none; margin: 0 0 48px; padding: 0; counter-reset: t; border-top: 3px solid var(--ink); }
.toc li { counter-increment: t; border-bottom: 1px solid var(--hair); }
.toc a { display: grid; grid-template-columns: 64px 1fr; gap: 6px 16px; padding: 18px 0; align-items: start; }
.toc a::before { content: counter(t, decimal-leading-zero); grid-row: span 3; font: 900 40px/1 var(--head); font-stretch: 75%; }
.toc__sec { justify-self: start; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--mark); padding: 3px 6px 2px; }
.toc__t { justify-self: start; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.08; }
.edhead__outro { font-style: italic; color: var(--ink-2); margin-bottom: 40px; }
.edpager { display: flex; justify-content: space-between; padding: 20px 0 64px; border-top: 3px solid var(--ink); font: 800 15px var(--head); }
.edpager a:hover { background: var(--mark); }

.edgrid { display: grid; gap: 40px var(--col); padding-bottom: 64px; }
@media (min-width: 640px) { .edgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .edgrid { grid-template-columns: repeat(3, 1fr); } }
.edcard { display: grid; gap: 8px; align-content: start; }
.edcard__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); margin-bottom: 6px; }
.edcard .eyebrow { margin: 0; }
.edcard__t { justify-self: start; font-size: 30px; font-weight: 900; line-height: 1; text-transform: uppercase; font-stretch: 80%; }
.edcard__s { font: italic 17px/1.35 var(--serif); color: var(--ink-2); }

/* about */
.about { display: grid; gap: var(--col); padding-bottom: 64px; align-items: start; }
@media (min-width: 860px) { .about { grid-template-columns: 1fr 1fr; } }
.about .writer { padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--hair); }
.about .writer p a { border-bottom: 2px solid var(--mark-2); }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding: 56px 0 24px; }
.footer a:hover { color: var(--mark); }
.footer__in { display: grid; gap: 32px; }
@media (min-width: 820px) { .footer__in { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer__name img { width: 100%; max-width: 340px; filter: invert(1); mix-blend-mode: screen; }
.footer__brand p { margin: 14px 0 0; font-style: italic; color: rgba(244, 243, 239, .7); max-width: 22em; }
.footer__col { display: flex; flex-direction: column; gap: 8px; font: 500 14px/1.4 var(--head); }
.footer__col h2 { margin: 0 0 6px; font: 800 12px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--mark); }
.footer__col p { margin: 6px 0 0; color: rgba(244, 243, 239, .7); }
.sponsor img { width: 140px; height: auto; }
.footer__base { margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(244, 243, 239, .2); font: 12px var(--head); color: rgba(244, 243, 239, .55); }

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

/* ---------- section banners: sideways scroll, chips filter ---------- */
.strips { padding: 40px 0 0; }
.strip { padding-bottom: 28px; }
.strip + .strip { padding-top: 28px; border-top: 1px solid var(--hair); }
.strip__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; border-top: 3px solid var(--ink); padding-top: 14px; }
.strips .strip + .strip .strip__head { border-top: 0; padding-top: 0; }
.strip__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding-right: 24px; mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.strip__chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 38px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: transparent;
  font: 800 13px/1 var(--head); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); cursor: pointer;
}
.chip span { font-weight: 600; opacity: .55; margin-left: 2px; }
.chip:hover { background: var(--mark); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] span { opacity: .7; }
.strip__nav { display: flex; gap: 8px; flex: none; }
.strip__btn {
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper);
  font: 800 18px/1 var(--head); cursor: pointer; color: var(--ink);
}
.strip__btn:hover:not(:disabled) { background: var(--mark); }
.strip__btn:disabled { opacity: .25; cursor: default; }
@media (max-width: 719px) { .strip__nav { display: none; } }
.strip__track {
  /* same column as the page: starts flush left, the last card is cut in half at the right edge */
  display: flex; gap: var(--col); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  width: min(100% - 2 * var(--gutter), var(--wrap) - 2 * var(--gutter)); margin: 0 auto; padding-bottom: 4px;
  scrollbar-width: none;
  --visible: 1.5;
}
.strip__track::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .strip__track { --visible: 2.5; } }
@media (min-width: 1000px) { .strip__track { --visible: 3.5; } }
.strip__track:focus-visible { outline-offset: 3px; }
.strip__item {
  flex: 0 0 calc((100% - (var(--visible) - .5) * var(--col)) / var(--visible));
  scroll-snap-align: start;
}
.strip__item[hidden] { display: none; }

/* small sponsor card at the foot of the front page's left column */
.minisponsor { display: none; }
@media (min-width: 1000px) {
  .minisponsor {
    display: flex; align-items: center; gap: 12px; padding: 8px;
    border: 2px solid var(--ink); background: var(--card); transition: box-shadow .2s;
  }
  .minisponsor:hover { box-shadow: 5px 5px 0 var(--mark-2); }
  .minisponsor__pfps { display: flex; gap: 4px; flex: none; }
  .minisponsor__pfps img { width: 46px; height: 58px; object-fit: cover; border: 2px solid var(--ink); }
  .minisponsor__text { display: flex; flex-direction: column; gap: 6px; }
  .minisponsor__text { min-width: 0; }
  .minisponsor__text .eyebrow { margin: 0; font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
  .minisponsor__text img { width: min(110px, 100%); height: auto; }
}
.front__picks { display: flex; flex-direction: column; gap: 20px; }
/* wide screens: the stories spread to meet the small cards, no gap above them */
@media (min-width: 1000px) { .front__picks.is-filled { flex: 1; justify-content: space-between; } }
.front__picks .card--t:last-child { border-bottom: 1px solid var(--hair); }

/* the two small cards sit together at the foot of the left column */
.minicards { display: none; }
@media (min-width: 1000px) {
  .minicards { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
  .minicontact__img { width: 96px; height: 58px; flex: none; object-fit: cover; border: 2px solid var(--ink); }
  .minicontact__cta { font: 800 clamp(14px, 1.25vw, 17px)/1.1 var(--head); font-stretch: 85%; letter-spacing: -.01em; white-space: nowrap; }
  .minicontact:hover .minicontact__cta { text-decoration: underline; text-decoration-color: var(--mark-2); text-decoration-thickness: 3px; }
}

/* about page: a 2×2 wall of Grainwave illustrations, as tall as the team column; each tile cross-fades on its own */
.rotator { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(160px, 1fr); gap: 8px; height: 100%; }
.rotator__tile { position: relative; overflow: hidden; border: 2px solid var(--ink); background: var(--ink); }
.rotator__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.rotator__tile img.is-on { opacity: 1; }
@media (min-width: 860px) { .about { align-items: stretch; } }
@media (max-width: 859px) { .rotator { grid-auto-rows: 150px; } .rotator__tile:nth-child(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .rotator__tile img { transition: none; } }