/* ==========================================================================
   Cape Solander Lighthouse Society — single stylesheet.
   Type: Petrona (headings, from the society's own 1911 minutes book) +
         Public Sans (body, forms and figures — the lettering of a public notice).
   Palette: salt-bleached limestone paper, slate-green sea ink, and the oxide red
   of the tower's own daymark. Oxide is the only accent; amber appears once, in the
   lamp, because that is light that actually exists in the subject.
   Radii: zero, everywhere. Shadows: none. Gradients: one (the lamp).
   ========================================================================== */

/* ---- fonts (self-hosted, latin + latin-ext subsets) --------------------- */
@font-face{
  font-family:'Petrona';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/petrona-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Petrona';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/petrona-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/publicsans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/publicsans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- tokens ------------------------------------------------------------- */
:root{
  --paper:#F2EDE1;
  --paper-2:#E7DFCC;
  --ink:#182A2C;
  --ink-2:#48595A;
  --fog:#14282A;
  --fog-ink:#E9E3D3;
  --fog-2:#A9B5AE;
  --oxide:#A8351C;
  --lamp:#E9A93C;
  --rule:#C9BFA6;
  --rule-fog:#3A5454;
  --focus:var(--oxide);

  --sans:'Public Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Petrona',Georgia,'Times New Roman',serif;

  /* type ramp: five sizes, no improvisation */
  --t-xs:0.8125rem;
  --t-sm:0.9375rem;
  --t-base:1.0625rem;
  --t-h3:1.375rem;
  --t-h2:clamp(1.55rem,1.05rem + 2.1vw,2.35rem);
  --t-h1:clamp(2rem,1.15rem + 3.6vw,3.35rem);

  /* spacing: 4px base */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s6:1.5rem;
  --s8:2rem; --s12:3rem; --s16:4rem; --s24:6rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--t-base)/1.62 var(--sans);
  font-synthesis-weight:none;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.08;letter-spacing:-.005em}
h1{font-size:var(--t-h1);max-width:22ch;font-weight:600}
h2{font-size:var(--t-h2);max-width:36ch}
h3{font-size:var(--t-h3);line-height:1.2}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 var(--s4);padding-left:1.15rem}
li{margin-bottom:var(--s2)}
li:last-child{margin-bottom:0}
a{color:var(--oxide);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
figure{margin:0}
figcaption{color:var(--ink-2);font-size:var(--t-xs);margin-top:var(--s3);max-width:52ch}
.watch__tally figcaption{max-width:82ch}
cite{font-style:italic}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s8) 0}
svg{max-width:100%;height:auto}

/* visible keyboard focus, in both colour zones */
:where(a,summary,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(1rem,4.5vw,2.5rem)}
.skip{position:absolute;left:var(--s4);top:-4rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:9;transition:none}
.skip:focus{top:var(--s2)}

/* ---- masthead ---------------------------------------------------------- */
.site-head{border-bottom:1px solid var(--rule)}
.site-head__in{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s8);align-items:baseline;justify-content:space-between;padding-block:var(--s4)}
.wordmark{font:700 1.0625rem/1.2 var(--serif);letter-spacing:.01em;text-decoration:none;color:var(--ink)}
.wordmark span{display:block;font:400 var(--t-xs)/1.4 var(--sans);color:var(--ink-2);letter-spacing:.02em}
.site-nav ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);list-style:none;margin:0;padding:0;font-size:var(--t-sm)}
.site-nav li{margin:0}

/* ---- hero -------------------------------------------------------------- */
.hero{padding-block:clamp(2.5rem,7vw,5rem) clamp(2rem,5vw,4rem)}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,3.5rem)}
.hero__lede{font-size:1.125rem;color:var(--ink);max-width:44ch;margin-top:var(--s6)}
.hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s6)}
.btn{
  display:inline-block;background:var(--oxide);border:1px solid var(--oxide);color:#FCF8EF;
  padding:.72rem 1.1rem;font:600 var(--t-sm)/1 var(--sans);text-decoration:none;
}
.btn:hover{background:#8C2A15;border-color:#8C2A15;text-decoration:none}
.hero__note{font-size:var(--t-xs);color:var(--ink-2);max-width:34ch}

/* the tower drawing + its particulars sit together in the narrow column */
.tower{border-top:1px solid var(--rule);padding-top:var(--s4)}
.tower__art{display:block;margin:0 auto;max-width:340px}
.partics{display:grid;grid-template-columns:auto 1fr;gap:0 var(--s4);margin:var(--s6) 0 0;font-size:var(--t-sm)}
.partics dt{color:var(--ink-2);padding:.34rem 0;border-top:1px solid var(--rule);white-space:nowrap}
.partics dd{margin:0;padding:.34rem 0;border-top:1px solid var(--rule)}

/* ---- generic section furniture ---------------------------------------- */
.sec{padding-block:clamp(2.75rem,7vw,5.5rem)}
.sec--rule{border-top:1px solid var(--rule)}
.sec__head{max-width:60ch;margin-bottom:var(--s8)}
.sec__head p{margin-top:var(--s4)}
.stamp{font-size:var(--t-xs);color:var(--ink-2);margin:0 0 var(--s3)}

.ledger{display:grid;gap:0 var(--s8);margin:0}
.ledger__row{display:grid;gap:var(--s1) var(--s4);padding-block:var(--s4);border-top:1px solid var(--rule)}
.ledger dt{font:600 var(--t-sm)/1.5 var(--sans);color:var(--ink)}
.ledger dd{margin:0;color:var(--ink-2);font-size:var(--t-sm);max-width:58ch}
.ledger dd strong{color:var(--ink);font-weight:600}

/* ---- roster table ----------------------------------------------------- */
.roster{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.roster caption{text-align:left;color:var(--ink-2);font-size:var(--t-xs);padding-bottom:var(--s3)}
.roster th,.roster td{text-align:left;vertical-align:top}
.roster thead th{font:600 var(--t-xs)/1.4 var(--sans);color:var(--ink-2);padding:0 var(--s4) var(--s2) 0;border-bottom:1px solid var(--rule)}
.roster tbody tr{border-top:1px solid var(--rule)}
.roster tbody th{font:600 var(--t-base)/1.35 var(--serif);padding:var(--s4) var(--s4) var(--s4) 0}
.roster td{padding:var(--s4) var(--s4) var(--s4) 0;color:var(--ink-2)}
.roster td:last-child,.roster th:last-child{padding-right:0}
.roster .when{white-space:nowrap;color:var(--ink)}

/* ---- the watch (dark zone) -------------------------------------------- */
.watch{background:var(--fog);color:var(--fog-ink);--focus:var(--lamp)}
.watch h2,.watch h3{color:#FBF7EC}
.watch a{color:#F3D79A}
.watch .sec__head p,.watch__cols p{color:var(--fog-2)}
/* the tally runs the full width of the page: it is a count sheet, and it is
   meant to be read as one. The prose sits under it, in two columns. */
.watch__tally{margin-bottom:clamp(2rem,5vw,3.5rem)}
.watch__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem)}
/* a grid item defaults to its min-content width, which would let the tally push
   the whole page sideways instead of scrolling inside its own box */
.hero__in>*,.watch__cols>*,.visit>*,.join>*{min-width:0}
.tally-scroll{min-width:0;overflow-x:auto;border-top:1px solid var(--rule-fog);border-bottom:1px solid var(--rule-fog);padding-block:var(--s4)}
.tally{display:block;min-width:760px;width:100%}
.tally text{font-family:var(--sans);fill:var(--fog-2);font-size:15px}
.tally .tally__hd{fill:var(--fog-2)}
.tally .tally__week{fill:#FBF7EC}
.tally .tally__num{fill:#FBF7EC;font-weight:600}
.tally .tally__g{stroke:#FBF7EC;stroke-width:3.2;stroke-linecap:round}
.tally .tally__g5{stroke:#F3D79A;stroke-width:3.2;stroke-linecap:round}
.tally .tally__rule{stroke:var(--rule-fog);stroke-width:1}
.scroll-hint{font-size:var(--t-xs);color:var(--fog-2);margin:var(--s3) 0 0;display:none}
@media (max-width:879px){.scroll-hint{display:block}}
.figures{margin-top:var(--s6);font-size:var(--t-sm);color:var(--fog-2)}
.figures strong{color:#FBF7EC;font-weight:600}

details.numbers{margin-top:var(--s6);border-top:1px solid var(--rule-fog);padding-top:var(--s4)}
details.numbers summary{font:600 var(--t-sm)/1.4 var(--sans);color:#F3D79A;cursor:pointer}
details.numbers summary::marker{color:var(--fog-2)}
.numbers table{width:100%;border-collapse:collapse;margin-top:var(--s4);font-size:var(--t-sm);color:var(--fog-2)}
.numbers caption{text-align:left;color:var(--fog-2);font-size:var(--t-xs);padding-bottom:var(--s2)}
.numbers th,.numbers td{text-align:left;padding:.4rem .75rem .4rem 0;border-top:1px solid var(--rule-fog)}
.numbers th{font-weight:600;color:var(--fog-ink)}
.numbers td:last-child,.numbers th:last-child{text-align:right;padding-right:0}

/* ---- collection ------------------------------------------------------- */
.collection{list-style:none;padding:0;margin:0}
.collection li{padding-block:var(--s4);border-top:1px solid var(--rule);display:grid;gap:var(--s1)}
.collection .obj{font-family:var(--serif);font-size:var(--t-h3);font-weight:600;line-height:1.25}
.collection .prov{color:var(--ink-2);font-size:var(--t-sm);max-width:60ch}
.collection .when{font-size:var(--t-xs);color:var(--ink-2)}

/* ---- visit ------------------------------------------------------------ */
.visit{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,3.5rem)}
.plan{margin-top:var(--s6)}
.plan svg{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.plan text{font-family:var(--sans);font-size:15px;fill:var(--ink)}
.plan .plan__sm{font-size:13px;fill:var(--ink-2)}
.plan .plan__sea{fill:var(--fog)}
.plan .plan__land{fill:var(--paper-2)}
.plan .plan__bld{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.plan .plan__tower{fill:var(--oxide);stroke:var(--ink);stroke-width:1.4}
.plan .plan__path{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-dasharray:7 6}
.plan .plan__dash{fill:none;stroke:var(--ink-2);stroke-width:1}
.plan .plan__seab{fill:var(--fog-ink)}
.factline{display:grid;grid-template-columns:auto 1fr;gap:0 var(--s4);margin:var(--s6) 0;font-size:var(--t-sm)}
.factline dt{color:var(--ink-2);padding:.3rem 0;border-top:1px solid var(--rule);white-space:nowrap}
.factline dd{margin:0;padding:.3rem 0;border-top:1px solid var(--rule)}

/* ---- join ------------------------------------------------------------- */
.join{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem)}
.join__box{border:1px solid var(--rule);padding:var(--s6)}
.join__box h3{margin-bottom:var(--s3)}
.join__box p{font-size:var(--t-sm);color:var(--ink-2)}

/* ---- footer ----------------------------------------------------------- */
.site-foot{background:var(--fog);color:var(--fog-2);--focus:var(--lamp);padding-block:clamp(2.5rem,6vw,4rem) var(--s8);font-size:var(--t-sm)}
.site-foot a{color:#F3D79A}
.site-foot h2{font-size:var(--t-h3);color:#FBF7EC;margin-bottom:var(--s3)}
.site-foot__cols{display:grid;gap:var(--s8)}
.site-foot__cols p{margin-bottom:var(--s3)}
.site-foot .wordmark{color:#FBF7EC;font-size:1.25rem}
.site-foot .wordmark span{color:var(--fog-2)}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:var(--s2)}
.site-foot__base{border-top:1px solid var(--rule-fog);margin-top:var(--s8);padding-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s8);justify-content:space-between;font-size:var(--t-xs)}
.site-foot__base p{margin:0;max-width:62ch}

/* ---- the one orchestrated moment --------------------------------------
   The light's last recorded bearing was 090°; on load the beam swings up from
   the south-east and settles out to sea, then stays put. One run, 1.5s, ends
   at rest. The resting position is the base style, so a render with no
   animation (or with animations disabled) still shows a beam pointing east.  */
.beam{transform-box:view-box;transform-origin:150px 100px}
@media (prefers-reduced-motion:no-preference){
  .beam{animation:swing 1.6s cubic-bezier(.22,.75,.24,1) 1 both}
}
@keyframes swing{from{transform:rotate(9deg);opacity:.4}to{transform:rotate(0deg);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .beam{animation:none}
}

/* ---- wide layouts ----------------------------------------------------- */
@media (min-width:720px){
  .ledger{grid-template-columns:1fr 1fr}
  .collection li{grid-template-columns:14rem 1fr;gap:var(--s1) var(--s6);align-items:baseline}
  .collection .obj{font-size:1.25rem}
  .collection .when{grid-column:2}
  .roster tbody th{width:22%}
  .roster thead th:nth-child(2){white-space:nowrap}
  .site-foot__cols{grid-template-columns:1.2fr 1fr 1fr}
}
@media (min-width:900px){
  .hero__in{grid-template-columns:minmax(0,7fr) minmax(15rem,4fr);align-items:start}
  .tower{border-top:0;padding-top:0;border-left:1px solid var(--rule);padding-left:clamp(1.5rem,3vw,2.5rem)}
  .watch__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .visit{grid-template-columns:minmax(0,6fr) minmax(18rem,5fr)}
  .join{grid-template-columns:minmax(0,7fr) minmax(16rem,4fr)}
}

/* stacked records below 720px — table roles are declared in the markup so the
   heading rows stay in the accessibility tree when they are laid out as blocks */
@media (max-width:719px){
  .roster thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .roster,.roster tbody,.roster tr,.roster th,.roster td{display:block;width:auto}
  .roster tbody th{padding:var(--s4) 0 var(--s1)}
  .roster td{padding:var(--s1) 0}
  .roster td::before{content:attr(data-label) ": ";color:var(--ink);font-weight:600}
}