:root {
  /* light gallery theme: warm white, never pure #fff */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #efede7;
  --text: #171614;
  --text-2: #4a4640;            /* body copy */
  --muted: #8a847a;
  --accent: #ffd100;            /* Arsetco yellow: fills, CTAs, highlights */
  --accent-ink: #b58900;        /* yellow for small text on white (readable) */
  --accent-rgb: 255, 209, 0;
  --bone: #f7f5f0;              /* Arsetti: strict monochrome */
  --ink: #0e0d0c;
  --line: #dcd8cf;
  --dark: #141311;              /* the hero film and dark moments */
  --light: #f2efe9;

  --font: "DM Sans", system-ui, sans-serif;
  --font-head: "Jost", var(--font);
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --tshadow: 0 1px 2px rgba(10, 9, 8, .9), 0 3px 12px rgba(10, 9, 8, .7), 0 10px 44px rgba(10, 9, 8, .7);
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--ink); }

.mono { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 1.6rem;
  font: 500 .9rem/1 var(--font); letter-spacing: .04em; text-decoration: none;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  text-shadow: none;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: #ffe14d; }
.btn--ghost { border-color: color-mix(in srgb, var(--text) 30%, transparent); color: var(--text); background: color-mix(in srgb, var(--bg) 35%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--ghost:hover { border-color: var(--text); }
.btn svg { width: 1em; height: 1em; }