/* ============================================================
   Charles Hamilton — Base + Components
   Built strictly against tokens.css. No raw values that aren't
   derived from the design system.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* NB: no `scroll-behavior: smooth` on the root scroller — it makes
   ScrollTrigger.refresh() mis-measure (its internal scroll-to-top defers,
   so geometry is read mid-animation and the index scroll-spy sticks on one
   year). In-page nav links scroll smoothly via JS instead (see initNav). */

body {
  background: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(255,255,255,0.16); color: #fff; }

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

:focus-visible {
  outline: 1.5px solid var(--color-text-primary);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* ── Typographic primitives ─────────────────────────────── */
.serif  { font-family: var(--font-heading); font-weight: 400; color: var(--color-text-primary); }
.body   { font-family: var(--font-body);    font-weight: 400; }
.mono   {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--track-label-sm);
  font-size: var(--text-label-sm);
  color: var(--color-text-secondary);
}

.h1 { font-family: var(--font-heading); font-weight: 400; font-size: var(--fluid-h1); letter-spacing: var(--track-h1); line-height: 1.08; color: var(--color-text-primary); }
.h2 { font-family: var(--font-heading); font-weight: 400; font-size: var(--fluid-h2); letter-spacing: var(--track-h2); line-height: 1.15; color: var(--color-text-primary); }
.h3 { font-family: var(--font-heading); font-weight: 400; font-size: var(--fluid-h3); letter-spacing: var(--track-h3); line-height: 1.2;  color: var(--color-text-primary); }
.h4 { font-family: var(--font-heading); font-weight: 400; font-size: var(--fluid-h4); letter-spacing: var(--track-h4); line-height: 1.25; color: var(--color-text-primary); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ── Layout ─────────────────────────────────────────────── */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.section {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(80px, 14vh, 160px);
}

/* ── Site header ────────────────────────────────────────── */
/* Rest = a clean, full-width line over the hero. On scroll the
   inner row condenses into a centered floating glass pill. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: clamp(18px, 2.6vw, 30px) var(--gutter) 0;
  pointer-events: none;
  transition: padding-top var(--duration-slow) var(--ease-out);
}

.nav-inner {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--maxw);
  gap: clamp(20px, 4vw, 36px);
  padding: 8px 0;
  border: 0.5px solid transparent;
  border-radius: var(--radius-btn);
  background: transparent;
  transition:
    max-width 0.9s var(--ease-in-out),
    padding 0.9s var(--ease-in-out),
    gap 0.9s var(--ease-in-out),
    background-color 0.7s var(--ease-out),
    border-color 0.7s var(--ease-out),
    box-shadow 0.7s var(--ease-out),
    backdrop-filter 0.7s var(--ease-out);
}
.brand, .site-nav { pointer-events: auto; }

.brand {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-body-md);
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
  transition: gap 0.9s var(--ease-in-out);
}
.site-nav a {
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,0.70);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-nav a:hover { color: #fff; }

/* Contact link → forms into a pill button as the bar condenses */
.nav-cta {
  border: 0.5px solid transparent;
  border-radius: var(--radius-btn);
  transition:
    color var(--duration-base) var(--ease-out),
    padding 0.9s var(--ease-in-out),
    background-color 0.7s var(--ease-out),
    border-color 0.7s var(--ease-out);
}

/* ── Scrolled: floating glass pill ──────────────────────── */
.site-header.is-pinned { padding-top: clamp(12px, 1.6vw, 18px); }
.site-header.is-pinned .nav-inner {
  max-width: 450px;
  gap: clamp(20px, 2.4vw, 32px);
  padding: 8px 10px 8px 24px;
  background: rgba(30, 32, 35, 0.6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-color: var(--color-border-hover);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}
.site-header.is-pinned .site-nav { gap: clamp(16px, 1.8vw, 22px); }
.site-header.is-pinned .nav-cta {
  color: #fff;
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--color-border-hover);
}
.site-header.is-pinned .nav-cta:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--color-border-strong);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  border-radius: var(--radius-btn);
  padding: 12px 28px;
  cursor: pointer;
  border: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.btn-primary { color: var(--color-btn-primary-text); background: var(--color-btn-primary-bg); }
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-secondary {
  color: #fff;
  background: var(--color-btn-secondary-bg);
  border: 0.5px solid var(--color-btn-secondary-border);
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.80); background: rgba(255,255,255,0.12); transform: translateY(-1px); }

/* ── Tags ───────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  color: var(--color-text-secondary);
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-tag);
  padding: 4px 10px;
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
}
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Hairline (the craft motif) ─────────────────────────── */
.hairline {
  height: 0.5px;
  width: 100%;
  background: var(--color-border-hover);
  transform-origin: left center;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-section);
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-md);
}
.hero-eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-text-primary);
  animation: pulse 2s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.35; transform: scale(0.6); }
}

.hero-line {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fluid-h1);
  line-height: 1.08;
  letter-spacing: var(--track-h1);
  color: var(--color-text-primary);
  max-width: 18ch;
}
/* opacity wash: the closing phrase sits one step down the hierarchy */
.hero-line .muted { color: var(--color-text-secondary); }

/* SplitType line-mask: each line clips its riser */
.line-mask { overflow: hidden; display: block; }

.hero-foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(28px, 5vh, 56px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.hero-foot .role {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-secondary);
  max-width: 44ch;
  line-height: 1.6;
}

.scroll-cue {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  text-transform: uppercase;
  color: var(--color-text-disabled);
}
.scroll-cue .rail {
  position: relative;
  width: 1px; height: 40px;
  background: var(--color-border-hover);
  overflow: hidden;
}
.scroll-cue .rail::after {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 40%;
  background: var(--color-text-primary);
  animation: railSlide 2.4s var(--ease-in-out) infinite;
}
@keyframes railSlide {
  0%   { transform: translateY(-100%); }
  60%,100% { transform: translateY(280%); }
}

/* ============================================================
   FEATURED WORK — full-bleed rows, dim-on-hover
   Hovering one row drops its siblings to 0.30; the target holds.
   ============================================================ */
/* Single-sided section rhythm: each section pads only its TOP, so adjacent
   sections meet on a single --space-section gap instead of stacking two
   (which doubled to ~440px between sections). Hero owns its full height;
   contact keeps a bottom pad so the footer isn't flush to the page edge. */
.work { padding-top: var(--space-section); }

.work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-md);
  border-bottom: 0.5px solid var(--color-border);
}
.work-count {
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  text-transform: uppercase;
  color: var(--color-text-disabled);
}
.work-count span { color: var(--color-text-primary); }

.work-list { list-style: none; }
.work-row { border-bottom: 0.5px solid var(--color-border); }

.work-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: clamp(20px, 4vw, 64px);
  padding-block: var(--space-md);
  transition: opacity var(--duration-base) var(--ease-out),
              padding-left var(--duration-base) var(--ease-out);
}
/* Dim siblings when any row in the list is hovered/focused */
.work-list:hover .work-row .work-link,
.work-list:focus-within .work-row .work-link { opacity: 0.30; }
.work-list .work-row:hover .work-link,
.work-list .work-row:focus-within .work-link {
  opacity: 1;
  padding-left: clamp(8px, 1.5vw, 20px);
}

.work-index {
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  color: var(--color-text-disabled);
  align-self: start;
}

.work-main { min-width: 0; }
.work-client {
  display: block;
  margin-bottom: 14px;
  color: var(--color-text-disabled);
}
.work-title {
  display: block;
  font-size: var(--fluid-h3);
  line-height: 1.08;
  letter-spacing: var(--track-h3);
  text-wrap: balance;
}
.work-sub {
  display: block;
  margin-top: 12px;
  max-width: 42ch;
  color: var(--color-text-secondary);
  font-size: var(--text-body-md);
  line-height: 1.6;
}
.work-main .tag-row { margin-top: var(--space-xs); }

/* Right column: image placeholder. */
.work-media {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: clamp(280px, 34vw, 480px);
}
.work-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 29 / 20;   /* matches Amalgamy (1740×1200) — uniform across all cards */
  background: var(--color-surface-2);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  /* per-row tilt — each case study leans its own way */
  --rx: 5deg;
  --ry: -6deg;
  --tilt: -2.4deg;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
  transform-origin: center;
  will-change: transform;
  transition: border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.work-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fill the 29:20 card uniformly */
  object-position: center;
  display: block;
}
.work-row:hover .work-thumb,
.work-row:focus-within .work-thumb {
  border-color: var(--color-border-strong);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--tilt)) scale(1.02);
}
.work-list .work-row:nth-child(1) .work-thumb { --rx: 5deg;  --ry: -6deg; --tilt: -2.4deg; }
.work-list .work-row:nth-child(2) .work-thumb { --rx: 6deg;  --ry:  5deg; --tilt:  2.2deg; }
.work-list .work-row:nth-child(3) .work-thumb { --rx: -5deg; --ry: -4deg; --tilt: -1.6deg; }
.work-list .work-row:nth-child(4) .work-thumb { --rx: 4deg;  --ry:  6deg; --tilt:  2.8deg; }
.work-list .work-row:nth-child(5) .work-thumb { --rx: -6deg; --ry:  4deg; --tilt: -2.0deg; }

@media (prefers-reduced-motion: reduce) {
  .work-row:hover .work-thumb,
  .work-row:focus-within .work-thumb { transform: none; }
}

/* ============================================================
   PROJECT INDEX — archive grouped by year, with a scroll-driven
   timeline rail on the right. Each year appears once; its marker
   (year + node) glides along the connecting wire while that year's
   projects scroll past. Rows expand in place for structured detail.
   ============================================================ */
.index { padding-block: var(--space-section); }

/* ── Work end-cap: the full archive, styled as the list's terminus ──
   Sits flush beneath the four featured rows and continues their rhythm
   (shared border + padding cadence) rather than reading as a separate
   card. A subtle surface tint sets it apart as the "and everything else"
   jumping-off point into the full project-index modal. */
.work-endcap {
  border-top: 0.5px solid var(--color-border);
}
.work-endcap-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  padding-block: var(--space-lg);
}

.work-endcap-index {
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  color: var(--color-text-disabled);
  align-self: start;
}

.work-endcap-main { min-width: 0; }
.work-endcap-label {
  display: block;
  margin-bottom: 14px;
  color: var(--color-text-disabled);
}
.work-endcap-title {
  display: block;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  text-wrap: balance;
}

.work-endcap-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  padding: clamp(13px, 1.6vh, 18px) clamp(22px, 2.4vw, 30px);
  border-radius: var(--radius-btn);
  border: 0.5px solid var(--color-border);
  background: var(--color-surface-1);
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.work-endcap-btn svg {
  transition: transform 0.4s var(--ease-out);
}
.work-endcap-btn:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong, rgba(255, 255, 255, 0.18));
}
.work-endcap-btn:hover svg { transform: translateX(4px); }
.work-endcap-btn:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .work-endcap-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .work-endcap-index { display: none; }
  .work-endcap-btn { justify-self: start; }
}

/* ── Project-index modal (reuses case-modal chrome) ──
   No in-scroll header — the sticky case-bar already names the index.
   The scroll container just needs top clearance so the first rows
   start below the floating pill. */
.index-modal .case-scroll {
  /* Top clearance lives on the list (below), not here: position:sticky measures
     its `top` from the scroll container's content box, so padding here would
     stack on the marker's sticky offset and push the active year down a row. */
  padding-top: 0;
}

.index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-sm);
  border-bottom: 0.5px solid var(--color-border);
}
.index-count {
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  text-transform: uppercase;
  color: var(--color-text-disabled);
}
.index-count span { color: var(--color-text-primary); }

/* The list owns the vertical timeline rail (absolute, full height) and the
   top clearance below the floating pill (so the sticky year markers measure
   their `top` from the true scrollport, not from container padding). */
.index-list {
  position: relative;
  padding-top: clamp(96px, 14vh, 168px);
}
.index-rail {
  position: absolute;
  /* Start the rail at the first dot, below the top clearance. */
  top: calc(clamp(96px, 14vh, 168px) + 10px); bottom: 10px;
  left: 4px;
  width: 1px;
  background: var(--color-border);
  pointer-events: none;
}
.index-rail-progress {
  position: absolute;
  inset: 0;
  background: var(--color-text-primary);
  transform: scaleY(0);
  transform-origin: top center;
}

/* Year group: sticky marker on the left, projects on the right. */
.index-group {
  display: grid;
  grid-template-columns: clamp(76px, 9vw, 124px) 1fr;
  column-gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
.index-rows { grid-column: 2; min-width: 0; }

.index-marker {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  /* Pins just clear of the floating pill when scrolling. Kept BELOW the list's
     top clearance (clamp 96–168) so that at rest the marker sits at its natural
     group top — anchored to the first project's row — and only sticks once the
     group scrolls up past this line. */
  top: clamp(84px, 11vh, 112px);
  align-self: start;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  /* Match the trigger's top padding so the year aligns to the first row's name. */
  padding-top: clamp(18px, 2.2vh, 26px);
}
.index-year {
  font-family: var(--font-ui);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.14em;
  color: var(--color-text-disabled);
  transform-origin: right center;
  transition: color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.index-dot {
  position: relative;
  z-index: 1;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg, #17181A);
  border: 1.5px solid var(--color-border-strong);
  box-shadow: 0 0 0 5px var(--bg, #17181A);  /* mask the wire behind the node */
  transition: background var(--duration-slow) var(--ease-out),
              border-color var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.index-group.is-active .index-year {
  color: var(--color-text-primary);
  transform: scale(1.08);
}
.index-group.is-active .index-dot {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  transform: scale(1.15);
}

.index-row { position: relative; }
/* Divider inset to line up with the rounded pill hover, so it never pokes
   out past the highlight's curved corners. */
.index-row::after {
  content: "";
  position: absolute;
  left: clamp(30px, 3.2vw, 48px);
  right: clamp(30px, 3.2vw, 48px);
  bottom: 0;
  height: 0.5px;
  background: var(--color-border);
}

.index-trigger {
  display: grid;
  /* Table columns: name | meta (industry · type) | toggle — every row aligns,
     so the index reads as a tidy archive table. */
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.62fr) 44px;
  column-gap: clamp(16px, 3vw, 44px);
  row-gap: clamp(10px, 1.4vh, 16px);
  align-items: baseline;
  width: 100%;
  padding: clamp(18px, 2.2vh, 26px) clamp(18px, 2vw, 30px);
  background: none;
  border: 0;
  border-radius: var(--radius-btn);
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background var(--duration-base) var(--ease-out);
}
.index-trigger:hover,
.index-trigger:focus-visible { background: rgba(255, 255, 255, 0.04); }
.index-trigger:focus-visible { outline: none; }

/* Dim siblings on hover, like the featured-work list */
.index-list:hover .index-trigger { color: var(--color-text-disabled); }
.index-list:hover .index-trigger:hover,
.index-list .index-trigger:focus-visible,
.index-row[data-open] .index-trigger { color: var(--color-text-primary); }

.index-name {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: inherit;
}
/* Meta cell — industry · type, quiet mono, aligned down the table. */
.index-meta {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em;
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
/* Dot separator between industry and type. */
.index-type::before {
  content: "·";
  margin-right: 0.5em;
  color: var(--color-text-disabled);
}

/* Plus / minus inside a circle. The circle is invisible at rest and
   fades in on hover or while the row is open; the vertical bar
   retracts so the glyph reads as a minus when expanded. */
.index-toggle {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0.5px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}
.index-toggle::before,
.index-toggle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.index-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

.index-trigger:hover .index-toggle,
.index-trigger:focus-visible .index-toggle,
.index-row[data-open] .index-toggle {
  border-color: var(--color-border-strong);
  background: rgba(255, 255, 255, 0.03);
}
.index-row[data-open] .index-toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Collapsible panel — JS sets max-height to the measured content height
   on open and back to 0 on close; CSS animates the transition. */
.index-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-slow) var(--ease-out);
}
.index-panel-inner {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.index-row[data-open] .index-panel-inner { opacity: 1; transform: none; }

/* Align the open panel's content with the project name above it — matches
   the trigger's left padding so summary, facts and tags line up. */
.index-panel-inner > * { margin-left: clamp(18px, 2vw, 30px); }
.index-summary {
  max-width: 52ch;
  padding-top: clamp(4px, 1vh, 10px);
  font-size: var(--text-body-md);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.index-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  margin-top: var(--space-sm);
  max-width: 720px;
}
.index-facts dt {
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  text-transform: uppercase;
  color: var(--color-text-disabled);
  margin-bottom: 8px;
}
.index-facts dd {
  font-size: var(--text-label-md);
  line-height: 1.4;
  color: var(--color-text-primary);
}
.index-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .index-panel,
  .index-panel-inner { transition: none; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about { position: relative; padding-top: var(--space-section); }
.about .eyebrow { margin-bottom: var(--space-sm); }

.about-statement {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fluid-h3);
  line-height: 1.25;
  letter-spacing: var(--track-h3);
  color: var(--color-text-primary);
  max-width: 30ch;
}
.about-statement .muted { color: var(--color-text-secondary); }

.about-body {
  margin-top: var(--space-lg);
}
.about-col {
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
  line-height: 1.7;
  max-width: 46ch;
}

/* ── Stats strip ───────────────────────────────────────── */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 0.5px solid var(--color-border);
}
.stat { display: flex; flex-direction: column; gap: var(--space-3xs); }
.stat-num {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fluid-h3);
  line-height: 0.95;
  letter-spacing: var(--track-h3);
  color: var(--color-text-primary);
}
.stat-label {
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 16ch;
}

/* ── Capabilities (what I do) ───────────────────────────── */
.capabilities { margin-top: var(--space-xl); }
.cap-label {
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-text-disabled);
  margin-bottom: var(--space-xs);
}
/* Kinetic capabilities ribbon: the pill tags ride a full-bleed track that
   drifts horizontally with scroll (driven in JS via ScrollTrigger scrub).
   The track is tripled at runtime so it reads as an endless ribbon. */
.cap-marquee {
  margin-top: var(--space-md);
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);   /* break out of the centred .shell to full bleed */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.cap-track {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  white-space: nowrap;
  will-change: transform;
}
.cap-pill {
  font-size: var(--text-label-md);
  padding: 9px 18px;
  transition: border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.cap-pill:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

/* No-motion: collapse the ribbon back to a calm wrapping pill row. */
@media (prefers-reduced-motion: reduce) {
  .cap-marquee {
    width: 100%; margin-left: 0; transform: none; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .cap-track { flex-wrap: wrap; white-space: normal; }
}

/* ── Selected clients (own section: heading + compact logo grid) ─ */
.clients { padding-top: var(--space-section); }
.partners-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
/* Copy fills the left of the row; logos anchor the right edge, so the
   block spans the full container instead of clustering in the middle. */
.partners-copy { max-width: none; }
.partners-copy .eyebrow { margin-bottom: var(--space-xs); }
.partners-head {
  font-weight: 400;
  font-size: var(--fluid-h3);
  line-height: 1.14;
  letter-spacing: var(--track-h3);
  color: var(--color-text-primary);
}
/* Masonry marquee: two narrow columns of logo tiles drifting in
   opposite directions, masked top/bottom, pausing on hover. JS clones
   each track's cells so a -50% translate loops seamlessly. */
.partners-logos {
  display: grid;
  grid-template-columns: repeat(3, clamp(88px, 10vw, 140px));
  gap: clamp(6px, 0.6vw, 10px);
  height: clamp(300px, 44vh, 460px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.logo-col { overflow: hidden; }
.logo-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.partners-logos.is-ready .logo-col[data-dir="up"] .logo-track {
  animation: logoScrollUp var(--spd, 36s) linear infinite;
}
.partners-logos.is-ready .logo-col[data-dir="down"] .logo-track {
  animation: logoScrollDown var(--spd, 36s) linear infinite;
}
.partners-logos.is-ready .logo-track:hover,
.partners-logos.is-ready .logo-track:focus-within {
  animation-play-state: paused;
}
@keyframes logoScrollUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes logoScrollDown {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  aspect-ratio: 1 / 1;          /* uniform squares */
  margin-bottom: clamp(5px, 0.5vw, 8px);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}
.logo-cell:hover,
.logo-cell:focus-visible {
  outline: none;
  border-color: var(--color-border-hover);
  background: rgba(255, 255, 255, 0.04);
}
.logo-mark {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  opacity: 0.26;
  transition: opacity var(--duration-base) var(--ease-out);
}
.logo-cell:hover .logo-mark,
.logo-cell:focus-visible .logo-mark { opacity: 0.95; }

/* Brand SVGs recolored to pure white via mask — alpha-only, so even
   multi-color source art renders monochrome and fades like the wordmarks. */
.logo-img {
  display: block;
  /* A consistent contained box inside each square so brand marks of
     different aspect ratios all read at a comparable visual weight. */
  width: 54%;
  height: 38%;
  background-color: var(--color-text-primary);
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
  opacity: 0.24;
  transition: opacity var(--duration-base) var(--ease-out);
}
.logo-cell:hover .logo-img,
.logo-cell:focus-visible .logo-img { opacity: 0.92; }

/* Placeholder tiles: fill out the columns but stay quiet and inert. */
.logo-cell.is-placeholder { cursor: default; }
.logo-cell.is-placeholder .logo-img { opacity: 0.12; }
.logo-cell.is-placeholder:hover {
  border-color: var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}
.logo-cell.is-placeholder:hover .logo-img { opacity: 0.12; }

.logo-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  padding: 7px 12px;
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  text-transform: uppercase;
  color: var(--color-text-primary);
  white-space: nowrap;
  background: rgba(30, 32, 35, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 0.5px solid var(--color-border-hover);
  border-radius: var(--radius-tag);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}
.logo-tip.is-visible { opacity: 1; transform: translate(-50%, -12px); }

/* ============================================================
   STORY  (narrative + angled polaroid stacks)
   ============================================================ */
.story { padding-top: var(--space-section); }

.story-head { margin-bottom: clamp(40px, 7vh, 96px); max-width: 60ch; }
.story-head .eyebrow { margin-bottom: var(--space-xs); }
.story-title {
  font-size: var(--fluid-h3, clamp(1.75rem, 3.4vw, 2.75rem));
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.story-title .muted { color: var(--color-text-secondary); }

.story-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 7vw, 120px);
  padding-top: clamp(72px, 12vh, 150px);
}
/* alternate sides: even chapters flip media to the right */
.story-chapter:nth-of-type(even) .story-media { order: 2; }

/* ── narrative copy ───────────────────────────────────── */
.story-copy .eyebrow { margin-bottom: var(--space-xs); }
.story-lead {
  font-size: clamp(1.4rem, 2.4vw, 2.05rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0 0 clamp(16px, 2.2vh, 28px);
  text-wrap: balance;
}
.story-text {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 46ch;
  margin: 0;
}

/* ── angled overlapping polaroid stack ────────────────── */
.story-media {
  display: grid;
  place-items: center;
  min-height: clamp(320px, 40vw, 540px);
  isolation: isolate;
}
/* Registered so the hover tilt/scale can transition (custom props are only
   animatable once typed via @property). */
@property --rmul { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --psc  { syntax: "<number>"; inherits: false; initial-value: 1; }

.polaroid {
  grid-area: 1 / 1;
  width: clamp(168px, 21vw, 282px);
  margin: 0;
  padding: clamp(9px, 0.9vw, 13px);
  padding-bottom: clamp(34px, 3.2vw, 50px);   /* signature thick bottom edge */
  background: color-mix(in srgb, var(--color-surface-2) 78%, #ffffff 22%);
  border: 0.5px solid var(--color-border-strong);
  border-radius: clamp(12px, 1.2vw, 18px);
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.75),
              0 4px 14px -8px rgba(0, 0, 0, 0.6);
  z-index: var(--z, 1);
  /* Everything composes inside one `transform` string via custom props, so
     nothing fights:
       --fy   : the float offset (px), animated by GSAP — entrance + bob
       --rmul : hover settles the tilt toward upright (1 → 0.75)
       --psc  : hover lift (1 → 1.02)
     GSAP only ever touches --fy, so it never nulls the transform the way it
     would if it drove translate/rotate/scale directly. */
  transform: translate(var(--tx, 0%), calc(var(--ty, 0%) + var(--fy, 0px)))
             rotate(calc(var(--rot, 0deg) * var(--rmul, 1)))
             scale(var(--psc, 1));
  transition: --rmul 0.6s var(--ease-out), --psc 0.6s var(--ease-out),
              box-shadow 0.6s var(--ease-out);
  will-change: transform;
}
.polaroid:hover,
.polaroid:focus-within {
  /* the slightest tilt — settle ~25% toward upright with a faint lift */
  z-index: 20;
  --rmul: 0.75;
  --psc: 1.02;
  box-shadow: 0 36px 72px -26px rgba(0, 0, 0, 0.82),
              0 6px 18px -8px rgba(0, 0, 0, 0.68);
}
.polaroid-img {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: clamp(5px, 0.6vw, 9px);
  background: var(--color-surface-1) center / cover no-repeat;
  background-image: var(--src);
}
.polaroid.is-placeholder .polaroid-img {
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.025) 0 11px,
      rgba(255, 255, 255, 0.05) 11px 22px),
    var(--color-surface-1);
  display: grid;
  place-items: center;
}
.polaroid.is-placeholder .polaroid-img::after {
  content: "";
  width: 26px; height: 26px;
  border: 0.5px solid var(--color-border-strong);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03) inset;
}
.polaroid-cap {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(11px, 1vw, 17px);
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  text-transform: uppercase;
  color: var(--color-text-disabled);
}

/* ============================================================
   OUTSIDE WORK  (one short photo band — taste + creations)
   ============================================================ */
.outside { padding-top: var(--space-section); }

.outside-head { max-width: 60ch; margin-bottom: clamp(40px, 7vh, 96px); }
.outside-head .eyebrow { margin-bottom: var(--space-xs); }
.outside-title {
  font-size: var(--fluid-h2, clamp(2.25rem, 6.5vw, 80px));
  line-height: 1.04;
  letter-spacing: var(--track-h2);
  max-width: 18ch;
}
.outside-title .muted { color: var(--color-text-secondary); }
.outside-lead {
  margin-top: var(--space-md);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 48ch;
}

/* Organic scatter of white-framed polaroids in mixed sizes/orientations.
   A wrapping flex row (responsive across all widths) gives the spread; the
   organic feel comes per-card from --w (size), --ar (orientation), --rot
   (tilt) and --ty (vertical offset, a % of card height baked into the
   .polaroid transform). Keeps the .story-media JS float hook working. */
.outside-media {
  position: relative;
  display: block;
  place-items: initial;
  min-height: clamp(580px, 53vw, 780px);
}
.outside-media .polaroid {
  position: absolute;                        /* per-card left/top scatter (inline) */
  grid-area: auto;
  width: var(--w, 200px);
  background: #f7f5f1;                       /* warm white frame */
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.72),
              0 6px 16px -10px rgba(0, 0, 0, 0.55);
}
.outside-media .polaroid-img { aspect-ratio: var(--ar, 3 / 4); }
.outside-media .polaroid-cap { color: #9c9a95; }   /* light grey on white */

/* Small screens: drop the absolute scatter for a calm wrapping row. */
@media (max-width: 860px) {
  .outside-media {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 4vw, 28px);
    min-height: 0;
    padding-block: clamp(20px, 4vh, 48px);
  }
  .outside-media .polaroid { position: static; width: clamp(150px, 44vw, 240px); }
}

/* ============================================================
   WORKING WITH AI  (process notes)
   ============================================================ */
.ai { padding-top: var(--space-section); }

.ai-head { max-width: 60ch; margin-bottom: clamp(40px, 7vh, 88px); }
.ai-head .eyebrow { margin-bottom: var(--space-xs); }
.ai-title {
  font-size: var(--fluid-h3, clamp(1.75rem, 3.4vw, 2.75rem));
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.ai-title .muted { color: var(--color-text-secondary); }
.ai-lead {
  margin-top: var(--space-md);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 52ch;
}

/* Notes laid out as a two-column ledger, hairline-separated. */
.ai-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 96px);
}
.ai-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  padding-top: var(--space-sm);
  border-top: 0.5px solid var(--color-border);
}
.ai-index {
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  color: var(--color-text-disabled);
  line-height: 1.5;
}
.ai-item-label {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-body-xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2xs);
}
.ai-item-text {
  font-size: var(--text-body-md);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 42ch;
}

.ai-line {
  margin-top: clamp(40px, 7vh, 88px);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fluid-body-xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  max-width: 40ch;
}
.ai-line .muted { color: var(--color-text-secondary); }

@media (max-width: 720px) {
  .ai-list { grid-template-columns: 1fr; }
}

/* ============================================================
   AWARDS & RECOGNITION  (film-festival laurels)
   ============================================================ */
.awards-laurels-sec { padding-top: var(--space-section); }

.awards-head { margin-bottom: clamp(28px, 4vh, 52px); }
.awards-head .eyebrow { margin-bottom: var(--space-xs); }
.awards-title {
  font-size: var(--fluid-h3, clamp(1.75rem, 3.4vw, 2.75rem));
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.awards-head--center { text-align: center; }
.awards-head--center .awards-title { max-width: none; margin-inline: auto; }

/* ── Film-festival laurels (Sundance style) ────────────── */
.laurels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
}
.laurels li { list-style: none; }
.laurel-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 28px);
  padding: clamp(28px, 4vh, 56px) clamp(6px, 1.2vw, 18px);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.laurels:hover .laurel-badge { color: var(--color-text-disabled); }
.laurels .laurel-badge:hover,
.laurel-badge:focus-visible {
  color: var(--color-text-primary);
  transform: translateY(-3px);
  outline: none;
}
.laurel {
  flex: none;
  width: clamp(46px, 4.6vw, 70px);
  height: auto;
  align-self: stretch;
  max-height: 220px;
}
.laurel--r { transform: scaleX(-1); }
.laurel-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(9px, 1.4vh, 16px);
  padding-block: clamp(6px, 1.4vh, 14px);
}
.laurel-result {
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-sm);
  text-transform: uppercase;
  color: var(--color-text-disabled);
}
.laurel-result.is-win { color: inherit; }
.laurel-name {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: inherit;
}
.laurel-project {
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact {
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-section);
}
.contact .eyebrow { margin-bottom: var(--space-sm); }

.contact-line {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fluid-h2);
  line-height: 1.12;
  letter-spacing: var(--track-h2);
  color: var(--color-text-primary);
}

.contact-mail {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--fluid-h4);
  letter-spacing: var(--track-h4);
  color: var(--color-text-secondary);
  border-bottom: 0.5px solid var(--color-border-hover);
  padding-bottom: 6px;
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.contact-mail:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); }

.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  margin-top: var(--space-3xl);
  padding-top: var(--space-sm);
  border-top: 0.5px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  text-transform: uppercase;
  color: var(--color-text-disabled);
}

/* Reusable contact CTA that closes out every scrollable surface —
   the page footer carries its own; the modals append this one so a
   reader always lands on a way to get in touch. */
.modal-cta {
  margin-top: clamp(56px, 11vh, 130px);
  padding-top: clamp(36px, 6vh, 72px);
  border-top: 0.5px solid var(--color-border);
}
.modal-cta .eyebrow { margin-bottom: var(--space-sm); }
.modal-cta-line {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fluid-h3);
  line-height: 1.12;
  letter-spacing: var(--track-h3);
  color: var(--color-text-primary);
  max-width: 20ch;
}
.modal-cta-mail {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--fluid-h4);
  letter-spacing: var(--track-h4);
  color: var(--color-text-secondary);
  border-bottom: 0.5px solid var(--color-border-hover);
  padding-bottom: 6px;
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.modal-cta-mail:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); }

/* ============================================================
   CASE STUDY MODAL — rounded-top full-screen sheet
   ============================================================ */
.case-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  color: var(--color-text-primary);
}
.case-modal::backdrop {
  background: rgba(8, 9, 10, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.case-modal[open]::backdrop { opacity: 1; }

/* The sheet: full width, slid down from the top to reveal rounded corners. */
.case-shell {
  position: absolute;
  /* Centred sheet with generous side margins on laptops, capped so it never
     sprawls on large displays. Centring via auto margins keeps `transform`
     free for the open animation — a gentle scale up from the page centre. */
  top: clamp(16px, 2.6vh, 36px);
  bottom: 0;
  left: 0;
  right: 0;
  width: min(1340px, calc(100% - clamp(24px, 7vw, 140px)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  border: 0.5px solid var(--color-border-hover);
  border-bottom: 0;
  border-radius: clamp(20px, 2.2vw, 32px) clamp(20px, 2.2vw, 32px) 0 0;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  transform: scale(0.92);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}
.case-modal[open] .case-shell { transform: scale(1); opacity: 1; }

/* Floating glass pill header inside the sheet. */
.case-bar {
  position: absolute;
  top: clamp(12px, 1.6vw, 18px);
  left: clamp(12px, 1.6vw, 18px);
  right: clamp(12px, 1.6vw, 18px);
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 11px;
  background: rgba(30, 32, 35, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 0.5px solid var(--color-border-hover);
  border-radius: var(--radius-btn);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
}
.case-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  background: var(--color-surface-3);
  border: 0.5px solid var(--color-border-hover);
  border-radius: 50%;
}
.case-crumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
}
.case-crumb-name {
  flex: none;
  color: var(--color-text-primary);
  font-weight: 700;
  white-space: nowrap;
}
.case-crumb-title {
  min-width: 0;
  color: var(--color-text-disabled);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--color-text-secondary);
  background: var(--color-btn-secondary-bg);
  border: 0.5px solid var(--color-border-hover);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
.case-close:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-border-strong);
}

/* Scroll region: hero + (nav + content) body, all in one column. */
.case-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: 0 clamp(20px, 4vw, 56px) clamp(80px, 12vh, 160px);
  /* Soft transparent fade at the top edge: content dissolves as it scrolls
     up under the floating pill instead of cutting off at a hard line. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(72px, 11vh, 120px));
  mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(72px, 11vh, 120px));
}

/* Full-width hero. */
.case-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(92px, 15vh, 184px);
  padding-bottom: clamp(40px, 7vh, 88px);
}
.case-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-text-disabled);
  margin-bottom: clamp(20px, 3vh, 32px);
}
.case-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fluid-h2);
  line-height: 1.08;
  letter-spacing: var(--track-h2);
  color: var(--color-text-primary);
  max-width: 18ch;
}
.case-subtitle {
  margin-top: clamp(18px, 2.6vh, 28px);
  font-size: var(--fluid-body-lg);
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 46ch;
}
.case-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(36px, 6vh, 72px);
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-text-disabled);
}
/* When the case supplies a real hero image, fill the frame edge-to-edge. */
.case-hero-media.has-img { overflow: hidden; background: var(--color-bg); }
.case-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Body: floating left chapter nav + content. */
.case-body {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: clamp(160px, 18vw, 220px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(8px, 2vh, 24px);
}

/* Minimal floating chapter navigation — pinned in the lower half of the
   viewport, so it sits a touch below centre as you scroll the chapters. */
.case-nav {
  position: sticky;
  top: 62vh;
  transform: translateY(-50%);
  align-self: start;
}
.case-nav ol { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.case-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-text-disabled);
  transition: color var(--duration-base) var(--ease-out);
}
.case-nav a::before {
  content: "";
  width: 16px;
  height: 0.5px;
  background: currentColor;
  transition: width var(--duration-base) var(--ease-out);
}
.case-nav a:hover { color: var(--color-text-secondary); }
.case-nav a.is-active { color: var(--color-text-primary); }
.case-nav a.is-active::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-primary);
  animation: pulse 2s var(--ease-in-out) infinite;
}

/* Content chapters. */
.case-main { max-width: 72ch; }
.case-chapter { padding-block: clamp(28px, 5vh, 56px); scroll-margin-top: clamp(8px, 2vh, 24px); }
.case-chapter + .case-chapter { border-top: 0.5px solid var(--color-border); }
.case-ch-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-text-disabled);
  margin-bottom: clamp(16px, 2vh, 24px);
}
.case-chapter h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fluid-h4);
  line-height: 1.16;
  letter-spacing: var(--track-h4);
  color: var(--color-text-primary);
  margin-bottom: clamp(16px, 2.4vh, 28px);
  max-width: 20ch;
}
.case-chapter p {
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 60ch;
}
.case-chapter p + p { margin-top: 1.2em; }
.case-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(28px, 4vh, 48px);
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-text-disabled);
}

/* Outcome stat block: serif numbers with a mono label + note, hairline-ruled. */
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 4vh, 48px);
  padding-top: clamp(24px, 3vh, 36px);
  border-top: 0.5px solid var(--color-border);
}
.case-stat { display: flex; flex-direction: column; gap: 6px; }
.case-stat-num {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.case-stat-label {
  margin-top: 4px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.3;
  color: var(--color-text-primary);
}
.case-stat-note {
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
@media (max-width: 720px) {
  .case-stats { grid-template-columns: 1fr; gap: clamp(20px, 3vh, 28px); }
}

/* "What Changed" transition blocks: a From → To title, supporting copy, and
   an optional looping video, hairline-ruled between each shift. */
.case-transitions {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 6vh, 64px);
  margin-top: clamp(28px, 4vh, 48px);
}
.case-transition + .case-transition {
  padding-top: clamp(36px, 6vh, 64px);
  border-top: 0.5px solid var(--color-border);
}
.case-transition-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fluid-h4);
  line-height: 1.16;
  letter-spacing: var(--track-h4);
  color: var(--color-text-primary);
  margin-bottom: clamp(12px, 1.8vh, 20px);
}
.case-transition-arrow { color: var(--color-text-disabled); margin: 0 0.12em; }
.case-transition-body {
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 60ch;
}
.case-transition-media { margin: clamp(20px, 3vh, 32px) 0 0; }
/* Parent frame: a shade darker than the video, with padding so the rounded
   video frame sits inset within it (matching the SVG figure frames). */
.case-transition-video {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(8px, 1.2vw, 14px);
  overflow: hidden;
}
/* The video frame itself: its own 16/9 box, rounded corners, no scrolling. */
.case-transition-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0.5px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

/* SVG diagram figures: no fixed ratio — let the artwork set its own height,
   with a mono caption beneath. */
.case-figure--svg {
  display: block;
  aspect-ratio: auto;
  background: var(--color-surface-1);
  padding: clamp(14px, 2.4vw, 28px);
  text-transform: none;
  letter-spacing: normal;
}
.case-figure--svg svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.case-figure-cap {
  margin-top: clamp(12px, 1.6vh, 18px);
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text-secondary);
  text-align: left;
}

/* A human, serif title that sits above a figure — outside the card frame —
   subordinate to the chapter h3. Pulls its figure up close beneath it. */
.case-fig-title {
  margin-top: clamp(28px, 4vh, 48px);
  font-size: var(--fluid-body-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  max-width: 28ch;
}
.case-fig-title + .case-figure,
.case-fig-title + .case-figure--svg {
  margin-top: clamp(12px, 1.6vh, 18px);
}

/* ── Interactive data-viz explorer (Pure Storage · Approach) ──
   Design-system pills pick a visualization type; Overview pairs every
   thumbnail with the user need it answers. Lives inside a .case-figure--svg,
   so the global `svg { width:100% }` rule sizes each currentColor glyph. */
.vizx { --vizx-accent: #E8A13A; width: 100%; }
.vizx-eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-size: var(--text-label-md);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Pills — built on the .tag scale, but as a real toggle row. */
.vizx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2.4vh, 26px); }
.vizx-pill {
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-btn);
  padding: 7px 14px;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}
.vizx-pill:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }
.vizx-pill.is-chosen:not(.is-active) { color: var(--vizx-accent); border-color: rgba(232,161,58,0.5); }
.vizx-pill.is-active {
  color: var(--color-btn-primary-text);
  background: var(--color-btn-primary-bg);
  border-color: var(--color-btn-primary-bg);
}

/* Panels: only the active one shows (so it degrades to Overview with no JS).
   The shown rules carry two classes, so they beat the bare `display:none`
   regardless of source order. */
.vizx-panel { display: none; }
.vizx-overview.is-shown { display: flex; }
.vizx-detail.is-shown { display: grid; }

/* Shared label + glyph */
.vizx-need-label {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-sm);
  text-transform: uppercase;
  color: var(--vizx-accent);
  opacity: 0.85;
}
/* Concept thumbnail (real Pure1 screenshot) shown in each detail panel. */
.vizx-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xs);
  border: 0.5px solid var(--color-border);
}
.vizx-chosen-tag {
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
  color: var(--color-btn-primary-text);
  background: var(--vizx-accent);
  border-radius: var(--radius-btn);
  padding: 2px 8px;
  line-height: 1.4;
}

/* Overview: thumbnails grouped under the user need they answer. */
.vizx-overview { flex-direction: column; gap: clamp(20px, 3vh, 30px); }
.vizx-group-q {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  line-height: 1.4;
  color: var(--color-text-body);
}
.vizx-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.vizx-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px 14px;
  text-align: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.vizx-thumb:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}
.vizx-thumb.is-chosen { color: var(--vizx-accent); border-color: rgba(232,161,58,0.45); }
.vizx-thumb-viz { width: 100%; max-width: 120px; }
.vizx-thumb-name {
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
}
.vizx-thumb .vizx-chosen-tag { position: absolute; top: 8px; right: 8px; }

/* Detail: large glyph + the type’s need and trade-offs. */
.vizx-detail {
  grid-template-columns: minmax(220px, 1.1fr) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
/* A thin frame around the screenshot, so it reads as an inset thumbnail. */
.vizx-detail-viz {
  padding: clamp(6px, 1vw, 10px);
  background: var(--color-surface-2);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.vizx-detail-viz.is-chosen { color: var(--vizx-accent); border-color: rgba(232,161,58,0.45); }
.vizx-need {
  margin: 0 0 2px;
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  line-height: 1.4;
  color: var(--color-text-body);
}
.vizx-name {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
  font-family: var(--font-body);
  font-size: var(--fluid-body-lg);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.vizx-props { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.vizx-prop dt {
  margin-bottom: 4px;
  font-family: var(--font-ui);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-label-md);
  text-transform: uppercase;
}
.vizx-prop dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-text-body);
}
.vizx-prop--good dt { color: var(--vizx-accent); }
.vizx-prop--bad dt { color: var(--color-text-disabled); }

@media (max-width: 640px) {
  .vizx-detail { grid-template-columns: 1fr; gap: clamp(16px, 3vh, 24px); }
}

/* Lock background scroll while the modal is open. */
html.case-open, body.case-open { overflow: hidden; }

/* ── Initial states for JS-driven reveal (no-FOUC) ──────── */
.js .reveal-fade { opacity: 0; }
.js .hero-line   { opacity: 0; }   /* un-hidden by JS once lines are clipped */
.js .reveal-up   { opacity: 0; }   /* scroll-revealed by ScrollTrigger */
.js .polaroid    { opacity: 0; }   /* each floats in on its own beat (JS) */

/* ── Reduced motion: everything at rest, fully visible ──── */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow .dot,
  .scroll-cue .rail::after { animation: none; }
  .js .reveal-fade,
  .js .reveal-up,
  .js .polaroid,
  .js .hero-line { opacity: 1; }
  /* Pill still forms on scroll, but snaps rather than morphs. */
  .site-header, .nav-inner, .site-nav { transition: none; }
  /* Logos hold still — no marquee, full mask reveals the whole stack. */
  .logo-wall.is-ready .logo-track { animation: none; }
  .logo-wall { height: auto; -webkit-mask-image: none; mask-image: none; }
  /* Modal appears without the slide; active dot holds steady. */
  .case-shell { transition: none; }
  .case-nav a.is-active::before { animation: none; }
  .case-scroll { scroll-behavior: auto; }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .work-link { grid-template-columns: auto 1fr; gap: 16px 24px; }
  .work-media { grid-column: 2; width: 100%; max-width: 420px; margin-top: 8px; }
  .partners-row { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px); align-items: start; }
  .partners-logos { grid-template-columns: repeat(3, minmax(0, 120px)); justify-content: start; height: clamp(300px, 42vh, 400px); }

  /* Index: tighten the year column; table columns hold but gaps shrink. */
  .index-group { grid-template-columns: clamp(54px, 13vw, 84px) 1fr; column-gap: clamp(14px, 3vw, 28px); }
  .index-trigger { column-gap: clamp(12px, 2.4vw, 28px); }
  .index-marker { padding-top: clamp(16px, 2vh, 22px); gap: 10px; }

  /* Story: single column, media above copy. */
  .story-chapter { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 48px); }
  .story-chapter:nth-of-type(even) .story-media { order: 0; }
  .story-media { min-height: clamp(300px, 60vw, 440px); }
}

@media (max-width: 720px) {
  .site-header { padding: 14px var(--gutter) 0; }
  .brand { font-size: 16px; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: var(--text-label-sm); letter-spacing: 0.08em; }
  .hero-line { max-width: 100%; }
  .hero-foot { position: static; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: clamp(32px,6vh,56px); }
  .work-index { display: none; }
  .work-sub { margin-top: 10px; }
  .about-stats { grid-template-columns: 1fr; gap: clamp(24px, 4vh, 36px); }
  .stat-label { max-width: none; }
  .laurels { grid-template-columns: 1fr; gap: clamp(12px, 4vh, 32px); }
  .polaroid { width: clamp(150px, 46vw, 230px); }
  .partners-logos { grid-template-columns: repeat(3, minmax(0, 104px)); gap: 6px; height: clamp(300px, 44vh, 420px); }
  .logo-cell { margin-bottom: 6px; }
  .logo-mark { font-size: clamp(13px, 3.4vw, 18px); }
  .index-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Modal: single column, chapter nav becomes a sticky horizontal strip. */
  .case-crumb-title { display: none; }
  .case-body { grid-template-columns: 1fr; gap: 8px; }
  .case-nav {
    position: sticky;
    top: 0;
    transform: none;
    margin: 0 calc(-1 * clamp(20px, 4vw, 56px));
    padding: 10px clamp(20px, 4vw, 56px);
    background: var(--color-surface-1);
    border-bottom: 0.5px solid var(--color-border);
    z-index: 2;
  }
  .case-nav ol { flex-direction: row; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; }
  .case-nav a { padding: 4px 0; white-space: nowrap; }
  .case-nav a::before { display: none; }
}

@media (max-width: 560px) {
  /* Table collapses: name + toggle on the top row, industry / type / awards
     stack beneath in the name column so each row stays scannable. */
  .index-trigger {
    grid-template-columns: minmax(0, 1fr) 40px;
    row-gap: 6px;
  }
  .index-name { grid-column: 1; grid-row: 1; }
  .index-toggle { grid-column: 2; grid-row: 1; align-self: center; }
  .index-meta { grid-column: 1; grid-row: 2; }
  .index-panel-inner > * { margin-left: 0; }
}