:root{
  --paper:#f4f1e9;
  --ink:#1a1917;
  --mute:#6c6960;
  --rule:#d8d3c5;
  --hot:#b6432a;
  --pad:2.5rem;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

/* header */

.top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  padding:1.4rem var(--pad);
  border-bottom:1px solid var(--rule);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
}
.top b{color:var(--ink);letter-spacing:.02em}
.top nav{display:flex;gap:1.6rem}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--hot)}

/* hero */

/* Two columns, three children. The text column is max-content so it hugs the
   headline instead of stretching, which keeps the portrait beside the type
   rather than across a gap on a wide screen. */
.hero{
  padding:4.5rem var(--pad) 3rem;
  display:grid;
  grid-template-columns:minmax(0,max-content) auto;
  justify-content:start;
  column-gap:3rem;
  align-items:start;
}
.hero-head{grid-column:1;grid-row:1}
.hero .dek{grid-column:1;grid-row:2}
/* The source is already square, so border-radius alone makes a true circle.
   No object-fit, nothing is cropped or squashed. */
.portrait{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:start;
  width:240px;
  max-width:100%;
  height:auto;
  border-radius:50%;
}
.kick{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--hot);
  font-weight:600;
  margin:0 0 1.3rem;
}
h1{
  font-size:clamp(3rem,7.5vw,5.6rem);
  line-height:.95;
  letter-spacing:-.035em;
  font-weight:700;
  margin:0 0 1.5rem;
  max-width:12em;
}
.dek{
  font-size:1.3rem;
  line-height:1.5;
  max-width:30em;
  margin:0;
  color:#33312d;
}

/* rows */

.rows{border-top:1px solid var(--rule)}

.row{
  display:grid;
  grid-template-columns:9rem 1fr auto;
  gap:2rem;
  align-items:baseline;
  padding:1.9rem var(--pad);
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  transition:background .15s;
}
.row:hover{background:#ebe7db}
.row:hover .go{text-decoration:underline;text-underline-offset:.25em}

.row .n{
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:600;
}
.row h3{
  margin:0 0 .35rem;
  font-size:1.45rem;
  font-weight:600;
  letter-spacing:-.02em;
}
.row p{
  margin:0;
  color:var(--mute);
  font-size:.98rem;
  line-height:1.55;
  max-width:38em;
}
.row .go{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--hot);
  font-weight:600;
  white-space:nowrap;
}

/* newsletter */

.sub{
  margin:3rem var(--pad) 0;
  background:var(--ink);
  color:var(--paper);
  padding:2.4rem;
  border-radius:2px;
}
.sub h2{
  margin:0 0 .5rem;
  font-size:2rem;
  font-weight:700;
  letter-spacing:-.025em;
}
.sub p{
  margin:0 0 1.5rem;
  color:#b9b4a6;
  max-width:32em;
  line-height:1.6;
}

.form{display:flex;gap:.6rem;max-width:30rem;flex-wrap:wrap}
.form input{
  flex:1;
  min-width:12rem;
  padding:.85em 1em;
  border:1px solid #46443e;
  background:#232220;
  color:var(--paper);
  font:inherit;
  font-size:.95rem;
  border-radius:2px;
}
.form button{
  padding:.85em 1.6em;
  border:0;
  background:var(--hot);
  color:#fff;
  font:inherit;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:2px;
  cursor:pointer;
}
.form :disabled{opacity:.5;cursor:not-allowed}

/* footer */

.foot{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  padding:3rem var(--pad);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.foot a{text-decoration:none}
.foot a:hover{color:var(--hot)}

/* narrow */

/* narrow

   Vertical space is the scarce resource here, not width. Stacked, the hero ate
   the whole first screen and no link row was reachable without scrolling. So on
   a phone the portrait sits beside the name instead of above it, the dek runs
   full width under both, and the row's Watch/Join label is dropped because the
   whole row is already the link. */

@media (max-width:640px){
  :root{--pad:1.4rem}
  .hero{
    grid-template-columns:auto 1fr;
    column-gap:1rem;
    padding:1.6rem var(--pad) 1.6rem;
    align-items:center;
  }
  .portrait{grid-column:1;grid-row:1;width:88px}
  .hero-head{grid-column:2;grid-row:1}
  .hero .dek{grid-column:1 / -1;grid-row:2;margin-top:1.1rem;font-size:1.05rem}
  .kick{margin-bottom:.5rem}
  h1{font-size:2rem;margin:0}
  .row{grid-template-columns:1fr;gap:.5rem;padding:1.25rem var(--pad)}
  .row .go{display:none}
  .sub{margin:2rem var(--pad) 0;padding:1.8rem}
  .foot{padding:2rem var(--pad)}
  .top nav{gap:1rem}
}

:focus-visible{outline:2px solid var(--hot);outline-offset:3px}