/* ============================================================ POSSESSIONER // personal site Pure CSS. Zero JavaScript. Linearizes cleanly in w3m. ------------------------------------------------------------ Themes (set on ): .theme-faithful .theme-clean .theme-midnight Layout (set on ): .layout-frame .layout-bar ============================================================ */ /* ---- self-hosted font (DotGothic16, OFL) ---------------- */ /* Latin + latin-ext subsets. Other glyphs (box/arrows) fall back to a system monospace, which is intentional. */ @font-face { font-family: "DotGothic16"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/DotGothic16-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DotGothic16"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/DotGothic16-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- reset ---------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img { max-width: 100%; display: block; image-rendering: pixelated; } a { color: var(--link); text-underline-offset: 2px; } a:visited { color: var(--link-visited); } a:hover, a:focus { color: var(--bg); background: var(--link); outline: none; } /* visually-hidden but readable by w3m / screen readers */ .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- THEME: faithful (matches the screenshot) ----------- */ .theme-faithful { --bg: #07202d; /* page backdrop */ --frame: #0c2c3d; /* panel fill */ --panel-2: #0a3245; /* viewport fill */ --bevel-lt: #5fc9d2; /* top/left highlight */ --bevel-dk: #041521; /* bottom/right shadow */ --edge: #021018; /* outer hairline */ --btn-face: #c2b189; /* tan command button */ --btn-lt: #e3d6b2; --btn-dk: #7c7050; --btn-ink: #161208; --btn-sel: #e7dcbb; /* highlighted command */ --ink: #e2f3f3; /* body / dialogue text */ --ink-dim: #84b1b9; --name: #ffffff; /* speaker name */ --accent: #45e0e6; /* bright cyan */ --accent-2: #f4c95b; /* warm signal */ --link: #74ecec; --link-visited: #c0a8ee; --slot: #0e3a4e; --slot-line: #1c5066; } /* ---- THEME: clean (cleaner, neon, larger type) ---------- */ .theme-clean { --bg: #04121a; --frame: #07202c; --panel-2: #061a25; --bevel-lt: #1f5d6e; --bevel-dk: #02090f; --edge: #010608; --btn-face: #0a2f3f; /* dark glass button */ --btn-lt: #16586a; --btn-dk: #03121a; --btn-ink: #c7f6f9; --btn-sel: #103d50; --ink: #d6f1f4; --ink-dim: #6fa3ad; --name: #45e0e6; --accent: #45e0e6; --accent-2: #ff5cc8; --link: #58e6ea; --link-visited: #b59cf0; --slot: #06222f; --slot-line: #0e3a4c; } /* ---- THEME: midnight (palette exploration) -------------- */ .theme-midnight { --bg: #0a0713; --frame: #150d22; --panel-2: #120a1e; --bevel-lt: #b14fd8; --bevel-dk: #060410; --edge: #03020a; --btn-face: #2a1736; --btn-lt: #5a2f72; --btn-dk: #150a1d; --btn-ink: #f3e6ff; --btn-sel: #3c1f4e; --ink: #ecdcff; --ink-dim: #9a7fbf; --name: #ff7ce0; --accent: #ff5cd6; --accent-2: #4fe0e6; --link: #6fe6ea; --link-visited: #ff9fe4; --slot: #1a0f29; --slot-line: #2e1a44; } /* ---- base typography & page ----------------------------- */ body { font-family: "DotGothic16", "MS Gothic", "Courier New", monospace; background: var(--bg); color: var(--ink); line-height: 1.65; font-size: 16px; letter-spacing: .01em; -webkit-font-smoothing: none; padding: 18px; min-height: 100vh; } /* faint dithered scanline wash over the whole page */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.10) 3px); z-index: 50; } p { margin: 0 0 1em; text-wrap: pretty; } h1, h2, h3 { margin: 0 0 .5em; font-weight: normal; line-height: 1.3; } /* ---- chunky double bevel (reusable) --------------------- */ .bevel-out { border: 2px solid; border-top-color: var(--bevel-lt); border-left-color: var(--bevel-lt); border-right-color: var(--bevel-dk); border-bottom-color: var(--bevel-dk); box-shadow: inset 1px 1px 0 0 color-mix(in srgb, var(--bevel-lt) 55%, transparent), inset -1px -1px 0 0 var(--bevel-dk), 0 0 0 1px var(--edge); } .bevel-in { border: 2px solid; border-top-color: var(--bevel-dk); border-left-color: var(--bevel-dk); border-right-color: var(--bevel-lt); border-bottom-color: var(--bevel-lt); box-shadow: inset 1px 1px 0 0 var(--bevel-dk), inset -1px -1px 0 0 color-mix(in srgb, var(--bevel-lt) 55%, transparent); } /* ============================================================ SHELL ============================================================ */ .shell { max-width: 1080px; margin: 0 auto; } /* ---- titlebar ------------------------------------------- */ .titlebar { background: var(--frame); padding: 9px 12px; margin-bottom: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .titlebar .brand { font-size: 19px; color: var(--name); letter-spacing: .04em; } .titlebar .brand b { color: var(--accent); } .titlebar .tag { font-size: 12px; color: var(--ink-dim); letter-spacing: .12em; text-transform: uppercase; } /* ============================================================ CONSOLE GRID ============================================================ */ .console { display: grid; gap: 14px; grid-template-columns: 1fr 232px; grid-template-rows: 1fr auto; grid-template-areas: "viewport cmd" "viewport portrait"; align-items: stretch; } .viewport { grid-area: viewport; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .cmd { grid-area: cmd; } .portrait { grid-area: portrait; } /* ---- the "scene" (art slot) ----------------------------- */ .scene { background: var(--panel-2); position: relative; min-height: 300px; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 18px; overflow: hidden; } .scene::before { /* diagonal dither fill for the placeholder */ content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 45deg, var(--slot) 0, var(--slot) 9px, var(--slot-line) 9px, var(--slot-line) 10px); opacity: .9; } .scene .slot-label { position: relative; font-family: "Courier New", monospace; font-size: 12px; letter-spacing: .14em; color: var(--ink-dim); text-transform: uppercase; text-align: center; background: color-mix(in srgb, var(--bg) 72%, transparent); padding: 7px 12px; } .scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } /* optional: overlay caption inside scene (top-left, like a location tag) */ .scene .loc { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .12em; color: var(--accent); background: color-mix(in srgb, var(--bg) 80%, transparent); padding: 3px 8px; text-transform: uppercase; } /* ---- dialogue box --------------------------------------- */ .dialogue { background: var(--frame); padding: 14px 16px 16px; flex: 0 0 auto; } .dialogue .speaker { color: var(--name); font-size: 15px; letter-spacing: .1em; margin: 0 0 6px; display: inline-block; border-bottom: 2px solid var(--accent); padding-bottom: 2px; } .dialogue .line { margin: 0; color: var(--ink); } .dialogue .line + .line { margin-top: .7em; } .dialogue .cursor { color: var(--accent); } /* ---- command menu (nav) --------------------------------- */ .cmd { display: flex; flex-direction: column; gap: 10px; } .cmd .cmd-head { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .22em; color: var(--ink-dim); text-transform: uppercase; padding: 2px 2px 0; } .cmd ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .cmd-btn { display: block; background: var(--btn-face); color: var(--btn-ink); text-decoration: none; padding: 9px 13px; font-size: 15px; letter-spacing: .08em; } /* tan-bevel just for the buttons (independent of theme bevel) */ .cmd-btn { border: 2px solid; border-top-color: var(--btn-lt); border-left-color: var(--btn-lt); border-right-color: var(--btn-dk); border-bottom-color: var(--btn-dk); box-shadow: 0 0 0 1px var(--edge); } /* keep label black on visited pages (override UA visited purple) */ .cmd-btn:link, .cmd-btn:visited { color: var(--btn-ink); } .cmd-btn .verb { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: .14em; color: color-mix(in srgb, var(--btn-ink) 55%, transparent); display: block; } .cmd-btn:hover, .cmd-btn:focus { background: var(--btn-sel); color: var(--btn-ink); } .cmd-btn:hover .verb, .cmd-btn:focus .verb { color: color-mix(in srgb, var(--btn-ink) 70%, transparent); } /* current page = "selected" command, pressed-in look */ .cmd-btn[aria-current="page"] { background: var(--btn-sel); border-top-color: var(--btn-dk); border-left-color: var(--btn-dk); border-right-color: var(--btn-lt); border-bottom-color: var(--btn-lt); } .cmd-btn[aria-current="page"]::after { content: " \25C0"; color: var(--btn-dk); } /* SYSTEM button */ .cmd .system { margin-top: 4px; } .sys-btn { display: block; text-align: center; background: var(--btn-face); color: var(--btn-ink); text-decoration: none; padding: 9px; font-size: 14px; letter-spacing: .22em; border: 2px solid; border-top-color: var(--btn-lt); border-left-color: var(--btn-lt); border-right-color: var(--btn-dk); border-bottom-color: var(--btn-dk); box-shadow: 0 0 0 1px var(--edge); } .sys-btn:link, .sys-btn:visited { color: var(--btn-ink); } .sys-btn:hover, .sys-btn:focus { background: var(--btn-sel); color: var(--btn-ink); } /* ---- portrait box --------------------------------------- */ .portrait { background: var(--frame); padding: 10px; display: flex; flex-direction: column; gap: 8px; } .portrait-slot { position: relative; aspect-ratio: 1 / 1; background: var(--panel-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .portrait-slot::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, var(--slot) 0, var(--slot) 7px, var(--slot-line) 7px, var(--slot-line) 8px); } .portrait-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .portrait-slot span { position: relative; font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .16em; color: var(--ink-dim); text-transform: uppercase; background: color-mix(in srgb, var(--bg) 76%, transparent); padding: 4px 8px; } .portrait .status { margin: 0; font-family: "Courier New", monospace; font-size: 11px; line-height: 1.5; color: var(--ink-dim); letter-spacing: .04em; } .portrait .status b { color: var(--accent); } /* ---- footer --------------------------------------------- */ .foot { margin-top: 16px; padding: 10px 12px; background: var(--frame); font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .06em; color: var(--ink-dim); display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; } .foot a { color: var(--link); } /* ============================================================ LAYOUT VARIANT: top command bar (cleaner) ============================================================ */ .layout-bar .console { grid-template-columns: 1fr 232px; grid-template-rows: auto 1fr auto; grid-template-areas: "cmd cmd" "viewport portrait" "viewport portrait"; } .layout-bar .cmd { flex-direction: column; } .layout-bar .cmd ul { flex-direction: row; flex-wrap: wrap; } .layout-bar .cmd-btn { padding: 8px 16px; } .layout-bar .cmd .system { margin-top: 0; margin-left: auto; } .layout-bar .cmd .bar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .layout-bar .cmd .bar-row ul { flex: 1 1 auto; } /* ============================================================ INNER-PAGE CONTENT (projects / blog / bio / links) Rendered inside .scene-doc instead of the art slot. ============================================================ */ .doc { background: var(--panel-2); padding: 22px 26px; flex: 1 1 auto; min-height: 320px; } .doc h1 { font-size: 20px; color: var(--accent); letter-spacing: .04em; border-bottom: 2px solid var(--bevel-lt); padding-bottom: 8px; margin-bottom: 16px; } .doc h2 { font-size: 16px; color: var(--name); margin-top: 24px; } .doc h2:first-of-type { margin-top: 0; } .doc p { color: var(--ink); } .doc a { color: var(--link); } /* listing rows (projects, posts) */ .entry-list { list-style: none; margin: 0; padding: 0; } .entry { padding: 14px 0; border-bottom: 1px dashed var(--slot-line); } .entry:last-child { border-bottom: 0; } .entry .meta { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .1em; color: var(--ink-dim); text-transform: uppercase; } .entry h3 { margin: 4px 0 5px; font-size: 16px; } .entry h3 a { color: var(--link); text-decoration: none; } .entry h3 a:hover { color: var(--bg); background: var(--link); } .entry .blurb { margin: 0; color: var(--ink-dim); font-size: 14px; } .tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tag { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--slot-line); padding: 2px 7px; } /* ---- doc intro line (VN-style speaker strip) ------------ */ .doc-intro { display: flex; gap: 10px; align-items: baseline; margin: -4px 0 20px; padding-bottom: 12px; border-bottom: 1px dashed var(--slot-line); flex-wrap: wrap; } .doc-intro .who { color: var(--name); font-size: 13px; letter-spacing: .08em; border-bottom: 2px solid var(--accent); padding-bottom: 1px; flex: 0 0 auto; } .doc-intro .say { color: var(--ink-dim); font-size: 13px; margin: 0; } /* ---- blog post header ----------------------------------- */ .post-head { margin-bottom: 22px; } .post-head .post-meta { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; margin: 0 0 8px; } .post-head h1 { border: 0; padding: 0; margin: 0 0 10px; font-size: 22px; color: var(--name); line-height: 1.35; } .post-head .deck { color: var(--ink-dim); font-size: 14px; margin: 0; } /* postnav prev/next */ .postnav { margin-top: 30px; padding-top: 14px; border-top: 1px dashed var(--slot-line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: "Courier New", monospace; font-size: 12px; } .postnav a { color: var(--link); text-decoration: none; } .postnav a:hover { color: var(--bg); background: var(--link); } .postnav .none { color: var(--ink-dim); opacity: .5; } /* prose article — tuned for long-form reading */ .prose { max-width: 62ch; font-size: 16px; line-height: 1.85; } .prose h2 { font-size: 16px; color: var(--accent); margin-top: 34px; letter-spacing: .03em; } .prose h2::before { content: "// "; color: var(--ink-dim); } .prose p, .prose li { color: var(--ink); } .prose ul, .prose ol { padding-left: 1.4em; } .prose li { margin-bottom: .4em; } .prose strong { color: var(--name); } .prose a { text-decoration: underline; } .prose code { font-family: "Courier New", monospace; background: var(--frame); padding: 1px 5px; color: var(--accent); } .prose pre { font-family: "Courier New", monospace; background: var(--frame); padding: 12px 14px; overflow-x: auto; border-left: 2px solid var(--accent); } .prose blockquote { margin: 1em 0; padding: 4px 14px; border-left: 3px solid var(--accent); color: var(--ink-dim); } .prose hr { border: 0; border-top: 1px dashed var(--slot-line); margin: 1.6em 0; } .backlink { display: inline-block; margin-top: 20px; font-family: "Courier New", monospace; font-size: 12px; letter-spacing: .1em; color: var(--link); } /* links page rows */ .linkroll { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .linkroll li { display: flex; gap: 10px; align-items: baseline; } .linkroll .dot { color: var(--accent); font-family: "Courier New", monospace; } .linkroll a { color: var(--link); text-decoration: none; } .linkroll a:hover { color: var(--bg); background: var(--link); } .linkroll .note { color: var(--ink-dim); font-size: 13px; } .webring { margin-top: 22px; padding: 12px 14px; background: var(--frame); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: "Courier New", monospace; font-size: 12px; letter-spacing: .08em; } .webring a { color: var(--link); text-decoration: none; } .webring .ring-name { color: var(--accent); } /* ---- 404: PC-98 MS-DOS text screen (layout: dos) -------- */ .dos { flex: 1 1 auto; min-height: 300px; background: #000; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px 0; overflow-x: auto; } .dos pre { margin: 0; font-family: inherit; font-size: 15px; line-height: 1.45; color: #d8d8d8; white-space: pre; } .dos .req { color: #ff5555; } .dos pre a { color: #55ffff; text-decoration: none; } .dos pre a:hover, .dos pre a:focus { background: #55ffff; color: #000; } .dos .blink { animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .dos .blink { animation: none; } } /* function-key strip, reverse video along the bottom row */ .fkeys { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px -18px 0; padding: 6px 18px 8px; border-top: 1px solid #333; } .fkeys a { flex: 0 1 140px; background: #d8d8d8; color: #000; text-decoration: none; padding: 1px 8px; font-size: 14px; letter-spacing: .06em; } .fkeys a i { font-style: normal; color: #555; margin-right: 8px; } .fkeys a:hover, .fkeys a:focus { background: #55ffff; color: #000; } /* ============================================================ RESPONSIVE (mobile linearization) ============================================================ */ @media (max-width: 720px) { body { padding: 10px; font-size: 15px; } .console, .layout-bar .console { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "cmd" "viewport" "portrait"; } .cmd ul { flex-direction: row; flex-wrap: wrap; } .cmd-btn { flex: 1 1 auto; text-align: center; } .cmd .system { margin-top: 6px; } .portrait { flex-direction: row; } .portrait-slot { width: 96px; flex: 0 0 96px; aspect-ratio: 1/1; } .titlebar { margin-bottom: 10px; } .doc { padding: 16px; } .scene { min-height: 200px; } } /* ============================================================ PROTOTYPE · gutter treatments for prose pages (T1..T7) Each modifier sits on the .doc article. The .prose reading measure (~60ch) is preserved in all of them; only the right-hand "void" is treated differently. These classes are additive and used only on proto/ pages until one is chosen. ============================================================ */ /* shared: doc becomes a row of [prose | gutter] */ .doc.t-row { display: flex; gap: 26px; align-items: stretch; } .doc.t-row .prose { flex: 0 1 60ch; min-width: 0; max-width: 60ch; } .doc.t-row .backlink:first-child { /* keep backlink above the row */ } /* ---- T1 · vertical status rail -------------------------- */ .gutter-rail { flex: 1 1 auto; align-self: flex-start; display: flex; gap: 14px; padding: 14px 14px 16px; background: var(--frame); box-shadow: inset 1px 1px 0 0 var(--bevel-dk), inset -1px -1px 0 0 color-mix(in srgb, var(--bevel-lt) 55%, transparent); } .gutter-rail .rail-spine { writing-mode: vertical-rl; text-orientation: mixed; font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-dim); border-left: 2px solid var(--accent); padding-left: 6px; } .gutter-rail .rail-body { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; } .gutter-rail .rail-head { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .18em; color: var(--accent); text-transform: uppercase; } .rail-stat { font-family: "Courier New", monospace; font-size: 11px; line-height: 1.8; color: var(--ink-dim); letter-spacing: .05em; } .rail-stat b { color: var(--name); display: inline-block; width: 4.5em; } .rail-tags { display: flex; flex-wrap: wrap; gap: 6px; } .rail-prog { margin-top: auto; display: flex; align-items: flex-end; gap: 5px; height: 96px; } .rail-prog i { display: block; width: 12px; align-self: stretch; background-image: repeating-linear-gradient(0deg, var(--accent) 0 3px, transparent 3px 6px); opacity: .9; } .rail-prog i:nth-child(2){ height: 78%; align-self: flex-end; } .rail-prog i:nth-child(3){ height: 55%; align-self: flex-end; } .rail-prog i:nth-child(4){ height: 88%; align-self: flex-end; } .rail-prog i:nth-child(5){ height: 40%; align-self: flex-end; } /* ---- T2 · dithered scene strip (per-post key art) ------- */ .gutter-strip { flex: 1 1 auto; align-self: stretch; min-width: 130px; min-height: 100%; } .gutter-strip .slot-label { max-width: 70%; } /* ---- T3 · in-world margin notes ------------------------- */ .doc.t3 { position: relative; } .doc.t3 .prose { max-width: none; padding-right: 244px; } .mnote { float: right; clear: right; width: 206px; margin-right: -228px; margin-bottom: 20px; font-family: "Courier New", monospace; font-size: 12px; line-height: 1.6; color: var(--accent); border-left: 2px solid var(--accent); padding-left: 11px; } .mnote b { display: block; color: var(--ink-dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; } /* ---- T4 · faint wash behind the doc + prose card -------- */ .doc.t4 { position: relative; overflow: hidden; } .doc.t4::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--bevel-lt) 12%, transparent) 7px 8px); opacity: .8; } .doc.t4 .prose { position: relative; background: color-mix(in srgb, var(--bg) 78%, transparent); padding: 20px 24px; box-shadow: inset 1px 1px 0 0 var(--bevel-dk), inset -1px -1px 0 0 color-mix(in srgb, var(--bevel-lt) 45%, transparent), 0 0 0 1px var(--edge); } /* ---- T5 · decorative section spine ---------------------- */ .gutter-spine2 { flex: 1 1 auto; align-self: stretch; position: relative; display: flex; justify-content: center; min-width: 64px; } .gutter-spine2::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 2px; transform: translateX(-50%); background-image: repeating-linear-gradient(0deg, var(--slot-line) 0 6px, transparent 6px 12px); } .gutter-spine2 ul { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 30px; } .gutter-spine2 li { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .12em; color: var(--ink-dim); text-transform: uppercase; display: flex; align-items: center; gap: 9px; } .gutter-spine2 li::before { content: ""; width: 9px; height: 9px; background: var(--accent); box-shadow: 0 0 0 3px var(--panel-2); flex: 0 0 auto; } .gutter-spine2 li b { color: var(--accent); font-weight: normal; } /* ---- T6 · centered prose -------------------------------- */ .doc.t6 .prose { margin-left: auto; margin-right: auto; } .doc.t6 .post-head, .doc.t6 .backlink, .doc.t6 .doc-intro, .doc.t6 .postnav { max-width: 60ch; margin-left: auto; margin-right: auto; } /* ---- T7 · two-column with TOC rail ---------------------- */ .doc.t7 { display: flex; gap: 30px; align-items: flex-start; } .toc-rail { flex: 0 0 178px; position: sticky; top: 12px; background: var(--frame); padding: 13px 14px 15px; box-shadow: inset 1px 1px 0 0 var(--bevel-dk), inset -1px -1px 0 0 color-mix(in srgb, var(--bevel-lt) 50%, transparent); } .toc-rail .toc-head { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .16em; color: var(--accent); text-transform: uppercase; margin: 0 0 10px; } .toc-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .toc-rail li { counter-increment: toc; margin-bottom: 9px; line-height: 1.4; } .toc-rail a { font-family: "Courier New", monospace; font-size: 12px; letter-spacing: .04em; color: var(--link); text-decoration: none; } .toc-rail li::before { content: counter(toc, decimal-leading-zero) " "; color: var(--ink-dim); } .toc-rail a:hover { color: var(--bg); background: var(--link); } .doc.t7 .prose { flex: 0 1 60ch; max-width: 60ch; min-width: 0; } /* ---- prototype mobile collapse -------------------------- */ @media (max-width: 720px) { .doc.t-row, .doc.t7 { flex-direction: column; } .doc.t-row .prose, .doc.t7 .prose { flex: 1 1 auto; max-width: none; } .gutter-rail { flex-direction: row; } .gutter-strip { min-height: 140px; } .gutter-spine2 { display: none; } .toc-rail { position: static; flex: 1 1 auto; } /* T3: drop the side gutter, inline the notes */ .doc.t3 .prose { padding-right: 0; } .mnote { float: none; width: auto; margin: 14px 0; } } /* w3m / no-CSS note: every section is a normal heading + list + links, so a text browser reads title -> menu -> content -> portrait -> footer. All gutter treatments above are decorative; the prose reads first. */