/* Home page proposal (24 Oct): "the overlap takes over". The two circles are the page's
   architecture, not an illustration. Uses only the tokens in /styles.css.

   Geometry: two circles of diameter --D whose centres sit --d apart along one axis
   (--ax/--ay pick it). Each circle is centred on its box, then translated by half the
   distance. The lens is a copy of circle B drawn inside circle A, which clips it to
   their overlap. The finished overlap is the base style: no JS, reduced motion,
   unsupported browsers and the Function-filled page all rest there. */

.hh,.hc{--hh-band:#2B2A28;--hh-lens:#3C5A45;--on-accent:#131F1A;--hh-head:65px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hh,:root:not([data-theme="light"]) .hc{--hh-band:#1B271F;--hh-lens:#3F6450}}
:root[data-theme="dark"] .hh,:root[data-theme="dark"] .hc{--hh-band:#1B271F;--hh-lens:#3F6450}

/* Shared circle pair */
.hh-art{position:absolute;inset:0;pointer-events:none}
.hc .hh-art{overflow:clip}
.hh-c{--d:calc(var(--D)*.5);position:absolute;left:50%;top:50%;width:var(--D);height:var(--D);margin:calc(var(--D)/-2) 0 0 calc(var(--D)/-2);border-radius:50%;pointer-events:none}
.hh-a{overflow:hidden;transform:translate(calc(var(--ax)*var(--d)*-.5),calc(var(--ay)*var(--d)*-.5))}
.hh-b{transform:translate(calc(var(--ax)*var(--d)*.5),calc(var(--ay)*var(--d)*.5));border:2px solid var(--accent)}
.hh-a::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);opacity:.5}
.hh-lens{position:absolute;inset:0;border-radius:50%;background:var(--hh-lens);transform:translate(calc(var(--ax)*var(--d)),calc(var(--ay)*var(--d)))}

/* Hero: full-screen ink stage, circles side by side and bleeding off every edge. */
/* The section clips the bleed; the stage does not, so when it unpins the lens tip carries on behind the intro. */
.hh{position:relative;overflow:clip;
  --ax:1;--ay:0;--D:min(max(76vw,102svh),125svh);
  --la-x:18%;--la-y:20%;--lb-x:82%;--lb-y:20%;--hh-ext:calc(var(--D)/2)}
.hh-stage{position:relative;height:calc(100svh - var(--hh-head));min-height:440px}
.hh-label{position:absolute;left:var(--la-x);top:var(--la-y);transform:translate(-50%,-50%);margin:0;font:500 12px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.hh-label-b{left:var(--lb-x);top:var(--lb-y)}
.hh-copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 20px;text-align:center}
.hh-copy h1{margin:0;font:300 clamp(44px,7.4vw,108px)/.96 Fraunces,Georgia,serif;letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.hh-copy h1 span{display:block}
.hh-copy h1 span+span{font-style:italic}
.hh-what{margin:0;max-width:22em;font-size:clamp(16px,1.5vw,18px);color:var(--ink);text-wrap:balance}
.hh-meet{margin:0;font:500 12px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.hh-chip{margin:0;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--hh-band);font-size:14px;font-weight:500}
.hh-chip span{width:8px;height:8px;border-radius:50%;background:var(--hh-lens)}

/* Below the stage, still on the band: the plain explanation, quiet. It starts where the
   circles end, so the drawing finishes before the words begin. */
.hh-intro{position:relative;max-width:1200px;margin:0 auto;padding:max(56px,calc(var(--hh-ext) - (100svh - var(--hh-head))/2 + 40px)) 20px clamp(64px,10vh,104px);display:flex;flex-wrap:wrap;gap:28px 56px;align-items:flex-end;justify-content:space-between}
.hh-intro>p{flex:1 1 420px;margin:0;max-width:30em;font-size:clamp(19px,2.1vw,24px);line-height:1.5;text-wrap:pretty}
.hh-cta{flex:0 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hh-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;background:var(--accent);font-weight:500;text-decoration:none}
.band-ink a.hh-btn,.band-ink a.hh-btn:hover{color:var(--on-accent)}
.hh-btn:hover{filter:brightness(1.08)}
.hh-soon{font:500 12px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding-left:4px}

/* Portrait screens (phones, tablets upright): the circles stack, the lens lies across. */
@media (max-aspect-ratio:1/1){
  .hh{--ax:0;--ay:1;--D:min(112vw,68svh);--la-x:50%;--la-y:14%;--lb-x:50%;--lb-y:86%;--hh-ext:calc(var(--D)*.75)}
}
@media (max-width:720px){
  .hh-copy{gap:14px}
  .hh-copy h1{font-size:clamp(36px,10.6vw,56px)}
  .hh-what{display:none}
  .hh-a::after,.hh-b{border-width:1.5px}
}

/* The one moment: as you scroll, the circles start apart and close into the overlap,
   with the stage pinned. Scroll-driven, so it runs off the main thread and stops when
   you stop. Only where supported and wanted; everyone else sees the finished overlap. */
@keyframes hh-a{from{transform:translate(calc(var(--ax)*var(--D)*-.52),calc(var(--ay)*var(--D)*-.52))}}
@keyframes hh-b{from{transform:translate(calc(var(--ax)*var(--D)*.52),calc(var(--ay)*var(--D)*.52))}}
@keyframes hh-lens{from{transform:translate(calc(var(--ax)*var(--D)*1.04),calc(var(--ay)*var(--D)*1.04))}}
@keyframes hh-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hh-pin{height:calc(100svh - var(--hh-head) + 80svh);view-timeline:--hh block;view-timeline-inset:var(--hh-head) 0}
    .hh-stage{position:sticky;top:var(--hh-head)}
    .hh .hh-a,.hh .hh-b,.hh .hh-lens{animation:linear both;animation-timeline:--hh;animation-range:contain 0% contain 72%}
    .hh .hh-a{animation-name:hh-a}.hh .hh-b{animation-name:hh-b}.hh .hh-lens{animation-name:hh-lens}
    .hh .hh-meet,.hh .hh-chip{animation:hh-in linear both;animation-timeline:--hh;animation-range:contain 58% contain 80%}
  }
  /* No scroll timelines (Firefox today): the same close, once, on arrival. */
  @supports not (animation-timeline:view()){
    .hh .hh-a,.hh .hh-b,.hh .hh-lens{animation:1.4s cubic-bezier(.16,1,.3,1) .3s both}
    .hh .hh-a{animation-name:hh-a}.hh .hh-b{animation-name:hh-b}.hh .hh-lens{animation-name:hh-lens}
    .hh .hh-meet{animation:hh-in .6s ease-out 1.5s both}
    .hh .hh-chip{animation:hh-in .6s cubic-bezier(.16,1,.3,1) 1.8s both}
  }
}

/* Not dating: off the band now (the hero owns it), on the page surface. */
.home-nd .nd-all{color:var(--accent-text)}

/* Follow: the page closes on one huge lens, turned the other way from the hero. */
.hc{position:relative;overflow:clip;--ax:0;--ay:1;--D:min(84vw,1240px)}
.hc-in{position:relative;z-index:1;max-width:1200px;min-height:calc(var(--D)*.64);margin:0 auto;padding:104px 20px 112px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}
.hc-in h2{margin:0;font:300 clamp(44px,8vw,112px)/.96 Fraunces,Georgia,serif;letter-spacing:-.03em;max-width:10em;text-wrap:balance;color:var(--ink)}
.hc-in h2 span{font-style:italic}
.hc-kick{margin:0;font:500 12px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.hc-in>p:not(.hc-kick){margin:0;font-size:19px;max-width:26em;color:var(--ink);text-wrap:pretty}
.hc-btn{margin-top:10px;display:inline-flex;align-items:center;min-height:54px;padding:0 30px;border-radius:999px;background:var(--ink);font-weight:500;font-size:18px;text-decoration:none}
.band-ink a.hc-btn,.band-ink a.hc-btn:hover{color:var(--hh-band)}
.hc-btn:hover{filter:brightness(.94)}
@media (max-width:720px){.hc{--ax:1;--ay:0;--D:172vw}.hc-in{min-height:calc(var(--D)*.9)}.hc .hh-a::after,.hc .hh-b{border-width:1.5px}.hc-btn{font-size:16px;padding:0 24px;white-space:nowrap}}
/* Launch email box in the closing band (box styles are in events.css): the band's flex gap spaces it. */
.hc-in .signup{margin:0}
/* The big circle passes behind the box and its lighter lens would sink grey text: the field gets the band colour, the small text full ink. */
.hc .signup-input{background:var(--hh-band)}
.hc .signup .signup-fine{color:var(--ink)}