:root {
  --deep: #06383a;
  --teal: #0d5b5f;
  --sand: #e8ddc4;
  --sand-light: #f6f1e6;
  --coral: #e36955;
  --coral-dark: #79281d;
  --ink: #18292b;
  --white: #fff;
  --focus: #ffcc4a;
  --rail: 250px;
  --mono: "Courier New", Courier, monospace;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--sand-light); font: 1rem/1.65 var(--serif); }
a { color: inherit; text-underline-offset: .28em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 30; padding: .7rem 1rem; color: var(--white); background: var(--deep); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.rail-header { position: fixed; inset: 0 auto 0 0; z-index: 10; width: var(--rail); display: flex; flex-direction: column; padding: 2rem; color: var(--white); background: var(--deep); border-right: 1px solid rgba(255,255,255,.3); }
.wordmark { font: 700 2.6rem/1 var(--serif); text-decoration: none; }
.rail-header__brand p, .meta, .record__tab, dt { font: 700 .72rem/1.45 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.rail-header__brand p { color: #c8ddda; }
.rail-nav { display: grid; margin-top: 4rem; border-top: 1px solid rgba(255,255,255,.3); }
.rail-nav a { min-height: 54px; display: grid; grid-template-columns: 2rem 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.3); font-family: var(--sans); text-decoration: none; }
.rail-nav a span { color: #9bc1bd; font: .72rem var(--mono); }
.rail-nav a:hover, .rail-nav a[aria-current="page"] { color: var(--focus); }
.rail-header__note { margin-top: auto; font-size: .8rem; }
.menu-button { display: none; }
.site-main { margin-left: var(--rail); }
.index-hero { min-height: 760px; display: grid; grid-template-columns: 180px minmax(0,1fr) 140px; border-bottom: 1px solid var(--ink); }
.index-hero__code { padding: 3rem 2rem; border-right: 1px solid var(--ink); font: .75rem/1.5 var(--mono); }
.index-hero__code span { writing-mode: vertical-rl; text-orientation: mixed; }
.index-hero__code b { display: block; margin-top: 2rem; color: var(--coral-dark); }
.index-hero__copy { align-self: end; max-width: 980px; padding: clamp(3rem,9vw,8rem); }
h1, h2, h3 { margin-top: 0; font-family: var(--serif); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
h1 { margin: 1rem 0 1.7rem; font-size: clamp(4rem,9vw,9.5rem); }
h2 { margin-bottom: 1.2rem; font-size: clamp(2.8rem,6.5vw,6.4rem); }
h3 { margin-bottom: .5rem; font-size: clamp(2rem,4vw,3.8rem); }
.lede { max-width: 680px; font-size: clamp(1.15rem,2vw,1.45rem); }
.editorial-link, .amazon-link { display: inline-block; min-height: 44px; padding-block: .65rem; font: 700 .9rem/1.3 var(--mono); text-transform: uppercase; }
.index-hero__marks { display: grid; grid-template-rows: repeat(4,1fr); border-left: 1px solid var(--ink); }
.index-hero__marks i { display: block; border-bottom: 1px solid var(--ink); background: var(--sand); }
.index-hero__marks i:nth-child(2) { background: var(--teal); }
.index-hero__marks i:nth-child(3) { background: var(--coral); }
.index-hero__marks i:last-child { background: var(--ink); border-bottom: 0; }
.site-boundary { display: grid; grid-template-columns: .4fr 1fr; gap: 3rem; padding: clamp(3rem,6vw,5rem); color: var(--white); background: var(--teal); border-bottom: 1px solid var(--ink); }
.site-boundary h2 { font-size: clamp(2.5rem,5vw,4.8rem); }
.site-boundary div { max-width: 850px; }
.catalogue { border-bottom: 1px solid var(--ink); }
.catalogue__header { display: grid; grid-template-columns: .35fr 1fr .8fr; gap: 3rem; align-items: end; padding: clamp(4rem,8vw,8rem) clamp(2rem,6vw,6rem); }
.catalogue__header h2 { margin: 0; }
.record { position: relative; display: grid; grid-template-columns: 90px 150px minmax(300px,1.2fr) minmax(210px,.65fr) 190px; gap: 2rem; align-items: center; padding: 2.5rem clamp(2rem,5vw,5rem); border-top: 1px solid var(--ink); }
.record[data-tone="teal"] { background: #d7e8e5; }
.record[data-tone="coral"] { background: #f4d7ce; }
.record[data-tone="dark"] { color: var(--white); background: var(--ink); }
.record__tab { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding-right: 1rem; border-right: 1px solid currentColor; }
.record__tab b { writing-mode: vertical-rl; }
.record-cover { aspect-ratio: 2/3; display: flex; flex-direction: column; justify-content: space-between; padding: .75rem; color: var(--white); background: var(--deep); border: 1px solid currentColor; }
.record[data-tone="coral"] .record-cover { background: var(--coral-dark); }
.record[data-tone="dark"] .record-cover { color: var(--ink); background: var(--sand); }
.record-cover span, .record-cover small { font: 700 .58rem/1.35 var(--mono); text-transform: uppercase; }
.record-cover strong { font: 700 1.25rem/.95 var(--serif); }
.record__subtitle { margin-top: 0; font-style: italic; }
.byline { font-weight: 700; }
details { margin-top: 1rem; }
summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 700 .78rem var(--mono); text-transform: uppercase; }
.record__facts { margin: 0; }
.record__facts div { padding: .45rem 0; border-bottom: 1px solid currentColor; }
.record__facts dd { margin: .15rem 0 0; }
.record__links { display: grid; gap: .5rem; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; }
.amazon-link { padding: .85rem; color: var(--white); background: var(--deep); border: 1px solid var(--deep); text-decoration: none; }
.record[data-tone="dark"] .amazon-link { color: var(--ink); background: var(--focus); border-color: var(--focus); }
.field-sequence { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(3rem,8vw,8rem); padding: clamp(5rem,9vw,9rem) clamp(2rem,6vw,6rem); background: var(--sand); }
.field-sequence ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.field-sequence li { display: grid; grid-template-columns: 130px 1fr; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--ink); }
.field-sequence li b { font-family: var(--mono); text-transform: uppercase; }
.edition-method { display: grid; grid-template-columns: .45fr 1fr; gap: clamp(3rem,8vw,8rem); align-items: center; padding: clamp(5rem,9vw,9rem) clamp(2rem,6vw,6rem); border-top: 1px solid var(--ink); }
.edition-method__figure { display: grid; place-items: center; aspect-ratio: 1; margin: 0; border: 1px solid var(--ink); color: var(--coral-dark); font: 700 clamp(2rem,6vw,6rem)/.75 var(--mono); text-align: center; }
.edition-method > div { max-width: 760px; }
.independent-note { padding: clamp(5rem,9vw,9rem) clamp(2rem, max(6vw, calc((100vw - var(--rail) - 900px)/2)), 12rem); color: var(--white); background: var(--deep); }
.independent-note p:last-child { max-width: 760px; font-size: 1.15rem; }
.page-intro { min-height: 600px; display: grid; align-content: end; padding: clamp(4rem,10vw,9rem) clamp(2rem,8vw,8rem); color: var(--white); background: var(--teal); border-bottom: 1px solid var(--ink); }
.page-intro h1 { max-width: 1050px; }
.page-intro > p:last-child { max-width: 720px; font-size: 1.25rem; }
.page-intro--standalone { min-height: 100vh; margin: 0; }
.text-grid { display: grid; grid-template-columns: 250px 1fr; gap: clamp(3rem,9vw,9rem); padding: clamp(5rem,9vw,9rem) clamp(2rem,8vw,8rem); }
.text-grid > aside { align-self: start; position: sticky; top: 2rem; padding: 1.25rem; border: 1px solid var(--ink); background: var(--sand); }
.text-grid > aside ol { margin: 1rem 0 0; padding-left: 1.5rem; }
.text-grid > aside li { padding: .35rem 0; }
.prose { max-width: 780px; }
.prose h2 { margin-top: 3.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.08rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.25rem clamp(1rem,4vw,4rem); border-bottom: 1px solid var(--ink); font: .78rem var(--mono); text-transform: uppercase; }
.dossier { display: grid; grid-template-columns: minmax(340px,.8fr) minmax(0,1.2fr); border-bottom: 1px solid var(--ink); }
.dossier__visual { position: sticky; top: 0; min-height: 760px; align-self: start; display: grid; place-items: center; align-content: center; gap: 2rem; padding: clamp(2rem,6vw,5rem); background: var(--sand); border-right: 1px solid var(--ink); }
.dossier[data-tone="teal"] .dossier__visual { background: #c9e0dd; }
.dossier[data-tone="coral"] .dossier__visual { background: #f1cfc5; }
.dossier[data-tone="dark"] .dossier__visual { background: var(--ink); color: var(--white); }
.dossier-cover { width: min(72%, 330px); aspect-ratio: 2/3; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; color: var(--white); background: var(--deep); border: 1px solid currentColor; }
.dossier[data-tone="coral"] .dossier-cover { background: var(--coral-dark); }
.dossier[data-tone="dark"] .dossier-cover { color: var(--ink); background: var(--sand); }
.dossier-cover span, .dossier-cover small { font: 700 .65rem/1.4 var(--mono); text-transform: uppercase; }
.dossier-cover strong { font: 400 clamp(2rem,5vw,4.4rem)/.92 var(--serif); }
.dossier__visual > p { max-width: 360px; margin: 0; font-size: .8rem; text-align: center; }
.dossier__body { position: relative; padding: clamp(4rem,8vw,8rem); }
.dossier__body h1 { margin: 1rem 0; font-size: clamp(3.6rem,7.5vw,7.5rem); }
.subtitle { max-width: 760px; font-size: clamp(1.15rem,2vw,1.5rem); font-style: italic; }
.dossier__essay { max-width: 760px; margin-block: 3rem; font-size: 1.1rem; }
.margin-note { max-width: 650px; display: grid; grid-template-columns: 110px 1fr; gap: 1rem; margin-block: 2.5rem; padding: 1.2rem; border-left: 8px solid var(--coral); background: var(--sand); }
.margin-note span { font: 700 .72rem var(--mono); }
.margin-note p { margin: 0; }
.facts { max-width: 760px; margin: 2.5rem 0; border-top: 1px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--ink); }
.facts dd { margin: 0; }
.external-note { max-width: 760px; display: grid; gap: 1rem; justify-items: start; padding: 1.5rem; color: var(--white); background: var(--teal); }
.external-note p { margin: 0; }
.external-note .amazon-link { color: var(--ink); background: var(--focus); }
.related { padding: clamp(4rem,8vw,7rem) clamp(2rem,8vw,8rem); background: var(--sand); }
.related h2 { margin-bottom: 1rem; }
.related p:last-child { max-width: 700px; }
.site-footer { margin-left: var(--rail); display: grid; grid-template-columns: 1.2fr 1fr .7fr 1fr; gap: 2.5rem; padding: 4rem clamp(2rem,6vw,6rem); color: var(--white); background: #102729; border-top: 1px solid rgba(255,255,255,.3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) {
  :root { --rail: 190px; }
  .rail-header { padding: 1.5rem; }
  .record { grid-template-columns: 60px 110px 1fr; }
  .record__facts, .record__links { grid-column: 3; }
  .catalogue__header { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .rail-header { position: sticky; inset: 0; width: auto; min-height: 72px; display: grid; grid-template-columns: 1fr auto; padding: 1rem; }
  .rail-header__brand p, .rail-header__note { display: none; }
  .menu-button { display: block; min-width: 52px; min-height: 44px; border: 1px solid var(--white); color: var(--white); background: transparent; font-family: var(--mono); }
  .rail-nav { display: none; grid-column: 1/-1; margin-top: 1rem; }
  .rail-nav.is-open { display: grid; }
  .site-main, .site-footer { margin-left: 0; }
  .index-hero { min-height: 680px; grid-template-columns: 1fr 70px; }
  .index-hero__code { display: none; }
  .index-hero__copy { padding: 4rem 1.25rem; }
  .site-boundary, .field-sequence, .edition-method { grid-template-columns: 1fr; }
  .text-grid, .dossier { grid-template-columns: 1fr; }
  .text-grid > aside, .dossier__visual { position: static; }
  .dossier__visual { min-height: 580px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .record { grid-template-columns: 40px 90px minmax(0,1fr); gap: 1rem; padding-inline: 1rem; }
  .record__main h3 { font-size: 2rem; }
  .record__main details { grid-column: 1/-1; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(3.7rem,19vw,5.7rem); }
  .record { grid-template-columns: 32px 72px minmax(0,1fr); }
  .record-cover strong { font-size: .85rem; }
  .record__subtitle { display: none; }
  .record__facts { grid-column: 2/-1; }
  .record__links { grid-column: 2/-1; }
  .field-sequence li { grid-template-columns: 1fr; gap: .25rem; }
  .site-footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) { .amazon-link, .menu-button { border: 2px solid ButtonText; } }