/* pointsixtyfive.com: ink on paper, one column, red only where it means something. */

/* Source Serif 4 sets what you read and the logo, Inter the interface; paragraph numbers
   and phraseology use the device's own monospace. Both self-hosted from Google Fonts'
   files (@fontsource-variable/source-serif-4 5.3.1 and @fontsource-variable/inter 5.3.0,
   SIL OFL, fonts/OFL-*.txt), the weight axis only, optical size fixed at 14, the text
   size. A browser fetches a file only when a page uses it; the layout preloads the two
   Latin romans. A changed font gets a new file name: these are cached for a year. */
@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@counter-style paren-alpha { system: extends lower-alpha; prefix: "("; suffix: ") "; }
@counter-style paren-decimal { system: extends decimal; prefix: "("; suffix: ") "; }

:root {
  --paper: #fdfcfa;
  --ink: #17140f;
  --muted: #6c665d;
  --faint: #a39c91;
  --rule: #e6e1d8;
  --tint: #f4f1eb;
  --red: #c8161d;
  --red-text: #b2141a;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --measure: 42rem;
  /* the renderer's eight [COLOR] classes */
  --c-red: #c62828; --c-orange: #b45309; --c-yellow: #8a6d00; --c-green: #2e7d32;
  --c-blue: #1f5fbf; --c-purple: #6a3fb5; --c-pink: #b4236e;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131210;
    --ink: #ebe7df;
    --muted: #a39d93;
    --faint: #6f6a62;
    --rule: #2c2a26;
    --tint: #1c1b18;
    --red: #ef4444;
    --red-text: #ff6b63;
    --c-red: #ff7b72; --c-orange: #f0a35b; --c-yellow: #e3c55a; --c-green: #6fcf75;
    --c-blue: #79a8ff; --c-purple: #b99bf5; --c-pink: #f28cc0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.65 var(--serif);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { text-decoration-color: var(--red); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: 2.125rem; margin: 0 0 .5rem; }
h2 { font-size: 1.375rem; margin: 2.75rem 0 .75rem; }
h3 { font: 600 .875rem/1.4 var(--sans); margin: 1.5rem 0 .5rem; }
code, pre { font-family: var(--mono); font-size: .875em; }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Header and footer ---- */

header.site { border-bottom: 1px solid var(--rule); }
header.site .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-block: .9rem; }
.brand { display: flex; align-items: baseline; gap: .5rem; text-decoration: none; }
.wordmark { font: 500 .8125rem var(--sans); color: var(--muted); }
.site-nav { display: flex; gap: 1.1rem; margin-left: auto; font: 500 .875rem var(--sans); }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); }
.search { flex: 1 1 100%; }
.search input, .lookup-form input {
  width: 100%;
  font: .9375rem var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .45rem .7rem;
}
.search input:focus, .lookup-form input:focus { outline: 2px solid var(--red); outline-offset: 0; border-color: transparent; }
@media (min-width: 44rem) {
  .search { flex: 0 1 11rem; }
}

footer.site { border-top: 1px solid var(--rule); margin-top: 3rem; padding-block: 1.25rem 2.5rem; font: .8125rem/1.6 var(--sans); color: var(--muted); }
footer.site p { margin: 0 0 .5rem; }

/* ---- The logo ---- */

.logo { font: 700 1.75rem/1 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums; }
/* A period is a small glyph; scaled up, the point reads as red even at header size. */
.logo .mark { color: var(--red); display: inline-block; transform: scale(1.5); transform-origin: 50% 80%; margin-right: .06em; }

/* ---- Shared ---- */

main.wrap { padding-block: 2rem 1rem; }  /* .wrap alone would zero it */
.crumbs, .meta { font: .875rem/1.5 var(--sans); color: var(--muted); }
.crumbs { margin-bottom: 1.25rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 .4rem; color: var(--faint); }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: .45rem 0; border-bottom: 1px solid var(--rule); font: .9375rem/1.45 var(--sans); }
.plain-list a { text-decoration: none; }
.plain-list a:hover { text-decoration: underline; }
.plain-list .note { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.more { font: .875rem var(--sans); }

/* ---- Home ---- */

.lookup { padding-top: .5rem; }
.lookup h1 { font-size: 2.5rem; }
.lookup .intro { font: .9375rem/1.5 var(--sans); color: var(--muted); margin: 0 0 1rem; }
.lookup-form { display: flex; gap: .5rem; }
.lookup-form input { font-size: 1.125rem; padding: .7rem .9rem; border: 1.5px solid var(--ink); border-radius: 8px; }
.lookup-form button { font: 600 1rem var(--sans); padding: 0 1.25rem; border: 0; border-radius: 8px; background: var(--red); color: #fff; cursor: pointer; }
.lookup-form button:hover { filter: brightness(1.08); }
.edition { font: .8125rem/1.55 var(--sans); color: var(--muted); }
.lookup .edition { margin: .75rem 0 0; }
.chapter-list { list-style: none; margin: 0; padding: 0; columns: 2 15rem; column-gap: 2rem; font: .9375rem/1.4 var(--sans); }
.chapter-list li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.chapter-list a { display: flex; padding: .45rem 0; text-decoration: none; }
.chapter-list a:hover { color: var(--red-text); }
.chapter-list .n { flex: 0 0 1.9rem; font: 600 .875rem/1.6 var(--mono); color: var(--red-text); }
.archive > p { margin: 0 0 .5rem; }
.archive-cols { display: grid; gap: 0 2rem; }
@media (min-width: 40rem) { .archive-cols { grid-template-columns: 1fr 1fr; } }

/* ---- Search suggestions (assets/suggest.js), under the header's box and the home lookup ---- */

.has-suggest { position: relative; }
.suggest {
  position: absolute; top: calc(100% + .35rem); right: 0; z-index: 30;
  width: max(100%, 24rem); max-width: calc(100vw - 2rem); max-height: min(70vh, 30rem); overflow-y: auto;
  padding: .3rem 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .14); font: .9375rem/1.35 var(--sans);
}
.suggest[hidden] { display: none; }
.suggest a { display: flex; align-items: baseline; gap: .6rem; padding: .45rem .8rem; color: var(--ink); text-decoration: none; }
.suggest a[aria-selected="true"] { background: var(--tint); }
.suggest .n { flex: none; font: 600 .8125rem var(--mono); color: var(--red-text); }
.suggest .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .note { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; color: var(--muted); }
.suggest mark { background: none; color: inherit; font-weight: 600; }
.suggest .first-result { margin-top: .3rem; border-top: 1px solid var(--rule); padding-top: .6rem; }
.suggest .all { margin-top: .3rem; border-top: 1px solid var(--rule); padding-top: .55rem; font-size: .875rem; font-weight: 500; }
.suggest .all::after { content: "\2192"; margin-left: auto; color: var(--muted); }

/* ---- Threads ---- */

.thread-head h1 { margin-bottom: .35rem; }
.posts { list-style: none; margin: 1.75rem 0 0; padding: 0; }
/* The space around the rule between two posts is about three times the space between
   two paragraphs, so a post's end can't be taken for a paragraph's. A post's last block
   gives up its own margin, so that space is the same whatever the post ends with. */
.post { border-top: 1px solid var(--rule); padding: 1.75rem 0; }
.post-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .7rem; font: .875rem var(--sans); color: var(--muted); }
.post-head .author { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.post-head .op { align-self: center; padding: .05rem .35rem; border: 1px solid var(--rule); border-radius: 3px; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; }
.post-body { text-wrap: pretty; }
.post-head .num { margin-left: auto; color: var(--faint); text-decoration: none; font-variant-numeric: tabular-nums; }
.post-body > :first-child { margin-top: 0; }
.post-body > :last-child, .post > .post-files:last-child { margin-bottom: 0; }
.post-body + .post-files { margin-top: 1rem; }
.post-body p { margin: 0 0 1em; }
.post-body ul, .post-body ol { margin: 0 0 1em; padding-left: 1.4rem; }
.post-body ul { list-style: disc; }  /* posts sit in an <ol>, which would make these "nested" */
.post-body ul ul { list-style: circle; }
.post-body ol { list-style: decimal; }
.post-body li { margin: .3em 0; }
/* A quote is smaller than the reply and on a tint, so the reply is what the eye lands on.
   A long one is cut short by the thread page's script (.clamped), with a button after it
   that shows the rest; without the script it's whole. */
.post-body blockquote { margin: 0 0 1.1rem; padding: .7rem 1rem; border-left: 2px solid var(--faint); border-radius: 0 4px 4px 0; background: var(--tint); font-size: .9375rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 78%, var(--paper)); }
.post-body blockquote blockquote { padding: 0 0 0 .9rem; border-radius: 0; background: none; font-size: 1em; color: inherit; }
.post-body blockquote cite { display: block; margin: 0 0 .3rem; font: 600 .8125rem var(--sans); font-style: normal; color: var(--muted); }
.post-body blockquote cite a { text-decoration: none; }
.post-body blockquote cite a:hover { text-decoration: underline; }
.post-body blockquote > :last-child { margin-bottom: 0; }
.post-body blockquote.clamped { max-height: 8rem; overflow: hidden; margin-bottom: 0; border-bottom-right-radius: 0; position: relative; }
.post-body blockquote.clamped::after { content: ""; position: absolute; inset: auto 0 0; height: 2.5rem; background: linear-gradient(transparent, var(--tint)); }
.post-body .quote-more { display: block; width: 100%; margin: 0 0 1.1rem; padding: .35rem 1rem .5rem; border: 0; border-left: 2px solid var(--faint); border-radius: 0 0 4px 0; background: var(--tint); font: 600 .8125rem var(--sans); color: var(--muted); text-align: left; cursor: pointer; }
.post-body .quote-more:hover { color: var(--ink); }
.post-body .quote-more:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.post-body pre { background: var(--tint); padding: .8rem 1rem; border-radius: 4px; overflow-x: auto; }
.post-body .mention { font-weight: 600; }
.post-body .phrase { font: .875em/1.6 var(--mono); background: var(--tint); padding: .05em .3em; border-radius: 2px; }
.post-body h3, .post-body h4, .post-body h5 { font-family: var(--serif); font-size: 1.125rem; margin: 1.5rem 0 .5rem; }
.post-body .table { overflow-x: auto; margin: 0 0 1em; }
.post-body table { border-collapse: collapse; font: .875rem/1.45 var(--sans); }
.post-body th, .post-body td { padding: .4rem .9rem .4rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.post-body details.spoiler { margin: 0 0 1em; padding: .4rem .8rem; background: var(--tint); border-radius: 4px; }
.post-body details.spoiler summary { font: 600 .875rem var(--sans); cursor: pointer; }
.post-body .ispoiler { background: var(--ink); color: transparent; border-radius: 2px; }
.post-body .ispoiler:hover, .post-body .ispoiler:focus { background: var(--tint); color: inherit; }
.post-body .media, .post-body .unfurl { font: .9375rem var(--sans); }
.post-body .attachment-gone, .post-body .media-gone { font: .8125rem var(--sans); color: var(--muted); }
.post-body .align-center { text-align: center; }
.post-body .align-right { text-align: right; }
.post-body .indent { margin-left: 1.5rem; }
.post-body .size-large { font-size: 1.2em; }
.post-body .size-small { font-size: .85em; }
.c-red { color: var(--c-red); } .c-orange { color: var(--c-orange); } .c-yellow { color: var(--c-yellow); }
.c-green { color: var(--c-green); } .c-blue { color: var(--c-blue); } .c-purple { color: var(--c-purple); }
.c-pink { color: var(--c-pink); }

.related { margin: .5rem 0 1.25rem; padding: .85rem 1rem; border: 1px solid var(--rule); border-left: 3px solid var(--red); border-radius: 4px; font-family: var(--sans); }
.posts > .related { margin: 0 0 1.75rem; }
.posts > .related + .related { margin-top: -1rem; }
.related .label { margin: 0 0 .15rem; font-size: .75rem; color: var(--muted); }
.related a { font-weight: 600; font-size: 1rem; text-decoration: none; }
.related a:hover { text-decoration: underline; }
.related .text { margin: .1rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--muted); }

.pages { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1.5rem 0 .75rem; font: .875rem var(--sans); }
.pages a, .pages .gap { padding: .3rem .6rem; border-radius: 4px; text-decoration: none; color: var(--muted); }
.pages a:hover { color: var(--ink); background: var(--tint); }
.pages a[aria-current] { color: var(--paper); background: var(--ink); }
.archived { font: .8125rem var(--sans); color: var(--muted); }

/* ---- The 7110.65 ---- */

.para-num { margin: 0 0 .2rem; font: 600 1rem var(--mono); color: var(--red-text); letter-spacing: .02em; }
.para-head h1 { margin-bottom: .5rem; }
.para-head .edition { margin: 0 0 1.75rem; }
.order p { margin: 0 0 .9em; }
.order ol { margin: 0 0 .9em; padding-left: 1.6rem; }
.order li { margin: .55em 0; padding-left: .2rem; }
.order li::marker { font: 600 .9em var(--sans); color: var(--muted); }
.order ol.l1 { list-style: lower-alpha; }
.order ol.l2 { list-style: decimal; }
.order ol.l3 { list-style: paren-alpha; }
.order ol.l4 { list-style: paren-decimal; }
.order aside { margin: .7rem 0; padding: .55rem .9rem; border-left: 2px solid var(--rule); font-size: 1rem; line-height: 1.6; }
.order aside .label { margin: 0 0 .2rem; font: 600 .8125rem var(--sans); color: var(--muted); }
.order aside p { margin: 0 0 .35em; }
.order aside p:last-child { margin: 0; }
.order aside.reference, .order aside.interpretation { padding-block: .1rem; font: .8125rem/1.55 var(--sans); color: var(--muted); }
.order aside.reference .label, .order aside.interpretation .label { display: inline; margin-right: .4rem; }
.order aside.reference div, .order aside.interpretation div { display: inline; }
.order aside.reference p, .order aside.interpretation p { display: inline; }
.order aside.phraseology { background: var(--tint); border-left-color: var(--red); font: .875rem/1.75 var(--mono); }
.order aside.phraseology .label { font-family: var(--sans); }
.order aside.example { font-style: italic; }
.order aside.example .label { font-style: normal; }
.order a.term { text-decoration-style: dotted; }
.order li[id] { scroll-margin-top: 1rem; }
.order li[id]:target { background: var(--tint); }
.order p.subhead { margin: 1.25rem 0 .5rem; font: 600 .8125rem var(--sans); letter-spacing: .04em; }
.order h3 { font: 600 1rem/1.4 var(--sans); margin: 1.75rem 0 .5rem; }
.order figure { margin: 1.25rem 0; }
.order figure img, .order td img { display: block; max-width: 100%; height: auto; padding: .5rem; background: #fff; border-radius: 4px; }
.order figcaption { margin: 0 0 .4rem; font: .8125rem/1.4 var(--sans); color: var(--muted); }
.order .table { margin: 0 0 1em; overflow-x: auto; }
.order table { border-collapse: collapse; font: .8125rem/1.45 var(--sans); }
.order caption { padding-bottom: .4rem; text-align: left; font: .8125rem/1.4 var(--sans); color: var(--muted); }
.order th, .order td { padding: .35rem .6rem; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.order th { font-weight: 600; background: var(--tint); }
.para-list { list-style: none; margin: 0; padding: 0; }
.para-list li { border-bottom: 1px solid var(--rule); font: .9375rem/1.45 var(--sans); }
.para-list a { display: flex; gap: .75rem; padding: .45rem 0; text-decoration: none; }
.para-list a:hover { color: var(--red-text); }
.para-list .n { flex: 0 0 4.25rem; font: 600 .8125rem/1.8 var(--mono); color: var(--red-text); }
.chapter-section h2 { font-size: 1.125rem; margin: 2rem 0 .5rem; }
.chapter-section h2 a { text-decoration: none; }

/* The phraseology index */
p.intro { font: .9375rem/1.55 var(--sans); color: var(--muted); margin: 0 0 1.25rem; }
.phr-filter { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem; padding: .5rem 0; background: var(--paper); }
.phr-filter input { flex: 1; min-width: 0; font: .9375rem var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: .45rem .7rem; }
.phr-count { margin: 0; font: .8125rem var(--sans); color: var(--muted); white-space: nowrap; }
.phr-count:empty { display: none; }
.phr-chapters .count { margin-left: auto; padding-left: .75rem; font: .8125rem/1.75 var(--sans); color: var(--muted); }
.phr-chapter > h2 { font-size: 1.25rem; margin: 2.5rem 0 .25rem; scroll-margin-top: 3.5rem; }
.phr-chapter > h2 a, .phr-section > h3 a, .phr-para h4 a { text-decoration: none; }
.phr-chapter { scroll-margin-top: 3.5rem; }
.phr-section > h3 { margin: 1.5rem 0 .25rem; color: var(--muted); }
.phr-para { padding: .25rem 0 .5rem; border-top: 1px solid var(--rule); scroll-margin-top: 3.5rem; }
.phr-para h4 { display: flex; gap: .75rem; margin: .6rem 0 .5rem; font: 600 .9375rem/1.45 var(--sans); }
.phr-para h4 a { display: flex; gap: .75rem; }
.phr-para h4 a:hover { color: var(--red-text); }
.phr-para h4 .n { flex: 0 0 4.25rem; font: 600 .8125rem/1.8 var(--mono); color: var(--red-text); }
.phr-entry { margin: 0 0 1rem; }
.phr-rule { margin: 0 0 .4rem; font-size: 1rem; line-height: 1.55; }
.phr-rule .cite { margin-right: .2rem; font: 600 .8125rem var(--mono); color: var(--red-text); text-decoration: none; }
.phr-text { margin: 0 0 .4rem; padding: .5rem .9rem; background: var(--tint); border-left: 2px solid var(--red); font: .875rem/1.75 var(--mono); }
.phr-text p { margin: 0 0 .35em; }
.phr-text p:last-child { margin: 0; }
.phr-none { font: .9375rem var(--sans); color: var(--muted); }
[hidden] { display: none !important; }

.para-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font: .875rem/1.4 var(--sans); }
.para-nav a { text-decoration: none; }
.para-nav a:hover { color: var(--red-text); }
/* The forum archive's threads that cite a paragraph (OrderCites), under its neighbors. */
.discussed { margin-top: 2.25rem; }
.discussed h2 { margin: 0 0 .3rem; font: 600 .75rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.para-nav b { display: block; font: 600 .8125rem var(--mono); color: var(--red-text); }
.para-nav .next { text-align: right; }

/* ---- FAA notices ---- */

.notice-banner { margin: 0 0 1.75rem; padding: .7rem 1rem; background: var(--tint); border-left: 3px solid var(--ink); border-radius: 0 4px 4px 0; font: .875rem/1.55 var(--sans); }
.notice-banner .label { margin: 0 0 .3rem; font-weight: 600; }
.notice-banner p { margin: 0 0 .35rem; }
.notice-banner p.aside { margin: 0; color: var(--muted); }
.flag { margin-left: .5rem; padding: .05em .4em; border: 1px solid var(--rule); border-radius: 3px; font: 600 .6875rem var(--sans); letter-spacing: .03em; color: var(--muted); vertical-align: .1em; white-space: nowrap; }
section.notices { margin-top: 2rem; }
section.notices h2 .count { font: 400 .875rem var(--sans); color: var(--muted); }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.notice-list > li > a { display: flex; flex-wrap: wrap; column-gap: .75rem; font: 600 .9375rem/1.45 var(--sans); text-decoration: none; }
.notice-list > li > a:hover { color: var(--red-text); }
.notice-list .n { font: 600 .8125rem/1.8 var(--mono); color: var(--red-text); }
.notice-list .meta { margin: .15rem 0 0; font-size: .8125rem; }
.para-list .change { display: block; font-size: .8125rem; color: var(--muted); }
.state { font-weight: 600; color: var(--ink); }
.para-head .edition.dates { margin-bottom: .2rem; }
.notice-text { margin-bottom: 1rem; overflow-wrap: anywhere; }
.notice-text .amended { margin: 1.25rem 0 1.5rem; padding: .1rem 0 .1rem 1rem; border-left: 2px solid var(--rule); }
.notice-text .amended > h3:first-child { margin-top: .5rem; }
.notice-text p.unchanged { margin: .9rem 0; font: italic .875rem/1.5 var(--sans); color: var(--muted); text-align: center; }
.notice-text p.signature { margin-top: 1.5rem; font: .9375rem/1.5 var(--sans); }

/* ---- Search ---- */

.search-form input { width: 100%; box-sizing: border-box; padding: .65rem .85rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); font: 1rem var(--sans); }
.search-form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.search-filters, .search-sort { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }
.search-filters button, .search-sort button { padding: .25rem .65rem; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); font: 500 .8125rem var(--sans); cursor: pointer; }
.search-filters button:hover, .search-sort button:hover { color: var(--ink); }
.search-filters button[aria-pressed="true"], .search-sort button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.search-filters .count { margin-left: .2rem; color: var(--faint); }
.search-sort { align-items: center; margin-top: .5rem; }
.search-sort .label { margin-right: .15rem; font: .8125rem var(--sans); color: var(--faint); }
.search-status { margin: .9rem 0 0; font: .8125rem var(--sans); color: var(--muted); }
.search-results { list-style: none; margin: .5rem 0 0; padding: 0; }
.search-results li { padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.search-results .title { font: 600 1rem/1.4 var(--sans); text-decoration: none; }
.search-results .title:hover { text-decoration: underline; }
.search-results .sub { font: .8125rem var(--sans); color: var(--muted); }
.search-results .excerpt { margin: .25rem 0 .15rem; font-size: .9375rem; line-height: 1.55; }
.search-results .source { margin: 0; font: .75rem var(--sans); color: var(--faint); }
.search-results mark { background: color-mix(in srgb, var(--c-yellow) 24%, transparent); color: inherit; border-radius: 2px; }
.search-more { margin: 1rem 0; padding: .45rem .9rem; border: 1px solid var(--rule); border-radius: 6px; background: none; color: var(--ink); font: 500 .875rem var(--sans); cursor: pointer; }

/* ---- What changed ---- */

section.changes { margin-top: 2rem; }
.change-list { list-style: none; margin: 0; padding: 0; }
.change-list li { padding: .65rem 0; border-bottom: 1px solid var(--rule); font: .9375rem/1.45 var(--sans); }
.change-list p { margin: 0; }
.change-list .when { font-size: .8125rem; color: var(--muted); }
.change-list .when .flag { margin-left: .4rem; }
.change-list .what { margin: .1rem 0; font-weight: 600; }
.change-list .what a { text-decoration: none; }
.change-list .what a:hover { color: var(--red-text); }
.change-list .meta { font-size: .8125rem; }
ol.explanation { margin: 0; padding: 0; list-style: none; }
ol.explanation > li { padding: 1rem 0 .4rem; border-bottom: 1px solid var(--rule); }
ol.explanation h2 { margin: 0 0 .6rem; font: 600 .875rem/1.5 var(--sans); letter-spacing: .02em; }
ol.explanation h2 a { color: var(--red-text); text-decoration: none; font-family: var(--mono); }
ol.explanation p { margin: 0 0 .6rem; }

/* ---- The Pilot/Controller Glossary ---- */

.gloss-head h1 { margin-bottom: .5rem; }
.gloss-head h1.term { font-size: 1.75rem; letter-spacing: .01em; }
.gloss-head .edition { margin: 0 0 1.25rem; }
.letters { display: flex; flex-wrap: wrap; margin: 0 0 2rem; font: 600 .875rem var(--sans); }
.letters a { min-width: 1.7rem; padding: .3rem 0; border-radius: 4px; text-align: center; text-decoration: none; color: var(--muted); }
.letters a:hover { color: var(--ink); background: var(--tint); }
.letters a[aria-current] { color: var(--paper); background: var(--ink); }
.icao { margin-left: .25em; padding: .05em .35em; border: 1px solid var(--rule); border-radius: 3px; font: 600 .6875rem var(--sans); letter-spacing: .04em; color: var(--muted); vertical-align: .15em; }
.term-cols { columns: 2 16rem; column-gap: 2rem; margin: 0; padding: 0; list-style: none; font: .9375rem/1.45 var(--sans); }
.term-cols li { break-inside: avoid; padding: .3rem 0; }
.term-cols a { text-decoration: none; }
.term-cols a:hover { text-decoration: underline; }
dl.glossary { margin: 0; }
dl.glossary dt { margin: 1.75rem 0 .35rem; font: 600 .9375rem/1.4 var(--sans); letter-spacing: .01em; scroll-margin-top: 1rem; }
dl.glossary dt a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
dl.glossary dt:target { color: var(--red-text); }
dl.glossary dd { margin: 0; }
dl.glossary p, .definition p, .icao-def p { margin: 0 0 .7em; }
dl.glossary ol, .definition ol, .icao-def ol { margin: 0 0 .7em; padding-left: 1.6rem; }
dl.glossary li, .definition li, .icao-def li { margin: .4em 0; }
dl.glossary aside.note, .definition aside.note, .icao-def aside.note { margin: .6rem 0; padding: .45rem .9rem; border-left: 2px solid var(--rule); }
aside.note .label { margin: 0 0 .15rem; font: 600 .8125rem var(--sans); color: var(--muted); }
aside.note p:last-child { margin: 0; }
p.see, p.refer, p.also { font: .875rem/1.5 var(--sans); color: var(--muted); }
p.see a, p.refer a { color: var(--ink); }
.icao-def { margin-top: 2rem; scroll-margin-top: 1rem; }

/* ---- Design review sheet ---- */

.logo-big .logo { font-size: 4.5rem; }
.logo-in-header { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 .75rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.swatches { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem 1rem; font: .875rem var(--sans); }
.swatches li { display: flex; align-items: center; gap: .5rem; }
.chip { width: 1.5rem; height: 1.5rem; border-radius: 4px; border: 1px solid var(--rule); }
.specimen-sans { font: .9375rem var(--sans); }
.specimen-mono { font: .875rem var(--mono); }

/* ---- Forum archive: the forum index, categories and forums, and what thread pages add ---- */

.archive-head { margin-bottom: 1.5rem; }
.archive-head h1 { margin-bottom: .4rem; overflow-wrap: break-word; }
.archive-head .intro { margin: 0 0 .5rem; }
.archive-head .meta { margin: 0; }
.archive-head .lookup-form { margin-top: 1.25rem; }
/* The index: a category is a section, its name a heading, its forums set in under it. */
.forum-group { margin-top: 2.75rem; }
.forum-group > h2 { margin: 0 0 .2rem; font-size: 1.5rem; }
.forum-group > .desc { margin: 0 0 .25rem; font: .875rem/1.5 var(--sans); color: var(--muted); }
.forum-group > .forum-list { margin-top: .4rem; padding-left: 1rem; border-left: 2px solid var(--rule); }
.forum-group > .forum-list > li:last-child { border-bottom: 0; }
.list-head { margin: 2rem 0 .25rem; font: 600 .75rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.forum-list, .thread-list { list-style: none; margin: 0; padding: 0; }
.forum-list > li, .thread-list > li { padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.forum-list .name, .thread-list .title { text-decoration: none; }
.forum-list a.name:hover, .thread-list .title:hover { text-decoration: underline; }
.forum-list .name, .thread-list .title { font: 600 1rem/1.4 var(--sans); overflow-wrap: break-word; }
.forum-list .desc { margin: .15rem 0 0; font: .875rem/1.5 var(--sans); color: var(--muted); }
.forum-list .meta, .thread-list .meta { margin: .2rem 0 0; font-size: .8125rem; }
.forum-list .subforums { margin: .25rem 0 0; font: .8125rem/1.5 var(--sans); color: var(--muted); }
.forum-list .subforums a { color: var(--ink); }
.thread-list .flag { margin: 0 .15rem 0 0; }
.prefix { display: inline-block; margin-right: .15rem; padding: .05em .45em; border: 1px solid var(--rule); border-radius: 3px; background: var(--tint); font: 600 .6875rem/1.5 var(--sans); letter-spacing: .02em; color: var(--muted); vertical-align: .15em; white-space: nowrap; }
.thread-head h1 { overflow-wrap: break-word; }
.thread-head .prefix { font-size: .75rem; vertical-align: .4em; }
.thread-head + .pages { margin: .75rem 0 0; }
.thread-head .resource-of { margin: .35rem 0 0; font: .875rem/1.5 var(--sans); color: var(--muted); }
.thread-head .resource-of a { color: var(--ink); }

.poll { margin: 1.5rem 0 0; padding: .85rem 1rem 1rem; border: 1px solid var(--rule); border-radius: 4px; font-family: var(--sans); }
.poll .label { margin: 0 0 .15rem; font-size: .75rem; color: var(--muted); }
.poll h2 { margin: 0 0 .75rem; font: 600 1rem/1.4 var(--sans); }
.poll-results { list-style: none; margin: 0; padding: 0; }
.poll-results li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; margin: 0 0 .6rem; font-size: .875rem; line-height: 1.4; }
.poll-results .votes { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.poll-results .bar { flex: 1 0 100%; height: .35rem; margin-top: .25rem; border-radius: 2px; background: var(--tint); overflow: hidden; }
.poll-results .bar span { display: block; height: 100%; background: var(--muted); }
.poll .meta { margin: .25rem 0 0; font-size: .8125rem; }

.post-body { overflow-wrap: break-word; }
.post-body img.attachment { border-radius: 3px; }
.post-body img.thumb { max-height: 15rem; width: auto; }
.post-body hr { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--rule); }
.post-body .size, .post-files .size { font: .8125rem var(--sans); color: var(--muted); }
.post-body a.file, .post-files a.file { font: .9375rem var(--sans); }
.post-files { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; margin: 0 0 1rem; padding: 0; }
.post-files img { display: block; max-height: 8rem; width: auto; border: 1px solid var(--rule); border-radius: 3px; }

/* ---- The FAQ, the FAA interpretations and the resources (wiki.php, interpretation*.php, resource.php) ---- */

.wiki-head h1, .resource-head h1 { margin-bottom: .35rem; overflow-wrap: break-word; }
.wiki-head .meta, .resource-head .meta { margin: 0 0 1.5rem; }
.wiki-toc { margin: 0 0 2rem; padding: .7rem 1rem .8rem; background: var(--tint); border-radius: 4px; font: .875rem/1.45 var(--sans); }
.wiki-toc h2 { margin: 0 0 .4rem; font: 600 .75rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wiki-toc ol { margin: 0; padding-left: 1.4rem; }
.wiki-toc li { margin: .2rem 0; }
.wiki-toc li.sub { margin-left: 1rem; list-style: circle; }
.wiki-toc a { text-decoration: none; }
.wiki-toc a:hover { text-decoration: underline; }
.wiki-body h2 { margin: 2.25rem 0 .6rem; font-size: 1.3125rem; }
.wiki-body h3 { margin: 1.5rem 0 .4rem; font: 600 1.0625rem/1.35 var(--serif); }
.wiki-body h2, .wiki-body h3 { scroll-margin-top: 1rem; }
.wiki-body h2:target, .wiki-body h3:target, .wiki-body h2:has(.anchor:target), .wiki-body h3:has(.anchor:target) { background: var(--tint); border-radius: 3px; }
.wiki-body th p, .wiki-body td p, .resource-body th p, .resource-body td p { margin: 0; }
.wiki-pages { margin-top: 2.5rem; padding-top: .25rem; border-top: 1px solid var(--rule); }
.wiki-pages h2 { margin: 1rem 0 .5rem; font: 600 .75rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wiki-pages a[aria-current] { font-weight: 600; text-decoration: none; color: var(--muted); }

.interp-banner { margin: 0 0 1.75rem; padding: .7rem 1rem; background: var(--tint); border-left: 3px solid var(--faint); border-radius: 0 4px 4px 0; font: .875rem/1.55 var(--sans); }
.interp-banner .label { margin: 0 0 .25rem; font-weight: 600; }
.interp-banner p { margin: 0; }
.interp-text h2 { margin: 1.75rem 0 .4rem; font: 600 .8125rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.interp-text > h2:first-child { margin-top: 0; }
.interp-group h2 .count, .resource-versions h2 .count { font: 400 .875rem var(--sans); color: var(--muted); }
.interp-group .meta { margin: 0 0 .5rem; }
.interp-list .n { line-height: 1.8; }

.resource-head .kicker { margin: 0 0 .3rem; font: 600 .75rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.resource-head .tagline { margin: 0 0 .35rem; font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }
.resource-get { margin: 0 0 1.75rem; padding: .8rem 1rem; border: 1px solid var(--rule); border-radius: 6px; font: .9375rem/1.5 var(--sans); }
.resource-get p { margin: 0 0 .35rem; overflow-wrap: anywhere; }
.resource-get p:last-child { margin: 0; }
.resource-get .primary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin-bottom: .5rem; }
.resource-get .get { display: inline-block; padding: .4rem 1rem; border-radius: 6px; background: var(--red); color: #fff; font-weight: 600; text-decoration: none; }
.resource-get .get:hover { filter: brightness(1.08); }
.resource-get .name { font-weight: 500; }
.resource-get .size, .version-list .size, .version-list time { font-size: .8125rem; color: var(--muted); }
.resource-get .meta { font-size: .8125rem; }
.resource-thread { margin: 1.5rem 0 0; font: .9375rem/1.5 var(--sans); }
.version-list { list-style: none; margin: 0; padding: 0; font: .875rem/1.45 var(--sans); }
.version-list li { padding: .45rem 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.version-list .v { font-weight: 600; margin-right: .35rem; }
.version-list .file { margin-left: .5rem; }
.resource-versions details { margin-top: .25rem; }
.resource-versions summary { padding: .5rem 0; font: 500 .875rem var(--sans); color: var(--muted); cursor: pointer; }
.resource-versions summary:hover { color: var(--ink); }