/*
Theme Name: Evenue Urban
Description: Poster brutalism — flat colour field, heavy type and hard geometry, no hero photograph. An ink-on-paper fly-poster wall with one electric volt accent. Port of the legacy evenue-urban design exploration onto the v2 starter structure.
Version: 0.6.2

Requires PHP: 8.1
Author: Evenue
Text Domain: evenue-urban
Contract: 2.12.0
*/

/* Colors and fonts ride the --evenue-* tokens: heading-text = ink,
   secondary = VOLT (the one electric accent — always a SURFACE, never a
   text color: backgrounds, marker sweeps, hard shadows, sticker chips,
   forever paired with ink type), page-bg = paper, surface-bg = warm paper.
   REQUIRES A LIGHT SECONDARY: ink type sits on every volt surface, so a
   dark --evenue-secondary (e.g. a deep red) fails contrast on chips,
   stickers and the hero copy — pick a palette with a bright accent.
   Hard geometry is the identity: zero-radius surfaces, pill controls,
   zero-blur offset shadows, 2px ink cuts. */

:root {
    --ink: var(--evenue-heading-text);
    --paper: var(--evenue-page-bg);
    --paper-warm: var(--evenue-surface-bg);
    --paper-deep: color-mix(in srgb, var(--evenue-surface-bg) 96%, var(--evenue-heading-text));
    --volt: var(--evenue-secondary);
    --text-soft: var(--evenue-body-text);
    --text-faint: var(--evenue-muted-text);
    --border-light: var(--evenue-divider-h-color);
    --cut: 2px var(--evenue-border-style) var(--ink);

    --shadow-hard: 6px 6px 0 var(--ink);
    --shadow-hard-volt: 6px 6px 0 var(--volt);
    --shadow-card: 8px 8px 0 var(--ink);
    --shadow-ctrl: 4px 4px 0 var(--ink);
    --shadow-ctrl-volt: 3px 3px 0 var(--volt);
    --shadow-soft: 0 24px 48px color-mix(in srgb, var(--ink) 16%, transparent);

    --sweep: linear-gradient(to top, var(--volt) 0.3em, transparent 0.3em);
    --sweep-title: linear-gradient(to top, var(--volt) 0.32em, transparent 0.32em);

    --sp-sm: 1rem;
    --sp-md: 2rem;
    --sp-lg: 3rem;
    --sp-xl: 4.5rem;
    --sp-2xl: 7rem;
    --header-h: 76px;
    /* The breadcrumb bar's row; from 1025px up it sticks under the header,
       so the sticky stack is header + trail there, the header alone below. */
    --crumb-h: 44px;
    --stack-h: var(--header-h);

    --t-fast: 120ms cubic-bezier(0.3, 0.7, 0.4, 1);
    --t-base: 180ms cubic-bezier(0.3, 0.7, 0.4, 1);
    --t-slower: 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1025px) {
    :root { --stack-h: calc(var(--header-h) + var(--crumb-h)); }
}
/* Anchor targets clear whatever is stuck above them. */
[id] { scroll-margin-top: calc(var(--stack-h) + var(--sp-sm)); }
/* In-page jumps glide instead of cutting — the hero's "pick your base", the
   quicklinks, the results anchors. Motion is a preference. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--text-soft);
    font-family: var(--evenue-body-font);
    letter-spacing: var(--evenue-body-letter-spacing);
    line-height: 1.7;
    font-size: 16px;
}

::selection { background: var(--volt); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

h1, h2, h3, h4 {
    font-family: var(--evenue-heading-font);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 0.5em;
}
/* A title keeps its words whole. urban_fit() (functions.php) writes the
   letter count of the title's longest word to the h1 as --fit, and every
   title size below is capped so that many capitals fit the .wrap line
   (1400px at most, minus the .wrap padding). 0.86em is one capital's width
   with room to spare: measured at weight 700 and -0.03em tracking, Libre
   Baskerville needs 0.84em, Syne 0.82em, Cormorant Garamond 0.65em. A word
   only breaks when even 1.25rem cannot hold it. */
h1 {
    --fit-size: calc((min(100vw, 1400px) - 2 * clamp(1rem, 3.5vw, 3rem)) / (var(--fit, 1) * 0.86));
    font-size: max(1.25rem, min(clamp(2.75rem, 6vw, 5.5rem), var(--fit-size)));
    text-transform: uppercase;
    line-height: 0.95;
    overflow-wrap: anywhere;
}
h2 { font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }
.prose a, .link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--volt);
}
.prose a:hover { background-image: var(--sweep); text-decoration-color: var(--ink); }

img { max-width: 100%; height: auto; display: block; border-radius: 0; }

hr { border: 0; border-top: var(--cut); margin: var(--sp-xl) 0; }

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1rem, 3.5vw, 3rem); }
.wrap-narrow { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 3.5vw, 3rem); }

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

/* The micro-label voice. */
.label, .card-meta {
    font-family: var(--evenue-body-font);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-faint);
}

/* The volt sticker chip: pill, ink border, ink text — volt is a surface. */
.chip-volt {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.75rem;
    background: var(--volt);
    border: var(--cut);
    border-radius: 999px;
    color: var(--ink);
    font-family: var(--evenue-heading-font);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-ctrl-volt);
}
.chip-paper, .ai-label--badge { background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }

/* The badge shows only the short mark; its full label stays readable for
   screen readers. */
.ai-label__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The label on an AI-generated image (contract 2.11.0): the paper chip, with
   the cut and the hard shadow, in the micro-label voice. Bottom right on every
   picture, so it reads as part of the image and not of the card text below it
   (the index number holds the top left). */
.ai-label--badge {
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
    z-index: 2;
    padding: 0.05rem 0.5rem;
    border: var(--cut);
    box-shadow: 2px 2px 0 var(--ink);
    border-radius: 999px;
    color: var(--ink);
    font-family: var(--evenue-body-font);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.gallery-grid__item { position: relative; } /* the label's frame on a gallery tile */
.hero-image > .ai-label--badge { left: auto; right: clamp(1rem, 3.5vw, 3rem); bottom: var(--sp-sm); }
@media (max-width: 768px) {
    /* A list row's thumbnail is 96px wide: the mark moves into its corner. */
    .list-view .ai-label--badge { right: 0.3rem; bottom: 0.3rem; }
}

/* Section header: 2px ink cut, index chip + label, shouting title. */
.section { padding-block: var(--sp-2xl); } /* block only: on "wrap single section" the shorthand zeroed .wrap's side padding */
.section-header {
    border-top: var(--cut);
    padding-top: var(--sp-sm);
    margin-bottom: var(--sp-xl);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
}
.section-header__label { display: inline-flex; align-items: center; gap: 0.75rem; }
.section-header__link {
    font-family: var(--evenue-heading-font);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--volt);
}
.section-header__link:hover { background-image: var(--sweep); }
.section-header__title { flex-basis: 100%; margin: var(--sp-sm) 0 0; }

/* ---------- buttons: pills that lift onto hard shadows ---------- */

.btn, .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: var(--evenue-button-padding-y) var(--evenue-button-padding-x);
    font-family: var(--evenue-heading-font);
    font-size: var(--evenue-button-font-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    border: var(--evenue-button-border-width) solid var(--evenue-button-border-color);
    border-radius: 999px; /* labeled identity: "pill controls" in the header above */
    background: var(--evenue-button-bg);
    color: var(--evenue-button-text);
    cursor: pointer;
    transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base), color var(--t-base);
}
.btn:hover, .button:hover { background: var(--evenue-button-bg-hover); color: var(--evenue-button-text-hover); transform: translate(-2px, -2px); box-shadow: var(--shadow-ctrl); }
.btn:active, .button:active { background: var(--evenue-button-bg-active); transform: none; box-shadow: none; }
.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--on-dark { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--on-dark:hover { background: var(--volt); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 color-mix(in srgb, var(--volt) 35%, transparent); }
.btn--text {
    background: none;
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    color: var(--ink);
    padding: 0 0 0.25em;
}
.btn--text:hover { background: none; background-image: var(--sweep); color: var(--ink); transform: none; box-shadow: none; }

/* ---------- header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 300;
    height: var(--header-h);
    background: var(--paper);
    border-bottom: 2px solid transparent;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.site-header.scrolled { border-bottom-color: var(--ink); box-shadow: 0 4px 0 var(--volt); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); }
.brand {
    font-family: var(--evenue-heading-font);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.brand:hover { background-image: var(--sweep); }
.brand img { height: 42px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 0.5rem; }
.site-nav .button { display: none; } /* the drawer's copy of the booking button, phones only */
.site-nav > a:not(.button) {
    font-family: var(--evenue-heading-font);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink);
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 999px;
    transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.site-nav > a:not(.button):hover { border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: var(--shadow-ctrl-volt); }
.site-nav > a:not(.button)[aria-current] { border-color: var(--ink); background: var(--volt); }

.header-actions { display: flex; align-items: center; gap: var(--sp-sm); }
.header-actions .button { padding: 0.55rem 1.15rem; font-size: 0.75rem; }
.lang-switcher { display: inline-flex; gap: 8px; }
.lang { font-size: 0.75rem; font-weight: 700; color: var(--text-faint); }
.lang.current { color: var(--ink); background-image: var(--sweep); }

/* From four languages up the codes fold into a disclosure. */
.lang-switcher--menu { position: relative; }
.lang-switcher--menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; }
.lang-switcher--menu > summary::-webkit-details-marker { display: none; }
.lang-switcher--menu > summary::after { content: "\203a"; display: inline-block; transform: rotate(90deg); transition: transform var(--t-fast); }
.lang-switcher--menu[open] > summary::after { transform: rotate(-90deg); }
.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    background: var(--paper);
    border: var(--cut);
    box-shadow: var(--shadow-hard);
}
.lang-menu .lang { text-align: right; }

.burger { display: none; flex-direction: column; gap: 6px; background: none; border: 0; padding: 8px; cursor: pointer; z-index: 1300; }
.burger span { width: 28px; height: 3px; background: var(--ink); border-radius: 999px; transition: transform var(--t-base), opacity var(--t-base); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 1024px) {
    .burger { display: flex; }
    .header-actions .button { display: none; }
    .site-nav .button { display: inline-flex; min-height: 44px; }
    .site-nav {
        position: fixed;
        inset: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--sp-lg);
        padding: var(--sp-xl) clamp(1rem, 6vw, 3rem);
        background: var(--paper);
        /* The drawer used to be parked a viewport's width to the right with a
           transform, and a fixed, transformed box still counts as page: a
           phone's document was 407px wide and scrolled sideways into blank
           paper. The drawer sits over the viewport now and is revealed with a
           clip that opens from the right edge; while closed it is hidden
           from focus and readers. */
        clip-path: inset(0 0 0 100%);
        visibility: hidden;
        transition: clip-path 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 320ms;
        z-index: 1200;
    }
    .site-nav.open { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
    .site-nav > a:not(.button) { font-size: 3rem; border: 0; padding: 0; }
    .site-nav > a:not(.button):hover { transform: none; box-shadow: none; background-image: var(--sweep); }
    .nav-scrim { display: none; }
}

/* ---------- breadcrumbs ---------- */

/* One bar above the page, the trail scrollable on phones. A fixed row, so
   nothing underneath it moves when a long trail scrolls. */
.breadcrumbs {
    height: var(--crumb-h);
    font-family: var(--evenue-heading-font);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--paper);
    border-bottom: 2px solid var(--border-light);
}
.breadcrumbs__inner { display: flex; align-items: center; height: 100%; }
.breadcrumbs ol { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.breadcrumbs ol::-webkit-scrollbar { display: none; }
.breadcrumbs li { display: flex; gap: 0.75rem; align-items: center; }
.breadcrumbs li + li::before { content: "\203a"; color: var(--text-faint); }
.breadcrumbs a { color: var(--text-faint); }
.breadcrumbs a:hover { color: var(--ink); background-image: var(--sweep); }
.breadcrumbs [aria-current] { color: var(--ink); }
/* On the desktop the trail rides under the header; the property quicklinks
   are the next sticky layer and start below it. */
@media (min-width: 1025px) {
    .breadcrumbs { position: sticky; top: var(--header-h); z-index: 250; }
}

/* ---------- footer: ink field ---------- */

.site-footer { margin-top: var(--sp-2xl); background: var(--ink); color: color-mix(in srgb, var(--paper) 60%, transparent); }
.footer-inner { display: flex; flex-direction: column; gap: var(--sp-md); padding-block: var(--sp-2xl) var(--sp-xl); }
.footer-brand { font-family: var(--evenue-heading-font); font-size: 3rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; color: var(--paper); margin: 0; }
.footer-groups { display: flex; gap: var(--sp-xl); flex-wrap: wrap; }
.footer-nav { display: flex; gap: var(--sp-md); flex-wrap: wrap; align-items: baseline; }
.footer-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in srgb, var(--paper) 60%, transparent); } /* 45 % landed at 4,0:1 on ink */
.footer-nav a { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--paper); }
.footer-nav a:hover { background: var(--volt); color: var(--ink); box-shadow: 0.25em 0 0 var(--volt), -0.25em 0 0 var(--volt); }
.footer-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    padding-top: var(--sp-sm);
    border-top: 2px solid color-mix(in srgb, var(--paper) 20%, transparent);
    font-size: 0.8rem;
}
.footer-meta .lang { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.footer-meta .lang.current, .footer-meta a.lang:hover { color: var(--paper); background: none; }
.footer-legal { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.footer-legal a { color: inherit; }
.footer-legal a:hover { color: var(--paper); }
.footer-note { margin: 0; font-size: 0.75rem; color: color-mix(in srgb, var(--paper) 55%, transparent); }

/* ---------- the volt field hero (no photograph) ---------- */

.hero-volt {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: flex-end;
    background: var(--volt);
    border-bottom: var(--cut);
    overflow: hidden;
}
.hero-volt.compact { min-height: 52vh; }
/* A listing's hero is shorter than the front page's, so its title is drawn smaller. */
.hero-volt.compact .hero-title { font-size: max(1.25rem, min(clamp(3rem, 8.5vw, 8rem), var(--fit-size))); }
.hero-volt::before {
    content: "";
    position: absolute;
    top: -22vh;
    right: 8vw;
    width: clamp(180px, 22vw, 340px);
    aspect-ratio: 1;
    border: var(--cut);
    border-radius: 50%;
}
.hero-volt::after {
    content: "";
    position: absolute;
    right: 22vw;
    top: 18%;
    width: clamp(56px, 7vw, 120px);
    aspect-ratio: 1;
    background: var(--paper);
    border: var(--cut);
    transform: rotate(12deg);
    box-shadow: var(--shadow-hard);
}
@media (prefers-reduced-motion: no-preference) {
    .hero-volt::before { animation: drift 14s ease-in-out infinite alternate; }
    .hero-volt::after { animation: tilt 9s ease-in-out infinite alternate; }
    @keyframes drift { to { transform: translateY(6vh); } }
    @keyframes tilt { to { transform: rotate(-6deg) translateY(-2vh); } }
}
.hero-volt .hero-inner { position: relative; z-index: 1; width: 100%; padding-bottom: var(--sp-xl); }
.hero-label { margin-bottom: var(--sp-sm); }
.hero-title {
    font-size: max(1.25rem, min(clamp(3.5rem, 12.5vw, 12rem), var(--fit-size)));
    line-height: 0.9;
    margin: 0 0 0.2em;
    overflow-wrap: anywhere;
}
.hero-sub { font-size: 1.125rem; max-width: 44ch; color: var(--ink); margin-bottom: var(--sp-md); }
.hero-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: center; }
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: var(--sp-sm);
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.hero-scroll::after { content: ""; width: 4px; height: 48px; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
    .hero-scroll::after { animation: pulse 1.6s ease-in-out infinite; transform-origin: top center; }
    @keyframes pulse { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
}
@media (max-width: 1024px) { .hero-scroll { display: none; } }

/* Image hero variant. */
.hero-image {
    position: relative;
    min-height: 64vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--ink);
    border-bottom: var(--cut);
}
.hero-image img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--ink) 72%, transparent) 100%); }
.hero-image .hero-inner { position: relative; z-index: 1; width: 100%; padding-bottom: var(--sp-lg); }
.hero-image .hero-title { color: var(--paper); font-size: max(1.25rem, min(clamp(3rem, 9vw, 8.5rem), var(--fit-size))); }
.hero-image p { color: color-mix(in srgb, var(--paper) 88%, transparent); max-width: 52ch; }

/* ---------- cards: posters with hard-offset lift ---------- */

.card {
    display: flex;
    flex-direction: column;
    background: var(--evenue-surface-bg);
    border: var(--cut);
    border-radius: 0;
    overflow: visible;
    color: inherit;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.card:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-card); }
.card-image-wrap { position: relative; overflow: hidden; border-bottom: var(--cut); background: var(--paper-deep); }
.card-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--t-slower); }
.card:hover .card-image { transform: scale(1.04); }
.card-index {
    position: absolute;
    top: 0.6rem;
    left: 0.8rem;
    z-index: 1;
    font-family: var(--evenue-heading-font);
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff; /* deliberate: mix-blend-mode needs a fixed white */
    mix-blend-mode: difference;
}
.card-body { padding: var(--sp-sm); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card-title {
    display: block;
    font-family: var(--evenue-heading-font);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0;
}
.card:hover .card-title { background-image: var(--sweep-title); }
.card-date { align-self: flex-start; }
.card-excerpt { display: block; font-size: 0.875rem; color: var(--text-soft); }
.card-excerpt p { margin: 0; }
.card-tags { display: block; font-size: 0.8rem; color: var(--text-faint); }

/* The broken poster wall (front page): 6 columns, staggered drops. */
.poster-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-lg); padding-bottom: var(--sp-xl); }
.poster-wall > .card:nth-child(6n+1) { grid-column: span 3; }
.poster-wall > .card:nth-child(6n+2) { grid-column: span 3; transform: translateY(var(--sp-lg)); }
.poster-wall > .card:nth-child(6n+3) { grid-column: span 2; }
.poster-wall > .card:nth-child(6n+4) { grid-column: span 2; transform: translateY(var(--sp-md)); }
.poster-wall > .card:nth-child(6n+5) { grid-column: span 2; transform: translateY(var(--sp-xl)); }
.poster-wall > .card:nth-child(6n) { grid-column: 2 / span 4; }
.poster-wall > .card:nth-child(6n+2):hover { transform: translateY(var(--sp-lg)) translate(-4px, -4px); }
.poster-wall > .card:nth-child(6n+4):hover { transform: translateY(var(--sp-md)) translate(-4px, -4px); }
.poster-wall > .card:nth-child(6n+5):hover { transform: translateY(var(--sp-xl)) translate(-4px, -4px); }

/* The alternating wide/narrow wall (venues): 12 columns. */
.pair-wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-xl) var(--sp-lg); padding-bottom: var(--sp-xl); }
.pair-wall > .card:nth-child(4n+1) { grid-column: span 7; }
.pair-wall > .card:nth-child(4n+2) { grid-column: span 5; transform: translateY(var(--sp-lg)); }
.pair-wall > .card:nth-child(4n+3) { grid-column: span 5; }
.pair-wall > .card:nth-child(4n) { grid-column: span 7; transform: translateY(var(--sp-md)); }
.pair-wall > .card:nth-child(4n+1) .card-image, .pair-wall > .card:nth-child(4n) .card-image { aspect-ratio: 16 / 10; }
.pair-wall > .card:nth-child(4n+2):hover { transform: translateY(var(--sp-lg)) translate(-4px, -4px); }
.pair-wall > .card:nth-child(4n):hover { transform: translateY(var(--sp-md)) translate(-4px, -4px); }

/* The stair (related / property events): 3 columns, stepped. */
.stair-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl) var(--sp-lg); padding-bottom: var(--sp-lg); }
.stair-grid > .card:nth-child(3n+2) { transform: translateY(var(--sp-md)); }
.stair-grid > .card:nth-child(3n) { transform: translateY(var(--sp-lg)); }
.stair-grid > .card:nth-child(3n+2):hover { transform: translateY(var(--sp-md)) translate(-4px, -4px); }
.stair-grid > .card:nth-child(3n):hover { transform: translateY(var(--sp-lg)) translate(-4px, -4px); }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl) var(--sp-lg); }

@media (max-width: 1024px) {
    .poster-wall, .pair-wall { grid-template-columns: repeat(2, 1fr); }
    .poster-wall > .card, .pair-wall > .card, .stair-grid > .card { grid-column: auto !important; transform: none !important; }
    .poster-wall > .card:hover, .pair-wall > .card:hover, .stair-grid > .card:hover { transform: translate(-4px, -4px) !important; }
    .stair-grid, .card-grid { grid-template-columns: repeat(2, 1fr); }
    .pair-wall > .card .card-image { aspect-ratio: 4 / 3; }
}
@media (max-width: 768px) {
    .poster-wall, .pair-wall, .stair-grid, .card-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .poster-wall > .card, .pair-wall > .card, .stair-grid > .card { transition: none; }
}

/* List view. */
.list-view { display: flex !important; flex-direction: column; gap: var(--sp-sm); padding-bottom: 0; }
.list-view > .card { flex-direction: row; grid-column: auto !important; transform: none !important; }
.list-view > .card:hover { transform: translate(-4px, -4px) !important; box-shadow: var(--shadow-card); }
.list-view .card-image-wrap { flex: 0 0 200px; border-bottom: 0; border-right: var(--cut); }
.list-view .card-image { height: 100%; aspect-ratio: auto !important; min-height: 130px; }
@media (max-width: 768px) {
    .list-view .card-image-wrap { flex-basis: 96px; }
    .list-view .card-excerpt { display: none; }
    .list-view .card-title { font-size: 1rem; }
}

/* ---------- filters ---------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    background: var(--paper-warm);
    border: var(--cut);
    border-radius: 1.25rem;
    padding: var(--sp-sm);
    box-shadow: var(--shadow-hard);
    margin-bottom: var(--sp-lg);
}
.filter-bar input, .filter-bar select {
    padding: 0.7rem 1rem;
    border: var(--cut);
    border-radius: 0.75rem;
    background: var(--evenue-surface-bg);
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
}
/* What on the left, when on the right: the search keeps a fixed basis, the
   house, the dates (from → to) and the button sit together at the far end. */
.filter-bar .filter-search { flex: 0 1 320px; margin-right: auto; }
.filter-bar select { max-width: 100%; min-width: 0; font: inherit; font-size: 0.9rem; }
.filter-bar .date-range { display: inline-flex; align-items: center; gap: 0.5rem; }
.filter-bar .date-range__arrow { font-weight: 700; color: var(--ink); }
@media (max-width: 640px) { .filter-bar .filter-search { margin-right: 0; flex-basis: 100%; } .filter-bar .date-range { flex-wrap: wrap; } }
.filter-bar input:focus { outline: none; box-shadow: var(--shadow-ctrl-volt); }
.filter-bar input[type="search"] { min-width: 200px; }
.reset-link { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--ink); }
.reset-link:hover { background-image: var(--sweep); }

/* Tab rows stay on one line and are dragged — a wrapped block of twelve
   tabs reads as a paragraph, not a control. */
.tab-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; cursor: grab; border-bottom: var(--cut); margin-bottom: var(--sp-md); }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav.dragging, .quicklinks.dragging { cursor: grabbing; scroll-behavior: auto; }
.tab-nav.dragging a, .quicklinks.dragging a { pointer-events: none; }
.tab-nav a {
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--evenue-heading-font);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    padding: 0.6rem 1rem;
    border-bottom: 4px solid transparent;
    margin-bottom: -2px;
}
/* Two tab rows in one board need names, or two "All" tabs stack unexplained. */
.tab-nav__label { align-self: center; padding: 0.6rem 1rem 0.6rem 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); }
.tab-nav a:hover { color: var(--ink); border-bottom-color: var(--volt); }
.tab-nav a.active { color: var(--ink); border-bottom-color: var(--ink); }

.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    /* no rule of its own: the tab row above already draws one, and two rules
       a padding apart read as a double line */
    padding-top: var(--sp-sm);
    margin-bottom: var(--sp-lg);
}
.results-count { font-family: var(--evenue-heading-font); font-weight: 700; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 0.5rem; }
.view-toggle { display: inline-flex; border: var(--cut); border-radius: 999px; overflow: hidden; }
.view-toggle button {
    background: none;
    border: 0;
    padding: 0.5rem 1.1rem;
    font-family: var(--evenue-heading-font);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-faint);
    cursor: pointer;
}
.view-toggle button + button { border-left: var(--cut); }
.view-toggle button.active { background: var(--ink); color: var(--paper); }

/* Pager — the results bar's voice, mirrored under the wall: an ink cut, the
   steps as cut links, the position in the micro-label voice. */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    border-top: var(--cut);
    margin-top: var(--sp-lg);
    padding-top: var(--sp-sm);
    font-family: var(--evenue-heading-font);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink);
}
.pager__step { display: inline-block; padding: 0.6rem 0; border-bottom: 2px solid var(--volt); }
a.pager__step:hover { background-image: var(--sweep); }
.pager__step[aria-hidden] { color: var(--text-faint); border-bottom-color: transparent; }
.pager__position { font-family: var(--evenue-body-font); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--text-faint); }

/* ---------- singles ---------- */

/* `.wrap.single`, never a bare `.single`: WordPress puts `single` on <body>
   of every detail page, and a bare selector padded the whole document —
   48px above the sticky header, which only reached the top once you had
   scrolled past it. This class belongs to the page containers of this theme. */
.wrap.single { padding-top: var(--sp-lg); }
.prose { max-width: 68ch; }
.prose > p:first-child { font-family: var(--evenue-heading-font); font-size: 1.625rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.prose ul { list-style: none; padding-left: 1.4em; }
.prose ul li::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; background: var(--volt); border: 2px solid var(--ink); margin: 0 0.6em 0 -1.4em; vertical-align: baseline; }
.prose blockquote {
    background: var(--volt);
    border: var(--cut);
    box-shadow: var(--shadow-hard);
    margin: 1.5em 0;
    padding: var(--sp-md);
    font-family: var(--evenue-heading-font);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--ink);
}
.prose blockquote p { margin: 0; }
.prose img { border: var(--cut); }

/* Facts: micro-label rows with shouting display values. */
.facts { margin: 0; }
.facts__row {
    display: grid;
    grid-template-columns: minmax(140px, 16rem) 1fr;
    gap: var(--sp-md);
    align-items: baseline;
    padding: var(--sp-md) 0;
    border-bottom: var(--cut);
}
.facts__row:first-child { border-top: var(--cut); }
.facts__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); }
.facts__value { font-family: var(--evenue-heading-font); font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.facts__value a { border-bottom: 2px solid var(--volt); }
.facts__value a:hover { background-image: var(--sweep); }
@media (max-width: 768px) { .facts__row { grid-template-columns: 1fr; gap: 0.4rem; } .facts__value { font-size: 1.625rem; } }

/* Unit fact row: guests · beds · size, shouting between ink cuts. */
.facts-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem var(--sp-md);
    margin: 0;
    padding: var(--sp-md) 0;
    border-top: var(--cut);
    border-bottom: var(--cut);
    font-family: var(--evenue-heading-font);
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
}

/* Volt band (booking) and ink block (stay/CTA). */
.band-volt { background: var(--volt); border-top: var(--cut); border-bottom: 0; padding: var(--sp-xl) 0; }
/* The band is the page's last word: the line on the left edge every section
   uses, the action opposite, and the footer on its lower edge — not a slab
   of volt adrift between a section's padding and the footer's margin. */
.band-volt__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }
.band-volt h2 { margin: 0; }
.site-main:has(> .band-volt:last-child) + .site-footer { margin-top: 0; }
@media (max-width: 640px) { .band-volt__inner { flex-direction: column; align-items: flex-start; } }
.band-ink { background: var(--ink); color: color-mix(in srgb, var(--paper) 85%, transparent); padding: var(--sp-2xl) 0; }
.band-ink h2, .band-ink h3 { color: var(--paper); }
.band-ink .section-header { border-top-color: color-mix(in srgb, var(--paper) 28%, transparent); }
.band-ink a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--volt) 60%, transparent); text-underline-offset: 0.2em; }
.band-ink a:hover { background: var(--volt); color: var(--ink); text-decoration-color: var(--ink); }
.sticker-panel { background: var(--evenue-surface-bg); border: var(--cut); box-shadow: var(--shadow-hard); padding: var(--sp-lg); }

/* The amenity page: story on the left, the sticker panel beside it, stuck
   under the header stack while the story scrolls. */
.amenity-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--sp-xl); align-items: start; }
.amenity-side { position: sticky; top: calc(var(--stack-h) + var(--sp-md)); }
.amenity-side__house { font-family: var(--evenue-heading-font); font-size: 1.25rem; font-weight: 600; margin: 0.25rem 0 0.5rem; }
.amenity-side .muted { margin: 0 0 var(--sp-md); font-size: 0.9rem; }
.amenity-side__book { display: flex; justify-content: center; }
/* The house's amenities as pills on paper, ink-bordered — the wall on the
   house page is drawn on ink, so its pale borders vanish here. */
.amenity-wall--paper li { border-color: var(--ink); }
.amenity-wall--paper a { text-decoration: none; }
@media (max-width: 1024px) { .amenity-layout { grid-template-columns: 1fr; } .amenity-side { position: static; } }

.amenity-wall { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: var(--sp-md) 0; }
.amenity-wall li {
    padding: 0.35rem 0.9rem;
    border: 2px solid color-mix(in srgb, var(--paper) 35%, transparent);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Event gallery: lead + row, one dropped. */
.event-gallery { display: grid; grid-template-columns: repeat(var(--lead-cols, 3), 1fr); gap: var(--sp-sm); margin: var(--sp-md) 0 var(--sp-lg); }
.event-gallery > * { border: var(--cut); overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-deep); margin: 0; }
.event-gallery > :first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.event-gallery > :nth-child(2n+3) { transform: translateY(var(--sp-md)); }
.event-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slower); }
.gallery-grid__item { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } /* the figure stays the grid item; focus ring is the browser default */
.event-gallery figure:hover img { transform: scale(1.04); }
@media (max-width: 768px) {
    .event-gallery { grid-template-columns: repeat(2, 1fr); }
    .event-gallery > * { transform: none !important; }
    .event-gallery > :first-child { grid-column: span 2; }
}

/* Property gallery + facts grid: ink shows through 2px joints. */
.gallery-ink {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2px;
    background: var(--ink);
    border: var(--cut);
    box-shadow: var(--shadow-hard);
    aspect-ratio: 2 / 1;
    margin: var(--sp-md) 0 var(--sp-lg);
}
.gallery-ink figure { position: relative; overflow: hidden; background: var(--paper-deep); display: block; margin: 0; }
.gallery-ink img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slower); }
.gallery-ink figure:hover img { transform: scale(1.04); }
.gallery-ink .side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
@media (max-width: 768px) { .gallery-ink { grid-template-columns: 1fr; aspect-ratio: auto; } .gallery-ink > .lead { aspect-ratio: 4 / 3; } .gallery-ink .side { aspect-ratio: 2 / 1; } }

.facts-ink {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--ink);
    border: var(--cut);
    box-shadow: var(--shadow-hard);
}
.facts-ink .fact { background: var(--evenue-surface-bg); padding: var(--sp-md); }
.facts-ink .fact .label { display: block; margin-bottom: 0.4rem; }
.facts-ink .fact strong { font-family: var(--evenue-heading-font); font-size: clamp(1.625rem, 3vw, 3rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
@media (max-width: 768px) { .facts-ink { grid-template-columns: 1fr; } }

/* Quicklinks: sticky pill rail between ink cuts. */
.quicklinks-rail { position: sticky; top: var(--stack-h); z-index: 200; background: var(--paper); border-top: var(--cut); border-bottom: var(--cut); }
.quicklinks { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding-block: 0.6rem; cursor: grab; }
.quicklinks::-webkit-scrollbar { display: none; }
.quicklinks a {
    flex-shrink: 0;
    font-family: var(--evenue-heading-font);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink);
    padding: 0.45rem 1rem;
    border: 2px solid transparent;
    border-radius: 999px;
    transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.quicklinks a:hover { border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: var(--shadow-ctrl-volt); }
.quicklinks a.accent { background: var(--volt); border-color: var(--ink); box-shadow: var(--shadow-ctrl-volt); }

.property-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--sp-xl); align-items: start; padding-top: var(--sp-lg); }
@media (max-width: 1024px) { .property-layout { grid-template-columns: 1fr; } }
/* Under the quicklinks rail, the third sticky layer on a house page. */
.property-layout section { margin-bottom: var(--sp-2xl); scroll-margin-top: calc(var(--stack-h) + 5rem); }
.property-sidebar { position: sticky; top: calc(var(--stack-h) + 5rem); }
@media (max-width: 1024px) { .property-sidebar { position: static; } }
.sidebar-panel { border: var(--cut); box-shadow: var(--shadow-hard); background: var(--evenue-surface-bg); }
/* Booking embed: 290px holds the booking widget's stacked form, a second
   status line included. A shorter frame gets a denser form, never a cut one. */
.booking-embed { display: block; width: 100%; height: 290px; border: 0; margin-top: var(--sp-sm); }
.sidebar-box { padding: var(--sp-md); border-bottom: var(--cut); }
.sidebar-box:last-child { border-bottom: 0; }
.sidebar-box .label { display: block; margin-bottom: 0.75rem; }
.sidebar-box p { margin: 0 0 0.5em; font-size: 0.9rem; }
.sidebar-box .button { width: 100%; justify-content: center; margin-top: 0.5rem; }
.sidebar-row { display: flex; justify-content: space-between; gap: var(--sp-sm); font-size: 0.9rem; padding: 0.35em 0; }
.sidebar-row strong { font-family: var(--evenue-heading-font); }

.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--sp-md); padding: var(--sp-md) 0; border-top: var(--cut); }
.feature-list li:last-child { border-bottom: var(--cut); }
.feature-list .ordinal { font-family: var(--evenue-heading-font); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--ink); }
@media (max-width: 768px) { .feature-list li { grid-template-columns: 3.25rem 1fr; } .feature-list .ordinal { font-size: 2rem; } }

/* Amenity sticker cards. */
.amenity-grid { list-style: none; margin: var(--sp-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
@media (max-width: 1024px) { .amenity-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .amenity-grid { grid-template-columns: 1fr; } }
.amenity { background: var(--evenue-surface-bg); border: var(--cut); box-shadow: var(--shadow-hard); padding: var(--sp-md); }
.amenity-name { font-family: var(--evenue-heading-font); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); background-image: var(--sweep); }
a.amenity-name:hover { background-image: none; background-color: var(--volt); }
.amenity-comment { display: block; font-size: 0.85rem; color: var(--text-faint); margin-top: 0.4rem; }

/* ---------- maps: monochrome cartography, volt markers ---------- */

.map-embed { width: 100%; margin: var(--sp-md) 0; border-top: var(--cut); border-bottom: var(--cut); background: var(--paper-deep); z-index: 0; }
.map-embed .leaflet-tile-pane { filter: grayscale(1) contrast(1.06); }
.map-framed { border: var(--cut); box-shadow: var(--shadow-hard); }
.volt-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--volt); border: 2px solid var(--ink); transition: transform var(--t-base), background var(--t-base); }
.volt-dot:hover { background: var(--ink); transform: scale(1.2); }
.leaflet-popup-content-wrapper { border-radius: 0 !important; border: var(--cut); box-shadow: var(--shadow-hard) !important; }

/* ---------- index list (destinations) ---------- */

.cities-list { list-style: none; margin: var(--sp-lg) 0 0; padding: 0; counter-reset: city; }
.cities-list li { border-bottom: 2px solid var(--border-light); }
.cities-list li:first-child { border-top: var(--cut); }
.cities-list a { counter-increment: city; display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--sp-md); align-items: baseline; padding: var(--sp-md) 0; }
.cities-list a::before { content: counter(city, decimal-leading-zero); font-family: var(--evenue-heading-font); font-weight: 700; color: var(--text-faint); }
.cities-list .name { font-family: var(--evenue-heading-font); font-size: 2.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; color: var(--ink); transition: transform var(--t-base); }
.cities-list a:hover .name { background-image: var(--sweep-title); transform: translateX(0.5rem); }
.cities-list .count { padding: 0.15rem 0.75rem; border: var(--cut); border-radius: 999px; font-size: 0.8rem; font-weight: 700; transition: background var(--t-fast); }
.cities-list a:hover .count { background: var(--volt); }
@media (max-width: 768px) { .cities-list a { grid-template-columns: 2.5rem minmax(0, 1fr) auto; } .cities-list .name { font-size: 1.625rem; overflow-wrap: anywhere; } }

/* ---------- 404: the volt disc ---------- */

.error-404 {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: var(--cut);
    overflow: hidden;
}
.error-404__disc {
    position: absolute;
    top: 44%;
    left: 34vw;
    width: clamp(260px, 46vw, 880px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--volt);
    border: var(--cut);
    box-shadow: var(--shadow-hard);
}
@media (prefers-reduced-motion: no-preference) {
    .error-404__disc { animation: disc-drift 12s ease-in-out infinite alternate; }
    @keyframes disc-drift { to { transform: translateY(-6vh); } }
}
/* position (without z-index) lifts the copy above the absolutely-positioned
   disc; an actual z-index would isolate a stacking context and kill the blend. */
.error-404 .wrap { position: relative; }
.error-404 h1 {
    font-size: clamp(8rem, 30vw, 22rem);
    line-height: 0.85;
    margin: 0;
    color: #fff; /* deliberate: inverts against the disc via difference */
    mix-blend-mode: difference;
}
.error-404 .chip-volt { transform: rotate(-2deg); align-self: flex-start; margin-bottom: var(--sp-sm); }
.error-404 p { font-size: 1.125rem; max-width: 42ch; margin: var(--sp-sm) 0 var(--sp-md); }
@media (max-width: 768px) {
    .error-404 { min-height: 80vh; }
    .error-404 h1 { font-size: clamp(6rem, 32vw, 10rem); }
    .error-404__disc { top: 32%; left: 44vw; }
}

/* ---------- lightbox ---------- */

.starter-lightbox { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 88%, transparent); z-index: 2000; align-items: center; justify-content: center; }
.starter-lightbox.open { display: flex; }
.starter-lightbox img { max-width: 88vw; max-height: 86vh; object-fit: contain; border: var(--cut); }
.starter-lightbox button { position: absolute; background: none; border: none; color: #fff; font-size: 2.4rem; cursor: pointer; padding: 12px 20px; line-height: 1; }
.lb-close { top: 12px; right: 16px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
/* The AI label of the image on show, in the box's hard-coded white on black. */
.starter-lightbox .lb-ai { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); text-align: center; margin: 0; padding: 4px 12px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.75rem; letter-spacing: 0.06em; }