/* BuyRight Notes brand tokens and primitives
   Mood: lamplit room at night, phone in hand. Deep night-brown surfaces (dark wood, not coffee), bone text, one warm lamp-glow accent.
   Import this before any page styles. Nothing here shows Amazon prices, stars or badges. */

/* Fonts: Fraunces (display, soft serif) + Bricolage Grotesque (UI/body). Loaded by the page <link>. */

:root {
  /* Surfaces, darkest to lightest */
  --ink-950: #171117;
  --ink-900: #1f171f;
  --ink-800: #2a2029;
  --ink-700: #382c36;
  --ink-600: #4e404b;

  /* Text */
  --bone: #f4eae2;
  --bone-2: #cfc0b8;
  --bone-3: #a0918a; /* faint text; 4.9:1 on cards, 5.5:1 on surfaces (was #8f7f6d, 4.1:1 on cards) */

  /* Accent: ember (the lamp) */
  --ember: #f1ac72;
  --ember-2: #ffcb9c;
  --ember-deep: #c98247;
  --ember-ink: #2b190a;

  /* Supporting warmth */
  --blush: #f2bcae;
  --clay: #cd6f5a;
  --sage: #adbca4;

  /* Light paper (blog graphics, print, light lockup) */
  --paper: #f6eee3;
  --paper-2: #ebdfcf;
  --paper-ink: #241c17;

  /* Semantic */
  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --card: var(--ink-800);
  --line: rgba(244, 234, 226, 0.1);
  --line-strong: rgba(244, 234, 226, 0.18);
  --text: var(--bone);
  --text-2: var(--bone-2);
  --text-3: var(--bone-3);
  --accent: var(--ember);
  --accent-hi: var(--ember-2);
  --on-accent: var(--ember-ink);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: clamp(2rem, 6vw, 2.75rem);
  --fs-3xl: clamp(2.5rem, 9vw, 4.25rem);
  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --track-caps: 0.14em;

  /* Space and shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  --gutter: 20px;
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px;

  /* Depth: glow, not drop shadow */
  --glow-ember: 0 0 0 1px rgba(255, 203, 156, 0.08), 0 24px 64px -24px rgba(241, 172, 114, 0.45);
  --glow-soft: 0 0 0 1px rgba(243, 231, 214, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  --lamp: radial-gradient(60% 45% at 50% 0%, rgba(241, 172, 114, 0.2), rgba(241, 172, 114, 0) 70%);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* bottom sheet in/out */
  --ease-settle: cubic-bezier(0.3, 1.35, 0.4, 1); /* slot-machine overshoot */
  --dur-1: 160ms; --dur-2: 240ms; --dur-3: 720ms;
}

/* Light theme (paper) for graphics or a future daytime toggle */
[data-theme="paper"] {
  --bg: var(--paper);
  --surface: #fff8ef;
  --card: #ffffff;
  --line: rgba(36, 28, 23, 0.1);
  --line-strong: rgba(36, 28, 23, 0.2);
  --text: var(--paper-ink);
  --text-2: #5c4d40;
  --text-3: #8f7f6d;
  --accent: var(--ember-deep);
  --accent-hi: var(--ember);
  --glow-ember: 0 0 0 1px rgba(201, 120, 46, 0.12), 0 24px 64px -28px rgba(201, 120, 46, 0.35);
  --lamp: radial-gradient(60% 45% at 50% 0%, rgba(240, 164, 88, 0.28), rgba(240, 164, 88, 0) 70%);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; scrollbar-color: var(--ink-600) var(--bg); caret-color: var(--accent); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
[data-theme="paper"] { color-scheme: light; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
::selection { background: var(--ember); color: var(--ember-ink); }

/* Type */
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.display { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-variation-settings: "opsz" 144, "SOFT" 60; }
.h1 { font-size: var(--fs-2xl); line-height: 1.06; font-variation-settings: "opsz" 96, "SOFT" 50; }
.h2 { font-size: var(--fs-xl); line-height: var(--lh-snug); font-variation-settings: "opsz" 48, "SOFT" 40; }
.h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); font-variation-settings: "opsz" 24, "SOFT" 30; }
.lede { font-size: var(--fs-lg); color: var(--text-2); line-height: 1.45; text-wrap: pretty; }
.small { font-size: var(--fs-sm); color: var(--text-2); }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.ital { font-style: italic; font-weight: 400; }

/* Buttons */
.btn {
  appearance: none; border: 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 52px; padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font: 600 var(--fs-md)/1 var(--font-ui);
  letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms var(--ease-out), background var(--dur-1) ease;
}
/* Press is quicker than release, so the tap feels immediate. */
.btn:active { transform: scale(0.97); transition-duration: 100ms; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-ember); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn-quiet { background: var(--card); color: var(--text); }
/* Hover only for real mouse pointers: on phones a tap would leave the button stuck in its hover colour. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-hi); }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
}
.btn-sm { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

/* Chips (categories) */
.chip {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 6px 12px; border-radius: var(--r-pill);
  font: 600 var(--fs-xs)/1 var(--font-ui);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.chip-hot { color: var(--blush); }
.chip-hot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 10px var(--clay); }

/* Cards */
.card {
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: var(--glow-soft);
  overflow: hidden;
}
.card-media { aspect-ratio: 4 / 5; background: var(--ink-700); }
.card-body { padding: var(--sp-4); display: grid; gap: var(--sp-2); }

/* Slots reserved for Creators API data. Empty until eligible; never hand-filled. */
.slot-price, .slot-rating, .slot-badge { display: none; }
.slot-price[data-ready], .slot-rating[data-ready], .slot-badge[data-ready] { display: inline-flex; }

/* Disclosure */
.disclosure {
  font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

/* Grain overlay: one per page, on body::after */
.grain::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 25; /* under the buy bar, so the Buy button is never tinted */
  opacity: 0.07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Reveal on scroll (progressive; static without support) */
.reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise both linear;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Reels: native scroll-snap, next card peeks */
.reel {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: var(--sp-2) var(--gutter) var(--sp-4);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reel::-webkit-scrollbar { display: none; }
/* A reel inside a grid or flex parent must be allowed to shrink, or its cards widen the page. */
.reel, .reel-wrap { min-width: 0; max-width: 100%; }
.reel > * { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; }

/* Touch devices: no full-screen blend layer (costly on every scroll frame on mid and low-end phones). */
@media (pointer: coarse) {
  .grain::after { mix-blend-mode: normal; opacity: .035; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}