/* =========================================================================
   POLITICS — the City sheet's stylesheet under the Politics sheet's own
   class names (scripts/build_politics_sheet.py, 2026-09-05: the owner asked
   for the City layout as the starting point, story bands only). Generated
   from city.css by a rename; rebuild from city.css when it changes, then
   re-append the V2 block near the foot of this file (the Politics sheet's
   own rules: the CNN hierarchy, 2026-09-05). The rules for bands the
   Politics sheet does not carry are inert.
   ========================================================================= */
/* Compact chrome — the entertainment page's numbers (the owner's ask),
   CSS-only, on donor-identical markup. */
.polwide .band.utility { height: 30px; }
.polwide .brand-band.small { height: 58px; }
.polwide .brand-band.small .wordmark { width: 290px; }
.polwide nav.sections { height: 32px; }

/* Full-bleed, like the Entertainment and Opinion rooms: the mock's paper
   runs edge to edge; the sheet content caps itself below. */
.polwide { max-width: none; border-radius: 0; box-shadow: none;
  background:
    radial-gradient(circle at 8% 13%, rgba(82,64,36,.025), transparent 24%),
    radial-gradient(circle at 84% 32%, rgba(82,64,36,.02), transparent 25%),
    #fbfaf7; }

/* The sheet takes the mock's own shell measure. */
.polsheet { max-width: 2000px; margin: 0 auto;
  padding: 0 clamp(20px, 2.1vw, 42px) 44px; }

/* The house's phone rule (styles.css, "THE MASTHEAD COLLISION"): the
   utility band grows when Newsletter / The Editor / About wrap onto a
   second row. styles.css enumerates the desk shells by name and cannot
   know this one, so the same rule rides with the desk that needs it. */
@media (max-width: 900px) {
  .polwide .band.utility { height: auto; padding: 8px 0; }
}


    .polsheet{
      --ink: #151515;
      --paper: #fbfaf7;
      --line: #d9d7d1;
      --blue: #435fa4;
      --red: #e94345;
      --green: #25734f;
      --yellow: #ffc62d;
    }
    .polsheet *{ box-sizing: border-box; }
    .polsheet{ scroll-behavior: smooth; }
    .polsheet{
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 13%, rgba(82,64,36,.025), transparent 24%),
        radial-gradient(circle at 84% 32%, rgba(82,64,36,.02), transparent 25%),
        #fbfaf7;
      font-family: 'Source Serif 4', Georgia, serif;
      overflow-x: hidden;
    }
    .polsheet button, .polsheet a{ -webkit-tap-highlight-color: transparent; }
    .polsheet button:focus-visible, .polsheet a:focus-visible{ outline: 3px solid #ffcc31; outline-offset: 3px; }
    .polsheet img{ display: block; width: 100%; }
    
    .polsheet .display{ font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
    .polsheet .serif{ font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
    .polsheet .sans{ font-family: "Inter", sans-serif; }
    .polsheet .ci{ display: inline-block; height: 1em; vertical-align: -.12em; }
    .polsheet .scribble{ font-family: "Inter", sans-serif; }
    .polsheet .section-title{
      font-family: "Playfair Display", Georgia, serif;
      font-weight: 700;
      font-size: clamp(23px, 1.6vw, 32px);
      line-height: 1;
      letter-spacing: .01em;
      text-transform: uppercase;
    }
    .polsheet .eyebrow{
      font-family: "Inter", sans-serif;
      font-size: clamp(11px, .8vw, 14px);
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .025em;
      font-weight: 700;
    }
    .polsheet .meta{ font-family: "Inter", sans-serif; font-size: clamp(12px, .85vw, 15px); line-height: 1.25; color: #373737; }
    .polsheet .rule{ border-color: var(--line); }
    .polsheet .image-shadow{ box-shadow: 0 4px 12px rgba(0,0,0,.08); }
    .polsheet .click-card{ cursor: pointer; transition: transform .22s ease, opacity .22s ease; }
    .polsheet .click-card:hover{ transform: translateY(-3px); }
    .polsheet .click-card:hover img{ filter: saturate(1.06); }

    /* Lead */
    .polsheet .lead-section{ padding-top: clamp(34px, 2.2vw, 44px); }
    .polsheet .lead-title{ margin-bottom: 14px; }
    .polsheet .hero-grid{
      display: grid;
      grid-template-columns: minmax(0, 3.08fr) minmax(250px, 1.01fr) minmax(245px, .88fr);
      gap: clamp(18px, 1.55vw, 31px);
      align-items: stretch;
    }
    .polsheet .hero-card{
      height: clamp(430px, 35vw, 700px);
      position: relative;
      overflow: hidden;
      background: #050505;
      color: white;
      box-shadow: 0 4px 14px rgba(0,0,0,.11);
    }
    .polsheet .hero-photo{ position: absolute; inset: 0 0 auto; height: 66%; object-fit: cover; object-position: center top; }
    .polsheet .hero-shade{ position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,.05) 39%, rgba(0,0,0,.76) 69%, #030303 96%); }
    .polsheet .hero-copy{ position: absolute; left: 3%; right: 3%; bottom: 3.5%; z-index: 2; }
    .polsheet .hero-copy .hero-headline{
      max-width: 92%;
      margin: 12px 0 14px;
      font-size: clamp(30px, 2.5vw, 50px);
      line-height: 1.02;
      letter-spacing: -.018em;
    }
    .polsheet .hero-deck{ max-width: 84%; font-size: clamp(15px, 1.05vw, 20px); line-height: 1.45; color: #f4f1ec; }
    .polsheet .hero-meta{ margin-top: clamp(16px, 1.4vw, 28px); color: #f8f7f1; }
    .polsheet .thumb-stack{ display: grid; grid-template-rows: repeat(4, 1fr); gap: clamp(10px, .75vw, 15px); height: clamp(430px, 35vw, 700px); overflow: hidden; }
    .polsheet .thumb-stack img{ height: 100%; object-fit: cover; box-shadow: 0 3px 9px rgba(0,0,0,.09); }
    .polsheet .lead-rail{ display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); height: clamp(430px, 35vw, 700px); overflow: hidden; }
    .polsheet .rail-story{ min-height: 0; overflow: hidden; border-bottom: 1px solid var(--line); padding: 3px 0 clamp(8px, .7vw, 14px); display: flex; flex-direction: column; justify-content: space-between; }
    .polsheet .rail-story + .rail-story{ padding-top: clamp(13px, 1.1vw, 22px); }
    .polsheet .rail-story h3{ font-size: clamp(17px, 1.48vw, 29px); line-height: 1.14; margin: 7px 0; }
    .polsheet .category-blue{ color: #455ca3; }
    .polsheet .category-pink{ color: #cc276d; }
    .polsheet .category-green{ color: #20794f; }
    .polsheet .category-red{ color: #ed424a; }

    /* Latest */
    .polsheet .latest{ padding-top: clamp(42px, 3vw, 60px); }
    .polsheet .section-heading-row{ display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 1.45vw, 29px); }
    .polsheet .section-link{ font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(12px, .85vw, 15px); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
    .polsheet .latest-grid{ display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: clamp(14px, 1.3vw, 26px); }
    .polsheet .latest-card{ min-width: 0; padding-right: clamp(8px, .65vw, 13px); border-right: 1px solid #e2e0db; display: flex; flex-direction: column; }
    .polsheet .latest-card:last-child{ border-right: 0; padding-right: 0; }
    .polsheet .latest-card img{ height: clamp(132px, 9vw, 180px); object-fit: cover; object-position: top; }
    .polsheet .latest-card .eyebrow{ margin-top: 16px; }
    .polsheet .latest-card h3{ font-size: clamp(18px, 1.38vw, 28px); line-height: 1.17; margin: 14px 0 22px; }
    .polsheet .latest-card .meta{ margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; }

    /* Rankings */
    .polsheet .ranking-wrap{ padding-top: clamp(42px, 2.8vw, 56px); }
    .polsheet .ranking-panel{ display: grid; grid-template-columns: 24.25fr 75.75fr; height: clamp(390px, 31vw, 620px); background: var(--yellow); box-shadow: 0 4px 17px rgba(195,139,0,.14); overflow: hidden; }
    .polsheet .ranking-intro{ padding: clamp(30px, 2.2vw, 44px) clamp(24px, 1.7vw, 34px); background: linear-gradient(135deg,#ffc737,#ffd35b 76%,#fbbb18); display: flex; flex-direction: column; }
    .polsheet .ranking-intro h2{ margin: clamp(23px, 1.6vw, 32px) 0; font-size: clamp(28px, 2.15vw, 43px); line-height: 1.05; letter-spacing: 0; }
    .polsheet .ranking-intro p{ max-width: 390px; font-size: clamp(14px, 1vw, 19px); line-height: 1.5; }
    .polsheet .black-button{ margin-top: auto; display: inline-flex; width: fit-content; align-items: center; gap: 20px; background: #111; color: #fff; padding: clamp(14px, 1vw, 20px) clamp(20px, 1.4vw, 28px); font: 600 clamp(12px, .9vw, 16px) "Inter", sans-serif; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 5px 15px rgba(0,0,0,.24); }
    .polsheet .rank-cards{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-left: 5px solid var(--yellow); }
    .polsheet .rank-card{ position: relative; min-width: 0; border-right: 5px solid var(--yellow); background: #060606; overflow: hidden; }
    .polsheet .rank-card:last-child{ border-right: 0; }
    .polsheet .rank-card img{ width: 100%; height: 100%; object-fit: cover; }
    
    .polsheet .ranking-stats{ display: grid; grid-template-columns: 1.15fr 1.15fr 1.15fr 1.15fr 1.3fr; min-height: clamp(104px, 6.3vw, 126px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.55); }
    .polsheet .stat-item{ display: flex; align-items: center; gap: clamp(13px, 1vw, 20px); padding: 18px clamp(18px, 1.35vw, 27px); border-right: 1px solid #ccc9c2; }
    .polsheet .stat-item i{ font-size: clamp(27px, 1.9vw, 38px); }
    .polsheet .stat-kicker{ font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(10px, .72vw, 13px); line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; }
    .polsheet .stat-main{ font-size: clamp(21px, 1.55vw, 31px); white-space: nowrap; }
    .polsheet .stat-cta{ justify-content: center; border-right: 0; color: #f04439; font-family: "Inter", sans-serif; font-weight: 700; font-size: clamp(12px, .9vw, 16px); letter-spacing: .04em; text-transform: uppercase; }

    /* Housing */
    .polsheet .housing-now{ padding-top: clamp(40px, 2.7vw, 54px); }
    .polsheet .housing-grid{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(24px, 2.2vw, 44px); }
    .polsheet .housing-story{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 1.45vw, 29px); align-items: stretch; }
    .polsheet .housing-story img{ height: clamp(120px, 9.5vw, 190px); object-fit: cover; object-position: top; }
    .polsheet .housing-copy{ display: flex; flex-direction: column; justify-content: space-between; }
    .polsheet .housing-copy h3{ font-size: clamp(23px, 1.52vw, 31px); line-height: 1.18; }

    /* Weekend */
    .polsheet .weekend{ margin-top: clamp(48px, 3.3vw, 66px); background: #05080c; color: #fff; display: grid; grid-template-columns: 40.5fr 59.5fr; height: clamp(440px, 29vw, 580px); overflow: hidden; box-shadow: 0 5px 16px rgba(0,0,0,.14); }
    .polsheet .weekend-feature{ min-width: 0; height: 100%; }
    .polsheet .weekend-feature img{ height: 100%; object-fit: cover; object-position: center; }
    .polsheet .weekend-cards{ display: grid; /* auto-fit, not a fixed 4: the band's floor is 2, and a fixed four-track grid renders a 2-card week as two cards beside two EMPTY CELLS — the exact broken-looking thing the floors exist to prevent (caught by the external review, 2026-08-24). min 200px keeps a full 4-card week 4-across at every width above the 2-column breakpoint, so full supply renders exactly as the owner drew it. */ grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; padding: 10px 10px 10px 0; }
    .polsheet .week-card{ color: #121212; display: grid; grid-template-rows: 62% 38%; min-width: 0; overflow: hidden; }
    .polsheet .week-copy{ padding: clamp(24px, 1.7vw, 34px) clamp(18px, 1.3vw, 26px); display: flex; flex-direction: column; }
    .polsheet .week-card h3{ font-size: clamp(27px, 1.8vw, 36px); line-height: 1.08; margin: clamp(20px, 1.35vw, 27px) 0; }
    .polsheet .week-card p{ font-size: clamp(13px, .95vw, 17px); line-height: 1.45; }
    .polsheet .week-read{ margin-top: auto; font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(11px, .8vw, 14px); letter-spacing: .05em; text-transform: uppercase; }
    .polsheet .week-card img{ height: 100%; object-fit: cover; }
    .polsheet .mint{ background: #cde5df; }
    .polsheet .coral{ background: #f29687; }
    .polsheet .lime{ background: #cad64e; }
    .polsheet .cobalt{ background: #4c91dc; }

    /* Around LA */
    .polsheet .around{ padding-top: clamp(48px, 3.4vw, 68px); }
    .polsheet .around-grid{ display: grid; grid-template-columns: 14.6fr 66.2fr 19.2fr; column-gap: clamp(16px, 1.4vw, 28px); height: clamp(500px, 31vw, 620px); }
    .polsheet .around-intro{ padding-right: clamp(20px, 1.5vw, 30px); }
    .polsheet .around-intro p{ margin: 20px 0; font-size: clamp(14px, 1vw, 18px); line-height: 1.5; }
    .polsheet .area-more{ display: inline-flex; gap: 14px; color: #4969b2; font-family: "Inter", sans-serif; text-transform: uppercase; font-size: clamp(11px, .82vw, 14px); letter-spacing: .04em; font-weight: 700; }
    .polsheet .legend{ margin-top: clamp(23px, 1.7vw, 34px); display: grid; gap: clamp(14px, 1.1vw, 22px); }
    .polsheet .legend li{ display: flex; align-items: center; gap: 14px; font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(10px, .75vw, 13px); letter-spacing: .05em; text-transform: uppercase; }
    .polsheet .legend-dot{ width: 14px; height: 14px; border-radius: 2px; flex: 0 0 auto; }
    .polsheet .compass{ margin: 36px 0 0 38px; font-size: 40px; transform: rotate(-8deg); }
    .polsheet .map-art{ min-width: 0; height: 100%; overflow: hidden; }
    .polsheet .map-art img{ height: 100%; object-fit: cover; }
    .polsheet .area-list{ border: 1px solid var(--line); padding: 20px 25px 0; background: rgba(255,255,255,.65); }
    .polsheet .area-list h3{ font-family: "Inter", sans-serif; text-transform: uppercase; font-size: clamp(12px, .9vw, 15px); letter-spacing: .05em; margin-bottom: 9px; }
    .polsheet .area-list a{ min-height: calc((100% - 45px)/8); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e4e2dd; font-size: clamp(14px, 1vw, 18px); }

    /* Newcomer */
    .polsheet .newcomer{ padding-top: clamp(52px, 3.7vw, 74px); display: grid; grid-template-columns: 2fr 3fr; gap: clamp(24px, 1.7vw, 34px); height: clamp(400px, 27vw, 540px); }
    .polsheet .newcomer-main{ height: 100%; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
    .polsheet .newcomer-main img{ height: 100%; object-fit: cover; }
    .polsheet .newcomer-side{ display: grid; grid-template-rows: 47% 53%; gap: clamp(23px, 1.5vw, 30px); }
    .polsheet .guide-tiles{ display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
    .polsheet .guide-tile{ background: #f2efeb; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 10px; text-align: center; }
    .polsheet .guide-tile i{ font-size: clamp(35px, 2.55vw, 51px); margin-bottom: clamp(18px, 1.35vw, 27px); }
    .polsheet .guide-tile span{ font-family: "Inter", sans-serif; font-weight: 700; font-size: clamp(11px, .8vw, 15px); line-height: 1.25; letter-spacing: .03em; }
    .polsheet .newcomer-article{ display: grid; grid-template-columns: 31fr 69fr; background: #f6f2ed; }
    .polsheet .newcomer-article img{ height: 100%; object-fit: cover; }
    .polsheet .newcomer-copy{ padding: clamp(25px, 2vw, 40px); display: flex; flex-direction: column; justify-content: center; }
    .polsheet .newcomer-copy h3{ font-size: clamp(28px, 1.95vw, 39px); line-height: 1.17; margin: 13px 0 22px; max-width: 650px; }

    /* Numbers */
    .polsheet .numbers{ margin-top: clamp(56px, 3.8vw, 76px); padding: clamp(25px, 1.85vw, 37px) clamp(24px, 1.8vw, 36px) clamp(28px, 2vw, 40px); background: #ffd4bf; }
    .polsheet .numbers-content{ display: grid; grid-template-columns: repeat(5, .83fr) 2.6fr .8fr; margin-top: clamp(28px, 2vw, 40px); min-height: clamp(150px, 9vw, 180px); }
    .polsheet .number-cell{ display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid rgba(90,70,60,.35); text-align: center; padding: 10px; }
    .polsheet .number-cell strong{ font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(28px, 2.05vw, 41px); line-height: 1; }
    .polsheet .number-cell b{ font-family: "Inter", sans-serif; font-size: clamp(11px, .8vw, 14px); margin-top: 14px; letter-spacing: .04em; text-transform: uppercase; }
    .polsheet .number-cell span{ font-family: "Inter", sans-serif; font-size: clamp(11px, .78vw, 13px); margin-top: 10px; }
    .polsheet .trend{ padding: 0 clamp(22px, 1.5vw, 30px); border-right: 1px solid rgba(90,70,60,.35); }
    .polsheet .trend h3{ font-family: "Inter", sans-serif; font-size: clamp(12px, .88vw, 15px); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
    .polsheet .trend p{ font-family: "Inter", sans-serif; font-size: clamp(11px, .8vw, 14px); margin: 7px 0; }
    .polsheet .trend svg{ width: 100%; height: 118px; overflow: visible; }
    .polsheet .data-link{ display: flex; align-items: center; justify-content: center; text-align: center; font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: clamp(12px, .9vw, 16px); }

    /* Getting around */
    .polsheet .getting{ margin-top: clamp(58px, 4vw, 80px); display: grid; grid-template-columns: 65.7fr 34.3fr; background: #e1f3f2; min-height: clamp(350px, 20vw, 400px); }
    .polsheet .getting-left{ padding: clamp(24px, 1.8vw, 36px) 0 0; display: grid; grid-template-rows: auto 1fr; }
    .polsheet .getting-heading{ padding: 0 clamp(23px, 1.4vw, 28px); display: flex; align-items: start; gap: 38px; }
    .polsheet .getting-heading div{ flex: 1; border-top: 1px solid #9bafad; margin-top: 14px; }
    .polsheet .getting-heading p{ font-size: clamp(14px, 1vw, 18px); margin-top: 12px; }
    .polsheet .getting-body{ display: grid; grid-template-columns: 24fr 76fr; align-items: end; }
    .polsheet .getting-body > img{ height: clamp(220px, 13.6vw, 272px); object-fit: cover; }
    .polsheet .transport-links{ display: grid; grid-template-columns: repeat(5,1fr); align-self: stretch; align-items: center; }
    .polsheet .transport-item{ height: 72%; padding: 10px clamp(13px, .95vw, 19px); border-right: 1px solid #b7cbc9; display: flex; flex-direction: column; justify-content: center; }
    .polsheet .transport-item:last-child{ border-right: 0; }
    .polsheet .transport-item i{ font-size: clamp(28px, 2vw, 40px); margin-bottom: 16px; }
    .polsheet .transport-item b{ font-family: "Inter", sans-serif; font-size: clamp(12px, .88vw, 15px); letter-spacing: .04em; text-transform: uppercase; }
    .polsheet .transport-item span{ font-family: "Inter", sans-serif; font-size: clamp(11px, .8vw, 14px); line-height: 1.35; margin-top: 10px; }
    .polsheet .getting-feature{ background: #fff; display: grid; grid-template-columns: 67% 33%; margin: 18px 0 0; }
    .polsheet .getting-copy{ padding: clamp(25px, 1.8vw, 36px); display: flex; flex-direction: column; justify-content: center; }
    .polsheet .getting-copy h3{ font-size: clamp(29px, 2vw, 40px); line-height: 1.13; margin: 15px 0; }
    .polsheet .getting-copy p{ font-size: clamp(13px, .95vw, 17px); line-height: 1.45; }
    .polsheet .getting-feature img{ height: 100%; object-fit: cover; }

    /* City services */
    .polsheet .city-services{ padding-top: clamp(58px, 4vw, 80px); display: grid; grid-template-columns: 68.5fr 29.5fr; gap: clamp(18px, 2vw, 40px); }
    .polsheet .city-left-head{ border-bottom: 1px solid #b9b7b1; padding: 0 18px 10px; }
    .polsheet .city-left-head p{ font-size: clamp(14px, 1vw, 18px); margin-top: 8px; }
    .polsheet .city-content{ display: grid; grid-template-columns: 37fr 28fr 35fr; min-height: clamp(280px, 16vw, 320px); padding-top: 22px; }
    .polsheet .city-content > img{ height: 100%; object-fit: cover; }
    .polsheet .budget-copy{ padding: 0 clamp(25px, 1.8vw, 36px); display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #c9c7c1; }
    .polsheet .budget-copy h3{ font-size: clamp(29px, 1.95vw, 39px); line-height: 1.13; margin: 13px 0 18px; }
    .polsheet .budget-copy p{ font-size: clamp(13px, .95vw, 17px); line-height: 1.45; }
    .polsheet .city-briefs{ padding-left: clamp(26px, 1.8vw, 36px); display: grid; grid-template-rows: repeat(3,1fr); }
    .polsheet .brief{ border-bottom: 1px solid #ddd9d2; display: flex; flex-direction: column; justify-content: center; }
    .polsheet .brief:last-child{ border-bottom: 0; }
    .polsheet .brief h4{ font-size: clamp(19px, 1.22vw, 24px); line-height: 1.15; margin: 9px 0; }
    .polsheet .useful{ border: 1px solid var(--line); align-self: end; }
    .polsheet .useful h2{ padding: 20px 30px 13px; border-bottom: 1px solid var(--line); }
    .polsheet .useful-grid{ display: grid; grid-template-columns: repeat(3,1fr); }
    .polsheet .useful-item{ min-height: clamp(106px, 6.2vw, 124px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px; font-family: "Inter", sans-serif; font-weight: 500; font-size: clamp(11px, .8vw, 14px); line-height: 1.3; }
    .polsheet .useful-item:nth-child(3n){ border-right: 0; }
    .polsheet .useful-item i{ font-size: clamp(25px, 1.75vw, 35px); margin-bottom: 11px; color: #111; }
    .polsheet .useful-all{ min-height: 45px; display: flex; justify-content: center; align-items: center; font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(11px, .85vw, 14px); letter-spacing: .05em; text-transform: uppercase; }

    /* Explore */
    .polsheet .explore{ padding-top: clamp(50px, 3.5vw, 70px); }
    .polsheet .explore-heading{ display: flex; align-items: center; gap: 32px; margin: 0 24px 23px; }
    .polsheet .explore-heading p{ font-size: clamp(14px, 1vw, 18px); white-space: nowrap; }
    .polsheet .explore-heading::after{ content: ""; height: 1px; background: #bbb9b3; flex: 1; }
    .polsheet .explore-grid{ display: grid; grid-template-columns: repeat(6,1fr); gap: 9px; }
    .polsheet .explore-grid a{ overflow: hidden; }
    .polsheet .explore-grid img{ height: clamp(150px, 9vw, 180px); object-fit: cover; transition: transform .25s ease; }
    .polsheet .explore-grid a:hover img{ transform: scale(1.025); }

    .polsheet .toast{ position: fixed; right: 24px; bottom: 24px; z-index: 110; background: #151515; color: #fff; padding: 15px 22px; transform: translateY(90px); opacity: 0; transition: .25s; font: 16px "Inter",sans-serif; }
    .polsheet .toast.show{ transform: translateY(0); opacity: 1; }

    @media (max-width: 1100px) {
      .polsheet .hero-grid{ grid-template-columns: minmax(0,2.3fr) minmax(220px,.9fr); }
      .polsheet .lead-rail{ grid-column: 1/-1; height: auto; min-height: 0; grid-template-columns: repeat(4,1fr); grid-template-rows: none; gap: 22px; }
      .polsheet .rail-story + .rail-story{ padding-top: 3px; }
      .polsheet .latest-grid{ grid-template-columns: repeat(3,1fr); row-gap: 34px; }
      .polsheet .ranking-panel{ grid-template-columns: 30fr 70fr; }
      .polsheet .rank-cards{ overflow-x: auto; grid-template-columns: repeat(5,250px); }
      .polsheet .housing-grid{ grid-template-columns: 1fr; gap: 28px; }
      .polsheet .housing-story{ grid-template-columns: 34fr 66fr; }
      .polsheet .around-grid{ grid-template-columns: 18fr 60fr 22fr; }
      .polsheet .newcomer{ grid-template-columns: 38fr 62fr; }
      .polsheet .guide-tile span{ font-size: 18px; }
      .polsheet .numbers-content{ grid-template-columns: repeat(5,1fr); }
      .polsheet .trend{ grid-column: 1/5; margin-top: 24px; padding-top: 18px; }
      .polsheet .data-link{ margin-top: 24px; }
      .polsheet .getting{ grid-template-columns: 1fr; }
      .polsheet .getting-feature{ min-height: 300px; margin-top: 28px; }
      .polsheet .city-services{ grid-template-columns: 1fr; }
      .polsheet .useful{ margin-top: 40px; }
    }

    @media (max-width: 900px) {
      .polsheet{ padding-left: 16px; padding-right: 16px; }
      .polsheet .lead-section{ padding-top: 28px; }
      .polsheet .hero-grid{ grid-template-columns: 1fr; }
      .polsheet .hero-card{ height: 520px; min-height: 0; }
      .polsheet .thumb-stack{ min-height: 0; height: 420px; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); }
      .polsheet .lead-rail{ grid-template-columns: repeat(2,1fr); }
      .polsheet .latest-grid{ grid-template-columns: repeat(2,1fr); }
      .polsheet .latest-card img{ height: 190px; }
      .polsheet .ranking-panel{ display: block; height: auto; min-height: 0; }
      .polsheet .ranking-intro{ min-height: 430px; }
      .polsheet .rank-cards{ height: 470px; grid-template-columns: repeat(5,235px); }
      .polsheet .ranking-stats{ grid-template-columns: repeat(2,1fr); }
      .polsheet .stat-item{ border-bottom: 1px solid #ccc9c2; }
      .polsheet .stat-cta{ grid-column: 1/-1; }
      .polsheet .housing-story{ grid-template-columns: 2fr 3fr; }
      .polsheet .weekend{ display: block; height: auto; }
      .polsheet .weekend-feature{ height: auto; }
      .polsheet .weekend-feature img{ height: auto; }
      .polsheet .weekend-cards{ grid-template-columns: repeat(2,1fr); padding: 10px; }
      .polsheet .week-card{ min-height: 480px; }
      .polsheet .around-grid{ grid-template-columns: 1fr; gap: 24px; height: auto; }
      .polsheet .legend{ grid-template-columns: repeat(2,1fr); }
      .polsheet .compass{ display: none; }
      .polsheet .map-art{ min-height: 420px; }
      .polsheet .area-list a{ min-height: 52px; }
      .polsheet .newcomer{ grid-template-columns: 1fr; height: auto; }
      .polsheet .newcomer-main{ min-height: 0; height: auto; }
      .polsheet .newcomer-main img{ height: auto; object-fit: contain; }
      .polsheet .newcomer-side{ grid-template-rows: auto auto; }
      .polsheet .guide-tiles{ grid-template-columns: repeat(3,1fr); }
      .polsheet .guide-tile{ min-height: 170px; }
      .polsheet .newcomer-article{ min-height: 260px; }
      .polsheet .numbers-content{ grid-template-columns: repeat(2,1fr); }
      .polsheet .number-cell{ min-height: 160px; border-bottom: 1px solid rgba(90,70,60,.25); }
      .polsheet .trend{ grid-column: 1/-1; }
      .polsheet .data-link{ grid-column: 1/-1; min-height: 70px; }
      .polsheet .getting-body{ grid-template-columns: 1fr; }
      .polsheet .getting-body > img{ height: 310px; }
      .polsheet .transport-links{ grid-template-columns: repeat(2,1fr); }
      .polsheet .transport-item{ min-height: 170px; border-bottom: 1px solid #b7cbc9; }
      .polsheet .getting-feature{ grid-template-columns: 65fr 35fr; }
      .polsheet .city-content{ grid-template-columns: 1fr 1fr; }
      .polsheet .city-content > img{ min-height: 300px; }
      .polsheet .city-briefs{ grid-column: 1/-1; padding: 24px 0 0; }
      .polsheet .brief{ min-height: 100px; }
      .polsheet .explore-grid{ grid-template-columns: repeat(3,1fr); }
      .polsheet .explore-grid img{ height: 180px; }
    }

    @media (max-width: 560px) {
      .polsheet .section-title{ font-size: 34px; }
      .polsheet .hero-card{ height: 500px; min-height: 0; }
      .polsheet .hero-photo{ height: 52%; }
      .polsheet .hero-copy .hero-headline{ max-width: 100%; font-size: 38px; }
      .polsheet .hero-deck{ max-width: 100%; font-size: 17px; }
      .polsheet .thumb-stack{ height: 300px; gap: 8px; }
      .polsheet .lead-rail{ grid-template-columns: 1fr; }
      .polsheet .rail-story{ min-height: 170px; }
      .polsheet .latest-grid{ grid-template-columns: 1fr; }
      .polsheet .latest-card{ border-right: 0; padding-right: 0; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
      .polsheet .latest-card img{ height: 220px; }
      .polsheet .latest-card h3{ font-size: 26px; }
      .polsheet .section-link{ display: none; }
      .polsheet .ranking-intro h2{ font-size: 56px; }
      .polsheet .ranking-stats{ grid-template-columns: 1fr; }
      .polsheet .stat-cta{ grid-column: auto; }
      .polsheet .housing-story{ grid-template-columns: 1fr; }
      .polsheet .housing-story img{ height: 230px; }
      .polsheet .housing-copy{ min-height: 150px; }
      .polsheet .weekend-feature{ height: auto; }
      .polsheet .weekend-cards{ grid-template-columns: 1fr; }
      .polsheet .week-card{ min-height: 500px; }
      .polsheet .legend{ grid-template-columns: 1fr 1fr; }
      .polsheet .map-art{ min-height: 270px; }
      .polsheet .newcomer-main{ min-height: 0; height: auto; }
      .polsheet .guide-tiles{ grid-template-columns: repeat(2,1fr); }
      .polsheet .newcomer-article{ grid-template-columns: 1fr; }
      .polsheet .newcomer-article img{ height: 220px; }
      .polsheet .numbers{ padding-left: 12px; padding-right: 12px; }
      .polsheet .number-cell strong{ font-size: 43px; }
      .polsheet .getting-heading{ display: block; }
      .polsheet .getting-heading div{ display: none; }
      .polsheet .getting-feature{ grid-template-columns: 1fr; }
      .polsheet .getting-feature img{ height: 220px; }
      .polsheet .city-content{ grid-template-columns: 1fr; }
      .polsheet .budget-copy{ min-height: 300px; border: 0; }
      .polsheet .useful-grid{ grid-template-columns: repeat(2,1fr); }
      .polsheet .useful-item:nth-child(3n){ border-right: 1px solid var(--line); }
      .polsheet .useful-item:nth-child(2n){ border-right: 0; }
      .polsheet .explore-heading{ display: block; margin-left: 0; }
      .polsheet .explore-heading p{ white-space: normal; margin-top: 8px; }
      .polsheet .explore-grid{ grid-template-columns: repeat(2,1fr); }
      .polsheet .explore-grid img{ height: 140px; }
    }
  
    /* ================= house additions (build_city_sheet.py) =========
       Class names the mock shares with the site chrome, neutralized:
       .latest is the front page's 47px ticker band (it was crushing the
       whole Latest section to a sliver), .meta and .eyebrow are the
       house labels (uppercase, tracked, blue). The sheet's terms are
       said explicitly so the globals cannot reach in. */
    .polsheet .latest{ height: auto; border-bottom: 0; background: transparent; }
    .polsheet .meta{ text-transform: none; letter-spacing: 0; font-weight: 500; }
    .polsheet .lead-title{ margin-top: 0; }
    .polsheet .eyebrow{ color: inherit; }
    .polsheet .category-blue{ color: #455ca3; }
    .polsheet .category-pink{ color: #cc276d; }
    .polsheet .category-green{ color: #20794f; }
    .polsheet .category-red{ color: #ed424a; }
    /* Grid tracks size to the stamped image dimensions unless the track
       minimum is zero — the thumb stack's fourth slice was being pushed
       out of its own clipped box. */
    .polsheet .thumb-stack{ grid-template-rows: repeat(4, minmax(0, 1fr)); }
    .polsheet .thumb-stack img{ min-height: 0; }
    /* Stamped width/height attributes give every image an intrinsic
       size, and a grid track whose minimum is auto grows to it — the
       phone layout was 1200px wide wherever a media query said 1fr.
       Capping the image caps the track. */
    .polsheet img{ max-width: 100%; min-width: 0; }

    /* The type the mock burned into its art, set as real HTML over the
       regenerated slices — same places, same words, now editable. */

    /* Apartment-rankings cards */
    .polsheet .rank-card img{ position: absolute; inset: 0; }
    .polsheet .rank-scrim{ position: absolute; inset: 0; z-index: 1; background:
      linear-gradient(to bottom, rgba(7,16,34,.62), transparent 30%,
      transparent 46%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.92) 88%); }
    .polsheet .rank-copy{ position: absolute; inset: 0; z-index: 2; display: flex;
      flex-direction: column; justify-content: space-between; color: #fff;
      padding: clamp(14px, 1.15vw, 23px) clamp(13px, 1vw, 20px); }
    .polsheet .rank-num{ font-size: clamp(22px, 1.6vw, 32px); line-height: 1; }
    .polsheet .rank-num::after{ content: ""; display: block; width: 1.15em;
      height: 3px; background: #fff; margin-top: 7px; }
    .polsheet .rank-name{ font-size: clamp(18px, 1.35vw, 27px); line-height: 1.05;
      margin: 0 0 6px; text-transform: uppercase; letter-spacing: .01em; }
    .polsheet .rank-sub{ font-size: clamp(13px, .95vw, 17px); line-height: 1.3;
      margin: 0 0 clamp(10px, .9vw, 18px); color: #e9e6e0; }
    .polsheet .rank-label{ font-family: "Inter", sans-serif; font-weight: 600;
      font-size: clamp(9px, .68vw, 12px); letter-spacing: .06em;
      text-transform: uppercase; color: #cfccc6; margin: 0 0 4px; }
    .polsheet .rank-price{ font-size: clamp(22px, 1.6vw, 32px); line-height: 1; }

    /* Weekend feature */
    .polsheet .weekend-feature{ position: relative; overflow: hidden; }
    .polsheet .weekend-feature img{ position: absolute; inset: 0; }
    .polsheet .weekend-scrim{ position: absolute; inset: 0; z-index: 1; background:
      linear-gradient(105deg, rgba(2,5,9,.88) 0%, rgba(2,5,9,.55) 44%,
      rgba(2,5,9,.08) 78%),
      linear-gradient(to top, rgba(2,5,9,.72), transparent 38%); }
    .polsheet .weekend-copy{ position: absolute; inset: 0; z-index: 2; display: flex;
      flex-direction: column; color: #fff;
      padding: clamp(22px, 1.9vw, 38px) clamp(20px, 1.7vw, 34px); }
    .polsheet .weekend-copy .eyebrow{ color: #d9d5cd; }
    .polsheet .weekend-title{ font-size: clamp(30px, 2.45vw, 49px); line-height: 1.04;
      letter-spacing: .005em; margin: clamp(12px, 1vw, 20px) 0; }
    .polsheet .weekend-deck{ max-width: 300px; font-size: clamp(14px, 1vw, 18px);
      line-height: 1.5; color: #e6e2da; }
    .polsheet .weekend-link{ margin-top: auto; font-family: "Inter", sans-serif;
      font-weight: 600; font-size: clamp(11px, .85vw, 14px);
      letter-spacing: .05em; text-transform: uppercase; }

    /* Around L.A. — pins and story notes over the clean map */
    .polsheet .map-art{ position: relative; }
    .polsheet .map-art > img{ height: 100%; }
    .polsheet .map-dot{ position: absolute; z-index: 2; width: clamp(22px, 1.7vw, 30px);
      height: clamp(22px, 1.7vw, 30px); margin: -11px 0 0 -11px;
      border-radius: 50%; border: 2px solid #fff; color: #fff; display: grid;
      place-items: center; font: 700 clamp(11px, .85vw, 14px) "Inter",
      sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
    .polsheet .map-note{ position: absolute; z-index: 3; width: clamp(150px, 13.5vw,
      216px); background: rgba(255,255,255,.96); border: 1px solid
      rgba(21,21,21,.12); border-left: 4px solid #999; border-radius: 6px;
      box-shadow: 0 6px 18px rgba(0,0,0,.14);
      padding: 13px 14px 12px 16px; }
    .polsheet .map-note-num{ position: absolute; top: -12px; left: -12px; width: 25px;
      height: 25px; border-radius: 50%; border: 2px solid #fff; color: #fff;
      display: grid; place-items: center; font: 700 12px "Inter", sans-serif;
      box-shadow: 0 2px 6px rgba(0,0,0,.25); }
    .polsheet .map-note b{ display: block; font-family: "Playfair Display", Georgia,
      serif; font-weight: 600; font-size: clamp(13px, .95vw, 16px);
      line-height: 1.25; margin-bottom: 5px; }
    .polsheet .map-note p{ font-size: clamp(11px, .82vw, 14px); line-height: 1.4;
      color: #444; margin: 0; }
    .polsheet .map-credit{ position: absolute; right: 10px; bottom: 8px; z-index: 2;
      font: 9px "Inter", sans-serif; letter-spacing: .04em; color: #454540;
      background: rgba(255,255,255,.72); padding: 2px 7px;
      border-radius: 3px; }

    /* Newcomer feature */
    .polsheet .newcomer-main{ position: relative; }
    .polsheet .newcomer-main img{ position: absolute; inset: 0; height: 100%; }
    .polsheet .newcomer-scrim{ position: absolute; inset: 0; z-index: 1; background:
      linear-gradient(100deg, rgba(24,14,26,.72) 0%, rgba(24,14,26,.38) 52%,
      rgba(24,14,26,.05) 82%); }
    .polsheet .newcomer-main-copy{ position: absolute; inset: 0; z-index: 2;
      display: flex; flex-direction: column; justify-content: center;
      color: #fff; padding: clamp(22px, 2vw, 40px); }
    .polsheet .newcomer-main-copy h2{ font-size: clamp(30px, 2.35vw, 47px);
      line-height: 1.06; letter-spacing: .005em; margin: 0 0
      clamp(12px, 1.1vw, 22px); }
    .polsheet .newcomer-main-copy p{ max-width: 330px; font-size: clamp(14px, 1vw,
      18px); line-height: 1.5; color: #efeae4; }
    .polsheet .ghost-button{ margin-top: clamp(18px, 1.6vw, 32px); align-self:
      flex-start; border: 1px solid rgba(255,255,255,.85); padding:
      clamp(11px, .9vw, 16px) clamp(16px, 1.3vw, 24px); font: 600
      clamp(11px, .85vw, 14px) "Inter", sans-serif; letter-spacing: .05em;
      text-transform: uppercase; }

    /* Explore tiles */
    .polsheet .explore-grid a, .polsheet .explore-grid .explore-tile{ position: relative; display: block; }
    .polsheet .tile-scrim{ position: absolute; inset: 0; background:
      linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.18) 46%,
      transparent 70%); }
    .polsheet .tile-label{ position: absolute; left: clamp(12px, 1vw, 18px);
      right: clamp(10px, .9vw, 16px); bottom: clamp(10px, .9vw, 16px);
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; color: #fff; font-size: clamp(15px, 1.1vw, 20px);
      line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; }
    .polsheet .tile-label b{ font-family: "Inter", sans-serif; font-weight: 400;
      font-size: 1.1em; }

    /* ---- INERT AFFORDANCES (2026-08-21) ----------------------------
       Every label the approved design draws keeps its seat, whether or
       not this paper has somewhere to send a reader who taps it — the
       Sports sheet's third state (scripts/sections._blue_more), and the
       owner's ruling behind it: a section on his page is not a
       builder's to remove. What comes off is the arrow and the click,
       which are the promise; the picture, the type and the geometry are
       untouched, so nothing on the page moves.

       The eight EXPLORE BY AREA rows take the same box as the links
       they replace — the nav is drawn eight rows deep and stays eight
       rows deep — minus the arrow's space-between and the pointer. */
    .polsheet .area-list a, .polsheet .area-list .is-inert{ min-height: calc((100% - 45px)/8); display: flex;
      align-items: center; border-top: 1px solid #e4e2dd;
      font-size: clamp(14px, 1vw, 18px); }
    .polsheet .area-list a{ justify-content: space-between; }
    .polsheet .area-list .is-inert{ color: #6f6a63; cursor: default; }

    /* ---- REAL STORIES IN THE OWNER'S SLOTS (2026-08-20) ------------
       The furnishing pass in this file seats the desk's filed stories
       in the mock's cards. Three things it needs from the stylesheet,
       and nothing else — the drawing is untouched. */

    /* 1. The link that carries a headline. It inherits the card's own
       type so the owner's hierarchy is exactly as drawn; only the
       cursor and the hover rule say it goes somewhere. */
    .polsheet .sheet-link{ color: inherit; text-decoration: none; }
    .polsheet .sheet-link:hover, .polsheet .sheet-link:focus-visible{ text-decoration:
      underline; text-underline-offset: 3px; }
    .polsheet .thumb-shot{ position: relative; display: block; height: 100%;
      overflow: hidden; }

    /* 2. The credit every borrowed photograph owes its photographer.
       Most of this desk's art is Wikimedia Commons under CC BY /
       CC BY-SA, whose one condition is attribution where the picture is
       shown. A 9px chip in the picture's corner — the treatment the map
       slot on this sheet has always worn — positioned inside the card
       so no line of the drawing moves. */
    .polsheet .click-card{ position: relative; }
    .polsheet .shot{ position: relative; display: block; min-width: 0;
      overflow: hidden; }
    .polsheet .shot > img{ display: block; width: 100%; }
    /* The three cards whose picture is a full-height grid track. */
    .polsheet .week-card .shot, .polsheet .newcomer-article .shot, .polsheet .getting-feature .shot{ height: 100%; }
    /* The ranking card's picture is the card's own ground. */
    .polsheet .rank-card .shot{ position: absolute; inset: 0; }
    .polsheet .over-cr{ position: absolute; right: 6px; bottom: 6px; z-index: 4;
      max-width: 86%; text-align: right; font: 8px/1.4 "Inter",
      sans-serif; letter-spacing: .03em; color: #3d3d39; background:
      rgba(255,255,255,.82); padding: 2px 6px; border-radius: 3px; }
    /* Two pictures with type across their foot: the chip goes to the
       top corner instead of over the words. */
    .polsheet .hero-card > .over-cr, .polsheet .rank-card .over-cr{ top: 8px; bottom: auto; }

    /* 2b. THE WHOLE CARD IS THE CLICK (site-wide dead-click audit,
       2026-08-25). Every click-card has worn cursor:pointer and the
       hover lift since the port, but only the headline's own words went
       anywhere — ~25 cards promising a click across their surface and
       honoring it on one line of type. The cure is the stretched link:
       the headline anchor grows a transparent ::after over the card, so
       the markup stays valid (no second anchor, no anchor wrapping the
       card's other content) and a screen reader still hears exactly one
       link per story. .click-card is already position:relative (the
       credit chips, above), which makes the card the surface. z-index 3
       lifts the surface over the card scrims (z 1-2); the credit chips
       (z 4) keep their corner, which costs that sliver its click and
       nothing else. */
    .polsheet .click-card .sheet-link::after{ content: ""; position: absolute;
      inset: 0; z-index: 3; }
    /* The hero is the one card whose copy block is absolutely
       positioned AND smaller than the card (.hero-copy hangs on
       left/right/bottom insets), so it — not the card — is the pseudo's
       containing block and inset:0 would stop at the copy's edge. The
       card's own overflow:hidden crops an oversized surface to exactly
       the card box, on desktop and in the 560px flex layout both. The
       other absolute copies (.rank-copy, .weekend-copy,
       .newcomer-main-copy) are inset:0 — the default rule already
       reaches their whole card. */
    .polsheet .hero-card .sheet-link::after{ inset: -100vh -100vw; }

    /* 3. THE DEGRADE LADDER, in CSS. A band that cannot be filled with
       real stories is not emitted (see furnish()); these rules close
       the columns behind the two that live inside a fixed grid, so a
       thin day narrows the lead instead of leaving a hole in it. */
    .polsheet .hero-grid:not(:has(.thumb-stack)){ grid-template-columns:
      minmax(0, 3.08fr) minmax(250px, 1.01fr); }
    .polsheet .hero-grid:not(:has(.lead-rail)){ grid-template-columns:
      minmax(0, 3.08fr) minmax(250px, 1.01fr); }
    .polsheet .hero-grid:not(:has(.thumb-stack)):not(:has(.lead-rail)){
      grid-template-columns: minmax(0, 1fr); }
    .polsheet .city-content:not(:has(.city-briefs)){ grid-template-columns:
      18fr 82fr; }
    .polsheet .city-content:not(:has(.budget-copy)){ grid-template-columns:
      30fr 70fr; }
    .polsheet .getting:not(:has(.getting-feature)){ grid-template-columns: 1fr; }

    /* Real headlines are longer than the mock's placeholders. Two cards
       drew type sized for four words in a fixed box: the ranking card
       (a fifth of a yellow band) and the weekend card (a 62%/38% split
       with overflow hidden). Both step down and clamp rather than spill
       — the layout accommodating real text, which is the only reason
       any number here changed. */
    .polsheet .rank-name{ font-size: clamp(14px, 1.02vw, 19px); line-height: 1.16;
      letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 5;
      -webkit-box-orient: vertical; overflow: hidden; }
    .polsheet .rank-sub{ font-size: clamp(10px, .78vw, 13px); }
    .polsheet .week-card h3{ font-size: clamp(17px, 1.15vw, 23px); line-height: 1.16;
      margin: clamp(12px, .9vw, 18px) 0; display: -webkit-box;
      -webkit-line-clamp: 4; -webkit-box-orient: vertical;
      overflow: hidden; }
    .polsheet .week-card p{ display: -webkit-box; -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; overflow: hidden; }
    .polsheet .newcomer-copy h3{ font-size: clamp(20px, 1.5vw, 30px); }
    .polsheet .getting-copy h3, .polsheet .budget-copy h3{ font-size: clamp(20px, 1.5vw, 30px); }
    .polsheet .getting-copy p, .polsheet .budget-copy p{ display: -webkit-box;
      -webkit-line-clamp: 3; -webkit-box-orient: vertical;
      overflow: hidden; }
    /* The rail's four rows split the hero's own height, so a row cannot
       grow — and a real three-line headline pushed its byline out of the
       bottom of the box, which .rail-story's overflow:hidden then ate.
       Three lines and a smaller measure fit the headline AND the line
       that says who wrote it and when. */
    .polsheet .rail-story h3{ font-size: clamp(15px, 1.05vw, 20px); line-height: 1.14;
      margin: 6px 0; display: -webkit-box; -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; overflow: hidden; }
    .polsheet .rail-story .meta{ flex: 0 0 auto; }
    .polsheet .latest-card h3{ font-size: clamp(16px, 1.1vw, 22px); margin: 12px 0 18px; }
    .polsheet .latest-card .meta{ flex-wrap: wrap; }
    .polsheet .housing-copy h3{ font-size: clamp(15px, 1.08vw, 21px); line-height: 1.2; }
    .polsheet .brief h4{ font-size: clamp(15px, 1.05vw, 20px); }
    .polsheet .map-note b{ display: -webkit-box; -webkit-line-clamp: 4;
      -webkit-box-orient: vertical; overflow: hidden; }

    /* The numbers band's provenance line (rule 10). It sits under the
       grid rather than inside it — .numbers-content is a seven-column
       track the owner drew, and an eighth child would open a row in it.
       Provenance nobody can read is the defect and not the fix, so this
       inherits the panel's own near-black on the peach rather than
       fading out, at the 10px the Tech sheet's source lines hold. */
    .polsheet .numbers-source{ margin: clamp(18px, 1.3vw, 26px) 0 0; font: 10px
      "Inter", sans-serif; letter-spacing: .05em; }
    .polsheet .numbers-source a{ color: inherit; }

    /* The colophon: one line covers the sheet; every image is in the
       illustrations ledger. */
    .polsheet .sheet-colophon{ padding: 16px clamp(20px, 2.1vw, 42px) 0; margin: 0
      auto; max-width: 2000px; text-align: right; font: 9.5px "Inter",
      sans-serif; letter-spacing: .06em; text-transform: uppercase;
      /* #6a6a66 is the AA-contrast value the 2026-08-16 audit fixed
         site-wide (2.82:1 -> 5.43:1); every sheet holds it. */
      color: #6a6a66; }

    @media print {
      /* styles.css's print block hides the front page's ticker band by
         its class name (.latest); the sheet's Latest section shares the
         name. Said explicitly so printing the page keeps its news. */
      .polsheet .latest{ display: block; }
    }
    @media (max-width: 900px) {
      /* THE 2x2 THUMB STACK'S EMPTY HALF (2026-08-20, owner's phone
         report). The stack is four slices in one column on the desktop
         and a 2x2 block from 900px down, but the AUTHORED_CSS rule that
         gives the desktop stack zero-minimum tracks sits outside every
         media query and after all of them, so its repeat(4, ...) also
         won at phone widths: four rows holding four images in two
         columns filled rows 1-2 and left rows 3-4 empty inside a fixed
         300px box. That was the ~200px of nothing between the photo
         grid and the first story. Two columns want two rows; the
         zero minimum stays, because that is what the desktop rule was
         actually for. */
      .polsheet .thumb-stack{ grid-template-rows: repeat(2, minmax(0, 1fr)); }
      .polsheet .rank-card{ min-height: 470px; }
      .polsheet .weekend-feature{ min-height: 420px; }
      .polsheet .weekend-feature img{ position: absolute; height: 100%; }
      .polsheet .newcomer-main{ min-height: 380px; }
      .polsheet .newcomer-main img{ object-fit: cover; }
      .polsheet .map-note{ width: clamp(140px, 30vw, 190px); }
      .polsheet .weekend-title{ font-size: 36px; }
      .polsheet .newcomer-main-copy h2{ font-size: 34px; }
      .polsheet .tile-label{ font-size: 15px; }
      /* The mock's own `.area-list a { min-height: 52px }` lives in this
         breakpoint and cannot see the inert rows, which are spans. Same
         number, so the eight rows keep one height between them on a
         phone. Kept here rather than edited into the mock: the drawing
         is the owner's and every transform lives in this file. */
      .polsheet .area-list .is-inert{ min-height: 52px; }
    }
    @media (max-width: 560px) {
      /* THE HERO PANEL CONTAINS ITS HEADLINE (2026-08-20, owner's phone
         report). The card is a fixed 500px box with the photograph
         pinned across its top 52% and the copy absolutely positioned
         against the bottom, so copy that is taller than the dark half
         grows UP out of the panel: at 390px the headline wraps to four
         lines and set its first two over the bright part of the
         photograph. The cure is the shape the Tech sheet's own lead
         card already uses (flex, column, copy last) — photo and copy
         become siblings in normal flow, so the panel can never be
         shorter than the words in it, and the fixed height becomes a
         floor so a long headline grows the card instead of spilling
         out of it. Fixed-height-to-auto at this width is this file's
         existing move: .ranking-panel, .weekend, .around-grid and
         .newcomer all make it. margin-top:auto keeps a short headline
         sitting on the foot of the panel, where the mock draws it. */
      .polsheet .hero-card{ display: flex; flex-direction: column; height: auto;
        min-height: 500px; }
      .polsheet .hero-photo{ position: static; width: 100%; height: 250px;
        flex: 0 0 250px; }
      /* The shade stops with the photograph now that the panel below it
         is solid, and carries the same fade-to-panel it used to make
         across the whole card. */
      .polsheet .hero-shade{ inset: 0 0 auto; height: 250px; background:
        linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.30) 72%,
        rgba(3,3,3,.95) 99%); }
      /* left/right/bottom were the absolute box's insets; in flow they
         have to be padding. */
      .polsheet .hero-copy{ position: static; margin-top: auto;
        padding: 22px 12px 18px; }
      .polsheet .map-note{ position: static; width: auto; margin: 10px 12px;
        border-radius: 6px; }
      .polsheet .map-note-num{ position: static; display: inline-grid; margin:
        0 8px 6px 0; vertical-align: middle; }
      .polsheet .map-art{ display: flex; flex-direction: column; }
      .polsheet .map-art > img{ height: 270px; }
      /* The map's credit is pinned to the bottom of .map-art, which at
         this width is the whole column — map, then notes — so it landed
         on top of the last note. In a column it can just be a line
         under the picture it credits. */
      .polsheet .map-credit{ position: static; align-self: flex-end;
        margin: 6px 0 2px; background: none; }
      .polsheet .map-dot{ display: none; }
      .polsheet .rank-num{ font-size: 24px; }
      .polsheet .rank-name{ font-size: 18px; }
      /* THE 80px OF NOTHING INSIDE EVERY RAIL STORY (2026-08-20). The
         rail cards are flex columns set to space-between, which is the
         right answer in the desktop column where four of them share a
         fixed 430-700px track and their bylines should line up. In one
         phone column they inherit a 170px floor from the port and the
         placeholder headlines were two words, so every card pushed its
         byline to the bottom of a box twice the height of its own type.
         Real headlines are longer and the floor is doing nothing but
         making the gap: the card sizes to its words here, and the meta
         sits under them. */
      .polsheet .rail-story{ min-height: 0; justify-content: flex-start; }
      .polsheet .rail-story .meta{ margin-top: 12px; }
      /* Same shape of fix, same cause: the weekend card's 62%/38% split
         inside a 500px floor was drawn around four-word headlines, and
         with real copy it left ~200px of empty colour between the deck
         and READ MORE. The copy panel sizes to its words; the
         photograph keeps a definite track under it. */
      .polsheet .week-card{ min-height: 0; grid-template-rows: auto 200px; }
    }


    /* =====================================================================
       V2 — THE CNN HIERARCHY (2026-09-05). The owner: "i really wanna make
       this page more like CNN kinda like big headlines or at least more
       stories like the second tier row of those court stories are kinda
       boring." CNN's politics front is one huge headline on a picture, a
       strip of headline-first photo cards, then dense headline lists with
       small thumbs. Everything above this block is the City stylesheet
       renamed; this block is the Politics sheet's own and is appended
       AFTER any regeneration from city.css, so it wins by order. Bigger
       and bolder at the top; a second tier of four photo cards with a
       deck (.spotlight); Latest as two columns of headline-and-thumb
       rows, ten deep. Text lives in HTML, never in pixels.
       ===================================================================== */

    /* The hero headline: CNN-scale — about 40px on a laptop, up to 58px
       on the widest paper — at the display weight, not the rail's
       semibold. line-height 1.0 keeps a three-line headline inside the
       dark half of the panel. */
    .polsheet .hero-copy .hero-headline{ font-size: clamp(32px, 3vw, 58px);
      font-weight: 700; line-height: 1.0; letter-spacing: -.02em;
      max-width: 96%; }
    .polsheet .hero-deck{ font-size: clamp(15px, 1.12vw, 21px); }
    /* The rail: bolder and a step larger, still three lines in its track
       (the clamp above stays in force). */
    .polsheet .rail-story h3{ font-size: clamp(16px, 1.18vw, 23px);
      font-weight: 700; line-height: 1.12; letter-spacing: -.008em; }

    /* SPOTLIGHT — the second tier. Four photo cards, headline first, one
       line of deck, byline and date. The pictures are a fixed 16:10-ish
       track so four real photographs of four shapes read as one row. */
    .polsheet .spotlight{ padding-top: clamp(38px, 2.8vw, 56px); }
    .polsheet .spotlight-grid{ display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(16px, 1.5vw, 30px); }
    .polsheet .spot-card{ min-width: 0; display: flex; flex-direction: column; }
    .polsheet .spot-card > img, .polsheet .spot-card .shot > img{
      aspect-ratio: 16 / 10; height: auto; object-fit: cover;
      object-position: center 30%; }
    /* THE GRID FOLLOWS ITS CARD COUNT. The furnisher seats three when the
       desk is thin (the floor in build_politics_sheet.py; it never seats
       two), and three cards in a four-column grid would leave a hole. The
       same :has() ladder the lead grid uses above: the columns are the
       cards. */
    .polsheet .spotlight-grid:has(> .spot-card:nth-child(3):last-child){
      grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .polsheet .spot-card .eyebrow{ margin-top: 14px; }
    .polsheet .spot-card h3{ font-size: clamp(21px, 1.62vw, 32px);
      font-weight: 700; line-height: 1.1; letter-spacing: -.012em;
      margin: 10px 0 8px; }
    .polsheet .spot-deck{ font-size: clamp(14px, 1vw, 18px); line-height: 1.4;
      color: #333; margin: 0 0 14px; display: -webkit-box;
      -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .polsheet .spot-card .meta{ margin-top: auto; padding-top: 8px;
      display: flex; justify-content: space-between; gap: 8px;
      flex-wrap: wrap; }

    /* LATEST — up to ten headline-and-thumb rows in two columns, the dense
       list under CNN's strip. Overrides the six-across card grid the City
       rules draw above: the card becomes a two-column grid with the
       picture (a bare <img> in the mock, a .shot frame once furnished)
       spanning the right column, and a rule under every row. */
    .polsheet .latest-grid{ grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: clamp(28px, 3vw, 60px); row-gap: 0; }
    .polsheet .latest-card{ display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(112px, 10vw, 176px);
      grid-template-rows: auto auto 1fr;
      column-gap: clamp(12px, 1.1vw, 20px);
      padding: clamp(14px, 1.1vw, 20px) 0; border-right: 0;
      border-bottom: 1px solid var(--line); }
    .polsheet .latest-card > img, .polsheet .latest-card .shot{
      grid-column: 2; grid-row: 1 / 4; align-self: start; }
    .polsheet .latest-card > img, .polsheet .latest-card .shot > img{
      aspect-ratio: 3 / 2; height: auto; object-fit: cover;
      object-position: center 30%; }
    .polsheet .latest-card .eyebrow{ grid-column: 1; margin-top: 0; }
    .polsheet .latest-card h3{ grid-column: 1; font-size: clamp(17px, 1.3vw, 25px);
      font-weight: 700; line-height: 1.14; letter-spacing: -.008em;
      margin: 8px 0 10px; }
    .polsheet .latest-card .meta{ grid-column: 1; margin-top: auto; padding-top: 0; }

    @media (max-width: 1100px) {
      /* the City rule at this width opens three columns with a row gap;
         the list stays two columns of rows */
      .polsheet .latest-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
    }
    @media (max-width: 900px) {
      /* spotlight stacks 2x2; the list collapses to one column */
      .polsheet .spotlight-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
      .polsheet .spotlight-grid:has(> .spot-card:nth-child(3):last-child){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .polsheet .latest-grid{ grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 560px) {
      .polsheet .hero-copy .hero-headline{ font-size: 38px; max-width: 100%; }
      .polsheet .spotlight-grid{ grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
      /* the :has() ladder above outranks a plain selector; said again here so a three-card spotlight is one column on a phone too */
      .polsheet .spotlight-grid:has(> .spot-card:nth-child(3):last-child){ grid-template-columns: minmax(0, 1fr); }
      .polsheet .spot-card h3{ font-size: 26px; }
      .polsheet .latest-card{ grid-template-columns: minmax(0, 1fr) 104px; }
      .polsheet .latest-card h3{ font-size: 19px; }
      .polsheet .section-link{ display: none; }
    }

/* The house tail below the sheet: the desk's real stories, plate and
   switcher — standing site furniture, not the owner's design. */
.city-tail { max-width: 2000px; margin: 0 auto;
  padding: 22px clamp(20px, 2.1vw, 42px) 10px; }
.city-tail-links { font: 700 9px 'Inter', Arial, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.city-tail-links a { color: #444; text-decoration: none; }
.city-tail-file { list-style: none; margin: 0 0 6px; padding: 0;
  columns: 2; column-gap: 40px; }
.city-tail-file li { font: 12px/1.9 'Source Serif 4', Georgia, serif;
  break-inside: avoid; }
.city-tail-file .file-date { font: 700 9.5px 'Inter', Arial, sans-serif;
  letter-spacing: .05em; color: #6a6a66; margin-right: 6px;
  text-transform: uppercase; }
.city-tail-file a { color: #222; text-decoration: none; }
.city-tail-file a:hover { text-decoration: underline; }

/* A PORTRAIT IN THE HERO (the owner pinned it): the card crops a tall
   photograph to a wide band and lays the headline over the lower third,
   so the face is framed from the top of the image, not its middle. */
.polsheet .hero-card img.is-portrait{ object-position: 50% 18%; }