/* cicopy.com — case-file theme
Palette (dark theme, the default):
--ink: #121212 (page background)
--panel: #1c1a17 (slightly warm dark panel)
--paper: #e9e2d0 (aged manila/paper for cards, constant across themes)
--cream: #f2ede1 (body text on --ink/--panel)
--ink-text: #121212 (dark ink text on --paper surfaces, constant across themes)
--red: #b3382c (case-stamp red)
--red-dim: #7a2a21
--line: #3a352c (hairline borders on dark)
--muted-1/2/3: three tiers of dimmed text, lightest to most-legible
The light theme (html.theme-light) redefines --ink, --panel, --cream,
--line, --line-light, and the three --muted tiers so text stays readable
against a light background. --paper and --ink-text stay fixed in both
themes on purpose: they represent the physical color of a case file
(manila folder + dark ink), not the surrounding room's lighting. See
CMS-GUIDE.md.
*/
/* Font loading moved out of CSS: every page loads IBM Plex Mono and Source
Serif 4 via + tags in
, ahead of this stylesheet, so the browser can start the font
request before it has to parse this file. See CMS-GUIDE.md. */
:root {
--ink: #121212;
--panel: #1c1a17;
--paper: #e9e2d0;
--cream: #f2ede1;
--ink-text: #121212;
--red: #b3382c;
--red-dim: #7a2a21;
--line: #3a352c;
--line-light: #4a453a;
--muted-1: #9a927e;
--muted-2: #cfc7b4;
--muted-3: #7d7666;
--max-width: 760px;
}
/* Light theme: swaps the room's lighting, not the case file itself.
--paper and --ink-text are deliberately absent here; a manila folder
and dark ink don't change color depending on the site's theme. Every
value below is contrast-checked against the new --ink background
(WCAG AA or better for its actual use: body text, links, muted labels). */
html.theme-light {
--ink: #f5f0e4;
--panel: #ffffff;
--cream: #1c1a17;
--red-dim: #7a2a21;
--line: #ddd4bd;
--line-light: #c9bc98;
--muted-1: #5c5445;
--muted-2: #2b2820;
--muted-3: #6e6555;
}
html.theme-light .case-card {
border-color: var(--line);
}
html.theme-light .mock-file {
border-color: var(--line);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--ink);
color: var(--cream);
font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
font-size: 18px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
.mono {
font-family: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
}
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
/* ---------- Header / folder-tab nav ---------- */
.site-header {
border-bottom: 1px solid var(--line);
background: var(--panel);
}
.header-inner {
max-width: 980px;
margin: 0 auto;
padding: 18px 24px 0;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.wordmark {
font-family: 'IBM Plex Mono', monospace;
font-weight: 600;
font-size: 20px;
letter-spacing: 0.02em;
color: var(--cream);
padding-bottom: 14px;
}
.wordmark span { color: var(--red); }
.folder-tabs {
display: flex;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.folder-tabs a {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cream);
background: var(--ink);
border: 1px solid var(--line);
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 8px 16px;
}
.folder-tabs a:hover,
.folder-tabs a[aria-current="page"] {
color: var(--ink-text);
background: var(--paper);
text-decoration: none;
}
/* ---------- Layout ---------- */
main {
max-width: var(--max-width);
margin: 0 auto;
padding: 48px 24px 80px;
}
.wide {
max-width: 980px;
}
/* ---------- Homepage hero ---------- */
.hero {
border-bottom: 1px solid var(--line);
background: var(--panel);
}
.hero-inner {
max-width: 980px;
margin: 0 auto;
padding: 56px 24px 64px;
}
.hero-tag {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
border: 1px solid var(--red-dim);
padding: 4px 10px;
border-radius: 3px;
margin-bottom: 20px;
}
.hero h1 {
font-family: 'Source Serif 4', serif;
font-size: clamp(32px, 5vw, 48px);
line-height: 1.15;
margin: 0 0 16px;
max-width: 18ch;
}
.hero p {
font-size: 19px;
color: var(--muted-2);
max-width: 55ch;
margin: 0;
}
/* ---------- Anatomy diagram (homepage, under hero) ---------- */
.anatomy {
border-bottom: 1px solid var(--line);
background: var(--ink);
min-height: 76vh;
display: flex;
align-items: center;
}
.anatomy-inner {
max-width: 980px;
margin: 0 auto;
padding: 40px 24px;
width: 100%;
}
.anatomy-lede {
font-size: 16px;
color: var(--muted-2);
margin: 0 0 36px;
max-width: 70ch;
}
.anatomy-lede a { color: var(--red); }
.anatomy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.mock-file {
background: var(--paper);
color: var(--ink-text);
border: 1px solid transparent;
border-radius: 4px;
padding: 24px 26px;
display: grid;
gap: 16px;
}
.mock-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.03em;
color: #6b6455;
border: 1px solid #c9c0a8;
border-radius: 3px;
padding: 9px 11px;
position: relative;
}
.mock-meta strong { color: var(--ink-text); }
.mock-h1 {
font-family: 'Source Serif 4', serif;
font-size: 19px;
font-weight: 700;
line-height: 1.35;
color: var(--ink-text);
position: relative;
padding-left: 2px;
}
.mock-block {
font-family: 'Source Serif 4', serif;
font-size: 14px;
color: #4a4436;
position: relative;
padding: 5px 0 5px 2px;
}
.mock-block em {
font-style: normal;
font-weight: 600;
color: var(--ink-text);
}
.mock-tag {
position: absolute;
top: -10px;
left: -10px;
background: var(--red);
color: var(--paper);
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
font-weight: 600;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.anatomy-notes {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 22px;
}
.anatomy-notes li {
display: flex;
gap: 14px;
align-items: flex-start;
}
.anatomy-no {
flex-shrink: 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
font-weight: 600;
color: var(--red);
border: 1px solid var(--red-dim);
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.anatomy-notes strong {
color: var(--cream);
display: block;
margin-bottom: 3px;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.anatomy-notes div {
font-size: 14px;
line-height: 1.55;
color: var(--muted-2);
}
@media (max-width: 800px) {
.anatomy { min-height: 0; }
.anatomy-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* ---------- Start-here callout (homepage) ---------- */
.start-here {
max-width: 980px;
margin: 0 auto;
padding: 28px 24px 0;
}
.start-here a {
display: block;
border: 1px solid var(--red-dim);
border-radius: 4px;
padding: 16px 20px;
text-decoration: none;
}
.start-here a:hover { background: rgba(179, 56, 44, 0.08); }
.start-here-tag {
display: block;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 6px;
}
.start-here strong {
font-family: 'Source Serif 4', serif;
font-size: 17px;
line-height: 1.4;
color: var(--cream);
font-weight: 600;
}
/* ---------- Author bio (bottom of each post) ---------- */
.author-bio {
display: flex;
align-items: flex-start;
gap: 18px;
margin-top: 48px;
padding: 22px 24px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 4px;
}
.author-bio img {
width: 64px;
height: 64px;
border-radius: 4px;
object-fit: cover;
border: 1px solid var(--line);
flex-shrink: 0;
}
.author-bio-name {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cream);
margin: 0 0 8px;
}
.author-bio-text {
font-size: 15px;
line-height: 1.55;
color: var(--muted-2);
margin: 0;
max-width: 56ch;
}
.author-bio-text a { color: var(--red); }
/* ---------- Corrections log (bottom of each post) ---------- */
.corrections {
margin-top: 20px;
padding: 14px 20px;
border: 1px solid var(--line);
border-radius: 4px;
}
.corrections-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red-dim);
margin: 0 0 8px;
}
.corrections-text {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
color: var(--muted-3);
margin: 0;
}
.corrections ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.corrections li {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
line-height: 1.5;
color: var(--muted-1);
}
.corrections li strong { color: var(--cream); }
.corrections-report {
margin: 12px 0 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
}
.corrections-report a { color: var(--red); }
/* ---------- Case cards ---------- */
.case-grid {
max-width: 980px;
margin: 0 auto;
padding: 56px 24px;
display: grid;
gap: 20px;
}
.section-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-1);
margin: 0 0 20px;
}
.case-card {
display: block;
background: var(--paper);
color: var(--ink-text);
border-radius: 4px;
padding: 24px 28px;
border: 1px solid #0000;
transition: transform 0.12s ease;
}
.case-card:hover {
text-decoration: none;
transform: translateY(-2px);
}
.case-card .case-no {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
letter-spacing: 0.08em;
color: var(--red-dim);
margin-bottom: 8px;
}
.case-card h3 {
font-family: 'Source Serif 4', serif;
font-size: 22px;
line-height: 1.3;
margin: 0 0 10px;
color: var(--ink-text);
}
.case-card p {
margin: 0;
font-size: 16px;
color: #4a4436;
}
/* ---------- Article page ---------- */
.case-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
letter-spacing: 0.06em;
color: var(--muted-1);
border: 1px solid var(--line);
border-radius: 4px;
padding: 10px 16px;
margin-bottom: 32px;
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
}
.case-meta strong { color: var(--cream); font-weight: 600; }
article h1 {
font-size: clamp(32px, 5.5vw, 46px);
line-height: 1.15;
margin: 0 0 28px;
}
article h2 {
font-size: 30px;
line-height: 1.25;
margin: 52px 0 8px;
}
article h3 {
font-family: 'IBM Plex Mono', monospace;
font-size: 17px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--red);
margin: 34px 0 10px;
}
article p { margin: 0 0 20px; }
article strong { color: var(--cream); }
/* Stamp badge, used sparingly above the closing section */
.stamp {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red);
border: 2px solid var(--red-dim);
border-radius: 3px;
padding: 5px 12px;
transform: rotate(-1.5deg);
margin: 0 0 16px;
}
.related {
margin-top: 64px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.related ul {
list-style: none;
padding: 0;
margin: 12px 0 0;
display: grid;
gap: 10px;
}
/* ---------- Post layout (article + sidebar) ---------- */
.post-layout {
display: grid;
grid-template-columns: 1fr 240px;
gap: 32px;
align-items: start;
}
.post-main { min-width: 0; }
.post-sidebar {
position: sticky;
top: 24px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 4px;
padding: 22px 24px;
}
.post-sidebar .section-label { margin: 0 0 16px; }
.post-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 16px;
}
.post-sidebar li { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.post-sidebar li:last-child { border-bottom: none; padding-bottom: 0; }
.post-sidebar a {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
line-height: 1.5;
display: block;
}
/* ---------- Blog index (top reads / categories) ---------- */
.category-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--red-dim);
border: 1px solid var(--red-dim);
border-radius: 3px;
padding: 3px 9px;
display: inline-block;
margin-bottom: 10px;
}
.case-card .case-date {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
color: var(--muted-3);
margin-top: 10px;
}
/* ---------- Homepage "view all" link (below the Latest Case Files grid) ---------- */
.view-all {
max-width: 980px;
margin: 0 auto;
padding: 0 24px 56px;
text-align: center;
}
.view-all a {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--red);
border: 1px solid var(--red-dim);
border-radius: 4px;
padding: 10px 22px;
}
.view-all a:hover {
background: rgba(179, 56, 44, 0.08);
text-decoration: none;
}
/* ---------- About page ---------- */
.about-lede {
font-size: 21px;
color: var(--muted-2);
margin-bottom: 12px;
}
.byline {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 28px;
}
.byline img {
width: 108px;
height: 108px;
border-radius: 4px;
object-fit: cover;
border: 1px solid var(--line);
}
.byline-name {
font-family: 'IBM Plex Mono', monospace;
font-size: 15px;
font-weight: 600;
color: var(--cream);
margin: 0;
}
.byline-role {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
color: var(--muted-1);
margin: 2px 0 0;
}
.roadmap-list {
margin: 0 0 20px;
padding-left: 22px;
}
.roadmap-list li { margin-bottom: 8px; }
/* ---------- Footer ---------- */
.site-footer {
border-top: 1px solid var(--line);
background: var(--panel);
}
.footer-inner {
max-width: 980px;
margin: 0 auto;
padding: 28px 24px;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
color: var(--muted-3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
}
.footer-inner a { color: var(--muted-1); }
.footer-grid {
max-width: 980px;
margin: 0 auto;
padding: 40px 24px 24px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 28px;
}
.footer-grid h4 {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-1);
margin: 0 0 12px;
}
.footer-grid p {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
color: var(--muted-3);
max-width: 28ch;
margin: 10px 0 0;
}
.footer-grid ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
}
.footer-grid a { color: var(--muted-1); }
.footer-bottom {
max-width: 980px;
margin: 0 auto;
padding: 16px 24px 28px;
border-top: 1px solid var(--line);
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
color: var(--muted-3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
}
@media (max-width: 860px) {
.post-layout { grid-template-columns: 1fr; }
.post-sidebar { position: static; }
}
@media (max-width: 700px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
body { font-size: 17px; }
.header-inner { padding-top: 14px; }
.wordmark { padding-bottom: 10px; font-size: 18px; }
.folder-tabs a { padding: 7px 12px; font-size: 12px; }
}
/* ---------- 404 page ---------- */
.tape-band {
background: repeating-linear-gradient(
45deg,
#d9a628,
#d9a628 24px,
#161616 24px,
#161616 48px
);
padding: 10px 0;
overflow: hidden;
}
.tape-band span {
display: block;
text-align: center;
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.12em;
color: #161616;
background: #d9a628;
padding: 7px 0;
border-top: 2px solid #161616;
border-bottom: 2px solid #161616;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.error-stamp {
font-size: 22px;
padding: 14px 26px;
margin: 8px 0 28px;
transform: rotate(-4deg);
}
/* ---------- Print ---------- */
@media print {
body {
background: #fff;
color: #111;
font-size: 12pt;
}
.site-header,
.site-footer,
.post-sidebar,
.anatomy,
.start-here,
.tape-band,
.corrections-report,
#a11y-toggle,
#tts-controls {
display: none !important;
}
main, .wide { max-width: none; padding: 0; }
.post-layout { display: block; }
a { color: #111; text-decoration: underline; }
a[href^="http"]::after,
a[href^="https"]::after {
content: " (" attr(href) ")";
font-size: 9pt;
font-weight: normal;
color: #444;
}
.case-meta {
color: #111;
border-color: #999;
}
.case-meta strong { color: #111; }
article h1, article h2, article h3 { color: #111; page-break-after: avoid; }
article strong { color: #111; }
.stamp {
color: #111;
border-color: #999;
transform: none;
}
.author-bio, .corrections {
background: #fff;
border: 1px solid #999;
}
.author-bio-name, .author-bio-text, .corrections-label, .corrections-text, .corrections li {
color: #111;
}
.corrections li strong { color: #111; }
article, .author-bio, .corrections { page-break-inside: avoid; }
}
/* ---------- Accessibility toggle (contrast / larger text) ---------- */
#a11y-toggle {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 999;
display: flex;
gap: 8px;
}
#a11y-toggle button {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--cream);
background: var(--panel);
border: 1px solid var(--line-light);
border-radius: 4px;
padding: 8px 12px;
cursor: pointer;
}
#a11y-toggle button:hover { border-color: var(--red-dim); }
#a11y-toggle button[aria-pressed="true"] {
color: var(--ink-text);
background: var(--paper);
border-color: var(--paper);
}
html.a11y-large body { zoom: 1.2; }
/* High contrast mode redefines the same tokens the light theme does,
pushed to maximum contrast, so it composes correctly with either theme
instead of fighting it with a parallel set of hardcoded colors. Whatever
theme is active underneath, turning this on always produces pure
black/white. --paper and --ink-text (the "physical case file" colors)
also flip here on purpose: contrast mode is allowed to override even the
normally theme-invariant tokens, since maximum contrast is the whole
point. */
html.a11y-contrast {
--ink: #000;
--panel: #000;
--paper: #fff;
--cream: #fff;
--ink-text: #000;
--muted-1: #e5e5e5;
--muted-2: #fff;
--muted-3: #b8b8b8;
--line: #bbb;
--line-light: #fff;
--red: #ff6b5b;
--red-dim: #ff6b5b;
}
/* --red-dim, redefined above, still doesn't clear contrast against the
--paper (white) card background it sits on in these two spots, so it's
forced to pure black like the rest of the card's text. Everything else
on the page gets its contrast-safe color from the token overrides above
with no selector-specific rules needed. */
html.a11y-contrast .case-card .case-no,
html.a11y-contrast .case-card .category-label {
color: #000;
}
html.a11y-contrast #a11y-toggle button[aria-pressed="true"] {
background: #ffd54a;
color: #000;
border-color: #ffd54a;
}
/* ---------- Text-to-speech controls (post pages) ---------- */
#tts-controls { margin: 0 0 28px; }
#tts-controls button {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--red);
background: transparent;
border: 1px solid var(--red-dim);
border-radius: 4px;
padding: 8px 14px;
cursor: pointer;
}
#tts-controls button:hover { background: rgba(179, 56, 44, 0.08); }