*,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; } h1,h2,h3,h4,p,figure{ margin:0; } ul,ol{ margin:0; padding:0; list-style:none; } button,input{ font:inherit; color:inherit; } /* latin subsets. the previous files were the VIETNAMESE subsets and carried no ASCII cmap, so every face silently fell back to ui-serif / system sans. format("woff2") not woff2-variations: the latter is legacy syntax that some browsers reject outright, which would have masked the fix. */ @font-face{ font-family:"Newsreader"; src:url("fonts/newsreader-var.woff2") format("woff2"); font-weight:200 800; font-display:swap; } @font-face{ font-family:"Plex"; src:url("fonts/ibm-plex-sans-var.woff2") format("woff2"); font-weight:100 700; font-display:swap; } @font-face{ font-family:"PlexMono"; src:url("fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight:400 600; font-display:swap; } :root{ /* the archive: card stock, ink, and two hands writing on it */ --paper:#F4F2EC; --paper2:#EFEDE5; --card:#FDFCF9; --card2:#F8F6F0; --ink:#1B1915; --body:#4E4A42; --dim:#736E63; --rule:#DED9CC; --rule2:#EAE6DC; --blue:#C6D2DE; --margin:#B4483F; --hum:#1E6B54; --humS:#E7F1EC; --agt:#26588F; --agtS:#E6EDF6; --key:var(--margin); --serif:"Newsreader",ui-serif,Georgia,serif; --sans:"Plex",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"PlexMono",ui-monospace,SFMono-Regular,Menlo,monospace; } body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } .wrap{ width:100%; max-width:74rem; margin:0 auto; padding-inline:clamp(1.25rem,4vw,3rem); } .narrow{ max-width:41rem; } .eye{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); } h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2.5rem,6.2vw,4.5rem); line-height:1.02; letter-spacing:-.032em; text-wrap:balance; } h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,4vw,2.85rem); line-height:1.08; letter-spacing:-.025em; text-wrap:balance; } h3{ font-size:1rem; font-weight:650; } .lede{ font-size:clamp(1.02rem,1.8vw,1.19rem); line-height:1.58; color:var(--body); } .body{color:var(--body);} .dim{color:var(--dim);} .sm{font-size:.89rem;} .xs{font-size:.79rem;} strong{ color:var(--ink); font-weight:650; } code{ font-family:var(--mono); font-size:.9em; } .btn{ display:inline-flex; align-items:center; justify-content:center; font-size:.88rem; font-weight:600; padding:.75rem 1.3rem; border-radius:3px; text-decoration:none; cursor:pointer; background:var(--ink); border:1px solid var(--ink); color:var(--card); transition:.15s; box-shadow:2px 2px 0 rgba(27,25,21,.16); } .btn:hover{ background:var(--margin); border-color:var(--margin); transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(27,25,21,.16); } .btn2{ background:var(--card); color:var(--ink); border-color:var(--rule); } .btn2:hover{ background:var(--card); color:var(--margin); border-color:var(--margin); } nav{ position:sticky; top:0; z-index:80; background:rgba(244,242,236,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule2); transition:border-color .2s, box-shadow .2s; } nav.on{ border-bottom-color:var(--rule); box-shadow:0 1px 0 rgba(27,25,21,.03); } .navin{ display:flex; align-items:center; gap:1.6rem; height:4rem; } .brand{ display:inline-flex; align-items:center; gap:.5rem; color:var(--ink); text-decoration:none; font-family:var(--serif); font-size:1.24rem; font-weight:600; letter-spacing:-.02em; } .nlinks{ display:none; gap:1.45rem; margin-left:2.75rem; } @media (min-width:66rem){ .nlinks{ display:flex; } } .nlinks a{ font-size:.85rem; color:var(--body); text-decoration:none; } .nlinks a:hover{ color:var(--margin); } .ncta{ margin-left:auto; margin-right:-.15rem; } section{ padding-block:clamp(2.9rem,4.6vw,4.1rem); border-top:1px solid var(--rule); } .hero{ border-top:none; } .sechead{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.75rem; } /* the record card: the page's whole visual system */ .rec{ position:relative; background:var(--card); border:1px solid var(--rule); border-radius:2px; box-shadow:2px 2px 0 rgba(27,25,21,.05), 0 14px 34px -28px rgba(27,25,21,.5); } .rec::before{ content:""; position:absolute; left:2.1rem; top:0; bottom:0; width:1px; background:var(--margin); opacity:.28; } .rec.plain::before{ display:none; } .rec > *{ padding-left:3rem; } .rec.plain > *{ padding-left:1.3rem; } .tab{ position:absolute; top:-.9rem; left:1.4rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; padding:.28rem .7rem; border:1px solid var(--rule); border-bottom:none; border-radius:3px 3px 0 0; background:var(--card2); color:var(--dim); } .tab.h{ color:var(--hum); background:var(--humS); border-color:#CFE0D8; } .tab.a{ color:var(--agt); background:var(--agtS); border-color:#CFDCEB; } .recb{ padding-block:1.35rem 1.4rem; padding-right:1.3rem; } /* li included deliberately: list items used to inherit the 1rem root size while sibling paragraphs sat at .94rem, so a bulleted block read a size larger than the prose around it. Weight alone distinguishes emphasis. */ .recb p, .recb li{ font-size:.94rem; line-height:1.6; color:var(--body); } .recb h3{ margin-bottom:.35rem; } .hero{ padding-block:clamp(2.6rem,5vw,3.9rem) clamp(2.4rem,4.2vw,3.3rem); } .hcopy{ max-width:53rem; display:flex; flex-direction:column; gap:1.1rem; margin-bottom:2.1rem; } /* static twin of .swap for critical words in running copy — same colour language: .kh humans/people, .ka AI agents, .km other critical emphasis */ .kh,.ka,.km{ display:inline-block; position:relative; padding:0 .06em; } .kh{ color:var(--hum); } .ka{ color:var(--agt); } .km{ color:var(--margin); } .kh::after,.ka::after,.km::after{ content:""; position:absolute; left:.04em; right:.04em; bottom:.08em; height:.14em; background:currentColor; opacity:.9; } .swap{ display:inline-block; position:relative; font:inherit; background:none; border:none; padding:0 .06em; cursor:pointer; transition:color .2s; color:var(--dim); } .swap::after{ content:""; position:absolute; left:.04em; right:.04em; bottom:.08em; height:.14em; background:currentColor; opacity:.25; transition:.2s; } .swap:hover{ color:var(--body); } #sw-h.sel{ color:var(--hum); } #sw-h.sel::after{ opacity:1; } #sw-a.sel{ color:var(--agt); } #sw-a.sel::after{ opacity:1; } .prod{ font-family:var(--serif); font-size:clamp(1.12rem,2.2vw,1.45rem); line-height:1.42; letter-spacing:-.012em; color:var(--body); } .prod strong{ color:var(--ink); font-weight:500; } .gainbar{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding-block:1.1rem; margin-block:.3rem; } .gain{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.2rem .9rem; } .gl{ font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); width:100%; } .gain > b{ font-family:var(--serif); font-size:clamp(2.4rem,5.5vw,3.4rem); font-weight:500; letter-spacing:-.032em; line-height:1.05; color:var(--hum); font-variant-numeric:tabular-nums; } body[data-mode="agent"] .gain b{ color:var(--agt); } .gs{ font-size:.92rem; color:var(--body); } .gs a{ color:var(--margin); text-decoration:none; border-bottom:1px solid currentColor; } .gnote{ font-size:.75rem; color:var(--dim); line-height:1.5; margin-top:.5rem; max-width:38rem; } .gen{ display:flex; flex-direction:column; } /* stack on narrow screens. a genrow holds three children, so the old two-track "auto 1fr" pushed the third back into the auto column, which then sized to that long paragraph and crushed the middle child to one word per line. */ .genrow{ display:grid; grid-template-columns:1fr; gap:.28rem; align-items:start; padding:.7rem 0; border-bottom:1px solid var(--rule2); font-size:.88rem; } @media (min-width:44rem){ .genrow{ grid-template-columns:5rem 11rem 1fr; gap:.2rem .8rem; align-items:baseline; padding:.55rem 0; } } .genrow:last-child{ border-bottom:none; } .gk{ font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--dim); } .gv{ font-weight:650; color:var(--ink); } .gp{ font-family:var(--mono); font-size:.75rem; color:var(--body); } .genrow.gapline .gv{ color:var(--margin); } .genrow.gapline .gp{ color:var(--margin); } .askagain{ font-family:var(--mono); font-size:.63rem; letter-spacing:.08em; text-transform:uppercase; background:var(--card2); border:1px solid var(--rule); border-radius:2px; padding:.25rem .6rem; cursor:pointer; color:var(--body); } .askagain:hover{ border-color:var(--margin); color:var(--margin); } .lane{ display:grid; grid-template-columns:1fr; gap:.15rem; padding-block:.9rem; padding-right:1.3rem; border-bottom:1px solid var(--rule2); } @media (min-width:40rem){ .lane{ grid-template-columns:5.4rem 1fr; gap:1rem; align-items:start; } } .lanetag{ font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; padding:.2rem .45rem; border-radius:2px; justify-self:start; margin-top:.15rem; } .lanetag.now{ color:var(--margin); background:#F8EAE8; } .lanetag.was{ color:var(--body); background:var(--card2); border:1px solid var(--rule); } /* #evidence lanes are a terminal transcript (command -> output), not a was/now pill compare: the tag holds a full command, too wide for the 5.4rem tag track. Stack it above the output full-width and let it read as a real command line. */ #evidence .lane{ grid-template-columns:1fr; gap:.4rem; } #evidence .lanetag{ max-width:100%; text-transform:none; letter-spacing:0; font-size:.72rem; overflow-wrap:anywhere; } .lanebody p{ font-size:.95rem; line-height:1.55; color:var(--ink); } .lanemeta{ display:flex; align-items:center; gap:.45rem; margin-top:.4rem; font-family:var(--mono); font-size:.71rem; color:var(--dim); flex-wrap:wrap; } .lanemeta b{ color:var(--margin); font-weight:400; } .dotlive{ width:.42rem; height:.42rem; border-radius:50%; background:var(--margin); flex:none; animation:pulse 2s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } } .lanefoot{ padding-block:.9rem 1.2rem; padding-right:1.3rem; font-size:.88rem; color:var(--body); line-height:1.55; } .flash{ animation:flashbg .9s ease; } @keyframes flashbg{ 0%{ background:#F8EAE8; } 100%{ background:transparent; } } .tools{ display:grid; grid-template-columns:1fr; gap:.3rem; } @media (min-width:30rem){ .tools{ grid-template-columns:1fr 1fr; } } .tool{ font-family:var(--mono); font-size:.75rem; padding:.32rem .5rem; border:1px solid var(--rule); border-radius:2px; background:var(--card2); } .tool .tk,.tool .td{ font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; margin-right:.45rem; } .tool.keep{ color:var(--ink); } .tool.keep .tk{ color:var(--hum); } .tool.drop{ color:var(--dim); text-decoration:line-through; text-decoration-color:var(--margin); background:transparent; border-style:dashed; } .tool.drop .td{ color:var(--margin); text-decoration:none; display:inline-block; } .scope{ display:flex; flex-direction:column; } .srow{ display:grid; grid-template-columns:1fr; gap:.1rem; padding:.5rem 0; border-bottom:1px solid var(--rule2); } @media (min-width:34rem){ .srow{ grid-template-columns:7rem 1fr; gap:.8rem; align-items:baseline; } } .srow:last-child{ border-bottom:none; } .sname{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); } .sres{ font-size:.87rem; color:var(--body); } .cmp{ width:100%; border-collapse:collapse; font-size:.87rem; min-width:44rem; } .cmp th,.cmp td{ text-align:left; padding:.6rem .8rem .6rem 0; border-bottom:1px solid var(--rule2); vertical-align:top; } .cmp thead th{ font-family:var(--mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; color:var(--dim); font-weight:500; border-bottom:2px solid var(--ink); } .cmp thead th.us{ color:var(--ink); font-weight:700; } .cmp tbody th{ font-weight:650; color:var(--ink); width:26%; } .cmp td{ color:var(--body); } .cmp td.us{ color:var(--ink); font-weight:600; background:#FBF7F2; } .cmp td.y{ color:var(--hum); } .cmp td.n{ color:var(--margin); } .cmp tr.loss th{ font-style:italic; } .paths{ display:grid; grid-template-columns:1fr; gap:1.3rem; margin-top:1.9rem; } @media (min-width:56rem){ .paths{ grid-template-columns:1fr 1fr; gap:1.5rem; } } .path .recb h3{ font-family:var(--serif); font-weight:500; font-size:1.35rem; letter-spacing:-.018em; margin-bottom:.5rem; } .chips{ display:flex; flex-wrap:wrap; gap:.35rem; } .chip{ font-family:var(--mono); font-size:.73rem; padding:.3rem .55rem; border:1px solid var(--rule); border-radius:2px; background:var(--card2); color:var(--body); } .note{ max-width:46rem; position:relative; background:var(--card); border:1px solid var(--rule); border-radius:2px; box-shadow:3px 3px 0 rgba(27,25,21,.06); } .note::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--margin); opacity:.55; } .notehead{ padding:1.4rem 1.6rem 0 1.9rem; } .notebody{ padding:1.1rem 1.6rem 1.5rem 1.9rem; display:flex; flex-direction:column; gap:.9rem; } .notebody p{ font-size:.95rem; line-height:1.68; color:var(--body); } .notelede{ font-family:var(--serif); font-size:1.12rem!important; line-height:1.5!important; color:var(--ink)!important; } .sign{ margin-top:.5rem; padding-top:.9rem; border-top:1px solid var(--rule2); font-family:var(--mono); font-size:.78rem!important; color:var(--ink)!important; line-height:1.7!important; } .sign span{ color:var(--dim); font-size:.73rem; } .sign a{ color:var(--margin); } /* the hero answer assembles itself, once, the way it would in the product */ .reveal{ opacity:0; transform:translateY(9px); } .reveal.in{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1); } .status{ font-family:var(--mono); font-size:.75rem; color:var(--dim); padding-block:.55rem; padding-right:1.3rem; display:flex; align-items:center; gap:.5rem; } .status::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--margin); animation:pulse 1.4s ease-in-out infinite; } .status.done::before{ animation:none; background:var(--hum); } .replaybtn{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; background:transparent; border:1px solid var(--rule); border-radius:2px; padding:.24rem .55rem; color:var(--dim); cursor:pointer; margin-left:auto; } .replaybtn:hover{ color:var(--margin); border-color:var(--margin); } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } .status::before{ animation:none; } } .doclinks{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--rule2); } .doclink{ font-size:.83rem; color:var(--margin); text-decoration:none; } .doclink::after{ content:" →"; } .doclink:hover{ text-decoration:underline; } /* the ten year span, drawn */ .span{ margin:0 0 1.4rem; } .span svg{ width:100%; height:auto; display:block; } .spanTick line{ stroke:#C6BFAE; stroke-width:1.2; } .spanTick text{ font-family:var(--mono); font-size:10px; fill:var(--dim); text-anchor:middle; } .spanTick text.now{ fill:var(--margin); } .spanDot circle{ fill:var(--card); stroke:var(--margin); stroke-width:2.5; } .spanLbl text{ font-family:var(--mono); font-size:10.5px; fill:var(--dim); } .spanLbl text.strong{ fill:var(--ink); font-size:11.5px; } .span figcaption{ font-size:.83rem; color:var(--body); margin-top:.3rem; } /* failures becoming a page */ .funnelfig{ margin:0; display:grid; grid-template-columns:1fr; gap:.9rem; align-items:stretch; } @media (min-width:60rem){ .funnelfig{ grid-template-columns:1fr auto 1fr auto 1fr; gap:1rem; align-items:center; } } .fstage{ border:1px solid var(--rule); border-radius:4px; background:var(--card); padding:1rem 1.05rem; display:flex; flex-direction:column; gap:.55rem; } .flab{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); } .fchips{ display:flex; flex-wrap:wrap; gap:.3rem; } .fq{ font-size:.74rem; padding:.24rem .5rem; border:1px dashed var(--rule); border-radius:2px; color:var(--muted,var(--dim)); background:var(--card2); } .fnote{ font-family:var(--mono); font-size:.68rem; color:var(--dim); } .farrow{ justify-self:center; width:100%; height:1px; background:var(--rule); position:relative; } @media (min-width:60rem){ .farrow{ width:26px; } } .farrow::after{ content:""; position:absolute; right:-1px; top:-3px; border-left:6px solid var(--rule); border-top:3.5px solid transparent; border-bottom:3.5px solid transparent; } .fgap{ border-left:2px solid var(--margin); padding-left:.7rem; } .fgaphead{ display:flex; align-items:baseline; gap:.5rem; } .fsev{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--margin); background:#F8EAE8; padding:.14rem .4rem; border-radius:2px; } .fscore{ font-family:var(--mono); font-size:.78rem; color:var(--ink); font-variant-numeric:tabular-nums; } .fgap p{ font-size:.95rem; font-weight:650; margin-top:.3rem; } .fbars{ display:flex; flex-direction:column; gap:.25rem; margin-top:.5rem; } .fbars span{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.62rem; color:var(--dim); } .fbars i{ display:block; height:4px; background:var(--margin); opacity:.45; border-radius:2px; } .fkind{ font-family:var(--mono); font-size:.63rem; color:var(--dim); margin-top:.5rem; display:block; } .fdraft{ border-left:2px solid var(--hum); padding-left:.7rem; display:flex; flex-direction:column; gap:.22rem; } .fdraft p{ font-size:.95rem; } .fdraft span{ font-family:var(--mono); font-size:.68rem; color:var(--dim); } .fdraft .fneeds{ color:var(--margin); } .fdraft .fpend{ color:var(--hum); margin-top:.35rem; } /* same question, two models */ .beforeafter{ margin:0; border:1px solid var(--rule); border-radius:4px; background:var(--card); padding:1.15rem 1.2rem 1.25rem; } .baq{ font-size:.92rem; color:var(--body); padding-bottom:.85rem; border-bottom:1px dashed var(--rule); } .baq b{ color:var(--ink); } .bagrid{ display:grid; grid-template-columns:1fr; gap:1.1rem; padding-top:1rem; } @media (min-width:52rem){ .bagrid{ grid-template-columns:1fr 1fr; gap:1.8rem; } } .bacol{ display:flex; flex-direction:column; gap:.4rem; } .balab{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:.25rem; } .bacol.won .balab{ color:var(--hum); } .barow{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; padding:.4rem 0; border-bottom:1px solid var(--rule2); } .barow.dim2 .bahit{ color:var(--dim); } .bahit{ font-size:.87rem; color:var(--body); } .bacol.won .bahit{ color:var(--ink); } .bascore{ font-family:var(--mono); font-size:.72rem; color:var(--dim); font-variant-numeric:tabular-nums; } .bacol.won .bascore{ color:var(--hum); } .bafoot{ font-size:.8rem; color:var(--dim); margin-top:.5rem; } .bacol.won .bafoot{ color:var(--hum); } .beforeafter figcaption{ font-size:.83rem; color:var(--body); margin-top:1rem; padding-top:.8rem; border-top:1px dashed var(--rule); } /* the mark sits in the brand lockup. flat glyph, currentColor, so it inherits the wordmark's ink and stays crisp at nav size — the lit render is a large-format asset and turns to mush below ~32px. */ .brand svg{ width:1.6em; height:1.6em; fill:currentColor; flex:none; } /* the lit render, transparent, straight on the paper — no plate. its mean luminance is 89/255, so it is a dark object and holds against cream. the negative inset cancels the glow padding baked into the asset so the mark optically aligns with the text below it. */ /* align-self is load-bearing: .hcopy is a flex column, so the default align-items:stretch blows the image's width out to the full column and squashes it flat against the clamped height. */ .heromark{ display:block; align-self:flex-start; flex:none; width:auto; height:clamp(4.2rem,7vw,5.6rem); aspect-ratio:1; margin:0 0 .55rem -.48rem; } .qdots{ display:inline-flex; gap:.3rem; margin-left:auto; } .qdots i{ width:.42rem; height:.42rem; border-radius:50%; background:var(--rule); transition:background .3s; cursor:pointer; } .qdots i.on{ background:var(--margin); } .cue{ font-family:var(--mono); font-size:.72rem; color:var(--dim); } .m-h,.m-a{ display:none; } body[data-mode="human"] .m-h{ display:block; } body[data-mode="agent"] .m-a{ display:block; } .acts{ display:flex; flex-wrap:wrap; gap:.7rem; } .trust{ display:flex; flex-wrap:wrap; gap:.35rem 1.5rem; } .trust span{ font-family:var(--mono); font-size:.72rem; color:var(--dim); } /* the answer card */ .qline{ font-family:var(--mono); font-size:.79rem; color:var(--dim); padding-block:.85rem; border-bottom:1px dashed var(--rule); padding-right:1.3rem; } .claim{ padding-block:.85rem; border-bottom:1px solid var(--rule2); padding-right:1.3rem; position:relative; } .claim:last-of-type{ border-bottom:none; } .claim .who{ display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:.3rem; } .claim.byh .who{ color:var(--hum); } .claim.bya .who{ color:var(--agt); } .claim p{ font-size:.96rem; line-height:1.55; color:var(--ink); } .claim.gapc p{ color:var(--margin); } .cites{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; } .cite{ font-family:var(--mono); font-size:.68rem; padding:.2rem .5rem; border:1px solid var(--rule); border-radius:2px; background:var(--card2); color:var(--body); cursor:pointer; } .cite:hover{ border-color:var(--margin); color:var(--margin); } .srcbox{ margin-top:.55rem; border-left:2px solid var(--rule); padding:.4rem 0 .4rem .7rem; font-family:var(--mono); font-size:.73rem; line-height:1.55; color:var(--body); } .srcbox b{ display:block; font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); margin-bottom:.2rem; } .stamp{ display:flex; flex-wrap:wrap; gap:.4rem; padding-block:.85rem 0; border-top:1px dashed var(--rule); padding-right:1.3rem; } .pill{ font-family:var(--mono); font-size:.64rem; padding:.2rem .45rem; border-radius:2px; } .pill.h{ color:var(--hum); background:var(--humS); } .pill.a{ color:var(--agt); background:var(--agtS); } .pill.g{ color:var(--margin); background:#F7E9E7; } .hgrid{ display:grid; grid-template-columns:1fr; gap:1.5rem; } @media (min-width:64rem){ .hgrid{ grid-template-columns:1.1fr .9fr; gap:2.4rem; } } .drawer{ display:grid; grid-template-columns:repeat(2,1fr); border-block:1px solid var(--rule); background:var(--paper2); } @media (min-width:56rem){ .drawer{ grid-template-columns:repeat(4,1fr); } } .dcell{ padding:1.55rem 1.35rem; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); } .dcell:nth-child(2n){ border-right:none; } @media (min-width:56rem){ .dcell{ border-bottom:none; border-right:1px solid var(--rule); } .dcell:last-child{ border-right:none; } } .dcell b{ display:block; font-family:var(--serif); font-size:1.35rem; font-weight:500; letter-spacing:-.02em; margin-bottom:.15rem; } .dcell span{ font-size:.81rem; color:var(--dim); line-height:1.45; } .two{ display:grid; grid-template-columns:1fr; gap:1.35rem; } @media (min-width:58rem){ .two{ grid-template-columns:1fr 1fr; gap:1.6rem; } } .stack{ display:flex; flex-direction:column; gap:1.7rem; } .grid3{ display:grid; grid-template-columns:1fr; gap:1.35rem 1.1rem; } @media (min-width:46rem){ .grid3{ grid-template-columns:1fr 1fr; } } @media (min-width:72rem){ .grid3{ grid-template-columns:repeat(3,1fr); } } .quote{ position:relative; background:var(--card); border:1px solid var(--rule); border-radius:2px; box-shadow:3px 3px 0 rgba(27,25,21,.06); } .qb{ padding:clamp(1.8rem,3.5vw,2.7rem); border-bottom:1px solid var(--rule); } .qb blockquote{ font-family:var(--serif); font-size:clamp(1.3rem,2.8vw,2rem); line-height:1.28; letter-spacing:-.02em; color:var(--ink); } .qb cite{ display:block; margin-top:1rem; font-style:normal; font-family:var(--mono); font-size:.74rem; color:var(--dim); } .qsplit{ display:grid; grid-template-columns:1fr; } @media (min-width:52rem){ .qsplit{ grid-template-columns:1fr 1fr; } } .qs{ padding:1.3rem 1.45rem; } @media (min-width:52rem){ .qs:first-child{ border-right:1px solid var(--rule); } } .qs h3.qsh, .qs h4{ font-family:var(--mono); font-weight:400; font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:.7rem; color:var(--dim); } .qs li{ font-size:.87rem; color:var(--body); padding:.28rem 0 .28rem 1.1rem; position:relative; } .qs li::before{ content:"·"; position:absolute; left:.25rem; color:var(--dim); } .qs.w li::before{ content:"✓"; color:var(--hum); font-size:.8em; } .roi{ background:var(--card); border:1px solid var(--rule); border-radius:2px; box-shadow:3px 3px 0 rgba(27,25,21,.06); overflow:hidden; } .roig{ display:grid; grid-template-columns:1fr; } @media (min-width:60rem){ .roig{ grid-template-columns:1fr 1fr; } } .rin{ padding:clamp(1.4rem,2.8vw,2rem); display:flex; flex-direction:column; gap:1.3rem; border-bottom:1px solid var(--rule); } @media (min-width:60rem){ .rin{ border-bottom:none; border-right:1px solid var(--rule); } } .rout{ padding:clamp(1.4rem,2.8vw,2rem); display:flex; flex-direction:column; gap:1.1rem; background:var(--card2); } .f{ display:flex; flex-direction:column; gap:.4rem; } .f label{ font-size:.84rem; font-weight:650; } .f .h{ font-size:.77rem; color:var(--dim); line-height:1.45; } .f input[type=range]{ width:100%; accent-color:var(--margin); } .f input[type=number]{ width:100%; padding:.55rem .7rem; border:1px solid var(--rule); border-radius:2px; background:var(--paper); font-family:var(--mono); font-size:.88rem; font-variant-numeric:tabular-nums; } .frow{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; } .fv{ font-family:var(--mono); font-size:.85rem; color:var(--margin); font-variant-numeric:tabular-nums; } .big .n{ font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem,6vw,3.5rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .big .l{ font-size:.85rem; color:var(--body); margin-top:.25rem; display:block; } .rl{ display:flex; justify-content:space-between; gap:1rem; font-size:.86rem; color:var(--body); padding:.5rem 0; border-top:1px solid var(--rule2); } .rl span:last-child{ font-family:var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; } .rnote{ font-size:.81rem; line-height:1.5; color:var(--body); border-left:2px solid var(--margin); padding-left:.85rem; } .refs{ margin-top:1.8rem; padding-top:1.3rem; border-top:1px solid var(--rule); } .refs li{ font-size:.78rem; color:var(--dim); line-height:1.55; margin-bottom:.55rem; padding-left:1.4rem; position:relative; } .refs li b{ position:absolute; left:0; color:var(--margin); font-weight:400; font-family:var(--mono); } .refs a{ color:var(--body); } .close{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.4rem; } .close h2{ max-width:19ch; } .close .lede{ max-width:44ch; } footer{ border-top:1px solid var(--rule); padding-block:2.2rem 2.5rem; background:var(--paper2); } /* five columns for five groups — the old 4-track grid wrapped Trust onto its own row and left the gap Livio flagged */ .foot{ display:grid; grid-template-columns:1fr; gap:1.5rem; } @media (min-width:34rem){ .foot{ grid-template-columns:1fr 1fr; gap:1.6rem 2rem; } } @media (min-width:52rem){ .foot{ grid-template-columns:1.35fr 1fr 1fr 1fr 1fr; gap:2rem; } } .fc{ display:flex; flex-direction:column; gap:.5rem; } .fbrand{ gap:.55rem; } .fsoc{ display:inline-flex; gap:.7rem; margin-top:.2rem; } .fsoc a{ color:var(--dim); display:inline-flex; } .fsoc a:hover{ color:var(--margin); } .fsoc svg{ width:1.05rem; height:1.05rem; fill:currentColor; display:block; } .fcopy{ margin-top:auto; padding-top:.7rem; } .fc a{ font-size:.84rem; color:var(--body); text-decoration:none; } .fc a:hover{ color:var(--margin); } .fh{ font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); } a:focus-visible,button:focus-visible,input:focus-visible{ outline:2px solid var(--margin); outline-offset:3px; } /* phones: fingers are not cursors, and 9px labels are not readable at arm's length */ @media (max-width:30rem){ /* keep the chip small but give the finger a 44px target */ .cite{ padding:.45rem .65rem; font-size:.74rem; position:relative; } .cite::after{ content:""; position:absolute; inset:-7px -5px; } .tool .tk,.tool .td,.claim .who,.lanetag{ font-size:.68rem; } .cites{ gap:.45rem; } .tab{ font-size:.64rem; padding:.32rem .75rem; } .kicker,.eye{ font-size:.72rem; } .ylab,.gl,.fh,.card-num,.cap .m{ font-size:.7rem; } .xs{ font-size:.82rem; } .nav .btn{ padding:.7rem 1.05rem; } .qline,.claim .who{ font-size:.72rem; } } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;} } /* ── Clips ──────────────────────────────────────────────────────────────── Self-hosted