@font-face {
  font-family: "La Belle Aurore";
  src: url("assets/LaBelleAurore.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --paper: #171a19;
  --paper-light: #202622;
  --ink: #eeeade;
  --body: #c1c7bb;
  --muted: #a7b29f;
  --rust: #e0ac88;
  --line: #3c463e;
  --accent: #bfcd9b;
  --wall-tone: #979692;
  --site-header-height: 84px;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --hand: "La Belle Aurore", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
body.dialog-open { overflow: hidden; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button, summary, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--rust); outline-offset: 5px; }
button { border-radius: 0; }
img, svg { display: block; max-width: 100%; }
button svg { pointer-events: none; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
h2 { font-size: clamp(38px, 4.1vw, 58px); line-height: 1.13; letter-spacing: -1.8px; }
h2 em, h1 em { font-weight: 400; }
ul, ol { padding: 0; }
[hidden] { display: none !important; }
.container { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: 10px; left: 14px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.notice { padding-block: 14px; color: var(--rust); }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 1.7px; line-height: 1.5; }
.small-star { font-size: 23px; line-height: 1; color: var(--rust); font-weight: 400; }
.handwritten { font-family: var(--hand); font-size: 28px; font-style: normal; font-weight: 400; letter-spacing: 0; }
.text-link { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; font-size: 12px; font-weight: 500; }
.text-link span { font-size: 19px; transition: transform .2s; }
.text-link:hover span { transform: translate(3px, -2px); }
.text-link:hover { color: var(--rust); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 50px; padding: 12px 21px; border: 1px solid transparent; border-radius: 3px; font-size: 12px; font-weight: 500; transition: background .2s, transform .2s; }
.button span { font-size: 21px; }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: #d2ddba; transform: translateY(-2px); }
.icon-button { border: 1px solid var(--line); background: transparent; width: 44px; height: 44px; display: inline-grid; place-content: center; font-size: 24px; flex-shrink: 0; border-radius: 50%; }
.icon-button:hover { background: #333c32; }
.site-header { --ink: #252e27; --body: #252e27; --rust: #354d35; position: relative; z-index: 30; isolation: isolate; background: var(--wall-tone); color: var(--ink); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("assets/header-wall.jpg") right 44% / clamp(420px, 72vw, 1100px) auto no-repeat; filter: brightness(.69) saturate(.8); mask-image: linear-gradient(105deg, transparent 16%, #000 68%), linear-gradient(180deg, #000 45%, transparent 100%); mask-composite: intersect; }
.header-inner { position: relative; z-index: 1; min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.identity { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 24px; line-height: 1.1; white-space: nowrap; min-height: 44px; }
.monogram { width: 44px; height: 44px; display: grid; place-content: center; background: #e8e3d9; color: #29332b; border-radius: 50%; font-size: 36px; font-style: italic; padding-bottom: 4px; padding-right: 2px; }
.hero { display: grid; grid-template-columns: .88fr 1.12fr; gap: 55px; align-items: center; padding-block: 65px 47px; }
.hero-copy { padding-bottom: 17px; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: 1.6px; }
h1 { font-size: clamp(65px, 6.1vw, 91px); line-height: 1.035; letter-spacing: -4px; margin-top: 28px; }
h1 em { position: relative; display: inline-block; color: var(--accent); }
h1 em::after { content: ""; position: absolute; left: 4px; right: 0; bottom: 1px; height: 8px; border-top: 2px solid #bd7855; border-radius: 50%; transform: rotate(-2deg); opacity: .8; }
.full-stop { color: var(--rust); }
.hero-description { margin-top: 28px; max-width: 365px; font-size: 14px; line-height: 1.9; color: var(--body); }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 27px; }
.hero-actions .text-link { font-size: 11px; }
.current-chapter { margin-top: 34px; font-size: 10px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.status-dot, .tiny-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.intro-story { padding-left: 28px; }
.intro-thought { max-width: 390px; color: var(--rust); font-size: 34px; line-height: 1.5; transform: rotate(-3deg); }
.landing { height: calc(100vh - var(--site-header-height)); height: calc(100svh - var(--site-header-height)); background: #141716; }
/* The camera handles panning; keyboard focus must not scroll the scene itself. */
.studio-scene { position: relative; width: 100%; height: 100%; isolation: isolate; overflow: hidden; overflow: clip; background: linear-gradient(var(--wall-tone) 0%, var(--wall-tone) 25%, #292e2a 65%, #141716 100%); touch-action: pan-y; }
.scene-surround { position: absolute; top: var(--art-top, 84px); left: 0; right: 0; height: var(--art-height, calc(100% - 164px)); background: linear-gradient(#e1ded8, #e4e1dc 20%, #e3dfda 40%, #2c3235 60%, #303539 80%, #272727) left / 50.1% 100% no-repeat, linear-gradient(#a0979c, #b3a9a4 20%, #4e4f51 40%, #5a5a5a 60%, #5a5a5a 80%, #dddccc) right / 50.1% 100% no-repeat; filter: brightness(.69) saturate(.8); pointer-events: none; transition: filter .3s; }
.studio-image, .spotlight-image { position: absolute; width: auto; height: calc(100% - 164px); max-width: none; left: 50%; top: 84px; transform: translateX(-50%); pointer-events: none; user-select: none; }
.has-camera .studio-image, .has-camera .spotlight-image { transform: none; }
.has-camera .studio-image, .has-camera .spotlight-image { width: var(--art-width); height: var(--art-height); left: var(--art-left); top: var(--art-top); }
.studio-image { filter: brightness(.69) saturate(.8); transition: filter .3s; mask-image: linear-gradient(90deg, transparent, black 10px, black calc(100% - 10px), transparent); }
.spotlight-image { filter: brightness(.94) saturate(.9); }
.studio-spotlight { position: absolute; inset: 0; clip-path: circle(0 at var(--spot-x, 50%) var(--spot-y, 50%)); opacity: 0; transition: opacity .25s; pointer-events: none; }
.studio-scene.has-spotlight .studio-image { filter: blur(3px) brightness(.43) saturate(.72); }
.studio-scene.has-spotlight .studio-spotlight { clip-path: circle(var(--spot-radius, 90px) at var(--spot-x) var(--spot-y)); opacity: 1; }
.studio-scene.has-note .studio-image { filter: blur(5px) brightness(.23) saturate(.7); }
.studio-scene.has-spotlight .scene-surround { filter: brightness(.43) saturate(.72); }
.studio-scene.has-note .scene-surround { filter: brightness(.23) saturate(.7); }
.scene-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 65%, #0e1313b3 100%); }
.scene-welcome { position: absolute; left: clamp(24px, 4.4vw, 78px); right: clamp(24px, 4.4vw, 78px); top: 10px; z-index: 5; color: #252e27; pointer-events: none; }
.scene-welcome .handwritten { max-width: none; font-size: 30px; line-height: 1.35; }
.scene-welcome > p:last-child { font-size: 10px; letter-spacing: .4px; margin-top: 4px; color: #252e27; }
.hotspot { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: none; z-index: 3; }
.hotspot::before { content: ""; display: block; width: 5px; height: 5px; margin: auto; border-radius: 50%; background: #eee5ce; box-shadow: 0 0 5px #10191480; opacity: .65; transition: opacity .2s, transform .2s; }
.hotspot:hover::before, .hotspot:focus-visible::before { opacity: 1; transform: scale(1.4); }
.hotspot:focus-visible { clip-path: none !important; z-index: 7; }
.scene-hotspots { display: contents; }
.studio-scene .hotspot.is-cropped { opacity: 0; pointer-events: none; }
.studio-scene .hotspot.is-cropped:focus-visible { opacity: 1; pointer-events: auto; z-index: 7; }
.hotspot.is-discovered::before { background: #d3b88a; opacity: .65; }
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .hotspot:not(.is-discovered)::before { animation: hotspot-invite var(--hotspot-pulse-cycle, 26s) ease-in-out infinite; animation-delay: var(--hotspot-pulse-delay, 0s); animation-play-state: paused; }
  html[data-motion="on"] .studio-scene.in-view:not(.has-spotlight, .has-note, .is-dragging, :focus-within) .hotspot:not(.is-cropped, .is-discovered)::before { animation-play-state: running; }
  .hotspot:hover::before, .hotspot:focus-visible::before { animation: none; }
}
@keyframes hotspot-invite {
  0%, 8%, 100% { opacity: .65; transform: scale(1); box-shadow: 0 0 5px #10191480, 0 0 0 0 #e4edff00, 0 0 0 #e4edff00; }
  3%, 5% { opacity: 1; transform: scale(1.8); box-shadow: 0 0 5px #10191480, 0 0 0 2px #e4edff40, 0 0 10px #e4edffb3; }
}
.story-connector { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; color: #f0e6d0; pointer-events: none; z-index: 4; overflow: visible; }
.studio-note { position: absolute; width: min(345px, calc(100% - 40px)); padding: 8px 12px 5px; max-height: calc(100% - 176px); overflow: auto; z-index: 5; color: #fff6e5; text-shadow: 0 1px 5px #111a1580; scrollbar-width: thin; scrollbar-color: #aaa38b transparent; }
.studio-note:focus { outline: none; }
.studio-note:focus-visible { outline: 1px dashed #f4edd459; outline-offset: 7px; }
.note-heading { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; align-items: start; margin-bottom: 6px; }
.note-kicker { font-family: var(--hand); font-size: 21px; line-height: 1.5; color: #e6c7a5; padding-top: 8px; }
.studio-note h2 { font-family: var(--hand); font-size: 34px; line-height: 1.45; letter-spacing: 0; margin-bottom: 14px; overflow-wrap: anywhere; }
.studio-note #note-body { font-family: var(--hand); font-size: 25px; line-height: 1.6; color: #f5efe1; overflow-wrap: anywhere; }
.studio-note .text-link { font-family: var(--hand); font-size: 23px; color: #eac69b; margin-top: 14px; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.note-close { border: 0; color: #eee8d7; font-family: var(--hand); font-size: 31px; }
.note-close:hover { background: #ece7d91a; }
.paint-cursor { position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none; width: 0; height: 0; display: none; }
.cursor-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #ff4d00; }
.cursor-trail { position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; max-width: none; }
.cursor-caption { position: absolute; white-space: nowrap; padding: 5px 11px; border-radius: 30px; color: #2b2d24; background: #ebcf8e; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: .3px; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .has-paint-cursor .paint-cursor { display: block; }
  html.has-paint-cursor, .has-paint-cursor a, .has-paint-cursor button, .has-paint-cursor summary { cursor: none; }
}
.chapter-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-label { font-size: 8px; letter-spacing: 1.3px; line-height: 1.9; color: var(--muted); }
.company { color: #b5c0a9; font-weight: 600; white-space: nowrap; }
.microsoft { font-size: 23px; display: flex; align-items: center; gap: 9px; letter-spacing: -.8px; }
.microsoft-mark { width: 21px; height: 21px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.microsoft-mark i { background: #b3c293; }
.sugar, .cure { font-size: 28px; letter-spacing: -1.7px; font-weight: 700; }
.samsung { font-size: 18px; font-weight: 750; letter-spacing: 1.2px; }
.strip-note { font-family: var(--serif); font-style: italic; color: var(--muted); line-height: 1.4; font-size: 16px; }
.section { padding-block: 105px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; margin-bottom: 34px; }
.section-index { color: var(--accent); margin-bottom: 21px; font-size: 9px; }
.section-intro { font-size: 12px; line-height: 1.9; color: var(--body); margin-bottom: 5px; min-width: 285px; }
.work-note { display: flex; gap: 20px; justify-content: space-between; align-items: center; font-size: 10px; color: var(--muted); padding-bottom: 25px; }
.work-note-copy { display: flex; align-items: center; gap: 8px; }
.work-note .work-motion { flex-shrink: 0; padding: 0 2px 0 12px; }
.work-motion .motion-icon { color: var(--ink); }
.work-note .tiny-dot { width: 4px; height: 4px; }
.work-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px; row-gap: 46px; }
.project-card { grid-column: span 2; position: relative; min-width: 0; }
.project-wide { grid-column: span 3; }
.project-art { position: relative; height: 270px; overflow: hidden; border-radius: 4px; isolation: isolate; }
.project-wide .project-art { height: 355px; }
.project-caption { padding: 21px 1px 0; }
.project-category { font-size: 8px; font-weight: 500; letter-spacing: 1.1px; color: var(--muted); }
.project-caption h3 { font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.3; margin-top: 8px; letter-spacing: -.4px; }
.project-open { display: flex; align-items: center; justify-content: space-between; text-align: left; border: 0; padding: 0; min-height: 44px; width: 100%; background: none; font: inherit; color: inherit; }
.project-open::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 4px; }
.project-open:focus-visible { outline: none; }
.project-open:focus-visible::after { outline: 2px solid var(--rust); outline-offset: 6px; }
.project-card:hover .project-open, .quest-card:hover .project-open { color: var(--rust); }
.project-caption > p:not(.project-category) { font-size: 11px; color: var(--body); margin-top: 5px; }
.project-proof { display: inline-block; margin-top: 14px; font-size: 9px; color: var(--accent); border-bottom: 1px solid #6a7853; padding-bottom: 2px; }
.project-proof-muted { color: var(--muted); border: none; font-style: italic; }
.case-cover-care { background: #d3e2dd; color: #355e51; }
.care-cover-ring { position: absolute; width: 215px; height: 215px; left: calc(50% - 107px); top: 30px; border: 1px solid #9bb9a7; border-radius: 50%; animation: orbit-turn 22s linear infinite; }
.care-cover-ring::after { content: ""; width: 10px; height: 10px; position: absolute; top: 23px; left: 23px; background: #6d957b; border-radius: 50%; }
.care-cover-sheet { position: absolute; width: 79%; top: 74px; left: 10.5%; padding: 12px; background: #fbfcf5; box-shadow: 0 12px 24px #26413521; transform: rotate(-6deg); animation: case-cover-float 9s ease-in-out infinite; }
.care-cover-sheet img { width: 100%; height: auto; }
.case-cover-bixby { background: #dbd9ec; color: #62567e; }
.bixby-cover-orb { position: absolute; width: 140px; height: 140px; top: 60px; left: calc(50% - 70px); border-radius: 50%; background: radial-gradient(circle at 30% 25%, #e8e2ff, #aca2d6 35%, #737ab6 70%, #4b568d); box-shadow: 0 12px 25px #51466925; }
.bixby-cover-orb::after { content: ""; position: absolute; inset: -19px; border: 1px solid #aea4cb; border-radius: 50%; }
.cover-wave { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.cover-wave i { width: 4px; height: 24px; border-radius: 3px; background: #f9f4ff; animation: cover-voice 1.8s ease-in-out infinite alternate; }
.cover-wave i:nth-child(2n) { height: 45px; animation-delay: -.6s; }
.cover-wave i:nth-child(3n) { height: 58px; animation-delay: -1s; }
.case-cover-gaming { background: #d6ddbf; color: #526444; }
.gaming-cover-tablet { position: absolute; width: 85%; height: auto; left: 7.5%; top: 61px; transform: rotate(5deg); animation: case-cover-float 8s ease-in-out infinite reverse; filter: drop-shadow(0 10px 7px #3e4e2926); }
.cover-live { position: absolute; bottom: 18px; right: 18px; display: flex; align-items: center; gap: 6px; border: 1px solid #91a078; border-radius: 20px; padding: 5px 9px; background: #e8eedb; font-size: 8px; }
.cover-live i { width: 5px; height: 5px; background: #8f6c43; border-radius: 50%; animation: cover-voice 2.3s ease-in-out infinite alternate; }
@keyframes case-cover-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes cover-voice { from { transform: scaleY(.5); } to { transform: scaleY(1.1); } }
.motion { animation-play-state: paused !important; }
html[data-motion="on"] .in-view .motion { animation-play-state: running !important; }
.art-slideshow { background: #0c1018; }
.art-slideshow video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.art-recaps { background: #e9d6c8; color: #824b3e; }
.recap-orbit { width: 340px; height: 340px; position: absolute; top: 10px; left: calc(50% - 170px); animation: orbit-turn 48s linear infinite; }
.orbit-petal { position: absolute; width: 200px; height: 124px; border-radius: 50%; opacity: .63; background: #c46a4e; left: 70px; top: 109px; }
.petal-one { transform: translateY(-63px); background: #d99164; }
.petal-two { transform: rotate(90deg) translateY(-63px); }
.petal-three { transform: rotate(180deg) translateY(-63px); background: #e6b289; }
.petal-four { transform: rotate(270deg) translateY(-63px); background: #c98363; }
.recap-card { position: absolute; width: 193px; top: 50px; left: calc(50% - 96px); padding: 18px 17px 13px; background: #f8eee1; box-shadow: 0 10px 24px #74473720; transform: rotate(5deg); animation: recap-sway 9s ease-in-out infinite; }
.recap-card svg { height: 200px; width: 100%; object-fit: cover; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes recap-sway { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-6px); } }
.art-editor { background: #dddced; color: #5e577d; }
.editor-window { width: 75%; height: 175px; position: absolute; left: 12.5%; top: 62px; border: 1px solid #b1aac8; border-radius: 5px; background: #f8f7fa; transform: rotate(-5deg); box-shadow: 0 14px 24px #55506a1a; }
.window-top { display: flex; height: 23px; border-bottom: 1px solid #ddd8e6; align-items: center; padding: 0 9px; gap: 4px; }
.window-top i { width: 4px; height: 4px; background: #c6bfd4; border-radius: 50%; }
.editor-page { width: 65%; height: 131px; background: white; margin: 10px auto; padding: 10px; box-shadow: 0 1px 5px #00000009; }
.editor-line { display: block; height: 4px; width: 60%; background: #cec8db; margin-bottom: 4px; }
.editor-line.short { width: 40%; margin-bottom: 9px; }
.editor-selection { position: relative; width: 100%; height: 78px; border: 1px solid #807092; transform-origin: center; animation: editor-arrange 8s ease-in-out infinite; }
.editor-selection svg { width: 100%; height: 100%; }
.editor-selection b { width: 5px; height: 5px; border: 1px solid #807092; background: white; position: absolute; }
.editor-selection b:nth-of-type(1) { left: -3px; top: -3px; }
.editor-selection b:nth-of-type(2) { right: -3px; top: -3px; }
.editor-selection b:nth-of-type(3) { left: -3px; bottom: -3px; }
.editor-selection b:nth-of-type(4) { right: -3px; bottom: -3px; }
.editor-toolbar { position: absolute; right: -14px; top: 51px; background: #6f668a; padding: 7px 6px; color: white; border-radius: 3px; display: flex; flex-direction: column; gap: 5px; font-size: 10px; box-shadow: 0 4px 12px #463b591a; animation: toolbar-float 8s ease-in-out infinite; }
@keyframes editor-arrange { 0%, 100% { transform: scale(.9) rotate(0); } 40%, 65% { transform: scale(1) rotate(3deg); } }
@keyframes toolbar-float { 0%, 100% { transform: translateY(0); } 45%, 65% { transform: translateY(11px); } }
.art-start { background: #d4e1d9; color: #446957; }
.start-board { width: 79%; height: 170px; position: absolute; top: 62px; left: 10.5%; padding: 23px 17px; background: #f8fbf6; transform: rotate(4deg); box-shadow: 0 12px 22px #29463812; border-radius: 4px; }
.start-search { display: flex; gap: 7px; margin-top: 10px; border: 1px solid #dfe4d9; border-radius: 3px; padding: 5px 8px; font-size: 6px; color: #6d7f69; }
.start-tiles { display: flex; gap: 7px; margin-top: 13px; }
.start-tile { flex: 1; padding: 6px; background: #e7ede3; border-radius: 2px; animation: tile-lift 6s ease-in-out infinite; }
.start-tile:nth-child(2) { background: #e9e4d6; animation-delay: -2s; }
.start-tile:nth-child(3) { background: #dce7e5; animation-delay: -4s; }
.start-tile i { display: block; width: 12px; height: 12px; background: #839d78; border-radius: 3px; margin-bottom: 6px; }
.start-tile:nth-child(2) i { background: #c3a777; }
.start-tile:nth-child(3) i { background: #7aa29c; }
.start-tile b { display: block; width: 75%; height: 2px; background: #9eafa0; margin-top: 3px; }
.start-tile b:last-child { width: 45%; }
@keyframes tile-lift { 0%, 60%, 100% { transform: translateY(0); } 25%, 40% { transform: translateY(-7px); } }
.art-sugar { background: #e6e7c9; color: #5c7043; }
.sugar-orbit { position: absolute; width: 218px; height: 218px; top: 30px; left: calc(50% - 109px); border: 1px solid #abb589; border-radius: 50%; animation: orbit-turn 22s linear infinite; }
.sugar-orbit::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #a7b983; left: 24px; top: 24px; }
.health-phone { position: absolute; width: 127px; height: 233px; background: #fbfcf3; border: 4px solid #7f8d62; border-radius: 22px; top: 49px; left: calc(50% - 63px); transform: rotate(-6deg); box-shadow: 0 9px 24px #46563220; padding: 19px 12px; }
.phone-speaker { position: absolute; top: 5px; width: 31px; height: 4px; left: calc(50% - 15px); background: #7f8d62; border-radius: 5px; }
.health-ring { width: 80px; height: 80px; margin: 10px auto; }
.ring-progress { transform: rotate(-90deg); transform-origin: center; animation: ring-grow 8s ease-in-out infinite; }
.phone-line { display: block; height: 4px; background: #dfe5ce; margin-top: 6px; width: 100%; border-radius: 2px; }
.phone-line.short { width: 70%; }
.health-flower { position: absolute; right: 36px; bottom: 22px; font-size: 59px; line-height: 1; color: #a2af72; animation: orbit-turn 30s linear infinite; }
@keyframes ring-grow { 0%, 100% { stroke-dasharray: 120 277; } 40%, 65% { stroke-dasharray: 242 277; } }
.side-section { background: #1d2220; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 23px; margin-top: 43px; }
.quest-card { position: relative; min-width: 0; }
.quest-homestead { grid-column: span 2; }
.quest-art { height: 190px; position: relative; overflow: hidden; border-radius: 3px; display: flex; justify-content: center; align-items: center; }
.quest-card h3 { font-size: 13px; font-weight: 500; margin-top: 11px; }
.quest-card h3 span { font-size: 18px; margin-left: 13px; flex-shrink: 0; }
.quest-card > p { font-size: 9px; color: var(--muted); margin-top: 1px; }
.quest-homestead .quest-art { background: #dce0cf; color: #61734c; }
.homestead-drawing { width: 255px; height: 150px; animation: homestead-breathe 9s ease-in-out infinite; }
@keyframes homestead-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.quest-narrative .quest-art { background: #e6d9cc; }
.narrative-papers { width: 165px; height: 134px; position: relative; }
.narrative-papers span { position: absolute; width: 107px; height: 65px; display: grid; place-items: center; box-shadow: 0 4px 9px #5e443111; background: #f9ecd5; color: #294638; font-family: var(--serif); font-style: italic; font-size: 16px; transform: rotate(-9deg); top: 5px; left: 9px; animation: paper-sway 9s ease-in-out infinite; }
.narrative-papers span:nth-child(2) { left: 50px; top: 39px; transform: rotate(8deg); background: #e9bfad; animation-delay: -3s; }
.narrative-papers span:nth-child(3) { left: 11px; top: 82px; height: 48px; background: #f8f1e3; transform: rotate(-3deg); animation-delay: -5s; }
@keyframes paper-sway { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.quest-loom .quest-art { background: #d9d8e3; color: #75708f; }
.loom-weave { width: 122px; height: 116px; position: relative; transform: rotate(10deg); animation: weave-sway 10s ease-in-out infinite; }
.loom-weave i { position: absolute; top: 0; bottom: 0; width: 15px; background: #8881a2; left: 7px; border-radius: 9px; }
.loom-weave i:nth-child(2) { left: 37px; }
.loom-weave i:nth-child(3) { left: 67px; }
.loom-weave i:nth-child(4) { left: 97px; }
.loom-weave b { position: absolute; left: 0; right: 0; height: 15px; background: #c0ac9d; top: 5px; border-radius: 9px; opacity: .9; }
.loom-weave b:nth-of-type(2) { top: 35px; }
.loom-weave b:nth-of-type(3) { top: 65px; }
.loom-weave b:nth-of-type(4) { top: 95px; }
@keyframes weave-sway { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-3deg); } }
.quest-dino .quest-art { background: #e8dfc4; color: #8b9261; }
.dino-drawing { width: 100px; height: 94px; animation: dino-hop 6s ease-in-out infinite; }
@keyframes dino-hop { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-11px) rotate(-4deg); } 90% { transform: translateY(0) rotate(2deg); } }
.quest-framewise .quest-art { background: #d6dfdf; color: #668287; }
.framewise-frames { position: relative; width: 128px; height: 95px; }
.framewise-frames span { position: absolute; width: 90px; height: 72px; border: 2px solid #749397; top: 20px; left: 0; transform: rotate(-11deg); }
.framewise-frames span:nth-child(2) { transform: rotate(9deg); top: 0; left: 31px; background: #d6dfdf99; animation: frame-shift 8s ease-in-out infinite; }
.framewise-frames span:nth-child(3) { border-color: #9bb2b1; width: 55px; height: 44px; left: 48px; top: 14px; transform: rotate(9deg); }
@keyframes frame-shift { 0%, 100% { transform: rotate(9deg); } 50% { transform: translate(-7px, -4px) rotate(0); } }
.quest-heart .quest-art { background: #ead4cc; color: #a86d5a; }
.quest-icon { width: 93px; height: 93px; }
.heart-drawing { animation: heart-beat 4s ease-in-out infinite; }
@keyframes heart-beat { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.08); } 25% { transform: scale(1); } 32% { transform: scale(1.05); } }
.quest-chair .quest-art { background: #dedccf; color: #6d7761; }
.chair-drawing { animation: chair-rock 9s ease-in-out infinite; transform-origin: bottom; }
@keyframes chair-rock { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.about-section { background: #20281f; }
.about-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 110px; }
.about-portrait { display: block; width: min(100%, 440px); height: auto; margin-block: 32px 24px; border-radius: 16px; }
.resume-link { border-bottom: 1px solid #87916c; margin-top: 5px; font-size: 11px; }
.about-copy h2 { font-size: clamp(36px, 3.5vw, 49px); }
.about-copy > p { font-size: 12px; line-height: 1.9; color: var(--body); margin-top: 19px; }
.about-copy .about-opening { font-size: 16px; color: var(--ink); margin-top: 24px; line-height: 1.65; }
.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.about-tags span { font-size: 9px; border: 1px solid #58664c; border-radius: 3px; padding: 5px 10px; }
.career-details { margin-top: 30px; border-top: 1px solid #46523e; border-bottom: 1px solid #46523e; }
.career-details summary { display: flex; align-items: center; justify-content: space-between; padding-block: 17px; min-height: 52px; font-size: 11px; }
.career-details summary > span { font-size: 20px; transition: transform .2s; }
.career-details[open] summary > span { transform: rotate(45deg); }
.career-list { list-style: none; margin: 0; padding-block: 0 12px; }
.career-list li { display: grid; grid-template-columns: 100px 1fr; padding-block: 12px; border-top: 1px solid #cdd6c022; }
.career-list li > span { font-size: 9px; color: var(--muted); padding-top: 2px; }
.career-list strong { font-size: 12px; font-weight: 600; }
.career-list p { font-size: 10px; color: var(--muted); }
.testimonial-empty { display: flex; align-items: flex-start; gap: 30px; background: #292923; padding: 42px 46px; border: 1px solid #424638; border-radius: 4px; margin-top: 39px; }
.quote-mark { font-family: var(--serif); font-size: 112px; line-height: .95; color: #b28c70; width: 56px; flex-shrink: 0; }
.empty-label { font-size: 8px; letter-spacing: 1.2px; color: #ccb498; margin-top: 5px; }
.testimonial-empty h3 { font-family: var(--serif); font-size: 27px; line-height: 1.3; font-weight: 400; margin-top: 12px; letter-spacing: -.5px; }
.testimonial-empty h3 + p { font-size: 12px; color: var(--body); line-height: 1.9; max-width: 495px; margin-top: 12px; }
.testimonial-empty .text-link { margin-top: 10px; font-size: 10px; color: var(--rust); }
.testimonial-stamp { margin-left: auto; align-self: center; text-align: center; font-family: var(--serif); font-size: 24px; line-height: 1.05; color: #d2ae86; border: 1px solid #887653; border-radius: 50%; padding: 20px 22px; transform: rotate(10deg); min-width: 127px; }
.site-footer { background: #111612; color: #f1eee2; padding-top: 69px; }
.footer-invitation { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-invitation .eyebrow { font-size: 8px; color: #c0cbb4; letter-spacing: 1.5px; }
.footer-invitation h2 { font-size: clamp(45px, 5vw, 71px); margin-top: 20px; letter-spacing: -2px; }
.footer-invitation > div > p:last-child { font-family: var(--serif); font-size: 29px; color: #bdcba7; margin-top: 7px; }
.footer-contact { display: grid; place-items: center; width: 97px; height: 97px; border: 1px solid #90a080; border-radius: 50%; margin-right: 11px; font-size: 12px; transition: color .2s, background .2s; }
.footer-contact span { font-size: 50px; line-height: 1; font-weight: 300; }
.footer-contact:hover { background: #c5cda9; color: #1c2b20; }
.footer-email { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 30px; padding-bottom: 52px; }
.footer-email > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; border-bottom: 1px solid #8b9a79; }
.footer-email .handwritten { font-size: 18px; color: #b2c39f; transform: rotate(-4deg); margin-right: 5px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid #49604c; padding-block: 18px; font-size: 9px; color: #c5cfbb; }
.footer-bottom > a { min-height: 44px; display: inline-flex; align-items: center; gap: 11px; }
.footer-bottom > a span { font-size: 17px; }
.motion-toggle { border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 8px; font-size: 9px; }
.motion-icon { font-size: 8px; letter-spacing: 1px; color: #dce7c5; }
.motion-toggle:disabled { opacity: .8; }
.prototype-note { display: flex; justify-content: center; align-items: center; gap: 25px; padding: 9px 22px; min-height: 49px; font-size: 8px; color: var(--muted); letter-spacing: .5px; }
.prototype-note a { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; }
.project-dialog { width: min(700px, calc(100% - 32px)); max-height: min(85svh, 860px); padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); box-shadow: 0 25px 100px #14221940; overscroll-behavior: contain; }
.project-dialog::backdrop { background: #1b2e26b3; backdrop-filter: blur(5px); }
.dialog-content { padding: 27px 43px 22px; }
.dialog-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dialog-topline .eyebrow { color: var(--muted); font-size: 8px; }
.dialog-topline .icon-button { border: 0; margin-right: -12px; }
.dialog-status { display: inline-block; font-size: 8px; padding: 4px 9px; background: #2b3427; color: #c6d5aa; letter-spacing: 1px; margin-top: 28px; border-radius: 2px; }
.project-dialog h2 { font-size: 46px; margin-top: 16px; line-height: 1.1; }
.dialog-summary { font-size: 14px; color: var(--body); line-height: 1.85; margin-top: 20px; }
.dialog-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 29px; border-block: 1px solid var(--line); padding-block: 22px; gap: 14px; }
.dialog-metrics strong { display: block; font-family: var(--serif); font-size: 36px; font-weight: 400; line-height: 1.15; letter-spacing: -1px; }
.dialog-metrics span { display: block; font-size: 9px; line-height: 1.6; color: var(--muted); margin-top: 9px; }
.dialog-facts { margin: 25px 0; padding-left: 18px; font-size: 12px; line-height: 1.9; color: var(--body); }
.dialog-facts li + li { margin-top: 8px; }
.dialog-facts li::marker { color: #8d9c75; }
.dialog-placeholder { display: flex; align-items: flex-start; gap: 15px; padding: 21px 23px; background: #242b23; margin-top: 27px; border-radius: 3px; }
.dialog-placeholder .small-star { margin-top: 3px; }
.dialog-placeholder strong { font-size: 12px; font-weight: 500; }
.dialog-placeholder p { margin-top: 6px; font-size: 11px; line-height: 1.8; color: var(--muted); }
.dialog-navigation { margin-top: 29px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.dialog-navigation p { text-align: center; font-size: 10px; color: var(--muted); }
.project-step { min-width: 64px; min-height: 44px; padding: 0 5px; background: none; border: 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.project-step:hover { color: var(--rust); border-color: var(--rust); }
.voice-page .site-header { position: static; }
.voice-main { max-width: 940px; padding-block: 85px; }
.voice-main h1 { font-size: clamp(48px, 7vw, 85px); line-height: 1.07; margin-top: 21px; }
.voice-deck { font-size: 17px; max-width: 640px; margin-top: 24px; color: var(--body); }
.voice-section { border-top: 1px solid var(--line); padding-top: 42px; margin-top: 48px; }
.voice-section h2 { font-size: 34px; letter-spacing: -.8px; }
.voice-section > p { margin-top: 17px; color: var(--body); max-width: 770px; }
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 25px; }
.voice-card { border: 1px solid var(--line); padding: 25px; border-radius: 3px; }
.voice-card h3 { font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1.2; }
.voice-card p { font-size: 13px; color: var(--body); margin-top: 12px; }
.voice-card .example-label { font-size: 9px; letter-spacing: 1px; margin-top: 20px; color: var(--muted); }
.voice-card .good-example { color: var(--ink); }
.voice-card .avoid-example { color: #d0a28d; }
.copy-block { background: #242d22; border-left: 2px solid #97a680; padding: 25px 28px; margin: 24px 0 0; }
.copy-block p + p { margin-top: 17px; }
.copy-block .copy-label { font-size: 9px; letter-spacing: 1px; color: var(--accent); margin-bottom: 14px; }
.copy-block h3 { font-family: var(--serif); font-size: 36px; font-weight: 400; margin-bottom: 13px; line-height: 1.2; }
.voice-list { margin-top: 22px; padding-left: 20px; color: var(--body); font-size: 14px; }
.voice-list li + li { margin-top: 12px; }
.voice-list strong { font-weight: 600; color: var(--ink); }
.voice-section .small-print { font-size: 11px; color: var(--muted); }
.voice-section a { text-decoration: underline; text-underline-offset: 3px; }
.voice-end { display: flex; gap: 22px; align-items: center; margin-top: 43px; }

@media (min-width: 1500px) {
  .hero { gap: 75px; padding-block: 88px 68px; }
  .project-wide .project-art { height: 390px; }
  .recap-card { top: 66px; }
  .recap-orbit { top: 25px; }
}
@media (max-width: 1150px) {
  .container { width: calc(100% - 72px); }
  .header-inner { gap: 22px; }
  .identity { font-size: 18px; }
  .hero { gap: 32px; grid-template-columns: .9fr 1.1fr; }
  h1 { font-size: 68px; letter-spacing: -3px; }
  .hero-actions { gap: 16px; flex-wrap: wrap; }
  .hero-description { font-size: 13px; }
  .strip-note { display: none; }
  .project-wide .project-art { height: 320px; }
  .project-art { height: 245px; }
  .recap-card { transform: scale(.9) rotate(5deg); top: 34px; }
  .recap-orbit { top: -10px; }
  .editor-window, .start-board { top: 52px; }
  .project-caption h3 { font-size: 23px; }
  .project-category { font-size: 7px; }
  .project-proof { font-size: 8px; }
  .work-grid { gap: 38px 20px; }
  .about-grid { gap: 65px; }
  .quest-grid { gap: 24px 19px; }
  .quest-art { height: 170px; }
  .quest-card h3 { font-size: 11px; }
  .homestead-drawing { width: 225px; }
  .testimonial-stamp { font-size: 21px; min-width: 115px; }
}
@media (max-width: 900px) {
  .container { width: calc(100% - 48px); }
  .header-inner { min-height: 84px; gap: 16px; }
  .identity { font-size: 17px; gap: 8px; }
  .monogram { width: 37px; height: 37px; font-size: 31px; }
  .hero { gap: 30px; padding-block: 52px 40px; }
  h1 { font-size: 59px; letter-spacing: -2.5px; }
  .hero-copy .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .hero-description { font-size: 12px; margin-top: 23px; }
  .hero-actions { gap: 8px; margin-top: 21px; }
  .hero-actions .button { min-height: 47px; padding: 10px 15px; font-size: 10px; gap: 20px; }
  .hero-actions .text-link { font-size: 10px; }
  .current-chapter { font-size: 8px; margin-top: 20px; gap: 6px; }
  .intro-story { padding-left: 0; }
  .section { padding-block: 80px; }
  .section-heading { gap: 35px; }
  h2 { font-size: 42px; }
  .section-intro { min-width: 235px; font-size: 11px; }
  .chapter-strip { gap: 16px; }
  .microsoft { font-size: 20px; }
  .sugar, .cure { font-size: 25px; }
  .samsung { font-size: 16px; }
  .project-art { height: 210px; }
  .editor-window { top: 50px; height: 143px; }
  .editor-page { height: 108px; margin-top: 7px; padding: 7px; }
  .editor-selection { height: 61px; }
  .start-board { height: 148px; padding: 17px 10px; }
  .start-search { font-size: 5px; }
  .start-tiles { gap: 4px; }
  .health-phone { scale: .8; transform-origin: top center; top: 38px; }
  .sugar-orbit { width: 165px; height: 165px; left: calc(50% - 82px); }
  .health-flower { right: 15px; font-size: 42px; }
  .project-caption h3 { font-size: 21px; }
  .project-caption > p:not(.project-category) { font-size: 10px; }
  .project-category { letter-spacing: .5px; font-size: 6px; }
  .project-proof { font-size: 7px; }
  .quest-art { height: 152px; }
  .homestead-drawing { width: 210px; }
  .narrative-papers { transform: scale(.8); }
  .loom-weave { scale: .8; }
  .about-grid { gap: 43px; }
  .about-copy h2 { font-size: 36px; }
  .about-copy > p { font-size: 11px; }
  .about-copy .about-opening { font-size: 14px; }
  .testimonial-empty { padding: 34px 28px; gap: 22px; }
  .testimonial-stamp { display: none; }
  .testimonial-empty h3 { font-size: 25px; }
}
@media (max-width: 760px) {
  :root { --site-header-height: 76px; }
  .container { width: calc(100% - 40px); }
  .header-inner { min-height: 76px; flex-wrap: wrap; }
  .identity { font-size: 19px; }
  .hero { grid-template-columns: 1fr; padding-block: 45px 33px; gap: 40px; }
  .hero-copy { padding-bottom: 0; }
  .hero-copy .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  h1 { font-size: clamp(64px, 12vw, 88px); line-height: 1.01; letter-spacing: -3px; margin-top: 24px; }
  .hero-description { font-size: 14px; max-width: 420px; margin-top: 24px; line-height: 1.85; }
  .hero-actions { gap: 22px; flex-wrap: wrap; margin-top: 23px; }
  .hero-actions .button { min-height: 49px; font-size: 11px; padding-inline: 19px; }
  .hero-actions .text-link { font-size: 11px; }
  .current-chapter { font-size: 9px; margin-top: 25px; }
  .scene-welcome { top: 6px; left: 21px; right: 21px; }
  .scene-welcome .handwritten { font-size: 26px; max-width: 350px; }
  .scene-welcome > p:last-child { font-size: 9px; line-height: 1.7; }
  .studio-note { width: min(305px, calc(100% - 28px)); padding: 7px 9px 3px; max-height: calc(100% - 174px); }
  .studio-note h2 { font-size: 29px; line-height: 1.4; margin-bottom: 10px; }
  .studio-note #note-body { font-size: 23px; line-height: 1.55; }
  .studio-note .text-link { font-size: 21px; margin-top: 8px; }
  .note-kicker { font-size: 19px; }
  .intro-thought { font-size: 30px; }
  .chapter-strip { padding-block: 22px; flex-wrap: wrap; justify-content: space-between; row-gap: 18px; }
  .strip-label { flex-basis: 100%; font-size: 7px; letter-spacing: 1.3px; }
  .strip-label br { display: none; }
  .microsoft { font-size: 18px; gap: 6px; }
  .microsoft-mark { width: 17px; height: 17px; }
  .sugar, .cure { font-size: 22px; letter-spacing: -1px; }
  .samsung { font-size: 13px; letter-spacing: .8px; }
  .section { padding-block: 64px; }
  .section-heading { display: block; margin-bottom: 24px; }
  .section-index { font-size: 8px; margin-bottom: 18px; }
  h2 { font-size: 43px; letter-spacing: -1.6px; }
  .section-intro { font-size: 12px; margin-top: 19px; min-width: 0; }
  .section-intro br { display: none; }
  .work-note { font-size: 9px; align-items: flex-start; line-height: 1.8; padding-bottom: 24px; gap: 7px; max-width: 490px; }
  .work-note .tiny-dot { margin-top: 7px; }
  .work-grid { grid-template-columns: 1fr 1fr; gap: 35px 18px; }
  .project-wide { grid-column: span 2; }
  .project-card:not(.project-wide) { grid-column: span 1; }
  .project-card.case-study-card { grid-column: span 2; }
  .project-card.case-study-card .project-art { height: 300px; }
  .project-card.case-study-card .gaming-cover-tablet { width: 70%; left: 15%; top: 50px; }
  .project-card.case-study-card .care-cover-sheet { max-width: 290px; left: 50%; transform: translateX(-50%) rotate(-6deg); }
  .project-card:last-child { grid-column: span 2; }
  .project-wide .project-art { height: 340px; }
  .recap-card { top: 42px; }
  .recap-orbit { top: 1px; }
  .project-art { height: 240px; }
  .project-caption { padding-top: 16px; }
  .project-category { font-size: 7px; letter-spacing: .8px; }
  .project-caption h3 { font-size: 25px; margin-top: 5px; }
  .project-caption > p:not(.project-category) { font-size: 11px; margin-top: 3px; }
  .project-proof { font-size: 9px; margin-top: 10px; }
  .project-card:not(.project-wide):not(:last-child) h3 { font-size: 22px; }
  .editor-window { top: 68px; height: 145px; }
  .editor-toolbar { right: -8px; }
  .start-board { top: 71px; height: 142px; width: 87%; left: 6.5%; }
  .project-card:last-child .project-art { height: 300px; }
  .health-phone { scale: 1; top: 45px; }
  .sugar-orbit { width: 235px; height: 235px; left: calc(50% - 117px); top: 28px; }
  .health-flower { right: 18%; bottom: 28px; font-size: 56px; }
  .quest-grid { grid-template-columns: 1fr 1fr; margin-top: 29px; gap: 27px 17px; }
  .quest-art { height: 172px; }
  .quest-homestead .quest-art { height: 205px; }
  .homestead-drawing { width: 250px; height: 160px; }
  .quest-card h3 { font-size: 12px; }
  .quest-card > p { font-size: 9px; }
  .narrative-papers { transform: scale(.9); }
  .loom-weave { scale: .9; }
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-aside { display: flex; flex-direction: column; align-items: flex-start; }
  .about-portrait { margin-top: 0; }
  .about-copy h2 { font-size: 43px; }
  .about-copy > p { font-size: 13px; }
  .about-copy .about-opening { font-size: 16px; }
  .about-tags span { font-size: 10px; }
  .resume-link { font-size: 12px; }
  .career-details summary { font-size: 12px; }
  .career-list li > span { font-size: 10px; }
  .career-list strong { font-size: 13px; }
  .career-list p { font-size: 11px; }
  .testimonial-empty { padding: 28px 23px; gap: 16px; margin-top: 30px; }
  .quote-mark { font-size: 80px; width: 32px; line-height: 1; }
  .testimonial-empty h3 { font-size: 25px; }
  .testimonial-empty h3 + p { font-size: 12px; }
  .testimonial-empty .text-link { font-size: 10px; }
  .empty-label { font-size: 7px; }
  .site-footer { padding-top: 52px; }
  .footer-invitation { gap: 16px; }
  .footer-invitation h2 { font-size: 43px; letter-spacing: -1.5px; line-height: 1.12; }
  .footer-invitation .eyebrow { font-size: 7px; max-width: 260px; }
  .footer-invitation > div > p:last-child { font-size: 25px; margin-top: 12px; }
  .footer-contact { width: 66px; height: 66px; margin-right: 0; flex-shrink: 0; }
  .footer-contact span { font-size: 35px; }
  .footer-email { display: block; margin-top: 23px; padding-bottom: 31px; }
  .footer-email > a { font-size: 13px; }
  .footer-email .handwritten { display: block; font-size: 17px; margin-top: 18px; transform: none; }
  .footer-bottom { flex-wrap: wrap; gap: 2px 16px; font-size: 8px; padding-block: 15px; }
  .footer-bottom > span:first-child { flex-basis: calc(45% - 8px); }
  .footer-bottom > span:nth-child(2) { flex-basis: calc(55% - 8px); text-align: right; }
  .footer-bottom .motion-toggle { padding-left: 0; }
  .footer-bottom > a { margin-left: auto; }
  .prototype-note { flex-wrap: wrap; gap: 0 20px; font-size: 7px; padding-block: 14px; }
  .prototype-note a { min-height: 44px; }
  .dialog-content { padding: 18px 24px 20px; }
  .project-dialog { max-height: 88svh; }
  .project-dialog h2 { font-size: 37px; }
  .dialog-status { margin-top: 20px; }
  .dialog-summary { font-size: 13px; }
  .dialog-metrics { gap: 12px; }
  .dialog-metrics strong { font-size: 30px; }
  .dialog-metrics span { font-size: 8px; }
  .dialog-placeholder { padding: 18px 17px; gap: 10px; }
  .dialog-placeholder p { font-size: 10px; }
  .voice-main { padding-block: 47px; }
  .voice-main h1 { font-size: 55px; }
  .voice-deck { font-size: 15px; }
  .voice-grid { grid-template-columns: 1fr; }
  .voice-section h2 { font-size: 32px; }
  .voice-section > p { font-size: 14px; }
  .copy-block { padding: 22px 23px; font-size: 14px; }
}
@media (max-width: 480px) {
  .scene-welcome .handwritten { font-size: 25px; }
}
@media (max-width: 390px) {
  .container { width: calc(100% - 32px); }
  .identity { font-size: 17px; }
  .hero-actions { gap: 14px; }
  .hero-actions .button { font-size: 10px; padding-inline: 14px; gap: 17px; }
  .hero-actions .text-link { font-size: 10px; }
  .microsoft { font-size: 16px; }
  .sugar, .cure { font-size: 20px; }
  .samsung { font-size: 11px; }
  .chapter-strip { gap: 10px; }
  h2 { font-size: 39px; }
  .project-wide .project-art { height: 307px; }
  .recap-card { top: 29px; }
  .project-art { height: 202px; }
  .editor-window { top: 44px; }
  .start-board { top: 49px; height: 135px; padding-top: 14px; }
  .project-card:not(.project-wide):not(:last-child) h3 { font-size: 20px; }
  .project-card:not(.project-wide):not(:last-child) .project-caption > p:not(.project-category) { font-size: 10px; }
  .quest-art { height: 157px; }
  .homestead-drawing { width: 218px; }
  .about-copy h2 { font-size: 39px; }
  .footer-invitation h2 { font-size: 38px; }
  .footer-contact { width: 57px; height: 57px; }
  .dialog-metrics strong { font-size: 26px; }
  .dialog-metrics { gap: 7px; }
}
@media (max-height: 560px) {
  :root { --site-header-height: 60px; }
  .header-inner { min-height: 60px; }
  .scene-welcome { top: 2px; }
  .scene-welcome .handwritten { font-size: 23px; }
  .scene-welcome > p:last-child { display: none; }
  .hotspot { width: 50px; height: 50px; }
  .studio-note { width: min(370px, calc(100% - 28px)); max-height: calc(100% - 130px); padding-top: 2px; }
  .note-heading { margin-bottom: 2px; }
  .note-kicker { font-size: 17px; padding-top: 7px; }
  .studio-note h2 { font-size: 23px; margin-bottom: 5px; line-height: 1.3; }
  .studio-note #note-body { font-size: 18px; line-height: 1.4; }
  .studio-note .text-link { font-size: 19px; margin-top: 3px; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .note-heading { margin-bottom: 2px; }
  .studio-note h2 { font-size: 25px; line-height: 1.35; margin-bottom: 5px; }
  .studio-note #note-body { font-size: 20px; line-height: 1.45; }
  .note-kicker { font-size: 17px; }
  .studio-note .text-link { font-size: 19px; margin-top: 3px; }
}
@media (forced-colors: active) {
  .site-header::before { display: none; }
  .studio-note { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .scene-welcome, .site-header { background: Canvas; color: CanvasText; }
  .hotspot::before { background: ButtonText; opacity: 1; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
  .motion { animation-play-state: paused !important; }
}
html[data-motion="off"] { scroll-behavior: auto; }
@media print {
  :root { color-scheme: light; --paper: white; --ink: #111; --body: #333; --muted: #555; --accent: #3d5132; --rust: #754b35; --line: #ccc; }
  body::before, .site-header, .landing, .paint-cursor, .project-art, .quest-art, .prototype-note, .motion-toggle, .footer-contact, .project-dialog, .svg-library, .skip-link { display: none !important; }
  .side-section, .about-section, .testimonial-empty, .copy-block { background: white; }
  body { background: white; color: #111; font-size: 11pt; }
  .container { width: 100%; }
  .hero, .about-grid { display: block; }
  .hero, .section { padding-block: 24px; }
  h1 { font-size: 44pt; }
  h2 { font-size: 26pt; }
  .work-grid, .quest-grid { grid-template-columns: 1fr 1fr; }
  .project-card, .project-wide, .quest-homestead { grid-column: span 1; break-inside: avoid; }
  .project-open::after { display: none; }
  .project-caption { padding-top: 4px; }
  .section-heading { margin-bottom: 12px; }
  .site-footer { background: white; color: #111; padding: 20px 0; }
  .footer-invitation > div > p:last-child, .footer-email .handwritten, .footer-bottom, .footer-invitation .eyebrow { color: #444; }
  .about-portrait { width: 180px; break-inside: avoid; }
  .voice-main { padding-block: 20px; }
  .voice-section { break-inside: avoid; margin-top: 24px; padding-top: 22px; }
  .voice-card { break-inside: avoid; }
}