/* ml-design: Manfred Lakner's house style. Picked 2026-11-02 in werkstatt.html:
   Rost + Bitter / Source Sans 3 + warm paper + blueprint signature + round line icons + accent-line cards.
   Fonts: link fonts/fonts.css (assets/fonts/ in the skill folder) (self-hosted, never fonts.googleapis.com on live pages). */

:root {
  /* surfaces, light is the base */
  --paper:      #F4F0E9;   /* page background */
  --card:       #FBF9F5;   /* raised surface on paper */
  --sand:       #EBE5DB;   /* quiet block, table stripe, input fill */
  --line:       #DAD2C6;   /* hairlines, blueprint grid */
  /* ink */
  --ink:        #1C1A1E;   /* all text on light */
  --muted:      #6F6A5C;   /* secondary text, captions */
  /* the one accent */
  --rust:       #C4572F;   /* buttons, emphasis words, blueprint drawing, card top line */
  --rust-dark:  #9E4123;   /* links and small rust text on light (contrast) */
  --rust-light: #D96F45;   /* rust on dark surfaces */
  --rust-wash:  rgba(196, 87, 47, 0.12);
  /* dark accent blocks (never the base) */
  --night:      #17161A;
  --night-card: #232024;
  --night-line: #342F33;
  --on-night:   #F2EEE8;
  /* status, apps and dashboards only, always paired with a word */
  --ok:         #2F7D3F;
  --warn:       #A8741A;

  --font-head: 'Bitter', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 6px;
  --wrap: 1120px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html { color-scheme: light; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--font-body); }
::selection { background: var(--rust); color: #fff; }
img, svg { max-width: 100%; }

/* type */
h1, h2, h3, .display { font-family: var(--font-head); font-weight: 700; color: var(--ink); margin: 0 0 var(--s4); letter-spacing: -0.2px; }
h1, .display { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.08; letter-spacing: -0.6px; }
h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.25; }
h1 em, h2 em, .display em { font-style: normal; color: var(--rust); }
p { margin: 0 0 var(--s4); max-width: 68ch; }
.lead { font-size: 21px; line-height: 1.5; color: var(--muted); }
.small { font-size: 15px; }
.kicker { display: inline-block; font: 600 13px/1.2 var(--font-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--rust); margin-bottom: var(--s3); }
a { color: var(--rust-dark); text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--rust); }

/* layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s4); }
.section { padding: var(--s8) 0; }
.section + .section { border-top: 1px solid var(--line); }
.grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: var(--s2); font: 600 16px/1 var(--font-body); padding: 14px 22px; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
.btn-primary { background: var(--rust); color: #fff; }
.btn-primary:hover { background: var(--rust-dark); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* inputs */
.field { display: grid; gap: var(--s2); }
.field label { font-weight: 600; font-size: 15px; }
.input { font: 400 17px/1.4 var(--font-body); color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.input:focus { border-color: var(--rust); outline: none; }

/* cards: flat, accent line on top */
.card { background: var(--card); border-top: 3px solid var(--rust); border-radius: var(--radius); padding: var(--s5); }
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--muted); font-size: 16px; margin: 0; }
.card .icon { margin-bottom: var(--s3); }
.card.quiet { border-top-color: var(--line); }

/* stat */
.stat .num { font: 700 48px/1 var(--font-head); color: var(--ink); }
.stat .num em { font-style: normal; color: var(--rust); }
.stat .label { font-size: 15px; color: var(--muted); margin-top: var(--s2); }

/* callout */
.callout { border-left: 3px solid var(--rust); background: var(--sand); padding: var(--s4) var(--s5); border-radius: 0 var(--radius) var(--radius) 0; }

/* icons: round line, 24 grid */
.icon { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.hot { stroke: var(--rust); }

/* dark accent block */
.night { background: var(--night); color: var(--on-night); }
.night h1, .night h2, .night h3 { color: var(--on-night); }
.night em { color: var(--rust-light); }
.night p, .night .lead { color: #B9B2A6; }
.night .card { background: var(--night-card); }
.night .icon { stroke: var(--on-night); }
.night a:not(.btn) { color: var(--rust-light); }

/* blueprint signature */
.blueprint { display: block; width: 100%; height: auto; }
.grid-l { stroke: var(--line); stroke-width: .6; }
/* every .draw element carries pathLength="1", so one dash value fits any line length */
.blueprint .draw { fill: none; stroke: var(--rust); stroke-width: 2.2; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 1; animation: bp-draw 2.4s var(--ease) .2s forwards; }
.blueprint .draw.d2 { animation-delay: .9s; }
.blueprint .draw.d3 { animation-delay: 1.6s; }
.blueprint .dim { fill: none; stroke: var(--ink); stroke-width: .9; }
.blueprint .lbl { font: 600 8px var(--font-body); letter-spacing: .6px; fill: var(--muted); }
.blueprint .num { font: 600 8px var(--font-body); fill: var(--ink); }
.night .grid-l { stroke: var(--night-line); }
.night .blueprint .draw { stroke: var(--rust-light); }
.night .blueprint .dim { stroke: var(--on-night); }
.night .blueprint .num { fill: var(--on-night); }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .blueprint .draw { animation: none; stroke-dashoffset: 0; } }