:root{ --paper:#F7F5F0; --paper-2:#EFEBE2; --ink:#12233A; --ink-soft:#2A3B50; --muted:#5B6570; --hair:#DAD6CC; --aqua:#17B0A6; --aqua-deep:#0E6E68; --signal:#E8963A; --white:#FFFFFF; --radius:14px; --maxw:1080px; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* subtle paper grain */ .grain{ position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5; background-image:radial-gradient(var(--hair) .5px,transparent .5px); background-size:4px 4px; mix-blend-mode:multiply; } /* ---------- HERO ---------- */ .hero{ position:relative;z-index:1; max-width:var(--maxw);margin:0 auto; padding:88px 28px 56px; } .hero__inner{max-width:720px} .hero__eyebrow{ font-family:"IBM Plex Mono",monospace; font-size:.74rem;letter-spacing:.14em;text-transform:uppercase; color:var(--aqua-deep);display:flex;align-items:center;gap:.6em;margin-bottom:26px; } .hero__eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--aqua); box-shadow:0 0 0 4px rgba(23,176,166,.18)} .hero__title{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800;line-height:.92;letter-spacing:-.03em; font-size:clamp(4rem,14vw,8.5rem); margin:0;color:var(--ink);display:flex;flex-direction:column; } .hero__title-sub{ font-family:"IBM Plex Mono",monospace; font-weight:500;font-size:clamp(.8rem,2.4vw,1.05rem); letter-spacing:.28em;text-transform:uppercase;color:var(--muted); margin-top:14px;padding-left:.25em; } .hero__lede{ font-size:clamp(1.08rem,2.2vw,1.32rem); color:var(--ink-soft);max-width:56ch;margin:30px 0 0; } .hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px} .tag{ font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.04em; padding:7px 13px;border:1px solid var(--hair);border-radius:100px; background:var(--white);color:var(--ink-soft); } .tag--signal{border-color:var(--signal);color:#B5691A;background:#FBF0E1} .hero__stamp{ position:absolute;top:70px;right:34px; width:112px;height:112px;border-radius:50%; border:2px solid var(--signal);color:var(--signal); display:grid;place-items:center;transform:rotate(-13deg); font-family:"Bricolage Grotesque",sans-serif;opacity:.9; } .hero__stamp::before{ content:"";position:absolute;inset:7px;border:1px dashed var(--signal);border-radius:50%;opacity:.6; } .hero__stamp span{font-weight:800;font-size:2.1rem;line-height:1} .hero__stamp em{ font-family:"IBM Plex Mono",monospace;font-style:normal; font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;margin-top:2px; } /* ---------- REPORT / SECTIONS ---------- */ .report{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 28px} .block{ display:grid;grid-template-columns:300px 1fr;gap:44px; padding:52px 0;border-top:1px solid var(--hair); } .block__rail{position:sticky;top:36px;align-self:start} .block__num{ font-family:"IBM Plex Mono",monospace;font-weight:600; font-size:.9rem;letter-spacing:.1em;color:var(--aqua-deep);margin-bottom:16px; } .block__title{ font-family:"Bricolage Grotesque",sans-serif;font-weight:700; font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.02;letter-spacing:-.02em; margin:0;color:var(--ink); } .block__sub{color:var(--muted);font-size:.96rem;margin:14px 0 0;max-width:34ch} /* ---------- TOPICS (accordion) ---------- */ .topics{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)} .topic{border-bottom:1px solid var(--hair)} .topic__head{ width:100%;background:none;border:0;cursor:pointer;text-align:left; display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px; padding:22px 4px;font:inherit;color:var(--ink); transition:padding-left .3s var(--ease); } .topic__head:hover{padding-left:10px} .topic__idx{ font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--muted); min-width:2ch; } .topic__title{ font-family:"Bricolage Grotesque",sans-serif;font-weight:500; font-size:clamp(1.12rem,2vw,1.32rem);letter-spacing:-.01em;line-height:1.25; } .topic__mark{ position:relative;width:34px;height:34px;flex:none;border-radius:50%; border:1px solid var(--hair);display:grid;place-items:center; transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease); } .topic__mark svg{width:17px;height:17px;fill:none;stroke:var(--ink-soft); stroke-width:2;stroke-linecap:round;grid-area:1/1; transition:opacity .3s var(--ease),transform .3s var(--ease)} .topic__mark .ic-check{opacity:0;transform:scale(.5);stroke:var(--white)} .topic__head:hover .topic__mark{border-color:var(--aqua)} /* open state */ .topic.is-open .topic__mark{background:var(--aqua);border-color:var(--aqua);transform:rotate(90deg)} .topic.is-open .ic-plus{opacity:0;transform:rotate(45deg) scale(.5)} .topic.is-open .ic-check{opacity:1;transform:scale(1)} .topic.is-open .topic__title{color:var(--aqua-deep)} .topic__panel{overflow:hidden} .topic__inner{ padding:2px 4px 30px 0;max-width:62ch; display:flex;flex-direction:column;gap:20px; } .prose{color:var(--ink-soft);font-size:1.03rem} .prose p{margin:0 0 .8em} .prose p:last-child{margin-bottom:0} .prose strong{color:var(--ink);font-weight:600} .prose img{max-width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--hair);margin:.6em 0} /* Tables are authored with quill-table-better: column widths ride in a