/* look.css: the site's blocks, contrast, spacing and 80s accents (owner, 2026-10-06: "Our pages need more contrast, blocks and
spacing. Info is dense"; "Somewhere in the middle"). Loaded after styles.css and system.css on every page.
- Blocks: every band is a full-width block; the blocks alternate paper and a cool wash, the last ask is a dark block.
- Contrast: every text pair is pinned by test/look.test.ts (WCAG AA at least, AAA for body text).
- Spacing: one 4/8 scale (--s1..--s10); prose at most 65 characters wide.
- The 80s: a 1980s print ad (MOTION.md): chunky outlined cards and buttons with a hard offset shadow, a sunset rule under each
headline, and one retro grid on the dark block's bottom edge (below every line of text). Palette colors only, never the six old stripe colors, never bands of color.
- Motion: transform and opacity only; every animation sits inside prefers-reduced-motion:no-preference, and the reduce block
below turns every one of them off (test/look.test.ts checks both). */
:root{
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
--measure:65ch;
--block:#FBFAF6; --block-alt:#EDF4F7; --block-ink:#12202B;
--on-ink:#FBFAF6; --on-ink2:#C8D3DB; --on-ink-accent:#7CD3EE;
--edge:#17232E; --chunk-c:#0B141C;
--chunk:0 4px 0 var(--chunk-c); --chunk-sm:0 1px 0 var(--chunk-c); --chunk-lg:0 8px 0 var(--chunk-c);
--sunset:linear-gradient(90deg,#B3440C,#F29A5C 48%,#F2C14E);
--band-pad:clamp(64px,10vw,128px);
}
/* ── blocks: one idea per block, alternating backgrounds that run edge to edge (border-image paints past the column without
widening the page) ── */
main>.hero{padding-top:clamp(48px,7vw,72px)}
main>.section{border-top:0;padding-block:var(--band-pad);row-gap:var(--s5)}
main>.section:where(:nth-child(even of .section)){border-image:conic-gradient(var(--block-alt) 0 0) fill 0//0 100vw}
.band{row-gap:var(--s5)}
.band-head{gap:var(--s4)}
.band-body{gap:var(--s5)}
/* the kicker: a small outlined tag above each headline */
.band-head .kicker{justify-self:start;display:inline-flex;align-items:center;min-height:30px;padding:var(--s1) var(--s3);border:1.5px solid var(--water-deep);border-radius:999px;background:var(--card);color:var(--water-deep);font-size:12px;line-height:1.2}
/* the sunset rule under each band headline: decoration only (no text sits on it) */
.band-head h2::after{content:"";display:block;width:64px;height:6px;margin-top:var(--s5);border-radius:3px;background:var(--sunset);transform-origin:left center}
/* prose stays readable: about 65 characters a line */
.band .lead,.band-body>p,.ticks,.triad p,.prose-body,.callout,.faq,.timeline p,.steps p{max-width:var(--measure)}
.band .lead{font-size:clamp(19px,2.2vw,22px);line-height:1.5}
/* ── the disclosure: the band's detail behind one clear button (site-pages.ts `fold`) ── */
.fold{max-width:var(--measure);border:2px solid var(--edge);border-radius:16px;background:var(--card);box-shadow:var(--chunk)}
.band-wide .fold,.rulecards-band .fold{max-width:none}
.fold>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:56px;padding:var(--s3) var(--s5);border-radius:14px;cursor:pointer;font:700 17px/1.25 var(--sans);color:var(--ink)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";flex:none;width:10px;height:10px;margin-top:-4px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg)}
.fold[open]>summary::after{margin-top:4px;transform:rotate(225deg)}
.fold>summary:hover{background:var(--water-tint)}
.fold[open]>summary{border-bottom:1.5px solid var(--hair);border-radius:14px 14px 0 0}
.fold-body{padding:var(--s5)}
.fold-body>.cards,.fold-body>.triad,.fold-body>.timeline{margin:0}
.cards+.fold{margin-top:var(--s2)}
.fold-hero{width:100%;max-width:36em;box-shadow:var(--chunk-sm)}
.fold-hero>summary{min-height:48px;font-size:15px}
/* ── cards: chunky outline, hard shadow, they lift under the pointer ── */
.card>a,.card>div,.plan{border:2px solid var(--edge);border-radius:16px;box-shadow:var(--chunk)}
.card>a:hover{box-shadow:var(--chunk-lg)}
.card>a:active{box-shadow:var(--chunk-sm)}
.callout{border-radius:0 12px 12px 0}
/* ── buttons: chunky, 52px, a hard shadow that the press pushes in ── */
.btn{min-height:52px;border-radius:12px;box-shadow:var(--chunk)}
.btn:hover{background:#22313E}
.btn.btn-quiet{background:var(--card);box-shadow:inset 0 0 0 2px var(--ink),var(--chunk)}
.btn.btn-quiet:hover{background:var(--water-tint)}
.btn:active,.btn.btn-quiet:active{box-shadow:var(--chunk-sm)}
.btn.btn-quiet:active{box-shadow:inset 0 0 0 2px var(--ink),var(--chunk-sm)}
.masthead .btn{min-height:48px}
/* ── the state line: "Showing Utah rules. Change state"; the states open under it and wrap (render.ts stateBar) ── */
.state-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s4);padding:0;border:0;border-radius:0;box-shadow:none;background:none}
.state-bar>*{min-width:0;max-width:100%}
.state-more{flex:0 1 auto;min-width:0}
.state-more[open]{flex-basis:100%}
.state-more>summary{list-style:none;display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);min-height:44px;cursor:pointer;color:var(--ink2);border-radius:8px}
.state-more>summary::-webkit-details-marker{display:none}
.state-more>summary:focus-visible{outline:3px solid var(--water-glint);outline-offset:2px}
.state-more>summary .mi-s{margin:0}
.state-change{display:inline-flex;align-items:center;gap:6px;color:var(--water-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.state-change::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.state-more[open] .state-change::after{margin-top:3px;transform:rotate(225deg)}
.state-panel{display:grid;gap:var(--s3);margin:var(--s1) 0 var(--s3);padding:var(--s3) var(--s4);border:1.5px solid var(--rule);border-radius:12px;background:var(--paper-hi)}
.state-q{color:var(--ink);font-weight:600}
.state-picks{display:flex;flex-wrap:wrap;gap:var(--s2)}
.state-bar .state-pick .mi-s{margin-inline-end:6px}
.state-ask{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
/* ── the dark block: the last ask (the end cap; the home's closing band). Ink, a sunset and one retro grid. ── */
main>.endcap,.hero-chop~#start{position:relative;isolation:isolate;color:var(--on-ink);border-image:conic-gradient(var(--block-ink) 0 0) fill 0//0 100vw}
main>.endcap::before,.hero-chop~#start::before{content:"";position:absolute;inset:auto 0 0;height:calc(var(--band-pad) - var(--s2));z-index:-1;pointer-events:none;background:url("data:image/svg+xml,") center/100% 100% no-repeat}
/* the horizon: a sunset line where the grid meets the sky (decoration: no text sits on it) */
main>.endcap::after,.hero-chop~#start::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--band-pad) - var(--s2));height:3px;z-index:-1;pointer-events:none;background:var(--sunset);opacity:.8}
:is(main>.endcap,.hero-chop~#start) :is(h2,h3,b,strong,q,a:not(.btn)){color:var(--on-ink)}
:is(main>.endcap,.hero-chop~#start) :is(h2 em,.lead,.ask-why,.trial-line,.sales-line,p){color:var(--on-ink2)}
:is(main>.endcap,.hero-chop~#start) .kicker{background:transparent;border-color:var(--on-ink-accent);color:var(--on-ink-accent)}
:is(main>.endcap,.hero-chop~#start) .btn{background:var(--on-ink);color:var(--ink);box-shadow:0 4px 0 #000}
:is(main>.endcap,.hero-chop~#start) .btn:hover{background:#FFFFFF}
:is(main>.endcap,.hero-chop~#start) .btn.btn-quiet{background:transparent;color:var(--on-ink);box-shadow:inset 0 0 0 2px var(--on-ink),0 4px 0 #000}
:is(main>.endcap,.hero-chop~#start) :focus-visible{outline-color:var(--on-ink-accent)}
/* a fold opens as a paper card on the ink block: its words, links and quiet button go back to ink (out-ranking the on-ink rules above) */
:is(main>.endcap,.hero-chop~#start) .fold,:is(main>.endcap,.hero-chop~#start) .fold :is(*,a:not(.btn),.btn.btn-quiet){color:var(--ink)}
:is(main>.endcap,.hero-chop~#start) .fold .btn.btn-quiet{background:var(--card);box-shadow:inset 0 0 0 2px var(--ink),var(--chunk)}
:is(main>.endcap,.hero-chop~#start) .fold{box-shadow:0 4px 0 #000}
.endcap h2::after{content:"";display:block;width:64px;height:6px;margin:var(--s5) auto 0;border-radius:3px;background:var(--sunset)}
/* the footer opens with the same sunset rule */
.foot{position:relative;border-top:0;padding-top:var(--s7)}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:2px;background:var(--sunset)}
/* ── phones: the same blocks, a little tighter ── */
@media (max-width:760px){
:root{--band-pad:var(--s8)}
.fold>summary{padding:var(--s3) var(--s4);font-size:16px}
.fold-body{padding:var(--s4)}
}
/* ── micro motion (MOTION.md: teach, never decorate for its own sake). Transform and opacity only. ── */
@media (prefers-reduced-motion:no-preference){
.btn{transition:transform var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px);transition-duration:60ms}
.card>a{transition:transform var(--t-base) var(--ease-snap)}
.card>a:hover{transform:translateY(-4px)}
.card>a:active{transform:translateY(3px)}
.card>a:hover .art{animation:wiggle .7s ease-in-out}
.fold>summary::after{transition:transform var(--t-base) var(--ease-snap)}
.fold[open]>.fold-body{animation:more-open var(--t-base) var(--ease)}
.band-head h2::after{transition:transform var(--t-story) var(--ease) 150ms}
.js-anim .band-head[data-anim]:not(.in) h2::after{transform:scaleX(0)}
}
@keyframes more-open{from{opacity:0;transform:translateY(-6px)}}
/* reduced motion: the final state at once, nothing moves */
@media (prefers-reduced-motion:reduce){
.btn,.card>a,.fold>summary::after,.band-head h2::after,.fold-body{transition:none!important;animation:none!important}
.btn:hover,.btn:active,.card>a:hover,.card>a:active{transform:none!important}
.card>a:hover .art{animation:none!important}
}
/* ── fit and wrapping (layout audit 2026-10-10; measured and pinned in test/layout-fit.test.ts) ── */
/* long URLs/emails break instead of widening a grid item (page was 289 px too wide at 320); a band's column is its own width */
body{overflow-wrap:break-word}
:where(p,li:not(.card,.hc),dd,td,th,figcaption,blockquote,cite,small,.cite,.hl-cite,.fine,.callout) a,:where(.cite,.hl-cite,.fine,code,kbd){overflow-wrap:anywhere}
.band-body{grid-template-columns:minmax(0,1fr)}
.band-body>*,.prose-body>*{min-width:0}
.county-links.tx-area-links{grid-template-columns:repeat(auto-fill,minmax(min(17em,100%),1fr))}
/* "line line" headings: the italic line balances on its own (no lone last word); prose avoids one-word last lines.
Not the state bar: its chips are not prose, and pretty there made its late line shift the page 10x more. */
:is(h1,h2,h3) br+em{display:block}
:is(p,li,dd,figcaption,blockquote,.callout):not(.state-bar *){text-wrap:pretty}
.btn{text-wrap:balance}
/* every in-page target clears the sticky header (60-64 px) */
html{scroll-padding-top:76px}
section[id]{scroll-margin-top:0}