/* ============================================================
   THE LIBRARY ROOM (2026-08-24)

   The second room on the site, after the services boardroom.
   Nina: "for the resources, we need to actually build out, like,
   a room that is a library within an office that we can kinda
   click on, and the lexicon should be one column, like, kind of
   one shelf, like, one bookshelf, and then there can be other
   things."

   So the shelf bays ARE the navigation. One bay is the Lexicon,
   the rest are the guides, the boards, the Diary and the
   downloads. Everything else in the room is an object with
   something behind it.

   The plate came from her own references, which were dark,
   double-height, and lit warm. Her brief on the final one, in
   her words: option 4's room, "two story bookshelves (similar to
   3)", and "the light from #3".

   This file is only what differs from the boardroom. Everything
   structural (.room, .frame, .plate, .spot, .sheetwrap, .card,
   .plainbook, .roompage) is shared with assets/services-room.css,
   which loads first. Do not fork those rules: two rooms with two
   copies of the marker code is how one of them silently rots.
   ============================================================ */

/* The library is a warm, dark room, where the boardroom is a bright one.
   The ring has to sit on glowing shelves without disappearing into them, so
   it goes darker and gains a brighter rim than the boardroom's. */
.lib .spot .ring{
  border-color:rgba(12,8,4,.88); background:rgba(255,246,232,.42);
  box-shadow:0 2px 14px rgba(0,0,0,.65), 0 0 0 2px rgba(255,236,200,.55)}
.lib .spot:hover .ring, .lib .spot:focus-visible .ring{
  border-color:var(--orange); background:rgba(255,250,240,.92)}

/* Five bays sit close together across one wall, so the labels alternate
   height as well as reading short. Measured on the plate: 8% of frame
   height between rows is about 56px, which clears a 28px label. */
.lib .spot .tag{
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.14em;
  color:var(--cyan); background:var(--nav-dark); border:1px solid rgba(0,196,255,.4);
  border-radius:999px; padding:4px 11px; backdrop-filter:none}
.lib .spot:hover .tag, .lib .spot:focus-visible .tag{
  background:var(--cyan); border-color:transparent; color:var(--nav-dark) }
.lib .spot .ring{
  border-color:rgba(2,8,16,.9); background:rgba(0,196,255,.22);
  box-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 0 2px rgba(0,196,255,.55)}
.lib .spot .ring::after{ background:var(--cyan); box-shadow:0 0 12px rgba(0,245,255,.9) }
.lib .spot .ring::before{ border-color:var(--cyan) }

/* the shelf bays are the navigation, so they get the louder marker */
.lib .s-bay .ring::before{ animation-delay:0s }
.lib .s-bay:nth-of-type(2) .ring::before{ animation-delay:.5s }
.lib .s-bay:nth-of-type(3) .ring::before{ animation-delay:1s }
.lib .s-bay:nth-of-type(4) .ring::before{ animation-delay:1.5s }
.lib .s-bay:nth-of-type(5) .ring::before{ animation-delay:2s }
/* the furniture is quieter: no pulse, smaller ring, the label does the work */
.lib .s-prop .ring{ width:22px; height:22px }
.lib .s-prop .ring::after{ inset:6px }
.lib .s-prop .ring::before{ animation:none; opacity:0 }

/* the room is warm, so the vignette warms with it rather than going blue */
.lib .vignette{
  background:
    radial-gradient(88% 72% at 50% 46%, transparent 48%, rgba(24,12,4,.34) 100%),
    linear-gradient(180deg, rgba(20,10,4,.30) 0%, transparent 20%, transparent 62%, rgba(16,8,2,.48) 100%)}
.lib .room{ background:#0A0704 }
/* the crop keeps the seating group and the lit bays, not the ceiling.
   --focus-y on the frame, not object-position on the plate: the plate now
   fills .stage exactly and .stage is what carries the crop, so that the
   markers share the picture's coordinate space. See services-room.css. */
.lib .frame{ --focus-y:62% }
/* On a phone the frame shows about 42% of the picture's width, and the five
   bays span 37% of it, so they all fit but only if the crop is aimed at them
   rather than at the middle of the room. Their centre is 58%, and 61% puts
   every bay edge inside the frame with a little room at both ends. */
@media (max-width:820px){ .lib .frame{ --focus-x:61%; --focus-y:58% } }

/* ---- a shelf of guides, inside a panel ---- */
.shelfrow{ margin:20px 0 0; padding:0; list-style:none; display:grid; gap:2px }
.shelfrow li{
  position:relative; padding:15px 0 15px 30px;
  border-top:1px solid rgba(120,100,64,.24); font-size:14.6px; line-height:1.62; color:var(--ink-soft)}
.shelfrow li::before{
  content:""; position:absolute; left:0; top:1.25em; width:12px; height:16px; border-radius:1px;
  background:linear-gradient(180deg,#C9B487,#A98F5C); box-shadow:0 1px 2px rgba(60,46,20,.5)}
.shelfrow li.ready::before{ background:linear-gradient(180deg,var(--orange),#B85416) }
.shelfrow b{ display:block; font-family:var(--font-display); font-size:16px; color:var(--ink); margin:0 0 3px }
.shelfrow .state{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:#8A7D66; margin-left:8px; white-space:nowrap}
.shelfrow li.ready .state{ color:var(--orange-text) }
.shelfrow a{ color:var(--orange-text); font-weight:700 }

/* ---- the flat list under the room ---- */
.libgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px }
.libcard{
  background:var(--white); border:1px solid var(--border); border-radius:4px;
  padding:24px 22px 22px; box-shadow:0 14px 28px -20px rgba(20,26,40,.5)}
.libcard .n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange-text); display:block; margin:0 0 10px}
.libcard h3{ font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--text); margin:0 0 8px }
.libcard p{ font-size:14.6px; line-height:1.66; color:#374151; margin:0 0 14px }
.libcard a.go{ font-size:14px; font-weight:700; color:var(--orange-text); display:block }
.libcard a.go + a.go{ margin-top:8px }
.libcard .soon{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--amber-text); background:#FBE3B7; border:1px solid #E5C377; border-radius:2px; padding:3px 7px}

/* ============================================================
   THE SHELVES ARE THE BUTTONS (2026-08-24)

   Nina, looking at the first build: "it's hard to see the click
   areas", and then "when you hover it should give an overview of
   what's on that shelf area. Then when you click it should zoom
   in for selections."

   So a bay stopped being a pin stuck on a shelf and became the
   shelf. Three states, and each one answers a different question:

     at rest   is there anything here?      a lit edge and a name
     on hover  what is on this shelf?       an overview card
     on click  what exactly can I take?     zoom in, then the list

   The geometry is measured off a 5% grid laid over the plate, so
   the rectangle sits on the real bay at any width.
   ============================================================ */

/* Geometry lives in services-room.css now (it is what makes every room work,
   not just this one). All this adds is the zoom's easing. */
.stage{ transition:transform .55s cubic-bezier(.4,0,.2,1) }

/* ---- at rest: visible without shouting over the picture ---- */
.bay{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  transform:translate(-50%,-50%); padding:0; border:0; background:none;
  cursor:pointer; font:inherit; z-index:4; -webkit-tap-highlight-color:transparent}
.bay .bayedge{
  position:absolute; inset:0; border-radius:4px;
  border:1.5px solid rgba(0,196,255,.45);
  background:linear-gradient(180deg, rgba(0,150,190,.14), rgba(0,90,130,.06));
  box-shadow:0 0 0 1px rgba(2,8,16,.5), 0 0 18px -4px rgba(0,196,255,.35),
             inset 0 0 26px rgba(0,196,255,.10);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease}
/* the pulse. One slow breath, staggered along the wall so the eye is drawn
   across the shelves rather than to five things blinking in unison. */
.bay .bayedge::after{
  content:""; position:absolute; inset:-2px; border-radius:5px;
  border:1.5px solid var(--cyan); opacity:0;
  animation:baypulse 3.2s cubic-bezier(.25,.6,.3,1) infinite}
.bay:nth-of-type(2) .bayedge::after{ animation-delay:.45s }
.bay:nth-of-type(3) .bayedge::after{ animation-delay:.9s }
.bay:nth-of-type(4) .bayedge::after{ animation-delay:1.35s }
.bay:nth-of-type(5) .bayedge::after{ animation-delay:1.8s }
@keyframes baypulse{
  0%{ transform:scale(1); opacity:.7 }
  55%{ transform:scale(1.045); opacity:0 }
  100%{ transform:scale(1.045); opacity:0 }
}
.bay:hover .bayedge::after, .bay:focus-visible .bayedge::after{ animation:none; opacity:0 }
/* THE NAME SITS AT THE TOP OF ITS OWN RECTANGLE (Nina, 2026-08-27).
   Her words: "At the top of each of the teal rectangles should be the label of
   what you can find when you click in there, like the blog, the downloads, the
   lexicon, whatever it is", after "No one knows when they're seeing those
   blinking teal squares what those are. You're just randomly clicking."

   She was looking at her PHONE, and that is the half of this that had been
   wrong all along: .baytag was display:none under 820px, so every bay on a
   phone was an unlabelled blinking rectangle and the only naming was in the
   chip row below the picture. A target you have to scroll away from to
   identify is not labelled.

   So the name is a band across the TOP of the bay, at every width. Being
   bay-width solves the collision the old floating pill had, which is why that
   one alternated above and below over two rows: nowrap made "THIS VS THAT"
   122px against a 98px bay, and five of those in a row touched. A band
   inherits the bay's width and wraps, so nothing is shortened, nothing is
   clipped, and nothing collides at any size.

   Still the same cyan register: cyan on near-black, weight 700, tracked. */
.bay .baytag{
  position:absolute; left:0; right:0; top:0;
  /* One band height across the row, so a two-line name does not leave its
     neighbours looking ragged. Flex centres the text inside whichever it is. */
  display:flex; align-items:center; justify-content:center; min-height:30px;
  font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--cyan); text-align:center;
  line-height:1.2; white-space:normal; text-wrap:balance;
  padding:5px 4px; border-radius:4px 4px 0 0;
  background:rgba(2,8,16,.92); border:1px solid rgba(0,196,255,.45); border-bottom:0;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.9);
  transition:background .18s ease, color .18s ease, border-color .18s ease}

.bay:hover .bayedge, .bay:focus-visible .bayedge{
  border-color:var(--cyan); background:linear-gradient(180deg, rgba(0,196,255,.22), rgba(0,120,170,.10));
  box-shadow:0 0 0 1px rgba(2,8,16,.6), 0 0 34px -2px rgba(0,196,255,.6), inset 0 0 34px rgba(0,196,255,.18)}
.bay:hover .baytag, .bay:focus-visible .baytag{ background:var(--cyan); border-color:transparent; color:var(--nav-dark) }
.bay:focus-visible{ outline:3px solid var(--cyan); outline-offset:4px; border-radius:6px }

/* ---- on hover: what is on this shelf ---- */
.baypeek{
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(4px);
  width:min(270px, 42vw); padding:14px 15px 13px; border-radius:5px; text-align:left;
  background:rgba(14,10,5,.95); border:1px solid rgba(255,220,160,.26);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.95); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:6}
.bay:hover .baypeek, .bay:focus-visible .baypeek{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.baypeek b{ display:block; font-family:var(--font-display); font-size:16px; color:#fff; margin:0 0 5px }
.baypeek i{ display:block; font-style:normal; font-size:13.5px; line-height:1.55; color:#D9CBB4; margin:0 0 9px }
.baypeek em{
  display:block; font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:#9E8C6E; line-height:1.6; padding-top:9px; border-top:1px solid rgba(255,220,160,.16)}
.baypeek .peekgo{
  display:block; margin:10px 0 0; font-size:12px; font-weight:700; color:var(--orange)}
/* the two bays nearest each edge point their card inward so it stays on screen */
.bay:first-of-type .baypeek{ left:0; transform:translateY(4px) }
.bay:first-of-type:hover .baypeek, .bay:first-of-type:focus-visible .baypeek{ transform:translateY(0) }
.bay:nth-of-type(5) .baypeek{ left:auto; right:0; transform:translateY(4px) }
.bay:nth-of-type(5):hover .baypeek, .bay:nth-of-type(5):focus-visible .baypeek{ transform:translateY(0) }

/* ---- on click: the room zooms and the shelf's list slides in ---- */
.room.is-zoomed .bay:not(.is-open) .bayedge{ opacity:.18 }
.room.is-zoomed .bay:not(.is-open) .baytag{ opacity:0 }
.room.is-zoomed .bay .baypeek{ display:none }
.room.is-zoomed .spot{ opacity:0; pointer-events:none }
.room.is-zoomed .bay.is-open .bayedge{ border-color:var(--orange); box-shadow:0 0 34px rgba(244,122,40,.5) }
.room.is-zoomed .plate{ filter:brightness(.62) }
.plate{ transition:filter .45s ease }

.zoomlayer{ position:absolute; inset:0; z-index:8; pointer-events:none }
.zoomlayer[hidden]{ display:none }
.zoompanel[hidden]{ display:none }
.zoompanel{
  position:absolute; right:3%; top:50%; transform:translateY(-50%);
  width:min(410px, 44%); max-height:84%; overflow:auto; pointer-events:auto;
  padding:26px 26px 24px; border-radius:4px;
  background:var(--grain),linear-gradient(180deg,#FDFAF3 0%,#F5EEE0 100%);
  background-size:140px 140px,auto;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 40px 70px -28px rgba(0,0,0,.9);
  animation:zoomin .42s cubic-bezier(.2,.7,.3,1) both}
@keyframes zoomin{ from{ opacity:0; transform:translateY(-50%) translateX(22px) } to{ opacity:1; transform:translateY(-50%) translateX(0) } }
.zoomfolio{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#A08F6C; margin:0 0 10px}
.zoompanel h2{
  font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.15;
  color:var(--ink); margin:0 0 12px}
.zoombody p{ font-size:14.6px; line-height:1.68; color:var(--ink-soft); margin:0 0 13px }
.zoombody .btn{ margin-top:4px }
.zoomback{
  position:absolute; left:3%; bottom:5%; pointer-events:auto;
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:#F3E7CE; background:rgba(12,8,4,.72); border:1px solid rgba(255,225,170,.28);
  border-radius:999px; padding:11px 17px; cursor:pointer; backdrop-filter:blur(6px)}
.zoomback:hover{ background:var(--orange-cta); border-color:transparent; color:#fff }
.zoomback[hidden]{ display:none }

/* ---- the full-page takeover, for every bay except the Lexicon ----
   Nina: "the shelf needs to maybe take over the entire page where we don't
   see the library anymore." The room fades out entirely rather than staying
   dimmed behind the panel, and the panel itself grows to fill the viewport
   instead of sitting in a side card. */
.room.is-full-takeover .stage{ opacity:0; transition:opacity .3s ease; pointer-events:none }
.room.is-full-takeover .roomhero{ opacity:0; pointer-events:none }
.zoompanel.is-full{
  position:fixed; inset:0; right:auto; top:auto; transform:none;
  width:100%; height:100%; max-height:none; border-radius:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:80px 24px; animation:zoomfull .38s cubic-bezier(.2,.7,.3,1) both}
.zoompanel.is-full > *{ width:100%; max-width:640px }
@keyframes zoomfull{ from{ opacity:0 } to{ opacity:1 } }
.zoompanel.is-full .zoomfolio,
.zoompanel.is-full h2{ text-align:left }
.zoomback{ z-index:9 }

@media (max-width:820px){
  .zoompanel.is-full{ padding:72px 20px 32px }
}

@media (max-width:820px){
  /* on a phone the panel takes the bottom of the frame rather than a side */
  .zoompanel{
    right:auto; left:0; top:auto; bottom:0; transform:none;
    width:100%; max-height:70%; border-radius:4px 4px 0 0; padding:20px 20px 18px;
    animation:zoomup .4s cubic-bezier(.2,.7,.3,1) both}
  @keyframes zoomup{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
  .zoomback{ left:auto; right:10px; top:10px; bottom:auto; padding:9px 13px; font-size:10px }
  /* On a phone the five pills clip against each other inside a 42% crop, and
     the chip row under the frame already names every shelf. The cyan
     rectangles stay, so the targets are still obvious. */
  /* The names STAY on a phone. Hiding them is what left Nina looking at five
     blinking rectangles with no way to tell them apart. The bay is about 65px
     wide there, so the type steps down and a two-word name takes two lines. */
  .bay .baytag{ font-size:8.5px; letter-spacing:0; padding:4px 2px; line-height:1.15; min-height:28px }
  .baypeek{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .stage, .bay .bayedge, .baypeek, .plate{ transition:none }
  .zoompanel{ animation:none }
}

/* ============================================================
   THE HERO, ON THE SECOND FLOOR

   Nina: "on upstairs, there should be... not tied to the room,
   but like a overlay. So let's make the hero banner and text
   kind of on the second floor. So we should have a header
   explaining that's a library, our interactive library, and some
   text there at the top."

   A full-width band rather than a card pinned to the upper
   shelves, because the frame crops to the middle 42% on a phone
   and anything anchored left or right of centre would be cut in
   half. It is a sibling of .stage, so the zoom never scales it.
   ============================================================ */
.roomhero{
  position:absolute; left:0; right:0; top:0; z-index:5; pointer-events:none;
  padding:34px 0 64px;
  background:linear-gradient(180deg, rgba(6,4,2,.86) 0%, rgba(8,5,2,.62) 46%, transparent 100%)}
.herowrap{ max-width:1100px; margin:0 auto; padding:0 26px; pointer-events:auto }
.roomhero .eyebrow{
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan); margin:0 0 12px;
  display:inline-block; padding:4px 11px; border-radius:999px;
  background:var(--nav-dark); border:1px solid rgba(0,196,255,.4)}
.roomhero h1{
  font-family:var(--font-display); font-weight:700; color:#fff; margin:0 0 11px;
  font-size:clamp(28px,4.4vw,46px); line-height:1.08; max-width:16ch; text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.7)}
.roomhero .sub{
  font-size:16.5px; line-height:1.62; color:#DCD3C4; margin:0; max-width:52ch;
  text-shadow:0 1px 12px rgba(0,0,0,.8)}

/* the hero is scenery once a shelf is open */
.room.is-zoomed .roomhero{ opacity:0; transition:opacity .3s ease; pointer-events:none }
.roomhero{ transition:opacity .3s ease }

@media (max-width:820px){
  .roomhero{ padding:22px 0 52px }
  .herowrap{ padding:0 20px }
  .roomhero .sub{ font-size:15px; max-width:none }
}
@media (prefers-reduced-motion:reduce){
  .bay .bayedge::after{ animation:none; opacity:0 }
  .roomhero{ transition:none }
}

/* ============================================================
   THE ROOM EXPLAINS ITSELF ON A PHONE (2026-08-26)

   Nina: "everything is blinking but there's nothing that tells you
   which one does what and they're too close together... the
   shelves need to be spread apart with a title so you see what
   it's talking about. Don't make it abstract."

   On the plate itself, five bay labels colliding inside a 42% crop
   is what got them hidden below 820px in the first place. Rather
   than fight that, the shared .roomindex chip row (services-room.css)
   becomes the real answer on a phone: not a row of bare names, a
   stacked list of cards, each with its name AND a plain one-line
   description, spaced so nothing sits closer than 12px to the next
   tap target. This is scoped to the library only, the boardroom
   keeps its plain chip row.
   ============================================================ */
@media (max-width:820px){
  .lib .roomindex{
    display:flex; flex-direction:column; gap:12px; padding:20px 20px 8px;
    background:#0A0704}
  .lib .roomindex .riintro{
    font-size:14.5px; line-height:1.55; color:#DCD3C4; margin:0 0 4px; max-width:52ch}
  .lib .roomindex .rilabel{ margin:6px 0 0; color:#9E8C6E }
  .lib .roomindex .ri{
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    width:100%; min-height:48px; padding:13px 16px; border-radius:6px;
    text-align:left; background:rgba(255,255,255,.06); border:1px solid rgba(0,196,255,.3)}
  .lib .roomindex .ri:hover, .lib .roomindex .ri:focus-visible{
    background:rgba(0,196,255,.16); border-color:var(--cyan)}
  .lib .roomindex .ri b{
    font-family:var(--font-display); font-size:15px; font-weight:700; color:#fff;
    letter-spacing:normal; text-transform:none}
  .lib .roomindex .ri .ridesc{
    font-family:var(--font-body); font-size:13px; line-height:1.5; color:#C6B79C;
    letter-spacing:normal; text-transform:none; font-weight:400}
}

/* ============================================================
   THE LEXICON, DECIDED 2026-08-25

   She tried five looks for the zoomed shelf (hyper real, leather,
   catalogue, page, door) and picked from across them rather than one
   whole: "I like the way the hyper real shows on the screen. It's
   less messy... I like the way the leather looks for the lexicon,
   but I don't like it on the screen. I like when I open the lexicon
   and go to the actual lexicon page and when it's to look like the
   leather one."

   So the split is by SURFACE, not by look:
     - inside the room's zoom: hyper real. No card, the five books
       pin straight onto the photographed shelves.
     - the real shelf, wherever it is read (this inline card, and
       /lexicon itself): leather. Bound spines, walnut and oxblood,
       gold foil, warm shelf glow. See lexicon-shelves.css for the
       /lexicon page half of this.

   And the behavior changed with it. Her words: "I don't know if it
   should go to the page. I think it should go to the page when you
   say 'Open.' I'm thinking the page below the library on that same
   page should open up and show you the governance area." Clicking a
   pinned label backs out of the zoom and opens that exact category
   in the Lexicon card below, on this same page, rather than leaving
   it. "Open the full Lexicon" stays on screen the whole time as the
   way out to the real thing.
   ============================================================ */

/* ---- hyper real: labels pinned onto the photographed shelves ---- */
.reallabel{
  position:absolute; z-index:9; pointer-events:auto; cursor:pointer;
  transform:translate(-50%,-50%); white-space:nowrap;
  font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#F7ECD6;
  padding:7px 12px; border-radius:3px;
  background:linear-gradient(180deg, rgba(20,12,4,.9), rgba(12,7,2,.92));
  border:1px solid rgba(214,178,110,.5);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,228,170,.18)}
.reallabel .n{ color:#C8A557; margin-left:9px; font-size:10.5px; letter-spacing:.06em }
.reallabel:hover{ border-color:#E2C079; color:#fff }
.reallabel[hidden]{ display:none }
/* Sits below the plaques rather than beside them in the stack, so a plaque
   near the bottom of the bay can never paint over the caption's own heading
   and button. The plaques are pinned to the picture and the caption is not,
   so the caption is the one that yields. */
.realcap{
  position:absolute; left:4%; bottom:9%; z-index:8; max-width:300px; pointer-events:auto;
  padding:16px 18px; border-radius:3px;
  background:linear-gradient(180deg, rgba(16,10,4,.94), rgba(10,6,2,.96));
  border:1px solid rgba(214,178,110,.34)}
.realcap h3{ font-family:var(--font-display); font-weight:700; font-size:19px; color:#F7ECD6; margin:0 0 7px }
.realcap p{ font-size:13.6px; line-height:1.6; color:#C6B79C; margin:0 0 12px }
.realcap .btn{ font-size:13px; padding:9px 15px }
.realcap[hidden]{ display:none }

/* ---- leather: the shelf as it reads inline, in the flat card below the room ---- */
.lex-card{ scroll-margin-top:24px }
.lex-card.is-open{ grid-column:1 / -1 }
.lex-inline[hidden]{ display:none }
.lex-inline{ margin-top:18px }
.lex-inline .folio{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange-text); margin:0 0 10px}
.lex-card .lex-shelves{
  background:linear-gradient(180deg,#2A1B0A 0%,#1B1006 62%,#120A03 100%);
  border-radius:6px}
.lex-card .lex-shelves::before{
  background:radial-gradient(48% 34% at 50% 0%, rgba(255,196,110,.26), transparent 70%)}
.lex-card .lex-shelf-label h2{ color:#F2E3C6; font-size:1.18rem }
.lex-card .lex-shelf-label p{ color:#9C8967 }
.lex-card .lex-shelf-board{ background:linear-gradient(180deg,#6B4A22,#3E2A11) !important }
.lex-card .lex-book{ border-radius:2px 4px 4px 2px }
.lex-card .lex-book-title{ color:#F7ECD6; text-shadow:0 1px 0 rgba(0,0,0,.5) }
.lex-card .lex-book-count{ color:#D8B978 }
.lex-card .spine-orange{ background:linear-gradient(160deg,#7A2E18,#43170B) }
.lex-card .spine-pink  { background:linear-gradient(160deg,#6B1330,#3A0A1B) }
.lex-card .spine-purple{ background:linear-gradient(160deg,#3B2A5C,#1F1533) }
.lex-card .spine-teal  { background:linear-gradient(160deg,#1B4F49,#0D2B27) }
.lex-card .spine-green { background:linear-gradient(160deg,#2C4A22,#152710) }
.lex-card .spine-amber { background:linear-gradient(160deg,#7A5716,#43300B) }
.lex-card .spine-blue  { background:linear-gradient(160deg,#1E3652,#0F1D2E) }
.lex-inline .shelfnote{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#9C8967;
  margin:16px 0 14px; line-height:1.6}
.lex-inline > .btn{ margin:0 }

/* An opened book keeps the light cream card the Lexicon already uses. That
   is a decision of Nina's from 2026-08-20, written into
   lexicon-shelves.css as "The shelf is dark. What you READ is not."
   Overriding it here would have quietly reversed her own call, so only the
   two new lines get styled, for the cream ground rather than against it. */
.lex-openline{ font-size:14.5px; line-height:1.6; color:#374151; margin:0 0 10px }
.lex-open-book .linkish{ color:var(--orange-text); font-size:13.5px; font-weight:700 }
.lex-open-book .linkish:hover{ color:#96430F }

/* ============================================================
   THE SHELF TAKEOVER, dressed (Nina, 2026-08-27)

   Her verdict on the four non-Lexicon bays: "the library popups don't match
   and just looks like a lot of info on each popout... the lexicon is fine but
   the other ones need some type of wow style."

   She is right on both counts, and the cause is one thing: all four panels
   were the same cream page with a folio, a heading and prose. Nothing said
   which shelf you had opened, so a shelf of finished guides and a link to the
   blog looked identical apart from word count. The Lexicon reads better
   because it is made of objects, dark leather plaques with gold counts,
   pinned on the real photograph.

   So the takeover keeps the shape Nina asked for the day before ("the shelf
   needs to maybe take over the entire page where we don't see the library
   anymore") and changes its material: the room's own warm dark, gold rules,
   and one card species per shelf. Cream survives only inside things you
   actually read, which is the rule the Lexicon shelf already follows.
   ============================================================ */

.zoompanel.is-full{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(74,48,18,.55), transparent 62%),
    linear-gradient(180deg,#100A04 0%, #0A0704 100%);
  color:#F7ECD6;
  /* The shelves carry real lists now, so a panel can be taller than the
     viewport. Centred flex content that overflows gets clipped at the TOP and
     cannot be scrolled back to, because the overflow lands in the container's
     unreachable start edge. `safe` falls back to flex-start exactly then, and
     older engines ignore the line and keep the plain centring above. */
  justify-content:center;
  justify-content:safe center;
}
/* A hairline of gold across the top, the same edge the plaques carry. */
.zoompanel.is-full::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(214,178,110,.55) 22%, rgba(214,178,110,.55) 78%, transparent);
}
.zoompanel.is-full .zoomfolio{ color:#C8A557 }
.zoompanel.is-full h2{
  color:#F7ECD6; font-size:clamp(26px,4.4vw,34px); letter-spacing:-.01em;
  padding-bottom:16px; margin-bottom:4px;
  border-bottom:1px solid rgba(214,178,110,.22);
}
.zoompanel.is-full .zoombody p{ color:#C6B79C; font-size:15px; max-width:60ch }
.zoompanel.is-full .zoombody .handoff{ color:#9C8A6C }
.zoompanel.is-full .zoombody a:not(.btn){ color:#E2C079 }
.zoompanel.is-full .zoombody a:not(.btn):hover{ color:#fff }

/* ---- the shelf's contents, as objects rather than a list ----
   .shelfrow is shared with the flat cards below the room, which stay cream
   and unchanged. Only its appearance inside the takeover changes. */
.zoompanel.is-full .shelfrow{
  margin-top:26px; gap:0;
  border-top:1px solid rgba(214,178,110,.18);
}
.zoompanel.is-full .shelfrow li{
  padding:18px 0 18px 30px;
  border-bottom:1px solid rgba(214,178,110,.18);
  color:#C6B79C; font-size:14px; line-height:1.6;
  transition:background .18s ease, padding-left .18s ease;
}
.zoompanel.is-full .shelfrow li:hover{
  background:rgba(214,178,110,.06); padding-left:36px;
}
/* the spine mark becomes a real gold-foiled book edge */
.zoompanel.is-full .shelfrow li::before{
  top:22px; width:9px; height:30px; border-radius:1px 2px 2px 1px;
  background:linear-gradient(180deg,#3A2A12,#1B1308);
  border-left:2px solid #C8A557;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.9);
}
.zoompanel.is-full .shelfrow li.ready::before{
  background:linear-gradient(180deg,#5A3A12,#2A1B08);
  border-left-color:#E2C079;
}
.zoompanel.is-full .shelfrow b{
  color:#F7ECD6; font-size:17px; letter-spacing:-.01em; margin-bottom:5px;
}
.zoompanel.is-full .shelfrow .state{
  display:inline-block; margin-left:9px; vertical-align:2px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  color:#00F5FF; background:#020810; border:1px solid rgba(0,196,255,.4);
}
.zoompanel.is-full .shelfrow li.ready .state{ color:#00F5FF }
.zoompanel.is-full .shelfrow a{
  display:inline-block; margin-top:8px; color:#E2C079; font-weight:700;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
}
.zoompanel.is-full .shelfrow a:hover{ color:#fff }

/* ---- the two bays that are a single destination, not a list ----
   Boards and the Blog carry two sentences and a button, which read as an
   empty page at full height. A plate gives them the same presence a shelf of
   three guides has, without inventing content. */
.deskplate{
  margin-top:26px; padding:30px 28px; border-radius:4px;
  background:linear-gradient(180deg, rgba(24,16,7,.92), rgba(14,9,4,.96));
  border:1px solid rgba(214,178,110,.28);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,228,170,.1);
}
.deskplate .dpline{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:#9C8A6C; margin:0 0 12px;
}
.deskplate .dppair{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  margin:0 0 20px;
}
.deskplate .dpterm{
  padding:14px 16px; border-radius:3px; text-align:center;
  background:rgba(0,0,0,.35); border:1px solid rgba(214,178,110,.2);
  font-family:var(--font-display); font-weight:700; font-size:15px; color:#F7ECD6;
}
/* the gold coin between two terms */
.deskplate .dpvs{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; font-weight:700;
  color:#1B1308; background:linear-gradient(180deg,#E2C079,#C8A557);
  box-shadow:0 3px 10px -3px rgba(0,0,0,.9);
}
@media (max-width:560px){
  .deskplate .dppair{ grid-template-columns:1fr; gap:9px }
  .deskplate .dpvs{ justify-self:center }
}