/* ============================================================
   Buran Casino — design-fine.css
   TYPO-01 · SPACE-08 · CONT-01(1200) · BP-01 · GEO-10 · MOTION-06
   Component variants: HEAD-14 FOOT-10 HERO-07 PHEAD-10 GRID-09 FAQ-01
   REV-07 CTA-03 PROSE-03 TABLE-08 LEGAL-07 FORM-08 COOK-04 ERR-01
   BYLINE-07 AUTH-08. Media strategy: desktop-first.
   ============================================================ */

:root {
  /* Colors (.final) */
  --color-primary: #1c273f;
  --color-accent: #db419e;
  --color-bg: #0f1829;
  --color-bg-elevated: #182338;
  --color-accent-pressed: #ce2899;
  --color-gradient-light: #2ccdce;
  --color-gradient-mid: #e89e39;
  --color-text: #ffffff;
  --color-text-muted: #bfbdbd;
  --color-rg-banner: #dc2626;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  /* Fonts */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* TYPO-01 (desktop) */
  --fs-h1: 64px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-h6: 16px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --lh-loose: 1.75;
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* SPACE-08 */
  --space-2xs: 5px;
  --space-xs: 10px;
  --space-sm: 15px;
  --space-md: 25px;
  --space-lg: 40px;
  --space-xl: 60px;
  --space-2xl: 90px;
  --space-3xl: 140px;
  /* Section vertical rhythm token (pairs stay <= 110px per A-09) */
  --sec-y: 48px;

  /* CONT-01 (spec override: 1200 / 670) */
  --container-site: 1200px;
  --container-readable: 670px;
  --container-padding-desktop: 48px;
  --container-padding-tablet: 32px;
  --container-padding-mobile: 16px;

  /* GEO-10 */
  --radius-xs: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* MOTION-06 */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-out: cubic-bezier(0.3, 0.7, 0.4, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  font-weight: var(--fw-regular);
}
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); }
button { font-family: inherit; }

.main { display: block; }

/* ---------- skip-link ---------- */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: 200;
  background: var(--color-accent);
  color: var(--color-text);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.skip-link:not(:focus) { top: -200px !important; }

/* ---------- a11y ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Shared section inner wrapper — full site width (A-08 literal calc) */
.tribune-sharp-inner,
.porche-plus-inner,
.socle-plus-inner,
.glyph-cool-inner,
.reel-bold-inner,
.nave-deep-inner,
.marque-cool-inner,
.belfry-signal-inner,
.ridge-fine-inner,
.belvedere-flux-inner,
.pavilion-refined-inner,
.harbor-swift-inner,
.alcove-alt-inner,
.page-media-inner {
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  margin-inline: auto;
  padding-inline: var(--container-padding-desktop);
  width: 100%;
}

/* ============================================================
   HEADER — HEAD-14 (centered hero-logo, 3 rows, drawer toggle)
   ============================================================ */
.tribune-sharp {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.tribune-sharp-row {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tribune-sharp-row-logo {
  position: relative;
  justify-content: center;
  padding-block: var(--space-md);
}
.tribune-sharp-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.tribune-sharp-logo-img {
  height: 88px;
  width: auto;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
.tribune-sharp-row-nav {
  padding-bottom: var(--space-sm);
}
.tribune-sharp-nav { width: 100%; }
.tribune-sharp-nav-list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tribune-sharp-nav-item { display: inline-flex; }
.tribune-sharp-link {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h6);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-2xs);
  transition: color var(--dur-base) var(--ease-out);
}
.tribune-sharp-link:hover,
.tribune-sharp-link[aria-current='page'] { color: var(--color-accent); }
.tribune-sharp-row-auth {
  justify-content: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
}
.tribune-sharp-auth-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  padding: var(--space-2xs) var(--space-lg);
  min-height: 40px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-accent);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.tribune-sharp-auth-btn--login {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.tribune-sharp-auth-btn--login:hover {
  background: var(--color-text);
  color: var(--color-bg);
}
.tribune-sharp-auth-btn--register {
  background: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}
.tribune-sharp-auth-btn--register:hover {
  background: var(--color-accent-pressed);
  color: var(--color-text);
}

/* Toggle (drawer burger) — hidden on desktop */
.tribune-sharp-toggle {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.tribune-sharp-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-pill);
}

/* Drawer — inside header, hidden by default */
.tribune-sharp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 82vw);
  background: var(--color-bg-elevated);
  border-left: 1px solid var(--color-border);
  padding: var(--space-xl) var(--space-md) var(--space-md);
  z-index: 150;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  overflow-y: auto;
}
.tribune-sharp-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.tribune-sharp-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.tribune-sharp-drawer-item { display: block; }
.tribune-sharp-drawer-link {
  display: block;
  padding: var(--space-sm) var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text);
  text-decoration: none;
}
.tribune-sharp-drawer-link:hover,
.tribune-sharp-drawer-link[aria-current='page'] { color: var(--color-accent); }
.tribune-sharp-drawer-auth {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.tribune-sharp-drawer-auth .tribune-sharp-auth-btn { justify-content: center; }

/* ============================================================
   FOOTER — FOOT-10 (sectioned detail-rich)
   ============================================================ */
.porche-plus {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-2xl);
}
.porche-plus-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.porche-plus-logo { display: inline-flex; line-height: 0; flex-shrink: 0; }
.porche-plus-logo-img { height: 72px; width: auto; border-radius: var(--radius-sm); }
.porche-plus-slogan {
  max-width: 520px;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}
.porche-plus-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}
.porche-plus-nav-col { display: block; }
.porche-plus-nav-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h6);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}
.porche-plus-nav-list { list-style: none; margin: 0; padding: 0; }
.porche-plus-nav-link-item { margin-bottom: var(--space-xs); }
.porche-plus-nav-link {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.porche-plus-nav-link:hover { color: var(--color-accent); }
.porche-plus-disclaimer {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.porche-plus-disclaimer-text {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
}
.porche-plus-copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
}
.porche-plus-copyright-text { color: var(--color-text-muted); font-size: var(--fs-micro); }
.porche-plus-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.porche-plus-legal-item { display: inline-flex; }
.porche-plus-legal-link {
  color: var(--color-text-muted);
  font-size: var(--fs-micro);
  text-decoration: none;
}
.porche-plus-legal-link:hover { color: var(--color-accent); }

/* ============================================================
   HERO — HERO-07 (top-tile + text below)
   ============================================================ */
.socle-plus { background: var(--color-bg); padding-bottom: var(--sec-y); }
.socle-plus-figure { margin: 0; position: relative; }
.socle-plus-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
}
.socle-plus-figure::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}
.socle-plus-content {
  
  margin-top: var(--space-xl);
}
.socle-plus-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--color-text);
}
.socle-plus-subtitle {
  margin-top: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
}
.socle-plus-cta {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h6);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.socle-plus-cta:hover { background: var(--color-accent-pressed); color: var(--color-text); }

/* ============================================================
   PAGE HEADER — PHEAD-10 (manifesto style)
   ============================================================ */
.glyph-cool { background: var(--color-bg); padding-block: var(--sec-y); }
.glyph-cool-inner { text-align: center; }
.glyph-cool-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(30px, 7vw, 64px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--color-text);
  margin-inline: auto;
  max-width: 900px;
}
.glyph-cool-divider {
  display: block;
  color: var(--color-accent);
  font-size: var(--fs-h2);
  line-height: 1;
  margin-block: var(--space-sm);
}
.glyph-cool-description {
  font-style: italic;
  font-size: var(--fs-h5);
  color: var(--color-text-muted);
  max-width: var(--container-readable);
  margin-inline: auto;
  line-height: var(--lh-normal);
}
.glyph-cool-meta {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.glyph-cool-meta-sep { color: var(--color-accent); margin-inline: var(--space-2xs); }

/* ============================================================
   PROSE — PROSE-03 (bordered sidebar notes)
   ============================================================ */
.ridge-fine { background: var(--color-bg); padding-block: var(--sec-y); }
.ridge-fine-hold { max-width: var(--container-readable); }
.ridge-fine-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.ridge-fine-body { display: block; }
.ridge-fine-body p {
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-md);
}
.ridge-fine-body ul,
.ridge-fine-body ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
  color: var(--color-text);
}
.ridge-fine-body li { margin-bottom: var(--space-xs); line-height: var(--lh-loose); }
.ridge-fine-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ridge-fine-body a:hover { text-decoration-thickness: 2px; }
.ridge-fine-body strong { color: var(--color-text); font-weight: var(--fw-bold); }
.ridge-fine-body em { font-style: italic; }

/* ============================================================
   ITEMS GRID — GRID-09 (horizontal scroll strip)
   ============================================================ */
.reel-bold { background: var(--color-bg); padding-block: var(--sec-y); }
.reel-bold-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}
.reel-bold-list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.reel-bold-item {
  flex: 0 0 320px;
  min-height: 200px;
  scroll-snap-align: start;
  padding: var(--space-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out);
}
.reel-bold-item:hover { border-color: var(--color-accent); }
.reel-bold-item-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  line-height: var(--lh-tight);
}
.reel-bold-item-text { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-normal); }

/* ============================================================
   REVIEWS — REV-07 (color-coded grid, numeric rating)
   ============================================================ */
.marque-cool { background: var(--color-bg); padding-block: var(--sec-y); }
.marque-cool-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}
.marque-cool-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.marque-cool-item {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
}
/* Rating band encoded via left border (avoids alpha-bg contrast fail) */
.marque-cool-item--high { border-left: 4px solid var(--color-accent); }
.marque-cool-item--mid { border-left: 4px solid var(--color-gradient-light); }
.marque-cool-item--low { border-left: 4px solid var(--color-gradient-mid); }
.marque-cool-item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.marque-cool-author { font-weight: var(--fw-bold); color: var(--color-text); font-size: var(--fs-body); }
.marque-cool-date { font-size: var(--fs-micro); color: var(--color-text-muted); white-space: nowrap; }
.marque-cool-rating { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.marque-cool-rating-num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-accent);
  line-height: 1;
}
.marque-cool-rating-bar {
  position: relative;
  flex: 1;
  height: 6px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.marque-cool-rating-fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}
.marque-cool-text { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-loose); }

/* ============================================================
   FAQ — FAQ-01 (classic accordion, button + hidden)
   ============================================================ */
.nave-deep { background: var(--color-bg); padding-block: var(--sec-y); }
.nave-deep-hold-note { display: none; }
.nave-deep-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  max-width: var(--container-readable);
}
.nave-deep-list { max-width: var(--container-readable); }
.nave-deep-item { border-bottom: 1px solid var(--color-border); padding-block: var(--space-md); }
.nave-deep-term { margin: 0; }
.nave-deep-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
  transition: color var(--dur-base) var(--ease-out);
}
.nave-deep-question:hover { color: var(--color-accent); }
.nave-deep-question-text { flex: 1; }
.nave-deep-icon {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.nave-deep-question[aria-expanded='true'] .nave-deep-icon { transform: rotate(45deg); }
.nave-deep-answer { padding-top: var(--space-sm); }
.nave-deep-answer[hidden] { display: none; }
.nave-deep-answer-text { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-loose); }

/* ============================================================
   DATA TABLE — TABLE-08 (floating cards grid)
   ============================================================ */
.belvedere-flux { background: var(--color-bg); padding-block: var(--sec-y); }
.belvedere-flux-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}
.belvedere-flux-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.belvedere-flux-card {
  padding: var(--space-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.belvedere-flux-field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.belvedere-flux-label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  font-family: var(--font-display);
}
.belvedere-flux-value { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--color-text); }

/* ============================================================
   CTA — CTA-03 (split visual + text)
   ============================================================ */
.belfry-signal { background: var(--color-bg); padding-block: var(--sec-y); }
.belfry-signal-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* keep -inner as the shared full-width wrapper; internal padding handled below */
  padding-inline: var(--container-padding-desktop);
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-lg);
}
.belfry-signal-text {
  padding: var(--space-2xl);
  background: var(--color-bg);
}
.belfry-signal-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.belfry-signal-description { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-loose); margin-bottom: var(--space-lg); }
.belfry-signal-button {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h6);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.belfry-signal-button:hover { background: var(--color-accent-pressed); color: var(--color-text); }
.belfry-signal-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}
.belfry-signal-visual-figure {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(30px, 12vw, 140px);
  line-height: 1;
  color: var(--color-text);
  text-transform: uppercase;
}

/* ============================================================
   AUTHOR CARD — AUTH-08 (used bigger on /about/)
   ============================================================ */
.alcove-alt { background: var(--color-bg); padding-block: var(--sec-y); }
.alcove-alt-card {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  padding: var(--space-xl);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  
}
.alcove-alt-portrait {
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  object-fit: cover;
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-bg-elevated);
}
.alcove-alt-body { display: block; }
.alcove-alt-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}
.alcove-alt-role {
  color: var(--color-accent);
  font-size: var(--fs-h6);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-top: var(--space-2xs);
}
.alcove-alt-bio { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-loose); margin-top: var(--space-md); }
.alcove-alt-expertise {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.alcove-alt-expertise-item {
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-primary);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* ============================================================
   BYLINE — BYLINE-07 (expertise tags block)
   ============================================================ */
.armoire-sharp { background: var(--color-bg); padding-block: var(--sec-y); }
.armoire-sharp-card {
  
  padding: var(--space-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.armoire-sharp-header { display: flex; gap: var(--space-md); align-items: center; }
.armoire-sharp-portrait {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  object-fit: cover;
  object-position: center 20%;
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-bg-elevated);
}
.armoire-sharp-ident { display: block; }
.armoire-sharp-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--color-text);
  line-height: var(--lh-tight);
}
.armoire-sharp-name-link { color: var(--color-text); text-decoration: none; }
.armoire-sharp-name-link:hover { text-decoration: underline; color: var(--color-accent); }
.armoire-sharp-role { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: var(--space-2xs); }
.armoire-sharp-bio { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-loose); margin-top: var(--space-md); }
.armoire-sharp-expertise { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.armoire-sharp-tag {
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-primary);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.armoire-sharp-dates { margin-top: var(--space-md); font-size: var(--fs-small); color: var(--color-text-muted); }
.armoire-sharp-date { color: var(--color-text-muted); }
.armoire-sharp-date-sep { color: var(--color-accent); margin-inline: var(--space-2xs); }
.armoire-sharp-link {
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--fw-medium);
}

/* ============================================================
   LEGAL — LEGAL-07 (magazine editorial)
   ============================================================ */
.pavilion-refined { background: var(--color-bg); padding-block: var(--sec-y); }
.pavilion-refined-hold { max-width: var(--container-readable); }
.pavilion-refined-eyebrow {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.pavilion-refined-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--color-text);
}
.pavilion-refined-intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--color-text);
  line-height: var(--lh-normal);
  margin-top: var(--space-md);
}
.pavilion-refined-updated {
  margin-top: var(--space-sm);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
}
.pavilion-refined-section { margin-top: var(--space-xl); }
.pavilion-refined-section-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--color-text);
}
.pavilion-refined-rule {
  width: 80px;
  height: 3px;
  border: 0;
  background: var(--color-accent);
  margin: var(--space-sm) 0 var(--space-md);
}
.pavilion-refined-para { color: var(--color-text); font-size: var(--fs-body); line-height: var(--lh-loose); margin-bottom: var(--space-md); }
.pavilion-refined-contacts {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pavilion-refined-contacts-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}
.pavilion-refined-contacts-list { padding-left: var(--space-lg); color: var(--color-text); }
.pavilion-refined-contact-item { margin-bottom: var(--space-xs); line-height: var(--lh-normal); }
.pavilion-refined-disclaimer {
  margin-top: var(--space-xl);
  padding: var(--space-md);
  background: rgba(220, 38, 38, 0.1);
  border-left: 3px solid var(--color-rg-banner);
  border-radius: var(--radius-xs);
}
.pavilion-refined-disclaimer-text { color: var(--color-text); font-size: var(--fs-small); line-height: var(--lh-normal); }

/* ============================================================
   CONTACT FORM — FORM-08 (asymmetric wide submit)
   ============================================================ */
.harbor-swift { background: var(--color-bg); padding-block: var(--sec-y); }
.harbor-swift-box {
  max-width: var(--container-readable);
  padding: var(--space-xl);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.harbor-swift-intro { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-loose); margin-bottom: var(--space-lg); }
.harbor-swift-success {
  display: none;
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  background: rgba(44, 205, 206, 0.12);
  border: 1px solid var(--color-gradient-light);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.harbor-swift-success.is-visible { display: block; }
.harbor-swift-form { display: flex; flex-direction: column; gap: var(--space-md); }
.harbor-swift-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.harbor-swift-label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text);
}
.harbor-swift-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  min-height: 48px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.harbor-swift-input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
.harbor-swift-textarea { min-height: 140px; resize: vertical; }
.harbor-swift-submit {
  width: 100%;
  height: 72px;
  background: var(--color-accent);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.harbor-swift-submit:hover { background: var(--color-accent-pressed); color: var(--color-text); }

/* ============================================================
   PER-PAGE IMAGES
   ============================================================ */
.page-media { background: var(--color-bg); padding-block: var(--sec-y); }
.page-media-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  align-items: start;
}
.page-media-figure { margin: 0; }
.page-media-img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ============================================================
   COOKIE — COOK-04 (slide-up banner + backdrop)
   ============================================================ */
.secteur-pure-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 140;
  display: none;
}
.secteur-pure-backdrop.is-visible { display: block; }
.secteur-pure {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: var(--color-bg);
  border-top: 4px solid var(--color-accent);
  padding: var(--space-xl);
  z-index: 145;
  display: none;
}
.secteur-pure.is-visible { display: block; }
.secteur-pure-box {
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}
.secteur-pure-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.secteur-pure-message { color: var(--color-text-muted); font-size: var(--fs-small); line-height: var(--lh-normal); max-width: 720px; }
.secteur-pure-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
.secteur-pure-button {
  min-height: 48px;
  padding-inline: var(--space-lg);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.secteur-pure-button--accept {
  background: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}
.secteur-pure-button--accept:hover { background: var(--color-accent-pressed); color: var(--color-text); }
.secteur-pure-button--decline {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.secteur-pure-button--decline:hover { background: var(--color-primary); color: var(--color-text); }

/* ============================================================
   ERROR — ERR-01 (centered hero-style 404)
   ============================================================ */
.atrium-fresh {
  background: var(--color-bg);
  padding-block: var(--space-3xl);
  text-align: center;
}
.atrium-fresh-box {
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  margin-inline: auto;
  padding-inline: var(--container-padding-desktop);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}
.atrium-fresh-number {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(30px, 18vw, 200px);
  line-height: var(--lh-tight);
  color: var(--color-accent);
}
.atrium-fresh-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--color-text);
  max-width: 760px;
}
.atrium-fresh-text { color: var(--color-text-muted); font-size: var(--fs-h5); line-height: var(--lh-normal); max-width: 600px; }
.atrium-fresh-button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--space-xl);
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h6);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.atrium-fresh-button:hover { background: var(--color-accent-pressed); color: var(--color-text); }

/* ============================================================
   RESPONSIVE (desktop-first, BP-01: 1080 / 760 / 480)
   ============================================================ */
@media (max-width: 1079px) {
  :root { --fs-h1: 52px; --fs-h2: 34px; }
  .porche-plus-nav { grid-template-columns: repeat(2, 1fr); }
  .tribune-sharp-row { padding-inline: var(--space-md); }
}

@media (max-width: 759px) {
  :root {
    --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 18px; --fs-h5: 16px; --fs-h6: 14px;
    --fs-body: 16px; --fs-small: 13px; --fs-micro: 11px;
    --container-padding-desktop: 16px;
  }
  /* HEAD-14 collapses to logo + burger; nav & auth rows hidden into drawer */
  .tribune-sharp-toggle { display: flex; }
  .tribune-sharp-row-nav,
  .tribune-sharp-row-auth { display: none; }
  .tribune-sharp-logo-img { height: 60px; }
  .tribune-sharp-row-logo { justify-content: flex-start; padding-block: var(--space-sm); }

  .socle-plus-img { height: 220px; }
  .socle-plus-content { margin-top: var(--space-lg); }

  .marque-cool-list { grid-template-columns: 1fr; }
  .belfry-signal-inner { grid-template-columns: 1fr; }
  .belfry-signal-text { padding: var(--space-xl); }
  .belfry-signal-visual { min-height: 180px; }

  .alcove-alt-card { flex-direction: column; align-items: center; text-align: center; padding: var(--space-lg); }
  .alcove-alt-expertise { justify-content: center; }

  .porche-plus-nav { grid-template-columns: 1fr; gap: var(--space-md); }
  .porche-plus-brand { flex-direction: column; align-items: flex-start; }
  .porche-plus-copyright { flex-direction: column; align-items: flex-start; }

  .secteur-pure { padding: 12px 14px; }
  .secteur-pure-title { display: none; }
  .secteur-pure-message { font-size: 13px; line-height: 1.35; }
  .secteur-pure-box { gap: 8px; }
  .secteur-pure-button { min-height: 36px; padding: 8px 14px; font-size: 12px; }
  .secteur-pure-actions { width: 100%; }
  .secteur-pure-button { flex: 1 1 auto; }
}

@media (max-width: 479px) {
  .reel-bold-item { flex-basis: 80vw; }
}

@media (max-width: 833px) {
  .tribune-sharp-nav,
  .tribune-sharp-nav-list,
  .tribune-sharp-link,
  .tribune-sharp-auth-btn { display: none !important; }
  .tribune-sharp-toggle { display: flex !important; }
}

.page-media-figure img{max-width:100%;max-height:56vh;width:auto;height:auto;margin-inline:auto;display:block}

.socle-plus-figure img{max-width:100%;max-height:56vh;width:auto;height:auto;margin-inline:auto;display:block}

@media (max-width: 480px) {
  .reel-bold-list { flex-wrap: wrap; }
  .reel-bold-item, .reel-bold-item-title, .reel-bold-item-text, .belfry-signal-text, .belfry-signal-visual { min-width: 0; max-width: 100%; }
  .reel-bold-item-title, .reel-bold-item-text { overflow-wrap: anywhere; }
}