@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
:root {
  --paper: #faf9f6;
  color-scheme: only light;
  background: var(--paper);
  color: #000;
  font: 16px/1.6 "IBM Plex Mono", monospace;
  --rule: 1px solid currentColor;
  --pad: clamp(24px, 4vw, 60px);
}

* { box-sizing: border-box; }
body { width: min(1192px, calc(100% - 2 * clamp(16px, 4vw, 72px))); margin: clamp(20px, 4.5vw, 72px) auto; }
main { border: var(--rule); }
p, h1, h2 { margin: 0; }
h1, h2 { font-weight: 600; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.intro { display: grid; grid-template-columns: 1fr 1.1fr; }
.signature, .story, #get-started { padding: var(--pad); }
.signature { display: flex; flex-direction: column; align-items: flex-start; border-right: var(--rule); }
.mark { display: block; width: clamp(52px, 5.5vw, 80px); height: auto; filter: brightness(0); }
h1 { margin: 22px 0 30px; font-size: clamp(40px, 5.7vw, 82px); line-height: 1; letter-spacing: -.065em; }
.lead { margin-top: auto; max-width: 26ch; font-size: clamp(20px, 2vw, 29px); line-height: 1.36; letter-spacing: -.04em; }
.story { align-self: center; }
.description + .description { margin-top: 1.2em; }
.credit { margin-top: 26px; }
.credit small { font-size: .78rem; }

#get-started {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.35fr);
  align-items: start;
  gap: var(--pad);
  border-top: var(--rule);
  scroll-margin-top: 16px;
}
h2 { font-size: 1.24rem; line-height: 1.3; letter-spacing: -.035em; }
#start { font-size: clamp(24px, 2.5vw, 34px); }
.start-intro p { max-width: 24ch; margin-top: 12px; font-size: .94rem; }
#prompt { max-width: 58ch; overflow-wrap: anywhere; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
button { border: 1px solid #000; border-radius: 0; background: #000; color: var(--paper); padding: 10px 16px; font: inherit; font-size: .82rem; cursor: pointer; }
button:hover { background: var(--paper); color: #000; }
button:focus-visible { outline-color: #000; }
#copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.guide-links, footer { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .82rem; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule); }
.features article { padding: clamp(24px, 3.4vw, 48px); }
.features article + article { border-left: var(--rule); }
.features p { margin-top: 18px; font-size: .94rem; }
footer { padding: 22px 0; }
footer a:last-child { margin-left: auto; }

@media (max-width: 760px) {
  .intro, #get-started, .features { grid-template-columns: 1fr; }
  .signature { border-right: 0; border-bottom: var(--rule); }
  .signature { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px 14px; }
  h1 { margin: 0; font-size: clamp(31px, 8.6vw, 62px); }
  .mark { width: clamp(40px, 9vw, 62px); }
  .lead { grid-column: 1 / -1; max-width: 34ch; }
  #get-started { gap: 20px; }
  .start-intro p { max-width: none; }
  .features article + article { border-left: 0; border-top: var(--rule); }
  .features p { margin-top: 10px; }
}
@media (max-width: 420px) {
  footer a:last-child { margin-left: 0; }
}