@font-face {
  font-family: "Skalarupa Roman";
  src: url("assets/lmroman17-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Skalarupa Roman";
  src: url("assets/lmroman12-italic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f2ebe0;
  --ink: #2b211b;
  --muted: #635348;
  --clay: #9d4935;
  --cocoa: #2a201b;
  --light: #f8efe2;
  --gutter: clamp(1.5rem, 5vw, 5.75rem);
  --display: "Skalarupa Roman", Georgia, serif;
  --sans: Arial, Helvetica, sans-serif;
  --ease-out: cubic-bezier(.19,.7,.2,1);
  color: var(--ink);
  background: var(--cocoa);
  font: 100%/1.5 var(--sans);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scroll-padding-top: 5.3rem;
}

* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
main:focus, section[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.icon-library { position: absolute; pointer-events: none; }
.icon { display: inline-block; flex: none; width: 1.15rem; height: 1.15rem; }
.shell { width: min(calc(100% - var(--gutter) * 2), 90rem); margin-inline: auto; }
.section { padding-block: clamp(5rem, 9.4vw, 9rem); }
.eyebrow { font-size: .69rem; font-weight: 700; letter-spacing: .17em; line-height: 1.4; text-transform: uppercase; }

.skip-link {
  position: fixed;
  z-index: 6;
  top: .75rem;
  left: var(--gutter);
  padding: .8rem 1rem;
  transform: translateY(-200%);
  background: var(--light);
  color: var(--ink);
}

.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: 5;
  inset: 0 0 auto;
  color: var(--light);
  transition: background-color .25s ease;
}

.site-header.has-background, .site-header.menu-open { background: var(--cocoa); }
.scroll-progress { display: none; }

.header-inner {
  min-height: 5.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.95rem, 1.9vw, 2rem);
  border-bottom: 1px solid rgb(248 239 226 / .27);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.brand > svg { width: 2.35rem; height: 2.35rem; }
.brand-type { display: block; font: 400 1.95rem/.72 var(--display); letter-spacing: -.05em; }
.brand-type > span { color: #e4a18a; }
.brand-type small { display: block; margin: .47rem 0 0 .16rem; font: 700 .51rem/1 var(--sans); letter-spacing: .31em; }
.site-nav { display: flex; align-items: center; gap: clamp(1.05rem, 2.4vw, 3rem); }
.site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.site-nav a:hover, .site-nav a[aria-current="location"] { color: #f1b29c; }
.site-nav a:not(.nav-contact)::after { position: absolute; inset: auto 0 .3rem; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: left; }
.site-nav a:is(:hover, :focus-visible, [aria-current="location"]):not(.nav-contact)::after { transform: scaleX(1); }
.site-nav .nav-contact { gap: .65rem; border: 1px solid rgb(248 239 226 / .45); padding-inline: .95rem; transition: background-color .2s, color .2s; }
.site-nav .nav-contact:hover { color: var(--ink); background: var(--light); }
.menu-button { display: none; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: max(43rem, 100vh);
  min-height: max(43rem, 100svh);
  overflow: hidden;
  background: #1a1310;
  color: var(--light);
}

.hero-journey { background: #1a1310; }
.hero-intro { display: none; }
.hero-room { position: absolute; inset: 0; z-index: -1; display: none; overflow: hidden; background: #322117; }
.hero-room img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero-room::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgb(20 12 8 / .53), transparent 75%),
    linear-gradient(0deg, rgb(20 12 8 / .68), transparent 37%);
}

.hero::before, .hero::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
}
.hero::before {
  background:
    radial-gradient(ellipse at 74% 51%, rgb(171 91 49 / .35), transparent 42%),
    radial-gradient(ellipse at 87% 95%, #442719, transparent 57%);
}
.hero::after {
  background-image: linear-gradient(rgb(228 176 128 / .18) 1px, transparent 1px),
    linear-gradient(90deg, rgb(228 176 128 / .18) 1px, transparent 1px);
  background-size: 4.6rem 4.6rem;
  mask-image: radial-gradient(ellipse at 76% 50%, #000, transparent 58%);
  opacity: .35;
}

.hero-figure {
  position: absolute;
  z-index: -1;
  top: 49%;
  right: max(-1rem, calc((100% - 94rem) / 2));
  width: min(59vw, 57rem);
  aspect-ratio: 1.08;
  transform: translateY(-50%);
  pointer-events: none;
}
.portal-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.portal-plan { position: absolute; inset: 0; width: 100%; height: 100%; color: #d4a181; opacity: .34; }
.portal-assembly, .portal-layer { transform-box: view-box; transform-origin: center; }
.portal-layer { transform: translate(calc(var(--layer) * -13.2px), calc(var(--layer) * 7px)); }
.portal-light { opacity: 0; }
.figure-corner { position: absolute; width: 1.25rem; height: 1.25rem; color: #b68466; opacity: .7; }
.figure-corner-start { top: 13%; left: 15%; border-top: 1px solid; border-left: 1px solid; }
.figure-corner-end { right: 10%; bottom: 12%; border-right: 1px solid; border-bottom: 1px solid; }

.hero-inner {
  position: relative;
  display: grid;
  align-items: center;
  min-height: inherit;
  padding-block: 8.75rem 7rem;
}

.hero-copy { width: fit-content; }
.hero-line { display: block; }
.hero-word { display: inline-block; }

.hero-label { display: flex; align-items: center; gap: .65rem; letter-spacing: .2em; }
.signal { display: inline-block; flex: none; width: .43rem; height: .43rem; background: #df977f; transform: rotate(45deg); }

.hero h1 {
  margin: 1.5rem 0 1.35rem;
  font: 400 clamp(4.2rem, 9.4vw, 9.9rem)/.86 var(--display);
  letter-spacing: -.052em;
}

.hero h1 em { color: #edb990; font-weight: 400; }
.hero-description { max-width: 23rem; margin-bottom: 1.75rem; color: #f7eee3; font-size: clamp(.98rem, 1.26vw, 1.14rem); line-height: 1.65; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.35rem;
  min-height: 3.2rem;
  padding: .72rem 1rem .72rem 1.15rem;
  border: 1px solid transparent;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .2s, color .2s, border-color .2s;
}

.button-light { background: var(--light); color: var(--ink); }
.button-light:hover { color: var(--light); background: var(--cocoa); border-color: rgb(248 239 226 / .56); }

.hero-footer {
  position: absolute;
  inset: auto 0 1.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  min-height: 3.4rem;
  border-top: 1px solid rgb(248 239 226 / .34);
}

.hero-caption .hero-figure-id { margin-right: .65rem; color: #edb990; white-space: nowrap; }
.hero-room-label, .hero-depth-rail { display: none; }
.hero-controls { display: flex; flex: none; align-items: center; gap: 1rem; }
.motion-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(248 239 226 / .55);
  border-radius: 50%;
  background: rgb(27 17 12 / .2);
  cursor: pointer;
}
.motion-button:hover { background: var(--light); color: var(--ink); }
.scroll-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .55rem; }
.scroll-link .icon { transition: transform .2s ease; }
.hero-footer .scroll-link:hover .icon { transform: translateY(3px); }
.site-footer .scroll-link:hover .icon { transform: translateY(-3px); }

.studio { background: var(--paper); }
.studio-grid { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 2.65fr); gap: 1.5rem; }
.studio-grid > .section-index { align-self: start; }
.studio-palette {
  display: grid;
  grid-template-columns: minmax(12rem, .77fr) minmax(0, 1.23fr);
  align-items: center;
  gap: clamp(.9rem, 3.3vw, 3.6rem);
  margin-block: clamp(3rem, 6vw, 5.6rem) 0;
  padding: clamp(1.05rem, 4vw, 3.6rem);
  overflow: hidden;
  border: 1px solid #c8ac93;
  background: radial-gradient(ellipse at 73% 43%, #f3e1ca, #e7d4bd);
}
.palette-index { display: flex; align-items: center; gap: .6rem; color: var(--clay); }
.palette-index .signal { width: .34rem; height: .34rem; background: var(--clay); }
.palette-title { margin-block: 1.05rem .8rem; font: 400 clamp(2.65rem, 5.2vw, 5.3rem)/.94 var(--display); letter-spacing: -.047em; }
.palette-title em { color: var(--clay); font-weight: 400; }
.palette-copy .body-copy { max-width: 16.5rem; font-size: .95rem; }
.palette-art {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 11rem;
  aspect-ratio: 1.64;
  perspective: 52rem;
}
.palette-guides { position: absolute; inset: 0; width: 100%; height: 100%; color: #a27155; opacity: .37; }
.palette-tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(37%, 15rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgb(253 236 217 / .45);
  border-radius: .18rem;
  box-shadow: 0 .43rem 0 var(--tile-edge), 0 1.25rem 1.9rem rgb(80 51 37 / .24);
  transform: translate(-50%, -50%)
    translate(calc(var(--tile-x) + var(--tile-fan, 1) * var(--tile-swing)),
      calc(var(--tile-y) + var(--tile-fan, 1) * var(--tile-drop)))
    rotateX(var(--tile-tilt, 38deg))
    rotateZ(calc(var(--tile-roll) + var(--tile-fan, 1) * var(--tile-turn)));
}
.palette-stone {
  --tile-x: -15%; --tile-y: -13%; --tile-swing: -58%; --tile-drop: -11%; --tile-roll: -9deg; --tile-turn: -9deg;
  --tile-edge: #b79975;
  background: radial-gradient(ellipse at 24% 20%, #f4e4c9, transparent 72%),
    repeating-linear-gradient(154deg, rgb(141 104 73 / .23) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #e8d2af, #c4a47f);
}
.palette-wood {
  --tile-x: -1%; --tile-y: 8%; --tile-swing: 0%; --tile-drop: 3%; --tile-roll: 0deg; --tile-turn: 6deg;
  --tile-edge: #633c29;
  background: repeating-linear-gradient(100deg, rgb(95 48 26 / .34) 0 1px, transparent 1px 5px,
      rgb(235 171 111 / .24) 5px 7px, transparent 7px 11px),
    linear-gradient(132deg, #d29159, #98603b 61%, #704129);
}
.palette-glass {
  --tile-x: 14%; --tile-y: 18%; --tile-swing: 63%; --tile-drop: 4%; --tile-roll: 6deg; --tile-turn: 13deg;
  --tile-edge: #3a4e47;
  background: linear-gradient(140deg, #9aaba0, #667f75 46%, #3d564e);
}
.palette-glass::after {
  position: absolute;
  inset: -24%;
  content: "";
  background: linear-gradient(90deg, transparent 28%, rgb(248 255 234 / .54) 49%, transparent 65%);
  transform: translateX(var(--tile-light, 12%)) rotate(-18deg);
}
.section-index { display: flex; gap: .65rem; align-items: center; color: var(--clay); }
.section-index > span { display: grid; place-items: center; width: 1.72rem; height: 1.72rem; border: 1px solid currentColor; border-radius: 50%; letter-spacing: .03em; }

.display-title {
  font: 400 clamp(3.4rem, 7.3vw, 7.65rem)/.92 var(--display);
  letter-spacing: -.052em;
}

.display-title em { font-weight: 400; }
.reveal-line, .reveal-line > span { display: block; }
.studio .display-title em, .process .display-title em { color: var(--clay); }
.studio-notes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem clamp(1.6rem, 5vw, 5.4rem); margin-top: 1.9rem; }
.body-copy { max-width: 31rem; color: var(--muted); font-size: clamp(1rem, 1.28vw, 1.14rem); line-height: 1.7; }
.studio-notes .body-copy { max-width: 29rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.75rem;
  padding-block: .3rem;
  border-bottom: 1px solid currentColor;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.text-link:hover { color: var(--clay); }

.spatial-reel { background: #1c1511; color: var(--light); }
.reel-stage { position: relative; isolation: isolate; display: grid; min-height: min(43rem, 82svh); }
.reel-window, .reel-window::after, .reel-frame { position: absolute; inset: 0; }
.reel-window { z-index: -1; overflow: hidden; background: #38271e; }
.reel-window::after {
  z-index: 1;
  content: "";
  background:
    linear-gradient(92deg, rgb(23 14 9 / .70), rgb(23 14 9 / .18) 64%, transparent),
    linear-gradient(0deg, rgb(23 14 9 / .82), transparent 27%);
}
.reel-frame:not(.is-current) { display: none; }
.reel-frame img { width: 100%; height: 100%; object-fit: cover; }
.reel-frame:last-child img { object-position: center 52%; }
.reel-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(6rem, 14svh, 10rem) 1.6rem;
}
.reel-kicker { display: flex; align-items: center; gap: .7rem; }
.reel-counter { color: #fac5a4; }
.reel-content .display-title { margin-top: 1.4rem; font-size: clamp(3.45rem, 8.65vw, 9.3rem); }
.reel-content .display-title em { color: #f2c4a5; }
.reel-headlines { display: grid; }
.reel-headline { grid-area: 1 / 1; visibility: hidden; }
.reel-headline.is-current { visibility: visible; }
.reel-headline > * { display: block; }
.reel-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(.6rem, 2vw, 1.8rem);
  align-items: center;
  padding-top: 1.1rem;
  border-top: 1px solid rgb(248 239 226 / .46);
}
.reel-chapters { display: flex; flex-wrap: wrap; gap: .35rem; }
.reel-chapters button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .25rem;
  border: 1px solid rgb(248 239 226 / .45);
  background: rgb(32 21 15 / .28);
  color: var(--light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  cursor: pointer;
}
.reel-chapters button:is(:hover, :focus-visible) { border-color: var(--light); }
.reel-chapters button[aria-current] { background: var(--light); color: var(--ink); }
.reel-credit { grid-column: -2 / -1; text-align: right; }
.reel-meter { display: none; }

.work { position: relative; background: var(--cocoa); color: var(--light); }
.legacy-project-anchor { position: absolute; inset-block-start: 0; }
.work .section-index { color: #e9a58e; }
.work-heading, .insight-heading { display: flex; flex-wrap: wrap; gap: 1.35rem 3rem; justify-content: space-between; align-items: end; margin-block: 1.35rem 2.55rem; }
.work-heading .display-title em { color: #e4b29b; }
.work .body-copy { max-width: 20rem; color: #dacbbf; }

.project-empty {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.4rem, 4vw, 4rem);
  min-height: 15rem;
  padding: clamp(1.5rem, 4.7vw, 4rem);
  border: 1px solid rgb(248 239 226 / .22);
  background: linear-gradient(110deg, #30231e, #3c2c24);
}
.project-empty .project-category { display: flex; align-items: center; gap: .65rem; }
.project-empty-title { margin-block: .9rem .75rem; font: 400 clamp(2.2rem, 4.5vw, 4.6rem)/.98 var(--display); letter-spacing: -.04em; }
.project-empty .text-link { color: #f4c3ab; }
.project-empty .text-link:hover { color: var(--light); }
.archive-stack {
  --sheet-open: 1;
  position: relative;
  isolation: isolate;
  justify-self: end;
  width: min(100%, 30rem);
  aspect-ratio: 1.72;
}
.archive-sheet {
  position: absolute;
  inset: 12% 11% 15%;
  border: 1px solid rgb(229 183 157 / .48);
  box-shadow: 0 .75rem 2rem rgb(22 13 9 / .25);
  transform: translate(calc(var(--sheet-x) * var(--sheet-open)), calc(var(--sheet-y) * var(--sheet-open)))
    rotate(calc(var(--sheet-roll) * var(--sheet-open)));
}
.archive-sheet-back {
  --sheet-x: 10%;
  --sheet-y: -10%;
  --sheet-roll: 10deg;
  background: linear-gradient(135deg, #614433, #372820);
}
.archive-sheet-middle {
  --sheet-x: -9%;
  --sheet-y: 9%;
  --sheet-roll: -9deg;
  background: repeating-linear-gradient(0deg, #513c31 0 1px, #423127 1px 1.25rem);
}
.archive-sheet-front {
  --sheet-x: 0%;
  --sheet-y: 0%;
  --sheet-roll: -2deg;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 4% 5% 6%;
  background: linear-gradient(120deg, #473127, #30231e 75%);
  color: #edbda1;
}
.archive-plan { display: block; width: 100%; max-height: 100%; }
.archive-sheet-label { position: absolute; right: 5%; bottom: 6%; font-size: clamp(.45rem, 1vw, .59rem); }

.project-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin-bottom: 1.35rem; }
.project-filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.project-filters button { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid rgb(248 239 226 / .3); border-radius: 10rem; background: transparent; cursor: pointer; }
.project-filters button:hover { border-color: var(--light); }
.project-filters button[aria-pressed="true"] { background: var(--light); color: var(--ink); }
.project-count { margin-inline-start: auto; color: #dacbbf; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.project-trigger { display: block; width: 100%; padding: 0; border: 0; border-bottom: 1px solid rgb(248 239 226 / .27); background: transparent; text-align: left; cursor: pointer; }
.project-image { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 4.65; background: #493328; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-out); }
.project-trigger:hover img, .project-trigger:focus-visible img { transform: scale(1.055); }
.project-meta { display: flex; min-height: 6.1rem; align-items: center; justify-content: space-between; gap: .7rem; padding-block: 1rem; }
.project-category { display: block; margin-bottom: .35rem; color: #e8a893; }
.project-name { display: block; font: 400 clamp(1.55rem, 2.7vw, 2.5rem)/1 var(--display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.project-location { display: block; margin-top: .35rem; color: #dacbbf; font-size: .85rem; }
.project-location:empty, .project-dialog-location:empty, .project-dialog .dialog-description:empty { display: none; }
.project-arrow { display: grid; place-items: center; flex: none; width: 2.55rem; height: 2.55rem; border: 1px solid rgb(248 239 226 / .45); border-radius: 50%; transition: background-color .2s, color .2s; }
.project-trigger:hover .project-arrow, .project-trigger:focus-visible .project-arrow { background: var(--light); color: var(--ink); }

.process { background: #e9dece; }
.process-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-areas: "intro board" "steps board";
  gap: clamp(1.65rem, 3vw, 3.2rem) clamp(2rem, 5vw, 5.2rem);
  align-items: start;
}
.process-intro { grid-area: intro; }
.process .display-title { margin-top: 1.6rem; font-size: clamp(3.2rem, 6.2vw, 6.65rem); }
.process-hint { margin-top: 1.05rem; font-size: .92rem; }
.process-light-link { margin-top: 1.05rem; }
.process-steps { grid-area: steps; border-top: 1px solid #ae9d8f; }
.process-steps details { border-bottom: 1px solid #ae9d8f; }
.process-steps summary { display: grid; grid-template-columns: 2.35rem 1fr 1.3rem; gap: .7rem; align-items: center; padding-block: 1.15rem; min-height: 4.2rem; cursor: pointer; font: 400 clamp(1.45rem, 2.35vw, 2rem)/1.1 var(--display); list-style: none; }
.process-steps summary::-webkit-details-marker { display: none; }
.step-number { color: var(--clay); font: 700 .72rem/1.2 var(--sans); letter-spacing: .07em; }
.step-sign { position: relative; width: 1.1rem; height: 1.1rem; color: var(--clay); }
.step-sign::before, .step-sign::after { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; content: ""; }
.step-sign::after { transform: rotate(90deg); }
details[open] .step-sign::after { display: none; }
.process-steps details p { padding: 0 1.4rem 1.35rem 3.05rem; color: var(--muted); line-height: 1.62; }

.process-board {
  grid-area: board;
  align-self: center;
  position: relative;
  isolation: isolate;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #5c4436;
  color: var(--light);
  background: radial-gradient(ellipse at 56% 39%, #523b2e, #2a201b 75%);
}
.process-board::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(rgb(236 190 157 / .1) 1px, transparent 1px),
    linear-gradient(90deg, rgb(236 190 157 / .1) 1px, transparent 1px);
  background-size: 1.9rem 1.9rem;
  mask-image: radial-gradient(ellipse, #000, transparent 82%);
}
.process-board-heading, .process-board-caption { margin-inline: clamp(.85rem, 2.4vw, 1.65rem); }
.process-board-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding-block: clamp(.85rem, 2.1vw, 1.3rem);
  border-bottom: 1px solid rgb(248 239 226 / .22);
  color: #eac0a6;
}
.process-board-heading > :first-child { display: inline-flex; align-items: center; gap: .55rem; }
.process-board-heading .signal { width: .32rem; height: .32rem; }
.process-model { display: block; width: 100%; height: auto; }
.process-board-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) clamp(1.6rem, 7vw, 6rem);
  align-items: center;
  gap: .6rem;
  padding-block: .95rem;
  border-top: 1px solid rgb(248 239 226 / .22);
}
.process-board-index { color: #eac0a6; white-space: nowrap; }
.process-board-meter { height: 1px; background: rgb(248 239 226 / .26); }
.process-board-meter > span { display: block; height: 100%; background: #efb796; transform: scaleX(var(--process-progress, 1)); transform-origin: left; }
.model-guides { opacity: calc(.43 - .23 * var(--model-walls, 1)); }
.model-floor {
  opacity: calc(.25 * var(--model-plan, 1) + .75 * var(--model-walls, 1));
  transform: translateY(calc(16px * (1 - var(--model-plan, 1))));
}
.model-trace {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 * (1 - var(--model-plan, 1)));
  opacity: calc(.85 - .58 * var(--model-details, 1));
}
.model-walls {
  opacity: var(--model-walls, 1);
  transform: translateY(calc(24px * (1 - var(--model-walls, 1)))) scaleY(calc(.64 + .36 * var(--model-walls, 1)));
  transform-box: fill-box;
  transform-origin: center bottom;
}
.model-finish, .model-sun, .model-furniture { opacity: var(--model-details, 1); }
.model-furniture { transform: translateY(calc(29px * (1 - var(--model-details, 1)))); }
.model-sun { transform: translateX(calc(-17px * (1 - var(--model-details, 1)))); }

.light-study { background: #3a2a23; color: var(--light); }
.light-study .section-index { color: #efb69c; }
.light-study-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.15rem 3rem;
  margin-block: 1.25rem clamp(1.8rem, 4vw, 3.5rem);
}
.light-study-heading .display-title { font-size: clamp(2.95rem, 7.3vw, 7.45rem); }
.light-study-heading em { color: #edbfa5; }
.light-study-heading .body-copy { max-width: 24rem; color: #e5d4c5; }
.light-study-board {
  --light-progress: .5;
  --light-warmth: 1;
  --light-night: 0;
  max-width: calc(120svh + 2.7rem);
  margin: 0 auto;
  padding: clamp(.55rem, 1.7vw, 1.35rem);
  border: 1px solid rgb(248 239 226 / .22);
  background: #281e1a;
}
.light-board-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  min-height: 2.6rem;
  padding: .35rem .25rem .75rem;
  color: #e9bfa8;
}
.light-board-caption > :first-child { display: flex; align-items: center; gap: .55rem; }
.light-board-caption .signal { width: .32rem; height: .32rem; }
.light-clock { color: var(--light); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.light-clock > :first-child { margin-inline-end: .3rem; color: #e9bfa8; }
.light-artwork { display: block; width: 100%; height: auto; overflow: hidden; }
.light-evening-sky { opacity: var(--light-warmth); }
.light-sun {
  --light-sun-travel: min(1, calc(var(--light-progress) * 1.52));
  opacity: calc(1 - var(--light-night));
  transform: translate(calc(var(--light-sun-travel) * 252px), calc(var(--light-sun-travel) * 52px));
}
.light-beam {
  opacity: calc((1 - var(--light-night)) * (.57 + var(--light-warmth) * .43));
  transform: translateX(calc((var(--light-progress) - .5) * 204px)) skewX(calc((var(--light-progress) - .5) * -32deg));
  transform-origin: 280px 189px;
}
.light-night-sky { opacity: calc(var(--light-night) * .95); }
.light-stars, .light-lamp { opacity: var(--light-night); }
.light-night-layer { opacity: calc(var(--light-night) * .73); }
.light-board-meter { height: 2px; background: rgb(248 239 226 / .19); }
.light-board-meter > span {
  display: block;
  height: 100%;
  background: #e5a588;
  transform: scaleX(var(--light-progress));
  transform-origin: left;
}
.light-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: .55rem; }
.light-controls button {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .2rem .65rem;
  min-height: 2.85rem;
  padding: .65rem .35rem;
  border: 1px solid rgb(248 239 226 / .18);
  background: transparent;
  color: var(--light);
  font-size: .79rem;
  cursor: pointer;
}
.light-controls button > :first-child { font-variant-numeric: tabular-nums; font-size: .65rem; letter-spacing: .09em; opacity: .8; }
.light-controls button:is(:hover, :focus-visible) { border-color: #e9bfa8; }
.light-controls button[aria-pressed="true"] { background: #efc5ab; color: #33231c; }
.light-moments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.3rem, 3.2vw, 3rem);
  margin: clamp(1.8rem, 4.25vw, 3.65rem) 0 0;
  padding: 0;
  list-style: none;
}
.light-moments li { padding-top: 1.15rem; border-top: 1px solid rgb(248 239 226 / .28); }
.light-moments .eyebrow { color: #efb69c; }
.light-moments h3 { margin: .55rem 0 .6rem; font: 400 clamp(1.55rem, 2.5vw, 2.35rem)/1.04 var(--display); }
.light-moments li > p:last-child { color: #e5d4c5; font-size: .93rem; line-height: 1.62; }

.insights { padding-block-end: 0; background: #f7f0e6; }
.insight-heading .body-copy { max-width: 22rem; }
.insight-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.insight-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.insight-image { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #cbb8a4; }
.insight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transition: transform .65s cubic-bezier(.2,.6,.3,1);
}
.insight-trigger:hover img, .insight-trigger:focus-visible img { transform: scale(1.05); }
.insight-card-copy { display: block; padding-block: 1.3rem; border-bottom: 1px solid #b7a799; }
.insight-list article { border-top: 1px solid #b7a799; }
.insight-list article:last-child { border-bottom: 1px solid #b7a799; }
.insight-list .insight-trigger { padding-block: 1.5rem; }
.insight-peek { display: none; }
.insight-ribbon {
  overflow: hidden;
  margin-block-start: clamp(3.4rem, 8vw, 7.1rem);
  border-block: 1px solid rgb(153 82 57 / .23);
  color: #976550;
  background: #f0e5d7;
}
.insight-ribbon-track {
  display: flex;
  gap: .34em;
  width: max-content;
  padding: .16em var(--gutter) .23em;
  font: 400 clamp(3.6rem, 9.7vw, 9.6rem)/.91 var(--display);
  letter-spacing: -.047em;
  white-space: nowrap;
}
.insight-ribbon em { color: transparent; -webkit-text-stroke: 1px #a87963; }
.insight-category { display: block; color: var(--clay); }
.insight-name {
  display: block;
  margin-block: .55rem .45rem;
  font: 400 clamp(1.9rem, 3.25vw, 3.4rem)/1.04 var(--display);
  letter-spacing: -.036em;
}
.insight-excerpt { display: block; max-width: 28rem; color: var(--muted); }
.insight-read { display: inline-flex; align-items: center; gap: .45rem; margin-top: .95rem; }
.insight-read .icon { transition: transform .25s ease; }
.insight-trigger:hover .insight-read, .insight-trigger:focus-visible .insight-read { color: var(--clay); }
.insight-trigger:hover .insight-read .icon { transform: translate(2px, -2px); }

@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .insight-list .insight-trigger { position: relative; padding-inline-end: clamp(6.25rem, 10.2vw, 9.1rem); }
  .insight-peek {
    position: absolute;
    inset: 50% 0 auto auto;
    display: block;
    overflow: hidden;
    width: clamp(5.5rem, 8.9vw, 8rem);
    aspect-ratio: 1.1;
    background: #cbb8a4;
    clip-path: inset(100% 0 0);
    opacity: 0;
    transform: translateY(-44%);
    pointer-events: none;
  }
  .insight-peek img { width: 100%; height: 100%; object-fit: cover; }
  .insight-trigger:is(:hover, :focus-visible) .insight-peek { opacity: 1; clip-path: inset(0); transform: translateY(-50%); }
}

.consult { background: #ecdfd0; }
.consult-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 6.4vw, 6rem); }
.consult-intro .display-title { margin-block: .9rem; font-size: clamp(3.3rem, 6.5vw, 6.7rem); }
.consult-intro .body-copy { max-width: 18rem; }
.consult-intro .text-link { margin-top: 1rem; }
.consult-questions { border-bottom: 1px solid #b8a28d; }
.consult-item { position: relative; border-top: 1px solid #b8a28d; }
.consult-item::before {
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  content: "";
  pointer-events: none;
}
.consult-item:is([open], :hover, :focus-within)::before { transform: scaleX(1); }
.consult-item summary {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: .8rem;
  min-height: 4.4rem;
  padding-block: 1rem;
  font: 400 clamp(1.35rem, 2.25vw, 2rem)/1.09 var(--display);
  list-style: none;
  cursor: pointer;
}
.consult-item summary::-webkit-details-marker { display: none; }
.consult-item[open] summary { color: #703d2e; }
.consult-item[open] .step-sign::after { display: block; transform: rotate(0deg); }
.consult-item > p { margin: 0 1.8rem 1.25rem 2.6rem; color: var(--muted); line-height: 1.62; }

.contact { position: relative; overflow: hidden; background: #853e30; color: var(--light); }
.contact-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 2rem; }
.contact .section-index { color: #f5d8c6; }
.contact .display-title { margin-block: 1.4rem 1.35rem; font-size: clamp(3.7rem, 8vw, 8.25rem); }
.contact .display-title em { color: #f3c8b2; }
.contact .body-copy { max-width: 21rem; margin-bottom: 1.6rem; color: var(--light); }
.contact-handle { margin-top: .8rem; color: #f5d8c6; font-size: .83rem; }
.contact-guide { margin-top: .9rem; color: #f5d8c6; }
.contact-guide:hover { color: var(--light); }
.contact-mark { width: min(100%, 23rem); margin-inline: auto; color: #f4c7ad; opacity: .62; }

.site-footer { padding-block: 1.35rem; background: var(--cocoa); color: var(--light); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; }
.footer-inner p { color: #dacbbf; font-size: .79rem; }
.footer-inner p span { margin-inline: .3rem; }
.footer-inner .brand > svg { width: 1.95rem; height: 1.95rem; }
.footer-inner .brand-type { font-size: 1.6rem; }
.footer-inner .brand-type small { font-size: .45rem; }

.site-dialog {
  position: fixed;
  width: min(65rem, calc(100% - 3rem));
  max-width: none;
  max-height: 90svh;
  padding: 0;
  border: 0;
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
}

.site-dialog::backdrop { background: rgb(23 15 10 / .78); }
body:has(.site-dialog[open]) { overflow: hidden; }
.dialog-content { align-self: center; padding: clamp(2.4rem, 4vw, 4rem); }
.dialog-content .display-title { margin-block: .65rem 1.1rem; font-size: clamp(2.7rem, 5vw, 4.6rem); overflow-wrap: anywhere; }
.dialog-category { color: var(--clay); }
.dialog-close { position: sticky; z-index: 1; top: .85rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: .85rem .85rem -3.6rem auto; border: 1px solid #b7a799; border-radius: 50%; background: var(--paper); cursor: pointer; }
.dialog-close:hover { background: var(--cocoa); color: var(--light); }

.project-dialog-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.project-dialog-grid:has(.project-gallery[hidden]) { grid-template-columns: 1fr; }
.project-gallery { display: grid; grid-template-rows: 1fr auto; margin: 0; background: #30231e; color: var(--light); }
.project-photo-frame { display: grid; place-items: center; min-height: clamp(16rem, 55svh, 35rem); overflow: hidden; }
.project-photo-frame img { width: 100%; height: clamp(16rem, 55svh, 35rem); object-fit: contain; }
.project-gallery-caption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem 1rem; border-top: 1px solid rgb(248 239 226 / .22); }
.project-photo-label { font-size: .8rem; }
.project-photo-buttons { display: flex; gap: .35rem; }
.photo-button { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgb(248 239 226 / .35); border-radius: 50%; background: transparent; cursor: pointer; }
.photo-button:hover { background: var(--light); color: var(--ink); }
.photo-button:first-child .icon { rotate: 180deg; }
.project-dialog-location { margin-block: -.35rem .85rem; color: var(--clay); font-size: .9rem; }

.insight-dialog { width: min(46rem, calc(100% - 3rem)); }
.insight-article { padding: clamp(3.15rem, 5.4vw, 4.7rem) clamp(1.5rem, 5.2vw, 4.4rem); }
.insight-article .display-title { margin-block: .75rem 1.25rem; font-size: clamp(2.5rem, 5.1vw, 4.5rem); line-height: .95; }
.article-body { padding-top: 1.25rem; border-top: 1px solid #b7a799; }
.article-body p { color: var(--muted); line-height: 1.68; }
.article-body h3 { margin-block: 1.25rem .35rem; font: 400 1.58rem/1.16 var(--display); }

@media (max-width: 920px) {
  .studio-grid { grid-template-columns: 1fr 3.3fr; }
  .process-grid { gap: 2.6rem; }
}

@media (max-width: 860px) {
  :root { scroll-padding-top: 4.4rem; }
  :root:not([data-enhanced]) .site-header { position: relative; background: var(--cocoa); }
  .header-inner { min-height: 4.4rem; flex-wrap: wrap; gap: 0; }
  .brand > svg { width: 2rem; height: 2rem; }
  .brand-type { font-size: 1.75rem; }
  .site-nav { width: 100%; gap: 1rem; flex-wrap: wrap; }
  [data-enhanced] .menu-button { display: inline-flex; align-items: center; gap: .65rem; padding: .6rem 0 .6rem .65rem; min-height: 2.75rem; border: 0; background: transparent; font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; }
  .menu-icon { position: relative; width: 1.2rem; height: .65rem; border-block: 1px solid currentColor; }
  .menu-open .menu-icon { border: 0; }
  .menu-open .menu-icon::before, .menu-open .menu-icon::after { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; content: ""; background: currentColor; transform: rotate(45deg); }
  .menu-open .menu-icon::after { transform: rotate(-45deg); }
  [data-enhanced] .site-nav { display: none; }
  [data-enhanced] .menu-open .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: .55rem 0 1.2rem; }
  .menu-open .site-nav a { min-height: 3.1rem; }
  .menu-open .nav-contact { width: fit-content; margin-top: .35rem; }
}

@media (max-width: 480px) {
  .header-inner .brand { gap: .5rem; }
  .header-inner .brand > svg { width: 1.75rem; height: 1.75rem; }
  .header-inner .brand-type { font-size: 1.64rem; }
  [data-enhanced] .menu-button { gap: .42rem; padding-inline-start: .4rem; }
}

@media (max-width: 740px) {
  .hero { min-height: max(43rem, 100svh); }
  .hero::before { background: radial-gradient(ellipse at 53% 29%, #563020, transparent 56%); }
  .hero::after { mask-image: radial-gradient(ellipse at 53% 28%, #000, transparent 56%); background-size: 3.1rem 3.1rem; }
  .hero-figure { top: 4rem; left: 50%; right: auto; width: min(100%, 31rem); transform: translateX(-50%); }
  .hero-room img { object-position: 62% center; }
  .figure-corner-start { top: 10%; left: 9%; }
  .figure-corner-end { right: 8%; bottom: 8%; }
  .hero-inner { align-items: end; padding-block: clamp(17rem, 66vw, 27rem) 5.75rem; }
  .hero h1 { margin-block: .95rem .9rem; font-size: clamp(3.2rem, 11.8vw, 6.1rem); }
  .hero-description { max-width: 18rem; }
  .hero-footer { inset-block-end: .65rem; }
  .hero-footer .eyebrow { font-size: .6rem; }
  .hero-controls { gap: .55rem; }
  .reel-window::after { background: linear-gradient(165deg, rgb(23 14 9 / .76), transparent 61%), linear-gradient(0deg, rgb(23 14 9 / .84), transparent 32%); }
  .reel-frame:first-child img { object-position: 62% center; }
  .reel-credit { max-width: 14ch; }
  .studio-grid, .process-grid, .insight-grid, .consult-grid, .contact-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-areas: "intro" "board" "steps"; gap: 1.65rem; }
  .studio-grid { gap: 1.15rem; }
  .studio-palette { grid-template-columns: 1fr; }
  .palette-art { min-height: 9rem; }
  .studio-notes { margin-top: 1.35rem; }
  .work-heading, .insight-heading { margin-block: 1.1rem 1.8rem; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.45rem; }
  .project-meta { min-height: 5.1rem; }
  .project-arrow { width: 2.3rem; height: 2.3rem; }
  .project-dialog-grid { grid-template-columns: 1fr; }
  .project-photo-frame { min-height: clamp(12rem, 38svh, 25rem); }
  .project-photo-frame img { height: clamp(12rem, 38svh, 25rem); }
  .contact-mark { position: absolute; z-index: 0; width: 18rem; right: -9rem; top: -.9rem; opacity: .28; pointer-events: none; }
  .contact-copy { position: relative; z-index: 1; }
  .contact .display-title { font-size: clamp(3.55rem, 10vw, 6rem); }
  .footer-inner { justify-content: flex-start; }
  .footer-inner p { order: 1; width: 100%; }
  .footer-inner .scroll-link { margin-left: auto; }
}

@media (max-width: 560px) {
  .light-board-caption { font-size: .58rem; letter-spacing: .1em; }
  .light-moments { grid-template-columns: 1fr; }
  .project-empty, .project-grid { grid-template-columns: 1fr; }
  .archive-stack { justify-self: start; width: min(100%, 21rem); }
  .project-image { aspect-ratio: 1 / 1; }
  .project-name { font-size: 2rem; }
  .hero-footer .scroll-link { justify-content: center; width: 2.75rem; }
  .hero-scroll-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .reel-footer { grid-template-columns: 1fr auto; gap: .55rem .65rem; }
  .reel-chapters { grid-column: 1 / -1; }
  .process-board-heading, .process-board-caption { font-size: .61rem; letter-spacing: .12em; }
  .site-dialog { width: calc(100% - 1.5rem); }
  .dialog-content { padding: 1.65rem 1.45rem; }
  .dialog-content .display-title { font-size: clamp(2.5rem, 10vw, 3.9rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-progress {
    position: absolute;
    inset: auto 0 0;
    display: block;
    height: 2px;
    background: #df977f;
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left;
    pointer-events: none;
  }

  .button .icon, .text-link .icon, .project-arrow .icon { transition: transform .35s var(--ease-out); }
  .button:is(:hover, :focus-visible) .icon,
  .text-link:is(:hover, :focus-visible) .icon,
  .project-trigger:is(:hover, :focus-visible) .project-arrow .icon { transform: translate(3px, -3px); }

  .site-nav a:not(.nav-contact)::after { transition: transform .32s var(--ease-out); }
  [data-enhanced] .archive-stack { --sheet-open: var(--archive-spread, 1); }
  [data-enhanced] .archive-trace,
  [data-enhanced] .archive-detail { stroke-dasharray: 100; }
  [data-enhanced] .archive-trace { stroke-dashoffset: calc(100 * (1 - var(--archive-ink, 1))); }
  [data-enhanced] .archive-detail { stroke-dashoffset: calc(100 * (1 - var(--archive-detail, 1))); }
  [data-enhanced] .archive-sheet-front::after {
    position: absolute;
    inset: var(--archive-scan, 100%) 0 auto;
    height: .9rem;
    background: linear-gradient(rgb(255 204 168 / .85), transparent);
    content: "";
    opacity: var(--archive-glow, 0);
    pointer-events: none;
  }

  .light-controls button { transition: background-color .25s, color .25s, border-color .25s; }
  .light-study-board[data-light-manual] :is(.light-sun, .light-beam) {
    transition: transform .85s var(--ease-out), opacity .65s ease;
  }
  .light-study-board[data-light-manual] :is(.light-evening-sky, .light-night-sky, .light-stars, .light-night-layer, .light-lamp) {
    transition: opacity .85s ease;
  }
  .light-study-board[data-light-manual] .light-board-meter > span { transition: transform .85s var(--ease-out); }
  .light-moments li:nth-child(2) { --reveal-delay: .085s; }
  .light-moments li:nth-child(3) { --reveal-delay: .17s; }
  .consult-item::before { transition: transform .5s var(--ease-out); }
  .consult-item[open] > p { animation: content-arrive .38s var(--ease-out) both; }

  .reel-chapters button { transition: background-color .22s, color .22s, border-color .22s; }
  [data-enhanced] .insight-image img { translate: 0 var(--insight-drift, 0%); scale: 1.13; }
  [data-enhanced] .palette-tile { --tile-fan: var(--palette-open, 1); --tile-tilt: var(--palette-tilt, 38deg); }
  [data-enhanced] .palette-glass { --tile-light: var(--palette-light, 12%); }
  [data-enhanced] .insight-ribbon-track { transform: translate3d(var(--ribbon-shift, 0%), 0, 0); }
  [data-enhanced] .contact-mark { transform: rotate(var(--contact-angle, 0deg)) scale(var(--contact-scale, 1)); }
  .insight-peek { transition: opacity .34s ease, clip-path .55s var(--ease-out), transform .55s var(--ease-out); }

  .process-board[data-manual] :is(.model-floor, .model-walls, .model-furniture, .model-sun, .model-finish, .model-guides) {
    transition: opacity .52s var(--ease-out), transform .74s var(--ease-out);
  }
  .process-board[data-manual] :is(.model-furniture, .model-sun, .model-finish) { transition-delay: .1s; }
  .process-board[data-manual] .model-trace { transition: stroke-dashoffset .7s var(--ease-out), opacity .45s var(--ease-out); }
  .process-board[data-manual] .process-board-meter > span { transition: transform .6s var(--ease-out); }

  @media (min-height: 660px) {
    [data-enhanced] .hero-journey::after { display: block; block-size: 58svh; content: ""; }
    [data-enhanced] .hero { position: sticky; top: 0; }
    [data-enhanced] .hero-room { display: block; }
    [data-enhanced] .hero-depth-rail { display: block; }
  }

  .hero-room {
    --aperture: calc(1 - var(--room-reveal, 0));
    clip-path: inset(calc(37% * var(--aperture)) calc(24% * var(--aperture))
      calc(42% * var(--aperture)) calc(67% * var(--aperture)) round calc(22px * var(--aperture)));
    opacity: min(1, calc(var(--room-reveal, 0) * 2.8));
  }
  .hero-room img { transform: scale(calc(1.19 - .15 * var(--room-reveal, 0))); }
  .hero-copy { opacity: var(--hero-ink, 1); transform: translate3d(0, var(--hero-copy-shift, 0px), 0); }
  .hero-copy:focus-within { opacity: 1; transform: none; }
  .hero.is-passing .hero-copy:not(:focus-within) { pointer-events: none; }
  .hero-figure { opacity: var(--portal-visibility, 1); translate: var(--portal-glide, 0px) 0; }
  .hero.is-room .hero-form-label { display: none; }
  .hero.is-room .hero-room-label { display: inline; }
  .hero-depth-rail { position: absolute; inset: -1px 0 auto; height: 1px; pointer-events: none; }
  .hero-depth-rail > span { display: block; height: 100%; background: #fac5a4; transform: scaleX(var(--hero-depth, 0)); transform-origin: left; }
  .portal-art {
    scale: var(--portal-zoom, 1);
    rotate: var(--portal-roll, 0deg);
    transform: perspective(64rem) rotateX(var(--portal-pitch, 0deg)) rotateY(var(--portal-yaw, 0deg));
    transition: transform .45s var(--ease-out);
  }
  [data-enhanced] .portal-assembly { animation: portal-orbit 11s ease-in-out infinite paused; }
  [data-enhanced] .portal-layer { animation: portal-unfold 11s ease-in-out infinite paused; }
  [data-enhanced] .portal-light { animation: portal-sheen 11s ease-in-out infinite paused; }
  [data-enhanced] .hero.is-playing :is(.portal-assembly, .portal-layer, .portal-light) { animation-play-state: running; }

  @keyframes portal-orbit {
    0%, 100% { transform: translate(5px, 0) rotate(-3deg); }
    48% { transform: translate(-8px, -16px) rotate(7deg) scale(1.05); }
    76% { transform: translate(8px, 6px) rotate(1deg); }
  }
  @keyframes portal-unfold {
    0%, 100% { transform: translate(calc(var(--layer) * -13.2px), calc(var(--layer) * 7px)) rotate(calc(var(--layer) * -1deg)); }
    48% { transform: translate(calc(var(--layer) * -21px), calc(var(--layer) * 13px)) rotate(calc(var(--layer) * -6deg)) scale(calc(1 - var(--layer) * .017)); }
    76% { transform: translate(calc(var(--layer) * -8px), calc(var(--layer) * 5px)) rotate(calc(var(--layer) * 3.5deg)); }
  }
  @keyframes portal-sheen {
    0%, 14% { transform: translateX(0) skewX(-16deg); opacity: 0; }
    37% { opacity: .48; }
    67%, 100% { transform: translateX(720px) skewX(-16deg); opacity: 0; }
  }

  [data-enhanced] .spatial-reel { block-size: 255svh; }
  [data-enhanced] .reel-stage { position: sticky; top: 0; min-height: 100svh; }
  [data-enhanced] .reel-window { clip-path: inset(0 var(--reel-edge, 0%) round var(--reel-corner, 0px)); }
  [data-enhanced] .reel-frame { display: block; }
  [data-enhanced] .reel-frame + .reel-frame {
    clip-path: polygon(0 0, var(--reel-leading, 0%) 0, var(--reel-trailing, 0%) 100%, 0 100%);
  }
  [data-enhanced] .reel-frame:nth-child(odd):not(:first-child) {
    clip-path: polygon(calc(100% - var(--reel-trailing, 0%)) 0, 100% 0, 100% 100%, calc(100% - var(--reel-leading, 0%)) 100%);
  }
  [data-enhanced] .reel-frame + .reel-frame::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #f8d5b7, #ad6347 54%, #f0b185);
    clip-path: polygon(calc(var(--reel-leading, 0%) - .8%) 0, var(--reel-leading, 0%) 0,
      var(--reel-trailing, 0%) 100%, calc(var(--reel-trailing, 0%) - .8%) 100%);
    content: "";
    opacity: var(--reel-glint, 0);
    pointer-events: none;
  }
  [data-enhanced] .reel-frame:nth-child(odd):not(:first-child)::after {
    clip-path: polygon(calc(100% - var(--reel-trailing, 0%)) 0, calc(100.8% - var(--reel-trailing, 0%)) 0,
      calc(100.8% - var(--reel-leading, 0%)) 100%, calc(100% - var(--reel-leading, 0%)) 100%);
  }
  [data-enhanced] .reel-frame img { transform: translate3d(var(--reel-drift, 0%), 0, 0) scale(var(--reel-scale, 1)); }
  .reel-headline { overflow: clip; padding-block: .16em; margin-block: -.16em; }
  .spatial-reel[data-direction="previous"] { --reel-text-offset: -.85em; }
  [data-enhanced] .reel-headline.is-current > * { animation: reel-title-arrive .66s var(--ease-out) both; }
  [data-enhanced] .reel-headline.is-current > em { animation-delay: .08s; }
  @keyframes reel-title-arrive { from { opacity: .08; transform: translateY(var(--reel-text-offset, .85em)); } to { opacity: 1; transform: none; } }
  [data-enhanced] .reel-meter { display: block; width: clamp(1.7rem, 13vw, 11rem); height: 1px; background: rgb(248 239 226 / .43); }
  .reel-meter > span { display: block; height: 100%; background: #fac5a4; transform: scaleX(var(--reel-progress, 0)); transform-origin: left; }
  @media (max-width: 740px) {
    [data-enhanced] .spatial-reel { block-size: 225svh; }
    .hero-copy { transform: translate3d(0, max(var(--hero-copy-shift, 0px), -34px), 0); }
    .hero-copy:focus-within { transform: none; }
    .hero-figure { translate: max(var(--portal-glide, 0px), -22px) 0; }
    .hero-room {
      clip-path: inset(calc(24% * var(--aperture)) calc(41% * var(--aperture))
        calc(64% * var(--aperture)) calc(42% * var(--aperture)) round calc(18px * var(--aperture)));
    }
  }

  [data-intro] .hero-intro {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #efc5af;
    pointer-events: none;
  }

  [data-intro] .hero-intro::before,
  [data-intro] .hero-intro::after {
    position: absolute;
    inset: 0;
    content: "";
    animation: opening-panel 1.17s .43s cubic-bezier(.76,0,.24,1) both;
  }
  [data-intro] .hero-intro::before {
    --panel-exit: -59%;
    clip-path: polygon(0 0, 56% 0, 46% 100%, 0 100%);
    background: linear-gradient(120deg, #201512 15%, #362219 56%, #674230);
  }
  [data-intro] .hero-intro::after {
    --panel-exit: 59%;
    clip-path: polygon(55.8% 0, 100% 0, 100% 100%, 45.8% 100%);
    background: linear-gradient(112deg, #684333 30%, #38231b 55%, #221613 91%);
  }

  [data-intro] .hero:focus-within .hero-intro { display: none; }
  .intro-lockup { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.35rem; animation: intro-signature .91s var(--ease-out) both; }
  .intro-lockup .brand > svg { width: clamp(2.65rem, 6.4vw, 4.55rem); height: auto; stroke-dasharray: 100; animation: sketch-mark .66s .06s ease-out both; }
  .intro-lockup .brand-type { font-size: clamp(2.9rem, 7vw, 5.15rem); }
  .intro-lockup .brand-type small { margin-top: .9rem; font-size: .68rem; }
  .intro-rule { width: 4.5rem; height: 1px; background: #df977f; animation: intro-rule .56s .13s ease-out both; }

  @keyframes opening-panel { from { transform: none; } to { transform: translateX(var(--panel-exit)); } }
  @keyframes intro-signature {
    0% { opacity: 0; transform: translateY(12px) scale(.96); }
    37%, 57% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: scale(1.07); }
  }
  @keyframes intro-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes sketch-mark { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

  [data-intro] .hero-line { overflow: clip; padding-block: .14em; margin-block: -.14em; }
  [data-intro] .hero-word { animation: title-rise .88s calc(.53s + var(--beat) * .105s) var(--ease-out) both; }
  @keyframes title-rise { from { opacity: .05; transform: translateY(.86em); } to { opacity: 1; transform: none; } }
  [data-intro] .hero-label, [data-intro] .hero-description, [data-intro] .hero-copy .button {
    animation: content-arrive .65s var(--ease-out) both;
  }
  [data-intro] .hero-label { animation-delay: .67s; }
  [data-intro] .hero-description { animation-delay: .92s; }
  [data-intro] .hero-copy .button { animation-delay: 1.03s; }
  [data-intro] .hero-figure { animation: portal-arrive 1.05s .55s var(--ease-out) both; }
  [data-intro] .portal-plan .draw-line { animation: sketch-mark 1.02s .55s var(--ease-out) both; }
  @keyframes portal-arrive { from { opacity: 0; scale: .89; } to { opacity: var(--portal-visibility, 1); scale: 1; } }
  @keyframes content-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  [data-reveals] [data-reveal] {
    transition: opacity .65s ease, translate .85s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
  }
  [data-reveals] [data-reveal]:not(.is-revealed):not(:focus-within) { opacity: 0; translate: 0 1.8rem; }
  [data-reveals] [data-reveal]:focus-within { transition-delay: 0s; }
  .project-card:nth-child(3n + 2), .insight-list article:nth-child(2) { --reveal-delay: .1s; }
  .project-card:nth-child(3n) { --reveal-delay: .18s; }

  [data-reveals] .reveal-line { overflow: clip; padding-block: .16em; margin-block: -.16em; }
  .reveal-line + .reveal-line { --line-delay: .13s; }
  [data-reveals] .reveal-line > span {
    transition: transform .95s var(--ease-out) calc(var(--reveal-delay, 0s) + var(--line-delay, .04s));
  }
  [data-reveals] [data-reveal]:not(.is-revealed):not(:focus-within) .reveal-line > span { transform: translateY(108%); }

  [data-reveals] [data-image-reveal]::after {
    position: absolute;
    inset: 0;
    background: var(--image-curtain, #51372b);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .95s cubic-bezier(.6,.02,.18,1) var(--reveal-delay, 0s);
    pointer-events: none;
  }
  .insight-image { --image-curtain: #d6c3b0; }
  [data-reveals] [data-reveal]:not(.is-revealed):not(:focus-within) [data-image-reveal]::after { transform: scaleX(1); }

  .draw-line { stroke-dasharray: 100; transition: stroke-dashoffset 1.45s var(--ease-out) .1s; }
  [data-reveals] [data-reveal]:not(.is-revealed):not(:focus-within) .draw-line { stroke-dashoffset: 100; }

  .step-sign::after { transition: transform .3s var(--ease-out); }
  .process-steps details[open] p { animation: content-arrive .35s var(--ease-out) both; }
  .menu-open .site-nav a { animation: content-arrive .36s var(--ease-out) both; }
  .menu-open .site-nav a:nth-child(2) { animation-delay: .045s; }
  .menu-open .site-nav a:nth-child(3) { animation-delay: .09s; }
  .menu-open .site-nav a:nth-child(4) { animation-delay: .135s; }
  .menu-open .site-nav a:nth-child(5) { animation-delay: .18s; }

  .project-photo-frame .is-loaded { animation: photo-arrive .45s var(--ease-out) both; }
  @keyframes photo-arrive { from { opacity: .4; scale: 1.025; } to { opacity: 1; scale: 1; } }

  .site-dialog[open] { animation: dialog-arrive .37s var(--ease-out) both; }
  @keyframes dialog-arrive { from { opacity: .45; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}