/* MOCK-UP draft 3 shared styles. Brand kit: ../../brand/ (locked). Dark by default.
   Harbor is FILL only on ink; labels/links on ink use --harbor-on-ink. */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }

  :root {
    color-scheme: dark;
    --ink: #10131A;            /* the ground */
    --white: #FFFFFF;
    --harbor: #1D4F5C;         /* FILL only on ink */
    --harbor-on-ink: #61848D;  /* labels / links on ink */
    --text: #E9EBEE;
    --muted: #9CA2AB;
    --rule: #262A33;
    --raise: #171B24;          /* card surface, one step off the ground */
    --font-display: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
    --size: 18px;              /* body size is still unsettled in the kit. One knob. */
    --wrap: 1080px;
  }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); }
  body {
    background: var(--ink); color: var(--text); text-align: center;
    font-family: var(--font-body); font-size: var(--size); line-height: 1.65;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  a { color: var(--harbor-on-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a:hover { color: var(--white); }
  :focus-visible { outline: 2px solid var(--harbor-on-ink); outline-offset: 3px; border-radius: 6px; }
  button { font: inherit; color: inherit; cursor: pointer; }

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

  .draft { background: #0B0D12; color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .05em; padding: 8px 16px; border-bottom: 1px solid var(--rule); }
  .draft b { color: var(--white); }
  .todo { display: inline-block; max-width: 62em; text-align: center; background: #2A2612; border: 1px solid #5C5220; color: #E8D98A; font-family: var(--font-display); font-weight: 600; font-size: 12px; line-height: 1.55; padding: 8px 14px; border-radius: 8px; margin-top: 28px; }

  /* ---------- nav ---------- */
  .top { position: sticky; top: 0; z-index: 20; background: rgba(16,19,26,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
  .top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 12px; }
  .mark { justify-self: start; display: block; line-height: 0; }
  .mark img { height: 46px; width: auto; display: block; }
  .menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
  .menu > li { position: relative; }
  .menu a, .menu .dd-btn {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
    font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text);
    text-decoration: none; padding: 10px 14px; border-radius: 999px;
  }
  .menu a[aria-current="page"] { color: var(--white); box-shadow: inset 0 -2px 0 var(--harbor-on-ink); border-radius: 0; }
  .menu a:hover, .menu .dd-btn:hover, .menu .dd-btn[aria-expanded="true"] { background: var(--raise); color: var(--white); }
  .sep { color: var(--rule); font-family: var(--font-display); user-select: none; }
  .caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
  .dd {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    min-width: 240px; white-space: nowrap; background: var(--raise); border: 1px solid var(--rule); border-radius: 14px;
    padding: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.5); text-align: left;
  }
  .dd[hidden] { display: none; }
  .dd a, .dd button {
    display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%;
    background: none; border: 0; border-radius: 9px; padding: 12px 14px; text-decoration: none;
    font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); text-align: left;
  }
  .dd a:hover, .dd button:hover { background: #1F2430; color: var(--white); }
  .dd small { font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--harbor-on-ink); white-space: nowrap; }
  .stay { justify-self: end; }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-block; border: 0; border-radius: 999px; padding: 12px 22px; text-decoration: none;
    font-family: var(--font-display); font-weight: 700; font-size: 15px; background: var(--white); color: var(--ink);
  }
  .btn:hover { background: #DDE1E6; color: var(--ink); }
  .btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px #3A404C; }
  .btn.ghost:hover { background: var(--raise); color: var(--white); }

  /* ---------- the pill (per Jason's reference) ---------- */
  .pill {
    display: flex; align-items: center; gap: 8px; width: min(100%, 540px); margin-inline: auto;
    background: #151922; border: 1px solid #2C313C; border-radius: 999px; padding: 6px 6px 6px 26px;
  }
  .pill:focus-within { border-color: var(--harbor-on-ink); }
  .pill input {
    flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--white);
    font-family: var(--font-display); font-weight: 600; font-size: 17px; padding: 12px 0;
  }
  .pill input::placeholder { color: #6E7480; }
  .pill button {
    flex: 0 0 auto; border: 0; border-radius: 999px; background: #FAFAFA; color: var(--ink);
    font-family: var(--font-display); font-weight: 700; font-size: 17px; padding: 14px 34px;
  }
  .pill button:hover { background: #DDE1E6; }
  @media (max-width: 460px) { .pill { padding-left: 18px; } .pill button { padding-inline: 20px; font-size: 15px; } .pill input { font-size: 15px; } }

  /* ---------- type ---------- */
  .eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--harbor-on-ink); margin: 0 0 14px; }
  h1, h2, h3 { font-family: var(--font-display); color: var(--white); margin: 0; text-wrap: balance; }
  h1 { font-weight: 800; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.06; letter-spacing: -0.02em; max-width: 17em; margin-inline: auto; }
  h2 { font-weight: 800; font-size: clamp(27px, 3.8vw, 40px); line-height: 1.1; letter-spacing: -0.015em; }
  .dek { color: #C3C8CF; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; margin: 22px auto 0; max-width: 31em; text-wrap: pretty; }

  .hero { min-height: min(calc(100dvh - 190px), 720px); display: grid; align-items: center; }
  .hero .wrap { padding-block: clamp(56px, 9vw, 110px); width: 100%; }
  h1.page { font-size: clamp(34px, 5vw, 54px); }
  .page-head .wrap { padding-block: clamp(56px, 8vw, 96px) 0; }
  .page-head p { margin: 18px auto 0; color: #C3C8CF; max-width: 34em; }
  .page-body .wrap { padding-block: clamp(36px, 5vw, 56px) clamp(64px, 9vw, 110px); }
  .hero .pill { margin-top: 38px; }
  .under { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--muted); margin: 16px 0 0; }

  section.band { border-top: 1px solid var(--rule); }
  section.band .wrap { padding-block: clamp(56px, 8vw, 100px); }
  .head { max-width: 40em; margin: 0 auto 40px; }
  .head p { margin: 14px 0 0; color: var(--muted); }

  /* ---------- cards ---------- */
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
  .card { background: var(--raise); border: 1px solid var(--rule); border-radius: 16px; padding: 30px 26px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
  .card h3 { font-weight: 700; font-size: 21px; line-height: 1.25; }
  .card p { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: #C3C8CF; max-width: 34em; }
  .card .act { margin-top: auto; padding-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .card.real { grid-column: 1 / -1; padding-block: 40px; }
  .tag { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 5px 12px; margin-bottom: 16px; }
  .tag.live { background: var(--harbor); color: var(--white); }
  .tag.soon { box-shadow: inset 0 0 0 1px #3A404C; color: var(--muted); }
  body:not(.unlocked) .when-open { display: none; }
  body.unlocked .when-locked { display: none; }

  .prod .status { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
  .prod .status.on { color: #8FD0B4; }
  .prod .link { margin-top: auto; padding-top: 18px; font-family: var(--font-display); font-weight: 600; font-size: 14px; }
  .prod .link.none { color: #5C626D; }

  .prose { max-width: 36em; margin-inline: auto; }
  .prose p { margin: 0 0 1em; text-wrap: pretty; }
  .pull { font-style: italic; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.4; color: var(--white); margin: 1.5em auto; max-width: 24em; }
  .pull::before, .pull::after { content: ""; display: block; width: 44px; height: 2px; background: var(--harbor-on-ink); margin: 0 auto 22px; }
  .pull::after { margin: 22px auto 0; }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--rule); background: #0B0D12; }
  footer .wrap { padding-block: clamp(56px, 8vw, 92px) 40px; }
  footer .sig { height: 96px; width: auto; }
  footer h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 22px; }
  footer .pill { margin-top: 26px; }
  .social { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; list-style: none; margin: 36px 0 0; padding: 0; }
  .social a { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); text-decoration: none; padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px #2C313C; }
  .social a:hover { background: var(--raise); color: var(--white); }
  .legal { margin: 40px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: #6E7480; }

  /* ---------- popup ---------- */
  dialog { border: 0; padding: 0; background: transparent; color: var(--text); width: min(100% - 32px, 480px); max-height: calc(100dvh - 32px); text-align: center; }
  dialog:focus, .sheet:focus { outline: none; }
  dialog::backdrop { background: rgba(6,8,11,.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  dialog[open] { animation: rise .22s cubic-bezier(.2,.8,.2,1); }
  @keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
  @media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } html { scroll-behavior: auto; } }
  .sheet { position: relative; background: var(--raise); border: 1px solid #2C313C; border-radius: 22px; padding: 38px clamp(22px, 5vw, 38px) 32px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
  .x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font-family: var(--font-display); font-size: 22px; line-height: 1; }
  .x:hover { background: #1F2430; color: var(--white); }
  .sheet img.sig { height: 58px; width: auto; margin-bottom: 14px; }
  .sheet h3 { font-weight: 800; font-size: 25px; line-height: 1.15; letter-spacing: -0.01em; }
  .sheet .sub { margin: 10px auto 24px; color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 26em; }
  .field { display: block; margin-top: 14px; }
  .field span { display: block; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 8px; }
  .field input, .field textarea {
    width: 100%; background: #10131A; border: 1px solid #2C313C; border-radius: 14px; color: var(--white);
    font-family: var(--font-display); font-weight: 600; font-size: 16px; padding: 14px 16px; text-align: center; resize: none;
  }
  .field input:focus, .field textarea:focus { outline: 0; border-color: var(--harbor-on-ink); }
  .field ::placeholder { color: #6E7480; }
  .sheet .btn { width: 100%; margin-top: 20px; padding-block: 15px; font-size: 16px; }
  .sheet .btn:disabled { background: #2C313C; color: #6E7480; cursor: not-allowed; }
  .fine { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: #6E7480; margin: 14px 0 0; }
  .follow { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0 0 24px; padding: 0 0 24px; border-bottom: 1px solid var(--rule); }
  .follow a { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text); text-decoration: none; padding: 9px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px #2C313C; }
  .follow a:hover { background: #1F2430; color: var(--white); }
  .gets { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

  @media (max-width: 760px) {
    .top .wrap { flex-wrap: wrap; row-gap: 4px; }
    .menu { order: 3; flex: 1 0 100%; justify-content: center; }
    .menu a, .menu .dd-btn { padding-inline: 10px; font-size: 14px; }
    .mark img { height: 40px; }
    .menu > li { position: static; }
    .menu { position: relative; }
    .dd { left: 50%; min-width: 0; width: min(280px, calc(100vw - 32px)); }
  }

/* ---------- draft 4 ---------- */
.pill-form { width: min(100%, 540px); margin-inline: auto; }
.hero .pill-form { margin-top: 38px; } .hero .pill, footer .pill { margin-top: 0; }
footer .pill-form { margin-top: 26px; }
.pill.bad, .field input.bad { border-color: #C9685F; }
.pill.good, .field input.good { border-color: #4E8F78; }
.hint { font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1.45; color: #E59A92; margin: 10px 0 0; }
.hint button { background: none; border: 0; padding: 0; color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.follow { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }
.follow-note { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--muted); margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
[hidden] { display: none !important; }
/* "You're in." optional name ask */
.name-ask { margin: 0 0 26px; }
.name-ask label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 8px; }
.name-row { display: flex; gap: 8px; }
.name-row input { flex: 1; min-width: 0; background: #10131A; border: 1px solid #2C313C; border-radius: 999px; color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 16px; padding: 12px 18px; text-align: center; }
.name-row input:focus { outline: 0; border-color: var(--harbor-on-ink); }
.name-row input::placeholder { color: #6E7480; }
.sheet .name-row .btn { width: auto; margin: 0; padding: 12px 22px; font-size: 15px; }
.name-thanks { margin: 0 0 26px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--harbor-on-ink); }
/* Honeypot: off-screen for people, still in the form for bots. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sheet .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.human { height: 0; overflow: hidden; } .human.ask { height: auto; overflow: visible; margin-top: 16px; }   /* Turnstile: opens only if Cloudflare wants a click */
#done-open { margin-top: 4px; }
/* "You're in." popup: YouTube is the one big action, three smaller socials under it. */
.welcome .sub { margin-bottom: 26px; }
.welcome .yt { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; background: var(--harbor); color: var(--white); border-radius: 16px; padding: 18px 20px; font-family: var(--font-display); font-weight: 700; font-size: 17px; text-decoration: none; transition: background .15s; }
.welcome .yt:hover { background: #245F6E; }
.welcome .yt svg { width: 30px; height: 30px; fill: currentColor; flex: none; }
.welcome .also { margin: 28px 0 12px; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6E7480; }
.welcome .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.welcome .trio a { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 6px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px #2C313C; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 13px; text-decoration: none; }
.welcome .trio a:hover { background: #1F2430; color: var(--white); }
.welcome .trio svg { width: 24px; height: 24px; fill: currentColor; }
/* Tools page: full-width "Ready now" cards, then the "In the works" cards centered in rows of up to three. */
.cards.shelf { display: flex; flex-wrap: wrap; justify-content: center; }
.cards.shelf .card { flex: 1 1 300px; max-width: calc((100% - 32px) / 3); }
.cards.shelf .card.real { flex-basis: 100%; max-width: none; }
@media (max-width: 700px) { .cards.shelf .card { max-width: none; } }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); max-width: 820px; margin-inline: auto; }
.card.ph .thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; margin-bottom: 20px; background: repeating-linear-gradient(135deg, #1B202B 0 12px, #181C26 12px 24px); box-shadow: inset 0 0 0 1px var(--rule); }
.fnav { display: flex; justify-content: center; gap: clamp(36px, 8vw, 110px); flex-wrap: wrap; margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--rule); }
.fnav h4 { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--white); margin: 0 0 14px; }
.fnav a { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--muted); text-decoration: none; padding: 7px 0; }
.fnav a:hover { color: var(--white); }

/* ---------- hero photo (placement from the tuner, 2026-09-21) ---------- */
.hero { position: relative; }
.hero .wrap { position: relative; z-index: 2; }
/* Left edge pinned where the tuner put it; width capped so the right edge stays 32px clear of the headline
   (the headline's left edge sits at 50% - 456px). Identical to the tuner at 1920 and wider; shrinks below. */
.hero-photo { position: absolute; z-index: 1; left: 1.65%; top: 41.3%; width: min(22.9%, calc(48.35% - 488px)); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; overflow: hidden; }
.hero-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 23.5%; transform: scale(1.13); transform-origin: 50% 23.5%; }
@media (max-width: 1499px) {   /* no room beside the headline: photo sits above it, centered */
  .hero { display: block; min-height: 0; padding-top: clamp(40px, 7vw, 72px); }
  .hero-photo { position: static; transform: none; width: clamp(150px, 22vw, 220px); margin-inline: auto; }
  .hero .wrap { padding-top: 28px; }
}

/* ---------- About photo (placement from the tuner, 2026-09-24) ---------- */
main:has(> .about-photo) { position: relative; }
.about-photo ~ section .wrap { position: relative; z-index: 2; }
.about-photo { position: absolute; z-index: 1; left: 84.2%; top: 392px; width: 18.9%; aspect-ratio: 2 / 3; transform: translate(-50%, -50%); border-radius: 24px; overflow: hidden; }
.about-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (max-width: 1599px) {   /* no room beside the headline: photo sits above it, centered */
  .about-photo { position: static; transform: none; width: clamp(160px, 26vw, 240px); margin: clamp(40px, 7vw, 72px) auto 0; }
  .about-photo ~ .page-head .wrap { padding-top: 28px; }
}

/* ---------- privacy page (ADR-003, 2026-09-24) ---------- */
.policy { text-align: left; }
/* Home "working on" cards: artwork on a darker panel in place of the striped placeholder. */
.card .thumb.art { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; margin-bottom: 20px; background: #10131A; box-shadow: inset 0 0 0 1px var(--rule); color: var(--white); overflow: hidden; }
.card .thumb.logos { gap: 12px; padding: 0 16px; align-content: center; }
.card .thumb.logos svg { width: 22px; height: 22px; fill: currentColor; opacity: .92; }
.card .thumb.octo svg { width: 96px; height: 96px; }
.card .thumb.doc svg { width: 64px; height: 64px; stroke-width: 1.5; }
.prose a { color: var(--harbor-on-ink); text-underline-offset: 3px; }
/* Long-form story pages (About, Vision): left-aligned so each line starts in the same place (Jason, 2026-09-30). */
.prose.story { text-align: left; }
.policy h2 { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; margin: 2em 0 .5em; }
.policy h2:first-child { margin-top: 0; }