/* Worrell Yeung concept: one datum line lays down the drawing, then the building.
   The CSS default is the flat page (reduced motion, or JS failed): hero with a static datum, each project's drawing
   and photograph side by side on its typology tint, the index, about, contact.
   html.motion (boot.js, before paint) holds the intro's start state; html.gs (main.js, once GSAP loads) switches on
   the pinned pass at 701px+ and the fixed line on phones. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(vendor/fonts/Figtree-normal-400-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #192331;
  --white: #fff;
  --sage: #B8C4BF;   /* Residential */
  --stone: #AFAA9C;  /* Civic */
  --putty: #D5D3C7;  /* Commercial */
  --lilac: #CECACE;  /* Cultural */
  --sans: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --head: 64px;
  --pad: clamp(20px, 3.4vw, 56px);
  --gut: clamp(32px, 6.4vw, 150px);
  --datum: 62%;
}
@media (max-width: 700px) { :root { --head: 56px; --pad: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--white); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.5 var(--sans); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 60; padding: 10px 16px; background: var(--ink); color: var(--white); font: 600 14px var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }
.datum { height: 1px; background: var(--ink); }
.upper, .nav, .sec-title, .cap__no, .tag, .contact__label { text-transform: uppercase; letter-spacing: .04em; }

/* ---------- header: always solid white, hairline once scrolled, so nothing slides under it ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--head);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--pad); background: var(--white); border-bottom: 1px solid transparent;
  font-size: 13px; font-weight: 500; transition: border-color .2s;
}
.is-scrolled .nav { border-bottom-color: var(--ink); }
.nav a { text-decoration: none; padding: 8px 0; }
.nav a:hover { text-decoration: underline; }
.nav__home { font-weight: 600; }
.nav__links { display: flex; gap: clamp(16px, 2.6vw, 40px); }
@media (max-width: 700px) { .nav__opt { display: none; } }

/* ---------- 1. datum (hero) ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; }
.hero__line { position: absolute; left: 0; right: 0; top: var(--datum); transform-origin: 0 50%; }
.hero__above { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(100% - var(--datum)); overflow: hidden; padding-top: .1em; }
.hero__below { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--datum) + 1px); overflow: hidden; }
.hero__in { display: block; }
.hero__lede .hero__in { padding-top: 18px; }
.hero__mark {
  font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(40px, 9.4vw, 150px); line-height: .82; margin-bottom: -.06em; white-space: nowrap;
}
.hero__lede { max-width: 34ch; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; }
@media (max-width: 700px) {
  .hero__mark { font-size: 18.6vw; white-space: normal; }
  .hero__mark .ln { display: block; }
}
.motion .hero__line { transform: scaleX(0); }
.motion .hero__mark .hero__in { transform: translateY(105%); }
.motion .hero__lede .hero__in { transform: translateY(-105%); }
.motion .nav { opacity: 0; }

/* ---------- 2. the pass: flat default = drawing beside photograph on the tint ---------- */
.pass { padding: clamp(48px, 8vw, 120px) var(--pad) 24px; }
.pass__line, .pass__fixed { display: none; }
.proj { margin-bottom: clamp(56px, 8vw, 112px); }
.proj__cap { margin-bottom: 16px; padding-top: 12px; border-top: 1px solid var(--ink); }
.cap__a { font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.15; }
.cap__no { font-size: 13px; font-weight: 600; margin-right: .6em; vertical-align: .35em; }
.cap__b { font-size: 14px; line-height: 1.45; margin-top: 4px; }
.cap__b span { display: inline-block; margin-right: 1.4em; }
.cap__b span:empty { display: none; }
.proj__figs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.proj__d { background: var(--t); display: flex; align-items: center; justify-content: center; padding: 6%; aspect-ratio: 3 / 2; }
.proj__d picture, .proj__d img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.proj__p { aspect-ratio: 3 / 2; overflow: hidden; background: var(--t); }
.proj__p picture, .proj__p img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .proj__figs { grid-template-columns: 1fr; }
}

/* desktop motion: one stage pinned under the header; the line travels the frame; layers stack */
@media (min-width: 701px) {
  .gs .pass { padding: 0; }
  .gs .pass__stage {
    --ft: 88px; --fb: 88px; --fl: calc(var(--pad) + 26vw); --ly: 0px;
    position: relative; height: calc(100vh - var(--head)); height: calc(100svh - var(--head)); overflow: hidden;
    background: var(--ground, var(--white));
  }
  .gs .proj { position: absolute; inset: 0; margin: 0; pointer-events: none; }
  .gs .proj__figs { display: contents; }
  .gs .proj__d, .gs .proj__p { position: absolute; top: var(--ft); bottom: var(--fb); left: var(--fl); right: var(--pad); aspect-ratio: auto; }
  .gs .proj__d { padding: 3.5%; clip-path: inset(0% 0% 100% 0%); left: calc(var(--fl) - 2px); right: calc(var(--pad) - 2px); }
  .gs .proj__p { clip-path: inset(100% 0% 0% 0%); }
  .gs .pass__line { display: block; position: absolute; left: 0; right: 0; top: var(--ft); z-index: 5; transform: translateY(var(--ly)); }
  .gs .proj__cap {
    position: absolute; z-index: 6; left: var(--pad); width: calc(26vw - 32px); top: calc(var(--ft) + var(--ly));
    margin: 0; padding: 0; border: 0; opacity: 0; transition: opacity .2s;
  }
  .gs .proj.is-on .proj__cap { opacity: 1; }
  .gs .cap__a { position: absolute; left: 0; right: 0; bottom: 12px; }
  .gs .cap__b { position: absolute; left: 0; right: 0; top: 10px; margin: 0; }
  .gs .cap__b span { display: block; margin: 0; }
}

/* phone motion: the line holds still at mid-screen; each project scrolls through it */
@media (max-width: 700px) {
  .gs .pass__fixed { display: block; position: fixed; left: 0; right: 0; top: 50%; z-index: 30; opacity: 0; transition: opacity .2s; }
  .gs.in-pass .pass__fixed { opacity: 1; }
  .gs .proj { display: flex; flex-direction: column-reverse; margin-bottom: 72px; }
  .gs .proj__cap { border: 0; padding: 12px 0 4px; margin: 0; position: relative; z-index: 31; background: var(--white); }
  .gs .cap__a { font-size: 21px; }
  .gs .cap__b span { margin-right: .9em; }
  .gs .proj__figs { position: relative; display: block; aspect-ratio: 4 / 5; }
  .gs .proj__d, .gs .proj__p { position: absolute; inset: 0; aspect-ratio: auto; }
  .gs .proj__d { z-index: 2; padding: 8%; clip-path: inset(0px 0px 100% 0px); }
}

/* ---------- 3. all work on their three-column grid ---------- */
.all { padding: clamp(72px, 10vw, 160px) var(--pad) clamp(72px, 9vw, 140px); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.sec-title { font-size: 13px; font-weight: 600; }
.sec-more { font-size: 14px; }
.grid-wrap { position: relative; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gut); row-gap: 64px; }
.rules { position: absolute; inset: -24px 0 0; pointer-events: none; }
.rules i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); transform-origin: 50% 0; }
.rules i:nth-child(1) { left: 0; display: none; }
.rules i:nth-child(2) { left: calc((100% - 2 * var(--gut)) / 3 + var(--gut) / 2); }
.rules i:nth-child(3) { left: calc((100% - 2 * var(--gut)) / 3 * 2 + var(--gut) * 1.5); }
.rules i:nth-child(4) { right: 0; display: none; }
.cell { position: relative; }
.cell__link { display: block; text-decoration: none; }
.cell__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--t); margin-bottom: 14px; }
.cell__p, .cell__p img { width: 100%; height: 100%; object-fit: cover; }
.cell__d { display: none; }
.cell__name { display: block; font-size: 19px; font-weight: 500; line-height: 1.25; }
.cell__link:hover .cell__name { text-decoration: underline; }
.cell__place { display: block; font-size: 14px; margin-top: 2px; }
.cell__tags { display: flex; gap: 6px; margin-top: 10px; }
.tag { display: inline-block; padding: 3px 8px 2px; background: var(--t); font-size: 11px; font-weight: 600; }
.cell__dl { display: inline-block; margin-top: 8px; font-size: 14px; padding: 4px 0; }
.gs .cell__dl { display: none; }
.gs .cell__d { display: block; position: absolute; inset: 0; background: var(--t); padding: 6%; opacity: 0; transition: opacity .2s; }
.gs .cell__d img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gs .cell.has-d .cell__link:hover .cell__d, .gs .cell.has-d .cell__link:focus-visible .cell__d, .gs .cell.is-flipped .cell__d { opacity: 1; }
@media (max-width: 1000px) and (min-width: 701px) { .cell__name { font-size: 17px; } }
@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr; row-gap: 48px; }
  .rules { display: none; }
}

/* ---------- 4. about: the only quiet section ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); padding: clamp(72px, 9vw, 140px) var(--pad); border-top: 1px solid var(--ink); }
.about__text { max-width: 60ch; }
.about__text .sec-title { margin-bottom: 28px; }
.about__lead { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.25; font-weight: 500; margin-bottom: 32px; }
.about__text p + p { margin-top: 1.1em; }
.about__text p:not(.about__lead) { font-size: 17px; line-height: 1.6; }
.about__fig { align-self: start; }
.about__slit { aspect-ratio: 2880 / 3666; overflow: hidden; background: var(--putty); }
.about__slit img { width: 100%; height: 100%; object-fit: cover; }
.about__fig figcaption { font-size: 14px; margin-top: 10px; }
.motion .about__slit { clip-path: inset(62% 0% 38% 0%); }
@media (max-width: 700px) {
  .about { grid-template-columns: 1fr; gap: 40px; }
  .about__fig { order: -1; margin: 0 calc(var(--pad) * -1); }
  .about__fig figcaption { padding: 0 var(--pad); }
}

/* ---------- 5. contact: the page ends on the line it started with ---------- */
.contact { position: relative; min-height: 100vh; min-height: 100svh; }
.contact__above { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(100% - var(--datum) + 28px); }
.contact__line { position: absolute; left: 0; right: 0; top: var(--datum); transform-origin: 0 50%; }
.contact__below { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--datum) + 28px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; font-size: 15px; line-height: 1.55; }
.contact__above .sec-title { margin-bottom: 24px; }
.contact__intro { max-width: 40ch; font-size: clamp(17px, 1.5vw, 21px); margin-bottom: 28px; }
.contact__label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.contact__mail { font-size: clamp(30px, 5.4vw, 84px); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere; }
.contact__mail a { text-decoration-thickness: 2px; text-underline-offset: .12em; }
.contact__col a { display: inline-block; padding: 2px 0; }
@media (max-width: 700px) {
  .contact { min-height: 0; padding: 72px var(--pad) 48px; }
  .contact__above, .contact__below, .contact__line { position: static; }
  .contact__line { margin: 28px calc(var(--pad) * -1); }
  .contact__below { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .contact__mail { font-size: 9.4vw; }
}
.motion .contact__line { transform: scaleX(0); }

.foot { padding: 24px var(--pad) 32px; font-size: 13px; line-height: 1.5; border-top: 1px solid var(--ink); }
.foot p { max-width: 90ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media (min-width: 701px) { .cell:nth-child(7):last-child { grid-column: 2; } }