:root {
  --wall: #f6e6c7;
  --desk: #d69c52;
  --computer-light: #ecd093;
  --computer-mid: #b89e70;
  --computer-dark: #6c6047;
  --screen: #101712;
  --screen-green: #72d86f;
  --screen-bright: #a2ff9d;
  --hands: #efb526;
  --outline: #433624;
  --paper: #fff7e8;
  --paper-deep: #e7d5b4;
  --ink: #30291f;
  --red: #9f3026;
  --blue: #263e5b;
  --mono: "Courier New", Courier, ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: Arial, Helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --header-height: 80px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color: var(--ink); background: var(--wall); }
body { min-width: 320px; margin: 0; overflow-x: hidden; font-family: var(--sans); background: var(--wall); }
a { color: inherit; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 12px; padding: 12px 16px; color: #fff; background: var(--blue); transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid #e15b45; outline-offset: 4px; }

/* Site navigation */
.journal-header { position: fixed; z-index: 100; inset: 0 0 auto; width: 100%; height: var(--header-height); padding-inline: max(clamp(20px,4vw,72px),calc((100vw - 1440px)/2)); display: flex; align-items: center; justify-content: space-between; color: var(--ink); border-bottom: 1px solid rgba(67,54,36,.08); background: linear-gradient(180deg, rgba(255,247,232,.94), rgba(255,247,232,.48) 72%, transparent); backdrop-filter: blur(5px); transition: background .25s, box-shadow .25s; }
.journal-header.is-scrolled { background: rgba(255,247,232,.94); box-shadow: 0 7px 24px rgba(77,52,23,.12); }
.journal-brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; text-decoration: none; }
.journal-brand span {
  width: 35px;
  height: 41px;
  display: block;
  flex: 0 0 auto;
  color: #89ef96;
  background: currentColor;
  -webkit-mask: url("/assets/brand/kocsisdani-mark.svg") center / contain no-repeat;
  mask: url("/assets/brand/kocsisdani-mark.svg") center / contain no-repeat;
  font-size: 0;
}
.journal-brand b { font: 900 11px/1 var(--sans); letter-spacing: .24em; }
.journal-header nav { display: grid; width: min(690px,58vw); grid-template-columns: repeat(6,minmax(0,1fr)); align-items: center; }
.journal-header nav a { position: relative; justify-self: center; padding: 10px 0; font: 900 11px/1 var(--sans); text-decoration: none; text-transform: uppercase; letter-spacing: .12em; }
.journal-header nav a::after { content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; background: var(--red); transform: scaleX(0); transition: transform .2s; }
.journal-header nav a:hover::after, .journal-header nav a.is-current::after { transform: scaleX(1); }
.journal-menu { display: none; }

/* Interactive scene */
.journal-hero { position: relative; width: 100%; min-height: 100svh; overflow: hidden; background: #c99b5d; }
.journal-scene { --art-width: 100vw; --art-height: 56.25vw; position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-inline: auto; overflow: hidden; container-type: inline-size; background: #d3ad76; }
.scene-background, .scene-background img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; }
.scene-background img { object-fit: cover; }
.journal-scene__art { position: absolute; z-index: 2; top: 0; left: 13.75%; width: 72.4%; height: 100%; display: none; overflow: visible; transform: none; }
.monitor-shadow, .monitor-body, .keyboard-shadow, .keyboard-body > path, .keyboard-body > .key-cap, .keyboard-body > .key-text { opacity: 0; }
.svg-label { fill: #332d22; font: 700 14px/1 var(--mono); letter-spacing: 2px; }
.svg-label--small { font-size: 8px; letter-spacing: 1px; }
.key-cap, .scene-key rect { fill: #8aff89; stroke: #355634; stroke-width: 4; opacity: 0; filter: none; transition: transform 45ms ease, opacity 80ms ease; transform-box: fill-box; transform-origin: center; }
.key-text, .scene-key text { opacity: 0; fill: #332c21; font: 700 16px/1 var(--mono); text-anchor: middle; pointer-events: none; }
.scene-key.is-pressed rect { opacity: .38; filter: drop-shadow(0 0 10px #8aff89); transform: translateY(4px); }
.hand-palm, .hand-finger { fill: var(--hands); stroke: var(--outline); stroke-width: 7; stroke-linejoin: round; }
.hands .hand { opacity: 0; transition: opacity 60ms ease; }
.hands .hand.is-typing { opacity: .13; }
.hand [data-finger] { transition: transform 90ms ease; transform-box: fill-box; transform-origin: bottom center; }
.hand [data-finger].is-typing { transform: translateY(7px) rotate(2deg); }
.hand--right [data-finger].is-typing { transform: translateY(7px) rotate(-2deg); }
.hand.is-typing .hand-palm { animation: hand-tap 150ms ease; transform-box: fill-box; transform-origin: bottom center; }
@keyframes hand-tap { 50% { transform: translateY(3px) rotate(.5deg); } }

.journal-hands { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.journal-hand { --tap-x: 0%; --tap-y: .65%; --tap-rotate: 0deg; position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: drop-shadow(0 .45cqw .32cqw rgba(64, 39, 12, .28)); transform: translate3d(0, 0, 0); will-change: transform; }
.journal-hand--left { transform-origin: 35% 100%; }
.journal-hand--right { transform-origin: 66% 100%; }
.journal-hand--left[data-motion="left-pinky"] { --tap-x: -.2%; --tap-y: .46%; --tap-rotate: -.45deg; }
.journal-hand--left[data-motion="left-ring"] { --tap-x: -.08%; --tap-y: .62%; --tap-rotate: -.18deg; }
.journal-hand--left[data-motion="left-middle"] { --tap-x: .04%; --tap-y: .72%; --tap-rotate: .18deg; }
.journal-hand--left[data-motion="left-index"] { --tap-x: .18%; --tap-y: .66%; --tap-rotate: .52deg; }
.journal-hand--right[data-motion="right-index"] { --tap-x: -.18%; --tap-y: .66%; --tap-rotate: -.52deg; }
.journal-hand--right[data-motion="right-middle"] { --tap-x: -.04%; --tap-y: .72%; --tap-rotate: -.18deg; }
.journal-hand--right[data-motion="right-ring"] { --tap-x: .08%; --tap-y: .62%; --tap-rotate: .18deg; }
.journal-hand--right[data-motion="right-pinky"] { --tap-x: .2%; --tap-y: .46%; --tap-rotate: .45deg; }
.journal-hand--left[data-motion="thumbs"] { --tap-x: .12%; --tap-y: .72%; --tap-rotate: .28deg; }
.journal-hand--right[data-motion="thumbs"] { --tap-x: -.12%; --tap-y: .72%; --tap-rotate: -.28deg; }
.journal-hand.is-typing { animation: raster-hand-tap 165ms cubic-bezier(.2, .72, .32, 1); }
@keyframes raster-hand-tap {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  43% { transform: translate3d(var(--tap-x), var(--tap-y), 0) rotate(var(--tap-rotate)); }
}

.journal-screen { position: absolute; z-index: 4; left: 33.55%; top: 10.9%; width: 32.55%; height: 38.8%; overflow: hidden; isolation: isolate; border-radius: 8.8% / 12%; color: var(--screen-green); background: var(--screen); box-shadow: inset 0 0 28px rgba(0,0,0,.72), 0 0 13px rgba(80,221,92,.13); font: 700 clamp(8px, .84vw, 16px)/1.32 var(--mono); letter-spacing: .01em; text-shadow: 0 0 6px rgba(104,220,103,.36); }
.journal-screen::before { content: ""; position: absolute; z-index: 8; inset: 0; opacity: .38; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0,0,0,.1) 4px); }
.journal-screen::after { content: ""; position: absolute; z-index: 9; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.34) 100%); }
.journal-screen__glow { position: absolute; z-index: 7; inset: 0; opacity: .16; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 23% 77%, rgba(255,255,255,.06)); }
.boot-sequence, .terminal-shell { position: absolute; inset: 0; padding: 6.5% 7.5%; }
.boot-sequence { z-index: 5; display: grid; align-content: center; gap: .8em; background: var(--screen); transition: opacity .18s; }
.boot-sequence p { margin: 0; }
.boot-label { padding-bottom: .5em; color: var(--screen-bright); border-bottom: 1px dashed currentColor; font-size: .76em; }
.boot-output { min-height: 4.2em; color: var(--screen-bright); font-size: 1.15em; white-space: pre-line; }
.boot-output .terminal-cursor { display: inline-block; }
.boot-sequence small { opacity: .48; font-size: .58em; }
.journal-hero.is-ready .boot-sequence { opacity: 0; visibility: hidden; }
.journal-hero.is-booting .terminal-shell { opacity: 0; }
.terminal-shell { z-index: 3; display: flex; flex-direction: column; opacity: 1; transition: opacity .15s; }
.terminal-header { padding-bottom: .6em; display: flex; justify-content: space-between; gap: 1em; border-bottom: 1px dashed currentColor; }
.terminal-header > div { display: grid; }
.terminal-header strong { color: var(--screen-bright); font-size: 1.04em; }
.terminal-header span { font-size: .78em; }
.terminal-status-light { align-self: start; padding: .28em .45em; color: var(--screen); background: var(--screen-green); text-shadow: none; }
.terminal-controls { display: flex; align-items: flex-start; gap: .5em; }
.terminal-sound { padding: .28em .45em; color: var(--screen-green); border: 1px solid currentColor; background: transparent; font: inherit; font-size: .72em; text-shadow: inherit; cursor: pointer; }
.terminal-sound[aria-pressed="false"] { opacity: .5; }
.terminal-home { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.terminal-section-title { margin: .7em 0 .35em; color: var(--screen-bright); }
.terminal-posts { min-height: 0; display: grid; align-content: start; gap: .15em; }
.terminal-post { position: relative; min-width: 0; padding: .18em .25em .2em 1.35em; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 .7em; color: var(--screen-green); text-decoration: none; border: 1px solid transparent; }
.terminal-post::before { content: " "; position: absolute; left: .25em; }
.terminal-post.is-selected::before, .terminal-post:focus-visible::before, .terminal-post:hover::before { content: ">"; color: var(--screen-bright); }
.terminal-post.is-selected, .terminal-post:hover, .terminal-post:focus-visible { color: var(--screen-bright); border-color: rgba(162,255,157,.25); background: rgba(114,216,111,.07); outline: none; }
.terminal-post strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88em; }
.terminal-post small { grid-column: 1 / -1; opacity: .72; font-size: .67em; }
.terminal-post-index { opacity: .76; }
.terminal-loading { padding-top: .4em; }
.terminal-search { margin-top: auto; padding-top: .5em; display: flex; align-items: center; gap: .45em; border-top: 1px dashed rgba(114,216,111,.5); white-space: nowrap; }
.terminal-input-wrap { min-width: 0; flex: 1; display: flex; align-items: center; }
.terminal-search input { width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; outline: 0; color: var(--screen-bright); background: transparent; caret-color: transparent; font: inherit; text-shadow: inherit; appearance: none; }
.terminal-search input::-webkit-search-cancel-button { display: none; }
.terminal-cursor { width: .62em; height: 1em; flex: 0 0 auto; display: none; vertical-align: -.12em; background: currentColor; animation: terminal-cursor-blink 1s steps(1,end) infinite; }
.terminal-search:focus-within .terminal-cursor { display: block; }
@keyframes terminal-cursor-blink { 0%,48% { opacity: 1; } 49%,100% { opacity: 0; } }
.terminal-help { margin: .45em 0 0; display: flex; justify-content: space-between; gap: .5em; opacity: .55; font-size: .57em; }
.terminal-message { min-height: 1.2em; margin: .25em 0 0; color: var(--screen-bright); font-size: .72em; }
.terminal-entry-summary { flex: 1; display: grid; align-content: center; gap: .5em; }
.terminal-entry-summary span { opacity: .74; font-size: .74em; }
.terminal-entry-summary h2 { margin: 0; color: var(--screen-bright); font: 700 1.4em/1.1 var(--mono); }
.terminal-entry-summary p { margin: 0; }
.terminal-entry-summary b { color: var(--screen-bright); }

.scene-scroll { position: absolute; z-index: 20; left: 50%; bottom: 18px; padding: 8px 9px 8px 14px; display: flex; align-items: center; gap: 12px; color: #fff; border: 2px solid var(--outline); background: var(--red); box-shadow: 4px 4px 0 var(--outline); font: 700 9px/1 var(--mono); text-decoration: none; letter-spacing: .08em; transform: translateX(-50%) rotate(-1deg); }
.scene-scroll b { width: 25px; height: 25px; display: grid; place-items: center; color: var(--ink); background: var(--paper); }

/* Archive */
.journal-archive { position: relative; padding: clamp(90px, 10vw, 150px) clamp(18px, 6vw, 86px) clamp(110px, 12vw, 170px); overflow: hidden; color: var(--ink); background:
  linear-gradient(90deg, transparent 0 8%, rgba(159,48,38,.12) 8% calc(8% + 2px), transparent calc(8% + 2px)),
  repeating-linear-gradient(0deg, transparent 0 35px, rgba(38,62,91,.1) 36px 37px),
  var(--paper); }
.journal-archive::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 18px; background: var(--desk); clip-path: polygon(0 0,100% 0,100% 35%,96% 70%,91% 42%,85% 72%,79% 38%,72% 68%,66% 39%,59% 75%,52% 41%,45% 70%,38% 37%,31% 74%,24% 41%,17% 68%,10% 39%,4% 75%,0 45%); }
.archive-heading { width: min(1120px, 100%); margin: 0 auto 60px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.archive-command { display: inline-block; margin-bottom: 18px; padding: 8px 11px; color: var(--screen-green); background: var(--screen); box-shadow: 4px 4px 0 rgba(67,54,36,.28); font: 700 9px/1 var(--mono); letter-spacing: .08em; transform: rotate(-1deg); }
.archive-heading h2 { margin: 0; max-width: 820px; font: 700 clamp(54px, 8vw, 108px)/.86 var(--serif); letter-spacing: -.055em; }
.archive-heading h2 span { display: block; }
.archive-heading > p { margin: 0; color: #6b5e4a; font: 700 10px/1.4 var(--mono); text-align: right; text-transform: uppercase; }
.archive-heading > p b { display: block; color: var(--red); font: 700 44px/.9 var(--serif); }
.archive-list { width: min(1120px, 100%); min-height: 280px; margin: auto; display: grid; gap: 22px; }
.archive-card { position: relative; padding: 26px 30px 27px 88px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 28px; color: inherit; border: 2px solid rgba(67,54,36,.5); background: rgba(255,252,242,.84); box-shadow: 7px 7px 0 rgba(67,54,36,.17); text-decoration: none; transform: rotate(-.25deg); transition: transform .2s, box-shadow .2s, background .2s; }
.archive-card:nth-child(even) { transform: rotate(.3deg); }
.archive-card:hover, .archive-card:focus-visible { z-index: 2; background: #fffdf7; box-shadow: 11px 11px 0 rgba(159,48,38,.24); transform: translate(-3px,-3px) rotate(-.25deg); }
.archive-index { position: absolute; top: 23px; left: 22px; width: 45px; height: 45px; display: grid; place-items: center; color: var(--paper); border-radius: 50%; background: var(--red); font: 700 12px/1 var(--mono); }
.archive-card h3 { margin: 0; font: 700 clamp(24px, 3vw, 38px)/1.05 var(--serif); letter-spacing: -.025em; }
.archive-card time { color: #796a54; font: 700 9px/1 var(--mono); letter-spacing: .05em; white-space: nowrap; }
.archive-card p { grid-column: 1 / -1; max-width: 720px; margin: 0; color: #655b4d; font: 400 15px/1.55 var(--serif); }
.archive-open { grid-column: 2; grid-row: 2; align-self: end; color: var(--red); font: 700 9px/1 var(--mono); letter-spacing: .06em; }
.archive-loading { min-height: 280px; display: grid; place-content: center; justify-items: center; color: #6b5e4a; font: 700 9px/1 var(--mono); letter-spacing: .1em; }
.archive-loading i { width: 42px; height: 42px; border: 3px solid #b9a98f; border-top-color: var(--red); border-radius: 50%; animation: loading 1s linear infinite; }
@keyframes loading { to { transform: rotate(360deg); } }
.empty-journal { min-height: 330px; padding: 60px 24px; display: grid; place-content: center; justify-items: center; border: 2px dashed #a8977d; background: rgba(255,255,255,.36); text-align: center; }
.empty-journal span { color: var(--red); font: 700 54px/1 var(--mono); }
.empty-journal h3 { margin: 14px 0 8px; font: 700 36px/1 var(--serif); }
.empty-journal p { max-width: 520px; margin: 0; color: #665a49; font: 400 15px/1.6 var(--serif); }
.no-script-note { width: min(1120px,100%); margin: 30px auto 0; padding: 18px; border: 1px solid var(--red); font: 700 13px/1.5 var(--mono); }

/* Entry reader */
.single-shell { position: relative; padding: clamp(90px, 10vw, 145px) 20px clamp(110px, 12vw, 170px); background:
  linear-gradient(90deg, transparent 0 10%, rgba(159,48,38,.11) 10% calc(10% + 2px), transparent calc(10% + 2px)),
  repeating-linear-gradient(0deg, transparent 0 35px, rgba(38,62,91,.09) 36px 37px),
  var(--paper); }
.single-post { width: min(780px, 100%); margin: auto; }
.single-back { display: inline-block; margin-bottom: 48px; padding: 10px 13px; color: var(--screen-green); background: var(--screen); box-shadow: 4px 4px 0 rgba(67,54,36,.3); font: 700 9px/1 var(--mono); text-decoration: none; letter-spacing: .08em; }
.single-post header { padding-bottom: 40px; border-bottom: 2px solid rgba(67,54,36,.4); }
.single-post header span { color: var(--red); font: 700 10px/1 var(--mono); letter-spacing: .1em; }
.single-post > header h1 { margin: 19px 0; font: 700 clamp(48px, 7vw, 84px)/.92 var(--serif); letter-spacing: -.055em; }
.single-post header p { max-width: 680px; margin: 0; color: #645a4d; font: italic 19px/1.55 var(--serif); }
.single-cover { width: min(1040px, 122%); max-height: 650px; margin: 52px 0 52px 50%; border: 8px solid #fffaf0; object-fit: cover; box-shadow: 0 16px 40px rgba(67,54,36,.2); transform: translateX(-50%) rotate(.5deg); }
.single-body { font: 400 clamp(18px, 2vw, 20px)/1.75 var(--serif); }
.single-body > p:first-child::first-letter { float: left; margin: .05em .12em 0 0; color: var(--red); font: 700 4.8em/.72 var(--serif); }
.single-body h2 { margin: 1.7em 0 .55em; font-size: 2.1em; }
.single-body h3 { margin-top: 1.7em; font-size: 1.5em; }
.single-body img { max-width: 100%; height: auto; }
.single-body blockquote { margin: 2em -5%; padding: 27px 5%; border-block: 2px solid rgba(67,54,36,.36); color: var(--red); font-size: 1.25em; font-style: italic; }
.single-body a { color: var(--red); }

/* Footer */
.journal-footer { min-height: 310px; padding: 70px clamp(22px, 6vw, 86px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 40px; color: #d4c5a9; border-top: 8px solid #aa733d; background: #28241d; }
.journal-footer .journal-brand span { color: var(--red); background: currentColor; }
.journal-footer > div:first-child p { margin: 32px 0 0; color: #8f826e; font: 400 14px/1.55 var(--serif); }
.journal-footer nav { display: grid; gap: 12px; text-align: center; }
.journal-footer nav a { font: 700 9px/1 var(--mono); text-decoration: none; letter-spacing: .09em; }
.journal-footer nav a:hover { color: var(--screen-green); }
.footer-sign { justify-self: end; display: grid; text-align: right; }
.footer-sign span { font: 700 8px/1 var(--mono); letter-spacing: .13em; }
.footer-sign b { color: var(--paper); font: 700 58px/.9 var(--serif); }
.footer-sign i { color: var(--screen-green); font: 700 11px/1 var(--mono); }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 760px) {
  :root { --header-height: 68px; }
  .journal-header { padding-inline: 18px; }
  .journal-header nav { position: absolute; top: 68px; right: 15px; width: min(270px,calc(100vw - 30px)); padding: 20px; display: none; grid-template-columns: 1fr; flex-direction: column; align-items: stretch; color: var(--paper); border: 2px solid var(--outline); background: #302a22; box-shadow: 6px 6px 0 var(--red); }
  .journal-header nav.is-open { display: flex; }
  .journal-menu { width: 42px; height: 42px; padding: 0; display: grid; place-content: center; gap: 6px; justify-self: end; border: 2px solid var(--outline); border-radius: 50%; color: var(--ink); background: var(--paper); }
  .journal-menu > span:not(.sr-only) { width: 18px; height: 2px; background: currentColor; }
  .terminal-help span:nth-child(2) { display: none; }
  .journal-footer { grid-template-columns: 1fr 1fr; }
  .journal-footer nav { display: none; }
}

@media (max-width: 760px) {
  .journal-brand b { font-size: 9px; }
  .journal-hero { height: 100svh; min-height: 600px; display: block; }
  .journal-scene { --art-width: 177.778svh; --art-height: 100svh; width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
  .scene-background img { object-fit: cover; object-position: center; }
  .journal-hand { object-fit: cover; object-position: center; filter: drop-shadow(0 5px 4px rgba(64, 39, 12, .25)); }
  .journal-scene__art { top: 0; left: 50%; width: 133.333svh; height: 100%; transform: translateX(-50%); }
  .journal-screen { left: 1%; top: 10.9%; width: 98%; height: 38.8%; border-radius: 8% / 10%; font-size: clamp(8px, 2.8vw, 11.5px); }
  .boot-sequence, .terminal-shell { padding: 6% 6.5%; }
  .terminal-post:nth-child(n + 4) { display: none; }
  .terminal-help { display: none; }
  .terminal-search { font-size: 16px; transform: scale(.625); transform-origin: left center; width: 160%; }
  .terminal-message { font-size: 8px; }
  .journal-screen::before { opacity: .2; }
  .scene-scroll { bottom: 12px; }
  .archive-heading { align-items: start; }
  .archive-heading > p { display: none; }
  .archive-heading h2 { font-size: clamp(50px, 15vw, 78px); }
  .archive-card { padding: 24px 20px 24px 74px; display: block; }
  .archive-index { left: 15px; }
  .archive-card time { display: inline-block; margin: 10px 0; }
  .archive-card p { font-size: 14px; }
  .archive-open { display: inline-block; margin-top: 17px; }
  .single-shell { padding-top: 85px; }
  .single-cover { width: 100%; }
  .single-body blockquote { margin-inline: 0; }
  .journal-footer { min-height: 300px; grid-template-columns: 1fr; align-items: start; }
  .footer-sign { justify-self: start; text-align: left; }
}

@media (max-width: 380px) {
  .journal-screen { font-size: 7.8px; }
  .terminal-header { padding-bottom: .4em; }
  .terminal-section-title { margin-top: .5em; }
  .terminal-search { margin-top: .35em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .journal-scene *, .journal-scene *::before, .journal-scene *::after, .reveal { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .journal-screen::before { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* Temporary fullscreen CRT concept */
.crt-layout { color: #7ce98a; background: #020604; }
.crt-layout .journal-header {
  color: #78db83;
  border-bottom: 1px solid rgba(123, 239, 139, .28);
  background: linear-gradient(180deg, rgba(2, 11, 6, .96), rgba(2, 11, 6, .78));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .26);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  text-shadow: 0 0 8px rgba(109, 255, 131, .35);
  animation: crt-header-in .8s .35s both;
}
.crt-layout .journal-header.is-scrolled { background: rgba(2, 11, 6, .96); box-shadow: 0 12px 32px rgba(0, 0, 0, .38); }
.crt-layout .journal-brand span {
  color: #89ef96;
  border: 0;
  background: currentColor;
  box-shadow: none;
}
.crt-layout .journal-header nav a::after { bottom: 3px; height: 1px; background: #89ef96; box-shadow: 0 0 8px #89ef96; }
.crt-layout .header-folio b { color: #c2ffc9; }

.crt-layout .journal-hero { height: 100svh; min-height: 620px; background: #010302; }
.crt-layout .journal-scene { width: 100%; height: 100%; aspect-ratio: auto; background: #030b06; }
.crt-layout .scene-background,
.crt-layout .journal-scene__art,
.crt-layout .journal-hands { display: none; }
.crt-layout .journal-screen {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: #71dc7f;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(17, 49, 25, .72), rgba(3, 13, 7, .96) 65%, #010402 100%),
    #020905;
  box-shadow:
    inset 0 0 0 10px rgba(0, 0, 0, .72),
    inset 0 0 90px rgba(0, 0, 0, .92),
    inset 0 0 180px rgba(0, 0, 0, .52);
  font-size: clamp(12px, 1.02vw, 17px);
  line-height: 1.45;
  text-shadow: 0 0 5px rgba(104, 255, 124, .48), 0 0 15px rgba(73, 205, 92, .14);
  animation: crt-power-on .68s cubic-bezier(.2, .7, .2, 1) both;
  transform-origin: center;
}
.crt-layout .journal-screen::before {
  z-index: 20;
  opacity: .5;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0, 0, 0, .2) 3px, rgba(0, 0, 0, .2) 4px),
    repeating-linear-gradient(to right, rgba(255, 0, 0, .014) 0 1px, rgba(0, 255, 70, .012) 1px 2px, rgba(0, 70, 255, .012) 2px 3px);
  animation: crt-scan 9s linear infinite;
}
.crt-layout .journal-screen::after {
  z-index: 21;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .48) 100%),
    linear-gradient(90deg, rgba(117, 255, 135, .025), transparent 18% 82%, rgba(117, 255, 135, .02));
}
.crt-layout .journal-screen__glow {
  z-index: 19;
  opacity: .2;
  background: linear-gradient(110deg, rgba(210, 255, 216, .11), transparent 18% 78%, rgba(147, 255, 160, .04));
  animation: crt-flicker 5.8s steps(1, end) infinite;
}
.crt-layout .boot-sequence,
.crt-layout .terminal-shell { padding: calc(var(--header-height) + clamp(30px, 5vw, 72px)) clamp(22px, 7vw, 112px) clamp(78px, 8vw, 112px); }
.crt-layout .boot-sequence { align-content: center; gap: 1.2em; background: transparent; transition: opacity .28s, visibility .28s; }
.crt-layout .boot-sequence > * { width: min(1060px, 100%); margin-inline: auto; }
.crt-layout .boot-label {
  padding: 0 0 .9em;
  color: #b8ffc1;
  border-bottom: 1px solid rgba(137, 239, 150, .55);
  font-size: .9em;
  letter-spacing: .08em;
}
.crt-layout .boot-label::before { content: "[ POWER ON SELF TEST ]"; display: block; margin-bottom: .65em; color: #4e9b5a; font-size: .72em; }
.crt-layout .boot-output { min-height: 13em; color: #92f59f; font-size: clamp(1em, 1.35vw, 1.32em); line-height: 1.55; }
.crt-layout .boot-sequence small { color: #4f9d5b; font-size: .7em; letter-spacing: .08em; }
.crt-layout .terminal-shell { width: 100%; max-width: 1320px; margin: 0 auto; }
.crt-layout .terminal-header { padding-bottom: .9em; border-bottom-color: rgba(122, 235, 136, .45); }
.crt-layout .terminal-header strong { color: #b8ffc1; letter-spacing: .08em; }
.crt-layout .terminal-status-light { color: #041008; background: #8df29a; box-shadow: 0 0 14px rgba(112, 255, 133, .34); }
.crt-layout .terminal-sound { border-color: rgba(123, 239, 139, .6); }
.crt-layout .terminal-section-title { margin-top: 1.7em; color: #b8ffc1; letter-spacing: .08em; }
.crt-layout .terminal-posts { gap: .42em; }
.crt-layout .terminal-post { padding: .48em .65em .5em 1.65em; }
.crt-layout .terminal-post.is-selected,
.crt-layout .terminal-post:hover,
.crt-layout .terminal-post:focus-visible { border-color: rgba(144, 255, 158, .35); background: rgba(113, 220, 127, .08); box-shadow: inset 3px 0 0 #8df29a; }
.crt-layout .terminal-post strong { font-size: 1em; }
.crt-layout .terminal-post small { margin-top: .15em; font-size: .7em; }
.crt-layout .terminal-search { padding-top: 1em; border-top-color: rgba(123, 239, 139, .48); font-size: 1.04em; }
.crt-layout .terminal-message { margin-top: .55em; font-size: .74em; }
.crt-layout .scene-scroll {
  bottom: 22px;
  color: #8df29a;
  border: 1px solid rgba(141, 242, 154, .65);
  background: rgba(2, 14, 7, .78);
  box-shadow: 0 0 16px rgba(103, 255, 125, .1);
  letter-spacing: .1em;
  transform: translateX(-50%);
}
.crt-layout .scene-scroll b { color: #041008; background: #8df29a; }

@keyframes crt-power-on {
  0% { opacity: 0; transform: scaleX(.02) scaleY(.005); filter: brightness(5); }
  34% { opacity: 1; transform: scaleX(1) scaleY(.006); filter: brightness(3); }
  62% { transform: scaleX(1) scaleY(1.015); filter: brightness(1.35); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes crt-header-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes crt-scan { to { background-position: 0 24px, 0 0; } }
@keyframes crt-flicker { 0%, 94%, 97%, 100% { opacity: .2; } 95% { opacity: .12; } 96% { opacity: .27; } }

@media (max-width: 760px) {
  .crt-layout .journal-header nav {
    color: #8df29a;
    border: 1px solid rgba(141, 242, 154, .6);
    background: rgba(2, 13, 7, .98);
    box-shadow: 0 0 24px rgba(91, 255, 115, .14);
  }
  .crt-layout .journal-menu { color: #8df29a; border: 1px solid rgba(141, 242, 154, .65); border-radius: 2px; background: transparent; }
}

@media (max-width: 760px) {
  .crt-layout .journal-hero { min-height: 600px; }
  .crt-layout .journal-scene { height: 100%; }
  .crt-layout .journal-screen { inset: 0; width: auto; height: auto; border-radius: 0; font-size: clamp(10px, 2.8vw, 13px); }
  .crt-layout .boot-sequence,
  .crt-layout .terminal-shell { padding: calc(var(--header-height) + 24px) 20px 76px; }
  .crt-layout .boot-output { min-height: 18em; font-size: 1em; line-height: 1.46; }
  .crt-layout .terminal-section-title { margin-top: 1em; }
  .crt-layout .terminal-post { padding-block: .42em; }
  .crt-layout .terminal-search { width: 100%; margin-top: auto; font-size: 16px; transform: none; }
  .crt-layout .terminal-message { font-size: .72em; }
  .crt-layout .scene-scroll { bottom: 12px; }
}

@media (max-width: 380px) {
  .crt-layout .journal-screen { font-size: 9.5px; }
  .crt-layout .boot-sequence,
  .crt-layout .terminal-shell { padding-inline: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .crt-layout .journal-screen,
  .crt-layout .journal-header,
  .crt-layout .journal-screen::before,
  .crt-layout .journal-screen__glow { animation: none !important; }
}

/* CRT scrollytelling archive */
.crt-layout .journal-archive {
  position: relative;
  padding: 0 0 16svh;
  overflow: clip;
  color: #82e990;
  background:
    radial-gradient(circle at 18% 18%, rgba(35, 105, 48, .22), transparent 30%),
    radial-gradient(circle at 86% 68%, rgba(25, 84, 38, .19), transparent 34%),
    linear-gradient(180deg, #020704, #041009 48%, #020604);
  isolation: isolate;
}
.crt-layout .journal-archive::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  height: auto;
  opacity: .32;
  clip-path: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0, 0, 0, .22) 4px),
    linear-gradient(90deg, transparent, rgba(119, 255, 139, .03) 50%, transparent);
  pointer-events: none;
}
.crt-layout .journal-archive::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .28;
  background-image: radial-gradient(circle, rgba(131, 245, 146, .42) 0 1px, transparent 1.5px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent);
  pointer-events: none;
}
.story-hud {
  position: sticky;
  z-index: 30;
  top: calc(var(--header-height) + 14px);
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 15px;
  color: #6fca7b;
  border: 1px solid rgba(124, 237, 139, .3);
  background: rgba(1, 10, 5, .76);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3), inset 0 0 18px rgba(91, 231, 111, .035);
  backdrop-filter: blur(10px);
  font: 700 9px/1 var(--mono);
  letter-spacing: .1em;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.story-hud.is-visible { opacity: 1; transform: none; }
.story-hud > i { height: 2px; overflow: hidden; background: rgba(112, 218, 125, .2); }
.story-hud > i > b { width: 100%; height: 100%; display: block; background: #8df29a; box-shadow: 0 0 10px #8df29a; transform: scaleX(0); transform-origin: left; }
.story-hud > strong { color: #b7ffc0; font: inherit; }

.crt-layout .archive-heading {
  position: relative;
  z-index: 2;
  width: min(1320px, 100%);
  min-height: 100svh;
  margin: -40px auto 0;
  padding: calc(var(--header-height) + 12svh) clamp(22px, 6vw, 92px) 14svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}
.crt-layout .archive-heading::before {
  content: "ARCHIVE MOUNTED / SCROLL TO READ";
  position: absolute;
  right: clamp(22px, 6vw, 92px);
  bottom: 9svh;
  color: #477f4f;
  font: 700 9px/1 var(--mono);
  letter-spacing: .12em;
}
.crt-layout .archive-heading::after {
  content: "↓";
  position: absolute;
  bottom: 7.5svh;
  left: clamp(22px, 6vw, 92px);
  color: #9cffaa;
  font: 400 clamp(38px, 5vw, 68px)/1 var(--mono);
  text-shadow: 0 0 18px rgba(128, 255, 146, .36);
  animation: story-arrow 1.5s ease-in-out infinite;
}
.crt-layout .archive-heading > div { min-width: 0; }
.crt-layout .archive-heading small { display: block; margin: 20px 0 10px; color: #568e5e; font: 700 10px/1.4 var(--mono); letter-spacing: .13em; }
.crt-layout .archive-command {
  margin: 0;
  padding: 9px 11px;
  color: #06100a;
  background: #8df29a;
  box-shadow: 0 0 18px rgba(111, 255, 132, .22);
  font-size: 9px;
  transform: none;
}
.crt-layout .archive-heading h2 {
  width: min(100%, 980px);
  max-width: none;
  margin: 0;
  color: #a6ffb2;
  font: 700 clamp(56px, 6vw, 92px)/.84 var(--mono);
  letter-spacing: -.075em;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(100, 255, 122, .15);
}
.crt-layout .archive-heading > p { min-width: 132px; color: #52885a; font: 700 10px/1.4 var(--mono); }
.crt-layout .archive-heading > p b { color: #a6ffb2; font: 700 clamp(64px, 6.4vw, 104px)/.8 var(--mono); text-shadow: 0 0 20px rgba(100, 255, 122, .18); }

.crt-layout .archive-list { width: 100%; min-height: 0; margin: 0; padding: 0 clamp(16px, 5vw, 76px); display: block; }
.story-step { position: relative; min-height: 128svh; padding-bottom: 22svh; }
.story-step:last-child { min-height: 112svh; }
.crt-layout .archive-card {
  --story-y: 110px;
  --story-scale: .86;
  --story-opacity: .16;
  --story-blur: 7px;
  --story-rotate: 4.5deg;
  --story-line: 0%;
  position: sticky;
  top: calc(var(--header-height) + clamp(66px, 9svh, 100px));
  width: min(1320px, 100%);
  height: min(72svh, 760px);
  min-height: 520px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 76px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px 36px;
  color: #80e58d;
  border: 1px solid rgba(121, 231, 135, .28);
  background:
    linear-gradient(135deg, rgba(121, 231, 135, .075), transparent 34%),
    radial-gradient(circle at 80% 22%, rgba(104, 238, 122, .11), transparent 32%),
    rgba(2, 12, 7, .93);
  box-shadow: 0 38px 100px rgba(0, 0, 0, .48), inset 0 0 70px rgba(69, 191, 86, .035);
  text-decoration: none;
  opacity: var(--story-opacity);
  filter: blur(var(--story-blur));
  transform: perspective(1400px) translate3d(0, var(--story-y), 0) scale(var(--story-scale)) rotateX(var(--story-rotate));
  transform-origin: center top;
  will-change: transform, opacity, filter;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.crt-layout .archive-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .72;
  background:
    linear-gradient(90deg, rgba(141, 242, 154, .18) 1px, transparent 1px),
    linear-gradient(rgba(141, 242, 154, .1) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at 70% 40%, #000, transparent 66%);
  pointer-events: none;
}
.crt-layout .archive-card::after {
  content: "";
  position: absolute;
  top: var(--story-line);
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(161, 255, 173, .8), transparent);
  box-shadow: 0 0 16px rgba(116, 255, 137, .34);
  pointer-events: none;
}
.story-step.is-active .archive-card {
  border-color: rgba(151, 255, 164, .62);
  box-shadow: 0 42px 110px rgba(0, 0, 0, .55), 0 0 36px rgba(84, 221, 103, .08), inset 0 0 80px rgba(69, 191, 86, .05);
}
.archive-file { position: relative; z-index: 2; grid-column: 1 / -1; color: #5ea968; font: 700 10px/1 var(--mono); letter-spacing: .12em; }
.crt-layout .archive-index {
  position: absolute;
  z-index: 0;
  right: clamp(20px, 4vw, 60px);
  bottom: -.14em;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  color: rgba(133, 246, 147, .055);
  background: transparent;
  font: 700 clamp(180px, 28vw, 420px)/.76 var(--mono);
  letter-spacing: -.15em;
  pointer-events: none;
}
.crt-layout .archive-card h3 {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  align-self: end;
  max-width: 1080px;
  margin: 0;
  color: #b4ffbd;
  font: 700 clamp(44px, 7.1vw, 106px)/.9 var(--mono);
  letter-spacing: -.07em;
  text-wrap: balance;
  text-shadow: 0 0 22px rgba(109, 255, 130, .12);
}
.crt-layout .archive-card time { position: relative; z-index: 2; grid-column: 1; color: #5da367; font: 700 10px/1 var(--mono); letter-spacing: .1em; }
.crt-layout .archive-card p { position: relative; z-index: 2; grid-column: 1; max-width: 760px; margin: 5px 0 0; color: #78bd81; font: 400 clamp(15px, 1.6vw, 20px)/1.55 var(--mono); }
.crt-layout .archive-open {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 4;
  align-self: end;
  padding: 12px 14px;
  color: #06100a;
  background: #8df29a;
  box-shadow: 0 0 18px rgba(119, 255, 140, .18);
  font: 700 10px/1 var(--mono);
  letter-spacing: .08em;
}
.crt-layout .archive-card:hover,
.crt-layout .archive-card:focus-visible { background: rgba(5, 22, 11, .96); transform: perspective(1400px) translate3d(0, var(--story-y), 0) scale(var(--story-scale)) rotateX(var(--story-rotate)); }
.crt-layout .archive-loading { min-height: 80svh; color: #5f9e68; font-family: var(--mono); }
.crt-layout .archive-loading i { border-color: rgba(126, 229, 140, .2); border-top-color: #8df29a; }
.crt-layout .empty-journal { min-height: 70svh; color: #80dd8c; border-color: rgba(126, 229, 140, .35); background: rgba(3, 14, 8, .7); }
.crt-layout .empty-journal span,
.crt-layout .empty-journal h3 { color: #a6ffb2; font-family: var(--mono); }
.crt-layout .empty-journal p { color: #679f70; font-family: var(--mono); }
.crt-layout .no-script-note { color: #84e38f; border-color: #72cf7d; font-family: var(--mono); }

.crt-layout .single-shell {
  color: #86e591;
  background:
    radial-gradient(circle at 20% 15%, rgba(49, 135, 61, .16), transparent 34%),
    repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0, 0, 0, .2) 4px),
    #020704;
}
.crt-layout .single-back { color: #06100a; background: #8df29a; box-shadow: 0 0 18px rgba(119, 255, 140, .18); }
.crt-layout .single-post header { border-bottom-color: rgba(125, 231, 138, .36); }
.crt-layout .single-post header span { color: #61aa6b; font-family: var(--mono); }
.crt-layout .single-post > header h1 { color: #b4ffbd; font-family: var(--mono); text-shadow: 0 0 22px rgba(109, 255, 130, .12); }
.crt-layout .single-post header p,
.crt-layout .single-body { color: #88c990; font-family: var(--mono); }
.crt-layout .single-body > p:first-child::first-letter,
.crt-layout .single-body a { color: #b4ffbd; }
.crt-layout .single-body blockquote { color: #9bf6a6; border-color: rgba(125, 231, 138, .36); }
.crt-layout .single-cover { border-color: #102217; box-shadow: 0 18px 60px rgba(0, 0, 0, .45); }

.crt-layout .journal-footer { color: #70b979; border-top: 1px solid rgba(126, 229, 140, .3); background: #010503; font-family: var(--mono); }
.crt-layout .journal-footer > div:first-child p { color: #4f8156; font-family: var(--mono); }
.crt-layout .journal-footer nav a:hover,
.crt-layout .footer-sign i { color: #9cffaa; }
.crt-layout .footer-sign b { color: #8df29a; font-family: var(--mono); }

@keyframes story-arrow { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(10px); opacity: 1; } }

@media (max-width: 767px) {
  .story-hud { top: calc(var(--header-height) + 9px); width: calc(100% - 24px); grid-template-columns: minmax(70px, 1fr) auto; }
  .story-hud > span { display: none; }
  .crt-layout .archive-heading { min-height: 92svh; margin-top: -35px; padding: calc(var(--header-height) + 11svh) 20px 13svh; display: block; }
  .crt-layout .archive-heading h2 { margin-top: 16px; font-size: clamp(48px, 15vw, 78px); line-height: .88; }
  .crt-layout .archive-heading > p { margin-top: 40px; text-align: left; }
  .crt-layout .archive-heading > p b { font-size: 70px; }
  .crt-layout .archive-heading::before { right: 20px; bottom: 7svh; }
  .crt-layout .archive-heading::after { left: 20px; bottom: 6svh; }
  .crt-layout .archive-list { padding-inline: 12px; }
  .story-step { min-height: 118svh; padding-bottom: 16svh; }
  .story-step:last-child { min-height: 105svh; }
  .crt-layout .archive-card {
    top: calc(var(--header-height) + 58px);
    height: min(70svh, 620px);
    min-height: 470px;
    padding: 25px 22px;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    gap: 11px;
  }
  .crt-layout .archive-card h3 { font-size: clamp(37px, 11vw, 58px); line-height: .92; }
  .crt-layout .archive-card time,
  .crt-layout .archive-card p,
  .crt-layout .archive-open { grid-column: 1; }
  .crt-layout .archive-card p { font-size: 13px; }
  .crt-layout .archive-open { grid-row: auto; justify-self: start; }
  .crt-layout .archive-index { right: 14px; font-size: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-step { min-height: auto; padding: 24px 0; }
  .crt-layout .archive-card { position: relative; top: auto; height: auto; min-height: 500px; opacity: 1 !important; filter: none !important; transform: none !important; }
  .crt-layout .archive-heading::after { animation: none; }
}

/* Direct article reader and accessible light mode */
.reader-mode-toggle {
  position: fixed;
  z-index: 95;
  top: calc(var(--header-height) + 16px);
  right: clamp(16px, 4vw, 62px);
  min-height: 42px;
  padding: 9px 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #9cffaa;
  border: 1px solid rgba(141, 242, 154, .62);
  border-radius: 2px;
  background: rgba(2, 13, 7, .9);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28), 0 0 18px rgba(101, 255, 124, .08);
  font: 700 9px/1 var(--mono);
  letter-spacing: .08em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.reader-mode-toggle:hover { transform: translateY(-2px); }
.reader-mode-toggle span { font-size: 18px; line-height: 1; }
.reader-mode-toggle b { font: inherit; }
.reader-mode-toggle[aria-pressed="true"] { color: #fff; border-color: #111; background: #111; box-shadow: 0 8px 28px rgba(0, 0, 0, .16); }

.crt-layout.is-article-page { background: #020704; }
.crt-layout.is-article-page .journal-hero,
.crt-layout.is-article-page .journal-archive { display: none; }
.crt-layout.is-article-page .single-shell {
  min-height: 100svh;
  padding: calc(var(--header-height) + 96px) 20px clamp(110px, 12vw, 170px);
}
.crt-layout.is-article-page .single-post { width: min(860px, 100%); }
.crt-layout.is-article-page .single-back { margin-bottom: clamp(52px, 7vw, 82px); }
.article-loading {
  min-height: calc(100svh - var(--header-height) - 190px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: #7cdb88;
  font: 700 10px/1 var(--mono);
  letter-spacing: .11em;
}
.article-loading span { color: #b4ffbd; font-size: 56px; text-shadow: 0 0 22px rgba(109, 255, 130, .2); animation: terminal-cursor-blink 1s steps(1, end) infinite; }
.article-loading p { margin: 0; }

.crt-layout.is-article-page.reader-light { color: #171717; background: #f7f7f2; }
.reader-light .journal-header,
.reader-light .journal-header.is-scrolled {
  color: #141414;
  border-bottom-color: rgba(0, 0, 0, .12);
  background: rgba(255, 255, 252, .94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
  text-shadow: none;
}
.reader-light .journal-brand span {
  color: #111;
  border: 0;
  background: currentColor;
  box-shadow: none;
}
.reader-light .journal-header nav a::after { background: #111; box-shadow: none; }
.reader-light .header-folio b { color: #111; }
.reader-light .single-shell {
  color: #171717;
  background: #fdfdf9;
  transition: color .2s, background .2s;
}
.reader-light .single-back {
  color: #fff;
  background: #111;
  box-shadow: none;
}
.reader-light .single-post header { border-bottom-color: rgba(0, 0, 0, .22); }
.reader-light .single-post header span { color: #616161; }
.reader-light .single-post > header h1 {
  color: #111;
  font-family: var(--serif);
  letter-spacing: -.055em;
  text-shadow: none;
}
.reader-light .single-post header p { color: #535353; font-family: var(--serif); }
.reader-light .single-body {
  color: #202020;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.78;
}
.reader-light .single-body h2,
.reader-light .single-body h3 { color: #111; font-family: var(--serif); }
.reader-light .single-body > p:first-child::first-letter,
.reader-light .single-body a { color: #174f2a; }
.reader-light .single-body blockquote { color: #252525; border-color: rgba(0, 0, 0, .24); }
.reader-light .single-cover { border-color: #fff; box-shadow: 0 18px 55px rgba(0, 0, 0, .14); }
.reader-light .article-loading { color: #555; }
.reader-light .article-loading span { color: #111; text-shadow: none; }
.reader-light .journal-footer {
  color: #393939;
  border-top-color: rgba(0, 0, 0, .14);
  background: #efefe9;
}
.reader-light .journal-footer > div:first-child p { color: #666; }
.reader-light .journal-footer nav a:hover,
.reader-light .footer-sign i,
.reader-light .footer-sign b { color: #111; }

@media (max-width: 760px) {
  .reader-light .journal-header nav { color: #111; border-color: #111; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
  .reader-light .journal-menu { color: #111; border-color: #111; background: #fff; }
}

@media (max-width: 760px) {
  .reader-mode-toggle { top: calc(var(--header-height) + 10px); right: 12px; min-height: 38px; padding: 8px 10px; }
  .reader-mode-toggle span { font-size: 16px; }
  .crt-layout.is-article-page .single-shell { padding: calc(var(--header-height) + 86px) 18px 100px; }
  .crt-layout.is-article-page .single-back { margin-bottom: 48px; }
  .reader-light .single-post > header h1 { font-size: clamp(46px, 14vw, 70px); }
}