/* ============================================================
     Naybor – two worlds, same two hues with their roles swapped.

       night  : amber windows burning in an indigo sky
       day    : indigo ink on a limewash wall, marigold accents

     Dark is the base, so bare :root is the night palette; the two
     light blocks below cover a light OS with no explicit choice,
     and an explicit light choice. Nothing is coloured outside a
     token, so both worlds resolve as complete sets.
     ============================================================ */
    :root {
    --sky-top:    #110C24;
    --sky-mid:    #1D1539;
    --sky-low:    #2E2050;
    --ground:     #130F26;
    --panel:      #1D1539;

    --ink:        #FFF8F0;
    --ink-mid:    #BDB4D4;
    --ink-dim:    #8D84A8;
    --line:       rgba(255, 248, 240, .14);
    --line-soft:  rgba(255, 248, 240, .07);

    --window:     #A26EF5;   /* accent as a surface  */
    --accent-ink: #C9A2FF;   /* accent as type       */
    --on-accent:  #1C1233;
    --accent-glow: rgba(162, 110, 245, .55);
    --full:       #A9E8CE;

    --field:      rgba(255, 248, 240, .05);
    --field-hi:   rgba(255, 248, 240, .085);
    --wash:       rgba(46, 32, 80, .45);
    --fade-0:     rgba(19, 15, 38, 0);
    --fade-1:     rgba(19, 15, 38, .82);

    --glow-warm:  rgba(255, 194, 75, .75);
    --glow-tube:  rgba(169, 232, 206, .6);
    --glow-tv:    rgba(111, 168, 255, .55);

    /* toran: marigolds and mango leaves */
    --marigold:   #F5A623;
    --marigold-2: #E8632B;
    --leaf:       #4EA76B;
    --string:     rgba(255, 248, 240, .3);

    /* canvas skyline - windows stay warm; the night itself is brand violet */
    --c-near-set: #0B0819;
    --c-far-set:  #171130;
    --c-tank:     #0A0716;
    --c-off-near: rgba(190, 170, 240, .09);
    --c-off-far:  rgba(190, 170, 240, .05);
    --c-warm:     #FFC24B;
    --c-hot:      #FFD98A;
    --c-tube:     #A9E8CE;
    --c-tv:       #6FA8FF;
    --c-glow:     .5;

    --display: "Anek Latin", "Trebuchet MS", system-ui, sans-serif;
    --body: "Newsreader", Georgia, "Times New Roman", serif;

    --page-pad: clamp(1.35rem, 5.5vw, 4rem);
    --wrap: 1140px;
    --measure: 54ch;
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --sky-top:    #E2D8F6;
      --sky-mid:    #EFE9FA;
      --sky-low:    #F8ECDA;
      --ground:     #FBF9FF;
      --panel:      #FFFFFF;

      --ink:        #2E2050;
      --ink-mid:    #544A70;
      --ink-dim:    #6E6590;
      --line:       rgba(46, 32, 80, .17);
      --line-soft:  rgba(46, 32, 80, .09);

      --window:     #7B42D6;
      --accent-ink: #7B42D6;
      --on-accent:  #FFF8F0;
      --accent-glow: rgba(123, 66, 214, .38);
      --full:       #12795A;

      --field:      rgba(46, 32, 80, .05);
      --field-hi:   rgba(46, 32, 80, .08);
      --wash:       rgba(162, 110, 245, .08);
      --fade-0:     rgba(251, 249, 255, 0);
      --fade-1:     rgba(251, 249, 255, .82);

      --glow-warm:  rgba(242, 165, 12, .5);
      --glow-tube:  rgba(18, 121, 90, .45);
      --glow-tv:    rgba(190, 58, 118, .45);

      --marigold:   #EE8B0B;
      --marigold-2: #D2402A;
      --leaf:       #2E7D4F;
      --string:     rgba(46, 32, 80, .32);

      /* painted apartment blocks - the colours Indian buildings are actually
         painted, hazier in the far row so depth still reads */
      --c-near-set: #D98E5A, #7FB3A0, #E0B04A, #9A8FC4, #CE7264, #7FA6CE, #C4A87C;
      --c-far-set:  #CBBFB0, #B6C9BF, #D6C7A6, #BFB9CE, #CDB2AC, #B4C2D2, #C6BCA8;
      --c-tank:     #3A3357;
      --c-off-near: rgba(30, 22, 34, .42);
      --c-off-far:  rgba(30, 22, 34, .2);
      --c-warm:     #F2A50C;
      --c-hot:      #FFD166;
      --c-tube:     #0E8A6B;
      --c-tv:       #C74B8B;
      --c-glow:     .22;
    }
  }

  :root[data-theme="light"] {
    --sky-top:    #E2D8F6;
    --sky-mid:    #EFE9FA;
    --sky-low:    #F8ECDA;
    --ground:     #FBF9FF;
    --panel:      #FFFFFF;

    --ink:        #2E2050;
    --ink-mid:    #544A70;
    --ink-dim:    #6E6590;
    --line:       rgba(46, 32, 80, .17);
    --line-soft:  rgba(46, 32, 80, .09);

    --window:     #7B42D6;
    --accent-ink: #7B42D6;
    --on-accent:  #FFF8F0;
    --accent-glow: rgba(123, 66, 214, .38);
    --full:       #12795A;

    --field:      rgba(46, 32, 80, .05);
    --field-hi:   rgba(46, 32, 80, .08);
    --wash:       rgba(162, 110, 245, .08);
    --fade-0:     rgba(251, 249, 255, 0);
    --fade-1:     rgba(251, 249, 255, .82);

    --glow-warm:  rgba(242, 165, 12, .5);
    --glow-tube:  rgba(18, 121, 90, .45);
    --glow-tv:    rgba(190, 58, 118, .45);

    --marigold:   #EE8B0B;
    --marigold-2: #D2402A;
    --leaf:       #2E7D4F;
    --string:     rgba(46, 32, 80, .32);

    /* painted apartment blocks - the colours Indian buildings are actually
       painted, hazier in the far row so depth still reads */
    --c-near-set: #D98E5A, #7FB3A0, #E0B04A, #9A8FC4, #CE7264, #7FA6CE, #C4A87C;
    --c-far-set:  #CBBFB0, #B6C9BF, #D6C7A6, #BFB9CE, #CDB2AC, #B4C2D2, #C6BCA8;
    --c-tank:     #3A3357;
    --c-off-near: rgba(30, 22, 34, .42);
    --c-off-far:  rgba(30, 22, 34, .2);
    --c-warm:     #F2A50C;
    --c-hot:      #FFD166;
    --c-tube:     #0E8A6B;
    --c-tv:       #C74B8B;
    --c-glow:     .22;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(1.05rem, 1.55vw, 1.2rem);
    font-weight: 400;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }

  h1, h2, .kicker, .brand, button, select, input, .label {
    font-family: var(--display);
    font-variation-settings: "wdth" 100;
  }
  h1, h2 { margin: 0; font-weight: 700; line-height: .96; letter-spacing: -.028em; text-wrap: balance; }
  p { margin: 0; }
  a { color: inherit; }
  button { font: inherit; color: inherit; cursor: pointer; }

  :focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 3px;
    border-radius: 3px;
  }

  .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--page-pad); }
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .label {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }

  /* ---------------- top bar (not sticky – it's a sign, not a toolbar) --------------- */
  .top { padding-block: 1.6rem; }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .brand { display: flex; align-items: center; gap: .6rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
  .brand svg { width: 20px; height: 26px; display: block; }
  .top-right { display: flex; align-items: center; gap: .8rem; }
  /* The one action in the top bar. Same colours as the hero's button, a size
     down, so it reads as the same offer rather than a competing second one. */
  /* It sits directly beside the 40px round lamp, so it takes the same height
     and the same round geometry — a pill and a circle read as one pair, where
     a sharp-cornered rectangle beside a circle reads as two loose objects. */
  .top-cta {
    display: inline-flex; align-items: center;
    height: 40px; padding-inline: 1.3rem;
    background: var(--window); color: var(--on-accent);
    border: 1px solid var(--window); border-radius: 999px;
    font-size: .9rem; font-weight: 700; line-height: 1; letter-spacing: .01em;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 2px 14px -8px var(--accent-glow);
    transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, filter .2s ease;
  }
  .top-cta:hover {
    filter: brightness(1.06); transform: translateY(-1px);
    box-shadow: 0 10px 26px -10px var(--accent-glow);
  }
  .top-cta:active { transform: translateY(0); box-shadow: 0 2px 10px -8px var(--accent-glow); }
  @media (prefers-reduced-motion: reduce) {
    .top-cta:hover, .top-cta:active { transform: none; }
  }
  @media (max-width: 760px) { .top-cta { height: 36px; padding-inline: 1.05rem; font-size: .85rem; } }

  /* a diya for the night, a sun for the day */
  .lamp {
    background: none; border: 1px solid var(--line); border-radius: 999px;
    width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink-mid);
    transition: color .18s ease, border-color .18s ease;
  }
  .lamp:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
  .lamp svg { width: 21px; height: 21px; }
  .t-diya { display: none; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .t-sun { display: none; }
    :root:not([data-theme="dark"]) .t-diya { display: block; }
  }
  :root[data-theme="light"] .t-sun { display: none; }
  :root[data-theme="light"] .t-diya { display: block; }

  /* ---------------------------- the night ---------------------------- */
  .hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%);
  }

  /* the jaali screen you're looking at the city through */
  .jaali-panel {
    position: absolute; z-index: 0; right: 0; top: 0;
    width: min(46%, 540px); height: 66%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom left, #000 12%, transparent 72%);
    mask-image: linear-gradient(to bottom left, #000 12%, transparent 72%);
  }
  @media (max-width: 900px) { .jaali-panel { display: none; } }

  .hero-inner {
    position: relative; z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.9rem;
    padding-block: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 4vh, 2.5rem);
  }
  .hero-copy { max-width: 44rem; }
  h1 {
    font-size: clamp(2.6rem, 6.4vw, 5.2rem);
    font-variation-settings: "wdth" 92;
    max-width: 13ch;          /* ch here resolves against the headline's own size */
    margin-bottom: 1.35rem;
  }
  h1 em {
    font-family: var(--body);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--accent-ink);
  }
  .sub {
    max-width: var(--measure);
    color: var(--ink-mid);
    font-size: clamp(1.05rem, 1.5vw, 1.24rem);
    line-height: 1.6;
  }

  /* --------------------------- the sign-up --------------------------- */
  .join { max-width: 560px; display: flex; flex-direction: column; gap: .9rem; }

  .picker { position: relative; }
  .picker select {
    appearance: none; -webkit-appearance: none;
    width: 100%;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: .5rem 2rem .55rem 0;
    cursor: pointer;
    transition: border-color .18s ease;
  }
  .picker select:hover { border-bottom-color: var(--accent-ink); }
  .picker select option { background: var(--panel); color: var(--ink); }
  .picker::after {
    content: ""; position: absolute; right: .35rem; top: 46%;
    width: 7px; height: 7px;
    border-right: 1.6px solid var(--ink-dim); border-bottom: 1.6px solid var(--ink-dim);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
  }

  .count-line {
    font-size: 1.06rem;
    color: var(--ink-mid);
    line-height: 1.5;
    min-height: 3rem;
  }
  .count-line b {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.5em;
    color: var(--accent-ink);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    vertical-align: -.05em;
  }
  .count-line .full { color: var(--full); font-family: var(--display); font-weight: 600; }

  .row { display: flex; gap: .6rem; flex-wrap: wrap; }
  .row input {
    flex: 1 1 15rem; min-width: 0;
    font-family: var(--display);
    font-size: 1rem;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: .92rem 1rem;
    transition: border-color .18s ease, background .18s ease;
  }
  .row input::placeholder { color: var(--ink-dim); }
  .row input:hover { background: var(--field-hi); }
  .row input:focus-visible { border-color: var(--accent-ink); outline: none; background: var(--field-hi); }
  .row input.bad { border-color: var(--accent-ink); }

  .go {
    flex: 0 0 auto;
    background: var(--window);
    color: var(--on-accent);
    border: 1px solid var(--window);
    border-radius: 2px;
    padding: .92rem 1.6rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.005em;
    transition: box-shadow .2s ease, transform .12s ease, filter .2s ease;
  }
  .go:hover { filter: brightness(1.08); box-shadow: 0 0 34px -6px var(--accent-glow); }
  .go:active { transform: translateY(1px); }
  .go[disabled] { opacity: .6; cursor: default; }

  @media (max-width: 520px) {
    .row { flex-direction: column; }
    /* flex-basis becomes a height once the row stacks – pin it back to content */
    .row input { flex: 0 0 auto; width: 100%; }
    .go { width: 100%; }
  }

  .fine { font-size: .88rem; color: var(--ink-dim); line-height: 1.5; }
  .oops { font-size: .92rem; color: var(--accent-ink); min-height: 1.35em; }

  /* success */
  .done { display: none; max-width: 560px; }
  .done.on { display: block; animation: lift .55s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes lift { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .done h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); margin-bottom: .6rem; }
  .done h2 span { color: var(--accent-ink); }
  .done > p { color: var(--ink-mid); max-width: var(--measure); }
  .invite {
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: .7rem;
  }
  .invite p { font-size: .95rem; color: var(--ink-mid); max-width: 46ch; }
  .invite-row { display: flex; gap: .5rem; }
  .invite-row input {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--display); font-size: .92rem; color: var(--ink-mid);
    background: var(--field);
    border: 1px solid var(--line); border-radius: 2px; padding: .7rem .85rem;
  }
  .copy {
    background: transparent; color: var(--ink);
    border: 1px solid var(--line); border-radius: 2px;
    padding: 0 1.1rem; font-size: .92rem; font-weight: 600;
    transition: border-color .18s ease, color .18s ease;
  }
  .copy:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
  .again {
    align-self: flex-start; margin-top: 1.1rem;
    background: none; border: none; padding: 0;
    font-family: var(--body); font-size: .95rem; color: var(--ink-dim);
    text-decoration: underline; text-underline-offset: 4px;
  }
  .again:hover { color: var(--ink); }

  /* ------------------------- the skyline ------------------------- */
  .sky-wrap { position: relative; height: clamp(180px, 26vh, 320px); flex: 0 0 auto; }
  #sky { display: block; width: 100%; height: 100%; }
  .sky-wrap::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
    background: linear-gradient(180deg, var(--fade-0) 0%, var(--fade-1) 62%, var(--ground) 100%);
    pointer-events: none;
  }
  .sky-note {
    position: absolute; z-index: 2; left: var(--page-pad); bottom: .75rem;
    font-style: italic; font-size: .88rem; color: var(--ink-mid);
  }

  /* ------------------------- quiet sections ------------------------- */
  section.band { padding-block: clamp(5rem, 13vh, 9rem); scroll-margin-top: 2rem; }

  .stanza { max-width: 46rem; }
  .stanza h2 {
    font-size: clamp(2rem, 4.6vw, 3.35rem);
    font-variation-settings: "wdth" 94;
    margin-bottom: 1.6rem;
  }
  .stanza p + p { margin-top: 1.1rem; }
  .stanza p { color: var(--ink-mid); max-width: var(--measure); }
  .kicker-row {
    margin-top: 2.8rem;
    display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
    flex-wrap: wrap;
  }
  .kicker {
    flex: 1 1 16rem;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--ink);
    max-width: 20rem;
  }
  .kicker b { color: var(--accent-ink); font-weight: 700; }

  /* Warli: the tarpa ring – five figures, hands joined */
  .warli { flex: 0 0 auto; width: clamp(170px, 24vw, 232px); height: auto; }
  .warli .w-body { fill: var(--ink); }
  .warli .w-limb { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; fill: none; }
  .warli .w-arm  { stroke: var(--window); stroke-width: 2.2; stroke-linecap: round; fill: none; }
  .warli .w-hand { fill: var(--window); }

  /* moments: a list, not cards */
  /* These two sections are one thought, so they close up rather than sitting
     a full band apart. Both need .band in the selector to out-specify
     `section.band` above, or the padding silently stays put. */
  .band.stanza-band { padding-bottom: clamp(3rem, 7vh, 4.5rem); }
  .band.beats-band { padding-top: 0; }

  .beats { max-width: 46rem; }
  .beats ul { margin: 2rem 0 0; padding: 0; }
  .beats li {
    list-style: none;
    display: flex; align-items: baseline; gap: 1.1rem;
    padding-block: 1.15rem;
    border-top: 1px solid var(--line-soft);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1.4;
  }
  .beats li:last-child { border-bottom: 1px solid var(--line-soft); }
  .beats .lit {
    flex: 0 0 auto; width: 7px; height: 11px; border-radius: 1px; margin-top: .1rem;
    background: var(--c-warm);
    box-shadow: 0 0 12px var(--glow-warm);
  }
  .beats li:nth-child(2) .lit { background: var(--c-tube); box-shadow: 0 0 12px var(--glow-tube); }
  .beats li:nth-child(3) .lit { background: var(--c-tv); box-shadow: 0 0 12px var(--glow-tv); }

  /* care: three plain columns, no boxes */
  .care { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--wash), transparent 70%); }
  .care-grid { display: grid; gap: 2rem 2.75rem; margin-top: 2.2rem; }
  @media (min-width: 820px) { .care-grid { grid-template-columns: repeat(3, 1fr); } }
  .care-grid p { font-size: 1rem; color: var(--ink-mid); padding-top: 1.1rem; border-top: 1px solid var(--line); }

  /* closing – a toran strung across the doorway you're being invited through */
  .band.close-band { position: relative; border-top: 1px solid var(--line); padding-top: clamp(6rem, 15vh, 9.5rem); }
  .toran-wrap { position: absolute; inset: 0 0 auto 0; height: 78px; overflow: hidden; pointer-events: none; }
  #toran { display: block; width: 100%; height: 78px; }
  .t-string { fill: none; stroke: var(--string); stroke-width: 1.4; }
  .t-stem { fill: none; stroke: var(--leaf); stroke-width: 1.6; stroke-linecap: round; }
  .t-leaf { fill: var(--leaf); }
  .t-vein { fill: none; stroke: var(--ground); stroke-width: 1; opacity: .5; }
  .t-marigold { fill: var(--marigold); }
  .t-core { fill: var(--marigold-2); }
  .close-band h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-variation-settings: "wdth" 94; margin-bottom: 1.2rem; }
  .close-band p { color: var(--ink-mid); max-width: var(--measure); }
  .back-up {
    display: inline-block; margin-top: 2rem;
    font-family: var(--display); font-weight: 700; font-size: 1rem;
    color: var(--on-accent); background: var(--window);
    border: none; border-radius: 2px; padding: .9rem 1.7rem;
    text-decoration: none;
    transition: box-shadow .2s ease, filter .2s ease;
  }
  .back-up:hover { filter: brightness(1.08); box-shadow: 0 0 34px -6px var(--accent-glow); }



  /* =================== site-wide footer =================== */
  .site-foot { border-top: 1px solid var(--line); background: var(--ground); }
  .foot-cols {
    display: grid; gap: 2.4rem 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: clamp(2.75rem, 7vh, 4.25rem) 2.25rem;
  }
  @media (min-width: 680px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .foot-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .foot-col h2 {
    font-family: var(--display); font-size: .98rem; font-weight: 700;
    line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin-bottom: .95rem;
  }
  .foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
  .foot-col a { font-size: .93rem; color: var(--ink-mid); text-decoration: none; }
  .foot-col a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

  .foot-social { display: flex; justify-content: center; gap: .9rem; padding-bottom: 2.25rem; }
  .foot-social a {
    width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line);
    display: grid; place-items: center; color: var(--ink-mid);
    transition: color .18s ease, border-color .18s ease;
  }
  .foot-social a:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
  .foot-social svg { width: 19px; height: 19px; }

  .foot-base {
    border-top: 1px solid var(--line-soft);
    display: flex; flex-wrap: wrap; gap: 1rem 2rem;
    align-items: center; justify-content: space-between;
    padding-block: 1.6rem 2.75rem;
  }
  .foot-legal { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
  .foot-legal a {
    font-family: var(--display); font-size: .85rem; font-weight: 600;
    color: var(--ink-mid); text-decoration: none;
  }
  .foot-legal a:hover { color: var(--accent-ink); }
  .foot-made { font-size: .85rem; font-style: italic; color: var(--ink-dim); }

  /* =================== document pages =================== */
  .doc { padding-block: clamp(2rem, 6vh, 3.5rem) clamp(4rem, 10vh, 6.5rem); }
  .crumb {
    font-family: var(--display); font-size: .8rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-dim); text-decoration: none; display: inline-block; margin-bottom: 1.75rem;
  }
  .crumb:hover { color: var(--accent-ink); }
  .doc-head { max-width: 46rem; margin-bottom: 2.75rem; }
  .doc-head h1 {
    font-size: clamp(2rem, 4.8vw, 3.3rem);
    line-height: 1.04; max-width: none; margin-bottom: 1rem;
  }
  .doc-head .stand { color: var(--ink-mid); max-width: 40rem; }
  .doc-updated {
    font-family: var(--display); font-size: .76rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
    margin-top: 1.1rem;
  }

  .doc-body { max-width: 40rem; }
  .doc-body > * + * { margin-top: 1.15rem; }
  .doc-body h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.18;
    margin-top: 3rem; scroll-margin-top: 1.5rem;
  }
  .doc-body h3 {
    font-family: var(--display); font-size: 1.05rem; font-weight: 700;
    line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin-top: 2rem;
  }
  .doc-body p, .doc-body li { color: var(--ink-mid); }
  .doc-body ul, .doc-body ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .55rem; margin: 0; }
  .doc-body li::marker { color: var(--accent-ink); }
  .doc-body a { color: var(--accent-ink); text-underline-offset: 3px; }
  .doc-body strong { color: var(--ink); font-weight: 600; }
  .doc-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88em; background: var(--field); padding: .12em .38em; border-radius: 3px;
  }
  .doc-note {
    border-left: 2px solid var(--window);
    background: var(--wash);
    padding: 1rem 1.1rem 1rem 1.25rem;
  }
  .doc-note p { color: var(--ink); }
  .doc-note p + p { margin-top: .7rem; }
  .table-wrap { overflow-x: auto; }
  .doc-body table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 30rem; }
  .doc-body th, .doc-body td {
    text-align: left; padding: .75rem .7rem .75rem 0;
    border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink-mid);
  }
  .doc-body th {
    color: var(--ink); font-family: var(--display); font-weight: 700;
    font-size: .84rem; letter-spacing: .02em;
  }
  .fill { color: var(--accent-ink); font-weight: 600; }

  /* the footer only has three columns while the site is this small */
  @media (min-width: 680px) { .foot-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .foot-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 46rem; } }

  /* six links: two columns is honest, five was cosplay */
  @media (min-width: 680px) {
    .foot-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
  }
  @media (min-width: 1000px) {
    .foot-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
  }

  /* ---- footer, compact three-part layout ---- */
  .foot-grid {
    display: grid; gap: 2.25rem 2rem;
    grid-template-columns: 1fr;
    padding-block: clamp(2.5rem, 6vh, 3.75rem) 2rem;
  }
  @media (min-width: 720px) {
    .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; align-items: start; }
  }
  .foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
  .foot-brand .brand { font-size: 1.15rem; text-decoration: none; }
  .foot-brand p { font-size: .92rem; font-style: italic; color: var(--ink-dim); max-width: 24ch; }
  .foot-brand .foot-social { padding: 0; justify-content: flex-start; gap: .7rem; }
  .foot-brand .foot-social a { width: 38px; height: 38px; }

  .foot-copy { font-size: .85rem; color: var(--ink-dim); font-family: var(--display); }

  @media (min-width: 860px) {
    .foot-grid-4 { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  }

  /* ---- deletion request form ---- */
  .del-form { display: flex; flex-direction: column; gap: .55rem; max-width: 26rem; margin-block: 1.4rem .9rem; }
  .del-form .del-label { font-family: var(--display); font-size: .86rem; font-weight: 600; color: var(--ink-mid); margin-top: .5rem; }
  .del-form input {
    font-family: var(--display); font-size: 1rem; color: var(--ink);
    background: var(--field); border: 1px solid var(--line); border-radius: 2px; padding: .85rem 1rem;
  }
  .del-form input:focus-visible { border-color: var(--accent-ink); outline: none; background: var(--field-hi); }
  .del-form .picker select { font-size: .95rem; text-transform: none; letter-spacing: 0; }
  .del-form .go { margin-top: .8rem; }
  .del-form .fine { font-size: .85rem; color: var(--ink-dim); }

  /* ---- brand logo images: cream wordmark by night, ink wordmark by day ---- */
  .brand { display: inline-flex; align-items: center; }
  .brand img { display: block; width: auto; }
  .top .brand img { height: 30px; }
  .foot-brand .brand img { height: 26px; }
  .brand img.l-light { display: none; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .brand img.l-dark { display: none; }
    :root:not([data-theme="dark"]) .brand img.l-light { display: block; }
  }
  :root[data-theme="light"] .brand img.l-dark { display: none; }
  :root[data-theme="light"] .brand img.l-light { display: block; }


/* ---- cities marquee (home) ---- */
.cities-nav{
  border-top:1px solid var(--line-soft);
  padding:3.4rem 0 4rem;
  overflow:hidden;
}
.city-defs{position:absolute;width:0;height:0;overflow:hidden}
.cities-nav-label{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:0 0 2rem;
}
.cities-nav-label span{
  font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:600;
}
.cities-nav-label::before,.cities-nav-label::after{
  content:"";height:1px;width:min(16vw,110px);
  background:linear-gradient(90deg,transparent,var(--line));
}
.cities-nav-label::after{transform:scaleX(-1)}

.marquee{
  position:relative;overflow:hidden;padding:.55rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex;width:max-content;gap:1.1rem;padding-left:1.1rem;
  animation:cities-scroll 42s linear infinite;
  will-change:transform;
}
.cities-nav:hover .marquee-track,
.cities-nav:focus-within .marquee-track{animation-play-state:paused}

.chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.55rem;
  border:1px solid var(--line);border-radius:999px;
  background:var(--field);
  color:var(--ink-mid);text-decoration:none;
  font-size:1.08rem;font-weight:600;line-height:1;white-space:nowrap;
  transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease;
}
.chip-ic{
  width:1.9em;height:1.9em;flex:0 0 auto;
  color:var(--accent-ink);
  transition:color .2s ease,transform .2s ease;
}
.chip:hover,.chip:focus-visible{
  transform:translateY(-4px);
  border-color:var(--accent-ink);
  color:var(--ink);
  background:var(--wash);
  box-shadow:0 16px 34px -16px var(--accent-glow);
}
.chip:hover .chip-ic,.chip:focus-visible .chip-ic{
  color:var(--accent-ink);transform:translateY(-1px) scale(1.06);
}

@keyframes cities-scroll{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}

@media (max-width:600px){
  .chip{font-size:.98rem;padding:.7rem 1.2rem;gap:.55rem}
  .chip-ic{width:1.7em;height:1.7em}
  .cities-nav{padding:2.6rem 0 3rem}
}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding-left:0}
  .chip:hover,.chip:focus-visible{transform:none}
  .chip:hover .chip-ic,.chip:focus-visible .chip-ic{transform:none}
}

/* ---- careers: job application form ---- */
.apply-form { display: flex; flex-direction: column; gap: 1.15rem; max-width: 34rem; margin-block: 1.5rem 1rem; }
.apply-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .apply-form .grid2 { grid-template-columns: 1fr; } }
.apply-form .grp { display: flex; flex-direction: column; gap: .4rem; }
.apply-form label { font-family: var(--display); font-size: .86rem; font-weight: 600; color: var(--ink-mid); }
.apply-form label .req { color: var(--accent-ink); margin-left: .15em; }
.apply-form label .hint { font-family: inherit; font-weight: 500; text-transform: none; letter-spacing: 0; }
.apply-form input[type="text"], .apply-form input[type="email"], .apply-form input[type="tel"],
.apply-form input[type="url"], .apply-form input[type="date"], .apply-form textarea {
  font-family: var(--display); font-size: 1rem; color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: 2px;
  padding: .85rem 1rem; width: 100%; transition: border-color .18s ease, background .18s ease;
}
.apply-form textarea { font-family: inherit; font-size: .98rem; line-height: 1.55; resize: vertical; min-height: 5.4rem; }
.apply-form input:hover, .apply-form textarea:hover { background: var(--field-hi); }
.apply-form input:focus-visible, .apply-form textarea:focus-visible {
  border-color: var(--accent-ink); outline: none; background: var(--field-hi);
}
.apply-form input.bad, .apply-form textarea.bad { border-color: var(--accent-ink); }
.apply-form .picker { width: 100%; }
.apply-form .picker select { width: 100%; font-size: .98rem; text-transform: none; letter-spacing: 0; padding-block: .85rem; }
.apply-form .hint { font-size: .82rem; color: var(--ink-dim); line-height: 1.45; }
.apply-form .file-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.apply-form .file-btn {
  display: inline-block; background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 2px; padding: .78rem 1.25rem;
  font-family: var(--display); font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.apply-form .file-btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.apply-form input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.apply-form .file-name { font-size: .88rem; color: var(--ink-mid); }
.apply-form .consent { display: flex; align-items: flex-start; gap: .65rem; font-size: .86rem; line-height: 1.5; color: var(--ink-mid); }
.apply-form .consent input { margin-top: .25rem; flex: 0 0 auto; }
.apply-form .consent a { color: var(--accent-ink); }
.apply-form .go { margin-top: .3rem; align-self: flex-start; }
.apply-form .oops { font-size: .92rem; color: var(--accent-ink); min-height: 1.2em; }

.apply-done {
  display: none; max-width: 34rem; margin-block: 1.6rem 1rem;
  padding: 1.4rem 1.5rem; background: var(--wash); border-left: 2px solid var(--window);
}
.apply-done.on { display: block; animation: lift .55s cubic-bezier(.2,.7,.3,1) both; }
.apply-done h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.apply-done p { margin: 0; color: var(--ink-mid); }

/* ---- careers: list of open positions ---- */
.jobs-list { display: flex; flex-direction: column; gap: .9rem; max-width: 40rem; margin-block: 1.4rem 1rem; }
.job-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--field); border: 1px solid var(--line); border-left: 3px solid var(--window);
  border-radius: 4px; padding: 1.15rem 1.35rem; font-family: inherit;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.job-card:hover, .job-card:focus-visible { background: var(--field-hi); border-color: var(--accent-ink); outline: none; }
.job-card:hover { transform: translateX(2px); }
.job-card, .job-card:hover { text-decoration: none; color: inherit; }
.job-card h3 { margin: 0 0 .3rem; font-size: 1.08rem; color: var(--ink); }
.job-card-type { margin: 0 0 .5rem; font-size: .84rem; color: var(--ink-dim); }
.job-card-teaser { margin: 0 0 .6rem; font-size: .92rem; color: var(--ink-mid); }
.job-card-cta { font-family: var(--display); font-size: .84rem; font-weight: 700; color: var(--accent-ink); }
.job-card-cta--off { color: var(--ink-dim); }