Skip to content
/* Self-hosted fonts (SIL Open Font Licence, see assets/fonts/LICENCES.md) */
@font-face { font-family: "Source Sans 3"; font-weight: 300; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 900; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 900; font-display: swap; src: url("/assets/fonts/orbitron-latin-900-normal.woff2") format("woff2"); }
/* Brand typeface from the logo. Drop bBigerOver.woff2 and/or bBigerOver.ttf into
assets/fonts/. Orbitron stands in until the file is there. */
/* CyberOps.Team blog theme, matched to the cyberops.team landing page:
grey textured background, black type, Source Sans, thin white rings. */
:root {
color-scheme: light;
--bg: #E6E6E6;
--streak: #EBEBEB;
--surface: #F2F2F2;
--surface-2: #D9D9D9;
--code-bg: #141414;
--line: #C9C9C9;
--ring: #FFFFFF;
--heading: #000000;
--text: #1A1A1A;
--text-soft: #3D3D3D;
--muted: #5C5C5C;
--accent: #000000;
--footer-shade: #757575;
/* Callout colours, darkened to read on grey */
--note: #1F5F99;
--tip: #2C6E36;
--important: #5B3FA8;
--warning: #8A5A00;
--caution: #A82828;
--font-brand: "B Biger Over", "Orbitron", "Arial Black", sans-serif;
--font-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
--measure: 40rem; /* about 70 characters per line */
--wide: 64rem;
--radius: 4px;
}
/* ─── Dark mode ───────────────────────────────────────────────
Applies when the visitor switches to dark with the toggle
(data-theme="dark"). Light is the default. */
:root[data-theme="dark"] {
--bg: #141414;
--streak: #191919;
--surface: #1E1E1E;
--surface-2: #2B2B2B;
--code-bg: #0B0B0B;
--line: #333333;
--ring: #2C2C2C;
--heading: #FFFFFF;
--text: #E2E2E2;
--text-soft: #B8B8B8;
--muted: #9A9A9A;
--accent: #FFFFFF;
--footer-shade: #000000;
--note: #6CB4FF;
--tip: #6FD08C;
--important: #B99CFF;
--warning: #F2B24C;
--caution: #FF7A7A;
color-scheme: dark;
}
/* Category colours: each label carries a light and a dark value */
.nav-section, .section-badge { --section: var(--section-light); }
:root[data-theme="dark"] .nav-section, :root[data-theme="dark"] .section-badge { --section: var(--section-dark); }
/* Small dark-mode adjustments */
:root[data-theme="dark"] div.highlighter-rouge { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
margin: 0;
min-height: 100vh;
display: flex; flex-direction: column;
background-color: var(--bg);
color: var(--text);
font: 400 1.125rem/1.7 var(--font-body);
letter-spacing: -0.01em;
text-rendering: optimizeLegibility;
position: relative;
}
/* Backdrop: fine grain plus the landing page's diagonal light bands, drifting slowly
from right to left. The bands repeat every 100vmax along the diagonal, so sliding the
layer left by one repeat (100vmax x 1.4142) loops seamlessly. */
body::before {
content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
background-color: var(--bg);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
content: ""; position: fixed; z-index: -1; pointer-events: none;
top: 0; bottom: 0; left: 0; width: calc(100vw + 141.4214vmax);
background-image: repeating-linear-gradient(135deg,
transparent 0 18vmax, var(--streak) 18vmax 34vmax, transparent 34vmax 52vmax,
var(--streak) 52vmax 61vmax, transparent 61vmax 100vmax);
animation: bands-drift 120s linear infinite;
will-change: transform;
}
@keyframes bands-drift { from { transform: translateX(0); } to { transform: translateX(-141.4214vmax); } }
main { flex: 1; }
a {
color: var(--accent);
text-decoration: underline dotted 1px;
text-underline-offset: 3px;
}
a:hover { text-decoration-style: solid; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0.5rem; background: var(--accent); color: var(--bg); padding: 0.5rem 1rem; z-index: 10; }
.skip-link:focus { left: 0.5rem; }
.wrap { width: 100%; max-width: calc(var(--measure) + 3rem); margin: 0 auto; padding: 0 1.5rem; }
.wrap-wide { max-width: calc(var(--wide) + 3rem); }
/* ─── Header: wordmark, page path and menu ─────────────────── */
.site-header {
position: sticky; top: 0; z-index: 5;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--ring);
}
.header-inner {
max-width: calc(var(--wide) + 3rem); margin: 0 auto; padding: 0.85rem 1.5rem;
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.prompt {
font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0;
color: var(--text); text-decoration: none;
display: flex; align-items: center; min-width: 0; max-width: 100%; white-space: nowrap;
}
.wordmark { font-family: var(--font-brand); font-weight: 900; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--heading); flex: none; }
.prompt-path { color: var(--muted); margin-left: 1ch; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.prompt-dollar { color: var(--muted); margin: 0 0.4ch 0 0.2ch; }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.site-nav {
display: flex; align-items: center; gap: 1.4rem; flex: none; margin-left: auto;
font-family: var(--font-brand); font-weight: 900; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.nav-group { display: flex; align-items: center; gap: 1.15rem; }
.nav-sections { padding-right: 1.4rem; border-right: 1px solid var(--ring); }
.site-nav a { color: var(--muted); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; padding: 0.3rem 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--heading); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.site-nav a.nav-section { color: var(--section); }
.site-nav a.nav-section:hover { text-decoration: underline dotted 1px; text-underline-offset: 5px; }
.site-nav a.nav-section[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--section); }
/* Icon links (Twitter, GitHub, Email, RSS) */
.nav-icons { gap: 0.15rem; }
.site-nav a.nav-icon {
display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
color: var(--muted); border-radius: 4px;
}
.site-nav a.nav-icon:hover { color: var(--heading); background: var(--surface); }
.nav-icon .icon { display: block; }
/* Light/dark toggle */
.header-inner { position: relative; }
.theme-toggle {
flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-left: -0.6rem;
padding: 0; border: 1px solid var(--ring); border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--heading); background: var(--surface); border-color: var(--muted); }
.theme-toggle .icon-sun { display: none; }
/* Category label on posts and lists */
.section-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.85rem; font-weight: 600; color: var(--heading); text-decoration: none; white-space: nowrap;
}
.section-badge::before { content: ""; width: 0.55rem; height: 0.55rem; background: var(--section, var(--heading)); }
a.section-badge:hover { text-decoration: underline dotted 1px; text-underline-offset: 3px; }
/* Category pages: blog.cyberops.team/red/ */
.section-header { padding: 4rem 0 2rem; border-bottom: 1px solid var(--ring); }
.section-name { margin: 0; line-height: 1; }
.section-name .section-badge {
font-family: var(--font-brand); font-weight: 900; font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: 0.01em; gap: 0.9rem;
}
.section-name .section-badge::before { width: 0.4em; height: 0.4em; }
/* ─── "Not found" page ────────────────────────────────────── */
.motd { padding: 5rem 0 4rem; text-align: center; }
.motd-lede { font-weight: 300; font-size: 1.2rem; color: var(--text-soft); max-width: 44ch; margin: 0.6rem auto 0; }
.motd-cmd { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); margin: 0 0 1rem; }
.motd-title { font-family: var(--font-brand); font-weight: 900; letter-spacing: 0.01em; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.05; color: var(--heading); margin: 0 0 1rem; }
.log-home { padding-top: 3.5rem; }
.section-title {
font-family: var(--font-brand); font-weight: 900; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--heading);
margin: 0 0 0.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ring);
}
/* Post list styled as an event log: timestamp column + entry */
.log-list { list-style: none; margin: 0; padding: 0; }
.log-row {
display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem;
padding: 1.75rem 0; border-bottom: 1px solid var(--ring);
}
.log-time { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0; color: var(--muted); padding-top: 0.45rem; }
.log-title { overflow-wrap: break-word; hyphens: auto; font-weight: 900; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 0.45rem; }
.log-title a { color: var(--heading); text-decoration: none; }
.log-title a:hover { text-decoration: underline dotted 2px; text-underline-offset: 5px; }
.log-excerpt { margin: 0 0 0.7rem; color: var(--text-soft); font-weight: 300; font-size: 1.1rem; }
.log-meta:empty { display: none; }
.log-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.compact .log-row { padding: 1rem 0; }
.compact .log-title { font-size: 1.25rem; }
.more, .empty { color: var(--muted); padding: 1.5rem 0; }
.tag {
font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0; color: var(--text-soft);
text-decoration: none; padding: 0.1rem 0.55rem; border: 1px solid var(--ring); border-radius: 999px;
}
.tag:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.tag small { opacity: 0.7; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Preview images on the home page */
.log-row.has-thumb { grid-template-columns: 7.5rem 1fr 15rem; gap: 1.5rem; align-items: start; }
.log-thumb {
display: block; text-decoration: none; aspect-ratio: 16 / 10; overflow: hidden;
border: 1px solid var(--ring); border-radius: var(--radius); background: var(--surface);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.log-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.log-row:hover .log-thumb img { transform: scale(1.03); }
.thumb-fallback {
display: grid; place-items: center; width: 100%; height: 100%;
background-color: var(--surface);
background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--bg) 14px 15px);
}
.thumb-fallback span {
font-family: var(--font-mono); font-size: 0.82rem; color: var(--heading); letter-spacing: 0;
background: var(--surface); padding: 0.25rem 0.75rem; border: 1px solid var(--heading); border-radius: 999px;
}
/* ─── Post ────────────────────────────────────────────────── */
.post-header { padding: 3.5rem 0 2rem; border-bottom: 1px solid var(--ring); margin-bottom: 2.25rem; }
.post-meta { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0; color: var(--muted); margin: 0 0 1rem; }
.meta-sep { margin: 0 0.6ch; opacity: 0.5; }
.post-title {
font-weight: 900; color: var(--heading); overflow-wrap: break-word; hyphens: auto;
font-size: clamp(2.1rem, 5.5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 1rem;
}
.post-lede { font-weight: 300; font-size: 1.3rem; line-height: 1.5; color: var(--text-soft); margin: 0 0 1.25rem; }
.post-body > * { max-width: var(--measure); }
.post-body h2, .post-body h3, .post-body h4 {
font-weight: 900; color: var(--heading); line-height: 1.2; letter-spacing: -0.03em; position: relative;
}
.post-body h2 { font-size: 1.85rem; margin: 2.75rem 0 0.75rem; }
.post-body h3 { font-size: 1.4rem; margin: 2rem 0 0.5rem; }
.post-body h4 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; letter-spacing: -0.01em; }
.heading-anchor::before { content: "#"; }
.heading-anchor { position: absolute; left: -1.1em; color: var(--muted); text-decoration: none; opacity: 0; font-weight: 300; }
h2:hover .heading-anchor, h3:hover .heading-anchor, .heading-anchor:focus { opacity: 1; }
.post-body p, .post-body ul, .post-body ol { margin: 0 0 1.25rem; }
.post-body li { margin-bottom: 0.35rem; }
.post-body li::marker { color: var(--muted); }
.post-body strong { color: var(--heading); font-weight: 600; }
.post-body img { max-width: 100%; height: auto; border: 1px solid var(--ring); border-radius: var(--radius); }
.post-body hr { border: 0; border-top: 1px dotted var(--muted); margin: 2.5rem 0; }
.post-body blockquote {
margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.25rem;
border-left: 2px solid var(--heading); color: var(--text-soft); font-weight: 300; font-size: 1.15rem;
}
kbd {
font-family: var(--font-mono); font-size: 0.8em; padding: 0.1em 0.45em; letter-spacing: 0;
border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--surface);
}
/* Images, GIFs and video in posts */
.post-body img { cursor: zoom-in; }
.post-body > p > img:only-child { display: block; margin: 0 auto; }
.figure { margin: 2rem 0; }
.figure-media img, .figure-media video {
display: block; width: 100%; height: auto; max-width: 100%;
border: 1px solid var(--ring); border-radius: var(--radius); background: var(--surface);
}
.figure-media video { cursor: default; }
.figure figcaption { margin-top: 0.6rem; font-size: 0.92rem; color: var(--muted); text-align: center; }
.figure figcaption code { font-size: 0.85em; }
.post-body > .figure-wide {
max-width: none; width: min(var(--wide), calc(100vw - 3rem));
margin-left: 50%; transform: translateX(-50%);
}
.figure-pair .figure-media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 640px) {
.figure-pair .figure-media { grid-template-columns: 1fr; }
.post-body > .figure-wide { width: auto; margin-left: 0; transform: none; }
}
/* Click-to-enlarge */
.lightbox {
position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 2rem;
background: rgba(0, 0, 0, 0.88); cursor: zoom-out; animation: lightbox-in 0.15s ease-out;
}
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lightbox-caption { position: absolute; left: 0; right: 0; bottom: 1rem; text-align: center; color: #ddd; font-size: 0.9rem; padding: 0 2rem; }
@keyframes lightbox-in { from { opacity: 0; } }
/* Callouts: write > [!WARNING] in Markdown */
.post-body blockquote.callout {
border-left-width: 3px; background: var(--surface); padding: 0.9rem 1.1rem;
border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); font-weight: 400; font-size: 1.05rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 900 !important; letter-spacing: -0.01em; margin: 0 0 0.3rem !important; }
.callout-title strong { color: inherit; font-weight: inherit; }
.callout-note { border-left-color: var(--note) !important; } .callout-note .callout-title { color: var(--note); }
.callout-tip { border-left-color: var(--tip) !important; } .callout-tip .callout-title { color: var(--tip); }
.callout-important { border-left-color: var(--important) !important; } .callout-important .callout-title { color: var(--important); }
.callout-warning { border-left-color: var(--warning) !important; } .callout-warning .callout-title { color: var(--warning); }
.callout-caution { border-left-color: var(--caution) !important; } .callout-caution .callout-title { color: var(--caution); }
/* Tables (IOCs, CVE lists) */
.post-body table {
display: block; overflow-x: auto; border-collapse: collapse; margin: 1.5rem 0;
font-size: 0.95rem; max-width: 100%;
}
.post-body th, .post-body td { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--ring); text-align: left; vertical-align: top; }
.post-body th { color: var(--heading); font-weight: 900; border-bottom: 2px solid var(--heading); }
.post-body td code { white-space: nowrap; }
/* Code */
code, pre { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0; }
:not(pre) > code {
background: var(--surface-2); color: var(--heading); padding: 0.12em 0.4em; border-radius: 3px;
overflow-wrap: anywhere;
}
div.highlighter-rouge, figure.highlight {
margin: 1.5rem 0; background: var(--code-bg); border-radius: var(--radius);
max-width: var(--measure); overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.code-bar {
display: flex; justify-content: space-between; align-items: center;
padding: 0.35rem 0.6rem 0.35rem 1rem; border-bottom: 1px solid #2A2A2A;
font-family: var(--font-mono); font-size: 0.75rem; color: #9A9A9A; background: #1E1E1E;
}
.code-copy {
font: inherit; color: #9A9A9A; background: transparent; cursor: pointer;
border: 1px solid #3A3A3A; border-radius: 999px; padding: 0.15rem 0.75rem;
}
.code-copy:hover { color: #FFF; border-color: #FFF; }
.code-copy[data-state="done"] { color: #7BE0A4; border-color: #7BE0A4; }
pre.highlight { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; line-height: 1.55; font-size: 0.84rem; color: #E4E4E4; }
/* Rouge syntax colours (on the dark code background) */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs, .highlight .cd, .highlight .ch, .highlight .cpf { color: #8C8C8C; font-style: italic; }
.highlight .cp, .highlight .kc, .highlight .kt, .highlight .nd { color: #C3A6FF; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv, .highlight .ow, .highlight .nt { color: #FFFFFF; font-weight: 600; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .sh, .highlight .sx, .highlight .ss, .highlight .dl { color: #9FDDB1; }
.highlight .se, .highlight .si, .highlight .sr { color: #C6F0D2; }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo, .highlight .mb, .highlight .il { color: #FFB38A; }
.highlight .nf, .highlight .fm, .highlight .nc, .highlight .nn { color: #8FD6E8; }
.highlight .nb, .highlight .bp, .highlight .no { color: #A9C4FF; }
.highlight .nv, .highlight .vi, .highlight .vg, .highlight .vc, .highlight .na { color: #F2D29B; }
.highlight .o { color: #B5B5B5; }
.highlight .gp { color: #8C8C8C; user-select: none; }
.highlight .gi { color: #9FDDB1; background: rgba(159, 221, 177, 0.1); }
.highlight .gd { color: #FF8A8A; background: rgba(255, 138, 138, 0.1); }
.highlight .gh, .highlight .gu { color: #8FD6E8; font-weight: 600; }
.highlight .err { color: #FF8A8A; }
/* Prev / next */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 3.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--ring); }
.post-nav a { text-decoration: none; color: var(--heading); font-weight: 900; letter-spacing: -0.02em; line-height: 1.25; }
.post-nav a:hover { text-decoration: underline dotted 1px; text-underline-offset: 4px; }
.post-nav span { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0; color: var(--muted); margin-bottom: 0.25rem; }
.post-nav-next { grid-column: 2; text-align: right; }
.related { margin-top: 3rem; }
.archive-year h2, .post-body h2#tags { margin-top: 2.5rem; font-family: var(--font-brand); letter-spacing: 0.03em; }
/* Optional: brand font on titles (brand_font_titles: true in _config.yml) */
.brand-titles .post-title, .brand-titles .log-title { font-family: var(--font-brand); letter-spacing: 0.01em; line-height: 1.2; }
.brand-titles .post-title { font-size: clamp(1.7rem, 4.4vw, 2.5rem); }
.brand-titles .log-title { font-size: 1.3rem; }
/* ─── Footer: shaded base, as on the landing page ─────────── */
.site-footer {
margin-top: 5rem; padding-top: 4rem; color: #FFF; text-align: center;
background-image: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--footer-shade) 55%, transparent) 55%, var(--footer-shade));
}
.footer-inner { padding-bottom: 1.75rem; }
/* Footer as a bar matching the header (footer_bar: true in _config.yml) */
.site-footer-bar {
padding-top: 0; background-image: none;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(8px);
border-top: 1px solid var(--ring);
}
.site-footer-bar .footer-inner { padding-top: 0.85rem; padding-bottom: 0.85rem; min-height: 3.6rem; display: flex; align-items: center; justify-content: center; }
.footer-credit {
margin: 0; color: var(--heading);
font-family: var(--font-brand); font-weight: 900; font-size: 0.8rem; letter-spacing: 0.04em;
}
.footer-credit a { color: inherit; text-decoration: none; }
/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px) and (min-width: 641px) {
.header-inner { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.theme-toggle { position: absolute; top: 0.6rem; right: 1.5rem; margin: 0; }
.site-nav { margin-left: 0; }
.prompt { padding-right: 3rem; }
}
@media (max-width: 900px) and (min-width: 641px) {
.log-row.has-thumb { grid-template-columns: 1fr 12rem; }
.log-row.has-thumb .log-time { grid-column: 1 / -1; padding-top: 0; }
}
@media (max-width: 640px) {
body { font-size: 1.0625rem; }
.wordmark { font-size: 0.95rem; }
.theme-toggle { position: absolute; top: 0.45rem; right: 1.25rem; margin: 0; }
.site-nav { margin-left: 0; }
.prompt { padding-right: 2.75rem; }
.header-inner { flex-direction: column; align-items: stretch; gap: 0.4rem; padding: 0.7rem 1.25rem 0.5rem; }
.site-nav { overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; padding-right: 2rem; gap: 1rem;
-webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.nav-sections { padding-right: 1rem; }
.nav-group { gap: 1rem; }
.section-header { padding: 2.75rem 0 1.5rem; }
.wrap { padding: 0 1.25rem; }
.log-row, .log-row.has-thumb { grid-template-columns: 1fr; gap: 0.25rem; }
.log-thumb { order: -1; margin-bottom: 0.75rem; }
.log-time { padding-top: 0; }
.motd { padding: 3.25rem 0 2.5rem; }
.post-nav { grid-template-columns: 1fr; }
.post-nav-next { grid-column: 1; text-align: left; }
.heading-anchor { display: none; }
}
/* Visitors who prefer less motion: no moving background, blinking or zoom effects */
@media (prefers-reduced-motion: reduce) {
body::after, .blink, .lightbox { animation: none; }
.log-thumb img { transition: none; }
}
@media print {
body::before, body::after, .site-header, .site-footer, .post-nav, .code-copy { display: none; }
body { background: #fff; color: #000; }
}