/* Frames: every page is a deck of screen-sized frames. One scroll, swipe or key press moves one frame,
   like the walkthrough video. Scenes are frames with several stops: each stop advances the scene one step.
   Native scroll snapping, so keyboard, touch, find-in-page and screen readers keep working. */
html { scroll-snap-type: y mandatory; scroll-padding-top: var(--nav); }
:root { --fh: calc(100svh - var(--nav)); }

.frame { position: relative; min-height: var(--fh); padding-block: clamp(28px, 6vh, 72px); display: flex; flex-direction: column; justify-content: center;
  scroll-snap-align: start; scroll-snap-stop: always; }
.frame > .wrap { width: 100%; }
.foot { scroll-snap-align: end; position: relative; z-index: 1; }

/* scenes: tall frames with one snap stop per step; the stage stays pinned while the steps play */
.scene.frame, .rebuild.frame { display: block; min-height: 0; padding: 0; scroll-snap-align: none; height: calc(var(--steps, 6) * var(--fh)) !important; }
.snaps { position: absolute; inset: 0; pointer-events: none; }
.snaps i { position: absolute; left: 0; width: 1px; height: var(--fh); top: calc(var(--k) * var(--fh)); scroll-snap-align: start; scroll-snap-stop: always; }
.scene .stage, .rebuild .stage, .story .scene .stage, .story .rebuild .stage { top: var(--nav) !important; height: var(--fh) !important; }

/* everything sits above the ink field */
main { position: relative; z-index: 1; }
.nav { z-index: 500; }
#field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }

/* arrival: a frame's content lifts in the first time it settles */
.js .frame:not(.seen) > .wrap > *, .js .frame:not(.seen) > .reveal > * { opacity: 0; transform: translateY(26px); }
.frame > .wrap > *, .frame > .reveal > * { transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.frame > .wrap > :nth-child(2), .frame > .reveal > :nth-child(2) { transition-delay: .08s; }
.frame > .wrap > :nth-child(3), .frame > .reveal > :nth-child(3) { transition-delay: .16s; }
.frame > .wrap > :nth-child(4), .frame > .reveal > :nth-child(4) { transition-delay: .24s; }
.frame > .wrap > :nth-child(n+5), .frame > .reveal > :nth-child(n+5) { transition-delay: .32s; }

/* frame index: where you are, and a way to jump */
.fhud { position: fixed; right: clamp(8px, 1.4vw, 22px); top: 50%; transform: translateY(-50%); z-index: 400; display: grid; gap: 10px; justify-items: end; }
.fhud ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; justify-items: end; }
.fhud button { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 3px 0; cursor: pointer; color: var(--ink); font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.fhud button i { width: 14px; height: 2px; background: currentColor; opacity: .35; transition: width .4s cubic-bezier(.2,.8,.2,1), opacity .3s, background-color .3s; }
.fhud button span { opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; white-space: nowrap; background: var(--paper); padding: 3px 6px; }
.fhud button:hover span, .fhud button:focus-visible span, .fhud.flash li.on button span { opacity: 1; transform: none; }
.fhud li.on button i { width: 30px; opacity: 1; background: var(--red); }
.fhud .count { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--grey); }
@media (max-width: 760px) { .fhud ol { display: none; } .fhud { top: auto; bottom: 12px; transform: none; } .fhud .count { background: var(--paper); padding: 5px 7px; border: 1px solid var(--rule); } }

/* type sized to the screen's height as well as its width, so headlines never spill out of a frame */
.h1 { font-size: clamp(52px, min(10.5vw, 16.5vh), 176px); }
.h2 { font-size: clamp(42px, min(6.5vw, 11vh), 104px); }
.lead { font-size: clamp(17px, min(1.7vw, 2.6vh), 23px); }

/* home hero: headline and next steps side by side, audiences underneath, all inside one frame */
.hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr); align-items: center; }
.hero-tags { margin-top: clamp(20px, 4vh, 44px); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* short screens and reduced motion: no pinning, every scene shows its finished state in normal flow */
@media (max-height: 520px), (prefers-reduced-motion: reduce) {
  .scene.frame, .rebuild.frame { height: auto !important; scroll-snap-align: start; }
  .snaps { display: none; }
  .scene .stage, .rebuild .stage, .story .scene .stage, .story .rebuild .stage { position: relative !important; top: 0 !important; height: auto !important; padding-block: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .frame:not(.seen) > .wrap > *, .js .frame:not(.seen) > .reveal > * { opacity: 1; transform: none; }
}

/* frame layouts */
.half { max-width: min(56%, 780px); }
.hero .half, .half.wide { max-width: min(64%, 900px); }
@media (max-width: 900px) { .half, .hero .half, .half.wide { max-width: none; } }
.next3 { list-style: none; margin: clamp(18px, 4vh, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); border-top: 2px solid var(--ink); }
.next3 li { padding-top: clamp(12px, 2.4vh, 22px); }
.next3 .n { font: 400 clamp(56px, min(7vw, 13vh), 120px)/.85 var(--display); color: var(--red); display: block; }
.next3 h3 { font: 400 clamp(28px, min(2.8vw, 5vh), 44px)/.95 var(--display); margin: 10px 0 8px; }
.next3 p { color: var(--grey); margin: 0; max-width: 32ch; }
@media (max-width: 760px) { .next3 { grid-template-columns: 1fr; } .next3 .n { font-size: 48px; } }
.mini { list-style: none; margin: clamp(18px, 3.5vh, 32px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
.mini a { display: flex; gap: 12px; align-items: baseline; padding: clamp(8px, 1.6vh, 14px) 0; border-bottom: 1px solid var(--rule); text-decoration: none; font: 400 clamp(22px, min(2.2vw, 4vh), 34px)/1 var(--display); }
.mini .n { font: 500 11px/1 var(--mono); color: var(--red-ink); }
@media (hover: hover) { .mini a:hover { color: var(--red-ink); } }
.ex { margin-top: clamp(14px, 2.6vh, 22px); max-width: 60ch; }
.frame .rows .row-link { padding: clamp(10px, 2vh, 20px) 0; }
.frame .rows .row-link h3 { font-size: clamp(28px, min(3.6vw, 6vh), 58px); }
@media (min-width: 1100px) {
  .frame .caps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .frame .cap .demo { aspect-ratio: 4 / 3; }
  .frame .cap .wb p { font-size: 14px; }
  .frame .cap .h3 { font-size: clamp(26px, 2vw, 34px); }
}
.tools4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tools4 .shot { aspect-ratio: 4 / 3; }
.tools4 .wb p { font-size: 14px; }
.portal-shot { display: grid; place-items: center; background: var(--ink) !important; color: var(--paper); }
.portal-shot span { font-size: clamp(28px, 2.6vw, 40px); }
@media (max-width: 1100px) { .tools4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tools4 { grid-template-columns: 1fr; } }
.frame.plate .op::after { will-change: transform; }

/* desktop paging (frames.js) moves one stop per gesture; native snapping stays for touch */
html.paged { scroll-snap-type: none; scroll-behavior: auto; }

/* fit: the tallest frames at laptop heights */
.hero .h1 { font-size: clamp(50px, min(9.6vw, 14.2vh), 168px); }
.hero .lead { font-size: clamp(16px, min(1.5vw, 2.4vh), 21px); }
.frame .proof-grid b { font-size: clamp(38px, min(5vw, 8.5vh), 84px); }
.frame .proof-grid span { font-size: 13px; }
.frame .rows .row-link { padding: clamp(8px, 1.7vh, 18px) 0; }
.frame .rows .row-link h3 { font-size: clamp(26px, min(3.2vw, 5.2vh), 54px); }
@media (min-width: 1100px) { .frame .cap .tb > span:nth-child(2) { display: none; } }
.half.wide .h1 { font-size: clamp(48px, min(9vw, 13vh), 160px); }

/* legal pages: short blocks in a grid so each part fits a frame */
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.6vh, 28px) clamp(24px, 4vw, 56px); margin-top: clamp(14px, 3vh, 32px); border-top: 2px solid var(--ink); padding-top: clamp(10px, 2vh, 20px); }
.legal-grid h2 { font: 400 clamp(24px, min(2.4vw, 4.4vh), 36px)/1 var(--display); margin: 0 0 8px; }
.legal-grid p, .legal-grid li { font-size: clamp(14px, min(1.1vw, 2vh), 16px); }
.legal-grid ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
@media (max-width: 760px) { .legal-grid { grid-template-columns: 1fr; } }

/* planner: compact enough for one frame on a laptop */
.planner-grid .svc { gap: 8px; }
.planner-grid .svc label { padding: 12px 12px 12px 42px; gap: 3px; }
.planner-grid .svc input { left: 13px; top: 14px; }
.planner-grid .svc .t { font-size: clamp(22px, min(1.9vw, 3.4vh), 28px); }
.planner-grid .svc small { font-size: 12.5px; line-height: 1.35; }
.step h2 { font-size: clamp(34px, min(4vw, 7vh), 64px) !important; }
@media (min-width: 1200px) { .planner-grid .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-label="Plan a project"] .h2.plate { font-size: clamp(36px, min(4.5vw, 8vh), 80px); }
[data-label="Plan a project"] .lead { margin-bottom: clamp(12px, 2.4vh, 32px) !important; }
[data-label="Plan a project"] .chrome { margin-bottom: clamp(14px, 2.6vh, 40px); }

/* short laptop screens: smaller demo windows */
@media (min-width: 1100px) and (max-height: 800px) {
  .frame .cap .demo { aspect-ratio: 16 / 9; }
  .frame .cap .wb { padding: 14px 16px; }
  .tools4 .shot { aspect-ratio: 16 / 9; }
}

/* phones: card rows swipe sideways inside their frame instead of stacking past it */
@media (max-width: 760px) {
  .frame .caps, .tools4 { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--g) * -1); padding: 4px var(--g) 14px; scrollbar-width: none; }
  .frame .caps > *, .tools4 > * { flex: 0 0 84%; scroll-snap-align: center; }
  .frame .cap .demo { aspect-ratio: 16 / 10; }
  .frame .rows .row-link p { font-size: 14px; }
  .frame .rows .row-link h3 { font-size: 28px; }
  .art .stage-a { max-height: 32vh; }
  .case h2 { font-size: 44px; } .case dd { font-size: 14px; } .case dl { gap: 8px; }
  .proj b { font-size: 30px !important; } .proj span { font-size: 12px; }
  .stamp { font-size: 18px; top: -12px; }
}
@media (min-width: 1200px) { .planner-grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, .6fr); } }
@media (min-width: 1400px) { .planner-grid .svc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.planner-grid .svc small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.step .hint { margin-bottom: 12px !important; }
.dots { margin-bottom: clamp(12px, 2.4vh, 26px) !important; }
@media (min-width: 900px) and (max-height: 950px) { [data-label="Plan a project"] .lead { display: none; } }
@media (max-height: 800px) { [data-label="Plan a project"] .h2.plate { font-size: 48px; } .step h2 { font-size: 36px !important; } .legal-grid p, .legal-grid li { font-size: 14px; } .legal-grid { gap: 12px 40px; } }
@media (max-width: 760px) { .halden .side { display: none; } .art .tb > span:nth-child(2) { visibility: hidden; } .stamp { right: 12px; } }

/* the ↓ key hint: a printed keycap, ink plate and a red plate slightly off register */
.keyhint { position: fixed; left: 50%; bottom: clamp(16px, 4vh, 34px); z-index: 450; display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 12px;
  background: var(--sheet); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--red);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .7s cubic-bezier(.2,.9,.2,1.15), opacity .4s; max-width: calc(100vw - 32px); }
.keyhint.in { transform: translate(-50%, 0); opacity: 1; }
.keyhint.out, .keyhint.end { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.kh-key { position: relative; width: 58px; height: 58px; flex: none; border: 0; padding: 0; background: none; cursor: pointer; }
.kh-key::before { content: ""; position: absolute; inset: 0; transform: translate(4px, -3px); border: 2px solid var(--red); border-radius: 10px; mix-blend-mode: var(--plate-blend); }
.kh-cap { position: absolute; inset: 0; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper);
  box-shadow: 0 6px 0 var(--ink); transform: translateY(-4px); font: 400 34px/1 var(--display); color: var(--ink); animation: kh-press 2.4s 2s infinite; }
.kh-key.hit .kh-cap { animation: kh-hit .32s ease; }
.kh-key:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; border-radius: 12px; }
@media (hover: hover) { .kh-key:hover .kh-cap { background: var(--red); color: #0c0c0c; } }
.kh-txt { margin: 0; display: grid; gap: 3px; font-size: 14px; line-height: 1.35; max-width: 34ch; }
.kh-txt b { font: 400 24px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.kh-sub { color: var(--grey); }
.kh-x { align-self: start; width: 28px; height: 28px; border: 1.5px solid var(--rule); background: none; color: var(--ink); cursor: pointer; font: 400 18px/1 var(--body); }
.keyhint.nudge { animation: kh-nudge .6s ease; }
@keyframes kh-press { 0%, 70%, 100% { transform: translateY(-4px); box-shadow: 0 6px 0 var(--ink); } 78% { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); } 86% { transform: translateY(-4px); box-shadow: 0 6px 0 var(--ink); } }
@keyframes kh-hit { 0% { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); background: var(--red); } 100% { transform: translateY(-4px); box-shadow: 0 6px 0 var(--ink); } }
@keyframes kh-nudge { 0%, 100% { translate: 0 0; } 20% { translate: -8px 0; } 40% { translate: 8px 0; } 60% { translate: -5px 0; } 80% { translate: 4px 0; } }
@media (max-width: 760px) { .keyhint { gap: 12px; padding: 10px; bottom: 54px; width: calc(100vw - 32px); } .kh-txt { max-width: none; flex: 1; } .kh-key { width: 48px; height: 48px; } .kh-cap { font-size: 28px; } .kh-txt b { font-size: 20px; } .kh-txt { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .keyhint { transition: opacity .2s; } .kh-cap { animation: none; } .keyhint.nudge { animation: none; } }

/* press sheet: loading screen and page changes (loader.js) */
.loader { display: none; }
.js .loader { display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; color: var(--ink);
  background: radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 1.4px) 0 0 / 14px 14px, var(--paper);
  animation: ld-fail 0s 5s forwards; will-change: transform; }
.loader::before, .loader::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--red); }
.loader::before { top: 100%; } .loader::after { bottom: 100%; }
.ld-out .loader { transform: translateY(-110%); transition: transform .8s cubic-bezier(.76, 0, .24, 1); }
.ld-gone .loader { display: none; }
.ld-prep .loader, .ld-leave .loader { display: grid; visibility: visible; animation: none; }
.ld-prep .loader { transform: translateY(110%); transition: none; }
.ld-leave .loader { transform: none; transition: transform .55s cubic-bezier(.76, 0, .24, 1); }
@keyframes ld-fail { to { visibility: hidden; } }
.ld-in { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 24px; }
.ld-mk { width: clamp(64px, 9vh, 104px); height: auto; overflow: visible; color: var(--ink); }
.ld-mk .tr { transform-box: fill-box; clip-path: inset(100% 0 0 0); animation: ld-ink .5s cubic-bezier(.2, .8, .2, 1) forwards; }
.ld-mk .tr:nth-of-type(2) { animation-delay: .08s; } .ld-mk .tr:nth-of-type(3) { animation-delay: .16s; }
.ld-mk .sl, .ld-mk .dt { transform-box: fill-box; opacity: 0; transform: translate(26px, -18px); animation: ld-reg .7s .3s cubic-bezier(.2, .9, .25, 1.2) forwards; }
.ld-mk .dt { animation-delay: .42s; }
@keyframes ld-ink { to { clip-path: inset(0 0 0 0); } }
@keyframes ld-reg { 60% { opacity: 1; transform: translate(-3px, 2px); } to { opacity: 1; transform: none; } }
.ld-name { margin: 0; font: 400 clamp(44px, min(8vw, 11vh), 112px)/.86 var(--display); letter-spacing: .02em; text-transform: uppercase; clip-path: inset(0 0 100% 0); animation: ld-up .6s .2s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes ld-up { to { clip-path: inset(0 0 0 0); } }
.ld-meta { margin: 0; display: flex; gap: 18px; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }
.ld-n { color: var(--red-ink); font-variant-numeric: tabular-nums; min-width: 3ch; }
.ld-meta i { width: clamp(80px, 14vw, 180px); height: 2px; background: var(--rule); position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ld-mk .tr, .ld-mk .sl, .ld-mk .dt, .ld-name { animation: none; clip-path: none; opacity: 1; transform: none; } }

/* AI Lab: three tools, each opens a file with screens and development figures (tools.js) */
.tools3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tools3 .shot { aspect-ratio: 16 / 10; cursor: zoom-in; }
.tools3 .shot img { object-position: 0 0; }
.tools3 .wb p { font-size: 15px; }
.tool-open { justify-self: start; margin-top: 6px; background: none; border: 0; border-bottom: 1.5px solid var(--red); padding: 0 0 3px; color: var(--ink); cursor: pointer; }
@media (hover: hover) { .tool:hover { box-shadow: 9px 9px 0 var(--red); transform: translate(-3px, -3px); } }
.tool { transition: transform .2s, box-shadow .2s; }
@media (max-height: 800px) and (min-width: 900px) { .tools3 .shot { aspect-ratio: 16 / 8; } }
@media (max-width: 900px) { .tools3 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--g) * -1); padding: 4px var(--g) 14px; scrollbar-width: none; } .tools3 > * { flex: 0 0 84%; scroll-snap-align: center; } }

.tool-dlg { width: min(1240px, calc(100vw - 32px)); max-height: calc(100svh - 48px); padding: 0; border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink); box-shadow: 10px 10px 0 var(--red); overflow: hidden; }
.tool-dlg[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: td-in .45s cubic-bezier(.2, .8, .2, 1); }
.tool-dlg::backdrop { background: rgba(8, 8, 8, .72); backdrop-filter: blur(3px); }
@keyframes td-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.td-bar { display: flex; gap: 14px; align-items: center; padding: 10px 12px 10px 16px; border-bottom: 1.5px solid var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.td-bar > span:first-child { margin-right: auto; }
.td-x { width: 34px; height: 34px; border: 1.5px solid var(--ink); background: none; color: var(--ink); font: 400 22px/1 var(--body); cursor: pointer; }
.td-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); padding: clamp(16px, 2.4vw, 28px); overflow: auto; overscroll-behavior: contain; }
.td-main { margin: 0; border: 1.5px solid var(--ink); background: #0c0c0c; }
.td-main img { width: 100%; height: auto; max-height: 56vh; object-fit: contain; display: block; }
.td-main img.in { animation: td-img .35s ease; }
@keyframes td-img { from { opacity: .2; } }
.td-main figcaption { padding: 10px 12px; font-size: 14px; border-top: 1.5px solid var(--ink); background: var(--sheet); }
.td-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.td-th { flex: 0 0 auto; width: 92px; height: 60px; padding: 0; border: 1.5px solid var(--rule); background: #0c0c0c; cursor: pointer; overflow: hidden; }
.td-th img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.td-th.on { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.td-note { font-size: 10.5px !important; margin: 10px 0 0; letter-spacing: .1em; }
.td-about { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; margin: 12px 0 0; }
.td-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.td-stats > div { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
.td-stats > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--rule); }
.td-stats b { display: block; font: 400 clamp(30px, 3vw, 46px)/.95 var(--display); }
.td-stats span { font-size: 13px; color: var(--grey); line-height: 1.35; display: block; margin-top: 3px; }
.td-stand { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 15px; }
html.dlg-open { overflow: hidden; }
@media (max-width: 900px) { .td-body { grid-template-columns: 1fr; } .td-main img { max-height: 42vh; } }
@media (prefers-reduced-motion: reduce) { .tool-dlg[open], .td-main img.in { animation: none; } .tool, .tool:hover { transform: none; } }