/* AX notes only (linked from build.py on /ax/<slug>/ pages; site.css is at its 40 KB budget).
   Cover band: the note's .hero becomes a band of the topic colour. The cover art (tools/ax_cover.py) is the first
   child; eyebrow, h1, lead and meta sit on the band; the hero's other children (first paragraph, source note) follow
   on the page ground. Phones: art on top, text under it, full bleed. Desktop: text left, art right, rounded band.
   Ads (ax_extras.ad_unit): in-text units everywhere, a left rail and a unit under the side TOC on wide screens. */
.ax-t-workflow { --cover:#24305a;} .ax-t-quality { --cover:#1d3f37;} .ax-t-android { --cover:#21402c;}
.ax-t-games { --cover:#4b2647;} .ax-t-store { --cover:#4a3322;} .ax-t-web { --cover:#1d3a4f;} .ax-t-retro { --cover:#3b2f52;}

.page-read main.ax-note > .hero { display:grid;grid-template-columns:minmax(0, 1fr);max-width:none;padding:0;
  margin:0 calc(-1 * var(--sds-gutter)) var(--sds-space-2);}
.ax-note > .hero::before { content:"";grid-column:1 / -1;grid-row:1 / 6;background:var(--cover);}
.ax-note > .hero > * { grid-column:1;position:relative;padding-inline:var(--sds-gutter);max-width:calc(var(--sds-width-read) + 2 * var(--sds-gutter));}
.ax-note > .hero > .ax-cover-art { grid-row:1;margin:0;padding:0;max-width:none;}
.ax-cover-art img { display:block;width:100%;height:auto;}
.ax-note > .hero > .eyebrow { grid-row:2;padding-top:var(--sds-space-6);color:rgb(255 255 255 / .8);}
.ax-note > .hero > h1 { grid-row:3;color:#fff;margin:var(--sds-space-2) 0 var(--sds-space-3);}
.ax-note > .hero > .lead { grid-row:4;color:rgb(255 255 255 / .88);margin:0;}
.ax-note > .hero > .meta { grid-row:5;color:rgb(255 255 255 / .74);margin:var(--sds-space-4) 0 0;padding-bottom:var(--sds-space-8);}
.ax-note > .hero > .meta a { color:inherit;}
.ax-note > .hero > :nth-child(n + 6):not(.meta) { margin-top:var(--sds-space-6);}
.ax-note > .hero > .note { margin-inline:var(--sds-gutter);padding-inline:var(--sds-space-4);max-width:var(--sds-width-read);}

@media (min-width: 900px) {
  .page-read main.ax-note > .hero { grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);margin:var(--sds-space-4) 0 var(--sds-space-2);}
  .ax-note > .hero::before { grid-row:1 / 5;border-radius:var(--sds-radius-l, 16px);}
  .ax-note > .hero > .ax-cover-art { grid-column:2;grid-row:1 / 5;overflow:hidden;border-radius:0 var(--sds-radius-l, 16px) var(--sds-radius-l, 16px) 0;}
  .ax-cover-art img { height:100%;object-fit:cover;}
  .ax-note > .hero > .eyebrow { grid-row:1;align-self:end;padding:var(--sds-space-10) var(--sds-space-8) 0;}
  .ax-note > .hero > h1 { grid-row:2;padding-inline:var(--sds-space-8);font-size:clamp(1.75rem, 1.1rem + 1.3vw, 2.5rem);}
  .ax-note > .hero > .lead { grid-row:3;padding-inline:var(--sds-space-8);}
  .ax-note > .hero > .meta { grid-row:4;padding:0 var(--sds-space-8) var(--sds-space-10);}
  .ax-note > .hero > :not(.ax-cover-art, .eyebrow, h1, .lead, .meta) { grid-column:1 / -1;padding-inline:0;margin-inline:0;}
  .ax-note > .hero > .note { padding-inline:var(--sds-space-4);}
}

/* ads */
.ad { margin:var(--sds-space-8) 0;text-align:center;}
.ad-label { margin:0 0 var(--sds-space-1);color:var(--sds-fg-neutral-muted);font-size:12px;line-height:1.4;letter-spacing:.04em;}
.ad-in ins { min-height:250px;}
.ad-rail, .ad-side { display:none;}
.ad-preview .ad-box { display:grid;place-items:center;min-height:250px;border:1px dashed var(--sds-stroke-neutral-decor);border-radius:var(--sds-radius-m);color:var(--sds-fg-neutral-muted);font-size:12px;}
.ad-rail.ad-preview .ad-box { min-height:600px;}

/* wide: text column + side column (TOC, then a 300 px unit); wider still: a 160 px left rail */
@media (min-width: 1100px) {
  .page-read main.ax-note { display:grid;grid-template-columns:minmax(0, var(--sds-width-read)) 300px;column-gap:56px;align-items:start;}
  .ax-note > * { grid-column:1;}
  .page-read main.ax-note > :is(.crumbs, .hero) { grid-column:1 / -1;}
  .page-read main.ax-note > .ax-side { grid-column:2;grid-row:3 / span 999;max-width:none;position:sticky;top:calc(var(--sds-header-h) + 24px);padding-top:var(--sds-space-6);}
  .ax-side .toc { max-height:calc(100dvh - 420px);overflow:auto;}
  .ad-side { display:block;margin:var(--sds-space-6) 0 0;}
  .ad-side ins { width:300px;height:250px;}
}
@media (min-width: 1380px) {
  .page-read main.ax-note:has(> .ad-rail) { width:min(100% - 2 * var(--sds-gutter), 1260px);grid-template-columns:160px minmax(0, var(--sds-width-read)) 300px;column-gap:48px;}
  .page-read main.ax-note:has(> .ad-rail) > * { grid-column:2;}
  .page-read main.ax-note:has(> .ad-rail) > :is(.crumbs, .hero) { grid-column:1 / -1;}
  .page-read main.ax-note:has(> .ad-rail) > .ax-side { grid-column:3;}
  .ax-note:has(> .ad-rail) > .hero > :not(.ax-cover-art, .eyebrow, h1, .lead, .meta) { margin-left:208px;}
  .page-read main.ax-note > .ad-rail { display:block;grid-column:1;grid-row:3 / span 999;position:sticky;top:calc(var(--sds-header-h) + 24px);margin:var(--sds-space-6) 0 0;max-width:none;}
  .ad-rail ins { width:160px;height:600px;}
}
@media print { .ad, .ax-cover-art { display:none;} .ax-note > .hero::before { display:none;} .ax-note > .hero > * { color:inherit;} }