/* ==========================================================================
   cāive — stylesheet
   --------------------------------------------------------------------------
   Identity notes:
   · The macron over the ā is the brand mark. It repeats as the section rule.
   · Restraint is the argument. People arrive overwhelmed; the page must not
     add to the noise. Space does the work that boxes and colour usually do.
   · Type is editorial, not app-like: Fraunces for voice, Source Serif to read.
   ========================================================================== */

/* Palette
   Dark is the base. Light is opt-in via [data-theme="light"] and remembered
   in localStorage — the site does not follow the OS, it opens dark for
   everyone. Token names are shared, so every rule below is written once.
   Every pairing in both themes clears WCAG AA; body text clears AAA.

   DARK — the default */
:root {
  --ink:        #e9e9e4;   /* 15.5:1 on paper */
  --ink-soft:   #b3b5ae;   /*  9.1:1 */
  --muted:      #888a83;   /*  5.4:1 */
  --cream:      #101210;   /* paper — near-black with a faint green cast */
  --cream-deep: #171a17;   /* band */
  --surface:    #1b1f1b;   /* inputs, embeds */
  --sage:       #86a87c;   /* accent, 7.1:1 — moss, hue 106 / sat 20% */
  --sage-soft:  #1f2a1d;
  --line:       #282c27;
  --btn-hover:  #f6f6f2;
  color-scheme: dark;

  /* Button inverts with the theme automatically: paper on ink in dark,
     ink on paper in light. Custom properties resolve at use, so these
     two lines cover both themes. */
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);

  --display: "Fraunces", Georgia, serif;
  --text:    "Source Serif 4", Georgia, serif;
  --ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --measure: 34rem;
  --wide:    64rem;
  --r: 8px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* LIGHT — opt-in */
[data-theme="light"] {
  --ink:        #16161a;   /* 17.3:1 on paper */
  --ink-soft:   #3d3d45;   /* 10.3:1 */
  --muted:      #6b6b73;   /*  5.1:1 */
  --cream:      #fafaf8;
  --cream-deep: #f2f2ee;
  --surface:    #ffffff;
  --sage:       #2f5d46;   /* accent, 7.2:1 */
  --sage-soft:  #dde8e1;
  --line:       #e4e4e0;
  --btn-hover:  #2c2c34;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--text);
  font-size: 19.5px;
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 640px) { body { font-size: 18.5px; } }

::selection { background: var(--sage-soft); color: var(--ink); }

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

/* ---------- layout ---------- */

.wrap   { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 1.75rem; }
.narrow { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 1.75rem; }

section { padding: 5.5rem 0; }
@media (max-width: 640px) { section { padding: 3.5rem 0; } }

/* The macron. Brand mark and section divider in one.
   Sits above an eyebrow or heading to open a section. */
.rule {
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--sage);
  border: 0;
  margin: 0 0 1.5rem;
}
.center .rule { margin-left: auto; margin-right: auto; }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4rem); line-height: 1.02; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.35rem); margin-bottom: 1.3rem; }
h3 { font-size: 1.22rem; margin-bottom: .45rem; letter-spacing: -.005em; }

p { margin: 0 0 1.2rem; max-width: var(--measure); }

.lead {
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 36rem;
}

.eyebrow {
  font-family: var(--ui);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .9rem;
}

.muted { color: var(--muted); font-size: .95rem; line-height: 1.55; }

a { color: var(--sage); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.75rem;
  max-width: var(--wide);
  margin: 0 auto;
}

.logo {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.02em;
}

.nav { display: flex; align-items: center; gap: 1.9rem; }

.nav a {
  font-family: var(--ui);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .93rem;
  position: relative;
  padding: .15rem 0;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

/* The CTA inside the nav needs to out-specify `.nav a`, which was
   overriding both its padding and its label colour — the label was
   coming out muted grey on a near-white button. */
.nav a.btn {
  padding: .62rem 1.35rem;
  color: var(--btn-fg);
  border-bottom: 0;
}
.nav a.btn:hover,
.nav a.btn[aria-current="page"] { color: var(--btn-fg); }

.menu-toggle {
  display: none;
  background: none; border: 0;
  font-size: 1.35rem; color: var(--ink);
  cursor: pointer; padding: .25rem .4rem;
}

/* theme switch — injected by app.js so every page gets it */
.theme-toggle {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  background: none; border: 1px solid transparent; border-radius: 50%;
  color: var(--muted); cursor: pointer; padding: 0; flex: none;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .sun { display: block; }
[data-theme="light"] .theme-toggle .moon { display: none; }
/* Desktop: logo left, nav + switch grouped right.
   Mobile: switch sits left of the hamburger (DOM order is swapped back). */
.nav { margin-left: auto; }
@media (max-width: 800px) {
  .theme-toggle { order: 1; margin-left: auto; }
  .menu-toggle  { order: 2; }
}

@media (max-width: 800px) {
  .menu-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: .25rem 1.75rem 1.4rem;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav a::after { display: none; }
  .nav a.btn {
    margin-top: 1.1rem;
    padding: .95rem 1.2rem;
    font-size: 1rem;
    text-align: center;
    border-bottom: 0;
  }
}

/* ---------- buttons ---------- */

/* CTA is near-black, not green. Black on paper is the highest-contrast,
   least-fussy button there is, and it stops the accent doing two jobs. */
.btn {
  display: inline-block;
  font-family: var(--ui);
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: .005em;
  padding: .82rem 1.7rem;
  border-radius: var(--r);
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  transition: background .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-fg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-lg { font-size: 1.02rem; padding: .95rem 2.1rem; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--cream-deep); color: var(--ink); border-color: var(--ink-soft); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin: 2rem 0 .8rem; }

/* ---------- the loop mark ---------- */
/* Three circuits, then a break to a straight line. The whole business
   in one drawing. Draws once on load; static for reduced-motion. */

/* Full-bleed to the right: the loops line up with the text column, the
   escape line runs off the edge of the screen. No 100vw, so no phantom
   horizontal scrollbar and nothing that would break the sticky header. */
.loopmark-bleed {
  padding-left: max(1.75rem, calc(50% - 32rem + 1.75rem));
  margin: 1.75rem 0 2.5rem;
  overflow: hidden;
}

.loopmark {
  display: block;
  width: 100%;
  height: 104px;
  overflow: visible;
}
.loopmark path {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.loopmark .stop { fill: var(--sage); }

.loopmark .draw {
  stroke-dasharray: 2300;
  stroke-dashoffset: 2300;
  animation: draw 2.6s var(--ease) .2s forwards;
}
.loopmark .stop { opacity: 0; animation: pop .45s var(--ease) 2.6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop  { to { opacity: 1; } }

@media (max-width: 760px) {
  .loopmark { height: 74px; }
  .loopmark-bleed { margin: 1.25rem 0 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .loopmark .draw { animation: none; stroke-dashoffset: 0; }
  .loopmark .stop { animation: none; opacity: 1; }
}

/* ---------- components ---------- */

/* Cards are typographic, not boxed. A rule and space, nothing more. */
.card {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 1.35rem 0 0;
}
.card h3 { font-family: var(--ui); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: .7rem; }
.card p { margin-bottom: 0; color: var(--ink-soft); font-size: .98rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem; }
@media (max-width: 800px) { .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 1.75rem; } }

.asks { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0; padding: 0; list-style: none; max-width: 46rem; }
.asks li {
  font-family: var(--ui);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .42rem 1.05rem;
  font-size: .9rem;
  color: var(--muted);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.asks li:hover { border-color: var(--sage); color: var(--ink-soft); }
.asks li strong { color: var(--ink); font-weight: 600; }

.steps { list-style: none; padding: 0; margin: 2.5rem 0 0; counter-reset: s; }
.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 3.5rem;
  margin-bottom: 2.5rem;
  max-width: var(--measure);
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: .05rem;
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--sage);
}
.steps li::after {
  content: "";
  position: absolute; left: .1rem; top: 1.7rem; bottom: -1.6rem;
  width: 1px; background: var(--line);
}
.steps li:last-child::after { display: none; }
.steps li p:last-child { margin-bottom: 0; }
.steps li p { color: var(--ink-soft); }

.pledge {
  border-left: 2px solid var(--sage);
  padding: .3rem 0 .3rem 1.6rem;
  margin: 2.25rem 0;
  max-width: var(--measure);
}
.pledge p:last-child { margin-bottom: 0; }
.pledge strong { font-family: var(--display); font-size: 1.18rem; font-weight: 600; line-height: 1.3; display: inline-block; }

.price { font-family: var(--display); font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.price .was { font-family: var(--text); font-size: 1.05rem; color: var(--muted); text-decoration: line-through; font-weight: 400; margin-left: .6rem; letter-spacing: 0; }

/* FAQ */
.faq { max-width: var(--measure); margin-top: 2.25rem; }
.faq details { border-top: 1px solid var(--line); padding: 1.2rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.13rem; font-weight: 600;
  list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
  transition: color .18s var(--ease);
}
.faq summary:hover { color: var(--sage); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sage); font-weight: 400; font-family: var(--ui); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .95rem 0 0; color: var(--ink-soft); font-size: .99rem; }

/* blog cards */
.posts { display: grid; gap: 2rem; margin-top: 2.25rem; }
.post-card { padding-bottom: 2rem; border-bottom: 1px solid var(--line); max-width: 44rem; }
.post-card:last-child { border-bottom: 0; }
.post-card h3 { margin-bottom: .4rem; font-size: 1.5rem; }
.post-card h3 a { color: var(--ink); text-decoration: none; transition: color .18s var(--ease); }
.post-card h3 a:hover { color: var(--sage); }
.post-card .meta { font-family: var(--ui); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
.post-card p { margin-bottom: 0; color: var(--ink-soft); }

/* long-form reading */
.prose { font-size: 20.5px; line-height: 1.78; max-width: var(--measure); margin: 0 auto; }
.prose p { max-width: none; margin-bottom: 1.55rem; }
.prose > p:first-of-type { font-size: 1.1em; color: var(--ink-soft); line-height: 1.6; }
.prose h2 { margin-top: 3rem; font-size: 1.6rem; }
.prose h3 { margin-top: 2.1rem; font-size: 1.15rem; font-family: var(--ui); letter-spacing: 0; }
.prose blockquote {
  margin: 2.25rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--sage);
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink);
}
.prose blockquote p { margin: 0; }
.prose ul, .prose ol { padding-left: 1.35rem; margin-bottom: 1.55rem; }
.prose li { margin-bottom: .75rem; }
.prose li::marker { color: var(--sage); }
.prose hr { border: 0; width: 2.4rem; height: 2px; background: var(--sage); opacity: .7; margin: 3rem 0; }
.prose a { text-decoration-color: var(--sage-soft); }
@media (max-width: 640px) { .prose { font-size: 19px; } }

/* email capture */
.signup { background: var(--cream-deep); }
.signup form { display: flex; gap: .6rem; flex-wrap: wrap; max-width: var(--measure); margin-top: 1.5rem; }
.signup input[type="email"] {
  flex: 1 1 16rem;
  padding: .82rem 1rem;
  font-family: var(--ui); font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
}
.signup input[type="email"]::placeholder { color: var(--muted); }
.signup button { border: 0; cursor: pointer; }

.booking { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); min-height: 620px; margin-top: 2.25rem; overflow: hidden; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 3.5rem 0 2.5rem;
  font-family: var(--ui);
  font-size: .9rem;
  color: var(--muted);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.site-footer h4 { font-family: var(--ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .85rem; font-weight: 600; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--sage); }
.site-footer p { font-family: var(--ui); }
.colophon { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .84rem; max-width: 42rem; }

/* ---------- reveal on scroll ---------- */

[data-reveal] { opacity: 0; transform: translateY(14px); }
.reveal-ready [data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- utility ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--btn-bg); color: var(--btn-fg); padding: .6rem 1rem;
  border-radius: var(--r); font-family: var(--ui); font-size: .9rem; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--btn-fg); }

.center { text-align: center; }
.center p, .center h1, .center h2, .center .lead { margin-left: auto; margin-right: auto; }
.tight { margin-bottom: .5rem; }

/* ---------- print (blog posts) ---------- */

@media print {
  /* always print light, whatever the reader is using */
  :root {
    --ink: #000; --ink-soft: #222; --muted: #555;
    --cream: #fff; --cream-deep: #fff; --surface: #fff;
    --sage: #000; --sage-soft: #eee; --line: #ccc;
  }
  .site-header, .site-footer, .end-cta, .cta-row, .signup, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .prose { max-width: none; }
  a { text-decoration: none; color: #000; }
}