:root {
  --norder-ground: #F7F5E0;
  --norder-ink: #20242F;
  --norder-accent: #283D71;
  --norder-support: #C6EBD9;
  --norder-surface: #FCFCFA;
  color-scheme: light;
  font-family: "Karla", Arial, sans-serif;
  color: var(--norder-ink);
  background: var(--norder-ground);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 28px; }
body { margin: 0; font-size: 19px; line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--norder-accent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--norder-accent); outline-offset: 5px; background: var(--norder-support); }
::selection { background: var(--norder-support); color: var(--norder-ink); }
p { margin: 0 0 1.15em; }
h1, h2, h3 { font-family: "Aleo", Georgia, serif; font-weight: 500; }
h1 { font-size: clamp(48px, 4.8vw, 69px); line-height: 1.06; letter-spacing: -0.04em; margin: 0; text-wrap: balance; }
h2 { font-size: 40px; line-height: 1.18; letter-spacing: -0.025em; }
h3 { font-size: 31px; line-height: 1.23; letter-spacing: -0.02em; }
.norder-icon { width: 26px; height: 26px; display: inline-block; flex: 0 0 auto; vertical-align: middle; color: var(--norder-accent); }
.norder-icon svg { display: block; width: 100%; height: 100%; }
.norder-skip { position: absolute; top: 12px; left: 20px; padding: 10px 16px; background: var(--norder-surface); transform: translateY(-180%); z-index: 10; }
.norder-skip:focus { transform: none; }
/* The photograph reaches all four edges. A solid sheet carries every word. */
.norder-opening { position: relative; isolation: isolate; min-height: 718px; padding: 48px 0 76px; background: var(--norder-support); }
.norder-opening-panel { position: relative; z-index: 1; width: min(870px, 65%); margin-left: max(44px, calc((100% - 1280px) / 2)); padding: 32px 44px 28px; background: var(--norder-surface); box-shadow: 12px 12px 0 rgba(40, 61, 113, .19), 0 18px 38px rgba(32, 36, 47, .12); animation: norder-place-sheet .65s ease-out both; }
.norder-opening-copy { text-align: center; }
.norder-caption { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 17px; color: var(--norder-accent); margin: 0 0 20px; }
.norder-caption::before { content: ""; width: 42px; height: 20px; background: url("sorting-comb.svg") center / contain no-repeat; }
.norder-opening h1 { max-width: 790px; margin-inline: auto; }
.norder-definition { max-width: 650px; margin: 24px auto 0; font-size: 21px; line-height: 1.5; text-wrap: pretty; }
.norder-ledger { margin: 26px 0 0; padding: 17px 0 18px; border-block: 2px solid var(--norder-accent); text-align: left; cursor: text; }
.norder-ledger p { display: grid; grid-template-columns: 102px minmax(0, 1fr); gap: 18px; margin: 0; font-size: 16px; line-height: 1.5; }
.norder-entry-label { font-size: 16px; color: var(--norder-accent); padding-top: 3px; }
.norder-entry-copy strong { font-family: "Aleo", Georgia, serif; font-size: 23px; font-weight: 500; }
.norder-entry-continuation { display: block; margin-top: 5px; }
.norder-photo { margin: 0; }
.norder-photo img { width: 100%; object-fit: cover; background: var(--norder-support); }
.norder-photo--opening, .norder-photo--band { position: absolute; inset: 0; z-index: -1; }
.norder-photo--opening img, .norder-photo--band img { max-width: none; width: 100%; height: 100%; object-fit: cover; object-position: 68% 52%; }
.norder-photo figcaption { position: absolute; right: max(36px, calc((100% - 1280px) / 2)); bottom: 31px; max-width: 320px; padding: 13px 18px; font-size: 16px; line-height: 1.45; background: var(--norder-surface); border-left: 5px solid var(--norder-accent); box-shadow: 6px 6px 0 rgba(40, 61, 113, .16); }
/* An in-flow band sits at the foot of the opening, like a tray laid on its edge. */
.norder-footband { position: relative; z-index: 2; max-width: 1280px; width: calc(100% - 88px); margin: -24px auto 0; border-bottom: 4px solid var(--norder-accent); box-shadow: 8px 8px 0 var(--norder-support); }
.norder-band-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; background: var(--norder-surface); }
.norder-band-grid a { position: relative; min-height: 110px; padding: 23px 20px 20px 58px; display: flex; flex-direction: column; justify-content: center; text-decoration: none; line-height: 1.3; transition: background-color .18s ease, transform .18s ease; }
.norder-band-grid a > .norder-icon { position: absolute; left: 20px; top: 29px; width: 24px; height: 24px; }
.norder-band-grid a:hover, .norder-band-grid a:focus-visible { background: var(--norder-support); transform: translateY(-5px); }
.norder-band-grid a:focus-visible { outline-offset: -6px; }
.norder-band-grid .norder-wordmark { padding-left: 29px; padding-right: 34px; font-family: "Aleo", Georgia, serif; font-size: 28px; color: var(--norder-ink); background: var(--norder-ground); }
.norder-wordmark > .norder-icon { display: none; }
.norder-band-grid b { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.norder-band-grid a > span:not(.norder-icon) { font-size: 16px; color: var(--norder-ink); }
/* Open bins: no enclosing cards. The steps settle at different heights. */
.norder-home-main { max-width: 1280px; width: calc(100% - 88px); margin: 0 auto; }
.norder-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; margin: 92px 0 90px; align-items: start; }
.norder-open-bin { position: relative; padding: 24px 0 18px; border-bottom: 4px solid var(--norder-accent); }
.norder-open-bin:nth-child(2) { margin-top: 36px; }
.norder-open-bin:nth-child(3) { margin-top: 72px; }
.norder-bin-number { display: block; width: fit-content; padding: 0 9px 0 7px; font: 500 76px/1 "Aleo", Georgia, serif; letter-spacing: -.07em; background: var(--norder-support); color: var(--norder-accent); }
.norder-open-bin .norder-bin-number { position: absolute; top: -41px; right: 0; z-index: -1; transform: rotate(-5deg); }
.norder-open-bin h2 { display: flex; align-items: center; gap: 10px; width: fit-content; padding: 0 12px 0 0; font: 600 24px/1.3 "Karla", Arial, sans-serif; color: var(--norder-accent); background: var(--norder-ground); margin: 0 0 28px; }
.norder-open-bin h3 { font-size: 33px; margin: 0 0 23px; }
.norder-open-bin p { font-size: 18px; line-height: 1.65; }
.norder-home-bridge { display: grid; grid-template-columns: .85fr 1.5fr; column-gap: 100px; max-width: 1120px; margin: 74px auto; padding-bottom: 22px; }
.norder-home-bridge h2 { margin: 0; max-width: 340px; }
.norder-home-bridge .norder-paragraphs > :first-child { margin-top: 0; }
.norder-home-bridge h3 { margin: 0 0 18px; }
.norder-home-bridge h3:not(:first-child) { margin-top: 40px; }
.norder-home-bridge:nth-of-type(1) .norder-paragraphs > p:last-child { position: relative; padding: 28px 32px; margin: 34px -28px 0 -52px; font: 400 27px/1.4 "Aleo", Georgia, serif; background: var(--norder-support); border-left: 5px solid var(--norder-accent); box-shadow: 9px 9px 0 var(--norder-surface); }
.norder-home-bridge:nth-of-type(2) { padding: 46px 42px 30px; background: var(--norder-surface); box-shadow: -14px 14px 0 var(--norder-support); }
.norder-comb { width: 90px; height: 36px; margin: 66px auto; }
/* Topic openings keep their own photo, caption and solid reading sheet. */
.norder-page-opening { position: relative; isolation: isolate; padding: 42px max(44px, calc((100% - 1280px) / 2)) 60px; }
.norder-page-panel { max-width: 1040px; }
.norder-page-opening--photo { min-height: 505px; padding-top: 36px; padding-bottom: 76px; background: var(--norder-support); }
.norder-page-opening--photo .norder-page-panel { position: relative; z-index: 1; width: min(830px, 66%); padding: 28px 36px 32px; background: var(--norder-surface); box-shadow: 10px 10px 0 rgba(40, 61, 113, .17); }
.norder-breadcrumb { font-size: 16px; margin-bottom: 26px; display: flex; gap: 12px; flex-wrap: wrap; line-height: 1.4; }
.norder-breadcrumb a { text-decoration: none; }
.norder-breadcrumb span::before { content: "/"; margin-right: 12px; }
.norder-page-opening h1 { max-width: 980px; font-size: clamp(42px, 4vw, 58px); }
.norder-page-opening--photo h1 { font-size: clamp(38px, 3.6vw, 52px); }
.norder-deck { max-width: 740px; font-size: 21px; line-height: 1.5; margin: 24px 0 0; text-wrap: pretty; }
.norder-article { max-width: 1120px; width: calc(100% - 88px); margin: 70px auto 0; }
.norder-topic-bin { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding: 54px 0 32px; border-bottom: 3px solid var(--norder-accent); }
.norder-topic-bin > .norder-bin-number { position: absolute; top: 100px; left: -26px; font-size: 88px; transform: rotate(-4deg); }
.norder-topic-bin h2 { position: sticky; top: 32px; display: flex; align-items: center; gap: 12px; align-self: start; font: 600 25px/1.3 "Karla", Arial, sans-serif; color: var(--norder-accent); margin: 0; background: var(--norder-ground); z-index: 1; }
.norder-topic-bin h3 { font-size: 36px; margin: 0 0 24px; max-width: 690px; }
.norder-paragraphs { max-width: 750px; }
.norder-connector { margin: 58px 0 58px 284px; }
.norder-connector h2 { font-size: 34px; margin: 0 0 23px; }
.norder-connector h3 { margin: 0 0 22px; }
.norder-connector:last-of-type { margin-left: 230px; padding: 30px 36px; background: var(--norder-surface); box-shadow: -12px 12px 0 var(--norder-support); }
.norder-reference-section { padding: 38px 0 22px; border-bottom: 2px solid var(--norder-accent); display: grid; grid-template-columns: 1fr 2fr; gap: 66px; }
.norder-reference-section h2 { position: sticky; top: 32px; align-self: start; font-size: 32px; margin: 0; }
.norder-reference-section h3 { font-size: 27px; margin: 0 0 22px; }
.norder-reference-section p { margin-bottom: 28px; }
.norder-footer { margin: 88px auto 0; padding: 44px max(44px, calc((100% - 1280px) / 2)); border-top: 4px solid var(--norder-accent); background: var(--norder-support); display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 100px; }
.norder-footer p { font-size: 18px; max-width: 470px; }
.norder-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-content: start; }
.norder-footer nav a { font-size: 17px; text-decoration: none; }
.norder-footer nav a:hover { text-decoration: underline; }
.norder-copyright { margin-top: 30px; font-size: 16px; }
.norder-missing { max-width: 800px; margin: 65px auto 0; padding: 0 24px; }
.norder-missing h2 { font-size: 32px; }
@keyframes norder-place-sheet { from { transform: translateY(12px); } to { transform: translateY(0); } }
@media (min-width: 1700px) {
  .norder-opening { padding-block: 64px 92px; min-height: 760px; }
}
@media (max-width: 1100px) {
  .norder-opening-panel { width: 76%; margin-left: 32px; padding-inline: 34px; }
  .norder-band-grid a { padding-left: 48px; padding-right: 12px; }
  .norder-band-grid a > .norder-icon { left: 15px; }
  .norder-band-grid .norder-wordmark { padding-left: 22px; font-size: 25px; }
  .norder-board { column-gap: 32px; }
  .norder-open-bin h3 { font-size: 30px; }
  .norder-home-bridge { column-gap: 58px; }
  .norder-page-opening--photo .norder-page-panel { width: 76%; }
  .norder-topic-bin { grid-template-columns: 180px minmax(0, 1fr); gap: 44px; }
  .norder-connector { margin-left: 224px; }
  .norder-connector:last-of-type { margin-left: 185px; }
  .norder-footer { column-gap: 50px; }
}
@media (max-width: 800px) {
  .norder-opening { min-height: 680px; }
  .norder-opening-panel { width: calc(100% - 112px); margin-left: 28px; }
  .norder-opening h1 { font-size: 50px; }
  .norder-definition { font-size: 19px; }
  .norder-ledger p { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .norder-footband, .norder-home-main, .norder-article { width: calc(100% - 56px); }
  .norder-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .norder-band-grid a { min-height: 90px; padding: 20px 18px 18px 55px; }
  .norder-band-grid a > .norder-icon { left: 19px; top: 23px; }
  .norder-board { grid-template-columns: 1fr; margin-block: 82px 64px; gap: 74px; }
  .norder-open-bin, .norder-open-bin:nth-child(2), .norder-open-bin:nth-child(3) { margin-top: 0; }
  .norder-open-bin p { max-width: 660px; }
  .norder-home-bridge { grid-template-columns: 1fr; gap: 26px; margin-block: 50px; }
  .norder-home-bridge h2 { max-width: 600px; }
  .norder-home-bridge:nth-of-type(1) .norder-paragraphs > p:last-child { margin-inline: 0; }
  .norder-home-bridge:nth-of-type(2) { padding: 30px 28px 20px; }
  .norder-page-opening { padding-inline: 28px; }
  .norder-page-opening--photo .norder-page-panel { width: calc(100% - 40px); padding: 26px; }
  .norder-topic-bin { grid-template-columns: 146px minmax(0, 1fr); gap: 28px; }
  .norder-topic-bin h2 { font-size: 23px; gap: 7px; }
  .norder-topic-bin h2 .norder-icon { width: 21px; }
  .norder-topic-bin > .norder-bin-number { left: 0; }
  .norder-connector { margin-left: 174px; }
  .norder-connector:last-of-type { margin-left: 148px; padding: 24px; }
  .norder-reference-section { gap: 30px; }
}
@media (max-width: 600px) {
  body { font-size: 18px; line-height: 1.6; }
  .norder-opening { min-height: 0; padding: 0; background: var(--norder-ground); }
  .norder-opening-panel { width: 100%; margin: 0; padding: 22px 22px 24px; box-shadow: none; background: var(--norder-ground); }
  .norder-opening-copy { text-align: left; }
  .norder-caption { justify-content: flex-start; gap: 11px; font-size: 16px; margin-bottom: 17px; }
  .norder-caption::before { width: 32px; height: 18px; }
  .norder-opening h1 { font-size: 36px; line-height: 1.1; letter-spacing: -.035em; text-wrap: pretty; }
  .norder-definition { margin-top: 20px; font-size: 17px; line-height: 1.5; }
  .norder-ledger { margin-top: 21px; padding-block: 14px 16px; }
  .norder-ledger p { display: block; font-size: 16px; line-height: 1.45; }
  .norder-entry-label { display: block; padding-top: 0; font-size: 16px; margin-bottom: 5px; }
  .norder-entry-copy strong { font-size: 20px; }
  .norder-entry-continuation { margin-top: 5px; }
  .norder-photo--opening, .norder-photo--band { position: relative; inset: auto; height: 256px; z-index: 0; }
  .norder-photo--opening img, .norder-photo--band img { object-position: center; }
  .norder-photo figcaption { right: 22px; bottom: 24px; max-width: calc(100% - 66px); padding: 10px 12px; font-size: 16px; }
  .norder-footband, .norder-home-main, .norder-article { width: calc(100% - 44px); }
  .norder-footband { margin-top: -12px; box-shadow: 6px 6px 0 var(--norder-support); }
  .norder-band-grid a { min-height: 87px; padding: 14px 10px 14px 14px; }
  .norder-band-grid a > .norder-icon { display: none; }
  .norder-band-grid .norder-wordmark { padding-left: 14px; font-size: 24px; }
  .norder-band-grid b { font-size: 18px; margin-bottom: 3px; }
  .norder-band-grid a > span:not(.norder-icon) { font-size: 16px; }
  .norder-band-grid a:hover, .norder-band-grid a:focus-visible { transform: none; }
  .norder-board { margin-top: 74px; }
  .norder-open-bin { padding-bottom: 16px; }
  .norder-open-bin h2 { margin-bottom: 23px; font-size: 24px; }
  .norder-open-bin h3 { font-size: 31px; }
  .norder-bin-number { font-size: 67px; }
  .norder-home-bridge h2 { font-size: 34px; }
  .norder-home-bridge h3 { font-size: 28px; }
  .norder-home-bridge:nth-of-type(1) .norder-paragraphs > p:last-child { padding: 22px; font-size: 25px; }
  .norder-home-bridge:nth-of-type(2) { padding: 25px 20px 18px; box-shadow: -7px 7px 0 var(--norder-support); }
  .norder-page-opening { padding: 27px 22px 45px; }
  .norder-page-opening--photo { min-height: 0; padding: 0; background: var(--norder-ground); }
  .norder-page-opening--photo .norder-page-panel { width: 100%; padding: 27px 22px 30px; background: var(--norder-ground); box-shadow: none; }
  .norder-breadcrumb { margin-bottom: 23px; font-size: 16px; gap: 8px; }
  .norder-breadcrumb span::before { margin-right: 8px; }
  .norder-page-opening h1, .norder-page-opening--photo h1 { font-size: 36px; line-height: 1.12; }
  .norder-deck { font-size: 19px; margin-top: 21px; }
  .norder-article { margin-top: 35px; }
  .norder-topic-bin { display: block; padding-top: 39px; padding-bottom: 23px; }
  .norder-topic-bin > .norder-bin-number { top: 20px; left: auto; right: 0; font-size: 68px; z-index: -1; }
  .norder-topic-bin h2 { position: relative; top: auto; width: fit-content; padding-right: 12px; font-size: 24px; margin-bottom: 26px; }
  .norder-topic-bin h2 .norder-icon { width: 24px; }
  .norder-topic-bin h3 { font-size: 31px; }
  .norder-connector { margin: 38px 0; }
  .norder-connector:last-of-type { margin-left: 0; padding: 23px; box-shadow: -7px 7px 0 var(--norder-support); }
  .norder-connector h2 { font-size: 31px; }
  .norder-reference-section { display: block; padding-block: 34px 12px; }
  .norder-reference-section h2 { position: static; font-size: 31px; margin-bottom: 24px; }
  .norder-reference-section h3 { font-size: 26px; }
  .norder-comb { margin-block: 40px; }
  .norder-footer { grid-template-columns: 1fr; gap: 24px; margin-top: 60px; padding: 30px 22px; }
  .norder-footer p { font-size: 17px; }
  .norder-copyright { margin-top: 22px; }
  .norder-footer nav { gap: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}