/* v3 blog (2026-11-06). The page's own rules; the nav bubble, buttons and footer come from
   style.css / home.css / home-v2.css. Shape after untillabs.com/blog, in Vexil's own palette:
   a warm wash hero with the title huge at the bottom, cards with the date in the mark's face
   (Michroma is the instrument voice here, as Geist Mono is theirs), a tonal strip where they
   use a photo, and a plain list as the archive. */
.blog { background: var(--bg); }
.blog .mono { font-family: "Michroma", sans-serif; font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); text-transform: none; }

/* ---------- the wash: a blurred topographic map in the section's colour ---------- */
/* The same band tops every page, a different colour each (Ryan, 2026-11-06, after Until; the
   page top only, not the sections).
   data-wash picks the colour: --w1/--w2 the wash, --deep the far edge, --topo the contour ink.
   js/topo-wash.js draws contours into the canvas; css blurs and multiplies them over the wash,
   then fades the band into the cream so the content under it sits on the page colour. */
[data-wash] { position: relative; isolation: isolate; }
[data-wash="ember"] { --w1: 232, 114, 42; --w2: 255, 170, 110; --deep: 243, 215, 194; --topo: 124, 52, 12; }
[data-wash="sky"]   { --w1: 84, 130, 194; --w2: 150, 184, 226; --deep: 178, 202, 232; --topo: 26, 58, 104; }
[data-wash="field"] { --w1: 143, 170, 110; --w2: 204, 216, 172; --deep: 222, 228, 206; --topo: 52, 78, 36; }
[data-wash="dusk"]  { --w1: 150, 128, 168; --w2: 206, 192, 220; --deep: 224, 216, 230; --topo: 68, 46, 90; }
[data-wash="ash"]   { --w1: 150, 140, 135; --w2: 212, 202, 196; --deep: 226, 220, 216; --topo: 64, 54, 48; }
/* the blog's green (Ryan, 2026-11-06): forest to moss to a pale lime, deeper than "field" so the
   near-white title holds; --pool is the light that drifts through it */
/* the paper: the white map under the closing climb, ink contours on the page's cream */
[data-wash="paper"] { --w1: 255, 255, 255; --w2: 251, 251, 249; --deep: 251, 251, 249; --topo: 16, 21, 27; }
[data-wash="moss"]  { --w1: 38, 92, 52; --w2: 118, 160, 78; --deep: 22, 58, 34; --topo: 10, 40, 22; --pool: 190, 222, 120; }
.wash { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.wash-bg { position: absolute; inset: -20%; filter: saturate(1.2);
  background:
    radial-gradient(42% 55% at 22% 38%, rgba(var(--w1), 0.62), rgba(var(--w1), 0) 70%),
    radial-gradient(38% 50% at 72% 30%, rgba(var(--w2), 0.6), rgba(var(--w2), 0) 70%),
    linear-gradient(180deg, rgb(var(--deep)), rgb(var(--w2))); }
.topo-wash { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(3.5px); opacity: 0.7; mix-blend-mode: multiply; }
.blog-hero { --peek: clamp(150px, 22vh, 240px); min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--nav-h) + 40px) var(--pad) calc(var(--peek) + clamp(28px, 4vh, 48px)); overflow: hidden; }
/* the moss hero: the wash runs dark at the far edge, pools of lighter green blur through the
   middle, and the contours fade out under the nav and into the card so the map never ends on a
   hard line */
.blog-hero[data-wash="moss"] .wash-bg { filter: saturate(1.15);
  background:
    radial-gradient(46% 58% at 18% 42%, rgba(var(--w2), 0.85), rgba(var(--w2), 0) 70%),
    radial-gradient(40% 54% at 76% 28%, rgba(var(--w2), 0.7), rgba(var(--w2), 0) 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(var(--w1), 0.9), rgba(var(--w1), 0) 70%),
    linear-gradient(180deg, rgb(var(--deep)) 0%, rgb(var(--w1)) 45%, rgb(var(--w2)) 100%); }
.wash-pools { position: absolute; inset: -15%; filter: blur(90px); mix-blend-mode: screen; opacity: 0.55;
  background:
    radial-gradient(28% 34% at 30% 30%, rgba(var(--pool, var(--w2)), 0.9), rgba(var(--pool, var(--w2)), 0) 70%),
    radial-gradient(22% 30% at 68% 62%, rgba(var(--pool, var(--w2)), 0.75), rgba(var(--pool, var(--w2)), 0) 70%),
    radial-gradient(18% 24% at 82% 18%, rgba(var(--pool, var(--w2)), 0.6), rgba(var(--pool, var(--w2)), 0) 70%);
  }
/* the pools hold still (2026-11-08, speed): their 26 s drift re-blurred a 90 px blur over the whole
   hero every frame, the heaviest thing left on the sub-page heroes on ordinary laptops */
/* the live map: the blurred canvas is the ground, the crisp one over it carries what moves
   (index lines drawing in, the sweep, the pointer lens); both pan together in js */
.blog-hero .topo-live { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%, #000 72%, rgba(0,0,0,0.25) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%, #000 72%, rgba(0,0,0,0.25) 100%); }
.blog-hero .topo-wash { opacity: 0.5; filter: blur(4px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%, #000 72%, rgba(0,0,0,0.25) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%, #000 72%, rgba(0,0,0,0.25) 100%); }
.blog-title { max-width: none; width: 100%; margin: auto 0 0; text-align: center; font-size: clamp(52px, 9.8vw, 160px); font-weight: 600; letter-spacing: -0.045em; line-height: 0.9; color: #f4efe1;  /* a creamier white, after Until (Ryan, 2026-11-06) */ text-wrap: balance;
  text-shadow: 0 2px 40px rgba(10, 40, 22, 0.25); }

/* ---------- the night map (Ryan, 2026-11-06: "the same dark as Our Team, the lines glow in
   the colour they used to be"): every hero on ink, as Our Team's, and the contours carry the
   colour the page's wash used to be — Media green, Roadmap gold, Our Team orange — set by
   data-glow on the hero. The lines are drawn screen-blended over the ink; the blurred ground
   canvas, turned up and blurred wider, is the halo under the crisp lines. Shared here because
   team.css and roadmap.css both load after this sheet. ---------- */
[data-wash="ink"] { --w1: 18, 24, 31; --w2: 36, 44, 54; --deep: 8, 11, 15; --topo: 244, 239, 225; --pool: 64, 78, 94; }
.blog-hero[data-wash="ink"] .wash-bg { filter: saturate(0.6);
  background:
    radial-gradient(46% 58% at 18% 42%, rgba(var(--w2), 0.9), rgba(var(--w2), 0) 70%),
    radial-gradient(40% 54% at 76% 28%, rgba(var(--w2), 0.7), rgba(var(--w2), 0) 70%),
    linear-gradient(180deg, rgb(var(--deep)) 0%, rgb(var(--w1)) 50%, rgb(var(--w2)) 100%); }
.blog-hero[data-wash="ink"] .topo-wash, .blog-hero[data-wash="ink"] .topo-live { mix-blend-mode: screen; }
.blog-hero[data-wash="ink"] .topo-wash { opacity: 0.45; }
.blog-hero[data-wash="ink"] .blog-title { color: #f4efe1; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4); }
/* the glow: the ground canvas is the halo (wide blur, nearly full), the live canvas the filament */
.blog-hero[data-wash="ink"][data-glow] .topo-wash { opacity: 0.9; filter: blur(7px); }
.blog-hero[data-wash="ink"][data-glow] .topo-live { opacity: 1; }
.blog-hero[data-wash="ink"][data-glow] .wash-pools { opacity: 0.35; }
[data-wash="ink"][data-glow="moss"]  { --topo: 150, 216, 104; --pool: 48, 104, 58; }    /* Media's green */
[data-wash="ink"][data-glow="gold"]  { --topo: 250, 206, 72; --pool: 118, 90, 24; }     /* Roadmap's gold */
[data-wash="ink"][data-glow="ember"] { --topo: 255, 138, 66; --pool: 128, 56, 22; }     /* Our Team's orange */
[data-wash="ink"][data-glow="sky"]   { --topo: 126, 190, 255; --pool: 36, 76, 124; }    /* Technology's radio blue (2026-11-07) */
/* the nav over the night map: the same white glass as on the home (Ryan, 2026-11-06), so no overrides here */

/* ---------- sections ---------- */
/* the paper hero (2026-11-06, "one palette, three terrains"): the survey sheet, ink lines
   on the cream, the title in ink, the pools off */
.blog-hero[data-wash="paper"] .blog-title { color: var(--ink); text-shadow: none; }
.blog-hero[data-wash="paper"] .topo-live { opacity: 1; }
.blog-hero[data-wash="paper"] .topo-wash { opacity: 0.6; }
.blog-hero[data-wash="paper"] .wash-pools { display: none; }
.blog-sec { padding: clamp(40px, 6vw, 80px) 0; }
.blog-h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 clamp(18px, 2.4vw, 30px); }
.blog-h2.centre { text-align: center; }

/* ---------- featured: the card that overlaps the hero (Until's updates card) ---------- */
.feat-sec { padding-top: 0; margin-top: calc(-1 * clamp(150px, 22vh, 240px)); position: relative; z-index: 1; }
.feat { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: clamp(22px, 3vw, 40px); align-items: start; padding: clamp(14px, 1.6vw, 20px);
  background: linear-gradient(180deg, rgba(246, 248, 251, 0.96), rgba(251, 251, 249, 0.98)); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 28px;
  box-shadow: 0 1px 0 rgba(16, 21, 27, 0.04), 0 24px 60px -30px rgba(16, 21, 27, 0.25); }
.feat-media { display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--ink); }
.feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the showcase card: the event's Portland banner, framed on Big Pink, with the accelerator's mark */
.feat-media-event { position: relative; }
.feat-media-event picture { display: block; width: 100%; height: 100%; }
.feat-media-event picture img { object-position: 76% 50%; }
.feat-badge { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; margin: 0; }
.feat-badge img { width: 54px; height: auto; object-fit: contain; }
.blog .feat-badge .mono { color: #fff; opacity: 0.92; }
.feat-body { display: flex; flex-direction: column; gap: 12px; padding: clamp(12px, 1.6vw, 22px) clamp(12px, 1.6vw, 22px) clamp(12px, 1.6vw, 22px) 0; min-height: 100%; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tags span { font-family: "Michroma", sans-serif; font-size: 9.5px; letter-spacing: 0.08em; color: var(--ink); padding: 5px 9px; border: 1px solid var(--hair); border-radius: 6px; }
.feat-title { font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 2px 0 0; text-wrap: balance; }
.feat-text { font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 58ch; margin: 0; }
.feat-meta { font-size: 14px; line-height: 1.45; color: var(--muted); margin: 0; }
.feat .btn-solid { align-self: flex-start; margin-top: auto; }   /* padding-top: 0 had the label riding high in the pill (fixed 2026-11-06) */
.feat .feat-meta { margin-bottom: 14px; }

/* ---------- cards ---------- */
.press-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.card { display: grid; grid-template-columns: 1fr 112px; background: #fff; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s, border-color 0.28s; }
a.card:hover { transform: translateY(-3px); border-color: rgba(16, 21, 27, 0.26); box-shadow: 0 16px 30px -20px rgba(16, 21, 27, 0.4); }
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; min-height: 230px; }
.card-title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 0; text-wrap: balance; }
.card-text { font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0; }
.card-source { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.src-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-bright); }
.src-mark { width: 24px; height: auto; }
.ext { color: var(--muted); font-weight: 500; }
.card-strip { background: linear-gradient(180deg, #f3c9a6, #e8722a); }
.strip-ember { background: linear-gradient(160deg, #f7d7bd 0%, #e8722a 60%, #b4541a 100%); }
.strip-field { background: linear-gradient(160deg, #e5e7da 0%, #a9b98c 55%, #6f8a5a 100%); }
/* ---------- stay updated: the socials and the post ticker ---------- */
.stay-sec { overflow: hidden; }
.stay-head { text-align: center; }
.stay-lede { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 44ch; margin: -6px auto 22px; text-wrap: balance; }
.stay-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(28px, 4vw, 48px); }
/* the ticker: one row of post cards sliding left for ever; the row is repeated by js so it can
   loop, and the animation moves it by one copy's width (--loop, set by js) */
.ticker { position: relative; width: 100%; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 140px); z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), rgba(251, 251, 249, 0)); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--bg), rgba(251, 251, 249, 0)); }
.ticker-track { display: flex; gap: 16px; width: max-content; padding: 6px 0 14px; will-change: transform;
  animation: ticker-run var(--dur, 40s) linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes ticker-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--loop, 50%)), 0, 0); } }
.tick { display: flex; flex-direction: column; gap: 10px; width: clamp(280px, 30vw, 380px); flex: none; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--hair); border-radius: 16px; color: var(--ink); text-decoration: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s, border-color 0.28s; }
.tick:hover { transform: translateY(-3px); border-color: rgba(16, 21, 27, 0.26); box-shadow: 0 16px 30px -20px rgba(16, 21, 27, 0.4); }
.tick-title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 0; text-wrap: balance; }
.tick-text { font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0; }
.tick-source { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); padding-top: 8px; }
/* no js: a plain horizontal scroll, no fades to hide the end */
html:not(.js) .ticker { overflow-x: auto; }
html:not(.js) .ticker-track { animation: none; }
html:not(.js) .ticker::before, html:not(.js) .ticker::after { content: none; }

/* ---------- reach out: the climb (2026-11-06) ---------- */
.reach { position: relative; padding: clamp(96px, 13vw, 190px) 0 clamp(110px, 14vw, 200px); overflow: hidden; }
.reach .wash-bg { animation: none; filter: none; background: linear-gradient(180deg, rgb(var(--deep)), rgb(var(--w1)) 60%, rgb(var(--deep))); }
.reach .topo-wash { opacity: 0.3; filter: none; mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 18%, #000 85%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 18%, #000 85%, rgba(0,0,0,0) 100%); }
/* the islands step across a 12-column grid, up the section */
.climb { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); row-gap: clamp(26px, 4vw, 48px); align-items: start; }
.isle-1 { grid-column: 1 / 8; justify-self: start; --rot: 0deg; --d: 0s; }   /* level (was -1.6deg): markers, not speech bubbles */
.isle-2 { grid-column: 4 / 13; justify-self: end; --rot: 0deg; --d: 0.55s; }
.isle-3 { grid-column: 2 / 8; justify-self: start; margin-left: clamp(0px, 6vw, 90px); --rot: 0deg; --d: 1.1s; }
.isle-4 { grid-column: 6 / 13; justify-self: end; margin-right: clamp(0px, 4vw, 60px); --rot: 0deg; --d: 1.65s; }
/* an island: a clean white pill on the map, a hairline and a soft shadow, the text in the site's
   orange, two contour rings that follow the pill's shape (the hill the pill stands on) */
.isle { position: relative; z-index: 1; margin: 0; padding: 0.42em 1em; background: #fff; color: var(--signal);
  font-size: clamp(24px, 3.4vw, 48px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap;
  border-radius: 999px; border: 1px solid rgba(16, 21, 27, 0.1);
  box-shadow: 0 1px 0 rgba(16, 21, 27, 0.04), 0 2px 6px -2px rgba(16, 21, 27, 0.08), 0 22px 44px -26px rgba(16, 21, 27, 0.32);
  transform: rotate(var(--rot)); }
.isle-1 { font-size: clamp(30px, 4.3vw, 60px); }
.isle::before, .isle::after { content: ""; position: absolute; z-index: -1; border-radius: 999px; border: 1px solid rgba(16, 21, 27, 0.2); pointer-events: none; }
.isle::before { inset: -10px -16px; }
.isle::after { inset: -22px -34px; opacity: 0.5; }
/* the summit: the link, the tag, the relay rings */
.summit { display: inline-flex; align-items: center; padding: 0.42em 1.15em; border-color: rgba(232, 114, 42, 0.35); }
.summit a { color: var(--signal-bright); text-decoration: none; transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms; display: inline-block; }
.summit a:hover { color: var(--signal); }
.summit a:active { transform: scale(0.97); transition-duration: 100ms; }
.summit a:focus-visible { outline: 3px solid rgba(232, 114, 42, 0.45); outline-offset: 6px; border-radius: 8px; }
.summit .ring { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: inherit; border: 1.5px solid var(--signal-bright); transform: translate(-50%, -50%) scale(1); opacity: 0; pointer-events: none; z-index: -2; }
.is-on .summit .ring { animation: relay-ring 1.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d) + 0.5s) 1; }
.is-on .summit .ring-2 { animation-delay: calc(var(--d) + 0.85s); }
.summit:hover .ring { animation: relay-ring 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0s 1; }
.summit:hover .ring-2 { animation-delay: 0.3s; }
@keyframes relay-ring { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } }
/* the route: a dashed orange line through the islands, drawn in as the section arrives */
.route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.route-path { stroke: var(--signal-bright); stroke-width: 2; stroke-dasharray: 7 7; stroke-linecap: round; }
.route-reveal { stroke-dasharray: var(--len, 1); stroke-dashoffset: var(--len, 1); transition: stroke-dashoffset 2.1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; }
.is-on .route-reveal { stroke-dashoffset: 0; }
.route-start { fill: var(--signal-bright); opacity: 0; transition: opacity 0.3s; }
.is-on .route-start { opacity: 1; }
/* arrival: each island lands as the route reaches it */
.isle { opacity: 0; transform: translateY(16px) rotate(var(--rot)) scale(0.94); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--d); }
.is-on .isle { opacity: 1; transform: rotate(var(--rot)); }
html:not(.js) .isle { opacity: 1; transform: rotate(var(--rot)); }

@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; border-radius: 22px; }
  .feat-media { aspect-ratio: 16 / 10; border-radius: 14px; }
  .feat-body { padding: 6px 8px 12px; }
  .feat-sec { margin-top: calc(-1 * clamp(90px, 14vh, 150px)); }
  .blog-hero { --peek: clamp(90px, 14vh, 150px); padding-bottom: calc(var(--peek) + 24px); }
  .press-grid { grid-template-columns: 1fr; }
  .tick { width: min(78vw, 320px); }
  .climb { row-gap: 22px; }
  .isle-1, .isle-2, .isle-3, .isle-4 { grid-column: 1 / -1; justify-self: center; margin: 0; white-space: normal; text-align: center; }
  .isle::after { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wash-bg, .wash-pools { animation: none; }
  a.card:hover, .tick:hover { transform: none; }
  .ticker { overflow-x: auto; }
  .ticker-track { animation: none; }
  .ticker::before, .ticker::after { content: none; }
  .isle, .route-reveal, .route-start { transition: none; }
  .isle { transform: rotate(var(--rot)); }
  .is-on .summit .ring, .summit:hover .ring { animation: none; }
}

/* ---------- Updates page (2026-11-08, Ryan: "keep it consistent with Our Team and the Roadmap"):
   the hero is the whole map, the title down at the bottom on the page column, and the showcase
   card sits underneath instead of overlapping it ---------- */
.updates .blog-hero { --peek: 0px; align-items: stretch; padding-bottom: clamp(56px, 9vh, 110px); }
.updates .blog-hero .blog-title { width: 100%; max-width: var(--col); margin: auto auto 0; text-align: left; }
.updates .feat-sec { margin-top: 0; padding-top: clamp(56px, 8vw, 110px); }

/* a creamier page under the cards, so the white cards and islands stand off it (Ryan, 2026-11-08:
   "make the background a little more creamier so the bubbles pop") */
.updates { --bg: #f3eee2; }
.updates .feat { background: #fff; border-color: rgba(16, 21, 27, 0.06); box-shadow: 0 1px 0 rgba(16, 21, 27, 0.04), 0 28px 60px -30px rgba(70, 52, 20, 0.32); }
.updates .card, .updates .tick { box-shadow: 0 1px 0 rgba(16, 21, 27, 0.03), 0 18px 40px -28px rgba(70, 52, 20, 0.3); }
.updates .ticker::before { background: linear-gradient(90deg, var(--bg), rgba(243, 238, 226, 0)); }
.updates .ticker::after { background: linear-gradient(270deg, var(--bg), rgba(243, 238, 226, 0)); }
.updates .reach[data-wash="paper"], .updates .reach [data-wash="paper"] { --w1: 243, 238, 226; --w2: 243, 238, 226; --deep: 238, 231, 214; }

/* phones (Ryan, 2026-11-08): the section heroes' titles bigger; 16.5vw keeps "Technology", the
   longest single word, inside the gutters at 390px */
@media (max-width: 700px) { .blog-title { font-size: 16.5vw; } }
/* phones (2026-11-08 audit): the press cards' colour panel becomes a band across the top, so the
   text gets the card's full width instead of a narrow column */
@media (max-width: 700px) {
  .card { grid-template-columns: 1fr; }
  .card-strip { order: -1; height: 10px; }
  .card-body { min-height: 0; }
}

/* Speed and the hero edges (Ryan, 2026-11-08: "really slow and laggy" on a phone, and "a faded
   effect in the sides" of the section heroes). The colour wash under each hero map was blurred
   70px and drifted forever: the blur pulled a pale haze in at the screen edges, and a phone had
   to re-blur the whole screen on every frame of the drift. The wash is plain soft gradients now
   and holds still (the blur and the drift are gone at every width). On phones the drifting,
   90px-blurred, screen-blended light pools are off too; the map lines keep their glow. */
@media (max-width: 1023px) {
  .wash-pools { display: none; }
}