/* =========================================================================
   OPINION — the owner's argument-sheet mock, ported verbatim by
   scripts/build_opinion_sheet.py. DO NOT hand-edit: edit
   specimens/opinion-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 house desk numbers (ent/sports/food), on
   donor-identical markup. */
.oplight .band.utility { height: 30px; }
.oplight .brand-band.small { height: 58px; }
.oplight .brand-band.small .wordmark { width: 290px; }
.oplight nav.sections { height: 32px; }

/* ---- WIDTH — owner's call, 2026-08-15: "this page needs to be
   wider, take up the margins on the side, which will also make the
   text and everything bigger."

   The sheet is a fixed 1010px drawing: every measure in it is an
   absolute px the owner approved at that size. Widening its
   container alone would stretch the columns and leave the 7.5px
   labels at 7.5px — a wider page, not a bigger one. So the drawing
   is SCALED instead. --opz is the one number; the sheet zooms by it
   and the house tail below widens by it, so the two stay flush.
   Every proportion inside the mock survives untouched; only the
   viewing distance changes.

   The frame comes off — the wide-desk terms ent/sports/food already
   ship, so the chrome spans the window and the drawing is capped
   inside it, exactly as those three desks cap their content.

   THE CAP IS 1.3, AND IT IS SET BY THE TYPE, NOT BY THE WIDTH
   (owner's second look, same day: "it now feels maybe 25% too
   zoomed in"). It first shipped at 1.7 — the house's 1720px content
   number — and that was the wrong law to pick the cap by. Scaling a
   drawing scales its TYPE, and 1.7 put this page's body copy at
   17.8px against Entertainment's 12px and Food's 10-11px, its
   kickers at 12.2px against their 8-10px. A desk page has to read
   like a sibling of the other desks, and at 1.7 this one read like a
   different site at browser zoom. 1.3 is the highest step where no
   element on the sheet exceeds its Entertainment counterpart: body
   14.3, card headline 16.9 (ent 19), lead 39 (ent 44), kicker 9.75
   (ent 9-10). The sheet lands at 1313px, so the side margins the
   owner asked to spend are only partly spent — that is the honest
   trade, and the type band is the side of it that wins.

   The ladder is stepped because CSS cannot divide a viewport width
   by a px length to get a unitless zoom; each step leaves >=48px of
   side air and keeps the scaled sheet above its own 1010px
   min-width, so the pan below never fires on a step. Under 1080px
   nothing scales and the sheet behaves exactly as it shipped. */
.oplight { max-width: none; border-radius: 0; box-shadow: none; }
.oplight { --opz: 1; }
@media (min-width:1080px){ .oplight { --opz: 1.02; } }
@media (min-width:1180px){ .oplight { --opz: 1.12; } }
@media (min-width:1280px){ .oplight { --opz: 1.22; } }
@media (min-width:1380px){ .oplight { --opz: 1.3; } }
.oplight .opsheet { zoom: var(--opz); }

/* ---- the sheet's own ground: a scoped slice of the Tailwind
   preflight, so the mock's utilities land on the reset they were
   drawn against and the house sheet styles cannot leak in. ---- */
.opsheet{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#171717;font-size:16px;line-height:1.5}
/* The mock is a fixed 1010px drawing — its own body carried
   min-width:1010px. Below that width the sheet pans instead of
   crushing; the chrome above it and the house tail below stay
   responsive. */
.opsheet{overflow-x:auto}
.opsheet > main,.opsheet > div{min-width:1010px}
.opsheet *,.opsheet *::before,.opsheet *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;margin:0;padding:0}
.opsheet h2,.opsheet h3,.opsheet h4{font-size:inherit;font-weight:inherit}
.opsheet img,.opsheet svg{display:block}
.opsheet img{max-width:100%;height:auto}
.opsheet a{color:inherit;text-decoration:inherit}
.opsheet b{font-weight:bolder}
.opsheet button{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;background-color:transparent;background-image:none;text-transform:none;cursor:pointer}
.opsheet input{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;background-color:transparent}
.opsheet input::placeholder{color:#9ca3af;opacity:1}

/* The mock's named faces, in the Globe's own (owner-approved swap):
   Playfair Display the mock already shares with the house; Archivo
   Black becomes Inter 900; Caveat's one squiggle rides the house
   serif. */
.opsheet .serif{font-family:'Playfair Display','Times New Roman',Georgia,serif}
.opsheet .blk{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-weight:900}
.opsheet .hand{font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-style:italic}
.opsheet .num-flag{clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%)}

.opsheet .grid{display:grid}
.opsheet .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opsheet .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.opsheet .grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.opsheet .col-span-4{grid-column:span 4/span 4}
.opsheet .col-span-5{grid-column:span 5/span 5}
.opsheet .col-span-7{grid-column:span 7/span 7}
.opsheet .flex{display:flex}
.opsheet .flex-col{flex-direction:column}
.opsheet .flex-1{flex:1 1 0%}
.opsheet .shrink-0{flex-shrink:0}
.opsheet .items-start{align-items:flex-start}
.opsheet .items-center{align-items:center}
.opsheet .items-end{align-items:flex-end}
.opsheet .justify-center{justify-content:center}
.opsheet .justify-between{justify-content:space-between}
.opsheet .gap-0{gap:0}
.opsheet .gap-1\.5{gap:6px}
.opsheet .gap-2{gap:8px}
.opsheet .gap-2\.5{gap:10px}
.opsheet .gap-3{gap:12px}
.opsheet .gap-4{gap:16px}
.opsheet .gap-5{gap:20px}
.opsheet .gap-\[3px\]{gap:3px}
.opsheet .relative{position:relative}
.opsheet .absolute{position:absolute}
.opsheet .inset-0{inset:0}
.opsheet .top-4{top:16px}
.opsheet .top-8{top:32px}
.opsheet .-top-2{top:-8px}
.opsheet .right-4{right:16px}
.opsheet .right-5{right:20px}
.opsheet .right-8{right:32px}
.opsheet .right-14{right:56px}
.opsheet .left-0{left:0}
.opsheet .left-3{left:12px}
.opsheet .left-5{left:20px}
.opsheet .bottom-0{bottom:0}
.opsheet .bottom-3{bottom:12px}
.opsheet .overflow-hidden{overflow:hidden}
.opsheet .object-cover{object-fit:cover}
.opsheet .rounded-full{border-radius:9999px}
.opsheet .mx-auto{margin-left:auto;margin-right:auto}
.opsheet .mx-9{margin-left:36px;margin-right:36px}
.opsheet .ml-3{margin-left:12px}
.opsheet .mt-0\.5{margin-top:2px}
.opsheet .mt-1{margin-top:4px}
.opsheet .mt-1\.5{margin-top:6px}
.opsheet .mt-2{margin-top:8px}
.opsheet .mt-2\.5{margin-top:10px}
.opsheet .mt-3{margin-top:12px}
.opsheet .mt-4{margin-top:16px}
.opsheet .mt-5{margin-top:20px}
.opsheet .p-2{padding:8px}
.opsheet .p-2\.5{padding:10px}
.opsheet .p-3{padding:12px}
.opsheet .p-4{padding:16px}
.opsheet .p-5{padding:20px}
.opsheet .pb-6{padding-bottom:24px}
.opsheet .pl-2{padding-left:8px}
.opsheet .pt-2{padding-top:8px}
.opsheet .pt-3{padding-top:12px}
.opsheet .px-1{padding-left:4px;padding-right:4px}
.opsheet .px-1\.5{padding-left:6px;padding-right:6px}
.opsheet .px-2{padding-left:8px;padding-right:8px}
.opsheet .px-3{padding-left:12px;padding-right:12px}
.opsheet .px-4{padding-left:16px;padding-right:16px}
.opsheet .px-6{padding-left:24px;padding-right:24px}
.opsheet .py-0\.5{padding-top:2px;padding-bottom:2px}
.opsheet .py-2{padding-top:8px;padding-bottom:8px}
.opsheet .py-2\.5{padding-top:10px;padding-bottom:10px}
.opsheet .py-4{padding-top:16px;padding-bottom:16px}
.opsheet .py-\[3px\]{padding-top:3px;padding-bottom:3px}
.opsheet .py-\[7px\]{padding-top:7px;padding-bottom:7px}
.opsheet .w-full{width:100%}
.opsheet .w-\[20px\]{width:20px}
.opsheet .w-\[22px\]{width:22px}
.opsheet .w-\[38px\]{width:38px}
.opsheet .w-\[42px\]{width:42px}
.opsheet .w-\[52px\]{width:52px}
.opsheet .w-\[62px\]{width:62px}
.opsheet .w-\[160px\]{width:160px}
.opsheet .w-\[38\%\]{width:38%}
.opsheet .w-\[62\%\]{width:62%}
.opsheet .h-full{height:100%}
.opsheet .h-\[5px\]{height:5px}
.opsheet .h-\[20px\]{height:20px}
.opsheet .h-\[24px\]{height:24px}
.opsheet .h-\[26px\]{height:26px}
.opsheet .h-\[30px\]{height:30px}
.opsheet .h-\[34px\]{height:34px}
.opsheet .h-\[38px\]{height:38px}
.opsheet .h-\[72px\]{height:72px}
.opsheet .h-\[78px\]{height:78px}
.opsheet .h-\[275px\]{height:275px}
.opsheet .max-w-\[170px\]{max-width:170px}
.opsheet .max-w-\[275px\]{max-width:275px}
.opsheet .max-w-\[300px\]{max-width:300px}
.opsheet .max-w-\[1010px\]{max-width:1010px}
.opsheet .text-\[7px\]{font-size:7px}
.opsheet .text-\[7\.5px\]{font-size:7.5px}
.opsheet .text-\[8px\]{font-size:8px}
.opsheet .text-\[8\.5px\]{font-size:8.5px}
.opsheet .text-\[9px\]{font-size:9px}
.opsheet .text-\[9\.5px\]{font-size:9.5px}
.opsheet .text-\[10px\]{font-size:10px}
.opsheet .text-\[11px\]{font-size:11px}
.opsheet .text-\[11\.5px\]{font-size:11.5px}
.opsheet .text-\[12px\]{font-size:12px}
.opsheet .text-\[13px\]{font-size:13px}
.opsheet .text-\[14px\]{font-size:14px}
.opsheet .text-\[14\.5px\]{font-size:14.5px}
.opsheet .text-\[15px\]{font-size:15px}
.opsheet .text-\[16px\]{font-size:16px}
.opsheet .text-\[17px\]{font-size:17px}
.opsheet .text-\[26px\]{font-size:26px}
.opsheet .text-\[30px\]{font-size:30px}
.opsheet .font-bold{font-weight:700}
.opsheet .tracking-tight{letter-spacing:-.025em}
.opsheet .tracking-wider{letter-spacing:.05em}
.opsheet .leading-tight{line-height:1.25}
.opsheet .leading-snug{line-height:1.375}
.opsheet .leading-\[1\.12\]{line-height:1.12}
.opsheet .leading-\[1\.25\]{line-height:1.25}
.opsheet .leading-\[1\.3\]{line-height:1.3}
.opsheet .leading-\[1\.35\]{line-height:1.35}
.opsheet .leading-\[1\.5\]{line-height:1.5}
.opsheet .text-center{text-align:center}
.opsheet .text-white{color:#fff}
.opsheet .text-white\/85{color:rgba(255,255,255,.85)}
.opsheet .text-neutral-300{color:#d4d4d4}
.opsheet .text-neutral-400{color:#a3a3a3}
.opsheet .text-neutral-500{color:#737373}
.opsheet .text-neutral-600{color:#525252}
.opsheet .text-neutral-800{color:#262626}
.opsheet .text-neutral-900{color:#171717}
.opsheet .text-blue-700{color:#1d4ed8}
.opsheet .text-red-500{color:#ef4444}
.opsheet .text-red-600{color:#dc2626}
.opsheet .text-green-600{color:#16a34a}
.opsheet .outline-none{outline:2px solid transparent;outline-offset:2px}
.opsheet .bg-white{background-color:#fff}
.opsheet .bg-neutral-200{background-color:#e5e5e5}
.opsheet .bg-neutral-900{background-color:#171717}
.opsheet .bg-red-600{background-color:#dc2626}
.opsheet .bg-blue-600{background-color:#2563eb}
.opsheet .bg-blue-700{background-color:#1d4ed8}
.opsheet .bg-\[\#7fc7ee\]{background-color:#7fc7ee}
.opsheet .bg-\[\#dff23e\]{background-color:#dff23e}
.opsheet .bg-\[\#e3f04b\]{background-color:#e3f04b}
.opsheet .bg-gradient-to-r{background-image:linear-gradient(to right,rgba(0,0,0,.85),rgba(0,0,0,.45),transparent)}
.opsheet .from-black\/85{}
.opsheet .via-black\/45{}
.opsheet .to-transparent{}
.opsheet .border{border-width:1px}
.opsheet .border-2{border-width:2px}
.opsheet .border-t{border-top-width:1px}
.opsheet .border-b{border-bottom-width:1px}
.opsheet .border-neutral-200{border-color:#e5e5e5}
.opsheet .border-white{border-color:#fff}
.opsheet .space-y-2 > * + *{margin-top:8px}
.opsheet .divide-y > * + *{border-top-width:1px}
.opsheet .divide-neutral-200 > * + *{border-color:#e5e5e5}

/* ---- sheet furniture the port added: the ground strip behind
   the newsletter band (the mock floats it on the page ground; the
   16px below is the mock footer's mt-4), and the sample-art
   colophon, one quiet true sentence. ---- */
/* The ground the mock floats its newsletter band on. Trimmed
   2026-08-16 — the owner read the grey as too generous, and it
   was: 21px of it sat under a 95px box, reading as a band of
   its own rather than as the box's ground. */
.opsheet .opsheet-nlband{background:#efeeea;padding-bottom:6px}
.opsheet .sheet-colophon{max-width:1010px;margin:0 auto;padding:10px 12px 0;text-align:right;font:9.5px 'Inter',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6a6a66}

/* The house tail below the sheet: the desk's real stories, plate
   and switcher — standing site furniture, not the owner's design.
   It widens with the sheet but does NOT zoom: the plate and the
   desk switcher are site furniture and read at house size on every
   other desk. Same --opz, so its column lands flush under the
   sheet's edge at every step of the ladder. */
.op-tail { max-width: calc(1010px * var(--opz, 1)); margin: 0 auto; padding: 22px 16px 10px; }
.op-tail-links { font: 700 9px 'Inter', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.op-tail-links a { color: #444; text-decoration: none; }
.op-tail-file { list-style: none; margin: 0 0 6px; padding: 0; columns: 2; column-gap: 40px; }
.op-tail-file li { font: 11px/1.9 'Source Serif 4', Georgia, serif; break-inside: avoid; }
.op-tail-file .file-date { font: 700 9.5px 'Inter', Arial, sans-serif; letter-spacing: .05em; color: #6a6a66; margin-right: 6px; text-transform: uppercase; }
.op-tail-file a { color: #222; text-decoration: none; }
.op-tail-file a:hover { text-decoration: underline; }

/* ---- THE PHONE. The sheet is a fixed 1010px drawing and the
   zoom ladder cannot go below 1, so under 1080px it used to pan
   sideways at 1:1 rather than reflow. It reflows now. ---- */
@media (max-width: 1079px) {
  .opsheet { overflow-x: visible; }
  .opsheet > main, .opsheet > div { min-width: 0; }
  .opsheet .max-w-\[1010px\] { max-width: 100%; }
  .op-tail { max-width: 100%; }
  /* every multi-column grid becomes one column */
  .opsheet .grid-cols-3, .opsheet .grid-cols-4,
  .opsheet .grid-cols-12 { grid-template-columns: minmax(0,1fr); }
  .opsheet .col-span-4, .opsheet .col-span-5,
  .opsheet .col-span-7 { grid-column: auto; }
  .opsheet .w-\[38%\], .opsheet .w-\[62%\] { width: 100%; }
  .opsheet .max-w-\[170px\], .opsheet .max-w-\[275px\],
  .opsheet .max-w-\[300px\] { max-width: 100%; }
  /* The lead card carries its headline, dek and byline
     absolutely over the photograph. Shrinking the frame to a
     16/9 crop on a phone left the copy taller than the box it
     sat in, so the byline spilled onto the card below. The
     frame keeps a height that fits the words instead. */
  .opsheet .h-\[275px\] { height: 360px; }
  /* The lead's scrim runs left-to-right, which is where the
     copy sits on a wide screen. Stacked, the copy is along the
     BOTTOM, so on a phone the gradient turns with it — the dek
     was white type on bright water. */
  .opsheet .bg-gradient-to-r { background-image:
    linear-gradient(to bottom, rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.34) 34%, rgba(0,0,0,.46) 60%,
    rgba(0,0,0,.80) 100%); }
  .opsheet .h-\[72px\], .opsheet .h-\[78px\] { height: auto; }
  /* the type floor: 11px for a label, 15px for a headline */
  .opsheet .text-\[7px\], .opsheet .text-\[7\.5px\],
  .opsheet .text-\[8px\], .opsheet .text-\[8\.5px\] { font-size: 11px; }
  .opsheet .text-\[9px\], .opsheet .text-\[9\.5px\] { font-size: 12px; }
  .opsheet .text-\[10px\] { font-size: 13px; }
  .opsheet .text-\[11px\], .opsheet .text-\[11\.5px\] { font-size: 14px; }
  .opsheet .text-\[12px\] { font-size: 15px; }
  .opsheet .text-\[13px\], .opsheet .text-\[14px\],
  .opsheet .text-\[14\.5px\] { font-size: 16px; }
  .opsheet .text-\[15px\], .opsheet .text-\[16px\],
  .opsheet .text-\[17px\] { font-size: 18px; }
  .opsheet .leading-\[1\.12\], .opsheet .leading-tight
    { line-height: 1.25; }
  /* Fixed-width label columns stop fitting once the labels grow
     to the floor above; they size to their words instead. */
  .opsheet .w-\[62px\], .opsheet .w-\[52px\],
  .opsheet .w-\[160px\] { width: auto; }
  /* The newsletter row was laid out for a 1010px band and ran
     113px past a phone. It stacks. */
  .opsheet-nlband .flex.items-center { flex-wrap: wrap; gap: 8px; }
  .opsheet-nlband input { min-width: 0; }
}