/* NARVAL homepage styles. Keep this file UTF-8 and load it only from index.html. */

:root {
      --ink: #111111;
      --paper: #f7f2df;
      --white: #fffdf7;
      --sun: #f4c430;
      --turquoise: #00a6a6;
      --red: #c1121f;
      --terran: #b31217;
      --terran-dark: #3a0b0d;
      --blue: #1d4e89;
      --metal: #8a817c;
      --gold: #d7a91f;
      --green: #008c86;
      --receipt: #e8f5f4;
      --muted: rgba(17, 17, 17, .66);
      --soft: rgba(255, 253, 247, .72);
      --line: rgba(17, 17, 17, .16);
      --strong-line: rgba(17, 17, 17, .32);
      --shadow: 0 28px 74px rgba(17, 17, 17, .28);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--paper);
}
    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        linear-gradient(90deg, rgba(0,166,166,.07) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(0deg, rgba(244,196,48,.18), transparent 380px),
        var(--paper);
    }

    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 70px;
      padding: 11px clamp(16px, 4vw, 48px);
      border-bottom: 1px solid var(--line);
      background: rgba(247, 242, 223, .94);
      backdrop-filter: blur(16px);
    }

    .brand {
      display: flex;
      align-items: baseline;
      gap: 12px;
      min-width: 0;
    }

    .brand strong {
      font-size: clamp(30px, 5vw, 58px);
      font-weight: 950;
      line-height: .78;
      letter-spacing: 0;
    }

    .brand span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
      white-space: nowrap;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .nav a {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      padding: 9px 12px;
      border: 1px solid var(--line);
      background: rgba(255, 253, 247, .62);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .nav a:hover,
    .nav a:focus-visible,
    .button:hover,
    .button:focus-visible {
      outline: 2px solid var(--turquoise);
      outline-offset: 2px;
    }

    .nav a:first-child {
      color: var(--ink);
      background: var(--sun);
      border-color: var(--sun);
    }

    .status-strip {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 14px;
      padding: 8px clamp(16px, 4vw, 48px);
      border-bottom: 1px solid var(--line);
      background: rgba(255, 253, 247, .78);
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.18;
    }

    .status-strip strong {
      color: var(--ink);
      font-weight: 950;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .status-strip p {
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .status-metrics {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .status-metrics span {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      padding-left: 8px;
      border-left: 1px solid var(--line);
    }

    .status-metrics b {
      color: var(--ink);
      font-size: 15px;
      font-weight: 950;
      line-height: 1;
    }

    .page {
      width: min(1500px, 100%);
      margin: 0 auto;
      padding: clamp(16px, 4vw, 48px);
    }

    .label {
      display: inline-flex;
      width: fit-content;
      padding: 6px 8px;
      color: var(--paper);
      background: var(--ink);
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      text-transform: uppercase;
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(320px, .46fr);
      gap: 14px;
      align-items: stretch;
      min-height: min(680px, calc(100vh - 150px));
    }

    .cover-art {
      position: relative;
      overflow: hidden;
      min-height: inherit;
      color: var(--paper);
      background: var(--ink);
      box-shadow: var(--shadow);
      isolation: isolate;
    }

    .cover-art::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: url("assets/narval-cover-concept.png?v=20260711") center / cover no-repeat;
      filter: grayscale(.06) contrast(1.08) brightness(.9);
    }

    .cover-art::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(180deg, rgba(244,196,48,.18), rgba(17,17,17,.05) 34%, rgba(17,17,17,.76)),
        linear-gradient(90deg, rgba(0,166,166,.2), transparent 56%);
    }

    .cover-masthead {
      position: absolute;
      top: clamp(18px, 3vw, 34px);
      left: clamp(18px, 3vw, 34px);
      display: grid;
      width: min(500px, calc(100% - 36px));
      gap: 8px;
      text-align: left;
    }

    .cover-masthead span {
      width: fit-content;
      padding: 9px 14px 11px;
      color: var(--ink);
      background: rgba(255, 253, 247, .88);
      box-shadow: -10px 10px 0 rgba(244, 196, 48, .88);
      font-size: clamp(54px, 6vw, 92px);
      line-height: .78;
      font-weight: 950;
      letter-spacing: 0;
    }

    .cover-masthead small {
      display: inline-flex;
      width: fit-content;
      padding: 7px 10px;
      color: var(--paper);
      background: rgba(17, 17, 17, .78);
      font-size: clamp(12px, 1.2vw, 16px);
      line-height: 1;
      font-weight: 950;
      text-transform: uppercase;
    }

    .cover-lines {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 22px;
      display: grid;
      gap: 10px;
    }

    .cover-line {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--ink);
      padding: 9px 10px;
      border-top: 0;
      background: rgba(244, 196, 48, .78);
      box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08);
      font-size: 14px;
      font-weight: 950;
      line-height: 1.15;
    }

    .cover-line:nth-child(2) {
      color: var(--paper);
      background: rgba(0, 166, 166, .76);
    }

    .cover-line:nth-child(3) {
      color: var(--ink);
      background: rgba(255, 253, 247, .78);
    }

    .heat-ad {
      position: relative;
      overflow: hidden;
      min-height: inherit;
      display: grid;
      align-content: space-between;
      padding: clamp(18px, 3vw, 34px);
      border: 1px solid var(--line);
      color: var(--ink);
      background:
        linear-gradient(90deg, rgba(17,17,17,.06) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(180deg, rgba(244,196,48,.5), rgba(255,253,247,.9) 42%, rgba(0,166,166,.12)),
        var(--white);
      box-shadow: var(--shadow);
      isolation: isolate;
    }

    .heat-ad::before,
    .heat-ad::after {
      content: "";
      position: absolute;
      bottom: -30px;
      z-index: -1;
      width: clamp(58px, 8vw, 92px);
      height: 74%;
      border: 1px solid rgba(17,17,17,.32);
      border-radius: 40px 40px 0 0;
      background:
        radial-gradient(circle at 50% 18%, rgba(255,253,247,.82) 0 10px, transparent 11px),
        linear-gradient(90deg, rgba(255,255,255,.28), transparent 28%, rgba(17,17,17,.32) 72%, rgba(17,17,17,.48)),
        #8a817c;
      box-shadow: inset 0 0 0 8px rgba(17,17,17,.08);
    }

    .heat-ad::before {
      right: 120px;
      transform: rotate(-2deg);
    }

    .heat-ad::after {
      right: 36px;
      height: 82%;
      transform: rotate(3deg);
    }

    .smoke {
      position: absolute;
      right: 28px;
      top: 18px;
      z-index: -1;
      width: 220px;
      height: 210px;
      opacity: .72;
      background:
        radial-gradient(circle at 28% 78%, rgba(17,17,17,.2) 0 18px, transparent 19px),
        radial-gradient(circle at 54% 54%, rgba(17,17,17,.16) 0 30px, transparent 31px),
        radial-gradient(circle at 76% 26%, rgba(17,17,17,.12) 0 42px, transparent 43px);
      filter: blur(.2px);
    }

    .ad-kicker,
    .ad-badge {
      width: fit-content;
      padding: 7px 9px;
      color: var(--paper);
      background: var(--ink);
      font-size: 11px;
      line-height: 1;
      font-weight: 950;
      text-transform: uppercase;
    }

    .heat-ad h2 {
      max-width: 380px;
      margin: 16px 0 0;
      font-size: clamp(34px, 4vw, 58px);
      line-height: .88;
      font-weight: 950;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .heat-ad p {
      max-width: 330px;
      margin: 14px 0 0;
      color: rgba(17,17,17,.72);
      font-size: clamp(17px, 1.7vw, 22px);
      line-height: 1.16;
      font-weight: 850;
    }

    .ad-badge {
      align-self: end;
      max-width: 280px;
      color: var(--ink);
      background: var(--sun);
      line-height: 1.15;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .button {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 15px;
      border: 1px solid currentColor;
      background: transparent;
      color: inherit;
      font-size: 14px;
      font-weight: 950;
      cursor: pointer;
    }

    .button.primary {
      color: var(--paper);
      background: var(--ink);
      border-color: var(--ink);
    }

    .button.red {
      color: var(--ink);
      background: var(--sun);
      border-color: var(--sun);
    }

    .section {
      margin-top: 30px;
    }

    .content-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
      gap: clamp(24px, 4vw, 58px);
      align-items: start;
    }

    .latest-rail {
      position: relative;
      align-self: stretch;
      margin-top: 30px;
      padding: 18px 0 0 18px;
      border-top: 7px solid var(--sun);
      border-left: 7px solid var(--teal);
      background: linear-gradient(180deg, rgba(255,253,247,.48), transparent 34%);
    }

    .latest-rail h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: .9; font-weight: 950; }
    .latest-rail p { margin: 10px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.3; font-weight: 760; }
    .latest-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .latest-list li { border-bottom: 1px solid var(--line); }
    .latest-list a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 0; font-size: 15px; line-height: 1.08; font-weight: 900; }
    .latest-list b { color: var(--teal); font-size: 11px; line-height: 1.35; }
    .latest-list a:hover, .latest-list a:focus-visible { color: var(--teal); outline: 0; }

    .classics-section {
      margin-top: 46px;
      padding: clamp(20px, 4vw, 42px);
      border: 1px solid var(--ink);
      background:
        linear-gradient(135deg, rgba(0,166,166,.18), transparent 46%),
        linear-gradient(315deg, rgba(244,196,48,.34), transparent 38%),
        var(--white);
      box-shadow: 12px 12px 0 var(--sun);
    }

    .classics-head { margin-bottom: 18px; }
    .classics-head h2 { max-width: 620px; }
    .classics-head .label { margin-bottom: 12px; background: var(--teal); color: var(--ink); }
    .classics-feature {
      display: grid;
      grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
      gap: clamp(20px, 4vw, 48px);
      align-items: stretch;
      color: var(--ink);
    }
    .classics-feature figure { min-height: 100%; margin: 0; border: 1px solid var(--ink); background: var(--ink); }
    .classics-feature figure img { width: 100%; height: 100%; min-height: 320px; display: block; object-fit: cover; filter: grayscale(.08) contrast(1.08); }
    .classics-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(8px, 2vw, 20px) 0; }
    .classics-copy h3 { max-width: 760px; margin: 16px 0 0; font-size: clamp(42px, 6vw, 82px); line-height: .83; font-weight: 950; letter-spacing: -.035em; text-wrap: balance; }
    .classics-copy p { max-width: 650px; margin: 18px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 25px); line-height: 1.2; font-weight: 760; }
    .classics-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
    .classics-meta span { padding: 7px 9px; border: 1px solid var(--ink); background: rgba(255,253,247,.74); font-size: 12px; font-weight: 900; }
    .classics-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 28px; }
    .classics-actions a { min-height: 45px; display: inline-flex; align-items: center; padding: 11px 13px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 950; }
    .classics-actions a:last-child { background: var(--sun); color: var(--ink); }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 18px;
      margin-bottom: 14px;
    }

    .section-head h2 {
      margin: 0;
      font-size: clamp(34px, 5vw, 66px);
      line-height: .88;
      letter-spacing: 0;
      font-weight: 950;
      text-wrap: balance;
    }

    .section-head p {
      max-width: 560px;
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.34;
      font-weight: 760;
    }

    .news-grid {
      display: grid;
      gap: 14px;
    }

    .top-stories,
    .lower-stories {
      display: grid;
      gap: 14px;
    }

    .top-stories {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lower-stories {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .main-story,
    .stack-card,
    .small-card,
    .rubric,
    .place,
    .receipt,
    .complaint {
      border: 1px solid var(--line);
      background: var(--white);
    }

    .main-story {
      min-height: 480px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(18px, 4vw, 40px);
      border-top: 8px solid var(--turquoise);
    }

    .story-intro {
      display: block;
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 950;
      line-height: 1.18;
      text-transform: uppercase;
    }

    .terran-story .label {
      color: var(--terran-dark);
      background: var(--sun);
    }

    .terran-story .story-intro {
      color: rgba(247, 242, 223, .72);
    }

    .main-story.terran-story {
      color: var(--paper);
      border-top-color: var(--terran);
      background:
        linear-gradient(135deg, rgba(179,18,23,.96), rgba(58,11,13,.92) 58%, rgba(17,17,17,.96)),
        var(--terran-dark);
    }

    .main-story.terran-story p,
    .main-story.terran-story .meta {
      color: rgba(247, 242, 223, .76);
    }

    .main-story.terran-story .story-image {
      border-color: rgba(247, 242, 223, .28);
      background: rgba(17, 17, 17, .42);
    }

    .main-story.terran-story .story-image img {
      filter: grayscale(.05) contrast(1.16) sepia(.16) saturate(1.32);
      mix-blend-mode: screen;
    }

    .main-story.city-story {
      border-top-color: var(--red);
      background:
        linear-gradient(135deg, rgba(255,253,247,.98), rgba(244,196,48,.18) 46%, rgba(0,166,166,.13)),
        var(--white);
    }

    .city-story .label {
      color: var(--paper);
      background: var(--red);
    }

    .main-story.city-story h3::after {
      content: "";
      display: block;
      width: min(280px, 72%);
      height: 10px;
      margin-top: 14px;
      background: linear-gradient(90deg, var(--red) 0 45%, var(--sun) 45% 68%, var(--turquoise) 68% 100%);
    }

    .main-story.quake-story {
      color: var(--paper);
      border-top-color: var(--sun);
      background:
        linear-gradient(135deg, rgba(21,17,14,.96), rgba(48,39,30,.94) 58%, rgba(17,17,17,.98)),
        var(--ink);
    }

    .quake-story .label {
      color: var(--ink);
      background: var(--sun);
    }

    .main-story.quake-story p,
    .main-story.quake-story .meta,
    .quake-story .story-intro {
      color: rgba(247, 242, 223, .76);
    }

    .main-story.quake-story .story-image {
      border-color: rgba(247, 242, 223, .28);
      background: rgba(17, 17, 17, .42);
    }

    .main-story.quake-story .story-image img {
      filter: grayscale(.04) contrast(1.18) sepia(.2) saturate(1.2);
    }

    .main-story.fitness-story {
      border-top-color: var(--green);
      background:
        linear-gradient(135deg, rgba(255,253,247,.98), rgba(232,245,244,.92)),
        var(--white);
    }

    .main-story.fitness-story h3::after {
      content: "";
      display: block;
      width: min(260px, 70%);
      height: 10px;
      margin-top: 14px;
      background: linear-gradient(90deg, var(--green) 0 58%, var(--sun) 58% 100%);
    }

    .main-story.cat-story {
      border-top-color: var(--sun);
      background:
        linear-gradient(135deg, rgba(255,253,247,.98), rgba(244,196,48,.18) 45%, rgba(0,166,166,.12)),
        var(--white);
    }

    .cat-story .label {
      color: var(--ink);
      background: var(--sun);
    }

    .main-story.cat-story .story-image img {
      filter: grayscale(.08) contrast(1.08);
    }

    .main-story h3,
    .small-card h3 {
      margin: 18px 0 0;
      font-size: clamp(34px, 5vw, 70px);
      line-height: .88;
      letter-spacing: 0;
      font-weight: 950;
      text-wrap: balance;
    }

    .main-story p,
    .stack-card p,
    .small-card p,
    .rubric p,
    .place p,
    .receipt p,
    .complaint p,
    .footer p {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.35;
      font-weight: 720;
    }

    .story-stack {
      display: grid;
      gap: 14px;
    }

    .stack-card {
      min-height: 330px;
      padding: 18px;
    }

    .story-link {
      color: inherit;
      text-decoration: none;
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .story-link:hover,
    .story-link:focus-visible {
      outline: 2px solid var(--turquoise);
      outline-offset: 3px;
      transform: translateY(-2px);
      box-shadow: 0 18px 42px rgba(17, 17, 17, .12);
    }

    .story-image {
      overflow: hidden;
      margin: 0 0 20px;
      border: 1px solid var(--line);
      background: var(--paper);
      aspect-ratio: 16 / 9;
    }

    .story-image img,
    .mini-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      filter: grayscale(.12) contrast(1.05);
    }

    .ink-strip {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
      margin-top: 18px;
    }

    .ink-strip img {
      width: 100%;
      aspect-ratio: 1;
      display: block;
      object-fit: cover;
      border: 1px solid var(--line);
      background: var(--paper);
      filter: grayscale(.1) contrast(1.05);
    }

    .mini-image {
      overflow: hidden;
      margin: 0 0 14px;
      border: 1px solid var(--line);
      background: var(--paper);
      aspect-ratio: 16 / 9;
    }

    .stack-card h3 {
      margin: 14px 0 0;
      font-size: clamp(26px, 3vw, 38px);
      line-height: .94;
      letter-spacing: 0;
      font-weight: 950;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .issue-map {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .small-card {
      min-height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 18px;
    }

    .small-card h3 {
      font-size: clamp(28px, 3.4vw, 46px);
    }

    .small-card:nth-child(1) { border-top: 8px solid var(--turquoise); }
    .small-card:nth-child(2) { border-top: 8px solid var(--sun); }
    .small-card:nth-child(3) { border-top: 8px solid var(--green); }
    .small-card:nth-child(4) { border-top: 8px solid var(--red); }

    .spread {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(300px, .48fr);
      gap: clamp(20px, 4vw, 58px);
      min-height: 540px;
      padding: clamp(24px, 5vw, 64px);
      color: var(--paper);
      background: var(--ink);
      isolation: isolate;
    }

    .spread::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(110deg, rgba(244,196,48,.28), transparent 42%),
        url("assets/narval-cover-concept.png?v=20260711") 62% 42% / cover no-repeat;
      filter: grayscale(.18) contrast(1.08) brightness(.58);
    }

    .spread::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(17,17,17,.96), rgba(17,17,17,.72) 50%, rgba(17,17,17,.28)),
        linear-gradient(0deg, rgba(17,17,17,.92), transparent 58%);
    }

    .spread h2 {
      max-width: 920px;
      margin: 16px 0 0;
      font-size: clamp(48px, 8vw, 112px);
      line-height: .84;
      letter-spacing: 0;
      font-weight: 950;
      text-wrap: balance;
    }

    .spread p {
      max-width: 720px;
      margin: 16px 0 0;
      color: rgba(244, 241, 234, .78);
      font-size: clamp(18px, 2vw, 23px);
      line-height: 1.28;
      font-weight: 760;
    }

    .spread-list {
      align-self: end;
      display: grid;
      border: 1px solid rgba(244, 241, 234, .26);
      background: rgba(17, 17, 17, .42);
      backdrop-filter: blur(8px);
    }

    .spread-list div {
      padding: 16px;
      border-bottom: 1px solid rgba(244, 241, 234, .18);
      font-size: 17px;
      font-weight: 870;
      line-height: 1.25;
    }

    .spread-list div:last-child { border-bottom: 0; }

    .rubricator {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }

    .rubric {
      min-height: 168px;
      padding: 14px;
    }

    .rubric small {
      display: block;
      color: var(--turquoise);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .rubric strong {
      display: block;
      margin-top: 20px;
      font-size: clamp(22px, 2.7vw, 34px);
      line-height: .94;
      font-weight: 950;
    }

    .ad-grid {
      display: grid;
      grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
      gap: 14px;
      align-items: stretch;
    }

    .receipt {
      min-height: 470px;
      padding: clamp(18px, 4vw, 36px);
      background:
        linear-gradient(90deg, rgba(0,166,166,.12) 1px, transparent 1px) 0 0 / 18px 18px,
        var(--receipt);
      border-top: 8px solid var(--turquoise);
    }

    .receipt h2 {
      max-width: 620px;
      margin: 18px 0 0;
      font-size: clamp(42px, 6vw, 86px);
      line-height: .86;
      letter-spacing: 0;
      font-weight: 950;
      text-wrap: balance;
    }

    .bill {
      margin-top: 26px;
      border-block: 2px solid var(--ink);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }

    .bill div {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 0;
      border-bottom: 1px dashed var(--strong-line);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
    }

    .bill div:last-child {
      border-bottom: 0;
      font-size: 16px;
      font-weight: 950;
    }

    .complaint {
      display: grid;
      align-content: space-between;
      min-height: 470px;
      padding: clamp(18px, 4vw, 36px);
      border-top: 8px solid var(--sun);
    }

    .complaint h2 {
      margin: 18px 0 0;
      font-size: clamp(42px, 6vw, 84px);
      line-height: .86;
      letter-spacing: 0;
      font-weight: 950;
    }

    .complaint form {
      display: grid;
      gap: 10px;
      margin-top: 24px;
    }

    .form-status {
      min-height: 22px;
      color: var(--turquoise);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.25;
    }

    .field {
      width: 100%;
      min-height: 46px;
      border: 1px solid var(--strong-line);
      background: rgba(255, 253, 247, .84);
      padding: 12px;
      color: var(--ink);
      font-weight: 760;
    }

    textarea.field {
      min-height: 122px;
      resize: vertical;
      line-height: 1.32;
    }

    .places {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .place {
      min-height: 170px;
      padding: 16px;
    }

    .place strong {
      display: block;
      font-size: clamp(24px, 3vw, 36px);
      line-height: .94;
      font-weight: 950;
    }

    .ticker {
      overflow: hidden;
      margin-top: 30px;
      border-block: 8px solid var(--ink);
      color: var(--paper);
      background: var(--turquoise);
      white-space: nowrap;
    }

    .ticker span {
      display: inline-block;
      padding: 12px 0;
      font-size: 18px;
      font-weight: 950;
      animation: ticker 28s linear infinite;
    }

    @keyframes ticker {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .footer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
      gap: 24px;
      margin-top: 30px;
      padding: 30px 0 8px;
      border-top: 1px solid var(--line);
    }

    .footer strong {
      display: block;
      font-size: clamp(34px, 5vw, 70px);
      line-height: .86;
      font-weight: 950;
    }

    .follow {
      display: grid;
      gap: 8px;
    }

    .follow a {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      background: rgba(255, 253, 247, .62);
      font-weight: 900;
    }

    .follow a.support {
      color: var(--ink);
      background: var(--sun);
      border-color: var(--sun);
    }

    .follow a.support.secondary {
      color: var(--paper);
      background: var(--ink);
      border-color: var(--ink);
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .ticker span { animation: none; }
    }

    @media (max-width: 1120px) {
      .classics-feature { grid-template-columns: 1fr; }
      .classics-feature figure img { min-height: 300px; }
      .content-shell { grid-template-columns: 1fr; }
      .latest-rail { max-width: 680px; margin-top: 12px; }
      .hero,
      .news-grid,
      .top-stories,
      .lower-stories,
      .spread,
      .ad-grid,
      .footer {
        grid-template-columns: 1fr;
      }

      .hero { min-height: auto; }
      .cover-art,
      .heat-ad { min-height: 560px; }
      .issue-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .rubricator { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 760px), (max-device-width: 760px) {
      html,
      body { max-width: 100%; overflow-x: hidden; }

      .page { width: 100%; max-width: 100%; }

      .hero {
        display: block;
        width: 100%;
        min-width: 0;
      }

      .cover-art,
      .heat-ad {
        width: 100%;
        min-width: 0;
      }

      .heat-ad { margin-top: 14px; }

      .topbar {
        position: static;
        align-items: flex-start;
        flex-direction: column;
      }

      .status-strip {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .status-strip p {
        white-space: normal;
      }

      .status-metrics {
        flex-wrap: wrap;
      }

      .nav {
        flex-wrap: wrap;
        overflow: visible;
      }

      .section-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .issue-map,
      .top-stories,
      .lower-stories,
      .rubricator,
      .places,
      .ink-strip {
        grid-template-columns: 1fr;
      }

      .cover-art,
      .heat-ad { min-height: 560px; }
      .cover-masthead span { font-size: clamp(52px, 17vw, 92px); }
    }

    /* Some Android browsers keep a wide layout viewport despite the viewport tag. */
    @media (max-width: 900px), (pointer: coarse) and (max-device-width: 1200px) {
      .page { width: 100% !important; max-width: 100% !important; padding: 14px !important; }

      .hero,
      .news-grid,
      .top-stories,
      .content-shell,
      .ad-grid,
      .places,
      .footer {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .top-stories { display: grid !important; }

      .main-story,
      .stack-card,
      .small-card,
      .receipt,
      .complaint {
        width: 100%;
        min-width: 0;
      }

      .main-story h3,
      .stack-card h3,
      .small-card h3 {
        overflow-wrap: anywhere;
      }

      .story-image,
      .story-image img { max-width: 100%; }
    }

    @media (max-width: 520px) {
      .page { padding: 16px; }
      .brand { align-items: center; }
      .brand strong { font-size: 31px; }
      .brand span { font-size: 12px; }
      .cover-art { min-height: 520px; }
      .spread h2 {
        font-size: clamp(44px, 15vw, 62px);
      }
      .main-story,
      .small-card,
      .receipt,
      .complaint {
        min-height: 250px;
      }
      .cover-line {
        align-items: flex-start;
        flex-direction: column;
      }
    }

.lang-switch{display:inline-flex;align-items:center;gap:0;margin-left:8px;border:1px solid var(--line, rgba(17,17,17,.16));background:rgba(255,253,247,.58)}
    .lang-switch a{display:inline-flex;align-items:center;min-height:38px;padding:9px 10px;text-decoration:none;font-size:12px;font-weight:950;line-height:1;text-transform:uppercase}
    .lang-switch a[aria-current="true"]{background:var(--ink,#111);color:var(--paper,#f7f2df)}
    .topbar .lang-switch a:hover,.topbar .lang-switch a:focus-visible{outline:2px solid var(--turquoise, var(--teal, #00a6a6));outline-offset:2px}