/* 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; }
/* BLUF (bottom-line-up-front) summary box: sits right after the H1 on
long reference pages, before the lede, so the takeaways are visible
without reading the article. Uses only existing theme tokens, so it
needs no separate light/dark/contrast overrides. */
.bluf {
border: 1px solid var(--line);
border-left: 3px solid var(--red);
background: var(--panel);
padding: 20px 24px;
margin: 0 0 28px;
}
.bluf-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red);
margin: 0 0 10px;
}
.bluf ul {
margin: 0;
padding-left: 20px;
}
.bluf li {
margin-bottom: 8px;
color: var(--muted-2);
}
.bluf li:last-child { margin-bottom: 0; }
/* Worked example tables: one per framework or acronym mentioned in a long
reference piece (SWOT grid, PEST grid, and so on), always built from facts
already sourced elsewhere on the site rather than an invented scenario. */
.analysis-table-wrap {
overflow-x: auto;
margin: 0 0 28px;
}
.analysis-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.analysis-table caption {
caption-side: top;
text-align: left;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-1);
margin-bottom: 8px;
}
.analysis-table th,
.analysis-table td {
border: 1px solid var(--line);
padding: 10px 14px;
text-align: left;
vertical-align: top;
}
.analysis-table th {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--red);
background: var(--panel);
}
.analysis-table td { color: var(--muted-2); }
/* ---------- 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;
}
/* #a11y-toggle is fixed to the viewport's bottom-right corner, so on short
or narrow windows it can render on top of this last line of the footer.
Reserving extra space below the copyright line keeps that line clear of
the toggle at any window size, instead of trying to guess a breakpoint. */
@media (max-width: 860px) {
.footer-bottom { padding-bottom: 84px; }
}
@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; }
.analysis-table th, .analysis-table td { border-color: #999; color: #111; }
.analysis-table th { background: #fff; }
.analysis-table caption { 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); }