/* ================================================================
IR 2.0 Publication System — Shared Brand
Deretti Cyber Labs
--------------------------------------------------------------
NOTE: Google Fonts are now loaded from each page's with
+ , not
here, to avoid a render-blocking CSS @import round-trip.
================================================================ */
:root {
/* Core palette */
--ink: #0E1116;
--navy: #0B1220;
--navy-2: #0F1A2E;
--navy-line: #1B2940;
--paper: #F4F1EA; /* warm cream for body pages */
--paper-2: #ECE6D9;
--bone: #E6E0D2;
--rule: #C8C0AE;
/* Type colors on paper */
--text: #0E1116;
--text-2: #4A4A48;
--muted: #7A7568;
/* Type colors on dark */
--d-text: #F2EFE8;
--d-text-2: #B7B5AE;
--d-muted: #6F7484;
/* Accent: electric signal green
Hex fallbacks declared first; OKLCH overrides on browsers
that support the function (so the site degrades gracefully). */
--signal: #61C267;
--signal-ink: #2E5A35;
--warn: #D69A45; /* amber */
--alert: #D26257; /* danger */
--info: #6A9DC2; /* steel */
/* Type families */
--display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
--serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
/* Modern OKLCH overrides — only apply where the browser understands oklch().
Using a feature-query so legacy browsers keep the hex above. */
@supports (color: oklch(0.5 0.1 150)) {
:root {
--signal: oklch(0.78 0.17 150);
--signal-ink: oklch(0.30 0.10 150);
--warn: oklch(0.78 0.16 70);
--alert: oklch(0.66 0.18 28);
--info: oklch(0.72 0.10 235);
}
}
/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
/* ===== Page sizing — Letter, but fluid web ===== */
html { background: #d8d3c5; }
body {
font-family: var(--serif);
color: var(--text);
font-size: 11.25pt;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.book {
max-width: 8.5in;
margin: 0 auto;
background: var(--paper);
box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 80px -30px rgba(0,0,0,.35);
}
.page {
width: 8.5in;
min-height: 11in;
padding: 0.85in 0.85in 0.95in;
background: var(--paper);
position: relative;
page-break-after: always;
overflow: hidden;
}
.page--dark {
background: var(--navy);
color: var(--d-text);
}
.page--dark h1, .page--dark h2, .page--dark h3 { color: var(--d-text); }
/* ===== Series header / chrome ===== */
.chrome-top {
position: absolute;
top: 0.5in; left: 0.85in; right: 0.85in;
display: flex; align-items: center; justify-content: space-between;
font-family: var(--display);
font-size: 8.5pt;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
}
.page--dark .chrome-top { color: var(--d-muted); }
.cover .chrome-top { color: var(--d-muted); }
.chrome-top .logo {
display: inline-flex; align-items: center; gap: 10px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.18em;
}
.page--dark .chrome-top .logo { color: var(--d-text); }
.cover .chrome-top .logo { color: var(--d-text); }
.chrome-top .logo .mark {
width: 14px; height: 14px;
background: var(--ink);
position: relative;
}
.page--dark .chrome-top .logo .mark { background: var(--signal); }
.cover .chrome-top .logo .mark { background: var(--signal); }
.chrome-top .logo .mark::after {
content: ""; position: absolute; inset: 3px; background: var(--paper);
}
.page--dark .chrome-top .logo .mark::after { background: var(--navy); }
.cover .chrome-top .logo .mark::after { background: var(--navy); }
.chrome-foot {
position: absolute;
bottom: 0.5in; left: 0.85in; right: 0.85in;
display: flex; align-items: center; justify-content: space-between;
font-family: var(--display);
font-size: 8pt;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
border-top: 1px solid var(--rule);
padding-top: 9px;
}
.page--dark .chrome-foot {
color: var(--d-muted);
border-top-color: var(--navy-line);
}
.chrome-foot .pageno {
font-family: var(--mono);
font-feature-settings: "tnum";
letter-spacing: 0;
}
/* ===== Display typography ===== */
h1, h2, h3, h4, .display {
font-family: var(--display);
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
color: var(--ink);
text-wrap: balance;
}
.page--dark h1, .page--dark h2, .page--dark h3, .page--dark h4,
.cover h1, .cover h2, .cover h3, .cover h4 { color: var(--d-text); }
h1 { font-size: 56pt; line-height: 0.95; font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: 22pt; line-height: 1.05; font-weight: 700; }
h3 { font-size: 13pt; line-height: 1.2; font-weight: 700; letter-spacing: -0.005em; }
h4 { font-size: 9.5pt; line-height: 1.3; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
p { margin: 0 0 0.7em; max-width: 62ch; }
.lede { font-size: 13pt; line-height: 1.5; color: var(--text-2); max-width: 56ch; }
.page--dark .lede { color: var(--d-text-2); }
/* ===== Eyebrow / kicker ===== */
.kicker {
font-family: var(--display);
font-size: 9pt;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--signal-ink);
display: inline-flex; align-items: center; gap: 10px;
}
.page--dark .kicker { color: var(--signal); }
.kicker::before {
content: ""; display: inline-block;
width: 22px; height: 1.5px; background: currentColor;
}
/* ===== Cover ===== */
.cover {
background: var(--navy);
color: var(--d-text);
display: grid;
grid-template-rows: auto 1fr auto;
padding: 0.85in 0.85in 0.95in;
width: 8.5in;
min-height: 11in;
position: relative;
page-break-after: always;
overflow: hidden;
}
.cover .docnum {
font-family: var(--mono);
font-size: 10pt;
color: var(--signal);
letter-spacing: 0.2em;
}
.cover h1 { font-size: 64pt; line-height: 0.92; max-width: 11ch; }
.cover .subtitle {
font-family: var(--serif);
font-style: italic;
font-size: 18pt;
color: var(--d-text-2);
margin-top: 18px;
max-width: 24ch;
font-weight: 400;
}
.cover .abstract {
font-family: var(--serif);
font-size: 11pt;
line-height: 1.55;
color: var(--d-text-2);
max-width: 48ch;
border-top: 1px solid var(--navy-line);
padding-top: 14px;
}
.cover .meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
border-top: 1px solid var(--navy-line);
padding-top: 14px;
font-family: var(--display);
font-size: 8.5pt;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--d-muted);
}
.cover .meta b {
display: block;
color: var(--d-text);
font-family: var(--mono);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
font-size: 10pt;
margin-top: 4px;
}
/* Decorative halftone / grid for cover */
.cover-grid {
position: absolute; inset: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: linear-gradient(to bottom, black 0%, transparent 70%);
}
/* ===== Common content blocks ===== */
.rule { height: 1px; background: var(--rule); border: 0; margin: 18px 0; }
.page--dark .rule { background: var(--navy-line); }
.rule-thick { height: 2px; background: var(--ink); border: 0; margin: 22px 0; }
.section-head {
display: grid;
grid-template-columns: 60px 1fr;
align-items: baseline;
gap: 16px;
border-top: 2px solid var(--ink);
padding-top: 14px;
margin: 28px 0 18px;
}
.section-head .num {
font-family: var(--mono);
font-size: 11pt;
font-weight: 500;
letter-spacing: 0;
color: var(--ink);
}
.page--dark .section-head { border-top-color: var(--d-text); }
.page--dark .section-head .num { color: var(--signal); }
/* Two-column body */
.cols-2 { column-count: 2; column-gap: 28px; }
.cols-2 p { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Card on paper */
.card {
background: var(--paper-2);
border: 1px solid var(--rule);
padding: 18px 18px 16px;
position: relative;
}
.card .label {
font-family: var(--mono);
font-size: 8.5pt;
color: var(--muted);
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.card h3 { margin-bottom: 6px; }
.card p { font-size: 10pt; color: var(--text-2); }
/* Card dark */
.page--dark .card {
background: var(--navy-2);
border-color: var(--navy-line);
}
.page--dark .card p { color: var(--d-text-2); }
.page--dark .card .label { color: var(--d-muted); }
/* Pull quote */
.pull {
font-family: var(--serif);
font-style: italic;
font-size: 18pt;
line-height: 1.3;
color: var(--ink);
border-left: 3px solid var(--signal);
padding: 6px 0 6px 18px;
margin: 22px 0;
max-width: 30ch;
}
.page--dark .pull { color: var(--d-text); }
/* Tables */
.tbl {
width: 100%;
border-collapse: collapse;
font-size: 10pt;
font-family: var(--display);
}
.tbl th, .tbl td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--rule);
vertical-align: top;
}
.tbl thead th {
font-size: 8.5pt;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
border-bottom: 1.5px solid var(--ink);
padding-bottom: 8px;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num {
font-family: var(--mono);
font-feature-settings: "tnum";
}
.page--dark .tbl th, .page--dark .tbl td { border-bottom-color: var(--navy-line); }
.page--dark .tbl thead th { color: var(--d-muted); border-bottom-color: var(--d-text); }
/* Chips */
.chip {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono);
font-size: 8.5pt;
padding: 3px 8px;
border: 1px solid var(--ink);
text-transform: uppercase;
letter-spacing: 0.08em;
background: var(--paper);
color: var(--ink);
}
.chip--solid { background: var(--ink); color: var(--paper); }
.chip--signal { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.chip--warn { border-color: var(--warn); color: var(--ink); background: oklch(0.95 0.04 70); }
.chip--alert { background: var(--alert); border-color: var(--alert); color: white; }
.page--dark .chip { background: transparent; color: var(--d-text); border-color: var(--d-text-2); }
.page--dark .chip--solid { background: var(--d-text); color: var(--navy); }
/* Numeric stat block */
.stat {
font-family: var(--display);
border-top: 1px solid var(--rule);
padding-top: 10px;
}
.stat .v {
font-family: var(--display);
font-weight: 800;
font-size: 36pt;
letter-spacing: -0.03em;
line-height: 1;
color: var(--ink);
}
.stat .l {
font-family: var(--display);
font-size: 8.5pt;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-top: 6px;
}
.page--dark .stat { border-top-color: var(--navy-line); }
.page--dark .stat .v { color: var(--d-text); }
.page--dark .stat .l { color: var(--d-muted); }
/* Lists */
ul.clean, ol.clean { padding-left: 1.1em; margin: 0 0 0.7em; }
ul.clean li, ol.clean li { margin: 0.25em 0; }
ul.bare { list-style: none; padding: 0; margin: 0; }
ul.tick {
list-style: none; padding: 0; margin: 0;
}
ul.tick li {
position: relative;
padding-left: 22px;
margin: 6px 0;
line-height: 1.45;
}
ul.tick li::before {
content: "";
position: absolute;
left: 0; top: 0.55em;
width: 10px; height: 10px;
border: 1.5px solid var(--ink);
background: var(--signal);
}
.page--dark ul.tick li::before { border-color: var(--d-text); }
/* Mono code/inline */
.mono { font-family: var(--mono); }
/* Print */
@media print {
html { background: white; }
.book { box-shadow: none; max-width: none; }
.page, .cover { margin: 0; }
@page { size: letter; margin: 0; }
}
/* ===== Cover overrides — belt and suspenders ===== */
.cover h1, .cover h2, .cover h3, .cover h4 { color: var(--d-text) !important; }
.cover .kicker { color: var(--signal) !important; }
.cover .lede { color: var(--d-text-2) !important; }
.cover p { color: var(--d-text-2); }
.cover .subtitle, .cover .abstract { color: var(--d-text-2); }
/* Small screens */
@media (max-width: 900px) {
.book { max-width: 100%; }
.page, .cover { width: 100%; padding: 36px 24px 60px; min-height: 0; }
.chrome-top, .chrome-foot { left: 24px; right: 24px; }
.chrome-foot { position: relative; bottom: auto; left: auto; right: auto; margin-top: 40px; }
.chrome-top { position: relative; top: auto; left: auto; right: auto; margin-bottom: 28px; }
h1 { font-size: 40pt; }
.cover h1 { font-size: 44pt; }
.grid-3, .grid-4, .grid-2, .cols-2 { grid-template-columns: 1fr; column-count: 1; gap: 18px; }
.cover .meta { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
Accessibility: skip-to-content link
Hidden until focused via keyboard.
============================================================ */
.skip-link {
position: absolute;
left: -10000px; top: auto;
width: 1px; height: 1px; overflow: hidden;
font-family: var(--mono);
font-size: 10pt;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
}
.skip-link:focus {
position: fixed;
left: 16px; top: 16px;
width: auto; height: auto; overflow: visible;
padding: 12px 18px;
background: var(--signal);
color: var(--navy);
z-index: 1000;
outline: 2px solid var(--navy);
outline-offset: 2px;
}
/* Hide content visually but keep it available to screen readers + crawlers.
Used on table elements where the visual design carries the
meaning but assistive tech still needs the prose. */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ============================================================
Print stylesheet — replaces the deleted *-print.html files.
Hides chrome, simplifies typography, ensures readable output
when a user prints any live page directly from the browser.
============================================================ */
@media print {
html, body {
background: #fff !important;
color: #000 !important;
}
/* Hide site nav, footer, CTAs, and the mobile menu trigger. */
.sitenav, .sitefoot, .skip-link,
.btn-primary, .btn-ghost,
.cta-strip, .res-peek,
.sitenav__menu {
display: none !important;
}
/* Ensure links survive on paper. */
a { color: #000; text-decoration: underline; }
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 9pt; color: #555;
word-break: break-all;
}
/* Avoid awkward page breaks inside critical blocks. */
h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; }
table, pre, blockquote, figure { page-break-inside: avoid; break-inside: avoid; }
/* Soften inks for cheaper printers. */
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* If a page used dark navy chrome, lift contrast for print. */
.home-wrap, .wrap, main { background: #fff !important; color: #000 !important; }
}