/* sherzman.design: one stylesheet, no build step.
   Palette: Olive #4B5136 · Sage #8A8F73 · Walnut #6B4426 · Cream #E8DCC5 · Warm Taupe #CBB9A3 */

:root {
  --paper: #f7f1ea;
  --cream: #e8dcc5;
  --taupe: #cbb9a3;
  --sage: #8a8f73;
  --olive: #4b5136;
  --walnut: #6b4426;
  --ink: #2b2a20;
  --ink-soft: #5c5847;
  --line: #d9cbb5;

  /* Each section tone re-points these. */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --rule: var(--line);
  --accent: var(--walnut);
  --surface: var(--taupe);

  --display: "Playfair Display", Didot, "Bodoni 72", Georgia, serif;
  --sans: "Raleway", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --caps: var(--sans); /* small uppercase labels: Raleway, tracked */

  --wrap: 1360px;
  --gutter: clamp(16px, 4vw, 56px);
  --gap: 8px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .75, .15, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
html.lb-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.75 var(--sans);
  font-variant-numeric: lining-nums; /* Raleway defaults to old-style figures */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--olive); color: var(--cream); }

img, video, svg { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2.5rem, 5vw, 4.4rem); }
h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
h2 em, h3 em { font-style: italic; color: var(--accent); }

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

.eyebrow {
  font: 500 .74rem/1.4 var(--caps);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin: 0 0 1.1rem;
}


:focus-visible {
  outline: 2px solid var(--walnut);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--olive);
  color: var(--cream);
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------ tones -- */

.tone-base { --bg: var(--paper); }
.tone-alt { --bg: var(--cream); --rule: #d3c4ab; --surface: #d8c8b0; }
.tone-olive {
  --bg: var(--olive);
  --fg: #f3ebdd;
  --fg-soft: #cfcbb4;
  --rule: rgb(232 220 197 / .24);
  --accent: var(--cream);
  --surface: #5d6447;
}
.tone-walnut {
  --bg: var(--walnut);
  --fg: #f6eee2;
  --fg-soft: #e2cfb9;
  --rule: rgb(246 238 226 / .24);
  --accent: var(--cream);
  --surface: #7d5434;
}
.tone-base, .tone-alt, .tone-olive, .tone-walnut { background: var(--bg); color: var(--fg); }

/* ---------------------------------------------------------- header -- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  transition: background-color .4s, box-shadow .4s, transform .5s var(--ease);
}
.site-header.is-scrolled {
  background: rgb(247 241 234 / .9);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }
.bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font: 400 1.4rem/1 var(--display);
  text-decoration: none;
  letter-spacing: -.01em;
}
.brand em { color: var(--walnut); }
#nav-list {
  display: flex;
  gap: clamp(18px, 2.6vw, 40px);
}
#nav-list a {
  font: 500 .74rem/1 var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 0;
  background: linear-gradient(var(--walnut), var(--walnut)) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease), color .3s;
}
#nav-list a:hover, #nav-list a.is-active { background-size: 100% 1px; color: var(--walnut); }
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 18px;
    font: .76rem/1 var(--caps);
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
  }
  #nav-list {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    background: var(--paper);
    box-shadow: 0 1px 0 var(--line), 0 24px 40px -24px rgb(43 42 32 / .3);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .5s var(--ease), visibility 0s .5s;
  }
  #nav-list a { display: block; padding: 16px 0; font-size: .95rem; border-bottom: 1px solid var(--line); background: none; }
  .nav-open #nav-list { clip-path: inset(0); visibility: visible; transition: clip-path .5s var(--ease); }
  .nav-open .site-header { background: var(--paper); }
}

/* ------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(16px, 4vh, 48px));
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 85% 30%, rgb(203 185 163 / .35), transparent 70%),
    var(--paper);
}
.hero-grid {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  min-height: calc(100svh - var(--header-h) - 120px);
  padding-bottom: clamp(40px, 6vw, 72px);
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* "Sherzman" is ~4.1em wide in italic; with its .5em indent it must fit the text column. */
.hero-name {
  font-size: clamp(4rem, 9.6vw, 8.6rem);
  line-height: .84;
  letter-spacing: -.035em;
  margin: .1em 0 .42em;
}
.hero-name .line { display: block; overflow: hidden; padding: .04em 0 .1em; white-space: nowrap; }
.hero-name .line--italic {
  font-style: italic;
  color: var(--walnut);
  padding-left: .5em;
  margin-top: -.08em;
}
.hero-name .ch { display: inline-block; will-change: transform; }

.hero-intro {
  font: 400 clamp(1.25rem, 1.9vw, 1.6rem)/1.45 var(--display);
  max-width: 34ch;
  margin-bottom: 2.2rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2.8rem; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: 999px;
  font: 500 .76rem/1 var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .35s, color .35s, border-color .35s;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--solid { background: var(--olive); color: var(--cream); }
.btn--solid:hover { background: var(--walnut); }
.btn--line { border: 1px solid var(--olive); color: var(--olive); }
.btn--line:hover { background: var(--olive); color: var(--cream); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  max-width: 600px;
}
.stats li { padding: 18px 14px 0 0; }
.stats li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.stats strong {
  display: block;
  font: 400 clamp(1.9rem, 3.2vw, 2.7rem)/1 var(--display);
  color: var(--olive);
  font-variant-numeric: lining-nums tabular-nums;
}
.stats li > span { display: block; font-size: .8rem; color: var(--ink-soft); line-height: 1.4; margin-top: 8px; }

/* Visual: arch photo, sage arch behind, reflection print, rotating badge. */
.hero-visual {
  --mx: 0;
  --my: 0;
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: var(--ar);
  justify-self: center;
  margin: 24px 6% 24px 12%;
}
.hero-visual > * { transform: translate3d(calc(var(--mx) * 16px * var(--depth, 0)), calc(var(--my) * 16px * var(--depth, 0)), 0); }
.arch-bg {
  --depth: -.5;
  position: absolute;
  inset: -5% -7% 7% 9%;
  border-radius: 999px 999px 0 0;
  background: var(--sage);
}
.arch {
  --depth: .35;
  position: absolute;
  inset: 0;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--taupe);
  box-shadow: 0 40px 80px -40px rgb(43 42 32 / .45);
}
.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08) translate3d(calc(var(--mx) * -10px), calc(var(--my) * -10px), 0);
  transition: transform 1.6s var(--ease);
}
/* A cream "curtain" that draws up to reveal the photo. */
.arch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.js:not(.is-loaded) .arch::after { transform: scaleY(1); }
.is-loaded .arch::after { transition: transform 1.5s var(--ease-io) .25s; }
.js:not(.is-loaded) .arch img { transform: scale(1.25); }

.reflection {
  --depth: 1.1;
  position: absolute;
  width: 40%;
  aspect-ratio: var(--ar);
  left: -22%;
  bottom: -7%;
  padding: 8px 8px 30px;
  background: #fbf7f1;
  box-shadow: 0 28px 50px -24px rgb(43 42 32 / .5);
  rotate: -4deg;
  transition: rotate .8s var(--ease), opacity 1s .9s, translate 1.2s var(--ease) .9s;
}
.reflection img { width: 100%; height: 100%; object-fit: cover; }
.reflection:hover { rotate: 0deg; }
.js:not(.is-loaded) .reflection { opacity: 0; translate: 0 40px; }

.badge-ring {
  --depth: .8;
  position: absolute;
  width: clamp(110px, 11vw, 150px);
  aspect-ratio: 1;
  top: 3%;
  left: -15%;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 16px 40px -20px rgb(43 42 32 / .4);
  display: grid;
  place-items: center;
}
.badge-ring > svg:first-child {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  rotate: var(--spin, 0deg);
}
.badge-ring text { font: 500 12.5px/1 var(--caps); letter-spacing: .12em; fill: var(--olive); text-transform: uppercase; }
.badge-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--walnut); }

/* Narrow screens: name, then the portrait, then the intro, so her photo is part of the first view. */
@media (max-width: 999px) {
  .hero-grid { gap: 0; min-height: 0; }
  .hero-text { display: contents; }
  .hero-text > .eyebrow { order: 1; }
  .hero-name { order: 2; margin-bottom: .25em; }
  .hero-visual { order: 3; width: min(74%, 420px); margin: 16px auto 56px; }
  .hero-intro { order: 4; }
  .hero-cta { order: 5; }
  .stats { order: 6; }
  .reflection { width: 42%; left: -18%; }
  .badge-ring { left: -14%; }
}
@media (max-width: 420px) {
  .btn { padding: 14px 20px; letter-spacing: .16em; }
}

/* Hero entrance (JS adds .is-loaded). */
.js .hero-in { opacity: 0; translate: 0 22px; transition: opacity 1s var(--ease), translate 1.1s var(--ease); transition-delay: calc(var(--d) * 90ms + 300ms); }
.is-loaded .hero-in { opacity: 1; translate: 0 0; }
.js .hero-name .ch { transform: translateY(105%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 40ms + 150ms); }
.is-loaded .hero-name .ch { transform: none; }

/* Marquee */
.marquee {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding: 20px 0;
  background: var(--paper);
}
.marquee-track { display: flex; align-items: center; gap: 36px; width: max-content; will-change: transform; }
.marquee span {
  font: italic 400 clamp(1.7rem, 3.2vw, 2.8rem)/1 var(--display);
  white-space: nowrap;
  color: var(--olive);
}
.marquee .sep { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex: none; }

/* ------------------------------------------------------- work index -- */

.work { padding-top: clamp(80px, 11vw, 150px); }
.work-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 16px 40px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.work-hint { font-size: .9rem; color: var(--ink-soft); margin: 0; max-width: 32ch; }

.index { border-top: 1px solid var(--line); }
.index a {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 8px 24px;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.index a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease);
  z-index: -1;
}
.index a:hover::before, .index a:focus-visible::before { transform: scaleY(1); }
.i-num { font: italic 400 1.15rem/1 var(--display); color: var(--walnut); padding-left: 6px; }
.i-title {
  font: 400 clamp(1.8rem, 4.2vw, 3.6rem)/1.05 var(--display);
  transition: translate .6s var(--ease), color .3s;
}
.index a:hover .i-title { translate: 18px 0; color: var(--walnut); font-style: italic; }
.i-place { font: .78rem/1.4 var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); text-align: right; }
.i-arrow { justify-self: end; padding-right: 6px; }
.i-arrow svg { width: 26px; height: 26px; fill: none; stroke: var(--olive); stroke-width: 1.3; transition: rotate .5s var(--ease); }
.index a:hover .i-arrow svg { rotate: 90deg; }
@media (max-width: 700px) {
  .index a { grid-template-columns: 40px minmax(0, 1fr) 32px; }
  .i-place { grid-column: 2; grid-row: 2; text-align: left; }
  .i-arrow { grid-column: 3; grid-row: 1 / span 2; }
}

.index-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: clamp(200px, 18vw, 280px);
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  scale: .85;
  transition: opacity .35s, scale .5s var(--ease);
  box-shadow: 0 30px 60px -30px rgb(43 42 32 / .55);
}
.index-preview.is-on { opacity: 1; scale: 1; }
.index-preview img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------- chapters -- */

.chapter { padding-block: clamp(80px, 11vw, 150px); }

.project {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
}
@media (min-width: 980px) {
  .project { grid-template-columns: minmax(300px, 5fr) minmax(0, 8fr); }
  .project-text {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    align-self: start;
  }
  .project--text { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .project--text .project-text { position: static; }
}

.num {
  font: italic 400 clamp(3.4rem, 6vw, 5.4rem)/.8 var(--display);
  color: var(--accent);
  margin-bottom: 1.6rem;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.num::after { content: ""; width: 64px; height: 1px; background: currentColor; opacity: .5; margin-bottom: .3em; }

.project-text h2, .chapter-head h2 { margin-bottom: 1.4rem; }
.project-text h3 { margin-bottom: 1.25rem; }

.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; }
.facts li {
  font-size: .78rem;
  letter-spacing: .03em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 13px;
  color: var(--fg-soft);
}

.story { max-width: 60ch; }
.project--text .story p {
  font: 400 clamp(1.3rem, 1.9vw, 1.6rem)/1.5 var(--display);
  max-width: 34ch;
}
.project--text .story { max-width: none; }

.sign {
  font: italic 400 clamp(1.4rem, 2.2vw, 1.8rem)/1.3 var(--display);
  color: var(--accent);
  border-top: 1px solid var(--rule);
  padding-top: 1.3rem;
  margin-top: 1.8rem;
  max-width: 30ch;
}

.chapter-head { margin-bottom: clamp(40px, 6vw, 80px); max-width: 860px; }
.chapter-head .facts { margin-bottom: 0; }
.project--part + .project--part {
  margin-top: clamp(64px, 9vw, 128px);
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------- gallery -- */
/* Justified rows: each tile grows in proportion to its aspect ratio, so every
   row shares one height and nothing is cropped beyond the tile's own shape. */

.gallery {
  --row: clamp(190px, 22vw, 300px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.gallery::after { content: ""; flex-grow: 1000000; }

/* Small sets: one grid row per group, columns sized by aspect ratio so the
   tiles share a height and fill the width exactly. */
.fill-row { display: grid; gap: var(--gap); }
.fill-row + .fill-row { margin-top: var(--gap); }

.tile {
  position: relative;
  display: block;
  flex-grow: var(--g);
  flex-basis: calc(var(--ar) * var(--row));
  aspect-ratio: var(--ar);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  isolation: isolate;
}
.tile.is-more, .tile.is-filtered { display: none; }
.tile.is-video { cursor: pointer; }
.tile img, .tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
@media (hover: hover) {
  .tile:hover img, .tile:hover video { transform: scale(1.045); }
}

.tile-cap {
  position: absolute;
  inset: auto 0 0;
  padding: 48px 14px 13px;
  font-size: .82rem;
  line-height: 1.35;
  color: #f7f1ea;
  background: linear-gradient(transparent, rgb(31 32 22 / .78));
  translate: 0 101%;
  transition: translate .55s var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .tile:hover .tile-cap, .tile:focus-visible .tile-cap { translate: 0 0; }
}

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(247 241 234 / .88);
  color: var(--olive);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: scale .45s var(--ease), background-color .3s, opacity .3s;
}
.play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.tile:hover .play { scale: 1.12; background: var(--cream); }
.has-cursor .tile:hover .play { opacity: 0; }
.dur {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: .72rem;
  letter-spacing: .06em;
  color: #fff;
  background: rgb(31 32 22 / .55);
  padding: 3px 9px;
  border-radius: 999px;
}
.badge {
  position: absolute;
  left: 10px;
  top: 10px;
  font: .7rem/1 var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--cream);
  color: var(--olive);
  padding: 6px 11px;
  border-radius: 999px;
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  background: none;
  border: 1px solid var(--fg);
  border-radius: 999px;
  padding: 13px 24px;
  font: .8rem/1 var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; rotate: 90deg; }
.more:hover { background: var(--fg); color: var(--bg); }

/* ----------------------------------------------------------- range -- */

.range-head {
  display: grid;
  gap: 24px 64px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
@media (min-width: 900px) {
  .range-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
}
.range-intro p {
  font: 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.5 var(--display);
  max-width: 44ch;
}
.range-intro p:last-child { margin-bottom: 0; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filters button {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 10px 20px;
  font: .8rem/1 var(--caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.filters button span { opacity: .55; margin-left: 4px; }
.filters button:hover { border-color: var(--olive); }
.filters button[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: var(--cream); }

.tile.is-shuffle { animation: shuffle-in .8s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes shuffle-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* ----------------------------------------------------------- about -- */

.about { display: grid; gap: 32px 64px; }
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.about-copy p {
  font: 400 clamp(1.4rem, 2.1vw, 1.8rem)/1.42 var(--display);
  max-width: 36ch;
}
.fact-list { margin: 2.5rem 0 0; border-top: 1px solid var(--rule); }
.fact-list div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 3fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .5s var(--ease), background-color .4s;
}
.fact-list div:hover { padding-left: 12px; background: linear-gradient(90deg, var(--cream), transparent); }
.fact-list dt { font: .78rem/1.6 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-soft); padding-top: 3px; }
.fact-list dd { margin: 0; }
@media (max-width: 520px) {
  .fact-list div { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------------------- on camera -- */

.reel-group + .reel-group { margin-top: 44px; }
.reel-group h3 {
  font: .82rem/1.4 var(--caps);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 16px;
}
.reel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(150px, 17vw, 200px);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--sage) transparent;
}
.reel .tile { scroll-snap-align: start; border-radius: 999px 999px 0 0; }
.reel.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.reel.is-dragging .tile { pointer-events: none; }

/* --------------------------------------------------------- reviews -- */
/* Three lanes drifting sideways. JS duplicates each lane's cards once and adds
   .is-moving; without it each lane is a plain row you can scroll. */

.reviews-sec { padding-bottom: clamp(80px, 10vw, 140px); }
.reviews-head { display: grid; gap: 16px 64px; margin-bottom: clamp(32px, 4vw, 52px); }
@media (min-width: 900px) {
  .reviews-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
}
.note { font-size: .9rem; color: var(--fg-soft); margin: 0; max-width: 60ch; }

.lanes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.lane { overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin; scrollbar-color: var(--sage) transparent; }
.lane:focus-visible { outline-offset: -2px; }
.lane-track { display: flex; align-items: center; width: max-content; padding-inline: var(--gutter); }
.lane-track > * { flex: none; margin: 0 20px 0 0; }

/* min-width: 0, or this grid item grows to the full length of its cards and widens the page. */
.lane-wrap { position: relative; min-width: 0; }
.lane.is-moving {
  overflow: hidden;
  touch-action: pan-y; /* vertical page scroll stays native; sideways swipes move the lane */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.lane.is-moving .lane-track { padding-inline: 0; will-change: transform; }
.lane.is-dragging { cursor: grabbing; }
.lane.is-dragging a { pointer-events: none; }

.lane-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 54px;
  height: 54px;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--olive);
  box-shadow: 0 14px 30px -16px rgb(43 42 32 / .5);
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s, scale .25s var(--ease);
}
.lane-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lane-btn:hover { background: var(--olive); border-color: var(--olive); color: var(--cream); }
.lane-btn:active { scale: .92; }
.lane-prev { left: clamp(8px, 2.4vw, 32px); }
.lane-prev svg { rotate: 180deg; }
.lane-next { right: clamp(8px, 2.4vw, 32px); }
@media (max-width: 600px) {
  .lane-btn { width: 44px; height: 44px; }
}

.rv-quote {
  width: clamp(270px, 28vw, 380px);
  background: var(--cream);
  padding: 26px 28px 24px;
  transition: translate .5s var(--ease), box-shadow .5s;
}
.rv-quote:hover { translate: 0 -4px; box-shadow: 0 22px 40px -28px rgb(43 42 32 / .5); }
.rv-quote blockquote { margin: 0; }
.rv-quote p { font: italic 400 clamp(1.08rem, 1.4vw, 1.25rem)/1.45 var(--display); margin: 0; }
.rv-quote p::before { content: "\201C"; }
.rv-quote p::after { content: "\201D"; }
.rv-quote figcaption {
  margin-top: 16px;
  font: 500 .7rem/1.4 var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--walnut);
}

.rv-shot { width: clamp(240px, 22vw, 300px); background: var(--cream); padding: 10px; }
.rv-shot .shot { position: relative; display: block; overflow: hidden; cursor: zoom-in; }
.rv-shot img { width: 100%; height: auto; }
/* Very long screenshots are cropped to keep the lane even; the full one opens on click. */
.rv-shot .shot.is-tall { max-height: 360px; }
.rv-shot .shot.is-tall::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 70px;
  background: linear-gradient(transparent, var(--cream));
  pointer-events: none;
}
.rv-tr {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px 16px 18px;
  background: rgb(43 42 32 / .93);
  color: var(--cream);
  font: italic 400 .98rem/1.5 var(--display);
  opacity: 0;
  transition: opacity .35s;
}
.rv-tr-label {
  display: block;
  margin-bottom: 8px;
  font: 500 .66rem/1.4 var(--caps);
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--taupe);
}
@media (hover: hover) {
  .rv-shot .shot:hover .rv-tr, .rv-shot .shot:focus-visible .rv-tr { opacity: 1; }
}
.rv-shot figcaption { display: flex; align-items: center; gap: 8px; padding: 10px 4px 2px; font-size: .84rem; }
.rv-shot .src { font-weight: 600; }
.stars { color: var(--walnut); letter-spacing: .1em; }


/* --------------------------------------------------------- contact -- */

.contact h2 { font-size: clamp(3.2rem, 9vw, 7.8rem); line-height: .92; margin-bottom: clamp(40px, 6vw, 80px); max-width: 11ch; }
.contact-links { border-top: 1px solid var(--rule); max-width: 820px; }
.contact-links li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.contact-links span { font: 500 .72rem/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-soft); }
.contact-links a {
  justify-self: start;
  font: 400 clamp(1.3rem, 2.7vw, 2.1rem)/1.2 var(--display);
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease);
}
.contact-links a:hover { background-size: 100% 1px; }
.copy {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 16px;
  font: .72rem/1 var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.copy:hover { background: var(--cream); color: var(--walnut); }
.contact-meta { margin-top: 30px; color: var(--fg-soft); }
@media (max-width: 560px) {
  .contact-links li { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .contact-links li > span { grid-column: 1 / -1; }
}

.site-footer { background: #3c412b; color: #cfcbb4; font-size: .82rem; }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 26px; }
.site-footer p { margin: 0; }
.site-footer a { text-decoration: none; font-family: var(--caps); letter-spacing: .16em; text-transform: uppercase; font-size: .75rem; }
.site-footer a:hover { color: var(--cream); }

/* ------------------------------------------------- floating pieces -- */

.to-top {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 45;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--olive);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px -14px rgb(43 42 32 / .45);
  opacity: 0;
  translate: 0 16px;
  pointer-events: none;
  transition: opacity .4s, translate .5s var(--ease);
}
.to-top.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.to-top circle { fill: none; stroke: var(--line); stroke-width: 1.5; }
.to-top .prog { stroke: var(--walnut); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.to-top .up { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: translate .4s var(--ease); }
.to-top:hover .up { translate: 0 -3px; }

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 95;
  pointer-events: none;
  width: 0;
  height: 0;
}
.cursor span {
  position: absolute;
  left: -46px;
  top: -46px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(75 81 54 / .9);
  color: var(--cream);
  font: .74rem/1 var(--caps);
  letter-spacing: .2em;
  text-transform: uppercase;
  scale: 0;
  transition: scale .45s var(--ease);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.cursor.is-on span { scale: 1; }
.has-cursor [data-cursor] { cursor: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 96;
  margin: 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--cream);
  font: .8rem/1 var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
  translate: -50% 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, translate .5s var(--ease);
}
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ---------------------------------------------------------- reveal -- */

.js .reveal:not(.tile) { opacity: 0; translate: 0 26px; transition: opacity 1s var(--ease), translate 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in:not(.tile) { opacity: 1; translate: 0 0; }
/* Tiles open like a curtain drawn upward. (An overlay, not clip-path on the tile:
   a fully clipped element never reports as intersecting, so it would never reveal.) */
.js .tile.reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bg);
  transform-origin: 50% 0;
  transition: transform 1.15s var(--ease-io);
  transition-delay: var(--d, 0ms);
  pointer-events: none;
}
.js .tile.reveal.is-in::after { transform: scaleY(0); }
.js .tile.reveal:not(.is-in) img, .js .tile.reveal:not(.is-in) video { transform: scale(1.18); }

.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; }
.js .split .w > span { transform: translateY(108%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.js .split.is-in .w > span { transform: none; }

/* -------------------------------------------------------- lightbox -- */

.lb {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #1f2117;
  color: var(--cream);
  overflow: hidden;
}
.lb::backdrop { background: #1f2117; }
.lb[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  animation: lb-in .35s ease-out;
}
@keyframes lb-in { from { opacity: 0; } }
.lb-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 64px clamp(12px, 7vw, 96px) 8px;
}
.lb-stage img, .lb-stage video {
  max-width: 100%;
  max-height: calc(100dvh - 130px);
  width: auto;
  height: auto;
  object-fit: contain;
  animation: lb-media .5s var(--ease);
}
@keyframes lb-media { from { opacity: 0; scale: .98; } }
.lb-cap {
  margin: 0;
  padding: 12px var(--gutter) 22px;
  text-align: center;
  font-size: .9rem;
  color: var(--taupe);
  max-width: 80ch;
  justify-self: center;
}
.lb-count { font-family: var(--caps); letter-spacing: .16em; margin-right: 14px; color: var(--cream); }
.lb-count:empty { margin: 0; }
.lb-btn {
  position: absolute;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(232 220 197 / .1);
  color: var(--cream);
  cursor: pointer;
  transition: background-color .25s;
}
.lb-btn:hover { background: rgb(232 220 197 / .22); }
.lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: 10px; right: 12px; }
.lb-prev, .lb-next { top: 50%; translate: 0 -50%; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
@media (max-width: 640px) {
  .lb-stage { padding-inline: 0; }
  .lb-cap { padding-inline: 72px; }
  .lb-prev, .lb-next { top: auto; bottom: 10px; translate: none; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0ms !important; }
}
@media print {
  .reveal, .split .w > span, .hero-in, .hero-name .ch { opacity: 1 !important; translate: none !important; transform: none !important; }
  .tile::after, .arch::after { display: none !important; }
  .site-header, .to-top, .cursor, .marquee { display: none; }
}