/* Root Rest Rise — "Under the Canopy"
   Built from design/README.md; desktop values are faithful to the approved design. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/karla-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/karla-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/karla-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/karla-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --ground: #15180F;
  --surface: #1B1F14;
  --hairline: #2C3123;
  --control-border: #3A4030;
  --accent: #C9A24A;
  --accent-hover: #E0B75C;
  --accent-text-on: #191C11;
  --display: #F3EEE1;
  --heading: #EFE9DC;
  --body-bright: #DEE0CF;
  --body: #CFD2BF;
  --body-muted: #B7BBA6;
  --meta: #A9AE97;
  --meta-dim: #8B9078;
  --placeholder: #7E8470;
  --hero-lede: #D6D2C2;
  --footer-wordmark: #C6C9B6;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Karla', Helvetica, sans-serif;
  --gutter: 56px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--heading);
  font-family: var(--sans);
}
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
input, select, textarea, button { font: inherit; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
p, h1, h2, h3 { text-wrap: pretty; }
section { scroll-margin-top: 92px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  background: var(--accent);
  color: var(--accent-text-on);
  padding: 14px 22px;
}
.skip-link:focus {
  left: 0;
  color: var(--accent-text-on);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow-lg { font-size: 12px; letter-spacing: 0.28em; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text-on);
  font-family: var(--sans);
  font-size: 16px;
  padding: 15px 26px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-text-on); }
.btn-lg { font-weight: 500; letter-spacing: 0.04em; padding: 17px 30px; }
.btn-nav { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 22px; }
.btn-submit { font-size: 17px; font-weight: 500; padding: 16px 32px; align-self: flex-start; }

.link-underline {
  align-self: flex-start;
  font-size: 16px;
  border-bottom: 1px solid rgba(201, 162, 74, 0.45);
  padding-bottom: 3px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px var(--gutter);
  background: rgba(21, 24, 15, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.wordmark { display: flex; flex-direction: column; gap: 2px; }
.wordmark-name { font-family: var(--serif); font-size: 28px; letter-spacing: 0.02em; color: var(--heading); }
.wordmark-sub { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--meta-dim); }
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}
.site-nav a {
  position: relative;
  display: block;
  padding-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
}
.site-nav a:hover { color: var(--accent); }
/* Active marker is absolutely positioned so showing it never shifts the baseline */
.site-nav a[aria-current="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
}

/* ---------- Hero ---------- */
.hero { position: relative; height: 720px; overflow: hidden; }
.hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21,24,15,0.96) 4%, rgba(21,24,15,0.5) 46%, rgba(21,24,15,0.18) 100%);
}
.hero-content {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 58px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1000px;
}
.hero-content .eyebrow-lg { letter-spacing: 0.3em; }
.hero h1 {
  font-size: 92px;
  line-height: 0.96;
  letter-spacing: -0.015em;
  color: var(--display);
  max-width: 19ch;
}
.hero-lede { font-size: 21px; line-height: 1.6; color: var(--hero-lede); max-width: 52ch; }
.hero-cta-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 8px; }
.hero-date { font-size: 16px; color: var(--meta); }

/* ---------- Invitation ---------- */
.invitation {
  padding: 96px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  text-align: center;
}
.invitation-statement { font-family: var(--serif); font-size: 44px; line-height: 1.3; color: var(--heading); max-width: 30ch; }
.invitation-body { font-size: 18px; line-height: 1.85; color: var(--body-muted); max-width: 68ch; }

/* ---------- Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pillar {
  background: var(--surface);
  padding: 46px 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pillar p { font-size: 18px; line-height: 1.65; color: var(--body); }

/* ---------- What happens ---------- */
.practise {
  padding: 90px var(--gutter);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}
.practise-label { letter-spacing: 0.24em; padding-top: 12px; }
.practise-list { display: flex; flex-direction: column; }
.practise-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  font-size: 20px;
  line-height: 1.5;
  color: var(--body-bright);
}
.practise-row:last-of-type { border-bottom: 1px solid var(--hairline); }
.practise-num { font-family: var(--serif); font-size: 20px; color: var(--accent); }
.practise-note {
  margin-top: 26px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.45;
  color: var(--display);
  max-width: 40ch;
}

/* ---------- Testimonial ---------- */
.testimonial {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: 84px var(--gutter);
}
.testimonial blockquote {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.testimonial-lead {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.testimonial-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 34px;
  line-height: 1.35;
  color: var(--display);
  max-width: 24ch;
}
.testimonial-rest {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 6px;
}
.testimonial-rest p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--body-muted);
  max-width: 56ch;
}
.testimonial-name {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Sessions ---------- */
.sessions { border-top: 1px solid var(--hairline); }
.sessions-banner { position: relative; height: 380px; overflow: hidden; }
.sessions-banner > img { width: 100%; height: 100%; object-fit: cover; }
.sessions-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21,24,15,0.96), rgba(21,24,15,0.3));
}
.sessions-banner-caption {
  position: absolute;
  left: var(--gutter);
  bottom: 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sessions-banner-caption .eyebrow-lg { letter-spacing: 0.3em; }
.sessions-banner h2 { font-size: 64px; line-height: 1; color: var(--display); }

.session-rows { padding: 70px var(--gutter) 20px; display: flex; flex-direction: column; }
.session-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--hairline);
}
.session-row:last-child { border-bottom: 1px solid var(--hairline); }
.session-info { display: flex; flex-direction: column; gap: 14px; }
.session-info h3 { font-size: 44px; line-height: 1.1; color: var(--heading); }
.session-info p { font-size: 19px; line-height: 1.7; color: var(--body-muted); max-width: 56ch; }
.session-info .btn { margin-top: 8px; align-self: flex-start; }
.session-info .link-underline { margin-top: 8px; }
.session-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--body);
  padding-top: 30px;
}
.session-price { color: var(--accent); font-size: 22px; margin-top: 4px; }

.sessions-closer {
  padding: 60px var(--gutter) 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.sessions-room { display: flex; flex-direction: column; gap: 18px; }
.sessions-room .eyebrow { letter-spacing: 0.24em; }
.sessions-room-lines { display: flex; flex-direction: column; gap: 12px; }
.sessions-room-lines span { font-size: 19px; line-height: 1.6; color: var(--body-bright); }
.callout {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.callout p { font-family: var(--serif); font-size: 30px; line-height: 1.4; color: var(--heading); }

/* ---------- About Carla ---------- */
.carla { border-top: 1px solid var(--hairline); }
.carla-intro {
  display: grid;
  grid-template-columns: 1fr 42%;
  align-items: stretch;
}
.carla-intro-text {
  padding: 90px 48px 90px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}
.carla-intro-text h2 { font-size: 72px; line-height: 1; color: var(--display); }
.carla-intro-text p { font-size: 20px; line-height: 1.75; color: var(--body-muted); max-width: 48ch; }
.carla-intro > img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; object-position: 50% 70%; }

.carla-background {
  padding: 84px var(--gutter);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.carla-lead { font-family: var(--serif); font-size: 34px; line-height: 1.35; color: var(--heading); max-width: 40ch; }
.credentials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.credential {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
}
.credential h3 { font-size: 28px; color: var(--heading); }
.credential p { font-size: 17px; line-height: 1.75; color: var(--body-muted); }

.carla-journey {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: 90px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
  text-align: center;
}
.carla-journey-body { font-size: 18px; line-height: 1.85; color: var(--body-muted); max-width: 64ch; }
.carla-journey-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 38px;
  line-height: 1.35;
  color: var(--display);
  max-width: 34ch;
}

/* ---------- Contact ---------- */
.contact {
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr 38%;
  align-items: stretch;
  min-height: 720px;
}
.contact-body {
  padding: 80px 48px 70px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.contact-body h2 { font-size: 62px; line-height: 1.02; color: var(--display); }
.contact-lede { font-size: 19px; line-height: 1.7; color: var(--body-muted); max-width: 48ch; }
.contact-photo { width: 100%; height: 100%; object-fit: cover; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
  margin-top: 4px;
}
.contact-form label { display: flex; flex-direction: column; gap: 8px; }
.field-caption { font-size: 14px; letter-spacing: 0.06em; color: var(--meta); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--sans);
  font-size: 18px;
  padding: 15px 16px;
  border: 1px solid var(--control-border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--heading);
}
.contact-form textarea { resize: vertical; }
.contact-form [aria-invalid="true"] { border-color: var(--accent); }
.field-error { font-size: 15px; color: var(--accent-hover); }
.form-error {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body-muted);
  border: 1px solid var(--control-border);
  padding: 16px 18px;
  max-width: 520px;
}
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-success {
  border: 1px solid var(--accent);
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
}
.form-success[hidden] { display: none; }
.form-success-title { font-family: var(--serif); font-size: 32px; color: var(--display); }
.form-success-body { font-size: 17px; line-height: 1.7; color: var(--body-muted); }

.contact-address {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--meta-dim);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 40px var(--gutter) 52px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--meta-dim);
}
.site-footer-id { display: flex; flex-direction: column; gap: 8px; }
.site-footer-wordmark { font-family: var(--serif); font-size: 24px; color: var(--footer-wordmark); }
.site-footer-nav { display: flex; gap: 26px; flex-wrap: wrap; }
.site-footer-nav a { color: var(--meta-dim); }
.site-footer-nav a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --gutter: 24px; }

  section { scroll-margin-top: 132px; }

  /* Header: wordmark + CTA on top row, nav becomes a scrollable strip below.
     "Book a place" stays visible at all times. */
  .site-header { flex-wrap: wrap; gap: 14px 24px; padding: 14px var(--gutter) 0; }
  .wordmark { order: 1; }
  .wordmark-name { font-size: 24px; }
  .btn-nav { order: 2; margin-left: auto; }
  .site-nav {
    order: 3;
    flex-basis: 100%;
    min-width: 0;
    margin-left: 0;
    gap: 26px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding: 4px 0 14px; }
  .site-nav a[aria-current="true"]::after { bottom: 6px; }

  .hero { height: 80vh; min-height: 520px; }
  .hero-content { bottom: 40px; gap: 18px; }
  .hero h1 { font-size: clamp(40px, 10vw, 56px); }
  .hero-lede { font-size: 18px; }

  .invitation { padding: 64px var(--gutter); }
  .invitation-statement { font-size: 28px; }
  .invitation-body { font-size: 17px; }

  .pillars { grid-template-columns: 1fr; }
  .pillar { padding: 34px var(--gutter); }
  .pillar p { font-size: 17px; }

  .practise { grid-template-columns: 1fr; gap: 26px; padding: 64px var(--gutter); }
  .practise-label { padding-top: 0; }
  .practise-row { grid-template-columns: 44px 1fr; gap: 16px; font-size: 18px; }
  .practise-note { font-size: 22px; }

  .testimonial { padding: 56px var(--gutter); }
  .testimonial blockquote { grid-template-columns: 1fr; gap: 26px; }
  .testimonial-quote { font-size: 26px; }
  .testimonial-rest { padding-top: 0; }

  .sessions-banner { height: 300px; }
  .sessions-banner h2 { font-size: 44px; }
  .session-rows { padding: 40px var(--gutter) 10px; }
  .session-row { grid-template-columns: 1fr; gap: 22px; padding: 34px 0; }
  .session-info h3 { font-size: 30px; }
  .session-info p { font-size: 17px; }
  .session-details { padding-top: 0; font-size: 17px; }
  .session-price { font-size: 20px; }

  .sessions-closer { grid-template-columns: 1fr; gap: 34px; padding: 44px var(--gutter) 64px; }
  .sessions-room-lines span { font-size: 17px; }
  .callout { padding: 26px 24px; }
  .callout p { font-size: 24px; }

  .carla-intro { grid-template-columns: 1fr; }
  .carla-intro-text { padding: 64px var(--gutter); }
  .carla-intro-text h2 { font-size: 44px; }
  .carla-intro-text p { font-size: 18px; }
  .carla-intro > img { min-height: 0; height: 340px; }

  .carla-background { padding: 64px var(--gutter); gap: 26px; }
  .carla-lead { font-size: 26px; }
  .credentials { grid-template-columns: 1fr; gap: 26px; }
  .credential h3 { font-size: 24px; }

  .carla-journey { padding: 64px var(--gutter); }
  .carla-journey-quote { font-size: 28px; }

  .contact { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .contact-body { padding: 64px var(--gutter) 56px; }
  .contact-body h2 { font-size: 40px; }
  .contact-lede { font-size: 17px; }
  .contact-photo { height: 320px; }

  .site-footer { flex-direction: column; align-items: flex-start; }
}