/* ============================================================
   LOREN LALUNA  &  ESOTERICA ACADEMY
   Built to the approved brand boards.

   Palette : night, forest, oxblood, umber, gold, cream
   Type    : Cormorant Garamond (headings) / Lora (body and UI)
   Rhythm  : dark photographic bands alternating with parchment
   ============================================================ */

:root{
  --night:      #12100C;
  --night-2:    #1A1611;
  --night-3:    #221D16;
  --forest:     #1C3A2E;
  --forest-2:   #16302A;
  --oxblood:    #6D2B31;
  --umber:      #8C5A2E;
  --gold:       #C79A4B;
  --gold-lit:   #E3C68C;
  --gold-deep:  #8A6A2F;
  --cream:      #EFE6D5;
  --cream-2:    #E5DAC4;
  --dark-ink:   #241E17;
  --dark-ink-2: #5A4E3E;

  --on-night:      #E9E0CE;
  --on-night-dim:  #B3A891;
  --on-night-faint:#877C69;

  --display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --body:    "Lora", Georgia, serif;

  --rule-gold:  rgba(199,154,75,.30);
  --rule-light: rgba(233,224,206,.13);
  --rule-dark:  rgba(36,30,23,.16);

  --shell: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }
figure,blockquote,dl,dd{ margin:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--night);
  color:var(--on-night-dim);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(.95rem,.92rem + .18vw,1.02rem);
  line-height:1.85;
  overflow-x:hidden;
}

/* ---------- type ---------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--on-night);
  line-height:1.14;
  margin:0 0 .6em;
  letter-spacing:.006em;
}
h1{ font-size:clamp(2.9rem,1.9rem + 4.6vw,5.4rem); line-height:1.02; }
h2{ font-size:clamp(2rem,1.4rem + 2.5vw,3.2rem); }
h3{ font-size:clamp(1.3rem,1.12rem + .8vw,1.7rem); }
h4{ font-size:1.1rem; }

p{ margin:0 0 1.2em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
strong{ font-weight:600; color:var(--on-night); }
em{ font-style:italic; }
::selection{ background:rgba(199,154,75,.32); color:var(--on-night); }

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--gold-lit); outline-offset:4px; border-radius:2px;
}

/* small caps label used throughout the boards */
.eyebrow{
  display:block; font-family:var(--body); font-weight:400;
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.6rem;
}
.eyebrow.plain{ color:var(--on-night-faint); }
.lede{ font-size:clamp(1.02rem,.98rem + .35vw,1.16rem); line-height:1.85; color:var(--on-night-dim); }

.serif-lede{
  font-family:var(--display); font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);
  line-height:1.5; color:var(--on-night);
}

/* ---------- shell and bands ----------------------------------------- */
.shell{ width:min(100% - (var(--gutter)*2), var(--shell)); margin-inline:auto; }
.shell.tight{ max-width:940px; }
.shell.slim{ max-width:720px; }

.band{ padding-block:clamp(4rem,8vw,7.5rem); position:relative; }
.band.short{ padding-block:clamp(3rem,5vw,4.5rem); }
.band.flush{ padding-block:0; }

.band-cream{ background:var(--cream); color:var(--dark-ink-2); }
.band-cream h1,.band-cream h2,.band-cream h3,.band-cream h4{ color:var(--dark-ink); }
.band-cream .eyebrow{ color:var(--gold-deep); }
.band-cream .lede{ color:var(--dark-ink-2); }
.band-cream strong{ color:var(--dark-ink); }

.band-forest{ background:var(--forest-2); }
.band-night2{ background:var(--night-2); }

.centered{ text-align:center; }
.centered .eyebrow::after{ margin-inline:auto; }
.measure{ max-width:56ch; margin-inline:auto; }

/* ornamental rule under centred headings */
.orn-rule{
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  margin:1.6rem auto 0; color:var(--gold); opacity:.75;
}
.orn-rule::before,.orn-rule::after{
  content:""; height:1px; width:min(88px,14vw); background:currentColor;
}
.band-cream .orn-rule{ color:var(--gold-deep); }

/* ---------- masthead ------------------------------------------------ */
.masthead{
  position:absolute; top:0; left:0; right:0; z-index:40;
  padding-block:1.5rem;
}
.masthead.solid{
  position:sticky; background:rgba(18,16,12,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule-light);
}
.masthead .shell{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.brand{ display:flex; align-items:center; gap:.85rem; }
.brand .seal{ flex:none; }
.brand-name{
  font-family:var(--display); font-size:1.05rem; line-height:1.15;
  letter-spacing:.22em; text-transform:uppercase; color:var(--on-night);
  max-width:7.5em;
}
.brand:hover .brand-name{ color:var(--gold-lit); }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.2rem); }
.nav a{
  font-family:var(--body); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-night-dim);
  padding-block:.35rem; position:relative; white-space:nowrap;
  transition:color .35s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--gold); transition:right .45s cubic-bezier(.2,.7,.2,1);
}
.nav a:hover{ color:var(--on-night); }
.nav a:hover::after{ right:0; }
.nav a[aria-current="page"]{ color:var(--gold-lit); }
.nav a[aria-current="page"]::after{ right:0; background:var(--rule-gold); }

.menu-btn{
  display:none; background:none; border:0; cursor:pointer; padding:.4rem;
  color:var(--on-night);
}
.menu-btn svg{ display:block; }

/* mobile panel, drawn from the board */
.nav-panel{
  position:fixed; inset:0; z-index:60; background:var(--night);
  display:none; flex-direction:column; padding:1.6rem var(--gutter) 2.4rem;
  overflow-y:auto;
}
.nav-panel[data-open="true"]{ display:flex; }
.nav-panel .panel-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.nav-panel .close{ background:none; border:0; color:var(--on-night); cursor:pointer; padding:.4rem; }
.nav-panel .panel-links{ display:flex; flex-direction:column; gap:1.15rem; margin-top:3rem; }
.nav-panel .panel-links a{
  font-family:var(--body); font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--on-night-dim);
}
.nav-panel .panel-links a:hover{ color:var(--gold-lit); }
.nav-panel .socials{ display:flex; gap:1.3rem; margin-top:2.6rem; color:var(--gold); }
.nav-panel .panel-quote{
  margin-top:auto; padding:1.5rem 1.4rem; border:1px solid var(--rule-gold);
  font-family:var(--display); font-size:1.08rem; line-height:1.5; color:var(--on-night);
}
.nav-panel .panel-quote cite{
  display:block; margin-top:1rem; font-family:var(--body); font-style:normal;
  font-size:.7rem; letter-spacing:.14em; color:var(--on-night-faint);
}
.nav-panel .panel-orn{
  position:absolute; right:var(--gutter); top:5.5rem; opacity:.5; pointer-events:none;
}

/* ---------- hero ----------------------------------------------------- */
.hero{
  position:relative; min-height:min(84vh,720px);
  display:grid; place-items:center; text-align:center;
  padding:8rem var(--gutter) 4.5rem; overflow:hidden;
  background:var(--night);
}
.hero .scene{ position:absolute; inset:0; z-index:0; }
.hero .scene img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
.hero .scene::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(64% 58% at 50% 46%, rgba(18,16,12,.34), rgba(18,16,12,.86) 78%),
    linear-gradient(to bottom, rgba(18,16,12,.9), rgba(18,16,12,.32) 34%, rgba(18,16,12,.94));
}
.hero-inner{ position:relative; z-index:2; max-width:44rem; }
.hero h1{ margin-bottom:.4em; }
.hero .sub{
  font-family:var(--display); font-size:clamp(1.1rem,1rem + .7vw,1.45rem);
  line-height:1.55; color:var(--on-night-dim); max-width:32ch; margin:0 auto;
}
.hero .actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.8rem; }
.hero .crest{ margin-bottom:2rem; }

/* atmospheric fallback while photography is being shot ---------------- */
.scene-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(30% 42% at 26% 34%, rgba(226,178,92,.30), transparent 62%),
    radial-gradient(46% 52% at 74% 60%, rgba(140,90,46,.22), transparent 66%),
    radial-gradient(90% 90% at 50% 44%, rgba(34,29,22,.55), rgba(12,10,8,.98) 76%),
    linear-gradient(155deg, #241D16, #0E0C09 74%);
}
.scene-fallback .glyph{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:.16; color:var(--gold);
}

/* ---------- buttons -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--body); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  padding:1.05rem 2.3rem; border:1px solid var(--gold); color:var(--gold-lit);
  background:transparent; cursor:pointer; border-radius:0;
  transition:background .45s ease,color .45s ease,border-color .45s ease;
}
.btn:hover{ background:var(--gold); color:#17130D; }
.btn.solid{ background:var(--gold); color:#17130D; }
.btn.solid:hover{ background:var(--gold-lit); border-color:var(--gold-lit); }
.btn.on-cream{ border-color:var(--gold-deep); color:var(--gold-deep); }
.btn.on-cream:hover{ background:var(--gold-deep); color:var(--cream); }

.textlink{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--body); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); padding-bottom:.35rem; border-bottom:1px solid var(--rule-gold);
  transition:color .3s ease,border-color .3s ease;
}
.textlink span{ display:inline-block; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.textlink:hover{ color:var(--gold-lit); border-color:var(--gold); }
.textlink:hover span{ transform:translateX(5px); }
.band-cream .textlink{ color:var(--gold-deep); border-color:rgba(138,106,47,.4); }
.band-cream .textlink:hover{ color:var(--oxblood); border-color:var(--oxblood); }

/* ---------- pillars (seer / teacher / practitioner / keeper) --------- */
.pillars{ display:grid; gap:2.6rem 0; margin-top:clamp(2.5rem,5vw,4.5rem); }
@media (min-width:760px){
  .pillars{ grid-template-columns:repeat(4,1fr); }
  .pillars > div + div{ border-left:1px solid var(--rule-light); }
}
.pillar{ text-align:center; padding-inline:clamp(1rem,2.2vw,2rem); }
.pillar .ico{ color:var(--gold); display:block; margin:0 auto 1.4rem; }
.pillar h3{
  font-family:var(--body); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--on-night); margin:0 0 .9rem;
}
.pillar p{ font-size:.9rem; line-height:1.8; margin:0; color:var(--on-night-dim); }

/* ---------- split (text + photograph) -------------------------------- */
.split{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split.flip > *:first-child{ order:2; }
  .split.narrow-text{ grid-template-columns:5fr 7fr; }
}

/* ---------- photograph plates ---------------------------------------- */
.plate{
  position:relative; overflow:hidden; background:var(--night-3);
  aspect-ratio:4/3; display:grid; place-items:center;
}
.plate.portrait{ aspect-ratio:3/4; }
.plate.square{ aspect-ratio:1/1; }
.plate.wide{ aspect-ratio:16/9; }
.plate img{ width:100%; height:100%; object-fit:cover; display:block; }
.plate .fill{
  position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(152deg, #3A2A18 0%, #241a10 42%, #100B07 100%);
}
.plate .fill-bloom{
  position:absolute; inset:0;
  background:
    radial-gradient(44% 42% at 30% 26%, rgba(242,198,120,.42), transparent 66%),
    radial-gradient(66% 60% at 76% 74%, rgba(150,96,48,.30), transparent 74%);
}
.plate .fill-art{ position:absolute; inset:0; display:grid; place-items:center; color:#EDC98A; }
.plate .fill-art svg{ width:72%; height:72%; opacity:.48; }
.plate .fill-vig{
  position:absolute; inset:0;
  background:radial-gradient(118% 108% at 40% 32%, transparent 26%, rgba(8,6,4,.88) 94%);
}
.plate .fill::after{
  content:""; position:absolute; inset:0; opacity:.085; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* aged paper variant, for specimen and manuscript plates */
.plate.paper .fill{ background:linear-gradient(150deg,#E9DDC3 0%,#D2C09E 62%,#B6A483 100%); }
.plate.paper .fill-bloom{ background:radial-gradient(58% 50% at 32% 24%, rgba(255,246,220,.55), transparent 72%); }
.plate.paper .fill-art{ color:#6A5531; }
.plate.paper .fill-art svg{ opacity:.62; }
.plate.paper .fill-vig{ background:radial-gradient(118% 108% at 40% 32%, transparent 30%, rgba(84,66,38,.44) 96%); }
.plate.paper figcaption{ color:#6A5531; background:linear-gradient(to top, rgba(233,221,195,.94), transparent); }

.plate figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.9rem 1.1rem;
  font-family:var(--body); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-night-faint);
  background:linear-gradient(to top, rgba(12,10,8,.94), transparent);
}

/* ---------- offer cards (ways to work together) ---------------------- */
.offers{ display:grid; gap:1.4rem; margin-top:clamp(2.4rem,4vw,3.4rem); }
@media (min-width:640px){ .offers{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .offers{ grid-template-columns:repeat(4,1fr); } }

.offer{
  background:var(--night); color:var(--on-night-dim);
  display:flex; flex-direction:column;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.offer:hover{ transform:translateY(-5px); }
.offer .plate{ aspect-ratio:5/4; }
.offer .offer-body{ padding:1.7rem 1.5rem 1.9rem; text-align:center; display:flex; flex-direction:column; gap:.85rem; flex:1; }
.offer h3{
  font-family:var(--body); font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-night); margin:0;
}
.offer p{ font-size:.88rem; line-height:1.75; margin:0; }
.offer .textlink{ margin:auto auto 0; padding-top:1.1rem; border-bottom:0; }

/* ---------- paths of study (academy) --------------------------------- */
.paths{ display:grid; gap:1.3rem; margin-top:clamp(2.4rem,4vw,3.4rem); }
@media (min-width:640px){ .paths{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .paths{ grid-template-columns:repeat(4,1fr); } }
.path{
  border:1px solid var(--rule-light); background:var(--night-2);
  display:flex; flex-direction:column; text-align:center;
  transition:border-color .45s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.path:hover{ border-color:var(--rule-gold); transform:translateY(-4px); }
.path .plate{ aspect-ratio:4/3; }
.path .path-body{ padding:1.6rem 1.4rem 1.8rem; display:flex; flex-direction:column; gap:.8rem; flex:1; }
.path h3{
  font-family:var(--display); font-size:1.16rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-night); margin:0;
}
.path p{ font-size:.87rem; line-height:1.75; margin:0; }
.path .tick{ color:var(--gold); opacity:.7; margin-top:auto; padding-top:1.1rem; }

/* ---------- journal cards -------------------------------------------- */
.posts{ display:grid; gap:1.4rem; }
@media (min-width:700px){ .posts{ grid-template-columns:repeat(3,1fr); } }
.post{
  background:var(--night-2); border:1px solid var(--rule-light);
  display:flex; flex-direction:column;
  transition:border-color .45s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.post:hover{ border-color:var(--rule-gold); transform:translateY(-4px); }
.post .plate{ aspect-ratio:5/4; }
.post .post-body{ padding:1.5rem 1.4rem 1.7rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.post .cat{
  font-family:var(--body); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
}
.post h3{ font-size:1.28rem; margin:0; line-height:1.3; }
.post p{ font-size:.88rem; margin:0; }
.post .textlink{ margin-top:auto; padding-top:1.1rem; border-bottom:0; }

.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(2rem,3vw,2.8rem);
}
.section-head h2{ margin:0; }

/* ---------- quote blocks --------------------------------------------- */
.quote-panel{
  display:grid; gap:2rem; align-items:center;
  padding:clamp(2.8rem,6vw,5rem) clamp(1.6rem,4vw,4rem);
}
@media (min-width:820px){ .quote-panel{ grid-template-columns:1.35fr .65fr; } }
.quote-panel blockquote{
  margin:0; font-family:var(--display);
  font-size:clamp(1.6rem,1.2rem + 2vw,2.7rem); line-height:1.32;
}
.quote-panel cite{
  display:block; margin-top:1.6rem; font-family:var(--body); font-style:normal;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
}
.quote-panel .orn{ justify-self:center; opacity:.5; }
.band-cream .quote-panel blockquote{ color:var(--dark-ink); }
.band-cream .quote-panel cite{ color:var(--gold-deep); }
.band-cream .quote-panel .orn{ color:var(--gold-deep); }

/* ---------- newsletter (forest block) -------------------------------- */
.letters{ display:grid; gap:1.8rem; align-items:center; }
@media (min-width:760px){ .letters{ grid-template-columns:auto 1fr; } }
.letters .seal-lg{ color:var(--gold); justify-self:center; }
.letters h2{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem); margin:0 0 .5rem; }
.letters p{ margin:0; font-size:.94rem; }
.signup{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.signup input{
  flex:1 1 15rem; background:transparent; border:1px solid var(--rule-gold);
  color:var(--on-night); font-family:var(--body); font-size:.8rem;
  letter-spacing:.12em; padding:.95rem 1rem;
}
.signup input::placeholder{ color:var(--on-night-faint); text-transform:uppercase; font-size:.66rem; letter-spacing:.2em; }
.signup input:focus{ outline:none; border-color:var(--gold); }
.signup .btn{ padding-inline:1.7rem; }

/* ---------- course card ---------------------------------------------- */
.course{
  border:1px solid var(--rule-light); background:var(--night-2);
  padding:clamp(2rem,4vw,3rem); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.course .talisman{ color:var(--gold); opacity:.9; }
.course h3{ font-size:clamp(1.2rem,1rem + .8vw,1.5rem); letter-spacing:.13em; text-transform:uppercase; margin:0; }
.course p{ font-size:.9rem; max-width:34ch; margin:0; }

/* ---------- listed rows (events, curriculum) ------------------------- */
.rows{ border-top:1px solid var(--rule-light); }
.row-item{
  display:grid; gap:.5rem 2.5rem; padding-block:clamp(1.6rem,2.6vw,2.2rem);
  border-bottom:1px solid var(--rule-light);
  transition:background .45s ease,padding-inline .45s ease;
}
@media (min-width:780px){
  .row-item{ grid-template-columns:minmax(8rem,11rem) 1fr auto; align-items:baseline; }
  a.row-item:hover{ background:rgba(233,224,206,.035); padding-inline:1.1rem; }
}
.row-item .when{
  font-family:var(--body); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.row-item h3{ margin:0 0 .3rem; font-size:1.35rem; }
.row-item p{ margin:0; font-size:.9rem; max-width:60ch; }
.row-item .meta{
  font-family:var(--body); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-night-faint); white-space:nowrap;
}

/* ---------- the library catalogue ------------------------------------ */
.key{ display:grid; gap:1px; background:var(--rule-light); border:1px solid var(--rule-light); margin-top:2.4rem; }
@media (min-width:760px){ .key{ grid-template-columns:repeat(4,1fr); } }
.key > div{ background:var(--night-2); padding:1.5rem 1.4rem; }
.key dt{ font-family:var(--body); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:.7rem; }
.key dd{ margin:0; font-size:.86rem; line-height:1.7; }
.k-attested{ color:var(--gold); }
.k-compiled{ color:#9BAE86; }
.k-revival{ color:#A895C4; }
.k-modern{ color:#C4726C; }

.controls{ border-block:1px solid var(--rule-gold); padding-block:1.7rem; display:flex; flex-direction:column; gap:1.3rem; }
.search-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.search{ flex:1 1 18rem; display:flex; align-items:center; gap:.8rem; border-bottom:1px solid var(--rule-gold); padding-bottom:.55rem; }
.search svg{ flex:none; opacity:.6; color:var(--gold); }
.search input{ flex:1; background:transparent; border:0; color:var(--on-night); font-family:var(--display); font-size:1.15rem; padding:.15rem 0; }
.search input::placeholder{ color:var(--on-night-faint); }
.search input:focus{ outline:none; }
.count{ font-family:var(--body); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-night-faint); white-space:nowrap; }

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.filters .flabel{ font-family:var(--body); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-night-faint); margin-right:.4rem; }
.chip{
  font-family:var(--body); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-night-dim); background:transparent; border:1px solid var(--rule-light);
  padding:.55rem .9rem; cursor:pointer;
  transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.chip:hover{ border-color:var(--rule-gold); color:var(--on-night); }
.chip[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#17130D; }

.catalogue{ border-top:1px solid var(--rule-gold); }
.entry{ border-bottom:1px solid var(--rule-light); }
.entry[hidden]{ display:none; }
.entry > summary{
  display:grid; gap:.3rem 2rem; align-items:baseline; padding-block:1.5rem;
  cursor:pointer; list-style:none;
  transition:background .4s ease,padding-inline .4s ease;
}
.entry > summary::-webkit-details-marker{ display:none; }
.entry > summary::after{ content:"+"; color:var(--gold); font-family:var(--display); font-size:1.4rem; }
.entry[open] > summary::after{ content:"\2013"; }
@media (min-width:820px){
  .entry > summary{ grid-template-columns:8rem 1fr 8.5rem 1.5rem; }
  .entry > summary::after{ align-self:center; justify-self:end; }
  .entry > summary:hover{ background:rgba(233,224,206,.03); padding-inline:1rem; }
}
@media (max-width:819px){
  .entry > summary{ padding-right:2rem; position:relative; }
  .entry > summary::after{ position:absolute; right:0; top:1.4rem; }
}
.entry .shelf{ font-family:var(--body); font-size:.62rem; letter-spacing:.16em; color:var(--gold); white-space:nowrap; }
.entry .title{ display:block; font-family:var(--display); font-size:1.42rem; line-height:1.28; color:var(--on-night); }
.entry .origin{ display:block; margin-top:.2rem; font-size:.83rem; font-style:italic; color:var(--on-night-faint); }
.entry .tag{ font-family:var(--body); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.entry[data-prov="attested"] .tag{ color:var(--gold); }
.entry[data-prov="compiled"] .tag{ color:#9BAE86; }
.entry[data-prov="revival"]  .tag{ color:#A895C4; }
.entry[data-prov="modern"]   .tag{ color:#C4726C; }
.entry .body{ padding:0 0 2rem; }
@media (min-width:820px){ .entry .body{ padding-left:10rem; padding-right:10rem; } }
.entry .body p{ font-size:.93rem; line-height:1.85; max-width:64ch; }
.entry .body .note{
  border-left:1px solid var(--oxblood); padding-left:1rem; margin-top:1.3rem;
  font-size:.85rem; line-height:1.8; max-width:60ch; color:var(--on-night-faint);
}
.entry .body .note b{
  display:block; color:#C4726C; font-weight:400; text-transform:uppercase;
  letter-spacing:.2em; font-size:.6rem; margin-bottom:.3rem;
}
.empty{ padding:4rem 0; text-align:center; }
.empty p{ font-family:var(--display); font-size:1.3rem; color:var(--on-night-faint); }

/* ---------- accordion ------------------------------------------------ */
details.qa{ border-bottom:1px solid var(--rule-light); }
details.qa summary{
  cursor:pointer; list-style:none; padding-block:1.3rem;
  font-family:var(--display); font-size:1.28rem; color:var(--on-night);
  display:flex; justify-content:space-between; align-items:center; gap:2rem;
}
details.qa summary::-webkit-details-marker{ display:none; }
details.qa summary::after{ content:"+"; color:var(--gold); font-size:1.3rem; }
details.qa[open] summary::after{ content:"\2013"; }
details.qa p{ padding-bottom:1.3rem; max-width:68ch; font-size:.92rem; }
.band-cream details.qa{ border-color:var(--rule-dark); }
.band-cream details.qa summary{ color:var(--dark-ink); }
.band-cream details.qa summary::after{ color:var(--gold-deep); }

/* ---------- forms ---------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem; }
.field label{ font-family:var(--body); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-night-faint); }
.field input,.field textarea,.field select{
  background:var(--night-2); border:1px solid var(--rule-light);
  color:var(--on-night); font-family:var(--body); font-size:.95rem;
  padding:.9rem 1rem; width:100%; transition:border-color .35s ease;
}
.field input:hover,.field textarea:hover,.field select:hover{ border-color:var(--rule-gold); }
.field textarea{ min-height:9rem; resize:vertical; line-height:1.75; }
.form-note{ font-size:.82rem; color:var(--on-night-faint); margin-top:1rem; }
.form-status:empty{ display:none; }
.band-cream .field label{ color:var(--dark-ink-2); }
.band-cream .field input,.band-cream .field textarea,.band-cream .field select{
  background:rgba(255,255,255,.5); border-color:var(--rule-dark); color:var(--dark-ink);
}

/* ---------- article -------------------------------------------------- */
.article{ max-width:66ch; margin-inline:auto; }
.article p{ font-size:clamp(1rem,.97rem + .25vw,1.09rem); line-height:1.95; }
.article > p:first-of-type::first-letter{
  float:left; font-family:var(--display); font-size:4em; line-height:.8;
  color:var(--gold); padding:.05em .12em 0 0;
}
.article h2{ margin-top:2.4em; font-size:clamp(1.6rem,1.3rem + 1.2vw,2.1rem); }
.article h3{ margin-top:1.9em; }
.article blockquote{
  margin:2.4rem 0; padding-left:1.7rem; border-left:1px solid var(--gold);
  font-family:var(--display); font-size:1.35rem; line-height:1.5;
  font-style:italic; color:var(--on-night);
}
.article ul,.article ol{ padding-left:1.25rem; margin-bottom:1.4em; }
.article li{ margin-bottom:.55em; }
.article ::marker{ color:var(--gold); }
.article .footnote{ font-size:.85rem; line-height:1.85; color:var(--on-night-faint); }

/* ---------- almanac strip -------------------------------------------- */
.almanac{
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  flex-wrap:wrap; padding-block:1.5rem;
  border-top:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light);
}
.almanac .moon{ filter:drop-shadow(0 0 10px rgba(227,198,140,.3)); }
.almanac-line{
  font-family:var(--body); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-night-faint);
}
.almanac-line b{ color:var(--gold); font-weight:400; }
.almanac-dot{ width:3px; height:3px; background:var(--rule-gold); border-radius:50%; }

/* ---------- footer --------------------------------------------------- */
.foot{ background:var(--night); padding-block:clamp(3.5rem,6vw,5rem) 2.5rem; }
.foot-grid{ display:grid; gap:2.6rem; }
@media (min-width:800px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.foot h4{
  font-family:var(--body); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.2rem; font-weight:400;
}
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.foot a{ color:var(--on-night-dim); font-size:.88rem; }
.foot a:hover{ color:var(--gold-lit); }
.foot .about-col p{ font-size:.88rem; max-width:34ch; margin-top:1.2rem; }
.foot .socials{ display:flex; gap:1.1rem; margin-top:1.4rem; color:var(--gold); }
.colophon{
  margin-top:3.2rem; padding-top:1.6rem; border-top:1px solid var(--rule-light);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  font-size:.72rem; letter-spacing:.06em; color:var(--on-night-faint);
}

/* ---------- utility -------------------------------------------------- */
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:99; background:var(--night-3);
  color:var(--on-night); padding:.8rem 1.2rem; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{ left:1rem; top:1rem; }

.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.seen{ opacity:1; transform:none; transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; } }

/* ---------- responsive ----------------------------------------------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .menu-btn{ display:block; }
}
@media (max-width:600px){
  .hero{ min-height:auto; padding-top:7.5rem; }
  .quote-panel{ text-align:center; }
  .quote-panel .orn{ display:none; }
}

/* =====================================================================
   BOARD-ACCURATE COMPOSITION
   Full bleed image halves, the seal on the seam, framed card groups
   and paired panels, as drawn in the brand boards.
   ===================================================================== */

.split-bleed{ display:grid; position:relative; }
.split-bleed .text-in{ padding:clamp(2.6rem,6vw,5rem) var(--gutter); }
.split-bleed .plate{ aspect-ratio:16/11; }
@media (min-width:900px){
  .split-bleed{ grid-template-columns:1fr 1fr; align-items:stretch; }
  .split-bleed .text-in{
    max-width:calc(var(--shell) / 2); margin-left:auto;
    padding:clamp(3rem,5vw,5rem) clamp(2rem,3.4vw,3.6rem) clamp(3rem,5vw,5rem) 0;
    display:flex; flex-direction:column; justify-content:center;
  }
  .split-bleed.flip > .text-col{ order:2; }
  .split-bleed.flip .text-in{
    margin-left:0; margin-right:auto;
    padding:clamp(3rem,5vw,5rem) 0 clamp(3rem,5vw,5rem) clamp(2rem,3.4vw,3.6rem);
  }
  .split-bleed .plate{ aspect-ratio:auto; height:100%; min-height:480px; }
}

/* the device sitting on the join between text and photograph */
.seam-seal{
  display:none; position:absolute; left:50%; top:50%; z-index:4;
  transform:translate(-50%,-50%); color:var(--gold);
  width:96px; height:96px; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(18,16,12,.96) 44%, rgba(18,16,12,0) 72%);
}
@media (min-width:900px){ .seam-seal{ display:flex; } }

/* centred heading flourish, as on the boards */
.flourish{ display:block; margin:1.4rem auto 0; color:var(--gold); opacity:.8; }
.band-cream .flourish{ color:var(--gold-deep); }

/* a bordered frame around a group of cards */
.framed{
  border:1px solid var(--rule-light);
  padding:clamp(2rem,4vw,3.4rem) clamp(1.4rem,3vw,3rem) clamp(2.2rem,4vw,3.4rem);
}
.framed > .centered{ margin-bottom:clamp(2rem,3.4vw,3rem); }

/* two panels of different grounds, side by side */
.pair{ display:grid; }
@media (min-width:900px){ .pair{ grid-template-columns:1fr 1fr; } }
.pair > *{ padding:clamp(2.6rem,5vw,4.4rem) clamp(2rem,4vw,3.6rem); display:flex; flex-direction:column; justify-content:center; }
.pair .panel-cream{ background:var(--cream); color:var(--dark-ink-2); }
.pair .panel-cream h2,.pair .panel-cream blockquote{ color:var(--dark-ink); }
.pair .panel-cream cite{ color:var(--gold-deep); }
.pair .panel-forest{ background:var(--forest-2); }
.pair .panel-dark{ background:var(--night-2); position:relative; overflow:hidden; padding:0; }
.pair .panel-dark .plate{ position:absolute; inset:0; aspect-ratio:auto; }
.pair .panel-dark .panel-body{
  position:relative; z-index:3; padding:clamp(2.6rem,5vw,4.4rem) clamp(2rem,4vw,3.6rem);
  background:linear-gradient(to right, rgba(16,13,9,.92), rgba(16,13,9,.55));
  min-height:100%; display:flex; flex-direction:column; justify-content:center;
}
.pair blockquote{
  margin:0; font-family:var(--display);
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.35rem); line-height:1.34;
}
.pair cite{
  display:block; margin-top:1.4rem; font-family:var(--body); font-style:normal;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
}
.pair .quote-orn{ margin-top:1.8rem; opacity:.55; }

/* the journal row with a course card as its fourth column */
.posts.with-course{ grid-template-columns:1fr; }
@media (min-width:700px){ .posts.with-course{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .posts.with-course{ grid-template-columns:repeat(4,1fr); } }
.posts .course{ margin:0; height:100%; justify-content:center; }

/* card proportions closer to the boards */
.offer .plate{ aspect-ratio:1/1; }
.post .plate{ aspect-ratio:4/3; }
.path .plate{ aspect-ratio:1/1; }


/* painted scene plates ------------------------------------------------ */
.plate .scene-art{ position:absolute; inset:0; display:block; }
.plate .scene-art svg{ width:100%; height:100%; display:block; }
.hero .scene svg{ width:100%; height:100%; display:block; }
.hero .scene::after{
  background:
    radial-gradient(70% 62% at 46% 42%, rgba(18,16,12,0), rgba(18,16,12,.58) 92%),
    linear-gradient(to bottom, rgba(18,16,12,.72), rgba(18,16,12,.06) 30%, rgba(18,16,12,.12) 62%, rgba(18,16,12,.88));
}

/* library entry source links ------------------------------------------ */
.entry-links{
  margin-top:1.2rem; font-size:.8rem; line-height:2; letter-spacing:.02em;
  color:var(--on-night-faint); max-width:64ch;
}
.entry-links b{
  font-weight:400; text-transform:uppercase; letter-spacing:.18em;
  font-size:.6rem; color:var(--gold);
}
.entry-links a{
  color:var(--on-night-dim); border-bottom:1px solid var(--rule-gold);
  padding-bottom:.1em; transition:color .3s ease,border-color .3s ease;
}
.entry-links a:hover{ color:var(--gold-lit); border-color:var(--gold); }

/* wheel of the year cards: dark cards on the cream band keep night colours */
.card-lite{ border:1px solid var(--rule-light); background:var(--night-2); }
.band-cream .card-lite .eyebrow{ color:var(--gold); }
.band-cream .card-lite h3{ color:var(--on-night); }
.band-cream .card-lite p{ color:var(--on-night-dim); }