/* Home: your crew, and the way in.

   The first room onto the kit (STYLES-PLAN.md, Step 5). Home goes first
   because it is the smallest: twelve inline styles and two card-shaped
   buttons, so the pattern for every room after it can be seen whole.

   Everything here reads the kit tokens. Where a hand-tuned value sat between
   two steps of the scale it is snapped, and each snap is named in the commit:
   the page gap 26 to 22, the resume card's radius 16 to the 14 the crew cards
   already used, and two different shadows to the one --sh-card.

   What is NOT snapped, and why: the portrait badge stays 27px and the play
   disc 42px. They are the size of a thing rather than a rhythm, and a spacing
   scale has no opinion about how big a circle should be. The crew grid's 148px
   column is the same kind of number.

   The two buttons stay card-shaped rather than taking .btn. Not everything you
   can click is button chrome, and .btn is the house's small bordered control,
   not a picture card. */

.house-wordmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;text-align:center;color:var(--mark);text-shadow:var(--mark-shadow);
  width:min(88%,920px);}
/* The welcome over the name (Mark, 2026-08-22: the cover is the landing page
   and it says welcome). The tag's own face and manner, above instead of
   below, so the wordmark stays the loudest word on the page. */
.house-wordmark-hello{font-family:Georgia,serif;font-size:var(--t-head);
  letter-spacing:var(--ls-wide);margin-bottom:var(--s5);opacity:.86;}
.house-wordmark-name{font-family:var(--font-trajan);font-weight:var(--w-med);
  font-size:clamp(36px,6.8vw,82px);letter-spacing:.16em;line-height:1.05;}
.house-wordmark-tag{font-family:Georgia,serif;font-size:var(--t-head);
  letter-spacing:var(--ls-wide);margin-top:var(--s5);opacity:.86;}
.house-show{position:absolute;inset:0;overflow:hidden;background:transparent;}
.house-show-layer{position:absolute;inset:0;opacity:0;z-index:1;transition:opacity 1.4s ease;}
.house-show-layer.on{opacity:1;z-index:2;}
.house-show-layer.in{z-index:3;}
.house-show-layer img,.house-show-layer video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;}

.house-desk{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:10px;}
.house-desk-kicker{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--muted);}
.house-desk-adds{display:flex;gap:6px;}
.house-desk-add{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:8px 6px;border:var(--bd) solid var(--edge);border-radius:10px;font-size:var(--t-small);cursor:pointer;}
.house-desk-add input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.house-desk-ctrls{display:flex;gap:6px;}
.house-desk-btn{flex:1;padding:8px 6px;border:var(--bd) solid var(--edge);border-radius:10px;background:var(--panel);
  font-size:var(--t-small);}
.house-desk-hold{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--t-small);
  color:var(--muted);}
.house-desk-hold select{font:inherit;color:var(--text);background:var(--panel);border:var(--bd) solid var(--edge);
  border-radius:8px;padding:4px 6px;}
.house-desk-list{display:flex;flex-direction:column;gap:6px;}
.house-desk-row{display:flex;align-items:center;gap:6px;padding:4px;border-radius:10px;}
.house-desk-row.on{background:var(--sel);}
.house-desk-thumb{width:36px;height:36px;object-fit:cover;border-radius:8px;flex:none;background:var(--sel);}
.house-desk-vid{display:grid;place-items:center;font-size:8px;letter-spacing:.08em;color:var(--muted);}
.house-desk-when{flex:1;min-width:0;padding:6px 8px;border:var(--bd) solid var(--edge);border-radius:8px;
  font-size:var(--t-small);}
.house-desk-x{width:28px;height:28px;flex:none;border-radius:8px;color:var(--muted);}
.house-desk-ord{display:flex;flex-direction:column;gap:1px;flex:none;}
.house-desk-ord button{width:22px;height:16px;padding:0;font-size:10px;color:var(--muted);line-height:1;}
.house-desk-ord button:disabled{opacity:.3;}
.house-desk-music{display:flex;align-items:center;gap:8px;}
.house-desk-track{flex:1;min-width:0;font-size:var(--t-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.house-desk-hold input[type=range]{flex:1;min-width:0;accent-color:var(--accent);}
.house-desk-empty,.house-desk-wait{font-size:var(--t-small);color:var(--muted);}

.home{display:flex; flex-direction:column; gap:var(--s8); padding:var(--s3) var(--s7) 0; animation:fadeUp .35s ease both;}

.home-head{display:flex; flex-direction:column; gap:var(--s3);}
.home-title{font-size:var(--t-room); line-height:1.04; letter-spacing:var(--ls-head); font-weight:var(--w-semi);}
.home-sub{font-size:var(--t-body); line-height:var(--lh-tight); color:var(--muted); max-width:30ch;}

/* the way back into the story you were in */
.home-resume{display:flex; align-items:center; gap:var(--s6); padding:var(--s6);
  border:var(--bd) solid var(--edge); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--sh-card);}
.home-resume-play{display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none;
  border-radius:var(--r-round); background:var(--accent); color:var(--onAccent);}
.home-resume-lines{display:flex; flex-direction:column; gap:var(--s1); min-width:0;}
.home-resume-title{font-size:var(--t-lead); font-weight:var(--w-semi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* the company */
.home-company{display:flex; flex-direction:column; gap:var(--s5);}
.home-company-head{display:flex; align-items:baseline; justify-content:space-between;}
.home-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:var(--s4);}

.home-card{position:relative; border:var(--bd) solid var(--edge); border-radius:var(--r-lg);
  overflow:hidden; background:var(--panel); box-shadow:var(--sh-card);}
.home-card-face{position:relative; aspect-ratio:1/1;}
.home-card-glow{position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 0%, var(--glow), transparent 70%);}
.home-card-badge{position:absolute; top:var(--s3); right:var(--s3); display:flex; align-items:center; justify-content:center;
  width:27px; height:27px; border-radius:var(--r-round); background:var(--chrome); border:var(--bd) solid var(--edge);
  color:var(--muted); backdrop-filter:blur(8px);}
.home-card-lines{display:flex; flex-direction:column; gap:var(--s1); padding:var(--s3) var(--s4) var(--s4);}
.home-card-name{font-size:var(--t-lead); font-weight:var(--w-semi);}

/* ---------- The Show, in a window (Mark, 2026-08-20) ----------
   Home is the cover and nothing else, so the desk that used to be the right
   panel's Home tab is a floating window off the banner gear instead. Same desk
   markup, so every .house-desk rule above still dresses it; what is added here
   is only the window around it.

   The house modal law: the scrim (components.css) paints nothing and passes
   pointers through, the window catches its own, and it closes on its cross. */
.show-win{pointer-events:auto; display:flex; flex-direction:column;
  width:min(380px, calc(100vw - 32px)); max-height:min(76vh, 720px);
  border:var(--bd) solid var(--edge); border-radius:var(--r-xl);
  background:var(--panel); box-shadow:var(--sh-modal); overflow:hidden;}
.show-win-head{display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s5); flex:none; padding:var(--s6) var(--s6) var(--s4);
  border-bottom:var(--bd) solid var(--edge); cursor:move;}
.show-win-kicker{display:flex; flex-direction:column; gap:2px;}
.show-win-label{font-family:"IBM Plex Mono",monospace; font-size:var(--t-label);
  letter-spacing:var(--ls-wide); color:var(--muted);}
.show-win-title{font-size:var(--t-lead); font-weight:var(--w-semi);}
/* 26px is the size of the cross, the same one the camera window draws */
.show-win-x{flex:none; width:26px; height:26px; border-radius:var(--r-sm);
  color:var(--muted); cursor:pointer;}
.show-win-x:hover{color:var(--text); background:var(--sel);}

/* The cover fills the canvas: no header above it, so nothing is reserved. */
.house-stage-bare{padding:0;}

/* ---------- Welcome: the landing page (rooms/welcome.js) ----------
   A SHELL PAGE (Mark, 2026-08-31), so the middle is `landing()`'s and this
   sheet only makes the whole of it clickable: full width, no button chrome,
   and the house's own landing type left alone underneath. It was written as
   an absolutely-positioned cover for one afternoon; that is gone with the
   bare room it was drawn in. */
.welcome-door{display:block;width:100%;background:none;border:0;padding:0;
  color:inherit;font:inherit;text-align:inherit;cursor:pointer;}
.welcome-door .landing-title{transition:opacity .25s ease;}
.welcome-door:hover .landing-title,
.welcome-door:focus-visible .landing-title{opacity:.72;}
.welcome-door:focus{outline:none;}
.welcome-door:focus-visible .landing-title{outline:var(--bd) solid var(--edge);
  outline-offset:6px;border-radius:var(--r-sm);}