/* Badminton Raw — shared styles for content pages. Tokens mirror the inline system in index.html / roadmap.html. */ :root{ --ivory:#F5F1E9; --ivory-deep:#EFE8DC; --shell:#FCFAF6; --ink:#14110F; --ink-soft:#5B534C; --raw:#D5372C; --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --serif:"Instrument Serif",ui-serif,Georgia,serif; --pad:20px; } @media(min-width:1024px){:root{--pad:32px}} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--ivory);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative} ::selection{background:var(--ink);color:var(--ivory)} :focus-visible{outline:2px solid var(--raw);outline-offset:3px;border-radius:4px} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* backdrop */ .backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--ivory);pointer-events:none} .blob{position:absolute;border-radius:50%} .b1{left:-18%;top:-22%;width:70vmax;height:70vmax;background:radial-gradient(circle at 35% 35%,rgba(201,194,230,.42),rgba(201,194,230,0) 62%);filter:blur(40px)} .b2{right:-22%;top:6%;width:62vmax;height:62vmax;background:radial-gradient(circle at 60% 40%,rgba(190,211,232,.40),rgba(190,211,232,0) 60%);filter:blur(50px)} .b3{left:8%;top:52%;width:55vmax;height:55vmax;background:radial-gradient(circle at 50% 50%,rgba(242,205,182,.38),rgba(242,205,182,0) 60%);filter:blur(60px)} .veilTop{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,rgba(245,241,233,0) 35%,rgba(245,241,233,.75) 100%)} /* type */ .display{font-weight:600;letter-spacing:-.035em;line-height:.94;text-wrap:balance} .it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em} .label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(20,17,15,.5)} .eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--raw)} .lede{color:var(--ink-soft);line-height:1.65} .wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;transition:transform .3s,border-color .3s,color .3s;cursor:pointer;border:0} .btn-dark{background:var(--ink);color:var(--ivory);padding:16px 28px} .btn-dark:hover{transform:translateY(-2px)} .btn-ghost{border:1px solid rgba(20,17,15,.15);color:rgba(20,17,15,.75);padding:16px 28px;background:transparent} .btn-ghost:hover{border-color:rgba(20,17,15,.35);color:var(--ink)} /* header — scoped to #hdr, the public site header, on purpose. A bare `header` selector position:fixed'd EVERY
on any page that loads this file, including section headers inside the portal, which took them out of flow and let the content below render on top of them. */ header#hdr{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .5s,border-color .5s;border-bottom:1px solid transparent} header#hdr.scrolled{background:rgba(245,241,233,.72);backdrop-filter:blur(18px);border-bottom-color:rgba(20,17,15,.08)} .hd{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:1240px;margin:0 auto;padding:0 var(--pad)} @media(min-width:1024px){.hd{height:76px}} .brand{display:flex;align-items:center;gap:12px} .brand img{width:30px;height:auto} .brand b{display:block;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1} .brand span span{display:block;margin-top:4px;font-size:11px;letter-spacing:.06em;color:var(--ink-soft);line-height:1} /* Scoped to the public header on purpose. A bare `nav` selector also caught the portal sidebar and the module progress rail, laying them out as horizontal flex rows and hiding them below 1024px. `header nav` was still wide enough to catch a