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

:root {
  --o: #E84118;
  --c: #FFF5E6;
  --b: 2px solid #E84118;
}

html { scroll-behavior: smooth; }

body {
  background: var(--c);
  color: var(--o);
  font-family: 'Space Mono', monospace;
  overflow-x: hidden;
}

/* ── NAV ── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 44px;
  border-bottom: var(--b);
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 700;
  position: sticky;
  top: 0;
  background: var(--c);
  z-index: 100;
}
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a {
  color: var(--o); text-decoration: none;
  font-size: 11px; letter-spacing: 0.12em;
  position: relative; padding-bottom: 2px;
}
.nav-links a::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; width: 0; height: 1.5px;
  background: var(--o); transition: width 0.25s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-version { display: none; }

/* ── HERO ── */
.hero {
  border-bottom: var(--b);
  padding: 20px 20px 24px;
  position: relative;
  overflow: hidden;
}
.reg-mark { position: absolute; width: 18px; height: 18px; opacity: 0.3; pointer-events: none; }
.reg-tl  { top: 8px;    left: 8px; }
.reg-tr  { top: 8px;    right: 8px; }
.reg-bl  { bottom: 8px; left: 8px; }
.reg-br  { bottom: 8px; right: 8px; }
.reg-tl-sm { top: 14px; left: 14px; opacity: 0.18; }
.reg-tr-sm { top: 14px; right: 14px; opacity: 0.18; }

.hero-meta {
  display: flex; align-items: center;
  justify-content: space-between;
  font-size: 10px; letter-spacing: 0.12em; margin-bottom: 12px;
}
.hero-dots-row { display: flex; align-items: center; gap: 8px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--o); }
.dot.pill { width: 22px; border-radius: 6px; }
.bdp-box { border: var(--b); padding: 4px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.5; text-align: right; }

.hero-content { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 14px; }
.hero-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; line-height: 0.88; }
.line1 { display: block; font-size: clamp(58px, 14vw, 168px); }
.line2 { display: block; font-size: clamp(64px, 15vw, 185px); }
.hero-title sup { font-size: 0.28em; vertical-align: super; font-weight: 700; }

.hero-mascot {
  position: relative; width: clamp(110px, 28vw, 290px);
  flex-shrink: 0; animation: float 4s ease-in-out infinite; will-change: transform;
}
.reticle {
  position: absolute; width: 115%; height: 115%; top: -7.5%; left: -7.5%;
  animation: spin 30s linear infinite; opacity: 0.5; pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mascot-img { width: 100%; height: auto; display: block; position: relative; z-index: 1; mix-blend-mode: darken; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── MICROGRAPHICS ── */

/* vertical tick rule next to mascot */
.tick-rule-v {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.35;
  pointer-events: none;
}
.tick-rule-v svg { width: 12px; height: 160px; }
.tick-label {
  font-size: 7px;
  letter-spacing: 0.12em;
  font-weight: 700;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 0.7;
}
.tick-top { margin-bottom: 2px; }
.tick-mid { margin: auto; }
.tick-bot { margin-top: 2px; }

/* parameter data cluster */
.param-cluster {
  display: none; /* mobile: hidden, shown on tablet+ */
  flex-direction: column;
  gap: 3px;
  position: absolute;
  right: 44px;
  bottom: 80px;
  opacity: 0.3;
  pointer-events: none;
}
.param-line {
  font-size: 7px;
  letter-spacing: 0.14em;
  font-weight: 700;
  white-space: nowrap;
}

/* asterisk / snowflake marks */
.asterisk {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.ast-a { width: 16px; height: 16px; opacity: 0.12; top: 28px; right: 72px; }
.ast-b { width: 12px; height: 12px; opacity: 0.1; bottom: 52px; left: 44px; }
.ast-about { width: 18px; height: 18px; position: absolute; top: 24px; right: 24px; }

/* horizontal tick rule above menu grid */
.tick-rule-h {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
  opacity: 0.25;
  pointer-events: none;
}
.tick-rule-h svg { width: 100%; height: 12px; }
.tick-h-label { font-size: 8px; letter-spacing: 0.2em; font-weight: 700; }

/* about micro panel */
.about-micro {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.am-label {
  font-size: 6px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: rgba(255,245,230,0.4);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.am-value {
  font-size: 6px;
  letter-spacing: 0.1em;
  color: rgba(255,245,230,0.25);
  writing-mode: vertical-rl;
}
.am-rule { width: 8px; height: 120px; }

.hero-sub { font-size: 11px; letter-spacing: 0.18em; margin-bottom: 20px; }

.hero-tagline { display: flex; align-items: center; gap: 16px; padding-top: 18px; border-top: var(--b); flex-wrap: wrap; }
.tagline-left { display: flex; align-items: center; gap: 10px; }
.icon-globe { width: 34px; flex-shrink: 0; transition: transform 0.4s ease; }
.icon-globe:hover { transform: rotate(20deg); }
.icon-star { width: 18px; flex-shrink: 0; transition: transform 0.3s ease; }
.icon-star:hover { transform: scale(1.25) rotate(20deg); }
.tagline-left p { font-size: 10px; letter-spacing: 0.12em; line-height: 1.7; font-weight: 700; }
.tagline-barcode { flex: 1; min-width: 80px; }
.tagline-barcode svg { width: 90px; height: 32px; display: block; }
.tagline-right { text-align: right; margin-left: auto; }
.coords { font-size: 10px; letter-spacing: 0.08em; line-height: 1.7; }
.est { font-size: 9px; letter-spacing: 0.18em; opacity: 0.5; margin-top: 3px; }

/* ── WARNING BANNER ── */
.warning-banner { background: var(--o); color: var(--c); overflow: hidden; padding: 10px 0; border-bottom: var(--b); }
.warning-track {
  display: inline-flex; gap: 24px; white-space: nowrap;
  animation: marquee 22s linear infinite;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; align-items: center;
}
.warning-track .sep { opacity: 0.35; }
.warning-banner:hover .warning-track { animation-play-state: paused; }

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

/* ── MENU ── */
.menu { padding: 48px 20px; border-bottom: var(--b); position: relative; }

.section-header { text-align: center; margin-bottom: 40px; }
.section-label { font-size: 10px; letter-spacing: 0.18em; opacity: 0.55; margin-bottom: 8px; }
.section-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(52px, 13vw, 112px); line-height: 1; }
.dots-row { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.pixel-names { display: block; width: 100%; max-width: 600px; height: auto; margin: 18px auto 0; }

/* mobile: single column */
.menu-grid { display: grid; grid-template-columns: 1fr; border: var(--b); }

.pizza-card {
  padding: 24px 20px; border-bottom: var(--b);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: background 0.2s ease;
}
.pizza-card:last-child { border-bottom: none; }
.pizza-card:active { background: rgba(232,65,24,0.05); }

/* mobile inline video — sits below the card content */
.card-video {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-top: 8px;
  border-radius: 2px;
}

/* desktop: hide inline video, use cursor preview instead */
@media (hover: hover) {
  .card-video { display: none; }

  .pizza-card:hover {
    background: rgba(232,65,24,0.05);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(232,65,24,0.1);
    z-index: 1;
  }
}

.card-corner { position: absolute; width: 9px; height: 9px; opacity: 0; transition: opacity 0.2s; }
@media (hover: hover) { .pizza-card:hover .card-corner { opacity: 1; } }
.card-corner-tl { top: 7px; left: 7px; border-top: 1.5px solid var(--o); border-left: 1.5px solid var(--o); }
.card-corner-br { bottom: 7px; right: 7px; border-bottom: 1.5px solid var(--o); border-right: 1.5px solid var(--o); }

.pizza-card.featured { background: var(--o); color: var(--c); }
.pizza-card.featured .card-corner-tl,
.pizza-card.featured .card-corner-br { border-color: var(--c); }
.pizza-card.featured .pizza-name,
.pizza-card.featured .pizza-number,
.pizza-card.featured .pizza-size,
.pizza-card.featured .pizza-desc { color: var(--c); }
.pizza-card.featured .tag { border-color: rgba(255,245,230,0.45); color: var(--c); }
.pizza-card.featured .tag:hover { background: var(--c); color: var(--o); }
.pizza-card.featured .heat { color: rgba(255,245,230,0.18); }
.pizza-card.featured .heat.on { color: var(--c); }
@media (hover: hover) {
  .pizza-card.featured:hover { background: var(--o); box-shadow: 0 6px 20px rgba(232,65,24,0.25); }
}

.pizza-number { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 12px; opacity: 0.3; letter-spacing: 0.08em; }
.pizza-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(36px, 9vw, 52px); line-height: 0.95; }
.pizza-desc { font-size: 11px; line-height: 1.7; opacity: 0.65; flex: 1; }
.pizza-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { border: 1.5px solid var(--o); font-size: 9px; letter-spacing: 0.14em; padding: 3px 7px; font-weight: 700; transition: background 0.18s, color 0.18s; cursor: default; }
.tag:hover { background: var(--o); color: var(--c); }
.pizza-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(232,65,24,0.18); padding-top: 10px; margin-top: 2px; }
.pizza-size { font-size: 10px; letter-spacing: 0.12em; opacity: 0.45; }
.pizza-heat { display: flex; gap: 4px; font-size: 14px; }
.heat { color: rgba(232,65,24,0.14); }
.heat.on { color: var(--o); }
.pizza-card.featured .heat.on { color: var(--c); }

/* ── ABOUT ── */
.about { padding: 56px 20px; background: var(--o); color: var(--c); border-bottom: var(--b); position: relative; overflow: hidden; }
.dot-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,245,230,0.15) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; }
.about-label { font-size: 10px; letter-spacing: 0.18em; opacity: 0.6; margin-bottom: 12px; }
.about-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(58px, 14vw, 130px); line-height: 0.9; margin-bottom: 40px; }

/* text blocks — mobile stacked, tablet 3-col */
.about-text-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
.about-block-label { font-size: 10px; letter-spacing: 0.18em; opacity: 0.55; margin-bottom: 10px; font-weight: 700; }
.about-block p { font-size: 12px; line-height: 1.9; opacity: 0.8; }

/* stats bar — full width, big numbers */
.stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1.5px solid rgba(255,245,230,0.25);
  padding-top: 32px;
}
.stat {
  padding: 20px 0;
  border-right: 1.5px solid rgba(255,245,230,0.15);
  border-bottom: 1.5px solid rgba(255,245,230,0.15);
  padding-left: 20px;
  transition: background 0.2s;
  cursor: default;
}
.stat:nth-child(2n) { border-right: none; }
.stat:nth-child(3),
.stat:nth-child(4) { border-bottom: none; }
.stat:hover { background: rgba(255,245,230,0.06); }
.stat-num {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 14vw, 96px);
  line-height: 0.9;
  margin-bottom: 8px;
  transition: letter-spacing 0.25s ease;
}
.stat:hover .stat-num { letter-spacing: 0.03em; }
.stat-label { font-size: 9px; letter-spacing: 0.2em; opacity: 0.5; line-height: 1.5; display: block; }

/* ── MANIFESTO ── */
.manifesto { overflow: hidden; border-bottom: var(--b); padding: 12px 0; }
.manifesto-track {
  display: inline-flex; align-items: baseline; gap: 20px;
  white-space: nowrap;
  animation: marquee 12s linear infinite;
}
.mw {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(44px, 10vw, 88px); line-height: 1;
  letter-spacing: 0; transition: letter-spacing 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: default; display: inline-block;
}
.mw:hover { letter-spacing: 0.35em; }
.manifesto-track b { opacity: 0.2; font-family: 'Barlow Condensed', sans-serif; font-size: clamp(44px, 10vw, 88px); font-weight: 900; }
.manifesto:hover .manifesto-track { animation-play-state: paused; }

/* ── VIDEO CURSOR PREVIEW (desktop only) ── */
#video-preview {
  position: fixed; top: 0; left: 0;
  width: 280px; pointer-events: none;
  z-index: 999; opacity: 0;
  transition: opacity 0.2s ease;
  overflow: hidden;
}
#video-preview.visible { opacity: 1; }
#video-preview video { width: 100%; height: auto; display: block; }

/* ── FOOTER ── */
.footer { padding: 44px 20px 0; position: relative; }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; border-bottom: var(--b); }
.footer-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 48px; line-height: 0.9; }
.footer-logo sup { font-size: 0.3em; vertical-align: super; }
.footer-sub { font-size: 10px; letter-spacing: 0.14em; opacity: 0.5; margin-top: 8px; }
.footer-info { display: grid; grid-template-columns: 1fr; gap: 24px; }
.footer-label { font-size: 10px; letter-spacing: 0.18em; opacity: 0.45; margin-bottom: 8px; }
.footer-block p { font-size: 12px; line-height: 1.8; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0; font-size: 9px; letter-spacing: 0.12em; opacity: 0.35; }

/* ── TABLET 640px+ ── */
@media (min-width: 640px) {
  .param-cluster { display: flex; }
  .nav { padding: 0 32px; }
  .nav-version { display: block; opacity: 0.45; font-size: 10px; }
  .nav-links { gap: 32px; }

  .hero { padding: 24px 32px 48px; }
  .menu { padding: 64px 32px; }

  /* 2-col stacked on tablet */
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .pizza-card { border-right: var(--b); border-bottom: var(--b); }
  .pizza-card:nth-child(2n) { border-right: none; }
  .pizza-card:nth-child(3),
  .pizza-card:nth-child(4) { border-bottom: none; }

  .about { padding: 72px 32px; }
  .about-text-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }

  .stats-bar { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: none; }
  .stat:nth-child(2n) { border-right: 1.5px solid rgba(255,245,230,0.15); }
  .stat:last-child { border-right: none; }

  .footer { padding: 56px 32px 0; }
  .footer-inner { grid-template-columns: auto 1fr; gap: 48px; align-items: end; }
  .footer-info { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* ── DESKTOP 1024px+ ── */
@media (min-width: 1024px) {
  /* 2×2 bento grid */
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .pizza-card { border-right: var(--b); border-bottom: var(--b); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
  .pizza-card:nth-child(2n) { border-right: none; }
  .pizza-card:nth-child(3),
  .pizza-card:nth-child(4) { border-bottom: none; }

  /* bigger card content on desktop */
  .pizza-name { font-size: clamp(44px, 4vw, 64px); }

  .hero-mascot.js-cursor { animation: none; }
}