/* Home v2 — full-screen snap panels. Layout + breakpoints only; all color and
   type live inline in the DC, except where a breakpoint has to override them. */

/* The page does not scroll. Panels stack in #deck and advance as a set —
   one translateY step per gesture, like a horizontal swipe turned vertical. */
/* banner art fills its track; height is what has to stay inside the panel */
#p00 [data-hero-grid] > [data-art] { max-height: 74svh; }
:root {
  --pad-top: 76px;
  --pad-bot: 76px;
  --gutter: 40px;
  /* glyph centre = panel padding-top + half the 13px eyebrow line-box,
     less half the 44px tap target */
  --hdr-top: calc(var(--pad-top) + 8.5px - 22px);
}
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#deck { position: relative; height: 100svh; overflow: hidden; }
#deck [data-panel], #deck [data-snap] { padding-bottom: env(safe-area-inset-bottom); }
[data-panel], [data-snap] {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  transition: transform .38s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform; backface-visibility: hidden;
}
#deck[data-instant] [data-panel], #deck[data-instant] [data-snap] { transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-panel], [data-snap] { transition: none; }
}

/* illustration flips to the left half on wide screens; on mobile the copy
   always leads, so DOM order stays copy-first. */
@media (min-width: 760px) {
  [data-flip="1"] > [data-art] { order: -1; }
}

/* 760–1080px: two columns, but the desktop gap and the 560px copy cap leave
   the track half-empty — tighten both so the columns actually fill. */
@media (min-width: 760px) and (max-width: 1080px) {
  :root { --gutter: 28px; }
  [data-grid] { gap: 40px !important; }
  [data-hero-grid] { gap: 32px !important; grid-template-columns: 1fr minmax(0, 52%) !important; }
  [data-grid] [data-body], [data-grid] [data-land] { max-width: none !important; }
  [data-grid] [data-art] { max-width: 380px !important; }
  #p01 [data-art] { max-width: 340px !important; }
}
/* short viewports: trim the vertical padding before anything has to scroll */
@media (max-height: 700px) and (min-width: 760px) {
  :root { --pad-top: 52px; --pad-bot: 40px; }
  [data-art] { max-height: 62svh; }
}

/* Panels taller than the viewport scroll internally — say so, and fade the
   copy out at the fold instead of slicing it mid-line. */
#scrollCue { transition: opacity .2s ease-out; color: #615D5A;
  background: linear-gradient(to bottom, rgba(255,252,250,0), rgba(255,252,250,0.92)); }
#scrollCue[data-tone="dark"] { color: rgba(255,252,250,0.65);
  background: linear-gradient(to bottom, rgba(23,20,18,0), rgba(23,20,18,0.92)); }
#scrollCue[data-on="1"] { opacity: 1; }

/* ---- below the two-column threshold ---- */
@media (max-width: 759px) {
  img, svg, video { max-width: 100%; }
  [data-grid], [data-hero-grid] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* the art is supporting texture on a phone, not the subject: cap it by
     viewport height so the copy above it always clears the fold */
  [data-art] {
    max-width: 100% !important; justify-self: center !important;
    aspect-ratio: auto !important; height: 30svh; min-height: 190px;
  }
  [data-art] > img { object-fit: contain; height: 100%; }
  :root { --gutter: 20px; --pad-top: 60px; --pad-bot: 44px; }
  [data-hero-grid] { gap: 20px !important; }
  [data-grid] [data-body], [data-grid] [data-land] { max-width: none !important; }
  [data-hero-grid] > div:last-child {
    aspect-ratio: auto !important; height: 40svh; min-height: 236px;
    max-width: 100% !important; justify-self: center !important;
  }
  /* banner runs tighter than the content panels so the diagram can be bigger */
  #p00 [data-hero-grid] { padding-bottom: 24px !important; gap: 14px !important; }
  #p00 [data-body]:first-of-type { margin-top: 22px !important; }
  #p00 [data-body] + [data-body] { margin-top: 14px !important; }
  [data-h1] { font-size: clamp(34px, 9.2vw, 44px) !important; }
  [data-h2] { font-size: clamp(27px, 7.4vw, 34px) !important; }
  [data-body] { font-size: 16px !important; }
  [data-land] { font-size: 17px !important; }

  /* header + footer keep their inline desktop styles; trim here */
  [style*="max-width: 1200px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="grid-template-columns: 1fr 180px 180px 220px"] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  [data-grid-position] > div { flex-direction: column !important; gap: 8px !important; }
  [style*="padding: 100px 0px 60px"] { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; padding-top: 64px !important; }
  [style*="font-size: 48px"] { font-size: 30px !important; line-height: 1.12 !important; }
  [style*="padding: 24px 0px 36px"] { flex-direction: column !important; gap: 6px !important; }
}

@media (max-width: 520px) {
  [style*="grid-template-columns: 1fr 180px 180px 220px"] { grid-template-columns: 1fr !important; }
}


/* ============================================================
   Panel 01 — "A hundred tabs, in a cohesive model"
   Four beats over ~4.6s, then holds on the hundred-tab state.
   The grid is always 10x10; each beat scales it so the revealed
   top-left k x k block fills the frame (transform, so it tweens).
   Sizes are in cqw so the whole scene tracks the stage width.
   ============================================================ */
.pm-stage {
  position: absolute; inset: 0; overflow: hidden;
  container-type: size;
  display: flex; flex-direction: column;
}
/* square play area; the running label sits beneath it */
.pm-frame { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; }
/* the square play area is centred inside whatever height is left */
.pm-square {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  height: 100%; aspect-ratio: 1; max-width: 100%;
  container-type: inline-size;
}
.pm-grid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.9cqw;
  transform-origin: 0 0;
  transition: transform .62s cubic-bezier(0.2, 0, 0, 1);
}
.pm-stage[data-beat="1"] .pm-grid,
.pm-stage[data-beat="2"] .pm-grid { transform: scale(3.28); }
.pm-stage[data-beat="3"] .pm-grid { transform: scale(1); }

.pm-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start;
  gap: 0.5cqw; overflow: hidden;
  background: #FFFCFA; border: 0.3px solid #E7E1DF; border-radius: 0.5cqw;
  padding: 0.8cqw;
  opacity: 0; transform: translateY(0.6cqw);
  transition: opacity .42s ease-out, transform .42s cubic-bezier(0.2, 0, 0, 1),
              border-width .62s ease-out, border-radius .62s ease-out, padding .62s ease-out;
}
.pm-tile[data-on] { opacity: 1; transform: none; }
.pm-stage[data-beat="3"] .pm-tile { border-width: 1px; border-radius: 1.6cqw; padding: 2cqw; }
.pm-tile[data-proxa] { background: #FAF8F5; }

.pm-tile b {
  display: block; font-size: 0.72cqw; font-weight: 500; line-height: 1.25;
  letter-spacing: -0.01em; color: #171412;
  transition: opacity .3s ease-out;
}
.pm-tile u {
  display: block; font-size: 0.6cqw; font-weight: 300; line-height: 1.2;
  color: #A09792; text-decoration: none; margin-top: auto;
  transition: opacity .3s ease-out;
}
/* labels only read at the largest scale */
.pm-stage[data-beat="3"] .pm-tile b, .pm-stage[data-beat="3"] .pm-tile u { opacity: 0; }

/* stand-in rows so a tile still reads as a table once labels drop out */
.pm-tile i { display: flex; flex-direction: column; gap: 0.45cqw; margin-top: 0.5cqw; }
.pm-tile i s { display: block; height: 0.3cqw; background: #E7E1DF; text-decoration: none; }
.pm-tile i s:nth-child(1) { width: 82%; }
.pm-tile i s:nth-child(2) { width: 64%; }
.pm-tile i s:nth-child(3) { width: 74%; }
.pm-tile i s:nth-child(4) { width: 52%; }
.pm-stage[data-beat="3"] .pm-tile i s { height: 0.42cqw; }

/* ---- beat 1: the workbook itself ---- */
.pm-book {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: #FFFCFA; border: 1px solid #E7E1DF; border-radius: 2cqw;
  transition: opacity .5s ease-out, transform .62s cubic-bezier(0.2, 0, 0, 1);
}
.pm-stage:not([data-beat="1"]):not([data-beat="5"]) .pm-book { opacity: 0; transform: scale(1.06); pointer-events: none; }
.pm-book-head {
  flex: none; display: flex; align-items: center; gap: 1.6cqw;
  padding: 3cqw 3.4cqw; border-bottom: 1px solid #E7E1DF;
}
.pm-book-head img { width: 3.6cqw; height: 3.6cqw; display: block; }
.pm-book-head b { font-size: 3cqw; font-weight: 500; letter-spacing: -0.01em; color: #171412; }
.pm-book-head span { font-size: 3cqw; font-weight: 300; color: #615D5A; }
.pm-book-body { flex: 1 1 auto; overflow: hidden; }
.pm-book table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pm-book th {
  text-align: right; font-size: 2.1cqw; font-weight: 500; color: #A09792;
  padding: 1.8cqw 2cqw; background: #FAF8F5; border-bottom: 1px solid #E7E1DF;
  white-space: nowrap;
}
.pm-book th:first-child, .pm-book td:first-child { text-align: left; }
.pm-book td {
  text-align: right; font-size: 2.2cqw; font-weight: 300; color: #33302E;
  padding: 1.55cqw 2cqw; border-bottom: 1px solid #F2EDEB; white-space: nowrap;
}
.pm-book tr[data-tot] td { font-weight: 500; color: #171412; }
.pm-book-tabs {
  flex: none; display: flex; gap: 1cqw; padding: 2cqw 2.4cqw;
  border-top: 1px solid #E7E1DF; background: #FAF8F5; overflow: hidden;
}
.pm-book-tabs span {
  flex: none; font-size: 2cqw; font-weight: 400; color: #615D5A;
  padding: 1.1cqw 1.8cqw; border: 1px solid #E7E1DF; border-radius: 1cqw;
  background: #FFFCFA; white-space: nowrap;
}
.pm-book-tabs span[data-on] { background: #171412; border-color: #171412; color: #FFFCFA; }

/* ---- beat 5: the hundred tabs resolve into one Model plate ----
   Same plate object as the 00 hero stack, drawn flat instead of isometric. */
.pm-plate {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #FFFCFA; border: 1px solid #E7E1DF; border-radius: 2cqw;
  opacity: 0; transform: scale(0.94);
  transition: opacity .5s ease-out, transform .62s cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}
.pm-stage[data-beat="4"] .pm-plate { opacity: 1; transform: none; }
.pm-stage[data-beat="5"] .pm-plate { opacity: 0; transform: scale(0.97); }
.pm-stage[data-beat="4"] .pm-grid, .pm-stage[data-beat="5"] .pm-grid { opacity: 0; transform: scale(1.04); transition: opacity .45s ease-out, transform .62s cubic-bezier(0.2, 0, 0, 1); }
.pm-ring {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 4.6cqw; padding: 5cqw;
}
.pm-ring div { display: flex; align-items: center; justify-content: center; gap: 2.6cqw; }
/* node matches the hero plate's glyph scale: ~8.2% of the artwork width */
.pm-ring span {
  flex: none; width: 8.2cqw; height: 8.2cqw; color: #A09792;
  opacity: 0; transform: rotate(-135deg) scale(0.55);
  transition: opacity .42s ease-out, transform .58s cubic-bezier(0.2, 0, 0, 1);
}
.pm-ring svg { width: 100%; height: 100%; display: block; }
.pm-ring img {
  flex: none; width: 29.8cqw; height: 13cqw; object-fit: contain; display: block;
  opacity: 0; transform: scale(0.88);
  transition: opacity .45s ease-out, transform .6s cubic-bezier(0.2, 0, 0, 1);
}
.pm-stage[data-beat="4"] .pm-ring span,
.pm-stage[data-beat="4"] .pm-ring img { opacity: 1; transform: none; }

/* ---- beat 6: Claude working in the sheet, from the Model ---- */
.pm-pane {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
  display: flex; flex-direction: column; gap: 3cqw;
  padding: 4cqw 3.6cqw; z-index: 2;
  background: #FAF8F5; border-left: 1px solid #E7E1DF;
  opacity: 0; transform: translateX(5%);
  transition: opacity .4s ease-out, transform .5s cubic-bezier(0.2, 0, 0, 1);
}
.pm-stage[data-beat="5"] .pm-pane { opacity: 1; transform: none; }
.pm-stage:not([data-beat="5"]) .pm-pane { pointer-events: none; }
.pm-pane-head { display: flex; align-items: baseline; gap: 1.4cqw; }
.pm-claude { width: 3.8cqw; height: 3.8cqw; color: #171412; flex: none; align-self: center; }
.pm-pane-head b { font-size: 3cqw; font-weight: 500; color: #171412; }
.pm-pane-head span { font-size: 2.4cqw; font-weight: 300; color: #A09792; margin-left: auto; }
.pm-ask {
  background: #FFFCFA; border: 1px solid #E7E1DF; border-radius: 2cqw;
  padding: 2.8cqw 3cqw; font-size: 3cqw; font-weight: 400; line-height: 1.3;
  color: #171412; text-wrap: pretty;
}
.pm-did { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.2cqw; }
.pm-did li {
  display: flex; align-items: center; gap: 1.6cqw;
  font-size: 2.5cqw; font-weight: 300; color: #33302E;
  opacity: 0; transform: translateY(0.8cqw);
  transition: opacity .34s ease-out, transform .34s cubic-bezier(0.2, 0, 0, 1);
}
.pm-did svg { width: 3cqw; height: 3cqw; color: #52B26E; flex: none; }
.pm-stage[data-beat="5"] .pm-did li { opacity: 1; transform: none; }
.pm-stage[data-beat="5"] .pm-did li:nth-child(1) { transition-delay: .30s; }
.pm-stage[data-beat="5"] .pm-did li:nth-child(2) { transition-delay: .48s; }
.pm-stage[data-beat="5"] .pm-did li:nth-child(3) { transition-delay: .66s; }
.pm-pane-foot {
  margin-top: auto; padding-top: 2.6cqw; border-top: 1px solid #E7E1DF;
  font-size: 2.3cqw; font-weight: 300; line-height: 1.35; color: #A09792; text-wrap: pretty;
}

/* ---- running label ---- */
.pm-tag {
  flex: none;
  display: flex; align-items: baseline; gap: 2cqw; flex-wrap: wrap;
  padding-top: 2.4cqw; border-top: 1px solid #E7E1DF;
  background: #FFFCFA;
}
.pm-tag b { font-size: 2.6cqw; font-weight: 500; letter-spacing: -0.01em; color: #171412; }
.pm-tag > span { font-size: 2.4cqw; font-weight: 300; color: #615D5A; font-variant-numeric: tabular-nums; }
/* the label row doubles as the beat stepper */
.pm-steps { margin-left: auto; display: flex; align-items: center; gap: 2.2cqw; }
.pm-steps button {
  appearance: none; background: none; border: 0; padding: 1cqw 0 0.4cqw;
  font: inherit; font-size: 2.2cqw; font-weight: 400; line-height: 1;
  font-variant-numeric: tabular-nums; color: #A09792; cursor: pointer;
  border-bottom: 1px solid transparent; transition: color .16s ease-out, border-color .16s ease-out;
}
.pm-steps button:hover { color: #615D5A; }
.pm-steps button[data-on] { color: #171412; font-weight: 500; border-bottom-color: #171412; }

@media (prefers-reduced-motion: reduce) {
  .pm-grid, .pm-tile, .pm-book, .pm-plate, .pm-ring span { transition: none; }
}