:root {
  --paper: #f3f0e8;
  --ink: #11120f;
  --blue: #244cff;
  --orange: #ff5b22;
  --acid: #d8ff2f;
  --line: #24251f;
  --muted: #68695f;
  --white: #fffef8;
  --max: 1580px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
h1, h2, h3, p, figure, dl { margin-top: 0; }
h1, h2, h3 { line-height: .95; letter-spacing: -.045em; }
.skip {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  color: white;
  background: var(--blue);
  transform: translateY(-150%);
}
.skip:focus { transform: translateY(0); }
.tag, dt, .chapter article span, footer strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.top {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 230px 1fr 100px;
  min-height: 92px;
  border-bottom: 2px solid var(--line);
  background: var(--paper);
}
.brand {
  display: grid;
  align-content: center;
  padding: 14px 24px;
  border-right: 2px solid var(--line);
  font-size: .78rem;
  line-height: 1;
}
.brand span, .brand b { font-size: 1.55rem; letter-spacing: -.08em; }
.brand b { color: var(--blue); }
.brand small { margin-top: 7px; font: .48rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.top nav { display: grid; grid-template-columns: repeat(6, 1fr); }
.top nav a {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  border-right: 1px solid var(--line);
  transition: background .18s, color .18s;
}
.top nav a:hover { color: white; background: var(--blue); }
.top nav b { font: 500 .68rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.top nav span { overflow: hidden; margin-top: 6px; font-size: .59rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.method { display: grid; place-items: center; font: 500 .7rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.method:hover { background: var(--acid); }
.menu { display: none; }

.hero {
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  min-height: 780px;
  border-bottom: 2px solid var(--line);
}
.hero > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 6vw, 110px); }
.hero h1 { max-width: 850px; margin: 25px 0 35px; font-size: clamp(4rem, 7.5vw, 9rem); }
.hero h1 em { color: var(--blue); font-weight: 500; }
.hero .lead { max-width: 630px; font-size: clamp(1.2rem, 1.8vw, 1.75rem); line-height: 1.25; }
.hero figure { position: relative; overflow: hidden; margin: 0; border-left: 2px solid var(--line); background: var(--ink); }
.hero figure img { height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.08); }
.hero figcaption, .fhero figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  padding: 12px;
  color: white;
  background: rgba(17, 18, 15, .88);
  font: .68rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.read { font: 500 .75rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-decoration: underline; text-underline-offset: 5px; }
.button { align-self: flex-start; margin-top: 28px; padding: 17px 20px; color: white; background: var(--blue); text-decoration: none; }
.button:hover { color: var(--ink); background: var(--acid); }
.strip { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 2px solid var(--line); }
.strip span { padding: 17px; border-right: 1px solid var(--line); font: 500 .75rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; }
.strip span:nth-child(2n) { color: white; background: var(--ink); }
.intro {
  display: grid;
  grid-template-columns: 1fr 4fr 2fr;
  gap: 40px;
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: 130px 40px;
}
.intro h2 { margin: 0; font-size: clamp(3rem, 6vw, 7rem); }
.intro > p:last-child { padding-top: 12px; font-size: 1.15rem; }
.files { border-top: 2px solid var(--line); }
.files > header, .ledger > header, .workflow > header {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 30px;
  padding: 70px 40px;
  border-bottom: 2px solid var(--line);
}
.files > header h2, .ledger > header h2, .workflow > header h2 { margin: 0; font-size: clamp(2.8rem, 5vw, 6rem); }
.card { display: grid; grid-template-columns: 1fr 1fr; min-height: 530px; border-bottom: 2px solid var(--line); }
.card:nth-of-type(even) .photo { order: 2; border-right: 0; border-left: 2px solid var(--line); }
.photo { position: relative; overflow: hidden; border-right: 2px solid var(--line); }
.photo img { height: 100%; object-fit: cover; transition: transform .5s; }
.photo:hover img { transform: scale(1.025); }
.photo span { position: absolute; top: 18px; left: 18px; width: 62px; padding: 10px; color: white; background: var(--blue); font: 1.2rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; }
.card > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(35px, 7vw, 120px); }
.card h2 { max-width: 800px; margin: 25px 0; font-size: clamp(3rem, 5vw, 6rem); }
.card h2 a:hover { color: var(--blue); }
.card > div > p:not(.tag) { max-width: 680px; font-size: 1.18rem; }
.card .read { margin-top: 25px; }

.ledger { background: var(--white); }
.ledger > div { display: grid; grid-template-columns: repeat(4, 1fr); }
.ledger article { min-height: 275px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ledger article:nth-child(8n + 1), .ledger article:nth-child(8n + 6) { background: var(--acid); }
.ledger article:nth-child(11n) { color: white; background: var(--blue); }
.ledger article span { font: 500 .7rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ledger article h3 { margin: 54px 0 18px; font-size: 1.7rem; }
.ledger article p { min-height: 72px; color: inherit; font-size: .83rem; }
.ledger article b { font: .59rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.workflow { border-top: 2px solid var(--line); }
.workflow > div { display: grid; grid-template-columns: repeat(3, 1fr); }
.workflow article { min-height: 350px; padding: 35px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.workflow article > span { font: 3rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--orange); }
.workflow article h3 { margin: 65px 0 15px; font-size: 2rem; }
.workflow article a { font: .7rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-decoration: underline; }
.frames { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--line); }
.frames figure { margin: 0; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.frames img { aspect-ratio: 4/3; object-fit: cover; }
.frames figcaption { display: flex; justify-content: space-between; padding: 16px; font: .75rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.frames figcaption b { color: var(--blue); }
.disclosure { display: grid; grid-template-columns: 1fr 1fr; min-height: 650px; border-bottom: 2px solid var(--line); }
.disclosure > div { display: flex; flex-direction: column; justify-content: center; padding: 7vw; color: white; background: var(--blue); }
.disclosure h2 { margin: 25px 0 0; font-size: clamp(3rem, 6vw, 7rem); }
.disclosure ol { margin: 0; padding: 50px 70px 50px 105px; counter-reset: point; }
.disclosure li { padding: 28px 10px; border-bottom: 1px solid var(--line); font-size: 1.3rem; }
.end { padding: 140px 40px; text-align: center; }
.end h2 { margin: 30px 0; font-size: clamp(4rem, 10vw, 11rem); }
.end .button { display: inline-block; }

.fhero { display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; border-bottom: 2px solid var(--line); }
.fhero > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(35px, 6vw, 105px); }
.fhero h1 { margin: 30px 0; font-size: clamp(4rem, 7vw, 8rem); }
.fhero .lead { max-width: 720px; font-size: 1.3rem; }
.fhero dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 45px 0 0; border-top: 1px solid var(--line); }
.fhero dl div { padding: 20px 8px; border-right: 1px solid var(--line); }
.fhero dd { margin: 8px 0 0; font-size: .8rem; }
.fhero figure { position: relative; overflow: hidden; margin: 0; border-left: 2px solid var(--line); }
.fhero figure img { height: 100%; object-fit: cover; }
.layout { display: grid; grid-template-columns: 270px 1fr; max-width: var(--max); margin: 0 auto; }
.layout > aside { position: sticky; top: 0; align-self: start; padding: 35px 25px; border-right: 2px solid var(--line); }
.layout > aside b { display: block; margin-bottom: 25px; color: var(--blue); font: .7rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.layout > aside a { display: block; padding: 11px 0; border-bottom: 1px solid #aaa; font-size: .72rem; }
.layout > aside a:hover { color: var(--blue); }
.copy { min-width: 0; }
.standfirst { max-width: 970px; margin: 0; padding: 90px clamp(35px, 7vw, 120px); font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1.25; }
.chapter { padding: 110px clamp(35px, 7vw, 120px); border-top: 2px solid var(--line); scroll-margin-top: 20px; }
.chapter h2 { max-width: 1050px; margin: 28px 0; font-size: clamp(3.3rem, 6vw, 7rem); }
.chapter-lead { max-width: 820px; font-size: 1.3rem; }
.grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 60px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.chapter .grid article { min-height: 230px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chapter .grid article:nth-child(1) { background: var(--acid); }
.chapter .grid article h3 { margin: 45px 0 15px; font-size: 1.6rem; }
.chapter blockquote { margin: 55px 0 25px; padding: 30px; color: white; background: var(--blue); }
.chapter blockquote b { font: .65rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chapter blockquote p { margin: 22px 0 0; font-size: 1.55rem; }
.chapter > ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: check; }
.chapter > ol li { min-height: 115px; padding: 22px; border: 1px solid var(--line); border-right: 0; counter-increment: check; font-size: .82rem; }
.chapter > ol li:last-child { border-right: 1px solid var(--line); }
.chapter > ol li::before { display: block; margin-bottom: 14px; content: '0' counter(check); color: var(--orange); font: 1.2rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.record, .audit { padding: 100px clamp(35px, 7vw, 120px); border-top: 2px solid var(--line); }
.record h2, .audit h2 { margin: 25px 0 50px; font-size: clamp(3rem, 5vw, 6rem); }
.record > div { display: grid; grid-template-columns: repeat(2, 1fr); }
.record article { padding: 25px; border: 1px solid var(--line); }
.record article span { font: 1.3rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--blue); }
.record article h3 { margin-top: 45px; font-size: 1.5rem; }
.record article p { overflow: hidden; color: #999; }
.audit { color: white; background: var(--ink); }
.audit ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 0; list-style-position: inside; background: #555; }
.audit li { padding: 25px; background: var(--ink); }
.related { padding: 100px 40px; border-top: 2px solid var(--line); }
.related > div { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 35px; border: 2px solid var(--line); }
.related a { min-height: 250px; padding: 30px; border-right: 1px solid var(--line); }
.related a:last-child { border: 0; }
.related a:hover { color: white; background: var(--blue); }
.related a b, .related a span { font: .7rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.related a h3 { margin: 65px 0 35px; font-size: 2rem; }
.info { max-width: 1200px; min-height: 540px; padding: 110px 40px; }
.info h1 { max-width: 1050px; margin: 40px 0; font-size: clamp(4rem, 9vw, 10rem); }
.info .lead { max-width: 800px; font-size: 1.35rem; }
.info-copy { max-width: 900px; margin: 0 auto; padding: 80px 40px 140px; border-top: 2px solid var(--line); }
.info-copy h2 { margin-top: 70px; font-size: 2.5rem; }
.info-copy p { font-size: 1.1rem; }

footer { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; padding: 70px 40px 30px; color: white; background: var(--ink); }
footer .brand { display: inline-grid; padding: 0; border: 0; }
footer .brand b { color: var(--acid); }
footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
footer > div:first-child p { max-width: 430px; margin-top: 18px; color: #aaa; }
footer a:not(.brand) { font-size: .75rem; }
footer a:hover { color: var(--acid); }
footer .fine { grid-column: 1/-1; margin: 50px 0 0; padding-top: 25px; border-top: 1px solid #555; color: #999; font: .65rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (max-width: 1100px) {
  .top { grid-template-columns: 190px 1fr 85px; }
  .top nav a:nth-child(n+5) { display: none; }
  .top nav { grid-template-columns: repeat(4, 1fr); }
  .ledger > div { grid-template-columns: repeat(3, 1fr); }
  .intro { grid-template-columns: 1fr 4fr; }
  .intro > p:last-child { grid-column: 2; }
  .layout { grid-template-columns: 220px 1fr; }
}

@media (max-width: 760px) {
  .top { position: sticky; top: 0; grid-template-columns: 1fr 88px; min-height: 72px; }
  .brand { padding: 11px 17px; }
  .top .method { display: none; }
  .menu { display: block; border: 0; border-left: 2px solid var(--line); background: var(--acid); font: .7rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .top nav { position: absolute; top: 72px; right: 0; left: 0; display: none; grid-template-columns: 1fr 1fr; background: var(--paper); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
  .top.open nav { display: grid; }
  .top nav a, .top nav a:nth-child(n+5) { display: flex; min-height: 70px; }
  .hero, .fhero, .card, .disclosure { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero > div, .fhero > div { min-height: 540px; padding: 50px 22px; }
  .hero figure, .fhero figure { min-height: 480px; border: 0; border-top: 2px solid var(--line); }
  .hero h1, .fhero h1 { font-size: 4.2rem; }
  .strip { grid-template-columns: repeat(3, 1fr); }
  .intro { grid-template-columns: 1fr; padding: 85px 22px; }
  .intro > p:last-child { grid-column: auto; }
  .files > header, .ledger > header, .workflow > header { grid-template-columns: 1fr; padding: 55px 22px; }
  .card:nth-of-type(even) .photo { order: 0; border-left: 0; }
  .photo { min-height: 400px; border: 0; border-bottom: 2px solid var(--line); }
  .card > div { padding: 60px 22px; }
  .card h2 { font-size: 3.7rem; }
  .ledger > div { grid-template-columns: 1fr 1fr; }
  .ledger article { min-height: 250px; padding: 20px; }
  .ledger article h3 { margin-top: 38px; }
  .workflow > div, .frames { grid-template-columns: 1fr; }
  .workflow article { min-height: 310px; }
  .disclosure ol { padding: 35px 35px 35px 65px; }
  .end { padding: 90px 22px; }
  .end h2 { font-size: 4.2rem; }
  .layout { display: block; }
  .layout > aside { position: static; overflow: auto; display: flex; padding: 18px; border-right: 0; border-bottom: 2px solid var(--line); white-space: nowrap; }
  .layout > aside b { margin: 10px 20px 0 0; }
  .layout > aside a { padding: 10px 15px; border: 0; }
  .standfirst, .chapter, .record, .audit { padding: 75px 22px; }
  .grid, .record > div, .audit ol, .related > div { grid-template-columns: 1fr; }
  .chapter > ol { grid-template-columns: 1fr 1fr; }
  .related { padding: 75px 22px; }
  .related a { border-right: 0; border-bottom: 1px solid var(--line); }
  footer { grid-template-columns: 1fr 1fr; padding: 55px 22px 25px; }
}

@media (max-width: 480px) {
  .ledger > div, .chapter > ol, footer { grid-template-columns: 1fr; }
  .ledger article p { min-height: 0; }
  .fhero dl { grid-template-columns: 1fr; }
  .fhero dl div { border-bottom: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}