/* Patricks KI-Kurier: an editorial comic page with inked panels and halftone accents. */
:root {
  --ink:#111525;
  --paper:#fffaf0;
  --acid:#ffdf35;
  --coral:#ef4b40;
  --blue:#1849c9;
  --lilac:#d8d5ff;
  --muted:#4e5360;
  --line:#111525;
  --shadow:rgba(17,21,37,.25);
}
body {background:#182e80}
body:before {
  background:radial-gradient(circle,rgba(255,255,255,.18) 1.5px,transparent 2px) 0 0/17px 17px;
  opacity:.65;
}
.page,body>main:not(.page) {
  border:4px solid var(--ink);
  border-radius:3px;
  box-shadow:12px 12px 0 #09143e,0 30px 70px rgba(0,0,0,.2);
}
.utility,body>main:not(.page)>nav {
  border-radius:0;
  border:2px solid var(--ink);
  background:var(--ink);
  padding:10px 14px;
}
.utility a,body>main:not(.page)>nav a {color:var(--acid)}
.masthead,body>main:not(.page)>header {
  margin-top:16px;
  padding:38px 28px 34px;
  border:4px solid var(--ink);
  background:var(--blue);
  color:#fff;
  isolation:isolate;
  overflow:hidden;
  box-shadow:8px 8px 0 var(--acid);
}
.masthead:before,body>main:not(.page)>header .kicker {
  border-radius:2px;
  background:var(--acid);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.masthead:after,body>main:not(.page)>header:after {
  width:36%;height:100%;right:0;top:0;bottom:auto;
  transform:none;opacity:.25;
  background:radial-gradient(circle,var(--acid) 2px,transparent 2.5px) 0 0/12px 12px;
  mask-image:linear-gradient(90deg,transparent,#000 50%);
}
.masthead h1,body>main:not(.page)>header h1 {
  color:#fff;
  font-weight:950;
  letter-spacing:-.065em;
  line-height:.88;
  text-transform:uppercase;
  text-shadow:4px 4px 0 var(--ink);
}
.masthead h1::first-letter {color:var(--acid)}
.masthead p,body>main:not(.page)>header p {color:#fff}
.kurier-figur {
  width:174px;
  right:18px;
  bottom:0;
  filter:drop-shadow(5px 5px 0 var(--ink));
}
.lead {gap:25px;padding:34px 0 28px;border-bottom:4px solid var(--ink)}
.lead>div,.lead-note {border:4px solid var(--ink);border-radius:3px;transform:none}
.lead>div {
  background:var(--blue);
  box-shadow:8px 8px 0 var(--ink);
}
.lead h2 {text-transform:uppercase;letter-spacing:-.055em;text-shadow:3px 3px 0 var(--ink)}
.lead-note {background:var(--acid);box-shadow:8px 8px 0 var(--coral)}
.lead-note .label,.tag,.nr {border-radius:2px;box-shadow:2px 2px 0 var(--ink)}
.nav {background:rgba(255,250,240,.97);border-bottom:3px solid var(--ink);gap:10px}
.nav button {border:2px solid var(--ink);border-radius:2px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
.nav button:hover {transform:translate(-1px,-2px)}
.nav button.active {background:var(--acid);color:var(--ink);box-shadow:4px 4px 0 var(--blue)}
.section-head {border-bottom:4px solid var(--ink);padding-bottom:10px}
.section-head h2 {text-transform:uppercase;letter-spacing:-.055em}
.grid {gap:22px}
.grid article,.cat,.table-wrap,.method p,.legend {
  border:3px solid var(--ink);
  border-radius:2px;
  box-shadow:6px 6px 0 var(--ink);
}
.grid article {padding:22px;background:#fffdf8}
.grid article:nth-child(1),.grid article:nth-child(6) {background:#d8ddff}
.grid article:nth-child(4n) {background:#ffe0d6}
.grid article:nth-child(5n) {background:#fff3b6}
.grid article:before,.issue:before {width:38px;height:7px;right:20px;background:var(--coral);border-color:var(--ink);border-radius:0}
.grid article h3 {font-weight:950;letter-spacing:-.035em}
.grid article .tag {background:var(--acid)}
.why {background:#fff;border:2px solid var(--ink);border-radius:2px}
.signal {border-left:7px solid var(--coral)}
.cat {background:#fffdf8}
.cat:nth-child(1) {background:var(--acid)}
.cat:nth-child(2) {background:#d8ddff}
.cat:nth-child(3) {background:#ffe0d6}
.cat:nth-child(4) {background:#bcecff}
.cat b {border-radius:2px;transform:rotate(-5deg)}
.table-wrap th {background:var(--blue)}
.footer,body>main:not(.page)>footer {border:3px solid var(--ink);border-radius:2px;background:var(--blue)}
body>main:not(.page)>header {padding-top:52px;padding-bottom:40px}
body>main:not(.page)>header .kicker {position:relative;display:inline-block;z-index:1}
body>main:not(.page)>header p {max-width:650px}
.issue {border:3px solid var(--ink);border-radius:2px;box-shadow:7px 7px 0 var(--ink)}
.issue:first-child {background:#d8ddff}
.issue:nth-child(2) {background:#ffe0d6}
.issue .nr {background:var(--acid)}
.issue a {border-radius:2px;box-shadow:3px 3px 0 var(--ink)}
.issue a:hover {background:var(--ink)}
a:focus-visible,button:focus-visible {outline:4px solid var(--coral);outline-offset:3px}
@media(max-width:820px) {
  body {background:var(--paper)}
  .page,body>main:not(.page) {border:0;box-shadow:none}
  .masthead,body>main:not(.page)>header {margin-top:14px;padding:28px 17px 58px;box-shadow:5px 5px 0 var(--acid)}
  .masthead h1,body>main:not(.page)>header h1 {font-size:clamp(2.5rem,12vw,5.3rem);line-height:.9;text-shadow:2px 2px 0 var(--ink)}
  .masthead p,body>main:not(.page)>header p {padding-right:78px;letter-spacing:.1em}
  .kurier-figur {right:4px;bottom:0;width:90px;filter:drop-shadow(3px 3px 0 var(--ink))}
  .lead {gap:18px}
  .lead>div,.lead-note {box-shadow:5px 5px 0 var(--ink)}
  .lead h2 {text-shadow:2px 2px 0 var(--ink)}
  .grid {gap:20px}
  .section-head {align-items:flex-start}
  body>main:not(.page)>header {padding-bottom:80px}
}
@media(max-width:400px) {
  .masthead h1,body>main:not(.page)>header h1 {font-size:2.45rem;overflow-wrap:anywhere}
  .masthead p,body>main:not(.page)>header p {font-size:.72rem}
  .section-head h2 {font-size:1.75rem}
}
@media print {
  body {background:#fff}
  .page,body>main:not(.page),.masthead,body>main:not(.page)>header {box-shadow:none}
  .masthead,body>main:not(.page)>header {background:#fff;color:#000}
  .masthead h1,body>main:not(.page)>header h1,.masthead p,body>main:not(.page)>header p {color:#000;text-shadow:none}
}