/* =========================================================
   ATELIER PILATES · Brand Identity Vol I
   Portable stylesheet — no Claude Design runtime required.
   Resolves the design-system token cascade into one clean file:
     --serif    → Fraunces      (editorial serif, sparing)
     --sans     → DM Sans       (body, labels, small-caps)
     --mono     → DM Sans       (folios / figures — matches DS cascade)
     --wordmark → Söhne         (the mark, logo only)
   ========================================================= */

/* ---- Fraunces + DM Sans (from Google Fonts, as the DS uses) ---- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,200;9..40,300;9..40,400;9..40,500;9..40,600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap');

/* ---- Söhne — the wordmark face (self-hosted) ---- */
@font-face{
  font-family: 'Söhne';
  src: url('../fonts/Sohne-Buch.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Söhne';
  src: url('../fonts/Sohne-Kraftig.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root{
  /* Grounds */
  --bg-primary:   #F7F5F2;   /* Paper — primary canvas */
  --bg-secondary: #FAFAF8;   /* Snow — near-white separation */
  --desk:         #E7E1D8;   /* mat behind the sheet */
  /* Marks & accents */
  --brown:        #43302E;   /* burgundy — the wordmark + dark surfaces */
  --brown-soft:   #6E5650;
  --brand-blue:   #C1DBE8;   /* pastel blue accent */
  --butter:       #FFF1B5;   /* buttermilk warm field */
  /* Neutrals / type */
  --ink:          #1A1A1A;
  --ink-soft:     #2A2A2A;
  --sepia-warm:   #8C7C6A;
  --stone:        #6E665E;
  --gold:         #D9C4A0;
  --bronze:       #A38A5E;
  --espresso:     #2A2521;
  /* Type */
  --serif:    'Fraunces', 'Canela', 'GT Sectra', 'Didot', serif;
  --sans:     'DM Sans', 'Helvetica Neue', system-ui, sans-serif;
  --mono:     'DM Sans', ui-monospace, Menlo, monospace;
  --wordmark: 'Söhne', 'DM Sans', 'Helvetica Neue', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; background: var(--desk); }
body{
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ display: block; max-width: 100%; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* =========================================================
   The wordmark · class="wordmark" + <span class="pd"></span>
   Söhne Buch, lowercase, tight tracking. The dot is a true mark.
   ========================================================= */
.wordmark{
  font-family: var(--wordmark);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1;
  color: var(--brown);
  text-transform: lowercase;
}
.wordmark.inverse{ color: var(--bg-primary); }
.wordmark.ink{ color: var(--ink); }
.wordmark.butter{ color: var(--butter); }
.wordmark.blue{ color: var(--brand-blue); }
.wordmark .pd{
  display: inline-block;
  width: 0.13em; height: 0.13em;
  background: currentColor;
  border-radius: 50%;
  margin-left: 0.02em;
  vertical-align: baseline;
}

/* =========================================================
   Print · each spread becomes one Letter page.
   The book is designed at 1160px; zoom scales it onto the sheet.
   (No auto-print — use the browser's Print / Save-as-PDF.)
   ========================================================= */
@page{ size: letter portrait; margin: 0.45in; }
@media print{
  html, body{ background: #FFFFFF; }
  .ap-desk{ padding: 0 !important; background: #FFFFFF !important; min-height: 0 !important; }
  .ap-book{ box-shadow: none !important; margin: 0 auto !important; zoom: 0.62; }
  .ap-book > section{ break-before: page; break-inside: avoid; }
  .ap-book > section:first-child{ break-before: auto; }
  .ap-book > section:last-child{ break-before: auto; }
}