/* cyrillic-ext */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lora-italic-400-cyrillic-ext.woff") format('woff');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lora-italic-400-cyrillic.woff") format('woff');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* math */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lora-italic-400-math.woff") format('woff');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lora-italic-400-symbols.woff") format('woff');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lora-italic-400-vietnamese.woff") format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lora-italic-400-latin-ext.woff") format('woff');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lora-italic-400-latin.woff") format('woff');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/lora-normal-400-600-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/lora-normal-400-600-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* math */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/lora-normal-400-600-math.woff2") format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/lora-normal-400-600-symbols.woff2") format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/lora-normal-400-600-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/lora-normal-400-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/lora-normal-400-600-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 */
    :root {
      --bone:   #331832;
      --bone-2: #3C1F3B;
      --ink:    #FDF0D5;
      --ink-soft: rgba(253, 240, 213, 0.8);
      --stone:  #C6D8D3;
      --stone-soft: rgba(198, 216, 211, 0.4);
      --hairline: rgba(253, 240, 213, 0.16);
      --ember:  #F0544F;

      --display: 'Lora', Georgia, serif;
      --ui:      'Lora', Georgia, serif;

      --max: 880px;
      --header-h: 102px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bone);
      color: var(--ink);
      font-family: var(--ui);
      font-weight: 400;
      font-size: 15px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
      position: relative;
    }

    /* ─── site-wide ambient ─ the within motif as quiet wallpaper,
       behind everything, drifting very slowly. fixed-position so it
       feels like atmosphere, not content. extremely faint. */
    .ambient-bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    .ambient-bg .amb {
      position: absolute;
      border-radius: 50%;
      border: 1px solid var(--stone);
      opacity: 0;
    }
    .ambient-bg .amb.a { width: clamp(560px, 82vw, 1240px); aspect-ratio: 1; top: -34%; left: -28%;  animation: amb-a 64s ease-in-out infinite; }
    .ambient-bg .amb.b { width: clamp(460px, 68vw, 1040px); aspect-ratio: 1; top:  26%; right: -34%; animation: amb-b 78s ease-in-out infinite; }
    .ambient-bg .amb.c { width: clamp(380px, 54vw, 860px); aspect-ratio: 1; bottom: -26%; left: 4%; border-color: var(--ember); animation: amb-c 88s ease-in-out infinite; }
    .ambient-bg .amb.d { width: clamp(150px, 20vw, 300px); aspect-ratio: 1; top: 14%;  right: 16%;   animation: amb-d 72s ease-in-out infinite; }
    @keyframes amb-a {
      0%, 100% { transform: translate(0, 0) scale(1);    opacity: 0.10; }
      50%      { transform: translate(34px, -22px) scale(1.05); opacity: 0.16; }
    }
    @keyframes amb-b {
      0%, 100% { transform: translate(0, 0) scale(1);    opacity: 0.09; }
      50%      { transform: translate(-28px, 18px) scale(1.06); opacity: 0.15; }
    }
    @keyframes amb-c {
      0%, 100% { transform: translate(0, 0) scale(0.97); opacity: 0.10; }
      50%      { transform: translate(18px, -14px) scale(1.04); opacity: 0.18; }
    }
    @keyframes amb-d {
      0%, 100% { transform: translate(0, 0) scale(1);    opacity: 0.08; }
      50%      { transform: translate(-12px, 16px) scale(1.05); opacity: 0.13; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ambient-bg .amb { animation: none; }
    }

    /* layout */
    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
    @media (max-width: 600px) { .wrap { padding: 0 24px; } }

    /* header */
    header {
      padding: 32px 0 0;
      height: var(--header-h);
      position: relative;
      z-index: 5;
    }
    .header-row { line-height: 1.4; }
    .header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .word { display: block; text-decoration: none; }
    .word img { display: block; height: 62px; width: auto; }
    .nav-link {
      font-family: var(--ui);
      font-size: 13px;
      letter-spacing: 0.02em;
      color: var(--ember);
      text-decoration: none;
      padding-bottom: 2px;
      transition: color 0.3s;
    }
    .nav-link:hover { color: var(--ink); }
    .header-nav{display:flex;gap:34px;align-items:center}
    .nav-link{font-size:14px;letter-spacing:0.03em}
    .nav-link.quiet{color:var(--ink-soft);position:relative;padding-bottom:3px}
    .nav-link.quiet::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform 0.3s}
    .nav-link.quiet:hover{color:var(--ink)}
    .nav-link.quiet:hover::after{transform:scaleX(1)}
    .nav-link.signin{white-space:nowrap;border:1px solid var(--ember);padding:9px 22px;border-radius:999px;transition:background 0.25s,color 0.25s}
    .nav-link.signin:hover{background:var(--ember);color:var(--bone)}

    /* sections — tighter than before, but each still has breathing room.
       no min-height on the non-hero sections — they take the space
       their content needs and no more. */
    section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 56px 0;
      position: relative;
    }
    section.signal, section.diagram { padding: clamp(72px, 10vh, 128px) 0; }
    /* hero fills the fold and reserves a row for the scroll cue, so the
       cue is always inside the fold no matter the viewport height. */
    section.hero {
      min-height: calc(100vh - var(--header-h));
      min-height: calc(100svh - var(--header-h));
      padding: 0 0 clamp(20px, 4vh, 44px);
      display: grid;
      grid-template-rows: 1fr auto;
      align-items: center;
      justify-items: center;
    }
    section > .wrap { width: 100%; }
    section > .wrap { position: relative; z-index: 1; }

    /* legacy per-section ambient — retained as no-op so existing markup
       still validates. real ambient sits on .ambient-bg site-wide. */
    .ambient { display: none; }

    /* hero — the mark sits centered. the only interactive moment. */
    .hero { text-align: center; }
    .hero-mark-wrap {
      position: relative;
      width: clamp(155px, min(37vw, 27.3vh), 300px);
      height: clamp(155px, min(37vw, 27.3vh), 300px);
      margin: 0 auto clamp(24px, 4.5vh, 48px);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    .hero-mark svg { display: block; overflow: visible; }
    .mark-ring {
      stroke: var(--stone);
      transition: stroke 0.5s ease;
    }
    .mark-dot {
      fill: var(--ink);
      transform-origin: center;
      transform-box: fill-box;
      transition: fill 0.4s ease, transform 0.4s cubic-bezier(0.22,0.61,0.36,1);
    }
    .hero-mark-wrap.held .mark-ring { stroke: var(--ember); }
    .hero-mark-wrap.held .mark-dot  { fill: var(--ember); }
    .hero-mark-wrap.held .mark-dot  { transition: fill 0.2s, transform 0.08s linear; }

    /* breathing — gentle scale on the resting mark */
    @keyframes breathe {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.018); }
    }
    .hero-mark.breathing { animation: breathe 5.2s ease-in-out infinite; transform-origin: center; }

    /* pulse rings while held */
    @keyframes pulse-out {
      0%   { transform: scale(1);   opacity: 0.55; }
      100% { transform: scale(2.0); opacity: 0; }
    }
    .pulse {
      position: absolute; inset: 0;
      border-radius: 50%;
      border: 1px solid var(--ember);
      animation: pulse-out 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
      pointer-events: none;
      opacity: 0;
    }
    .pulse.b { animation-delay: 0.55s; }
    .pulse.c { animation-delay: 1.1s; }
    .hero-mark-wrap.held .pulse { opacity: 1; }

    .hero-hint {
      font-family: var(--ui);
      font-size: 12px;
      letter-spacing: 0.04em;
      color: var(--stone);
      min-height: 18px;
      transition: color 0.4s ease;
    }
    .hero-hint.ember { color: var(--ember); }
    .hero-hint .tab { font-variant-numeric: tabular-nums; }

    .hero-tagline {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(30px, min(5.6vw, 8.4vh), 80px);
      line-height: 1.02;
      letter-spacing: -0.028em;
      color: var(--ink);
      margin: clamp(28px, 6.5vh, 72px) auto 0;
      max-width: 18ch;
      text-wrap: pretty;
    }

    /* scroll cue — sits at the foot of the full-height hero so the
       reader knows there's more below. very quiet. */
    .hero-scroll {
      grid-row: 2;
      width: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(6px, 1.4vh, 12px);
      padding-top: clamp(16px, 4vh, 48px);
      pointer-events: none;
    }
    .hero-scroll-line {
      display: block;
      width: 0.5px;
      height: clamp(18px, 4vh, 36px);
      background: var(--stone-soft);
      transform-origin: top;
      animation: scroll-line 2.6s ease-in-out infinite;
    }
    .hero-scroll-label {
      font-family: var(--ui);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--stone);
    }
    @keyframes scroll-line {
      0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
      50%      { transform: scaleY(1);    opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-scroll-line { animation: none; }
    }

    /* page entrance — quiet staggered fade + rise on load. sits on
       wrappers so it never clobbers the mark's breathing or the scroll
       cue's own animation. */
    @keyframes enter-rise {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .enter { opacity: 0; animation: enter-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
    .enter.d1 { animation-delay: 0.15s; }
    .enter.d2 { animation-delay: 0.45s; }
    .enter.d3 { animation-delay: 0.75s; }
    .enter.d4 { animation-delay: 1.05s; }
    @media (prefers-reduced-motion: reduce) {
      .enter { opacity: 1; animation: none; }
    }

    /* divider — tiny centered hairline */
    .rule {
      width: 24px; height: 0.5px;
      background: var(--hairline);
      margin: 60px auto;
      border: 0;
    }

    /* ethos — the negations */
    .ethos { text-align: center; }
    .ethos h2 {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(28px, 4.4vw, 56px);
      line-height: 1.1;
      letter-spacing: -0.022em;
      color: var(--ink);
      margin: 0;
      max-width: none;
      white-space: nowrap;
      margin-left: auto; margin-right: auto;
    }
    @media (max-width: 600px) { .ethos h2 { white-space: normal; max-width: 16ch; } }
    .ethos h2 + h2 { margin-top: 18px; }
    .ethos .closer {
      margin-top: 56px;
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(22px, 3vw, 36px);
      line-height: 1.2;
      letter-spacing: -0.018em;
      color: var(--ink);
    }

    /* diagram — the spokes, schematic */
    .diagram { text-align: center; }
    .diagram .kicker {
      font-family: var(--ui);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--stone);
      margin-bottom: 56px;
    }
    /* ─── phone frame ─── the diagram sits on-device so the gesture
       reads as something you DO on a phone, not a poster diagram. */
    .phone-frame {
      position: relative;
      width: clamp(238px, 39.6vw, 288px);
      aspect-ratio: 9 / 19.2;
      margin: 0 auto;
      background: var(--bone);
      border-radius: 42px;
      box-shadow:
        0 0 0 1px var(--hairline),
        0 0 0 7px rgba(253, 240, 213, 0.05),
        0 0 0 7.5px rgba(253, 240, 213, 0.16),
        0 28px 60px -12px rgba(0, 0, 0, 0.55);
      overflow: hidden;
    }
    .phone-notch {
      position: absolute; top: 12px; left: 50%;
      transform: translateX(-50%);
      width: 64px; height: 5px;
      background: var(--ink);
      border-radius: 3px;
      opacity: 0.18;
      z-index: 2;
    }
    .phone-inner { height: 100%; display: flex; flex-direction: column; position: relative; z-index: 1; }
    /* full-bleed arcs behind the screen — they run past the bezel edge
       so they never look cut, exactly like the app background. */
    .phone-arcs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    .phone-arcs .pa { position: absolute; border-radius: 50%; aspect-ratio: 1; }
    .phone-arcs .pa.a { width: 130%; top: -32%; right: -55%; border: 1px solid var(--stone); opacity: 0.14; }
    .phone-arcs .pa.b { width: 150%; bottom: -45%; left: -60%; border: 1px solid var(--ember); opacity: 0.22; }
    .phone-arcs .pa.c { width: 90%; top: 30%; left: -45%; border: 1px solid var(--stone); opacity: 0.1; }
    .phone-status {
      display: flex; justify-content: space-between; align-items: center;
      padding: 30px 24px 0;
      font-family: var(--ui);
      font-size: 11px;
      color: var(--stone);
    }
    .phone-status svg { display: block; color: var(--stone); }
    .phone-header {
      display: flex; justify-content: space-between; align-items: baseline;
      padding: 18px 24px 0;
    }
    .phone-word {
      font-family: var(--display);
      font-size: 17px;
      color: var(--ink);
      letter-spacing: -0.02em;
    }
    .phone-count {
      font-family: var(--ui);
      font-size: 10px;
      color: var(--stone);
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    .schema-stage {
      flex: 1;
      display: flex; align-items: center; justify-content: center;
      padding: 0 12px;
      min-height: 0;
    }
    .schema {
      width: 100%;
      height: auto;
      display: block;
    }
    .phone-hint {
      text-align: center;
      padding: 0 0 7%;
      font-family: var(--display);
      font-size: 11px;
      color: var(--stone);
      letter-spacing: 0.04em;
    }
    .schema circle.outline {
      fill: none; stroke: var(--stone); stroke-width: 1.1; opacity: 0.5;
    }
    .schema circle.dot {
      fill: var(--ink);
    }
    .schema text {
      font-family: var(--display);
      font-weight: 400;
      font-size: 19px;
      letter-spacing: -0.015em;
      fill: var(--ink);
      text-anchor: middle;
    }

    /* ─── diagram animation ───────────────────────────────────
       mirrors the app gesture: from self, the user sweeps a CURVE
       up to athalie (a real thumb doesn't go straight), lands,
       and holds. while held, a soft ember bloom sits behind her
       circle — "talking to her." the glow IS the signal. 7s loop. */
    .tether-active {
      fill: none;
      stroke: var(--ember);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-dasharray: 230;
      stroke-dashoffset: 230;
      opacity: 0;
      animation: tether-draw 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    @keyframes tether-draw {
      0%, 11%  { stroke-dashoffset: 230; opacity: 0; }
      14%      { opacity: 1; }
      34%      { stroke-dashoffset: 0; opacity: 1; }
      60%      { stroke-dashoffset: 0; opacity: 1; }
      68%      { stroke-dashoffset: 0; opacity: 0; }
      100%     { stroke-dashoffset: 230; opacity: 0; }
    }

    /* the finger — animateMotion handles position; css handles opacity */
    .finger-dot {
      opacity: 0;
      animation: finger-fade 7s ease-in-out infinite;
    }
    @keyframes finger-fade {
      0%, 11%  { opacity: 0; }
      14%      { opacity: 0.95; }
      60%      { opacity: 0.95; }
      68%,100% { opacity: 0; }
    }

    /* the bloom around athalie while talking — soft, breathing */
    .athalie-glow {
      opacity: 0;
      animation: glow-pulse 7s ease-in-out infinite;
      transform-origin: 201px 118px;
      transform-box: view-box;
    }
    @keyframes glow-pulse {
      0%, 26%  { opacity: 0; transform: scale(0.88); }
      34%      { opacity: 0.85; transform: scale(1.00); }
      48%      { opacity: 1.00; transform: scale(1.06); }
      60%      { opacity: 0.90; transform: scale(1.02); }
      68%      { opacity: 0; transform: scale(0.94); }
      100%     { opacity: 0; transform: scale(0.88); }
    }

    /* athalie's ring + label warm to ember through the hold */
    .athalie-ring  { animation: athalie-ring 7s ease-in-out infinite; }
    .athalie-label { animation: athalie-label 7s ease-in-out infinite; }
    @keyframes athalie-ring {
      0%, 26%  { stroke: var(--stone); stroke-width: 0.75; }
      34%, 60% { stroke: var(--ember); stroke-width: 1.4; }
      68%,100% { stroke: var(--stone); stroke-width: 0.75; }
    }
    @keyframes athalie-label {
      0%, 26%  { fill: var(--ink); }
      34%, 60% { fill: var(--ember); }
      68%,100% { fill: var(--ink); }
    }

    /* self ring brightens while you're holding it */
    .self-ring { animation: self-state 7s ease-in-out infinite; }
    @keyframes self-state {
      0%, 11%  { stroke: var(--stone); }
      14%, 60% { stroke: var(--ember); }
      68%,100% { stroke: var(--stone); }
    }

    @media (prefers-reduced-motion: reduce) {
      .tether-active, .finger-dot, .athalie-glow,
      .athalie-ring, .athalie-label, .self-ring {
        animation: none;
      }
      .tether-active, .finger-dot, .athalie-glow { opacity: 0; }
    }
    .diagram .cap {
      margin-top: 56px;
      text-align: center;
    }
    .diagram .cap h2 {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(28px, 4.4vw, 56px);
      line-height: 1.1;
      letter-spacing: -0.022em;
      color: var(--ink);
      margin: 0;
      max-width: 16ch;
      margin-left: auto;
      margin-right: auto;
    }
    .diagram .cap h2 + h2 { margin-top: 18px; }

    /* signup — a deliberate threshold. the rest of the page is bone;
       this section inverts to ink so arriving here feels like stepping
       through a door. full-bleed dark, with a small mark echoing the
       hero so the gesture follows you down. */
    section.ask {
      background: var(--ink);
      color: var(--bone);
      margin-top: 96px;
      padding: 120px 0 128px;
      overflow: hidden;
    }
    section.ask::before {
      /* a slow ember glow behind the form — the same warmth as the
         held mark, dialed down to atmosphere. */
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 720px;
      height: 720px;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(240, 84, 79, 0.18) 0%, rgba(240, 84, 79, 0.06) 35%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    .ask { text-align: center; }
    .ask-mark {
      width: 28px; height: 28px;
      margin: 0 auto 36px;
      display: block;
    }
    .ask-mark circle.r { fill: none; stroke: rgba(51, 24, 50, 0.35); stroke-width: 1; }
    .ask-mark circle.d { fill: var(--ember); }
    .ask .kicker {
      font-family: var(--ui);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(51, 24, 50, 0.5);
      margin-bottom: 28px;
    }
    .ask h3 {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(36px, 5.6vw, 72px);
      line-height: 1.02;
      letter-spacing: -0.028em;
      color: var(--bone);
      margin: 0 0 44px;
      max-width: 14ch;
      margin-left: auto; margin-right: auto;
    }
    .ask-actions {
      display: flex; flex-direction: column; align-items: center; gap: 14px;
      margin-bottom: 0;
    }
    .ask-cta {
      font-family: var(--ui); font-size: clamp(17px, 1.6vw, 21px); font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--ink); background: var(--bone);
      text-decoration: none;
      padding: 22px 52px; border-radius: 999px;
      box-shadow: 0 16px 45px rgba(0,0,0,0.2);
      transition: opacity 0.25s, transform 0.25s;
    }
    .ask-cta:hover { opacity: 0.9; transform: translateY(-2px); }
    .ask-note {
      font-family: var(--ui); font-size: 12px; letter-spacing: 0.02em;
      color: rgba(51, 24, 50, 0.45);
    }
    .form {
      max-width: 680px;
      margin: 0 auto;
      display: flex;
      align-items: baseline;
      gap: 16px;
      border-bottom: 0.5px solid rgba(51, 24, 50, 0.22);
      padding-bottom: 14px;
      transition: border-color 0.3s;
    }
    .form:focus-within { border-color: var(--bone); }
    .form input {
      flex: 1;
      border: 0;
      background: transparent;
      font-family: var(--ui);
      font-size: 16px;
      color: var(--bone);
      padding: 6px 0;
      outline: 0;
    }
    .form input::placeholder { color: rgba(51, 24, 50, 0.4); }
    .form button {
      font-family: var(--ui);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--ember);
      background: none;
      border: 0;
      padding: 6px 0;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.2s;
    }
    .form button:hover { opacity: 0.75; }
    .ask .meta {
      margin-top: 28px;
      font-family: var(--ui);
      font-size: 12px;
      color: rgba(51, 24, 50, 0.45);
      letter-spacing: 0.02em;
    }

    /* footer — sits on the ink panel. a thin row of dummy links,
       then the fine print. lowercased to keep the site's voice. */
    footer {
      padding: 40px 0 44px;
      background: var(--ink);
      color: rgba(51, 24, 50, 0.4);
      border-top: 0.5px solid rgba(51, 24, 50, 0.08);
    }
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: baseline;
      gap: 0 18px;
      font-family: var(--ui);
      font-size: 11px;
      letter-spacing: 0.02em;
      margin-bottom: 18px;
    }
    .footer-links a {
      color: rgba(51, 24, 50, 0.55);
      text-decoration: none;
      transition: color 0.25s;
    }
    .footer-links a:hover { color: var(--bone); }
    .footer-links .sep {
      color: rgba(51, 24, 50, 0.18);
      user-select: none;
    }
    /* status — non-clickable, washed out so it reads as informational
       rather than a real link. paired with a tiny live dot. */
    .footer-status {
      color: rgba(51, 24, 50, 0.28);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: default;
    }
    .footer-status::before {
      content: "";
      width: 5px; height: 5px;
      border-radius: 50%;
      background: rgba(51, 24, 50, 0.28);
    }
    .footer-fine {
      text-align: center;
      font-family: var(--ui);
      font-size: 11px;
      color: rgba(51, 24, 50, 0.32);
      letter-spacing: 0.02em;
    }

    /* ─── signal / noise ─ the core pitch. a wall of faded "noise"
       words on the left; the signal statement on the right. */
    .signal .kicker {
      font-family: var(--ui); font-size: 11px; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--stone); margin-bottom: 28px;
    }
    .signal-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
      gap: clamp(32px, 5vw, 72px);
      align-items: center;
    }
    .noise {
      display: flex; flex-wrap: wrap; gap: 10px 14px;
      align-content: center;
      font-family: var(--ui); font-size: clamp(15px, 1.6vw, 19px);
      line-height: 1;
    }
    .noise span {
      color: var(--stone); opacity: 0.5;
      padding: 7px 13px;
      border: 0.5px solid var(--hairline);
      border-radius: 999px;
      white-space: nowrap;
    }
    .noise-cloud {
      position: relative;
      height: clamp(360px, 41vw, 504px);
      font-family: var(--ui);
      isolation: isolate;
    }
    /* a soft field of interference the words sit inside, so the cloud reads
       as its own atmosphere instead of dissolving into the page. */
    .noise-cloud::before {
      content: "";
      position: absolute; inset: -6% -8%;
      z-index: -1;
      background:
        radial-gradient(58% 52% at 44% 46%, color-mix(in oklab, var(--ink) 7%, transparent), transparent 72%),
        radial-gradient(38% 34% at 74% 76%, color-mix(in oklab, var(--ink) 4.5%, transparent), transparent 70%);
      -webkit-mask-image: radial-gradient(66% 60% at 46% 50%, #000 42%, transparent 82%);
      mask-image: radial-gradient(66% 60% at 46% 50%, #000 42%, transparent 82%);
    }
    .noise-cloud span {
      position: absolute;
      font-size: calc(var(--fs, 18px) * 1.2);
      color: color-mix(in oklab, var(--ink) 62%, var(--stone));
      white-space: nowrap;
      opacity: 0;
      transform: translateY(6px);
      filter: blur(2.5px);
      animation: cloud-fade var(--dur, 8s) ease-in-out infinite;
      animation-delay: var(--d, 0s);
      will-change: opacity, transform, filter;
    }
    @keyframes cloud-fade {
      0%, 100% { opacity: 0; transform: translateY(6px) scale(0.985); filter: blur(3px); }
      42%      { opacity: var(--peak, 0.72); transform: translateY(0) scale(1); filter: blur(0); }
      58%      { opacity: var(--peak, 0.72); transform: translateY(0) scale(1); filter: blur(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .noise-cloud span { animation: none; opacity: 0.6; transform: none; filter: none; }
    }
    .signal-lead {
      font-family: var(--ui); font-size: 13px; letter-spacing: 0.01em;
      color: var(--stone); margin: 0 0 20px;
    }
    .signal-line h2 {
      font-family: var(--display); font-weight: 400;
      font-size: clamp(34px, 5vw, 64px); line-height: 1.02;
      letter-spacing: -0.026em; color: var(--ink); margin: 0;
    }
    .signal-body {
      font-family: var(--ui); font-size: clamp(15px, 1.5vw, 17px);
      line-height: 1.6; color: var(--ink-soft); max-width: 34ch;
      margin: 28px 0 0; text-wrap: pretty;
    }

    /* how it works — head + steps */
    .diagram-cols {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
      gap: clamp(32px, 5vw, 72px);
      align-items: center;
      text-align: left;
    }
    .diagram-right .kicker { margin-bottom: 28px; }
    .diagram-head { max-width: 30ch; margin: 0 auto 8px; }
    .diagram-head h2 {
      font-family: var(--display); font-weight: 400;
      font-size: clamp(34px, 5vw, 64px); line-height: 1.02;
      letter-spacing: -0.026em; color: var(--ink); margin: 0 0 22px;
    }
    .diagram-head p {
      font-family: var(--ui); font-size: clamp(15px, 1.5vw, 17px);
      line-height: 1.6; color: var(--ink-soft); margin: 0 auto;
      max-width: 42ch; text-wrap: pretty;
    }
    .steps {
      list-style: none; margin: 56px auto 0; padding: 0;
      max-width: 640px;
      text-align: left;
    }
    .diagram-cols .diagram-head { max-width: none; margin: 0 0 8px; }
    .diagram-cols .diagram-head p { margin: 0; max-width: 34ch; }
    .diagram-cols .steps { margin: 44px 0 0; max-width: 440px; }
    .diagram-cols .diagram-right { max-width: 480px; }
    .diagram-cols .phone-frame { margin: 0; grid-column: 2; grid-row: 1; justify-self: start; }
    .diagram-cols .diagram-right { grid-column: 1; grid-row: 1; }
    .steps li {
      display: flex; align-items: baseline; gap: 20px;
      padding: 20px 4px;
      border-top: 0.5px solid var(--hairline);
    }
    .steps li:last-child { border-bottom: 0.5px solid var(--hairline); }
    .step-n {
      font-family: var(--ui); font-size: 12px; letter-spacing: 0.06em;
      color: var(--ember); font-variant-numeric: tabular-nums;
      min-width: 24px;
    }
    .step-t {
      font-family: var(--display); font-weight: 400;
      font-size: clamp(19px, 2.4vw, 26px); letter-spacing: -0.018em;
      color: var(--ink);
      white-space: nowrap;
    }
    @media (max-width: 900px) { .step-t { white-space: normal; } }

    /* screenshots showcase */
    .wrap.wide { max-width: 1180px; }
    .screens { text-align: center; }
    .screens .kicker {
      font-family: var(--ui); font-size: 11px; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--stone); margin-bottom: 24px;
    }
    .screens-head {
      font-family: var(--display); font-weight: 400;
      font-size: clamp(30px, 4.4vw, 56px); line-height: 1.05;
      letter-spacing: -0.024em; color: var(--ink);
      margin: 0 0 64px; text-wrap: pretty;
    }
    .screens-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(20px, 3vw, 44px);
      align-items: start;
    }
    .screens-row figure { margin: 0; }
    .screens-row img {
      width: 100%; height: auto; display: block;
      border-radius: clamp(20px, 2.4vw, 34px);
      box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.45);
    }
    .screens-row figcaption {
      font-family: var(--ui); font-size: 13px; line-height: 1.45;
      color: var(--stone); margin-top: 22px; text-wrap: pretty;
    }

    /* small screens */
    @media (max-width: 860px) {
      .signal-grid { grid-template-columns: 1fr; gap: 40px; }
      .signal-line { text-align: center; }
      .signal-body { margin-left: auto; margin-right: auto; }
      .screens-row { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
      .steps { max-width: 460px; }
      .diagram-cols { grid-template-columns: 1fr; gap: 48px; justify-items: center; text-align: center; }
      .diagram-cols .phone-frame, .diagram-cols .diagram-right { grid-column: 1; grid-row: auto; justify-self: center; }
      .diagram-cols .steps { margin-left: auto; margin-right: auto; max-width: 460px; }
      .diagram-cols .diagram-head p { margin-left: auto; margin-right: auto; }
      .diagram-right .kicker { text-align: center; }
    }
    @media (max-width: 600px) {
      section { padding: 48px 0; }
      .hero-tagline { margin-top: clamp(24px, 5.5vh, 56px); }
      .rule { margin: 40px auto; }
    }
  
    /* imagery v3 — through the ring */
    .rings{text-align:center}
    .rings .kicker{font-family:var(--ui);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--stone);margin-bottom:24px}
    .rings-head{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,56px);line-height:1.05;letter-spacing:-0.024em;color:var(--ink);margin:0 auto 64px;max-width:20ch}
    .rings-stage{position:relative;height:clamp(460px,52vw,660px)}
    .rings-arc{position:absolute;inset:0;width:100%;height:100%}
    .ring{position:absolute;margin:0}
    .ring-img{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;outline:1px solid var(--stone-soft);outline-offset:12px}
    .ring-img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(0.85)}
    .ring-img::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(51,24,50,0.2)}
    .ring.big{left:4%;top:10%;width:clamp(260px,34vw,430px)}
    .ring.big .ring-img{outline-color:rgba(240,84,79,0.55)}
    .ring.med{right:16%;top:0;width:clamp(170px,22vw,280px)}
    .ring.sm{right:4%;bottom:4%;width:clamp(140px,18vw,230px)}
    .ring figcaption{text-align:center;font-family:var(--ui);font-size:12px;color:var(--stone);margin-top:16px;letter-spacing:0.04em}
    .live-chip{position:absolute;top:5%;right:-3%;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgba(51,24,50,0.72);border:0.5px solid var(--hairline);backdrop-filter:blur(5px);font-family:var(--ui);font-size:11px;color:var(--ink);letter-spacing:0.05em;z-index:2}
    .live-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);animation:chip-pulse 1.8s ease-in-out infinite}
    @keyframes chip-pulse{0%,100%{opacity:1}50%{opacity:0.35}}
    .hero .ring .live-chip{right:auto;bottom:auto;left:86%;top:13%;transform:translateY(-100%);opacity:0;transition:opacity 0.8s ease;pointer-events:none}
    .hero .ring.active .live-chip{opacity:1}
    a.hero-scroll{pointer-events:auto;text-decoration:none;cursor:pointer}
    a.hero-scroll .hero-scroll-label{transition:color 0.3s;color:var(--ember)}
    a.hero-scroll:hover .hero-scroll-label{color:var(--ink)}
    a.hero-scroll:hover .hero-scroll-line{background:var(--ember)}
    .cine{position:relative;margin:40px 0 0;padding:0;line-height:0}
    .cine + .ask, section.cine + section.ask{margin-top:0}
    .cine img{display:block;width:100%;height:clamp(440px,74vh,680px);object-fit:cover;object-position:45% 22%;filter:saturate(0.85);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.35) 14%,#000 34%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.35) 14%,#000 34%,#000 100%)}
    .cine::after{content:"";position:absolute;inset:0;background:rgba(51,24,50,0.14)}
    .cine-arcs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
    .cine-arcs .ca{position:absolute;border-radius:50%;aspect-ratio:1;border:1px solid var(--ember)}
    .cine-arcs .ca.one{width:clamp(420px,52vw,880px);top:-58%;left:-14%;animation:amb-a 52s ease-in-out infinite}
    .cine-arcs .ca.two{width:clamp(340px,42vw,720px);bottom:-52%;right:-10%;animation:amb-c 64s ease-in-out infinite}
    .cine-arcs .ca.three{width:clamp(220px,26vw,420px);top:18%;right:14%;animation:amb-b 58s ease-in-out infinite}
    @media (prefers-reduced-motion: reduce){.cine-arcs .ca{animation:none;opacity:0.12}}
    .cine-copy{position:absolute;left:0;right:0;top:16%;display:flex;align-items:flex-start;justify-content:flex-end;z-index:2;text-align:center;padding:0 24px;padding-right:clamp(16px,20vw,26%);line-height:normal}
    .live-chip.cine-chip{position:static;display:inline-flex;font-size:12px;padding:9px 16px}
    .cine-copy h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.6vw,58px);letter-spacing:-0.024em;line-height:1.05;color:var(--ink);margin:0;max-width:18ch;text-shadow:0 2px 30px rgba(51,24,50,0.65)}
    @media (max-width:860px){
      .rings-stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:44px}
      .ring{position:static;width:min(72vw,320px)}
      .rings-arc{display:none}
    }
  
    /* hero rings — the composition moved into the fold */
    section.hero{grid-template-columns:minmax(0,100%)}
    .hero > .wrap{justify-self:stretch}
    .live-chip{white-space:nowrap}
    .hero .rings-stage{height:clamp(340px,44vh,540px);max-width:1060px;margin:clamp(24px,5vh,56px) auto 0}
    .hero .ring.big{left:6%;top:8%;width:clamp(190px,min(22vw,32vh),330px)}
    .hero .ring.med{right:17%;top:0;width:clamp(130px,min(15vw,22vh),220px)}
    .hero .ring.sm{right:5%;bottom:2%;width:clamp(110px,min(13vw,19vh),185px)}
    .hero .hero-tagline{margin:clamp(12px,3vh,32px) auto 0;font-size:clamp(28px,min(4.6vw,6.2vh),64px)}
    .rings-arc{animation:arc-drift 26s ease-in-out infinite}
    .rings-arc path{opacity:0.28;stroke-dasharray:1000;animation:arc-draw 16s ease-in-out infinite;animation-fill-mode:backwards}
    .rings-arc path:nth-child(2){animation-duration:19s;animation-delay:6s;opacity:0.18}
    .rings-arc path:nth-child(3){animation-duration:22s;animation-delay:11s;opacity:0.2}
    @keyframes arc-draw{0%{stroke-dashoffset:1000;opacity:0}10%{opacity:0.32}48%{stroke-dashoffset:0}72%{stroke-dashoffset:0;opacity:0.3}86%{opacity:0}100%{stroke-dashoffset:1000;opacity:0}}
    @keyframes arc-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}
    @media (prefers-reduced-motion: reduce){.rings-arc,.rings-arc path{animation:none}}
    @media (max-width:860px){
      .hero .rings-stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:36px}
      .hero .ring{position:static;width:min(60vw,260px)}
    }
.ask-lede{font-family:var(--display);font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:rgba(51,24,50,0.72);max-width:44ch;margin:26px auto 44px}
@media (max-width:860px){.hero .ring{position:relative}.hero .ring .live-chip{left:50%;top:-6px;transform:translate(-50%,-100%)}}
.menu-btn{display:none;background:none;border:0;padding:10px;cursor:pointer;flex-direction:column;gap:5px;z-index:20}
.menu-btn span{display:block;width:22px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform 0.3s,opacity 0.3s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
@media (max-width:700px){
  .word img{height:46px}
  .menu-btn{display:flex}
  .header-nav{display:none;position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:40px;background:var(--bone);z-index:19}
  .header-nav .nav-link{font-size:22px}
  .header-nav .nav-link.signin{padding:12px 34px;font-size:20px}
  .header-nav.open .nav-ask{display:block;position:absolute;bottom:44px;left:28px;right:28px}
  .nav-ask-row{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--hairline);padding-bottom:10px}
  .nav-ask input{flex:1;min-width:0;background:none;border:0;outline:0;font-family:var(--display);font-size:16px;color:var(--ink);padding:6px 0}
  .nav-ask input::placeholder{color:var(--stone)}
  .nav-ask button{background:none;border:0;color:var(--ember);font-family:var(--ui);font-size:13px;cursor:pointer;white-space:nowrap;padding:6px 0}
  .nav-ask-meta{font-family:var(--ui);font-size:11px;color:var(--stone);margin-top:12px;text-align:center}
  .menu-btn{position:relative;z-index:21}
  .header-row{position:relative;z-index:21}
  .word{position:relative;z-index:22}
  .header-nav.open{display:flex}
  .nav-link{font-size:15px;white-space:nowrap}
  .hero-tagline{margin-bottom:8px}
  .hero .rings-stage{display:block;position:relative;height:min(56svh,520px);margin-top:clamp(28px,5vh,48px)}
  .hero .ring{position:absolute;margin:0}
  .hero .ring.big{left:auto;right:6%;top:7%;bottom:auto;width:min(49.5vw,214px)}
  .hero .ring.med{left:2%;bottom:6%;top:auto;right:auto;width:min(30vw,135px)}
  .hero .ring.sm{right:4%;bottom:-9%;top:auto;left:auto;width:min(36vw,160px)}
  .hero .ring figcaption{white-space:nowrap;font-size:10px;margin-top:10px}
  .hero .rings-arc{display:none}
  a.hero-scroll{margin-top:12px}
  .ring figcaption{margin-top:12px}
  .hero .ring .live-chip{font-size:10px;padding:6px 11px}
  .ask-lede{font-size:16px;margin:20px auto 36px}
  .cine img{height:60vh}
  .cine-copy{padding-right:24px;justify-content:center;top:auto;bottom:10%;align-items:flex-end}
  section.signal, section.diagram{padding:64px 0}
  .footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:16px}
  .footer-links .sep{display:none}
  .footer-fine{max-width:none;margin:0 auto;line-height:1.6}
}
html,body{overflow-x:hidden}
  .nav-ask{display:none}
  
.frank-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* information pages */
.info-body{min-height:100vh;background:var(--bone);color:var(--ink)}
.info-main{position:relative;z-index:1;width:min(100% - 48px,720px);margin:0 auto;padding:72px 0 120px}
.info-logo{display:inline-flex;align-items:center;min-height:48px}
.info-logo img{display:block;width:auto;height:52px}
.info-article{margin-top:72px}
.info-article h1{font-family:var(--display);font-size:clamp(48px,8vw,82px);font-weight:400;line-height:1;letter-spacing:-0.035em;margin:0;color:var(--ink)}
.info-updated{margin:16px 0 0;font-family:var(--ui);font-size:12px;color:var(--stone);letter-spacing:.03em}
.info-intro{margin-top:46px;font-family:var(--display);font-size:clamp(18px,2.4vw,23px);line-height:1.65;color:var(--ink-soft)}
.info-intro p{margin:0}
.info-intro a,.info-copy a{display:inline-block;margin-top:18px;color:var(--ember);font-family:var(--ui);font-size:14px;text-decoration:none;border-bottom:1px solid rgba(240,84,79,.45);padding-bottom:2px}
.info-section{display:block;padding:34px 0 0;margin-top:34px;border-top:1px solid var(--hairline)}
.info-section h2{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin:0 0 20px}
.info-copy{font-family:var(--display);font-size:17px;line-height:1.7;color:var(--ink-soft)}
.info-copy p{margin:0 0 18px}
.info-copy ul{display:flex;flex-direction:column;gap:14px;margin:0;padding-left:1.2em}
.info-copy li::marker{color:var(--ember)}
.info-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.info-body footer{position:relative;z-index:1;background:var(--bone);color:var(--ink-soft);border-color:var(--hairline)}
.info-body .footer-links a{color:var(--ink-soft)}
.info-body .footer-links a:hover{color:var(--ember)}
@media (max-width:700px){.info-main{width:min(100% - 40px,720px);padding:40px 0 80px}.info-logo img{height:44px}.info-article{margin-top:52px}.info-intro{margin-top:34px}.info-section{margin-top:28px;padding-top:28px}}