/* Realignment prototype, 2026-11-06. Layered over index.html by serve.mjs. */

/* Espresso: the dark ground moves from #191811 to the portfolio's espresso pair. */
:root[data-theme="dark"] {
  --ground: #1B150D;
  --card: #241D13;
  --ink: #F2EEE4;
  --ink-2: #C9C0AC;
  --ink-3: #A89F8C;
  --line: #3A3025;
  --line-soft: #2B2318;
  --b-paper: #1B150D;
  --b-field: #241D13;
}

/* Old chrome out: top bar, menu bar, status bar, toolbar, channel column (front). */
.tbar, .menubar, .statusbar, .home-bar { display: none !important; }
body.rl-front #rail { display: none !important; }
#view-rafol { height: 100vh !important; }
#chan-body { height: 100vh !important; padding-left: 104px; box-sizing: border-box; }

/* The rail, at the live portfolio's measured coordinates: x 52, 32px targets, 20px marks, 9.4px gap,
   the stack centred on the window's midpoint and the theme at the foot. */
.rl-left { position: fixed; left: 52px; top: 0; bottom: 0; width: 32px; z-index: 30;
  display: grid; grid-template-rows: minmax(0,1fr) auto minmax(0,1fr); padding: 24px 0; box-sizing: border-box; }
.rl-elsewhere { grid-row: 2; display: flex; flex-direction: column; gap: 9.4px; }
.rl-foot { grid-row: 3; align-self: end; display: flex; flex-direction: column; gap: 9.4px; }
.rl-ic { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; background: none; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.rl-ic:hover, .rl-ic:focus-visible { color: var(--ink); }
.rl-logo { display: block; width: 20px; height: 20px; border-radius: 5px; }
:root[data-theme="dark"] .rl-logo.mono { filter: invert(1); }
.rl-glyph { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rl-tip { position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%); padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--ground); color: var(--ink);
  white-space: nowrap; pointer-events: none; opacity: 0; font-size: 14px; line-height: 1.4; transition: opacity .12s; }
.rl-ic:hover .rl-tip, .rl-ic:focus-visible .rl-tip { opacity: 1; }

/* Front page: one centred column, Thoughts on the right from 1280px. */
body.rl-front .gridwrap, body.rl-front #grid { width: 100%; }
body.rl-front #home { max-width: 700px; margin: 0 auto; padding: 48px 0 120px; }
@media (min-width: 1280px) {
  body.rl-front.rl-has-side #home { margin-left: max(0px, calc(50% - 548px)); }
}
.rl-mast h1 { text-align: center; font-size: 40px; letter-spacing: -.02em; margin: 0 0 28px; font-weight: 650; color: var(--ink); line-height: 1.1; }
.rl-intro { display: grid; grid-template-columns: 132px 1fr; gap: 22px; align-items: start; font-size: 15px; line-height: 1.5; }
.rl-intro img { width: 132px; height: 132px; object-fit: cover; object-position: 88% 67%; border-radius: 18px; border: 1px solid var(--line); }
.rl-intro p { margin: 0 0 8px; } .rl-intro ul { margin: 0; padding-left: 18px; } .rl-intro li { margin: 0 0 6px; }
.rl-more { font: inherit; font-size: 13px; color: var(--ink-3); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rl-sub { display: flex; gap: 8px; align-items: center; margin: 28px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.rl-sub input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); color: var(--ink); }
.rl-sub button { font: inherit; font-size: 15px; font-weight: 600; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--ink); color: var(--ground); cursor: pointer; }
.rl-sub a { font-size: 13px; color: var(--ink-3); padding: 0 6px; }
.rl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 4px; }
.rl-chips button { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; display: flex; gap: 6px; align-items: center; }
.rl-chips button i { width: 8px; height: 8px; border-radius: 50%; }
.rl-chips button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.rl-tchip { display: none !important; }
@media (max-width: 1279px) { .rl-tchip { display: flex !important; } }
.rl-tinline { display: none; }
body.rl-tmode .rl-tinline { display: block; }
body.rl-tmode #home .rk { display: none; }

/* The rack, flattened to rows: thumbnail left, bold title, dek, one meta line. */
#home .rk { width: auto !important; max-width: none !important; }
#home .rk-plate { all: unset; display: block; font-size: 22px; font-weight: 650; letter-spacing: -.01em; margin: 30px 0 6px; color: var(--ink); }
#home .rk-plate * { all: unset; }
#home .rk-item, #home .rk-item.front { margin: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
#home a.rk-cover, #home a.rk-cover.front { display: grid !important; grid-template-columns: 72px max-content max-content 1fr; column-gap: 6px; row-gap: 2px;
  padding: 10px 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--ink) !important; height: auto !important; min-height: 0 !important; }
#home .rk-band, #home .rk-more, #home .rk-more-in, #home .rk-tags { display: contents !important; }
#home .rk-thumb, #home .rk-front-fig { margin-right: 10px !important; grid-column: 1; grid-row: 1 / span 3; width: 72px !important; height: 72px !important; border-radius: 14px; border: 1px solid var(--line) !important;
  overflow: hidden; background: var(--card) !important; position: relative !important; margin: 0 !important; box-shadow: none !important; transform: none !important; }
#home .rk-front-fig { display: block !important; }
#home .rk-thumb::before, #home .rk-thumb::after, #home .rk-front-fig::before, #home .rk-front-fig::after, #home a.rk-cover::before, #home a.rk-cover::after { display: none !important; }
#home .rk-thumb img, #home .rk-front-fig img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#home .rk-title { grid-column: 2 / -1; grid-row: 1; font-weight: 700 !important; font-size: 16px !important; line-height: 1.35 !important; color: var(--ink) !important; display: flex; align-items: center; gap: 8px; margin: 0 !important; letter-spacing: 0 !important; }
#home .rk-dek { grid-column: 2 / -1; grid-row: 2; font-size: 15px !important; color: var(--ink) !important; opacity: .85; margin: 0 !important; }
#home .rk-meta, #home .cap-u, #home .cap-k, #home .cap-d { grid-row: 3; font: 12.5px/1.5 Geist, system-ui, sans-serif !important; color: var(--ink-3) !important; background: none !important;
  letter-spacing: 0 !important; text-transform: none !important; padding: 0 !important; border: 0 !important; opacity: 1 !important; visibility: visible !important; }
#home .cap-k, #home .cap-u, #home .rk-meta { align-self: center; line-height: 18px !important; }
#home .cap-k { grid-column: 2; } #home .cap-d { display: none !important; } #home .cap-u { grid-column: 3; } #home .rk-meta { grid-column: 4; display: flex; align-items: center; gap: 6px; }
#home .cap-k::after, #home .cap-u::after { content: ' ·'; }
#home .rk-meta .rl-dot { margin-left: 2px; }
#home .rk-meta { text-transform: none !important; }
#home .rk-meta::first-letter { text-transform: none; }
#home .blk-edit { display: none !important; }
.rl-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.rl-new { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); display: inline-block; flex: none; }

/* The rail's hover preview, the portfolio's .edi-clip: beside the icon and level with
   it, held on screen by the layer's edges. It carries the link's name, so the small
   label stands down wherever a pointer can hover. */
.rl-clip-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.rl-clip { --clip-w: 460px; --clip-h: 322px; position: absolute;
  left: min(calc(var(--clip-x) + 10px), calc(100% - var(--clip-w) - 20px));
  top: clamp(20px, calc(var(--clip-y) - var(--clip-h) / 2), calc(100% - var(--clip-h) - 20px));
  display: grid; grid-template-rows: minmax(0, 1fr) auto; width: var(--clip-w); height: var(--clip-h); overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: var(--ground); box-shadow: 0 14px 36px rgba(0, 0, 0, .32);
  animation: rl-clip-in 140ms cubic-bezier(.22, .61, .36, 1); }
.rl-clip video, .rl-clip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rl-clip-name { padding: 6px 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; }
@keyframes rl-clip-in { from { opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .rl-ic-clip .rl-tip { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .rl-clip { animation: none; } }

/* Rows on hover, as the portfolio's: the title dims and the thumbnail's edge darkens. */
#home a.rk-cover .rk-title, .rl-rows b, body.rl-reading .related .r-t { transition: opacity 120ms cubic-bezier(.22, .61, .36, 1); }
#home a.rk-cover .rk-thumb, #home a.rk-cover .rk-front-fig, .rl-th { transition: border-color 120ms cubic-bezier(.22, .61, .36, 1); }
#home a.rk-cover:hover .rk-title, .rl-rows a:hover b, body.rl-reading .related button:hover .r-t { opacity: .55; }
#home a.rk-cover:hover .rk-thumb, #home a.rk-cover:hover .rk-front-fig, .rl-rows a:hover .rl-th, body.rl-reading .related button:hover .rl-th { border-color: var(--ink-3) !important; }

/* Thoughts column */
.rl-side { display: none; }
@media (min-width: 1280px) {
  body.rl-front.rl-has-side .rl-side { display: block; position: fixed; top: 0; bottom: 0; width: 340px; overflow-y: auto; padding: 56px 0 60px; box-sizing: border-box;
    left: calc(max(104px, 104px + (100vw - 104px - 1096px) / 2) + 756px); z-index: 29; scrollbar-width: none; }
  body.rl-front.rl-has-side #home { margin-left: max(0px, calc((100% - 1096px) / 2)); }
}
.rl-side h2 { font-size: 22px; font-weight: 650; margin: 0 0 14px; display: flex; justify-content: space-between; align-items: baseline; color: var(--ink); letter-spacing: -.01em; }
.rl-side h2 small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.rl-tl { list-style: none; margin: 0; padding: 0; }
.rl-tl li { border-top: 1px solid var(--line); }
.rl-tl a { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 9px 0; color: inherit; text-decoration: none; }
.rl-tl b { transition: opacity 120ms cubic-bezier(.22, .61, .36, 1); }
.rl-tl a:hover b { opacity: .55; }
#home .rk-side { display: none !important; }
#home .rk-split { display: block !important; }
.rl-tchip[hidden] { display: none !important; }
.rl-tl time { font-size: 12.5px; color: var(--ink-3); padding-top: 2px; font-variant-numeric: tabular-nums; }
.rl-tl b { display: block; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.rl-tl span { display: block; font-size: 13.5px; color: var(--ink); opacity: .8; margin-top: 2px; line-height: 1.4; }
.rl-tl em { font-style: normal; font-size: 11px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; margin-top: 4px; display: inline-block; }

/* Reading: pinned back pill, the contents column restyled, the old back row gone. */
.rl-back { display: none; }
body.rl-reading .rl-back { display: inline-flex; position: fixed; top: 18px; left: 112px; z-index: 31; gap: 6px; align-items: center;
  font: 600 13px/1 Geist, system-ui, sans-serif; padding: 9px 14px; border-radius: 999px; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.12); cursor: pointer; }
.rl-back kbd { font: 11px ui-monospace, monospace; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; }
body.rl-reading .backrow { visibility: hidden; height: 28px; }
body.rl-reading #toc-rail { background: none !important; border: 0 !important; padding-top: 76px !important; box-shadow: none !important; }
body.rl-reading #toc-rail h2 { font: 600 13px/1.4 Geist, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; border: 0 !important; }
body.rl-reading #toc-rail a, body.rl-reading #toc-rail button { color: var(--ink-3) !important; }
body.rl-reading #stage, body.rl-reading #article-pane, body.rl-reading .art { background: var(--ground) !important; border: 0 !important; box-shadow: none !important; }
body.rl-reading #rail .chcell, body.rl-reading #rail .chbtn { display: none !important; }
body.rl-reading .art-kicker { letter-spacing: .04em !important; text-transform: lowercase !important; font-weight: 400 !important; color: var(--ink-3) !important; }
body.rl-reading .art-dek { font-family: Geist, system-ui, sans-serif !important; font-style: normal !important; font-size: 18px !important; color: var(--ink) !important; opacity: .8; }
body.rl-reading .art .pbtn { border-radius: 999px !important; box-shadow: none !important; border: 1px solid var(--line) !important; background: none !important; color: var(--ink) !important; }

.rl-end { max-width: 512px; margin: 44px auto 80px; padding-top: 26px; border-top: 1px solid var(--line); }
.rl-sec { font-size: 22px; font-weight: 650; margin: 34px 0 8px; display: flex; gap: 8px; align-items: center; color: var(--ink); letter-spacing: -.01em; }
.rl-sec i { width: 10px; height: 10px; border-radius: 50%; }
.rl-rows { list-style: none; margin: 0; padding: 0; }
.rl-rows a { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 10px 0; color: var(--ink); text-decoration: none; }
.rl-th { width: 72px; height: 72px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: var(--card); }
.rl-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-rows b { display: block; font-size: 16px; line-height: 1.35; }
.rl-dek { display: block; font-size: 15px; opacity: .85; margin: 2px 0 4px; }
.rl-rm { display: block; font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 760px) {
  .rl-left { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 56px; padding: 0 10px; display: flex; justify-content: space-around; background: var(--ground); border-top: 1px solid var(--line); }
  .rl-left { justify-content: space-between; align-items: center; padding: 0 6px; }
  .rl-elsewhere, .rl-foot { flex-direction: row; gap: 0; align-self: center; }
  .rl-left .rl-ic { width: 30px; height: 30px; }
  .rl-tip { display: none; }
  #chan-body { padding-left: 0; padding-bottom: 56px; }
  body.rl-front #home { padding: 32px 18px 90px; box-sizing: border-box; width: 100%; }
  .rl-sub { padding: 10px; } .rl-sub button { padding: 8px 12px; } .rl-sub a { padding: 0 2px; }
  body.rl-reading .rl-back { left: 14px; top: 12px; } .rl-back kbd { display: none; }
  .rl-intro { grid-template-columns: 88px 1fr; } .rl-intro img { width: 88px; height: 88px; }
  .rl-mast h1 { font-size: 32px; }
}

/* App and artifact pages: wide rounded cover, rounded buttons, related essays as rows. */
body.rl-reading .proj-vig { width: 100% !important; max-width: none !important; margin: 0 0 20px !important; border: 0 !important; box-shadow: none !important; }
body.rl-reading .proj-vig img { width: 100% !important; height: auto !important; max-height: 360px; object-fit: cover !important; border-radius: 16px; border: 1px solid var(--line); display: block; }
body.rl-reading .proj-visit a, body.rl-reading .proj-visit button { border-radius: 12px !important; box-shadow: none !important; background: var(--ink) !important; color: var(--ground) !important; border: 0 !important; padding: 9px 16px !important; }
body.rl-reading .art-tags .chip { border-radius: 999px !important; box-shadow: none !important; border: 1px solid var(--line) !important; background: none !important; color: var(--ink) !important; font-weight: 500 !important; }
body.rl-reading .related { border-top: 1px solid var(--line) !important; }
body.rl-reading .related h2 { font: 650 22px/1.3 Geist, system-ui, sans-serif !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ink) !important; }
body.rl-reading .related button { display: grid !important; grid-template-columns: 72px 1fr; column-gap: 16px; border: 0 !important; padding: 10px 0 !important; text-align: left; background: none !important; }
body.rl-reading .related button .rl-th { grid-row: 1 / span 3; }
body.rl-reading .related .r-t { font-weight: 700 !important; font-size: 16px !important; color: var(--ink) !important; }
body.rl-reading .related .r-d { font-size: 15px !important; color: var(--ink) !important; opacity: .85; }
body.rl-reading .related .r-s { font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink-3) !important; }