/* =========================================================================
   CITY — the owner's City mock, ported by scripts/build_city_sheet.py.
   DO NOT hand-edit the scoped block: edit specimens/city-mock/index.html
   (or the transformer) and rebuild. The sheet's inline icons are Font
   Awesome Free 5.15.3 glyph paths (fontawesome.com), CC BY 4.0 — this
   comment is the attribution.
   ========================================================================= */

/* Compact chrome — the entertainment page's numbers (the owner's ask),
   CSS-only, on donor-identical markup. */
.citywide .band.utility { height: 30px; }
.citywide .brand-band.small { height: 58px; }
.citywide .brand-band.small .wordmark { width: 290px; }
.citywide 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. */
.citywide { 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. */
.citysheet { 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) {
  .citywide .band.utility { height: auto; padding: 8px 0; }
}


    .citysheet{
      --ink: #151515;
      --paper: #fbfaf7;
      --line: #d9d7d1;
      --blue: #435fa4;
      --red: #e94345;
      --green: #25734f;
      --yellow: #ffc62d;
    }
    .citysheet *{ box-sizing: border-box; }
    .citysheet{ scroll-behavior: smooth; }
    .citysheet{
      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;
    }
    .citysheet button, .citysheet a{ -webkit-tap-highlight-color: transparent; }
    .citysheet button:focus-visible, .citysheet a:focus-visible{ outline: 3px solid #ffcc31; outline-offset: 3px; }
    .citysheet img{ display: block; width: 100%; }
    
    .citysheet .display{ font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
    .citysheet .serif{ font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
    .citysheet .sans{ font-family: "Inter", sans-serif; }
    .citysheet .ci{ display: inline-block; height: 1em; vertical-align: -.12em; }
    .citysheet .scribble{ font-family: "Inter", sans-serif; }
    .citysheet .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;
    }
    .citysheet .eyebrow{
      font-family: "Inter", sans-serif;
      font-size: clamp(11px, .8vw, 14px);
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .025em;
      font-weight: 700;
    }
    .citysheet .meta{ font-family: "Inter", sans-serif; font-size: clamp(12px, .85vw, 15px); line-height: 1.25; color: #373737; }
    .citysheet .rule{ border-color: var(--line); }
    .citysheet .image-shadow{ box-shadow: 0 4px 12px rgba(0,0,0,.08); }
    .citysheet .click-card{ cursor: pointer; transition: transform .22s ease, opacity .22s ease; }
    .citysheet .click-card:hover{ transform: translateY(-3px); }
    .citysheet .click-card:hover img{ filter: saturate(1.06); }

    /* Lead */
    .citysheet .lead-section{ padding-top: clamp(34px, 2.2vw, 44px); }
    .citysheet .lead-title{ margin-bottom: 14px; }
    .citysheet .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;
    }
    .citysheet .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);
    }
    .citysheet .hero-photo{ position: absolute; inset: 0 0 auto; height: 66%; object-fit: cover; object-position: center top; }
    .citysheet .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%); }
    .citysheet .hero-copy{ position: absolute; left: 3%; right: 3%; bottom: 3.5%; z-index: 2; }
    .citysheet .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;
    }
    .citysheet .hero-deck{ max-width: 84%; font-size: clamp(15px, 1.05vw, 20px); line-height: 1.45; color: #f4f1ec; }
    .citysheet .hero-meta{ margin-top: clamp(16px, 1.4vw, 28px); color: #f8f7f1; }
    .citysheet .thumb-stack{ display: grid; grid-template-rows: repeat(4, 1fr); gap: clamp(10px, .75vw, 15px); height: clamp(430px, 35vw, 700px); overflow: hidden; }
    .citysheet .thumb-stack img{ height: 100%; object-fit: cover; box-shadow: 0 3px 9px rgba(0,0,0,.09); }
    .citysheet .lead-rail{ display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); height: clamp(430px, 35vw, 700px); overflow: hidden; }
    .citysheet .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; }
    .citysheet .rail-story + .rail-story{ padding-top: clamp(13px, 1.1vw, 22px); }
    .citysheet .rail-story h3{ font-size: clamp(17px, 1.48vw, 29px); line-height: 1.14; margin: 7px 0; }
    .citysheet .category-blue{ color: #455ca3; }
    .citysheet .category-pink{ color: #cc276d; }
    .citysheet .category-green{ color: #20794f; }
    .citysheet .category-red{ color: #ed424a; }

    /* Latest */
    .citysheet .latest{ padding-top: clamp(42px, 3vw, 60px); }
    .citysheet .section-heading-row{ display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 1.45vw, 29px); }
    .citysheet .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; }
    .citysheet .latest-grid{ display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: clamp(14px, 1.3vw, 26px); }
    .citysheet .latest-card{ min-width: 0; padding-right: clamp(8px, .65vw, 13px); border-right: 1px solid #e2e0db; display: flex; flex-direction: column; }
    .citysheet .latest-card:last-child{ border-right: 0; padding-right: 0; }
    .citysheet .latest-card img{ height: clamp(132px, 9vw, 180px); object-fit: cover; object-position: top; }
    .citysheet .latest-card .eyebrow{ margin-top: 16px; }
    .citysheet .latest-card h3{ font-size: clamp(18px, 1.38vw, 28px); line-height: 1.17; margin: 14px 0 22px; }
    .citysheet .latest-card .meta{ margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; }

    /* Rankings */
    .citysheet .ranking-wrap{ padding-top: clamp(42px, 2.8vw, 56px); }
    .citysheet .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; }
    .citysheet .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; }
    .citysheet .ranking-intro h2{ margin: clamp(23px, 1.6vw, 32px) 0; font-size: clamp(28px, 2.15vw, 43px); line-height: 1.05; letter-spacing: 0; }
    .citysheet .ranking-intro p{ max-width: 390px; font-size: clamp(14px, 1vw, 19px); line-height: 1.5; }
    .citysheet .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); }
    .citysheet .rank-cards{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-left: 5px solid var(--yellow); }
    .citysheet .rank-card{ position: relative; min-width: 0; border-right: 5px solid var(--yellow); background: #060606; overflow: hidden; }
    .citysheet .rank-card:last-child{ border-right: 0; }
    .citysheet .rank-card img{ width: 100%; height: 100%; object-fit: cover; }
    
    .citysheet .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); }
    .citysheet .stat-item{ display: flex; align-items: center; gap: clamp(13px, 1vw, 20px); padding: 18px clamp(18px, 1.35vw, 27px); border-right: 1px solid #ccc9c2; }
    .citysheet .stat-item i{ font-size: clamp(27px, 1.9vw, 38px); }
    .citysheet .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; }
    .citysheet .stat-main{ font-size: clamp(21px, 1.55vw, 31px); white-space: nowrap; }
    .citysheet .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 */
    .citysheet .housing-now{ padding-top: clamp(40px, 2.7vw, 54px); }
    .citysheet .housing-grid{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(24px, 2.2vw, 44px); }
    .citysheet .housing-story{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 1.45vw, 29px); align-items: stretch; }
    .citysheet .housing-story img{ height: clamp(120px, 9.5vw, 190px); object-fit: cover; object-position: top; }
    .citysheet .housing-copy{ display: flex; flex-direction: column; justify-content: space-between; }
    .citysheet .housing-copy h3{ font-size: clamp(23px, 1.52vw, 31px); line-height: 1.18; }

    /* Weekend */
    .citysheet .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); }
    .citysheet .weekend-feature{ min-width: 0; height: 100%; }
    .citysheet .weekend-feature img{ height: 100%; object-fit: cover; object-position: center; }
    .citysheet .weekend-cards{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; padding: 10px 10px 10px 0; }
    .citysheet .week-card{ color: #121212; display: grid; grid-template-rows: 62% 38%; min-width: 0; overflow: hidden; }
    .citysheet .week-copy{ padding: clamp(24px, 1.7vw, 34px) clamp(18px, 1.3vw, 26px); display: flex; flex-direction: column; }
    .citysheet .week-card h3{ font-size: clamp(27px, 1.8vw, 36px); line-height: 1.08; margin: clamp(20px, 1.35vw, 27px) 0; }
    .citysheet .week-card p{ font-size: clamp(13px, .95vw, 17px); line-height: 1.45; }
    .citysheet .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; }
    .citysheet .week-card img{ height: 100%; object-fit: cover; }
    .citysheet .mint{ background: #cde5df; }
    .citysheet .coral{ background: #f29687; }
    .citysheet .lime{ background: #cad64e; }
    .citysheet .cobalt{ background: #4c91dc; }

    /* Around LA */
    .citysheet .around{ padding-top: clamp(48px, 3.4vw, 68px); }
    .citysheet .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); }
    .citysheet .around-intro{ padding-right: clamp(20px, 1.5vw, 30px); }
    .citysheet .around-intro p{ margin: 20px 0; font-size: clamp(14px, 1vw, 18px); line-height: 1.5; }
    .citysheet .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; }
    .citysheet .legend{ margin-top: clamp(23px, 1.7vw, 34px); display: grid; gap: clamp(14px, 1.1vw, 22px); }
    .citysheet .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; }
    .citysheet .legend-dot{ width: 14px; height: 14px; border-radius: 2px; flex: 0 0 auto; }
    .citysheet .compass{ margin: 36px 0 0 38px; font-size: 40px; transform: rotate(-8deg); }
    .citysheet .map-art{ min-width: 0; height: 100%; overflow: hidden; }
    .citysheet .map-art img{ height: 100%; object-fit: cover; }
    .citysheet .area-list{ border: 1px solid var(--line); padding: 20px 25px 0; background: rgba(255,255,255,.65); }
    .citysheet .area-list h3{ font-family: "Inter", sans-serif; text-transform: uppercase; font-size: clamp(12px, .9vw, 15px); letter-spacing: .05em; margin-bottom: 9px; }
    .citysheet .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 */
    .citysheet .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); }
    .citysheet .newcomer-main{ height: 100%; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
    .citysheet .newcomer-main img{ height: 100%; object-fit: cover; }
    .citysheet .newcomer-side{ display: grid; grid-template-rows: 47% 53%; gap: clamp(23px, 1.5vw, 30px); }
    .citysheet .guide-tiles{ display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
    .citysheet .guide-tile{ background: #f2efeb; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 10px; text-align: center; }
    .citysheet .guide-tile i{ font-size: clamp(35px, 2.55vw, 51px); margin-bottom: clamp(18px, 1.35vw, 27px); }
    .citysheet .guide-tile span{ font-family: "Inter", sans-serif; font-weight: 700; font-size: clamp(11px, .8vw, 15px); line-height: 1.25; letter-spacing: .03em; }
    .citysheet .newcomer-article{ display: grid; grid-template-columns: 31fr 69fr; background: #f6f2ed; }
    .citysheet .newcomer-article img{ height: 100%; object-fit: cover; }
    .citysheet .newcomer-copy{ padding: clamp(25px, 2vw, 40px); display: flex; flex-direction: column; justify-content: center; }
    .citysheet .newcomer-copy h3{ font-size: clamp(28px, 1.95vw, 39px); line-height: 1.17; margin: 13px 0 22px; max-width: 650px; }

    /* Numbers */
    .citysheet .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; }
    .citysheet .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); }
    .citysheet .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; }
    .citysheet .number-cell strong{ font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(28px, 2.05vw, 41px); line-height: 1; }
    .citysheet .number-cell b{ font-family: "Inter", sans-serif; font-size: clamp(11px, .8vw, 14px); margin-top: 14px; letter-spacing: .04em; text-transform: uppercase; }
    .citysheet .number-cell span{ font-family: "Inter", sans-serif; font-size: clamp(11px, .78vw, 13px); margin-top: 10px; }
    .citysheet .trend{ padding: 0 clamp(22px, 1.5vw, 30px); border-right: 1px solid rgba(90,70,60,.35); }
    .citysheet .trend h3{ font-family: "Inter", sans-serif; font-size: clamp(12px, .88vw, 15px); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
    .citysheet .trend p{ font-family: "Inter", sans-serif; font-size: clamp(11px, .8vw, 14px); margin: 7px 0; }
    .citysheet .trend svg{ width: 100%; height: 118px; overflow: visible; }
    .citysheet .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 */
    .citysheet .getting{ margin-top: clamp(58px, 4vw, 80px); display: grid; grid-template-columns: 65.7fr 34.3fr; background: #e1f3f2; min-height: clamp(350px, 20vw, 400px); }
    .citysheet .getting-left{ padding: clamp(24px, 1.8vw, 36px) 0 0; display: grid; grid-template-rows: auto 1fr; }
    .citysheet .getting-heading{ padding: 0 clamp(23px, 1.4vw, 28px); display: flex; align-items: start; gap: 38px; }
    .citysheet .getting-heading div{ flex: 1; border-top: 1px solid #9bafad; margin-top: 14px; }
    .citysheet .getting-heading p{ font-size: clamp(14px, 1vw, 18px); margin-top: 12px; }
    .citysheet .getting-body{ display: grid; grid-template-columns: 24fr 76fr; align-items: end; }
    .citysheet .getting-body > img{ height: clamp(220px, 13.6vw, 272px); object-fit: cover; }
    .citysheet .transport-links{ display: grid; grid-template-columns: repeat(5,1fr); align-self: stretch; align-items: center; }
    .citysheet .transport-item{ height: 72%; padding: 10px clamp(13px, .95vw, 19px); border-right: 1px solid #b7cbc9; display: flex; flex-direction: column; justify-content: center; }
    .citysheet .transport-item:last-child{ border-right: 0; }
    .citysheet .transport-item i{ font-size: clamp(28px, 2vw, 40px); margin-bottom: 16px; }
    .citysheet .transport-item b{ font-family: "Inter", sans-serif; font-size: clamp(12px, .88vw, 15px); letter-spacing: .04em; text-transform: uppercase; }
    .citysheet .transport-item span{ font-family: "Inter", sans-serif; font-size: clamp(11px, .8vw, 14px); line-height: 1.35; margin-top: 10px; }
    .citysheet .getting-feature{ background: #fff; display: grid; grid-template-columns: 67% 33%; margin: 18px 0 0; }
    .citysheet .getting-copy{ padding: clamp(25px, 1.8vw, 36px); display: flex; flex-direction: column; justify-content: center; }
    .citysheet .getting-copy h3{ font-size: clamp(29px, 2vw, 40px); line-height: 1.13; margin: 15px 0; }
    .citysheet .getting-copy p{ font-size: clamp(13px, .95vw, 17px); line-height: 1.45; }
    .citysheet .getting-feature img{ height: 100%; object-fit: cover; }

    /* City services */
    .citysheet .city-services{ padding-top: clamp(58px, 4vw, 80px); display: grid; grid-template-columns: 68.5fr 29.5fr; gap: clamp(18px, 2vw, 40px); }
    .citysheet .city-left-head{ border-bottom: 1px solid #b9b7b1; padding: 0 18px 10px; }
    .citysheet .city-left-head p{ font-size: clamp(14px, 1vw, 18px); margin-top: 8px; }
    .citysheet .city-content{ display: grid; grid-template-columns: 37fr 28fr 35fr; min-height: clamp(280px, 16vw, 320px); padding-top: 22px; }
    .citysheet .city-content > img{ height: 100%; object-fit: cover; }
    .citysheet .budget-copy{ padding: 0 clamp(25px, 1.8vw, 36px); display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #c9c7c1; }
    .citysheet .budget-copy h3{ font-size: clamp(29px, 1.95vw, 39px); line-height: 1.13; margin: 13px 0 18px; }
    .citysheet .budget-copy p{ font-size: clamp(13px, .95vw, 17px); line-height: 1.45; }
    .citysheet .city-briefs{ padding-left: clamp(26px, 1.8vw, 36px); display: grid; grid-template-rows: repeat(3,1fr); }
    .citysheet .brief{ border-bottom: 1px solid #ddd9d2; display: flex; flex-direction: column; justify-content: center; }
    .citysheet .brief:last-child{ border-bottom: 0; }
    .citysheet .brief h4{ font-size: clamp(19px, 1.22vw, 24px); line-height: 1.15; margin: 9px 0; }
    .citysheet .useful{ border: 1px solid var(--line); align-self: end; }
    .citysheet .useful h2{ padding: 20px 30px 13px; border-bottom: 1px solid var(--line); }
    .citysheet .useful-grid{ display: grid; grid-template-columns: repeat(3,1fr); }
    .citysheet .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; }
    .citysheet .useful-item:nth-child(3n){ border-right: 0; }
    .citysheet .useful-item i{ font-size: clamp(25px, 1.75vw, 35px); margin-bottom: 11px; color: #111; }
    .citysheet .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 */
    .citysheet .explore{ padding-top: clamp(50px, 3.5vw, 70px); }
    .citysheet .explore-heading{ display: flex; align-items: center; gap: 32px; margin: 0 24px 23px; }
    .citysheet .explore-heading p{ font-size: clamp(14px, 1vw, 18px); white-space: nowrap; }
    .citysheet .explore-heading::after{ content: ""; height: 1px; background: #bbb9b3; flex: 1; }
    .citysheet .explore-grid{ display: grid; grid-template-columns: repeat(6,1fr); gap: 9px; }
    .citysheet .explore-grid a{ overflow: hidden; }
    .citysheet .explore-grid img{ height: clamp(150px, 9vw, 180px); object-fit: cover; transition: transform .25s ease; }
    .citysheet .explore-grid a:hover img{ transform: scale(1.025); }

    .citysheet .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; }
    .citysheet .toast.show{ transform: translateY(0); opacity: 1; }

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

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

    @media (max-width: 560px) {
      .citysheet .section-title{ font-size: 34px; }
      .citysheet .hero-card{ height: 500px; min-height: 0; }
      .citysheet .hero-photo{ height: 52%; }
      .citysheet .hero-copy .hero-headline{ max-width: 100%; font-size: 38px; }
      .citysheet .hero-deck{ max-width: 100%; font-size: 17px; }
      .citysheet .thumb-stack{ height: 300px; gap: 8px; }
      .citysheet .lead-rail{ grid-template-columns: 1fr; }
      .citysheet .rail-story{ min-height: 170px; }
      .citysheet .latest-grid{ grid-template-columns: 1fr; }
      .citysheet .latest-card{ border-right: 0; padding-right: 0; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
      .citysheet .latest-card img{ height: 220px; }
      .citysheet .latest-card h3{ font-size: 26px; }
      .citysheet .section-link{ display: none; }
      .citysheet .ranking-intro h2{ font-size: 56px; }
      .citysheet .ranking-stats{ grid-template-columns: 1fr; }
      .citysheet .stat-cta{ grid-column: auto; }
      .citysheet .housing-story{ grid-template-columns: 1fr; }
      .citysheet .housing-story img{ height: 230px; }
      .citysheet .housing-copy{ min-height: 150px; }
      .citysheet .weekend-feature{ height: auto; }
      .citysheet .weekend-cards{ grid-template-columns: 1fr; }
      .citysheet .week-card{ min-height: 500px; }
      .citysheet .legend{ grid-template-columns: 1fr 1fr; }
      .citysheet .map-art{ min-height: 270px; }
      .citysheet .newcomer-main{ min-height: 0; height: auto; }
      .citysheet .guide-tiles{ grid-template-columns: repeat(2,1fr); }
      .citysheet .newcomer-article{ grid-template-columns: 1fr; }
      .citysheet .newcomer-article img{ height: 220px; }
      .citysheet .numbers{ padding-left: 12px; padding-right: 12px; }
      .citysheet .number-cell strong{ font-size: 43px; }
      .citysheet .getting-heading{ display: block; }
      .citysheet .getting-heading div{ display: none; }
      .citysheet .getting-feature{ grid-template-columns: 1fr; }
      .citysheet .getting-feature img{ height: 220px; }
      .citysheet .city-content{ grid-template-columns: 1fr; }
      .citysheet .budget-copy{ min-height: 300px; border: 0; }
      .citysheet .useful-grid{ grid-template-columns: repeat(2,1fr); }
      .citysheet .useful-item:nth-child(3n){ border-right: 1px solid var(--line); }
      .citysheet .useful-item:nth-child(2n){ border-right: 0; }
      .citysheet .explore-heading{ display: block; margin-left: 0; }
      .citysheet .explore-heading p{ white-space: normal; margin-top: 8px; }
      .citysheet .explore-grid{ grid-template-columns: repeat(2,1fr); }
      .citysheet .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. */
    .citysheet .latest{ height: auto; border-bottom: 0; background: transparent; }
    .citysheet .meta{ text-transform: none; letter-spacing: 0; font-weight: 500; }
    .citysheet .lead-title{ margin-top: 0; }
    .citysheet .eyebrow{ color: inherit; }
    .citysheet .category-blue{ color: #455ca3; }
    .citysheet .category-pink{ color: #cc276d; }
    .citysheet .category-green{ color: #20794f; }
    .citysheet .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. */
    .citysheet .thumb-stack{ grid-template-rows: repeat(4, minmax(0, 1fr)); }
    .citysheet .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. */
    .citysheet 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 */
    .citysheet .rank-card img{ position: absolute; inset: 0; }
    .citysheet .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%); }
    .citysheet .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); }
    .citysheet .rank-num{ font-size: clamp(22px, 1.6vw, 32px); line-height: 1; }
    .citysheet .rank-num::after{ content: ""; display: block; width: 1.15em;
      height: 3px; background: #fff; margin-top: 7px; }
    .citysheet .rank-name{ font-size: clamp(18px, 1.35vw, 27px); line-height: 1.05;
      margin: 0 0 6px; text-transform: uppercase; letter-spacing: .01em; }
    .citysheet .rank-sub{ font-size: clamp(13px, .95vw, 17px); line-height: 1.3;
      margin: 0 0 clamp(10px, .9vw, 18px); color: #e9e6e0; }
    .citysheet .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; }
    .citysheet .rank-price{ font-size: clamp(22px, 1.6vw, 32px); line-height: 1; }

    /* Weekend feature */
    .citysheet .weekend-feature{ position: relative; overflow: hidden; }
    .citysheet .weekend-feature img{ position: absolute; inset: 0; }
    .citysheet .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%); }
    .citysheet .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); }
    .citysheet .weekend-copy .eyebrow{ color: #d9d5cd; }
    .citysheet .weekend-title{ font-size: clamp(30px, 2.45vw, 49px); line-height: 1.04;
      letter-spacing: .005em; margin: clamp(12px, 1vw, 20px) 0; }
    .citysheet .weekend-deck{ max-width: 300px; font-size: clamp(14px, 1vw, 18px);
      line-height: 1.5; color: #e6e2da; }
    .citysheet .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 */
    .citysheet .map-art{ position: relative; }
    .citysheet .map-art > img{ height: 100%; }
    .citysheet .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); }
    .citysheet .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; }
    .citysheet .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); }
    .citysheet .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; }
    .citysheet .map-note p{ font-size: clamp(11px, .82vw, 14px); line-height: 1.4;
      color: #444; margin: 0; }
    .citysheet .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 */
    .citysheet .newcomer-main{ position: relative; }
    .citysheet .newcomer-main img{ position: absolute; inset: 0; height: 100%; }
    .citysheet .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%); }
    .citysheet .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); }
    .citysheet .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); }
    .citysheet .newcomer-main-copy p{ max-width: 330px; font-size: clamp(14px, 1vw,
      18px); line-height: 1.5; color: #efeae4; }
    .citysheet .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 */
    .citysheet .explore-grid a{ position: relative; display: block; }
    .citysheet .tile-scrim{ position: absolute; inset: 0; background:
      linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.18) 46%,
      transparent 70%); }
    .citysheet .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; }
    .citysheet .tile-label b{ font-family: "Inter", sans-serif; font-weight: 400;
      font-size: 1.1em; }

    /* The colophon: one line covers the sheet; every image is in the
       illustrations ledger. */
    .citysheet .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. */
      .citysheet .latest{ display: block; }
    }
    @media (max-width: 900px) {
      .citysheet .rank-card{ min-height: 470px; }
      .citysheet .weekend-feature{ min-height: 420px; }
      .citysheet .weekend-feature img{ position: absolute; height: 100%; }
      .citysheet .newcomer-main{ min-height: 380px; }
      .citysheet .newcomer-main img{ object-fit: cover; }
      .citysheet .map-note{ width: clamp(140px, 30vw, 190px); }
      .citysheet .weekend-title{ font-size: 36px; }
      .citysheet .newcomer-main-copy h2{ font-size: 34px; }
      .citysheet .tile-label{ font-size: 15px; }
    }
    @media (max-width: 560px) {
      .citysheet .map-note{ position: static; width: auto; margin: 10px 12px;
        border-radius: 6px; }
      .citysheet .map-note-num{ position: static; display: inline-grid; margin:
        0 8px 6px 0; vertical-align: middle; }
      .citysheet .map-art{ display: flex; flex-direction: column; }
      .citysheet .map-art > img{ height: 270px; }
      .citysheet .map-dot{ display: none; }
      .citysheet .rank-num{ font-size: 24px; }
      .citysheet .rank-name{ font-size: 22px; }
      .citysheet .rank-price{ font-size: 24px; }
    }

/* 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; }