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

* {
    margin: 0;
}

body {
    font-size: var(--text-m);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: var(--body-font-family);
    background-color: var(--bg-color-body);
    color: var(--text-color-title);
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    line-height: var(--lh-s);
    font-family: var(--heading-font-family);
}

:root {
    --palette-ink: oklch(0.19 0.011 56);
    --palette-ink-mid: oklch(0.38 0.008 56);
    --palette-gold: oklch(0.57 0.09 68);
    --palette-cream: oklch(0.96 0.013 78);
    --palette-cream-white: oklch(0.99 0.005 78);
    --palette-ink-tint-95: color-mix(in oklch, var(--palette-ink), white 95%);
    --palette-ink-tint-88: color-mix(in oklch, var(--palette-ink), white 88%);
    --palette-ink-tint-78: color-mix(in oklch, var(--palette-ink), white 78%);
    --palette-ink-tint-58: color-mix(in oklch, var(--palette-ink), white 58%);
    --palette-ink-tint-42: color-mix(in oklch, var(--palette-ink), white 42%);
    --palette-ink-tint-30: color-mix(in oklch, var(--palette-ink), white 30%);
    --palette-ink-tint-20: color-mix(in oklch, var(--palette-ink), white 20%);
    --palette-ink-tint-8: color-mix(in oklch, var(--palette-ink), white 8%);
    --palette-gold-tint-90: color-mix(in oklch, var(--palette-gold), white 90%);
    --palette-gold-tint-80: color-mix(in oklch, var(--palette-gold), white 80%);
    --palette-gold-shade: color-mix(in oklch, var(--palette-gold), black 20%);
    --color-primary: var(--palette-ink);
    --color-primary-hover: var(--palette-ink-tint-20);
    --color-secondary: var(--palette-ink-mid);
    --color-accent: var(--palette-gold);
    --color-accent-hover: var(--palette-gold-shade);
    --color-accent-subtle: var(--palette-gold-tint-90);
    --color-transparent: oklch(0 0 0 / 0);
    --color-primary-500: var(--palette-ink-tint-20);
    --color-error: oklch(0.44 0.19 28);
    --bg-color-body: var(--palette-cream);
    --bg-color-surface: var(--palette-cream-white);
    --text-color-title: var(--palette-ink);
    --text-color-body: var(--palette-ink-mid);
    --color-text-on-brand: var(--palette-ink-tint-95);
    --border-color-primary: color-mix(in oklch, var(--palette-ink), white 85%);
    --shadow-color-primary: oklch(0.1 0.01 56 / 0.15);
    --color-grey-100: var(--palette-ink-tint-95);
    --color-grey-200: var(--palette-ink-tint-88);
    --color-grey-300: var(--palette-ink-tint-78);
    --color-grey-400: var(--palette-ink-tint-58);
    --color-grey-500: var(--palette-ink-tint-42);
    --color-grey-600: var(--palette-ink-tint-30);
    --color-grey-700: var(--palette-ink-tint-20);
    --color-grey-800: var(--palette-ink-tint-8);
    --color-grey-900: var(--palette-ink);
    --space-4xs: clamp(0.33rem, calc(-0.03vw + 0.33rem), 0.31rem);
    --space-3xs: clamp(0.41rem, calc(0.04vw + 0.4rem), 0.44rem);
    --space-2xs: clamp(0.51rem, calc(0.16vw + 0.48rem), 0.62rem);
    --space-xs: clamp(0.64rem, calc(0.36vw + 0.57rem), 0.88rem);
    --space-s: clamp(0.8rem, calc(0.67vw + 0.67rem), 1.24rem);
    --space-m: clamp(1rem, calc(1.15vw + 0.77rem), 1.75rem);
    --space-l: clamp(1.25rem, calc(1.88vw + 0.87rem), 2.47rem);
    --space-xl: clamp(1.56rem, calc(2.98vw + 0.97rem), 3.5rem);
    --space-2xl: clamp(1.95rem, calc(4.61vw + 1.03rem), 4.95rem);
    --space-3xl: clamp(2.44rem, calc(7.01vw + 1.04rem), 7rem);
    --space-4xl: clamp(3.05rem, calc(10.52vw + 0.95rem), 9.89rem);
    --space-fluid-1: clamp(0.5rem, 1vw, 1rem);
    --space-fluid-2: clamp(1rem, 2vw, 1.5rem);
    --space-fluid-3: clamp(1.5rem, 3vw, 2rem);
    --space-fluid-4: clamp(2rem, 4vw, 3rem);
    --space-fluid-5: clamp(4rem, 5vw, 5rem);
    --text-s: clamp(0.83rem, calc(0.02vw + 0.83rem), 0.84rem);
    --text-m: clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem);
    --text-l: clamp(1.2rem, calc(0.46vw + 1.11rem), 1.5rem);
    --text-xl: clamp(1.44rem, calc(0.86vw + 1.27rem), 2rem);
    --text-2xl: clamp(1.73rem, calc(1.44vw + 1.44rem), 2.66rem);
    --text-3xl: clamp(2.07rem, calc(2.27vw + 1.62rem), 3.55rem);
    --text-4xl: clamp(2.49rem, calc(3.46vw + 1.8rem), 4.74rem);
    --text-5xl: clamp(2.99rem, calc(5.12vw + 1.96rem), 6.31rem);
    --lh-m: calc(1em + 0.725rem);
    --lh-s: calc(1em + 0.5rem);
    --heading-font-family: 'Playfair Display', Georgia, serif;
    --body-font-family: 'DM Sans', system-ui, sans-serif;
    --header-space: var(--space-s);
    --btn-space: var(--space-xs) var(--space-s);
    --card-space: var(--space-s);
    --footer-space: var(--space-s) var(--space-m);
    --edge-space: var(--space-s);
    --wrapper-block-padding: var(--space-fluid-5);
    --wrapper-block-gap: var(--space-m);
    --wrapper-inline-padding: var(--edge-space);
    --wrapper-inline-gutter: var(--space-fluid-2);
    --gap: var(--space-l);
    --wrapper-padding: var(--wrapper-block-padding) var(--wrapper-inline-padding);
    --body-max-width: 120rem;
    --content-max-width: calc(75rem + (2 * var(--edge-space)));
    --text-max-width: 55ch;
    --wrapper-width: min(100% - (var(--wrapper-inline-gutter) * 2), var(--content-max-width, 60ch));
    --section-width: min(100%, var(--body-max-width, 120rem));
    --heading-width: min(100%, 35ch);
    --text-width: min(100% - (var(--wrapper-inline-gutter) * 2), var(--text-max-width));
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));
    --grid-7: repeat(7, minmax(0, 1fr));
    --grid-8: repeat(8, minmax(0, 1fr));
    --grid-9: repeat(9, minmax(0, 1fr));
    --grid-10: repeat(10, minmax(0, 1fr));
    --grid-11: repeat(11, minmax(0, 1fr));
    --grid-12: repeat(12, minmax(0, 1fr));
    --sidebar-grid: fit-content(var(--sidebar-width, 25ch)) minmax(min(50vw, var(--main-min-width, 50ch)), 1fr);
    --sidebar-grid--right: minmax(min(50vw, var(--main-min-width, 50ch)), 1fr) fit-content(var(--sidebar-width, 25ch));
    --radius-xs: clamp(0.25rem, calc(0vw + 0.25rem), 0.25rem);
    --radius-s: clamp(0.38rem, calc(-0.19vw + 0.54rem), 0.5rem);
    --radius-m: clamp(0.63rem, calc(-0.19vw + 0.79rem), 0.75rem);
    --radius-l: clamp(1rem, calc(-0.38vw + 1.33rem), 1.25rem);
    --radius-xl: clamp(1.63rem, calc(-0.58vw + 2.12rem), 2rem);
    --radius-full: 999rem;
    --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
    --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
    --radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
    --radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
    --radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
    --shadow-xs: 0 1px 2px var(--shadow-color-primary);
    --shadow-s: 0 1.5px 3px var(--shadow-color-primary);
    --shadow-m: 0 2px 6px var(--shadow-color-primary);
    --shadow-l: 0 3px 12px var(--shadow-color-primary);
    --shadow-xl: 0 6px 48px var(--shadow-color-primary);
    --shadow-1: 0px 0.5px 3.6px rgba(0, 0, 0, 0.042), 0px 1.3px 10px rgba(0, 0, 0, 0.06), 0px 3px 24.1px rgba(0, 0, 0, 0.078);
    --shadow-2: 0.5px 1px 2.7px rgba(0, 0, 0, 0.014), 1.3px 2.6px 6.9px rgba(0, 0, 0, 0.019), 2.7px 5.3px 14.2px rgba(0, 0, 0, 0.023), 5.5px 11px 29.2px rgba(0, 0, 0, 0.03), 15px 30px 80px rgba(0, 0, 0, 0.05);
    --shadow-framed: 0.25rem 0.25rem color-mix(in oklch, var(--color-accent), white 30%), 0.5rem 0.5rem color-mix(in oklch, var(--color-primary), white 15%);
    --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
    --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
    --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
    --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
    --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
    --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
    --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
    --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
    --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
    --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
    --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
    --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
    --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
    --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
    --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
    --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
    --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
    --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
    --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
    --ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
    --ease-squish-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
    --ease-squish-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
    --ease-squish-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
    --ease-squish-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
    --ease-squish-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
    --ease-step-1: steps(2);
    --ease-step-2: steps(3);
    --ease-step-3: steps(4);
    --ease-step-4: steps(7);
    --ease-step-5: steps(10);
    --cf-surface-overlay: color-mix(in oklch, var(--bg-color-surface), transparent 15%);
    --cf-border: var(--border-color-primary);
}

*:focus-visible,
[type=button]:focus-visible,
[type=reset]:focus-visible,
[type=submit]:focus-visible,
button:focus-visible,
.btn:focus-visible,
iframe:focus-visible {
    outline: 3px solid white;
    box-shadow: 0 0 0 6px black;
    position: relative;
    z-index: 1;
    overflow: visible;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-l); font-weight: 500; }

.lh-m { line-height: var(--lh-m); }
.lh-s { line-height: var(--lh-s); }

a:not([class]) {
    text-decoration-thickness: max(0.08em, 1px);
    text-underline-offset: 0.15em;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.container {
    width: 100%;
    max-width: var(--wrapper-width);
    margin-inline: auto;
    padding: var(--wrapper-block-padding) var(--wrapper-inline-padding);
}

.wrapper {
    width: 100%;
    max-width: var(--wrapper-width);
    margin-inline: auto;
    padding: var(--wrapper-block-padding) var(--wrapper-inline-padding);
}

.wrapper-width {
    width: 100%;
    max-width: var(--wrapper-width);
}

.wrapper-inline {
    width: 100%;
    max-width: var(--wrapper-width);
    padding-inline: var(--wrapper-inline-padding);
    margin-inline: auto;
}

.wrapper-padding {
    padding: var(--wrapper-block-padding) var(--wrapper-inline-padding);
}

.wrapper-block-padding {
    padding-block: var(--wrapper-block-padding);
}

.wrapper-inline-gutter {
    padding-inline: var(--wrapper-inline-gutter);
}

.bg-full-bleed {
    background-color: var(--bg-color, #fff);
    box-shadow: 0 0 0 100vmax var(--bg-color, #fff);
    clip-path: inset(0px -100vmax);
}

.grid-col--full { grid-column: 1 / -1; }
.grid-row--full { grid-row: 1 / -1; }

.stack-grid {
    display: grid;
    grid-template-areas: "stack";
    isolation: isolate;
}
.stack-grid > * { grid-area: stack; }
.stack-grid > :where(figure, img) {
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.sidebar-grid {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: [full-start sidebar-start]fit-content(var(--sidebar-width, 25ch))[sidebar-end content-start] minmax(min(50vw, var(--main-min-width, 50ch)), 1fr)[content-end full-end];
}

.sidebar-grid--right {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: [full-start content-start]minmax(min(50vw, var(--main-min-width, 50ch)), 1fr)[content-end sidebar-start] fit-content(var(--sidebar-width, 25ch))[sidebar-end full-end];
}

.split-grid {
    --_content-max-width: var(--content-max-width, 85rem);
    --_gap: var(--gap);
    --_gutter: var(--gutter, var(--wrapper-inline-gutter, 10px));
    --max-boxed-col: calc((var(--content-max-width) - var(--_gap)) / 2);
    --min-boxed-col: calc(50% - var(--_gutter) - var(--_gap) / 2);
    --grid-cols: [full-start col1-full-start] minmax(var(--_gutter), 1fr) [col1-start content-start] min(var(--max-boxed-col), var(--min-boxed-col)) [gap-start col1-end col1-full-end] var(--_gap) [gap-end col2-start col2-full-start] min(var(--max-boxed-col), var(--min-boxed-col)) [col2-end content-end] minmax(var(--_gutter), 1fr) [col2-full-end full-end];
    display: grid;
    gap: 0px;
    grid-template-columns: var(--grid-cols);
    grid-auto-flow: dense;
    width: 100%;
    max-width: min(100%, var(--body-max-width));
    padding-inline: 0px;
}
:where(.split-grid) > * { grid-column: content; }
.split-grid__col1 { grid-column: col1; }
.split-grid__col2 { grid-column: col2; }
.split-grid__col1--full { grid-column: col1-full; }
.split-grid__col2--full { grid-column: col2-full; }
.split-grid__content { grid-column: content; }
.split-grid__full { grid-column: full; }

.magic-grid {
    --_col-min-width: var(--col-min-width, 200px);
    --_col-count: var(--col-count, 3);
    --_gap: var(--gap, 1rem);
    --_breakpoint: calc(var(--_col-min-width) * var(--_col-count) + (var(--_gap) * (var(--_col-count) - 1)));
    --_col-width: calc((100% - (var(--_gap) * var(--_col-count))) / var(--_col-count));
    display: grid;
    gap: var(--_gap);
    grid-template-columns: repeat(auto-fit, minmax(min(max(var(--_col-width), (100% - var(--_breakpoint)) * -999), 100%), 1fr));
}

.content-grid {
    --gutter: var(--wrapper-inline-padding);
    --text-wide-width: 100px;
    --content-safe-width: 1rem;
    --wide-width: 50px;
    --content-grid: [full-start] var(--gutter) [full-safe-start] minmax(0, 1fr) [content-start] minmax(0, var(--content-safe-width)) [content-safe-start] minmax(0, calc(0.5 * (var(--content-max-width) - var(--text-max-width) - 2 * var(--text-wide-width) - 2 * var(--content-safe-width)))) [text-wide-start] minmax(1rem, var(--text-wide-width)) [text-start] min(var(--text-max-width), calc(100% - 2rem - var(--gutter) * 2)) [text-end] minmax(1rem, var(--text-wide-width)) [text-wide-end] minmax(0, calc(0.5 * (var(--content-max-width) - var(--text-max-width) - 2 * var(--text-wide-width) - 2 * var(--content-safe-width)))) [content-safe-end] minmax(0, var(--content-safe-width)) [content-end] minmax(0, 1fr) [full-safe-end] var(--gutter) [full-end];
    display: grid;
    column-gap: 0px;
    grid-template-columns: var(--grid-cols, var(--content-grid));
    width: 100%;
    max-width: min(100%, var(--body-max-width));
    padding-inline: 0px;
}
:where(.content-grid) > * { grid-column: content; }
.content-grid__full { grid-column: full; }
.content-grid__full-safe { grid-column: full-safe; }
.content-grid__content { grid-column: content; }
.content-grid__content-safe { grid-column: content-safe; }
.content-grid__text-wide { grid-column: text-wide; }
.content-grid__text { grid-column: text; }

.sr-only {
    clip: rect(0px, 0px, 0px, 0px);
    border: 0px;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0px;
    width: 1px;
    white-space: nowrap;
}
.sr-only:not(caption) { position: absolute; }
.sr-only * { overflow: hidden; }

.sr-only-focusable:not(:focus, :focus-within) {
    clip: rect(0px, 0px, 0px, 0px);
    border: 0px;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0px;
    width: 1px;
    white-space: nowrap;
}
.sr-only-focusable:not(:focus, :focus-within):not(caption) { position: absolute; }
.sr-only-focusable:not(:focus, :focus-within) * { overflow: hidden; }

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

.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-s  { box-shadow: var(--shadow-s); }
.shadow-m  { box-shadow: var(--shadow-m); }
.shadow-l  { box-shadow: var(--shadow-l); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-1  { box-shadow: var(--shadow-1); }
.shadow-2  { box-shadow: var(--shadow-2); }
.shadow-framed { box-shadow: var(--shadow-framed); }

.flow > :where(:not(:first-child)) { margin-top: var(--flow-spacer, 1em); }
.grid-flow { display: grid; gap: 1em; }
.flex-flow { display: flex; flex-direction: column; gap: 1em; }

.dj-breadcrumb {
    width: 100%;
    max-width: var(--wrapper-width);
    margin: 0 auto;
    padding-inline: var(--wrapper-inline-padding);
}
.dj-breadcrumb :where(ul, ol) { display: flex; list-style: none; padding: 0; margin: 0; gap: 1ch; }
.dj-breadcrumb li { position: relative; display: flex; }
.dj-breadcrumb li:not(:last-of-type)::after {
    content: "";
    display: block;
    width: .25lh;
    height: .25lh;
    margin: auto 0;
    transform: rotate(45deg) translate(50%);
    border: solid;
    border-color: #505a5f;
    border-width: max(1px, 0.0625em) max(1px, 0.0625em) 0 0;
    font-size: max(16px, 1em);
}
.dj-breadcrumb a { color: var(--text-color-body); text-underline-offset: 4px; }
.dj-breadcrumb a:hover { text-decoration-thickness: 2px; }

.button {
    --text-color: #ffffff;
    --bg-color: var(--color-primary);
    display: inline-block;
    width: fit-content;
    font-weight: 500;
    line-height: 1.5;
    outline: 2px solid transparent;
    outline-offset: -2px;
    padding: 0.6875rem 1.5rem;
    text-decoration: none;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: all 0.2s var(--ease-1);
    border-radius: var(--radius-xs);
    cursor: pointer;
}
.button:hover { --bg-color: var(--color-accent); }

.tuts-content a,
a.inline-link,
.inline-link a {
    width: fit-content;
    color: var(--text-color-title);
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary);
    transition: all .2s ease;
}
.tuts-content a:where(:hover, :active, :focus-visible),
a.inline-link:where(:hover, :active, :focus-visible),
.inline-link a:where(:hover, :active, :focus-visible) {
    text-decoration: none;
    color: var(--color-secondary);
    background-color: #ffc;
    border-top: 1px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    border-radius: 4px;
}

.contact-form {
    background-color: var(--bg-color-surface);
    border-radius: var(--radius-l);
    padding: calc(1.5 * var(--card-space));
    width: 100%;
    max-width: 36rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(0, 0, 0, 0.06);
}
.contact-form .form-group { margin-block-end: var(--space-l); }
.contact-form label { display: block; font-weight: 500; margin-block-end: var(--space-3xs); }
.contact-form input,
.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    border: 2px solid var(--border-color-primary);
    border-radius: var(--radius-s);
    padding: 0.625rem 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-accent), transparent 70%);
}
.contact-form .form-error {
    display: none;
    color: var(--color-error);
    font-weight: 500;
    margin-block-start: var(--space-3xs);
}
.form-group.has-error .form-error { display: block; }

[data-bg-header="primary"] {
    background-color: color-mix(in oklch, var(--color-primary), transparent 90%);
}

[data-theme="dark"] {
    --bg-color-body: oklch(0.12 0.008 56);
    --bg-color-surface: oklch(0.18 0.009 56);
    --color-primary: var(--palette-gold);
    --color-accent-subtle: color-mix(in oklch, var(--palette-gold), transparent 80%);
    --text-color-title: var(--palette-ink-tint-95);
    --text-color-body: var(--palette-ink-tint-78);
    --border-color-primary: color-mix(in oklch, var(--palette-ink-tint-95), transparent 75%);
    --shadow-color-primary: oklch(0 0 0 / 0.5);
    --cf-surface-overlay: color-mix(in oklch, var(--bg-color-surface), transparent 20%);
    --cf-border: color-mix(in oklch, var(--palette-ink-tint-95), transparent 85%);
}

@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-delay: -1ms;
        animation-duration: 1ms;
        animation-iteration-count: 1;
        background-attachment: initial;
        scroll-behavior: auto;
        transition-duration: 0s;
        transition-delay: 0s;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html { interpolate-size: allow-keywords; }
}


/* ─── Site Header ─────────────────────────────────────────── */

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-inline-size: var(--wrapper-width);
    padding: var(--space-s) var(--space-l);
    border-radius: var(--radius-s);
    margin: var(--space-s) auto;
    background-color: var(--cf-surface-overlay);
    border: 1px solid var(--cf-border);
    box-shadow: var(--shadow-m);
    gap: var(--space-m);
}

.site-logo {
    font-weight: 700;
    text-decoration: none;
    color: var(--text-color-title);
    white-space: nowrap;
    flex-shrink: 0;
}

.site-logo span {
    font-weight: 400;
}

.site-nav {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
    position: relative;
}

.site-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    gap: var(--space-s);
    align-items: center;
}

.site-nav__link {
    text-decoration: none;
    color: var(--text-color-title);
    text-underline-offset: 4px;
}

.site-nav__link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.site-nav__item:last-child a {
    background-color: var(--color-primary);
    color: var(--color-grey-100);
    padding: var(--space-xs) var(--space-s);
    text-decoration: none;
    border-radius: var(--radius-s);
    display: inline-block;
}

.site-nav__item:last-child a:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-grey-100);
    text-decoration: none;
}

.site-nav__btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color-title);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xs);
    border-radius: var(--radius-xs);
    margin-inline-start: auto;
}

.site-nav__btn:hover {
    background-color: color-mix(in oklch, var(--color-primary), transparent 90%);
}

.site-nav__btn svg {
    width: 1.5rem;
    height: auto;
}

.site-nav__dialog {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}

.site-nav__dialog.is-open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 0.3s ease;
}

body.menu-open {
    overflow: hidden;
}

.site-nav__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background-color 0.3s ease;
}

.site-nav__dialog.is-open .site-nav__backdrop {
    background-color: oklch(0 0 0 / 0.5);
}

.site-nav__dialog-content {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 16rem;
    max-inline-size: 85%;
    background-color: var(--bg-color-surface);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.site-nav__dialog.is-open .site-nav__dialog-content {
    transform: translateX(0);
}

.site-nav__close-btn {
    position: absolute;
    inset-block-start: var(--space-s);
    inset-inline-end: var(--space-s);
    background: transparent;
    border: 1px solid var(--border-color-primary);
    padding: var(--space-2xs);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color-title);
}

.site-nav__m-list {
    list-style: none;
    padding: var(--space-4xl) var(--space-2xs);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.site-nav__m-item {
    border-block-end: 1px solid var(--border-color-primary);
}

.site-nav__m-link {
    text-decoration: none;
    color: var(--text-color-body);
    padding: var(--space-s) var(--space-l);
    display: block;
    transition: background-color 0.2s ease;
}

.site-nav__m-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
    background-color: var(--color-grey-100);
}

.site-nav__m-item.current-menu-item .site-nav__m-link {
    background-color: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: 600;
}

/* Theme toggle */
.theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-full);
    background: transparent;
    cursor: pointer;
    color: var(--text-color-title);
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-btn:hover {
    background-color: var(--color-accent-subtle);
    border-color: var(--color-accent);
}

.theme-icon.moon { display: none; }
.theme-icon.sun  { display: block; }

[data-theme="dark"] .theme-icon.moon { display: block; }
[data-theme="dark"] .theme-icon.sun  { display: none; }

@media (width >= 992px) {
    .site-nav__list { display: flex; }
    .site-nav__btn  { display: none; }
    .site-nav__dialog { display: none; }
}


/* Skip link */
.skiplink {
    position: fixed;
    inset-block-start: -100vh;
    inset-inline-start: var(--space-s);
    z-index: 9999;
    font-weight: 500;
    color: var(--palette-ink);
    background: var(--palette-cream-white);
    padding: 0.75em 1.5em;
    border-radius: var(--radius-xs);
    text-align: center;
    transition: inset-block-start 0.1s linear;
    text-decoration: none;
    border: 2px solid var(--palette-ink);
}

.skiplink:focus,
.skiplink:focus-visible {
    inset-block-start: var(--space-s);
    outline: 3px solid white;
    box-shadow: 0 0 0 6px black;
}


/* ─── Category pages ───────────────────────────────── */

.category-hero {
    padding-block: var(--space-3xl);
    text-align: center;
}

.category-hero h1 {
    margin-block-end: var(--space-xs);
}

.category-hero p {
    color: var(--text-color-body);
    font-size: var(--text-l);
    max-inline-size: var(--text-max-width);
    margin-inline: auto;
}

.category-gallery-section {
    padding-block: var(--space-xl);
}

.category-gallery-section .bricks-layout-wrapper .image-wrapper img {
    border-radius: var(--radius-xs);
    display: block;
    width: 100%;
}


/* ─── Breadcrumb ───────────────────────────────────── */

.category-breadcrumb {
    padding-block: var(--space-xs);
    padding-inline: var(--wrapper-inline-padding);
    max-inline-size: var(--wrapper-width);
    margin-inline: auto;
}

.category-breadcrumb ol {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-s);
    color: var(--text-color-body);
    align-items: center;
}

.category-breadcrumb li:not(:last-child)::after {
    content: ’›’;
    margin-inline: var(--space-3xs);
    color: var(--border-color-primary);
}

.category-breadcrumb a {
    color: var(--text-color-body);
    text-decoration: none;
}

.category-breadcrumb a:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

.category-breadcrumb [aria-current="page"] {
    color: var(--text-color-title);
    font-weight: 500;
}