@font-face { font-family: "Quentin"; src: url("fonts/Quentin.otf") format("opentype"); font-display: swap; }

:root {
  --paper: #f8f8f7; --ink: #1a0d0b; --soft: #6b625c;
  --fill: rgba(26, 13, 11, 0.05);
  --pencil: #4a4542; --red: #b4532a;
  --serif: "EB Garamond", Georgia, serif; --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive; --quentin: "Quentin", "EB Garamond", serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Page ── */
.lab-top { display: flex; justify-content: space-between; align-items: center; padding: 28px clamp(16px, 4vw, 56px); }
.wordmark { font-size: 14px; letter-spacing: 0.18em; }
.wordmark span { color: var(--soft); }
.lab-back { font-size: 14px; color: var(--soft); }
.lab-back:hover { color: var(--ink); }

.lab-intro { text-align: center; padding: clamp(24px, 5vw, 64px) 16px 36px; }
.lab-intro h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 6vw, 76px); line-height: 1.02; margin: 0 0 14px; letter-spacing: -0.01em; }
.lab-intro > p { color: var(--soft); margin: 0 auto 28px; max-width: 34em; }
.lab-form { display: inline-flex; align-items: center; background: var(--fill); border-radius: 999px; padding: 6px 6px 6px 22px; max-width: 100%; }
.lab-prefix { color: var(--soft); font-size: 15px; }
.lab-form input { border: 0; background: none; font: inherit; font-size: 16px; width: min(260px, 46vw); padding: 10px 6px; outline: none; color: var(--ink); }
.lab-form button { border: 0; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 12px 22px; font-weight: 500; white-space: nowrap; }
.lab-fine { font-size: 13px; color: var(--soft); margin-top: 14px !important; }

.desk { padding: 0 clamp(16px, 4vw, 56px) 96px; }
.sheet { position: relative; max-width: 1320px; margin: 0 auto; padding: 28px clamp(16px, 13vw, 190px) 76px; }
.reading { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; justify-content: center; font-family: var(--hand); font-size: 22px; color: var(--pencil); min-height: 34px; margin-bottom: 18px; }
.reading-lead b { font-weight: 600; }
.tick { opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.tick.on { opacity: 1; transform: none; }
.tick.miss { color: var(--red); }

/* ── Browser frame ── */
.frame-wrap { position: relative; }
.frame { position: relative; width: 100%; aspect-ratio: 1000 / 696; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(26, 13, 11, 0.05), 0 24px 60px -22px rgba(26, 13, 11, 0.28); }
.frame > .before, .frame > .site { position: absolute; left: 0; top: 5.17%; width: 1000px; height: 660px; transform-origin: 0 0; }
.bar { position: relative; z-index: 5; height: 5.17%; display: flex; align-items: center; gap: 6px; padding: 0 1.4%; background: #efedea; }
.bar i { width: 9px; height: 9px; border-radius: 50%; background: #dcd8d3; }
.bar-url { margin: 0 auto; font-size: clamp(9px, 1.1vw, 13px); color: var(--soft); background: #fff; padding: 3px 18px; border-radius: 999px; transform: translateX(-20px); }

/* BEFORE (deliberately dated) */
.before { font-family: "Times New Roman", Times, serif; background: #e9e9e9; color: #222; transition: opacity 1s, filter 1s; }
.b-top { height: 58px; background: linear-gradient(#2a51a6, #173a85); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.b-logo { font-size: 26px; font-weight: bold; text-shadow: 1px 1px 0 #000; }
.b-tel { font-family: Arial; font-size: 13px; color: #ffe46b; }
.b-nav { background: #0f2a63; display: flex; gap: 2px; padding: 6px 8px; }
.b-nav a { font-family: Arial; font-size: 12px; color: #9fc3ff; text-decoration: underline; padding: 2px 6px; }
.b-hero { position: relative; height: 250px; margin: 10px; background: linear-gradient(135deg, #7a8fb8, #c9a46b); display: flex; align-items: center; justify-content: space-between; text-align: center; border: 3px ridge #999; }
.b-hero h2 { font-size: 34px; margin: 0 0 8px; color: #fff; text-shadow: 2px 2px 2px #000; }
.b-hero p { color: #fff; margin: 0; font-style: italic; }
.b-arrow { font-size: 60px; color: #fff; padding: 0 16px; }
.b-dots { position: absolute; bottom: 10px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); }
.b-dots i { width: 10px; height: 10px; border-radius: 50%; background: #fff8; } .b-dots .on { background: #fff; }
.b-marquee { margin: 0 10px; background: #ffef9a; color: #a00; font-family: Arial; font-size: 13px; font-weight: bold; padding: 6px; text-align: center; border: 1px dashed #c90; }
.b-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px; }
.b-cols > div { background: #fff; border: 2px outset #ccc; padding: 10px 12px; height: 228px; }
.b-cols h3 { margin: 0 0 6px; color: #173a85; font-size: 19px; border-bottom: 1px solid #ccc; }
.b-cols p { font-size: 14px; line-height: 1.35; margin: 0 0 8px; }
.b-cols a { font-family: Arial; font-size: 12px; color: #00e; text-decoration: underline; }
.frame.show-before .before { opacity: 1 !important; filter: none !important; z-index: 4; }

/* PENCIL */
.sketch { position: absolute; inset: 5.17% 0 0 0; width: 100%; height: 94.83%; z-index: 3; pointer-events: none; transition: opacity 1s; }
.sketch path { fill: none; stroke: var(--pencil); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.sketch path.thick { stroke-width: 5; opacity: .55; }
.sketch path.x { stroke-width: 1; opacity: .4; }
.sketch path.dot { stroke-width: 1.4; stroke-dasharray: 1 6; opacity: .6; }

/* ink reveal */
.ink { clip-path: inset(0 0 100% 0); }
.ink.on { clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.6,.05,.2,1); }
.fast .ink.on { transition-duration: .7s; }

/* hatch sweep on every playground change */
.sweep { position: absolute; z-index: 4; top: 5.17%; bottom: 0; width: 22%; left: -24%; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(74,69,66,0) 0 5px, rgba(74,69,66,.35) 5px 6.2px), linear-gradient(90deg, transparent, rgba(253,251,246,.55) 50%, transparent); }
.sweep.go { animation: sweep .75s cubic-bezier(.5,0,.3,1); }
@keyframes sweep { from { left: -24%; } to { left: 102%; } }

/* ══════════════════════════════════════════════════════════════
   THE REDESIGN: three concepts, each with its own point of view.
   Shared knobs: --s-a/--s-b (palette), --s-bg (paper), --s-r (corners),
   --s-head (headline face), --s-warm (photo warmth).
   ══════════════════════════════════════════════════════════════ */
.site {
  --s-bg: #f2ebdf; --s-ink: #1f1a17; --s-a: #2f4a3a; --s-b: #c98b4b; --s-r: 14px;
  --s-head: var(--serif); --s-head-w: 400; --s-head-ls: -0.01em; --s-warm: 0.2;
  color: var(--s-ink); font-family: var(--sans);
}
.site * { transition: background-color .6s, color .6s, border-radius .6s, filter .6s, letter-spacing .6s; }
.v { position: absolute; inset: 0; overflow: hidden; display: none; }
.v.active { display: block; }
.site.inked .v-cover { background: #120c0a; }
.site.inked .v-hymnal { background: var(--s-bg); }
.site.inked .v-poster { background: var(--s-a); }
.warm { filter: sepia(calc(var(--s-warm) * .55)) saturate(calc(1 - var(--s-warm) * .15)); }
.caps { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }

/* 1 · COVER: the homepage as a magazine cover */
.c-photo { position: absolute; inset: 0; }
.c-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.c-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,8,6,.55), rgba(12,8,6,.05) 38%, rgba(12,8,6,.15) 55%, rgba(12,8,6,.78)); }
.c-top { position: absolute; top: 22px; left: 36px; right: 36px; display: flex; justify-content: space-between; color: rgba(255,255,255,.86); }
.c-top nav { display: flex; gap: 22px; }
.c-mast { position: absolute; top: 40px; left: 28px; right: 28px; color: #fff; }
.c-mast h2 { margin: 0; font-family: var(--s-head); font-weight: var(--s-head-w); font-size: 232px; line-height: .8; letter-spacing: -0.035em; text-transform: uppercase; text-align: center; }
.c-mast p { margin: 6px 0 0; display: flex; justify-content: space-between; padding: 0 10px; color: rgba(255,255,255,.8); }
.c-lines { position: absolute; left: 40px; bottom: 34px; width: 520px; color: #fff; }
.c-lines .caps { color: var(--s-b); }
.c-lines h3 { margin: 10px 0 18px; font-family: var(--s-head); font-weight: var(--s-head-w); font-style: italic; font-size: 54px; line-height: .98; letter-spacing: var(--s-head-ls); }
.c-lines ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; font-size: 14px; color: rgba(255,255,255,.88); }
.c-lines li b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 13px; color: var(--s-b); margin-bottom: 2px; }
.c-seal { position: absolute; right: 44px; bottom: 34px; width: 150px; height: 150px; border-radius: 50%; background: var(--s-b); color: var(--s-ink); display: grid; place-items: center; }
.c-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.c-seal text { font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; fill: currentColor; }
.c-seal span { font-family: var(--serif); font-size: 40px; line-height: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 2 · HYMNAL: set like a beautiful book, framed by an arched window */
.h-run { position: absolute; top: 24px; left: 48px; right: 48px; display: flex; justify-content: space-between; color: color-mix(in srgb, var(--s-ink) 65%, transparent); }
.h-run nav { display: flex; gap: 20px; }
.h-arch { position: absolute; left: 64px; top: 70px; width: 290px; height: 560px; border-radius: 145px 145px var(--s-r) var(--s-r); overflow: hidden; }
.h-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.h-text { position: absolute; left: 430px; right: 64px; top: 96px; }
.h-orn { font-family: var(--serif); font-size: 26px; color: var(--s-b); line-height: 1; }
.h-text h2 { margin: 18px 0 14px; font-family: var(--s-head); font-weight: var(--s-head-w); font-size: 86px; line-height: .92; letter-spacing: var(--s-head-ls); }
.h-text h2 em { color: var(--s-a); }
.h-lede { margin: 0 0 34px; font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.3; color: color-mix(in srgb, var(--s-ink) 75%, transparent); max-width: 24em; }
.h-order { margin: 0 0 30px; }
.h-order .caps { color: var(--s-a); margin-bottom: 10px; display: block; }
.h-row { display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-size: 20px; padding: 4px 0; }
.h-row i { flex: 1; height: 1em; background: radial-gradient(circle, color-mix(in srgb, var(--s-ink) 40%, transparent) 1px, transparent 1.4px) 0 72% / 8px 8px repeat-x; }
.h-ctas { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.h-btn { background: var(--s-a); color: #fff; padding: 13px 24px; border-radius: 999px; font-weight: 500; }
.h-ctas a:not(.h-btn) { color: var(--s-a); font-weight: 500; }
.h-folio { position: absolute; bottom: 20px; left: 430px; right: 64px; display: flex; justify-content: space-between; font-family: var(--serif); font-style: italic; font-size: 14px; color: color-mix(in srgb, var(--s-ink) 50%, transparent); }

/* 3 · POSTER: the service times are the design */
.v-poster { color: var(--s-bg); }
.p-top { position: absolute; top: 22px; left: 40px; right: 40px; display: flex; justify-content: space-between; align-items: center; }
.p-name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.p-top nav { display: flex; gap: 22px; align-items: center; font-size: 14px; }
.p-pill { background: var(--s-b); color: var(--s-ink); padding: 9px 16px; border-radius: 999px; font-weight: 500; }
.p-kicker { position: absolute; left: 44px; top: 96px; font-size: 22px; font-weight: 500; opacity: .85; }
.p-times { position: absolute; left: 28px; top: 112px; margin: 0; font-family: var(--s-head); font-weight: var(--s-head-w); font-size: 300px; line-height: .86; letter-spacing: var(--s-head-ls); white-space: nowrap; }
.p-times em { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--s-b); letter-spacing: 0; padding: 0 .02em; }
.p-side { position: absolute; right: 44px; top: 126px; width: 220px; display: grid; gap: 18px; font-size: 15px; line-height: 1.35; }
.p-side b { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--s-b); font-weight: 600; margin-bottom: 3px; }
.p-steps { position: absolute; left: 40px; right: 40px; bottom: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.p-step { display: flex; gap: 14px; align-items: flex-end; }
.p-step img { width: 116px; height: 116px; object-fit: cover; border-radius: var(--s-r); flex: none; }
.p-step span { font-size: 12px; opacity: .7; display: block; margin-bottom: 4px; }
.p-step p { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }

/* ── Margin notes ── */
.note { position: absolute; width: clamp(110px, 11.5vw, 168px); font-family: var(--hand); font-size: clamp(17px, 1.55vw, 23px); line-height: 1.05; color: var(--red); opacity: 0; transition: opacity .5s; }
.note.on { opacity: 1; }
.note svg { width: 70px; height: 32px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset .9s ease .15s; }
.note.on svg { stroke-dashoffset: 0; }
.note span { display: block; rotate: -2deg; }
.n-right { left: calc(100% + 18px); }
.n-left { right: calc(100% + 18px); text-align: right; }
.n-left svg { margin-left: auto; }
.n-left span { rotate: 2deg; }
.notes-list { display: none; }

.signature { position: absolute; right: clamp(16px, 13vw, 190px); bottom: 22px; font-family: var(--quentin); font-size: clamp(22px, 2.4vw, 34px); color: var(--ink); clip-path: inset(0 100% 0 0); }
.signature.on { clip-path: inset(0 0 0 0); transition: clip-path 2.2s cubic-bezier(.4,.1,.3,1); }
.status { position: absolute; left: clamp(16px, 13vw, 190px); bottom: 28px; font-family: var(--hand); font-size: 22px; color: var(--soft); }

/* ── Playground tray ── */
.tray { max-width: 1320px; margin: 34px auto 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px 34px; padding: 22px 28px; background: var(--fill); border-radius: 18px; opacity: .35; pointer-events: none; transition: opacity .6s, transform .6s; transform: translateY(8px); }
.tray.on { opacity: 1; pointer-events: auto; transform: none; }
.tool { display: flex; flex-direction: column; gap: 10px; }
.tool-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.tool-label em { font-family: var(--hand); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--red); margin-left: 4px; }
.range { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.range input { width: 150px; accent-color: var(--ink); }
.seg { display: inline-flex; background: var(--fill); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.seg button.on { background: #fff; box-shadow: 0 1px 4px rgba(26, 13, 11, 0.12); }
.chips { display: flex; gap: 10px; }
.chip { width: 34px; height: 34px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); transform: scale(0.82); opacity: 0.7; transition: transform .25s, opacity .25s; }
.chip.on, .chip:hover { transform: none; opacity: 1; }
.hold { border: 0; background: var(--fill); border-radius: 999px; padding: 9px 16px; font-size: 14px; user-select: none; -webkit-user-select: none; }
.hold:active { background: var(--ink); color: var(--paper); }
.tray-cta { margin-left: auto; align-self: flex-end; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tray-cta p { margin: 0; font-family: var(--hand); font-size: 22px; }
.cta { background: var(--ink); color: var(--paper); padding: 13px 22px; border-radius: 999px; font-weight: 500; }
.cta-ghost { border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; color: var(--soft); font-size: 14px; }

/* layout picker: tiny previews of each concept */
.layouts { display: flex; gap: 10px; }
.lay { border: 0; background: var(--fill); border-radius: 12px; padding: 8px 8px 7px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--soft); transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.lay svg { width: 76px; height: 50px; display: block; border-radius: 4px; }
.lay:hover { transform: translateY(-2px); }
.lay.on { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(26, 13, 11, 0.12); }
.lay svg { opacity: .55; transition: opacity .25s; } .lay.on svg, .lay:hover svg { opacity: 1; }

@media (max-width: 899px) {
  .sheet { padding: 20px 14px 24px; }
  .note { display: none; }
  .notes-list { display: block; margin: 18px 4px 0; padding-left: 22px; font-family: var(--hand); font-size: 21px; line-height: 1.15; color: var(--red); }
  .notes-list li { margin-bottom: 6px; opacity: 0; transition: opacity .5s; } .notes-list li.on { opacity: 1; }
  .status, .signature { position: static; display: block; margin-top: 14px; }
  .signature { text-align: right; font-size: 24px; }
  .status { font-size: 19px; }
  .reading { font-size: 18px; gap: 2px 12px; }
  .lab-form { display: flex; } .lab-form input { width: 100%; min-width: 0; }
  .tray { padding: 18px; } .tray-cta { margin-left: 0; }
  .layouts { gap: 8px; } .lay svg { width: 64px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .ink.on, .signature.on { transition: none; } .sweep.go, .c-seal svg { animation: none; } }
.still *, .still *::before, .still *::after { transition: none !important; animation: none !important; }
/* polish */
.c-lines { width: 660px; }
.p-kicker { top: 104px; }
.p-times { top: 132px; font-size: 336px; }
.p-times { font-size: 318px; }
.p-side { width: 206px; right: 40px; }

/* ── Dark mode (matches the studio's dark theme) ── */
:root { --paper: #140705; --ink: #f8f8f7; --soft: #a8a29c; --fill: rgba(248, 248, 247, 0.07); --red: #e39a72; color-scheme: dark; }
.lab-intro { padding-bottom: 48px; }
.lab-intro h1 { margin-bottom: 32px; }
.lab-form input { color: var(--ink); }
.lab-form button, .cta { background: var(--ink); color: #140705; }
.frame { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); }
.bar { background: #2a1f1c; }
.bar i { background: #4a3d38; }
.bar-url { background: #3a2e2a; color: var(--soft); }
.seg button.on, .lay.on { background: #f8f8f7; color: #140705; box-shadow: none; }
.hold:active { background: var(--ink); color: #140705; }
.range input { accent-color: #f8f8f7; }
.signature { color: var(--ink); }
/* status + signature stack under the frame, so long church names never collide */
.sheet { padding-bottom: 24px; }
.status, .signature { position: static; display: block; }
.status { margin-top: 18px; }
.signature { text-align: right; margin-top: -6px; }
.signature { margin-top: 22px; }
.status { margin-top: 6px; }

/* 4 · HORIZON: one full-bleed photograph, words in the sky */
.site.inked .v-horizon { background: #2b2420; }
.v-horizon { color: #fff; }
.z-photo { position: absolute; inset: 0; }
.z-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.z-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,14,.42), rgba(20,16,14,0) 30%, rgba(20,16,14,0) 62%, rgba(20,12,8,.55)); }
.z-top { position: absolute; top: 22px; left: 40px; right: 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.z-name { font-family: var(--s-head); font-weight: var(--s-head-w); font-size: 22px; letter-spacing: var(--s-head-ls); }
.z-top nav { display: flex; gap: 24px; opacity: .9; }
.z-sky { position: absolute; top: 116px; left: 0; right: 0; text-align: center; }
.z-sky .caps { opacity: .85; }
.z-sky h2 { margin: 14px auto 0; font-family: var(--s-head); font-weight: var(--s-head-w); font-size: 74px; line-height: .98; letter-spacing: var(--s-head-ls); max-width: 780px; text-shadow: 0 2px 30px rgba(40, 20, 0, .35); }
.z-bar { position: absolute; left: 40px; right: 40px; bottom: 30px; display: flex; align-items: center; gap: 44px; padding: 14px 14px 14px 28px; border-radius: calc(var(--s-r) + 10px); background: rgba(30, 22, 18, .32); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); font-size: 15px; }
.z-bar b { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--s-b); margin-bottom: 2px; }
.z-btn { margin-left: auto; background: #fff; color: var(--s-ink); padding: 14px 24px; border-radius: calc(var(--s-r) + 4px); font-weight: 500; }

/* 5 · FILM: a living, moving welcome */
.site.inked .v-film { background: #120c0a; }
.v-film { color: #fff; }
.f-video { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 30%, #5a3f2c, #120c0a 70%); }
.f-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,8,6,.78), rgba(12,8,6,.2) 60%, rgba(12,8,6,.1)), linear-gradient(0deg, rgba(12,8,6,.6), transparent 35%); }
.f-top { position: absolute; top: 22px; left: 44px; right: 44px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.f-name { font-family: var(--s-head); font-weight: var(--s-head-w); font-size: 22px; letter-spacing: var(--s-head-ls); }
.f-top nav { display: flex; gap: 24px; opacity: .88; }
.f-copy { position: absolute; left: 44px; top: 190px; width: 620px; }
.f-live { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .08em; background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 8px 14px; border-radius: 999px; }
.f-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 0 0 rgba(255,90,60,.6); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(255,90,60,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,60,0); } }
.f-copy h2 { margin: 22px 0 28px; font-family: var(--s-head); font-weight: var(--s-head-w); font-size: 78px; line-height: .95; letter-spacing: var(--s-head-ls); }
.f-copy h2 em { font-family: var(--serif); font-weight: 400; color: var(--s-b); }
.f-ctas { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.f-btn { background: var(--s-b); color: var(--s-ink); padding: 14px 24px; border-radius: 999px; font-weight: 500; }
.f-play { display: inline-flex; align-items: center; gap: 12px; }
.f-play span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; padding-left: 2px; }
.f-foot { position: absolute; left: 44px; right: 44px; bottom: 26px; display: flex; justify-content: space-between; font-size: 13px; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .f-live i { animation: none; } }
.c-photo img { object-position: 50% 40%; }
.h-arch img { object-position: 50% 35%; }
.c-photo { overflow: hidden; }
.c-photo img { transform: scale(1.16); transform-origin: 40% 0; }
.z-photo::after { background: linear-gradient(180deg, rgba(20,16,14,.6), rgba(20,16,14,.18) 42%, rgba(20,16,14,0) 62%, rgba(20,12,8,.55)); }
.z-sky h2 { max-width: none; }

/* ── Tray hierarchy: layouts are the hero, fine-tuning sits quietly below ── */
.tray { flex-direction: column; align-items: stretch; gap: 0; padding: 28px 28px 22px; }
.tool-layout { gap: 14px; }
.tool-layout > .tool-label { font-size: 13px; color: var(--ink); }
.layouts { gap: 14px; flex-wrap: wrap; }
.lay { flex: 1 1 0; min-width: 120px; padding: 10px 10px 12px; gap: 10px; font-size: 14px; border-radius: 16px; }
.lay svg { width: 100%; height: auto; aspect-ratio: 88 / 58; border-radius: 8px; }
.lay.on { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); }
.tray-fine { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 40px; margin-top: 34px; }
.tray-fine .tool { gap: 8px; }
.tray-fine .tool-label { font-size: 11px; }
.tray-fine .tool:last-child { margin-left: auto; }
.tray-fine .chip { width: 28px; height: 28px; }
.tray-fine .seg button, .tray-fine .hold, .tray-fine .range { font-size: 13px; }
.tray-fine .range input { width: 120px; }
@media (max-width: 899px) {
  .lay { min-width: calc(33% - 10px); }
  .tray-fine .tool:last-child { margin-left: 0; }
}
.tray-fine { align-items: flex-start; }
.tray-fine .tool > :last-child { min-height: 38px; display: flex; align-items: center; }

/* embedded on the homepage */
.embed .lab-top { display: none; }
.embed .lab-intro { padding-top: 0; }
.embed .desk { padding-bottom: 40px; }

/* ══════════ PHONE: portrait browser, every concept rearranged (html.m set by lab.js) ══════════ */
.m .frame { aspect-ratio: 400 / 836; border-radius: 22px; }
.m .bar { height: 4.31%; } .m .bar i { width: 7px; height: 7px; }
.m .frame > .before, .m .frame > .site { top: 4.31%; }
.m .sketch { inset: 4.31% 0 0 0; height: 95.69%; }
.m .sweep { top: 4.31%; width: 40%; left: -42%; }
/* compact nav: links fold into a menu mark */
.m .site nav > a:not(.p-pill) { display: none; }
.m .site nav::after { content: ""; width: 20px; height: 9px; background: linear-gradient(currentColor 0 0) top / 100% 1.6px no-repeat, linear-gradient(currentColor 0 0) bottom / 70% 1.6px no-repeat; background-position: right top, right bottom; }
.m .site nav { gap: 14px; align-items: center; }

/* 1 · Cover */
.m .c-top { top: 18px; left: 22px; right: 22px; }
.m .c-mast { top: 40px; left: 16px; right: 16px; }
.m .c-mast h2 { font-size: 118px; }
.m .c-mast p { font-size: 8.5px; padding: 0 6px; margin-top: 8px; }
.m .c-lines { left: 24px; right: 24px; width: auto; bottom: 160px; }
.m .c-lines h3 { font-size: 40px; margin: 10px 0 16px; }
.m .c-lines ol { flex-direction: column; gap: 6px; font-size: 14px; }
.m .c-lines li { display: flex; gap: 8px; align-items: baseline; }
.m .c-lines li b { display: inline; margin: 0; }
.m .c-seal { right: 22px; bottom: 22px; width: 112px; height: 112px; }
.m .c-seal text { font-size: 10px; }
.m .c-seal span { font-size: 30px; }
.m .c-photo img { object-position: 40% 30%; transform: none; }

/* 2 · Hymnal */
.m .h-run { top: 18px; left: 24px; right: 24px; }
.m .h-run > span:last-child { display: none; }
.m .h-arch { left: 24px; right: 24px; top: 52px; width: auto; height: 290px; border-radius: 176px 176px var(--s-r) var(--s-r); }
.m .h-text { left: 24px; right: 24px; top: 366px; }
.m .h-orn { display: none; }
.m .h-text h2 { font-size: 50px; margin: 0 0 10px; }
.m .h-lede { font-size: 16px; margin-bottom: 18px; }
.m .h-order { margin-bottom: 18px; }
.m .h-row { font-size: 16px; padding: 2px 0; }
.m .h-ctas { flex-wrap: wrap; gap: 10px 18px; font-size: 14px; }
.m .h-btn { padding: 12px 20px; }
.m .h-folio { left: 24px; right: 24px; bottom: 14px; font-size: 12px; }
.m .h-folio > span:first-child { display: none; }

/* 3 · Poster */
.m .p-top { top: 16px; left: 22px; right: 22px; }
.m .p-pill { padding: 8px 14px; font-size: 13px; }
.m .p-kicker { left: 24px; top: 74px; font-size: 18px; }
.m .p-times { left: 14px; top: 96px; font-size: 168px; }
.m .p-side { left: 24px; right: 24px; top: 300px; width: auto; grid-template-columns: 1fr 1fr; gap: 14px 18px; font-size: 13.5px; }
.m .p-side p { margin: 0; }
.m .p-side p:last-child { grid-column: 1 / -1; }
.m .p-steps { left: 24px; right: 24px; bottom: 22px; grid-template-columns: 1fr; gap: 12px; }
.m .p-step { align-items: center; }
.m .p-step img { width: 72px; height: 72px; }
.m .p-step p { font-size: 17px; }

/* 4 · Horizon */
.m .z-top { top: 18px; left: 22px; right: 22px; }
.m .z-name { font-size: 19px; }
.m .z-sky { top: 84px; padding: 0 22px; }
.m .z-sky .caps { font-size: 9.5px; }
.m .z-sky h2 { font-size: 46px; margin-top: 12px; }
.m .z-photo img { object-position: 30% 60%; }
.m .z-bar { left: 14px; right: 14px; bottom: 14px; flex-wrap: wrap; gap: 14px 22px; padding: 18px 18px 14px; font-size: 13.5px; }
.m .z-bar span:nth-child(3) { display: none; }
.m .z-btn { margin: 0; width: 100%; text-align: center; }

/* 5 · Film */
.m .f-top { top: 18px; left: 22px; right: 22px; }
.m .f-name { font-size: 19px; }
.m .f-video video { object-position: 65% 50%; }
.m .f-video::after { background: linear-gradient(0deg, rgba(12,8,6,.85), rgba(12,8,6,.35) 55%, rgba(12,8,6,.3)); }
.m .f-copy { left: 24px; right: 24px; top: auto; bottom: 96px; width: auto; }
.m .f-live { font-size: 11px; padding: 7px 12px; }
.m .f-copy h2 { font-size: 54px; margin: 18px 0 22px; }
.m .f-ctas { flex-direction: column; align-items: flex-start; gap: 14px; }
.m .f-foot { left: 24px; right: 24px; bottom: 22px; flex-direction: column; gap: 4px; font-size: 12px; }

/* phone tray: layouts scroll sideways, tools stack */
@media (max-width: 899px) {
  .layouts { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 6px; }
  .layouts::-webkit-scrollbar { display: none; }
  .lay { flex: 0 0 116px; min-width: 0; scroll-snap-align: start; }
  .tray-fine { gap: 18px 28px; }
  .lab-intro h1 { font-size: clamp(34px, 10vw, 44px); margin-bottom: 22px; }
}