/* =====================================================================
   SAS Assegaai Submarine Museum
   Visual system: "Hull & Archive"
   - Hull: dark sections for being inside the boat and its story
   - Archive: chart-paper sections for practical and historical content
   One container, one left edge. Gold is reserved for actions.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Hull register */
  --hull: #0D141B;
  --steel: #17222D;
  --steel-line: #2C3A47;
  --on-hull: #ECE6D6;
  --on-hull-muted: #A3AEB8;
  --sea-light: #7FA8E0;
  /* Archive register */
  --paper: #F2EEE4;
  --paper-2: #E7E1D2;
  --paper-3: #FBF9F4;
  --ink: #141C24;
  --ink-muted: #4F5A64;
  --rule: #CBC3B0;
  --field-border: #7D7A72;
  --crest-blue: #1D4E9E;
  /* Accents */
  --gold: #D4A63A;
  --gold-hover: #E3B851;
  --signal: #B3261E;

  /* Contextual colours (switched by .hull) */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --line: var(--rule);
  --link: var(--crest-blue);

  /* Type */
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  --t-h2: clamp(1.8rem, 1.35rem + 1.6vw, 2.6rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
  --t-lede: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;

  /* Space */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(64px, 8vw, 112px);
  --header-h: 72px;
  --radius: 2px;
  --ease: cubic-bezier(.2, .6, .2, 1);
}
@media (min-width: 760px) { :root { --t-body: 1.125rem; } }

.hull {
  --bg: var(--hull);
  --fg: var(--on-hull);
  --fg-muted: var(--on-hull-muted);
  --line: var(--steel-line);
  --link: var(--sea-light);
  background: var(--bg);
  color: var(--fg);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
figure { margin: 0; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button { font: inherit; color: inherit; }
cite { font-style: italic; }
address { font-style: normal; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

h1, h2, h3, h4, .h2-like {
  font-family: var(--f-display);
  font-stretch: 82%;
  font-weight: 680;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.05; }
h2, .h2-like { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 650; }
h4 { font-size: 1.125rem; font-weight: 650; }
p { margin: 0; }
.lede { font-size: var(--t-lede); line-height: 1.5; max-width: 60ch; }
.muted { color: var(--fg-muted); }
.small { font-size: var(--t-small); line-height: 1.5; }
.label, .marker, dt.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.marker { display: flex; align-items: center; gap: 12px; color: var(--fg-muted); margin: 0; }
.marker::after { content: ""; height: 1px; width: 48px; background: currentColor; opacity: .6; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 48px); max-width: 760px; }
.stack-sm { display: grid; gap: 12px; align-content: start; }

.skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--gold); color: var(--hull); padding: 12px 16px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Placeholder markers: deliberately obvious */
.ph-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg); background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--gold) 35%, transparent) 6px 12px);
  border: 1px dashed var(--gold); padding: 2px 8px; border-radius: var(--radius); white-space: nowrap; vertical-align: middle;
}
.ph-banner { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; border: 1px dashed var(--gold); padding: 12px 16px; font-size: var(--t-small); color: var(--fg-muted); margin-bottom: 24px; }

/* ---------- 3. Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 2px solid transparent; border-radius: var(--radius);
  font-family: var(--f-body); font-size: 1rem; font-weight: 650; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn-primary { background: var(--gold); color: var(--hull); }
.btn-primary:hover { background: var(--gold-hover); color: var(--hull); }
.btn-secondary { background: transparent; color: var(--fg); border-color: currentColor; }
.btn-secondary:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.btn-row.center { justify-content: center; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--link); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.link-arrow:hover { text-decoration-thickness: 2px; }
.link-arrow span { transition: transform .15s var(--ease); }
.link-arrow:hover span { transform: translateX(3px); }
.icon-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--line); background: transparent; color: var(--fg); border-radius: var(--radius); cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.icon-btn:hover { border-color: var(--fg); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 4. Announcement ---------- */
.announcement { background: var(--gold); color: var(--hull); font-weight: 600; font-size: var(--t-small); }
.announcement .wrap { padding-block: 10px; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--hull); color: var(--on-hull);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--steel-line); box-shadow: 0 8px 24px -16px rgba(0,0,0,.7); }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); transition: min-height .2s var(--ease); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--on-hull); text-decoration: none; flex: none; min-height: 44px; }
.brand .brand-crest { height: 52px; width: auto; }
.brand .brand-crest-lg { height: 80px; }
.brand-name { display: grid; line-height: 1.15; }
.brand-name strong { font-family: var(--f-display); font-stretch: 82%; font-size: 1.2rem; font-weight: 700; }
.brand-name span { font-family: var(--f-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--on-hull-muted); }
.nav { margin-left: auto; display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--on-hull); text-decoration: none; font-weight: 550; font-size: 1rem;
  box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .15s var(--ease);
}
.nav a:hover { box-shadow: inset 0 -2px 0 var(--on-hull-muted); }
.nav a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--gold); }
.header-cta { display: none; }
.menu-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px; background: transparent; color: var(--on-hull);
  border: 1px solid var(--steel-line); border-radius: var(--radius); cursor: pointer; font-weight: 600;
}
.menu-icon { display: grid; gap: 4px; width: 18px; }
.menu-icon span { height: 2px; background: currentColor; transition: transform .2s var(--ease), opacity .2s; }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--hull); color: var(--on-hull); overflow-y: auto;
  padding: 16px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--steel-line);
}
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li a {
  display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--steel-line);
  color: var(--on-hull); text-decoration: none; font-family: var(--f-display); font-stretch: 82%; font-size: 1.5rem; font-weight: 650;
}
.mobile-menu-foot { display: grid; gap: 12px; margin-top: 28px; color: var(--on-hull-muted); }
body.menu-open { overflow: hidden; }
@media (min-width: 1040px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* ---------- 6. Hero ---------- */
.hero-grid { display: grid; grid-template-columns: 1fr; }
.hero-copy { display: grid; gap: 22px; align-content: center; padding: 40px var(--gutter) 36px; }
.hero-copy .lede { max-width: 34ch; }
.hero-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--steel); }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.hero-tag { position: absolute; left: 12px; bottom: 12px; background: var(--hull); color: var(--on-hull); padding: 6px 10px; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .04em; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: min(640px, calc(100vh - var(--header-h) - 90px)); }
  .hero-copy { padding: 64px 56px 64px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
  .hero-media { aspect-ratio: auto; min-height: 460px; }
}
.facts { background: var(--steel); border-top: 1px solid var(--steel-line); }
.facts-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts-list > div { padding: 16px 16px 16px 0; display: grid; gap: 2px; align-content: start; border-top: 1px solid var(--steel-line); }
.facts-list > div:nth-child(-n+2) { border-top: 0; }
.facts-list dt { font-family: var(--f-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--on-hull-muted); }
.facts-list dd { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.35; }
@media (min-width: 900px) {
  .facts-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts-list > div { border-top: 0; border-left: 1px solid var(--steel-line); padding: 20px 24px; }
  .facts-list > div:first-child { border-left: 0; padding-left: 0; }
  .facts-list dd { font-size: 1.0625rem; }
}

/* ---------- 7. Significance ---------- */
.significance-grid { display: grid; gap: 48px; align-items: center; }
.significance-copy { display: grid; gap: 18px; }
.figures { margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--rule); padding-top: 20px; }
.figures div { display: grid; gap: 6px; align-content: start; }
.figures dt { font-family: var(--f-display); font-stretch: 82%; font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1; }
.figures dd { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--ink-muted); }
.photo-pair { position: relative; }
.photo-pair-main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-pair figcaption { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; font-size: var(--t-small); color: var(--ink-muted); }
.photo-pair-inset { display: none; }
@media (min-width: 600px) {
  .photo-pair-inset { display: block; position: absolute; right: -8px; top: 52%; width: 42%; border: 8px solid var(--paper); }
  .photo-pair figcaption { padding-right: 46%; }
  .photo-pair { padding-bottom: 12%; }
}
.photo-pair-inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Photos fade in one after the other, once. JS adds .is-pending only when motion is allowed. */
.photo-pair:not(.is-pending) .photo-pair-main, .photo-pair:not(.is-pending) .photo-pair-inset { transition: opacity .7s var(--ease), transform .8s var(--ease); }
.photo-pair:not(.is-pending) .photo-pair-inset { transition-delay: .45s; }
.photo-pair.is-pending .photo-pair-main, .photo-pair.is-pending .photo-pair-inset { opacity: 0; transform: translateY(16px); }
@media (min-width: 960px) {
  .significance-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .photo-pair { padding-bottom: 8%; }
  .photo-pair-inset { right: auto; top: auto; left: -7%; bottom: 0; width: 38%; }
  .photo-pair figcaption { padding-right: 0; padding-left: 34%; }
}

/* ---------- 8. Tour + explorer ---------- */
.tour-intro { display: grid; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); }
.tour-intro .sec-head { margin-bottom: 0; }
.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.pillars li { display: grid; gap: 8px; border-top: 1px solid var(--steel-line); padding-top: 16px; align-content: start; }
.pillars p { font-size: var(--t-small); }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 1100px) { .tour-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 64px; } }

.explorer { border-top: 1px solid var(--steel-line); padding-top: 32px; }
.explorer-head { display: grid; gap: 6px; justify-items: start; margin-bottom: 24px; }
/* Stage: wider than the text column on desktop so the drawing reads as an exhibit */
.explorer-stage { position: relative; margin-bottom: 8px; }
@media (min-width: 1000px) {
  .explorer-stage { width: min(calc(100vw - 2 * var(--gutter)), 1560px); margin-left: 50%; transform: translateX(-50%); padding-top: 8px; }
}
.sub-wrap { position: relative; width: 100%; }
.sub-svg, .sub-svg svg, .sub-svg img { display: block; width: 100%; height: 100%; }
.sub-svg svg { overflow: visible; pointer-events: none; }
/* Compartment highlight: only the fill changes; the artwork is untouched */
.c-region, .c-region path { transition: fill .2s var(--ease); }
.c-region.is-hover, .c-region.is-hover path { fill: #675C37; }
.c-region.is-active, .c-region.is-active path { fill: var(--gold); }
.sub-hit { fill: transparent; stroke: none; }
.is-interactive .c-target { pointer-events: all; cursor: pointer; }
/* Labels inside the drawing: desktop widths only */
.sub-labels { display: none; }
.labels-on .sub-labels { display: inline; }
.sub-label text { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; fill: var(--on-hull-muted); transition: fill .2s var(--ease); }
.sub-label.is-hover text { fill: var(--on-hull); }
.sub-label.is-active text { fill: var(--hull); }
/* Rooms that are not tour stops: labelled for reference only */
.sub-label-static { pointer-events: none; }
/* Non-tour rooms: on smaller screens with a mouse (labels hidden) pointing at
   one highlights it and shows its name; it is never selected or clickable. */
.c-ref, .c-ref path { transition: fill .2s var(--ease); }
.c-ref.is-hover, .c-ref.is-hover path { fill: #675C37; }
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  .explorer-stage:not(.labels-on) .c-ref { pointer-events: all; cursor: default; }
}
.sub-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 6px)); z-index: 2; pointer-events: none; white-space: nowrap;
  background: var(--hull); color: var(--on-hull); border: 1px solid var(--steel-line); padding: 4px 8px;
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}
.profile-dim { position: relative; height: 24px; margin-top: 4px; }
.profile-dim-line {
  position: absolute; top: 11px; height: 1px; background: var(--on-hull-muted);
  left: var(--dim-from, 4%); right: calc(100% - var(--dim-to, 96%));
  transform-origin: left center; transform: scaleX(1); transition: transform 1.2s var(--ease);
}
.profile-dim-line::before, .profile-dim-line::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--on-hull-muted); }
.profile-dim-line::before { left: 0; } .profile-dim-line::after { right: 0; }
.profile-dim.is-pending .profile-dim-line { transform: scaleX(0); }
.profile-dim-text {
  position: absolute; top: 0; left: calc((var(--dim-from, 4%) + var(--dim-to, 96%)) / 2); transform: translateX(-50%);
  background: var(--hull); padding: 0 10px; font-family: var(--f-mono); font-size: .875rem; color: var(--on-hull);
}

.tablist { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tablist::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; background: none; border: 0; cursor: pointer; text-align: left;
  min-height: 48px; padding: 12px 18px 12px 0; margin-right: 18px;
  color: var(--fg-muted); font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent; transition: color .15s, box-shadow .15s;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -3px 0 var(--gold); }
.explorer-panels { padding-top: 28px; }
.c-panel { display: grid; gap: 24px; animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: .001; } to { opacity: 1; } }
.c-panel figure { margin: 0; }
.c-panel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--steel); }
/* One photo per tour stop. Phones and tablets keep 3:2; on desktop the frame
   is shallower (about 1.93:1) at the same width, so the explorer reads as one unit. */
.c-photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--steel); }
.c-photo picture { display: block; width: 100%; height: 100%; }
.c-photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
.c-noimg { aspect-ratio: 3 / 2; display: grid; place-items: center; border: 1px dashed var(--steel-line); background: var(--steel); color: var(--on-hull-muted); text-align: center; padding: 24px; }
/* Every compartment's text area is as tall as the tallest one (set by JS),
   with the arrows pinned to its bottom so they never move between compartments. */
.c-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: var(--copy-h, auto); }
.c-copy > * { max-width: 100%; }
.c-copy > .c-facts { align-self: stretch; }
.c-copy .pos { color: var(--gold); }
/* Stop title: same size as the explorer heading ("Explore an Operational Submarine") */
.c-copy h4 { font-size: var(--t-h3); line-height: 1.2; font-weight: 650; }
.c-facts { margin: 4px 0 0; display: grid; gap: 0; }
.c-facts div { border-top: 1px solid var(--steel-line); padding: 12px 0; display: grid; gap: 2px; }
.c-facts dt { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-hull-muted); }
.c-facts dd { margin: 0; }
.c-facts-empty dd { color: var(--on-hull-muted); font-style: italic; }
/* Arrows sit above the position number; same place on every stop */
.c-nav { display: flex; gap: 12px; margin-bottom: 4px; }
/* Phones: no position number; the stop title sits to the right of the arrows.
   (Screen readers still hear "01 of 08" from the panel label.) */
@media (max-width: 639px) {
  .c-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 14px; }
  .c-copy .pos { display: none; }
  .c-copy .c-nav { margin-bottom: 0; }
  .c-copy > :not(.c-nav):not(h4) { grid-column: 1 / -1; }
}
@media (min-width: 900px) { .c-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; } }
/* Desktop: drawing, tour-stop row, photo and information grouped tightly */
@media (min-width: 1000px) {
  .explorer-head { margin-bottom: 16px; }
  .explorer-panels { padding-top: 24px; }
  .c-photo, .c-photo.c-noimg { aspect-ratio: 1.93 / 1; }
  .tour-foot { margin-top: 40px; }
}
.tour-foot { display: grid; justify-items: start; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--steel-line); }

/* ---------- 9. Visit ---------- */
.visit-grid { display: grid; gap: 40px; }
.info-panel { padding: 28px; display: grid; gap: 28px; align-content: start; }
.info-block { display: grid; gap: 14px; }
.info-block + .info-block { border-top: 1px solid var(--steel-line); padding-top: 24px; }
.info-block .label { color: var(--on-hull-muted); }
.week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.week li { display: grid; justify-items: center; gap: 6px; padding: 10px 2px 8px; background: var(--steel); border-top: 3px solid var(--gold); }
.week li.is-closed { background: transparent; border: 1px dashed var(--steel-line); border-top: 3px solid var(--steel-line); }
.week .d { font-family: var(--f-mono); font-size: .8rem; font-weight: 500; }
.week .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.week .is-closed .dot { background: transparent; border: 1.5px solid var(--on-hull-muted); }
.week .h { font-size: .72rem; color: var(--on-hull-muted); line-height: 1.2; }
.week li.is-today { outline: 2px solid var(--on-hull); outline-offset: 2px; }
.kv-list { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kv-list div { display: grid; gap: 2px; }
.kv-list dt { font-family: var(--f-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--on-hull-muted); }
.kv-list dd { margin: 0; font-family: var(--f-mono); font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.prices { width: 100%; border-collapse: collapse; }
.prices th, .prices td { padding: 10px 0; border-bottom: 1px solid var(--steel-line); text-align: left; font-weight: 600; }
.prices td { text-align: right; font-family: var(--f-mono); font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.info-actions { display: grid; gap: 10px; }
.visit-main { display: grid; gap: clamp(48px, 6vw, 72px); min-width: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: none; }
.steps li { display: grid; gap: 8px; border-top: 1px solid var(--rule); padding-top: 16px; align-content: start; }
.step-n { font-family: var(--f-mono); font-size: .8rem; font-weight: 500; color: var(--ink); display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%; }
.steps p { font-size: var(--t-small); color: var(--ink-muted); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } }
.access-block { display: grid; gap: 16px; }
.access { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
.access li { display: flex; gap: 14px; align-items: flex-start; }
.access svg { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.access div { display: grid; gap: 2px; }
.access b { font-weight: 650; }
.access span { font-size: var(--t-small); color: var(--ink-muted); line-height: 1.45; }
.checklist-title { font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin-top: 8px; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.checklist li { border: 1px solid var(--rule); background: var(--paper-3); padding: 8px 12px; font-size: var(--t-small); }
.callout { border-left: 4px solid var(--crest-blue); background: var(--paper-2); padding: 16px 20px; font-size: var(--t-small); display: grid; gap: 16px; justify-items: start; }
.quiet-link { color: inherit; }
.audiences { display: grid; gap: 20px; }
@media (max-width: 639px) { .tablist-light { flex-wrap: wrap; overflow: visible; } .tablist-light .tab { margin-right: 14px; } }
.aud-panel { display: grid; gap: 20px; padding-top: 4px; }
.aud-panel:focus-visible { outline-offset: 6px; }
.aud-panel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.aud-noimg { aspect-ratio: 16 / 10; display: grid; align-content: end; gap: 10px; padding: 24px; background: var(--paper-2); border: 1px solid var(--rule); }
.aud-noimg p { font-family: var(--f-display); font-stretch: 82%; font-size: 1.35rem; font-weight: 600; line-height: 1.25; }
@media (min-width: 640px) { .aud-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
@media (min-width: 1000px) {
  .visit-grid { grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: 56px; align-items: start; }
  .info-panel { order: 2; position: sticky; top: calc(var(--header-h) + 24px); }
  .visit-main { order: 1; }
}

/* ---------- 10. History ---------- */
.history { background: var(--paper-2); }
.history-intro { display: grid; gap: 40px; align-items: start; }
.history-copy { display: grid; gap: 16px; }
.history-copy p:not(.lede):not(.marker) { max-width: 64ch; }
.history-copy .marker { color: var(--ink-muted); }
.artefact { margin: 0; background: var(--paper-3); padding: 12px 12px 16px; border: 1px solid var(--rule); max-width: 500px; }
.artefact img { width: 100%; }
.artefact figcaption { display: grid; gap: 6px; padding-top: 12px; font-size: var(--t-small); line-height: 1.45; color: var(--ink); }
.artefact figcaption .label { color: var(--ink-muted); font-size: .72rem; }
@media (min-width: 960px) {
  .history-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .artefact.launch { margin-top: 56px; transform: rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) { .artefact.launch { transform: none; } }

.timeline-wrap { margin-block: clamp(56px, 7vw, 88px); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.timeline li { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 0 0 22px 22px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: -10px; width: 1px; background: var(--ink-muted); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; background: var(--signal); }
.timeline li.is-now::after { background: var(--gold); outline: 2px solid var(--ink); }
.t-year { font-family: var(--f-mono); font-weight: 500; font-size: 1rem; font-variant-numeric: tabular-nums; }
.t-text { font-size: var(--t-small); line-height: 1.45; }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .timeline li { grid-template-columns: 1fr; gap: 6px; padding: 26px 16px 0 0; }
  .timeline li::before { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 1px; }
  .timeline li:last-child::before { display: block; right: 50%; }
  .timeline li::after { top: 0; left: 0; }
  .t-year { font-size: 1.15rem; }
  /* Draw-in animation. JS adds .is-pending only on desktop with motion allowed,
     then removes it once when the timeline first enters the viewport. */
  .timeline { --seg: 240ms; }
  .timeline li::before { transform-origin: left center; transition: transform var(--seg) linear calc(var(--i, 0) * var(--seg)); }
  .timeline li::after, .timeline .t-year, .timeline .t-text {
    transition: opacity .45s var(--ease), transform .55s var(--ease);
    transition-delay: calc(var(--i, 0) * var(--seg));
  }
  .timeline .t-text { transition-delay: calc(var(--i, 0) * var(--seg) + 70ms); }
  .timeline.is-pending li::before { transform: scaleX(0); }
  .timeline.is-pending li::after, .timeline.is-pending .t-year, .timeline.is-pending .t-text { opacity: 0; transform: translateY(12px); }
}

.feature { display: grid; gap: 32px; align-items: center; }
.feature-media { margin: 0; }
.feature-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature-copy { display: grid; gap: 16px; }
.feature-copy .marker { color: var(--ink-muted); }
.dated { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.dated li { display: grid; gap: 4px; border-top: 1px solid var(--rule); padding: 14px 0; }
.dated .label { color: var(--crest-blue); }
.dated p { font-size: var(--t-small); }
@media (min-width: 960px) {
  .feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
  .feature-media { margin-left: calc(-1 * max(0px, (100vw - var(--container)) / 2)); }
}

/* ---------- 11. Life aboard ---------- */
.life .sec-head { margin-bottom: 28px; }
/* Without JavaScript the strip is a plain horizontal scroller */
.strip {
  list-style: none; margin: 0; padding: 0 0 8px;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
}
.strip li { scroll-snap-align: start; min-width: 0; }
.strip-item { display: grid; gap: 10px; width: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: zoom-in; color: var(--on-hull); }
.strip-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .2s var(--ease); }
.strip-item:hover img { opacity: .85; }
.strip-cap { font-size: var(--t-small); }
/* Press-and-hold pauses the carousel on touch screens: no image menu or text selection */
.carousel .strip-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Carousel (enhanced by JavaScript): 1 photo plus a glimpse of the next on phones, 2 on tablets, 3 on desktop */
.carousel { --per-view: 1.15; --gap: 16px; }
@media (min-width: 640px) { .carousel { --per-view: 2; } }
@media (min-width: 1000px) { .carousel { --per-view: 3; --gap: 20px; } }
.carousel-viewport { overflow: hidden; }
.is-carousel .strip {
  display: flex; gap: var(--gap); overflow: visible; padding: 0; scroll-snap-type: none;
  transition: transform .7s var(--ease); will-change: transform; touch-action: pan-y;
}
.is-carousel .strip li { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view)); }
.carousel-controls { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.carousel-controls [data-strip="toggle"] .i-play { display: none; }
.carousel-controls [data-strip="toggle"][aria-pressed="true"] .i-play { display: block; }
.carousel-controls [data-strip="toggle"][aria-pressed="true"] .i-pause { display: none; }
.icon-btn .i-play { fill: currentColor; stroke: none; }

.lightbox { border: 0; padding: 0; margin: auto; width: min(1200px, 100vw); max-width: 100vw; max-height: 100vh; background: transparent; color: var(--on-hull); }
.lightbox::backdrop { background: rgba(8, 12, 16, .92); }
.lightbox-inner { display: grid; gap: 12px; padding: 16px; }
.lightbox figure { margin: 0; display: grid; gap: 10px; }
.lightbox img { max-height: calc(100vh - 160px); width: auto; margin-inline: auto; }
.lightbox figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: var(--t-small); }
.lightbox .label { color: var(--on-hull-muted); }
.lightbox-controls { display: flex; justify-content: center; gap: 12px; }
.lightbox .icon-btn { --line: var(--steel-line); --fg: var(--on-hull); color: var(--on-hull); border-color: var(--steel-line); }

/* ---------- 12. Shop ---------- */
.shop-grid { display: grid; gap: 32px; }
.shop-lead { display: grid; gap: 20px; }
.shop-lead img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shop-lead-copy { display: grid; gap: 10px; }
.shop-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; border-top: 1px solid var(--rule); padding-top: 20px; }
.shop-item > img { width: 120px; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 88%; }
.shop-item > div:last-child { display: grid; gap: 6px; }
.voucher-card {
  width: 120px; aspect-ratio: 3 / 4; background: var(--hull); color: var(--on-hull);
  display: grid; align-content: space-between; padding: 12px; border: 1px solid var(--hull);
  background-image: radial-gradient(circle at 0 50%, var(--paper) 7px, transparent 8px), radial-gradient(circle at 100% 50%, var(--paper) 7px, transparent 8px);
}
.voucher-card .label { font-size: .6rem; color: var(--gold); }
.voucher-title { font-family: var(--f-display); font-stretch: 82%; font-weight: 700; font-size: 1.15rem; line-height: 1.05; }
.voucher-card svg path { fill: var(--on-hull-muted); }
.shop-note { margin-top: 28px; }
@media (min-width: 700px) {
  .shop-item { grid-template-columns: 160px minmax(0, 1fr); }
  .shop-item > img, .voucher-card { width: 160px; }
}
@media (min-width: 960px) {
  .shop-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 56px; align-items: start; }
  .shop-lead { grid-row: span 2; }
  .shop-item:first-of-type { border-top: 0; padding-top: 0; }
  .shop-item { grid-template-columns: 160px minmax(0, 1fr); }
}

/* ---------- 13. Contact ---------- */
.contact { background: var(--paper-2); }
.contact-grid { display: grid; gap: 40px; align-items: start; }
.find-us { display: grid; gap: 28px; align-content: start; }
.map { margin: 0; border: 1px solid var(--rule); background: #fff; }
.map img { width: 100%; }
.find-copy { display: grid; gap: 16px; align-content: start; justify-items: start; }
.route { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 10px; }
.route li { counter-increment: r; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: var(--t-small); }
.route li::before { content: counter(r); font-family: var(--f-mono); font-size: .8rem; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%; }
.contact-list { margin: 8px 0 0; display: grid; gap: 0; width: 100%; }
.contact-list div { display: grid; gap: 2px; border-top: 1px solid var(--rule); padding: 12px 0; }
.contact-list dt { font-family: var(--f-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.contact-list dd { margin: 0; display: grid; gap: 2px; font-weight: 600; overflow-wrap: anywhere; }
.form-card { background: var(--paper-3); border: 1px solid var(--rule); padding: clamp(20px, 3vw, 36px); display: grid; gap: 16px; align-content: start; min-width: 0; }
.form-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .field.full { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field label { font-weight: 600; font-size: 1rem; }
.req { color: var(--signal); }
.opt { font-weight: 400; color: var(--ink-muted); font-size: .9rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1.5px solid var(--field-border); border-radius: var(--radius);
  transition: border-color .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--ink); }
.field.has-error input, .field.has-error textarea { border-color: var(--signal); border-width: 2px; }
.error { color: var(--signal); font-size: .9rem; font-weight: 600; margin: 0; }
.field-foot { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.field-foot .count { margin-left: auto; font-variant-numeric: tabular-nums; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-summary { border: 2px solid var(--signal); background: #fff; padding: 14px 16px; font-size: var(--t-small); }
.form-summary ul { margin: 6px 0 0; padding-left: 1.2em; }
.form-summary a { color: var(--signal); font-weight: 600; }
.btn-submit { min-width: 200px; }
.form-success { border-left: 4px solid var(--crest-blue); background: var(--paper-2); padding: 20px; display: grid; gap: 8px; justify-items: start; }
@media (min-width: 1000px) {
  .contact-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; }
  /* Form travels with the visitor and stops level with the email address
     (the bottom of the left column). If the form is taller than the screen,
     it sticks by its bottom edge so the Send button stays visible. */
  .form-card { position: sticky; top: min(calc(var(--header-h) + 24px), calc(100vh - var(--form-h, 0px) - 24px)); }
  .contact-list div:last-child { padding-bottom: 0; }
}
@media (min-width: 640px) and (max-width: 999px) { .find-us { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------- 14. Closing + footer ---------- */
.closing { padding-block: clamp(72px, 9vw, 120px); text-align: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--steel-line); }
.closing-inner { display: grid; justify-items: center; gap: 18px; position: relative; }
.closing-sub { width: min(400px, 72%); height: auto; margin-bottom: 4px; opacity: .8; }
.closing h2 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); }
.site-footer { padding-block: 56px calc(32px + env(safe-area-inset-bottom, 0px)); }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
.foot-brand { display: grid; gap: 14px; align-content: start; }
.foot-h { font-family: var(--f-mono); font-stretch: 100%; font-size: var(--t-label); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--on-hull-muted); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-small); }
.site-footer a:not(.brand) { color: var(--on-hull); overflow-wrap: anywhere; }
.foot-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--steel-line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: .875rem; color: var(--on-hull-muted); }
.foot-base a { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

/* ---------- 15. Mobile action bar ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--hull); border-top: 1px solid var(--steel-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%); transition: transform .25s var(--ease);
}
.action-bar.is-visible { transform: translateY(0); }
.action-bar a { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 60px; padding: 8px 4px; color: var(--on-hull); text-decoration: none; font-size: .8rem; font-weight: 600; }
.action-bar a + a { border-left: 1px solid var(--steel-line); }
.action-bar svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1039px) { .site-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 1040px) { .action-bar { display: none; } }

/* ---------- 16. FAQ ---------- */
.faq { background: var(--paper-2); }
.faq-grid { display: grid; gap: 32px; }
.faq-grid .sec-head { margin-bottom: 0; align-content: start; }
.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) 24px; gap: 16px; align-items: center;
  min-height: 64px; padding: 16px 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-n { font-family: var(--f-mono); font-size: var(--t-label); color: var(--ink-muted); }
.faq-q { font-family: var(--f-display); font-stretch: 82%; font-weight: 650; font-size: var(--t-h3); line-height: 1.25; }
.faq-item summary:hover .faq-q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.faq-icon { position: relative; width: 24px; height: 24px; border: 1px solid var(--ink); border-radius: 50%; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .2s var(--ease); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--gold); border-color: var(--gold); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item[open] summary { box-shadow: inset 3px 0 0 var(--gold); padding-left: 16px; }
.faq-a { padding: 0 40px 22px 16px; margin-left: 0; color: var(--ink); animation: fade .25s var(--ease); }
.faq-a { display: grid; gap: 10px; }
.faq-a p { max-width: 64ch; }
.faq-label { display: block; font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin-bottom: 2px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } }

/* ---------- 17. Reviews ---------- */
.reviews-head { display: grid; gap: 24px; margin-bottom: 20px; }
.reviews-head .sec-head { margin-bottom: 0; }
.reviews-summary { display: grid; gap: 10px; justify-items: start; align-content: start; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--steel-line); }
.reviews-summary .label { color: var(--on-hull-muted); }
.reviews-score { font-family: var(--f-display); font-stretch: 82%; font-weight: 650; font-size: 1.5rem; color: var(--on-hull-muted); border-bottom: 1px dashed var(--steel-line); padding-bottom: 6px; }
.reviews-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 28px; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.review { display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--steel-line); padding: 24px 0; }
.review-rating { display: flex; align-items: center; gap: 12px; }
.review-rating .label { color: var(--on-hull-muted); }
.stars { color: var(--gold); font-size: 1.05rem; letter-spacing: .12em; line-height: 1; }
.ph-line { display: inline-block; width: 84px; height: 8px; background: repeating-linear-gradient(90deg, var(--steel-line) 0 12px, transparent 12px 18px); }
.review-text { margin: 0; position: relative; padding-left: 28px; }
.review-text::before { content: "\201C"; position: absolute; left: 0; top: -6px; font-family: var(--f-display); font-size: 2.4rem; line-height: 1; color: var(--gold); }
.review-text p { font-size: var(--t-lede); line-height: 1.45; color: var(--on-hull); }
.review-meta { display: flex; gap: 8px; font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .06em; color: var(--on-hull-muted); }
.review-meta { flex-wrap: wrap; align-items: baseline; }
.review-name { font-family: var(--f-body); font-size: 1rem; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--on-hull); }
@media (min-width: 900px) {
  .review-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

/* ---------- 18. Footer social ---------- */
.social { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 10px; }
.social-link {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--steel-line); border-radius: var(--radius); color: var(--on-hull);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.social-link svg { width: 20px; height: 20px; fill: currentColor; }
.social-link:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- 19. Floating back to top ---------- */
.to-top {
  position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 45;
  display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--hull); color: var(--gold); border: 1px solid var(--steel-line); border-radius: var(--radius);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s, border-color .15s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s, border-color .15s var(--ease); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { border-color: var(--gold); }
/* Sit above the mobile quick-action bar */
@media (max-width: 1039px) { .to-top { bottom: calc(60px + 16px + env(safe-area-inset-bottom, 0px)); } }