/* Bow and Transom, the weekly (marinamagazine.org) v1.2.0: "Chart room". Own design system, not derived from the Lettering
   Desk (app.css, scoped under .desk) or any sibling site. Chart paper and ink, sounding blue for depth, port red and starboard
   green as section signals, brass hairlines. Faces (self-hosted, SIL OFL 1.1, unused elsewhere in the portfolio on 2026-10-27):
   Taviraj (display), Andada Pro (text), Anek Latin (labels), Victor Mono (figures). No inline styles: the CSP forbids them. */
@font-face { font-family: "Taviraj"; src: url("fonts/taviraj-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Taviraj"; src: url("fonts/taviraj-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Taviraj"; src: url("fonts/taviraj-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Taviraj"; src: url("fonts/taviraj-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Andada Pro"; src: url("fonts/andada-pro-latin-wght-normal.woff2") format("woff2"); font-weight: 400 840; font-style: normal; font-display: swap; }
@font-face { font-family: "Andada Pro"; src: url("fonts/andada-pro-latin-wght-italic.woff2") format("woff2"); font-weight: 400 840; font-style: italic; font-display: swap; }
@font-face { font-family: "Anek Latin"; src: url("fonts/anek-latin-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Victor Mono"; src: url("fonts/victor-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }

:root {
  --paper: #f5f2ea; --paper-2: #ece6d8; --surface: #fbf9f3; --ink: #0d1b2a; --ink-2: #3a4756; --rule: #cfc4ac;
  --blue: #2c5d7c; --red: #b3261e; --green: #2e6b4f; --brass: #9a7b3f; --brass-text: #6f5520; --brass-soft: #efe4cb;
  --band: #0d1b2a; --band-ink: #e9e4d8; --band-mute: #c9c2b2; --foot: #0a1520; --mark-hi: #ffe9a8;
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170' viewBox='0 0 260 170'%3E%3Cg fill='none' stroke='%232c5d7c' stroke-opacity='.12' stroke-width='1'%3E%3Cpath d='M-10 28C40 8 86 48 136 28S226 6 270 30'/%3E%3Cpath d='M-10 62C44 40 92 84 146 60S228 42 270 66'/%3E%3Cpath d='M-10 98C52 74 96 120 156 94S230 80 270 102'/%3E%3Cpath d='M-10 134C44 114 104 156 160 130S232 116 270 138'/%3E%3C/g%3E%3Cg fill='%232c5d7c' fill-opacity='.18' font-family='monospace' font-size='9'%3E%3Ctext x='38' y='46'%3E7%3C/text%3E%3Ctext x='198' y='84'%3E12%3C/text%3E%3Ctext x='112' y='150'%3E9%3C/text%3E%3C/g%3E%3C/svg%3E");
  --f-disp: "Taviraj", "Iowan Old Style", Georgia, serif;
  --f-text: "Andada Pro", Georgia, "Times New Roman", serif;
  --f-ui: "Anek Latin", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-data: "Victor Mono", ui-monospace, Menlo, Consolas, monospace;
  --w: 1200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1622; --paper-2: #0f1d2c; --surface: #122233; --ink: #ece7dc; --ink-2: #b8c1cb; --rule: #2b3d50;
    --blue: #8db8d6; --red: #f3968c; --green: #86c9a6; --brass: #c9a96a; --brass-text: #d8bd84; --brass-soft: #2a2a22;
    --band: #050d16; --band-ink: #ece7dc; --band-mute: #b8c1cb; --foot: #050b12; --mark-hi: #5a4a14;
    --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170' viewBox='0 0 260 170'%3E%3Cg fill='none' stroke='%238db8d6' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M-10 28C40 8 86 48 136 28S226 6 270 30'/%3E%3Cpath d='M-10 62C44 40 92 84 146 60S228 42 270 66'/%3E%3Cpath d='M-10 98C52 74 96 120 156 94S230 80 270 102'/%3E%3Cpath d='M-10 134C44 114 104 156 160 130S232 116 270 138'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b1622; --paper-2: #0f1d2c; --surface: #122233; --ink: #ece7dc; --ink-2: #b8c1cb; --rule: #2b3d50;
  --blue: #8db8d6; --red: #f3968c; --green: #86c9a6; --brass: #c9a96a; --brass-text: #d8bd84; --brass-soft: #2a2a22;
  --band: #050d16; --band-ink: #ece7dc; --band-mute: #b8c1cb; --foot: #050b12; --mark-hi: #5a4a14;
  --contour: none;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--f-text); }
img, svg { max-width: 100%; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-disp); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 1.5rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }
.art-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
main { display: block; }

/* masthead: a chart title block */
.mast { background: var(--paper); border-bottom: 1px solid var(--ink); }
.mast-in { max-width: var(--w); margin: 0 auto; padding: 1rem 1.5rem .7rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .4rem 2rem; }
.mast-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.mast-brand:hover { color: var(--ink); }
.mast-mark { width: 46px; height: 46px; flex: none; }
.mm-ring { fill: none; stroke: currentColor; stroke-width: 1.6; }
.mm-cross { stroke: var(--brass); stroke-width: 1.1; }
.mm-needle { fill: var(--red); }
.mm-hub { fill: var(--paper); stroke: currentColor; stroke-width: 1.2; }
.mast-name { font: 600 clamp(1.9rem, 3.4vw, 2.9rem)/1 var(--f-disp); letter-spacing: -.01em; }
.mast-kicker { margin: .35rem 0 0 calc(46px + .7rem); font: 500 .78rem/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.mast-edition { margin: 0; font: 400 .8rem/1.4 var(--f-data); color: var(--ink-2); text-align: right; }
.mast-edition a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass); }
.mast-edition .free { color: var(--green); font-weight: 600; }
.sections { border-top: 1px solid var(--rule); background: var(--paper-2); }
.sec-chips { list-style: none; margin: 0 auto; padding: .55rem 1.5rem; max-width: var(--w); display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.sec-chips li { flex: none; }
.sec-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .36rem .85rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  font: 500 .86rem/1.2 var(--f-ui); color: var(--ink); text-decoration: none; white-space: nowrap; }
.sec-chip::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sec, var(--ink-2)); }
.sec-chip:hover { border-color: var(--ink); color: var(--ink); }
.sec-chip[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sec-chip-this-week, .card-this-week, .article-this-week, .section-this-week { --sec: var(--brass-text); }
.sec-chip-great-lakes-and-inland, .card-great-lakes-and-inland, .article-great-lakes-and-inland, .section-great-lakes-and-inland { --sec: var(--blue); }
.sec-chip-safety-and-rules, .card-safety-and-rules, .article-safety-and-rules, .section-safety-and-rules { --sec: var(--red); }
.sec-chip-gear-and-maintenance, .card-gear-and-maintenance, .article-gear-and-maintenance, .section-gear-and-maintenance { --sec: var(--ink-2); }
.sec-chip-events, .card-events, .article-events, .section-events { --sec: var(--green); }
.sec-chip-lettering { --sec: var(--brass); }
.sec-chip-issues { --sec: var(--ink); }

/* section marks (chart symbols) */
svg.mark { width: 1.35rem; height: 1.35rem; flex: none; color: var(--sec, var(--ink)); vertical-align: middle; }
.mk-fill { fill: currentColor; }
.mk-base { fill: currentColor; opacity: .55; }
.mk-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk-cut { stroke: var(--paper); stroke-width: 1.6; }
.mk-num { font: 600 11px var(--f-data); fill: currentColor; text-anchor: middle; }
.mk-sub { font-size: 7px; }

/* buttons, pills, labels */
.mbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem 1.2rem; border-radius: 3px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: 600 .88rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.mbtn:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.mbtn-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.mbtn-danger { background: var(--red); border-color: var(--red); color: var(--paper); }
.mpill { display: inline-block; padding: .3rem .6rem; border-radius: 999px; background: #c9a96a; color: #0d1b2a; font: 600 .72rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
.ai-label { display: inline-block; padding: .18rem .55rem; border: 1px solid var(--brass); border-radius: 3px; background: var(--brass-soft); color: var(--ink); text-decoration: none;
  font: 600 .74rem/1.3 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
.ai-label:hover { border-color: var(--ink); color: var(--ink); }
.label-line { font: 400 .85rem/1.5 var(--f-ui); color: var(--ink-2); }
.m-empty { font: italic 400 1.1rem/1.5 var(--f-text); color: var(--ink-2); }
.eyebrow-mag, .sec-kicker { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font: 600 .78rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--sec, var(--brass-text)); }

/* cover */
.cover { background: var(--paper) var(--contour); border-bottom: 1px solid var(--rule); padding: 2.6rem 0 2.4rem; }
.cover-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem 3rem; align-items: start; }
.cover-strip { display: flex; flex-wrap: wrap; gap: .3rem 0; margin: 0 0 1rem; font: 400 .78rem/1.4 var(--f-data); letter-spacing: .02em; color: var(--ink-2); }
.cover-strip span + span::before { content: "\00B7"; padding: 0 .6rem; color: var(--brass); }
.tagline { margin: 0 0 .4rem; font: italic 400 1.12rem/1.4 var(--f-disp); color: var(--brass-text); }
.cover-line { font: 600 clamp(2.05rem, 4.3vw, 3.6rem)/1.07 var(--f-disp); letter-spacing: -.012em; margin: .2rem 0 .8rem; }
.cover-line a { color: var(--ink); text-decoration: none; }
.cover-line a:hover { color: var(--blue); }
.cover-dek { font: 400 1.24rem/1.5 var(--f-text); color: var(--ink-2); max-width: 40rem; }
.toc-h { margin: 1.6rem 0 0; padding-top: .6rem; border-top: 2px solid var(--ink); font: 600 .78rem/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.toc-issue { list-style: none; margin: 0; padding: 0; }
.toc-issue li { border-bottom: 1px solid var(--rule); }
.toc-issue a { display: grid; grid-template-columns: 1.6rem 11rem minmax(0, 1fr); gap: .7rem; align-items: baseline; padding: .65rem 0; color: var(--ink); text-decoration: none; }
.toc-issue a:hover .toc-head { color: var(--blue); }
.toc-sec { font: 600 .74rem/1.3 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.toc-head { font: 600 1.06rem/1.3 var(--f-disp); }
.cover-figure { margin: 0; background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1rem .8rem; }
.cover-figure figcaption { font: 400 .82rem/1.45 var(--f-ui); color: var(--ink-2); margin-top: .5rem; }
.cover-empty .cover-line { max-width: 22ch; }
svg.cover-chart { display: block; width: 100%; height: auto; }
.staff-board { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.staff-tick { stroke: var(--ink); stroke-width: 1; }
.lvl-prev { stroke: var(--ink-2); stroke-width: 2.5; stroke-dasharray: 6 4; }
.lvl-now { stroke: var(--blue); stroke-width: 7; stroke-linecap: round; }
.cc-lake { font: 600 24px var(--f-ui); fill: var(--ink); text-anchor: middle; }
.cc-val { font: 500 21px var(--f-data); fill: var(--ink); text-anchor: middle; }
.cc-chg { font: 400 20px var(--f-data); fill: var(--ink-2); text-anchor: middle; }

/* article cards */
.rows { padding: 2.4rem 0 2.2rem; }
.row-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.3rem; }
.card { background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--sec, var(--ink)); padding: 1.1rem 1.25rem 1.2rem; display: flex; flex-direction: column; }
.card-kicker { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font: 600 .74rem/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--sec, var(--ink)); }
.card-h { font: 600 1.32rem/1.2 var(--f-disp); margin: 0 0 .5rem; }
.card-h a { color: var(--ink); text-decoration: none; }
.card-h a:hover { color: var(--blue); text-decoration: underline; }
.card-dek { font: 400 1rem/1.5 var(--f-text); color: var(--ink-2); flex: 1; }
.card-meta { margin: .4rem 0 0; font: 400 .75rem/1.3 var(--f-data); color: var(--ink-2); }

/* the data spine */
.spine { background: var(--paper-2); border-top: 1px solid var(--rule); padding: 2.6rem 0 2.8rem; }
.spine-h { font: 600 clamp(1.45rem, 2.6vw, 1.9rem)/1.2 var(--f-disp); margin: 0; }
.spine-note { font: 400 .86rem/1.4 var(--f-ui); color: var(--ink-2); margin: .3rem 0 0; }
.spine-block { margin-top: 2rem; }
.spine-block h3 { font: 600 .82rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .7rem; padding-bottom: .45rem; border-bottom: 2px solid var(--ink); }
table.data { width: 100%; border-collapse: collapse; background: var(--surface); font: 400 .98rem/1.45 var(--f-text); }
table.data caption { caption-side: top; text-align: left; padding: 0 0 .45rem; font: 400 .8rem/1.4 var(--f-ui); color: var(--ink-2); }
table.data th, table.data td { padding: .6rem .75rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
table.data thead th { font: 600 .72rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); border-bottom: 1px solid var(--ink); }
table.data tbody th { font-weight: 600; }
table.data .num { font-family: var(--f-data); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
table.data .when { display: block; font: 400 .72rem/1.3 var(--f-data); color: var(--ink-2); white-space: normal; }
.chg-lower { color: var(--red); }
.chg-higher { color: var(--green); }
.formula { margin: .55rem 0 0; font: 400 .82rem/1.45 var(--f-ui); color: var(--ink-2); }

/* Lettering Desk band (the desk's prices, smoke-pinned) */
.desk-band { background: var(--band); color: var(--band-ink); padding: 3.2rem 0 3rem; }
.desk-band .sec-kicker { --sec: #c9a96a; }
.desk-band h2 { color: #fff; font: 600 clamp(1.55rem, 3vw, 2.35rem)/1.15 var(--f-disp); margin: 0 0 .7rem; }
.band-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem 2.6rem; align-items: center; }
.band-copy p { color: var(--band-mute); }
.band-copy strong { color: #fff; }
.band-list { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--band-mute); }
.band-list li { margin-bottom: .35rem; }
.band-fine { font-size: .98rem; }
.desk-band .mbtn { background: #c9a96a; border-color: #c9a96a; color: #0d1b2a; }
/* v1.2.1 WCAG 2.4.7 / 1.4.11: the focus ring stays visible (3:1 or more) on the dark band and footer */
.desk-band :focus-visible, .foot :focus-visible { outline-color: #f2ede2; }
.desk-band .mbtn:hover { background: #fff; border-color: #fff; color: #0d1b2a; }
.band-proof { margin: 0; background: #f5f2ea; border-radius: 3px; padding: .6rem; }
.band-proof figcaption { font: 400 .78rem/1.4 var(--f-ui); color: #3a4756; padding: .4rem .2rem 0; }
.band-proof .proof-svg { display: block; width: 100%; height: auto; }
.band-proof .pf-sky { fill: #eef1ef; }
.band-proof .pf-water { fill: #2c5a70; }
.band-proof .pf-hull { stroke: #161a1d; }
.band-proof .pf-rub { fill: none; stroke: #8c8c8c; }
.band-proof .pf-mid { stroke: #9c7322; }
.band-proof .pf-label { fill: #fff; font-family: var(--f-ui); letter-spacing: .1em; }
.band-proof .pf-dark { fill: #161a1d; }
.band-proof .pf-dim line { stroke: #9e2229; }
.band-proof .pf-dim text { fill: #9e2229; font-family: var(--f-ui); }
.band-plans { margin-top: 2.2rem; }
.desk-band .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.desk-band .plan { background: #fbf9f3; color: #0d1b2a; border-radius: 3px; padding: 1.3rem 1.3rem 1.1rem; border-top: 4px solid #cfc4ac; }
.desk-band .plan-key { border-top-color: #c9a96a; }
.desk-band .plan h3 { font: 600 .9rem/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .4rem; }
.desk-band .plan-price { font: 400 .95rem/1.4 var(--f-ui); color: #3a4756; margin-bottom: .6rem; }
.desk-band .plan-price .big { font: 600 2.2rem/1 var(--f-disp); color: #0d1b2a; margin-right: .2rem; }
.desk-band .plan-price .or { display: block; margin-top: .25rem; }
.desk-band .plan ul { list-style: none; margin: 0; padding: 0; font: 400 .93rem/1.45 var(--f-text); }
.desk-band .plan li { padding: .4rem 0 .4rem 1.1rem; border-top: 1px solid #ece6d8; position: relative; }
.desk-band .plan li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .55rem; height: 2px; background: #9a7b3f; }
.desk-band .plans-note { margin: 1.2rem 0 0; color: var(--band-mute); font-size: .95rem; max-width: 52rem; }

/* archive strip */
.strip { padding: 2rem 0 2.4rem; border-top: 1px solid var(--rule); }
.strip-h { font: 600 .82rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .8rem; }
.strip-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.strip-list a { display: inline-flex; flex-direction: column; padding: .55rem .8rem; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); text-decoration: none; font: 400 .9rem/1.3 var(--f-text); }
.strip-n { font: 600 .78rem/1.2 var(--f-data); color: var(--blue); }

/* inner pages */
.page-top { background: var(--paper) var(--contour); border-bottom: 1px solid var(--rule); padding: 2.4rem 0 1.9rem; margin-bottom: 2rem; }
.page-h { font: 600 clamp(1.95rem, 4vw, 2.9rem)/1.1 var(--f-disp); margin: 0 0 .5rem; }
.page-dek { font: 400 1.18rem/1.5 var(--f-text); color: var(--ink-2); max-width: 46rem; margin: 0 0 .6rem; }
.prose-mag { max-width: calc(46rem + 3rem); font: 400 1.12rem/1.65 var(--f-text); padding-bottom: 3.2rem; }
.prose-mag h2 { font: 600 1.55rem/1.2 var(--f-disp); margin: 2rem 0 .6rem; }
.prose-mag li { margin-bottom: .45rem; }
.archive, .rows .wrap > .m-empty { padding-bottom: 3rem; }
.archive-list, .sec-list { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 2px solid var(--ink); }
.archive-list li, .sec-list li { border-bottom: 1px solid var(--rule); }
.archive-list a { display: grid; grid-template-columns: 5rem 14rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .85rem 0; color: var(--ink); text-decoration: none; }
.arc-n { font: 600 .95rem/1 var(--f-data); color: var(--blue); }
.arc-w { font: 400 .95rem/1.3 var(--f-ui); color: var(--ink-2); }
.arc-h { font: 600 1.12rem/1.3 var(--f-disp); }
.sec-list a { display: grid; gap: .25rem; padding: 1rem 0; color: var(--ink); text-decoration: none; }
.sec-when { font: 400 .8rem/1.2 var(--f-data); color: var(--ink-2); }
.sec-h { font: 600 1.3rem/1.25 var(--f-disp); }
.sec-d { color: var(--ink-2); }
.archive-list a:hover .arc-h, .sec-list a:hover .sec-h { color: var(--blue); }

/* the article */
.article { max-width: calc(68ch + 3rem); margin: 0 auto; padding: 2.4rem 1.5rem 3rem; }
.art-head { border-bottom: 1px solid var(--rule); padding-bottom: 1.3rem; margin-bottom: 1.6rem; }
.art-kicker { display: flex; align-items: center; gap: .45rem; margin: 0 0 .7rem; font: 600 .8rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--sec, var(--ink)); }
.art-kicker a { color: inherit; text-decoration: none; }
.art-h { font: 600 clamp(1.95rem, 4.2vw, 3.05rem)/1.1 var(--f-disp); letter-spacing: -.01em; margin: 0 0 .6rem; }
.art-dek { font: italic 400 1.3rem/1.45 var(--f-text); color: var(--ink-2); margin: 0 0 1rem; }
.art-label { margin: 0 0 .4rem; }
.art-date { margin: 0; font: 400 .78rem/1.4 var(--f-data); color: var(--ink-2); }
.art-date a { color: var(--ink-2); }
.art-body { font: 400 1.22rem/1.68 var(--f-text); }
.art-body p { margin: 0 0 1.1em; }
sup.cite { font: 500 .62em/0 var(--f-data); vertical-align: super; padding-left: .06em; }
sup.cite a { color: var(--blue); text-decoration: none; }
sup.cite a:hover { text-decoration: underline; }
.art-sources { margin-top: 2.2rem; padding-top: 1rem; border-top: 3px double var(--ink); }
.art-sources h2 { font: 600 .86rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .4rem; }
.src-note { font: 400 .86rem/1.45 var(--f-ui); color: var(--ink-2); }
.art-sources ol.sources, .ed-preview ol.sources { margin: 0; padding-left: 1.4rem; font: 400 .92rem/1.45 var(--f-ui); }
ol.sources li { margin: 0 0 .6rem; padding-left: .2rem; }
ol.sources li:target { background: var(--brass-soft); }
.src-pub { font-weight: 600; }
.src-title { color: var(--blue); }
.src-date, .src-fetched { display: inline-block; margin-left: .35rem; font: 400 .74rem/1.4 var(--f-data); color: var(--ink-2); }
.src-formula { display: block; font: 400 .82rem/1.45 var(--f-ui); color: var(--ink-2); margin-top: .15rem; }
.art-error { margin-top: 1.8rem; font: 400 .92rem/1.5 var(--f-ui); color: var(--ink-2); }

/* editor (noindex, never linked) */
.editor { padding-bottom: 3rem; }
.ed-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ed-box { background: var(--surface); border: 1px solid var(--rule); padding: 1.1rem 1.2rem; margin: 0 0 1.2rem; }
.ed-box h2 { font: 600 1.25rem/1.3 var(--f-disp); }
.ed-form label { display: block; margin: .8rem 0 .3rem; font: 600 .8rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.ed-form input, .ed-form select { width: 100%; max-width: 32rem; min-height: 44px; padding: .5rem .7rem; font: 400 1rem/1.3 var(--f-ui); color: var(--ink); background: var(--paper); border: 1px solid var(--ink-2); border-radius: 3px; }
.ed-form .mbtn { margin-top: .8rem; }
.ed-inline { display: inline-block; margin: .3rem .5rem .3rem 0; }
.ed-error { color: var(--red); font-weight: 600; }
.ed-note, .ed-meta, .ed-reason { font: 400 .85rem/1.4 var(--f-ui); color: var(--ink-2); }
.ed-meta { word-break: break-all; }
.ed-list { margin: 0; padding-left: 1.2rem; }
.ed-sentences { padding-left: 1.4rem; }
.ed-sentences li { margin: 0 0 .8rem; padding-left: .6rem; border-left: 4px solid var(--rule); }
.ed-sentences li.is-pass { border-left-color: var(--green); }
.ed-sentences li.is-fail { border-left-color: var(--red); }
.ed-s { margin: 0 0 .3rem; }
.ed-fail { margin: 0 0 .3rem; color: var(--red); font: 600 .85rem/1.4 var(--f-ui); }
.ed-ev { margin: 0 0 .3rem; font: 400 .85rem/1.5 var(--f-ui); color: var(--ink-2); }
.ed-ev mark { background: var(--mark-hi); color: var(--ink); }
.ed-ev mark.miss { background: #f8d0cb; color: #0d1b2a; }
.ed-ref { font: 600 .78rem/1 var(--f-data); color: var(--blue); }
.ok { color: var(--green); }
.no { color: var(--red); }
.mono { font: 400 .72rem/1.3 var(--f-data); word-break: break-all; }
.ed-preview { border: 1px dashed var(--ink-2); padding: 1rem 1.2rem; max-width: none; margin: .4rem 0 0; }
.ed-preview .art-h { font-size: 1.8rem; }

/* AdEngine banner (moved here from the desk's sheet in v1.2.0; same sizes): one labelled slot between the main content and
   the footer on the public pages. The label and reserved height sit on the <ins>, so a slot tag.js cannot fill is hidden with
   its label. display is never !important: tag.js hides a slot with style.display='none'. */
.ae-slot { max-width: var(--w); margin: 0 auto; padding: 0 1.5rem; }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 2rem auto 3rem; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 500 11px/16px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }

/* footer */
.foot { background: var(--foot); color: #d6d0c3; padding: 3rem 0 2.4rem; font: 400 .92rem/1.55 var(--f-ui); }
.foot-in { max-width: var(--w); margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1.6rem 3rem; }
.foot a { color: #f2ede2; }
.foot a:hover { color: #fff; }
.foot-name { font: 600 1.6rem/1 var(--f-disp); color: #fff; margin: 0 0 .5rem; }
.foot-line { color: #c9c2b2; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin-bottom: .4rem; }
.foot-h { font: 600 .72rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #d8bd84; margin-bottom: .8rem !important; }
.foot-method, .foot-legal, .foot-affil, .foot-power { grid-column: 1 / -1; margin: 0; }
.foot-method { border-top: 1px solid #2b3d50; padding-top: 1.3rem; color: #d6d0c3; }
.foot-legal, .foot-affil { font-size: .85rem; color: #b9b2a3; }
.foot-power { font: 500 .8rem/1.4 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.foot-domain { margin-right: .8rem; color: #9fa8b3; text-transform: none; letter-spacing: 0; font-family: var(--f-data); }

/* phones and tablets */
@media (max-width: 1020px) {
  .cover-grid, .band-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .wrap, .ae-slot { padding: 0 1rem; }
  .mast-in { grid-template-columns: 1fr; padding: .75rem 1rem .5rem; gap: .2rem; }
  .mast-mark { width: 34px; height: 34px; }
  .mast-name { font-size: 1.6rem; }
  .mast-kicker { margin-left: calc(34px + .7rem); font-size: .68rem; letter-spacing: .14em; }
  .mast-edition { text-align: left; font-size: .72rem; }
  .sec-chips { padding: .45rem 1rem; }
  .sec-chip { font-size: .8rem; padding: .32rem .7rem; }
  .cover { padding: 1.8rem 0; }
  .toc-issue a { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .toc-sec { grid-column: 2; }
  .toc-head { grid-column: 2; }
  .row-grid { grid-template-columns: 1fr; }
  .article { padding: 1.6rem 1rem 2.4rem; }
  .art-body { font-size: 1.16rem; }
  table.data thead { display: none; }
  table.data, table.data tbody, table.data tr { display: block; width: 100%; }
  table.data tr { border-bottom: 1px solid var(--ink); padding: .3rem 0; }
  table.data th, table.data td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem .6rem; text-align: right; }
  table.data th::before, table.data td::before { content: attr(data-label); font: 600 .7rem/1.6 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-align: left; flex: none; }
  table.data .num { white-space: normal; }
  table.data td { flex-wrap: wrap; }
  table.data td .when { flex-basis: 100%; }
  table.data td .v { white-space: nowrap; }
  .sec-chips { flex-wrap: wrap; overflow: visible; }
  table.data caption { display: block; }
  .desk-band .plans { grid-template-columns: 1fr; }
  .archive-list a { grid-template-columns: 4rem minmax(0, 1fr); }
  .arc-h { grid-column: 2; }
  .foot-in { grid-template-columns: 1fr; padding: 0 1rem; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; margin-bottom: 2.5rem; } }

/* print: an article prints as an article; the Lettering Desk's sheets print alone (app.css sizes them) */
@media print {
  body { background: #fff; color: #000; }
  .sections, .mast-edition, .ae-slot, .foot-cols, .foot-method, .skip, .art-error, .strip, .desk-band { display: none !important; }
  .mast { border-bottom: 1px solid #000; }
  .article { max-width: none; padding: 0; }
  .art-body { font-size: 11.5pt; }
  a { color: #000; }
  .art-sources a.src-title::after { content: " <" attr(href) ">"; font: 8pt var(--f-data); word-break: break-all; }
  .foot { background: #fff; color: #000; padding: .5rem 0 0; }
  .foot a, .foot-legal, .foot-affil, .foot-domain { color: #000; }
  body.has-print .mast, body.has-print .foot { display: none !important; }
  body.is-desk .mast, body.is-desk .foot { display: none !important; }
  .ae-slot { display: none; }
}

/* v1.2.1: the code-built forecast block (NWS synopses quoted word for word), the code label, archived sources */
.forecast { margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--rule); }
.fc-h { font: 600 1.35rem/1.2 var(--f-disp); margin: 0 0 .6rem; }
.fc-note { font: 400 .92rem/1.5 var(--f-ui); color: var(--ink-2); }
.fc-stale { display: inline-block; margin: 0 0 .8rem; padding: .3rem .6rem; border: 1px solid var(--red); color: var(--red); font: 600 .9rem/1.3 var(--f-ui); }
.fc { margin: 1.1rem 0 0; }
.fc-cap { font: 400 .86rem/1.45 var(--f-ui); color: var(--ink-2); margin: 0 0 .35rem; }
.fc-lake { font-weight: 700; color: var(--ink); }
.fc-text { margin: 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--blue); }
.fc-text p { margin: 0; font-size: 1.02rem; }
.code-label { border-color: var(--blue); }
.src-computed { display: block; margin: .25rem 0 0; font: 400 .85rem/1.45 var(--f-ui); color: var(--ink-2); }
.src-arch { font: 400 .82rem/1.4 var(--f-ui); }
.src-text { white-space: pre-wrap; word-break: break-word; background: var(--surface); border: 1px solid var(--rule); padding: 1rem; font: 400 .92rem/1.55 var(--f-data); }
.src-facts dt { font: 600 .78rem/1.3 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-top: .7rem; }
.src-facts dd { margin: .15rem 0 0; word-break: break-all; }