/* Layout: a dark, quiet frame around one image (the rope tree); credits-style labels carry the structure. */
:root {
  --ground: #161d18;      /* page, deep forest shade from the image's edges */
  --ground-2: #1e2820;    /* raised panels */
  --hemp: #e9dcc4;        /* primary text, the rope's pale fibre */
  --hemp-dim: #a9a08c;    /* secondary text */
  --copper: #c98a5a;      /* accent, the rope's warm core */
  --rule: #2f3b31;        /* hairlines */
  --sage: #7d9a82;        /* small status marks */

  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-label: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.25rem, 5vw, 3.25rem);
  --step-4: clamp(2.75rem, 8vw, 5.5rem);

  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--hemp);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.65;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; max-width: 62ch; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.label {
  font-family: var(--f-label);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hemp-dim);
}

/* Header */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 2rem; padding-block: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand-mark { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; object-position: 50% 45%; border: 1px solid var(--rule); }
.brand-name { font-family: var(--f-display); font-size: var(--step-1); letter-spacing: 0.02em; }
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav a { font-family: var(--f-label); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--hemp-dim); padding-block: 0.25rem; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--hemp); border-bottom-color: var(--copper); }

/* Hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 70%, transparent) 38%, transparent 70%),
              linear-gradient(0deg, var(--ground) 0%, transparent 35%);
}
.hero .wrap { position: relative; display: grid; gap: 1.5rem; padding-block: clamp(6rem, 18vw, 12rem) clamp(3rem, 8vw, 5rem); }
.hero h1 { font-size: var(--step-4); max-width: 12ch; }
.hero h1 em { font-style: italic; color: var(--copper); }
.hero p { color: var(--hemp-dim); font-size: var(--step-1); line-height: 1.5; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; padding-top: 0.5rem; }

.btn {
  display: inline-block; font-family: var(--f-label); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; padding: 0.85rem 1.4rem; border: 1px solid var(--copper); color: var(--ground); background: var(--copper);
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: transparent; color: var(--copper); }
.link-arrow { font-family: var(--f-label); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--hemp); }
.link-arrow::after { content: " \2192"; color: var(--copper); }
.link-arrow:hover { color: var(--copper); }

/* Sections */
.section { padding-block: clamp(3.5rem, 9vw, 6rem); border-bottom: 1px solid var(--rule); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head h2 { font-size: var(--step-3); }
.section-head > div { display: grid; gap: 0.75rem; }

/* Disciplines: three columns, each a strand */
.strands { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.strand { padding: 2rem 1.5rem 2rem 0; display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.strand + .strand { border-left: 1px solid var(--rule); padding-left: 1.5rem; }
.strand h3 { font-size: var(--step-2); }
.strand p { color: var(--hemp-dim); }
@media (max-width: 48rem) {
  .strand { padding-right: 0; }
  .strand + .strand { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
}

/* Statement */
.statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem 4rem; align-items: start; }
.statement blockquote { margin: 0; font-family: var(--f-display); font-size: var(--step-3); line-height: 1.15; font-style: italic; text-wrap: balance; }
.statement .body { display: grid; gap: 1rem; color: var(--hemp-dim); }
@media (max-width: 48rem) { .statement { grid-template-columns: 1fr; } }

/* Project slate cards */
.slates { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; }
.slate { display: grid; grid-template-rows: auto 1fr; text-decoration: none; background: var(--ground-2); border: 1px solid var(--rule); transition: border-color 0.2s; min-width: 0; }
.slate:hover { border-color: var(--copper); }
.slate-art { aspect-ratio: 16 / 9; max-width: 100%; background: var(--rule); position: relative; overflow: hidden; }
.slate-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) brightness(0.55); }
.slate-art .label { position: absolute; left: 1rem; bottom: 0.75rem; color: var(--hemp); }
.slate-body { display: grid; gap: 0.6rem; padding: 1.25rem 1.25rem 1.5rem; align-content: start; }
.slate-body h3 { font-size: var(--step-2); }
.slate-body p { color: var(--hemp-dim); font-size: 0.95rem; }

/* Slate credit table: key/value pairs like a clapperboard */
.credits { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; font-size: 0.9rem; }
.credits dt { font-family: var(--f-label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hemp-dim); padding-top: 0.2rem; }
.credits dd { margin: 0; }

.status { display: inline-flex; align-items: center; gap: 0.5rem; }
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sage); }

/* Page heads for inner pages */
.page-head { padding-block: clamp(4rem, 10vw, 7rem) clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--rule); }
.page-head .wrap { display: grid; gap: 1.25rem; }
.page-head h1 { font-size: var(--step-4); }
.page-head p { color: var(--hemp-dim); font-size: var(--step-1); line-height: 1.5; }

/* Filters on projects page */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filters button {
  font-family: var(--f-label); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: var(--hemp-dim); border: 1px solid var(--rule); padding: 0.55rem 1rem; cursor: pointer;
}
.filters button[aria-pressed="true"] { color: var(--hemp); border-color: var(--copper); }

/* Project detail */
.project-hero { aspect-ratio: 21 / 9; max-width: 100%; overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--ground-2); }
.project-hero img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.6); }
.project-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem 4rem; }
.project-layout .body { display: grid; gap: 1.25rem; color: var(--hemp-dim); }
.project-layout .body h2 { color: var(--hemp); font-size: var(--step-2); padding-top: 1rem; }
.project-layout aside { border-top: 1px solid var(--copper); padding-top: 1.25rem; align-self: start; }
@media (max-width: 48rem) { .project-layout { grid-template-columns: 1fr; } }

/* Partners */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.partner { aspect-ratio: 3 / 2; max-width: 100%; display: grid; place-items: center; text-align: center; padding: 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--hemp-dim); }
.partner span { display: block; }

/* Team */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2rem; }
.person { display: grid; gap: 0.75rem; align-content: start; }
.person .portrait { aspect-ratio: 4 / 5; max-width: 100%; background: var(--ground-2); border: 1px solid var(--rule); display: grid; place-items: center; }
.person h3 { font-size: var(--step-2); }
.person p { color: var(--hemp-dim); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 3rem 4rem; }
.contact-list { display: grid; gap: 1.75rem; }
.contact-list div { display: grid; gap: 0.35rem; }
.contact-list .value { font-family: var(--f-display); font-size: var(--step-2); user-select: all; word-break: break-word; }
form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.4rem; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--hemp); background: var(--ground-2); border: 1px solid var(--rule); padding: 0.8rem 0.9rem; width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.form-note { color: var(--hemp-dim); font-size: 0.9rem; }
@media (max-width: 48rem) { .contact-grid { grid-template-columns: 1fr; } }

/* CTA band */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.cta h2 { font-size: var(--step-3); max-width: 18ch; }

/* Footer */
.site-footer { padding-block: 3rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.site-footer p { color: var(--hemp-dim); font-size: 0.9rem; }

/* Load-in: the hero is visible at rest; motion only refines it */
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: settle 2.4s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes settle { from { transform: scale(1.06); filter: brightness(0.7); } to { transform: none; filter: none; } }
}

@media (max-width: 48rem) {
  .hero-media::after { background: linear-gradient(0deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 72%, transparent) 60%, color-mix(in srgb, var(--ground) 40%, transparent) 100%); }
  .nav { gap: 0.25rem 1rem; }
}

/* Homepage hero: one video that carries its own backdrop. The clip was extended (top, floor and sides)
   from its own edge pixels, so nothing in CSS has to match its colors. The frame is 2400 x 1128 with the
   original 1344 x 768 picture in the middle; at most widths the sides are cropped and only the core shows. */
.hero--logo { background: var(--ground); border-bottom: 0; }
.hero-stage { position: relative; }
.hero-logo {
  position: relative; margin: 0; width: 100%;
  /* The core's height (1128 / 1344 of the width), kept within the window below the header and never so short that the tree is cropped. */
  height: clamp(26rem, min(83.93vw, calc(100svh - 4.3rem)), 70.5rem);
  overflow: hidden; background: var(--ground); container-type: size;
}
.hero-logo video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-logo .hero-actions {
  position: absolute; left: 0; right: 0; bottom: 3.5%;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; padding: 0 var(--gutter);
}
.btn--ghost { background: color-mix(in srgb, var(--ground) 55%, transparent); color: var(--hemp); border-color: color-mix(in srgb, var(--hemp) 45%, transparent); }
.btn--ghost:hover { background: var(--ground); color: var(--hemp); border-color: var(--copper); }
.replay {
  position: absolute; right: var(--gutter); top: 4%;
  font-family: var(--f-label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hemp); background: color-mix(in srgb, var(--ground) 55%, transparent); border: 1px solid var(--rule);
  padding: 0.4rem 0.75rem; cursor: pointer;
}
.replay:hover { border-color: var(--copper); }

/* Title in the clear band above the canopy (the top 240 of 1128 rows). */
.hero-title {
  position: absolute; left: 0; right: 0; top: 0; height: 21.3%; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 0.4%;
  font-family: "Cinzel", "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 0.95;
  color: #efe3c8;
  text-shadow: 0 0.04em 0.08em rgba(20, 28, 20, 0.45);
  pointer-events: none;
}
.hero h1.hero-title { max-width: none; }
.ht-line { display: block; white-space: nowrap; }
.ht-main { font-size: min(6.2vw, 5.2rem); font-size: min(7.4cqh, 12cqw); letter-spacing: 0.15em; margin-right: -0.15em; }
.ht-sub { font-size: min(2.5vw, 2.1rem); font-size: min(2.9cqh, 4.8cqw); letter-spacing: 0.34em; margin-right: -0.34em; padding-top: 0.2em; }
.ht-letter { display: inline-block; opacity: 0; }
.hero-title.is-grown .ht-letter { opacity: 1; }
@media (max-width: 30rem) {
  .hero-logo .hero-actions { gap: 0.5rem; }
  .hero-logo .hero-actions .btn { padding: 0.65rem 0.9rem; letter-spacing: 0.08em; }
}

.section-head .title-statement { font-size: var(--step-4); max-width: 14ch; }
.title-statement em { font-style: italic; color: var(--copper); }

/* Real project art shows at full colour; placeholders stay dimmed. */
.slate-art img.is-art, .project-hero img.is-art { filter: none; }
.slate-art:has(img.is-art) .label { background: color-mix(in srgb, var(--ground) 75%, transparent); padding: 0.2rem 0.5rem; }
.page-head .hero-actions { padding-top: 0.75rem; }
.project-layout .body a { color: var(--hemp); text-decoration-color: var(--copper); }
.trailer { display: block; width: 100%; max-width: 22rem; aspect-ratio: 9 / 16; background: #0f0a19; border: 1px solid var(--rule); }
.fineprint { font-size: var(--step--1); color: var(--hemp-dim); opacity: 0.8; }
.credits dd a { color: inherit; text-decoration-color: var(--copper); }
.page-head h1 .part { font-style: italic; color: var(--copper); white-space: nowrap; }
.alt-title { font-family: var(--f-display); font-style: italic; color: var(--hemp-dim); margin-top: -0.25rem; }
.cast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.cast figure { margin: 0; }
.cast img { display: block; width: 100%; aspect-ratio: 1414 / 2000; object-fit: cover; border: 1px solid var(--rule); }
.cast figcaption { padding-top: 0.75rem; font-size: var(--step--1); color: var(--hemp-dim); }
.cast figcaption strong { display: block; font-family: var(--f-display); font-size: var(--step-1); font-weight: 500; color: var(--hemp); }
@media (max-width: 48rem) { .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Typographic title card for projects without art yet: murram road at dusk. */
.title-card {
  display: grid; place-items: center; position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(201, 110, 60, 0.55), transparent 70%),
    linear-gradient(180deg, #1b1512 0%, #2a1a12 55%, #4a2616 100%);
}
.title-card .tc-inner { display: grid; justify-items: center; gap: 0.6em; text-align: center; font-size: clamp(0.7rem, 1.6vw, 1.4rem); }
.slate-art.title-card .tc-inner { font-size: clamp(0.55rem, 1vw, 0.85rem); }
.tc-kicker { font-family: var(--f-label); font-size: 0.75em; letter-spacing: 0.3em; text-transform: uppercase; color: #d9a77c; }
.tc-title { font-family: var(--f-display); font-weight: 600; font-size: 4.2em; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hemp); }
.tc-road { width: 9em; height: 2px; background: linear-gradient(90deg, transparent, var(--copper), transparent); }
.tc-title { white-space: nowrap; }
.slate-art.title-card .tc-title { font-size: 3em; }
.page-head h1 .part.is-note { font-size: 0.45em; vertical-align: 0.35em; margin-left: 0.3em; }
.project-hero video { display: block; width: 100%; height: 100%; object-fit: cover; }
.features { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.features li::marker { color: var(--copper); }
.project-hero--banner { aspect-ratio: 3 / 1; background: #110d1c; }
.value a { color: inherit; text-decoration-color: var(--copper); }