/* =========================================================================
   Douze Degrés — Colors & Type
   Editorial, analog, atelier. Sober. No gradients. No rounded corners.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts — Work Sans (single family across the whole site)
   Variable font with weights 100..900, normal + italic.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/WorkSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/WorkSans-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/WorkSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------------------
     Color — base palette
     A short, intentional list. Off-white paper, ink black, a stack of
     greys for hierarchy. No accent colour by default.
     ---------------------------------------------------------------------- */
  --dd-ink:        #111111;   /* near-black, neutral. The "ink". */
  --dd-paper:      #F7F6F3;   /* blanc cassé subtil — primary canvas */
  --dd-paper-2:    #F1F0EC;   /* secondary surface, panels, plates */
  --dd-paper-3:    #E8E7E2;   /* dividers / muted plates */
  --dd-white:      #FFFFFF;   /* pure white — used sparingly */

  --dd-grey-900:   #1A1A1A;
  --dd-grey-700:   #3B3B3A;
  --dd-grey-500:   #6F6F6D;
  --dd-grey-400:   #8E8E8B;
  --dd-grey-300:   #B6B5B1;
  --dd-grey-200:   #D2D1CD;
  --dd-grey-100:   #E5E4E0;

  --dd-graphite:   #2A2A29;
  --dd-stone:      #6F6F6D;

  --dd-fg-1:       var(--dd-ink);
  --dd-fg-2:       var(--dd-grey-700);
  --dd-fg-3:       var(--dd-grey-500);
  --dd-fg-4:       var(--dd-grey-400);
  --dd-fg-inverse: var(--dd-paper);

  --dd-bg-1:       var(--dd-paper);
  --dd-bg-2:       var(--dd-paper-2);
  --dd-bg-3:       var(--dd-paper-3);
  --dd-bg-inverse: var(--dd-ink);

  --dd-rule:       var(--dd-ink);
  --dd-rule-soft:  var(--dd-grey-200);
  --dd-rule-faint: var(--dd-grey-100);

  --dd-stamp:      var(--dd-graphite);

  /* ----------------------------------------------------------------------
     Type — One family : Work Sans.
     Bold for titles. Light for body and captions. Italic via Work Sans
     italic variant. No companion italic family.
     Sizes — pt → px reference at 1pt = 1.333px :
       H1 : 36pt → 48px (Work Sans Bold)
       Body : 11pt → 15px (Work Sans Light)
       Caption : 9pt → 12px (Work Sans Light)
     ---------------------------------------------------------------------- */
  --dd-font-sans:    "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --dd-font-italic:  "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --dd-font-mono:    "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --dd-w-light:    300;
  --dd-w-regular:  400;
  --dd-w-medium:   500;
  --dd-w-bold:     700;

  --dd-fs-display: clamp(72px, 9vw, 144px); /* hero — kept large */
  --dd-fs-h1:      48px;                    /* 36pt — all section titles */
  --dd-fs-h2:      48px;
  --dd-fs-h3:      48px;
  --dd-fs-h4:      48px;
  --dd-fs-lead:    18px;
  --dd-fs-body:    15px;                    /* 11pt */
  --dd-fs-small:   12px;                    /* 9pt */
  --dd-fs-meta:    12px;
  --dd-fs-eyebrow: 11px;

  --dd-tr-display: -0.025em;
  --dd-tr-tight:   -0.015em;
  --dd-tr-normal:  0em;
  --dd-tr-wide:    0.08em;
  --dd-tr-eyebrow: 0.18em;

  --dd-lh-display: 0.95;
  --dd-lh-h:       1.1;
  --dd-lh-lead:    1.4;
  --dd-lh-body:    1.5;
  --dd-lh-tight:   1.2;

  --dd-s-1:  4px;  --dd-s-2:  8px;  --dd-s-3:  12px;
  --dd-s-4:  16px; --dd-s-5:  24px; --dd-s-6:  32px;
  --dd-s-7:  48px; --dd-s-8:  64px; --dd-s-9:  96px;
  --dd-s-10: 128px; --dd-s-11: 192px;

  --dd-page-pad-x: clamp(24px, 4vw, 64px);
  --dd-page-pad-y: clamp(24px, 3vw, 48px);
  --dd-max-w:      1440px;

  --dd-bw: 1px; --dd-bw-2: 1.5px; --dd-bw-thick: 2px;
  --dd-radius: 0;       /* DO NOT use radius. Square corners only. */

  --dd-shadow-print: 0 1px 0 rgba(14,14,12,0.06);
  --dd-shadow-plate: 0 12px 32px -16px rgba(14,14,12,0.18);

  --dd-ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --dd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dd-dur-fast: 140ms;
  --dd-dur-base: 240ms;
  --dd-dur-slow: 420ms;

  --dd-z-base: 0; --dd-z-sticky: 10; --dd-z-overlay: 100; --dd-z-modal: 1000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dd-fg-1: var(--dd-paper);
    --dd-fg-2: var(--dd-grey-300);
    --dd-fg-3: var(--dd-grey-400);
    --dd-fg-4: var(--dd-grey-500);
    --dd-fg-inverse: var(--dd-ink);
    --dd-bg-1: var(--dd-ink);
    --dd-bg-2: #161613;
    --dd-bg-3: #1F1F1B;
    --dd-bg-inverse: var(--dd-paper);
    --dd-rule: var(--dd-paper);
    --dd-rule-soft: var(--dd-grey-700);
    --dd-rule-faint: #26261F;
  }
}

.dd-light {
  --dd-fg-1: var(--dd-ink);
  --dd-fg-2: var(--dd-grey-700);
  --dd-fg-3: var(--dd-grey-500);
  --dd-fg-inverse: var(--dd-paper);
  --dd-bg-1: var(--dd-paper);
  --dd-bg-2: var(--dd-paper-2);
  --dd-bg-3: var(--dd-paper-3);
  --dd-rule: var(--dd-ink);
  --dd-rule-soft: var(--dd-grey-200);
  background: var(--dd-bg-1);
  color: var(--dd-fg-1);
}
.dd-dark {
  --dd-fg-1: var(--dd-paper);
  --dd-fg-2: var(--dd-grey-300);
  --dd-fg-3: var(--dd-grey-400);
  --dd-fg-inverse: var(--dd-ink);
  --dd-bg-1: var(--dd-ink);
  --dd-bg-2: #161613;
  --dd-bg-3: #1F1F1B;
  --dd-rule: var(--dd-paper);
  --dd-rule-soft: var(--dd-grey-700);
  background: var(--dd-bg-1);
  color: var(--dd-fg-1);
}

/* =========================================================================
   Base / semantic typography — Work Sans, single family.
   Bold for titles. Light for body & captions. Italic = Work Sans italic.
   ========================================================================= */
.dd, .dd-root {
  font-family: var(--dd-font-sans);
  font-weight: var(--dd-w-light);
  font-size: var(--dd-fs-body);
  line-height: var(--dd-lh-body);
  letter-spacing: var(--dd-tr-normal);
  color: var(--dd-fg-1);
  background: var(--dd-bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dd ::selection { background: var(--dd-ink); color: var(--dd-paper); }

.dd-display {
  font-family: var(--dd-font-sans);
  font-weight: var(--dd-w-bold);
  font-size: var(--dd-fs-display);
  line-height: var(--dd-lh-display);
  letter-spacing: var(--dd-tr-display);
  text-wrap: balance;
}

.dd h1, .dd-h1,
.dd h2, .dd-h2,
.dd h3, .dd-h3,
.dd h4, .dd-h4 {
  font-family: var(--dd-font-sans);
  font-weight: var(--dd-w-bold);
  font-size: var(--dd-fs-h1);
  line-height: var(--dd-lh-h);
  letter-spacing: var(--dd-tr-tight);
  margin: 0 0 var(--dd-s-5);
  text-wrap: balance;
}

.dd p, .dd-p {
  font-family: var(--dd-font-sans);
  font-weight: var(--dd-w-light);
  font-size: var(--dd-fs-body);
  line-height: var(--dd-lh-body);
  color: var(--dd-fg-2);
  margin: 0 0 var(--dd-s-4);
  max-width: 64ch;
  text-wrap: pretty;
}

.dd-lead {
  font-family: var(--dd-font-sans);
  font-weight: var(--dd-w-light);
  font-size: var(--dd-fs-lead);
  line-height: var(--dd-lh-lead);
  color: var(--dd-fg-1);
  max-width: 56ch;
  text-wrap: pretty;
}

.dd-meta,
.dd-caption,
.dd-note {
  font-family: var(--dd-font-sans);
  font-weight: var(--dd-w-light);
  font-size: var(--dd-fs-small);
  line-height: 1.4;
  color: var(--dd-fg-3);
}

.dd-eyebrow {
  font-family: var(--dd-font-sans);
  font-weight: var(--dd-w-medium);
  font-size: var(--dd-fs-eyebrow);
  letter-spacing: var(--dd-tr-eyebrow);
  text-transform: uppercase;
  color: var(--dd-fg-1);
}

.dd-num {
  font-family: var(--dd-font-sans);
  font-weight: var(--dd-w-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.dd-rule {
  border: 0;
  border-top: var(--dd-bw) solid var(--dd-rule);
  margin: 0;
}
.dd-rule--soft { border-top-color: var(--dd-rule-soft); }
.dd-rule--thick { border-top-width: var(--dd-bw-thick); }

.dd a, .dd-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--dd-dur-fast) var(--dd-ease);
}
.dd a:hover, .dd-link:hover { opacity: 0.6; }