:root {
  color-scheme: light;
  --paper: #f1efe6;
  --ink: #20251e;
  --muted: #50564b;
  --line: #c3c4b6;
  --moss: #273329;
  --leaf: #506246;
  --pale: #e7e9dc;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration-thickness: .06em; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .11em; }
:focus-visible { outline: 2px solid #696624; outline-offset: 5px; }
main:focus { outline: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
p { line-height: 1.6; }
.wrap { width: min(100% - 112px, 1320px); margin-inline: auto; }
.skip-link { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 12px; background: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner, .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header-inner { min-height: 78px; }
.masthead { font-family: var(--serif); font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1; letter-spacing: -.05em; white-space: nowrap; text-decoration: none; }
.masthead span, .accent { color: var(--leaf); }
.site-header nav, .site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 3vw, 36px); }
.site-header nav a, .site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current], .site-footer nav a:hover { text-decoration: underline; }
.eyebrow, .index-number { color: var(--muted); font-size: .72rem; line-height: 1.4; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; margin-block: 44px 62px; border: 1px solid var(--line); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(29px, 4.1vw, 72px); }
.hero h1 { margin: 23px 0; font-size: clamp(3.6rem, 7.2vw, 8.4rem); line-height: .88; letter-spacing: -.07em; }
.lede { max-width: 61ch; color: var(--muted); font-size: clamp(1.03rem, 1.6vw, 1.3rem); line-height: 1.54; }
.hero .lede { max-width: 32ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px 23px; align-items: center; margin-top: 29px; }
.button { display: inline-flex; justify-content: space-between; gap: 17px; align-items: center; background: var(--moss); color: #faf7eb; text-decoration: none; padding: 13px 16px; min-height: 46px; font-size: .85rem; font-weight: 600; }
.button:hover { background: #3c4a37; }
.quiet-link { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; font-size: .92rem; font-weight: 600; }
.hero-figure { position: relative; background: #36352a; min-height: 420px; }
.hero-figure img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 60% 57%; }
.hero-figure figcaption { position: absolute; display: flex; gap: 6px 14px; justify-content: space-between; flex-wrap: wrap; inset: auto 0 0; padding: 10px 14px; color: #faf7eb; background: #24271fd9; font-size: .7rem; }
.section-block { padding-block: 0 72px; }
.section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 30px; margin: 0 0 24px; }
.section-heading h2, .provenance h2 { font-size: clamp(2.25rem, 4.2vw, 4.35rem); line-height: .99; }
.directory-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.directory-list li { border-bottom: 1px solid var(--line); }
.directory-list a { display: grid; grid-template-columns: 42px minmax(0, 1.5fr) minmax(0, 1fr) 24px; align-items: center; gap: 14px; padding: 20px 11px; min-height: 86px; text-decoration: none; }
.directory-list a:hover { background: var(--pale); }
.directory-name { font-family: var(--serif); font-size: clamp(1.52rem, 3.1vw, 3.05rem); line-height: 1.02; letter-spacing: -.035em; }
.directory-description { color: var(--muted); font-size: .88rem; line-height: 1.35; }
.directory-arrow { color: var(--leaf); font-size: 1.4rem; text-align: right; }
.reading-band { color: #f4f1e8; background: var(--moss); padding-top: 58px; }
.reading-band .eyebrow, .reading-band .guide-card p { color: #d4d9ca; }
.reading-band .guide-card { border-color: #738070; }
.reading-band a:focus-visible { outline-color: #f1efe6; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.guide-card { padding: 23px 0 11px; border-top: 1px solid var(--line); }
.guide-card-image { width: 100%; height: auto; aspect-ratio: 2.3; object-fit: cover; margin-bottom: 19px; }
.guide-card :is(h2, h3) { margin-block: 9px 12px; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.08; }
.guide-card a { text-decoration: none; }
.guide-card a:hover { text-decoration: underline; }
.guide-card a span { font-family: var(--sans); font-size: .6em; vertical-align: middle; }
.guide-card p { max-width: 46ch; color: var(--muted); }
.provenance { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 22px; padding-block: 60px 65px; }
.provenance h2 { margin-top: 12px; }
.provenance > p { max-width: 48ch; color: var(--muted); }
.provenance a { white-space: normal; }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { align-items: start; padding-block: 36px; }
.footer-inner p { color: var(--muted); margin-top: 10px; font-size: .85rem; }
.page-heading { background: var(--pale); border-bottom: 1px solid var(--line); padding: 26px 0 52px; }
.page-heading h1 { max-width: 18ch; font-size: clamp(3.2rem, 7.8vw, 7.7rem); line-height: .95; letter-spacing: -.062em; margin: 16px 0 19px; }
.page-heading .button { margin-top: 22px; }
.page-heading + .section-block { padding-top: 54px; }
.crumbs { margin-bottom: 36px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; padding: 0; margin: 0; color: var(--muted); font-size: .8rem; }
.crumbs li + li::before { content: '/'; margin-inline: 9px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.source-note { margin-top: 15px; color: var(--muted); font-size: .82rem; }
.table-frame { overflow-x: auto; }
table { width: 100%; min-width: 550px; border-collapse: collapse; font-size: .95rem; }
caption { text-align: left; padding-bottom: 8px; font-size: .82rem; color: var(--muted); }
th, td { border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; padding: 12px 18px 12px 0; line-height: 1.42; }
thead th { border-top: 1px solid var(--line); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
tbody th { width: 40%; font-weight: 600; }
.list-section { padding-bottom: 47px; }
.listing-section { border-top: 1px solid var(--line); }
.listing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 18px 30px; border-bottom: 1px solid var(--line); padding-block: 23px 24px; scroll-margin-top: 10px; }
.listing:target { background: var(--pale); box-shadow: 12px 0 var(--pale), -12px 0 var(--pale); }
.listing h3 { font-size: clamp(1.88rem, 3.7vw, 3.6rem); line-height: 1.05; }
.maker-name { margin-top: 11px; color: var(--muted); font-size: .88rem; }
.listing-copy { max-width: 64ch; }
.listing-copy p + p { margin-top: 9px; }
.source-link { display: inline-block; font-size: .86rem; font-weight: 600; color: var(--moss); white-space: normal; }
.source-link span { white-space: nowrap; }
.end-notes { padding-block: 44px 54px; }
.answer-card { background: var(--pale); border-left: 3px solid var(--leaf); padding: 23px 25px; margin-block: 0 17px; }
.answer-card h2, .prose h2 { font-size: clamp(1.72rem, 3.4vw, 2.7rem); line-height: 1.1; margin: 7px 0 11px; }
.answer-card p, .prose p { max-width: 70ch; }
.guide-body { max-width: 940px; padding-block: 40px 55px; }
.field-guide[data-theme='pocket'] { --guide-tint: #eee2d4; --guide-accent: #793f2e; }
.field-guide[data-theme='commute'] { --guide-tint: #e4e9df; --guide-accent: #365448; }
.guide-heading { background: var(--guide-tint, var(--pale)); }
.guide-opening { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); align-items: center; gap: clamp(25px, 5vw, 75px); }
.guide-opening h1 { font-size: clamp(3.1rem, 6.3vw, 6.9rem); }
.guide-jumps { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 12px; }
.field-guide .accent, .field-guide .eyebrow { color: var(--guide-accent, var(--leaf)); }
.guide-figure { margin-top: 21px; max-width: 700px; border: 1px solid var(--line); }
.guide-cover { margin: 0; max-width: none; }
.guide-figure img { width: 100%; height: auto; }
.guide-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 15px; padding: 9px 12px; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.guide-figure figcaption span:last-child { font-size: .69rem; }
.fit-examples { margin-bottom: 38px; }
.fit-examples h2 { margin: 7px 0 11px; font-size: clamp(2.15rem, 4vw, 3.65rem); line-height: 1.02; }
.fit-examples > p:not(.eyebrow) { color: var(--muted); max-width: 65ch; }
.fit-list { list-style: none; padding: 0; margin: 23px 0 0; border-top: 1px solid var(--line); }
.fit-list > li { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 13px 30px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.fit-list h3 { margin-top: 7px; font-size: clamp(1.38rem, 3vw, 2rem); line-height: 1.11; }
.fit-dimensions { display: grid; gap: 3px; margin: 0 0 8px; font-size: .88rem; }
.fit-dimensions div { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 8px; }
.fit-dimensions dt { font-weight: 700; }
.fit-dimensions dd { margin: 0; font-variant-numeric: tabular-nums; }
.fit-list > li:target { background: var(--guide-tint, var(--pale)); }
.fit-check { padding: clamp(16px, 3vw, 28px); background: var(--guide-tint, var(--pale)); border: 1px solid var(--line); }
.fit-check form { margin-top: 16px; }
.fit-check form > p, .commission-note { color: var(--muted); font-size: .86rem; }
.fit-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 14px; }
.fit-inputs fieldset { min-width: 0; padding: 10px; margin: 0; border: 1px solid var(--line); }
.fit-inputs legend { font-size: .9rem; font-weight: 600; }
.fit-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fit-fields label { font-size: .8rem; }
.fit-fields input { display: block; width: 100%; min-height: 44px; margin-top: 5px; padding: 6px; border: 1px solid var(--muted); background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; }
.fit-check button { border: 0; cursor: pointer; }
.fit-result:not(:empty) { display: block; margin-top: 12px; line-height: 1.5; }
.commission-note { margin-top: 10px; }
.guide-body .prose { margin-block: 28px 33px; }
.guide-body .prose:first-child { margin-top: 0; }
.inline-sources { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 12px 0 0; list-style: none; }
@media (max-width: 1050px) {
  .wrap { width: calc(100% - 70px); }
  .hero-figure { min-height: 388px; }
}
@media (max-width: 770px) {
  .wrap { width: calc(100% - 38px); }
  .header-inner { min-height: 67px; }
  .hero { grid-template-columns: 1fr; margin-block: 23px 44px; }
  .hero h1 { font-size: clamp(4rem, 12vw, 6.6rem); margin-block: 15px 19px; }
  .hero-copy { padding: 27px 26px 30px; }
  .hero-figure { min-height: 0; aspect-ratio: 1.38; }
  .section-block { padding-bottom: 50px; }
  .section-heading { align-items: start; flex-direction: column; gap: 8px; }
  .directory-list a { grid-template-columns: 27px minmax(0, 1fr) 23px; gap: 4px 10px; min-height: 74px; padding: 12px 2px; }
  .directory-name { grid-column: 2; }
  .directory-description { grid-column: 2; grid-row: 2; }
  .directory-arrow { grid-column: 3; grid-row: 1 / 3; }
  .reading-band { padding-top: 39px; }
  .provenance { padding-block: 40px 44px; }
  .page-heading { padding-bottom: 35px; }
  .crumbs { margin-bottom: 27px; }
  .listing { grid-template-columns: 1fr; gap: 13px; }
  .guide-opening, .fit-list > li, .fit-inputs { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .wrap { width: calc(100% - 30px); }
  .header-inner { gap: 8px; }
  .site-header nav { gap: 0 12px; }
  .site-header nav a { font-size: .76rem; }
  .hero-copy { padding-inline: 18px; }
  .hero h1 { font-size: clamp(3.25rem, 13.8vw, 4.5rem); }
  .hero-actions { gap: 6px 16px; }
  .guide-grid, .provenance { grid-template-columns: 1fr; }
  .guide-grid { gap: 22px; }
  .footer-inner { flex-direction: column; gap: 12px; }
  .footer-inner nav { gap: 0 17px; }
  .page-heading h1 { font-size: clamp(2.8rem, 12.5vw, 4rem); overflow-wrap: anywhere; }
  table { min-width: 0; table-layout: fixed; font-size: .83rem; }
  th, td { padding-right: 8px; overflow-wrap: anywhere; }
  thead th { font-size: .66rem; }
  thead th:first-child, tbody th { width: 39%; }
  thead th:nth-child(2) { width: 23%; }
  th:last-child, td:last-child { padding-right: 0; }
  .answer-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }