/* The illustrated essays are static pages. Their content and sources are
   readable without JS; the clock demonstration is progressive enhancement. */
.field-nav-links { display: flex; gap: 28px; font: 10px var(--sans); letter-spacing: .13em; color: var(--gold); }
.field-page { background: #0b1016; }
.field-masthead { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 50px; align-items: center; width: min(1400px,100%); margin: 78px auto 0; padding: 90px 6vw 70px; }
.field-title { min-width: 0; }
.field-title .overline, .library-card-copy .overline, .related-note .overline { text-transform: uppercase; }
.field-title h1 { font: 400 clamp(35px, 3.5vw, 57px)/1.12 var(--display); letter-spacing: -.015em; color: var(--cream); margin: 28px 0 22px; white-space: normal; overflow-wrap: break-word; }
.field-subtitle { font-size: 24px; line-height: 1.4; color: var(--warm-light); max-width: 540px; }
.field-meta { margin-top: 30px; font: 10px/1.6 var(--sans); color: var(--muted); letter-spacing: .15em; }
.field-meta span { padding: 0 10px; color: var(--gold); }
.field-hero-art img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.field-hero-art figcaption { font: 11px/1.7 var(--sans); color: #aaa493; }
.figure-enlarge { display: inline-block; margin-top: 8px; color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.field-content-layout { display: grid; grid-template-columns: 230px minmax(0,820px); gap: 60px; width: min(1280px,100%); margin: auto; padding: 44px 40px 80px; border-top: 1px solid var(--line); }
.field-contents { position: sticky; top: 110px; align-self: start; }
.field-contents nav { display: grid; gap: 0; margin-top: 22px; }
.field-contents nav a { display: grid; grid-template-columns: 25px 1fr; gap: 9px; padding: 12px 0; border-bottom: 1px solid rgba(246,218,172,.12); font-size: 17px; line-height: 1.35; color: #bdb5a6; }
.field-contents nav span { color: var(--warm-light); font: 10px/1.9 var(--sans); }
.field-contents a:hover { color: var(--gold); }
.field-collection-return { display: block; margin-top: 30px; font: 10px var(--sans); letter-spacing: .13em; color: var(--gold); }
.field-intro { font-size: 26px; line-height: 1.45; color: var(--cream); margin: 0 0 45px; }
.field-article { min-width: 0; font-size: 21px; line-height: 1.65; }
.field-article p { color: #cdc5b6; }
.essay-section { margin: 0 0 50px; }
.essay-section h2 { font-size: 28px; line-height: 1.3; letter-spacing: .015em; text-transform: none; scroll-margin-top: 108px; }
.essay-section h3 { color: var(--cream); font-size: 25px; line-height: 1.3; }
.essay-section > p:last-child { margin-bottom: 0; }
.essay-section a:not(.source-mark):not(.button) { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.essay-section strong { color: var(--cream); font-weight: 500; }
.essay-grid, .fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.fact-card { padding: 24px; background: #111e2a; border: 1px solid rgba(144,177,205,.18); }
.fact-card p { font-size: 19px; margin-bottom: 0; }
.note-box, .quote-panel { padding: 26px 30px; margin: 30px 0; border-left: 2px solid var(--gold); background: #181711; }
.note-box p:first-child, .quote-panel p:first-child { margin-top: 0; }
.note-box p:last-child, .quote-panel p:last-child { margin-bottom: 0; }
.quote-panel { background: #102130; border-color: var(--cold-light); }
.quote-panel blockquote { margin: 0 0 12px; font-size: 30px; color: var(--cream); }
.essay-section figure { margin: 30px 0; }
.essay-section figure img { display: block; width: 100%; height: auto; }
.essay-section figcaption { font: 11px/1.6 var(--sans); }
.essay-table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid var(--line); }
.essay-table { width: 100%; border-collapse: collapse; font-size: 18px; line-height: 1.45; margin: 28px 0; }
.essay-table-wrap .essay-table { margin: 0; }
.essay-table th { color: var(--gold); font-weight: 500; text-align: left; background: #17242e; }
.essay-table th, .essay-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.essay-table tbody tr:nth-child(even) { background: rgba(100,139,176,.05); }
.essay-table td { color: #cdc5b6; }
.paired-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 28px 0; border-top: 1px solid var(--line); padding-top: 26px; }
.paired-timeline .history-timeline { margin-top: 25px; }
.paired-timeline .history-timeline li { display: block; padding: 0 0 26px 24px; font-size: 18px; }
.paired-timeline .history-timeline li::before { left: 4px; }
.paired-timeline .history-timeline li::after { left: 0; }
.paired-timeline .history-timeline strong { font: 15px/1.5 var(--display); color: var(--gold); }
.paired-timeline .history-timeline p { font-size: 18px; margin: 10px 0 0; }
.soldier-portrait { display: block; width: 100%; height: 180px; object-fit: cover; object-position: center 25%; margin-bottom: 20px; border: 1px solid var(--line); }
.timeline-row { display: grid; grid-template-columns: 105px 1fr 1fr; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.timeline-row > :first-child { color: var(--gold); }
.timeline-row p { margin: 0; }
.field-sources { padding-top: 36px; border-top: 1px solid var(--line); }
.field-sources .source-list a { font-size: 18px; }
.field-sources .editorial-note { font: 12px/1.7 var(--sans); color: #aaa493; }
.field-related { width: min(1240px,100%); margin: auto; padding: 55px 40px 75px; border-top: 1px solid var(--line); }
.field-related h2 { font-size: 32px; text-transform: none; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 30px 0 36px; }
.related-note { display: grid; align-content: start; gap: 12px; padding: 24px; border: 1px solid var(--line); background: #101a23; }
.related-note strong { font: 400 25px/1.25 var(--serif); color: var(--cream); }
.related-note > span:last-child { color: var(--gold); }
.related-note:hover, .library-card:hover { border-color: var(--gold); }
.library-heading { margin-top: 78px; padding: 95px max(6vw,calc((100vw - 1180px)/2)) 65px; background: radial-gradient(ellipse at 75% 10%, #253849, transparent 70%); }
.library-heading h1 { font: 400 clamp(43px,4.6vw,74px)/1.12 var(--display); color: var(--cream); margin: 28px 0; letter-spacing: -.025em; }
.library-heading > p:not(.overline):not(.library-deck) { color: var(--warm-light); font-size: 29px; line-height: 1.3; }
.library-heading .library-deck { color: #bdb5a6; font-size: 21px; max-width: 720px; }
.library-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; width: min(1240px,100%); margin: auto; padding: 55px 40px; border-top: 1px solid var(--line); align-items: center; }
.library-feature img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.library-feature h2 { font-size: 30px; line-height: 1.25; text-transform: none; }
.library-feature p { color: #c4bdaf; }
.library-feature .overline { color: var(--gold); }
.library-feature .button { margin-top: 10px; }
.library-notes { width: min(1240px,100%); margin: auto; padding: 40px 40px 70px; }
.library-section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin-bottom: 36px; }
.library-section-heading h2 { font-size: 28px; text-transform: none; white-space: nowrap; }
.library-section-heading p { color: var(--muted); max-width: 560px; }
.library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.library-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: #101a23; }
.library-art { aspect-ratio: 12/7; overflow: hidden; background: #122332; }
.library-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.library-card-copy { padding: 25px 24px; display: flex; flex-direction: column; flex: 1; }
.library-card-copy h3 { font-size: 28px; line-height: 1.15; color: var(--cream); }
.library-card-copy > p:not(.overline) { color: #b9b2a3; font-size: 18px; line-height: 1.45; flex: 1; }
.library-read { color: var(--gold); font: 10px var(--sans); letter-spacing: .1em; margin-top: 10px; }
.library-editorial { width: min(1160px, calc(100% - 80px)); margin: 0 auto 75px; padding: 34px 40px; background: #151a1c; border-left: 2px solid var(--warm-light); }
.library-editorial h2 { font-size: 27px; text-transform: none; }
.library-editorial p { color: var(--muted); }
.library-editorial .button { margin-top: 14px; }
.latin-practice { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0; }
.latin-practice > article { padding: 24px; background: #122231; border-top: 1px solid var(--cold-light); }
.latin-practice h3 { font-size: 31px; }
.latin-practice .syllables { color: var(--warm-light); font-size: 21px; }
.latin-practice .syllables strong { color: var(--gold); font-weight: 600; }
.latin-practice .ipa { font-family: var(--sans); font-size: 15px; color: #d4cec0; }
.latin-practice p { font-size: 18px; margin-bottom: 0; }
.vowel-strip { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 24px 0; }
.vowel-strip span { display: inline-block; padding: 10px 18px; border-bottom: 2px solid var(--gold); color: var(--cream); font-size: 32px; }
.hour-demo { padding: 30px; margin: 30px 0; background: #102231; border: 1px solid var(--line); }
.hour-demo label { display: block; color: var(--cream); }
.hour-demo input[type=range] { width: 100%; accent-color: var(--gold); margin: 24px 0 10px; }
.hour-demo output { color: var(--gold); font-size: 31px; }
.hour-demo .demo-result { padding: 16px 0; font-size: 20px; }
.hour-ruler { display: grid; grid-template-columns: repeat(12,1fr); gap: 2px; width: var(--daylight-width,50%); min-width: 37.5%; margin: 20px auto; background: #253c4c; }
.hour-ruler span { padding: 10px 0; color: var(--night); background: var(--warm-light); text-align: center; font: 11px var(--sans); }
.hour-demo .editorial-note { font: 11px/1.6 var(--sans); color: #aaa493; }
.calendar-count { display: grid; grid-template-columns: repeat(8,1fr); gap: 4px; margin: 28px 0; }
.calendar-count > span { display: grid; gap: 8px; padding: 14px 2px; text-align: center; background: #17242e; color: var(--cream); font-size: 21px; }
.calendar-count small { font: 10px var(--sans); color: var(--warm-light); }
.calendar-count > span:last-child { background: #604625; }
@media (max-width: 1100px) {
  .field-masthead { gap: 30px; padding-left: 40px; padding-right: 40px; }
  .field-content-layout { grid-template-columns: 190px minmax(0,1fr); gap: 35px; }
  .library-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .field-masthead { margin-top: 68px; grid-template-columns: 1fr; padding: 60px 30px 40px; }
  .field-hero-art { max-width: 720px; }
  .field-content-layout { grid-template-columns: 1fr; padding: 30px; gap: 30px; }
  .field-contents { position: static; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
  .field-contents nav { grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .field-collection-return { display: none; }
  .field-article { font-size: 20px; }
  .related-grid { grid-template-columns: 1fr; }
  .library-heading { margin-top: 68px; padding: 65px 30px 40px; }
  .library-feature { gap: 25px; padding: 40px 30px; }
  .library-notes { padding: 30px; }
  .library-section-heading { display: block; }
  .library-editorial { width: calc(100% - 60px); padding: 28px; }
}
@media (max-width: 560px) {
  .field-nav-links { gap: 12px; font-size: 8px; letter-spacing: .05em; }
  .field-nav-links > a:last-child { display: none; }
  .field-masthead { padding: 45px 24px 30px; }
  .field-title .overline { font-size: 9px; }
  .field-subtitle { font-size: 22px; }
  .field-content-layout { padding: 25px 24px 45px; }
  .field-contents nav { grid-template-columns: 1fr; }
  .field-contents nav a { padding: 10px 0; }
  .field-intro { font-size: 24px; }
  .essay-section h2 { font-size: 26px; }
  .essay-grid, .fact-grid, .latin-practice, .paired-timeline { grid-template-columns: 1fr; }
  .essay-table th, .essay-table td { padding: 12px 10px; font-size: 16px; overflow-wrap: anywhere; }
  .timeline-row { grid-template-columns: 1fr; gap: 10px; }
  .timeline-row > div:not(:first-child) { padding-left: 16px; border-left: 1px solid var(--line); }
  .note-box, .quote-panel { padding: 22px; }
  .field-related { padding: 40px 24px; }
  .library-heading { padding: 55px 24px 35px; }
  .library-feature { grid-template-columns: 1fr; padding: 30px 24px; }
  .library-notes { padding: 25px 24px 40px; }
  .library-grid { grid-template-columns: 1fr; gap: 25px; }
  .library-editorial { width: calc(100% - 48px); padding: 24px; margin-bottom: 45px; }
  .hour-demo { padding: 22px; }
  .hour-ruler { width: 100%; min-width: 100%; }
  .hour-ruler span { font-size: 8px; }
  .calendar-count { gap: 2px; }
  .calendar-count > span { font-size: 17px; }
  .calendar-count small { font-size: 8px; }
}