:root {
  --paper:#f0ece2;
  --ink:#24221e;
  --red:#b3412f;
  --muted:#645f56;
  --line:#b9b2a4;
  --warm:#e7d7bc;
  font-family:Georgia,'Times New Roman',serif;
  background:var(--paper);
  color:var(--ink)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0
}
a {
  color:inherit
}
.masthead {
  max-width:1370px;
  margin:auto;
  border-bottom:2px solid var(--ink);
  padding:20px 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px
}
.brand {
  font:bold 25px Arial,Helvetica,sans-serif;
  text-decoration:none;
  letter-spacing:-.06em
}
.brand span {
  color:var(--red)
}
.brand small {
  font:12px Arial,Helvetica,sans-serif;
  letter-spacing:0;
  margin-left:18px;
  color:var(--muted)
}
.masthead nav {
  display:flex;
  gap:26px;
  font:13px Arial,Helvetica,sans-serif
}
.masthead nav a {
  text-decoration:none
}
.masthead nav a:hover,.hero-links a:hover,.origin a:hover {
  text-decoration:underline
}
.hero,.method,.techniques,.artifact,.origin {
  max-width:1370px;
  margin:auto;
  padding-left:42px;
  padding-right:42px
}
.hero {
  display:grid;
  grid-template-columns:1.35fr .45fr;
  gap:8vw;
  padding-top:100px;
  padding-bottom:125px
}
.issue,.section-number,.preview-kicker,.reply small,.fiction {
  font:700 11px Arial,Helvetica,sans-serif;
  letter-spacing:.1em;
  color:var(--red)
}
.hero h1 {
  font-size:clamp(58px,7.2vw,112px);
  line-height:.98;
  letter-spacing:-.065em;
  margin:30px 0 34px;
  max-width:1030px
}
.hero-title>p:not(.issue) {
  font-size:23px;
  line-height:1.46;
  max-width:760px
}
.hero-links {
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  margin-top:38px;
  font:700 14px Arial,Helvetica,sans-serif
}
.hero-links a {
  text-decoration:none;
  border-bottom:2px solid var(--ink);
  padding-bottom:8px
}
.hero-aside {
  border-left:1px solid var(--ink);
  padding-left:30px;
  align-self:end;
  font:15px/1.55 Arial,Helvetica,sans-serif
}
.big-number {
  font:900 clamp(110px,14vw,220px) Arial,Helvetica,sans-serif;
  letter-spacing:-.12em;
  line-height:.8;
  color:var(--red)
}
.aside-rule {
  border-top:2px solid var(--ink);
  margin-top:45px
}
.hero-aside p:last-child {
  font:12px/1.9 ui-monospace,Menlo,monospace;
  text-transform:uppercase;
  letter-spacing:.05em
}
.method {
  border-top:2px solid var(--ink);
  padding-top:90px;
  padding-bottom:110px;
  display:grid;
  grid-template-columns:200px 1fr;
  gap:45px
}
.method h2,.techniques h2,.artifact h2,.origin h2 {
  font-size:clamp(41px,5vw,70px);
  letter-spacing:-.055em;
  line-height:1.06;
  max-width:830px;
  margin:0 0 28px
}
.method>div:last-child>p,.techniques-main>p,.artifact-copy>p,.origin p {
  font-size:18px;
  line-height:1.6;
  max-width:770px
}
.method-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin-top:55px;
  border-top:2px solid var(--ink)
}
.method-steps>div {
  padding-top:22px
}
.method-steps span {
  display:block;
  color:var(--red);
  font:700 11px Arial,Helvetica,sans-serif;
  letter-spacing:.09em;
  margin-bottom:18px
}
.method-steps strong {
  display:block;
  font-size:24px;
  line-height:1.2
}
.method-steps p {
  font:14px/1.6 Arial,Helvetica,sans-serif;
  color:var(--muted)
}
.techniques {
  background:#e9e3d6;
  max-width:none;
  padding-top:100px;
  padding-bottom:115px;
  display:grid;
  grid-template-columns:minmax(160px,calc((100vw - 1286px)/2 + 200px)) minmax(0,1086px);
  gap:45px
}
.techniques-main {
  max-width:1086px;
  padding-right:42px
}
.phase {
  margin-top:47px
}
.phase-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:2px solid var(--ink);
  padding-bottom:15px
}
.phase-head h3 {
  font:700 19px Arial,Helvetica,sans-serif;
  margin:0
}
.phase-head span {
  font:700 15px ui-monospace,Menlo,monospace;
  color:var(--red)
}
.tech-list a {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:15px 0;
  text-decoration:none;
  font-size:20px
}
.tech-list a:hover {
  color:var(--red)
}
.tech-list a span {
  font:13px Arial,Helvetica,sans-serif;
  color:var(--muted)
}
.phase-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px
}
.artifact {
  padding-top:120px;
  padding-bottom:125px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:8vw;
  align-items:center
}
.artifact-copy .section-number {
  margin-bottom:27px
}
.artifact-copy>p {
  font-size:17px
}
.demo-link {
  display:inline-flex;
  gap:85px;
  align-items:center;
  text-decoration:none;
  border-bottom:2px solid var(--red);
  padding:12px 0;
  margin-top:21px;
  color:var(--red);
  font:700 15px Arial,Helvetica,sans-serif
}
.artifact-preview {
  background:#fffaf0;
  border:1px solid var(--ink);
  box-shadow:13px 13px 0 var(--warm);
  padding:35px;
  transform:rotate(1deg)
}
.artifact-preview h3 {
  font-size:29px;
  line-height:1.2;
  letter-spacing:-.035em;
  margin:21px 0 30px
}
.choice {
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid var(--red);
  padding:15px;
  margin-bottom:9px;
  font:14px Arial,Helvetica,sans-serif
}
.choice i {
  height:16px;
  width:16px;
  border-radius:50%;
  border:5px solid var(--red);
  flex:none
}
.choice.muted {
  border-color:#cbc4b6;
  color:#888073
}
.choice.muted i {
  border:1px solid #a9a193
}
.reply {
  background:#eadfc9;
  padding:20px;
  margin-top:25px
}
.reply p {
  font:15px/1.5 Arial,Helvetica,sans-serif;
  margin:12px 0 0
}
.fiction {
  display:block;
  margin-top:18px;
  color:#8e867a;
  font-size:10px
}
.origin {
  border-top:2px solid var(--ink);
  padding-top:95px;
  padding-bottom:105px;
  display:grid;
  grid-template-columns:200px 1fr;
  gap:45px
}
.origin a {
  color:var(--red)
}
footer {
  max-width:1370px;
  margin:auto;
  border-top:1px solid var(--ink);
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:26px 42px;
  font:12px Arial,Helvetica,sans-serif
}
h1,h2,h3 {
  text-wrap:balance
}
p {
  text-wrap:pretty
}
a:focus-visible {
  outline:3px solid var(--red);
  outline-offset:4px
}
@media(max-width:980px) {
  .hero,.artifact {
  grid-template-columns:1fr
}
.hero-aside {
  display:flex;
  gap:30px;
  align-items:center;
  border-left:0;
  border-top:1px solid var(--ink);
  padding:24px 0 0
}
.big-number {
  font-size:120px
}
.aside-rule {
  display:none
}
.method,.origin {
  grid-template-columns:1fr;
  gap:25px
}
.techniques {
  grid-template-columns:1fr;
  gap:20px
}
.techniques-main {
  padding-right:0
}

}
@media(max-width:650px) {
  .masthead {
  padding:18px 22px
}
.brand small {
  display:none
}
.masthead nav {
  gap:15px
}
.masthead nav a:first-child,.masthead nav a:nth-child(2) {
  display:none
}
.hero,.method,.artifact,.origin {
  padding-left:22px;
  padding-right:22px
}
.hero {
  grid-template-columns:minmax(0,1fr);
  padding-top:66px;
  padding-bottom:78px
}
.hero-title {
  min-width:0
}
.hero h1 {
  font-size:56px
}
.hero-title>p:not(.issue) {
  font-size:19px
}
.hero-aside {
  display:grid;
  grid-template-columns:105px minmax(0,1fr);
  gap:16px
}
.big-number {
  font-size:95px
}
.hero-aside p:last-child {
  grid-column:1/-1
}
.method,.origin {
  padding-top:75px;
  padding-bottom:85px
}
.method-steps {
  grid-template-columns:1fr;
  gap:8px
}
.method-steps>div+div {
  border-top:1px solid var(--line)
}
.techniques {
  padding:78px 22px
}
.tech-list a {
  grid-template-columns:1fr;
  gap:5px
}
.phase-row {
  grid-template-columns:1fr;
  gap:0
}
.artifact {
  padding-top:88px;
  padding-bottom:100px
}
.artifact-preview {
  padding:23px;
  transform:none;
  box-shadow:6px 6px 0 var(--warm)
}
.artifact-preview h3 {
  font-size:25px
}
footer {
  padding:24px 22px;
  flex-direction:column
}

}