@font-face {
  font-family: "Aguzzo";
  src:
    url("../fonts/AT-Aguzzo-Regular.woff2") format("woff2"),
    url("../fonts/AT-Aguzzo-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aguzzo";
  src:
    url("../fonts/AT-Aguzzo-Italic.woff2") format("woff2"),
    url("../fonts/AT-Aguzzo-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/*
  Figma artboard: 1728 × 4402
  Layout grid: 8 columns × 196px, 16px gutters, 24px side margins
  Column starts: 24, 236, 448, 660, 872, 1084, 1296, 1508
*/

:root {
  --stage-w: 1728;
  --stage-h: 4802; /* 4402 artboard + 400px intro/table gap */
  --intro-table-gap: 400px;
  --margin: 24px;
  --col: 196px;
  --gutter: 16px;
  --span-1: var(--col);
  --span-2: calc(var(--col) * 2 + var(--gutter)); /* 408 */
  --span-4: calc(var(--col) * 4 + var(--gutter) * 3); /* 832 */
  --col-1: var(--margin);
  --col-2: calc(var(--margin) + (var(--col) + var(--gutter)) * 1);
  --col-3: calc(var(--margin) + (var(--col) + var(--gutter)) * 2);
  --col-4: calc(var(--margin) + (var(--col) + var(--gutter)) * 3);
  --col-5: calc(var(--margin) + (var(--col) + var(--gutter)) * 4);
  --col-6: calc(var(--margin) + (var(--col) + var(--gutter)) * 5);
  --col-7: calc(var(--margin) + (var(--col) + var(--gutter)) * 6);
  --col-8: calc(var(--margin) + (var(--col) + var(--gutter)) * 7);
  /* One tile size (+ wide = 2 columns) */
  --tile-w: 408px;
  --tile-h: 536px;
  --wide-w: 832px;
  --cream: #e9ebd8;
  --ink: #0a0a0a;
  --muted: #8a8a8a;
  --paper: #ffffff;
  --scale: 1;
  --offset-x: 0px;
  --pan-x: 0px;
  --pan-y: 0px;
}

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

html {
  /* Reserve scrollbar space so width (and centering) doesn’t jump when content loads */
  overflow-y: scroll;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: "Aguzzo", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: none;
}

a {
  color: inherit;
  text-underline-offset: 0.12em;
}

a:hover {
  opacity: 0.55;
}

.tile__link:hover {
  opacity: 1;
}

.tile__link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  corner-shape: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/*
  The stage is scaled with transform, which does NOT change layout size.
  So the stage is taken out of flow (absolute) and the viewport height is
  set to the *visual* scaled height. That keeps one smooth page scroll —
  without a nested/clipped scroll that stops halfway through the table.
*/
.viewport {
  position: relative;
  width: 100%;
  height: calc(var(--stage-h) * 1px * var(--scale));
  overflow: hidden;
}

.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);
  transform: translateX(var(--offset-x)) scale(var(--scale));
  transform-origin: top left;
  background: var(--paper);
  opacity: 0;
  animation: stage-in 0.9s ease forwards;
}

/* Oval “table” — centered in the artboard (120 inset each side).
   Soft glow is pre-baked into ellipse-bg.png (no live SVG blur — Safari-friendly). */
.stage__ellipse {
  position: absolute;
  left: 50%;
  top: calc(451px + var(--intro-table-gap));
  width: 1488px;
  height: 3500px;
  transform: translateX(-50%) translateZ(0);
  pointer-events: none;
  z-index: 0;
}

/* PNG includes soft shadow padding beyond the oval */
.stage__ellipse img {
  position: absolute;
  left: -13.44%;
  top: -5.71%;
  width: 126.88%;
  height: 111.42%;
}

.intro,
.table,
.outro {
  position: relative;
  z-index: 1;
}

/* Push the collage down to open space under the header */
.table {
  top: var(--intro-table-gap);
}

/* Intro + outro sit on the center 2-column band (cols 4–5) */
.intro {
  position: absolute;
  left: 50%;
  top: 200px;
  width: 520px;
  transform: translateX(-50%);
  text-align: center;
  animation: intro-in 0.8s ease both;
}

.intro__logo {
  width: 44px;
  height: 44px;
  margin: 0 auto;
}

.intro__title {
  margin: 40px 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
}

.intro__copy {
  margin: 40px 0 0;
  font-size: 20px;
  line-height: 24px;
}

.table .tile {
  --drift-x: 0px;
  --drift-y: 18px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: absolute;
  margin: 0;
  /* Visible so the hover shadow can spill out; media clips itself */
  overflow: visible;
  border-radius: 58px; /* 66% of previous 88px */
  /* ~60% Figma corner smoothing (iOS preset); falls back to round in unsupported browsers */
  corner-shape: superellipse(1.6);
  transform: translate3d(var(--drift-x), var(--drift-y), 0);
  box-shadow: 0 0 0 transparent;
  z-index: 1;
}

.table.is-ready .tile {
  /* Scroll settle stays at ~1s; hover rule below speeds up tilt/lift only */
  transition:
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.table .tile.is-settled {
  /* Flat settle — no perspective until hover (cheaper on Safari) */
  transform: translate3d(0, 0, 0);
}

@media (hover: hover) and (pointer: fine) {
  .table.is-ready .tile.is-settled:not(.tile--center):hover {
    /* Quicker only while hovering so tilt can follow the cursor */
    transition:
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 1.05s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 20;
    transform: perspective(1000px) translate3d(0, -8px, 0) scale(1.03)
      rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    box-shadow:
      0 56px 140px rgba(0, 0, 0, 0.14),
      0 22px 48px rgba(0, 0, 0, 0.07);
  }
}

.table .tile img,
.table .tile .tile__fill,
.table .tile .tile__svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  corner-shape: inherit;
}

.table .tile .tile__svg {
  display: block;
  border: 0;
  overflow: hidden;
  pointer-events: none;
  /* object-fit doesn’t apply to <object>; SVG viewBox already matches the tile ratio */
}

.table .tile .tile__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  /* Avoid corner-shape / translateZ on <video> — Safari often freezes on frame 1 */
}

.tile__video {
  display: block;
  border: 0;
  background: var(--cream);
}

.tile__video--crop-bottom {
  object-position: center top;
}

.tile__fill {
  position: absolute;
  inset: 0;
}

.tile__fill--black {
  background: #000;
}

.tile__fill--cream {
  background: var(--cream);
}

/* One size: 408 × 536 — wide is two columns */
.tile--size {
  width: var(--tile-w);
  height: var(--tile-h);
}

.tile--wide {
  width: var(--wide-w);
  height: var(--tile-h);
}

/* Positions match Figma Home V2 (168:1369) */

.tile--totem {
  left: var(--col-3);
  top: 552px;
}

.tile--t3 {
  left: var(--col-5);
  top: 552px;
}

.tile--z1 {
  left: var(--col-2);
  top: 1105px;
}

.tile--sl1 {
  left: var(--col-4);
  top: 1105px;
}

.tile--video-b {
  left: var(--col-6);
  top: 1105px;
}

.tile--z3 {
  left: var(--col-2);
  top: 1657px;
}

.tile--to1 {
  left: var(--col-6);
  top: 1657px;
}

.tile--a1 {
  left: var(--col-2);
  top: 2209px;
}

.tile--c1 {
  left: var(--col-6);
  top: 2209px;
}

.tile--tr0 {
  left: var(--col-2);
  top: 2761px;
}

.tile--terracotta {
  left: var(--col-4);
  top: 2761px;
}

.tile--tr1 {
  left: var(--col-3);
  top: 3313px;
}

.tile--tr5 {
  left: var(--col-5);
  top: 3313px;
}

.table .tile.tile--center {
  left: 820px;
  top: 2157px;
  width: 88px;
  height: 88px;
  overflow: visible;
  border-radius: 0;
  corner-shape: initial;
}

.table .tile.tile--center img {
  border-radius: 0;
  corner-shape: initial;
}

.outro {
  position: absolute;
  left: 50%;
  top: calc(4074px + var(--intro-table-gap));
  width: 520px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 20px;
  line-height: 24px;
}

.outro p {
  margin: 0;
}

.outro p + p {
  margin-top: 24px;
}

.updated {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: var(--span-4);
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  font-size: 20px;
  line-height: 24px;
  color: var(--muted);
  white-space: nowrap;
  z-index: 1;
}

@keyframes stage-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes intro-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes intro-in-mobile {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage,
  .intro {
    animation: none;
    opacity: 1;
  }

  .stage {
    transform: translateX(var(--offset-x)) scale(var(--scale));
  }

  html.is-mobile .stage {
    transform: translate3d(var(--pan-x), var(--pan-y), 0) scale(var(--scale));
  }

  .intro {
    transform: translateX(-50%);
  }

  .table .tile {
    transition: none;
    transform: none;
  }

  .table.is-ready .tile {
    transition: none;
  }

  .table .tile.is-settled:not(.tile--center):hover {
    transform: none;
    box-shadow: none;
  }

  .minimap__card {
    transition: none;
  }
}

/* —— Mobile: free-drag window onto the table + mini-map —— */
.minimap {
  display: none;
}

html.is-mobile,
html.is-mobile body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
  touch-action: none;
}

/* Tighter header→table gap on mobile (150px vs 400px desktop) */
html.is-mobile {
  --intro-table-gap: 150px;
  --stage-h: 4552;
}

html.is-mobile .viewport {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

html.is-mobile .viewport.is-dragging {
  cursor: grabbing;
}

html.is-mobile .stage {
  transform: translate3d(var(--pan-x), var(--pan-y), 0) scale(var(--scale));
  transform-origin: top left;
  will-change: transform;
}

/* Match Figma mobile: header sits in the top-left of the window, not stage-center */
html.is-mobile .intro {
  left: 40px;
  top: 80px;
  width: 472px;
  transform: none;
  text-align: left;
  animation-name: intro-in-mobile;
}

html.is-mobile .intro__logo {
  margin: 0;
}

html.is-mobile .intro__title,
html.is-mobile .intro__copy,
html.is-mobile .outro,
html.is-mobile .updated {
  font-size: 24px;
}

html.is-mobile .intro__copy,
html.is-mobile .outro,
html.is-mobile .updated {
  line-height: 28px;
}

html.is-mobile .outro,
html.is-mobile .updated {
  left: auto;
  right: 40px;
  transform: none;
  text-align: right;
}

html.is-mobile .outro {
  width: 472px;
}

html.is-mobile .minimap {
  display: block;
  position: fixed;
  /* Match header’s on-screen left edge (intro left 40px × stage scale) */
  left: calc(40px * var(--scale));
  bottom: 40px;
  z-index: 40;
  width: 84px; /* 112 × 0.75 */
  height: 120px; /* 160 × 0.75 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

html.is-mobile .minimap__card {
  position: relative;
  width: 100%;
  height: 100%;
  /* Glass: white tint, 2px #F1F1F1 stroke, rx scaled with card */
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #f1f1f1;
  border-radius: 17px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

html.is-mobile .minimap.is-expanded .minimap__card {
  transform: scale(1.25);
}

html.is-mobile .minimap__dot {
  position: absolute;
  width: 16.5px;
  height: 16.5px;
  margin: -8.25px 0 0 -8.25px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.88);
  left: 16.5px;
  top: 16.5px;
  pointer-events: none;
}