/* Lost Paradise — 19–24 January 2027, Khanom, Thailand
   Vintage treatment. Palette is unchanged from the first pass. */

:root {
  --deep: #072F35;   /* night water */
  --tide: #12575C;   /* mid water */
  --sun:  #E4602A;   /* sunset orange — decorative marks only */

  /* Same hue and saturation as --sun, retuned for text. The decorative orange
     is only 2.8:1 on sand, which fails WCAG AA, so small type uses these. */
  --sun-ink:  #973913;   /* orange text on sand — 5.77:1 flat, 4.58:1 worst textured */
  --sun-lift: #E66E3C;   /* orange text on deep   — 4.54:1 */
  --dusk: #F0916A;   /* sky coral */
  --sand: #F2E4D2;   /* dry sand — the page ground */
  --sand-deep: #E8D7BF;  /* damp sand — the deeper end of the ground wash */
  --sand-lift: #F8EFE2;  /* sun-bleached sand — the lighter end */
  --ink:  #16302F;   /* text on sand */

  --display: "Fraunces", Georgia, serif;
  --body: "EB Garamond", Georgia, serif;
  --mono: "Courier Prime", ui-monospace, monospace;

  --hairline: rgba(22, 48, 47, 0.22);

  /* Old display faces were softer and more irregular than modern ones. */
  --wonk: "SOFT" 40, "WONK" 1;

  /* There is no dark theme here; the palette is the design. This stops
     browsers with auto-dark-mode from inverting the paper ground to brown. */
  color-scheme: only light;
}

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

html { -webkit-text-size-adjust: 100%; }

/* Full-bleed bands are sized in vw, which excludes the vertical scrollbar.
   Clip the few stray pixels rather than let them scroll the page sideways. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  /* A flat fill was the whole problem: every page was one uniform field of
     pale sand. The ground is now painted by body::before, fixed to the
     viewport so each screenful carries the full tonal range no matter how
     long or short the page is. */
  background-color: var(--sand);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.34rem);
  line-height: 1.62;
}

body.menu-open,
body.lightbox-open { overflow: hidden; }

p { text-wrap: pretty; }

/* The ground. Fixed to the viewport, so a short page gets the same depth as a
   long one, and painted on a pseudo-element rather than with
   background-attachment: fixed, which janks badly when scrolling on iOS.
   Light falls from the top, the foot settles into damp sand, and the left and
   right margins darken just enough to seat the eye on the text column. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* margin shading */
    linear-gradient(90deg,
      rgba(86, 58, 32, 0.10) 0%,
      rgba(86, 58, 32, 0) 26%,
      rgba(86, 58, 32, 0) 74%,
      rgba(86, 58, 32, 0.10) 100%),
    /* a low sun off the water, top left */
    radial-gradient(90% 55% at 18% 0%, rgba(255, 251, 243, 0.85), transparent 68%),
    /* the vertical range: bleached at the top, damp at the foot */
    linear-gradient(180deg,
      var(--sand-lift) 0%,
      var(--sand) 46%,
      var(--sand-deep) 100%);
}

/* Paper over the whole page — the single strongest vintage cue. Two scales:
   a fine grain for tooth, and a much coarser mottle so the sheet varies like
   real stock rather than tiling visibly. Both are pre-rasterised SVG tiles,
   not live filters on page content, so they cost one paint and no relayout.
   Combined effective density stays in the 3-6% range recommended for subtle
   texture — enough to feel tactile, too little to disturb letterforms. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.8;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23m)' opacity='0.18'/%3E%3C/svg%3E");
  background-size: 240px 240px, 700px 700px;
  background-repeat: repeat, repeat;
}

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

/* Selection is a translucent ink wash, not the browser's blue. Because it is
   partly transparent it blends with whatever sits behind it - the paper grain
   on sand, the photograph in the hero - so no two selections look quite alike.
   (::selection takes no gradient; transparency is how you get blending.) */
::selection {
  background: rgba(228, 96, 42, 0.75);
  color: #FFF7EC;
  text-shadow: 0 0 12px rgba(104, 34, 8, 0.55);
}

/* On the dark grounds the wash flips: coral over teal, dark ink on top. */
.hero ::selection,
.section-close ::selection,
.footer ::selection,
.menu-panel ::selection {
  background: rgba(240, 145, 106, 0.78);
  color: var(--deep);
  text-shadow: none;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  padding: 0.75rem 1.25rem;
  background: var(--deep);
  color: var(--sand);
  font-family: var(--mono);
  font-size: 0.92rem;
  text-decoration: none;
}

.skip:focus { left: 0; }

/* ---------------------------------------------------------------- menu ---- */

.menu-btn {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 220;
  min-width: 6.25rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--sand);
  background: var(--deep);
  color: var(--sand);
  box-shadow: 3px 3px 0 rgba(7, 47, 53, 0.45);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-btn:hover {
  background: var(--sun);
  border-color: var(--sun);
}

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 210;
  overflow-y: auto;
  padding: 6rem 1.5rem 4rem;
  background: var(--deep);
  color: var(--sand);
}

.menu-panel[hidden] { display: none; }

.menu-nav {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list li { border-bottom: 1px solid rgba(242, 228, 210, 0.2); }

.menu-list a {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.85rem 0;
  color: var(--sand);
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 500;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.menu-list a:hover { color: var(--dusk); }

.menu-num {
  flex: none;
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  /* Tuned for the dark menu panel, which is where .menu-num normally lives.
     The home-page index reuses the class on sand and overrides it below. */
  color: var(--sun-lift);
}

.menu-panel :focus-visible { outline-color: var(--sand); }

/* ---------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
}

/* The burning effigy. Kept nearly full-colour — the projected light on it is
   the point, and a heavy sepia would flatten it into mud. Desktop is
   width-constrained so X is moot there; on narrow screens 66% keeps the
   effigy in frame instead of cropping to bare ground. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--deep) 66% center / cover no-repeat;
  background-image: image-set(url("images/effigy.jpg") 1x);
  filter: sepia(0.1) saturate(1.05) contrast(1.04) brightness(1.12);
}

/* Dusk over water, with the sun's afterglow still on the horizon. */
.hero-sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(
      120% 62% at 50% 108%,
      rgba(238, 138, 74, 0.72) 0%,
      rgba(214, 104, 52, 0.4) 34%,
      rgba(180, 88, 48, 0) 68%
    ),
    linear-gradient(
      180deg,
      #052830 0%,
      #073942 28%,
      #0F4E54 50%,
      #17605F 66%,
      #3C6659 80%,
      #7E6B4C 92%,
      #A87748 100%
    );
  /* The photo already carries the palette — fire and teal — so this only
     tints it. Multiply at any real strength turns the fire to mud. */
  opacity: 0.26;
}

/* Aged-print edge darkening, plus enough weight behind the centre column to
   keep sand-coloured type legible over the fire. */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      75% 55% at 50% 42%,
      rgba(7, 47, 53, 0.6) 0%,
      rgba(7, 47, 53, 0.3) 58%,
      rgba(7, 47, 53, 0) 100%
    ),
    radial-gradient(
      120% 100% at 50% 45%,
      rgba(7, 47, 53, 0) 40%,
      rgba(7, 47, 53, 0.5) 100%
    );
}

.hero-inner {
  width: 100%;
  max-width: 54rem;
  text-align: center;
  color: var(--sand);
}

.hero :focus-visible { outline-color: var(--sand); }

.opening {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  font-family: var(--body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  line-height: 1.45;
  color: #F6E9DA;
  /* Holds the line together where it crosses the lit part of the effigy. */
  text-shadow: 0 1px 14px rgba(5, 32, 37, 0.85), 0 0 3px rgba(5, 32, 37, 0.5);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-weight: 700;
  font-size: clamp(2.9rem, 12vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(5, 32, 37, 0.6);
}

/* The second half of the name, set as a kicker under the wordmark. */
.burnmark {
  margin: clamp(0.6rem, 1.6vw, 1rem) 0 0;
  font-family: var(--mono);
  font-size: clamp(1.05rem, 3vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.5em;
  /* Tracking adds space after the last letter; pull it back to stay centred. */
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--dusk);
  text-shadow: 0 1px 14px rgba(5, 32, 37, 0.85);
}

.tide {
  display: block;
  width: min(100%, 34rem);
  height: 20px;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto clamp(1.5rem, 3.5vw, 2rem);
  overflow: visible;
}

.tide path {
  fill: none;
  stroke: var(--dusk);
  stroke-width: 2;
  stroke-linecap: round;
}

.meta {
  /* Generous gap below, so the button sits clear of the date line. */
  margin: 0 0 clamp(3.5rem, 8vw, 5rem);
  font-family: var(--mono);
  font-size: clamp(0.92rem, 2.4vw, 1.05rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F6E9DA;
  text-shadow: 0 1px 12px rgba(5, 32, 37, 0.9);
}

.meta-dot { margin: 0 0.75em; opacity: 0.55; }

/* Letterpress block, not a pill — vintage print had no rounded buttons. */
.cta {
  display: inline-block;
  padding: 1rem 2.5rem;
  border: 1px solid var(--sand);
  background: var(--sand);
  color: var(--deep);
  box-shadow: 4px 4px 0 rgba(7, 47, 53, 0.5);
  font-family: var(--mono);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta:hover,
.cta:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(7, 47, 53, 0.5);
}

@media (max-width: 34rem) {
  .meta { display: grid; gap: 0.5rem; }
  .meta-dot { display: none; }
  .tide { width: min(88%, 22rem); }
}

/* ------------------------------------------------------------- sections --- */

.wrap {
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: clamp(4.5rem, 11vw, 8rem) 0;
  scroll-margin-top: 2rem;
}

.section-form { background: #EEDBC3; }

.section-close {
  background: var(--deep);
  color: var(--sand);
}

.eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sun-ink);
}

.title {
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: clamp(2.15rem, 6.4vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Deliberately quieter than the heading above it — the two were competing. */
.lead {
  margin: 0 0 1.5rem;
  font-size: clamp(1.4rem, 2.6vw, 1.62rem);
  line-height: 1.55;
  font-style: italic;
}

.section p { margin: 0 0 1.25rem; }

/* Pull-quote — the line in each section worth slowing down for. */
.pull {
  margin: clamp(2rem, 5vw, 2.75rem) 0;
  padding-left: 1.5rem;
  border-left: 3px double var(--sun);
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.8vw, 2.05rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.call {
  margin: clamp(2.25rem, 5vw, 3rem) 0 0;
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  line-height: 1.4;
  color: var(--tide);
}

.sub {
  margin: clamp(2.25rem, 5vw, 3rem) 0 1rem;
  font-family: var(--mono);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tide);
}

/* The tide line — every section break is a waterline, never a straight rule. */
.rule {
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 12' preserveAspectRatio='none'%3E%3Cpath d='M0,7 C22,3 40,10 62,7 C84,4 100,10 124,8 C148,6 164,2 188,5 C212,8 230,11 254,8 C278,5 294,3 318,6 C342,9 360,10 384,7 C408,4 428,2 452,6 C476,10 494,11 518,8 C542,5 562,4 586,7 C592,8 596,7 600,7' fill='none' stroke='%23E4602A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 600px 12px;
  opacity: 0.55;
}

/* ------------------------------------------------------------- photos ----- */

.plate {
  margin: 0;
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(14rem, 40vh, 24rem);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Real photos will read as aged prints rather than modern snapshots. */
  filter: sepia(0.32) saturate(0.85) contrast(1.04);
}

/* The site from the air. The source is only 639px wide, so it is upscaled a
   long way in a full-bleed band — the grain and sepia mask some of that, but a
   larger original would visibly sharpen it. */
.plate-aerial {
  background-image: url("images/aerial.jpg"), linear-gradient(180deg, #0F4E54, #3C6659, #A87748);
  background-position: center 42%;
  filter: sepia(0.2) saturate(0.92) contrast(1.06);
}

/* Mounted prints, pasted-in-an-album style. Squaring both crops lets photos of
   different shapes sit together without one dominating. */
.gallery {
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 30rem) {
  .gallery { grid-template-columns: 1fr; }
}

.mount {
  margin: 0;
  padding: 0.55rem;
  background: rgba(255, 252, 246, 0.75);
  border: 1px solid var(--hairline);
  box-shadow: 4px 4px 0 rgba(22, 48, 47, 0.12);
}

/* The photo is a real <img> inside a button so the lightbox can reuse its
   source and screen readers get the alt text. */
.mount-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.mount-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: sepia(0.14) contrast(1.04);
  transition: filter 0.25s ease;
}

.mount-btn:hover .mount-img,
.mount-btn:focus-visible .mount-img { filter: sepia(0) contrast(1.05); }

.mount-cap {
  margin: 0.65rem 0 0.1rem;
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tide);
  text-align: center;
  line-height: 1.5;
}


/* --------------------------------------------------------- principles ----- */

.principles {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 5vw, 2.75rem);
}

.principle {
  position: relative;
  padding-left: 3.5rem;
}

.principle-num {
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--sun-ink);
}

.principle-name {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 1.72rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.principle p { margin: 0; }

/* Consent is the eleventh principle, so its own section carries the +1. */
.plus-one {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.5vw, 2.9rem);
  line-height: 1;
  color: var(--sun-ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- routes ----- */

.routes {
  margin: 0;
  display: grid;
}

.route {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px dotted var(--hairline);
}

.route:last-child { border-bottom: 0; }

.route dt {
  min-width: 0;
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: 1.2rem;
}

.route-code {
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun-ink);
}

.route-time {
  flex: none;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-align: right;
  color: var(--tide);
}

@media (max-width: 30rem) {
  .route { flex-direction: column; gap: 0.3rem; }
  .route-time { text-align: left; }
}

/* ------------------------------------------------------------ tickets ----- */

/* A torn ticket stub — vintage device, and honest about what the section is. */
.stub {
  margin: 0 0 2rem;
  padding: 2rem 1.5rem;
  border: 1px solid var(--ink);
  border-left: 4px double var(--ink);
  background: rgba(255, 252, 246, 0.45);
  box-shadow: 5px 5px 0 rgba(22, 48, 47, 0.12);
  text-align: center;
}

.stub-line {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tide);
}

.stub-note {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1.1;
}

/* --------------------------------------------------------------- form ----- */

.form { margin-top: clamp(2.25rem, 5vw, 3rem); }

.field-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 34rem) {
  .field-row { grid-template-columns: 1fr; }
}

.field { margin: 0 0 1.75rem; }

.label {
  display: block;
  margin-bottom: 0.55rem;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tide);
}

.input {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: rgba(255, 252, 246, 0.6);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.15rem;
  line-height: 1.5;
}

.input:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 1px;
  border-color: var(--sun);
}

.textarea { resize: vertical; }

.input::placeholder { color: rgba(22, 48, 47, 0.45); font-style: italic; }

.fieldset {
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--hairline);
  background: rgba(255, 252, 246, 0.5);
  cursor: pointer;
  font-size: 1.14rem;
}

.choice:hover { border-color: var(--sun); }

.choice input { accent-color: var(--sun); margin: 0; }

.hint {
  margin: 0.75rem 0 0;
  font-size: 1.1rem;
  font-style: italic;
  opacity: 0.75;
}

.form-status {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border-left: 3px double var(--sun);
  background: rgba(228, 96, 42, 0.07);
  font-size: 1.12rem;
}

.submit {
  padding: 1rem 2.75rem;
  border: 1px solid var(--deep);
  border-radius: 0;
  background: var(--deep);
  color: var(--sand);
  box-shadow: 4px 4px 0 rgba(22, 48, 47, 0.25);
  font-family: var(--mono);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.submit:disabled {
  opacity: 0.4;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- faq ----- */

.faq { margin-top: clamp(2rem, 5vw, 2.5rem); }

.qa { border-top: 1px dotted var(--hairline); }
.qa:last-child { border-bottom: 1px dotted var(--hairline); }

.qa summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.35;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 1.15rem;
  color: var(--sun-ink);
}

.qa[open] summary::after { content: "\2013"; }

.qa p { margin: 0 0 1.35rem; }

/* ---------------------------------------------------- community + footer -- */

.section-close .eyebrow { color: var(--dusk); }

.links {
  list-style: none;
  margin: clamp(2rem, 5vw, 2.5rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.link {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  border: 1px solid rgba(242, 228, 210, 0.4);
  color: var(--sand);
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.link:hover,
.link:focus-visible {
  background: var(--sand);
  color: var(--deep);
}

.section-close :focus-visible,
.footer :focus-visible { outline-color: var(--sand); }

.footer {
  padding: 0 0 clamp(3rem, 8vw, 5rem);
  background: var(--deep);
  color: var(--sand);
  text-align: center;
}

.footer-line {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  opacity: 0.92;
}

.footer-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ------------------------------------------------------------- motion ----- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .opening, .wordmark, .meta, .cta {
    animation: rise 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
  }
  .opening { animation-delay: 0.1s; }
  .wordmark { animation-delay: 0.28s; }
  .meta { animation-delay: 1.15s; }
  .cta { animation-delay: 1.3s; }

  .tide path {
    stroke-dasharray: 1240;
    animation: draw 1.5s cubic-bezier(0.35, 0.7, 0.25, 1) 0.55s backwards;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes draw {
  from { stroke-dashoffset: 1240; }
  to   { stroke-dashoffset: 0; }
}

/* ----------------------------------------------------------- lightbox ----- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(4.5rem, 9vw, 6rem) clamp(0.75rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  /* Near-solid plus a blur: at plain 0.97 the page text behind still read
     through and competed with the photograph. */
  background: rgba(5, 32, 37, 0.94);
  backdrop-filter: blur(14px) saturate(0.85);
  -webkit-backdrop-filter: blur(14px) saturate(0.85);
}

/* display:grid would otherwise defeat the hidden attribute. */
.lightbox[hidden] { display: none; }

.lb-img {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid rgba(242, 228, 210, 0.28);
  filter: sepia(0.08) contrast(1.03);
}

.lb-btn {
  border: 1px solid rgba(242, 228, 210, 0.5);
  background: rgba(7, 47, 53, 0.85);
  color: var(--sand);
  font-family: var(--mono);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lb-btn:hover {
  background: var(--sand);
  color: var(--deep);
}

.lb-close {
  position: absolute;
  top: clamp(1rem, 3vw, 1.75rem);
  right: clamp(0.75rem, 3vw, 2.5rem);
  padding: 0.7rem 1.15rem;
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lb-prev,
.lb-next {
  grid-row: 1;
  width: clamp(2.75rem, 8vw, 3.5rem);
  height: clamp(2.75rem, 8vw, 3.5rem);
  font-size: 1.75rem;
  line-height: 1;
}

.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-prev[hidden], .lb-next[hidden] { display: none; }

.lb-cap {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dusk);
}

.lightbox :focus-visible { outline-color: var(--sand); }

.lightbox ::selection {
  background: rgba(240, 145, 106, 0.78);
  color: var(--deep);
  text-shadow: none;
}

/* ================================================================ pages ====
   Added when the one-page site was split into a page per section. The
   sections themselves are unchanged; everything below is navigation.        */

/* Current page marker in the menu. */
.menu-list a.is-current { color: var(--dusk); }

.menu-list a.is-current .menu-num::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--sun);
  vertical-align: middle;
}

/* "Lost Paradise — home" above the numbered list. */
.menu-home {
  display: block;
  margin-bottom: 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(242, 228, 210, 0.2);
  color: var(--sand);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.menu-home:hover { color: var(--dusk); }
.menu-home.is-current { color: var(--dusk); }

/* Section index under the hero on the home page. */
.home-index {
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6rem) 1.5rem clamp(4rem, 10vw, 7rem);
}

.home-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-list li { border-bottom: 1px solid var(--hairline); }
.home-list li:first-child { border-top: 1px solid var(--hairline); }

.home-list a {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.85rem 0;
  color: var(--ink);
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 500;
  font-size: clamp(1.3rem, 4.2vw, 1.75rem);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.15s ease;
}

.home-list a:hover { color: var(--sun-ink); }

/* The index reuses .menu-num on a light ground, where the dark-panel orange is
   far too pale. */
.home-list .menu-num { color: var(--sun-ink); }

/* Previous / next pager at the foot of each section page. */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4rem) 1.5rem clamp(3.5rem, 9vw, 5.5rem);
  border-top: 1px solid var(--hairline);
}

.pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--ink);
  text-decoration: none;
}

.pager-link.is-empty { visibility: hidden; }
.pager-next { text-align: right; }

.pager-dir {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sun-ink);
}

.pager-label {
  font-family: var(--display);
  font-variation-settings: var(--wonk);
  font-weight: 500;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  line-height: 1.2;
}

.pager-link:hover .pager-label { color: var(--sun-ink); }

.pager-top {
  flex: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.7;
}

.pager-top:hover { color: var(--sun-ink); opacity: 1; }

/* Section pages open directly on a section, so drop the leading gap that
   only made sense when a hero sat above it. */
.page:not(.page-home) main > .section:first-child {
  padding-top: clamp(5.5rem, 12vw, 8rem);
}

@media (max-width: 30rem) {
  .pager { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  .pager-top { grid-column: 1 / -1; order: 3; text-align: center; }
}

/* ============================================================== texture ====
   Added after the split into pages. Splitting removed the rhythm the long
   scroll used to have — dark bands and photo plates broke up the sand — so
   each page had become one uniform field. These rules give a page a head, a
   body and a foot again without touching the content or the layout.         */

/* A page opens with a cool wash off the sea, fading out well above the body
   copy so running text still sits on near-uniform ground. Dark sections bring
   their own ground and are left alone. */
.page:not(.page-home) main > .section:first-child:not(.section-close) {
  background-image:
    radial-gradient(130% 40% at 50% -8%, rgba(18, 87, 92, 0.055), transparent 74%);
  background-repeat: no-repeat;
}

/* The home page's section index sits on a slightly lifted panel so the hero
   does not hand straight over to flat sand. */
.home-index {
  position: relative;
}

.home-index::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(255, 252, 246, 0.55), rgba(255, 252, 246, 0));
}

/* The pager closes a page against a faint damp-sand band, echoing the rule
   dividers that used to separate sections on the long page. */
.pager {
  position: relative;
}

.pager::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(90, 62, 36, 0), rgba(90, 62, 36, 0.05));
}

/* Pull quotes and callouts lift off the ground instead of floating on it. */
.pull,
.note {
  position: relative;
}

/* -------------------------------------------------- accessibility guards --
   Texture is decoration and must never be the reason text is hard to read.  */

/* Readers who ask for more contrast get the flat, solid ground back. */
@media (prefers-contrast: more) {
  body {
    background-image: none;
    background-color: var(--sand);
  }

  body::after { display: none; }

  .page:not(.page-home) main > .section:first-child:not(.section-close),
  .home-index::before,
  .pager::before {
    background-image: none;
  }
}

/* Same for forced-colours mode, where our colours are replaced anyway. */
@media (forced-colors: active) {
  body::after { display: none; }
}

/* Texture is screen dressing; print it and it only costs ink and legibility. */
@media print {
  body {
    background-image: none;
    background-color: #fff;
  }

  body::after { display: none; }

  .page:not(.page-home) main > .section:first-child:not(.section-close),
  .home-index::before,
  .pager::before {
    background-image: none;
  }
}