/* Desktop 1024px and up. Loaded only at that width. */
/* Base styles in site.css are desktop-first; put desktop-only refinements here. */

/* the approval queue is the hero's proof: keep its top edge in the first screen at 1440x900 */
.hero { padding-top: clamp(40px, 5vw, 80px); }
.hero > .label { margin-bottom: 28px; }
.hero .lede { max-width: 56ch; margin-top: 28px; }
.hero-cta { margin-top: 28px; }
.console { margin-top: clamp(40px, 4vw, 56px); }

/* ---------- hierarchy: one rule leads, three follow ---------- */
.row:first-child h3 { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
.row:first-child { padding-block: clamp(48px, 6vw, 88px); }
.row:first-child p { font-size: 1.1875rem; color: var(--chalk); }
.row:not(:first-child) h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.row:not(:first-child) { padding-block: clamp(24px, 3vw, 36px); }
.sec-head h2.title { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }

/* build tiles: the visual leads, the text supports */
.build { min-height: 360px; }
.build:nth-child(1), .build:nth-child(2) { min-height: 400px; }
.build:nth-child(1) .viz.receipt { max-width: 380px; font-size: .875rem; }
.build h3 { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }

/* steps: bigger names, node grows on hover */
.steps h3 { font-size: 2.3rem; }
.steps li::after { transition: transform .2s; }
.steps li:hover::after { transform: scale(1.6); }

/* ---------- bolder: desktop v2 ---------- */

/* hero: grey-then-white headline, bigger, tighter */
.display { font-size: clamp(4.2rem, 9.4vw, 8.6rem); line-height: .88; }
.display .dim { display: block; color: var(--smoke); }
.display .slot { width: .13em; height: .13em; }
.hero .lede { color: var(--chalk); }

/* full-bleed rules: each row inverts under the pointer, like a stamp */
.ledger { border-top: 0; }
.row { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); position: relative;
  transition: background .25s, color .25s; }
.row:hover { background: var(--white); }
.row:hover h3 { color: var(--void); }
.row:hover p { color: #2b2b2b; }
.row:hover .i { color: #5a5a5a; }
.row h3, .row p, .row .i { transition: color .25s; }
.row:first-child { border-top: 1px solid var(--rule); }

/* build: the morning report is the focal tile, white on a black grid */
.build.focal { background: var(--white); }
.build.focal:hover { background: var(--paper); }
.build.focal h3 { color: var(--void); }
.build.focal .label { color: #5a5a5a; }
.build.focal p { color: #2b2b2b; }
.build.focal .bars .cols { border-bottom-color: var(--void); }
.build.focal .bars .cols i { background: #9a9a9a; }
.build.focal .pn { color: var(--gold-deep); }
.build.focal .bars .cols i.hi { background: var(--void); }
.build.focal .bars figcaption { color: #5a5a5a; }
.build.focal .bars figcaption b { color: var(--void); }
.build.focal .bars .cols { height: 120px; }
.build.focal .bars { max-width: 440px; }

/* the redaction statement flips to white: black bars, black type */
.band { background: var(--white); border-block: 0; }
.band .statement { color: var(--void); max-width: 15ch; font-size: clamp(3rem, 9vw, 9rem); }
.band .rw { background: var(--void); }
.band .rw:hover { background: #2b2b2b; }
.band .rw[aria-pressed="true"] { color: var(--void); background: transparent; box-shadow: inset 0 -.06em 0 var(--void); }
.band .label { color: #5a5a5a; }
.band .rw:focus-visible { outline-color: var(--void); }

/* steps: outlined numerals */
.steps h3::before { counter-increment: s; content: counter(s, decimal-leading-zero); display: block;
  font: 400 6.5rem/.9 var(--serif); letter-spacing: -.03em; color: transparent;
  -webkit-text-stroke: 1px var(--ash); margin-bottom: 18px; transition: -webkit-text-stroke-color .25s; }
.steps li:hover h3::before { -webkit-text-stroke-color: var(--white); }

.row h3 { text-wrap: balance; }
.display .dim { white-space: nowrap; }

/* ---- v3 desktop ---- */
.hero .lede { max-width: 44ch; }
.room svg { border-width: 1px; }
.build .viz { align-self: flex-start; }
.build .label { color: var(--smoke); }
.build.focal .label { color: #5a5a5a; }
.build h3 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); letter-spacing: -.02em; line-height: 1; }
.build { min-height: 340px; }
.build:nth-child(1), .build:nth-child(2) { min-height: 380px; }
.row p { font-size: 1.0625rem; }
#builds .sec-head .title { font-size: clamp(3rem, 6vw, 5.6rem); }