/* Clerestory: limewash, iron, laurel. One theme, locked light (print-editorial). */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--day-ground);
  color: var(--iron);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.04; }
p { margin: 0; }

::selection { background: var(--laurel); color: var(--limewash); }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--laurel); outline-offset: 3px; }

.skip-link {
  position: fixed; top: -3rem; left: var(--gutter);
  z-index: var(--z-skip);
  background: var(--iron); color: var(--limewash);
  padding: 0.6rem 1rem; text-decoration: none; font-size: var(--text-small);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Navigation ---------- */

.site-nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
  padding: 0 var(--gutter);
  color: var(--iron);
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.site-nav.is-scrolled {
  background: color-mix(in srgb, var(--day-ground) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--hairline);
}

/* ---------- The travelling rule (the band of light, small) ---------- */

.day-rule {
  position: fixed;
  left: 0;
  top: 38vh;
  width: 44px;
  height: 2px;
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
}
.day-rule-core {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background: var(--day-glow);
  box-shadow: 0 0 10px 1px var(--day-glow);
  opacity: 0.9;
}
.day-rule.is-passing { opacity: 0; }

/* Captions and titles ignite as the rule passes them */
[data-ignite] { position: relative; transition: color 0.5s var(--ease-out); }
[data-ignite]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 30px;
  height: 1px;
  background: var(--day-glow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
}
[data-ignite].is-ignited::after {
  transform: scaleX(1);
  box-shadow: 0 0 8px 0 var(--day-glow);
}
.project-place[data-ignite].is-ignited,
.material-caption[data-ignite].is-ignited { color: var(--iron); }

.wordmark {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  padding-top: 6px;
}
.wordmark-band {
  position: absolute; top: 0; left: 2px;
  width: 2.2em; height: 1px;
  background: currentColor; opacity: 0.85;
}

.site-nav nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.site-nav nav a {
  font-size: var(--text-small); font-weight: 500;
  letter-spacing: 0.02em; text-decoration: none;
  opacity: 0.92;
}
.site-nav nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.nav-cta { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.nav-cta:hover { border-bottom-width: 2px; }

@media (max-width: 700px) {
  .site-nav nav a:not(.nav-cta) { display: none; }
  /* Backdrop blur sampling the live cloth flickers on phone compositors;
     the bar reads near-solid there and keeps the same legibility */
  .site-nav.is-scrolled {
    background: color-mix(in srgb, var(--day-ground) 97%, transparent);
    backdrop-filter: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: flex-end;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-cloth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.hero-cloth.is-live { opacity: 1; }
.hero-video.is-replaced { visibility: hidden; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(244, 242, 238, 0.72), rgba(244, 242, 238, 0.18) 38%, rgba(244, 242, 238, 0) 55%);
}
.hero-inner {
  position: relative;
  padding: 0 var(--gutter) clamp(3rem, 9vh, 6rem);
  color: var(--iron);
  max-width: 60rem;
}
.hero-title { font-size: var(--text-hero); font-weight: 400; letter-spacing: -0.01em; }
.hero-sub {
  margin-top: var(--space-md);
  max-width: 26em;
  font-size: var(--text-body);
  opacity: 0.94;
}
.hero .cta { margin-top: var(--space-md); }

/* ---------- CTA styles (one intent, one look) ---------- */

.cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-small); font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 1px solid currentColor;
  transition: letter-spacing 0.35s var(--ease-out);
}
.cta:hover { letter-spacing: 0.09em; }
.cta:active { transform: translateY(1px); }

.cta-solid {
  background: var(--laurel);
  color: var(--limewash);
  padding: 1rem 2.2rem;
  border-bottom: none;
}
.cta-solid:hover { background: var(--laurel-bright); }

/* ---------- Hero video control ---------- */

.hero-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.5rem, 4.5vh, 3rem);
  z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: color-mix(in srgb, var(--limewash) 78%, transparent);
  backdrop-filter: blur(6px);
  color: var(--iron);
  cursor: pointer;
}
.hero-toggle:hover { background: var(--limewash); }
.hero-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.hero-toggle .icon-play { display: none; }
.hero-toggle[data-paused="true"] .icon-pause { display: none; }
.hero-toggle[data-paused="true"] .icon-play { display: block; }

/* ---------- Manifesto ---------- */

.manifesto {
  padding: var(--space-section) var(--gutter);
  padding-left: clamp(var(--gutter), 12vw, 14rem);
}
.manifesto-title { font-size: var(--text-h2); max-width: 14em; }
.manifesto-title em { font-style: italic; font-weight: 400; }
.manifesto-body {
  margin-top: var(--space-lg);
  max-width: var(--measure);
  color: var(--iron-soft);
}

/* ---------- Work ---------- */

.work { padding: var(--space-section) var(--gutter); }
.section-title { font-size: var(--text-h3); font-weight: 500; letter-spacing: 0.01em; }

.project {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
  align-items: end;
  margin-top: var(--space-section);
}
.work .section-title + .project { margin-top: var(--space-lg); }

.project-a .project-media { grid-column: 1 / 9; }
.project-a .project-text  { grid-column: 10 / 13; padding-bottom: 0.5rem; }

.project-b { align-items: start; }
.project-b .project-media { grid-column: 6 / 12; grid-row: 1; }
.project-b .project-text  { grid-column: 1 / 5; grid-row: 1; align-self: end; }

.project-c .project-media { grid-column: 2 / 7; }
.project-c .project-text  { grid-column: 8 / 12; padding-bottom: 0.5rem; }

.project-media { margin: 0; }
.project h3 { font-size: var(--text-h3); }
.project-place { margin-top: 0.5rem; font-size: var(--text-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--iron-soft); }
.project-note { margin-top: var(--space-sm); color: var(--iron-soft); max-width: 26em; }

/* ---------- Frames: the day grades and shadows every image ---------- */

.frame {
  position: relative;
  overflow: hidden;
  background: var(--limewash-deep);
  box-shadow: var(--day-shadow-x) 22px 44px -20px rgba(27, 27, 25, var(--day-shadow-a));
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--day-veil);
  opacity: var(--day-veil-a);
  pointer-events: none;
}

/* X-ray: the architect's drawing beneath each photograph, revealed in a soft
   band where the travelling rule crosses the frame, or where the pointer rests */
.frame .xray {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--xray-on, 0);
  transition: opacity 0.45s var(--ease-out);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent calc(var(--xray-y, 50%) - 15%),
    #000 calc(var(--xray-y, 50%) - 5%),
    #000 calc(var(--xray-y, 50%) + 5%),
    transparent calc(var(--xray-y, 50%) + 15%)
  );
  mask-image: linear-gradient(
    180deg,
    transparent calc(var(--xray-y, 50%) - 15%),
    #000 calc(var(--xray-y, 50%) - 5%),
    #000 calc(var(--xray-y, 50%) + 5%),
    transparent calc(var(--xray-y, 50%) + 15%)
  );
}
.frame .xray-line {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--xray-y, 50%);
  height: 1.5px;
  transform: translateY(-50%);
  background: var(--day-glow);
  box-shadow: 0 0 12px 1px var(--day-glow);
  opacity: calc(var(--xray-on, 0) * 0.8);
  transition: opacity 0.45s var(--ease-out);
  z-index: 3;
  pointer-events: none;
}

/* ---------- The clerestory moment: the rule becomes the high band of windows ----------
   Static CSS is the finished tableau (no-JS, reduced motion); the scrubbed
   expansion is layered on by JS with transforms only. */

.clerestory-moment {
  position: relative;
  min-height: 100dvh;
  background: #201f1c;
  overflow: hidden;
}
.moment-hairline {
  position: absolute;
  left: 0;
  bottom: 62vh;
  width: 44px;
  height: 2px;
  border-radius: 1px;
  background: var(--day-glow);
  box-shadow: 0 0 10px 1px var(--day-glow);
  opacity: 0;
  will-change: transform;
}
.moment-band {
  position: absolute;
  left: 0;
  bottom: 62vh;
  width: 100%;
  height: 16vh;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--day-glow) 45%, #ffffff) 0%,
    color-mix(in srgb, var(--day-glow) 80%, #ffffff) 34%,
    var(--day-glow) 72%,
    color-mix(in srgb, var(--day-glow) 78%, #6b5a42) 100%
  );
  box-shadow:
    0 0 70px 10px color-mix(in srgb, var(--day-glow) 55%, transparent),
    0 0 20px 2px color-mix(in srgb, var(--day-glow) 70%, transparent);
  transform-origin: center bottom;
}
.moment-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(11vw - 3px),
    rgba(24, 23, 20, 0.5) calc(11vw - 3px),
    rgba(24, 23, 20, 0.5) 11vw
  );
  opacity: var(--mullion-a, 1);
}
.moment-spill {
  position: absolute;
  left: 0;
  bottom: 16vh;
  width: 100%;
  height: 46vh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--day-glow) 26%, transparent), transparent 78%);
  pointer-events: none;
}
.moment-def {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 33vh;
  margin-inline: auto;
  width: min(34em, calc(100% - 2 * var(--gutter)));
  text-align: center;
  color: var(--limewash);
}
.moment-def .definition-word { color: var(--day-glow); }

/* ---------- Material study (3D) ---------- */

.study {
  padding: var(--space-section) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
}
.study-copy { grid-column: 1 / 5; align-self: center; }
.study-copy p { margin-top: var(--space-md); color: var(--iron-soft); max-width: 20em; }
.study-stage { grid-column: 6 / 13; }
.study-canvas {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  background: var(--limewash-deep);
  box-shadow: var(--day-shadow-x) 22px 44px -20px rgba(27, 27, 25, var(--day-shadow-a));
}
.study-caption {
  margin-top: var(--space-sm);
  font-size: var(--text-micro);
  color: var(--iron-soft);
}
.study.no-webgl .study-stage { display: none; }
.study.no-webgl .study-copy { grid-column: 1 / 9; }

/* ---------- Materials band ---------- */

.materials { padding: var(--space-section) var(--gutter); }
.materials-band {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.materials-band li:nth-child(2) { transform: translateY(var(--space-lg)); }
.materials-band .frame { aspect-ratio: 2 / 3; }
.material-caption { margin-top: 0.9rem; font-size: var(--text-small); color: var(--iron-soft); }

/* ---------- How we work ---------- */

.process { padding: var(--space-section) var(--gutter); }
.process-steps {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.process-step {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
}
.process-step h3 {
  font-size: 1.45rem;
  font-weight: 500;
}
.process-step p {
  margin-top: var(--space-sm);
  color: var(--iron-soft);
  max-width: 30em;
}

/* ---------- Studio ---------- */

.studio {
  padding: var(--space-section) var(--gutter);
  padding-left: clamp(var(--gutter), 12vw, 14rem);
}
.studio-body { margin-top: var(--space-lg); max-width: var(--measure); }
.studio-body p + p { margin-top: var(--space-md); }
.definition-word { font-family: var(--font-display); font-style: italic; font-size: 1.15em; }

/* ---------- Close ---------- */

.close {
  position: relative;
  min-height: 88dvh;
  display: flex; align-items: center; justify-content: flex-end;
  overflow: hidden;
}
.close-media { position: absolute; inset: 0; }
.close-media img { width: 100%; height: 100%; object-fit: cover; }
.close-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(280deg, rgba(244, 242, 238, 0.5), rgba(244, 242, 238, 0) 55%);
}
.close-inner { position: relative; padding: var(--space-section) var(--gutter); color: var(--iron); max-width: 44rem; }
.close-title { font-size: var(--text-h2); }
.close .cta-solid { margin-top: var(--space-lg); }

/* ---------- Footer ---------- */

.site-footer {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-lg) var(--gutter);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small);
  color: var(--iron-soft);
}
.footer-mark { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--iron); }
.footer-mail { text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.footer-mail:hover { color: var(--iron); border-color: currentColor; }
.concept-link { color: inherit; text-decoration: none; }
.concept-link:hover { text-decoration: underline; }

/* ---------- Reveals ---------- */

.js [data-reveal], .js [data-reveal-media] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .is-inview[data-reveal], .js .is-inview[data-reveal-media] {
  opacity: 1;
  transform: none;
}

[data-reveal-lines] .line { display: block; overflow: hidden; }
.js [data-reveal-lines] .line > span {
  display: block;
  transform: translateY(112%);
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--line-index, 0) * 120ms);
}
.js .is-inview[data-reveal-lines] .line > span { transform: none; }

/* ---------- Responsive collapse ---------- */

@media (max-width: 900px) {
  .process-steps { grid-template-columns: 1fr; gap: var(--space-md); }
  .project,
  .study { display: block; }
  .project-media, .project-text { grid-column: auto; }
  .project-text { margin-top: var(--space-sm); max-width: 32em; }
  .project { margin-top: var(--space-lg); }
  .study-copy { max-width: 32em; }
  .study-stage { margin-top: var(--space-lg); }
  .materials-band { grid-template-columns: 1fr; }
  .materials-band li:nth-child(2) { transform: none; }
  .materials-band li + li { margin-top: var(--space-lg); }
  .manifesto, .studio { padding-left: var(--gutter); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-media], .js [data-reveal-lines] .line > span {
    opacity: 1; transform: none; transition: none;
  }
  .day-rule { display: none; }
  .frame .xray, .frame .xray-line { display: none; }
  [data-ignite], [data-ignite]::after { transition: none; }
  .cta, .site-nav, .skip-link { transition: none; }
}