/* Loaf'd Brand Pack — Global styles */

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Anton&family=Archivo+Black&family=Alfa+Slab+One&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --raspberry: #A53768;
  --raspberry-dark: #7A2549;
  --raspberry-light: #C76A91;
  --black: #0D0D0D;
  --ink: #1a1a1a;
  --cream: #F4EBDD;
  --kraft: #E5D6BD;
  --paper: #FBF6EC;
  --mocha: #6B4C3B;
  --ochre: #C99A4B;
  --rose: #D4A5A8;
  --sage: #8E9B7A;

  --display: 'Bowlby One SC', 'Archivo Black', sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 14px;
  --gap: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ——— Brand primitives ——— */

/* The signature Loaf'd offset-shadow wordmark treatment.
   Default style is the CSS recreation (used for SMASH'D, BREAKROOM, etc).
   The PNG version is opted into via .wordmark.png — when set, the text is
   hidden and replaced with the real logo PNG. A small JS pass auto-applies
   .png to any .wordmark whose text is exactly "LOAF'D". */
.wordmark {
  font-family: var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--raspberry);
  -webkit-text-stroke: 1.5px #4a1a2e;
  text-shadow:
    2px 2px 0 #4a1a2e,
    3px 3px 0 #4a1a2e;
  display: inline-block;
  line-height: 0.95;
}
.wordmark.on-cream {
  -webkit-text-stroke: 1.5px #4a1a2e;
  text-shadow: 3px 3px 0 #4a1a2e;
}
.wordmark.reverse {
  color: var(--cream);
  -webkit-text-stroke: 1.5px var(--raspberry);
  text-shadow: 3px 3px 0 var(--raspberry);
}
.wordmark.solid {
  color: var(--raspberry);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.wordmark.outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--raspberry);
  text-shadow: none;
}

/* PNG variant — replaces glyph rendering with the master logo image */
.wordmark.png {
  color: transparent !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  background-image: url('assets/loafd-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  /* The PNG aspect is ~ 1600/562 = 2.85; allow a touch more for letter-spacing visual */
  width: calc(1em * 2.85);
  height: 1em;
  line-height: 1;
  /* Hide the literal text but keep it for screen readers / direct edit */
  font-size: inherit;
}
.wordmark.png.reverse {
  background-image: none;
  position: relative;
}
.wordmark.png.reverse::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('assets/loafd-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  filter: brightness(0) invert(1);
}

/* Section wrapper for the brand pack page */
.section {
  padding: 96px 64px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: relative;
}
.section.dense { padding: 56px 64px; }
.section.dark {
  background: var(--black);
  color: var(--cream);
  border-bottom-color: rgba(255,255,255,0.08);
}
.section.cream {
  background: var(--cream);
}
.section.raspberry {
  background: var(--raspberry);
  color: var(--cream);
}

.section-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
.section-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.section-num strong {
  display: block;
  font-family: var(--display);
  font-size: 72px;
  line-height: 1;
  margin-top: 8px;
  color: var(--raspberry);
  -webkit-text-stroke: 0;
}
.section-title {
  font-family: var(--display);
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.section-kicker {
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.55;
  margin-top: 16px;
  opacity: 0.85;
}

/* Cards */
.card {
  background: white;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 28px;
  position: relative;
}
.card.cream { background: var(--cream); }
.card.kraft { background: var(--kraft); }
.card.dark { background: var(--black); color: var(--cream); border-color: rgba(255,255,255,0.1); }

.card-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 12px;
}

/* Pill / chip — the location chip motif */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 6px 14px 5px;
  border: 2px solid currentColor;
  border-radius: 999px;
  line-height: 1;
}
.chip.solid {
  background: var(--raspberry);
  color: var(--cream);
  border-color: var(--raspberry);
}
.chip.dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* Allergen mini-badges */
.allergen {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
  margin: 0 2px;
  letter-spacing: 0.02em;
}

/* Image placeholder — striped, monospace caption */
.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0.04) 0 8px,
      rgba(0,0,0,0.08) 8px 16px
    ),
    var(--kraft);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.55);
  text-align: center;
  padding: 12px;
  overflow: hidden;
}
.placeholder.dark {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.05) 0 8px,
      rgba(255,255,255,0.09) 8px 16px
    ),
    #1a1a1a;
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.55);
}

/* The Loaf'd "stamp" — the signature offset-shadow text card */
.stamp {
  display: inline-block;
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 18px 8px;
  background: var(--raspberry);
  color: var(--cream);
  border-radius: 6px;
  position: relative;
  box-shadow: 4px 4px 0 var(--black);
}

/* Headline w/ offset shadow (echoes logo) */
.h-shadow {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--raspberry);
  text-shadow: 4px 4px 0 #4a1a2e;
  -webkit-text-stroke: 1.5px #4a1a2e;
  line-height: 0.95;
}
.h-shadow.cream { color: var(--cream); -webkit-text-stroke-color: var(--cream); text-shadow: 4px 4px 0 var(--raspberry); }

/* Tag/Sticker */
.sticker {
  position: absolute;
  font-family: var(--display);
  text-transform: uppercase;
  background: var(--ochre);
  color: var(--black);
  padding: 14px 18px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.04em;
  box-shadow: 3px 3px 0 var(--black);
  transform: rotate(-4deg);
}

/* Utility */
.row { display: flex; gap: var(--gap); flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 1100px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}

.mono { font-family: var(--mono); }
.display { font-family: var(--display); text-transform: uppercase; }

/* Hero band */
.brand-hero {
  background: var(--black);
  color: var(--cream);
  padding: 80px 64px 96px;
  position: relative;
  overflow: hidden;
}

/* Marquee strip */
.marquee {
  background: var(--raspberry);
  color: var(--cream);
  padding: 14px 0;
  overflow: hidden;
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
}
.marquee-inner {
  display: flex;
  gap: 48px;
  animation: scroll 36s linear infinite;
  white-space: nowrap;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.marquee-inner span { display: inline-flex; align-items: center; gap: 48px; }
.marquee-inner .dot { width: 10px; height: 10px; background: var(--cream); border-radius: 50%; }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Density variants */
body.dense .section { padding: 64px 48px; }
body.dense .section-head { margin-bottom: 32px; gap: 32px; }
body.dense .card { padding: 20px; }

/* Light/Dark application toggle */
body.dark-apps {
  background: var(--black);
  color: var(--cream);
}
body.dark-apps .section:not(.raspberry):not(.cream) {
  background: var(--black);
  color: var(--cream);
  border-bottom-color: rgba(255,255,255,0.1);
}
body.dark-apps .card:not(.dark):not(.cream):not(.kraft) {
  background: #161616;
  color: var(--cream);
  border-color: rgba(255,255,255,0.1);
}

/* Print helpers (deck mode pages) */
.page {
  width: 1920px;
  height: 1080px;
  background: var(--paper);
  overflow: hidden;
  position: relative;
}