/* ============================================================================
   Maria Nehme — Interior Architect
   base.css

   1. Tokens  (:root — retheme the entire site from here)
   2. Reset & base type
   3. Layout shell (rail + main)
   4. Sections
   5. Work: filters, masonry, cards
   6. Overlay gallery
   7. Contact
   8. Motion & reduced-motion
   9. Responsive
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* Colour — warm, light, low contrast. Never pure black on cream. */
  --bg:           #fffbf5;
  --surface:      #f7f1e6;
  --text:         #2b2520;
  --muted:        #6b6157;
  --faint:        #9a9186;
  --line:         #e8dfd2;
  --line-strong:  #d6c9b6;
  --accent:       #9c8667;
  --accent-dim:   #c4b49a;

  /* Placeholder tones — remove once real imagery is in place. */
  --tone-1: #efe7d8;
  --tone-2: #e9e0d0;
  --tone-3: #f2ebdd;
  --tone-4: #ece3d3;
  --tone-doc: #fffdf9;   /* ground for drawings — lighter than photography */

  /* Type families */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale */
  --fs-hero:    clamp(3.25rem, 9vw, 7.5rem);
  --fs-h2:      clamp(2rem, 4vw, 3.25rem);
  --fs-h3:      clamp(1.375rem, 2vw, 1.75rem);
  --fs-lead:    clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body:    1rem;
  --fs-small:   0.8125rem;
  --fs-label:   0.65625rem;      /* 10.5px */

  --lh-tight:   1.06;
  --lh-heading: 1.15;
  --lh-body:    1.75;

  --ls-label:   0.13em;
  --ls-display: 0.005em;

  /* Weights */
  --w-display:  300;
  --w-display-em: 400;
  --w-body:     300;
  --w-body-em:  400;
  --w-label:    400;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 11rem;

  /* Measure & shell */
  --measure:      64rem;    /* content cap inside main */
  --measure-text: 34rem;    /* prose cap */
  --rail-w:       17.5rem;
  --gutter:       clamp(1.25rem, 4vw, 4.5rem);

  /* Motion */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-1: 200ms;
  --dur-2: 380ms;
  --dur-3: 620ms;
  --dur-4: 900ms;

  /* Radii — near-square; this is a print register, not an app */
  --r-1: 1px;
  --r-2: 3px;
  --r-pill: 999px;

  --hair: 1px;
}

/* ------------------------------------------------- 2. RESET & BASE TYPE */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--text); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: var(--hair) solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent-dim); color: var(--text); }

.label {
  font-size: var(--fs-label);
  font-weight: var(--w-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.4;
}

.rule { height: var(--hair); background: var(--line); border: 0; margin: 0; }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: var(--hair) solid var(--line-strong);
  color: var(--text);
  font-size: var(--fs-small);
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus-visible { transform: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Any slot that can be switched off. JS adds [hidden] from SITE.show. */
[hidden] { display: none !important; }

/* --------------------------------------------------- 3. LAYOUT SHELL */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--rail-w);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  background: var(--bg);
  border-right: var(--hair) solid var(--line);
}

.rail-wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--w-display-em);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--text);
}
.rail-wordmark a { color: inherit; }
.rail-wordmark a:hover { color: var(--accent); }

.rail-discipline { margin-top: var(--sp-2); }

.rail-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--muted);
}
.rail-status::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: none;
}

/* Nav with progress track ------------------------------------------ */

.rail-nav {
  position: relative;
  margin-top: auto;
  padding-left: var(--sp-5);
}

.rail-track {
  position: absolute;
  left: 0; top: 0.55em; bottom: 0.55em;
  width: var(--hair);
  background: var(--line);
}
.rail-track-fill {
  position: absolute;
  inset: 0 0 auto 0;
  width: var(--hair);
  height: 0%;
  background: var(--accent);
  transition: height var(--dur-1) linear;
}

.rail-nav ol { display: flex; flex-direction: column; gap: var(--sp-3); }

.rail-link {
  display: inline-block;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--faint);
  transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.rail-link:hover { color: var(--muted); }
.rail-link[aria-current="true"] {
  color: var(--text);
  transform: translateX(3px);
}

.rail-foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-5);
  border-top: var(--hair) solid var(--line);
}

/* Main -------------------------------------------------------------- */

.main {
  margin-left: var(--rail-w);
  padding: 0 var(--gutter);
}

.wrap { max-width: var(--measure); margin: 0 auto; }

.section { padding: var(--sp-10) 0; }
.section--tight { padding: var(--sp-9) 0; }

/* The footer closes the page and carries its own bottom padding, so the last
   section does not need a full section rhythm stacked underneath it — that
   left 176px of empty ground below the final line of text. */
#contact { padding-bottom: var(--sp-6); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.section-head .label { flex: none; }
.section-head .rule { flex: 1; align-self: center; }

/* -------------------------------------------------------- 4. SECTIONS */

/* Hero */

.hero {
  min-height: 100svh;
  padding: var(--sp-11) 0 var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-name {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  font-weight: var(--w-display);
  letter-spacing: -0.012em;
}
.hero-name .given { display: block; }
.hero-name .family { display: block; margin-left: 0.06em; font-weight: var(--w-display-em); }

.hero-discipline {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: var(--hair) solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}

.hero-lead {
  margin-top: var(--sp-6);
  max-width: var(--measure-text);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
}

.hero-lower {
  margin-top: var(--sp-9);
  display: grid;
  /* Portrait leads, scroll cue trails. */
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: var(--sp-6);
}

/* <figure> keeps its UA margin (16px 40px) unless zeroed — the other two
   figures in the design are, this one was missed. It inset the portrait
   and made grid align its margin box, floating it above the scroll cue. */
.hero-portrait { width: min(21rem, 40vw); margin: 0; }
.hero-portrait figcaption { margin-top: var(--sp-3); }

.scroll-cue {
  display: inline-flex;
  align-items: center;
  /* Without this the box keeps its leading and the text floats above the
     portrait's bottom edge, so the two read as misaligned. */
  line-height: 1;
  align-self: end;
  gap: var(--sp-3);
  color: var(--faint);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.scroll-cue .cue-line {
  display: block;
  width: 3.5rem; height: var(--hair);
  background: var(--line-strong);
  transform-origin: left;
  animation: cue 3.4s var(--ease-soft) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleX(0.45); opacity: 0.6; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* About */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sp-8);
  align-items: start;
}

.prose p + p { margin-top: var(--sp-4); }
.prose {
  max-width: var(--measure-text);
  font-size: 1.0625rem;
  color: var(--muted);
}
.prose strong { color: var(--text); font-weight: var(--w-body-em); }

.meta-list { display: flex; flex-direction: column; }
.meta-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: var(--hair) solid var(--line);
  align-items: baseline;
}
.meta-row:first-child { border-top: var(--hair) solid var(--line); }
.meta-row dd { margin: 0; font-size: var(--fs-small); color: var(--text); line-height: 1.65; }

/* What I do */

.scope-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 var(--sp-8);
}
.scope-item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-bottom: var(--hair) solid var(--line);
}
.scope-index { font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--accent-dim); }
.scope-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--w-display-em); }
.scope-note { font-size: var(--fs-small); color: var(--faint); margin-top: var(--sp-1); }

/* Testimonial */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--sp-6);
}
.quote {
  margin: 0;
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--r-2);
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4375rem;
  line-height: 1.45;
  font-weight: var(--w-display);
  color: var(--text);
}
.quote figcaption { margin-top: var(--sp-5); }

/* ------------------------------------------- 5. WORK: FILTERS + MASONRY */

.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: var(--hair) solid var(--line);
}

.filter {
  appearance: none;
  background: transparent;
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.5rem var(--sp-4);
  cursor: pointer;
  font-size: var(--fs-label);
  font-weight: var(--w-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  transition: border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease);
}
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter:active { background: var(--surface); }
.filter[aria-pressed="true"] {
  border-color: var(--text);
  color: var(--bg);
  background: var(--text);
}
.filter-count { color: var(--accent-dim); margin-left: 0.4em; }
.filter[aria-pressed="true"] .filter-count { color: var(--accent-dim); }

/* Masonry — JS distributes cards into columns; each column is a flex stack,
   so every card keeps its own aspect ratio. No fixed crop. */
.masonry {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  transition: opacity var(--dur-2) var(--ease);
}
.masonry.is-swapping { opacity: 0; }
.masonry-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.work-empty {
  padding: var(--sp-8) 0;
  color: var(--faint);
  font-size: var(--fs-small);
}

/* Card */

.card { position: relative; }

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card-link:hover { color: inherit; }

.card-media {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-1);
}
/* bronze hairline appears on hover — the only hover cue on the image */
.card-media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease);
}
.card-link:hover .card-media::after,
.card-link:focus-visible .card-media::after { transform: scaleX(1); }

.card-body { padding-top: var(--sp-4); }

.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--w-display-em);
  line-height: 1.2;
}

/* meta appears on hover / keyboard focus only */
.card-meta {
  margin-top: var(--sp-2);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.card-link:hover .card-meta,
.card-link:focus-visible .card-meta,
.card:focus-within .card-meta { opacity: 1; transform: none; }

/* Placeholder tone block ------------------------------------------------
   Replace the whole .ph element with:
   <img src="…-1600.webp" width="1600" height="1067" alt="" loading="lazy" decoding="async">
   The .ph-box wrapper carries aspect-ratio, so nothing reflows. */

.ph-box {
  position: relative;
  width: 100%;
  background: var(--tone-1);
  border-radius: inherit;
  overflow: hidden;
}
.ph-box > img { width: 100%; height: 100%; object-fit: cover; }

.ph {
  position: absolute;
  inset: 0;
  background: var(--tone-1);
  display: flex;
  align-items: flex-end;
  padding: var(--sp-3);
}
.ph[data-tone="2"] { background: var(--tone-2); }
.ph[data-tone="3"] { background: var(--tone-3); }
.ph[data-tone="4"] { background: var(--tone-4); }
.ph[data-tone="doc"] { background: var(--tone-doc); box-shadow: inset 0 0 0 1px var(--line); }

.ph::before {
  content: attr(data-tag);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
}

/* ------------------------------------------------- 6. OVERLAY GALLERY */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity var(--dur-3) var(--ease),
              transform var(--dur-3) var(--ease),
              visibility var(--dur-3) step-end;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-3) var(--ease),
              transform var(--dur-3) var(--ease),
              visibility 0s;
}

.ov-top {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--gutter);
  border-bottom: var(--hair) solid var(--line);
  background: var(--bg);
}
.ov-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: var(--w-display-em);
  line-height: 1.1;
}
.ov-sub { margin-top: var(--sp-2); }

.ov-top-right {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex: none;
}
.ov-counter { font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: lining-nums; }

.ov-close {
  appearance: none;
  background: transparent;
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r-pill);
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--text);
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.ov-close:hover { border-color: var(--accent); color: var(--accent); }
.ov-close:active { background: var(--surface); }
.ov-close svg { width: 0.875rem; height: 0.875rem; }

/* scrolling body of the overlay */
.ov-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ov-stage-wrap {
  background: var(--bg);
  transition: background-color var(--dur-3) var(--ease);
}
.ov-stage-wrap[data-role="Drawings"] { background: var(--surface); }

.ov-stage {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--gutter) var(--sp-4);
  min-height: min(62vh, 40rem);
}

.ov-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  transition: padding var(--dur-3) var(--ease);
  padding: 0;
}
/* drawings get generous margin and a light ground — treated as documents */
.ov-stage-wrap[data-role="Drawings"] .ov-figure { padding: var(--sp-5) clamp(1rem, 6vw, 5rem); }

.ov-frame {
  --stage-h: min(52vh, 34rem);
  width: 100%;
  max-width: 68rem;
  display: flex;
  justify-content: center;
  border-radius: var(--r-1);
  transition: opacity var(--dur-2) var(--ease);
}
/* Size by BOTH budgets: the container width and the height allowance. The box
   derives its height from aspect-ratio, so a max-height on this parent would
   not constrain it — cap the width instead. */
.ov-frame .ph-box { width: min(100%, calc(var(--stage-h) * var(--ar, 1.5))); }
.ov-frame.is-fading { opacity: 0; }
.ov-stage-wrap[data-role="Drawings"] .ov-frame { max-width: 56rem; --stage-h: min(48vh, 31rem); }

.ov-arrow {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--sp-3);
  cursor: pointer;
  color: var(--faint);
  line-height: 0;
  transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ov-arrow:hover { color: var(--accent); }
.ov-arrow[data-dir="prev"]:hover { transform: translateX(-2px); }
.ov-arrow[data-dir="next"]:hover { transform: translateX(2px); }
.ov-arrow svg { width: 1.375rem; height: 1.375rem; }

/* caption + the always-visible meta line */
.ov-caption {
  padding: 0 var(--gutter) var(--sp-5);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
  min-height: 2.25rem;
}

.ov-metaline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: center;
  padding: var(--sp-4) var(--gutter);
  border-top: var(--hair) solid var(--line);
  border-bottom: var(--hair) solid var(--line);
  background: var(--bg);
}

/* Filmstrip, grouped by role */
.ov-strip {
  display: flex;
  gap: var(--sp-7);
  padding: var(--sp-5) var(--gutter);
  overflow-x: auto;
  background: var(--bg);
}
.ov-group { flex: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.ov-group-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.ov-group[data-active="true"] .ov-group-head .label { color: var(--text); }
.ov-group-count { font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--accent-dim); }
.ov-thumbs { display: flex; gap: var(--sp-2); }

.ov-thumb {
  appearance: none;
  padding: 0;
  cursor: pointer;
  width: 4.5rem;
  height: 3.25rem;
  flex: none;
  border: var(--hair) solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--tone-1);
  opacity: 0.55;
  transition: opacity var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.ov-thumb[data-tone="2"] { background-color: var(--tone-2); }
.ov-thumb[data-tone="3"] { background-color: var(--tone-3); }
.ov-thumb[data-tone="4"] { background-color: var(--tone-4); }
.ov-thumb[data-tone="doc"] { background-color: var(--tone-doc); }
.ov-thumb:hover { opacity: 1; }
.ov-thumb[aria-current="true"] { opacity: 1; border-color: var(--accent); }

/* Project details below the strip */
.ov-details {
  border-top: var(--hair) solid var(--line);
  padding: var(--sp-8) var(--gutter) var(--sp-10);
}
.ov-details-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-8);
  align-items: start;
}
.ov-desc { max-width: var(--measure-text); font-size: 1.0625rem; color: var(--muted); }
.ov-scope { display: flex; flex-direction: column; }
.ov-scope li {
  padding: var(--sp-3) 0;
  border-bottom: var(--hair) solid var(--line);
  font-size: var(--fs-small);
}
.ov-scope li:first-child { border-top: var(--hair) solid var(--line); }

/* mobile drawer toggle for the filmstrip — hidden on desktop */
.ov-strip-toggle { display: none; }

/* ------------------------------------------------------- 7. CONTACT */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--sp-8);
  align-items: start;
}

.form { display: flex; flex-direction: column; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.input,
.textarea {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: var(--hair) solid var(--line-strong);
  border-radius: 0;
  padding: var(--sp-3) 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--w-body);
  color: var(--text);
  transition: border-color var(--dur-2) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .textarea:hover { border-color: var(--accent-dim); }
.input:focus, .textarea:focus { outline: 0; border-color: var(--accent); }
.textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }

.btn {
  appearance: none;
  align-self: flex-start;
  background: transparent;
  border: var(--hair) solid var(--text);
  border-radius: var(--r-pill);
  padding: 0.75rem var(--sp-6);
  cursor: pointer;
  font-size: var(--fs-label);
  font-weight: var(--w-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text);
  transition: background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn:active { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.contact-details { display: flex; flex-direction: column; gap: var(--sp-6); }
.detail-row { display: flex; flex-direction: column; gap: var(--sp-1); }
.detail-value { font-size: 1.0625rem; }

/* empty-by-design slot: social links */
.slot-empty {
  padding: var(--sp-4) 0;
  border-top: var(--hair) solid var(--line);
  border-bottom: var(--hair) solid var(--line);
  color: var(--faint);
  font-size: var(--fs-small);
}
.social-list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }

.cv-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--text);
  border-bottom: var(--hair) solid var(--line-strong);
  padding-bottom: var(--sp-2);
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.cv-link:hover { color: var(--accent); border-color: var(--accent); }

.footer {
  padding: var(--sp-6) 0 var(--sp-7);
  border-top: var(--hair) solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
}

/* --------------------------------------------------------- 8. MOTION */

.reveal {
  opacity: 0;
  transform: translateY(0.875rem);
  transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* If JS never runs, nothing may stay hidden. */
.no-js .reveal { opacity: 1; transform: none; }

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

  /* CRITICAL: killing animation must also restore the final visual state. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal,
  .reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0ms !important;
  }
  .card-meta {
    opacity: 1 !important;
    transform: none !important;
  }
  .card-media::after { transform: scaleX(1) !important; }
  .masonry, .masonry.is-swapping { opacity: 1 !important; }
  .ov-frame, .ov-frame.is-fading { opacity: 1 !important; }
  .overlay.is-open { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .scroll-cue .cue-line { animation: none !important; transform: scaleX(1) !important; opacity: 1 !important; }
}

/* ----------------------------------------------------- 9. RESPONSIVE */

@media (max-width: 1180px) {
  .about-grid,
  .contact-grid,
  .ov-details-inner { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* Rail collapses to a slim horizontal bar below 900px */
@media (max-width: 900px) {
  .rail {
    position: sticky;
    inset: 0 0 auto 0;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-3) var(--gutter);
    border-right: 0;
    border-bottom: var(--hair) solid var(--line);
  }
  .rail-head { flex: none; }
  .rail-wordmark { font-size: 1.0625rem; }
  .rail-discipline,
  .rail-status,
  .rail-foot { display: none; }

  .rail-nav {
    margin: 0 0 0 auto;
    padding: 0;
    min-width: 0;
    overflow: hidden;
  }
  .rail-track { display: none; }
  .rail-nav ol {
    flex-direction: row;
    gap: var(--sp-4);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .rail-nav ol::-webkit-scrollbar { display: none; }
  .rail-link { white-space: nowrap; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
  .rail-link[aria-current="true"] { transform: none; }

  /* progress becomes a hairline along the bottom of the bar */
  .rail-progress {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--line);
  }
  .rail-progress span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width var(--dur-1) linear;
  }

  .main { margin-left: 0; }
  .section { padding: var(--sp-9) 0; }
  #contact { padding-bottom: var(--sp-5); }
  .hero { min-height: 88svh; padding-top: var(--sp-9); }
  .hero-lower { grid-template-columns: 1fr; align-items: start; }
  .hero-portrait { order: 1; }
  .hero-portrait { width: min(18rem, 62vw); }
  .scroll-cue { order: 2; }
}

@media (min-width: 901px) { .rail-progress { display: none; } }

@media (max-width: 700px) {
  .masonry { gap: var(--sp-4); }
  .masonry-col { gap: var(--sp-6); }
  .meta-row { grid-template-columns: 5.5rem 1fr; }
  .scope-list { grid-template-columns: 1fr; }

  .ov-top { padding: var(--sp-4) var(--gutter); }
  .ov-stage {
    grid-template-columns: 1fr;
    padding: var(--sp-4) var(--gutter);
    min-height: 0;
  }
  .ov-arrow { display: none; }         /* swipe instead */
  .ov-frame { --stage-h: min(64vh, 32rem); }
  .ov-stage-wrap[data-role="Drawings"] .ov-figure { padding: var(--sp-4) 0; }
  .ov-metaline { justify-content: flex-start; }

  /* filmstrip becomes a collapsible drawer */
  .ov-strip-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    appearance: none;
    background: transparent;
    border: 0;
    border-top: var(--hair) solid var(--line);
    border-bottom: var(--hair) solid var(--line);
    padding: var(--sp-4) var(--gutter);
    cursor: pointer;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--muted);
  }
  .ov-strip-toggle .chev { transition: transform var(--dur-2) var(--ease); }
  .ov-strip-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .ov-strip[hidden] { display: none; }
  .ov-strip { flex-direction: column; gap: var(--sp-5); }
  .ov-thumbs { overflow-x: auto; }

  .ov-details { padding: var(--sp-7) var(--gutter) var(--sp-8); }

  /* CV block is the last thing before the footer — give it room to breathe */
  [data-optional="cv"] { padding-bottom: var(--sp-6); }
}

@media (max-width: 480px) {
  .hero-name { letter-spacing: -0.02em; }
  .hero-portrait { width: 100%; }
  .filters { gap: var(--sp-1); }
  .filter { padding: 0.4375rem var(--sp-3); }
}

@media print {
  .rail, .overlay, .filters, .scroll-cue { display: none !important; }
  .main { margin-left: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .card-meta { opacity: 1 !important; transform: none !important; }
}


/* ── contact form states — added when the inert form was wired ─────────── */
.field-error{color:#a2503f;margin-top:var(--sp-2)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:#a2503f}
.form-note{color:var(--accent);margin-top:var(--sp-4);min-height:1em}
.btn[disabled]{opacity:.55;cursor:progress}