/* ===================================================================
   The whole site's stylesheet.

   It was inline in index.html until 2026-09-17, which was right while the
   site was one page: no extra request, nothing to cache. The moment a
   second page existed, inline meant two copies of the palette, and a
   palette in two places is a palette that drifts. So it moved out here,
   where every page links the same one and the browser fetches it once.

   Font URLs below are relative to THIS file, which sits at the root, so
   `fonts/...` resolves the same no matter how deep the page linking it
   is. Page `preload` hints are not: those are relative to the page, so
   they are written absolute, as `/fonts/...`.
   =================================================================== */
/* ==================================================================
     THE FONTS ARE SERVED FROM THIS DOMAIN (2026-09-17).

     They used to come from fonts.googleapis.com, three tags in the head
     that produced four requests per visit to Google's servers. None of
     them set a cookie, so none of them needed a consent banner, but every
     one carried the visitor's IP address to Google. A Munich court ruled
     in January 2022 that embedding Google Fonts that way breached the
     GDPR, and a wave of warning letters followed in Germany. The owner
     asked for self-hosting on 2026-09-17 rather than carry that.

     Both families are SIL Open Font License 1.1, which permits exactly
     this: see fonts/OFL.md for the terms and where each one came from.

     LATIN AND LATIN-EXT ONLY. Google also serves cyrillic, greek and
     vietnamese cuts of both. This page is English, and unicode-range
     means a browser downloads only the cuts the glyphs on the page
     actually need, so the others would have been bytes in the repo that
     nobody ever fetched. If the site is ever translated, re-cut from the
     same source rather than hand-editing these blocks.

     Inter arrives as ONE variable file per subset covering 400 to 700,
     which is why four weights need one @font-face and not four.
     ================================================================== */
  /* IBM Plex Mono 400, latin-ext */
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/ibm-plex-mono-400-latin-ext.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;
  }
  /* IBM Plex Mono 400, latin */
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/ibm-plex-mono-400-latin.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;
  }
  /* IBM Plex Mono 500, latin-ext */
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/ibm-plex-mono-500-latin-ext.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;
  }
  /* IBM Plex Mono 500, latin */
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/ibm-plex-mono-500-latin.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;
  }
  /* Inter 400 700, latin-ext */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/inter-variable-latin-ext.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;
  }
  /* Inter 400 700, latin */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/inter-variable-latin.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;
  }

  /* ------------------------------------------------------------------
     Tokens from the app's own globals.css. The focus colours are not
     decoration here: they are the mosaic's own tile colours, and each
     feature section is headed in one of them, so the page is coloured by
     the product rather than by a brand palette invented for a website.
     ------------------------------------------------------------------ */
  :root {
    --paper:    #f5f4f0;
    --surface:  #ffffff;
    --sunken:   #efeee9;
    --grout:    #cdc7ba;
    --hairline: #ded8cb;
    --ink:      #2e2c2b;
    --ink-soft: #6f6b66;
    --gold:     #c9a227;

    --f-teal:   #3f6f6d;
    --f-plum:   #7d4a63;
    --f-clay:   #a85a3c;
    --f-forest: #4a5f3a;
    --f-indigo: #3d4a72;
    --f-slate:  #415065;
    /* Gold for TEXT. --gold is 2.2:1 on paper and fails even the
       large-text floor; this is the app's Cup Meter full band, at 4.6:1. */
    --gold-ink: #8a6a10;
    /* Barn red. #830b00 is the app's own deep red, out of the emblem
       palette, and carries 9.5:1 on paper. The dark pair is that same
       palette's blush at 6.6:1. The band was indigo until 2026-09-17,
       when the owner found it too close to the add-ons blue. */
    --f-barn:   #830b00;

    --accent:   var(--f-teal);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper:    #1a1917;
      --surface:  #232120;
      --sunken:   #232120;
      --grout:    #4a4640;
      --hairline: #3a3733;
      --ink:      #ece9e2;
      --ink-soft: #a8a29a;
      --gold:     #d4a93a;
      --f-teal:   #6fada9;
      --f-plum:   #c084a0;
      --f-clay:   #d9885f;
      --f-forest: #8aac6e;
      --f-indigo: #8494c4;
      --f-slate:  #8492b8;
      --gold-ink: #d4a93a;
      --f-barn:   #d48b89;
    }
  }
  :root[data-theme="dark"] {
    --paper:    #1a1917;
    --surface:  #232120;
    --sunken:   #232120;
    --grout:    #4a4640;
    --hairline: #3a3733;
    --ink:      #ece9e2;
    --ink-soft: #a8a29a;
    --gold:     #d4a93a;
    --f-teal:   #6fada9;
    --f-plum:   #c084a0;
    --f-clay:   #d9885f;
    --f-forest: #8aac6e;
    --f-indigo: #8494c4;
    --f-slate:  #8492b8;
    --gold-ink: #d4a93a;
    --f-barn:   #d48b89;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { margin: 0; text-wrap: balance; }
  p, ul { margin: 0; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  .wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.75rem; }

  /* --- the top bar, where a marketing site keeps its nav ----------- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
  }
  .topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 4.25rem;
  }
  .wordmark {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-indent: .28em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }
  .topbar nav { display: flex; align-items: center; gap: 1.75rem; }
  .topbar nav a {
    font-size: .875rem;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .15s;
  }
  .topbar nav a:hover { color: var(--ink); }
  .topbar nav a.enter { color: var(--ink); font-weight: 500; }
  @media (max-width: 640px) {
    .topbar nav a:not(.enter) { display: none; }
  }

  /* --- hero -------------------------------------------------------- */
  .hero { padding: 1.25rem 0 3rem; text-align: center; }
  /* The emblem. The owner's own logo file is what the server sends, and
     hourglass.js swaps it for the app's live mosaic once it has built one.
     Both wear this rule, so the swap costs no layout shift. */
  .emblem {
    display: block;
    margin: 0 auto 1.5rem;
    height: clamp(120px, 19vw, 168px);
    width: auto;
  }

  /* ==================================================================
     THE LIVE EMBLEM, ported from the app 2026-09-17 with hourglass.js.
     These rules are the app component's own <style> block, with its
     Tailwind tokens mapped onto this site's: --color-gold is --gold and
     --color-grout is --grout. The sizing is this page's, not the app's:
     the app sits at min(22vw, 120px) inside its own layout, and the hero
     here already had a size that the copy underneath is spaced against.

     The app's wordmark-reveal is deliberately absent. There, the tagline
     is a child of the emblem and fades in after the pour. Here the
     headline, the hook and Start Capturing are in the HTML and visible at
     once: a stranger who leaves in two seconds must still have read the
     offer, and gating the button behind an animation would also hand the
     largest contentful paint to a timer.
     ================================================================== */
  svg.emblem-live {
    width: auto;
    transform-origin: 50% 50%;
    transition: transform 1.1s cubic-bezier(.66, -0.22, .28, 1.24);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
  }
  svg.emblem-live:focus { outline: none; }
  svg.emblem-live:focus-visible {
    outline: 2px solid var(--accent, var(--gold-ink));
    outline-offset: 6px;
    border-radius: .35rem;
  }
  .emblem-live .hourglass-outline {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.25;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity .7s ease-out;
  }
  svg.emblem-live.in .hourglass-outline { opacity: 1; }
  .emblem-live .piece {
    stroke: var(--grout);
    stroke-width: .5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
    transition: transform .75s cubic-bezier(.16, .9, .28, 1), opacity .5s ease-out;
    transition-delay: var(--delay), var(--delay);
  }
  svg.emblem-live.in .piece { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  svg.emblem-live.settled .piece {
    transition: transform var(--drain-time) cubic-bezier(.42, 0, .62, 1),
                fill var(--drain-time) ease;
    transition-delay: var(--drain-delay), var(--drain-delay);
  }
  svg.emblem-live.drain .piece { transform: translate(var(--dx), var(--dy)) rotate(180deg); }
  @media (prefers-reduced-motion: reduce) {
    svg.emblem-live,
    .emblem-live .piece,
    .emblem-live .hourglass-outline { transition: none !important; }
  }
  /* The tagline leads and wears the display face; the hook follows it in
     the quiet one. Swapped 2026-09-16 at the owner's word, both the order
     and the treatment: what defines the product is what a visitor should
     meet first and largest. */
  .hero h1 {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 400;
    font-size: clamp(1.6rem, 4.2vw, 2.5rem);
    line-height: 1.22;
    letter-spacing: -.01em;
    margin: 0;
  }
  /* THE APP'S RULE, copied rather than invented (owner, 2026-09-17).
     timemosaic.app's landing marks each turn of the page with the same
     element: one pixel tall, two rem wide, the exhibition gold at 70%.
     Punctuation rather than a divider, which is why it is short: a full
     width line would claim the two things it sits between are unrelated
     sections, when the point is that they are one thought broken in two.

     The app uses the same element at more than one turn of its page, and
     so does this one now: inside the h1, and again where the header ends
     and the sections begin. One kind of line, two placements, which is
     the whole reason it was copied instead of drawn. */
  .rule {
    display: block;
    width: 2rem;
    height: 1px;
    background: var(--gold);
    opacity: .7;
    margin-inline: auto;
  }
  .hero h1 .rule { margin-block: 1.15rem 1rem; }
  /* No margin of its own: it sits in the gap the hero's padding and the
     first row's padding already leave, so the turn is marked without the
     page growing. */
  .rule-section { margin-block: 0; }
  .hero h1 .quiet { display: block; color: var(--ink-soft); }
  .hook {
    margin: 1.75rem auto 0;
    max-width: 34rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .hook span { display: block; }
  .hook .lead { color: var(--ink); }
  .cta {
    display: inline-block;
    margin-top: 2.5rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: .55rem;
    padding: .95rem 2rem;
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform .15s, opacity .15s;
  }
  .cta:hover { transform: translateY(-1px); opacity: .9; }
  /* The closing entrance: the last thing before the footer, with the same
     fine print the first one carries. */
  .closing { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5rem); text-align: center; }
  .closing .cta { margin-top: 0; }
  .fineprint {
    margin-top: 1rem;
    font-size: .8125rem;
    color: var(--ink-soft);
  }
  .fineprint strong { font-weight: 600; }

  /* --- the hero's picture, once there is one ----------------------- */
  .hero-art { max-width: 44rem; margin: 0 auto; }
  .hero-art .shot { min-height: 22rem; }

  /* --- alternating feature rows, Bear's shape ---------------------- */
  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    padding: clamp(3.5rem, 7vw, 6rem) 0;
  }
  .row.flip .row-text { order: 2; }
  .kicker {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .85rem;
  }
  .row h2, .band h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--accent);
  }
  .bullets {
    list-style: none;
    padding: 0;
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
  }
  .bullets li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--ink-soft);
    line-height: 1.6;
  }
  .bullets li strong { font-weight: 600; }
  .bullets li strong.ink { color: var(--ink); }
  .bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
  }

  /* --- a screenshot that does not exist yet, holding its place ----- */
  .shot {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: .9rem;
    min-height: 17rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .4rem;
  }
  .shot .tag {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .5625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .shot .what { font-size: .9375rem; font-weight: 500; }
  .shot .how {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .6875rem;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  /* --- features: full width, because a list of them is not a picture
         beside a paragraph ------------------------------------------- */
  .features { padding: clamp(3rem, 6vw, 5rem) 0; }
  .features h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--accent);
  }
  /* Two columns at width: five short lines down one side of a 68rem page
     would read as a column of scraps. */
  .features .bullets {
    margin-top: 1.75rem;
    max-width: none;
  }
  @media (min-width: 800px) {
    .features .bullets {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .85rem 3rem;
    }
  }

  /* --- the add-ons rail, in a dialog ------------------------------- */
  /* Filled in the section's own accent rather than in ink: the one ink
     button on the page is the entrance, and this is not it. */
  .button-fill {
    margin-top: 1.75rem;
    display: inline-block;
    background: var(--accent);
    color: var(--paper);
    border: 0;
    border-radius: .55rem;
    padding: .85rem 1.6rem;
    font: inherit;
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform .15s, opacity .15s;
  }
  .button-fill:hover { transform: translateY(-1px); opacity: .9; }
  /* A sheet of prose, sharing the rail dialog's shell. */
  dialog.sheet {
    width: min(34rem, 92vw);
    max-height: 85dvh;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: .9rem;
    background: var(--paper);
    color: var(--ink);
    overflow: hidden;
  }
  /* ONLY WHEN OPEN. A bare `display: flex` on the dialog overrides the UA's
     `dialog:not([open]) { display: none }`, and the closed sheet renders
     inline in the page instead of disappearing. */
  dialog.sheet[open] { display: flex; flex-direction: column; }
  dialog.sheet::backdrop { background: rgb(0 0 0 / .45); }
  .sheet-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .sheet-body h3 {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: .5rem;
  }
  .sheet-body p {
    font-size: .875rem;
    line-height: 1.65;
    color: var(--ink-soft);
  }
  .sheet-body p + p { margin-top: .7rem; }

  dialog.addons {
    width: min(64rem, 92vw);
    max-height: 86vh;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: .9rem;
    background: var(--paper);
    color: var(--ink);
    overflow: hidden;
  }
  dialog.addons::backdrop { background: rgb(0 0 0 / .45); }
  .addons-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.75rem 1rem;
  }
  .addons-head h2 { font-size: 1.25rem; font-weight: 600; }
  /* A drawn cross rather than the letter x or a multiplication sign:
     two strokes stay square at any size and read the same in both themes. */
  .addons-close {
    background: none;
    border: 0;
    padding: .4rem;
    margin: -.4rem;
    line-height: 0;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: .35rem;
    transition: color .15s;
  }
  .addons-close:hover { color: var(--ink); }
  /* One rail, scrolled sideways, one card at a time on a phone. */
  .rail {
    --accent: var(--f-slate);
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1.75rem 1.75rem;
    /* WITHOUT THIS the rail opens already scrolled by exactly its own
       padding: snap-align start measures from the scrollport edge, not
       from the padded edge, so the browser pulls the first card flush and
       eats the gutter. scroll-padding moves the snap line in to match, so
       the first card lines up with the heading above it. */
    scroll-padding-inline: 1.75rem;
    -webkit-overflow-scrolling: touch;
  }
  .rail figure {
    margin: 0;
    flex: 0 0 17rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: .85rem;
  }
  .rail .shot { min-height: 11rem; }
  /* The wrapper lays out no box of its own: its children go straight
     into the rail's flex line, so a group can hold one --accent while its
     cards stay snap targets in their own right. */
  .rail-group { display: contents; }
  .rail-title {
    flex: 0 0 9.5rem;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    padding-right: 1.25rem;
    border-right: 1px solid var(--hairline);
  }
  .rail-title h3 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.15;
    color: var(--accent);
  }
  .rail figcaption { display: flex; flex-direction: column; gap: .3rem; }
  .rail figcaption h4 { font-size: 1rem; font-weight: 600; }
  .rail p { font-size: .9375rem; color: var(--ink-soft); line-height: 1.5; }
  @media (max-width: 640px) {
    .rail figure { flex-basis: 78vw; }
    .rail-title { flex-basis: 8rem; }
  }

  /* --- the encryption band, given its own ground ------------------- */
  .band {
    --accent: var(--f-barn);
    background: color-mix(in srgb, var(--f-barn) 6%, var(--paper));
    border-top: 1px solid color-mix(in srgb, var(--f-barn) 14%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--f-barn) 14%, transparent);
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  }
  .band .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .band .bullets { margin-top: 0; }

  /* ================================================================
     TEMPORARY, 2026-09-17. "can we just hide the image placeholders for
     now until I get to it Friday."

     All twenty-one empty frames go: the hero's, the five section ones,
     and the fifteen in the add-ons rail. The layout closes over them
     rather than leaving five half-empty rows, so the rows drop to one
     column and the text is held to a readable measure instead of running
     the full container.

     DELETE THIS WHOLE BLOCK to bring the frames back. Nothing outside it
     was touched, so the alternating two-column rhythm returns on its own.
     ================================================================ */
  .shot { display: none; }
  .hero-art { display: none; }
  .row {
    grid-template-columns: 1fr;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
  }
  .row .row-text { max-width: 34rem; }
  .rail figure { gap: 0; }
  /* ============ end of the temporary block ======================== */

  /* --- the definition, one layer in ------------------------------- */
  .definition { padding: clamp(3rem, 6vw, 5rem) 0; }
  .definition h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 600;
    letter-spacing: -.015em;
    max-width: 40rem;
  }
  .definition p {
    margin-top: 1.25rem;
    max-width: 40rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .definition cite {
    display: block;
    margin-top: 1rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .6875rem;
    letter-spacing: .1em;
    color: var(--ink-soft);
    font-style: normal;
  }

  /* --- footer ------------------------------------------------------ */
  /* ==================================================================
     THE GUIDE PAGES, added 2026-09-17.

     A what/how page is a different job from the landing page. It is read
     rather than scanned, by someone who arrived from a search knowing
     nothing about this product, so it is one column of prose at a
     readable measure and not a grid of sections in six colours.

     The hub at /features/ lists them. Each entry wears the accent of the
     feature it belongs to, which is the only place the two layouts share
     a language.
     ================================================================== */
  .page-head { padding: clamp(3rem, 6vw, 4.5rem) 0 0; }
  .page-head h1 {
    font-size: clamp(1.9rem, 3.8vw, 2.75rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.02em;
    max-width: 22ch;
    color: var(--accent, var(--ink));
  }
  .page-head .standfirst {
    margin-top: 1.1rem;
    max-width: 34rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  /* The hub's list. auto-fit rather than a fixed count, so adding a
     seventh guide needs no CSS. */
  .guide-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3.5rem, 7vw, 5rem);
    padding: 0;
    list-style: none;
  }
  .guide-list a {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    height: 100%;
    padding: 1.4rem 1.5rem;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
    border-radius: .9rem;
    transition: transform .15s, border-color .15s;
  }
  .guide-list a:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .guide-list h2 { font-size: 1.0625rem; font-weight: 600; color: var(--accent); }
  .guide-list p { font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }

  /* One column of prose, held to a measure a person will actually read. */
  .prose { max-width: 38rem; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
  .prose h2 {
    margin-top: clamp(2.25rem, 4vw, 3rem);
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--accent, var(--ink));
  }
  .prose h3 {
    margin-top: 1.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .prose p, .prose li { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }
  .prose p { margin-top: 1rem; }
  .prose ul { margin-top: 1rem; padding-left: 1.2rem; }
  .prose li { margin-top: .5rem; }
  .prose strong { color: var(--ink); font-weight: 600; }

  /* The closing hand-off. A guide page is a front door: somebody landed
     here from a search knowing nothing, and it must not dead-end. */
  .handoff {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 2rem;
    border-top: 1px solid var(--hairline);
  }

  /* TEMPORARY, the same shape as the image placeholders: a slot the owner
     fills. Delete each .todo as its section gets written, and the
     `noindex` in that page's head with the last one. */
  .todo {
    margin-top: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
  }
  .todo p { margin: 0; font-size: .9375rem; color: var(--ink-soft); }
  .todo .tag {
    display: block;
    margin-bottom: .35rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .5625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
  }

  footer.site { border-top: 1px solid var(--hairline); padding: 2.5rem 0 3.5rem; }
  footer.site .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.75rem;
    align-items: center;
    justify-content: center;
  }
  footer.site a, footer.site span {
    font-size: .8125rem;
    color: var(--ink-soft);
    text-decoration: none;
  }
  footer.site a:hover { color: var(--ink); }

  @media (max-width: 800px) {
    .row, .band .grid { grid-template-columns: 1fr; }
    .row.flip .row-text { order: 0; }
    .shot { min-height: 13rem; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }