/* Bannered Hall: parchment, oxblood and blackened gold. Prefix: pnn- */
:root {
  --pnn-parch: #f4ecd9;
  --pnn-parch-2: #eadfc3;
  --pnn-vellum: #fbf7ee;
  --pnn-ink: #2a201c;
  --pnn-ink-2: #574639;
  --pnn-wine: #6e1423;
  --pnn-wine-2: #4a0c17;
  --pnn-wine-3: #8c2232;
  --pnn-gold: #6c5118;
  --pnn-gold-2: #a8862f;
  --pnn-gold-3: #d2b263;
  --pnn-rule: #d6c398;
  --pnn-sable: #231b18;
  --pnn-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
  --pnn-text: Georgia, "Iowan Old Style", "Sitka Text", Cambria, "Times New Roman", serif;
  --pnn-measure: 42rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--pnn-parch);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 252, 240, .65), rgba(255, 252, 240, 0) 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(140, 104, 40, .08), rgba(140, 104, 40, 0) 70%);
  color: var(--pnn-ink);
  font: 1.0625rem/1.68 var(--pnn-text);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
img, svg { max-width: 100%; }
a { color: var(--pnn-wine); text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--pnn-wine-3); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--pnn-gold-2); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--pnn-display); color: var(--pnn-wine-2); line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(2rem, 1.35rem + 3vw, 3rem); margin: .25rem 0 .6rem; letter-spacing: .003em; }
h2 { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.7rem); margin: 2.2rem 0 .7rem; }
h3 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.3rem; }
.pnn-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pnn-skip { position: absolute; left: 16px; top: -3rem; z-index: 10; background: var(--pnn-gold-3); color: var(--pnn-sable); padding: .5rem .8rem; font-family: var(--pnn-display); }
.pnn-skip:focus { top: .5rem; }

/* ---------- masthead ---------- */
.pnn-mast { background: var(--pnn-wine-2); color: var(--pnn-parch); }
.pnn-mast-in { max-width: 72rem; margin: 0 auto; padding: .7rem 16px .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.pnn-seal { display: flex; align-items: center; gap: .6rem; color: var(--pnn-gold-3); text-decoration: none; min-width: 0; flex: 1 1 12rem; }
.pnn-seal:hover { color: #e8cc80; }
.pnn-seal svg { flex: 0 0 auto; }
.pnn-seal-txt { display: flex; flex-direction: column; min-width: 0; }
.pnn-seal-name { font-family: var(--pnn-display); font-size: 1.45rem; font-variant: small-caps; letter-spacing: .07em; line-height: 1.1; }
.pnn-seal-motto { font-size: .82rem; color: #e6d8b8; font-style: italic; line-height: 1.3; }
.pnn-tongues ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.pnn-tongues a { display: inline-block; min-width: 2.4rem; text-align: center; padding: .2rem .45rem; font: .85rem/1.3 var(--pnn-display); letter-spacing: .08em; color: var(--pnn-parch); border: 1px solid rgba(210, 178, 99, .55); text-decoration: none; }
.pnn-tongues a:hover { background: rgba(210, 178, 99, .18); color: #fff; }
.pnn-tongues a[aria-current="true"] { background: var(--pnn-gold-3); color: var(--pnn-sable); border-color: var(--pnn-gold-3); }
.pnn-menu-btn { display: none; font: .95rem/1 var(--pnn-display); font-variant: small-caps; letter-spacing: .08em; color: var(--pnn-parch); background: transparent; border: 1px solid rgba(210, 178, 99, .7); padding: .45rem .75rem; cursor: pointer; }
.pnn-menu-btn:hover { background: rgba(210, 178, 99, .18); }
.pnn-menu-btn span[aria-hidden] { display: inline-block; margin-right: .35rem; }
.pnn-nav { flex: 1 1 100%; order: 5; }
.pnn-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; }
.pnn-nav a { display: inline-block; padding: .3rem 0; color: var(--pnn-parch); text-decoration: none; font-family: var(--pnn-display); font-size: 1rem; border-bottom: 2px solid transparent; }
.pnn-nav a:hover { color: #fff; border-bottom-color: var(--pnn-gold-3); }
.pnn-nav a[aria-current="page"] { border-bottom-color: var(--pnn-gold-3); }
.pnn-bunting { display: block; width: 100%; height: 24px; }

.pnn-js .pnn-menu-btn { display: inline-block; margin-left: auto; }
.pnn-js .pnn-nav { display: none; }
.pnn-js .pnn-nav.pnn-open { display: block; }
.pnn-js .pnn-nav.pnn-open ul { flex-direction: column; gap: 0; padding: .3rem 0 .4rem; border-top: 1px solid rgba(210, 178, 99, .35); }
.pnn-js .pnn-nav.pnn-open a { padding: .55rem 0; }

@media (min-width: 60em) {
  .pnn-mast-in { flex-wrap: nowrap; padding-top: .9rem; }
  .pnn-seal { flex: 0 1 auto; }
  .pnn-nav, .pnn-js .pnn-nav { display: block; order: 0; flex: 1 1 auto; }
  .pnn-nav ul, .pnn-js .pnn-nav.pnn-open ul { flex-direction: row; justify-content: flex-end; border: 0; padding: 0; }
  .pnn-js .pnn-menu-btn { display: none; }
}

/* ---------- folio: index + leaf ---------- */
.pnn-folio { max-width: 72rem; margin: 0 auto; padding: 1.4rem 16px 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.pnn-leaf { min-width: 0; max-width: var(--pnn-measure); }
.pnn-k-home .pnn-leaf { max-width: 52rem; }
.pnn-index { min-width: 0; font-size: .95rem; }
.pnn-index details { background: var(--pnn-vellum); border: 1px solid var(--pnn-rule); border-left: 4px solid var(--pnn-wine); }
.pnn-index summary { cursor: pointer; padding: .6rem .9rem; font-family: var(--pnn-display); font-variant: small-caps; letter-spacing: .08em; color: var(--pnn-wine-2); font-size: 1.05rem; }
.pnn-index-body { padding: 0 .9rem .8rem; }
.pnn-index-h { margin: .8rem 0 .3rem; font-family: var(--pnn-display); font-variant: small-caps; letter-spacing: .08em; color: var(--pnn-gold); font-size: .95rem; border-bottom: 1px solid var(--pnn-rule); }
.pnn-index ol, .pnn-index ul { list-style: none; margin: 0; padding: 0; }
.pnn-index li { margin: .15rem 0; }
.pnn-index a { text-decoration: none; display: inline-block; padding: .12rem 0; line-height: 1.35; }
.pnn-index a:hover { text-decoration: underline; }
.pnn-index a[aria-current="page"] { color: var(--pnn-ink); font-weight: 600; }
.pnn-toc { counter-reset: pnntoc; }
.pnn-toc li { counter-increment: pnntoc; display: flex; gap: .45rem; }
.pnn-toc li::before { content: counter(pnntoc, upper-roman) "."; color: var(--pnn-gold); font-family: var(--pnn-display); min-width: 1.9rem; }

@media (min-width: 60em) {
  .pnn-folio { grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; padding-top: 2.2rem; }
  .pnn-index { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow: auto; }
  .pnn-index details { background: transparent; border: 0; border-right: 1px solid var(--pnn-rule); }
  .pnn-index summary { padding: 0 0 .2rem; }
  .pnn-index-body { padding: 0 1.1rem .5rem 0; }
}

/* ---------- shared bits ---------- */
.pnn-kicker { margin: 0; font-family: var(--pnn-display); font-variant: small-caps; letter-spacing: .1em; color: var(--pnn-gold); font-size: 1rem; }
.pnn-dek { font-size: 1.18rem; line-height: 1.5; color: var(--pnn-ink-2); font-style: italic; margin-bottom: .8rem; }
.pnn-byline { font-size: .9rem; color: var(--pnn-ink-2); margin: 0 0 1rem; }
.pnn-byline span + span::before { content: "·"; margin: 0 .45rem; color: var(--pnn-gold-2); }
.pnn-crumbs ol { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .45rem; font-size: .9rem; }
.pnn-crumbs li + li::before { content: "›"; margin-right: .45rem; color: var(--pnn-gold-2); }
.pnn-crumbs a { text-decoration: none; }
.pnn-fleuron { display: block; width: 7.5rem; height: 1.6rem; margin: 2.4rem auto 0; }
.pnn-pennants { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.pnn-pennants li { position: relative; padding-left: 1.45rem; margin: .4rem 0; }
.pnn-pennants li::before { content: ""; position: absolute; left: .1rem; top: .52em; width: .78rem; height: .6rem; background: var(--pnn-wine); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pnn-pennants.pnn-sable li::before { background: var(--pnn-sable); }
.pnn-pennants.pnn-gilt li::before { background: var(--pnn-gold-2); }
.pnn-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem 1.6rem; }
.pnn-two h3 { margin-top: .6rem; }
@media (min-width: 40em) { .pnn-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- home ---------- */
.pnn-hero { padding-bottom: .4rem; }
.pnn-hero p.pnn-lede { font-size: 1.12rem; }
.pnn-stamp { display: inline-flex; align-items: center; gap: .55rem; margin: .3rem 0 0; padding: .4rem .8rem .4rem .45rem; border: 1px solid var(--pnn-rule); background: var(--pnn-vellum); font-family: var(--pnn-display); font-size: .95rem; color: var(--pnn-ink-2); }
.pnn-roll { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 40em) { .pnn-roll { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pnn-flag-card { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .1rem .9rem; align-content: start; background: var(--pnn-vellum); border: 1px solid var(--pnn-rule); border-top: 4px solid var(--pnn-wine); padding: .95rem 1rem 1.05rem; }
.pnn-flag-card > svg { grid-row: 1 / span 3; width: 3rem; height: 4rem; }
.pnn-ord { position: absolute; top: .45rem; right: .7rem; font-family: var(--pnn-display); color: var(--pnn-gold-2); font-size: .95rem; letter-spacing: .06em; }
.pnn-flag-card h3 { margin: 0; font-size: 1.25rem; padding-right: 2rem; }
.pnn-flag-card h3 a { color: var(--pnn-wine-2); text-decoration: none; }
.pnn-flag-card h3 a:hover { text-decoration: underline; }
.pnn-pub { margin: 0; font-size: .85rem; font-variant: small-caps; letter-spacing: .06em; color: var(--pnn-gold); }
.pnn-verdict { margin: .35rem 0 .5rem; grid-column: 2; font-size: .98rem; }
.pnn-flag-meta { grid-column: 1 / -1; margin: .2rem 0 .55rem; font-size: .88rem; color: var(--pnn-ink-2); border-top: 1px dashed var(--pnn-rule); padding-top: .5rem; }
.pnn-flag-meta b { font-weight: 600; color: var(--pnn-ink); font-family: var(--pnn-display); }
.pnn-flag-go { grid-column: 1 / -1; margin: 0; font-family: var(--pnn-display); }
.pnn-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--pnn-rule); background: var(--pnn-vellum); margin: 1rem 0 .4rem; }
.pnn-scroll:focus-visible { outline-offset: 0; }
.pnn-muster { border-collapse: collapse; width: 100%; min-width: 42rem; font-size: .94rem; line-height: 1.45; }
.pnn-muster caption { text-align: left; padding: .6rem .8rem; font-family: var(--pnn-display); font-variant: small-caps; letter-spacing: .06em; color: var(--pnn-gold); }
.pnn-muster th, .pnn-muster td { padding: .6rem .75rem; text-align: left; vertical-align: top; border-top: 1px solid var(--pnn-rule); }
.pnn-muster thead th { background: var(--pnn-wine-2); color: var(--pnn-parch); font-family: var(--pnn-display); font-weight: 600; font-variant: small-caps; letter-spacing: .05em; border-top: 0; }
.pnn-muster tbody th { font-family: var(--pnn-display); font-weight: 600; white-space: nowrap; }
.pnn-muster tbody tr:nth-child(even) > * { background: rgba(214, 195, 152, .2); }
.pnn-note { font-size: .9rem; color: var(--pnn-ink-2); font-style: italic; }
.pnn-measures { list-style: none; counter-reset: pnnm; margin: 1rem 0 0; padding: 0; }
.pnn-measures li { counter-increment: pnnm; position: relative; padding: 0 0 0 3.3rem; margin: 0 0 1.1rem; min-height: 2.9rem; }
.pnn-measures li::before { content: counter(pnnm, upper-roman); position: absolute; left: 0; top: .1rem; width: 2.4rem; height: 2.9rem; padding-top: .3rem; background: var(--pnn-wine); color: var(--pnn-gold-3); font: 600 1rem/1.4 var(--pnn-display); text-align: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
.pnn-measures strong { display: block; font-family: var(--pnn-display); font-size: 1.12rem; color: var(--pnn-wine-2); }
.pnn-shelf { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; }
.pnn-shelf li { border-left: 3px solid var(--pnn-gold-2); background: var(--pnn-vellum); padding: .7rem .9rem; }
.pnn-shelf h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.pnn-shelf h3 a { text-decoration: none; color: var(--pnn-wine-2); }
.pnn-shelf h3 a:hover { text-decoration: underline; }
.pnn-shelf p { margin: 0; font-size: .97rem; }
.pnn-faq details { border-bottom: 1px solid var(--pnn-rule); }
.pnn-faq details:first-of-type { border-top: 1px solid var(--pnn-rule); }
.pnn-faq summary { cursor: pointer; list-style: none; position: relative; padding: .8rem 2.2rem .8rem 0; font-family: var(--pnn-display); font-size: 1.12rem; color: var(--pnn-wine-2); }
.pnn-faq summary::-webkit-details-marker { display: none; }
.pnn-faq summary::after { content: "+"; position: absolute; right: .3rem; top: .62rem; font-size: 1.35rem; color: var(--pnn-gold-2); }
.pnn-faq details[open] summary::after { content: "−"; }
.pnn-faq details > p { margin: 0 0 1rem; }

/* ---------- review ---------- */
.pnn-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.1rem; }
.pnn-head > svg { display: none; }
@media (min-width: 40em) {
  .pnn-head { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .pnn-head > svg { display: block; grid-row: 1 / span 4; width: 4.6rem; height: 6.1rem; margin-top: .3rem; }
}
.pnn-herald { margin: 1.2rem 0 1.4rem; padding: 1rem 1.1rem .5rem; background: var(--pnn-vellum); border: 1px solid var(--pnn-rule); box-shadow: inset 0 0 0 3px var(--pnn-vellum), inset 0 0 0 4px var(--pnn-rule); }
.pnn-herald h2 { margin: 0 0 .6rem; font-size: 1.15rem; font-variant: small-caps; letter-spacing: .07em; color: var(--pnn-gold); }
.pnn-herald dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.pnn-herald dt { font-family: var(--pnn-display); font-variant: small-caps; letter-spacing: .06em; color: var(--pnn-wine); font-size: .95rem; }
.pnn-herald dd { margin: 0 0 .55rem; }
@media (min-width: 36em) {
  .pnn-herald dl { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 1rem; }
  .pnn-herald dt { padding-top: .1rem; }
}
.pnn-herald p { margin: .4rem 0 .6rem; }
.pnn-cta { display: inline-block; background: var(--pnn-wine); color: var(--pnn-parch); text-decoration: none; font-family: var(--pnn-display); font-variant: small-caps; letter-spacing: .07em; font-size: 1.08rem; line-height: 1.3; padding: .6rem 1.15rem; border: 1px solid var(--pnn-wine-2); box-shadow: 0 3px 0 var(--pnn-wine-2); }
.pnn-cta:hover { background: var(--pnn-wine-3); color: #fff; text-decoration: none; }
.pnn-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pnn-wine-2); }
.pnn-seal-box { position: relative; margin: 2.4rem 0 1.4rem; padding: 1.2rem 1.1rem 1.1rem; background: var(--pnn-vellum); border: 2px solid var(--pnn-wine); box-shadow: inset 0 0 0 4px var(--pnn-vellum), inset 0 0 0 5px var(--pnn-gold-2); }
.pnn-seal-box h2 { margin-top: 0; padding-right: 3.2rem; font-size: 1.3rem; }
.pnn-seal-box > svg { position: absolute; top: .8rem; right: .8rem; width: 2.8rem; height: 2.8rem; }
.pnn-seal-box .pnn-small { font-size: .88rem; color: var(--pnn-ink-2); margin: .7rem 0 0; }
.pnn-more { margin-top: 2rem; }
.pnn-more h2 { font-size: 1.2rem; }
.pnn-more ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem 1rem; }
@media (min-width: 36em) { .pnn-more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pnn-more a { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--pnn-display); }
.pnn-more a:hover span { text-decoration: underline; }
.pnn-more svg { width: 1.5rem; height: 2rem; flex: 0 0 auto; }

/* ---------- guides & house pages ---------- */
.pnn-glossary { margin: .6rem 0 1rem; }
.pnn-glossary dt { font-family: var(--pnn-display); font-weight: 600; color: var(--pnn-wine-2); font-size: 1.08rem; margin-top: .8rem; }
.pnn-glossary dd { margin: .15rem 0 0; padding-left: .9rem; border-left: 2px solid var(--pnn-rule); }
.pnn-house h2 { border-bottom: 1px solid var(--pnn-rule); padding-bottom: .25rem; }
.pnn-mailcard { display: inline-block; margin: .3rem 0 1rem; padding: .7rem 1rem; background: var(--pnn-vellum); border: 1px solid var(--pnn-rule); border-left: 4px solid var(--pnn-gold-2); font-family: var(--pnn-display); font-size: 1.15rem; }

/* ---------- footer ---------- */
.pnn-foot { background: var(--pnn-sable); color: #e7dcc4; margin-top: 1rem; font-size: .95rem; }
.pnn-foot .pnn-bunting { transform: scaleY(-1); }
.pnn-foot-in { max-width: 72rem; margin: 0 auto; padding: 1.6rem 16px 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (min-width: 40em) { .pnn-foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .pnn-foot-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } }
.pnn-foot h2 { margin: 0 0 .5rem; color: var(--pnn-gold-3); font-size: 1.05rem; font-variant: small-caps; letter-spacing: .08em; }
.pnn-foot ul { list-style: none; margin: 0; padding: 0; }
.pnn-foot li { margin: .2rem 0; }
.pnn-foot a { color: #f1e6cb; text-decoration-color: rgba(210, 178, 99, .6); }
.pnn-foot a:hover { color: #fff; }
.pnn-foot-brand p { margin: .4rem 0; }
.pnn-foot-name { font-family: var(--pnn-display); font-variant: small-caps; letter-spacing: .08em; font-size: 1.3rem; color: var(--pnn-gold-3); }
.pnn-foot-base { max-width: 72rem; margin: 0 auto; padding: .8rem 16px 1.4rem; border-top: 1px solid rgba(210, 178, 99, .25); font-size: .85rem; color: #cbbd9e; }

/* ---------- 404 ---------- */
.pnn-lost { max-width: 40rem; margin: 0 auto; padding: 2.5rem 16px 3rem; text-align: center; }
.pnn-lost svg { width: 5rem; height: 6.6rem; }
.pnn-lost ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.pnn-lost li a { display: inline-block; padding: .45rem .8rem; border: 1px solid var(--pnn-rule); background: var(--pnn-vellum); text-decoration: none; font-family: var(--pnn-display); }