/* ---- fonts.css ---- */
/* css/fonts.css — GENERATED by internal/perf/subset-fonts.py; do not hand-edit.
   Self-hosted, subset web fonts with font-display: swap. Weights are the ones the
   stylesheets use: Archivo 400-700, Fraunces roman 400-560 (optical-size axis kept),
   Fraunces italic 400, Spline Sans Mono 400-600. Each -ext face holds the rest of
   Google's latin subset and loads only if a page prints one of those characters. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/archivo-ext.woff2') format('woff2');
  unicode-range: U+000D, U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0102, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2009, U+201A, U+201E, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/archivo.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 560; font-display: swap;
  src: url('/fonts/fraunces-ext.woff2') format('woff2');
  unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+201A, U+201E, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 560; font-display: swap;
  src: url('/fonts/fraunces.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/fraunces-italic-ext.woff2') format('woff2');
  unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+0323, U+201A, U+201E, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/spline-sans-mono-ext.woff2') format('woff2');
  unicode-range: U+000D, U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0102, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+0323, U+200B, U+201A, U+201E, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/spline-sans-mono.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}

/* ---- goa/tokens.css ---- */
/* css/goa/tokens.css — "Golden hour on laterite" (phase 2 redesign, 2026-09-14)
   ---------------------------------------------------------------------------
   6:10 pm in a South Goa village when the mandap lights come on. One palette,
   one accent. Limewash is the page, marine is the chrome and the sea, laterite
   is the only colour that asks you to do something. Azulejo blue appears in
   exactly two places: map pins and the tile band at the head of the footer.
   No gold paint anywhere (the sister sites own gold and cream-serif).

   Contrast (WCAG, computed): ink on limewash 14.1:1 · white on marine 12.0:1 ·
   white on laterite 5.1:1 · laterite-text on limewash 5.6:1 · ink-soft on
   limewash 7.4:1 · ink-soft on sand 6.4:1 · sea-foam on marine 7.9:1.
   Old variable names that generators write inline (--s-*, --measure, --t-*,
   --hairline, --gold-text, --ink-soft, --line, --muted) are kept as aliases. */
:root {
  --limewash: #F4EFE4;
  --sand: #E9DCC5;
  --sand-deep: #DDCBAE;
  --marine: #003D42;
  --marine-deep: #002C30;
  --marine-lift: #0B4D52;
  --laterite: #A35B37;
  --laterite-deep: #8A4A2B;
  --laterite-text: #92502F;
  --laterite-glow: #D98E63;
  --ink: #04252A;
  --ink-soft: #3C5254;
  --azulejo: #2B4C9B;
  --foam: #B9D3D0;

  --gold-text: var(--laterite-text);
  --muted: var(--ink-soft);
  --accent: var(--laterite);
  --wash: var(--sand);
  --line: rgba(4, 37, 42, .16);
  --rule: 1px solid var(--line);
  --hairline: 1px solid var(--line);
  --hairline-light: 1px solid rgba(244, 239, 228, .2);

  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --font-body: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-figure: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.125rem, .35vw + 1.05rem, 1.25rem);
  --t-lg: clamp(1.35rem, .8vw + 1.15rem, 1.7rem);
  --t-xl: clamp(1.7rem, 1.6vw + 1.3rem, 2.4rem);
  --t-2xl: clamp(2.1rem, 3vw + 1.3rem, 3.4rem);
  --t-3xl: clamp(2.5rem, 4.4vw + 1.2rem, 4.6rem);
  --t-hero: clamp(2.7rem, 6.2vw + .9rem, 6.4rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-y: clamp(3.5rem, 8vw, 7.5rem);
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --measure: 66ch;
  --wrap: 1280px;
  --wrap-narrow: 800px;

  --radius: 3px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --slow: 900ms;

  /* The high-water line, drawn once as a mask and reused on every band edge. */
  --tide-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14c60-8 120-8 180 0s120 8 180 0 120-8 180 0 120 8 180 0 120-8 180 0 120 8 180 0 120-8 180 0 120 8 180 0v14z'/%3E%3C/svg%3E");
  /* An arrow for a link that points onward (13 Oct 2026), drawn as a mask so it takes any colour. */
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6h16.5M12.5 1.5 17.5 6l-5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Laterite: the cut red stone of every Goan wall. Two offset dot fields make
     the pitted surface; no image request. */
  --laterite-grain: radial-gradient(rgba(4, 37, 42, .09) 1px, transparent 1.4px) 0 0 / 7px 7px,
                    radial-gradient(rgba(163, 91, 55, .10) 1.2px, transparent 1.6px) 3px 4px / 11px 9px;
}

/* ---- goa/base.css ---- */
/* css/goa/base.css — reset, type, links, buttons, layout primitives. */

/* Metric-matched fallbacks (no download): while Fraunces and Archivo are still
   arriving, Georgia and Arial are resized to the same line lengths, so the swap
   does not reflow the headline and push the page (CLS). Ratios computed with
   fontTools on 2026-09-14 from the self-hosted files. */
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); size-adjust: 103%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces Fallback XL'; src: local('Georgia'); size-adjust: 90%; ascent-override: 108%; descent-override: 28%; line-gap-override: 0%; }
@media (min-width: 900px) { .page-mast h1, .home-hero h1 { font-family: 'Fraunces', 'Fraunces Fallback XL', Georgia, serif; } }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('Roboto'), local('Helvetica Neue'); size-adjust: 98.4%; ascent-override: 89.2%; descent-override: 21.3%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--limewash); color: var(--ink);
  font: 400 var(--t-base)/1.68 var(--font-body);
  font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 420; font-optical-sizing: auto;
  line-height: 1.12; letter-spacing: -.012em; margin: 0; text-wrap: balance; color: inherit;
}
h1 { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -.022em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); line-height: 1.2; }
h4 { font-size: var(--t-md); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p + p, p + ul, ul + p, p + ol, ol + p { margin-top: var(--s-4); }
h2 + p, h3 + p, h2 + ul, h3 + ul { margin-top: var(--s-3); }
strong, b { font-weight: 640; }
em, i { font-style: italic; }
small { font-size: .82em; }
abbr[title] { text-decoration: none; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--laterite) 70%, transparent); transition: text-decoration-color .2s, color .2s; }
a:hover { color: var(--laterite-text); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--laterite); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--s-4); }
.stack > h2, .stack > h3 { margin-top: var(--s-7); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--laterite); color: #fff; padding: .6rem 1rem; text-decoration: none; }
.skip-link:focus { top: 1rem; }

/* Label above a heading: sentence case, laterite, a short tide stroke before it.
   Not letter-spaced capitals (the sister sites' tell). */
.plaque, .eyebrow, .design-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 560 var(--t-sm)/1.3 var(--font-body); color: var(--laterite-text); letter-spacing: 0;
}
.plaque::before, .eyebrow::before, .design-kicker::before {
  content: ""; width: 1.6rem; height: .5rem; flex: none; background: currentColor;
  -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat;
}
.section-head > * + * { margin-top: var(--s-4); }
.section-head h1 + .lede, .section-head h2 + .lede { margin-top: var(--s-5); }
.lede { font-size: var(--t-md); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.caption, figcaption { font-size: var(--t-xs); line-height: 1.55; color: var(--ink-soft); }
.h1-sub { display: block; font-size: .42em; line-height: 1.3; letter-spacing: 0; margin-top: .5rem; color: var(--ink-soft); font-weight: 400; }
.pull { font: 400 var(--t-xl)/1.25 var(--font-display); color: var(--marine); max-width: 24ch; }
.pull::before { content: "\201C"; color: var(--laterite); }

/* Buttons: laterite block, square shoulders, no arrow glyphs. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.4rem; border: 1.5px solid transparent; border-radius: var(--radius);
  font: 600 1rem/1.2 var(--font-body); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease);
}
.btn-primary { background: var(--laterite); color: #fff; }
.btn-primary:hover { background: var(--laterite-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-small { min-height: 2.5rem; padding: .45rem 1rem; font-size: var(--t-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---- goa/shell.css ---- */
/* css/goa/shell.css — header, footer, call bar, page masthead, reading rail. */

/* ---- header: a marine bar, the mark on the left, one laterite action ---- */
.site-header { background: var(--marine); color: var(--limewash); position: relative; z-index: 40; }
@media (min-width: 960px) { .site-header { position: sticky; top: 0; } }
.header-bar { display: flex; align-items: center; gap: var(--s-5); min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--limewash); margin-right: auto; }
.brand:hover { color: var(--limewash); }
.brand-mark { width: 3.1rem; height: auto; }
.brand-type { font: 460 1.18rem/1 var(--font-display); letter-spacing: -.005em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: .25rem clamp(.6rem, 1.6vw, 1.6rem); }
.nav a:not(.btn) { color: var(--limewash); text-decoration: none; font: 500 .96rem/1 var(--font-body); padding: .6rem .1rem; position: relative; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 2px; background: var(--laterite-glow); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { margin-left: .5rem; min-height: 2.6rem; padding-block: .5rem; }
.nav-toggle { display: none; }

@media (max-width: 959px) {
  .brand-mark { width: 2.6rem; }
  .brand-type { font-size: 1.05rem; }
  .nav-toggle { display: inline-flex; align-items: center; gap: .55rem; background: none; border: 1px solid rgba(244,239,228,.35); border-radius: var(--radius); color: var(--limewash); padding: .5rem .8rem; font-size: .95rem; cursor: pointer; }
  .nav-toggle-lines { width: 1.1rem; height: .7rem; background: linear-gradient(currentColor 0 0) top / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) bottom / 70% 1.5px no-repeat; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--marine); padding: .5rem var(--gutter) 1.5rem; border-top: var(--hairline-light); }
  .nav[data-open="false"] { display: none; }
  html:not(.js) .nav[data-open="false"] { display: flex; position: static; }
  .nav a:not(.btn) { padding: .95rem 0; font-size: 1.1rem; border-bottom: var(--hairline-light); }
  .nav a:not(.btn)::after { display: none; }
  .nav-cta { margin: 1.2rem 0 0; }
}
html:not(.js) .nav-toggle { display: none; }
@media (max-width: 959px) { html:not(.js) .header-bar { flex-wrap: wrap; } }

/* ---- footer: azulejo tile band, then the studio and the link groups ---- */
.site-footer { background: var(--marine-deep); color: var(--foam); font-size: var(--t-sm); margin-top: 0; }
.footer-tiles {
  height: 22px;
  background:
    radial-gradient(circle at 50% 50%, var(--limewash) 0 3px, transparent 3.5px) 0 0 / 22px 22px,
    conic-gradient(from 45deg, var(--azulejo) 0 25%, #F4EFE4 0 50%, var(--azulejo) 0 75%, #F4EFE4 0) 0 0 / 22px 22px;
}
/* Text links only (13 Oct 2026): this rule used to turn the footer's Check my date button text limewash,
   4.46:1 on laterite; the button now keeps its white (5.1:1) like every other one. */
.site-footer a:not(.btn) { color: var(--limewash); text-decoration-color: rgba(217,142,99,.55); }
.site-footer a:not(.btn):hover { color: #fff; }
.footer-top { display: grid; gap: var(--s-7); padding-block: var(--s-8) var(--s-7); }
@media (min-width: 960px) { .footer-top { grid-template-columns: minmax(16rem, 22rem) 1fr; gap: var(--s-9); } }
.footer-logo img { width: 9.5rem; }
.footer-line { margin-top: var(--s-5); color: var(--limewash); font: 400 1.15rem/1.45 var(--font-display); max-width: 30ch; }
.footer-parent { font-style: normal; margin-top: var(--s-4); line-height: 1.6; }
.footer-studio .btn { margin-top: var(--s-5); }
.footer-links { display: grid; gap: var(--s-5); align-content: start; }
.footer-group { display: grid; gap: .4rem var(--s-5); padding-top: var(--s-4); border-top: var(--hairline-light); }
@media (min-width: 720px) { .footer-group { grid-template-columns: 11rem 1fr; align-items: baseline; } .footer-group ul { margin-top: 0; } }
.footer-group h3 { font: 460 1.1rem/1.3 var(--font-display); color: var(--limewash); }
.footer-group ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.35rem; }
.footer-group a { text-decoration: none; }
.footer-group a:hover { text-decoration: underline; }
/* 13 Oct 2026: on a phone each link is a 41px tap target on one even row rhythm (they were 16px tall). */
@media (max-width: 719px) { .footer-group ul { row-gap: 0; margin-top: var(--s-1); } .footer-group a { display: inline-block; padding-block: .5rem; } }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-block: var(--s-5) var(--s-7); border-top: var(--hairline-light); font-size: var(--t-xs); }
.footer-base p { margin: 0; }
.footer-owner { max-width: 70ch; }
.design-image-note { font-size: var(--t-xs); padding-bottom: var(--s-7); margin-top: calc(var(--s-5) * -1); color: var(--foam); }

/* ---- call bar: one action on phones, after the first screen ---- */
.callbar { display: none; }
@media (max-width: 759px) {
  .js .callbar { display: block; position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 50; opacity: 0; transform: translateY(1.2rem); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .js .callbar.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .callbar .btn { box-shadow: 0 10px 30px -10px rgba(0, 44, 48, .6); flex-direction: column; gap: .1rem; padding-block: .55rem; line-height: 1.15; }
  .callbar-note { font-size: .72rem; font-weight: 400; opacity: .92; }
}

/* ---- breadcrumbs ---- */
.crumbs { font-size: var(--t-xs); color: inherit; opacity: .85; display: flex; flex-wrap: wrap; gap: .2rem .45rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---- page masthead: every inner page opens on the sea ---- */
.page-mast { background: var(--marine); color: var(--limewash); position: relative; padding-block: var(--s-6) calc(var(--s-8) + 20px); overflow: hidden; }
.page-mast::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 24px; background: var(--limewash); -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat; }
.page-mast-grid { display: grid; gap: var(--s-6); align-items: center; }
.page-mast.has-aside .page-mast-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .page-mast.has-aside .page-mast-grid { grid-template-columns: minmax(0, 1.7fr) minmax(14rem, 1fr); } }
.page-mast .section-head { margin-top: var(--s-6); max-width: 58rem; }
.page-mast h1 { font-size: clamp(2.3rem, 4.6vw + .8rem, 4.8rem); }
.page-mast .lede, .page-mast .caption, .page-mast .h1-sub { color: var(--foam); }
.page-mast .plaque, .page-mast h1 em { color: var(--laterite-glow); }
.page-mast a { text-decoration-color: rgba(217,142,99,.6); }
.page-mast a:hover { color: #fff; }
.page-dates { margin-top: var(--s-4); }
.page-mast .page-dates { color: var(--foam); }
.mast-aside { justify-self: end; width: min(100%, 17rem); }
@media (max-width: 899px) { .mast-aside { justify-self: start; width: min(100%, 13rem); } }

/* ---- reading layout: the contents rail is a line of stops, like the coast ---- */
.design-reading-layout { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.design-reading-body > .section:first-child { padding-top: var(--s-7); }
.design-reading-body .wrap, .design-reading-body .wrap-narrow { padding-inline: 0; max-width: none; }
.design-reader nav { display: flex; gap: .5rem; overflow-x: auto; padding-block: var(--s-5) .25rem; scrollbar-width: none; }
.design-reader nav::-webkit-scrollbar { display: none; }
.design-reader .design-kicker { display: none; }
.design-reader a { flex: 0 0 auto; font-size: var(--t-xs); text-decoration: none; padding: .45rem .8rem; border: var(--hairline); border-radius: 999px; white-space: nowrap; color: var(--ink-soft); }
.design-reader a.design-reader-enquire { background: var(--laterite); color: #fff; border-color: var(--laterite); font-weight: 600; }
@media (min-width: 1100px) {
  .design-reading-layout { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--s-8); }
  .design-reader { position: relative; }
  .design-reader nav { position: sticky; top: 6rem; flex-direction: column; gap: 0; overflow: visible; padding-block: var(--s-7) 0; }
  .design-reader .design-kicker { display: inline-flex; margin-bottom: var(--s-4); }
  .design-reader a { white-space: normal; border: 0; border-radius: 0; padding: .45rem 0 .45rem 1.35rem; font-size: .875rem; line-height: 1.35; position: relative; }
  .design-reader a:not(.design-reader-enquire)::before { content: ""; position: absolute; left: .28rem; top: 0; bottom: 0; width: 1px; background: var(--line); }
  .design-reader a:not(.design-reader-enquire)::after { content: ""; position: absolute; left: 0; top: .85rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--limewash); border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent); transition: background-color .3s, border-color .3s, transform .3s var(--ease); }
  .design-reader a:hover, .design-reader a.is-current { color: var(--ink); }
  .design-reader a.is-current::after { background: var(--laterite); border-color: var(--laterite); transform: scale(1.25); }
  .design-reader a.design-reader-enquire { margin-top: var(--s-5); padding: .7rem 1rem; border-radius: var(--radius); text-align: center; font-size: var(--t-sm); }
}
.page-mast .pull { color: var(--limewash); margin-top: var(--s-5); font-size: var(--t-lg); max-width: 34ch; }
.page-mast .pull::before { color: var(--laterite-glow); }

/* ---- goa/content.css ---- */
/* css/goa/content.css — the reading furniture every generator shares. */

/* Dark bands are the sea: marine, with the high-water line on their top edge. */
.section-dark, .section-ink { background: var(--marine); color: var(--limewash); position: relative; }
.section-dark::before, .section-ink::before { content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 24px; background: var(--marine); -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat; }
.section-dark .lede, .section-dark .caption, .section-ink .lede { color: var(--foam); }
.section-dark .plaque { color: var(--laterite-glow); }
.section-dark a:not(.btn) { text-decoration-color: rgba(217,142,99,.6); }
.section-dark a:not(.btn):hover { color: #fff; }
.section-dark .btn-ghost { color: var(--limewash); border-color: rgba(244,239,228,.45); }
.design-reading-body .section-dark:not(#enquire) { border-radius: 4px; padding: var(--s-7) clamp(1.25rem, 4vw, 3rem); margin-block: var(--s-7); }
.design-reading-body .section-dark:not(#enquire)::before { display: none; }

/* The short answer: a sand panel with a laterite edge, the part an engine quotes. */
.answer { background: var(--sand); border-left: 3px solid var(--laterite); padding: var(--s-5) var(--s-5) var(--s-5) clamp(1.1rem, 3vw, 2rem); border-radius: 0 4px 4px 0; max-width: var(--measure); }
.answer h2, .answer h3 { font-size: var(--t-md) !important; font-family: var(--font-body); font-weight: 640; letter-spacing: 0; }
.answer p { color: var(--ink); }
.section-dark .answer { background: var(--marine-lift); color: var(--limewash); }
.section-dark .answer p { color: var(--limewash); }

/* Prose inside content pages. */
.prose > * + *, .design-reading-body .section > .wrap > * + * { margin-top: var(--s-4); }
.design-reading-body h2 { margin-top: var(--s-8); }
.design-reading-body h2:first-child, .answer h2, .section-head h2, .enquiry h2 { margin-top: 0; }
.design-reading-body h3 { margin-top: var(--s-6); }
.design-reading-body :is(.venue-card, .proof-card, .work-card, .answer, .faq, .family) h3 { margin-top: 0; }
.design-reading-body p, .design-reading-body li { max-width: var(--measure); }
.design-reading-body ul:not([class]), .design-reading-body ol:not([class]) { padding-left: 1.2rem; }
.design-reading-body li + li { margin-top: .35rem; }

/* Fact tables: the ledger. Figures in the mono face, blanks said out loud. */
.fact-table { width: 100%; font-size: var(--t-sm); border-top: 2px solid var(--ink); margin-top: var(--s-4); }
.fact-table th, .fact-table td { text-align: left; vertical-align: top; padding: .7rem .9rem .7rem 0; border-bottom: var(--hairline); }
.fact-table thead th { font: 600 var(--t-xs)/1.3 var(--font-body); color: var(--ink-soft); padding-block: .6rem; }
.fact-table tbody th { font-weight: 560; }
.fact-table tbody th a { text-decoration-color: color-mix(in srgb, var(--laterite) 55%, transparent); }
.fact-table td { font-family: var(--font-figure); font-size: .86rem; letter-spacing: -.01em; }
.fact-table tbody tr { transition: background-color .2s; }
.fact-table tbody tr:hover { background: color-mix(in srgb, var(--sand) 55%, transparent); }
.fact-unknown { font-family: var(--font-body); font-size: var(--t-xs); color: var(--ink-soft); font-style: italic; }
.section-dark .fact-table { border-top-color: var(--limewash); }
.section-dark .fact-table th, .section-dark .fact-table td { border-bottom-color: rgba(244,239,228,.18); }
.section-dark .fact-table thead th, .section-dark .fact-unknown { color: var(--foam); }
div:has(> .fact-table) { overflow-x: auto; }

/* Questions: a rule, a question in the display face, and a plus that turns. */
.faq { border-top: var(--hairline); margin-top: var(--s-5); max-width: var(--measure); }
.faq details { border-bottom: var(--hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; font: 440 var(--t-md)/1.35 var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .9rem; height: .9rem; margin-top: .35rem; background: linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) center / 1.5px 100% no-repeat; transition: transform .35s var(--ease); color: var(--laterite); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 0 var(--s-5); color: var(--ink-soft); }
.section-dark .faq, .section-dark .faq details { border-color: rgba(244,239,228,.2); }
.section-dark .faq-body { color: var(--foam); }
.section-dark .faq summary::after { color: var(--laterite-glow); }

/* Link lists ("on file"): a column of stops. */
.onfile { list-style: none; padding: 0; margin-top: var(--s-4); display: grid; gap: 0; max-width: var(--measure); border-top: var(--hairline); }
.onfile li { border-bottom: var(--hairline); padding: .7rem 0 .7rem 1.4rem; position: relative; margin: 0 !important; }
.onfile li::before { content: ""; position: absolute; left: .1rem; top: 1.2rem; width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid var(--laterite); }
.onfile a { text-decoration: none; }
.onfile a:hover { text-decoration: underline; }

/* Three-up statements (studio, legacy home cards). */
.proof-grid { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 820px) { .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proof-card { border-top: 2px solid var(--marine); padding-top: var(--s-4); }
.proof-card h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.proof-card p { color: var(--ink-soft); }

.figure-row { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 720px) { .figure-row { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.figure { border-top: var(--hairline); padding-top: var(--s-4); }
.figure dt { font: 440 var(--t-lg)/1.2 var(--font-display); }
.figure dd { margin: var(--s-2) 0 0; color: var(--ink-soft); font-size: var(--t-sm); }

/* Photographs in teaching positions: whole frame, credit underneath, small. */
.plate { margin-block: var(--s-7); }
.plate img, .gallery img, .work-card img { width: 100%; border-radius: 3px; background: var(--sand); }
.plate img { max-height: 42rem; object-fit: contain; object-position: left center; background: transparent; }
.plate figcaption { margin-top: var(--s-3); max-width: var(--measure); }
.gallery { columns: 2 16rem; column-gap: var(--s-3); }
.gallery img { height: auto; margin-bottom: var(--s-3); break-inside: avoid; }
/* 13 Oct 2026: our own photographs are never cut to a 4:5 tile; each shows whole, at its own ratio,
   in two balanced columns (one on a phone). A gallery left empty once disabled images are stripped
   takes no space. */
.gallery:empty, div:has(> .gallery:empty) { display: none; }
.work-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin-top: var(--s-6); }
.work-card { text-decoration: none; display: block; }
.work-card img { height: auto; }
.work-card figcaption { margin-top: var(--s-3); }
.work-card h3 { font-size: var(--t-lg); color: var(--ink); }

/* Cards: journal entries and guides. A rule on top, not a box. */
.venue-grid { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin-top: var(--s-6); }
.venue-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.venue-card:hover { color: var(--ink); }
.venue-card:hover h3 { text-decoration: underline; text-decoration-color: var(--laterite); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.venue-card-media { order: -1; margin: calc(var(--s-4) * -1 - 2px) 0 var(--s-4); overflow: hidden; border-radius: 0 0 3px 3px; }
.venue-card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ease); }
.venue-card:hover .venue-card-media img { transform: scale(1.04); }
.venue-card-where { display: block; font-size: var(--t-xs); color: var(--laterite-text); font-weight: 560; margin-bottom: var(--s-2); }
.venue-card h3 { font-size: var(--t-lg); line-height: 1.22; }
.venue-card-facts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: var(--s-3); font: .82rem/1.4 var(--font-figure); color: var(--ink-soft); }
.hub-legend { color: var(--ink-soft); }
.onward p:first-child { font-size: var(--t-xs) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600; opacity: 1 !important; color: var(--laterite-text); }
.onward { border-color: var(--line) !important; border-radius: 4px !important; background: color-mix(in srgb, var(--sand) 45%, transparent); }

/* Other blocks. */
.abroad-note { margin-top: var(--s-4); padding: var(--s-4); background: color-mix(in srgb, var(--sand) 60%, transparent); border-radius: 4px; font-size: var(--t-xs); color: var(--ink-soft); }
.abroad-note .btn { margin-top: var(--s-3); }
.design-crosslinks { padding-block: var(--s-6); font-size: var(--t-sm); color: var(--ink-soft); }
.design-crosslinks::before { content: ""; display: block; border-top: var(--hairline); margin-bottom: var(--s-6); }
.design-crosslinks .design-kicker { margin-bottom: var(--s-3); }
.design-crosslinks p + p { margin-top: var(--s-2); }
aside[data-booking-guide-link] { max-width: var(--wrap); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-7); font: 500 var(--t-sm)/1.5 var(--font-body); }
.band + aside[data-booking-guide-link] { max-width: 850px; padding-inline: 24px; }
.bracket-table td { font-family: var(--font-body); font-size: var(--t-xs); line-height: 1.5; min-width: 15rem; }
.bracket-table td b { display: block; font-size: var(--t-sm); margin-bottom: .2rem; }
.bracket-table td em { display: block; margin-top: .3rem; color: var(--ink-soft); }
.chip { font: 500 var(--t-sm)/1 var(--font-body); padding: .6rem 1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); background: transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--marine); color: var(--limewash); border-color: var(--marine); }
.village-list { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0 var(--s-5); }
.village-list a { display: flex; justify-content: space-between; gap: var(--s-3); padding: .7rem 0; border-bottom: var(--hairline); text-decoration: none; }
.village-list b { font: 440 1.1rem/1.3 var(--font-display); }
.village-list span { font: .8rem/1.9 var(--font-figure); color: var(--ink-soft); }
.village-list a:hover b { color: var(--laterite-text); }
.design-reading-body > .section { padding-block: var(--s-7); }
.design-reading-body > .section:last-child { padding-bottom: var(--s-9); }
.design-reading-body .venue-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

/* ---- goa/forms.css ---- */
/* css/goa/forms.css — the ask. Name and WhatsApp number first; everything else optional. */
#enquire { scroll-margin-top: 4.5rem; }
.enquiry { display: grid; gap: var(--s-6) var(--s-9); align-items: start; }
@media (min-width: 900px) {
  .enquiry { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head form" "after form"; }
  .enquiry > .section-head { grid-area: head; }
  .enquiry > form, .enquiry > .form-grid { grid-area: form; }
  .enquiry > .after-strip, .enquiry > .after-block { grid-area: after; }
}
.enquiry h2 { font-size: var(--t-2xl); }
.form-grid { display: grid; gap: var(--s-4); background: var(--limewash); color: var(--ink); padding: clamp(1.25rem, 3.5vw, 2.25rem); border-radius: 4px; }
.field-row { display: grid; gap: var(--s-4); align-items: end; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: var(--t-sm); }
.field label small { font-weight: 400; color: var(--ink-soft); white-space: nowrap; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3rem; padding: .7rem .85rem; background: #fff; color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--laterite); box-shadow: 0 0 0 3px color-mix(in srgb, var(--laterite) 22%, transparent); }
.form-grid .btn-primary { width: 100%; min-height: 3.25rem; font-size: 1.05rem; }
.form-status { font-weight: 600; font-size: var(--t-sm); min-height: 1.4em; margin: 0; }
.form-status[data-state="error"] { color: #9B2C1C; }
.form-note { font-size: var(--t-xs); color: var(--ink-soft); margin: 0; }
.form-grid .answer { border-left-color: var(--laterite); }

/* What happens next: a real sequence, so it is numbered. */
.after-strip { list-style: none; padding: 0; counter-reset: next; display: grid; gap: 0; max-width: 34rem; }
.after-strip li { counter-increment: next; display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; padding: .8rem 0; border-top: var(--hairline-light); }
.after-strip li::before { content: counter(next); font: 400 1.3rem/1 var(--font-figure); color: var(--laterite-glow); }
:not(.section-dark) > * > .enquiry .after-strip li { border-top: var(--hairline); }
:not(.section-dark) > * > .enquiry .after-strip li::before { color: var(--laterite-text); }
/* 13 Oct 2026: the booking-guide link closes this column (scripts/partials.js afterStrip), on the
   steps' own grid with a drawn arrow where a number would be. It used to float alone in a band of
   its own above the footer on every page. */
.after-block { max-width: 34rem; }
.after-link { display: grid; grid-template-columns: 2.6rem 1fr; align-items: start; margin: 0; padding: .8rem 0 0; border-top: var(--hairline-light); font-weight: 500; }
.after-link::before { content: ""; width: 1.25rem; height: .75rem; margin-top: .5em; margin-top: calc((1lh - .75rem) / 2 + 1px); background: var(--laterite-glow); -webkit-mask: var(--arrow-mask) center / contain no-repeat; mask: var(--arrow-mask) center / contain no-repeat; }
:not(.section-dark) > * > .enquiry .after-link { border-top: var(--hairline); }
:not(.section-dark) > * > .enquiry .after-link::before { background: var(--laterite-text); }

/* The date check (js/lead-surfaces.js), one strip, drawn here rather than inline. */
.gwc-datecheck, .pg-dossier-brand { margin: var(--s-5) 0 var(--s-6); padding: var(--s-5); background: var(--marine); color: var(--limewash); border-radius: 4px; max-width: var(--measure); }
.gwc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; margin-bottom: var(--s-3); }
.gwc-head strong { font: 440 var(--t-md)/1.3 var(--font-display); text-wrap: balance; }
.gwc-head span { font-size: var(--t-xs); color: var(--foam); display: block; }
.gwc-form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.gwc-form input { flex: 1 1 10rem; min-width: 0; min-height: 2.9rem; padding: .6rem .8rem; border: 1px solid transparent; border-radius: var(--radius); background: var(--limewash); color: var(--ink); font-size: .95rem; }
.gwc-form input:focus { outline: 3px solid var(--laterite-glow); outline-offset: 1px; }
.gwc-form button { flex: 0 1 auto; min-height: 2.9rem; padding: .6rem 1.2rem; border: 0; border-radius: var(--radius); background: var(--laterite); color: #fff; font-weight: 600; cursor: pointer; }
.gwc-form button:hover { background: var(--laterite-deep); }
.pg-dossier-brand .gwc-form button { flex-basis: 100%; }
.gwc-form [role="status"] { width: 100%; margin: .3rem 0 0; font-weight: 600; color: var(--limewash); font-size: var(--t-sm); }
/* 13 Oct 2026: every date strip is two by two where it has the room, name | WhatsApp then
   month | button, as the homepage hero already was; a full-width button and stacked fields on a
   phone. The strip measures itself: in the venue brief's narrow column the WhatsApp field takes
   the wider share, and below 24rem name and WhatsApp get a line each, so no placeholder is cut. */
.gwc-datecheck { container: datecheck / inline-size; }
.gwc-datecheck .gwc-form button { width: 100%; }
@media (min-width: 560px) {
  .gwc-datecheck .gwc-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gwc-datecheck .gwc-form [role="status"] { grid-column: 1 / -1; }
}
@container datecheck (width < 30rem) { .gwc-datecheck .gwc-form { grid-template-columns: minmax(0, 2fr) minmax(14.25rem, 3fr); } }
@container datecheck (width < 24rem) { .gwc-datecheck .gwc-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gwc-datecheck .gwc-form > input:is([name="name"], [name="phone"]) { grid-column: 1 / -1; } }
/* Reserved space so the strip does not push the page down when it arrives. */
.js .gwc-slot { min-height: 22.3rem; }
@media (min-width: 700px) { .js .gwc-slot { min-height: 14.2rem; } }
.js .gwc-slot-dossier { min-height: 24.1rem; }
@media (min-width: 700px) { .js .gwc-slot-dossier { min-height: 24.4rem; } }
.gwc-slot > div { margin-block: 0; }
@media (max-width: 559px) { .gwc-form input[name="phone"] { flex-basis: 100%; } .gwc-form input[name="name"] { flex-basis: 100%; } }

/* Release 1 (2026-10-12): the enquiry card from js/slide-in.js. Bottom right on a laptop, a
   short sheet along the bottom edge on a phone; never an overlay, and hidden until opened. */
.gwc-slidein { position: fixed; z-index: 60; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom)); width: 22.5rem; max-width: calc(100vw - 2rem); padding: var(--s-5) var(--s-5) var(--s-4); background: var(--marine); color: var(--limewash); border-radius: 4px; box-shadow: 0 18px 48px -18px rgba(0, 44, 48, .65); opacity: 0; visibility: hidden; transform: translateY(1rem); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
.gwc-slidein.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }
.gwc-slidein.is-open.is-yielding { opacity: 0; visibility: hidden; transform: translateY(1rem); pointer-events: none; transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.gwc-slidein-close { position: absolute; top: .2rem; right: .2rem; min-width: 2.75rem; min-height: 2.75rem; border: 0; background: none; color: var(--foam); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.gwc-slidein-close:hover, .gwc-slidein-close:focus-visible { color: #fff; }
.gwc-slidein-title { font: 440 var(--t-md)/1.3 var(--font-display); padding-right: 2.25rem; text-wrap: balance; }
.gwc-slidein-sub { margin-top: .35rem; font-size: var(--t-xs); color: var(--foam); }
.gwc-slidein .gwc-form { margin-top: var(--s-3); }
.gwc-slidein .gwc-form input { min-height: 2.75rem; font-size: 1rem; }
/* 13 Oct 2026: 'WhatsApp number' needs about 133px at this size and had 124 on a laptop and 120 at
   360. The fields now share the row unevenly (7rem and 10.5rem before growing) and stack only where
   both cannot fit whole. */
.gwc-slidein .gwc-form input[name="name"] { flex: 1 1 7rem; }
.gwc-slidein .gwc-form input[name="phone"] { flex: 1 1 10.5rem; }
.gwc-slidein .gwc-form button { flex-basis: 100%; min-height: 2.75rem; }
html.gwc-slidein-open .callbar { display: none; }
@media (max-width: 559px) {
  .gwc-slidein { left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); width: auto; max-width: none; padding: var(--s-4); }
}
/* A 320px phone: a little less padding keeps both fields whole on one row, so the card stays a short sheet. */
@media (max-width: 340px) {
  .gwc-slidein { padding-inline: .75rem; }
  .gwc-slidein .gwc-form input { padding-inline: .6rem; }
  .gwc-slidein .gwc-form input[name="name"] { flex-basis: 6.25rem; }
  .gwc-slidein .gwc-form input[name="phone"] { flex-basis: 10rem; }
}
@media print { .gwc-slidein { display: none; } }

/* ---- goa/home.css ---- */
/* css/goa/home.css — the seven homepage sections. */

/* 1 · hero: the sea at golden hour, the coast drawn in, the stake in words. */
.home-hero { background: var(--marine); color: var(--limewash); position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 6.5rem); }
.home-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--limewash); -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat; }
.home-hero-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .home-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: var(--s-8); min-height: min(calc(100svh - 11rem), 44rem); } }
.hero-where { font-size: var(--t-sm); color: var(--foam); max-width: none; text-wrap: balance; }
.home-hero h1 { font-size: var(--t-hero); line-height: 1; letter-spacing: -.018em; font-weight: 400; margin-top: var(--s-5); max-width: 13ch; }
.hero-lede { margin-top: var(--s-5); font-size: var(--t-md); line-height: 1.6; color: var(--foam); max-width: 50ch; }
.hero-slot { margin-top: var(--s-6); max-width: 40rem; }
.js .hero-slot { min-height: 15.2rem; }
@media (min-width: 560px) { .js .hero-slot { min-height: 7.7rem; } } /* the two-by-two strip's own height (13 Oct 2026); 11.7rem left 64px of empty sea under it */
.hero-slot .gwc-datecheck { background: transparent; padding: 0; margin: 0; max-width: none; }
.hero-slot .gwc-form input { min-height: 3.2rem; font-size: 1rem; }
.hero-slot .gwc-form button { min-height: 3.2rem; padding-inline: 1.5rem; font-size: 1rem; }
.hero-link { color: var(--limewash); font-weight: 500; }
.home-hero-map { justify-self: center; width: min(100%, 25rem); position: relative; }
@media (max-width: 899px) { .home-hero-map { width: min(62%, 15rem); justify-self: end; margin-top: calc(var(--s-4) * -1); } }
.home-hero-map figcaption { color: var(--foam); text-align: right; margin-top: var(--s-2); }

/* the map itself, wherever it appears */
.goa-map { width: 100%; height: auto; overflow: visible; }
.map-land { fill: var(--sand); stroke: var(--marine); stroke-width: 1.2; stroke-linejoin: round; }
.map-tide { fill: none; stroke: var(--foam); stroke-width: 2; stroke-linecap: round; opacity: .32; }
.map-pin circle { fill: var(--azulejo); stroke: var(--sand); transition: transform .3s var(--ease); transform-box: fill-box; transform-origin: center; }
.map-pin.is-on circle { fill: var(--laterite); }
.map-pin.is-big circle { fill: var(--marine); stroke: var(--laterite); }
.map-pin text { font-family: var(--font-body); font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--sand); stroke-linejoin: round; text-decoration: none; }
a.map-pin:hover circle, a.map-pin:focus-visible circle { transform: scale(1.5); }
a.map-pin:focus-visible { outline: none; }
.page-mast .map-land, .home-hero .map-land { stroke: var(--sand); }
.goa-map.is-crop { background: var(--marine-lift); border-radius: 4px; overflow: hidden; }
a.map-pin { text-decoration: none; }

/* 2 · the short season */
.home-split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .home-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); } }
.home-relief { margin-top: var(--s-5); font-weight: 560; max-width: 48ch; }
.home-relief a { display: inline-block; margin-left: .3rem; font-weight: 500; }
.gauge-months { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(3px, .8vw, 10px); height: clamp(12rem, 26vw, 17rem); align-items: end; border-bottom: 2px solid var(--ink); }
.gauge-month, .gauge-month button { height: 100%; }
.gauge-month button { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 0; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); position: relative; }
.gauge-bar { display: block; height: var(--h); border-radius: 3px 3px 0 0; background: var(--tone); transition: clip-path var(--slow) var(--ease), filter .2s; transition-delay: calc(var(--i) * 55ms); }
.gauge-month[data-state="premium"], .gauge-key [data-state="premium"] { --tone: var(--laterite-deep); }
.gauge-month[data-state="peak"], .gauge-key [data-state="peak"] { --tone: var(--laterite); }
.gauge-month[data-state="shoulder"], .gauge-key [data-state="shoulder"] { --tone: var(--sand-deep); }
.gauge-month[data-state="monsoon"], .gauge-key [data-state="monsoon"] { --tone: #5F8F92; }
.gauge-month abbr { position: absolute; left: 0; right: 0; bottom: -1.9rem; text-align: center; font: 500 .8rem/1 var(--font-figure); }
.gauge-month button:hover .gauge-bar { filter: brightness(1.08); }
.gauge-month button[aria-pressed="true"] abbr { color: var(--laterite-text); font-weight: 700; }
.gauge-month button[aria-pressed="true"] .gauge-bar { box-shadow: inset 0 0 0 2px var(--ink); }
.gauge-note { margin-top: 3rem; min-height: 3.4em; font-size: var(--t-md); line-height: 1.5; }
.gauge-note b { font: 440 1.35rem/1 var(--font-display); margin-right: .35rem; }
.gauge-state { font-size: var(--t-xs); font-weight: 600; color: var(--laterite-text); margin-right: .35rem; }
.gauge-key { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-soft); }
.gauge-key li { display: inline-flex; align-items: center; gap: .4rem; }
.gauge-key li::before { content: ""; width: .8rem; height: .8rem; border-radius: 2px; background: var(--tone); }
.rv .gauge:not(.is-in) .gauge-bar { clip-path: inset(100% 0 0 0); }
.gauge .gauge-bar { clip-path: inset(0); }

/* 3 · the coast, north to south: a laterite wall with the shoreline running across it */
.home-coast { background: var(--laterite-grain), var(--sand); position: relative; }
.home-coast-head { max-width: 50rem; }
.coast-rail { --rail-pad: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); scroll-padding-inline: var(--rail-pad); margin-top: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--laterite) transparent; padding-bottom: var(--s-4); }
.coast-stops { list-style: none; margin: 0; display: flex; width: max-content; padding-inline: var(--rail-pad); position: relative; }
.coast-stops::before { content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: 14px; background: var(--marine); opacity: .85; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7q15-7 30 0t30 0 30 0 30 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 120px 14px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7q15-7 30 0t30 0 30 0 30 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 120px 14px repeat-x; }
.coast-stop { width: clamp(13rem, 60vw, 15.5rem); flex: none; scroll-snap-align: start; padding-right: var(--s-5); }
.coast-stop a { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding-top: 2.4rem; text-decoration: none; color: var(--ink); position: relative; }
.coast-stop a::before { content: ""; position: absolute; top: .3rem; left: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--sand); border: 3px solid var(--marine); transition: background-color .3s, transform .3s var(--ease); }
.coast-stop a:hover::before, .coast-stop a:focus-visible::before { background: var(--laterite); transform: scale(1.2); }
.coast-region { font-size: var(--t-xs); color: var(--laterite-text); font-weight: 600; }
.coast-stop b { font: 420 1.75rem/1.05 var(--font-display); letter-spacing: -.015em; }
.coast-stop a:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--laterite); text-underline-offset: .15em; }
.coast-note { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.coast-count { margin-top: auto; padding-top: .5rem; font: 600 .85rem/1.3 var(--font-body); color: var(--ink); }
.coast-hint { margin-top: var(--s-6); font-size: var(--t-xs); color: var(--ink-soft); display: flex; justify-content: space-between; gap: var(--s-4); }
.coast-hint span:last-child::after { content: ""; display: inline-block; width: 2.2rem; height: .55rem; margin-left: .5rem; background: currentColor; -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat; }
.home-families { position: relative; }
.home-families::before { content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 24px; background: var(--marine); -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat; }
.rv .coast-rail:not(.is-in) .coast-stop { opacity: 0; transform: translateX(1.5rem); }
.coast-stop { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(min(var(--i), 8) * 70ms); }
.home-coast-foot { margin-top: var(--s-6); gap: var(--s-3) var(--s-5); }

/* 4 · drawn, then built */
.home-split-flip { align-items: start; }
.drawing { background: var(--limewash); border: var(--hairline); border-radius: 4px; padding: clamp(1rem, 3vw, 2rem); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 26px 26px; background-position: -1px -1px; }
.drawing svg { width: 100%; }
.drawing path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease); }
.dr-ground path { stroke: var(--ink-soft); stroke-width: 1.2; }
.dr-frame path { stroke: var(--ink); stroke-width: 2; }
.dr-drape path { stroke: var(--laterite); stroke-width: 1.8; transition-delay: .6s; }
.dr-dims path { stroke: var(--ink-soft); stroke-width: 1; transition-delay: 1.1s; }
.dr-dims text { font: 500 13px/1 var(--font-figure); fill: var(--ink-soft); text-anchor: middle; transition: opacity .6s 1.8s; }
.rv .drawing:not(.is-in) path { stroke-dashoffset: 1; }
.rv .drawing:not(.is-in) text { opacity: 0; }
.drawing figcaption { margin-top: var(--s-3); }
.build-steps { list-style: none; padding: 0; margin-top: var(--s-6); counter-reset: step; border-top: var(--hairline); }
.build-steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; gap: .15rem 0; padding: var(--s-4) 0; border-bottom: var(--hairline); }
.build-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font: 500 .9rem/1.9 var(--font-figure); color: var(--laterite-text); }
.build-steps b { font: 440 var(--t-md)/1.35 var(--font-display); }
.build-steps span { color: var(--ink-soft); font-size: var(--t-sm); }
.home-drawn-foot { margin-top: var(--s-5); gap: var(--s-3) var(--s-6); }

/* 5 · who this is for */
.home-families { background: var(--marine); color: var(--limewash); }
.home-families .plaque { color: var(--laterite-glow); }
.families { display: grid; gap: 0; margin-top: var(--s-7); }
@media (min-width: 900px) { .families { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.family { padding: var(--s-5) 0; border-top: var(--hairline-light); display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 900px) { .family { padding: var(--s-2) var(--s-6) var(--s-2); border-top: 0; border-left: var(--hairline-light); } .family:first-child { padding-left: 0; border-left: 0; } }
.family h3 { font-size: var(--t-xl); line-height: 1.1; max-width: 14ch; }
.family p { color: var(--foam); }
.family a { margin-top: auto; padding-top: var(--s-3); color: var(--limewash); font-weight: 500; text-decoration-color: rgba(217,142,99,.7); }

/* 6 · the numbers, late */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0; margin-top: var(--s-7); border-top: 2px solid var(--ink); }
.ledger div { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: var(--hairline); }
.ledger dt { font: 400 clamp(2.2rem, 2.8vw + 1.1rem, 3.4rem)/1 var(--font-display); letter-spacing: -.02em; color: var(--marine); font-variant-numeric: lining-nums; }
.ledger dd { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--ink-soft); max-width: 28ch; }
.home-numbers-foot { margin-top: var(--s-6); gap: var(--s-3) var(--s-5); }
.home-faq { display: grid; gap: var(--s-5) var(--s-9); margin-top: var(--s-9); padding-top: var(--s-7); border-top: var(--hairline); }
@media (min-width: 960px) { .home-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); } .home-faq .faq { margin-top: 0; } }
.home-faq h2 { max-width: 12ch; }
.hero-alt { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--foam); }
/* Release 1: the reply promise sits right under the hero date check, the venue-book line under it. */
.hero-promise { margin-top: var(--s-3); }
.hero-promise + .hero-alt { margin-top: var(--s-2); }
/* The hero date check is two by two on wider screens: css/goa/forms.css now draws every strip that way (13 Oct 2026). */

/* ---- goa/venues.css ---- */
/* css/goa/venues.css — the venue book, hubs, village pages and a single venue. */

/* ---- the book: filter bar, then a ledger of entries ---- */
.venue-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: var(--s-7); padding: var(--s-4) 0; border-top: 2px solid var(--ink); position: sticky; top: 4.25rem; z-index: 5; background: var(--limewash); }
@media (max-width: 959px) { .venue-toolbar { position: static; } }
.venue-search { flex: 1 1 100%; min-height: 3rem; padding: .6rem .9rem; border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: var(--radius); background: #fff; }
@media (min-width: 760px) { .venue-search { flex: 0 1 20rem; margin-right: .5rem; } }
.venue-search:focus { outline: none; border-color: var(--laterite); box-shadow: 0 0 0 3px color-mix(in srgb, var(--laterite) 22%, transparent); }
.venue-count { margin-left: auto; font: 500 .85rem/1 var(--font-figure); color: var(--ink-soft); }
#venue-grid { display: block; margin-top: 0; }
#venue-grid .venue-card { display: grid; grid-template-columns: 1fr; gap: .15rem; border-top: 0; border-bottom: var(--hairline); padding: var(--s-4) 0; }
@media (min-width: 760px) {
  #venue-grid .venue-card { grid-template-columns: 10rem minmax(0, 1.5fr) minmax(0, 1.2fr); align-items: baseline; gap: var(--s-5); padding: var(--s-4) var(--s-3); margin-inline: calc(var(--s-3) * -1); border-radius: 3px; transition: background-color .25s; }
  #venue-grid .venue-card:hover { background: var(--sand); }
}
#venue-grid .venue-card-body { display: contents; }
#venue-grid .venue-card-where { margin: 0; }
#venue-grid .venue-card h3 { font-size: var(--t-md); line-height: 1.3; }
#venue-grid .venue-card-facts { margin: 0; }
#venue-grid .venue-card-media { display: none; }
.js #venue-grid[data-collapsed="true"] > :nth-child(n+13) { display: none; }
@media (min-width: 641px) { .js #venue-grid[data-collapsed="true"] > :nth-child(n+13) { display: grid; } }
.grid-more { display: none; margin: var(--s-5) 0 0; }
@media (max-width: 640px) { .js #venue-grid[data-collapsed="true"] + .grid-more { display: block; } }
.grid-more .btn { width: 100%; }
.venue-empty { padding: var(--s-8) 0; color: var(--ink-soft); font: 400 var(--t-lg)/1.4 var(--font-display); }
.book-villages { margin-top: var(--s-9); padding-top: var(--s-7); border-top: var(--hairline); }

/* ---- a single venue: the brief under the masthead ---- */
.venue-brief { display: grid; gap: var(--s-6) var(--s-8); align-items: start; }
@media (min-width: 900px) { .venue-brief { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 1fr); } }
.venue-brief-main > * + * { margin-top: var(--s-5); }
/* 13 Oct 2026: the date strip at the head of this column is taller than the 14.2rem other pages
   reserve (its heading wraps in the narrower column, and below 27rem name and WhatsApp take a line
   each, css/goa/forms.css), so the column reserves what it will get and nothing below it moves. */
@media (min-width: 900px) {
  .venue-brief-main { container: brief / inline-size; }
  .js .venue-brief-main .gwc-slot { min-height: 15.5rem; }
  @container brief (width < 27rem) { .js .venue-brief-main .gwc-slot { min-height: 19rem; } }
}
.venue-facts { background: var(--sand); padding: var(--s-5); border-radius: 4px; position: relative; }
.venue-facts .fact-table { margin-top: 0; border-top: 0; }
.venue-facts .fact-table th { width: 42%; font-weight: 500; color: var(--ink-soft); font-size: var(--t-xs); }
.venue-facts .fact-table td { font-size: .92rem; }
/* 16 Oct 2026: an official-site domain is one long word (caravelabeachresortgoa.com). In this box
   it set the column's minimum width, and 8 venue pages scrolled sideways on a 390px phone. */
.venue-facts .fact-table td { overflow-wrap: anywhere; }
.venue-facts .fact-table tr:last-child th, .venue-facts .fact-table tr:last-child td { border-bottom: 0; }
.venue-facts-title { font: 440 var(--t-md)/1.3 var(--font-display); margin-bottom: var(--s-2); }
.venue-more { font-size: var(--t-sm); padding-bottom: var(--s-6); }

/* ---- the locator map in a masthead ---- */
.mast-aside .goa-map { filter: drop-shadow(0 18px 30px rgba(0, 20, 22, .35)); }
.mast-aside figcaption { color: var(--foam); font-size: var(--t-xs); margin-top: var(--s-2); }
@media (max-width: 899px) { .mast-aside { width: 100%; } .mast-aside figure { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s-4); align-items: center; } .mast-aside .map-pin text { display: none; } .mast-aside .goa-map.is-crop { max-height: 8rem; } }

/* ---- hub and village pages ---- */
.hub-map-note { font-size: var(--t-xs); color: var(--foam); margin-top: var(--s-2); }
.h1-colon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.venue-facts .gwc-slot { margin-top: var(--s-5); }
.venue-facts .pg-dossier-brand { margin: 0; padding: var(--s-4); }
.venue-facts .pg-dossier-brand .gwc-form input { flex-basis: 100%; }

.locator:not(.is-crop) .map-pin.is-on circle { transform: scale(2); }
@media (max-width: 899px) { .locator:not(.is-crop) .map-pin.is-on circle { transform: scale(4.5); } .locator.is-crop .map-pin.is-on circle { transform: scale(1.6); } }
@media (max-width: 700px) {
  /* A table's own scroll wrapper bleeds to the screen edge. Not the reading column itself
     (12 Oct 2026): the legal guide's table sits straight in it, so the whole column, date
     check included, lost its 16px gutter on phones. */
  div:has(> .fact-table):not(.wrap, .wrap-narrow) { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  div:has(> .fact-table):not(.wrap, .wrap-narrow) > .fact-table:not(.venue-facts .fact-table) { min-width: 36rem; }
  .fact-table tbody th { min-width: 9.5rem; }
  .venue-facts .fact-table tbody th { min-width: 0; }
  /* 16 Oct 2026: the sourced tables run to five, six and seven columns. Held to 36rem, their
     source column wrapped into a sliver and a row stood up to 370px tall, mostly blank on screen.
     Wider tables give each column room; the first column stays put while the row scrolls under
     it (::before covers the gutter it scrolls through, ::after is the rule beside it). */
  div:has(> .fact-table):not(.wrap, .wrap-narrow) > .fact-table:not(.venue-facts .fact-table):has(tr > :nth-child(5)) { min-width: 46rem; }
  div:has(> .fact-table):not(.wrap, .wrap-narrow) > .fact-table:not(.venue-facts .fact-table):has(tr > :nth-child(6)) { min-width: 54rem; }
  div:has(> .fact-table):not(.wrap, .wrap-narrow) > .fact-table:not(.venue-facts .fact-table):has(tr > :nth-child(7)) { min-width: 62rem; }
  div:has(> .fact-table):not(.wrap, .wrap-narrow) > .fact-table:not(.venue-facts .fact-table):has(tr > :nth-child(5)) tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--limewash); }
  div:has(> .fact-table):not(.wrap, .wrap-narrow) > .fact-table:not(.venue-facts .fact-table):has(tr > :nth-child(5)) tr > :first-child::before { content: ""; position: absolute; inset: 0 auto 0 calc(var(--gutter) * -1); width: var(--gutter); background: var(--limewash); }
  div:has(> .fact-table):not(.wrap, .wrap-narrow) > .fact-table:not(.venue-facts .fact-table):has(tr > :nth-child(5)) tr > :first-child::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 1px; background: var(--line); }
  /* A two- or three-column table fits the screen instead: the venue-versus-venue tables hid the
     second resort off the right edge. */
  div:has(> .fact-table):not(.wrap, .wrap-narrow) > .fact-table:not(.venue-facts .fact-table):not(:has(tr > :nth-child(4))) { min-width: 0; }
  div:has(> .fact-table):not(.wrap, .wrap-narrow) > .fact-table:not(.venue-facts .fact-table):not(:has(tr > :nth-child(4))) tbody th { min-width: 6.5rem; }
}

/* ---- goa/motion.css ---- */
/* css/goa/motion.css — "the tide, not the app".
   One easing curve. Only transform, opacity, clip-path and stroke offsets move.
   Nothing is hidden unless js/motion.js has run (html.rv); nothing scroll-jacks;
   no will-change anywhere. Under prefers-reduced-motion everything is shown at
   its end state. */

/* The coast draws in, north to south, once, when the homepage opens. The H1
   (the LCP element) never animates. */
@keyframes coast-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pins-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tide-drift { from { transform: translateX(0); } to { transform: translateX(14px); } }
.hero-map .map-land { animation: coast-in 1.6s var(--ease) .15s both; }
.hero-map .map-pin { animation: pins-in .8s var(--ease) 1.2s both; }
.hero-map .map-tide, .mast-aside .map-tide { animation: tide-drift 9s ease-in-out infinite alternate; }

/* Section edges: the high-water line settles once when a band comes into view. */
@keyframes line-settle { from { transform: translateX(-60px); } to { transform: translateX(0); } }
.rv .section-dark.is-in::before { animation: line-settle 1.4s var(--ease) both; }

/* Cross-page fade where the browser supports it. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv .gauge .gauge-bar { clip-path: none !important; }
  .rv .coast-stop { opacity: 1 !important; transform: none !important; }
  .rv .drawing path { stroke-dashoffset: 0 !important; }
  .rv .drawing text { opacity: 1 !important; }
  @view-transition { navigation: none; }
}