/* tonysharon.com. Shared by every page the resume build writes (scripts/build-resume.mjs).
   Hand-maintained; the build never touches it. Tokens are the resume's own, not Trailhead. */
:root {
  --bg: #101317;
  --bg-raised: #161b21;
  --panel: #1a2028;
  --line: #2a323d;
  --gold: #c8962e;
  --gold-bright: #e8b54a;
  --paper: #ede7da;
  --slate: #97a1ac;
  --slate-dim: #6b7580;
  --blue: #58a6ff;
  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  background: var(--bg); color: var(--slate);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }
a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); color: var(--paper); text-transform: uppercase; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16, 19, 23, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px; gap: 16px;
}
.topbar .name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  letter-spacing: 0.06em; color: var(--paper); text-transform: uppercase;
}
.topbar .name span { color: var(--gold); }
.topbar nav { display: flex; gap: 26px; flex-wrap: wrap; }
.topbar nav a {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate);
}
.topbar nav a:hover { color: var(--gold-bright); text-decoration: none; }

/* ---------- the phone menu ----------
   Transcribed from assets/site.css, per the three-surfaces rule. The tab row
   itself becomes the sheet below 640: same nav element, same links, same
   marking, so there is never a second list to keep in sync with the first.
   Absolutely positioned against the sticky .topbar, so it hangs under the bar
   edge to edge and nothing on the page moves when it opens; closed it is
   display:none and costs no layout at all. With JavaScript off the toggle is
   what the markup says, a link to #nav, and :target opens the sheet;
   assets/nav.js cancels the jump and runs it as a disclosure instead. */
.navtoggle { display: none; }
/* .topbar is prefixed here and nowhere else: this page's own rule is
   ".topbar nav", which outranks a bare .topnav no matter which media query it
   sits in, and without the prefix the sheet rendered permanently open under
   the bar with the Menu control beside it. */
@media (max-width: 640px) {
  .topbar .topnav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;
    gap: 0; padding: 4px 0 8px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  }
  .topbar .topnav:target, .topbar .topnav.is-open { display: flex; }
  /* Full-width rows, so the tap target is the line and not the word. */
  .topnav a { padding: 11px 24px; }
  .navtoggle {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--slate); padding: 6px 0;
  }
  .navtoggle:hover { color: var(--gold-bright); text-decoration: none; }
  .navtoggle svg { display: block; }
  /* Gold while the sheet is down, which is what gold means on a tab: this is
     where you are. Works on :target too, so the no-JS path says it as well. */
  .topnav:target ~ .navtoggle, .topnav.is-open ~ .navtoggle { color: var(--gold); }
}

.hero { padding: 72px 0 56px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.hero h1 {
  font-size: clamp(3.2rem, 9vw, 6rem); font-weight: 800; line-height: 0.95;
  letter-spacing: 0.01em; margin-bottom: 24px;
}
.hero h1 .gold { color: var(--gold-bright); }
.hero .sub { max-width: 640px; font-size: 1.12rem; }
.hero .sub strong { color: var(--paper); font-weight: 600; }

.statline {
  border-bottom: 1px solid var(--line); background: var(--bg-raised);
}
.statline .wrap {
  display: flex; flex-wrap: wrap; gap: 8px 36px;
  padding-top: 18px; padding-bottom: 18px;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate-dim);
}
.statline b { color: var(--gold-bright); font-weight: 500; }

section { padding: 64px 0; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: 0.02em; }
.section-head p { margin-top: 10px; max-width: 620px; }
.section-head { margin-bottom: 36px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px; border-top: 2px solid var(--gold);
}
.card h3 { font-size: 1.2rem; letter-spacing: 0.04em; margin-bottom: 10px; }
.card p { font-size: 0.95rem; }

.receipts { border-top: 1px solid var(--line); background: var(--bg-raised); }
.receipt { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.receipt:last-child { border-bottom: none; }
@media (max-width: 700px) { .receipt { grid-template-columns: 1fr; gap: 6px; } }
.receipt .tag {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); padding-top: 3px;
}
.receipt p strong { color: var(--paper); font-weight: 600; }

.toolbox { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .toolbox { grid-template-columns: 1fr; } }
.kit {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px;
}
.kit h3 { font-size: 1.1rem; margin-bottom: 14px; letter-spacing: 0.05em; }
.kit h3 span { color: var(--gold); }
.kit ul { list-style: none; }
.kit li {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--slate);
  padding: 7px 0; border-bottom: 1px dashed rgba(42, 50, 61, 0.8);
}
.kit li:last-child { border-bottom: none; }
.kit li b { color: var(--paper); font-weight: 500; }

.certs { column-count: 2; column-gap: 20px; }
@media (max-width: 820px) { .certs { column-count: 1; } }
.cert-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px; border-top: 2px solid var(--gold);
  break-inside: avoid; margin-bottom: 20px;
}
.cert-card h3 { font-size: 1.15rem; letter-spacing: 0.04em; margin-bottom: 4px; }
.cert-card .issuer {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.cert-card ul { list-style: none; margin-bottom: 14px; }
.cert-card li {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--slate);
  padding: 6px 0; border-bottom: 1px dashed rgba(42, 50, 61, 0.8);
}
.cert-card li:last-child { border-bottom: none; }
.cert-card li b { color: var(--paper); font-weight: 500; }
.cert-card li span { color: var(--slate-dim); }
.cert-card ul.cols { column-count: 2; column-gap: 22px; }
.cert-card ul.cols li { break-inside: avoid; }
@media (max-width: 560px) { .cert-card ul.cols { column-count: 1; } }
.cert-card .why {
  margin-top: auto; padding-top: 8px; font-size: 0.9rem; color: var(--slate);
}
.cert-card .why em { color: var(--gold-bright); font-style: normal; }

.wink { border-top: 1px solid var(--line); background: var(--bg-raised); }
.wink .inner { max-width: 720px; }
.wink p { font-size: 1.08rem; }
.wink p strong { color: var(--paper); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  display: inline-block; font-family: var(--font-mono); font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 24px;
  border-radius: 6px; border: 1px solid var(--line); color: var(--paper);
}
.btn:hover { text-decoration: none; border-color: var(--gold); color: var(--gold-bright); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #17130a; font-weight: 500; }
.btn-gold:hover { background: var(--gold-bright); color: #17130a; }

.future-text {
  display: inline-block; margin: 0;
  font-family: "Tourney", var(--font-display); font-style: italic; font-weight: 300;
  text-transform: uppercase; white-space: nowrap;
  font-size: clamp(1.2rem, 3.4vw, 2.2rem); line-height: 1; letter-spacing: 0.05em;
  background: linear-gradient(100deg, #c8962e 0%, #e8b54a 28%, #58a6ff 52%, #0093ff 66%, #e8b54a 84%, #c8962e 100%);
  background-size: 250% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(227, 177, 75, 0.28);
  animation: future-shift 10.7s ease-in-out infinite alternate;
}
@keyframes future-shift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .future-text { background: none; color: var(--gold-bright); }
}

footer { border-top: 1px solid var(--line); padding: 32px 0 40px; text-align: center; }
footer .wrap {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate-dim);
}

/* ---------- the portrait, in the hero ----------
   Tony's studio headshot, cut to 4:5. The offset gold frame is the only
   decoration; the image is not graded, its own light is already right. */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center; }
.portrait { position: relative; width: 300px; max-width: 100%; justify-self: end; margin: 0; }
.portrait::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--gold); border-radius: 10px; opacity: 0.7;
}
.portrait img {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
}
.portrait figcaption {
  margin-top: 16px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate-dim);
}
.portrait figcaption b { color: var(--gold); font-weight: 500; }
@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .portrait { width: 240px; justify-self: start; }
}

.statline .asof { color: var(--slate-dim); }

/* ---------- not the usual path: the contrast table ---------- */
.contrast {
  display: grid; grid-template-columns: 190px 1fr 1fr;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel);
}
.contrast > div { padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.contrast > div:nth-last-child(-n+3) { border-bottom: none; }
.contrast .k {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); padding-top: 22px;
}
.contrast .u { color: var(--slate-dim); border-right: 1px solid var(--line); }
.contrast .t { color: var(--slate); background: rgba(200, 150, 46, 0.045); }
.contrast .t strong { color: var(--paper); font-weight: 600; }
.contrast .h {
  background: var(--bg-raised); font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1.05rem; color: var(--paper); padding-top: 14px; padding-bottom: 14px;
}
.contrast .h.t { color: var(--gold-bright); }
.contrast .h.k { color: var(--slate-dim); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; padding-top: 19px; }
@media (max-width: 760px) {
  .contrast { grid-template-columns: 1fr; }
  .contrast .h { display: none; }
  .contrast .k { padding-bottom: 4px; border-bottom: none; }
  .contrast .u { border-right: none; border-bottom: none; padding-top: 4px; padding-bottom: 10px; }
  .contrast .u::before, .contrast .t::before {
    display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em;
    text-transform: uppercase; margin-bottom: 4px;
  }
  .contrast .u::before { content: "The usual AI engineer"; color: var(--slate-dim); }
  .contrast .t::before { content: "Tony"; color: var(--gold-bright); }
}

/* ---------- the practice in numbers ---------- */
.numbers { border-top: 1px solid var(--line); background: var(--bg-raised); }
.group-head {
  margin: 34px 0 12px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 12px;
}
.group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px 16px; }
.tile .v { font-weight: 600; font-size: 2rem; line-height: 1.1; color: var(--paper); }
.tile .l { margin-top: 6px; font-size: 0.88rem; color: var(--slate); line-height: 1.4; }
.tile .s {
  margin-top: 8px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate-dim); line-height: 1.5;
}
.chart { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px 22px 16px; margin-top: 14px; }
.chart h3 { font-size: 1.15rem; letter-spacing: 0.04em; margin-bottom: 4px; }
.chart .sub { font-size: 0.9rem; color: var(--slate-dim); margin-bottom: 16px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .cap { margin-top: 14px; font-size: 0.93rem; color: var(--slate); max-width: 70ch; }
.chart .cap strong { color: var(--paper); font-weight: 600; }
.chart .foot { margin-top: 8px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--slate-dim); }
.chart details { margin-top: 10px; }
.chart summary {
  cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--slate-dim);
}
.chart summary:hover { color: var(--gold-bright); }
.chart .tblwrap { overflow-x: auto; }
.chart table {
  margin-top: 10px; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.76rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chart th, .chart td { text-align: left; padding: 5px 14px 5px 0; border-bottom: 1px dashed rgba(42, 50, 61, 0.8); color: var(--slate); }
.chart th { color: var(--paper); font-weight: 500; }
.chart td.n, .chart th.n { text-align: right; }
.legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
}
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 7px; }
/* Chart marks: a gold one step darker than the brand gold, and the Inkscape blue.
   Both validated as a pair on this surface (lightness band, chroma, CVD, contrast). */
.mark { fill: #b8892a; }
.mark.alt { fill: #3b82c4; }
.hit { outline: none; cursor: default; }
.hit:hover .mark, .hit:focus .mark { fill: var(--gold-bright); }
.hit:hover .mark.alt, .hit:focus .mark.alt { fill: var(--blue); }
.grid { stroke: var(--line); stroke-width: 1; }
.axis { font-family: var(--font-mono); font-size: 11px; fill: var(--slate-dim); }
.dl { font-family: var(--font-mono); font-size: 11px; fill: var(--paper); }
.dl.in { fill: #17130a; font-weight: 600; }
.rowlab { font-family: var(--font-body); font-size: 12.5px; fill: var(--slate); }
.tip {
  position: fixed; z-index: 60; pointer-events: none; display: none; max-width: 260px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--slate);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.tip b { display: block; color: var(--paper); font-size: 0.95rem; font-weight: 500; }

/* ---------- what the spend built: the customer voice ---------- */
.voices { border-top: 1px solid var(--line); }
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.quote.wide { grid-column: 1 / -1; }
.quote blockquote { margin: 0; font-size: 1.08rem; line-height: 1.55; color: var(--paper); }
.quote blockquote::before { content: "\201C"; color: var(--gold); font-family: var(--font-display); font-size: 2.2rem; line-height: 0; vertical-align: -0.35em; margin-right: 4px; }
.quote cite {
  font-style: normal; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--slate-dim);
}
.quote cite b { color: var(--gold); font-weight: 500; }
.quote .turn {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(42, 50, 61, 0.8);
  font-size: 0.9rem; color: var(--slate);
}
.quote .turn strong { color: var(--paper); font-weight: 600; }
.tile .v small { font-size: 1.1rem; color: var(--slate); font-weight: 500; margin-left: 4px; }
.tile.attested { border-color: rgba(200, 150, 46, 0.45); }
.tile.attested .s { color: var(--gold); }

/* ---------- what is actually for sale ---------- */
.time { border-top: 1px solid var(--line); }
.time .inner { max-width: 720px; }
.time p { font-size: 1.08rem; margin-bottom: 18px; }
.time p strong { color: var(--paper); }
/* .time p outranks a bare class, so the closing line is scoped the same way */
.time .time-line {
  margin: 26px 0 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 4.8rem); line-height: 1; letter-spacing: 0.02em; color: var(--paper);
}
.time-line em { font-style: normal; color: var(--gold); padding: 0 0.12em; }
.time-line span { color: var(--gold-bright); }

/* ---------- the path: an ordinal timeline, no dates ---------- */
.path ol { list-style: none; position: relative; padding-left: 34px; max-width: 760px; }
.path ol::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.path li { position: relative; padding-bottom: 28px; }
.path li:last-child { padding-bottom: 0; }
.path li::before {
  content: ""; position: absolute; left: -34px; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--bg);
}
.path li:last-child::before { background: var(--gold-bright); }
.path h3 { font-size: 1.15rem; letter-spacing: 0.04em; margin-bottom: 6px; }
.path p { font-size: 0.97rem; max-width: 66ch; }
.path p strong { color: var(--paper); font-weight: 600; }

/* ---------- principles, as shipped ---------- */
.principles { border-top: 1px solid var(--line); background: var(--bg-raised); }
.tenets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .tenets { grid-template-columns: 1fr; } }
.tenet { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: 10px; padding: 22px 24px; }
.tenet blockquote {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.1;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--paper);
}
.tenet p { font-size: 0.93rem; }
.tenet p b { color: var(--gold-bright); font-weight: 500; }

/* ---------- questions a client asks first ---------- */
.faq { border-top: 1px solid var(--line); background: var(--bg-raised); }
.faq dl { max-width: 780px; margin: 0; }
.faq dt {
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--paper); margin-top: 28px;
}
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 8px 0 0; font-size: 1rem; color: var(--slate); }

/* ---------- multi-page chrome (2026-09-03) ----------
   The one page became six. The wordmark is the home link, the current page's tab
   is gold, sub-pages open on an eyebrow and an h1 styled like the section h2s,
   and the home page ends on a card per page. */
.topbar a.name:hover { text-decoration: none; }
.topbar nav a[aria-current="page"] { color: var(--gold); }
.section-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: 0.02em; }
.section-head .eyebrow { margin: 0 0 16px; max-width: none; }
.next-up { border-top: 1px solid var(--line); background: var(--bg-raised); }
.next { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1000px) { .next { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .next { grid-template-columns: 1fr; } }
.next a.card { display: flex; flex-direction: column; color: var(--slate); padding: 20px; }
.next a.card:hover { text-decoration: none; border-color: var(--gold); color: var(--slate); }
.next a.card h3 { font-size: 1.1rem; }
.next a.card p { font-size: 0.9rem; }
.next .more {
  margin-top: auto; padding-top: 14px; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright);
}
/* A sub-page whose first section carries its own top rule would draw it right under
   the topbar's bottom rule; the bar's rule is the only one at the top of a page. */
main > section:first-child { border-top: none; }