/* The portfolio rooms — public/collections.css, scoped under .room so it
   cannot restyle the rest of the site (ported 2026-09-26). */
/* Radio Tower — the rooms beyond the player: section bar, on-air ticker,
   Library (bookshelf + map room), Photos, Crates. Loaded after styles.css and
   built only from its tokens, so the rooms stay the same building. */

/* ---------- section bar ---------- */
.room .masthead.with-nav{border-bottom:none;padding-bottom:6px}

/* ---------- on-air ticker (sub pages) ---------- */
@media (max-width:560px){}

/* ---------- room header ---------- */
.room .room-head{margin:4px 0 22px}
.room .room-head h2{margin:0 0 6px;font-size:clamp(24px,4vw,34px);font-weight:680;letter-spacing:-.01em}
.room .room-head p{margin:0;color:var(--text-dim);max-width:640px}
.room .chips{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 0}
.room .chip{text-decoration:none;
  background:transparent;color:var(--text-dim);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:12px;font-family:inherit;cursor:pointer;
}
.room .chip:hover{color:var(--text);border-color:var(--text-faint)}
.room .chip[aria-pressed=true]{border-color:var(--signal);color:var(--signal);background:var(--signal-soft)}

/* =====================================================================
   LIBRARY — the thesis card, the shelves, the reading desk, the map room
   ===================================================================== */

.room .thesis-card{
  display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:clamp(16px,3vw,28px);align-items:center;
  background:linear-gradient(160deg,#16130c 0%,var(--bg-raise-2) 70%);
  border:1px solid #3a3120;border-radius:calc(var(--radius) + 4px);padding:clamp(18px,3vw,28px);
  position:relative;overflow:hidden;margin-bottom:26px;
}
.room .thesis-card::before{content:"";position:absolute;inset:-50% -20% auto auto;width:460px;height:460px;
  background:radial-gradient(circle,rgba(217,180,90,.14) 0%,transparent 65%);pointer-events:none}
.room .thesis-card img{width:100%;aspect-ratio:210/297;object-fit:cover;border-radius:6px;background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);transform:rotate(-2deg)}
.room .thesis-card .eyebrow{margin:0 0 8px;font-size:10.5px;letter-spacing:.16em;font-weight:700;color:#d9b45a;text-transform:uppercase}
.room .thesis-card h3{margin:0;font-size:clamp(18px,2.6vw,24px);line-height:1.25;font-weight:660}
.room .thesis-card .sub{margin:4px 0 0;color:var(--text-dim)}
.room .thesis-card .blurb{margin:12px 0 0;color:var(--text-dim);font-size:13.5px;max-width:560px}
.room .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.room .btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--signal);color:#1a1206;font-weight:650;font-size:13.5px;
  padding:9px 18px;border-radius:999px;border:none;cursor:pointer;font-family:inherit;
}
.room .btn:hover{filter:brightness(1.08)}
.room .btn.gold{background:#d9b45a}
.room .btn.quiet{background:transparent;color:var(--text-dim);border:1px solid var(--line);font-weight:560}
.room .btn.quiet:hover{color:var(--text);border-color:var(--signal)}
.room .btn small{font-weight:500;opacity:.7}
@media (max-width:560px){.room .thesis-card{grid-template-columns:1fr}.room .thesis-card img{width:150px}}

/* The wall the shelves hang on: close-up, so the back is soft and dark and
   the books are big enough to read their spines. */
.room .bookcase{
  position:relative;border-radius:calc(var(--radius) + 4px);overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%,#2a1d14 0%,#150f0b 60%,#0d0907 100%);
  border:1px solid #2c2118;
  box-shadow:inset 0 0 80px rgba(0,0,0,.65);
  padding:10px 0 4px;
}
.room .shelf{position:relative;padding:0 clamp(12px,3vw,26px)}
.room .shelf + .shelf{margin-top:8px}
.room .shelf-label{
  /* Sits in the wall space above the books, which is also the headroom a
     lifted book rises into — so a lift never pokes through the shelf above. */
  position:absolute;top:16px;left:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);z-index:0;
  display:flex;align-items:center;gap:10px;
  margin:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#b89a78;font-weight:650;
}
.room .shelf-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#4a3727,transparent)}
.room .shelf-row{
  /* Not a scroll container on wide screens, on purpose: overflow-x:auto would
     force overflow-y to clip too, and a lifted book has to rise above its
     own row into the wall space. */
  display:flex;align-items:flex-end;gap:3px;padding:150px 6px 0;min-height:120px;
}
@media (max-width:760px){
  /* Phones: the shelf scrolls sideways instead, with headroom inside the
     scroller so the lift still has somewhere to go. */
  .room .shelf-row{overflow-x:auto;padding-top:140px;
    scrollbar-width:thin;scrollbar-color:#4a3727 transparent;scroll-snap-type:x proximity}
}
.room .shelf-board{
  height:18px;margin:0 -2px;border-radius:2px;
  background:linear-gradient(180deg,#6b4a2e 0%,#57391f 35%,#3c2715 100%);
  box-shadow:0 10px 18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,220,170,.18);
  position:relative;z-index:3;
}
.room .bookend{
  flex:none;width:14px;height:120px;align-self:flex-end;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#2c2c30,#4a4a52 45%,#26262a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}

.room .book{
  --h:230px;--w:40px;--c:#7d2330;--ink:#f1e6d0;--foil:#d9b45a;--tilt:0deg;
  flex:none;position:relative;z-index:1;scroll-snap-align:start;
  width:var(--w);height:var(--h);padding:0;border:none;cursor:pointer;
  border-radius:3px 3px 1px 1px;
  background:
    /* two gilt bands near the head and tail of the spine */
    linear-gradient(180deg,transparent 14px,var(--foil) 14px,var(--foil) 16px,transparent 16px,
                    transparent calc(100% - 18px),var(--foil) calc(100% - 18px),var(--foil) calc(100% - 16px),transparent calc(100% - 16px)),
    /* the curve of a real spine: light down the middle, dark at the hinges */
    linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(255,255,255,.10) 38%,rgba(255,255,255,.04) 55%,rgba(0,0,0,.45) 100%),
    var(--c);
  color:var(--ink);font-family:inherit;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),2px 0 3px rgba(0,0,0,.35);
  transform:rotate(var(--tilt));transform-origin:bottom center;
  transition:transform .38s cubic-bezier(.2,.8,.2,1.15),box-shadow .38s ease,filter .2s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:22px 0 22px;overflow:hidden;
}
.room .book-title{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:11.5px;font-weight:620;letter-spacing:.02em;line-height:1.15;
  max-height:calc(var(--h) - 92px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
}
.room .book-course{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:10px;font-weight:760;letter-spacing:.12em;color:var(--foil);text-transform:uppercase;
  padding:6px 2px;border-top:1px solid color-mix(in srgb,var(--foil) 55%,transparent);
}
/* The requested behaviour: the book half lifts itself off the shelf as the
   pointer (or keyboard focus) arrives, and settles back when it leaves. */
.room .book:hover, .room .book:focus-visible, .room .book.lifted{
  transform:translateY(calc(var(--h) * -0.46)) rotate(-2.5deg);
  z-index:5;filter:brightness(1.12);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),8px 18px 26px rgba(0,0,0,.6);
}
.room .book:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.room .book.thesis{--c:#171513;--foil:#d9b45a;--ink:#e9d9b0}
.room .book.thesis .book-title{font-size:13px}
.room .book.dim{opacity:.22;filter:saturate(.3)}

/* The peek card: spines truncate, so the lifted book's full title and class
   float above the shelf. Positioned by library.js. */
.room .peek{
  position:absolute;z-index:10;pointer-events:none;max-width:280px;
  background:rgba(12,10,8,.94);border:1px solid #4a3727;border-radius:10px;
  padding:9px 12px;box-shadow:0 10px 30px rgba(0,0,0,.6);
  opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;
}
.room .peek.show{opacity:1;transform:none}
.room .peek b{display:block;font-size:13px;line-height:1.3;color:var(--text)}
.room .peek span{display:block;margin-top:3px;font-size:11.5px;color:#d9b45a;letter-spacing:.04em}

/* ---------- reading desk (book dialog) ---------- */
.room dialog.desk, .room dialog.lightbox{
  border:none;padding:0;background:transparent;color:var(--text);max-width:min(860px,94vw);width:100%;
}
.room dialog.desk::backdrop, .room dialog.lightbox::backdrop{background:rgba(5,6,8,.78);backdrop-filter:blur(6px)}
.room .desk-inner{
  display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:24px;
  background:linear-gradient(160deg,var(--bg-raise) 0%,var(--bg-raise-2) 100%);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:24px;position:relative;
}
.room .desk-cover{width:100%;aspect-ratio:210/297;object-fit:cover;object-position:top;border-radius:6px;background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.55)}
.room .desk-cover.map{object-fit:contain;background:#fff}
.room .desk h3{margin:0;font-size:21px;line-height:1.25}
.room .desk .meta{margin:8px 0 0;color:var(--signal);font-size:12.5px;letter-spacing:.04em}
.room .desk .blurb{color:var(--text-dim);font-size:13.5px}
.room .close-x{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);color:var(--text-dim);font-size:16px;cursor:pointer;
}
.room .close-x:hover{color:var(--text);border-color:var(--signal)}
@media (max-width:620px){.room .desk-inner{grid-template-columns:1fr}.room .desk-cover{width:140px}}

/* ---------- map room ---------- */
.room .maproom{margin-top:34px}
.room .layer-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.room .layer-tab{
  flex:none;background:var(--bg-raise);color:var(--text-dim);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;font-family:inherit;font-size:12.5px;text-align:left;cursor:pointer;
}
.room .layer-tab small{display:block;color:var(--text-faint);font-size:10.5px;margin-top:1px}
.room .layer-tab[aria-selected=true]{border-color:var(--signal);color:var(--text);background:var(--signal-soft)}
.room .map-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:16px;margin-top:12px}
@media (max-width:820px){.room .map-grid{grid-template-columns:1fr}}
.room .map-stage{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:#fbfbfd;aspect-ratio:1/1;max-height:78vh;touch-action:none;cursor:grab;
}
.room .map-stage.dragging{cursor:grabbing}
.room .map-stage img{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;max-width:none}
.room .map-controls{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;z-index:2}
.room .map-controls button, .room .map-controls a{
  background:rgba(11,13,16,.86);color:var(--text);border:1px solid var(--line);border-radius:8px;
  min-width:34px;height:34px;padding:0 10px;font-size:14px;font-family:inherit;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);
}
.room .map-controls button:hover, .room .map-controls a:hover{border-color:var(--signal)}
.room .map-zoom{position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--mono);font-size:11px;
  color:#333;background:rgba(255,255,255,.8);padding:3px 7px;border-radius:6px}
.room .map-info{background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.room .map-info h4{margin:0;font-size:16px}
.room .map-info .source{margin:3px 0 10px;color:var(--signal);font-size:12px;letter-spacing:.04em}
.room .map-info p{color:var(--text-dim);font-size:13px;margin:0 0 12px}
.room .legend{list-style:none;margin:0;padding:0}
.room .legend li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12px;padding:3px 0}
.room .legend .sw{width:12px;height:12px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.room .legend .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.room .legend .pc{font-family:var(--mono);color:var(--text-faint);font-size:11px}
.room .legend .bar{grid-column:2 / 4;height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:-2px}
.room .legend .bar i{display:block;height:100%;border-radius:2px}

/* =====================================================================
   PHOTOS — justified rows + lightbox
   ===================================================================== */
.room .album{margin-top:28px}
.room .album-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.room .album-head h3{margin:0;font-size:20px}
.room .album-head p{margin:0;color:var(--text-faint);font-size:13px}
.room .justified{display:flex;flex-wrap:wrap;gap:8px}
.room .justified::after{content:"";flex-grow:999999}
.room .ph{
  position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--bg-raise);
  flex-grow:calc(var(--r) * 100);width:calc(var(--r) * 210px);
  border:none;padding:0;cursor:zoom-in;
}
.room .ph i{display:block;padding-bottom:calc(100% / var(--r))}
.room .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s ease}
.room .ph:hover img, .room .ph:focus-visible img{transform:scale(1.045);filter:brightness(1.06)}
.room .ph:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.room .ph figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;font-size:12px;text-align:left;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.66),transparent);opacity:0;transition:opacity .2s ease;
}
.room .ph:hover figcaption, .room .ph:focus-visible figcaption{opacity:1}
@media (max-width:560px){.room .ph{width:calc(var(--r) * 130px)}}

.room dialog.lightbox{max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0}
.room .lb-inner{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:56px 64px 70px}
.room .lb-inner img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.room .lb-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--text-dim);font-size:13px}
.room .lb-cap b{color:var(--text);font-weight:600}
.room .lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(11,13,16,.8);border:1px solid var(--line);color:var(--text);font-size:20px;cursor:pointer;
}
.room .lb-nav:hover{border-color:var(--signal)}
.room .lb-prev{left:12px}.room .lb-next{right:12px}
.room .lightbox .close-x{top:14px;right:14px}
@media (max-width:560px){.room .lb-inner{padding:52px 8px 70px}.room .lb-nav{top:auto;bottom:12px;transform:none}}

/* =====================================================================
   CRATES — sleeves with the record sliding out
   ===================================================================== */
.room .category{margin-top:30px}
.room .category-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.room .category-head h3{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);font-weight:680}
.room .category-head .count{font-size:12px}
.room .category-head::after{content:"";flex:1;height:1px;background:var(--line)}
.room .crate-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px 18px}
.room .sleeve{
  position:relative;background:none;border:none;padding:0;cursor:pointer;text-align:left;color:inherit;font-family:inherit;
}
.room .sleeve-art{position:relative;aspect-ratio:1;display:block}
.room .sleeve-art .disc{
  position:absolute;top:4%;left:4%;width:92%;height:92%;border-radius:50%;
  background:
    radial-gradient(circle,var(--label,#ffb340) 0 15%,#111 15.5% 16.5%,transparent 17%),
    repeating-radial-gradient(circle,#161616 0 2px,#1d1d1d 2px 3px);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  transition:transform .45s cubic-bezier(.2,.8,.2,1.1);
}
.room .sleeve-art .cover{
  position:absolute;inset:0;border-radius:6px;overflow:hidden;background:var(--bg-raise-2);
  box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  display:grid;place-items:center;
}
.room .sleeve-art .cover img{width:100%;height:100%;object-fit:cover}
.room .sleeve-art .cover .gen{width:100%;height:100%;display:grid;place-items:center;font-size:32px;font-weight:760;letter-spacing:-.02em;color:rgba(255,255,255,.85);padding:14px;text-align:center;line-height:1.05}
.room .sleeve:hover .disc, .room .sleeve:focus-visible .disc{transform:translateX(34%) rotate(40deg)}
.room .sleeve:focus-visible{outline:none}
.room .sleeve:focus-visible .cover{outline:2px solid var(--signal);outline-offset:3px}
.room .sleeve .s-title{display:block;margin-top:10px;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room .sleeve .s-artist{display:block;color:var(--text-faint);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room .sleeve .s-next{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--signal)}
.room .sleeve .s-next.now{color:var(--live)}
.room .crate-desk .desk-cover{aspect-ratio:1;object-fit:cover}
.room .crate-desk .tracklist .idx{width:54px}
.room .crate-desk .tracklist li.now .t{color:var(--live)}
.room .onair-tag{color:var(--live);font-weight:700;letter-spacing:.04em}

.room .empty-room{color:var(--text-faint);font-style:italic;padding:30px 0}

@media (prefers-reduced-motion:reduce){
  .room .book:hover, .room .book:focus-visible, .room .book.lifted{transform:translateY(calc(var(--h) * -0.46))}
}