/* ═══════════════════════════════════════════════════════════════════ HUMDRUM INDUSTRIES — brutalist terminal Black/white/gray. Blue (#0F80EA) is the single pop. ═══════════════════════════════════════════════════════════════════ */ /* ──── @font-face — Awke (display) + Untitled Sans (body) ──── */ @font-face { font-family: "Awke"; src: url("/fonts/Awke-Thin.woff2") format("woff2"); font-weight: 100 300; font-style: normal; font-display: swap; } @font-face { font-family: "Awke"; src: url("/fonts/Awke-Regular.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: "Awke"; src: url("/fonts/Awke-Bold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-light-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-regular-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-medium-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Untitled Sans"; src: url("/fonts/untitled-sans-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } :root { /* shared, non-theme tokens */ --warn: #d4a017; --bad: #c44; --good: #4ec27a; --mono: "Berkeley Mono","JetBrains Mono","IBM Plex Mono","SF Mono", ui-monospace,Menlo,Consolas,monospace; --sans: "Untitled Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --display: "Awke", "Iowan Old Style", "Charter", Georgia, serif; --serif: "Iowan Old Style","Charter","Georgia",serif; --step: 8px; --gutter: 24px; } /* ═══════════════════════════════════════════════════════════════════ THEMES — selected via [data-theme] on . Default = humdrum. ═══════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="humdrum"] { --bg: #f5f3ee; --bg-soft: #ecead4; --bg-card: #ffffff; --bg-stripe: #efede6; --border: #1a1a1a; --border-hot: #000; --text: #0a0a0a; --text-mute: #555; --text-faint: #999; --accent: #0f80ea; --accent-dim: #0a4d8c; --selection: #0f80ea; } :root[data-theme="humdrum-dark"] { --bg: #1f1d1a; --bg-soft: #25231f; --bg-card: #282622; --bg-stripe: #2c2a26; --border: #32302c; --border-hot: #4a4740; --text: #e8e5dd; --text-mute: #a8a49b; --text-faint: #6d6a63; --accent: #0f80ea; --accent-dim: #0a4d8c; --selection: #0f80ea; } :root[data-theme="flexoki"] { --bg: #fffcf0; --bg-soft: #f7f4e3; --bg-card: #f2f0e5; --bg-stripe: #ecead4; --border: #cecdc3; --border-hot: #100f0f; --text: #100f0f; --text-mute: #6f6e69; --text-faint: #b7b5ac; --accent: #24837b; --accent-dim: #2f968d; --selection: #ddf1e4; } :root[data-theme="flexoki-dark"] { --bg: #100f0f; --bg-soft: #181716; --bg-card: #1c1b1a; --bg-stripe: #232220; --border: #282726; --border-hot: #403e3c; --text: #cecdc3; --text-mute: #878580; --text-faint: #575653; --accent: #3aa99f; --accent-dim: #24837b; --selection: #122f2c; } :root[data-theme="uchu"] { --bg: oklch(99.4% 0 0); --bg-soft: oklch(97% 0.003 286.35); --bg-card: oklch(95.57% 0.003 286.35); --bg-stripe: oklch(96% 0.003 286.35); --border: oklch(91.87% 0.003 264.54); --border-hot: oklch(84.61% 0.004 286.31); --text: oklch(14.38% 0.007 256.88); --text-mute: oklch(43.87% 0.005 271.3); --text-faint: oklch(69.17% 0.004 247.88); --accent: oklch(58.47% 0.181 302.06); --accent-dim: oklch(49.39% 0.215 298.31); --selection: oklch(89.1% 0.046 305.24); } :root[data-theme="uchu-dark"] { --bg: oklch(14.38% 0.007 256.88); --bg-soft: oklch(20% 0.006 258.36); --bg-card: oklch(25.11% 0.006 258.36); --bg-stripe: oklch(22% 0.006 258.36); --border: oklch(35.02% 0.005 236.66); --border-hot: oklch(43.87% 0.005 271.3); --text: oklch(91.87% 0.003 264.54); --text-mute: oklch(69.17% 0.004 247.88); --text-faint: oklch(52.79% 0.005 271.32); --accent: oklch(68.5% 0.136 303.78); --accent-dim: oklch(58.47% 0.181 302.06); --selection: oklch(36.01% 0.145 298.35); } :root[data-theme="eink"] { --bg: #ffffff; --bg-soft: #ffffff; --bg-card: #ffffff; --bg-stripe: #ffffff; --border: #000000; --border-hot: #000000; --text: #000000; --text-mute: #000000; --text-faint: #000000; --accent: #000000; --accent-dim: #000000; --selection: #000000; --good: #000000; --warn: #000000; --bad: #000000; } /* eink — kill motion, flatten effects */ :root[data-theme="eink"] .led, :root[data-theme="eink"] .pulse, :root[data-theme="eink"] .blink, :root[data-theme="eink"] .cursor, :root[data-theme="eink"] .marquee span { animation: none !important; box-shadow: none !important; } :root[data-theme="eink"] body::before { display: none; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100vw; } /* Headings — Awke display face. */ h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 500; letter-spacing: -0.005em; line-height: 1.15; } /* Mono zones — system chrome, code, and tabular UI. Descendants inherit. */ .topbar, .topbar *, .botbar, .botbar *, .sidebar, .sidebar *, .rightrail, .rightrail *, .terminal, .terminal *, .receipt, .receipt *, .marquee, .marquee *, .ascii, .ascii *, .ascii-title, .ascii-title *, .ascii-pet, .tag, .sec-label, .sec-label *, .kicker, table, th, td, pre, code, kbd, samp, .posts li .date, .posts li .id, .posts li .read, .recent, .recent *, .clients a, .foot, .foot *, .frame-titlebar, .frame-titlebar *, .frame-statusbar, .frame-statusbar *, .theme-picker { font-family: var(--mono); } /* CRT-ish scanlines, very subtle */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px ); z-index: 1000; mix-blend-mode: overlay; } ::selection { background: var(--accent); color: #fff; } a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { background: var(--accent); color: #fff; text-decoration: none; } /* ────────────────────────────────────────────── Layout — three-pane: top bar, tree, content ────────────────────────────────────────────── */ .topbar { border-bottom: 1px solid var(--border); background: var(--bg-soft); padding: 6px 12px; display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--text-mute); position: sticky; top: 0; z-index: 10; } /* Mobile menu button — hidden on desktop, shown at <=720px via media block. */ .menu-toggle { display: none; } .sidebar-backdrop { display: none; } .topbar .brand { color: var(--text); font-weight: 600; letter-spacing: 0.04em; } .topbar .brand .blink { color: var(--accent); } .topbar .meta { margin-left: auto; display: flex; gap: 14px; } .topbar .meta span::before { content: "["; color: var(--text-faint); } .topbar .meta span::after { content: "]"; color: var(--text-faint); } .shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 33px); } /* Right rail joins the grid at large widths. Shell centers in viewport once it has fixed widths everywhere, so very-wide screens just gain equal margin on both sides instead of awkward extra column space. */ @media (min-width: 1400px) { .shell { grid-template-columns: 260px minmax(0, 920px) 320px; max-width: 1500px; margin: 0 auto; } } .sidebar { border-right: 1px solid var(--border); padding: 16px 12px; background: var(--bg); position: sticky; top: 33px; align-self: start; max-height: calc(100vh - 33px); overflow: auto; } /* Right rail — injected by theme.js, only renders at >=1400px. */ .rightrail { border-left: 1px solid var(--border); padding: 18px 14px 60px; background: var(--bg); position: sticky; top: 33px; align-self: start; max-height: calc(100vh - 33px); overflow: auto; font-size: 12px; line-height: 1.55; color: var(--text-mute); display: none; } @media (min-width: 1400px) { .rightrail { display: block; } } .rightrail h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-faint); font-weight: 400; } .rightrail h4::before { content: "// "; color: var(--accent); } .rightrail h4:not(:first-child) { margin-top: 22px; } .rightrail .now-row { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 2px 0; font-family: var(--mono); } .rightrail .now-row .k { color: var(--text-faint); } .rightrail .now-row .v { color: var(--text); } .rightrail .now-row .v .hot { color: var(--accent); } .rightrail .links { list-style: none; padding: 0; margin: 0; } .rightrail .links li { padding: 2px 0; } .rightrail .links a { color: var(--text); text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; } .rightrail .links a:hover { color: var(--accent); background: transparent; } .rightrail .links .arr { color: var(--text-faint); width: 1ch; } /* Fish + bubbles — JS-driven position. CSS handles bob + styling. */ .rightrail .ascii-pet-tank { position: relative; overflow: hidden; height: 88px; margin: 0 0 12px; background: transparent; border: 0; padding: 0; } .rightrail .ascii-pet-swimmer { position: absolute; top: 0; left: -200px; width: max-content; height: 100%; will-change: left, transform; transform-origin: 50% 50%; } pre.ascii-pet { font-family: var(--mono); white-space: pre; color: var(--accent); font-size: 11px; line-height: 1.1; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; outline: none; overflow: visible; position: absolute; bottom: 0; left: 0; animation: fish-bob 1.6s ease-in-out infinite; } @keyframes fish-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } .rightrail .bubble { position: absolute; font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--text-mute); pointer-events: none; will-change: bottom, left, opacity; } .rightrail .recent { list-style: none; padding: 0; margin: 0; font-family: var(--mono); } .rightrail .recent li { padding: 3px 0; border-bottom: 1px dashed var(--border); } .rightrail .recent li:last-child { border-bottom: 0; } .rightrail .recent .date { color: var(--text-faint); font-size: 11px; } .rightrail .recent .title { display: block; } .rightrail .recent a { color: var(--text); text-decoration: none; } .rightrail .recent a:hover { color: var(--accent); background: transparent; } .rightrail .fortune { border-left: 2px solid var(--accent); padding: 6px 10px; background: var(--bg-card); font-size: 11.5px; line-height: 1.5; color: var(--text); margin-top: 4px; } .rightrail .fortune::before { content: "$ "; color: var(--accent); } .sidebar h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-faint); font-weight: 400; } .sidebar h4::before { content: "// "; color: var(--accent); } .sb-links { list-style: none; padding: 0; margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.7; } .sb-links li { padding: 1px 0; } .sb-links a { color: var(--text); text-decoration: none; display: inline-flex; align-items: baseline; gap: 6px; } .sb-links a:hover { color: var(--accent); background: transparent; } .sb-links .arr { color: var(--text-faint); width: 1ch; } .main { padding: 28px 36px 96px; max-width: 920px; } /* ────────────────────────────────────────────── Responsive — small + medium screens ────────────────────────────────────────────── */ @media (max-width: 980px) { .topbar { padding: 6px 10px; gap: 10px; flex-wrap: wrap; font-size: 11px; } .topbar .brand { font-size: 12px; } .topbar > span.dim { display: none; } /* breadcrumb */ } @media (max-width: 720px) { .shell { grid-template-columns: 1fr; } /* ── Mobile sidebar = slide-in drawer behind a menu button ── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(82vw, 320px); max-height: none; z-index: 9998; background: var(--bg); border-right: 1px solid var(--border); border-bottom: 0; padding: 14px 16px 24px; overflow-y: auto; overflow-x: hidden; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 4px 0 24px rgba(0,0,0,0.2); } html[data-menu-open="1"] .sidebar { transform: translateX(0); } .sidebar h4 { margin: 4px 0; } pre.sidebar-logo { font-size: 11px; line-height: 1; margin: 0 0 14px; } /* Backdrop — JS injects it; visible when menu is open. */ .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9997; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } html[data-menu-open="1"] .sidebar-backdrop { opacity: 1; pointer-events: auto; } /* Hamburger button — sits in topbar on mobile. */ .menu-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--text); color: var(--text); width: 32px; height: 26px; padding: 0; margin-right: 6px; cursor: pointer; font: 700 14px/1 var(--mono); } .menu-toggle:hover { background: var(--text); color: var(--bg); } .main { padding: 16px 14px 72px; max-width: 100%; width: 100%; min-width: 0; overflow-x: hidden; } .shell { width: 100%; max-width: 100vw; } /* Hard containment — anything in main that has no other rule. */ .main * { max-width: 100%; } .main img, .main video, .main iframe { height: auto; } /* Break long words, URLs, emails. */ .main p, .main li, .main h1, .main h2, .main h3, .main h4, .main blockquote, .main .dim, .main .sub, .main .lead, .receipt, .receipt * { word-break: break-word; overflow-wrap: anywhere; } /* Show the hamburger only at this breakpoint. */ .menu-toggle { display: inline-flex; } /* Hero — tighten padding so the page still breathes on phones */ .hero { padding: 16px 14px 18px; } .hero .kicker { font-size: 10px; letter-spacing: 0.18em; } .hero .sub { font-size: 13px; } /* ASCII title shrinks to fit narrow viewports without overflow */ .ascii-title { font-size: clamp(4px, 1.6vw, 8px); line-height: 1.05; overflow-x: auto; overflow-y: hidden; max-width: 100%; } /* Cards stack single-column on phones — kill all tilt transforms */ .grid { grid-template-columns: 1fr !important; gap: 10px; } .card, .card.tilt-l, .card.tilt-r, .card.tilt-down { transform: none !important; width: 100%; max-width: 100%; } .clients { grid-template-columns: 1fr 1fr; } /* Long ASCII boxes — keep readable, allow horizontal scroll if needed */ .box, .ascii { font-size: 10.5px; overflow-x: auto; overflow-y: hidden; max-width: 100%; } pre { max-width: 100%; overflow-x: auto; } pre, .ascii-title { -webkit-overflow-scrolling: touch; } /* Landscape — shrinks + scrolls on small screens */ pre.ascii-landscape { font-size: clamp(5px, 1.8vw, 10px); } /* CTA bar wraps */ .cta { padding: 12px 12px; gap: 8px; flex-wrap: wrap; } .cta .btn { padding: 6px 10px; font-size: 11px; } /* Bottom bar — shrink + drop ancillary segments on phones */ body { padding-bottom: 30px; } .botbar { padding: 5px 10px; font-size: 10.5px; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .botbar .seg.right { display: none; } /* Drop non-essential segments — keep status + clock + theme */ .botbar .seg:nth-of-type(n+5) { display: none; } .botbar .sep:nth-of-type(n+3) { display: none; } /* Footer wraps */ .foot { flex-direction: column; gap: 4px; } .foot .sig { margin-left: 0; } /* Receipt — phone-friendly */ .main-contact { max-width: 100%; } .receipt { padding: 20px 16px 16px; font-size: 12.5px; max-width: 100%; overflow: hidden; } .receipt-barcode { font-size: 8px; overflow: hidden; } /* Marquee containment */ .marquee { max-width: 100%; overflow: hidden; } /* Page tabs wrap on narrow */ .page-tabs { gap: 2px; } .page-tab { padding: 4px 10px; font-size: 11px; } /* Terminal — fit mobile */ .terminal { font-size: 11px; max-width: 100%; overflow-x: auto; } /* Definition boxes & venn — fit width */ .ascii { max-width: 100%; } /* Highlighter marks — wrap cleanly */ mark.hl, .hl { white-space: normal; } /* Hide animated scanlines on mobile to reduce jitter */ body::before { display: none; } } @media (max-width: 420px) { .topbar .brand { letter-spacing: 0.02em; } .clients { grid-template-columns: 1fr; } .receipt { font-size: 12px; } .sig-line { font-size: 18px; } } /* ────────────────────────────────────────────── Tree nav ────────────────────────────────────────────── */ .tree, .tree ul { list-style: none; padding: 0; margin: 0; } .tree ul { padding-left: 12px; border-left: 1px dotted var(--border-hot); margin-left: 6px; } .tree li { position: relative; padding: 1px 0; } .tree .node { display: inline-flex; align-items: baseline; gap: 4px; cursor: pointer; user-select: none; padding: 0 4px; } .tree .node:hover { background: var(--bg-card); } .tree .node.is-active { background: var(--accent); color: #fff; } .tree .node.is-active a { color: #fff; } .tree .glyph { color: var(--text-faint); width: 1ch; display: inline-block; } .tree .node.is-active .glyph { color: #fff; } .tree .label { color: var(--text); } .tree .label a { color: inherit; text-decoration: none; } .tree .label a:hover { background: transparent; color: inherit; text-decoration: underline; } .tree .folder > .node .label { color: var(--text); } .tree .file > .node .label { color: var(--text-mute); } .tree li.collapsed > ul { display: none; } /* ────────────────────────────────────────────── Typography in main ────────────────────────────────────────────── */ h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; margin: 1.6em 0 0.5em; } h1 { font-size: 38px; font-weight: 600; } h1::before { content: "# "; color: var(--accent); font-family: var(--mono); font-weight: 700; } h2 { font-size: 26px; } h2::before { content: "## "; color: var(--accent); font-family: var(--mono); font-weight: 700; } h3 { font-size: 19px; } h3::before { content: "### "; color: var(--accent); font-family: var(--mono); font-weight: 700; } p, ul, ol { font-size: 14px; line-height: 1.65; } p > code, li > code { background: var(--bg-card); padding: 1px 5px; border: 1px solid var(--border); } hr { border: 0; border-top: 1px dashed var(--border-hot); margin: 28px 0; } blockquote { border-left: 3px solid var(--accent); padding: 4px 14px; margin: 16px 0; color: var(--text-mute); background: var(--bg-card); } pre { background: var(--bg-card); border: 1px solid var(--border); padding: 12px 14px; overflow: auto; font-size: 12.5px; line-height: 1.5; } /* ────────────────────────────────────────────── Terminal / boot ────────────────────────────────────────────── */ .terminal { border: 1px solid var(--border-hot); background: var(--bg-card); padding: 14px 16px; margin: 12px 0 28px; position: relative; } .terminal .bar { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--border); padding-bottom: 6px; margin-bottom: 10px; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.15em; } .terminal .bar .dots { color: var(--text-mute); } .terminal .out { white-space: pre-wrap; font-size: 13px; } .terminal .out .ok { color: var(--good); } .terminal .out .warn { color: var(--warn); } .terminal .out .bad { color: var(--bad); } .terminal .out .key { color: var(--accent); } .terminal .out .dim { color: var(--text-mute); } .prompt-line { display: flex; gap: 6px; align-items: baseline; } .prompt-line .ps1 { color: var(--accent); white-space: nowrap; } .prompt-line input { background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; flex: 1; caret-color: var(--accent); } .cursor { display: inline-block; width: 0.6ch; background: var(--accent); color: var(--accent); margin-left: 1px; animation: blink 1.05s steps(2, start) infinite; } @keyframes blink { to { visibility: hidden; } } /* ────────────────────────────────────────────── Cards, marquees, disheveled bits ────────────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0 28px; } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } } .card { border: 1px solid var(--border-hot); padding: 14px; background: var(--bg-card); position: relative; } .card h3 { margin-top: 0; } .card h3::before { content: none; } .card .tag { position: absolute; top: -8px; left: 8px; background: var(--bg); padding: 0 6px; color: var(--text-faint); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; } .card.tilt-l { transform: rotate(-0.4deg); } .card.tilt-r { transform: rotate(0.5deg); } .card.tilt-down { transform: translateY(6px) rotate(0.2deg); } .marquee { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 0; overflow: hidden; font-size: 12px; color: var(--text-mute); margin: 28px 0; white-space: nowrap; } .marquee span { display: inline-block; padding-left: 100%; animation: scroll 40s linear infinite; } .marquee span b { color: var(--accent); font-weight: 400; } @keyframes scroll { to { transform: translateX(-100%); } } .ascii { font-family: var(--mono); white-space: pre; color: var(--text-mute); line-height: 1.1; font-size: 12px; overflow: hidden; } .ascii .hi { color: var(--accent); } /* hero block — single shared white-card surface. The OUTER frame (thin black/border line) wraps the whole card; the ASCII ╔═╗ inside is a typographic flourish, not a second container. */ .hero { border: 1px solid var(--border); background: var(--bg-card); padding: 22px 28px 24px; margin: 14px 0 26px; position: relative; } .hero .kicker { margin-bottom: 10px; } .hero .sub { margin: 16px 0 12px; max-width: 60ch; } .hero-prompt { margin: 0; } .hero .kicker { color: var(--accent); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; } .hero h1 { margin: 6px 0 6px; font-size: 42px; letter-spacing: -0.02em; } .hero h1::before { content: none; } .hero .sub { color: var(--text-mute); max-width: 60ch; } .hero .stamp { position: absolute; top: 14px; right: 14px; border: 1px solid var(--accent); color: var(--accent); padding: 2px 8px; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; transform: rotate(4deg); z-index: 2; } /* ASCII title — HUMDRUM letters in text color, INDUSTRIES/est in accent + muted. Overrides the generic 
 rule so the title sits flush in the hero card
   with no second border, padding, or background. */
.ascii-title {
  font-family: var(--mono);
  white-space: pre;
  line-height: 1;
  color: var(--accent);
  font-weight: 700;
  margin: 4px 0 0;
  max-width: 100%;
  overflow-x: auto;
  font-size: clamp(7px, 1.5vw, 12px);
  letter-spacing: 0;
  border: 0;
  background: transparent;
  padding: 0;
}
.ascii-title .hi    { color: var(--text); }
.ascii-title .muted { color: var(--text-mute); font-weight: 400; }

/* generic ASCII content boxes */
.box {
  font-family: var(--mono);
  white-space: pre;
  line-height: 1.25;
  color: var(--text);
  font-size: 12.5px;
  margin: 18px 0;
  overflow-x: auto;
}
.box .hot { color: var(--accent); }
.box .dim { color: var(--text-mute); }
.box .faint { color: var(--text-faint); }

/* numbered ASCII section labels */
.sec-label {
  font-family: var(--mono);
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1.2;
  margin: 36px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}
.sec-label .num { color: var(--accent); flex-shrink: 0; }
.sec-label .sec-rule {
  flex: 1 1 auto;
  min-width: 12px;
  height: 0;
  border-top: 1px solid currentColor;
  opacity: 0.4;
  overflow: hidden;   /* hide any literal dash overflow until HTML migrates */
  white-space: nowrap;
}
.sec-label .sec-text { flex-shrink: 0; }

/* ───── prose info box — wraps naturally, replaces ASCII-framed pre.box
   for content that isn't code/tabular. Same visual feel: tight border,
   mono font, accent mark on left. */
.info-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 14px 16px;
  margin: 16px 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-mute);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.info-box .info-mark { color: var(--accent); flex-shrink: 0; font-weight: 700; }
.info-box p { margin: 0 0 8px; }
.info-box p:last-child { margin-bottom: 0; }
.info-box .info-dt {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* Stack variant — no info-mark on the side, content fills the box. */
.info-box.info-box-stack { display: block; }
.info-box .dim { color: var(--text-faint); }

/* CTA bar */
.cta {
  border: 1px solid var(--accent);
  padding: 14px 16px;
  margin: 28px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  background: var(--bg-card);
}
.cta .lead { color: var(--text); }
.cta .btn {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12px;
}
.cta .btn:hover { background: transparent; color: var(--accent); }
.cta .btn.ghost { background: transparent; color: var(--accent); }
.cta .btn.ghost:hover { background: var(--accent); color: #fff; }
.cta .or { color: var(--text-faint); }

/* client wall — each tile carries its brand color via --c (border + text)
   and --on (on-brand text color used on hover) inline. */
.clients {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 16px 0 28px;
  font-family: var(--mono);
}
.clients a, .clients span {
  --c: var(--text-mute);
  --on: var(--bg-card);
  position: relative;
  border: 2px solid var(--c);
  background: var(--bg-card);
  padding: 14px 12px;
  text-align: center;
  color: var(--c);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 120ms linear, color 120ms linear, transform 120ms ease;
  overflow: hidden;
}
.clients a::before {
  content: "■";
  display: inline-block;
  margin-right: 8px;
  color: var(--c);
  transition: color 120ms linear;
}
.clients a:hover {
  background: var(--c);
  color: var(--on);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--c);
}
.clients a:hover::before { color: var(--on); }
.clients span {
  border-style: dashed;
  font-weight: 400;
  letter-spacing: 0.15em;
}
.clients span::before { content: "· "; color: var(--text-faint); }
.clients span::after  { content: " ·"; color: var(--text-faint); }

/* status pills (legacy) */
.pill {
  display: inline-block;
  border: 1px solid var(--border-hot);
  padding: 1px 7px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.pill.on   { color: var(--good); border-color: var(--good); }
.pill.warn { color: var(--warn); border-color: var(--warn); }
.pill.hot  { color: var(--accent); border-color: var(--accent); }

/* sidebar status lights — LED-style indicators */
.status-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
}
.status-list li {
  display: grid;
  grid-template-columns: 14px auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  line-height: 1.2;
  border-bottom: 1px dashed var(--border);
}
.status-list li:last-child { border-bottom: 0; }
.status-list .status-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.status-list .status-detail {
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.25),
    0 0 0 1px var(--border-hot);
  flex-shrink: 0;
  display: inline-block;
  position: relative;
}
.led-off    { background: #2a2a2a; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), 0 0 0 1px var(--border-hot); }
.led-green  { background: var(--good); box-shadow: 0 0 6px var(--good), 0 0 12px rgba(78,194,122,0.4), inset 0 0 0 1px rgba(0,0,0,0.2); }
.led-red    { background: var(--bad); box-shadow: 0 0 4px rgba(204,68,68,0.5), inset 0 0 0 1px rgba(0,0,0,0.3); }
.led-blue   { background: var(--accent); box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(15,128,234,0.4), inset 0 0 0 1px rgba(0,0,0,0.2); }
.led-amber  { background: var(--warn); box-shadow: 0 0 5px var(--warn), 0 0 10px rgba(212,160,23,0.35), inset 0 0 0 1px rgba(0,0,0,0.2); }
.led-white  { background: var(--text); box-shadow: 0 0 0 1px var(--border-hot); }

.led.pulse  { animation: led-pulse 2.2s ease-in-out infinite; }
.led.blink  { animation: led-blink 1.05s steps(2, start) infinite; }
@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@keyframes led-blink {
  to { opacity: 0.2; }
}

/* footer */
.foot {
  margin-top: 80px;
  border-top: 1px dashed var(--border-hot);
  padding-top: 14px;
  color: var(--text-faint);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.foot .sig { margin-left: auto; }

/* ──────────────────────────────────────────────
   Bottom bar — fixed overlay, always visible
   ────────────────────────────────────────────── */

body { padding-bottom: 34px; }   /* clear the fixed bottom bar */

.botbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  overflow-x: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.botbar .seg { display: inline-flex; align-items: center; gap: 6px; }
.botbar .seg .k    { color: var(--text-faint); }
.botbar .seg .v    { color: var(--text); }
.botbar .seg .hot  { color: var(--accent); }
.botbar .seg .city { color: var(--text); font-weight: 600; }
.botbar .seg .time { color: var(--text); font-variant-numeric: tabular-nums; }
.botbar .seg .tz   { color: var(--text-faint); }
.botbar .sep       { color: var(--accent); margin: 0 2px; }
.botbar .spacer    { flex: 1; }
.botbar [data-led="online"] { width: 8px; height: 8px; }
.botbar-links { display: inline-flex; gap: 12px; }
.botbar-links a {
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.botbar-links a:hover { color: var(--accent); background: transparent; }
.botbar-links .arr { color: var(--text-faint); }

/* theme picker — used in topbar AND bottom bar */
.theme-picker {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 18px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:
    calc(100% - 10px) 50%,
    calc(100% - 6px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.theme-picker:focus { outline: 1px solid var(--accent); outline-offset: 1px; }

/* topbar slot for the theme picker (added via JS) */
.topbar .theme-picker { background-color: transparent; }

/* sysinfo strip — moonlit-style status line, sits below the page footer */
.sysinfo {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin: 18px 0 0;
  padding: 8px 0 0;
  border-top: 1px dotted var(--border-hot);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
}
.sysinfo .seg::before { content: "// "; color: var(--text-faint); opacity: 0.5; }
.sysinfo .seg .k { color: var(--text-mute); }
.sysinfo .seg .v { color: var(--text); }
.sysinfo .seg .hot { color: var(--accent); }
.sysinfo .seg.right { margin-left: auto; }

/* topbar multi-city clock strip */
.topbar [data-clock] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.topbar [data-clock] .city { color: var(--text); }
.topbar [data-clock] .time { color: var(--text); }
.topbar [data-clock] .tz   { color: var(--text-faint); }
.topbar [data-clock] .sep  { color: var(--accent); margin: 0 4px; }

/* utility */
.dim { color: var(--text-mute); }
.faint { color: var(--text-faint); }
.hot { color: var(--accent); }
.inv { background: var(--text); color: var(--bg); padding: 0 4px; }
.kbd {
  border: 1px solid var(--border-hot);
  border-bottom-width: 2px;
  padding: 0 5px;
  font-size: 11px;
  color: var(--text);
  background: var(--bg-card);
}

/* ──────────────────────────────────────────────
   Receipt-style contact page
   ────────────────────────────────────────────── */

.main-contact { max-width: 560px; padding-top: 28px; }

.receipt {
  background: #fafaf6;
  color: #0a0a0a;
  font-family: "Berkeley Mono","JetBrains Mono","SF Mono",ui-monospace,monospace;
  font-size: 13px;
  line-height: 1.55;
  padding: 28px 26px 22px;
  border: 1px solid #1a1a1a;
  position: relative;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.35);
}
.receipt::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed #1a1a1a22;
  pointer-events: none;
}

.receipt-header { text-align: center; margin-bottom: 14px; }
.receipt-logo {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.receipt-addr {
  font-size: 11px;
  color: #5a5a5a;
  margin-top: 4px;
  line-height: 1.45;
}

.receipt-rule {
  font-family: inherit;
  white-space: pre;
  text-align: center;
  color: #1a1a1a;
  font-size: 12px;
  line-height: 1.1;
  margin: 10px 0;
  letter-spacing: 0;
  overflow: hidden;
}
.receipt-rule.rule-dashed { color: #1a1a1a; opacity: 0.55; }
.receipt-rule.rule-solid  { color: #1a1a1a; }

.receipt-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.receipt-meta .hot { color: var(--accent); }

.receipt-items {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}
.receipt-items li { padding: 0; }
.receipt-items li a,
.receipt-items li .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #0a0a0a;
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.receipt-items li a:hover {
  background: transparent;
  color: var(--accent);
}
.receipt-items li a:hover .chev { color: var(--accent); transform: translateX(2px); }
.receipt-items .bullet { width: 1ch; display: inline-block; color: #0a0a0a; }
.receipt-items .bullet.faint { color: #1a1a1a88; }
.receipt-items .chev {
  color: #1a1a1a66;
  font-size: 16px;
  transition: transform 120ms ease, color 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.receipt-detail {
  font-size: 11px;
  color: #5a5a5a;
  padding: 2px 0 6px 2ch !important;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  border-bottom: 1px dashed #1a1a1a22;
}

.receipt-sub {
  font-size: 12px;
  margin: 6px 0;
}
.receipt-sub-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.receipt-sub-row.total {
  font-weight: 700;
  border-top: 1px solid #1a1a1a;
  padding-top: 6px;
  margin-top: 4px;
}
.receipt-sub-row.total span:last-child { color: var(--accent); }

.receipt-signature { text-align: left; padding: 10px 0 6px; }
.sig-line {
  font-family: "Caveat","Homemade Apple","Brush Script MT","Bradley Hand",cursive;
  font-size: 22px;
  color: #0a0a0a;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
}
.sig-name {
  font-size: 10.5px;
  color: #5a5a5a;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.receipt-footer { text-align: center; padding: 10px 0 4px; }
.footer-name {
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: 12px;
}
.footer-handle {
  font-size: 11px;
  color: #5a5a5a;
  margin-top: 4px;
}
.footer-handle a { color: #5a5a5a; text-decoration: underline; }
.footer-handle a:hover { color: var(--accent); background: transparent; }
.footer-thanks {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.receipt-barcode {
  font-family: inherit;
  white-space: pre;
  text-align: center;
  font-size: 14px;
  letter-spacing: -1px;
  color: #0a0a0a;
  margin: 14px 0 4px;
  overflow: hidden;
}
.receipt-barcode-num {
  text-align: center;
  font-size: 10px;
  color: #5a5a5a;
  letter-spacing: 0.18em;
}

/* receipt LED — override sidebar status-list shape */
.receipt-items .led {
  width: 8px; height: 8px; margin-right: 2px;
  display: inline-block; vertical-align: middle;
}

/* blog list */
.posts { list-style: none; padding: 0; }
.posts li {
  border-bottom: 1px dashed var(--border);
  padding: 10px 0;
  display: grid;
  grid-template-columns: 80px 110px 1fr auto;
  gap: 14px;
  align-items: baseline;
}
.posts li:not(:has(.id)) { grid-template-columns: 110px 1fr auto; }
.posts li .id {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
  border: 1px solid currentColor;
  padding: 1px 6px;
  justify-self: start;
}
.posts li .date { color: var(--text-faint); font-size: 12px; }
.posts li .title { color: var(--text); }
.posts li .title a { color: inherit; text-decoration: none; }
.posts li .title a:hover { color: var(--accent); background: transparent; text-decoration: underline; }
.posts li .read { color: var(--text-faint); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }

/* ───────────── floating window (external link viewer) ───────────── */
.frame-win {
  position: fixed;
  top: 60px;
  right: 40px;
  width: min(1100px, calc(100vw - 80px));
  height: min(760px, calc(100vh - 100px));
  min-width: 320px;
  min-height: 220px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--text);
  box-shadow: 6px 6px 0 0 var(--text);
  display: flex;
  flex-direction: column;
  z-index: 9999;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
}
/* .frame-win-large is now identical to base — kept as a no-op so the JS
   class toggle doesn't need to change. */
.frame-win.frame-win-large { }
.frame-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: var(--bg);
  padding: 4px 8px 4px 10px;
  cursor: move;
  user-select: none;
  font-size: 12px;
  line-height: 1.4;
  border-bottom: 1px solid var(--text);
  flex-shrink: 0;
}
.frame-dots { letter-spacing: -2px; opacity: 0.75; font-size: 10px; }
.frame-title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.frame-title .frame-host { opacity: 0.6; font-weight: 400; }
.frame-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.frame-popout {
  color: var(--bg);
  text-decoration: none;
  border: 1px solid var(--bg);
  padding: 1px 7px;
  font-size: 12px;
  line-height: 1.4;
}
.frame-popout:hover { background: var(--accent); color: var(--bg); border-color: var(--bg); }
.frame-close {
  background: transparent;
  border: 1px solid var(--bg);
  color: var(--bg);
  cursor: pointer;
  padding: 0 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}
.frame-close:hover { background: var(--bg); color: var(--text); }
.frame-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.frame-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg);
}
.cal-embed-target {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.cal-embed-target iframe { background: var(--bg) !important; }
.frame-blocked {
  position: absolute;
  inset: 0;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 14px;
}
.frame-blocked-icon {
  font-size: 28px;
  color: var(--accent);
  letter-spacing: 2px;
}
.frame-blocked-msg { margin: 0; font-size: 14px; }
.frame-blocked-host {
  margin: 0;
  font-size: 12px;
  color: var(--text-mute, var(--text));
  opacity: 0.7;
}
.frame-statusbar {
  border-top: 1px solid var(--text);
  background: var(--bg);
  color: var(--text);
  font-size: 11px;
  padding: 3px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  opacity: 0.75;
}
.frame-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 50%, var(--text) 50%);
  z-index: 2;
}
@media (max-width: 720px) {
  .frame-win {
    top: 60px;
    left: 4vw;
    right: 4vw;
    width: auto;
    height: 75vh;
    box-shadow: 3px 3px 0 0 var(--text);
  }
  .frame-resize { display: none; }
}

/* ───────────── blog post viewer (single .md source) ───────────── */
.post-body {
  display: block;
  background: transparent;
  border: 0;
  padding: 12px 0 24px;
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  white-space: normal;
  word-wrap: break-word;
}
.post-body h1 { margin-top: 0; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
  font-family: var(--display);
}
.post-body p, .post-body li { font-size: 15px; line-height: 1.65; }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body blockquote {
  margin: 1.2em 0;
  padding: 4px 14px;
  border-left: 3px solid var(--accent);
  color: var(--text-mute);
  font-style: italic;
}
.post-body hr {
  border: 0;
  border-top: 1px dashed var(--border);
  margin: 28px 0;
}
.post-body pre.md-code {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin: 16px 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}
.post-body pre.md-code code { background: transparent; border: 0; padding: 0; }
.post-body code {
  font-family: var(--mono);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1px 5px;
  font-size: 0.92em;
}
.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-body a:hover { background: var(--accent); color: var(--bg); text-decoration: none; }

/* ───────────── sidebar logo (h-mark in ASCII frame) ───────────── */
pre.sidebar-logo {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  overflow: visible;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.05;
  color: var(--text);
  white-space: pre;
  text-align: left;
}
.sidebar-logo a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  background: transparent;
}
.sidebar-logo a:hover { background: transparent; }
.sidebar-logo .frame { color: var(--accent); }
.sidebar-logo .hi    { color: var(--text); font-weight: 700; }
.sidebar-logo .dim   { color: var(--accent); }
.sidebar-logo .muted { color: var(--text-mute); }
.sidebar-logo a:hover .frame { color: var(--text); }
.sidebar-logo a:hover .hi    { color: var(--accent); }

/* ───────────── geo: hover lat/lng on city names ───────────── */
.geo {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}
.geo::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 50;
}
.geo::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 50;
}
.geo:hover::after,
.geo:hover::before,
.geo:focus::after,
.geo:focus::before {
  opacity: 1;
  visibility: visible;
}

/* ───────────── highlighter inline tags ─────────────
   Brand-aware mark blocks for service / project / post copy.
   Reuses the theme palette so light + dark + flexoki all stay legible.
   Use:  STRATEGY
   Variants: -strat -ops -creative -tech -hot -mute */
mark.hl, .hl {
  background: var(--accent);
  color: var(--bg);
  padding: 0 6px;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.hl-strat    { background: var(--accent);     color: var(--bg);   }
.hl-ops      { background: var(--text);       color: var(--bg);   }
.hl-creative { background: var(--bg);         color: var(--text); border-color: var(--text); }
.hl-tech     { background: var(--accent-dim); color: var(--bg);   }
.hl-hot      { background: var(--warn);       color: #1a1a1a;     border-color: #1a1a1a; }
.hl-mute     { background: var(--bg-stripe);  color: var(--text-mute); border-color: var(--border); }

/* ───────────── ASCII landscape (footer + 404) ───────────── */
pre.ascii-landscape {
  display: block;
  width: 100%;
  margin: 32px 0 0;
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px dashed var(--border);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.1;
  color: var(--text-mute);
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: left;
  user-select: none;
}
pre.ascii-landscape .hi { color: var(--accent); }
/* Horizon strip glued to bottom of landscape — fills any width slack
   and visually anchors the scene against the foot row above. */
pre.ascii-landscape::after {
  content: "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~";
  display: block;
  color: var(--accent);
  overflow: hidden;
  white-space: nowrap;
  margin-top: 2px;
}
pre.ascii-landscape.large {
  font-size: 13px;
  line-height: 1.2;
  margin: 24px 0;
  padding: 24px 0;
  border-top: 0;
  text-align: center;
}
pre.ascii-landscape.large .hi { color: var(--accent); }
pre.ascii-landscape.large::after { content: none; }
/* Tighten foot when it follows a landscape. */
pre.ascii-landscape + .foot { margin-top: 14px; padding-top: 10px; border-top: 0; }

/* ───────────── page tabs (about-cluster nav) ───────────── */
.page-tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0 28px;
  border-bottom: 1px dashed var(--border);
  flex-wrap: wrap;
}
.page-tab {
  display: inline-block;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--border);
  border-bottom: 0;
  margin-bottom: -1px;
  transition: none;
}
.page-tab:hover {
  background: var(--bg-card);
  color: var(--text);
}
.page-tab.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 700;
}
.page-tab.active:hover { background: var(--text); color: var(--bg); }

/* ───────────── cv table ───────────── */
.cv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  margin: 12px 0 24px;
}
.cv-table th, .cv-table td {
  border-bottom: 1px dashed var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.cv-table th {
  color: var(--text-faint);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.cv-table tbody tr:hover { background: var(--bg-stripe); }

/* ───────────── framed mode (page rendered inside parent's iframe) ─────────────
   Hide all site chrome — topbar, sidebar, right rail, bottom bar, footer,
   landscape — and let the main content fill the iframe. */
:root[data-framed="1"] .topbar,
:root[data-framed="1"] .sidebar,
:root[data-framed="1"] .rightrail,
:root[data-framed="1"] .botbar,
:root[data-framed="1"] .ascii-landscape,
:root[data-framed="1"] .foot {
  display: none !important;
}
:root[data-framed="1"] .shell {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  grid-template-columns: 1fr !important;
}
:root[data-framed="1"] .main {
  padding: 24px 32px 48px !important;
}
:root[data-framed="1"] body::before { display: none; }  /* scanlines off */
@media (max-width: 720px) {
  :root[data-framed="1"] .main { padding: 16px !important; }
}