/* ───────────────────────────────────────────────────────────────
   base.css — shared silver-on-black theme (matches assets/logo.png). Change colours here.
   ─────────────────────────────────────────────────────────────── */
:root {
  --paper: #08080a;        /* page background — the logo's black */
  --paper-2: #121316;
  --paper-line: rgba(220, 224, 232, 0.07);
  --card: #111215;         /* notes / panels */
  --card-2: #17181c;       /* sticky notes */
  --ink: #d4d7dd;          /* polished silver */
  --ink-dark: #f3f4f6;
  --pencil: #9a9ea7;       /* tarnished silver, body copy */
  --red: #eef0f3;          /* headline ink — bright silver */
  --danger: #d0565a;       /* checks, captures, errors */
  --orange: #b8bcc5;       /* hover / selection steel */
  --green: #c9d2c5;
  --yellow: #e6e8ec;
  --violet: #8d939e;
  --sticky: #17181c;
  --metal: linear-gradient(180deg, #ffffff 0%, #d9dce1 38%, #8e939c 52%, #e4e6ea 70%, #a7abb3 100%);
  --shadow: 0 0 0 1px rgba(220, 224, 232, 0.10), 0 14px 30px -14px rgba(0, 0, 0, 0.9);

  --font-hand: 'IM Fell English', Georgia, serif;
  --font-title: 'Cinzel', 'IM Fell English', Georgia, serif;

  --radius-sketch: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --radius-sketch-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1.45;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(200, 205, 215, 0.07), transparent 60%),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.6) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .86 0 0 0 0 .9 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  overflow-x: hidden;
}

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-title); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: .02em; }

/* polished-silver lettering, like the logo */
.metal {
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8));
}

.ink-red { color: var(--red); }
.ink-blue { color: var(--ink); }
.ink-green { color: var(--green); }
.ink-orange { color: var(--orange); }

/* ---------- hand-drawn button ---------- */
.sketch-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 1.1em 0.45em;
  border: 0;
  background: transparent;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease;
  isolation: isolate;
}
.sketch-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 2.6px solid currentColor;
  border-radius: var(--radius-sketch);
  background: rgba(18, 19, 22, 0.85);
  filter: url(#wobble);
  transition: background 0.15s ease;
}
.sketch-btn:hover { transform: rotate(-1.5deg) scale(1.04); }
.sketch-btn:active { transform: scale(0.97); }
.sketch-btn.primary { color: #0b0b0d; }
.sketch-btn.primary::before { background: var(--metal); border-color: #f4f5f7; }
.sketch-btn.primary:hover::before { background: linear-gradient(180deg, #fff, #e9ebee 45%, #b3b7bf 55%, #f1f2f4); }
.sketch-btn.small { font-size: .9rem; padding: 0.2em 0.8em 0.3em; }
.sketch-btn:focus-visible { outline: 2px dashed var(--orange); outline-offset: 4px; }

/* ---------- paper cards ---------- */
.note {
  position: relative;
  padding: 1rem 1.2rem 1.2rem;
  background: var(--card);
  box-shadow: var(--shadow);
  transform: rotate(-0.6deg);
}
.note::before {               /* tape */
  content: '';
  position: absolute;
  top: -12px; left: 50%;
  width: 84px; height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(180deg, rgba(235, 237, 241, .55), rgba(150, 155, 165, .4));
  border-left: 2px dashed rgba(0, 0, 0, 0.25);
  border-right: 2px dashed rgba(0, 0, 0, 0.25);
}
.note.sticky { background: var(--sticky); transform: rotate(1deg); }
.note.lined {
  background-image: repeating-linear-gradient(transparent 0 29px, var(--paper-line) 29px 30px);
  background-color: var(--card);
}
.note h3 { font-size: 1.3rem; color: var(--red); margin-bottom: 0.3rem; }

/* ---------- margin doodles ---------- */
.doodle { position: absolute; pointer-events: none; z-index: 0; }
.doodle svg { width: 100%; height: auto; overflow: visible; }
.float { animation: float 6s ease-in-out infinite; }
.float.slow { animation-duration: 9s; }
.spin-slow svg { animation: spin 40s linear infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.scribble-under { position: relative; display: inline-block; }
.scribble-under > .doodle { left: -4%; right: -4%; bottom: -0.35em; width: 108%; position: absolute; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}