/* ============================================================
   Cadou — shared design system (tokens, reset, typography)
   Each site overrides --accent / --accent-deep / --accent-soft
   and adds its own character via its local style.css
   ============================================================ */

:root {
  /* Paper — never pure white */
  --bg:        #FBF7F1;
  --bg-deep:   #F1ECE1;
  --bg-warm:   #F5EFE3;
  --paper:     #FFFEFB;

  /* Ink — never pure black */
  --ink:    #1B1814;
  --ink-2:  #3A322C;
  --ink-3:  #6C6157;
  --ink-4:  #857B71;
  --ink-5:  #C8BFB3;

  /* Gold thread */
  --gold:        #9A7530;
  --gold-soft:   rgba(184, 154, 90, 0.10);
  --gold-edge:   rgba(184, 154, 90, 0.32);

  /* Hairlines */
  --hair:         1px solid rgba(27, 24, 20, 0.08);
  --hair-strong:  1px solid rgba(27, 24, 20, 0.16);

  /* Accent — overridden per site */
  --accent:        oklch(0.55 0.13 240);
  --accent-deep:   oklch(0.40 0.14 240);
  --accent-soft:   oklch(0.55 0.13 240 / 0.08);
  --accent-edge:   oklch(0.55 0.13 240 / 0.22);

  /* Typography */
  --font-display: "Fraunces", "EB Garamond", Georgia, serif;
  --font-sans:    "Inter", -apple-system, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-hand:    "Caveat", "Fraunces", cursive;

  --type-micro:   0.78rem;
  --type-small:   0.9375rem;
  --type-body:    1.0625rem;
  --type-h3:      1.25rem;

  --leading-tight: 1.05;
  --leading-snug:  1.3;
  --leading-body:  1.62;
  --leading-letter: 1.78;

  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.012em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.16em;
  --tracking-widest:  0.22em;

  /* Spacing scale */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-7: 1.75rem;  --s-8: 2rem;
  --s-10: 2.5rem;  --s-12: 3rem;    --s-14: 3.5rem;  --s-16: 4rem;
  --s-20: 5rem;    --s-24: 6rem;    --s-32: 8rem;

  --content-max: 640px;
  --content-letter: 36rem;
  --gutter: 1.5rem;

  /* Motion */
  --d-fast:   240ms;
  --d-mid:    600ms;
  --d-slow:   1100ms;
  --d-page:   1400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-mid: 0ms; --d-slow: 0ms; --d-page: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-feature-settings: "ss01", "cv11", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }

/* paper grain — applied per site */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, section, article, footer, header { position: relative; z-index: 2; }

/* Generic photo placeholder */
.photo {
  position: relative;
  width: 100%;
  background: var(--bg-deep);
  overflow: hidden;
}
.photo--16-9 { aspect-ratio: 16 / 9; }
.photo--4-5  { aspect-ratio: 4 / 5; }
.photo--5-6  { aspect-ratio: 5 / 6; }
.photo--3-4  { aspect-ratio: 3 / 4; }
.photo--1-1  { aspect-ratio: 1 / 1; }
.photo--3-2  { aspect-ratio: 3 / 2; }

.photo-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 36%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 56%),
    radial-gradient(circle at 78% 70%, color-mix(in oklch, var(--gold) 14%, transparent), transparent 50%),
    linear-gradient(135deg,
      color-mix(in oklch, var(--accent) 10%, var(--bg-deep)),
      color-mix(in oklch, var(--gold) 8%, var(--bg-deep)));
  transition: transform 80ms linear;
  will-change: transform;
}
.photo-label {
  position: absolute;
  bottom: var(--s-3);
  right: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(27, 24, 20, 0.5);
  letter-spacing: 0.04em;
  background: rgba(255, 254, 251, 0.78);
  padding: 2px 7px;
  border-radius: 3px;
  border: var(--hair);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Envelope shared base — overlays content, fades out on open */
.envelope {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--s-10) var(--gutter);
  background: var(--bg);
  transition: opacity var(--d-page) var(--ease-out),
              visibility 0s linear var(--d-page);
  overflow-y: auto;
}
.envelope.is-opened {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.envelope-inner {
  text-align: center;
  max-width: 540px;
}

.content { /* always rendered; envelope sits on top */ }

/* no-JS fallback */
.no-js .envelope { display: none; }

/* Letter dropcap shared mechanism */
.dropcap {
  float: left;
  font-family: var(--font-display);
  font-size: 4.4em;
  line-height: 0.82;
  margin: 0.04em 0.12em -0.05em -0.03em;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "wght" 360, "SOFT" 50;
  font-style: normal;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);
}
.dropcap.is-visible { opacity: 1; transform: translateY(0); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}