/* johndanielkearney.com
   Layout and type live here. Colors, fonts and sizing come from the
   custom properties in the <style id="site-theme"> block in index.html,
   which is what the studio rewrites. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--base);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; }

#page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(6rem * var(--density)) 1.5rem calc(5rem * var(--density));
}

section + section {
  margin-top: calc(3.75rem * var(--density));
  padding-top: calc(3.75rem * var(--density));
  border-top: 1px solid var(--rule);
}

/* Type */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.display {
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  letter-spacing: -0.025em;
  margin: 0.35rem 0 0;
}

h2 {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.18rem;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.kicker {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.lede {
  font-size: 1.18rem;
  line-height: 1.55;
  margin: 1.5rem 0 0;
  max-width: 34em;
}

/* Links */

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover { color: var(--accent); }

.navrow {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.25rem;
  font-size: 0.9rem;
}

.navrow a {
  border-bottom-color: transparent;
  color: var(--muted);
}

.navrow a:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* Cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem 1.25rem;
  background: transparent;
  transition: border-color 0.15s ease;
}

.card:hover { border-color: var(--accent); }
.card h3 { margin-bottom: 0.55rem; }

.card p {
  font-size: 0.94rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.card a { font-size: 0.88rem; }

/* Link lists */

.linklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.linklist li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

.linklist.bare li { border-bottom: 0; padding: 0.3rem 0; }
.linklist li:last-child { border-bottom: 0; }

.linklist a { border-bottom-color: transparent; }
.linklist a:hover { border-bottom-color: var(--accent); }

.meta {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Images added from the studio */

figure { margin: 0 0 1.1rem; }

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

figcaption {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.6rem;
}

/* Quote */

blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.45;
  border-left: 2px solid var(--accent);
  padding-left: 1.35rem;
}

blockquote cite {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem;
}

/* Two column */

.twocol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

/* Footer */

.s-footer {
  font-size: 0.82rem;
  color: var(--muted);
}

@media (max-width: 600px) {
  #page { padding-top: calc(3.5rem * var(--density)); }
  .linklist li { flex-direction: column; gap: 0.25rem; }
}

/* ===================================================================
   The room
   An illustrated index. Its palette is fixed rather than themed,
   because it depicts an object rather than styling the page.
   =================================================================== */

/* The home page is the room and nothing else: one viewport, no scrolling.
   .roomfit keeps the wall at 16/9 and sizes it to whichever of width or height
   runs out first, so every tuned percentage inside it survives any window shape. */
.roomhome, .roomhome body { height: 100%; }
.roomhome body { overflow: hidden; }
.roomhome #page { max-width: none; height: 100%; margin: 0; padding: 14px 16px 16px;
  display: flex; flex-direction: column; }
.roomhome .s-room { width: auto; margin: 0; transform: none; padding: 0; border-top: 0;
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.roomfit { width: min(100%, calc((100vh - 96px) * 16 / 9)); display: flex; flex-direction: column; }

.s-room {
  --wall:#efe2c6; --wall-shade:#e2d2b0; --floor:#a9723f;
  --wood:#8a5a34; --wood-lt:#a8713f; --wood-dk:#5e3a1f;
  --cork:#d9a86c; --cork-dk:#c08e52;
  --steel:#b7bdc3; --steel-lt:#d3d8dc; --steel-dk:#949aa1; --steel-edge:#6c737a;
  --paper:#fdfaf2; --string:#bf2717; --string-dk:#6f1409; --string-hi:#dd6a56;
  --pop:#ffd35c; --ink:#3a2b1e; --brass:#d8a544;
  --room-font: ui-rounded, "Varela Round", "Trebuchet MS", system-ui, sans-serif;

  /* break out of the reading measure without breaking the page flow */
  width: min(1040px, calc(100vw - 3rem));
  margin-left: 50%;
  transform: translateX(-50%);
  border-top: 0;
  padding-top: calc(2.5rem * var(--density));
}

/* folder tabs */
.tabs { display: flex; gap: 6px; align-items: flex-end; margin: 0 0 -4px; padding-left: 14px; position: relative; z-index: 2; }
.tab {
  font-family: var(--room-font); font-size: 0.92rem; font-weight: 700; color: var(--ink);
  background: var(--steel-lt); border: 4px solid var(--ink); border-bottom: 0;
  border-radius: 12px 12px 0 0; padding: 0.45rem 1.15rem 0.55rem; text-decoration: none;
  transform: translateY(4px); transition: transform 0.14s;
}
.tab:hover { transform: translateY(0); color: var(--ink); }
.tab[aria-current="page"] { background: var(--wall); transform: translateY(0); padding-bottom: 0.75rem; }
.tab:focus-visible { outline: 3px solid var(--string); outline-offset: 2px; }

.stage { border: 4px solid var(--ink); border-radius: 0 16px 16px 16px; overflow: hidden; box-shadow: 0 6px 0 rgba(58,43,30,0.28); position: relative; z-index: 1; }
.blogstage { border-radius: 16px; }

.wall { background: linear-gradient(180deg, var(--wall) 0%, var(--wall-shade) 100%); aspect-ratio: 16/9; position: relative; user-select: none; }
/* below the board (4) so the sticky note, which is trapped in the board's stacking
   context, hangs in front of the baseboard instead of being sliced by it */
.rail { position: absolute; left: 0; right: 0; bottom: 30%; height: 15px; background: var(--wood); border-top: 3px solid var(--wood-lt); border-bottom: 3px solid var(--wood-dk); z-index: 3; }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--floor);
  background-image: linear-gradient(180deg, rgba(58,43,30,0.22), rgba(58,43,30,0) 45%),
    repeating-linear-gradient(180deg, transparent 0 20px, rgba(94,58,31,0.2) 20px 22px); z-index: 2; }

.board { position: absolute; left: 49%; top: 32%; transform: translate(-50%,-50%);
  width: min(56%, 480px); aspect-ratio: 16/10; background: var(--cork);
  border: 14px solid var(--wood); border-radius: 10px;
  box-shadow: 0 8px 0 rgba(58,43,30,0.3), inset 0 0 0 3px var(--cork-dk);
  background-image: radial-gradient(rgba(120,80,40,0.22) 1.1px, transparent 1.2px);
  background-size: 9px 9px; z-index: 4; }

/* yarn: concentric layers plus two out-of-phase dashes that read as the twist */
.threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.threads g { fill: none; transition: opacity 0.18s; }
.threads .t-shadow path { stroke: rgba(58,43,30,0.32); stroke-linecap: round; }
.threads .t-fuzz path { stroke: var(--string); opacity: 0.19; stroke-linecap: round; }
.threads .t-core path { stroke: var(--string-dk); stroke-linecap: round; }
.threads .t-body path { stroke: var(--string); stroke-linecap: round; }
.threads .t-twist path { stroke: var(--string-dk); opacity: 0.5; stroke-dasharray: 2.2 4.6; stroke-linecap: butt; }
.threads .t-fiber path { stroke: var(--string-hi); opacity: 0.42; stroke-dasharray: 1.5 5.3; stroke-dashoffset: 3.4; stroke-linecap: butt; }
.wall.dimming .threads g { opacity: 0.13; }

/* Cards hang FROM the pin: left/top is the tack centre and rotation pivots on it,
   so card height never feeds back into thread geometry. */
/* inset:0 puts the pins in the same box as the thread SVG, so both share one
   coordinate space and endpoints cannot drift apart */
.pins { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
/* display:contents drops the li box so the anchor positions against .pins directly,
   which keeps the markup a real list without a wrapper in the way */
.pins li, .cabs li { display: contents; }
.drawer { text-decoration: none; color: inherit; }
.pin { position: absolute; transform-origin: 50% 1px; background: var(--paper); border: 3px solid var(--ink);
  border-radius: 6px; padding: 5px 5px 3px; width: 84px; box-shadow: 0 3px 0 rgba(58,43,30,0.35);
  text-decoration: none; display: block;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.18s ease, filter 0.18s ease; }
.pin .swatch { display: block; height: 44px; border-radius: 3px; border: 2px solid var(--ink); background: var(--c, #ddd); }
.pin .cap { display: block; font-family: var(--room-font); font-size: 11px; line-height: 1.25; text-align: center; color: var(--ink); margin-top: 4px; font-weight: 700; }
.pin .tack { position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 3px solid var(--ink); background: var(--string); box-shadow: 0 2px 0 rgba(58,43,30,0.4); }
.pin:focus-visible { outline: 4px solid var(--pop); outline-offset: 3px; }
.wall.dimming .pin { opacity: 0.26; filter: saturate(0.45); }
.wall.dimming .pin.on { opacity: 1; filter: none; }
.pin.on { transform: translate(-50%,-1px) rotate(var(--rot)) scale(1.16) !important;
  box-shadow: 0 7px 0 rgba(58,43,30,0.4), 0 0 0 5px var(--pop); z-index: 9; }

.bubble { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%) scale(0.85);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 10px; padding: 0.25rem 0.6rem;
  font-family: var(--room-font); font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.14s, transform 0.14s;
  box-shadow: 0 3px 0 rgba(58,43,30,0.35); z-index: 20; }
.bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--ink); }
/* direct child only: a nested control's bubble must not fire with its container's */
.pin.on .bubble, .cab:hover > .bubble, .cab:focus-visible > .bubble, .door:hover .bubble,
.poster:hover .bubble, .poster:focus-visible .bubble,
.clock:hover .bubble, .clock:focus-visible .bubble,
.plant:hover .bubble, .plant:focus-visible .bubble { opacity: 1; transform: translateX(-50%) scale(1); }

/* steel filing cabinets */
.cabs { position: absolute; left: 2%; right: 28%; bottom: 3%; height: 31%; z-index: 6; list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 2.4vw, 26px); }
.cab { position: relative; width: clamp(70px, 10vw, 110px); height: 100%; border: 3px solid var(--ink);
  border-radius: 5px 5px 2px 2px; padding: 5px 4px; display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: linear-gradient(90deg, var(--steel-lt) 0%, var(--steel) 22%, var(--steel) 78%, var(--steel-dk) 100%);
  box-shadow: 0 5px 0 rgba(58,43,30,0.45); transition: transform 0.16s ease, box-shadow 0.16s ease; }
.cab:hover, .cab:focus-visible { transform: translateY(-7px); box-shadow: 0 10px 0 rgba(58,43,30,0.45), 0 0 0 4px var(--pop); outline: none; }
.cab .plate { flex: 0 0 auto; background: var(--ink); color: var(--paper); border-radius: 2px; text-align: center;
  font-family: var(--room-font); font-size: 10px; font-weight: 700; padding: 1px 2px; letter-spacing: 0.03em; }
.drawer { flex: 1; min-height: 0; background: var(--steel); border: 2px solid var(--steel-edge); border-radius: 2px;
  display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.18s ease; }
.cab:hover .drawer:nth-last-child(2) { transform: translateX(7px); }
.handle { width: 42%; height: 5px; border-radius: 2px; background: var(--steel-edge); }
.dlabel { position: absolute; left: 3px; right: 3px; top: 50%; transform: translateY(-50%); background: var(--paper);
  border: 1px solid var(--steel-edge); border-radius: 1px; font-family: var(--room-font); font-size: 8.5px;
  font-weight: 700; color: var(--ink); text-align: center; opacity: 0; transition: opacity 0.16s; line-height: 1.4; }
.cab:hover .dlabel, .cab:focus-visible .dlabel { opacity: 1; }
.cab:hover .handle, .cab:focus-visible .handle { opacity: 0; }

/* door to the blog */
.door { position: absolute; right: 4%; bottom: 30%; width: 11%; min-width: 74px; height: 41%; z-index: 6;
  background: linear-gradient(90deg, var(--wood-lt) 0%, var(--wood) 30%, var(--wood) 100%);
  border: 3px solid var(--ink); border-radius: 6px 6px 0 0; display: block; text-decoration: none;
  box-shadow: inset 0 0 0 4px rgba(94,58,31,0.5); transition: filter 0.16s; }
.door:hover, .door:focus-visible { filter: brightness(1.12); outline: none; box-shadow: inset 0 0 0 4px rgba(94,58,31,0.5), 0 0 0 4px var(--pop); }
.door .panel { position: absolute; left: 14%; right: 14%; height: 24%; border: 3px solid var(--wood-dk); border-radius: 3px; }
.door .panel.a { top: 27%; } .door .panel.b { bottom: 10%; }
.knob { position: absolute; right: 11%; top: 57%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--brass); border: 2px solid var(--ink); }
.sign { position: absolute; left: 9%; right: 9%; top: 7%; height: 17%; background: var(--paper);
  border: 3px solid var(--ink); border-radius: 3px; font-family: var(--room-font);
  font-size: clamp(12px, 1.15vw, 17px); font-weight: 800; text-transform: uppercase;
  color: var(--ink); display: flex; align-items: center; justify-content: center; letter-spacing: 0.07em; }

/* taped poster. Fixed padding: percentages would resolve against the wall, not the poster. */
.poster { position: absolute; left: 3.5%; top: 21%; width: 14%; min-width: 108px; height: 35%; min-height: 152px; z-index: 4;
  background: #2f5f6e; border: 3px solid var(--ink); border-radius: 3px; transform: rotate(-2.5deg);
  padding: 11px 9px; display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 4px 0 rgba(58,43,30,0.26); transition: transform 0.16s ease, box-shadow 0.16s ease; }
.poster:hover, .poster:focus-visible { transform: rotate(-2.5deg) translateY(-5px) scale(1.03); box-shadow: 0 9px 0 rgba(58,43,30,0.26), 0 0 0 4px var(--pop); outline: none; }
.tape { position: absolute; width: 38%; height: 12px; background: rgba(253,250,242,0.62); border: 1px solid rgba(58,43,30,0.22); }
.tape.tl { top: -6px; left: -9%; transform: rotate(-40deg); }
.tape.tr { top: -6px; right: -9%; transform: rotate(40deg); }
.tape.bm { bottom: -6px; left: 31%; transform: rotate(5deg); }
.poster .pk { font-family: var(--room-font); font-size: 7.5px; letter-spacing: 0.15em; flex: 0 0 auto; text-transform: uppercase; color: rgba(253,250,242,0.72); font-weight: 700; line-height: 1.2; }
.poster .ball { position: relative; width: 58%; aspect-ratio: 1; flex: 0 0 auto; border-radius: 50%; background: var(--paper);
  border: 3px solid var(--ink); overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(58,43,30,0.32); }
.poster .ball .band { position: absolute; left: -12%; right: -12%; top: 19%; height: 62%; background: #8e2f3f; }
.poster .ball .num { position: relative; z-index: 2; width: 53%; aspect-ratio: 1; background: var(--paper); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-family: var(--room-font);
  font-size: clamp(12px, 1.55vw, 20px); font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.05em; }
.poster .ball .gloss { position: absolute; z-index: 3; top: 10%; left: 15%; width: 27%; height: 17%; background: rgba(255,255,255,0.62); border-radius: 50%; transform: rotate(-25deg); }
.poster .pt { font-family: var(--room-font); font-size: clamp(11px, 1.2vw, 15px); font-weight: 700; flex: 0 0 auto; color: var(--paper); line-height: 1.08; }
.poster .pgo { font-family: var(--room-font); font-size: 7px; font-weight: 700; flex: 0 0 auto; background: var(--pop); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 6px; }

/* wall clock, hands driven by --hh / --mm from San Francisco time */
/* moved right off the poster so the two are not stacked */
.clock { position: absolute; left: 20%; top: 6%; width: 7%; min-width: 44px; aspect-ratio: 1; z-index: 4; padding: 0;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; cursor: pointer;
  box-shadow: 0 3px 0 rgba(58,43,30,0.3); transition: transform 0.16s ease, box-shadow 0.16s ease; }
.clock:hover, .clock:focus-visible { transform: translateY(-4px); outline: none; z-index: 20; box-shadow: 0 8px 0 rgba(58,43,30,0.3), 0 0 0 4px var(--pop); }
.clock::before, .clock::after { content: ""; position: absolute; left: 50%; bottom: 50%; background: var(--ink); border-radius: 2px; transform-origin: bottom center; }
.clock::before { width: 3px; height: 24%; margin-left: -1.5px; transform: rotate(var(--hh, 40deg)); }
.clock::after { width: 3px; height: 33%; margin-left: -1.5px; transform: rotate(var(--mm, -100deg)); }
.clock i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--string); border-radius: 50%; }
.clock .bubble { bottom: auto; top: calc(100% + 12px); }
.clock .bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }

/* potted plant */
.plant { position: absolute; left: 60%; bottom: 3%; width: 8%; min-width: 50px; height: 22%; z-index: 6;
  background: none; border: 0; padding: 0; cursor: pointer; transition: transform 0.16s ease; }
.plant:hover, .plant:focus-visible { transform: translateY(-4px); outline: none; z-index: 20; }
.plant:hover .pot, .plant:focus-visible .pot { box-shadow: 0 0 0 4px var(--pop); }
.pot { position: absolute; bottom: 0; left: 16%; right: 16%; height: 46%; background: #c4703f; border: 3px solid var(--ink); border-radius: 3px 3px 7px 7px; }
.pot::before { content: ""; position: absolute; top: -3px; left: -11%; right: -11%; height: 30%; background: #d5804a; border: 3px solid var(--ink); border-radius: 3px; }
.leaf { position: absolute; bottom: 42%; left: 50%; width: 34%; height: 52%; background: #6faa63; border: 3px solid var(--ink); border-radius: 70% 12% 70% 12%; transform-origin: bottom center; }
.leaf.a { transform: translateX(-50%) rotate(-32deg); }
.leaf.b { transform: translateX(-50%) rotate(4deg); background: #7fbb70; height: 60%; }
.leaf.c { transform: translateX(-50%) rotate(36deg); }

/* framed wall map */
.map { position: absolute; right: 3%; top: 2%; width: 21%; min-width: 146px; aspect-ratio: 200/138; z-index: 4;
  background: #f6efdc; border: 6px solid var(--wood); border-radius: 4px; padding: 5px 6px 3px;
  display: flex; flex-direction: column; gap: 2px; box-shadow: 0 5px 0 rgba(58,43,30,0.3);
  transition: transform 0.16s ease, box-shadow 0.16s ease; }
.map:hover { transform: translateY(-4px); box-shadow: 0 9px 0 rgba(58,43,30,0.3); z-index: 20; }
.mtitle { font-family: var(--room-font); font-size: 7.5px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(58,43,30,0.6); font-weight: 700; text-align: center; flex: 0 0 auto; }
.map svg { width: 100%; flex: 1; min-height: 0; display: block; overflow: visible; }
.map .usa { fill: #cddcc2; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.map .route { fill: none; stroke: var(--string); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.map .city { fill: var(--string); stroke: var(--ink); stroke-width: 2; }
.map .city.end { fill: var(--pop); }
.map .bubble { bottom: auto; top: calc(100% + 14px); font-size: 11px; }
.map .bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
.map:hover .bubble { opacity: 1; transform: translateX(-50%) scale(1); }

/* hanging sign: the only place the name appears in the room */
.namesign { position: absolute; left: 50%; top: 3.5%; transform: translateX(-50%); z-index: 5;
  background: var(--wood); border: 3px solid var(--ink); border-radius: 6px; padding: 0.3rem 1.1rem;
  box-shadow: 0 4px 0 rgba(58,43,30,0.35); }
.namesign::before, .namesign::after { content: ""; position: absolute; top: -10px; width: 3px; height: 10px; background: var(--ink); }
.namesign::before { left: 16%; } .namesign::after { right: 16%; }
.nametext { font-family: var(--room-font); font-size: clamp(13px, 1.45vw, 19px); font-weight: 700;
  color: var(--paper); letter-spacing: 0.01em; white-space: nowrap; }

/* A rural mailbox: wooden post, black arched box, red flag. Sits at the door's own
   ground line (bottom:30%, the rail) rather than out on the floor in front of it,
   which is what made the previous one read as blocking the door instead of beside it. */
.mailbox { position: absolute; left: 76%; bottom: 30%; width: 8%; min-width: 52px; height: 25%; z-index: 6;
  text-decoration: none; border-bottom: 0; padding-bottom: 0; transition: transform 0.16s ease; }
/* lift above the door while hovered: both sit at z-index 6 and the door is later in
   the DOM, so without this it paints over the bubble no matter what the bubble's own
   z-index is, because the bubble is trapped in the mailbox's stacking context */
.mailbox:hover, .mailbox:focus-visible { transform: translateY(-4px); outline: none; z-index: 20; }
/* the box spans 0..82%, so its centre is 41%: the post must sit there, not at 50% */
.mpost { position: absolute; left: 32%; width: 18%; bottom: 0; top: 44%;
  background: linear-gradient(90deg, var(--wood) 0%, var(--wood-lt) 40%, var(--wood-dk) 100%);
  border: 3px solid var(--ink); border-radius: 2px; }
/* arched along the TOP, flat bottom: a half-cylinder seen from the side.
   The previous radii rounded the left and right ends instead, which turned it 90deg. */
.mbox { position: absolute; left: 0; right: 18%; top: 6%; height: 42%; background: #35322e;
  border: 3px solid var(--ink); border-radius: 46% 46% 5px 5px / 72% 72% 5px 5px;
  box-shadow: 0 3px 0 rgba(58,43,30,0.32); }
.mailbox:hover .mbox, .mailbox:focus-visible .mbox { box-shadow: 0 3px 0 rgba(58,43,30,0.32), 0 0 0 4px var(--pop); }
.mdoorline { position: absolute; left: 22%; top: 16%; bottom: 16%; width: 3px;
  background: rgba(253,250,242,0.45); border-radius: 2px; }
.mknob { position: absolute; left: 9%; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--brass); border: 2px solid var(--ink); }
/* straddles the box's right end (82%) so it reads as mounted on the side and
   overlaps well into the body, rather than hovering 3px away from it */
.mflag { position: absolute; left: 76%; width: 9%; min-width: 7px; top: -8%; height: 38%;
  background: #cf2b1c; border: 3px solid var(--ink); border-radius: 2px; }
/* centred on the box (41%), not the container, so it cannot drift toward the door */
.mailbox .mlabel { position: absolute; left: 41%; bottom: calc(100% + 5px); transform: translateX(-50%);
  font-family: var(--room-font); font-size: clamp(8px, 0.74vw, 10px); font-weight: 700; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
/* The address is ~230px wide and the door is ~12px away, so a centred bubble always
   crosses it. Anchor the right edge to the mailbox and let it open leftward instead. */
.mailbox .bubble { left: auto; right: 0; bottom: calc(100% + 30px);
  transform: translateX(0) scale(0.85); transform-origin: right bottom; }
.mailbox .bubble::after { left: auto; right: 24px; margin-left: 0; }
.mailbox:hover .bubble, .mailbox:focus-visible .bubble { opacity: 1; transform: translateX(0) scale(1); }

/* Now, on a sticky note adhered along its top edge to the bottom of the board, so the
   rest of it hangs free. Pivots from that edge and casts a soft shadow onto the wall. */
.note { position: absolute; left: 74%; bottom: -24%; width: 20%; aspect-ratio: 1 / 0.92; z-index: 6;
  background: #f4e58f; border: 2px solid var(--ink); border-radius: 1px; padding: 7px 8px 6px;
  transform: rotate(-3deg); transform-origin: 50% 0;
  box-shadow: 0 2px 0 rgba(58,43,30,0.16), 0 9px 12px rgba(58,43,30,0.32);
  display: flex; flex-direction: column; gap: 2px; overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease; }
.note::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 15%;
  background: rgba(58,43,30,0.07); }  /* the adhesive band */
.note:hover { transform: rotate(-3deg) translateY(-3px); box-shadow: 0 2px 0 rgba(58,43,30,0.16), 0 13px 15px rgba(58,43,30,0.32); }
.note .nk { font-family: var(--room-font); font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(58,43,30,0.6); font-weight: 700; position: relative; }
.note .nt { font-family: var(--room-font); font-size: clamp(8.5px, 0.78vw, 11px); font-weight: 700;
  color: var(--ink); line-height: 1.28; position: relative; }

/* One SVG, three circles at exact coordinates. Stacking three separately positioned
   CSS boxes meant the contact point depended on percentages of a percentage, which is
   why it kept floating. In the viewBox the rack is just: centres at (r, H-r), (3r, H-r)
   and (2r, H-r-r*sqrt3). Nothing to tune. */
.balls { position: absolute; left: 67.5%; bottom: 3%; width: 4.5%; min-width: 34px; z-index: 6; }
/* fills live on the shapes as presentation attributes, not in CSS: the first attempt
   used <use> and class selectors, and stylesheet rules do not reach into a use shadow
   tree, so every circle fell back to default black */
.balls svg { display: block; width: 100%; height: auto; }

/* things left on top of the cabinets */
.mug { position: absolute; bottom: 100%; left: 16%; width: 30%; height: 15px; margin-bottom: 2px; background: var(--paper); border: 3px solid var(--ink); border-radius: 2px 2px 6px 6px; }
.mug::after { content: ""; position: absolute; right: -9px; top: 1px; width: 9px; height: 9px; border: 3px solid var(--ink); border-left: 0; border-radius: 0 7px 7px 0; }
.folders { position: absolute; bottom: 100%; right: 16%; width: 54%; height: 18px; margin-bottom: 2px; }
.folders i { position: absolute; left: 0; right: 0; height: 9px; border: 2px solid var(--ink); border-radius: 2px; }
.folders i:nth-child(1) { bottom: 7px; background: #e9cd95; transform: rotate(-6deg); }
.folders i:nth-child(2) { bottom: 3.5px; background: #dcb877; transform: rotate(3deg); }
.folders i:nth-child(3) { bottom: 0; background: #caa163; }

/* ---- blog page ---- */
.bloglist { list-style: none; margin: 0; padding: 0; }
.bloglist li { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.bloglist li:last-child { border-bottom: 0; }
/* on the blog page the live tab joins the page surface, not the room's wall */
.tabs.onblog .tab[aria-current="page"] { background: var(--bg); color: var(--fg); }
.blogempty { padding: 3.5rem 1.5rem; text-align: center; background: var(--bg); }
.blogempty p { color: var(--muted); max-width: 42ch; margin: 0 auto 0.6rem; }
.blogempty .big { font-family: var(--font-display); font-size: 1.4rem; color: var(--fg); }

@media (prefers-reduced-motion: reduce) { .s-room * { transition: none !important; } }

/* ===================================================================
   Mobile: no room, no theme, no javascript. 1994 and proud of it.
   =================================================================== */
.plain { display: none; }

@media (max-width: 760px) {
  html { background: #fff; }
  body { background: #fff; color: #000; font-family: "Times New Roman", Times, serif; line-height: 1.4; }
  #page { max-width: none; margin: 0; padding: 8px; }
  #page > section { display: none !important; }
  /* undo the locked full-viewport home so the plain page can scroll normally */
  .roomhome, .roomhome body { height: auto; }
  .roomhome body { overflow: auto; }
  .roomhome #page { height: auto; padding: 8px; display: block; }
  .plain { display: block; }
  .plain h1 { font-size: 1.6em; margin: 0 0 0.2em; font-weight: 700; }
  .plain h2 { font-size: 1.1em; margin: 1em 0 0.2em; font-weight: 700; }
  .plain p { margin: 0.4em 0; }
  .plain ul { margin: 0.2em 0; padding-left: 2em; }
  .plain a { color: #00e; text-decoration: underline; }
  .plain a:visited { color: #551a8b; }
  .plain a:active { color: #e00; }
  .plain hr { border: 0; border-top: 1px solid #999; margin: 0.8em 0; }
  .plain small { font-size: 0.8em; color: #444; }
}