/* THE HALL
   ────────────────────────────────────────────────────────────────────
   A room full of generators. The plate is her own artwork, which already
   carries the lit archway and the room name, so nothing here draws a
   second sign over the top of it.

   Cards are links. A card that looks like a card and does nothing is the
   thing this page exists to avoid, so every tile in here is an anchor
   with a real href to a real page. */

.hall{max-width:1240px; margin:0 auto; padding:1.4rem clamp(.85rem,3vw,1.5rem) 3rem}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap}

/* ── the head: her plate beside the words ─────────────────────────── */
.hall-head{display:grid; gap:clamp(1rem,3vw,2rem); align-items:center;
  grid-template-columns:minmax(0,360px) minmax(0,1fr); margin:.6rem 0 2rem}
.hall-plate{border-radius:14px; overflow:hidden; border:1px solid var(--line,rgba(152,62,84,.28));
  box-shadow:0 22px 50px rgba(42,30,34,.22); background:#F1D5DE}
.hall-plate img{display:block; width:100%; height:auto}
.hall-plate:empty, .hall-plate img:not([src]){display:none}
.hall-words h1{font-family:var(--serif,Georgia,serif); font-weight:600; line-height:1.04;
  font-size:clamp(2rem,5vw,3.4rem); margin:.2rem 0 .6rem}
.hall-lead, .hall-words .lede{max-width:62ch}
/* the doorway above already says which room this is */
.hall-head.has-entrance #hallEyebrow,
.hall-head.has-entrance #hallTitle{position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hall-actions{margin:1.1rem 0 0; display:flex; flex-wrap:wrap; gap:.6rem}
.hall-count{margin:.9rem 0 0; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted,#6B535B)}
@media (max-width:820px){ .hall-head{grid-template-columns:1fr} }

/* ── finding one among many ───────────────────────────────────────── */
.hall-tools{display:flex; flex-wrap:wrap; gap:.8rem 1rem; align-items:center;
  padding:1rem 0 1.4rem; border-top:1px solid var(--line-soft,rgba(152,62,84,.15))}
.hall-search input{width:min(340px,72vw); padding:.62rem .9rem; font:inherit;
  font-size:.92rem; color:var(--ink,#2A1E22); background:#FFFDF8;
  border:1px solid var(--line,rgba(152,62,84,.28)); border-radius:999px}
.hall-search input:focus-visible{outline:2px solid var(--rose,#983E54); outline-offset:2px}
.hall-chips{display:flex; flex-wrap:wrap; gap:.4rem}
.hall-chip{font:inherit; font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:.45rem .8rem; border-radius:999px; cursor:pointer;
  color:var(--muted,#6B535B); background:transparent;
  border:1px solid var(--line,rgba(152,62,84,.28)); transition:background .2s, color .2s}
.hall-chip:hover{color:var(--ink,#2A1E22)}
.hall-chip[aria-pressed="true"]{color:#FFFDF8; border-color:transparent;
  background:linear-gradient(180deg,#8C3A4E 0%,#762D3F 60%,#682737 100%)}

/* ── the shelves ──────────────────────────────────────────────────── */
.shelf{margin:0 0 2.4rem}
.shelf > h2{font-family:var(--serif,Georgia,serif); font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.5rem); margin:0 0 .2rem}
.shelf > p.shelf-n{margin:0 0 1rem; font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted,#6B535B)}
.shelf-grid{display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}

.gcard{display:flex; flex-direction:column; gap:.4rem; text-decoration:none;
  padding:1rem 1.05rem 1.1rem; border-radius:12px; background:#FFFDF8;
  border:1px solid var(--line-soft,rgba(152,62,84,.15));
  box-shadow:0 6px 18px rgba(42,30,34,.07); color:var(--ink,#2A1E22);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.gcard:hover, .gcard:focus-visible{transform:translateY(-3px); border-color:var(--rose,#983E54);
  box-shadow:0 14px 30px rgba(42,30,34,.14)}
.gcard .g-mode{font-size:.58rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rose,#983E54)}
.gcard .g-title{font-family:var(--serif,Georgia,serif); font-size:1.12rem;
  font-weight:600; line-height:1.2}
.gcard .g-blurb{font-size:.84rem; line-height:1.5; color:var(--muted,#6B535B)}
/* The price and the way in share one row at the foot of the card, so the
   card cannot be read as free at a glance. margin-top:auto moved here from
   .g-go, which used to be the last thing in the card and is now inside this
   row - without it the feet stop lining up across a shelf of cards whose
   blurbs run to different lengths. */
.gcard .g-foot{margin-top:auto; padding-top:.55rem; display:flex; align-items:baseline;
  justify-content:space-between; gap:.6rem}
/* A deep champagne, written out rather than taken from --gold. The brand gold
   is #D4AF37, which measures 2.07:1 against this cream card - far under the
   4.5:1 a body-sized text needs, and the price is the one number on the card
   a shopper has to be able to read. This is the same gold family at 4.82:1.
   Night keeps the bright gold, which is already 9.69:1 on the dark card. */
.gcard .g-price{font-family:var(--serif,Georgia,serif); font-size:1.05rem; font-weight:600;
  color:#8A6D1F; font-variant-numeric:tabular-nums}
.gcard .g-go{font-size:.64rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rose,#983E54)}

.hall-empty{padding:2rem 0; color:var(--muted,#6B535B)}
.hall-foot{max-width:1240px; margin:0 auto; padding:0 clamp(.85rem,3vw,1.5rem) 4rem}

/* after dark the room dims with the rest of the house */
:root[data-theme="night"] body{background:#2A1620; color:#F6E9EE}
:root[data-theme="night"] .gcard{background:rgba(58,30,40,.72); color:#FFFDF8;
  border-color:rgba(184,150,62,.34)}
:root[data-theme="night"] .gcard .g-blurb{color:rgba(255,253,248,.76)}
:root[data-theme="night"] .gcard .g-price{color:#E3CE95}
:root[data-theme="night"] .hall-search input{background:rgba(58,30,40,.72); color:#FFFDF8;
  border-color:rgba(184,150,62,.34)}
:root[data-theme="night"] .hall-chip{color:rgba(255,253,248,.8);
  border-color:rgba(184,150,62,.34)}