/* =====================================================================
   Cape Solander Lighthouse Society — site.css
   ---------------------------------------------------------------------
   Direction: "charted sheet". The page is drawn as a survey / admiralty
   sheet: bone paper, a fine ruling grid where drawings sit, hairline
   rules doing all the structural work (no shadows, no cards), running
   ledgers of dated entries, one buoy-red accent and the oxidised-copper
   green of the lantern for secondary structure. There is no photography
   anywhere on this page — every drawing is the society's own linework,
   inlined as SVG, so nothing is borrowed and nothing is a stock image.
   ===================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  /* surface */
  --paper: #efe9da;
  --paper-2: #f7f3e9;
  --grid: #e4dbc7;
  --night: #151a1c;
  --night-2: #1d2527;

  /* ink */
  --ink: #1e2427;
  --ink-soft: #4c5356;
  --ink-faint: #5e6568;

  /* structure — hairlines carry depth, not shadows */
  --rule: #d5c9af;
  --rule-strong: #b4a88a;
  --night-rule: #38433f;
  --night-ink: #ece5d4;
  --night-soft: #b3ad9c;

  /* colour with a job */
  --verdigris: #2b6558;      /* secondary: the lantern's copper oxide — structure + links */
  --verdigris-deep: #1b463c;
  --signal: #b23a2a;         /* the ONE accent, buoy red: interactive + the charted light sector */
  --signal-deep: #8c2c1f;
  --lamp: #e4ae53;           /* the lamp itself — illustration, and the one lit evening */

  /* type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --text: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --data: 'Fragment Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* one ramp, five steps, never improvised */
  --fs-0: 0.8125rem;                                   /* data, tables, captions */
  --fs-1: 1.0625rem;                                   /* body */
  --fs-2: clamp(1.2rem, 1.02rem + 0.85vw, 1.45rem);    /* lede, subheads */
  --fs-3: clamp(1.75rem, 1.15rem + 2.5vw, 2.6rem);     /* h2 */
  --fs-4: clamp(2.1rem, 1.05rem + 4.55vw, 4.05rem);    /* h1 */

  /* one spacing scale, 4px base */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;

  /* two radii only */
  --r-1: 2px;
  --r-pill: 999px;

  --measure: 65ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --page: 1180px;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --shadow-sheet: 0 22px 44px -34px rgba(30, 36, 39, 0.5);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-1);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }
dd { margin: 0; }

a { color: var(--verdigris); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--verdigris-deep); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ---------------------------------------------------------------- type */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
}
h1 { font-size: var(--fs-4); }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-2); line-height: 1.2; }

.lede {
  font-family: var(--display);
  font-size: var(--fs-2);
  line-height: 1.45;
  letter-spacing: -0.005em;
  max-width: 44ch;
  text-wrap: pretty;
}

.prose { max-width: var(--measure); }
.prose p { text-wrap: pretty; }
.prose p + p { margin-top: var(--s-4); }
.prose a { text-decoration-thickness: 1px; }

.data { font-family: var(--data); font-size: var(--fs-0); letter-spacing: 0.02em; }
.muted { color: var(--ink-soft); }

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

.band { padding-block: var(--s-8); border-top: 1px solid var(--rule-strong); }
.band > .wrap > h2 + .prose,
.band > .wrap > h2 + p { margin-top: var(--s-5); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper-2);
  padding: var(--s-2) var(--s-4);
  z-index: 9;
}
.skip:focus { left: var(--s-3); top: var(--s-3); }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- masthead */
.masthead { border-bottom: 1px solid var(--ink); background: var(--paper); }
.masthead__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand__mark { width: 30px; height: 38px; flex: none; }
.brand__name {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.brand__sub { display: block; color: var(--ink-soft); margin-top: 0.1em; }

.nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.nav a {
  font-family: var(--data);
  font-size: var(--fs-0);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--verdigris); }

/* ---------------------------------------------------------------- hero */
.hero { padding-block: var(--s-7) var(--s-6); }
.hero__grid { display: grid; gap: var(--s-7); align-items: start; }
.hero__lede { margin-top: var(--s-5); }
.hero__act { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

.btn {
  display: inline-block;
  background: var(--signal);
  color: var(--paper-2);
  font-size: var(--fs-1);
  font-weight: 600;
  text-decoration: none;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--signal-deep);
  border-radius: var(--r-1);
  transition: background-color 140ms var(--ease);
}
.btn:hover { background: var(--signal-deep); color: var(--paper-2); }

@media (min-width: 900px) {
  .hero { padding-block: var(--s-8) var(--s-7); }
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: var(--s-8); }
}

/* ---------------------------------------------------------------- figure / chart field */
.fig { margin: 0; }
.fig__field {
  position: relative;
  border: 1px solid var(--rule-strong);
  background-color: var(--paper-2);
  background-image:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 26px);
  overflow: hidden;
}
.fig__field--sheet { box-shadow: var(--shadow-sheet); }
.fig__cap {
  margin-top: var(--s-2);
  font-family: var(--data);
  font-size: var(--fs-0);
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

/* the one orchestrated moment: the charted light sector sweeps on once
   and parks. Derived from the tower's own lamp and the sector arcs an
   admiralty chart draws around a light — not from generative defaults. */
@keyframes sector-sweep {
  from { transform: rotate(-54deg); }
  to   { transform: rotate(0deg); }
}
.fig__sector {
  transform-box: view-box;
  transform-origin: 300px 224px;
  animation: sector-sweep 1700ms var(--ease) 250ms 1 both;
}

/* ---------------------------------------------------------------- title block */
.titleblock {
  margin-top: var(--s-6);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  display: grid;
}
.tb {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s-1);
}
.tb:first-child { border-top: 0; }
.tb__k { font-family: var(--data); font-size: var(--fs-0); color: var(--ink-faint); }
.tb__v { font-family: var(--display); font-size: var(--fs-1); line-height: 1.25; }

@media (min-width: 720px) {
  .titleblock { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tb { padding: var(--s-4) var(--s-4); border-top: 0; border-left: 1px solid var(--rule); }
  .tb:first-child { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------- ledger */
.ledger { border-top: 1px solid var(--ink); }
.ledger__row {
  display: grid;
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.ledger__when {
  font-family: var(--data);
  font-size: var(--fs-0);
  color: var(--verdigris-deep);
  padding-top: 0.3em;
}
.ledger__body { max-width: var(--measure); }
.ledger__title { font-family: var(--display); font-weight: 600; font-size: var(--fs-1); }

/* the newest / largest entry, ranked visibly higher than the rest */
.ledger__row--lead { background: var(--paper-2); padding-inline: var(--s-4); }
.ledger__row--lead .ledger__title { font-size: var(--fs-2); line-height: 1.15; }

@media (min-width: 760px) {
  .ledger__row { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .ledger__row--lead { grid-template-columns: 8.5rem minmax(0, 1fr); }
}
@media (min-width: 980px) {
  .ledger--watch .ledger__row { grid-template-columns: 11rem 12rem minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- night band */
.night {
  background: var(--night);
  color: var(--night-ink);
  border-top: 1px solid var(--ink);
  padding-block: var(--s-8);
}
.night h2 { color: var(--night-ink); }
.night .muted, .night .ledger__when { color: var(--night-soft); }
.night a { color: var(--lamp); }
.night a:hover { color: #f3cf8b; }
.night__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .night__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: var(--s-8); } }
.night__stamp {
  font-family: var(--data);
  font-size: var(--fs-0);
  color: var(--lamp);
  border-top: 1px solid var(--night-rule);
  border-bottom: 1px solid var(--night-rule);
  padding-block: var(--s-2);
  margin-bottom: var(--s-5);
  max-width: 24ch;
}

/* ---------------------------------------------------------------- tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.table thead th {
  border-bottom: 1px solid var(--ink);
  font-family: var(--text);
  font-weight: 600;
  font-size: var(--fs-0);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.table .when, .table .admission { font-family: var(--data); font-size: var(--fs-0); white-space: nowrap; }
.table .admission { text-align: right; padding-right: 0; }
.table tbody tr:hover { background: var(--paper-2); }

@media (max-width: 620px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
  .table tbody tr:hover { background: transparent; }
  .table td { border: 0; padding: 0 0 var(--s-2); }
  .table td:last-child { padding-bottom: 0; }
  .table td[data-k]::before {
    content: attr(data-k) "  ";
    font-family: var(--data);
    font-size: var(--fs-0);
    color: var(--ink-faint);
  }
  .table .admission { text-align: left; }
}

/* ---------------------------------------------------------------- rates */
.rates { border-top: 1px solid var(--ink); }
.rate {
  display: grid;
  gap: var(--s-1) var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.rate__tier { font-family: var(--display); font-weight: 600; font-size: var(--fs-2); line-height: 1.15; }
.rate__price { font-family: var(--data); font-size: var(--fs-1); color: var(--signal-deep); }
.rate__buys { color: var(--ink-soft); }
@media (min-width: 820px) {
  .rate { grid-template-columns: 12rem 7rem minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- museum objects */
.objects { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .objects { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); } }

.holdings { border-top: 1px solid var(--rule-strong); }
.holding { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.holding__name { font-family: var(--display); font-weight: 600; font-size: var(--fs-1); }
.holding__note { color: var(--ink-soft); }

/* ---------------------------------------------------------------- visit */
.visit { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) { .visit { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--s-8); } }

.facts { border-top: 1px solid var(--ink); }
.fact { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); display: grid; gap: var(--s-1) var(--s-4); }
.fact__k { font-family: var(--data); font-size: var(--fs-0); color: var(--ink-faint); }
@media (min-width: 520px) { .fact { grid-template-columns: 8rem minmax(0, 1fr); } }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--ink); background: var(--night); color: var(--night-ink); padding-block: var(--s-7) var(--s-6); }
.foot a { color: var(--night-ink); }
.foot a:hover { color: var(--lamp); }
.foot__grid { display: grid; gap: var(--s-6); }
@media (min-width: 780px) { .foot__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-8); } }
.foot h3 { font-size: var(--fs-0); color: var(--night-soft); font-family: var(--data); font-weight: 400; letter-spacing: 0.04em; }
.foot__list { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.foot__list a { overflow-wrap: anywhere; }
.foot__colophon {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--night-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  color: var(--night-soft);
}
.ack { max-width: var(--measure); color: var(--night-soft); }
.ack strong { color: var(--night-ink); font-weight: 600; }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

section[id], [id] { scroll-margin-top: var(--s-5); }

/* ---------------------------------------------------------------- figure internals
   Every drawing on the page is inline SVG so the palette stays in tokens.
   Presentation attributes cannot parse var(); these classes can. */
.fig svg { width: 100%; height: auto; }
.fig text { font-family: var(--data); font-size: 14px; fill: var(--ink-soft); letter-spacing: 0.02em; }
.fig .t-ink { fill: var(--ink); }
.fig .t-signal { fill: var(--signal-deep); }
.fig .t-lamp { fill: var(--lamp); }
.fig .s-rule { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.fig .s-hair { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.fig .s-ink { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.fig .s-tower { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.25; }
.fig .s-v { fill: none; stroke: var(--verdigris); stroke-width: 1.25; }
.fig .s-signal { fill: none; stroke: var(--signal); stroke-width: 1.25; }
.fig .fill-ink { fill: var(--ink); }
.fig .fill-signal { fill: var(--signal); }
.fig .fill-lamp { fill: var(--lamp); }
.fig .fill-v { fill: var(--verdigris); }
.fig .fill-land { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1; }
.fig .dash { stroke-dasharray: 7 5; }
.fig .fine { stroke-dasharray: 2 3; }
.fig .dot { stroke-dasharray: 1 4; }

.fig--night .s-tower { fill: var(--night-2); stroke: var(--night-rule); }
.fig--night .s-ink, .fig--night .s-rule, .fig--night .s-hair { stroke: var(--night-rule); }
.fig--night text { fill: var(--night-soft); }
.fig--night .t-lamp { fill: var(--lamp); }