/* Here, Again: paper, ink, one accent of sealing wax. No web fonts: New York and SF Mono on Apple devices, close relatives elsewhere. */
:root {
  --paper: #F3EDE2;
  --ink: #1F1A15;
  --faded: #7A6E60;
  --hairline: #D9CFBF;
  --wax: #A23B2A;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15120F;
    --ink: #EDE5D8;
    --faded: #9A8E7E;
    --hairline: #2E2822;
    --wax: #C2513D;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 1.125rem/1.7 var(--serif);
}
a { color: inherit; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

.bar, main, footer { max-width: 680px; margin: 0 auto; padding: 0 20px; }
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline);
}
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.lang { font-style: italic; color: var(--faded); }

.postmark {
  font: 500 0.75rem/1.6 var(--mono);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--faded);
}
h1 { font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1.1; margin: 0.2em 0; letter-spacing: -0.01em; }
h2.postmark { margin: 0 0 0.6em; font-weight: 500; }
h3 { font-size: 1.25rem; margin: 0 0 0.2em; }
section { padding: 34px 0; border-bottom: 1px solid var(--hairline); }
section:last-child { border-bottom: 0; }

.hero { text-align: center; padding: 56px 0 44px; }
.hero .seal { width: min(220px, 52vw); height: auto; filter: drop-shadow(0 8px 14px rgb(31 26 21 / 0.18)); }
.tagline { font-size: 1.35rem; font-style: italic; margin: 0 0 1em; }
.lead { max-width: 34em; margin: 0 auto 1.4em; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.steps li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 8px; }
.steps .numeral { grid-row: span 2; font: 500 0.95rem var(--mono); color: var(--wax); padding-top: 0.3em; }
.steps p { margin: 0; }

article { padding: 40px 0; }
article.legal h2.postmark { margin-top: 2.2em; }
details { border-top: 1px solid var(--hairline); padding: 14px 0; }
details:last-of-type { border-bottom: 1px solid var(--hairline); }
summary { cursor: pointer; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+ "; color: var(--wax); font-family: var(--mono); }
details[open] summary::before { content: "– "; }

footer { padding-top: 26px; padding-bottom: 48px; border-top: 1px solid var(--hairline); }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-style: italic; }
footer .postmark { margin-top: 16px; }

@media (max-width: 480px) {
  body { font-size: 1.05rem; }
  .steps li { grid-template-columns: 2.4rem 1fr; }
}