


body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--grotesk);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--frame, var(--measure)); margin: 0 auto; padding: 0 var(--page-pad); }


.hero { position: relative; --hero-pad-top: var(--s-8); --hero-pad-bottom: var(--s-9); padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); }
.corner {
  position: absolute;
  font-family: var(--grotesk); font-weight: var(--fw-bold); font-size: var(--fs-micro); letter-spacing: var(--ls-micro);
  text-transform: uppercase; color: var(--ink-3); line-height: var(--lh-body);
}
.c-tl { top: var(--s-5); left: var(--page-pad); }
.c-tr { top: var(--s-5); right: var(--page-pad); text-align: right; }
.c-bl { bottom: var(--s-5); left: var(--page-pad); }
.c-br { bottom: var(--s-5); right: var(--page-pad); text-align: right; }
.c-br b, .c-tr b { color: var(--accent); font-weight: var(--fw-semibold); }

.hero-inner { padding: var(--s-7) 0 0; }
.hero-badge {                               
  display: inline-block; margin-bottom: var(--s-5);
  font-family: var(--grotesk); font-size: var(--fs-meta); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-3);
}
.hero-badge b { color: var(--accent); font-weight: var(--fw-bold); }
.hero-title {                               
  font-size: clamp(var(--fs-h2), 6vw, var(--fs-h1));
  font-weight: var(--fw-black); line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero); color: var(--ink); max-width: 16ch;
}
.hero-subtitle {                            
  margin-top: var(--s-5); font-size: var(--fs-lead); line-height: var(--lh-body);
  color: var(--ink-2); max-width: 62ch;
}
.hero-stats {                               
  display: flex; gap: var(--s-7); margin-top: var(--s-6); flex-wrap: wrap;
}
.hero-stat .n { font-family: var(--grotesk); font-size: var(--fs-h4); font-weight: var(--fw-black); color: var(--ink); letter-spacing: -.02em; }
.hero-stat .l {
  margin-top: var(--s-1); font-family: var(--grotesk); font-size: var(--fs-meta); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3);
}


.metric-band { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); margin: var(--sec-gap) 0; }
.metric-band .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { padding: var(--s-5) var(--s-5) var(--s-4) 0; border-left: 1px solid var(--line); padding-left: var(--s-5); min-width: 0; }
.metric:first-child { border-left: none; padding-left: 0; }
.metric .val {
  display: block; font-size: clamp(var(--fs-h3), 4.6vw, var(--fs-h2));
  font-weight: var(--fw-black); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.metric .lbl {
  display: block; margin-top: var(--s-3); font-family: var(--grotesk); font-size: var(--fs-meta);
  font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-3);
}
.metric.is-hot .val { color: var(--accent); }

.bar-row { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-3); }
.bar-row .bar-label {
  width: 190px; flex: none; font-family: var(--grotesk); font-size: var(--fs-meta);
  font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-row .bar-track { flex: 1; height: 12px; background: var(--surface-3); border-radius: var(--r-pill); position: relative; overflow: hidden; }
.bar-row .bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); border-radius: var(--r-pill); }
.bar-row .bar-fill.hot { background: var(--accent); }
.bar-row .bar-val { width: 60px; flex: none; text-align: right; font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink); }


section.sheet { padding: var(--sec-gap) 0 0; }
section.sheet:first-of-type { padding-top: 0; }
.sec-label { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.sec-label .no { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: var(--ls-mono); color: var(--accent); flex: none; }
.sec-label .t { font-size: var(--fs-meta); font-weight: var(--fw-semibold); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink); flex: none; }
.sec-label .line { flex: 1; height: 1px; background: var(--line-strong); min-width: var(--s-6); }
.sec-label .meta { font-family: var(--grotesk); font-weight: var(--fw-medium); font-size: var(--fs-micro); letter-spacing: var(--ls-micro); color: var(--ink-3); text-transform: uppercase; flex: none; }
.lede { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-2); max-width: 76ch; margin-bottom: var(--s-6); }

section.sheet p:not([class]) { font-size: var(--fs-body); line-height: var(--lh-long); color: var(--ink-2); max-width: var(--measure-copy); }
section.sheet p:not([class]) + p:not([class]) { margin-top: var(--s-4); }



.sec-title { margin: 0 0 var(--s-5); font-size: clamp(var(--fs-h3), 4.4vw, var(--fs-h2)); font-weight: var(--fw-black);
  line-height: var(--lh-head); letter-spacing: var(--ls-head); color: var(--ink); max-width: 20ch; }
.sec-title .thin, .cover-title .thin { color: transparent; -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke; }
.cover-title { margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); color: var(--ink); max-width: 9ch; }
.copy-s { font-size: var(--fs-15); line-height: var(--lh-body); color: var(--ink-2); }
.copy-xs { font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--ink-3); }
.copy-xs b, .copy-s b { color: var(--ink); }


.cols { display: grid; gap: 0 var(--s-7); align-items: start; }
.cols.c2 { grid-template-columns: 1fr 1fr; }
.cols.c3 { grid-template-columns: repeat(3, 1fr); }
.cols.c4 { grid-template-columns: repeat(4, 1fr); }
.cols.c-2-1 { grid-template-columns: 1.75fr 1fr; }
.cols.c-1-2 { grid-template-columns: 1fr 1.75fr; }
.vr { border-left: 1px solid var(--line); padding-left: var(--s-7); }
.blk { margin-top: var(--s-6); }
.blk:first-child { margin-top: 0; }
.blk-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  border-bottom: 1px solid var(--line-strong); padding-bottom: var(--s-2); margin-bottom: var(--s-4);
}
.blk-h .k { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--ink); letter-spacing: -.005em; }
.blk-h .m { font-family: var(--grotesk); font-weight: var(--fw-bold); font-size: var(--fs-micro); letter-spacing: var(--ls-micro); color: var(--ink-3); text-transform: uppercase; }



.room {
  background: var(--ground); border-radius: var(--r-4); padding: var(--s-7) var(--s-6); margin: var(--s-6) 0;
}   
.room .card { background: var(--tile); border-radius: var(--r-2); padding: var(--s-5); box-shadow: none; }
.room.on-white { background: var(--paper); padding: 0; }
.room.on-white .card { box-shadow: none; border: 0; background: var(--surface-2); }
.room .card + .card { margin-top: var(--s-4); }


.quote { padding: var(--sec-gap) 0; }
.quote p {
  font-size: clamp(var(--fs-h4), 3.4vw, var(--fs-h3));
  font-weight: var(--fw-semibold); line-height: var(--lh-head);
  letter-spacing: -.015em; color: var(--ink); max-width: 30ch;
}
.quote p b { color: var(--accent); font-weight: var(--fw-bold); }
.quote .attr {
  margin-top: var(--s-4); font-family: var(--grotesk); font-weight: var(--fw-bold); font-size: var(--fs-micro); letter-spacing: var(--ls-micro);
  color: var(--ink-3); text-transform: uppercase;
}


.folio {
  max-width: var(--measure); margin: 0 auto;
  padding: var(--s-7) var(--page-pad) var(--s-7);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); flex-wrap: wrap;
  font-family: var(--grotesk); font-weight: var(--fw-bold); font-size: var(--fs-micro); letter-spacing: var(--ls-micro);
  text-transform: uppercase; color: var(--ink-3);
}
.folio b { color: var(--ink); font-weight: var(--fw-semibold); }


:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }


@media (max-width: 735px) {
  .cols.c2, .cols.c3, .cols.c4, .cols.c-2-1, .cols.c-1-2 { grid-template-columns: 1fr; gap: var(--s-5) 0; }
  .vr { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--s-5); margin-top: var(--s-5); }
  .metric-band .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2n) { }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: var(--s-4); }
  .hero-stats { gap: var(--s-5); }
  .sec-label { flex-wrap: wrap; row-gap: var(--s-1); }
  .sec-label .line { display: none; }
  .sec-label .meta { flex: 1 1 100%; }
  .corner { max-width: 46%; }
}


@media (max-width: 960px) { .c-bl, .c-br { display: none; } }


.wrap .folio { max-width: none; padding-left: 0; padding-right: 0; }


.corner .counter, .folio .counter { font-family: var(--mono); letter-spacing: var(--ls-mono); font-weight: var(--fw-medium); }
