:root {
    /* Surfaces. Names kept from the dark build so existing rules flip with the
       token; the values are now warm paper rather than ink. */
    --ink: #F7F4ED;        /* page ground */
    --ink-2: #F0EBE0;      /* recessed band */
    --panel: #FFFFFF;      /* cards, tiles, popovers */
    --panel-2: #F3EEE3;    /* chips, secondary buttons */

    /* Ink on paper */
    --text: #17253C;
    --muted: #525D6A;
    --border: #E2DCCC;

    /* Accents, darkened so they hold contrast on a light ground */
    --gold: #9A7638;
    --gold-text: #77561D;
    --gold-soft: #C9A961;  /* decorative only: rings, glows, hairlines */
    --rose: #A0563D;
    --green: #4E7351;

    /* The one place that stays dark on purpose: the daily ritual, the
       share stage, and the footer. */
    --night: #16233A;
    --night-2: #1E2E49;
    --night-border: #33456A;
    --on-night: #F2EFE7;
    --on-night-muted: #9BA0B0;
    --on-gold: #17140C;    /* text sitting on a gold fill */

    --measure: 1120px;

    /* ---------- Motion ----------
       Two curves and three durations, used everywhere. The built-in CSS
       easings are too weak to read as deliberate; these are the strong
       versions. Anything that enters or leaves uses --ease-out; anything
       that moves across the screen uses --ease-in-out. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --dur-press: 120ms;
    --dur-hover: 180ms;
    --dur-ui: 240ms;

    /* Paper grain. Rendered once by the browser from ~400 bytes of SVG, so it
       costs no request and no image weight. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background-color: var(--ink);
    background-image: var(--grain);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--gold); color: var(--ink); }

  a { color: var(--gold-text); }

  h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; margin: 0; }

  .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
  [contenteditable]:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 3px;
  }


  /* Shown only when scripts are unavailable; the board needs them. */
  .add-count {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: 0.04em; color: var(--muted); margin-top: 6px;
    max-width: 22ch; line-height: 1.45;
  }
  .add-tile.is-full { cursor: default; border-style: solid; opacity: 0.75; }
  .add-tile.is-full:hover { border-color: var(--border); background: transparent; }

  .noscript-note {
    max-width: 640px; margin: 0 auto 26px; padding: 16px 20px;
    background: var(--panel-2); border: 1px solid var(--border);
    border-left: 3px solid var(--gold); border-radius: 10px;
    color: var(--text); font-size: 15px; line-height: 1.6;
  }
  .noscript-note b { display: block; margin-bottom: 4px; }

  .skip {
    position: absolute; left: -9999px;
    background: var(--text); color: #F7F4ED;
    font-weight: 600; text-decoration: none;
    padding: 10px 18px; border-radius: 0 0 10px 0; z-index: 200;
  }
  .skip:focus { left: 0; top: 0; }


  /* ---------- Mobile hero logo ---------- */

  .hero-logo { display: none; }

  .hero-logo-svg {
    width: 108px; height: auto; color: var(--gold-text);
    display: block; margin: 0 auto 22px;
  }

  /* ---------- Installed app mode ----------
     Launched from the home screen the person has already chosen this,
     so the marketing hero is noise. Collapse it and open on the board. */

  @media (display-mode: standalone) {
    /* open straight on the board, but leave every section reachable
       so nothing linked from the nav or footer becomes a dead end */
    .hero { display: none; }
    .app-shell { padding-top: 26px; }
    .site-foot { padding: 32px 0 44px; }

    /* the status bar is translucent here, so the header sits underneath it
       unless it reserves that space itself */
    .site-head { padding-top: env(safe-area-inset-top, 0px); }

    /* overlays are fixed to the viewport, so they need the inset too */
    .overlay, .share-overlay { padding-top: max(24px, env(safe-area-inset-top, 0px)); }
    .poster-bar { padding-top: max(14px, env(safe-area-inset-top, 0px)); }
  }

  /* iPhone notch and home indicator */
  @supports (padding: max(0px)) {
    .site-head .wrap, .wrap {
      padding-left: max(24px, env(safe-area-inset-left));
      padding-right: max(24px, env(safe-area-inset-right));
    }
    body { padding-bottom: env(safe-area-inset-bottom); }
    .overlay { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  }

  /* ---------- Site header ---------- */

  .site-head {
    border-bottom: 1px solid var(--border);
    /* Opaque enough that text passing underneath doesn't smear through it.
       At 0.88 dark type showed as a grey haze in the bar, and over the
       night-coloured sections the whole bar went muddy. */
    background: rgba(247, 244, 237, 0.95);
    backdrop-filter: blur(14px) saturate(1.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
    position: sticky; top: 0; z-index: 60;
    /* State indication only: once you have left the top, the bar tightens and
       picks up a shadow. Small enough to register without being watched. */
    transition: box-shadow var(--dur-ui) var(--ease-out),
                border-color var(--dur-ui) var(--ease-out);
    border-bottom-color: transparent;
  }
  .site-head.is-stuck {
    border-bottom-color: var(--border);
    box-shadow: 0 1px 0 rgba(23,37,60,0.04), 0 10px 30px -18px rgba(23,37,60,0.30);
  }

  .site-head .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; height: 72px;
    transition: height var(--dur-ui) var(--ease-out);
  }
  .site-head.is-stuck .wrap { height: 58px; }

  .brand-mark { transition: transform var(--dur-ui) var(--ease-out); }
  .site-head.is-stuck .brand-mark { transform: scale(0.88); }

  .brand {
    display: flex; align-items: center; gap: 9px;
    font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600;
    color: var(--text); text-decoration: none; letter-spacing: -0.01em;
  }

  .brand-mark {
    width: 30px; height: auto; flex: none;
    color: var(--gold-text);
    display: block;
  }

  .head-links { display: flex; gap: 2px; align-items: center; }

  .head-links a {
    font-size: 13.5px; color: var(--muted); text-decoration: none;
    padding: 8px 4px; margin: 0 9px; border-radius: 0; position: relative;
    transition: color 0.18s ease;
    white-space: nowrap;
  }
  /* a rule that grows out from the centre, rather than a box that pops in */
  .head-links a:not(.head-cta)::after {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px;
    height: 1.5px; background: var(--gold); border-radius: 2px;
    transition: left 0.24s cubic-bezier(.2,.7,.3,1), right 0.24s cubic-bezier(.2,.7,.3,1);
  }
  .head-links a:not(.head-cta):hover { color: var(--text); }
  .head-links a:not(.head-cta):hover::after { left: 4px; right: 4px; }

  /* the page you are on, marked quietly rather than with a heavy state */
  .head-links a[aria-current="page"] { color: var(--text); }
  .head-links a[aria-current="page"]:not(.head-cta)::after { left: 4px; right: 4px; }

  .head-cta {
    margin-left: 14px;
    font-weight: 600; font-size: 13.5px;
    color: #F7F4ED !important;
    background: var(--text);
    border: 1px solid var(--text);
    border-radius: 100px !important;
    padding: 9px 20px !important;
    transition: transform var(--dur-hover) var(--ease-out),
                box-shadow var(--dur-hover) var(--ease-out),
                background var(--dur-hover) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .head-cta:hover {
      background: #21334F !important;
      border-color: #21334F;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -8px rgba(22,35,58,0.34);
    }
  }
  .head-cta:active { transform: translateY(0) scale(0.98); transition-duration: var(--dur-press); }


  /* ---------- Mobile navigation ---------- */

  .nav-toggle {
    display: none;
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text); cursor: pointer;
    align-items: center; justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .nav-toggle:hover { background: #EAE2D2; border-color: var(--muted); }
  .nav-toggle svg { width: 19px; height: 19px; }
  .nav-toggle svg:last-child { display: none; }
  .site-head.nav-open .nav-toggle svg:first-child { display: none; }
  .site-head.nav-open .nav-toggle svg:last-child { display: block; }

  .nav-scrim {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(7,9,14,0.5); display: none;
  }
  .site-head.nav-open .nav-scrim { display: block; }

  @media (max-width: 720px) {
    .site-head .wrap { position: relative; }

    /* the links become a panel the toggle opens, rather than vanishing */
    .head-links {
      display: none;
      position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
      flex-direction: column; align-items: stretch; gap: 2px;
      min-width: 216px; padding: 8px;
      background: #FFFFFF; border: 1px solid var(--border); border-radius: 14px;
      box-shadow: 0 20px 46px rgba(72,60,36,0.18), 0 2px 6px rgba(72,60,36,0.08);
      animation: menuIn 0.14s ease-out;
    }
    .site-head.nav-open .head-links { display: flex; }

    /* these were hidden on mobile; inside the panel they belong again */
    .head-links a.nav-hide { display: block; }

    .head-links a {
      padding: 12px 13px; font-size: 14.5px; border-radius: 9px;
    }
    .head-links a[aria-current="page"]::after { left: 13px; right: auto; width: 18px; bottom: 6px; }

    .head-cta {
      margin-left: 0; margin-top: 6px; text-align: center;
      padding: 12px 18px !important;
    }

    .nav-toggle { display: inline-flex; }
  }

  /* ---------- Shared: eyebrow + buttons ---------- */

  .eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-text); margin-bottom: 18px;
  }

  .btn-primary {
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
    background: var(--text); color: #F7F4ED; border: none;
    padding: 16px 32px; border-radius: 100px; cursor: pointer;
    text-decoration: none; display: inline-block; letter-spacing: -0.005em;
    transition: transform 0.18s cubic-bezier(.2,.7,.3,1), box-shadow 0.18s ease, background 0.18s ease;
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    background: #21334F;
    box-shadow: 0 12px 30px rgba(22,35,58,0.24);
  }

  .btn-ghost {
    font-size: 15px; color: var(--text); text-decoration: none;
    padding: 16px 26px; border-radius: 100px;
    border: 1px solid var(--border); background: rgba(255,255,255,0.6);
    display: inline-block;
    transition: transform 0.18s cubic-bezier(.2,.7,.3,1), border-color 0.18s ease, background 0.18s ease;
  }
  .btn-ghost:hover {
    transform: translateY(-2px);
    border-color: #CFC5AE; background: #FFF;
  }

  /* ---------- Hero ---------- */
  /* Centred statement, then the board itself pinned up underneath it like a
     real wall. The wall is the thesis: you should see the product before you
     read a word about it. */

  .hero { position: relative; padding: 76px 0 0; overflow: hidden; }

  .hero::before {
    content: ""; position: absolute; inset: -30% 0 auto 0; height: 620px;
    background:
      radial-gradient(ellipse 48% 46% at 50% 26%, rgba(192,157,99,0.22), transparent 68%),
      radial-gradient(ellipse 36% 38% at 84% 12%, rgba(201,123,101,0.13), transparent 70%);
    pointer-events: none;
  }

  /* ---------- The stage ----------
     The headline and the wall of cards used to be two stacked bands with a
     few hundred pixels of empty paper between them, which pushed the cards
     under the fold and left the first screen carrying a hole. They now share
     one grid cell, so the type sits IN the photographs rather than above
     them. The cards are arranged as a valley: outer ones ride high, the
     inner ones drop well below the text, which is what keeps the middle
     column clear enough to read without dimming anything. */
  .hero-stage { display: grid; }
  .hero-stage > * { grid-area: 1 / 1; }

  .hero-head {
    position: relative; z-index: 3;
    text-align: center; max-width: 880px;
    align-self: start; justify-self: center;
    padding-top: 8px;
    /* the cards behind must stay clickable-through; nothing here is */
    pointer-events: none;
  }
  .hero-head a, .hero-head button { pointer-events: auto; }

  .hero h1 {
    font-family: 'Fraunces', serif;
    font-size: clamp(40px, 6.6vw, 76px);
    font-weight: 600; line-height: 1.01; letter-spacing: -0.033em;
    margin: 16px auto 22px; max-width: 15ch; text-wrap: balance;
  }
  .hero h1 em { font-style: italic; color: var(--gold); }

  .hero-sub {
    font-size: clamp(16px, 1.9vw, 19.5px); line-height: 1.6;
    color: #4C4740; max-width: 52ch; margin: 0 auto 32px;
  }

  .hero-cta {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 26px;
  }

  .trust {
    list-style: none; margin: 0 auto; padding: 0; max-width: var(--measure);
    display: flex; gap: 10px 40px; flex-wrap: wrap; justify-content: center;
    font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
    letter-spacing: 0.04em; color: #6B6456;
  }
  /* A hairline reads as a separator; "//" reads as decoration borrowed from
     a code editor, which is not what this site is. */
  .trust li + li { border-left: 1px solid var(--border); padding-left: 40px; }


  /* ---------- Fact chips ----------
     The reference floats social-proof counters on its hero. These carry
     product facts instead, because there is no user count this site can
     honestly claim and inventing one would be the whole problem with that
     pattern. Same card material as the pins so they read as part of the
     wall rather than as interface pasted on top of it. */
  .fact {
    position: absolute; z-index: 5;
    display: flex; align-items: baseline; gap: 9px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 12px 18px 13px;
    box-shadow: 0 18px 40px -20px rgba(74,60,36,0.34), 0 2px 5px rgba(74,60,36,0.07);
    white-space: nowrap;
  }
  .fact b {
    font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 27px;
    line-height: 1; letter-spacing: -0.02em; color: var(--text);
  }
  .fact span {
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  }
  .fact-a { left: 2%;  top: 330px; transform: rotate(-1.5deg); }
  .fact-b { right: 2%; top: 330px; transform: rotate(1.5deg); }

  /* ---------- The facts band ----------
     This line used to be a fifth element inside the hero, which is one more
     than a hero should carry. It reads better here anyway: the hero makes
     the promise, this answers the first four objections. */
  .hero-facts {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 17px 24px;
    background: color-mix(in srgb, var(--ink-2) 55%, transparent);
  }

  /* Once the row wraps, the separator on the first item of the second line
     has nothing to its left and reads as a stray stroke. Below this width
     the gaps do the separating on their own. */
  @media (max-width: 760px) {
    .trust { gap: 8px 22px; }
    .trust li + li { border-left: 0; padding-left: 0; }
  }

  /* ---------- The wall ---------- */

  .hero-wall {
    position: relative; z-index: 1;
    align-self: end;
    padding-bottom: 26px;
    /* let the outer cards bleed past the measure without a scrollbar */
    overflow: hidden;
  }
  .wall-inner {
    position: relative; height: 730px;
    max-width: 1320px; margin: 0 auto;
  }

  .pin {
    position: absolute; margin: 0; width: 186px;
    background: #FFF; padding: 11px 11px 0;
    border: 1px solid #EDE7DA;
    box-shadow: 0 22px 44px rgba(74,60,36,0.16), 0 2px 5px rgba(74,60,36,0.08);
    transition: transform 0.42s cubic-bezier(.2,.7,.3,1), box-shadow 0.42s ease;
    will-change: transform;
  }
  .pin .shot {
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 1/1;
    background-size: cover; background-position: center;
    text-align: center; padding: 0;
  }
  .pin figcaption {
    font-family: 'Fraunces', serif; font-size: 11.5px; line-height: 1.32;
    color: #37322A; text-align: center; padding: 11px 4px 13px;
  }
  .pin .tape {
    position: absolute; top: -9px; left: 50%; width: 64px; height: 20px;
    background: rgba(236,232,222,0.92); border: 1px solid rgba(0,0,0,0.045);
    transform: translateX(-50%) rotate(-3deg);
  }
  .pin .stamp {
    position: absolute; top: 40%; left: 50%; z-index: 3;
    transform: translate(-50%,-50%) rotate(-11deg);
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: #3B6B45;
    border: 2px solid #3B6B45; border-radius: 5px; padding: 4px 9px;
    background: rgba(255,255,255,0.92); white-space: nowrap;
  }

  /* words-only pins: the same card, carrying type instead of a photo */
  .pin.words .shot {
    padding: 16px;
    background: linear-gradient(158deg, #F7F1E4, #EFE6D3);
  }
  .pin.words.alt .shot { background: linear-gradient(158deg, #F2EEF6, #E8E2F0); }
  .pin.words .shot b {
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 15px;
    line-height: 1.26; color: #2A2620;
  }
  .pin.words figcaption {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    letter-spacing: 0.12em; text-transform: uppercase; color: #6E6656;
  }

  /* scattered, largest and most upright in the middle */
  /* A valley, not a row: the two outer pairs ride high on either side of the
     headline and the middle card sits at the bottom of the dip, so the type
     lands in clear paper instead of on top of a photograph. The outermost
     cards deliberately hang off both edges, which is what stops the fan
     reading as a tidy centred strip. */
  .pin.p1 { left: -3%;  top: 84px;  transform: rotate(-8deg); z-index: 1; width: 178px; }
  .pin.p2 { left: 20%;  top: 424px; transform: rotate(4deg);  z-index: 2; width: 186px; }
  .pin.p3 { left: 40%;  top: 466px; transform: rotate(-2deg); z-index: 4; width: 196px; }
  .pin.p4 { left: 59%;  top: 424px; transform: rotate(6deg);  z-index: 3; width: 186px; }
  .pin.p5 { left: 84%;  top: 84px;  transform: rotate(-5deg); z-index: 1; width: 178px; }

  /* hover straightens the card and lifts it, the way you'd square one up
     with your thumb */
  .pin:hover {
    transform: rotate(0deg) translateY(-12px) scale(1.035) !important;
    box-shadow: 0 34px 60px rgba(74,60,36,0.24), 0 3px 8px rgba(74,60,36,0.10);
    z-index: 6;
  }

  /* settle in on load, staggered left to right */
  @keyframes pinIn {
    from { opacity: 0; transform: translateY(26px) rotate(0deg); }
  }
  .pin { animation: pinIn 0.72s cubic-bezier(.2,.7,.3,1) backwards; }
  .pin.p1 { animation-delay: 0.05s; }
  .pin.p2 { animation-delay: 0.13s; }
  .pin.p3 { animation-delay: 0.21s; }
  .pin.p4 { animation-delay: 0.29s; }
  .pin.p5 { animation-delay: 0.37s; }

  @media (prefers-reduced-motion: reduce) {
    .pin { animation: none; }
    .pin:hover { transform: none !important; }
  }

  /* ---------- Section frame ---------- */

  /* Alternating bands give the page rhythm. The hairline borders that used
     to do this job read as a 90s <hr> once there is any real tonal shift. */
  .section {
    padding: 76px 0;
    scroll-margin-top: 76px;
    position: relative;
  }

  /* ---------- Scroll reveal ----------
     The .reveal class is only ever added by script, and only when the
     visitor hasn't asked for reduced motion, so with JS off, or motion
     turned down, everything is simply visible with no styles to undo. */
  .reveal { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
  @media (prefers-reduced-motion: no-preference) {
    .reveal { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
    /* A section arriving as one block reads as a slide changing. Its parts
       arriving 60ms apart reads as the page assembling itself. */
    .reveal > .wrap > * {
      opacity: 0; transform: translateY(18px);
      transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
    }
    .reveal.is-in > .wrap > *              { opacity: 1; transform: none; }
    .reveal.is-in > .wrap > *:nth-child(1) { transition-delay: 60ms; }
    .reveal.is-in > .wrap > *:nth-child(2) { transition-delay: 120ms; }
    .reveal.is-in > .wrap > *:nth-child(3) { transition-delay: 180ms; }
    .reveal.is-in > .wrap > *:nth-child(n+4) { transition-delay: 220ms; }
  }
  .reveal.is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    /* Gentler, not gone: the fade still marks the boundary, the movement goes. */
    .reveal { transform: none; transition: opacity 300ms ease; }
  }

  .band-raised { background-color: var(--ink-2); background-image: var(--grain); }

  .band-raised::before, .band-raised::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent, var(--border) 18%, var(--border) 82%, transparent);
  }
  .band-raised::before { top: 0; }
  .band-raised::after { bottom: 0; }

  .app-shell {
    position: relative;
    padding: 8px 0 64px;
    scroll-margin-top: 76px;
  }
  /* Section intros are centred like the hero and the ritual band, so the
     page reads as one column rather than drifting left halfway down. */
  .section-lead { max-width: 60ch; margin: 0 auto 40px; text-align: center; }

  .section h2 {
    font-size: clamp(27px, 3.6vw, 36px); font-weight: 600;
    letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 14px;
  }

  .section-lead p { color: #5A5449; margin: 0; }

  /* ---------- App shell ---------- */


  .board-head-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 24px; margin-bottom: 14px; flex-wrap: wrap;
  }

  .title-block { flex: 1 1 380px; min-width: 0; }

  .title-block .label {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
  }

  .title-edit { display: inline-flex; align-items: center; gap: 9px; }

  #board-title {
    font-family: 'Fraunces', serif; font-size: clamp(28px, 4vw, 40px);
    font-weight: 600; color: var(--text); line-height: 1.15;
    outline: none; padding: 2px 0; word-break: break-word;
    overflow-wrap: anywhere; cursor: text;
    border-bottom: 1.5px dashed var(--border); transition: border-color 0.15s ease;
  }
  #board-title:hover { border-bottom-color: var(--muted); }
  #board-title:focus { border-bottom-color: var(--gold-text); border-bottom-style: solid; }

  .title-pencil {
    width: 15px; height: 15px; color: var(--muted); flex: none;
    opacity: 0; transition: opacity 0.15s ease; cursor: pointer;
  }
  .title-edit:hover .title-pencil, #board-title:focus + .title-pencil { opacity: 1; }

  .head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }


  .sit-btn {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
    background: var(--text); color: #F7F4ED; border: none;
    padding: 14px 26px; border-radius: 100px; cursor: pointer;
    white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .sit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,157,99,0.25); }
  .sit-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

  .toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 26px; flex-wrap: wrap; width: 100%;
  }

  /* Reset so the action group can shrink to fit narrow screens. */
  .tool-group {
    display: flex; gap: 8px; flex-wrap: wrap;
    min-width: 0; flex: 0 1 auto;
  }

  .tool-divider {
    width: 1px; height: 22px; background: var(--border); margin: 0 4px;
  }

  .tool {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    padding: 10px 16px; border-radius: 10px; cursor: pointer;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.12s ease;
    white-space: nowrap;
  }

  .tool svg { width: 15px; height: 15px; flex: none; opacity: 0.9; }

  .tool:hover { transform: translateY(-1px); border-color: var(--muted); background: #EAE2D2; }
  .tool:active { transform: translateY(0); }

  /* the two things people actually came to do */
  .tool-group.primary .tool {
    background: rgba(192,157,99,0.12);
    border-color: rgba(192,157,99,0.35);
    /* Deeper than --gold-text: the gold wash behind it lifts the background
       enough that the usual link gold lands just under 4.5:1 at 13px. */
    color: #7A5A20;
  }
  .tool-group.primary .tool:hover {
    background: rgba(192,157,99,0.2);
    border-color: rgba(192,157,99,0.55);
  }

  .tool.ghost {
    background: transparent; color: var(--muted);
    border-color: var(--border);
  }
  .tool.ghost:hover { color: var(--text); background: var(--panel-2); }

  .tool.ghost.danger:hover {
    color: #E08A7C; border-color: rgba(224,138,124,0.4);
    background: rgba(224,138,124,0.08);
  }

  .link-btn {
    background: none; border: none; padding: 0;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: 0.05em; color: var(--muted); cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--border);
  }
  .link-btn:hover { color: var(--text); text-decoration-color: var(--muted); }
  .link-btn.accent { color: var(--gold-text); text-decoration-color: rgba(192,157,99,0.4); }
  .link-btn.danger { color: #C0806F; text-decoration-color: rgba(192,128,111,0.35); }
  .link-btn.danger:hover { color: #E08A7C; }

  .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }

  .tab {
    font-family: 'IBM Plex Mono', monospace; font-size: 12px;
    background: var(--panel); border: 1px solid var(--border); color: var(--muted);
    padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: all 0.15s ease;
  }
  .tab:hover { color: var(--text); border-color: var(--muted); }
  .tab.active { background: var(--rose); border-color: var(--rose); color: #1A1210; font-weight: 500; }
  .tab.done-tab.active { background: var(--green); border-color: var(--green); color: #101A0F; }


  /* ---------- Menus ---------- */

  .menu-wrap { position: relative; display: inline-flex; }

  .tool.icon-only { padding: 10px 13px; gap: 7px; }
  .tool.icon-only svg { width: 16px; height: 16px; }

  .menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
    min-width: 220px; padding: 6px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(72,60,36,0.16), 0 2px 6px rgba(72,60,36,0.08);
    animation: menuIn 0.13s ease-out;
  }
  .menu[hidden] { display: none; }

  @keyframes menuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .menu button {
    display: flex; align-items: center; gap: 11px; width: 100%;
    background: none; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 13.5px; text-align: left;
    color: var(--text); padding: 10px 11px; border-radius: 8px;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .menu button svg { width: 15px; height: 15px; flex: none; opacity: 0.75; }
  .menu button:hover { background: #F3EEE3; }
  .menu button.danger { color: #E08A7C; }
  .menu button.danger:hover { background: rgba(224,138,124,0.12); }

  .menu-sep { height: 1px; background: var(--border); margin: 5px 7px; }

  /* the tile menu is positioned in JS, so it floats above the grid */
  .tile-menu { position: fixed; right: auto; top: auto; min-width: 200px; z-index: 90; }

  /* ---------- Tile overflow trigger ---------- */

  .tile-menu-btn {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(18,20,28,0.6);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.09);
    color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
  }
  .tile-menu-btn svg { width: 16px; height: 16px; }
  .tile:hover .tile-menu-btn,
  .tile:focus-within .tile-menu-btn,
  .tile-menu-btn[aria-expanded="true"] { opacity: 1; }
  .tile-menu-btn:hover { background: rgba(18,20,28,0.85); }

  /* ---------- Stats as chips ---------- */

  .stats { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

  .stat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: 0.03em;
    padding: 5px 11px; border-radius: 100px;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--muted); white-space: nowrap;
  }
  .stat-chip b { color: var(--text); font-weight: 500; }
  .stat-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
  .stat-chip.done .dot { background: var(--green); }
  .stat-chip.cold .dot { background: var(--muted); }

  /* ---------- Grid ---------- */

  /* minmax(0, 1fr) rather than 1fr: a bare 1fr track cannot shrink below its
     item's min-content, so one wide item (the add tile, or a card holding a
     long unbroken word) blows its column out and squeezes the other column to
     a sliver, with the card's face then overflowing the tile. min() on the
     lower bound stops a 220px track being demanded inside a narrower board. */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 18px;
  }
  .grid > * { min-width: 0; }

  .tile {
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
    overflow: hidden; position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  }
  .tile:hover { transform: translateY(-3px); border-color: rgba(154,118,56,0.45);
                box-shadow: 0 10px 24px -14px rgba(23,37,60,0.28); }
  .tile.dragging { opacity: 0.35; }
  .tile.drop-target { border-color: var(--gold-text); }

  .tile.achieved .tile-img-wrap img { filter: saturate(0.45) brightness(0.72); }
  .tile.achieved .tile-body { border-left-color: var(--green); }
  .tile.achieved .tile-cat { color: var(--green); }

  .achieved-stamp {
    position: absolute; top: 50%; left: 50%; z-index: 2;
    transform: translate(-50%, -50%) rotate(-11deg);
    font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; color: #3B6B45;
    border: 2.5px solid #3B6B45; border-radius: 6px; padding: 7px 16px;
    background: rgba(255,255,255,0.90); pointer-events: none; white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  }


  /* over a photo the stamp reads fine, but on a words-only card it lands
     straight on the sentence, so it moves to a corner instead */
  .tile-text .achieved-stamp {
    top: auto; left: 12px; bottom: 12px;
    transform: rotate(-6deg);
    font-size: 10px; letter-spacing: 0.14em;
    padding: 4px 9px; border-width: 2px;
  }

  .tile-img-wrap { aspect-ratio: 1/1; background: var(--panel-2); overflow: hidden; position: relative; }
  .tile-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .tile-img-wrap.broken::after {
    content: "That image did not load. Check the link.";
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted);
    padding: 20px; text-align: center; pointer-events: none;
  }

  .tile-body { padding: 14px 16px 16px; border-left: 3px solid var(--rose); }

  .tile-cat {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose); margin-bottom: 6px;
  }
  /* The caption under a photo card. This one keeps a clamp, because the card
     grows with it and a long caption would push the grid out of rhythm, but it
     gets a line more than it used to and it breaks long words rather than
     cutting through them. -webkit-line-clamp ends it with an ellipsis, so a
     trimmed caption at least looks trimmed. */
  .tile-line {
    font-size: 14px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere; hyphens: auto;
  }

  /* one body height for every card, with room reserved for the achieved
     date, so the bottom edges line up whatever the caption length */
  .tile-body { min-height: 112px; }
  .tile-date { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); margin-top: 8px; }


  .drag-handle {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(18,20,28,0.82); backdrop-filter: blur(4px);
    color: var(--muted); font-size: 13px; display: flex;
    align-items: center; justify-content: center; cursor: grab;
    opacity: 0; transition: opacity 0.15s ease;
  }
  .tile:hover .drag-handle { opacity: 0.8; }
  .drag-handle:active { cursor: grabbing; }

  .add-tile {
    border: 1.5px dashed var(--border); border-radius: 14px; background: transparent;
    color: var(--muted); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; min-height: 220px;
    cursor: pointer; font-size: 13px;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .add-tile:hover { border-color: var(--gold-text); color: var(--gold-text); }
  .add-tile .plus { font-size: 28px; font-weight: 300; line-height: 1; }


  /* ---------- Words-only cards & formatting ---------- */

  .add-form label .opt {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; margin-left: 7px;
  }

  .src-toggle button { flex: 1; }

  .text-note {
    font-size: 12px; color: var(--muted); line-height: 1.5;
    padding: 12px; border: 1px dashed var(--border); border-radius: 8px;
    text-align: center;
  }

  .clear-img {
    margin-top: 8px; background: none; border: none; cursor: pointer;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted);
    text-decoration: underline; text-underline-offset: 3px; padding: 0;
  }
  .clear-img:hover { color: #E08A7C; }

  .fmt-bar { display: flex; gap: 6px; margin-bottom: 8px; }

  .fmt-btn {
    width: 32px; height: 30px; border-radius: 7px;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--muted); cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.13s ease;
  }
  .fmt-btn:hover { color: var(--text); border-color: var(--muted); }
  .fmt-btn.on { background: var(--gold-text); border-color: var(--gold-text); color: #F7F4ED; }
  .fmt-btn i { font-style: italic; font-family: 'Fraunces', serif; }
  .fmt-btn b { font-family: 'Fraunces', serif; }

  /* formatting applied to the line, on the board and everywhere it renders */
  .tile-line.is-bold, .tile-text .is-bold { font-weight: 700; }
  .tile-line.is-ital, .tile-text .is-ital { font-style: italic; }

  /* the word-only card face */
  .tile-text {
    aspect-ratio: 1 / 1; position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 22px; text-align: center;
  }
  .tile.achieved .tile-text { padding-bottom: 44px; }
  /* The face of a words-only card. No line clamp: the script fits the type to
     the square instead, so a long intention is set smaller rather than having
     its ending cut off. overflow-wrap keeps a long word from running off the
     right edge and being sliced mid-word, which is what happened at the larger
     size. The overflow guard stays as the floor: if the text cannot fit even
     at the smallest size the script will use, it is clipped rather than
     spilling over the card. */
  .tile-text .tile-line {
    font-family: Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.32;
    color: var(--text); max-height: none;
    display: block; overflow: hidden;
    overflow-wrap: anywhere; hyphens: auto;
  }
  /* The script adds this when the text will not fit even at the smallest size
     it is willing to use. Then, and only then, the line is clamped, which ends
     it with an ellipsis so a trimmed card looks trimmed rather than sliced. */
  .tile-text .tile-line.is-clamped {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 12;
  }
  .tile-text .tile-line.is-big { font-size: 26px; line-height: 1.24; }
  .tile.achieved .tile-text .tile-line { color: var(--muted); }

  .tile-body-text { min-height: auto; }

  /* ---------- Form ---------- */

  .add-form {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px;
  }

  .add-form label {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
  }

  .field-hint { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.45; }

  .add-form input[type=text], .add-form select, .add-form textarea {
    width: 100%; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 9px 11px; color: var(--text);
    font-family: 'Inter', sans-serif; font-size: 13px;
  }
  .add-form textarea { resize: vertical; min-height: 60px; line-height: 1.45; }

  .src-toggle { display: flex; gap: 6px; margin-bottom: 8px; }
  .src-toggle button {
    flex: 1; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: 0.05em; text-transform: uppercase; padding: 7px;
    border-radius: 7px; border: 1px solid var(--border);
    background: transparent; color: var(--muted); cursor: pointer;
  }
  .src-toggle button.on { background: var(--panel-2); color: var(--text); border-color: var(--muted); }

  .drop-zone {
    border: 1.5px dashed var(--border); border-radius: 8px; padding: 18px 12px;
    text-align: center; font-size: 12px; color: var(--muted); cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .drop-zone:hover, .drop-zone.over { border-color: var(--gold-text); color: var(--gold-text); }

  .preview-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; display: none; }

  .row-actions { display: flex; gap: 8px; margin-top: 2px; }
  .row-actions button {
    flex: 1; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    padding: 9px; border-radius: 8px; border: none; cursor: pointer;
  }
  .row-actions .save { background: var(--gold); color: var(--ink); }
  .row-actions .cancel { background: transparent; color: var(--muted); border: 1px solid var(--border); }

  .form-error { font-size: 12px; color: #E08A7C; display: none; }

  /* First run. This is the first thing a newcomer sees of the product itself,
     so it invites rather than apologises for being blank. */
  .empty {
    display: none; text-align: center;
    padding: 52px 26px 56px; margin-bottom: 20px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 18px;
  }
  .empty h2 {
    font-family: 'Fraunces', serif; font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 600; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--text);
  }
  .empty p {
    font-size: 14.5px; line-height: 1.65; color: var(--muted);
    max-width: 50ch; margin: 0 auto 26px;
  }
  .empty-actions {
    display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap;
  }
  @media (max-width: 560px) {
    .empty { padding: 38px 20px 42px; }
    .empty-actions { flex-direction: column; align-items: stretch; }
    .empty-actions .btn-primary { text-align: center; }
  }

  /* ---------- How it works ---------- */

  /* 280px floor keeps this at 3 columns on desktop, so 6 steps land as 3 + 3 */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px 28px; }

  .step { position: relative; padding-top: 20px; border-top: 1px solid var(--border); }

  .step-n {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: 0.1em; color: var(--gold-text); margin-bottom: 12px;
  }

  .step h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
  .step p { color: #565046; font-size: 14.5px; margin: 0; }


  /* ==========================================================
     HOW IT WORKS - sticky stage
     The six steps used to be a flat grid of six equal boxes, which is the
     one shape that tells you nothing about order. Now the stage holds still
     on the left while the steps scroll past it on the right, and the stage
     draws whichever step you are level with. Two columns only where there is
     room for them; the phone keeps the plain stacked list.
     ========================================================== */

  .how-grid { display: grid; gap: 40px; }

  .how-steps { display: grid; }

  .how-step {
    padding: 22px 0 26px;
    border-top: 1px solid var(--border);
  }
  .how-step .step-n {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: 0.1em; color: var(--gold-text); margin-bottom: 12px;
  }
  .how-step h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
  .how-step p { color: #565046; font-size: 14.5px; margin: 0; }

  .how-stage { display: none; }

  @media (min-width: 900px) {
    .how-grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 64px; align-items: start; }

    .how-stage {
      display: block; position: sticky; top: 128px;
      aspect-ratio: 4 / 5; border-radius: 18px;
      background: var(--night);
      border: 1px solid var(--night-border);
      box-shadow: 0 40px 80px -40px rgba(23,37,60,0.55);
      overflow: hidden;
    }
    .how-stage::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(192,157,99,0.16), transparent 70%);
    }

    /* Each step owns a screen of scroll, so exactly one is ever level with
       the stage. Less than this and two are active at once. */
    .how-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }

    /* The inactive steps stay readable - dimming them to nothing would make
       the section unusable to anyone not scrolling through it. */
    @media (prefers-reduced-motion: no-preference) {
      .how-step {
        opacity: 0.42;
        transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
        transform: translateY(6px);
      }
      .how-step.is-active { opacity: 1; transform: none; }
      .how-step.is-active .step-n { color: var(--gold-text); }
    }
    .how-step.is-active { border-top-color: var(--gold); }
  }

  /* ---- what the stage draws ---- */

  .how-scene {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.97);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
    pointer-events: none;
  }
  .how-scene.is-on { opacity: 1; transform: none; }

  /* the card the first four scenes are built on */
  .how-card {
    width: 62%; background: #FCFAF4; border: 1px solid #E7E2D6;
    padding: 10px 10px 0; display: flex; flex-direction: column;
    box-shadow: 0 24px 50px -18px rgba(0,0,0,0.55);
    transform: rotate(-2deg); position: relative;
  }
  .how-card .sw {
    width: 100%; aspect-ratio: 1/1;
    background: linear-gradient(168deg, #E8B98A, #7C5A6E 58%, #35415F);
  }
  .how-card .cap {
    font-family: 'Fraunces', Georgia, serif; font-size: 13px; line-height: 1.34;
    color: #262320; text-align: center; padding: 12px 6px 14px; min-height: 3.2em;
  }
  .how-card .tape {
    position: absolute; top: -10px; left: 50%; width: 66px; height: 21px;
    background: #ECE7DC; border: 1px solid #DCD5C6;
    transform: translateX(-50%) rotate(4deg);
  }

  /* 01 - the picture lands */
  @media (prefers-reduced-motion: no-preference) {
    .how-scene.is-on .how-card .sw { animation: swIn 520ms var(--ease-out) both; }
    @keyframes swIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
  }

  /* 02 - the line is written under it */
  .s2 .cap { color: transparent; }
  .s2 .cap span {
    color: #262320;
    display: inline-block; overflow: hidden; white-space: nowrap;
    vertical-align: bottom; max-width: 100%;
  }
  @media (prefers-reduced-motion: no-preference) {
    .how-scene.s2.is-on .cap span { animation: writeIn 900ms steps(26, end) 260ms both; }
    @keyframes writeIn { from { width: 0; } to { width: 15ch; } }
  }
  @media (prefers-reduced-motion: reduce) { .s2 .cap span { width: auto; } }

  /* 03 - one card, full screen, breathing */
  .s3 .how-card { width: 54%; }
  .breath {
    position: absolute; inset: -14%; border-radius: 50%;
    border: 1px solid rgba(192,157,99,0.55); pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .how-scene.s3.is-on .breath { animation: breathe 6.5s var(--ease-in-out) infinite; }
    @keyframes breathe {
      0%, 100% { transform: scale(0.86); opacity: 0.30; }
      44%      { transform: scale(1.06); opacity: 0.85; }
      56%      { transform: scale(1.06); opacity: 0.85; }
    }
  }

  /* 04 - the stamp lands on it */
  .stamp-mark {
    position: absolute; top: 42%; left: 50%; z-index: 3;
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; color: #2E6B3F;
    border: 2px solid #2E6B3F; border-radius: 5px; padding: 5px 11px;
    background: rgba(255,255,255,0.92); white-space: nowrap;
    transform: translate(-50%,-50%) rotate(-12deg);
  }
  @media (prefers-reduced-motion: no-preference) {
    .how-scene.s4.is-on .stamp-mark { animation: stampIn 380ms var(--ease-out) 300ms both; }
    @keyframes stampIn {
      from { opacity: 0; transform: translate(-50%,-50%) rotate(-12deg) scale(1.5); }
      to   { opacity: 1; transform: translate(-50%,-50%) rotate(-12deg) scale(1); }
    }
  }

  /* 05 - the cards lay themselves out as a poster */
  .sheet {
    width: 62%; aspect-ratio: 3/4; background: #FBF8F1;
    border: 1px solid #E7E2D6; border-radius: 3px; padding: 9%;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    box-shadow: 0 24px 50px -18px rgba(0,0,0,0.55);
    align-content: center;
  }
  .sheet i {
    display: block; aspect-ratio: 1/1; border-radius: 1px;
    background: linear-gradient(158deg, #CFA98A, #6D6A82);
  }
  .sheet i:nth-child(3n+2) { background: linear-gradient(158deg, #9FB79A, #4A6360); }
  .sheet i:nth-child(3n)   { background: linear-gradient(158deg, #C9A5A9, #5B5570); }
  @media (prefers-reduced-motion: no-preference) {
    .how-scene.s5.is-on .sheet i { animation: tileIn 400ms var(--ease-out) both; }
    .how-scene.s5.is-on .sheet i:nth-child(1) { animation-delay: 120ms }
    .how-scene.s5.is-on .sheet i:nth-child(2) { animation-delay: 170ms }
    .how-scene.s5.is-on .sheet i:nth-child(3) { animation-delay: 220ms }
    .how-scene.s5.is-on .sheet i:nth-child(4) { animation-delay: 270ms }
    .how-scene.s5.is-on .sheet i:nth-child(5) { animation-delay: 320ms }
    .how-scene.s5.is-on .sheet i:nth-child(6) { animation-delay: 370ms }
    .how-scene.s5.is-on .sheet i:nth-child(7) { animation-delay: 420ms }
    .how-scene.s5.is-on .sheet i:nth-child(8) { animation-delay: 470ms }
    .how-scene.s5.is-on .sheet i:nth-child(9) { animation-delay: 520ms }
    @keyframes tileIn { from { opacity: 0; transform: translateY(8px) scale(0.9); } to { opacity: 1; transform: none; } }
  }

  /* 06 - the streak fills in */
  .streak { display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .streak-n {
    font-family: 'Fraunces', Georgia, serif; font-size: 66px; font-weight: 600;
    color: var(--on-night); line-height: 1; letter-spacing: -0.02em;
  }
  .streak-n small {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-night-muted);
    margin-top: 12px; font-weight: 400;
  }
  .streak-row { display: flex; gap: 9px; }
  .streak-row i {
    width: 11px; height: 11px; border-radius: 50%;
    background: rgba(192,157,99,0.22); border: 1px solid rgba(192,157,99,0.5);
    display: block;
  }
  @media (prefers-reduced-motion: no-preference) {
    .how-scene.s6.is-on .streak-row i { animation: dotIn 300ms var(--ease-out) both; }
    .how-scene.s6.is-on .streak-row i:nth-child(1) { animation-delay: 150ms }
    .how-scene.s6.is-on .streak-row i:nth-child(2) { animation-delay: 220ms }
    .how-scene.s6.is-on .streak-row i:nth-child(3) { animation-delay: 290ms }
    .how-scene.s6.is-on .streak-row i:nth-child(4) { animation-delay: 360ms }
    .how-scene.s6.is-on .streak-row i:nth-child(5) { animation-delay: 430ms }
    .how-scene.s6.is-on .streak-row i:nth-child(6) { animation-delay: 500ms }
    .how-scene.s6.is-on .streak-row i:nth-child(7) { animation-delay: 570ms }
    @keyframes dotIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; background: var(--gold); } }
  }
  .how-scene.s6.is-on .streak-row i { background: var(--gold); }

  /* ---------- FAQ ---------- */

  .faq { max-width: 760px; margin-left: auto; margin-right: auto; }

  .faq details {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; margin-bottom: 10px; overflow: hidden;
    transition: border-color 0.18s ease;
  }
  .faq details[open], .faq details:hover { border-color: rgba(154,118,56,0.45); }

  .faq summary {
    cursor: pointer; list-style: none; padding: 18px 52px 18px 20px;
    font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600;
    position: relative; letter-spacing: -0.01em;
  }
  .faq summary::-webkit-details-marker { display: none; }

  /* One glyph that turns, rather than a + swapped for a dash: swapping the
     character makes the marker jump, turning it reads as the row opening. */
  .faq summary::after {
    content: "+"; position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%) rotate(0deg); transform-origin: 50% 50%;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px; font-weight: 400; color: var(--gold-text);
    transition: transform 0.28s cubic-bezier(.22,.7,.3,1);
  }
  .faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
  @media (prefers-reduced-motion: reduce) {
    .faq summary::after { transition: none; }
  }

  .faq .answer { padding: 0 20px 20px; color: #565046; font-size: 15px; max-width: 66ch; }
  .faq .answer p { margin: 0 0 12px; }
  .faq .answer p:last-child { margin-bottom: 0; }

  /* ---------- Footer ---------- */

  .site-foot { background: var(--ink-2); border-top: 1px solid var(--border); padding: 44px 0 56px; }

  .foot-row {
    display: flex; justify-content: space-between; gap: 24px 40px;
    flex-wrap: wrap; align-items: flex-start;
  }

  .site-foot p {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    color: var(--muted); margin: 0; line-height: 1.8;
  }

  .site-foot .credit a {
    color: var(--text); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: var(--border);
  }
  .site-foot .credit a:hover { color: var(--gold-text); text-decoration-color: var(--gold-text); }

  /* ---------- Sit overlay ---------- */

  .overlay {
    position: fixed; inset: 0; background: rgba(7,9,14,0.95);
    display: none; align-items: center; justify-content: center;
    z-index: 100; flex-direction: column; padding: 24px; overflow: hidden;
  }
  .overlay.show { display: flex; }

  .breath-veil {
    position: absolute; inset: -20%; pointer-events: none;
    background: radial-gradient(circle at 50% 45%,
      rgba(192,157,99,0.16) 0%, rgba(201,123,101,0.07) 35%, transparent 68%);
    animation: veilBreathe 10s ease-in-out infinite;
  }

  .breath-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(5,7,11,0.85) 100%);
    animation: vignetteBreathe 10s ease-in-out infinite;
  }

  /* 4s inhale, 1s hold, 5s exhale */
  @keyframes veilBreathe {
    0% { opacity: 0.25; transform: scale(0.82); }
    40%, 50% { opacity: 1; transform: scale(1.12); }
    100% { opacity: 0.25; transform: scale(0.82); }
  }
  @keyframes vignetteBreathe {
    0% { opacity: 1; }
    40%, 50% { opacity: 0.45; }
    100% { opacity: 1; }
  }
  @keyframes ringBreathe {
    0% { transform: scale(0.84); opacity: 0.4; }
    40%, 50% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(0.84); opacity: 0.4; }
  }
  @keyframes imgBreathe {
    0% { transform: scale(0.965); }
    40%, 50% { transform: scale(1.035); }
    100% { transform: scale(0.965); }
  }

  .breathe-ring {
    position: absolute; width: 380px; height: 380px; border-radius: 50%;
    border: 1px solid rgba(192,157,99,0.28); pointer-events: none;
    animation: ringBreathe 10s ease-in-out infinite;
  }
  .breathe-ring.two {
    width: 470px; height: 470px;
    border-color: rgba(201,123,101,0.16); animation-delay: 0.35s;
  }

  .sit-card { position: relative; z-index: 3; max-width: 430px; width: 100%; text-align: center; }

  .sit-img-wrap {
    width: 280px; height: 280px; margin: 0 auto 22px; border-radius: 16px;
    position: relative; animation: imgBreathe 10s ease-in-out infinite;
  }

  .sit-img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55); display: block;
    opacity: 0; transition: opacity 0.5s ease;
  }
  .sit-img.in { opacity: 1; }
  .sit-img-wrap.broken .sit-img { display: none; }

  .sit-img-wrap.broken::after {
    content: "That image link did not load.";
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted);
    padding: 20px; pointer-events: none;
  }

  .sit-cat {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--rose); margin-bottom: 10px;
    opacity: 0; transition: opacity 0.6s ease;
  }

  .sit-line {
    font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;
    line-height: 1.4; min-height: 1.4em;
  }

  .breath-cue {
    margin-top: 30px; font-family: 'IBM Plex Mono', monospace; font-size: 13px;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text);
    height: 18px; opacity: 0; transition: opacity 0.5s ease;
  }

  .sit-timer {
    margin-top: 10px; font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; color: var(--muted); opacity: 0; transition: opacity 0.6s ease;
  }

  .sit-cat.in, .sit-timer.in, .breath-cue.in, .sit-actions.in { opacity: 1; }

  .sit-actions {
    margin-top: 20px; display: flex; gap: 10px; justify-content: center;
    opacity: 0; transition: opacity 0.6s ease; flex-wrap: wrap;
  }
  .sit-actions button {
    font-family: 'Inter', sans-serif; font-size: 13px;
    padding: 9px 18px; border-radius: 100px; cursor: pointer;
  }
  .btn-extend { background: transparent; border: 1px solid var(--border); color: var(--muted); }
  .btn-extend:hover { color: var(--text); border-color: var(--muted); }
  .btn-done { background: var(--gold); color: var(--on-gold); border: none; font-weight: 500; }

  .cursor-blink {
    display: inline-block; width: 2px; height: 1em; background: var(--gold);
    margin-left: 2px; vertical-align: text-bottom; animation: blink 1s step-end infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }


  /* ---------- Share as image ---------- */

  .share-overlay {
    position: fixed; inset: 0; z-index: 130;
    background: rgba(7,9,14,0.94); backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center; padding: 20px;
    overflow-y: auto;
  }
  .share-overlay.show { display: flex; }

  .share-panel {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 18px; padding: 24px; width: 100%; max-width: 470px;
    margin: auto;
  }

  .share-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
  .share-title { font-size: 22px; font-weight: 600; margin-bottom: 5px; }
  .share-sub { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }

  .share-close {
    background: none; border: none; color: var(--muted);
    font-size: 26px; line-height: 1; cursor: pointer; padding: 0 2px;
  }
  .share-close:hover { color: var(--text); }

  .share-formats { display: flex; gap: 8px; margin: 20px 0 16px; }

  .share-formats .fmt {
    flex: 1; background: var(--panel-2); border: 1px solid var(--border);
    color: var(--muted); border-radius: 10px; padding: 10px 6px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    display: flex; flex-direction: column; gap: 3px; align-items: center;
    transition: all 0.15s ease;
  }
  .share-formats .fmt span {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; opacity: 0.75;
  }
  .share-formats .fmt:hover { color: var(--text); border-color: var(--muted); }
  .share-formats .fmt.on { background: var(--gold-text); border-color: var(--gold-text); color: #F7F4ED; }

  .share-stage {
    position: relative; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; min-height: 220px;
    display: flex; align-items: center; justify-content: center; padding: 14px;
  }

  #shareCanvas { max-width: 100%; max-height: 46vh; display: block; border-radius: 4px; }

  .share-spinner {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted);
    background: var(--panel-2); z-index: 2;
  }
  .share-spinner[hidden] { display: none; }

  .share-note {
    font-size: 12px; color: var(--muted); line-height: 1.55;
    margin: 12px 0 0; min-height: 0;
  }
  .share-note:empty { display: none; }
  .share-note.warn { color: #E0A87C; }

  .share-actions { display: flex; gap: 9px; margin-top: 18px; }

  .share-actions button {
    flex: 1; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    padding: 13px; border-radius: 100px; border: none; cursor: pointer;
  }
  .btn-share-save { background: var(--gold); color: var(--ink); }
  .btn-share-send { background: transparent; border: 1px solid var(--border) !important; color: var(--text); }
  .btn-share-send:hover { border-color: var(--muted) !important; }
  .share-actions button:disabled { opacity: 0.45; cursor: not-allowed; }

  @media (max-width: 640px) {
    .share-panel { padding: 20px 18px; border-radius: 16px; }
    #shareCanvas { max-height: 38vh; }
    .share-actions { flex-direction: column-reverse; }
  }


  /* words-only card in the daily sit: the line carries the whole moment */
  .overlay.is-text .sit-img-wrap { display: none; }

  .overlay.is-text .sit-line {
    font-size: clamp(28px, 4.4vw, 46px); line-height: 1.28;
    max-width: 18ch; margin-left: auto; margin-right: auto;
  }
  .overlay.is-text .sit-cat { margin-bottom: 18px; }

  .sit-line.is-bold { font-weight: 700; }
  .sit-line.is-ital { font-style: italic; }
  .overlay.is-text .sit-line.is-big { font-size: clamp(32px, 5.2vw, 54px); }

  @media (max-width: 720px) {
    .overlay.is-text .sit-line { font-size: 27px; max-width: 15ch; }
    .overlay.is-text .sit-line.is-big { font-size: 31px; }
  }


  /* ==========================================================
     Dark islands
     The page is paper. These few surfaces stay night on purpose:
     the daily ritual, the share stage, and the footer. Inside them
     the ink inverts, so accents go back to their brighter values.
     ========================================================== */

  .overlay,
  .ritual,
  .site-foot,
  .share-stage {
    --text: var(--on-night);
    --muted: var(--on-night-muted);
    --border: var(--night-border);
    --panel: #232838;
    --panel-2: #2B3142;
    --gold: #C09D63; --gold-text: #C09D63;
    --rose: #C97B65;
    --green: #7FA37A;
    color: var(--on-night);
  }

  .site-foot { background: var(--night); border-top: none; }
  .share-stage { background: var(--panel-2); }

  /* ---------- The ritual band ---------- */

  .ritual {
    position: relative; overflow: hidden;
    background: var(--night);
    padding: 78px 0 84px;
    text-align: center;
  }
  .ritual::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 46% 62% at 50% 46%, rgba(192,157,99,0.15), transparent 70%),
      radial-gradient(ellipse 34% 40% at 78% 78%, rgba(201,123,101,0.08), transparent 70%);
  }
  .ritual-inner { position: relative; }

  .ritual .eyebrow { color: #C09D63; }

  .ritual h2 {
    font-family: 'Fraunces', serif; font-size: clamp(30px, 4.2vw, 40px);
    font-weight: 600; letter-spacing: -0.015em; margin: 14px 0 14px;
    color: var(--on-night);
  }
  .ritual p {
    font-size: 16px; line-height: 1.68; color: var(--on-night-muted);
    max-width: 50ch; margin: 0 auto 32px;
  }

  /* breathing rings: the signature. slow, ambient, reduced-motion safe. */
  .ritual-ring {
    position: relative; width: 132px; height: 132px; margin: 0 auto 26px;
    display: flex; align-items: center; justify-content: center;
  }
  .ritual-ring i {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(192,157,99,0.42);
    animation: ritualBreathe 10s ease-in-out infinite;
  }
  .ritual-ring i:nth-child(2) { inset: -18px; border-color: rgba(192,157,99,0.20); animation-delay: 0.5s; }
  .ritual-ring i:nth-child(3) { inset: -36px; border-color: rgba(192,157,99,0.10); animation-delay: 1s; }
  .ritual-ring span {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: #C09D63;
  }
  @keyframes ritualBreathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    40%      { transform: scale(1.09); opacity: 1; }
    50%      { transform: scale(1.09); opacity: 1; }
  }

  .ritual .btn-primary { background: #C09D63; color: var(--on-gold); }
  .ritual .btn-primary:hover { background: #CFAE78; }

  @media (prefers-reduced-motion: reduce) {
    .ritual-ring i { animation: none; }
  }

  @media (max-width: 720px) {
    .ritual { padding: 58px 0 62px; }
    .ritual-ring { width: 104px; height: 104px; }
    .ritual p { font-size: 15px; }
  }

  /* ---------- Poster ---------- */

  .poster-overlay {
    position: fixed; inset: 0; background: #E8E2D6;
    z-index: 120; display: none; flex-direction: column; overflow: auto;
  }
  .poster-overlay.show { display: flex; }

  .poster-bar {
    position: sticky; top: 0; z-index: 5; display: flex;
    justify-content: space-between; align-items: center; gap: 14px;
    padding: 14px 22px; background: rgba(22,35,58,0.95);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); flex-wrap: wrap;
  }
  .poster-bar .hint { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); line-height: 1.5; }
  .poster-bar-actions { display: flex; gap: 10px; }
  .poster-bar button {
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    padding: 9px 18px; border-radius: 100px; cursor: pointer;
  }
  .btn-print { background: var(--gold); color: var(--ink); border: none; }
  .btn-close-poster { background: transparent; border: 1px solid var(--border); color: var(--muted); }
  .btn-close-poster:hover { color: var(--text); border-color: var(--muted); }

  .board { background: #FFFFFF; padding: 46px 40px 60px; flex: 1; }
  .board-inner { transform-origin: top center; }

  .board-head { text-align: center; margin-bottom: 40px; }
  .board-title {
    font-family: 'Fraunces', serif; font-size: 40px; font-weight: 700;
    color: #1C1C1C; line-height: 1.15; margin: 0 0 8px; word-break: break-word;
  }
  .board-sub {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase; color: #525D6A;
  }

  .board-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 34px 26px; max-width: 1000px; margin: 0 auto;
  }

  .pinned { position: relative; }

  .pinned-inner {
    position: relative; background: #FFFFFF; border: 1px solid #DCDCDC;
    padding: 11px 11px 0; display: flex; flex-direction: column;
  }

  .tape {
    position: absolute; top: -11px; left: 50%; width: 74px; height: 24px;
    background: #ECECEC; border: 1px solid #DCDCDC;
  }

  .pinned-inner img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #EFEFEF;
  }

  .pinned-line {
    font-family: 'Fraunces', serif; font-size: 14px; line-height: 1.35;
    color: #1C1C1C; padding: 12px 3px 14px; text-align: center; word-break: break-word;
  }
  .pinned-cat {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: #525D6A; padding: 9px 3px 0; text-align: center;
  }

  .pinned.is-achieved .pinned-inner img { filter: saturate(0.5) brightness(0.94); }

  .pinned-text {
    width: 100%; aspect-ratio: 1 / 1; display: flex;
    align-items: center; justify-content: center; padding: 18px; text-align: center;
    background: #F4F1EA !important;
    border: 1px solid #E4DFD3;
  }
  .pinned-text .pinned-line {
    font-size: 15px; line-height: 1.32; color: #1C1C1C; padding: 0;
  }
  .pinned-text .pinned-line.is-big { font-size: 19px; }
  .pinned-line.is-bold { font-weight: 700; }
  .pinned-line.is-ital { font-style: italic; }

  .pinned .stamp {
    position: absolute; z-index: 2; top: 44%; left: 50%;
    transform: translate(-50%, -50%) rotate(-13deg);
    font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; color: #2E6B3F;
    border: 2.5px solid #2E6B3F; border-radius: 5px; padding: 6px 14px;
    background: rgba(255,255,255,0.85); white-space: nowrap;
  }

  .board-empty { text-align: center; color: #525D6A; font-size: 14px; padding: 40px; }

  body.printing .board {
    width: var(--page-w); height: var(--page-h); padding: 0; overflow: hidden;
  }
  body.printing .board-inner {
    width: var(--page-w); padding: 34px 30px 40px;
    transform: scale(var(--poster-scale, 1));
  }

  /* ---------- Print ---------- */

  @media print {
    @page { size: letter; margin: 0; }

    html, body {
      background: #fff !important; margin: 0 !important; padding: 0 !important;
      -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }

    .site-head, .hero, .starter, .ritual, .section, .site-foot, .overlay, .app-shell { display: none !important; }

    .poster-overlay {
      position: static !important; display: block !important;
      background: transparent !important; overflow: visible !important; height: auto !important;
    }
    .poster-bar { display: none !important; }

    .board { break-after: avoid; page-break-after: avoid; }

    .board, .board-inner, .pinned, .pinned-inner, .pinned-inner img,
    .tape, .stamp, .board-head {
      -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .pinned, .pinned-inner { break-inside: avoid; page-break-inside: avoid; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .breathe-ring, .breath-veil, .breath-vignette, .sit-img-wrap { animation: none; }
    .sit-img, .sit-cat, .sit-timer, .breath-cue, .sit-actions, .tile { transition: none; }
  }

  /* The wall tightens rather than disappears as the viewport narrows.
     The overlap composition depends on the headline having clear paper to
     either side of it; below this width the text column has widened enough
     to sit on the flanking cards, so the stage un-stacks and the hero
     returns to type above, wall below. Measured, not guessed: at 1024 the
     stacked version put p1 and p5 straight through the headline. */
  @media (max-width: 1180px) {
    .hero-stage { display: block; }
    .hero-head { pointer-events: auto; padding-top: 0; }
    .hero-wall { margin-top: 46px; }

    .pin.p1 { left: 0%;    top: 34px; width: 158px; }
    .pin.p2 { left: 20%;   top: 6px;  width: 166px; }
    .pin.p3 { left: 39.5%; top: 40px; width: 188px; }
    .pin.p4 { left: 60%;   top: 2px;  width: 166px; }
    .pin.p5 { left: 79%;   top: 44px; width: 158px; }
    /* Taller than the cards need, so the two facts have clear paper to sit
       on underneath them rather than hanging off the wall's edge. */
    .wall-inner { height: 386px; }

    .fact { padding: 10px 15px 11px; border-radius: 12px; }
    .fact b { font-size: 23px; }
    .fact-a { left: 14px;  top: auto; bottom: 4px; transform: rotate(-1.5deg); }
    .fact-b { right: 14px; top: auto; bottom: 4px; transform: rotate(1.5deg); }
  }

  @media (max-width: 900px) {
    /* three cards, still a wall, still legible */
    .wall-inner { height: 280px; }
    .pin { width: 158px !important; }
    .pin.p2, .pin.p5 { display: none; }
    .pin.p1 { left: 6%;   top: 30px; }
    .pin.p3 { left: 36%;  top: 4px; width: 176px !important; }
    .pin.p4 { left: 66%;  top: 34px; }
  }

  @media (max-width: 720px) {
    .hero { padding: 44px 0 0; }
    .hero h1 { margin-bottom: 18px; }
    .hero-cta { flex-direction: column; align-items: stretch; padding: 0 4px; }
    .hero-cta a { text-align: center; }
    .trust { font-size: 10.5px; gap: 8px 16px; }

    .hero-wall { margin-top: 36px; }
    .wall-inner { height: 224px; }
    .pin { width: 132px !important; padding: 8px 8px 0; }
    .pin figcaption { font-size: 9.5px; padding: 8px 3px 10px; }
    .pin .tape { width: 46px; height: 15px; top: -7px; }
    .pin .stamp { font-size: 8.5px; padding: 3px 7px; border-width: 1.5px; }
    .pin.words .shot { padding: 10px; }
    .pin.words .shot b { font-size: 11px; }
    .pin.p4, .pin.p5 { display: none; }
    .pin.p1 { left: 6%;  top: 28px; transform: rotate(-7deg); }
    .pin.p3 { left: 34%; top: 0;    transform: rotate(3deg); width: 150px !important; }
    .pin.p2 { display: block; left: 63%; top: 32px; transform: rotate(6deg); width: 122px !important; }

    /* two up, so the board reads as pictures rather than a list */
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  }

  /* Below this, two columns give a card face of about 137px. A vision board
     card is meant to be read at a glance from across a room, and a long
     intention in a 137px square lands at 11px type, which is not readable and
     still does not fit. One column gives it roughly 330px and the type comes
     back up to a normal size. */
  @media (max-width: 560px) {
    .grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tile-body { padding: 11px 12px 13px; }
    .tile-line { font-size: 12.5px; line-height: 1.35; }
    .tile-cat { font-size: 9px; }
    .tile-date { font-size: 9px; }
    .achieved-stamp { font-size: 10px; padding: 4px 9px; border-width: 2px; }
    .add-tile { min-height: 0; aspect-ratio: 1 / 1.18; font-size: 12px; }
    .add-form { grid-column: 1 / -1; }

    /* filters scroll (a known chip pattern); actions never do */
    .tabs {
      flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      margin-left: -4px; padding-left: 4px;
    }
    .tabs::-webkit-scrollbar { display: none; }
    /* actions wrap onto a second line rather than pushing the page sideways */
    .toolbar { flex-wrap: wrap; overflow: visible; gap: 7px; }
    .tool-group { flex-wrap: wrap; gap: 7px; min-width: 0; }
    .tab { flex: none; }
    .tool { padding: 9px 12px; font-size: 12.5px; }
    .tool svg { width: 14px; height: 14px; }
    .more-label { display: none; }
    .tool.icon-only { padding: 9px 11px; }
    .menu { min-width: 210px; }

    /* less chrome before the first image */
    .board-head-row { gap: 12px; }
    .title-block .label { font-size: 10px; margin-bottom: 5px; }
    #board-title { font-size: 26px; }
    .stats { justify-content: flex-start; }
    .sit-btn { padding: 13px 22px; }

    /* fade the right edge so it is obvious the row keeps going */
    .tabs {
      -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
      mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }

    /* three controls on a 166px tile were eating half its width */
    .tile-menu-btn { opacity: 1; top: 6px; right: 6px; }
    .drag-handle { display: none; }
    .hero-copy { text-align: center; }
    .hero h1 { font-size: 33px; max-width: 100%; margin-bottom: 14px; }
    .hero-sub { font-size: 15.5px; line-height: 1.6; margin: 0 auto 26px; max-width: 34ch; }
    .eyebrow { margin-bottom: 14px; }
    .hero-cta { flex-direction: column; }
    .trust { justify-content: center; gap: 6px 16px; font-size: 10px; }
    .section { padding: 52px 0; }
    .board-head-row { align-items: flex-start; flex-direction: column; gap: 16px; }
    .title-block { flex: 0 0 auto; width: 100%; }
    .head-right { align-items: flex-start; width: 100%; }
    .stats { text-align: left; }
    .sit-btn { width: 100%; }
    .btn-primary, .btn-ghost { width: 100%; text-align: center; }
    .sit-img-wrap { width: 220px; height: 220px; }
    .sit-line { font-size: 20px; }
    .breathe-ring { width: 290px; height: 290px; }
    .breathe-ring.two { width: 345px; height: 345px; }
    .board { padding: 30px 18px 44px; }
    .board-title { font-size: 28px; }
  }
  /* ---------- Guide promo row ---------- */

  .guide-promo-row {
    display: flex; gap: 40px; align-items: center; flex-wrap: wrap;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 18px; padding: 32px;
  }
  .guide-promo-row img {
    width: 140px; height: auto; flex: none; border-radius: 8px;
    box-shadow: 0 16px 34px rgba(0,0,0,0.4);
  }
  .guide-promo-row h3 { font-size: 21px; font-weight: 600; margin-bottom: 10px; }
  .guide-promo-row p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-bottom: 0; max-width: 56ch; }
  /* The copy takes the middle and the call to action sits out at the right
     edge, so the banner reads across its full width instead of trailing off
     into empty card. */
  .guide-promo-copy { flex: 1 1 340px; min-width: 0; }
  .guide-promo-row > .btn-ghost { flex: none; margin-left: 8px; white-space: nowrap; }

  @media (max-width: 860px) {
    .guide-promo-row { gap: 26px; }
    .guide-promo-row > .btn-ghost { margin-left: 0; }
  }
  @media (max-width: 640px) {
    .guide-promo-row { flex-direction: column; text-align: center; padding: 26px 22px; }
    .guide-promo-row img { width: 110px; height: auto; }
    .guide-promo-row p { max-width: none; }
  }

  /* ---------- Getting started strip ---------- */
  /* One short line between the hero and the board. People arriving from a
     social post want to reach the thing, not read three sections first. */
  .starter { padding: 6px 0 30px; }
  .starter-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px 30px; flex-wrap: wrap;
    padding: 18px 24px; border-radius: 14px;
    background: var(--panel); border: 1px solid var(--border);
  }
  .starter-row p {
    margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 62ch;
  }

  /* ---------- Button roles ----------
     Three, used everywhere, no per-section variants:
       .btn-primary  the one action that matters on this screen
       .btn-ghost    a real alternative, same weight, lighter skin
       .btn-quiet    a link that needs a target, not a button              */
  .btn-quiet {
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    color: var(--text); text-decoration: none; white-space: nowrap;
    padding: 10px 2px; position: relative;
    background: none; border: 0; cursor: pointer; display: inline-block;
  }
  .btn-quiet::after {
    content: ""; position: absolute; left: 2px; right: 2px; bottom: 6px;
    height: 1.5px; background: var(--gold); border-radius: 2px;
    transform: scaleX(1); transform-origin: left;
    transition: transform 0.22s cubic-bezier(.2,.7,.3,1);
  }
  .btn-quiet:hover::after { transform: scaleX(0.35); }

  @media (max-width: 640px) {
    .starter-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  }

  /* Guide is the one commercial destination in the nav. It gets a third tier:
     not a pill like the board CTA, not plain text like the reading pages. */
  .head-links a.nav-guide { color: var(--gold-text); font-weight: 600; }
  .head-links a.nav-guide::after { left: 4px; right: 4px; opacity: 0.45; }
  .head-links a.nav-guide:hover { color: var(--gold-text); }
  .head-links a.nav-guide:hover::after { opacity: 1; }

  .site-foot .social { margin-top: 4px; }
  .site-foot .social a {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; color: var(--muted);
    transition: color 0.18s ease;
  }
  .site-foot .social a:hover { color: var(--gold-text); }
  .site-foot .social svg { width: 17px; height: 17px; }
  .site-foot .social span { font-size: 13px; }

  /* Nothing to sort, print or share on an empty board, so the controls stay out
     of the way until the first card exists. */
  /* An empty board still needs the More menu, because "Restore from backup"
     lives in it and an empty board is exactly when someone needs to restore.
     Hiding the whole toolbar made the move-to-a-new-device path the FAQ
     describes impossible to follow. Only the actions that need cards go. */
  .board-empty .tabs,
  .board-empty .add-tile { display: none; }
  .board-empty .toolbar { justify-content: flex-end; }
  .board-empty .tool-group.primary { display: none; }
  .board-empty .sit-btn { opacity: 0.4; pointer-events: none; }

  /* The daily ritual is the main action, so it leads the toolbar rather than
     floating alone on the far right of the title row. */
  .toolbar .sit-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    background: var(--text); color: #F7F4ED; border: 1px solid var(--text);
    padding: 11px 20px; border-radius: 100px; cursor: pointer;
    transition: transform 0.18s cubic-bezier(.2,.7,.3,1), box-shadow 0.18s ease, background 0.18s ease;
  }
  .toolbar .sit-btn svg { width: 16px; height: 16px; }
  .toolbar .sit-btn:hover {
    background: #21334F; transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(22,35,58,0.22);
  }
  .board-empty .toolbar .sit-btn { display: none; }

  .head-right { display: flex; align-items: center; gap: 12px; }

  /* ---------- Share panel controls ---------- */

  .share-modes { display: flex; gap: 6px; margin-bottom: 14px;
    background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 100px; padding: 4px; }
  .share-modes .mode {
    flex: 1; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600;
    padding: 9px 14px; border-radius: 100px; border: 0; background: none;
    color: var(--muted); cursor: pointer; transition: background 0.18s ease, color 0.18s ease;
  }
  .share-modes .mode.on { background: var(--text); color: #F7F4ED; }

  .share-picker { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  /* An author `display` beats the UA's [hidden] rule outright, so the card
     picker stayed on screen in whole-board mode where it does nothing. */
  .share-picker[hidden] { display: none; }
  .share-picker label {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); flex: none;
  }
  .share-picker select {
    flex: 1; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 12px; cursor: pointer;
  }

  .share-themes { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
  .share-themes .sw {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 100px; padding: 6px 13px 6px 6px;
    font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--muted);
    transition: border-color 0.18s ease, color 0.18s ease;
  }
  .share-themes .sw i {
    width: 20px; height: 20px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
  }
  .share-themes .sw.on { border-color: var(--text); color: var(--text); font-weight: 600; }

  @media (max-width: 560px) {
    .share-themes .sw span { display: none; }
    .share-themes .sw { padding: 6px; }
  }

  .poster-bar {
    --text: #F2EFE7; --muted: #A9B4C6; --border: #33456A;
    color: #F2EFE7;
  }
  .poster-bar .hint { color: #A9B4C6; }

  /* Board actions on a phone: let them wrap and keep each one thumb sized. */
  @media (max-width: 560px) {
    .toolbar { gap: 8px; }
    .tool-group { width: 100%; }
    .tool, .toolbar .sit-btn {
      font-size: 12.5px; padding: 10px 13px;
    }
    .toolbar .sit-btn { padding: 10px 16px; }
    .tool svg, .toolbar .sit-btn svg { width: 14px; height: 14px; }
  }

  @media (max-width: 400px) {
    /* at the narrowest sizes the labels are the thing that has to give */
    .tool-group.primary { display: grid; grid-template-columns: 1fr 1fr; }
    .toolbar .sit-btn { grid-column: 1 / -1; justify-content: center; }
    .tool { justify-content: center; }
  }

  /* Anything that sets its own measure inside a wrap gets centred rather than
     pinned to the left edge of the wrap. */
  .section .wrap > .section-lead,
  .section .wrap > .faq,
  .section .wrap > .steps { margin-left: auto; margin-right: auto; }

  @media (max-width: 720px) {
    .section-lead { text-align: left; }
  }

  /* The getting started line is onboarding. Once there are cards on the board
     it has done its job, so it stops taking up the space above it. */
  body.has-cards .starter { display: none; }

  /* In standalone the hero is already hidden, so the strip would be the first
     thing in the window with nothing above it to explain. The board header
     becomes the hero instead. */
  @media (display-mode: standalone) {
    .starter { display: none; }
    #demo { display: none; }
    .app-shell { padding-top: 18px; }
    .board-head-row { padding-top: 6px; }
  }

  /* ==========================================================
     One column.
     Every direct child of a wrap shares one measure so they all start on the
     same left edge. Setting margin:auto on elements with different max-widths
     centres each at a different width and produces a ragged column.
     ========================================================== */
  main .wrap > * { max-width: 760px; margin-left: auto; margin-right: auto; }
  main .wrap > .lede { max-width: 760px; }

  /* The app and any wide grid keep the full measure. Only prose is columned. */
  .app-shell .wrap > *,
  main .wrap > .grid,
  main .wrap > .toolbar,
  main .wrap > .tabs,
  main .wrap > .board-head-row,
  main .wrap > .add-form,
  main .wrap > .idea-grid,
  main .wrap > .spreads-grid,
  main .wrap > .parts-grid,
  main .wrap > .steps,
  main .wrap > .how-grid,
  main .wrap > .guide-promo-row,
  main .wrap > .empty,
  main .wrap > .starter-row,
  main .wrap > .ph-row { max-width: none; }

  /* ==========================================================
     Board header on a phone
     Three things were wrong: the stats chip centred itself while everything
     else sat on the left margin, the overflow button dropped onto a row of
     its own, and its menu opened past the left edge of the screen.
     ========================================================== */
  @media (max-width: 640px) {
    .board-head-row { gap: 10px; }
    .head-right { width: 100%; align-items: flex-start; }
    .stats { justify-content: flex-start; }

    /* one grid for the whole action row: the daily action spans the top,
       the other three share the row beneath it */
    .toolbar {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 8px;
    }
    .tool-group.primary {
      display: contents;   /* let its children join the parent grid */
    }
    .toolbar .sit-btn { grid-column: 1 / -1; justify-content: center; }
    .toolbar .tool { justify-content: center; width: 100%; }
    .menu-wrap { display: block; }
    .menu-wrap > .tool { width: 44px; padding-left: 0; padding-right: 0; }
  }

  /* the popover is anchored to a button near the left edge, so on small
     screens it opens from the left instead of running off the page */
  @media (max-width: 640px) {
    .menu-wrap .menu {
      right: auto; left: auto;
      transform: translateX(calc(-100% + 44px));
      min-width: 210px;
      max-width: calc(100vw - 48px);
    }
  }

  /* Smallest phones still in use (iPhone SE, 320px). The hero wall and the
     action row both need one more step down or they push the page sideways. */
  @media (max-width: 340px) {
    .wall-inner { height: 196px; }
    .pin { width: 112px !important; }
    .pin figcaption { font-size: 8.5px; padding: 6px 2px 8px; }
    .pin.words .shot b { font-size: 10px; }
    .pin.p1 { left: 2%;  transform: rotate(-7deg) scale(0.96); }
    .pin.p3 { left: 32%; width: 124px !important; }
    .pin.p2 { left: 64%; }

    .toolbar { grid-template-columns: 1fr 1fr auto; gap: 6px; }
    .toolbar .sit-btn { padding: 11px 10px; font-size: 13px; }
    .tool { padding: 9px 8px; font-size: 11.5px; }
    .tool svg { width: 13px; height: 13px; }
    .menu-wrap > .tool { width: 38px; }
  }