/* Abide & Notarize — the page is a notarized instrument.
   Light: paper on a maple lane. Dark: same paper under alley lamps.
   Legibility rules: no text under 1rem, all text >= 7:1 on its background (WCAG AAA),
   typewriter face only for short "filled-in" bits, nothing decorative behind reading text. */
:root {
  color-scheme: light;
  --desk: #d8c8a2; --desk-line: rgba(80, 52, 16, .1); --desk-ink: #2e2618; --lamp: transparent;
  --paper: #f8f2e1; --ink: #1b1915; --ink-soft: #433d31; --rule: #a39576;
  --red: #8c1c15; --guil: #4a6b5a; --sig: #173683; --field: #fffaf0;
  --shadow: 0 1px 0 #fff8 inset, 0 18px 40px -18px rgba(40, 25, 5, .55), 0 2px 6px rgba(40, 25, 5, .25);
  --stamp-filter: none; --grain: .045;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --type: "American Typewriter", "Courier Prime", "Courier New", Courier, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --desk: #0d0a07; --desk-line: rgba(0, 0, 0, .5); --desk-ink: #d6cab0; --lamp: rgba(255, 186, 102, .1);
    --paper: #1c1813; --ink: #f4ecdb; --ink-soft: #d3c8b0; --rule: #6b5e4c;
    --red: #ff9384; --guil: #8fb3a0; --sig: #b3c8ff; --field: #28221b;
    --shadow: 0 24px 60px -20px #000, 0 0 0 1px #3a3128;
    --stamp-filter: brightness(1.9) saturate(.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --desk: #0d0a07; --desk-line: rgba(0, 0, 0, .5); --desk-ink: #d6cab0; --lamp: rgba(255, 186, 102, .1);
  --paper: #1c1813; --ink: #f4ecdb; --ink-soft: #d3c8b0; --rule: #6b5e4c;
  --red: #ff9384; --guil: #8fb3a0; --sig: #b3c8ff; --field: #28221b;
  --shadow: 0 24px 60px -20px #000, 0 0 0 1px #3a3128;
  --stamp-filter: brightness(1.9) saturate(.8);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--desk); scroll-behavior: smooth; scroll-padding-top: 4.500rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 18px/1.65 var(--serif);
  background:
    radial-gradient(ellipse 90% 520px at 50% 0, var(--lamp), transparent) fixed,
    repeating-linear-gradient(90deg, transparent 0 116px, var(--desk-line) 116px 118px),
    var(--desk);
}
@media (min-width: 1000px) { body { font-size: 19px; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 99; top: 8px; left: 8px; width: auto; height: auto; clip-path: none; padding: .5rem 1rem; background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration-thickness: 1.500px; text-underline-offset: .18em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }

/* running head */
.runhead {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .75rem;
  padding: .45rem max(12px, calc((100vw - 1040px) / 2)); min-height: 3.250rem;
  background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 2px 10px -6px #0008;
  font: 1rem/1.2 var(--serif);
}
.brandmark { display: block; width: 168px; aspect-ratio: 1282 / 196; background: var(--ink); flex: none;
  -webkit-mask: url(/assets/title-line.svg) no-repeat left center / contain; mask: url(/assets/title-line.svg) no-repeat left center / contain; }
.runhead .grow { flex: 1; }
/* narrow screens: Contents menu already links the form, so drop the duplicate button */
@media (max-width: 519px) { .runhead > .button { display: none; } .brandmark { width: 140px; } }
.toc { position: relative; }
.toc summary { list-style: none; cursor: pointer; padding: .7rem .6rem; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: " \25BE"; }
.toc ol { position: absolute; right: 0; top: 100%; margin: 0; padding: .5rem; list-style: none; width: 16rem;
  background: var(--paper); border: 1.500px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.toc a { display: block; padding: .7rem .6rem; text-decoration: none; }
.toc a:hover, .toc a:focus-visible { background: var(--ink); color: var(--paper); }
.toclinks { display: none; }
@media (min-width: 1080px) {
  .toc { display: none; }
  .toclinks { display: flex; gap: .1rem; margin: 0; padding: 0; list-style: none; }
  .toclinks a { padding: .75rem .55rem; text-decoration: none; display: block; }
  .toclinks a:hover { text-decoration: underline; }
}
.lamp { font: inherit; color: inherit; background: none; border: 1.500px solid var(--ink-soft);
  min-width: 44px; min-height: 44px; padding: 0 .7rem; cursor: pointer; border-radius: 2px; }
.lamp:hover { border-color: var(--ink); }

/* buttons */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.250rem;
  font: 700 1.050rem/1.2 var(--serif); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  color: var(--ink); background: transparent; border: 1.500px solid var(--ink); border-radius: 2px; box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s; }
.button:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--red); }
.button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.button.solid { background: var(--ink); color: var(--paper); }
.button.solid:hover { color: var(--paper); }
.button.small { min-height: 44px; padding: .4rem .9rem; font-size: 1rem; box-shadow: 2px 2px 0 var(--ink); }

/* the sheet */
.sheet { position: relative; max-width: 1040px; margin: 14px 8px 0; background-color: var(--paper); box-shadow: var(--shadow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.frame { margin: 0; padding: 0 0 1px; border: 3px double var(--guil); position: relative; }
.sheet { padding: 8px; overflow: clip; } /* stamps scale in from 2.6x; keep that from widening the page */
.guil { display: block; height: 22px; background: var(--guil);
  -webkit-mask: url(/assets/guilloche.svg) repeat-x left center / auto 100%; mask: url(/assets/guilloche.svg) repeat-x left center / auto 100%; }
.doc { padding: 18px 16px 8px; }
@media (min-width: 700px) { .sheet { margin: 28px auto 0; padding: 16px; } .guil { height: 30px; } .doc { padding: 28px 40px 16px; } }
@media (min-width: 1000px) { .doc { padding: 36px 56px 20px; } .col { max-width: 620px; } }

/* typed-in blanks */
.typed { font-family: var(--type); border-bottom: 1px solid var(--rule); padding: 0 .15em; }
.meta { font: italic 1rem/1.4 var(--serif); color: var(--ink-soft); text-align: center; margin: 0 0 1.250rem; }

/* opening */
.opening { position: relative; }
/* watermark sits behind the display title only, never behind reading text */
.opening::before { content: ""; position: absolute; top: 70px; left: 0; right: 0; margin: auto; width: min(64%, 330px); aspect-ratio: 1; background: var(--guil); opacity: .1; pointer-events: none;
  -webkit-mask: url(/assets/rosette.svg) no-repeat center / contain; mask: url(/assets/rosette.svg) no-repeat center / contain; }
@media (min-width: 700px) { .opening::before { top: 40px; } }
.opening > * { position: relative; }
.venuerow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 96px; }
.venue { display: flex; align-items: center; gap: .4rem; font: 1rem/1.45 var(--serif); margin: 0; }
.venue .brace { font: 2.800rem/1 var(--serif); color: var(--ink-soft); }
.rubber { display: block; height: auto; filter: var(--stamp-filter); transform: rotate(var(--r, -7deg)); mix-blend-mode: multiply; }
:root[data-theme="dark"] .rubber { mix-blend-mode: normal; }
:root[data-theme="dark"] .opening::before { opacity: .05; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .opening::before { opacity: .05; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rubber { mix-blend-mode: normal; } }
.rubber.abides { width: 132px; aspect-ratio: 470 / 180; flex: none; margin-top: 6px; }
.rubber.nla { aspect-ratio: 420 / 240; }
.sealimg { aspect-ratio: 1; }
@media (min-width: 700px) { .rubber.abides { width: 230px; margin-right: 12px; } }
.title { display: block; margin: 1.250rem auto .9rem; width: min(100%, 440px); aspect-ratio: 652 / 384; background: var(--ink);
  -webkit-mask: url(/assets/title-stack.svg) no-repeat center / contain; mask: url(/assets/title-stack.svg) no-repeat center / contain; }
@media (min-width: 700px) { .title { width: 100%; max-width: 860px; aspect-ratio: 1282 / 196; margin-top: .5rem;
  -webkit-mask-image: url(/assets/title-line.svg); mask-image: url(/assets/title-line.svg); } }
h1 { margin: 0; }
.tagline { text-align: center; font-style: italic; font-size: 1.400rem; line-height: 1.35; margin: 0 auto .6rem; max-width: 26em; }
@media (min-width: 700px) { .tagline { font-size: 1.650rem; } }
.orn { display: flex; align-items: center; gap: 1rem; color: var(--guil); margin: 1.100rem auto 1.600rem; max-width: 560px; font-size: 1.300rem; line-height: 1; }
.orn::before, .orn::after { content: ""; flex: 1; height: 5px; border-top: 1px solid; border-bottom: 1px solid; }
.blackletter { display: block; height: 32px; margin: 0 0 .5rem; background: var(--ink);
  -webkit-mask: var(--src) no-repeat left center / contain; mask: var(--src) no-repeat left center / contain; }
@media (min-width: 700px) { .blackletter { height: 40px; } }
.preamble { font-size: 1.080rem; text-align: left; }
.plain { border-left: 4px solid var(--red); padding: .1rem 0 .1rem .9rem; margin: 1.400rem 0; }
.plain b { font: 700 1rem var(--serif); letter-spacing: .08em; text-transform: uppercase; color: var(--red); display: block; }
.cta { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.500rem 0 .5rem; }
.sealfloat { display: none; }
@media (min-width: 1000px) { .sealfloat { display: block; float: right; width: 210px; height: auto; margin: -8px -262px 0 0; filter: drop-shadow(0 3px 5px #0006); } }

/* sidenotes: margin notes on wide screens, tucked-in notes on narrow */
body { counter-reset: note; }
.ref { counter-increment: note; }
.ref::after { content: counter(note); font: 700 .75em var(--serif); vertical-align: super; line-height: 0; color: var(--red); padding-left: 2px; }
.sidenote { display: block; margin: .6rem 0 .6rem .4rem; padding-left: .7rem; border-left: 3px solid var(--red);
  font: 1rem/1.5 var(--serif); color: var(--ink-soft); }
.sidenote::before { content: counter(note) ". "; font-weight: 700; color: var(--red); }
@media (min-width: 1000px) {
  .sidenote { float: right; clear: right; width: 228px; margin: .15rem -262px .8rem 0; padding: 0 0 0 .7rem; transition: color .2s, transform .2s; }
  .ref:hover + .sidenote, .sidenote:hover { color: var(--ink); transform: translateX(-4px); }
}

/* articles */
.article { padding-top: 2.600rem; clear: both; }
.artno { font: 700 1rem var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0; }
h2 { font: italic 400 2.300rem/1.15 var(--serif); margin: .2rem 0 .7rem; padding-bottom: .7rem; border-bottom: 3px double var(--rule); }
@media (min-width: 700px) { h2 { font-size: 2.800rem; } }
.lede { font-size: 1.080rem; }
.clause { margin: 1.300rem 0; }
.sec { font: 700 1rem var(--serif); color: var(--ink-soft); display: block; white-space: nowrap; }
h3 { display: inline; font: 700 1.080em var(--serif); margin: 0; }
h3::after { content: " \2014 "; font-weight: 400; }
.clause p { display: inline; }
.clause p + p { display: block; margin-top: .8em; }
@media (min-width: 700px) { .clause { display: grid; grid-template-columns: 4.200rem 1fr; } }
.procedure { list-style: none; counter-reset: step; margin: .6rem 0 0; padding: 0; }
.procedure li { counter-increment: step; position: relative; padding-left: 2.300rem; margin: .5rem 0; }
.procedure li::before { content: "(" counter(step, lower-alpha) ")"; position: absolute; left: 0; color: var(--ink-soft); }
.plainlist { margin: .5rem 0 0; padding-left: 1.200rem; list-style: square; }
.plainlist li { margin: .25rem 0; }
.plainlist li::marker { color: var(--red); font-size: .8em; }
.notice { border: 3px double var(--ink); padding: 1rem 1.100rem; margin: 1.800rem 0 0; background: var(--field); }
.notice b { display: block; font: 700 1rem var(--serif); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .35rem; }
.notice p { margin: 0; }

/* schedule of fees */
.schedule { width: 100%; border-collapse: collapse; margin: .8rem 0 .5rem; font: 1.050rem/1.4 var(--serif); }
.schedule caption { text-align: left; font: 700 1rem var(--serif); letter-spacing: .08em; text-transform: uppercase; padding-bottom: .4rem; border-bottom: 2px solid var(--ink); }
.schedule th { text-align: left; font-weight: 400; padding: .7rem .5rem .7rem 0; border-bottom: 1px solid var(--rule); }
.schedule td { text-align: right; padding: .7rem 0; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: bottom; }
.schedule .big { font-size: 1.700rem; font-weight: 700; color: var(--red); }
.fine { font-size: 1rem; color: var(--ink-soft); line-height: 1.55; }
.rubber.nla { float: right; width: 120px; margin: 0 0 .4rem .8rem; --r: 6deg; }
@media (min-width: 1000px) { .rubber.nla { width: 190px; margin: -10px -254px 0 0; } }

/* interrogatories */
.qa { border-bottom: 1px solid var(--rule); }
.qa summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 2rem 1fr 1.500rem; gap: .2rem; padding: .85rem 0; min-height: 44px; font-weight: 700; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "Q."; color: var(--red); }
.qa summary::after { content: "+"; font: 400 1.400rem/1 var(--serif); text-align: right; }
.qa[open] summary::after { content: "\2212"; }
.qa .ans { display: grid; grid-template-columns: 2rem 1fr; gap: .2rem; padding: 0 1.500rem 1rem 0; }
.qa .ans::before { content: "A."; font-weight: 700; color: var(--ink-soft); }
.qa .ans p { margin: 0; }

/* contact form */
.formbox { position: relative; border: 1.500px solid var(--ink); margin-top: 1.200rem; background: var(--field); }
.formhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .6rem .9rem; background: var(--ink); color: var(--paper);
  font: 700 1rem var(--serif); letter-spacing: .04em; }
.formbody { padding: 1.100rem .9rem 1.300rem; display: grid; gap: 1.400rem; }
@media (min-width: 700px) { .formbody { grid-template-columns: 1fr 1fr; padding: 1.400rem 1.400rem 1.600rem; } .wide { grid-column: 1 / -1; } }
.field label, .checks legend { display: block; font: 700 1rem var(--serif); color: var(--ink); margin-bottom: .15rem; padding: 0; }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea { width: 100%; font: 1.100rem/1.5 var(--type); color: var(--sig); background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; padding: .5rem .2rem .3rem; min-height: 46px; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--red); outline-offset: 3px; }
.field textarea { display: block; min-height: 160px; line-height: 40px; padding-top: 0; padding-bottom: 0; resize: vertical; border: 0;
  background-image: repeating-linear-gradient(transparent 0 38px, var(--ink-soft) 38px 40px); background-attachment: local; }
.field textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.checks { border: 0; margin: 0; padding: 0; min-width: 0; }
.checkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (min-width: 700px) { .checkgrid { grid-template-columns: repeat(3, 1fr); } }
.checkgrid label { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin: 0; font: 400 1.050rem/1.25 var(--serif); color: var(--ink); cursor: pointer; }
.checkgrid input { appearance: none; -webkit-appearance: none; flex: none; width: 1.400rem; height: 1.400rem; min-height: 0; padding: 0; margin: 0; border: 2px solid var(--ink); border-radius: 0; background: transparent; cursor: pointer; }
.checkgrid input:checked { background:
  linear-gradient(45deg, transparent 42%, var(--sig) 42% 58%, transparent 58%),
  linear-gradient(-45deg, transparent 42%, var(--sig) 42% 58%, transparent 58%); }
.checkgrid input:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.hp { display: none; }
.checklabel { font: 700 1rem var(--serif); margin: 0 0 .4rem; }
#ts { min-height: 65px; } /* reserve the widget's height so the form doesn't jump when it loads */
.humancheck .fine { margin: .4rem 0 0; }
.submitrow { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.submitrow .fine { flex: 1 1 14rem; margin: 0; }
.formbox .thunk { position: absolute; inset: 0; margin: auto; width: min(70%, 380px); height: auto; opacity: 0; pointer-events: none; --r: -9deg; }
.formbox.stamped .thunk { animation: thunk .5s cubic-bezier(.2, .9, .3, 1) both; }

/* signature block */
.sigblock { display: grid; gap: 1.500rem; align-items: end; margin-top: 2.600rem; }
@media (min-width: 700px) { .sigblock { grid-template-columns: 1fr auto; } }
.signature { display: block; width: min(100%, 330px); aspect-ratio: 780 / 172; margin: 0 0 -14px 10px; background: var(--sig); transform: rotate(-3deg); transform-origin: left bottom;
  -webkit-mask: url(/assets/sig-archie.svg) no-repeat left bottom / contain; mask: url(/assets/sig-archie.svg) no-repeat left bottom / contain; }
.sigline { border-top: 2px solid var(--ink); padding-top: .35rem; font: 1rem/1.5 var(--serif); max-width: 26rem; margin: 0; }
.sealimg { width: 150px; height: auto; filter: drop-shadow(0 3px 5px #0006); justify-self: start; }
.endfine { text-align: center; margin: 2rem auto 1.200rem; max-width: 36rem; }

.deskfoot { max-width: 1040px; margin: 0 auto; padding: 1.600rem 16px 2.600rem; color: var(--desk-ink); font: 1rem/1.6 var(--serif); }
.deskfoot p { margin: 0 0 .6rem; }

/* thanks page */
.receipt { max-width: 560px; margin: 8vh auto 0; }
.receipt .doc { text-align: center; padding-bottom: 2rem; }
.received { position: relative; width: min(100%, 330px); margin: 1.500rem auto; --r: -5deg; }
.received img { width: 100%; }
.received time { position: absolute; left: 0; right: 0; top: 47%; text-align: center; font: 700 1.250rem var(--type); letter-spacing: .1em; color: var(--red); transform: rotate(-5deg); }

/* signature moments */
@keyframes thunk {
  0% { opacity: 0; transform: rotate(var(--r, -7deg)) scale(2.600); }
  55% { opacity: 1; transform: rotate(var(--r, -7deg)) scale(.93); }
  100% { opacity: .95; transform: rotate(var(--r, -7deg)) scale(1); }
}
.rubber.abides, .received { animation: thunk .5s cubic-bezier(.2, .9, .3, 1) .55s both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .formbox .thunk { display: none; }
}
/* Windows High Contrast / forced colors: masks lose their fill, so give them system colors */
@media (forced-colors: active) {
  .brandmark, .title, .blackletter, .signature, .guil { background: CanvasText; forced-color-adjust: none; }
  .opening::before { display: none; }
}
@media print { .runhead, .deskfoot, .cta { display: none; } body { background: #fff; } .sheet { box-shadow: none; margin: 0; max-width: none; } }