:root {
  --pad: #e7ebe2;
  --ink: #191c18;
  --ink-soft: #5c6358;
  --ink-faint: #8a9184;
  --rule: #c2c9b8;
  --grid: rgba(25, 28, 24, .055);
  --rung-1: #24503c;
  --rung-2: #2f5a4a;
  --rung-3: #4a5b53;
  --rung-4: #7a5a1e;
  --rung-5: #8a4a3c;
  --measure: 62ch;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --f-disp: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--pad);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 var(--gut); }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink-faint); }
:focus-visible { outline: 2px solid var(--rung-1); outline-offset: 3px; }
.masthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; padding: 2.4rem 0 1.1rem; border-bottom: 1px solid var(--ink); }
.mark { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.3rem, 3.4vw, 1.65rem); letter-spacing: .19em; text-transform: uppercase; margin: 0; }
.mark-sub { font-family: var(--f-mono); font-size: .74rem; color: var(--ink-soft); letter-spacing: .02em; margin: 0 0 0 auto; }
.statement { padding: 3rem 0 2.6rem; max-width: var(--measure); }
.statement p { margin: 0 0 1.05em; }
.statement p:last-child { margin-bottom: 0; }
.lede { font-size: 1.24rem; line-height: 1.5; }
.statement .qualifier { font-family: var(--f-mono); font-size: .82rem; line-height: 1.6; color: var(--ink-soft); border-inline-start: 2px solid var(--rule); padding-inline-start: .9rem; margin-top: 1.9rem; }
.ladder-key { border-block: 1px solid var(--rule); padding: 1.5rem 0 1.6rem; }
.eyebrow { font-family: var(--f-disp); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; color: var(--ink-soft); margin: 0 0 1.1rem; }
.ladder-key-note { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-soft); max-width: 52ch; margin: 1.1rem 0 0; }
.rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.rungs li { display: flex; align-items: baseline; gap: .6rem; font-family: var(--f-disp); font-size: .83rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .07em; border-top: 2px solid currentColor; padding-top: .5rem; }
.rungs li i { font-family: var(--f-mono); font-style: normal; font-size: .78rem; opacity: .75; }
.r1 { color: var(--rung-1); }
.r2 { color: var(--rung-2); }
.r3 { color: var(--rung-3); }
.r4 { color: var(--rung-4); }
.r5 { color: var(--rung-5); }
.gauge { display: flex; align-items: flex-end; gap: 3px; height: 15px; }
.gauge span { display: block; width: 4px; height: 5px; background: var(--rule); border-radius: 0; transition: height .5s ease, background-color .5s ease; }
.gauge span:nth-child(2) { height: 7px; }
.gauge span:nth-child(3) { height: 9px; }
.gauge span:nth-child(4) { height: 11px; }
.gauge span:nth-child(5) { height: 13px; }
.gauge[data-rung="1"] span:nth-child(-n+1), .gauge[data-rung="2"] span:nth-child(-n+2), .gauge[data-rung="3"] span:nth-child(-n+3), .gauge[data-rung="4"] span:nth-child(-n+4), .gauge[data-rung="5"] span:nth-child(-n+5) { background: currentColor; }
.register { padding: 2.8rem 0 1rem; }
.register > .eyebrow { margin-bottom: 1.8rem; }
.entry { border-top: 1px solid var(--rule); padding: 1.9rem 0 2.1rem; display: grid; gap: 1rem; }
.entry:first-of-type { border-top: 0; padding-top: 0; }
.entry-meta { display: grid; gap: .75rem; align-content: start; }
.entry-meta p { margin-block: 0; }
.entry-date { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-soft); letter-spacing: .01em; }
.entry-area { font-family: var(--f-disp); font-weight: 600; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; color: var(--ink); }
.entry-rung { display: flex; align-items: center; gap: .55rem; font-family: var(--f-mono); font-size: .71rem; letter-spacing: .02em; }
.entry-body { max-width: var(--measure); }
.entry-title { font-family: var(--f-disp); font-weight: 600; font-size: clamp(1.35rem, 3vw, 1.72rem); line-height: 1.18; letter-spacing: -.005em; margin: 0 0 .7rem; }
.entry-body p { margin: 0 0 .85em; }
.entry-body p:last-child { margin-bottom: 0; }
.entry-status { font-family: var(--f-mono); font-size: .76rem; color: var(--ink-soft); margin-top: 1.1rem; padding-top: .7rem; border-top: 1px dotted var(--rule); }
.entry-status b { font-weight: 500; color: var(--ink); }
.contact { border-top: 1px solid var(--ink); margin-top: 1.5rem; padding: 2.6rem 0 1rem; display: grid; gap: 1.6rem; }
.contact-body { max-width: var(--measure); }
.contact-mail { font-family: var(--f-disp); font-weight: 600; font-size: clamp(1.3rem, 3vw, 1.6rem); letter-spacing: .01em; display: inline-block; margin-bottom: .8rem; }
.contact p { margin: 0 0 .8em; }
.contact p:last-child { margin-bottom: 0; }
footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 1.3rem 0 3rem; font-family: var(--f-mono); font-size: .74rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
footer p { margin: 0; }
@media (min-width: 56rem) {
  .rungs { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
  .entry, .contact { grid-template-columns: 13rem 1fr; gap: 0 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gauge span { transition: none; }
}