/* ============================================================
   Index menu — the site's table of contents.
   Shared by the tour, About and Contact so nav is identical everywhere.
   (Owns the top nav + toggle + full-screen overlay.)
   ============================================================ */

.site-nav {
  position: fixed;
  /* viewport-fit=cover lets the page run under the status bar, so the masthead
     has to be pushed clear of it by the safe-area inset rather than a flat 22px */
  top: calc(22px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 300;                /* above the overlay, so the toggle stays clickable */
  display: flex;
  align-items: center;
  justify-content: space-between;     /* name left, Index right */
  padding: 0 calc(clamp(20px, 3vw, 40px) + env(safe-area-inset-right, 0px))
           0 calc(clamp(20px, 3vw, 40px) + env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.site-nav a, .site-nav button { pointer-events: auto; text-decoration: none; }
/* Set identically to the Index link opposite it — same face, size, weight,
   tracking and colour, and `normal` line-height so the two share a baseline
   rather than one dropping into a taller inherited line box. */
.site-mark {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--greige-text); line-height: normal;
  transition: color 0.25s ease;
}
.site-mark:hover { color: var(--ink); }
.site-link {                    /* no underline — weight/colour carries the state */
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--greige-text);
  transition: color 0.25s ease;
}
.site-link:hover { color: var(--ink); }
button.site-link {              /* the toggle is a button styled as the link */
  border: 0; background: none; cursor: pointer;
}

/* ---- the overlay ---- */
.index-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: stretch;      /* the index fills the height, not a block floating in it */
  overflow-y: auto;                          /* safety on very short viewports */
  /* Wider gutters than the 20px floor this used to have. The nav row on the
     floor spans edge to edge with ~53pt between its four labels, and a 20px
     inset next to that read as cramped — the row looked pushed against the
     sides rather than placed. 28px is roughly half the inner gap, which is the
     usual way to make an edge relate to a rhythm. */
  padding:
    calc(clamp(74px, 11vh, 120px) + env(safe-area-inset-top, 0px))
    calc(clamp(28px, 4.5vw, 72px) + env(safe-area-inset-right, 0px))
    calc(clamp(34px, 6vh, 70px) + env(safe-area-inset-bottom, 0px))
    calc(clamp(28px, 4.5vw, 72px) + env(safe-area-inset-left, 0px));
  /* NO background or backdrop-filter on this element. Safari 26 samples the
     background-color and backdrop-filter of `fixed` elements near the viewport
     edges to tint its toolbars, and this one spans all four — so a glassmorphic
     surface here tinted the bars even with the menu shut. The glass now lives
     on an absolutely-positioned child, which is not sampled. */
  pointer-events: none;
  /* `display: none` while closed, for the same reason: a hidden overlay is
     still sampled if it is only opacity: 0 / visibility: hidden. Discrete
     transition keeps the fade. */
  /* Asymmetric on purpose. OPENING must not fade opacity: fading up from 0
     starts see-through, which is the exact moment the page behind was visible.
     @starting-style therefore begins the open at opacity 1 — no fade — and the
     softness comes from the scrim's blur developing instead.
     CLOSING can fade freely, because revealing the page is the point of
     closing. allow-discrete keeps the overlay displayed while it does. */
  display: none;
  opacity: 0;
}
/* Appears OPAQUE and instantly — no transition on this rule. Splitting display
   onto `shown` dropped the @starting-style that used to force this, so the
   overlay fell back to fading opacity up from 0 and the page behind was visible
   for the whole 0.62s: the wordmark lingering, then vanishing. */
.index-overlay.shown { display: flex; opacity: 1; }
.index-overlay.open { pointer-events: auto; }
/* Only the CLOSE fades, which is safe — revealing the page is the point of
   closing. Applied as its own class so the open path carries no transition at
   all and cannot fade in. */
.index-overlay.closing { opacity: 0; transition: opacity 0.62s ease; }

/* the glass itself — absolute, so it is out of the sampler's reach. z-index -1
   keeps it behind the index's content without making anything else positioned:
   the overlay is already a stacking context, so it can't escape. */
.index-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(242, 242, 240, 0.82);
  -webkit-backdrop-filter: blur(26px) saturate(1.05);
  backdrop-filter: blur(26px) saturate(1.05);
  /* Arrives OPAQUE and settles to the translucent blur — the reverse of a
     normal fade, and the only way to soften the entrance without reopening the
     hole it was closing. Fading opacity up from 0 means starting see-through,
     which is exactly the moment where the page behind was visible. Starting at
     full paper and letting the blur develop never shows it. */
}
/* The entrance, done as a real opacity fade that still never shows the page.
   Transitioning the scrim's own blur was tried and does not work: Safari does
   not animate backdrop-filter dependably, so it snapped to full blur and the
   open stayed instant no matter how long the duration was.
   Instead an opaque paper curtain sits ON the scrim and fades away, revealing
   the blur already at full strength beneath it. The background is never visible
   because the scrim is complete from the first frame — the curtain is what
   moves. A keyframe animation, not a transition, because it must fire reliably
   the moment the overlay is displayed. */
.index-scrim::after {
  content: ''; position: absolute; inset: 0;
  background: var(--paper); pointer-events: none;
}
.index-overlay.open .index-scrim::after { animation: index-veil 1.25s ease forwards; }
@keyframes index-veil { from { opacity: 1; } to { opacity: 0; } }
.index-overlay a { text-decoration: none; }   /* nothing in the Index is underlined */
.index-inner {
  width: 100%; max-width: 1240px; margin: 0 auto;
  display: flex; flex-direction: column; min-height: 0;
}

.index-list { list-style: none; margin: 0; padding: 0; }
/* the venture rows share out whatever height is going, so the index reads as a
   full-page contents rather than a small block adrift in the middle */
.index-work {
  border-top: 1px solid rgba(20, 22, 27, 0.12);
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.index-work li { border-bottom: 1px solid rgba(20, 22, 27, 0.12); flex: 1 1 0; display: flex; }
.index-work a {
  flex: 1; display: flex; align-items: center;
  min-height: clamp(58px, 8vh, 116px);
  transition: padding-left 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.index-work a:hover { padding-left: 0.5em; }
.ix-name {
  font-family: var(--font-display); font-weight: 360; line-height: 1;
  font-size: clamp(2.3rem, 7.4vw, 5.4rem); letter-spacing: -0.018em; color: var(--ink);
}

/* Work / About / Contact / Legal — all four always present. No underlines: the
   page you're on is the ink, heavier one; the rest sit back in greige.
   Sits on the FLOOR of the overlay and spans it, with EVEN GAPS between the
   four. space-between on content-sized items is what does that: the leftover
   width is divided equally into three gaps.
   Equal-flex cells were tried first and are wrong — they equalise the CELLS,
   and since the words differ in length (Work 107px, About 117, Contact 151,
   Legal 105) the visible gaps came out 143 / 72 / 132. Even columns, visibly
   uneven spacing. */
.index-more {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: auto; padding-top: clamp(26px, 4.4vh, 52px);
  width: 100%; gap: 0; flex-shrink: 0;
}
.index-more li { flex: 0 0 auto; }
.index-more .ix-name {
  font-size: clamp(1.15rem, 2.3vw, 1.75rem); font-weight: 400; line-height: 1.1;
  color: var(--greige-text);
  transition: color 0.25s ease;
}
.index-more a:hover .ix-name { color: var(--ink); }
.index-more a[aria-current="page"] .ix-name { color: var(--ink); font-weight: 560; }

.index-foot {
  margin-top: clamp(20px, 3.4vh, 40px); flex-shrink: 0;
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap;
}
/* quieter than the address beside it — mono, small, the Index's utility voice */
.fs-toggle { padding: 0; }
.index-foot a {                 /* no underline here either */
  font-family: var(--font-display); font-weight: 340; font-size: clamp(1.05rem, 2.1vw, 1.6rem);
  color: var(--ink);
  transition: opacity 0.25s ease;
}
.index-foot a:hover { opacity: 0.6; }

/* Items rise as the overlay opens — as ANIMATIONS, not transitions.
   A transition cannot fire on an element that was display:none a moment ago:
   there is no previous computed style to interpolate from, so it lands on its
   final value immediately. Every one of these was snapping, which is why the
   entrance stayed instant no matter how the durations were raised. Animations
   run the moment the element is displayed, which is exactly what is needed. */
.index-work, .index-more, .index-foot { opacity: 0; }
.index-overlay.open .index-work { animation: index-rise 1.35s ease 0.12s forwards; }
.index-overlay.open .index-foot { animation: index-rise 1.35s ease 0.30s forwards; }
.index-overlay.open .index-more { animation: index-rise 1.35s ease 0.46s forwards; }
/* Weighted toward the fade. 18px of travel read as a slide; 6px is enough to
   give the arrival a direction without the movement being the thing you notice.
   The opacity also finishes later than the transform, so the last part of the
   entrance is purely a fade. */
@keyframes index-rise {
  from { opacity: 0; transform: translateY(6px); }
  55%  { transform: none; }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  /* No gap override any more: the row now spans the full width with equal-flex
     items, so the spacing comes from the distribution rather than a gap, and a
     gap here would fight it. nowrap still matters — four short words must stay
     on one line down to a 320px screen. */
  .index-more { flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .index-overlay.open .index-work,
  .index-overlay.open .index-foot,
  .index-overlay.open .index-more { animation: index-fade 0.25s ease forwards; }
  .index-overlay.open .index-scrim::after { animation-duration: 0.25s; }
  @keyframes index-fade { from { opacity: 0; } to { opacity: 1; } }
}


/* ============================================================
   INDEX LAYOUT VARIANTS — ?ix=2, ?ix=3, ?ix=4
   For comparison only; the default (no attribute) is untouched.
   ============================================================ */

/* ---- 2 · NUMBERED EDITORIAL ----
   Ventures as a numbered contents list. Smaller display type, the number
   carrying the hierarchy instead of scale, rules kept tight. Reads like the
   front matter of a book rather than a menu. */
.index-overlay[data-ix="2"] .index-work { border-top: 0; }
.index-overlay[data-ix="2"] .index-work li {
  border-bottom: 1px solid rgba(20, 22, 27, 0.09);
  flex: 0 0 auto;
}
.index-overlay[data-ix="2"] .index-work a {
  min-height: 0; padding: clamp(16px, 2.6vh, 26px) 0; align-items: baseline; gap: 1.1em;
}
.index-overlay[data-ix="2"] .index-work li::before {
  content: counter(ixnum, decimal-leading-zero);
  counter-increment: ixnum;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--greige-text); padding-top: 0.55em; min-width: 2.4em;
}
.index-overlay[data-ix="2"] .index-work { counter-reset: ixnum; }
.index-overlay[data-ix="2"] .ix-name { font-size: clamp(1.9rem, 5.2vw, 3.4rem); }
.index-overlay[data-ix="2"] .index-more .ix-name { font-size: clamp(0.95rem, 1.8vw, 1.2rem); }

/* ---- 3 · CENTRED STACK ----
   No rules at all. Everything centred, the ventures set large and airy, the
   nav a quiet centred line beneath. The most "poster" of the four. */
.index-overlay[data-ix="3"] .index-work { border-top: 0; justify-content: center; gap: clamp(10px, 2.2vh, 22px); }
.index-overlay[data-ix="3"] .index-work li { border-bottom: 0; flex: 0 0 auto; justify-content: center; }
.index-overlay[data-ix="3"] .index-work a { min-height: 0; justify-content: center; }
.index-overlay[data-ix="3"] .index-work a:hover { padding-left: 0; opacity: 0.55; }
.index-overlay[data-ix="3"] .ix-name { font-size: clamp(2.6rem, 9vw, 6rem); }
.index-overlay[data-ix="3"] .index-more { justify-content: center; gap: clamp(20px, 4vw, 44px); }
.index-overlay[data-ix="3"] .index-more li { flex: 0 0 auto; }
.index-overlay[data-ix="3"] .index-foot { justify-content: center; }

/* ---- 4 · TWO COLUMN ----
   Ventures in a left column, the section links stacked in a right rail. Uses
   the width the other three leave empty. Stacks back to one column on a phone,
   where there is no width to use. */
.index-overlay[data-ix="4"] .index-inner {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 6vw, 90px);
  align-content: center;
}
.index-overlay[data-ix="4"] .index-work { border-top: 0; }
.index-overlay[data-ix="4"] .index-work li { border-bottom: 1px solid rgba(20, 22, 27, 0.09); }
.index-overlay[data-ix="4"] .index-more {
  flex-direction: column; align-items: flex-end; justify-content: center;
  width: auto; margin-top: 0; padding-top: 0; gap: clamp(8px, 1.6vh, 16px);
}
.index-overlay[data-ix="4"] .index-more li { flex: 0 0 auto; }
.index-overlay[data-ix="4"] .index-more .ix-name { font-size: clamp(1rem, 1.9vw, 1.35rem); }
.index-overlay[data-ix="4"] .index-foot { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .index-overlay[data-ix="4"] .index-inner { grid-template-columns: 1fr; }
  .index-overlay[data-ix="4"] .index-more {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    width: 100%; margin-top: auto; padding-top: clamp(22px, 4vh, 40px);
  }
}