/* LandedRate: trade broadsheet.
   PT Serif for headings and body, PT Sans Narrow for labels, IBM Plex Mono for HTS numbers.
   Newsprint paper, black ink, one oxblood accent. Tabular figures everywhere numbers line up. */

:root {
  --paper: #f5f1e6;
  --paper-2: #ebe5d4;
  --paper-3: #e2dac5;
  --ink: #16130f;
  --ink-2: #37322a;
  --muted: #595246;
  --rule: #16130f;
  --rule-soft: #b3a88f;
  --accent: #7a1f1f;
  --accent-ink: #5e1616;
  --focus: #1f4e8c;
  --ok: #1d4d2b;
  --err: #7a1f1f;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --narrow: "PT Sans Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: lining-nums tabular-nums;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem); }
h3 { font-size: 1.15rem; }
code, .code { font-family: var(--mono); font-weight: 500; font-size: .92em; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--narrow); font-weight: 700; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 8px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* ---- Nameplate ---------------------------------------------------------- */
.nameplate { padding-top: 14px; }
.np-rule-top { border-top: 1px solid var(--rule); }
.np-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 14px 0 8px; }
.np-title {
  font-family: var(--serif); font-weight: 700; text-decoration: none; color: var(--ink);
  font-size: clamp(2.4rem, 1.4rem + 5vw, 4.6rem); line-height: 1; letter-spacing: -.02em;
}
.np-title:hover { color: var(--ink); }
.np-folio {
  border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px;
  padding: 6px 0; margin: 0; font-family: var(--narrow); font-size: .98rem; color: var(--ink-2);
}
.np-folio span { white-space: nowrap; }
.nav-toggle {
  display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--narrow); font-weight: 700; font-size: 1rem; background: transparent; color: var(--ink);
  border: 1px solid var(--rule); padding: 6px 12px; cursor: pointer;
}
.np-nav { display: flex; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid var(--rule); }
.np-nav a {
  font-family: var(--narrow); font-weight: 700; font-size: 1.05rem; text-decoration: none; padding: 8px 16px;
  border-left: 1px solid var(--rule-soft);
}
.np-nav a:first-child { border-left: 0; }
.np-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 759px) {
  .np-head { justify-content: flex-start; }
  .nav-toggle { display: block; }
  .js .np-nav { display: none; }
  .js .np-nav.is-open { display: flex; flex-direction: column; align-items: stretch; }
  .np-nav a { border-left: 0; border-top: 1px solid var(--rule-soft); padding: 11px 2px; }
  .np-nav a:first-child { border-top: 0; }
  .np-folio { justify-content: flex-start; font-size: .92rem; }
}

main { display: block; padding: 28px 0 48px; }

/* ---- Broadsheet columns --------------------------------------------------- */
.lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; border-bottom: 1px solid var(--rule); padding-bottom: 28px; }
.lead > * { padding: 0 28px; }
.lead > *:first-child { padding-left: 0; }
.lead > *:last-child { padding-right: 0; border-left: 1px solid var(--rule); }
.dek { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-3 > * { padding: 0 22px; border-left: 1px solid var(--rule-soft); }
.cols-3 > *:first-child { padding-left: 0; border-left: 0; }
.cols-3 > *:last-child { padding-right: 0; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-2 > * { padding: 0 24px; border-left: 1px solid var(--rule-soft); }
.cols-2 > *:first-child { padding-left: 0; border-left: 0; }
.cols-2 > *:last-child { padding-right: 0; }
.band { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.band:last-child { border-bottom: 0; }
.band > h2 { margin-bottom: .35em; }
.band-intro { max-width: 46em; color: var(--ink-2); }
.newspaper-cols { column-count: 3; column-gap: 36px; column-rule: 1px solid var(--rule-soft); }
.newspaper-cols > * { break-inside: avoid; }
@media (max-width: 899px) {
  .lead { grid-template-columns: minmax(0, 1fr); }
  .lead > * { padding: 0; }
  .lead > *:last-child { border-left: 0; border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 22px; }
  .cols-3, .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .cols-3 > *, .cols-2 > * { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--rule-soft); margin-top: 16px; }
  .cols-3 > *:first-child, .cols-2 > *:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
  .newspaper-cols { column-count: 2; }
}
@media (max-width: 599px) { .newspaper-cols { column-count: 1; } }

/* ---- Search box ------------------------------------------------------------ */
.searchbox { display: flex; gap: 0; margin: 18px 0 8px; max-width: 34em; }
.searchbox input {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 1rem; padding: 12px 12px; border: 2px solid var(--ink);
  border-right: 0; background: #fffdf7; color: var(--ink); border-radius: 0;
}
.searchbox button, .btn {
  font-family: var(--narrow); font-weight: 700; font-size: 1.08rem; background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); padding: 11px 18px; cursor: pointer; text-decoration: none; display: inline-block; border-radius: 0;
}
.searchbox button:hover, .btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn-quiet { background: transparent; color: var(--ink); }
.btn-quiet:hover { background: var(--paper-3); color: var(--ink); border-color: var(--ink); }
.hint { font-family: var(--narrow); font-size: 1rem; color: var(--muted); }

/* ---- Data sheet (the ruled line figure) ------------------------------------ */
.sheet { margin: 0; }
.sheet-title { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; margin: 0 0 6px; }
.sheet table { width: 100%; border-collapse: collapse; border-top: 3px double var(--rule); border-bottom: 2px solid var(--rule); }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--rule-soft); }
.sheet tr:last-child th, .sheet tr:last-child td { border-bottom: 0; }
.sheet th { font-family: var(--narrow); font-weight: 700; font-size: 1rem; width: 36%; color: var(--ink-2); }
.sheet td { font-size: 1rem; }
.sheet .rate { font-family: var(--mono); font-weight: 500; font-size: 1.02rem; }
.sheet figcaption, .caption { font-family: var(--narrow); font-size: .98rem; color: var(--muted); margin-top: 8px; }
.fnref { font-family: var(--narrow); font-weight: 700; font-size: .8em; vertical-align: super; line-height: 0; margin-left: 2px; }
.fnref a { text-decoration: none; }

/* ---- Tables of lines --------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0 6px; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); }
table.lines { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.lines caption { text-align: left; font-family: var(--narrow); color: var(--muted); padding: 6px 0; caption-side: bottom; }
table.lines th, table.lines td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--rule-soft); }
table.lines thead th { font-family: var(--narrow); font-weight: 700; font-size: .98rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.lines tr:last-child td { border-bottom: 0; }
table.lines td.num, table.lines th.num { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
table.lines td.rate { font-family: var(--mono); font-size: .9rem; min-width: 5.5em; }
table.lines td.special { font-family: var(--mono); font-size: .82rem; min-width: 12em; max-width: 22em; }
table.lines tr.sup td { color: var(--ink-2); font-style: italic; }
table.lines tr.is-self td { background: var(--paper-2); }
table.lines .ind { display: inline-block; }
@media (max-width: 759px) { table.lines { font-size: .9rem; } }

/* ---- Article (entity pages) --------------------------------------------------- */
.article-head { border-bottom: 1px solid var(--rule); padding-bottom: 18px; margin-bottom: 22px; }
.article-head h1 { max-width: 30em; }
.filed { font-family: var(--narrow); font-size: 1.02rem; color: var(--ink-2); margin: 10px 0 0; }
.filed a { color: var(--ink-2); }
.article { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.article > .main-col { padding-right: 28px; }
.article > aside { padding-left: 28px; border-left: 1px solid var(--rule); }
@media (max-width: 899px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .article > .main-col { padding-right: 0; }
  .article > aside { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 24px; padding-top: 20px; }
}
.section { margin: 30px 0 0; }
.section > h2 { font-size: 1.45rem; border-top: 1px solid var(--rule); padding-top: 14px; }
.footnotes { padding-left: 1.4em; margin: 8px 0 0; }
.footnotes li { margin-bottom: 8px; }
.footnotes .on { font-family: var(--narrow); color: var(--muted); }
.programs { list-style: none; padding: 0; margin: 8px 0 0; columns: 2; column-gap: 24px; }
.programs li { break-inside: avoid; margin-bottom: 6px; font-size: .96rem; }
.programs code { display: inline-block; min-width: 2.6em; }
@media (max-width: 599px) { .programs { columns: 1; } }

.notice { border: 1px solid var(--rule); border-left: 5px solid var(--ink); background: var(--paper-2); padding: 14px 16px; margin: 18px 0; }
.notice p:last-child { margin-bottom: 0; }
.notice h2, .notice h3 { font-size: 1.1rem; margin-bottom: .35em; border: 0; padding: 0; }
.watchbox { border: 2px solid var(--ink); padding: 16px; background: #fffdf7; margin-bottom: 20px; }
.watchbox h2 { font-size: 1.2rem; border: 0; padding: 0; margin-bottom: .3em; }
.watchbox p { font-size: .98rem; }
.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { border-top: 1px solid var(--rule-soft); padding: 8px 0; font-size: .96rem; }
.side-list li:first-child { border-top: 0; }
.side-list .num { font-family: var(--mono); font-weight: 500; }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--rule); margin-top: 30px; padding-top: 12px; font-family: var(--narrow); font-size: 1.02rem; }
.stamp { font-family: var(--narrow); color: var(--muted); font-size: .98rem; margin-top: 18px; }

/* ---- Alert clipping --------------------------------------------------------- */
.clipping { background: #fffdf7; border: 1px solid var(--rule); box-shadow: 4px 4px 0 var(--paper-3); padding: 18px 20px; }
.clipping h3 { font-family: var(--mono); font-weight: 500; font-size: 1.05rem; margin: 0 0 2px; }
.clipping table { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: 10px; }
.clipping th, .clipping td { text-align: left; vertical-align: top; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--rule-soft); }
.clipping thead th { font-family: var(--narrow); font-weight: 700; border-bottom: 2px solid var(--rule); }
.clipping td.was { color: var(--muted); }
.clipping td.now { font-weight: 700; }
.clipping td.was::before { content: "Was: "; font-family: var(--narrow); font-weight: 400; }
.clipping td.now::before { content: "Now: "; font-family: var(--narrow); font-weight: 400; }
@media (min-width: 600px) { .clipping td.was::before, .clipping td.now::before { content: none; } }
@media (max-width: 599px) {
  .clipping thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .clipping tr, .clipping td { display: block; }
  .clipping td { border-bottom: 0; padding: 3px 0; }
  .clipping tr { border-bottom: 1px solid var(--rule-soft); padding: 6px 0; }
}

/* ---- Facts row ----------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 24px 0 0; }
.facts > div { padding: 10px 14px; border-left: 1px solid var(--rule-soft); }
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts b { display: block; font-family: var(--serif); font-size: 1.55rem; line-height: 1.1; }
.facts span { font-family: var(--narrow); font-size: 1rem; color: var(--ink-2); }
@media (max-width: 759px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
}

/* ---- Pricing ---------------------------------------------------------------------- */
table.plans { width: 100%; border-collapse: collapse; border-top: 3px double var(--rule); border-bottom: 2px solid var(--rule); }
table.plans th, table.plans td { padding: 12px 12px 12px 0; text-align: left; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
table.plans thead th { font-size: 1.35rem; font-family: var(--serif); }
table.plans tbody th { font-family: var(--narrow); font-weight: 700; color: var(--ink-2); width: 34%; }
table.plans .price { font-size: 1.5rem; font-weight: 700; }

/* ---- Forms -------------------------------------------------------------------------- */
.form { max-width: 40em; }
.field { margin: 0 0 18px; }
.field label, .field legend { display: block; font-family: var(--narrow); font-weight: 700; font-size: 1.08rem; margin-bottom: 6px; }
.field .help { font-family: var(--narrow); color: var(--muted); font-size: 1rem; margin: 4px 0 0; }
.field input[type=email], .field input[type=text], .field textarea {
  width: 100%; font-size: 1rem; padding: 10px 12px; border: 2px solid var(--ink); background: #fffdf7; color: var(--ink); border-radius: 0;
}
.field textarea { font-family: var(--mono); min-height: 8.5em; }
.field input[type=text] { font-family: var(--mono); }
fieldset.field { border: 0; padding: 0; margin: 0 0 18px; }
.choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--rule-soft); padding: 10px 12px; margin-bottom: 8px; background: #fffdf7; cursor: pointer; }
.choice input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--ink); }
.choice b { font-family: var(--serif); }
.status { font-family: var(--narrow); font-size: 1.05rem; padding: 10px 12px; border: 1px solid var(--rule); margin: 12px 0; }
.status[hidden] { display: none; }
.status.ok { border-left: 5px solid var(--ok); }
.status.err { border-left: 5px solid var(--err); }
.status.ok::before { content: "Done: "; font-weight: 700; }
.status.err::before { content: "Problem: "; font-weight: 700; }
.watchlist { list-style: none; padding: 0; margin: 0 0 12px; border-top: 2px solid var(--rule); }
.watchlist li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--rule-soft); padding: 8px 0; }
.watchlist .num { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.watchlist .what { flex: 1; font-size: .95rem; color: var(--ink-2); }
.watchlist button { font-family: var(--narrow); font-weight: 700; background: transparent; border: 1px solid var(--ink); padding: 4px 10px; cursor: pointer; color: var(--ink); }
.addrow { display: flex; gap: 0; max-width: 30em; }
.addrow input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 1rem; padding: 10px 12px; border: 2px solid var(--ink); border-right: 0; background: #fffdf7; border-radius: 0; }
.panel[hidden] { display: none; }

/* ---- Search results ------------------------------------------------------------------ */
.results { list-style: none; padding: 0; margin: 12px 0 0; border-top: 2px solid var(--rule); }
.results li { border-bottom: 1px solid var(--rule-soft); padding: 9px 0; display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; }
.results .num { font-family: var(--mono); font-weight: 500; }
.results .kind { font-family: var(--narrow); color: var(--muted); display: block; font-size: .95rem; }
@media (max-width: 599px) { .results li { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Index lists ------------------------------------------------------------------------ */
.toc h3 { font-size: 1.02rem; margin: 0 0 6px; }
.toc ul { list-style: none; padding: 0; margin: 0 0 18px; }
.toc li { margin: 0 0 5px; font-size: .96rem; line-height: 1.4; }
.toc .num { font-family: var(--mono); font-weight: 500; margin-right: 6px; }
.prose { max-width: 44em; }
.prose h2 { margin-top: 1.4em; border-top: 1px solid var(--rule); padding-top: 14px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ol.timeline { padding-left: 0; }
.prose li { margin-bottom: .5em; }
.timeline { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 14px; border-bottom: 1px solid var(--rule-soft); padding: 12px 0; }
.timeline time { font-family: var(--narrow); font-weight: 700; }
@media (max-width: 599px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }
details.more summary { cursor: pointer; font-family: var(--narrow); font-weight: 700; }

/* ---- Footer (colophon) ------------------------------------------------------------------- */
.colophon { border-top: 3px double var(--rule); padding: 22px 0 34px; font-size: .95rem; }
.colophon-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); }
.colophon-grid > * { padding: 0 22px; border-left: 1px solid var(--rule-soft); }
.colophon-grid > *:first-child { padding-left: 0; border-left: 0; }
.colophon-name { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; margin: 0 0 6px; }
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { margin: 0 0 6px; font-family: var(--narrow); font-size: 1.05rem; }
.colophon .company { border-top: 1px solid var(--rule-soft); margin-top: 18px; padding-top: 12px; color: var(--ink-2); font-size: .92rem; }
@media (max-width: 759px) {
  .colophon-grid { grid-template-columns: minmax(0, 1fr); }
  .colophon-grid > * { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--rule-soft); margin-top: 14px; }
  .colophon-grid > *:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
}
table.lines td.desc { min-width: 15em; }
table.lines td.special { max-width: 16em; font-size: .8rem; }

/* Rate strings like "Free (A+,AU,B,BH,...)" have no spaces to break at. */
.sheet td, .rate, td.special, .clipping td, .watchlist .what { overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .sheet th { width: 32%; }
  .searchbox button { padding: 11px 12px; }
}