/* ============================================================================
   Cape Solander Lighthouse Society — single stylesheet
   Design source: the "List of Lights" / Admiralty chart title block, and the
   cast-metal notice placard at a harbour headland.
   Palette: chart paper (dominant) + petrol ink (structure) + beacon red (signal).
   ========================================================================== */

/* --- fonts (self-hosted, OFL) --------------------------------------------- */
@font-face{font-family:'Encode Sans Condensed';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/encode-sans-condensed-500-normal.woff2') format('woff2')}
@font-face{font-family:'Encode Sans Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/encode-sans-condensed-600-normal.woff2') format('woff2')}
@font-face{font-family:'Encode Sans Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/encode-sans-condensed-700-normal.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/newsreader-400-normal.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/newsreader-500-normal.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/newsreader-400-italic.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/dm-mono-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/dm-mono-500-normal.woff2') format('woff2')}

/* --- tokens --------------------------------------------------------------- */
:root{
  /* colour: 70 / 20 / 10 */
  --paper:#ece5d6;          /* dominant neutral — chart paper                */
  --paper-2:#e3dbc7;        /* inset panels                                  */
  --ink:#16241f;            /* petrol ink, not black, not navy               */
  --ink-soft:#495a51;       /* secondary prose                               */
  --mist:#c4bb9f;           /* hairlines                                     */
  --mist-soft:#d8d1bc;
  --night:#0c1815;          /* the one dark band                             */
  --night-ink:#e9e3d2;
  --night-soft:#a6b1a7;
  --beacon:#9e2c17;         /* the single accent — signal only               */
  --beacon-lift:#c2410c;    /* accent hover                                  */
  --lamp:#f0b64a;           /* the lantern's own light — literal light only  */

  /* type ramp — five steps, never improvised */
  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-body:1.0625rem;
  --fs-h2:clamp(1.5rem,1.15rem + 1.5vw,2.15rem);
  --fs-h1:clamp(2.35rem,1.35rem + 4.6vw,4.4rem);

  --display:'Encode Sans Condensed','Franklin Gothic Medium',system-ui,sans-serif;
  --text:'Newsreader',Georgia,'Times New Roman',serif;
  --data:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* spacing — 4px base */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4rem;   --s9:6rem;

  --r1:2px;                               /* radii: 0 and 2px */
  --rule:1px solid var(--mist);
  --shadow:0 10px 30px -22px rgba(22,36,31,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:140ms; --t-slow:1.8s;
  --measure:60ch;
}

/* --- 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-body);line-height:1.62;
  font-weight:400;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;
  letter-spacing:-.01em;margin:0}
p{margin:0 0 var(--s4)}
a{color:var(--beacon);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--beacon-lift)}
ul,ol,dl{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--beacon);outline-offset:2px;border-radius:var(--r1)}
.on-night :focus-visible{outline-color:var(--lamp)}

/* --- primitives ----------------------------------------------------------- */
.wrap{max-width:70rem;margin-inline:auto;padding-inline:clamp(1rem,5vw,2.5rem)}
.mono{font-family:var(--data);font-weight:400;font-size:var(--fs-sm);
  letter-spacing:.01em;font-variant-numeric:tabular-nums}
.lede{font-size:1.19rem;line-height:1.55;color:var(--ink);max-width:var(--measure)}
.note{font-size:var(--fs-sm);color:var(--ink-soft)}
.skip{position:absolute;left:var(--s4);top:-6rem;z-index:20;background:var(--ink);
  color:var(--paper);padding:var(--s3) var(--s4);border-radius:var(--r1);
  font-family:var(--display);font-weight:600;text-decoration:none;transition:top var(--t-fast) var(--ease)}
.skip:focus{top:var(--s4)}
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:1rem;
  letter-spacing:.02em;text-decoration:none;background:var(--ink);color:var(--paper);
  padding:.7rem 1.15rem;border:1px solid var(--ink);border-radius:var(--r1);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn:hover{background:var(--beacon);border-color:var(--beacon);color:#fff}
.link-more{font-family:var(--display);font-weight:600;letter-spacing:.01em}
.link-more::after{content:' \2192'}
.h3{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0 0 var(--s3)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;margin-top:var(--s5)}
.on-night .h3{color:var(--night-ink)}

/* --- masthead ------------------------------------------------------------- */
.masthead{position:sticky;top:0;z-index:10;background:var(--paper);
  border-bottom:var(--rule)}
.masthead__in{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  align-items:baseline;justify-content:space-between;padding-block:var(--s4)}
.brand{display:flex;gap:.6rem;align-items:baseline;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand__mark{flex:0 0 auto;width:1.15rem;align-self:center}
.brand__name{font-family:var(--display);font-weight:700;font-size:1.08rem;
  letter-spacing:.005em;line-height:1.1}
.brand__name em{font-style:normal;font-weight:500;color:var(--ink-soft)}
.nav ul{display:flex;flex-wrap:wrap;gap:var(--s4)}
.nav a{font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:.015em;
  color:var(--ink);text-decoration:none;padding-block:.2rem;border-bottom:2px solid transparent;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.nav a:hover{border-bottom-color:var(--beacon);color:var(--beacon)}
.masthead .btn{margin-left:auto}
@media (max-width:34rem){
  .masthead__in{display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:var(--s3) var(--s4)}
  .brand{grid-area:1/1}
  .masthead .btn{grid-area:1/2;margin-left:0}
  .nav{grid-area:2/1/3/3}
  .nav ul{gap:var(--s3) var(--s3)}
  .nav a{font-size:.95rem}
}

/* --- hero: chart title block --------------------------------------------- */
.hero{padding-block:var(--s7) var(--s6)}
.title-block{display:grid;gap:var(--s6);border:var(--rule);border-radius:var(--r1);
  background:var(--paper);box-shadow:var(--shadow);padding:clamp(1.25rem,3.5vw,2.75rem);
  grid-template-columns:minmax(0,1.35fr) minmax(16rem,.9fr)}
@media (max-width:52rem){.title-block{grid-template-columns:1fr}}

.origin{display:flex;flex-wrap:wrap;gap:.4rem var(--s4);font-family:var(--data);
  font-size:var(--fs-xs);letter-spacing:.04em;color:var(--ink-soft);
  border-bottom:var(--rule);padding-bottom:var(--s3);margin-bottom:var(--s5)}
h1{font-size:var(--fs-h1);max-width:14ch;margin-bottom:var(--s5)}
.hero__lede{max-width:38ch;margin-bottom:var(--s5)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:center}

/* the light card */
.lightcard{border:var(--rule);border-radius:var(--r1);background:var(--paper-2);
  padding:var(--s5);align-self:start}
.lightcard h2{font-size:1.15rem;font-weight:600;letter-spacing:.01em;margin-bottom:var(--s2)}
.lightcard__sub{font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:var(--s5)}

/* character ruler — the one orchestrated moment, derived from the light's
   own flash character: two white flashes, then dark, over a ten-second period */
.char{margin-bottom:var(--s4)}
.char__readout{font-family:var(--data);font-size:1.5rem;font-weight:500;
  color:var(--beacon);letter-spacing:.02em;margin-bottom:var(--s4)}
.ruler{position:relative;height:2.9rem;border-bottom:var(--rule);margin-bottom:1.6rem;
  background-image:repeating-linear-gradient(to right,var(--mist-soft) 0 1px,transparent 1px 10%)}
.ruler__flash{position:absolute;bottom:.3rem;height:.85rem;background:var(--beacon);
  border-radius:var(--r1)}
.ruler__flash--a{left:0;width:7%}
.ruler__flash--b{left:20%;width:7%}
.ruler__tick{position:absolute;bottom:0;height:.55rem;width:1px;background:var(--mist)}
.ruler__tick span{position:absolute;bottom:-1.4rem;left:50%;transform:translateX(-50%);
  font-family:var(--data);font-size:.625rem;color:var(--ink-soft);white-space:nowrap}
.ruler__cursor{position:absolute;top:-.3rem;bottom:-.3rem;left:0;width:2px;background:var(--ink);
  animation:sweep var(--t-slow) var(--ease) 1 both}
.ruler__cap{display:flex;justify-content:space-between;font-size:var(--fs-xs);
  color:var(--ink-soft);margin-top:var(--s3)}
@keyframes sweep{from{left:0;opacity:1}85%{opacity:1}to{left:100%;opacity:0}}
.lightcard dl{display:grid;gap:var(--s2)}
.lightcard dl>div{display:flex;justify-content:space-between;gap:var(--s4);
  border-top:var(--rule);padding-top:var(--s2)}
.lightcard dt{font-size:var(--fs-sm);color:var(--ink-soft)}
.lightcard dd{margin:0;font-family:var(--data);font-size:var(--fs-sm)}

/* hero facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:var(--s4);border-top:var(--rule);margin-top:var(--s6);padding-top:var(--s5)}
.facts dt{font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:var(--s1)}
.facts dd{margin:0;font-family:var(--data);font-size:1.05rem;color:var(--ink)}
.facts dd small{font-family:var(--text);font-size:var(--fs-xs);color:var(--ink-soft)}

/* --- sections ------------------------------------------------------------- */
.section{padding-block:var(--s8);border-top:var(--rule)}
.section__head{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);
  max-width:52rem;margin-bottom:var(--s6)}
h2{font-size:var(--fs-h2);max-width:20ch}
.section p{max-width:var(--measure)}
.split{display:grid;gap:var(--s7) var(--s8);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:48rem){.split{grid-template-columns:1fr;gap:var(--s6)}}

/* particulars (definition rows) */
.particulars{border-top:var(--rule)}
.particulars>div{display:grid;grid-template-columns:minmax(7rem,.6fr) minmax(0,1.4fr);
  gap:var(--s4);padding:var(--s3) 0;border-bottom:var(--rule)}
.particulars dt{font-size:var(--fs-sm);color:var(--ink-soft)}
.particulars dd{margin:0}
.particulars dd b{font-family:var(--data);font-weight:500}

/* restoration ledger */
.ledger{border-top:var(--rule)}
.ledger li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:var(--s4);
  padding:var(--s4) 0;border-bottom:var(--rule)}
.ledger .year{font-family:var(--data);font-size:var(--fs-sm);color:var(--beacon);font-weight:500}
.ledger .what{font-size:1rem;color:var(--ink)}
.ledger .what span{display:block;color:var(--ink-soft);font-size:var(--fs-sm);margin-top:var(--s1)}

/* --- visit ---------------------------------------------------------------- */
.sched{font-size:1rem;margin-bottom:var(--s5)}
.sched caption{text-align:left;font-family:var(--display);font-weight:600;
  font-size:1.05rem;padding-bottom:var(--s3)}
.sched th,.sched td{text-align:left;padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:var(--rule);vertical-align:top}
.sched thead th{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  color:var(--ink-soft);border-bottom:1px solid var(--ink)}
.sched td:first-child{font-family:var(--display);font-weight:600;white-space:nowrap}
.sched .times{font-family:var(--data);font-size:var(--fs-sm)}
.sched .closed{color:var(--ink-soft)}

.rates{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s3);margin-bottom:var(--s5)}
.rate{display:flex;gap:.45rem;align-items:baseline;border:var(--rule);
  border-radius:var(--r1);padding:var(--s2) var(--s4);background:var(--paper-2)}
.rate b{font-family:var(--data);font-weight:500;font-size:1rem}
.rate span{font-size:var(--fs-sm);color:var(--ink-soft)}
.callout{border-left:3px solid var(--beacon);padding:var(--s2) 0 var(--s2) var(--s4);
  background:linear-gradient(90deg,rgba(158,44,23,.06),transparent 70%)}
.callout p{font-size:var(--fs-sm);color:var(--ink-soft);margin:0}

@media (max-width:34rem){
  .sched thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sched tr{display:block;border-bottom:var(--rule);padding:var(--s3) 0}
  .sched th,.sched td{display:block;border:0;padding:0 0 var(--s2);max-width:38ch}
  .sched td[data-label]::before{content:attr(data-label) ': ';color:var(--ink-soft);
    font-family:var(--text);font-size:var(--fs-sm)}
}

/* --- the night watch (the one dark band) ---------------------------------- */
.on-night{position:relative;background:var(--night);color:var(--night-ink);
  border-top:1px solid var(--night)}
.on-night .section{padding-block:var(--s8);border-top:0}
.on-night h2{color:var(--night-ink)}
.on-night .lede{color:var(--night-ink)}
.on-night p{color:var(--night-soft)}
.on-night a{color:var(--lamp)}
.on-night a:hover{color:#ffd479}
.on-night .btn{background:var(--lamp);border-color:var(--lamp);color:var(--night)}
.on-night .btn:hover{background:#ffd479;border-color:#ffd479;color:var(--night)}
.beam{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,rgba(240,182,74,.17) 0%,rgba(240,182,74,.06) 28%,transparent 56%)}
.on-night .wrap{position:relative}
.watchgrid{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media (max-width:48rem){.watchgrid{grid-template-columns:1fr}}
.roles li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
  padding:var(--s3) 0;border-top:1px solid rgba(233,227,210,.18)}
.roles li:last-child{border-bottom:1px solid rgba(233,227,210,.18)}
.roles .dot{width:.5rem;height:.5rem;border-radius:var(--r1);background:var(--lamp);
  margin-top:.55rem}
.roles b{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--night-ink)}
.roles span{display:block;font-size:var(--fs-sm);color:var(--night-soft)}

/* --- footer --------------------------------------------------------------- */
.footer{background:var(--paper);padding-block:var(--s8) var(--s7)}
.footer__grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  border-top:1px solid var(--ink);padding-top:var(--s6)}
.footer h3{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  color:var(--ink-soft);margin-bottom:var(--s3);letter-spacing:.02em}
.footer address{font-style:normal;line-height:1.5}
.footer li+li{margin-top:var(--s2)}
.footer__base{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;
  margin-top:var(--s7);padding-top:var(--s4);border-top:var(--rule);
  font-size:var(--fs-xs);color:var(--ink-soft)}
.footer__base p{margin:0}

/* --- motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .ruler__cursor{display:none}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* positional data and spacing hooks */
.h3--top{margin-top:var(--s6)}
.ruler__tick--a{left:0}
.ruler__tick--b{left:50%}
.ruler__tick--c{left:100%}
/* keep in-page targets clear of the sticky masthead */
[id]{scroll-margin-top:6rem}
@media (max-width:34rem){[id]{scroll-margin-top:11rem}}