@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+2192}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2192}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
:root{--white:#f2f2f0;--grey:#8c8c8a;--serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;--side:clamp(18px,3.2vw,52px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--white);font:400 19px/1.4 var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,p,a{overflow-wrap:break-word;word-wrap:break-word}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid var(--white);outline-offset:6px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--white);color:#000;padding:8px 12px;z-index:9}
.skip:focus{left:8px}
section,.foot{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}

.top{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:baseline;padding:20px var(--side)}
.top nav{display:flex;gap:26px}
.top a{border-bottom:1px solid transparent}
.top a:hover{border-bottom-color:currentColor}

/* hero: the terrain fills the screen; the words hang in the sky above it and run off the right edge */
.hero{display:block}
@media (max-width:900px) and (orientation:portrait){.hero{min-height:62vh;min-height:62svh}}
#terrain{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
h1{position:absolute;z-index:2;left:var(--side);bottom:calc(var(--side) + 2px);margin:0;font:400 clamp(20px,1.7vw,28px)/1.2 var(--serif);letter-spacing:-.01em;text-shadow:0 0 16px #000,0 0 6px #000}

/* sections: a kicker, one serif statement, then the content */
.block{min-height:0;padding:16vh var(--side) 12vh;border-top:1px solid #1c1c1c}
.kicker{margin:0 0 18px;font-style:italic;color:var(--grey);font-size:clamp(19px,1.5vw,24px)}
.statement{margin:0 0 9vh;max-width:17em;font:400 clamp(36px,4.6vw,76px)/1.02 var(--serif);letter-spacing:-.03em}
h3{margin:0 0 8px;font:400 clamp(24px,2vw,30px)/1.1 var(--serif);letter-spacing:-.01em}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.facts div{border-top:1px solid #333;padding-top:18px}
.facts p{margin:0;color:#cfcfcc;font-size:18px}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);gap:8px 32px;align-items:baseline;padding:22px 0;border-top:1px solid #333}
.rows li:last-child{border-bottom:1px solid #333}
.rows h3{margin:0;font-size:clamp(30px,3.2vw,52px);letter-spacing:-.03em}
.rows p{margin:0;color:#cfcfcc}
.tag{justify-self:end;font-style:italic;color:var(--grey);font-size:16px;white-space:nowrap}
.rows li:first-child .tag{color:var(--white)}
.rule{margin:7vh 0 0;max-width:30em;font-size:clamp(21px,1.8vw,28px);line-height:1.3}
.rule a,.go{border-bottom:1px solid var(--grey)}
.rule a:hover,.go:hover{border-bottom-color:var(--white)}
.big{margin:0 0 20px -.05em;font:400 clamp(60px,min(14vw,20vh),280px)/.82 var(--serif);letter-spacing:-.055em;white-space:nowrap}
.lead-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 48px;margin-bottom:8vh}
.lead-row p{margin:0;max-width:26em;font-size:clamp(19px,1.5vw,24px)}
.go{margin-left:auto;font-style:italic;font-size:clamp(19px,1.5vw,24px)}
.shot{margin:0 auto 7vh;max-width:1100px}
.shot img{width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px #262626,0 30px 80px -30px rgba(255,255,255,.08)}
.shot figcaption,.phone-cap{margin-top:14px;color:var(--grey);font-size:16px;font-style:italic}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:1100px;margin:0 auto}
.pair .shot{margin-bottom:7vh}
.phones{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;max-width:1100px;margin:0 auto}
.phone{margin:0;width:min(300px,44vw)}
.phone img{border-radius:28px}
.phone-cap{flex-basis:100%;text-align:center;margin:6px 0 0}
.also{padding-top:10vh;padding-bottom:4vh}
.also .lead-row{margin-bottom:0}
.also strong{font-weight:400;font-style:italic}

/* footer: the address is the headline */
.foot{display:flex;flex-direction:column;justify-content:flex-end;padding:16vh var(--side) 40px;border-top:1px solid #1c1c1c}
.write{margin:0 0 6px;font-style:italic;color:var(--grey);font-size:clamp(19px,1.5vw,24px)}
.mail{display:block;margin:0 0 12vh -.04em;font:400 clamp(40px,8.6vw,170px)/.9 var(--serif);letter-spacing:-.045em;white-space:nowrap}
.mail:hover{font-style:italic}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;font-size:15px;line-height:1.5;color:var(--grey)}
.cols p{margin:0 0 14px}
.cols p:nth-child(1){grid-column:1/5;color:var(--white)}
.cols p:nth-child(2){grid-column:5/9}
.cols p:nth-child(3){grid-column:9/13}
.cols a{border-bottom:1px solid #444}
.page{padding:140px var(--side) 80px;max-width:900px}
.page h1{white-space:normal;padding:0;font-size:clamp(44px,7vw,96px);margin-bottom:32px}
.page h2{font:italic 400 28px/1.1 var(--serif);margin:40px 0 10px}
.page p,.page li{color:#cfcfcc;max-width:36em}
.page a{border-bottom:1px solid var(--grey)}

@media (max-width:1000px) and (min-width:761px){.facts{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
.top nav{gap:16px;font-size:16px}
.top nav a:not(:last-child){display:none}
.go{margin-left:0}
.facts{grid-template-columns:1fr}
.rows li{grid-template-columns:1fr}
.tag{justify-self:start}
.pair{grid-template-columns:1fr}
.big{font-size:15.5vw}
.cols{display:block}
.mail{font-size:9.6vw}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}