/*
 * The Quiet Pilgrim, site-wide brand stylesheet.
 * Locked 2026-05-13. Source: github.com/grandvisionperspective-png/tqp-brand
 *   palette: projects/tqp-brand/assets/palette.css
 *   voice:   projects/tqp-brand/applications/voice-and-copy.md
 *   spec:    projects/tqp-brand/docs/superpowers/specs/2026-05-13-tqp-brand-foundation-design.md
 */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Primary palette */
  --tqp-mist: #FAFAFA;
  --tqp-sage: #7A8F76;
  --tqp-deep-slate: #2A323A;
  --tqp-forest: #1F2A26;

  /* Secondary */
  --tqp-sand: #C5B693;
  --tqp-stone: #E8ECE8;

  /* Semantic (light register default) */
  --bg: var(--tqp-mist);
  --text: var(--tqp-deep-slate);
  --accent: var(--tqp-sage);
  --accent-warm: var(--tqp-sand);
  --divider: var(--tqp-stone);
  --muted: #5a6863;
  /* WCAG AA roles: stock sage fails 4.5:1 on Mist at small/light type,
     so we use a deeper-sage variant for small accent caps (kickers,
     card-tags, labels, lockup italic) and a slate-darker tone for nav
     link text. Both stay in the documented palette family. */
  --nav-text: #4A5862;
  --accent-strong: #5A7456;

  /* Type */
  --font-headline: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-register="dark"] {
  --bg: var(--tqp-forest);
  --text: var(--tqp-mist);
  --accent: var(--tqp-sage);
  --accent-warm: var(--tqp-sand);
  --divider: rgba(250, 250, 250, 0.12);
  --muted: rgba(250, 250, 250, 0.65);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-weight: 400;
  font-variant-numeric: lining-nums;
}

a { color: inherit; text-decoration: none; }

/* ============ NAV ============ */
.nav {
  padding: 28px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--divider);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
}
.nav .lock {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--text);
}
.nav .lock em { font-style: italic; color: var(--accent-strong); }
.nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.nav ul a { color: var(--nav-text); transition: color 0.25s var(--ease); }
.nav ul a:hover { color: var(--text); }
.nav ul a.active { color: var(--text); }

/* Hamburger (hidden on desktop, shown on phone in the @media block below) */
.nav .hamburger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--nav-text);
}
.nav .hamburger:focus-visible {
  outline: 2px solid var(--nav-text);
  outline-offset: 2px;
}
.nav .hamburger span,
.nav .hamburger span::before,
.nav .hamburger span::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav .hamburger span { position: relative; }
.nav .hamburger span::before,
.nav .hamburger span::after { content: ""; position: absolute; left: 0; }
.nav .hamburger span::before { top: -7px; }
.nav .hamburger span::after  { top:  7px; }
.nav.open .hamburger span             { background: transparent; }
.nav.open .hamburger span::before     { transform: translateY(7px) rotate(45deg); }
.nav.open .hamburger span::after      { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav { padding: 18px 22px; }
  .nav .hamburger { display: inline-flex; }

  /* Slide-in panel for the nav links on phone */
  .nav ul {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    width: min(78vw, 320px);
    background: var(--bg);
    border-left: 1px solid var(--divider);
    flex-direction: column;
    gap: 0;
    padding: 24px 28px;
    font-size: 13px;
    letter-spacing: 2.5px;
    transform: translateX(100%);
    transition: transform 0.32s var(--ease);
    box-shadow: -20px 0 40px rgba(31, 42, 38, 0.08);
  }
  .nav ul li { width: 100%; }
  .nav ul a {
    display: block;
    padding: 16px 0;
    min-height: 44px;
    border-bottom: 1px solid var(--divider);
  }
  .nav ul li:last-child a { border-bottom: 0; }
  .nav.open ul { transform: translateX(0); }

  /* Scrim behind the panel */
  .nav.open::before {
    content: "";
    position: fixed;
    inset: 64px 0 0 0;
    background: rgba(31, 42, 38, 0.32);
    z-index: -1;
  }

  /* Bump small editorial text on phone so it stays legible */
  .card-tag,
  .label,
  .hero .pre,
  .pre { font-size: 12px !important; }
}

@media (max-width: 720px) {
  body.nav-open { overflow: hidden; }
}

/* ============ HERO PHOTO BAND (Aman pattern) ============
   Contained "exhibition print" treatment. The photo is presented at its
   native aspect inside generous mist breathing room. Title sits BELOW
   the photo. Pattern lifted from aman.com home and amankila, validated
   against six senses, capella, bambu indah. Works for both landscape
   and portrait source aspects without forcing a crop. */
.photo-band {
  background: var(--bg);
  padding: 80px 32px 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.photo-band img {
  max-width: 1200px;
  max-height: 64vh;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 30px 60px -14px rgba(31, 42, 38, 0.12);
}

/* Portrait sources stay narrower; landscape sources fill the frame. */
.photo-band img[data-aspect="portrait"] {
  max-width: 540px;
  max-height: 72vh;
}

@media (max-width: 720px) {
  .photo-band { padding: 48px 22px 0; }
  .photo-band img {
    max-width: 100%;
    max-height: 56vh;
  }
  .photo-band img[data-aspect="portrait"] { max-height: 64vh; }
}

/* ============ HERO ============ */
.hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 100px 32px 60px;
  text-align: center;
}
.photo-band + .hero { padding-top: 72px; }
.hero .pre {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 24px;
}
.hero h1 {
  font-family: var(--font-headline);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: 0.2px;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .sub {
  font-family: var(--font-headline);
  font-size: clamp(17px, 2vw, 20px);
  font-style: italic;
  color: var(--text);
  margin-top: 24px;
  line-height: 1.6;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ SECTION ============ */
section { padding: 80px 32px; }
section.tight { padding: 56px 32px; }
section.dark { background: var(--tqp-forest); color: var(--tqp-mist); }
section.dark .label { color: var(--tqp-sand); }
section.dark .divider { background: rgba(250, 250, 250, 0.12); }
section .container { max-width: 880px; margin: 0 auto; }
section.wide .container { max-width: 1120px; }

.label {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 18px;
}

.h2 {
  font-family: var(--font-headline);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 300;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: 0.2px;
}
.h2 em { font-style: italic; color: var(--accent); }

.body-lg {
  font-family: var(--font-headline);
  font-size: 18px;
  font-style: italic;
  color: var(--text);
  line-height: 1.7;
  max-width: 640px;
}

.body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  max-width: 640px;
}

.divider {
  height: 1px;
  background: var(--divider);
  margin: 56px 0;
}

/* ============ SERVICE GRID ============ */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
/* 5-up grid (homepage) collapses cleanly to 3+2 then 2 then 1 */
.services.five {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1180px) {
  .services.five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .services.five { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .services.five { grid-template-columns: 1fr; }
}
/* Photo-less typographic service card (used when a stock image would break brand) */
.service-card.no-photo .card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--tqp-stone) 0%, #DDE3DC 100%);
  height: 220px;
}
.service-card.no-photo .card-img svg { width: 64px; height: 64px; opacity: 0.6; }
.service-card {
  border: 1px solid var(--divider);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  background: var(--bg);
  display: block;
  color: inherit;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(31, 42, 38, 0.08);
}
.service-card .card-img {
  width: 100%;
  height: 220px;
  background: var(--tqp-stone);
  overflow: hidden;
}
.service-card .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card .card-body { padding: 24px 24px 28px; }
.service-card .card-tag {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.service-card h3 {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}
.service-card h3 em { font-style: italic; color: var(--accent); }
.service-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* ============ EXPERIENCE LIST (menu/journey style) ============ */
.exp-list { max-width: 720px; margin: 0 auto; }
.exp-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--divider);
}
.exp-row:last-child { border-bottom: 1px solid var(--divider); }
.exp-row .when {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-strong);
  padding-top: 6px;
}
.exp-row .what h4 {
  font-family: var(--font-headline);
  font-size: 21px;
  font-style: italic;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 6px;
}
.exp-row .what p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}

/* ============ CTA / BUTTON ============ */
.btn {
  display: inline-block;
  padding: 16px 36px;
  background: var(--tqp-deep-slate);
  color: var(--tqp-mist);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.btn:hover { background: var(--accent); }
.btn-quiet {
  background: transparent;
  color: var(--accent-strong);
  border: 1px solid var(--accent);
}
.btn-quiet:hover { background: var(--accent); color: var(--tqp-mist); }

/* ============ FOOTER ============ */
footer {
  padding: 80px 32px 48px;
  text-align: center;
  border-top: 1px solid var(--divider);
  background: var(--bg);
  margin-top: 80px;
}
footer .footer-glyph { margin-bottom: 18px; }
footer .footer-glyph svg { width: 32px; height: 32px; }
footer .mark {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 14px;
  color: var(--accent-strong);
  margin-bottom: 6px;
}
footer .meta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-top: 14px;
}
footer .footer-links {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 28px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-strong);
}
footer .footer-links a:hover { color: var(--text); }

/* ============ GUEST VOICE ============
   Composite reflections from returning guests. Used as a single quiet
   quote on each service page, and as a longer set on /about/. Framed
   honestly: these are the lines heard most often, kept anonymous. */
.guest-voice {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 0 32px;
}
.guest-voice .frame {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 24px;
}
.guest-voice blockquote {
  font-family: var(--font-headline);
  font-size: clamp(20px, 2.5vw, 26px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.guest-voice .source {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  margin-top: 18px;
  font-style: italic;
}
.guest-voice-list {
  max-width: 720px;
  margin: 0 auto;
}
.guest-voice-list blockquote {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--text);
  padding: 22px 0 26px;
  border-bottom: 1px solid var(--divider);
  margin: 0;
  text-align: center;
}
.guest-voice-list blockquote:first-of-type { border-top: 1px solid var(--divider); }
.guest-voice-list .note {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin-top: 28px;
  line-height: 1.6;
}

/* ============ UTILITIES ============ */
.center { text-align: center; }
.spaced { margin-top: 32px; }
.muted { color: var(--accent-strong); }
.italic { font-style: italic; }