/* ===========================================================================
   Valparai Paradise — foundation
   Palette comes from the brand green and gold already used on the itineraries
   and invoices guests receive, so the site and the paperwork match.
   =========================================================================== */

:root {
  /* --- ground --- */
  --ink: #071410;      /* deepest forest — hero + footer */
  --ink-lift: #0c1f18; /* one step up, for layering on ink */
  --canopy: #13351F;   /* the brand green — dark sections */
  --canopy-lift: #174026;
  --moss: #1d4630;     /* raised surface on dark */
  --fern: #477355;     /* mid green — rules, meta */
  --mist: #f1f4ee;     /* light page ground */
  --paper: #ffffff;
  --sand: #e6ebe1;     /* light raised surface */

  /* --- accent --- */
  --gold: #e0b341;     /* the brand gold */
  --gold-soft: #f0d68d;
  --gold-deep: #8a6410; /* gold as text on light — contrast safe */
  --ember: #c0552e;    /* tiger orange. Used once, for the open/closed dot. */

  /* --- text --- */
  --on-dark: #f4f7f2;
  --on-dark-dim: #a8bcac;
  --on-light: #12241a;
  --on-light-dim: #59685c;

  --line-dark: color-mix(in srgb, var(--on-dark) 16%, transparent);
  --line-light: color-mix(in srgb, var(--on-light) 14%, transparent);

  /* --- type --- */
  --display: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --tamil: "Noto Serif Tamil", var(--display);

  /* Signage numerals — condensed Archivo, for bends, altitudes and prices. */
  --signage-wdth: 84;

  /* --- fluid scale ---
     The ratio widens as it climbs, so display type carries real weight against
     body text instead of everything sitting in the same middle register. */
  --step--2: clamp(0.72rem, 0.7rem + 0.09vw, 0.77rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.36vw, 1.42rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.68vw, 1.85rem);
  --step-3: clamp(1.73rem, 1.5rem + 1.15vw, 2.4rem);
  --step-4: clamp(2.07rem, 1.68rem + 1.95vw, 3.25rem);
  --step-5: clamp(2.49rem, 1.86rem + 3.15vw, 4.4rem);
  /* The growth term is 1.8rem, not 1.95rem. Libre Caslon Display sets wider
     than Fraunces did, and at 390px the hero's second line "at the fortieth
     bend." needed 351px inside a 350px column — it wrapped, orphaning "at the"
     on its own line. One pixel is not a margin, so the mobile end of the scale
     gives it real room. Desktop is unaffected: the 6rem cap is already reached
     by 1344px. */
  --step-6: clamp(2.75rem, 1.7rem + 5vw, 6rem);

  /* --- space ---
     Three band heights, not one. A section whose content ends short gets
     --band-sm so the page stops leaving half a screen of empty colour. */
  --gutter: clamp(1.15rem, 0.8rem + 1.8vw, 2.5rem);
  --band-sm: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);
  --band: clamp(3.25rem, 2.2rem + 5vw, 6.5rem);
  --band-lg: clamp(4rem, 2.5rem + 7vw, 9rem);
  --measure: 62ch;
  --shell: 1240px;

  --radius: 4px;
  --radius-lg: 10px;
  --radius-xl: 18px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Film grain. ~300 bytes, no network request, and it stops big flat fills
     from reading like printer test pages. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Phones narrower than 360px (iPhone SE 1st gen and similar) are the one width
   where the hero's second line still cannot fit. Scoped here so the common
   360-414px range keeps its full size. */
@media (max-width: 359px) {
  :root { --step-6: clamp(2.2rem, 1.2rem + 5vw, 6rem); }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--mist);
  color: var(--on-light);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-variation-settings: "wdth" 100, "wght" 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden` — `hidden` makes the body a scroll container and
     silently breaks every `position: sticky` on the page. */
  overflow-x: clip;
}

img,
svg,
video { display: block; max-width: 100%; }

img { height: auto; background-color: var(--sand); }

button,
input,
select,
textarea { font: inherit; color: inherit; }

/* --- headings ---
   Libre Caslon Display ships a single 400 weight and no variable axes, so
   hierarchy is carried by size, tracking and colour rather than by weight.
   Every display heading sits at 400 deliberately: asking for 600 would make
   the browser synthesise a bold, and a smeared fake bold on a high-contrast
   Caslon looks worse than no weight contrast at all. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  line-height: 1.08;
  text-wrap: balance;
}

h1, h2 {
  font-weight: 400;
  letter-spacing: -0.016em;
}

h3, h4 {
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.18;
}

p { margin: 0; text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

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

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

/* --- shell ---------------------------------------------------------------- */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.shell-wide { width: min(100% - (var(--gutter) * 2), 1480px); margin-inline: auto; }

.band { padding-block: var(--band); position: relative; }
.band-sm { padding-block: var(--band-sm); }
.band-lg { padding-block: var(--band-lg); }
.band-tight-top { padding-top: var(--band-sm); }
.band-tight-bottom { padding-bottom: var(--band-sm); }

/* Dark bands are layered rather than flat: a soft radial lift plus a whisper
   of grain. Costs nothing and reads as depth instead of paint. */
.band-dark,
.band-ink {
  color: var(--on-dark);
  isolation: isolate;
}

.band-dark {
  background:
    radial-gradient(120% 80% at 12% 0%, var(--canopy-lift) 0%, transparent 62%),
    var(--canopy);
}

.band-ink {
  background:
    radial-gradient(115% 75% at 85% 0%, var(--ink-lift) 0%, transparent 58%),
    var(--ink);
}

.band-dark::after,
.band-ink::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.05;
  pointer-events: none;
}

.band-dark h1, .band-dark h2, .band-dark h3,
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--on-dark); }

/* --- type helpers --------------------------------------------------------- */
.eyebrow {
  margin: 0 0 1.1rem;
  font-size: var(--step--1);
  font-variation-settings: "wdth" var(--signage-wdth), "wght" 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.band-dark .eyebrow,
.band-ink .eyebrow { color: var(--gold); }

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}

.eyebrow-plain::after { display: none; }

.h-hero { font-size: var(--step-6); }
.h-section { font-size: var(--step-4); }
/* Self-describing, so it renders the same whichever heading level carries it.
   It sat on h3 in the shop, the package pages and the enquiry form, and on h2
   in the terms and privacy pages — and inherited a different weight, tracking
   and optical size in each place. One class, one look. */
.h-card {
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.18;
}

/* An oversized statement line — used where a section makes a claim rather
   than introducing a list. */
.h-statement {
  font-size: var(--step-5);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 1.02;
}

.lede {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-light-dim);
}

.band-dark .lede,
.band-ink .lede { color: var(--on-dark-dim); }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }

/* Condensed numerals — bends, altitudes, distances, prices. */
.signage {
  font-variation-settings: "wdth" var(--signage-wdth), "wght" 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.rupee { font-variation-settings: "wdth" 92, "wght" 700; }

.tamil { font-family: var(--tamil); font-weight: 500; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-variation-settings: "wdth" 96, "wght" 650;
  /* Sentence case, not caps. "BOOK ON WHATSAPP" set in 12px letterspaced caps
     is harder to read at a glance than "Book on WhatsApp", and on a site whose
     nav is already sentence case it was the only shouting element. Tracking
     comes back down to match. */
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), background-color 0.3s var(--ease),
    border-color 0.3s var(--ease), color 0.3s var(--ease),
    box-shadow 0.4s var(--ease-out);
}

/* A light sweeps across on hover. One rule, and it reads as craft. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.26) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}

.btn:hover::before { transform: translateX(120%); }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--btn-bg) 80%, transparent);
}

.btn:active { transform: translateY(0); transition-duration: 0.1s; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  border-color: var(--line-light);
}

.band-dark .btn-ghost,
.band-ink .btn-ghost,
.hero .btn-ghost { border-color: var(--line-dark); }

.btn-ghost:hover {
  --btn-bg: color-mix(in srgb, currentColor 10%, transparent);
  box-shadow: none;
}

/* A darkened WhatsApp green. The brand #25D366 gives white text 1.98:1, which
   is unreadable; this is 4.59:1 and still unmistakably the right green. */
.btn-wa { --btn-bg: #158741; --btn-fg: #ffffff; }
.btn-wa:hover { --btn-bg: #10763a; }

.btn-lg { min-height: 3.4rem; padding: 1.1rem 2rem; font-size: var(--step-0); }

.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* --- link with a retracting rule ----------------------------------------- */
.link-rule {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-variation-settings: "wdth" 94, "wght" 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.4rem;
  transition: gap 0.35s var(--ease-out), color 0.25s var(--ease);
}

.link-rule::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}

.link-rule:hover { gap: 0.95rem; color: var(--gold-deep); }
.link-rule:hover::after { transform: scaleX(0); transform-origin: left; }
.band-dark .link-rule:hover, .band-ink .link-rule:hover { color: var(--gold); }

/* --- contour rule --------------------------------------------------------
   Valparai is defined by elevation, so section breaks are contour lines
   rather than plain rules.                                                  */
.contour {
  height: 46px;
  width: 100%;
  color: var(--fern);
  opacity: 0.28;
  overflow: hidden;
}

.contour svg { width: 100%; height: 100%; }

/* --- accessibility -------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.8rem 1.4rem;
  background: var(--gold);
  color: var(--ink);
  font-size: var(--step--1);
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }