/* Shared components: layout wrapper, nav, buttons, links, media, titles, footer, form, map. */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

/* ---------- Titles ---------- */
.section-title {
  font-size: var(--step-4);
  max-width: 17ch;
}
.statement {
  font-size: var(--step-5);
  max-width: 19ch;
  line-height: var(--lh-hero);
}
.display { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: var(--lh-display); }
.lead {
  font-size: var(--step-1);
  font-weight: var(--w-lead);
  line-height: 1.5;
  color: var(--fg);
  max-width: 44ch;
}
.section-title + .lead, .section-title + p { margin-top: var(--s-5); }

/* ---------- Icons (authored SVG, one stroke) ---------- */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Buttons ----------
   Granite is reserved for the page's one action. Everything else is a quiet text link. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 24px 14px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.btn--granite { background: var(--granite-fill); color: var(--sand); }
.btn--granite:active { transform: scale(0.97); background: var(--granite-press); }
@media (hover: hover) and (pointer: fine) {
  .btn--granite:hover { background: var(--granite-press); }
}
.btn--sm { min-height: 40px; padding: 9px 18px 10px; font-size: 0.9375rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline-offset: 4px; }

/* Arrow text links */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 520;
}
.arrow-link .icon { transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .arrow-link:hover .icon { transform: translateX(3px); }
}
button.text-link {
  font-weight: 520;
  min-height: 44px;
  text-decoration-line: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  padding-top: env(safe-area-inset-top);
  color: var(--sand);         /* every hero is dark at the top now: the root film opens at dusk */
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
html.js .site-nav { position: fixed; }
.site-nav__inner {
  height: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.brand__mark { width: 30px; height: 30px; --shell: transparent; --scute: currentColor; }
.brand__word {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1;
  padding-top: 2px;
}
.site-nav__links ul { display: flex; gap: var(--s-6); }
.site-nav__links a, .nav-menu__panel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 520;
  text-decoration: none;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}
.site-nav__links a[aria-current="page"] { text-decoration-line: underline; }
@media (hover: hover) and (pointer: fine) {
  .site-nav__links a:hover { text-decoration-line: underline; }
}
.site-nav__tools { display: flex; align-items: center; gap: var(--s-3); }
.lang-toggle {
  min-width: 44px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--track-label);
  border-radius: var(--r-pill);
}
@media (hover: hover) and (pointer: fine) {
  .lang-toggle:hover { text-decoration: underline; text-underline-offset: 0.3em; }
}
.sound-toggle { min-width: 44px; min-height: 44px; }

/* The nav action stays quiet over the hero (the hero carries the granite action) and
   takes the granite fill once the hero has scrolled away. Without JS it stays quiet. */
.nav-action { background: transparent; color: inherit; border-color: currentColor; }
html.past-hero .nav-action { background: var(--granite-fill); color: var(--sand); border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .nav-action:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
  html.past-hero .nav-action:hover { background: var(--granite-press); }
}

/* Mobile menu: a native disclosure, works without JS */
.nav-menu { position: relative; }
.nav-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 16px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 520;
  cursor: pointer;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.nav-menu__panel {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  padding: var(--s-5) var(--gutter) var(--s-7);
  background: var(--ink);
  color: var(--sand);
  border-bottom: 1px solid var(--ink-3);
}
.nav-menu__panel ul { display: grid; gap: var(--s-1); }
.nav-menu__panel a { font-family: var(--font-display); font-size: 2rem; font-weight: var(--w-title); letter-spacing: -0.01em; }
.nav-menu__panel a[aria-current="page"] { text-decoration-line: underline; }

@media (min-width: 900px) {
  .nav-menu { display: none; }
}
@media (max-width: 899.98px) {
  .site-nav__links { display: none; }
  .site-nav__inner { gap: var(--s-3); }
}
@media (max-width: 559.98px) {
  .nav-action { display: none; }
  .brand__word { font-size: 1.3125rem; }
}

/* ---------- Media ---------- */
/* placeholder: the manifest gives two tones per image (upper and lower half) */
.media { display: block; background: linear-gradient(to bottom, var(--ph, var(--reef)), var(--ph2, var(--ph, var(--reef)))); overflow: hidden; border-radius: var(--r-media); }
.media img { width: 100%; height: 100%; object-fit: cover; }
figure { margin: 0; }

/* ---------- Status note (honest "under establishment") ---------- */
.status-note {
  padding-top: var(--s-5);
  border-top: 1px solid currentColor;
  color: var(--fg);
}
.status-note p { color: var(--fg-2); }
.status-note strong { color: var(--fg); font-weight: 600; display: block; margin-bottom: var(--s-2); }

/* ---------- Coastline chart ---------- */
.coastmap { position: relative; }
.coastmap__frame {
  position: relative;
  height: min(92svh, 1040px);
  aspect-ratio: 400 / 1029.7;
  margin-inline: auto;
}
.coastmap__svg { width: 100%; height: 100%; overflow: visible; }
.coastmap__coast {
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.coastmap__far {
  fill: none;
  stroke: var(--sand-3);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}
.coastmap__island { fill: none; stroke: var(--sand-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.coastmap__town { fill: var(--ink); stroke: var(--sand); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.coastmap__town--centre { fill: var(--sand); }
.coastmap__towns { position: absolute; inset: 0; pointer-events: none; }
.town {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  gap: 2px;
  /* the offset uses the translate property, so a tween of transform (x) composes with it */
  translate: calc(-100% - 16px) -50%;
  text-align: right;
  white-space: nowrap;
}
.town[data-town="sharm"] { translate: 12px 18%; text-align: left; }
.town__name { font-size: 1rem; line-height: 1.15; }
.town.is-centre .town__name { font-size: 1.375rem; }
.town__coord { font-size: 0.75rem; color: var(--fg-2); letter-spacing: 0.02em; }
.town__plan { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--fg); }
/* chart lettering on the coast chart: soundings, regions, islands (all aria-hidden texture) */
.coastmap__letters, .coastmap__glabels { position: absolute; inset: 0; pointer-events: none; }
.coastmap__letters > * { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; white-space: nowrap; }
.coastmap__sounding { font-family: var(--font-mono); font-size: 0.625rem; font-variant-numeric: tabular-nums; color: var(--fg-2); opacity: 0.8; }
.coastmap__region { font-family: var(--font-body); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-2); }
.coastmap__region--v { rotate: -90deg; }
.coastmap__isle { font-family: var(--font-chart); font-style: italic; font-size: 0.8125rem; color: var(--fg-2); }
.coastmap__isle--start { translate: 0 -50%; }
.coastmap__grat { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.12; }
.coastmap__glabel { position: absolute; left: calc(100% + 14px); top: var(--y); translate: 0 -50%; font-family: var(--font-mono); font-size: 0.625rem; color: var(--fg-2); white-space: nowrap; }
.coastmap__cap { margin-top: var(--s-5); color: var(--fg-2); max-width: 44ch; text-transform: none; letter-spacing: 0.01em; line-height: 1.5; }
.media-cap { margin-top: var(--s-3); font-size: var(--step--1); color: var(--fg-2); max-width: 52ch; }
@media (max-width: 767.98px) {
  .coastmap__frame { height: min(78svh, 620px); }
  .town__coord { display: none; }
  .coastmap__sounding:nth-child(even), .coastmap__isle--start { display: none; }
}

/* ---------- The nine letters (shared by root and partner) ---------- */
.letter-list { display: grid; gap: clamp(var(--s-5), 2.4vw, var(--s-7)); }
.letter {
  display: grid;
  grid-template-columns: 0.8em minmax(0, 1fr);
  column-gap: clamp(var(--s-4), 2vw, var(--s-6));
  align-items: start;
  font-size: clamp(3.25rem, 1.8rem + 4.8vw, 6.5rem);
}
/* the accent face, in capitals, for all nine (the brand's lowercase s is a full-size capital here) */
.letter__glyph {
  font-family: var(--font-accent);
  font-style: var(--accent-style);
  font-weight: var(--accent-weight);
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 1em;
  line-height: 0.8;
  text-align: center;
  color: var(--fg);
}
.letter__text { font-size: var(--step-0); padding-top: 0.15rem; }
.letter__name { font-size: var(--step-2); display: flex; flex-wrap: wrap; gap: 0 0.5em; align-items: baseline; }
.letter__gloss { font-weight: 400; color: var(--fg-2); font-size: var(--step-0); }
.letter__gloss:empty { display: none; }
.letter__text p { color: var(--fg-2); margin-top: var(--s-2); max-width: 52ch; }

/* ---------- Night close (shared) ---------- */
.night {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-block: var(--section-pivotal) var(--section-standard);
  overflow: hidden;
  isolation: isolate;
}
.night--short { min-height: 78svh; }
.night__sky { position: absolute; inset: 0; z-index: -1; }
.night__sky .media { width: 100%; height: 100%; border-radius: 0; }
.night__sky .media img { object-position: 50% 30%; }
.night__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--night) 10%, transparent) 0%, color-mix(in srgb, var(--night) 35%, transparent) 45%, var(--night) 96%);
}
.night__content { position: relative; }
.night__content .lead { margin-top: var(--s-5); color: var(--sand); }
.night__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }

/* ---------- Footer ---------- */
.site-footer { padding-top: var(--section-standard); overflow: hidden; }
.site-footer__grid {
  display: grid;
  gap: var(--s-8) var(--gap);
}
.site-footer__title { font-size: var(--step-3); }
.contact-list { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.contact-list > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
.contact-list dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); }
.contact-list dd { overflow-wrap: anywhere; }
@media (max-width: 559.98px) {
  .contact-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.contact-list a { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.site-footer__nav ul { display: grid; gap: var(--s-1); }
.site-footer__nav a { display: inline-flex; min-height: 40px; align-items: center; text-decoration: none; font-weight: 520; }
@media (hover: hover) and (pointer: fine) {
  .site-footer__nav a:hover, .contact-list a:hover { text-decoration-line: underline; text-decoration-color: currentColor; }
}
.site-footer__motto { font-family: var(--font-display); font-weight: var(--w-body); font-size: var(--step-2); color: var(--fg-2); max-width: 28ch; }
.site-footer__mark {
  margin-top: var(--s-9);
  line-height: 0.78;
  text-align: center;
  user-select: none;
}
.wordmark {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(4.5rem, 23.5vw, 24rem);
  letter-spacing: -0.05em;
  color: var(--reef-2);
  white-space: nowrap;
  transform: translateY(0.12em);
}
.site-footer__legal { padding-block: var(--s-5) max(var(--s-5), env(safe-area-inset-bottom)); border-top: 1px solid var(--ink-3); position: relative; background: var(--night); }
.site-footer__legal p { font-size: var(--step--1); color: var(--fg-2); max-width: none; }
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .site-footer__contact { grid-column: 1 / 7; }
  .site-footer__nav { grid-column: 8 / 11; }
  .site-footer__motto { grid-column: 1 / 8; }
}

/* ---------- Form ---------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-5); }
.form > .field, .form > .check, .form > .form__actions, .form > .form__summary, .form > fieldset { grid-column: 1 / -1; }
.form > .field--half { grid-column: auto; }
.field { display: grid; gap: var(--s-2); align-content: start; min-width: 0; border: 0; padding: 0; }
.field--dates { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
.field--dates legend { font-weight: 560; margin-bottom: var(--s-3); grid-column: 1 / -1; float: left; width: 100%; }
.field label { font-weight: 560; font-size: 0.9375rem; }
.field__optional { font-weight: 400; color: var(--fg-2); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font-size: 1rem;            /* 16px: no zoom on iOS */
  line-height: 1.4;
  color: var(--ink);
  background: #f8f3ea;
  border: 1px solid #857f73;  /* 3.6:1 on the field fill */
  border-radius: var(--r-field);
  transition: border-color var(--dur-hover) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1a1c' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}
.field [aria-invalid="true"] { border-color: #9a3a1f; box-shadow: inset 0 0 0 1px #9a3a1f; }
.field__error { font-size: var(--step--1); color: #8a3218; font-weight: 520; min-height: 0; }
.field__error:empty { display: none; }
.field__hint { font-size: var(--step--1); color: var(--fg-2); }
.check { display: flex; gap: var(--s-3); align-items: flex-start; min-height: 44px; cursor: pointer; padding-top: var(--s-2); }
.check input { width: 22px; height: 22px; margin-top: 1px; flex: none; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-3); }
.form__summary { padding: var(--s-4) var(--s-5); background: #f6e3d9; color: #6e2914; border-radius: var(--r-field); font-weight: 520; max-width: none; }
.form-done { display: grid; gap: var(--s-4); align-content: start; }
.form-done__title { font-size: var(--step-4); }
@media (max-width: 559.98px) {
  .form { grid-template-columns: minmax(0, 1fr); }
  .form > .field--half { grid-column: 1 / -1; }
  .field--dates { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
}

/* ---------- Hydrographic lettering (shared by the three charts) ----------
   As on an Admiralty chart: place names in italic serif (a cartographic convention, used for
   chart labels only, never for heading emphasis), regions in spaced capitals, soundings in
   small mono figures scattered in the water. Soundings are texture, not data: every chart
   that carries them says "Illustrative chart" in its caption. */
.chart-place { font-family: var(--font-chart); font-style: italic; font-weight: 400; letter-spacing: 0.01em; line-height: 1.1; }
.chart-region { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; line-height: 1; }
.chart-sounding { font-family: var(--font-mono); font-size: 0.625rem; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; }

/* ---------- Tarabin chart (Stay): a paper chart, ink on sand ---------- */
.chart { position: relative; color: var(--ink); }
.chart__frame { position: relative; width: 100%; aspect-ratio: var(--ar, 560 / 786); margin-inline: auto; }
.chart__labels { position: absolute; inset: 0; pointer-events: none; }
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__coast { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__water { fill: none; stroke: currentColor; stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.chart__water--0 { opacity: 0.85; } .chart__water--1 { opacity: 0.7; } .chart__water--2 { opacity: 0.58; }
.chart__water--3 { opacity: 0.46; } .chart__water--4 { opacity: 0.36; } .chart__water--5 { opacity: 0.28; } .chart__water--6 { opacity: 0.2; }
.chart__ticks, .chart__scale { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__neat { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__labels > * { position: absolute; left: var(--x); top: var(--y); }
.chart__sounding { font-family: var(--font-mono); font-size: 0.625rem; font-variant-numeric: tabular-nums; translate: -50% -50%; color: var(--ink-soft); }
.chart__grat { font-family: var(--font-mono); font-size: 0.625rem; color: var(--ink-soft); letter-spacing: 0.02em; }
.chart__grat--lat { left: 10px; top: var(--p); translate: 0 -50%; }
.chart__grat--lon { left: var(--p); top: auto; bottom: 10px; translate: -50% 0; }
.chart__region { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; translate: -50% -50%; white-space: nowrap; }
.chart__region--sea { rotate: -90deg; }
.chart__place { font-family: var(--font-chart); font-style: italic; font-size: clamp(0.9375rem, 0.8rem + 0.4vw, 1.125rem); white-space: nowrap; }
.chart__place--left { translate: -100% -50%; }
.chart__pin { width: 13px; height: 13px; translate: -50% -50%; border-radius: 50%; border: 1.5px solid currentColor; background: var(--sand); }
.chart__pin::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
/* the camp's label sits out in the water on a knocked-out ground, as chart lettering does */
.chart__pin-label { display: grid; gap: 3px; translate: 22px -50%; padding: 4px 6px; background: var(--sand); white-space: nowrap; }
.chart__pin-label::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 1px; background: currentColor; }
.chart__pin-name { font-family: var(--font-chart); font-style: italic; font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem); line-height: 1.1; }
.chart__pin-coord { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--ink-soft); }
.chart__scale-label { font-family: var(--font-mono); font-size: 0.625rem; translate: -50% -100%; }
.chart__cap { margin-top: var(--s-4); font-size: var(--step--1); color: var(--fg-2); max-width: 60ch; }
@media (max-width: 559.98px) {
  .chart__sounding:nth-child(3n) { display: none; }
  .chart__grat--lon:nth-of-type(odd) { display: none; }
}

/* Reduced motion: colour changes stay, anything that moves does not. */
@media (prefers-reduced-motion: reduce) {
  .arrow-link .icon { transition: none; }
  .btn { transition-property: background-color, color, border-color; }
}