/* ============================================================
   Paper theme

   The single stylesheet for every Jekyll-rendered page (loaded
   from _includes/head.html). It replaces the former three-layer
   cascade of styles.css + custom-theme.css + print-object.css.

   The design system is the print-object world: paper stock, ink,
   one spot colour, Helvetica for display, Young Serif for prose,
   JetBrains Mono for chrome. The homepage (index.html) carries
   its own inline copy of the token values; if a token changes,
   change it in both places.

   The standalone subsites (smalltools/*, publications/, cv/, ...)
   link this file directly; the old theme files are gone. The
   legacy-neutralizer rules below exist because those pages still
   carry old-theme styling in their own <style> blocks.
   ============================================================ */

@font-face {
    font-family: 'Young Serif';
    src: url('/assets/fonts/YoungSerif-Regular.woff2') format('woff2'),
         url('/assets/fonts/YoungSerif-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

:root {
    --po-paper: #efe9dc;
    --po-ink: #14100c;
    --po-soft: #4a4238;
    --po-spot: #c0330f;
    --po-card: #e7e0d0;
    --po-serif: "Young Serif", Georgia, serif;
    --po-grotesk: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --po-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --po-rule: 2px solid #14100c;
    --po-hair: 1px solid #14100c;

    /* Legacy aliases: inline <style> blocks on talks/, press/ and some
       posts reference the old vaporwave token names. Pointing them at
       paper values retones those pages without touching their markup. */
    --color-bg: #efe9dc;
    --color-text: #14100c;
    --color-accent: #c0330f;
    --color-accent-cyan: #14100c;
    --color-accent-purple: #c0330f;
    --color-muted: #4a4238;
    --color-border: #14100c;
    --color-card-bg: #e7e0d0;
    --color-window-chrome: #ded5c2;
    --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--po-paper); }

body {
    margin: 0;
    background-color: var(--po-paper);
    color: var(--po-ink);
    font-family: var(--po-grotesk);
    font-size: 16px;
    line-height: 1.5;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0,0,0,0.018) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 65%, rgba(0,0,0,0.015) 0 1px, transparent 1px);
    background-size: 7px 7px, 11px 11px;
}

/* Browser surfaces carry the design too */
::selection { background: var(--po-ink); color: var(--po-paper); }
input, textarea { caret-color: var(--po-spot); }

/* ---------- Legacy neutralizers ----------
   The standalone subsites still carry old-theme styling in their own
   <style> blocks: neon glow, scanlines, terminal window chrome, shell
   prompts before headings. These rules suppress all of it, exactly as
   print-object.css did; the !important is what lets a linked stylesheet
   beat a page's own later <style> block. */

body *,
body *::before,
body *::after {
    text-shadow: none !important;
}
h1, h2, h3, h4, h5, h6,
.btn, .card, .gallery-card, .project-card, .badge,
.gallery-image, .gallery-content, summary, table, td, th, img, video {
    box-shadow: none !important;
}

/* Scanlines and CRT flicker belong to the old theme */
body::before, body::after { display: none !important; }

/* The old theme prefixed headings and back-links with prompt glyphs */
h1::before, h2::before, h3::before,
.summary-heading::before, .h1-kicker::before { content: none !important; }
.back-link::before, .back-link::after { content: none !important; }

/* Terminal window chrome: the dots and title-bar strips */
.header::before,
.gallery-image::before,
.gallery-card::before { content: none !important; }
.gallery-image, .gallery-card { border-top-width: 0 !important; }
.gallery-card .window-chrome,
.gallery-card .chrome-dots { display: none !important; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--po-grotesk) !important;
    color: var(--po-ink) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    line-height: 1.03;
    margin: 2rem 0 1rem;
    border-left: none !important;
    padding-left: 0 !important;
}
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
h4 { font-size: 1.05rem; }

/* Real section headings get the heavy rule; card titles (also h2 in the
   gallery markup) do not. */
h2:not(.gallery-title):not(.card-title),
.summary-heading {
    padding-bottom: 10px;
    border-bottom: 6px solid var(--po-ink);
    display: block;
}

p, li, dd, blockquote, .gallery-excerpt, .card-text, .bio {
    font-family: var(--po-serif) !important;
    color: var(--po-ink) !important;
    line-height: 1.6;
}
p { margin: 0 0 1.1rem; }

a { color: var(--po-spot) !important; text-underline-offset: 3px; }
a:hover { color: var(--po-ink) !important; }

ul, ol { padding-left: 1.5em; margin: 0 0 1.1rem; }
li { margin-bottom: 0.55rem; }
li > p { margin: 0; }
li > p + p { margin-top: 0.5rem; }

hr {
    border: none;
    height: 1px;
    background: var(--po-ink);
    opacity: 0.35;
    margin: 2.5rem 0;
}

img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; border: 0; }

code, pre, kbd, samp {
    font-family: var(--po-mono);
    font-size: 0.88em;
}
code { background: rgba(20, 16, 12, 0.06); padding: 0.15em 0.4em; }
pre {
    background: rgba(20, 16, 12, 0.05);
    border: var(--po-hair);
    padding: 1rem 1.25rem;
    overflow-x: auto;
}
pre code { background: none; padding: 0; }

blockquote {
    margin: 1.5rem 0;
    padding-left: 1.25rem;
    border-left: var(--po-rule);
    color: var(--po-soft);
}

.mono, code, pre, kbd, samp,
.meta-label, .meta-value, .location, .year-label,
.badge, .nav-group-label, .hero-eyebrow, .tag-sku {
    font-family: var(--po-mono) !important;
    color: var(--po-soft) !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.year-label { margin-right: 0.75em; }

/* ---------- Layout ---------- */

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

section { padding: 3rem 0; position: relative; }

/* ---------- Skip link ---------- */

.skip-link {
    position: absolute !important;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--po-ink) !important;
    color: var(--po-paper) !important;
    padding: 12px 18px;
    font-weight: 700;
    font-family: var(--po-grotesk) !important;
    text-decoration: none !important;
}
.skip-link:focus {
    left: 8px;
    top: 8px;
    outline: 3px solid var(--po-spot) !important;
    outline-offset: 2px;
}

/* ---------- Buttons ---------- */
/* Letterpress: solid ink block, label knocked out in paper, a hairline
   highlight along the top edge and a shadow along the bottom so it reads
   as pressed into the stock rather than floating above it. */

.btn, .btn-primary, .back-link {
    background: var(--po-ink) !important;
    border: none !important;
    color: var(--po-paper) !important;
    font-family: var(--po-grotesk) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
                inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
    padding: 12px 20px !important;
    min-height: 46px;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: background-color 0.12s ease, box-shadow 0.12s ease !important;
}
.btn::before, .btn::after { content: none !important; }
.btn:hover, .btn-primary:hover, .back-link:hover,
.btn:focus-visible, .btn-primary:focus-visible, .back-link:focus-visible {
    background: var(--po-spot) !important;
    color: var(--po-paper) !important;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.45),
                inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
}

button:not(.btn) {
    background: var(--po-ink) !important;
    color: var(--po-paper) !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    min-height: 38px;
    padding: 8px 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
                inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
}
button:not(.btn):hover {
    background: var(--po-spot) !important;
    color: var(--po-paper) !important;
}

/* ---------- Page headers ---------- */

.gallery-header, .header {
    background: transparent !important;
}
.gallery-header {
    padding: 3rem 0 2.5rem;
    text-align: center;
    margin-bottom: 2.5rem;
    border-bottom: var(--po-rule) !important;
}
.gallery-header h1 {
    margin: 1.25rem 0 0.5rem;
    border: none;
}
.gallery-header .back-link { margin-bottom: 0; }

.gallery-section { padding: 0 0 4rem; }

.project-post-header {
    padding: 3rem 0;
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    border-bottom: var(--po-rule);
}
.project-post-header .back-link {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1;
}
.project-post-header h1 {
    margin: 1.5rem 0 0;
    padding-bottom: 0.85rem;
    border-bottom: none;
}
.project-post-header .year-badge {
    display: block;
    margin: 0.8rem 0 0;
    padding: 0;
    border: none;
    font-family: var(--po-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--po-soft);
}

.section-title { text-align: center; }
.section-subtitle {
    font-family: var(--po-serif);
    color: var(--po-soft);
    line-height: 1.6;
    margin: 0 auto 2rem;
    max-width: 640px;
    text-align: center;
}

/* ---------- Bento gallery ---------- */

.gallery-grid {
    --bento-border: rgba(20, 16, 12, 0.35);
    --bento-ease: cubic-bezier(0.22, 1, 0.36, 1);

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: dense;
    align-items: start;
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.gallery-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    background: var(--po-paper) !important;
    border: 1px solid var(--bento-border) !important;
    border-radius: 14px !important;
    /* !important re-grants what the legacy shadow kill above strips */
    box-shadow:
        0 1px 2px rgba(20, 16, 12, 0.05),
        0 6px 16px rgba(20, 16, 12, 0.06) !important;
    text-decoration: none;
    padding: 0;
    color: var(--po-soft);
    transition:
        transform 0.28s var(--bento-ease),
        border-color 0.28s var(--bento-ease),
        box-shadow 0.28s var(--bento-ease) !important;
}

.gallery-card--wide { grid-column: span 3; }
.gallery-card--feature { grid-column: span 4; }

/* Auto-generated lists get a repeating 3,3,2,2,2 rhythm that tiles into
   whole rows. */
.gallery-grid--auto > .gallery-card:nth-child(5n+1),
.gallery-grid--auto > .gallery-card:nth-child(5n+2) {
    grid-column: span 3;
}

.gallery-card:hover {
    transform: translateY(-4px);
    border-color: var(--po-spot) !important;
    box-shadow:
        0 2px 4px rgba(20, 16, 12, 0.07),
        0 16px 32px rgba(20, 16, 12, 0.11) !important;
}
.gallery-card:active { transform: translateY(-1px); }

.gallery-card:focus-visible {
    outline: 3px solid var(--po-spot);
    outline-offset: 3px;
}

.gallery-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: contain;
    object-position: center;
    background: rgba(20, 16, 12, 0.035);
    display: block;
    border-bottom: 1px solid var(--bento-border);
    transition: transform 0.4s var(--bento-ease);
}
.gallery-card:hover .gallery-image { transform: scale(1.03); }

.gallery-content {
    padding: 1.25rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.55rem;
    background: transparent !important;
}

.gallery-title {
    font-size: 1.05rem;
    font-weight: 600 !important;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--po-ink) !important;
    border: none;
    padding: 0;
}
.card-title { color: var(--po-ink) !important; }

.gallery-excerpt {
    color: var(--po-soft) !important;
    line-height: 1.6;
    font-size: 0.845rem;
    margin: 0;
}

.year-badge {
    font-family: var(--po-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--po-soft) !important;
    border: none;
    padding: 0;
    margin: 0;
    margin-top: auto;
    padding-top: 0.85rem;
    display: inline-block;
}
.year-badge::before, .year-badge::after { content: none !important; }

.gallery-card--wide .gallery-content,
.gallery-card--feature .gallery-content { padding: 1.5rem 1.6rem 1.65rem; }
.gallery-card--wide .gallery-title,
.gallery-card--feature .gallery-title { font-size: 1.25rem; }
.gallery-card--wide .gallery-excerpt,
.gallery-card--feature .gallery-excerpt { font-size: 0.885rem; }

.gallery-grid--auto > .gallery-card:nth-child(5n+1) .gallery-title,
.gallery-grid--auto > .gallery-card:nth-child(5n+2) .gallery-title { font-size: 1.25rem; }

.gallery-card--feature .gallery-image { aspect-ratio: 16 / 9; }

@media (max-width: 1100px) {
    .gallery-grid { grid-template-columns: repeat(4, 1fr); }
    .gallery-card,
    .gallery-card--wide,
    .gallery-grid--auto > .gallery-card:nth-child(5n+1),
    .gallery-grid--auto > .gallery-card:nth-child(5n+2) { grid-column: span 2; }
    .gallery-card--feature { grid-column: span 4; }
}

/* ---------- Project posts ---------- */

.project-content {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 auto 2rem;
    max-width: 68rem;
    position: relative;
}
.project-content p {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.8;
}
.project-content img { margin: 2rem 0; display: block; }
.project-content video {
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    display: block;
}
.project-content ul { margin-bottom: 1.5rem; }
.project-content li::marker { color: var(--po-spot); }

/* ---------- Cards and blocks ---------- */

.card, .project-card, .content-block {
    background: var(--po-paper) !important;
    border: var(--po-hair) !important;
    border-radius: 0 !important;
}
.card-img-top, .profile-image {
    border: none !important;
    border-bottom: var(--po-hair) !important;
    border-radius: 0 !important;
    background: var(--po-card) !important;
}

/* Translucent dark panels designed for the old dark background.
   Some carry those dark colours as inline styles, so !important is
   needed to keep their text readable on paper. */
.spatial-block, .demo-block, .note-block, .callout, .highlight-block {
    background: rgba(20, 16, 12, 0.05) !important;
    border: var(--po-hair) !important;
    color: var(--po-ink) !important;
}

/* ---------- Details / accordions ---------- */

details { border-top: var(--po-hair); }
details summary {
    background: transparent !important;
    color: var(--po-ink) !important;
    cursor: pointer;
}
details summary:hover { background: rgba(0, 0, 0, 0.04) !important; }
details[open] summary { border-bottom: var(--po-hair) !important; }

/* ---------- Tables ---------- */

table { border-collapse: collapse !important; width: 100%; margin: 1.5rem 0; }
th {
    font-family: var(--po-mono) !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px !important;
    color: var(--po-soft) !important;
    border-bottom: var(--po-rule) !important;
    text-align: left;
    padding: 0.6rem 1rem 0.6rem 0;
}
td {
    border-bottom: var(--po-hair) !important;
    font-family: var(--po-serif) !important;
    padding: 0.6rem 1rem 0.6rem 0;
}
table tr:hover { background: rgba(0, 0, 0, 0.03) !important; }

/* ---------- Badges and tags ---------- */

.badge {
    background: transparent !important;
    border: 2px solid var(--po-spot) !important;
    color: var(--po-spot) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
}

/* The talks page styles .tool-tag inline with a hard-coded purple;
   !important is required to beat that page-level <style> block. */
.tool-tag {
    border-color: rgba(192, 51, 15, 0.5) !important;
    color: var(--po-spot) !important;
    font-size: 11px !important;
}
.tool-venues, .muted, .subtle, .dim, .faint, small,
.meta, .caption, .note, .hint, .help-text {
    color: var(--po-soft) !important;
    opacity: 1 !important;
}
.tool-desc { color: var(--po-ink) !important; }
.section-subtitle { color: var(--po-soft) !important; }

/* Nothing carrying text should sit under ~0.75 opacity on paper */
[style*="opacity:0.5"], [style*="opacity: 0.5"],
[style*="opacity:0.6"], [style*="opacity: 0.6"],
[style*="opacity:0.4"], [style*="opacity: 0.4"],
[style*="opacity:0.3"], [style*="opacity: 0.3"] {
    opacity: 0.95 !important;
}

/* ---------- Legacy utility shim ----------
   Older posts use a handful of Bootstrap utility classes that used to
   come from styles.css. Only the ones actually present in _posts are
   defined here. */

.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.justify-content-center { justify-content: center; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; padding: 0 15px; }
.text-center { text-align: center; }
.d-block { display: block; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 0.5rem; }
.img-fluid { max-width: 100%; height: auto; }
.rounded, .rounded-left, .rounded-right { border-radius: 4px; }
.shadow-sm { box-shadow: 0 1px 2px rgba(20, 16, 12, 0.08), 0 4px 12px rgba(20, 16, 12, 0.07); }
.image-caption {
    font-family: var(--po-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--po-soft);
    text-align: center;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .col-8 { flex: 0 0 100%; max-width: 100%; }
}

/* ---------- Footer ---------- */

.site-copyright {
    border-top: var(--po-rule);
    color: var(--po-soft);
    font-family: var(--po-mono);
    letter-spacing: 0.02em;
    text-align: center;
    padding: 24px 16px;
    font-size: 12px;
    margin-top: 3rem;
}
.site-copyright p { font-family: inherit; color: inherit; margin: 0; }
.site-copyright a { color: var(--po-spot); }

/* ---------- Interactive tools ----------
   Media surfaces stay dark so output is not washed out; controls use
   the UI face, not the prose serif. Pages with their own style blocks
   (the standalone tools) override these freely. */

canvas, video, .canvas-wrap, .stage, .viewport {
    background: #0b0b0b !important;
}

input, select, button, textarea, label, option,
.control, .controls, .slider, .toolbar {
    font-family: var(--po-grotesk) !important;
    color: var(--po-ink) !important;
}
input, select, textarea {
    background: var(--po-paper) !important;
    border: var(--po-hair) !important;
    border-radius: 0 !important;
    min-height: 38px;
}

::placeholder { color: rgba(74, 66, 56, 0.75) !important; opacity: 1 !important; }
::-webkit-input-placeholder { color: rgba(74, 66, 56, 0.75) !important; }
::-moz-placeholder { color: rgba(74, 66, 56, 0.75) !important; opacity: 1 !important; }

/* ---------- Cursor ----------
   A printer's registration mark, the target used to align colour plates
   on press. Drawn twice: a thick paper stroke underneath and a thin ink
   stroke on top, so it stays legible on paper, photographs and the dark
   canvases in /smalltools/. */

body, div, section, article, main, header, footer, p, span, li, td, th,
h1, h2, h3, h4, h5, h6, img, canvas, video {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23efe9dc' stroke-width='3.5' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='6'/%3E%3Cpath d='M13 1.5v4.5M13 20v4.5M1.5 13h4.5M20 13h4.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%2314100c' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='6'/%3E%3Cpath d='M13 1.5v4.5M13 20v4.5M1.5 13h4.5M20 13h4.5'/%3E%3C/g%3E%3C/svg%3E") 13 13, auto !important;
}

/* Interactive: the mark closes up and inks in, in the spot colour */
a, button, summary, label, .btn, [role="button"],
input[type="submit"], input[type="button"], input[type="checkbox"],
input[type="radio"], select, details summary {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23efe9dc' stroke-width='3.5' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='7.5'/%3E%3Cpath d='M13 1v4M13 21v4M1 13h4M21 13h4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c0330f' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='7.5'/%3E%3Cpath d='M13 1v4M13 21v4M1 13h4M21 13h4'/%3E%3C/g%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23c0330f'/%3E%3C/svg%3E") 13 13, pointer !important;
}

/* Text entry keeps a real caret; a target mark there would be misleading */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea {
    cursor: text !important;
}

/* The drone cursor belongs to the old theme; keep its elements hidden in
   case a cached page still injects them. */
.drone { display: none !important; }

/* ---------- Surveillance tracker bar ----------
   tracker.js injects its own <style> at runtime, after this file, so
   these need !important to win regardless of source order. */

#sv-bar {
    background: var(--po-paper) !important;
    border-top: var(--po-rule) !important;
    color: var(--po-soft) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#sv-bar .sv-eye,
#sv-bar .sv-dl,
#sv-bar .sv-dw,
#sv-bar .sv-info,
#sv-bar .sv-local,
#sv-bar .sv-summary,
#sv-bar .sv-full,
#sv-bar .sv-section { color: var(--po-soft) !important; }

#sv-bar .sv-dv { color: var(--po-ink) !important; }

#sv-bar .sv-link,
#sv-bar .sv-full a,
#sv-bar a { color: var(--po-spot) !important; }
#sv-bar .sv-link:hover,
#sv-bar a:hover { color: var(--po-ink) !important; }

#sv-bar .sv-toggle,
#sv-bar .sv-close {
    background: transparent !important;
    color: var(--po-ink) !important;
    border: 2px solid var(--po-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#sv-bar .sv-toggle:hover,
#sv-bar .sv-close:hover {
    background: var(--po-ink) !important;
    color: var(--po-paper) !important;
}

#sv-bar .sv-details,
#sv-bar .sv-details-inner {
    background: var(--po-paper) !important;
    border-top: var(--po-hair) !important;
    color: var(--po-soft) !important;
}
#sv-bar .sv-section { border-color: rgba(20, 16, 12, 0.15) !important; }
#sv-bar .sv-full { border-top-color: rgba(20, 16, 12, 0.15) !important; }

/* ---------- Focus ---------- */

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--po-spot) !important;
    outline-offset: 2px;
}

/* ---------- Reduced motion ----------
   Transitions here are colour and shadow only, plus the card lift;
   stop the movement but keep the state changes visible. */

@media (prefers-reduced-motion: reduce) {
    .gallery-card, .gallery-image { transition: none; }
    .gallery-card:hover { transform: none; }
    .gallery-card:hover .gallery-image { transform: none; }
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
    .gallery-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .gallery-card,
    .gallery-card--wide,
    .gallery-card--feature,
    .gallery-grid--auto > .gallery-card:nth-child(5n+1),
    .gallery-grid--auto > .gallery-card:nth-child(5n+2) { grid-column: span 1; }
    .gallery-card__slug { display: none; }
    .gallery-section { padding: 0 0 2.5rem; }
    .gallery-header, .project-post-header { padding: 2rem 0.75rem; }
    /* The absolute back-link overlaps the centered title on narrow
       screens, so it rejoins the flow above it. */
    .project-post-header .back-link { position: static; margin-bottom: 0.5rem; }
    .project-post-header h1 { font-size: 1.8rem; margin-top: 0.75rem; }
    .project-content ul { padding-left: 1.1em; }
}