/* ==========================================================================
   NESIKA — resource-economy newsroom
   Bitter (slab headlines) + Source Sans 3 (UI and body). Charcoal bands, bone paper, copper accents,
   square corners, topographic contour texture (generic elevation lines, generated, no cultural motifs).
   Mobile first. Breakpoints: 40em (tablet), 60em (desktop grid), 68.75em (article three-column).
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --char: #17191A;
  --char-2: #202426;
  --char-deep: #0F1112;
  --bone: #F4F1EA;
  --bone-2: #E9E3D6;
  --copper: #B8622B;      /* decoration, large/bold type on bone (3.9:1) */
  --copper-ink: #96491C;  /* small text and links on bone (5.7:1) */
  --copper-lt: #E08A4F;   /* small text on charcoal (6.6:1) */
  --river: #2C5E6E;
  --spruce: #3E5C46;
  --ink: #17191A;
  --ink-2: #34332F;
  --muted: #5C5A54;       /* 6.1:1 on bone */
  --rule: #D3CAB8;
  --on-dark: #F4F1EA;
  --on-dark-2: #BDBBB6;   /* 9.2:1 on charcoal */
  --on-dark-3: #DAD7CF;
  --focus: var(--copper-ink);

  --f-slab: "Bitter", "Roboto Slab", Rockwell, Georgia, serif;
  --f-sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --wrap: 80rem;
  --gut: clamp(1rem, 4vw, 2.5rem);
  --gap: clamp(1.25rem, 2.5vw, 2rem);
  --sp-band: clamp(2rem, 5vw, 3.75rem);
  --sp-sec: clamp(2.5rem, 5vw, 4rem);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* seamless 560px contour tile, used as a mask so it can take any colour */
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cpath d='M156 427l-12 5-10 8-6 8-6 12-3 12 1 8 5 8 4 4 7 3 8 2 8-1 8-2 8-5 8-6 6-7 4-8 3-8 2-8-1-8-2-5-4-6-4-3-8-3-8-1-8 1zM152 412l-11 4-8 4-13 11-7 9-5 8-6 16-1 8 0 8 1 8 2 5 4 6 6 5 6 3 8 3 12 1 12-1 12-5 10-5 10-9 9-11 6-12 4-12 1-12-1-12-4-8-7-7-8-5-8-2-12 0-12 2zM164 396l-12 1-12 4-12 5-8 5-8 7-6 6-6 8-6 12-5 12-4 12-1 12 0 8 2 8 4 8 6 7 8 5 12 5 16 2 16-2 12-3 16-8 12-10 11-12 7-12 6-16 3-16-1-16-4-12-6-8-5-4-7-4-12-3-16-1zM156 384l-16 2-12 3-12 5-8 5-8 7-6 6-6 9-6 11-6 16-6 16-3 16-1 12 2 12 4 8 8 8 8 5 16 5 20 3 20-1 16-4 16-8 16-13 13-15 10-16 7-20 3-20-1-16-3-8-4-8-9-10-8-5-8-3-16-2-20 0zM140 372l-28 3-16 5-6 4-6 6-9 14-7 18-14 42-6 20-3 16 1 12 3 8 7 7 9 5 11 4 12 3 28 4 24-1 20-6 10-4 10-5 16-13 15-18 12-20 5-12 3-12 2-12 1-12-1-12-2-8-3-8-5-8-7-7-7-5-9-4-8-2-20-2-32 0zM68 348l-4 3-4 5-3 8-3 12-5 40-5 24-12 33-23 51-2 8 1 6 1 2 7 3 12 3 60 5 28 1 20-1 16-3 16-6 12-7 16-11 16-17 13-19 10-24 6-20 2-20-3-20-6-16-6-8-8-7-8-5-12-4-20-3-54-5-46-10-8 0-4 2zM133 0l-21 2-44 1-20 2-20 5-28 11M476 0l-2 8 2 4 2 4 10 8 16 6 12 2 12 0 15-4 17-7M133 560l19-4 16-6 16-8 12-9 12-11 11-14 11-16 8-16 6-16 5-20 2-20-1-16-4-16-6-12-8-10-9-6-9-4-10-3-52-7-20-5-12-4-9-5-27-19-12-7-8-2-4 0-8 2-8 6-4 5-4 7-4 12-3 12-1 12 1 48-3 24-4 16-6 15-8 15-8 11M560 489l-8 9-12 10-51 36-8 8-5 8M166 0l-18 6-16 3-56 5-20 4-24 8-32 18M421 0l-10 12-7 12 0 4 1 4 7 4 36 6 48 13 16 3 12-1 12-2 12-5 12-6M166 560l14-7 12-7 12-10 12-13 12-15 8-13 9-19 6-16 5-16 3-16 0-16-1-16-3-16-5-12-6-8-9-8-7-4-12-4-56-9-12-3-11-4-9-5-12-8-36-34-12-9-12-4-8 0-4 2-8 6-9 12-7 16-8 24-4 20-1 16 0 44 0 16-2 12-5 14M560 450l-5 10-7 10-8 9-8 7-20 14-40 21-18 11-16 12-17 16M185 0l-17 8-20 7-20 4-48 6-24 7-12 5-13 7-31 22M388 0l-38 36-17 20-6 12-2 8 3 6 4 3 8 2 8-1 48-17 16-4 12-2 16 0 16 2 48 14 16 2 8 0 12-3 8-4 12-8M185 560l11-8 12-10 10-10 10-12 8-12 9-16 8-16 6-16 4-16 4-16 1-16 0-12-1-16-3-12-4-12-4-8-4-5-8-7-12-5-16-4-36-4-16-3-16-5-12-6-12-9-12-12-36-45-12-13-12-9-12-5-8 1-4 1-4 3-4 7-6 16-14 56M560 304l-7 28-4 24-2 20-2 36-2 12-5 16-6 12-10 12-14 11-15 9-33 18-24 16-20 16-28 26M200 0l-20 13-20 8-24 6-52 10-16 5-12 5-15 9-15 12-14 16-12 15M366 0l-48 44-11 12-7 12-5 12-1 12 2 7 3 5 3 4 6 4 12 3 8 0 8-2 12-4 48-22 16-4 16-2 20 1 12 2 12 4 23 12 33 21 8 3 4 1 4-3 16-23M560 148l-12-6-4 1-4 4-4 9-4 16-1 12 1 12 10 40 3 16 1 12-1 16-4 32-20 88-4 16-5 11-8 13-8 8-10 8-34 23-16 13-70 68M200 560l10-8 10-11 11-13 8-12 16-28 13-32 7-28 2-16 1-16-2-28-3-12-5-12-4-7-4-5-8-6-8-3-16-3-36-3-20-3-16-5-16-9-14-12-13-16-13-20-24-44-12-16-8-8-12-9-44-27M215 0l-11 9-12 9-24 11-24 7-52 12-16 6-12 6-15 12-10 12-5 12-2 12 2 12 7 12 7 8 24 24 12 16 8 16 14 36 10 20 12 19 12 13 10 8 10 6 8 3 12 3 20 2 44 0 16 3 7 3 5 4 4 5 4 7 4 12 2 12 2 32-2 32-6 28-12 32-16 34-17 26-11 14-9 10M347 0l-46 40-11 12-9 12-4 8-3 8-2 12 1 12 6 12 6 8 11 8 8 3 12 2 8-1 12-4 52-25 16-6 12-3 16-1 12 1 12 4 12 6 11 8 5 6 6 10 4 8 3 16 2 32 3 16 5 16 14 36 3 14 1 14-2 24-8 32-13 36-14 26-14 18-38 41-49 59-19 20-21 20M230 0l-10 11-8 8-12 8-12 7-28 11-55 15-19 8-11 8-7 8-4 8-1 8 0 8 5 12 24 32 9 16 6 16 11 40 8 20 10 17 13 15 11 8 8 4 12 4 12 2 20 0 48-7 16 0 8 3 4 3 4 4 4 8 3 11 1 12 0 40-3 36-6 32-9 28-16 36-18 34-18 26M329 0l-49 40-12 12-8 12-6 16-2 16 1 8 2 8 6 12 11 14 12 11 12 6 8 2 8 1 8-1 12-3 12-6 40-23 12-6 12-3 12-2 12 0 12 3 8 5 11 10 5 8 3 8 3 16 2 36 3 16 5 16 15 36 3 12 2 16-2 16-4 16-7 16-11 20-9 12-35 44-12 18-28 46-16 24-24 27-27 25M250 0l-13 28-5 7-4 3-8 4-20 8-60 19-20 8-8 5-7 6-4 8-1 8 3 12 11 24 5 16 10 52 6 24 6 12 7 12 8 9 8 6 12 6 12 3 12 1 16-1 12-3 15-5 18-8 27-14 12-4 8 1 4 2 6 7 4 8 3 16-1 20-12 92-6 28-7 24-8 24-41 92M307 0l-23 15-39 21-8 8-3 8-4 12-1 12-1 12 3 16 3 8 5 12 8 12 9 11 24 24 12 10 8 5 8 3 4 0 8-1 8-4 44-33 12-7 12-6 12-4 12 0 8 1 9 5 7 8 5 12 2 12 2 40 2 16 5 16 15 36 2 8 1 12-3 16-3 10-5 10-10 16-29 36-12 18-12 22-20 44-13 24-12 16-15 17-16 15-21 16M168 99l-8 4-6 5-5 8-3 12-3 32-1 28 2 20 3 16 5 12 8 12 8 8 8 5 8 3 12 3 12-1 12-3 12-4 12-8 9-7 10-12 4-8 3-8 0-8-2-12-6-12-12-16-54-61-8-6-4-2-8-1-8 1zM400 167l-11 5-9 8-6 8-5 12-2 8 0 8 4 28-1 16-5 16-17 41-8 23-4 16-10 48-8 28-26 66-6 18-3 12 0 8 2 4 3 3 4 0 8-1 16-9 16-13 17-20 7-12 8-16 18-52 9-20 11-20 27-40 7-12 3-8 2-8 0-8-1-12-5-12-14-28-3-12-1-16 4-32-1-12-4-8-4-4-4-1-8 0zM180 155l-6 5-6 8-5 16-2 12 0 8 2 12 2 8 8 12 3 4 8 5 8 3 8 1 8-1 8-3 8-4 7-5 5-6 4-6 3-8 1-8-1-8-3-8-4-8-8-11-8-7-8-6-8-5-8-2-8 0-8 2z' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font: 400 1rem/1.55 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-slab);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }

.skip {
  position: absolute; left: 1rem; top: -10rem; z-index: 100;
  padding: .8rem 1.2rem;
  background: var(--copper-lt); color: var(--char);
  font: 700 .8rem/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  --focus: var(--char);
}
.skip:focus { top: 1rem; }

/* uppercase label voice, shared by kickers, meta heads, nav */
.kicker, .band__kicker, .tick__h, .tick__cat, .sec__more, .rail__h, .foot__h, .foot__legal,
.pager__btn, .pager__pos, .btn, .who__role, .who__link, .spec dt, .spec__read, .spec__role, .crumbs, .mast__bar-in, .mast__tag, .nav a {
  font-family: var(--f-sans);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* 3. Contour texture ------------------------------------------------------- */
.topo { position: relative; isolation: isolate; }
.topo::before, .ph::before, .avatar::before, .article-body blockquote::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--topo-c, var(--copper));
  opacity: var(--topo-o, .25);
  -webkit-mask: var(--topo) var(--topo-x, 0) var(--topo-y, 0) / var(--topo-s, 560px) repeat;
  mask: var(--topo) var(--topo-x, 0) var(--topo-y, 0) / var(--topo-s, 560px) repeat;
}

/* 4. Masthead -------------------------------------------------------------- */
.mast { background: var(--char); color: var(--on-dark); --focus: var(--copper-lt); }
.mast__bar { background: var(--char-deep); border-bottom: 1px solid rgba(244, 241, 234, .08); }
.mast__bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2rem;
  font-size: .6875rem; letter-spacing: .16em; color: var(--on-dark-2);
}
.mast__coords { display: none; color: var(--copper-lt); font-variant-numeric: tabular-nums; }
.mast__band { --topo-o: .3; --topo-s: 640px; --topo-x: -120px; border-bottom: 6px solid var(--copper); }
.mast__in {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .55rem 1rem;
  padding-block: 1.15rem 1rem;
}
.mast__name {
  grid-column: 1;
  font: 800 clamp(3rem, 1.75rem + 6vw, 7.25rem)/.8 var(--f-slab);
  letter-spacing: .015em;
}
.mast__name a { display: inline-flex; align-items: flex-end; color: var(--bone); text-decoration: none; }
.mast__name a::after {
  content: ""; flex: none;
  width: .15em; height: .15em; margin: 0 0 .03em .07em;
  background: var(--copper);
}
.mast__name a:hover::after { background: var(--copper-lt); }
.mast__tag {
  grid-column: 1 / -1;
  max-width: 26rem;
  font-size: .6875rem; line-height: 1.5; letter-spacing: .13em; color: var(--on-dark-2);
}
.mast__toggle { display: none; }
.js .mast__toggle {
  grid-column: 2; grid-row: 1;
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 44px; padding: 0 .95rem;
  background: transparent; color: var(--bone);
  border: 2px solid rgba(244, 241, 234, .55); border-radius: 0;
  font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}
.js .mast__toggle:hover, .js .mast__toggle[aria-expanded="true"] { border-color: var(--copper-lt); color: var(--copper-lt); }
.mast__burger { position: relative; width: 18px; height: 12px; border-block: 2px solid currentColor; }
.mast__burger::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: currentColor; }
[aria-expanded="true"] .mast__burger { border-color: transparent; }
[aria-expanded="true"] .mast__burger::before { transform: rotate(45deg); box-shadow: 0 0 0 0 currentColor; }
[aria-expanded="true"] .mast__burger::after {
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: currentColor; transform: rotate(-45deg);
}

/* 5. Section nav ----------------------------------------------------------- */
.nav { background: var(--char-2); --focus: var(--copper-lt); }
.nav__list { list-style: none; display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.nav a {
  display: flex; align-items: center; gap: .5rem;
  min-height: 2.9rem; padding: 0 .75rem;
  color: var(--bone); text-decoration: none;
  font-size: .78rem; letter-spacing: .13em;
  transition: color .15s, box-shadow .15s;
}
.nav__n { display: none; }
.nav a:hover { color: var(--copper-lt); }
.nav a[aria-current] { box-shadow: inset 0 4px 0 var(--copper-lt); color: #fff; }
.nav a:focus-visible { outline-offset: -3px; }

@media (max-width: 59.98em) {
  .js .nav { display: none; border-bottom: 6px solid var(--copper); }
  .js .nav.is-open { display: block; }
  .js .nav__list { flex-direction: column; margin: 0; padding-block: .5rem 1rem; }
  .js .nav a {
    min-height: 3.25rem; padding: 0 0 0 .9rem;
    border-bottom: 1px solid rgba(244, 241, 234, .12);
    font: 700 1.2rem/1.2 var(--f-slab); letter-spacing: 0; text-transform: none;
  }
  .js .nav__n { display: inline; min-width: 2rem; font: 700 .75rem/1 var(--f-sans); letter-spacing: .1em; color: var(--copper-lt); }
  .js .nav a[aria-current] { box-shadow: inset 4px 0 0 var(--copper-lt); background: rgba(244, 241, 234, .05); }
  .js .nav__extra a { font: 700 .78rem/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); border-bottom: 0; }
}

/* 6. Shared bits: kicker, meta, placeholder, avatar ----------------------- */
.kicker { font-size: .72rem; line-height: 1.2; color: var(--copper-ink); }
.kicker a { display: inline-flex; align-items: center; gap: .55em; padding-block: .3rem; text-decoration: none; }
.kicker a::before { content: ""; flex: none; width: .65em; height: .65em; background: currentColor; }
.kicker a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* every item carries its separator; the strip that holds the first one of each line is clipped away,
   so a wrapped line never starts with a dangling square */
.meta {
  --sep: calc(1.2em + 4px);
  display: flex; flex-wrap: wrap; align-items: center; row-gap: .2rem;
  margin-left: calc(var(--sep) * -1);
  clip-path: inset(0 0 0 var(--sep));
  font: 600 .8125rem/1.35 var(--f-sans); color: var(--muted); letter-spacing: .01em;
}
.meta > *::before {
  content: ""; display: inline-block;
  width: 4px; height: 4px; margin: 0 .6em;
  background: var(--copper); vertical-align: middle; transform: translateY(-1px);
}

.ph {
  position: absolute; inset: 0; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: .75rem;
  background: var(--char);
  --topo-c: var(--bone); --topo-o: .16; --topo-s: 420px;
}
.ph--1 { background: var(--river); --topo-x: -200px; }
.ph--2 { background: var(--spruce); --topo-x: -90px; --topo-y: -160px; }
.ph__label {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--bone);
  font: 700 .66rem/1.2 var(--f-sans);
  font: 700 clamp(.62rem, 2.4cqi, .85rem)/1.2 var(--f-sans);
  letter-spacing: .16em; text-transform: uppercase;
}
@container (max-width: 160px) {
  .ph { justify-content: center; align-items: center; }
  .ph__label { font-size: 0; }
  .ph__label::before { width: 14px; height: 14px; }
}
.ph__label::before { content: ""; flex: none; width: .7em; height: .7em; background: var(--copper-lt); }

.avatar {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-grid; place-items: center; flex: none;
  width: 4.5rem; height: 4.5rem;
  background: var(--char); color: var(--copper-lt);
  font: 800 1.45rem/1 var(--f-slab); letter-spacing: .02em;
  --topo-c: var(--bone); --topo-o: .14; --topo-s: 260px;
}
.avatar--sm { width: 2.75rem; height: 2.75rem; font-size: .95rem; }
.avatar--lg { width: clamp(5rem, 3.5rem + 5vw, 8.5rem); height: clamp(5rem, 3.5rem + 5vw, 8.5rem); font-size: clamp(1.8rem, 1.2rem + 2vw, 3.1rem); outline: 2px solid var(--copper); outline-offset: -9px; }

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: 0 1.4rem;
  background: var(--copper-lt); color: var(--char);
  font-size: .78rem; text-decoration: none;
  transition: background-color .15s;
}
.btn:hover { background: var(--bone); }

/* 7. Cards ----------------------------------------------------------------- */
.card {
  position: relative;
  display: grid; grid-template-areas: "media" "body"; align-content: start;
  gap: .9rem;
  border-top: 4px solid var(--copper);
  padding-top: .9rem;
}
.card__body { grid-area: body; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.card__media {
  grid-area: media; position: relative; overflow: hidden; container-type: inline-size;
  aspect-ratio: 3 / 2;
  background: var(--char);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card__title { font-weight: 700; font-size: 1.1rem; line-height: 1.2; letter-spacing: -.005em; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card .kicker a { position: relative; z-index: 2; }
.card__sum { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.card:hover .card__media img { transform: scale(1.035); }
.card:hover .card__title a {
  text-decoration: underline; text-decoration-color: var(--copper);
  text-decoration-thickness: 2px; text-underline-offset: .16em;
}
@supports selector(:has(*)) {
  .card:has(.card__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
  .card__title a:focus-visible { outline: none; }
}

/* feature: big horizontal card */
.card--feature { gap: 1rem; }
.card--feature .card__media { aspect-ratio: 16 / 10; }
.card--feature .card__title { font-weight: 800; font-size: clamp(1.4rem, 1.05rem + 1.1vw, 1.95rem); line-height: 1.1; }
.card--feature .card__sum { font-size: 1.0625rem; }
@media (min-width: 40em) {
  .card--feature { grid-template-areas: "media body"; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; }
  .card--feature .card__body { padding-top: .1rem; }
}

/* row: compact horizontal card */
.card--row { grid-template-areas: "media body"; grid-template-columns: 7.25rem minmax(0, 1fr); gap: .9rem; }
.card--row .card__media { aspect-ratio: 4 / 3; align-self: start; }
.card--row .card__body { gap: .4rem; }
.card--row .card__title { font-size: 1.04rem; }
.card--row .card__sum { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 40em) {
  .card--wide { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; }
  .card--wide .card__title { font-size: 1.3rem; line-height: 1.15; }
  .card--wide .card__body { max-width: 42rem; }
}

/* 8. Home: hero ------------------------------------------------------------ */
.hero { position: relative; background: var(--char); color: var(--on-dark); --focus: var(--copper-lt); overflow: hidden; }
.hero__media { position: relative; aspect-ratio: 4 / 3; background: var(--char-2); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--char) 0, rgba(23, 25, 26, .94) 18%, rgba(23, 25, 26, .5) 46%, rgba(23, 25, 26, 0) 72%);
}
.hero__media--ph {
  aspect-ratio: 16 / 9;
  background: radial-gradient(120% 90% at 85% 10%, rgba(44, 94, 110, .9), rgba(44, 94, 110, 0) 60%), var(--char);
  --topo-o: .42; --topo-s: 600px;
}
.hero__ph-label {
  position: absolute; right: var(--gut); top: 1.25rem; z-index: 1;
  font: 800 clamp(2.5rem, 1rem + 7vw, 7.5rem)/.9 var(--f-slab); text-transform: uppercase; letter-spacing: -.01em;
  color: rgba(244, 241, 234, .1); text-align: right; max-width: 70%;
}
.hero__body { position: relative; margin-top: -3rem; padding-bottom: 2.25rem; }
@media (min-width: 40em) and (max-width: 59.98em) {
  .hero__media { aspect-ratio: 16 / 9; }
  .hero__media--ph { aspect-ratio: 21 / 9; }
}
.hero .kicker { color: var(--copper-lt); }
.hero__title {
  margin: .5rem 0 .9rem;
  max-width: 22ch;
  font-size: clamp(1.85rem, 1.15rem + 3vw, 3.55rem); line-height: 1.04;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}
.hero__title a { color: var(--bone); text-decoration: none; }
.hero__title a:hover { text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: .07em; text-underline-offset: .12em; }
.hero__sum { max-width: 38rem; margin-bottom: 1rem; color: var(--on-dark-3); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.45; }
.hero .meta { color: var(--on-dark-2); }
.hero .meta > *::before { background: var(--copper-lt); }

@media (min-width: 60em) {
  .hero { display: grid; min-height: clamp(32rem, 70vh, 42rem); }
  .hero__media { position: absolute; inset: 0 auto 0 50%; width: min(100%, 100rem); transform: translateX(-50%); aspect-ratio: auto; }
  .hero__media::after {
    background:
      linear-gradient(90deg, rgba(23, 25, 26, .95) 0, rgba(23, 25, 26, .9) 34%, rgba(23, 25, 26, .6) 57%, rgba(23, 25, 26, 0) 84%),
      linear-gradient(0deg, rgba(23, 25, 26, .85) 0, rgba(23, 25, 26, 0) 45%);
  }
  .hero__media--ph { inset: 0; width: 100%; transform: none; }
  .hero__ph-label {
    top: 2.5rem; bottom: 2.5rem; max-width: none; max-height: calc(100% - 5rem); overflow: hidden;
    writing-mode: vertical-rl; transform: rotate(180deg); text-align: left;
    font-size: clamp(2.5rem, 1rem + 2.6vw, 3.75rem); line-height: 1; color: rgba(244, 241, 234, .12);
  }
  .hero__body { margin: 0; align-self: end; padding-block: 5rem 3.25rem; }
  .hero__body > * { max-width: 41rem; }
  .hero__title { max-width: 21ch; }
  .hero--ph { min-height: clamp(26rem, 55vh, 34rem); }
}
@media (min-width: 100rem) {
  .hero__media::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(23, 25, 26, 0) 88%, var(--char) 100%);
  }
}

/* 9. Home: latest strip ---------------------------------------------------- */
.tick { background: var(--char-2); color: var(--on-dark); --focus: var(--copper-lt); border-top: 1px solid rgba(244, 241, 234, .1); }
.tick__in { display: grid; gap: .8rem; padding-block: 1.1rem 1.2rem; }
.tick__h { display: flex; align-items: center; gap: .6rem; font-size: .72rem; line-height: 1; letter-spacing: .18em; color: var(--copper-lt); }
.tick__h::before { content: ""; width: .7rem; height: .7rem; background: var(--copper); }
.tick__h::after { content: ""; flex: 1; height: 1px; background: rgba(244, 241, 234, .16); }
.tick__scroll {
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  scrollbar-width: thin; scrollbar-color: var(--copper) transparent;
}
.tick__scroll:focus-visible { outline-offset: -3px; }
.tick__list { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(76%, 17rem); padding-bottom: .5rem; }
.tick__item { scroll-snap-align: start; border-left: 1px solid rgba(244, 241, 234, .16); }
.tick__item:first-child { border-left-color: var(--copper); }
.tick__item a { display: flex; flex-direction: column; gap: .45rem; height: 100%; min-height: 44px; padding: .15rem 1rem .25rem; color: var(--bone); text-decoration: none; }
.tick__item a:focus-visible { outline-offset: -3px; }
.tick__cat { font-size: .66rem; line-height: 1.2; letter-spacing: .15em; color: var(--copper-lt); }
.tick__title { font: 600 1rem/1.3 var(--f-sans); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tick__time { margin-top: auto; font: 600 .75rem/1 var(--f-sans); color: var(--on-dark-2); letter-spacing: .04em; }
.tick__item a:hover .tick__title { text-decoration: underline; text-decoration-color: var(--copper-lt); text-underline-offset: .18em; }

@media (min-width: 60em) {
  .tick__in { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: stretch; gap: 0; padding-block: 1.4rem; }
  .tick__h { align-items: flex-start; flex-direction: column; gap: .7rem; padding-top: .2rem; }
  .tick__h::after { display: none; }
  .tick__scroll { margin: 0; padding: 0; overflow: visible; }
  .tick__list { grid-auto-columns: minmax(0, 1fr); padding: 0; }
}

/* 10. Home: section blocks ------------------------------------------------- */
.secs { padding-top: var(--sp-sec); }
.sec { padding-bottom: var(--sp-sec); }
.sec--alt { background: var(--bone-2); padding-top: var(--sp-sec); margin-bottom: var(--sp-sec); }
.sec--alt + .picks { margin-top: calc(var(--sp-sec) * -1); }
.sec__in { display: grid; gap: 1.25rem; }
.sec__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: .8rem;
  border-top: 6px solid var(--char); padding-top: .85rem;
}
.sec__num { font: 800 1.05rem/1 var(--f-slab); color: var(--copper); font-variant-numeric: tabular-nums; }
.sec__title { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.35rem); text-transform: uppercase; letter-spacing: .005em; line-height: 1; }
.sec__title a { text-decoration: none; }
.sec__title a:hover { color: var(--copper-ink); }
.sec__desc { grid-column: 1 / -1; margin-top: .6rem; max-width: 34rem; color: var(--muted); font-size: .98rem; line-height: 1.45; }
.sec__more {
  grid-column: 1 / -1; justify-self: start;
  display: inline-block; padding-block: .85rem;
  font-size: .72rem; line-height: 1.4; color: var(--copper-ink); text-decoration: none;
}
.sec__more:hover { color: var(--char); text-decoration: underline; text-underline-offset: .25em; }
.sec__rows { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.sec__rows .card__sum { display: none; }
.sec--n2 .sec__rows .card__sum { display: -webkit-box; }
.sec--alt:last-child, .picks:last-child { margin-bottom: 0; }

@media (min-width: 60em) {
  .sec__in { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(2rem, 3vw, 3rem); }
  .sec__head { display: block; align-self: start; position: sticky; top: 1.5rem; }
  .sec__num { font-size: clamp(3.5rem, 2rem + 2.5vw, 4.75rem); line-height: .8; margin-bottom: .9rem; }
  .sec__desc { margin-top: .8rem; }
  .sec__more { margin-top: .4rem; }
  .sec__rows { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 1.75rem; }
  .sec__rows .card--row { grid-template-columns: 5.75rem minmax(0, 1fr); }
  .sec__rows .card--row .card__media { aspect-ratio: 1; }
  .sec--n2 .sec__rows .card--row { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; }
  .sec--n2 .sec__rows .card--row .card__media { aspect-ratio: 16 / 10; }
  .sec--n2 .sec__rows .card__title { font-size: 1.3rem; line-height: 1.15; }
  .sec--n2 .sec__rows .card__body { max-width: 40rem; }
}

/* 11. Home: editor's picks band -------------------------------------------- */
.picks {
  margin-bottom: var(--sp-sec); padding-block: var(--sp-sec);
  background: var(--river); color: var(--on-dark);
  --focus: var(--bone); --topo-c: var(--bone); --topo-o: .09; --topo-s: 720px;
}
.band-h {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: 1.6rem;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1; text-transform: uppercase; letter-spacing: .005em;
}
.band-h::before { content: ""; flex: none; width: .5em; height: .5em; background: var(--copper-lt); }
.band-h::after { content: ""; flex: 1; height: 2px; background: rgba(244, 241, 234, .25); }
.picks__grid { display: grid; gap: 1.5rem; }
.card--pick { border-top-color: var(--copper-lt); grid-template-areas: "media body"; grid-template-columns: 7.25rem minmax(0, 1fr); gap: .9rem; }
.card--pick .card__media { aspect-ratio: 4 / 3; align-self: start; outline: 1px solid rgba(244, 241, 234, .12); }
.card--pick .kicker { color: var(--bone); }
.card--pick .kicker a::before { background: var(--copper-lt); }
.card--pick .card__title { font-size: clamp(1.08rem, .95rem + .55vw, 1.4rem); line-height: 1.17; }
.card--pick .meta { color: #D3DCDA; }
.card--pick .meta > *::before { background: var(--copper-lt); }
.card--pick:hover .card__title a { text-decoration-color: var(--copper-lt); }
@media (min-width: 48em) {
  .picks__grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: 1.75rem; }
  .card--pick { grid-template-areas: "media" "body"; grid-template-columns: minmax(0, 1fr); }
  .card--pick .card__media { aspect-ratio: 16 / 10; }
}

/* 12. Dark header bands (section, author, page, 404) ----------------------- */
.band {
  background: var(--char); color: var(--on-dark);
  border-bottom: 6px solid var(--copper);
  --focus: var(--copper-lt); --topo-o: .22; --topo-s: 640px; --topo-x: -300px;
}
.band__in { padding-block: var(--sp-band); }
.band__in--split { display: grid; gap: 1.75rem; }
.band__kicker { font-size: .72rem; color: var(--copper-lt); }
.band__kicker a { color: inherit; text-decoration: none; }
.band__kicker a:hover { text-decoration: underline; text-underline-offset: .2em; }
.band__title {
  margin-top: .7rem;
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.25rem); line-height: .95; text-transform: uppercase; letter-spacing: 0;
}
.band__title--page, .band__title--person { text-transform: none; font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.25rem); line-height: 1; letter-spacing: -.01em; }
.band__desc { margin-top: 1rem; max-width: 40rem; color: var(--on-dark-3); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.5; }
.band__stat { display: grid; justify-items: start; align-content: end; gap: .35rem; padding-left: 1rem; border-left: 3px solid var(--copper); }
.band__stat-n { font: 800 clamp(2.6rem, 2rem + 2.4vw, 4.25rem)/.9 var(--f-slab); color: var(--copper-lt); font-variant-numeric: tabular-nums; }
.band__stat-l, .band__stat-p { font: 700 .7rem/1.2 var(--f-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--on-dark-2); }
.band__in--person { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 40em) {
  .band__in--person { grid-template-columns: auto minmax(0, 1fr); gap: 2.25rem; }
}
@media (min-width: 60em) {
  .band__in--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* 13. Section page ---------------------------------------------------------- */
.cat { display: grid; gap: 2.75rem; padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.cat__list { display: grid; gap: 1.5rem; margin-top: 2rem; }
.cat__main > .cat__list:first-child { margin-top: 0; }
.rail { align-self: start; }
.rail__h { padding-top: .85rem; border-top: 6px solid var(--char); font-size: .75rem; color: var(--ink); margin-bottom: .6rem; }
.rail__list { list-style: none; }
.rail__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 600; text-decoration: none;
  transition: color .15s, padding .2s var(--ease), box-shadow .2s var(--ease);
}
.rail__list a:hover { color: var(--copper-ink); }
.rail__list a[aria-current] { padding-left: .85rem; box-shadow: inset 4px 0 0 var(--copper); color: var(--copper-ink); }
.rail__n { font: 700 .8rem/1 var(--f-sans); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 60em) {
  .cat { grid-template-columns: minmax(0, 1fr) 16.5rem; column-gap: clamp(2.5rem, 4vw, 4rem); }
  .rail { position: sticky; top: 1.5rem; }
}

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.75rem; padding-top: 1rem; border-top: 6px solid var(--char);
}
.pager__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 1rem;
  background: var(--char); color: var(--bone);
  font-size: .72rem; text-decoration: none;
  transition: background-color .15s;
}
.pager__btn:hover { background: var(--copper-ink); }
.pager__btn.is-off { background: transparent; color: #8A867C; box-shadow: inset 0 0 0 2px var(--rule); }
.pager__pos { font-size: .72rem; color: var(--muted); text-align: center; }
.pager__n { color: var(--ink); }

/* 14. Article -------------------------------------------------------------- */
.story__head { background: var(--char); color: var(--on-dark); --focus: var(--copper-lt); --topo-o: .2; --topo-s: 680px; --topo-x: -40px; }
.story__head .wrap { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 5vw, 3.5rem); }
.story--nocover .story__head { border-bottom: 6px solid var(--copper); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 .55rem; color: rgba(244, 241, 234, .4); }
.crumbs a { display: inline-block; padding-block: .45rem; font-size: .72rem; color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: .25em; }
.crumbs .crumbs__sec { display: inline-flex; align-items: center; gap: .55em; color: var(--copper-lt); }
.crumbs .crumbs__sec::before { content: ""; width: .65em; height: .65em; background: var(--copper); }
.story__title { margin-top: .9rem; max-width: 24ch; font-size: clamp(2rem, 1.25rem + 3.1vw, 3.85rem); line-height: 1.04; }
.story__dek { margin-top: 1.1rem; max-width: 44rem; color: var(--on-dark-3); font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height: 1.45; }
.story__dek .dateline { color: var(--copper-lt); letter-spacing: .08em; }

.story__hero { max-width: var(--wrap); margin-inline: auto; }
.story__hero-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--char); border-bottom: 6px solid var(--copper); }
.story__hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.story__credit { padding: .6rem var(--gut) 0; text-align: right; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.story__credit a { color: var(--copper-ink); text-underline-offset: .2em; }
@media (min-width: 60em) {
  .story--cover { --ov: clamp(5rem, 9vw, 8.5rem); }
  .story--cover .story__head .wrap { padding-bottom: calc(var(--ov) + clamp(2rem, 3vw, 2.75rem)); }
  .story__hero { position: relative; z-index: 1; margin-top: calc(var(--ov) * -1); padding-inline: var(--gut); }
  .story__hero-img { aspect-ratio: 2 / 1; }
  .story__credit { padding-inline: 0; }
}

.story__grid { display: grid; gap: 2rem; padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(3rem, 6vw, 5rem); }
.spec {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule);
}
.spec__who { display: flex; align-items: center; gap: .75rem; text-decoration: none; min-height: 44px; }
.spec__id { display: grid; gap: .2rem; }
.spec__by { font-size: .95rem; line-height: 1.25; color: var(--muted); }
.spec__name { color: var(--ink); font-weight: 700; }
.spec__who:hover .spec__name { color: var(--copper-ink); text-decoration: underline; text-underline-offset: .2em; }
.spec__role { font-size: .66rem; color: var(--copper-ink); }
.spec__list { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.spec dt { font-size: .66rem; color: var(--muted); }
.spec dd { font-weight: 600; font-size: .95rem; }
.spec__read { font-size: .7rem; color: var(--copper-ink); }

.story__main { min-width: 0; max-width: 40rem; }
.story__files { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .95rem; }

.who {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem;
  margin-top: 2.5rem; padding: 1.25rem;
  background: var(--bone-2); border-top: 6px solid var(--char);
}
.who .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.15rem; }
.who__role { font-size: .66rem; color: var(--copper-ink); }
@media (min-width: 40em) {
  .who { gap: 1.25rem; padding: 1.5rem; }
  .who .avatar { width: 4.5rem; height: 4.5rem; font-size: 1.45rem; }
}
.who__name { margin-top: .3rem; font-size: 1.35rem; line-height: 1.15; }
.who__name a { text-decoration: none; }
.who__name a:hover { color: var(--copper-ink); }
.who__bio { margin-top: .5rem; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.who__link { display: inline-block; padding-block: .8rem; margin-top: .1rem; font-size: .7rem; line-height: 1.5; color: var(--copper-ink); text-decoration: none; }
.who__link:hover { color: var(--char); text-decoration: underline; text-underline-offset: .25em; }

.story__related { display: grid; gap: 1.25rem; }
.card--rail .card__title { font-size: 1rem; }
@media (min-width: 40em) and (max-width: 68.74em) {
  .story__related { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
@media (min-width: 68.75em) {
  .story__grid { grid-template-columns: 11.5rem minmax(0, 40rem) minmax(0, 1fr); column-gap: clamp(2rem, 3vw, 3.25rem); align-items: start; }
  .spec { position: sticky; top: 1.5rem; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: .9rem 0 0; border-bottom: 0; border-top: 6px solid var(--char); }
  .spec__who { flex-direction: column; align-items: flex-start; }
  .spec__list { flex-direction: column; gap: .9rem; padding-top: 1rem; border-top: 1px solid var(--rule); width: 100%; }
  .story__rail { position: sticky; top: 1.5rem; }
  .card--rail { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* 15. Article prose -------------------------------------------------------- */
.article-body { font: 400 1.125rem/1.7 var(--f-sans); color: #1E2021; }
.article-body > * + * { margin-top: 1.2em; }
.article-body p, .article-body li { max-width: 68ch; }
.article-body strong, .article-body b { font-weight: inherit; }
.article-body a { color: var(--copper-ink); font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.article-body a:hover { color: var(--char); text-decoration-color: var(--copper); text-decoration-thickness: 2px; }
.article-body .dateline { color: var(--copper-ink); letter-spacing: .08em; text-transform: uppercase; }
.article-body h2 { margin-top: 2.1em; font-size: clamp(1.45rem, 1.2rem + .9vw, 1.85rem); line-height: 1.15; }
.article-body h2::before { content: ""; display: block; width: 2.75rem; height: 5px; margin-bottom: .75rem; background: var(--copper); }
.article-body h3 { margin-top: 1.8em; font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.article-body h2 + *, .article-body h3 + * { margin-top: .65em; }
.article-body ul, .article-body ol { list-style: none; }
.article-body li { position: relative; padding-left: 1.75rem; }
.article-body li + li { margin-top: .5em; }
.article-body ul > li::before { content: ""; position: absolute; left: .25rem; top: .66em; width: .5rem; height: .5rem; background: var(--copper); }
.article-body ol { counter-reset: n; }
.article-body ol > li { counter-increment: n; padding-left: 2.4rem; }
.article-body ol > li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font: 800 .82rem/1.9125rem var(--f-slab); color: var(--copper-ink); font-variant-numeric: tabular-nums;
}
.article-body blockquote {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 2em 0; padding: 1.25rem 1.5rem 1.5rem;
  background: var(--bone-2); border-top: 6px solid var(--copper);
  --topo-c: var(--river); --topo-o: .1; --topo-s: 480px;
}
.article-body blockquote::before {
  content: "\201C"; display: block; height: 2.1rem;
  font: 800 4rem/1 var(--f-slab); color: var(--copper);
}
.article-body blockquote p { font-size: 1.2rem; line-height: 1.55; color: var(--char); }
.article-body blockquote > * + * { margin-top: .8em; }
.article-body table { width: 100%; margin-block: 2em; border-collapse: collapse; font-size: 1rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.article-body th {
  padding: .8rem .9rem; background: var(--char); color: var(--bone); text-align: left; vertical-align: bottom;
  font: 700 .72rem/1.25 var(--f-sans); letter-spacing: .12em; text-transform: uppercase;
}
.article-body td { padding: .75rem .9rem; border-bottom: 1px solid var(--rule); }
.article-body tbody tr:nth-child(even) { background: rgba(233, 227, 214, .65); }
.article-body tbody tr:last-child td { border-bottom: 3px solid var(--char); }
.article-body figure { margin-block: 2em; }
.article-body img { width: 100%; height: auto; background: var(--bone-2); }
.article-body figcaption { margin-top: .65rem; padding-left: .75rem; border-left: 3px solid var(--copper); color: var(--muted); font-size: .875rem; line-height: 1.45; }
.article-body hr { border: 0; height: 6px; margin-block: 2.5em; background: var(--char); width: 3rem; }
@media (max-width: 39.98em) {
  .article-body table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* 16. Author, 404, static pages ------------------------------------------- */
.list-page { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.list-page__h {
  margin-bottom: 1.5rem; padding-top: .85rem; border-top: 6px solid var(--char);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); text-transform: uppercase; letter-spacing: .005em;
}
.list-page__n { margin-left: .5rem; font: 700 .85rem/1 var(--f-sans); color: var(--copper-ink); letter-spacing: .1em; vertical-align: .35em; }
.grid-rows { display: grid; gap: 1.5rem; }
@media (min-width: 60em) {
  .grid-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}

.band__in--404 { display: grid; gap: .5rem 2.5rem; align-items: center; }
.band__in--404 .btn { margin-top: 1.6rem; }
.nf__code { font: 800 clamp(5.5rem, 3rem + 11vw, 12rem)/.8 var(--f-slab); color: var(--copper); letter-spacing: -.02em; }
@supports (-webkit-text-stroke: 2px black) {
  .nf__code { color: transparent; -webkit-text-stroke: 2px var(--copper-lt); }
}
@media (min-width: 48em) {
  .band__in--404 { grid-template-columns: auto minmax(0, 1fr); }
}

.static { display: grid; gap: 2.5rem; padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.static__body { min-width: 0; max-width: 40rem; }
@media (min-width: 60em) {
  .static { grid-template-columns: minmax(0, 40rem) 16rem; justify-content: space-between; column-gap: 3rem; }
  .static__rail { position: sticky; top: 1.5rem; }
}

/* 17. Footer --------------------------------------------------------------- */
.foot {
  background: var(--char); color: var(--on-dark);
  border-top: 6px solid var(--copper);
  --focus: var(--copper-lt); --topo-o: .13; --topo-s: 720px; --topo-y: -200px;
}
.foot .wrap { padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; }
.foot__top { display: grid; gap: .9rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(244, 241, 234, .14); }
.foot__name { font: 800 clamp(3rem, 1.8rem + 6vw, 6.5rem)/.82 var(--f-slab); letter-spacing: .015em; }
.foot__name a { display: inline-flex; align-items: flex-end; color: var(--bone); text-decoration: none; }
.foot__name a::after { content: ""; width: .15em; height: .15em; margin: 0 0 .03em .07em; background: var(--copper); }
.foot__tag { max-width: 24rem; text-wrap: balance; color: var(--on-dark-2); font: 700 .7rem/1.5 var(--f-sans); letter-spacing: .13em; text-transform: uppercase; }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; padding-block: 2rem; }
.foot__col--note { grid-column: 1 / -1; }
.foot__h { margin-bottom: .5rem; font-size: .72rem; color: var(--copper-lt); }
.foot__list { list-style: none; }
.foot__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); text-decoration: none; font-size: 1.02rem; }
.foot__list a:hover { color: var(--copper-lt); text-decoration: underline; text-underline-offset: .2em; }
.foot__note { font: 700 1.25rem/1.35 var(--f-slab); color: var(--bone); max-width: 24rem; }
.foot__desc { margin-top: .8rem; max-width: 26rem; color: var(--on-dark-2); font-size: .95rem; line-height: 1.5; }
.foot__legal { padding-top: 1.25rem; border-top: 1px solid rgba(244, 241, 234, .14); color: var(--on-dark-2); font-size: .68rem; line-height: 1.6; }
@media (min-width: 40em) {
  .foot__list a { min-height: 2.25rem; }
}
@media (min-width: 60em) {
  .foot__top { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 3rem; }
  .foot__tag { justify-self: end; text-align: right; }
  .foot__cols { grid-template-columns: 1fr 1fr 1.5fr; }
  .foot__col--note { grid-column: auto; }
}

/* 18. Desktop masthead ----------------------------------------------------- */
@media (min-width: 60em) {
  .mast__coords { display: block; }
  .mast__in { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 3rem; padding-block: 2.1rem 1.6rem; }
  .mast__tag { grid-column: 2; justify-self: end; max-width: 21rem; padding-top: .65rem; border-top: 3px solid var(--copper); text-align: right; font-size: .72rem; }
  .js .mast__toggle { display: none; }
  .nav__extra { margin-left: auto; }
  .nav__extra a { color: var(--on-dark-2); }
}

/* 19. Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .card:hover .card__media img { transform: none; }
}