*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; }
img { display: block; max-width: 100%; }
a, button, summary { min-height: 44px; }
a { display: inline-flex; align-items: center; gap: .6rem; }
p, h1, h2, h3, ul, dl, figure { margin: 0; }
p + p { margin-top: 1rem; }
h2 + p, h3 + p { margin-top: 1rem; }
.wrap { width: min(100% - 3rem, 74rem); margin-inline: auto; }
.row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.grid, .pair { display: grid; gap: 3rem; }
.pair { grid-template-columns: .9fr 1.1fr; }
.row > *, .grid > *, .pair > * { min-width: 0; }
.utility .row { justify-content: space-between; flex-wrap: nowrap; gap: .75rem; }
.utility p { margin: 0; }
.menu { position: relative; flex: 0 0 auto; }
.menu summary { display: flex; align-items: center; gap: .7rem; padding-block: .5rem; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; z-index: 10; top: calc(100% + .5rem); right: 0; width: min(20rem, calc(100vw - 3rem)); padding: .75rem; }
.menu nav a { display: flex; padding: .6rem .75rem; }
.mast { justify-content: space-between; padding-block: 1.75rem; gap: 1rem 2rem; }
.brand { gap: .8rem; }
.mark { display: block; position: relative; width: 1.8rem; height: 2.2rem; flex: 0 0 auto; }
.tabs { gap: 1.5rem; }
.tabs a { padding: .35rem .15rem; }
.hero { grid-template-columns: 1.15fr .85fr; align-items: center; padding-block: 3rem 4rem; gap: 3rem; }
.eyebrow { margin-bottom: 1rem; }
.hero h1 { margin-bottom: 1.5rem; }
.lead { max-width: 48ch; }
.hero .btn { margin-block: 1.75rem; }
.btn { justify-content: space-between; gap: 1.5rem; padding: .9rem 1.35rem; min-height: 54px; }
.btn span { margin-left: auto; }
.text-link { padding-block: .6rem; }
.note { padding: 1.75rem; }
.status { max-width: 59ch; padding: 1.25rem 1.5rem; }
.tag { margin-bottom: .65rem; }
.note h3 { margin-bottom: 1rem; }
.art { position: relative; width: 100%; isolation: isolate; overflow: hidden; }
.art-home { aspect-ratio: 5 / 6; }
.art-sheet { aspect-ratio: 4 / 3; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art figcaption { position: absolute; z-index: 2; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; padding: .85rem 1rem; max-width: 14rem; }
.art-sheet figcaption { max-width: 15rem; }
.paper { position: absolute; inset: 0; }
.scrap { position: absolute; display: block; }
.teal { width: 73%; height: 65%; left: 16%; top: 16%; }
.rust { width: 70%; height: 63%; left: 6%; top: 9%; }
.lime { width: 30%; height: 32%; left: 64%; top: 60%; }
.ruled { width: 59%; height: 61%; left: 23%; top: 16%; }
.clip { position: absolute; top: 8%; left: 45%; width: 9%; height: 20%; }
.band { padding-block: 3.75rem; }
.band .copy { max-width: 66ch; }
.section-top { max-width: 48rem; margin-bottom: 2rem; }
.notes { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.notes .note { padding: 2rem; }
.ask { padding-top: 1.2rem; }
.call { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
.faq { margin-top: 2rem; }
.faq article { padding-block: 1.5rem; max-width: 72ch; }
.faq article:first-child { padding-top: 0; }
.next { margin-block: 1rem 4rem; padding: 2.5rem; align-items: center; }
.next p { margin-top: 1rem; }
.next .eyebrow { margin-top: 0; }
.next .soft { max-width: 32ch; }
.sources { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; padding: 2.25rem; margin-bottom: 4rem; }
.sources ul { padding: 0; list-style: none; }
.sources li + li { margin-top: .65rem; }
.sources a { display: flex; flex-direction: column; align-items: start; gap: .2rem; padding-block: .6rem; }
.sources a span { display: block; }
.foot { padding-block: 2.5rem; }
.foot-line { max-width: 70ch; margin-bottom: 1.25rem; }
.foot nav { gap: .5rem 1.5rem; }
.foot a { padding-block: .5rem; }
.sheet-hero { grid-template-columns: 1.2fr .8fr; }
.path { margin-top: 1.5rem; }
.sheet-hero .text-link { margin-top: .75rem; }
.sheet-head { display: flex; gap: 1.5rem; align-items: start; margin-bottom: 2rem; }
.sheet-head .eyebrow { margin-bottom: .5rem; }
.sheet-intro { max-width: 66ch; margin: -1rem 0 1.5rem 4.75rem; }
.letter { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex: 0 0 auto; }
.sheet-body { margin-left: 4.75rem; grid-template-columns: 1.1fr .9fr; }
.prompts h3 + h3 { margin-top: 1.25rem; }
.prompts > p { margin-top: 1.5rem; }
.prompts > .text-link { margin-top: .75rem; }
.check { display: flex; align-items: center; gap: .85rem; margin-top: 1.75rem; min-height: 52px; padding: .85rem 1rem; cursor: pointer; }
.check input { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; }
.cost-list { margin-top: 1.25rem; }
.cost-list > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding-block: 1rem; }
.cost-list dd { margin: 0; }
.end-call { max-width: 72ch; margin-top: 1.75rem; }
.end-call a { margin-top: .5rem; }
.missing { max-width: 48rem; padding-block: 5rem 7rem; }
.missing h1 { margin-bottom: 1.5rem; }
.missing .row { margin-top: 2rem; }
.skip { position: fixed; top: 1rem; left: 1rem; z-index: 20; padding: .8rem 1rem; transform: translateY(-200%); }
.skip:focus { transform: translateY(0); }

@media (max-width: 850px) {
  .hero, .sheet-hero { grid-template-columns: 1fr; gap: 2rem; }
  .hero { padding-block: 2rem 3rem; }
  .hero-copy { max-width: 42rem; }
  .art-home { max-width: 35rem; aspect-ratio: 5 / 3; }
  .art-sheet { max-width: 32rem; aspect-ratio: 2 / 1; }
  .pair { grid-template-columns: 1fr; gap: 1.5rem; }
  .band { padding-block: 2.5rem; }
  .notes { grid-template-columns: 1fr 1fr; }
  .sources { grid-template-columns: 1fr; gap: 1.5rem; }
  .sheet-body { margin-left: 0; }
  .sheet-intro { margin-left: 0; }
  .sheet-body .note { margin-top: .5rem; }
}
@media (max-width: 580px) {
  .wrap { width: calc(100% - 2.5rem); }
  .menu nav { width: min(20rem, calc(100vw - 2.5rem)); }
  .mast { padding-block: 1.2rem; gap: .85rem; }
  .tabs { gap: 1.25rem; }
  .hero .btn { width: 100%; }
  .notes { grid-template-columns: 1fr; }
  .note, .notes .note { padding: 1.4rem; }
  .status { padding: 1.15rem 1.25rem; }
  .art figcaption { bottom: 1rem; left: 1rem; right: 1rem; max-width: 13rem; }
  .next, .sources { padding: 1.5rem; }
  .next .btn { width: 100%; }
  .next { margin-bottom: 2.5rem; }
  .sources { margin-bottom: 2.5rem; }
  .sheet-head { gap: 1rem; }
  .letter { width: 2.8rem; height: 2.8rem; }
  .cost-list > div { grid-template-columns: 1fr; gap: .25rem; }
  .foot { padding-block: 2rem; }
  .missing { padding-block: 3rem 4rem; }
}
@media print {
  .utility, .mast, .art, .skip, .foot nav { display: none; }
  .wrap { width: 100%; }
  .hero { padding-block: 1rem; display: block; }
  .sheet-body, .pair { grid-template-columns: 1fr 1fr; }
  .sheet { break-inside: avoid; padding-block: 1.25rem; }
  .sources { display: block; break-before: page; }
  .check { break-inside: avoid; }
}