/* Broadsheet component classes — ported from the design handoff. */

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

body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px;
  margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-700, #ec3013); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* Bilingual toggle */
[lang="fr"] { display: none; }
[data-lang="fr"] [lang="fr"] { display: revert; }
[data-lang="fr"] [lang="en"] { display: none; }

/* --- Rules --- */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 14px calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* --- Forms --- */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input::placeholder {
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  opacity: 1;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* --- Cards --- */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* --- Tags --- */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* --- Navigation --- */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* --- Tables --- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* --- Dialog --- */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* --- Halftone print effect (disabled — photos stay clean) --- */
.halftone { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 0 8px rgba(0,0,0,0.08); }
.halftone img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- CMYK four-color separation --- */
.cmyk { position: relative; overflow: hidden; background: var(--color-bg); }
.cmyk img:first-child { opacity: 0; }
.cmyk img+img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.cmyk .sep-c { filter: url(#sep-c); }
.cmyk .sep-m { filter: url(#sep-m); }
.cmyk .sep-y { filter: url(#sep-y); }
.cmyk .sep-k { filter: url(#sep-k); }
.cmyk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,0.22) 30%, transparent 32%);
  background-size: 3px 3px; mix-blend-mode: multiply;
}
.cmyk .print { position: relative; width: 100%; filter: url(#sep-all); }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .cmyk .print:hover { filter: none; }
}

/* CMYK plate numerals */
.cmyk-num {
  --cmyk-num-ground: var(--color-bg);
  position: relative; width: fit-content; line-height: 0.9;
  font-feature-settings: "pnum" 1;
  background: var(--cmyk-num-ground); padding: 0.12em; margin: -0.12em;
}
.cmyk-num .paper {
  color: var(--color-bg);
  text-shadow: 0.036em 0.025em 0 var(--color-bg), -0.031em -0.023em 0 var(--color-bg);
}
.cmyk-num .plate {
  position: absolute; inset: 0.12em; mix-blend-mode: multiply;
  text-box: trim-both cap alphabetic;
}
.cmyk-num .plate-c { color: var(--color-accent); }
.cmyk-num .plate-m {
  color: var(--color-accent-2);
  translate: calc(0.036em + 0.018em*var(--press-nx, 0)) calc(0.025em + 0.0125em*var(--press-ny, 0));
}
.cmyk-num .plate-y {
  color: var(--color-process-yellow);
  translate: calc(-0.031em + 0.018em*var(--press-nx, 0)) calc(-0.023em + 0.0125em*var(--press-ny, 0));
}

/* CMYK plate headlines */
.cmyk-head { position: relative; }
.cmyk-head .paper {
  color: var(--color-bg);
  text-shadow: 0.027em 0.0185em 0 var(--color-bg), -0.0245em -0.0175em 0 var(--color-bg);
}
.cmyk-head .plate {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  pointer-events: none; user-select: none;
  text-box: trim-both cap alphabetic;
}
.cmyk-head .plate-c { color: var(--color-accent); }
.cmyk-head .plate-m {
  color: var(--color-accent-2);
  translate: calc(0.018em + 0.009em*var(--press-nx, 0)) calc(0.0125em + 0.006em*var(--press-ny, 0));
}
.cmyk-head .plate-y {
  color: var(--color-process-yellow);
  translate: calc(-0.0155em + 0.009em*var(--press-nx, 0)) calc(-0.0115em + 0.006em*var(--press-ny, 0));
}

/* --- Animations --- */
@keyframes rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes stamppop { 0% { opacity: 0; scale: 2.1; } 70% { opacity: 1; scale: 0.96; } 100% { opacity: 1; scale: 1; } }
@keyframes inkin { from { opacity: 0; } to { opacity: 1; } }
@keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.rise { animation: rise 0.7s cubic-bezier(0.2,0.8,0.2,1) both; }
.rise-2 { animation: rise 0.7s cubic-bezier(0.2,0.8,0.2,1) 0.18s both; }
.rise-3 { animation: rise 0.7s cubic-bezier(0.2,0.8,0.2,1) 0.34s both; }
.stamp-in { animation: stamppop 0.5s cubic-bezier(0.2,0.8,0.2,1) 0.45s both; }

@supports (animation-timeline: view()) {
  .reveal { animation: rise 1ms cubic-bezier(0.2,0.8,0.2,1) both; animation-timeline: view(); animation-range: entry 5% entry 45%; }
  .reveal-2 { animation: rise 1ms cubic-bezier(0.2,0.8,0.2,1) both; animation-timeline: view(); animation-range: entry 12% entry 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .rise-2, .rise-3, .stamp-in, .reveal, .reveal-2 { animation: none !important; }
  .ticker { animation: none !important; }
}

/* --- Shared broadsheet footer --- */
.bs-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px) 36px;
  clear: both;
}
.bs-footer-rule {
  height: 0; border: 0;
  border-top: 1px solid var(--color-text);
  margin: 0 0 24px;
}
.bs-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px clamp(20px, 3vw, 48px);
  font-size: 13px; line-height: 22px;
}
.bs-footer-col {
  display: grid; gap: 0; align-content: start;
}
.bs-footer-head {
  font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}
.bs-footer-col a {
  text-decoration: none; color: inherit;
  font-size: 12px; line-height: 20px;
  padding: 4px 0;
}
.bs-footer-col a:hover {
  color: var(--color-accent-700);
}
.bs-footer-sign {
  font-size: 11px; line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 24px 0 0;
}

/* --- Shared page wrapper --- */
.bs-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}
.bs-page section { padding: 0 0 84px; }

/* --- Ticker band --- */
.bs-ticker {
  overflow: hidden; white-space: nowrap;
}
.bs-ticker-inner {
  display: inline-flex; gap: 56px;
  padding: 10px 0;
  font-family: var(--shout); font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase;
  animation: tick 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bs-ticker-inner { animation: none !important; }
}

/* --- Section rule pair --- */
.bs-rulepair {
  height: 5px; border: 0;
  border-top: 2px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
  margin: 0 0 14px;
}
.bs-dateline {
  margin: 0; font-size: 13px; line-height: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Shared stamp badge — the canonical hand-drawn label treatment.
   Page-specific classes override only the values that intentionally differ. */
.bs-stamp {
  display: inline-block;
  font-family: var(--scrawl);
  font-weight: 800;
  border: 2px solid var(--maple);
  color: var(--maple-deep);
  background: var(--maple-tint);
  padding: 7px 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: var(--radius-sm);
  transform: rotate(-2deg);
}

/* ---- Skip-to-content link ---- */
/* --- Content shop CTA --- */
/* ── Freebie CTA — floating thundercloud ──
   Small cloud bubble that floats within content flow.
   Odd variants float right, even float left.
   filter:drop-shadow traces card + bumps + dots. */
.content-shop-cta {
  width: 240px;
  float: right;
  margin: 8px 0 20px 28px;
  padding: 16px 0 18px;
  filter:
    drop-shadow(0 1.5px 0 var(--color-text, #1a1918))
    drop-shadow(1.5px 0 0 var(--color-text, #1a1918))
    drop-shadow(0 -1.5px 0 var(--color-text, #1a1918))
    drop-shadow(-1.5px 0 0 var(--color-text, #1a1918))
    drop-shadow(4px 5px 0 color-mix(in srgb, var(--color-text, #1a1918) 10%, transparent));
}
.content-shop-cta .cta-card {
  position: relative;
  background: var(--color-bg, #faf9f7);
  border: none;
  border-radius: 22px;
  padding: 0;
  overflow: visible;
  transition: transform 0.2s ease;
}
.content-shop-cta .cta-card:hover {
  transform: translateY(-2px);
}
/* Cloud bumps */
.content-shop-cta .cta-card::before {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
  width: 44px;
  height: 30px;
  top: -11px;
  left: 20px;
}
.content-shop-cta .cta-card::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
  width: 34px;
  height: 24px;
  top: -8px;
  right: 32px;
}
/* Trailing dots */
.content-shop-cta::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background: var(--color-bg, #faf9f7);
  border-radius: 50%;
  margin: -3px 0 0 36px;
  position: relative;
  box-shadow: -12px 10px 0 -3px var(--color-bg, #faf9f7);
}
/* Tag badge */
.content-shop-cta .cta-tag {
  position: absolute;
  top: -10px;
  right: -4px;
  z-index: 3;
  font-family: var(--shout, 'Anton', sans-serif);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--maple, #ec3013);
  color: oklch(0.98 0.005 27);
  padding: 3px 10px;
  border-radius: 2px;
  transform: rotate(3deg);
}
/* Vertical layout */
.content-shop-cta .cta-card--freebie {
  display: flex;
  flex-direction: column;
}
.content-shop-cta .cta-thumb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 10px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--maple, #ec3013) 5%, transparent) 1px, transparent 1px)
    var(--color-bg, #faf9f7);
  background-size: 8px 8px;
  border-radius: 22px 22px 0 0;
}
.content-shop-cta .cta-thumb {
  width: 100%;
  max-width: 110px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
  transform: rotate(-3deg);
  transition: transform 0.2s ease;
}
.content-shop-cta .cta-card:hover .cta-thumb {
  transform: rotate(1deg) scale(1.06);
}
.content-shop-cta .cta-content {
  padding: 10px 16px 18px;
  text-align: center;
}
.content-shop-cta .cta-kicker {
  font-family: var(--shout, 'Anton', sans-serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 4px;
  line-height: 1.15;
}
.content-shop-cta .cta-body {
  font-size: 12px;
  line-height: 18px;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.content-shop-cta .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--maple, #ec3013);
  color: oklch(0.98 0.005 27) !important;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  min-height: 44px;
  font-family: var(--shout, 'Anton', sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.content-shop-cta .cta-btn:hover {
  background: var(--maple-deep, #b82710);
  transform: scale(1.04);
}
.content-shop-cta .cta-freebie-meta {
  font-family: var(--scrawl, 'Shantell Sans', cursive);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 38%, transparent);
  margin: 6px 0 0;
}
.content-shop-cta .cta-nudge {
  font-family: var(--scrawl, 'Shantell Sans', cursive);
  font-size: 10px;
  line-height: 1.45;
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.content-shop-cta .cta-nudge a {
  display: inline-block;
  color: var(--maple, #ec3013);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 6px 0;
}

/* ── Float direction by variant ── */
/* Odd (1,3,5) float right; even (2,4) float left */
.content-shop-cta[style*="--cloud-var:2"],
.content-shop-cta[style*="--cloud-var:4"] {
  float: left;
  margin: 8px 28px 20px 0;
}

/* ── Shape variants ── */
.content-shop-cta[style*="--cloud-var:2"] .cta-card::before { width: 36px; height: 26px; left: auto; right: 18px; top: -9px; }
.content-shop-cta[style*="--cloud-var:2"] .cta-card::after  { width: 48px; height: 32px; right: auto; left: 24px; top: -12px; }
.content-shop-cta[style*="--cloud-var:2"]::after { margin-left: auto; margin-right: 32px; }
.content-shop-cta[style*="--cloud-var:2"] .cta-tag { right: auto; left: -4px; transform: rotate(-3deg); }
.content-shop-cta[style*="--cloud-var:2"] .cta-thumb { transform: rotate(3deg); }
.content-shop-cta[style*="--cloud-var:2"]:hover .cta-thumb { transform: rotate(-1deg) scale(1.06); }

.content-shop-cta[style*="--cloud-var:3"] .cta-card { border-radius: 26px; }
.content-shop-cta[style*="--cloud-var:3"] .cta-card::before { width: 40px; height: 28px; left: 50%; margin-left: -20px; top: -10px; }
.content-shop-cta[style*="--cloud-var:3"] .cta-card::after  { display: none; }
.content-shop-cta[style*="--cloud-var:3"] .cta-thumb-wrap { border-radius: 26px 26px 0 0; }
.content-shop-cta[style*="--cloud-var:3"]::after { margin-left: 50%; transform: translateX(-50%); }
.content-shop-cta[style*="--cloud-var:3"] .cta-tag { top: -10px; right: 14px; transform: rotate(-1deg); }

.content-shop-cta[style*="--cloud-var:4"] .cta-card::before { width: 32px; height: 22px; left: 14px; top: -8px; }
.content-shop-cta[style*="--cloud-var:4"] .cta-card::after  { width: 42px; height: 28px; right: 20px; top: -10px; }
.content-shop-cta[style*="--cloud-var:4"]::after { margin-left: 60%; box-shadow: -14px 8px 0 -3px var(--color-bg, #faf9f7); }
.content-shop-cta[style*="--cloud-var:4"] .cta-tag { right: -6px; top: 14px; transform: rotate(5deg); }
.content-shop-cta[style*="--cloud-var:4"] .cta-thumb { transform: rotate(2deg); }
.content-shop-cta[style*="--cloud-var:4"]:hover .cta-thumb { transform: rotate(-2deg) scale(1.06); }

.content-shop-cta[style*="--cloud-var:5"] .cta-card::before { width: 50px; height: 34px; left: 28px; top: -12px; }
.content-shop-cta[style*="--cloud-var:5"] .cta-card::after  { width: 30px; height: 22px; right: 22px; top: -7px; }
.content-shop-cta[style*="--cloud-var:5"]::after { display: none; }
.content-shop-cta[style*="--cloud-var:5"] .cta-tag { left: 50%; right: auto; transform: translateX(-50%) rotate(-2deg); }

/* ── Mobile: stop floating, center instead ── */
@media (max-width: 768px) {
  .content-shop-cta,
  .content-shop-cta[style*="--cloud-var:2"],
  .content-shop-cta[style*="--cloud-var:4"] {
    float: none;
    margin: 28px auto;
    width: 220px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .content-shop-cta .cta-card,
  .content-shop-cta .cta-btn,
  .content-shop-cta .cta-thumb { transition: none; }
  .content-shop-cta .cta-card:hover { transform: none; }
  .content-shop-cta .cta-card:hover .cta-thumb { transform: rotate(-3deg); }
  .content-shop-cta[style*="--cloud-var:2"]:hover .cta-thumb { transform: rotate(3deg); }
  .content-shop-cta[style*="--cloud-var:4"]:hover .cta-thumb { transform: rotate(2deg); }
}

.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: var(--z-skip); }
.skip-link:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; padding: 12px 24px; background: var(--color-accent, #ec3013); color: var(--maple-ink-inverse); font-size: 14px; font-weight: 700; text-decoration: none; z-index: var(--z-skip); }

/* Dispatch Alert CTA */
.dispatch-alert { background: var(--color-accent, #0088b0); color: var(--maple-ink-inverse); padding: var(--space-6, 32px) var(--space-4, 20px); text-align: center; position: relative; margin: var(--space-6, 32px) 0 0; clear: both; }
.dispatch-alert__badge { display: inline-block; background: oklch(0.55 0.21 27); color: var(--maple-ink-inverse); font-family: var(--shout, 'Anton', sans-serif); font-size: 0.75rem; padding: var(--space-1, 5px) var(--space-2, 10px); border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; animation: dispatch-alert-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dispatch-alert__badge { animation: none; } }
@keyframes dispatch-alert-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.dispatch-alert__headline { font-family: var(--shout, 'Anton', sans-serif); font-size: clamp(1.25rem, 3vw, 1.75rem); margin: var(--space-3, 15px) 0; line-height: 1.2; }
.dispatch-alert__cta { display: inline-block; background: #fff; color: var(--color-accent, #0088b0); font-family: var(--shout, 'Anton', sans-serif); font-size: 1.125rem; padding: var(--space-2, 10px) var(--space-5, 25px); text-decoration: none; border: 2px solid #fff; transition: background 0.15s, color 0.15s; min-height: 44px; }
.dispatch-alert__cta:hover { background: transparent; color: var(--maple-ink-inverse); }
.dispatch-alert__dismiss { position: absolute; top: var(--space-2, 10px); right: var(--space-2, 10px); background: transparent; border: none; color: rgba(255,255,255,0.7); font-size: 1.25rem; cursor: pointer; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* --- Treasure Hunt: classified sticker drops --- */
.content-shop-cta:has(.cta-card--classified) {
  float: none;
  width: auto;
  max-width: 560px;
  margin: var(--space-8, 42px) auto;
  padding: 20px 24px;
  filter: none;
}
.content-shop-cta:has(.cta-card--classified) .cta-card { border-radius: 0; overflow: hidden; }
.content-shop-cta:has(.cta-card--classified) .cta-card::before,
.content-shop-cta:has(.cta-card--classified) .cta-card::after { display: none; }
.cta-card--classified { border: 2px dashed var(--color-neutral-400); background: color-mix(in srgb, var(--color-surface) 80%, var(--maple-tint, oklch(0.94 0.02 27))); }
.cta-tag--classified { background: var(--color-neutral-800); color: var(--color-neutral-100); letter-spacing: 0.1em; }
.cta-tag--leaked { background: transparent; color: var(--color-neutral-500); border: 1px solid var(--color-neutral-400); letter-spacing: 0.1em; }
details.filed-away { border: 1.5px solid var(--color-neutral-300); border-radius: var(--radius-md, 2px); margin: var(--space-6, 32px) 0; overflow: hidden; }
details.filed-away > summary { cursor: pointer; padding: var(--space-3, 15px) var(--space-4, 20px); font-family: var(--shout, 'Anton', sans-serif); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); list-style: none; min-height: 44px; display: flex; align-items: center; gap: var(--space-2, 10px); }
details.filed-away > summary::-webkit-details-marker { display: none; }
details.filed-away > summary::before { content: '\25B6'; font-size: 9px; transition: transform 0.15s; }
details.filed-away[open] > summary::before { transform: rotate(90deg); }
details.filed-away > .cta-card { border: none; border-top: 1px solid var(--color-neutral-300); margin: 0; }
.leaked-link { display: inline-block; font-family: var(--scrawl, 'Shantell Sans', cursive); font-size: 13px; color: var(--color-neutral-500); text-decoration: none; border-bottom: 1px dotted var(--color-neutral-400); padding: var(--space-1, 5px) 0; transition: color 0.15s; }
.leaked-link:hover { color: var(--maple, #ec3013); }

/* --- Print styles --- */
@media print {
  ctb-nav, .bs-footer, .skip-link, .shop-skip-link,
  [class$="-ticker"], .dispatch-alert { display: none !important; }
  [style*="position:sticky"], [style*="position: sticky"] { position: static !important; }
  body { background: white !important; color: black !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  .certificate-page__nav, .certificate-page__shop,
  .certificate-page__back, .certificate-page__legal { display: none !important; }
}