/* =================================================================
   LEAN IS LAW · COMPANION ALMANAC — shared design system
   Direction: Vintage Athletic Almanac (1973 Penguin Classics × Tracksmith race poster)
   Type:  Cardo (display + italic) · Bricolage Grotesque (body + UI)
   Single accent: aviation-red oklch(54% 0.18 25)
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400;1,700&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

:root{
  /* Surfaces — tinted toward red hue at very low chroma for cohesion */
  --paper:           oklch(94.5% 0.012 60);
  --paper-warm:      oklch(91% 0.018 55);
  --paper-deep:      oklch(88% 0.022 50);
  --paper-card:      oklch(96% 0.010 65);

  /* Ink */
  --ink:             oklch(20% 0.014 45);
  --ink-strong:      oklch(15% 0.020 40);
  --ink-mute:        oklch(40% 0.014 45);
  --ink-soft:        oklch(58% 0.012 50);

  /* Hairlines */
  --rule-fine:       oklch(78% 0.014 50);
  --rule-mid:        oklch(60% 0.018 45);
  --rule-strong:     oklch(20% 0.014 45);

  /* Single accent — aviation red */
  --red:             oklch(54% 0.18 25);
  --red-deep:        oklch(42% 0.16 25);
  --red-soft:        oklch(54% 0.18 25 / 0.08);

  /* Type */
  --display:         'Cardo', 'Times New Roman', serif;
  --body:            'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing — 4pt scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 144px; --s-11: 192px;

  /* Layout */
  --gutter-w: 9rem;
  --column-w: 38rem;
  --measure: 65ch;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16.5px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-variation-settings:"opsz" 14, "wght" 400;
  font-feature-settings:"ss01", "ss02";
  line-height:1.55;
  overflow-x:hidden;
}

/* ---------------------- MASTHEAD ---------------------- */
.masthead{
  border-bottom:1px solid var(--rule-strong);
  padding:var(--s-4) clamp(var(--s-5), 4vw, var(--s-7));
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--s-5);
  flex-wrap:wrap;
}
.masthead .imprint{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:1.05rem;
  letter-spacing:0.005em;
  color:var(--ink-strong);
}
.masthead .imprint::before{
  content:"";
  display:inline-block;
  width:1.4rem;
  height:1px;
  background:var(--red);
  margin-right:var(--s-3);
  vertical-align:middle;
}
.masthead .meta{
  font-family:var(--body);
  font-variation-settings:"opsz" 12, "wght" 500;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  display:flex;
  gap:var(--s-5);
  align-items:baseline;
  flex-wrap:wrap;
}
.masthead .meta a{
  color:var(--ink-mute);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color 200ms cubic-bezier(.2,.8,.2,1), border-color 200ms;
}
.masthead .meta a:hover{color:var(--ink-strong);border-color:var(--ink-strong)}

/* ---------------------- LEAN LINE ---------------------- */
.lean-line{
  height:2px;
  background:var(--red);
  margin:0;
  box-shadow:0 0.5px 0 oklch(42% 0.16 25 / 0.4);
}

/* ---------------------- ALMANAC LAYOUT ---------------------- */
.almanac{
  display:grid;
  grid-template-columns: var(--gutter-w) minmax(0, 1fr);
  column-gap:clamp(var(--s-5), 5vw, var(--s-9));
  padding:clamp(var(--s-7), 5vw, var(--s-9)) clamp(var(--s-5), 4vw, var(--s-7)) var(--s-11);
  max-width:90rem;
  margin:0 auto;
}
@media (max-width: 880px){
  .almanac{grid-template-columns:1fr;column-gap:0}
}

/* ---------------------- MARGINALIA GUTTER ---------------------- */
.gutter{position:relative}
.gutter .section-numeral{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:2.4rem;
  line-height:1;
  color:var(--red);
  margin-bottom:var(--s-3);
}
.gutter .gutter-label{
  font-family:var(--body);
  font-variation-settings:"opsz" 12, "wght" 600;
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-strong);
  margin-bottom:var(--s-2);
  display:block;
}
.gutter .gutter-note{
  font-family:var(--display);
  font-style:italic;
  font-size:0.92rem;
  line-height:1.5;
  color:var(--ink-mute);
  margin-bottom:var(--s-5);
  display:block;
  padding-right:var(--s-4);
}
.gutter .gutter-rule{
  width:80%;
  height:1px;
  background:var(--rule-fine);
  margin:var(--s-5) 0;
}
.gutter .folio{
  font-family:var(--display);
  font-style:italic;
  font-size:0.85rem;
  color:var(--ink-soft);
  margin-bottom:var(--s-2);
}
@media (max-width: 880px){
  .gutter{
    border-left:1px solid var(--rule-fine);
    padding-left:var(--s-4);
    margin-bottom:var(--s-6);
  }
}

/* ---------------------- HERO ---------------------- */
.hero{margin-bottom:var(--s-8)}
.hero .pretitle{
  font-family:var(--body);
  font-variation-settings:"opsz" 12, "wght" 600;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:var(--s-4);
  display:block;
}
.hero h1{
  font-family:var(--display);
  font-weight:400;
  line-height:0.96;
  letter-spacing:-0.01em;
  color:var(--ink-strong);
  font-size:clamp(3rem, 7.2vw, 6.4rem);
  max-width:14ch;
  margin-bottom:var(--s-6);
}
.hero h1 em{
  font-style:italic;
  color:var(--red);
  font-weight:400;
}
.hero .standfirst{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.15rem, 1.6vw, 1.4rem);
  line-height:1.5;
  color:var(--ink);
  max-width:38rem;
  text-indent:-0.3em;
}
.hero .standfirst::before{content:"\201C"}
.hero .standfirst::after{content:"\201D"}

/* ---------------------- COLOPHON FOOTER ---------------------- */
.colophon{
  margin-top:var(--s-10);
  padding-top:var(--s-6);
  border-top:1px solid var(--rule-strong);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:var(--s-5);
  align-items:baseline;
}
@media (max-width: 720px){
  .colophon{grid-template-columns:1fr;gap:var(--s-3);text-align:left}
}
.colophon .left{
  font-family:var(--display);
  font-style:italic;
  font-size:1.1rem;
  color:var(--ink-strong);
}
.colophon .left::before{
  content:"";
  display:inline-block;
  width:1rem;
  height:1px;
  background:var(--red);
  margin-right:var(--s-3);
  vertical-align:middle;
}
.colophon .center{
  font-family:var(--body);
  font-variation-settings:"opsz" 12, "wght" 500;
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.colophon .right{
  text-align:right;
  font-family:var(--display);
  font-style:italic;
  font-size:0.92rem;
  color:var(--ink-mute);
}
.colophon .right a{color:var(--ink-mute);text-decoration:none;border-bottom:1px solid var(--rule-fine)}
.colophon .right a:hover{color:var(--ink-strong);border-color:var(--ink-strong)}
@media (max-width: 720px){.colophon .right{text-align:left}}

/* ---------------------- COMMON UTILITIES ---------------------- */
.body-text{
  font-family:var(--body);
  font-variation-settings:"opsz" 16, "wght" 400;
  font-size:0.97rem;
  line-height:1.65;
  color:var(--ink);
  max-width:62ch;
}
.body-text + .body-text{margin-top:var(--s-4)}
.body-text strong{font-variation-settings:"opsz" 16, "wght" 600;color:var(--ink-strong)}
.body-text em{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:1.02em;
}

.editorial-quote{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.3rem, 2vw, 1.7rem);
  line-height:1.45;
  color:var(--ink);
  max-width:46ch;
  margin:var(--s-6) 0;
  padding-left:var(--s-5);
  border-left:1px solid var(--red);
}
.editorial-quote cite{
  display:block;
  margin-top:var(--s-3);
  font-family:var(--body);
  font-style:normal;
  font-variation-settings:"opsz" 12, "wght" 500;
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

.section-rule{
  margin:var(--s-8) 0 var(--s-6);
  border:none;
  height:1px;
  background:var(--rule-strong);
}

.section-head{
  margin-bottom:var(--s-6);
}
.section-head h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.7rem, 2.6vw, 2.3rem);
  line-height:1.05;
  color:var(--ink-strong);
  letter-spacing:-0.005em;
  margin-bottom:var(--s-2);
}
.section-head h2 em{font-style:italic;font-weight:400;color:var(--red)}
.section-head .sub{
  font-family:var(--display);
  font-style:italic;
  font-size:1.02rem;
  color:var(--ink-mute);
  max-width:50ch;
  line-height:1.5;
}

/* ---------------------- MOTION ---------------------- */
@media (prefers-reduced-motion: no-preference){
  .almanac > article > section{
    opacity:0;
    transform:translateY(8px);
    animation:rise 800ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  .almanac > article > section:nth-child(1){animation-delay:0ms}
  .almanac > article > section:nth-child(2){animation-delay:120ms}
  .almanac > article > section:nth-child(3){animation-delay:240ms}
  .almanac > article > section:nth-child(4){animation-delay:360ms}
  .almanac > article > section:nth-child(5){animation-delay:480ms}
  @keyframes rise{
    to{opacity:1;transform:translateY(0)}
  }
}