/* ==========================================================================
   THE LIGHTHOUSE SOCIETY — site styles
   ==========================================================================
   The theme is "a dark coast with lamps in it". The page ground is night;
   every readable surface is somewhere a lamp is shining. One warm accent
   (lamplight), one cold accent (the beam), red reserved for deadlines.

   Everything visual comes from the token block below. The lighthouse layer
   at the bottom of this file adds the lamps, the switch and the bench stage.
   ========================================================================== */

:root{
  /* ground — "parch" is the page: here it is night, not paper */
  --parch:#0e1015;        /* the page */
  --parch-2:#141821;      /* tinted band / cards */
  --parch-3:#1c2029;      /* card hover, placeholders */
  --ink:#07080b;          /* the deepest bands: hero, banners, footer */
  --ink-2:#040507;
  --ink-3:#010203;

  /* text */
  --txt:#eae6dc;          /* body on the page            15.3:1 */
  --txt-2:#b3ada0;        /* secondary                    8.5:1 */
  --txt-3:#8e887c;        /* meta                         5.4:1 */
  --on-ink:#f0ece2;       /* body on the deepest ink     17.0:1 */
  --on-ink-2:rgba(240,236,226,.74);
  --on-ink-3:rgba(240,236,226,.60);

  /* lamplight — the accent. Three values so small type never fails. */
  --gold:#e6b455;         /* decorative: rules, the full stop, buttons */
  --gold-ink:#e8bc66;     /* lamplight as small text on the page 10.7:1 */
  --gold-lit:#eec277;     /* lamplight as small text on ink      12.0:1 */
  --glow:255,196,109;     /* the light itself, as an rgb triple */
  --beam:214,226,238;     /* the lighthouse beam, cold white */

  --red:#ef8a70;          /* deadlines on the page        7.7:1 */
  --red-lit:#f09b84;      /* deadlines on ink             9.3:1 */
  --sage:#7fa894;

  /* lines */
  --hair:rgba(234,230,220,.17);
  --hair-2:rgba(234,230,220,.10);
  --hair-ink:rgba(240,236,226,.16);

  /* type */
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* motion — custom curves; the CSS built-ins are too weak */
  --out:cubic-bezier(.23,1,.32,1);
  --inout:cubic-bezier(.77,0,.175,1);
  --drawer:cubic-bezier(.32,.72,0,1);

  --pad:clamp(1.25rem,5vw,4rem);
  --maxw:1180px;
  --head:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 1rem)}
body{
  margin:0;background:var(--parch);color:var(--txt);
  font-family:var(--body);font-size:clamp(1rem,.3vw + .95rem,1.0625rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--ink-2)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--on-ink);padding:.7rem 1.1rem;font-family:var(--mono);font-size:.8rem}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ------------------------------------------------------------ typography */
h1,h2,h3,h4{
  margin:0;font-family:var(--display);font-weight:600;line-height:1.05;
  letter-spacing:-.015em;text-wrap:balance;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 96;
}
p{margin:0}

.h1{font-size:clamp(2.75rem,8vw,6rem);line-height:.95;letter-spacing:-.03em}
.h2{font-size:clamp(1.9rem,4vw,3.1rem);letter-spacing:-.022em}
.h3{font-size:clamp(1.25rem,1.9vw,1.6rem);letter-spacing:-.012em}

.eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--txt-3);margin:0;
}
.eyebrow.gold{color:var(--gold-ink)}
.banner .eyebrow.gold,.foot .eyebrow.gold{color:var(--gold-lit)}

.lead{font-size:clamp(1.05rem,.7vw + .9rem,1.3125rem);line-height:1.55;color:var(--txt-2);max-width:56ch}
.serif-it{font-style:italic}

/* ------------------------------------------------------------ layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(3.5rem,7vw,6.5rem);position:relative}
.sec.tint{background:var(--parch-2)}
.sec.dark{background:var(--ink);color:var(--on-ink)}
.sec.dark .eyebrow{color:var(--gold-lit)}
.sec.dark .lead{color:var(--on-ink-2)}
.sec + .sec:not(.tint):not(.dark){border-top:1px solid var(--hair-2)}

.sec-head{
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:flex-end;justify-content:space-between;
  padding-bottom:1.1rem;border-bottom:1px solid var(--hair);margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.sec.dark .sec-head{border-bottom-color:var(--hair-ink)}
.sec-head-txt{max-width:58ch;display:flex;flex-direction:column;gap:.5rem}
.sec-head .lead{margin-top:.15rem}

.rule{display:flex;align-items:center;gap:.75rem;margin-block:clamp(2rem,4vw,3rem)}
.rule span{flex:1;height:1px;background:var(--hair)}
.rule i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}

/* ------------------------------------------------------------ links & buttons */
.lnk{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-ink);display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  padding-bottom:3px;position:relative;
}
.lnk::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.35;
  transform-origin:left;transition:opacity 180ms ease,transform 260ms var(--out);
}
@media (hover:hover) and (pointer:fine){.lnk:hover::after{opacity:1}}
.sec.dark .lnk,.banner .lnk{color:var(--gold-lit)}
.lnk span{transition:transform 260ms var(--out)}
.lnk:hover span{transform:translateX(4px)}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;border:1px solid var(--txt);
  background:var(--txt);color:var(--ink-2);
  font-family:var(--mono);font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:.85rem 1.4rem;
  transition:transform 140ms var(--out),background-color 160ms ease,color 160ms ease,border-color 160ms ease;
}
.btn:active{transform:scale(.972)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink-2)}
.btn-line{background:transparent;color:var(--txt);border-color:var(--hair)}
.banner .btn-line,.sec.dark .btn-line,.hero .btn-line{color:var(--on-ink);border-color:rgba(244,236,218,.34)}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{background:#d8b03a;border-color:#d8b03a}
  .btn-line:hover{border-color:currentColor}
  .btn:not(.btn-gold):not(.btn-line):hover{background:var(--ink);border-color:var(--ink)}
}

/* ------------------------------------------------------------ header */
.head{
  position:sticky;top:0;z-index:40;background:var(--parch);
  border-bottom:1px solid transparent;
  transition:border-color 200ms ease,background-color 200ms ease;
}
.head.stuck{border-bottom-color:var(--hair);background:color-mix(in srgb,var(--parch) 92%,transparent);backdrop-filter:blur(10px)}
.head-in{
  max-width:var(--maxw);margin-inline:auto;padding:.7rem var(--pad);
  min-height:var(--head);display:flex;align-items:center;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.brand-crest{width:52px;height:auto;transition:transform 320ms var(--out)}
@media (hover:hover) and (pointer:fine){.brand:hover .brand-crest{transform:scale(1.06) rotate(-1.5deg)}}
.brand-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.brand-name{font-family:var(--display);font-size:.9375rem;font-weight:600;letter-spacing:.005em;line-height:1.1}
.brand-motto{font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;color:var(--txt-3);white-space:nowrap}

.nav{display:none;gap:1.45rem;margin-inline:auto}
@media (min-width:1080px){.nav{display:flex}}
.nav a{
  position:relative;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--txt-2);padding-block:.35rem;
  transition:color 160ms ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--out);
}
.nav a:hover{color:var(--txt)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--txt)}
.ct{
  font-family:var(--mono);font-size:.5625rem;font-weight:600;color:var(--ink-2);background:var(--red);
  padding:.05rem .28rem;margin-left:.3rem;vertical-align:super;letter-spacing:0;
}

.head-end{display:flex;align-items:center;gap:.5rem;margin-left:auto}
@media (min-width:1080px){.head-end{margin-left:0}}
.lang{
  font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  padding:.45rem .6rem;border:1px solid var(--hair);color:var(--txt-2);
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease;
}
@media (hover:hover) and (pointer:fine){.lang:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}}

.burger{width:40px;height:40px;display:grid;place-content:center;gap:6px;background:none;border:0;padding:0;cursor:pointer}
@media (min-width:1080px){.burger{display:none}}
.burger span{display:block;width:20px;height:1.5px;background:var(--txt);transition:transform 240ms var(--out),opacity 160ms ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* drawer: enter unhurried, exit quick */
.drawer{
  position:fixed;inset:var(--head) 0 0;z-index:39;background:var(--ink);color:var(--on-ink);
  display:flex;flex-direction:column;justify-content:center;gap:.25rem;
  padding:2rem var(--pad) 4rem;
  transform:translateY(-8px);opacity:0;
  transition:transform 200ms var(--out),opacity 140ms ease;
}
.drawer[hidden]{display:none}
.drawer.in{transform:none;opacity:1;transition:transform 320ms var(--drawer),opacity 200ms ease}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  font-family:var(--display);font-size:clamp(1.7rem,7vw,2.4rem);font-weight:500;
  padding-block:.34em;border-bottom:1px solid var(--hair-ink);
  opacity:0;transform:translateY(10px);
}
.drawer.in nav a{animation:drawerIn 380ms var(--out) forwards;animation-delay:calc(var(--i) * 45ms)}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer-lang{
  margin-top:1.75rem;font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-lit);
}
body.locked{overflow:hidden}

/* ------------------------------------------------------------ hero */
.hero{
  background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden;
  padding-block:clamp(3.5rem,9vw,7rem) clamp(3.5rem,8vw,6rem);
  /* faint dotted grid — paper, not gradient */
  background-image:radial-gradient(rgba(244,236,218,.055) 1px,transparent 1px);
  background-size:26px 26px;
}
.hero-in{position:relative;z-index:1;max-width:min(100%,46rem)}
.hero-crest{
  position:absolute;top:50%;right:calc(var(--pad) - 2rem);width:min(46vw,540px);
  translate:0 -50%;opacity:.11;pointer-events:none;user-select:none;
  will-change:transform;
}
@media (max-width:900px){.hero-crest{width:78vw;right:-14vw;opacity:.07}}

.hero .eyebrow{color:var(--gold-lit)}
.hero-title{margin:1.1rem 0 0;font-size:clamp(3rem,11vw,7rem);line-height:.92;letter-spacing:-.035em;color:var(--on-ink)}
.hero-title .ln{display:block;overflow:hidden;
  /* the mask clips vertically; the padding keeps it off the glyph's right edge */
  padding-right:.14em;margin-right:-.14em}
.hero-title .ln > span{display:block}
.hero-title .dot{color:var(--gold)}
.hero-lead{max-width:44ch;margin-top:1.5rem;font-size:clamp(1.05rem,.8vw + .9rem,1.375rem);line-height:1.5;font-style:italic;color:var(--on-ink-2)}
.hero-alt{margin-top:.85rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--on-ink-3)}

.pillars{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;margin-top:2.25rem}
.pillars b{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem .8rem;border:1px solid var(--hair-ink);color:var(--on-ink);
}
.pillars b:first-child{background:var(--gold);border-color:var(--gold);color:var(--ink-2)}
.pillars b:nth-child(2){margin-left:1.5rem;border-color:rgba(224,139,120,.5);color:var(--red-lit)}
.pillars b:nth-child(3){margin-left:.6rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.5rem}

/* one orchestrated page-load sequence, once */
.js .stg{opacity:0;transform:translateY(10px)}
.js .stg.go{opacity:1;transform:none;transition:opacity 460ms ease-out,transform 560ms var(--out);transition-delay:calc(var(--s,0) * 70ms)}
.js .hero-title .ln > span{transform:translateY(100%)}
.js .hero-title.go .ln > span{transform:none;transition:transform 720ms var(--out);transition-delay:calc(var(--l) * 90ms + 90ms)}

/* ------------------------------------------------------------ banner (inner pages) */
.banner{
  background:var(--ink);color:var(--on-ink);
  padding-block:clamp(2.25rem,5vw,3.5rem) clamp(2.5rem,5vw,4rem);
  background-image:radial-gradient(rgba(244,236,218,.05) 1px,transparent 1px);background-size:26px 26px;
}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--on-ink-3);margin-bottom:1.35rem}
.crumbs a{transition:color 160ms ease}
.crumbs a:hover{color:var(--gold-lit)}
.crumbs i{font-style:normal;opacity:.5}
.banner-h{margin-top:.85rem;font-size:clamp(2.1rem,6vw,4rem);letter-spacing:-.028em;color:var(--on-ink)}
.banner-lead{margin-top:1.1rem;font-size:clamp(1.02rem,.6vw + .9rem,1.25rem);line-height:1.55;color:var(--on-ink-2);max-width:58ch}
.banner-meta{margin-top:1.1rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;color:var(--gold-lit)}

.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.85rem}
.tabs a{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:.5rem .9rem;border:1px solid var(--hair-ink);color:var(--on-ink-2);
  transition:color 160ms ease,border-color 160ms ease,background-color 160ms ease;
}
.tabs a:hover{color:var(--on-ink);border-color:var(--on-ink-3)}
.tabs a.on{background:var(--gold);border-color:var(--gold);color:var(--ink-2)}

/* ------------------------------------------------------------ cards */
.grid{display:grid;gap:1.25rem}
@media (min-width:640px){.grid.c2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid.c3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:640px) and (max-width:899px){.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid.c4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:600px) and (max-width:999px){.grid.c4{grid-template-columns:repeat(2,1fr)}}

.card{
  position:relative;background:var(--parch);padding:1.15rem 1.25rem 1.4rem;
  border:1px solid var(--hair-2);
  display:flex;flex-direction:column;gap:.9rem;isolation:isolate;
  transition:background-color 200ms ease,border-color 200ms ease;
}
.sec.tint .card{background:var(--parch-2)}
.card::before{ /* the gold rule that draws in on hover */
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--out);z-index:2;
}
.card-hit{position:absolute;inset:0;z-index:3}
@media (hover:hover) and (pointer:fine){
  .card:hover::before{transform:scaleX(1)}
  .card:hover{background:var(--parch-2);border-color:var(--hair)}
  .sec.tint .card:hover{background:var(--parch-3)}
  .card:hover .card-img img{transform:scale(1.035)}
  .card:hover .card-h{background-size:100% 1px}
  .card:hover .stamp{transform:rotate(0)}
}
.card-top{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;min-height:1.5rem}
.card-img{overflow:hidden;background:var(--parch-3);aspect-ratio:16/10}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 620ms var(--out)}
.card-img-none{display:grid;place-items:center}
.card-img-none[data-h="0"]{background:#e0d4b4}
.card-img-none[data-h="1"]{background:#dcd6bd}
.card-img-none[data-h="2"]{background:#e4d8b6}
.card-img-none{background-image:radial-gradient(rgba(28,23,16,.06) 1px,transparent 1px);background-size:14px 14px}
.ghost-glyph{width:46%;max-width:110px;height:auto;color:rgba(22,51,42,.26)}
.card-body{display:flex;flex-direction:column;gap:.45rem}
.card-h{
  font-family:var(--display);font-size:1.1875rem;font-weight:600;line-height:1.18;letter-spacing:-.012em;
  background:linear-gradient(var(--txt),var(--txt)) left 95%/0 1px no-repeat;
  transition:background-size 300ms var(--out);
}
.card-place{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:var(--txt-3)}
.card-when{font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3)}
.card-sum{font-size:.9375rem;line-height:1.5;color:var(--txt-2)}
.card-read{font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3);margin-top:.1rem}
.card-left{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.06em;color:var(--red)}
.card.is-closed{opacity:.62}
.card.is-closed:hover{opacity:.82}
.card.is-closed .card-img img{filter:grayscale(1)}

.pill{font-family:var(--mono);font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.22rem .5rem}
.pill-open{background:var(--ink);color:var(--gold-lit)}
.pill-closed{background:transparent;color:var(--txt-3);border:1px solid var(--hair)}
.tag{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3);border:1px solid var(--hair);padding:.22rem .5rem}

/* the deadline stamp — the one place red is allowed */
.stamp{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;color:var(--red);
  border:1px solid currentColor;padding:.2rem .45rem;transform:rotate(-1.4deg);
  transition:transform 220ms var(--out);white-space:nowrap;
}
.stamp b{font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.stamp-off{color:var(--txt-3);transform:rotate(-1deg)}

.empty{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;
  padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;border:1px solid var(--hair);
}
.empty-glyph{width:44px;height:44px;color:var(--gold)}
.empty p{max-width:46ch;color:var(--txt-2)}

/* ------------------------------------------------------------ value panels */
.quarters{display:grid;gap:1px}
@media (min-width:560px){.quarters{grid-template-columns:1fr 1fr}}
.q{background:var(--parch);padding:clamp(1.3rem,2.5vw,1.9rem);display:flex;flex-direction:column;gap:.65rem;
   box-shadow:0 0 0 1px var(--hair-2)}
.quarters-dark .q{background:var(--ink-2);box-shadow:0 0 0 1px var(--hair-ink)}
.quarters-dark .q h3{color:var(--on-ink)}
.quarters-dark .q p{color:var(--on-ink-2)}
.quarters-dark .q-word{color:var(--gold-lit)}
.quarters-dark .glyph{color:var(--gold-lit)}
.sec.tint .q{background:var(--parch-2)}
.q-top{display:flex;align-items:center;gap:.7rem}
.q .glyph{width:26px;height:26px;color:var(--gold-ink);flex:0 0 auto}
.q-word{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.14em;color:var(--txt-3)}
.q h3{font-family:var(--display);font-size:1.125rem;font-weight:600}
.q p{font-size:.9375rem;color:var(--txt-2);line-height:1.55}

/* ------------------------------------------------------------ programmes (accordion) */
.progs{border-top:1px solid var(--hair)}
.prog{border-bottom:1px solid var(--hair)}
.prog-btn{
  width:100%;background:none;border:0;padding:1.35rem 0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1rem 1.35rem;
}
.prog-code{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;color:var(--gold-ink)}
.prog-title{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:600;letter-spacing:-.015em;transition:color 160ms ease}
.prog-sign{position:relative;width:14px;height:14px;flex:0 0 auto;align-self:center}
.prog-sign::before,.prog-sign::after{content:"";position:absolute;background:var(--txt-2);transition:transform 240ms var(--out),opacity 200ms ease}
.prog-sign::before{left:0;right:0;top:6.25px;height:1.5px}
.prog-sign::after{top:0;bottom:0;left:6.25px;width:1.5px}
.prog[open] .prog-sign::after{transform:rotate(90deg);opacity:0}
@media (hover:hover) and (pointer:fine){.prog-btn:hover .prog-title{color:var(--gold-ink)}}
/* 0fr → 1fr is animatable in modern browsers; the fallback is an instant open */
.prog-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 260ms var(--out)}
.prog[open] .prog-body{grid-template-rows:1fr}
.prog-body > div{overflow:hidden}
.prog-body p{
  max-width:62ch;color:var(--txt-2);padding-bottom:1.5rem;
  padding-left:clamp(0px,4vw,4.6rem);
  opacity:0;transition:opacity 200ms ease 60ms;
}
.prog[open] .prog-body p{opacity:1}

/* ------------------------------------------------------------ about / story */
.two{display:grid;gap:clamp(2rem,5vw,4.5rem)}
@media (min-width:900px){.two{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}}
@media (min-width:1080px){.two > .two-side{position:sticky;top:calc(var(--head) + 2rem)}}
.prose-lead{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:500;line-height:1.3;letter-spacing:-.015em;margin-bottom:1.5rem}
.sec.dark .prose-lead{color:var(--on-ink)}

.years{display:flex;flex-direction:column}
.year{display:grid;grid-template-columns:4.5rem 1fr;gap:1.25rem;padding:1.1rem 0;border-top:1px solid var(--hair)}
.year:last-child{border-bottom:1px solid var(--hair)}
.year b{font-family:var(--mono);font-size:.875rem;font-weight:600;letter-spacing:.04em;color:var(--gold-ink)}
.year p{color:var(--txt-2);font-size:.9375rem}

.team{display:grid;gap:1.25rem}
@media (min-width:640px){.team{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.member{background:var(--parch);border:1px solid var(--hair-2);padding:clamp(1.2rem,2.4vw,1.75rem);display:flex;flex-direction:column;gap:.7rem}
.sec.tint .member{background:var(--parch-2)}
.member-ph{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--parch-3)}
.member-ph-none{
  width:72px;height:72px;border-radius:50%;border:1px dashed var(--hair);
  display:grid;place-items:center;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--txt-3);
}
.member h3{font-family:var(--display);font-size:1.0625rem;font-weight:600}
.member-role{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-ink)}
.member p{font-size:.9375rem;color:var(--txt-2);line-height:1.5}
.member-slot h3{color:var(--txt-3);font-style:italic;font-weight:500}
.team-note{margin-top:1.25rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:var(--txt-3)}

/* ------------------------------------------------------------ detail pages */
.detail{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:960px){.detail{grid-template-columns:minmax(0,1fr) 17.5rem;align-items:start}}
.detail-cover{overflow:hidden;margin-bottom:clamp(1.75rem,3vw,2.5rem);background:var(--parch-3)}
.detail-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}

.prose{max-width:66ch;font-size:1.0625rem;line-height:1.7}
.prose > * + *{margin-top:1.1em}
.prose h3{font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.6rem);font-weight:600;margin-top:2.2em}
.prose h4{font-family:var(--display);font-size:1.1875rem;font-weight:600;margin-top:1.9em}
.prose h3:first-child,.prose h4:first-child{margin-top:0}
.prose a{color:var(--txt);background:linear-gradient(var(--gold),var(--gold)) left 92%/100% 1.5px no-repeat;padding-bottom:1px;transition:background-size 200ms ease}
.prose a:hover{background-size:100% 3px}
.prose ul,.prose ol{padding-left:1.35em;margin-top:1.1em}
.prose li + li{margin-top:.45em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:1.5em}
.prose ul li::before{content:"";position:absolute;left:.2em;top:.62em;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.prose blockquote{
  margin-block:1.8em;padding:0 0 0 1.5rem;border-left:2px solid var(--gold);
  font-family:var(--display);font-size:1.1875rem;font-style:italic;font-weight:500;color:var(--txt);
}
.prose blockquote > * + *{margin-top:.6em}
.prose code{font-family:var(--mono);font-size:.875em;background:var(--parch-2);padding:.1em .35em}
.prose .md-figure{margin-block:2em}
.prose .md-hr{border:0;height:0;width:80px;border-top:1px solid var(--hair);margin:2.5em 0}
.prose img{width:100%}

.facts{border-top:2px solid var(--txt);padding-top:1.1rem;display:flex;flex-direction:column;gap:1.1rem}
@media (min-width:960px){.facts{position:sticky;top:calc(var(--head) + 1.5rem)}}
.fact{display:flex;flex-direction:column;gap:.2rem}
.fact dt{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3)}
.fact dd{margin:0;font-size:.9375rem;font-weight:500}
.facts ul{margin:0;padding-left:1.1em;font-size:.9375rem;color:var(--txt-2)}
.facts ul li + li{margin-top:.3em}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
.reslist{display:flex;flex-direction:column;gap:.4rem;margin-top:.2rem}
.reslist a{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--gold-ink);
  display:flex;gap:.5rem;padding:.5rem .65rem;border:1px solid var(--hair);
  transition:border-color 160ms ease,transform 200ms var(--out);
}
.reslist a:hover{border-color:var(--gold);transform:translateX(3px)}

/* the deadline block on a call page */
.deadline-box{border:1px solid var(--red);padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.35rem}
.deadline-box.off{border-color:var(--hair)}
.deadline-box dt{font-family:var(--mono);font-size:.625rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--red)}
.deadline-box.off dt{color:var(--txt-3)}
.deadline-box dd{margin:0;font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
.deadline-box small{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--red)}
.deadline-box.off small{color:var(--txt-3)}

.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;margin-top:1.1rem}
.gal a{overflow:hidden;background:var(--parch-3);display:block}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform 500ms var(--out)}
@media (hover:hover) and (pointer:fine){.gal a:hover img{transform:scale(1.05)}}

.detail-foot{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:clamp(2rem,4vw,3rem);padding-top:1.35rem;border-top:1px solid var(--hair)}
.share{
  cursor:pointer;background:none;border:1px solid var(--hair);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.6rem 1rem;transition:transform 140ms var(--out),border-color 160ms ease;
}
.share:active{transform:scale(.972)}
.share:hover{border-color:var(--txt)}

/* reading progress — scroll-linked, not autonomous */
.prog-bar{position:fixed;left:0;top:0;height:2px;background:var(--gold);width:0;z-index:50;transform-origin:left}

/* lightbox */
.lb{position:fixed;inset:0;z-index:60;background:rgba(10,27,22,.94);display:grid;place-items:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity 200ms ease}
.lb.in{opacity:1;pointer-events:auto}
.lb img{max-width:min(94vw,1100px);max-height:88vh}
.lb button{position:absolute;top:1.25rem;right:1.25rem;width:42px;height:42px;background:none;border:1px solid var(--hair-ink);color:var(--on-ink);font-size:1.2rem;cursor:pointer}

/* ------------------------------------------------------------ contact */
.contact{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.field input,.field textarea{
  width:100%;padding:.8rem .9rem;border:1px solid var(--hair);background:var(--parch);
  font:inherit;font-size:.9375rem;color:var(--txt);border-radius:0;
  transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease;
}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--txt);background:#f7f0de;box-shadow:0 0 0 3px rgba(201,162,39,.22)}
.field textarea{min-height:9.5rem;resize:vertical;line-height:1.6}
.frow{display:grid;gap:1.1rem}
@media (min-width:560px){.frow{grid-template-columns:1fr 1fr}}
.hp{position:absolute!important;left:-9999px!important}
.note{padding:.85rem 1.05rem;margin-bottom:1.35rem;font-size:.9375rem;display:flex;gap:.65rem;border:1px solid}
.note.ok{border-color:var(--sage);background:rgba(110,131,120,.12);color:#33473c}
.note.bad{border-color:var(--red);background:rgba(158,51,35,.08);color:var(--red)}
.orgcard{background:var(--ink);color:var(--on-ink);padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;gap:1.1rem}
.orgcard h2{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--on-ink)}
.orgcard dl{margin:0;display:flex;flex-direction:column;gap:.9rem}
.orgcard dt{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-lit)}
.orgcard dd{margin:.15rem 0 0;font-size:.9375rem}
.orgcard a{background:linear-gradient(var(--gold-lit),var(--gold-lit)) left 95%/100% 1px no-repeat}
.copy{
  cursor:pointer;background:none;border:1px solid var(--hair-ink);color:var(--on-ink-2);
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;padding:.15rem .4rem;margin-left:.4rem;
  transition:color 160ms ease,border-color 160ms ease;
}
.copy:hover{color:var(--gold-lit);border-color:var(--gold-lit)}

/* ------------------------------------------------------------ footer */
.foot{background:var(--ink);color:var(--on-ink);padding-top:clamp(3rem,6vw,4.5rem)}
.foot-in{display:grid;gap:2.25rem;padding-bottom:2.5rem}
@media (min-width:760px){.foot-in{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.foot-motto{font-family:var(--display);font-size:1.5rem;font-weight:500;color:var(--gold-lit);letter-spacing:-.01em}
.foot-name{font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;margin-top:.5rem}
.foot-tag{margin-top:.9rem;font-size:.9375rem;line-height:1.55;color:var(--on-ink-2);max-width:38ch}
.foot-col{display:flex;flex-direction:column;gap:.55rem}
.foot-col h2{margin-bottom:.35rem}
.foot-col a{font-size:.9375rem;color:var(--on-ink-2);transition:color 160ms ease,transform 200ms var(--out)}
.foot-col a:hover{color:var(--gold-lit);transform:translateX(2px)}
.foot-place{font-size:.9375rem;color:var(--on-ink-3)}
.foot-eu{display:flex;gap:1rem;align-items:flex-start;padding-block:1.35rem;border-top:1px solid var(--hair-ink)}
.eu{flex:0 0 auto;width:46px}
.eu svg{width:100%;height:auto;display:block}
.foot-eu p{font-size:.75rem;line-height:1.55;color:var(--on-ink-3)}
.foot-end{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;padding-block:1.25rem 2.25rem;border-top:1px solid var(--hair-ink);font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;color:var(--on-ink-3)}
.foot-end a:hover{color:var(--gold-lit)}

/* ------------------------------------------------------------ 404 */
.err{min-height:58vh;display:grid;place-items:center;text-align:center;padding-block:5rem}
.err-num{font-family:var(--display);font-size:clamp(5rem,20vw,12rem);line-height:.85;color:var(--gold);letter-spacing:-.04em}

/* ------------------------------------------------------------ scroll reveal */
.js .r{opacity:0;transform:translateY(12px)}
.js .r.in{opacity:1;transform:none;transition:opacity 520ms ease-out,transform 620ms var(--out);transition-delay:calc(var(--i,0) * 60ms)}
/* images wipe up rather than fade — reads as print being pulled */
.js .r .card-img,.js .detail-cover.r{clip-path:inset(0 0 100% 0)}
.js .r.in .card-img,.js .detail-cover.r.in{clip-path:inset(0 0 0 0);transition:clip-path 700ms var(--out) 60ms}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:1ms!important;animation-delay:0ms!important;
    transition-duration:1ms!important;transition-delay:0ms!important;
  }
  .js .r,.js .stg{opacity:1;transform:none}
  .js .r .card-img,.js .detail-cover.r{clip-path:none}
  .js .hero-title .ln > span{transform:none}
  .hero-crest{transform:none!important}
}

/* ------------------------------------------------------------ print */
@media print{
  .head,.drawer,.foot,.hero-crest,.btn,.tabs,.detail-foot,.prog-bar{display:none!important}
  body{background:#fff;color:#000}
  .banner,.sec.dark{background:#fff!important;color:#000!important}
  .banner-h,.hero-title{color:#000!important}
}

/* ==========================================================================
   ░░ THE LIGHTHOUSE LAYER ░░
   Everything below turns the editorial engine above into a dark coast.
   Three ideas, in order: surfaces that belong to the night, lamps that
   switch on, and one scene you fly into.
   ========================================================================== */

/* ------------------------------------------------------------ night surfaces */
html{background:var(--ink-3)}
body{background:var(--parch)}
::selection{background:rgba(var(--glow),.85);color:#120d04}

/* cards have to lift off a dark page, so they sit one step lighter, not one
   step darker as they do on paper */
.card{background:var(--parch-2);border-color:var(--hair-2)}
.sec.tint .card{background:var(--parch-3)}
.card::before{background:linear-gradient(90deg,transparent,rgba(var(--glow),1),transparent)}
@media (hover:hover) and (pointer:fine){
  .card:hover{background:var(--parch-3);border-color:rgba(var(--glow),.34);
    box-shadow:0 0 0 1px rgba(var(--glow),.12),0 18px 50px -24px rgba(var(--glow),.42)}
  .sec.tint .card:hover{background:#232833}
}
.card-img{background:#0a0c11}
.card-img-none[data-h="0"]{background:#161a23}
.card-img-none[data-h="1"]{background:#12161e}
.card-img-none[data-h="2"]{background:#1a1f28}
.card-img-none{background-image:radial-gradient(rgba(var(--glow),.10) 1px,transparent 1px);background-size:14px 14px}
.ghost-glyph{color:rgba(var(--glow),.30)}
.card-h{background-image:linear-gradient(var(--gold-ink),var(--gold-ink))}
.pill-open{background:rgba(var(--glow),.16);color:var(--gold-lit);box-shadow:inset 0 0 0 1px rgba(var(--glow),.4)}
.member,.q,.quarters-dark .q{background:var(--parch-2);box-shadow:0 0 0 1px var(--hair-2)}
.sec.tint .member,.sec.tint .q{background:var(--parch-3)}
.member-ph,.detail-cover,.gal a,.card-img,.hero{background-color:#0a0c11}
.member-ph-none{border-color:var(--hair)}
.empty{border-color:var(--hair);background:
  radial-gradient(60% 120% at 50% -20%,rgba(var(--glow),.10),transparent 70%)}
.empty-glyph{color:var(--gold-lit)}

/* forms: fields are windows, not paper */
.field input,.field textarea{background:#0a0c11;border-color:var(--hair);color:var(--txt)}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3)}
.field input:focus,.field textarea:focus{border-color:rgba(var(--glow),.75);background:#0d0f15;
  box-shadow:0 0 0 3px rgba(var(--glow),.18)}
.note.ok{border-color:var(--sage);background:rgba(127,168,148,.12);color:#a8ccb9}
.note.bad{border-color:var(--red);background:rgba(239,138,112,.10);color:var(--red)}
.orgcard{background:var(--ink);box-shadow:0 0 0 1px var(--hair-ink)}
.prose code{background:#0a0c11}
.btn-line{color:var(--txt);border-color:var(--hair)}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{background:#f2c268;border-color:#f2c268;box-shadow:0 0 28px -6px rgba(var(--glow),.6)}
  .btn:not(.btn-gold):not(.btn-line):hover{background:var(--gold);border-color:var(--gold);color:var(--ink-2)}
}
.btn{border-color:var(--txt);background:var(--txt);color:var(--ink-2)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#120d04}
.btn-line{background:transparent;color:var(--txt);border-color:var(--hair)}
.banner .btn-line,.sec.dark .btn-line,.beacon .btn-line{color:var(--on-ink);border-color:var(--hair-ink)}
.reslist a{color:var(--gold-ink)}
.reslist a:hover{border-color:rgba(var(--glow),.6)}
.prog-bar{background:linear-gradient(90deg,rgba(var(--glow),.4),rgba(var(--glow),1))}
.lb{background:rgba(2,3,4,.96)}

/* the header is a dark bar with a hairline of light under it once you move */
.head{background:rgba(14,16,21,.82);backdrop-filter:blur(12px)}
.head.stuck{background:rgba(10,12,16,.88);border-bottom-color:transparent;
  box-shadow:0 1px 0 0 rgba(var(--glow),.22),0 18px 40px -30px rgba(0,0,0,.9)}
.burger span{background:var(--txt)}
.drawer{background:var(--ink-2);
  background-image:radial-gradient(80% 50% at 50% 0%,rgba(var(--glow),.13),transparent 70%)}
.brand-crest{width:44px;filter:drop-shadow(0 0 10px rgba(var(--beam),.20))}
.nav a::after{background:rgba(var(--glow),1)}
.lang{border-color:var(--hair)}
@media (hover:hover) and (pointer:fine){.lang:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-2)}}
.rule i{background:var(--gold);box-shadow:0 0 10px rgba(var(--glow),.8)}

/* inner-page banners get a lighthouse glow from above */
.banner{position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(240,236,226,.05) 1px,transparent 1px)}
.banner::after{content:"";position:absolute;inset:-40% -10% auto;height:120%;pointer-events:none;
  background:radial-gradient(45% 60% at 50% 0%,rgba(var(--glow),.16),transparent 65%)}
.banner > *{position:relative;z-index:1}

/* ------------------------------------------------------------ the beacon (home hero)

   Written lit-first: the default state of everything here is "the light is
   on". The dark state is applied only when JavaScript is running and the
   switch has not been flipped yet — so a visitor without JS, or a crawler,
   never meets a page in the dark.
*/
.beacon{
  position:relative;background:var(--ink-3);color:var(--on-ink);overflow:hidden;
  min-height:calc(100svh - var(--head));display:grid;align-items:center;
  padding-block:clamp(2.5rem,7vw,5rem) clamp(3rem,8vw,6rem);
  isolation:isolate;
}
/* the sea of stars */
.beacon::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(214,226,238,.30) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 34%,#000,transparent 72%);
          mask-image:radial-gradient(70% 60% at 50% 34%,#000,transparent 72%);
  opacity:.5;transition:opacity 1200ms ease;
}
/* the halo the lantern throws over the whole section */
.beacon::after{
  content:"";position:absolute;left:50%;top:-10%;width:min(150vw,1500px);aspect-ratio:1;
  translate:-50% 0;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(var(--glow),.22),rgba(var(--glow),.07) 42%,transparent 72%);
  opacity:1;transition:opacity 1400ms var(--out) 120ms;
}

.beacon-in{position:relative;z-index:2;display:grid;gap:clamp(1.5rem,3.5vw,2.5rem);
  grid-template-columns:1fr;justify-items:center;text-align:center}
@media (max-width:979px){
  .crest-wrap{order:-1}
  .switchbox{justify-content:center}
  .beacon-copy{max-width:100%}
  .beacon-pillars{justify-content:center}
}
@media (min-width:980px){
  .beacon-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;
    text-align:left;justify-items:start;gap:clamp(2rem,5vw,4rem)}
}

.beacon-copy{max-width:36rem}
.beacon .eyebrow{color:var(--gold-lit);opacity:1;transition:opacity 700ms ease}
.beacon-h{
  margin:1rem 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(2.35rem,6.2vw,4.3rem);line-height:.95;letter-spacing:-.035em;
  color:var(--on-ink);text-shadow:0 0 60px rgba(var(--glow),.35);
  transition:color 900ms var(--out),text-shadow 900ms var(--out);
}
.beacon-h .ln{display:block}
.beacon-h .lo{color:var(--gold-lit);transition:color 900ms var(--out) 120ms}
.beacon-lead{margin-top:1.15rem;max-width:44ch;font-size:clamp(1.02rem,.7vw + .9rem,1.24rem);
  line-height:1.55;color:var(--on-ink-2);transition:color 900ms var(--out) 100ms}
.beacon-pillars{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.5rem}
.beacon-pillars b{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  padding:.42rem .8rem;border:1px solid var(--hair-ink);color:var(--on-ink);
  transition:color 600ms ease,border-color 600ms ease,box-shadow 600ms ease;
}
.beacon-pillars b:first-child{color:var(--gold-lit);border-color:rgba(var(--glow),.5);
  box-shadow:inset 0 0 22px -12px rgba(var(--glow),1)}
.beacon-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem;justify-content:center;
  opacity:1;transform:none;transition:opacity 700ms ease 400ms,transform 700ms var(--out) 400ms}
@media (min-width:980px){.beacon-cta{justify-content:flex-start}}

/* --- the crest: their mark, drawn so the light can be switched on --- */
.crest{width:min(62vw,340px);height:auto;display:block;overflow:visible}
@media (min-width:980px){.crest{width:min(34vw,420px)}}
.crest .disc{fill:#090a0e;transition:fill 900ms ease}
.crest .ring{fill:none;stroke:rgba(var(--glow),.42);stroke-width:2;transition:stroke 900ms ease}
.crest .tower{fill:#f2efe7;transition:fill 900ms var(--out)}
.crest .roof{fill:#f6f3ec;transition:fill 900ms var(--out)}
.crest .lantern{fill:rgb(var(--glow));transition:fill 700ms ease}
.crest .beams{opacity:1;transform-box:fill-box;transform-origin:50% 8%;transform:none;
  transition:opacity 900ms ease 60ms,transform 1100ms var(--out) 60ms}
.crest .beam-wide{fill:rgba(var(--beam),.20)}
.crest .beam-core{fill:rgba(var(--beam),.55)}
.crest .halo{opacity:1;transition:opacity 900ms ease 140ms}
.crest-wrap{position:relative;display:grid;place-items:center;justify-self:center}
.crest-wrap::after{ /* glow bloom behind the disc */
  content:"";position:absolute;width:150%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--glow),.30),transparent 70%);
  opacity:1;transition:opacity 1200ms ease 200ms;
}
/* one slow sweep, only once the light is on — the whole point of a lighthouse */
.lit .crest .beams{animation:sweep 7.5s ease-in-out 1.4s infinite}
@keyframes sweep{0%,100%{opacity:.82}50%{opacity:1}}

/* ---------- the dark state: JS running, switch not yet flipped ---------- */
.js:not(.lit) .beacon::before{opacity:.10}
.js:not(.lit) .beacon::after{opacity:0}
.js:not(.lit) .beacon .eyebrow{opacity:.35}
.js:not(.lit) .beacon-h{color:#3a3d45;text-shadow:none}
.js:not(.lit) .beacon-h .lo{color:inherit}
.js:not(.lit) .beacon-lead{color:#5c5f68}
.js:not(.lit) .beacon-pillars b{color:#5c5f68;border-color:rgba(240,236,226,.10);box-shadow:none}
.js:not(.lit) .beacon-cta{opacity:0;transform:translateY(8px)}
.js:not(.lit) .crest .disc{fill:#0b0d11}
.js:not(.lit) .crest .ring{stroke:rgba(240,236,226,.13)}
.js:not(.lit) .crest .tower{fill:#2c2f36}
.js:not(.lit) .crest .roof{fill:#33363d}
.js:not(.lit) .crest .lantern{fill:#1d2026}
.js:not(.lit) .crest .beams{opacity:0;transform:scaleX(.18) scaleY(.5)}
.js:not(.lit) .crest .halo{opacity:0}
.js:not(.lit) .crest-wrap::after{opacity:0}

/* --- the switch --- */
.switchbox{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.switch-txt{display:flex;flex-direction:column;gap:.2rem;text-align:left}
.switch{
  --w:54px;
  position:relative;width:var(--w);height:calc(var(--w) * 1.55);padding:0;cursor:pointer;
  background:linear-gradient(180deg,#1c2029,#0e1117);
  border:1px solid rgba(240,236,226,.16);border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px -16px #000;
  transition:box-shadow 400ms ease,border-color 400ms ease,transform 140ms var(--out);
}
.switch::before{ /* the slot the lever rocks in */
  content:"";position:absolute;inset:5px;border-radius:3px;background:#05060a;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.95);
}
.switch-lever{
  position:absolute;left:8px;right:8px;height:40%;border-radius:3px;
  background:linear-gradient(180deg,#d9d5cb,#9b968b);
  box-shadow:0 5px 10px -4px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.65);
  bottom:8px;transition:bottom 220ms var(--out),background 220ms ease,box-shadow 300ms ease;
}
.switch[aria-checked="true"] .switch-lever{
  bottom:calc(100% - 40% - 8px);
  background:linear-gradient(180deg,#fffaf0,#efdcb2);
  box-shadow:0 0 20px rgba(var(--glow),.6),inset 0 1px 0 rgba(255,255,255,.95);
}
.switch[aria-checked="true"]{border-color:rgba(var(--glow),.45);box-shadow:0 0 34px -8px rgba(var(--glow),.55)}
.switch:active{transform:scale(.97)}
/* in the dark, the switch breathes so it is obvious what to do — it stops the
   moment the light is on, and never runs at all under reduced motion */
.js:not(.lit) .switch{animation:await 3.4s ease-in-out infinite}
@keyframes await{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px -16px #000,0 0 0 0 rgba(var(--glow),0)}
  50%    {box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px -16px #000,0 0 30px -4px rgba(var(--glow),.40)}
}
.switch-label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-lit);transition:color 500ms ease;
}
.js:not(.lit) .switch-label{color:var(--txt-3)}
.switch-hint{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:#6c6f78;opacity:0;transition:opacity 400ms ease}
.js:not(.lit) .switch-hint{opacity:1;animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(3px)}}

/* the flash when the light comes on */
.flash{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;
  background:radial-gradient(60% 50% at 50% 38%,rgba(var(--glow),.55),transparent 70%)}
.flash.go{animation:flash 900ms var(--out) forwards}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

/* content below the fold waits for the light — but only with JS, and never
   for a keyboard user who has tabbed into it */
.js:not(.lit) .beacon-rest{opacity:0;transform:translateY(14px);pointer-events:none}
.beacon-rest{transition:opacity 700ms ease,transform 800ms var(--out)}
.js .beacon-rest:focus-within{opacity:1;transform:none;pointer-events:auto}

/* ------------------------------------------------------------ the lamps */
.sec.lamped{position:relative;overflow:hidden;isolation:isolate}
.sec.lamped > .wrap{position:relative;z-index:2}
.lamp{
  position:absolute;top:0;left:var(--x,50%);translate:-50% 0;z-index:0;
  width:clamp(160px,26vw,320px);pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
}
.lamp-cord{width:1px;height:clamp(28px,5vw,64px);background:linear-gradient(var(--hair),rgba(234,230,220,.35))}
.lamp-shade{position:relative;width:clamp(54px,8vw,86px);height:clamp(26px,4vw,40px);
  background:linear-gradient(180deg,#252932,#171a21);
  clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);
  box-shadow:0 2px 0 rgba(0,0,0,.6);transition:background 500ms ease}
.lit-on .lamp-shade{background:linear-gradient(180deg,#2e323c,#1c2029)}
.lamp-bulb{position:absolute;left:50%;bottom:-3px;translate:-50% 0;width:14px;height:14px;border-radius:50%;
  background:#22262e;transition:background 300ms ease,box-shadow 500ms ease}
.lit-on .lamp-bulb{background:rgb(var(--glow));
  box-shadow:0 0 18px 4px rgba(var(--glow),.85),0 0 60px 18px rgba(var(--glow),.35)}
.lamp-cone{
  width:100%;height:clamp(300px,52vw,620px);margin-top:-2px;
  background:linear-gradient(180deg,rgba(var(--glow),.30),rgba(var(--glow),.09) 30%,rgba(var(--glow),0) 68%);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  opacity:0;transition:opacity 900ms var(--out) 90ms;
  filter:blur(.5px);
}
.lit-on .lamp-cone{opacity:1}
.lamp-pool{
  position:absolute;top:0;left:50%;translate:-50% 0;width:min(180vw,1400px);aspect-ratio:1.6;
  background:radial-gradient(closest-side,rgba(var(--glow),.16),rgba(var(--glow),.05) 45%,transparent 74%);
  opacity:0;transition:opacity 1100ms ease 60ms;
}
.lit-on .lamp-pool{opacity:1}
/* the flicker as it strikes */
.lit-on .lamp-bulb,.lit-on .lamp-cone{animation:strike 420ms steps(1,end)}
@keyframes strike{0%{opacity:0}18%{opacity:1}30%{opacity:.15}48%{opacity:1}60%{opacity:.35}100%{opacity:1}}
/* an unlit section keeps its text legible but quiet; lighting it brings it up */
.sec.lamped .sec-head-txt,.sec.lamped .prose,.sec.lamped .two{transition:opacity 700ms ease}

/* ------------------------------------------------------------ the bench stage */
.stage{position:relative;height:340vh;background:var(--ink-3);--p:0;--lit:0;--copy:0}
@media (max-width:760px){.stage{height:280vh}}
.stage-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.stage-sky{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 118%,#10141b,transparent 60%),
    linear-gradient(180deg,#04050a 0%,#070a11 55%,#0b0f16 100%);}
.stage-stars{position:absolute;inset:0;
  background-image:radial-gradient(rgba(214,226,238,.5) 1px,transparent 1px);background-size:46px 46px;
  opacity:calc(.16 + (1 - var(--p)) * .2);
  transform:scale(calc(1 + var(--p) * .22));
  -webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
/* a far-off lighthouse on the horizon, which is where you have come from */
.stage-far{position:absolute;left:17%;top:36%;width:min(26vw,230px);
  opacity:calc(.55 - var(--p) * .58);
  transform:scale(calc(1 + var(--p) * 1.1)) translateX(calc(var(--p) * -16vw));
  color:rgba(var(--beam),.55)}
.stage-scene{position:relative;width:min(94vw,1040px);aspect-ratio:16/11;display:grid;place-items:center;
  transform:scale(calc(.22 + var(--p) * .70)) translateY(calc(var(--p) * -7vh));
  will-change:transform}
.stage-scene svg{width:100%;height:auto;overflow:visible}
.stage-glow{position:absolute;left:50%;top:18%;translate:-50% 0;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--glow),.42),rgba(var(--glow),.12) 40%,transparent 72%);
  opacity:var(--lit)}
.stage-copy{
  position:absolute;left:50%;top:auto;bottom:5%;translate:-50% 0;width:min(90vw,600px);text-align:center;
  opacity:var(--copy);transform:translateY(calc((1 - var(--copy)) * 18px));z-index:3;isolation:isolate;
}
/* a scrim so the words never fight the bench behind them */
.stage-copy::before{
  content:"";position:absolute;inset:-32% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,6,10,.92),rgba(5,6,10,.72) 52%,transparent 78%);
}
.stage-copy .eyebrow{color:var(--gold-lit)}
.stage-copy h2{margin-top:.7rem;font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.8rem);letter-spacing:-.025em;color:var(--on-ink);
  text-shadow:0 2px 40px rgba(var(--glow),.45)}
.stage-copy p{margin-top:.9rem;color:var(--on-ink-2);font-size:clamp(.98rem,.5vw + .9rem,1.1rem);line-height:1.6}
.stage-hint{position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;z-index:4;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
  opacity:calc(1 - var(--p) * 2.4);display:flex;align-items:center;gap:.5rem}
.stage-hint i{width:1px;height:18px;background:linear-gradient(var(--txt-3),transparent);display:block}
/* the bench scene's own parts, driven by the same progress */
.bench-lampglow{opacity:var(--lit)}
.bench-bulb{fill:#1b1f26;transition:fill 260ms ease}
.on .bench-bulb{fill:rgb(var(--glow))}
.bench-body{fill:#171b22;transition:fill 500ms ease}
.on .bench-body{fill:#2b3038}
.bench-lit{opacity:var(--lit)}
.bench-ground{opacity:var(--lit)}

/* ------------------------------------------------------------ footer horizon */
.foot{position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;left:50%;top:0;translate:-50% -50%;
  width:min(140vw,1200px);aspect-ratio:2.4;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--glow),.16),transparent 70%)}
.foot > *{position:relative}
.foot-motto{color:var(--gold-lit);text-shadow:0 0 40px rgba(var(--glow),.35)}

/* ------------------------------------------------------------ reduced motion
   Movement goes; nothing is left invisible or in the dark. */
@media (prefers-reduced-motion:reduce){
  .js:not(.lit) .beacon-rest{opacity:1;transform:none;pointer-events:auto}
  .lit .crest .beams{animation:none}
  .js:not(.lit) .switch-hint{animation:none;opacity:.7}
  .js:not(.lit) .switch{animation:none}
  .lit-on .lamp-bulb,.lit-on .lamp-cone{animation:none}
  /* the stage becomes one still picture with its words under it */
  .stage{height:auto;--p:1;--lit:1;--copy:1}
  .stage-pin{position:relative;height:auto;overflow:visible;
    padding:clamp(3rem,8vw,6rem) var(--pad);gap:1rem}
  .stage-scene{transform:none;width:min(88vw,760px)}
  .stage-stars{opacity:.2;transform:none}
  .stage-far,.stage-hint{display:none}
  .stage-copy{position:static;translate:none;transform:none;opacity:1;margin:0 auto;width:min(90vw,600px)}
  .stage-copy::before{display:none}
  .flash{display:none}
}
/* no JS: the page is lit from the first frame, and the switch is not shown
   because there would be nothing for it to do */
.no-js .switchbox{display:none}