/* Talking with the Masters — quiet, scholarly, typographic.
   System fonts only, no external assets. Ink on parchment. */
:root {
  --ink: #2b251c;
  --ink-soft: #453b2d;
  --paper: #faf6ec;
  --paper-deep: #f3ecdb;
  --card: #fffdf7;
  --line: #ddd2ba;
  --line-dark: #c9b992;
  --accent: #8a6d2f;
  --accent-dark: #6d5523;
  --muted: #756a58;
  --band: #221c14;
  --band-text: #efe7d3;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  line-height: 1.7; font-size: 17.5px;
}
h1, h2, h3 { line-height: 1.25; font-weight: normal; color: var(--ink); }
h1 { font-size: 2.15rem; margin: 0.5em 0 0.35em; letter-spacing: 0.01em; }
h2 { font-size: 1.4rem; margin: 1.5em 0 0.45em; border-bottom: 1px solid var(--line-dark); padding-bottom: 0.25em; }
h3 { font-size: 1.12rem; margin: 1.1em 0 0.3em; }
p { margin: 0.55em 0; }
a { color: var(--accent-dark); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 18px 48px; }
.lede { font-size: 1.14rem; color: var(--ink-soft); line-height: 1.65; }
.small { font-size: 0.92rem; color: var(--muted); }
.cite { font-size: 0.82em; color: var(--muted); font-variant: small-caps; letter-spacing: 0.04em; white-space: nowrap; }

/* Header band */
header.site { background: var(--band); color: var(--band-text); padding: 20px 0 14px; border-bottom: 3px double var(--accent); }
header.site .wrap { padding-bottom: 0; }
.brand { font-size: 2.4rem; display: block; text-align: center; color: var(--band-text); text-decoration: none; letter-spacing: 0.02em; line-height: 1.15; }
.brand:hover { color: #f7efdb; }
.tagline { color: #cdbf9f; font-style: italic; font-size: 1.05rem; margin: 3px 0 12px; text-align: center; }
nav.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding-bottom: 10px;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 0.9rem; }
nav.tools a { color: var(--band-text); text-decoration: none; padding: 3px 2px; }
nav.tools a:hover, nav.tools a[aria-current="page"] { color: #e8c97a; text-decoration: underline; text-underline-offset: 3px; }

/* The rule, stated plainly */
.rule { background: var(--paper-deep); border: 1px solid var(--line-dark); border-left: 4px solid var(--accent);
  padding: 16px 20px 12px; margin: 1.4em 0; }
.rule .kicker { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 4px; }
.rule p { margin: 0.35em 0; }

/* Master cards */
.master-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; margin: 1.2em 0 0.4em; }
.master-card { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  padding: 18px 18px 14px; display: flex; flex-direction: column; }
.master-card .dates { font-variant: small-caps; letter-spacing: 0.06em; color: var(--muted); font-size: 0.88rem; margin: 0; }
.master-card h3 { font-size: 1.3rem; margin: 0.15em 0 0.3em; }
.master-card h3 a { color: var(--ink); text-decoration: none; }
.master-card h3 a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.master-card .book { font-style: italic; color: var(--ink-soft); margin: 0.1em 0 0.5em; }
.master-card .method { color: var(--ink-soft); font-size: 0.98rem; flex: 1; }
.master-card .enter { margin: 0.8em 0 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.9rem; }
.master-card.soon { border-top-color: var(--line-dark); background: var(--paper-deep); }
.badge { display: inline-block; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark);
  border: 1px solid var(--line-dark); padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; align-self: flex-start; }

/* Teaching lists */
ul.teach { list-style: none; padding: 0; margin: 0.6em 0; }
ul.teach li { padding: 0.65em 0 0.65em 1.1em; border-bottom: 1px solid var(--line); position: relative; }
ul.teach li:last-child { border-bottom: none; }
ul.teach li::before { content: "§"; position: absolute; left: 0; color: var(--accent); }
ul.teach strong { font-weight: bold; }

/* Audio player block */
.audio-box { background: var(--card); border: 1px solid var(--line); padding: 16px 20px 12px; margin: 1.2em 0; }
.audio-box .kicker { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 6px; }
.audio-box audio { width: 100%; margin: 4px 0 6px; }

/* Pull line */
.pull { font-size: 1.22rem; font-style: italic; color: var(--ink-soft); text-align: center;
  margin: 1.4em auto; max-width: 620px; line-height: 1.55; }

footer.site { border-top: 1px solid var(--line-dark); margin-top: 2.2em; padding-top: 14px;
  font-size: 0.92rem; color: var(--muted); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.88rem; }

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  h1 { font-size: 1.75rem; }
  .rule, .audio-box { padding: 14px 16px 10px; }
}

/* Conversation page (talk.html) — master picker tiles */
.pick { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.pick span { display: block; }
.pick .pick-name { font-size: 1.3rem; margin: 0.15em 0 0.3em; color: var(--ink); }
.pick:hover { border-color: var(--line-dark); }
.pick[aria-pressed="true"] { background: var(--paper-deep); outline: 2px solid var(--accent-dark); outline-offset: -2px; }
.pick:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

/* Conversation page — chat shell */
.chat-shell { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent); margin: 1.2em 0; }
.doorway { background: var(--paper-deep); border-bottom: 1px solid var(--line); padding: 12px 18px;
  font-style: italic; color: var(--ink-soft); font-size: 0.98rem; }
.privacy-note { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 18px;
  color: var(--ink-soft); font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.9rem; line-height: 1.5; }
.privacy-note strong { color: var(--ink); }
.chat-log { padding: 16px 18px 6px; max-height: 480px; overflow-y: auto; }
.msg { margin: 0 0 14px; max-width: 88%; }
.msg .who { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.msg p { margin: 0; white-space: pre-wrap; }
.msg.visitor { margin-left: auto; background: var(--paper-deep); border: 1px solid var(--line); padding: 10px 14px; }
.msg.master { padding: 2px 0; }
.sys-note { text-align: center; color: var(--muted); font-style: italic; font-size: 0.95rem;
  margin: 10px auto; max-width: 92%; }
.composer { border-top: 1px solid var(--line); padding: 14px 18px 16px; }
.composer label.small { display: block; margin-bottom: 6px; }
.composer textarea { width: 100%; font: inherit; font-size: 1rem; line-height: 1.5; padding: 10px 12px;
  border: 1px solid var(--line-dark); background: #fff; color: var(--ink); resize: vertical; }
.composer-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 10px;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.9rem; }
.btn { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.92rem;
  background: var(--band); color: var(--band-text); border: 1px solid var(--band); padding: 8px 20px; cursor: pointer; }
.btn:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--muted); border-color: var(--line-dark); }
.listen { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-soft); cursor: pointer; }
.voice-state { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.8rem;
  background: none; border: none; padding: 3px 0 0; margin: 0; color: var(--muted); cursor: pointer; }
.voice-state:hover { color: var(--ink); }

@media (max-width: 560px) {
  .privacy-note { padding: 10px 14px; }
  .chat-log { padding: 12px 14px 4px; }
  .composer { padding: 12px 14px 14px; }
  .msg { max-width: 95%; }
}

/* ================= The Hall (index.html) =================
   The homepage is the inside of a grand lodge: the hall art as a hero,
   then a timber door-wall where each master is a literal door. Door
   pattern documented in index.html and BUILD-NOTES.md ("The Hall"). */

/* Hero — the lodge interior, names never baked into the art */
.hall-hero { position: relative; overflow: hidden; background: #17100a; }
.hall-art { display: block; width: 100%; height: min(62vh, 560px); min-height: 340px;
  object-fit: cover; object-position: 50% 42%; }
.hall-hero-text { position: absolute; inset: 0; display: flex; align-items: flex-end;
  background: linear-gradient(to bottom, rgba(16,10,5,0.34) 0%, rgba(16,10,5,0) 34%,
  rgba(16,10,5,0) 52%, rgba(16,10,5,0.82) 100%); }
.hall-hero-text .wrap { width: 100%; padding-bottom: 26px; text-align: center; }
.hall-kicker { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.8rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: #e8c97a; margin: 0 0 2px; }
.hall-hero h1 { color: #f7efdb; font-size: 3.1rem; margin: 0; letter-spacing: 0.015em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.65); }
.hall-sub { color: #efe7d3; font-size: 1.12rem; font-style: italic; margin: 4px 0 0;
  text-shadow: 0 1px 10px rgba(0,0,0,0.7); }

/* The door wall — a dark timber band the doors stand in */
.door-wall { background:
  repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 2px, rgba(0,0,0,0) 2px 118px),
  linear-gradient(to bottom, #2a1c0f 0%, #20150a 58%, #180e05 100%);
  border-top: 3px double var(--accent); border-bottom: 3px double var(--accent);
  padding: 30px 0 36px; }
.door-wall h2 { color: #f7efdb; border-bottom-color: rgba(232,201,122,0.35); margin-top: 0.2em; text-align: center; }
.door-wall-lede { color: #cdbf9f; max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }

/* The Hall reads as one centred composition: display headings and the
   footer sit on the page's centre line (long reading paragraphs stay
   left-aligned inside the centred column, where the eye expects it). */
.hall-page h2 { text-align: center; }
.hall-page footer.site { text-align: center; }
.hall-page footer.site nav { justify-content: center; }
ul.doors { list-style: none; display: flex; flex-wrap: wrap; gap: 30px 24px;
  justify-content: center; padding: 0; margin: 1.4em 0 0.2em; }
.door-unit { width: 172px; text-align: center; }

/* One door — frame, planked panel, brass plate, knob.
   The whole door is a single real link (the <a class="door">). */
.door { display: block; text-decoration: none; }
.door-frame { display: block; background: linear-gradient(to bottom, #3d2712, #2a1809);
  padding: 11px 11px 0; border-radius: 7px 7px 0 0;
  box-shadow: inset 0 0 0 2px #100a03, inset 0 2px 0 rgba(232,201,122,0.14), 0 12px 26px rgba(0,0,0,0.55);
  transition: box-shadow 0.35s ease, transform 0.35s ease; }
.door-panel { display: block; position: relative; height: 302px; overflow: hidden;
  border-radius: 3px 3px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0 2px, rgba(0,0,0,0) 2px 44px),
    linear-gradient(160deg, #71462a 0%, #5d3719 55%, #472a12 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35), inset 0 0 36px rgba(0,0,0,0.45);
  transition: box-shadow 0.35s ease; }
/* Lower raised panel moulding */
.door-panel::before { content: ""; position: absolute; left: 19px; right: 19px; top: 148px; bottom: 22px;
  border: 2px solid rgba(0,0,0,0.30); border-radius: 3px;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.38), 0 1px 0 rgba(255,220,150,0.10); }
/* Hover / focus: warm light leaks from the door's opening edge, frame glows */
.door:hover .door-frame, .door:focus-visible .door-frame {
  box-shadow: inset 0 0 0 2px #100a03, inset 0 2px 0 rgba(232,201,122,0.14),
    0 0 30px rgba(255,178,64,0.38), 0 14px 28px rgba(0,0,0,0.55);
  transform: translateY(-3px); }
.door:hover .door-panel, .door:focus-visible .door-panel {
  box-shadow: inset -13px 0 20px -7px rgba(255,199,96,0.95), inset 0 0 0 2px rgba(0,0,0,0.35),
    inset 0 0 36px rgba(0,0,0,0.40); }
.door:focus-visible { outline: 2px solid #e8c97a; outline-offset: 4px; border-radius: 4px; }

/* The brass nameplate — name, dates, epithet, all HTML text */
.nameplate { position: absolute; top: 36px; left: 50%; transform: translateX(-50%);
  width: 132px; padding: 9px 6px 8px; border-radius: 4px; text-align: center;
  background: linear-gradient(165deg, #ecd28a 0%, #c9a44e 46%, #a87f30 62%, #dcbc66 100%);
  color: #3a2a08;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(96,68,12,0.55),
    inset 0 1px 0 rgba(255,246,205,0.85); }
.nameplate::before, .nameplate::after { content: ""; position: absolute; top: 5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7e7ae, #8a671f 70%); }
.nameplate::before { left: 6px; }
.nameplate::after { right: 6px; }
.np-name { display: block; font-variant: small-caps; font-weight: bold; font-size: 0.86rem;
  letter-spacing: 0.04em; line-height: 1.25; }
.np-dates { display: block; font-size: 0.64rem; letter-spacing: 0.05em; margin-top: 3px; }
.np-epithet { display: block; font-size: 0.7rem; font-style: italic; margin-top: 2px; }
.door-knob { position: absolute; right: 13px; top: 57%; width: 11px; height: 11px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4dd96, #b98f36 60%, #7d5c17);
  box-shadow: 0 1px 3px rgba(0,0,0,0.65); }
.door-enter { display: block; margin-top: 11px; color: #e8c97a;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.88rem; }
.door:hover .door-enter, .door:focus-visible .door-enter { text-decoration: underline; text-underline-offset: 3px; }
.door-enter.dim { color: #8d7c5c; }
.door-caption { color: #cdbf9f; font-size: 0.84rem; line-height: 1.5; margin: 5px 0 0; }
.door-caption a { color: #efe7d3; }

/* The sealed archway — a future wing, deliberately not a link */
.arch-shape { height: 313px; display: flex; align-items: center; justify-content: center;
  border-radius: 86px 86px 3px 3px;
  background: radial-gradient(ellipse at 50% 42%, #1c130a 0%, #0c0703 68%);
  box-shadow: inset 0 0 0 7px #2a1a0c, inset 0 0 46px rgba(0,0,0,0.92), 0 12px 26px rgba(0,0,0,0.5); }
.arch-plaque { padding: 8px 12px; border-radius: 4px; text-align: center;
  font-variant: small-caps; letter-spacing: 0.08em; font-size: 0.8rem; line-height: 1.45;
  color: #4c3a10; background: linear-gradient(165deg, #b99b52, #8a6d2f 60%, #a5853d);
  box-shadow: inset 0 0 0 1px rgba(70,50,8,0.6); }

@media (max-width: 560px) {
  .hall-hero h1 { font-size: 2.3rem; }
  .hall-art { height: 300px; min-height: 260px; }
  .door-unit { width: 152px; }
  .door-panel { height: 272px; }
  .arch-shape { height: 283px; }
  .nameplate { width: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .door-frame, .door-panel { transition: none; }
}

/* The Conference Room door — the grandest in the hall, and locked.
   Double-width double door; the lock is the message, so it gets NO
   hover glow or light-crack — only a still, stately sheen. */
.door-unit.conf-unit { width: 368px; }
.conf-panel { display: flex; }
.conf-leaf { flex: 1; position: relative; }
.conf-leaf + .conf-leaf { border-left: 3px solid rgba(0,0,0,0.45);
  box-shadow: -1px 0 0 rgba(255,220,150,0.08); }
.conf-leaf::before { content: ""; position: absolute; left: 16px; right: 16px; top: 148px; bottom: 22px;
  border: 2px solid rgba(0,0,0,0.30); border-radius: 3px;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.38), 0 1px 0 rgba(255,220,150,0.10); }
.conf-plate { width: 218px; top: 40px; }
/* Brass keyhole escutcheon at the meeting stile */
.keyhole { position: absolute; left: 50%; top: 56%; transform: translateX(-50%);
  width: 25px; height: 46px; border-radius: 12px;
  background: linear-gradient(165deg, #ecd28a 0%, #c9a44e 46%, #a87f30 62%, #dcbc66 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(96,68,12,0.55),
    inset 0 1px 0 rgba(255,246,205,0.85); }
.kh-dot { position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: #241503;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.9), 0 1px 0 rgba(255,246,205,0.35); }
.kh-slot { position: absolute; left: 50%; top: 15px; transform: translateX(-50%);
  width: 11px; height: 20px; background: #241503;
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.9); }
.conf-door:hover .door-frame, .conf-door:focus-visible .door-frame {
  box-shadow: inset 0 0 0 2px #100a03, inset 0 2px 0 rgba(232,201,122,0.14),
    0 12px 26px rgba(0,0,0,0.55); transform: none; }
.conf-door:hover .door-panel, .conf-door:focus-visible .door-panel {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35), inset 0 0 36px rgba(0,0,0,0.45); }
.conf-door:hover .door-enter, .conf-door:focus-visible .door-enter {
  text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .door-unit.conf-unit { width: 100%; max-width: 344px; }
  .conf-plate { width: 200px; }
}

/* Council seat picker (2026-11-13) */
.seat-picker { border: 1px solid var(--line-dark); border-left: 4px solid var(--accent); background: var(--paper-deep); padding: 12px 16px; margin: 14px 18px 0; }
.seat-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.seat { border: 1px solid var(--line-dark); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 0.95rem; background: #fff; }
.seat input { accent-color: var(--accent); margin-right: 6px; }

/* Conference Room scene (2026-11-13): grand library, table for seven, fireplace */
.room-scene { margin: 20px 0 8px; background: #17100a; border: 1px solid var(--line-dark); border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(43,37,28,0.35); }
.room-scene svg { display: block; width: 100%; height: auto; }
.room-scene figcaption { background: #221c14; color: #cdbf9f; font-style: italic; text-align: center; padding: 9px 12px; font-size: 0.98rem; }
.room-scene .fl { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 1.6s ease-in-out infinite; }
.room-scene .f2 { animation-duration: 1.25s; } .room-scene .f3 { animation-duration: 1.05s; }
.room-scene ellipse.fl { animation-duration: 2.3s; }
.room-scene .glow { animation: glowpulse 3.2s ease-in-out infinite; }
@keyframes flick { 0%,100% { transform: scaleY(1) skewX(0deg); } 30% { transform: scaleY(1.1) skewX(-1.6deg); } 60% { transform: scaleY(0.94) skewX(1.4deg); } }
@keyframes glowpulse { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .room-scene .fl, .room-scene .glow { animation: none; } }

.room-scene img { display: block; width: 100%; height: auto; }

/* ================= Warm room pilot — nietzsche.html only (2026-11-14) ====
   Marcus: the rooms felt cold and empty — "like a doctor's office." Pilot:
   the whole page sits INSIDE the study. The new painting (Nietzsche at his
   desk, lamp lit, stove warm) is a fixed full-page backdrop under a dark
   warm veil; the reading column becomes a parchment sheet laid over the
   dark room, its panels trimmed in candlelight gold with soft lamplight
   shadows. Every rule is scoped to body.room-warm — no other page changes. */
body.room-warm {
  background-color: #17100a;
  background-image:
    linear-gradient(rgba(23, 14, 5, 0.42), rgba(16, 9, 3, 0.62)),
    url("images/nietzsche-study-facing-bg.jpg");
  background-size: cover, cover;
  background-position: center top, center 32%;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
  color: #efe7d3; /* safety net: light text if the panel ever fails to paint */
}
body.room-warm header.site {
  background: linear-gradient(to bottom, #2c1c0d, #1c1106);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
body.room-warm main.wrap {
  background: linear-gradient(to bottom, #f8f0dc 0%, #f4ead0 55%, #efe2c2 100%);
  color: var(--ink);
  border-left: 1px solid #8a6d2f;
  border-right: 1px solid #8a6d2f;
  box-shadow: 0 0 0 6px rgba(46, 30, 10, 0.55), 0 24px 70px rgba(0, 0, 0, 0.75);
  margin-top: 30px;
  margin-bottom: 44px;
  padding: 30px 38px 50px;
}
body.room-warm h1 { color: #33240d; }
body.room-warm h2 { border-bottom-color: #b99b52; }
body.room-warm .room-scene {
  border-color: #8a6d2f;
  box-shadow: 0 14px 38px rgba(59, 36, 4, 0.45), 0 0 44px rgba(255, 178, 64, 0.13);
}
body.room-warm .audio-box {
  background: #fffaf0;
  border-color: #c9b992;
  box-shadow: inset 0 0 0 1px rgba(185, 155, 82, 0.28), 0 5px 16px rgba(59, 36, 4, 0.16);
}
body.room-warm .rule {
  background: linear-gradient(to bottom, #f6ead0, #efdfb8);
  border-color: #b99b52;
  border-left-color: #8a6d2f;
  box-shadow: 0 5px 16px rgba(59, 36, 4, 0.16);
}
body.room-warm ul.teach li { border-bottom-color: #ddd0ac; }
body.room-warm footer.site { border-top-color: #b99b52; }

@media (max-width: 700px) {
  /* iOS Safari janks on fixed backgrounds — let the room scroll with the page */
  body.room-warm { background-attachment: scroll, scroll; }
  body.room-warm main.wrap {
    margin-top: 16px; margin-bottom: 26px;
    padding: 20px 17px 38px;
    box-shadow: 0 0 0 4px rgba(46, 30, 10, 0.55), 0 14px 40px rgba(0, 0, 0, 0.7);
  }
}

/* ============ Warm room, second pass — the conversation itself (2026-11-14) ====
   Marcus viewed the pilot on his phone, scrolled into the conversation and
   sent a screenshot back: "This is the room that feels cold." The frame was
   warm; the working surface wasn't — pale panels, a white input box, a plain
   form. The doctor's-office feel lived exactly where the talking happens.
   The conversation lives on talk.html, so these rules follow body.room-warm
   there: talk.html adds the class only while Nietzsche is the selected
   master (his room — nobody else's page changes). The chat shell becomes a
   dark wood desk inside the study: the painting hangs at its head, the
   messages rest on it as papers and letters, and the composer is a sheet
   of writing paper laid on the wood with candlelight-gold buttons. No flat
   white or pale-grey form surface remains anywhere in the chat section. */

/* The painting inside the chat view — hidden unless a warm room is open */
.chat-scene { display: none; }
body.room-warm .chat-scene {
  display: block; margin: 0 0 8px; background: #17100a;
  border: 1px solid #8a6d2f; border-radius: 4px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 178, 64, 0.10);
}
body.room-warm .chat-scene img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: 50% 42%; }
body.room-warm .chat-scene figcaption { background: #221c14; color: #cdbf9f; font-style: italic; text-align: center; padding: 7px 12px; font-size: 0.92rem; }

/* The desk: dark planked wood holding the papers of the conversation */
body.room-warm .chat-shell {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 2px, rgba(0,0,0,0) 2px 92px),
    linear-gradient(160deg, #3a2410 0%, #2a1809 55%, #1e1106 100%);
  border: 1px solid #8a6d2f; border-top: 3px solid #b99b52;
  padding: 10px;
  box-shadow: 0 18px 44px rgba(43, 26, 4, 0.5), 0 0 40px rgba(255, 178, 64, 0.08);
}
body.room-warm .doorway {
  background: linear-gradient(to bottom, #f3e5c3, #ecd9ab);
  border: 1px solid #b99b52; color: #453b2d; margin-bottom: 8px;
}
body.room-warm .privacy-note {
  background: linear-gradient(to bottom, #eedcae, #e7d29c);
  border: 1px solid #b99b52; color: #453b2d; margin-bottom: 8px;
}
body.room-warm .privacy-note strong { color: #33240d; }
body.room-warm .chat-log {
  background: linear-gradient(to bottom, #f8eed6 0%, #f4e7c6 60%, #efe0b6 100%);
  border: 1px solid #b99b52;
  box-shadow: inset 0 2px 14px rgba(90, 62, 14, 0.18);
  margin-bottom: 8px;
}
body.room-warm .msg .who { color: #8a6d2f; }
body.room-warm .msg.visitor {
  background: linear-gradient(to bottom, #ecd9a8, #e3cc8f);
  border-color: #a8853c;
  box-shadow: 0 2px 8px rgba(43, 26, 4, 0.25);
}
body.room-warm .msg.master {
  background: linear-gradient(to bottom, #fdf8ea, #faf0d8);
  border: 1px solid #d9c48c; border-left: 3px solid #b99b52;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(43, 26, 4, 0.18);
}
body.room-warm .sys-note { color: #7a6742; }

/* The composer: a sheet of writing paper resting on the desk's wood */
body.room-warm .composer { border-top: none; padding: 6px 8px 8px; }
body.room-warm .composer label.small, body.room-warm .composer .small { color: #d9c69c; }
body.room-warm .composer textarea {
  background: linear-gradient(to bottom, #fffdf4, #fbf3dc);
  border: 1px solid #8a6d2f; color: #2b251c;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(185, 155, 82, 0.25);
}
body.room-warm .composer textarea:focus { outline: 2px solid #e8c97a; outline-offset: 1px; }
body.room-warm #memberKeyInput {
  background: linear-gradient(to bottom, #fffdf4, #fbf3dc);
  border: 1px solid #8a6d2f; color: #2b251c;
}
body.room-warm .btn {
  background: linear-gradient(165deg, #ecd28a 0%, #c9a44e 46%, #a87f30 62%, #dcbc66 100%);
  border-color: #6d5523; color: #3a2a08;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 246, 205, 0.8);
}
body.room-warm .btn:hover:not(:disabled) {
  background: linear-gradient(165deg, #f4dd96, #d4af58 50%, #b98f36);
  border-color: #6d5523;
}
body.room-warm .btn.ghost { background: rgba(23, 16, 10, 0.35); color: #e8dcc0; border-color: #b99b52; box-shadow: none; }
body.room-warm .btn.ghost:hover:not(:disabled) { background: rgba(23, 16, 10, 0.6); color: #f7efdb; }
body.room-warm .listen { color: #e8dcc0; }
body.room-warm .listen input { accent-color: #c9a44e; }
body.room-warm .btn-quiet { background: none; border: none; padding: 0; font: inherit;
  color: #e8c97a; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* The picker tiles, warmed to sit on the same parchment sheet */
body.room-warm .master-card { background: #fffaf0; border-color: #c9b992; }
body.room-warm .pick[aria-pressed="true"] { background: #f1e3c0; }

/* His room only (Marcus, same morning): "Once you've picked your person,
   make it his room only. I was just in his room and still had the other
   masters above the conversation — so it's busy." Inside a warm room the
   picker grid, its heading, and every other master's nav link disappear;
   the one discreet way back — "← Back to the Hall" — stays in header and
   footer. Part of the pilot pattern: this rolls out with the warm
   treatment to each room if Marcus approves. */
body.room-warm #picker, body.room-warm .picker-heading { display: none; }
body.room-warm header.site nav.tools a:not([href="index.html"]),
body.room-warm footer.site nav a:not([href="index.html"]) { display: none; }

@media (max-width: 700px) {
  /* The sheet must not wall off the phone screen: the dark room frames it */
  body.room-warm main.wrap { margin-left: 10px; margin-right: 10px; }
  body.room-warm .chat-scene img { height: 150px; }
  body.room-warm .chat-shell { padding: 8px; }
}

/* ============ Warm room — the Conference Room (2026-11-14) ============
   Marcus, after the solo-room second pass landed: "Do the same for the
   conference room. You built a really pretty picture but left the rest of
   the room cold." Same treatment, scoped to body.council-warm so ONLY
   conference-room.html changes (the solo body.room-warm rules carry the
   Nietzsche backdrop and the "his room only" nav-hiding — neither belongs
   at a shared table). The grand library's shelves become the page's
   backdrop (a table-free crop — see the council-warm block below);
   the reading column is a parchment sheet over the dark room; and the
   room section itself becomes the long table — dark planked wood holding
   the privacy note, the seat picker, the letter-paper log and the
   writing-paper composer as papers resting on it. Seats are chairs: dark
   wood and leather, taken in brass. No flat white or pale-grey form
   surface remains; text stays dark ink on warm parchment.
   2026-11-14, later: the duplicate scene band that briefly hung inside
   #roomSection (a ::before over the privacy note) was REMOVED at
   Marcus's word — "that's unnecessary": the table appears once, in the
   hero scene. That scene is now the LIVING TABLE (see the block at the
   foot of this section): a frontal painting of the table with seven
   empty chairs, and one watercolour figure per master layered over it,
   faded in at his fixed chair by the seat picker below. */

body.council-warm {
  background-color: #17100a;
  /* Backdrop is the TABLE-FREE ambience crop (shelves, chandelier, the
     stone fireplace wall) — NOT the full painting. The full painting was
     the backdrop until 2026-11-14, when Marcus saw "the council table
     has two parts and one is only part of the chairs": the painting's
     own diagonal table and chair rows showed in cropped slices around
     and below the parchment sheet, a second partial table beside the
     living table in the hero. One table per page: the living table. */
  background-image:
    linear-gradient(rgba(23, 14, 5, 0.46), rgba(16, 9, 3, 0.66)),
    url("images/conference-room-ambience-bg.jpg");
  background-size: cover, cover;
  background-position: center top, center top;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
  color: #efe7d3; /* safety net: light text if the panel ever fails to paint */
}
body.council-warm header.site {
  background: linear-gradient(to bottom, #2c1c0d, #1c1106);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
body.council-warm main.wrap {
  background: linear-gradient(to bottom, #f8f0dc 0%, #f4ead0 55%, #efe2c2 100%);
  color: var(--ink);
  border-left: 1px solid #8a6d2f;
  border-right: 1px solid #8a6d2f;
  box-shadow: 0 0 0 6px rgba(46, 30, 10, 0.55), 0 24px 70px rgba(0, 0, 0, 0.75);
  margin-top: 30px;
  margin-bottom: 44px;
  padding: 30px 38px 50px;
}
body.council-warm h1 { color: #33240d; }
body.council-warm h2 { border-bottom-color: #b99b52; }
body.council-warm .room-scene {
  border-color: #8a6d2f;
  box-shadow: 0 14px 38px rgba(59, 36, 4, 0.45), 0 0 44px rgba(255, 178, 64, 0.13);
}
body.council-warm .rule {
  background: linear-gradient(to bottom, #f6ead0, #efdfb8);
  border-color: #b99b52;
  border-left-color: #8a6d2f;
  box-shadow: 0 5px 16px rgba(59, 36, 4, 0.16);
}
body.council-warm footer.site { border-top-color: #b99b52; }

/* Buttons: candlelight brass, everywhere on this page */
body.council-warm .btn {
  background: linear-gradient(165deg, #ecd28a 0%, #c9a44e 46%, #a87f30 62%, #dcbc66 100%);
  border-color: #6d5523; color: #3a2a08;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 246, 205, 0.8);
}
body.council-warm .btn:hover:not(:disabled) {
  background: linear-gradient(165deg, #f4dd96, #d4af58 50%, #b98f36);
  border-color: #6d5523;
}

/* The door: the key-entry composer becomes a parchment card on the sheet */
body.council-warm #doorSection .composer {
  background: linear-gradient(to bottom, #f6ead0, #efdfb8);
  border: 1px solid #b99b52;
  box-shadow: 0 5px 16px rgba(59, 36, 4, 0.16);
  margin: 1.1em 0;
}
body.council-warm #keyInput {
  background: linear-gradient(to bottom, #fffdf4, #fbf3dc);
  border: 1px solid #8a6d2f; color: #2b251c;
  box-shadow: inset 0 0 0 1px rgba(185, 155, 82, 0.25);
}
body.council-warm #keyInput:focus { outline: 2px solid #c9a44e; outline-offset: 1px; }

/* The table: #roomSection is the long table itself — dark planked wood,
   every working surface a paper resting on it */
body.council-warm #roomSection {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 2px, rgba(0,0,0,0) 2px 92px),
    linear-gradient(160deg, #3a2410 0%, #2a1809 55%, #1e1106 100%);
  border: 1px solid #8a6d2f; border-top: 3px solid #b99b52;
  padding: 10px; margin: 1.2em 0;
  box-shadow: 0 18px 44px rgba(43, 26, 4, 0.5), 0 0 40px rgba(255, 178, 64, 0.08);
}
body.council-warm .privacy-note {
  background: linear-gradient(to bottom, #eedcae, #e7d29c);
  border: 1px solid #b99b52; color: #453b2d; margin-bottom: 8px;
}
body.council-warm .privacy-note strong { color: #33240d; }

/* The seat picker: a dark leather-bound panel on the table; the seats are
   chairs — dark wood and leather, taken in brass */
body.council-warm .seat-picker {
  background: linear-gradient(160deg, #43301a 0%, #2e1c0b 70%, #241605 100%);
  border: 1px solid #8a6d2f; border-left: 4px solid #b99b52;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.12), 0 6px 18px rgba(0, 0, 0, 0.4);
  color: #efe7d3; margin: 0 0 8px; padding: 14px 16px;
}
body.council-warm .seat-picker .kicker {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #e8c97a; margin: 0 0 4px;
}
body.council-warm .seat-picker .small { color: #d9c69c; }
body.council-warm .seat {
  background: linear-gradient(to bottom, #5d3a1a, #472a12);
  border: 1px solid #b99b52; border-radius: 6px; color: #f7efdb;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.16), 0 2px 6px rgba(0, 0, 0, 0.4);
}
body.council-warm .seat input { accent-color: #c9a44e; }
body.council-warm .seat:has(input:checked) {
  background: linear-gradient(165deg, #ecd28a 0%, #c9a44e 55%, #a87f30 100%);
  border-color: #6d5523; color: #33240d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 246, 205, 0.85);
}
body.council-warm .seat:has(input:focus-visible) { outline: 2px solid #e8c97a; outline-offset: 2px; }

/* The conversation on the table: a letter-paper sheet for the speeches */
body.council-warm .chat-log {
  background: linear-gradient(to bottom, #f8eed6 0%, #f4e7c6 60%, #efe0b6 100%);
  border: 1px solid #b99b52;
  box-shadow: inset 0 2px 14px rgba(90, 62, 14, 0.18);
  margin-bottom: 8px;
}
body.council-warm .msg .who { color: #8a6d2f; }
body.council-warm .msg.visitor {
  background: linear-gradient(to bottom, #ecd9a8, #e3cc8f);
  border-color: #a8853c;
  box-shadow: 0 2px 8px rgba(43, 26, 4, 0.25);
}
body.council-warm .msg.master {
  background: linear-gradient(to bottom, #fdf8ea, #faf0d8);
  border: 1px solid #d9c48c; border-left: 3px solid #b99b52;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(43, 26, 4, 0.18);
}
body.council-warm .sys-note { color: #7a6742; }

/* The composer at the table: writing paper on the wood, brass to send */
body.council-warm #roomSection .composer { border-top: none; padding: 6px 8px 8px; }
body.council-warm #roomSection .composer label.small,
body.council-warm #roomSection .composer .small { color: #d9c69c; }
body.council-warm .composer textarea {
  background: linear-gradient(to bottom, #fffdf4, #fbf3dc);
  border: 1px solid #8a6d2f; color: #2b251c;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(185, 155, 82, 0.25);
}
body.council-warm .composer textarea:focus { outline: 2px solid #e8c97a; outline-offset: 1px; }
body.council-warm .listen { color: #e8dcc0; }
body.council-warm .listen input { accent-color: #c9a44e; }
body.council-warm #roomSection .btn-quiet {
  background: none; border: none; padding: 0; font: inherit;
  color: #e8c97a; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* The council table scene (2026-11-14): the hero is ONE painting — the
   long table seen from the SIDE, seven empty high-back chairs along its
   far side, nobody seated: "the table is set." The live file is the
   SMALL banner crop, conference-room-table-side-sm.jpg (1800x640: the
   1800x1200 painting cropped to y 420-1060 — chair crests and tabletop
   kept, foreground and ceiling cut), and the scene itself is narrowed
   (65% of the sheet on desktop, 80% on phone) after Marcus found the
   full-size scene left too little room for the conversation. History:
   the scene began as a frontal painting with seven chroma-keyed figure
   layers faded in by the seat picker; two rounds of seating fixes
   passed local composites but failed on Marcus's iPhone (figures
   floating, buried, mis-scaled), so the layered figures were retired
   outright — layered cut-outs are not to be rebuilt here. The baked
   single painting WITH all seven masters painted seated in this same
   side view is parked on disk, unreferenced anywhere in this site
   (conference-room-table-full.jpg, full size, and conference-room-
   table-full-sm.jpg, the SAME 420-1060 crop — the pair share geometry
   and both were read-verified: no face clipped); when Marcus says the
   word, the swap is one line: point the .table-scene img at
   conference-room-table-full-sm.jpg. Seats in both paintings follow
   the Council speaking order, left to right: Socrates (grand chair,
   left end), Nietzsche, Lao Tzu, Marcus Aurelius, Jung, Ernest Holmes
   (book in hand), Maya Angelou. */
/* Sticky table (Marcus, 2026-11-14: "leave that table pinned also"): the
   scene is a DIRECT child of main.wrap, so the sticky scene travels the
   full height of the sheet and the caption band sits directly under it.
   It was first built inside a <figure> made display:contents to get the
   same travel (the base .room-scene overflow:hidden would otherwise
   leave it none); rebuilt wrapper-free the same day, after Marcus saw
   the table "in two parts" — a construction with no wrapper box cannot
   split or detach the scene in any engine, and display:contents has a
   long history of exactly that class of painting bug in mobile Safari. */
body.council-warm .table-caption {
  background: #221c14; color: #cdbf9f; font-style: italic; text-align: center;
  padding: 9px 12px; font-size: 0.98rem; margin: 0 0 8px;
}
body.council-warm .table-scene {
  position: sticky; top: 10px; z-index: 6;
  width: 65%; margin: 20px auto 0;
  border: 1px solid rgba(255, 190, 90, 0.25); border-radius: 6px;
  overflow: hidden; background: #17100a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
body.council-warm .table-scene img.table-base { display: block; width: 100%; height: auto; }

/* Registered-pair reveal overlays (2026-11-14): each overlay is a
   tightly cropped WebP holding the full painting's own pixels inside
   one master's feathered mask (feather ~6px), positioned by percentage
   over the registered empty base (conference-room-table-reg-empty.jpg:
   the full painting everywhere except inside the union of the masks,
   where inpainted empty chairs show). Same pixels, native coordinates
   — a seated master cannot drift, float or change scale. Off = opacity
   0; the seat-picker sync script toggles .on. */
body.council-warm .table-scene img.seat-reg {
  position: absolute; opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
body.council-warm .table-scene img.seat-reg.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.council-warm .table-scene img.seat-reg { transition: none; }
}
@media (max-width: 700px) {
  /* iOS Safari janks on fixed backgrounds — let the library scroll with the
     page, and inset the sheet so the dark room frames the phone screen */
  body.council-warm { background-attachment: scroll, scroll; }
  body.council-warm .table-scene { top: 6px; width: 80%; margin-left: auto; margin-right: auto; }
  body.council-warm main.wrap {
    margin: 16px 10px 26px;
    padding: 20px 17px 38px;
    box-shadow: 0 0 0 4px rgba(46, 30, 10, 0.55), 0 14px 40px rgba(0, 0, 0, 0.7);
  }
  body.council-warm #roomSection { padding: 8px; }
}

/* ============ Warm rooms — the full rollout (2026-11-14) ================
   Marcus approved the Nietzsche pilot ("nietzsche's room is much
   better — can you do the same for the rest") and added the sticky
   desk: "once you enter his room, have the desk part stay in place so
   he's always there. Let the rest scroll up."

   Every master now carries body.room-warm (the pilot treatment,
   unchanged) plus one per-master class, m-<slug>, which swaps ONLY the
   backdrop painting for his own inhabited study. Nietzsche needs no
   override — the base body.room-warm backdrop is his. On talk.html,
   selectMaster() sets the m- class and swaps the chat scene to the
   chosen master's painting, so entering any room warms the whole page
   and the conversation with it, exactly as the pilot did for Nietzsche.

   Socrates is the one partial room in this rollout: his new inhabited
   painting could not be generated in this pass (see BUILD-NOTES), so
   his backdrop and scene band use the study painting he already had —
   the warm treatment applies in full, the figure in the painting is
   still to come. */

body.room-warm.m-nietzsche {
  background-image:
    linear-gradient(rgba(23, 14, 5, 0.42), rgba(16, 9, 3, 0.62)),
    url("images/nietzsche-study-facing-bg.jpg");
}
body.room-warm.m-socrates {
  background-image:
    linear-gradient(rgba(23, 14, 5, 0.42), rgba(16, 9, 3, 0.62)),
    url("images/socrates-study-facing-bg.jpg");
}
body.room-warm.m-marcus-aurelius {
  background-image:
    linear-gradient(rgba(23, 14, 5, 0.42), rgba(16, 9, 3, 0.62)),
    url("images/marcus-aurelius-study-facing-bg.jpg");
}
body.room-warm.m-lao-tzu {
  background-image:
    linear-gradient(rgba(23, 14, 5, 0.42), rgba(16, 9, 3, 0.62)),
    url("images/lao-tzu-study-facing-bg.jpg");
}
body.room-warm.m-maya-angelou {
  background-image:
    linear-gradient(rgba(23, 14, 5, 0.42), rgba(16, 9, 3, 0.62)),
    url("images/maya-angelou-study-facing-bg.jpg");
}
body.room-warm.m-jung {
  background-image:
    linear-gradient(rgba(23, 14, 5, 0.42), rgba(16, 9, 3, 0.62)),
    url("images/jung-study-facing-bg.jpg");
}
body.room-warm.m-ernest-holmes {
  background-image:
    linear-gradient(rgba(23, 14, 5, 0.42), rgba(16, 9, 3, 0.62)),
    url("images/ernest-holmes-study-facing-bg.jpg");
}

/* The sticky desk: the scene band — the master at his desk — stays in
   place at the head of the conversation while the doorway, the log and
   the composer scroll up beneath it. Scoped to the warm rooms; the
   band's parent is the chat shell, so it rides the shell's whole
   height and settles when the conversation ends. */
body.room-warm .chat-scene {
  position: sticky;
  top: 10px;
  z-index: 6;
}

@media (max-width: 700px) {
  /* Keep the desk present but not greedy on a phone screen */
  body.room-warm .chat-scene { top: 6px; }
  body.room-warm .chat-scene img { height: 118px; }
}