:root{
  --bg:#0e1117; --ink:#e9e4d8; --dim:rgba(233,228,216,.48); --line:rgba(233,228,216,.16);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-decoration:none}

.top{display:flex;justify-content:center;padding:56px 24px 0}
.mono{width:46px;height:46px;overflow:visible}
.mono rect{fill:none;stroke:var(--ink);stroke-width:.75;vector-effect:non-scaling-stroke;opacity:.85}
.mono rect:first-child{opacity:.35}
.mono text{fill:var(--ink);font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:1.5px}

main{flex:1}

.hero{min-height:calc(100vh - 102px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px 8vh}
.wordmark{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7vw,6rem);letter-spacing:.32em;
  margin-right:-.32em;line-height:1;white-space:nowrap}
.rule{display:block;width:56px;height:1px;background:var(--line);margin:48px 0 40px}
.sub{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);margin-right:-.34em}

.statement{padding:22vh 24px;text-align:center;border-top:1px solid var(--line)}
.statement p{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.45;letter-spacing:.01em}

.correspondence{padding:18vh 24px 22vh;text-align:center;border-top:1px solid var(--line)}
.label{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);margin-right:-.34em;margin-bottom:26px}
.mail{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:.06em;
  padding-bottom:6px;background:linear-gradient(var(--ink),var(--ink)) no-repeat left bottom/0 1px;transition:background-size .8s ease}
.mail:hover,.mail:focus-visible{background-size:100% 1px;outline:none}

.foot{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;padding:34px 24px 40px;
  border-top:1px solid var(--line);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.sep{width:3px;height:3px;border-radius:50%;background:var(--dim)}

.js .fade{opacity:0;transition:opacity 1.8s ease}
.js .fade.in{opacity:1}

@media (max-width:600px){
  .top{padding-top:40px}
  .mono{width:40px;height:40px}
  .hero{min-height:calc(100vh - 80px);padding-bottom:10vh}
  .wordmark{letter-spacing:.22em;margin-right:-.22em;font-size:clamp(2.1rem,10vw,2.8rem)}
  .rule{margin:36px 0 30px}
  .sub{font-size:.64rem;letter-spacing:.28em;margin-right:-.28em}
  .statement{padding:16vh 28px}
  .correspondence{padding:14vh 24px 16vh}
  .foot{flex-direction:column;gap:10px}
  .sep{display:none}
}
@media (prefers-reduced-motion:reduce){.js .fade{opacity:1;transition:none}}