/* =============================================================================
   Cape Solander Lighthouse Society — single page, no framework, no JavaScript.
   Direction: "Station record" (see DIRECTION.md).
   Cool fog paper + deep-sea panels, one signal red used like a daymark on
   links and buttons only, condensed wayfinding type for display, a plain civic
   sans for text, a mono for figures. Depth is hairlines and surface steps — no
   shadows, no gradient, no glass. The one moving thing is the tower's own light
   character, Fl(3) W 15s, drawn to scale and looped on a true 15-second cycle.
   ========================================================================== */

/* --- faces (self-hosted, OFL; notes in fonts/LICENCES.txt) ----------------- */
@font-face{
  font-family:"Encode Sans Condensed";
  src:url("fonts/encode-sans-condensed-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Encode Sans Condensed";
  src:url("fonts/encode-sans-condensed-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("fonts/public-sans-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Space Mono";
  src:url("fonts/space-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Space Mono";
  src:url("fonts/space-mono-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* --- tokens ---------------------------------------------------------------- */
:root{
  /* surfaces */
  --fog:#eef1ef;
  --fog-2:#e3e8e5;
  --paper:#f8faf8;
  --sea:#123f4b;
  --sea-2:#0c2f39;
  --sea-3:#0a2932;

  /* text */
  --ink:#15242b;
  --ink-soft:#465960;

  /* accent (links and buttons + the daymark): one colour, one job */
  --signal:#b23a2b;
  --signal-deep:#8d2c20;

  /* the light itself (illustration, never text on fog) */
  --lamp:#f0d79c;
  --lamp-bright:#ffdf9e;

  /* structure */
  --line:rgba(21,36,43,.15);
  --line-2:rgba(21,36,43,.32);
  --line-dark:rgba(240,215,156,.24);

  /* radii — two values, referenced by token only */
  --r:2px;
  --r-pill:999px;

  /* space — one 4px base in named steps */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem; --s8:4rem;   --s9:6rem;
  --gut:1.25rem;
  --measure:66ch;

  /* type ramp */
  --t-xs:.78rem;
  --t-sm:.875rem;
  --t-body:1.0625rem;
  --t-h3:clamp(1.12rem,1.03rem + .45vw,1.34rem);
  --t-h2:clamp(1.55rem,1.12rem + 2vw,2.5rem);
  --t-h1:clamp(2.15rem,1.1rem + 4.5vw,4.3rem);
  --t-lead:clamp(1.06rem,1rem + .5vw,1.32rem);

  /* faces */
  --display:"Encode Sans Condensed","Helvetica Neue",Arial,sans-serif;
  --text:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --data:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

/* --- base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fog);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img,svg{max-width:100%}
h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  line-height:1.03;
  margin:0 0 var(--s4);
  letter-spacing:-.004em;
}
h3{font-size:var(--t-h3);line-height:1.15;margin-top:var(--s6)}
.record h3,.panel h3,.contact > div > :first-child{margin-top:0}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
a{color:var(--signal);text-underline-offset:2px}
a:hover{color:var(--signal-deep)}
strong{font-weight:600}
ul{margin:0}

/* visible keyboard focus, on every ground */
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--signal);
  outline-offset:2px;
  border-radius:var(--r);
}
/* progressive enhancement: browsers without :focus-visible keep the ring */
:where(a,button,summary,input,select,textarea):focus{
  outline:3px solid var(--signal);
  outline-offset:2px;
}
:where(a,button,summary):focus:not(:focus-visible){outline:none}
.panel :focus-visible,.ack :focus-visible,.foot :focus-visible{
  outline-color:var(--lamp-bright);
}

/* --- layout ---------------------------------------------------------------- */
.wrap{width:min(100% - 2 * var(--gut),1140px);margin-inline:auto}
main{display:block}
section[id],div[id]{scroll-margin-top:var(--s5)}
.section{padding-block:clamp(2.4rem,1.4rem + 3.2vw,4.6rem);border-top:1px solid var(--line)}
.section__head{max-width:62ch;margin-bottom:var(--s6)}
.section__head h2{font-size:var(--t-h2);max-width:22ch}
.section__head p{font-size:var(--t-lead);color:var(--ink-soft);max-width:54ch}
.prose{max-width:var(--measure)}
.note{font-size:var(--t-sm);color:var(--ink-soft);max-width:62ch}
.mono{font-family:var(--data)}

.skip{
  position:absolute;left:var(--s4);top:-100%;
  z-index:9;background:var(--sea-2);color:#fff;
  padding:.6rem 1rem;border-radius:var(--r);text-decoration:none;
}
.skip:focus{top:var(--s4)}

/* --- buttons --------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.012em;
  text-decoration:none;
  padding:.6rem 1.05rem;
  border:1px solid var(--sea);
  border-radius:var(--r);
  background:var(--sea);color:var(--paper);
}
.btn:hover{background:var(--sea-2);border-color:var(--sea-2);color:#fff}
.btn--signal{background:var(--signal);border-color:var(--signal);color:#fff}
.btn--signal:hover{background:var(--signal-deep);border-color:var(--signal-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--sea);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--sea);border-color:var(--sea);color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* --- masthead -------------------------------------------------------------- */
.masthead{border-bottom:1px solid var(--line)}
.masthead__inner{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3) var(--s5);padding-block:var(--s4);
}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand > svg{width:36px;height:36px;flex:none}
.brand__name{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.02}
.brand__name span{display:block;font-weight:600;font-size:.74rem;letter-spacing:.015em;color:var(--ink-soft)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-left:auto}
.nav a{
  font-size:var(--t-sm);color:var(--ink);text-decoration:none;
  padding:.35rem 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--line-2);color:var(--ink)}
.nav .btn{border-bottom-width:1px;padding:.45rem .85rem;font-size:.94rem}

/* --- hero ------------------------------------------------------------------ */
.hero{padding-block:clamp(2.2rem,1rem + 4vw,4.6rem)}
.hero__grid{display:grid;gap:clamp(1.6rem,1rem + 2.6vw,3rem)}
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.12fr .88fr;align-items:start}
}
.hero h1{font-size:var(--t-h1);max-width:15ch;margin-bottom:var(--s5)}
.hero__lead{font-size:var(--t-lead);color:var(--ink-soft);max-width:48ch}
.hero .actions{margin-top:var(--s5)}
.hero__note{
  margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:var(--t-sm);color:var(--ink-soft);max-width:54ch;
}

/* --- station panel (the one dense surface) --------------------------------- */
.panel{
  background:var(--sea-2);color:#e7eeec;
  border-radius:var(--r);
  padding:clamp(1.1rem,1rem + 1vw,1.6rem);
}
.panel__title{
  font-family:var(--display);font-weight:700;font-size:1.24rem;
  color:#fff;margin-bottom:var(--s2);
}
.panel__kicker{font-size:var(--t-sm);color:#a9bfc0;margin-bottom:var(--s4)}
.panel a{color:var(--lamp-bright)}

/* the light character, drawn to scale (0.7 / 2.4 / 0.7 / 2.4 / 0.7 / 8.1 s) */
.beacon{margin:0 0 var(--s5)}
.beacon__bars{
  display:flex;align-items:stretch;height:58px;
  background:var(--sea-3);border-radius:var(--r);overflow:hidden;
}
.beacon__bar{flex:var(--g) 0 0;background:var(--sea-3)}
.beacon__bar--lit{
  background:var(--lamp);
  animation:flash 15s linear infinite;
  animation-delay:var(--d,0s);
}
.beacon__scale{
  display:flex;justify-content:space-between;
  margin-top:var(--s2);
  font-family:var(--data);font-size:var(--t-xs);color:#9db3b5;
}
.beacon__caption{font-size:var(--t-sm);color:#c3d3d2;margin-top:var(--s3);max-width:44ch}
@keyframes flash{
  0%,4.66%{background-color:var(--lamp)}
  4.67%,100%{background-color:var(--sea-3)}
}

/* specs list */
.specs{margin:0;border-top:1px solid var(--line-dark)}
.specs > div{
  display:flex;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--line-dark);
}
.specs dt{color:#a9bfc0;font-size:var(--t-sm)}
.specs dd{margin:0;font-family:var(--data);font-size:var(--t-sm);color:#f2f6f4;text-align:right}

/* --- ruled record lists (tours, collection, ways to help) ------------------ */
.record{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.record > li{
  display:grid;gap:var(--s3) var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--line);
}
@media (min-width:780px){
  .record > li{grid-template-columns:1.45fr .85fr;align-items:start}
}
.record h3{margin-bottom:var(--s2)}
.record p{color:var(--ink-soft);max-width:60ch}
.record .facts{
  margin:0;font-family:var(--data);font-size:var(--t-sm);color:var(--ink);
  display:grid;gap:var(--s2);
}
.record .facts b{font-weight:400;color:var(--ink-soft);display:block;font-size:var(--t-xs)}
.when{font-family:var(--data);font-size:var(--t-sm);color:var(--sea);font-weight:700}

/* --- dated station record (timeline) --------------------------------------- */
.timeline{margin:0;border-top:1px solid var(--line)}
.timeline > div{
  display:grid;grid-template-columns:5.4rem 1fr;gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--line);
}
.timeline dt{font-family:var(--data);font-weight:700;font-size:1.02rem;color:var(--sea)}
.timeline dd{margin:0;max-width:64ch}
@media (max-width:430px){
  .timeline > div{grid-template-columns:1fr;gap:var(--s1)}
}

/* --- pull quote from the log ----------------------------------------------- */
.quote{
  margin:var(--s6) 0 0;padding:var(--s4) 0;max-width:58ch;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.quote p{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.14rem,1rem + 1vw,1.6rem);line-height:1.28;
  color:var(--ink);margin-bottom:var(--s3);
}
.quote cite{font-family:var(--data);font-style:normal;font-size:var(--t-sm);color:var(--ink-soft)}

/* --- sketch chart ---------------------------------------------------------- */
.chart{margin:0;padding:var(--s3);background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.chart svg{display:block;width:100%;height:auto}
.chart figcaption{margin-top:var(--s3);font-size:var(--t-sm);color:var(--ink-soft);max-width:62ch}

/* --- hours ----------------------------------------------------------------- */
.hours{margin:0 0 var(--s5);border-top:1px solid var(--line);max-width:32rem}
.hours > div{
  display:flex;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.hours dt{font-weight:600}
.hours dd{margin:0;font-family:var(--data);font-size:var(--t-sm);color:var(--ink-soft)}
.hours .closed dd{color:var(--ink-soft)}

/* --- watch record (twelve marks, one per month) ---------------------------- */
.watch{margin:0 0 var(--s2);display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.watch span{display:block;height:26px;border-radius:var(--r);border:1px solid transparent}
.watch .is-done{background:var(--sea)}
.watch .is-due{background:var(--paper);border-color:var(--ink)}
.watch-labels{
  display:grid;grid-template-columns:repeat(12,1fr);gap:4px;
  font-family:var(--data);font-size:.62rem;color:var(--ink-soft);text-align:center;
}
@media (max-width:430px){.watch span{height:20px}}

/* --- FAQ (native details) -------------------------------------------------- */
.faq{border-top:1px solid var(--line);max-width:74ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;justify-content:space-between;gap:var(--s4);
  cursor:pointer;padding:var(--s4) 0;
  font-family:var(--display);font-weight:700;font-size:1.13rem;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--data);color:var(--signal)}
.faq details[open] summary::after{content:"\2013"}
.faq__a{padding:0 0 var(--s4);color:var(--ink-soft);max-width:64ch}

/* --- contact --------------------------------------------------------------- */
.contact{display:grid;gap:var(--s6)}
@media (min-width:820px){.contact{grid-template-columns:1.05fr .95fr}}
.plist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.plist li{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.plist .k{display:block;font-size:var(--t-sm);color:var(--ink-soft)}
.plist a{font-family:var(--data);font-size:var(--t-sm)}
.plist .v{font-family:var(--data);font-size:var(--t-sm)}

/* --- acknowledgement of Country -------------------------------------------- */
.ack{background:var(--sea);color:#dfe9e6;padding-block:clamp(1.8rem,1rem + 2.6vw,3rem)}
.ack .wrap{display:grid;gap:var(--s4)}
@media (min-width:820px){.ack .wrap{grid-template-columns:.5fr 1.6fr}}
.ack__label{font-family:var(--display);font-weight:700;font-size:1.24rem;color:#fff;margin:0}
.ack p{margin:0;max-width:78ch}
.ack a{color:var(--lamp-bright)}

/* --- footer ---------------------------------------------------------------- */
.foot{background:var(--sea-2);color:#c3d3d2;padding-block:clamp(1.8rem,1rem + 2.6vw,3rem);font-size:var(--t-sm)}
.foot__grid{display:grid;gap:var(--s6)}
@media (min-width:780px){.foot__grid{grid-template-columns:1.5fr 1fr 1fr}}
.foot h2{font-size:1.02rem;color:#fff;margin-bottom:var(--s3)}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s2)}
.foot a{color:#e9f0ee;text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{color:#fff;border-bottom-color:var(--line-dark)}
.foot__name{font-family:var(--display);font-weight:700;font-size:1.16rem;color:#fff;margin-bottom:var(--s2)}
.foot__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s5);
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line-dark);
}

/* --- small screens (holds from 360px up) ----------------------------------- */
@media (max-width:660px){
  :root{--gut:1rem}
  .masthead__inner{padding-block:var(--s3);gap:var(--s2) var(--s3)}
  .brand > svg{width:30px;height:30px}
  .brand__name{font-size:1.06rem}
  .brand__name span{font-size:.68rem}
  .nav{margin-left:0;gap:var(--s1) var(--s3)}
  .nav a{font-size:.84rem;padding:.22rem 0}
  .nav .btn{padding:.42rem .8rem;font-size:.88rem}
  .panel{padding:var(--s4) var(--s5)}
  .hero h1{max-width:18ch}
  .record > li{padding:var(--s5) 0}
  .foot__legal{gap:var(--s2) var(--s4)}
}

/* --- motion discipline ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .beacon__bar--lit{animation:none}
  *{transition-duration:.001ms !important}
}
@media (prefers-reduced-motion:no-preference){
  a,.btn,.nav a,.foot a{transition:background-color .12s linear,color .12s linear,border-color .12s linear}
}