:root{--paper:#F3F1EC;--ink:#0C0D0F;--black:#08090A;--amber:#8E5C24;--mineral:#C3CFC7;
--serif:'Newsreader',Georgia,serif;--sans:'Archivo',Arial,sans-serif;--line:rgba(12,13,15,.12);
--gut:clamp(22px,6vw,96px);--max:1240px;--hd:68px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:16px}
body.lock{overflow:hidden}
h1,h2,h3,p,ul,figure{margin:0}
.ink{filter:brightness(0)}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* header */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;gap:32px;
  height:calc(var(--hd) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(var(--gut),calc((100% - var(--max))/2 + var(--gut))) 0;
  background:var(--black);color:var(--paper);border-bottom:1px solid rgba(243,241,236,.1)}
.hd.paper{background:var(--paper);color:var(--ink);border-bottom-color:var(--line)}
.hd-logo{display:flex;align-items:center;min-height:44px}
.hd-logo img{height:24px;width:auto;display:block}
.hd-logo .li,.hd.paper .hd-logo .lw{display:none}
.hd.paper .hd-logo .li{display:block}
.hd-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.hd-nav a{font-size:13px;font-weight:600;text-decoration:none;opacity:.55;padding:12px 0}
.hd-nav a:hover,.hd-nav a[aria-current]{opacity:1}
.hd-nav .nav-out{display:none}
.hd-out{font-size:13px;font-weight:800;text-decoration:none;padding:12px 0}
.hd-menu{display:none}
@media(max-width:960px){
  .hd-nav{display:none}
  html:not(.js) .hd-nav{display:flex;overflow-x:auto;gap:18px}
  .hd-out{margin-left:auto}
  .js .hd-out{display:none}
  .js .hd-menu{display:inline-flex;align-items:center;margin-left:auto;min-height:44px;padding:0;background:none;border:0;color:inherit;font:800 14px/1 var(--sans);letter-spacing:-.01em;cursor:pointer}
  .hd-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:fixed;left:0;right:0;bottom:0;
    top:calc(var(--hd) + env(safe-area-inset-top,0px));margin:0;padding:12px var(--gut) calc(32px + env(safe-area-inset-bottom,0px));
    background:var(--black);color:var(--paper);overflow-y:auto}
  .hd-nav.open a{font-size:clamp(28px,8vw,40px);font-weight:900;letter-spacing:-.045em;opacity:1;padding:14px 0;border-bottom:1px solid rgba(243,241,236,.14)}
  .hd-nav.open .nav-out{display:block;font-weight:800;font-size:16px;letter-spacing:0;border:0;opacity:.7;margin-top:18px}
}

/* chapters */
.ch{padding:clamp(96px,15vh,176px) 0}
.ch:not(.dark)+.ch:not(.dark){border-top:1px solid var(--line)}
.dark{background:var(--black);color:var(--paper);--line:rgba(243,241,236,.14)}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;opacity:.45;margin-bottom:clamp(22px,4vh,40px)}
.h2{font-weight:900;letter-spacing:-.05em;line-height:.92;font-size:clamp(2.5rem,6.4vw,5.4rem);max-width:13ch}
.note{font-family:var(--serif);font-size:clamp(16px,1.6vw,19px);line-height:1.65;max-width:40ch;opacity:.75;margin-top:clamp(20px,3vh,32px);letter-spacing:-.01em}
.sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:.45;margin-bottom:20px}
.split{display:grid;gap:clamp(48px,7vw,110px);margin-top:clamp(64px,10vh,120px)}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hd) + 72px) 0 clamp(40px,7vh,80px)}
.hero .wrap{width:100%}
.hero h1{font-weight:900;letter-spacing:-.05em;line-height:.86;font-size:clamp(3.6rem,12vw,10.5rem);max-width:9ch}
.lead{font-family:var(--serif);font-weight:300;letter-spacing:-.018em;font-size:clamp(1.3rem,2.5vw,2.05rem);line-height:1.3;max-width:28ch;margin-top:clamp(26px,4vh,44px);opacity:.82}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(56px,11vh,130px);padding-top:20px;border-top:1px solid var(--line);font-size:13px;font-weight:600}
.hero-foot span{opacity:.5}
.hero-foot a{text-decoration:none;opacity:.8;padding:12px 0}
.hero-foot a:hover{opacity:1}

/* logo */
.logos{display:grid;gap:14px;margin-top:clamp(48px,7vh,72px)}
@media(min-width:760px){.logos{grid-template-columns:1fr 1.6fr 1.6fr}}
.tile{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:#E9E6DF}
.tile.dk{background:var(--black)}
.tile img{height:clamp(30px,3.8vw,46px);width:auto;display:block}
.logos figcaption{font-size:13px;font-weight:600;opacity:.55;margin-top:12px}
.clear{display:inline-block;padding:clamp(24px,3.4vw,42px);outline:1px dashed rgba(12,13,15,.28)}
.clear img{display:block;height:clamp(32px,4vw,48px);width:auto}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.specs b{display:block;font-size:12px;font-weight:700;opacity:.55;margin-bottom:8px}
.specs p{font-size:14px;line-height:1.7;font-variant-numeric:tabular-nums}
.rules{list-style:none;padding:0;margin:0;max-width:44ch}
.rules li{font-size:15px;line-height:1.6;padding:16px 0;border-bottom:1px solid var(--line)}
.rules li:first-child{border-top:1px solid var(--line)}
.rules b{font-weight:800}

/* type */
.facerow{display:grid;gap:18px 48px;align-items:end;padding:clamp(40px,6vh,64px) 0;border-bottom:1px solid var(--line)}
.facerow:first-of-type{border-top:1px solid var(--line)}
@media(min-width:900px){.facerow{grid-template-columns:1.7fr 1fr}}
.face{font-weight:900;letter-spacing:-.05em;line-height:.84;font-size:clamp(3.6rem,10.5vw,9rem)}
.face.s{font-family:var(--serif);font-weight:300;letter-spacing:-.022em;line-height:.94}
.facerow .note{margin-top:0}
.pair{display:grid;gap:clamp(36px,5vh,56px) clamp(40px,6vw,96px);margin-top:clamp(64px,10vh,110px)}
@media(min-width:820px){.pair{grid-template-columns:1fr 1fr}}
.pair .sz{font-size:12px;opacity:.5;margin-top:14px;font-variant-numeric:tabular-nums}

/* colour */
.envs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px);margin-top:clamp(48px,7vh,72px)}
@media(min-width:760px){.envs{grid-template-columns:repeat(4,1fr)}}
.env .art{aspect-ratio:3/4;overflow:hidden;display:flex;align-items:center;justify-content:center}
.env .art img{width:260%;height:auto;flex:0 0 auto;max-width:none;transform:translateX(calc(var(--t,0) * 9%))}
.env b{display:block;margin-top:14px;font-size:14px;font-weight:800}
.env span{display:block;font-size:13px;opacity:.5;margin-top:2px;font-variant-numeric:tabular-nums}
.e1 .art{background:linear-gradient(180deg,#F3F1EC,#E6E4E0)}
.e2 .art{background:linear-gradient(180deg,#F0E4D5,#E4CCAE)}
.e3 .art{background:linear-gradient(180deg,#E7ECE8,#C3CFC7)}
.e4 .art{background:linear-gradient(180deg,#141619,#08090A)}
.e4 .art img{filter:brightness(.8) contrast(1.08)}

/* voice */
.two{display:grid;gap:clamp(36px,6vw,96px);margin-top:clamp(48px,7vh,72px)}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}
.two p:not(.sub){font-family:var(--serif);font-weight:300;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.45;letter-spacing:-.018em}
.two .never p:not(.sub){opacity:.45;text-decoration:line-through;text-decoration-thickness:1px}

/* downloads */
.kit{display:grid;gap:40px 28px;margin-top:clamp(48px,7vh,72px)}
@media(min-width:860px){.kit{grid-template-columns:repeat(3,1fr)}}
.kit article{border-top:1px solid var(--line);padding-top:24px}
.kit h3{font-size:22px;font-weight:900;letter-spacing:-.04em}
.kit p{font-family:var(--serif);font-size:16px;line-height:1.6;opacity:.75;margin:10px 0 20px;max-width:34ch}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;font-size:14px;font-weight:800;text-decoration:none;border:1px solid currentColor}
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.kit-all{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:56px}
.kit-all a:not(.btn){font-size:14px;font-weight:700;padding:12px 0}

/* test */
.test{min-height:80svh;display:flex;align-items:center}
.test .observe{font-family:var(--serif);font-weight:300;letter-spacing:-.022em;line-height:1.05;font-size:clamp(2.4rem,6.4vw,5.6rem);max-width:17ch}

/* footer */
.ft{background:var(--black);color:var(--paper);border-top:1px solid rgba(243,241,236,.14);padding:56px 0 calc(40px + env(safe-area-inset-bottom,0px))}
.ft .wrap{display:grid;gap:22px}
.ft img{height:28px;width:auto;display:block;margin-bottom:12px}
.ft p{font-size:13px;line-height:1.6;opacity:.6}
.ft nav{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:8px}
.ft nav a{font-size:14px;font-weight:700;text-decoration:none;padding:12px 0}

/* text rises */
.js .r{opacity:0;transform:translateY(28px)}
.js .r.in{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .r{opacity:1;transform:none}.env .art img{transform:none}}

@media(max-width:700px){
  :root{--hd:60px}
  .ch{padding:80px 0}
  .hero{padding-top:calc(var(--hd) + 56px)}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:4px}
  .specs{grid-template-columns:1fr 1fr}
  .tile{aspect-ratio:16/9}
}
@media print{.hd{display:none}.js .r{opacity:1;transform:none}.hero,.test{min-height:auto}}