:root {
  color-scheme: light;
  --paper: #f8f6f0;
  --surface: #fffdf8;
  --ink: #272923;
  --muted: #63635a;
  --accent: #a23d29;
  --rule: #cfcdc0;
  --panel: #efece1;
  --serif: "Baskerville", "Iowan Old Style", Georgia, "Times New Roman", serif;
  background: var(--paper);
  color: var(--ink);
  font: 100%/1.5 var(--serif);
}
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100%, 63rem); padding: clamp(3.5rem, 12vh, 8rem) clamp(1.25rem, 6vw, 5rem) 6rem; margin: auto; }
h1, h2, h3, h4, p { margin: 0; }
header { border-bottom: 1px solid var(--rule); padding-bottom: clamp(1.75rem, 4vw, 2.75rem); }
h1 {
  display: flex; align-items: center; gap: .24em; width: max-content; max-width: 100%;
  font: normal clamp(3.85rem, 9vw, 6.7rem)/1.05 var(--serif);
  letter-spacing: -.065em;
}
.brand-mark { display: block; width: .84em; height: .84em; flex: none; margin-top: .04em; }
header p { color: var(--muted); margin-top: 1rem; font: 400 clamp(1.05rem, 2.2vw, 1.28rem)/1.5 var(--serif); }
form { margin-top: clamp(1.6rem, 3.3vw, 2.25rem); }
.inputs, .positions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 3vw, 1.6rem); }
label, .position { --side: var(--ink); }
label:nth-child(2), .position:nth-child(2) { --side: var(--accent); }
.field-label, .position h4 {
  display: flex; align-items: center; gap: .55rem; color: var(--side);
  font: 650 .85rem/1.5 var(--serif);
}
.field-label::before, .position h4::before {
  content: ""; display: block; width: .95rem; height: 3px; background: var(--side); flex: none;
}
input {
  width: 100%; min-width: 0; min-height: 3.55rem; display: block; margin-top: .5rem;
  font: 400 1.15rem/1.4 var(--serif); border: 1px solid #a7a69a; border-radius: .38rem;
  padding: .85rem 1rem; appearance: none; background: var(--surface); color: var(--ink);
}
input::placeholder { color: #77766c; opacity: 1; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:is(input, button, a):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
input:focus { border-color: var(--side); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: 1.35rem; }
button { cursor: pointer; font-family: inherit; }
#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .85rem; min-height: 2.9rem;
  padding: .65rem 1.18rem; background: var(--accent); color: #fffdf8; border: 0;
  border-radius: .38rem; font-size: .94rem; font-weight: 650;
}
#submit:hover { background: #84311f; }
#submit span { font-size: 1.2em; line-height: 1; }
button:disabled { opacity: .66; cursor: wait; }
#example {
  padding: .6rem 0; min-height: 2.75rem; border: 0; background: none; color: var(--muted);
  font-size: .86rem; text-decoration: underline; text-underline-offset: .23em;
}
#example:hover, a:hover { color: var(--accent); }
#status:not(:empty), noscript { display: block; margin-top: 1.2rem; color: var(--muted); }
#status.error { color: #92281e; }
#results { margin-top: 3.5rem; padding-top: 2.25rem; border-top: 2px solid var(--ink); scroll-margin-top: 2rem; outline: 0; }
h2, h3 { text-wrap: pretty; }
h2 { font: normal clamp(2.15rem, 5vw, 3.5rem)/1.1 var(--serif); letter-spacing: -.045em; }
.result-meta, .note, .sources { color: var(--muted); line-height: 1.55; }
.result-meta, .note { margin-top: .65rem; }
.result-meta { font-size: .87rem; }
.note { font-size: .96rem; }
.findings { list-style: none; padding: 0; margin: 1.75rem 0 0; }
.finding { border-top: 1px solid var(--rule); padding: 1.8rem 0 2.25rem; }
.finding-heading { display: flex; align-items: baseline; gap: .8rem; }
.number { font: 500 .78rem/1.4 var(--serif); color: var(--muted); flex: none; }
h3 { font: normal clamp(1.7rem, 4vw, 2.35rem)/1.14 var(--serif); letter-spacing: -.035em; }
.positions { margin-top: 1.3rem; }
.position h4 { margin-bottom: .33rem; }
.position p { font-size: 1rem; line-height: 1.6; }
.question { padding: .78rem 1rem .88rem; margin-top: 1.12rem; border-left: 3px solid var(--accent); background: var(--panel); font: normal 1.25rem/1.36 var(--serif); }
.question-label { font: 650 .76rem/1.4 var(--serif); color: var(--accent); display: block; margin-bottom: .23rem; }
.sources { margin-top: 1rem; font-size: .84rem; overflow-wrap: anywhere; }
.sources h4 { font: 650 .77rem/1.5 var(--serif); margin-bottom: .2rem; color: var(--ink); }
.sources ul { margin: 0; padding: 0; list-style: none; }
.sources li + li { margin-top: .32rem; }
.sources summary { cursor: pointer; width: fit-content; }
.sources summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sources blockquote { margin: .35rem 0 .8rem; padding-left: .85rem; border-left: 1px solid var(--rule); }
a { color: var(--ink); text-underline-offset: .2em; text-decoration-color: #95958b; }
h2, h3, h4, .position p, .question { overflow-wrap: anywhere; }
@media (max-width: 36rem) {
  main { padding-top: 2.8rem; }
  .inputs, .positions { grid-template-columns: minmax(0, 1fr); }
  .inputs { gap: 1.1rem; }
  .positions { gap: .9rem; }
  #results { margin-top: 2.7rem; }
}
@media (max-width: 20rem) {
  h1 { font-size: 3.35rem; }
}