/* Full Page 34 · Chapters · Vespera (Leonor Vaz deck copy, voiced as Ruth Delacroix).
   Font Pairing 18 (Italiana uppercase display, Jost 300 body and label) on
   Color Palette 01 (monochrome). One fixed narrow rail outside the scroller is
   the shared header on every page; above 800px the home and each blog post
   are a horizontal chaptered essay (native vertical scroll mapped to a sticky
   horizontal translate with lerp damping, see full-page-34-family.js); every
   other page, every page at 800px and below, and every page under
   prefers-reduced-motion is a native vertical stack. */

:root {
  --paper: #fafafa;
  --paper-tint: #f3f3f3;
  --ink: #1c1f24;
  --ink-strong: #0e1014;
  --line: rgba(28, 31, 36, 0.14);
  --muted: rgba(28, 31, 36, 0.68);
  --on-ink: rgba(250, 250, 250, 0.94);
  --on-ink-2: rgba(250, 250, 250, 0.7);
  --on-ink-3: rgba(250, 250, 250, 0.46);

  --font-display: var(--font-heading, 'Italiana', 'Cormorant Garamond', serif);
  --font-text: var(--font-body, 'Jost', 'Helvetica Neue', sans-serif);
  --font-ui: var(--font-label, 'Jost', 'Helvetica Neue', sans-serif);

  --edge: clamp(20px, 2.4vw, 36px);
  --rail: 96px;
  --bar: 56px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-nav: cubic-bezier(0.32, 0, 0.16, 1);

  --t-display: clamp(30px, min(3.3vw, 5.8vh), 58px);
  --t-title: clamp(40px, min(6vw, 10.5vh), 112px);
  --t-body: clamp(16px, 1.15vw, 18px);
  --t-small: clamp(13px, 0.95vw, 14px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
figure, blockquote { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }

.skip-link {
  position: fixed; left: var(--edge); top: 12px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  transform: translateY(-160%); text-decoration: none;
}
.skip-link:focus { transform: none; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ---------- type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: var(--t-display);
  text-wrap: balance;
  max-width: 18ch;
}
.lede { max-width: 42ch; color: var(--ink); }
.prose { max-width: 44ch; }
.prose p + p { margin-top: 1em; }
.small { font-size: var(--t-small); line-height: 1.6; color: var(--muted); }

/* text links and outlined buttons: an underline that draws across from the left on hover */
.link {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-ui); font-size: var(--t-small); letter-spacing: 0.04em;
  text-decoration: none; padding: 6px 0; position: relative;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform-origin: left; transform: scaleX(0.28);
  transition: transform 520ms var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border: 1px solid currentColor;
  font-family: var(--font-ui); font-size: var(--t-small); letter-spacing: 0.04em;
  text-decoration: none; position: relative; overflow: hidden; isolation: isolate;
  transition: color 420ms var(--ease);
}
.button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform-origin: left; transform: scaleX(0); transition: transform 520ms var(--ease);
}
.button:hover, .button:focus-visible { color: var(--paper); }
.button:hover::before, .button:focus-visible::before { transform: scaleX(1); }

/* ---------- the rail: the one shared header ---------- */
.rail {
  position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: var(--rail);
  background: var(--paper); border-right: 1px solid var(--line);
}
.rail-row {
  height: 100%; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: start;
  padding: 28px 0 30px;
}
.rail-row .brand { grid-row: 2; }
.rail-progress {
  position: absolute; right: -1px; top: 0; width: 1px; height: 100%;
  background: var(--ink); transform-origin: top; transform: scaleY(0);
}
.rail-menu {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.04em;
}
.rail-menu .bars { display: grid; gap: 6px; width: 22px; }
.rail-menu .bars span {
  display: block; height: 1px; background: currentColor;
  transition: transform 420ms var(--ease-nav), width 420ms var(--ease-nav);
}
.rail-menu .bars span:last-child { width: 62%; }
.rail-menu:hover .bars span:last-child,
.rail-menu:focus-visible .bars span:last-child { width: 100%; }
.rail-menu[aria-expanded="true"] .bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.rail-menu[aria-expanded="true"] .bars span:last-child { width: 100%; transform: translateY(-3.5px) rotate(-45deg); }
.rail-menu .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand {
  font-family: var(--font-display); font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 8px 4px; transition: letter-spacing 520ms var(--ease);
}
.brand:hover, .brand:focus-visible { letter-spacing: 0.16em; }
.rail-menu:focus-visible, .brand:focus-visible { outline-offset: 2px; }

/* the menu: a full-height sheet that slides out from behind the rail */
.sheet {
  position: fixed; z-index: 35; top: 0; bottom: 0; left: var(--rail);
  width: min(560px, calc(100vw - var(--rail)));
  background: var(--paper); border-right: 1px solid var(--line);
  padding: clamp(28px, 6vh, 64px) clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  transform: translateX(-102%); visibility: hidden;
  transition: transform 640ms var(--ease-nav), visibility 0s linear 640ms;
  overflow-y: auto;
}
.sheet.is-open { transform: none; visibility: visible; transition: transform 640ms var(--ease-nav), visibility 0s; }
.sheet-nav { display: grid; gap: 4px; }
.nav-link {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(34px, min(4vw, 7vh), 60px); line-height: 1.12; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.3em; width: max-content;
  border: 0; background: transparent;
}
.nav-link::before {
  content: ""; width: 0; height: 1px; background: currentColor;
  transition: width 520ms var(--ease);
}
.nav-link:hover::before, .nav-link:focus-visible::before, .nav-link[aria-current="page"]::before { width: 0.9em; }
.sheet-foot { display: grid; gap: 14px; justify-items: start; }
.sheet .cta { margin-top: 4px; }

.panel-dismiss { position: fixed; inset: 0; z-index: 34; background: transparent; border: 0; display: none; cursor: default; }
.panel-dismiss.is-on { display: block; }

/* ---------- page frame ---------- */
.page { padding-left: var(--rail); }
.section { padding: clamp(72px, 14vh, 160px) var(--edge); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 24px; margin-bottom: clamp(40px, 8vh, 88px); }
.ink { background: var(--ink); color: var(--on-ink); }
.ink .small { color: var(--on-ink-3); }
.ink .button::before { background: var(--paper); }
.ink .button:hover, .ink .button:focus-visible { color: var(--ink); }

/* ---------- vertical pages: Portfolio, About, Investment, Blog, Contact ---------- */
.display.lg { font-size: clamp(34px, min(4.6vw, 8vh), 80px); max-width: 16ch; }
.display.md { font-size: clamp(26px, min(2.6vw, 4.6vh), 42px); max-width: 30ch; }
.intro { display: grid; gap: 32px; align-content: end; min-height: min(70svh, 720px); }
.intro .lede { max-width: 44ch; }
.split { display: grid; gap: clamp(32px, 5vw, 96px); align-items: center; }
.split.top { align-items: start; }
.split figure img { width: 100%; height: auto; }
.split .copy { display: grid; gap: 28px; justify-items: start; }
.band-still { padding: 0; overflow: hidden; }
.band-still img { width: 100%; height: 64svh; object-fit: cover; }
.statement-band .display { max-width: 30ch; }
.cta-band { display: grid; gap: 32px; justify-items: start; }
.section.ink { border-top: 0; }
.section.ink + .section { border-top: 0; }
.section.ink .quotes { max-width: 1100px; }

/* the gallery: whole frames at their own ratio, hand-placed in uneven rows */
.gallery { display: grid; gap: clamp(48px, 9vh, 120px); }
.g-row { display: grid; gap: clamp(16px, 2vw, 32px); }
.g-row figure img { width: 100%; height: auto; }

/* the post list */
.posts { display: grid; gap: clamp(64px, 12vh, 140px); }
.post-row { display: grid; gap: 28px; align-items: end; }
.post-row .pic { display: block; overflow: hidden; }
.post-row .pic img { width: 100%; height: auto; transition: transform 900ms var(--ease); }
.post-row .pic:hover img, .post-row .pic:focus-visible img { transform: scale(1.03); }
.post-row .copy { display: grid; gap: 16px; justify-items: start; }
.post-row h2 a { text-decoration: none; }

/* the inquiry form */
.form { display: grid; gap: 22px; max-width: 640px; }
.form .row2 { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--t-small); color: var(--muted); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 0; border-radius: 0; width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 0; border-bottom-color: var(--ink); }
.form .button { justify-self: start; cursor: pointer; background: transparent; }
.notes { display: grid; gap: 12px; max-width: 44ch; }

@media (min-width: 801px) {
  .split { grid-template-columns: 5fr 6fr; }
  .split.rev { grid-template-columns: 6fr 5fr; }
  .split.rev > :first-child { order: 2; }
  .split .narrow { max-width: 520px; }
  .g-row.r-a { grid-template-columns: 7fr 1fr 4fr; align-items: end; }
  .g-row.r-a > :nth-child(2) { grid-column: 3; }
  .g-row.r-b { grid-template-columns: 3fr 5fr 3fr; align-items: center; }
  .g-row.r-c { grid-template-columns: 1fr 4fr 1fr 6fr; align-items: start; }
  .g-row.r-c > :nth-child(1) { grid-column: 2; }
  .g-row.r-c > :nth-child(2) { grid-column: 4; }
  .g-row.r-d { grid-template-columns: 2fr 8fr 2fr; }
  .g-row.r-d > :nth-child(1) { grid-column: 2; }
  .g-row.r-e { grid-template-columns: 4fr 4fr 4fr; align-items: end; }
  .g-row.r-e > :nth-child(2) { margin-bottom: 12vh; }
  .post-row { grid-template-columns: 7fr 4fr; gap: clamp(32px, 4vw, 72px); }
  .post-row:nth-child(even) { grid-template-columns: 4fr 7fr; }
  .post-row:nth-child(even) .pic { order: 2; }
  .form .row2 { grid-template-columns: 1fr 1fr; }
}

/* the end of a post: the next story, back to the blog */
.post-end { display: grid; gap: 28px; align-content: center; justify-items: start; }
.post-end .next { display: grid; gap: 16px; text-decoration: none; }
.post-end .next img { width: clamp(220px, 22vw, 360px); height: auto; }
.post-end .next .display { font-size: clamp(24px, min(2.2vw, 4vh), 36px); }
.post-end .row { display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: center; }
.post-lede { max-width: 40ch; }
.is-h .track .post-end { width: clamp(520px, 40vw, 680px); padding: 0 clamp(48px, 6vw, 104px); }
.is-h .track .display.post { font-size: clamp(24px, min(2.3vw, 4.2vh), 38px); max-width: 24ch; }
.display.post { font-size: clamp(24px, 6.4vw, 38px); max-width: 24ch; }
@media (min-width: 801px) { .display.post { font-size: clamp(26px, 2.4vw, 40px); } }

/* ---------- footer: the same on every page, after the track ---------- */
.site-footer {
  padding: clamp(56px, 10vh, 112px) var(--edge) 40px calc(var(--rail) + var(--edge));
  border-top: 1px solid var(--line);
  display: grid; gap: 40px;
}
.foot-mark { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(56px, 9vw, 150px); line-height: 0.9; letter-spacing: -0.01em; text-decoration: none; }
.foot-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; align-items: start; }
.foot-nav { display: grid; gap: 2px; justify-items: start; }
.foot-nav a, .foot-row a { text-decoration: none; }
.foot-nav a:hover, .foot-row a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.foot-legal { color: var(--muted); font-size: var(--t-small); }

/* ---------- reveals: forward animates, going back resets instantly ---------- */
.js .rv { opacity: 0; transform: translate3d(0, 22px, 0); }
.js.is-h .track .rv { transform: translate3d(28px, 0, 0); }
.js .rv.in, .js.is-h .track .rv.in { opacity: 1; transform: none; transition: opacity 900ms var(--ease), transform 1100ms var(--ease); }
.is-dragging, .is-dragging * { cursor: grabbing; -webkit-user-select: none; user-select: none; }

/* =====================================================================
   THE TRACK (home and posts). Vertical by default; horizontal above 800px.
   ===================================================================== */
.track-wrap { position: relative; margin-left: var(--rail); }
.track-view { position: relative; }
.track { display: block; }
.chapter { position: relative; padding: clamp(56px, 10vh, 120px) var(--edge); }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter.ink + .chapter, .chapter + .chapter.ink, .chapter + .chapter.still, .chapter.still + .chapter { border-top: 0; }

.cover { position: relative; overflow: hidden; background: var(--paper-tint); }
.cover img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.frame { position: relative; }
.frame img { width: 100%; height: auto; }

/* the opening chapter: the tagline with a small photograph between its words */
.opening { min-height: calc(100svh - var(--bar)); display: grid; align-content: center; justify-items: center; text-align: center; gap: 40px; }
.title {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  font-size: var(--t-title); line-height: 1; letter-spacing: -0.02em;
}
.title .line { display: block; white-space: nowrap; }
.title.post-title { font-size: clamp(32px, min(4.6vw, 8.6vh), 88px); }
.title-photo { display: inline-block; vertical-align: top; width: 1.95em; margin: 0.06em 0.18em 0; }
.title-photo img { width: 100%; height: auto; }
.opening .byline { max-width: 34ch; }

.still { padding: 0; overflow: hidden; }
.still .still-img { position: relative; overflow: hidden; height: 70svh; }
.still .still-img img { width: 100%; height: 100%; object-fit: cover; }

.chapter-copy { display: grid; gap: 28px; align-content: center; }
.ink .display { color: var(--on-ink); }
.quotes { display: grid; gap: clamp(28px, 5vh, 48px); }
.quote { margin: 0; }
.quote p { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.16; font-size: clamp(22px, min(2vw, 3.6vh), 32px); max-width: 30ch; }
.quote:nth-child(2) p { color: var(--on-ink-2); }
.quote:nth-child(3) p { color: var(--on-ink-3); }

.blog-head { display: grid; gap: 24px; justify-items: start; }
.entries { display: grid; gap: 40px; }
.entry { display: grid; gap: 14px; }
.entry .pic { display: block; overflow: hidden; }
.entry .pic img { transition: transform 900ms var(--ease); }
.entry .pic:hover img, .entry .pic:focus-visible img { transform: scale(1.03); }
.entry h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(22px, min(1.8vw, 3.4vh), 30px); line-height: 1.1; letter-spacing: -0.01em; }
.entry h3 a { text-decoration: none; }

/* vertical (stacked) chapter internals */
.chapter .cover { aspect-ratio: 2 / 3; max-width: 520px; }
.chapter .stack { display: grid; gap: 40px; }
.chapter .frames { display: grid; gap: 20px; }
html:not(.is-h) .track .chapter > * + * { margin-top: clamp(32px, 6vh, 56px); }

/* ---- horizontal mode: the script adds .is-h to <html> when the track is live ---- */
.is-h .track-wrap { height: var(--track-h, 100vh); }
.is-h .track-view { position: sticky; top: 0; height: 100vh; overflow: clip; touch-action: pan-y; }
.is-h .track { display: flex; height: 100%; width: max-content; will-change: transform; }
.is-h .track .chapter { flex: none; height: 100vh; padding: var(--edge) 0; border: 0; display: flex; align-items: stretch; }
.is-h .track .chapter + .chapter { border-top: 0; }
.is-h .track .chapter .cover { height: 100%; width: auto; max-width: none; aspect-ratio: 2 / 3; flex: none; }
.is-h .track .chapter .cover.is-portrait-4x5 { aspect-ratio: 4 / 5; }
.is-h .track .chapter > .cover:first-child { margin-left: var(--edge); }
.is-h .track .chapter-copy { flex: none; padding: 0 clamp(48px, 6vw, 104px); }
.is-h .track .chapter-copy.w-wide { width: clamp(520px, 44vw, 720px); }
.is-h .track .chapter-copy.w-mid { width: clamp(440px, 36vw, 600px); }

.is-h .track .opening { width: calc(100vw - var(--rail) - 15vw); min-height: 0; padding: var(--edge); display: grid; place-content: center; justify-items: center; position: relative; }
.is-h .track .opening .byline { position: absolute; left: 0; right: 0; bottom: calc(var(--edge) + 16px); margin: 0 auto; }

.is-h .track .still { padding: 0; }
.is-h .track .still .still-img { height: 100vh; width: 132vh; }
.is-h .track .still .still-img img { width: calc(100% + 12vh); max-width: none; }

.is-h .track .frames { display: flex; align-items: flex-start; gap: clamp(40px, 4vw, 72px); padding-right: clamp(48px, 6vw, 104px); height: 100%; }
.is-h .track .frames .frame { flex: none; }
.is-h .track .frames .frame img { height: 100%; width: auto; }
.is-h .track .frames .f-tall { height: 78%; align-self: flex-end; }
.is-h .track .frames .f-wide { height: 52%; }
.is-h .track .frames .f-mid { height: 60%; align-self: center; }
.is-h .track .frames .f-low { height: 46%; align-self: flex-end; }

.is-h .track .ink { padding: var(--edge) 0; }
.is-h .track .ink .chapter-copy { width: clamp(720px, 70vw, 1120px); }
.is-h .track .quotes { grid-template-columns: 1fr 1fr; column-gap: 72px; }
.is-h .track .quotes .quote:first-child { grid-column: 1 / -1; }
.is-h .track .quotes .quote:first-child p { font-size: clamp(26px, min(2.6vw, 4.6vh), 44px); max-width: 32ch; }

.is-h .track .entries { grid-auto-flow: column; grid-auto-columns: clamp(260px, 21vw, 340px); gap: clamp(32px, 3vw, 56px); align-items: end; }
.is-h .track .blog-chapter .chapter-copy { width: auto; display: flex; align-items: center; gap: clamp(48px, 5vw, 96px); }
.is-h .track .blog-chapter .blog-head { width: clamp(380px, 30vw, 500px); display: grid; gap: 28px; }

.is-h .track .end-pad { flex: none; width: clamp(24px, 4vw, 64px); }

/* ---------- phones and narrow windows: the rail becomes a slim top bar ---------- */
@media (max-width: 800px) {
  :root { --rail: 0px; }
  .rail { right: 0; bottom: auto; width: auto; height: var(--bar); border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-row { grid-template-rows: none; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 calc(var(--edge) - 8px); }
  .rail-row .brand { grid-row: auto; }
  .rail-menu { justify-self: start; }
  .rail-progress { right: auto; top: auto; bottom: -1px; left: 0; width: 100%; height: 1px; transform-origin: left; transform: scaleX(0); }
  .brand { writing-mode: horizontal-tb; transform: none; font-size: 20px; }
  .page, .track-wrap { padding-top: var(--bar); }
  .sheet { left: 0; top: var(--bar); width: 100%; border-right: 0; transform: translateY(-104%); }
  .sheet.is-open { transform: none; }
  .site-footer { padding-left: var(--edge); }
  .foot-row { grid-template-columns: 1fr; }
  .chapter .cover { max-width: none; }
  .title, .title.post-title { font-size: clamp(32px, 10vw, 72px); }
  .title .line { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.in { opacity: 1; transform: none; transition: none; }
  .sheet, .sheet.is-open { transition: none; }
  .link::after, .button::before, .nav-link::before, .brand, .entry .pic img, .post-row .pic img { transition: none; }
}

  /* Mobile review: 44px hit areas (visual size unchanged), small-text floors and 16px form controls. */
  @media (max-width:820px){
    button.rail-menu{position:relative}
    button.rail-menu::after{content:"";position:absolute;inset:-10px -3px}
    .foot-nav a{position:relative}
    .foot-nav a::after{content:"";position:absolute;inset:-9px -7px}
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not(#_),select:not(#_),textarea:not(#_){font-size:16px}
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not(#_),select:not(#_){min-height:44px}
  }