/* ===========================================================================
   The Karten Organization
   Caslon display + Inter, warm off-white, brass accent.

   The home page is built from full-viewport panels that snap into place.
   Every panel's content is sized to fit one screen, so nothing is clipped.
   Layout is fluid throughout: clamp(), grid, %, vw, rem — no fixed pixel
   widths anywhere except hairline borders.
   =========================================================================== */

/* ---------- fonts (self-hosted, no external requests) ---------------------- */
@font-face {
  font-family: 'Libre Caslon Display';
  src: url('../fonts/libre-caslon-display-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens -------------------------------------------------------- */
:root {
  --bg:        #faf8f4;
  --bg-alt:    #f2eee5;
  --ink:       #1a1917;
  --ink-2:     #47433b;
  --muted:     #736e63;
  --rule:      #ded7c8;
  --rule-soft: #eae4d8;
  --accent:    #96773d;
  --accent-lt: #c9a961;

  --dark:      #16150f;
  --dark-2:    #24221a;
  --dark-ink:  #f4f0e6;
  --dark-mute: #9a9382;

  --serif: 'Libre Caslon Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 58ch;
  --shell: 1440px;
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* Measured live in js/site.js; fallback matches the desktop header. */
  --header-h: 72px;

  --ease: cubic-bezier(.22, .7, .28, 1);
}

/* ---------- reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  /* Fills the window even when a page is short, so the cream background can
     never show below the black footer on a tall screen. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(.9375rem, .35vw + .85rem, 1.0625rem);
  line-height: 1.7;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

main { flex: 1 0 auto; }
main:not(.panels) { display: flex; flex-direction: column; }
.footer { flex: none; }

/* ---------- helpers ------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bg); padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: clamp(.625rem, .2vw + .58rem, .6875rem);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.eyebrow::before {
  content: '';
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.012em;
}

.lede {
  font-size: clamp(1.0625rem, .5vw + .95rem, 1.375rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* link with a rule that sweeps on hover */
.link {
  position: relative;
  display: inline-block;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: .5rem;
}
.link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.link:hover { color: var(--accent); }
.link:hover::after { transform: scaleX(0); transform-origin: right; }
.link .arw { display: inline-block; margin-left: .55rem; transition: transform .4s var(--ease); }
.link:hover .arw { transform: translateX(5px); }
.link--back .arw { margin: 0 .55rem 0 0; }
.link--back:hover .arw { transform: translateX(-5px); }

/* ---------- header -------------------------------------------------------- */
.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
.masthead__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(.85rem, 1.4vw, 1.25rem) var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
/* opaque once the page has moved, or when sitting over a dark panel */
.masthead[data-solid='true'] {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--rule-soft);
}
.masthead[data-over='dark'] { border-bottom-color: transparent; }
.masthead[data-over='dark'][data-solid='true'] {
  background: color-mix(in srgb, var(--dark) 88%, transparent);
}
.masthead[data-over='dark'] .brand span,
.masthead[data-over='dark'] .nav a { color: var(--dark-ink); }
.masthead[data-over='dark'] .nav-toggle { color: var(--dark-ink); }
.masthead[data-over='dark'] .brand img { filter: invert(1) brightness(1.6); }

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}
.brand img { width: clamp(30px, 3vw, 38px); flex: none; transition: filter .45s var(--ease); }
.brand span {
  font-family: var(--serif);
  font-size: clamp(.9375rem, 1.4vw, 1.25rem);
  letter-spacing: .012em;
  white-space: nowrap;
  transition: color .45s var(--ease);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav a {
  position: relative;
  font-size: clamp(.625rem, .2vw + .58rem, .6875rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  white-space: nowrap;
  padding-block: .25rem;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current='page']::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: .5rem;
  margin: -.5rem -.5rem -.5rem 0;
  cursor: pointer; color: var(--ink);
}
.nav-toggle svg { display: block; }
.nav-toggle span {
  display: block; width: 22px; height: 1.4px;
  background: currentColor; margin: 5px 0;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav[data-open='true'] ~ .x1 { }

@media (max-width: 860px) {
  .nav-toggle { display: block; z-index: 2; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    background: var(--bg);
    padding: 0 var(--gutter);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility .35s;
  }
  .nav[data-open='true'] { opacity: 1; visibility: visible; }
  .nav > a {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 8vw, 2.75rem);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    padding: .45rem 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
  }
  .nav[data-open='true'] > a { opacity: 1; transform: none; }
  .nav[data-open='true'] > a:nth-child(1) { transition-delay: .06s; }
  .nav[data-open='true'] > a:nth-child(2) { transition-delay: .12s; }
  .nav[data-open='true'] > a:nth-child(3) { transition-delay: .18s; }
  .nav[data-open='true'] > a:nth-child(4) { transition-delay: .24s; }
  .nav > a::after { display: none; }
  .masthead[data-over='dark'] .nav a { color: var(--ink); }
}

/* ===========================================================================
   HOME — full-viewport snap panels
   =========================================================================== */
/* Snapping is enabled only where a panel can genuinely hold its content: wide
   enough for the two-column layouts and tall enough not to clip. The .snap
   class is set by js/site.js on pages that have panels, so the document keeps
   scrolling normally everywhere else. */
@media (min-width: 861px) and (min-height: 660px) {
  html.snap { scroll-snap-type: y mandatory; }
}

.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;          /* accounts for mobile browser chrome */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  /* "safe" so that content which outgrows the panel spills downward where it can
     still be scrolled to, rather than being clipped off the top by centring. */
  align-content: safe center;
  padding-block: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem)) clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;               /* clips the oversized decorative mark */
}

/* Applied for a single frame by js/site.js while it checks whether each panel's
   content fits one screen. Collapsing the forced heights lets a panel report its
   natural content height instead of the height it has been stretched to. */
.measuring .panel { min-height: 0 !important; }
.measuring .opening { height: auto !important; }
.measuring .panel__mark,
.measuring .cue { display: none !important; }
.panel .lede { font-size: clamp(.9375rem, min(.5vw + .95rem, 2.5vh), 1.375rem); }
.panel--dark { background: var(--dark); color: var(--dark-ink); }

/* Final screen: the contact block stays optically centred while the footer line
   is pushed to the bottom edge, so the page ends just below its text. */
.panel--end { align-content: stretch; }
.panel--end > .shell { display: flex; flex-direction: column; height: 100%; }
.panel--end .contact { margin-block: auto; }
.panel--dark .eyebrow { color: var(--dark-mute); }
.panel--dark .eyebrow::before { background: var(--accent-lt); }

/* oversized mark bleeding off the edge, as texture */
.panel__mark {
  position: absolute;
  right: -8vw; bottom: -14vh;
  width: min(52vw, 640px);
  opacity: .04;
  pointer-events: none;
  user-select: none;
}
.panel--dark .panel__mark { opacity: .07; }

/* A filling panel stretches its content over the full height so children can be
   pinned to the top and bottom edges rather than clustered in the middle. */
.panel--fill {
  align-content: stretch;
  padding-block: calc(var(--header-h) + clamp(.35rem, 1.2vh, 1rem)) .75in;
}

/* ---------- panel 1: Welcome + Our Story ---------------------------------- */
.opening {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}
.opening__body { margin-top: clamp(1.75rem, 4vh, 3.25rem); }
/* Drops the headline block down the page. Capped against viewport height so it
   can't push the panel past one screen and switch snapping off — it reaches the
   full 2in on tall windows and eases back on short ones. */
.opening__head { margin-top: min(2in, 16vh); }

/* One token drives both the gap above the paragraph and the gap below it, so
   the two hairlines sit equidistant from the text at every viewport size. */
.opening { --para-gap: clamp(1.25rem, 3vh, 2rem); }
.opening .figures { margin-top: var(--para-gap); }
.opening .lede { text-align: justify; hyphens: none; }
.opening__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vh, 1.75rem);
}
.opening__word {
  font-size: clamp(2.5rem, min(13vw, 19vh), 10rem);
  margin: 0;
}
.opening__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vh, 2rem);
  align-items: center;
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  /* Column one is capped to the paragraph's own measure and the gap is zero, so
     column two begins exactly where the paragraph ends and runs to the end of
     the hairline — centring the link inside it centres it between the two. */
  .opening__body {
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vh, 2rem) 0;
  }
  .opening__body > p { justify-self: center; }
}

/* figures strip */
.figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
}
@media (min-width: 720px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figures div {
  padding: clamp(.9rem, 2.2vh, 1.6rem) clamp(.75rem, 2vw, 1.5rem);
  border-right: 1px solid var(--rule-soft);
}
.figures div:first-child { padding-left: 0; }
@media (max-width: 719px) {
  .figures div:nth-child(2n) { border-right: 0; }
  .figures div:nth-child(2n+1) { padding-left: 0; }
  .figures div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
}
@media (min-width: 720px) { .figures div:last-child { border-right: 0; } }
.figures dt {
  font-family: var(--serif);
  font-size: clamp(1.25rem, min(3.4vw, 5vh), 2.625rem);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.figures dd {
  margin: .6rem 0 0;
  font-size: clamp(.5625rem, .2vw + .52rem, .6875rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.45;
}

/* ---------- panel 2: Departments (dark) ----------------------------------- */
.panelhead {
  display: grid;
  gap: clamp(.75rem, 2vh, 1.25rem);
  margin-bottom: clamp(1.75rem, 5vh, 3.5rem);
}
.panelhead h2,
.panelhead__h {
  font-size: clamp(1.75rem, min(6vw, 9vh), 4rem);
  max-width: 20ch;
}
.panelhead__h { margin: clamp(.75rem, 2vw, 1.25rem) 0 clamp(1rem, 2.5vh, 1.5rem); }

.deptlist { border-top: 1px solid var(--dark-2); }
.deptrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(.85rem, 2.4vh, 1.6rem) 0;
  border-bottom: 1px solid var(--dark-2);
}
@media (min-width: 900px) {
  .deptrow { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.6fr); }
}
.deptrow__no {
  font-size: clamp(.625rem, .2vw + .58rem, .6875rem);
  letter-spacing: .16em;
  color: var(--accent-lt);
  font-variant-numeric: tabular-nums;
}
.deptrow h3 {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, min(2.6vw, 4vh), 2.125rem);
  line-height: 1.15;
}
.deptrow p {
  grid-column: 2 / -1;
  font-size: clamp(.875rem, .3vw + .8rem, 1rem);
  color: var(--dark-mute);
  max-width: 46ch;
}
@media (min-width: 900px) {
  .deptrow p { grid-column: 3; max-width: none; }
}

/* ---------- panel 3: Contact ---------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 5vh, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 7vw, 6.5rem);
  }
}
.office { margin-top: clamp(1.5rem, 4vh, 2.75rem); }
.office address { font-style: normal; color: var(--ink-2); line-height: 1.75; }

.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(1rem, 3vw, 2rem);
}
@media (min-width: 560px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
}
.field { display: block; margin-bottom: clamp(1rem, 2.6vh, 1.6rem); }
.field span {
  display: block;
  font-size: clamp(.5625rem, .2vw + .52rem, .6875rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
}
.field input, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: .55rem 0;
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field textarea { resize: vertical; min-height: clamp(4rem, 12vh, 6.5rem); }

.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: clamp(.85rem, 2vh, 1.1rem) clamp(2rem, 5vw, 3rem);
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }

.hp { position: absolute; left: -9999px; }

/* slim footer sitting inside the contact panel */
.endbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(1.75rem, 5vh, 3.5rem);
  padding-top: clamp(1rem, 2.5vh, 1.75rem);
  border-top: 1px solid var(--rule);
  font-size: clamp(.6875rem, .25vw + .63rem, .8125rem);
  color: var(--muted);
}
.endbar nav { display: flex; flex-wrap: wrap; gap: clamp(.85rem, 2.5vw, 1.75rem); }
.endbar a { text-decoration: none; transition: color .3s var(--ease); }
.endbar a:hover { color: var(--accent); }

/* ---------- panel indicator ----------------------------------------------- */
.dots {
  position: fixed;
  right: clamp(1rem, 2.2vw, 2.25rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 861px) and (min-height: 660px) {
  html.snap .dots { display: flex; }
}
.dots a {
  display: block;
  width: 26px; height: 1px;
  background: var(--ink);
  opacity: .22;
  transition: opacity .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
  transform-origin: right;
}
.dots a:hover { opacity: .6; }
.dots a[aria-current='true'] { opacity: 1; transform: scaleX(1.7); background: var(--accent); }
.dots[data-over='dark'] a { background: var(--dark-ink); }
.dots[data-over='dark'] a[aria-current='true'] { background: var(--accent-lt); }
.dots span {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

/* scroll cue on the first panel */
.cue {
  position: absolute;
  left: 50%; bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  display: grid;
  justify-items: center;
  gap: .5rem;
  pointer-events: none;
}
.cue i {
  display: block; width: 1px; height: clamp(1.5rem, 4vh, 2.5rem);
  background: linear-gradient(var(--rule), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-height: 700px) { .cue { display: none; } }

/* ===========================================================================
   Interior pages
   =========================================================================== */
.pagehead {
  /* a quarter inch of air between the fixed menu bar and the page title */
  padding-block: calc(var(--header-h) + .25in) clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.pagehead h1 {
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  max-width: 16ch;
}
/* only needed to clear a label above it — pages without one sit flush */
.pagehead .eyebrow + h1 { margin-top: clamp(.75rem, 2vw, 1.25rem); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--tighter { padding-top: calc(var(--section-y) - .25in); }
/* fills the space between the page title and the footer, content centred */
.section--center { flex: 1; display: grid; align-content: safe center; }
/* sits an inch above true centre. A relative offset, not a margin — a margin
   would grow the section and push the page taller instead of moving anything. */
.section--center > .shell { position: relative; top: -1in; }
.section--dark { background: var(--dark); color: var(--dark-ink); }
.section--dark .eyebrow { color: var(--dark-mute); }
.section--dark .eyebrow::before { background: var(--accent-lt); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
  }
  .split > :first-child { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.5em; }
.prose h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.18;
}
.prose p { color: var(--ink-2); }

.checklist { margin-top: 1.5em; }
.checklist li {
  position: relative;
  padding: clamp(.7rem, 1.8vw, 1rem) 0 clamp(.7rem, 1.8vw, 1rem) 2.25rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-2);
}
.checklist li:last-child { border-bottom: 1px solid var(--rule-soft); }
.checklist li::before {
  content: '';
  position: absolute;
  left: .25rem; top: 1.5em;
  width: 1rem; height: 1px;
  background: var(--accent);
}

/* ---------- projects ------------------------------------------------------ */
.projectgroup + .projectgroup { margin-top: clamp(3rem, 8vw, 6rem); }
.projectgroup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ink);
  margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}
.projectgroup__head h2 {
  font-size: clamp(.6875rem, .3vw + .62rem, .8125rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.projects--one { grid-template-columns: minmax(0, 1fr); }

/* Two project groups shown side by side, each with its own heading rule. */
.grouppair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 900px) { .grouppair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.projectgroup + .grouppair { margin-top: clamp(3rem, 8vw, 6rem); }
.grouppair .projectgroup + .projectgroup { margin-top: 0; }

/* text-only entry, sitting under the photographed one above it */
.projectnote {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule-soft);
}
.projectnote h3 {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: 1.25;
  margin-bottom: .4rem;
}
.projectnote p { font-size: clamp(.8125rem, .3vw + .75rem, .9375rem); color: var(--muted); }
.projectnote p + p { margin-top: .3rem; }
.project { display: flex; }
.project figure { margin: 0; display: flex; flex-direction: column; width: 100%; }
.project__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--rule-soft);
}
.project__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.project:hover .project__img img { transform: scale(1.04); }
.project figcaption { padding-top: 1.1rem; }
.project h3 {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: 1.25;
  margin-bottom: .4rem;
}
.project p { font-size: clamp(.8125rem, .3vw + .75rem, .9375rem); color: var(--muted); }
.project p + p { margin-top: .3rem; }
.project--text .project__img { border-color: transparent; background: transparent; }
@media (max-width: 640px) { .project--text .project__img { display: none; } }

.partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
@media (min-width: 900px) { .partners { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .partners { grid-template-columns: 1fr; } }
.partners img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--bg);
  filter: grayscale(1) contrast(.94);
  opacity: .85;
  transition: filter .6s var(--ease), opacity .6s var(--ease), transform .7s var(--ease);
}
.partners img:hover { filter: none; opacity: 1; transform: scale(1.03); }

.bignum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem clamp(.75rem, 2vw, 1.25rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.bignum strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  line-height: .95;
  font-variant-numeric: lining-nums tabular-nums;
}
.bignum span { font-size: clamp(.875rem, .3vw + .8rem, 1rem); color: var(--muted); }

/* ---------- interior footer ----------------------------------------------
   Same single row as the home page (wordmark / links / address), on black.  */
.footer {
  --footer-pad: clamp(1rem, 2.4vw, 26px);
  background: var(--dark);
  padding-block: var(--footer-pad);
}
.footer .endbar {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  color: #cfcabd;
}
.footer .endbar a { color: #cfcabd; }
.footer .endbar a:hover { color: var(--dark-ink); }

/* ---------- confirmation / 404 -------------------------------------------- */
.confirm {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--header-h) + var(--section-y)) var(--section-y);
}
.confirm h1 { font-size: clamp(2rem, 6vw, 4rem); margin-block: 1rem 1.75rem; }

/* ===========================================================================
   Motion — every rule scoped to .js so the page is complete without it
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js .is-in [data-rise],
  .js [data-rise].is-in { opacity: 1; transform: none; }

  .js [data-draw] {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js .is-in [data-draw],
  .js [data-draw].is-in { transform: scaleX(1); }
}

@media print {
  .masthead, .footer, .nav-toggle, .dots, .cue, .panel__mark { display: none; }
  body { background: #fff; }
  .panel { min-height: 0; page-break-after: always; }
}