/* ═══════════════════════════════════════════════════════════════════
   QR STUDIO - THEME v2
   Generated by build-theme.py.

   Every selector is prefixed with `html` on purpose. The site's main
   stylesheet is a 33KB <style> block inside <body>, which therefore comes
   AFTER this file in document order and would otherwise win. Prefixing
   lifts specificity from (0,1,0) to (0,1,1) so these rules win wherever
   the <link> sits - and it can stay in <head>, avoiding a flash of the
   old palette on load.

   Scope: colour, typography, tap targets. This file contains no layout
   geometry, no ad-slot sizing and no behaviour. Removing the <link> tag
   restores the previous appearance exactly.
   ═══════════════════════════════════════════════════════════════════ */

/* Fonts are NOT @import-ed here on purpose: @import serialises the font
   request behind this stylesheet's own download. The existing Google Fonts
   <link> in each page is rewritten instead, so fonts stay parallel. */

html:root{
  /* ── Palette remap. Same variable names the site already uses, so every
        existing rule picks these up untouched. ── */
  --bg:#06070a;              /* was #0d1117 - GitHub's exact background */
  --surface:#0d0f13;         /* was #161b22 */
  --surface2:#14171d;        /* was #1f2630 */
  --border:#282d36;          /* was #2d3544 */
  --accent:#ccff33;          /* was #14b8a6 teal */
  --accent2:#a8d626;         /* was #fb7185 rose - now same hue family, so
                                existing gradients read as one colour ramp */
  --accent-glow:rgba(204,255,51,.16);
  --text:#f2f4f5;            /* 18.26:1 on --bg */
  --muted:#b8bec8;           /* was #8b97a8 (4.9:1) - now 10.78:1 */
  --success:#5ee08a;

  /* ── New tokens, available to future work ── */
  --line-lit:#3a4150;
  --text-3:#828b99;          /* 5.85:1 - 14px floor */
  --on-accent:#06070a;
  --tap:44px;
  --font-body:'Archivo',system-ui,-apple-system,sans-serif;
  --font-display:'Syne',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* --radius and every --banner-* dimension are intentionally NOT redefined:
     they control layout geometry and ad-slot sizing. */
}

/* ── Body face: DM Sans out, Archivo in. Syne stays on headings. ── */
html body,html input,html button,html select,html textarea,
html p,html li,html td,html label,html span,html div{
  font-family:var(--font-body);
}
html h1,html h2,html h3,html h4,html .logo,html .hero-title{font-family:var(--font-display)}
html code,html kbd,html pre,html samp{font-family:var(--font-mono)}

/* The rule above is `html button` = (0,0,2) and loses to ANY single class,
   so every control the page styles by class kept asking for 'DM Sans' - a
   font the site stopped loading when the fonts were swapped to Archivo.
   They were silently rendering in the generic sans fallback while the rest
   of the page used Archivo. Class-level selectors to actually win.
   Cosmetic only: font-family, no behaviour touched. */
html .faq-question,html .type-tab,html .ec-btn,html .download-btn,
html .download-option,html .grad-dir-sel,html .notify-input,
html .math-answer,html .form-group input,html .form-group textarea,
html .form-group select{font-family:var(--font-body)}

html body{-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}


/* ── 14px floor: labels and badges (25 selectors) ── */
html #qs-reopen-btn,
html .badge,
html .blog-card-tag,
html .design-section-title,
html .download-menu-label,
html .fact-card .fact-label{font-size:14px}
html .fhint,
html .fl,
html .form-privacy,
html .ft,
html .hero-feature,
html .login-lbl{font-size:14px}
html .logo-info .logo-hint,
html .notify-hint,
html .pglbl,
html .post-tag,
html .qs-cat-badge,
html .ref-pill{font-size:14px}
html .shape-label,
html .stat-label,
html .stat-lbl,
html .stat-note,
html .tbadge,
html .type-tab{font-size:14px}
html th{font-size:14px}

/* ── 16px floor: reading text (83 selectors) ── */
html #qs-banner-text p,
html #qs-modal-desc,
html .back-link,
html .badge,
html .barlbl,
html .barval{font-size:16px}
html .blog-card-date,
html .blog-card-read,
html .btn-p,
html .btn-s,
html .color-field label,
html .color-picker-wrap span{font-size:16px}
html .ec-btn,
html .empty p,
html .fact-card .fact-desc,
html .feature-pill,
html .fi,
html .field-error{font-size:16px}
html .fmt,
html .fmt-desc,
html .fmt-name,
html .footer-copy,
html .footer-links a,
html .footer-seo-text{font-size:16px}
html .form-group label,
html .format-card .fmt-desc,
html .format-card .fmt-name,
html .fsel,
html .fta,
html .grad-dir-sel{font-size:16px}
html .hero-feature,
html .info-text p,
html .ios-save-tip,
html .qrs-offer-dismiss,
html .qrs-offer-sub{font-size:16px}
html .last-updated,
html .login-error,
html .login-sub,
html .logo-bg-row label,
html .logo-info .logo-name,
html .logo-size-row label{font-size:16px}
html .logo-size-row span,
html .logo-upload-text,
html .logout-btn,
html .math-challenge-label,
html .math-error-msg,
html .math-hint{font-size:16px}
html .math-hint-text,
html .notify-label,
html .page-hero .badge,
html .page-sub,
html .panel-title,
html .post-breadcrumb{font-size:16px}
html .post-date,
html .post-read-time,
html .qr-meta .type-badge,
html .qr-placeholder p,
html .qr-type-card .type-desc,
html .qr-type-card .type-name{font-size:16px}
html .qs-btn,
html .qs-cat-detail p,
html .qs-cat-name,
html .response-notice p,
html .rsel,
html .scan-label{font-size:16px}
html .scheck,
html .section-number,
html .slider-wrap .slider-header,
html .step-badge,
html .sub,
html .syncst{font-size:16px}
html .tab-btn,
html .tagline,
html .tlink,
html .tm,
html .toast-a,
html .toggle-label{font-size:16px}
html .type-tab,
html .use-case p,
html .vs-box,
html table,
html td{font-size:16px}

/* ── Tap targets: WCAG floor. Live nav links were 17px tall. ──
   NOTE on specificity: `html button` is only (0,0,2) and loses to any
   single class, e.g. the page's own `.type-tab{min-height:40px}`. The
   element rules below are the baseline; the class list after them is what
   actually wins where the page sets an explicit height. */
html nav a,html .footer-links a,html .nav-link,html .foot a{
  display:inline-flex;align-items:center;min-height:var(--tap);
}
html button,html input[type=submit],html input[type=button],html select,
html input[type=text],html input[type=url],html input[type=email],html input[type=tel],html input[type=password]{
  min-height:var(--tap);
}
/* Class-level (0,1,1) so they beat the page's own (0,1,0) height rules */
html .type-tab,html .btn,html .btn-s,html .btn-p,html .qs-btn,html .ec-btn,
html .fmt,html .tab-btn,html .logout-btn,html .qrs-offer-dismiss,html .back-link{
  min-height:var(--tap);
}
/* Skip link: (0,1,2), and it must stay reachable by keyboard */
html a[href^="#"].skip,html a[href="#main-tool"]{min-height:var(--tap);display:inline-flex;align-items:center}
/* Colour swatches were 28×28. The live markup uses bare <input type="color">,
   not a .swatch class, so the attribute selector is the one that matters. */
html .color-swatch,html .swatch,html .sw,
html input[type=color]{min-width:var(--tap);min-height:var(--tap)}

/* Range slider track was 4px tall - unusable on touch */
html input[type=range]{height:var(--tap);background:transparent}
html input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:3px;background:var(--surface2);border:1px solid var(--border);
}
html input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;margin-top:-10px;
  border-radius:50%;background:var(--accent);border:3px solid var(--bg);
}
html input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--surface2)}
html input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border:3px solid var(--bg);border-radius:50%;background:var(--accent);
}

/* ── Ink on lime ──────────────────────────────────────────────────
   The old accent was teal (#14b8a6), dark enough that white text on it
   was legible. Lime is a LIGHT colour: white on #ccff33 is 1.17:1, which
   is effectively invisible. Everything sitting on the accent needs dark
   ink instead.

   Deliberately EXCLUDED: .logo and the hero <em>. Those use the gradient
   as a text fill (background-clip:text), so their `color` is only a
   fallback - forcing it dark would blank out the wordmark and headline.

   Scope matters here. Only classes VERIFIED to render on an accent
   background belong in this list. `.tab-btn.active`, `.btn-p` and
   `.qs-btn` were in it speculatively; none of them exists on the public
   site, and `.tab-btn.active` in the ad manager is lime TEXT on a dark bar,
   so forcing dark ink made the active tab invisible.

   The first five below were verified on the HOMEPAGE, which turned out to
   be the whole problem: the inner pages use entirely different class names
   for the same components, so 33 of 35 pages kept white-on-lime at 1.17:1
   while index.php and blog-index.php looked correct. The eight added here
   were found by walking every element on all 35 live pages, resolving the
   painted background up the ancestor chain and computing the real contrast
   ratio - 104 elements in total. Verifying the page you happen to be
   looking at is not verification. */
html .generate-btn,
html .step-badge,
html .type-tab.active,
html .ec-btn.active,
html a[href="#main-tool"],
/* measured white-on-lime at 1.17:1 across the inner pages, 2026-08-04 */
html .cta-btn,          /* "Open QR Generator", 29 pages */
html .hero-cta,         /* "Generate Free QR Code", 9 pages */
html .step-number,      /* numbered how-to steps, 40 elements */
html .section-number,   /* numbered policy sections, 17 elements */
html .benefit-num,      /* benefits.php, 6 elements */
html .notify-btn,       /* advertise.php */
html .submit-btn,       /* contact.php */
html .icon-badge{       /* contact.php, was 1.06:1 */
  color:var(--on-accent);
}
/* Children (icons, spans) must not re-inherit the old white */
html .generate-btn *,
html .type-tab.active *,
html .ec-btn.active *,
html .step-badge *,
html .cta-btn *,
html .hero-cta *,
html .step-number *,
html .section-number *,
html .benefit-num *,
html .notify-btn *,
html .submit-btn *,
html .icon-badge *{color:inherit}

/* The ad manager's active tab is lime text on a dark bar, not ink on lime.
   Stated explicitly so a future edit to the rule above cannot re-break it. */
html .tab-btn.active{color:var(--accent)}

/* The "Skip to QR Generator" link carries an INLINE style
   (background:var(--accent);color:#fff;font-family:'DM Sans'), and inline
   styles outrank every selector. !important is the only way to reach it
   without editing markup. It also still names DM Sans, which no longer
   loads, so the family is corrected here too. */
html a[href="#main-tool"]{
  color:var(--on-accent)!important;
  font-family:var(--font-body)!important;
}

/* ── QR-type tabs: wrap on a phone instead of scrolling ──────────
   The row is `nowrap` + `overflow-x:auto`, so it is a horizontal
   scroller. That was survivable at 13px; at 16px it overflows a 362px
   column by 314px, hiding SMS, Wi-Fi and vCard - three of the seven
   types - behind a scroll with no visual affordance. Wrapping shows
   all seven. Desktop keeps the single row. */
@media(max-width:640px){
  html .type-tabs{
    flex-wrap:wrap;
    overflow-x:visible;
    justify-content:center;      /* centre the short second row */
  }
  /* Fixing the basis at a quarter of the row forces exactly 4 + 3 across
     two rows. Without it the tabs pack by their own widths and spill to
     three ragged rows. `flex-grow:0` keeps the second row's items the
     same size as the first rather than stretching them. */
  html .type-tab{
    flex:0 1 calc(25% - 6px);
    min-width:0;
    justify-content:center;
    padding-left:4px;
    padding-right:4px;
  }
}

/* ── Corner-shape picker: let it wrap ────────────────────────────
   The page hardcodes `repeat(5, 1fr)`. That fitted when the labels were
   9px, but raising them to 14px above widened each cell to ~79px, so the
   row needs 435px and overflows a 342px phone column by 93px - which cut
   the 5th option (Heart) off screen entirely. auto-fit keeps five across
   on desktop and wraps to three-plus-two on a phone. */
html .shape-grid{
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
}

/* ── Phone spacing: section padding stacks up ────────────────────
   These paddings are sized for a wide screen. On a phone they collide:
   main.app's 80px bottom sits directly on .editorial-section's 60px top,
   giving 140px of empty scroll between the tool and the first heading,
   and .faq-section adds another 100px on top of that. Roughly halved
   below 640px; desktop is untouched. */
@media(max-width:640px){
  html main.app{padding-bottom:32px}
  html .editorial-section{padding-top:36px}

  /* The switch is 40x22: fine to look at, small to hit with a thumb, and its
     caption is a sibling <span> rather than part of the label, so the text is
     not a target either. Grow the touch area with a transparent overlay
     centred on the switch - nothing moves, so this costs no vertical space. */
  html .toggle{position:relative}
  html .toggle::after{
    content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:48px;height:44px;
  }

  /* The 198-word editorial block is required by AdSense as visible publisher
     content ("Do not remove or hide this section" in index.php), so on a
     phone it is COLLAPSED, not hidden: still rendered, still in the DOM,
     one tap away. Cuts roughly 600px of scrolling. CSS-only, no JS.
     The control itself is display:none outside this query (see base rule),
     so desktop is untouched and never shows a stray checkbox. */
  /* .editorial-section prefix so this beats the base display:none rule,
     which sits LATER in the file and would otherwise win on source order */
  html .editorial-section .ed-more-btn{display:inline-block}
  html .ed-body{
    max-height:7.5em;overflow:hidden;position:relative;
    transition:max-height .35s ease;
  }
  html .ed-body::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:3.2em;
    background:linear-gradient(to bottom,rgba(6,7,10,0),var(--bg));
    pointer-events:none;transition:opacity .2s;
  }
  html .ed-more-btn{
    display:inline-block;margin-top:10px;cursor:pointer;
    font-size:14px;font-weight:600;color:var(--accent);
    text-decoration:underline;text-underline-offset:3px;
    min-height:44px;line-height:44px;
  }
  html .ed-more-toggle{position:absolute;opacity:0;width:0;height:0}
  html .ed-more-toggle:checked ~ .ed-body{max-height:200em}
  html .ed-more-toggle:checked ~ .ed-body::after{opacity:0}
  html .ed-more-toggle:checked ~ .ed-more-btn span::before{content:"Show less"}
  html .ed-more-toggle:checked ~ .ed-more-btn span{font-size:0}
  html .ed-more-toggle:checked ~ .ed-more-btn span::before{font-size:14px}
  /* keyboard users still get a visible focus ring on the label */
  html .ed-more-toggle:focus-visible ~ .ed-more-btn{
    outline:2px solid var(--accent);outline-offset:3px;
  }
  html .faq-section{padding-top:36px;padding-bottom:28px}
  html footer{padding-top:32px;padding-bottom:28px}
}

/* ── Heart QR example gallery (heart-shaped-qr-code.php) ──────
   The SVGs are dark-on-white by design, because that is what a
   scanner needs. On a near-black page they must sit on their own
   white card or the white background reads as a bug. */
html .qr-example-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;margin-top:20px;
}
html .qr-example-grid figure{margin:0}
html .qr-example-grid img{
  width:100%;height:auto;max-width:280px;display:block;
  background:#fff;border-radius:12px;padding:14px;
  border:1px solid var(--border);
}
html .qr-example-grid figcaption{
  margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted);
}
html .qr-example-grid figcaption strong{
  color:var(--text);font-family:var(--font-mono,monospace);
}

/* A single example image inside body copy (wedding / valentine pages).
   Same white card treatment as the grid, just not in a grid. */
/* The figure is not capped at the image width: doing that squeezed the
   caption into a 280px ragged column. Cap the IMAGE, let the caption run
   to a comfortable measure. */
html .inline-fig{margin:20px 0 0;max-width:none}
html .inline-fig img{
  width:100%;max-width:280px;height:auto;display:block;background:#fff;
  border-radius:12px;padding:14px;border:1px solid var(--border);
}
html .inline-fig figcaption{
  margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted);
  max-width:52ch;
}
html .qr-example-grid .inline-fig{max-width:none}

/* ── Breadcrumb trail (heart-shaped-qr-code.php) ──────────────
   Sits above the hero. Muted so it orients without competing with
   the H1, and the current page is not a link. */
html .crumbs{
  max-width:1100px;margin:0 auto;padding:14px 20px 0;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:14px;color:var(--muted);
}
html .crumbs a{color:var(--muted);text-decoration:none}
html .crumbs a:hover{color:var(--accent);text-decoration:underline}
html .crumbs span[aria-hidden]{opacity:.5}
html .crumbs [aria-current="page"]{color:var(--text)}
@media(max-width:640px){html .crumbs{font-size:13px;padding-top:10px}}

/* Deploy note: assets must be uploaded BEFORE the HTML that links
   them. ftp-upload.py used to send alphabetically, so index.php
   carried a new ?v= hash while theme.css was still the old file;
   anyone loading in that window cached the wrong CSS for a year
   under a correct-looking URL (.htaccess marks CSS immutable). */

/* ── Low-contrast advisory under the colour pickers ───────────
   Two levels: amber when the code should still scan on screen,
   red when it almost certainly will not. Advisory only, so it
   must not look like a blocking error. */
html .qs-contrast-warn{
  margin:12px 0 0;padding:10px 12px;border-radius:10px;
  font-size:14px;line-height:1.45;border:1px solid transparent;
}
html .qs-contrast-warn[hidden]{display:none}
/* Both wordings are in the DOM; the media query picks one. display:none also
   drops the unused copy from the accessibility tree, so it is announced once. */
html .qs-cw-short{display:none}
@media(max-width:640px){
  html .qs-cw-full{display:none}
  html .qs-cw-short{display:inline}
}
html .qs-contrast-warn[data-level="warn"]{
  color:#ffd166;border-color:rgba(255,209,102,.35);background:rgba(255,209,102,.08);
}
html .qs-contrast-warn[data-level="bad"]{
  color:#ff9b9b;border-color:rgba(255,155,155,.4);background:rgba(255,155,155,.09);
}

/* ── Editorial disclosure control: mobile only ────────────────
   The checkbox and its label exist in the markup on every screen
   size, so they must be hidden by default or desktop would show a
   stray checkbox and a "Read more" that does nothing. The
   max-width:640px block below turns the label back on. */
html .ed-more-toggle{position:absolute;opacity:0;width:1px;height:1px;margin:0}
html .ed-more-btn{display:none}

/* ── FAQ accordion: make the collapsed state real ─────────────
   A closed .faq-a was only max-height:0 + overflow:hidden, which
   hides it visually but leaves the text in the accessibility
   tree, so a screen reader read every answer while the button
   said aria-expanded="false". visibility:hidden removes it and
   still animates. The 0s delay holds it visible until the
   collapse finishes, so the animation still reads. */
html .faq-a{
  visibility:hidden;
  transition:max-height .3s ease,padding .3s ease,visibility 0s linear .3s;
}
html .faq-item.open .faq-a{
  visibility:visible;
  transition:max-height .3s ease,padding .3s ease,visibility 0s;
}

/* ── Links inside body copy ───────────────────────────────────
   The site had NO rule for these anywhere: the inline stylesheet
   only ever styled .footer-links a. So every in-content link fell
   back to the browser default blue, and purple once visited, on a
   near-black page. Unreadable, and it looked broken.
   :not([class]) so the CTA buttons, breadcrumb and footer keep
   their own treatment. */
html .content a:not([class]),
html .highlight-box a:not([class]),
html .faq-a a:not([class]),
html figcaption a:not([class]){
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(204,255,51,.45);
}
/* visited must not drift to purple */
html .content a:not([class]):visited,
html .highlight-box a:not([class]):visited,
html .faq-a a:not([class]):visited,
html figcaption a:not([class]):visited{color:var(--accent)}
html .content a:not([class]):hover,
html .highlight-box a:not([class]):hover,
html .faq-a a:not([class]):hover,
html figcaption a:not([class]):hover{
  color:var(--text);text-decoration-color:currentColor;
}

/* ── Footer: four labelled columns, not 22 loose links ────────
   The flat row wrapped into a ragged block with nothing to signal
   that a generator link and a legal link are different things.
   The old rule was a flex row, so the grid has to override it. */
html .footer-links{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px 24px;
  max-width:1100px;margin:0 auto;padding:0 20px;
  text-align:left;
}
html .footer-col{display:flex;flex-direction:column;gap:10px;min-width:0}
html .footer-col-h{
  font-size:12px!important;line-height:1.2;margin:0 0 2px;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent);font-weight:600;
}
/* The 44px tap-target floor is right for a row of touch targets and wrong
   for a stacked column on a pointer device, where it made the nav 394px
   tall. Relaxed on desktop only; the mobile query below restores it. */
html .footer-col a,
html .footer-col span[aria-current]{
  font-size:14px;line-height:1.35;color:var(--muted);
  text-decoration:none;padding:2px 0;
  min-height:0;display:block;margin:0;
}
html .footer-col a:hover{color:var(--text);text-decoration:underline}
/* current page: present but not a link, so a group still reads complete */
html .footer-col span[aria-current]{color:var(--text);opacity:.75}

@media(max-width:860px){
  html .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  /* Tightened at the user's request. Rows are 32px with 2px between them,
     so adjacent targets are still ~34px apart - below the 44px ideal but
     the links are short and stacked, and the previous 36px+16px was
     leaving a lot of dead space on a phone. */
  html .footer-col{gap:2px}
  html .footer-col-h{margin-bottom:0}
  html .footer-col a,html .footer-col span[aria-current]{
    min-height:32px;padding:5px 0;line-height:1.3;
  }
}
@media(max-width:400px){
  html .footer-links{gap:22px 12px}
  html .footer-col a,html .footer-col span[aria-current]{font-size:13px}
}

/* ── Focus visibility (was relying on the browser default) ── */
html :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Single accent: anything that was rose now reads as lime ── */
html ::selection{background:var(--accent);color:var(--on-accent)}

@media(prefers-reduced-motion:reduce){
  html *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}


/* ══════════════════════════════════════════════════════════════════════
   TOP BAR: header shares the leaderboard band
   ══════════════════════════════════════════════════════════════════════
   The header used to be its own strip above the leaderboard, which on a wide
   screen meant two stacked bars and a lot of empty space either side of a
   728px ad. Here the header is lifted out of flow and laid over the band, so
   the band rises to the top of the document and the logo and the right-hand
   link fill the space the ad was never going to use.

   The ad itself is untouched: the band still centres a 728px inner, so the
   creative keeps its exact size and horizontal position. The header is
   pointer-events:none (children re-enabled) so it can never intercept a
   click meant for the ad.

   Breakpoints are measured against the widest header item, because the items
   have to clear the centred 728px ad:
     sub-pages  logo 121px + back-link 147px  -> merges from 1200px
     home       logo 121px + tagline   356px  -> merges from 1600px
   Below those widths the original stacked layout stands, rather than making
   the ad smaller to fit.
   ══════════════════════════════════════════════════════════════════════ */
/* ── TOP BAR: header shares the leaderboard band ── */
@media (min-width: 1200px) {
  html body > header[role="banner"]:has(.back-link) {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--banner-leaderboard-h, 90px);
    padding: 0 40px;
    border-bottom: none;
    backdrop-filter: none;
    z-index: 20;
    pointer-events: none;
  }
  html body > header[role="banner"]:has(.back-link) > * { pointer-events: auto; }
  html body > header[role="banner"]:has(.back-link) + aside.banner-leaderboard {
    border-top: none;
  }
}

@media (min-width: 1600px) {
  html body > header[role="banner"]:has(.tagline) {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--banner-leaderboard-h, 90px);
    padding: 0 40px;
    border-bottom: none;
    backdrop-filter: none;
    z-index: 20;
    pointer-events: none;
  }
  html body > header[role="banner"]:has(.tagline) > * { pointer-events: auto; }
  html body > header[role="banner"]:has(.tagline) + aside.banner-leaderboard {
    border-top: none;
  }
}
