/* Page layout for demarestlloyd.org. Components live in components.css. */
html { background: var(--paper); }
body { margin: 0; }
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 max(var(--gutter), 4vw); }
main { padding: var(--space-6) 0; display: grid; gap: var(--space-6); }
.hero { display: grid; gap: var(--space-3); max-width: 15em; max-width: min(100%, 760px); }
.hero .dl-dek { max-width: 30em; }
.region { display: grid; gap: var(--space-4); }
.region > header { display: grid; gap: var(--space-2); border-top: var(--rule-heavy) solid var(--ink); padding-top: var(--space-3); max-width: var(--measure); }
.items { margin: 0; padding-left: 1.6em; display: grid; gap: var(--space-3); }
.items li::marker { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.items strong { font-weight: 600; }
.list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); border-top: var(--rule-hair) solid var(--rule); }
.list li { border-bottom: var(--rule-hair) solid var(--rule); padding: var(--space-3) 0; display: grid; gap: var(--space-1); }
.list .t { font-family: var(--font-serif); font-size: 20px; line-height: 1.25; font-weight: 500; }
.foot { border-top: var(--rule-hair) solid var(--ink); padding: var(--space-3) 0 var(--space-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.foot p { margin: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-3); top: var(--space-3); background: var(--paper); padding: var(--space-2); z-index: 1; }
@media (max-width: 600px) { main { padding: var(--space-5) 0; gap: var(--space-5); } .dl-masthead__name { font-size: 20px; } }

/* ---- Pages (added for the multi-page site) ---- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.head { display: grid; gap: var(--space-3); max-width: 46rem; }
.prose { display: grid; gap: var(--space-4); max-width: var(--measure); }
.prose p, .head p { margin: 0; }
.dl-body p { margin: 0; }

/* Numbered parts: label + heading on the left, items on the right */
.part { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-4); border-top: var(--rule-heavy) solid var(--ink); padding-top: var(--space-3); align-items: start; }
.part > header { display: grid; gap: var(--space-1); }
.part > header p { margin: 0; }
.part > :not(header) { grid-column: 2; min-width: 0; }
.numbered { list-style: none; margin: 0; padding: 0; counter-reset: n; max-width: var(--measure); }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 var(--space-2); padding-block: var(--space-3); border-bottom: var(--rule-hair) solid var(--rule); }
.numbered li:first-child { padding-top: 0; }
.numbered li:last-child { border-bottom: 0; }
.numbered li::before { content: counter(n) "."; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--red); padding-top: 4px; }
.numbered p { margin: 0; }
.numbered strong { font-weight: 600; }
.dl-page a.cite { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-muted); text-decoration-color: var(--rule-strong); white-space: nowrap; }
.dl-page a.cite:hover { color: var(--red); }

.provisions { display: grid; gap: var(--space-4); max-width: var(--measure); }
.provisions .dl-provision p { margin: 0; }
.ruled { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--rule); }
.ruled li { padding-block: var(--space-3); border-bottom: var(--rule-hair) solid var(--rule); }
.ruled strong { font-weight: 600; }

.tablewrap { overflow-x: auto; max-width: 52rem; }
.dl-table td.lead { font-family: var(--font-serif); font-size: 18px; font-weight: 600; min-width: 8rem; }

.qa { margin: 0; max-width: var(--measure); border-top: var(--rule-hair) solid var(--rule); }
.qa dt { font-weight: 600; font-size: 21px; line-height: 1.3; padding-top: var(--space-3); }
.qa dd { margin: var(--space-2) 0 0; padding-bottom: var(--space-3); border-bottom: var(--rule-hair) solid var(--rule); }

.soon { display: grid; gap: var(--space-2); max-width: var(--measure); background: var(--paper-deep); border-top: var(--rule-heavy) solid var(--ink); padding: var(--space-4); }
.soon p { margin: 0; }
.soon .dl-label { color: var(--red); }

.toc { list-style: none; margin: 0; padding: 0; border-top: var(--rule-heavy) solid var(--ink); max-width: 46rem; }
.toc li { border-bottom: var(--rule-hair) solid var(--rule); padding-block: var(--space-3); display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); }
.toc .t { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 500; font-variation-settings: 'opsz' 32; }
.toc p { margin: 0; }

.dates { list-style: none; padding: 0; margin: 0; max-width: var(--measure); border-top: var(--rule-hair) solid var(--ink); }
.dates li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-2); border-bottom: var(--rule-hair) solid var(--rule); font-size: 17px; }
.dates .y { font-family: var(--font-sans); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--red); padding-top: 2px; }

/* Home */
.triad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); border-top: var(--rule-heavy) solid var(--ink); }
.triad > div { padding-top: var(--space-3); display: grid; gap: var(--space-2); align-content: start; }
.triad p, .triad h2 { margin: 0; }
.dl-page .triad .dl-subhead a { text-decoration: none; }
.dl-page .triad .dl-subhead a:hover { text-decoration: underline; text-decoration-color: var(--red); }

/* Release diagram */
.fig { margin: 0; display: grid; gap: var(--space-2); }
.diagram svg { display: block; width: 100%; max-width: 820px; height: auto; }
.d-line { stroke: var(--ink); stroke-width: 1; fill: none; }
.d-clock { stroke: var(--red); stroke-width: 3; fill: none; }
.d-back { stroke: var(--green); stroke-width: 1; fill: none; }
.d-tick { stroke: var(--rule-strong); stroke-width: 1; }
.f-ink { fill: var(--ink); } .f-red { fill: var(--red); } .f-green { fill: var(--green); }
.d-lab { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; fill: var(--ink-muted); }
.d-lab.r { fill: var(--red); } .d-lab.g { fill: var(--green); }
.d-txt { font-family: var(--font-serif); font-size: 15px; fill: var(--ink); }
.d-big { font-family: var(--font-serif); font-size: 22px; font-weight: 500; fill: var(--red); }
.steps { display: none; list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--ink); }
.steps li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-bottom: var(--rule-hair) solid var(--rule); }
.steps li::before { content: ""; width: 12px; height: 12px; margin-top: 6px; background: var(--ink); }
.steps li.g::before { background: var(--green); } .steps li.r::before { background: var(--red); }
.steps .dl-label { display: block; margin-bottom: 2px; }
.steps li.g .dl-label { color: var(--green); } .steps li.r .dl-label { color: var(--red); }
.steps li.clock { border-left: var(--rule-heavy) solid var(--red); margin-left: 4px; padding-left: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.steps li.clock::before { display: none; }
.steps .big { font-size: 22px; font-weight: 500; color: var(--red); }

@media (max-width: 760px) {
  .part { grid-template-columns: 1fr; gap: var(--space-3); }
  .part > :not(header) { grid-column: 1; }
  .triad { grid-template-columns: 1fr; border-top: 0; gap: 0; }
  .triad > div { border-top: var(--rule-hair) solid var(--rule); padding-block: var(--space-3); }
  .triad > div:first-child { border-top: var(--rule-heavy) solid var(--ink); }
  .toc li { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (max-width: 600px) {
  .diagram { display: none; } .steps { display: block; }
  .qa dt { font-size: 19px; }
}

/* Bill text */
.bill-text ol, .bill-text ul { margin: 0; padding-left: 1.5em; display: grid; gap: var(--space-2); }
.bill-text li p { margin: 0; }
.bill-toc { list-style: none; padding-left: 0 !important; }
.bill-toc a { display: inline-block; min-height: 44px; line-height: 44px; }
.part[aria-labelledby^="sec-"] { scroll-margin-top: var(--space-4); }