/*
Design philosophy: Pop-Art Retail Signage with a modern editorial finish.
This stylesheet defines the warm cream base, cherry/cobalt/yellow accents,
sticker-like objects, tactile hover motion, diagonal retail signage composition,
and print-inspired halftone texture used throughout the Looney maintenance page.
*/
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --primary: oklch(0.52 0.22 28);
  --primary-foreground: oklch(0.98 0.03 86);
  --sidebar-primary: oklch(0.46 0.21 260);
  --sidebar-primary-foreground: oklch(0.98 0.03 86);
  --chart-1: oklch(0.6 0.21 28);
  --chart-2: oklch(0.49 0.2 260);
  --chart-3: oklch(0.87 0.17 88);
  --chart-4: oklch(0.22 0.03 63);
  --chart-5: oklch(0.94 0.06 83);
  --radius: 0.35rem;
  --background: oklch(0.96 0.045 84);
  --foreground: oklch(0.18 0.015 63);
  --card: oklch(0.98 0.035 88);
  --card-foreground: oklch(0.18 0.015 63);
  --popover: oklch(0.98 0.035 88);
  --popover-foreground: oklch(0.18 0.015 63);
  --secondary: oklch(0.91 0.08 88);
  --secondary-foreground: oklch(0.18 0.015 63);
  --muted: oklch(0.91 0.04 83);
  --muted-foreground: oklch(0.42 0.028 63);
  --accent: oklch(0.51 0.18 260);
  --accent-foreground: oklch(0.98 0.03 86);
  --destructive: oklch(0.55 0.22 28);
  --destructive-foreground: oklch(0.98 0.03 86);
  --border: oklch(0.18 0.015 63);
  --input: oklch(0.18 0.015 63);
  --ring: oklch(0.49 0.2 260);
  --sidebar: oklch(0.96 0.045 84);
  --sidebar-foreground: oklch(0.18 0.015 63);
  --sidebar-accent: oklch(0.91 0.08 88);
  --sidebar-accent-foreground: oklch(0.18 0.015 63);
  --sidebar-border: oklch(0.18 0.015 63);
  --sidebar-ring: oklch(0.49 0.2 260);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff3d6; color: #17120e; font-family: 'Space Grotesk', system-ui, sans-serif; }
a[href] { cursor: pointer; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.isolate { isolation: isolate; }
.z-20 { z-index: 20; }
.z-10 { z-index: 10; }
.grid { display: grid; }
.flex { display: flex; min-width: 0; min-height: 0; }
.inline-flex { display: inline-flex; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 1rem; }
.gap-10 { gap: 2.5rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pt-12 { padding-top: 3rem; }
.border-t-2 { border-top: 2px solid #17120e; }
.pt-5 { padding-top: 1.25rem; }
.text-sm { font-size: .875rem; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
@media (min-width: 640px) { .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; } .sm\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; } }
@media (min-width: 1024px) { .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; } .lg\:grid-cols-\[0\.92fr_1\.08fr\] { grid-template-columns: .92fr 1.08fr; } .lg\:pt-0 { padding-top: 0; } }
.looney-page { position: relative; min-height: 100vh; overflow: hidden; background: #fff3d6; color: #17120e; }
.paper-grain { position: fixed; inset: 0; pointer-events: none; opacity: .33; z-index: 1; background-image: radial-gradient(#17120e 0.6px, transparent 0.6px), radial-gradient(#d51920 0.45px, transparent 0.45px); background-size: 18px 18px, 23px 23px; background-position: 0 0, 9px 8px; mix-blend-mode: multiply; }
.halftone-field { position: absolute; inset: -10% -8%; z-index: 0; opacity: .18; background: radial-gradient(circle at 15% 25%, #17120e 0 2px, transparent 2.3px) 0 0/20px 20px, linear-gradient(135deg, transparent 0 44%, rgba(0,72,174,.35) 44% 46%, transparent 46% 100%); transform: rotate(-2deg); }
.brand-lockup { display: inline-flex; align-items: center; gap: .8rem; color: #17120e; text-decoration: none; transform: rotate(-1deg); }
.brand-mark { display: grid; place-items: center; width: 3.35rem; height: 3.35rem; border: 3px solid #17120e; background: #d71920; color: #fff3d6; box-shadow: 5px 5px 0 #0048ae; font: 900 1.7rem 'Bungee', cursive; }
.brand-lockup strong { display: block; font: 900 1.35rem/1 'Bungee', cursive; letter-spacing: .02em; text-transform: uppercase; }
.brand-lockup small { display: block; margin-top: .2rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; }
.top-ticket { display: inline-flex; align-items: center; gap: .55rem; border: 3px solid #17120e; background: #ffd43b; padding: .8rem 1rem; box-shadow: 5px 5px 0 #17120e; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; transform: rotate(1.25deg); }
.copy-panel { position: relative; max-width: 760px; padding: clamp(1.2rem, 2vw, 2rem); }
.status-stamp { display: inline-flex; align-items: center; gap: .55rem; border: 3px solid #17120e; background: #0048ae; color: #fff3d6; padding: .58rem .9rem; box-shadow: 4px 4px 0 #d71920; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; transform: rotate(-2deg); }
.pulse-dot { width: .75rem; height: .75rem; border-radius: 999px; background: #ffd43b; box-shadow: 0 0 0 0 rgba(255,212,59,.7); animation: pulse 1.8s infinite; }
h1 { margin-top: 1.4rem; max-width: 12ch; font-family: 'Bungee', cursive; font-size: clamp(3.1rem, 8vw, 7.65rem); line-height: .86; letter-spacing: -.06em; text-transform: uppercase; text-shadow: 5px 5px 0 #ffd43b, 9px 9px 0 rgba(215,25,32,.92); }
.lead { margin-top: 1.45rem; max-width: 63ch; font-size: clamp(1.05rem, 1.8vw, 1.32rem); line-height: 1.65; font-weight: 600; color: #33251a; }
.lead strong { color: #0048ae; font-weight: 900; }
.action-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.primary-cta, .secondary-cta { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.45rem; padding: 0 1.25rem; border: 3px solid #17120e; color: #17120e; text-decoration: none; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; box-shadow: 5px 5px 0 #17120e; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.primary-cta { background: #d71920; color: #fff3d6; }
.secondary-cta { background: #fff3d6; }
.primary-cta:hover, .secondary-cta:hover { transform: translate(3px, 3px) rotate(-.5deg); box-shadow: 2px 2px 0 #17120e; }
.info-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: 2rem; max-width: 680px; }
.info-strip article { display: flex; align-items: flex-start; gap: .75rem; border: 2px solid #17120e; background: rgba(255,243,214,.82); padding: 1rem; box-shadow: 4px 4px 0 rgba(0,72,174,.9); font-weight: 800; }
.info-strip svg { flex: 0 0 auto; color: #d71920; }
.visual-stage { position: relative; min-height: 450px; }
.hero-card { position: relative; overflow: hidden; border: 5px solid #17120e; background: #ffd43b; box-shadow: 16px 16px 0 #0048ae, 25px 25px 0 #17120e; transform: rotate(1.2deg); }
.hero-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,243,214,.16), transparent 42%); pointer-events: none; }
.hero-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.corner-label { position: absolute; border: 3px solid #17120e; background: #ffd43b; padding: .58rem .78rem; font: 900 .78rem/1 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: .12em; box-shadow: 4px 4px 0 #17120e; }
.label-one { left: 1rem; top: 1rem; transform: rotate(-4deg); }
.label-two { right: 1.2rem; bottom: 1.2rem; background: #d71920; color: #fff3d6; transform: rotate(3deg); }
.stickers { position: absolute; width: min(28vw, 220px); filter: drop-shadow(8px 8px 0 rgba(23,18,14,.28)); pointer-events: none; }
.sticker-a { left: -5%; bottom: -16%; transform: rotate(-9deg); }
.ribbon { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(5px 5px 0 rgba(23,18,14,.14)); }
.ribbon-top { width: min(48vw, 560px); right: -8%; top: 11%; transform: rotate(-8deg); opacity: .78; }
.ribbon-bottom { width: min(64vw, 820px); left: 8%; bottom: 3.2rem; transform: rotate(2deg); opacity: .64; }
footer { color: #17120e; }
.animate-rise { animation: rise .7s cubic-bezier(.22,1,.36,1) both; }
.animate-pop { animation: pop .75s cubic-bezier(.22,1,.36,1) .12s both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) rotate(-.6deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes pop { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255,212,59,0); } 100% { box-shadow: 0 0 0 0 rgba(255,212,59,0); } }
@media (max-width: 900px) { h1 { max-width: 10ch; } .visual-stage { min-height: auto; padding-bottom: 4rem; } .info-strip { grid-template-columns: 1fr; } .ribbon-top { top: 7rem; width: 70vw; opacity: .45; } .ribbon-bottom { width: 90vw; left: -9%; } .stickers { width: 170px; left: auto; right: -2%; bottom: -2.6rem; } }
@media (max-width: 560px) { .top-ticket { display: none; } .brand-lockup small { max-width: 15ch; } .copy-panel { padding-left: 0; padding-right: 0; } h1 { font-size: clamp(2.55rem, 15vw, 4.5rem); text-shadow: 3px 3px 0 #ffd43b, 6px 6px 0 rgba(215,25,32,.92); } .lead { font-size: 1rem; } .primary-cta, .secondary-cta { width: 100%; } .hero-card { box-shadow: 9px 9px 0 #0048ae, 15px 15px 0 #17120e; } footer { padding-bottom: 1rem; font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }