/* ========================================================================== gokogsy.com — shared stylesheet Replaced the original Specimen system on 2026-07-27. The site is now the "Area" layout (paper ground, oversized high-contrast serif, monospace micro-labels, hairline structural rules) with the edge gradient device from the Dreamy Band EPK reference, in teal. Used by: the landing page and the evidence pages. NOT used by the calculator, the privacy notice or the Impressum — those three are self-contained by design, so a change here can never break a legal page or the data capture. That is deliberate. Do not "tidy" it by pointing them here. --------------------------------------------------------------------------- Contrast, measured against the paper #fdfcfa rather than guessed: --ink #0a0a0a 19.6:1 --body #3a3a3a 11.2:1 --label #6b6b6b 5.3:1 --acc #0f766e 5.4:1 white on this is also 5.4:1, so the pill passes --deep #115e59 7.5:1 --sage #9db8ac is DECORATION ONLY at roughly 1.9:1. No text is set in it. An earlier exploration used #d2d2d2 for a ghost grey: that is 1.51:1 and it made part of an

unreadable. Do not go lighter than --label for text. --------------------------------------------------------------------------- Zero third-party requests. One self-hosted font, below. No @import, no CDN, no analytics. The privacy notice states this, so breaking it makes a legal document untrue, and the acceptance suite asserts it on every page. ========================================================================== */ /* Instrument Serif, SIL Open Font License, latin subset, 21KB. SELF-HOSTED, NEVER HOTLINKED. A fonts.googleapis.com link would transmit every visitor's IP to Google before consent; that was the subject of a 2022 Munich ruling and HG Connect UG is Munich-registered. OFL requires the licence notice to travel with the font if it is ever replaced. */ @font-face{ font-family:"Instrument Serif"; src:url("/assets/instrument-serif.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } :root{ --paper:#fdfcfa; --ink:#0a0a0a; --body:#3a3a3a; --label:#6b6b6b; --acc:#0f766e; --deep:#115e59; --hair:#e3e8e6; --sage:#9db8ac; --wash:#f2f7f5; /* faintest teal tint, for callouts and code */ --rule:#0a0a0a; /* structural rules are ink, not grey */ --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; /* The fallbacks only show during the swap window or if the woff2 fails. Didot ships with macOS, Bodoni MT with Office on Windows, Georgia is the floor. Instrument Serif is narrower than all three. */ --serif:"Instrument Serif","Didot","Bodoni MT","Big Caslon",Georgia,"Times New Roman",serif; --gut:clamp(1.25rem,5vw,5rem); --max:78rem; --measure:34rem; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} } body{ margin:0;background:var(--paper);color:var(--body); font-family:var(--sans);font-size:1rem;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;height:auto} .skip{ position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff; padding:.75rem 1.25rem;z-index:99;text-decoration:none; } .skip:focus{left:0;color:#fff} /* --- the edge gradient -------------------------------------------------- Every stop fades to a ZERO-ALPHA COPY OF ITS OWN COLOUR, never to the `transparent` keyword: `transparent` is rgba(0,0,0,0), so a gradient running to it interpolates through transparent black and lays a grey fringe across the falloff. The colour is not faint, it is pushed to the margins by the paper wash in ::after. That is what keeps body text on paper and the ratios above valid. */ .edge{ position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(62% 46% at 0% -6%, rgba(157,184,172,1) 0%, rgba(157,184,172,0) 70%), radial-gradient(58% 42% at 100% -4%, rgba(139,169,189,.95) 0%, rgba(139,169,189,0) 72%), radial-gradient(34% 62% at -6% 52%, rgba(169,196,180,.85) 0%, rgba(169,196,180,0) 74%), radial-gradient(32% 52% at 106% 70%, rgba(157,184,172,.75) 0%, rgba(157,184,172,0) 74%), radial-gradient(52% 34% at 28% 106%, rgba(169,196,180,.6) 0%, rgba(169,196,180,0) 72%); } .edge::after{ content:'';position:absolute;inset:0; background:radial-gradient(70% 56% at 50% 44%, rgba(253,252,250,1) 32%, rgba(253,252,250,0) 100%); } /* --- layout ------------------------------------------------------------- */ .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)} /* Evidence pages are read, not scanned, so they run to a narrower column. */ body.evidence .wrap{max-width:58rem} .measure{max-width:var(--measure)} section,.section{padding:clamp(3rem,8vh,5.5rem) 0 0} .section > .wrap > :last-child{margin-bottom:0} .rule{border:0;border-top:1px solid var(--rule);margin:0} .hair{border:0;border-top:1px solid var(--hair);margin:0} /* --- nav ---------------------------------------------------------------- */ header{padding:2rem 0 0} nav{display:flex;align-items:center;justify-content:space-between;gap:2rem} .word{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none} .word img{width:38px;height:auto;display:block} .word span{font-size:1rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)} .navlinks{display:flex;gap:2rem;list-style:none;margin:0;padding:0} .navlinks a{font-size:.9375rem;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px} .navlinks a:hover{border-bottom-color:var(--acc)} @media (max-width:880px){.navlinks{display:none}} @media (max-width:480px){.word img{width:32px}.word span{font-size:.875rem;letter-spacing:.12em}} /* --- buttons ------------------------------------------------------------ */ /* Doubled 2026-07-28, on request. Every value below is exactly 2x what it was: .9375rem type, .85rem/1.5rem padding, .5rem gap. Two notes for whoever tunes this next. The calculator's Continue and Send it buttons are NOT affected. That page is self-contained and carries its own .btn, which is the point of the rule that the calculator, the privacy notice and the Impressum never load this stylesheet: a change here cannot reach the conversion surface or a legal page. The doubling is for standalone CTA pills only. The navigation pill shares this class and is exempted below, because at 2x it turned an 86px header into a 182px one on every evidence page and pushed the h1 down with it. */ .pill,.btn{ display:inline-flex;align-items:center;gap:.6rem; background:var(--acc);color:#fff;text-decoration:none; font-size:1.125rem;font-weight:600;padding:1.02rem 1.8rem; border-radius:999px;transition:background .15s ease; } /* THE HERO PILL KEEPS THE FULL SIZE. Everything else is 0.6x of it. Exactly one call to action on this site is allowed to be loud, and it is the one under "Nobody bills for the paperwork." Every other pill is a way onward from a page somebody is already reading, and at full size they competed with the hero instead of supporting it. Scoped to .hero-row, which exists only on the landing page. If a second hero ever appears, this rule follows it — decide then whether that is what you want, because two loud pills is the thing this split exists to prevent. */ .hero-row .pill,.hero-row .btn{ font-size:1.875rem;padding:1.7rem 3rem;gap:1rem; } /* Scoped to `nav` rather than `header` on purpose: on the landing page the hero pill sits inside
but outside