/* v5 shared shell — palette, reset, topbar, services rows, baseline footer.
   Photo treatments live per-mock so each iteration can fully override. */

:root {
  /* Locked palette — used for text/halos OVER dark photos in BOTH modes
     (photos are always dark, so cream-on-photo always reads). */
  --paper: #f5f1e8;
  --paper-warm: #ede5d3;
  --paper-deep: #e3dcca;
  --vellum: rgba(245, 241, 232, 0.92);
  --ink: #14110d;
  --ink-soft: #4b463d;
  --ink-mute: #8a857a;
  --rule: rgba(20, 17, 13, 0.12);
  --rule-strong: rgba(20, 17, 13, 0.32);
  --accent: #8a3a1d;

  /* Theme-flippable semantic tokens — body surfaces use these. Light-mode
     defaults here; the @media block below redefines for dark. */
  --bg:          #ffffff;
  --bg-elev:     var(--paper-deep);          /* date pill */
  --fg:          var(--ink);
  --fg-soft:     var(--ink-soft);
  --fg-mute:     var(--ink-mute);
  --line:        var(--rule);
  --line-strong: var(--rule-strong);
  --halo:        rgba(255, 255, 255, 0.7);   /* nav-panel text legibility */
  --halo-soft:   rgba(255, 255, 255, 0.6);
  --frosted-bar: rgba(255, 255, 255, 0.65);  /* .topbar.brand-active bg */

  /* Decorative paper-line perimeter (frame-inset).
     Dialled in via inset-test.html: original clamp(28,4vw,56) shifted +10
     so the rectangle sits a touch farther from the viewport edge at every width. */
  --gutter-frame: clamp(38px, calc(4vw + 10px), 66px);
  /* The writing column. ALL on-page chrome and body content anchors here. */
  --gutter-x:     clamp(56px, 8vw, 120px);
  /* Vertical anchor for the top-bar brand row and the bottom-section CTA. */
  --gutter-y:     clamp(48px, 6vw, 96px);

  /* Chrome inset from frame corners — used by topbar padding, the home #hi
     brand position, and the home "see more" CTA. Side and vertical are
     independent; numbers were calibrated in inset-test.html and reflect the
     final values (side = frame + 40, vertical = frame + 23). */
  --inset-h: calc(var(--gutter-frame) + 40px);
  --inset-v: calc(var(--gutter-frame) + 23px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #14110d;                       /* warm near-black, mirrors --ink */
    --bg-elev:     #251f17;                       /* slightly lighter for date pill */
    --fg:          #f0ece0;
    --fg-soft:     #c0b9a8;
    --fg-mute:     #7a7466;
    --line:        rgba(245, 241, 232, 0.12);
    --line-strong: rgba(245, 241, 232, 0.32);
    --halo:        rgba(20, 17, 13, 0.7);
    --halo-soft:   rgba(20, 17, 13, 0.6);
    --frosted-bar: rgba(20, 17, 13, 0.65);
  }
}

@media (max-width: 720px) {
  :root {
    --gutter-frame: 14px;
    --gutter-x:     32px;
    --gutter-y:     32px;
  }
  /* On phones, the dynamic viewport (dvh) accounts for Safari's URL bar —
     a 720px floor would force the section taller than the visible area and
     leave a paper-coloured gap below it. */
  .photo-section { min-height: 0; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  /* background-color (long form) is what Chrome iOS / Safari 26 actually
     sample for the chrome-tint fallback when no fixed element supplies one. */
  background-color: var(--bg);
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--ink); color: var(--paper); }

.kicker { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--fg-soft); }

.mock-tag {
  position: fixed; top: 12px; right: 12px;
  background: rgba(20, 17, 13, 0.92); color: var(--paper);
  padding: 8px 14px; border-radius: 999px; font-size: 12px; letter-spacing: 0.06em;
  z-index: 10000; display: flex; gap: 12px; align-items: center;
}
.mock-tag a { opacity: 0.6; text-decoration: underline; text-underline-offset: 3px; }
.mock-tag a:hover { opacity: 1; }
.mock-tag .strong { font-weight: 600; }

/* topbar — fixed, contextual. Transparent by default; color flips for legibility
   (cream over photos, ink over body). .brand-active adds a translucent bar at
   the bottom of subpages so the brand reads cleanly over body content. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--inset-v) + env(safe-area-inset-top)) var(--inset-h) 12px;
  color: var(--paper);
  background: transparent;
  transition: color 240ms ease, background 240ms ease, backdrop-filter 240ms ease;
}
.topbar.solid { color: var(--fg); }
.topbar.brand-active {
  color: var(--fg);
  background: var(--frosted-bar);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* brand link: no chip. Halo over photos for paper-text legibility;
   none needed on the frosted bar (ink on translucent paper reads fine). */
.topbar .brand {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 1rem; letter-spacing: 0.04em;
  background: transparent;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.5);
  transition: text-shadow 240ms ease;
}
.topbar.solid .brand { text-shadow: none; }

/* services rows — same as v4 */
.services { background: var(--bg); padding: clamp(72px, 9vw, 128px) 0; }
.services .container { width: min(1180px, 92vw); margin: 0 auto; }
.services .head {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 48px; align-items: baseline;
  margin-bottom: clamp(40px, 6vw, 72px);
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.services .head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; line-height: 1; }
.services .head h2 em { color: var(--fg-soft); font-style: italic; }
.services .head .figure { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--fg-soft); font-size: 1.05rem; }
@media (max-width: 720px) { .services .head { grid-template-columns: 1fr; gap: 14px; } }

.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--line); transition: border-color 0.4s ease;
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row:hover { border-top-color: var(--line-strong); }
.row:hover + .row { border-top-color: var(--line-strong); }

.row .frame { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #2a2620; }
.row .frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.7s ease, transform 1.6s ease;
}
.row:hover .frame img { filter: grayscale(0) contrast(1); transform: scale(1.025); }
.row .frame::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(20, 17, 13, 0.06); transition: opacity 0.5s ease;
}
.row:hover .frame::after { opacity: 0; }

.row .body { display: flex; flex-direction: column; gap: 16px; padding: clamp(8px, 2vw, 18px) 0; }
.row .meta-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; color: var(--fg-mute); }
.row .num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 1.45rem; color: var(--fg-soft); }
.row .date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--fg); background: var(--bg-elev);
  padding: 4px 10px; border-radius: 2px;
}
.row .tag {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 1rem; color: var(--fg-soft);
}
.row .title {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  letter-spacing: -0.02em; line-height: 0.95; color: var(--fg);
}
.row .title em { font-style: italic; font-weight: 400; color: var(--fg-mute); transition: color 0.5s ease; }
.row:hover .title em { color: var(--fg); }
.row p { color: var(--fg-soft); max-width: 46ch; font-size: 1rem; line-height: 1.55; }
.row .receipts {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 0.95rem; color: var(--fg-mute); margin-top: -8px;
}
.row .receipts span:not(:last-child)::after { content: '·'; margin-left: 14px; color: var(--line-strong); }
.row:hover .receipts { color: var(--fg-soft); }

.row.r-right .frame { order: 2; }
.row.r-right .body { order: 1; }

@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; gap: 18px; }
  .row.r-right .frame { order: 0; }
  .row.r-right .body { order: 1; }
}

/* baseline footer — quiet one-liner under whatever closing element */
footer.baseline {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 22px 32px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem; letter-spacing: 0.06em; color: var(--fg-mute);
}
footer.baseline em { font-style: italic; }
footer.baseline a { color: var(--fg-soft); }
footer.baseline a:hover { color: var(--fg); }
footer.baseline .right { display: flex; gap: 18px; }

/* shared photo-section base — height + background-image hooks.
   100dvh (dynamic) accounts for iOS Safari's collapsing URL bar; 100vh stays
   as the fallback for browsers without dvh support. */
.photo-section {
  position: relative; min-height: 720px;
  height: 100vh;
  height: 100dvh;
  background-size: cover; background-repeat: no-repeat;
  overflow: hidden;
}
.photo-section.top { background-image: url('../img/Seattle-2400.jpg'); background-position: center 40%; }
.photo-section.bot { background-image: url('../img/NewYork-2400.jpg'); background-position: center 30%; }