/* ============================================================
   VETTO · TRAÇOS — site.css  (ORCHESTRATOR)
   Warm generative aesthetic. Literary serif + brand mono.

   This is the one stylesheet every page links. It pulls in the design
   system layers, then adds the base reset + shared page scaffold.

   LAYER MAP
     css/tokens.css      single source of truth (colour/type/layout vars)
     css/themes.css      global themes + section combos + ink families
     css/components.css  nav · footer · buttons · forms · cards · chips · icons
     css/article.css     long-form journal language   (linked per-article page)
     css/legal.css       legal page layout             (linked per-legal page)
   ============================================================ */

@import url('css/tokens.css');
@import url('css/themes.css');
@import url('css/components.css');

/* ============================================================
   BASE / RESET
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--warm-bg);
  color: var(--lav);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font-mono);
  min-height: 100vh;
  overflow-x: hidden; /* safety net: nothing should bleed past the viewport */
}
::selection { background: var(--lav); color: var(--warm-bg); }
a { color: inherit; text-decoration: none; }

/* ============================================================
   PAGE SCAFFOLD (inner pages)
   ============================================================ */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 124px clamp(20px, 4vw, 52px) 40px;
}
.page-head { margin-bottom: clamp(40px, 7vw, 96px); }
.page-head .kicker { color: var(--lav-faint); margin-bottom: 22px; }
.page-title {
  font-family: var(--font-lit);
  font-weight: 400;
  font-size: clamp(52px, 11vw, 150px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--lav-bright);
  margin: 0;
}
.page-title em { font-style: italic; color: var(--lav); }
.page-lead {
  font-family: var(--font-lit);
  font-size: clamp(20px, 2.4vw, 29px);
  line-height: 1.35;
  color: var(--lav-soft);
  max-width: 30ch;
  margin: 28px 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 720ms var(--ease-out) both; }
  @keyframes rise { from { transform: translateY(16px); } to { transform: none; } }
}

/* inner pages clear the fixed nav with less air on small screens */
@media (max-width: 600px) {
  .page { padding-top: 92px; }
}

/* ============================================================
   CONTACT / FORM PAGE LAYOUT  (get in touch)
   Form CONTROLS live in components.css; this is just the page grid.
   ============================================================ */
.form-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 312px);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.form-head { max-width: 30ch; }
.form-head .kicker { color: var(--lav-faint); margin-bottom: 20px; }
.form-title {
  font-family: var(--font-lit); font-weight: 400;
  font-size: clamp(40px, 6.4vw, 84px); line-height: 0.96;
  letter-spacing: -0.022em; color: var(--lav-bright); margin: 0;
}
.form-title em { font-style: italic; color: var(--lav); }
.form-lead {
  font-family: var(--font-lit); font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.38; color: var(--lav-soft); max-width: 36ch; margin: 22px 0 0;
}

/* side panel: links + support */
.form-aside { display: flex; flex-direction: column; gap: clamp(28px, 4vh, 40px); }
.aside-block .aside-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--lav-faint); margin-bottom: 15px;
}
.aside-links { display: flex; flex-direction: column; gap: 12px; }
.aside-links a, .aside-email {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--lav-soft); text-decoration: none; width: fit-content; white-space: nowrap;
  transition: color 200ms ease;
}
.aside-email { font-size: 15px; letter-spacing: 0.02em; }
.aside-links a:hover, .aside-email:hover { color: var(--lav-bright); }
.aside-links a .ext-arrow { font-size: 0.72em; vertical-align: middle; color: var(--lav-faint); }
@media (min-width: 861px) {
  .form-aside { border-left: 1px solid var(--warm-line); padding-left: clamp(36px, 4vw, 60px); }
}

.vform-done { max-width: 560px; }
.vform-done h2 { font-family: var(--font-lit); font-weight: 400; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.05; color: var(--lav-bright); margin: 0 0 14px; }
.vform-done p { font-family: var(--font-lit); font-size: clamp(18px, 2.1vw, 24px); line-height: 1.4; color: var(--lav-soft); margin: 0; }
.vform-done b { color: var(--lav-bright); font-weight: 400; }
.vform-done .again { display: inline-block; margin-top: 26px; }
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 60px); }
  .form-aside { border-top: 1px solid var(--warm-line); padding-top: clamp(28px, 5vw, 38px); }
}

/* ============================================================
   PRINT — used by the article "download as PDF" button
   ============================================================ */
@media print {
  .nav, .site-foot, .meta-actions, .back, .end-cta { display: none !important; }
  .paper { padding-top: 28px !important; max-width: 100% !important; }
  .work-cta-title, .work-cta-actions { display: none !important; }
}