/* Chain Reader — a specimen on drafting paper. Layers: fonts, tokens, base, masthead,
   hero/band, specimen table, legend, notes, sketches, tables, footer, narrow. */

@font-face { font-family: "Plex Cond"; src: url("fonts/ibm-plex-sans-condensed-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Plex Cond"; src: url("fonts/ibm-plex-sans-condensed-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Cond"; src: url("fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Plex Cond"; src: url("fonts/ibm-plex-sans-condensed-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Cond"; src: url("fonts/ibm-plex-sans-condensed-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212; }
@font-face { font-family: "Plex Serif"; src: url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212; }
@font-face { font-family: "Plex Serif"; src: url("fonts/ibm-plex-serif-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plex Serif"; src: url("fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #f6fafa;
  --grid: #e1eeee;
  --grid-strong: #cfe2e2;
  --ink: #14212b;
  --ink-soft: #4d5d68;
  --call: #00708a;
  --call-tint: #dcf0f3;
  --put: #7a3b69;
  --put-tint: #f3e3ee;
  --hl: #ffe14d;
  --strike: #14212b;

  --cond: "Plex Cond", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --serif: "Plex Serif", Georgia, serif;
  --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --h1: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  --h2: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-wrap: break-word; -webkit-text-size-adjust: 100%; scroll-padding-block-start: 1rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; color: var(--ink); font: 400 1.0625rem/1.6 var(--cond);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; }
p, ul, ol, figure, table { margin: 0; }
a { color: var(--call); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) and (pointer: fine) { a:hover { background: var(--hl); color: var(--ink); } }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--hl); border-radius: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -3rem; background: var(--ink); color: #fff; padding: 0.5rem 0.9rem; z-index: 5; }
.skip:focus { inset-block-start: 1rem; }
.kicker { font: 600 0.8rem/1.2 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--call); margin-block-end: 0.5rem; }

/* Masthead */
.mast { background: var(--ink); color: #fff; }
.mast-inner { max-width: 84rem; margin-inline: auto; padding: 0.85rem var(--gap); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 2rem; }
.logo { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center; text-decoration: none; color: #fff; }
.logo-mark { grid-row: span 2; inline-size: 2rem; block-size: 2rem; border-radius: 3px; background: linear-gradient(90deg, transparent 42%, var(--hl) 42% 58%, transparent 58%), repeating-linear-gradient(#2e4a5c 0 2px, transparent 2px 8px); border: 1px solid #2e4a5c; }
.logo-text { font: 600 1.35rem/1.05 var(--serif); }
.logo-sub { font-size: 0.82rem; color: #a9c3cb; }
.cols ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; }
.cols a { color: #e6f1f3; text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 0.25rem 0.1rem; border-block-end: 3px solid transparent; }
.cols a[aria-current="page"] { border-block-end-color: var(--hl); color: #fff; }
@media (hover: hover) and (pointer: fine) { .cols a:hover { background: transparent; color: var(--hl); } }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; font: 600 0.85rem/1 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--hl); padding: 0.65rem 0.9rem; border-radius: 3px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " +"; }
.menu[open] summary::after { content: " −"; }
.menu .cols ul { flex-direction: column; gap: 0; padding-block-start: 0.5rem; }
.menu .cols a { display: block; padding-block: 0.6rem; border-block-end: 1px solid #2e4a5c; font-size: 1.05rem; }

/* Hero and section band */
.hero-inner, .band-inner { max-width: 84rem; margin-inline: auto; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) var(--gap) 1.25rem; }
.hero h1, .band h1 { font-size: var(--h1); letter-spacing: -0.01em; }
.lede { font: 400 1.15rem/1.55 var(--serif); max-inline-size: 44rem; margin-block-start: 0.9rem; }
.strip { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block-start: 1.25rem; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.strip span { background: #fff; border: 1px solid var(--grid-strong); padding: 0.2rem 0.6rem; border-radius: 2px; }
.strip .inv { background: var(--hl); border-color: var(--hl); font-weight: 600; }
.band-spec { max-width: 84rem; margin-inline: auto; padding: 0 var(--gap) 1.5rem; }

/* Specimen table */
.specimen { max-width: 84rem; margin-inline: auto; padding: 0 var(--gap) 2rem; }
.spec-wrap { position: relative; overflow-x: auto; background: #fff; border: 1px solid var(--grid-strong); box-shadow: 0 10px 30px -22px rgba(20, 33, 43, 0.6); }
.spec-wrap:focus-visible { box-shadow: 0 0 0 4px var(--hl); }
.spec-wrap.fit { inline-size: fit-content; max-inline-size: 100%; margin-inline: auto; }
.spec-wrap.fit .spec { inline-size: auto; }
.spec-wrap.fit .spec td:not(.side):not(.gap), .spec-wrap.fit .spec thead tr:not(.sides) th:not(.c-strike) { min-inline-size: 6.5rem; padding-inline: 1rem; }
.spec-wrap.fit .spec .c-strike { padding-inline: 1.4rem; }
.spec { border-collapse: collapse; inline-size: 100%; font-size: 0.95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spec-cap { font-size: 0.88rem; color: var(--ink-soft); margin-block-start: 0.5rem; text-align: center; }
.spec th, .spec td { padding: 0.45rem 0.6rem; text-align: end; border-block-end: 1px solid var(--grid); }
.spec thead th { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; vertical-align: bottom; color: var(--ink-soft); }
.spec .marks td { padding-block: 0.5rem 0; border: 0; text-align: end; }
.spec .marks td.c-strike { text-align: center; }
.spec .sides th { font: 600 0.82rem/1 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; padding-block: 0.6rem; text-align: center; color: #fff; }
.spec .calls-h { background: var(--call); }
.spec .puts-h { background: var(--put); }
.spec .gap { background: var(--strike); padding: 0; }
.spec .side { inline-size: 0.35rem; padding: 0; }
.spec .side.call.itm { background: var(--call); }
.spec .side.put.itm { background: var(--put); }
.spec td[data-side="call"].itm { background: var(--call-tint); }
.spec td[data-side="put"].itm { background: var(--put-tint); }
.spec .c-strike { background: var(--strike); color: #fff; text-align: center; font-weight: 600; position: relative; }
.spec thead .c-strike { color: #fff; }
.spec tr.atm th.c-strike { background: var(--hl); color: var(--ink); }
.spec tr.atm td { border-block: 2px solid var(--ink); }
.spec .c-chg, .spec .c-oichg { color: var(--ink-soft); }
.mark { display: inline-grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; background: var(--hl); color: var(--ink); font: 600 0.8rem/1 var(--cond); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .mark:hover { background: var(--ink); color: var(--hl); } }
.swipe { display: none; font-size: 0.88rem; color: var(--ink-soft); margin-block-start: 0.25rem; text-align: center; }

/* Column highlight from the legend (no script): the targeted note lights its column */
body:has(#col-oi:target) .spec .c-oi, body:has(#col-oichg:target) .spec .c-oichg, body:has(#col-vol:target) .spec .c-vol,
body:has(#col-iv:target) .spec .c-iv, body:has(#col-ltp:target) .spec .c-ltp, body:has(#col-chg:target) .spec .c-chg,
body:has(#col-bid:target) .spec .c-bid, body:has(#col-ask:target) .spec .c-ask { background: var(--hl); color: var(--ink); }
body:has(#col-strike:target) .spec .c-strike { box-shadow: inset 0 0 0 3px var(--hl); }

.legend { list-style: none; padding: 0; margin-block-start: 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.4rem 1.5rem; }
.legend li { display: grid; grid-template-columns: 1.8rem 1fr; column-gap: 0.5rem; align-items: baseline; padding: 0.35rem 0.5rem; border-radius: 3px; }
.legend li:target { background: #fff; box-shadow: inset 4px 0 0 var(--hl); }
.legend .ln { grid-row: span 2; display: grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; background: var(--hl); font-weight: 600; font-size: 0.85rem; }
.legend .ln.sh { border-radius: 2px; background: linear-gradient(90deg, var(--call-tint) 50%, var(--put-tint) 50%); border: 1px solid var(--grid-strong); }
.legend a { font-weight: 600; }
.legend .lm { color: var(--ink-soft); font-size: 0.93rem; }

.index-lower { max-width: 84rem; margin-inline: auto; padding: 1rem var(--gap) 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 2rem 4rem; }
.index-lower section { background: #fff; border: 1px solid var(--grid-strong); padding: 1.25rem 1.4rem; }
.index-lower section > * + * { margin-block-start: 0.8rem; }
.index-lower h2, .prose h2 { font-size: var(--h2); }
.route { padding-inline-start: 1.4rem; display: grid; gap: 0.35rem; font-weight: 600; }
.route li::marker { color: var(--call); }
.nots { padding-inline-start: 1.2rem; display: grid; gap: 0.35rem; }

/* Notes (section pages) */
.read { max-width: 60rem; margin-inline: auto; padding: 0.5rem var(--gap) 3rem; }
.note { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1.6rem; border-block-start: 1px solid var(--grid-strong); }
.note-n { justify-self: start; display: grid; place-items: center; min-inline-size: 2.2rem; block-size: 2.2rem; padding-inline: 0.4rem; border-radius: 1.1rem; background: var(--hl); font-weight: 600; }
.note-n.alt { background: #fff; border: 2px solid var(--ink); font-size: 0.9rem; }
.note-n.blank { inline-size: 0.9rem; min-inline-size: 0; block-size: 0.9rem; border-radius: 1px; margin-block-start: 0.55rem; background: var(--ink); }
.note-b > * + * { margin-block-start: 0.85rem; }
.note-b h2 { font-size: var(--h2); }
.note-b p, .note-b ul { max-inline-size: 42rem; }
.note-b ul { padding-inline-start: 1.2rem; display: grid; gap: 0.3rem; }
.evidence { margin-block-start: 2rem; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--grid-strong); border-inline-start: 5px solid var(--put); }
.evidence > * + * { margin-block-start: 0.5rem; }
.prose > * + * { margin-block-start: 1rem; }
.prose h2 { margin-block-start: 2rem; }
.prose p { max-inline-size: 44rem; }
.pills { list-style: none; padding: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pills a { display: inline-block; padding: 0.45rem 0.9rem; background: #fff; border: 1px solid var(--grid-strong); border-radius: 2rem; text-decoration: none; font-weight: 600; }

/* Plain table (value page) */
.tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--grid-strong); }
.plain { border-collapse: collapse; inline-size: 100%; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.plain caption { caption-side: bottom; text-align: start; padding: 0.55rem 0.75rem; font-size: 0.88rem; color: var(--ink-soft); }
.plain th, .plain td { padding: 0.45rem 0.7rem; text-align: end; border-block-end: 1px solid var(--grid); white-space: nowrap; }
.plain thead th { font-size: 0.8rem; color: var(--ink-soft); white-space: normal; vertical-align: bottom; }
.plain tbody th { text-align: start; }

/* Sketches */
.fig { padding: 0.9rem 1rem; background: #fff; border: 1px solid var(--grid-strong); max-inline-size: 30rem; }
.fig figcaption { font-size: 0.9rem; color: var(--ink-soft); margin-block-start: 0.4rem; }
.sk { display: block; inline-size: 100%; block-size: auto; }
.sk .lbl { font: 600 17px var(--cond); fill: var(--ink); }
.sk .lbl.strong { font-size: 19px; }
.sk .lbl.muted, .sk .muted { fill: var(--ink-soft); font-weight: 400; }
.sk .tickline, .sk .axisl { stroke: var(--ink); stroke-width: 1.25; }
.sk .call-t { font: 600 18px var(--cond); fill: var(--call); }
.sk .put-t { font: 600 18px var(--cond); fill: var(--put); }
.sk .spot { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; }
.sk .spot-tag { fill: var(--hl); }
.sk .spot-t { font: 600 17px var(--cond); fill: var(--ink); }
.sk .band { fill: var(--hl); opacity: 0.8; }
.sk .pin { stroke: var(--ink); stroke-width: 1.5; }
.sk .cbar { fill: var(--call-tint); stroke: var(--call); stroke-width: 1.25; }
.sk .pbar { fill: var(--put-tint); stroke: var(--put); stroke-width: 1.25; }
.sk .curve { fill: none; stroke: var(--call); stroke-width: 2.5; stroke-linejoin: round; }
.sk .dot { fill: var(--hl); stroke: var(--ink); stroke-width: 1.5; }

/* Footer */
.foot { background: var(--ink); color: #cfdde2; margin-block-start: 1rem; }
.foot-inner { max-width: 84rem; margin-inline: auto; padding: 1.5rem var(--gap) 2rem; display: grid; gap: 0.55rem; font-size: 0.92rem; }
.foot strong { color: #fff; font-family: var(--serif); }
.foot a { color: var(--hl); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { background: transparent; color: #fff; } }

@media (max-width: 47.99rem) {
  .wide-nav { display: none; }
  .menu { display: block; flex-basis: 100%; }
  .swipe { display: block; }
  .spec-wrap.fit .spec td:not(.side):not(.gap), .spec-wrap.fit .spec thead tr:not(.sides) th:not(.c-strike) { min-inline-size: 0; padding-inline: 0.55rem; }
  .spec-wrap.fit .spec .c-strike { padding-inline: 0.7rem; }
  .note { grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 0.7rem; }
}