:root{ --red:#a8482a; --bg:#f6f4ee; --panel:#fcfaf5; --panel2:#ece8df; --line:#ddd8cc; --ink:#211e17; --muted:#726d63; /* warm grey — darkened from #79746b to clear WCAG AA (~4.7:1 on --bg) */ --muted-strong:#5a544a; /* darker muted — clears AA (~6:1) on --panel2 surfaces (e.g. util strip) */ --mono:"IBM Plex Mono", ui-monospace, monospace; --sans:"Archivo", system-ui, sans-serif; --serif:"Cormorant Garamond", Georgia, serif; /* spacing scale — 4px base */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px; --content-max:1600px; /* large screens: content caps here; bands keep bleeding full-width */ --pad-i:44px; /* fixed inner gutter for already-capped islands (journal reading column) */ --pad-x:max(var(--pad-i), calc((100% - var(--content-max)) / 2)); /* gutter grows to center content past --content-max; collapses to --pad-i below */ --sec-y:80px; /* section vertical padding */ /* type scale — modular */ --fs-1:13px; --fs-2:15px; --fs-3:17px; --fs-4:20px; --fs-5:26px; --fs-6:33px; --fs-7:42px; --fs-8:74px; /* motion */ --ease:cubic-bezier(.2,.6,.2,1); --t-fast:.16s; --t-slow:.5s; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:var(--sans);background:#2a2825;color:var(--ink);-webkit-font-smoothing:antialiased;} /* ---- global interaction layer ---- */ a{color:inherit;text-decoration:none;} button{font:inherit;} :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:1px;} /* a11y: skip-to-content link (visually hidden until focused) + landmark focus target */ .skip-link{position:absolute;left:8px;top:-64px;z-index:2000;background:var(--ink);color:var(--bg); padding:10px 16px;border-radius:4px;font-family:var(--mono);font-size:13px;letter-spacing:.04em; transition:top var(--t-fast) var(--ease);} .skip-link:focus{top:8px;} #main{display:block;} #main:focus{outline:none;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;} } /* ============ CONTROL BAR ============ */ .control{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:10px 20px;background:#0a0a09;border-bottom:1px solid #000;font-family:var(--mono);font-size:12px;color:#e9e6df;} .control .brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.04em;} .control .ps{width:26px;height:26px;border:1px solid #4a473f;border-radius:3px;display:grid;place-items:center;font-size:11px;color:#cfcabf;} .control .label{color:#7d7a72;text-transform:uppercase;letter-spacing:.14em;font-size:10px;} .canvas{max-width:1200px;margin:0 auto;padding:24px 22px 80px;} .dirhead{color:#cbc7bd;font-family:var(--mono);font-size:12px;line-height:1.7;margin:0 2px 16px;} .dirhead b{color:#fff;} /* ===================== LUX PAGE ===================== */ .lux{background:var(--bg);border-radius:4px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);} .ph{position:relative;background:repeating-linear-gradient(135deg,#1b1b1d 0 11px,#151517 11px 22px); display:grid;place-items:center;color:#6f6b62;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-align:center;border:1px solid #232325;} .ph span{padding:5px 9px;background:rgba(10,10,10,.5);border-radius:3px;max-width:85%;} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);} /* display type switch */ .lux .display{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;} /* ---- HEADER: utility strip + tab nav (echoes the seg-control + mono band) ---- */ .util{display:flex;align-items:center;gap:16px;padding:var(--s2) var(--pad-x);border-bottom:1px solid var(--line);background:var(--panel2); font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-strong);} .util .sp{flex:1;} .util .dot{opacity:.45;} .util b{color:var(--red);font-weight:500;} .util .av{display:inline-flex;align-items:center;gap:7px;color:var(--ink);} .util .av::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 22%,transparent);} /* header nav only (scoped so it doesn't clobber other