/*! Wire — Ghost theme stylesheet.
 *  Part one is the design system, compiled from Tailwind CSS v4.
 *  Part two (marked below) is the Ghost layer: Admin brand wiring, Koenig
 *  editor cards, members form states and the custom-setting variants.
 *  Edit this file; assets/css/theme.css is the copy the theme loads.
 */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --color-red-100: #ffe4e4;
    --color-red-300: #ff7d7d;
    --color-red-400: #e23a3a;
    --color-red-500: #ca0202;
    --color-red-600: #b00808;
    --color-red-700: #8f1111;
    --color-red-800: #6d1414;
    --color-neutral-50: #f6f1e9;
    --color-neutral-100: #efe8dd;
    --color-neutral-200: #e2d8c9;
    --color-neutral-700: #463c33;
    --color-neutral-950: #191410;
    --spacing: 0.25rem;
    --container-xs: 32rem;
    --container-sm: 44rem;
    --container-md: 56rem;
    --container-lg: 72rem;
    --container-xl: 82.5rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-lg: clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: clamp(1.25rem, 0.5vw + 1.1rem, 1.375rem);
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: clamp(1.5rem, 1vw + 1.25rem, 1.75rem);
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: clamp(1.875rem, 1.6vw + 1.4rem, 2.25rem);
    --text-4xl: clamp(2.25rem, 2.6vw + 1.6rem, 3rem);
    --text-5xl: clamp(2.75rem, 4vw + 1.75rem, 4rem);
    --text-6xl: clamp(3.25rem, 6vw + 1.75rem, 5rem);
    --text-7xl: clamp(3.5rem, 7vw + 2rem, 6rem);
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tighter: -0.03em;
    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-widest: 0.12em;
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
    --leading-loose: 1.8;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-3xl: 2.75rem;
    --shadow-xs: 0 1px 2px rgb(25 20 16 / 0.05);
    --shadow-sm: 0 2px 6px rgb(25 20 16 / 0.06);
    --shadow-md: 0 8px 24px -8px rgb(25 20 16 / 0.12);
    --shadow-lg: 0 20px 48px -16px rgb(25 20 16 / 0.18);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-primary-400: #ae9c84;
    --color-primary-500: #8d7c66;
    --color-primary-600: #6f6151;
    --color-primary-700: #554a3e;
    --color-primary-800: #3c342b;
    --color-primary-900: #2a241d;
    --color-primary-950: #171310;
    --color-gold-100: #f5efe6;
    --color-gold-200: #ebe0d1;
    --color-grad-1: var(--color-red-500);
    --color-grad-2: #c01717;
    --color-grad-3: var(--color-red-300);
    --color-gold-300: #dccdb6;
    --color-gold-400: #c7b497;
    --color-gold-500: #ae9a7c;
    --color-gold-800: #544940;
    --color-accent-100: var(--color-red-100);
    --color-accent-300: var(--color-red-300);
    --color-accent-500: var(--ghost-accent-color, var(--color-red-500));
    --color-accent-600: var(--color-red-600);
    --color-accent-700: var(--color-red-700);
    --color-accent-800: var(--color-red-800);
    --color-neutral-0: #fffdfa;
    --glass-tint: rgb(255 253 249 / 0.52);
    --glass-tint-strong: rgb(255 253 249 / 0.70);
    --glass-tint-soft: rgb(255 253 249 / 0.32);
    --glass-border: rgb(255 253 249 / 0.74);
    --glass-edge: rgb(199 180 151 / 0.55);
    --glass-blur: 28px;
    --glass-blur-lg: 40px;
    --glass-shadow: 0 8px 32px rgb(36 30 25 / 0.16), 0 2px 8px rgb(36 30 25 / 0.08);
    --glass-shadow-lg: 0 20px 60px rgb(36 30 25 / 0.24), 0 4px 12px rgb(36 30 25 / 0.12);
    --glass-sheen: linear-gradient(135deg, rgb(255 253 249 / 0.58) 0%, rgb(255 253 249 / 0) 55%);
    --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
    --glass-grain-opacity: 0.30;
    --glass-grain-blend: soft-light;
    --card-gradient: linear-gradient(150deg, rgb(255 253 249 / 0.56) 0%, rgb(220 205 182 / 0.22) 44%, rgb(141 124 102 / 0) 80%);
    --glass-rim: inset 0 1px 0 rgb(255 253 249 / 0.62), inset 1px 0 0 rgb(255 253 249 / 0.30);
    --color-bg: var(--color-neutral-50);
    --color-bg-alt: transparent;
    --color-surface: var(--glass-tint);
    --color-surface-2: var(--glass-tint-soft);
    --color-border: var(--glass-border);
    --color-border-strong: rgb(255 255 255 / 0.9);
    --color-text: #2e2721;
    --color-text-strong: #191410;
    --color-text-muted: #4a4139;
    --color-text-subtle: #7b6c5c;
    --color-text-invert: var(--color-neutral-0);
    --color-heading: var(--color-primary-900);
    --color-link: var(--color-accent-700);
    --color-link-hover: var(--color-accent-800);
    --color-focus: var(--color-accent-500);
    --color-accent-fg: var(--color-accent-700);
    --color-accent-bg: rgb(202 2 2 / 0.10);
    --color-primary-fg: var(--color-primary-800);
    --color-primary-bg: rgb(141 124 102 / 0.16);
    --color-btn-primary-bg: var(--color-primary-900);
    --color-btn-primary-bg-hover: var(--color-primary-800);
    --color-btn-primary-bg-active: var(--color-primary-950);
    --color-btn-primary-fg: var(--color-neutral-0);
    --color-success: #2f6b4f;
    --color-warning: #8a5200;
    --color-danger: #a33a2c;
    --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --text-2xs: 0.6875rem;
    --font-weight-regular: 400;
    --leading-none: 1;
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.5rem;
    --spacing-6: 2rem;
    --spacing-7: 2.5rem;
    --spacing-8: 3rem;
    --spacing-9: 4rem;
    --spacing-10: 5rem;
    --spacing-12: 8rem;
    --radius-full: 9999px;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .top-\[calc\(var\(--header-h\)\+1\.5rem\)\] {
    top: calc(var(--header-h) + 1.5rem);
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-6 {
    margin-block: var(--spacing-6);
  }
  .mt-1 {
    margin-top: var(--spacing-1);
  }
  .mt-2 {
    margin-top: var(--spacing-2);
  }
  .mt-3 {
    margin-top: var(--spacing-3);
  }
  .mt-4 {
    margin-top: var(--spacing-4);
  }
  .mt-5 {
    margin-top: var(--spacing-5);
  }
  .mt-6 {
    margin-top: var(--spacing-6);
  }
  .mt-7 {
    margin-top: var(--spacing-7);
  }
  .mt-8 {
    margin-top: var(--spacing-8);
  }
  .mt-9 {
    margin-top: var(--spacing-9);
  }
  .mt-\[13px\] {
    margin-top: 13px;
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-1 {
    margin-right: var(--spacing-1);
  }
  .mb-1 {
    margin-bottom: var(--spacing-1);
  }
  .mb-2 {
    margin-bottom: var(--spacing-2);
  }
  .mb-3 {
    margin-bottom: var(--spacing-3);
  }
  .mb-5 {
    margin-bottom: var(--spacing-5);
  }
  .mb-6 {
    margin-bottom: var(--spacing-6);
  }
  .mb-10 {
    margin-bottom: var(--spacing-10);
  }
  .ml-2 {
    margin-left: var(--spacing-2);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-grid {
    display: inline-grid;
  }
  .table {
    display: table;
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-none {
    max-width: none;
  }
  .max-w-prose {
    max-width: 65ch;
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: var(--spacing-0);
  }
  .flex-1 {
    flex: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-center {
    place-items: center;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1 {
    gap: var(--spacing-1);
  }
  .gap-2 {
    gap: var(--spacing-2);
  }
  .gap-3 {
    gap: var(--spacing-3);
  }
  .gap-4 {
    gap: var(--spacing-4);
  }
  .gap-5 {
    gap: var(--spacing-5);
  }
  .gap-6 {
    gap: var(--spacing-6);
  }
  .gap-7 {
    gap: var(--spacing-7);
  }
  .gap-8 {
    gap: var(--spacing-8);
  }
  .gap-9 {
    gap: var(--spacing-9);
  }
  .gap-10 {
    gap: var(--spacing-10);
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-\[var\(--radius-lg\)\] {
    border-radius: var(--radius-lg);
  }
  .rounded-\[var\(--radius-xl\)\] {
    border-radius: var(--radius-xl);
  }
  .rounded-full {
    border-radius: var(--radius-full);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-\[var\(--color-border\)\] {
    border-color: var(--color-border);
  }
  .bg-\[var\(--color-bg-alt\)\] {
    background-color: var(--color-bg-alt);
  }
  .bg-\[var\(--color-primary-bg\)\] {
    background-color: var(--color-primary-bg);
  }
  .p-5 {
    padding: var(--spacing-5);
  }
  .p-6 {
    padding: var(--spacing-6);
  }
  .px-1 {
    padding-inline: var(--spacing-1);
  }
  .pt-0 {
    padding-top: var(--spacing-0);
  }
  .pt-6 {
    padding-top: var(--spacing-6);
  }
  .pb-10 {
    padding-bottom: var(--spacing-10);
  }
  .pb-12 {
    padding-bottom: var(--spacing-12);
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .font-\[family-name\:var\(--font-display\)\] {
    font-family: var(--font-display);
  }
  .font-\[family-name\:var\(--font-mono\)\] {
    font-family: var(--font-mono);
  }
  .font-display {
    font-family: var(--font-display);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-\[var\(--color-primary-fg\)\] {
    color: var(--color-primary-fg);
  }
  .text-\[var\(--color-text-muted\)\] {
    color: var(--color-text-muted);
  }
  .text-\[var\(--color-text-strong\)\] {
    color: var(--color-text-strong);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .overline {
    text-decoration-line: overline;
  }
  .underline {
    text-decoration-line: underline;
  }
  .accent-bg {
    accent-color: var(--color-bg);
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .hover\:border-\[var\(--color-border-strong\)\]:hover {
      border-color: var(--color-border-strong);
    }
    .hover\:text-\[var\(--color-text-strong\)\]:hover {
      color: var(--color-text-strong);
    }
  }
  @media (width >= 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:flex-row {
      flex-direction: row;
    }
    .sm\:items-center {
      align-items: center;
    }
    .sm\:p-6 {
      padding: var(--spacing-6);
    }
    .sm\:p-7 {
      padding: var(--spacing-7);
    }
    .sm\:p-8 {
      padding: var(--spacing-8);
    }
  }
  @media (width >= 64rem) {
    .lg\:mx-0 {
      margin-inline: var(--spacing-0);
    }
    .lg\:block {
      display: block;
    }
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:grid-cols-\[0\.8fr_1\.2fr\] {
      grid-template-columns: 0.8fr 1.2fr;
    }
    .lg\:grid-cols-\[1\.3fr_0\.7fr\] {
      grid-template-columns: 1.3fr 0.7fr;
    }
    .lg\:grid-cols-\[1\.4fr_1fr_1fr_1fr\] {
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
    .lg\:grid-cols-\[minmax\(0\,1fr\)_220px\] {
      grid-template-columns: minmax(0,1fr) 220px;
    }
    .lg\:grid-cols-\[minmax\(0\,1fr\)_240px\] {
      grid-template-columns: minmax(0,1fr) 240px;
    }
  }
}
:root {
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 68ch;
  --section-y-sm: clamp(3rem, 5vw, 4rem);
  --section-y: clamp(4rem, 8vw, 6rem);
  --section-y-lg: clamp(5rem, 10vw, 8rem);
  --shadow-focus: 0 0 0 3px rgb(85 74 62 / 0.40);
  --header-h: 64px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  color-scheme: light;
}
@media (min-width: 1024px) {
  :root {
    --header-h: 72px;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --glass-tint: rgb(58 47 39 / 0.46);
    --glass-tint-strong: rgb(58 47 39 / 0.66);
    --glass-tint-soft: rgb(58 47 39 / 0.28);
    --glass-grain-opacity: 0.22;
    --glass-grain-blend: overlay;
    --card-gradient: linear-gradient(150deg, rgb(242 237 230 / 0.16) 0%, rgb(199 180 151 / 0.07) 44%, rgb(141 124 102 / 0) 80%);
    --glass-rim: inset 0 1px 0 rgb(242 237 230 / 0.24), inset 1px 0 0 rgb(242 237 230 / 0.11);
    --glass-border: rgb(226 216 201 / 0.20);
    --glass-edge: rgb(220 205 182 / 0.40);
    --glass-shadow: 0 8px 32px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.3);
    --glass-shadow-lg: 0 20px 60px rgb(0 0 0 / 0.6), 0 4px 12px rgb(0 0 0 / 0.4);
    --glass-sheen: linear-gradient(135deg, rgb(242 237 230 / 0.15) 0%, rgb(255 255 255 / 0) 55%);
    --color-bg: var(--color-neutral-950);
    --color-bg-alt: transparent;
    --color-surface: var(--glass-tint);
    --color-surface-2: var(--glass-tint-soft);
    --color-border: var(--glass-border);
    --color-border-strong: rgb(226 216 201 / 0.34);
    --color-text: #ece5da;
    --color-text-strong: #fbf8f4;
    --color-text-muted: #ded5c9;
    --color-text-subtle: #a1907c;
    --color-text-invert: var(--color-neutral-950);
    --color-heading: var(--color-neutral-50);
    --color-link: var(--color-accent-300);
    --color-link-hover: var(--color-accent-100);
    --color-focus: var(--color-accent-300);
    --color-accent-fg: var(--color-accent-300);
    --color-accent-bg: rgb(255 125 125 / 0.14);
    --color-primary-fg: var(--color-neutral-50);
    --color-primary-bg: rgb(220 205 182 / 0.14);
    --color-btn-primary-bg: var(--color-neutral-0);
    --color-btn-primary-bg-hover: var(--color-neutral-100);
    --color-btn-primary-bg-active: var(--color-neutral-200);
    --color-btn-primary-fg: var(--color-primary-900);
    --color-success: #7fc0a0;
    --color-warning: #e6bd7c;
    --color-danger: #e8a295;
    --shadow-focus: 0 0 0 3px rgb(220 205 182 / 0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --glass-tint: rgb(58 47 39 / 0.46);
  --glass-tint-strong: rgb(58 47 39 / 0.66);
  --glass-tint-soft: rgb(58 47 39 / 0.28);
  --glass-grain-opacity: 0.22;
  --glass-grain-blend: overlay;
  --card-gradient: linear-gradient(150deg, rgb(242 237 230 / 0.16) 0%, rgb(199 180 151 / 0.07) 44%, rgb(141 124 102 / 0) 80%);
  --glass-rim: inset 0 1px 0 rgb(242 237 230 / 0.24), inset 1px 0 0 rgb(242 237 230 / 0.11);
  --glass-border: rgb(226 216 201 / 0.20);
  --glass-edge: rgb(220 205 182 / 0.40);
  --glass-shadow: 0 8px 32px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.3);
  --glass-shadow-lg: 0 20px 60px rgb(0 0 0 / 0.6), 0 4px 12px rgb(0 0 0 / 0.4);
  --glass-sheen: linear-gradient(135deg, rgb(242 237 230 / 0.15) 0%, rgb(255 255 255 / 0) 55%);
  --color-bg: var(--color-neutral-950);
  --color-bg-alt: transparent;
  --color-surface: var(--glass-tint);
  --color-surface-2: var(--glass-tint-soft);
  --color-border: var(--glass-border);
  --color-border-strong: rgb(226 216 201 / 0.34);
  --color-text: #ece5da;
  --color-text-strong: #fbf8f4;
  --color-text-muted: #ded5c9;
  --color-text-subtle: #a1907c;
  --color-text-invert: var(--color-neutral-950);
  --color-heading: var(--color-neutral-50);
  --color-link: var(--color-accent-300);
  --color-link-hover: var(--color-accent-100);
  --color-focus: var(--color-accent-300);
  --color-accent-fg: var(--color-accent-300);
  --color-accent-bg: rgb(255 125 125 / 0.14);
  --color-primary-fg: var(--color-neutral-50);
  --color-primary-bg: rgb(220 205 182 / 0.14);
  --color-btn-primary-bg: var(--color-neutral-0);
  --color-btn-primary-bg-hover: var(--color-neutral-100);
  --color-btn-primary-bg-active: var(--color-neutral-200);
  --color-btn-primary-fg: var(--color-primary-900);
  --color-success: #7fc0a0;
  --color-warning: #e6bd7c;
  --color-danger: #e8a295;
  --shadow-focus: 0 0 0 3px rgb(220 205 182 / 0.45);
}
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }
  body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  body::before,
  body::after {
    content: "";
    position: fixed;
    inset: -5vmax;
    z-index: -2;
    pointer-events: none;
  }
  body::before {
    background-image: var(--page-bg-image);
    background-size: cover;
    background-position: center;
    filter: blur(52px) saturate(var(--page-bg-sat, 1.5)) brightness(var(--page-bg-bright, 0.95));
    transform: scale(1.12);
  }
  body::after {
    z-index: -1;
    background: var(--page-bg-bloom), var(--page-bg-scrim), var(--page-bg-orbs);
  }
  :root {
    --page-bg-bloom: radial-gradient(42vmax 38vmax at 94% 2%, rgb(202 2 2 / 0.16) 0%, rgb(202 2 2 / 0) 58%),
      radial-gradient(32vmax 30vmax at 2% 94%, rgb(255 125 125 / 0.13) 0%, rgb(255 125 125 / 0) 60%);
    --page-bg-orbs: radial-gradient(38vmax 38vmax at 78% 12%, rgb(220 205 182 / 0.52) 0%, rgb(220 205 182 / 0) 62%),
      radial-gradient(30vmax 30vmax at 12% 58%, rgb(174 156 132 / 0.34) 0%, rgb(174 156 132 / 0) 64%),
      radial-gradient(34vmax 34vmax at 62% 88%, rgb(245 239 230 / 0.58) 0%, rgb(245 239 230 / 0) 60%);
  }
  :root[data-theme="dark"] {
    --page-bg-bloom: radial-gradient(44vmax 40vmax at 94% 0%, rgb(202 2 2 / 0.34) 0%, rgb(202 2 2 / 0) 58%),
      radial-gradient(34vmax 32vmax at 0% 96%, rgb(143 17 17 / 0.30) 0%, rgb(143 17 17 / 0) 60%);
    --page-bg-orbs: radial-gradient(38vmax 38vmax at 78% 12%, rgb(141 124 102 / 0.38) 0%, rgb(141 124 102 / 0) 62%),
      radial-gradient(30vmax 30vmax at 12% 58%, rgb(199 180 151 / 0.20) 0%, rgb(199 180 151 / 0) 64%),
      radial-gradient(34vmax 34vmax at 62% 88%, rgb(85 74 62 / 0.34) 0%, rgb(85 74 62 / 0) 60%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --page-bg-bloom: radial-gradient(44vmax 40vmax at 94% 0%, rgb(202 2 2 / 0.34) 0%, rgb(202 2 2 / 0) 58%),
        radial-gradient(34vmax 32vmax at 0% 96%, rgb(143 17 17 / 0.30) 0%, rgb(143 17 17 / 0) 60%);
      --page-bg-orbs: radial-gradient(38vmax 38vmax at 78% 12%, rgb(141 124 102 / 0.38) 0%, rgb(141 124 102 / 0) 62%),
        radial-gradient(30vmax 30vmax at 12% 58%, rgb(199 180 151 / 0.20) 0%, rgb(199 180 151 / 0) 64%),
        radial-gradient(34vmax 34vmax at 62% 88%, rgb(85 74 62 / 0.34) 0%, rgb(85 74 62 / 0) 60%);
    }
  }
  :root {
    --page-bg-image: url("img/bg-desk.jpg");
    --page-bg-sat: 0.20;
    --page-bg-bright: 1.08;
    --page-bg-scrim: radial-gradient(120% 90% at 15% 0%, rgb(255 253 249 / 0.54) 0%, rgb(255 253 249 / 0) 60%),
      linear-gradient(165deg, rgb(246 241 233 / 0.84) 0%, rgb(235 224 209 / 0.80) 55%, rgb(220 205 182 / 0.78) 100%);
  }
  :root[data-theme="dark"] {
    --page-bg-sat: 0.22;
    --page-bg-bright: 0.48;
    --page-bg-scrim: radial-gradient(120% 90% at 15% 0%, rgb(199 180 151 / 0.18) 0%, rgb(199 180 151 / 0) 60%),
      linear-gradient(165deg, rgb(25 20 16 / 0.90) 0%, rgb(58 47 39 / 0.82) 55%, rgb(25 20 16 / 0.92) 100%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --page-bg-sat: 0.22;
      --page-bg-bright: 0.48;
      --page-bg-scrim: radial-gradient(120% 90% at 15% 0%, rgb(199 180 151 / 0.18) 0%, rgb(199 180 151 / 0) 60%),
        linear-gradient(165deg, rgb(25 20 16 / 0.90) 0%, rgb(58 47 39 / 0.82) 55%, rgb(25 20 16 / 0.92) 100%);
    }
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-heading);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    margin: 0;
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
  }
  a {
    color: inherit;
  }
  img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
  }
  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  ::selection {
    background: var(--color-gold-200);
    color: var(--color-neutral-950);
  }
  hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-8) 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@layer components {
  .container-page {
    width: 100%;
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container-wide {
    max-width: var(--container-xl);
  }
  .shell {
    position: relative;
    border-radius: var(--radius-3xl);
    padding: var(--spacing-5) var(--spacing-4) var(--spacing-7);
  }
  @media (min-width: 768px) {
    .shell {
      background: var(--color-surface-2);
      background-image: var(--glass-sheen);
      border: 1px solid var(--color-border);
      box-shadow: var(--glass-shadow-lg), var(--glass-rim);
      backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.6);
      -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.6);
      padding: var(--spacing-6) var(--spacing-6) var(--spacing-8);
    }
  }
  @media (min-width: 1024px) {
    .shell {
      padding: var(--spacing-7) var(--spacing-7) var(--spacing-9);
    }
  }
  .hero {
    padding-block: var(--spacing-4) var(--spacing-7);
  }
  @media (min-width: 768px) {
    .hero {
      padding-block: var(--spacing-5) var(--spacing-8);
    }
  }
  .hero__intro {
    max-width: 20ch;
  }
  @media (min-width: 768px) {
    .hero__intro {
      max-width: none;
    }
  }
  .hero__lede {
    margin-top: var(--spacing-5);
    max-width: 46ch;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
  }
  .hero__grid {
    display: grid;
    gap: var(--spacing-5);
    margin-top: var(--spacing-8);
  }
  @media (min-width: 1024px) {
    .hero__grid {
      grid-template-columns: 1.9fr 1fr;
      margin-top: var(--spacing-9);
    }
  }
  .stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: var(--spacing-4);
  }
  .stat-row > * {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .stat-row .stat__value {
    font-size: var(--text-2xl);
  }
  @media (min-width: 640px) {
    .stat-row .stat__value {
      font-size: var(--text-4xl);
    }
  }
  @media (min-width: 768px) {
    .stat-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-8);
    }
  }
  .stat__label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
  }
  .stat__value {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-light);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-heading);
    margin-top: var(--spacing-2);
  }
  .stat__value sup {
    font-size: 0.45em;
    font-weight: var(--font-weight-regular);
    vertical-align: super;
    margin-left: 0.12em;
    color: var(--color-text-muted);
  }
  .rail {
    position: fixed;
    display: flex;
    gap: var(--spacing-1);
    padding: var(--spacing-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    box-shadow: var(--glass-shadow), var(--glass-rim);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.8);
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.8);
    left: 50%;
    bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    flex-direction: row;
  }
  @media (min-width: 1024px) {
    .rail {
      left: var(--spacing-5);
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
      flex-direction: column;
    }
  }
  .rail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
  }
  .rail__btn svg {
    width: 20px;
    height: 20px;
  }
  .rail__btn:hover {
    background: var(--color-surface-3);
    color: var(--color-text-strong);
    transform: scale(1.06);
  }
  .rail__btn[aria-current="page"] {
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-fg);
  }
  .rail {
    z-index: calc(var(--z-overlay) + 1);
  }
  .container-prose {
    max-width: var(--container-sm);
  }
  .container-media {
    max-width: var(--container-md);
  }
  .container-narrow {
    max-width: var(--container-xs);
  }
  .section {
    padding-block: var(--section-y);
  }
  .section-sm {
    padding-block: var(--section-y-sm);
  }
  .section-lg {
    padding-block: var(--section-y-lg);
  }
  .band {
    background-color: transparent;
  }
  .skip-link {
    position: absolute;
    left: var(--spacing-4);
    top: var(--spacing-2);
    z-index: var(--z-modal);
    transform: translateY(-200%);
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-fg);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    transition: transform var(--duration-fast) var(--ease-out);
  }
  .skip-link:focus {
    transform: translateY(0);
  }
  .display-hero,
  .display-1 {
    font-family: var(--font-display);
    font-size: clamp(var(--text-5xl), 9vw, var(--text-7xl));
    font-weight: var(--font-weight-bold);
    line-height: 0.94;
    letter-spacing: var(--tracking-tighter);
    text-wrap: balance;
  }
  .display-2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .section-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
  }
  .lede {
    font-size: var(--text-xl);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    max-width: 60ch;
  }
  .eyebrow {
    font-family: var(--font-display);
    text-decoration: none;
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .meta {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
  }
  .text-gradient {
    background: linear-gradient(100deg, var(--color-grad-1) 0%, var(--color-grad-2) 45%, var(--color-grad-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    padding: var(--spacing-3) var(--spacing-5);
    min-height: 44px;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
  }
  .btn:active {
    transform: translateY(1px);
  }
  .btn:disabled,
  
  .btn[aria-disabled="true"] {
    opacity: 0.72;
    pointer-events: none;
  }
  .btn-sm {
    padding: var(--spacing-2) var(--spacing-4);
    min-height: 36px;
    font-size: var(--text-xs);
  }
  .btn-lg {
    padding: var(--spacing-4) var(--spacing-6);
    min-height: 52px;
    font-size: var(--text-base);
  }
  .btn-primary {
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-fg);
    box-shadow: 0 2px 10px rgb(25 20 16 / 0.18);
  }
  .btn-primary:hover {
    background: var(--color-btn-primary-bg-hover);
  }
  .btn-primary:active {
    background: var(--color-btn-primary-bg-active);
  }
  .btn-secondary {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-strong);
    box-shadow: inset 0 1px 0 rgb(255 253 249 / 0.42), var(--glass-shadow);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
  }
  .btn-secondary:hover {
    background: var(--color-surface-2);
    border-color: var(--color-border-strong);
  }
  .btn-ghost {
    background: transparent;
    color: var(--color-text);
  }
  .btn-ghost:hover {
    background: var(--color-surface-2);
    color: var(--color-text-strong);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
  }
  .btn-accent {
    background: var(--color-accent-500);
    color: #fff;
  }
  .btn-accent:hover {
    background: var(--color-accent-600);
  }
  .btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    background: var(--color-primary-bg);
    background-image: linear-gradient(135deg, rgb(255 253 249 / 0.38) 0%, rgb(255 253 249 / 0) 60%);
    border: 1px solid rgb(141 124 102 / 0.30);
    box-shadow: inset 0 1px 0 rgb(255 253 249 / 0.38);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    color: var(--color-primary-fg);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out), gap var(--duration-fast) var(--ease-out);
  }
  .btn-view-all:hover {
    background-color: rgb(141 124 102 / 0.24);
    gap: var(--spacing-3);
  }
  :root[data-theme="dark"] .btn-view-all:hover {
    background-color: rgb(220 205 182 / 0.22);
  }
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    border-color: var(--color-border);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .icon-btn:hover {
    background: var(--color-surface-2);
    color: var(--color-text-strong);
  }
  .icon-btn svg {
    width: 18px;
    height: 18px;
  }
  .link {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--ease-out);
  }
  .link:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
  }
  .site-header {
    position: relative;
    z-index: var(--z-header);
    background: transparent;
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    height: var(--header-h);
    max-width: none;
    padding-inline: var(--gutter);
  }
  @media (min-width: 1024px) {
    .site-header__inner {
      padding-inline: var(--spacing-5);
    }
  }
  .brand {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-text-strong);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }
  .brand:hover {
    color: var(--color-link);
  }
  .site-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    overflow-y: auto;
    background: var(--glass-tint);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.8);
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.8);
    animation: menu-in var(--duration-base) var(--ease-out) both;
  }
  .site-menu[hidden] {
    display: none;
  }
  @keyframes menu-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .site-menu {
      animation: none;
    }
  }
  .site-menu__inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: calc(var(--header-h) + var(--spacing-6)) var(--spacing-9);
  }
  .site-menu__nav {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-4);
  }
  .site-menu__link {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-4);
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-strong);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
                padding-left var(--duration-base) var(--ease-out);
  }
  .site-menu__link:hover {
    color: var(--color-link);
    padding-left: var(--spacing-3);
  }
  .site-menu__link[aria-current="page"] {
    color: var(--color-link);
  }
  .site-menu__num {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-subtle);
  }
  .site-menu__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-top: var(--spacing-7);
  }
  @media (min-width: 640px) {
    .site-menu__actions {
      flex-direction: row;
    }
    .site-menu__actions .btn {
      flex: 0 0 auto;
    }
  }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .badge-tag {
    position: relative;
    background: var(--glass-tint-strong);
    color: var(--color-primary-fg);
    border: 1px solid var(--color-border);
    box-shadow: inset 0 1px 0 rgb(255 253 249 / 0.58), 0 1px 3px rgb(25 20 16 / 0.10);
    backdrop-filter: blur(8px) saturate(1.5);
    -webkit-backdrop-filter: blur(8px) saturate(1.5);
    background-image: var(--glass-sheen);
  }
  .badge-tag:hover {
    background-color: var(--color-primary-bg);
  }
  :root[data-theme="dark"] .badge-tag {
    border-color: var(--color-border);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 3px rgb(0 0 0 / 0.4);
  }
  :root[data-theme="dark"] .badge-tag:hover {
    background-color: var(--color-primary-bg);
  }
  .badge-primary {
    background: var(--color-primary-bg);
    color: var(--color-primary-fg);
  }
  .badge-neutral {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
  }
  .filter-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-out);
  }
  .filter-pill:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text-strong);
  }
  .filter-pill[aria-current="true"],
  .filter-pill[data-active="true"] {
    background: var(--color-text-strong);
    border-color: var(--color-text-strong);
    color: var(--color-bg);
  }
  .segmented {
    display: inline-flex;
    gap: var(--spacing-1);
    padding: var(--spacing-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
  }
  .segmented__option {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .segmented__option:hover {
    color: var(--color-text-strong);
  }
  .segmented__option[data-active="true"] {
    background: var(--color-surface);
    color: var(--color-text-strong);
    box-shadow: var(--shadow-xs);
  }
  :root[data-theme="dark"] .segmented__option[data-active="true"] {
    background: var(--color-neutral-700);
  }
  .glass {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  }
  .glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--glass-sheen);
    pointer-events: none;
  }
  .glass-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--glass-edge) 0%, rgb(255 255 255 / 0) 42%, rgb(255 255 255 / 0) 58%, var(--glass-edge) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .glass-lg {
    border-radius: var(--radius-2xl);
    box-shadow: var(--glass-shadow-lg);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
  }
  .glass-flat {
    box-shadow: none;
    background: var(--color-surface-2);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
      background: var(--glass-tint-strong);
    }
  }
  .card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    background-image: var(--card-gradient), var(--glass-sheen);
    border: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--glass-shadow), var(--glass-rim);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
  }
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--glass-grain);
    opacity: var(--glass-grain-opacity);
    mix-blend-mode: var(--glass-grain-blend);
    pointer-events: none;
    border-radius: inherit;
  }
  .card__media, .card__body {
    position: relative;
    z-index: 1;
  }
  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--glass-edge) 0%, rgb(255 255 255 / 0) 45%, rgb(255 255 255 / 0) 55%, var(--glass-edge) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.38;
    transition: opacity var(--duration-base) var(--ease-out);
    pointer-events: none;
  }
  .card:hover {
    box-shadow: var(--glass-shadow-lg), var(--glass-rim);
    transform: translateY(-3px);
  }
  .card:hover::after {
    opacity: 0.9;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card {
      background: var(--glass-tint-strong);
    }
  }
  .card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface-2);
    order: 2;
    margin: 0;
    border-radius: 0;
    flex: 1;
  }
  .card__body {
    order: 1;
  }
  .grid-posts > .card:nth-child(even) .card__media,
  .grid-featured > .card:nth-child(even) .card__media,
  .card-flip .card__media {
    order: 1;
  }
  .grid-posts > .card:nth-child(even) .card__body,
  .grid-featured > .card:nth-child(even) .card__body,
  .card-flip .card__body {
    order: 2;
  }
  .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
  }
  .card:hover .card__media img {
    transform: scale(1.04);
  }
  .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
    flex: 0 0 auto;
  }
  .card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
  }
  .card__title a {
    text-decoration: none;
  }
  .card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .card:hover .card__title {
    color: var(--color-link);
  }
  .card__excerpt {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
  }
  .card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: auto;
    padding-top: var(--spacing-1);
    padding-right: calc(2rem + var(--spacing-3));
  }
  .card__arrow {
    position: absolute;
    right: var(--spacing-5);
    bottom: var(--spacing-5);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--glass-tint-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-text);
    pointer-events: none;
    transition: background var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
  }
  .card:hover .card__arrow {
    background: var(--color-primary);
    color: #fff;
    transform: translate(2px, -2px);
  }
  .card__arrow svg {
    width: 1rem;
    height: 1rem;
  }
  .card__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
  }
  .card-feature .card__media {
    aspect-ratio: 3 / 2;
  }
  .card-feature .card__title {
    font-size: var(--text-2xl);
  }
  .card-feature .card__excerpt {
    font-size: var(--text-base);
    -webkit-line-clamp: 4;
  }
  @media (min-width: 1024px) {
    .card-feature {
      flex-direction: row;
    }
    .card-feature .card__media {
      flex: 1 1 55%;
      aspect-ratio: auto;
      min-height: 340px;
    }
    .card-feature .card__body {
      flex: 1 1 45%;
      justify-content: center;
      padding: var(--spacing-7);
    }
  }
  .card-compact {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-3);
  }
  .card-compact .card__media,
  .grid-posts > .card-compact:nth-child(even) .card__media {
    order: 0;
    flex: 0 0 84px;
    width: 84px;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
  }
  .card-compact .card__body,
  .grid-posts > .card-compact:nth-child(even) .card__body {
    order: 1;
    flex: 1 1 auto;
  }
  .card-compact .card__body {
    padding: 0;
    gap: var(--spacing-2);
  }
  .card-compact .card__title {
    font-size: var(--text-base);
  }
  .card-row {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    border-radius: var(--radius-2xl);
  }
  .card-row .card__media {
    order: 0;
    flex: 0 0 clamp(96px, 26vw, 208px);
    align-self: stretch;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .card-row .card__body {
    order: 1;
    flex: 1 1 auto;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
  }
  @media (min-width: 768px) {
    .card-row .card__body {
      padding: var(--spacing-6) var(--spacing-7) var(--spacing-6) var(--spacing-6);
    }
  }
  .card-row .card__title {
    font-size: var(--text-base);
  }
  @media (min-width: 640px) {
    .card-row .card__title {
      font-size: var(--text-lg);
    }
  }
  @media (min-width: 1024px) {
    .card-row .card__title {
      font-size: var(--text-xl);
    }
  }
  .card-row .card__arrow {
    display: none;
  }
  .card-row .card__meta {
    padding-right: 0;
  }
  @media (min-width: 1024px) {
    .card-row .card__arrow {
      display: grid;
    }
    .card-row .card__meta {
      padding-right: calc(2rem + var(--spacing-3));
    }
  }
  .archive-list[data-view="grid"] .card-row .card__arrow {
    display: grid;
  }
  .archive-list[data-view="grid"] .card-row .card__meta {
    padding-right: calc(2rem + var(--spacing-3));
  }
  .card-row .card__excerpt {
    display: none;
  }
  @media (min-width: 640px) {
    .card-row .card__excerpt {
      display: -webkit-box;
    }
  }
  .card-row:hover {
    transform: translateX(3px);
  }
  .archive-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
  }
  .archive-list[data-view="grid"] {
    display: grid;
    gap: var(--spacing-5);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 640px) {
    .archive-list[data-view="grid"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .archive-list[data-view="grid"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .archive-list[data-view="grid"] > li {
    display: flex;
  }
  .archive-list[data-view="grid"] .card-row {
    flex: 1;
    flex-direction: column;
    border-radius: var(--radius-xl);
  }
  .archive-list[data-view="grid"] .card-row .card__media {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .archive-list[data-view="grid"] .card-row .card__body {
    padding: var(--spacing-5);
    justify-content: flex-start;
  }
  .archive-list[data-view="grid"] .card-row .card__title {
    font-size: var(--text-lg);
  }
  .archive-list[data-view="grid"] .card-row:hover {
    transform: translateY(-3px);
  }
  .archive-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-5);
    border-bottom: 1px solid var(--color-border);
  }
  .segmented__option svg {
    margin-right: var(--spacing-2);
  }
  .card-plain {
    border: 0;
    background: transparent;
  }
  .card-plain:hover {
    box-shadow: none;
    transform: none;
  }
  .card-plain .card__body {
    padding: var(--spacing-4) 0 0;
  }
  .card-plain .card__media {
    border-radius: var(--radius-lg);
  }
  .side-panel {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing-2);
    min-height: 150px;
    padding: var(--spacing-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    background-image: var(--glass-sheen);
    box-shadow: var(--glass-shadow), var(--glass-rim);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  }
  .side-panel:hover {
    box-shadow: var(--glass-shadow-lg), var(--glass-rim);
    transform: translateY(-2px);
  }
  .side-panel__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-strong);
  }
  .side-panel__title a {
    text-decoration: none;
  }
  .side-panel__title a::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .side-panel:hover .side-panel__title {
    color: var(--color-link);
  }
  .grid-posts {
    display: grid;
    gap: var(--spacing-5);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 640px) {
    .grid-posts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .grid-posts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .grid-2 {
    display: grid;
    gap: var(--spacing-5);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 768px) {
    .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .grid-featured {
    display: grid;
    gap: var(--spacing-5);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 768px) {
    .grid-featured {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .grid-featured .card__media {
    aspect-ratio: 16 / 10;
  }
  .grid-featured .card__title {
    font-size: var(--text-xl);
  }
  .auth {
    display: grid;
    gap: var(--spacing-8);
    align-items: center;
  }
  @media (min-width: 900px) {
    .auth {
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-10);
      min-height: 100%;
    }
  }
  .auth__form {
    max-width: 26rem;
    width: 100%;
    margin-inline: auto;
  }
  .auth__visual {
    position: relative;
    display: none;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    min-height: 32rem;
    box-shadow: var(--glass-shadow);
  }
  @media (min-width: 900px) {
    .auth__visual {
      display: block;
      min-height: 34rem;
    }
  }
  .auth__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .auth__visual-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(25 20 16 / 0.82) 10%, rgb(25 20 16 / 0.30) 60%, rgb(25 20 16 / 0.12) 100%);
  }
  .auth__quote {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--spacing-7);
  }
  .auth__quote p {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-snug);
    color: #FFFDF9;
  }
  .auth__quote cite {
    display: block;
    margin-top: var(--spacing-3);
    font-style: normal;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgb(255 253 249 / 0.76);
  }
  .topic-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 13.5rem;
    padding: var(--spacing-5);
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--glass-shadow);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
  }
  .topic-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
  }
  .topic-tile__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(25 20 16 / 0.86) 12%, rgb(25 20 16 / 0.52) 52%, rgb(25 20 16 / 0.28) 100%);
  }
  .topic-tile > *:not(.topic-tile__img):not(.topic-tile__scrim) {
    position: relative;
    z-index: 1;
  }
  .topic-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-lg);
  }
  .topic-tile:hover .topic-tile__img {
    transform: scale(1.05);
  }
  .topic-tile__count {
    align-self: flex-start;
    margin-bottom: auto;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    background: rgb(255 253 249 / 0.18);
    border: 1px solid rgb(255 253 249 / 0.30);
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: #FFFDF9;
  }
  .topic-tile__name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    color: #FFFDF9;
  }
  .topic-tile__desc {
    margin-top: var(--spacing-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: rgb(255 253 249 / 0.82);
  }
  .topic-header {
    position: relative;
    padding: var(--spacing-7) var(--spacing-6);
    border-radius: var(--radius-2xl);
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .topic-header {
      padding: var(--spacing-9) var(--spacing-8);
    }
  }
  .topic-header__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.38;
    -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 78%);
    mask-image: linear-gradient(to left, #000 0%, transparent 78%);
  }
  :root[data-theme="dark"] .topic-header__img {
    opacity: 0.3;
  }
  .topic-header > *:not(.topic-header__img) {
    position: relative;
    z-index: 1;
  }
  .topic-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3) var(--spacing-5);
    margin-top: var(--spacing-5);
  }
  .topic-stats__item {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-2);
  }
  .topic-stats__num {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
  }
  .topic-stats__label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .topic-row + .topic-row {
    margin-top: var(--spacing-12);
  }
  .topic-row {
    display: grid;
    gap: var(--spacing-6);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .topic-row__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--spacing-4);
    row-gap: var(--spacing-2);
  }
  .topic-row__head .btn-view-all {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .topic-row__desc,
  .topic-row__count {
    grid-column: 1 / -1;
  }
  @media (min-width: 1280px) {
    .topic-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      gap: var(--spacing-7);
    }
    .topic-row__head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-3);
      position: sticky;
      top: var(--spacing-8);
    }
  }
  .topic-row__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-heading);
  }
  .topic-row__title em {
    font-style: normal;
    color: var(--color-link);
  }
  .topic-row__desc {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    max-width: 34ch;
  }
  .topic-row__count {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .topic-row__posts {
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  @media (min-width: 640px) {
    .topic-row__posts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .topic-row__posts .card {
    height: 100%;
  }
  .topic-row__posts .card__media {
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
  }
  .topic-row__posts .card__body {
    flex: 1 1 auto;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
  }
  .topic-row__posts .card__title {
    font-size: var(--text-base);
  }
  .topic-row__posts .card__meta {
    margin-top: auto;
    flex-wrap: nowrap;
  }
  .topic-row__posts .card__meta .avatar {
    display: none;
  }
  .topic-row__posts .card__arrow {
    right: var(--spacing-4);
    bottom: var(--spacing-4);
  }
  @media (max-width: 639px) {
    .topic-row__posts .card__body {
      min-height: 9rem;
    }
  }
  .grid-authors {
    display: grid;
    gap: var(--spacing-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 768px) {
    .grid-authors {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .grid-authors {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .author-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-6) var(--spacing-4);
    text-align: center;
    background: var(--color-surface);
    background-image: var(--glass-sheen);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--glass-shadow), var(--glass-rim);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
  }
  .author-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-lg), var(--glass-rim);
  }
  .author-card .avatar {
    margin-bottom: var(--spacing-4);
  }
  .author-card__name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-strong);
    text-decoration: none;
  }
  .author-card__name::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .author-card {
    position: relative;
  }
  .author-card:focus-within {
    box-shadow: var(--glass-shadow-lg), var(--glass-rim);
  }
  .author-card__role {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }
  .author-card__bio {
    margin-top: var(--spacing-3);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
  }
  .author-card__count {
    margin-top: var(--spacing-4);
  }
  .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
  }
  .avatar {
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    box-shadow: 0 1px 4px rgb(25 20 16 / 0.14);
    object-fit: cover;
    flex-shrink: 0;
  }
  .avatar-xs {
    width: 24px;
    height: 24px;
  }
  .avatar-sm {
    width: 32px;
    height: 32px;
  }
  .avatar-md {
    width: 48px;
    height: 48px;
  }
  .avatar-lg {
    width: 64px;
    height: 64px;
  }
  .avatar-xl {
    width: 96px;
    height: 96px;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }
  .label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-strong);
  }
  .input {
    width: 100%;
    min-height: 44px;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    box-shadow: inset 0 1px 2px rgb(25 20 16 / 0.06);
    font-size: var(--text-base);
    color: var(--color-text-strong);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .input::placeholder {
    color: var(--color-text-subtle);
  }
  .input:focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: var(--shadow-focus);
  }
  .input[aria-invalid="true"] {
    border-color: var(--color-danger);
  }
  textarea.input {
    min-height: 140px;
    resize: vertical;
  }
  .field-error {
    font-size: var(--text-xs);
    color: var(--color-danger);
  }
  .field-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }
  .form-status {
    font-size: var(--text-sm);
  }
  .form-status[data-state="success"] {
    color: var(--color-success);
  }
  .form-status[data-state="error"] {
    color: var(--color-danger);
  }
  .newsletter {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: var(--spacing-7);
    background: var(--color-surface);
    background-image: var(--glass-sheen);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3xl);
    box-shadow: var(--glass-shadow-lg), var(--glass-rim);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
    padding: var(--spacing-7) var(--spacing-5);
  }
  @media (min-width: 768px) {
    .newsletter {
      padding: var(--spacing-9) var(--spacing-8);
    }
  }
  @media (min-width: 1024px) {
    .newsletter {
      grid-template-columns: 1.1fr 1fr;
      gap: var(--spacing-9);
      align-items: center;
    }
  }
  /* On a post the newsletter follows a 44rem reading column, so the wide
     two-column card used on index pages leaves it stranded. There it stays
     a single centred column on the article's own media measure. */
  body.post-template .section .newsletter {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
    max-width: var(--post-media, 58rem);
    margin-inline: auto;
    text-align: center;
  }
  body.post-template .section .newsletter__copy { display: flex; flex-direction: column; align-items: center; }
  body.post-template .section .newsletter__lede { margin-inline: auto; }
  /* Side by side the three points read as one centred line; stacked and
     centred they would leave a ragged left edge. */
  body.post-template .section .newsletter__points {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-3) var(--spacing-6);
  }
  @media (max-width: 639px) {
    body.post-template .section .newsletter__points { flex-direction: column; align-items: center; }
  }
  body.post-template .section .newsletter__action { width: 100%; max-width: 28rem; margin-inline: auto; }
  body.post-template[data-postlayout="Narrow"] .section .newsletter { max-width: 44rem; }
  body.post-template[data-postlayout="Cover"] .section .newsletter { max-width: 60rem; }
  /* The member card carries one column of copy, so it must not inherit the
     two-column card grid — that left it stranded in the left half. */
  .newsletter--solo { grid-template-columns: 1fr !important; text-align: center; }
  .newsletter--solo > div { display: flex; flex-direction: column; align-items: center; }
  .newsletter--solo p { margin-inline: auto; }
  .newsletter::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 420px;
    height: 420px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgb(174 156 132 / 0.22), transparent 65%);
    pointer-events: none;
  }
  .newsletter__copy, .newsletter__action {
    position: relative;
  }
  .newsletter__title {
    margin-top: var(--spacing-3);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-heading);
    text-wrap: balance;
  }
  .newsletter__lede {
    margin-top: var(--spacing-4);
    max-width: 48ch;
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
  }
  .newsletter__points {
    margin-top: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
  .newsletter__points li {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
  }
  .newsletter__points li::before {
    content: "";
    flex: none;
    width: 7px;
    height: 12px;
    border-right: 2px solid var(--color-text-strong);
    border-bottom: 2px solid var(--color-text-strong);
    transform: rotate(42deg) translateY(-1px);
  }
  .newsletter__action {
    padding: var(--spacing-6);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--glass-rim);
  }
  .newsletter__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
  }
  .newsletter__form .btn {
    width: 100%;
    justify-content: center;
  }
  .divider {
    height: 1px;
    background: var(--color-border);
    border: 0;
  }
  .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }
  .breadcrumbs a {
    text-decoration: none;
  }
  .breadcrumbs a:hover {
    color: var(--color-text-strong);
    text-decoration: underline;
  }
  .breadcrumbs li + li::before {
    content: "/";
    margin-right: var(--spacing-2);
    color: var(--color-text-subtle);
  }
  .breadcrumbs ol, .breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .dot-sep::before {
    content: "•";
    margin-inline: var(--spacing-2);
    color: var(--color-text-subtle);
  }
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    text-align: center;
    padding: var(--spacing-10) var(--spacing-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: var(--color-surface-2);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  }
  .faq-item {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding-inline: var(--spacing-5);
    margin-bottom: var(--spacing-3);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  }
  .faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-5) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-strong);
  }
  .faq-item > summary::-webkit-details-marker {
    display: none;
  }
  .faq-item > summary::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--duration-base) var(--ease-out);
  }
  .faq-item[open] > summary::after {
    transform: rotate(225deg) translateY(-2px);
  }
  .faq-item:last-child {
    margin-bottom: 0;
  }
  .faq-item__body {
    padding-bottom: var(--spacing-5);
    color: var(--color-text-muted);
    max-width: 70ch;
  }
  .progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--color-text-strong), var(--color-gold-400));
    z-index: calc(var(--z-header) + 1);
  }
  .plan-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    padding: var(--spacing-6);
    background: var(--color-surface);
    background-image: var(--glass-sheen);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--glass-shadow), var(--glass-rim);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  }
  .plan-card[data-featured="true"] {
    border-color: var(--color-border-strong);
    box-shadow: var(--glass-shadow-lg), var(--glass-rim);
  }
  .plan-card__price {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-light);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-text-strong);
  }
  .plan-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
  }
  .plan-card li {
    display: flex;
    gap: var(--spacing-3);
    font-size: var(--text-sm);
  }
  .plan-card li::before {
    content: "";
    flex-shrink: 0;
    margin-top: 5px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--color-text-strong);
    border-bottom: 2px solid var(--color-text-strong);
    transform: rotate(-45deg);
  }
  .site-footer {
    background: var(--color-surface-2);
    backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.6);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -1px 0 rgb(174 156 132 / 0.20);
    padding-block: var(--spacing-9) var(--spacing-6);
  }
  @media (max-width: 1023.98px) {
    .site-footer {
      padding-bottom: calc(var(--spacing-9) + 78px);
    }
  }
  .footer__by {
    color: var(--color-text-muted);
  }
  @media (max-width: 479px) {
    .footer__by {
      display: block;
      margin-top: var(--spacing-1);
    }
  }
  .footer-heading {
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-strong);
    margin-bottom: var(--spacing-4);
  }
  .footer-link {
    display: block;
    padding: var(--spacing-1) 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
  }
  .footer-link:hover {
    color: var(--color-text-strong);
  }
  .prose {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    max-width: min(var(--measure), 100%);
    min-width: 0;
  }
  .prose > * + * {
    margin-top: var(--spacing-5);
  }
  .prose h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-4);
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
  }
  .prose h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-3);
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
  }
  .prose h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--spacing-7);
  }
  .prose a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
  }
  .prose a:hover {
    text-decoration-thickness: 2px;
  }
  .prose strong {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-semibold);
  }
  .prose ul, .prose ol {
    padding-left: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }
  .prose li::marker {
    color: var(--color-text-subtle);
  }
  .prose blockquote {
    margin: var(--spacing-8) 0;
    padding: var(--spacing-5) var(--spacing-5) var(--spacing-5) var(--spacing-6);
    border-left: 3px solid var(--color-gold-400);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    background: var(--color-surface-2);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    box-shadow: var(--glass-shadow);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-strong);
  }
  .prose figure {
    margin: var(--spacing-8) 0;
  }
  .prose figure img {
    border-radius: var(--radius-lg);
    width: 100%;
  }
  .prose figcaption {
    margin-top: var(--spacing-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
  }
  .prose code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.15em 0.4em;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    color: var(--color-text-strong);
  }
  .prose pre {
    overflow-x: auto;
    padding: var(--spacing-5);
    background: var(--color-neutral-950);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-neutral-100);
  }
  .prose pre code {
    background: none;
    padding: 0;
    color: inherit;
  }
  :root[data-theme="dark"] .prose pre {
    background: var(--color-surface-2);
    border-color: var(--color-border-strong);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .prose pre {
      background: var(--color-surface-2);
      border-color: var(--color-border-strong);
    }
  }
  .prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }
  .prose th, .prose td {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
  }
  .prose th {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-strong);
  }
  .prose .table-scroll {
    overflow-x: auto;
  }
  .prose .callout {
    padding: var(--spacing-5);
    background: var(--color-primary-bg);
    background-image: var(--glass-sheen);
    border-left: 3px solid var(--color-gold-400);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
    font-size: var(--text-base);
  }
  .prose .bleed {
    max-width: var(--container-md);
    margin-inline: calc(50% - min(var(--container-md), 100%) / 2);
  }
  .prose pre, .prose .table-scroll {
    max-width: 100%;
  }
  .prose > *:first-child {
    margin-top: 0;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Wire — Ghost layer. Everything above this line is the design's own
   compiled stylesheet, untouched. Everything below wires that design to
   Ghost: Admin brand settings, Koenig editor cards, members form states,
   and a real markup/CSS branch for every custom setting.
   ════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Ghost Admin → Design → Brand ────────────────────────────────────
     Fonts: Ghost injects --gh-font-heading / --gh-font-body at runtime. The
     design's own stacks stay as the fallback, so the theme looks unchanged
     until the owner picks a font. Accent: the design already resolves
     --color-accent-500 through var(--ghost-accent-color, …). */
  :root {
    --gh-font-heading: var(--gh-font-heading, "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
    --gh-font-body: var(--gh-font-body, "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
    --color-accent-fallback: #ca0202;
    --font-sans: var(--gh-font-body, "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
    --font-display: var(--gh-font-heading, "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  }

  body { font-family: var(--gh-font-body, var(--font-sans)); }
  h1, h2, h3, h4, h5, h6 { font-family: var(--gh-font-heading, var(--font-display)); }

  /* ── Members forms ───────────────────────────────────────────────────
     Ghost's own script flips data-members-state on the form. Without these
     rules both the success and the error line are visible at all times. */
  [data-members-form] [data-members-success],
  [data-members-form] [data-members-error] { display: none; }
  [data-members-form][data-members-state="success"] [data-members-success] { display: block; color: var(--color-success); }
  [data-members-form][data-members-state="error"] [data-members-error] { display: block; color: var(--color-danger); }
  [data-members-form][data-members-state="error"] [data-members-error]:empty::before { content: "That didn't work — check the address and try again."; }
  [data-members-form][data-members-state="loading"] button[type="submit"] { opacity: .6; pointer-events: none; }

  /* ── Header: sticky (@custom.sticky_header) ─────────────────────── */
  .site-header.is-sticky { position: sticky; top: 0; z-index: 40; }

  /* ── Hero variants (@custom.hero_layout) ──────────────────────────
     Featured Grid is the default and owns .hero__grid above. The two below
     get the same top margin so switching layout does not move the hero. */
  .hero__slider,
  .hero__bento { margin-top: var(--spacing-8); }
  @media (min-width: 1024px) {
    .hero__slider,
    .hero__bento { margin-top: var(--spacing-9); }
  }

  /* ── Slider ───────────────────────────────────────────────────────
     The track is a native scroll-snap row: it works with the script absent,
     and theme.js only adds arrows, dots, a counter and autoplay. Three
     picture tiles are in view at desktop width and it scrolls by one. */
  .hero__slider { position: relative; }
  .hero__track {
    display: flex;
    gap: var(--spacing-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--spacing-2);
  }
  .hero__track::-webkit-scrollbar { display: none; }
  /* snap-align is start, not center: with more than one tile in view the
     left edge is the position the arrows and dots move to. */
  .hero__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
  }
  @media (min-width: 768px) {
    .hero__slide { flex: 0 0 calc((100% - var(--spacing-5)) / 2); }
  }
  @media (min-width: 1024px) {
    .hero__slide { flex: 0 0 calc((100% - 2 * var(--spacing-5)) / 3); }
  }
  .hero__slide > .feature-tile { height: 100%; }

  .hero__slider-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
  }
  .hero__dots { display: flex; align-items: center; gap: var(--spacing-2); min-width: 0; }
  /* Nine dots, a counter and two arrows do not fit a phone; the counter and
     the arrows say the same thing in less room, and the track still swipes. */
  @media (max-width: 639px) {
    .hero__dots { display: none; }
    .hero__counter { margin-left: 0; margin-right: auto; }
  }
  .hero__dot {
    width: 28px; height: 4px; padding: 0;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--color-border);
    transition: background var(--duration-base) var(--ease-out),
                width var(--duration-base) var(--ease-out);
  }
  .hero__dot:hover { background: var(--color-text-muted); }
  .hero__dot[aria-selected="true"] { width: 48px; background: var(--color-link); }
  .hero__counter {
    margin-left: auto;
    white-space: nowrap;
    flex: none;
    font-family: var(--font-mono, var(--font-display));
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
  }
  .hero__arrows { display: flex; gap: var(--spacing-2); flex: none; }
  .hero__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-strong);
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
  }
  .hero__arrow:hover { color: var(--color-link); transform: translateY(-1px); }
  .hero__arrow[disabled] { opacity: .35; cursor: default; transform: none; }
  /* Without the script there is nothing for the controls to drive, so they
     stay hidden and the track is scrolled or swiped directly. */
  .hero__slider:not([data-ready]) .hero__slider-bar { display: none; }


  /* ── Bento ────────────────────────────────────────────────────────
     Picture tiles of two sizes — a lead twice the size of the other two —
     plus the busiest topic as a panel. */
  .hero__bento {
    display: grid;
    gap: var(--spacing-5);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 768px) {
    .hero__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__bento > .feature-tile--lead,
    .hero__bento > .bento-topic { grid-column: span 2; }
  }
  @media (min-width: 1024px) {
    /* Two rows of a fixed height, so the mosaic keeps its proportions
       whatever the tiles hold: the lead is two rows tall beside two tiles
       and the topic panel. Without this the tallest tile sets the height and
       the lead stretches into a column. */
    .hero__bento {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 16.5rem));
    }
    .hero__bento > .feature-tile--lead { grid-column: span 2; grid-row: span 2; }
    .hero__bento > .bento-topic { grid-column: span 2; }
    /* The rows set the height here; a tile's own min-height would push it
       past its row and over the tile below. */
    .hero__bento > .feature-tile { min-height: 0; }
  }
  .hero__bento > * { height: 100%; min-width: 0; }

  /* ── Feature tile ─────────────────────────────────────────────────
     A post as a photograph with its headline over a black gradient. Used by
     both the Slider and the Bento hero. No shadow: these tiles sit on their
     own pictures, and a drop shadow under each one muddies the row. */
  .feature-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(16rem, 26vw, 20rem);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--color-surface-2);
    isolation: isolate;
  }
  .feature-tile--lead { min-height: clamp(18rem, 34vw, 24rem); }
  .feature-tile__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
  }
  .feature-tile:hover .feature-tile__img { transform: scale(1.04); }
  /* A flat ramp greys the middle of the photograph; these stops keep the
     picture readable and still carry the text at the foot. */
  .feature-tile__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top,
        rgb(10 8 6 / 0.88) 0%,
        rgb(10 8 6 / 0.74) 18%,
        rgb(10 8 6 / 0.46) 38%,
        rgb(10 8 6 / 0.18) 60%,
        rgb(10 8 6 / 0) 80%),
      linear-gradient(to bottom, rgb(10 8 6 / 0.34) 0%, rgb(10 8 6 / 0) 32%);
  }
  .feature-tile__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
  }
  @media (min-width: 1024px) {
    .feature-tile--lead .feature-tile__body { padding: var(--spacing-6); }
  }
  /* The tile sits on a photograph, not on the page, so its text is light in
     both schemes rather than following the colour tokens. */
  .feature-tile__img ~ .feature-tile__body,
  .feature-tile__img ~ .feature-tile__body .meta,
  .feature-tile__img ~ .feature-tile__body .badge-tag {
    color: rgb(255 255 255 / 0.86);
  }
  .feature-tile__img ~ .feature-tile__body .feature-tile__title a { color: #fff; }
  .feature-tile__img ~ .feature-tile__body .badge-tag {
    border-color: rgb(255 255 255 / 0.38);
    background: rgb(255 255 255 / 0.14);
  }
  .feature-tile--plain { background: var(--color-surface); border: 1px solid var(--color-border); }
  .feature-tile__top,
  .feature-tile__meta { display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; }
  .feature-tile__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .feature-tile--lead .feature-tile__title { font-size: var(--text-2xl); }
  @media (min-width: 1024px) {
    .feature-tile--lead .feature-tile__title { font-size: var(--text-3xl); }
  }
  .feature-tile__title a { text-decoration: none; }
  .feature-tile__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  .feature-tile__excerpt {
    max-width: 48ch;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }
  /* Only the lead has room for a standfirst once three tiles share a row. */
  @media (min-width: 768px) {
    .feature-tile:not(.feature-tile--lead) .feature-tile__excerpt { display: none; }
  }

  /* The topic tile is the widest of the small tiles, so it carries the live
     article count as a figure rather than another line of small print. */
  .bento-topic {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-5);
  }
  .bento-topic__text { display: flex; flex-direction: column; gap: var(--spacing-2); }
  .bento-topic__desc {
    max-width: 44ch;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
  .bento-topic__count {
    flex: none;
    font-size: var(--text-sm);
    line-height: 1.1;
    text-align: right;
    color: var(--color-text-muted);
  }
  .bento-topic__count span {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 767px) {
    .bento-topic { align-items: center; }
  }

  /* ── Homepage feed variants (@custom.homepage_layout) ─────────────
     The grid stays the DIRECT parent of the cards; only its column count
     and the cards' own proportions change. */
  body[data-homepage="Magazine"] [data-feed-list] { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
  body[data-homepage="Magazine"] [data-feed-list] .card__media { aspect-ratio: 4 / 3; }
  body[data-homepage="Minimal"] [data-feed-list] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 44rem; margin-inline: auto;
  }
  body[data-homepage="Minimal"] [data-feed-list] .card__media { display: none; }

  /* ── Archive / search view switch ────────────────────────────────── */
  .archive-list[data-view="grid"] {
    display: grid; gap: var(--spacing-5);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 640px) { .archive-list[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .archive-list[data-view="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .archive-list[data-view="grid"] > li { display: flex; }
  .archive-list[data-view="grid"] .card-row { flex-direction: column; width: 100%; }
  .archive-list[data-view="grid"] .card-row .card__media { width: 100%; aspect-ratio: 16 / 10; }

  /* ── Post layout variants (@custom.post_layout) ──────────────────────
     Two tokens drive the entire article: --post-measure is the reading
     column, --post-media the width that images and wide editor cards may
     use. The masthead, feature image, body, article footer, member card,
     author card and prev/next all sit on that same centred axis, so a
     layout is a change of two numbers plus its own masthead treatment. */
  .gh-article { --post-measure: 44rem; --post-media: 58rem; }

  /* ── Masthead (Default and Narrow) ──────────────────────────────── */
  .post-head { padding-block: var(--spacing-8) var(--spacing-7); }
  .post-head__meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--spacing-3); margin-bottom: var(--spacing-5);
  }
  .post-head__title {
    font-family: var(--font-display); font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em; line-height: 1.05;
    font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
    color: var(--color-text-strong); text-wrap: balance;
  }
  .post-head__lede {
    margin-top: var(--spacing-5); max-width: none;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5;
    text-wrap: pretty;
  }
  .post-head__byline {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--spacing-5);
    margin-top: var(--spacing-7); padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-border);
  }
  .post-head__author { display: flex; align-items: center; gap: var(--spacing-3); }
  .post-head__author-name {
    font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
    color: var(--color-text-strong);
  }
  .post-head__author-name a { text-decoration: none; }
  .post-head__author-name a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

  /* ── Feature image ──────────────────────────────────────────────── */
  .post-figure { margin-bottom: var(--spacing-10); max-width: var(--post-media); }
  .post-figure img { width: 100%; height: auto; border-radius: var(--radius-xl); }
  .post-figure__caption {
    margin-top: var(--spacing-3); font-size: var(--text-xs);
    color: var(--color-text-muted); text-align: center;
  }

  /* ── Reading column ─────────────────────────────────────────────── */
  .post-body {
    width: 100%; max-width: var(--post-measure);
    margin-inline: auto; padding-inline: var(--gutter);
    padding-bottom: var(--spacing-10);
  }
  /* The column already sets the measure, so Ghost's own 720px cap is lifted
     and only wide / full-width cards break out of it. */
  .post-body .gh-content { --content-max: 100%; max-width: none; }
  .post-body .gh-content > .kg-width-wide {
    position: relative; left: 50%; transform: translateX(-50%);
    width: min(var(--post-media), 100vw - 2 * var(--gutter)); max-width: none;
  }
  .post-body .gh-content > .kg-width-full {
    position: relative; left: 50%; transform: translateX(-50%);
    width: 100vw; max-width: none;
  }

  /* Body typography: a touch larger and looser than the site default,
     because this column is the one people actually read. */
  .post-body .gh-content > p {
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    line-height: 1.75;
  }
  .post-body .gh-content > h2,
  .post-body .gh-content > h3 { text-wrap: balance; }
  .post-body .gh-content > hr {
    margin-block: var(--spacing-9); border: 0; height: 1px;
    background: var(--color-border);
  }

  /* The opening paragraph carries a drop cap — the theme's editorial
     signature. It is suppressed where the paragraph is too short to hang
     one on, and Narrow swaps it for a quieter lead-in. */
  .post-body .gh-content > p:first-of-type::first-letter {
    float: left; margin: 0.06em 0.08em 0 0;
    font-family: var(--font-display); font-weight: var(--font-weight-bold);
    font-size: 3.4em; line-height: 0.78;
    color: var(--color-text-strong);
  }

  /* ── Article footer ─────────────────────────────────────────────── */
  .post-foot { padding-bottom: var(--spacing-10); }
  .post-foot__row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--spacing-5);
  }
  .post-foot__updated { margin-top: var(--spacing-5); }

  /* ── Cover: the feature image is the masthead ───────────────────── */
  .post-cover {
    position: relative;
    display: flex; align-items: flex-end;
    min-height: clamp(26rem, 74vh, 46rem);
    margin-bottom: var(--spacing-9);
    padding-block: calc(var(--header-h) + var(--spacing-10)) var(--spacing-10);
    background-size: cover; background-position: center;
    background-color: var(--color-neutral-950);
    text-align: center;
  }
  .post-cover::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgb(20 16 13 / .88) 0%, rgb(20 16 13 / .62) 45%, rgb(20 16 13 / .30) 100%);
  }
  .post-cover__inner { position: relative; width: 100%; }
  .post-cover__meta { justify-content: center; margin-bottom: var(--spacing-5); }
  .post-cover .post-head__title {
    color: #FFFDF9; text-shadow: 0 2px 24px rgb(0 0 0 / .45);
  }
  .post-cover .post-head__lede {
    margin-inline: auto; max-width: 40rem;
    color: rgb(255 253 249 / .88); text-shadow: 0 1px 12px rgb(0 0 0 / .4);
  }
  .post-cover .meta,
  .post-cover .post-head__author-name,
  .post-cover .post-head__author-name a { color: rgb(255 253 249 / .82); }
  .post-cover .post-head__author-name { color: #FFFDF9; }
  .post-cover .badge-tag {
    color: #FFFDF9;
    background: rgb(255 255 255 / .16);
    border-color: rgb(255 255 255 / .34);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .post-cover .avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .35); }
  .post-cover .icon-btn {
    color: #FFFDF9;
    background: rgb(255 255 255 / .12);
    border-color: rgb(255 255 255 / .34) !important;
  }
  .post-cover .icon-btn:hover { background: rgb(255 255 255 / .24); }
  .post-cover__byline {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--spacing-5) var(--spacing-7);
    margin-top: var(--spacing-7); padding-top: var(--spacing-6);
    border-top: 1px solid rgb(255 255 255 / .22);
  }
  .post-cover__caption {
    position: absolute; right: var(--gutter); bottom: var(--spacing-3);
    font-size: var(--text-xs); color: rgb(255 253 249 / .6);
  }
  /* No feature image: the same masthead on the page's own surface. */
  .post-cover--plain { min-height: 0; background: var(--color-bg-alt); }
  .post-cover--plain::before { display: none; }
  .post-cover--plain .post-head__title { color: var(--color-text-strong); text-shadow: none; }
  .post-cover--plain .post-head__lede { color: var(--color-text-muted); text-shadow: none; }
  .post-cover--plain .meta,
  .post-cover--plain .post-head__author-name,
  .post-cover--plain .post-head__author-name a { color: inherit; }
  .post-cover--plain .post-head__author-name { color: var(--color-text-strong); }
  .post-cover--plain .badge-tag { color: inherit; background: var(--color-surface-2); border-color: var(--color-border); }
  .post-cover--plain .icon-btn { color: inherit; background: transparent; border-color: var(--color-border) !important; }
  .post-cover--plain .post-cover__byline { border-top-color: var(--color-border); }
  .post-cover--plain .avatar { box-shadow: none; }

  body[data-postlayout="Cover"] .gh-article { --post-measure: 46rem; --post-media: 60rem; }

  /* ── Narrow: one quiet column, centred masthead ─────────────────── */
  body[data-postlayout="Narrow"] .gh-article { --post-measure: 38rem; --post-media: 44rem; }
  body[data-postlayout="Narrow"] .container-prose { max-width: 38rem; }
  body[data-postlayout="Narrow"] .post-head { padding-block: var(--spacing-10) var(--spacing-8); text-align: center; }
  body[data-postlayout="Narrow"] .post-head__meta { justify-content: center; gap: var(--spacing-4); }
  body[data-postlayout="Narrow"] .post-head__title {
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -0.025em; line-height: 1.12;
  }
  body[data-postlayout="Narrow"] .post-head__lede { margin-inline: auto; max-width: 32rem; }
  body[data-postlayout="Narrow"] .post-head__byline {
    justify-content: center;
    margin-top: var(--spacing-8); padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-6);
  }
  body[data-postlayout="Narrow"] .post-figure { margin-bottom: var(--spacing-9); }
  body[data-postlayout="Narrow"] .post-figure img { border-radius: var(--radius-lg); }
  body[data-postlayout="Narrow"] .post-body { padding-top: var(--spacing-2); }
  /* The long read gets more air between paragraphs, and a small-caps opening
     line instead of a drop cap — quieter suits the column. */
  body[data-postlayout="Narrow"] .post-body .gh-content > p { line-height: 1.8; }
  body[data-postlayout="Narrow"] .post-body .gh-content > p:first-of-type::first-letter {
    float: none; margin: 0; font-family: inherit; font-size: inherit;
    font-weight: inherit; line-height: inherit;
  }
  body[data-postlayout="Narrow"] .post-body .gh-content > p:first-of-type::first-line {
    font-variant-caps: small-caps; letter-spacing: 0.04em; color: var(--color-text-strong);
  }
  body[data-postlayout="Narrow"] .post-foot__row { justify-content: center; }
  body[data-postlayout="Narrow"] .post-foot__updated { text-align: center; }

  @media (max-width: 639px) {
    .post-head { padding-block: var(--spacing-6) var(--spacing-5); }
    .post-head__byline { margin-top: var(--spacing-6); padding-top: var(--spacing-5); }
    .post-figure { margin-bottom: var(--spacing-7); }
    .post-body .gh-content > p:first-of-type::first-letter { font-size: 2.9em; }
    .post-cover { min-height: 0; padding-block: calc(var(--header-h) + var(--spacing-8)) var(--spacing-8); }
    .post-cover__byline { flex-direction: column; gap: var(--spacing-4); }
    .post-cover__caption { position: static; display: block; margin-top: var(--spacing-3); text-align: center; }
    body[data-postlayout="Narrow"] .post-head { padding-block: var(--spacing-7) var(--spacing-6); }
    /* Stacked, the author line and the share row each centre on their own. */
    body[data-postlayout="Narrow"] .post-head__byline { flex-direction: column; gap: var(--spacing-4); }
  }

  /* ── Footer variants (@custom.footer_layout) ─────────────────────── */
  .site-footer__links { display: flex; flex-direction: column; }
  .site-footer__centered {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--spacing-4); text-align: center;
  }
  .site-footer__centered .site-footer__inline ul {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--spacing-5); list-style: none; margin: 0; padding: 0;
  }
  .site-footer__centered .site-footer__inline a {
    font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;
  }
  .site-footer__centered .site-footer__inline a:hover { color: var(--color-text-strong); }
  .site-footer__form {
    display: flex; flex-direction: column; gap: var(--spacing-2);
    width: 100%; max-width: 22rem;
  }
  [data-footer-col][hidden] { display: none; }

  /* ── Auth pages ──────────────────────────────────────────────────── */
  .auth-shell { display: flex; align-items: center; min-height: 70vh; }
  .auth-shell > .auth { width: 100%; }

  /* ── Cards without a feature image ───────────────────────────────── */
  .card-noimage .card__body { padding-top: var(--spacing-5); }
  .avatar-fallback {
    display: inline-grid; place-items: center;
    background: var(--color-primary-bg); color: var(--color-primary-fg);
    font-weight: var(--font-weight-semibold);
    overflow: hidden; text-indent: -999em;
  }

  /* ── Scroll reveal (the theme is the only owner of .is-revealed) ──── */
  [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    will-change: opacity, transform;
  }
  [data-reveal].is-revealed { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  }
  html:not([data-js]) [data-reveal] { opacity: 1; transform: none; }

  /* ════════════════════════════════════════════════════════════════════
     Koenig editor cards. {{content}} emits Ghost's own markup, not the
     design's, so every card needs styling here or a post written in the
     editor renders unstyled. The surrounding prose typography comes from
     the design's .prose — only the card chrome is defined below.
     ════════════════════════════════════════════════════════════════════ */

  .gh-content { --content-max: 720px; --content-accent: var(--ghost-accent-color, var(--color-accent-fallback)); }
  .gh-content > * { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
  .gh-content > .kg-width-wide { max-width: 1024px; }
  .gh-content > .kg-width-full { max-width: 100%; }

  .gh-content .kg-card { margin: 0 auto 1.5em; }
  .kg-card figcaption,
  .gh-content figcaption { margin-top: .6em; text-align: center; font-size: .85rem; opacity: .7; }
  .kg-width-wide img { width: 100%; }
  .kg-width-full img { width: 100%; border-radius: 0; }
  .kg-align-center { text-align: center; }
  .kg-align-left { float: left; margin-right: 1.5em; }

  .kg-image-card img { display: block; margin: 0 auto; border-radius: var(--radius-lg); }
  .kg-image-card.kg-card-hascaption { display: flex; flex-direction: column; align-items: center; }

  .kg-gallery-card { margin: 1.5em 0; }
  .kg-gallery-container { display: flex; flex-direction: column; max-width: 1024px; margin: 0 auto; }
  .kg-gallery-row { display: flex; flex-direction: row; justify-content: center; gap: .6em; }
  .kg-gallery-row:not(:first-of-type) { margin-top: .6em; }
  .kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }

  .kg-bookmark-card, .kg-bookmark-card * { box-sizing: border-box; }
  .kg-bookmark-container {
    display: flex; min-height: 148px; overflow: hidden;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface); text-decoration: none; color: inherit;
  }
  .kg-bookmark-content { flex: 1 1 auto; padding: 1.1em 1.3em; }
  .kg-bookmark-title { font-family: var(--font-display); font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }
  .kg-bookmark-description { margin-top: .4em; font-size: .9em; opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kg-bookmark-metadata { display: flex; align-items: center; margin-top: .8em; font-size: .85em; gap: .4em; }
  .kg-bookmark-thumbnail { position: relative; flex: 0 0 33%; min-height: 148px; }
  .kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .kg-bookmark-icon { width: 1.1em; height: 1.1em; }
  .kg-bookmark-author, .kg-bookmark-publisher { font-size: .85em; opacity: .75; }
  .kg-bookmark-publisher::before { content: '\00b7'; margin: 0 .4em; }

  .gh-content .kg-callout-card { display: flex; gap: .8em; padding: 1em 1.2em; border-radius: var(--radius-lg); background: var(--color-primary-bg); }
  .kg-callout-emoji { font-size: 1.2em; }
  .kg-callout-text { flex: 1 1 auto; }
  .kg-callout-text > :last-child { margin-bottom: 0; }
  .kg-callout-card-accent { background: var(--color-accent-500); color: var(--color-text-invert); }
  .kg-callout-card-grey { background: var(--color-primary-bg); }
  .kg-callout-card-white { background: var(--color-neutral-0); border: 1px solid var(--color-border); }
  .kg-callout-card-blue { background: #e8f2ff; color: #16304d; }
  .kg-callout-card-green { background: #e8f7ee; color: #16402a; }
  .kg-callout-card-yellow { background: #fdf5e2; color: #4a3708; }
  .kg-callout-card-red { background: #fdeceb; color: #51201c; }
  .kg-callout-card-pink { background: #fdecf5; color: #4d1733; }
  .kg-callout-card-purple { background: #f0ecfd; color: #2b1d52; }

  .kg-toggle-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1em 1.2em; }
  .kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; gap: .8em; cursor: pointer; }
  .kg-toggle-heading-text { font-family: var(--font-display); font-weight: var(--font-weight-semibold); }
  .kg-toggle-content { margin-top: .8em; }
  .kg-toggle-card-icon { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; line-height: 0; transition: transform .2s var(--ease-out); }
  .kg-toggle-card[data-kg-toggle-state='close'] .kg-toggle-content { display: none; }
  .kg-toggle-card[data-kg-toggle-state='open'] .kg-toggle-card-icon { transform: rotate(180deg); }

  .kg-button-card { display: flex; }
  .kg-button-card.kg-align-center { justify-content: center; }
  .kg-btn {
    display: inline-block; padding: .7em 1.4em; border-radius: 999px;
    font-weight: var(--font-weight-semibold); text-decoration: none;
    transition: opacity .2s var(--ease-out);
  }
  .kg-btn-accent { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-fg); }
  .kg-btn-outline { background: none; border: 1px solid currentColor; color: inherit; }
  .kg-btn:hover { opacity: .85; }

  .kg-header-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); }
  .kg-header-card-image { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
  .kg-header-card-content { position: relative; padding: 3em 2em; }
  .kg-header-card-text.kg-align-center { text-align: center; }
  .kg-header-card-header { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-weight-semibold); }
  .kg-header-card-subheader { margin-top: .5em; opacity: .85; }
  .kg-header-card-button {
    display: inline-block; margin-top: 1em; padding: .6em 1.4em; border-radius: 999px;
    font-weight: var(--font-weight-semibold); text-decoration: none;
    background: var(--color-neutral-0); color: var(--color-text-strong);
  }
  .kg-header-card-button.kg-style-accent { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-fg); }

  .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
  .kg-embed-card iframe { max-width: 100%; }

  .kg-audio-card, .kg-video-card, .kg-file-card {
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
  }
  .kg-audio-card { display: flex; align-items: center; gap: 1em; padding: .8em; }
  .kg-audio-thumbnail { flex: 0 0 auto; width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-md); }
  .kg-audio-player-container { flex: 1 1 auto; min-width: 0; }
  .kg-audio-title { font-weight: var(--font-weight-semibold); margin-bottom: .4em; }
  .kg-audio-player { display: flex; align-items: center; gap: .6em; font-size: .85em; }
  .kg-audio-play-icon, .kg-audio-pause-icon { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; line-height: 0; }
  .kg-audio-current-time, .kg-audio-duration { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: .7; }
  .kg-audio-seek-slider { flex: 1 1 auto; min-width: 0; }
  .kg-audio-seek-slider input[type='range'] { width: 100%; }

  .kg-video-container { position: relative; }
  .kg-video-container video { display: block; width: 100%; height: auto; }
  .kg-video-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / .2); }
  .kg-video-large-play-icon { padding: 0; border: 0; background: none; cursor: pointer; color: #fff; line-height: 0; }
  .kg-video-player-container { position: absolute; left: 0; right: 0; bottom: 0; }
  .kg-video-player { display: flex; align-items: center; gap: .6em; padding: .6em; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .6)); }
  .kg-video-play-icon, .kg-video-pause-icon { padding: 0; border: 0; background: none; cursor: pointer; color: inherit; line-height: 0; }
  .kg-video-current-time, .kg-video-time { font-variant-numeric: tabular-nums; font-size: .85em; }
  .kg-video-seek-slider { flex: 1 1 auto; min-width: 0; }

  .kg-file-card-container { display: flex; justify-content: space-between; align-items: center; padding: .8em 1.2em; }
  .kg-file-card-contents { min-width: 0; }
  .kg-file-card-title { font-weight: var(--font-weight-semibold); }
  .kg-file-card-caption { font-size: .9em; opacity: .75; }
  .kg-file-card-metadata { display: flex; gap: .5em; font-size: .8em; opacity: .65; margin-top: .3em; }
  .kg-file-card-filesize::before { content: '\00b7'; margin-right: .5em; }
  .kg-file-card-icon { flex: 0 0 auto; margin-left: 1em; line-height: 0; }

  .kg-product-card-container { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.2em; }
  .kg-product-card-image { display: block; width: 100%; height: auto; border-radius: var(--radius-md); margin-bottom: .9em; }
  .kg-product-card-title-container { display: flex; justify-content: space-between; align-items: center; gap: .8em; }
  .kg-product-card-title { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-semibold); }
  .kg-product-card-rating { display: flex; gap: .15em; }
  .kg-product-card-rating-star { opacity: .25; line-height: 0; }
  .kg-product-card-rating-active { opacity: 1; color: var(--color-accent-500); }
  .kg-product-card-description { margin: .6em 0 1em; }
  .kg-product-card-description > :last-child { margin-bottom: 0; }
  .kg-product-card-button {
    display: inline-block; padding: .55em 1.2em; border-radius: 999px;
    font-weight: var(--font-weight-semibold); text-decoration: none;
    background: var(--color-btn-primary-bg); color: var(--color-btn-primary-fg);
  }

  .kg-blockquote-alt { font-size: 1.4em; font-style: italic; text-align: center; padding: .5em 1.5em; border: 0; }

  .kg-signup-card { border-radius: var(--radius-xl); padding: 2.4em 2em; background: var(--color-primary-bg); }
  .kg-signup-card.kg-style-dark { background: var(--color-primary-950); color: var(--color-neutral-0); }
  .kg-signup-card.kg-style-accent { background: var(--color-accent-500); color: var(--color-text-invert); }
  .kg-signup-card-content { max-width: 640px; margin: 0 auto; }
  .kg-signup-card-text.kg-align-center { text-align: center; }
  .kg-signup-card-heading { margin: 0 0 .3em; font-family: var(--font-display); font-size: 1.8em; line-height: var(--leading-tight); }
  .kg-signup-card-subheading { margin: 0 0 1.2em; opacity: .8; }
  .kg-signup-card-form { display: flex; flex-direction: column; gap: .6em; }
  .kg-signup-card-fields { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; }
  .kg-signup-card-input {
    flex: 1 1 240px; min-width: 0; padding: .7em 1em; font: inherit;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-neutral-0); color: var(--color-text-strong);
  }
  .kg-signup-card-button {
    padding: .7em 1.4em; font: inherit; font-weight: var(--font-weight-semibold); cursor: pointer;
    border: 0; border-radius: 999px;
    background: var(--color-btn-primary-bg); color: var(--color-btn-primary-fg);
  }
  .kg-signup-card-success, .kg-signup-card-error { margin-top: .6em; font-size: .9em; }
  .kg-signup-card-error { color: var(--color-danger); }
  .kg-signup-card-success { display: none; }
  .kg-signup-card[data-members-state='success'] .kg-signup-card-success { display: block; }

  .kg-cta-card { border-radius: var(--radius-xl); padding: 1.8em; margin: 1.5em 0; }
  .kg-cta-content { display: flex; gap: 1.2em; align-items: center; }
  .kg-cta-has-img .kg-cta-image-container { flex: 0 0 auto; }
  .kg-cta-image-container img { display: block; width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius-md); }
  .kg-cta-content-inner { flex: 1 1 auto; }
  .kg-cta-sponsor-label { font-size: .75em; letter-spacing: var(--tracking-widest); text-transform: uppercase; opacity: .65; margin-bottom: .4em; }
  .kg-cta-text { margin-bottom: .9em; }
  .kg-cta-text > :last-child { margin-bottom: 0; }
  .kg-cta-button {
    display: inline-block; padding: .6em 1.3em; border-radius: 999px;
    font-weight: var(--font-weight-semibold); text-decoration: none;
    background: var(--color-btn-primary-bg); color: var(--color-btn-primary-fg);
  }
  .kg-cta-bg-none { padding-left: 0; padding-right: 0; background: none; }
  .kg-cta-bg-grey { background: var(--color-primary-bg); }
  .kg-cta-bg-white { background: var(--color-neutral-0); border: 1px solid var(--color-border); }
  .kg-cta-bg-blue { background: #e8f2ff; color: #16304d; }
  .kg-cta-bg-green { background: #e8f7ee; color: #16402a; }
  .kg-cta-bg-yellow { background: #fdf5e2; color: #4a3708; }
  .kg-cta-bg-red { background: #fdeceb; color: #51201c; }
  .kg-cta-bg-pink { background: #fdecf5; color: #4d1733; }
  .kg-cta-bg-purple { background: #f0ecfd; color: #2b1d52; }
  .kg-cta-bg-accent { background: var(--color-accent-500); color: var(--color-text-invert); }
  .kg-cta-bg-accent .kg-cta-button { background: var(--color-neutral-0); color: var(--color-accent-700); }
  @media (max-width: 640px) { .kg-cta-content { flex-direction: column; align-items: flex-start; } }

  /* Dark scheme for every tinted card above — the design flips its tokens
     per scheme, so the cards that use them follow for free; these are the
     ones that carry a fixed light tint. */
  :root[data-theme="dark"] .kg-cta-bg-blue,
  :root[data-theme="dark"] .kg-cta-bg-green,
  :root[data-theme="dark"] .kg-cta-bg-yellow,
  :root[data-theme="dark"] .kg-cta-bg-red,
  :root[data-theme="dark"] .kg-cta-bg-pink,
  :root[data-theme="dark"] .kg-cta-bg-purple,
  :root[data-theme="dark"] .gh-content .kg-callout-card-blue,
  :root[data-theme="dark"] .gh-content .kg-callout-card-green,
  :root[data-theme="dark"] .gh-content .kg-callout-card-yellow,
  :root[data-theme="dark"] .gh-content .kg-callout-card-red,
  :root[data-theme="dark"] .gh-content .kg-callout-card-pink,
  :root[data-theme="dark"] .gh-content .kg-callout-card-purple {
    background: rgb(255 255 255 / .08); color: inherit;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .kg-cta-bg-blue,
    :root:not([data-theme="light"]) .kg-cta-bg-green,
    :root:not([data-theme="light"]) .kg-cta-bg-yellow,
    :root:not([data-theme="light"]) .kg-cta-bg-red,
    :root:not([data-theme="light"]) .kg-cta-bg-pink,
    :root:not([data-theme="light"]) .kg-cta-bg-purple,
    :root:not([data-theme="light"]) .gh-content .kg-callout-card-blue,
    :root:not([data-theme="light"]) .gh-content .kg-callout-card-green,
    :root:not([data-theme="light"]) .gh-content .kg-callout-card-yellow,
    :root:not([data-theme="light"]) .gh-content .kg-callout-card-red,
    :root:not([data-theme="light"]) .gh-content .kg-callout-card-pink,
    :root:not([data-theme="light"]) .gh-content .kg-callout-card-purple {
      background: rgb(255 255 255 / .08); color: inherit;
    }
  }

  /* Ghost comments */
  .post-comments iframe { width: 100%; border: 0; }
}