:root { --sun:#f4d59a; --paper:#fffaf0; --paper-deep:#f4ead4; --ink:#172a3b; --muted:#5e6b70; --line:rgba(23,42,59,.18); --cobalt:#2456c4; --teal:#187c76; --orange:#d76532; --hold:#9b461f; --shadow:0 18px 60px rgba(48,54,51,.12); color-scheme:light; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; } a { color:inherit; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:10; padding:.7rem 1rem; background:var(--ink); color:var(--paper); } .skip-link:focus { top:1rem; }
.shell { width:min(1180px,calc(100% - 3rem)); margin-inline:auto; } .site-header { display:flex; justify-content:space-between; align-items:center; width:min(1180px,calc(100% - 3rem)); margin:0 auto; padding:1.35rem 0; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:-.03em; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:2rem; height:2rem; border:2px solid var(--ink); border-radius:50%; font-family:Georgia,serif; font-size:1.2rem; } .header-note,.eyebrow,.receipt-ref,.finding-id,.aside-label,.dial-top,.dial-footer,.node-index { font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } .header-note { margin:0; color:var(--muted); }
.hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:clamp(3rem,8vw,8rem); align-items:center; padding-top:clamp(4.5rem,10vw,8rem); padding-bottom:clamp(4.5rem,10vw,8rem); } .eyebrow { margin:0 0 1.25rem; color:var(--cobalt); } h1,h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.045em; line-height:.98; } h1 { max-width:720px; font-size:clamp(3.5rem,8vw,7.5rem); } h1 em { color:var(--orange); font-style:normal; } .hero-lede { max-width:560px; margin:2rem 0 0; color:var(--muted); font-size:clamp(1.05rem,1.7vw,1.35rem); } .hero-meta { display:flex; flex-wrap:wrap; gap:.7rem 1.5rem; margin-top:2.5rem; color:var(--muted); font-size:.78rem; } .hero-meta b { display:block; color:var(--ink); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }
.dial { max-width:400px; padding:1.2rem; background:var(--sun); box-shadow:var(--shadow); transform:rotate(2deg); } .dial-top,.dial-footer { display:flex; justify-content:space-between; color:rgba(23,42,59,.7); } .status-dot { color:var(--teal); font-size:1rem; line-height:.5; } .dial-face { position:relative; width:min(100%,330px); aspect-ratio:1; margin:1.4rem auto; border:2px solid var(--ink); border-radius:50%; background:rgba(255,250,240,.5); } .dial-face::before,.dial-face::after { position:absolute; content:""; inset:10%; border:1px dashed rgba(23,42,59,.26); border-radius:50%; } .dial-face::after { inset:48%; border:1px solid var(--orange); background:var(--orange); } .dial-mark { position:absolute; font-family:Georgia,serif; font-size:1rem; } .dial-mark--top { top:8%; left:48%; } .dial-mark--right { top:47%; right:8%; } .dial-mark--bottom { bottom:8%; left:48%; } .dial-mark--left { top:47%; left:8%; } .dial-hand { position:absolute; bottom:50%; left:50%; width:2px; transform-origin:50% 100%; background:var(--ink); } .dial-hand--hour { height:25%; transform:rotate(36deg); } .dial-hand--minute { height:37%; width:3px; transform:rotate(116deg); background:var(--cobalt); } .dial-center { position:absolute; inset:47%; border-radius:50%; background:var(--orange); } .dial-label { position:absolute; right:21%; bottom:22%; color:var(--teal); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; font-weight:800; letter-spacing:.08em; line-height:1.15; text-align:right; text-transform:uppercase; }
.trace,.finding,.matrix,.packet,.cta { padding-top:clamp(4rem,8vw,7rem); padding-bottom:clamp(4rem,8vw,7rem); border-top:1px solid var(--line); } h2 { font-size:clamp(2.4rem,5vw,4.8rem); } .section-intro { display:grid; grid-template-columns:minmax(200px,.7fr) minmax(0,1fr); column-gap:2rem; align-items:start; } .section-intro .eyebrow { grid-row:span 2; } .section-intro p:last-child { max-width:570px; margin:1.5rem 0 0; color:var(--muted); }
.trace-board { position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; margin-top:4rem; } .trace-line { position:absolute; z-index:0; top:1.4rem; right:6%; left:6%; height:2px; background:var(--line); } .trace-node { position:relative; z-index:1; min-height:9rem; padding:2.7rem .8rem 1rem; border:1px solid var(--line); background:var(--paper); color:var(--ink); text-align:left; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease; } .trace-node:hover,.trace-node:focus-visible { transform:translateY(-4px); border-color:var(--cobalt); outline:none; } .trace-node.is-active { border-color:var(--cobalt); background:#edf1fb; box-shadow:6px 6px 0 var(--cobalt); } .node-index { position:absolute; top:.7rem; left:.8rem; color:var(--cobalt); } .trace-node strong,.trace-node small { display:block; } .trace-node strong { font-family:Georgia,serif; font-size:1.2rem; font-weight:400; } .trace-node small { margin-top:.5rem; color:var(--muted); font-size:.78rem; }
.receipt { display:grid; grid-template-columns:170px 1fr auto; gap:1.5rem; align-items:center; margin-top:1rem; padding:1rem 1.2rem; border-left:4px solid var(--teal); background:var(--paper-deep); } .receipt-label { display:flex; align-items:center; gap:.55rem; color:var(--teal); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.7rem; font-weight:800; } .receipt-led { width:.55rem; height:.55rem; border-radius:50%; background:var(--teal); } .receipt p { margin:0; color:var(--muted); font-size:.92rem; } .receipt-ref { color:var(--muted); font-size:.58rem; white-space:nowrap; }
.finding { background:var(--ink); color:var(--paper); } .finding .eyebrow,.finding-id { color:var(--sun); } .finding-head,.finding-grid { display:flex; justify-content:space-between; gap:2rem; } .finding-grid { align-items:end; margin-top:1.5rem; } .finding h2 { max-width:700px; } .finding-summary { max-width:580px; margin:1.8rem 0 0; color:rgba(255,250,240,.72); font-size:1.1rem; } .finding-verdict { max-width:340px; padding:1.3rem; border:1px solid rgba(244,213,154,.42); } .verdict-mark { display:inline-block; padding:.3rem .5rem; background:var(--sun); color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.7rem; font-weight:900; letter-spacing:.12em; } .finding-verdict p { color:rgba(255,250,240,.75); font-size:.86rem; } .finding-verdict p:last-child { margin-bottom:0; } .finding-verdict b { color:var(--paper); } .truth-strip { display:grid; grid-template-columns:170px 1fr; gap:1.5rem; margin-top:4rem; padding-top:1.2rem; border-top:1px solid rgba(255,250,240,.25); } .truth-strip span { color:var(--sun); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.65rem; font-weight:800; letter-spacing:.12em; } .truth-strip strong { max-width:700px; font-size:.88rem; font-weight:500; }
.matrix-intro { margin-bottom:3rem; } .matrix-table-wrap { overflow-x:auto; } .matrix table { width:100%; border-collapse:collapse; min-width:700px; } .matrix th,.matrix td { padding:1rem .8rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .matrix thead th { color:var(--muted); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; } .matrix tbody th { width:24%; font-family:Georgia,serif; font-size:1.05rem; font-weight:400; } .matrix td { color:var(--muted); font-size:.88rem; } .state { display:inline-block; padding:.25rem .4rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; font-weight:800; letter-spacing:.08em; } .state--hold { background:#f5d8c8; color:var(--hold); } .state--synthetic { background:#d6ece7; color:#12645e; } .state--unknown { background:#e9e2f4; color:#614685; } .state--observed { background:#dbe6f9; color:#224b9f; }
.packet { display:grid; grid-template-columns:1fr .7fr; gap:clamp(3rem,9vw,9rem); background:var(--paper-deep); } .packet-main h2 { max-width:650px; } .packet-list { padding:0; margin:3rem 0 0; list-style:none; } .packet-list li { display:grid; grid-template-columns:3rem 1fr; gap:1rem; padding:1.2rem 0; border-top:1px solid var(--line); } .packet-list li>span { color:var(--cobalt); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; font-weight:800; } .packet-list b,.packet-list small { display:block; } .packet-list b { font-family:Georgia,serif; font-size:1.2rem; font-weight:400; } .packet-list small { margin-top:.25rem; color:var(--muted); } .packet-aside { align-self:end; padding:1.6rem; border:1px solid var(--line); background:var(--paper); } .aside-label { color:var(--orange); } .packet-aside p { margin:1.5rem 0; color:var(--muted); } .text-link { color:var(--cobalt); font-weight:800; text-decoration-thickness:2px; text-underline-offset:4px; }
.cta { display:flex; justify-content:space-between; align-items:end; gap:2rem; } .cta h2 { max-width:680px; } .cta p:last-child { max-width:600px; margin:1.4rem 0 0; color:var(--muted); } .button { display:inline-block; flex:0 0 auto; padding:1rem 1.25rem; background:var(--cobalt); color:white; font-weight:800; text-decoration:none; box-shadow:5px 5px 0 var(--orange); } .button:hover,.button:focus-visible { background:var(--teal); outline:none; } .site-footer { display:flex; justify-content:space-between; gap:1rem; padding-top:1.2rem; padding-bottom:2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; } .dial { width:min(100%,380px); margin-inline:auto; } .section-intro { display:block; } .section-intro h2 { max-width:650px; } .trace-board { grid-template-columns:repeat(3,1fr); gap:.6rem; } .trace-line { display:none; } .receipt { grid-template-columns:1fr; gap:.6rem; } .receipt-ref { white-space:normal; } .finding-grid,.packet,.cta { display:block; } .finding-verdict,.packet-aside { margin-top:2rem; } .truth-strip { grid-template-columns:1fr; gap:.7rem; margin-top:2.5rem; } .cta .button { margin-top:2rem; } }
@media (max-width:540px) { .shell,.site-header { width:min(100% - 2rem,1180px); } .site-header { align-items:flex-start; } .header-note { max-width:120px; text-align:right; } .hero { padding-top:3.5rem; padding-bottom:3.5rem; } .hero-meta { display:grid; grid-template-columns:1fr 1fr; } .trace-board { grid-template-columns:1fr 1fr; margin-top:2.5rem; } .trace-node { min-height:8rem; } .finding-head { display:block; } .finding-id { display:inline-block; margin-top:.8rem; } .site-footer { display:block; } .site-footer span { display:block; margin-top:.4rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } .dial { transform:none; } }