/* Nine Courtyards — a plan becomes a house. Flat page by default; html.motion turns the hero into a 3D stage. */

@font-face { font-family: "Syne"; font-weight: 400 800; font-style: normal; font-display: swap; src: url("fonts/syne.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("fonts/inter-tight.woff2") format("woff2"); }

:root {
  --paper: #d9d6d0;
  --paper-2: #e4e1dc;
  --ink: #2b2a28;
  --mute: #5f5b55;
  --terra-text: #9a4121;
  --line: rgba(43, 42, 40, 0.16);
  --terra: #b9532e;
  --wall: #c7c3bb;
  --wall-2: #ece9e4;
  --display: "Syne", "Avenir Next", "Helvetica Neue", sans-serif;
  --body: "Inter Tight", system-ui, -apple-system, sans-serif;
  --pad: clamp(16px, 5vw, 72px);
  --max: 1280px;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 8px 12px; background: var(--ink); color: var(--paper); font-size: 13px; text-decoration: none; transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--pad); font-size: 13px; letter-spacing: 0.02em; pointer-events: none; }
.top a { pointer-events: auto; text-decoration: none; }
.top__mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0.01em; }
.top__sq { width: 11px; height: 11px; border: 2px solid var(--ink); position: relative; }
.top__sq::after { content: ""; position: absolute; inset: 2px; background: var(--terra); }
.top__nav { display: flex; gap: 22px; }
.top__nav a:hover, .top__nav a:focus-visible { color: var(--terra-text); }

/* ---------- hero: the plan (flat layout) ---------- */
.hero { padding: clamp(96px, 16vh, 160px) var(--pad) 0; }
.hero__pin { max-width: var(--max); margin: 0 auto; }
.eyebrow { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.hero__h { margin-top: 18px; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 7.2vw, 104px); line-height: 0.96; letter-spacing: -0.035em; max-width: 11ch; }
.hero__sub { margin-top: 22px; font-size: clamp(16px, 1.5vw, 20px); color: var(--mute); }
.cursor { display: inline-block; width: 0.09em; height: 0.95em; margin-left: 0.18em; vertical-align: -0.12em; background: var(--terra); animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.stage { position: relative; width: min(100%, 900px); margin: 48px auto 0; aspect-ratio: 4 / 3; }
.model { position: absolute; inset: 0; }
.plan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.walls3d { display: none; }

/* plan drawing */
.plan line, .plan path, .plan rect, .plan circle, .plan ellipse { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.plan .walls line { stroke-width: 3; }
.plan .glass line { stroke-width: 1.2; stroke-dasharray: 5 4; stroke: var(--terra); }
.plan .doors path { stroke-width: 1; stroke: var(--mute); }
.plan .fixtures rect { stroke-width: 1; stroke: var(--mute); }
.plan .treads line, .plan .treads path { stroke-width: 1; stroke: var(--mute); }
.plan .labels text { font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; fill: var(--mute); }
.plan .dims line, .plan .dims circle, .plan .dims path { stroke-width: 0.8; stroke: var(--mute); }
.plan .dims path { fill: var(--terra); stroke: none; }
.plan .dims text { font-family: var(--body); font-size: 9px; letter-spacing: 0.12em; fill: var(--mute); text-anchor: middle; }
.plan .room { fill: var(--terra); stroke: none; opacity: 0; }
.plan .court { fill: var(--terra); stroke: none; opacity: 0.9; }
.plan .hatch line { stroke: var(--paper); stroke-width: 0.6; opacity: 0.45; }
.plan .tree { stroke-width: 1; stroke-dasharray: 3 3; stroke: var(--mute); }
.plan .tree--in { stroke-dasharray: none; fill: var(--mute); }
.plan .shadow { fill: var(--ink); stroke: none; opacity: 0.14; }
.plan .sun circle { fill: var(--terra); stroke: none; }
.plan .sun path { stroke: var(--terra); stroke-width: 1.2; }
.plan .sun { transform: translate(760px, 40px); }

.stage__where { display: none; }

/* rooms (flat: a grid of posters with their lines) */
.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px 28px; margin: clamp(56px, 10vh, 120px) auto 0; max-width: var(--max); }
.rm__fig { display: block; }
.rm__v { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2); }
.rm__cap { display: block; margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--mute); }
.rm__n { display: inline-block; margin-right: 10px; font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--terra-text); }
.rm__cap b { display: inline; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.rm__cap span:last-child { display: block; max-width: 40ch; margin-top: 6px; }
.hero__end { margin: clamp(56px, 10vh, 120px) auto 0; max-width: var(--max); font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -0.02em; }

/* ---------- sections ---------- */
.work, .approach, .contact { padding: clamp(80px, 14vh, 160px) var(--pad) 0; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }
.h2 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; max-width: 18ch; }
.h2__n { display: block; margin-bottom: 18px; font-family: var(--body); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terra-text); }

/* work: three mini plans that stand up */
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px 28px; margin-top: clamp(40px, 6vh, 72px); }
.proj { position: relative; }
.mini { position: relative; aspect-ratio: 1; background: var(--paper-2); border: 1px solid var(--line); }
.mini__plan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mini__plan rect, .mini__plan line { fill: none; stroke: var(--ink); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mini__plan .mini__court { fill: var(--terra); stroke: none; opacity: 0.16; }
.mw { display: none; }
.proj__h { margin-top: 18px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.proj__p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--mute); }
.work__note { display: none; }

/* approach */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px 28px; margin-top: clamp(40px, 6vh, 72px); }
.step { position: relative; padding-top: 18px; border-top: 1px solid var(--line); }
.step::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--terra); transform: scaleX(0); transform-origin: left; }
.step__n { display: block; font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--terra-text); }
.step h3 { margin-top: 14px; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; line-height: 1.15; }
.step p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--mute); max-width: 38ch; }

/* contact */
.contact__p { margin-top: 24px; max-width: 46ch; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; color: var(--mute); }
.contact__mail { display: inline-block; margin-top: 36px; font-family: var(--display); font-weight: 800; font-size: clamp(19px, 3.4vw, 52px); letter-spacing: -0.03em; line-height: 1; text-decoration: none; border-bottom: 3px solid var(--terra); padding-bottom: 6px; }
.contact__mail:hover, .contact__mail:focus-visible { color: var(--terra-text); }
.contact__where { margin-top: 28px; font-size: 14px; color: var(--mute); }

/* footer */
.foot { margin-top: clamp(80px, 14vh, 160px); padding: 28px var(--pad) 36px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--mute); }
.foot a { color: var(--ink); }
.foot a:hover, .foot a:focus-visible { color: var(--terra-text); }

/* ---------- motion: the hero becomes a stage ---------- */
html.motion { scrollbar-gutter: stable; }
html.motion .hero { padding: 0; height: var(--hero-h, 600vh); }
html.motion .hero__pin { position: sticky; top: 0; height: 100vh; height: 100dvh; max-width: none; overflow: hidden; }
html.motion .hero__copy { position: absolute; z-index: 3; left: var(--pad); top: clamp(88px, 14vh, 150px); max-width: min(46vw, 640px); opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s; will-change: opacity, transform; }
html.motion.ready .hero__copy { opacity: 1; transform: none; }
html.motion.scrolled .hero__copy { transition: none; }
html.motion .stage { position: absolute; left: 50%; top: 50%; margin: 0; width: min(78vh * 4 / 3, 92vw); transform: translate(-50%, -50%); perspective: 1600px; perspective-origin: 50% 40%; }
html.motion .model { transform-style: preserve-3d; will-change: transform; --rise: 0; }
html.motion .walls3d { display: block; position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
html.motion .w { position: absolute; display: block; transform-origin: 0 0; backface-visibility: visible; }
html.motion .w--h { background: linear-gradient(to bottom, var(--wall-2), var(--wall)); border-bottom: 1px solid rgba(43, 42, 40, 0.35); transform: rotateX(90deg) scaleY(var(--rise)); }
html.motion .w--v { background: linear-gradient(to right, var(--wall), #b5b1a9); border-right: 1px solid rgba(43, 42, 40, 0.35); transform: rotateY(-90deg) scaleX(var(--rise)); }
html.motion .stage__where { display: flex; gap: 10px; position: absolute; z-index: 3; right: var(--pad); top: clamp(88px, 14vh, 150px); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
html.motion .where__n { font-family: var(--display); font-weight: 700; color: var(--terra-text); }
html.motion .rooms { display: block; margin: 0; max-width: none; }
html.motion .rm { position: absolute; z-index: 3; left: var(--pad); bottom: clamp(24px, 6vh, 64px); width: min(36vw, 480px); opacity: 0; pointer-events: none; will-change: opacity, transform; }
html.motion .rm__v { box-shadow: 0 30px 60px -30px rgba(43, 42, 40, 0.5); }
html.motion .hero__end { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(24px, 6vh, 64px); margin: 0; padding: 0 var(--pad); text-align: center; opacity: 0; max-width: none; }

html.motion .work__note { display: block; margin-top: 28px; font-size: 13px; color: var(--mute); }
html.motion .mini { perspective: 900px; }
html.motion .mini__model { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1); }
html.motion .mini .mini__plan { position: absolute; inset: 0; }
html.motion .mw { display: block; position: absolute; transform-origin: 0 0; height: 9%; transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1); }
html.motion .mw--h { background: linear-gradient(to bottom, var(--wall-2), var(--wall)); border-bottom: 1px solid rgba(43, 42, 40, 0.35); transform: rotateX(90deg) scaleY(0); }
html.motion .mw--v { background: linear-gradient(to right, var(--wall), #b5b1a9); border-right: 1px solid rgba(43, 42, 40, 0.35); transform: rotateY(-90deg) scaleX(0); }
html.motion .proj:hover .mini__model, html.motion .proj:focus-within .mini__model, html.motion .proj.is-up .mini__model { transform: rotateX(56deg) rotateZ(-30deg) scale(0.86); }
html.motion .proj:hover .mw--h, html.motion .proj:focus-within .mw--h, html.motion .proj.is-up .mw--h { transform: rotateX(90deg) scaleY(1); }
html.motion .proj:hover .mw--v, html.motion .proj:focus-within .mw--v, html.motion .proj.is-up .mw--v { transform: rotateY(-90deg) scaleX(1); }
html.motion .proj__h { transition: color 0.4s; }
html.motion .proj:hover .proj__h, html.motion .proj.is-up .proj__h { color: var(--terra-text); }
html.motion .step::before { transition: transform 1.1s cubic-bezier(0.6, 0, 0.2, 1); }
html.motion .step.is-in::before { transform: scaleX(1); }

/* phone: copy above the plan, the room card sits at the bottom */
@media (max-width: 768px) {
  .top { padding: 14px var(--pad); font-size: 12px; }
  .top__mark { font-size: 13px; gap: 8px; }
  .top__nav { gap: 14px; white-space: nowrap; margin-left: 12px; }
  .top__nav a[href="#approach"] { display: none; }
  .contact__mail { font-size: 17px; letter-spacing: -0.02em; }
  html.motion .hero__copy { left: var(--pad); right: var(--pad); top: 84px; max-width: none; }
  html.motion .hero__h { font-size: clamp(34px, 11vw, 48px); max-width: none; }
  html.motion .stage { width: 94vw; top: 54%; perspective: 1100px; }
  html.motion .stage__where { display: none; }
  html.motion .rm { left: 0; right: 0; bottom: 0; width: auto; padding: 0 var(--pad) 44px; }
  html.motion .rm__cap { margin-top: 10px; font-size: 14px; }
  html.motion .rm__cap span:last-child { margin-top: 4px; }
  html.motion .hero__end { font-size: 20px; bottom: 48px; }
  html.motion .work { overflow: clip; }
  html.motion .proj.is-up .mini__model { transform: rotateX(56deg) rotateZ(-30deg) scale(0.72); }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}