/* okbyus.com: one stylesheet for every page.
   The look is the OK By Us roundel's (okbyus/brand/roundel, the owner, 2026-10-26): its navy #132B66,
   red #D52B1E and white, its five stars and its lettering, Nunito (SIL OFL), served from /fonts so
   nothing is loaded from anyone else. The ground is the roundel's navy with its stars, the panels are
   navy edged in its red, and white is for words only (the owner, 2026-10-26: "i don't like all the
   white on the website, it's too bright, use the blue and red in borders for the background where
   it's currently lagre patches of white"). So there is one look, whatever the device's light or dark
   setting. Each ad is in its app's own colours (the .ad-* blocks), so it reads as that app's.
   The homepage (body.dash) is a dashboard: it fits the window at every size and never scrolls
   (the owner, 2026-10-13). /news/, /videos/ and the 404 page are ordinary pages and scroll. */
@font-face {
  font-family: "Nunito"; src: url("/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 200 1000; font-style: normal; font-display: swap;
}
:root {
  --navy: #132B66; --red: #D52B1E; --white: #FFFFFF;
  /* The ground is the roundel's navy; a panel is a shade deeper, edged in red; an article a shade lighter. */
  --bg: #132B66; --card: #0E2257; --card-2: #16306F; --ink: #FFFFFF; --muted: #BCC7E5; --faint: #8E9CC6;
  --heading: #FFFFFF; --accent: #C7D5FA; --hot: #FF8A7F; --chip: rgba(255,255,255,0.08); --focus: #FFFFFF;
  --line: rgba(255,255,255,0.12); --line-strong: rgba(255,255,255,0.32); --edge: 2px solid var(--red);
  --shadow: 0 18px 40px -26px rgba(3,10,30,0.9);
  --font: "Nunito", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The roundel's own five-point star, for masks. */
  --star: url("/brand/star.svg");
  --stars: url("/brand/stars.svg");
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
/* The roundel's navy with its stars faint across it, on every page. */
body {
  font-family: var(--font); font-weight: 500; color: var(--ink);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='%23fff' fill-opacity='.05'%3E%3Cpolygon transform='translate(8.5 8.5) scale(.45)' points='10,.5 12.35,6.77 19.04,7.06 13.8,11.23 15.58,17.69 10,13.99 4.42,17.69 6.2,11.23 .96,7.06 7.65,6.77'/%3E%3Cpolygon transform='translate(36.5 36.5) scale(.45)' points='10,.5 12.35,6.77 19.04,7.06 13.8,11.23 15.58,17.69 10,13.99 4.42,17.69 6.2,11.23 .96,7.06 7.65,6.77'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 56px;
  min-height: 100vh; line-height: 1.45;
}
a { color: inherit; }
img { max-width: 100%; }
b, strong { font-weight: 800; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* The masthead: on the page's navy, ruled off white then red like the roundel's rings, with the
   roundel itself beside the name. */
.masthead {
  position: relative; z-index: 1; color: #fff; margin-bottom: 8px;
  background: rgba(5,14,40,0.22);
  box-shadow: 0 3px 0 #fff, 0 8px 0 var(--red);
}
.masthead :focus-visible { outline-color: #fff; }
.masthead-in { max-width: 1640px; margin: 0 auto; padding: 9px 24px; display: flex; align-items: center; gap: 10px 22px; }
body:not(.dash) .masthead-in { max-width: 1088px; flex-wrap: wrap; }
.brand { font-size: inherit; font-weight: inherit; }
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; white-space: nowrap; }
.roundel { display: block; flex: none; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
/* The name as the roundel letters it: heavy capitals, spaced, with its five stars under them. */
.wordmark { display: grid; justify-items: center; gap: 4px; padding-left: .1em;
  font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.wordmark::after { content: ""; width: 62px; height: 12px; background: #fff;
  -webkit-mask: var(--stars) center / contain no-repeat; mask: var(--stars) center / contain no-repeat; }
.tagline { color: rgba(255,255,255,0.74); font-size: 15px; font-weight: 650; margin-right: auto;
  padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.22); line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
nav.top-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-left: auto; }
nav.top-nav a { text-decoration: none; color: rgba(255,255,255,0.86); font-weight: 750; font-size: 15px;
  padding: 8px 13px; border-radius: 999px; white-space: nowrap; }
nav.top-nav a:hover { color: #fff; background: rgba(255,255,255,0.12); }
nav.top-nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.16); }
nav.top-nav a.button { margin-left: 6px; color: #fff; background: var(--red); }
nav.top-nav a.button:hover { background: #E8392B; }

/* Ordinary pages */
.page { max-width: 1040px; margin: 0 auto; display: grid; gap: 44px; padding: 44px 20px 48px; }
.page.narrow { max-width: 720px; }
.intro { display: grid; gap: 12px; max-width: 46rem; }
.intro h1 { font-weight: 900; font-size: clamp(32px, 5vw, 50px); line-height: 1.02; letter-spacing: -0.01em; color: var(--heading); }
/* The roundel's five stars under a page's name. */
.intro h1::after { content: ""; display: block; width: 86px; height: 17px; margin-top: 14px; background: #fff;
  -webkit-mask: var(--stars) left center / contain no-repeat; mask: var(--stars) left center / contain no-repeat; }
.intro p { color: var(--muted); font-size: 18px; max-width: 40rem; }
.intro p a { color: var(--accent); font-weight: 750; }
.stack { display: grid; gap: 16px; }
.sub { color: var(--muted); font-size: 16px; }
.more { color: var(--accent); font-weight: 800; text-decoration: none; font-size: 14px; white-space: nowrap; }
.more:hover { color: var(--hot); text-decoration: underline; text-underline-offset: 3px; }

/* An ad: the whole card one link, in its app's colours. */
a.ad {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ad-ink);
  background: var(--ad-bg); border: var(--edge); border-radius: 22px; overflow: hidden;
  box-shadow: 0 26px 54px -30px var(--ad-shadow, rgba(0,0,0,0.5));
  transition: transform .15s ease, box-shadow .15s ease;
}
/* A fine light rim inside the card's edge, like an enamel badge's. */
a.ad::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
a.ad:hover { transform: translateY(-2px); box-shadow: 0 32px 64px -28px var(--ad-shadow, rgba(0,0,0,0.55)); }
a.ad:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
/* The art takes whatever height is left and is never cropped: the Buzzer Party picture has words in it. */
.ad-art { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; }
/* Behind it, the same picture blurred, so whatever space the picture doesn't fill is its colours. */
.ad-art::before { content: ""; position: absolute; inset: -40px; background: var(--art) center / cover no-repeat;
  filter: blur(30px) saturate(1.15); opacity: .4; }
.ad-art img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.ad-body { flex: 0 0 auto; padding: 18px 24px 22px; display: grid; gap: 8px; align-content: start; justify-items: start; }
/* The news on an ad is OK By Us's: on the roundel's red, with its star. */
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 850; font-size: 11.5px; line-height: 1.25;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--red);
  padding: 4px 11px 4px 9px; border-radius: 999px; max-width: 100%; }
.eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.ad h2 { font-weight: 900; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -0.005em; }
.ad p { font-size: 16px; line-height: 1.45; color: var(--ad-muted); max-width: 40ch; }
.ad p b { color: var(--ad-ink); }
.cta { margin-top: 4px; display: inline-block; font-weight: 850; font-size: 15px;
  color: var(--ad-bg); background: var(--ad-accent); padding: 10px 20px; border-radius: 999px; }

.ad-buzzerparty { --art: url("/buzzer-party.jpg"); --ad-bg: #14100A; --ad-ink: #F5EEE1; --ad-muted: #B3A388; --ad-accent: #FFC400; --ad-shadow: rgba(20,16,10,0.55); }
.ad-boomjack    { --art: url("/media/boomjack.jpg"); --ad-bg: #0d0e10; --ad-ink: #f2ede2; --ad-muted: #b4ab98; --ad-accent: #ffba3d; --ad-shadow: rgba(13,14,16,0.6); }
/* Mahj Dragon's own (its site.css, from the app's Theme.swift): lacquer black, rice-paper ivory, temple gold. */
.ad-mahjdragon  { --art: url("/media/mahjdragon.jpg"); --ad-bg: #0e0b0b; --ad-ink: #f2eadd; --ad-muted: #afa08c; --ad-accent: #daa520; --ad-shadow: rgba(14,11,11,0.6); }
/* Rodney's own (its site.css, from the app's Theme.swift): pitch-night green, amber. */
.ad-rodney      { --art: url("/media/rodney.jpg"); --ad-bg: #0a1612; --ad-ink: #eceff1; --ad-muted: #90a49c; --ad-accent: #ffc107; --ad-shadow: rgba(10,22,18,0.6); }

/* The news: one card per article, the whole card a link, the app's name in its colour. */
ol.news { list-style: none; display: grid; gap: 10px; }
li.story {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "app meta" "title title"; align-items: center; gap: 6px 12px;
  transition: border-color .15s ease;
}
li.story:hover { border-color: var(--line-strong); }
.story-app { grid-area: app; font-size: 12px; font-weight: 850; letter-spacing: .03em; padding: 3px 10px;
  border-radius: 999px; color: var(--accent); background: var(--chip); white-space: nowrap; }
.story-meta { grid-area: meta; justify-self: end; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.story-title { grid-area: title; color: var(--ink); font-weight: 800; text-decoration: none; font-size: 16.5px; line-height: 1.28; }
.story-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
li.story:hover .story-title { color: var(--hot); }
.story-kind { color: var(--faint); font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; margin-right: 4px; }
/* Each app's name in its own colour, tinted, on the navy. */
.app-buzzerparty { color: #FFC400; background: rgba(255,196,0,0.14); }
.app-boomjack    { color: #FF8F8F; background: rgba(255,90,90,0.16); }
.app-mahjdragon  { color: #3FD49A; background: rgba(25,184,122,0.16); } /* Mahj Dragon's jade */
.app-rodney      { color: #FFC107; background: rgba(30,120,80,0.30); }   /* Rodney's amber on its pitch green */

/* /news/: a button per app */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); padding: 7px 15px; border-radius: 999px; }
.chip:hover { border-color: var(--line-strong); }
.chip[aria-pressed="true"] { color: #fff; background: var(--red); border-color: var(--red); }
.chips:empty { display: none; }
li.story[hidden] { display: none; }
.feed-link { color: var(--muted); font-size: 14px; }
.feed-link a { color: var(--accent); font-weight: 750; }

a.button {
  text-decoration: none; font-weight: 800; font-size: 15px; color: #fff; background: var(--red);
  padding: 10px 20px; border-radius: 999px; white-space: nowrap; display: inline-block;
}
a.button:hover { background: #E8392B; }
footer.foot { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; color: var(--faint);
  font-size: 14px; font-weight: 600; padding-top: 22px; border-top: 1px solid var(--line); }
footer.foot a { color: var(--muted); }
footer.foot .roundel { width: 26px; height: 26px; box-shadow: none; }

.lost { display: grid; gap: 14px; justify-items: start; }
.lost h1 { font-weight: 900; font-size: 36px; color: var(--heading); }
.lost p { color: var(--muted); font-size: 17px; }

/* ── The homepage dashboard ──────────────────────────────────────────────────────────────────
   One screen, never scrolled: the window's height is shared out, the ads' art shrinks to what's
   left, and the news panel shows as many whole articles as fit (the rest wrap into a second
   column that's out of sight; "All the news" has every one). */
html:has(body.dash) { height: 100%; overflow: hidden; }
body.dash { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.dash .masthead { flex: none; }
.dash-grid {
  flex: 1 1 0; min-height: 0; width: 100%; max-width: 1640px; margin: 0 auto; padding: 16px 24px 20px;
  display: grid; grid-template-rows: minmax(0, 1fr);
}
/* Wider than tall: the four ads two by two on the left, each its picture over its words; the news
   down the right. (Three ads were stacked one per row until Rodney came, 2026-10-26.) */
.dash main {
  min-height: 0; display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "ads news";
}
.dash .ads { grid-area: ads; min-height: 0; display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.dash a.ad { min-height: 0; min-width: 0; }
.dash .ad-body { padding: 14px 20px 16px; gap: 7px; }
/* With Shorts (<main class="has-shorts">): their strip under the ads, on the ads' side of the page.
   The Shorts are ads; the content (the latest real video and the articles) is on the right. */
.dash main.has-shorts { grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "ads news" "shorts news"; }
.dash .shorts-strip { grid-area: shorts; }
/* The right-hand column: the latest video (once there is one) over the news. */
.side { grid-area: news; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.side > .news-panel { flex: 1 1 0; min-height: 0; }
.side > .video-panel { flex: 0 0 auto; }
.panel {
  min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px;
  background: var(--card); border: var(--edge); border-radius: 22px; padding: 16px 18px 14px;
  box-shadow: var(--shadow);
}
.panel { container-type: inline-size; }
.panel li.story { background: var(--card-2); }
@container (max-width: 400px) { .story-kind { display: none; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
/* A panel's name: the roundel's capitals, after a little roundel. */
.panel-head h2 { display: inline-flex; align-items: center; gap: 9px; color: var(--heading);
  font-weight: 900; font-size: 14px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
.panel-head h2::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--red) 0 52%, #fff 55% 64%, var(--navy) 67% 97%, transparent 100%);
  box-shadow: 0 0 0 1.5px #fff; }
.panel .sub { font-size: 14px; margin-top: -4px; }
.panel ol.news {
  min-height: 0; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 10px 40px;
}
.panel li.story { width: 100%; flex: 0 0 auto; }
.panel-foot { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
  color: var(--faint); font-size: 13px; font-weight: 600; padding-top: 2px; }
.panel-foot a { color: var(--muted); }

/* The latest video: a panel with its thumbnail (a player once pressed) and its title. */
.video-panel { grid-template-rows: auto auto auto; gap: 10px; }
.video-panel[hidden] { display: none; }
.video-caption { display: grid; gap: 2px; min-width: 0; }
.video-title { font-weight: 800; font-size: 15.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-title a { color: var(--ink); text-decoration: none; }
.video-title a:hover { color: var(--hot); text-decoration: underline; }
.video-meta { color: var(--muted); font-size: 13px; font-weight: 600; }

/* The Shorts strip: a row of upright thumbnails, as many as fit whole (the rest wrap out of sight).
   Each plays in a pop-over. */
.shorts-strip { --short-h: clamp(84px, 11vh, 128px); grid-template-rows: auto auto; gap: 8px;
  padding: 10px 14px 12px; border-radius: 20px; }
.shorts-strip[hidden] { display: none; }
.shorts-strip .panel-head h2 { font-size: 13px; }
.shorts-strip .panel-head h2::before { width: 16px; height: 16px; }
.shorts-strip .panel-head .more { font-size: 13px; }
.shorts-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; height: var(--short-h); overflow: hidden; }
.shorts-row li { height: var(--short-h); aspect-ratio: 9 / 16; }
.short-thumb { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0;
  border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.short-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.short-thumb .yt-icon { width: 34px; height: 24px; border-radius: 7px; }
.short-thumb .yt-icon::after { border-width: 6px 0 6px 10px; }
.short-thumb:hover .yt-icon, .short-thumb:focus-visible .yt-icon { background: var(--red); }
.short-thumb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The pop-over a video plays in, and the subscribe card, come with public/yt.js. */

/* A video: YouTube's player inline (the homepage's latest video), or a thumbnail and play button that
   opens YouTube's player in a pop-over (public/yt.js). */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.yt-play { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.yt-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-short .yt-play img { object-fit: cover; } /* the 4:3 thumbnail, cropped to the upright frame in its middle */
.yt-icon { position: absolute; inset: 0; margin: auto; width: 64px; height: 44px; border-radius: 12px;
  background: rgba(11,27,69,0.82); transition: background .15s ease; }
.yt-icon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-38%, -50%);
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.yt-play:hover .yt-icon, .yt-play:focus-visible .yt-icon { background: var(--red); }
.yt-play:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.yt iframe { display: block; width: 100%; height: 100%; border: 0; }

/* A Short is upright: on the homepage, a phone-shaped player beside its app, title and date. */
.video-caption .story-app { grid-area: auto; justify-self: start; margin-bottom: 4px; } /* not the news card's grid area */
.video-panel.is-short { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "player head" "player cap"; column-gap: 14px; row-gap: 8px; }
.video-panel.is-short .yt { grid-area: player; aspect-ratio: 9 / 16; height: clamp(140px, 27vh, 300px); width: auto; }
.video-panel.is-short .panel-head { grid-area: head; flex-direction: column; align-items: flex-start; gap: 2px; }
.video-panel.is-short .video-caption { grid-area: cap; align-content: start; }
.video-panel.is-short .video-title { -webkit-line-clamp: 4; }

/* /videos/: Videos (how-tos and demos) first, then Shorts, a row per app in each; a page that scrolls. */
.video-sections { display: grid; gap: 40px; }
.video-app { display: grid; gap: 22px; }
.video-app h2 { font-weight: 900; font-size: 24px; color: var(--heading); }
.video-app h2 .story-app { font-size: 15px; padding: 5px 14px; }
.video-row { display: grid; gap: 12px; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 14px; flex-wrap: wrap; }
.row-head h3 { font-weight: 850; font-size: 18px; }
ol.videos { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px 20px; }
ol.videos.upright { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 14px; }
li.video { display: grid; gap: 8px; align-content: start; justify-items: start; }
li.video .yt { width: 100%; }
li.video.is-short .yt { aspect-ratio: 9 / 16; }
li.video .video-title { font-size: 16px; }
.video-empty { color: var(--muted); background: var(--card); border: var(--edge);
  border-radius: 16px; padding: 20px 22px; font-size: 16px; }
.video-empty a { color: var(--accent); font-weight: 750; }

/* Upright windows (an iPad held upright, phones): the ads two by two across the top, each its
   picture beside its tag and name; the Shorts and the news below, with the rest of the height. */
@media (orientation: portrait) {
  .dash main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "ads" "news";
  }
  .dash main.has-shorts { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "ads" "shorts" "news"; }
  .dash .ads { grid-template-rows: auto auto; }
  .shorts-strip { --short-h: clamp(64px, 7.5vh, 92px); }
  .news-panel .sub { display: none; } /* which day is whose: on /news/ and on wider screens */
  .dash a.ad { flex-direction: row; }
  .dash .ad-art { flex: 0 0 46%; aspect-ratio: 1200 / 630; }
  .dash .ad-body { flex: 1 1 0; min-width: 0; align-content: center; padding: 10px 14px; gap: 6px; }
  .dash .ad h2 { font-size: clamp(18px, 3.2vw, 28px); }
  .dash .ad p, .dash .cta { display: none; }
  .dash .eyebrow { border-radius: 9px; } /* a narrow card wraps it: a tag, not a pill */
  .side { flex-direction: row; }
  .side > .video-panel { flex: 1 1 0; min-width: 0; align-content: start; }
  .side > .news-panel { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 1080px) {
  .tagline { display: none; }
  .dash .eyebrow { font-size: 11px; letter-spacing: .1em; }
}
/* Phones: a slimmer masthead, smaller ads (name, eyebrow, button), more room for the news. */
@media (max-width: 640px) {
  .masthead-in { padding: 7px 14px; gap: 8px 10px; }
  .roundel { width: 38px; height: 38px; }
  .mark { gap: 9px; }
  .wordmark { font-size: 17px; gap: 3px; }
  .wordmark::after { width: 46px; height: 9px; }
  nav.top-nav { gap: 2px; }
  nav.top-nav a { font-size: 14px; padding: 6px 9px; }
  nav.top-nav a.button { margin-left: 4px; padding: 7px 12px; }
  .dash-grid { padding: 10px 14px 14px; }
  .dash main { gap: 12px; }
  /* Four ads two by two, each its picture over its name; the tag, the copy and the button are on
     the app's own site, so the content keeps the room (the owner, 2026-10-25: the content, not the hook). */
  .dash .ads { gap: 8px; }
  .dash a.ad { flex-direction: column; border-radius: 14px; }
  .dash .ad-art { flex: 0 0 auto; aspect-ratio: 1200 / 630; }
  .dash .ad-body { flex: 0 0 auto; padding: 4px 10px 5px; gap: 0; }
  .dash .ad h2 { font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .dash .eyebrow, .dash .ad p, .dash .cta { display: none; }
  .panel { border-radius: 18px; padding: 12px 12px 10px; gap: 10px; }
  .panel-head h2 { font-size: 13px; letter-spacing: .12em; }
  .panel li.story { padding: 10px 12px; }
  .panel .story-title { font-size: 15px; }
  .side { flex-direction: column; gap: 12px; }
  .side > .video-panel { flex: 0 0 auto; }
  .dash main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "ads" "news"; gap: 8px; }
  .dash main.has-shorts { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "ads" "shorts" "news"; }
  .shorts-strip { --short-h: clamp(60px, 8.5vh, 84px); padding: 8px 12px 10px; gap: 6px; border-radius: 14px; }
}
/* A phone's masthead holds the name, News and Get in touch; the videos are a tap away in their panel. */
@media (max-width: 480px) {
  .dash nav.top-nav .nav-extra { display: none; }
  body:not(.dash) .tagline { display: none; }
}
/* Phones, and short windows wider than tall (a small laptop, a phone on its side): the video's
   thumbnail sits beside its title, so the news keeps room for whole articles. */
@media (max-width: 640px), (orientation: landscape) and (max-height: 820px) {
  .video-panel { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "player head" "player cap"; column-gap: 12px; row-gap: 6px; }
  .video-panel .yt { grid-area: player; border-radius: 10px; }
  .video-panel .panel-head { grid-area: head; }
  .video-panel .panel-head h2 { font-size: 13px; }
  .video-panel .panel-head .more { font-size: 13px; }
  .video-panel .video-caption { grid-area: cap; align-content: start; }
  .video-panel .video-title { font-size: 14px; }
  .video-panel .yt-icon { width: 44px; height: 30px; border-radius: 9px; }
  .video-panel .yt-icon::after { border-width: 7px 0 7px 12px; }
}
@media (orientation: landscape) and (max-height: 720px) {
  .side { gap: 14px; }
  .side > .video-panel { padding: 12px; }
  .shorts-strip { --short-h: clamp(56px, 10vh, 84px); padding: 8px 12px 10px; gap: 6px; }
}
/* Laptop-height windows wider than tall: a slimmer Shorts strip, so the news keeps whole articles. */
@media (orientation: landscape) and (min-height: 721px) and (max-height: 820px) {
  .shorts-strip { --short-h: clamp(64px, 9vh, 80px); padding: 8px 14px 10px; gap: 6px; }
}
@media (max-width: 640px), (orientation: landscape) and (max-height: 720px) {
  .video-panel.is-short .yt { height: clamp(110px, 20vh, 180px); border-radius: 10px; }
}
/* Phones carry four ads now (Rodney, 2026-10-26): a smaller Short leaves the news room. */
@media (max-width: 640px) {
  .video-panel.is-short .yt { height: clamp(88px, 14vh, 130px); }
  .video-panel .video-title { -webkit-line-clamp: 2; }
  .news-panel .sub { display: none; } /* which day is whose: on /news/ and on wider screens */
}
/* Phones: the Shorts strip on one line, its name beside its thumbnails. On a small phone, or one on
   its side, there's no room for it: the four ad cards are the ads there, and the content keeps the
   room (the owner, 2026-10-25: give them the content, not the hook). */
@media (max-width: 640px) {
  .shorts-strip { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; align-items: center; column-gap: 12px; }
  .shorts-strip .panel-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .shorts-strip .panel-head .more { font-size: 12px; }
}
@media (max-width: 640px) and (max-height: 740px) {
  .dash .shorts-strip { display: none; }
  .dash main.has-shorts { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "ads" "news"; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .dash .shorts-strip { display: none; }
  .dash main.has-shorts { grid-template-rows: minmax(0, 1fr); grid-template-areas: "ads news"; }
}
/* Wider than tall, each ad is as tall as its share of the window, so it measures itself: whatever
   doesn't fit goes so the picture keeps its room, the line of copy first, then the button (the whole
   card is the link), then the red tag. */
@media (min-width: 641px) and (orientation: landscape) {
  .dash a.ad { container: ad / size; }
}
@container ad (max-height: 460px) { .dash .ad p { display: none; } }
@container ad (max-height: 340px) { .dash .cta { display: none; } }
@container ad (max-height: 175px) { .dash .eyebrow { display: none; } }
/* Very short windows (a phone on its side): the slimmest masthead, without the stars. */
@media (max-height: 520px) {
  .dash .masthead-in { padding-top: 5px; padding-bottom: 5px; }
  .dash .roundel { width: 32px; height: 32px; }
  .dash .wordmark { font-size: 16px; }
  .dash .wordmark::after { display: none; }
  .dash-grid { padding-top: 10px; padding-bottom: 10px; }
  .dash .cta, .panel .sub, .panel-foot .copy, .video-panel .video-meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  a.ad { transition: none; } a.ad:hover { transform: none; }
}
@media (max-width: 560px) {
  .page { gap: 36px; padding: 30px 16px 36px; }
}