/*
 * srefly design system
 *
 * Runtime source of truth for visual foundations. This file is loaded after
 * the legacy layout stylesheet so current UI resolves to one token contract.
 */

:root {
  /* Primitive: color */
  --primitive-white: #ffffff;
  --primitive-neutral-50: #f5f6f8;
  --primitive-neutral-100: #edf0f6;
  --primitive-neutral-150: #e9edf5;
  --primitive-neutral-200: #e1e4eb;
  --primitive-neutral-300: #d7dce5;
  --primitive-neutral-500: #666b76;
  --primitive-neutral-600: #555c69;
  --primitive-neutral-800: #343746;
  --primitive-neutral-900: #161820;
  --primitive-blue-50: #edf1ff;
  --primitive-blue-500: #315cff;
  --primitive-blue-600: #244bdc;
  --primitive-red-50: #fff1f2;
  --primitive-red-600: #d92d3a;
  --primitive-amber-50: #fff8e6;
  --primitive-amber-700: #8a5a00;
  --primitive-green-50: #ecfdf3;
  --primitive-green-700: #087443;

  /* Primitive: typography */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Noto Sans TC", "Segoe UI", sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-size-1: 0.75rem;   /* 12px */
  --font-size-2: 0.8125rem; /* 13px */
  --font-size-3: 0.875rem;  /* 14px */
  --font-size-4: 1rem;      /* 16px */
  --font-size-5: 1.125rem;  /* 18px */
  --font-size-6: 1.25rem;   /* 20px */
  --font-size-7: 1.5rem;    /* 24px */
  --font-size-8: 2rem;      /* 32px */
  --font-size-9: 2.75rem;   /* 44px */
  --font-size-10: 3.5rem;   /* 56px */
  --font-size-heading-xs: 1.375rem; /* 22px compact panel */
  --font-size-heading-sm: 1.75rem; /* 28px compact page */
  --font-size-heading-md: 2.25rem; /* 36px member page */
  --font-size-display-sm: 2.5rem; /* 40px display symbol */
  --font-size-brand: 1.875rem; /* 30px wordmark */
  --brand-mark-size: 1.75rem; /* 28px, homepage standard */
  --brand-mark-color: var(--color-action-primary);
  --line-height-tight: 1.2;
  --line-height-heading: 1.25;
  --line-height-ui: 1.4;
  --line-height-body: 1.7;
  --line-height-reading: 1.9;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 650;
  --font-weight-bold: 750;

  /* Primitive: spacing; 4px foundation with an 8px layout rhythm */
  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-1-5: 0.375rem; /* 6px */
  --space-2: 0.5rem;     /* 8px */
  --space-2-5: 0.625rem; /* 10px */
  --space-3: 0.75rem;    /* 12px */
  --space-3-5: 0.875rem; /* 14px */
  --space-4: 1rem;       /* 16px */
  --space-4-5: 1.125rem; /* 18px */
  --space-5: 1.25rem;    /* 20px */
  --space-5-5: 1.375rem; /* 22px */
  --space-6: 1.5rem;     /* 24px */
  --space-7: 1.75rem;    /* 28px */
  --space-8: 2rem;       /* 32px */
  --space-9: 2.25rem;    /* 36px */
  --space-10: 2.5rem;    /* 40px */
  --space-11: 2.75rem;  /* 44px panel inset */
  --space-18: 4.5rem;   /* 72px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Primitive: shape */
  --radius-xs: 0.25rem;   /* 4px */
  --radius-sm: 0.5rem;    /* 8px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.125rem;  /* 18px */
  --radius-2xl: 1.375rem; /* 22px */
  --radius-3xl: 1.5rem;   /* 24px */
  --radius-4xl: 1.75rem;  /* 28px */
  --radius-full: 9999px;

  /* Primitive: elevation, motion, and stacking */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgb(22 24 32 / 0.04);
  --shadow-2: 0 8px 24px rgb(22 24 32 / 0.08);
  --shadow-3: 0 16px 44px rgb(22 34 68 / 0.11);
  --shadow-4: 0 20px 90px rgb(22 24 32 / 0.14);
  --duration-fast: 120ms;
  --duration-default: 180ms;
  --duration-overlay: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --z-base: 0;
  --z-sticky: 10;
  --z-overlay: 40;
  --z-toast: 50;

  /* Semantic: color */
  --color-bg-canvas: var(--primitive-neutral-50);
  --color-bg-surface: var(--primitive-white);
  --color-bg-subtle: var(--primitive-neutral-100);
  --color-bg-raised: rgb(255 255 255 / 0.93);
  --color-bg-inverse: var(--primitive-neutral-900);
  --color-bg-overlay: rgb(22 24 32 / 0.52);
  --color-text-primary: var(--primitive-neutral-900);
  --color-text-secondary: var(--primitive-neutral-500);
  --color-text-tertiary: var(--primitive-neutral-600);
  --color-text-inverse: var(--primitive-white);
  --color-text-disabled: rgb(102 107 118 / 0.58);
  --color-border-subtle: var(--primitive-neutral-200);
  --color-border-default: var(--primitive-neutral-300);
  --color-border-strong: var(--primitive-neutral-900);
  --color-focus-ring: var(--primitive-blue-500);
  --color-action-primary: var(--primitive-blue-500);
  --color-action-primary-hover: var(--primitive-blue-600);
  --color-action-soft: var(--primitive-blue-50);
  --color-action-secondary: var(--primitive-neutral-900);
  --color-action-secondary-hover: var(--primitive-neutral-800);
  --color-status-success-bg: var(--primitive-green-50);
  --color-status-success-text: var(--primitive-green-700);
  --color-status-warning-bg: var(--primitive-amber-50);
  --color-status-warning-text: var(--primitive-amber-700);
  --color-status-danger-bg: var(--primitive-red-50);
  --color-status-danger-text: var(--primitive-red-600);
  /* Compatibility alias for older route styles. */
  --color-status-danger: var(--color-status-danger-text);
  --color-status-info-bg: var(--color-action-soft);
  --color-status-info-text: var(--primitive-blue-600);
  --color-border-danger: var(--primitive-red-600);
  --color-border-action: var(--primitive-blue-500);
  --color-control-disabled-bg: var(--color-bg-subtle);
  --color-control-readonly-bg: var(--color-bg-canvas);
  --color-inverse-border: rgb(255 255 255 / 0.32);
  --color-inverse-grid: rgb(255 255 255 / 0.5);
  --color-skeleton: var(--primitive-neutral-150);
  --skeleton-shimmer: linear-gradient(105deg, transparent 25%, rgb(255 255 255 / .53) 45%, transparent 65%);
  --shadow-avatar-mask: 0 0 0 100px rgb(22 24 32 / 0.5);
  --color-media-scrim: linear-gradient(transparent, rgb(0 0 0 / .82) 42%);
  --color-media-text: rgb(255 255 255 / .86);
  --color-media-control: rgb(255 255 255 / .13);
  --color-media-control-hover: rgb(255 255 255 / .2);
  --color-media-border: rgb(255 255 255 / .4);
  --color-surface-glass: rgb(255 255 255 / .74);
  --color-surface-opaque: rgb(255 255 255 / .97);
  --color-inverse-hover: rgb(255 255 255 / .1);
  --color-swatch-border: #00000014;
  --shadow-header: inset 0 1px 0 rgb(255 255 255 / .88), 0 6px 24px rgb(22 24 32 / .05);

  /* Semantic: text roles; preserve the approved expressive page scales. */
  --text-caption: var(--font-size-1);
  --text-label: var(--font-size-3);
  --text-body: var(--font-size-4);
  --text-body-small: var(--font-size-3);
  --text-title: var(--font-size-7);
  --text-page: var(--font-size-9);
  --text-code: var(--font-size-2);
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --focus-ring: var(--focus-ring-width) solid var(--color-focus-ring);
  --opacity-disabled: 0.56;
  --z-menu: 110;
  --z-focus: 120;
  --z-feedback: 150;
  --duration-skeleton: 1200ms;

  /* Semantic: rhythm and layout */
  --space-inline: var(--space-2);
  --space-item: var(--space-3);
  --space-group: var(--space-6);
  --space-section: var(--space-12);
  --layout-gutter: var(--space-12);
  --layout-max-width: 103.75rem; /* 1660px */
  --layout-gallery-gap-x: var(--space-6);
  --layout-gallery-gap-y: var(--space-7);
  --touch-target-min: 2.75rem; /* 44px */

  /* Component: buttons and controls */
  --button-height-sm: 2.5rem; /* 40px */
  --button-height-md: var(--touch-target-min);
  --button-height-comfortable: 3rem; /* Authentication's full-width actions */
  --button-height-lg: 3.375rem; /* 54px */
  --button-padding-sm: var(--space-3-5);
  --button-padding-md: var(--space-5);
  --button-padding-lg: var(--space-6);
  --button-gap: var(--space-2);
  --nav-button-padding-x: var(--space-6);
  --toolbar-control-padding-x: var(--space-5);
  --select-arrow-inset: var(--space-4);
  --select-arrow-size: var(--space-4);
  --button-radius: var(--radius-xl);
  --button-radius-compact: var(--radius-md);
  --button-radius-pill: var(--radius-full);
  --button-font-size: var(--font-size-3);
  --button-font-weight: var(--font-weight-medium);
  --control-border: 1px solid var(--color-border-default);
  --icon-button-size: var(--touch-target-min);
  --icon-size-sm: 1.125rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --input-height: 3.375rem;
  --input-radius: var(--radius-2xl);
  --input-height-compact: var(--touch-target-min);
  --input-radius-compact: var(--radius-md);
  --input-padding-x: var(--space-4);
  --input-padding-y: var(--space-2-5);
  --input-text-size: var(--font-size-4);
  --menu-radius: var(--radius-md);
  --menu-item-radius: var(--radius-sm);
  --menu-padding: var(--space-2);
  --menu-row-height: var(--touch-target-min);
  --menu-shadow: var(--shadow-2);
  --dialog-width-sm: 32.5rem;
  --dialog-width-md: 43.75rem;
  --dialog-width-editor: 60rem;
  --dialog-padding: var(--space-6);
  --dialog-viewport-gap: var(--space-8);
  --avatar-size-sm: 2rem;
  --avatar-size-profile: 4.5rem;
  --icon-stroke-width: 1.8;
  --social-icon-size: 1.75rem;
  --button-primary-bg: var(--color-action-primary);
  --button-primary-hover-bg: var(--color-action-primary-hover);
  --button-primary-text: var(--color-text-inverse);
  --button-secondary-bg: var(--color-bg-surface);
  --button-secondary-hover-bg: var(--color-bg-subtle);
  --nav-idle-text: var(--color-text-secondary);
  --nav-active-text: var(--color-action-primary);
  --nav-active-bg: var(--color-action-soft);
  --tag-height: 1.75rem;
  --tag-radius: var(--radius-full);
  --tag-padding-x: var(--space-2);

  /* Component: locale selector and compact menus */
  --language-menu-width: 11rem; /* Full language names in every locale */
  --language-trigger-width: 6rem; /* 96px / 192px on a 2x screenshot */
  --language-trigger-height: var(--button-height-md);
  --language-trigger-gap: var(--space-3);
  --language-trigger-padding-start: var(--space-5);
  --language-trigger-padding-end: var(--space-3-5);
  --language-trigger-icon-size: var(--space-4);
  --language-menu-offset: var(--space-1-5);
  --language-menu-padding: var(--space-1);
  --language-menu-radius: var(--radius-md);
  --language-option-radius: var(--radius-sm);

  /* Component: surfaces */
  --header-radius: var(--radius-3xl);
  --media-radius: var(--radius-2xl);
  --popover-radius: var(--radius-2xl);
  --dialog-radius: var(--radius-4xl);
  --toast-radius: var(--radius-lg);
  --surface-border: 1px solid var(--color-border-subtle);

  /* Backward-compatible aliases used by the original stylesheet. */
  --paper: var(--color-bg-canvas);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --accent: var(--color-action-primary);
  --line: var(--color-border-subtle);
  --sans: var(--font-family-sans);
  --serif: var(--font-family-sans);
}

/* Shared semantic states. Do not apply text-field geometry to file/range inputs. */
:root :is(input,textarea,select)[aria-invalid="true"] {
  border-color: var(--color-border-danger);
  outline-color: var(--color-border-danger);
}
:root .auth-input:has(input[aria-invalid="true"]) { border-color: var(--color-border-danger); }
:root :is(input,textarea)[readonly] { background-color: var(--color-control-readonly-bg); }
:root :is(input,textarea,select):disabled { opacity: var(--opacity-disabled); cursor: not-allowed; background-color: var(--color-control-disabled-bg); }
:root :is(button,a)[aria-busy="true"] { cursor: progress; }
:root :is(button,a)[aria-disabled="true"] { cursor: not-allowed; }
:root :is(input[type="checkbox"],input[type="radio"],input[type="range"]) { accent-color: var(--color-action-primary); }
:root :is(input,textarea)::placeholder { color: var(--color-text-secondary); opacity: 1; }
:root .skeleton-line { background: var(--color-skeleton); border-radius: var(--radius-sm); }
:root .skeleton-line::after { animation-duration: var(--duration-skeleton); }
:root .preview-toast:not(:empty),:root .detail-toast:not(:empty) { z-index: var(--z-feedback); border-radius: var(--toast-radius); box-shadow: var(--shadow-2); }
@media (forced-colors: active) {
  :root :is(button,a,input,textarea,select,summary):focus-visible { outline: var(--focus-ring-width) solid Highlight; }
  :root :is(input,textarea,select)[aria-invalid="true"] { outline: 2px dashed CanvasText; }
  :root .sort select { appearance: auto; background-image: none; }
}

/* Foundation */
body {
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  font-family: var(--font-family-sans);
  line-height: var(--line-height-body);
}

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

button:disabled,
[aria-disabled="true"] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.56;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Shared control contract */
.nav-item,
.outline-button,
.solid-button,
.text-button,
.category,
.compare-toggle,
.icon-button,
.sort select,
.language-switch a,
#recent-searches button,
.discovery-terms button,
.empty-suggestions button,
.tags button {
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--line-height-ui);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-default) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.nav-item:active:not(:disabled),
.outline-button:active:not(:disabled),
.solid-button:active:not(:disabled),
.text-button:active:not(:disabled),
.category:active:not(:disabled),
.compare-toggle:active:not(:disabled),
.icon-button:active:not(:disabled) {
  transform: translateY(1px);
}

.outline-button,
.solid-button,
.text-button,
.category,
.sort select {
  min-height: var(--button-height-md);
}

.outline-button {
  height: var(--button-height-lg);
  min-height: var(--button-height-lg);
  gap: var(--button-gap);
  padding-inline: var(--button-padding-lg);
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--button-radius);
}

.outline-button:hover:not(:disabled) {
  color: var(--color-action-primary);
  background: var(--color-action-soft);
  border-color: var(--color-action-primary);
}

.solid-button {
  height: var(--button-height-md);
  gap: var(--button-gap);
  padding-inline: var(--button-padding-md);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border-radius: var(--button-radius-compact);
}

.text-button {
  padding-inline: var(--button-padding-sm);
  border-radius: var(--button-radius-compact);
}

.text-button:hover:not(:disabled) {
  color: var(--color-text-inverse);
  background: var(--color-inverse-hover);
}

.icon-button {
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  border-radius: var(--radius-full);
}

.masthead > nav:not(.language-switch) .nav-item,
.catalog-home .masthead > nav:not(.language-switch) .nav-item {
  padding-inline: var(--nav-button-padding-x);
  flex-shrink: 0;
  white-space: nowrap;
}

.masthead > nav:not(.language-switch) .nav-item:not(.active):not([aria-current="page"]) {
  color: var(--nav-idle-text);
  background: transparent;
}
.masthead > nav:not(.language-switch) .nav-item:is(.active,[aria-current="page"]),
.masthead > nav:not(.language-switch) .nav-item:hover:not(:disabled) {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
}

.nav-item {
  height: var(--button-height-md);
  min-height: var(--button-height-md);
  padding-inline: var(--button-padding-lg);
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  border-radius: var(--button-radius-pill);
}

.nav-item:hover:not(:disabled) {
  color: var(--color-action-primary);
  background: var(--color-action-soft);
}

.nav-item.active,
.nav-item[aria-current="page"] {
  color: var(--color-text-inverse);
  background: var(--color-action-primary);
}

.nav-item.active:hover,
.nav-item[aria-current="page"]:hover {
  color: var(--color-text-inverse);
  background: var(--color-action-primary-hover);
}

/* Page shell and discovery rhythm */
.masthead {
  margin: var(--space-3-5) var(--space-4-5) 0;
  padding-inline: var(--space-8);
  gap: var(--space-group);
  background: var(--color-bg-raised);
  border: var(--surface-border);
  border-radius: var(--header-radius);
  box-shadow: var(--shadow-1);
}

main {
  width: 100%;
  max-width: var(--layout-max-width);
  padding-inline: var(--layout-gutter);
}

.discovery-head {
  padding-block: var(--space-section) var(--space-9);
}

.discovery-tools {
  padding-left: var(--space-1);
}

.search-row {
  gap: var(--space-group);
}

.search-box {
  height: var(--input-height);
  min-height: var(--input-height);
  gap: var(--space-3-5);
  padding-inline: var(--space-5);
  background: var(--color-bg-surface);
  border: var(--surface-border);
  border-radius: var(--input-radius);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-default) var(--ease-standard);
}

.search-box:hover {
  border-color: var(--color-border-default);
}

.search-box:focus-within {
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 14%, transparent);
}

.filter-row {
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.categories {
  gap: var(--space-item);
}

.category {
  height: var(--button-height-md);
  padding-inline: var(--space-4-5);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: var(--surface-border);
  border-radius: var(--button-radius-pill);
}

.category:hover:not(:disabled) {
  color: var(--color-action-primary);
  background: var(--color-action-soft);
  border-color: var(--color-action-primary);
}

.category.active {
  color: var(--color-text-inverse);
  background: var(--color-action-secondary);
  border-color: var(--color-action-secondary);
}

.category.active:hover {
  color: var(--color-text-inverse);
  background: var(--color-action-secondary-hover);
  border-color: var(--color-action-secondary-hover);
}

.sort select {
  height: var(--button-height-md);
  padding-inline: var(--space-5);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: var(--surface-border);
  border-radius: var(--button-radius);
}

.gallery {
  column-gap: var(--layout-gallery-gap-x);
  row-gap: var(--layout-gallery-gap-y);
}

.image-wrap,
.image-button,
.artwork {
  border-radius: var(--media-radius);
}

.image-button .artwork {
  transition: transform var(--duration-overlay) var(--ease-standard);
}

.favorite-button,
.compare-toggle {
  height: var(--button-height-md);
  color: var(--color-text-primary);
  background: var(--color-bg-raised);
  box-shadow: var(--shadow-1);
}

.favorite-button:hover:not(:disabled),
.compare-toggle:hover:not(:disabled) {
  color: var(--color-action-primary);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-2);
}

.compare-toggle {
  min-height: var(--button-height-md);
  gap: var(--space-1-5);
  padding-inline: var(--space-3);
  border-radius: var(--button-radius-compact);
}

.compare-toggle.selected,
.compare-toggle.selected:hover {
  color: var(--color-text-inverse);
  background: var(--color-action-primary);
}

.favorite-button.selected {
  color: var(--color-action-primary);
}

/* Hover-capable pointers reveal card actions; touch keeps a visible target. */
@media (hover: hover) and (pointer: fine) {
  .gallery-item .favorite-button {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    pointer-events: none;
    transition:
      opacity var(--duration-default) var(--ease-standard),
      transform var(--duration-default) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-default) var(--ease-standard);
  }

  .gallery-item:hover .favorite-button,
  .gallery-item:has(:focus-visible) .favorite-button {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
}

.item-body {
  padding-top: var(--space-3-5);
}

.item-heading {
  gap: var(--space-2-5);
}

.draft-status {
  gap: var(--space-1-5);
  color: var(--color-text-secondary);
}

.tags {
  gap: var(--space-1-5);
  margin-top: var(--space-2);
}

.tags span,
.tags button {
  min-height: var(--tag-height);
  padding: var(--space-1) var(--tag-padding-x);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--tag-radius);
}

.tags button:hover {
  color: var(--color-action-primary);
  background: var(--color-action-soft);
  border-color: var(--color-action-primary);
}

/* Raised and feedback surfaces */
.search-panel {
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: var(--surface-border);
  border-radius: var(--popover-radius);
  box-shadow: var(--shadow-3);
  z-index: var(--z-sticky);
}

.search-panel li {
  gap: var(--space-4);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-md);
}

.search-panel li:hover,
.search-panel li[aria-selected="true"] {
  color: var(--color-action-primary);
  background: var(--color-action-soft);
}

#recent-searches button,
.discovery-terms button,
.empty-suggestions button {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-full);
}

.related-card {
  gap: var(--space-3-5);
  padding: var(--space-3);
  background: var(--color-bg-surface);
  border: var(--surface-border);
  border-radius: var(--radius-xl);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-default) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.related-card:hover {
  border-color: var(--color-action-primary);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.compare-bar {
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-4-5);
  color: var(--color-text-inverse);
  background: var(--color-bg-inverse);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-3);
  z-index: var(--z-sticky);
}

.toast {
  color: var(--color-text-inverse);
  background: var(--color-bg-inverse);
  border-radius: var(--toast-radius);
  box-shadow: var(--shadow-3);
  z-index: var(--z-toast);
}

dialog {
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  border: var(--surface-border);
  border-radius: var(--dialog-radius);
  box-shadow: var(--shadow-4);
}

dialog::backdrop {
  background: var(--color-bg-overlay);
}

.dialog-top {
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
  background: var(--color-bg-canvas);
  border-color: var(--color-border-subtle);
}

.dialog-top .icon-button,
.prompt-section pre,
.verification,
.help-note {
  background: var(--primitive-neutral-150);
}

.prompt-section pre,
.verification {
  border-radius: var(--radius-lg);
}

.help-note {
  border-radius: var(--radius-2xl);
}

@media (max-width: 1000px) {
  :root {
    --layout-gutter: var(--space-8);
    --space-section: var(--space-9);
    --layout-gallery-gap-x: var(--space-5);
    --layout-gallery-gap-y: var(--space-6);
  }
}

@media (max-width: 700px) {
  :root {
    --layout-gutter: var(--space-5);
    --space-section: var(--space-8);
    --layout-gallery-gap-x: var(--space-3);
    --layout-gallery-gap-y: var(--space-6);
    --input-height: 3.125rem; /* 50px */
    --input-radius: var(--radius-xl);
    --media-radius: var(--radius-xl);
    --dialog-radius: var(--radius-2xl);
    --popover-radius: var(--radius-xl);
  }

  .masthead {
    margin: var(--space-2-5) var(--space-3) 0;
    padding: var(--space-3-5) var(--space-4);
    gap: var(--space-3);
    border-radius: var(--radius-2xl);
  }

  .discovery-head {
    padding-block: var(--space-section) var(--space-6);
  }

  .discovery-tools {
    margin-top: var(--space-5-5);
  }

  .search-row {
    gap: var(--space-2-5);
  }

  .search-row > .outline-button {
    height: var(--button-height-md);
    min-height: var(--button-height-md);
  }

  .filter-row {
    margin-bottom: var(--space-4-5);
  }

  .categories {
    gap: var(--space-2);
  }

  .category {
    height: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding-inline: var(--space-3-5);
  }

  .sort select {
    height: var(--button-height-sm);
    min-height: var(--button-height-sm);
    padding-inline: var(--space-3-5);
  }

  .item-body {
    padding-top: var(--space-2-5);
  }

  .item-heading {
    gap: var(--space-1);
  }

  .tags {
    gap: var(--space-1);
    margin-top: var(--space-2);
  }

  .compare-bar {
    padding: var(--space-2-5) var(--space-3);
    border-radius: var(--radius-xl);
  }
}

/* Compact locale menu and a single-column detail reading flow. */
.style-introduction { margin-block: var(--space-7); }
.style-introduction > label { font-size: var(--font-size-5); font-weight: var(--font-weight-semibold); }
.style-introduction textarea { display: block; width: 100%; resize: vertical; min-height: 8.75rem; padding: var(--space-4); border: var(--control-border); border-radius: var(--radius-lg); background: var(--color-bg-surface); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-4); line-height: var(--line-height-body); }
.introduction-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }
.masthead {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) auto auto;
}

.masthead > nav:not(.language-switch) {
  width: auto;
  order: initial;
  justify-content: center;
}

.masthead .language-switch {
  width: auto;
  padding: 0;
  background: transparent;
  justify-self: end;
  margin-left: 0;
  order: initial;
}

.language-dropdown { position: relative; border: 0; margin: 0; padding: 0; }
.language-switch .language-dropdown > :is(.language-trigger, summary) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--language-trigger-gap);
  list-style: none;
  width: var(--language-trigger-width);
  min-width: var(--language-trigger-width);
  height: var(--language-trigger-height);
  min-height: var(--language-trigger-height);
  padding: 0 var(--language-trigger-padding-end) 0 var(--language-trigger-padding-start);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: var(--control-border);
  border-radius: var(--button-radius-pill);
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-default) var(--ease-standard);
}
.language-switch :is(.language-trigger, summary)::-webkit-details-marker { display: none; }
.language-switch :is(.language-trigger, summary)::marker { content: ""; }
.language-switch :is(.language-trigger, summary) > svg,
.member-entry .member-menu > summary > .member-chevron { display: block; align-self: center; width: var(--language-trigger-icon-size); height: var(--language-trigger-icon-size); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke-width); stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-default) var(--ease-standard); }
.language-switch .language-dropdown[open] > :is(.language-trigger, summary) > svg,
.member-entry .member-menu[open] > summary > .member-chevron { transform: rotate(180deg); }
.language-switch :is(.language-trigger, summary):hover { border-color: var(--color-border-strong); }
.language-switch .language-dropdown[open] > :is(.language-trigger, summary) { border-color: var(--color-action-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 12%, transparent); }
.language-switch .language-dropdown > :is(.language-menu, .language-options) { position: absolute; right: 0; top: calc(100% + var(--language-menu-offset)); width: var(--language-menu-width); min-width: var(--language-menu-width); padding: var(--language-menu-padding); border: var(--control-border); border-radius: var(--language-menu-radius); background: var(--color-bg-surface); box-shadow: var(--shadow-2); z-index: var(--z-overlay); }
.language-switch :is(.language-menu, .language-options) a { min-height: var(--touch-target-min); padding: 0 var(--space-2-5) 0 var(--space-4); display: flex; align-items: center; justify-content: space-between; border-radius: var(--language-option-radius); font-size: var(--font-size-3); }
.language-switch :is(.language-menu, .language-options) a > svg { width: var(--language-trigger-icon-size); height: var(--language-trigger-icon-size); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke-width); }
.language-switch :is(.language-menu, .language-options) a[aria-current] { background: var(--color-action-soft); color: var(--color-action-primary); }
.language-switch :is(.language-menu, .language-options) a:hover { background: var(--color-bg-canvas); }

.detail-layout,
.standalone-detail {
  display: block;
  width: min(100%, 52rem);
  margin-inline: auto;
}

.detail-media .artwork {
  position: static;
}

.detail-copy {
  margin-top: var(--space-6);
}

.standalone-detail > div + div {
  margin-top: var(--space-6);
}

.standalone-detail .artwork {
  width: 100%;
  max-width: none;
}

.related-detail h3,
.recommendations h2 {
  font-size: var(--font-size-6);
}

.related-detail .related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .related-card {
    flex-direction: row;
    align-items: center;
  }

  .related-card .artwork {
    width: 96px;
    flex: 0 0 4.75rem;
  }
}

@media (max-width: 700px) {
  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .masthead .wordmark {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .masthead > nav:not(.language-switch) {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    order: initial;
  }

  .masthead .language-switch {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    order: initial;
  }

  .language-switch {
    --language-trigger-width: 4.75rem;
  }

  .language-switch .language-dropdown > :is(.language-trigger, summary) {
    min-width: 0;
    gap: var(--space-1);
    min-height: var(--touch-target-min);
    padding-inline: var(--space-4) var(--space-3);
    font-size: var(--font-size-2);
  }
  .language-switch :is(.language-trigger, summary) > svg,
  .member-entry .member-menu > summary > .member-chevron { width: var(--space-3); height: var(--space-3); }

  .detail-layout,
  .standalone-detail {
    width: 100%;
  }

  .related-detail .related-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Editorial facets reuse the existing catalogue metadata. */
.category-discovery { margin-bottom: var(--space-6); }
.category-discovery-heading, .facet-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.category-discovery-heading h2, .facet-heading h2 { margin: 0; font-size: var(--font-size-4); font-weight: var(--font-weight-semibold); }
.category-discovery-heading p, .facet-heading p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-1); }
.category-covers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.category-cover { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); text-align: left; min-width: 0; }
.category-cover:hover, .category-cover[aria-pressed=true] { border-color: var(--color-action-primary); background: var(--color-action-soft); }
.category-cover-art { width: 76px; flex: 0 0 76px; }
.category-cover-art .artwork { border-radius: var(--radius-md); }
.category-cover-copy { min-width: 0; }
.category-cover strong { display: block; font-size: var(--font-size-3); line-height: var(--line-height-ui); overflow-wrap: anywhere; }
.category-cover small { display: block; margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-1); }
.facet-panel { background: var(--color-bg-surface); border: var(--surface-border); border-radius: var(--radius-2xl); padding: var(--space-5); margin-bottom: var(--space-5); scroll-margin-top: var(--space-5); }
.facet-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.facet-control { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--font-size-1); color: var(--color-text-secondary); }
.facet-control select { width: 100%; min-height: var(--touch-target-min); font: inherit; font-size: var(--font-size-3); color: var(--color-text-primary); background: var(--color-bg-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-2); }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.active-filters button { min-height: var(--touch-target-min); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); background: var(--color-action-soft); color: var(--color-action-primary); font-size: var(--font-size-1); }
.active-filters .clear-filters { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.facet-summary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding-block: var(--space-4); border-block: var(--surface-border); }
.facet-summary > div { min-width: 0; }
.facet-summary dt { font-size: var(--font-size-1); color: var(--color-text-secondary); }
.facet-summary dd { font-size: var(--font-size-3); margin: var(--space-1) 0 0; line-height: var(--line-height-body); }
@media (max-width: 1000px) {
  .category-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facet-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .category-discovery-heading, .facet-heading { display: block; }
  .category-discovery-heading p, .facet-heading p { margin-top: var(--space-1); line-height: var(--line-height-body); }
  .category-covers { gap: var(--space-2); }
  .category-cover { display: flex; padding: var(--space-2); gap: var(--space-2); }
  .category-cover-art { display: block; width: 48px; flex: 0 0 48px; }
  .category-cover-art .artwork { aspect-ratio: 1; }
  .category-cover-copy { display: block; padding: var(--space-1) 0; }
  .facet-panel { padding: var(--space-4); }
  .facet-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facet-control:last-child { grid-column: 1 / -1; }
  .facet-control select { font-size: var(--font-size-4); }
}

/* Library first: one purpose row, with detailed controls revealed on demand. */
.catalog-home .masthead { height: 72px; box-shadow: none; }
.catalog-home .masthead .nav-item { background: transparent; color: var(--color-text-secondary); padding-inline: var(--space-4); }
.catalog-home .masthead .nav-item.active { background: var(--color-action-soft); color: var(--color-action-primary); }
.catalog-home .masthead .nav-item:hover { background: var(--color-action-soft); color: var(--color-action-primary); }
.catalog-home .discovery-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-10) var(--space-8);
}
.catalog-home .discovery-head h1 { font-size: var(--font-size-9); letter-spacing: -1.5px; line-height: var(--line-height-heading); }
.catalog-home .subtitle { margin: var(--space-3) 0 0; font-size: var(--font-size-3); color: var(--color-text-secondary); }
.catalog-home .discovery-tools { min-width: 0; padding: 0; margin: 0; }
.catalog-home .search-row { position: relative; gap: 0; }
.catalog-home .search-box { height: 60px; min-height: 60px; border-radius: var(--radius-lg); padding-right: 88px; }
.catalog-home .search-row #submit-search {
  position: absolute; right: var(--space-2); top: var(--space-2);
  min-height: var(--touch-target-min); height: var(--touch-target-min);
  border: 0; border-radius: var(--radius-md); padding: 0 var(--space-4);
  background: var(--color-action-primary); color: var(--color-text-inverse);
}
.catalog-home .search-row #submit-search:hover { background: var(--color-action-primary-hover); }
.catalog-home .search-panel .discovery-terms { padding-top: var(--space-3); border-top: var(--surface-border); }
.catalog-home .filter-row {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  padding-block: var(--space-3); margin: 0;
  border-bottom: var(--surface-border);
}
.catalog-home .categories { gap: var(--space-1); flex: 1 1 auto; min-width: 0; padding: var(--space-1); margin: calc(-1 * var(--space-1)); }
.catalog-home .category { height: var(--touch-target-min); min-height: var(--touch-target-min); padding-inline: var(--space-4); background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.catalog-home .category.active { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.catalog-home .category:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.catalog-home .category.active:hover { background: var(--color-action-secondary-hover); color: var(--color-text-inverse); }
.catalog-home .results-toolbar { gap: var(--space-2); margin: 0 0 0 auto; min-height: var(--touch-target-min); }
.catalog-home #toggle-filters, .catalog-home .sort select { min-height: var(--touch-target-min); height: var(--touch-target-min); padding-inline: var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: transparent; font-size: var(--font-size-3); }
.catalog-home #toggle-filters { display: inline-flex; align-items: center; gap: var(--space-2); }
.catalog-home #toggle-filters svg { width: 18px; height: 18px; }
.catalog-home #toggle-filters[aria-expanded=true] { background: var(--color-action-soft); color: var(--color-action-primary); border-color: var(--color-action-primary); }
.catalog-home #filter-count { min-width: 20px; padding-inline: var(--space-1); border-radius: var(--radius-full); background: var(--color-action-primary); color: var(--color-text-inverse); font-size: var(--font-size-1); }
.catalog-home .facet-panel { margin: var(--space-4) 0 0; border-radius: var(--radius-lg); }
.catalog-home .active-filters { margin-top: var(--space-3); }
.catalog-home .gallery-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-1); }
.catalog-home .gallery-meta p { margin: 0; }
.catalog-home .gallery-meta .notice { font-size: var(--font-size-1); line-height: var(--line-height-body); }

@media (max-width: 1000px) {
  .catalog-home .discovery-head { gap: var(--space-6); }
  .catalog-home .discovery-head h1 { font-size: var(--font-size-8); letter-spacing: -1px; }
}
@media (max-width: 700px) {
  .catalog-home .masthead { height: auto; gap: var(--space-2); }
  .catalog-home .masthead .wordmark { grid-column: 1; font-size: var(--font-size-heading-xs); gap: var(--space-2); }
  .catalog-home .masthead .wordmark > svg { flex-shrink: 0; }
  .catalog-home .masthead .language-switch { grid-column: 2; grid-row: 1; }
  .catalog-home .masthead > nav:not(.language-switch) { grid-column: 1 / -1; gap: var(--space-1); }
  .catalog-home .masthead .nav-item { padding-inline: var(--space-2); min-width: 0; }
  .catalog-home .discovery-head { display: block; padding-block: var(--space-7) var(--space-4); }
  .catalog-home .discovery-head h1 { font-size: var(--font-size-8); }
  .catalog-home .subtitle { font-size: var(--font-size-2); margin-top: var(--space-2); }
  .catalog-home .discovery-tools { margin-top: var(--space-5); }
  .catalog-home .search-box { height: 56px; min-height: 56px; padding-right: 84px; }
  .catalog-home .search-row #submit-search { top: var(--space-1-5); right: var(--space-1-5); }
  .catalog-home .search-box input { font-size: var(--font-size-4); }
  .catalog-home .filter-row { gap: var(--space-2); padding-top: 0; }
  .catalog-home .categories { flex-basis: 100%; max-width: calc(100% + var(--space-2)); overflow-x: auto; }
  .catalog-home .category { padding-inline: var(--space-3); font-size: var(--font-size-2); }
  .catalog-home .gallery-meta { display: block; padding-block: var(--space-3); }
  .catalog-home .gallery-meta .notice { margin-top: var(--space-1); }
}

/* Compact taxonomy shortcuts with an inline expansion. */
.catalog-home .filter-row.unified-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding-block: var(--space-4); }
.unified-filters .category-explorer { display: contents; }
.unified-filters .explore-featured { grid-column: 1; grid-row: 1; }
.unified-filters #extra-categories { grid-column: 1 / -1; grid-row: 2; }
.catalog-home .unified-filters .results-toolbar { grid-column: 2; grid-row: 1; }
.explore-featured { display: flex; align-items: start; gap: var(--space-3); }
.explore-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.explore-chip, .explore-more { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target-min); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--font-size-2); line-height: var(--line-height-ui); }
.explore-chip { background: var(--color-bg-surface); color: var(--color-text-secondary); }
.explore-chip span { font-size: var(--font-size-1); opacity: .7; }
.explore-chip:hover:not(:disabled), .explore-chip[aria-pressed=true] { background: var(--color-action-soft); color: var(--color-action-primary); }
.explore-chip[aria-pressed=true] { border-color: var(--color-action-primary); }
.explore-all[aria-pressed=true] { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
.explore-chip:disabled { opacity: .4; cursor: default; }
.explore-more { flex-shrink: 0; color: var(--color-action-primary); background: transparent; }
.explore-more[aria-expanded=true] svg { transform: rotate(180deg); }
#extra-categories:not([hidden]) { display: grid; gap: var(--space-5); padding-top: var(--space-5); }
.explore-group { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.explore-group h3 { margin: 0; padding-block: var(--space-3); font-size: var(--font-size-2); color: var(--color-text-secondary); }
@media(max-width:1100px) {
  .catalog-home .filter-row.unified-filters { grid-template-columns: minmax(0, 1fr); }
  .catalog-home .unified-filters .results-toolbar { grid-column: 1; grid-row: 2; }
  .unified-filters #extra-categories { grid-row: 3; }
}
@media(max-width:700px) {
  .explore-featured { flex-wrap: wrap; gap: var(--space-2); }
  .explore-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .explore-group h3 { padding: 0; }
  .explore-chip { flex-grow: 0; }
  .catalog-home .unified-filters .results-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .catalog-home .unified-filters .model-filter { grid-column: auto; }
}

/* Detail reading rhythm: keep data, actions and guidance visually separated. */
.detail-copy .facet-summary,
.standalone-detail .facet-summary { margin-block: var(--space-8); padding-block: var(--space-6); row-gap: var(--space-5); }
.detail-copy .verification,
.standalone-detail .verification { margin-top: var(--space-8); padding: var(--space-6); row-gap: var(--space-4); column-gap: var(--space-6); line-height: var(--line-height-body); }
.verification > * { min-width: 0; overflow-wrap: anywhere; }
.verification + .copy-sref { margin-top: var(--space-6); }
.detail-copy .prompt-section,
.standalone-detail .prompt-section { margin-top: var(--space-10); }
.prompt-section > h2,
.prompt-section > h3 { margin: 0 0 var(--space-4); line-height: var(--line-height-heading); }
.prompt-section > .caption { margin: 0 0 var(--space-5); line-height: var(--line-height-reading); }
.prompt-section > pre { margin: 0 0 var(--space-6); padding: var(--space-6); }
#page-status:empty { display: none; }
.source-disclosure { margin-top: var(--space-8); border-block: var(--surface-border); }
.source-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 60px; padding-block: var(--space-4); cursor: pointer; list-style: none; color: var(--color-text-primary); font-size: var(--font-size-4); font-weight: var(--font-weight-medium); }
.source-disclosure > summary::-webkit-details-marker { display: none; }
.source-disclosure > summary svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.source-disclosure[open] > summary svg { transform: rotate(180deg); }
.source-disclosure > summary:focus-visible { outline: 2px solid var(--color-action-primary); outline-offset: 4px; border-radius: var(--radius-sm); }
.source-disclosure-content { padding: var(--space-2) 0 var(--space-6); color: var(--color-text-secondary); font-size: var(--font-size-3); line-height: var(--line-height-reading); }
.source-disclosure-content > p { margin: 0 0 var(--space-4); }
.source-disclosure-content > p:last-child { margin-bottom: 0; }
.source-disclosure-content a { color: var(--color-action-primary); text-decoration: underline; text-underline-offset: 4px; }
.detail-copy .related-detail { margin-top: var(--space-12); }
@media(max-width:700px) {
  .detail-copy .verification, .standalone-detail .verification { padding: var(--space-5); column-gap: var(--space-4); }
  .prompt-section > pre { padding: var(--space-5); }
  .source-disclosure > summary { font-size: var(--font-size-3); }
}

/* Shared sticky header. Search no longer moves between surfaces. */
.masthead { position: sticky; top: 8px; z-index: 40; background: var(--color-bg-surface); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-top: var(--space-9); margin-top: var(--space-8); border-top: var(--surface-border); color: var(--color-text-secondary); font-size: var(--font-size-3); }
.pagination:empty,.pagination[hidden]{display:none}
.page-links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.page-links a,.page-disabled,.page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.page-links a:hover { background: var(--color-action-soft); color: var(--color-action-primary); }
.page-links a[aria-current="page"] { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.page-disabled { opacity: .45; }
.page-range { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media(max-width:700px){.pagination { flex-direction: column; gap: var(--space-3); }.page-links{gap:0;width:100%;justify-content:center}.page-links a,.page-disabled{padding:var(--space-2);min-width:44px}.page-ellipsis{min-width:20px;padding:0}}



/* Complete style asset page: image, factual metadata, sampled palette, discovery. */
.content-page:has(.style-detail-page) { max-width: 1280px; margin-inline: auto; }
.style-detail-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); margin-bottom: var(--space-8); }
.style-detail-heading h1 { font-size: var(--font-size-9); line-height: var(--line-height-heading); letter-spacing: -.04em; margin: var(--space-2) 0; }
.style-detail-heading .english { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-4); }
.detail-eyebrow { font-size: var(--font-size-3); color: var(--color-text-secondary); margin: 0; }
.detail-save { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.detail-save svg { width: 20px; height: 20px; }
.detail-save[aria-pressed="true"] { color: var(--color-action-primary); background: var(--color-action-soft); border-color: var(--color-action-primary); }
.style-overview { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: var(--space-10); align-items: start; }
.style-visual, .style-facts { min-width: 0; }
.detail-preview { border-radius: var(--media-radius); overflow: hidden; }
.detail-preview .preview-frame { border-radius: inherit; }
.detail-preview img.source-artwork { aspect-ratio: auto; object-fit: contain; width: 100%; height: auto; }
.style-visual > .caption { margin: var(--space-3) 0 var(--space-8); line-height: 1.6; }
.sref-panel { border: 1px solid var(--color-border-default); background: var(--color-bg-surface); padding: var(--space-6); border-radius: var(--media-radius); }
.detail-sref { font: var(--font-weight-semibold) clamp(20px,2.1vw,28px)/1.6 var(--font-family-mono); margin: var(--space-2) 0 var(--space-5); overflow-wrap: anywhere; }
.detail-sref > span { color: inherit; font: inherit; }
.sref-panel .primary-button { width: 100%; min-height: var(--button-height-lg); padding: 0 var(--button-padding-md); border-radius: var(--button-radius); background: var(--color-action-primary); color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); }
.sref-panel .primary-button:hover { color: var(--color-text-inverse); background: var(--color-action-primary-hover); }
.detail-parameters { margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border-default); display: grid; gap: var(--space-4); font-size: var(--font-size-3); }
.detail-parameters > div { align-items: baseline; display: flex; justify-content: space-between; gap: var(--space-4); }
.detail-parameters dt { margin: 0; color: var(--color-text-secondary); }
.detail-parameters dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.detail-attributes { margin-top: var(--space-8); }
.style-detail-page h2:not(.item-heading h2) { margin: 0; font-size: var(--font-size-6); line-height: 1.4; }
.detail-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.detail-tags > span, .detail-tags > a { font-size: var(--font-size-2); padding: var(--space-2) var(--space-3); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--tag-radius); }
.detail-attributes .facet-summary { margin: var(--space-6) 0 0; padding: var(--space-6) 0 0; border-bottom: 0; gap: var(--space-5) var(--space-4); }
.detail-attributes .facet-summary dt { margin: 0; font-size: var(--font-size-2); }
.detail-attributes .facet-summary dd { margin-top: var(--space-2); font-size: var(--font-size-3); line-height: 1.6; }
.detail-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
.detail-section-heading p { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-3); line-height: 1.7; }
.palette-strip { display: flex; overflow: hidden; border-radius: var(--button-radius-compact); height: 64px; width: 100%; }
.palette-strip > button, .palette-strip > i { display: block; flex-basis: 0; min-width: 0; border: 0; border-radius: 0; padding: 0; }
.palette-strip > button { min-width: 0; min-height: 44px; transition: filter .15s; }
.palette-strip > button:hover { filter: brightness(1.15); }
.palette-strip > button:focus-visible { outline: var(--focus-ring-width) solid var(--color-text-inverse); outline-offset: -5px; }
.palette-values { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); }
.palette-values button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font: var(--font-size-1)/1.4 var(--font-family-mono); }
.palette-values i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--color-swatch-border); }
.detail-palette > .caption { font-size: var(--font-size-1); line-height: 1.7; margin-top: var(--space-2); }
.detail-prompt { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-border-default); }
.detail-prompt .outline-button { flex-shrink: 0; }
.detail-prompt pre { margin: 0; padding: var(--space-6); line-height: 1.8; font-size: var(--font-size-4); white-space: pre-wrap; overflow-wrap: anywhere; }
.style-detail-page > .source-disclosure { margin-top: var(--space-8); }
.detail-recommendations { margin-top: var(--space-16); }
.style-recommendation-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-6); }
.palette-mini { height: 12px; border-radius: var(--radius-xs); margin-top: var(--space-3); }
.detail-toast:not(:empty) { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: var(--space-3) var(--space-5); border-radius: var(--button-radius-compact); background: var(--color-text-primary); color: var(--color-bg-surface); z-index: 80; box-shadow: var(--shadow-2); margin: 0; font-size: var(--font-size-3); }
@media(max-width:900px) {
  .style-overview { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .style-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6); }
  .detail-attributes { margin-top: 0; }
  .style-recommendation-grid { gap: var(--space-4); }
}
@media(max-width:600px) {
  .style-detail-heading { align-items: start; gap: var(--space-4); margin-bottom: var(--space-6); }
  .style-detail-heading h1 { font-size: var(--font-size-8); }
  .style-detail-heading .english { font-size: var(--font-size-3); }
  .detail-save { padding-inline: var(--space-3); font-size: var(--font-size-3); }
  .detail-save svg { display: none; }
  .style-facts { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .detail-section-heading { flex-wrap: wrap; gap: var(--space-2); }
  .palette-strip:not(.palette-mini) { height: 48px; }
  .palette-strip > button { min-width: 0; }
  .palette-values { gap: 0 var(--space-3); }
  .detail-prompt { margin-top: var(--space-8); }
  .detail-prompt .outline-button { margin-top: var(--space-3); }
  .detail-recommendations { margin-top: var(--space-10); }
  .style-recommendation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6) var(--space-4); }
  .detail-toast:not(:empty) { bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
}

/* One visible condition summary for typed search, card tags and detail links. */
.active-filter-label { align-self: center; font-size: var(--font-size-1); color: var(--color-text-secondary); }
.detail-tags > a { display: inline-flex; align-items: center; min-height: var(--touch-target-min); }
.detail-tags > a:hover, .detail-category-link:hover { color: var(--color-action-primary); border-color: var(--color-action-primary); background: var(--color-action-soft); }
.detail-category-link { display: inline-flex; align-items: center; min-height: var(--touch-target-min); border-radius: var(--tag-radius); padding-inline: var(--space-3); border: var(--surface-border); background: var(--color-bg-surface); }
.facet-link { display: inline-flex; align-items: center; min-height: var(--touch-target-min); padding: var(--space-2) var(--space-3); margin: var(--space-1) var(--space-2) var(--space-1) 0; border-radius: var(--button-radius-compact); border: var(--surface-border); background: var(--color-bg-surface); }
.facet-link:hover { color: var(--color-action-primary); border-color: var(--color-action-primary); }

.active-filters button { max-width: 100%; overflow-wrap: anywhere; }

/* The complete SREF row is one semantic copy button. */
.gallery-item .sref-code { display: flex; align-items: center; }
.card-copy-sref { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2); max-width: 100%; min-height: var(--touch-target-min); padding: 0 var(--space-1); border-radius: var(--radius-sm); color: inherit; font: inherit; text-align: left; }
.card-copy-sref > span { min-width: 0; overflow-wrap: anywhere; }
.card-copy-sref svg { width: 16px; height: 16px; flex-shrink: 0; }
.card-copy-sref:hover { color: var(--color-action-primary); background: var(--color-action-soft); }

/* A lightly frosted header keeps the gallery visible behind navigation. */
:root {
  --header-glass-bg: rgb(255 255 255 / .72);
  --header-glass-border: rgb(255 255 255 / .76);
  --header-glass-blur: 20px;
}
.masthead,
.catalog-home .masthead {
  background: var(--header-glass-bg);
  border-color: var(--header-glass-border);
  -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(1.25);
  backdrop-filter: blur(var(--header-glass-blur)) saturate(1.25);
  box-shadow: var(--shadow-header);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead, .catalog-home .masthead { background: var(--color-surface-opaque); }
}
@media (prefers-reduced-transparency: reduce) {
  .masthead, .catalog-home .masthead { background: var(--color-bg-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Approved default image-wall cards, promoted from the compact preview. */
.gallery { grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-3); }
.style-recommendation-grid { gap: var(--space-3); }
.gallery-item { position: relative; isolation: isolate; border-radius: var(--radius-lg); }
.gallery-item .image-wrap,
.gallery-item .image-button,
.gallery-item .artwork,
.gallery-item .preview-frame { border-radius: var(--radius-lg); }
.gallery-item .item-body { position: absolute; inset: auto 0 0; z-index: 1; padding: var(--space-10) var(--space-4) var(--space-4); border-radius: 0 0 var(--radius-lg) var(--radius-lg); color: var(--color-text-inverse); background: var(--color-media-scrim); opacity: 0; transform: translateY(var(--space-2)); pointer-events: none; transition: opacity var(--duration-default) var(--ease-standard), transform var(--duration-default) var(--ease-standard); }
.gallery-item:hover .item-body,
.gallery-item:focus-within .item-body { opacity: 1; transform: none; pointer-events: none; }
.gallery-item .item-heading { display: block; }
.gallery-item .item-heading h2 { color: var(--color-text-inverse); font-size: var(--font-size-4); line-height: 1.4; margin: 0; }
.gallery-item .item-heading h2 a { min-height: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gallery-item .sref-code { color: var(--color-media-text); font-size: var(--font-size-1); margin: var(--space-2) 0; }
.gallery-item .tags { margin: var(--space-2) 0 0; gap: var(--space-1); }
.gallery-item .tags button { color: var(--color-text-inverse); background: var(--color-media-control); border-color: var(--color-media-border); font-size: var(--font-size-1); padding: var(--space-1) var(--space-2); }
.gallery-item .tags button:hover { color: var(--color-text-primary); background: var(--color-bg-surface); }
.gallery-item .favorite-button { z-index: 2; }
@media (min-width: 1600px) { .gallery { grid-template-columns: repeat(6,minmax(0,1fr)); } }
@media (max-width: 1200px) { .gallery { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 600px) {
  .gallery, .style-recommendation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); }
  .gallery-item .item-body { padding: var(--space-8) var(--space-2) var(--space-2); }
  .gallery-item .item-heading h2 { font-size: var(--font-size-3); }
  .gallery-item .sref-code { margin: var(--space-1) 0; }
  .gallery-item .tags { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .gallery-item .item-body { opacity: 1; transform: none; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-item .item-body { transition: none; transform: none; }
}

.gallery-item .item-body :is(a,button) { pointer-events: none; }
.gallery-item:hover .item-body :is(a,button),
.gallery-item:focus-within .item-body :is(a,button) { pointer-events: auto; }
@media (hover: none), (pointer: coarse) { .gallery-item .item-body :is(a,button) { pointer-events: auto; } }

.gallery-item .card-copy-sref:hover { color: var(--color-text-inverse); background: var(--color-media-control-hover); }

/* Source versions are independent of editorial categories and testing status. */
.catalog-home .model-filter { gap: var(--space-2); white-space: nowrap; }
.catalog-home .model-filter select { max-width: 190px; }
.gallery-item .item-heading { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.gallery-item .item-heading h2 { flex: 1 1 auto; min-width: 0; }
.parameter-note { color: var(--color-text-secondary); font-size: var(--font-size-3); line-height: 1.6; margin: var(--space-3) 0 0; }
.source-parameters { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--surface-border); }
.source-parameters code { display: block; font-size: var(--font-size-3); line-height: 1.6; overflow-wrap: anywhere; margin-bottom: var(--space-3); }
.source-parameters .outline-button { width: 100%; white-space: normal; }
@media(max-width:700px){
 .catalog-home .results-toolbar { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
 .catalog-home .model-filter { grid-column: 1 / -1; }
 .catalog-home .results-toolbar .sort { margin: 0; min-width: 0; }
 .catalog-home .results-toolbar .sort select { width: 100%; max-width: none; }
 .catalog-home #toggle-filters { justify-content: center; }
}

/* Shared catalogue search stays available on public detail and editorial pages. */
.masthead.content-masthead { grid-template-columns: auto minmax(0,1fr) auto auto; gap: var(--space-5); }
.subpage-search { position: relative; width: 100%; max-width: 440px; min-width: 0; justify-self: center; margin: 0; }
.subpage-search .search-box { height: 48px; min-height: 48px; padding-right: 78px; border-radius: var(--radius-md); background: var(--color-surface-glass); }
.subpage-search .search-box > svg { width: 24px; height: 24px; flex-shrink: 0; }
.subpage-search input { width: 100%; min-width: 0; font-size: var(--font-size-3); }
.subpage-search > button { position: absolute; top: 2px; right: 3px; min-height: 44px; padding-inline: var(--space-4); border-radius: var(--radius-md); color: var(--color-text-inverse); background: var(--color-action-primary); font-size: var(--font-size-3); font-weight: var(--font-weight-semibold); }
.subpage-search > button:hover { background: var(--color-action-primary-hover); color: var(--color-text-inverse); }
@media(max-width:1000px){
 .masthead.content-masthead { height: auto; grid-template-columns: auto minmax(0,1fr) auto; padding: var(--space-3) var(--space-5); gap: var(--space-2-5) var(--space-3); }
 .content-masthead .wordmark { grid-column: 1; grid-row: 1; }
 .content-masthead > nav:not(.language-switch) { grid-column: 2; grid-row: 1; justify-self: end; width: auto; gap: var(--space-2); }
 .content-masthead .language-switch { grid-column: 3; grid-row: 1; width: auto; margin: 0; }
 .content-masthead .subpage-search { grid-column: 1 / -1; grid-row: 2; }
}
@media(max-width:700px){
 .masthead.content-masthead { padding: var(--space-3); gap: var(--space-2-5) var(--space-1-5); }
 .content-masthead .wordmark { font-size: var(--font-size-7); gap: var(--space-1-5); letter-spacing: -1px; }
 .content-masthead .wordmark > svg { width: 23px; height: 23px; }
 .content-masthead > nav:not(.language-switch) { gap: 0; }
 .content-masthead .nav-item { font-size: var(--font-size-1); padding-inline: var(--space-2); letter-spacing: 0; }
 .subpage-search input { font-size: var(--font-size-4); }
 .subpage-search .search-box { padding-left: var(--space-3); gap: var(--space-2); }
}
@media(max-width:360px){
 .language-switch { --language-trigger-width: 4rem; }
 .language-switch .language-dropdown > :is(.language-trigger, summary) { padding-inline: var(--space-3) var(--space-2-5); }
 .private-library .library-header .language-switch,
 .private-library .library-header .language-dropdown { width: var(--language-trigger-width); min-width: var(--language-trigger-width); }
 .content-masthead .wordmark { grid-column: 1 / 3; }
 .content-masthead > nav:not(.language-switch) { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
 .content-masthead .subpage-search { grid-row: 3; }
}

/* A friendly illustration for missing-page recovery. */
.page-not-found { padding: var(--space-6) var(--space-4) var(--space-10); }
.catalog-home .empty { background: var(--color-bg-canvas); }
.catalog-home .empty-monster { display: block; width: clamp(160px, 20vw, 220px); max-width: 100%; height: auto; margin: 0 auto var(--space-5); mix-blend-mode: multiply; }
.page-not-found .empty-illustration { display: block; width: min(280px, 70vw); height: auto; margin: 0 auto var(--space-4); }
.page-not-found h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.3; letter-spacing: -.03em; text-wrap: balance; }
@media (max-width: 600px) {
  .page-not-found .empty-illustration { width: min(220px, 70vw); }
}

/* Permanent header search and a small searching companion in the hero. */
.catalog-masthead .search-row { width: 100%; max-width: 440px; min-width: 0; justify-self: center; margin: 0; }
.catalog-home .catalog-masthead .search-box { height: 48px; min-height: 48px; border-radius: var(--radius-md); background: var(--color-surface-glass); }
.catalog-home .catalog-masthead #submit-search { top: 2px; right: 3px; }
.catalog-masthead .search-panel { z-index: 50; max-height: min(420px,calc(var(--visual-height,100dvh) - var(--sticky-header-bottom,90px) - 24px)); overscroll-behavior: contain; }
@media(max-width:1100px) and (min-width:1001px){
 .catalog-home .catalog-masthead { column-gap: var(--space-3); padding-inline: var(--space-5); }
 .catalog-masthead .nav-item { padding-inline: var(--space-2); }
}
@media(max-width:1000px){
 .catalog-masthead .search-row { grid-column: 1 / -1; grid-row: 2; }
}
@media(max-width:700px){
 .catalog-home .catalog-masthead .wordmark { grid-column: 1 / 3; grid-row: 1; }
 .catalog-home .catalog-masthead .language-switch { grid-column: 3; grid-row: 1; }
 .catalog-home .catalog-masthead > nav:not(.language-switch) { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
 .catalog-masthead .search-row { grid-row: 3; max-width: none; }
 .catalog-home .discovery-head { display: grid; grid-template-columns: minmax(0,1fr) 100px; gap: var(--space-2); }
 .catalog-home .discovery-head h1 { font-size: var(--font-size-heading-sm); }
}

/* Fixed bust window: show the first 310px of each 360 × 440 animation frame. */
.catalog-home main { isolation: isolate; }
.catalog-home .discovery-head { position: relative; min-height: 340px; }
.catalog-home .discovery-copy { position: relative; z-index: 1; }
.catalog-home .discovery-tools { display: block; position: absolute; top: auto; bottom: 0; right: 12%; width: min(400px,34%); height: auto; aspect-ratio: 36 / 31; margin: 0; overflow: clip; pointer-events: none; z-index: -1; }
.catalog-home .filter-row, .catalog-home .active-filters, .catalog-home .gallery-meta, .catalog-home .gallery { position: relative; z-index: 1; }
.catalog-home .results-toolbar .sort select, .catalog-home #toggle-filters, .catalog-home .gallery-meta .notice { background: var(--color-bg-canvas); }
.catalog-home #toggle-filters { padding-inline: var(--toolbar-control-padding-x); }
.catalog-home .results-toolbar .sort select {
  appearance: none;
  padding-inline: var(--toolbar-control-padding-x) calc(var(--select-arrow-inset) + var(--select-arrow-size) + var(--space-3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23161820' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--select-arrow-inset) center;
  background-size: var(--select-arrow-size) var(--select-arrow-size);
}
.catalog-home .model-filter select { max-width: none; }
@media(max-width:1000px){
 .catalog-home .discovery-head { min-height: 300px; }
 .catalog-home .discovery-tools { width: min(320px,44%); right: 0; }
}
@media(max-width:700px){
 .catalog-home .discovery-head { min-height: 0; grid-template-columns: minmax(0,1fr); align-items: start; gap: var(--space-3); padding-bottom: var(--space-6); }
 .catalog-home .discovery-copy { max-width: none; }
 .catalog-home .discovery-tools { position: relative; bottom: auto; right: auto; justify-self: end; width: 144px; }
 .catalog-home .subtitle { max-width: none; }
 .catalog-home .filter-row { background: var(--color-bg-canvas); }
}

/* Selected mascot artwork with SVG gaze and logo motion. */
.search-monster { display: block; position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 9 / 11; animation: none; transform: none; background: var(--color-bg-canvas); isolation: isolate; }
@media(min-width:1001px){
 .search-monster { top: 24px; }
}
.monster-still { display: block; width: 100%; height: auto; }
.monster-still, .monster-motion { mix-blend-mode: multiply; }
.monster-motion { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.monster-pupil { transform-box: view-box; transform-origin: 0 0; animation: monster-gaze 6s cubic-bezier(.45,0,.55,1) infinite; }
.monster-pupil-lift { animation: monster-gaze-arc 6s ease-in-out infinite; }
.monster-logo { transform-box: view-box; transform-origin: 54px 49px; animation: monster-logo-pop 8s ease-in-out infinite; }
@media(prefers-reduced-motion:no-preference){ .monster-ready .monster-still { visibility: hidden; } .monster-ready .monster-motion { display: block; } }
@media(prefers-reduced-motion:reduce){ .monster-motion { display: none; } .monster-pupil, .monster-pupil-lift, .monster-logo { animation: none; } }
@keyframes monster-gaze {
 0%,18%,82%,100% { transform: translate(175px,175px); }
 36%,64% { transform: translate(220px,175px); }
}
@keyframes monster-gaze-arc {
 0%,18%,36%,64%,82%,100% { transform: translateY(0); }
 27%,73% { transform: translateY(-4px); }
}
@keyframes monster-logo-pop {
 0%,82% { transform: translateY(0) rotate(0); }
 84% { transform: translateY(2px) rotate(-8deg); }
 88% { transform: translateY(-6px) rotate(150deg); }
 92% { transform: translateY(0) rotate(360deg); }
 94% { transform: translateY(2px) rotate(360deg); }
 96%,100% { transform: translateY(0) rotate(360deg); }
}

/* Brand artwork is SVG, never a font character. Header/media rules may scale
 * its square viewport, but must not alter its path, stroke or aspect ratio. */
.brand-mark {
  display: inline-block;
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  flex: 0 0 auto;
  aspect-ratio: 1;
  color: var(--brand-mark-color);
  vertical-align: middle;
}
:is(.auth-brand, .library-brand, .ops-brand):has(> .brand-mark) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
}
:is(.auth-brand, .library-brand, .ops-brand) > .brand-mark {
  width: .933333em;
  height: .933333em;
}

/* Shared public footer: brand, discovery, social channels, then legal links. */
.site-footer {
  display: block;
  margin-top: var(--space-16);
  padding: var(--space-12) 0 0;
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  text-align: left;
}
.footer-main {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1.2fr);
  gap: var(--space-12);
  padding-bottom: var(--space-10);
}
.site-footer .wordmark { display: flex; width: fit-content; line-height: 1; align-items: center; gap: var(--space-3); color: var(--color-text-primary); font-size: var(--font-size-8); }
.site-footer .wordmark svg { width: 30px; height: 30px; color: var(--color-action-primary); }
.site-footer .footer-tagline { font-size: var(--font-size-4); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: var(--space-3) 0 var(--space-2); }
.site-footer .footer-description { max-width: 30ch; font-size: var(--font-size-3); line-height: 1.8; margin: 0; }
.site-footer h2 { margin: 0 0 var(--space-3); font-family: var(--font-family-sans); font-size: var(--font-size-3); font-weight: var(--font-weight-semibold); line-height: 1.5; letter-spacing: 0; color: var(--color-text-primary); }
.site-footer .footer-explore { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.site-footer nav a { justify-content: flex-start; font-size: var(--font-size-3); text-decoration: none; }
.site-footer .footer-community > p { margin: 0 0 var(--space-5); font-size: var(--font-size-3); line-height: 1.7; }
.site-footer .footer-socials { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-footer .footer-social { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--icon-button-size); height: var(--icon-button-size); min-height: var(--icon-button-size); padding: 0; border: 0; border-radius: var(--radius-full); color: var(--color-text-primary); }
.footer-social > svg { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-footer .footer-social > :is(span,small) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.footer-social-end { margin-left: auto; font-size: var(--font-size-1); white-space: nowrap; color: var(--color-text-secondary); }
.site-footer a.footer-social:hover { color: var(--color-action-primary); border-color: var(--color-action-primary); background: var(--color-action-soft); }
.site-footer .is-pending { color: var(--color-text-secondary); opacity: 1; cursor: default; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); border-top: 1px solid var(--color-border-default); padding: var(--space-4) 0; font-size: var(--font-size-1); }
.footer-bottom nav { gap: var(--space-6); }
.site-footer .footer-bottom a { font-size: var(--font-size-1); }
@media(max-width:1100px) {
  .footer-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-8); }
  .footer-brand { grid-row: span 2; }
  .footer-community { grid-column: 2; }
}
@media(max-width:600px) {
  .site-footer { margin-top: var(--space-10); padding-top: var(--space-8); }
  .footer-main { grid-template-columns: minmax(0,1fr); gap: var(--space-8); padding-bottom: var(--space-8); }
  .footer-brand { grid-row: auto; }
  .footer-community { grid-column: auto; }
  .site-footer .footer-explore { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 var(--space-4); }
  .footer-explore h2 { grid-column: 1 / -1; }
  .site-footer .footer-social { flex-wrap: wrap; column-gap: var(--space-2); }
  .footer-social-end { width: 100%; margin-left: 26px; }
}

/* Language preferences live in the footer; menus open into the page. */
.footer-language { margin-left: auto; flex-shrink: 0; }
.footer-bottom > nav { margin-left: auto; }
.footer-bottom > .footer-language { margin-left: var(--space-6); }
.footer-language .language-switch { margin: 0; padding: 0; width: auto; }
.footer-language .language-dropdown > .language-menu { top: auto; bottom: calc(100% + var(--language-menu-offset)); }
.footer-language .language-trigger > svg { transform: rotate(180deg); }
.footer-language .language-dropdown[open] > .language-trigger > svg { transform: rotate(0); }
.locale-footer { max-width: 1660px; margin: var(--space-8) auto 0; padding: var(--space-6) var(--layout-gutter); display: flex; justify-content: flex-end; }
.masthead.content-masthead[data-footer-language] { grid-template-columns: auto minmax(0,1fr) auto; }
html[data-membership] .masthead.content-masthead[data-footer-language] { grid-template-columns: auto minmax(0,1fr) auto auto; }
html[data-membership] .content-masthead[data-footer-language] > .member-entry { grid-column: 4; }
@media(max-width:1000px) {
  .masthead.content-masthead[data-footer-language] { grid-template-columns: auto minmax(0,1fr); }
  html[data-membership] .masthead.content-masthead[data-footer-language] { grid-template-columns: auto minmax(0,1fr) auto; }
  html[data-membership] .content-masthead[data-footer-language] > nav { grid-column: 2; }
  html[data-membership] .content-masthead[data-footer-language] > .member-entry { grid-column: 3; }
}
@media(max-width:700px) {
  .masthead.content-masthead[data-footer-language], html[data-membership] .masthead.content-masthead[data-footer-language] { grid-template-columns: minmax(0,1fr) auto; }
  .masthead.content-masthead[data-footer-language] > .wordmark { grid-column: 1; grid-row: 1; }
  .masthead.content-masthead[data-footer-language] > nav, html[data-membership] .content-masthead[data-footer-language] > nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  html[data-membership] .content-masthead[data-footer-language] > .member-entry { grid-column: 2; grid-row: 1; }
  .masthead.content-masthead[data-footer-language] :is(.search-row,.subpage-search) { grid-column: 1 / -1; grid-row: 3; }
  .footer-bottom > .footer-language { margin-left: auto; }
  .footer-bottom > nav { margin-left: 0; }
}

/* Quiet, hand-drawn atmosphere; strongest in the middle and transparent at the edges. */
.catalog-home .discovery-head { isolation: isolate; }
.catalog-home .hero-doodles {
 position: absolute; inset: -24px 0 0; z-index: -2; pointer-events: none;
 background: url('/styles/assets/illustrations/home-doodles.svg') center / 1440px 460px no-repeat;
 opacity: .19;
 -webkit-mask-image: radial-gradient(ellipse 51% 70% at 54% 48%, #000 7%, rgba(0,0,0,.78) 35%, transparent 78%);
 mask-image: radial-gradient(ellipse 51% 70% at 54% 48%, #000 7%, rgba(0,0,0,.78) 35%, transparent 78%);
}
@media(max-width:1000px){
 .catalog-home .hero-doodles { background-size: 1120px auto; opacity: .16; }
}
@media(max-width:700px){
 .catalog-home .hero-doodles { inset: 0; background-size: 900px auto; background-position: 48% center; opacity: .10; }
}

/* Public search header: one row through tablet sizes, two rows on phones. */
.masthead.content-masthead.compact-search-header,
html[data-membership] .masthead.content-masthead.compact-search-header {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  height: auto;
  min-height: 72px;
  padding-block: var(--space-3);
}
.masthead.compact-search-header > .wordmark { grid-column: 1; grid-row: 1; }
.masthead.content-masthead.compact-search-header :is(.search-row, .subpage-search) {
  grid-column: 2; grid-row: 1; width: 100%; max-width: 280px; min-width: 0;
}
.masthead.compact-search-header > nav:not(.language-switch),
html[data-membership] .masthead.compact-search-header > nav:not(.language-switch) {
  grid-column: 3; grid-row: 1; gap: var(--space-1); width: auto; justify-self: end; flex-wrap: nowrap;
}
html[data-membership] .masthead.compact-search-header > .member-entry { grid-column: 4; grid-row: 1; }
.masthead.compact-search-header .search-box,
.catalog-home .masthead.compact-search-header .search-box {
  height: 48px; min-height: 48px; padding-inline: var(--space-4) 52px; gap: 0;
}
.masthead.compact-search-header :is(#submit-search, .subpage-search > button),
.catalog-home .masthead.compact-search-header #submit-search {
  display: inline-flex; align-items: center; justify-content: center;
  top: 2px; right: 2px; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  padding: 0; border: 0; border-radius: var(--radius-md);
  color: var(--color-action-primary); background: transparent;
}
.masthead.compact-search-header :is(#submit-search, .subpage-search > button):hover { background: var(--color-action-soft); }
.masthead.compact-search-header :is(#submit-search, .subpage-search > button) svg { width: 24px; height: 24px; }
.masthead.compact-search-header .search-panel { width: max(100%, 320px); max-width: calc(100vw - 48px); left: 50%; transform: translateX(-50%); }
@media(min-width:1101px) {
  .masthead.content-masthead.compact-search-header :is(.search-row, .subpage-search) { max-width: 440px; }
}
@media(min-width:701px) and (max-width:1100px) {
  .masthead.content-masthead.compact-search-header,
  html[data-membership] .masthead.content-masthead.compact-search-header { padding-inline: var(--space-4); gap: var(--space-3); --nav-button-padding-x: var(--space-4); }
  .masthead.compact-search-header .wordmark { font-size: var(--font-size-heading-sm); gap: var(--space-2); }
  .masthead.compact-search-header .wordmark > svg { width: 24px; height: 24px; }
  .masthead.compact-search-header .nav-item,
  .catalog-home .masthead.compact-search-header .nav-item { font-size: var(--font-size-3); padding-inline: var(--space-2); }
  .masthead.compact-search-header .member-signin { padding-inline: var(--space-3); white-space: nowrap; }
}
@media(max-width:700px) {
  .masthead.content-masthead.compact-search-header,
  html[data-membership] .masthead.content-masthead.compact-search-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 0; padding: var(--space-3); gap: var(--space-2) var(--space-1);
    --nav-button-padding-x: var(--space-3);
  }
  .masthead.compact-search-header > .wordmark { font-size: var(--font-size-6); gap: var(--space-1); letter-spacing: -1px; }
  .masthead.compact-search-header > .wordmark > svg { width: 20px; height: 20px; }
  .masthead.compact-search-header > nav:not(.language-switch),
  html[data-membership] .masthead.compact-search-header > nav:not(.language-switch) { grid-column: 2; grid-row: 1; gap: 0; }
  html[data-membership] .masthead.compact-search-header > .member-entry { grid-column: 3; grid-row: 1; }
  .masthead.compact-search-header .nav-item,
  .catalog-home .masthead.compact-search-header .nav-item { font-size: var(--font-size-1); padding-inline: var(--space-1-5); }
  .masthead.compact-search-header .member-signin { padding-inline: var(--space-2); white-space: nowrap; }
  .masthead.content-masthead.compact-search-header :is(.search-row, .subpage-search) { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .masthead.compact-search-header .search-panel { width: 100%; max-width: 100%; }
}