/* ==========================================================
   reset.css — modern CSS reset
   The well-known "modern CSS reset", adapted for this site:
   - `svg` stays inline — the wordmark logo sets the SVG and
     its text side by side in a non-flex container
   - `img` keeps `height: auto` so a width override never
     distorts the aspect ratio
   - the `#root` / `#__next` rule is omitted (static Eleventy
     site — there is no React root element)
   All site styling lives in the later sheets; nothing here
   should be "design".
   ========================================================== */

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margins (except dialog, which keeps its own) */
*:not(dialog) {
    margin: 0;
}

/* 3. Enable keyword animations (e.g. transitions to height: auto) */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Increase line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* 8. Avoid text overflows */
p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* ---- Site extras (kept from the previous reset) ---- */

/* Browser/OS quirks */
:root {
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
}

iframe {
    border-style: none;
}

/* Stop pseudo-elements inheriting decoration/alignment oddly */
::before,
::after {
    text-decoration: inherit;
    vertical-align: inherit;
}

/* ==========================================================
   variables.css — design tokens
   Single source of truth for colors, type, spacing, shape,
   and motion. The palette is a warm wedding-photography
   identity: soft ivory surfaces, warm charcoal text, and a
   terracotta/bronze accent (#a5643f). All text pairs meet
   WCAG AA contrast (≥4.5:1 for body text).
   Dark mode is automatic: `color-scheme: light dark` lets the
   browser theme the canvas, scrollbars and form controls,
   and `light-dark()` resolves each token — with a
   prefers-color-scheme fallback for browsers without
   light-dark() support (Baseline since 2024-05-13).
   ========================================================== */

:root {
    /* ---- Color · raw pairs (light / dark) ---- */
    --color-bg-light: #faf6f1;
    --color-bg-dark: #1c1712;
    --color-text-light: #3a332c;
    --color-text-dark: #e8e0d3;
    --color-text-muted-light: #6f6558;
    --color-text-muted-dark: #a89a86;

    /* Headings (lightest → most muted) */
    --color-heading-1-light: #2c2620;
    --color-heading-1-dark: #f5efe6;
    --color-heading-2-light: #3a332c;
    --color-heading-2-dark: #e8e0d3;
    --color-heading-3-light: #4a4238;
    --color-heading-3-dark: #d9cfbf;

    /* Links */
    --color-link-light: #8c5e3c;
    --color-link-dark: #c9a179;
    --color-link-hover-light: #6f4a2e;
    --color-link-hover-dark: #dfc4a4;
    --color-nav-active-light: #9a5a33;  /* current page in navs — distinct from link/hover, AA on bg */
    --color-nav-active-dark: #c98a5a;
    --color-link-underline-light: rgba(140, 94, 60, 0.45);
    --color-link-underline-dark: rgba(201, 161, 121, 0.5);

    /* Accent (terracotta button/brand color) */
    --color-accent-light: #a5643f;
    --color-accent-dark: #c98a5a;
    --color-accent-hover-light: #8f5634;
    --color-accent-hover-dark: #d59a6d;
    --color-accent-contrast-light: #fff;
    --color-accent-contrast-dark: #1c1712;

    /* Surfaces & borders */
    --color-surface-light: #fff;
    --color-surface-dark: #241e17;
    --color-surface-muted-light: #f4eee5;
    --color-surface-muted-dark: #2a231b;
    --color-border-light: #e8e0d3;
    --color-border-dark: #383026;

    /* Content helpers */
    --color-selection-light: rgba(165, 100, 63, 0.25);
    --color-selection-dark: rgba(201, 161, 121, 0.25);
    --color-tooltip-bg-light: #2c2620;
    --color-tooltip-bg-dark: #f5efe6;
    --color-tooltip-text-light: #faf6f1;
    --color-tooltip-text-dark: #1c1712;
    --color-focus-ring-light: rgba(165, 100, 63, 0.55);
    --color-focus-ring-dark: rgba(201, 161, 121, 0.6);

    /* ---- Color · resolved tokens (light by default) ---- */
    --color-bg: var(--color-bg-light);
    --color-text: var(--color-text-light);
    --color-text-muted: var(--color-text-muted-light);
    --color-heading-1: var(--color-heading-1-light);
    --color-heading-2: var(--color-heading-2-light);
    --color-heading-3: var(--color-heading-3-light);
    --color-link: var(--color-link-light);
    --color-link-hover: var(--color-link-hover-light);
    --color-nav-active: var(--color-nav-active-light);
    --color-link-underline: var(--color-link-underline-light);
    --color-accent: var(--color-accent-light);
    --color-accent-hover: var(--color-accent-hover-light);
    --color-accent-contrast: var(--color-accent-contrast-light);
    --color-surface: var(--color-surface-light);
    --color-surface-muted: var(--color-surface-muted-light);
    --color-border: var(--color-border-light);
    --color-selection: var(--color-selection-light);
    --color-tooltip-bg: var(--color-tooltip-bg-light);
    --color-tooltip-text: var(--color-tooltip-text-light);
    --color-focus-ring: var(--color-focus-ring-light);

    /* Fallback for browsers without light-dark(): flip on preference */
    @media (prefers-color-scheme: dark) {
        --color-bg: var(--color-bg-dark);
        --color-text: var(--color-text-dark);
        --color-text-muted: var(--color-text-muted-dark);
        --color-heading-1: var(--color-heading-1-dark);
        --color-heading-2: var(--color-heading-2-dark);
        --color-heading-3: var(--color-heading-3-dark);
        --color-link: var(--color-link-dark);
        --color-link-hover: var(--color-link-hover-dark);
        --color-nav-active: var(--color-nav-active-dark);
        --color-link-underline: var(--color-link-underline-dark);
        --color-accent: var(--color-accent-dark);
        --color-accent-hover: var(--color-accent-hover-dark);
        --color-accent-contrast: var(--color-accent-contrast-dark);
        --color-surface: var(--color-surface-dark);
        --color-surface-muted: var(--color-surface-muted-dark);
        --color-border: var(--color-border-dark);
        --color-selection: var(--color-selection-dark);
        --color-tooltip-bg: var(--color-tooltip-bg-dark);
        --color-tooltip-text: var(--color-tooltip-text-dark);
        --color-focus-ring: var(--color-focus-ring-dark);
    }

    /* Modern: tokens resolve automatically from color-scheme */
    @supports (color: light-dark(white, black)) {
        --color-bg: light-dark(var(--color-bg-light), var(--color-bg-dark));
        --color-text: light-dark(var(--color-text-light), var(--color-text-dark));
        --color-text-muted: light-dark(var(--color-text-muted-light), var(--color-text-muted-dark));
        --color-heading-1: light-dark(var(--color-heading-1-light), var(--color-heading-1-dark));
        --color-heading-2: light-dark(var(--color-heading-2-light), var(--color-heading-2-dark));
        --color-heading-3: light-dark(var(--color-heading-3-light), var(--color-heading-3-dark));
        --color-link: light-dark(var(--color-link-light), var(--color-link-dark));
        --color-link-hover: light-dark(var(--color-link-hover-light), var(--color-link-hover-dark));
        --color-nav-active: light-dark(var(--color-nav-active-light), var(--color-nav-active-dark));
        --color-link-underline: light-dark(var(--color-link-underline-light), var(--color-link-underline-dark));
        --color-accent: light-dark(var(--color-accent-light), var(--color-accent-dark));
        --color-accent-hover: light-dark(var(--color-accent-hover-light), var(--color-accent-hover-dark));
        --color-accent-contrast: light-dark(var(--color-accent-contrast-light), var(--color-accent-contrast-dark));
        --color-surface: light-dark(var(--color-surface-light), var(--color-surface-dark));
        --color-surface-muted: light-dark(var(--color-surface-muted-light), var(--color-surface-muted-dark));
        --color-border: light-dark(var(--color-border-light), var(--color-border-dark));
        --color-selection: light-dark(var(--color-selection-light), var(--color-selection-dark));
        --color-tooltip-bg: light-dark(var(--color-tooltip-bg-light), var(--color-tooltip-bg-dark));
        --color-tooltip-text: light-dark(var(--color-tooltip-text-light), var(--color-tooltip-text-dark));
        --color-focus-ring: light-dark(var(--color-focus-ring-light), var(--color-focus-ring-dark));
    }

    /* Theme the canvas, scrollbars and form controls with the site */
    color-scheme: light dark;

    /* ---- Typography ---- */
    --font-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --leading-base: 1.5;
    --weight-normal: 400;
    --weight-bold: 700;
    --text-base: 100%;
    --text-small: 0.875em;
    --text-h1: 2rem;
    --leading-h1: 1.125;
    --text-h2: 1.75rem;
    --leading-h2: 1.15;
    --text-h3: 1.5rem;
    --leading-h3: 1.175;

    /* ---- Spacing (vertical rhythm scale) ---- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
    --typography-spacing: 1rem;
    --inline-gutter: 1rem;

    /* ---- Shape ---- */
    --radius: 0.25rem;
    --border-width: 0.0625rem;
    --focus-ring-width: 0.125rem;

    /* ---- Motion ---- */
    --transition: 0.2s ease-in-out;
}

/* ==========================================================
   base.css — global element defaults
   html/body, links, buttons, forms, and small cross-cutting
   element styles used across the whole site.
   ========================================================== */

/* ---- Document ---- */
html {
    /* Fluid base font: the site was designed on a stepped
       scale so type stays comfortable on every device. */
    font-size: 100%;
    scroll-behavior: smooth;
}

@media (min-width: 576px) { html { font-size: 106.25%; } }
@media (min-width: 768px) { html { font-size: 112.5%; } }
@media (min-width: 1024px) { html { font-size: 118.75%; } }
@media (min-width: 1280px) { html { font-size: 125%; } }
@media (min-width: 1536px) { html { font-size: 131.25%; } }

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-base);
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: var(--color-selection);
}

/* ---- Media ---- */
:where(audio, canvas, iframe, img, svg, video) {
    vertical-align: middle;
}

svg:not(:root) {
    overflow: hidden;
}

/* ---- Links ---- */
:where(a):not([role=button]) {
    color: var(--color-link);
    text-decoration-line: underline;
    text-decoration-color: var(--color-link-underline);
    text-underline-offset: 0.125em;
    transition: color var(--transition), text-decoration-color var(--transition);
}

:where(a):not([role=button]):is(:hover, :active, :focus, [data-state="active"]) {
    color: var(--color-link-hover);
    text-decoration-color: var(--color-link-hover);
}

/* ---- Focus (keyboard) ----
   Visible ring everywhere a user can tab to. The reduced-
   motion and per-component rules never remove it. */
:where(a, button, summary, [role=button]):focus-visible,
:where(input, select, textarea):focus {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

/* ---- Buttons ---- */
button,
a[role=button] {
    display: inline-block;
    padding: var(--space-md) var(--space-lg);
    border: var(--border-width) solid var(--color-accent);
    border-radius: var(--radius);
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: 1rem;
    line-height: var(--leading-base);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

:is(button, a[role=button]):is(:hover, :active) {
    border-color: var(--color-accent-hover);
    background-color: var(--color-accent-hover);
}

/* Outlined variant (`.outline`) — transparent, link-colored */
:is(button, a[role=button]).outline {
    border-color: var(--color-link);
    background-color: transparent;
    color: var(--color-link);
}

:is(button, a[role=button]).outline:is(:hover, :active) {
    border-color: var(--color-link-hover);
    background-color: transparent;
    color: var(--color-link-hover);
}

button[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

/* ---- Details / summary (FAQ accordions) ---- */
details {
    margin-bottom: var(--space-lg);
}

summary {
    cursor: pointer;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

/* ---- Article (card base) ---- */
article {
    margin-bottom: var(--space-lg);
    padding: var(--space-lg);
    border-radius: var(--radius);
    background-color: var(--color-surface);
}

/* ---- Inline content ---- */
hr {
    height: 0;
    margin: var(--typography-spacing) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    color: inherit;
}

/* ---- Reduced motion ----
   The one place !important is intentional: it must win over
   every component's transition/animation for users who ask
   for less motion. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* ==========================================================
   typography.css — text styling
   Headings, paragraphs, lists, and reading-level elements.
   Sizes follow the site's existing scale; the base font-size
   fluid scale lives on `html` in base.css.
   ========================================================== */

/* ---- Headings ---- */
h1,
h2,
h3 {
    margin-top: 0;
    margin-bottom: var(--typography-spacing);
    color: var(--color-text);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    line-height: var(--leading-base);
}

h1 {
    color: var(--color-heading-1);
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
}

h2 {
    color: var(--color-heading-2);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
}

h3 {
    color: var(--color-heading-3);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}

/* A heading that follows content gets a little more air */
:where(p, ul, ol, article) ~ h1 {
    margin-top: var(--space-3xl);
}

:where(p, ul, ol, article) ~ h2 {
    margin-top: 2.625rem;
}

:where(p, ul, ol, article) ~ h3 {
    margin-top: 2.25rem;
}

/* ---- hgroup (title + subtitle blocks) ---- */
hgroup {
    margin-bottom: var(--typography-spacing);
}

hgroup > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* The last child of a multi-line hgroup reads as a subtitle */
hgroup > *:not(:first-child):last-child {
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: var(--weight-normal);
}

/* ---- Body copy ---- */
p {
    margin-top: 0;
    margin-bottom: var(--typography-spacing);
}

ol,
ul {
    margin-top: 0;
    margin-bottom: var(--typography-spacing);
    font-style: normal;
    font-weight: var(--weight-normal);
}

/* ---- Lists ---- */
:where(ol, ul) li {
    margin-bottom: calc(var(--typography-spacing) * 0.25);
}

ul li {
    list-style: square;
    list-style-position: outside;
}

:where(ol, ul) :where(ol, ul) {
    margin: calc(var(--typography-spacing) * 0.25) 0 0;
}


/* ==========================================================
   layout.css — page structure
   Landmark spacing, the container system, the minimal grid,
   and the base navigation layout.
   ========================================================== */

/* ---- Landmarks ---- */
body > header,
body > main,
body > footer {
    padding-block: var(--space-lg);
}

/* Keep anchor targets (skip link → #main-content) clear of the
   sticky header when the page jumps to them */
#main-content {
    scroll-margin-top: 5.5rem;
}

section {
    margin-bottom: var(--space-3xl);
}

/* ---- Containers ---- */
.container,
.container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--inline-gutter);
}

@media (min-width: 576px) {
    .container {
        max-width: 510px;
        padding-inline: 0;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 700px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 950px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1450px;
    }
}

/* ---- Grid (auto-fitting columns) ---- */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
    }
}

.grid > * {
    min-width: 0;
}

/* ---- Navigation (base) ---- */
nav,
nav ul {
    display: flex;
}

nav {
    justify-content: space-between;
}

nav ul {
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Nav links are plain text — no bullets, no underline (header + footer navs) */
nav ul li {
    list-style: none;
}

nav li {
    margin: 0;
}

/* The link is the interactive box (hover/focus target).
   :not([role=button]) raises specificity above the base link
   rule's underline (whose :not() carries a class-level weight). */
nav li a:not([role=button]),
nav li a:not([role=button]):is(:hover, :active, :focus, [data-state="active"]) {
    text-decoration: none;
}

nav li a {
    display: inline-block;
    padding: var(--space-lg) var(--space-sm);
    border-radius: var(--radius);
}

nav li a:is(:hover, :focus-visible) {
    color: var(--color-link-hover);
}

/* Current page: distinct terracotta + bold so it's unmistakable */
nav li a[data-state="active"] {
    color: var(--color-nav-active);
    font-weight: var(--weight-bold);
}

/* ==========================================================
   components.css — site-specific components
   Everything that is not a browser element: the header nav,
   galleries, post lists, CTA blocks, FAQ, footer, and the
   page-specific compositions.
   ========================================================== */

/* ==========================================================
   Skip link
   ========================================================== */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--color-surface);
    color: var(--color-text);
    transform: translateY(-10rem);
    transition: transform 0.3s ease-in-out;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ==========================================================
   Scroll-to-top button
   ========================================================== */
#stt {
    display: none;

    position: fixed;
    right: var(--space-xl);
    bottom: var(--space-xl);
    z-index: 999;
    width: 3.25rem;
    height: 3.25rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(28, 23, 18, 0.7);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3 54.62 342.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

#stt:is(:hover, :focus) {
    background-color: var(--color-accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
}

/* Always visible on mobile */
@media (max-width: 768px) {
    #stt {
        display: block;
    }
}

/* On desktop only when the page opts in */
header.show-scroll-button #stt {
    display: block;
}

/* ==========================================================
   Header / primary navigation
   Desktop: logo left, links right (single row).
   Mobile:  hamburger that opens a full-screen menu sheet.
   All sizes: sticky bar, always reachable while scrolling.
   ========================================================== */

/* Sticky on every viewport. Opaque background so page content
   never shows through while the bar is pinned. */
.site-head {
    position: sticky;
    top: 0;
    z-index: 900;
    background-color: var(--color-bg);
    border-bottom: var(--border-width) solid var(--color-border);
}

header nav {
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
}

header nav .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    font-weight: var(--weight-bold);
}

/* Two-line wordmark: name on top, smaller subtitle below */
header nav .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-transform: uppercase;
}

header nav .logo-sub {
    font-size: 0.75rem;
    font-weight: var(--weight-normal);
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

header nav ul {
    flex-wrap: wrap;
    justify-content: center;
}

/* ---- Hamburger (mobile only) ----
   Pure-CSS disclosure: a visually-hidden checkbox drives the
   open state via sibling selectors — no JavaScript.
   The checkbox stays focusable on mobile, so keyboard users
   can toggle the menu with Space, and screen readers get the
   native checked/unchecked state. */
.nav-toggle-input,
.nav-toggle {
    display: none; /* desktop: no hamburger at all */
}

.nav-toggle__icon {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}

.nav-toggle__icon span {
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
    transition: transform var(--transition);
}

/* Morph the two bars into an X when the menu is open */
.nav-toggle-input:checked ~ .container .nav-toggle__icon span:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle-input:checked ~ .container .nav-toggle__icon span:nth-child(2) {
    transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 767px) {
    /* Tighter bar than the desktop landmark padding */
    .site-head {
        padding-block: 0;
    }

    .site-head .container {
        padding-block: var(--space-sm);
    }

    /* The sheet (z 850) lives inside this container, so the
       logo and the close (X) are raised above it individually —
       raising the container itself would lift the sheet with it */
    .site-head nav .logo,
    .nav-toggle {
        position: relative;
        z-index: 900;
    }

    .site-head nav {
        flex-direction: row;
        justify-content: space-between;
        gap: var(--space-md);
    }

    /* Checkbox: hidden, but kept in the a11y tree and focusable */
    .nav-toggle-input {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        opacity: 0;
        pointer-events: none;
    }

    /* The label acts as the hamburger button (44px tap target) */
    .nav-toggle {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: var(--radius);
        color: var(--color-text);
        cursor: pointer;
    }

    .nav-toggle:is(:hover, :active) {
        color: var(--color-link-hover);
    }

    /* Keyboard focus ring, drawn on the label the user sees */
    .nav-toggle-input:focus-visible ~ .container .nav-toggle {
        box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
    }

    /* Full-screen menu sheet — same warm surface as the bar,
       so header and sheet read as one continuous layer */
    .nav-menu {
        position: fixed;
        inset: 0;
        z-index: 850;
        flex-direction: column;
        visibility: hidden;
        opacity: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 5.5rem var(--space-xl) var(--space-2xl);
        background-color: var(--color-bg);
        transition: opacity var(--transition), visibility 0s var(--transition);
        counter-reset: nav-item;
    }

    .nav-toggle-input:checked ~ .container .nav-menu {
        visibility: visible;
        opacity: 1;
        transition: opacity var(--transition);
    }

    /* Links: large editorial rows with a small index number.
       Rows rise in with a gentle stagger when the sheet opens */
    .nav-menu li {
        counter-increment: nav-item;
        opacity: 0;
        transform: translateY(0.75rem);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    }

    .nav-toggle-input:checked ~ .container .nav-menu li {
        opacity: 1;
        transform: none;
        /* Gentle stagger — dropped entirely where sibling-index() is
           unsupported, so the rows simply appear without a delay */
        transition-delay: calc(sibling-index() * 0.04s);
    }

    .nav-menu li + li {
        border-top: var(--border-width) solid var(--color-border);
    }

    .nav-menu a {
        display: flex;
        align-items: baseline;
        gap: var(--space-md);
        padding: var(--space-lg) 0;
        font-size: 1.375rem;
    }

    .nav-menu a::before {
        content: counter(nav-item, decimal-leading-zero);
        font-size: 0.75rem;
        font-weight: var(--weight-normal);
        letter-spacing: 0.08em;
        color: var(--color-text-muted);
    }

    /* The scroll-to-top button would float over the sheet — hide it */
    .nav-toggle-input:checked ~ #stt {
        visibility: hidden;
    }
}

/* ==========================================================
   Gallery grid (home + portfolio index)
   ========================================================== */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: auto;
    padding-bottom: var(--space-lg);
}

.gallery__item {
    position: relative;
    flex: 1 1 calc(33.33% - 0.5rem);
    max-width: 760px;
    overflow: hidden;
    border-radius: var(--radius);
    filter: brightness(99%);
    transition: filter 0.5s ease;
}

@media (max-width: 1200px) {
    .gallery__item {
        flex-basis: calc(50% - 0.5rem);
    }
}

@media (max-width: 810px) {
    .gallery__item {
        flex-basis: 100%;
    }
}

.gallery__item:hover {
    filter: brightness(110%);
    cursor: pointer;
}

.gallery__item img {
    object-fit: cover;
}

/* "View gallery" label — slides in on hover (desktop),
   pinned to the corner on touch devices */
.gallery__item-title {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    padding: var(--space-sm) var(--space-lg);
    border: var(--border-width) solid var(--color-accent);
    border-radius: var(--radius);
    background: rgba(250, 246, 241, 0.85);
    color: #2c2620;
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) translateY(100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

@media (min-width: 810px) {
    .gallery__item:hover .gallery__item-title {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@media (max-width: 810px) {
    .gallery__item-title {
        top: auto;
        left: auto;
        bottom: 0.5rem;
        right: 0.5rem;
        padding: 0.4rem 0.5rem;
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================
   Page header (title + intro block)
   ========================================================== */
.page-header {
    max-width: 70ch;
    margin-inline: auto;
}

/* ==========================================================
   Home hero (editorial header)
   Eyebrow, oversized serif title, a bottom-right intro,
   a full-width photo, and a small caption line.
   ========================================================== */
.home-hero__eyebrow,
.home-introduction__eyebrow {
    margin-bottom: var(--space-xl);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    gap: var(--space-2xl);
}

.home-hero__grid h1,
.home-introduction h2 {
    font-family: var(--font-serif);
    font-weight: var(--weight-normal);
}

.home-hero__grid h1 {
    margin-bottom: 0;
    font-size: clamp(2.5rem, 1.75rem + 4vw, 5.5rem);
    line-height: 1.05;
}

.home-hero__intro p,
.home-introduction__text p {
    margin-bottom: var(--space-md);
    font-size: var(--text-small);
}

.home-hero__intro p:last-child,
.home-introduction__text p:last-child {
    margin-bottom: 0;
}

.home-hero__intro a {
    text-decoration: none;
}

.home-hero__intro a::after {
    content: " →";
}

.home-hero__media {
    display: block;
    margin: var(--space-3xl) 0 0;
}

.home-hero__media img,
.home-introduction__media {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

.home-hero__media img {
    aspect-ratio: 16 / 10;
}

.home-hero__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-lg);
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--text-small);
}

@media (min-width: 768px) {
    .home-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
    }
}

/* Home introduction (two-column editorial block) */
.home-introduction {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--space-3xl);
}

.home-introduction h2 {
    margin-bottom: var(--space-xl);
    line-height: 1.1;
}

.home-introduction__media {
    aspect-ratio: 4 / 4;
}

@media (min-width: 900px) {
    .home-introduction {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .home-introduction__media {
        justify-self: end;
        width: min(100%, 34rem);
        aspect-ratio: 4 / 4;
    }
}

/* Featured stories (editorial portfolio grid) */
.featured-stories__header {
    margin-bottom: var(--space-3xl);
}

.featured-stories__header h2 {
    margin-bottom: var(--space-sm);
    font-family: var(--font-serif);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    font-weight: var(--weight-normal);
    line-height: 1.1;
}

.featured-stories__subtitle,
.featured-stories__meta {
    color: var(--color-text-muted);
    font-size: var(--text-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.featured-stories__link {
    text-decoration: none;
    font-size: var(--text-small);
}

.featured-stories__link::after {
    content: " →";
}

.featured-stories__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5rem var(--space-2xl);
}

.featured-stories__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

.featured-stories__meta {
    margin-top: var(--space-md);
}

.featured-stories__item h3 {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
    font-family: var(--font-serif);
    font-weight: var(--weight-normal);
}

@media (min-width: 900px) {
    .featured-stories__grid {
        grid-template-columns: repeat(12, 1fr);
        align-items: start;
    }

    .featured-stories__item:nth-child(1) {
        grid-column: span 5;
    }

    .featured-stories__item:nth-child(1) img {
        aspect-ratio: 4 / 5;
    }

    .featured-stories__item:nth-child(2) {
        grid-column: 7 / -1;
        margin-top: 8rem;
    }

    .featured-stories__item:nth-child(2) img {
        aspect-ratio: 16 / 10;
    }

    .featured-stories__item:nth-child(3) {
        grid-column: span 9;
    }

    .featured-stories__item:nth-child(3) img {
        aspect-ratio: 3 / 2;
    }
}

/* ==========================================================
   Portfolio item (single gallery) page
   ========================================================== */
.portfolio-item__header img {
    max-height: 80vh;
    object-fit: cover;
}

.portfolio-item__intro {
    max-width: 70ch;
    margin-inline: auto;
}

.portfolio-item__gallery img {
    display: block;
    width: auto;
    max-height: 100vh;
    margin: 0 auto;
    padding-bottom: var(--space-lg);
    object-fit: contain;
}

/* Recommended portfolios */
.recommended-portfolio__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    justify-items: center;
    align-items: start;
    padding: 0;
}

.recommended-portfolio__list img {
    border-radius: var(--radius);
}

.recommended-portfolio__list-item {
    margin: 0;
    list-style-type: none;
}

.recommended-portfolio__list-link {
    text-align: center;
    text-decoration: none;
}

.recommended-portfolio__list-title {
    margin: 0.5rem 0 0;
}

/* ==========================================================
   Tags
   ========================================================== */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    padding: 0;
}

.tags-list li {
    list-style-type: none;
}

.tags-list li a {
    text-decoration: none;
}

/* ==========================================================
   Call-to-action block
   ========================================================== */
.cta-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xl);
    margin-block: var(--space-2xl);
    padding: var(--space-2xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-surface-muted);
    text-align: center;
}

.cta-block__text {
    margin: 0;
}

.cta-block__text h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: var(--text-h2);
}

.cta-block__text p {
    max-width: 60ch;
    margin-bottom: 0;
    color: var(--color-text-muted);
}

.cta-block__action {
    display: inline-block;
}

@media (min-width: 768px) {
    .cta-block {
        flex-direction: row;
        padding: 2.5rem;
        text-align: left;
    }

    .cta-block__text {
        flex-grow: 1;
    }
}

/* ==========================================================
   About page
   ========================================================== */
.about-grid {
    max-width: 60rem;
    margin-inline: auto;
}

/* ==========================================================
   Contact page
   ========================================================== */
.contact-content {
    place-items: center;
}

.contact-social-list {
    padding: 0;
}

.contact-social-list li {
    list-style: none;
}

/* Google map, kept in a stable 4:3-ish frame */
.map-container {
    position: relative;
    width: 100%;
    padding-top: 40vh;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.map-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Let the map follow the OS dark mode too */
@media (prefers-color-scheme: dark) {
    .map-container iframe {
        filter: invert(1) hue-rotate(180deg);
    }
}

/* ==========================================================
   Blog post content + full-bleed breakout
   ========================================================== */
.post-content {
    display: grid;
    grid-template-columns: 1fr min(70ch, 100%) 1fr;
}

/* All direct children sit in the centered measure column */
.post-content > * {
    grid-column: 2;
}

/* `.full-bleed` breaks a block out to the full container */
.post-content .full-bleed {
    grid-column: 1 / -1;
    width: 100%;
}

.post-content .full-bleed img {
    width: 100%;
}

/* ==========================================================
   Post list (blog feed, tag feeds, recommended posts)
   ========================================================== */
.post-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: 0;
    list-style: none;
}

.post-list__item {
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.post-list__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.post-list__link-img {
    flex: 1;
}

.post-list__link-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.post-list__link-txt {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-lg);
}

.post-list__link-txt hgroup {
    margin: 0;
}

.post-list__link-txt h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.post-list__link-txt p {
    margin-bottom: 0;
    flex-grow: 1;
}

@media (min-width: 768px) {
    .post-list__link {
        flex-direction: row;
    }

    .post-list__link-img {
        height: auto;
    }

    .post-list__link-img img {
        height: 100%;
    }

    .post-list__link-txt {
        flex: 2;
    }

    /* Lift effect — desktop pointers only */
    .post-list__item:is(:hover, :focus-within) {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }
}

/* ==========================================================
   Pagination
   ========================================================== */
.pagination__inner > [data-direction="forwards"] {
    margin-inline-start: auto;
}

/* ==========================================================
   Site footer
   ========================================================== */
.site-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
}

.site-foot nav,
.site-foot__copyright {
    flex: 1;
}

.site-foot__copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.2rem 0.5rem;
    text-align: right;
}

.site-foot a,
.site-foot a:is(:hover, :active, :focus) {
    text-decoration: none;
}

.footer-separator {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--space-xl);
}

.footer-separator .line {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-link);
}

.footer-separator a {
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
}

.footer-separator svg {
    width: 50px;
    height: 50px;
}

.footer-handmade {
    width: 100%;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
}

@media (max-width: 767px) {
    .site-foot {
        flex-direction: column;
        justify-content: center;
    }

    .site-foot nav,
    .site-foot__copyright {
        flex: 1 1 100%;
    }

    .site-foot nav ul,
    .site-foot__copyright {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .site-foot__copyright {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ==========================================================
   404 page
   ========================================================== */
.four-oh-four {
    max-width: 70ch;
}

/* ==========================================================
   Friends page
   ========================================================== */
.friends__item {
    place-items: center;
    padding-block: var(--space-2xl);
}

.friends__item:not(:last-child) {
    border-bottom: var(--border-width) dashed var(--color-accent);
}

.friends__item h2 a {
    text-decoration: none;
}

.friends img {
    border-radius: var(--radius);
}

/* ==========================================================
   Services (uslugi) page
   ========================================================== */
.other-services {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.service-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.service-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

.service-item__content h2 a {
    text-decoration: none;
}

@media (min-width: 992px) {
    .service-item {
        grid-template-columns: 1fr 2fr;
    }
}

/* ==========================================================
   FAQ pages
   ========================================================== */
.faq-content {
    max-width: 70ch;
}

.faq-content details {
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.faq-content details[open] {
    padding-bottom: var(--space-xl);
}

.faq-content summary {
    position: relative;
    padding-left: var(--space-xl);
    font-weight: var(--weight-bold);
}

.faq-content summary::before {
    content: '+';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.2rem;
    font-weight: var(--weight-normal);
    color: var(--color-link);
    transition: transform var(--transition);
}

.faq-content details[open] > summary::before {
    content: '−';
    transform: rotate(180deg);
}

.faq-content details p {
    margin-bottom: 0;
    padding-left: var(--space-xl);
}

/* FAQ index — category cards */
.faq-categories {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
    .faq-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .faq-categories {
        grid-template-columns: repeat(3, 1fr);
    }
}

.faq-category-item {
    display: block;
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.faq-category-item:is(:hover, :focus-visible) {
    transform: translateY(-5px);
    border-color: var(--color-link);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.faq-category-item h3 {
    margin-bottom: 0.5rem;
}

.faq-category-item p {
    margin-bottom: 1rem;
}

.faq-category-item span {
    font-weight: var(--weight-bold);
}

/* ==========================================================
   Tooltips (pure CSS, via data-tooltip)
   ========================================================== */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    background-color: var(--color-tooltip-bg);
    color: var(--color-tooltip-text);
    font-size: var(--text-small);
    text-decoration: none;
    white-space: nowrap;
    transform: translate(-50%, 0.25rem);
    transition: opacity var(--transition), transform var(--transition);
    content: attr(data-tooltip);
    opacity: 0;
    pointer-events: none;
}

[data-tooltip]:is(:hover, :focus-visible)::after {
    transform: translate(-50%, -0.25rem);
    opacity: 1;
}

/* ==========================================================
   utilities.css — small, general-purpose helpers
   One-purpose classes only; no layout logic.
   ========================================================== */

/* Center text within a block */
.text-center {
    text-align: center;
}

/* Center a flex/grid container's items on both axes */
.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Visually hidden but still available to assistive tech */
.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;
}

/* One step of extra vertical margin (2x the base rhythm) */
.mg-tb-2 {
    margin-block: calc(var(--typography-spacing) * 2);
}