/* Memory Rolls brand: fonts, colours and the shared basics ("warm film").
   Served at /brand/brand.css on memoryrolls.com and on every event-camera site. Source: apps/brand. */

@font-face {
  font-family: "Fraunces";
  src: url("/brand/fonts/fraunces.woff2") format("woff2-variations"), url("/brand/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/brand/fonts/fraunces-italic.woff2") format("woff2-variations"), url("/brand/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/brand/fonts/inter.woff2") format("woff2-variations"), url("/brand/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paper and ink */
  --paper: #f6f1e7;
  --paper-2: #efe7d8;
  --card: #fffdf8;
  --ink: #1d1a16;
  --ink-2: #3b352d;
  --muted: #6c655a;
  --line: #e3d9c6;
  --line-strong: #cbbd9f;
  /* Brand colours */
  --amber: #c8891a;
  --amber-ink: #1b1404;
  --red: #c2452f;
  --good: #2f7d4f;
  --danger: #b4392f;
  /* A host's own colour replaces --accent on their pages */
  --accent: var(--amber);
  --accent-ink: var(--amber-ink);
  /* Type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Shape */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 0 var(--line), 0 12px 28px -18px #4a3a1f66;
  --print-shadow: 0 1px 0 var(--line), 0 10px 24px -14px #4a3a1f55;
  color-scheme: light;
}

/* The camera and dark mode use the darkroom palette. */
.darkroom {
  --paper: #12100d;
  --paper-2: #1b1813;
  --card: #1f1b16;
  --ink: #f3ede2;
  --ink-2: #ddd4c4;
  --muted: #a89f90;
  --line: #342f28;
  --line-strong: #4a4339;
  --amber: #e3a640;
  --red: #e06a52;
  --good: #5cc28a;
  --danger: #ff7a6e;
  --shadow: 0 1px 0 #0006, 0 14px 30px -18px #000c;
  --print-shadow: 0 1px 0 #0006, 0 14px 30px -18px #000c;
  color-scheme: dark;
}

/* Brand mark and lockup */
.mr-mark { display: inline-block; width: 28px; height: 28px; flex: none; vertical-align: middle; }
.mr-lockup { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.mr-lockup small { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-left: 9px; margin-left: 2px; border-left: 1px solid var(--line-strong); }
.mr-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 7px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: .01em; }
.mr-chip .mr-mark { width: 22px; height: 22px; }

/* Eyebrow label: small caps with a dot in the accent colour (readable with any host colour) */
.mr-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mr-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* A photo print: white border, thicker at the bottom, slight tilt */
.mr-print { background: var(--card); padding: 8px 8px 26px; border-radius: 6px; box-shadow: var(--print-shadow); }

/* "Made with love in Minnesota" badge (footers) */
.mn-made { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1.2 var(--sans); color: var(--muted); }
.mn-made .mn-mark { width: 30px; height: 35px; flex: none; color: var(--ink-2); }