/* Pastarello direction comps: shared mechanics, fonts, tweakable variables and motion primitives.
   Each direction sets its own values in :root; the tweak panel overrides them at runtime. */

/* ---- fonts (self-hosted, subset; Fontshare FFL, Google Fonts OFL) ---- */
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/BodoniModa-Variable.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/BodoniModa-VariableItalic.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: Newsreader; src: url('fonts/Newsreader-Variable.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: Newsreader; src: url('fonts/Newsreader-VariableItalic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: Boska; src: url('fonts/Boska-Variable.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: Boska; src: url('fonts/Boska-VariableItalic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: Erode; src: url('fonts/Erode-Variable.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Erode; src: url('fonts/Erode-VariableItalic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: Sentient; src: url('fonts/Sentient-Variable.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: Sentient; src: url('fonts/Sentient-VariableItalic.woff2') format('woff2'); font-weight: 200 700; font-style: italic; font-display: swap; }
@font-face { font-family: Switzer; src: url('fonts/Switzer-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Switzer; src: url('fonts/Switzer-VariableItalic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-Variable.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-VariableItalic.woff2') format('woff2'); font-weight: 200 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

/* ---- tweakable decisions (defaults; each direction overrides) ---- */
:root {
  --f-display: 'Bodoni Moda', serif;     /* editorial titles */
  --f-text: Switzer, sans-serif;         /* body and UI */
  --f-accent: 'Bodoni Moda', serif;      /* italic accents */
  --f-mono: 'JetBrains Mono', monospace; /* archive labels */
  --s: 1; --fs: 15px; --lh: 1.55; --wd: 400; --track: -0.02em;
  --sp: 1; --img: none; --radius: 0px;
  --motion: 1; --dur: 1000ms; --ease: cubic-bezier(.16, 1, .3, 1); --stagger: 80ms;
  --bg: #F7F4EE; --ink: #16130F; --mute: #6E665C; --accent: #6B1F22; --ph: #E4DDD2; --m: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; background: var(--bg); color: var(--ink); font: 400 var(--fs)/var(--lh) var(--f-text); }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
h1, h2, h3, .display { font-family: var(--f-display); font-weight: var(--wd); letter-spacing: var(--track); }
.ital { font-family: var(--f-accent); font-style: italic; font-weight: var(--wd); }
.data { font: 400 11px/1.6 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.data.ink { color: var(--ink); }
.data b, .cap b { text-transform: none; letter-spacing: var(--track); }
.cap { display: grid; gap: 4px; }
.body { font-size: var(--fs); line-height: var(--lh); }
.small { font-size: 13px; line-height: 1.55; color: var(--mute); }
.rule { border-top: 1px solid var(--ink); }
.cta { display: inline-block; font-size: 14px; color: var(--ink); }

/* ---- image slots ---- */
.ph { position: relative; background: var(--ph); overflow: hidden; border-radius: var(--radius); }
.ph::after { content: attr(data-slot); position: absolute; left: 12px; bottom: 10px; font: 400 10px/1 var(--f-mono); letter-spacing: .08em; color: rgba(0,0,0,.35); }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--img); }
.ph:has(> img)::after { display: none; }

/* ---- links ---- */
a.cta, nav a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 420ms var(--ease); padding-bottom: 2px; }
a.cta:hover, nav a:hover { background-size: 100% 1px; }
a.cta { background-size: 100% 1px; background-image: linear-gradient(var(--accent), var(--accent)); }
a.cta:hover { background-size: 0% 1px; }

/* ---- motion primitives ---- */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger)); will-change: opacity, transform; }
html.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
html.js .ph > img { transform: scale(1.06); transition: transform calc(var(--dur) * 1.6) var(--ease); }
html.js .ph.is-in > img, html.js .is-in .ph > img { transform: scale(1); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 280ms ease-in both; }
::view-transition-new(root) { animation: vt-in 520ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; }
  html.js .ph > img { transform: none; }
}