/* Circuit Locker (sanduskymarine.com) - own design system, v1.0.
   Idea: a boat's DC panel and its paperwork. Graphite panel, engraved-label stencil type, paper spec sheets with ruled
   lines, a red/yellow duplex conductor as the brand line (ABYC colours: red positive, yellow DC negative).
   Type: Saira Stencil One (labels, big results) + Radio Canada (text) + Fragment Mono (numbers, codes). */

@font-face { font-family: "Saira Stencil One"; src: url("fonts/saira-stencil-one-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Radio Canada"; src: url("fonts/radio-canada-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Radio Canada"; src: url("fonts/radio-canada-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Radio Canada"; src: url("fonts/radio-canada-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url("fonts/fragment-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #F3F0E8;
  --paper-2: #EAE5D9;
  --card: #FBFAF6;
  --ink: #16191D;
  --ink-2: #4A5058;
  --rule: #CFC8BA;
  --graphite: #1D2329;
  --graphite-2: #2A323A;
  --red: #C62828;
  --red-d: #A11F1F;
  --yellow: #E9B824;
  --copper: #B87333;
  --ok: #23714A;
  --bad: #B3261E;
  --stencil: "Saira Stencil One", "Arial Narrow", sans-serif;
  --sans: "Radio Canada", "Segoe UI", system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --w: 1180px;
  --gut: clamp(16px, 4vw, 40px);
}

*, *::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(--sans); }
img, svg { max-width: 100%; }
a { color: var(--red-d); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--yellow); color: var(--ink); padding: 8px 12px; }
.mono, .num { font-family: var(--mono); font-feature-settings: "tnum"; }
.frame { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 760px; }
.kicker { font: 500 .78rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.kicker b { color: var(--red); font-weight: 400; }

/* ---------- header: the panel ---------- */
.hd { background: var(--graphite); color: var(--paper); }
.hd__in { max-width: var(--w); margin: 0 auto; padding: 14px var(--gut); display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; color: var(--paper); text-decoration: none; }
.brand__glyph { grid-row: 1 / span 2; width: 40px; height: 40px; fill: none; stroke: var(--paper); stroke-width: 2; }
.brand__glyph circle:first-of-type { fill: var(--red); stroke: none; }
.brand__glyph circle:last-of-type { fill: var(--yellow); stroke: none; }
.brand__name { font: 400 1.45rem/1 var(--stencil); letter-spacing: .06em; text-transform: uppercase; }
.brand__sub { font: .72rem/1.3 var(--mono); color: #AEB6BE; letter-spacing: .04em; }
.hd__nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-left: auto; }
.hd__nav a { color: #DDE2E6; text-decoration: none; font-weight: 500; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.hd__nav a:hover { color: #fff; border-bottom-color: #6B747D; }
.hd__nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }
.tag { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--yellow); color: var(--ink); text-decoration: none;
  font: 500 .78rem/1 var(--mono); padding: 8px 12px 8px 10px; clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); padding-left: 18px; }
.tag:hover { color: var(--ink); background: #F3C93E; }
.tag__hole { width: 7px; height: 7px; border-radius: 50%; background: var(--graphite); }
.duplex { display: grid; grid-template-rows: 3px 3px; }
.duplex span:first-child { background: var(--red); }
.duplex span:last-child { background: var(--yellow); }

/* ---------- buttons, forms ---------- */
.cta { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem/1 var(--sans); padding: 15px 22px; border-radius: 3px; text-decoration: none;
  border: 2px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; }
.cta:hover { background: var(--ink); color: var(--paper); }
.cta--red { background: var(--red); border-color: var(--red); color: #fff; }
.cta--red:hover { background: var(--red-d); border-color: var(--red-d); color: #fff; }
.cta--small { padding: 10px 14px; font-size: .9rem; }
.cta[hidden] { display: none; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
label, .lab { display: block; font-weight: 500; font-size: .92rem; margin-bottom: 6px; }
.hint { display: block; font-weight: 400; color: var(--ink-2); font-size: .82rem; margin-top: 4px; }
input[type=text], input[type=number], input:not([type]), select {
  width: 100%; font: 400 1rem/1.3 var(--sans); padding: 11px 12px; border: 1.5px solid #9C9483; border-radius: 3px; background: #fff; color: var(--ink); }
input:focus, select:focus { border-color: var(--ink); outline: 3px solid rgba(233, 184, 36, .55); outline-offset: 0; }
.field { margin-bottom: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.seg { display: flex; border: 1.5px solid #9C9483; border-radius: 3px; overflow: hidden; background: #fff; }
.seg label { flex: 1; margin: 0; text-align: center; padding: 10px 6px; cursor: pointer; font-size: .92rem; border-left: 1.5px solid #9C9483; }
.seg label:first-child { border-left: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:has(input:checked) { background: var(--graphite); color: #fff; }
.seg label:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: -3px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-bottom: 10px; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red); }
.err { border-left: 4px solid var(--bad); background: #FBEAE8; padding: 12px 16px; margin-bottom: 20px; }
.err p { margin: 0; }

/* ---------- home ---------- */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(36px, 6vw, 72px); border-bottom: 1px solid var(--rule); }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { font-weight: 700; font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.02; letter-spacing: -.025em; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero__lede { font-size: 1.18rem; color: #2E333A; max-width: 34em; }
.hero__price { margin-top: 22px; font-size: .95rem; color: var(--ink-2); }
.hero__price strong { color: var(--ink); }

.plate { background: var(--graphite); color: var(--paper); border-radius: 6px; padding: 26px 26px 22px; box-shadow: 0 1px 0 #000, 0 18px 40px -18px rgba(22, 25, 29, .55); position: relative; }
.plate::before, .plate::after { content: ""; position: absolute; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: #59626B; box-shadow: inset 0 0 0 2px #3A424A; }
.plate::before { left: 12px; } .plate::after { right: 12px; }
.plate__cap { font: .75rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #AEB6BE; margin: 4px 0 14px; text-align: center; }
.plate__load { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font: .88rem/1.3 var(--mono); color: #DDE2E6; border-top: 1px solid #3D464F; border-bottom: 1px solid #3D464F; padding: 10px 0; }
.plate__big { font: 400 clamp(3.4rem, 8vw, 5rem)/1 var(--stencil); text-align: center; margin: 18px 0 6px; letter-spacing: .02em; }
.plate__big small { font-size: .38em; color: #AEB6BE; letter-spacing: .1em; }
.plate__why { text-align: center; font-size: .92rem; color: #C9CFD4; margin-bottom: 16px; }
.plate__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #3D464F; border: 1px solid #3D464F; }
.plate__stats div { background: var(--graphite-2); padding: 10px 8px; text-align: center; }
.plate__stats b { display: block; font: 400 1.1rem/1.2 var(--mono); color: #fff; }
.plate__stats span { font-size: .74rem; color: #AEB6BE; }
.plate__foot { font-size: .8rem; color: #AEB6BE; margin: 14px 0 0; text-align: center; }
.plate__foot a { color: var(--yellow); }

.gauges { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; margin: 18px 0 4px; }
.gauges svg { overflow: visible; }

/* terminal strip */
.strip { padding: clamp(48px, 7vw, 84px) 0; }
.strip h2, .sec h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; }
.strip__bar { height: 34px; background: var(--graphite); border-radius: 4px; display: grid; grid-template-columns: repeat(3, 1fr); margin: 34px 0 0; }
.strip__bar span { display: flex; align-items: center; justify-content: center; gap: 10px; color: #AEB6BE; font: .78rem/1 var(--mono); letter-spacing: .1em; }
.strip__bar span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #8C959E 0 30%, #59626B 31%); box-shadow: inset 0 0 0 2px #3A424A; }
.strip__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); border-top: 0; background: var(--card); }
.tool { padding: 26px 24px 28px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; position: relative; }
.tool:first-child { border-left: 0; }
.tool::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 18px; background: var(--red); }
.tool:nth-child(2)::before { background: var(--yellow); }
.tool:nth-child(3)::before { background: var(--copper); }
.tool h3 { font-size: 1.35rem; margin-top: 12px; }
.tool p { color: #353A41; }
.tool ul { margin: 0 0 18px; padding-left: 18px; color: #353A41; font-size: .95rem; }
.tool .more { margin-top: auto; font-weight: 700; }
.tool__tag { font: .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }

.sec { padding: clamp(44px, 6vw, 76px) 0; border-top: 1px solid var(--rule); }
.sec--dark { background: var(--graphite); color: var(--paper); border-top: 0; }
.sec--dark a { color: var(--yellow); }
.sec--dark .kicker { color: #AEB6BE; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }

/* ruled spec table (sources, ladders, schedules) */
.spec { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec th, .spec td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec thead th { font: 500 .74rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.spec td.num, .spec th.num { text-align: right; padding-right: 0; padding-left: 12px; }
.sec--dark .spec th, .sec--dark .spec td { border-color: #3D464F; }
.sec--dark .spec thead th { color: #AEB6BE; border-bottom-color: var(--paper); }
.scroll { overflow-x: auto; }

/* price tags */
.tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.ptag { background: var(--card); border: 1px solid var(--rule); border-top: 6px solid var(--graphite); padding: 22px 20px; display: flex; flex-direction: column; }
.ptag--pass { border-top-color: var(--red); }
.ptag h3 { font: 500 .8rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ptag__amt { font: 400 2.6rem/1 var(--stencil); margin: 4px 0 6px; }
.ptag__amt small { font: 400 .95rem var(--sans); color: var(--ink-2); }
.ptag__note { font: 500 .78rem/1.3 var(--mono); color: var(--ok); margin: 0 0 12px; }
.ptag ul { margin: 0; padding-left: 18px; font-size: .93rem; color: #353A41; }
.sec--dark .ptag { color: var(--ink); }
.sec--dark .ptag a { color: var(--red-d); }

.callpro { border-left: 6px solid var(--yellow); background: var(--card); padding: 20px 24px; }
.callpro h2, .callpro h3 { font-size: 1.2rem; }
.callpro ul { margin: 0; padding-left: 18px; }

/* ---------- tool pages ---------- */
.pagehead { padding: clamp(32px, 5vw, 56px) 0 26px; border-bottom: 1px solid var(--rule); }
.pagehead h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; letter-spacing: -.02em; }
.pagehead p { max-width: 46em; color: #2E333A; font-size: 1.08rem; }
.work { display: grid; grid-template-columns: 360px 1fr; gap: clamp(24px, 4vw, 48px); padding: 34px 0 60px; align-items: start; }
.form { background: var(--card); border: 1px solid var(--rule); padding: 22px; position: sticky; top: 16px; }
.form h2 { font-size: 1.05rem; font-family: var(--mono); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pointofuse { font-size: .86rem; color: var(--ink-2); border-top: 1px dashed var(--rule); margin-top: 16px; padding-top: 12px; }
.pointofuse strong { color: var(--ink); }

.result { min-width: 0; }
.answer { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: center; background: var(--graphite); color: var(--paper); padding: 26px 28px; border-radius: 6px; }
.answer__big { font: 400 clamp(3.2rem, 7vw, 4.6rem)/1 var(--stencil); grid-row: span 2; }
.answer__big small { font-size: .36em; color: #AEB6BE; }
.answer__why { font-size: 1.02rem; color: #DDE2E6; margin: 0; }
.answer__src { font: .78rem/1.4 var(--mono); color: #AEB6BE; margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); background: var(--card); margin: 18px 0 26px; }
.tiles div { padding: 16px 18px; border-left: 1px solid var(--rule); }
.tiles div:first-child { border-left: 0; }
.tiles b { display: block; font: 400 1.5rem/1.2 var(--mono); }
.tiles span { font-size: .84rem; color: var(--ink-2); }
.ok { color: var(--ok); } .bad { color: var(--bad); }
.pill { display: inline-block; font: .74rem/1 var(--mono); padding: 5px 8px; border-radius: 2px; background: var(--paper-2); color: var(--ink); white-space: nowrap; }
.pill--pick { background: var(--red); color: #fff; }
.pill--ok { background: #DCEFE4; color: var(--ok); }
.pill--no { background: #F6DEDB; color: var(--bad); }
.ladder td { vertical-align: middle; }
.ladder tr.is-pick td { background: #FFF6D9; }
.ladder .bar { display: block; width: 100%; min-width: 120px; height: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 18px; }
.chip { font: .86rem/1 var(--mono); padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; }
.notes { font-size: .95rem; color: #2E333A; }
.notes li { margin-bottom: 8px; }
.empty { border: 2px dashed var(--rule); padding: 34px 28px; color: var(--ink-2); }
.empty h2 { color: var(--ink); font-size: 1.3rem; }

/* budget */
.loads { width: 100%; border-collapse: collapse; }
.loads th { font: 500 .72rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-align: left; padding: 0 6px 6px 0; }
.loads td { padding: 0 6px 8px 0; }
.loads td:first-child { width: 22px; font: .8rem var(--mono); color: var(--ink-2); }
.loads input { padding: 9px 8px; }
.loads .w-n { width: 46%; }
.share { display: block; width: 100%; height: 26px; margin: 6px 0 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; color: var(--ink-2); margin: 0 0 18px; padding: 0; list-style: none; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; }

/* locker */
.lockbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.lockbar .code { font: .9rem var(--mono); background: var(--paper-2); padding: 7px 10px; word-break: break-all; }
.sched td, .sched th { font-size: .92rem; }
.sched .pos { font: 400 1rem var(--stencil); letter-spacing: .04em; }
.sched form { margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--red-d); text-decoration: underline; cursor: pointer; font: inherit; font-size: .88rem; }
.box { background: var(--card); border: 1px solid var(--rule); padding: 22px; margin-top: 26px; }
.box h2 { font-size: 1.2rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.danger { border-color: #E2B3AE; }

/* print views */
.labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.lbl { background: #111; color: #fff; border-radius: 4px; padding: 12px 12px 10px; text-align: center; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lbl__pos { font: .72rem/1 var(--mono); color: #bbb; letter-spacing: .1em; }
.lbl__name { font: 400 1.25rem/1.15 var(--stencil); letter-spacing: .05em; text-transform: uppercase; margin: 6px 0; word-break: break-word; }
.lbl__spec { font: .72rem/1.2 var(--mono); color: #ddd; }
.printhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; padding: 26px 0 0; }
.printhead h1 { font-size: 1.6rem; }

/* message */
.msg { padding: 64px 0 80px; }
.msg h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* prose pages */
.prose { padding: 36px 0 64px; }
.prose h2 { font-size: 1.45rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.1rem; margin-top: 1.3em; }
.prose li { margin-bottom: 6px; }

/* ---------- footer ---------- */
.ft { background: var(--graphite); color: #C9CFD4; margin-top: 0; }
.ft__in { max-width: var(--w); margin: 0 auto; padding: 44px var(--gut) 24px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; }
.ft__name { font: 400 1.3rem/1 var(--stencil); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); }
.ft__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ft__cols h2 { font: 500 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8C959E; margin-bottom: 12px; }
.ft__cols a { display: block; color: #DDE2E6; text-decoration: none; padding: 4px 0; }
.ft__cols a:hover { color: #fff; text-decoration: underline; }
.ft__base { max-width: var(--w); margin: 0 auto; padding: 18px var(--gut) 30px; border-top: 1px solid #3D464F; font-size: .82rem; }
.ft__ind { color: #AEB6BE; max-width: 70em; }
.ft__powered { color: #DDE2E6; margin: 0; }
.ft__powered a { color: var(--yellow); }
.ft__ver { font-family: var(--mono); color: #8C959E; margin-left: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero__grid, .split, .work { grid-template-columns: 1fr; }
  .form { position: static; }
  .tags { grid-template-columns: 1fr 1fr; }
  .strip__bar { display: none; }
  .strip__cards { grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
  .tool { border-left: 0; border-top: 1px solid var(--rule); }
  .tool:first-child { border-top: 0; }
  .tool::before { left: 24px; }
  .hd__nav { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .hd__in { padding-top: 12px; padding-bottom: 12px; }
  .hd__nav { gap: 2px 16px; }
  .hd__nav a { font-size: .9rem; }
  .tags, .ft__in, .grid3, .row2 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .tiles div { border-left: 0; border-top: 1px solid var(--rule); }
  .tiles div:first-child { border-top: 0; }
  .answer { grid-template-columns: 1fr; padding: 22px; }
  .answer__big { grid-row: auto; }
  .labels { grid-template-columns: 1fr 1fr; }
  .plate { padding: 24px 16px 18px; }
  .plate__stats b { font-size: .98rem; }
  .spec { font-size: .88rem; }
  .ladder .bar { min-width: 70px; }
  .hide-s { display: none; }
}

@media print {
  .hd, .ft, .noprint, .tag { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .frame { max-width: none; padding: 0; }
  .labels { grid-template-columns: repeat(3, 1fr); }
  a { color: inherit; text-decoration: none; }
}
.h-sub { font-size: 1.25rem; margin-top: 8px; }
.sw0 { background: #C62828; } .sw1 { background: #E9B824; } .sw2 { background: #B87333; } .sw3 { background: #2A323A; } .sw4 { background: #6B747D; } .sw5 { background: #9C9483; }
.form h2 + .loads { margin-top: 4px; }
.form h2:not(:first-child) { margin-top: 22px; }
.strip__cards .tool::before { left: calc(50% - 14px); }
.sec--dark .hero__price { color: #AEB6BE; }
@media (max-width: 960px) { .strip__cards .tool::before { left: 24px; } }
figure.plate { margin: 0; }
.plate__stats span { display: block; line-height: 1.3; }
.spec td.num, .spec th.num { padding-right: 16px; }
.ladder td:nth-child(3) { padding-right: 16px; }

/* ---------- v1.1.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the footer, on public pages only (the controllers opt in). The label and
   the reserved height are on the <ins>, so when tag.js (or ae-size.js) hides a slot it cannot fill, the label and the space
   go with it. 110px = 16px label + 4px gap + 90px banner; 270px on phones (300x250). Every page with the slot ends with its
   own bottom padding (.sec, .work, .prose) and the graphite footer has no top margin, so the slot keeps space below it only.
   display stays in this file and is never !important: tag.js hides a slot with style.display='none'. */
.ae-slot { padding: 0 var(--gut); }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 0 auto 48px; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 400 11px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; margin-bottom: 40px; } }
/* a slot that stays empty (no ad, or tag.js blocked) drops its labelled landmark too, not only the <ins> */
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
@media print { .ae-slot { display: none; } }