/* =====================================================================
   ZEN RENO & DESIGN — THE COASTAL FOLIO
   A sunlit printed-folio design system. All values from DESIGN_SPEC v1.0.
   Palette from Lindsay's mandala. No navy, no gold. Serif throughout.
   ===================================================================== */

/* ---------- Fonts (self-hosted variable woff2) ---------- */
@font-face{
  font-family:"Newsreader";
  src:url("/assets/fonts/newsreader-var-roman.woff2?v=2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("/assets/fonts/newsreader-var-italic.woff2?v=2") format("woff2");
  font-weight:200 800; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Literata";
  src:url("/assets/fonts/literata-var-roman.woff2?v=2") format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Literata";
  src:url("/assets/fonts/literata-var-italic.woff2?v=2") format("woff2");
  font-weight:200 900; font-style:italic; font-display:swap;
}
/* CLS-tuned fallbacks */
@font-face{ font-family:"Literata-fallback"; src:local("Georgia");
  size-adjust:103%; ascent-override:92%; descent-override:24%; line-gap-override:0%; }
@font-face{ font-family:"Newsreader-fallback"; src:local("Georgia");
  size-adjust:98%; ascent-override:94%; descent-override:24%; line-gap-override:0%; }

/* ---------- Tokens ---------- */
:root{
  /* grounds */
  --paper:#F8F3EA; --paper-2:#F2EBDD; --paper-3:#EBE2CF; --sheet:#FDFBF6;
  /* inks */
  --ink:#2E3538; --charcoal:#3F4447;
  /* teal working ink */
  --jade:#3C8C8C; --jade-deep:#22666A; --jade-tint:rgba(60,140,140,.08); --sea:#8CC8C4;
  /* pine dark register */
  --pine:#2F4B4B; --pine-deep:#243C3C;
  /* terracotta second ink */
  --clay:#B4503C; --clay-deep:#A03A28; --clay-bright:#C85050;
  /* lines */
  --hairline:rgba(47,75,75,.28); --hairline-pine:rgba(248,243,234,.22); --line-field:#6E7D7A;

  /* type */
  --serif:"Newsreader","Newsreader-fallback",Georgia,serif;
  --body:"Literata","Literata-fallback",Georgia,serif;
  --fs-hero:clamp(2.6rem,1.84rem + 3.8vw,4rem);
  --fs-d1:clamp(2.2rem,1.68rem + 2.6vw,3.2rem);
  --fs-d2:clamp(1.75rem,1.45rem + 1.5vw,2.35rem);
  --fs-d3:clamp(1.4rem,1.28rem + 0.6vw,1.65rem);
  --fs-accent:clamp(1.25rem,1.2rem + 0.25vw,1.375rem);
  --fs-lede:clamp(1.25rem,1.19rem + 0.3vw,1.375rem);
  --fs-body:1.1875rem;
  --fs-meta:0.875rem;

  /* space scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* containers */
  --w-page:1200px; --w-wide:1080px; --w-prose:660px; --w-ledger:640px; --w-booking:1040px;

  /* motion */
  --ease-tide:cubic-bezier(.19,.66,.22,1);
  --ease-set:cubic-bezier(.4,0,.2,1);
  --t-micro:250ms; --t-hover:350ms; --t-reveal:750ms; --t-plate:900ms; --t-rule:700ms;

  /* warm ambient elevation for tipped-in plates (never black) */
  --lift:0 1px 1px rgba(58,46,34,.05), 0 12px 30px -16px rgba(58,46,34,.24), 0 4px 12px -8px rgba(47,75,75,.10);
  --lift-hover:0 2px 4px rgba(58,46,34,.07), 0 22px 46px -20px rgba(58,46,34,.30), 0 6px 16px -8px rgba(47,75,75,.14);
  /* display tracking */
  --track-d1:-0.014em; --track-d2:-0.008em;
  color-scheme:light;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; font-kerning:normal; font-variant-ligatures:common-ligatures;
  scroll-behavior:smooth; -webkit-tap-highlight-color:rgba(60,140,140,.14); overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--fs-body); font-weight:400; line-height:1.72;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; }
img,picture,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:var(--jade-deep); }

/* D2 - fixed overhead light + faint paper tooth; body{background} stays the fallback */
body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(120% 78% at 50% -8%, var(--sheet), var(--paper) 52%, var(--paper-2) 112%); }
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:220px 220px; opacity:.022; }
@media (prefers-reduced-transparency:reduce){ body::after{ display:none; } }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; color:var(--ink); margin:0;
  text-wrap:balance; font-optical-sizing:auto; }
p,li,dd{ text-wrap:pretty; }
p{ margin:0 0 1.15em; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--jade-deep); color:var(--paper); }
:focus-visible{ outline:2px solid var(--jade-deep); outline-offset:3px; border-radius:2px; }
.price,.counter,.folio,.catalog-no,time,.tnum{ font-variant-numeric:tabular-nums lining-nums; }

/* skip link */
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--pine);
  color:var(--paper); padding:12px 20px; font-family:var(--body); font-weight:600; }
.skip:focus{ left:12px; top:12px; }

/* ---------- Prose links ---------- */
.prose a,a.txt{ text-decoration:underline; text-decoration-thickness:1.5px;
  text-underline-offset:.16em; text-decoration-skip-ink:auto; text-decoration-color:var(--jade-deep);
  transition:text-decoration-thickness var(--t-micro) var(--ease-set), color var(--t-micro) var(--ease-set); }
.prose a:hover,a.txt:hover{ text-decoration-thickness:2.5px; color:var(--jade-deep); }

/* =====================================================================
   PETAL + RULES + MARK
   ===================================================================== */
.petal{ --petal-size:10px; --petal-ink:var(--jade);
  inline-size:var(--petal-size); block-size:var(--petal-size);
  background:var(--petal-ink); border-radius:0 62% 0 62%; transform:rotate(45deg); flex:none; }
.petal.clay{ --petal-ink:var(--clay); }
.petal.sea{ --petal-ink:var(--sea); }

.rule-petal{ display:flex; align-items:center; gap:16px; margin:var(--s7) 0; }
.rule-petal::before,.rule-petal::after{ content:""; flex:1; block-size:1px; background:var(--hairline);
  transform:scaleX(0); transition:transform var(--t-rule) var(--ease-tide); }
.rule-petal .petal{ transform:rotate(45deg) scale(.6); opacity:0; transition:opacity 400ms var(--ease-tide) 250ms, transform 400ms var(--ease-tide) 250ms; }
.rule-petal.is-in::before{ transform-origin:right; transform:scaleX(1); }
.rule-petal.is-in::after{ transform-origin:left; transform:scaleX(1); }
.rule-petal.is-in .petal{ opacity:1; transform:rotate(45deg) scale(1); }
.chapter-pine .rule-petal::before,.chapter-pine .rule-petal::after{ background:var(--hairline-pine); }

/* kicker */
.kicker{ font-family:var(--body); font-weight:600; font-size:var(--fs-meta);
  letter-spacing:.14em; text-transform:uppercase; color:var(--charcoal);
  display:inline-flex; align-items:center; gap:10px; margin:0 0 var(--s4); }
.kicker .petal{ --petal-size:8px; }
.chapter-pine .kicker{ color:var(--sea); }
.kicker.clay{ color:var(--clay-deep); }
.kicker.clay .petal{ --petal-ink:var(--clay); }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.wrap{ width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
.prose{ max-width:var(--w-prose); }
.prose.center{ margin-inline:auto; }
section{ padding-block:clamp(72px,9vw,128px); }
section.tight{ padding-block:clamp(48px,6vw,80px); }
[id]{ scroll-margin-top:96px; }

/* =====================================================================
   HEADER
   ===================================================================== */
.header{ position:sticky; top:0; z-index:100; background:var(--paper);
  border-bottom:1px solid var(--hairline); }
.header-in{ max-width:var(--w-page); margin-inline:auto; padding:0 clamp(20px,5vw,48px);
  height:76px; display:flex; align-items:center; justify-content:space-between; gap:var(--s6); }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); flex:none; }
.brand svg{ width:40px; height:40px; color:var(--jade-deep); flex:none; }
.brand b{ font-family:var(--serif); font-weight:500; font-size:1.25rem; letter-spacing:.005em; white-space:nowrap; }
.nav{ display:flex; align-items:center; gap:40px; }
.nav a{ font-family:var(--serif); font-weight:500; font-size:1rem; color:var(--ink);
  text-decoration:none; position:relative; padding-block:6px; }
.nav a .petal{ --petal-size:7px; position:absolute; left:50%; bottom:-4px; translate:-50% 0;
  scale:0; transition:scale 300ms var(--ease-set); }
.nav a:hover .petal{ scale:1; }
.nav a[aria-current="page"]{ font-weight:560; }
.nav a[aria-current="page"] .petal{ scale:1; }
.header .btn{ flex:none; }
.burger{ display:none; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:0.9375rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  min-height:52px; padding:0 28px; border:1px solid transparent; border-radius:2px;
  position:relative; transition:background var(--t-micro) var(--ease-set), color var(--t-micro) var(--ease-set), border-color var(--t-micro) var(--ease-set); }
.btn-primary{ background:var(--pine); color:var(--paper); }
.btn-primary::after{ content:""; position:absolute; inset:4px; border:1px solid transparent; border-radius:1px;
  transition:border-color var(--t-micro) var(--ease-set); pointer-events:none; }
.btn-primary:hover{ background:var(--pine-deep); }
.btn-primary:hover::after{ border-color:rgba(248,243,234,.55); }
.btn-primary:active{ translate:0 1px; }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--hairline);
  overflow:hidden; }
.btn-secondary::before{ content:""; position:absolute; inset:0; background:var(--jade-tint);
  transform:translateY(101%); transition:transform var(--t-hover) var(--ease-tide); z-index:-1; }
.btn-secondary:hover{ border-color:var(--jade-deep); }
.btn-secondary:hover::before{ transform:translateY(0); }
.btn-ivory{ background:transparent; color:var(--paper); border-color:rgba(248,243,234,.5); }
.btn-ivory:hover{ background:rgba(248,243,234,.1); border-color:var(--paper); }

/* =====================================================================
   PLATE PRESS + REGISTRY CAPTION
   ===================================================================== */
.plate{ position:relative; background:var(--sheet); padding:6px; border:1px solid rgba(47,75,75,.32);
  box-shadow:var(--lift); transition:box-shadow 600ms var(--ease-tide); }
.plate:hover,.plate:focus-within{ box-shadow:var(--lift-hover); }
.chapter-pine .plate{ box-shadow:0 18px 44px -22px rgba(0,0,0,.55); }
.toc-thumb .plate,.pthumb .plate{ box-shadow:none; }
.ba .plate{ box-shadow:0 6px 16px -12px rgba(58,46,34,.20); }
.cover-plate .plate{ box-shadow:var(--lift-hover); }
.plate > img{ display:block; width:100%; height:auto; }
.plate::after{ content:""; position:absolute; inset:0; z-index:-1;
  border:1px solid rgba(60,140,140,.45);
  transform:translate(var(--press,8px),var(--press,8px));
  transition:transform 600ms var(--ease-tide), border-color var(--t-hover) var(--ease-tide); }
.plate:hover::after,.plate:focus-within::after{ --press:3px; }
@media (prefers-reduced-motion:reduce){ .plate::after{ --press:3px; } .plate{ transition:none; } }
@media print{ .plate::after{ --press:3px; } }

.registry{ margin-top:12px; }
.registry .loc{ font-family:var(--body); font-weight:600; font-size:0.875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--charcoal); display:inline-flex; align-items:center; gap:8px; }
.registry .loc .petal{ --petal-size:8px; }
.registry .loc time{ color:var(--charcoal); }
.registry .ttl{ font-family:var(--serif); font-weight:500; font-size:1.0625rem; color:var(--ink);
  margin-top:2px; }

.aspect{ position:relative; overflow:hidden; }
.aspect img{ width:100%; height:100%; object-fit:cover; }
.r45{ aspect-ratio:4/5; } .r34{ aspect-ratio:3/4; } .r32{ aspect-ratio:3/2; }
.r1610{ aspect-ratio:16/10; } .r11{ aspect-ratio:1/1; }

/* =====================================================================
   MANDALA STAMP + SEAL
   ===================================================================== */
.stamp{ position:absolute; z-index:0; pointer-events:none; color:var(--pine); opacity:.06;
  width:clamp(240px,32vw,420px); height:clamp(240px,32vw,420px); }
.stamp svg{ width:100%; height:100%; }
.stamp.tl{ top:-6%; left:-4%; } .stamp.tr{ top:-6%; right:-4%; }
.stamp.bl{ bottom:-6%; left:-4%; } .stamp.br{ bottom:-6%; right:-4%; }
.chapter-pine .stamp{ color:var(--paper); opacity:.11; }
.seal{ color:var(--jade-deep); }

/* =====================================================================
   PINE CHAPTER
   ===================================================================== */
.chapter-pine{
  background:
    radial-gradient(100% 68% at 50% 24%, rgba(140,200,196,.13), rgba(140,200,196,0) 58%),
    linear-gradient(180deg,#2F4B4B,#243C3C);
  color:var(--paper); position:relative; overflow:hidden; }
.chapter-pine::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  box-shadow:inset 0 90px 120px -80px rgba(0,0,0,.42), inset 0 -110px 150px -90px rgba(0,0,0,.5); }
.chapter-pine ::selection{ background:var(--paper); color:var(--pine-deep); }
.chapter-pine .quote{ font-family:var(--serif); font-weight:500; font-size:var(--fs-d2);
  line-height:1.32; color:var(--paper); max-width:22ch; }
.chapter-pine .attr{ font-family:var(--body); font-weight:600; font-size:0.875rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sea); margin-top:var(--s5); }
.chapter-pine .wrap{ position:relative; z-index:1; }

/* =====================================================================
   LEDGER (forms, prices, booking)
   ===================================================================== */
.ledger{ position:relative; background:var(--sheet); border:1px solid rgba(47,75,75,.32);
  padding:clamp(28px,4vw,48px); }
.ledger::before{ content:""; position:absolute; inset:5px; border:1px solid rgba(47,75,75,.22); pointer-events:none; }
.ledger > *{ position:relative; }

/* =====================================================================
   TYPE HELPERS
   ===================================================================== */
.hero-h1{ font-size:var(--fs-hero); line-height:1.08; letter-spacing:-.01em; }
.d1{ font-size:var(--fs-d1); line-height:1.08; letter-spacing:var(--track-d1); }
.d2{ font-size:var(--fs-d2); line-height:1.16; letter-spacing:var(--track-d2); }
.d3{ font-size:var(--fs-d3); line-height:1.28; letter-spacing:-0.004em; }
.lede{ font-size:var(--fs-lede); line-height:1.58; color:var(--ink); max-width:60ch; text-wrap:balance; }
.accent{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:var(--fs-accent);
  line-height:1.45; color:var(--jade-deep); }
.muted{ color:var(--charcoal); }
.center{ text-align:center; }

/* =====================================================================
   TITLE BAND (linen)
   ===================================================================== */
.band{ background:var(--paper-2); position:relative; overflow:hidden; }
.band.deep{ background:var(--paper-3); }
.grain::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:240px 240px; opacity:.02; mix-blend-mode:multiply; }
@media (prefers-reduced-transparency:reduce){ .grain::before{ display:none; } }
.band .wrap,.chapter-pine .wrap{ position:relative; z-index:1; }
.crumbs{ font-family:var(--body); font-weight:600; font-size:0.875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--charcoal); margin:0 0 var(--s5); }
.crumbs a{ color:var(--charcoal); text-decoration:none; }
.crumbs a:hover{ color:var(--jade-deep); text-decoration:underline; }
.crumbs span{ margin:0 8px; opacity:.5; }

/* =====================================================================
   HERO (home cover)
   ===================================================================== */
.cover{ display:grid; grid-template-columns:5fr 6fr; gap:var(--s8); align-items:center;
  padding-block:clamp(48px,6vw,88px); }
.cover-plate{ align-self:stretch; }
.cover .btn-row{ display:flex; align-items:center; gap:var(--s6); flex-wrap:wrap; margin-top:var(--s6); }

/* =====================================================================
   SERVICE TOC ROWS
   ===================================================================== */
.toc-row{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--s6); align-items:center;
  padding:var(--s6) 0; border-top:1px solid var(--hairline); text-decoration:none; color:inherit;
  transition:background var(--t-hover) var(--ease-set); position:relative; }
.toc-row:last-child{ border-bottom:1px solid var(--hairline); }
.toc-row::before{ content:""; position:absolute; left:-16px; top:0; bottom:0; width:2px;
  background:var(--jade-deep); transform:scaleY(0); transform-origin:top; transition:transform var(--t-hover) var(--ease-tide); }
.toc-row:hover{ background:var(--jade-tint); }
.toc-row:hover::before{ transform:scaleY(1); }
.toc-num{ font-family:var(--serif); font-size:1.5rem; color:var(--jade-deep); font-variant-numeric:tabular-nums; }
.toc-body h3{ margin-bottom:4px; }
.toc-body p{ margin:0; color:var(--charcoal); font-size:1.0625rem; }
.toc-thumb{ width:120px; flex:none; }
.toc-row:hover .toc-body h3{ text-decoration:underline; text-decoration-color:var(--jade-deep);
  text-underline-offset:.16em; text-decoration-thickness:1.5px; }

/* =====================================================================
   PLATE WALL (portfolio / featured)
   ===================================================================== */
.wall{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s8) var(--s7); align-items:start; }
.wall .item:nth-child(even){ margin-top:var(--s8); }
.wall.three{ grid-template-columns:repeat(2,1fr); }
@media (min-width:1440px){ .wall.three{ grid-template-columns:repeat(3,1fr); } }
.item a{ text-decoration:none; color:inherit; display:block; }

/* list dashes */
.dashes{ list-style:none; padding:0; margin:0; }
.dashes li{ position:relative; padding-left:28px; margin-bottom:var(--s3); }
.dashes li::before{ content:""; position:absolute; left:0; top:.72em; width:14px; height:1.5px;
  background:var(--jade-deep); }

/* two-col */
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6) var(--s8); }
.split{ display:grid; gap:var(--s8); align-items:center; }
.split.a{ grid-template-columns:7fr 5fr; }
.split.b{ grid-template-columns:5fr 7fr; }
.split.even{ grid-template-columns:1fr 1fr; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-item{ border-top:1px solid var(--hairline); }
.faq-item:last-child{ border-bottom:1px solid var(--hairline); }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5);
  padding:var(--s6) 0; min-height:56px; }
.faq-q h3{ font-size:var(--fs-d3); }
.faq-tog{ flex:none; margin-top:.4em; transition:transform 300ms var(--ease-set); }
.faq-tog .petal{ --petal-size:14px; }
.faq-item.open .faq-tog{ transform:rotate(135deg); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height 450ms var(--ease-tide); }
.faq-a-in{ min-height:0; }
.faq-a-in .prose{ padding-bottom:var(--s6); }
@media (prefers-reduced-motion:reduce){ .faq-a{ transition:none; } }

/* =====================================================================
   FORMS (boxed fields in ledger)
   ===================================================================== */
.field{ margin-bottom:var(--s5); }
.field label{ display:block; font-family:var(--body); font-weight:600; font-size:1rem;
  color:var(--ink); margin-bottom:var(--s2); }
.field .req{ color:var(--charcoal); font-weight:400; }
.field input,.field select,.field textarea{ width:100%; font-family:var(--body); font-size:1.125rem;
  color:var(--ink); background:var(--paper); border:1px solid var(--line-field); border-radius:2px;
  padding:14px 16px; min-height:56px; transition:border-color var(--t-micro) var(--ease-set); }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-width:2px; border-color:var(--jade-deep); outline:none; }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--jade-deep); outline-offset:2px; }
.field{ position:relative; }
.field.ok::after{ content:""; position:absolute; right:14px; top:42px; width:10px; height:10px;
  background:var(--jade); border-radius:0 62% 0 62%; transform:rotate(45deg); }
.field .err{ color:var(--clay-deep); font-size:1rem; margin-top:var(--s2); display:none; align-items:center; gap:8px; }
.field.bad input,.field.bad select{ border-color:var(--clay-deep); border-width:2px; }
.field.bad .err{ display:flex; }
.field .err::before{ content:""; width:10px; height:10px; background:var(--clay); border-radius:0 62% 0 62%; transform:rotate(45deg); flex:none; }
.checks{ display:grid; gap:var(--s3); }
.check{ display:flex; align-items:center; gap:12px; cursor:pointer; min-height:32px; font-size:1.0625rem; }
.check input{ width:24px; height:24px; min-height:24px; accent-color:var(--jade-deep); flex:none; }
.price-tag{ font-family:var(--serif); font-weight:500; font-size:1.5rem; font-variant-numeric:tabular-nums; }
.price-tag .ink-2{ color:var(--clay-deep); }
.form-ok{ display:none; text-align:center; }
.form-ok .seal{ width:64px; height:64px; margin:0 auto var(--s5); color:var(--clay); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ background:var(--paper-3); position:relative; overflow:hidden; padding-block:var(--s9) var(--s6); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--s7); }
.footer h4{ font-family:var(--body); font-weight:600; font-size:0.875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--charcoal); margin-bottom:var(--s4); }
.footer a{ color:var(--ink); text-decoration:none; display:inline-block; margin-bottom:10px; }
.footer a:hover{ text-decoration:underline; text-decoration-color:var(--jade-deep); text-underline-offset:.16em; }
.footer .brand-col .seal{ width:44px; height:44px; margin-bottom:var(--s4); }
.footer .desc{ font-size:1rem; color:var(--charcoal); line-height:1.6; max-width:34ch; }
.footer-bottom{ margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }
.folio{ font-family:var(--body); font-weight:600; font-size:0.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--charcoal); }
.footer-bottom .legal{ font-size:0.875rem; color:var(--charcoal); }

/* =====================================================================
   REVEALS
   ===================================================================== */
.js .r{ opacity:0; transform:translateY(16px); transition:opacity var(--t-reveal) var(--ease-tide), transform var(--t-reveal) var(--ease-tide); }
.js .r.is-in{ opacity:1; transform:none; }
.js [data-stagger] > *{ opacity:0; transform:translateY(16px); transition:opacity var(--t-reveal) var(--ease-tide), transform var(--t-reveal) var(--ease-tide); }
.js [data-stagger].is-in > *{ opacity:1; transform:none; }
/* A2 - index-driven cascade (replaces the hard 4-child nth-child caps) */
.js [data-stagger].is-in > *{ transition-delay: calc(var(--i,0) * 80ms); }
/* developing print */
.js .plate.dev{ position:relative; }
.js .plate.dev .aspect::after,.js .plate.dev > img + .devcover,.js .plate.dev .devcover{
  content:""; position:absolute; inset:6px; background:var(--paper); opacity:.85; z-index:2;
  transition:opacity var(--t-plate) var(--ease-tide); pointer-events:none; }
.js .plate.dev.is-in .devcover{ opacity:0; }
/* C1 - the offset keyline settles into register as each print develops on reveal (no wipe) */
.js .plate.dev::after{ --press:14px; }
.js .plate.dev.is-in::after{ --press:8px; }
.js .plate.dev.is-in:hover::after,
.js .plate.dev.is-in:focus-within::after{ --press:3px; }
@media (prefers-reduced-motion:reduce){
  .js .r,.js [data-stagger] > *{ opacity:1 !important; transform:none !important; transition:opacity 200ms; }
  .js .plate.dev .devcover{ opacity:0 !important; }
  .js .plate.dev::after,.js .plate.dev.is-in::after{ --press:3px; }
}

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.lb{ position:fixed; inset:0; z-index:300; background:rgba(36,60,60,.94);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); display:none;
  flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(16px,3vw,44px); gap:16px; }
.lb.on{ display:flex; }
/* the mat hugs the photo (flex shrink-to-fit); caption is a separate element below, so a long
   caption can never stretch the frame and shrink the image */
.lb-figure{ position:relative; display:flex; background:var(--sheet); padding:8px;
  border:1px solid rgba(248,243,234,.5); box-shadow:0 30px 80px rgba(0,0,0,.5);
  max-width:94vw; max-height:82vh;
  opacity:0; scale:.985; transition:opacity 360ms var(--ease-set), scale 560ms var(--ease-tide); }
.lb-figure.is-shown{ opacity:1; scale:1; }
.lb-figure img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:none; }
.lb .lb-cap{ position:static; margin:0; text-align:center; max-width:78ch;
  color:var(--sea); font-family:var(--body); font-weight:600; font-size:var(--fs-meta);
  letter-spacing:.12em; text-transform:uppercase; line-height:1.5; }
@media (prefers-reduced-motion:reduce){ .lb-figure{ transition:opacity 200ms; scale:none; } }
.lb-count{ position:absolute; top:24px; left:24px; color:var(--paper); font-variant-numeric:tabular-nums;
  font-family:var(--body); font-size:1rem; letter-spacing:.1em; }
.lb button{ position:absolute; width:56px; height:56px; border:1px solid rgba(248,243,234,.4);
  background:transparent; color:var(--paper); font-size:1.4rem; cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background var(--t-micro); }
.lb button:hover{ background:rgba(248,243,234,.12); }
.lb-x{ top:24px; right:24px; }
.lb-p{ left:24px; top:50%; translate:0 -50%; }
.lb-n{ right:24px; top:50%; translate:0 -50%; }
[data-lb]{ cursor:zoom-in; }

/* =====================================================================
   BEFORE / AFTER
   ===================================================================== */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:start; }
.ba .chip{ font-family:var(--body); font-weight:600; font-size:0.875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--charcoal); background:var(--paper); display:inline-flex;
  align-items:center; gap:8px; padding:6px 12px; margin-bottom:10px; }
.ba .chip .petal{ --petal-size:8px; }
.ba .before .chip .petal{ --petal-ink:var(--clay); }
.ba .after .chip .petal{ --petal-ink:var(--jade); }

/* =====================================================================
   CARDS / BOOKING
   ===================================================================== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); align-items:start; }
.booking-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; max-width:var(--w-booking); margin-inline:auto; }
.embed-frame{ border:1px solid var(--hairline); background:var(--sheet); min-height:900px; }
.embed-frame iframe{ width:100%; min-height:900px; border:0; }

/* meta rows (registry list) */
.reg-list{ list-style:none; padding:0; margin:0; }
.reg-list li{ display:flex; justify-content:space-between; gap:var(--s5); padding:var(--s4) 0;
  border-top:1px solid var(--hairline); }
.reg-list li:last-child{ border-bottom:1px solid var(--hairline); }
.reg-list .k{ font-family:var(--serif); font-size:1.0625rem; }
.reg-list .v{ color:var(--charcoal); text-align:right; }

/* blog rows */
.post-row{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--s6); align-items:center;
  padding:var(--s6) 0; border-top:1px solid var(--hairline); text-decoration:none; color:inherit; }
.post-row:last-child{ border-bottom:1px solid var(--hairline); }
.post-row .date{ font-family:var(--body); font-weight:600; font-size:0.875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--charcoal); white-space:nowrap; }
.post-row .pthumb{ width:160px; flex:none; }
.post-row:hover h3{ text-decoration:underline; text-decoration-color:var(--jade-deep); text-underline-offset:.16em; }

/* pull quote (D5 - left-set, hung opening mark) */
.pull{ font-family:var(--serif); font-weight:500; font-size:var(--fs-d2); line-height:1.32;
  color:var(--ink); max-width:32ch; margin-block:var(--s8); text-align:left; position:relative;
  letter-spacing:-0.006em; }
.pull .mark{ position:absolute; left:0; top:0; transform:translateX(-100%); padding-right:.1em; color:var(--jade-deep); }
@media (max-width:400px){ .prose .pull{ padding-left:.5em; } }

/* scroll cue */
.cue{ display:flex; justify-content:center; margin-top:var(--s6); }
.cue .petal{ --petal-size:10px; animation:drift 2.4s ease-in-out infinite; }
@keyframes drift{ 0%,100%{ transform:rotate(45deg) translateY(0); } 50%{ transform:rotate(45deg) translateY(8px); } }
@media (prefers-reduced-motion:reduce){ .cue .petal{ animation:none; } }

.eyebrow-note{ font-family:var(--serif); font-style:italic; color:var(--jade-deep); }
.text-link{ font-family:var(--body); font-weight:600; font-size:0.9375rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--jade-deep); text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.text-link:hover{ text-decoration:underline; text-underline-offset:.16em; }
.text-link::after{ content:"\2192"; transition:transform var(--t-micro) var(--ease-set); }
.text-link:hover::after{ transform:translateX(4px); }

/* trust band */
.trust{ display:flex; gap:var(--s8); flex-wrap:wrap; align-items:center; justify-content:center; }
.trust .stat{ text-align:center; }
.trust .stat b{ font-family:var(--serif); font-weight:500; font-size:2rem; display:block; font-variant-numeric:tabular-nums; }
.trust .stat span{ font-family:var(--body); font-weight:600; font-size:0.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .split.a,.split.b,.split.even{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--s7); }
  .wall .item:nth-child(even){ margin-top:var(--s5); }
}
/* nav collapses earlier than layout to avoid header overflow */
@media (max-width:1040px){
  .nav,.header .btn.desk{ display:none; }
  .burger{ display:inline-flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer;
    font-family:var(--body); font-weight:600; font-size:0.875rem; letter-spacing:.12em; text-transform:uppercase; min-height:48px; }
  .burger .bars{ display:inline-flex; flex-direction:column; gap:5px; }
  .burger .bars i{ width:22px; height:1.5px; background:var(--ink); display:block; }
}
@media (max-width:900px){
  .cover{ grid-template-columns:1fr; gap:var(--s6); }
  .cards{ grid-template-columns:1fr; }
  .booking-grid{ grid-template-columns:1fr; }
  .cols2{ grid-template-columns:1fr; }
}
@media (max-width:400px){
  .header-in{ gap:var(--s4); }
  .brand b{ font-size:1.05rem; }
  .brand svg{ width:34px; height:34px; }
  .burger-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}
@media (max-width:720px){
  .header-in{ height:64px; }
  .wall,.wall.three{ grid-template-columns:1fr; }
  .wall .item:nth-child(even){ margin-top:0; }
  .ba{ grid-template-columns:1fr; }
  .toc-row{ grid-template-columns:auto 1fr; }
  .toc-thumb{ display:none; }
  .post-row{ grid-template-columns:1fr; gap:var(--s3); }
  .post-row .pthumb{ display:none; }
  .reg-list li{ flex-direction:column; gap:4px; }
  .reg-list .v{ text-align:left; }
  .footer-grid{ grid-template-columns:1fr; }
  .stamp{ max-width:220px; max-height:220px; }
}

/* mobile menu */
.mmenu{ position:fixed; inset:0; z-index:150; background:var(--paper); padding:var(--s8) clamp(20px,6vw,40px);
  display:none; flex-direction:column; gap:var(--s5); overflow-y:auto; }
.mmenu.on{ display:flex; }
body.menu-open{ overflow:hidden; }
.mmenu a{ font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--ink); text-decoration:none;
  padding:var(--s3) 0; border-bottom:1px solid var(--hairline); display:flex; align-items:center; gap:12px; }
.mmenu .m-contact{ margin-top:var(--s5); font-family:var(--body); font-size:1.0625rem; }
.mmenu .m-contact a{ font-family:var(--body); font-size:1.0625rem; border:0; padding:4px 0; }
.mmenu-x{ align-self:flex-end; background:none; border:0; font-family:var(--body); font-weight:600;
  font-size:0.875rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; min-height:48px; }
@media (prefers-reduced-motion:reduce){ .mmenu{ transition:none; } }

/* utility */
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.stack > * + *{ margin-top:var(--s5); }
.stack-lg > * + *{ margin-top:var(--s8); }
.hide{ display:none; }
.eyebrow{ display:block; }

/* =====================================================================
   WORLD-CLASS ELEVATION (A1, A3, B1, B3, B4, D6, F3, F4)
   ===================================================================== */

/* A1 - oversized wordmark + first-viewport air (home cover only) */
.cover{ padding-block:clamp(64px,9vw,120px); }
.cover .hero-h1{ font-size:clamp(2.9rem, 1.9rem + 4.6vw, 5rem); line-height:1.02; letter-spacing:-.022em; }
.cover .accent{ font-size:clamp(1.3rem, 1.2rem + .5vw, 1.6rem); }

/* A3 - let the two post-cover beats each arrive alone */
.chapter-pine{ padding-block:clamp(96px,14vh,168px); }
section.wrap:has(> .wall){ padding-block:clamp(96px,12vw,160px); }

/* B1 - one edge-to-edge plate per project (chrome-free; keeps only the develop) */
.bleed{ width:100vw; margin-inline:calc(50% - 50vw); }
.bleed .plate{ padding:0; border:0; background:none; box-shadow:none; }
.bleed .plate::after{ display:none; }
.bleed .plate .devcover{ inset:0; }
.bleed .plate img{ aspect-ratio:auto !important; width:100%; height:clamp(340px,66vh,760px); object-fit:cover; }

/* B3 - considered hub hover; titles never hidden (touch / 50-70 safe) */
.wall .item .plate.dev{ transition: box-shadow 600ms var(--ease-tide), translate var(--t-hover) var(--ease-tide); }
.wall .item a:hover .plate, .wall .item a:focus-visible .plate{ translate:0 -4px; }
.wall .item a:hover .plate::after, .wall .item a:focus-visible .plate::after{ --press:3px; border-color:var(--jade-deep); }
.wall .registry .ttl{ display:inline; padding-bottom:2px;
  background:linear-gradient(var(--jade-deep),var(--jade-deep)) 0 100%/0% 1.5px no-repeat;
  transition:background-size var(--t-hover) var(--ease-tide); }
.wall .item a:hover .registry .ttl, .wall .item a:focus-visible .registry .ttl{ background-size:100% 1.5px; }
@media (prefers-reduced-motion:reduce){ .wall .item a:hover .plate, .wall .item a:focus-visible .plate{ translate:none; } }

/* B4 - project cover meta as a designed masthead; No. NN in Newsreader tabular */
.folio-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4);
  margin-top:var(--s4); font-family:var(--body); font-weight:600; font-size:var(--fs-meta);
  letter-spacing:.14em; text-transform:uppercase; color:var(--charcoal); }
.folio-meta a{ color:var(--ink); text-decoration:none; }
.folio-meta a:hover{ text-decoration:underline; text-underline-offset:.16em; text-decoration-color:var(--jade-deep); }
.folio-meta .sep{ inline-size:22px; block-size:1px; background:var(--hairline); flex:none; }
.folio-meta .no{ font-family:var(--serif); font-weight:500; letter-spacing:.01em; text-transform:none;
  color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }

/* D6 - printed-book uppercase opening line on blog posts */
.lead-in{ font-family:var(--body); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }

/* F4 - lock the chrome */
.chapter-pine :focus-visible,.lb :focus-visible{ outline-color:var(--sea); }
.btn-secondary:active{ translate:0 1px; background:var(--jade-tint); }
.btn-ivory:active{ translate:0 1px; background:rgba(248,243,234,.16); }
.toc-row:active,.post-row:active{ background:var(--jade-tint); }

/* F3 - real print stylesheet */
@media print{
  :root{ --ink:#111; --charcoal:#333; }
  html,body{ background:#fff !important; color:#111; }
  body::before,body::after{ display:none !important; }
  .header,.mmenu,.burger,.cue,.lb,.skip,.stamp{ display:none !important; }
  .grain::before{ display:none !important; }
  section{ padding-block:18pt !important; }
  a{ color:#111; }
  .prose a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; word-break:break-all; }
  .plate,.item,figure,.reg-list li,.faq-item{ break-inside:avoid; page-break-inside:avoid; }
  h1,h2,h3{ break-after:avoid; page-break-after:avoid; }
  .plate{ border-color:#999; box-shadow:none !important; }
  .plate::after{ display:none; }
  .chapter-pine{ background:#fff !important; color:#111 !important; }
  .chapter-pine .quote,.chapter-pine .attr{ color:#111 !important; }
  .btn{ border:1px solid #111 !important; background:transparent !important; color:#111 !important; }
  .footer{ background:#fff !important; border-top:1px solid #999; }
  img{ max-width:100% !important; }
  .js .r,.js [data-stagger] > *{ opacity:1 !important; transform:none !important; }
  .faq-a{ max-height:none !important; }
  .faq-tog{ display:none; }
}