/* ============================================================
   Particular Coffee — shared styles
   Earthy, warm, premium · brown · olive · cream · sage · tan
   ============================================================ */

:root {
  /* Brand palette */
  --cream: #F5EDE0;
  --cream-2: #EFE4D2;
  --tan: #D9C2A0;
  --sage: #A6B196;
  --olive: #6B7A4F;
  --olive-deep: #4C5836;
  --brown: #3B2A1E;
  --brown-deep: #261A12;
  --burnt: #C46B3A;       /* primary accent for buttons */
  --burnt-deep: #A35226;
  --ink: #2A1F16;
  --ink-soft: #6E5E4D;
  --rule: #D6C5AA;
  --paper: var(--cream);
  --paper-2: var(--cream-2);
  --surface: #FBF6EC;

  /* Type */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Scale */
  --fs-mono: 11px;
  --fs-body: 16px;
  --fs-h3: 28px;
  --fs-h2: 44px;
  --fs-h1: 88px;
  --fs-display: 132px;
}

[data-palette="green"] {
  --paper: #F2EEDB;
  --paper-2: #E7E1C5;
  --rule: #C7CFA8;
  --burnt: #6B7A4F;
  --burnt-deep: #4C5836;
}
[data-palette="brown"] { /* default */ }
[data-palette="blue"] {
  --burnt: #4F6B7A;
  --burnt-deep: #36505E;
}
[data-type="sans"] {
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--paper);
  color: var(--ink);
  overscroll-behavior-y: none;
  /* overflow-x: clip clips without creating a scroll container.
     overflow-x: hidden on body would silently break position:sticky in Safari
     by making body the scroll container — clip avoids that entirely. */
  overflow-x: clip;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  background: var(--paper);
}

/* Subtle grain — sits below the nav (z-index 49) so it doesn't
   interfere with the nav's compositing layer or stacking context. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 49;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.13  0 0 0 0 0.08  0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--brown); }
h1 { font-size: var(--fs-h1); line-height: 0.95; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
.serif-italic { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; }

.mono, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  /* Force Safari to promote the nav to its own GPU compositing layer.
     Without this, Safari composites sticky elements with adjacent layers
     during scroll, allowing content to visually bleed through the nav. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Isolate the nav's stacking context so mix-blend-mode on the grain
     overlay and any child elements cannot composite through the background. */
  isolation: isolate;
  /* Upward box-shadow fills the iOS overscroll "bounce" zone with the
     background color so page content never peeks above the nav during bounce. */
  box-shadow: 0 -300px 0 300px var(--paper);
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 40px;
  gap: 24px;
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
  color: var(--brown);
}
.nav-brand .mark {
  width: 28px; height: 28px;
  display: inline-block;
  background: url('images/favicon.png') center/contain no-repeat;
  opacity: 0.85;
}
.nav-brand .mark::after, .nav-brand .mark::before { display: none; }
.nav-links {
  display: flex; gap: 32px; justify-self: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}
.nav-links > a {
  color: var(--ink-soft);
  padding: 6px 0;
  transition: color 0.2s;
  position: relative;
}
.nav-links > a:hover { color: var(--brown); }
.nav-links > a.active { color: var(--brown); }
.nav-links > a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--burnt);
}

.nav-cta { justify-self: end; display: flex; align-items: center; gap: 14px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--burnt);
  color: #fff;
}
.btn-primary:hover {
  background: var(--burnt-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(196,107,58,0.55);
}
.btn-dark {
  background: var(--brown);
  color: var(--cream);
}
.btn-dark:hover { background: var(--brown-deep); }
.btn-ghost {
  border: 1px solid var(--brown);
  color: var(--brown);
}
.btn-ghost:hover { background: var(--brown); color: var(--cream); }
.btn-cream {
  background: var(--cream);
  color: var(--brown);
}
.btn-cream:hover { background: #fff; }

.arrow::after {
  content: "→";
  font-size: 14px;
  transition: transform 0.2s;
  display: inline-block;
}
.arrow:hover::after { transform: translateX(3px); }

/* ---------- IMG PLACEHOLDERS ---------- */
.img-ph {
  position: relative;
  background: var(--tan);
  overflow: hidden;
  border-radius: 4px;
}
.img-ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--cream) 50%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--olive) 30%, transparent) 0%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklab, var(--brown) 12%, transparent) 14px 15px);
}
.img-ph .ph-caption {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--cream);
  padding: 5px 9px;
  border-radius: 3px;
  border: 1px solid var(--rule);
}
.img-ph.dark { background: var(--brown); }
.img-ph.dark::before {
  background:
    radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--burnt) 60%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 75% 70%, color-mix(in oklab, var(--olive) 60%, transparent) 0%, transparent 55%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(245,237,224,0.06) 14px 15px);
}
.img-ph.olive { background: var(--olive); }
.img-ph.olive::before {
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--cream) 25%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 75% 70%, color-mix(in oklab, var(--brown) 50%, transparent) 0%, transparent 55%);
}
.img-ph.sage { background: var(--sage); }
.img-ph.sage::before {
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--cream) 35%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 75% 75%, color-mix(in oklab, var(--olive-deep) 35%, transparent) 0%, transparent 55%);
}

/* Polaroid */
.polaroid {
  background: #fff;
  padding: 14px 14px 36px;
  box-shadow: 0 18px 36px -18px rgba(38, 26, 18, 0.35), 0 2px 6px rgba(38,26,18,0.1);
  position: relative;
}
.polaroid .img-ph {
  aspect-ratio: 4/5;
  width: 100%;
}
.polaroid .pol-caption {
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  text-align: center;
  color: var(--brown);
  letter-spacing: -0.01em;
}

/* ---------- FOOTER ---------- */
.footer {
  margin-top: 120px;
  padding: 72px 40px 40px;
  background: var(--brown);
  color: var(--cream);
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 18px;
  font-weight: 400;
}
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid color-mix(in oklab, var(--cream) 15%, transparent);
  align-items: start;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: var(--cream); opacity: 0.85; }
.footer a:hover { opacity: 1; color: var(--burnt); }
.footer-display {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  max-width: 14ch;
  color: var(--cream);
  font-style: italic;
}
.footer-bottom {
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan);
}

/* ---------- SECTION ---------- */
.section { padding-top: 120px; padding-bottom: 120px; position: relative; }
.section-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  margin-bottom: 56px;
  align-items: start;
}
.section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 8px;
  border-top: 1px solid var(--brown);
}
.section-num span { color: var(--burnt); margin-right: 12px; }

/* ---------- TWEAKS PANEL ---------- */
.tweaks-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  background: var(--surface);
  border: 1px solid var(--brown);
  border-radius: 12px;
  padding: 18px 20px;
  min-width: 280px;
  box-shadow: 0 24px 48px -20px rgba(38,26,18,0.35);
  display: none;
}
.tweaks-panel.open { display: block; }
.tweaks-panel h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
  font-weight: 400;
}
.tweaks-group { margin-bottom: 18px; }
.tweaks-group:last-child { margin-bottom: 0; }
.tweaks-options { display: flex; gap: 6px; flex-wrap: wrap; }
.tweaks-opt {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tweaks-opt:hover { border-color: var(--brown); }
.tweaks-opt.active { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.tweaks-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tweaks-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--brown);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

/* ---------- HAMBURGER MENU ---------- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 101;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--brown);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 100;
  flex-direction: column;
  padding: 100px 32px 48px;
  gap: 0;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--brown);
  transition: all 0.2s;
  flex-shrink: 0;
}
.nav-mobile-close:hover { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.nav-mobile-menu a, .nav-mobile-menu button:not(.nav-mobile-close) {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--brown);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  text-align: left;
  cursor: pointer;
  letter-spacing: -0.02em;
}
.nav-mobile-menu a:hover { color: var(--burnt-deep); }
.nav-mobile-menu a.mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
  padding: 18px 24px;
  border-bottom: none;
  border-radius: 999px;
  background: var(--burnt);
  color: #fff;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: normal;
  text-align: center;
}
.nav-mobile-menu a.mobile-cta:hover { color: #fff; background: var(--burnt-deep); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  :root {
    --fs-h1: 52px;
    --fs-h2: 32px;
    --fs-display: 76px;
  }
  .shell, .nav-inner, .footer-inner { padding-left: 20px; padding-right: 20px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-inner { grid-template-columns: 1fr auto; }
  html { scroll-padding-top: 72px; }
}

@media (max-width: 600px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 26px;
    --fs-h3: 22px;
    --fs-display: 52px;
    --fs-mono: 12px;
  }
  .shell { padding-left: 40px; padding-right: 40px; }
  .nav-inner { padding-left: 40px; padding-right: 40px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .section-head { margin-bottom: 32px; }
  .footer { padding: 48px 40px 32px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; padding-left: 0; padding-right: 0; }
  .footer-bottom { flex-direction: column; gap: 8px; font-size: 10px; }
  .footer-display { font-size: 32px; }
  .nav-mobile-menu { padding: 76px 40px 40px; }
  .nav-mobile-menu a, .nav-mobile-menu button { font-size: 28px; padding: 14px 0; }
  .nav-mobile-menu a.mobile-cta { font-size: 18px; padding: 18px 24px; }
  .btn { min-height: 48px; }
  .tweaks-panel {
    right: 8px;
    bottom: 8px;
    min-width: 0;
    width: calc(100vw - 16px);
    max-width: 340px;
  }
}