/* ---- Museum type: Spectral (wall text) + JetBrains Mono (instruments) ---- */
  @font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../assets/fonts/jetbrains-mono-normal-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: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../assets/fonts/jetbrains-mono-normal-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: 'Spectral';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/spectral-400-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: 'Spectral';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/spectral-400-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: 'Spectral';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/spectral-600-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: 'Spectral';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/spectral-600-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;
  }

  :root {
    /* The Radiant Collection: a dark museum after hours */
    --gallery:   #16150F;   /* the room */
    --wall:      #211F19;   /* raised wall surface */
    --vitrine:   #0C0B08;   /* recessed exhibit well */
    --placard:   #E4DCC9;   /* warm off-white wall text / ink */
    --spot:      #F2C46B;   /* warm gallery spotlight: light + emphasis (static) */
    --cherenkov: #49D6E8;   /* cold blue, LIVE data readouts only */

    /* structure derived from the palette */
    --spot-deep: #F7D89A;   /* lighter spot, for links / warm accent text */
    --spot-wash: rgba(242,196,107,0.12);
    --glow-spot: 0 0 0 1px rgba(242,196,107,0.22), 0 0 40px rgba(242,196,107,0.14);
    --glow-cherenkov: 0 0 0 1px rgba(73,214,232,0.30), 0 0 34px rgba(73,214,232,0.20);
    --hall-pad: 6rem;
    --placard-col: 22rem;

    /* legacy names → gallery values (the whole file references these) */
    --ink: #F1EADB;        /* strongest wall text (near-white warm) */
    --body: #CDC5B2;       /* body / wall reading text */
    --muted: #B3AB97;      /* secondary wall text */
    --faint: #96906F;      /* faint labels; tuned for WCAG AA on wall/vitrine/gallery */
    --hair: rgba(228,220,201,0.14);  /* hairline rules: placard at low opacity */
    --tint: var(--wall);   /* alternate band = raised wall */
    --card: var(--vitrine);/* every card becomes a recessed vitrine well */
    --card-2: #0C0B0800;   /* (reserved) */
    --blue: var(--spot);       /* legacy "accent" → warm spotlight for static material */
    --blue-deep: var(--spot-deep); /* links / accent text */
    --blue-wash: var(--spot-wash);
    --amber: var(--spot);      /* signal amber folds into the spotlight */
    --navy: #0A0906;           /* deepest surface, warm near-black */
    --green-ok: #8FB98A;       /* muted sage for "fact", kept in the warm family */
    --display: 'Fraunces', Georgia, serif;
    --serif: 'Spectral', Georgia, serif;   /* wall text */
    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* instruments */
    --sans: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* chrome reads as instrument labels */
    --paper: var(--gallery);   /* page background */
    --ink-line: var(--hair);
    --shadow: none;
    --shadow-lift: none;
    --glow-blue: var(--glow-spot);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    /* 118.75% = 19px base, so every rem below scales up for readability */
    font-size: 118.75%;
    scroll-behavior: smooth; scroll-padding-top: 5rem; overflow-x: clip;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }


  body {
    font-family: var(--serif);   /* wall text: Spectral. Labels/data opt into --mono explicitly. */
    font-size: 1.0625rem; line-height: 1.72;
    background: var(--paper); color: var(--body);
    overflow-x: clip;
  }
  /* the spotlight pooling from the head of the room */
  body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    /* warm spotlight pooling from the top of the room, not a cold cast */
    background: radial-gradient(120% 80% at 50% -10%, rgba(242,196,107,0.07), rgba(22,21,15,0) 60%);
  }
  main, footer, nav { position: relative; z-index: 2; }

  /* THE ENTRY HALL */
  
  .entry {
    position: relative; min-height: 190vh;
    text-align: center; padding: 0 1.5rem;
    background: radial-gradient(120% 60% at 50% 26%, rgba(242,196,107,0.07), rgba(22,21,15,0) 62%);
    overflow: clip;
  }
  .entry__inner {
    max-width: 46rem; margin: 0 auto;
    position: sticky; top: 0; height: 100vh; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    will-change: transform, opacity, filter;
  }
  .specimen {
    width: 190px; height: 190px; margin: 0 auto 2.6rem; position: relative;
    display: grid; place-items: center;
  }
  .specimen::after {
    content: ''; position: absolute; inset: -42% -42% -62%;
    background: radial-gradient(closest-side, rgba(242,196,107,0.3), rgba(242,196,107,0) 70%);
    filter: blur(6px); z-index: -1;
  }
  /* a uranium dioxide pellet, lit from above in its vitrine */
  .pellet {
    width: 96px; height: 132px;
    background: linear-gradient(180deg, #F4E4C6, #C9A96B 58%, #7C6636);
    box-shadow: inset 0 14px 22px rgba(255,255,255,0.32),
                inset 0 -26px 34px rgba(0,0,0,0.5),
                0 0 46px rgba(242,196,107,0.38);
  }
  .entry__kicker {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.34em;
    text-transform: uppercase; color: var(--spot); margin-bottom: 1.3rem;
  }
  .entry__title {
    font-family: var(--display); font-weight: 600; color: var(--ink);
    font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -0.02em;
  }
  .entry__sub {
    font-family: var(--serif); font-style: italic; color: var(--muted);
    font-size: clamp(1rem, 2.2vw, 1.28rem); line-height: 1.5;
    margin: 1.3rem auto 0; max-width: 34rem;
  }
  .entry__cue {
    position: absolute; left: 0; right: 0; bottom: 2.2rem;
    font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.3em;
    /* the only on-screen instruction for the primary interaction: it has to
       clear WCAG AA against the gallery black, not whisper at 3.6:1 */
    text-transform: uppercase; color: var(--muted);
  }
  @media (prefers-reduced-motion: no-preference) {
    .entry__cue { animation: entry-cue 2.4s ease-in-out infinite; }
  }
  @keyframes entry-cue { 0%,100% { opacity: 0.35; } 50% { opacity: 0.85; } }

  /* THE LIBRARY */
    .library {
    height: 100vh; height: 100svh; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0.8rem 1.5rem 0.8rem;
  }
  .library__head {
    max-width: 60rem; margin: 0 auto clamp(0.6rem, 1.4vh, 1.1rem); text-align: center;
    
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  }
  .library__title {
    font-family: var(--display); font-weight: 600; color: var(--ink);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.02; letter-spacing: -0.022em;
  }
  .library__sub { font-family: var(--serif); font-style: italic; color: var(--muted);
    max-width: 48rem; margin: 0.3rem auto 0; line-height: 1.35; font-size: 0.78rem; }

    .bookcase {
    max-width: 76rem; margin: 0 auto; width: 100%;
    display: grid; gap: 0.42rem 1.6rem;
    
    grid-template-columns: repeat(6, auto);
    justify-content: center;
  }

  .shelf { margin: 0; width: fit-content; max-width: 100%; }
  .shelf:nth-child(1) { grid-column: span 3; }
  .shelf:nth-child(2) { grid-column: span 3; }
  .shelf:nth-child(3) { grid-column: span 6; }
  .shelf:nth-child(4) { grid-column: span 2; }
  .shelf:nth-child(5) { grid-column: span 4; }
  @media (max-width: 820px) {
    .library { height: auto; min-height: 100vh; min-height: 100svh; overflow: visible; }
    /* minmax(0,1fr), not 1fr: a bare 1fr floors at the shelf's min-content
       width, and a seven-book shelf is wider than any phone. The board then
       scrolls sideways so the first book of a shelf is never clipped off. */
    .bookcase { grid-template-columns: minmax(0, 1fr); }
    .shelf, .shelf:nth-child(n) { grid-column: 1 / -1; min-width: 0; }
    .shelf__board { overflow-x: auto; justify-content: flex-start; scrollbar-width: thin; }
  }
  .shelf__label {
    display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.22rem;
    font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--wing, var(--spot));
  }
  .shelf__label .shelf__n { color: var(--faint); }
  .shelf__label .shelf__of { margin-left: auto; padding-left: 1.6rem; color: var(--faint); letter-spacing: 0.14em; }
  
  .shelf__board {
    position: relative;
    display: flex; align-items: flex-end; justify-content: flex-start;
    gap: 0;                                  /* books touch, as books do */
    padding: clamp(0.42rem, 1vh, 0.8rem) 1.5rem 0 0.75rem;   /* a bookend of empty board */
    min-height: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.16) 38%, rgba(0,0,0,0) 70%),
      #17150F;                                /* the back panel, in shadow */
    border-left: 7px solid #2E2A20;           /* the case sides */
    border-right: 7px solid #2E2A20;
    border-top: 3px solid #262219;
  }
  /* the board the books stand on: a lit front edge with real thickness */
  .shelf__board::after {
    content: ''; position: absolute; left: -7px; right: -7px; bottom: -9px; height: 9px;
    background: linear-gradient(180deg, #433C2C 0%, #302B20 55%, #1B180F 100%);
    box-shadow: 0 3px 7px rgba(0,0,0,0.6);
  }
  /* light falling onto the books from the front of the shelf */
  .shelf__board::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(180deg, rgba(242,196,107,0.11) 0%, rgba(242,196,107,0.02) 34%, rgba(0,0,0,0.32) 100%);
  }

  /* a book, seen spine-on */
  .book {
    position: relative; z-index: 1; cursor: pointer; border: 0; border-radius: 0;
    width: clamp(2.7rem, 3.1vw, 3.4rem); height: clamp(6.7rem, 14.7vh, 8.8rem);
    padding: 0.3rem 0.25rem 0.42rem;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.07) 14%,
                rgba(0,0,0,0) 46%, rgba(0,0,0,0.28) 86%, rgba(0,0,0,0.55) 100%),
                var(--book, #6E6653);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.16);
    transition: transform 0.24s cubic-bezier(0.16,1,0.3,1), filter 0.24s ease;
    filter: brightness(0.9);
  }
  .book::after {   /* the raised bands a bound spine carries */
    content: ''; position: absolute; left: 0; right: 0; top: 0.85rem; height: 2px;
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.35));
    box-shadow: 0 4.6rem 0 rgba(0,0,0,0.28), 0 4.6rem 0 -1px rgba(255,255,255,0.12);
  }
  .book:hover, .book:focus-visible { transform: translateY(-11px); filter: brightness(1.15); }
  .book:focus-visible { outline: 2px solid var(--cherenkov); outline-offset: 3px; z-index: 3; }
  
  .js body[data-screen="wing"] .view.in-wing:focus,
  .js body[data-screen="wing"] .view.in-wing:focus-visible { outline: none; }
  .book__spine {
    writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
    font-family: var(--serif); font-size: 0.78rem; font-weight: 600; line-height: 1.04;
    color: #12100A; letter-spacing: 0.005em; white-space: nowrap;
    flex: 1 1 auto; min-height: 0; overflow: hidden; text-overflow: ellipsis;
  }
  /* A volume you can operate carries a lit band at the head of the spine, the
     way a working instrument carries a power lamp. */
  .book--live::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--cherenkov); box-shadow: 0 0 8px rgba(73,214,232,0.75); z-index: 2;
  }
  .book--live .book__mark { color: rgba(14,12,7,0.92); }

  /* the device at the foot of the spine, where a binder puts one */
  .book__mark {
    flex: 0 0 auto; width: clamp(0.72rem, 1.45vw, 0.9rem); height: auto;
    margin-top: 0.24rem; color: rgba(14,12,7,0.86);
    transition: color 0.24s ease;
  }
  .book:hover .book__mark, .book:focus-visible .book__mark { color: rgba(16,14,8,0.95); }
  /* varied heights and widths, so a row reads as a collection not a bar chart */
  .book--tall  { height: clamp(7rem, 15.3vh, 9.4rem); }
  .book--short { height: clamp(6.3rem, 13.9vh, 8.2rem); }
  .book--wide  { width: clamp(3.1rem, 3.7vw, 3.9rem); }
  .book--thin  { width: clamp(2.3rem, 2.7vw, 2.9rem); }

  .bookopen {
    position: fixed; inset: 0; z-index: 95; display: none;
    align-items: center; justify-content: center;
    perspective: 1900px; perspective-origin: 50% 48%;
  }
  .bookopen.is-on { display: flex; }
  .bookopen__scrim { position: absolute; inset: 0; background: #0B0A07; opacity: 0; }

  .bo__book { position: relative; width: 44rem; height: 27rem; transform-style: preserve-3d; }
  .bo__half { position: absolute; top: 0; height: 100%; width: 50%; transform-style: preserve-3d; }
  .bo__half--l { left: 0;   transform-origin: right center; }
  .bo__half--r { left: 50%; transform-origin: left center; }
  /* the leaf that turns: it lies on the right page until it is flipped left */
  .bo__leaf {
    position: absolute; top: 0; left: 50%; height: 100%; width: 50%;
    transform-style: preserve-3d; transform-origin: left center; opacity: 0;
  }

  .bo__edge {
    position: absolute; top: 1.6%; bottom: 1.6%; width: 10px; opacity: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg,
      #EFE7D4 0 1px, #D8CFB7 1px 2px, #C6BC9F 2px 3px);
    box-shadow: inset 0 0 8px rgba(60,44,16,0.4);
  }
  .bo__edge--l { left: -10px; }
  .bo__edge--r { right: -10px; }
  /* the crease at the binding: paper cannot lie flat where it is sewn */
  .bo__gutter {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 74px;
    margin-left: -37px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg,
      rgba(38,26,8,0) 0%, rgba(38,26,8,0.42) 42%, rgba(24,16,4,0.55) 50%,
      rgba(38,26,8,0.42) 58%, rgba(38,26,8,0) 100%);
  }

  .bo__face { position: absolute; inset: 0; backface-visibility: hidden; }
  .bo__face--b { transform: rotateY(180deg); }

  .bo__paper { background: linear-gradient(95deg, #EFE7D4 0%, #E0D7C1 90%); }
  .bo__half--l .bo__paper { box-shadow: inset -18px 0 30px rgba(60,44,16,0.22); }
  .bo__half--r .bo__paper { box-shadow: inset 18px 0 30px rgba(60,44,16,0.22); }
  .bo__leaf .bo__paper { box-shadow: -16px 0 38px rgba(0,0,0,0.42), inset 14px 0 22px rgba(60,44,16,0.16); }
  .bo__cover {
    background: linear-gradient(100deg, var(--book, #6E6653) 0%, #241E15 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09), 0 22px 70px rgba(0,0,0,0.62);
  }
  /* a blind-stamped rule on the cover, the way a bound volume carries one */
  .bo__cover::after {
    content: ''; position: absolute; inset: 0.8rem;
    border: 1px solid rgba(255,255,255,0.13);
  }
  .bo__ctitle {
    position: absolute; left: 12%; right: 12%; top: 50%; transform: translateY(-50%);
    text-align: center; font-family: var(--serif); font-weight: 600;
    font-size: 1.05rem; line-height: 1.25; color: rgba(255,244,214,0.82);
  }
  /* the left page of the spread: the wing it belongs to, set as a half-title */
  .bo__wing {
    position: absolute; left: 14%; right: 14%; top: 50%; transform: translateY(-50%);
    text-align: center; font-family: var(--mono); font-size: 0.6rem;
    letter-spacing: 0.26em; text-transform: uppercase; color: #6B6045;
  }
  .bo__wing b { display: block; font-family: var(--serif); font-weight: 600;
    font-size: 1rem; letter-spacing: 0; text-transform: none; color: #3B3323;
    margin-top: 0.5rem; }
  .bo__title {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 76%; text-align: center; pointer-events: none; opacity: 0;
    font-family: var(--display); font-weight: 600; color: #16130C;
    font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.08;
    letter-spacing: -0.022em; text-wrap: balance;
  }
  .bo__flood { position: absolute; inset: 0; background: var(--gallery); opacity: 0; pointer-events: none; }
  @media (max-width: 860px) { .bo__book { width: 23rem; height: 15rem; } .bo__title { font-size: 1.25rem; } }

  @media (max-width: 640px) {
    .book { width: 2.9rem; height: 8.2rem; }
    .shelf__board { gap: 0.4rem; }
  }