/* ============================================================
   F · TSCHICHOLD  —  the New Typography
   asymmetric, bold rules, red + black on warm paper
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

:root{
  --paper:#f4f1e6;
  --ink:#16140f;
  --accent:#cf2222;
  --measure:50rem;

  /* tokens consumed by site-inner.css + per-page scoped <style> blocks */
  --font-display:'Archivo',sans-serif;
  --font-body:'Archivo',sans-serif;
  --font-label:'Archivo',sans-serif;
  --c-bg:#f4f1e6;
  --c-bg-deep:#e8e3d3;
  --c-ink:#16140f;
  --c-muted:#55514a;
  --c-rule:#d7d2c3;
  --c-rule-strong:#16140f;
  --c-accent:#cf2222;
  --content-max:50rem;
  --size-xs:0.72rem;--size-sm:0.85rem;--size-base:1rem;--size-lg:1.2rem;--size-xl:1.5rem;--size-2xl:2rem;--size-3xl:2.4rem;
  --leading-tight:1.08;--leading-medium:1.4;--leading-body:1.62;
}

*{box-sizing:border-box;}

.site{
  background:var(--paper);color:var(--ink);
  font-family:'Archivo',-apple-system,system-ui,sans-serif;font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
}

/* ---- chrome: flush-left, asymmetric ---- */
.site-nav{
  display:flex;align-items:baseline;gap:20px;max-width:var(--measure);margin:0 auto;
  padding:24px 32px 0;flex-wrap:wrap;
}
.site-wordmark{display:none;}
.site-links{display:flex;gap:20px;list-style:none;margin:0;padding:0;}
.site-links a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);text-decoration:none;}
.site-links a:hover,.site-links a[aria-current="page"]{color:var(--accent);}

/* ---- asymmetric hero ---- */
.home{max-width:var(--measure);margin:0 auto;padding:0 32px 44px;counter-reset:role;}
.home-cover{padding:30px 0 36px;}
.home-cover::before{content:'';display:block;height:8px;background:var(--ink);margin-bottom:22px;}
.home-title{font-weight:800;font-size:70px;line-height:.9;letter-spacing:-.03em;margin:0 0 26px;max-width:9ch;}
.home-masthead{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:start;}
.frontispiece{margin:0;width:120px;height:150px;overflow:hidden;position:relative;background:var(--ink);
  border-top:4px solid var(--ink);}
.frontispiece img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;}
.frontispiece::after{content:'EC';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-weight:800;font-size:26px;}
.home-lede{border-top:4px solid var(--accent);padding-top:14px;font-size:17px;font-weight:500;line-height:1.45;margin:0;}

/* ---- roles: heavy rule + number column ---- */
.role{counter-increment:role;border-top:1px solid var(--ink);padding:22px 0 30px;
  display:grid;grid-template-columns:88px 1fr;gap:0 28px;}
.role:first-of-type{border-top-width:4px;}
.role h2{grid-column:2;font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 16px;}
.role h2::before{content:counter(role,decimal-leading-zero);grid-column:1;position:absolute;margin-left:-116px;
  font-weight:800;font-size:30px;line-height:1;color:var(--accent);}
.role-num{display:none;}
.vignette{grid-column:2;max-width:64ch;}
.vignette p{margin:0 0 12px;}
.vignette h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);margin:0 0 6px;}

.buckets{list-style:none;margin:0 0 14px;padding:0;counter-reset:bucket;}
.buckets li{padding:3px 0 3px 60px;position:relative;}
.buckets li::before{counter-increment:bucket;content:counter(bucket,decimal-leading-zero);
  position:absolute;left:0;color:var(--accent);font-weight:700;}

a{color:var(--accent);text-decoration:none;font-weight:600;}
a:hover{text-decoration:underline;}
em{font-style:italic;}

.more-link{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--ink);border:0;margin-top:4px;}
.more-link::after{content:' \2192';color:var(--accent);}
.more-link:hover{color:var(--accent);}

/* ---- footer: bold red rule ---- */
.site-footer{max-width:var(--measure);margin:0 auto;padding:0 32px 44px;}
.site-footer::before{content:'';display:block;height:8px;background:var(--accent);margin-bottom:18px;}
.colophon-quote{font-size:14px;font-weight:600;margin:0 0 4px;}
.colophon-by{font-size:12px;color:var(--accent);font-weight:600;margin:0 0 10px;}
.copyright{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent);margin:0;}