/* ═══════════════════════════════════════════════════════════════════
   Level Up View — Level Up View
   type: Marcellus (inscriptional) · Cormorant Garamond (voice) · IBM Plex Mono (annotation)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --night:      #0A0C08;
  --night-warm: #12140C;
  --bone:       #EFEAE3;
  --bone-hi:    #F5F1EA;
  --ink:        #16140F;
  --ink-soft:   #46423A;
  --ink-faint:  #6E6A60;
  --line:       rgba(22, 20, 15, .16);
  --line-soft:  rgba(22, 20, 15, .09);
  --bone-line:  rgba(239, 234, 227, .18);
  --accent:     #55683F;
  --accent-hi:  #A9BC8F;

  --margin: clamp(20px, 5.4vw, 88px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.7, 0, .25, 1);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --disp:  "Marcellus", "Times New Roman", serif;
  --mono:  "IBM Plex Mono", "SF Mono", Menlo, monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* the page is pinned while the site drafts itself (JS only) */
html.js body:not(.built) { overflow: hidden; }

::selection { background: var(--accent); color: var(--bone-hi); }

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#nav[data-theme="dark"] :focus-visible,
.contact :focus-visible { outline-color: var(--accent-hi); }

.mono {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .16em;
}

/* ─────────────────────────── fixed layers ─────────────────────────── */

#scene {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
  opacity: 0;
}
#scene.lit { opacity: 1; transition: opacity 2.4s ease .25s; }

/* ── the designer's line work ── */
#draft {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  color: #9fbf9a;
  filter: drop-shadow(0 0 7px rgba(159, 191, 154, .3));
  pointer-events: none;
}
#draft .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js #draft.drawing .d {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(.5, 0, .2, 1) var(--d, 0s);
}
#draft .fade { opacity: 0; }
html.js #draft.drawing .fade {
  opacity: var(--o, 1);
  transition: opacity .9s ease var(--d, 0s);
}
#draft text {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .12em;
  fill: currentColor; stroke: none;
}
#draft.dissolve .d, #draft.dissolve .fade {
  opacity: 0 !important;
  transition: opacity 1.9s ease .2s;
}
#draft.dissolve.instant { display: none; }
html:not(.js) #draft { display: none; }

#halo {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 95% at 50% 42%, transparent 48%, rgba(5, 4, 3, .62) 100%);
  opacity: 1;
}

#flood {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  background: var(--bone);
  opacity: 0;
}

#grain {
  position: fixed; inset: -50%; z-index: 30;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .045;
  mix-blend-mode: overlay;
  animation: grain 1.1s steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2.2%, 1.4%); }
  50%  { transform: translate(1.6%, -2.1%); }
  75%  { transform: translate(-1.1%, -1.6%); }
  100% { transform: translate(0, 0); }
}

/* ─────────────────────────── preloader ─────────────────────────── */

#preloader {
  position: fixed; inset: 0; z-index: 50;
  background: transparent;   /* the blueprint drafts itself behind the counter */
  color: var(--bone);
  pointer-events: none;
  transition: opacity .9s ease;
}
#preloader.done { opacity: 0; }
#preloader.gone { display: none; }

.pl-name  { position: absolute; top: 28px; left: var(--margin); opacity: .7; }
.pl-task  { position: absolute; bottom: 30px; left: var(--margin); opacity: .55; }
.pl-count {
  position: absolute; bottom: 24px; right: var(--margin);
  font-size: 1.9rem; letter-spacing: .22em;
  margin-right: -.22em; /* optical: swallow the trailing track */
  font-variant-numeric: tabular-nums;
}
.pl-bar {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--bone-line);
}
#pl-fill {
  display: block; height: 100%; width: 100%;
  background: var(--bone);
  transform: scaleX(0); transform-origin: left center;
}

/* ─────────────────────────── nav ─────────────────────────── */

#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 26px var(--margin) 0;
  color: var(--bone);
  transition: color .6s ease;
  opacity: 0; transform: translateY(-12px);
  visibility: hidden;
  pointer-events: none;
}
body.built #nav {
  opacity: 1; transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: color .6s ease, opacity 1.2s var(--ease-out) .9s, transform 1.2s var(--ease-out) .9s, visibility 0s .9s;
}
#nav[data-theme="light"] { color: var(--ink); }

#nav .brand {
  font-family: var(--disp);
  font-size: 1.06rem; letter-spacing: .34em;
}
#nav .brand sup { font-size: .5em; letter-spacing: 0; opacity: .6; }

#nav .links { display: flex; gap: clamp(18px, 3vw, 44px); }
#nav .links a {
  position: relative;
  /* invisible hit area — the labels are tiny, the targets must not be */
  padding: 14px 8px 4px;
  margin: -14px -8px 0;
}
#nav .links a i {
  font-style: normal; opacity: .45; margin-right: .55em; font-size: .9em;
}
#nav .links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--ease-io);
}
#nav .links a:hover::after { transform: scaleX(1); transform-origin: left center; }

#nav .clock { opacity: .55; font-variant-numeric: tabular-nums; }

/* ─────────────────────────── hero ─────────────────────────── */

#hero {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  display: grid; place-items: center;
}

.hero-word {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(4.4rem, 16.5vw, 18rem);
  line-height: 1;
  letter-spacing: calc(.14em + var(--track, 0em));
  text-indent: calc(.14em + var(--track, 0em)); /* optically recentres tracked type */
  color: var(--bone);
  display: flex;
  margin-top: -4vh;
}
.hero-word .hl {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1.3s var(--ease-out) calc(var(--i) * 85ms + .25s);
}
.hero-word { clip-path: inset(-12% -6% 0 -6%); }
body.built .hero-word .hl { transform: translateY(0); }

.hero-sub {
  position: absolute; top: 62.5%; left: 50%;
  transform: translateX(-50%);
  color: var(--bone);
  opacity: 0;
  transition: opacity 1.6s ease 1.55s;
  white-space: nowrap;
}
body.built .hero-sub { opacity: .62; }

.hero-hint {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--bone);
  opacity: 0;
  transition: opacity 1.4s ease 2.2s;
}
body.built .hero-hint { opacity: .55; }
.hero-hint span:first-child { font-size: .58rem; }
.hint-line {
  width: 1px; height: 64px;
  background: linear-gradient(to bottom, var(--bone), transparent);
  overflow: hidden; position: relative;
}
.hint-line::after {
  content: ""; position: absolute; left: 0; top: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--night));
  animation: hintdrop 2.2s var(--ease-io) infinite;
}
@keyframes hintdrop {
  0% { top: -100%; } 60%, 100% { top: 110%; }
}

.hero-coord {
  position: absolute; bottom: 34px; left: var(--margin);
  color: var(--bone); opacity: 0;
  transition: opacity 1.4s ease 2s;
}
body.built .hero-coord { opacity: .65; }

/* once the walk begins, overlay fades answer the scroll instantly —
   the long delays exist only for the one-time intro reveal */
#hero.live .hero-sub, #hero.live .hero-hint, #hero.live .hero-coord {
  transition: opacity .35s ease 0s;
}

/* ─────────────────────────── content shell ─────────────────────────── */

#content { position: relative; z-index: 4; }
#intro-track { height: 280vh; pointer-events: none; }

.sect { position: relative; background: var(--bone); color: var(--ink); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(12px, 2vw, 28px);
  padding-inline: var(--margin);
}

/* ─────────────────────────── shared reveals ─────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s ease var(--d, 0ms), transform 1.1s var(--ease-out) var(--d, 0ms);
}
.in .reveal { opacity: 1; transform: none; }

.line { display: block; overflow: hidden; padding-block: .06em; }
.line-in {
  display: block;
  transform: translateY(115%);
  transition: transform 1.15s var(--ease-out) calc(var(--l, 0) * 110ms);
}
.line:nth-child(2) .line-in { --l: 1; }
.line:nth-child(3) .line-in { --l: 2; }
.in .line-in { transform: translateY(0); }

.statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.6vw, 5.4rem);
  line-height: 1.06;
  letter-spacing: -.01em;
}
.statement em {
  font-style: italic; font-weight: 300;
  color: var(--accent);
}
/* the crescendo: manifesto full-size · section heads a step down · contact the biggest gesture */
.statement.small { font-size: clamp(2.1rem, 4.5vw, 4.3rem); }
.statement.big   { font-size: clamp(2.9rem, 6.5vw, 6.3rem); line-height: 1.04; }

/* ─────────────────────────── manifesto ─────────────────────────── */

.manifesto { padding-block: 26vh 22vh; }

.manifesto .mlabel {
  grid-column: 1 / 5;
  color: var(--ink-faint);
  margin-bottom: 9vh;
}
.manifesto .statement { grid-column: 2 / 12; }
.manifesto .mbody {
  grid-column: 6 / 11;
  margin-top: 11vh;
}
.mbody p {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 34em;
}
.mbody p + p { margin-top: 1.6em; }
.mbody em { color: var(--ink); }
.manifesto .mrule {
  grid-column: 2 / 12;
  height: 1px; background: var(--line);
  margin-top: 18vh;
  transform-origin: left center;
}

/* ─────────────────────────── FIG. 00 photo band ─────────────────────────── */

.photo-band {
  background: var(--bone);
  padding: 0 var(--margin) 6vh;
}
.photo-band figure { max-width: 1600px; margin: 0 auto; }
.pb-frame {
  border: 1px solid var(--line);
  padding: clamp(10px, 1.2vw, 18px);
  background: var(--bone-hi);
}
.pb-frame img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; /* reserve space before the image arrives */
}
.photo-band figcaption {
  margin-top: 1.5em;
  font-size: .6rem;
  color: var(--ink-faint);
}

/* ─────────────────────────── works ─────────────────────────── */

.works { padding-block: 11vh 16vh; }

.works-head { margin-bottom: 16vh; }
.wlabel {
  grid-column: 1 / 6;
  color: var(--ink-faint);
  margin-bottom: 7vh;
  display: flex; align-items: baseline; gap: 1.2em;
}
.wlabel i { font-style: normal; opacity: .55; }
.wlabel.light { color: rgba(239, 234, 227, .62); } /* opacity stays owned by the reveal system */
.works-head .statement { grid-column: 2 / 10; }

.project {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(12px, 2vw, 28px);
  padding: 11vh var(--margin);
  position: relative;
  border-top: 1px solid var(--line-soft);
  align-items: center;
}
.project:last-child { border-bottom: 1px solid var(--line-soft); }

.p-index {
  position: absolute;
  top: 1vh;
  font-size: clamp(6rem, 13vw, 13rem);
  font-family: var(--disp);
  line-height: 1;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(22, 20, 15, .18);
  opacity: 0; transform: translateY(40px);
  transition: opacity 1.4s ease .1s, transform 1.4s var(--ease-out) .1s;
  pointer-events: none;
}
.project.in .p-index { opacity: 1; transform: none; }
.project:nth-of-type(odd) .p-index { right: var(--margin); }
.project:nth-of-type(even) .p-index { left: var(--margin); }

.p-meta { grid-column: 1 / 5; position: relative; z-index: 2; }
.p-fig  { grid-column: 6 / 13; position: relative; z-index: 1; } /* plates slide over the ghost index */
.project:nth-of-type(even) .p-meta { grid-column: 9 / 13; grid-row: 1; }
.project:nth-of-type(even) .p-fig  { grid-column: 1 / 8; grid-row: 1; }

.p-name {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  letter-spacing: .05em;
  line-height: 1.15;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s ease .05s, transform 1s var(--ease-out) .05s;
}
.p-name a { transition: color .5s ease; }
.p-name a:hover { color: var(--accent); }
.p-link {
  display: inline-flex; align-items: baseline; gap: .8em;
  margin-top: 2.4em;
  padding: 10px 0 4px;
  font-size: .62rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s ease .45s, transform 1s var(--ease-out) .45s, border-color .5s ease, color .5s ease;
}
.p-link i { font-style: normal; transition: transform .5s var(--ease-out); }
.p-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.p-link:hover i { transform: translateX(.5em); }
.project.in .p-link { opacity: 1; transform: none; }
.p-place {
  color: var(--ink-faint); margin-top: 1.1em;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s ease .15s, transform 1s var(--ease-out) .15s;
}
.p-desc {
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.6; color: var(--ink-soft);
  margin-top: 2em; max-width: 24em;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s ease .25s, transform 1s var(--ease-out) .25s;
}
.p-tag {
  color: var(--ink-faint); margin-top: 2.2em; font-size: .6rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s ease .35s, transform 1s var(--ease-out) .35s;
}
.project.in :is(.p-name, .p-place, .p-desc, .p-tag) { opacity: 1; transform: none; }

.p-fig {
  border: 1px solid var(--line);
  background: var(--bone-hi);
  padding: clamp(18px, 3.2vw, 44px);
  color: var(--ink-soft);
  transition: border-color .7s ease, color .7s ease, background .7s ease;
}
.project:hover .p-fig { color: var(--accent); border-color: rgba(85, 104, 63, .5); }
.fig { width: 100%; height: auto; display: block; }
.p-fig figcaption {
  margin-top: 1.5em;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--ink-faint);
}

.fig .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.project.in .fig .d {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.7s cubic-bezier(.6, 0, .2, 1) calc(var(--d, 0s) + .2s);
}
.fig .fade { opacity: 0; }
.project.in .fig .fade {
  opacity: var(--o, 1);
  transition: opacity 1.3s ease calc(var(--d, 0s) + .6s);
}
.fig text {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  fill: currentColor;
  stroke: none;
}

/* ─────────────────────────── atelier ─────────────────────────── */

.atelier { padding-block: 20vh 22vh; }
.atelier .wlabel { grid-column: 1 / 6; }
.atelier .statement { grid-column: 2 / 8; }
.atelier .mbody {
  grid-column: 2 / 7;
  margin-top: 10vh;
}
.letters {
  grid-column: 2 / 7;
  margin-top: 10vh;
}
.letter {
  display: flex; align-items: baseline; gap: clamp(18px, 2.4vw, 34px);
  padding-block: 1.35em;
  border-top: 1px solid var(--line-soft);
}
.letter:last-child { border-bottom: 1px solid var(--line-soft); }
.letter dt {
  font-family: var(--disp);
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  line-height: 1;
  color: var(--accent);
  /* absolute, not em-relative — the smaller foot row must share the same column */
  min-width: calc(1.4 * clamp(1.7rem, 2.6vw, 2.5rem));
}
.letter.foot dt { color: var(--ink-faint); font-size: clamp(1.2rem, 1.8vw, 1.7rem); }
.letter dd { display: flex; flex-direction: column; gap: .35em; }
.letter dd b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .22em;
  color: var(--ink);
}
.letter dd span {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-style: italic;
  color: var(--ink-soft);
}
.letter.foot dd b { color: var(--ink-faint); }

.analemma {
  grid-column: 8 / 12;
  grid-row: 2 / 5;
  align-self: start;
  margin-top: -6vh;
  color: var(--ink-soft);
}
.analemma svg { width: 100%; height: auto; }
.analemma .an-path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.in .analemma .an-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 3.2s var(--ease-io) .4s;
}
.analemma .an-dots circle {
  opacity: 0; transition: opacity .6s ease;
}
.in .analemma .an-dots circle { opacity: 1; }
.in .analemma .an-dots circle:nth-child(1)  { transition-delay: 1.2s; }
.in .analemma .an-dots circle:nth-child(2)  { transition-delay: 1.4s; }
.in .analemma .an-dots circle:nth-child(3)  { transition-delay: 1.6s; }
.in .analemma .an-dots circle:nth-child(4)  { transition-delay: 1.8s; }
.in .analemma .an-dots circle:nth-child(5)  { transition-delay: 2.0s; }
.in .analemma .an-dots circle:nth-child(6)  { transition-delay: 2.2s; }
.in .analemma .an-dots circle:nth-child(7)  { transition-delay: 2.4s; }
.in .analemma .an-dots circle:nth-child(8)  { transition-delay: 2.6s; }
.in .analemma .an-dots circle:nth-child(9)  { transition-delay: 2.8s; }
.in .analemma .an-dots circle:nth-child(10) { transition-delay: 3.0s; }
.in .analemma .an-dots circle:nth-child(11) { transition-delay: 3.2s; }
.analemma figcaption {
  margin-top: 1.6em; color: var(--ink-faint); font-size: .6rem;
}
.analemma text {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  fill: currentColor; stroke: none;
}

.numbers {
  grid-column: 2 / 12;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 18vh;
  border-top: 1px solid var(--line);
  padding-top: 4vh;
}
.numbers b {
  display: block;
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 3.1rem);
  letter-spacing: .04em;
}
.numbers .mono { color: var(--ink-faint); display: block; margin-top: .9em; font-size: .6rem; }

/* ─────────────────────────── contact ─────────────────────────── */

.contact {
  background: var(--night);
  color: var(--bone);
  min-height: 100vh;
  display: flex; align-items: center;
  padding-block: 16vh 0;
  position: relative;
  overflow: hidden;
}
/* dusk photography behind the whole section, breathing very slowly */
.dusk-bg {
  position: absolute; inset: 0;
  background: url("./assets/dusk.jpg") center 62% / cover no-repeat;
  animation: duskbreathe 44s ease-in-out infinite alternate;
}
@keyframes duskbreathe {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .dusk-bg { animation: none; } }
/* a quiet scrim under the text column — the photograph stays visible,
   the small annotations stay legible over bright areas */
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(10, 12, 8, .58) 0%, rgba(10, 12, 8, .26) 45%, rgba(10, 12, 8, .05) 68%),
              linear-gradient(to top, rgba(10, 12, 8, .55) 0%, transparent 30%);
  pointer-events: none;
}
.contact .grid { width: 100%; row-gap: 0; position: relative; z-index: 2; }
.contact .statement { grid-column: 2 / 11; }
.contact .statement em { color: var(--accent-hi); }

.mailto {
  grid-column: 2 / 11;
  justify-self: start;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  margin-top: 8vh;
  position: relative;
  padding-bottom: 10px;
}
.mailto-line {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--bone-line);
}
.mailto-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent-hi);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .7s var(--ease-io);
}
.mailto:hover .mailto-line::after { transform: scaleX(1); transform-origin: left center; }

.phone {
  grid-column: 2 / 11;
  justify-self: start;
  margin-top: 2.6em;
  opacity: .7;
  transition: opacity .5s ease;
  padding: 12px 4px 8px;
  margin-inline: -4px;   /* invisible hit area for the small tap target */
  border-bottom: 1px solid transparent;
}
.phone:hover { opacity: 1; border-bottom-color: var(--bone-line); }
.contact .phone.reveal { transition: opacity 1.1s ease var(--d), transform 1.1s var(--ease-out) var(--d), border-bottom-color .5s ease; }
.contact.in .phone { opacity: .7; }
.contact.in .phone:hover { opacity: 1; }

.studios {
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: clamp(24px, 5vw, 80px);
  margin-top: 10vh;
}
.studio { display: flex; flex-direction: column; gap: 1.1em; }
.s-city { opacity: .68; }
.s-addr {
  font-size: 1.05rem; line-height: 1.55; color: var(--bone);
  opacity: .88;
}
.s-time { opacity: .68; font-variant-numeric: tabular-nums; }

.colophon {
  grid-column: 1 / 13;
  display: flex; justify-content: space-between; gap: 2em;
  border-top: 1px solid var(--bone-line);
  margin-top: 6vh;
  padding-block: 26px 30px;
  opacity: .68;
  font-size: .6rem;
}

/* ─────────────────────────── cursor ─────────────────────────── */

#cursor {
  position: fixed; top: 0; left: 0; z-index: 60;
  pointer-events: none;
}
#cursor-dot {
  position: absolute; top: -3px; left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
}
#cursor-ring {
  position: absolute; top: -19px; left: -19px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #fff;
  mix-blend-mode: difference;
  opacity: .55;
  transition: transform .45s var(--ease-out), opacity .45s ease;
}
#cursor.on-link #cursor-ring { transform: scale(1.7); opacity: .9; }
#cursor-label {
  position: absolute; top: -5px; left: 30px;
  font-size: .55rem; color: var(--accent-hi);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .35s ease, transform .35s var(--ease-out);
  white-space: nowrap;
}
#cursor.on-link #cursor-label { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse) {
  #cursor { display: none; }
}

/* ─────────────────────────── responsive ─────────────────────────── */

@media (max-width: 980px) {
  .manifesto .statement, .works-head .statement,
  .atelier .statement, .contact .statement { grid-column: 1 / 13; }
  .wlabel, .manifesto .mlabel { grid-column: 1 / 13; text-wrap: balance; }
  .manifesto .mbody { grid-column: 1 / 12; margin-top: 8vh; }
  .manifesto .mrule { grid-column: 1 / 13; }
  .project { align-items: start; row-gap: 6vh; }
  .p-meta, .p-fig,
  .project:nth-of-type(even) .p-meta,
  .project:nth-of-type(even) .p-fig { grid-column: 1 / 13; grid-row: auto; }
  .p-fig { order: -1; }
  .atelier .mbody { grid-column: 1 / 12; }
  .letters { grid-column: 1 / 12; }
  .analemma { grid-column: 1 / 10; grid-row: auto; margin-top: 10vh; }
  .numbers { grid-column: 1 / 13; grid-template-columns: repeat(2, 1fr); row-gap: 6vh; }
  .mailto { grid-column: 1 / 13; }
  .phone { grid-column: 1 / 13; }
  .studios { grid-column: 1 / 13; grid-template-columns: 1fr 1fr; }
  #nav .clock { display: none; }
  .colophon { flex-direction: column; gap: .9em; }
  .c-mid { order: 3; }
}

@media (max-width: 620px) {
  #nav .links a i { display: none; }
  .hero-sub { font-size: .56rem; letter-spacing: .12em; white-space: normal; text-align: center; width: 88vw; }
  .studios { grid-template-columns: 1fr; }
  .fig text { font-size: 15px; } /* annotations stay legible when the plate scales down */
  .analemma text { font-size: 14px; }
}

/* ─────────────────────────── element pages ─────────────────────────── */

.el-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--night);
  color: var(--bone);
  display: flex; align-items: flex-end;
}
.el-hero-img {
  position: absolute; inset: -6% 0 0 0;
  background-size: cover; background-position: center;
  will-change: transform;
  transform: scale(1.04);
}
.el-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10, 12, 8, .72) 0%, rgba(10, 12, 8, .18) 34%, rgba(10, 12, 8, .1) 60%, rgba(10, 12, 8, .56) 100%);
}
.el-hero-content {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 var(--margin) 7vh;
}
.el-eyebrow {
  display: flex; align-items: baseline; gap: 1.4em;
  color: rgba(239, 234, 227, .68);
  margin-bottom: 2.2em;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1s ease .2s, transform 1s var(--ease-out) .2s;
}
.el-title {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.6vw, 7.8rem);
  line-height: 1.02;
  letter-spacing: .06em;
  margin-left: -.04em;
  display: flex; flex-wrap: wrap; column-gap: .32em;
}
.el-title .hw { display: inline-flex; overflow: hidden; padding-bottom: .05em; }
.el-title .hl {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1.2s var(--ease-out) calc(var(--i) * 55ms + .3s);
}
body.built .el-title .hl { transform: translateY(0); }
body.built .el-eyebrow { opacity: 1; transform: none; }
.el-sub {
  margin-top: 2em;
  color: rgba(239, 234, 227, .75);
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.1s ease .9s, transform 1.1s var(--ease-out) .9s;
}
body.built .el-sub { opacity: 1; transform: none; }
.el-hero .hero-hint { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; opacity: 0; transition: opacity 1.2s ease 1.5s; }
body.built .el-hero .hero-hint { opacity: .55; }

/* body sections */
.el-sect { padding-block: 16vh 6vh; }
.el-sect .wlabel { margin-bottom: 6vh; }
.el-statement { grid-column: 2 / 11; }
.el-cols {
  grid-column: 2 / 12;
  margin-top: 8vh;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 30em));
  gap: clamp(28px, 4vw, 72px);
}
.el-cols p {
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  line-height: 1.65;
  color: var(--ink-soft);
}
.el-cols p + p { margin-top: 1.5em; }
.el-cols em { color: var(--ink); }

/* full-bleed photograph figure */
.ph-fig { background: var(--bone); padding: 8vh var(--margin); }
.ph-fig figure { max-width: 1600px; margin: 0 auto; }
/* the plate, standing alone on a service page */
.ph-fig .project {
  display: block;
  padding: 0;
  border: none;
}
.ph-fig .project .p-fig {
  max-width: 1100px;
  margin: 0 auto;
}
.ph-fig .project .p-fig figcaption { text-align: center; }

/* two-up: the studio's own material beside its matching detail */
.ph-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 28px);
}
.ph-duo .ph-frame img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 700px) {
  .ph-duo { grid-template-columns: 1fr; }
}
.ph-frame {
  border: 1px solid var(--line);
  padding: clamp(10px, 1.2vw, 18px);
  background: var(--bone-hi);
  overflow: hidden;
}
.ph-frame img { display: block; width: 100%; height: auto; }
.ph-fig figcaption { margin-top: 1.5em; font-size: .6rem; color: var(--ink-faint); }

/* the "we consider" index */
.consider {
  grid-column: 2 / 12;
  list-style: none;
  margin-top: 10vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--line);
}
.consider li {
  display: flex; align-items: baseline; gap: 1em;
  padding-block: 1.6em;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  color: var(--ink-soft);
}
.consider li i {
  font-style: normal;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--accent);
}

/* named forms (fire pits / fireplaces / screens / entry gates …) */
.formsx { grid-column: 2 / 12; margin-top: 10vh; }
.formx {
  display: grid;
  grid-template-columns: minmax(0, 22em) 1fr;
  gap: clamp(20px, 4vw, 72px);
  padding-block: 2.4em;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.formx:last-child { border-bottom: 1px solid var(--line-soft); }
.formx h3 {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.8rem);
  letter-spacing: .05em;
}
.formx p {
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34em;
}

/* the house → deck → landscape sequence */
.sequence {
  grid-column: 2 / 12;
  margin-top: 10vh;
  padding: 3.2em 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.2em 2em;
}
.sequence b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(.62rem, 1vw, .8rem);
  letter-spacing: .22em;
  color: var(--ink);
}
.sequence i { font-style: normal; color: var(--accent); font-size: 1.1em; }

/* closing + next element */
.el-close { padding-block: 14vh 12vh; }
.el-close .statement { grid-column: 2 / 11; }
.next-strip {
  grid-column: 2 / 12;
  margin-top: 12vh;
  border-top: 1px solid var(--line);
  padding-top: 3em;
  display: flex; justify-content: space-between; align-items: baseline; gap: 2em;
}
.next-strip .back { color: var(--ink-faint); }
.next-strip .next {
  font-family: var(--disp);
  font-size: clamp(1.2rem, 2vw, 1.9rem);
  letter-spacing: .05em;
  display: inline-flex; align-items: baseline; gap: .7em;
}
.next-strip .next i { font-style: normal; font-family: var(--mono); font-size: .55em; color: var(--ink-faint); letter-spacing: .18em; }
.next-strip .next::after { content: "⟶"; font-family: var(--serif); transition: transform .5s var(--ease-out); display: inline-block; }
.next-strip .next:hover::after { transform: translateX(.5em); }

/* compact contact band on element pages */
.contact.compact { min-height: 62vh; padding-block: 10vh 0; }
.contact.compact .statement { grid-column: 2 / 11; }

@media (max-width: 980px) {
  .el-statement, .el-close .statement { grid-column: 1 / 13; }
  .el-cols { grid-column: 1 / 13; grid-template-columns: 1fr; }
  .consider { grid-column: 1 / 13; grid-template-columns: 1fr; }
  .formsx { grid-column: 1 / 13; }
  .formx { grid-template-columns: 1fr; gap: .7em; }
  .sequence { grid-column: 1 / 13; }
  .next-strip { grid-column: 1 / 13; flex-direction: column; gap: 1.4em; }
}

/* ─────────────────────────── reduced motion ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .line-in, .hero-word .hl,
  .el-title .hl, .el-eyebrow, .el-sub,
  .p-name, .p-place, .p-desc, .p-tag, .p-index { opacity: 1 !important; transform: none !important; }
  .fig .d { stroke-dashoffset: 0 !important; }
  .fig .fade { opacity: var(--o, 1) !important; }
}

/* no-JS fallback: everything visible, no intro */
html:not(.js) #preloader, html:not(.js) #hero,
html:not(.js) #scene, html:not(.js) #intro-track { display: none; }
html:not(.js) .reveal, html:not(.js) .line-in { opacity: 1; transform: none; }
html:not(.js) .fig .d { stroke-dashoffset: 0; }
html:not(.js) .fig .fade { opacity: var(--o, 1); }
html:not(.js) #nav { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
html:not(.js) .contact { background: var(--night); }
html:not(.js) .el-title .hl, html:not(.js) .el-eyebrow, html:not(.js) .el-sub { opacity: 1; transform: none; }

/* Level Up View wordmark adaptation; original cinematic sequence retained. */
.hero-word { display: flex; flex-direction: column; align-items: center; gap: .08em; font-size: clamp(3rem, 8.4vw, 9rem); letter-spacing: .1em; text-indent: 0; margin-top: -6vh; }
.hero-row { display: flex; justify-content: center; }
.hero-sub { top: 69%; }
#nav .brand { letter-spacing: .13em; font-size: clamp(.8rem, 1.3vw, 1.06rem); }
.contact .p-link { display: inline-block; color: var(--bone); margin-top: 1.5em; }
.audience-note { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
@media(max-width:620px) { #nav .links { gap: 10px; } #nav .links a i { display:none; } #nav .clock {display:none;} .hero-word {font-size:10.4vw; gap:.15em;} .hero-sub {top:63%;} }

/* LUV geometric wordmark */
.hero-word.geometric-wordmark { display:block; width:min(78vw,1000px); height:auto; margin-top:-6vh; clip-path:inset(-60% -10% -60% -10%); }
.architectural-wordmark { display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 2px 15px rgba(0,0,0,.2)); }
.architectural-wordmark .hl { transform-box:fill-box; transform-origin:center; }
#nav .brand {font-family:Arial,Helvetica,sans-serif;font-weight:500;letter-spacing:.17em;text-transform:uppercase;}
@media(max-width:620px) { .hero-word.geometric-wordmark {width:83vw;} #nav .brand {font-size:.7rem;letter-spacing:.12em;} }

/* Scroll-controlled client project film */
.space-film {height:420vh;position:relative;}
.space-film-stage {position:sticky;top:0;height:100vh;height:100svh;margin:0;overflow:hidden;background:#192c32;}
.space-film-stage>img {width:100%;height:100%;object-fit:cover;display:block;}
.space-film-stage>.photo-continuation {position:absolute;inset:0;will-change:opacity,transform;}
.space-film-stage figcaption {position:absolute;inset:auto 6vw 8vh;color:#fff;display:flex;flex-direction:column;gap:14px;text-shadow:0 2px 18px #000;}
.space-film-stage figcaption>span:nth-child(2) {font-size:clamp(30px,4vw,64px);font-family:Georgia,serif;}
.space-film-stage small {font:12px Arial,sans-serif;letter-spacing:.05em;}
.space-film-stage::after {content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none;}
.space-film-stage figcaption,.space-film-progress {z-index:1;}
.space-film-progress {position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff40;}
.space-film-progress i {display:block;height:100%;background:#e1c48b;transform:scaleX(0);transform-origin:left;}
@media(prefers-reduced-motion:reduce){.space-film{height:100vh;}.space-film-stage small{display:none;}.space-film-stage>.photo-continuation{display:none;}.space-film-stage>.photo-continuation:last-of-type{display:block;opacity:1!important;transform:none!important;}}

/* Concept-to-project scroll dissolve */
.dusk-bg {background-image:url('./assets/real-project/night.jpg');}
.project-transition {height:340vh;position:relative;background:#121c1b;}
body.in-real-project #nav {color:#fff;background:linear-gradient(rgba(0,0,0,.55),transparent);text-shadow:0 1px 6px #000;}
.project-transition-stage {position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#121c1b;}
.project-layer {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:opacity,transform;}
.project-transition-shade {position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 40%,rgba(0,0,0,.65));pointer-events:none;}
.project-transition-copy {position:absolute;left:6vw;right:6vw;bottom:9vh;color:#fff;text-shadow:0 2px 20px #000;}
.project-transition-copy h2 {font:normal clamp(36px,5vw,76px)/1.08 Georgia,serif;margin:20px 0;}
.project-transition-copy p {font:18px/1.5 Arial,sans-serif;margin:0 0 20px;}
.project-transition-copy small {font:12px Arial,sans-serif;letter-spacing:.05em;}
.project-transition-meter {position:absolute;inset:auto 0 0;height:3px;background:#ffffff40;}
.project-transition-meter i {height:100%;display:block;background:#e1c48b;transform-origin:left;transform:scaleX(0);}
.real-project-gallery {padding:100px 6vw;background:var(--bone);color:var(--night);}
.real-project-gallery header {max-width:740px;margin-bottom:48px;}
.real-project-gallery h2 {font:normal clamp(30px,4vw,52px)/1.15 Georgia,serif;margin:22px 0;}
.real-project-gallery p {font:16px/1.65 Arial,sans-serif;}
.real-project-grid {display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.real-project-grid figure {margin:0;min-width:0;}
.real-project-grid img {display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.real-project-grid figcaption {padding:20px 0;font-size:10px;letter-spacing:.1em;}
@media(max-width:620px){.real-project-grid{grid-template-columns:1fr;}.real-project-gallery{padding:65px 6vw;}.project-transition-copy p{font-size:16px;}}
@media(prefers-reduced-motion:reduce){.project-transition{height:auto;}.project-transition-stage{height:auto;position:relative;display:grid;}.project-layer{position:relative;opacity:1!important;transform:none!important;height:auto;aspect-ratio:16/9;}.project-layer:first-child{display:none;}.project-transition-copy{position:relative;padding:35px 6vw;left:auto;right:auto;bottom:auto;}.project-transition-shade,.project-transition-meter,.project-transition-copy small{display:none;}}