/* ──────────────────────────────────────────────────────────────────────────
   Khustup — the Classical design system, as the site uses it.
   Tokens are copied verbatim from classical.css; only what this site actually
   renders is reproduced, so one small stylesheet ships instead of the full
   system plus a render-blocking Google Fonts import.
   ────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;
 src:url(../fonts/cormorant-garamond-latin.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;
 src:url(../fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 600;font-display:swap;
 src:url(../fonts/lora-latin.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 600;font-display:swap;
 src:url(../fonts/lora-latin-ext.woff2) format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Real italics, in both alphabets. Without them the browser slants the
   upright face, which shows as uneven stroke weights and broken joins — most
   visible in Armenian, where the letterforms are not built to lean. */
@font-face{font-family:'Lora';font-style:italic;font-weight:400 600;font-display:swap;
 src:url(../fonts/lora-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:italic;font-weight:400 600;font-display:swap;
 src:url(../fonts/lora-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:italic;font-weight:300 700;font-display:swap;
 src:url(../fonts/khustup-armenian-italic.woff2) format('woff2');unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
 src:url(../fonts/khustup-armenian-italic.woff2) format('woff2');unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}

/* Armenian — Arian AMU, cut down to the Armenian block.
   Cormorant Garamond and Lora contain no Armenian glyphs at all, so without
   this every Armenian word falls back to whatever serif the visitor's device
   happens to own. Arian AMU is an Armenian design rather than a Latin family
   extended sideways — Ruben Hakobyan (Tarumian), version 4.003, under the SIL
   Open Font License; the licence sits in docs/licences/.

   It ships covering Armenian, Latin, Greek, Cyrillic, Georgian and Hebrew, and
   this site draws one of those, so the faces here are subsetted to the range
   declared below and nothing else — 20 KB instead of 88. Subsetting makes a
   modified version under the OFL, which may not carry the reserved name, so the
   files are called Khustup Armenian and say inside themselves what they were
   cut from. tools/build-armenian-font.py rebuilds them.

   Attached to the same family names under the Armenian unicode-range, so the
   browser chooses per character. A donor card reading "Պատուհան 65 ·
   VM06507251C" gets the Armenian face for the name and Cormorant for the
   serial, on one line, with no class to remember.

   Two weights, where the face this replaced had four. Arian AMU is drawn
   regular and bold and
   nothing between, so 300–500 all take the regular and 600–700 the bold: a
   request for 500 gets a real 400 rather than a browser's smeared imitation of
   a weight that was never drawn. */
@font-face{font-family:'Khustup Armenian';font-style:normal;font-weight:300 500;font-display:swap;
 src:url(../fonts/khustup-armenian-regular.woff2) format('woff2');unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:'Khustup Armenian';font-style:normal;font-weight:600 700;font-display:swap;
 src:url(../fonts/khustup-armenian-bold.woff2) format('woff2');unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:'Khustup Armenian';font-style:italic;font-weight:300 700;font-display:swap;
 src:url(../fonts/khustup-armenian-italic.woff2) format('woff2');unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;
 src:url(../fonts/khustup-armenian-regular.woff2) format('woff2');unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600 700;font-display:swap;
 src:url(../fonts/khustup-armenian-bold.woff2) format('woff2');unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:'Lora';font-style:normal;font-weight:300 500;font-display:swap;
 src:url(../fonts/khustup-armenian-regular.woff2) format('woff2');unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:'Lora';font-style:normal;font-weight:600 700;font-display:swap;
 src:url(../fonts/khustup-armenian-bold.woff2) format('woff2');unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}

:root{
  --ground:#201f1d; --surface:#26241f;
  --accent:#b68235; --accent-400:#e1ad66; --accent-300:#f0c88c;
  --on-strong:#f8f4f4; --on:#f3f2f2; --on-muted:rgba(243,242,242,.82);
  --on-dim:rgba(243,242,242,.55); --hair:rgba(243,242,242,.14);
  --font-heading:"Cormorant Garamond",Georgia,serif;
  --font-body:"Lora",Georgia,serif;
  --radius:4px;
  --pad:clamp(20px,4vw,52px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--on);font-family:var(--font-body);
 -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent-400);text-decoration:none}
a:hover{color:var(--accent-300)}
::placeholder{color:rgba(243,242,242,.45)}
::selection{background:rgba(182,130,53,.35)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}

@keyframes kh-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes kh-breathe{0%,100%{opacity:.35}50%{opacity:1}}

/* ── the fixed mountain backdrop ─────────────────────────────────────────── */
.kh-bg{position:fixed;inset:0;z-index:0}
/* The design specifies 57% 40%, but the summit sits in the top 8-25% of the
   photograph, so on a wide viewport — and with the admin bar pushing the page
   down — the peak reaches the very top edge with no sky above it. 26% keeps it
   clear at every ratio the site is likely to meet. */
/* The photograph was being taken down to a third of its brightness and then
   covered by a scrim reaching 92% black at the edges — between them the
   mountains were a rumour. Lifted to a little over half, with the scrim eased
   to match: the landscape is legible as a landscape, and the headline still
   has enough ground under it to read against. */
.kh-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 object-position:57% 26%;filter:sepia(.22) saturate(.7) contrast(1.05) brightness(.34)}

/* Portrait crops sideways instead, so the vertical value stops mattering and
   the horizontal one has to hold the peak in frame. */
@media (max-aspect-ratio: 1/1){
  .kh-bg img{object-position:62% 30%}
}
.kh-bg__scrim{position:absolute;inset:0;
 background:radial-gradient(120% 90% at 50% 42%,rgba(32,31,29,.35),rgba(32,31,29,.92) 72%)}

/* ── header ──────────────────────────────────────────────────────────────── */
.kh-header{position:fixed;top:var(--admin-bar,0px);left:0;right:0;z-index:40;display:flex;align-items:center;
 justify-content:space-between;gap:18px;padding:18px var(--pad);
 background:linear-gradient(180deg,rgba(32,31,29,.86),rgba(32,31,29,0))}
.kh-wordmark{display:inline-flex;align-items:center;flex:none;gap:clamp(9px,1.2vw,14px);
 font-family:var(--font-heading);font-size:clamp(16px,2.4vw,20px);letter-spacing:.02em;
 color:var(--on);white-space:nowrap}
/* The geodesic mark. Sized off the wordmark rather than fixed, so the two stay
   in proportion as the type scales, and set a shade below the cap height —
   a lattice reads heavier than letterforms at the same box size. */
/* Square and explicit. With width:auto the header's flex row squeezed the
   mark to 5px wide while keeping its height — a replaced element with only a
   height set is at the mercy of the row it sits in. The artwork is 200×200, so
   the two values are the same number. */
.kh-wordmark__mark{width:2.05em;height:2.05em;min-width:2.05em;flex:none;display:block}
@media(max-width:520px){
  /* The words used to be hidden here, because at the time the nav shared this
     line and they pushed it off the edge. It does not any more — below 560px
     the nav takes a line of its own — so the name comes back beside the mark,
     where it belongs. It is allowed to wrap rather than run off a 320px
     screen, which is the one thing nowrap could not survive. */
  .kh-wordmark{white-space:normal;line-height:1.15;align-items:center}
  .kh-wordmark span{max-width:calc(100vw - 2*var(--pad) - 3.4em)}
  .kh-wordmark__mark{width:2.4em;height:2.4em;min-width:2.4em}
}

/* The header fades to nothing at its lower edge, which is right over a hero
   photograph and wrong over a page that scrolls: the nav ends up printed on
   top of whatever passes beneath it, and on a phone every page scrolls. Below
   the breakpoint it gets a ground of its own. Desktop keeps the gradient — the
   pages that matter there are a single screen, and the fade is the design. */
@media(max-width:900px){
  .kh-header{background:rgba(32,31,29,.94);backdrop-filter:blur(10px);
   border-bottom:1px solid rgba(243,242,242,.10)}
}

/* Four Armenian nav labels plus the language switch need 343px; a phone header
   has about 366px once the mark and the padding are taken out. Rather than
   shrink the type until it is hard to hit, the nav takes a line of its own. */
@media(max-width:560px){
  .kh-header{flex-wrap:wrap;row-gap:4px;padding-bottom:12px}
  /* Wrapping, because the estimate above holds for English and not for
     Armenian: "Գմբեթը Օրագիր Մեր մասին Աջակցել" plus the language switch wants
     411px in a 360px row, and nowrap put EN/HY thirty pixels off the screen.
     A second line is not elegant; a language switch nobody can reach is worse.

     Written as `.kh-header .kh-nav` rather than `.kh-nav`: the base rules below
     are later in the file and at equal specificity they were quietly winning,
     so the gap this block asked for had never applied. With them applying, the
     gap comes down to 10px — English then needs 351px of the 360 available and
     stays on one line, while Armenian, which wants 411, still wraps. */
  .kh-header .kh-nav{width:100%;justify-content:flex-start;gap:10px;font-size:13px;
   flex-wrap:wrap;row-gap:7px}
  .kh-header .kh-nav a{font-size:13px}
  .kh-header .kh-lang{margin-left:auto;gap:7px;
   margin-left:auto;padding-left:9px}
}
.kh-nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.kh-nav a{font-size:13.5px;color:rgba(243,242,242,.72);white-space:nowrap}
/* A menu built in WordPress arrives wrapped in <ul><li>. `display:contents`
   drops those boxes out of the layout entirely, so the links become flex
   items just as the theme's own do — same spacing, no bullets, and the
   markup stays the semantic list a screen reader expects. */
.kh-nav ul,.kh-nav li,.kh-footer__col ul,.kh-footer__col li{display:contents}

/* Language switch. Two codes divided by a hairline — small enough to sit in
   the nav without competing with it, explicit enough that nobody has to guess
   what a flag means. */
.kh-lang{display:flex;align-items:center;gap:8px;margin-left:clamp(6px,1.4vw,14px);
 padding-left:clamp(10px,1.6vw,18px);border-left:1px solid rgba(243,242,242,.18);
 font-size:12px;letter-spacing:.08em}
.kh-lang a{color:rgba(243,242,242,.5)}
.kh-lang a:hover{color:var(--accent-400)}
.kh-lang__on{color:var(--on-strong)}

/* Small type is identical in both languages: same size, same capitals, same
   tracking. Armenian does not conventionally use letter-spaced capitals, but
   dropping them made one label look like two different sizes, and consistency
   matters more here than being idiomatic.

   The display headline is the exception, and for a mechanical reason rather
   than a stylistic one: Armenian sets wider than Latin, so the same sentence
   ran to three lines at 78px where the English takes two. Measured on the
   real copy, 56px is where it comes back to two. */
:lang(hy) .kh-h1{font-size:clamp(28px,4.6vw,60px);font-weight:300;letter-spacing:0}

/* Small type in Armenian.
   The design tracks its labels out to .18em, a Latin display device. Armenian
   letterforms are already visually separate and have finer strokes than a
   Latin serif at the same size, so at 11px that tracking pulls them apart and
   the strokes go spindly — "Պատուհան 35" read as spaced-out capitals rather
   than a word. Same size, same capitals: only the tracking closes up and the
   weight comes up one step, which is what the strokes need to hold. */
:lang(hy) .kh-kicker,
:lang(hy) .kh-legend,
:lang(hy) .kh-selected .ref,
:lang(hy) .kh-footer__head,
:lang(hy) .kh-post time,
:lang(hy) .kh-scroll span{letter-spacing:.05em;font-weight:500}
:lang(hy) .kh-count span,
:lang(hy) .kh-selected .meta,
:lang(hy) .kh-homecount__note,
:lang(hy) .kh-footer__note{font-weight:500}
/* The wordmark sits beside a drawn mark; the Armenian face at 400 reads lighter
   than Cormorant does at the same size, and the pair looked mismatched.
   Arian AMU has no medium, so 500 lands on its regular and the Armenian is
   unchanged — but the rule is not idle: an Armenian page still carries Latin
   digits and names, and those take Cormorant's real 500. */
:lang(hy) .kh-wordmark{font-weight:500}
/* No size override for Armenian. An earlier version eased the display sizes
   back, reasoning that Armenian glyphs sit larger on the body — but the rule
   keys off the page's language, not the script of the words in it, so English
   text on an Armenian page was shrunk too, and the two versions of the same
   page no longer matched. One size, both languages. */
.kh-nav li::marker,.kh-footer__col li::marker{content:''}
.kh-nav a:hover,.kh-nav a[aria-current]{color:var(--accent-400)}
.kh-sound{flex:none;display:none;align-items:center;justify-content:center;width:42px;height:42px;
 padding:0;border-radius:999px;background:rgba(248,244,244,.08);
 border:1px solid rgba(225,173,102,.55);color:var(--accent-400);cursor:pointer;
 backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.kh-sound[data-ready]{display:inline-flex}
.kh-sound:hover{background:rgba(225,173,102,.18)}
.kh-sound .icon-on{display:none}
.kh-sound[aria-pressed="true"] .icon-on{display:block}
.kh-sound[aria-pressed="true"] .icon-off{display:none}
.kh-sound svg{display:block}

/* ── shared type ─────────────────────────────────────────────────────────── */
.kh-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-400);
 font-feature-settings:'tnum'}
/* A headline broken into lines by hand. Wrapping part of a heading in a <span>
   in the Customizer puts it on a line of its own, shrink-to-fit rather than
   full width, so "What Is the Meaning of Life? / Know Thyself." sets as two
   lines without anybody typing markup for a break.
   Was in Appearance → Customize → Additional CSS on the live site; moved into
   the theme 7 September 2026 so the live CSS box can be emptied. */
.kh-h1 span{display:block;width:max-content;max-width:100%}
.kh-h1{font-family:var(--font-heading);font-weight:400;font-size:clamp(38px,5vw,68px);
 line-height:1.04;letter-spacing:-.02em;margin:0;color:var(--on-strong);text-wrap:balance}
.kh-h2{font-family:var(--font-heading);font-weight:400;font-size:clamp(26px,3.2vw,40px);
 line-height:1.1;letter-spacing:-.015em;margin:0;color:var(--on-strong);text-wrap:balance}
.kh-lede{font-size:clamp(15px,1.3vw,17px);line-height:1.68;margin:0;color:var(--on-muted);
 text-wrap:pretty}
.kh-rule{width:88px;height:1px;background:rgba(225,173,102,.85)}
.kh-section{position:relative;z-index:10;background:var(--ground);
 border-top:1px solid var(--hair);padding:clamp(56px,7vw,104px) var(--pad)}
.kh-wrap{max-width:1180px;margin:0 auto}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
 font-family:var(--font-heading);font-weight:600;font-size:14px;line-height:1.2;
 background:transparent;border:1px solid transparent;border-radius:var(--radius);
 padding:13px 24px;min-height:48px;white-space:nowrap}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* The primary button sits over a moving 3D scene, so an outline alone loses
   the fight. It stays an outlined button — the design is explicit about that —
   but gains a faint wash, a blur behind it and a brighter edge, which is what
   makes it read as a control rather than as a caption. */
.btn-primary{color:var(--accent-300);border-color:var(--accent-400);border-width:1.5px;
 background:color-mix(in srgb,var(--accent) 14%,transparent);
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 box-shadow:0 1px 18px rgba(0,0,0,.28);
 letter-spacing:.02em;padding:14px 28px;
 transition:background .18s,border-color .18s,color .18s}
.btn-primary:not(:disabled):hover{background:color-mix(in srgb,var(--accent) 26%,transparent);
 border-color:var(--accent-300);color:var(--on-strong)}
.btn-primary:not(:disabled):active{background:color-mix(in srgb,var(--accent) 34%,transparent)}
.kh-textlink{background:none;border:0;padding:6px 0;cursor:pointer;font-family:var(--font-body);
 font-size:14px;color:rgba(243,242,242,.7);border-bottom:1px solid rgba(243,242,242,.3)}
.kh-textlink:hover{color:var(--accent-300)}

/* ── home ────────────────────────────────────────────────────────────────── */
/* The copy starts directly under the header. Bottom-aligned it left a tall
   empty band beneath the wordmark; centred, a smaller one. Either way the gap
   sat at the top of the page, where it reads as something missing. Below the
   copy the dome carries the rest of the screen, so the space that remains is
   filled rather than blank. The top padding is the header's height plus a
   little air. */
/* Same correction as .kh-lib-page: a screenful means the part of the screen
   the admin bar has not already taken. Nothing is clipped here — min-height
   only grows the box — but it left the hero hanging a bar's height below the
   fold for anyone logged in. */
.kh-hero{position:relative;z-index:10;
 min-height:calc(100vh - var(--admin-bar,0px));
 min-height:calc(100svh - var(--admin-bar,0px));display:flex;
 flex-direction:column;justify-content:flex-start;
 padding:calc(var(--admin-bar,0px) + 116px) var(--pad) clamp(34px,4vw,52px);
 pointer-events:none}
.kh-hero > *{pointer-events:auto}
/* 540px was too narrow for a two-sentence Armenian headline: it broke inside
   the first sentence rather than between them. At 680px both sentences sit on
   a line of their own, and the English break point does not move — its second
   line was already wider than 540 and still fits inside 680. The paragraph and
   the counter keep their own narrower measures. */
.kh-hero__inner{max-width:min(680px,100%);display:flex;flex-direction:column;gap:20px}
.kh-count{display:flex;align-items:baseline;gap:9px;font-feature-settings:'tnum'}
.kh-count b{font-family:var(--font-heading);font-weight:400;font-size:clamp(32px,3.4vw,44px);
 line-height:1;color:var(--accent-400)}
/* 13px, not 13.5 — set on the live site and folded in here. */
.kh-count span{font-size:13px;color:rgba(243,242,242,.6)}
.kh-meter{position:relative;height:2px;background:rgba(243,242,242,.16)}
.kh-meter i{position:absolute;inset:0 auto 0 0;background:rgba(225,173,102,.9)}
.kh-scroll{display:flex;align-items:center;gap:10px;margin-top:clamp(26px,3vw,40px);font-size:11px;
 letter-spacing:.18em;text-transform:uppercase;color:rgba(243,242,242,.45)}
.kh-scroll svg{animation:kh-nudge 2.4s ease-in-out infinite}
.kh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:clamp(32px,4vw,64px)}

/* ── journal ─────────────────────────────────────────────────────────────── */
.kh-posts{display:flex;flex-direction:column}
.kh-post{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:clamp(26px,3vw,38px) 0;
 border-top:1px solid var(--hair)}
.kh-post:first-child{border-top:0}
.kh-post time{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dim);
 font-feature-settings:'tnum'}
.kh-post h3{margin:0;font-family:var(--font-heading);font-weight:400;
 font-size:clamp(22px,2.6vw,31px);line-height:1.14;color:var(--on-strong)}
.kh-post p{margin:0;font-size:15px;line-height:1.68;color:var(--on-muted);max-width:62ch}
@media(min-width:860px){.kh-post{grid-template-columns:150px minmax(0,1fr);gap:0 34px}
 .kh-post time{grid-row:1/3;padding-top:8px}}

/* ── article ─────────────────────────────────────────────────────────────── */
.kh-article{position:relative;z-index:10;max-width:720px;margin:0 auto;
 padding:clamp(110px,12vw,170px) var(--pad) clamp(60px,7vw,110px)}
.kh-article h2{font-family:var(--font-heading);font-weight:400;font-size:clamp(24px,2.8vw,34px);
 line-height:1.16;margin:2em 0 .5em;color:var(--on-strong)}
.kh-article h3{font-family:var(--font-heading);font-weight:600;font-size:20px;margin:1.8em 0 .4em}
.kh-article p,.kh-article li{font-size:17px;line-height:1.75;color:var(--on-muted)}
.kh-article blockquote{margin:2em 0;padding-left:22px;border-left:1px solid rgba(225,173,102,.6);
 font-family:var(--font-heading);font-size:23px;line-height:1.4;color:var(--on-strong)}
.kh-article img{border-radius:var(--radius);margin:2em 0}
.kh-article figcaption{font-size:12.5px;color:var(--on-dim);margin-top:-1.4em}

/* ── footer ──────────────────────────────────────────────────────────────── */
.kh-footer{position:relative;z-index:10;margin-top:clamp(56px,7vw,96px);
 border-top:1px solid rgba(243,242,242,.14);background:#1a1917;color:var(--on);
 padding:clamp(40px,5vw,64px) var(--pad) 28px}
.kh-footer__grid{max-width:1180px;margin:0 auto;display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(28px,4vw,56px)}
.kh-footer__col{display:flex;flex-direction:column;gap:11px}
.kh-footer__mark{font-family:var(--font-heading);font-size:21px;line-height:1.15;
 color:var(--on-strong);max-width:220px}
.kh-footer__note{font-size:13px;line-height:1.65;color:rgba(243,242,242,.55)}
.kh-footer__head{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
 color:rgba(243,242,242,.45)}
.kh-footer__col a{align-self:start;font-size:14px;color:rgba(243,242,242,.8)}
.kh-footer__col a:hover{color:var(--accent-400)}
.kh-footer__tel{font-feature-settings:'tnum'}
.kh-footer__base{max-width:1180px;margin:clamp(30px,4vw,48px) auto 0;padding-top:18px;
 border-top:1px solid rgba(243,242,242,.1);display:flex;flex-wrap:wrap;gap:12px;
 justify-content:space-between;font-size:12px;color:rgba(243,242,242,.4)}

/* ── the dome page ───────────────────────────────────────────────────────── */
/* The dome page is one full screen with the controls laid over it, and the
   footer below the fold. Without a height on <main> the page collapses and the
   footer lands on top of the fixed canvas — which is what happened. Making the
   stage and HUD absolute inside a full-height main lets the whole thing scroll
   as one page instead of two layers fighting. */
.kh-dome-page{position:relative;z-index:10;
 min-height:calc(100vh - var(--admin-bar,0px));
 min-height:calc(100svh - var(--admin-bar,0px))}
.kh-dome-page .kh-stage,
.kh-dome-page .kh-hud{position:absolute}

/* The dome is part of the backdrop, not an object sitting on the page: it is
   full-bleed behind the content, drawn over the photograph's scrim. On the
   home page the design nudges it right and down-scales it slightly so the
   headline has clear space; on /dome it fills the frame square-on. */
.kh-stage{position:fixed;inset:0;z-index:1;
 transition:transform .8s cubic-bezier(.4,0,.2,1)}
.home .kh-stage{transform:translate(15%,-3%) scale(.95)}

/* On the home page the dome is scenery, not a control: it turns by itself but
   cannot be grabbed, hovered or clicked. Interaction belongs on /dome, which
   is where the search and the detail panel live. Blocking pointer events at
   the container is enough — the viewer binds all of its handlers there. */
.home .kh-stage,
.error404 .kh-stage{pointer-events:none}

/* The link that makes the home dome pressable. It covers the viewport beneath
   the hero, which is z-index 10 with its own pointer events — so the buttons
   and the wordmark keep working and everything else opens the dome. */
/* The wrapper is invisible to layout on a wide screen: the stage and the link
   inside it are both fixed, so display:contents keeps the flex column exactly
   as it was while giving the markup somewhere to express mobile order. */
.kh-domeblock{display:contents}
.kh-stage-link{position:fixed;inset:0;z-index:2;display:block;cursor:pointer}
/* display:contents dissolves the wrapper, so the link is not beneath the hero
   as the note above assumes — it is a sibling of the copy inside it, where
   z-index:2 beat the buttons and a viewport-sized invisible anchor swallowed
   the click on "Illuminate an axiom". Lift the real content above it; the
   dome keeps every part of the screen the copy does not occupy. */
.kh-hero__content > *:not(.kh-stage):not(.kh-stage-link){position:relative;z-index:3}
.kh-stage-link:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
.error404 .kh-stage{transform:translate(26%,6%) scale(.72)}
.kh-dome-page .kh-stage{transform:none}
.kh-stage canvas{display:block}
.kh-loading{position:absolute;inset:auto 0 50% 0;text-align:center;margin:0;
 font-family:var(--font-heading);font-size:20px;color:var(--on-dim);
 animation:kh-breathe 2.6s ease-in-out infinite}

.kh-hud{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;
 justify-content:space-between;padding:84px var(--pad) clamp(22px,3vw,38px);pointer-events:none}
.kh-hud > *{pointer-events:auto}
.kh-hud__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:18px}
.kh-hud__bottom{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px}

.kh-search{position:relative;width:min(360px,100%)}
.kh-search input{width:100%;padding:13px 15px;font:inherit;font-size:16px;color:var(--on-strong);
 background:rgba(248,244,244,.1);border:1px solid rgba(243,242,242,.35);border-radius:var(--radius)}
.kh-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:5;overflow:hidden;
 background:var(--surface);border:1px solid rgba(225,173,102,.35);border-radius:var(--radius)}
.kh-results button{display:flex;justify-content:space-between;gap:12px;width:100%;padding:11px 15px;
 font:inherit;font-size:14px;text-align:left;cursor:pointer;background:none;border:0;color:var(--on)}
.kh-results button:hover,.kh-results button:focus-visible{background:rgba(225,173,102,.16)}
.kh-results .ref{color:var(--on-dim);font-size:12px;font-feature-settings:'tnum'}
.kh-nomatch{margin:8px 0 0;font-size:13px;color:var(--on-dim)}

.kh-selected{display:flex;flex-direction:column;gap:5px;max-width:430px;padding:17px 21px;
 border:1px solid rgba(225,173,102,.5);border-radius:var(--radius);
 background:rgba(32,31,29,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.kh-selected{position:relative;padding-right:104px}  /* room for ‹ › × */
.kh-selected:focus{outline:none}
.kh-selected:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Zoomable only before the close-up: pressing the card is the shortcut to it. */
.kh-selected.is-zoomable{cursor:zoom-in;transition:border-color .18s,background .18s}
.kh-selected.is-zoomable:hover{border-color:var(--accent-400);background:rgba(38,36,31,.9)}
.kh-selected__tools{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.kh-selected__tools button{width:26px;height:26px;display:flex;align-items:center;
 justify-content:center;padding:0;cursor:pointer;background:none;
 border:1px solid rgba(225,173,102,.35);border-radius:999px;
 color:var(--accent-400);font:15px/1 system-ui}
.kh-selected__tools button:hover{background:rgba(225,173,102,.18);
 border-color:var(--accent-400)}
.kh-selected .ref{font-size:11px;letter-spacing:.18em;color:var(--accent-400);
 font-feature-settings:'tnum'}
/* The name is the attribution, and it is set the same way every time.
   It used to swell to display size on a window with no quote, on the reasoning
   that the card would otherwise have no focus — but a donor's name is not a
   headline, and the same person's name changing size between two windows reads
   as a fault rather than as emphasis. Same face, same accent as the reference
   line above it, italic to separate the person from the record. */
.kh-selected .name{font-family:var(--font-body);font-size:15px;
 line-height:1.35;font-style:italic;color:var(--accent-400)}
.kh-selected .name--free{color:var(--on-dim)}
.kh-selected .meta{font-size:12.5px;color:var(--on-dim)}
/* The donor's own words. Set in italic against a hairline, so it reads as a
   voice rather than as another field of the record. */
/* Deliberately upright. Arian AMU does ship a true italic and the theme loads
   it, but a quote is already set apart by its size and its place on the card;
   sloping it as well made the Armenian, which slopes further than the Latin at
   the same angle, look like it was falling over. */
.kh-selected .quote{margin:3px 0 4px;padding:0;max-width:34ch;border:0;
 font-family:var(--font-heading);font-size:clamp(20px,2.4vw,27px);line-height:1.22;
 font-style:normal;color:var(--on-strong)}
/* The Armenian face carries far more ink than Cormorant at the same point size,
   and Armenian words are longer — set to match, a quote ran to four lines and
   swallowed the card. Down a size, and a little more leading, since the
   Armenian ascenders and descenders need the room the smaller size takes. */
:lang(hy) .kh-selected .quote{font-size:clamp(16px,1.85vw,21px);line-height:1.32;
 max-width:30ch}

/* The legend names its three colours, and that was judged enough: the word
   over it and the way back out of a window both came off on the live site.
   #kh-reset is still in the markup and still toggled by dome.js — hiding it
   rather than deleting it keeps that code honest, and putting the word back is
   one line. Folded in from Additional CSS, 7 September 2026. */
.kh-legend .kh-kicker,
.kh-legend #kh-reset{display:none}
.kh-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:12px;
 color:var(--on-dim)}
.kh-legend span{display:inline-flex;align-items:center;gap:7px}
.kh-sw{width:11px;height:11px;border:1px solid rgba(225,173,102,.6);display:inline-block}
/* Exactly the colours dome-core paints, so the key cannot drift from the dome. */
.kh-sw--glazed{background:#e8bd7e}
.kh-sw--dedicated{background:#8a5f2c}
.kh-sw--free{background:#272420}

/* ── the home page on a phone ─────────────────────────────────────────────
   Full-bleed scenery does not survive a narrow screen: the paragraph sat over
   the brightest part of the dome and neither could be read. The dome becomes a
   band of its own between the headline and the text, and the hero starts at
   the top of the screen instead of being pushed to the bottom — the empty
   space above the kicker was the hero reserving a full viewport it no longer
   needs. */
@media(max-width:720px){
  .kh-hero{min-height:0;justify-content:flex-start;
   padding:calc(var(--admin-bar,0px) + 84px) var(--pad) clamp(30px,7vw,48px)}
  /* The header is two rows once the nav wraps, so the hero starts lower. */
  @media(max-width:560px){
    .kh-hero{padding-top:calc(var(--admin-bar,0px) + 118px)}
  }
  .kh-hero__inner{gap:16px}

  /* The dome sits straight under the headline. The negative top margin
     cancels the column's 16px gap for this one item — a flex gap cannot be
     dropped selectively any other way. */
  /* The dome renders low and small inside its own canvas: measured at 348×234
     in a 406×340 frame, with 79px of empty sky above it and 27 below. Moving
     the camera closer filled the band but cropped the base, so instead the
     canvas keeps its natural framing and only the empty part is cropped — the
     canvas is 139% of the band and sits 32% above it, both proportions taken
     from that measurement so they hold at any screen height. */
  .kh-domeblock{display:block;position:relative;overflow:hidden;
   height:min(34vh,250px);margin:-16px calc(var(--pad) * -1) 0}
  .home .kh-stage{position:absolute;left:0;right:0;top:-32%;height:139%;transform:none}
  .home .kh-stage-link{position:absolute;inset:0}

  /* The paragraph and the counter no longer compete with the dome for space. */
  .kh-hero .kh-lede{max-width:none}
}

@media(max-width:720px){
  .kh-hud{padding-top:76px}
  .kh-hud__top{flex-direction:column}
  .kh-search{width:100%}
  .kh-legend{font-size:11px;gap:6px 12px}
}

/* ── spec list on the about page ─────────────────────────────────────────── */
.kh-specs{display:grid;grid-template-columns:auto 1fr;gap:10px 26px;margin:22px 0 0;
 font-size:15px}
.kh-specs dt{font-family:var(--font-heading);color:var(--accent-400);white-space:nowrap}
.kh-specs dd{margin:0;color:var(--on-muted)}
.page-numbers{display:inline-block;padding:8px 12px;color:var(--on-dim)}
.page-numbers.current{color:var(--accent-400)}


/* WordPress pushes the page down by its admin bar, but a fixed header ignores
   that and ends up underneath it. Only logged-in users ever see this. */
body.admin-bar{--admin-bar:32px}
@media screen and (max-width:782px){body.admin-bar{--admin-bar:46px}}
body.admin-bar .kh-stage,
body.admin-bar .kh-hud{top:var(--admin-bar)}

/* ── holding page ─────────────────────────────────────────────────────────
   A page that is not ready yet. Centred and short, so it reads as a notice
   rather than as an article that ran out. */
.kh-holding{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;
 min-height:calc(100vh - 220px);padding:120px var(--pad) 80px}
.kh-holding__inner{max-width:620px;text-align:center}
.kh-holding .kh-h1{font-size:clamp(32px,5vw,58px);margin:14px 0 0}
.kh-holding .kh-rule{margin:26px auto 22px}
.kh-holding__body p{font-size:17px;line-height:1.75;color:var(--on-muted);margin:0 0 1em}
.kh-holding__body :last-child{margin-bottom:0}
.kh-holding__back{margin:32px 0 0}

/* Multi-page posts and pages — rarely used, but ugly unstyled. */
.kh-pagelinks{display:flex;gap:10px;margin-top:34px;font-size:13px;color:var(--on-dim)}
.kh-pagelinks a{color:var(--accent-400)}
/* [dome_button] in page content — the editor wraps a lone shortcode in <p>,
   so the spacing has to come from the button rather than from a style
   attribute the template used to add. */
/* The hero is the Home page's own content now, so the editor's plain h1, p
   and hr have to arrive looking like the design's kh-h1, kh-lede and rule. */
.kh-hero__content>h1{font-family:var(--font-heading);font-weight:400;line-height:1.02;
 letter-spacing:-.01em;color:var(--on-strong);font-size:clamp(38px,6.4vw,78px);margin:0}
.kh-hero__content>h2{font-family:var(--font-heading);font-weight:400;
 font-size:clamp(26px,3.4vw,40px);margin:0;color:var(--on-strong)}
.kh-hero__content>p{font-size:clamp(15px,1.35vw,17px);line-height:1.7;color:var(--on-muted);
 max-width:480px;margin:0}
.kh-hero__content>hr{width:86px;height:1px;border:0;background:rgba(225,173,102,.85);margin:0}
.kh-hero__content>*+*{margin-top:18px}
/* Buttons sit on one line; the paragraph around them is the flex item, not
   the links themselves, which would otherwise stretch to the column width. */
.kh-hero__actions,.kh-article>p:has(.kh-btnwrap){
 display:flex;flex-wrap:wrap;align-items:center;gap:16px;max-width:none;margin:0}
.kh-hero__actions .kh-btnwrap,.kh-article>p>.kh-btnwrap{margin:0}
.kh-homecount{display:flex;flex-direction:column;gap:11px;max-width:330px}
.kh-homecount__note{font-size:12px;line-height:1.55;color:rgba(243,242,242,.5)}

.kh-btnwrap{display:inline-block;margin-top:14px;margin-right:16px}
.kh-btnwrap:last-child{margin-right:0}
.kh-article .kh-btnwrap{margin-top:34px}

/* ═══ The Library — Tree of Knowledge ═══════════════════════════════════════
   The painting is a fixed 1536×1024 image and every hotspot coordinate is in
   those units, so the stage keeps that aspect ratio exactly and scales as one
   piece. Anything positioned against the tree is a child of .kh-lib-stagewrap
   and moves with it; anything positioned against the viewport is not. */

/* One screenful, and the tree gets nearly all of it — but not the strip the
   fixed header floats over. Starting at the very top put the crown under the
   header, where it could be seen and not clicked. */
/* One screenful — of what is actually on screen.
   WordPress pushes html down by the height of the admin bar, so a page asking
   for a flat 100svh ends that far below the fold and takes the search field
   with it. The bar was already being added to the top padding; it has to come
   off the height as well. For a logged-out visitor --admin-bar is 0 and this
   is exactly what it was before. */
/* The clearance for the fixed header is the stage's, not the page's.
   It used to be the page's top padding, and a `padding … !important` rule in
   Appearance → Customize → Additional CSS was cutting it to 35px — which on a
   phone is less than the two-line header is tall, so the header sat on the
   crown of the tree and the top of the painting could not be seen. Held here,
   on the box the tree actually lives in, the clearance survives whatever the
   page's own padding is set to. */
.kh-lib-page{position:relative;z-index:10;
 height:calc(100vh - var(--admin-bar,0px));
 height:calc(100svh - var(--admin-bar,0px));
 display:flex;flex-direction:column;
 padding:var(--admin-bar,0px) 0 0}

.kh-lib-intro{flex:0 0 auto;max-width:min(760px,92vw);margin:0 auto clamp(10px,1.6vh,20px);
 padding:0 var(--pad);text-align:center;display:flex;flex-direction:column;gap:7px;align-items:center}
.kh-lib-intro .kh-h1{font-size:clamp(26px,3.4vw,44px)}
.kh-lib-intro .kh-lede{font-size:14px;line-height:1.55}
.kh-lib-intro .kh-h1{margin:0}
.kh-lib-intro .kh-lede{margin:0;max-width:560px}
.kh-lib-count{display:flex;align-items:baseline;gap:9px;margin:0;
 font-feature-settings:'tnum';color:var(--on-muted);font-size:13.5px}
.kh-lib-count b{font-family:var(--font-heading);font-weight:400;font-size:30px;
 color:var(--accent);line-height:1}

/* The stage. aspect-ratio does the work the handoff's JS scale factor did —
   the browser keeps 3:2 and the canvas fills it, so no resize maths is needed
   and it cannot drift out of step with the hotspot coordinates. */
/* 35px, not the header's full height — a deliberate choice made on the live
   site and folded in here on 7 September 2026. On a wide window the header is
   a gradient that fades to nothing, so the very top of the artwork passing
   behind it costs nothing and the tree gets 57px more height. Under 900px the
   header has a ground of its own and is opaque, so there the clearance is the
   header's real measured height — see the mobile block. */
.kh-lib-stagewrap{position:relative;flex:1 1 auto;min-height:0;width:100%;
 margin:35px 0 0;overflow:hidden}
/* The ground behind the tree, faded in with the zoom by tree-core's fit().
   Behind the canvas, so the painting is never touched — this only fills the
   part of the frame the artwork left transparent. */
.kh-lib-stage{position:absolute;inset:0;
 background-color:rgba(20,19,17,var(--kh-veil,0));
 transition:background-color .12s linear}
.kh-lib-stagewrap .kh-loading{position:absolute;inset:auto 0 50% 0}

/* ── the masthead card ────────────────────────────────────────────────── */
.kh-lib-card{position:absolute;top:104px;left:20px;width:212px;z-index:20;
 padding:14px;background:rgba(24,23,21,.9);backdrop-filter:blur(8px);
 border:1px solid rgba(243,242,242,.14);border-radius:4px}
.kh-lib-card__title{margin:6px 0 10px;font-family:var(--font-heading);font-weight:400;
 font-size:23px;line-height:1.1;color:var(--on)}
.kh-lib-card__n{margin:0;display:flex;flex-direction:column;gap:1px;
 font-feature-settings:'tnum'}
.kh-lib-card__n b{font-family:var(--font-heading);font-weight:400;font-size:30px;
 line-height:1;color:var(--accent)}
.kh-lib-card__n span{font-size:11.5px;color:var(--on-dim)}

/* ── the glyphs, as CSS so the legend needs no images ─────────────────── */
.kh-lib-g{display:inline-block;width:16px;height:16px;border-radius:50%;flex:0 0 auto}
.kh-lib-g--library{background:radial-gradient(circle at 42% 38%,#f0574f,#d8232f 60%,#8e1219)}
/* Five petals and a gold eye — the same flower the search results draw and the
   same one painted on the tree. It used to be a cream disc with a thick gold
   ring, a shape that appears nowhere in the artwork: the legend was telling a
   reader to go and look for a bead. */
.kh-lib-g--transit{border-radius:0;box-shadow:none;width:17px;height:17px;
 background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23f7f2e6' stroke='%23c9a24a' stroke-width='1'%3E%3Cellipse cx='12' cy='6.8' rx='3.1' ry='4.6'/%3E%3Cellipse cx='12' cy='6.8' rx='3.1' ry='4.6' transform='rotate(72 12 12)'/%3E%3Cellipse cx='12' cy='6.8' rx='3.1' ry='4.6' transform='rotate(144 12 12)'/%3E%3Cellipse cx='12' cy='6.8' rx='3.1' ry='4.6' transform='rotate(216 12 12)'/%3E%3Cellipse cx='12' cy='6.8' rx='3.1' ry='4.6' transform='rotate(288 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23c9922e'/%3E%3C/svg%3E")}
.kh-lib-g--wanted{background:linear-gradient(135deg,#6d9040,#2c4419);
 border-radius:70% 0 70% 0;transform:rotate(-18deg);box-shadow:inset 0 0 0 1px rgba(226,187,110,.8)}

/* ── legend ───────────────────────────────────────────────────────────── */
.kh-lib-legend{position:absolute;top:50px;right:20px;width:212px;z-index:20;
 display:flex;flex-direction:column;gap:2px;padding:14px 14px 10px;
 background:rgba(24,23,21,.9);backdrop-filter:blur(8px);
 border:1px solid rgba(243,242,242,.14);border-radius:4px}
.kh-lib-legend .kh-kicker{margin-bottom:6px}
.kh-lib-legendrow{display:grid;grid-template-columns:18px 1fr auto;gap:4px 9px;
 align-items:center;padding:7px 0;background:none;border:0;border-top:1px solid rgba(243,242,242,.09);
 color:inherit;text-align:left;cursor:pointer;font:inherit}
.kh-lib-legendrow:first-of-type{border-top:0}
.kh-lib-legendrow__l{font-size:12.5px;color:var(--on)}
.kh-lib-legendrow__n{font-size:12.5px;color:var(--accent);font-feature-settings:'tnum'}
.kh-lib-legendrow__note{grid-column:2/4;font-size:11px;color:var(--on-dim);margin-top:-3px}
.kh-lib-legendrow:hover .kh-lib-legendrow__l{color:var(--accent)}

/* ── filter ───────────────────────────────────────────────────────────── */
.kh-lib-filterwrap{position:absolute;left:20px;bottom:20px;width:190px;z-index:30}
.kh-lib-filter{display:block;width:100%;text-align:left;cursor:pointer;font:inherit;
 padding:10px 12px;color:inherit;
 background:rgba(24,23,21,.9);backdrop-filter:blur(8px);
 border:1px solid rgba(243,242,242,.14);border-radius:4px}
.kh-lib-filter__row{display:flex;align-items:center;justify-content:space-between;
 gap:10px;margin-top:5px;color:var(--on)}
.kh-lib-filter__val{font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.kh-lib-filter[aria-expanded=true] svg{transform:rotate(180deg)}
.kh-lib-filter svg{transition:transform .18s ease;color:var(--accent)}
/* Opens upward: it sits at the foot of the stage, and a menu dropping below
   would fall off the painting entirely. */
.kh-lib-filtermenu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);
 padding:6px;background:rgba(10,14,11,.97);border:1px solid rgba(225,173,102,.45);
 border-radius:6px;display:flex;flex-direction:column}
.kh-lib-filtermenu button{display:grid;grid-template-columns:20px 1fr auto;gap:9px;
 align-items:center;padding:8px 9px;background:none;border:0;border-radius:4px;
 color:var(--on);font:inherit;text-align:left;cursor:pointer}
.kh-lib-filtermenu button:hover{background:rgba(243,242,242,.06)}
.kh-lib-filtermenu button[aria-selected=true]{background:rgba(225,173,102,.14)}
.kh-tree-opt__l{font-size:12.5px;letter-spacing:.03em;text-transform:uppercase}
.kh-tree-opt__n{font-size:12px;color:var(--on-dim);font-feature-settings:'tnum'}

/* ── search: results open upward, above the field ─────────────────────── */
.kh-lib-search{position:absolute;right:20px;bottom:20px;width:min(420px,52%);z-index:30;
 display:flex;flex-direction:column}
.kh-lib-search input{width:100%;height:44px;padding:0 14px;border-radius:6px;
 background:rgba(14,19,16,.82);border:1px solid rgba(225,173,102,.55);
 color:var(--on);font-family:var(--font-body);font-size:13.5px}
.kh-lib-search input::placeholder{color:var(--on-dim)}
/* Five rows, then scroll. At half the height of the stage it covered the very
   glyphs the search had just ringed, which is the one thing a reader is looking
   at while they read it. Short, it sits in the bottom corner beside the legend
   and leaves the canopy alone. */
.kh-lib-results{display:flex;flex-direction:column-reverse;max-height:min(288px,34vh);
 overflow:auto;overscroll-behavior:contain;margin-bottom:6px;border-radius:6px;
 background:rgba(10,14,11,.97);border:1px solid rgba(225,173,102,.35)}
.kh-tree-hit{display:grid;grid-template-columns:18px 1fr;gap:2px 10px;
 padding:9px 12px;background:none;border:0;border-top:1px solid rgba(243,242,242,.07);
 color:inherit;font:inherit;text-align:left;cursor:pointer}
.kh-tree-hit:hover{background:rgba(225,173,102,.1)}
.kh-tree-hit .kh-glyph{grid-row:1/3}
.kh-tree-hit__t{font-family:var(--font-heading);font-size:15px;color:var(--on)}
.kh-tree-hit__m{font-size:11.5px;color:var(--on-dim)}
.kh-tree-none{margin:0;padding:12px 14px;font-size:13px;color:var(--on-dim)}

/* ── hover card ───────────────────────────────────────────────────────── */
/* Fixed, not absolute: it is positioned from clientX/clientY, and it must be
   able to sit over the edge of the stage without being clipped by its overflow. */
.kh-lib-hover{position:fixed;top:0;left:0;z-index:60;width:310px;pointer-events:none;
 display:flex;gap:12px;padding:12px;border-radius:6px;
 background:rgba(12,17,14,.97);border:1px solid rgba(225,173,102,.4)}
.kh-tree-hover__cover{width:56px;height:84px;object-fit:cover;border-radius:2px;flex:0 0 auto}
.kh-tree-hover__title{margin:0;font-family:var(--font-heading);font-size:15px;color:var(--on);line-height:1.2}
.kh-tree-hover__author{margin:3px 0 0;font-size:11.5px;color:var(--on-muted)}
.kh-tree-hover__status{margin:6px 0 0;font-size:10.5px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--accent)}
.kh-tree-hover__owner{margin:5px 0 0;font-size:12px;color:var(--on)}
.kh-tree-hover__owner--none{color:var(--on-dim);font-style:italic}

/* ── details drawer ───────────────────────────────────────────────────── */
/* On the left, because everything you steer the page with is on the right —
   the legend that doubles as the status filter, the zoom column, and the search
   under them. Sliding in from that side put the book on top of the controls
   for reaching the next one. */
.kh-lib-drawer{position:absolute;top:130px;left:20px;bottom:34px;width:min(400px,46%);
 overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:50;padding:24px;
 background:rgba(12,17,14,.97);border:1px solid rgba(225,173,102,.5);border-radius:6px;
 transform:translateX(calc(-100% - 40px));transition:transform .2s cubic-bezier(.22,.61,.36,1)}
.kh-lib-drawer.is-open{transform:none}
.kh-tree-close{position:absolute;top:10px;right:12px;background:none;border:0;
 color:var(--on-dim);font-size:22px;line-height:1;cursor:pointer;padding:4px}
.kh-tree-close:hover{color:var(--accent)}
.kh-tree-drawer__status{display:flex;align-items:center;gap:8px;margin:0 0 14px;
 font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
/* Cover on the left; beside it the title, the branch and the one button.
   The column is `auto` rather than a number so it takes its width from the
   image, whatever the image has been sized to. */
.kh-tree-drawer__head{display:grid;grid-template-columns:auto 1fr;gap:18px;
 align-items:start;margin:0 0 20px}
.kh-tree-drawer__headtext{min-width:0}
/* 130×155 rather than the jacket's own 2:3. Set on the live site and folded in
   here; object-fit:cover crops the top and bottom of a tall jacket instead of
   squashing it. The phone keeps the same proportion at a smaller size. */
.kh-tree-drawer__cover{display:block;width:130px;height:155px;object-fit:cover;
 border-radius:3px;margin:0}
.kh-tree-drawer__title{margin:0;font-family:var(--font-heading);font-weight:400;
 font-size:23px;line-height:1.12;color:var(--on);overflow-wrap:break-word}
.kh-tree-drawer__author{margin:6px 0 0;font-size:14px;color:var(--on-muted)}
.kh-tree-drawer__path{margin:8px 0 0;font-size:11.5px;letter-spacing:.06em;color:var(--on-dim)}
.kh-tree-rows{margin:0;display:flex;flex-direction:column}
.kh-tree-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
 border-top:1px solid rgba(243,242,242,.1);font-size:12.5px}
.kh-tree-row dt{color:var(--on-dim);margin:0}
.kh-tree-row dd{margin:0;color:var(--on);text-align:right}
.kh-tree-drawer__action{margin-top:16px}
/* Outlined, gold, never a solid fill — the design system is explicit that gold
   is a stroke colour. The theme's own .btn is not in scope on this page. */
/* The description: prose, so it is set as prose — not another table row. */
/* Last, and last on purpose: it is the only part of the card you scroll in
   order to read, rather than scroll past to reach something else. */
.kh-tree-drawer__desc{margin:18px 0 2px;font-size:13.5px;line-height:1.62;
 color:var(--on-muted);white-space:pre-line}

/* Centred, not merely padded. This used to say display:inline-block, which
   threw away the flex centring the base .btn relies on while keeping its
   min-height:48px — so the box was stretched to 48 and the text stayed pinned
   to the top of it: 11.5px of space above the words and 20.5 below.
   The trailing sliver is letter-spacing, which puts a gap after the last letter
   and none before the first; half of it comes off the right padding. */
.kh-lib-drawer .btn{display:inline-flex;align-items:center;justify-content:center;
 min-height:42px;padding:11px 14px 11px calc(14px + .03em);border-radius:3px;
 border:1px solid var(--accent);background:none;color:var(--accent);cursor:pointer;
 font-family:var(--font-body);font-size:12.5px;letter-spacing:.06em;text-decoration:none}
.kh-lib-drawer .btn:hover{background:rgba(225,173,102,.14)}

@media (max-width:900px){
  /* The art board is 1536 wide and a phone is 390, so at fit-to-width a glyph
     is under two pixels — untappable. The tree stays, because it is the point
     of the page, but it becomes something you pinch into rather than the only
     way to reach a book: the legend turns into a row of filter chips, the
     search results become a plain browsable list, and the drawer arrives as a
     bottom sheet. This is the handoff's own mobile rule, plus the list, which
     is what makes it usable rather than merely faithful. */
  /* Content height, not screen height. min-height:100svh made sense while the
     tree owned the whole viewport; once the page stacks, it pinned a short
     column to the full screen and left a band of nothing between the search
     and the footer — which is what the page looked broken by. */
  /* One above the footer. The bottom sheet is position:fixed, but it is painted
     inside .kh-lib-page's stacking context — and .kh-footer is a later sibling
     at the same z-index, so the footer was drawn straight over it: the book's
     details stopped mid-sentence and the school's address carried on
     underneath them. Nothing else on this page overlaps the footer, so raising
     the page by one costs nothing and puts the sheet on top of it. */
  .kh-lib-page{height:auto;min-height:0;display:block;z-index:11;
   padding:var(--admin-bar,0px) 0 26px}

  /* The aspect ratio belongs to the stage, not the wrapper. Leaving it on the
     wrapper pinned that box to 3:2 and clipped everything stacked beneath it —
     the legend, the search and the list all disappeared. */
  /* Stacked, in the order someone reads them: the tree, the way back out of a
     category, the three counts, the twenty branches, then the search and
     whatever it found. The results live inside .kh-lib-search because on a
     desktop they open upward over the tree; here that would have put a list of
     fifty-five books above the field that produced them and pushed the field
     three thousand pixels down the page, so the field is reversed back on top
     of them and the whole column is ordered explicitly. */
  /* The header's real height, set by library.js — the fallback is the tallest
     the English header gets, so a phone with no JavaScript still clears it. */
  .kh-lib-stagewrap{display:flex;flex-direction:column;height:auto;aspect-ratio:auto;
   margin-top:var(--kh-header,98px);overflow:visible;flex:none;background:none}
  .kh-lib-stage{position:relative;inset:auto;width:100%;aspect-ratio:1536/1024;
   overflow:hidden;order:1}
  .kh-lib-legend{order:3}
  .kh-lib-cats{order:4}
  .kh-lib-search{order:5;flex-direction:column-reverse}
  .kh-lib-stagewrap .kh-loading{position:absolute;inset:auto 0 50% 0}

  /* legend → a row of chips */
  .kh-lib-legend{position:static;width:auto;margin:14px var(--pad) 0;padding:10px;
   display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:none;
   border:0;backdrop-filter:none}
  .kh-lib-legend .kh-kicker{display:none}
  .kh-lib-legendrow{grid-template-columns:16px 1fr;padding:9px 10px;
   background:rgba(24,23,21,.9);border:1px solid rgba(243,242,242,.14);border-radius:4px}
  .kh-lib-legendrow__n{grid-column:2;justify-self:start;font-size:14px}
  .kh-lib-legendrow__l{font-size:11px}
  .kh-lib-legendrow__note{display:none}
  .kh-lib-legendrow[aria-pressed=true]{border-color:var(--accent);background:rgba(225,173,102,.14)}

  /* search: a normal field with the list beneath it, not a panel over the tree */
  .kh-lib-search{position:static;width:auto;margin:16px var(--pad) 0}
  /* The header is fixed, so a plain scrollIntoView parks the first row behind
     it. scroll-margin is the browser's own answer to that. */
  .kh-lib-results{flex-direction:column;max-height:none;margin:8px 0 0;
   scroll-margin-top:calc(var(--admin-bar,0px) + 100px)}

  /* the branches — the plates, as a list a thumb can hit */
  .kh-lib-cats{display:block;margin:18px var(--pad) 0}
  .kh-lib-cats .kh-kicker{display:block;margin-bottom:8px}
  .kh-lib-cats__list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .kh-lib-cat{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
   gap:8px;padding:10px 11px;text-align:left;cursor:pointer;
   background:rgba(24,23,21,.9);border:1px solid rgba(243,242,242,.14);border-radius:4px;
   color:var(--on);font-family:var(--font-body);font-size:12px;line-height:1.3}
  .kh-lib-cat__n{font-size:10px;letter-spacing:.06em;color:var(--accent);
   font-feature-settings:'tnum'}
  .kh-lib-cat__c{font-size:11px;color:var(--on-dim);font-feature-settings:'tnum'}
  .kh-lib-cat[aria-pressed=true]{border-color:var(--accent);background:rgba(225,173,102,.14)}

  .kh-lib-zoom{display:none}          /* pinch instead */
  .kh-lib-hover{display:none}         /* no pointer to hover with */

  /* drawer → bottom sheet */
  /* Opaque, unlike the desktop panel. There the three per cent of translucency
     reads as a card floating over the tree; here the sheet covers a page of
     bright text, and that same three per cent leaves it ghosting through the
     book's own details. */
  /* A phone scrolls whatever is under the finger, and under the finger is the
     page. Dragging down the description moved the library instead and left the
     sheet sitting still with the footer rising behind it. The sheet contains
     its own overscroll; the page is held while it is open. Only here — on a
     desktop the drawer is a panel on a page that does not scroll. */
  body.kh-sheet-open{overflow:hidden}
  /* Sat on the visible bottom, not the layout one — library.js measures the
     gap Safari's toolbar takes and puts it in --kh-vv-bottom; it is 0 wherever
     there is nothing in the way. The safe-area inset is the other half of the
     same problem: once the toolbar has scrolled away the home indicator is
     still there, and that is what env() reports. The two never apply at once. */
  .kh-lib-drawer{position:fixed;inset:auto 0 var(--kh-vv-bottom,0px) 0;width:auto;
   max-height:82svh;background:#0c110e;
   border-radius:14px 14px 0 0;border-bottom:0;
   padding:20px 18px calc(28px + env(safe-area-inset-bottom,0px));
   transform:translateY(100%);z-index:60}
  .kh-lib-drawer.is-open{transform:none}
  .kh-tree-drawer__head{grid-template-columns:auto 1fr;gap:14px;margin-bottom:16px}
  .kh-tree-drawer__cover{width:92px;height:110px}
  .kh-tree-drawer__title{font-size:20px}
}


/* ── the scrollbars on the panels ────────────────────────────────────────
   A card floating over a painting cannot wear the operating system's grey
   slab down its edge — which is what the book drawer, the search results and
   the buying notice were all showing. A gold thumb on nothing, thin, and it
   only darkens the panel it is in.

   Two syntaxes, in that order of authority. scrollbar-width and
   scrollbar-color are the standard pair and are what Firefox and current
   Chrome use — and where they apply, the ::-webkit- pseudo-elements below are
   ignored by the same browser, which is the specified behaviour rather than a
   conflict. The pseudo-elements are for the WebKit that predates the pair;
   their thumb is drawn inside a transparent border so it reads as a hairline
   rather than filling the gutter. Both give the same thin gold on nothing. */
.kh-lib-drawer,.kh-lib-results,.kh-buy__panel{
 scrollbar-width:thin;scrollbar-color:rgba(225,173,102,.45) transparent}
.kh-lib-drawer::-webkit-scrollbar,
.kh-lib-results::-webkit-scrollbar,
.kh-buy__panel::-webkit-scrollbar{width:10px;height:10px}
.kh-lib-drawer::-webkit-scrollbar-track,
.kh-lib-results::-webkit-scrollbar-track,
.kh-buy__panel::-webkit-scrollbar-track{background:transparent}
.kh-lib-drawer::-webkit-scrollbar-thumb,
.kh-lib-results::-webkit-scrollbar-thumb,
.kh-buy__panel::-webkit-scrollbar-thumb{
 background:rgba(225,173,102,.42);background-clip:content-box;
 border:3px solid transparent;border-radius:99px}
.kh-lib-drawer::-webkit-scrollbar-thumb:hover,
.kh-lib-results::-webkit-scrollbar-thumb:hover,
.kh-buy__panel::-webkit-scrollbar-thumb:hover{background:rgba(225,173,102,.72);
 background-clip:content-box}
/* The little square where a vertical and a horizontal bar meet. Left alone it
   is white. */
.kh-lib-drawer::-webkit-scrollbar-corner,
.kh-lib-results::-webkit-scrollbar-corner,
.kh-buy__panel::-webkit-scrollbar-corner{background:transparent}


/* ── "Please talk to us first" ───────────────────────────────────────────
   Deliberately the loudest thing on the page while it is up: a scrim over
   everything, a panel in the middle, and the two ways to reach the school as
   full-size buttons. Someone about to spend their own money on a gift should
   have to read this, not notice it. */
.kh-buy{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.kh-buy__scrim{position:absolute;inset:0;background:rgba(10,10,9,.78);
 backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.kh-buy__panel{position:relative;width:min(520px,100%);max-height:88svh;overflow:auto;
 padding:32px 30px 28px;border-radius:6px;
 background:#12100e;border:1.5px solid var(--accent-400);
 box-shadow:0 24px 70px rgba(0,0,0,.6)}
.kh-buy__x{position:absolute;top:10px;right:12px;background:none;border:0;padding:6px;
 color:var(--on-dim);font-size:24px;line-height:1;cursor:pointer}
.kh-buy__x:hover{color:var(--accent)}
.kh-buy__h{margin:0 0 4px;font-family:var(--font-heading);font-weight:400;
 font-size:clamp(23px,3vw,30px);line-height:1.15;color:var(--accent-300)}
.kh-buy__book{margin:0 0 16px;font-size:12.5px;letter-spacing:.04em;color:var(--on-dim)}
.kh-buy__text{margin:0 0 22px;font-size:15px;line-height:1.66;color:var(--on)}
.kh-buy__acts{display:flex;flex-wrap:wrap;gap:10px}
.kh-buy__acts .btn{flex:1 1 200px}
.kh-buy__shop{margin:20px 0 0;font-size:13px;color:var(--on-dim)}
.kh-buy__shop a{color:var(--on-muted);border-bottom:1px solid rgba(243,242,242,.3)}
.kh-buy__shop a:hover{color:var(--accent-400);border-bottom-color:var(--accent-400)}
body.kh-buy-open{overflow:hidden}
@media (max-width:560px){
  .kh-buy__panel{padding:26px 20px 22px}
  .kh-buy__acts .btn{flex:1 1 100%}
}

/* The branches, opposite the glyphs.
   These used to be painted on the tree as twenty small plates. They covered
   the fruit and flowers they were naming and could not be read on a narrow
   window, so they came off the artwork and took the free corner instead — same
   width, same ground and same border as the legend it faces, so the two read
   as a pair holding the tree between them. Twenty rows will not fit in the
   height available, so the list scrolls inside its own box rather than growing
   the page: the desktop Library is one screenful and stays that way. */
@media (min-width:901px){
  /* 6px at the sides, not 14. The other 8 has gone to the rows — a row is a
     control now that pressing the lit one is how you turn it off, and a
     highlight that ends exactly where its own text ends has the count sitting
     against the edge and the number under the gold marker. The text stays
     where it was: 6 + 8 is the 14 this used to hold on its own. */
  .kh-lib-cats{position:absolute;left:20px;bottom:20px;width:212px;z-index:20;
   padding:14px 6px 10px;
   background:rgba(24,23,21,.9);backdrop-filter:blur(8px);
   border:1px solid rgba(243,242,242,.14);border-radius:4px}
  .kh-lib-cats .kh-kicker{display:block;margin:0 8px 6px}
  .kh-lib-cats__list{display:block;max-height:min(300px,38vh);overflow-y:auto;
   scrollbar-width:thin;scrollbar-color:rgba(225,173,102,.4) transparent}
  .kh-lib-cats__list::-webkit-scrollbar{width:5px}
  .kh-lib-cats__list::-webkit-scrollbar-thumb{background:rgba(225,173,102,.4);border-radius:3px}
  .kh-lib-cat{display:grid;grid-template-columns:20px 1fr auto;gap:4px 9px;
   align-items:center;width:100%;padding:7px 8px;text-align:left;cursor:pointer;
   background:none;border:0;border-top:1px solid rgba(243,242,242,.09);
   color:inherit;font:inherit;line-height:1.25}
  .kh-lib-cat:first-child{border-top:0}
  .kh-lib-cat__n{font-size:11px;letter-spacing:.04em;color:var(--accent);
   font-feature-settings:'tnum'}
  .kh-lib-cat__l{font-size:12.5px;color:var(--on)}
  .kh-lib-cat__c{font-size:12px;color:var(--on-dim);font-feature-settings:'tnum'}
  .kh-lib-cat:hover .kh-lib-cat__l{color:var(--accent-300)}
  /* Marked, because it is now the way back out: press the branch that is on
     and it goes off. A colour shift on the label alone did not read as a
     control you could press again. */
  .kh-lib-cat[aria-pressed=true]{background:rgba(225,173,102,.13);border-radius:3px;
   box-shadow:inset 2px 0 0 var(--accent-400)}
  .kh-lib-cat[aria-pressed=true] .kh-lib-cat__l{color:var(--accent-300)}
  .kh-lib-cat[aria-pressed=true] .kh-lib-cat__n{color:var(--accent-300)}
}

/* Zoom, bottom right of the stage as the reference places it. */
.kh-lib-zoom{position:absolute;right:20px;bottom:76px;z-index:30;
 display:flex;flex-direction:column;gap:6px}
.kh-lib-zoom button{width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
 background:rgba(24,23,21,.9);backdrop-filter:blur(8px);
 border:1px solid rgba(225,173,102,.4);border-radius:4px;
 color:var(--accent);font-family:var(--font-body);font-size:17px;line-height:1}
.kh-lib-zoom button:hover{background:rgba(225,173,102,.14)}
@media (max-width:900px){ .kh-lib-zoom{display:none} }