/* ROOMS — the first-level answers.
 *
 * Fred, 1 Sep 2026: "The first level answers are generic and mostly already built...
 * relatively low overhead and I don't think need a server... lets build the first few
 * now as live POCs, and note 'Coming soon' where needed."
 *
 * WHAT A FIRST LEVEL ANSWER IS, and it is not a summary:
 *
 *   "Every layer must be a COMPLETE ARGUMENT AT ITS OWN LEVEL, not a summary of the
 *    layer beneath it. Progressive disclosure fails the moment the top layer reads
 *    like a teaser — the reader instantly senses they've been seated at the kids'
 *    table and clicks through resentfully or leaves."
 *
 *   "Every level is completely true. The levels differ in COMPLETENESS, never in
 *    HONESTY. A deeper level adds; it never says 'now here's what we really meant.'"
 *
 * AND WHAT "COMING SOON" IS ALLOWED TO LOOK LIKE. Fred asked this directly on
 * 18 July 2026 — placeholders, or something better? The answer he was given, and
 * kept: "Every unfinished room should still have something worth visiting. A
 * placeholder says 'We're not done.' A meaningful thumbnail says: come in, here's
 * why this room exists, what problem we're solving, where we're headed."
 *
 * So nothing here is a stub. The unfinished room states what it is for, what exists
 * today, and precisely which part is waiting on the server — never just "coming".
 *
 * House tokens, inherited. No external assets: the campus runs from a thumb drive.
 */

:root{
  --paper:#F2EFE6; --paper-raised:#FBFAF5; --ink:#18213B; --navy:#1F3864;
  --brass:#B8863B; --brass-deep:#8A6222; --soft:#5c6274; --edge:#ded5c4;
}
:root[data-theme="dark"]{
  --paper:#171410; --paper-raised:#211D18; --ink:#EDE6D8; --navy:#D8C9A8;
  --brass:#C79A4A; --brass-deep:#D9AE60; --soft:#A79C8B; --edge:#3A342B;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 19px/1.7 Georgia,'Iowan Old Style','Palatino Linotype',serif;
}
.wrap{max-width:42rem;margin:0 auto;padding:clamp(2rem,6vh,3.5rem) 1.5rem 4rem}
:focus-visible{outline:2.5px solid var(--navy);outline-offset:3px;border-radius:2px}

.q{
  font-size:clamp(1.45rem,4.2vw,2rem);font-weight:400;line-height:1.26;
  margin:0 0 .5rem;color:var(--ink);
}
.a{font-size:1.12rem;line-height:1.55;color:var(--navy);margin:0 0 1.9rem}
p{margin:0 0 1.15rem}
h2{
  font-size:1.14rem;font-weight:400;color:var(--navy);
  margin:2.3rem 0 .7rem;
}
b{font-weight:normal;color:var(--ink)}
.soft{color:var(--soft)}
blockquote{
  margin:1.3rem 0;padding-left:1.15rem;border-left:2px solid var(--brass);
  font-size:1rem;line-height:1.6;color:var(--soft);
}
blockquote b{color:var(--ink)}

/* What exists today, and what is waiting. Never a bare "coming soon". */
.state{
  margin:2.4rem 0 0;border:1px solid var(--edge);border-radius:5px;
  background:var(--paper-raised);padding:1.2rem 1.3rem 1rem;
}
.state h3{
  margin:0 0 .7rem;font-size:.82rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-deep);
}
.state ul{margin:0;padding:0;list-style:none}
.state li{
  position:relative;padding-left:1.5rem;margin:0 0 .6rem;
  font-size:.97rem;line-height:1.55;color:var(--soft);
}
.state li:last-child{margin-bottom:0}
.state li::before{
  position:absolute;left:0;top:0;font-size:.9rem;color:var(--brass-deep);
}
.state li.now::before{content:"\2713"}          /* built, works today */
.state li.wait::before{content:"\2192"}         /* waiting on the server */
.state li b{color:var(--ink)}
.why{margin:.9rem 0 0;font-size:.9rem;line-height:1.55;color:var(--soft)}

@media (forced-colors: active){
  body{background:Canvas;color:CanvasText}
  .a,.soft,blockquote,.state li,.why{color:CanvasText}
  blockquote{border-left:3px solid CanvasText}
  .state{border:2px solid CanvasText;background:Canvas}
  .state h3,.state li::before{color:CanvasText}
}