:root {
  color-scheme: light;
  --paper: #fff9ed;
  --ink: #32221d;
  --red: #8f2626;
  --rule: #ca9d86;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1.05rem/1.58 'Trebuchet MS', sans-serif; }
a { color: inherit; text-underline-offset: .25em; }
a:hover { text-decoration-thickness: .16em; }
:focus-visible { outline: 2px solid var(--red); outline-offset: .25rem; }
.skip { position: absolute; top: .65rem; left: .65rem; transform: translateY(-160%); z-index: 2; padding: .45rem .75rem; background: var(--paper); }
.skip:focus { transform: none; }
.sheet, footer { width: min(100% - 4rem, 76rem); margin-inline: auto; }
.sheet { display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
.spine { border-right: 1px solid var(--rule); padding: 2.3rem 1.6rem 1.9rem 0; }
.brand { display: inline-block; text-decoration: none; color: var(--red); font: 800 2.05rem/.95 Georgia, serif; letter-spacing: -.04em; }
.brand span { color: var(--ink); }
.spine p { max-width: 16ch; font-size: .91rem; line-height: 1.35; }
nav { display: grid; justify-items: start; gap: .7rem; margin-top: 2.35rem; font-size: .93rem; font-weight: 700; }
main { padding: 2.3rem 0 0 clamp(2rem, 4.5vw, 4rem); }
h1, h2, h3 { margin: 0; line-height: 1; }
h1, h2 { font-family: Georgia, serif; font-weight: 800; }
h1 { font-size: clamp(3.2rem, 7.4vw, 7.1rem); letter-spacing: -.073em; color: var(--red); }
h2 { font-size: clamp(2.25rem, 4.9vw, 3.7rem); letter-spacing: -.05em; }
h3 { font-size: 1.2rem; line-height: 1.2; }
.lead { max-width: 47ch; margin: 1rem 0 1.5rem; font-size: clamp(1.05rem, 1.5vw, 1.23rem); }
figure { margin: 0; padding: .65rem 0 .45rem; border-block: 1px solid var(--rule); }
figure img { display: block; width: 100%; height: auto; }
figcaption { display: grid; grid-template-columns: 1fr 1fr; font-size: .92rem; font-weight: 700; color: var(--red); }
figcaption span { padding-inline-start: 5%; }
figcaption span + span { padding-inline-start: 9%; }
.materials { margin-block: 2.9rem; padding: clamp(1rem, 3vw, 1.7rem); background: #f4dfc9; border-left: .4rem solid var(--red); }
.materials p, .materials ul, .process p, .fixes dd { max-width: 61ch; }
.materials ul { margin: 0; padding-left: 1.3rem; }
.materials li + li { margin-top: .3rem; }
.process ol { counter-reset: print; list-style: none; padding: 0; margin: 1.2rem 0 2.8rem; }
.process li { position: relative; padding: .95rem 0 .95rem 3.35rem; border-top: 1px solid var(--rule); counter-increment: print; }
.process li::before { content: counter(print); position: absolute; top: .7rem; left: 0; color: var(--red); font: 700 2.2rem/1 Georgia, serif; }
.process p { margin: .3rem 0 0; }
.fixes { border: 1px solid var(--rule); padding: clamp(1rem, 3vw, 1.7rem); }
.fixes dl { margin: .85rem 0 0; }
.fixes dl > div + div { margin-top: .7rem; }
.fixes dt { font-weight: 700; }
.fixes dd { margin: .2rem 0 0; }
footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .7rem 1.2rem; border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-block: 1rem; color: var(--red); font-size: .9rem; }
@media (max-width: 48rem) {
  .sheet, footer { width: calc(100% - 2rem); }
  .sheet { grid-template-columns: 1fr; }
  .spine { border: 0; border-bottom: 1px solid var(--rule); padding: 1.15rem 0 .85rem; }
  .brand br { display: none; }
  .spine p { max-width: none; margin: .4rem 0 .85rem; }
  nav { display: flex; flex-wrap: wrap; margin-top: 0; gap: .5rem 1rem; }
  main { padding: 1.7rem 0 0; }
  .process li { padding-left: 2rem; }
}