@charset "utf-8";
/* ===========================================================================
   Cape Solander Lighthouse Society — csls.css

   Design source: an Admiralty chart sheet (hairline rules, plotted bearings,
   dimension lines, a scale bar) crossed with a keeper's log book (tabular
   mono data). NOT a marketing template — the structure is a chart, the
   typography is a harbour gazette.

   Palette source: chart paper is a cool greenish white, not cream; the tower
   ironwork was primed with red lead, which is the one accent. Base is petrol
   ink, never pure black.

   Discipline: tokens only. One spacing scale (4px base). One radius. One
   border style. No box-shadows. No gradients. No JavaScript anywhere.
   =========================================================================== */

/* --- webfonts: latin subset, self-hosted; all three are variable -------- */
@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(csls-fonts/newsreader-var.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-style:italic;font-weight:200 800;font-display:swap;
  src:url(csls-fonts/newsreader-italic-var.woff2) format("woff2")}
@font-face{font-family:Overpass;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(csls-fonts/overpass-var.woff2) format("woff2")}
@font-face{font-family:"Overpass Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(csls-fonts/overpass-mono-var.woff2) format("woff2")}

/* --- tokens ------------------------------------------------------------- */
:root{
  /* colour — 3 neutrals + 1 ink + 1 accent. Contrast checked at AA or better. */
  --paper:#eef0ea;        /* chart paper, green-grey cast */
  --paper-deep:#e3e7de;   /* recessed band */
  --paper-line:#ccd3c7;   /* hairline on paper */
  --ink:#132229;          /* petrol ink: text, and the night bands */
  --ink-soft:#34454c;     /* secondary text   8.70:1 on paper */
  --ink-faint:#546369;    /* meta text  5.43:1 on paper, 4.98:1 on the deep band */
  --night-line:rgba(238,240,234,.20);
  --on-night:#e8ebe3;     /* 13.52:1 on ink */
  --on-night-soft:rgba(232,235,227,.72); /* 7.62:1 on ink */
  --signal:#a8341c;       /* red lead. Actions, and the red light sector. */
  --lamp-dark:rgba(232,235,227,.22);  /* the lens at rest: visible, unlit */
  --lamp-warm:rgba(232,235,227,.55);  /* the afterglow of the second flash */
  --focus:var(--signal);

  /* type — one ramp, five working sizes + the two display steps */
  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Overpass","Helvetica Neue",Arial,sans-serif;
  --f-data:"Overpass Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --fs-xs:.8125rem;   /* 13 — captions, data, meta */
  --fs-sm:.9375rem;   /* 15 — fineprint */
  --fs-md:1.0625rem;  /* 17 — body */
  --fs-lg:clamp(1.25rem,1.16rem + .4vw,1.4375rem);   /* 20–23 — section intros, h3 */
  --fs-xl:clamp(1.75rem,1.38rem + 1.6vw,2.375rem);   /* 28–38 — h2 */
  --fs-2xl:clamp(2.1rem,1.45rem + 2.6vw,3.4rem);     /* 34–54 — h1 */

  /* space — 4px base, nothing off-scale */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  /* radius — one value, plus square */
  --r1:2px;

  /* one border style */
  --hair:1px solid var(--paper-line);
  --hair-night:1px solid var(--night-line);

  --measure:60ch;
  --shell:1180px;
}

/* --- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,dl,dd,dt,figure,blockquote,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
html{scroll-padding-top:var(--s8)}

/* --- base type ---------------------------------------------------------- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--fs-md);
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
}
h1{font-size:var(--fs-2xl);line-height:1.05;max-width:20ch}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg);line-height:1.2}
p{text-wrap:pretty}
strong{font-weight:600}

a{
  color:inherit;
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:var(--paper-line);
}
a:hover{text-decoration-color:currentColor}

/* the one focus treatment, applied to everything focusable */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--r1);
}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- shell / bands ------------------------------------------------------ */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:clamp(var(--s5),5vw,var(--s8))}
.band{padding-block:clamp(var(--s8),9vw,var(--s10))}
.band--deep{background:var(--paper-deep)}
.band--night{background:var(--ink);color:var(--on-night);--focus:var(--on-night)}
.band--night a{text-decoration-color:var(--night-line)}

.skip{
  position:absolute;left:var(--s4);top:0;z-index:20;
  transform:translateY(-200%);
  background:var(--ink);color:var(--on-night);
  padding:var(--s3) var(--s4);border-radius:var(--r1);
}
.skip:focus-visible{transform:translateY(var(--s3))}

/* --- masthead ----------------------------------------------------------- */
.masthead{
  background:var(--paper);
  border-bottom:var(--hair);
  padding-block:var(--s3);
}
.masthead__in{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3) var(--s6);
}
.mark{
  display:flex;align-items:center;gap:var(--s3);
  text-decoration:none;flex:0 0 auto;
}
.mark svg{width:22px;height:30px;flex:none;overflow:visible}
.mark__text{
  font-family:var(--f-display);font-size:var(--fs-md);line-height:1.15;
  letter-spacing:.005em;
}
.mark__text span{display:block;color:var(--ink-soft);font-size:var(--fs-xs)}

.nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-inline-end:auto}
.nav a{
  font-size:var(--fs-xs);text-decoration:none;
  color:var(--ink-soft);padding-block:var(--s1);
}
.nav a:hover{color:var(--ink);text-decoration:underline}
.masthead .btn{flex:0 0 auto}

@media (min-width:900px){
  .masthead{position:sticky;top:0;z-index:10}
}

/* --- buttons and links -------------------------------------------------- */
.btn{
  display:inline-block;
  background:var(--signal);color:var(--paper);
  font-size:var(--fs-sm);font-weight:600;
  padding:var(--s3) var(--s5);
  border-radius:var(--r1);
  text-decoration:none;
  border:1px solid var(--signal);
}
.btn:hover{background:#8f2b16;border-color:#8f2b16}
.link{
  font-size:var(--fs-sm);font-weight:600;color:inherit;
  text-decoration:underline;text-underline-offset:.22em;
}

/* --- hero --------------------------------------------------------------- */
.hero{padding-block:clamp(var(--s7),7vw,var(--s9)) clamp(var(--s8),8vw,var(--s9))}
.hero__in{display:grid;gap:clamp(var(--s7),6vw,var(--s9))}
@media (min-width:940px){
  .hero__in{grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
    align-items:center;gap:var(--s9)}
}
.lede{
  margin-top:var(--s5);max-width:52ch;
  font-size:var(--fs-lg);line-height:1.5;color:var(--on-night);
}
.hero__actions{
  margin-top:var(--s6);display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s4) var(--s6);
}
.hero__line{
  margin-top:var(--s5);font-size:var(--fs-sm);color:var(--on-night-soft);
  max-width:46ch;
}

.hero__fig{margin:0}
.hero__fig svg{width:100%;height:auto;max-width:420px;margin-inline:auto}
.hero__fig figcaption{
  margin-top:var(--s4);max-width:34ch;
  font-family:var(--f-data);font-size:var(--fs-xs);line-height:1.7;
  color:var(--on-night-soft);
}
@media (min-width:940px){.hero__fig figcaption{margin-inline:auto}}

/* the tower drawing */
.tower-stroke{fill:none;stroke:var(--on-night);stroke-width:1.5;
  stroke-linejoin:round;stroke-linecap:round}
.tower-hair{fill:none;stroke:var(--on-night-soft);stroke-width:1}
.tower-hatch{stroke:var(--on-night-soft);stroke-width:1;
  stroke-linecap:round;fill:none}
.tower-fill{fill:var(--on-night);stroke:none}
.tower-dim{fill:none;stroke:var(--on-night-soft);stroke-width:1;
  stroke-dasharray:3 4}
.tower-label{font-family:var(--f-data);font-size:11px;fill:var(--on-night-soft)}

/* One orchestrated moment: the tower's own light character, Fl(2) W 15s,
   played once on load and then resting dark — which is the correct resting
   state, since the light went out in 1975.
   The lamp and the beams are never hidden: they carry a visible resting
   colour and the keyframes move that colour, so nothing on this page depends
   on JavaScript, a scroll observer, or an opacity trick to become visible. */
.beacon-lamp{fill:var(--lamp-dark)}
.beacon-beam{fill:rgba(238,240,234,0)}
@keyframes beacon-echo{
  0%{fill:var(--lamp-dark)} 4%{fill:var(--on-night)} 11%{fill:var(--lamp-dark)}
  19%{fill:var(--on-night)} 26%{fill:var(--lamp-dark)}
  34%{fill:var(--lamp-warm)} 52%{fill:var(--lamp-dark)} 100%{fill:var(--lamp-dark)}
}
@keyframes beam-echo{
  0%{fill:rgba(238,240,234,0)}  4%{fill:rgba(238,240,234,.16)} 11%{fill:rgba(238,240,234,0)}
  19%{fill:rgba(238,240,234,.16)} 26%{fill:rgba(238,240,234,0)}
  34%{fill:rgba(238,240,234,.05)} 52%{fill:rgba(238,240,234,0)}
  100%{fill:rgba(238,240,234,0)}
}
.beacon-lamp{animation:beacon-echo 1.75s ease-out .45s 1 both}
.beacon-beam{animation:beam-echo 1.75s ease-out .45s 1 both}
@media (prefers-reduced-motion:reduce){
  .beacon-lamp,.beacon-beam{animation:none}
}

/* --- sections ----------------------------------------------------------- */
.head{max-width:34ch;margin-bottom:var(--s7)}
.head p{margin-top:var(--s5);color:var(--ink-soft);max-width:var(--measure)}
.head--wide{max-width:none}
.head--wide p{max-width:66ch}

.prose{max-width:var(--measure);color:var(--ink-soft)}
.prose p + p{margin-top:var(--s4)}
.prose strong{color:var(--ink)}
.prose--wide{max-width:70ch}

/* --- the tower: spec ledger + chart ------------------------------------- */
.tower-grid{display:grid;gap:clamp(var(--s7),6vw,var(--s9))}
@media (min-width:900px){
  .tower-grid{grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);align-items:start}
}

.spec{display:grid;gap:0;margin-top:var(--s6);border-top:var(--hair)}
.spec__row{
  display:grid;grid-template-columns:minmax(0,13ch) minmax(0,1fr);
  gap:var(--s4);padding-block:var(--s3);border-bottom:var(--hair);
  align-items:baseline;
}
.spec__row dt{
  font-size:var(--fs-xs);color:var(--ink-faint);
}
.spec__row dd{font-size:var(--fs-sm);line-height:1.5}

.chart{
  border:var(--hair);background:var(--paper);
  padding:var(--s5) var(--s5) var(--s4);
}
.chart svg{width:100%;height:auto}
.chart figcaption{
  margin-top:var(--s4);padding-top:var(--s4);border-top:var(--hair);
  font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.7;
}
.chart__key{
  font-family:var(--f-data);font-size:var(--fs-xs);
  margin-top:var(--s3);color:var(--ink);letter-spacing:.01em;
}

/* sector-diagram parts */
.sec-ring{fill:none;stroke:var(--paper-line);stroke-width:1}
.sec-tick{stroke:var(--paper-line);stroke-width:1}
.sec-white{fill:#fff;stroke:var(--paper-line);stroke-width:1}
.sec-red{fill:var(--signal);stroke:none}
.sec-land{fill:none;stroke:var(--paper-line);stroke-width:1}
.sec-landfill{fill:var(--paper-deep)}
.sec-lead{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3}
.sec-tower{fill:var(--ink);stroke:none}
.sec-txt{font-family:var(--f-data);font-size:10px}
.sec-txt--ink{fill:var(--ink-faint)}
.sec-txt--paper{fill:var(--paper)}
.sec-north{fill:var(--ink)}

/* --- duties: a ledger, deliberately unequal ----------------------------- */
.duties{border-top:var(--hair)}
.duty{
  display:grid;gap:var(--s5) var(--s8);
  padding-block:clamp(var(--s6),5vw,var(--s8));
  border-bottom:var(--hair);
}
@media (min-width:820px){
  .duty--lead{grid-template-columns:minmax(0,1fr) minmax(0,24rem)}
}
.duty h3{max-width:22ch}
.duty p{margin-top:var(--s4);color:var(--ink-soft);max-width:var(--measure)}
.duty--lead h3{font-size:clamp(1.5rem,1.25rem + .9vw,2rem)}
.duty__note{
  margin-top:var(--s5);font-size:var(--fs-sm);color:var(--ink-faint);
  max-width:var(--measure);
}

.log{
  border:var(--hair);background:var(--paper);
  padding:var(--s5) var(--s4);
  font-family:var(--f-data);font-size:var(--fs-xs);line-height:1.6;
}
.log__head{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);
  padding-bottom:var(--s3);margin-bottom:var(--s2);
  border-bottom:var(--hair);color:var(--ink-faint);
}
.log__row{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);
  gap:var(--s3);padding-block:var(--s1);
}
.log__row span:first-child{color:var(--ink-faint)}

/* --- rates ------------------------------------------------------------- */
.rates{margin-top:var(--s7);border-top:var(--hair)}
.rate{
  display:grid;gap:var(--s2) var(--s5);
  padding-block:var(--s5);border-bottom:var(--hair);
  align-items:baseline;
}
@media (min-width:760px){
  .rate{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,12rem)}
  .rate__when{text-align:left}
  .rate__price{text-align:right}
}
.rate__name{font-family:var(--f-display);font-size:var(--fs-lg);line-height:1.15}
.rate__when{font-size:var(--fs-sm);color:var(--ink-faint)}
.rate__price{font-size:var(--fs-sm);font-weight:600}
.rate__price small{display:block;font-weight:400;color:var(--ink-faint);font-size:var(--fs-xs)}

.booking{
  margin-top:var(--s7);display:grid;gap:var(--s5);
  max-width:66ch;
}
@media (min-width:760px){.booking{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.booking p{color:var(--ink-soft);font-size:var(--fs-sm);max-width:52ch}

/* --- collection / roles: a list ledger, not cards ---------------------- */
.ledger{margin-top:var(--s7);border-top:var(--hair)}
.ledger li{
  padding-block:var(--s4);border-bottom:var(--hair);
  display:grid;gap:var(--s2) var(--s5);
}
@media (min-width:700px){
  .ledger li{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
}
.ledger__term{font-family:var(--f-display);font-size:var(--fs-lg);line-height:1.2}
.ledger__def{color:var(--ink-soft);font-size:var(--fs-sm);max-width:64ch}
/* quoted matter — a line of the keepers' log, set off in the display serif.
   This is the only italic on the page, and it is why the italic face is shipped. */
.ledger__def em{
  font-family:var(--f-display);font-style:italic;
  font-size:var(--fs-md);line-height:1.5;color:var(--ink);
}

/* --- visit: a spec sheet ----------------------------------------------- */
.visit{margin-top:var(--s7);border-top:var(--hair);display:grid;gap:0}
@media (min-width:800px){
  .visit{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s9)}
}
.visit__row{
  padding-block:var(--s5);border-bottom:var(--hair);
  display:grid;gap:var(--s2);align-content:start;
}
.visit__row dt{font-family:var(--f-display);font-size:var(--fs-lg);line-height:1.2}
.visit__row dd{color:var(--ink-soft);font-size:var(--fs-sm);max-width:58ch}
.visit__row dd + dd{margin-top:var(--s3)}

/* two spacing utilities, so no component invents its own margins */
.mt-s4{margin-top:var(--s4)}
.mt-s7{margin-top:var(--s7)}
.foot__lead{max-width:38ch}

/* --- footer ------------------------------------------------------------ */
.foot{padding-block:clamp(var(--s8),7vw,var(--s9)) clamp(var(--s7),5vw,var(--s8))}
.foot__grid{display:grid;gap:var(--s7);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){
  .foot__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
}
.foot h2{font-size:var(--fs-lg);margin-bottom:var(--s4)}
.foot p,.foot li{font-size:var(--fs-sm);color:var(--on-night-soft)}
.foot ul{display:grid;gap:var(--s2)}
.foot a{text-decoration-color:var(--night-line)}
.foot__ack{
  margin-top:var(--s8);padding-top:var(--s5);border-top:var(--hair-night);
  max-width:68ch;
}
.foot__ack p{font-size:var(--fs-xs);line-height:1.8}
.foot__legal{
  margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  font-size:var(--fs-xs);color:var(--on-night-soft);
}
.foot .mark__text{color:var(--on-night)}
.foot .mark__text span{color:var(--on-night-soft)}

/* --- small-screen trims ------------------------------------------------ */
@media (max-width:899px){
  .masthead .btn{display:none}
}
@media (max-width:600px){
  .mark__text{font-size:var(--fs-sm)}
  .mark__text span{display:none}
  .spec__row{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .log__row{grid-template-columns:minmax(0,1fr);gap:0}
  .log__row span:first-child{color:var(--ink-faint)}
  .hero__fig svg{max-width:320px}
}

@media print{
  .masthead,.skip{display:none}
  body{background:#fff;color:#000}
  .band--night{background:#fff;color:#000}
}