/* ==========================================================================
   rooms.css — the frame the five room landings share
   --------------------------------------------------------------------------
   Work · Labs · Learn · Writing · About. Each landing opens the same way:
   the room's number and name, a display headline, one sentence that says
   what the room is, a strip of facts you can read at a glance, and jump
   links to its shelves. Behind the opening sits the room's own generated
   drawing (scripts/gen-room-art.py → img/rooms/*.svg). Every landing closes
   on the doors to the other four rooms.

   Loads after tokens.css and the page's own <style>, before chrome.css.
   Motion: one entrance on load, scroll-linked reveals where the browser has
   view timelines, nothing at all under prefers-reduced-motion.
   ========================================================================== */

.room{max-width:1120px;margin:0 auto;padding:0 28px 96px;position:relative;z-index:2}

/* ----------------------------------------------------------------- opening */
.room-hero{position:relative;isolation:isolate;display:grid;align-content:end;gap:0;
  min-height:clamp(440px,68vh,660px);padding:72px 0 44px}
.room-art{position:absolute;z-index:-1;top:-72px;bottom:-40px;left:50%;width:100vw;transform:translateX(-50%);
  pointer-events:none;background-repeat:no-repeat;background-size:cover;background-position:70% 40%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 28%,#000 62%),linear-gradient(180deg,#000 70%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 28%,#000 62%),linear-gradient(180deg,#000 70%,transparent);
  mask-composite:intersect}
.room-art::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 72% 42%,var(--room-glow,rgba(232,131,58,.10)),transparent 70%)}
[data-room="work"] .room-art{background-image:url("/img/rooms/work.svg")}
[data-room="labs"] .room-art{background-image:url("/img/rooms/labs.svg");--room-glow:rgba(217,164,65,.09)}
[data-room="learn"] .room-art{background-image:url("/img/rooms/learn.svg");--room-glow:rgba(138,168,107,.09)}
[data-room="writing"] .room-art{background-image:url("/img/rooms/writing.svg");background-size:min(860px,62vw) auto;background-position:right 100%;opacity:.7;--room-glow:rgba(143,163,173,.07)}

.room-no{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--brass);margin:0}
.room-no b{font-weight:500;color:var(--ember);font-size:var(--text-caption);letter-spacing:.08em;
  border:1px solid rgba(232,131,58,.45);border-radius:999px;padding:3px 10px}
.room-no::after{content:"";height:1px;width:min(160px,22vw);background:linear-gradient(90deg,var(--line),transparent)}

.room-hero h1{font-family:var(--serif);font-style:italic;font-weight:var(--weight-display);
  font-variation-settings:'opsz' 144;font-size:clamp(2.9rem,1.5rem + 5.4vw,5.9rem);line-height:.98;
  letter-spacing:var(--tracking-display);max-width:13ch;margin:22px 0 0;text-align:left;color:var(--parchment);text-wrap:balance}
.room-hero h1 em{color:var(--ember);font-style:italic}
.room-lede{font-family:var(--serif);font-size:var(--text-lead);line-height:1.6;color:var(--parchment-dim);
  max-width:54ch;margin:22px 0 0}

/* the facts strip: numbers first, labels under, one glance */
.room-facts{display:flex;flex-wrap:wrap;gap:0;margin:34px 0 0;padding:0;border-top:1px solid var(--line);max-width:760px}
.room-facts>div{display:flex;flex-direction:column-reverse;gap:2px;padding:16px 28px 0 0;margin-right:28px;
  border-right:1px solid rgba(74,59,40,.55);min-width:0}
.room-facts>div:last-child{border-right:0;margin-right:0}
.room-facts dd{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);
  line-height:1;color:var(--parchment);font-variant-numeric:lining-nums tabular-nums}
.room-facts dt{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.room-facts [data-tone="live"] dd{color:var(--moss)}
.room-facts [data-tone="beta"] dd{color:var(--ember)}
.room-facts [data-tone="waitlist"] dd{color:var(--gold)}
.room-facts [data-tone="new"] dd{color:var(--ember)}

.room-jump{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.room-jump a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border:1px solid var(--line);
  border-radius:999px;font-family:var(--mono);font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--parchment-dim);background:rgba(28,21,16,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}
.room-jump a::after{content:"↓";color:var(--brass);transition:transform var(--transition-fast)}
.room-jump a:hover,.room-jump a:focus-visible{border-color:var(--brass);color:var(--parchment);background:rgba(43,33,23,.8)}
.room-jump a:hover::after{transform:translateY(2px)}

/* ------------------------------------------------------------------ shelves */
.room-shelf{margin-top:clamp(64px,9vw,104px);scroll-margin-top:88px}
.room-shelf-head{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 18px;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:28px}
.room-shelf-head .k{font-family:var(--mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--brass)}
.room-shelf-head h2{font-family:var(--serif);font-style:italic;font-weight:var(--weight-heading);
  font-size:var(--text-h2);line-height:var(--leading-heading);color:var(--parchment);margin:0}
.room-shelf-head p{grid-column:2;font-family:var(--serif);font-size:var(--text-small);line-height:1.6;
  color:var(--parchment-dim);margin:4px 0 0;max-width:64ch}

/* status chip with a lit dot: live breathes, the rest hold still */
p.status.status,span.status.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--text-label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass);padding:4px 10px 4px 9px;border-radius:999px;
  border:1px solid rgba(201,168,106,.35);background:rgba(28,21,16,.72);line-height:1.2;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.status[data-status="live"]{color:var(--moss);border-color:rgba(138,168,107,.5)}
.status[data-status="beta"]{color:var(--ember);border-color:rgba(232,131,58,.5)}
.status[data-status="waitlist"]{color:var(--gold);border-color:rgba(217,164,65,.5)}
.status[data-status="past"]{color:var(--faint);border-color:rgba(111,101,87,.6)}
.status[data-status="waitlist"]::before,.status[data-status="past"]::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}

/* ------------------------------------------------------------------- doors */
.room-doors{margin-top:clamp(80px,11vw,128px);padding-top:28px;border-top:1px solid var(--line)}
.room-doors-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.room-doors-head h2{font-family:var(--serif);font-style:italic;font-weight:var(--weight-heading);font-size:var(--text-h2);margin:0;color:var(--parchment)}
.room-doors-head p{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0}
.room-doors ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:200px;height:100%;
  padding:18px 18px 20px;border:1px solid var(--color-border);border-radius:12px;overflow:hidden;isolation:isolate;
  background:var(--color-bg-elevated);box-shadow:var(--shadow-raised);color:var(--parchment);
  transition:border-color var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base)}
.door::before{content:"";position:absolute;inset:0;z-index:-2;background-repeat:no-repeat;background-size:cover;
  background-position:center;opacity:.85;transition:transform 900ms var(--ease-organic),opacity var(--transition-base)}
.door::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(36,27,19,.15) 0%,rgba(36,27,19,.7) 48%,rgba(28,21,16,.97) 100%)}
.door[data-room="work"]::before{background-image:url("/img/rooms/work.svg");background-position:70% 50%}
.door[data-room="labs"]::before{background-image:url("/img/rooms/labs.svg");background-position:65% 60%}
.door[data-room="learn"]::before{background-image:url("/img/rooms/learn.svg");background-position:65% 40%}
.door[data-room="writing"]::before{background-image:url("/img/rooms/writing.svg");background-position:30% 60%}
.door[data-room="about"]::before{background-image:url("/img/rooms/about.svg")}
.door-no{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.16em;color:var(--brass)}
.door-name{font-family:var(--serif);font-style:italic;font-weight:var(--weight-heading);font-size:1.6rem;line-height:1.1;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.door-name::after{content:"→";font-family:var(--mono);font-style:normal;font-size:var(--text-small);color:var(--ember);
  transition:transform var(--transition-base)}
.door-line{font-family:var(--serif);font-size:var(--text-small);line-height:1.5;color:var(--parchment-dim)}
.door:hover,.door:focus-visible{border-color:var(--brass);box-shadow:var(--shadow-float)}
.door:hover::before,.door:focus-visible::before{opacity:1;transform:scale(1.06)}
.door:hover .door-name::after,.door:focus-visible .door-name::after{transform:translateX(4px)}

/* -------------------------------------------------------------------- motion */
@keyframes room-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes room-art-in{from{opacity:0;transform:translateX(-50%) scale(1.04)}}
@keyframes room-reveal{from{opacity:0;transform:translateY(32px)}}
@media (prefers-reduced-motion:no-preference){
  .room-art{animation:room-art-in 1.6s var(--ease-organic) both}
  .room-hero>:not(.room-art){animation:room-rise .9s var(--ease-organic) both}
  .room-hero>:nth-child(2){animation-delay:.06s}
  .room-hero>:nth-child(3){animation-delay:.14s}
  .room-hero>:nth-child(4){animation-delay:.24s}
  .room-hero>:nth-child(5){animation-delay:.34s}
  .room-hero>:nth-child(6){animation-delay:.44s}
  @supports (animation-timeline:view()){
    .rv{animation:room-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
  .door{will-change:transform}
  .door:hover{transform:translateY(-3px)}
}

/* -------------------------------------------------------------------- narrow */
@media (max-width:900px){
  .room-doors ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .room{padding:0 18px 72px}
  .room-hero{min-height:0;padding:56px 0 32px}
  .room-art{top:-60px;background-position:62% 30%;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0,rgba(0,0,0,.5) 45%,transparent 92%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.95) 0,rgba(0,0,0,.5) 45%,transparent 92%);opacity:.75}
  .room-facts>div{padding-right:18px;margin-right:18px}
  .room-shelf-head{grid-template-columns:1fr}
  .room-shelf-head p{grid-column:1}
  .door{min-height:150px}
}
@media (max-width:420px){
  .room-doors ul{grid-template-columns:1fr}
  .room-facts>div{padding-right:14px;margin-right:14px}
}

/* /about/ keeps its own painted opening; it borrows the room number and the doors */
.room-no-inline{display:inline-block;color:var(--ember);border:1px solid rgba(232,131,58,.45);border-radius:999px;padding:1px 9px;margin-right:6px;letter-spacing:.08em}
.about-doors{padding-bottom:0}
.about-doors .room-doors{margin-top:64px}