/* Cape Solander Lighthouse Society
   One spacing scale (4px), one border style (1px rules), no radii, no shadows,
   no gradients. Accent is a single colour with one job: the light. */

:root{
  --paper:#f2eee5;
  --paper-2:#e7e1d3;
  --ink:#16272b;
  --ink-2:#3d5257;
  --sea:#12414b;
  --sea-ink:#e9e4d8;
  --accent:#a83b26;
  --rule:rgba(22,39,43,.16);
  --rule-strong:rgba(22,39,43,.34);

  --font-display:"Spectral",Georgia,"Times New Roman",serif;
  --font-text:"Commissioner","Helvetica Neue",Arial,sans-serif;
  --font-data:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-1:.8125rem;
  --fs-2:.9375rem;
  --fs-3:1.0625rem;
  --fs-4:1.375rem;
  --fs-5:2.125rem;
  --fs-hero:clamp(2.25rem,6vw,4.25rem);

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;

  --w:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:80px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:var(--fs-3);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}

.wrap{width:min(100% - 2rem,var(--w));margin-inline:auto}

/* ---------------------------------------------------------- links + focus */

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.band--sea :focus-visible,.foot :focus-visible{outline-color:#f4f1e8}

::selection{background:var(--accent);color:var(--paper)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--ink);color:var(--paper);text-decoration:none;
  padding:var(--s3) var(--s4);font-size:var(--fs-2);
}
.skip:focus{left:var(--s4);top:var(--s4)}

/* ------------------------------------------------------------- masthead */

.masthead{
  position:sticky;top:0;z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--rule-strong);
}
.masthead__in{
  display:flex;align-items:center;gap:var(--s6);
  min-height:64px;padding-block:var(--s3);
}
.wordmark{
  font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
  line-height:1.15;color:var(--ink);text-decoration:none;max-width:16ch;
}
.wordmark:hover{color:var(--accent)}

.nav{margin-inline-start:auto}
.nav ul{display:flex;gap:var(--s6);list-style:none;margin:0;padding:0}
.nav a{
  font-size:var(--fs-2);color:var(--ink-2);text-decoration:none;
  transition:color .15s ease;
}
.nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* --------------------------------------------------------------- buttons */

.btn{
  display:inline-block;background:var(--accent);color:var(--paper);
  font-size:var(--fs-2);font-weight:500;line-height:1.2;
  padding:var(--s3) var(--s5);text-decoration:none;
  transition:background-color .15s ease,color .15s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--sm{padding:var(--s2) var(--s4);font-size:var(--fs-1)}
.btn--bare{background:transparent;color:var(--ink);border:1px solid var(--rule-strong)}
.btn--bare:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ------------------------------------------------------------------ type */

h1,h2,h3{
  font-family:var(--font-display);font-weight:600;
  letter-spacing:-.012em;margin:0;
}
h1{font-size:var(--fs-hero);line-height:1.04;max-width:20ch;letter-spacing:-.018em}
h2{font-size:var(--fs-5);line-height:1.1;margin-bottom:var(--s5);max-width:24ch}
h3{font-size:var(--fs-4);line-height:1.25;margin-bottom:var(--s3)}

.lede{font-size:var(--fs-3);line-height:1.62;color:var(--ink-2);max-width:62ch;margin:0 0 var(--s6)}
p{margin:0 0 var(--s4)}
p,li,dd,address,figcaption{overflow-wrap:anywhere}
.data{font-family:var(--font-data);font-size:.94em;letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ hero */

.hero{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,64px);align-items:start;
  padding-block:clamp(40px,6vw,80px) clamp(48px,7vw,96px);
}
.hero__text h1{margin-bottom:var(--s6)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0 0 var(--s5)}
.chip{
  display:inline-block;font-size:var(--fs-1);color:var(--ink-2);line-height:1.4;
  border:1px solid var(--rule-strong);padding:var(--s2) var(--s4);max-width:38ch;
}

/* --------------------------------------------------- the section drawing */

.plate{margin:0}
.plate__svg{display:block;width:100%;max-width:460px;height:auto}
.plate figcaption{
  font-size:var(--fs-2);line-height:1.55;color:var(--ink-2);
  max-width:44ch;margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--rule);
}

.e-ground{stroke:var(--ink);stroke-width:1.6;fill:none}
.e-wall{stroke:var(--ink);stroke-width:1.1}
.e-solid{fill:none;stroke:var(--ink);stroke-width:1.1}
.e-detail{stroke:var(--ink);stroke-width:.7;fill:none}
.e-hatchbox{stroke:none}
.e-cut{fill:var(--paper);stroke:var(--ink);stroke-width:1.1}
.e-accent{fill:none;stroke:var(--accent);stroke-width:1.5}
.h-line{stroke:var(--ink);stroke-width:.75;opacity:.7}

.e-leader line,.e-leader circle{stroke:var(--ink);stroke-width:.75;fill:var(--ink);opacity:.85}
.e-label text,text.e-label{
  font-family:var(--font-text);font-size:11px;
  fill:var(--ink);letter-spacing:.025em;
}
.e-label--end{text-anchor:end}

/* ----------------------------------------------------------------- bands */

.band{padding-block:clamp(48px,7vw,96px)}
.band--bone{background:var(--paper-2)}
.band--sea{background:var(--sea);color:var(--sea-ink)}
.band--sea h2{color:var(--sea-ink)}
.band--sea p{max-width:64ch;margin-bottom:var(--s4)}
.band--sea p:last-child{margin-bottom:0}

/* ------------------------------------------------------- the record (dl) */

.spec{
  display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);
  gap:0 var(--s8);margin:var(--s8) 0 0;
  border-top:1px solid var(--rule-strong);
}
.spec dt{
  padding-block:var(--s4);border-bottom:1px solid var(--rule);
  font-size:var(--fs-1);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
}
.spec dd{
  margin:0;padding-block:var(--s4);border-bottom:1px solid var(--rule);
  line-height:1.55;max-width:66ch;
}

.note{margin-top:var(--s16);padding-top:var(--s6);border-top:1px solid var(--ink)}
.note--plain{border-top-color:var(--rule-strong)}
.note p{color:var(--ink-2);max-width:68ch;margin:0}

/* -------------------------------------------------- the light character */

.flashfig{
  margin:var(--s12) 0 0;padding-top:var(--s6);
  border-top:1px solid var(--ink);max-width:760px;
}
.flashbar{position:relative;height:26px;background:var(--ink)}
.fb-lit{position:absolute;top:0;bottom:0}
.fb-lit--white{left:0;width:45%;background:#f4f1e8;animation:lit .5s ease-out both}
.fb-lit--red{left:50%;width:45%;background:var(--accent);animation:lit .5s ease-out .6s both}
@keyframes lit{from{opacity:.14}to{opacity:1}}

.flashscale{
  display:flex;justify-content:space-between;
  font-family:var(--font-data);font-size:var(--fs-1);color:var(--ink-2);
  padding-top:var(--s2);
}
.flashfig figcaption{
  font-size:var(--fs-2);line-height:1.6;color:var(--ink-2);
  margin-top:var(--s5);max-width:68ch;
}

/* --------------------------------------------------------------- ledger */

.ledger{
  display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);
  gap:0 var(--s8);margin:var(--s8) 0 0;
  border-top:1px solid var(--rule-strong);
}
.ledger dt{
  font-family:var(--font-display);font-size:var(--fs-4);font-weight:500;
  padding-block:var(--s6);border-bottom:1px solid var(--rule);
}
.ledger dd{
  margin:0;padding-block:var(--s6);border-bottom:1px solid var(--rule);
  color:var(--ink-2);line-height:1.62;max-width:66ch;
}

/* ---------------------------------------------------------------- tours */

.tours{margin-top:var(--s8);border-top:1px solid var(--rule-strong)}
.tour{
  display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,150px);
  gap:var(--s6);align-items:baseline;
  padding-block:var(--s6);border-bottom:1px solid var(--rule);
}
.tour-when{
  display:flex;flex-direction:column;gap:var(--s1);
  margin:0;font-family:var(--font-data);font-size:var(--fs-2);color:var(--ink-2);
}
.tour-body h3{margin-bottom:var(--s2)}
.tour-body p{margin:0;font-size:var(--fs-2);line-height:1.6;color:var(--ink-2);max-width:58ch}
.tour-price{
  margin:0;text-align:right;font-family:var(--font-data);
  font-size:var(--fs-2);line-height:1.5;color:var(--ink);
}

.rules{margin-top:var(--s8);max-width:74ch}
.rules p{font-size:var(--fs-2);line-height:1.65;color:var(--ink-2);margin-bottom:var(--s4)}
.rules strong{color:var(--ink);font-weight:600}
.rules p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- museum */

.objects{
  list-style:none;padding:0;margin:var(--s6) 0;
  max-width:74ch;border-top:1px solid var(--rule-strong);
}
.objects li{
  padding-block:var(--s4);border-bottom:1px solid var(--rule);
  color:var(--ink-2);line-height:1.6;
}

/* ------------------------------------------------------------- visiting */

.two-col{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(24px,4vw,56px);margin-top:var(--s8);
}
.two-col h3:not(:first-child){margin-top:var(--s8)}
.two-col > *{min-width:0}
.foot__in > *{min-width:0}
.two-col p{color:var(--ink-2)}

.linklist{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s8);margin:var(--s8) 0 var(--s5)}
.linklist a{font-size:var(--fs-2);font-weight:500}

.fineprint{
  font-size:var(--fs-2);color:var(--ink-2);
  border-top:1px solid var(--rule);padding-top:var(--s4);max-width:74ch;
}

/* --------------------------------------------------------- volunteering */

.money{
  list-style:none;padding:0;margin:var(--s5) 0 var(--s6);
  max-width:58ch;border-top:1px solid var(--rule-strong);
}
.money li{
  display:flex;gap:var(--s5);padding-block:var(--s3);
  border-bottom:1px solid var(--rule);
  font-size:var(--fs-2);line-height:1.55;color:var(--ink-2);
}
.money .data{flex:0 0 76px;color:var(--ink);font-weight:500}
.money--roles li{display:block;padding-block:var(--s4)}

/* --------------------------------------------------------------- footer */

.foot{
  background:var(--sea);color:var(--sea-ink);
  padding-block:clamp(40px,6vw,72px);
}
.foot__in{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:clamp(24px,4vw,56px);
}
.foot__mark{
  font-family:var(--font-display);font-size:var(--fs-4);font-weight:600;
  max-width:15ch;margin-bottom:var(--s4);
}
.foot h3{color:var(--sea-ink);margin-bottom:var(--s4)}
.foot address{font-style:normal;font-size:var(--fs-2);line-height:1.7;margin-bottom:var(--s3)}
.foot p{font-size:var(--fs-2);line-height:1.6;max-width:52ch}
.foot a{color:var(--sea-ink)}
.foot a:hover{color:#ffffff}
.foot__links{list-style:none;padding:0;margin:0}
.foot__links li{margin-bottom:var(--s3)}
.foot__links a{font-size:var(--fs-2)}

.foot__base{
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  border-top:1px solid rgba(233,228,216,.3);
  margin-top:clamp(32px,5vw,56px);padding-top:var(--s6);
}
.foot__base p{margin:0;max-width:70ch}

/* ------------------------------------------------------------ responsive */

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:var(--s12)}
}

@media (max-width:760px){
  .masthead__in{flex-wrap:wrap;gap:var(--s3);min-height:0}
  .wordmark{flex:1 1 auto}
  .btn--sm{order:2}
  .nav{order:3;flex:1 1 100%;margin-inline-start:0}
  .nav ul{flex-wrap:wrap;gap:var(--s3) var(--s5)}
  .nav a{white-space:nowrap}
}

@media (max-width:640px){
  .spec,.ledger{grid-template-columns:1fr}
  .spec dt,.ledger dt{border-bottom:0;padding-bottom:0}
  .spec dd,.ledger dd{padding-top:var(--s2)}
  .tour{grid-template-columns:1fr;gap:var(--s3)}
  .tour-price{text-align:left}
  .two-col{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr}
  .linklist{flex-direction:column;gap:var(--s3)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
}