/* Matinee's website: Double Bill (design/website/double-bill/home-page-design.html), on the studio's
   grid (design/website/double-bill/2026-10-17-03-website-grid-addendum.md): one line is 1.75rem, the
   body's line height; gaps between blocks are whole lines; 12 columns on a computer, 4 below 52rem.
   Colours come from colours.css (site/colours.mjs). Fonts are the site's own files. */

@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/big-shoulders-display-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jost-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jost-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/jost-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/jost-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/jost-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/jost-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/jost-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/jost-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --line: 1.75rem;
  --poster: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "Jost", "Futura", sans-serif;
  --settle: cubic-bezier(.2, .7, .2, 1);
  --overprint: multiply;
  /* The content stops widening at 72rem; the colour runs on to the edges. */
  --side: max(6vw, calc((100% - 72rem) / 2));
}
@media (prefers-color-scheme: dark) { :root { --overprint: normal; } }

* { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 1.125rem/var(--line) var(--text); overflow-x: clip; }
a { color: inherit; text-underline-offset: 0.2em; }
/* The focus ring is drawn in a colour that stands out from each band (3:1 or more, site/colours.mjs). */
:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1.25rem; top: -10rem; z-index: 10; background: var(--black); color: var(--paper); padding: 0.875rem 1.25rem; font-weight: 600; }
.skip:focus { top: 0.875rem; }

/* The bar at the top of every page (#180): the colour of the page's first band, two lines tall. On
   phones, with script, it tucks away on the way down and comes back on the way up (assets/bar.js). */
.topbar { position: relative; z-index: 9; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 0.875rem; min-height: calc(var(--line) * 2); padding: 0 1.25rem; }
@media (min-width: 52rem) { .topbar { padding: 0 var(--side); column-gap: var(--line); } }
.topbar-name { font: 800 1.75rem/var(--line) var(--poster); text-transform: uppercase; letter-spacing: 0.01em; text-decoration: none; padding: 0.875rem 0; }
.topbar.f-yellow .topbar-name { color: var(--green); }
.topbar nav { display: flex; flex-wrap: wrap; column-gap: 0.875rem; }
@media (min-width: 52rem) { .topbar nav { column-gap: var(--line); } }
.topbar nav a { font: 600 1rem/var(--line) var(--text); padding: 0.875rem 0; text-decoration: none; }
@media (min-width: 52rem) { .topbar nav a { font-size: 1.125rem; } }
.topbar a:hover, .topbar nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
@media (max-width: 52rem) {
  .bar-follows { scroll-padding-top: calc(var(--line) * 2); }
  .bar-follows .topbar { position: sticky; top: 0; }
  .bar-follows .topbar.tucked { translate: 0 -100%; }
  .bar-follows .topbar.lifted { box-shadow: 0 2px 0 currentColor; }
}
/* The skip link sits over whichever band comes first: a paper ring inside a black one shows on all. */
.skip:focus-visible { outline: 3px solid var(--paper); outline-offset: 0; box-shadow: 0 0 0 6px var(--black); }

/* A band: full-width colour, the words kept in their column. */
.card { position: relative; padding: calc(var(--line) * 2) 1.25rem; overflow: hidden; display: grid; gap: var(--line); grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--line); }
.card > * { grid-column: 1 / -1; }
@media (min-width: 52rem) {
  .card { padding: calc(var(--line) * 3) var(--side); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .card > .copy { grid-column: 1 / span 6; }
  .card > .art { grid-column: 7 / span 6; }
  .card.right > .copy { grid-column: 7 / span 6; }
  .card.right > .art { grid-column: 1 / span 6; grid-row: 1; }
}
.copy { position: relative; z-index: 3; max-width: 31rem; min-width: 0; }
.f-yellow { background: var(--yellow); color: var(--black); --ink: var(--black); --quiet: var(--on-yellow-quiet); --focus: var(--black); }
.f-blue { background: var(--blue); color: var(--paper); --ink: var(--paper); --quiet: var(--paper); --focus: var(--paper); }
.f-green { background: var(--green); color: var(--paper); --ink: var(--paper); --quiet: var(--on-green-quiet); --focus: var(--paper); }
.f-page { background: var(--page); color: var(--ink); --focus: var(--ink); }

h1, h2 { font-family: var(--poster); font-weight: 800; text-transform: uppercase; line-height: 0.98; letter-spacing: 0.01em; margin: 0 0 var(--line); text-wrap: balance; }
h2 { font-size: clamp(3.2rem, 13vw, 6.4rem); }
h3 { font: 700 1.25rem/var(--line) var(--text); margin: 0 0 calc(var(--line) / 2); }
p { margin: 0 0 var(--line); }
.copy > :last-child { margin-bottom: 0; }
.lede { font-size: clamp(1.25rem, 3.8vw, 1.6rem); line-height: 1.32; font-weight: 500; }
.small { font-size: 1rem; }

.btn { display: inline-flex; align-items: center; min-height: calc(var(--line) * 2); font: 700 1.1rem/1.2 var(--text); padding: 0.4375rem 1.5rem; text-decoration: none; border: 0; cursor: pointer; background: var(--black); color: var(--paper); }
.f-blue .btn, .f-green .btn { background: var(--yellow); color: var(--black); }
.f-page .btn { background: var(--ink); color: var(--page); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2.5px currentColor; }
.actions { display: flex; flex-wrap: wrap; gap: var(--line); align-items: center; }
.textlink { font-weight: 600; }

/* The Chrome Web Store badge: unaltered except for size, the bordered version on colour, never the
   page's main element (developer.chrome.com/docs/webstore/branding). At launch it's only a second link
   beside Add to Chrome in "When you're ready" (DEC-097). */
.badge { display: inline-block; line-height: 0; }
.badge img { display: block; width: 12.5rem; height: auto; }

/* The last line, given room of its own */
.coda { background: var(--yellow); color: var(--green); padding: calc(var(--line) * 3) 1.25rem calc(var(--line) * 2); }
@media (min-width: 52rem) { .coda { padding: calc(var(--line) * 4) var(--side) calc(var(--line) * 3); } }
.coda p { margin: 0; font: 800 clamp(3rem, 14vw, 7rem)/0.98 var(--poster); text-transform: uppercase; letter-spacing: 0.01em; color: var(--green); max-width: 14ch; }
.coda p span { display: block; }

footer { --focus: var(--paper); padding: calc(var(--line) * 1.5) 1.25rem calc(var(--line) * 2); background: var(--green); color: var(--paper); font-size: 1rem; }
@media (min-width: 52rem) { footer { padding: calc(var(--line) * 1.5) var(--side) calc(var(--line) * 2); } }
footer nav { display: flex; flex-wrap: wrap; gap: calc(var(--line) / 4) 1.2rem; margin-bottom: calc(var(--line) / 2); font-weight: 600; }
footer nav a { display: inline-block; padding: 0.4375rem 0; }

/* Supporting pages: a coloured band for the title, then text on paper at the same sizes and rules. */
.title-band { padding: calc(var(--line) * 2) 1.25rem; }
@media (min-width: 52rem) { .title-band { padding: calc(var(--line) * 3) var(--side) calc(var(--line) * 2); } }
.title-band h1 { font-size: clamp(3rem, 12vw, 5.6rem); margin: 0; max-width: 18ch; }
.title-band .standfirst { margin: var(--line) 0 0; max-width: 40rem; font-size: clamp(1.25rem, 3.4vw, 1.5rem); line-height: 1.4; font-weight: 500; }
.prose { --focus: var(--ink); padding: calc(var(--line) * 2) 1.25rem calc(var(--line) * 3); background: var(--page); color: var(--ink); }
@media (min-width: 52rem) { .prose { padding: calc(var(--line) * 3) var(--side) calc(var(--line) * 4); } }
.prose > * { max-width: 42rem; }
.prose h2 { font-size: clamp(2.4rem, 8vw, 3.6rem); margin: calc(var(--line) * 2) 0 var(--line); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: calc(var(--line) * 1.5); }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 var(--line); }
.prose li { margin: 0 0 calc(var(--line) / 2); }
.prose code { font-family: inherit; font-weight: 600; }
.prose .table { overflow-x: auto; margin: 0 0 var(--line); max-width: 100%; }
.prose table { border-collapse: collapse; min-width: 34rem; font-size: 1rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.4375rem 0.875rem 0.4375rem 0; border-bottom: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.prose th { font-weight: 700; }
.draft-note { background: var(--yellow); color: var(--black); padding: 0.875rem 1.25rem; margin: 0 0 calc(var(--line) * 2); font-weight: 600; }
.placeholder { background: var(--yellow); color: var(--black); padding: 0 0.25em; }

/* The bar slides back in on phones only when the visitor hasn't asked for reduced motion (#180). */
@media (prefers-reduced-motion: no-preference) {
  .topbar { transition: translate 0.3s var(--settle); }
}