/* One look for the whole site (02-11-2026): the film language of the home page on every other page.
   Graphite, letterbox bars, warm orange and teal, Instrument Sans with mono labels. Loaded after site.css / extra.css / i18n.css: it only re-themes, the layout stays. */
:root{
  --wall:#0a0b0e;--wall-2:#10131a;--paper:#14171c;--paper-2:#0e1115;--ink:#ece8df;--ink-2:#d8d4ca;--muted:#c2beb3;
  --night:#07080a;--night-2:#10131a;--night-ink:#ece8df;--night-muted:#c9c5ba;
  --brass:#ff9a3c;--brass-d:#ffb36a;--brass-l:#ffc58a;--verdigris:#4fd1c5;--oxblood:#ff9b8a;--danger:#ff9b8a;
  --oak-1:#2a2d33;--oak-2:#1a1c21;--oak-3:#0f1013;
  --line:rgba(236,232,223,.24);--line-night:rgba(236,232,223,.26);
  --serif:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Space Mono',ui-monospace,Menlo,monospace;
  --r:4px;
  --noise:none;
}
html{background:#07080a}
body{background:radial-gradient(70% 40% at 6% 0,rgba(255,150,60,.09),transparent 70%),radial-gradient(60% 40% at 100% 40%,rgba(79,209,197,.06),transparent 70%),#0a0b0e;color:var(--ink);font-size:17px;letter-spacing:.003em}
a{color:var(--verdigris)}a:hover{color:#fff}
.dark a:not(.btn){color:var(--brass-l)}
:focus-visible{outline-color:var(--verdigris)}
.skip{background:#fff;color:#000}
h1,h2,h3{font-family:var(--sans);font-weight:600;letter-spacing:-.022em;line-height:1.05}
h1 em,h2 em{font-style:normal;color:var(--brass)}
.lead{font:400 clamp(1.1rem,1.7vw,1.3rem)/1.5 var(--sans);color:#e6e2d9}
.eyebrow,.foot-h,.vst thead th{font-family:var(--mono);font-weight:400;letter-spacing:.14em;color:var(--verdigris)}
.eyebrow::before{width:28px;background:var(--brass)}
.dark .eyebrow{color:var(--verdigris)}
.fine,.dark .fine{color:var(--muted)}
.err,.dark .err{color:#ffb4a8}.ok{color:var(--verdigris)}
.badge{background:#1a1510;color:var(--brass-l);border:1px solid var(--brass);font-family:var(--mono);font-weight:400}

/* sections: film perforation instead of crop marks */
.sect{padding:clamp(56px,9vw,112px) 0}
.sect::before,.sect::after{display:none}
.sect+.sect:not(.dark){border-top:0}
.sect::before{display:block;content:'';position:absolute;top:0;left:var(--gut);right:var(--gut);width:auto;height:10px;opacity:1;color:inherit;background:repeating-linear-gradient(90deg,rgba(255,154,60,.55) 0 7px,transparent 7px 16px,rgba(236,232,223,.2) 16px 32px,transparent 32px 42px);-webkit-mask:linear-gradient(90deg,#000 0,#000 70%,transparent);mask:linear-gradient(90deg,#000 0,#000 70%,transparent);border-radius:2px}
.sect.alt{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.dark{background:radial-gradient(90% 70% at 50% 0,#141a1f 0,#07080a 62%,#050607 100%);color:var(--night-ink)}

/* header: the letterbox bar */
.site-head{background:linear-gradient(rgba(0,0,0,.94),rgba(0,0,0,.82));color:var(--night-ink);border-bottom:1px solid var(--line-night);position:sticky;top:var(--rv-h,0px);z-index:30;backdrop-filter:blur(8px)}
.brand{font:600 1.15rem/1 var(--sans);letter-spacing:.005em}
.brand .mark{color:var(--brass)}
.nav a{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;border-bottom-width:1px}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--brass);color:var(--brass-l)}
.region{border-radius:3px;border-color:var(--line-night)}
.lang-select,.country-btn{background:#0b0d10;color:#fff}
.nav-toggle{border-radius:3px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
.devbar{background:#1b150d;color:#ffd9a8;border-bottom:1px solid var(--brass)}
.site-foot{background:#07080a;border-top:1px solid var(--line-night)}
.foot-grid a{color:#ece8df}.foot-h{color:var(--brass)}

/* buttons */
.btn{border:0;border-radius:3px;background:var(--brass);color:#150d05;font:600 1rem var(--sans);letter-spacing:.02em;box-shadow:0 8px 24px -8px rgba(0,0,0,.7)}
.btn:hover{color:#150d05;filter:brightness(1.08)}
.btn:active{box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(236,232,223,.6)}
.btn.ghost:hover,.dark .btn.ghost:hover{background:rgba(255,255,255,.07);color:var(--verdigris);box-shadow:inset 0 0 0 1px var(--verdigris)}

/* forms */
input[type=text],input[type=email],input[type=search],input[type=date],input[type=number],input[type=tel],select,textarea{background:#0b0d10;color:#fff;border:1.5px solid rgba(255,255,255,.7);border-radius:3px}
input::placeholder,textarea::placeholder{color:#cfcbc1;opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--verdigris);outline:2px solid var(--verdigris);outline-offset:1px}
label,legend{color:#fff}
.seg label,.sizes label,.cand,.row,.sym span,.csteps button,.seg2 label{background:var(--paper-2);color:var(--ink);border-color:var(--line)}
.seg2 label:has(input:checked),.csteps button[aria-current=step] b{background:var(--verdigris);color:#04201d}
.csteps button b{background:#1c2128;color:#fff}
.tinct span,.pin span{border-color:#0a0b0e;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.swatch{background:var(--paper);color:var(--ink)}
.swatch[aria-pressed=true],.swatch:has(input:checked){border-color:var(--brass);box-shadow:0 0 0 2px #0a0b0e inset}

/* surfaces */
.tier,.card,.feat,.panel,.group,.summary,.lib-list li,.notify,.rv-grp,.plan-card,.plan-terms,.print-guide,.regions li,.chip-status,.vcard{background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px -28px rgba(0,0,0,.9);border-radius:3px;color:var(--ink)}
.tier.feature{border-color:var(--brass);background:linear-gradient(180deg,#1a1510,#14171c 60%);box-shadow:0 0 0 1px rgba(255,154,60,.35),0 40px 120px -50px rgba(255,154,60,.4)}
.vcard{border:1px solid var(--brass)}
.feat .tag{color:var(--brass);font-family:var(--mono);font-weight:400}
.todo{background:#2a2010;color:#ffd9a8;border-bottom-color:var(--brass)}
.cfg-stage{background:#0a0b0e;box-shadow:0 10px 14px -12px rgba(0,0,0,.9)}
.table th,.prose th{background:#161a20;color:#fff}
.table td,.prose td,.table th,.prose th{border-color:var(--line)}
details{border-bottom-color:var(--line)}
summary{font:600 1.15rem/1.3 var(--sans)}
summary::after{color:var(--brass)}
.prose{font:400 1.08rem/1.65 var(--sans);color:#e6e2d9}
.prose h2,.prose h3{color:#fff}

/* frames: a thin dark edge, not an oak frame; labels like a clapperboard */
.frame{background:#000;padding:clamp(4px,.8vw,8px);box-shadow:0 30px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(236,232,223,.18)}
.frame[data-frame]{background:#000}
.mat{background:#0d0e12;padding:clamp(4px,1vw,10px);box-shadow:none}
.placard{background:rgba(0,0,0,.72);color:var(--ink);border:0;border-left:2px solid var(--brass);box-shadow:none;border-radius:0}
.placard b{font:600 1.15rem/1.2 var(--sans)}
.placard .meta{font-family:var(--mono);font-weight:400;color:#cfcbc1}
.compare .tag{font-family:var(--mono);font-weight:400;border-radius:0;background:#000}
.compare .handle::after{background-color:rgba(0,0,0,.72);border:2px solid var(--brass)}

/* country dialog */
.country-dialog{background:var(--paper);color:var(--ink);border-color:var(--line)}
.cd-filter{background:#0b0d10;color:#fff;border-color:rgba(255,255,255,.7)}
.cd-list button:hover{background:#1c2128}
dialog::backdrop{background:rgba(0,0,0,.7)}

/* the pages that used to sit on cream: make sure nothing stays light */
.hero{background:radial-gradient(70% 80% at 74% 42%,#1a2228 0,#07080a 62%)}
main{color:var(--ink)}
.tier h3,.card h3{color:#fff}
.price{color:var(--brass)}

@media(max-width:900px){.site-head{position:relative}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* long words (German, Dutch) must wrap instead of widening the page on a phone */
main p,main li,main td,main th,main dd,main dt,main h1,main h2,main h3,main summary,main label,main a{overflow-wrap:anywhere}
.lang-bar{background:#14171c;color:#ece8df;border-bottom:1px solid var(--line)}.lang-bar a{color:var(--brass-l)}.lang-bar button{background:none;border:1px solid rgba(236,232,223,.6);color:#ece8df;border-radius:3px}