/* compAIser landing page. Each room borrows its studio's own palette and type;
   the names share one grid so their "AI" letters line up down the page. */
:root{
  --night:#1c2723;--night-text:#efe9da;--night-dim:#c9c6b7;--night-line:#efe9da26;
  --serif:Georgia,'Times New Roman',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --name-size:clamp(38px,11vw,64px)
}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;background:var(--night);color:var(--night-text);font:14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd{margin:0}
a{color:inherit}
a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* One grid for the whole house: l | AI | r are shared by every name. */
.house{
  --pad:clamp(20px,4vw,60px);
  display:grid;
  grid-template-columns:[room-start] var(--pad) [l] max-content [ai] max-content [r] max-content [gap] 0 [art] minmax(0,1fr) [art-end] var(--pad) [room-end];
  max-width:1320px;margin:0 auto;padding:0 clamp(10px,2vw,24px) 28px;row-gap:12px
}
.hall,.room{grid-column:room;display:grid;grid-template-columns:subgrid;align-items:start}
.spine{grid-column:l / gap;display:grid;grid-template-columns:subgrid;align-items:baseline;
  font:400 var(--name-size)/1 var(--serif);letter-spacing:-.035em;white-space:nowrap}
.spine .l{justify-self:end}
.spine .ai{justify-self:center;padding:0 .015em}
.spine .r{justify-self:start}
/* Long text must not widen the shared name columns. */
.fit{width:0;min-width:100%}

.hall{padding:clamp(40px,7vw,88px) 0 clamp(30px,4vw,52px)}
.hall .spine{grid-row:1;color:var(--night-text)}
.hall .spine .l,.hall .spine .r{color:#efe9dacc}
.hall-text{grid-column:l / art-end;grid-row:2;margin-top:24px}
.lede{font:clamp(17px,2vw,21px)/1.5 var(--serif);max-width:33em;color:var(--night-text)}
.hall-note{max-width:40em;margin-top:12px;color:var(--night-dim);font-size:13px}

.room{position:relative;border-radius:6px;padding:clamp(24px,4vw,48px) 0;color:var(--ink);background:var(--paper)}
.room .spine{grid-row:2}
.room-art{grid-column:l / art-end;grid-row:1;margin-bottom:22px;display:block;width:100%;aspect-ratio:2/1;border-radius:4px;overflow:hidden}
.room-art svg{display:block;width:100%;height:100%}
.room-text{grid-column:l / art-end;grid-row:3;margin-top:14px}
.motto{font-size:9px;font-weight:650;letter-spacing:1.9px;text-transform:uppercase;color:var(--muted)}
.room-lede{font:17px/1.55 var(--serif);margin-top:12px;max-width:31em}
.facts{margin-top:18px;font-size:12.5px;line-height:1.5;max-width:36em}
.facts div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.facts dt{color:var(--muted)}
.room-open{position:static;display:inline-flex;align-items:center;gap:18px;margin-top:22px;padding:13px 16px;border-radius:5px;
  background:var(--button);color:var(--button-text);font-size:12px;font-weight:600;text-decoration:none;transition:background .2s}
.room-open span{font-size:19px;font-weight:400;line-height:1}
/* The whole room opens its studio; the button stays the one link. */
.room-open::after{content:"";position:absolute;inset:0;border-radius:6px}
.room:hover .room-open{background:var(--button-hover)}
.room-open:focus-visible{outline:2px solid var(--button);outline-offset:3px}

/* The three studios, in their own colors. */
.room-baich{--paper:#f5f2e9;--ink:#173c32;--muted:#6d756a;--line:#deded0;--accent:#a46445;--button:#a46445;--button-hover:#8c5337;--button-text:#fff}
.room-baich .spine .l,.room-baich .spine .r{color:#173c32}
.room-baich .dot{color:#a46445}
.room-daibussy{--paper:#f5f3ed;--ink:#28424b;--muted:#6c7c7e;--line:#dcded6;--accent:#5c8287;--button:#28424b;--button-hover:#3d5a61;--button-text:#f5f3ed}
.room-daibussy .r i{font-style:italic}
.room-daibussy .dot{color:#9b7755}
.room-shaire{--paper:#f2efe4;--ink:#283b2e;--muted:#66745f;--line:#d8ddce;--accent:#9c7638;--button:#2f513b;--button-hover:#24412f;--button-text:#f6f0de}
.room-shaire .dot{color:#a98245;font-size:.42em;vertical-align:.95em;margin-left:.18em;letter-spacing:0}
.room .spine .ai{color:var(--accent)}
.room-daibussy .room-art{background:linear-gradient(#e9edea,#f3f1eb)}
/* A fugue exposition drawn as BAIch draws its score: one subject entering in four voices. */
.art-baich{background:#18382f;box-shadow:inset 0 0 80px #0b291420}
.art-baich .bar{stroke:#efe9da14;stroke-width:1}
.art-baich rect{opacity:.62}
.art-baich rect.subject{opacity:1}
.art-baich .relation{fill:none;stroke:#e2a27c;stroke-width:1.3;stroke-dasharray:3 4}

.cellar{grid-column:room;padding:clamp(36px,5vw,64px) var(--pad) 8px;color:var(--night-dim)}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.notes h3{font:400 18px/1.3 var(--serif);color:var(--night-text);margin-bottom:8px}
.notes p{font-size:13px;line-height:1.65;max-width:34em}
.credits{margin-top:clamp(32px,5vw,56px);padding-top:18px;border-top:1px solid var(--night-line);font-size:11.5px;line-height:1.7;max-width:62em}
.credits p+p{margin-top:6px}
.credits a{text-underline-offset:2px}

@media(min-width:820px){
  :root{--name-size:clamp(52px,6vw,82px)}
  .house{row-gap:16px;grid-template-columns:[room-start] var(--pad) [l] max-content [ai] max-content [r] max-content [gap] clamp(32px,4.5vw,72px) [art] minmax(0,1fr) [art-end] var(--pad) [room-end]}
  .hall-text{grid-column:art;grid-row:1;margin:0;align-self:end;padding-bottom:.4em}
  .room{align-items:center}
  .room .spine{grid-row:1}
  .room-text{grid-column:l / gap;grid-row:2}
  .room-art{grid-column:art;grid-row:1 / span 2;margin:0}
}
@media(max-width:820px){.notes{grid-template-columns:1fr}}
@media(max-width:420px){.facts div{grid-template-columns:1fr;gap:2px}}
@media(prefers-reduced-motion:reduce){.room-open{transition:none}}