/* ============================================================
   Raw.Space — title-block v2  [PROTOTYPE — two pages only]
   A catalogue-record + navigation instrument. Four genuine-link rows:
   TITLE / LOCATION / ADJACENT / MAP. (KIND and REV removed.)

   COLOUR / AFFORDANCE (load-bearing):
   - Monochrome ink-on-ground at rest. NO permanent oxblood mark on any row
     (colour-as-sole-signifier misleads about which rows are links / fails
     WCAG 1.4.1). Oxblood is interaction heat ONLY, on :hover AND :focus-visible.
   - No per-row arrows / underlines / +/−/chevron glyphs. The structured block
     self-evidently reads as navigational; affordance is carried by SEMANTICS
     (real <a> / <button>) plus a visible focus RING (a shape, not colour alone).
   - Opaque-light on every page, including dark pulse canvases.

   DESCRIPTION (info-bearing pages only): a CONTENT-SWAP, not an accordion.
   A conditional "about" trigger row swaps the whole block: the label rows
   disappear and the description occupies the space (capped height, internal
   scroll). The open state carries a mono "close" control (row-label register)
   as the primary way back; Escape and click-away are added conveniences.
   Starts closed every visit.
   ============================================================ */

aside.tb2{
  position:fixed; right:24px; bottom:24px; z-index:600000;
  width:17rem; max-width:calc(100vw - 48px); box-sizing:border-box;
  background:var(--ground,#f5f5f4); border:1px solid var(--ink,#1A1A1A);
  font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size:10.5px; letter-spacing:.06em; color:var(--ink,#1A1A1A);
}

/* rows — genuine links (and the <button> trigger), monochrome at rest, label|value */
.tb2-row{ display:grid; grid-template-columns:5.2rem 1fr; align-items:stretch; width:100%; box-sizing:border-box; margin:0; padding:0; -webkit-appearance:none; appearance:none; text-align:left; text-decoration:none; color:inherit; background:none; border:0; border-top:1px solid var(--ink,#1A1A1A); font:inherit; letter-spacing:inherit; cursor:pointer; }
.tb2-row:first-child{ border-top:0; }
.tb2-k{ padding:8px 10px; text-transform:uppercase; opacity:.5; border-right:1px solid var(--ink,#1A1A1A); }
/* titles vary a lot in length (TITLE, and ADJACENT carries a neighbour's title): the value is a
   SINGLE line, truncated with text-overflow:ellipsis. It never wraps and never widens the block —
   common titles ("Having said") sit on one line; genuinely long ones truncate. The fixed px block
   width + single-line truncation together remove all per-page sizing pressure. */
.tb2-v{ padding:8px 12px; text-align:right; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* interaction heat — hover AND focus parity (keyboard + mouse), never permanent */
.tb2-row:not(.tb2-title):hover, .tb2-row:not(.tb2-title):focus-visible{ color:var(--oxblood,#6c0000); }
.tb2-row:not(.tb2-title):hover .tb2-k, .tb2-row:not(.tb2-title):focus-visible .tb2-k{ opacity:1; }
/* visible focus ring — a shape indicator, not colour alone */
.tb2-row:not(.tb2-title):focus-visible{ outline:2px solid var(--oxblood,#6c0000); outline-offset:-3px; }
/* TITLE is a non-interactive identity row (single-view pages only; §4 Rule B): it states what
   the page is and never navigates — no link, no oxblood heat, no focus ring. Rendered as a
   <div class="tb2-row tb2-title">, excluded from the heat/ring rules above. */
.tb2-title{ cursor:default; }

/* ABOUT — the conditional description trigger, a label→value row (it is a .tb2-row, so it
   shares the grid, borders, and hover/focus heat + ring with the fact rows). Its value is an
   authored teaser, forced to a SINGLE line and CSS-truncated with a trailing … — the ellipsis
   is the at-rest signal that the row expands (no glyph, no JS char-chop). Left-aligned so the
   … trails the text rather than clipping its start. */
.tb2-about .tb2-v{ display:block; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:none; }

/* the two swappable faces share a brief fade so the swap reads as a transition */
.tb2-rows, .tb2-panel{ animation:tb2-fade .16s ease; }
@keyframes tb2-fade{ from{ opacity:0; } to{ opacity:1; } }
.tb2-rows[hidden], .tb2-panel[hidden]{ display:none; }

/* open state: the description occupies the block; capped + internally scrollable */
.tb2-head{ display:flex; justify-content:flex-end; border-bottom:1px solid var(--ink,#1A1A1A); }
/* close control — small mono, same register as the row labels */
.tb2-close{ font:inherit; letter-spacing:.06em; text-transform:uppercase; background:none; border:0; color:var(--ink,#1A1A1A); opacity:.5; cursor:pointer; padding:7px 12px; }
.tb2-close:hover, .tb2-close:focus-visible{ color:var(--oxblood,#6c0000); opacity:1; }
.tb2-close:focus-visible{ outline:2px solid var(--oxblood,#6c0000); outline-offset:-2px; }
.tb2-desc{ max-height:42vh; overflow-y:auto; padding:12px 12px 5px; }
/* serif here is the intentional register-clash (§3) and keeps prose readable (§3) */
.tb2-desc p{ font-family:Georgia, 'Source Serif 4', 'Times New Roman', serif; font-size:12.5px; line-height:1.5; letter-spacing:0; margin:0 0 .8em; color:var(--ink,#1A1A1A); }

/* ---- scroll-content pages: title-block RETURNS IN FLOW at the foot (§10) ----
   On a single-view page aside.tb2 is fixed bottom-right (above). On a scroll-content
   page (catalogue / reading / poem / scroll-content pulse) it instead sits in normal
   flow inside <footer class="sig-foot--flow">, so it returns after a full screen of
   content rather than floating over the column.
   The container layout is defined HERE (not only in signature.css) so it also works on
   concrete.css pages, which never load signature.css — a scroll-content page that wraps
   its block in .sig-foot--flow gets the correct in-flow, right-aligned foot regardless of
   which stylesheet pairs with tb2.css. Right-aligned + top breathing room so the block
   returns AFTER the reading, mirroring its bottom-right resting place. */
.sig-foot--flow{ display:flex; justify-content:flex-end; padding:52px 24px; }
.sig-foot--flow .tb2{ position:static; right:auto; bottom:auto; }

/* ---- orphaned piece-control kept OUT of the block: the sound toggle ----
   Piece functionality (like play/pause), not wayfinding, so it cannot be absorbed.
   Minimal control over the dark canvas; light-on-dark (oxblood-on-dark would fail
   contrast), brightens on interaction. */
.wow-sound{ position:fixed; left:22px; bottom:22px; z-index:600000; }
.wow-sound button{ background:none; border:0; color:#e8e6e2; cursor:pointer; font-size:18px; padding:6px; }
.wow-sound button:hover, .wow-sound button:focus-visible{ color:#ffffff; }
.wow-sound button:focus-visible{ outline:2px solid #ffffff; outline-offset:2px; }

/* ============================================================
   HARDENING against host CSS frameworks (bootstrap, plugins.css, light.css, tv-style …)
   Single-view + scroll-content pulse pages load full frameworks whose global rules bleed into
   the block and break the label|value grid — labels overflow their column into the value cell.
   Two causes seen: (1) an altered rem base on <html> shrinks the rem-width label column;
   (2) host rules on <span>/<button> override the inherited font-size. Fix: pin the load-bearing
   type + layout, element-qualified + !important, and give the label column a PX width (immune to
   the rem base). Same approach signature.css already uses for .sig-tb.
   ============================================================ */
aside.tb2{ font-family:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace !important;
  font-size:10.5px !important; line-height:1.3 !important; letter-spacing:.06em !important;
  font-weight:400 !important; font-style:normal !important; text-transform:none !important;
  box-sizing:border-box !important;
  /* px width (not 17rem) so an altered host rem base can't shrink the block and wrap the values */
  width:272px !important; max-width:calc(100vw - 48px) !important; }
aside.tb2 .tb2-row{ display:grid !important; grid-template-columns:84px 1fr !important;
  box-sizing:border-box !important; width:100% !important; margin:0 !important;
  font:inherit !important; letter-spacing:inherit !important; }
aside.tb2 .tb2-k, aside.tb2 .tb2-v{ font:inherit !important; letter-spacing:inherit !important;
  box-sizing:border-box !important; min-width:0 !important; line-height:1.3 !important; }
aside.tb2 .tb2-k{ text-align:left !important; text-transform:uppercase !important;
  padding:8px 10px !important; overflow:hidden !important; }
aside.tb2 .tb2-v{ text-align:right !important; padding:8px 12px !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
/* keep the ABOUT teaser's left-align + ellipsis intact through the hardening (future ABOUT pieces) */
aside.tb2 .tb2-about .tb2-v{ display:block !important; text-align:left !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }