/* Disrepair showcase site. One stylesheet: design tokens and the small website drawing, then the page's sections.
   Built in the lab at .scratch/lab/hero/ (see .scratch/lab/DECISIONS.md for what was picked and why). */
/* Round 4: the picked identity (ink navy, mint, Bricolage + Karla, centred). What varies per page is only the drawing of the website and how the counts attach to it. */
@font-face { font-family: 'Bricolage'; src: url('fonts/bricolage-grotesque-var.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('fonts/karla-latin-wght-normal.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
:root { --bg: oklch(0.2 0.035 255); --panel: oklch(0.255 0.04 255); --part: oklch(0.32 0.04 255); --part-2: oklch(0.4 0.04 255); --ink: oklch(0.96 0.012 220); --ink-2: oklch(0.8 0.025 235); --ink-3: oklch(0.66 0.03 245); --mint: oklch(0.87 0.14 168); --on: oklch(0.2 0.035 255); --rule: oklch(0.96 0.012 220 / .18); --shadow: oklch(0.1 0.03 255 / .5); }
@media (prefers-color-scheme: light) { :root { --bg: oklch(0.965 0.012 225); --panel: oklch(0.995 0.004 225); --part: oklch(0.925 0.016 235); --part-2: oklch(0.86 0.025 235); --ink: oklch(0.22 0.04 255); --ink-2: oklch(0.4 0.035 255); --ink-3: oklch(0.52 0.03 255); --mint: oklch(0.5 0.13 168); --on: oklch(0.99 0.004 225); --rule: oklch(0.22 0.04 255 / .18); --shadow: oklch(0.22 0.04 255 / .16); } }
* { box-sizing: border-box; margin: 0; } html, body { min-height: 100dvh; }
body { background: var(--bg); color: var(--ink); font: 400 1rem/1.5 'Karla', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 44px; }
nav.main { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.brand { font: 700 1.375rem 'Bricolage'; letter-spacing: -0.03em; } .brand span { color: var(--mint); }
nav.main ul { display: flex; gap: 8px; list-style: none; padding: 0; font-size: .9375rem; } nav.main ul a { padding: 8px 14px; border-radius: 10px; color: var(--ink-2); } nav.main ul a:hover { background: var(--panel); color: var(--ink); }
.top { text-align: center; }
h1 { font: 700 clamp(2rem, 3.6vw, 3rem)/1.05 'Bricolage'; letter-spacing: -0.035em; max-width: 21em; margin: 0 auto; text-wrap: balance; }
h1 em { font-style: normal; color: var(--mint); }
.sub { margin: 10px auto 0; font-size: 1.0625rem; color: var(--ink-2); max-width: 52ch; }
.cta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn { height: 46px; padding: 0 20px; border-radius: 12px; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.btn.solid { background: var(--mint); color: var(--on); } .btn.soft { background: var(--panel); } .btn:active { transform: scale(.98); }
.btn code { font: 400 .8125rem ui-monospace, Consolas, monospace; } .btn small { font-size: .72rem; color: var(--ink-3); }
.said { margin: 10px auto 0; max-width: 80ch; min-height: 3em; text-align: center; font-size: .9375rem; color: var(--ink-2); } .said b { color: var(--ink); }
.where { padding: 4px 0 22px; text-align: center; font-size: .8125rem; color: var(--ink-3); } .where b { color: var(--ink-2); }

/* ---- the little website. Every part carries data-p so a count can attach to it. ---- */
.site { background: var(--panel); color: var(--ink-3); font-size: 10px; line-height: 1.2; display: grid; gap: 7px; padding: 9px; }
.site [data-p] { position: relative; border-radius: 6px; transition: box-shadow .25s, background .25s; }
.site [data-p].hot { box-shadow: 0 0 0 2px var(--mint); }
.s-nav { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; background: var(--part); }
.s-logo { display: flex; align-items: center; gap: 6px; font: 700 11px 'Bricolage'; color: var(--ink); letter-spacing: -0.01em; } .s-logo i { width: 12px; height: 12px; border-radius: 50%; background: var(--mint); }
.s-links { display: flex; gap: 9px; font-weight: 500; } .s-links u { text-decoration: none; } .s-links u.dead { text-decoration: line-through; text-decoration-color: var(--mint); color: var(--ink-2); }
.s-hero { min-height: 96px; padding: 12px; display: grid; align-content: end; gap: 5px; overflow: hidden; background: linear-gradient(120deg, var(--part-2), var(--part)); }
.s-hero::before { content: ''; position: absolute; right: -14px; top: -18px; width: 96px; height: 96px; border-radius: 50%; background: var(--part); box-shadow: 0 0 0 9px color-mix(in oklch, var(--ink) 9%, transparent), inset 0 0 0 16px color-mix(in oklch, var(--ink) 7%, transparent); }
.s-hero b { display: block; height: 9px; border-radius: 4px; background: var(--ink); opacity: .85; width: 58%; } .s-hero b + b { width: 40%; opacity: .5; height: 6px; }
.s-hero em { position: absolute; left: 12px; top: 10px; font-style: normal; font-weight: 600; color: var(--ink-2); }
.s-two { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.s-phone, .s-basics { padding: 8px; background: var(--part); display: grid; gap: 4px; align-content: center; }
.s-phone strong { font: 700 12px 'Bricolage'; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; } .s-basics span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-basics .gone { opacity: .35; border-bottom: 1.5px dashed var(--ink-3); width: 70%; height: 9px; }
.s-menu { padding: 8px; background: var(--part); display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 6px; align-items: center; }
.s-menu i { height: 26px; border-radius: 4px; background: var(--part-2); } .s-menu span { font-weight: 700; color: var(--ink); padding: 3px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--rule); white-space: nowrap; }
.s-code { padding: 6px 8px; background: color-mix(in oklch, var(--bg) 60%, var(--part)); font: 400 9px/1.35 ui-monospace, Consolas, monospace; white-space: nowrap; overflow: hidden; } .s-code span { color: var(--ink-2); }
.s-foot { padding: 5px 8px; display: flex; justify-content: space-between; }
/* browser chrome */
.chrome { background: var(--part); padding: 7px 9px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; align-items: center; font-size: 10px; color: var(--ink-3); }
.lights { display: flex; gap: 4px; } .lights i { width: 7px; height: 7px; border-radius: 50%; background: var(--part-2); }
.tab { justify-self: start; max-width: 100%; display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px 6px 0 0; background: var(--panel); color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; position: relative; } .tab i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; }
.url { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: var(--panel); position: relative; white-space: nowrap; overflow: hidden; }
.lock { width: 7px; height: 6px; border-radius: 1.5px; background: currentColor; position: relative; flex: none; margin-top: 3px; } .lock::before { content: ''; position: absolute; left: 1px; top: -4px; width: 5px; height: 5px; border-radius: 3px 3px 0 0; box-shadow: inset 0 0 0 1.3px currentColor; }

/* leader lines: a hairline from a part of the page out to what is checked there */
.fig { position: relative; margin: 20px auto 0; max-width: 1200px; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leaders path { fill: none; stroke: var(--ink-3); stroke-width: 1.25; opacity: .55; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset .7s cubic-bezier(.16,1,.3,1), stroke .2s, opacity .2s; }
.leaders circle { fill: var(--mint); opacity: 0; transition: opacity .3s .4s; }
.leaders g.on path { stroke-dashoffset: 0; } .leaders g.on circle { opacity: 1; } .leaders g.hot path { stroke: var(--mint); opacity: 1; }

/* The full landing page in the picked design (round 3 no. 2, round 4 no. 2). Tokens, type, buttons and the little website come from ../r4/r4.css. */
@font-face { font-family: 'Shoulders'; src: url('fonts/big-shoulders-display-var.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
/* the lockup: the slipped-block icon in mint, the name in tall capitals (DECISIONS.md, logo pick 5) */
.brand { display: inline-flex; align-items: center; font: 800 1.75rem/1 'Shoulders', 'Bricolage', sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.brand svg { height: .98em; width: auto; margin-right: .28em; color: var(--mint); flex: none; }
html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 12px; z-index: 10; background: var(--mint); color: var(--on); padding: 8px 14px; border-radius: 10px; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
section { scroll-margin-top: 24px; }
h2 { font: 700 clamp(1.75rem, 3vw, 2.5rem)/1.08 'Bricolage'; letter-spacing: -0.03em; text-wrap: balance; }
h3 { font: 700 1.25rem/1.25 'Bricolage'; letter-spacing: -0.02em; }
.lede { margin-top: 12px; font-size: 1.0625rem; color: var(--ink-2); max-width: 60ch; }
.cap { margin-top: 10px; font-size: .8125rem; color: var(--ink-3); } .cap.center { text-align: center; margin-top: 18px; } .cap b { color: var(--ink-2); }
main > section:not(.hero) { margin-top: 112px; }

/* 1. hero: headline, one line of pitch, two actions, then the phone with what is checked on either side. No figures, no text under the phone. */
.hero { padding-bottom: 28px; }
.hero .top { padding-top: 10px; }
.hero h1 { font-size: clamp(2.125rem, 4.1vw, 3.5rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 17em; }
.hero .sub { margin-top: 14px; font-size: 1.1875rem; line-height: 1.45; max-width: 76ch; color: var(--ink-2); }
.hero .cta { margin-top: 22px; }
.hero .fig { height: 468px; margin-top: 34px; max-width: 1120px; }
.phone { position: absolute; left: 50%; top: 0; width: 262px; height: 468px; margin-left: -131px; border-radius: 38px; padding: 10px; background: var(--part); box-shadow: 0 0 0 1.5px var(--rule), 0 30px 60px -24px var(--shadow); }
.screen { height: 100%; border-radius: 29px; overflow: hidden; background: var(--panel); display: flex; flex-direction: column; }
.p-top { padding: 13px 12px 7px; display: grid; gap: 6px; font-size: 11px; color: var(--ink-3); } .p-top::before { content: ''; justify-self: center; width: 60px; height: 5px; border-radius: 3px; background: var(--part-2); margin-bottom: 4px; }
.p-top .ptitle { justify-self: center; font-weight: 600; color: var(--ink-2); padding: 1px 6px; border-radius: 5px; position: relative; }
.phone .site { font-size: 11px; padding: 4px 10px 10px; gap: 7px; flex: 1; align-content: start; } .phone .s-links { display: none; } .phone .s-logo { font-size: 12px; } .phone .s-hero { min-height: 104px; } .phone .s-phone strong { font-size: 13px; }
.phone .s-menu { grid-template-columns: repeat(2, 1fr) auto; } .phone .s-menu i:nth-child(3) { display: none; } .phone .s-menu i { height: 30px; }
.phone .s-two { grid-template-columns: 1fr; } .phone .s-phone { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 10px; } .phone .s-basics { padding: 10px; } .phone .s-code { padding: 8px; }
.check { position: absolute; width: 290px; transform: translateY(-12px); opacity: 0; transition: opacity .45s; cursor: default; }
.check.on { opacity: 1; } .check.l { text-align: right; }
.check h3 { font: 700 1.125rem/1.2 'Bricolage'; letter-spacing: -0.02em; transition: color .2s; } .check.hot h3 { color: var(--mint); }
.check p { margin-top: 4px; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
.leaders circle { r: 4px; }
@media (max-width: 1100px) { .check { width: 230px; } .check h3 { font-size: 1rem; } .check p { font-size: .875rem; } }
@media (max-width: 900px) {
  .hero .fig { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; max-width: 620px; } .phone { position: relative; left: 0; margin: 0 auto 10px; grid-column: 1 / -1; }
  .check, .check.l { position: static; transform: none; width: auto; text-align: left; } .leaders { display: none; }
}
@media (max-width: 767px) { .hero .top { padding-top: 8px; } .hero .sub { font-size: 1.0625rem; } .hero .fig { grid-template-columns: 1fr; margin-top: 30px; gap: 18px; } .hero { padding-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .check { transition: none; } }

/* 2. how it works: one panel. Drawings across the top (the scan in the middle is the largest), the words under each drawing inside the same panel. */
.how h2, .uses h2, .gather h2 { text-align: center; }
.lede.center { margin-left: auto; margin-right: auto; text-align: center; }
.pipe { margin-top: 36px; background: var(--panel); border-radius: 28px; padding: 44px 32px 40px; display: grid; grid-template-columns: 290px 1fr 380px 1fr 290px; column-gap: 0; row-gap: 0; align-items: center; justify-content: center; }
.draw { display: grid; justify-items: center; gap: 12px; min-height: 348px; align-content: center; width: 100%; opacity: 0; transform: translateY(12px); transition: opacity .6s, transform .6s cubic-bezier(.16,1,.3,1); }
.pipe.in .draw { opacity: 1; transform: none; } .pipe.in .d2 { transition-delay: .3s; } .pipe.in .d3 { transition-delay: .6s; }
.join { justify-self: center; width: 12px; height: 20px; background: var(--ink-3); opacity: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateX(-4px); transition: opacity .5s .25s, transform .5s .25s; }
.pipe.in .join { opacity: .45; transform: none; }
.tiny { font-size: .8125rem; color: var(--ink-3); }

/* drawing 1: the search, the map, two listings */
.search { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; padding: 9px 16px 9px 13px; border-radius: 99px; background: var(--part); color: var(--ink); white-space: nowrap; }
.search i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink-3); position: relative; flex: none; } .search i::after { content: ''; position: absolute; right: -4px; bottom: -3px; width: 6px; height: 2px; background: var(--ink-3); transform: rotate(45deg); border-radius: 1px; }
.map { position: relative; width: 100%; max-width: 250px; aspect-ratio: 5 / 3.2; border-radius: 16px; overflow: hidden; background:
  linear-gradient(var(--part-2) 0 0) 0 34% / 100% 3px no-repeat, linear-gradient(var(--part-2) 0 0) 0 72% / 100% 3px no-repeat, linear-gradient(var(--part-2) 0 0) 28% 0 / 3px 100% no-repeat, linear-gradient(var(--part-2) 0 0) 66% 0 / 3px 100% no-repeat, var(--part); }
.map i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in oklch, var(--mint) 22%, transparent); transform: scale(0); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.pipe.in .map i { transform: none; }
.map i:nth-child(1) { left: 12%; top: 18%; transition-delay: .2s; } .map i:nth-child(2) { left: 40%; top: 12%; transition-delay: .28s; } .map i:nth-child(3) { left: 78%; top: 20%; transition-delay: .36s; } .map i:nth-child(4) { left: 18%; top: 50%; transition-delay: .44s; } .map i:nth-child(5) { left: 46%; top: 48%; transition-delay: .52s; } .map i:nth-child(6) { left: 82%; top: 54%; transition-delay: .6s; } .map i:nth-child(7) { left: 10%; top: 82%; transition-delay: .68s; } .map i:nth-child(8) { left: 50%; top: 84%; transition-delay: .76s; } .map i:nth-child(9) { left: 74%; top: 80%; transition-delay: .84s; }
.map i:nth-child(3), .map i:nth-child(7) { background: none; box-shadow: inset 0 0 0 2px var(--ink-3); }
.listing { width: 100%; max-width: 250px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--part); font-size: .78rem; font-weight: 600; color: var(--mint); } .listing b { height: 8px; border-radius: 4px; background: var(--part-2); width: 80%; }
.listing.off { color: var(--ink-3); font-weight: 500; background: none; box-shadow: inset 0 0 0 1.5px var(--rule); }

/* drawing 2: the scan. A real little site inside a phone; a beam reads it top to bottom and notes appear beside the parts. */
.queue { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.ghost { position: absolute; top: 50%; width: 96px; height: 188px; margin-top: -94px; border-radius: 20px; background: var(--part); opacity: .35; }
.ghost:first-child { right: calc(50% + 54px); } .ghost:last-child { left: calc(50% + 54px); }
.scanphone { position: relative; z-index: 1; width: 176px; height: 330px; border-radius: 28px; padding: 8px; background: var(--part); box-shadow: 0 0 0 2px var(--mint), 0 24px 44px -20px var(--shadow); flex: none; }
.scanscreen { height: 100%; border-radius: 21px; overflow: hidden; background: var(--panel); }
.scanscreen .p-top { padding: 9px 8px 4px; gap: 4px; font-size: 8px; } .scanscreen .p-top::before { width: 40px; height: 4px; margin-bottom: 2px; } .scanscreen .url { padding: 3px 7px; }
.scanscreen .site { font-size: 8px; padding: 3px 7px 7px; gap: 5px; } .scanscreen .s-links { display: none; } .scanscreen .s-logo { font-size: 9px; } .scanscreen .s-logo i { width: 9px; height: 9px; } .scanscreen .s-nav { padding: 5px 6px; }
.scanscreen .s-hero { min-height: 66px; padding: 8px; } .scanscreen .s-hero::before { width: 60px; height: 60px; right: -10px; top: -12px; } .scanscreen .s-hero b { height: 6px; } .scanscreen .s-hero b + b { height: 4px; }
.scanscreen .s-two { grid-template-columns: 1fr; gap: 5px; } .scanscreen .s-phone, .scanscreen .s-basics { padding: 6px; } .scanscreen .s-phone { grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; } .scanscreen .s-phone strong { font-size: 9px; }
.scanscreen .s-code { padding: 5px 6px; font-size: 7px; } .scanscreen .s-foot { padding: 3px 6px; }
.scanscreen .s-menu { padding: 6px; grid-template-columns: repeat(2, 1fr) auto; gap: 4px; } .scanscreen .s-menu i:nth-child(3) { display: none; } .scanscreen .s-menu i { height: 18px; } .scanscreen .s-menu span { padding: 2px 4px; }
.scanscreen [data-p].seen { box-shadow: 0 0 0 1.5px var(--mint); }
.beam { position: absolute; left: 8px; right: 8px; top: 8px; height: 2px; background: var(--mint); box-shadow: 0 0 0 6px color-mix(in oklch, var(--mint) 18%, transparent); opacity: 0; border-radius: 1px; }
.note { position: absolute; z-index: 2; width: max-content; font-size: .75rem; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 99px; white-space: nowrap; transform: translateY(-50%) scale(.6); opacity: 0; transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1); }
.note.on { opacity: 1; transform: translateY(-50%); }
.note.bad { background: var(--mint); color: var(--on); } .note.fine { background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--rule); }


/* drawing 3: the list, worst first, and the ones set aside */
.rows { width: 100%; max-width: 270px; display: grid; gap: 8px; }
.lrow { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--part); font-size: .8125rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; } .lrow span { overflow: hidden; text-overflow: ellipsis; }
.lrow i { width: 14px; height: 18px; border-radius: 4px; background: var(--part-2); } .lrow em { font-style: normal; font-weight: 700; font-size: .72rem; color: var(--mint); } .lrow em.ok { color: var(--ink-3); font-weight: 500; }
.lrow.top { box-shadow: 0 0 0 2px var(--mint); color: var(--ink); font-weight: 700; } .lrow.top i { background: var(--mint); } .lrow:nth-child(2) { opacity: .9; } .lrow:nth-child(3) { opacity: .75; } .lrow:nth-child(4) { opacity: .55; }
.aside { width: 100%; max-width: 270px; margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--ink-3); } .aside i { width: 14px; height: 18px; border-radius: 4px; border: 1.5px dashed var(--ink-3); opacity: .7; flex: none; } .aside span { margin-left: 4px; }

/* the words, under each drawing, inside the same panel */
.say { align-self: start; justify-self: center; width: 100%; max-width: 290px; margin-top: 26px; padding-top: 18px; border-top: 2px solid var(--mint); position: relative; } .s1 { grid-column: 1; } .s2 { grid-column: 3; } .s3 { grid-column: 5; }
.say h3 { font-size: 1.1875rem; line-height: 1.25; }
.say p { margin-top: 8px; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }

/* 3. what it is good for: four cells, a few words and a small drawing each */
.uses .lede.center, .gather .lede.center { margin-bottom: 36px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.cell { border-radius: 24px; padding: 32px; background: var(--panel); min-height: 236px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; } .cell p { margin-top: 10px; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; max-width: 38ch; }
.cell.a { grid-column: span 7; background: var(--mint); color: var(--on); } .cell.a p { color: color-mix(in oklch, var(--on) 80%, transparent); } .cell.b { grid-column: span 5; } .cell.c { grid-column: span 5; } .cell.d { grid-column: span 7; }
.d-list { display: grid; gap: 8px; width: 190px; } .d-list i { height: 34px; border-radius: 9px; background: color-mix(in oklch, var(--on) 14%, transparent); } .d-list i:first-child { background: var(--on); } .d-list i:nth-child(3) { opacity: .55; }
.d-proof { position: relative; width: 96px; border-radius: 16px; padding: 10px; background: var(--part); display: grid; gap: 7px; } .d-proof span { height: 22px; border-radius: 5px; background: var(--part-2); } .d-proof span:first-child { height: 36px; } .d-proof .hit { box-shadow: 0 0 0 2px var(--mint); background: color-mix(in oklch, var(--mint) 22%, var(--part-2)); }
.d-proof u { position: absolute; left: -26px; top: 50%; width: 30px; height: 2px; background: var(--mint); margin-top: 6px; } .d-proof u::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); }
.d-again { display: flex; align-items: center; gap: 12px; }
.d-again .pg { width: 62px; border-radius: 12px; padding: 9px 8px; background: var(--part); display: grid; gap: 6px; }
.d-again .pg i { height: 11px; border-radius: 4px; background: var(--part-2); } .d-again .pg i.f { background: var(--mint); }
.d-again .pg:last-child { opacity: .85; }
.d-again .wedge { width: 10px; height: 16px; background: var(--ink-3); opacity: .45; clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; }
.d-redact { display: grid; gap: 9px; width: 230px; } .d-redact i { height: 14px; border-radius: 7px; background: var(--part-2); } .d-redact i:nth-child(1) { width: 58%; background: var(--ink); } .d-redact i:nth-child(2) { width: 100%; } .d-redact i:nth-child(3) { width: 76%; }

/* 4. how the information is gathered: four promises, ruled */
.gather { text-align: center; }
.promises { margin: 0 auto 36px; max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 34px; text-align: left; }
.promises div { position: relative; padding-left: 26px; }
.promises div::before { content: ''; position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 3px; background: var(--mint); }
.promises dt { font: 700 1.1875rem/1.25 "Bricolage"; letter-spacing: -0.02em; } .promises dd { margin: 8px 0 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }

/* 5. the case study, advertised once */
.teaser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: center; background: var(--panel); border-radius: 28px; padding: 48px; transition: box-shadow .2s; } .teaser:hover { box-shadow: 0 0 0 2px var(--mint); }
.kicker { font-weight: 700; color: var(--mint); margin-bottom: 10px; } .teaser p { color: var(--ink-2); margin: 12px 0 22px; }
.teaser-figs { display: grid; gap: 26px; } .tfig h3 { font-size: 1rem; display: flex; justify-content: space-between; gap: 12px; } .tfig h3 span { font: 400 .8125rem "Karla"; color: var(--ink-3); letter-spacing: 0; }
.tbar { margin-top: 10px; display: flex; height: 26px; border-radius: 8px; overflow: hidden; gap: 2px; } .tbar i { display: block; height: 100%; background: repeating-linear-gradient(135deg, var(--part) 0 4px, var(--part-2) 4px 5px); } .tbar i.m { background: var(--mint); }

/* 6. final + footer */
.final { text-align: center; padding-bottom: 96px; } .final .lede { margin-left: auto; margin-right: auto; } .final .cta { margin-top: 24px; }
.foot { border-top: 2px solid var(--rule); padding-top: 22px; padding-bottom: 40px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: .8125rem; color: var(--ink-3); }
.btn.solid small { color: inherit; opacity: .7; }

@media (max-width: 900px) {
  .pipe { grid-template-columns: 1fr; padding: 32px 24px; } .draw { min-height: 0; padding: 8px 0; } .say, .s1, .s2, .s3 { grid-column: 1; margin-top: 22px; }
  .d1 { order: 1; } .s1 { order: 2; } .j1 { order: 3; } .d2 { order: 4; } .s2 { order: 5; } .j2 { order: 6; } .d3 { order: 7; } .s3 { order: 8; }
  .queue { flex-wrap: wrap; gap: 8px; } .ghost { display: none; } .scanphone { margin: 0 calc(50% - 88px) 12px; } .note, .note.on { position: static; transform: none; } .note { opacity: .25; } .note.on { opacity: 1; }
  .join { width: 20px; height: 12px; clip-path: polygon(0 0, 100% 0, 50% 100%); margin: 24px 0; transform: translateY(-4px); } .pipe.in .join { transform: none; }
  .cell.a, .cell.b, .cell.c, .cell.d { grid-column: 1 / -1; min-height: 0; } .promises { grid-template-columns: 1fr 1fr; row-gap: 28px; } .teaser { grid-template-columns: 1fr; row-gap: 32px; padding: 28px; }
}
@media (max-width: 767px) {
  nav.main ul li:nth-child(-n+3) { display: none; } nav.main ul a { padding: 8px 10px; }
  main > section:not(.hero) { margin-top: 76px; } .how h2, .uses h2, .gather h2 { text-align: left; } .gather { text-align: left; }
  .cell { grid-template-columns: 1fr; row-gap: 22px; padding: 24px; } .d-proof { margin-left: 30px; } .promises { grid-template-columns: 1fr; row-gap: 26px; } .foot { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) { .draw, .join, .map i, .note { transition: none; } }

/* ---- case study ---- */
/* docs/case-study.html only, so every rule here is under .cs and nothing above is touched.
   It reuses the tokens, the type scale, .wrap, nav.main, .brand, .btn, .lede, .cap, .kicker,
   .promises, .say, .tfig/.tbar, .join, .tiny and .foot, and adds only the parts the case
   study has and the landing page does not: the fact strip, the seeded draw, the two
   tallies, the band ladders, the banded-site list and the verbatim rank output. */
.cs nav.main ul a[aria-current] { background: var(--panel); color: var(--ink); }
.cs p code, .cs dd code { font: 400 .9em ui-monospace, Consolas, monospace; background: var(--part); padding: 1px 6px; border-radius: 6px; color: var(--ink); }
/* a section head reads across the full measure: the title on the left, what to expect on the right */
.cs .head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
.cs .head .lede { margin-top: 0; max-width: 56ch; }

/* 1. hero: the headline, then the facts of the two runs */
.cs .hero { padding-bottom: 0; }
.cs .hero h1 { max-width: 15em; }
.cs .facts { margin: 42px auto 0; max-width: 1060px; background: var(--panel); border-radius: 28px; padding: 34px 38px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; row-gap: 26px; }
.cs .facts > div { position: relative; padding-left: 24px; }
.cs .facts > div::before { content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 3px; background: var(--mint); }
.cs .facts dt { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cs .facts dd { margin: 5px 0 0; font: 700 1.125rem/1.3 'Bricolage'; letter-spacing: -0.02em; }

/* 2. the seeded draw: the pools it drew from, and what came out */
.cs .drawpanel { margin-top: 34px; background: var(--panel); border-radius: 28px; padding: 32px 34px 30px; }
.cs .seedline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-bottom: 24px; border-bottom: 2px solid var(--rule); }
.cs .seedline .lbl { font-weight: 700; }
.cs .seedline code { font: 400 .875rem ui-monospace, Consolas, monospace; background: var(--part); padding: 7px 13px; border-radius: 9px; color: var(--ink); }
.cs .seedline .tiny { flex: 1 1 auto; text-align: right; }
.cs .dgrid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.cs .dcol { display: grid; justify-items: center; align-content: start; gap: 14px; width: 100%; text-align: center; }
.cs .chips { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 5px; max-width: 216px; min-height: 39px; }
.cs .chips i { width: 12px; height: 17px; border-radius: 3px; background: var(--part-2); }
.cs .chips i.on { background: var(--mint); }
.cs .dcol .pool { font-size: .875rem; color: var(--ink-2); }
.cs .dcol .join { width: 18px; height: 11px; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: none; opacity: .45; margin: 0; }
.cs .pick { width: 100%; max-width: 280px; padding: 16px 18px; border-radius: 16px; background: var(--part); display: grid; justify-items: center; gap: 3px; }
.cs .pick .val { font: 700 1.1875rem/1.25 'Bricolage'; letter-spacing: -0.02em; }
.cs .pick .val.gone { font-size: 1rem; color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--mint); }
.cs .pick .val.use { color: var(--mint); }
.cs .pick .tiny { margin-top: 5px; }
.cs .drawpanel .cap { margin-top: 26px; }
.cs .swap { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; row-gap: 22px; align-items: start; }
.cs .swap p { margin-top: 12px; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }
.cs .quote { margin: 0; padding: 24px 28px; border-radius: 20px; background: var(--panel); box-shadow: inset 4px 0 0 var(--mint); font-size: 1.0625rem; line-height: 1.55; }

/* 3 and 4. the two runs side by side: the tally panel, then the band panel */
.cs .twin { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cs .panel { background: var(--panel); border-radius: 24px; padding: 30px 32px; }
.cs .tfig h3 { font-size: 1.25rem; align-items: baseline; }
.cs .tfig h3 span { white-space: nowrap; }
.cs .tbar { margin-top: 18px; height: 34px; }
/* the six groups. Only the last was measured, so only the last is mint. */
.cs .g-excluded { background: var(--part); box-shadow: inset 0 0 0 1.5px var(--rule); }
.cs .g-noWebsiteRecorded { background: var(--part-2); }
.cs .g-blocked { background: repeating-linear-gradient(135deg, var(--part-2) 0 4px, var(--part) 4px 8px); }
.cs .g-unreached { background: repeating-linear-gradient(0deg, var(--part-2) 0 3px, var(--part) 3px 6px); }
.cs .g-unconfirmed { background: repeating-linear-gradient(90deg, var(--part-2) 0 3px, var(--part) 3px 6px); }
.cs .g-measured { background: var(--mint); }
.cs .keys { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.cs .keys li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: .875rem; color: var(--ink-2); }
.cs .keys li.lead { color: var(--ink); font-weight: 700; }
.cs .keys i { width: 14px; height: 14px; border-radius: 4px; }
.cs .keys .n { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cs .panel .cap { margin-top: 20px; padding-top: 18px; border-top: 2px solid var(--rule); }
.cs .bandrows { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cs .bandrows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: .875rem; }
.cs .bandrows .who { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs .bandrows .track { height: 16px; border-radius: 6px; background: var(--part); overflow: hidden; }
.cs .bandrows .track i { display: block; height: 100%; border-radius: 6px; background: var(--mint); width: calc(var(--w, 1) * 100%); opacity: var(--k, 1); }
.cs .bandrows .val { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 5. how to read it: three notes, ruled in mint like the landing page's steps */
.cs .reads { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cs .reads .say { max-width: none; margin-top: 0; justify-self: stretch; }

/* 6. every banded site */
.cs .field-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; }
.cs .field-head .lede { margin-top: 12px; }
.cs .seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel); }
.cs .seg button { padding: 9px 20px; border-radius: 10px; font-weight: 700; font-size: .9375rem; color: var(--ink-3); transition: background .2s, color .2s; }
.cs .seg button[aria-pressed="true"] { background: var(--mint); color: var(--on); }
.cs .sites { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cs .sites li { display: grid; grid-template-columns: 216px minmax(0, 1fr); column-gap: 24px; row-gap: 6px; align-items: baseline; padding: 12px 20px; border-radius: 14px; background: var(--panel); }
.cs .sites .meta { display: flex; align-items: center; gap: 10px; }
.cs .sites .band { flex: none; padding: 4px 9px; border-radius: 7px; background: var(--part); color: var(--ink-2); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.cs .sites li.worst .band { background: var(--mint); color: var(--on); }
.cs .sites .sid { font: 400 .8125rem ui-monospace, Consolas, monospace; color: var(--ink-3); }
/* the finding and the measurement behind it sit on one line while they fit; a caution takes its own */
.cs .sites .what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 16px; }
.cs .sites .warn { flex-basis: 100%; }
.cs .sites .rule { font-weight: 700; }
.cs .sites .rule.none { font-weight: 400; color: var(--ink-3); }
.cs .sites .ev { font: 400 .8125rem/1.5 ui-monospace, Consolas, monospace; color: var(--ink-2); overflow-wrap: anywhere; }
.cs .sites .warn { font-size: .8125rem; line-height: 1.45; color: var(--mint); }

/* 7. the limits */
.cs .limits h2 { text-align: center; }
.cs .limits .lede.center { margin-bottom: 40px; }
.cs .promises { margin-top: 0; margin-bottom: 0; }

/* 8. the unedited rank output */
.cs .raw { margin-top: 16px; background: var(--panel); border-radius: 20px; overflow: hidden; }
.cs .raw summary { display: flex; align-items: center; gap: 13px; padding: 18px 26px; cursor: pointer; list-style: none; }
.cs .raw summary::-webkit-details-marker { display: none; }
.cs .raw summary::before { content: ''; flex: none; width: 10px; height: 14px; background: var(--mint); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .2s; }
.cs .raw[open] summary::before { transform: rotate(90deg); }
.cs .raw .place { font: 700 1.125rem 'Bricolage'; letter-spacing: -0.02em; }
.cs .raw summary .tiny { margin-left: auto; }
.cs pre.report { margin: 0; padding: 4px 26px 26px; overflow-x: auto; white-space: pre; font: 400 .75rem/1.65 ui-monospace, Consolas, monospace; color: var(--ink-2); }

@media (max-width: 1100px) {
  .cs .reads { grid-template-columns: 1fr; gap: 26px; }
  .cs .sites li { grid-template-columns: 200px minmax(0, 1fr); column-gap: 18px; }
}
@media (max-width: 900px) {
  .cs .head { grid-template-columns: 1fr; align-items: start; } .cs .head .lede { margin-top: 12px; max-width: 60ch; }
  .cs .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; padding: 30px 28px; }
  .cs .dgrid { grid-template-columns: 1fr; gap: 26px; }
  .cs .twin { grid-template-columns: 1fr; }
  .cs .swap { grid-template-columns: 1fr; }
  .cs .sites li { grid-template-columns: 1fr; row-gap: 8px; }
}
@media (max-width: 767px) {
  .cs .facts { grid-template-columns: 1fr; margin-top: 32px; padding: 26px 24px; row-gap: 22px; }
  .cs .drawpanel { padding: 26px 22px; } .cs .panel { padding: 24px 22px; }
  .cs .seedline .tiny { flex-basis: 100%; text-align: left; }
  .cs .limits h2 { text-align: left; } .cs .limits .lede.center { margin-left: 0; text-align: left; }
  .cs .raw summary { padding: 16px 20px; flex-wrap: wrap; } .cs .raw summary .tiny { margin-left: 23px; }
  .cs pre.report { padding: 4px 20px 22px; }
  .cs .seg { width: 100%; } .cs .seg button { flex: 1; padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) { .cs .seg button, .cs .raw summary::before { transition: none; } }