/* ==========================================================================
   Swiss Personal — Design System Stylesheet
   Based on the Swiss International Typographic Style guides (v1.1.0)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)

   Aliased from --wp--preset--* variables generated by theme.json.
   This allows wp:html blocks and custom components to use short semantic
   token names while staying in sync with the WordPress design system.
   Standalone values are kept for tokens that have no theme.json equivalent.
   -------------------------------------------------------------------------- */

:root {
  /* Color tokens — Text (aliased from theme.json palette) */
  --color-text-primary:    var(--wp--preset--color--text-primary, #111111);
  --color-text-body:       var(--wp--preset--color--text-body, #1A1A1A);
  --color-text-secondary:  var(--wp--preset--color--text-secondary, #555555);
  --color-text-tertiary:   var(--wp--preset--color--text-tertiary, #767676);
  --color-text-disabled:   var(--wp--preset--color--text-disabled, #999999);
  --color-text-inverse:    var(--wp--preset--color--text-inverse, #FFFFFF);
  --color-text-accent:     var(--wp--preset--color--petrol, #1C6982);

  /* Color tokens — Surfaces (aliased from theme.json palette) */
  --color-surface-primary:   var(--wp--preset--color--white, #FFFFFF);
  --color-surface-alt:       var(--wp--preset--color--coconut-milk, #F0EDE5);
  --color-surface-dark:      var(--wp--preset--color--eclipse, #343148);
  --color-surface-dark-warm: var(--wp--preset--color--hot-fudge, #42312A);

  /* Color tokens — Borders (aliased from theme.json palette) */
  --color-border:        var(--wp--preset--color--silver-birch, #D4D2D0);
  --color-border-strong: var(--wp--preset--color--text-primary, #111111);

  /* Color tokens — Accents (aliased from theme.json palette) */
  --color-accent-primary:        var(--wp--preset--color--red-orange, #D73E0F);
  --color-accent-primary-tint:   var(--wp--preset--color--red-orange-tint, #FCDACF);
  --color-accent-secondary:      var(--wp--preset--color--petrol, #1C6982);
  --color-accent-secondary-tint: var(--wp--preset--color--petrol-tint, #D5EEF6);
  --color-accent-deep:           var(--wp--preset--color--red-dahlia, #7D2027);
  --color-accent-highlight:      var(--wp--preset--color--high-visibility, #F3C300);
  --color-accent-highlight-tint: var(--wp--preset--color--high-visibility-tint, #FFF5CC);
  --color-accent-nature:         var(--wp--preset--color--carnival-glass, #DFECE3);

  /* Color tokens — Tinted backgrounds (aliased from theme.json palette) */
  --color-tint-warm: var(--wp--preset--color--tender-peach, #F4CDB7);

  /* Typography tokens — Font stacks (aliased from theme.json fontFamilies) */
  --font-primary:   var(--wp--preset--font-family--primary, 'akzidenz-grotesk-next-pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif);
  --font-secondary: var(--wp--preset--font-family--secondary, 'helvetica-lt-pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif);
  --font-mono:      var(--wp--preset--font-family--mono, 'ibm-plex-mono', 'SF Mono', 'Fira Code', 'Consolas', monospace);

  /* Typography tokens — Scale ratio (standalone, no WP equivalent) */
  --type-ratio: 1.250;
  --type-base:  1.125rem;

  /* Typography tokens — Fluid type scale (aliased from theme.json fontSizes) */
  --type-display-1: var(--wp--preset--font-size--display-1, clamp(3.000rem, 2.090rem + 3.883vw, 6.750rem));
  --type-display-2: var(--wp--preset--font-size--display-2, clamp(2.500rem, 1.802rem + 2.977vw, 5.375rem));
  --type-h1:        var(--wp--preset--font-size--h1, clamp(2.125rem, 1.594rem + 2.264vw, 4.313rem));
  --type-h2:        var(--wp--preset--font-size--h2, clamp(1.750rem, 1.340rem + 1.748vw, 3.438rem));
  --type-h3:        var(--wp--preset--font-size--h3, clamp(1.500rem, 1.197rem + 1.294vw, 2.750rem));
  --type-h4:        var(--wp--preset--font-size--h4, clamp(1.313rem, 1.100rem + 0.906vw, 2.188rem));
  --type-h5:        var(--wp--preset--font-size--h5, clamp(1.188rem, 1.051rem + 0.583vw, 1.750rem));
  --type-h6:        var(--wp--preset--font-size--h6, clamp(1.125rem, 1.064rem + 0.259vw, 1.375rem));
  --type-body:      var(--wp--preset--font-size--medium, clamp(1.000rem, 0.970rem + 0.130vw, 1.125rem));
  --type-body-sm:   var(--wp--preset--font-size--small, clamp(0.813rem, 0.782rem + 0.129vw, 0.938rem));
  --type-caption:   var(--wp--preset--font-size--caption, clamp(0.688rem, 0.672rem + 0.065vw, 0.750rem));
  --type-micro:     var(--wp--preset--font-size--micro, 0.625rem);

  /* Typography tokens — Code (standalone, no WP equivalent) */
  --type-code-block:  var(--type-body-sm);
  --type-code-inline: 0.875em;

  /* Baseline grid (standalone) */
  --grid-unit: 0.5rem;

  /* Line-heights (standalone, no WP equivalent) */
  --leading-display-1: 1.037;
  --leading-display-2: 1.023;
  --leading-h1: 1.043;
  --leading-h2: 1.091;
  --leading-h3: 1.091;
  --leading-h4: 1.143;
  --leading-h5: 1.143;
  --leading-h6: 1.091;
  --leading-body: 1.556;
  --leading-body-sm: 1.600;
  --leading-caption: 1.333;
  --leading-micro: 1.600;
  --leading-code: 1.600;

  /* Vertical spacing (aliased from theme.json spacingSizes) */
  --space-section: var(--wp--preset--spacing--section, clamp(3.000rem, 2.272rem + 3.107vw, 6.000rem));
  --space-block:   var(--wp--preset--spacing--block, clamp(2.000rem, 1.757rem + 1.036vw, 3.000rem));
  --space-element: var(--wp--preset--spacing--element, clamp(1.000rem, 0.879rem + 0.518vw, 1.500rem));
  --space-tight:   var(--wp--preset--spacing--tight, clamp(0.750rem, 0.689rem + 0.259vw, 1.000rem));
  --space-micro:   var(--wp--preset--spacing--micro, var(--grid-unit));
}


/* --------------------------------------------------------------------------
   2. Reset & Base Element Styles
   -------------------------------------------------------------------------- */

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

html {
  font-size: 100%;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-secondary);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--color-text-body);
  background-color: var(--color-surface-primary);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: proportional-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

figure {
  margin: 0;
}


/* --------------------------------------------------------------------------
   3. Heading Defaults
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  text-wrap: balance;
  text-rendering: optimizeLegibility;
  margin-top: 0;
}

h1 {
  font-size: var(--type-h1);
  font-weight: 400;
  line-height: var(--leading-h1);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-block);
}

h2 {
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: var(--leading-h2);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-element);
}

h3 {
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: var(--leading-h3);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-tight);
}

h4 {
  font-size: var(--type-h4);
  font-weight: 500;
  line-height: var(--leading-h4);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-tight);
}

h5 {
  font-size: var(--type-h5);
  font-weight: 700;
  line-height: var(--leading-h5);
  letter-spacing: 0;
  margin-bottom: var(--space-micro);
}

h6 {
  font-size: var(--type-h6);
  font-weight: 700;
  line-height: var(--leading-h6);
  letter-spacing: 0;
  margin-bottom: var(--space-micro);
}


/* --------------------------------------------------------------------------
   4. Paragraph, List, & Inline Styles
   -------------------------------------------------------------------------- */

p {
  margin-top: 0;
  margin-bottom: var(--space-element);
  widows: 2;
  orphans: 2;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-block) 0;
}

ul, ol {
  padding-left: 1.5em;
  margin-bottom: var(--space-element);
}

li {
  margin-bottom: var(--space-micro);
}

blockquote {
  font-family: var(--font-primary);
  font-size: var(--type-h4);
  font-weight: 300;
  line-height: var(--leading-h4);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  border-left: 4px solid var(--color-text-primary);
  padding-left: var(--space-element);
  margin: var(--space-block) 0;
}


/* --------------------------------------------------------------------------
   5. Links
   -------------------------------------------------------------------------- */

a {
  color: var(--color-text-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 150ms ease;
}

a:hover {
  text-decoration-thickness: 2px;
}


/* --------------------------------------------------------------------------
   6. Code — IBM Plex Mono
   -------------------------------------------------------------------------- */

code {
  font-family: var(--font-mono);
  font-size: var(--type-code-inline);
  background-color: var(--color-surface-alt);
  padding: 0.125em 0.375em;
  border-radius: 2px;
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

pre code {
  display: block;
  padding: var(--space-element);
  overflow-x: auto;
  font-size: var(--type-code-block);
  line-height: var(--leading-code);
  font-variant-ligatures: no-discretionary-ligatures;
}

kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
}


/* --------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */

table {
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  line-height: var(--leading-body-sm);
  font-variant-numeric: tabular-nums lining-nums;
  border-collapse: collapse;
  width: 100%;
}

th {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--type-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--space-tight);
  border-bottom: 2px solid var(--color-text-primary);
  color: var(--color-text-primary);
}

td {
  padding: var(--space-tight);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}


/* --------------------------------------------------------------------------
   8. Utility Type Classes
   -------------------------------------------------------------------------- */

.type-display-1 {
  font-family: var(--font-primary);
  font-size: var(--type-display-1);
  font-weight: 300;
  line-height: var(--leading-display-1);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  text-wrap: balance;
  word-spacing: -0.02em;
}

.type-display-2 {
  font-family: var(--font-primary);
  font-size: var(--type-display-2);
  font-weight: 300;
  line-height: var(--leading-display-2);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  text-wrap: balance;
  word-spacing: -0.02em;
}

.type-overline {
  font-family: var(--font-primary);
  font-size: max(0.750rem, var(--type-caption));
  font-weight: 700;
  line-height: var(--leading-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-micro);
}

.type-body-sm {
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  font-weight: 400;
  line-height: var(--leading-body-sm);
  color: var(--color-text-body);
}

.type-caption {
  font-family: var(--font-secondary);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: var(--leading-caption);
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   9. Prose Container
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. OpenType Features
   -------------------------------------------------------------------------- */

article p {
  font-variant-numeric: proportional-nums oldstyle-nums;
}

table,
.data-table,
.price {
  font-variant-numeric: tabular-nums lining-nums;
}

.type-display-1,
.type-display-2 {
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}

code, pre, kbd, samp {
  font-variant-ligatures: no-discretionary-ligatures;
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
}


/* --------------------------------------------------------------------------
   11. Section Layout
   -------------------------------------------------------------------------- */

/* Scroll-performance: skip layout/paint for off-screen sections */
[data-section] {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 100vh;
}

.page-section__inner {
  width: min(90%, 1200px);
  margin-inline: auto;
}

.page-section__inner > h1 {
  margin-bottom: var(--space-block);
}

/* Section headings are semantic <h2> but styled at h1 scale */
.page-section__inner > h2 {
  font-size: var(--type-h1);
  font-weight: 400;
  line-height: var(--leading-h1);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-block);
}

.section-separator {
  text-align: center;
}

.section-separator .type-display-1 {
  margin-inline-start: 0;
}

/* Surface-specific backgrounds — needed for preview.html (standalone)
   and as fallback; in WordPress these are also generated by theme.json. */
.has-eclipse-background-color      { background-color: var(--color-surface-dark); }
.has-hot-fudge-background-color    { background-color: var(--color-surface-dark-warm); }
.has-coconut-milk-background-color { background-color: var(--color-surface-alt); }
.has-tender-peach-background-color { background-color: var(--color-tint-warm); }
.has-petrol-tint-background-color  { background-color: var(--color-accent-secondary-tint); }
.has-red-orange-tint-background-color   { background-color: var(--color-accent-primary-tint); }
.has-carnival-glass-background-color    { background-color: var(--color-accent-nature); }
.has-high-visibility-tint-background-color { background-color: var(--color-accent-highlight-tint); }
.has-white-background-color        { background-color: var(--color-surface-primary); }

/* Dark surface text inversion via WP classes */
.has-eclipse-background-color,
.has-hot-fudge-background-color {
  color: var(--color-text-inverse);
}

.has-eclipse-background-color h1,
.has-eclipse-background-color h2,
.has-eclipse-background-color h3,
.has-eclipse-background-color h4,
.has-eclipse-background-color h5,
.has-eclipse-background-color h6,
.has-eclipse-background-color p,
.has-hot-fudge-background-color h1,
.has-hot-fudge-background-color h2,
.has-hot-fudge-background-color h3,
.has-hot-fudge-background-color h4,
.has-hot-fudge-background-color h5,
.has-hot-fudge-background-color h6,
.has-hot-fudge-background-color p {
  color: var(--color-text-inverse);
}

.has-eclipse-background-color a,
.has-hot-fudge-background-color a {
  color: var(--color-text-inverse);
  text-decoration-color: var(--color-text-disabled);
}

.has-eclipse-background-color a:hover,
.has-hot-fudge-background-color a:hover {
  text-decoration-color: var(--color-text-inverse);
}

/* Overline on dark surfaces */
.has-eclipse-background-color .type-overline,
.has-hot-fudge-background-color .type-overline {
  color: var(--color-text-disabled);
}

/* WP color utility classes — needed for preview.html (standalone);
   in WordPress these are generated from theme.json palette. */
.has-text-disabled-color { color: var(--color-text-disabled); }
.has-text-inverse-color  { color: var(--color-text-inverse); }


/* Footer separator */
.footer-sep {
  border: none;
  border-top: 1px solid var(--color-text-disabled);
  margin: var(--space-block) 0;
}


/* --------------------------------------------------------------------------
   14. Hero Section
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--space-section);
  padding-bottom: calc(var(--space-section) * 3);
}

.hero__logo {
  position: absolute;
  top: 50%;
  right: 5vw;
  transform: translateY(-50%);
  max-width: 15vw;
  max-height: 60%;
  pointer-events: none;
  z-index: 0;
  animation: hero-pump 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

@keyframes hero-pump {
  0%   { transform: translateY(-50%) scale(0.96); }
  15%  { transform: translateY(-50%) scale(0.98); }
  30%  { transform: translateY(-50%) scale(1.04); }
  45%  { transform: translateY(-50%) scale(1.05); }
  58%  { transform: translateY(-50%) scale(1.03); }
  70%  { transform: translateY(-50%) scale(0.99); }
  82%  { transform: translateY(-50%) scale(0.995); }
  92%  { transform: translateY(-50%) scale(1.002); }
  100% { transform: translateY(-50%) scale(1); }
}

.hero__content {
  width: min(90%, 1200px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.hero__punct {
  color: var(--color-accent-primary);
}

.hero__name {
  white-space: nowrap;
}

.hero__tagline {
  margin-top: auto;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .hero__tagline {
    margin-top: clamp(3rem, 10vh, 8rem);
  }
}

.hero__tagline-line2 {
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   15. Flip Card Gallery
   -------------------------------------------------------------------------- */

.flip-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-tight);
  margin-top: var(--space-block);
}

@media (min-width: 768px) {
  .flip-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.flip-card {
  aspect-ratio: 1;
  perspective: 800px;
  cursor: pointer;
  border-radius: 4px;
  outline-offset: 3px;
}

.flip-card:focus-visible {
  outline: 2px solid var(--color-accent-primary);
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

@media (hover: hover) {
  .flip-card:hover .flip-card__inner {
    transform: rotateY(180deg);
  }
}

.flip-card--flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 4px;
  overflow: hidden;
}

.flip-card__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flip-card__back {
  transform: rotateY(180deg);
  background-color: var(--color-surface-dark);
  color: var(--color-text-inverse);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.flip-card__title {
  font-family: var(--font-primary);
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.35em;
}

.flip-card__desc {
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  font-weight: 300;
  line-height: 1.4;
  margin: 0;
  color: var(--color-text-disabled);
}


/* --------------------------------------------------------------------------
   15b. Shelf Gems (Book Flip Cards)
   -------------------------------------------------------------------------- */

.shelf-gems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-tight);
  margin-top: var(--space-block);
}

@media (max-width: 479px) {
  .shelf-gems-grid {
    grid-template-columns: 1fr;
    max-width: 300px;
  }
}

.flip-card--book {
  aspect-ratio: 2 / 3;
}

.flip-card--book .flip-card__front {
  display: flex;
  align-items: stretch;
}

.flip-card--book .flip-card__scrim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: linear-gradient(to top, var(--color-surface-dark) 0%, var(--color-surface-dark) 20%, transparent 80%);
  min-height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.flip-card--book .flip-card__author {
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  font-weight: 300;
  line-height: 1.3;
  margin: 0 0 0.15em;
  color: var(--color-text-disabled);
}

.flip-card--book .flip-card__book-title {
  font-family: var(--font-primary);
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--color-text-inverse);
}

.flip-card__link {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--type-body-sm);
  font-weight: 700;
  color: var(--color-accent-primary);
  text-decoration: none;
  margin-top: 0.75em;
}

.flip-card__link:hover {
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   16. Side-Dot Navigation
   -------------------------------------------------------------------------- */

.side-dots {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-dots__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-text-secondary);
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
  padding: 0;
}

.side-dots__dot:hover {
  border-color: var(--color-text-primary);
  transform: scale(1.3);
}

.side-dots__dot--active {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  transform: scale(1.3);
}

/* Hide dots on small screens — not enough room */
@media (max-width: 768px) {
  .side-dots,
  .hero__logo {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   17. Focus Indicators
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-text-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}


/* --------------------------------------------------------------------------
   17b. Skip Link
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 999;
  padding: var(--space-tight) var(--space-element);
  background-color: var(--color-surface-primary);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: var(--type-body-sm);
  text-decoration: none;
  border: 2px solid var(--color-text-primary);
}

.skip-link:focus {
  position: fixed;
  top: var(--space-element);
  left: var(--space-element);
  width: auto;
  height: auto;
}


/* --------------------------------------------------------------------------
   18. Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .book-ticker__cover,
  .logo-ticker__item {
    will-change: auto;
  }
  .album-card,
  .album-card__cover {
    transition: none;
  }
  .album-card:hover,
  .album-card:hover .album-card__cover {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   19. Responsive Letter-Spacing Override
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  h1,
  .type-display-1,
  .type-display-2 {
    letter-spacing: -0.01em;
  }
}


/* --------------------------------------------------------------------------
   20. Optical Margin Alignment
   -------------------------------------------------------------------------- */

.type-display-1,
.type-display-2,
h1 {
  margin-inline-start: -0.04em;
}


/* --------------------------------------------------------------------------
   21. WP Block Overrides
   -------------------------------------------------------------------------- */

/*
 * Neutralise WordPress core block CSS so theme.css drives all layout.
 *
 * WP injects: has-background padding (1.25em 2.375em), flow-layout
 * block-gap margins (24 px), constrained max-width (740 px), root
 * padding, and font-size !important on preset classes.
 * We zero these out and let our own rules handle spacing, widths,
 * and typography — matching the standalone preview pixel-for-pixel.
 */

/* --- WP has-background padding (scoped to section-level groups only) --- */
:where(.wp-block-group.alignfull.has-background) {
  padding: 0;
}

/* --- WP flow-layout block-gap margins --- */
:where(.is-layout-flow) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
:where(.wp-site-blocks) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* --- WP font-size preset classes use !important.
   hero-fit.js handles this via style.setProperty('font-size', ..., 'important').
   No blanket override needed — the preset values match our tokens. --- */

/* --- WP image block margin --- */
.wp-block-image {
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
}

/* --- WP columns block --- */
.wp-block-columns {
  gap: var(--space-block);
  margin-bottom: 0;
}

/* --- WP separator --- */
.wp-block-separator {
  border-color: var(--color-border);
  border-width: 1px 0 0 0;
  margin-top: var(--space-block);
  margin-bottom: var(--space-block);
  width: auto;
}

/* --- Full-width sections: padding + content containment --- */
.wp-block-group.alignfull {
  /* Vertical padding (overridden by inline styles in WP, used in preview) */
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  /* Horizontal padding — matches preview's responsive edge padding */
  padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Legacy inner container (preview fallback) */
.wp-block-group.alignfull > .wp-block-group__inner-container {
  width: min(90%, 1200px);
  margin-inline: auto;
}

/* Spacer — limit extremes */
.wp-block-spacer {
  max-height: 96px;
}


/* --------------------------------------------------------------------------
   22. Print Styles
   -------------------------------------------------------------------------- */

@media print {
  @page {
    margin: 2cm;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000000;
    background: #FFFFFF;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #000000;
    page-break-after: avoid;
    break-after: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555555;
  }

  .type-display-1,
  .type-display-2 {
    font-size: 24pt;
  }

  pre, code {
    font-size: 9pt;
    border: 1px solid #d4d2d0;
  }

  img, figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .side-dots {
    display: none;
  }

  .book-ticker {
    display: none;
  }
  .album-player {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   23. Logo Grid (Companies)
   -------------------------------------------------------------------------- */

.logo-grid {
  display: none;              /* hidden; kept in DOM as data source for logo ticker */
  grid-template-columns: repeat(2, 1fr);
  max-width: 70%;
  margin-inline: auto;
}

@media (min-width: 960px) {
  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.logo-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-block) var(--space-element);
  border-bottom: 1px solid var(--color-text-disabled);
  border-right: 1px solid var(--color-text-disabled);
}

.logo-cell__img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--space-tight);
}

/* Reserve 2-line height for name so logos stay vertically consistent */
.logo-cell__name {
  min-height: calc(var(--leading-caption) * 2 * max(0.750rem, var(--type-caption)));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: max(0.750rem, var(--type-caption));
  font-weight: 700;
  line-height: var(--leading-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-disabled);
  margin-bottom: 0;
  text-align: center;
}

/* 2-col layout: remove right border on last column, bottom border on last row */
.logo-cell:nth-child(2n) { border-right: none; }
.logo-cell:nth-last-child(-n+2) { border-bottom: none; }
/* If odd total, last item alone on row also loses right border */
.logo-cell:last-child { border-right: none; }

@media (min-width: 960px) {
  .logo-cell:nth-child(2n) { border-right: 1px solid var(--color-text-disabled); }
  .logo-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-text-disabled); }
  .logo-cell:nth-child(4n) { border-right: none; }
  .logo-cell:nth-last-child(-n+4) { border-bottom: none; }
}

.logo-cell__img {
  height: 28px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  /* Override base img reset (height:auto) */
  max-height: 28px;
  min-height: 28px;
}


/* --------------------------------------------------------------------------
   23b. Logo Ticker (Scrolling Logo Carousel)
   -------------------------------------------------------------------------- */

.logo-ticker {
  overflow: hidden;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  margin-top: var(--space-block);
}

.logo-ticker:active {
  cursor: grabbing;
}

.logo-ticker__track {
  position: relative;
  height: 56px;
}

.logo-ticker__item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  pointer-events: none;
  will-change: transform;
  white-space: nowrap;
}

.logo-ticker__img {
  height: 24px;
  width: auto;
  max-height: 24px;
  min-height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.logo-ticker__name {
  font-family: var(--font-primary);
  font-size: max(0.625rem, var(--type-micro, 0.625rem));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-disabled);
}

/* Tablet */
@media (max-width: 1023px) {
  .logo-ticker__track {
    height: 48px;
  }
  .logo-ticker__img {
    height: 20px;
    max-height: 20px;
    min-height: 20px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .logo-ticker__track {
    height: 40px;
  }
  .logo-ticker__img {
    height: 16px;
    max-height: 16px;
    min-height: 16px;
  }
}


/* --------------------------------------------------------------------------
   24. Album Cards & Player (Music)
   -------------------------------------------------------------------------- */

.album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-element);
  width: 85%;
  margin-inline: auto;
}

.album-card {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 2px;
  overflow: hidden;
  outline-offset: 3px;
  font-family: inherit;
  transition: transform 350ms ease;
}

.album-card:hover {
  transform: scale(1.02);
}

.album-card:focus-visible {
  outline: 2px solid var(--color-text-accent);
  outline-offset: 3px;
}

.album-card__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}

.album-card:hover .album-card__cover {
  transform: scale(1.02);
}

.album-card--active {
  outline: 2px solid var(--color-accent-highlight);
  outline-offset: 2px;
}

.album-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-tight);
  background: linear-gradient(to top, var(--color-surface-dark) 0%, var(--color-surface-dark) 20%, transparent 80%);
  min-height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.album-card__title {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--type-body-sm);
  font-weight: 700;
  color: var(--color-text-inverse);
  line-height: var(--leading-body-sm);
}

.album-card__artist {
  display: block;
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  font-weight: 400;
  color: var(--color-text-disabled);
  margin-top: 0.15rem;
}

/* Album player accordion */
.album-player {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}

.album-player--open {
  grid-template-rows: 1fr;
  margin-top: var(--space-element);
}

.album-player__inner {
  overflow: hidden;
}

.album-player__iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  border-radius: 0;
}

/* Responsive: stack album cards on small screens */
@media (max-width: 479px) {
  .album-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .album-grid .album-player {
    margin-top: 0;
  }
  .album-grid .album-player__iframe {
    height: 350px;
  }
}


/* --------------------------------------------------------------------------
   25. Book Ticker (Scrolling Carousel)
   -------------------------------------------------------------------------- */

.book-ticker {
  overflow: hidden;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  /* Full-bleed: break out of constrained layout + global padding */
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  margin-top: var(--space-block);
}

.book-ticker:active {
  cursor: grabbing;
}

.book-ticker__track {
  position: relative;
  height: 200px;
}

.book-ticker__cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: auto;
  display: block;
  pointer-events: none;
  border-radius: 2px;
  background-color: var(--color-border);
  will-change: transform;
}

/* Tablet */
@media (max-width: 1023px) {
  .book-ticker__track {
    height: 140px;
  }
  .book-ticker__cover {
    height: 140px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .book-ticker__track {
    height: 110px;
  }
  .book-ticker__cover {
    height: 110px;
  }
}


/* --------------------------------------------------------------------------
   26. Article / Blog Post
   -------------------------------------------------------------------------- */

.article {
  width: min(90%, 740px);
  margin-inline: auto;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.article__overline {
  font-family: var(--font-primary);
  font-size: var(--type-body-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-tight);
}

.article__title {
  font-family: var(--font-primary);
  font-size: var(--type-h1);
  font-weight: 400;
  line-height: var(--leading-h1);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-element);
}

.article__lead {
  font-family: var(--font-secondary);
  font-size: var(--type-h5);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-block);
  font-style: italic;
}

.article__body h2 {
  font-family: var(--font-primary);
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: var(--leading-h3);
  color: var(--color-text-primary);
  margin: var(--space-section) 0 var(--space-element);
}

.article__body p {
  font-family: var(--font-secondary);
  font-size: clamp(1.125rem, 1.094rem + 0.130vw, 1.250rem); /* --type-body + 2px: 18px → 20px */
  line-height: var(--leading-body);
  color: var(--color-text-body);
  margin: 0 0 var(--space-element);
}

.article__body a {
  color: var(--color-accent-secondary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.article__body a:hover {
  color: var(--color-accent-deep);
}

.article__body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-block) 0;
}

/* Article figures — inline (default, within 740px column) */
.article__figure {
  margin: var(--space-block) 0;
}

.article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.article__figure figcaption {
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-tight);
}

/* Article figures — wide (breaks out to 1200px) */
.article__figure--wide {
  width: min(90vw, 1200px);
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-section);
  margin-bottom: var(--space-section);
}

.article__figure--wide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.article__figure--wide figcaption {
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-tight);
  width: min(90%, 740px);
  margin-inline: auto;
}

/* Article figures — full bleed (100vw) */
.article__figure--full {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-section);
  margin-bottom: var(--space-section);
}

.article__figure--full img {
  display: block;
  width: 100%;
  height: auto;
}

.article__figure--full figcaption {
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-tight);
  width: min(90%, 740px);
  margin-inline: auto;
}

/* Two-up image grid */
.article__figure--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-tight);
  margin: var(--space-block) 0;
}

.article__figure--pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.article__figure--pair figcaption {
  grid-column: 1 / -1;
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-tight);
}

/* Two-up — wide variant (breaks out to 1200px) */
.article__figure--pair-wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-tight);
  width: min(90vw, 1200px);
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-section);
  margin-bottom: var(--space-section);
}

.article__figure--pair-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.article__figure--pair-wide figcaption {
  grid-column: 1 / -1;
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-tight);
  width: min(90%, 740px);
  margin-inline: auto;
}

@media (max-width: 479px) {
  .article__figure--pair,
  .article__figure--pair-wide {
    grid-template-columns: 1fr;
  }
}

/* Cover image — image with headline overlay */
.article__cover {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.article__cover img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 50vh;
  max-height: 85vh;
  object-fit: cover;
}

.article__cover-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-element) clamp(1.5rem, 5vw, 4rem);
  z-index: 1;
}

.article__cover-breadcrumb {
  font-family: var(--font-primary);
  font-size: clamp(1.125rem, 1.064rem + 0.259vw, 1.375rem);
  font-weight: 700;
  color: var(--color-text-inverse);
  text-decoration: none;
}

.article__cover-breadcrumb:hover {
  color: var(--color-accent-primary);
}

.article__cover-back {
  font-family: var(--font-primary);
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--color-text-inverse);
  text-decoration: none;
}

.article__cover-back:hover {
  color: var(--color-accent-primary);
}

.article__cover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(to top, var(--color-surface-dark) 0%, var(--color-surface-dark) 15%, transparent 70%);
}

.article__cover-overline {
  font-family: var(--font-primary);
  font-size: var(--type-body-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin: 0 0 var(--space-tight);
}

.article__cover-title {
  font-family: var(--font-primary);
  font-size: var(--type-h1);
  font-weight: 400;
  line-height: var(--leading-h1);
  color: var(--color-text-inverse);
  margin: 0;
  max-width: 740px;
}

.article__cover-subtitle {
  font-family: var(--font-secondary);
  font-size: var(--type-h5);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-disabled);
  margin: var(--space-tight) 0 0;
  max-width: 740px;
}

/* Carousel */
.article__carousel {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-section);
  margin-bottom: var(--space-section);
  overflow: hidden;
}

.article__carousel-track {
  display: flex;
  gap: var(--space-tight);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.article__carousel-track.is-dragging {
  transition: none;
  cursor: grabbing;
}

.article__carousel-slide {
  flex: 0 0 80%;
  min-width: 0;
  border-radius: 4px;
  overflow: hidden;
}

.article__carousel-slide img {
  display: block;
  width: 100%;
  height: 65vh;
  object-fit: cover;
}

.article__carousel-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-element);
  padding: var(--space-element) 0;
}

.article__carousel-btn {
  background: none;
  border: none;
  font-family: var(--font-primary);
  font-size: var(--type-body-sm);
  font-weight: 700;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--space-micro) var(--space-tight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article__carousel-btn:hover {
  color: var(--color-text-primary);
}

.article__carousel-btn:disabled {
  color: var(--color-text-disabled);
  cursor: default;
}

.article__carousel-dots {
  display: flex;
  gap: var(--space-micro);
}

.article__carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.article__carousel-dot.is-active {
  background-color: var(--color-text-primary);
}

.article__carousel-caption {
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-tertiary);
  text-align: center;
  padding: 0 var(--space-element);
}

/* Pullquote */
.article__pullquote {
  font-family: var(--font-primary);
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: var(--leading-h3);
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-accent-secondary);
  padding-left: var(--space-element);
  margin: var(--space-section) 0;
}

/* Video embed */
.article__video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: var(--space-block) 0;
  border-radius: 4px;
}

.article__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.article__video-caption {
  font-family: var(--font-secondary);
  font-size: var(--type-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-tight);
  margin-bottom: var(--space-block);
}

/* Article header with back link */
.article-header {
  width: min(90%, 1200px);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-element) 0;
}

.article-header__title {
  font-family: var(--font-primary);
  font-size: clamp(1.125rem, 1.064rem + 0.259vw, 1.375rem);
  font-weight: 700;
  color: var(--color-text-primary);
  text-decoration: none;
  margin: 0;
}

.article-header__title:hover {
  color: var(--color-accent-primary);
}

.article-header__back {
  font-family: var(--font-primary);
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.article-header__back:hover {
  color: var(--color-accent-primary);
}