/* ============================================================
   Palette — Design System
   Abgeleitet vom E1 "The Broadsheet" Newsletter.
   Eine gemeinsame Stylesheet-Datei fuer alle Seiten.
   Dokumentiert in styleguide.html
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Surfaces */
  --paper:#ffffff;
  --page:#ffffff;            /* Hintergrund komplett weiss (Mel 29.06.) — modern, kein Grau */
  --band:#eeeeec;            /* Zwischenton: heller als --page (#e9e9e7), dunkler als Weiss */
  --ink:#141414;             /* Tinte */
  --ink-soft:#2c2c2c;        /* Fliesstext primaer */

  /* Grautoene — alle AA-geprueft auf weiss UND auf #e9e9e7 */
  --g-1:#545454;             /* Fliesstext sekundaer */
  --g-2:#595959;             /* Labels / Kicker */
  --g-3:#767676;             /* fein, kleiner Text auf weiss */

  /* Linien */
  --line:#d8d8d8;
  --line-strong:#cfcfcf;
  --line-faint:#ededec;

  /* Eine Druckfarbe — sehr sparsam */
  --press:#3a3a3a;         /* war Druckrot — jetzt Graphit: Website strikt monochrom (Mel, 28.06.2026) */

  /* Schriften */
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; /* war IBM Plex Mono — Website strikt zwei Schriften (Mel, 28.06.2026) */

  /* Layout */
  --sheet:1180px;
  --gut:clamp(20px,4.5vw,64px);
  --radius:0;                /* editorial: keine runden Ecken */
}

/* ---------- Reset / Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light}
body{
  font-family:var(--sans);color:var(--ink);background:var(--page);
  line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:#fff}

/* ---------- Utilities ---------- */
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:.69rem;letter-spacing:.22em;text-transform:uppercase;color:var(--g-2);font-weight:500}
.rule{border:0;border-top:1px solid var(--line)}
.sheet{max-width:var(--sheet);margin:0 auto;background:var(--paper)}
/* graue Mittel-Abschnitte: an Ober-/Unterkante extrem weich ins Weiss auslaufen */
.soft-band{background:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Focus / a11y ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--press);outline-offset:3px}
#main:focus{outline:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:60;font-size:.85rem}
.skip:focus{left:12px;top:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:500;font-size:.95rem;letter-spacing:0;
  padding:14px 30px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:background .22s ease,color .22s ease,border-color .22s ease}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--band);color:var(--ink);border-color:var(--band)}
.btn-ghost{border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Nav ---------- */
/* Untere Abgrenzung: KEINE Linie mehr (Mel 06.07.) — weicher Wurfschatten wie das
   Dropdown-Menue hebt die Bar vom Inhalt darunter ab. */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);box-shadow:0 20px 34px -22px rgba(20,20,20,.18)}
.nav-in{max-width:var(--sheet);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:11px var(--gut)}
.nav-mark{font-family:var(--serif);font-size:1.45rem;line-height:1;letter-spacing:-.01em}
.nav-links{display:flex;gap:26px;align-items:center;margin-left:auto;margin-right:24px}
.nav-links a{font-size:.82rem;color:var(--g-1);position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .28s ease}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current=page]::after{right:0}
.nav-cta{font-family:var(--sans);font-weight:500;font-size:.85rem;letter-spacing:0;background:var(--ink);color:#fff;padding:9px 20px;border:1px solid var(--ink);border-radius:999px;white-space:nowrap;transition:background .22s,color .22s,border-color .22s}
.nav-cta:hover{background:var(--band);color:var(--ink);border-color:var(--band)}
.nav-toggle{display:none}
.nav-right{display:flex;align-items:center;gap:6px}

/* ---------- Section ---------- */
section{padding:clamp(48px,7vw,92px) var(--gut)}
.seclabel{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.seclabel::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Hero / folio ---------- */
.hero{padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(40px,6vw,72px)}
.folio{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.folio .issue{color:var(--press)}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.7rem,7.2vw,5.7rem);line-height:1.0;letter-spacing:-.02em;margin:clamp(26px,4vw,44px) 0 0;max-width:14ch}
.h1.display{font-size:clamp(3.2rem,10.5vw,7.6rem);line-height:.94;letter-spacing:-.03em;max-width:none}
.folio .js-date{font-size:.82rem}
.inkline{font-weight:600;color:inherit}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);line-height:1.5;margin:22px 0 0;max-width:52ch}
/* Inner-page heroes: de-escalated red gesture (recurring stripe ties them to the cover) */
.hero .h1{padding-left:clamp(16px,2vw,26px);border-left:4px solid var(--press)}
.cta-row{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- Opt-in form ---------- */
.form{margin:30px 0 0;max-width:560px}
.field{display:flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.field input[type=email]{flex:1;min-width:0;border:0;padding:15px 24px;font-family:var(--sans);font-size:1rem;color:var(--ink);background:transparent}
.field input[type=email]::placeholder{color:var(--g-3)}
.field button{flex:none;border:0;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:500;font-size:.92rem;letter-spacing:0;padding:15px 30px;cursor:pointer;transition:background .2s;white-space:nowrap}
.field button:hover{background:var(--press)}
.editions-pick{display:flex;gap:22px;margin:16px 2px 0;flex-wrap:wrap;border:0;padding:0}
.editions-pick legend{position:absolute;left:-9999px}
.editions-pick label{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--g-1);cursor:pointer}
.editions-pick input{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}
.reassure{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--g-2);margin:18px 2px 0}
.form-err{color:var(--press);font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;margin:12px 2px 0}
.form-err[hidden]{display:none}
.form-done{margin:30px 0 0;max-width:560px;border:1px solid var(--ink);padding:22px 24px;display:none}
.form-done.show{display:block}
.form-done strong{font-family:var(--serif);font-size:1.4rem;font-weight:400;display:block;margin-bottom:4px}
.form-done .eds{font-family:var(--mono);font-size:.74rem;color:var(--g-1);margin-top:8px;letter-spacing:.03em}

/* ---------- Sources bar ---------- */
.sources{padding:0 0 22px;position:relative}
.sources .lab{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-2);margin-bottom:16px;position:relative;z-index:4}
.marquee{position:relative;overflow:hidden}
/* Rand-Unschaerfe ueber das GANZE Band (obere x-Linie beim Label bis untere x-Linie unten);
   voll gradueller Verlauf -> Brands werden langsam unscharf + weiss und verschwinden erst am Rand. */
/* Kanten-Blur (Mel 06.07., justiert): SCHMAL + randnah (Zone 18% statt 30% — dort, wo die
   Linien enden), vertikal verlaengert (top 22px / bottom -14px), damit der Blur-Halo der
   Buchstaben nicht mehr an der Overlay-Kante hart abgeschnitten wird. Weiss nur noch als
   schmaler Streifen direkt vor dem Rand. */
.sources::before,.sources::after{content:"";position:absolute;top:22px;bottom:-14px;width:13%;z-index:3;pointer-events:none}
.sources::before{left:0;background:linear-gradient(to right,#fff 0,#fff 12%,rgba(255,255,255,0) 45%);-webkit-mask:linear-gradient(to right,#000 45%,transparent);mask:linear-gradient(to right,#000 45%,transparent)}
.sources::after{right:0;background:linear-gradient(to left,#fff 0,#fff 12%,rgba(255,255,255,0) 45%);-webkit-mask:linear-gradient(to left,#000 45%,transparent);mask:linear-gradient(to left,#000 45%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 36s linear infinite}
.marquee .src{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.5rem);color:var(--ink);opacity:.82;white-space:nowrap;flex:none;margin-right:clamp(30px,5vw,64px)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .sources::before,.sources::after{display:none}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:12px}
  .marquee-track [aria-hidden=true]{display:none}
}

/* (the-no trust band component removed — was unused) */

/* ---------- Statement ---------- */
.statement p{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.1vw,2.45rem);line-height:1.28;letter-spacing:-.01em;max-width:22ch;color:var(--ink)}
.statement p .muted{color:var(--g-3)}
.statement p .key{color:var(--press)}
.statement .note{font-family:var(--sans);font-size:1.02rem;color:var(--g-1);max-width:48ch;margin-top:26px;line-height:1.65}

/* ---------- Editions (2-col) ---------- */
.editions{display:grid;gap:0;grid-template-columns:1fr}
.ed{padding:clamp(30px,4vw,46px) 0;position:relative}
.ed-brand{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-2);margin-bottom:10px}
.ed .name{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);line-height:1.02}
.ed .name b{color:var(--press);font-weight:400}
.ed .pitch{font-size:1.06rem;color:var(--ink-soft);margin:14px 0 0;max-width:42ch;line-height:1.55}
.ed ul{list-style:none;margin:22px 0 0}
.ed li{padding:13px 0;border-top:0;font-size:.96rem;color:var(--g-1);display:flex;gap:12px;align-items:baseline}
.ed li:first-child{border-top:1px solid var(--line-faint)}
.ed li::before{content:attr(data-n);font-family:var(--serif);font-size:1.4rem;line-height:1;color:var(--ink);min-width:30px}
.ed .more{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink);padding-bottom:2px}
.ed-readerline{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--g-2);text-align:left;padding-top:26px;margin-top:22px;border-top:1px solid var(--line)}
/* Editions: Spalten mittig zwischen Seclabel-Linie (oben) und Reader-Linie (unten) halten,
   damit die vertikale Trennlinie zu beiden denselben Abstand hat (Mel). */
#editions .seclabel{margin-bottom:16px}

/* ---------- Paper (the proof / sample issue) ---------- */
.sample-wrap{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,54px);align-items:start}
.sample-lead h3{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.1rem);line-height:1.06;letter-spacing:-.01em;margin:18px 0 0}
.sample-lead p{color:var(--g-1);margin:18px 0 0;max-width:46ch;line-height:1.6}
/* The standard + sample, plakativ side-by-side (index) */
.std-lead .lead-statement{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.18;letter-spacing:-.01em;max-width:18ch;color:var(--ink);margin:0}
.std-lead .lead-statement .key{color:var(--press)}
.std-lead .note{font-family:var(--sans);font-size:1.02rem;color:var(--g-1);max-width:46ch;margin:22px 0 0;line-height:1.65}
.std-lead .btn{margin-top:30px}
.teaser-note{font-family:var(--mono);font-size:.72rem;color:var(--g-2);letter-spacing:.03em;max-width:28ch}
.paper{background:#fff;box-shadow:0 26px 50px -22px rgba(20,20,20,.30),0 9px 20px -10px rgba(20,20,20,.16),0 0 22px -5px rgba(20,20,20,.11)}
.paper-stack{display:grid}
.paper-stack>.paper{grid-area:1/1}
.paper-stack>.paper[hidden]{display:block;visibility:hidden}
.paper .ph-mast{padding:14px 22px;border-bottom:1px solid var(--line-strong)}
.paper .ph-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-2)}
.paper .ph-row .i{color:var(--press)}
.paper .ph-name{font-family:var(--serif);font-size:2.8rem;text-align:center;line-height:1;margin:10px 0 6px}
.paper .ph-date{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-2);text-align:center}
.paper .ph-lead{padding:20px 22px;border-bottom:1px solid var(--line)}
.paper .ph-k{font-family:var(--sans);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-2);font-weight:600;text-align:center}
.paper .ph-h{font-family:var(--serif);font-size:1.85rem;line-height:1.1;text-align:center;margin:9px 0 0}
.paper .ph-body{margin:14px 0 0;font-size:.82rem;line-height:1.55;color:var(--g-1);text-align:justify}
.paper .ph-hero{width:100%;height:150px;object-fit:cover;display:block;margin:14px 0 0}
.paper .ph-hatch{height:96px;margin:16px 0 0;border:1px solid var(--ink);background-image:repeating-linear-gradient(135deg,#eef0ef 0,#eef0ef 9px,#e2e4e2 9px,#e2e4e2 18px)}
.paper .ph-list{padding:8px 22px 16px}
.paper .ph-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-faint)}
.paper .ph-item:last-child{border-bottom:0}
.paper .ph-num{font-family:var(--serif);font-size:1.5rem;line-height:1;min-width:24px}
.paper .ph-it-h{font-size:.84rem;font-weight:600;color:var(--ink)}
.paper .ph-it-s{font-size:.76rem;color:var(--g-1);margin-top:2px;line-height:1.45}
/* Full issue preview (Home) */
.issue{max-width:520px;margin:0 auto;max-height:var(--cut);overflow:hidden;position:relative}
/* Sample-Ausgabe wird mitten durch die Schrift einer Zeile geschnitten: gestrichelte Linie ein paar
   px ueber den Newsletter + Schatten hinaus, darunter nur Weiss (maskiert Inhalt + Schlagschatten). */
.issue-hold{position:relative;padding-bottom:58px;--cut:568px}
.issue-tear{position:absolute;left:50%;top:calc(var(--cut) - 3px);transform:translateX(-50%);width:calc(min(520px,100%) + 26px);height:58px;background:var(--page);z-index:4}
/* gepunktete Schnittlinie: schwarz, Punkte weiter auseinander (radial-gradient statt border-dotted) */
.issue-tear::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-image:linear-gradient(90deg,var(--ink) 1px,transparent 1px);background-size:4px 1px;background-repeat:repeat-x;background-position:left center}
#sample{padding-bottom:clamp(14px,2.2vw,30px)}
.issue .ph-name{font-size:2.3rem}
.issue .ph-h{font-size:1.55rem}
.issue .ph-sec{font-size:1.15rem}
.ph-src{display:inline-block;margin-top:8px;font-family:var(--sans);font-size:.72rem;color:var(--g-2);padding-bottom:1px}
.ph-sec{border-bottom:1px solid var(--ink);padding-bottom:8px;font-size:1.3rem;color:var(--ink)}
.ph-tag{font-family:var(--sans);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-2);font-weight:600;margin-left:8px}
.ph-two{display:grid;grid-template-columns:1.45fr 1fr;padding:20px 0}
.ph-two .col{padding:0 22px}
.ph-two .left{border-right:1px solid var(--line)}
.ph-eyebrow{font-family:var(--sans);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-2);font-weight:600}
.ph-two h4{font-family:var(--serif);font-weight:400;font-size:1.1rem;margin:8px 0 0;line-height:1.2}
.ph-two .bignum{font-size:2.1rem;line-height:1;margin:6px 0 0;color:var(--ink)}
.ph-two p{font-size:.78rem;color:var(--g-1);line-height:1.5;margin:6px 0 0}
.ph-ad{margin:22px;border:1px solid var(--line-strong);height:90px;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--g-3)}
.ph-foot{padding:16px 22px;border-top:1px solid var(--line);text-align:center;font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-2)}

/* ---------- Issue switcher (interactive) ---------- */
.switcher{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:26px}
.iss-card{background:transparent;border:0;border-bottom:2px solid transparent;padding:4px 0;cursor:pointer;text-align:left;font-family:var(--sans);transition:border-color .18s,color .18s}
.iss-card .n{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-3)}
.iss-card .t{display:block;font-family:var(--serif);font-size:1rem;line-height:1.12;margin-top:4px;color:var(--g-3)}
.iss-card:hover .t{color:var(--ink)}
.iss-card[aria-pressed=true]{border-bottom-color:var(--ink)}
.iss-card[aria-pressed=true] .n{color:var(--g-2)}
.iss-card[aria-pressed=true] .t{color:var(--ink)}

/* ---------- Value props ---------- */
.vp{display:grid;grid-template-columns:1fr;gap:0}
.vp .cell{padding:30px 0;border-top:1px solid var(--line)}
.vp .n{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--ink)}
.vp .n span{color:var(--press)}
.vp h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin:14px 0 0;line-height:1.15}
.vp p{color:var(--g-1);margin:10px 0 0;font-size:.98rem;line-height:1.6;max-width:38ch}

/* ---------- How it works ---------- */
.how{display:grid;grid-template-columns:1fr;gap:0}
.how .step{padding:26px 0;border-top:1px solid var(--line);display:flex;gap:20px;align-items:baseline}
.how .step .s{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--press)}
.how .step p{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.25;color:var(--ink)}

/* ---------- Dark CTA band ---------- */
.band{background:var(--ink);color:#fff}
.band h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.04;max-width:16ch}
.band .sub{color:#c9c9c7;margin:16px 0 0;max-width:46ch;font-size:1.05rem}
.band .field{border-color:#fff;background:transparent;margin-top:30px;max-width:540px}
.band .field input[type=email]{color:#fff}
.band .field input[type=email]::placeholder{color:#9a9a98}
.band .field button{background:#fff;color:var(--ink)}
.band .field button:hover{background:var(--press);color:#fff}
.band .reassure{color:#9a9a98}
.band .editions-pick label{color:#c9c9c7}
.band .editions-pick input{accent-color:#fff}
.band .form-done{border-color:#fff;color:#fff}
.band .form-done .eds{color:#c9c9c7}
.band .form-err{color:#f0a59a}

/* ---------- Advertise ---------- */
/* Positiv auf Weiss (Mel 06.07., war negativ auf ink); Button = Standard .btn-solid
   (Verhalten wie alle schwarzen Buttons: Hover -> --band, Klick -> 1px Outline). */
.advert{display:flex;justify-content:space-between;align-items:center;gap:clamp(28px,4vw,56px);flex-wrap:wrap}
.advert p{font-family:var(--serif);color:var(--ink);font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.16;letter-spacing:-.01em;max-width:34ch}
.fmt-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:6px}
.fmt{padding:24px 0;border-top:1px solid var(--line);display:grid;gap:6px}
.fmt .nm{font-family:var(--serif);font-size:1.5rem}
.fmt .meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--g-2);text-transform:uppercase}
.fmt .desc{color:var(--g-1);font-size:.98rem;max-width:52ch;line-height:1.6}
.fmt .ph{font-family:var(--mono);font-size:.7rem;color:var(--press);letter-spacing:.06em}
.aud{display:grid;grid-template-columns:1fr;gap:0}
.aud .row{padding:16px 0;border-top:1px solid var(--line-faint);display:flex;gap:16px;align-items:baseline}
.aud .row .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--g-2);min-width:120px}
.aud .row .v{color:var(--ink-soft);font-size:1rem}

/* ---------- Archive ---------- */
.arc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.arc-filter{display:flex;gap:8px}
.arc-filter button{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 17px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--g-1);cursor:pointer;transition:.18s}
.arc-filter button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.arc-month{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g-2);margin:34px 0 4px}
.arc-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:18px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line);border-left:2px solid transparent;transition:border-color .15s}
.arc-row:last-child{border-bottom:1px solid var(--line)}
.arc-row:hover,.arc-row:focus-visible{border-left-color:var(--press)}
.arc-row .date{font-family:var(--mono);font-size:.74rem;color:var(--g-2);white-space:nowrap}
.arc-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-strong);padding:3px 8px;color:var(--g-1);white-space:nowrap}
.arc-tag.ai{border-color:var(--ink);color:var(--ink)}
.arc-row .hl{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.15;color:var(--ink)}
.arc-row .read{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--g-2);white-space:nowrap}
.arc-row:hover .read{color:var(--press)}

/* ---------- Prose (About / Privacy) ---------- */
.prose{max-width:60ch}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;margin:0 0 14px}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:36px 0 10px}
.prose p{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;margin:0 0 16px}
.prose p.small{font-size:.92rem;color:var(--g-1)}
.prose ul{margin:0 0 16px 0;padding-left:0;list-style:none}
.prose li{color:var(--ink-soft);font-size:1.02rem;line-height:1.65;padding:8px 0 8px 22px;position:relative}
.prose li::before{content:"—";position:absolute;left:0;color:var(--press)}

/* ---------- Footer ---------- */
footer{background:var(--band)}
.foot-in{max-width:var(--sheet);margin:0 auto;padding:clamp(44px,6vw,72px) var(--gut) 30px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot-mark .m{font-family:var(--serif);font-size:2.4rem;line-height:1}
.foot-mark .t{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--g-2);margin-top:10px;text-transform:uppercase}
.foot-cols{display:flex;gap:clamp(34px,6vw,84px);flex-wrap:wrap}
.foot-cols h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-2);margin-bottom:14px;font-weight:500}
.foot-cols a{display:block;font-size:.92rem;color:var(--g-1);padding:5px 0}
.foot-cols a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(36px,5vw,60px);padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--g-2)}

/* ---------- Styleguide page ---------- */
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.sg-sw{border:1px solid var(--line)}
.sg-sw .chip{height:64px}
.sg-sw .meta{padding:8px 10px;font-family:var(--mono);font-size:.68rem;color:var(--g-1);letter-spacing:.02em}
.sg-sw .meta b{display:block;color:var(--ink);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;margin-bottom:2px}
.sg-type div{border-top:1px solid var(--line);padding:18px 0}
.sg-type .meta{font-family:var(--mono);font-size:.68rem;color:var(--g-2);letter-spacing:.06em;margin-bottom:8px;text-transform:uppercase}

/* ---------- Archive featured (latest issue) ---------- */
.arc-featured{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;padding:0 0 30px;border-bottom:1px solid var(--ink);margin-bottom:8px}
.arc-featured .meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g-2);display:flex;gap:12px;align-items:center}
.arc-featured .meta .now{color:var(--press)}
.arc-featured .hl{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.05;margin:10px 0 0;color:var(--ink);display:block}
.arc-featured .read{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--g-2);margin-top:14px;display:inline-block}
.arc-featured:hover .read{color:var(--press)}

/* ---------- Share / referral line ---------- */
.share{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--g-2);margin-top:16px}
.share a{color:var(--ink);font-weight:600}

/* ---------- Cover (Home hero — type as image) ---------- */
.cover{position:relative;min-height:auto;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(22px,4vh,40px) 0 0}
/* v1 "type as image" cover removed 06.07.2026 — exploration pages archived; live home
   uses the .cover-c hero below. Inner-page de-escalation is handled by `.hero .h1`. */

/* ---------- Cover hero v2 — centered, conversion-first ---------- */
.cover-c{max-width:780px;width:100%;margin:0 auto;padding:0 var(--gut);text-align:center}
.cover-folio{display:flex;justify-content:center;gap:16px;align-items:baseline}
.cover-h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.02;letter-spacing:0;font-feature-settings:"liga" 1,"calt" 1;margin:clamp(20px,3vw,34px) auto 0;max-width:15ch}
.cover-sub{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);line-height:1.55;margin:20px auto 0;max-width:50ch}
.signup{max-width:660px;margin:clamp(52px,6.5vw,88px) auto 0}
/* Untere Kante der Formularflaeche = aufliegendes Blatt; EIN weicher Schatten faellt nach UNTEN.
   Der obere Trenner wurde entfernt (Mel 06.07.). Frueher war das ein box-shadow durch einen nur
   26px hohen Ausschnitt -> sichtbar war nur das dunkle Nahfeld, wirkte hart (Mel 06.07. "zu hart").
   Jetzt ein linearer Verlauf ueber die volle Abklinglaenge (~64px): dunkelste Stelle an der
   Formular-Kante, weich nach unten auslaufend. Seiten wie die Linien maskiert (14/86 %). */
/* EXAKT der Newsletter-Schatten (.paper-Oberkante, Mel 06.07.): ein unsichtbarer, volle Content-
   Breite laufender Block wirft seinen Papier-Box-Shadow in den Streifen; overflow:hidden zeigt nur
   EINE Seite. Default = nach unten; .up spiegelt vertikal -> nach oben. Laenge = Content-Breite
   (wie die Linien der Seite), Enden nur minimal (4%) weich statt frueher 14%. */
.sep-shadow{position:relative;height:44px;margin:0 var(--gut);overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);
  mask:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.sep-shadow::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:52px;opacity:.5;
  box-shadow:0 26px 50px -22px rgba(20,20,20,.30),0 9px 20px -10px rgba(20,20,20,.16),0 0 22px -5px rgba(20,20,20,.11)}
.cover .sep-shadow{margin-top:clamp(36px,4.5vw,60px);margin-bottom:18px}
.sep-shadow.up{transform:scaleY(-1)}
/* Ohne Cover-Bottom-Padding braucht das Step-2-Dropdown Luft nach unten: nur auf der
   Wizard-Cover-Variante overflow freigeben (Steps clippen horizontal selbst; die alte
   .cover-field-Variante der Explorations-Seiten bleibt hidden). z-index 5 hebt das offene
   Dropdown ueber die Read-across-Ebenen (Masken z-3, Label z-4; Nav z-40 bleibt drueber) —
   noetig, weil das .rv-Filter auf dem Formular einen eigenen Stacking-Context erzeugt. */
.cover:has(.steps){overflow:visible;z-index:5}
/* Grid: Zeile1 [Switches | Feld] (Switches vertikal zentriert), Zeile2 [Label | Reassure] —
   beide Labels liegen so garantiert auf gleicher Hoehe und starten am Anfang ihres Elements. */
.signup-row{display:grid;grid-template-columns:auto minmax(0,450px);grid-template-areas:"eds field" "edlabel reassure";justify-content:center;align-items:center;column-gap:clamp(16px,2.6vw,30px);row-gap:11px}
.ed-cards{grid-area:eds;display:flex;gap:12px;justify-self:start}
.signup-field{grid-area:field}
.signup-lbl{grid-area:edlabel;align-self:start;text-align:left;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--g-2);padding-left:4px}
@media (max-width:559px){.signup-row{grid-template-columns:minmax(0,360px);grid-template-areas:"eds" "edlabel" "field" "reassure"}}
.ed-card{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;padding:6px 2px}
.ed-card input{position:absolute;opacity:0;width:1px;height:1px}
/* Switch — folgt der Form des E-Mail-Felds (Pille, 1.5px Ink). Knopf gleitet nach rechts,
   schwarze Fuellung waescht von links nach rechts durch; an = ganz schwarz, Knopf wird weiss. */
/* Switch: grauer Track OHNE Outline. Schwarzes Element 4px eingerueckt (Grau ringsum sichtbar).
   Aus = Kreis links; An = das Element waechst nach rechts zur Kapsel (Kreis links + Steg + Kreis rechts). */
/* Switch: heller grauer Track + schwarzer Kreis links (aus). An = Track schwarz, Kreis rechts + weiss.
   Kreis bleibt Kreis; ein Bounce beim Bewegen (Overshoot-Easing). */
.ed-box{flex:none;width:48px;height:26px;border-radius:999px;background:var(--band);position:relative;overflow:visible;transition:background .3s ease}
/* WHITE knob, 1px larger than the track so it overlaps the edge (no sub-pixel seam) and bleeds
   into the white page. Off = white knob left on light track; on = black track, white knob right. */
.ed-box::before{content:"";position:absolute;top:-1px;left:-1px;width:28px;height:28px;border-radius:50%;background:#fff;transition:transform .42s cubic-bezier(.34,1.56,.64,1)}
.ec-name{font-family:var(--sans);font-weight:500;font-size:1.05rem;line-height:1}
.ed-card:has(input:checked) .ed-box{background:var(--ink)}
.ed-card:has(input:checked) .ed-box::before{transform:translateX(22px);background:#fff}
.ed-card:has(input:focus-visible) .ed-box{outline:2px solid var(--ink);outline-offset:3px}
/* Pill-Feld: Button bündig bis an die Outline, Ecken = exakte Halbkreise (overflow clippt an die Pille) */
/* E-Mail-Feld als Toggle (wie die Switches): schwarzer Kreis links + Platzhalter "type your email";
   sobald eine gueltige E-Mail erkannt wird, gleitet der Kreis nach rechts und waechst mit EINEM Bounce
   zur "Start reading"-Kapsel (weisse Schrift). Graue Flaeche unveraendert, Kreis/Button 4px eingerueckt. */
/* Field stays grey at all times — no white/outline on focus (Mel 05.07.); the typed email is
   black and reads clearly against the grey. Focus is shown by the text caret. */
.signup-field{position:relative;container-type:inline-size;margin-top:0;border:0;border-radius:999px;background:var(--band);overflow:visible}
.signup-field input{display:block;width:100%;height:52px;line-height:52px;border:0;outline:0;padding:0 calc(var(--go-d,44px) + 16px) 0 24px;font-family:var(--sans);font-size:1.02rem;background:transparent;color:var(--ink);transition:padding .42s cubic-bezier(.4,.1,.2,1)}
.signup-field input::placeholder{color:var(--g-3)}
.signup-field.valid input{padding-left:24px;padding-right:172px}
/* WHITE circle at the right, 1px larger than the field so it overlaps the edge/outline (no seam)
   and bleeds into the white page. On a valid email it grows in place into the BLACK "Start reading"
   button, which sits flush INSIDE the field (no 1px overhang — black must not poke past the edge).
   (W3-Ink-Kreis vom 07.07. auf Mel-Wunsch 07.07. abends ZURUECKGEBAUT — Ruhelage wieder weisser
   Kreis; der Ink-Kreis hatte zudem einen width:auto/aspect-ratio-Bug: auto->158px ist nicht
   animierbar, der Button snappte statt zu wachsen.) */
.signup-field button{position:absolute;top:-1px;bottom:-1px;right:-1px;width:var(--go-d,54px);border:0;border-radius:999px;background:#fff;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer}
/* One clean transition drives everything: width grows with a soft overshoot (the bounce), while the
   1px overhang smoothly resolves (top/bottom/right -1 -> 0) and the colour flips — no keyframe/
   transition conflict, no instant geometry snap (that was the jank). */
.signup-field.ready button{transition:width .46s cubic-bezier(.34,1.42,.64,1),top .34s ease,bottom .34s ease,right .34s ease,background .3s ease}
.signup-field button span{opacity:0;color:#fff;font-family:var(--sans);font-weight:500;font-size:.98rem;transition:opacity .15s}
.signup-field.valid button{top:0;bottom:0;right:0;width:158px;background:var(--ink)}
.signup-field.valid button span{opacity:1;transition:opacity .22s .16s}
.signup .reassure-row{grid-area:reassure;align-self:start;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px}
.signup .reassure{text-align:left;margin:0;padding-left:4px}
.signup .form-err{margin:0;padding-right:4px;margin-left:auto;text-align:right;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--press)}
.cover-c .form-done{margin:clamp(32px,5vw,50px) auto 0;max-width:560px;text-align:center}

/* ---------- 3-step signup (slide wizard) ----------
   Step 1: editions + email. Step 2: job/seniority/website (>=1 required). Step 3: confirm email.
   Steps slide horizontally; the viewport height is FIXED at the tallest step (natural flex-row
   height, no JS height animation — Mel 05.07.), shorter steps center vertically. While settled,
   vertical overflow is visible so the custom dropdown lists can hang below the viewport. */
.steps{position:relative;overflow:clip}
.steps.settled{overflow-x:clip;overflow-y:visible}
.steps:not(.anim) .step-track{transition:none}
/* width:100% ist PFLICHT: der Ruhelage-Park nutzt negative margin-left (statt transform,
   s. palette.js park()) — bei width:auto wuerde die negative Margin die Track-Breite
   aufblasen (660->1320) und alle Steps verdoppeln/verschieben. */
.step-track{display:flex;align-items:center;width:100%;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.step{flex:0 0 100%;min-width:100%;padding:0 clamp(14px,2vw,22px);visibility:hidden;transition:visibility 0s .45s}
.step.on{visibility:visible;transition:visibility 0s}
/* Who-Zeile reserviert ihre Hoehe auch leer — sonst waechst Schritt 2 beim Befuellen
   und die fixe Viewport-Hoehe (hoechster Schritt) veraendert sich nach dem Laden. */
.s2-who:empty::before{content:"\00a0"}
/* head text left-aligned, but the block itself stays centred (aligned with the 560px field row) */
.s-head{text-align:left;max-width:560px;margin:0 auto}
.s-step{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-3)}
.s-title{font-family:var(--sans);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.15;margin:10px 0 0;letter-spacing:-.01em}
.s-sub{font-size:.98rem;line-height:1.6;color:var(--g-1);margin:9px 0 0;max-width:52ch}
.s-sub strong{color:var(--ink);font-weight:600}
.s3-open{display:inline-flex;align-items:center;justify-content:center;height:50px;margin:20px 0 0;padding:0 30px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:500;font-size:.98rem;text-decoration:none;transition:background-color .22s ease,color .22s ease,border-color .22s ease}
.signup .s3-back{margin-top:14px;text-align:left;padding-left:0}
.s3-back a,.s2-who a{color:var(--ink);font-weight:600}
/* step 2 fields */
.s2-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:22px auto 0}
.s2-web{height:52px;border:0;outline:0;border-radius:999px;background:var(--band);padding:0 24px;font-family:var(--sans);font-size:1rem;color:var(--ink)}
/* Keine Fokus-Outline (Mel 06.07.) — muss die globale input:focus-visible-Regel (hoehere
   Spezifitaet) explizit schlagen; Fokus zeigt der Text-Caret, wie beim E-Mail-Feld. */
.s2-web:focus,.s2-web:focus-visible{outline:0}
.s2-web::placeholder{color:var(--g-3)}
.s2-go{height:52px;border:0;border-radius:999px;background:var(--band);color:var(--g-3);font-family:var(--sans);font-weight:500;font-size:.98rem;cursor:pointer;transition:background .3s ease,color .3s ease}
.s2-go.on{background:var(--ink);color:#fff}
/* Schwarze Buttons (Mel 06.07.): Hover -> Switch-Grau (--band), KEIN Rand.
   Klick -> NUR waehrend des Drucks (:active) eine 1px schwarze Outline EXAKT an der Kante
   (outline-offset:-1px => liegt ueber dem Rand, vergroessert den Button optisch nicht). */
.signup-field.valid button:hover{background:var(--band)}
.signup-field.valid button:hover span{color:var(--ink)}
.s2-go.on:hover{background:var(--band);color:var(--ink)}
.s3-open:hover{background:var(--band);color:var(--ink);border-color:var(--band)}
.nav-cta:active,.btn-solid:active,.signup-field.valid button:active,.s2-go.on:active,.s3-open:active{
  outline:1px solid var(--ink);outline-offset:-1px}
.s2-meta{max-width:560px;margin:12px auto 0}
@media (max-width:559px){.s2-grid{grid-template-columns:1fr}}
/* custom dropdown (pill) */
.dd{position:relative}
/* KEINE Transition auf dem Button: das Menue erscheint sofort — animierte Ecken/Border
   erzeugten sonst 280ms lang einen sichtbaren Unterbruch an der Verbindung (Mel 06.07.). */
.dd-btn{width:100%;height:52px;border:1px solid transparent;border-radius:26px;background:var(--band);padding:0 20px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--sans);font-size:1rem;color:var(--g-3);cursor:pointer;text-align:left}
.dd.set .dd-btn{color:var(--ink)}
/* Offenes Dropdown: Button bleibt VOLL grau (wie geschlossen); der Fade beginnt erst UNTER
   seiner Unterkante — als Verlauf im Listenkopf (s. .dd-list). Grau trifft Grau an der
   Junction => keine Trennlinie. Verbunden: durchgehende Outline, Junction eckig. */
/* Outline testweise entfernt (Mel 06.07.): Border bleibt 1px transparent (keine Layout-Shifts). */
.dd.open .dd-btn{position:relative;z-index:31;background:var(--band);border-color:transparent;border-radius:26px 26px 0 0}
.dd-chev{font-family:var(--mono);font-size:1.3rem;line-height:1;color:var(--ink);transform:rotate(90deg);transform-origin:center;transition:transform .3s ease;-webkit-user-select:none;user-select:none}
.dd.open .dd-chev{transform:rotate(270deg)}
/* Liste = Top-Bar-Effekt (translucent + backdrop-blur), direkt am Button (top:100%-1px ->
   1px Ueberlappung, Button liegt drueber = nahtlose Verbindung), oben eckig, unten gerundet. */
/* Listenkopf startet deckend im Button-Grau und faded ueber ~56px in den Frosted-Effekt
   (Verlauf liegt ueber der Frosted-Basis; er haftet am Listenrahmen, scrollt nicht mit). */
.dd-list{position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:30;background-color:rgba(255,255,255,.75);background-image:linear-gradient(to bottom,var(--band) 0,rgba(238,238,236,0) 56px);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);border:1px solid transparent;border-top:0;border-radius:0 0 26px 26px;padding:6px;margin:0;list-style:none;max-height:264px;overflow:auto;box-shadow:0 20px 34px -22px rgba(20,20,20,.18)}
.dd-list li{padding:10px 17px;border-radius:14px;font-family:var(--sans);font-size:.95rem;color:var(--ink);cursor:pointer;text-align:left}
.dd-list li:hover,.dd-list li.focus{background:var(--band)}
.dd-list li[aria-selected=true]{font-weight:600}

/* ---------- Reveal motion ---------- */
.rv,.seclabel{opacity:0;transform:translateY(16px);filter:blur(10px);transition:opacity .7s ease,transform .7s ease,filter .7s ease}
/* Endzustand filter:none (nicht blur(0)): ein stehender Filter macht den Vorfahren zum
   Backdrop-Root und wuergt den backdrop-filter der Dropdowns ab (Mel 06.07.). */
.rv.in,.seclabel.in{opacity:1;transform:none;filter:none}

/* ---------- Responsive ---------- */
@media (min-width:760px){
  .editions{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,80px)}
  .ed{border-top:0}
  .ed.first{padding-right:clamp(40px,6vw,80px)}
  .ed.first::after{content:"";position:absolute;top:clamp(16px,2vw,24px);bottom:clamp(16px,2vw,24px);right:0;width:1px;background:var(--line)}
  .sample-wrap{grid-template-columns:1.05fr .95fr}
  .issue-hold{margin-right:14px}
  .vp{grid-template-columns:repeat(3,1fr);column-gap:clamp(28px,4vw,56px)}
  .vp .cell{border-top:0;padding:0}
  .vp .ruled{border-top:1px solid var(--line);padding-top:40px}
  .how{grid-template-columns:repeat(3,1fr);column-gap:clamp(28px,4vw,56px)}
  .how .step{border-top:0;flex-direction:column;gap:14px;padding:0}
  .how .ruled{border-top:1px solid var(--line);padding-top:40px}
  .band-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
  .fmt-grid{grid-template-columns:1fr}
}
@media (max-width:759px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gut) 18px}
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 0;width:100%;font-size:.95rem;border-bottom:1px solid var(--line-faint)}
  .nav-links a::after{display:none}
  .nav-toggle{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px;margin-right:-8px}
  .nav-toggle span{width:22px;height:1.6px;background:var(--ink);display:block}
  .arc-row{grid-template-columns:auto 1fr;gap:8px 12px}
  .arc-row .read{grid-column:2;justify-self:start}
  .paper .ph-body{-webkit-columns:1;columns:1}
  .paper .ph-body::first-letter{font-size:2.4em}
  .ph-two{grid-template-columns:1fr}
  .ph-two .left{border-right:0;border-bottom:1px solid var(--line)}
  .ed-cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.seclabel{opacity:1;transform:none;filter:none;transition:none}
  .nav-links a::after,.iss-card,.arc-row{transition:none}
}