*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,system-ui,sans-serif;line-height:1.7;color:#333;background:#fff}
.css-8o99zww{max-width:780px;margin:0 auto;padding:0 20px}
header{background:#1a1a2e;color:#fff;padding:32px 0;margin-bottom:40px}
header h1{font-size:28px;margin-bottom:4px}
header p{opacity:.7;font-size:15px}
header .css-aidd462{color:#fff;text-decoration:none;font-size:18px;font-weight:600}
.css-s85qhm8{border-bottom:1px solid #eee;padding:24px 0}
.css-s85qhm8 h2{font-size:20px;margin-bottom:8px}
.css-s85qhm8 h2 a{color:#1a1a2e;text-decoration:none}
.css-s85qhm8 h2 a:hover{color:#e94560}
.css-s85qhm8 .date{font-size:13px;color:#999;margin-bottom:8px}
.css-hnotdtt{color:#e94560;text-decoration:none;font-size:14px;font-weight:600}
.css-7spjq4l{padding-bottom:60px}
.css-7spjq4l h1{font-size:32px;margin-bottom:8px}
.css-7spjq4l time{font-size:13px;color:#999;display:block;margin-bottom:24px}
.css-7spjq4l h2{font-size:22px;margin:32px 0 12px}
.css-7spjq4l h3{font-size:18px;margin:24px 0 8px}
.css-7spjq4l p{margin-bottom:16px}
.css-7spjq4l ul,.css-7spjq4l ol{margin:0 0 16px 24px}
.css-7spjq4l a{color:#e94560}
.css-7spjq4l img{max-width:100%;height:auto;border-radius:8px;margin:16px 0}
footer{border-top:1px solid #eee;padding:24px 0;margin-top:40px;text-align:center;font-size:13px;color:#999}
footer a{color:#999}
.css-ab4zcz4{background:#f5f5f5;border-left:3px solid #999;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#777;font-style:italic}
.css-ey3hw5r{background:#fef9e7;border:1px solid #f0c36d;padding:10px 14px;margin-top:20px;font-size:12px;color:#8a6d3b}
.css-wjx5t2q{font-size:13px;color:#999;margin:-16px 0 24px;font-style:italic}
.css-mk4kneh{text-align:center;margin:0 0 20px}
.css-bn7zbiy{max-width:100%;height:auto;border-radius:6px}
.css-c14opzb{margin-top:40px;padding-top:24px;border-top:1px solid #eee}
.css-c14opzb h3{font-size:18px;margin-bottom:12px}
.css-c14opzb ul{list-style:none;padding:0}
.css-c14opzb li{padding:4px 0}
.css-c14opzb a{color:#e94560;text-decoration:none}
.css-4d0w73s{padding:20px 0}
.css-4d0w73s ul{list-style:none;padding:0}
.css-4d0w73s li{padding:5px 0;font-size:15px}
.css-4d0w73s a{color:#1a1a2e;text-decoration:none}
.css-4d0w73s a:hover{color:#e94560}
/* === Theme === */
:root{--primary:#4D2D3C;--accent:#B07A33;--bg:#F0E8D5;--fg:#1A0F15;--border:#C5B68F;--r:17px;--fb:'Merriweather';--fh:'Zilla Slab'}
/* === Custom === */
/* === QA round-1 fixes (2026-07-21T12:13:44+0800) === */
/* Schrittfest — editorial rebuild: technical-logbook magazine.
   Display = Zilla Slab (slab, SAP-Handbuch), Text = Merriweather,
   Meta = IBM Plex Mono (log-file voice). Moment colour = rust, drop caps only.
   @import is stripped by the pipeline -> webfonts loaded via @font-face. */

@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/zillaslab/v12/dFa5ZfeM_74wlPZtksIFYuUe6HOpW3pwfa0.woff2) format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/zillaslab/v12/dFa5ZfeM_74wlPZtksIFYoEf6HOpW3pwfa0.woff2) format('woff2')}
@font-face{font-family:'Zilla Slab';font-style:italic;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/zillaslab/v12/dFanZfeM_74wlPZtksIFaj8CRHGZWXB3X6_0fw.woff2) format('woff2')}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/merriweather/v33/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqqJ-mXq1Gi.woff2) format('woff2')}
@font-face{font-family:'Merriweather';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/merriweather/v33/u-4B0qyriQwlOrhSvowK_l5-eTxCVx0ZbwLvKH2Gk9hLmp0v5yA-xXPqCzLvPee1XYk_XSf-FmTCUG33AvH4ZL_Ean0.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgsAXHNk.woff2) format('woff2')}

:root {
  --fd: 'Zilla Slab', Rockwell, Georgia, serif;   /* display */
  --ft: 'Merriweather', Georgia, serif;           /* text    */
  --fm: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* meta */
  --moment: #B34F2A;                              /* rust — drop caps only */
  --ink-soft: rgba(26, 15, 21, .74);
  --hair: rgba(77, 45, 60, .16);
}

/* ---------- base ---------- */
:root body { font-family: var(--ft); color: var(--fg); background: var(--bg); line-height: 1.75; font-size: 16.5px; -webkit-font-smoothing: antialiased; }
::selection { background: var(--primary); color: var(--bg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 34px 0; }

/* ---------- masthead ---------- */
:root header {
  background-color: var(--primary);
  background-image: linear-gradient(102deg, rgba(46, 24, 34, .95) 0%, rgba(77, 45, 60, .90) 42%, rgba(77, 45, 60, .60) 100%), url("/theme-assets/hero-masthead.jpg");
  background-size: cover; background-position: center 58%; background-repeat: no-repeat;
  color: var(--bg); padding: 52px 0 30px; margin-bottom: 52px;
  border-bottom: 5px solid var(--accent);
}
:root header > div { position: relative; }
:root header > div::before {
  content: ""; display: block; width: 34px; height: 34px; margin-bottom: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='21.5' fill='none' stroke='%23C5B68F' stroke-width='1.4' opacity='.8'/%3E%3Cpath d='M9 15 H17 V23 H25 V30 H33 V35 H40' fill='none' stroke='%23D9B87A' stroke-width='2.6' stroke-linecap='square'/%3E%3Ccircle cx='40' cy='35' r='3' fill='%23D9B87A'/%3E%3C/svg%3E") center/contain no-repeat;
}
:root header > div:has(> h1)::before { width: 50px; height: 50px; margin-bottom: 16px; }
:root header h1 {
  font-family: var(--fd); font-style: italic; font-weight: 700;
  font-size: clamp(34px, 4.6vw, 50px); color: var(--bg);
  line-height: 1.02; letter-spacing: -.012em; margin-bottom: 0;
}
:root header h1 + p {
  font-family: var(--ft); font-style: italic; font-size: 15px;
  color: rgba(240, 232, 213, .86); max-width: 60ch; line-height: 1.58; margin-top: 12px;
}
/* signature: log-strip manifesto — home only */
:root header > div:has(> h1)::after {
  content: "315 Spaziergänge · 3 Online-Kurse · 1 Excel-Tabelle · 0 Marketing-Versprechen";
  display: block; margin-top: 22px; padding-top: 12px;
  border-top: 1px solid rgba(217, 184, 122, .38);
  font-family: var(--fm); font-weight: 500; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: #D9B87A;
}
:root header a { font-family: var(--fd); font-style: italic; font-weight: 700; font-size: 25px; color: var(--bg); text-decoration: none; letter-spacing: -.01em; }
:root header a:hover { color: #E4C489; }

/* ---------- home: wide measure ---------- */
:root body:has(main > article > .date) header > div,
:root body:has(main > article > .date) main,
:root body:has(main > article > .date) footer > div { max-width: 1120px; }

:root main { padding-bottom: 64px; }
:root main:has(> article > .date) {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 32px; align-items: start;
}

/* ---------- home: shared card voice ---------- */
:root main > article:has(> .date) { padding: 30px 0 32px; margin: 0; border-bottom: 0; grid-column: span 3; }
:root main > article:has(> .date) > h2 { font-family: var(--fd); font-weight: 600; font-size: 20px; line-height: 1.24; margin: 0 0 9px; letter-spacing: -.005em; }
:root main > article:has(> .date) > h2 a { color: var(--primary); text-decoration: none; }
:root main > article:has(> .date) > h2 a:hover { color: var(--accent); }
:root main > article:has(> .date) > .date {
  font-family: var(--fm); font-weight: 500; font-size: 10px; color: var(--accent);
  letter-spacing: .2em; text-transform: uppercase; margin: 0 0 10px; display: block;
}
:root main > article:has(> .date) > .date::before { content: ""; display: inline-block; width: 16px; border-top: 1px solid var(--accent); vertical-align: .32em; margin-right: 9px; }
:root main > article:has(> .date) > p:not(.date) { font-size: 14.5px; line-height: 1.68; color: var(--ink-soft); margin: 0 0 14px; }
:root main > article:has(> .date) > a:last-child {
  display: inline-block; font-size: 0; background: none; padding: 0; border-radius: 0; text-decoration: none;
}
:root main > article:has(> .date) > a:last-child::before {
  content: "Zum Protokoll →"; font-family: var(--fm); font-weight: 500; font-size: 10px;
  letter-spacing: .19em; text-transform: uppercase; color: var(--primary);
  border-bottom: 1px solid var(--accent); padding-bottom: 3px;
}
:root main > article:has(> .date) > a:last-child:hover { background: none; }
:root main > article:has(> .date) > a:last-child:hover::before { color: var(--accent); }

/* ---------- home: the hero moment ---------- */
:root main > article:has(> .date):first-of-type {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(0, 1fr) 236px; column-gap: 46px;
  grid-template-areas: "kick kick" "title meta" "date meta" "sum meta" "cta meta";
  padding: 0 0 46px; margin-bottom: 4px; border-bottom: 2px solid var(--primary);
}
:root main > article:has(> .date):first-of-type::before {
  grid-area: kick; content: "Neueste Analyse — aus dem Zug-Protokoll";
  font-family: var(--fm); font-weight: 500; font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 20px;
}
:root main > article:has(> .date):first-of-type > h2 {
  grid-area: title; font-family: var(--fd); font-weight: 700;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.06; letter-spacing: -.018em; margin: 0 0 16px;
}
:root main > article:has(> .date):first-of-type > .date { grid-area: date; margin-bottom: 16px; }
:root main > article:has(> .date):first-of-type > p:not(.date) {
  grid-area: sum; font-size: 17.5px; line-height: 1.66; color: var(--fg); max-width: 54ch;
  margin: 0 0 28px; padding-left: 22px; border-left: 3px solid var(--moment);
}
:root main > article:has(> .date):first-of-type > a:last-child { grid-area: cta; justify-self: start; }
:root main > article:has(> .date):first-of-type > a:last-child::before {
  content: "Analyse lesen →"; font-size: 11px; color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: var(--r); padding: 11px 26px; display: inline-block;
}
:root main > article:has(> .date):first-of-type > a:last-child:hover::before { background: var(--primary); color: var(--bg); border-color: var(--primary); }
:root main > article:has(> .date):first-of-type::after {
  grid-area: meta; align-self: start; white-space: pre-line;
  content: "N° 01\A Aktuelle Messreihe\A ———\A Von Markus\A IT-Systemanalytiker\A 8 Min Lesezeit";
  border-left: 1px solid var(--border); padding-left: 22px;
  font-family: var(--fm); font-weight: 500; font-size: 10px; letter-spacing: .17em;
  text-transform: uppercase; line-height: 2.5; color: rgba(77, 45, 60, .72);
}

/* ---------- home: Redaktions-Auswahl band (2–4) ---------- */
:root main > article:has(> .date):nth-of-type(n+2):nth-of-type(-n+4) { grid-column: span 2; padding-top: 26px; margin-top: 56px; }
:root main > article:has(> .date):nth-of-type(2) { position: relative; }
:root main > article:has(> .date):nth-of-type(2)::before {
  content: "Redaktions-Auswahl — zuerst lesen"; position: absolute; top: -40px; left: 0;
  width: calc(300% + 64px); border-top: 2px solid var(--primary); padding-top: 10px;
  font-family: var(--fm); font-weight: 500; font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--primary);
}
:root main > article:has(> .date):nth-of-type(n+2):nth-of-type(-n+4) > h2 { font-size: 21px; }
:root main > article:has(> .date):nth-of-type(n+2):nth-of-type(-n+4) > h2::before {
  display: block; font-family: var(--fm); font-weight: 500; font-size: 19px;
  color: var(--accent); letter-spacing: .1em; margin-bottom: 10px;
}
:root main > article:has(> .date):nth-of-type(2) > h2::before { content: "I"; }
:root main > article:has(> .date):nth-of-type(3) > h2::before { content: "II"; }
:root main > article:has(> .date):nth-of-type(4) > h2::before { content: "III"; }

/* ---------- home: chronological grid (5+) ---------- */
:root main > article:has(> .date):nth-of-type(n+5) { border-top: 1px solid var(--hair); }
:root main > article:has(> .date):nth-of-type(5),
:root main > article:has(> .date):nth-of-type(6) { border-top: 0; margin-top: 60px; }
:root main > article:has(> .date):nth-of-type(5) { position: relative; }
:root main > article:has(> .date):nth-of-type(5)::before {
  content: "Alle Protokolle — chronologisch"; position: absolute; top: -42px; left: 0;
  width: calc(200% + 32px); border-top: 2px solid var(--primary); padding-top: 10px;
  font-family: var(--fm); font-weight: 500; font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--primary);
}

/* ---------- home: archive band (11+) — quieter, three-up ---------- */
:root main > article:has(> .date):nth-of-type(n+11) { grid-column: span 2; padding: 22px 0 24px; }
:root main > article:has(> .date):nth-of-type(n+11) > h2 { font-size: 16.5px; line-height: 1.32; }
:root main > article:has(> .date):nth-of-type(n+11) > p:not(.date),
:root main > article:has(> .date):nth-of-type(n+11) > a:last-child { display: none; }
:root main > article:has(> .date):nth-of-type(11),
:root main > article:has(> .date):nth-of-type(12),
:root main > article:has(> .date):nth-of-type(13) { border-top: 0; margin-top: 58px; }
:root main > article:has(> .date):nth-of-type(11) { position: relative; }
:root main > article:has(> .date):nth-of-type(11)::before {
  content: "Frühe Messreihen — Archiv"; position: absolute; top: -40px; left: 0;
  width: calc(300% + 64px); border-top: 1px solid var(--border); padding-top: 10px;
  font-family: var(--fm); font-weight: 500; font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent);
}

/* ---------- article page ---------- */
:root main:has(> time) { max-width: 706px; }
:root main:has(> time) > h1::before {
  content: ""; display: block; width: 100%; height: 250px; margin: 0 0 30px;
  background-color: var(--primary);
  background-image: linear-gradient(180deg, rgba(77, 45, 60, 0) 55%, rgba(46, 24, 34, .45) 100%), url("/theme-assets/article-hero.jpg");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
  border-radius: var(--r);
}
:root main > h1 {
  font-family: var(--fd); font-weight: 700; font-size: clamp(29px, 3.6vw, 41px);
  color: var(--primary); line-height: 1.11; letter-spacing: -.015em; margin: 0 0 12px;
}
:root main > time {
  display: block; font-family: var(--fm); font-weight: 500; font-size: 10.5px;
  color: var(--accent); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px;
}
:root main > div:has(> time):not(:has(> img)) {
  font-family: var(--fm); font-weight: 500; font-size: 10px; color: rgba(77, 45, 60, .6);
  letter-spacing: .16em; text-transform: uppercase; font-style: normal;
  margin: 0 0 30px; padding-bottom: 22px; border-bottom: 1px solid var(--hair);
}
:root main > div:has(> time) > time { display: inline; font-size: inherit; color: inherit; margin: 0; }

:root main > article:not(:has(> .date)) > p { margin-bottom: 20px; font-size: 17px; line-height: 1.78; }
:root main > article:not(:has(> .date)) > p:first-of-type {
  font-size: 18.5px; line-height: 1.7; padding-left: 22px; margin-bottom: 28px;
  border-left: 3px solid var(--moment);
}
:root main > article:not(:has(> .date)) > h2 {
  font-family: var(--fd); font-weight: 700; font-size: 26px; color: var(--primary);
  line-height: 1.2; margin: 2.4em 0 .7em; padding: 0; border: 0; letter-spacing: -.01em;
}
:root main > article:not(:has(> .date)) > h2::before {
  content: "▪ ▪ ▪"; display: block; text-align: center; color: var(--accent);
  font-size: 14px; letter-spacing: .8em; text-indent: .8em; margin: 0 0 30px;
}
:root main > article:not(:has(> .date)) > h2:first-child::before { display: none; }
:root main > article:not(:has(> .date)) > h3 {
  font-family: var(--ft); font-weight: 700; font-style: italic; font-size: 18px;
  color: var(--primary); margin: 1.9em 0 .45em;
}
:root main > article:not(:has(> .date)) ul, :root main > article:not(:has(> .date)) ol { margin: 0 0 20px 22px; }
:root main > article:not(:has(> .date)) li { margin-bottom: 8px; font-size: 16.5px; line-height: 1.7; }
:root main > article:not(:has(> .date)) blockquote {
  position: relative; border: 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  background: none; border-radius: 0; padding: 22px 0 22px 52px; margin: 34px 0;
  font-family: var(--ft); font-style: italic; font-size: 18px; line-height: 1.62; color: var(--primary);
}
:root main > article:not(:has(> .date)) blockquote::before {
  content: "„"; position: absolute; left: 0; top: 14px;
  font-family: var(--fd); font-weight: 700; font-size: 58px; line-height: 1; color: var(--accent); opacity: .6;
}

:root main > article:not(:has(> .date)) > p a, :root main > article:not(:has(> .date)) > p a:visited { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 700; }
:root main > article:not(:has(> .date)) > p a:hover { color: var(--accent); text-decoration-color: var(--primary); }

:root main > article:not(:has(> .date)) > p a[href^="/offer/"], :root main > article:not(:has(> .date)) > p a[href^="/ref/"], :root main > article:not(:has(> .date)) > p a[href^="/try/"], :root main > article:not(:has(> .date)) > p a[href^="/check/"], :root main > article:not(:has(> .date)) > p a[href^="/partner/"], :root main > article:not(:has(> .date)) > p a[href^="/go/"] { background: var(--primary); color: var(--bg); border-radius: var(--r); padding: 3px 13px; text-decoration: none; font-family: var(--fm); font-weight: 500; font-size: 13px; letter-spacing: .02em; }
:root main > article:not(:has(> .date)) > p a[href^="/offer/"]:hover, :root main > article:not(:has(> .date)) > p a[href^="/ref/"]:hover, :root main > article:not(:has(> .date)) > p a[href^="/try/"]:hover, :root main > article:not(:has(> .date)) > p a[href^="/check/"]:hover, :root main > article:not(:has(> .date)) > p a[href^="/partner/"]:hover, :root main > article:not(:has(> .date)) > p a[href^="/go/"]:hover { background: var(--accent); color: var(--primary); }

:root main > article:not(:has(> .date)) > div:has(> img) { margin: 0 0 30px; }
:root main > article:not(:has(> .date)) > div:has(> img) > img { width: 100%; height: auto; max-height: 440px; object-fit: cover; display: block; border-radius: var(--r); box-shadow: 0 3px 14px rgba(26, 15, 21, .12); }

:root main > article:not(:has(> .date)) > div:has(> em) {
  border-left: 3px solid var(--accent); border-radius: 0; padding: 13px 18px; margin-top: 34px;
  font-family: var(--ft); font-style: italic; font-size: 13.5px; color: var(--ink-soft);
  background: rgba(77, 45, 60, .05);
}
:root main > article:not(:has(> .date)) > div:has(> em) em {
  font-family: var(--fm); font-weight: 500; font-style: normal; color: var(--primary);
  text-transform: uppercase; font-size: 10px; letter-spacing: .18em; display: inline-block; margin-right: 8px;
}

:root main > article:not(:has(> .date)) table { border-collapse: collapse; width: 100%; margin: 8px 0 26px; font-size: 15px; }
:root main > article:not(:has(> .date)) table td, :root main > article:not(:has(> .date)) table th { padding: .62em 1em; border-bottom: 1px solid var(--hair); text-align: left; }
:root main > article:not(:has(> .date)) table tr:nth-child(even) { background-color: rgba(77, 45, 60, .04); }
:root main > article:not(:has(> .date)) table th { background-color: var(--primary); color: var(--bg); font-family: var(--fm); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- related module ---------- */
:root main > section { margin-top: 52px; padding-top: 24px; border-top: 2px solid var(--primary); counter-reset: rel; }
:root main > section > h3 { font-family: var(--fm); font-weight: 500; font-size: 10.5px; color: var(--primary); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 16px; }
:root main > section > ul { list-style: none; margin: 0; padding: 0; }
:root main > section > ul > li { padding: 12px 0; border-bottom: 1px solid var(--hair); display: flex; gap: 14px; }
:root main > section > ul > li:last-child { border-bottom: 0; }
:root main > section > ul > li::before { counter-increment: rel; content: counter(rel, decimal-leading-zero); font-family: var(--fm); font-weight: 500; font-size: 10px; color: var(--accent); letter-spacing: .1em; padding-top: 5px; }
:root main > section > ul > li > a { color: var(--primary); text-decoration: none; font-family: var(--ft); font-size: 15px; line-height: 1.45; }
:root main > section > ul > li > a:hover { color: var(--accent); }

/* ---------- footer ---------- */
:root footer { background: transparent; border-top: 1px solid var(--accent); padding: 26px 0 40px; margin-top: 56px; text-align: center; font-family: var(--fm); font-weight: 500; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(26, 15, 21, .55); }
:root footer a { color: rgba(26, 15, 21, .7); text-decoration: none; border-bottom: 1px solid var(--border); }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  :root main:has(> article > .date) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
  :root main > article:has(> .date) { grid-column: span 1; }
  :root main > article:has(> .date):first-of-type { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "title" "date" "sum" "cta" "meta"; }
  :root main > article:has(> .date):first-of-type::after { border-left: 0; border-top: 1px solid var(--border); padding: 18px 0 0; margin-top: 30px; line-height: 2.1; }
  :root main > article:has(> .date):nth-of-type(n+2):nth-of-type(-n+4),
  :root main > article:has(> .date):nth-of-type(n+11) { grid-column: span 1; }
  :root main > article:has(> .date):nth-of-type(2)::before,
  :root main > article:has(> .date):nth-of-type(5)::before,
  :root main > article:has(> .date):nth-of-type(11)::before { width: calc(200% + 26px); }
  :root main > article:has(> .date):nth-of-type(13) { border-top: 1px solid var(--hair); }
}
@media (max-width: 640px) {
  :root header { padding: 38px 0 24px; margin-bottom: 34px; background-position: 62% 58%; }
  :root main:has(> article > .date) { grid-template-columns: minmax(0, 1fr); }
  :root main > article:has(> .date):nth-of-type(2)::before,
  :root main > article:has(> .date):nth-of-type(5)::before,
  :root main > article:has(> .date):nth-of-type(11)::before { width: 100%; }
  :root main > article:has(> .date):nth-of-type(n+5) { border-top: 1px solid var(--hair); }
  :root main > article:has(> .date):nth-of-type(6),
  :root main > article:has(> .date):nth-of-type(12) { border-top: 1px solid var(--hair); }
  :root main:has(> time) > h1::before { height: 178px; }
  :root main > article:not(:has(> .date)) > p { font-size: 16.5px; }
}