/* Novit brand directions board. Colours, fonts and logo are the fixed brand kit; nothing here changes them. */
@font-face{font-family:"Klarheit Kurrent";src:local("ES Klarheit Kurrent TRIAL Light"),url(fonts/Klarheit-Lt.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Klarheit Kurrent";src:local("ES Klarheit Kurrent TRIAL Regular"),url(fonts/Klarheit-Rg.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Klarheit Kurrent";src:local("ES Klarheit Kurrent TRIAL Medium"),url(fonts/Klarheit-Md.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Suisse Intl";src:url(fonts/Suisse-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Suisse Intl";src:url(fonts/Suisse-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Suisse Intl";src:url(fonts/Suisse-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --midnight:#010128; --obsidian:#000017; --slate:#2F2F46; --mint:#99EEFE; --lumen:#F8F8F8;
  /* working tints: mixes of the five kit colours only */
  --ink-70:rgba(1,1,40,.7); --ink-50:rgba(1,1,40,.5); --ink-12:rgba(1,1,40,.12); --ink-06:rgba(1,1,40,.06);
  --mint-40:rgba(153,238,254,.4); --mint-18:rgba(153,238,254,.18);
  --head:"Klarheit Kurrent","Suisse Intl",system-ui,sans-serif; --body:"Suisse Intl",system-ui,sans-serif;
  --wrap:1312px; --r:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--midnight);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3{font-family:var(--head);font-weight:400;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:52px;line-height:1.06}
h2{font-size:36px;line-height:1.12}
h3{font-size:22px;line-height:1.2;letter-spacing:-.01em}
p{text-wrap:pretty}
.wrap{width:min(var(--wrap),calc(100% - 200px));margin-inline:auto}
@media (max-width:1100px){.wrap{width:calc(100% - 48px)}h1{font-size:40px}h2{font-size:28px}}
.muted{color:var(--ink-70)}
.small{font-size:14px;line-height:1.45}
.label{font:500 13px/1.3 var(--body);color:var(--ink-70)}
.num{font-family:var(--head);font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-12)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.tabs{display:flex;gap:4px}
.tabs a{font:500 14px/1 var(--body);padding:10px 14px;border-radius:999px;color:var(--ink-70)}
.tabs a.on{background:var(--midnight);color:#fff}

/* sections */
section{padding:72px 0}
section + section{border-top:1px solid var(--ink-12)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;margin-bottom:32px}
.sec-head h2{grid-column:1 / span 7}
.sec-head p{grid-column:9 / span 4;color:var(--ink-70);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.panel{background:var(--lumen);border-radius:var(--r);overflow:hidden;position:relative}
.panel.dark{background:var(--midnight);color:#fff}
.panel.line{background:#fff;border:1px solid var(--ink-12)}
.pad{padding:28px}
.rule{height:1px;background:var(--ink-12);border:0;margin:0}
.dark .muted{color:rgba(255,255,255,.72)} .dark .label{color:rgba(255,255,255,.72)}

/* spec rows: label left, value right, hairline between */
.spec{display:grid;grid-template-columns:1fr auto;gap:0;font-size:14px;margin:0}
.spec > *{padding:11px 0;border-top:1px solid var(--ink-12)}
.spec > :nth-child(-n+2){border-top:0}
.spec dt{color:var(--ink-70)} .spec dd{margin:0;padding-left:24px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.dark .spec > *{border-color:rgba(255,255,255,.16)} .dark .spec dt{color:rgba(255,255,255,.72)}

.swatch{display:flex;align-items:flex-end;height:88px;border-radius:8px;padding:10px 12px;font:500 12px/1.2 var(--body)}
figure.ph{position:relative;border-radius:var(--r);overflow:hidden;background:var(--slate)}
figure.ph img{width:100%;height:100%;object-fit:cover}
figcaption{font-size:13px;color:var(--ink-70);margin-top:8px}