:root { --bg:#FFFFFF; --ink:#121212; --muted:#5A5650; --heading:#7B2CBF; --subhead:#1673B5; --link:#2563C9;
          --strand:119,114,106; --tint:60,16,100; --card:#FFFFFF; --glass:rgba(255,255,255,.86); --cardLine:rgba(58,56,52,.16); --hair:rgba(58,56,52,.14);
          --grad:linear-gradient(90deg, #7B2CBF, #2563C9); --lift:0 1px 2px rgba(20,10,40,.05), 0 14px 34px -16px rgba(40,16,80,.28);
          --surface:#F7F5F1; --line:#3A3834; --door:#F2EFE9; --panel:#E8E3DA; --plaque:#FFFFFF;
          --knob:#C9C2B5; --bush:#F3F1EC; --bushLine:#9A948A; --lampGlass:#D3CEC4; --inTop:#FFFFFF; --inBottom:#EFEAE1;
          --step:#ECE8E1; --shadow:.10; --night:0; --day:1; color-scheme: light;
          --ts-body:none; --ts-head:0 1px 0 rgba(255,255,255,.8), 0 2px 10px rgba(40,10,70,.16); --ts-sub:0 1px 0 rgba(255,255,255,.7); --ts-map:0 1px 2px rgba(0,0,0,.35); --sheet:#fbfaf7; --mast:rgb(255 255 255 / .82);
          --wallc:#F2ECE2; --rail:#D8CDBB; --skirt:#E2D7C6; --fur:#FBF7F0; --furShade:#EDE4D6; --wallpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%237B2CBF' stroke-opacity='.08'%3E%3Ccircle cx='32' cy='32' r='16'/%3E%3Ccircle cx='0' cy='0' r='16'/%3E%3Ccircle cx='64' cy='0' r='16'/%3E%3Ccircle cx='0' cy='64' r='16'/%3E%3Ccircle cx='64' cy='64' r='16'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#000000; --ink:#FFFFFF; --muted:#BDB7AC; --heading:#BE5CFF; --subhead:#7CC4F5; --link:#538CE9;
          --strand:189,183,172; --tint:205,150,255; --card:#121214; --glass:rgba(15,14,19,.8); --cardLine:rgba(189,183,172,.2); --hair:rgba(189,183,172,.18);
          --grad:linear-gradient(90deg, #BE5CFF, #538CE9); --lift:0 0 0 1px rgba(190,92,255,.07), 0 18px 40px -18px rgba(0,0,0,.95);
          --surface:#222120; --line:#BDB7AC; --door:#262522; --panel:#1F1E1C; --plaque:#000000;
          --knob:#8E887D; --bush:#2C2B27; --bushLine:#6B665E; --lampGlass:#FFF3D6; --inTop:#221D14; --inBottom:#FFF0D0;
          --step:#262522; --shadow:.55; --night:1; --day:0; color-scheme: dark;
          --ts-body:none; --ts-head:0 0 16px rgba(190,92,255,.36); --ts-sub:0 0 12px rgba(124,196,245,.22); --ts-map:0 0 6px rgba(190,92,255,.65); --sheet:#0b0a10; --mast:rgb(0 0 0 / .78);
          --wallc:#120E17; --rail:#2B2333; --skirt:#1B1521; --fur:#1D1824; --furShade:#16121C; --wallpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23BE5CFF' stroke-opacity='.10'%3E%3Ccircle cx='32' cy='32' r='16'/%3E%3Ccircle cx='0' cy='0' r='16'/%3E%3Ccircle cx='64' cy='0' r='16'/%3E%3Ccircle cx='0' cy='64' r='16'/%3E%3Ccircle cx='64' cy='64' r='16'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3C/g%3E%3C/svg%3E"); } }
  :root[data-theme="dark"] { --bg:#000000; --ink:#FFFFFF; --muted:#BDB7AC; --heading:#BE5CFF; --subhead:#7CC4F5; --link:#538CE9;
          --strand:189,183,172; --tint:205,150,255; --card:#121214; --glass:rgba(15,14,19,.8); --cardLine:rgba(189,183,172,.2); --hair:rgba(189,183,172,.18);
          --grad:linear-gradient(90deg, #BE5CFF, #538CE9); --lift:0 0 0 1px rgba(190,92,255,.07), 0 18px 40px -18px rgba(0,0,0,.95);
          --surface:#222120; --line:#BDB7AC; --door:#262522; --panel:#1F1E1C; --plaque:#000000;
          --knob:#8E887D; --bush:#2C2B27; --bushLine:#6B665E; --lampGlass:#FFF3D6; --inTop:#221D14; --inBottom:#FFF0D0;
          --step:#262522; --shadow:.55; --night:1; --day:0; color-scheme: dark;
          --ts-body:none; --ts-head:0 0 16px rgba(190,92,255,.36); --ts-sub:0 0 12px rgba(124,196,245,.22); --ts-map:0 0 6px rgba(190,92,255,.65); --sheet:#0b0a10; --mast:rgb(0 0 0 / .78);
          --wallc:#120E17; --rail:#2B2333; --skirt:#1B1521; --fur:#1D1824; --furShade:#16121C; --wallpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23BE5CFF' stroke-opacity='.10'%3E%3Ccircle cx='32' cy='32' r='16'/%3E%3Ccircle cx='0' cy='0' r='16'/%3E%3Ccircle cx='64' cy='0' r='16'/%3E%3Ccircle cx='0' cy='64' r='16'/%3E%3Ccircle cx='64' cy='64' r='16'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body { background: var(--bg); color: var(--ink); font: 18px/1.6 Georgia, "Times New Roman", serif; overflow-x: hidden; }
  #bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .page, .view, .site-foot, .topbar { position: relative; z-index: 1; }
  .view[hidden] { display: none; }
  a { color: var(--link); text-underline-offset: 2px; }
  h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; color: var(--heading); line-height: 1.15; margin: 0; }
  h3 { font-family: Georgia, serif; font-style: italic; font-weight: 400; color: var(--subhead); }
  .subhead { color: var(--subhead); font-style: italic; margin: .25em 0 0; }
  :focus-visible { outline: 2px solid var(--heading); outline-offset: 3px; }
  /* every word has depth (1 Oct: "All text should have a 3d effect. A shadow when it's light, and opposite glow when it's dark") */
  body { text-shadow: var(--ts-body); }
  h1, h2, .t, .n, .feature .t, .books .t { text-shadow: var(--ts-head); }
  h3, .subhead, .s, .article-deck, .section-subtitle { text-shadow: var(--ts-sub); }
  svg.fp text { text-shadow: var(--ts-map); }
  .btn, input, textarea, button, figcaption.plaque, .lightbox figcaption { text-shadow: none; }
  .skip { position: absolute; left: -9999px; top: 8px; z-index: 9; background: var(--bg); color: var(--link); padding: 8px 12px; }
  .skip:focus { left: 16px; }

  /* the light switch: a sun, a moon, or half of each for "follow the sun" */
  .theme { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 5; width: 42px; height: 42px; border-radius: 50%;
           border: 1px solid rgba(var(--strand), .55); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
  .theme svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .theme .i { display: none; } .theme[data-mode="light"] .i-sun, .theme[data-mode="dark"] .i-moon, .theme[data-mode="auto"] .i-auto { display: block; }
  .outside { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 16px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
             border: 1px solid rgba(var(--strand), .55); color: var(--ink); background: transparent; }
  .outside svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .mark { display: block; margin: 0 auto 8px; width: 64px; height: 25px; fill: none; stroke: rgb(var(--strand)); stroke-width: 2.2; stroke-linecap: round; }

  /* the drawn pictures */
  .emblem { display: block; width: 120px; height: 120px; margin: 0 auto 10px; overflow: visible; }
  .emblem *, .emblem-sm * { fill: none; stroke: rgb(var(--strand)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .emblem .em-a, .emblem-sm .em-a { stroke: var(--heading); }
  .emblem .em-fill, .emblem-sm .em-fill { fill: var(--heading); fill-opacity: .22; }
  .emblem .em-s, .emblem-sm .em-s { fill: var(--heading); stroke: none; opacity: calc(.45 + var(--night) * .5); }
  .emblem-sm { width: 30px; height: 30px; flex: none; overflow: visible; }
  @media (prefers-reduced-motion: no-preference) {
    .emblem .em-s { animation: twinkle 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
    .emblem .em-s:nth-of-type(2n) { animation-delay: -2s; }
  }
  @keyframes twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(.6); } }

  /* the bar along the top of every page inside the house */
  .topbar { display: flex; justify-content: center; padding: calc(18px + env(safe-area-inset-top, 0px)) 72px 0; }
  .topbar a.home { font: 600 19px Fraunces, Georgia, serif; color: var(--heading); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
  .topbar a.home svg { width: 34px; height: 14px; fill: none; stroke: rgb(var(--strand)); stroke-width: 2.4; stroke-linecap: round; }

  /* a room */
  .room { max-width: 820px; margin: 0 auto; padding: 36px 16px 48px; }
  .room-head { text-align: center; margin-bottom: 28px; }
  .room-head h1 { font-size: clamp(34px, 5.4vw, 52px); }
  .room-head .subhead { font-size: 21px; }
  .room-head .words { max-width: 620px; margin: 14px auto 0; }
  .empty { color: var(--muted); text-align: center; }
  .minimap { display: block; width: min(100%, 300px); margin: 0 auto; }
  .minimap svg { display: block; width: 100%; height: auto; }
  .where { margin: 56px auto 0; text-align: center; }
  /* the house map always fits the page: on every room it is the whole map, sized to the column (1 Oct: "The map just
     got WAY too large and there was no way for me to scroll to the right") */
  .house svg.fp { display: block; width: 100%; height: auto; max-height: 92vh; }
  .where .house { max-width: 760px; margin: 0 auto; }
  /* On a computer the whole map is twice the size it was (twice 92vh, never wider than the window, never stretched), so
     every room's name reads at rest the size it used to grow to when pointed at. 3 Oct: "the floorplan is too small to
     hold them at a level [that] is more readable. The size the text enlarges to when you hover over it is the size it
     should be before it enlarges. And the house should be enlarged to that same ratio." */
  @media (min-width: 900px) {
    .house { --mapw: min(calc(100vw - 48px), 148.4vh); }
    .view.entry .house, aside.where .house { width: var(--mapw); max-width: none; margin: 0 0 0 calc((100% - var(--mapw)) / 2); }
    .house svg.fp { max-height: none; }
  }
  svg.fp a.gs-here { display: none; }
  svg.fp .gs-x-here { opacity: 1 !important; transition-delay: 0s !important; }
  svg.fp .gs-here-label text { font: 600 12px Fraunces, Georgia, serif; letter-spacing: 1.5px; fill: var(--fp-name, #BE5CFF); paint-order: stroke;
                               stroke: var(--fp-floor, #262522); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
  .where p { color: var(--muted); font-size: 15px; margin: 8px 0 0; }

  /* lists of pieces */
  .pieces { list-style: none; padding: 0; margin: 0; }
  .pieces li { border-top: 1px solid var(--cardLine); transition: border-color 1.5s; }
  .pieces li:last-child { border-bottom: 1px solid var(--cardLine); }
  .pieces a { display: block; padding: 18px 4px; text-decoration: none; color: var(--ink); }
  .pieces .meta { display: block; color: var(--muted); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
  .pieces .t { display: block; font: 600 23px/1.25 Fraunces, Georgia, serif; color: var(--heading); margin: 4px 0; }
  .pieces .d { display: block; color: var(--ink); font-size: 17px; opacity: .88; }
  .pieces a:hover .t, .pieces a:focus-visible .t { text-decoration: underline; text-underline-offset: 3px; }
  .feature { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--cardLine); border-radius: 14px; overflow: hidden; margin: 0 0 18px; }
  .feature img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .feature .in { padding: 16px 20px 20px; }
  .feature .room-label { display: flex; align-items: center; gap: 10px; color: var(--subhead); font-style: italic; }
  .feature .t { display: block; font: 600 26px/1.2 Fraunces, Georgia, serif; color: var(--heading); margin: 6px 0; }
  .feature .d { display: block; }
  .more { text-align: right; margin: 6px 0 30px; }
  .books { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
  .books li { background: var(--card); border: 1px solid var(--cardLine); border-radius: 12px; padding: 16px 18px; }
  .books .t { font: 600 21px/1.25 Fraunces, Georgia, serif; color: var(--heading); display: block; }
  .books p { margin: 6px 0 8px; }
  .note { background: var(--card); border: 1px solid var(--cardLine); border-left: 3px solid var(--heading); border-radius: 10px; padding: 12px 16px; margin: 0 0 22px; font-size: 16px; }
  /* the Office's research receipts (1 Oct: "Each Receipt is a pass of research") */
  .receipts { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 18px; }
  .receipt { position: relative; background: var(--card); border: 1px solid var(--cardLine); border-radius: 3px; padding: 20px 22px 18px;
             box-shadow: 0 8px 18px rgba(0,0,0,.18); }
  .receipt::before, .receipt::after { content: ""; position: absolute; left: 12px; right: 12px; border-top: 2px dashed var(--cardLine); }
  .receipt::before { top: 7px; } .receipt::after { bottom: 7px; }
  .receipt .r-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin: 2px 0 8px;
                    font: 13px/1.4 "Courier New", Courier, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .receipt .r-title { font: 600 22px/1.25 Fraunces, Georgia, serif; color: var(--heading); margin: 0 0 8px; }
  .receipt .r-sum { margin: 0 0 10px; }
  .receipt .r-line { margin: 5px 0; font-size: 16px; }
  .receipt .r-line .k, .wip .r-line .k { display: inline-block; min-width: 100px; font: 12px/1.4 "Courier New", Courier, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .receipt .r-line, .wip .r-line { display: flex; gap: 6px; align-items: baseline; }
  .receipt .r-line .k, .wip .r-line .k { flex: none; }
  .receipt .r-line .v, .wip .r-line .v { flex: 1; min-width: 0; }
  .receipt details summary { cursor: pointer; color: var(--link); }
  .receipt .r-sources { margin: 6px 0 0; padding-left: 22px; font-size: 15px; max-height: 340px; overflow: auto; }
  .receipt .r-sources li { margin: 3px 0; overflow-wrap: anywhere; }
  .wips { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 16px; }
  .wip { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--cardLine); border-radius: 12px; padding: 16px 18px; }
  .wip .wip-cover { width: 110px; height: auto; border-radius: 3px; box-shadow: 0 6px 14px rgba(0,0,0,.3); flex: none; }
  /* a book with no cover yet: the Office's drawn emblem in the cover's place */
  .wip .wip-cover.drawn { display: grid; place-items: center; aspect-ratio: 2 / 3; background: var(--bg); border: 1px solid var(--cardLine); box-shadow: none; }
  .wip .wip-cover.drawn .emblem { width: 70%; height: auto; margin: 0; }
  .wip .t { font: 600 22px/1.25 Fraunces, Georgia, serif; color: var(--heading); display: block; }
  .wip .wip-line { margin: 4px 0 8px; font-style: italic; color: var(--subhead); }
  .wip .r-line { margin: 3px 0; font-size: 16px; }
  /* on a phone the label sits on its own line above its value, so long values never wrap back under the label */
  @media (max-width: 520px) { .wip { flex-direction: column; } .wip .wip-cover { width: 140px; }
    .receipt .r-line, .wip .r-line { display: block; margin: 8px 0; } .receipt .r-line .k, .wip .r-line .k { display: block; min-width: 0; } }
  .receipt .r-state { margin: 10px 0 0; font: 12px/1.4 "Courier New", Courier, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--subhead); text-align: right; }
  /* mini pages: a list past ten shows ten at a time, with numbered buttons under it (1 Oct) */
  .mini-paged { scroll-margin-top: 90px; }
  .mini-paged:focus { outline: none; }
  .mini-paged > [hidden] { display: none !important; }
  .mini-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 30px; }
  .mini-pages button { font: 17px/1 Georgia, serif; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; cursor: pointer;
                       color: var(--ink); background: var(--card); border: 1px solid rgba(var(--strand), .55); transition: border-color .2s; }
  .mini-pages button:hover { border-color: var(--heading); }
  .mini-pages button[aria-current] { background: var(--heading); border-color: var(--heading); color: var(--bg); }
  .mini-pages button:focus-visible { outline: 2px solid var(--heading); outline-offset: 3px; }

  .shelf-h { font-size: 26px; margin: 34px 0 12px; }

  /* ---- the walls: his pictures, framed and hung, in every room (1 Oct: "more at home. Maybe a wall of different
     pictures carefully framed on a wall"; "random images arranged with frames all around the house"). They hang on the
     page itself, white by day and black by night (4 Oct: "the color scheme to be purple, blue, and grey, with the white or
     black background changing"). ---- */
  .wall { position: relative; margin: 10px calc(50% - 50vw) 34px; padding: 18px 16px 0; overflow-x: clip; }
  .wall .frames { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 46px 34px; }
  figure.frame { position: relative; margin: 0; padding: var(--bw, 10px); background: var(--fbg, #151515);
           box-shadow: 0 16px 30px -8px rgba(20,10,40,.34), 0 3px 7px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 0 3px rgba(0,0,0,.25);
           transition: transform .25s ease, box-shadow .25s ease; }
  figure.frame:hover { transform: translateY(-4px); box-shadow: 0 24px 38px -8px rgba(20,10,40,.42), 0 4px 9px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 3px rgba(0,0,0,.25); }
  figure.frame a { display: block; padding: var(--mat, 0); background: var(--matc, transparent); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); }
  figure.frame img { display: block; height: var(--h, 200px); width: auto; max-width: min(78vw, 560px); object-fit: cover; }
  figure.frame.s { --h: clamp(92px, 22vw, 150px); } figure.frame.m { --h: clamp(120px, 30vw, 205px); } figure.frame.l { --h: clamp(150px, 40vw, 270px); }
  /* the frames keep to the house's colours: black, graphite, silver, deep violet, white */
  .f-black { --fbg: linear-gradient(145deg, #2a2a2e, #0b0b0d); --bw: 9px; --mat: 14px; --matc: #f6f6f8; }
  .f-graphite { --fbg: linear-gradient(135deg, #55555b, #2b2b30 45%, #46464c 70%, #1f1f23); --bw: 12px; --mat: 12px; --matc: #f6f6f8; }
  .f-silver { --fbg: linear-gradient(135deg, #eceef0, #9fa5ac 30%, #f7f8f9 55%, #8e949b 80%, #d3d7db); --bw: 13px; --mat: 10px; --matc: #f6f6f8; }
  .f-white { --fbg: linear-gradient(145deg, #ffffff, #dfe0e4); --bw: 9px; }
  .f-violet { --fbg: linear-gradient(150deg, #5a3486, #2a1444 55%, #47276c); --bw: 11px; --mat: 16px; --matc: #f6f6f8; }
  :root[data-theme="dark"] figure.frame { box-shadow: 0 0 0 1px rgba(189,183,172,.16), 0 18px 34px -10px rgba(0,0,0,.9); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) figure.frame { box-shadow: 0 0 0 1px rgba(189,183,172,.16), 0 18px 34px -10px rgba(0,0,0,.9); } }
  /* a picture light over every frame, lit at night: a soft violet-white, the colour of every light in the house */
  figure.frame::before { content: ""; position: absolute; left: 50%; top: -14px; width: 46%; height: 5px; transform: translateX(-50%); border-radius: 3px;
                   background: linear-gradient(#eceff2, #8d939a); opacity: var(--night); transition: opacity 1.5s; }
  figure.frame::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 70%; pointer-events: none;
                  background: radial-gradient(ellipse at 50% 0%, rgba(226,210,255,.30), rgba(226,210,255,0) 70%); opacity: var(--night); transition: opacity 1.5s; }
  /* a picture's name, set small under its frame (figcaption only: other things are called .plaque too) */
  figcaption.plaque { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap; font: 600 10.5px/1 var(--ui); letter-spacing: .16em;
            text-transform: uppercase; color: var(--muted); text-shadow: none; }
  /* ---- a room's furniture (3 Oct: "make the whole room, furniture, and even the front door styles much more realistic
     ... 'lifelike' drawing"), drawn in the house's three colours and standing on a strip of floor that fades out toward
     the visitor. Three layers share one frame: the floor and the things on the wall, the furniture, and the light of the
     lamps, which only shows at night. ---- */
  .wall.furnished { padding-bottom: 0; }
  .wall .furniture { position: relative; max-width: 1100px; margin: 46px auto 0; aspect-ratio: 1200 / 310; }
  .wall .furniture svg { position: absolute; top: 0; left: -100%; width: 300%; height: 100%; overflow: visible; pointer-events: none; }
  .wall .fu-back { -webkit-mask-image: linear-gradient(#000 86%, transparent 100%); mask-image: linear-gradient(#000 86%, transparent 100%); }
  .wall .fu-front { filter: drop-shadow(4px 4px 4px rgba(30,20,50,.2)); }
  .wall .fu-glow { opacity: var(--night); mix-blend-mode: screen; transition: opacity 1.5s; clip-path: inset(-1200px -3000px 0 -3000px); }
  .wall .furniture .day-only { opacity: var(--day); transition: opacity 1.5s; }
  .wall .furniture .night-only { opacity: var(--night); transition: opacity 1.5s; }
  :root[data-theme="dark"] .wall .fu-front { filter: brightness(.6) saturate(.9) drop-shadow(4px 4px 5px rgba(0,0,0,.6)); }
  :root[data-theme="dark"] .wall .fu-back { filter: brightness(.42) saturate(.9); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wall .fu-front { filter: brightness(.6) saturate(.9) drop-shadow(4px 4px 5px rgba(0,0,0,.6)); }
    :root:not([data-theme="light"]) .wall .fu-back { filter: brightness(.42) saturate(.9); } }
  @media (prefers-reduced-motion: no-preference) { .wall .furniture .steam { animation: steam 4.5s ease-in-out infinite; } .wall .furniture .flame { animation: flicker 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; } }
  @keyframes steam { 0%, 100% { opacity: .2; transform: translateY(2px); } 50% { opacity: .85; transform: translateY(-3px); } }
  @keyframes flicker { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.96, 1.06); } 60% { transform: scale(1.03, .95); } }
  /* a phone sees half the room at twice the size, edge to edge, from the spot each room chose (--from) */
  @media (max-width: 640px) { .wall .furniture { max-width: none; margin: 50px -16px 0; aspect-ratio: 600 / 310; }
                              .wall .furniture svg { width: 600%; left: calc(-200% + var(--from, 0%)); } }
  /* on a phone a long name wraps under its own frame instead of running off the edge of the screen */
  @media (max-width: 640px) { figcaption.plaque { bottom: auto; top: calc(100% + 10px); white-space: normal; width: max-content; max-width: 100%; min-width: min-content; line-height: 1.3; text-align: center; }
                              .wall .frames { row-gap: 54px; } }
  /* a room opens with its name: a small drawn emblem, the name, what the room holds, and the strand's own mark */
  .room-head { position: relative; text-align: center; margin: 14px auto 26px; }
  .room-head .emblem { width: 78px; height: 78px; margin: 0 auto 6px; }
  .room-head h1 { font-size: clamp(38px, 6.4vw, 62px); letter-spacing: -.01em; text-wrap: balance; }
  .room-head .subhead { font-size: clamp(18px, 2.4vw, 21px); margin-top: 4px; }
  .room-head .mark { margin: 16px auto 0; width: 54px; height: 21px; opacity: .8; }
  main.room:has(> .room-head:first-child) { padding-top: 26px; }
  .wall-note { text-align: center; color: var(--muted); font-size: 14px; margin: 26px 0 0; }
  @media (prefers-reduced-motion: reduce) { figure.frame, figure.frame:hover { transform: none; } }

  /* the big view of a framed picture */
  .lightbox { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(4,3,8,.92); padding: 16px; }
  .lightbox[hidden] { display: none; }
  .lightbox figure { margin: 0; text-align: center; }
  .lightbox img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
  .lightbox figcaption { color: #e8e2d6; font: 15px Georgia, serif; margin-top: 12px; letter-spacing: .06em; }
  .lightbox button { position: fixed; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
                     width: 46px; height: 46px; font-size: 22px; cursor: pointer; }
  .lightbox .lb-close { top: 16px; right: 16px; } .lightbox .lb-prev { left: 16px; top: 50%; } .lightbox .lb-next { right: 16px; top: 50%; }

  /* a picture with every piece in the lists */
  .pieces a.with-pic { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
  .pieces .pic { display: block; padding: 6px; background: linear-gradient(145deg, #2a2a2a, #0b0b0b); box-shadow: 0 6px 14px rgba(0,0,0,.35); }
  .pieces .pic img { display: block; width: 100%; height: 84px; object-fit: cover; }
  /* no picture was ever made for this piece: its room's drawn emblem stands in the frame */
  .pieces .pic.drawn { display: grid; place-items: center; height: 96px; background: var(--card); border: 1px solid var(--cardLine); box-shadow: none; }
  .pieces .pic.drawn .emblem { width: 64px; height: 64px; margin: 0; }
  @media (max-width: 480px) { .pieces a.with-pic { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } .pieces .pic img { height: 64px; }
    .pieces .pic.drawn { height: 76px; } .pieces .pic.drawn .emblem { width: 50px; height: 50px; } }
  /* shelves with a picture: book covers, software shots */
  .books.covers li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: start; }
  .books.covers li > span:only-child { grid-column: 1 / -1; }
  .books .cover img { display: block; width: 110px; height: auto; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
  .books .cover.shot img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
  @media (max-width: 480px) { .books.covers li { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; } .books .cover img { width: 84px; } }
  /* the deck */
  .card-back { margin: 0 auto 6px; text-align: center; }
  .card-back img { width: 120px; height: auto; border-radius: 8px; }
  .deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .deck .card img { display: block; width: 100%; height: auto; border-radius: 6px; transition: transform .2s ease; }
  .deck .card:hover img, .deck .card:focus-visible img { transform: translateY(-4px); }
  /* the kitchen walls */
  .walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
  .walls img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
  /* his portraits */
  .portrait { margin: 0 auto 18px; text-align: center; }
  .portrait img { width: 220px; height: auto; border-radius: 12px; }
  .greeting .host { display: block; width: 180px; height: 180px; object-fit: cover; border-radius: 50%; margin: 0 auto 14px; border: 2px solid rgba(var(--strand), .6); }
  /* the Library: the reading list, its six collections and its cards */
  .library .article-body p { font-size: 18px; }
  .library .container, .library .container-narrow { max-width: none; padding: 0; }
  .library .section-heading { margin: 34px 0 14px; }
  .library .section-eyebrow, .library .essay-meta-cat, .library .collection-num { display: block; color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
  .library h2 { font-size: 28px; margin: 4px 0 10px; }
  .library h2 em, .library h1 em { font-style: italic; }
  .library .collections-index, .library .pillars { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 14px 0 22px; }
  .library .collection-tile, .library .pillar { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--cardLine); border-radius: 12px; padding: 14px 16px; }
  .library .collection-tile h3, .library .pillar h3 { font: 600 19px/1.25 Fraunces, Georgia, serif; color: var(--heading); margin: 6px 0; }
  .library .collection-tile p, .library .pillar p { font-size: 16px; margin: 0 0 8px; }
  .library .pillar-link { color: var(--link); font-size: 15px; }
  .library .collection-tile:hover h3, .library .pillar:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
  .library hr { border: 0; border-top: 1px solid var(--cardLine); margin: 30px 0; }

  /* a piece */
  /* break-word: a printed source address (the Sources lists spell them out) breaks rather than pushing a phone's page
     sideways; Stew 14's ran 269px past the screen (found 3 Oct) */
  .piece { max-width: 720px; margin: 0 auto; padding: 28px 16px 24px; overflow-wrap: break-word; }
  .piece .article-hero { text-align: center; margin-bottom: 26px; }
  .piece .eyebrow, .piece .essay-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; color: var(--muted); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px; }
  .piece .article-hero h1 { font-size: clamp(32px, 5.6vw, 50px); text-align: center !important; text-wrap: balance; }
  .piece .article-deck { color: var(--subhead); font-style: italic; font-size: 20px; margin: 12px auto 0; max-width: 620px; }
  .piece .credit { color: var(--muted); font-size: 15px; margin: 14px 0 0; }
  .piece .note { margin-top: 18px; text-align: left; }
  .piece h2 { font-size: 30px; margin: 1.6em 0 .4em; }
  .piece h3 { font-size: 21px; margin: 1.4em 0 .3em; }
  /* a heading the builder brought up a level, so the page's outline has no gap, keeps the look it was published with */
  .piece h2.as-h3 { font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: 21px; line-height: inherit; color: var(--subhead); text-shadow: var(--ts-sub); margin: 1.4em 0 .3em; }
  .piece p, .piece li { font-size: 19px; line-height: 1.7; }
  .piece img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
  .piece figure { margin: 28px 0; }
  .piece figcaption { color: var(--muted); font-size: 15px; text-align: center; margin-top: 8px; }
  .piece blockquote { margin: 1.5em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--heading); font-style: italic; font-size: 20px; transition: border-color 1.5s; }
  .piece hr { border: 0; border-top: 1px solid var(--cardLine); margin: 2.4em 0; }
  .piece .soup-section { margin: 2.4em 0; padding-top: 1.6em; border-top: 1px solid var(--cardLine); }
  .piece .soup-section-label { display: block; color: var(--muted); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
  .piece .section-title { margin-top: .3em; }
  .piece .section-subtitle { color: var(--subhead); font-style: italic; margin-top: 0; }
  .piece .section-byline { color: var(--muted); font-style: italic; font-size: 16px; }
  .piece .article-punch { font: 600 24px/1.35 Fraunces, Georgia, serif; color: var(--heading); text-align: center; margin: 1.6em 0; }
  .piece .btn-link, .piece .shelf-cta a, .piece .tip-kitchen-cta { font-weight: 700; }
  .piece .ep-listen { margin: 0 0 28px; }
  .piece .gz-player { display: flex; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--cardLine); border-radius: 14px; padding: 14px; }
  .piece .gz-player__art { width: 96px; height: 96px; border-radius: 8px; margin: 0; flex: none; }
  .piece .gz-player__body { flex: 1; min-width: 0; }
  .piece .gz-player__label { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
  .piece .gz-player audio { width: 100%; }
  .piece .gz-player__note { margin: 6px 0 0; font-size: 15px; }
  .piece .ep-chapters { list-style: none; padding: 0; }
  .piece .ep-chapter { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--cardLine); font-size: 17px; }
  .piece .ep-chapter__time { font: inherit; color: var(--link); background: none; border: 0; padding: 0; min-width: 3.4em; text-align: left; cursor: pointer; }
  .piece .ep-chapters__hint { color: var(--muted); font-size: 15px; }
  .piece .held { color: var(--muted); font-style: italic; text-align: center; border: 1px dashed var(--cardLine); border-radius: 10px; padding: 14px; }
  @media (max-width: 560px) { .piece .gz-player { flex-direction: column; align-items: stretch; } .piece .gz-player__art { margin: 0 auto; } }

  /* the foot of every page */
  .site-foot { max-width: 720px; margin: 40px auto 0; padding: 28px 16px 48px; text-align: center; border-top: 1px solid var(--cardLine); transition: border-color 1.5s; }
  .site-foot p { margin: 10px 0; }
  .site-foot .small { color: var(--muted); font-size: 15px; }
  .btn { display: inline-block; font: 16px/1 Georgia, serif; color: var(--bg); background: var(--heading); text-decoration: none;
         padding: 11px 16px; border-radius: 9px; }
  .btn.quiet { background: transparent; color: var(--link); border: 1px solid rgba(var(--strand), .55); }
  .site-foot .btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

  /* "The user needs to draw the line. My line doesn't need to be on the you are here x's." His drawn strand is off
     the maps; the X marks and YOU ARE HERE stay. The visitor's line takes the strand's rules: grey, fairly thick. */
  svg.fp .fp-strand, svg.fp-mini .fp-strand { display: none !important; }
  .gs-trail path { fill: none; stroke: rgb(var(--strand)); stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s ease; }
  /* Where they have already been is a faint trace; the stretch they are choosing now is the strong line. While they
     point at a room the trace all but disappears, so the new line is the only thing to look at. His words, 1 Oct:
     "it's filled up with other lines ... it's not good to show now that I want to interact with it." */
  svg.fp .gs-walked { stroke-width: 3; opacity: .32; }
  svg.fp.gs-pointing .gs-walked { opacity: .08; }
  svg.fp .gs-next { stroke-width: 4.5; }
  svg.fp .gs-next { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  svg.fp .gs-next.on { animation: gs-draw .7s ease-out forwards; }
  @keyframes gs-draw { to { stroke-dashoffset: 0; } }
  svg.fp .fp-x:not(.fp-x-start) { transition-delay: .65s !important; }
  svg.fp-mini .gs-walked { stroke-width: 9; }
  svg.fp-mini .gs-next { display: none; }

  /* ---- the polish (3 Oct: "Make it look like a professional and pristine website") ----------------------------------
     One small sans for the house's own labels (buttons, the masthead, dates), Georgia for reading, Fraunces for names. */
  :root { --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
  .pieces .meta, .btn, .mini-pages button, .copy, .feature .room-label, .receipt .r-top { font-family: var(--ui); }
  .pieces .meta { font-size: 12.5px; letter-spacing: .08em; }
  .btn { font-size: 15px; font-weight: 600; letter-spacing: .01em; padding: 12px 18px; border-radius: 999px; }
  /* the masthead: the house's name, the map, everything, search; it stays at the top as you read */
  .masthead { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; min-height: 58px;
              padding: env(safe-area-inset-top, 0px) 18px 0 18px; background: var(--mast); backdrop-filter: saturate(1.4) blur(10px);
              -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(var(--strand), .22); }
  .masthead .brand { display: inline-flex; align-items: center; gap: 9px; font: 600 19px Fraunces, Georgia, serif; color: var(--heading); text-decoration: none; text-shadow: none; margin-right: auto; }
  .masthead .brand svg { width: 30px; height: 12px; fill: none; stroke: rgb(var(--strand)); stroke-width: 2.4; stroke-linecap: round; }
  .mast-nav { display: flex; gap: 4px; }
  .mast-btn { display: inline-flex; align-items: center; gap: 7px; font: 500 14.5px var(--ui); color: var(--ink); background: none; border: 0; border-radius: 999px;
              padding: 9px 13px; cursor: pointer; text-decoration: none; text-shadow: none; transition: background-color .2s; }
  .mast-btn:hover, .mast-btn:focus-visible { background: rgba(var(--strand), .14); }
  .mast-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .masthead .theme { position: static; width: auto; height: 40px; padding: 0 14px 0 11px; gap: 7px; display: inline-flex; align-items: center; margin-left: 4px;
                     font: 500 14.5px var(--ui); border-color: rgba(var(--strand), .45); }
  .masthead .theme .tw { display: inline; }
  .masthead .theme svg { width: 19px; height: 19px; }
  .theme .tw { display: none; }
  /* the sunset button: a round button beside the light switch, the same size; it says which way the sun is going */
  .dusk { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 66px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; padding: 0;
          border: 1px solid rgba(var(--strand), .55); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
  .dusk svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .dusk .rise, .dusk[data-dir="rise"] .set { display: none; } .dusk[data-dir="rise"] .rise { display: inline; }
  .dusk.playing { background: rgba(var(--strand), .16); }
  .masthead .dusk { position: static; width: 40px; height: 40px; margin-left: 4px; border-color: rgba(var(--strand), .45); }
  .masthead .dusk svg { width: 20px; height: 20px; }
  body:has(#v-door[hidden]) > .dusk.floating { display: none; }
  body[data-kind="swamp"] .dusk.floating { left: 66px; right: auto; }
  /* the furniture dims with the light; at the moment the house turns over to night it eases rather than jumps */
  .wall .fu-front, .wall .fu-back { transition: filter 1.2s ease; }
  /* the front door shows its own corner switch; the Entry inside uses the masthead's */
  body:has(#v-door[hidden]) > .theme.floating { display: none; }
  body[data-kind="swamp"] .theme.floating { left: 16px; right: auto; }
  /* the front door is a whole scene of its own: no masthead over it; the Entry inside starts just under the masthead */
  body:has(#v-door:not([hidden])) .masthead { display: none; }
  body:has(.masthead) .entry { padding-top: 34px; }
  @media (max-width: 620px) { .mast-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .mast-btn { padding: 10px; } .masthead { padding-right: 10px; gap: 4px; } .masthead .brand { font-size: 17px; }
    .masthead .theme { width: 40px; padding: 0; justify-content: center; margin-left: 0; } .masthead .theme .tw { display: none; } .masthead .dusk { margin-left: 0; } }
  /* on the narrowest phones the house's name keeps to one line beside the sunset button: the little wave steps aside */
  @media (max-width: 420px) { .masthead .brand svg { display: none; } .mast-btn { padding: 9px 8px; } .masthead { gap: 2px; padding-left: 14px; } }
  /* a sheet laid over the page: the house map, search */
  .sheet { position: fixed; inset: 0; z-index: 40; overflow: auto; padding: max(16px, env(safe-area-inset-top, 0px)) 14px 28px; background: rgb(6 4 12 / .82); visibility: hidden; opacity: 0; transition: opacity .22s ease, visibility 0s linear .22s; }
  .sheet.open { visibility: visible; opacity: 1; transition: opacity .22s ease; }
  .sheet-panel { position: relative; margin: 0 auto; width: min(100%, 1420px); background: var(--sheet); color: var(--ink); border-radius: 16px; padding: 18px clamp(14px, 3vw, 30px) 24px;
                 box-shadow: 0 30px 80px rgba(0,0,0,.55); transform: translateY(10px); transition: transform .22s ease; }
  .sheet.open .sheet-panel { transform: none; }
  .sheet-narrow .sheet-panel { width: min(100%, 720px); margin-top: 8vh; }
  .sheet-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .sheet-bar h2 { font-size: 26px; margin-right: auto; }
  .sheet-close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(var(--strand), .45); background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; flex: none; }
  .sheet-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .sheet-hint { color: var(--muted); font: 14px var(--ui); margin: 0; }
  html.sheet-open { overflow: hidden; }
  #map-sheet .house { width: min(100%, 148.4vh); margin: 0 auto; }
  #map-sheet .house svg.fp { max-height: none; }
  /* search */
  .search-box { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(var(--strand), .55); border-radius: 12px; padding: 4px 14px; background: var(--bg); }
  .search-box svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; flex: none; }
  .search-box input { flex: 1; min-width: 0; font: 19px Georgia, serif; border: 0; outline: 0; padding: 10px 0; background: transparent; color: var(--ink); }
  .results { list-style: none; margin: 14px 0 0; padding: 0; }
  .results a { display: block; padding: 11px 8px; border-radius: 10px; text-decoration: none; color: var(--ink); }
  .results a:hover, .results a:focus-visible { background: rgba(var(--strand), .12); }
  .results .r-k { display: block; font: 12px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .results .r-t { display: block; font: 600 19px/1.3 Fraunces, Georgia, serif; color: var(--heading); text-shadow: none; }
  .results .r-d { display: block; font-size: 15.5px; color: var(--ink); opacity: .82; }
  .results mark { background: rgba(var(--tint), .22); color: inherit; border-radius: 3px; }
  .results-note { color: var(--muted); font: 14px var(--ui); margin: 12px 4px 0; }
  /* where you are, at the foot of a room or a piece: one line, and the map a tap away */
  .where-next { max-width: 720px; margin: 54px auto 0; padding: 18px 16px 0; border-top: 1px solid var(--cardLine); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; text-align: center; }
  .where-next p { margin: 0; color: var(--muted); }
  /* the foot of every page: the house's name and its rooms */
  .site-foot { max-width: 1100px; text-align: left; }
  .foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px 48px; align-items: start; margin-bottom: 22px; }
  .foot-brand .mark { margin: 0 0 6px; }
  .foot-name { font: 600 22px Fraunces, Georgia, serif; color: var(--heading); margin: 0; text-shadow: none; }
  .foot-line { color: var(--subhead); font-style: italic; margin: 2px 0 14px; }
  .foot-brand .btns { justify-content: flex-start; }
  .foot-h { font: 600 12.5px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
  .foot-rooms ul { list-style: none; margin: 0; padding: 0; columns: 3 170px; column-gap: 24px; }
  .foot-rooms li { break-inside: avoid; margin: 0 0 8px; }
  .foot-rooms a { text-decoration: none; color: var(--ink); text-shadow: none; }
  .foot-rooms a:hover .n { text-decoration: underline; }
  .foot-rooms .n { display: block; font: 600 15.5px Fraunces, Georgia, serif; color: var(--heading); text-shadow: none; }
  .foot-rooms .s { display: block; font: 13px var(--ui); color: var(--muted); }
  .site-foot > .small { border-top: 1px solid var(--cardLine); padding-top: 14px; }
  .site-foot .btns .btn { display: inline-flex; align-items: center; gap: 8px; }
  .site-foot .btns svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .site-foot .btns .support svg { fill: currentColor; stroke: none; }
  .site-foot .btns button.btn { cursor: pointer; font-family: var(--ui); }
  #letter-sheet form.letter { margin-top: 12px; }
  #letter-sheet label { display: block; color: var(--muted); font: 14px var(--ui); margin: 12px 0 4px; }
  #letter-sheet input, #letter-sheet textarea { width: 100%; font: 17px/1.5 Georgia, serif; padding: 9px 12px; border-radius: 9px; border: 1px solid rgba(var(--strand), .7); background: var(--bg); color: var(--ink); }
  #letter-sheet .btn { margin-top: 14px; border: 0; cursor: pointer; }
  #letter-sheet .addr { color: var(--ink); user-select: all; }
  .site-foot.solo { text-align: center; } .site-foot.solo .foot-top { grid-template-columns: 1fr; } .site-foot.solo .foot-brand .mark { margin: 0 auto 6px; } .site-foot.solo .foot-brand .btns { justify-content: center; }
  @media (max-width: 720px) { .foot-top { grid-template-columns: 1fr; } .site-foot { text-align: center; } .foot-brand .mark { margin: 0 auto 6px; } .foot-brand .btns { justify-content: center; } .foot-rooms ul { columns: 2 140px; text-align: left; } }
  /* Everything: every piece in the house, newest first, a row of series to narrow it */
  .index-page { max-width: 820px; margin: 0 auto; padding: 40px 16px 30px; }
  .index-head { text-align: center; margin-bottom: 22px; }
  .index-head h1 { font-size: clamp(34px, 5.4vw, 52px); }
  .filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 26px; }
  .filters button { font: 500 14.5px var(--ui); color: var(--ink); background: var(--card); border: 1px solid rgba(var(--strand), .45); border-radius: 999px; padding: 8px 15px; cursor: pointer; }
  .filters button[aria-pressed="true"] { background: var(--heading); border-color: var(--heading); color: var(--bg); }
  .year { font-size: 30px; margin: 30px 0 6px; padding-bottom: 6px; border-bottom: 2px solid rgba(var(--tint), .35); }
  .year[hidden], .pieces li[hidden] { display: none; }
  .elsewhere { margin: 46px 0 0; }
  .elsewhere ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .elsewhere a { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--cardLine); border-radius: 12px; background: var(--card); text-decoration: none; color: var(--ink); }
  .elsewhere a:hover { border-color: var(--heading); }
  .elsewhere .n { display: block; font: 600 18px Fraunces, Georgia, serif; color: var(--heading); }
  .elsewhere .s { display: block; font-size: 15px; color: var(--muted); }
  /* the end of a piece: the one before it and the one after it in the same room */
  .piece-next { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 42px 0 0; }
  .piece-next a { display: block; padding: 14px 16px; border: 1px solid var(--cardLine); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--card); transition: border-color .2s; }
  .piece-next a:hover, .piece-next a:focus-visible { border-color: var(--heading); }
  .piece-next .newer { text-align: right; grid-column: 2; }
  .piece-next .k { display: block; font: 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .piece-next .t { display: block; font: 600 18px/1.3 Fraunces, Georgia, serif; color: var(--heading); }
  .pn-room { text-align: center; margin: 16px 0 0; font: 15px var(--ui); }
  @media (max-width: 560px) { .piece-next { grid-template-columns: 1fr; } .piece-next .newer { grid-column: 1; } }
  /* how far through a piece you are: a hairline of violet across the very top */
  .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 7; pointer-events: none; }
  .progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--read, 0)); background: linear-gradient(90deg, #7b3fc4, #BE5CFF); }
  /* the house keeps the visitor's season (the early script marks the page): the yard's trees, the fallen leaves, snow */
  .wall .blossom, .wall .snow, .wall .fallen { display: none; }
  html[data-season="spring"] .wall .blossom, html[data-season="autumn"] .wall .fallen, html[data-season="winter"] .wall .snow { display: inline; }
  html[data-season="winter"] .wall .canopy { display: none; }
  /* autumn turns the yard's trees the plum of a purple-leaf plum tree, so the season keeps to the house's colours */
  html[data-season="autumn"] .cp00 { stop-color: #6b3f7a; } html[data-season="autumn"] .cp01 { stop-color: #4a2458; } html[data-season="autumn"] .cp02 { stop-color: #2e1438; }
  html[data-season="autumn"] .cp10 { stop-color: #8a5aa0; } html[data-season="autumn"] .cp11 { stop-color: #5f3274; } html[data-season="autumn"] .cp12 { stop-color: #3c1c4a; }
  html[data-season="autumn"] .cp20 { stop-color: #b48ccb; } html[data-season="autumn"] .cp21 { stop-color: #7d4c96; } html[data-season="autumn"] .cp22 { stop-color: #4f2862; }
  /* a lamp left on in every room you have been in this visit (trail.js) */
  svg.fp .gs-lamps circle { pointer-events: none; mix-blend-mode: screen; }
  :root[data-theme="light"] svg.fp .gs-lamps circle { mix-blend-mode: multiply; }
  /* ---- the look (4 Oct: "we have to move back to the drawing board a little bit ... I didn't mean a literal decorative
     plaque. What I meant was, do something better for the way the site looks ... the color scheme to be purple, blue, and
     grey, with the white or black background changing. Get rid of the plaques and just focus on making it more attractive
     and suiting my personality"; and "only use boxes if it looks better that way"). So: a clean page, white by day and
     black by night. Words sit on the page itself, set apart by fine lines; a box is kept only where it earns its place (a
     picture with its words, a form, a receipt, a tile to press). Violet names, blue for what leads somewhere, grey for
     the rest. One grey strand runs behind everything and shows through whatever lies over it. ---- */
  ::selection { background: rgba(var(--tint), .26); }
  /* Pictures and drawings are never "selected". A drag that misses the strand used to sweep up whatever it crossed, and a
     browser paints a selected picture as a tinted square over it (4 Oct: "that icky transparent square on top of my
     pic"). Words can still be selected and copied; pictures cannot be dragged off by accident either. */
  img, svg, canvas, video, figure.frame, .emblem, .mark { -webkit-user-select: none; user-select: none; }
  img, figure.frame a, .feature, .pieces .pic { -webkit-user-drag: none; }
  /* the boxes that are kept let the strand show through them */
  .feature, .receipt, form.letter, .library .collection-tile, .library .pillar, .elsewhere a, .piece-next a, .filters button, .mini-pages button, .piece .gz-player { background: var(--glass); }
  .filters button[aria-pressed="true"], .mini-pages button[aria-current] { background: var(--heading); }
  .room-content { position: relative; max-width: 820px; margin: 0 auto; }
  /* the room's own words, set plainly under its furniture */
  .room p.room-head.words { max-width: 640px; margin: 4px auto 32px; font-size: 19px; line-height: 1.65; text-align: center; text-wrap: pretty; }
  .note { background: none; border: 0; border-left: 2px solid var(--heading); border-radius: 0; padding: 2px 0 2px 16px; margin: 0 0 26px; font-size: 16px; color: var(--muted); }
  .empty { color: var(--muted); text-align: center; font-style: italic; }
  /* a heading inside a room: its name, a fine line under it, and a short stroke of violet running into blue */
  .shelf-h, .library h2 { position: relative; font-size: clamp(23px, 3vw, 28px); margin: 50px 0 16px; padding-bottom: 11px; border-bottom: 1px solid var(--hair); text-align: left; }
  .shelf-h::after, .library h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 58px; height: 2px; border-radius: 2px; background: var(--grad); }
  .year { border-bottom: 1px solid var(--hair); position: relative; }
  .year::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 58px; height: 2px; border-radius: 2px; background: var(--grad); }
  /* lists of pieces: rows on the page, a fine line between them, a little colour under the one you point at */
  .pieces li { border-top: 1px solid var(--hair); } .pieces li:last-child { border-bottom: 1px solid var(--hair); }
  .pieces a { border-radius: 12px; padding: 16px 10px; margin: 0 -10px; transition: background-color .2s; }
  .pieces a:hover, .pieces a:focus-visible { background: rgba(var(--tint), .07); }
  .pieces .pic { padding: 0; background: none; box-shadow: 0 6px 14px -8px rgba(20,10,40,.5); border-radius: 9px; overflow: hidden; }
  .pieces .pic img { height: 88px; }
  .pieces .pic.drawn { background: rgba(var(--tint), .06); border: 1px solid var(--hair); box-shadow: none; }
  @media (max-width: 480px) { .pieces .pic img { height: 66px; } }
  /* a picture with its words under it: the one kind of box that reads better as a box */
  .feature { border-radius: 16px; box-shadow: var(--lift); margin: 0 0 14px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .feature:hover, .feature:focus-visible { transform: translateY(-3px); border-color: rgba(var(--tint), .5); }
  .feature .in { padding: 16px 20px 20px; }
  .feature .room-label { font: 600 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--subhead); }
  .feature .room-label .emblem-sm { width: 24px; height: 24px; }
  .more { text-align: right; margin: 8px 0 34px; font: 600 14.5px var(--ui); }
  .more a { text-decoration: none; } .more a:hover, .more a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
  /* shelves (books, software, worlds, the books in progress): rows with their covers, no boxes */
  .books, .wips { gap: 0; }
  .books li, .wip { background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 22px 0; }
  .books li:last-child, .wip:last-child { border-bottom: 1px solid var(--hair); }
  .books .cover img, .wip .wip-cover { box-shadow: 0 10px 20px -8px rgba(20,10,40,.5); }
  .books p { margin: 6px 0 10px; }
  .books a:not(.cover), .wip a { font: 600 14.5px var(--ui); text-decoration: none; }
  .books a:not(.cover):hover, .wip a:hover { text-decoration: underline; text-underline-offset: 3px; }
  /* a receipt stays a slip of paper */
  .receipt { border-radius: 6px; box-shadow: var(--lift); }
  /* tiles you press keep their edges, and lift a little when pointed at */
  .library .collection-tile, .library .pillar, .elsewhere a, .piece-next a { border-radius: 14px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .library .collection-tile:hover, .library .pillar:hover, .elsewhere a:hover, .piece-next a:hover { transform: translateY(-2px); border-color: rgba(var(--tint), .5); box-shadow: var(--lift); }
  .library .section-heading { text-align: left; }
  /* buttons */
  .btn { transition: filter .2s, transform .2s; }
  a.btn:hover, button.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .btn.quiet { border-color: rgba(var(--strand), .5); }
  .btn.quiet:hover { border-color: var(--link); filter: none; }
  .doorway { text-align: center; margin: 18px 0 8px; }
  /* a letter, a share: the one form in the house, on a quiet panel of its own */
  form.letter { background: var(--card); border: 1px solid var(--cardLine); border-radius: 16px; padding: 20px 22px 22px; box-shadow: var(--lift); }
  form.letter label { display: block; color: var(--muted); font: 14px var(--ui); margin: 14px 0 5px; }
  form.letter label:first-child { margin-top: 0; }
  form.letter input, form.letter textarea { width: 100%; font: 17px/1.5 Georgia, serif; padding: 10px 13px; border-radius: 10px; border: 1px solid rgba(var(--strand), .5); background: var(--bg); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
  form.letter input:focus, form.letter textarea:focus, .search-box:focus-within { outline: 0; border-color: var(--heading); box-shadow: 0 0 0 3px rgba(var(--tint), .22); }
  form.letter .btn { margin-top: 16px; border: 0; cursor: pointer; }
  .mail-fallback { margin: 14px 0 0; font: 15px/1.6 var(--ui); color: var(--ink); }
  .mail-fallback[hidden] { display: none; }
  .mail-fallback a { font-weight: 600; }
  .mail-fallback .copy-letter { font: inherit; font-weight: 600; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  #letter-sheet form.letter { background: none; border: 0; box-shadow: none; padding: 0; }
  .copy { font: 13px var(--ui); color: var(--link); background: none; border: 1px solid rgba(var(--strand), .5); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
  /* the masthead and the foot: each closes with a hair of violet running into blue */
  .masthead { border-bottom: 0; }
  .masthead::after, .site-foot::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--tint), .6) 22%, color-mix(in srgb, var(--link) 60%, transparent) 78%, transparent); }
  .masthead::after { bottom: 0; }
  .site-foot { position: relative; border-top: 0; margin-top: 64px; }
  .site-foot::before { top: 0; }
  .site-foot > .small { border-top: 1px solid var(--hair); }
  /* the house map at the foot of a room: on the page itself, where you stand marked on it */
  .where { margin: 70px auto 0; text-align: center; }
  .where-h { font: 600 12.5px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; text-shadow: none; }
  .house figcaption { color: var(--muted); font: 14px var(--ui); text-align: center; margin-top: 10px; }
  main.piece + aside.where { margin: 60px auto 0; padding: 0 16px; }
  /* The house map on a phone (4 Oct: "the floorplan needs to be much bigger on cell phone. I couldn't see any of the
     rooms"): drawn large enough to read every room's name, and slid sideways with a finger. strand.js starts it on the
     room you are standing in. */
  .map-hint, .map-zoom { display: none; }
  @media (max-width: 760px) {
    .house { position: relative; }
    /* one finger slides the map or scrolls the page; two fingers are the map's own (strand.js makes it smaller or bigger) */
    .map-pan { overflow-x: auto; overflow-y: hidden; margin: 0 -16px; padding: 0 16px 8px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; touch-action: pan-x pan-y; }
    #map-sheet .map-pan { margin: 0 -14px; padding: 0 14px 8px; }
    /* its size is the visitor's to set (4 Oct, after the first, larger version: "The floorplan is actually a bit too large
       for cell phone viewers, there should be a way to zoom in and out"; "We don't necessarely need buttons for zoom,
       just the ability to do so with fingers"): it opens at twice the screen's width; a pinch makes it smaller, down to
       the whole house on one screen, or bigger, up to more than three screens; the two round buttons do the same in steps */
    .house .map-pan svg.fp, #map-sheet .house .map-pan svg.fp { width: var(--mapz, 200%); max-width: none; max-height: none; height: auto; }
    .map-zoom { display: flex; gap: 8px; position: absolute; top: 8px; right: 0; z-index: 3; }
    .map-zoom button { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(var(--strand), .55); background: var(--glass); color: var(--ink);
      cursor: pointer; display: grid; place-items: center; box-shadow: var(--lift); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .map-zoom button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
    .map-zoom button:disabled { opacity: .35; cursor: default; }
    .map-hint { display: block; color: var(--muted); font: 13.5px var(--ui); text-align: center; margin: 4px 0 0; }
    .map-hint svg { width: 30px; height: 12px; vertical-align: -1px; margin-right: 6px; fill: none; stroke: rgb(var(--strand)); stroke-width: 2.4; stroke-linecap: round; }
    .house.map-fits .map-hint .slide { display: none; }
  }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* ---- the strand that runs through everything (4 Oct: "have a grey strand running randomly through the background of
     the screen, implying a strand runs through everything. What the strand does should be different on every load and
     every page and every visitor"; "The strand should still be in the background"; "maybe make it interactive like you
     can move it"). One grey cord down every page, drawn and moved by strand.js. It lies behind everything; press on it
     and it can be pulled about like a thread on a table. ---- */
  .through { position: absolute; left: calc(50% - 50vw); top: 0; width: 100vw; pointer-events: none; z-index: -1; overflow: hidden; }
  .through path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .through .th-body { color: rgba(var(--strand), .66); }
  /* on the two tools that moved in (the tarot reading, the Frequency Room) it keeps further back */
  main.app > .through { opacity: .5; }
  .through .th-shadow { color: rgba(30, 16, 60, .08); }
  .through .th-glow { stroke-width: 3; opacity: 0; }
  .through defs { color: #7b3fc4; }
  :root[data-theme="dark"] .through .th-shadow { color: rgba(0, 0, 0, .6); }
  :root[data-theme="dark"] .through defs { color: #d6b0ff; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .through .th-shadow { color: rgba(0, 0, 0, .6); }
    :root:not([data-theme="light"]) .through defs { color: #d6b0ff; } }
  /* on a phone the words fill the screen, so the strand always runs behind them: finer, quieter, and without its shadow */
  @media (max-width: 640px) { .through path { stroke-width: 1.7; } .through .th-body { color: rgba(var(--strand), .46); } .through .th-shadow { display: none; } }
  html.gs-near, html.gs-near body * { cursor: grab !important; }
  html.gs-grabbing, html.gs-grabbing body * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }