/* style16 (2026-08-02) = style15 + html{-webkit-text-size-adjust:100%;
   text-size-adjust:100%} — without it, mobile browsers (esp. Safari on
   iPhone) auto-inflate text in narrow columns regardless of the declared
   px value, which is why H1/H2 could still render larger than 26/24px on
   a phone even after every earlier fix. /static/ is now served
   Cache-Control: no-cache, no-store, must-revalidate (see
   nitra.net-le-ssl.conf), so this and future edits to this exact file are
   safe in place — no browser can have cached it.
   style15 (2026-08-02) = style14 sealed under a new URL. style14 was
   edited in place three times (H1/H2 32/28 -> 28/26 -> 26/24px) while
   already live-referenced — /static/ is served
   Cache-Control: immutable, max-age=1yr, so any visitor who had already
   loaded style14.css kept seeing a stale cached copy no matter how many
   times the file on disk changed. style15 exists solely to force a fresh
   fetch; the CSS itself is unchanged from style14's final state:
   .hero h1/.subpage-hero h1/.search-hero h1 = 26px flat, .headline (h2)
   = 24px flat (owner request; were fluid clamps up to 121.6/92.8/57.6px
   and 86.4px respectively). Lesson: from here on, EVERY change to a
   live-referenced style<N>.css must go through ./6-cache-bust.py to mint
   a new URL — never edit an already-referenced version in place again.
   style14 (2026-08-02) = style13 with fixed H1/H2 sizes (owner request).
   style13 (2026-08-03) = style12 with the you-are-here underline made
   style13 (2026-08-03) = style12 with the you-are-here underline made
   properly visible (4px dawn-2 bar via box-shadow, was a 1px dawn-1
   border that vanished into the amber nav backdrop — owner feedback).
   style12 (2026-08-02) = style11 + the nav "you are here" highlight
   (.nav-current / .nav-current-page at EOF; logic in /static/nav3.js).
   style11 was the byte-identical seal of the short-lived style10:
   style10 (2026-08-02) = style9 gone FULL-WIDTH (owner request: use the
   whole browser width on large screens) + click-to-fullscreen lightbox:
   .section-inner/.footer/.fv/.hero inner, .entry-grid, .castle-index,
   .feature-grid, .img-slot-row: max-width removed (fluid, --gutter pads);
   .img-slot 900->1600 (images delivered at 1792px source width);
   .entry-grid.two-up 900->1300, .info-table 900->1300,
   #playlist-frame 1000->1160, search column 820->980, .lede 52->58ch.
   Prose keeps its ch measures on purpose - readability. Lightbox CSS
   (.imglb-*) appended at EOF; behavior in /static/lightbox1.js. */
  /* ============================================================
     NITRA.NET — Immersive Editorial Scroll Story
     A long-form, National-Geographic-style journey through
     Slovakia: castles, mountains, business, culture.
     All imagery is CSS gradients / inline SVG — no external assets.
     ============================================================ */

  :root{
    /* ---- palette: dawn (hero) ---- */
    --dawn-1:#ffd9a0;
    --dawn-2:#ffb703;
    --dawn-3:#1d3a5c;
    --dawn-4:#071a2e;

    /* ---- palette: dusk / castles ---- */
    --dusk-1:#e8a33e;
    --dusk-2:#24406e;
    --dusk-3:#0d2136;
    --dusk-4:#05141f;

    /* ---- palette: alpine / mountains ---- */
    --alp-1:#eaf6ff;
    --alp-2:#b7dcf2;
    --alp-3:#4f7fa3;
    --alp-4:#152a40;

    /* ---- palette: business / industry ---- */
    --biz-1:#dfe8f0;
    --biz-2:#7d93ab;
    --biz-3:#16304d;
    --biz-4:#0b1522;

    /* ---- palette: folk / culture ---- */
    --folk-1:#f4e0ad;
    --folk-2:#e8a33e;
    --folk-3:#123049;
    --folk-4:#0a1c2e;

    --cream:#faf4e8;
    --ink:#1b140f;
    --paper:#fdfaf3;

    --serif:Georgia,'Times New Roman',Times,serif;
    --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

    --gutter:clamp(1.5rem,5vw,5rem);
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html{
    scroll-behavior:smooth;
    /* scroll-snap REMOVED sitewide 2026-09-21 (owner: scrolling up and down
       a page would sometimes auto-scroll it further, tested and confirmed
       to be CSS scroll-snap; "remove this autoscroll ... from the entire
       website"). scroll-snap-type:y proximity plus the scroll-snap-align:
       start targets it left below (.story-section, .breadcrumb-bar,
       .site-footer) pulled the viewport to the nearest target as soon as a
       scroll gesture ended near one — with scroll-behavior:smooth animating
       the pull, it read exactly like an unwanted auto-scroll. The
       scroll-snap-align declarations elsewhere in this file are now inert
       without a snap container above them; left in place for their history,
       not for effect. Don't reintroduce scroll-snap-type without a fresh
       owner ruling.
    scroll-snap-type:y proximity; */
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  body{
    font-family:var(--sans);
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img,svg{display:block;max-width:100%;}

  a{color:inherit;}

  ::selection{background:var(--dusk-2);color:var(--cream);}

  /* ---------------- NAV ---------------- */
  .site-nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    display:flex;
    flex-wrap:wrap;
    row-gap:.5rem;
    align-items:center;
    /* Left-aligned menu (owner request 2026-08-02, matching
       myhealthcare.com): brand, then the links flowing from the left;
       the search pill pushes itself to the far right via
       .nav-search-item{margin-left:auto} below. */
    justify-content:flex-start;
    /* 2.6 -> 2rem (owner 2026-09-22). At 1600px EN the bar was FOUR PIXELS
       short and wrapped to a second row — 96.2px instead of 70.2 — which
       also pushed the breadcrumb trail under the fixed bars. This one gap
       was 46.8px there, the widest single space in the row, so the room
       came from here rather than from the item gap the separator dots sit
       in (owner 2026-09-06 asked for MORE air around those). Measured
       live, not from a probe snapshot: nav-probe/navheight/. */
    column-gap:clamp(1.2rem,3vw,2rem);
    /* -10% bar height (owner 2026-09-06), then -16% more (owner 2026-09-22:
       "reduce the height of the Top Main Menu"). The bar is 2x this padding
       plus the tallest item, and the padding was HALF the bar: measured at
       1728 it was 18+18 around 34.2px of content. Scaling the whole clamp
       again rather than trimming pixels keeps the three breakpoint heights
       in proportion as html{font-size} steps at 1600/1920.
       Measured: 69.7 / 77.6 / 82.1 -> 63.9 / 70.2 / 73.9 -> 53.6 / 58.7 /
       61.8px at 1440 / 1728 / 1920.
       The floor is what is left to cut without touching the CONTENT: the
       remaining 34.2px is the action pills (27.2) plus ~7px that baseline
       alignment costs, and both were owner rulings (2026-09-17). */
    padding:clamp(.52rem,1.05vw,.68rem) var(--gutter);
    /* The RIGHT inset matches .fab-stack (the radio button) and the
       slideshow's pause control, so everything on the right-hand side of
       the screen lines up on one rail instead of the search pill sitting
       further in on the page gutter. Owner request 2026-08-20. The LEFT
       padding stays on --gutter so the brand keeps its alignment with the
       page content below it. */
    padding-right:clamp(.75rem,3vw,1.6rem);
    /* Frosted-glass backdrop, not a fade-to-transparent scrim: every
       hero/section gradient on the site starts at its PALEST stop (palette
       tone 1) at 0%, exactly where this fixed bar sits, so a scrim that
       fades to rgba(...,0) leaves nav text unreadable on pale heroes
       (dawn/alpine especially). Lightened further per owner feedback
       2026-08-02 (two rounds: first pass too heavy, second still too dark)
       — contrast now comes mainly from whiter/bolder/larger text +
       text-shadow below, the backdrop just needs to keep it out of
       pale-on-pale range. Same blur technique already used by
       .nav-links.open below. */
    background:rgba(10,8,14,.30);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    pointer-events:none;
  }
  .site-nav *{pointer-events:auto;}
  .nav-mark{
    font-family:var(--serif);
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:.06em;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    text-shadow:0 1px 3px rgba(0,0,0,.65);
  }
  .nav-mark em{font-style:normal;color:var(--dawn-1);}
  .nav-links{
    display:flex;
    flex-wrap:wrap;
    row-gap:.4rem;
    /* Claim the rest of the bar so the search pill's margin-left:auto
       can push it to the far right edge. */
    flex:1 1 auto;
    /* Tight gap + tracking on purpose: 9 links + a search pill + the logo
       all have to share one row from NAV_BP up (see the two matching
       breakpoint comments below and near .nav-toggle — keep them in sync
       if this ever changes again). flex-wrap above is a deliberate safety
       net, not the intended look: a v1 of the 2026-08-02 size bump used
       looser clamp(.85rem,2.2vw,2rem)/.1em at the OLD 720px breakpoint and
       silently overlapped/cut off SHOPPING..CULTURE+SEARCH at 720-980px
       wide (justify-content:space-between collapses to zero gap when
       content overflows — it doesn't shrink or reveal the overflow). Raising
       the breakpoint bought back room; flex-wrap means if this ever gets
       tight again it wraps to a second line instead of hiding content. */
    /* --nav-gap mirrors `gap` in every band so the NAV-DOTS separator at
       the end of this file can sit in the MIDDLE of the gap without
       occupying any of it (owner 2026-09-06). Keep the two in step. */
    --nav-gap:clamp(.6rem,1.6vw,1.6rem);
    gap:var(--nav-gap);
    list-style:none;
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  /* Scoped to the top-level row only (was `.nav-links a` pre-mega-menu):
     the mega panels also live inside .nav-links li's, and their links
     must NOT inherit the uppercase pill styling. */
  .nav-links > li > a{
    text-decoration:none;
    color:#fff;
    font-weight:600;
    border-bottom:1px solid transparent;
    padding-bottom:3px;
    text-shadow:0 1px 3px rgba(0,0,0,.65);
    transition:border-color .25s ease, color .25s ease;
  }
  .nav-links > li:hover > a,
  .nav-links > li > a:hover{color:#fff;border-color:var(--dawn-1);}
  .nav-links{display:none;}
  /* NAV_BP = 1000px (raised from 720px, then 900px, 2026-08-02 — 900px
     still wrapped to 2 lines right at the threshold on a fresh empirical
     check; 1000px+ renders on one line with room to spare. See .nav-toggle
     below for the matching flip). */
  @media(min-width:1000px){ .nav-links{display:flex;} }

  /* ---------------- SHARED SECTION FRAME ---------------- */
  .story-section{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    width:100%;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    padding:calc(var(--gutter) + 3.2rem) var(--gutter) var(--gutter);
  }

  .veil{
    position:absolute;inset:0;
    background:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
    pointer-events:none;
  }

  .chapter-kicker{
    font-size:.72rem;
    letter-spacing:.32em;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:1rem;
    display:inline-block;
  }

  .chapter-num{
    position:absolute;
    top:clamp(4rem,10vh,7rem);
    right:var(--gutter);
    font-family:var(--serif);
    font-size:clamp(3.5rem,11vw,9rem);
    font-weight:700;
    line-height:1;
    opacity:.16;
    color:#fff;
    z-index:0;
    user-select:none;
  }

  .section-inner{
    position:relative;
    z-index:2;
    max-width:none;
    width:100%;
    margin:0 auto;
  }

  .headline{
    font-family:var(--serif);
    font-weight:700;
    line-height:1.03;
    letter-spacing:-.01em;
    font-size:22px;
    /* Same reasoning as .subpage-hero h1 above. Only 101 of 15290 section
       headlines were long enough to hit this, and none on the homepage —
       its headlines are 15 and 20 characters — so nothing owner-tuned
       moves. */
    max-width:none;
    margin-bottom:1.4rem;
  }

  .lede{
    font-size:clamp(1rem,1.5vw,1.25rem);
    line-height:1.7;
    max-width:none;
    font-weight:400;
  }
  .lede + .lede{margin-top:1.1rem;}
  /* Drop cap on the FIRST lede of a section only. A versal marks where a
     section opens; repeating it on every paragraph is a typographic error, and
     these pages routinely run two or three consecutive .lede paragraphs (94 of
     them do), so the original bare `.lede::first-letter` put a drop cap on each
     one. Scoped with :first-of-type, which resolves per parent — exactly the
     "first lede in this section" semantics wanted. */
  .lede:first-of-type::first-letter{
    font-family:var(--serif);
    font-size:2.6em;
    float:left;
    line-height:.82;
    padding-right:.1em;
    padding-top:.04em;
    font-weight:700;
  }

  .pull{
    font-family:var(--serif);
    font-style:italic;
    font-size:clamp(1.15rem,2vw,1.6rem);
    line-height:1.5;
    max-width:34ch;
    border-left:2px solid currentColor;
    padding-left:1.2rem;
    opacity:.92;
    /* A pull quote needs air. It never had vertical margin: when sections
       alternated left/right the quote was offset far enough from the column
       to read as separate, so nothing looked wrong. With everything
       left-aligned (owner directive 2026-08-20) it sits flush in the text
       and ran straight into the paragraphs above and below it. */
    margin:1.7rem 0;
  }

  .stat-row{
    display:flex;
    flex-wrap:wrap;
    gap:clamp(1.6rem,4vw,3.4rem);
    margin-top:2.4rem;
  }
  .stat{min-width:9rem;}
  .stat b{
    display:block;
    font-family:var(--serif);
    font-size:clamp(1.6rem,3vw,2.4rem);
    line-height:1.1;
  }
  .stat span{
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.78;
  }

  .scroll-cue{
    position:absolute;
    bottom:2.2rem;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.5rem;
    font-size:.68rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:rgba(255,255,255,.85);
    z-index:2;
  }
  .scroll-cue .arrow{
    width:1px;height:2.2rem;
    background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,0));
    animation:cue-drop 1.8s ease-in-out infinite;
  }
  @keyframes cue-drop{
    0%{transform:translateY(-4px);opacity:.3;}
    50%{transform:translateY(6px);opacity:1;}
    100%{transform:translateY(-4px);opacity:.3;}
  }

  .bg-illustration{
    position:absolute;inset:0;
    width:100%;height:100%;
    z-index:0;
  }
  .bg-illustration svg{width:100%;height:100%;}

  /* ============================================================
     HERO
     ============================================================ */
  .hero{
    background:
      radial-gradient(ellipse 60% 45% at 78% 18%, rgba(255,217,160,.85), rgba(255,217,160,0) 60%),
      linear-gradient(180deg, var(--dawn-1) 0%, var(--dawn-2) 32%, var(--dawn-3) 66%, var(--dawn-4) 100%);
    color:#fff;
    justify-content:flex-end;
    padding-bottom:6.5rem;
  }
  .hero .section-inner{max-width:none;}
  .hero-eyebrow{
    font-size:.74rem;
    letter-spacing:.34em;
    text-transform:uppercase;
    opacity:.9;
    margin-bottom:1.1rem;
  }
  .hero h1{
    font-family:var(--serif);
    font-weight:700;
    font-size:24px;
    line-height:.98;
    letter-spacing:-.015em;
    text-shadow:0 6px 40px rgba(0,0,0,.25);
  }
  .hero p.lede{
    color:rgba(255,255,255,.92);
    max-width:46ch;
    margin-top:1.6rem;
  }
  .hero p.lede::first-letter{font-size:1em;float:none;padding:0;font-weight:400;}

  /* ============================================================
     CASTLES — dusk
     ============================================================ */
  .castles{
    /* 2026-08-09 owner directive: plain flat colors, no gradients and no
       pictorial backgrounds — the light gradient tops made white text hard
       to read once the silhouette scenes were removed. Each palette keeps
       ONE flat tone from its own variable set. */
    background:var(--dusk-3);
    color:var(--folk-1);
  }
  .castles .chapter-kicker{color:var(--dusk-1);}
  .castles .headline{color:#fff;}
  .castles .lede{color:rgba(255,240,225,.88);}
  .castles .pull{color:var(--dawn-1);}

  /* ============================================================
     MOUNTAINS — alpine
     ============================================================ */
  .mountains{
    /* flat pale tone — the one light palette, dark-ink text (2026-08-09) */
    background:var(--alp-2);
    color:var(--alp-4);
  }
  .mountains .chapter-kicker{color:var(--alp-4);}
  .mountains .headline{color:var(--alp-4);}
  .mountains .lede{color:#1e3652;}
  .mountains .pull{color:#0d2036;}
  .mountains .chapter-num{color:var(--alp-4);opacity:.14;}
  .mountains .stat b{color:var(--alp-4);}
  .mountains .stat span{color:#2a4a68;}
  .mountains .scroll-cue,.mountains .nav-links a{color:#1e3652;}

  /* ============================================================
     BUSINESS — steel
     ============================================================ */
  .business{
    /* flat steel tone (2026-08-09 plain-color directive) */
    background:var(--biz-3);
    color:#eef3f8;
  }
  .business .chapter-kicker{color:#dfe8f0;}
  .business .headline{color:#fff;}
  .business .lede{color:#e7edf3;}
  .business .pull{color:var(--dawn-1);}

  /* ============================================================
     CULTURE — folk
     ============================================================ */
  .culture{
    /* flat wine tone (2026-08-09 plain-color directive) */
    background:var(--folk-3);
    color:#fff;
  }
  .culture .chapter-kicker{color:var(--folk-1);}
  .culture .headline{color:#fff;}
  .culture .lede{color:#fdf1e2;}
  .culture .pull{color:var(--folk-1);}

  /* ---------------- layout variants: alternating alignment ---------------- */
  .align-right .section-inner{margin-left:auto;text-align:right;}
  .align-right .pull{border-left:none;border-right:2px solid currentColor;padding-left:0;padding-right:1.2rem;margin-left:auto;}
  .align-right .stat-row{justify-content:flex-end;}
  .align-right .lede{margin-left:auto;}
  .align-right .lede::first-letter{float:none;}

  /* ---------------- feature grid inside sections ---------------- */
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.6rem;
    margin-top:2.6rem;
    max-width:none;
  }
  .feature-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.22);
    border-radius:2px;
    padding:1.3rem 1.4rem;
    backdrop-filter:blur(2px);
  }
  .mountains .feature-card{background:rgba(255,255,255,.5);border-color:rgba(20,50,70,.18);}
  .feature-card h3{
    font-family:var(--serif);
    font-size:1.05rem;
    margin-bottom:.4rem;
  }
  .feature-card p{font-size:.9rem;line-height:1.55;opacity:.92;}

  /* ============================================================
     FOOTER
     ============================================================ */
  .site-footer{
    background:var(--ink);
    color:var(--cream);
    padding:clamp(3rem,6vw,5rem) var(--gutter) 2rem;
    scroll-snap-align:start;
  }
  /* Owner 2026-09-17 ("fix the footer so everything will fit horizontally"):
     the brand block and the five link columns share ONE row from 1280px up.
     Measured before the change (nav-probe/footer-probe.html): brand 474px +
     3rem + five columns at a clamp(2rem,5vw,4.5rem) gap needed 1509px at a
     1440px window that offered 1296, so .footer-cols dropped under the brand
     at EVERY width up to 1920 and the 5th column wrapped again at 1000. The
     474px was the one-line "Designed & built by …" credit; it is two short
     lines under the mark now, the column gap is halved, and .footer-cols
     grows into the rest of the row and spreads its columns to the far edge.
     Below 1280 the brand takes its own row and the five columns share the
     next one (a media query, not a content-width wrap, because the Slovak
     labels are wider than the English ones and the wrap point must not
     move with the language). */
  .footer-top{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:clamp(2rem,3vw,3.5rem);
    justify-content:space-between;
    max-width:none;
    margin:0 auto 3rem;
    border-bottom:1px solid rgba(255,255,255,.14);
    padding-bottom:2.6rem;
  }
  .footer-brand{flex:0 0 auto;}
  .footer-brand h2{
    font-family:var(--serif);
    font-size:1.7rem;
    margin-bottom:.6rem;
  }
  .footer-brand p{
    max-width:30ch;
    font-size:.9rem;
    line-height:1.6;
    opacity:.75;
  }
  /* The credit under the tagline: "Designed by <name>" on line 1, the city
     on line 2 (owner 2026-09-17, second ruling the same day — the first put
     the two lines between the mark and the tagline). Two short lines, so the
     brand block stays the tagline's 30ch wide and the one-row footer holds. */
  .footer-brand .footer-credit{
    max-width:none;
    font-size:.86rem;
    line-height:1.5;
    opacity:.8;
    margin:.9rem 0 0;
  }
  .footer-cols{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    justify-content:space-between;
    gap:clamp(1rem,2vw,3.5rem);
    flex-wrap:wrap;
  }
  @media(max-width:1279.98px){
    .footer-brand{flex-basis:100%;}
  }
  /* Phones and tablets: two or three columns per row, left-aligned with a
     steady gap — the look they had before; space-between would push the
     right-hand column of each row to the edge and leave the odd one out. */
  @media(max-width:999.98px){
    .footer-cols{justify-content:flex-start;gap:1.6rem 2rem;}
  }
  /* h3, not h4: the footer follows the brand <h2>, so h4 skipped a level on
     every one of 3,186 rendered pages. Changed 2026-08-20 (a11y audit). */
  .footer-col h3{
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:.6;
    margin-bottom:.9rem;
  }
  .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;}
  .footer-col a{text-decoration:none;font-size:.92rem;opacity:.85;}
  .footer-col a:hover{opacity:1;text-decoration:underline;}
  /* The fixed .fab-stack floats over the bottom-right corner of every
     page, and at the end of the scroll that corner IS this line — the
     legal links and the "Bratislava · Nitra · Orava · High Tatras" span
     ran under it (owner 2026-09-17: "move this two left because it is
     overlapping with player"). Measured with nav-probe/footer-fab-probe.html
     when the stack still held the radio AND the EN/SK toggle: 93x69px at
     1440 (108x78 at 1920), inset clamp(.75rem,3vw,1.6rem) from the right
     and the bottom. Since 2026-09-24 it holds the radio alone (EN/SK moved
     into the top bar), so it is shorter and narrower; the column reserved
     here was left as it was — 10rem in from the viewport edge, less the
     gutter the footer already keeps — which only means the items stop a
     little further short of the button than they need to. */
  .footer-bottom{
    max-width:none;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:.6rem 1rem;
    padding-right:max(0px,calc(10rem - var(--gutter)));
    font-size:.78rem;
    opacity:.55;
  }
  /* On a phone the reserved column would leave ~230px for the text, so the
     footer grows downward instead and the last line sits ABOVE the stack.
     7rem (112px) cleared radio + EN/SK (~81px from the viewport bottom);
     with the radio alone (~41px since 2026-09-24) 4.5rem (72px) leaves the
     same ~30px of air. */
  @media(max-width:600px){
    .footer-bottom{padding-right:0;}
    .site-footer{padding-bottom:4.5rem;}
  }

  @media(max-width:600px){
    .align-right .section-inner{text-align:left;margin-left:0;}
    .align-right .pull{border-left:2px solid currentColor;border-right:none;padding-left:1.2rem;padding-right:0;margin-left:0;}
    .align-right .stat-row{justify-content:flex-start;}
    .align-right .lede{margin-left:0;}
    .chapter-num{font-size:clamp(2.6rem,16vw,4rem);top:1.2rem;}
    .story-section{padding-top:5.4rem;}
  }

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .scroll-cue .arrow{animation:none;}
  }

  /* ============================================================
     LANGUAGE TOGGLE — EN / SK
     Single source of truth is html[lang]. Default markup ships as
     lang="en"; static/lang.js (+ its pre-paint inline snippet) flips it
     to "sk" and this stylesheet does the rest via attribute selectors.
     Every bilingual pair in page content is two sibling spans:
       <span class="lang-en">...</span><span class="lang-sk">...</span>
     ============================================================ */

  .lang-en{display:inline;}
  .lang-sk{display:none;}

  html[lang="sk"] .lang-en{display:none;}
  html[lang="sk"] .lang-sk{display:inline;}

  /* ---------------- floating control, bottom-right ----------------
     Holds the background-radio button alone since 2026-09-24, when the
     EN/SK toggle moved into the top bar (below). It was a column of the
     two, and align-items:stretch made both exactly as wide as the wider
     one (owner 2026-08-19, "make the player small, same width as the
     EN/SK"); with one child the rule is inert and the button is as wide as
     its own label. Unlike .nav-links (display:none below NAV_BP, 1000px)
     this stack stays reachable at every width down to 360px — no
     collapsing breakpoint on purpose. */
  .fab-stack{
    position:fixed;
    right:clamp(.75rem,3vw,1.6rem);
    bottom:clamp(.75rem,3vw,1.6rem);
    z-index:300;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.5rem;
    width:max-content;
    font-family:var(--sans);
  }

  /* ---------------- EN/SK toggle, top bar, before Search ----------------
     Owner 2026-09-24: "move the (EN/SK) button on the top of the page on the
     same row as (SEARCH) before (SEARCH)". From 2026-08-01 it floated in the
     .fab-stack above; it now sits in row 1's .nav-actions li ahead of the
     Search pill, and in the open hamburger beside Search on one row.

     Dressed as the Search pill's twin so the two read as one group: the same
     1px rgba(255,255,255,.4) outline on a transparent ground, the same .62rem
     type, weight and tracking. The active half keeps the fill the toggle has
     always had (dawn-1 behind dusk-4 text).

     ITS HEIGHT IS THE SEARCH PILL'S, and the bar does not grow. The bar's
     height is 2x its padding plus the tallest item, and that item is the
     Search pill (nav-probe/navheight). align-self:stretch makes the toggle
     exactly as tall as the li's line — which the pill sets — and the button
     padding is kept a pixel under the pill's so the toggle's OWN height can
     never be the taller one and set the line itself. <button> centres its
     label vertically on its own.

     ITS WIDTH IS THE PRICE: ~62px at a 16px root plus the group's .4rem
     gap, ~76px at 1600 where html{font-size} steps to 18px — the tightest
     one-row width above the compact band. Measured in
     nav-probe/lang-in-bar/; re-run it before adding anything else to this
     row. */
  .lang-toggle{
    display:inline-flex;
    align-items:stretch;
    align-self:stretch;
    gap:2px;
    padding:2px;
    border:1px solid rgba(255,255,255,.4);
    border-radius:999px;
    background:transparent;
    font-family:var(--sans);
  }

  .lang-toggle-btn{
    -webkit-appearance:none;
    appearance:none;
    flex:1 1 0;
    text-align:center;
    border:none;
    background:transparent;
    color:rgba(255,255,255,.72);
    font-family:var(--sans);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    line-height:normal;
    padding:calc(.34rem - 3px) .34rem;
    border-radius:999px;
    cursor:pointer;
    transition:background-color .25s ease, color .25s ease;
  }
  .lang-toggle-btn:hover{color:#fff;background:rgba(255,255,255,.16);}
  .lang-toggle-btn:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}

  .lang-toggle-btn.active{
    background:var(--dawn-1);
    color:var(--dusk-4);
  }
  .lang-toggle-btn.active:hover{color:var(--dusk-4);background:var(--dawn-1);}

  @media(prefers-reduced-motion:reduce){
    .lang-toggle-btn{transition:none;}
  }

  /* ============================================================
     SUBPAGES — standalone content pages (/castles/, /mountains/,
     /skiing/, /attractions/, /shopping/, /business/, /culture/)
     built on the same section palettes as the homepage chapters.
     ============================================================ */

  /* Shorter hero than the homepage's full-viewport one. */
  .subpage-hero{
    min-height:68vh;
    justify-content:flex-end;
    padding-bottom:4.5rem;
    /* NOT a scroll-snap target (2026-09-06). It inherited start from
       .story-section, which .subpage-section, .fv-section and
       .search-results-section all already opt out of for the stated reason
       that "long editorial pages read better free" — the hero was simply
       missed. Leaving it in was a real bug, not a preference: html carries
       scroll-snap-type:y proximity and scroll-padding-top ~141px (the navbar
       plus the region strip), so on a page whose hero follows the breadcrumb
       directly the hero's snap position is +21px, the browser snapped there
       on load, and the breadcrumb ended up behind the fixed bar. Measured on
       /caves/: scrollY=21 before, 0 after. The .breadcrumb-bar keeps its own
       start target — at the top of the page its snap position is negative
       and clamps to 0, which is what makes 0 a resting place. */
    scroll-snap-align:none;
  }
  .subpage-hero h1{
    font-family:var(--serif);
    font-weight:700;
    font-size:24px;
    line-height:1;
    letter-spacing:-.015em;
    /* Was max-width:40ch. Owner 2026-08-21: "the text should not be wrapped
       but use the entire width of the screen ... I see this wrapping on and
       on." At 24px Georgia, 40ch is about 480px inside a column that is
       1080px and more — so any title over 40 characters broke onto a second
       line with half the row still empty. That is 1086 of the site's 6910
       page titles, 15%, the longest 96 characters. Headings are short by
       nature; the cap was only ever costing us. */
    max-width:none;
    margin-bottom:1.2rem;
    text-shadow:0 6px 40px rgba(0,0,0,.25);
  }

  /* Content sections flow at natural height — no full-viewport
     stretch, no scroll-snap (long editorial pages read better free). */
  .subpage-section{
    min-height:0;
    scroll-snap-align:none;
    /* Owner 2026-08-10: sitewide compaction — roughly 40% less section air.
       Owner 2026-09-06, pointing at the space under "Explore the Bratislava
       Region" and above the image below it: another 40% off, "on all pages".
       Two of these stack at every band boundary, so this is the single
       biggest number in the page's vertical rhythm — 108px between bands
       before, 65px now. Measured, see TODO. */
    padding-top:clamp(.6rem,1.2vw,.9rem);
    padding-bottom:clamp(.6rem,1.2vw,.9rem);
  }

  /* "Continue reading" links from homepage chapters to subpages. */
  .read-more{
    margin-top:2.2rem;
    font-size:.74rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    font-weight:600;
  }
  .read-more a{
    text-decoration:none;
    border-bottom:1px solid currentColor;
    padding-bottom:3px;
    opacity:.85;
    transition:opacity .25s ease;
  }
  .read-more a:hover{opacity:1;}

  /* ---------------- image placeholder slots ----------------
     Real photography doesn't exist yet; each slot marks where a
     generated image will land. data-img on the <figure> names the
     future asset file (matches codex/prompts.txt). The frame border
     and glyph inherit currentColor so the component adapts to both
     dark (castles/business/culture) and light (mountains) palettes. */
  /* margin-top was 2.6rem; halved 2026-09-06 with the section rhythm, since
     an image directly under a section's own padding was carrying two gaps. */
  .img-slot{margin-top:1.3rem;max-width:1600px;}
  .img-slot-frame{
    aspect-ratio:16/9;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1rem;
    border:1px dashed currentColor;
    border-radius:2px;
    background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(0,0,0,.10));
    opacity:.8;
  }
  .img-slot-frame svg{width:58px;height:auto;opacity:.55;}
  .img-slot-label{
    font-size:.66rem;
    letter-spacing:.32em;
    text-transform:uppercase;
    opacity:.8;
  }
  .img-slot figcaption{
    margin-top:.7rem;
    font-family:var(--serif);
    font-style:italic;
    font-size:.82rem;
    letter-spacing:.03em;
    opacity:.78;
  }

  /* Two-up (or three-up) placeholder rows inside a section. */
  .img-slot-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.6rem;
    max-width:none;
  }
  .img-slot-row .img-slot{margin-top:2.6rem;}
  .img-slot-row .img-slot-frame{aspect-ratio:4/3;}

  /* ============================================================
     FEATURED VIDEOS — the 4 x 4 (16 video) band that closes every
     content page. Markup is generated at runtime by
     /static/featured-videos<N>.js from the page's co-located
     <stem>.playlist.json; the page only ships the #fv-root hook.
     Same horizontal-row grid convention as pacificair.com, restyled
     for this site's dark editorial palette.
     ============================================================ */
  .fv-section{
    /* flat dark plum (2026-08-09 plain-color directive) */
    background:#08192b;
    color:var(--cream);
    min-height:0;
    scroll-snap-align:none;
    /* Owner 2026-08-10: sitewide compaction — roughly 40% less section air. */
    padding-top:clamp(2rem,4vw,3rem);
    padding-bottom:clamp(2rem,4vw,3rem);
  }
  .fv-section .chapter-kicker{color:var(--dawn-1);}
  .fv-section .headline{color:var(--cream);}
  .fv-section .section-inner{max-width:none;}
  .fv-section .lede{max-width:70ch;}
  .fv-section .lede::first-letter{float:none;font-size:inherit;line-height:inherit;
    font-family:inherit;padding:0;margin:0;color:inherit;}

  /* 4 across x 4 down = the 16 videos each page requests. */
  .video-container{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1.5rem;
    margin:2.4rem 0 .6rem;
  }
  @media screen and (max-width:1100px){
    .video-container{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  }
  @media screen and (max-width:820px){
    .video-container{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  }
  @media screen and (max-width:560px){
    .video-container{grid-template-columns:1fr !important;}
  }

  .video-item{
    display:flex;
    flex-direction:column;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    border-radius:2px;
    overflow:hidden;
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  }
  .video-item:hover{
    transform:translateY(-3px);
    border-color:var(--dawn-1);
    box-shadow:0 10px 26px rgba(0,0,0,.45);
  }

  .video-media{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    overflow:hidden;
    cursor:pointer;
  }
  .video-media img,
  .video-media iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border:0;
  }
  .video-media:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}

  /* Play cue — a CSS-only triangle badge, no image asset. */
  .video-play{
    position:absolute;
    left:50%;top:50%;
    width:54px;height:54px;
    margin:-27px 0 0 -27px;
    border-radius:50%;
    background:rgba(23,12,34,.62);
    border:1px solid rgba(255,255,255,.5);
    transition:background .22s ease, transform .22s ease;
  }
  .video-play::after{
    content:"";
    position:absolute;
    left:21px;top:16px;
    border-style:solid;
    border-width:11px 0 11px 18px;
    border-color:transparent transparent transparent var(--cream);
  }
  .video-media:hover .video-play{
    background:rgba(255,148,102,.85);
    transform:scale(1.08);
  }

  .video-description{
    padding:.85rem .95rem 1rem;
    font-size:.82rem;
    line-height:1.5;
    opacity:.92;
  }
  /* Not emitted by the verbatim myhealthcare renderer (it prints
     "channel — title" in one run); kept for any future renderer. */
  .video-channel{
    display:block;
    font-size:.64rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--dawn-1);
    opacity:.9;
    margin-bottom:.35rem;
  }

  /* ---------------- Play-All playlist ---------------- */
  #featured-playlist{margin-top:3rem;}
  #featured-playlist h3{
    font-family:var(--serif);
    font-size:1.35rem;
    margin-bottom:.5rem;
  }
  #featured-playlist .fv-lede{
    max-width:62ch;
    font-size:.92rem;
    line-height:1.6;
    opacity:.82;
    margin-bottom:1.3rem;
  }
  #playlist-play-all{
    background:var(--dawn-1);
    color:var(--dusk-4);
    border:0;
    border-radius:999px;
    padding:.85rem 1.7rem;
    font-family:var(--sans);
    font-size:.74rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:700;
    cursor:pointer;
    transition:background .22s ease, transform .22s ease;
  }
  #playlist-play-all:hover{background:var(--dusk-1);transform:translateY(-2px);}
  #playlist-play-all:focus-visible{outline:2px solid var(--cream);outline-offset:3px;}
  #playlist-frame{
    position:relative;
    padding-top:56.25%;
    margin-top:1.2rem;
    background:#000;
    border:1px solid rgba(255,255,255,.16);
    border-radius:2px;
    overflow:hidden;
    display:none;
    max-width:1160px;
  }
  #playlist-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

  @media(prefers-reduced-motion:reduce){
    .video-item,.video-play,#playlist-play-all{transition:none;}
    .video-item:hover,#playlist-play-all:hover{transform:none;}
  }

  /* ============================================================
     LOCAL DIRECTORY COMPONENTS — used by the /nitra/ section pages
     (attractions, hotels, businesses, universities, villages).
     These are listing-shaped pages rather than pure essays, so they
     need card, table and jump-link primitives the homepage never
     required. All colours inherit currentColor / the section palette
     so one card works on every background.
     ============================================================ */

  /* Breadcrumb above a subpage hero heading. */
  .breadcrumb{
    font-size:.68rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    opacity:.75;
    margin-bottom:1rem;
  }
  .breadcrumb a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);}
  .breadcrumb a:hover{border-color:currentColor;}
  .mountains .breadcrumb a{border-bottom-color:rgba(21,42,64,.35);}

  /* Jump-link row directly under a hero — the page's own table of contents. */
  .subpage-toc{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-top:2rem;
  }
  .subpage-toc a{
    text-decoration:none;
    font-size:.68rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:600;
    padding:.5rem .95rem;
    border:1px solid rgba(255,255,255,.32);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    transition:background .22s ease, border-color .22s ease;
  }
  .subpage-toc a:hover{background:rgba(255,255,255,.18);border-color:currentColor;}
  .mountains .subpage-toc a{
    border-color:rgba(21,42,64,.28);
    background:rgba(255,255,255,.5);
  }
  .mountains .subpage-toc a:hover{background:rgba(255,255,255,.8);}

  /* Directory cards: one per hotel / company / faculty / village. */
  .entry-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem;
    margin-top:2.6rem;
    max-width:none;
  }
  .entry-grid.two-up{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));max-width:1300px;}
  .entry-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);
    border-radius:2px;
    padding:1.5rem 1.6rem 1.6rem;
    display:flex;
    flex-direction:column;
    gap:.7rem;
    backdrop-filter:blur(2px);
    transition:border-color .22s ease, transform .22s ease, background .22s ease;
  }
  .entry-card:hover{
    border-color:currentColor;
    transform:translateY(-2px);
    background:rgba(255,255,255,.13);
  }
  .mountains .entry-card{
    background:rgba(255,255,255,.55);
    border-color:rgba(20,50,70,.18);
  }
  .mountains .entry-card:hover{background:rgba(255,255,255,.8);}
  .entry-card h3{
    font-family:var(--serif);
    font-size:1.18rem;
    line-height:1.25;
    font-weight:700;
  }
  .entry-meta{
    font-size:.66rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:.78;
    font-weight:600;
  }
  .entry-card p{font-size:.9rem;line-height:1.62;opacity:.93;}
  .entry-card ul{list-style:none;display:flex;flex-direction:column;gap:.35rem;}
  .entry-card li{font-size:.85rem;line-height:1.5;opacity:.9;padding-left:1.1rem;position:relative;}
  .entry-card li::before{
    content:"";
    position:absolute;
    left:0;top:.55em;
    width:5px;height:5px;
    border-radius:50%;
    background:currentColor;
    opacity:.6;
  }

  /* Small inline labels: price band, star rating, sector, district. */
  .tag-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem;}
  .tag{
    font-size:.6rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:700;
    padding:.28rem .6rem;
    border:1px solid currentColor;
    border-radius:999px;
    opacity:.72;
  }

  /* Key/value practical-information table. */
  .info-table{
    width:100%;
    max-width:1300px;
    margin-top:2.4rem;
    border-collapse:collapse;
    font-size:.9rem;
  }
  .info-table caption{
    text-align:left;
    font-size:.66rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    opacity:.75;
    padding-bottom:.8rem;
    font-weight:700;
  }
  .info-table th,
  .info-table td{
    text-align:left;
    padding:.75rem .9rem;
    border-bottom:1px solid rgba(255,255,255,.16);
    vertical-align:top;
    line-height:1.55;
  }
  .mountains .info-table th,
  .mountains .info-table td{border-bottom-color:rgba(20,50,70,.16);}
  .info-table th{
    font-weight:700;
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.82;
    white-space:nowrap;
  }
  .info-table tbody tr:hover{background:rgba(255,255,255,.06);}
  .mountains .info-table tbody tr:hover{background:rgba(255,255,255,.4);}

  @media screen and (max-width:620px){
    .info-table{font-size:.84rem;}
    .info-table th,.info-table td{padding:.6rem .5rem;}
  }

  @media(prefers-reduced-motion:reduce){
    .entry-card{transition:none;}
    .entry-card:hover{transform:none;}
  }

  /* Section-level <h3> — every h3 on the site currently lives inside a card, so
     the global `*{margin:0}` reset would leave a bare one in .section-inner
     unstyled and margin-less. Defensive rule so future pages can use one. */
  .subpage-section .section-inner > h3,
  .subpage-hero .section-inner > h3{
    font-family:var(--serif);
    font-size:clamp(1.2rem,2.2vw,1.6rem);
    line-height:1.25;
    margin:2.2rem 0 .8rem;
  }
  .subpage-section .section-inner > h3 + .lede{margin-top:0;}

  /* ============================================================
     SEARCH (/hladaj/) — Xapian-backed site search.
     The page ships an empty #results div; everything below is
     styled for markup that /hladaj/index.html builds at runtime
     from the CGI's JSON response.
     ============================================================ */
  .search-box{
    display:flex;
    align-items:stretch;
    gap:.7rem;
    margin-top:2.2rem;
    max-width:980px;
    flex-wrap:wrap;
  }
  .search-input-wrapper{position:relative;flex:1 1 320px;min-width:0;}
  #search-input{
    width:100%;
    font-family:var(--sans);
    font-size:1rem;
    padding:.95rem 1.1rem;
    color:var(--cream);
    background:rgba(0,0,0,.34);
    border:1px solid rgba(255,255,255,.34);
    border-radius:999px;
    backdrop-filter:blur(2px);
  }
  #search-input::placeholder{color:rgba(250,244,232,.55);}
  #search-input:focus{
    outline:none;
    border-color:var(--dawn-1);
    background:rgba(0,0,0,.46);
  }
  #search-submit{
    background:var(--dawn-1);
    color:var(--dusk-4);
    border:0;
    border-radius:999px;
    padding:.95rem 1.9rem;
    font-family:var(--sans);
    font-size:.74rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:700;
    cursor:pointer;
    transition:background .22s ease;
  }
  #search-submit:hover{background:var(--dusk-1);}
  #search-submit:focus-visible{outline:2px solid var(--cream);outline-offset:3px;}

  /* ---------------- autocomplete ---------------- */
  .suggestions{
    display:none;
    position:absolute;
    top:calc(100% + 4px);
    left:0;right:0;
    z-index:120;
    background:#20142c;
    border:1px solid rgba(255,255,255,.24);
    border-radius:2px;
    max-height:340px;
    overflow-y:auto;
    box-shadow:0 14px 34px rgba(0,0,0,.5);
  }
  .suggestions.open{display:block;}
  .suggestion{
    display:block;
    padding:.6rem 1rem;
    font-size:.92rem;
    color:var(--cream);
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .suggestion:last-child{border-bottom:0;}
  .suggestion:hover,.suggestion.active{background:rgba(255,217,160,.18);}
  .suggestion mark{background:transparent;color:var(--dawn-1);font-weight:700;}

  /* ---------------- results band ---------------- */
  .search-results-section{
    /* flat dark plum (2026-08-09 plain-color directive) */
    background:#08192b;
    /* .story-section centres its children vertically, which on a short
       results list left a tall empty band above the cloud. Search output
       reads from the top down. */
    justify-content:flex-start;
    color:var(--cream);
    min-height:60vh;
    scroll-snap-align:none;
    padding-top:clamp(2.6rem,5vw,4rem);
    padding-bottom:clamp(3.2rem,7vw,5.5rem);
  }
  .search-info{
    font-size:.9rem;
    letter-spacing:.02em;
    opacity:.82;
    margin-bottom:2rem;
    padding-bottom:1rem;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .search-info strong{color:var(--dawn-1);}

  .search-result{
    max-width:none;          /* owner 2026-08-20: full width */
    padding:1.15rem 0 1.3rem;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .search-result h3{
    font-family:var(--serif);
    font-size:1.16rem;
    line-height:1.35;
    font-weight:700;
    margin-bottom:.28rem;
  }
  .search-result h3 a{text-decoration:none;color:var(--dawn-1);}
  .search-result h3 a:hover{text-decoration:underline;}
  .search-result .result-num{opacity:.5;font-weight:400;}
  .search-url{
    font-size:.76rem;
    letter-spacing:.04em;
    opacity:.55;
    margin-bottom:.5rem;
    word-break:break-word;
  }
  .search-snippet{
    font-size:.92rem;
    line-height:1.62;
    opacity:.9;
    max-width:none;          /* owner 2026-08-20: full width */
  }
  /* The CGI pre-renders these highlights inside the snippet it returns. */
  .search-snippet mark,
  .search-result h3 mark{
    background:rgba(255,217,160,.24);
    color:var(--dawn-1);
    padding:0 .12em;
    border-radius:2px;
  }

  .no-results{max-width:none;padding:1.5rem 0 2rem;}
  .no-results h2{
    font-family:var(--serif);
    font-size:1.5rem;
    margin-bottom:.6rem;
  }
  .no-results p{font-size:.95rem;line-height:1.6;opacity:.82;}

  /* ---------------- pagination ---------------- */
  .pagination{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.4rem;
    margin-top:2.6rem;
  }
  .pagination a,
  .pagination .current,
  .pagination .ellipsis{
    min-width:2.3rem;
    text-align:center;
    padding:.5rem .7rem;
    font-size:.85rem;
    border-radius:999px;
  }
  .pagination a{
    cursor:pointer;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.24);
    transition:background .2s ease,border-color .2s ease;
  border-radius:999px;}
  .pagination a:hover{background:rgba(255,255,255,.14);border-color:var(--dawn-1);}
  .pagination .current{
    background:var(--dawn-1);
    color:var(--dusk-4);
    font-weight:700;
    border:1px solid var(--dawn-1);
  }
  .pagination .ellipsis{opacity:.45;border:0;}
  .pagination .prev-next{letter-spacing:.06em;}

  /* ---------------- popular searches cloud ---------------- */
  /* ------------------------------------------------------------------
     POPULAR SEARCHES cloud — owner 2026-08-20, matched to the shape of
     myhealthcare.com/suchen/ (a panel of weighted, borderless terms) but
     in this site's dawn-on-plum palette rather than that site's navy.
     Terms are plain links at six size/weight/opacity tiers; the varying
     scale IS the information, so don't flatten it to uniform chips.
     ------------------------------------------------------------------ */
  #tag-cloud:empty{display:none;}
  .cloud-panel{
    background:#241534;
    border:1px solid #132c46;
    border-radius:8px;
    padding:1.15rem 1.4rem 1.35rem;
    margin:0 0 2.2rem;
    line-height:2.2;
  }
  .cloud-kicker{
    font-size:.68rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    opacity:.55;
    margin:0 0 .35rem;
  }
  .cloud-terms{display:block;max-width:none;}
  .cloud-term{
    display:inline-block;
    margin:2px 6px;
    padding:2px 8px;
    text-decoration:none;
    color:var(--cream);
    border:0;
    background:none;
    border-radius:999px;
    white-space:nowrap;
    transition:background .2s ease,color .2s ease;
  }
  .cloud-term:hover{background:#132c46;color:var(--dawn-1);}
  .cloud-term.w6{font-size:2rem;   font-weight:700;color:var(--dawn-1);opacity:1;}
  .cloud-term.w5{font-size:1.75rem;font-weight:700;color:var(--dawn-1);opacity:.94;}
  .cloud-term.w4{font-size:1.5rem; font-weight:700;color:var(--dawn-1);opacity:.88;}
  .cloud-term.w3{font-size:1.3rem; font-weight:600;color:var(--dawn-1);opacity:.82;}
  .cloud-term.w2{font-size:1.12rem;font-weight:600;opacity:.76;}
  .cloud-term.w1{font-size:1rem;   font-weight:400;opacity:.62;}

  @media(prefers-reduced-motion:reduce){
    #search-submit,.pagination a,.cloud-term{transition:none;}
  }

  /* Search link in the nav — styled by the shared Search/On-Map twin
     rule near the end of this sheet (owner 2026-08-20: the two buttons
     are identical). */

  /* ============================================================
     CASTLE INDEX — the full A–Z directory on the /castles/ hub,
     grouped by region, one chip per castle detail page.
     ============================================================ */
  .castle-group{
    font-family:var(--serif);
    font-size:1.02rem;
    font-weight:700;
    letter-spacing:.01em;
    margin:2.4rem 0 .9rem;
    padding-bottom:.45rem;
    border-bottom:1px solid rgba(255,255,255,.18);
    max-width:none;
    opacity:.92;
  }
  .castle-index{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:.6rem;
    max-width:none;
  }
  .castle-chip{
    display:flex;
    flex-direction:column;
    gap:.18rem;
    text-decoration:none;
    padding:.62rem .85rem;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
  }
  .castle-chip:hover{
    background:rgba(255,255,255,.15);
    border-color:var(--dawn-1);
    transform:translateY(-2px);
  }
  .castle-chip strong{
    font-family:var(--serif);
    font-size:.96rem;
    font-weight:700;
    line-height:1.2;
  }
  .castle-chip em{
    font-style:normal;
    font-size:.64rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.62;
  }
  /* The hub's "More strongholds" section is align-right; the directory reads
     far better left-aligned, so opt it back out. */
  .align-right .castle-group,
  .align-right .castle-index,
  .align-right .castle-chip{text-align:left;}
  .align-right .castle-group,
  .align-right .castle-index{margin-left:auto;margin-right:0;}

  @media(prefers-reduced-motion:reduce){
    .castle-chip{transition:none;}
    .castle-chip:hover{transform:none;}
  }

  /* ---------------- floating background radio ----------------
     Owner 2026-08-19: this slot used to hold a floating search button,
     which was redundant — search sits in the top bar on every page. It now
     holds a one-tap background radio instead: press it and a live stream
     starts playing WITHOUT leaving the page. One station, Rádio Vlna,
     whatever the page language (owner 2026-09-24; it used to follow the
     language). A dark glass pill of its own — it read as one group with
     the EN/SK toggle below it until that moved into the top bar the same
     day. Behaviour lives in nav<N>.js. */
  .radio-fab{
    -webkit-appearance:none;
    appearance:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.42rem .6rem;
    color:rgba(255,255,255,.72);
    background:rgba(20,15,10,.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    font-family:var(--sans);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    line-height:1;
    cursor:pointer;
    transition:background-color .22s ease,border-color .22s ease,color .22s ease;
  }
  .radio-fab:hover{background:rgba(20,15,10,.8);border-color:var(--dawn-1);color:rgba(255,255,255,.95);}
  .radio-fab:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}
  .radio-fab-ic{width:13px;height:13px;flex:none;}
  .radio-fab-pause{display:none;}
  .radio-fab.playing{color:var(--dawn-1);border-color:rgba(240,178,106,.55);}
  .radio-fab.playing .radio-fab-play{display:none;}
  .radio-fab.playing .radio-fab-pause{display:block;}
  /* A live stream takes a moment to open — blink the glyph so the tap
     visibly did something before the first audio arrives. */
  .radio-fab.connecting .radio-fab-ic{animation:radio-fab-blink 1s steps(2,end) infinite;}
  @keyframes radio-fab-blink{50%{opacity:.2;}}
  /* Stream refused or unreachable: say so for a few seconds rather than
     leaving a button that silently did nothing. */
  .radio-fab.failed{color:#ffcf7a;border-color:rgba(255,140,120,.5);}
  /* The radio was playing on the previous page and this one has not been
     clicked yet, so the browser refused to start audio (Firefox blocks it
     by default). The intent is still live — nav<N>.js starts the sound on
     the visitor's next click or keypress anywhere — so the button breathes
     a ring instead of pretending to be off. */
  .radio-fab.blocked{
    color:var(--dawn-1);
    border-color:rgba(240,178,106,.45);
    animation:radio-fab-wake 2.4s ease-in-out infinite;
  }
  @keyframes radio-fab-wake{
    0%,100%{box-shadow:0 0 0 0 rgba(240,178,106,0);}
    50%{box-shadow:0 0 0 4px rgba(240,178,106,.20);}
  }
  .radio-fab-sr{
    position:absolute;width:1px;height:1px;
    margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  @media(prefers-reduced-motion:reduce){
    .radio-fab{transition:none;}
    .radio-fab.connecting .radio-fab-ic{animation:none;opacity:.45;}
    .radio-fab.blocked{animation:none;box-shadow:0 0 0 2px rgba(240,178,106,.20);}
  }

  /* An img-slot that has had its real photograph wired in by
     14-process-images.py. The dashed placeholder frame is gone; what remains is
     the image itself plus the same bilingual figcaption the placeholder had. */
  .img-slot.has-img picture{display:block;}
  .img-slot.has-img img{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:2px;
    display:block;
  }
  .img-slot-row .img-slot.has-img img{aspect-ratio:4/3;}

  /* ---------------- search page: compact hero ----------------
     .subpage-hero is min-height:68vh with justify-content:flex-end — content
     sits at the BOTTOM of a tall box. That reads well for an editorial hero
     with a big photograph behind it, but on the search page it pushed the
     breadcrumb and the search box roughly 400px down a phone screen, so the
     one control the page exists for was below the fold. Here the hero is only
     as tall as its content, top-aligned, with just enough head room to clear
     the fixed nav. */
  .search-hero{
    min-height:0;
    justify-content:flex-start;
    padding-top:calc(var(--gutter) + 3.4rem);
    padding-bottom:clamp(1.8rem,4vw,2.8rem);
  }
  .search-hero h1{
    font-size:24px;
    margin-bottom:.6rem;
    max-width:20ch;
  }
  .search-hero .breadcrumb{margin-bottom:.5rem;}
  .search-hero .hero-eyebrow{margin-bottom:.4rem;}
  .search-hero .search-box{margin-top:1.4rem;}

  /* The floating search button that used to be hidden here is gone entirely
     (owner 2026-08-19) — its slot now holds the background-radio button,
     which is not redundant on the search page, so nothing is hidden. */

  /* ---------------- hero on narrow screens ----------------
     .hero is justify-content:flex-end inside a full-height section, so all the
     slack collects ABOVE the headline. That is the intended editorial look on a
     wide screen, but on a tall phone (19.5:9) it left roughly a third of the
     first screen as empty gradient before "Discover Slovakia".
     Shorten the box and trim the bottom padding so the headline sits higher;
     the shorter box also lets the next section peek up, which reads as an
     invitation to scroll rather than dead space. */
  @media(max-width:720px){
    .hero{
      min-height:74svh;
      padding-bottom:4rem;
    }
    .subpage-hero{
      min-height:56svh;
      padding-bottom:3rem;
    }
    /* The base top padding clears the fixed nav; on a phone the nav is shorter,
       so it does not need the full desktop allowance. */
    .story-section{padding-top:calc(var(--gutter) + 2.4rem);}

    /* The scroll cue is absolutely positioned at the bottom of the hero. With
       the shorter box the lede now runs into it, and clearing it would need
       ~6rem of bottom padding — which would undo the gain. Drop it here: the
       shortened hero lets the next chapter peek above the fold, which is a
       stronger invitation to scroll than the label was. */
    .scroll-cue{display:none;}
  }


  /* ---------------- "open on YouTube" layer ----------------
     Styles for /static/fv-external1.js, which adds an out-of-embed route for
     every video. Needed because YouTube refuses embedded playback on some
     networks (VPN exits especially) — the block sits between the viewer and
     YouTube, so the only fix is to leave the embed entirely. The renderer
     itself, featured-videos3.js, is a verbatim copy from myhealthcare and is
     deliberately not touched by any of this. */
  .fv-pop{
    position:absolute;
    top:8px;right:8px;
    z-index:3;
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    padding:0;cursor:pointer;
    background:rgba(10,8,14,.68);
    border:1px solid rgba(255,255,255,.34);
    border-radius:999px;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
  }
  .fv-pop svg{
    width:15px;height:15px;
    fill:none;stroke:#faf4e8;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .fv-pop:hover{background:rgba(255,148,102,.9);transform:scale(1.06);}
  .fv-pop:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}

  .fv-ext-link{
    display:block;
    margin:0 .95rem 1rem;
    font-size:.64rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:600;
    text-decoration:none;
    color:var(--dawn-1);
    opacity:.72;
    transition:opacity .2s ease;
  }
  .fv-ext-link:hover{opacity:1;text-decoration:underline;}

  .fv-ext-all{
    display:inline-block;
    margin-left:1rem;
    font-size:.7rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:600;
    text-decoration:none;
    color:var(--dawn-1);
    border-bottom:1px solid currentColor;
    padding-bottom:2px;
  }
  .fv-ext-all:hover{color:var(--dusk-1);}

  .fv-note{
    max-width:70ch;
    margin:1.5rem 0 .4rem;
    font-size:.82rem;
    line-height:1.6;
    opacity:.72;
    padding-left:.9rem;
    border-left:2px solid rgba(255,217,160,.45);
  }

  @media(max-width:560px){
    .fv-pop{width:38px;height:38px;}   /* comfortable tap target on a phone */
    .fv-pop svg{width:17px;height:17px;}
  }
  @media(prefers-reduced-motion:reduce){
    .fv-pop{transition:none;}
    .fv-pop:hover{transform:none;}
  }

  /* ---------------- NAV TOGGLE (mobile menu) ----------------
     Below NAV_BP (1000px, raised from 720px 2026-08-02 — see the matching
     comment near .nav-links above) .nav-links is hidden and menu3.html
     ships a .nav-toggle hamburger; nav1.js toggles .open on the links,
     which become a dark-glass dropdown panel under the fixed nav.
     Above NAV_BP the button is hidden and nothing changes. */
  .nav-toggle{
    display:none;
    -webkit-appearance:none;
    appearance:none;
    align-items:center;
    justify-content:center;
    width:2.6rem;
    height:2.6rem;
    padding:.5rem;
    background:rgba(20,15,10,.45);
    border:1px solid rgba(255,255,255,.35);
    border-radius:8px;
    cursor:pointer;
    color:#fff;
    /* With the bar now justify-content:flex-start, this is what keeps
       the hamburger on the right edge below NAV_BP. */
    margin-left:auto;
  }
  .nav-toggle svg{
    width:100%;
    height:100%;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    fill:none;
  }
  .nav-toggle:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}
  @media(max-width:999.98px){
    .nav-toggle{display:flex;}
    .nav-links.open{
      display:flex;
      flex-direction:column;
      gap:1rem;
      position:fixed;
      top:3.9rem;
      right:var(--gutter);
      padding:1.1rem 1.4rem;
      background:rgba(20,15,10,.92);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      border:1px solid rgba(255,255,255,.2);
      border-radius:14px;
      box-shadow:0 12px 40px rgba(0,0,0,.45);
      z-index:120;
      /* The hamburger list grew to 15 rows with the mega-menu build-out
         (Caves/Spa/Wine/Bratislava/Košice ride along as .nav-extra
         direct links) — let it scroll on short phone viewports. */
      max-height:calc(100vh - 5rem);
      max-height:calc(100svh - 5rem);
      overflow-y:auto;
    }
    .nav-links.open > li > a{color:rgba(255,255,255,.88);}
    .nav-links.open .nav-search{align-self:flex-start;}
  }

  /* ============================================================
     MEGA MENU (menu4.html) — desktop only, 1000px (NAV_BP) up.

     Same architecture as myhealthcare.com's navbar, re-cut for this
     site's design language: each .has-mega li in the top bar owns a
     .mega-menu — a full-width dark-glass band pinned under the fixed
     nav (the li stays position:static, so the panel anchors to the
     BAR, not the tab — a wide panel anchored to its own tab would
     run off-screen). Columns are .mega-col with a .mega-col-header,
     optional .mega-col-sublabel sub-groups, and a .mega-col-viewall
     hub link.

     Open/close is pure CSS (:hover / :focus-within, plus .tap-open
     set by nav2.js for touch-only devices). The close uses a .25s
     visibility delay INSTEAD of a hover-bridge pseudo-element: the
     pointer needs to cross the nav's bottom padding to reach the
     panel, and the grace period keeps the panel alive for that hop
     without an invisible strip blocking clicks elsewhere.
     ============================================================ */
  .has-mega{position:static;}

  /* Reset the inherited top-bar typography (uppercase, wide tracking,
     .78rem) before the panel's own styles apply. */
  .mega-menu{
    text-transform:none;
    letter-spacing:normal;
    font-size:1rem;
    display:none;
  }

  @media(min-width:1000px){
    /* The dropdown caret is GONE (owner 2026-09-06): "there are 2 dots after
       TV and 1 dot after Radio — there are 2 forgotten dots that needs to be
       removed from the menu." At .72em of a 9-13px label the ▾ reads as a
       dot, so beside the new NAV-DOTS separator TV showed two marks and
       Radio, being last, showed one with nothing after it. The panel is
       still discoverable — it opens on hover/focus and on tap, and the item
       itself is a real link. Removed rather than left as content:none so
       nothing here silently re-enables it. */

    .has-mega > .mega-menu{
      display:block;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      z-index:130;
      background:rgba(16,11,24,.94);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border-top:1px solid rgba(255,255,255,.12);
      border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow:0 24px 60px rgba(0,0,0,.5);
      /* Safety net like myhealthcare's: an absolutely positioned panel
         that outgrows the viewport just extends past the bottom edge
         with no scrollbar and its last rows become unreachable. */
      max-height:calc(100vh - 6rem);
      overflow-y:auto;
      visibility:hidden;
      opacity:0;
      transform:translateY(-4px);
      transition:opacity .18s ease, transform .18s ease,
                 visibility 0s linear .25s;
    }
    .has-mega:hover > .mega-menu,
    .has-mega:focus-within > .mega-menu,
    .has-mega.tap-open > .mega-menu{
      visibility:visible;
      opacity:1;
      transform:none;
      transition:opacity .18s ease, transform .18s ease, visibility 0s;
    }

    /* Search pill hugs the right edge of the bar (the bar itself is
       justify-content:flex-start now). */
    .nav-links .nav-search-item{margin-left:auto;}

    /* Mobile-only direct links live in the hamburger panel; on
       desktop their pages are reachable inside the mega panels. */
    .nav-links .nav-extra{display:none;}
  }

  /* Columns start at the same left gutter as the nav content, so the
     band reads as an extension of the bar. No centering max-width:
     the bar's own content is left-anchored, and the panel follows it. */
  .mega-inner{
    display:flex;
    align-items:flex-start;
    gap:clamp(1.1rem,2.2vw,2.4rem);
    padding:1.5rem var(--gutter) 1.9rem;
  }

  .mega-col{
    flex:0 1 auto;
    min-width:0;
    max-width:19rem;
  }
  .mega-col + .mega-col{
    border-left:1px solid rgba(255,255,255,.10);
    padding-left:clamp(1.1rem,2.2vw,2.4rem);
  }

  .mega-col-header{
    display:block;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--dawn-1);
    text-decoration:none;
    padding-bottom:.55rem;
    margin-bottom:.6rem;
    border-bottom:1px solid rgba(255,255,255,.14);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  a.mega-col-header:hover{color:#fff;}

  .mega-col ul{
    list-style:none;
    margin:0;
    padding:0;
  }
  .mega-col ul li{margin:0;padding:0;}
  .mega-col ul li a{
    display:block;
    padding:.28rem 0;
    font-size:.88rem;
    color:rgba(255,255,255,.82);
    text-decoration:none;
    /* Ellipsize rather than wrap: one long label added later must not
       become a two-line row and knock the columns out of rhythm.
       (min-width:0 on .mega-col is what lets this engage at all.) */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:color .15s ease;
  }
  .mega-col ul li a:hover{color:var(--dawn-1);}

  .mega-col-sublabel{
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
    margin:.95rem 0 .35rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mega-col-viewall{
    display:block;
    margin-top:.85rem;
    padding-top:.6rem;
    border-top:1px solid rgba(255,255,255,.10);
    font-size:.78rem;
    font-weight:600;
    color:var(--dawn-1);
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mega-col-viewall:hover{color:#fff;}

  @media(max-width:999.98px){
    /* The hamburger panel shows plain page links only; panels (and the
       desktop-only caret) never render below NAV_BP. */
    .mega-menu{display:none !important;}
  }

  @media(prefers-reduced-motion:reduce){
    .has-mega > .mega-menu{transition:opacity 0s, visibility 0s linear .25s;transform:none;}
    .has-mega:hover > .mega-menu,
    .has-mega:focus-within > .mega-menu,
    .has-mega.tap-open > .mega-menu{transition:none;}
  }

/* ============================================================
   IMAGE LIGHTBOX - click any wired .img-slot image to view it
   full-screen at delivered resolution (1792px). Markup is built
   by /static/lightbox1.js (event delegation, no per-page HTML).
   z-index 400: above story sections (100) and lang toggle (300).
   ============================================================ */
.imglb-open{overflow:hidden;}
.img-slot.has-img img{cursor:zoom-in;}
.imglb{
  position:fixed;inset:0;z-index:400;
  background:rgba(6,8,18,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(.8rem,2vw,2rem);
  animation:imglb-in .18s ease-out;
}
@keyframes imglb-in{from{opacity:0}to{opacity:1}}
.imglb-stage{
  flex:1 1 auto;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:auto;overscroll-behavior:contain;
}
.imglb-stage img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;display:block;
  cursor:zoom-in;user-select:none;
}
.imglb.zoomed .imglb-stage{align-items:flex-start;justify-content:flex-start;}
.imglb.zoomed .imglb-stage img{max-width:none;max-height:none;cursor:zoom-out;}
.imglb-caption{
  flex:0 0 auto;color:rgba(255,255,255,.85);
  font-size:.9rem;line-height:1.5;text-align:center;
  padding:.8rem 1rem 0;max-width:80ch;
}
.imglb-close{
  position:absolute;top:clamp(.6rem,1.5vw,1.4rem);right:clamp(.6rem,1.5vw,1.4rem);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:1.05rem;line-height:1;
  width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;
}
.imglb-close:hover{background:rgba(255,255,255,.22);}
.imglb-hint{
  position:absolute;bottom:clamp(.6rem,1.5vw,1.2rem);right:clamp(.8rem,2vw,1.6rem);
  color:rgba(255,255,255,.45);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;pointer-events:none;
}
@media(prefers-reduced-motion:reduce){.imglb{animation:none;}}

/* ============================================================
   LARGE-SCREEN TYPE SCALE (2026-08-02, owner request: fill the
   16" MacBook Pro browser). Base rem grows on wide viewports,
   so every rem/ch-based measure — nav, headlines, ledes, cards,
   directories — scales up with it and the full-width layout
   actually fills the window instead of floating in it.
   ============================================================ */
@media(min-width:1600px){
  html{font-size:18px;}
}
@media(min-width:1920px){
  html{font-size:19px;}
}

/* ============================================================
   NAV "YOU ARE HERE" HIGHLIGHT (style12, 2026-08-02)

   nav3.js marks the top-level item owning the current page with
   .nav-current and the page's own link deeper in the nav with
   .nav-current-page. The top-level treatment is simply the hover
   state made persistent (dawn underline, full white), so the bar
   reads "you are in Castles" without inventing a new visual.
   The search pill (.nav-search) styles itself; keep it out.
   ============================================================ */
.nav-links > li > a.nav-current:not(.nav-search):not(.account-fab){
  color:#fff;
  /* 1px border + 3px box-shadow = a 4px bar in the hotter dawn-2 orange.
     The shadow adds no layout height, so the current item doesn't jiggle
     the flex row; dawn-1 at 1px disappeared into the amber backdrop
     (owner feedback 2026-08-03). */
  border-color:var(--dawn-2);
  box-shadow:0 3px 0 var(--dawn-2);
}
/* Hamburger panel (below NAV_BP the row becomes a dropdown list):
   the underline reads poorly on stacked rows — use the dawn color
   itself as the "you are here" cue instead. */
@media(max-width:999.98px){
  .nav-links.open > li > a.nav-current:not(.nav-search):not(.account-fab){
    color:var(--dawn-1);
    border-color:transparent;
  }
}

/* The exact current page inside a mega panel column, the Regions
   city rows, or the hamburger's .nav-extra links. */
.nav-links a.nav-current-page{
  color:var(--dawn-1) !important;
  font-weight:600;
}

/* ============================================================
   FOOTER LEGAL LINKS — the "Disclaimer · Privacy Policy ·
   Terms of Service" line in .footer-bottom (pages added
   2026-08-03, mirroring pacificair.com / myhealthcare.com).
   Base a{color:inherit} leaves these indistinguishable from
   plain text, so give them an underline affordance.
   ============================================================ */
.footer-bottom a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  opacity:.9;
}
.footer-bottom a:hover{opacity:1;}

/* ============================================================
   FIXED-NAV CLEARANCE (owner report 2026-08-08: on the phone the
   top of /business/ slid under the glass menu bar)
   ============================================================
   1) scroll-padding-top makes every in-page #fragment jump (subpage
      TOC pills, the /business/ city directory) and every y-proximity
      snap settle BELOW the fixed nav instead of flush under it.
      Scoped with :has() to pages that have a .subpage-hero, so the
      homepage keeps its designed full-bleed chapter snapping (those
      sections deliberately sit at y=0 behind the glass, with their
      own big padding-top providing the clearance). Browsers without
      :has() simply keep today's behavior.
   2) On phones the subpage hero's first line (the breadcrumb) rested
      only ~30px below the bar, so the slightest scroll pushed it into
      the glass. 7rem of top padding gives it real headroom; bottom-
      anchored heroes with short content are unaffected. */
html:has(.subpage-hero){scroll-padding-top:6.5rem;}
@media(max-width:600px){
  .subpage-hero{padding-top:7rem;}
}

/* 2026-08-08 city-first nav: the top bar now carries 10 city items (owner
   restructure — 8 kraj capitals + Orava + Tatry). At 1000–1199px the
   full-size labels wrap to a second row (probe-verified at 1000/1060/1120),
   so this band compacts the type until the bar has room again — originally
   only up to 1500/1699px, since stock sizing fit fine above that with ten,
   eleven or twelve items (see the two dated notes below for that history).
   Keep the 1000px edge in sync with NAV_BP.
   2026-08-18: Radio became the THIRTEENTH top-level item (TV split into TV +
   Radio, owner), and stock sizing no longer fit anywhere — probe-verified
   wrapping at 1700 and 1920 with the old max-width:1699.98px cap, because
   past that cap .nav-links reverts to full-size type. Rather than chase the
   upper edge outward again, this rule's upper bound was DROPPED: the compact
   .68rem sizing now applies unconditionally from 1000px up, with no ceiling.
   Re-probed clean (wrapped:false) at 1000/1200/1400/1550/1600/1650/1700/1750/
   1920/2560 with nav-probe/fit3.html (rebuilt fresh from the live menu/style
   per the README recipe — fit2.html had drifted to a stale style/nav/
   lightbox version and was left as historical reference). If the item count
   changes again, re-run that recipe before assuming this still holds. */
@media(min-width:1000px){
  /* 2026-09-15: gap ceiling 1.25 -> 1.1rem, the 1400-1727 band .8 -> .72rem and
     the 1000-1399 band .55 -> .5rem, to absorb the wider Media + Business labels
     (fit9 in nav-probe/README.txt). The dot still has 4px+ of air each side. */
  .nav-links{font-size:.74rem; --nav-gap:clamp(.7rem,1.4vw,1.1rem);
    gap:var(--nav-gap); letter-spacing:.05em;}
}
/* 2026-09-04: Chat and Sign-in joined the bar's right end (owner), costing it
   two more pills. Measured with nav-probe/fit5.html — which reports required
   vs available width rather than eyeballing a wrap — the only widths that then
   ran short were 1400 (-67px) and 1600 (-53px), and only for a SIGNED-IN
   member, whose chat pill is the third one. Tightening the item GAP buys back
   more than that (13 gaps, ~6-7px each) and, unlike dropping to the .58rem
   band below, leaves the nav's type size alone — the labels stay the size the
   owner has been reading them at. Above 1727px the bar has room to spare, so
   the stock gap holds there. */
@media(min-width:1500px) and (max-width:1919.98px){
  /* 2026-09-17 (Airport joined row 1, fit10): the band now starts where the
     compact band ends (1500) and runs to the 1920 font-size step, because
     1728-1919 at the stock 1.1rem gap was -14/-35px; gap .72 -> .62rem and
     letter-spacing .05 -> .03em bought 1600-1727 back (+17px signed in at
     1600, the tightest width left). The dot keeps ~4px of air each side. */
  /* 2026-09-22: .62 -> .60rem, the last 5px of the 1600px EN wrap fix. The
     dot still has ~3.9px of air each side (it had 4.1 at .62rem). */
  .nav-links{--nav-gap:.6rem; gap:var(--nav-gap); letter-spacing:.03em;}
}
@media(min-width:1000px) and (max-width:1499.98px){
  /* 2026-09-17: the band's upper edge moved 1400 -> 1500 when Airport became
     the FIRST row-1 item (owner: "Move Airport to main Menu"). Measured in
     nav-probe/fit10.html: at 1400 the .74rem band ran -34/-49px (EN, signed
     out/in); in this band it has +140px. The same lever as 2026-08-17. */
  /* 2026-08-17: TV became the TWELFTH top-level item (owner), and the band
     had to widen 1200 -> 1400 and tighten. Measured in nav-probe/fit2.html,
     which compares the BRAND's top offset with the links' rather than reading
     the bar height — height alone is misleading, because html{font-size} steps
     to 18px at 1600 and 19px at 1920 and the rem padding grows with it, so a
     66 -> 78px bar at 1920 is the design scaling, not a wrap. The genuine wrap
     was at 1000 and 1200 only (brand pushed to its own row); 1400 up was
     always fine and is deliberately left alone. */
  /* .42rem, not .26rem, since 2026-09-06: the separator dot is centred in
     this gap and .26rem (4px) left it touching both labels. The extra
     ~29px across eleven gaps is inside the measured slack — see
     nav-probe/README.txt. */
  .nav-links{font-size:.64rem; --nav-gap:.5rem;
    gap:var(--nav-gap); letter-spacing:.01em;}
}
/* 2026-08-10: the band's upper edge moved 1200px -> 1500px when Piešťany
   became the ELEVENTH city item (owner). The items themselves never wrap —
   .nav-links stays one row at every desktop width — but past a threshold the
   BRAND no longer fits beside them and .site-nav's flex-wrap pushes the links
   to a second line, taking the bar from 66px to 89px. With ten items that
   threshold sat just under 1200px; with eleven it sits just under 1500px.
   Probe-verified with getBoundingClientRect at 1280/1400/1500/1600/1700/1920.
   With twelve (2026-08-17) that edge became 1699.98px (see the top of this
   block); with thirteen (2026-08-18) the edge was removed rather than moved
   again — see the 2026-08-18 note above. */

/* 2026-08-09 owner directive: NO pictorial section backgrounds anywhere —
   the layered silhouette scenes made text hard to read (owner screenshot
   of /castles/holic/). Every .story-section now keeps only its plain
   palette backdrop: the .bg-illustration SVG layer and the .veil vignette
   are disabled sitewide. The homepage transit map is unaffected (it is
   hero CONTENT, not a .bg-illustration). The empty .bg-illustration divs
   stay in the page HTML on purpose — hiding here is one reversible rule
   instead of edits to 121 pages. Do not re-enable per page. */
.story-section .bg-illustration,
.story-section .veil{display:none !important;}

/* 2026-08-09 city hero background photos (owner: "generate suitable
   background images for the city pages - add prompts"). Each city hub hero
   carries ONE .hero-bg-slot img-slot; until its photo is generated + wired
   the slot renders nothing (frame and caption hidden), after wiring the
   photo becomes a full-bleed cover layer UNDER .section-inner with a fixed
   dark veil so hero text stays readable on any image (the plain-color
   directive still governs every other section). pointer-events:none keeps
   the lightbox off the hero background. */
.subpage-hero .hero-bg-slot{position:absolute;inset:0;margin:0;z-index:0;pointer-events:none;}
.subpage-hero .hero-bg-slot .img-slot-frame,
.subpage-hero .hero-bg-slot figcaption{display:none;}
.subpage-hero .hero-bg-slot picture,
.subpage-hero .hero-bg-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.subpage-hero .hero-bg-slot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(23,12,34,.5) 0%, rgba(23,12,34,.72) 60%, rgba(23,12,34,.86) 100%);}
.subpage-hero .section-inner{position:relative;z-index:1;}

/* 2026-08-09 owner: "remove the top of the page padding, it's terrible" —
   with flat plain-color backdrops the 68vh bottom-anchored subpage hero
   reads as a huge dead band above the breadcrumb (owner screenshots of
   /trnava/ et al.). Heroes are now content-height and top-aligned,
   starting right under the fixed glass bar. The homepage is untouched
   (its hero is the transit map, content-frozen by owner directive). */
.subpage-hero{
  min-height:0;
  justify-content:flex-start;
  padding-top:7.5rem;
  /* 3rem -> .9rem over two passes on 2026-09-06, in step with
     .subpage-section: the owner asked three times for less air. */
  padding-bottom:.9rem;
}
@media(max-width:600px){
  .subpage-hero{min-height:0;padding-top:7rem;padding-bottom:2.4rem;}
}

/* 2026-08-09 venue thumbnail grids on the city castles/shopping index pages
   (owner: "create the thumbnails"). Each card shows the venue's own wired
   photo and links to its dedicated page; names stay bilingual. */
.venue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem;margin:2rem 0;}
.venue-card{display:block;text-decoration:none;color:inherit;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;transition:transform .2s ease,border-color .2s ease;}
.venue-card:hover{transform:translateY(-3px);border-color:var(--dawn-1);}
.venue-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:rgba(0,0,0,.3);}
.venue-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.venue-card strong{display:block;padding:.7rem .9rem .1rem;font-size:1.02rem;line-height:1.3;}
.venue-card em{display:block;padding:0 .9rem .8rem;font-style:normal;opacity:.75;font-size:.85rem;}
/* Landing-page chapter grid: three thumbnails per row (owner spec), as many
   rows as needed; collapses 3->2->1 on narrower screens. */
.venue-grid.three{grid-template-columns:repeat(3,1fr);}
@media(max-width:920px){.venue-grid.three{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.venue-grid.three{grid-template-columns:1fr;}}

/* 2026-08-09 — breadcrumbs lifted out of the hero into a full-width strip at
   the very top of the page (owner: "breadcrumbs completely on the top of the
   web page"). They used to sit inside .subpage-hero, below its 7.5rem
   fixed-bar clearance and indented to the content column, so they read as part
   of the headline block rather than as page chrome.

   The strip now carries the clearance the hero used to carry. Nav height was
   measured across breakpoints (65px @1400, 65 @1100, 78 @900 where it wraps,
   70 @700/390), so 5.4rem / 5.9rem clear it everywhere with a small gap.

   The explicit colour is load-bearing: outside a palette section the crumb
   would inherit body{color:var(--ink)}, which is dark on this dark ground.
   The :has() guard keeps pages with no breadcrumb (the homepage, /search/) on
   the original hero padding — same :has() pattern already used above for
   scroll-padding-top. */
.breadcrumb-bar{
  background:var(--dusk-4);
  color:#e3ecf5;
  border-bottom:1px solid rgba(255,255,255,.10);
  /* Owner 2026-08-10: compact top — just clear the fixed bar; trimmed again
     2026-09-06 ("reduce the padding from top to minimum") once the bar
     itself lost 10% of its height. 4.2rem is 67.2 / 75.6 / 79.8px at
     1440 / 1728 / 1920 against a bar measuring 62.9 / 70.2 / 73.9px, so the
     crumb clears it by 4-6px of box and ~11px of visible space. Both scale
     with html{font-size}, which is why one rem value works at all three.
     Measure with nav-probe/baseline.html before trimming further. */
  /* 4.2 -> a floor plus the MEASURED bar (owner 2026-09-22, when the bar
     lost 16% of its height and this padding is what would otherwise have
     eaten the whole saving — the trail's position is padding minus bar
     height, nothing else).

     max() instead of a third hand-tuned rem value, because a static number
     cannot be right in both languages at once: at 1600px the EN bar wrapped
     to two rows and the SK bar did not, and 4.2rem then hid the trail
     BEHIND the fixed bars (slack -20.6px there, -18.6 from 1000 to 1150
     where the brand takes its own row by design). nav<N>.js already
     publishes the bar's real height as --region-bar-top for the region
     strip; reading it here makes the clearance self-correcting at every
     width, in every language and in every wrap state.

     The floor is what the common ONE-ROW case needs (1440 is the binding
     width: 53.6px of bar + 4px), so in that case the two agree to within a
     pixel or two and nothing moves when the menu lands — the fallback is
     0px on purpose, so before JS the floor alone applies. With JS off there
     is no injected nav at all, so the floor is simply the top margin.
     Measured slack after: 4.0 / 5.0 / 6.1 / 6.7px at 1440 / 1500 / 1728 /
     1920, against 3.3 / 4.3 / 5.4 / 5.9 before. */
  padding:max(3.6rem, calc(var(--region-bar-top,0px) + .3rem)) var(--gutter) .5rem;
  /* The Google Map pill lives at this row's right-hand end (owner
     2026-08-20: "same width as Search, place it under the Search"), so the
     bar is a flex row: crumbs left, pill right. The RIGHT inset matches the
     nav's own padding-right, which is what puts the pill exactly under the
     Search pill instead of further in on the page gutter. */
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.55rem 1.2rem;
  padding-right:clamp(.75rem,3vw,1.6rem);
  /* html carries scroll-snap-type:y proximity and .story-section is a snap
     target, so without this the hero — the first target — pulls the strip up
     under the fixed bar on load. Making the strip its own snap target keeps
     the top of the page an honest resting place. */
  scroll-snap-align:start;
}
.breadcrumb-bar .breadcrumb{margin-bottom:0;opacity:.82;}
body:has(.breadcrumb-bar) .subpage-hero{padding-top:1.1rem;}
@media(max-width:1000px){
  /* the bar wraps to two rows here and is its tallest anywhere — 78px before
     the 2026-09-06 -10% trim, ~70px after */
  .breadcrumb-bar{padding-top:max(4.15rem, calc(var(--region-bar-top,0px) + .3rem));}
}
@media(max-width:600px){
  .breadcrumb-bar{padding-bottom:.8rem;}
  body:has(.breadcrumb-bar) .subpage-hero{padding-top:1.4rem;}
}

/* ============================================================
   BODY PARAGRAPH RHYTHM (2026-08-17)

   Sections generated by 34-build-pages.py emit plain <p> for body prose, and
   nothing in this sheet ever gave a bare <p> a bottom margin — the reset zeroes
   it. Hand-built pages hid the gap by writing their body copy as <p class="lede">,
   so the defect was invisible on the pages anyone looked at and universal on the
   ~500 generated ones: three paragraphs of a town's history ran together as a
   single block with no break at all.

   Scoped with :not([class]) so it touches only that generated body copy and
   leaves .lede, .read-more, .breadcrumb, .quiz-* and the card paragraphs exactly
   as they are — each of those already carries its own spacing.
   ============================================================ */
.subpage-section .section-inner > p:not([class]),
.subpage-hero .section-inner > p:not([class]){
  margin:0 0 1.15rem;
  max-width:78ch;
}
.subpage-section .section-inner > p:not([class]):last-child{margin-bottom:0;}

/* ====================================================================
   NO RIGHT-ALIGNED TEXT — owner directive 2026-08-20.

   The alternating left/right editorial rhythm is retired. Every section
   reads left-aligned at every width, on every page. The owner's example
   was /banska-bystrica/castles/filakovsky-hrad/legend/, but the ruling is
   sitewide, not a per-page fix.

   Neutralised here rather than deleted at source, exactly as the
   .bg-illustration scenes were on 2026-08-09: hundreds of pages carry
   class="align-right" in their markup, so this keeps the change to one
   block and fully reversible. Below 600px the stylesheet already reset
   these to left — this simply makes every width behave the way the phone
   already did.

   Do NOT reintroduce text-align:right. If a future design wants the
   alternating rhythm back, that is an owner decision, not a tidy-up.
   ==================================================================== */
.align-right .section-inner{margin-left:0;text-align:left;}
.align-right .pull{border-left:2px solid currentColor;border-right:none;
                   padding-left:1.2rem;padding-right:0;margin-left:0;}
.align-right .stat-row{justify-content:flex-start;}
.align-right .lede{margin-left:0;}
/* Drop cap comes back: it was suppressed only because a float:left versal
   cannot sit in right-aligned text. Scoped :first-of-type to match the base
   rule, so a section opens with a versal and its later ledes do not. */
.align-right .lede:first-of-type::first-letter{float:left;}
.align-right .castle-group,
.align-right .castle-index{margin-left:0;margin-right:0;}


/* ------------------------------------------------------------------
   SKIP LINK — 2026-08-20 accessibility audit.

   The mega menu is 517 links. Closed panels are visibility:hidden so
   their contents are not focusable, but a keyboard or screen-reader
   visitor still crossed the whole top bar, and the hamburger panel at
   narrow widths, on every single page before reaching any content.
   There was no skip link anywhere on the live site.

   Lives in the menu partial so every page gets it with no page edit;
   its target is set at runtime by nav<N>.js, because no page on this
   site has a <main> element to point at.
   ------------------------------------------------------------------ */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:400;               /* above the fixed bar (300) */
  padding:.7rem 1.15rem;
  background:var(--dawn-1);
  color:#071a2e;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  border-radius:0 0 4px 0;
}
.skip-link:focus{
  left:0;
  outline:3px solid #071a2e;
  outline-offset:-3px;
}

/* A hero-background figure sits INSIDE .subpage-hero, immediately before the
   hero's own .section-inner — so no section padding separates them, and
   .img-slot carries a top margin but none at the bottom. The result was the
   caption ("Prešov's main street at dusk — page background.") butting straight
   into the eyebrow line below it on all 11 city hubs. Found while
   screenshot-checking the new hub directory cards, 2026-08-20.

   Scoped to the hero rather than added to .img-slot globally: 1,185 wired
   figures elsewhere end their section, where the section's own padding already
   provides the gap and extra margin would only add slack. */
.subpage-hero > .img-slot{margin-bottom:2rem;}

/* ------------------------------------------------------------------
   OPEN IN GOOGLE MAPS — owner request 2026-08-20: a page that describes
   a place should put "where is it" at the top, clearly and in colour.

   Pill-shaped to match the radio fab and the EN/SK toggle, which is the
   shape the owner picked for the site's buttons. Dawn gradient rather
   than a flat fill so it reads as the page's one primary action against
   whichever palette the section is using.
   ------------------------------------------------------------------ */
/* THE "ON MAP" PILL — an exact twin of the nav's Search pill (owner
   2026-08-20, final ruling after three rounds: "Same fonts, same color,
   same background, same width, same height" — no icon, no green, no
   gradient). The shared geometry lives in one rule on BOTH selectors so
   the two can never drift apart; the min-width makes them the SAME
   width regardless of label length ("Search"/"On Map", "Hľadať"/"Na
   mape"), which is also why each is centered inside it. */
.map-cta{
  margin:0;
  /* Two pills now — History then On Map (owner 2026-08-21). Flex gives them a
     gap without touching the shared pill rule below, and a single-pill page
     lays out exactly as it did before. */
  display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;justify-content:flex-end;
}
/* .hist-btn is a handle for finding the button again, not a look: it carries
   .map-btn and inherits the geometry the owner settled after three rounds
   ("Same fonts, same color, same background, same width, same height"). */
/* Narrowed 2026-09-04 (owner): the three pills were 7.2rem/.68rem wide-ish
   slabs; the owner asked for "about the same size as the OE3 play station",
   so the geometry now tracks the radio fab — .62rem type and the same .6rem
   side padding. min-width still equalises Search / History / On Map with each
   other (and with the Slovak labels, HISTÓRIA being the longest) so the ruling
   that made them exact twins survives the shrink. */
.nav-links .nav-search,
.map-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:5.4rem;
  padding:.34rem .6rem;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  background:transparent;
  color:#fff;
  font-family:var(--sans);
  font-size:.62rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.nav-links .nav-search:hover,
.map-btn:hover{background:rgba(255,255,255,.16);}
.map-btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px;}


/* ── Year CARDS on location history pages ────────────────────────────────
   OWNER 2026-09-22, on /trnava/towns/sladkovicovo/history/: "I do not like
   this slider ... Can you replace it with Chips as add short description so
   the chip contain more data we have plenty of room on every history page",
   pointing at the .quick-panel grid on /bratislava/.

   So the drag bar, its tick rail and all the density machinery that kept 36
   years from colliding on one line are GONE, and each year is a card
   carrying the year, its era and what happened. The component is the region
   hubs' own — .quick-panel / .quick-grid / .quick-card — with the variant
   below; the rules it varies live in the REGION-MENU marker block further
   down, which is SPLICED IN from regionmenu/css.py, so they must be
   overridden from out here and never edited there for this.

   The cards are real links to /<place>/history/<year>/, so the page needs no
   JavaScript at all: timeline<N>.js was retired with the slider and every
   era now shows on the landing at once, which is what the page did with JS
   off anyway (HISTORY-TIMELINE-SPEC: "with JS off the landing is a complete
   readable history"). */
.tl{margin:2.4rem 0 0;position:relative;}

/* The panel is a dark island on a pale section — the history landings use
   the mountains/culture palettes, /bratislava/ is dark — which is what makes
   it read as the page's index rather than another band of prose. */
/* CHAINED with the base class on purpose. The .quick-* rules are spliced in
   from regionmenu/css.py LATER in this file, so a single-class override up
   here loses the cascade to them on equal specificity — .tl-card{align-items}
   and .tl-cards{grid-template-columns} both silently did, and the first
   render came back with centred icons and 210px columns. */
.quick-panel.tl-panel{margin-top:1.6rem;}

/* THREE MEASURED DEPARTURES from the stock card (nav-probe/quickcard/):
   1. The stock <small> is nowrap + ellipsis and holds 17-22 characters on a
      desktop. Headlines run to a 32-character median and 70 at the top, so
      it has to wrap. Same override /business/ already ships page-inline for
      its entry cards.
   2. align-items:flex-start, or a two-line card centres its icon halfway
      down the text.
   3. A 17rem floor instead of 210px. In rem it widens with html{font-size}
      at 1600/1920 where there is room, and stays 272px on a phone, where
      the panel's content box is 282px and a wider floor would push the page
      into horizontal scroll. */
.quick-grid.tl-cards{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));}
.quick-card.tl-card{align-items:flex-start;}
.quick-card.tl-card .quick-icon{margin-top:.18rem;}
.tl-card .quick-text strong{
  font-size:1.12em;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
/* The era, between the year and the headline: a bare number says when, this
   says what age it belongs to. */
.tl-card .quick-text em{
  font-style:normal;
  margin:.12rem 0 .18rem;
  color:#ffb703;
  font-size:.66em;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  /* wraps: the era table runs to "Mines, guilds and the Enlightenment" (34
     characters) and an ellipsis there tells the reader nothing. */
  white-space:normal;
}
.tl-card .quick-text small{
  white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.35;
}
/* Where you are, when a year page's own rail is not the thing being read. */
.tl-card.is-on{border-color:#ffb703;}
.tl-card.is-on .quick-text strong{color:#ffb703;}

.tl-events{list-style:none;margin:.6rem 0 0;padding:0;}
.tl-event{margin:0 0 2.4rem;}
.tl-event:last-child{margin-bottom:0;}
.tl-when{
  font-family:var(--sans);font-size:.8rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--dawn-2);margin:0 0 .3rem;
}
.tl-event h3{font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.2;margin:0 0 .7rem;}

/* .tl-js / .tl-now / .tl-hint / .tl-tick and the tl-in keyframes went with
   timeline<N>.js on 2026-09-22: nothing collapses the eras any more and the
   hint is the panel's own .quick-lede. */
.tl-year{color:var(--dawn-2);font-variant-numeric:tabular-nums;margin-right:.4em;}
.tl-more{margin:.8rem 0 0;font-size:.9rem;}
.tl-steps{margin-top:2rem;}

/* References at the foot of a history page — where the facts came from */
.refs-section{padding-top:2.4rem;padding-bottom:2.8rem;}
.ref-list{list-style:none;margin:1.4rem 0 0;padding:0;}
.ref-list li{
  margin:0 0 .7rem;padding-left:1.2rem;position:relative;
  font-size:.94rem;line-height:1.5;
}
.ref-list li::before{content:"→";position:absolute;left:0;opacity:.5;}
.ref-list a{text-decoration:underline;text-underline-offset:2px;}
.ref-note{opacity:.65;font-size:.86rem;}
/* the slider now leads the section, so it needs its own breathing room */
.tl{margin-top:1.2rem;}
.tl .headline{margin-top:2rem;}
.tl-hint{margin-top:.5rem;}


/* ── History YEAR pages — hero and measure ─────────────────────────────────
   Owner-approved 2026-08-21 from a prototype on /nitra/towns/sahy/history/1827/.
   Scoped to .history-year, which 50-build-history-timelines.py puts on the
   year page's hero and nowhere else: a LANDING's .lede is intro prose rather
   than a place name, so these rules would mangle it.

   The hero reads as one line — place │ year · story — built with flex ORDER
   rather than by reordering markup, so the builder's HTML is untouched. */
.history-year .section-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;   /* three sizes on one line, not centred on their boxes */
  column-gap:.7rem;
}
.history-year .tl-when{ order:1; flex:0 0 100%; }
/* .subpage-hero h1 carries max-width:40ch, which is right for a headline that
   owns its own line. Here the h1 is only the SECOND HALF of a merged line —
   place │ year · story — so a 40ch cap on it broke the title several words
   before the column edge ("...and the last week" dropping to a second row on
   /bratislava/history/1944/). The line now runs to the same edge as the prose
   and the illustration. */
.history-year h1{ max-width:none; flex:1 1 auto; min-width:0; }
.history-year .lede{ order:2; }
.history-year h1{ order:3; margin:0; }

.history-year .lede{
  margin:0;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.8rem,2.9vw,2.35rem);
  line-height:1.1;
  letter-spacing:-.02em;
  /* inherit, NOT the light palette's ink: history year pages come in three
     palettes — towns are the pale .mountains, cities and castles the dark
     .castles, villages the dark .culture. A hard-coded --alp-4 here is
     near-black and would have vanished on two of the three. */
  color:inherit;
}
/* a hairline between the place and the year, in the palette's own ink for the
   same reason */
.history-year .lede::after{
  content:"";
  display:inline-block;
  width:1px;
  height:1.1em;
  margin-left:.75rem;
  vertical-align:-.15em;
  background:currentColor;
  opacity:.4;
}
/* Below the wrap the place takes a row of its own, where the divider dangles
   at the end of it pointing at nothing. */
@media (max-width:820px){
  .history-year .lede::after{ display:none; }
  .history-year .lede{ flex:0 0 100%; margin-bottom:.15rem; }
}

/* "Sahy" sat ~120px clear of the paragraph below: the hero's padding-bottom
   and the section's padding-top, two gaps stacked where the reader sees one.
   They are the same colour band on these pages, so the space separated
   nothing. */
.history-year{ padding-bottom:1.3rem; }
#event.subpage-section{ padding-top:.8rem; }

/* The prose was capped at 78ch (~700px) while the illustration ran the full
   column (~1080px), so the text looked indented against its own picture. */
.history-year .section-inner > p:not([class]),
#event .section-inner > p:not([class]){ max-width:none; }

/* THE ACCENT, ON THE ONE LIGHT PALETTE ONLY. --dawn-2 is a warm orange built
   for this site's dark backgrounds. Measured against each palette a history
   page actually uses:

       .mountains (towns)     dawn-2 1.50:1   dawn-3 5.39:1
       .castles   (cities)    dawn-2 6.07:1   dawn-3 1.69:1
       .culture   (villages)  dawn-2 3.43:1   dawn-3 1.05:1

   So the orange fails only on the pale blue, and the plum would fail on both
   dark palettes — at 1.05:1 it is invisible. Swapping globally would have
   traded one broken palette for two. */
.mountains .tl-when,
.mountains .tl-year{ color:var(--dawn-3); }

/* ── The right-hand action group (owner 2026-09-04) ─────────────────────────
   One li at the end of row 1, pushed to the right edge by
   .nav-search-item{margin-left:auto}. It held Search · Chat · Sign-in, then
   (2026-09-22) Search · Social Sign In; since 2026-09-23 it holds the Search
   pill alone, because the way into social.nitra.net is the wordmark's
   "Social" now (NAV-WORDMARK at the end of this sheet). The .account-fab,
   .chat-fab and .social-fab rules that dressed those pills went with them,
   and so did the two bands that paid for their width — tighter pill geometry
   below 1728px and icon-only pills from 1000 to 1400px: nothing in the bar
   carries those classes any more. The account pill's first-name logic had
   already gone from nav<N>.js on 2026-09-22.
   The group rules stay, so a pill can sit beside Search again without new
   CSS: a tight gap of its own, and wrapping rather than overflowing.
   2026-09-24: one did — the EN/SK toggle, BEFORE Search (the "EN/SK toggle,
   top bar" block near the top of this sheet). */
.nav-links .nav-actions{
  display:flex;align-items:center;gap:.4rem;
  flex-wrap:wrap;
}
/* A pill in this li is `> li > a` like a menu item, so the bar's
   `li:hover > a` rule would light every pill in the group at once. Reset it
   here and let each pill answer for itself. */
.nav-links > li.nav-actions:hover > a{border-color:rgba(255,255,255,.4);}
.nav-links > li.nav-actions > a:hover{border-color:var(--dawn-1);}
/* In the open hamburger the group is a HEADER ROW across the top of the
   panel since 2026-09-24: EN/SK then Search, the same order and the same
   row as in the bar (owner: "on the same row as (SEARCH) before (SEARCH)").
   It stacked as a column while it held Search · Chat · Sign-in.
   Taken OUT of the list's flow on purpose. The open panel is a column flex
   that wraps (base .nav-links{flex-wrap:wrap}), so its ~45 rows fold into
   two columns and the LAST item — this group — opened a third column past
   the panel's right edge: on a 390x844 phone the Search pill showed as a
   clipped "H…" at the top right, reachable only by scrolling the panel
   sideways. With the language switch in here too that would have hidden
   the only EN/SK control a phone has. Positioned against the panel (it is
   position:fixed, so it is the containing block) and given its own band
   of top padding, the row takes no column slot at all (the padding is
   sized below, with the touch targets).
   ROW 2 USED TO PAINT OVER THE TOP OF THE OPEN PANEL. The panel starts
   right under the bar (top:3.9rem) and was built before the two-row menu;
   the region bar that has sat there since 2026-09-06 is z-index 110, and
   the panel's own 120 counts only inside .site-nav's stacking context,
   which is 100. So the panel's top ~42px — the first item, Airport — was
   hidden behind row 2, and this header row would have been too. While the
   hamburger is open the nav is lifted above row 2 (the panel then covers
   the strip, as a dropdown should); closed, nothing changes.
   AND THE PANEL IS A GRID. As a wrapping column flex it could never
   scroll — rows that did not fit the height opened another column instead,
   and the third one ran off the panel's right edge (TESTY and the Search
   pill on a 390x844 phone, a whole column on a 667px-tall one). A grid
   that fills column by column, TWO columns, scrolls vertically inside the
   panel's max-height as the panel was always meant to ("let it scroll on
   short phone viewports", above). --nav-rows is half the in-flow rows,
   counted by nav<N>.js when the panel opens; 24 is the first-paint
   fallback (47 rows on 2026-09-24). Same 1rem gap, same order, the same
   two columns a 390x844 phone showed before — minus the clipping.
   The panel stays right-anchored and as wide as its content, but never
   wider than the window allows: max-width keeps its left edge .75rem in
   from the screen, and the auto tracks let a long label ("Historické
   železnice") take a second line on a narrow phone instead of pushing the
   panel — and the EN/SK switch in its top-left corner — off the screen.
   (Two max-content columns are ~300px; at 360px the left edge sat 38px
   off-screen.) */
@media(max-width:999.98px){
  /* .nav-open is set by nav<N>.js with .open; :has() stays as a second
     guard. Without the class a browser that lacks :has() (Safari < 15.4,
     Firefox < 121) left the EN/SK + Search row under row 2. */
  .site-nav.nav-open,
  .site-nav:has(.nav-links.open){z-index:115;}
  .nav-links.open{
    /* The panel hangs from the bar's REAL bottom edge, not a fixed 3.9rem:
       where the bar wraps to two rows (a 280px fold cover, a 320px phone
       with a classic scrollbar) the fixed top covered the lower half of
       the hamburger button that closes it. --region-bar-top is published
       on every page since 2026-09-24 (regionmenu/js.py). */
    top:var(--region-bar-top,3.9rem);
    max-height:calc(100vh - var(--region-bar-top,3.9rem) - 1.1rem);
    max-height:calc(100svh - var(--region-bar-top,3.9rem) - 1.1rem);
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(var(--nav-rows,24),auto);
    grid-auto-columns:auto;
    align-content:start;
    justify-content:start;
    max-width:calc(100% - var(--gutter) - .75rem);
    padding-top:4rem;
  }
  /* RIGHT-anchored, like the pills in the bar: the panel is as wide as its
     longest label, which differs between the languages, so a row hung from
     its LEFT edge moved ~12px under the finger when EN/SK was pressed. The
     two pills are the same width in both languages, so from the right they
     never move. */
  .nav-links.open .nav-actions{
    position:absolute;
    top:1.1rem;
    left:auto;
    right:1.4rem;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    gap:.55rem;
  }
  /* Touch-sized here. The bar's pills are held at the Search pill's 24px
     (the bar-height ruling), but in the panel nothing constrains them, and
     the EN/SK halves were 27 x 18px — the only language switch a phone
     has. 1.875rem gives each half 24px of height; the min-width 34px. The
     panel's top padding above (4rem) is 1.1rem + this row + ~1rem. */
  .nav-links.open .nav-actions .nav-search,
  .nav-links.open .lang-toggle{min-height:1.875rem;}
  .nav-links.open .lang-toggle-btn{min-width:2.1rem;}
}
/* The actions li is moved to the FRONT of the list while the hamburger is
   open (nav<N>.js), so keyboard order matches what the panel shows first;
   `order` keeps it at the END of row 1 wherever it sits in the DOM. */
@media(min-width:1000px){
  .nav-links > li.nav-actions{order:1;}
}
/* Under 360px two columns no longer fit: the longest word that cannot
   break ("VYSŤAHOVALECTVO") alone makes the second column ~150px, and at
   320px the pair ran ~40px past the panel. One column that scrolls. */
@media(max-width:359.98px){
  .nav-links.open{grid-auto-flow:row;grid-template-rows:none;}
}

/* REGION-MENU:start (55-build-region-menu.py) */
/* ============================================================
   TWO-ROW REGION MENU (owner 2026-09-06)

   "Because the main menu is very crowded, we are going to divide the
   main menu into Slovakian region." The 13-item city-first bar and its
   13 mega panels are replaced by:

     row 1  Radio | the 8 kraj capitals | Explore | TV | actions
     row 2  a chip strip for whichever of those is current

   Modelled on pacificair.com's .section-nav, which the owner cited:
   a dropdown-free bar with a pinned second row, rather than a panel
   that appears on hover. The strip is ALWAYS VISIBLE, so the reader can
   see where they can go without discovering it — which is the actual
   complaint behind "the mega menu makes this website confusing".

   ⚠ RADIO AND TV ARE UNCHANGED (owner, same day): both keep their
   top-level item AND their mega panel. Only the 11 place items were
   replaced. That is why .has-mega and .mega-menu still exist.

   ⚠ The strip ships INSIDE the menu partial — all eight regions plus
   Explore, in the DOM, one revealed by nav<N>.js. pacificair bakes its
   strip into each page's HTML, which here would mean editing ~2,900
   pages and re-editing them on every content change. One partial is one
   file to maintain and rides the existing force-cache fetch.
   ============================================================ */

.region-bar{
  /* Directly under the fixed bar, pinned with it. --region-bar-top is set
     by nav<N>.js from the REAL navbar height: the bar has breakpoints at
     1000/1200/1400/1728px and html{font-size} steps at 1600/1920, so any
     hard-coded number is wrong for somebody. The value here is the
     first-paint fallback only. */
  position:fixed;
  top:var(--region-bar-top,3.9rem);
  left:0;right:0;
  z-index:110;                 /* under .mega-menu (Radio/TV) at 120 */
  background:rgba(23,12,34,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,217,160,.28);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.region-bar[hidden]{display:none;}

.region-strip{
  display:flex;
  align-items:center;
  gap:.3rem;
  /* One line, always. 23 towns + 19 topics will not wrap into anything
     readable, and wrapping is what made the mega panels tall. It scrolls
     sideways instead, and nav<N>.js scrolls the current chip into view on
     load so you always land looking at where you are. */
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  padding:.4rem clamp(.75rem,3vw,1.6rem);
}
.region-strip[hidden]{display:none;}


.region-strip a{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  min-height:38px;             /* tap target */
  padding:0 .7rem;
  border-radius:6px;
  border:1px solid transparent;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.01em;
  white-space:nowrap;
  text-decoration:none;
  color:rgba(255,247,235,.82);
  transition:color .18s ease,background .18s ease,border-color .18s ease;
}
.region-strip a:hover,
.region-strip a:focus-visible{
  color:var(--dawn-1);
  background:rgba(255,217,160,.10);
  border-color:rgba(255,217,160,.38);
}
/* The region's own hub LEADS the strip and names it — there is no separate
   label row (owner 2026-09-06: keep the menu small). Filled, the way
   pacificair's strip leads with its section chip, so it reads as the head of
   the list rather than as the first town. When you are actually on the hub it
   takes the aria-current pill below, which is the same fill in reverse. */
.region-strip a.rs-capital{
  font-weight:700;
  color:var(--dawn-1);
  background:rgba(255,217,160,.14);
  border-color:rgba(255,217,160,.45);
  margin-right:.35rem;
}

/* Orava, Tatry and Piešťany: hubs in their own right that are not kraje
   (owner 2026-09-06 demoted them from row 1 to here). Marked so the strip
   never implies they are towns of the kraj. */
.region-strip a.rs-area::before{
  content:"\25C6";             /* ◆ */
  margin-right:.4em;
  font-size:.62em;
  color:var(--dawn-2);
}
.region-strip a.rs-area{border-color:rgba(255,148,102,.35);}

.region-strip-sep{
  flex:0 0 auto;
  width:1px;
  align-self:stretch;
  margin:.25rem .55rem;
  background:rgba(255,217,160,.25);
}
/* Topics are the same size as places but quieter, so the eye reads
   "places, then what there is about them" without needing a heading. */
.region-strip a.rs-topic{color:rgba(255,247,235,.62);}
.region-strip a.rs-topic:hover,
.region-strip a.rs-topic:focus-visible{color:var(--dawn-1);}

/* THIS page: solid dawn pill — the same "you are here" grammar the top bar
   already uses, and pacificair's .section-nav[aria-current=page]. */
.region-strip a[aria-current="page"],
.region-strip a[aria-current="page"].rs-topic,
.region-strip a[aria-current="page"].rs-capital{
  color:#241018;
  background:var(--dawn-1);
  border-color:var(--dawn-1);
  font-weight:700;
}
/* This SECTION but not this page — the ancestor of a deep page. Outlined,
   never filled: on /bratislava/castles/devin/ the Castles chip is the way
   BACK to the list, and a filled chip reads as "you are already there". */
.region-strip a[aria-current="true"]{
  color:var(--dawn-1);
  background:rgba(255,217,160,.12);
  border-color:rgba(255,217,160,.55);
  font-weight:600;
}
.region-strip a[aria-current="true"]:hover{background:rgba(255,217,160,.22);}

/* ── SCROLL AFFORDANCE ────────────────────────────────────────────────────
   A strip that scrolls sideways with no sign that it does is a strip whose
   right-hand half does not exist. Banská Bystrica's runs to 23 towns plus 17
   topics; on a 1600px screen roughly half of it is off-canvas. Two things fix
   that: a fade at whichever end has more, and a button for the mouse, which
   has no horizontal gesture. Both are driven by nav<N>.js, which toggles
   .rb-more-left / .rb-more-right on the bar. */
.region-bar{position:fixed;}          /* containing block for the arrows */
.region-bar::before,
.region-bar::after{
  content:"";
  position:absolute;top:0;bottom:0;width:3.4rem;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  z-index:2;
}
.region-bar::before{
  left:0;
  background:linear-gradient(90deg,rgba(23,12,34,.96),rgba(23,12,34,0));
}
.region-bar::after{
  right:0;
  background:linear-gradient(270deg,rgba(23,12,34,.96),rgba(23,12,34,0));
}
.region-bar.rb-more-left::before,
.region-bar.rb-more-right::after{opacity:1;}

.rb-arrow{
  position:absolute;top:50%;
  transform:translateY(-50%);
  z-index:3;
  display:none;
  place-items:center;
  width:1.9rem;height:1.9rem;
  padding:0;
  border:1px solid rgba(255,217,160,.4);
  border-radius:50%;
  background:rgba(23,12,34,.92);
  color:var(--dawn-1);
  font-size:.8rem;
  line-height:1;
  cursor:pointer;
}
.rb-arrow:hover{background:var(--dawn-1);color:#241018;border-color:var(--dawn-1);}
.rb-arrow:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}
.rb-arrow[data-rb-scroll="prev"]{left:.35rem;}
.rb-arrow[data-rb-scroll="next"]{right:.35rem;}
.region-bar.rb-more-left  .rb-arrow[data-rb-scroll="prev"]{display:grid;}
.region-bar.rb-more-right .rb-arrow[data-rb-scroll="next"]{display:grid;}
/* Leave room so a chip never sits under an arrow. */
.region-bar.rb-more-left  .region-strip{padding-left:2.6rem;}
.region-bar.rb-more-right .region-strip{padding-right:2.6rem;}
/* Touch scrolls by finger; the buttons are mouse furniture. */
@media(hover:none){.rb-arrow{display:none !important;}
  .region-bar.rb-more-left .region-strip,
  .region-bar.rb-more-right .region-strip{padding-left:.75rem;padding-right:.75rem;}}

@media(max-width:999.98px){
  /* Below NAV_BP the top bar collapses to a hamburger; the strip stays,
     because on a phone it is the only always-visible navigation there is. */
  .region-strip{padding:.3rem .75rem;gap:.25rem;}
  .region-strip a{font-size:.74rem;padding:0 .55rem;min-height:36px;}
  .region-strip-label{font-size:.56rem;margin-right:.35rem;padding-right:.5rem;}
}
@media(prefers-reduced-motion:no-preference){
  .region-strip{scroll-behavior:smooth;}
}

/* Every page below the bar has to clear BOTH rows now. The homepage is
   exempt: it carries no strip (owner: the transit map IS the front page,
   keep it uncluttered), so :has() scopes this to pages that have one. */
html:has(.region-bar:not([hidden])){
  /* An in-page #fragment has to clear BOTH rows, so this one is the sum. */
  scroll-padding-top:calc(var(--region-bar-top,3.9rem)
                          + var(--region-strip-h,3.1rem) + 8px);
}
html:has(.region-bar:not([hidden])) body{
  /* …but the body offset is the STRIP ALONE: the page's hero already pads
     itself clear of the fixed navbar, so adding the navbar here again left a
     bar-sized band of dead space. Measured, not assumed — see measure(). */
  padding-top:var(--region-strip-h,3.1rem);
}

/* ============================================================
   QUICK PANEL — a COPY of pacificair.com's "Interactive Transit Maps"
   (owner 2026-09-06: "I want the 'Explore the Nitra Region' Designed to be
   the same as 'Interactive Transit Maps'").

   These are that component's own numbers, taken from the inline <style> in
   pacificair's /transit/index.html — panel #12151b with a 4px accent rail,
   cards #0a1628 on a #24406e border, cyan on hover, 210px grid columns, 10px
   gaps. Do not "harmonise" them with the rest of this stylesheet: the point
   is that the two sites render the same component identically.

   The one deliberate difference is the mark. pacificair uses an emoji per
   city (🚝🚅🚈); those are per-city and there is no emoji for "Attractions"
   or "UNESCO" that is not a guess, so this uses the inline SVG set in
   regionmenu/icons.py at the emoji's optical size and in the accent colour.
   No box around it — pacificair has none.
   ============================================================ */
.quick-panel{
  margin:14px 0 0;
  padding:18px 20px;
  background:#12151b;
  border:1px solid #2a2a2a;
  border-left:4px solid #ffb703;
  border-radius:10px;
}
.quick-panel h2{
  margin:0;
  color:#f2ede3;
  font-family:var(--serif);
  font-size:1.5rem;
}
.quick-lede{margin:0 0 14px;color:#9aa4b2;font-size:.97em;line-height:1.5;max-width:none;}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px;
}
.quick-card{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 13px;
  background:#0a1628;
  border:1px solid #24406e;
  border-radius:10px;
  text-decoration:none;
  transition:border-color .15s,transform .12s;
}
.quick-card:hover,
.quick-card:focus-visible{border-color:#3ad0ff;transform:translateY(-2px);}
.quick-icon{flex:0 0 auto;display:flex;color:#ffb703;}
.quick-icon svg{display:block;width:22px;height:22px;}
.quick-text{display:flex;flex-direction:column;min-width:0;}
.quick-text strong{
  color:#e6edf3;
  font-size:.98em;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.quick-text small{
  display:block;
  color:#8ea4cc;
  font-size:.8em;
  font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.quick-card:hover .quick-text strong,
.quick-card:focus-visible .quick-text strong{color:#3ad0ff;}
/* Not in pacificair's component: how many pages sit behind the chip. Kept
   because it is real information the transit strip had no use for, and muted
   into the card's own border colour so it reads as a detail, not a badge. */
.quick-n{
  flex:0 0 auto;
  margin-left:auto;
  padding:.05rem .4rem;
  border-radius:99px;
  background:#16294a;
  color:#8ea4cc;
  font-size:.74em;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.quick-card:hover .quick-n{color:#3ad0ff;}
@media(prefers-reduced-motion:reduce){
  .quick-card{transition:none;}
  .quick-card:hover{transform:none;}
}

/* ============================================================
   ROW-1 BAR — SOLID NAVY (owner pick 2026-09-06, /design/menu0.html)

   Owner, on a town page with a pale hero: "the main menu, it's kind of bright
   background and bright fonts. Can we change it? Look at the menu at
   mywbs.com." Ten treatments were built at /design/menu0..9.html and this one
   — mywbs.com's — was chosen.

   THE FAULT IT FIXES, precisely: .site-nav was rgba(10,8,14,.30) over a
   backdrop-filter blur. That is a 30% scrim, so whatever the page puts behind
   it bleeds through. Over a pale hero (a town page, the alpine palette) the bar
   rendered light grey and its #fff links sat at roughly 1.6:1 — unreadable.
   Row 2 never had the problem because it was always opaque.

   So the load-bearing part is OPAQUE, not the particular navy: never restore a
   translucent background here, whatever colour is chosen later. The blur is
   switched off too — it costs a compositor layer and buys nothing once the
   background is solid.

   ⚠ The current-item rule MUST carry :not(.nav-search):not(.account-fab). The
   stylesheet's own .nav-current rule has specificity (0,4,2); a plain
   .nav-links>li>a.nav-current is (0,2,2), loses, and the white pill renders
   with white text on it. That was a real bug in the first draft of this. */
.site-nav{
  background:#16255e;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.nav-links>li>a{color:#fff;font-weight:700;text-shadow:none;}
.nav-links>li>a:hover{color:#ffd9a0;}
.nav-links>li>a.nav-current:not(.nav-search):not(.account-fab){
  background:#fff;
  color:#16255e;
  border-radius:6px;
  padding:.28rem .7rem;
  border-bottom-color:transparent;
}
/* Row 2 follows row 1 into navy so the two read as one stack rather than two
   unrelated bars. */
.region-bar{background:#0f1b45;border-bottom-color:rgba(255,255,255,.18);}
/* Below NAV_BP the links become a dropdown panel; it was plum-black to match
   the old bar and would now be the one piece still wearing the old colour. */
@media(max-width:999.98px){
  .nav-links.open{background:#16255e;border-color:rgba(255,255,255,.22);}
}
/* REGION-MENU:end */

/* NAV-BASELINE:start (owner 2026-09-06) ============================
   "align the NITRA.NET on the main menu with the other items … the size can
   stay but move it a little bit higher."

   .site-nav is align-items:center, which centres each child's BOX. The brand
   is a 1.1rem serif and the links are .74rem uppercase sans, so two boxes of
   different heights centred on the same line put the brand's baseline ~8-9px
   BELOW the links' — which is what reads as the brand sitting too low.

   The fix is to align the two on their BASELINES instead of their boxes.
   .nav-links is itself a flex container, so its baseline is its first item's
   baseline — i.e. the first menu link — which is exactly the line the brand
   should sit on. Everything else in the bar (the hamburger below NAV_BP, and
   the pills, which live inside .nav-links) keeps the centring it had.

   Deliberately NOT a translateY nudge: the gap is a function of both font
   sizes, and both step with html{font-size} at 1600 and 1920, so a fixed
   offset would be right at one width and wrong at the other two. */
@media(min-width:1000px){
  .nav-mark{align-self:baseline;}
  .nav-links{align-self:baseline;}
}
/* NAV-BASELINE:end */

/* NAV-DOTS:start (owner 2026-09-06) ================================
   "Place dot between every main menu item."

   Drawn by the item that FOLLOWS another one, so there is never a dot
   before the first item or after the last. The :not() chain excludes the
   three kinds of <li> that are not menu items: .nav-extra (hamburger-only
   topic rows, display:none up here), .nav-search-item and .nav-actions (the
   Search/Chat/Sign-in pills, pushed to the far right by margin-left:auto —
   a dot before those would float alone in the middle of the bar).

   position:absolute is load-bearing, not tidiness. The first cut used a
   ::before in flow with a margin, and it cost ~18px per separator: the dot's
   own width PLUS a margin that duplicated the flex gap. Eleven of those took
   the bar from +63px of slack to -86px at 1000px and negative everywhere up
   to 1728px — i.e. it wrapped. Taking the dot out of flow and hanging it in
   the middle of the existing gap costs nothing, which is why --nav-gap
   exists: the offset has to track whichever gap band is in force.

   Only from NAV_BP up: below 1000px .nav-links is the stacked hamburger
   panel, where a separator between two rows would sit on a line of its own.

   The (dropdown) marker on TV and Radio stays. It says "this one opens a
   panel", which is a different fact from "here is where the next item
   starts". */
@media(min-width:1000px){
  /* Anchored to the <a>, NOT the <li>. Making the li a containing block is
     the one thing this must not do: .has-mega{position:static} is deliberate
     and load-bearing — it is what makes a mega panel span the BAR instead of
     its own tab, which is the myhealthcare lesson recorded in CLAUDE.md. A
     first cut set .nav-links > li{position:relative} and silently overrode
     it. The <a> is a safe containing block: the panel is its SIBLING, not
     its child. */
  .nav-links > li:not(.nav-extra):not(.nav-search-item):not(.nav-actions)
  + li:not(.nav-extra):not(.nav-search-item):not(.nav-actions) > a{position:relative;}
  .nav-links > li:not(.nav-extra):not(.nav-search-item):not(.nav-actions)
  + li:not(.nav-extra):not(.nav-search-item):not(.nav-actions) > a::before{
    content:"\00B7";                    /* MIDDLE DOT */
    position:absolute;
    left:calc(var(--nav-gap, .9rem) / -2);
    /* top:0 + the inherited line-height, NOT top:50%/translateY(-50%):
       the <a> carries padding-bottom:3px and a 1px underline border, so the
       li box's middle is BELOW the middle of the letters, and a centred dot
       hung near the baseline like a comma. Sharing the text's own line box
       puts it on the text baseline, which is where a middle dot belongs. */
    top:0;
    transform:translateX(-50%);
    line-height:inherit;
    color:rgba(255,255,255,.45);
    text-shadow:0 1px 3px rgba(0,0,0,.65);
    pointer-events:none;
  }
  /* The pills group keeps its own left edge clear: .nav-actions is a flex
     item too, and a stray dot would otherwise hang in the auto margin. */
  .nav-links > li.nav-search-item > a::before,
  .nav-links > li.nav-actions > a::before{content:none;}

  /* The CURRENT item is a filled pill with padding:.28rem .7rem (the
     region-menu block above), so its padding box — the containing block for
     this dot — starts .28rem higher and .7rem further left than a plain
     item's text. Without these two corrections the dot in front of the
     current item floats above the row and hugs the previous label. */
  .nav-links > li:not(.nav-extra):not(.nav-search-item):not(.nav-actions)
  + li:not(.nav-extra):not(.nav-search-item):not(.nav-actions)
  > a.nav-current:not(.nav-search):not(.account-fab)::before{
    top:.28rem;
    left:calc(var(--nav-gap, .9rem) / -2 + .35rem);
  }
}
/* NAV-DOTS:end */

/* FIRST-BLOCK:start (owner 2026-09-06) =============================
   "reduce the padding from top to minimum: example: Explore the Bratislava
   Region."

   A .story-section carries clamp(2rem,4vw,3rem) of vertical padding so
   consecutive bands breathe. The FIRST one on a page has no band above it —
   only the breadcrumb bar — so that padding is pure dead space, and on the
   city hubs it stacked with the quick panel's own margin and padding to put
   ~140px between the strip and "Explore the ... Region".

   Heroes are excluded: body:has(.breadcrumb-bar) .subpage-hero already sets
   its own 1.6rem, which is the tuned figure for a hero and not excessive.
   And #transit on the /transit/ pages keeps its own padding:0 — an id
   selector, so it outranks this.

   The panel's own margin-top goes with it when it leads the section; it is
   there to separate the panel from prose above it, and there is none. */
.breadcrumb-bar + .story-section:not(.subpage-hero){padding-top:.5rem;}
.breadcrumb-bar + .story-section > .section-inner > .quick-panel:first-child{
  margin-top:0;
}
/* FIRST-BLOCK:end */

/* IMG-SEAM:start (owner 2026-09-06) ================================
   "reduce the padding to minimum between the section and image."

   Three separate gaps used to stack at that seam and none of them knew about
   the others: the ENDING section's padding-bottom, the FOLLOWING block's
   padding-top, and the image's own .img-slot margin-top. On /bratislava/ at
   1728px that was 32 + 20 + 23 = 75px of nothing between the "Explore the
   Bratislava Region" panel and the photograph under it.

   Scoped to the image seam on purpose. The section rhythm above is what
   keeps consecutive TEXT bands apart and still has to; an image needs no
   run-up, so this collapses the three gaps into one small one — about 19px
   at 1728 — wherever a block LEADS with a picture.

   A hero is matched by .subpage-hero > .img-slot rather than by :first-child:
   every hero still ships a .bg-illustration AND a .veil ahead of the picture
   (both display:none since the 2026-08-09 plain-colour rule, but present in
   the DOM, and :first-child is a DOM test, not a layout one). A first cut
   used :first-child and quietly matched nothing — measure, don't assume.

   .hero-bg-slot is excluded and must stay excluded: that variant is an
   absolutely-positioned full-bleed backdrop, and the hero's top padding is
   what positions the TEXT over it, not the image. */
.subpage-hero > .img-slot:not(.hero-bg-slot),
.story-section > .img-slot:not(.hero-bg-slot):first-child{margin-top:0;}
.subpage-hero:has(> .img-slot:not(.hero-bg-slot)),
.story-section:has(> .img-slot:not(.hero-bg-slot):first-child){padding-top:.35rem;}
.story-section:has(+ .subpage-hero > .img-slot:not(.hero-bg-slot)),
.story-section:has(+ .story-section > .img-slot:not(.hero-bg-slot):first-child){
  padding-bottom:.7rem;
}

/* Since 2026-09-06 the picture also LEADS every content section (owner chose
   image / heading / prose from three sketches; 59-image-first-sections.py
   moved 3,801 of them). Same collapse as above, one level deeper — the figure
   is the first child of .section-inner there, not of the section itself.

   margin-bottom is the one thing this ADDS rather than removes: with the
   figure last, the section's own bottom padding separated its caption from
   whatever came next. Leading the section, the caption would otherwise sit
   directly on the heading's cap-line. */
.section-inner > .img-slot:not(.hero-bg-slot):first-child{
  margin-top:0;
  margin-bottom:1.15rem;
}
.story-section:has(> .section-inner > .img-slot:not(.hero-bg-slot):first-child){
  padding-top:.35rem;
}
.story-section:has(+ .story-section > .section-inner > .img-slot:not(.hero-bg-slot):first-child){
  padding-bottom:.7rem;
}
/* IMG-SEAM:end */

/* PLACE-CHIPS:start (owner 2026-09-06) =============================
   "the (History) button needs to be removed and somehow History, Culture and
   other items need to be able to be selected by user."

   Row 3 stops being a rack of action pills and carries a chip strip of the
   CURRENT PLACE's own chapters — the thing rows 1 and 2 cannot show, because
   row 2 is scoped to the region (/bratislava/culture/, not Pezinok's). Built
   per page by 60-place-chapters.py, which reads the tree.

   Deliberately chips, not .map-btn twins: On Map is an ACTION and keeps the
   pill shape and the right-hand rail; these are NAVIGATION and share the
   grammar of the row-2 strip instead — same radius, same weights, same dawn
   fill for "you are here". Smaller than row 2's, because row 3 is a compact
   bar and this sits beside the trail rather than replacing it.

   margin-right:auto is what keeps the group with the crumbs: .breadcrumb-bar
   is justify-content:space-between, so without it a third child would float
   to the middle of the bar instead of following the trail. */
.place-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.3rem;
  margin-right:auto;
  /* Clears the trail without opening a gap when the bar wraps on a phone. */
  padding-left:.9rem;
}
.place-chips a{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  min-height:30px;                 /* tap target, one row-3 line tall */
  padding:0 .62rem;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.20);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  text-decoration:none;
  color:rgba(255,247,235,.84);
  transition:color .18s ease, background .18s ease, border-color .18s ease;
}
.place-chips a:hover,
.place-chips a:focus-visible{
  color:#fff;
  background:rgba(255,255,255,.09);
  border-color:rgba(255,217,160,.55);
}
/* The place itself leads the strip, filled the way the row-2 capital chip is,
   so the strip names what it belongs to without spending a label on it. */
.place-chips a.pc-self{
  font-weight:700;
  color:var(--dawn-1);
  background:rgba(255,217,160,.14);
  border-color:rgba(255,217,160,.45);
  margin-right:.2rem;
}
/* THIS page — the same solid dawn pill rows 1 and 2 already use. */
.place-chips a[aria-current="page"],
.place-chips a.pc-self[aria-current="page"]{
  color:#241018;
  background:var(--dawn-1);
  border-color:var(--dawn-1);
  font-weight:700;
}
@media(max-width:720px){
  /* On a phone the bar is already two rows; give the strip its own line
     rather than squeezing it beside the trail. */
  .place-chips{padding-left:0;flex-basis:100%;}
  .place-chips a{font-size:.62rem;padding:0 .5rem;min-height:28px;}
}

/* --- YEAR RAIL (owner 2026-09-21) --------------------------------------
   "there should not be Kultura because /history/ and /culture/ is on the
   same level -- instead when user is on .../history/ -- all the years
   should be display where user can click on it."

   Inside /history/ the strip stops listing the place's sibling CHAPTERS and
   lists that place's YEARS — the same stops, in the same order, as the
   slider on the landing — and it rides on the year pages too, which had no
   strip at all.

   It takes its OWN line. A year page's trail is five items long and the
   shortest rail is seven numerals; at 1440px the two together are already
   past the end of the bar, and /kosice/history/ carries thirty-six.
   flex-basis:100% states that once instead of leaving every page to find
   its own wrap point.

   And it WRAPS rather than scrolls, on purpose: the owner asked for all the
   years displayed, and a scroll rail hides the ends of the century behind a
   gesture. On a phone the base rule below already gives the strip its own
   line, so nothing extra is needed there. */
.place-chips.year-chips{
  flex-basis:100%;
  padding-left:0;
  margin-top:.1rem;
  row-gap:.28rem;
  /* LAST in the flex order, though it sits before .map-cta in the DOM (the
     strip is spliced between the trail and the pills, and On Map has to stay
     the last thing in the bar's source for 46-add-map-buttons.py). A
     100%-basis item takes a whole line, so in source order it pushed On Map
     down to a third line and space-between then parked it on the LEFT.
     order:2 puts the trail and the pill back on one line with the rail
     underneath. */
  order:2;
}
/* Numerals: tabular figures give every chip the same width, so the rail does
   not shuffle between 1918 and 1993, and a four-digit number needs less side
   padding than a word. */
.place-chips a.pc-year{
  padding:0 .52rem;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* The chapter itself sits between the place and the numbers, so a rail of
   bare years says what it is a list of. */
.place-chips a.pc-up{margin-right:.25rem;}

/* LEVEL 5 — A YEAR PAGE DROPS THE TRAIL FROM THE SCREEN (owner 2026-09-22,
   on /trnava/towns/velky-meder/history/1993/: "we could not include Home ·
   Trnava · Towns · Veľký Meder · History · 1993 because it is redundant and
   only keep [the chips] -- this would apply only 5th level like a history -
   on all other levels 4,3,2,1 no change").

   It is redundant: the rail already links Veľký Meder and History, and the
   filled chip already says 1993. What the trail alone carried is Home,
   Trnava and Towns — and row 2 is Trnava's own strip, so only the towns
   INDEX moves from one hop to two.

   HIDDEN, NOT DELETED, and that is the one change to the proposal.
   9-seo-meta.py builds every page's BreadcrumbList JSON-LD by PARSING
   <p class="breadcrumb">: delete the markup and 3,273 year pages lose their
   breadcrumb rich result in Google and the script has nothing left to read.
   The visually-hidden idiom is .radio-fab-sr's, so the trail also stays in
   the accessibility tree and a screen reader still hears the full path.

   :has() rather than a class, so it cannot drift from what the builder
   writes: the rail's current chip is a .pc-year ONLY on a year page — on
   the /history/ landing the current chip is .pc-up.

   Taking the trail out of the flow is only HALF the saving. On Map is its
   own flex item and would have kept that first line to itself, so the rail
   gives up flex-basis:100% here and shares the line with it. Measured
   1728 EN: bar 143.7 -> 112.6px, first headline 268 -> 237. */
.breadcrumb-bar:has(.year-chips a.pc-year[aria-current="page"]) > p.breadcrumb{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.breadcrumb-bar:has(.year-chips a.pc-year[aria-current="page"]) .year-chips{
  flex:1 1 auto;
  flex-basis:auto;
  order:0;
  margin-top:0;
}
/* On a phone the rail is a one-line side-scroller and needs the whole width
   back — On Map would otherwise take a third of a 390px screen off it. */
@media(max-width:720px){
  .breadcrumb-bar:has(.year-chips a.pc-year[aria-current="page"]) .year-chips{
    flex-basis:100%;
  }
}

/* WRAP AT EVERY DESKTOP WIDTH, SCROLL ONLY ON A PHONE — measured, not
   guessed (nav-probe/year-rail/out-measurements*.txt, EN and SK, 390 to
   1920). Twelve stops is the commonest length and is ONE row from 1000px
   up; the four long rails (/kosice/history/ 36, /tatry/ 33, /zilina/ 30,
   /orava/ 26) take two rows at 1440 and 1920, which costs 25px of bar and
   keeps every year on screen — a side-scroller there would have hidden
   704px of the century behind a gesture, and "all the years should be
   display" is the whole request.

   A phone is the one place that trade goes the other way: twelve chips are
   three rows at 390px and put the bar at 254px under a 63px navbar. One
   scrolling row brings that back to 191px, and nav<N>.js scrolls the year
   you are on into the middle of it. The breakpoint is 720px because that
   is where .place-chips already gives the strip its own line — one band,
   not two. */
@media(max-width:720px){
  .place-chips.year-chips{
    flex-wrap:nowrap;
    min-width:0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;          /* a swipe needs no visible track */
    -webkit-overflow-scrolling:touch;
    padding-bottom:.1rem;
  }
  .place-chips.year-chips::-webkit-scrollbar{display:none;}
}
/* PLACE-CHIPS:end */

/* CARD-LINK:start (owner 2026-09-06) ================================
   "when user is on the page and wants to follow the link, user should be able
   to click anywhere on the box instead of the link inside it, if there is only
   one href link inside the box."

   The card already lifts and brightens on hover, so it has always LOOKED
   clickable; only the heading text actually was. This makes the whole box the
   hit area.

   ONLY where the card's sole link is its heading link. That condition is the
   owner's and it is load-bearing, because the site's boxes are not all alike:

     entry-card   998   478 have exactly one link  <- these
                        481 have NO link at all — the "Category, not a
                            listing" cards, which must not become clickable
                             39 have two or more
     biz-card    1196   every one carries Website AND Google Maps
     att-card     511   likewise

   Stretching a link across a card that holds a second one would swallow it,
   which is why the selector below insists that NO link in the card sits
   outside an <h3> (`:not(:has(:not(h3) > a))`) and that the <h3> itself holds
   only one (`:not(:has(h3 > a ~ a))`). biz-card and att-card are excluded by
   the same test, without naming them.

   Done with a stretched pseudo-element rather than JavaScript on purpose: the
   real <a> keeps the focus ring, the status-bar URL, middle-click, ctrl-click
   and "copy link address". A JS click handler loses all five.

   The trade-off, accepted: dragging to select text inside the card now starts
   a link drag instead. These are navigation cards, not prose.  */
.entry-card:has(> h3 > a):not(:has(:not(h3) > a)):not(:has(h3 > a ~ a)),
.feature-card:has(> h3 > a):not(:has(:not(h3) > a)):not(:has(h3 > a ~ a)){
  position:relative;
  cursor:pointer;
}
.entry-card:has(> h3 > a):not(:has(:not(h3) > a)):not(:has(h3 > a ~ a)) > h3 > a::after,
.feature-card:has(> h3 > a):not(:has(:not(h3) > a)):not(:has(h3 > a ~ a)) > h3 > a::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
}
/* Keyboard parity: the card shows the same lift when its link is focused, so a
   tabbing reader sees the same box highlight a mouse user does. */
.entry-card:has(> h3 > a:focus-visible),
.feature-card:has(> h3 > a:focus-visible){
  border-color:currentColor;
  background:rgba(255,255,255,.13);
}
/* CARD-LINK:end */

/* ── MEGA-PANEL FIT, 1000–1199.98px ─────────────────────────── 2026-09-17 ──
   The Business panel's first column grew when Car rental joined Hotels
   (owner: "add Car Rental in /business/ after Hotel"), and at 1100px six
   labels began ellipsizing where none did before. Measured, not guessed:
   megamenu-probe/panel-fit.html reports each column's widest overflow —
   4–7px per column, about 32px across the panel. Every column boundary costs
   the flex GAP and the next column's padding-left, so trimming both by ~5px
   here buys roughly 50px. From 1200px up nothing truncated and nothing
   changes; at 1000px the panel was already ellipsizing before this and is
   now slightly better. Re-run panel-fit.html before adding another column. */
@media (min-width:1000px) and (max-width:1199.98px){
  .mega-inner{gap:clamp(.9rem,1.75vw,2.4rem);}
  .mega-col + .mega-col{padding-left:clamp(.9rem,1.75vw,2.4rem);}
}

/* NAV-WORDMARK:start (owner 2026-09-23) ===========================
   "can we use the same ... Social on nitra.net the same as we use on
   social.nitra.net — it looks very nice and clean — and remove the
   'Social Sign In'".

   The serif NITRA.NET gave way to the social section's own wordmark: the
   castle mark, NITRA.NET in white, Social in indigo, system sans at 700.
   It is TWO links that read as one word (menu partial): the mark and
   NITRA.NET go home as the old brand did, Social goes to social.nitra.net —
   the way in that the Social Sign In pill used to be.

   The numbers are the social bar's (its wbs-nav.css, on a 16px root):
   1.12rem type, a 27px mark, 9px from the mark to the word, and the two
   words 6px apart — 3px of padding on each side of the join, so a hover
   wash stops where its word does. Written in rem, so below 1600px they
   ARE the social bar's pixels and above it they step with html{font-size}
   like everything else in this bar. The class stays .nav-mark, which keeps
   NAV-BASELINE and nav-probe/navheight working unchanged.

   INLINE boxes, not flex, on purpose. From NAV_BP up .nav-mark is
   align-self:baseline so the words sit on the menu items' baseline (owner
   2026-09-06). A flex link takes its baseline from its FIRST item, and the
   first item here is the SVG, which has no text: the baseline would be
   synthesised from its bottom edge and the words would drop by several
   pixels. On an inline line the baseline is the text's own, and the mark
   is centred on the words by vertical-align — calc(.35em - half the mark)
   puts its middle .35em above the baseline, which is where the social
   bar's flex centring puts it (the middle of the text box, within 0.2px
   measured); plain `middle` sat it ~1.4px low against the capitals.

   Inline boxes also never grow a line box with their vertical padding, so
   the hover chip is free: the bar is as tall as the mark and the words
   make it, not the wash around them. The wash is the social bar's
   rgba(255,255,255,.12), one half at a time — each link owns its own
   :hover — rounded like row 1's current-item pill. The outer ends of the
   chip reach 6px past the words and give the same 6px back as a negative
   margin, so the mark stays on the page gutter and the gap to the menu is
   unchanged. */
.nav-mark.nav-brandpair{
  /* The four sizes as custom properties, so the COMPACT band at the end of
     this block can step the whole wordmark down in one place and the mark's
     centring (half of --wm-mark) follows it. These are social's numbers. */
  --wm-fs:1.12rem;            /* type */
  --wm-mark:1.6875rem;        /* 27px mark */
  --wm-gap:.5625rem;          /* 9px mark-to-word */
  --wm-join:.1875rem;         /* 3px each side of the join: words 6px apart */
  display:block;
  white-space:nowrap;
  font-family:var(--sans);
  font-weight:700;
  font-size:var(--wm-fs);
  line-height:normal;
  letter-spacing:.01em;
  text-transform:none;
  text-shadow:none;
}
.nav-brandpair .nav-brand{
  color:#fff;
  text-decoration:none;
  padding:.35rem var(--wm-join);
  border-radius:6px;
  transition:background-color .15s ease;
}
.nav-brandpair .nav-parent{padding-left:.375rem;margin-left:-.375rem;}
.nav-brandpair .nav-social{
  color:#a5b4fc;
  padding-right:.375rem;margin-right:-.375rem;
}
.nav-brandpair .nav-brand:hover,
.nav-brandpair .nav-brand:focus-visible{background:rgba(255,255,255,.12);}
.nav-brandpair .nav-brand:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}
.nav-brandpair .nav-brand-ic{
  display:inline-block;          /* img,svg{display:block} sitewide */
  width:var(--wm-mark);height:var(--wm-mark);
  margin-right:var(--wm-gap);
  vertical-align:calc(.35em - var(--wm-mark) / 2);
}
@media(prefers-reduced-motion:reduce){.nav-brandpair .nav-brand{transition:none;}}
/* THE BAR'S HEIGHT IS HELD, not grown (owner 2026-09-22 took it -16%).
   The 27px mark reaches higher above the baseline than the serif's 21px
   line did, and .nav-mark is what sets the row's ascent, so the bar grew
   by 1.8px at 1440 and 3.3-3.5px at 1728/1920. A negative top margin takes
   exactly that back — the mark rises into the bar's own top padding, which
   is 11-13px there — and nav-probe/navheight reads 53.6 / 58.7 / 61.7px at
   1440 / 1728 / 1920 again. Two values because the serif's ascent did not
   scale with the root the way the mark does; one value would leave either
   1440 1.1px short or 1728+ 1.4px tall. Row-1 only: below NAV_BP the
   hamburger sets the bar's height and the mark is simply centred. */
@media(min-width:1000px){ .nav-mark.nav-brandpair{margin-top:-.11rem;} }
@media(min-width:1600px){ .nav-mark.nav-brandpair{margin-top:-.18rem;} }
/* Phones: the social bar sets its brand at 1.35rem up to 768px, and so does
   this one — capped by the viewport, so a 320px phone still gets the
   wordmark and the hamburger on one row (5.6vw is 1.35rem at 386px). */
@media(max-width:768px){
  .nav-mark.nav-brandpair{--wm-fs:clamp(1.12rem,5.6vw,1.35rem);}
}
/* COMPACT BAND, 1000-1399.98px (2026-09-23, the same day — review fix).
   The wordmark is 213px against the serif's 124, and in THIS band the
   Social Sign In pill it replaced had been clipped to its 28px icon. From
   1400px up the labelled pill gave back more than the wordmark takes; here
   the bar came out 55.9px short, and the brand dropped to its own row (bar
   53.7 -> 78.9px, everything below it 25px lower) from ~1100 to ~1160px EN
   on the home page and ~1130 to ~1200 under a current row-1 item (SK ~1060
   to ~1120 / ~1080 to ~1140) — small-laptop and tablet-landscape widths
   that had been one row. The band that paid for the pill now pays for the
   wordmark, and only this band:
   * the wordmark steps down to .875rem type and a 21px mark, the same
     drawing, colours and proportions at 78% (-46.5px). It is still 1.37x
     the band's .64rem menu labels; the social bar's own brand is 1.14x its
     items.
   * the brand-to-menu gap goes 2rem -> 1.25rem (-12px). It was the widest
     single space in the row and is still 2.5x the item gap, which is left
     alone (the dots' air, owner 2026-09-06), as are the Search pill (the
     On Map / History twin) and the menu type.
   Measured live against the pre-wordmark files (menu103/style108/nav96),
   EN and SK, home and hub pages: every width from 1000 to 1399 has 2.65px
   MORE slack than it had with the serif brand and the icon pill, so the
   bar is one row everywhere it was one row before.
   2026-09-24: no longer — EN/SK joined row 1 (~62px + the group gap) and
   the brand now takes its own row below ~1207px EN / ~1164 SK with a
   current row-1 item, ~22px narrower without one (nav-probe/lang-in-bar/).
   THE MARGINS HOLD THE BAR'S HEIGHT, in both of its shapes. The brand's
   line box is set by the mark alone — ascent .35em + half the mark,
   descent half the mark - .35em — so this is geometry, not font metrics.
   The 21px mark rises 4.4px less, and the brand sets the one-row bar's
   ascent, so without +.164rem the bar would be 49.3px here and step back
   to 53.7 at 1400; with it, 53.66px, the same as on either side of the
   band. The -.1rem underneath cannot touch the one-row bar (the links set
   its descent) and brings the TWO-row bar (1000 to ~1100px, the brand on
   a row of its own) back to its pre-wordmark 75.6px instead of 77.3. */
@media(min-width:1000px) and (max-width:1399.98px){
  .site-nav{column-gap:1.25rem;}
  .nav-mark.nav-brandpair{
    --wm-fs:.875rem;          /* 14px */
    --wm-mark:1.3125rem;      /* 21px */
    --wm-gap:.4375rem;        /* 7px */
    --wm-join:.15rem;         /* 2.4px a side */
    margin:.164rem 0 -.1rem;
  }
}
/* NAV-WORDMARK:end */