/* SoundTemple Journal
   Editorial surface for blog/. Palette, type and spacing are the AVA design
   system: black first, one neutral ramp, Space Grotesk for voice and IBM
   Plex Mono for anything the machine measures. White is reserved for what
   is on. One spacing scale, DESIGN.md: 8 / 16 / 32 / 64 / 128 / 256.
   Hairlines and alignment carry the page. No shadows, no scrims. */

:root{
  /* the AVA design system ramp. Black first: the editorial ground is
     absolute black, body copy sits at #C9C9C9 and headlines take white. */
  --bone:#000000;          /* the page ground */
  --bone-deep:#141414;     /* figure and pull quote plates */
  --oat:#1C1C1C;
  --moss:#FFFFFF;          /* the signal: the primary action */
  --moss-deep:#FFFFFF;
  --mint:#FFFFFF;
  --mint-lift:#FFFFFF;
  --espresso:#E4E4E4;      /* headline ink on black */
  --read:#C9C9C9;          /* the reading colour */
  --muted:#8A8A8A;
  --mono-ink:#7A7A7A;
  --white:#FFFFFF;

  --rule-ink:#262626;
  --rule-soft:#1E1E1E;
  --rule-bone:#2E2E2E;

  --s1:8px; --s2:16px; --s3:32px; --s4:64px; --s5:128px; --s6:256px;
  --nav-h:68px;

  --sans:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bone);
  color:var(--read);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  letter-spacing:-0.004em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,ul,ol,blockquote{margin:0}
ul{padding:0;list-style:none}

.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--s2)}
@media (min-width:760px){ .wrap{padding:0 var(--s3)} }

/* ---------------- shared type ---------------- */
.label{
  font-family:var(--mono);
  font-size:12px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1;
  color:var(--mono-ink);
}
.display{
  font-weight:400;
  line-height:.97;
  letter-spacing:-0.045em;
  color:var(--white);
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------------- action: Law D greens only ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  padding:0 var(--s3);
  border:1px solid var(--moss);
  border-radius:999px;
  background:var(--moss);
  color:var(--bone);
  font-family:var(--mono);font-size:12px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;
  transition:background-color .28s ease,border-color .28s ease;
}
.btn:hover{box-shadow:0 0 24px 2px rgba(255,255,255,.35)}
.on-dark .btn{background:var(--mint);border-color:var(--mint);color:var(--bone)}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* ---------------- masthead ---------------- */
.mast{border-bottom:1px solid var(--rule-ink)}
.mast__in{
  min-height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  flex-wrap:wrap;
}
/* under 560px the masthead sets as two rows, brand over nav, divided by a
   hairline. One row cannot hold the wordmark and three 44px targets at 390px
   without either clipping or shrinking a tap target below the minimum. */
@media (max-width:559px){
  .mast__in{align-items:flex-start;padding-top:var(--s1)}
  .mast nav{width:100%;border-top:1px solid var(--rule-soft)}
  .mast nav ul{justify-content:flex-start;gap:var(--s2);margin-left:-8px}
}
.brand{display:flex;align-items:center;gap:10px;min-height:44px}
.brand .mark{width:30px;height:27px;color:var(--white);flex:0 0 auto}
.brand span{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--white)}
.mast nav ul{display:flex;align-items:center;gap:var(--s2)}
@media (min-width:560px){ .mast nav ul{gap:var(--s3)} }
.mast nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 var(--s1);
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--espresso);
  text-decoration:underline 1px transparent;text-underline-offset:7px;
  transition:text-decoration-color .25s ease;
}
.mast nav a:hover,.mast nav a:focus-visible,.mast nav a[aria-current]{color:var(--white);text-decoration-color:var(--white)}

/* ---------------- index masthead block ---------------- */
.top{padding-top:var(--s4);padding-bottom:var(--s3)}
@media (min-width:900px){ .top{padding-top:var(--s5);padding-bottom:var(--s4)} }
.top__kicker{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.top h1{
  color:var(--white);
  font-weight:400;
  font-size:clamp(44px,10vw,132px);
  line-height:.9;
  letter-spacing:-0.04em;
}
.top__dek{
  margin-top:var(--s3);
  color:var(--muted);
  font-weight:400;
  font-size:clamp(19px,2vw,27px);
  line-height:1.3;
  letter-spacing:-0.02em;
  max-width:30ch;
}

/* ---------------- index list ---------------- */
.list{border-top:1px solid var(--rule-ink);margin-top:var(--s4)}
@media (min-width:900px){ .list{margin-top:var(--s4)} }
.entry{border-bottom:1px solid var(--rule-soft)}
.entry:last-child{border-bottom:1px solid var(--rule-ink)}
.entry a{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s2);
  padding:var(--s3) 0;
  align-items:start;
}
@media (min-width:760px){
  .entry a{
    grid-template-columns:64px 1fr 240px;
    gap:var(--s3);
    padding:var(--s4) 0;
    align-items:start;
  }
}
.entry__no{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--mono-ink);padding-top:12px}
.entry__ttl{
  display:block;
  color:var(--white);
  font-weight:400;
  font-size:clamp(26px,3.6vw,44px);
  line-height:1.04;
  letter-spacing:-0.032em;
  max-width:19ch;
  text-decoration:underline 1px transparent;
  text-underline-offset:10px;
  transition:text-decoration-color .3s ease;
}
.entry__sum{display:block;margin-top:var(--s2);font-size:16px;line-height:1.55;max-width:52ch;opacity:.86}
.entry__meta{display:block;margin-top:var(--s2);font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--mono-ink)}
.entry__fig{display:block;overflow:hidden;border-radius:6px;background:var(--bone-deep)}
.entry__fig img{width:100%;height:150px;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
@media (min-width:760px){ .entry__fig img{height:132px} }
.entry a:hover .entry__ttl,.entry a:focus-visible .entry__ttl{text-decoration-color:var(--white)}
.entry a:hover .entry__fig img{transform:scale(1.04)}

/* ---------------- article head ---------------- */
.head{padding-top:var(--s4);padding-bottom:var(--s3)}
@media (min-width:900px){ .head{padding-top:var(--s5);padding-bottom:var(--s4)} }
.head__kicker{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.head h1{
  color:var(--white);
  font-weight:400;
  font-size:clamp(36px,6.2vw,84px);
  line-height:.97;
  letter-spacing:-0.037em;
  max-width:19ch;
}
.head__dek{
  margin-top:var(--s3);
  color:var(--muted);
  font-weight:400;
  font-size:clamp(19px,1.8vw,25px);
  line-height:1.32;
  letter-spacing:-0.02em;
  max-width:38ch;
}
.byline{
  margin-top:var(--s4);
  padding-top:var(--s2);
  border-top:1px solid var(--rule-ink);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);
}
@media (min-width:760px){ .byline{gap:var(--s2) var(--s4)} }

/* ---------------- figure ---------------- */
.fig{margin-top:var(--s3)}
@media (min-width:900px){ .fig{margin-top:var(--s4)} }
.fig img{
  width:100%;
  height:auto;
  border-radius:6px;
  background:var(--bone-deep);
  filter:grayscale(1) contrast(1.04);
}
.fig figcaption{
  margin-top:var(--s2);
  padding-top:var(--s1);
  border-top:1px solid var(--rule-soft);
  font-size:12px;line-height:1.5;
  letter-spacing:.01em;
  opacity:.7;
  max-width:60ch;
}

/* ---------------- prose ---------------- */
.body{padding-top:var(--s4)}
@media (min-width:900px){ .body{padding-top:var(--s5)} }
.prose{max-width:68ch}
.prose p{
  font-size:17px;
  line-height:1.66;
  margin-bottom:var(--s3);
}
@media (min-width:760px){ .prose p{font-size:18px} }
.prose p:last-child{margin-bottom:0}
.prose h2{
  margin:var(--s4) 0 var(--s3);
  padding-top:var(--s2);
  border-top:1px solid var(--rule-ink);
  color:var(--white);
  font-weight:500;
  font-size:clamp(21px,2.1vw,26px);
  line-height:1.18;
  letter-spacing:-0.025em;
}
/* the pull quote already sets a hard break in the column, so the heading
   that follows it does not need a second full stride of air */
.prose .pull + h2{margin-top:var(--s3)}
.prose em{font-style:normal;font-weight:500}
.prose a{color:var(--espresso);text-decoration:underline 1px #4A4A4A;text-underline-offset:4px}
.prose a:hover{color:var(--white);text-decoration-color:var(--white)}

/* pull quote: one per article, set wider than the measure, hairline bound */
.pull{
  margin:var(--s4) 0;
  padding:var(--s3) 0;
  border-top:1px solid var(--rule-bone);
  border-bottom:1px solid var(--rule-bone);
  max-width:22ch;
}
@media (min-width:1040px){
  /* the pull quote is the one element allowed past the measure: it sits on
     the same left grid line and runs wider than the column, still inside
     the wrap gutter. */
  .pull{max-width:none;width:min(860px,calc(100vw - 64px));margin:var(--s5) 0}
}
.pull p{
  color:var(--white);
  font-weight:400;
  font-size:clamp(25px,3.4vw,44px);
  line-height:1.1;
  letter-spacing:-0.033em;
  margin:0;
}
@media (min-width:1040px){ .pull p{max-width:20ch} }
.pull cite{
  display:block;
  margin-top:var(--s2);
  font-style:normal;
  font-family:var(--mono);
  font-size:11px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--mono-ink);
}

/* ---------------- sources ---------------- */
.src{
  margin-top:var(--s5);
  padding-top:var(--s2);
  border-top:1px solid var(--rule-bone);
  max-width:76ch;
}
.src h2{margin:0 0 var(--s3);padding:0;border:0;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--mono-ink)}
.src ol{margin:0;padding:0;list-style:none;counter-reset:s}
.src li{
  counter-increment:s;
  position:relative;
  padding:0 0 var(--s2) 34px;
  margin-bottom:var(--s2);
  border-bottom:1px solid var(--rule-soft);
  font-size:15px;
  line-height:1.55;
}
.src li:last-child{border-bottom:0;margin-bottom:0}
.src li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:3px;
  font-family:var(--mono);
  font-size:11px;font-weight:400;letter-spacing:.12em;
  color:var(--mono-ink);
}
.src a{
  display:inline-block;
  padding:4px 0;
  color:var(--espresso);
  text-decoration:underline 1px #4A4A4A;
  text-underline-offset:3px;
  word-break:break-word;
}
.src a:hover{color:var(--white);text-decoration-color:var(--white)}
.note{
  margin-top:var(--s3);
  font-size:12px;
  letter-spacing:.02em;
  opacity:.72;
  max-width:60ch;
}

/* ---------------- read next ---------------- */
.next{margin-top:var(--s5);border-top:1px solid var(--rule-ink);padding-top:var(--s3)}
.next__grid{display:grid;grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s3)}
@media (min-width:760px){ .next__grid{grid-template-columns:repeat(2,1fr);gap:var(--s3)} }
@media (min-width:1040px){ .next__grid{grid-template-columns:repeat(4,1fr)} }
.next__grid a{
  display:block;
  padding-top:var(--s2);
  border-top:1px solid var(--rule-soft);
  transition:border-color .3s ease;
}
.next__grid a:hover{border-top-color:var(--white)}
.next__grid a .label{display:block}
.next__ttl{
  margin-top:var(--s1);
  color:var(--espresso);
  font-weight:400;
  font-size:21px;
  line-height:1.14;
  letter-spacing:-0.028em;
  max-width:16ch;
}
.next__all{margin-top:var(--s4)}
.next__all a{
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:underline 1px var(--rule-ink);text-underline-offset:7px;
  display:inline-flex;align-items:center;min-height:44px;
}
.next__all a:hover{text-decoration-color:var(--white)}

/* ---------------- quiet book band ---------------- */
.book{
  margin-top:var(--s5);
  background:var(--bone);
  color:var(--read);
  border-top:1px solid var(--rule-soft);
  padding:var(--s4) 0;
}
@media (min-width:900px){ .book{padding:var(--s5) 0} }
.book__in{display:grid;grid-template-columns:1fr;gap:var(--s3);align-items:end}
@media (min-width:900px){ .book__in{grid-template-columns:1fr auto;gap:var(--s4)} }
.book__line{
  margin-top:var(--s2);
  color:var(--white);
  font-weight:400;
  font-size:clamp(26px,3.8vw,52px);
  line-height:1.02;
  letter-spacing:-0.034em;
  max-width:17ch;
}
.book__act{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
@media (min-width:900px){ .book__act{align-items:flex-end} }
.book .lockup{width:168px;height:auto;color:var(--white);opacity:.9}
.book__note{font-size:12px;letter-spacing:.02em;opacity:.78;max-width:34ch}

/* ---------------- footer ---------------- */
.foot{
  background:var(--bone);
  color:var(--mono-ink);
  border-top:1px solid var(--rule-ink);
  padding:var(--s3) 0;
}
.foot__grid{
  display:grid;grid-template-columns:1fr;gap:var(--s1);
  font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
@media (min-width:760px){
  .foot__grid{grid-template-columns:repeat(4,1fr);gap:var(--s3);align-items:center}
}
.foot a{display:inline-block;padding:5px 0;color:var(--read);text-decoration:underline 1px var(--rule-bone);text-underline-offset:4px}
.foot a:hover{color:var(--white);text-decoration-color:var(--white)}