/* =============================================================================
   XmosaiX Design System — Component Primitives
   primitives/primitives.css

   Korean Men's Body Magazine · Dark Luxury · Editorial
   Version: 1.0.0

   TABLE OF CONTENTS
   01. CSS Custom Properties (Token Bridge)
   02. Reset & Base
   03. Typography Primitives
   04. Button Primitives
   05. Card Primitives
   06. Gallery Grid Primitives
   07. Navigation Primitives
   08. Hero Primitives
   09. Age Gate Modal Primitive
   10. Utility Classes
   ============================================================================= */

/* =============================================================================
   01. CSS CUSTOM PROPERTIES — Token Bridge
   ============================================================================= */
:root {
  /* --- Colors --- */
  --color-bg-primary:           #000000;
  --color-bg-secondary:         #0a0a0a;
  --color-bg-tertiary:          #111111;
  --color-bg-elevated:          #181818;
  --color-bg-overlay:           rgba(0, 0, 0, 0.92);
  --color-bg-overlay-light:     rgba(0, 0, 0, 0.60);
  --color-bg-glass:             rgba(10, 10, 10, 0.82);
  --color-bg-glass-border:      rgba(255, 255, 255, 0.14);

  --color-surface-1:            #101010;
  --color-surface-2:            #171717;
  --color-surface-3:            #222222;
  --color-surface-hover:        #2b2b2b;

  --color-accent:               #c4c9cf;
  --color-accent-light:         #dde2e7;
  --color-accent-lighter:       #f3f5f7;
  --color-accent-dark:          #969ea7;
  --color-accent-darker:        #6d7580;
  --color-accent-muted:         rgba(196, 201, 207, 0.10);
  --color-accent-muted-hover:   rgba(196, 201, 207, 0.18);

  --color-text-primary:         #ffffff;
  --color-text-secondary:       #d6d6d6;
  --color-text-tertiary:        #9a9a9a;
  --color-text-muted:           #666666;
  --color-text-disabled:        #4a4a4a;
  --color-text-inverse:         #000000;
  --color-text-accent:          #d7dce1;
  --color-text-accent-light:    #f3f5f7;
  --color-text-on-accent:       #0b0d10;

  --color-border-subtle:        rgba(255, 255, 255, 0.08);
  --color-border-default:       rgba(255, 255, 255, 0.14);
  --color-border-strong:        rgba(255, 255, 255, 0.26);
  --color-border-accent:        rgba(196, 201, 207, 0.34);
  --color-border-accent-strong: rgba(221, 226, 231, 0.52);

  --color-focus-ring:           rgba(221, 226, 231, 0.32);
  --color-error:                #e05252;
  --color-success:              #52c78a;
  --color-warning:              #e0a832;

  --color-badge-hot:            #e04040;
  --color-badge-hot-bg:         rgba(224, 64, 64, 0.15);
  --color-badge-adult:          #8a52c8;
  --color-badge-adult-bg:       rgba(138, 82, 200, 0.15);

  /* --- Gradients --- */
  --gradient-warm:
    linear-gradient(135deg, #f3f5f7 0%, #c4c9cf 45%, #7e8791 100%);
  --gradient-warm-text:
    linear-gradient(90deg, #f3f5f7 0%, #d7dce1 38%, #8f98a2 100%);
  --gradient-dark-overlay:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.95) 100%);
  --gradient-hero:
    linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.72) 65%, #000000 100%);
  --gradient-card:
    linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.60) 40%, transparent 100%);
  --gradient-ambient:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(196,201,207,0.12) 0%, transparent 70%);

  /* --- Typography --- */
  --font-display:   'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:      'Pretendard Variable', 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;
  --text-8xl:   6rem;

  --text-display-sm:   clamp(2.25rem, 4vw, 3rem);
  --text-display-md:   clamp(3rem, 6vw, 4.5rem);
  --text-display-lg:   clamp(4rem, 8vw, 6rem);
  --text-display-hero: clamp(5rem, 12vw, 9rem);

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.15em;
  --tracking-ultra:    0.25em;

  /* --- Spacing --- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  --section-sm:  clamp(3rem, 6vw, 5rem);
  --section-md:  clamp(5rem, 8vw, 8rem);
  --section-lg:  clamp(6rem, 10vw, 12rem);

  /* --- Radius --- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:
    0 2px 4px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:
    0 4px 12px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-lg:
    0 8px 24px rgba(0,0,0,0.7), 0 4px 8px rgba(0,0,0,0.5);
  --shadow-xl:
    0 16px 48px rgba(0,0,0,0.8), 0 8px 16px rgba(0,0,0,0.6);
  --shadow-accent-sm:
    0 2px 8px rgba(196,201,207,0.16);
  --shadow-accent-md:
    0 4px 16px rgba(196,201,207,0.22), 0 2px 6px rgba(196,201,207,0.14);
  --shadow-accent-lg:
    0 8px 32px rgba(196,201,207,0.26), 0 4px 12px rgba(196,201,207,0.18);
  --shadow-accent-glow:
    0 0 40px rgba(196,201,207,0.18), 0 0 80px rgba(196,201,207,0.08);
  --shadow-card:
    0 2px 8px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-card-hover:
    0 8px 32px rgba(0,0,0,0.7), 0 16px 48px rgba(0,0,0,0.5),
    0 0 24px rgba(196,201,207,0.10);

  /* --- Z-index --- */
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-nav:      900;
  --z-age-gate: 1000;

  /* --- Animation --- */
  --duration-fast:     100ms;
  --duration-normal:   200ms;
  --duration-moderate: 300ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;

  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-editorial: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-smooth:    cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast:      all var(--duration-fast) var(--ease-out);
  --transition-normal:    all var(--duration-normal) var(--ease-out);
  --transition-slow:      all var(--duration-slow) var(--ease-editorial);
  --transition-color:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
  --transition-transform: transform var(--duration-moderate) var(--ease-smooth);

  /* --- Layout --- */
  --nav-height:        72px;
  --nav-height-sm:     60px;
  --container-xl:      1280px;
  --content-padding-x: clamp(1rem, 4vw, 3rem);
  --grid-gap:          clamp(0.75rem, 2vw, 1.5rem);
}


/* =============================================================================
   02. RESET & BASE
   ============================================================================= */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Root */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

/* Body */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

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

img {
  height: auto;
  object-fit: cover;
}

/* Typography defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

p {
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Links */
a {
  color: var(--color-text-accent);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-accent-light);
}

a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Lists */
ul,
ol {
  list-style: none;
}

/* Form elements */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

button:disabled {
  cursor: not-allowed;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background-color: var(--color-accent-muted);
  color: var(--color-text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-dark);
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-8) 0;
}


/* =============================================================================
   03. TYPOGRAPHY PRIMITIVES
   ============================================================================= */

/* Display Hero — Used for main page wordmarks / large editorial headlines */
.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-display-hero);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
}

/* Display Title — Section headers, cover titles */
.display-title {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

/* Heading XL */
.heading-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

/* Heading LG */
.heading-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

/* Heading MD */
.heading-md {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

/* Heading SM */
.heading-sm {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

/* Body Large */
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Body Medium (default) */
.body-md {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Body Small */
.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}

/* Caption */
.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* Label Series — e.g. "ISSUE 04", "SERIES III", category tags */
.label-series {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--color-text-accent);
}

/* Gradient text — warm golden */
.text-gradient-warm {
  background: var(--gradient-warm-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Italic editorial accent */
.text-italic-accent {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-accent);
}

/* Overline — small caps above a heading */
.text-overline {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-accent);
  display: block;
  margin-bottom: var(--space-2);
}

/* Dropcap */
.text-dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 4.5em;
  font-weight: var(--weight-black);
  line-height: 0.75;
  float: left;
  margin-right: 0.08em;
  margin-top: 0.06em;
  color: var(--color-accent);
}


/* =============================================================================
   04. BUTTON PRIMITIVES
   ============================================================================= */

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-none);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  overflow: hidden;
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.btn:active {
  transform: scale(0.98);
}

/* Primary — White fill */
.btn-primary {
  background: var(--gradient-warm);
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: transparent;
  box-shadow: var(--shadow-accent-sm);
}

.btn-primary::before {
  background: rgba(255, 255, 255, 0.12);
}

.btn-primary:hover {
  background-color: var(--color-accent-light);
  box-shadow: var(--shadow-accent-md);
  transform: translateY(-1px);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:active {
  background-color: var(--color-accent-dark);
  box-shadow: var(--shadow-accent-sm);
  transform: translateY(0) scale(0.98);
}

.btn-primary:disabled {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Secondary — Outline */
.btn-secondary {
  background: transparent;
  color: var(--color-text-accent);
  border-color: var(--color-border-accent);
}

.btn-secondary:hover {
  background: var(--color-accent-muted);
  border-color: var(--color-border-accent-strong);
  color: var(--color-accent-light);
  box-shadow: var(--shadow-accent-sm);
}

.btn-secondary:active {
  background: var(--color-accent-muted-hover);
  transform: scale(0.98);
}

.btn-secondary:disabled {
  border-color: var(--color-border-subtle);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  transform: none;
}

/* Ghost — Transparent with text */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}

.btn-ghost:active {
  background: var(--color-surface-3);
  transform: scale(0.98);
}

.btn-ghost:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  transform: none;
}

/* Dark — Filled dark surface */
.btn-dark {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

.btn-dark:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-accent);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}

.btn-dark:active {
  background: var(--color-surface-3);
  transform: scale(0.98);
}

.btn-dark:disabled {
  background: var(--color-surface-1);
  border-color: var(--color-border-subtle);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  transform: none;
}

/* Size modifiers */
.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-widest);
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wider);
}

/* Icon button — circular */
.btn-icon {
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.btn-icon.btn-sm {
  width: 34px;
  height: 34px;
}

.btn-icon.btn-lg {
  width: 56px;
  height: 56px;
}

/* Loading state */
.btn[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.7;
}

.btn[aria-busy="true"]::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spin 0.6s linear infinite;
  margin-left: var(--space-2);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}


/* =============================================================================
   05. CARD PRIMITIVES
   ============================================================================= */

/* Base card */
.card {
  position: relative;
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-none);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--duration-slow) var(--ease-editorial),
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-slow) var(--ease-smooth);
}

/* Card inner elements */
.card .card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-editorial);
}

.card .card-body {
  padding: var(--space-6);
}

.card .card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.card .card-meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.card .card-meta::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.card .card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: var(--leading-relaxed);
}

/* Badge base */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

/* Badge variants */
.badge-hot {
  background: var(--color-badge-hot-bg);
  color: var(--color-badge-hot);
  border: 1px solid rgba(224, 64, 64, 0.25);
}

.badge-adult {
  background: var(--color-badge-adult-bg);
  color: var(--color-badge-adult);
  border: 1px solid rgba(138, 82, 200, 0.25);
}

.badge-new {
  background: rgba(144, 144, 144, 0.15);
  color: var(--color-accent);
  border: 1px solid rgba(144, 144, 144, 0.25);
}

.badge-exclusive {
  background: rgba(33, 150, 243, 0.12);
  color: #5ab4f7;
  border: 1px solid rgba(33, 150, 243, 0.25);
}

/* Card badge position */
.card .card-badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: var(--z-raised);
}

/* Image overlay card */
.card-image-overlay {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-primary);
  border-radius: var(--radius-none);
}

.card-image-overlay .card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
}

.card-image-overlay .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slower) var(--ease-editorial);
}

.card-image-overlay .card-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-card);
  transition: opacity var(--duration-moderate) var(--ease-out);
}

.card-image-overlay .card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  z-index: 1;
}

.card-image-overlay:hover .card-image img {
  transform: scale(1.04);
}

/* Magazine cover style card */
.card-magazine {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
}

.card-magazine .card-image {
  position: absolute;
  inset: 0;
  aspect-ratio: unset;
}

.card-magazine .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-editorial);
}

.card-magazine .card-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-card);
  z-index: 1;
}

.card-magazine .card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  z-index: 2;
}

.card-magazine .card-issue {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.card-magazine .card-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-bottom: 0;
}

.card-magazine:hover .card-image img {
  transform: scale(1.05);
}

/* Series card — with series number badge */
.card-series {
  position: relative;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
  transition:
    box-shadow var(--duration-slow) var(--ease-editorial),
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-slow) var(--ease-smooth);
}

.card-series .card-image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.card-series .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-editorial);
}

.card-series .series-number {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-raised);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  letter-spacing: -0.02em;
}

.card-series .card-body {
  padding: var(--space-5);
}

.card-series .card-meta {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin-bottom: var(--space-2);
  font-weight: var(--weight-semibold);
}

.card-series .card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.card-series:hover .card-image img {
  transform: scale(1.04);
}

/* Card hover lift effect */
.card-hover:hover,
.card:hover,
.card-series:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-accent);
  transform: translateY(-4px);
}

.card-hover:hover .card-image img {
  transform: scale(1.04);
}


/* =============================================================================
   06. GALLERY GRID PRIMITIVES
   ============================================================================= */

/* Container */
.gallery {
  width: 100%;
}

/* Filter bar */
.gallery-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-8);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: wrap;
}

.gallery-filter::-webkit-scrollbar {
  display: none;
}

.gallery-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-none);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.gallery-filter-btn:hover {
  color: var(--color-text-accent);
  border-color: var(--color-border-accent);
  background: var(--color-accent-muted);
}

.gallery-filter-btn.active,
.gallery-filter-btn[aria-pressed="true"] {
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Uniform 3-column grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

@media (max-width: 1023px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* Masonry layout — CSS columns */
.gallery-masonry {
  columns: 3;
  column-gap: var(--grid-gap);
}

@media (max-width: 1023px) {
  .gallery-masonry {
    columns: 2;
  }
}

@media (max-width: 639px) {
  .gallery-masonry {
    columns: 1;
  }
}

.gallery-masonry .gallery-item {
  break-inside: avoid;
  margin-bottom: var(--grid-gap);
  display: inline-block;
  width: 100%;
}

/* Gallery item */
.gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-1);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slower) var(--ease-editorial);
}

/* Gallery item hover overlay */
.gallery-item-hover {
  position: relative;
  overflow: hidden;
}

.gallery-item-hover img {
  width: 100%;
  display: block;
  transition: transform var(--duration-slower) var(--ease-editorial);
}

.gallery-item-hover .gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  transition: opacity var(--duration-moderate) var(--ease-out);
  z-index: var(--z-raised);
}

.gallery-item-hover .gallery-item-overlay .overlay-icon {
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  transform: scale(0.8);
  transition: transform var(--duration-moderate) var(--ease-bounce);
}

.gallery-item-hover .gallery-item-overlay .overlay-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.gallery-item-hover:hover img {
  transform: scale(1.06);
}

.gallery-item-hover:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-hover:hover .gallery-item-overlay .overlay-icon {
  transform: scale(1);
}

/* Lightbox trigger */
.lightbox-trigger {
  cursor: zoom-in;
  position: relative;
  display: block;
}

.lightbox-trigger::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.lightbox-trigger:hover::after {
  opacity: 1;
}

/* Editorial feature grid */
.gallery-editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: var(--grid-gap);
}

.gallery-editorial .gallery-item-feat {
  grid-column: span 7;
  grid-row: span 6;
}

.gallery-editorial .gallery-item-side {
  grid-column: span 5;
  grid-row: span 3;
}

@media (max-width: 767px) {
  .gallery-editorial {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .gallery-editorial .gallery-item-feat,
  .gallery-editorial .gallery-item-side {
    grid-column: span 1;
    grid-row: span 1;
  }
}


/* =============================================================================
   07. NAVIGATION PRIMITIVES
   ============================================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  padding: 0 var(--content-padding-x);
  background: transparent;
  transition:
    background-color var(--duration-moderate) var(--ease-out),
    box-shadow var(--duration-moderate) var(--ease-out),
    backdrop-filter var(--duration-moderate) var(--ease-out),
    -webkit-backdrop-filter var(--duration-moderate) var(--ease-out);
}

/* Scrolled state — blur + dark bg */
.nav-scrolled {
  background: var(--color-bg-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Inner wrapper */
.nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  gap: var(--space-8);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.nav-logo:hover {
  opacity: 0.85;
}

.nav-logo .nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  line-height: 1;
}

.nav-logo .nav-logo-text span {
  color: var(--color-accent);
}

.nav-logo img {
  height: 32px;
  width: auto;
}

/* Links group */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

/* Individual link */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition:
    color var(--duration-normal) var(--ease-out);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.875rem;
  right: 0.875rem;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-moderate) var(--ease-smooth);
}

.nav-link:hover {
  color: var(--color-text-primary);
}

.nav-link:hover::after,
.nav-link.active::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--color-text-accent);
}

/* Nav spacer — pushes CTA to right */
.nav-spacer {
  flex: 1;
}

/* CTA button in nav */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5625rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
}

.nav-cta:hover {
  background: var(--color-accent-light);
  box-shadow: var(--shadow-accent-sm);
  color: var(--color-text-on-accent);
}

/* Hamburger — mobile */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 5px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition:
    transform var(--duration-moderate) var(--ease-smooth),
    opacity var(--duration-normal) var(--ease-out),
    width var(--duration-normal) var(--ease-out);
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav drawer */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-primary);
  z-index: calc(var(--z-nav) - 1);
  flex-direction: column;
  padding: var(--space-8) var(--content-padding-x);
  gap: var(--space-2);
  overflow-y: auto;
  border-top: 1px solid var(--color-border-subtle);
}

.nav-mobile.open {
  display: flex;
}

.nav-mobile .nav-link {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  width: 100%;
}

.nav-mobile .nav-link::after {
  display: none;
}

/* Responsive show/hide */
@media (max-width: 767px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav {
    height: var(--nav-height-sm);
  }

  .nav-mobile {
    top: var(--nav-height-sm);
  }
}


/* =============================================================================
   08. HERO PRIMITIVES
   ============================================================================= */

/* Full-screen hero */
.hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-bg-primary);
}

/* Hero background image / slide container */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img,
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Subtle scale animation on load */
.hero-bg.animate-in img,
.hero-bg.animate-in video {
  animation: hero-scale-in 8s var(--ease-editorial) forwards;
}

@keyframes hero-scale-in {
  from { transform: scale(1.06); }
  to   { transform: scale(1.00); }
}

/* Dark gradient overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gradient-hero);
  pointer-events: none;
}

/* Ambient glow */
.hero-overlay-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255,255,255,0.06) 0%, transparent 70%),
    var(--gradient-hero);
  pointer-events: none;
}

/* Hero content wrapper */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--nav-height) var(--content-padding-x) var(--section-sm);
  max-width: var(--container-xl);
  width: 100%;
  margin: 0 auto;
  min-height: 100svh;
  min-height: 100vh;
}

.hero-content.align-left {
  align-items: flex-start;
  text-align: left;
}

.hero-content.align-bottom {
  justify-content: flex-end;
  padding-bottom: var(--section-md);
}

/* Hero label/overline */
.hero-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
  opacity: 0;
  animation: fade-up 0.8s var(--ease-smooth) 0.3s forwards;
}

/* Hero wordmark — oversized brand text */
.hero-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-display-hero);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  opacity: 0;
  animation: fade-up 0.9s var(--ease-smooth) 0.1s forwards;
}

.hero-wordmark .wordmark-accent {
  color: var(--color-accent);
}

.hero-wordmark .wordmark-italic {
  font-style: italic;
  font-weight: var(--weight-light);
}

/* Hero subtitle */
.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 560px;
  margin-bottom: var(--space-10);
  opacity: 0;
  animation: fade-up 0.8s var(--ease-smooth) 0.5s forwards;
}

/* Hero CTA group */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fade-up 0.8s var(--ease-smooth) 0.7s forwards;
}

.hero-content.align-left .hero-cta-group {
  justify-content: flex-start;
}

/* Hero scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  animation: fade-in 1s var(--ease-out) 1.4s forwards;
  cursor: pointer;
}

.hero-scroll-indicator .scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scroll-pulse 2s var(--ease-in-out) infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(1.1); }
}

.hero-scroll-indicator .scroll-text {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Hero background slideshow dots */
.hero-dots {
  position: absolute;
  bottom: var(--space-8);
  right: var(--content-padding-x);
  z-index: 2;
  display: flex;
  gap: var(--space-2);
}

.hero-dot {
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    width var(--duration-moderate) var(--ease-smooth);
}

.hero-dot.active {
  width: 40px;
  background: var(--color-accent);
}

/* Animation keyframes */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-up-delay-1 {
  opacity: 0;
  animation: fade-up 0.8s var(--ease-smooth) 0.1s forwards;
}

.fade-up-delay-2 {
  opacity: 0;
  animation: fade-up 0.8s var(--ease-smooth) 0.2s forwards;
}

.fade-up-delay-3 {
  opacity: 0;
  animation: fade-up 0.8s var(--ease-smooth) 0.3s forwards;
}

@media (max-width: 767px) {
  .hero-content {
    padding-top: var(--nav-height-sm);
    padding-bottom: var(--space-16);
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
  }
}


/* =============================================================================
   09. AGE GATE MODAL PRIMITIVE
   ============================================================================= */

/* Full-screen overlay */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-age-gate);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  padding: var(--content-padding-x);
  overflow: hidden;
}

/* Ambient background */
.age-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Center box */
.age-gate-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
  animation: fade-up 0.6s var(--ease-smooth) forwards;
}

/* Logo area */
.age-gate-logo {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  line-height: 1;
}

.age-gate-logo span {
  color: var(--color-accent);
}

/* Divider */
.age-gate-divider {
  width: 48px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Title — 19+ notice */
.age-gate-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

.age-gate-title .age-number {
  display: block;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: var(--weight-black);
  line-height: 1;
  background: var(--gradient-warm-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-2);
}

/* Description */
.age-gate-description {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-tertiary);
  max-width: 360px;
}

/* Legal notice */
.age-gate-legal {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  max-width: 400px;
}

/* Buttons group */
.age-gate-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 360px;
}

.age-gate-buttons .age-gate-confirm {
  width: 100%;
  padding: 1rem 2rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.age-gate-buttons .age-gate-confirm:hover {
  background: var(--color-accent-light);
  box-shadow: var(--shadow-accent-md);
}

.age-gate-buttons .age-gate-deny {
  width: 100%;
  padding: 0.75rem 2rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition:
    color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out);
}

.age-gate-buttons .age-gate-deny:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  background: var(--color-surface-1);
}

/* Language selector inside age gate */
.age-gate-lang {
  display: flex;
  gap: var(--space-4);
}

.age-gate-lang button {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--duration-normal) var(--ease-out);
}

.age-gate-lang button:hover,
.age-gate-lang button.active {
  color: var(--color-text-accent);
}

/* Hidden state */
.age-gate.hidden {
  display: none;
}

/* Fade out transition */
.age-gate.fade-out {
  animation: fade-out 0.4s var(--ease-in-out) forwards;
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

@media (max-width: 479px) {
  .age-gate-box {
    gap: var(--space-6);
  }
}


/* =============================================================================
   10. UTILITY CLASSES
   ============================================================================= */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding-x);
  padding-right: var(--content-padding-x);
}

.container-sm  { max-width: 640px; }
.container-md  { max-width: 768px; }
.container-lg  { max-width: 1024px; }
.container-xl  { max-width: 1280px; }
.container-2xl { max-width: 1440px; }
.container-full { max-width: none; }

/* Section */
.section {
  padding-top: var(--section-md);
  padding-bottom: var(--section-md);
}

.section-sm {
  padding-top: var(--section-sm);
  padding-bottom: var(--section-sm);
}

.section-lg {
  padding-top: var(--section-lg);
  padding-bottom: var(--section-lg);
}

.filter-sticky-top {
  position: sticky;
  top: var(--nav-height);
  z-index: var(--z-sticky);
}

/* Checkbox-driven state helpers */
#nav-toggle,
#age-confirmed {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

#nav-toggle:checked ~ .nav .nav-hamburger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

#nav-toggle:checked ~ .nav .nav-hamburger span:nth-child(2) {
  opacity: 0;
  width: 0;
}

#nav-toggle:checked ~ .nav .nav-hamburger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

#nav-toggle:checked ~ .nav-mobile {
  display: flex;
}

/* Section header system */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.section-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.section-count,
.section-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-tertiary);
}

.section-overline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

.section-title + .section-sub {
  margin-top: var(--space-4);
}

/* Form primitives */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-none);
  outline: none;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-2);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-border-accent-strong);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  background: var(--color-surface-2);
}

.form-select-wrapper {
  position: relative;
}

.form-select-wrapper::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-text-tertiary);
  pointer-events: none;
  transition: border-top-color var(--duration-normal) var(--ease-out);
}

.form-select-wrapper:focus-within::after {
  border-top-color: var(--color-accent);
}

.form-select {
  cursor: pointer;
  padding-right: 2.5rem;
}

.form-select option {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 320px;
}

.form-chars {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: right;
  margin-top: var(--space-1);
}

.form-submit,
.form-submit-btn {
  width: 100%;
}

.form-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.form-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.form-checkbox-custom {
  width: 18px;
  height: 18px;
  min-width: 18px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
  margin-top: 2px;
}

.form-checkbox-custom::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--color-text-on-accent);
  border-bottom: 2px solid var(--color-text-on-accent);
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.form-checkbox:checked + .form-checkbox-custom {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.form-checkbox:checked + .form-checkbox-custom::after {
  opacity: 1;
}

.form-checkbox:focus-visible + .form-checkbox-custom {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.form-checkbox-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.form-checkbox-label a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Contact card primitives */
.contact-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-6);
  text-decoration: none;
  transition: var(--transition-normal);
}

.contact-card:hover {
  border-color: var(--color-border-accent);
  background: var(--color-surface-2);
}

.contact-card--row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.contact-card--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-card__icon {
  width: 44px;
  height: 44px;
  background: var(--color-accent-muted);
  border: 1px solid var(--color-border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-card__icon svg {
  width: 20px;
  height: 20px;
  fill: var(--color-accent);
}

.contact-card__info {
  flex: 1;
}

.contact-card__platform,
.contact-card-platform {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-card__handle,
.contact-card-handle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.contact-card__note,
.contact-card-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-tertiary);
}

.contact-card__arrow {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  transition: transform var(--duration-normal) var(--ease-smooth);
}

.contact-card:hover .contact-card__arrow {
  transform: translateX(4px);
  color: var(--color-accent);
}

/* Legal page primitives */
.legal-page {
  min-height: 100vh;
  padding: var(--section-md) var(--content-padding-x);
  background: var(--color-bg-primary);
}

.legal-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.legal-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Footer systems */
.site-footer,
.footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-subtle);
}

.site-footer {
  padding: clamp(3rem, 6vw, 5rem) var(--content-padding-x) clamp(2rem, 4vw, 3rem);
}

.footer {
  padding: var(--section-sm) var(--content-padding-x);
}

.site-footer-inner,
.footer-inner,
.footer__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.footer-top,
.footer__top {
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-8);
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.footer-brand,
.footer-social {
  display: flex;
  flex-direction: column;
}

.footer-brand {
  gap: var(--space-4);
}

.footer-social {
  gap: var(--space-3);
}

.footer-logo,
.footer__logo,
.footer-wordmark,
.footer-logo-text {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.footer-logo,
.footer__logo {
  font-size: var(--text-2xl);
  display: inline-block;
  margin-bottom: var(--space-4);
}

.footer-wordmark {
  font-size: 1.2rem;
}

.footer-logo-text {
  font-size: 2rem;
}

.footer-logo span,
.footer__logo span,
.footer-wordmark span,
.footer-logo-text span {
  color: var(--color-accent);
}

.footer-tagline,
.footer__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.footer-tagline {
  color: var(--color-text-muted);
}

.footer__desc {
  color: var(--color-text-tertiary);
  max-width: 280px;
  margin-bottom: var(--space-6);
}

.footer-social-label,
.footer__nav-title,
.footer-link-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.footer-social-label {
  margin-bottom: var(--space-1);
}

.footer__nav-title,
.footer-link-title {
  margin-bottom: var(--space-5);
}

.footer-socials,
.footer-social-links,
.footer__sns,
.footer-legal,
.footer__legal,
.footer-links {
  display: flex;
}

.footer-socials,
.footer-social-links,
.footer__sns {
  gap: var(--space-3);
}

.footer-socials,
.footer-links {
  align-items: center;
}

.footer-social-links,
.footer-links {
  flex-wrap: wrap;
}

.footer-links {
  gap: var(--space-8);
}

.footer-link-list,
.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-social-link,
.footer__nav-link,
.footer-link-list a,
.footer__legal a {
  font-family: var(--font-body);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-out);
}

.footer-social-link {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.footer__nav-link,
.footer-link-list a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.footer__legal a {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer-social-link:hover,
.footer__nav-link:hover,
.footer-link-list a:hover {
  color: var(--color-text-accent);
}

.footer__legal a:hover {
  color: var(--color-text-tertiary);
}

.footer__sns-btn {
  width: 36px;
  height: 36px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition-normal);
}

.footer__sns-btn:hover {
  background: var(--color-accent-muted);
  border-color: var(--color-border-accent);
}

.footer__sns-btn svg {
  width: 16px;
  height: 16px;
  fill: var(--color-text-tertiary);
  transition: fill var(--duration-normal) var(--ease-out);
}

.footer__sns-btn:hover svg {
  fill: var(--color-accent);
}

.footer-bottom,
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-copy,
.footer-copyright,
.footer__copyright {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 1023px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-top,
  .footer-bottom,
  .footer__bottom,
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__top {
    grid-template-columns: 1fr;
  }
}

.marquee-scroll {
  animation: marquee-scroll 28s linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Visually hidden (accessible) */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Text truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

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

/* Background utilities */
.bg-primary   { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary  { background-color: var(--color-bg-tertiary); }
.bg-elevated  { background-color: var(--color-bg-elevated); }
.bg-surface-1 { background-color: var(--color-surface-1); }
.bg-surface-2 { background-color: var(--color-surface-2); }
.bg-accent    { background-color: var(--color-accent); }

/* Text color utilities */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-text-accent); }
.text-inverse   { color: var(--color-text-inverse); }

/* Aspect ratio utilities */
.aspect-ratio-3-4 {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.aspect-ratio-2-3 {
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.aspect-ratio-21-9 {
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.aspect-ratio-3-4 img,
.aspect-ratio-1-1 img,
.aspect-ratio-4-3 img,
.aspect-ratio-16-9 img,
.aspect-ratio-2-3 img,
.aspect-ratio-21-9 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Divider */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border-subtle);
  border: none;
}

.divider-accent {
  background: var(--color-accent);
  width: 48px;
  height: 1px;
  border: none;
  display: block;
}

/* Flex utils */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing utils — margin */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Display */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.grid         { display: grid; }
.hidden       { display: none; }

/* Pointer events */
.pointer-none   { pointer-events: none; }
.pointer-auto   { pointer-events: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-zoom    { cursor: zoom-in; }

/* Opacity */
.opacity-0  { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Rounded */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Width / Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }
.h-auto  { height: auto; }
.min-h-screen { min-height: 100svh; min-height: 100vh; }

/* Object fit */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center  { object-position: center; }
.object-top     { object-position: top; }

/* Text align */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Font utils */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.italic       { font-style: italic; }
.not-italic   { font-style: normal; }
.uppercase    { text-transform: uppercase; }
.lowercase    { text-transform: lowercase; }
.normal-case  { text-transform: none; }

/* Transition utilities */
.transition       { transition: var(--transition-normal); }
.transition-fast  { transition: var(--transition-fast); }
.transition-slow  { transition: var(--transition-slow); }
.transition-color { transition: var(--transition-color); }

/* Border utilities */
.border-subtle  { border: 1px solid var(--color-border-subtle); }
.border-default { border: 1px solid var(--color-border-default); }
.border-accent  { border: 1px solid var(--color-border-accent); }
.border-t       { border-top: 1px solid var(--color-border-subtle); }
.border-b       { border-bottom: 1px solid var(--color-border-subtle); }

/* No-select */
.no-select {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Body lock (when modal open) */
body.scroll-locked {
  overflow: hidden;
  height: 100%;
}

/* Inset overlay */
.overlay-dark {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
  z-index: var(--z-overlay);
}

.overlay-gradient {
  position: absolute;
  inset: 0;
  background: var(--gradient-dark-overlay);
  pointer-events: none;
}