/* ROKLAB (by Rudi Rok): shared base. Fonts (loaded once from shared/fonts/), colour tokens, the type and spacing scales and the
   shared page frame (ad line, header, wordmark, bands). Every page links this file first. A product page sets its own --accent
   in its styles.css; the hub stays black and white (--accent = ink). Fonts never change under the same file name, so they are cached as immutable. */
@font-face{font-family:Archivo;src:url('fonts/archivo-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url('fonts/archivo-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Anybody;src:url('fonts/anybody-800-condensed.ttf') format('truetype');font-weight:800;font-stretch:condensed;font-display:swap}
:root{--paper:#FFF;--tint:#F2F3F8;--ink:#111117;--accent:#111117;--muted:#55555F;--line:#DEDEE6;--body:Archivo,Arial,sans-serif;--display:Anybody,Impact,sans-serif;--gutter:36px;
/* Type scale: six sizes per breakpoint. */
--fs-display:56px;--fs-title:24px;--fs-lead:18px;--fs-body:16px;--fs-small:14px;
--lh-display:1.02;--lh-lead:1.5;--lh-text:1.6;--lh-ui:1.3;
/* Spacing scale and section rhythm. */
--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--section:80px;--col-gap:28px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;background:var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper);font:400 var(--fs-body)/var(--lh-text) var(--body);-webkit-text-size-adjust:100%}
button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:4px}a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}img,video{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}h1,h2,h3{text-wrap:balance}p,li{text-wrap:pretty}strong{font-weight:700}p+p{margin-top:1em}[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:5px}.primary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.wrap{max-width:1360px;margin:auto;padding-inline:var(--gutter)}.section{padding-block:var(--section)}
h2,h3{font-family:var(--body);font-weight:700;letter-spacing:-.025em;line-height:1.15}h2{font-size:36px}
/* Keeps a short phrase on one line, so a wrap never leaves a word or a "·" alone. */
.nowrap{white-space:nowrap}
/* Bands: full-bleed colour behind a .wrap section, no markup change. Sections are separated by colour, not by lines.
   Each band reaches 1px up over the section before it, so two bands meeting at a fractional pixel leave no light seam. */
.band{background:var(--tint);box-shadow:0 0 0 100vmax var(--tint);clip-path:inset(-1px -100vmax 0)}
.band-ink{background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(-1px -100vmax 0)}
.skip{position:fixed;left:12px;top:12px;transform:translateY(-160%);background:var(--accent);color:var(--paper);padding:12px;z-index:100}.skip:focus{transform:none}
/* The ad disclosure: one calm sentence above everything else. */
.ad-bar{margin:0;background:var(--tint);color:var(--muted);font-size:var(--fs-small);line-height:1.45}.ad-bar>.wrap{display:block;padding-block:9px}.ad-bar strong{color:var(--ink)}
/* Header lockup: "ROKLAB" in the display face with "by Rudi Rok" beside it on one baseline; on phones (up to 499 px)
   "by Rudi Rok" sits under the name, so the lockup and the links fit down to 320 px. */
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:12px;background:var(--paper)}.signature{display:inline-grid;grid-auto-flow:column;align-items:baseline;align-content:center;column-gap:9px;min-height:44px;text-decoration:none;white-space:nowrap}.signature-name{font-family:var(--display);font-weight:800;font-stretch:condensed;font-size:30px;line-height:1;letter-spacing:-.01em}.signature-by{font-size:15px;line-height:1;color:var(--muted)}.header nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:700}.header nav a{display:inline-block;padding:12px 0 10px;line-height:20px;white-space:nowrap;border-bottom:2px solid transparent;text-decoration:none}.header nav a:last-child{border-bottom-color:var(--accent)}
@media(max-width:1099px){:root{--gutter:28px;--section:64px}}
@media(max-width:799px){:root{--gutter:24px;--section:56px}.header{padding-block:10px}}
@media(max-width:499px){:root{--gutter:18px;--section:48px;--col-gap:20px;--fs-display:42px;--fs-title:22px;--fs-lead:17px;--fs-small:13px}.ad-bar>.wrap{padding-block:8px}.header{padding-block:6px;gap:16px}.signature{grid-auto-flow:row;justify-items:start;row-gap:2px}.signature-name{font-size:25px}.signature-by{font-size:12px}.header nav{gap:12px}}
@media(max-width:359px){.signature-name{font-size:23px}.header nav{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}