/* =========================================================================
   Miru Studio — Layout system (v1)
   -------------------------------------------------------------------------
   Spacing scale (8 tiers), 3 named breakpoints, 4 layout primitives.
   Every page rule references these tokens. No bespoke spacing values
   anywhere except where intentionally one-off (hero bottom-only padding,
   card asymmetric horizontal/vertical padding, marquee strip).

   Tokens
     --s-2xs   icon-tight
     --s-xs    tile gaps, tight stacks
     --s-sm    default gap, card inner padding
     --s-md    mid gaps, divider padding
     --s-lg    card horizontal padding, sub-section vertical
     --s-xl    sub-section spacious
     --s-2xl   standard section vertical
     --s-3xl   hero / generous section

   Breakpoints
     --bp-sm: 600px    small phones to large phones
     --bp-md: 880px    tablet to desktop
     --bp-lg: 1080px   desktop wide

   Primitives
     .l-section         section wrapper (--s-2xl vertical, top border)
     .l-section.is-spacious   bump to --s-3xl
     .l-rail            label rail (220px) + content (1fr) at md+
     .l-rail.is-display       wider middle column for display moments
     .l-stats           auto-fit responsive stat row
     .l-tile-grid       responsive media tile grid; modifiers --cols-2, --cols-3
   ========================================================================= */

:root {
  /* Spacing scale */
  --s-2xs: clamp(8px, 1vw, 12px);
  --s-xs:  clamp(16px, 2vw, 24px);
  --s-sm:  clamp(24px, 3vw, 40px);
  --s-md:  clamp(36px, 5vw, 56px);
  --s-lg:  clamp(56px, 8vw, 96px);
  --s-xl:  clamp(80px, 10vw, 140px);
  --s-2xl: clamp(96px, 14vw, 200px);
  --s-3xl: clamp(120px, 16vw, 220px);

  /* Breakpoints — used in @media via the literal pixel values
     (CSS doesn't allow var() inside @media queries) */
  --bp-sm: 600px;
  --bp-md: 880px;
  --bp-lg: 1080px;

  /* Containers — already canonical, declared here for completeness */
  --container-default: 1320px;
  --container-reading: 1080px;
}

/* =========================================================================
   Primitive: .l-section
   Standard section wrapper. Apply on the <section> element.
   ========================================================================= */

.l-section {
  padding: var(--s-2xl) 0;
  border-top: 1px solid var(--line);
}
.l-section.is-spacious { padding: var(--s-3xl) 0 var(--s-xl); }
.l-section.is-tight    { padding: var(--s-md) 0; }
.l-section.no-border   { border-top: 0; }

/* =========================================================================
   Primitive: .l-rail
   Label rail + body. Single column on mobile; 220px + 1fr at md+.
   For the one display moment (approach line), use .is-display:
   wider middle column with narrow side rails.
   ========================================================================= */

.l-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
  align-items: start;
}
@media (min-width: 880px) {
  .l-rail { grid-template-columns: 220px 1fr; }
  .l-rail.is-display { grid-template-columns: 1fr 8fr 1fr; }
}

/* =========================================================================
   Primitive: .l-stats
   Auto-fit responsive stat row. Drop-in replacement for case-results,
   work-results, fn-stats.
   ========================================================================= */

.l-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-sm);
  padding: var(--s-md) 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

/* =========================================================================
   Primitive: .l-tile-grid
   Responsive media-tile grid with modifiers.
     default      1 column
     --cols-2     1 col → 2 cols at sm+
     --cols-3     1 col → 2 cols at sm+ → 3 cols at md+
     --cols-4     1 col → 2 cols at sm+ → 4 cols at md+
   ========================================================================= */

.l-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xs);
}
@media (min-width: 720px) {
  .l-tile-grid.cols-2,
  .l-tile-grid.cols-3,
  .l-tile-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .l-tile-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .l-tile-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.l-tile-grid .span-2 { grid-column: span 2; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #131312;
  color: #FAFAF7;
  padding: 10px 14px;
  z-index: 9999;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.skip-link:focus { left: 12px; top: 12px; outline: 2px solid #FAFAF7; }
:focus-visible { outline: 2px solid #131312; outline-offset: 3px; }
a:focus-visible, button:focus-visible { outline-offset: 4px; }

/* ---------- Work page: social proof strip above hero ---------- */
.work-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 18px 0 var(--s-md);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 auto var(--s-md);
  font-family: var(--font-mono);
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  letter-spacing: var(--t-label-track);
  text-transform: uppercase;
  color: var(--text);
}
.work-proof-strip .item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.work-proof-strip .num {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  color: var(--text);
  text-transform: none;
}
.work-proof-strip .label { color: var(--muted); }

/* ---------- Visually-hidden (accessible) ---------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Work page: three-up vertical triptych hero ---------- */
.work-hero-triptych {
  margin-top: var(--s-md);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xs);
}
.work-hero-triptych > .tile {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: linear-gradient(160deg, #1d1d1f 0%, #2a2a2e 100%);
}
.work-hero-triptych .tile img,
.work-hero-triptych .tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .work-hero-triptych {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    scroll-padding: var(--gutter);
  }
  .work-hero-triptych > .tile {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
}

/* ---------- Work-tile aspect override (content is 9:16) ---------- */
/* Higher specificity than inline .work-tile rule */
.l-tile-grid .work-tile { aspect-ratio: 9 / 16; position: relative; }

/* ---------- Play-button overlay on hover (videos only) ---------- */
.l-tile-grid .work-tile:has(video)::after,
.work-hero-triptych .tile:has(video)::after,
.work-hero:has(video)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: rgba(19,19,18,0.55) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FAFAF7"><path d="M8 5v14l11-7z"/></svg>') center / 22px no-repeat;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  backdrop-filter: blur(2px);
}
.l-tile-grid .work-tile:has(video):hover::after,
.work-hero-triptych .tile:has(video):hover::after,
.work-hero:has(video):hover::after { opacity: 1; }

/* ensure parents are positioned for the ::after */
.work-hero { position: relative; }
.work-hero-triptych .tile { position: relative; }

/* Hide play-button overlay while video is playing */
.l-tile-grid .work-tile.is-playing::after,
.work-hero-triptych .tile.is-playing::after,
.work-hero.is-playing::after { opacity: 0 !important; }

/* Cursor hint that the tile is clickable */
.l-tile-grid .work-tile:has(video),
.work-hero-triptych .tile:has(video),
.work-hero:has(video) { cursor: pointer; }

/* ---------- Work-page client switcher ---------- */
.work-switcher {
  position: sticky;
  top: 72px; /* sits just under fixed .nav */
  z-index: 15;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.work-switcher-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.05vw, 16px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--muted);
}
.work-switcher a {
  color: var(--muted);
  transition: color 180ms ease;
  border-bottom: 1px solid transparent;
  /* Tap target: 8px vertical padding + 2px bottom = 10px on top, ~28px content,
     gives ~38px tap height. Negative margin keeps visual flush with siblings. */
  padding: 8px 4px;
  margin: -8px -4px;
  display: inline-block;
}
.work-switcher a:hover { color: var(--text); }
.work-switcher a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* Mobile: horizontal-scroll the switcher instead of wrapping to two lines.
   Total intrinsic width of the six client links exceeds a narrow viewport,
   so wrapping leaves "Momentous · SEEQ" awkwardly alone on row two. Swipeable
   strip keeps every brand reachable in one row, and JS scrolls the active
   page into view on load so the user lands on their context. */
@media (max-width: 720px) {
  .work-switcher-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 0 22px;
    scroll-padding-inline: var(--gutter);
  }
  .work-switcher-inner::-webkit-scrollbar { display: none; }
  .work-switcher-inner > a { flex-shrink: 0; white-space: nowrap; }
}


/* Page transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.25s; animation-timing-function: ease-out; }
::view-transition-new(root) { animation-duration: 0.25s; animation-timing-function: ease-in; }