/* ============================================================================
   KHALDOUN — The Library design system
   Single source of truth for the Library (/library/, /cacao/library/, articles).
   Self-contained: these pages do NOT load the global /style.css.
   Type stand-ins (Cormorant Garamond + Inter) proxy The Seasons + Helvetica Now —
   swap the two --display / --body vars to change every face at once.
   ========================================================================== */
:root{
  --bone:#f1ece5; --bone-dim:#e3dccf;
  --ink:#1c1916; --ink-2:#262019; --ink-3:#34291f;
  --forest:#435301; --ember:#c4470e; --rust:#4e0403;
  --page-accent:#c4470e;  /* Library keeps ember — its accent prints on light bone surfaces (drop-cap, labels) where gold would be illegible. The shared shell reads --page-accent. */
  --line:rgba(241,236,229,.16); --line-dark:rgba(28,25,22,.14);
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1200px; --read:680px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--body);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;letter-spacing:.01em;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* film-grain overlay */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

.display{font-family:var(--display);font-weight:300;letter-spacing:.005em;line-height:1.04}
.label{font-family:var(--body);font-weight:500;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase}

/* warm-duotone image treatment */
.ph{position:relative;overflow:hidden;background:var(--ink-2)}
.ph img{width:100%;height:100%;object-fit:cover;
  filter:sepia(.55) saturate(.75) brightness(.62) contrast(1.08);
  transition:transform 1.6s cubic-bezier(.2,.8,.2,1),filter 1.2s ease}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,25,22,.25),rgba(28,25,22,.72));mix-blend-mode:multiply}
.ph .warm{position:absolute;inset:0;background:radial-gradient(120% 120% at 30% 0%,rgba(196,71,14,.18),transparent 55%);mix-blend-mode:screen;pointer-events:none}
.warm-ph img{filter:sepia(.7) saturate(1.05) brightness(.6) contrast(1.05)}
.feature:hover .ph img,.cacao-visual:hover .ph img,.lookbook a:hover .ph img,.ccard:hover .ph img,.begin-rail a:hover .ph img{transform:scale(1.04)}

.warmbg{position:relative;background:linear-gradient(165deg,#2c1812,#1c1916 62%);overflow:hidden}
.warmbg::before{content:"";position:absolute;top:-8%;left:-6%;width:55%;height:60%;background:radial-gradient(circle,rgba(78,4,3,.4),transparent 70%);pointer-events:none}
/* neutral room skin — shared skeleton for rooms whose bespoke skin isn't designed yet */
.roombg{position:relative;background:var(--ink);overflow:hidden}

/* NAV — canonical shell nav (hamburger · centred logo · Cacao/Letters on desktop).
   The toggle, nav__right links, mega-menu and footer come from the shared
   /shell.css + /shell.js. Library pages don't load /style.css, so the nav FRAME
   (grid, centred logo, reveal) lives here to match the hand-built pages. */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(1.25rem,4vw,3.25rem);transition:background .5s,backdrop-filter .5s,border-color .5s,opacity .45s;border-bottom:1px solid transparent;opacity:0;pointer-events:none}
.nav.visible{opacity:1;pointer-events:auto}
.nav.solid{background:rgba(35,31,32,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--line)}
.nav__left{justify-self:start;display:flex;align-items:center}
.nav__centre{justify-self:center}
.nav__centre .nav-logo-img{height:22px;width:auto;opacity:.96;display:block;transition:opacity .3s}
.nav__centre .nav-logo:hover .nav-logo-img{opacity:1}
.nav__right{justify-self:end}

/* HERO — landing threshold */
.hero{position:relative;height:100vh;min-height:620px;display:flex;align-items:center;justify-content:center;text-align:center}
.hero .ph{position:absolute;inset:0}
.hero .ph img{filter:sepia(.5) saturate(.7) brightness(.5) contrast(1.1)}
.hero-inner{position:relative;z-index:2;padding:0 1.5rem;max-width:900px}
.hero .label{opacity:.8;margin-bottom:1.8rem}
.hero h1{font-size:clamp(3.4rem,11vw,8.5rem);font-weight:300}
.hero .sub{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.7rem);opacity:.86;margin-top:1.1rem}
.scroll-cue{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:2;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.scroll-cue .line{width:1px;height:46px;background:linear-gradient(var(--bone),transparent);animation:drop 2.4s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,9vw,8rem) clamp(1.25rem,4vw,3.25rem)}
.bone{background:var(--bone);color:var(--ink)}
.bone .label{color:var(--ember)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.sec-head h2{font-size:clamp(2.2rem,5vw,3.7rem)}
.sec-head p{max-width:34ch;opacity:.7;font-size:.96rem}

.standfirst{max-width:760px;margin:0 auto;text-align:center}
.standfirst p{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.42}
.standfirst .label{display:block;margin-bottom:1.8rem;opacity:.55}

/* FRONT TABLE */
.table-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(1.5rem,3vw,3rem)}
@media(max-width:860px){.table-grid{grid-template-columns:1fr}}
.feature{position:relative;border-radius:2px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;cursor:pointer}
.feature .ph{position:absolute;inset:0}
.feature-body{position:relative;z-index:2;padding:clamp(1.8rem,3vw,2.8rem);max-width:560px}
.feature .label{opacity:.85;margin-bottom:1rem}
.feature h3{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:400;margin-bottom:.7rem}
.feature p{opacity:.82;font-size:.98rem;max-width:46ch}
.begin{display:flex;flex-direction:column;gap:1.15rem}
.begin .label{color:var(--ember);margin-bottom:.3rem}
.begin a{display:block;padding-bottom:1.15rem;border-bottom:1px solid var(--line-dark);cursor:pointer}
.begin a:last-child{border-bottom:none}
.begin h4{font-family:var(--display);font-size:1.4rem;font-weight:400;line-height:1.2;transition:color .3s}
.begin a:hover h4{color:var(--ember)}
.begin .meta{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-top:.5rem}

/* ROOMS INTRO */
.rooms-intro{text-align:center}
.rooms-intro .label{color:var(--ember);margin-bottom:1rem}
.rooms-intro p{font-family:var(--display);font-size:clamp(1.4rem,3vw,2rem);opacity:.8}

.enter-link{display:inline-flex;gap:.6rem;align-items:center;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.enter-link .arr{transition:transform .4s}
.enter-link:hover{color:var(--ember)}
.enter-link:hover .arr{transform:translateX(6px)}

/* CACAO — warm archive */
.cacao{position:relative;background:linear-gradient(165deg,#2c1812,#1c1916 62%);color:var(--bone);overflow:hidden}
.cacao::before{content:"";position:absolute;top:-10%;left:-5%;width:55%;height:70%;background:radial-gradient(circle,rgba(78,4,3,.45),transparent 70%);pointer-events:none}
.cacao .label{color:var(--ember)}
.cacao-grid{position:relative;display:grid;grid-template-columns:.82fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media(max-width:820px){.cacao-grid{grid-template-columns:1fr}}
.cacao-visual .ph{aspect-ratio:3/4;border-radius:2px}
.cacao-visual .enter-link{margin-top:1.4rem}
.cacao h3{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:400}
.cacao .lead{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.4;opacity:.9;margin:1rem 0 2rem;max-width:40ch}
.strand{margin-bottom:1.8rem}
.strand .slabel{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ember);opacity:.85;border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:.4rem}
.strand a{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line);cursor:pointer;transition:color .3s}
.strand a:hover{color:var(--ember)}
.strand .t{font-family:var(--display);font-size:1.22rem;line-height:1.2}
.strand .m{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;opacity:.5;white-space:nowrap}

/* INNER CURRENT — quiet page */
.inner-room{text-align:center}
.inner-room .bigq{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.55rem,3.6vw,2.5rem);line-height:1.38;max-width:24ch;margin:0 auto 2.6rem;opacity:.9}
.inner-room .bigq .em{font-style:normal;color:var(--ember)}
.inner-room h3{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:400}
.inner-room .desc{opacity:.65;max-width:46ch;margin:.7rem auto 2rem}
.inner-list{max-width:560px;margin:0 auto 2.2rem}
.inner-list a{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line-dark);cursor:pointer;transition:color .3s;text-align:left}
.inner-list a:hover{color:var(--ember)}
.inner-list .t{font-family:var(--display);font-size:1.25rem}
.inner-list .m{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;opacity:.5;white-space:nowrap}

/* MOUNTAIN — cinematic dispatch */
.mountain{position:relative;min-height:90vh;display:flex;align-items:flex-end;color:var(--bone)}
.mountain .ph{position:absolute;inset:0}
.mountain .ph img{filter:sepia(.45) saturate(.7) brightness(.46) contrast(1.12)}
.mtn-body{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(1.25rem,4vw,3.25rem) clamp(3.5rem,7vw,6rem)}
.mtn-body .label{color:var(--ember);margin-bottom:1rem}
.mtn-body h3{font-family:var(--display);font-size:clamp(2.6rem,6vw,4.4rem);font-weight:300}
.mtn-body .desc{opacity:.82;max-width:44ch;margin:.8rem 0 0;font-size:.98rem}
.timeline{border-left:1px solid rgba(241,236,229,.3);padding-left:1.7rem;margin:2.2rem 0 1.8rem;max-width:520px}
.timeline a{display:block;padding:.7rem 0;position:relative;cursor:pointer;transition:color .3s}
.timeline a:hover{color:var(--ember)}
.timeline a::before{content:"";position:absolute;left:calc(-1.7rem - 4px);top:1.1rem;width:7px;height:7px;border-radius:50%;background:var(--ember)}
.timeline .date{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);opacity:.9}
.timeline .t{font-family:var(--display);font-size:1.45rem;display:block;margin-top:.15rem}

/* WARDROBE — lookbook */
.wardrobe .sec-head{margin-bottom:2.2rem}
.lookbook{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.2rem);margin-bottom:2.4rem}
@media(max-width:680px){.lookbook{grid-template-columns:1fr 1fr}}
.lookbook .ph{aspect-ratio:3/4;border-radius:2px;overflow:hidden}
.ward-foot{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap;border-top:1px solid var(--line-dark);padding-top:1.4rem}
.ward-foot a.piece{cursor:pointer}
.ward-foot .t{font-family:var(--display);font-size:1.5rem}
.ward-foot .t:hover{color:var(--ember)}
.ward-foot .soon{font-style:italic;font-family:var(--display);opacity:.5;font-size:1.05rem}

/* graceful empty state for rooms with no writing yet */
.empty-note{font-family:var(--display);font-style:italic;opacity:.5;font-size:1.08rem;padding:.6rem 0;display:block}

/* FIND */
.find .flead{text-align:center;display:block;color:var(--ember);margin-bottom:1.5rem}
.search-box{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:999px;max-width:620px;margin:0 auto 2.8rem;padding:.25rem .35rem .25rem 1.5rem}
.search-box .mg{opacity:.5;font-size:1rem}
.search-box input{flex:1;background:transparent;border:none;color:var(--bone);padding:.95rem .6rem;font-family:var(--body);font-size:1rem;outline:none}
.search-box input::placeholder{color:rgba(241,236,229,.42)}
.search-box button{background:var(--ember);color:var(--bone);border:none;padding:.8rem 1.6rem;border-radius:999px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;font-family:var(--body)}
.filters{max-width:760px;margin:0 auto;text-align:center}
.filters .grp{margin-bottom:1.6rem}
.filters .grp:last-child{margin-bottom:0}
.filters .flabel{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-bottom:.9rem}
.cat{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.cat a{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.55rem 1.1rem;border:1px solid var(--line);border-radius:999px;opacity:.78;transition:all .3s;cursor:pointer}
.cat a:hover{opacity:1;border-color:var(--ember);color:var(--ember)}

/* LETTERS */
.letters{text-align:center;position:relative;overflow:hidden}
.letters .ph{position:absolute;inset:0;opacity:.5}
.letters .wrap{position:relative;z-index:2}
.letters h2{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:300}
.letters p{max-width:50ch;margin:1.2rem auto 2.4rem;opacity:.8}
.subscribe{display:flex;max-width:440px;margin:0 auto;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.subscribe input{flex:1;background:transparent;border:none;color:var(--bone);padding:1rem 1.4rem;font-family:var(--body);font-size:.9rem;outline:none}
.subscribe input::placeholder{color:rgba(241,236,229,.45)}
.subscribe button{background:var(--ember);color:var(--bone);border:none;padding:0 1.8rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;font-family:var(--body)}
.letters .fine{font-size:.74rem;opacity:.5;margin-top:1.6rem}

/* Site footer is the shared #site-footer, styled by /shell.css. */

/* scroll-reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.scroll-cue .line{animation:none}.ph img{transition:none}}

/* ============================ ROOM PAGE ============================ */
.rhero{position:relative;height:84vh;min-height:560px;display:flex;align-items:flex-end}
.rhero .ph{position:absolute;inset:0}
.rhero .ph img{filter:sepia(.62) saturate(1) brightness(.5) contrast(1.08)}
.rhero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(1.25rem,4vw,3.25rem) clamp(3rem,6vw,5rem)}
.crumb{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;opacity:.7;margin-bottom:1.6rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:var(--ember)}
.rhero h1{font-size:clamp(3.4rem,9vw,6.5rem);font-weight:300}
.rhero .sub{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,2.6vw,1.8rem);opacity:.9;margin-top:.7rem;max-width:30ch}

.intro-lead{position:relative;font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.42;max-width:760px}
.begin-block{position:relative;margin-top:clamp(2.8rem,5vw,4rem)}
.begin-label{color:var(--ember);display:block;margin-bottom:1.3rem}
.begin-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:760px){.begin-rail{grid-template-columns:1fr}}
.begin-rail a{border:1px solid var(--line);border-radius:2px;padding:1.6rem;cursor:pointer;transition:border-color .3s,background .3s}
.begin-rail a:hover{border-color:var(--ember);background:rgba(196,71,14,.06)}
.begin-rail .n{font-family:var(--display);font-size:1.6rem;color:var(--ember);opacity:.6;display:block;margin-bottom:.7rem}
.begin-rail h4{font-family:var(--display);font-size:1.3rem;font-weight:400;line-height:1.2}
.begin-rail .meta{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-top:.7rem}

.shelves-label{position:relative;color:var(--ember);display:block;margin-bottom:2.4rem}
.room-strand{position:relative;margin-bottom:clamp(2.8rem,5vw,4.5rem);scroll-margin-top:90px}
.room-strand:last-of-type{margin-bottom:0}
.shelf-head{display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.8rem;flex-wrap:wrap}
.shelf-name{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:400}
.shelf-desc{font-family:var(--display);font-style:italic;font-size:1.1rem;opacity:.6}
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,2rem)}
@media(max-width:860px){.ccards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ccards{grid-template-columns:1fr}}
.ccards.two{grid-template-columns:repeat(2,1fr);max-width:760px}
@media(max-width:560px){.ccards.two{grid-template-columns:1fr}}
.ccard{display:block;cursor:pointer;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:rgba(255,255,255,.02);transition:border-color .3s}
.ccard:hover{border-color:rgba(196,71,14,.5)}
.ccard .ph{aspect-ratio:4/3}
.ccard .cbody{padding:1.3rem 1.4rem 1.5rem}
.ccard .kicker{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);opacity:.85}
.ccard h4{font-family:var(--display);font-size:1.45rem;font-weight:400;line-height:1.18;margin:.6rem 0 .5rem;transition:color .3s}
.ccard:hover h4{color:var(--ember)}
.ccard p{font-size:.9rem;opacity:.66;line-height:1.6}
.ccard .read{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.45;margin-top:.9rem}

.others{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.5rem}
@media(max-width:760px){.others{grid-template-columns:1fr}}
.others a{display:block;padding:1.6rem 0;border-top:1px solid var(--line-dark);transition:color .3s}
.others a:hover{color:var(--ember)}
.others .label{opacity:.5;margin-bottom:.6rem}
.others h4{font-family:var(--display);font-size:1.6rem;font-weight:400}

/* ============================ READING PAGE ============================ */
.r-hero{position:relative;height:60vh;min-height:420px;display:flex;align-items:flex-end;color:var(--bone)}
.r-hero .ph{position:absolute;inset:0}
.r-hero-body{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(1.25rem,4vw,3.25rem) clamp(2.5rem,5vw,4rem)}
.r-hero .crumb{opacity:.8}
.r-hero .label{color:var(--bone);opacity:.85;margin-bottom:1.2rem}
.r-hero h1{font-family:var(--display);font-size:clamp(2.6rem,6.5vw,5rem);font-weight:300;max-width:18ch}
.r-meta{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8;margin-top:1.4rem}
.reading-surface{background:var(--bone);color:var(--ink)}
.article{max-width:var(--read);margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1.25rem,4vw,3.25rem)}
.article > p{font-size:1.12rem;line-height:1.85;margin-bottom:1.5rem}
.article > p:first-of-type::first-letter{font-family:var(--display);font-size:4.4rem;line-height:.78;float:left;padding:.06em .12em 0 0;color:var(--ember)}
.article h2{font-family:var(--display);font-size:2rem;font-weight:400;margin:2.8rem 0 1rem}
.article h3{font-family:var(--display);font-size:1.55rem;font-weight:500;margin:2rem 0 .8rem}
.article ul,.article ol{margin:0 0 1.5rem 1.3rem;font-size:1.08rem;line-height:1.8}
.article li{margin-bottom:.5rem}
.article a:not(.lib-btn):not(.lib-cta){color:var(--ember);text-decoration:underline;text-underline-offset:2px}
.article strong{font-weight:600}
.article hr{border:0}

/* editorial components — shortcode output (.lib-*) styled to the reading aesthetic */
.lib-lead,.c-lead{font-family:var(--display);font-size:1.55rem;line-height:1.5;margin-bottom:2rem;color:var(--ink)}
.lib-pull,.c-pullquote{font-family:var(--display);font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.32;margin:2.6rem 0;padding-left:1.5rem;border-left:2px solid var(--ember);text-align:left}
.lib-pull p{margin:0;font-size:inherit;color:inherit;font-weight:inherit;line-height:inherit}
.lib-pull cite,.lib-quote cite{display:block;margin-top:.8rem;font-family:var(--body);font-style:normal;font-size:.78rem;letter-spacing:.06em;opacity:.6}
.lib-quote{font-family:var(--display);font-style:italic;font-size:1.4rem;line-height:1.4;margin:2.2rem 0;padding-left:1.4rem;border-left:2px solid rgba(28,25,22,.2)}
.lib-callout,.c-callout{background:var(--ink);color:var(--bone);padding:1.8rem 2rem;border-radius:2px;margin:2.4rem 0}
.lib-callout p:last-child{margin-bottom:0}
.lib-callout .label,.c-callout .label{color:var(--ember);display:block;margin-bottom:.7rem}
.lib-callout--warn{box-shadow:inset 3px 0 0 var(--ember)}
.lib-fig,.c-figure{margin:2.8rem 0}
.lib-fig .ph,.c-figure .ph{aspect-ratio:3/2;border-radius:2px}
.lib-fig img{width:100%;height:auto;display:block;border-radius:2px}
figcaption{font-size:.78rem;opacity:.55;margin-top:.7rem}
.lib-fullbleed{margin:3rem calc(50% - 50vw);width:100vw}
.lib-fullbleed img{width:100%;height:auto;display:block}
.lib-fullbleed figcaption{max-width:var(--read);margin:.7rem auto 0;padding:0 clamp(1.25rem,4vw,3.25rem)}
.lib-multi{display:grid;gap:.8rem;margin:2.4rem 0}
.lib-multi--2{grid-template-columns:1fr 1fr}
.lib-multi--3{grid-template-columns:1fr 1fr 1fr}
.lib-multi img,.lib-gallery img{width:100%;height:100%;object-fit:cover;border-radius:2px;aspect-ratio:4/5}
.lib-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin:2.4rem 0}
.lib-gallery figure,.lib-multi figure{margin:0}
.lib-divider{height:1px;background:rgba(28,25,22,.18);max-width:80px;margin:3rem auto}
.lib-video{position:relative;aspect-ratio:16/9;margin:2.4rem 0}
.lib-video iframe,.lib-video video{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:2px}
.lib-audio{margin:2.4rem 0}.lib-audio audio{width:100%}
.lib-cta,.c-cta{display:block;background:var(--ink);color:var(--bone);text-align:center;padding:3rem 2rem;border-radius:2px;margin:3rem 0}
.lib-cta-text{font-family:var(--display);font-size:1.9rem;display:block;margin-bottom:.4rem}
.lib-cta-sub{opacity:.8;font-size:.95rem}
.c-cta h3{font-family:var(--display);font-size:1.9rem;font-weight:400;margin-bottom:.6rem}
.c-cta p{opacity:.8;margin-bottom:1.6rem}
.lib-btn,.c-button{display:inline-block;background:var(--ember);color:var(--bone);padding:.95rem 2rem;border-radius:999px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;margin-top:1.4rem}
.lib-cta .lib-btn{margin-top:1.6rem}

/* article FAQ + footer nav */
.lib-faq{max-width:var(--read);margin:0 auto;padding:0 clamp(1.25rem,4vw,3.25rem) clamp(2rem,4vw,3rem)}
.lib-faq h2{font-family:var(--display);font-size:1.8rem;font-weight:400;margin-bottom:1rem}
.lib-faq details{border-top:1px solid rgba(28,25,22,.14);padding:1rem 0}
.lib-faq summary{cursor:pointer;font-weight:500;list-style:none}
.lib-faq summary::-webkit-details-marker{display:none}
.lib-faq details[open] summary{color:var(--ember)}
.article-foot{max-width:var(--read);margin:0 auto;padding:2rem clamp(1.25rem,4vw,3.25rem) clamp(3rem,6vw,5rem);border-top:1px solid rgba(28,25,22,.14);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.article-foot a:hover{color:var(--ember)}

@media(max-width:640px){.lib-multi--2,.lib-multi--3{grid-template-columns:1fr}}