/* ============================================================
   U.N.N.A.M.E.D. — THE SHARED SURFACE
   unnamed.css · extracted 10 August 2026

   Every page on this site wears the same chrome: the tokens, the type,
   the header, the footer, and the three floating objects (the colour
   picker, the asterisk, Ask). Until today that chrome existed TWICE,
   once inside index.html and once inside future.html, and the pages had
   already drifted — the header clock's reel sat at 1.05em on one page
   and 1.34em on the other, which is how this file came to exist.

   THE RULE FROM HERE: if a thing appears on more than one page, it lives
   in this file and nowhere else. A page-specific value is expressed as a
   TOKEN this file declares and the page overrides, never as a second
   copy of the rule.

   WHAT STAYS IN A PAGE: its own layout, its own figures, and its own
   token overrides. future.html keeps --beat, --cov and the mosaic
   tokens; index.html keeps its grid and its hero.

   WHERE THE TWO PAGES DISAGREED, future.html won (at Manny's direction:
   "I like where we netted out on the future page"). The four decisions:
     · the clock reel is 1.34em, with a matching line-height, so a digit
       sits optically level with the wordmark beside it
     · the time takes tabular numerals, so the seconds do not shuffle
       the line as they count
     · the Ask pill's size is a TOKEN (--ask-w / --ask-h) because the two
       pages genuinely wanted different sizes — index runs it large, the
       thematic page runs it small. One rule, two values.
     · focus and hover selectors are the union of both pages, so a
       control that exists on either page is covered here.
   ============================================================ */

/* ---------- the tokens ----------
   Two colours at a time, plus what the page derives from them. Anything
   a page needs on top of these it declares itself. */
:root {
  --bg:#FFFFFF; --fg:#000000;
  --swap:.45s ease;             /* one duration for every colour change */
  --bar:60px;                   /* the header's real height, set live by JS */
  --reel:1.34em;                /* the clock's rolling line box */
  --gut:clamp(16px, 1.4vw, 60px);
  --col:calc(var(--gut) * 2.5);
  /* THE ASK PILL IS SIZED BY TOKEN, not by page. index.html wants it
     large and the thematic pages want it small; the rule below is one
     rule either way. Override these two in the page, never #ask-bug. */
  --ask-w:clamp(96px, 7.8vw, 112px);
  --ask-h:clamp(180px, 15vw, 216px);
}

html {
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:clamp(20px, 2.1vw, 30px);   /* 30px at a 1440 window, and 30 is the ceiling */
  line-height:1.05;
  letter-spacing:-0.02em;
  scroll-behavior:smooth;
  /* the pacing. modules are the snap areas, and a module is taller than
     the glass, so the scroll runs free inside one and catches at the seam.
     the 16:9 panels carry their own stop, which is what makes the catch
     land every two panels rather than once per chapter. */
  scroll-snap-type:y mandatory;
  -webkit-font-smoothing:antialiased;
}


body {
  background:var(--bg); color:var(--fg);
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}

body, header, #contact { transition:background-color var(--swap), color var(--swap); }

::selection { background:var(--fg); color:var(--bg); }

a { color:inherit; text-decoration:none; }

a:hover, a:focus-visible {
  background:none; color:inherit; outline:none;
  text-decoration:underline;
  text-decoration-thickness:.07em;
  text-underline-offset:.14em;
}

#mark:hover, #mark:focus-visible { text-decoration:none; }

header {
  position:fixed; left:0; right:0; top:0; z-index:10;
  background:color-mix(in srgb, var(--bg) 28%, transparent);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  padding:calc(var(--gut) * .7) var(--gut);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:0 32px;
}

#mark { display:inline-block; }

#mark:hover { background:none; color:var(--fg); }

.hright { display:flex; gap:clamp(14px, 1.6vw, 44px); align-items:center; min-width:0; }

#navword { flex:none; }

#cityclock .cw { display:inline-block; height:var(--reel); overflow:hidden; text-align:center; }

#cityclock .reel { display:block; transform:translateY(0); transition:transform .5s cubic-bezier(.22,1,.36,1); }

#cityclock .rl { display:block; height:var(--reel); line-height:var(--reel); }

#cityclock { display:flex; gap:.5em; justify-content:flex-end; }

#cc-city { display:inline-flex; justify-content:flex-end; }

#cc-time { display:inline-flex; font-variant-numeric:tabular-nums; }

#navword { overflow:hidden; line-height:1.34; }

#navword a { display:block; transform:translateY(0); }

#navword a.out { transition:none; transform:translateY(115%); }

#navword a.in { transition:transform .5s cubic-bezier(.19,1,.22,1); transform:translateY(0); }

.scw { display:inline-block; white-space:nowrap; }

.sc  { display:inline-block; text-align:center; }

.rv { opacity:0; overflow:visible; transition:opacity .8s ease; }

.rv.on { opacity:1; }

.rvb { opacity:0; filter:blur(16px); transform:translateY(14px);
       transition:opacity .7s ease, filter .9s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }

.rvb.on { opacity:1; filter:blur(0); transform:none; }

#ask-bug:hover, #ask-bug:focus-visible,
#bug-core:hover, #bug-core:focus-visible,
#idx-bug:hover, #idx-bug:focus-visible,
#bug-ring .tick:hover, #bug-ring .tick:focus-visible { text-decoration:none; }

#bug-core { transition:background-color var(--swap), color var(--swap), transform .3s cubic-bezier(.22,1,.36,1); }

#bug-core::after { transition:background-color var(--swap), inset .3s cubic-bezier(.22,1,.36,1); }

#bug-ring { transition:background-color var(--swap), color var(--swap); }

#idx-bug, #idx-bug:hover, #idx-bug:focus, #idx-bug:focus-visible,
#idx-note, #idx-note:hover { text-decoration:none; }

#idx-note {
  flex:0 0 auto;
  white-space:nowrap;          /* one line. the pill only ever grows sideways */
  opacity:0; padding-right:1.1em;
  transition:opacity .35s ease;
}

#ask {
  position:fixed; inset:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 22%, transparent);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  display:flex; align-items:flex-start; justify-content:center;
  animation:haze .35s ease;
}

#ask[hidden] { display:none; }

body.asking #ask-bug { opacity:0; pointer-events:none; transform:scale(.6); }

#ask-close {
  position:fixed; z-index:2;
  top:14px; right:20px;
  color:var(--fg);
  text-underline-offset:.14em;
}

#ask-close:hover, #ask-close:focus-visible {
  background:none; color:var(--fg);
  text-decoration:underline; text-decoration-thickness:.07em;
}

#ask-sheet {
  width:100%; max-width:1100px;
  padding:22vh 20px 20px;
  display:flex; flex-direction:column; gap:28px;
  max-height:100svh;
}

#ask-sheet > * { pointer-events:auto; }

#ask-input {
  width:100%;
  background:none; color:var(--fg);
  caret-color:var(--fg);
  outline:none;
}

#ask-input::placeholder { color:var(--fg); opacity:1; }

#ask-out { overflow-y:auto; white-space:pre-wrap; }

#ask-out:empty { display:none; }

#ask-bug {
  position:fixed; z-index:31;
  left:auto; right:clamp(20px, 2.2vw, 64px); top:calc(50% + var(--bar) / 2);
  /* fixed standard size at Manny's direction — the pill does not grow with
     the window; the clamp floor only lets it shrink on small screens */
  /* SIZED BY TOKEN so one rule serves both pages (index runs the pill
     large, the thematic pages small) — override --ask-w/--ask-h in the
     page, never this rule. */
  width:var(--ask-w);
  height:var(--ask-h);
  margin:calc(var(--ask-h) / -2) 0 0 0;   /* stays on the horizon */
  border-radius:9999px;
  display:grid; place-items:center;
  color:var(--fg);                      /* the theme ink */
  background:color-mix(in srgb, var(--bg) 46%, transparent);
  backdrop-filter:blur(24px) saturate(1.7);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);
  cursor:grab;
  touch-action:none;
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             backdrop-filter .35s ease,
             background-color var(--swap), color var(--swap),
             opacity .35s ease;
  animation:arrive-pill 1.1s cubic-bezier(.19,1,.22,1) backwards, lens 9s ease-in-out 1.1s infinite;
}

#ask-bug:hover, #ask-bug:focus-visible {
  background:color-mix(in srgb, var(--bg) 46%, transparent);
  color:var(--fg);
  backdrop-filter:blur(34px) saturate(2);
  -webkit-backdrop-filter:blur(34px) saturate(2);
}

#ask-bug.drag { cursor:grabbing; animation:none; transform:scale(.95); }

body.at-contact #ask-bug {
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}

body.at-contact #bug-ring {
  background:color-mix(in srgb, color-mix(in srgb, var(--fg) 20%, var(--bg)) 30%, transparent);
}

#bug {
  position:fixed; z-index:30;
  /* level with the Ventures dots. those sit at the middle of a frame that
     hangs under the bar, so their line is half a bar below the middle of
     the viewport, not at it. */
  left:4%; top:calc(50% + var(--bar) / 2);
  width:clamp(48px, 3.9vw, 100px);
  height:clamp(48px, 3.9vw, 100px);
  margin:calc(clamp(48px, 3.9vw, 100px) / -2) 0 0 calc(clamp(48px, 3.9vw, 100px) / -2);
  touch-action:none;
  /* backwards, not both. a forwards fill keeps holding opacity:1 after the
     animation ends, and an animated value outranks a normal declaration, so
     the stand-down over the footer could never take. both keyframe sets end
     on the element's own resting state, so nothing is lost by releasing. */
  animation:arrive-bug 1s cubic-bezier(.19,1,.22,1) backwards;
}

#bug-core {
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:50%;
  /* the same glass as the ask pill and the mark, so all three read as one set */
  background:color-mix(in srgb, var(--bg) 46%, transparent);
  backdrop-filter:blur(24px) saturate(1.7);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);
  cursor:grab;
  padding:0;
  touch-action:none;          /* or a drag on a phone scrolls the page instead */
  transition:transform .3s cubic-bezier(.22,1,.36,1), background-color var(--swap);
}

#bug-core::after {                     /* the eye: current color */
  content:"";
  position:absolute; inset:32%;
  border-radius:50%;
  /* ink now, not the ground. on a solid body the eye had to be the ground
     colour to show; on glass that would leave nothing to see. */
  background:var(--fg);
  transition:inset .3s cubic-bezier(.22,1,.36,1), background-color var(--swap);
}

#bug-core:hover, #bug-core:focus-visible {
  background:color-mix(in srgb, var(--bg) 46%, transparent); transform:scale(1.08); }

#bug.open #bug-core { transform:scale(.62); }

#bug.open #bug-core::after { inset:22%; }

#bug.drag #bug-core { cursor:grabbing; transform:scale(.9); }

#bug.pulse #bug-core { animation:beat 2.6s ease-in-out infinite; }

#bug-ring {
  position:absolute; left:50%; top:50%;
  width:clamp(180px, 15vw, 380px); height:clamp(180px, 15vw, 380px);
  margin:calc(clamp(180px, 15vw, 380px) / -2) 0 0 calc(clamp(180px, 15vw, 380px) / -2);
  border-radius:50%;
  backdrop-filter:blur(24px) saturate(1.7);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);
  background:color-mix(in srgb, color-mix(in srgb, var(--bg) 20%, var(--fg)) 30%, transparent);
  animation:bloom .52s cubic-bezier(.34, 1.4, .5, 1);   /* past one, then settles */
  transform-origin:50% 50%;
}

#bug-ring[hidden] { display:none; }

#bug-ring.shut { animation:wilt .26s cubic-bezier(.4, 0, .7, .2) forwards; pointer-events:none; }

#bug-ring .tick { animation:seat .42s cubic-bezier(.34, 1.5, .5, 1) backwards; }

#bug-ring .tick:nth-child(1) { animation-delay:.05s }

#bug-ring .tick:nth-child(2) { animation-delay:.09s }

#bug-ring .tick:nth-child(3) { animation-delay:.13s }

#bug-ring .tick:nth-child(4) { animation-delay:.17s }

#bug-ring .tick:nth-child(5) { animation-delay:.21s }

#bug-ring .tick:nth-child(6) { animation-delay:.25s }

#bug-ring.shut .tick { animation:none; }

#bug-ring .tick {                      /* the six house colors, seated on the ring */
  position:absolute; width:1.15em; height:1.15em;
  border-radius:50%;
  margin:-0.575em 0 0 -0.575em;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}

#bug-ring .tick:hover, #bug-ring .tick:focus-visible { transform:scale(1.5); background:none; }

.f-inner { padding:120px var(--gut) 14px; }

.f-lead { display:grid; grid-template-columns:repeat(4, 1fr); gap:0 var(--col); }

.f-lead > div:first-child { grid-column:1 / span 2; }

.f-lead > div:last-child  { grid-column:3 / span 2; }

.f-social { display:flex; flex-direction:column; grid-column:1; }

.f-cities [data-clock] { font-variant-numeric:tabular-nums; }

.f-cities {
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:32px var(--col);
  margin:120px 0;
}

.f-cities > div:nth-child(odd)  { grid-column:1; }

.f-cities > div:nth-child(even) { grid-column:2; }

.f-base {
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:10px var(--col);
  align-items:end;
  margin-top:64px;
  padding-bottom:0;
}

.f-base > div:nth-child(2) { grid-column:2 / span 2; }

.f-base > div:last-child { grid-column:4; justify-self:end; text-align:right; }

/* ---------- the same chrome, at other sizes ---------- */

@media (prefers-reduced-motion: reduce) {
  .rvb { opacity:1; filter:none; transform:none; }
}

@media (max-width:600px) {
  #idx-note { padding-right:.7em; }
}

@media (max-width:600px) {
  #bug { left:16px; top:auto; bottom:18px; margin:0; width:44px; height:44px; }
  #bug-core { width:44px; height:44px; }
  #bug-core::after { inset:14px; }
  #bug-ring { width:184px; height:184px; margin:-92px 0 0 -92px; }
  #bug-ring .tick { width:30px; height:30px; margin:-15px 0 0 -15px; }
  #ask-bug {
      right:16px; top:auto; bottom:18px; margin:0;
      width:62px; height:62px; border-radius:50%;
    }
  #ask-bug, #bug-ring, #idx-bug, #bug-core { backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4); }
  #ask-bug:hover, #ask-bug:focus-visible { backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4); }
  #ask { backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); }
  #ask-sheet { padding:16vh 16px 16px; gap:20px; }
  #ask-close { top:12px; right:16px; }
  #bug-ring .tick, #bug-core, #ask-bug, #idx-bug { min-height:0; }
}

@media (prefers-reduced-motion: reduce) {
  #bug-core, #bug-ring, #bug-ring .tick { animation:none !important; transition:none !important; }
  #ask-bug, #bug { animation:none !important; }
}

@media (max-width:960px) {
  .f-cities { grid-template-columns:1fr; margin:88px 0; }
  .f-cities > div:nth-child(odd), .f-cities > div:nth-child(even) { grid-column:1; }
  .f-lead { grid-template-columns:1fr; gap:1.05em 0; }
  .f-lead > div:first-child, .f-lead > div:last-child { grid-column:1; }
}

@media (max-width:600px) {
  html { font-size:17px; line-height:1.12; }
  :root { --beat:64px; }
  header { padding:12px 16px; }
  #cityclock { display:none; }
  footer .f-inner { padding:72px 16px 12px; }
  .f-cities { margin:56px 0; gap:20px 24px; }
  .f-base { grid-template-columns:1fr; gap:14px; margin-top:48px; }
  .f-base > div:nth-child(2), .f-base > div:last-child {
      grid-column:1; justify-self:start; text-align:left;
    }
}

@media (pointer: coarse) {
  header #mark, #navword a, .f-lead a, .f-social a { position:relative; }
  header #mark::after, #navword a::after, .f-lead a::after {
      content:""; position:absolute; left:0; right:0; top:50%;
      height:34px; transform:translateY(-50%);
    }
  .f-social { line-height:2.1; }
  .f-social a::after {
      content:""; position:absolute; left:0; right:0; top:50%;
      height:34px; transform:translateY(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; scroll-snap-type:none; }
  .rv { opacity:1 !important; transition:none !important; }
  #navword a { transform:none !important; transition:none !important; }
  #cityclock .reel { transition:none !important; transform:none !important; }
}