:root {
  --cream:    #F2E3C6;
  --cream-2:  #EBD8B2;
  --cocoa:    #2A140A;
  --cocoa-2:  #4A2614;
  --orange:   #D8642A;
  --mustard:  #E5A93A;
  --rose:     #D88578;
  --teal:     #2C6E69;
  --pink:     #F2C5B6;
  --ink:      var(--cocoa);
}

html, body { background: var(--cream); color: var(--ink); }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display { font-family: 'Bagel Fat One', 'Cooper Black', serif; font-weight: 400; letter-spacing: -0.01em; }
.serif   { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }
.script  { font-family: 'Caveat', cursive; font-weight: 700; }

.tracked   { letter-spacing: 0.22em; text-transform: uppercase; }
.tracked-s { letter-spacing: 0.14em; text-transform: uppercase; }

.paper {
  background-color: var(--cream);
  background-image:
    radial-gradient(1200px 600px at 110% -10%, rgba(216,100,42,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(229,169,58,0.10), transparent 60%);
}
.paper::before {
  content:""; position: fixed; inset:0; pointer-events:none; z-index:1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.08  0 0 0 0 0.04  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.18; mix-blend-mode: multiply;
}

.ink { color: var(--cocoa); }
.ink-dim { color: rgba(42,20,10,0.65); }
.orange { color: var(--orange); }
.mustard { color: var(--mustard); }
.rose { color: var(--rose); }
.teal { color: var(--teal); }
.cream-c { color: var(--cream); }

.outline-text {
  color: var(--cream);
  -webkit-text-stroke: 2px var(--cocoa);
  text-shadow: 4px 4px 0 var(--cocoa);
}

.wavy {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12' preserveAspectRatio='none'><path d='M0 6 Q 7.5 0 15 6 T 30 6 T 45 6 T 60 6' fill='none' stroke='%23D8642A' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x; background-position: 0 100%; background-size: 60px 10px;
  padding-bottom: 14px;
}

.checker {
  background-image:
    linear-gradient(45deg, var(--cocoa) 25%, transparent 25%),
    linear-gradient(-45deg, var(--cocoa) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--cocoa) 75%),
    linear-gradient(-45deg, transparent 75%, var(--cocoa) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  background-color: var(--mustard);
}

.sunburst {
  background:
    conic-gradient(from 0deg,
      var(--mustard) 0 8deg, transparent 8deg 22.5deg,
      var(--mustard) 22.5deg 30.5deg, transparent 30.5deg 45deg,
      var(--mustard) 45deg 53deg, transparent 53deg 67.5deg,
      var(--mustard) 67.5deg 75.5deg, transparent 75.5deg 90deg,
      var(--mustard) 90deg 98deg, transparent 98deg 112.5deg,
      var(--mustard) 112.5deg 120.5deg, transparent 120.5deg 135deg,
      var(--mustard) 135deg 143deg, transparent 143deg 157.5deg,
      var(--mustard) 157.5deg 165.5deg, transparent 165.5deg 180deg,
      var(--mustard) 180deg 188deg, transparent 188deg 202.5deg,
      var(--mustard) 202.5deg 210.5deg, transparent 210.5deg 225deg,
      var(--mustard) 225deg 233deg, transparent 233deg 247.5deg,
      var(--mustard) 247.5deg 255.5deg, transparent 255.5deg 270deg,
      var(--mustard) 270deg 278deg, transparent 278deg 292.5deg,
      var(--mustard) 292.5deg 300.5deg, transparent 300.5deg 315deg,
      var(--mustard) 315deg 323deg, transparent 323deg 337.5deg,
      var(--mustard) 337.5deg 345.5deg, transparent 345.5deg 360deg);
  border-radius: 50%;
  filter: blur(0.3px);
}

.dome { border-radius: 9999px 9999px 18px 18px; overflow: hidden; }

.btn-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px; border-radius: 9999px;
  background: var(--cocoa); color: var(--cream);
  font-family: 'Manrope', sans-serif; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px;
  border: 2px solid var(--cocoa);
  box-shadow: 4px 4px 0 var(--orange);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.btn-pill:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--orange); }
.btn-pill.alt { background: var(--orange); border-color: var(--cocoa); box-shadow: 4px 4px 0 var(--cocoa); }
.btn-pill.alt:hover { box-shadow: 6px 6px 0 var(--cocoa); }
.btn-out {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 9999px;
  background: transparent; color: var(--cocoa);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px;
  border: 2px solid var(--cocoa);
  transition: background .2s ease, color .2s ease;
  cursor: pointer;
}
.btn-out:hover { background: var(--cocoa); color: var(--cream); }

.frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid var(--cocoa);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--cocoa);
  overflow: hidden;
  background: linear-gradient(135deg, #c98a4f 0%, #a55e2e 50%, #6b3818 100%);
}
.frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.sticker {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mustard); color: var(--cocoa);
  border: 2px solid var(--cocoa); border-radius: 9999px;
  font-family: 'Manrope', sans-serif; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px;
  padding: 8px 14px;
}

.bullseye {
  background:
    radial-gradient(circle at center,
      var(--cocoa) 0 8%,
      var(--cream) 8% 18%,
      var(--orange) 18% 30%,
      var(--cream) 30% 42%,
      var(--cocoa) 42% 54%,
      var(--cream) 54% 66%,
      var(--mustard) 66% 78%,
      var(--cream) 78% 90%,
      var(--cocoa) 90% 100%);
}

@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marq { animation: marq 50s linear infinite; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

.tilt-l { transform: rotate(-2.5deg); }
.tilt-r { transform: rotate(2.5deg); }
.tilt-l-1 { transform: rotate(-1.2deg); }
.tilt-r-1 { transform: rotate(1.2deg); }

::selection { background: var(--orange); color: var(--cream); }

.squiggle {
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='none'><path d='M0 11 Q 15 -2 30 11 T 60 11 T 90 11 T 120 11' fill='none' stroke='%232A140A' stroke-width='3' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x; background-size: 120px 22px;
}

.topping {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 9999px;
  background: var(--cream-2); color: var(--cocoa);
  border: 2px solid var(--cocoa);
  font-weight: 700; font-size: 13px;
}
.topping .dot { width:8px; height:8px; border-radius:9999px; }

.plate {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 9999px;
  background: var(--cocoa); color: var(--mustard);
  font-family: 'Bagel Fat One', serif; font-size: 24px;
  border: 2px solid var(--cocoa);
}

.strip-img {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--cocoa);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--cocoa);
  background: var(--cocoa-2);
}
.strip-img img { width:100%; height:100%; object-fit:cover; display:block; }

/* Form fields */
.field-label {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cocoa);
  margin-bottom: 6px;
}
.field-input,
.field-select,
.field-textarea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--cocoa);
  background: var(--cream);
  border: 2px solid var(--cocoa);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--cocoa);
  transition: transform .15s ease, box-shadow .15s ease;
  outline: none;
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--orange);
  border-color: var(--cocoa);
}
.field-textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%232A140A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 48px;
}