/* ==========================================================================
   Legal pages — The Phangan Quest
   Standalone stylesheet for /terms, /privacy, /refunds, /contact.
   Deliberately independent of the main bundle: no JS, no GSAP, no map.
   Colours and type come from src/styles/tokens.css so the pages wear the
   same skin as the landing page; keep the two in sync by hand.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-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 Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/instrument-sans-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;
}

:root {
  --canopy-950: #06110C;
  --canopy-900: #0A1A13;
  --canopy-800: #0F241A;
  --canopy-700: #173426;

  --parch-50:   #FBF4DF;
  --parch-100:  #F2E7C9;
  --parch-300:  #E8D8AE;
  --parch-500:  #CDB482;
  --parch-muted:#C4BEA6;
  --parch-faint:#8C8D7A;

  --ink-900:    #23190F;
  --ink-600:    #564431;
  --ink-500:    #705C42;
  --ink-400:    #7F6A4C;

  --route:      #C8432B;
  --route-ink:  #A8361F;
  --brass:      #E3B25A;
  --brass-ink:  #7A5815;
  --focus-dark: #7A5815;
  --focus-light:#F3CD82;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .09 1.25 0 0 0 -.54'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");

  --ls-brand: 0.22em;
  --ls-tight: -0.03em;
  --radius: 8px;
  --radius-lg: 18px;
  --tap: 44px;
  --measure: 68ch;
  --gutter: clamp(16px, 5vw, 48px);
}

*, *::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(--parch-300);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* the same fine paper grain the landing page wears, fixed to the viewport */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--paper-grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 70;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brass);
  color: var(--ink-900);
  border-radius: 6px;
  padding: 10px 16px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 3px solid var(--focus-dark);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Top bar ------------------------------------------------------------ */
.legal-nav {
  background: var(--canopy-900);
  border-bottom: 1px solid rgba(227, 178, 90, 0.22);
}
.legal-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  justify-content: space-between;
}
.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--parch-100);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: var(--ls-brand);
  text-transform: uppercase;
  min-height: var(--tap);
}
.legal-brand:hover { color: var(--brass); }
.legal-brand svg { width: 20px; height: 20px; flex: none; color: var(--brass); }

.legal-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-nav-links a {
  color: var(--parch-muted);
  text-decoration: none;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.legal-nav-links a:hover { color: var(--brass); }
.legal-nav-links a[aria-current="page"] {
  color: var(--parch-50);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--brass);
}

/* --- Page ---------------------------------------------------------------- */
.legal-main { padding: clamp(36px, 7vw, 72px) var(--gutter) clamp(48px, 9vw, 96px); }

.legal-doc {
  max-width: var(--measure);
  margin: 0 auto;
  background: var(--parch-50);
  border: 1px solid var(--parch-500);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 56px);
  box-shadow: 0 1px 0 rgba(42, 30, 18, .08), 0 24px 60px -30px rgba(11, 31, 23, .55);
}

.legal-kicker {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--route-ink);
}

.legal-doc h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: var(--ls-tight);
  margin: 0 0 8px;
}

.legal-updated {
  margin: 0 0 clamp(24px, 4vw, 36px);
  padding-bottom: clamp(20px, 3vw, 28px);
  border-bottom: 1px solid var(--parch-500);
  color: var(--ink-500);
  font-size: 0.9375rem;
}

.legal-doc h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 2.2em 0 0.6em;
  scroll-margin-top: 24px;
}
.legal-doc h2:first-of-type { margin-top: 0; }

.legal-doc h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 1.8em 0 0.5em;
}

.legal-doc p { margin: 0 0 1.1em; }
.legal-doc ul, .legal-doc ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.legal-doc li { margin-bottom: 0.5em; }
.legal-doc li::marker { color: var(--ink-400); }
.legal-doc strong { font-weight: 600; color: var(--ink-900); }
.legal-doc em { font-style: italic; }
.legal-doc hr {
  border: 0;
  border-top: 1px solid var(--parch-500);
  margin: 2.4em 0;
}

.legal-doc a {
  color: var(--route-ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-doc a:hover { color: var(--ink-900); }

/* address / identity blocks and the model cancellation form */
.legal-doc blockquote {
  margin: 0 0 1.4em;
  padding: 18px 22px;
  background: var(--parch-100);
  border-left: 3px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-600);
}
.legal-doc blockquote p:last-child { margin-bottom: 0; }

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 0.9375rem;
}
.legal-doc th, .legal-doc td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--parch-500);
}
.legal-doc th { font-family: var(--font-display); font-weight: 700; }

.legal-version {
  margin: 2.4em 0 0;
  padding-top: 1.4em;
  border-top: 1px solid var(--parch-500);
  color: var(--ink-500);
  font-size: 0.875rem;
}

/* --- Footer -------------------------------------------------------------- */
.legal-footer {
  background: var(--canopy-950);
  color: var(--parch-muted);
  padding: clamp(32px, 6vw, 56px) var(--gutter);
  font-size: 0.9375rem;
}
.legal-footer-inner { max-width: 1100px; margin: 0 auto; }
.legal-footer p { margin: 0 0 0.9em; max-width: 62ch; }
.legal-footer a { color: var(--parch-100); text-underline-offset: 3px; }
.legal-footer a:hover { color: var(--brass); }
.legal-footer a:focus-visible { outline-color: var(--focus-light); }

.legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
}
.legal-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  text-decoration: none;
}
.legal-footer-links a:hover { text-decoration: underline; }

.legal-footer-bar {
  margin-top: 1.6em;
  padding-top: 1.4em;
  border-top: 1px solid rgba(242, 231, 201, 0.14);
  color: var(--parch-faint);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

@media print {
  .legal-nav, .legal-footer, .skip-link { display: none; }
  body::after { display: none; }
  body { background: #fff; }
  .legal-doc { border: 0; box-shadow: none; max-width: none; padding: 0; background: #fff; }
}