/* ============================================
   Inter (variable, self-hosted: /fonts/, SIL OFL licence in
   _base/fonts/Inter-LICENSE.txt). Latin + Latin-Extended only: the
   browser downloads a file only if the page uses its characters.
   To go back to the system font, empty --font-text below.
   ============================================ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-latin-ext-wght-italic.woff2) format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-latin-wght-italic.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --background-primary: #2d2d2d;
    --background-secondary: #0e0e0e;
    --background-tertiary: #252525;
    --text-primary: #e8e8e8;
    --text-secondary: #b4b4b4;
    --text-muted: #8a8a8a;
    /* palette: yellow #ffcc00, orange #ff6600, green #33ba02 */
    --accent-yellow: #ffcc00;
    --accent-primary: #ff6600;     /* orange: brand, current item, highlights */
    --accent-secondary: #ff6600;   /* borders / outlines / markers */
    --accent-contrast: #101010;    /* text on an orange background */
    --link-color: #33ba02;         /* green links */
    --link-hover: #ffcc00;
    --follow-hover: #1d9bf0;       /* Follow icon on hover (its brand blue) */
    --border-color: #3d3d3d;
    --table-border-color-head: #98978f;
    --table-border-color: #65645f;
    --code-background: #1a1a1a;          /* inline `code` and ``` blocks */
    --code-text: #d4d4d4;
    --keyword-color: #c586c0;
    --string-color: #ce9178;
    --function-color: #dcdcaa;
    --comment-color: #6a9955;
    --number-color: #b5cea8;
}

.title_container {
  display: flex;
  flex-direction: column;
  gap: 0.0;
}

.title_row {
  display: flex;
  justify-content: space-between;
  column-gap: 24px;
}

/* right side of a die page header: "Datasheet" (the title wraps, not it) */
.title_links {
  flex-shrink: 0;
}

/* objective linked to its zoomable map: text + small magnifier */
.map-link {
  white-space: nowrap;
}

.map-link .icon {
  width: 1em;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.title_row h1 {
  margin-bottom: 0px;
}

.title_subrow {
  display: flex;
  flex-wrap: wrap;               /* narrow screens: one line each, no overlap */
  justify-content: space-between;
  align-items: flex-start;   /* die size on the first objective line */
  column-gap: 24px;
  line-height: 1.25;
  padding: 0;
  margin-top: -10px;             /* close under the title, as before */
  margin-bottom: 12px;
}

.title_subrow p {
  margin: 0;
}

.title_subrow > span:last-child {
  margin-left: auto;
  text-align: right;
}

/* ============================================
   Comment section (joey iframe)
   ============================================ */

.joey-iframe-container {
  width: 100%;
  height: 330px;
  overflow: hidden;
  position: relative;
}

.joey-iframe {
  /* The original iframe don't support darkmode so we have to use some tricks */
  filter: invert(0.9) hue-rotate(300deg) brightness(1.8);
  width: 100%;
  height: 500px;
  border: none;
}

/* ============================================
   Base Styles
   ============================================ */

html {
    min-height: 100vh;
    background-color: #101010;
    color-scheme: dark;
}

/* Texture behind the content column: a horizontal shade that darkens the
   area around the page, a vignette, and the tiled pattern.
   Replace /img/pattern2.png (in _base/img/) to change the texture.

   It sits on its own fixed layer instead of `background-attachment: fixed`
   on <html>: that made the browser repaint the whole window, tile by tile,
   at every scroll and page change, flashing strips of the base colour.
   This layer is painted once and only moved by the graphics card. */
html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    height: 100lvh;            /* phones: covers the area under the address bar */
    pointer-events: none;
    background:
        linear-gradient(
            to right, rgba(0,0,0,0) calc(50% - 550px), rgba(0,0,0,0.4) calc(50% - 400px),
            rgba(0,0,0,0.7) calc(50% - 150px), rgba(0,0,0,0.7) calc(50% + 150px),
            rgba(0,0,0,0.4) calc(50% + 400px), rgba(0,0,0,0) calc(50% + 550px)),
        radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.3) 100%),
        #101010 url(/img/pattern2.png) repeat;
    will-change: transform;    /* own compositor layer */
}

body {
    font-family: var(--font-text);
    font-size: 18px;
    line-height: 1.65;
    color: var(--text-primary);
    background-color: var(--background-primary);
    max-width: 1012px;
    margin: 0 auto;
    padding: 24px 52px;        /* top/bottom 24, left/right 52 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Typography
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
}

h1 {
    font-size: 1.8em;
    margin-top: 0;
    padding-bottom: 0.3em;
}

h2 {
    font-size: 1.44em;
    padding-bottom: 0.3em;
}

h3 {
    font-size: 1.22em;
}

h4 {
    font-size: 1.08em;
}

h5 {
    font-size: 0.95em;
}

h6 {
    font-size: 0.86em;
    color: var(--text-secondary);
}

p {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--text-primary);
}

/* ============================================
   Links
   ============================================ */

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* ============================================
   Lists
   ============================================ */

ul ul,
ul ol,
ol ul,
ol ol {
    padding-left: 1.5em; /* each nested level indents further */
}

ul {
    list-style-type: disc;
}

li {
    margin-bottom: 4px;
    color: var(--text-primary);
}

li::marker {
    color: var(--text-secondary);
}

li > p {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* ============================================
   Code Blocks - Pandoc Support
   ============================================ */

code {
    padding: 2px 6px;
    margin: 0 2px;
    font-size: 0.925em;
    background-color: var(--code-background);
    border-radius: 3px;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    color: var(--code-text);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ``` blocks */
pre {
    padding: 12px 16px;
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.5;
    background-color: var(--code-background);
    border-radius: 6px;
    margin: 16px 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

pre code,
pre.sourceCode code {
    display: block;
    padding: 0;
    margin: 0;
    overflow: visible;
    line-height: inherit;
    background-color: transparent;
    border: none;
    font-size: inherit;
    color: var(--code-text);
}

/* Pandoc-specific code block styling */
pre.sourceCode {
    padding: 12px 16px;
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.5;
    background-color: var(--code-background);
    border-radius: 6px;
    margin: 16px 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

code.sourceCode {
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
}

pre[class*="sourceCode"] {
    position: relative;
}

/* Code language label (extracted from class name) */
pre[class*="sourceCode"]::before {
    content: attr(data-language);
    position: absolute;
    top: 6px;
    right: 10px;

    font-size: 0.7em;
    color: var(--text-muted);
    font-family: var(--font-text);
    text-transform: lowercase;

    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    pointer-events: none;
}

/* Extract language from Pandoc classes like "sourceCode matlab" */
pre.sourceCode.matlab::before { content: "matlab"; }
pre.sourceCode.python::before { content: "python"; }
pre.sourceCode.javascript::before { content: "javascript"; }
pre.sourceCode.java::before { content: "java"; }
pre.sourceCode.cpp::before { content: "c++"; }
pre.sourceCode.c::before { content: "c"; }
pre.sourceCode.bash::before { content: "bash"; }
pre.sourceCode.r::before { content: "r"; }
pre.sourceCode.sql::before { content: "sql"; }
pre.sourceCode.json::before { content: "json"; }
pre.sourceCode.yaml::before { content: "yaml"; }
pre.sourceCode.xml::before { content: "xml"; }
pre.sourceCode.html::before { content: "html"; }
pre.sourceCode.css::before { content: "css"; }

/* Hide label if no language class or data-language attribute */
pre:not([class*="sourceCode"]):not([data-language])::before,
pre[data-language=""]::before {
    content: none;
}

/* Syntax highlighting */
.hljs-keyword { color: #c586c0; }
.hljs-built_in { color: #4ec9b0; }
.hljs-type { color: #4ec9b0; }
.hljs-literal { color: #569cd6; }
.hljs-number { color: #b5cea8; }
.hljs-operator { color: #d4d4d4; }
.hljs-punctuation { color: #d4d4d4; }
.hljs-property { color: #9cdcfe; }
.hljs-regexp { color: #d16969; }
.hljs-string { color: #ce9178; }
.hljs-char.escape_ { color: #d7ba7d; }
.hljs-subst { color: #d4d4d4; }
.hljs-symbol { color: #dcdcaa; }
.hljs-variable { color: #9cdcfe; }
.hljs-variable.language_ { color: #569cd6; }
.hljs-variable.constant_ { color: #4fc1ff; }
.hljs-title { color: #dcdcaa; }
.hljs-title.class_ { color: #4ec9b0; }
.hljs-title.class_.inherited__ { color: #4ec9b0; }
.hljs-title.function_ { color: #dcdcaa; }
.hljs-params { color: #9cdcfe; }
.hljs-comment { color: #6a9955; font-style: italic; }
.hljs-doctag { color: #6a9955; }
.hljs-meta { color: #569cd6; }
.hljs-meta .hljs-keyword { color: #569cd6; }
.hljs-meta .hljs-string { color: #ce9178; }
.hljs-section { color: #ffd700; }
.hljs-tag { color: #808080; }
.hljs-name { color: #569cd6; }
.hljs-attr { color: #9cdcfe; }
.hljs-attribute { color: #9cdcfe; }
.hljs-addition { color: #b5cea8; background-color: rgba(144, 238, 144, 0.2); }
.hljs-deletion { color: #ce9178; background-color: rgba(255, 0, 0, 0.2); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }

/* ============================================
   Blockquotes
   ============================================ */

blockquote {
    padding: 0 16px;
    margin: 0 0 16px 0;
    color: var(--text-secondary);
    border-left: 4px solid var(--border-color);
}

blockquote > :first-child {
    margin-top: 0;
}

blockquote > :last-child {
    margin-bottom: 0;
}

/* ============================================
   Tables
   ============================================ */

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    overflow: auto;
    margin-bottom: 16px;
    font-size: 0.95em;
}

table thead {
    background-color: transparent;
}

table th {
    font-weight: 600;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--table-border-color-head);
    color: var(--text-primary);
    background-color: transparent;
}

table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--table-border-color);
    color: var(--text-primary);
}

table tr:last-child td {
    border-bottom: 1px solid var(--table-border-color);
}

table tbody tr {
    background-color: transparent;
}

table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Contact-style lists: <table class="contact-list">, one icon + text per row.
   No row lines, the text sits right next to the icon, and the first link of
   the text (the service name) is larger. */
table.contact-list {
    width: auto;
    margin: 8px 0 24px;
    font-size: 1em;
}

table.contact-list td,
table.contact-list tr:last-child td {
    padding: 10px 0;
    border: 0;
    vertical-align: middle;
}

table.contact-list td:first-child {
    padding-right: 20px;
}

table.contact-list td:first-child img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 0;
}

table.contact-list tbody tr:hover,
table.contact-list tr:hover {
    background-color: transparent;
}

table.contact-list td:last-child {
    color: var(--text-secondary);
    line-height: 1.5;
}

table.contact-list td:last-child > a:first-child {
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.6;
}

/* ============================================
   Horizontal Rules
   ============================================ */

hr {
    height: 1px;
    padding: 0;
    margin: 24px 0;
    background-color: var(--border-color);
    border: 0;
}

/* ============================================
   Images
   ============================================ */

img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

img.rounded {
    border-radius: 15px;
}

/* ============================================
   Emphasis
   ============================================ */

em, i {
    font-style: italic;
    color: var(--text-primary);
}

strong, b {
    font-weight: 600;
    color: var(--text-primary);
}

del, s {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* ============================================
   Numbered Lists (Ordered Lists)
   ============================================ */

ol {
    counter-reset: list-counter;
    list-style: none;
    padding-left: 0;
}

/* Change: Use '>' to target only direct children */
ol > li {
    counter-increment: list-counter;
    position: relative;
    padding-left: 2em;
}

/* Change: Use '>' here too */
ol > li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Nested ordered lists - Update to use direct children */
ol ol > li::before {
    content: counter(list-counter, lower-alpha) ".";
}

ol ol ol > li::before {
    content: counter(list-counter, lower-roman) ".";
}

/* ============================================
   Definition Lists
   ============================================ */

dl {
    padding: 0;
}

dl dt {
    padding: 0;
    margin-top: 16px;
    font-size: 1em;
    font-weight: 600;
    color: var(--text-primary);
}

dl dd {
    padding: 0 16px;
    margin-bottom: 16px;
    color: var(--text-secondary);
}

/* ============================================
   Details/Summary
   ============================================ */

details {
    margin-bottom: 16px;
}

summary {
    cursor: pointer;
    font-weight: 600;
    padding: 8px 12px;
    background-color: var(--background-tertiary);
    border-radius: 4px;
    outline: none;
    color: var(--text-primary);
}

summary:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

details[open] summary {
    margin-bottom: 12px;
}

/* ============================================
   Keyboard Keys
   ============================================ */

kbd {
    display: inline-block;
    padding: 3px 6px;
    font-size: 0.85em;
    line-height: 1;
    color: var(--text-primary);
    vertical-align: middle;
    background-color: var(--background-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    font-family: "Consolas", "Monaco", "Courier New", monospace;
}

/* ============================================
   Selection
   ============================================ */

::selection {
    background-color: rgba(255, 102, 0, 0.35);
    color: var(--text-primary);
}

::-moz-selection {
    background-color: rgba(255, 102, 0, 0.35);
    color: var(--text-primary);
}

/* ============================================
   Scrollbar Styling (Webkit browsers)
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--background-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   Utility Classes
   ============================================ */

.text-muted {
    color: var(--text-muted);
}

.text-secondary {
    color: var(--text-secondary);
}

/* the hidden attribute must win over any display: rule below (filters, toggles) */
[hidden] {
    display: none !important;
}

/* ============================================
   Icons (inline SVG, stroke style)
   ============================================ */

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* filled glyphs (brand marks) instead of stroked outlines */
.icon-solid {
    fill: currentColor;
    stroke: none;
    width: 1em;
    height: 1em;
}

/* ============================================
   Buttons
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--background-tertiary);
    color: var(--text-primary);
    font-size: 0.95em;
    line-height: 1.3;
}

.btn:hover {
    border-color: var(--accent-secondary);
    text-decoration: none;
}

.btn.disabled {
    visibility: hidden;
}

/* ============================================
   Site header
   ============================================ */

.site-header {
    display: flex;
    align-items: flex-end;   /* bottom-aligned: the active marker sits on the border */
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: -4px 0 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.88em;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 8px;
    color: var(--accent-primary);
    font-size: 1.35em;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.brand:hover {
    color: var(--accent-primary);
    text-decoration: none;
}

.brand-oni {
    transition: color 0.15s;
}

.brand:hover .brand-oni {
    color: var(--accent-yellow);
}

.brand-logo {
    width: 32px;
    height: auto;
    border-radius: 3px;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.nav-social {
    margin-left: auto;
}

.nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 6px;
    color: var(--text-primary);
    white-space: nowrap;
}

.nav a:hover {
    background-color: var(--background-tertiary);
    color: var(--text-primary);
    text-decoration: none;
}

.nav-social a:hover .icon {
    color: var(--accent-primary);
}

.nav-social a.nav-follow:hover .icon {
    color: var(--follow-hover);
}

/* current section: bold, orange icon, and a small triangle resting on the
   header's bottom border, pointing up at the entry */
.nav a.active {
    color: #ffffff;
    font-weight: 700;
}

.nav a.active .icon {
    color: var(--accent-primary);
}

.nav a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;           /* = header padding-bottom: base on the border */
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--accent-secondary);
}

/* ============================================
   Site footer
   ============================================ */

.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 48px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    font-size: 0.85em;
    text-align: center;
}

.site-footer .license {
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.license-label {
    color: var(--text-muted);
}

.footer-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-size: 1.05em;
}

.footer-home:hover {
    color: var(--accent-primary);
    text-decoration: none;
}

.site-footer .copyright {
    margin: 0;
    color: var(--text-primary);
}

/* ============================================
   Comments
   ============================================ */

.comments {
    margin-top: 40px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.comments h2 {
    text-align: center;
}

/* ============================================
   Blog index
   Two layouts, switched by the toolbar toggle:
     default            text, then the image at full width under it
     html[data-layout=split]  thumbnail left, text right
   ============================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    margin-bottom: 4px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.list-toolbar:has(.page-info:empty):has(.layout-toggle[hidden]) {
    display: none;
}

.list-toolbar > .page-info {
    margin-right: auto;
}

.layout-toggle {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
}

.layout-toggle[hidden] {
    display: none;
}

.layout-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 7px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}

.layout-toggle button:hover {
    color: var(--text-primary);
    background-color: var(--background-tertiary);
}

.layout-toggle button[aria-pressed="true"] {
    color: var(--accent-primary);
}

.post-list {
    display: flex;
    flex-direction: column;
}

/* between two posts: 32px above the line, 48px under it */
.post-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 48px 0 32px;
    border-bottom: 1px solid var(--border-color);
}

.post-card:first-child {
    padding-top: 4px;
}

.post-card:last-child {
    border-bottom: 0;
}

/* full layout: image after the text, natural aspect ratio */
.post-card-image {
    order: 2;
}

.post-card-image img {
    display: block;
    width: 100%;
    border-radius: 12px;
    background-color: var(--background-secondary);
}

.post-card-image:hover img {
    outline: 2px solid var(--accent-secondary);
    outline-offset: 2px;
}

.post-card-body > :last-child {
    margin-bottom: 0;
}

/* split layout */
html[data-layout="split"] .post-card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 24px;
}

html[data-layout="split"] .post-card.no-image {
    grid-template-columns: minmax(0, 1fr);
}

html[data-layout="split"] .post-card-image {
    order: 0;
}

html[data-layout="split"] .post-card-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.post-card-title {
    margin: 0 0 4px;
    padding: 0;
    font-size: 1.3em;
}

.post-card-title a {
    color: var(--text-primary);
}

.post-card-title a:hover {
    color: var(--accent-primary);
    text-decoration: none;
}

.post-card-meta {
    margin-bottom: 10px;
    font-size: 0.85em;
    color: var(--text-muted);
}

/* pinned posts (pinned: in .meta.yaml): top of page 1, with a badge */
.pin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent-primary);
    font-weight: 600;
}

.pin-badge .icon {
    width: 1.05em;
    height: 1.05em;
}

/* no "Read more" (read_more: false): no gap under the text */
.post-card-excerpt:last-child > :last-child {
    margin-bottom: 0;
}

.post-card-excerpt p {
    margin-bottom: 12px;
    color: var(--text-secondary);
}

.post-card-image {
    display: block;            /* no stray line space under the image */
}

.post-card-more {
    display: block;
    width: fit-content;
    line-height: 1.2;          /* the 64px between posts is measured to the text */
    font-size: 0.92em;
}

/* all-posts page */
.archive-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 320px;
    min-width: 0;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--background-tertiary);
    color: var(--text-muted);
}

.archive-filter:has(input[hidden]) {
    display: none;
}

.archive-filter:focus-within {
    border-color: var(--accent-secondary);
}

.archive-filter input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 1.05em;
}

.archive-filter input::placeholder {
    color: var(--text-muted);
}

.list-toolbar > .archive-count {
    margin-right: auto;
    padding: 0 4px;
    white-space: nowrap;
}

.archive-year h2 {
    margin: 22px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.05em;
    color: var(--text-secondary);
}

.archive-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.archive-list li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    padding: 5px 0;
}

.archive-list time {
    flex: none;
    width: 8.5em;
    font-size: 0.85em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.no-posts {
    color: var(--text-muted);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
}

/* Newer / Older: plain text + arrow, like the footer's Home link */
.pagination .btn {
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--text-primary);
}

.pagination a.btn:hover {
    color: var(--accent-primary);
    text-decoration: none;
}

.pagination .pages {
    display: flex;
    align-items: center;   /* keep each number box its own (small) height */
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.pagination .page {
    min-width: 1.9em;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--text-secondary);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pagination a.page:hover {
    color: var(--link-color);
    border-color: var(--border-color);
    text-decoration: none;
}

/* current page: small solid green tag, number "cut out" in the page colour */
.pagination .page.current {
    min-width: 1.45em;
    padding: 0 4px;
    border-color: var(--link-color);
    border-radius: 4px;
    background-color: var(--link-color);
    color: var(--background-primary);
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.4;
}

/* ============================================
   Die shots (figures written by shots.lua)
   ============================================ */

figure.shot {
    margin: 28px 0;
    text-align: center;
}

/* consecutive images: a thin line between them, like the old --- */
figure.shot + figure.shot {
    padding-top: 28px;
    border-top: 1px solid var(--border-color);
}

figure.shot img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

figure.shot figcaption {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 0.92em;
}

/* ============================================
   Layout blocks (layout.lua): ::: {.row} and ::: {.layout}
   ============================================ */

/* side by side, centred as a group, --gap apart (--cols and --gap set by
   layout.lua). Each item keeps its own width, up to an equal share of the
   row: big images share the width equally, small ones stay close together. */
.row {
    --gap: 14px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--gap);
    margin: 16px 0;
}

.row > * {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc((100% - (var(--cols, 2) - 1) * var(--gap)) / var(--cols, 2));
}

.row > figure.shot,
.row > figure.shot + figure.shot {
    margin: 0;
    padding: 0;
    border: 0;
}

/* own size, centred in the column, shrunk only if too wide: small
   thumbnails stay sharp */
.row figure.shot img {
    max-width: 100%;
}

/* a centred composition: heading, images, rows, caption text */
.layout {
    margin: 28px 0;
    text-align: center;
}

.layout > * {
    margin-top: 0;
    margin-bottom: 12px;
}

.layout > :last-child {
    margin-bottom: 0;
}

.layout > figure.shot,
.layout > figure.shot + figure.shot {
    padding: 0;
    border: 0;
}

/* a composition's images fill its width, like the rows under them */
.layout > figure.shot img {
    width: 100%;
}

.layout > .row {
    margin: 0 0 12px;
}

.layout h2,
.layout h3,
.layout h4 {
    margin-top: 0;
    margin-bottom: 4px;
}

/* captions above the images, or none */
.caption-top figure.shot {
    display: flex;
    flex-direction: column-reverse;
}

.caption-top figure.shot figcaption {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-size: 1em;
}

.no-caption figure.shot figcaption {
    display: none;
}

/* tables used for layout: no lines, no hover */
.plain table {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.plain table th,
.plain table td,
.plain table tr:last-child td {
    border: 0;
}

.plain table tbody tr:hover {
    background-color: transparent;
}

/* ============================================
   Image comparison (compare.lua + /js/compare.js)
   Without JS: the two figures one after the other.
   ============================================ */

.compare {
    margin: 18px 0 28px;
    text-align: center;
}

.compare-box {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}

.compare-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 0.95em;
}

.compare-head span:last-child {
    text-align: right;
}

.compare-stage {
    --pos: 50%;
    position: relative;
    line-height: 0;
    user-select: none;
    -webkit-user-select: none;
}

.compare-stage img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    pointer-events: none;      /* no image drag / link: only the handle moves */
}

/* second image: same box as the first, visible right of the line */
.compare-top {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--pos));
}

.compare-top img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.compare-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.compare-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background-color: rgba(20, 20, 20, 0.65);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    color: #fff;
    transform: translate(-50%, -50%);
    cursor: ew-resize;
    touch-action: none;        /* dragging on touch screens must not scroll */
    outline: none;
}

.compare-handle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compare-handle:hover,
.compare-stage.is-dragging .compare-handle {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

html.kb-nav .compare-handle:focus,
.compare-handle:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-primary);
}

.compare-stage.is-dragging {
    cursor: ew-resize;
}

/* ============================================
   Slideshows (slideshow.lua + /js/slideshow.js)
   Without JS: plain figures one after another.
   ============================================ */

.slideshow {
    margin: 18px 0 28px;
    border-radius: 8px;
    outline: none;
}

.slideshow.is-ready {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ring only when reached with Tab (the script sets .kb-nav) */
html.kb-nav .slideshow:focus {
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.slideshow-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.05em;
    font-weight: 600;
    text-align: center;
}

/* all slides in the same cell: the box keeps the tallest slide's height,
   so nothing below jumps when changing image */
.slideshow-stage {
    display: grid;
    align-items: center;
    user-select: none;
}


.slideshow.is-ready figure.shot {
    grid-area: 1 / 1;
    margin: 0;
    padding: 0;
    border: 0;
    visibility: hidden;
}

.slideshow.is-ready figure.shot.is-current {
    visibility: visible;
}

/* the caption is shown as the title above instead */
.slideshow.is-ready figcaption {
    display: none;
}

.slideshow-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
}

.slideshow-dots button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.slideshow-dots button::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--text-muted);
    opacity: 0.55;
    transition: transform 0.15s, opacity 0.15s;
}

.slideshow-dots button:hover::before {
    opacity: 1;
}

.slideshow-dots button[aria-current="true"]::before {
    background-color: var(--accent-primary);
    opacity: 1;
    transform: scale(1.25);
}

/* ============================================
   Tags
   ============================================ */

.tag {
    display: inline-block;
    padding: 1px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.85em;
    line-height: 1.6;
    white-space: nowrap;
}

.tag:hover {
    border-color: var(--link-color);
    color: var(--link-color);
    text-decoration: none;
}

.tag-small {
    padding: 0 7px;
    font-size: 0.95em;
}

.post-card-meta .sep {
    margin: 0 2px;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 32px 0 0;
    color: var(--text-muted);
}

.post-tags .icon {
    margin-right: 2px;
}

.tag-heading {
    margin-bottom: 8px;
}

.tag-heading .tag-group {
    display: block;
    margin-bottom: 2px;
    font-size: 0.45em;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tag-grid-link {
    font-size: 1.05em;
}

/* ============================================
   Die grid
   ============================================ */

/* one line: dropdowns, clear button, count, then the view toggle */
.die-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.die-filter select {
    max-width: 12em;
    padding: 3px 26px 3px 9px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--background-tertiary)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
        no-repeat right 7px center / 12px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.95em;
    line-height: 1.4;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.die-filter select:hover,
.die-filter select:focus-visible {
    border-color: var(--link-color);
    outline: none;
}

.die-filter select.active {
    border-color: var(--link-color);
    color: var(--link-color);
}

.die-filter option {
    background-color: var(--background-secondary);
    color: var(--text-primary);
}

.die-filter option:disabled {
    color: var(--text-muted);
}

.die-reset {
    display: inline-flex;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.die-reset:hover {
    color: var(--text-primary);
    background-color: var(--background-tertiary);
}

.list-toolbar > .die-count {
    margin-right: auto;
    padding-left: 6px;
    white-space: nowrap;
}


.die-grid {
    margin-top: 14px !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 18px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.die {
    margin: 0;
    padding: 0;
}

.die a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.die a:hover {
    color: var(--link-color);
    text-decoration: none;
}

/* each die fits a 128x128 square: never cropped, never stretched, the rest
   of the square is empty space */
.die-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
}

.die-thumb img {
    display: block;
    max-width: 128px;
    max-height: 128px;
    width: auto;
    height: auto;
    border-radius: 3px;
    transition: transform 0.15s;
}

.die a:hover .die-thumb img {
    transform: scale(1.05);
}

.die-label {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.8em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    html {
        background: white;
    }

    html::before {
        display: none;
    }

    body {
        background-color: white;
        color: black;
    }
    
    pre, code {
        background-color: #f5f5f5;
        color: black;
        border: 1px solid #ccc;
    }
    
    a {
        color: #0366d6;
        text-decoration: underline;
    }
}

/* ============================================
   Mobile Responsive
   ============================================ */

@media (max-width: 900px) {
    /* social links collapse to icons; full text stays in the tooltip */
    .nav-social .label {
        display: none;
    }
}

@media (max-width: 640px) {
    /* too narrow for side by side: both layouts stack, toggle hidden */
    html[data-layout="split"] .post-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }


    /* layout rows: 3+ columns (or .stack) become one column */
    .row.stack,
    .row:not(.cols-1):not(.cols-2) {
        flex-direction: column;
        align-items: center;
    }

    .row.stack > *,
    .row:not(.cols-1):not(.cols-2) > * {
        max-width: 100%;
    }

    /* phones: the dropdowns two by two, count + views below */
    .list-toolbar {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .die-filters {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    /* two dropdowns per row */
    .die-filter {
        flex: 1 1 calc(50% - 3px);
        min-width: 0;
    }

    .die-filter select {
        width: 100%;
        max-width: none;
        padding-left: 7px;
        padding-right: 20px;
        background-position: right 4px center;
        text-overflow: ellipsis;
    }

    .list-toolbar > .die-count {
        padding-left: 0;
    }

    .die-grid {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        gap: 14px 4px;
    }

    /* side by side makes no sense this narrow: keep full + all posts */
    .layout-toggle button[data-layout="split"] {
        display: none;
    }

    .site-header {
        gap: 6px 4px;
    }

    .brand {
        flex: 1 0 100%;
    }

    .nav a {
        padding: 6px 7px;
    }
}

@media (max-width: 768px) {
    body {
        padding: 16px;
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    h2 {
        font-size: 1.25em;
    }
    
    pre {
        padding: 12px;
        font-size: 0.8em;
    }
    
    table {
        font-size: 0.85em;
    }
    
    table th,
    table td {
        padding: 8px 10px;
    }
}