/* ==========================================================================
   chrome — preloader, cursor + hover peek, topbar, index sheet
   ========================================================================== */

/* ── preloader: a plan drawing itself ──────────────────────────────────── */

.pre {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--paper);
  padding: var(--gut);
}

.pre__sheet {
  width: min(560px, 76vw);
  display: grid;
  gap: clamp(1.2rem, 3vh, 2rem);
  color: var(--ink-3);
}

.pre__plan { width: 100%; height: auto; }

/* pathLength="1" normalises every path so one dash value drives them all. */
.pre__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.pre__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: clamp(0.8rem, 2vh, 1.2rem);
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pre__count { color: var(--ink); font-variant-numeric: tabular-nums; }

.pre__curtain {
  position: fixed;
  inset: 0;
  background: var(--paper);
  transform-origin: bottom;
  pointer-events: none;
}

/* ── cursor ────────────────────────────────────────────────────────────── */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 350;
  pointer-events: none;

  --ring-scale: 0.34;
  --ring-line: var(--ink-3);
  --ring-fill: transparent;
}

.cursor__ring {
  position: absolute;
  top: 0; left: 0;
  width: 88px; height: 88px;
  margin: -44px 0 0 -44px;
  display: grid;
  place-items: center;
  will-change: transform;
}

.cursor__shape {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--ring-line);
  background: var(--ring-fill);
  transform: scale(var(--ring-scale));
  transition: transform 0.5s var(--ease), background-color 0.5s var(--ease),
              border-color 0.5s var(--ease);
}

.cursor.is-link {
  --ring-scale: 0.62;
  --ring-line: var(--clay);
}

.cursor.is-card {
  --ring-scale: 1;
  --ring-line: var(--clay);
  --ring-fill: var(--clay);
}

/* Hover preview: a background-image plate, so nothing ships src-less. */
.peek {
  position: absolute;
  top: 0; left: 0;
  width: 260px;
  aspect-ratio: 4 / 5;
  /* Symmetric side margin so the plate clears the pointer by the same gap
     whichever side it flips to. */
  margin: -160px 44px 0 44px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(0.9) rotate(-2deg);
  transform-origin: 0 50%;
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  will-change: transform, opacity;
}

.cursor.is-peek .peek { opacity: 1; transform: scale(1) rotate(-2deg); }
.cursor.is-peek { --ring-scale: 0.34; --ring-line: var(--clay); }

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ── topbar ────────────────────────────────────────────────────────────── */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1rem, 2.4vh, 1.6rem) var(--gut);
  color: var(--ink);
  transition: color 0.45s var(--ease);
}

/* A backdrop, faded in once the page has moved. Without it the nav sits
   directly on running body copy and the two become unreadable together. It
   stays absent over the hero so the drawing sheet reads uninterrupted. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.45s var(--ease), background-color 0.45s var(--ease);
}

.topbar.is-stuck::before { opacity: 1; }

.topbar.is-inverted::before {
  background: var(--ink);
  border-bottom-color: rgba(244, 241, 234, 0.18);
}

/* The closing section is near-black. Without this the whole bar goes
   dark-on-dark and simply disappears for the last screen of the page. */
.topbar.is-inverted { color: var(--on-dark); }
.topbar.is-inverted .topnav a { color: var(--on-dark-2); }
.topbar.is-inverted .topnav a:hover { color: var(--on-dark); }
.topbar.is-inverted .sheetbtn__glyph b { background: var(--on-dark); }

.mark { display: inline-flex; align-items: baseline; gap: 0.6em; }

.mark__deva {
  font-family: var(--f-deva);
  font-size: 1.05rem;
  color: var(--clay);
  line-height: 1;
}

.mark__name {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.topnav { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); }

.topnav a {
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 0.35em;
  transition: color 0.4s var(--ease);
}

.topnav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

.topnav a:hover { color: var(--ink); }
.topnav a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 860px) { .topnav { display: none; } }

.sheetbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sheetbtn__label {
  position: relative;
  display: block;
  height: 1.4em;
  line-height: 1.4;
  min-width: 5.4ch;
  overflow: hidden;
  text-align: right;
}

.sheetbtn__label i { display: block; font-style: normal; line-height: 1.4; transition: transform 0.5s var(--ease); }
.sheetbtn__label i:last-child { position: absolute; top: 100%; right: 0; }

body.sheet-open .sheetbtn__label i { transform: translateY(-100%); }

/* Three rules that become a single one — a drawing being erased. */
.sheetbtn__glyph { display: grid; gap: 4px; width: 20px; }

.sheetbtn__glyph b {
  display: block;
  height: 1px;
  background: var(--ink);
  transform-origin: right;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}

.sheetbtn__glyph b:nth-child(2) { transform: scaleX(0.62); }
.sheetbtn__glyph b:nth-child(3) { transform: scaleX(0.3); }

body.sheet-open .sheetbtn__glyph b:nth-child(1) { transform: scaleX(1); }
body.sheet-open .sheetbtn__glyph b:nth-child(2) { opacity: 0; }
body.sheet-open .sheetbtn__glyph b:nth-child(3) { transform: scaleX(1); }

/* ── index sheet ───────────────────────────────────────────────────────── */

.sheet {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 150;
  width: min(560px, 88vw);
  padding: clamp(5.5rem, 14vh, 9rem) clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 4vh, 3rem);
  background: var(--paper-2);
  border-left: 1px solid var(--line);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.5rem, 4vh, 3rem);
  transform: translateX(101%);
  visibility: hidden;
}

body.sheet-open .sheet { visibility: visible; }

.sheet__k {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sheet__list { list-style: none; padding: 0; align-self: center; display: grid; }

.sheet__list li { overflow: hidden; border-bottom: 1px solid var(--line); }

.sheet__list a {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  padding: clamp(0.7rem, 2vh, 1.15rem) 0;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4vw, 2.9rem);
  font-weight: 500;
  font-variation-settings: "wdth" 92;
  line-height: 1.05;
  letter-spacing: -0.02em;
  transform: translateY(110%);
  transition: color 0.4s var(--ease);
}

/* The hover shift moves the label only, never the row's padding — padding
   animates layout, and the anchor's own transform belongs to GSAP (it drives
   the open/close stagger), so it cannot carry a hover translate either.
   Leaving the index number anchored also reads better: the number is the
   fixed mark, the label slides off it. */
.sheet__list a span {
  display: inline-block;
  transition: transform 0.5s var(--ease);
}

.sheet__list a:hover span { transform: translateX(0.6rem); }

.sheet__list a em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  color: var(--ink-4);
  transition: color 0.4s var(--ease);
}

.sheet__list a:hover { color: var(--clay); }
.sheet__list a:hover em { color: var(--clay); }

.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  padding-top: clamp(1rem, 3vh, 2rem);
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--ink-3);
  opacity: 0;
}

.sheet__foot a { color: var(--clay); }

/* Scrim behind the sheet, so the page reads as pushed back rather than
   simply covered on one side. */
.sheet::before {
  content: "";
  position: fixed;
  inset: 0 min(560px, 88vw) 0 0;
  background: rgba(20, 19, 15, 0.28);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

body.sheet-open .sheet::before { opacity: 1; }