@font-face { font-family: "Old Standard"; src: url("../fonts/old-standard-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard"; src: url("../fonts/old-standard-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Old Standard"; src: url("../fonts/old-standard-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Drawing bond, india ink, examiner's red. Dark scheme: the photostat negative. */
:root {
  --paper: #fafaf7;
  --ink: #17150f;
  --ink-soft: #4a463c;
  --red: #c42a1c;
  --rule: 1.5px;
  --gutter: clamp(12px, 2.2vw, 30px);
  --lh: 1.75rem;
  --serif: "Old Standard", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  color-scheme: light;
}
/* data-theme="light" or "dark" on <html> in index.html overrides the OS setting;
   remove it to follow the OS. index.html currently pins light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0e0d;
    --ink: #eceae2;
    --ink-soft: #b9b5aa;
    --red: #ff6b57;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e0e0d;
  --ink: #eceae2;
  --ink-soft: #b9b5aa;
  --red: #ff6b57;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scrollbar-color: var(--ink) var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: var(--lh);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--red); color: var(--paper); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--paper); border-radius: 0; }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--red); }
:focus-visible { outline: 1.5px dashed var(--red); outline-offset: 3px; }

h1, h2 { font-weight: 400; margin: 0; text-wrap: balance; }

/* ---------- drawing sheets ---------- */
.sheet {
  position: relative;
  margin: var(--gutter);
  border: var(--rule) solid var(--ink);
  min-height: calc(100svh - 2 * var(--gutter));
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1.4vw, 20px) clamp(12px, 1.8vw, 26px);
}
.sheet::before { /* inner margin rule, as on a drawing sheet */
  content: "";
  position: absolute;
  inset: 5px;
  border: 0.5px solid var(--ink);
  opacity: 0.45;
  pointer-events: none;
}
.sheet-band {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 1rem;
}
.mark { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.92rem; }
.sheet-no { font-style: italic; }
.band-place { font-style: italic; color: var(--ink-soft); display: none; }

.sheet-lead { position: relative; z-index: 2; margin-top: clamp(0.5rem, 2vh, 1.5rem); pointer-events: none; }
h1 {
  font-size: clamp(2.5rem, 5.6vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
  max-width: 12.5ch;
}
.lead-claim { margin: 1.1rem 0 0; max-width: 30ch; font-size: clamp(1.15rem, 1.45vw, 1.4rem); line-height: 1.4; text-wrap: pretty; }
.inventor-line { margin: 0.9rem 0 0; font-style: italic; color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- figures ---------- */
.fig { margin: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.stage {
  position: relative;
  flex: 1;
  min-height: clamp(320px, 62vh, 900px);
  cursor: grab;
  touch-action: pan-y;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.sheet--first .stage { touch-action: none; }
.stage.is-turning, .stage.is-holding { cursor: grabbing; }
.stage--grab.is-grabbable { cursor: grab; }
.fig-gl, .fig-ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fig-ov { pointer-events: none; }
.fallback { display: none; margin: auto; max-width: 34ch; text-align: center; font-style: italic; }
.no-gl .stage { display: none; }
.no-gl .fallback { display: block; }
.no-gl .controls { display: none; }

figcaption {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
}
.fig-no { white-space: nowrap; font-style: italic; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: 0.01em; }
.fig-hint { font-style: italic; color: var(--ink-soft); font-size: 1rem; }
.controls { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }

button {
  font: italic 1rem/1 var(--serif);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.5em 0.95em 0.55em;
  min-height: 2.5rem;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms;
}
button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
button:active:not(:disabled) { background: var(--red); border-color: var(--red); color: var(--paper); }
button:disabled { cursor: default; color: var(--ink-soft); border-color: currentColor; opacity: 0.55; }

/* Wide screens: the title sits in the figure's open upper right. */
@media (min-width: 1000px) {
  .sheet--first .sheet-lead { position: absolute; top: clamp(3.25rem, 7vh, 5.25rem); right: clamp(2rem, 4.5vw, 5rem); max-width: 46%; margin: 0; }
  .sheet--first h1 { font-size: clamp(2.5rem, 5vw, 5.25rem); max-width: 15ch; }
  .sheet--first .inventor-line { display: none; }
  .band-place { display: inline; }
  .sheet--first .sheet-band { display: grid; grid-template-columns: 1fr auto 1fr; }
  .sheet--first .sheet-no { justify-self: end; }
  .sheet--first .fig { margin-top: 0.5rem; }
}

/* ---------- drawings: small sheets in a grid ---------- */
.plate-set { max-width: 76rem; margin: calc(var(--lh) * 3) auto; padding-inline: var(--gutter); }
.plate-set > h2, .refs h2 { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
.plate-set > h2 { margin-bottom: calc(var(--lh) * 1.5); }
.plates {
  --plate-gap: clamp(1.5rem, 3vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--lh) * 2.5) var(--plate-gap);
}
.plate { flex: 0 1 22rem; min-width: 0; display: flex; flex-direction: column; }
/* Wide screens: always three across; the last row of two stays centered. */
@media (min-width: 1000px) {
  .plate { flex-basis: calc((100% - 2 * var(--plate-gap)) / 3 - 0.5px); }
}
.sheet--plate {
  margin: 0;
  min-height: 0;
  aspect-ratio: 4 / 5;
  padding: 12px 14px 10px;
}
.sheet--plate .sheet-band { font-size: 0.92rem; }
.sheet--plate .mark { font-size: 0.8rem; }
h3.mark { margin: 0; line-height: inherit; }
.sheet--plate .stage, .viewer .stage { flex: 1; height: auto; min-height: 0; }
/* One caption grid for the plate and the enlarged sheet, so nothing moves between them;
   the enlarged sheet only reveals the hint and the figure's own controls. */
.sheet--plate figcaption { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no hint controls"; padding-top: 0.25rem; }
.sheet--plate .fig-no { grid-area: no; font-size: 1.55rem; }
.sheet--plate .fig-hint { grid-area: hint; padding-left: 1.5rem; }
.sheet--plate .controls { grid-area: controls; }
.sheet--plate .fig-hint, .sheet--plate [data-act] { display: none; }
.sheet--plate .stage:not(.is-turning) { cursor: zoom-in; }
.plate-text {
  margin: calc(var(--lh) * 0.75) 0 0;
  font-size: 1rem;
  line-height: 1.6rem;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.plate-placeholder { aspect-ratio: 4 / 5; }

/* The enlarged drawing: the same sheet, full screen. */
html:has(.viewer[open]) { overflow: hidden; }
.viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: calc(var(--gutter) + env(safe-area-inset-top, 0px)) calc(var(--gutter) + env(safe-area-inset-right, 0px)) calc(var(--gutter) + env(safe-area-inset-bottom, 0px)) calc(var(--gutter) + env(safe-area-inset-left, 0px));
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
/* While the sheet grows or shrinks, the page stays in view around it. */
.viewer::backdrop { background: transparent; }
.viewer.is-settled, .viewer.is-settled::backdrop { background: var(--paper); }
.viewer .sheet--plate { aspect-ratio: auto; height: 100%; background: var(--paper); }
/* While it grows or shrinks (is-small marks the plate's sizes), the sheet's padding and
   type ease between the plate's sizes and these, in step with the motion. */
.viewer .sheet--plate, .viewer .sheet--plate .sheet-band, .viewer .sheet--plate .mark, .viewer .sheet--plate figcaption, .viewer .sheet--plate .fig-no {
  transition-property: padding, font-size;
  transition-duration: var(--travel, 380ms);
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.viewer .sheet--plate:not(.is-small) { padding: clamp(10px, 1.4vw, 20px) clamp(12px, 1.8vw, 26px); }
.viewer .sheet--plate:not(.is-small) .sheet-band { font-size: 1rem; }
.viewer .sheet--plate:not(.is-small) .mark { font-size: 0.92rem; }
.viewer .sheet--plate:not(.is-small) figcaption { padding-top: 0.5rem; }
.viewer .sheet--plate:not(.is-small) .fig-no { font-size: clamp(1.7rem, 2.6vw, 2.5rem); }
.viewer.is-settled .sheet--plate .fig-hint { display: block; }
.viewer.is-settled .sheet--plate [data-act] { display: inline-block; }
.viewer .sheet--plate .stage:not(.is-turning) { cursor: grab; }

/* ---------- specification text ---------- */
.spec { margin: calc(var(--lh) * 3) auto calc(var(--lh) * 3); padding-inline: var(--gutter); max-width: 66rem; }
.spec-body { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 40rem); justify-content: center; line-height: var(--lh); }
.spec-body--two { grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr); }
.gutter { position: relative; font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: lining-nums; text-align: center; }
.spec--one .gutter { text-align: left; }
.gutter span { position: absolute; left: 0; right: 0; line-height: var(--lh); }
.spec--one .gutter span { right: auto; }
.col > * { margin: 0; }
.col p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.col p + p { text-indent: 2em; }
.col-no { text-align: center; font-size: 0.95rem; height: var(--lh); }
.col h2 {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: var(--lh);
  margin-top: var(--lh);
}
.col .col-no + h2 { margin-top: 0; }
.drawings, .claims { margin: 0; padding: 0; list-style: none; }
.drawings li { text-indent: 2em; text-align: justify; hyphens: auto; }
.claims { counter-reset: claim; }
.claims li { counter-increment: claim; text-indent: 2em; text-align: justify; hyphens: auto; }
.claims li::before { content: counter(claim) ". "; }
.claims-intro { text-indent: 2em; }
.aside { font-style: italic; color: var(--ink-soft); text-indent: 2em; }
.ref {
  font-style: italic;
  white-space: nowrap;
  text-decoration: underline dotted 1px;
  text-underline-offset: 0.22em;
  cursor: default;
  transition: color 120ms;
}
.ref:hover, .ref:focus-visible { color: var(--red); }
.inventors { margin: 0; }
.inventors dt { font-weight: 700; text-indent: 2em; }
.inventors dd { margin: 0 0 var(--lh); text-align: justify; hyphens: auto; }
.inventors dd:last-child { margin-bottom: 0; }

/* ---------- references cited ---------- */
.refs { max-width: 66rem; margin: calc(var(--lh) * 2) auto calc(var(--lh) * 3); padding-inline: var(--gutter); }
.refs h2 { margin-bottom: calc(var(--lh) * 0.5); }
.refs-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 34rem; }
thead th { font-weight: 400; font-style: italic; text-align: left; padding: 0.35rem 1rem 0.35rem 0; border-top: var(--rule) solid var(--ink); border-bottom: 0.5px solid var(--ink); }
tbody td { padding: 0.45rem 1rem 0.45rem 0; vertical-align: baseline; }
tbody tr:last-child td { border-bottom: var(--rule) solid var(--ink); }
td:first-child { white-space: nowrap; }
td:last-child, th:last-child { text-align: right; padding-right: 0; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }

.colophon {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  padding: calc(var(--lh) * 1.5) var(--gutter) calc(var(--lh) * 2 + env(safe-area-inset-bottom, 0px));
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ---------- narrow screens ---------- */
@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  .spec-body--two { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .spec-body--two .col:last-child { grid-column: 2; margin-top: var(--lh); }
  .spec-body--two .gutter { grid-column: 1; grid-row: 1 / span 2; text-align: left; }
  .spec-body--two .gutter span { right: auto; }
  .spec-body { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .col-no { text-align: left; }
  figcaption { grid-template-columns: 1fr auto; grid-template-areas: "no controls" "hint hint"; row-gap: 0.4rem; }
  .fig-no { grid-area: no; }
  .controls { grid-area: controls; }
  .fig-hint { grid-area: hint; font-size: 0.95rem; }
  .sheet { min-height: 0; }
  .stage { flex: none; min-height: 0; height: min(66svh, 120vw); }
  .sheet--first .stage { height: min(54svh, 104vw); }
  .viewer.is-settled .sheet--plate .fig-hint { display: none; }
  h1 { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  table { min-width: 0; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: 0.5rem 0; border-top: 0.5px solid var(--ink); }
  tbody tr:first-child { border-top: var(--rule) solid var(--ink); }
  tbody td { padding: 0; }
  tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--ink-soft); }
  tbody tr:last-child td { border-bottom: 0; }
  tbody tr:last-child { border-bottom: var(--rule) solid var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  button, .ref, .viewer .sheet--plate, .viewer .sheet--plate * { transition: none; }
}