/* =========================================================
   PHIL SEKURA — DESIGN TOKENS
   System builds trust. The signature makes it yours.
   Source of truth: ~/.claude/skills/phil-sekura-design (Brand Kit Rev. 3)
   ========================================================= */

/* ---------- LOCAL FONTS (self-hosted, no external CDN) ---------- */
@font-face {
  font-family: 'Bebas Neue';
  src: url('assets/fonts/bebas-neue-latin-400-normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin-400-normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin-600-normal.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('assets/fonts/dm-serif-display-latin-400-normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('assets/fonts/dm-serif-display-latin-400-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono-latin-400-normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Permanent Marker';
  src: url('assets/fonts/permanent-marker-latin-400-normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Reenie Beanie';
  src: url('assets/fonts/reenie-beanie-latin-400-normal.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLOR TOKENS ---------- */
  --ink:    #0E0E0C;   /* Tinte — Primary, headlines on light */
  --paper:  #F4F1EA;   /* Papier — Default background */
  --bone:   #E8E3D7;   /* Bone — Surface, cards */
  --rust:   #E64A0E;   /* Rost — Default accent (95%) */
  --fog:    #8A857B;   /* Fog — Mute, captions, secondary */
  --accent: #FF3B00;   /* Neon — Statements, posters, covers (5%) */

  /* ---------- SEMANTIC COLOR ---------- */
  --bg:           var(--paper);
  --bg-surface:   var(--bone);
  --bg-inverted:  var(--ink);
  --fg:           var(--ink);
  --fg-mute:      var(--fog);
  --fg-inverted:  var(--paper);
  --accent-default: var(--rust);
  --accent-loud:    var(--accent);
  --border:       var(--ink);
  --border-mute:  var(--fog);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:   'Bebas Neue', 'Helvetica Neue Condensed', 'Arial Narrow', sans-serif;
  --font-italic:    'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:      'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
  --font-signature: 'Permanent Marker', 'Bradley Hand', cursive;
  --font-hand:      'Reenie Beanie', 'Bradley Hand', cursive;  /* die schreibende Hand — Korrektur + Marginalie */

  /* ---------- TYPE SIZE SCALE ---------- */
  /* Eine Stufe kleiner (Phil-Feedback Juli 2026): mehr Kontrast zwischen
     grossen Displays und Lesetext, das macht die Seite ruhiger. */
  --t-mono:    11px;
  --t-caption: 13px;
  --t-body:    15px;
  --t-lede:    18px;
  --t-h3:      32px;
  --t-h2:      48px;
  --t-h1:      72px;
  --t-display: 120px;
  --t-hero:    180px;

  /* ---------- TYPE TRACKING / LEADING ---------- */
  --tr-display:    0em;
  --tr-italic:    -0.02em;
  --tr-mono:       0.10em;
  --lh-display:    0.85;
  --lh-body:       1.5;
  --lh-mono:       1.2;

  /* ---------- SPACE SCALE (8pt base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- LAYOUT ---------- */
  --grid-margin: 6%;
  --grid-gutter: 2%;
  --grid-cols:   12;

  /* ---------- RADII ---------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;

  /* ---------- BORDER ---------- */
  --b-1: 1px solid var(--ink);
  --b-mute: 1px solid var(--fog);

  /* ---------- MOTION ---------- */
  --ease-out:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in:       cubic-bezier(0.6, 0, 0.8, 0.4);
  --dur-fast:      120ms;
  --dur-base:      160ms;
  --dur-slow:      240ms;

  /* ---------- ROTATION (hand gestures) ---------- */
  --rot-sig-min: -8deg;
  --rot-sig-max: -3deg;
  --rot-sig:     -5deg;
  --rot-correction: -4deg;
  --rot-marginal:   -3deg;
  --rot-tape:        2deg;

  /* ---------- HAND GESTURE SIZES ---------- */
  --t-marginal: 18px;

  /* ---------- FLUID TYPE (web surfaces) ---------- */
  --t-fluid-hero:    clamp(64px, 14vw, 200px);
  --t-fluid-display: clamp(48px, 10vw, 140px);
  --t-fluid-h1:      clamp(36px, 7vw, 88px);
  --t-fluid-lede:    clamp(16px, 1.3vw, 18px);
}

/* =========================================================
   BASE
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   TYPE — SEMANTIC
   ========================================================= */

.t-display, .t-hero, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  color: var(--fg);
}

.t-hero    { font-size: var(--t-hero); }
.t-display { font-size: var(--t-display); }
h1         { font-size: var(--t-h1); }
h2         { font-size: var(--t-h2); }
h3         { font-size: var(--t-h3); }

.italic-accent, em.accent {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: var(--tr-italic);
}

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.t-lede {
  font-family: var(--font-body);
  font-size: var(--t-lede);
  line-height: 1.45;
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  color: var(--fg-mute);
}

/* Mono — meta, labels, filed-refs */
.t-mono, code, kbd, .meta, .filed {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tr-mono);
  line-height: var(--lh-mono);
  color: var(--fg);
}

.t-mono--mute {
  color: var(--fg-mute);
}

/* Signature — Permanent Marker, rotated */
.signature {
  font-family: var(--font-signature);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  display: inline-block;
  transform: rotate(var(--rot-sig));
  transform-origin: bottom right;
  color: var(--fg);
  letter-spacing: 0;
  text-transform: none;
}

.signature--rust { color: var(--rust); }
.signature--paper { color: var(--paper); }
.signature svg { display: block; height: 1em; width: auto; overflow: visible; }

/* =========================================================
   HAND GESTURES — the second layer, beyond the signature
   Rule: signature is mandatory (exactly one per surface). At
   most ONE additional gesture — correction OR marginal note OR
   tape. Most assets carry none. Sparsamkeit.
   ========================================================= */

.correction s,
.correction del {
  text-decoration: line-through;
  text-decoration-thickness: 0.09em;
  text-decoration-color: var(--rust);
  text-decoration-skip-ink: none;
}
.correction ins {
  font-family: var(--font-hand);
  font-size: 0.62em;
  font-weight: 400;
  text-transform: lowercase;
  text-decoration: none;
  letter-spacing: 0;
  color: var(--rust);
  display: inline-block;
  position: relative;
  top: -0.5em;
  margin-left: -0.15em;
  transform: rotate(var(--rot-correction));
  transform-origin: bottom left;
}

.marginalia {
  font-family: var(--font-hand);
  font-size: var(--t-marginal);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fog);
  display: inline-block;
  max-width: 24ch;
  transform: rotate(var(--rot-marginal));
  transform-origin: top left;
}
.marginalia--ink   { color: var(--ink); }
.marginalia--paper { color: var(--paper); }

.tape {
  display: inline-block;
  padding: 6px 22px;
  background: var(--bone);
  opacity: 0.88;
  mix-blend-mode: multiply;
  transform: rotate(var(--rot-tape));
  clip-path: polygon(
    1.5% 0%, 98.5% 4%, 100% 22%, 99% 46%, 100% 70%, 98.5% 96%,
    50% 100%, 2% 97%, 0% 74%, 1.2% 48%, 0% 26%, 1% 8%
  );
}
.tape--vertical { transform: rotate(88deg); }

/* =========================================================
   UTILITIES
   ========================================================= */

.bg-paper { background: var(--paper); color: var(--ink); }
.bg-bone  { background: var(--bone);  color: var(--ink); }
.bg-ink   { background: var(--ink);   color: var(--paper); }
.bg-rust  { background: var(--rust);  color: var(--paper); }
.bg-neon  { background: var(--accent); color: var(--ink); }

.fg-ink   { color: var(--ink); }
.fg-fog   { color: var(--fog); }
.fg-rust  { color: var(--rust); }
.fg-paper { color: var(--paper); }

/* Grain overlay — apply as ::after on full-bleed surfaces */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('assets/grain.png');
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: 0.06;
  z-index: 1;
}

/* Filed-ref helper */
.filed::before {
  content: "/ ";
}

/* Text selection is a hand gesture too: Rust marker over print. */
::selection {
  background: var(--rust);
  color: var(--paper);
}

/* Focus is visible, sharp-cornered, honest. Never a soft glow. */
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
  border-radius: 0;
}

/* Datumstempel — mono date line, filed like everything else. */
.datum {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.datum::before { content: "/ "; }

/* =========================================================
   MOTION — scroll reveal (IntersectionObserver hook)
   Minimal, no bounce, no parallax.
   Progressive enhancement: hiding only applies once an early
   inline script has confirmed JS runs (html.js-reveal). No JS,
   slow JS, or a JS error means content stays fully visible.
   ========================================================= */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.js-reveal .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}