@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#faf9f4;
  --ink:#131311;
  --graphite:#6e6d64;
  --red:#ff0000;

  --font-display:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --edge: clamp(24px, 6vw, 96px);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{background:var(--paper); overflow-x:hidden;}

body{
  font-family:var(--font-display);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
  cursor:url('images/cursor-mark.png') 16 16, auto;
}

a{ text-decoration:none; color:inherit; }
a, button{ cursor:url('images/cursor-mark.png') 16 16, pointer; }

::selection{background:var(--red); color:var(--paper);}

.wrap{max-width:1560px; margin:0 auto; padding-left:var(--edge); padding-right:var(--edge);}

/* ---------- header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:2.4rem;
  padding:1.6rem var(--edge);
}
.wordmark{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.18rem;
  letter-spacing:-.01em;
}
.wordmark-icon{width:32px; height:auto; display:block;}
.wordmark span{color:var(--red);}

.site-nav{display:flex; gap:1.8rem;}
.site-nav a{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink);
  position:relative;
  padding-bottom:2px;
}
.site-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.site-nav a:hover::after{transform:scaleX(1); transform-origin:left;}

/* ---------- hero ---------- */
.hero{
  min-height:calc(100vh - 90px);
  display:flex; flex-direction:column; justify-content:center;
  padding-top:2rem; padding-bottom:4rem;
}
.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:1.8rem;
  overflow-wrap:break-word;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(3rem, 9vw, 7.6rem);
  line-height:.96;
  letter-spacing:-.035em;
}
.hero h1 .accent{
  color:var(--red); font-style:normal;
  display:inline-block;
  white-space:nowrap;
}

@media (max-width: 720px){
  .site-header{flex-direction:column; align-items:flex-start; gap:1rem; padding:1.4rem 20px;}
  .site-nav{gap:1.2rem;}
  .hero{padding-top:1rem;}
  .hero-eyebrow{font-size:.62rem; letter-spacing:.12em;}
  .hero h1 .accent{white-space:normal;}
}