/* ============================================================================
   Design tokens - the single source of truth for the template.

   Colour was locked with the owner on 2026-09-07 ("Roof red", hand-tuned after the
   palette tool's three proposals all came back blue-only), the logo on the same day,
   and the type scale on the same day from the stage 2 tuner page, judged on the real
   northern-lights article at desktop width and at 390px.

   Nothing in the renderer may hard-code a colour, size or family. Everything reads from
   here, so a change lands everywhere at once and translates cleanly into the nine other
   locales.
   ============================================================================ */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;          /* one variable file, not two static cuts */
  font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {

  /* ---- Typography -------------------------------------------------------
     ONE family for everything. That was a speed decision as much as a visual
     one: a single variable font means one file, one connection, no second
     face blocking first paint.

     SELF-HOSTED, and on this site that is still a legal question rather than a
     preference. The guide publishes in ten languages, German among them, and a
     German reader loading the face from fonts.googleapis.com would send their IP
     address to Google before any consent could be collected - the setup the
     Landgericht Muenchen penalised in 2022. Serve it from our own origin. There
     is no Google connection anywhere in the pages.

     Two subsets, 30 KB total, one variable file each covering 400..700. The
     browser downloads latin-ext only if a glyph needs it; English prose never
     does, and Icelandic place names (Reykjavik, Hallgrimskirkja, Thingvellir)
     are written with their real letters in the latin-ext range, so the second
     file does get pulled on most pages of this site. Figtree is OFL licensed;
     assets/fonts/OFL.txt ships beside it as the licence requires.             */


  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font-body);

  --size-body:      19px;
  --leading-body:   1.62;
  --measure:        680px;   /* max line length for running prose */
  --space-para:     1.10em;
  --weight-body:    400;

  --size-h1:        43px;
  --weight-head:    700;
  --tracking-head:  -0.025em;
  --leading-head:   1.15;

  /* Heading scale.
     NOTE: h2 is set explicitly rather than derived from h1. Deriving it on the
     reference site produced a 21.5px h2, only 16 % above body text, which is too
     weak a step for articles that run to 2,500 words. These values keep a
     readable ladder under the h1 whatever the h1 ends up being.              */
  --size-h2:        29px;
  --size-h3:        23px;
  --size-lede:      21.5px;  /* the standfirst under h1 */
  --size-small:     16.5px;  /* captions, meta, footnotes */
  --size-micro:     13.5px;  /* eyebrows, labels, table headers */

  /* Mobile step-down. English headlines are shorter than the German ones these
     numbers were first cut for, but "When the northern lights are actually
     visible from Reykjavik" still needs the h1 to come down at 390px.        */
  --size-h1-sm:     32px;
  --size-h2-sm:     24px;
  --size-body-sm:   18px;

  /* ---- Colour -----------------------------------------------------------
     Light only, by owner decision: light hero, light body, light everywhere.
     The palette is "Roof red", read off the owner's own hero photograph on
     2026-09-07: the bay and the mountain give the blue, the roofs of the old
     town give the red, and the neutrals are cooled towards the blue so they
     read as chosen rather than defaulted. Every ratio below is measured
     against --paper, not estimated.                                          */

  --paper: #F5F7F9;   /* page ground - a cool near-white, the winter light in
                                  the hero photograph */
  --paper-sunk: #E7ECF0;   /* alternating section bands */
  --card: #FFFFFF;   /* cards lift off the cool ground */
  --ink: #12222C;   /* body text - the harbour navy. 15.15:1 */
  --ink-soft: #54626B;   /* secondary text, captions. 5.86:1 */
  --ink-faint: #8B979E;   /* meta, disabled - decorative only, never body copy */
  --rule: #D4DCE2;   /* card borders */
  --rule-soft: #E4EAEE;   /* internal dividers, table rows */

  --accent: #0F6C9E;   /* links, eyebrows. The bay blue, dark enough to read
                                  as text. 5.34:1 */
  --accent-rgb: 15, 108, 158;  /* the same colour as a triplet, for the rgba() stops of
                                  the subheading device. Keep in step with --accent. */
  --accent-ink: #0A4C70;   /* link hover. 8.57:1 */
  --teal: #2C6E74;   /* the secondary accent. Non-commercial notes and
                                  informational callouts only. 5.45:1 */

  /* ---- Call to action ---------------------------------------------------
     BINDING RULE, owner instruction: the CTA must always hold strong contrast
     against everything around it. Reserved for commercial calls to action and
     never reused for links, headings, borders, icons or decoration.

     THE LABEL IS WHITE HERE, and that is measured, not assumed. This palette
     inverts the reference site's rule, which had a navy label on a bright amber:
        #FFFFFF on #C2301A  =  5.63:1  AA    correct
        #12222C on #C2301A  =  2.89:1  FAIL  unreadable
     A dark label on this red is the single easiest way to break the button. The
     hover state is darker still (#A62817), so white only gets safer: 7.15:1.

     The hierarchy works because the two colours are far apart in hue and close
     in weight: links are blue and never red, the button is red and never blue,
     and nothing else on a page is allowed to be either.                       */

  --cta: #C2301A;   /* the red roofs of the old town. 5.24:1 on paper */
  --cta-hover: #A62817;
  --cta-ink: #FFFFFF;   /* white label. Never the ink navy - see above. */

  /* ---- Evidence -----------------------------------------------------------
     The badge on an offer ("Most booked", "Top rated") and the star beside a rating.
     They are not decoration and not a third accent: they say the catalogue has counted
     something. Amber because that is what a rating is everywhere, held to a tint pale
     enough that the roof red stays the only saturated thing on a card.
        #8A4B00 on #FBEBD2  =  5.80:1
     The star is a glyph next to a number set in ink, so it carries no meaning on its
     own and 3.82:1 against white is a decorative contrast, not a text one.          */

  --badge:     #FBEBD2;
  --badge-ink: #8A4B00;
  --star:      #B8730B;

  /* ---- Shape and depth --------------------------------------------------
     Rounded blocks and cards, per reference 1. Shadows stay very light: the
     separation comes from the border and the ground, not from drop shadow.  */

  /* ---- Charts ----------------------------------------------------------
     The pair is checked against the page ground: warm and cool are far enough
     apart to survive protanopia, both carry chroma above the paper, and both
     clear 3:1 against it. --chart-mute is the fill of the bars that are NOT
     highlighted: it has to lift off the track, or a row of five bars reads as
     four empty gutters and one full one. That was the mistake it fixes.      */
  --chart-warm: #C2301A;
  --chart-cool: #0F6C9E;
  --chart-mute: #93A0A7;
  --chart-track: #E1E7EB;

  --radius-card:    14px;
  --radius-control: 9px;
  --radius-pill:    999px;
  --shadow-card:    0 1px 2px rgba(25,23,19,.05),
                    0 8px 24px -12px rgba(25,23,19,.14);

  /* ---- Spacing scale ----------------------------------------------------
     4px base. Use these, never arbitrary values, or the alignment the owner
     liked in reference 1 quietly decays.                                    */

  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  /* ---- Marks ------------------------------------------------------------
     The section mark: Hallgrimskirkja's spire and its cross, the same building the
     logo draws. It is a MASK, not a coloured picture, so it takes --accent (or any
     colour a rule paints behind it) and follows the palette by construction. Drawn
     on a 14x27 grid; article.css hangs it in the gutter beside every article h2. */
  --mark-spire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 27'%3E%3Crect x='5.6' y='3' width='2.8' height='24' rx='1.4'/%3E%3Crect x='1.6' y='4.6' width='10.8' height='2.6' rx='1.3'/%3E%3Ccircle cx='7' cy='1.6' r='1.6'/%3E%3C/svg%3E");

  --gutter:         40px;    /* horizontal page padding, desktop */
  --gutter-sm:      20px;    /* horizontal page padding, mobile  */
  --width-wide:     1180px;  /* full-width sections, card grids  */
}

@media (max-width: 700px) {
  :root {
    --size-h1:   var(--size-h1-sm);
    --size-h2:   var(--size-h2-sm);
    --size-body: var(--size-body-sm);
    --gutter:    var(--gutter-sm);
  }
}

/* Respect reduced-motion everywhere; no exceptions in the renderer. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- icon floor
   Not one <svg> on this site carries width or height attributes: all 5.040 of them
   are sized by CSS. An SVG with a viewBox and neither is 300x150 by CSS default,
   which is how a chevron came to fill a paragraph, a checkmark to dwarf its list
   item, and an arrow to make a CTA 300px wider than its own label. Three separate
   incidents, one cause.

   So this is the floor rather than three more patches. Specificity keeps it out of
   the way - every `.thing svg` rule in the stylesheets is 0,1,1 and beats this 0,0,1
   - and anything nobody remembered to size now lands at text size instead of
   catastrophic. */
svg{width:1em;height:1em;flex:none}

/* The same floor for bitmaps. An <img> with no rule renders at its intrinsic
   width - 1400px inside a 140px card column, in the case that prompted this -
   and bursts whatever contains it. Every specific rule still wins on
   specificity; this only catches what nobody remembered to size. */
img{max-width:100%}

/* The header is sticky and 66px tall, so a jump to #b6 put the top of that block
   underneath it. `scroll-margin-top` is the property for exactly this: it does not
   move the element, only where the browser stops when scrolling to it. 88px is the
   header plus enough air that the block reads as the thing you jumped to rather than
   as something wedged under a bar. */
[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.cta svg,.cta2 svg{width:1.05em;height:1.05em}
:root{
  --font-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --size-body:18.5px; --leading-body:1.65; --measure:720px;
  --paper:#FEFBF6; --paper-sunk:#F7F3EA; --card:#FFFFFF;
  --ink:#1A2737; --ink-soft:#5A6472; --ink-faint:#8A8F98;
  --rule:#E7E1D6; --rule-soft:#F0EBE1;
  /* The accent is this site's bay blue, from tools/design-tokens.css. This :root block
     came over from the reference build and its #B25309 loaded after the token file, so
     it won site-wide: every link, eyebrow and finder button rendered in the other
     site's brown. Keep these two in step with design-tokens.css. */
  --accent:#0F6C9E; --accent-ink:#0A4C70; --accent-rgb:15,108,158;
  --teal:#2C6E74; --teal-bg:#EDF4F5;
  --cta:#F2A72A; --cta-hover:#E09612; --cta-ink:#1A2737;
  --radius-card:14px; --gutter:40px; --toc-w:236px; --toc-gap:48px;
  --container:calc(var(--measure) + var(--toc-gap) + var(--toc-w));
}
*{box-sizing:border-box}
/* No horizontal give. On a Mac trackpad the page rubber-banded sideways on every
   sweep - there is nothing to scroll to (the document is exactly the viewport width at
   every breakpoint bar one stray pixel at 1180), but the browser bounces anyway and a
   two-finger sweep can also fire back/forward navigation, which is easy to trigger by
   accident while reading. `overscroll-behavior-x:none` stops both.

   `overflow-x:clip`, never `hidden`: `hidden` on the root makes body a scroll container
   and breaks `position:sticky` on the header three rules below. `clip` does not. */
html{overscroll-behavior-x:none;overflow-x:clip}
/* The header's language pill rounds 1.2px past the container at exactly 1180px wide,
   which was enough to make the whole document draggable. Clipping at the root covers
   that and any other sub-pixel offender without chasing each one. */
body{overscroll-behavior-x:none;overflow-x:clip;
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
     font-size:var(--size-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
/* NOT sticky: the site header sticks to top:0 too, and the demo chrome was
   parking on top of it, which made a working sticky header look broken. */
.demobar{background:#1A2737;color:#cdd6e2;padding:10px 20px;font-size:13px;display:flex;gap:16px;
         align-items:center;flex-wrap:wrap;justify-content:center;position:relative;z-index:99}
.demobar b{color:#fff}.demobar .grp{display:inline-flex;gap:5px;align-items:center}
.demobar button{background:#2b3b50;color:#cdd6e2;border:1px solid #3d4f68;border-radius:6px;
                padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.demobar button[aria-pressed=true]{background:var(--cta);color:var(--cta-ink);border-color:var(--cta);font-weight:700}
.note-en{background:#fff8e8;border-left:3px solid var(--cta);padding:13px 16px;margin:0;
         font-size:13.5px;line-height:1.6;color:#5c4a22}
.note-en b{color:#3d3116}
.frame{margin:0 auto;transition:max-width .2s}
.wide{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding-inline:var(--gutter)}

/* header */
/* transparent over the hero, solid once you scroll past it */
.site-header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;
             transition:background .18s,border-color .18s}
.site-header.solid{background:var(--paper);border-bottom-color:var(--rule)}
.site-header:not(.solid) .brand b,.site-header:not(.solid) .hnav span{color:#fff;
             text-shadow:0 1px 10px rgba(10,16,24,.5)}
.site-header:not(.solid) .brand svg path{fill:#fff;stroke:#fff}
.site-header:not(.solid) .pill{color:#fff;border-color:rgba(255,255,255,.4);
             background:rgba(255,255,255,.12);backdrop-filter:blur(4px)}
.bar{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);
     height:66px;display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
/* burger + drawer, so mobile keeps the navigation instead of losing it */
.burger{display:none;margin-left:auto;flex-direction:column;gap:4px;padding:9px 10px;
        border:1px solid var(--rule);border-radius:9px;background:var(--card);cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.site-header:not(.solid) .burger{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);
        backdrop-filter:blur(4px)}
.site-header:not(.solid) .burger span{background:#fff}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:none}
.brand svg{width:26px;height:26px;flex:none}.brand b{font-size:16px;letter-spacing:-.022em;white-space:nowrap}
/* Six German group labels on one line is a lot of width: "Touren und Erlebnisse"
   and "Anreise und vor Ort" alone are ~300px. They used to wrap to two lines, which
   fitted but looked broken; nowrap fixed the look and then overran the bar into the
   wordmark. So the bar is tightened AND the burger takes over earlier - the desktop
   nav is only shown at widths where it genuinely fits. */
.hnav{margin-left:auto;display:flex;gap:1px;font-size:13.5px;color:var(--ink-soft);
      flex:none}
.hnav span{padding:8px 10px;border-radius:8px;white-space:nowrap}
.hutil{display:flex;gap:6px;flex:none;margin-left:10px}
.pill{border:1px solid var(--rule);border-radius:999px;padding:5px 8px;font-size:12px;
      color:var(--ink-soft);white-space:nowrap}
@media(max-width:1150px){.hnav,.hutil{display:none}.burger{display:flex}}

/* ================= HERO =================
   Full-bleed, full first screen. A photograph being dark does not break the light
   palette - the palette governs UI surfaces, not pictures.

   The scrim is not a flat overlay. It is a bottom-weighted gradient, so the sky
   stays open and untouched while the text sits on genuinely dark ground. That is
   what lets the red CTA keep its contrast: on bare snow it would disappear. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
      margin-top:-66px;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2}
/* Between the photograph and the words: above the image and its gradient at -2,
   below .hero-in at 1. `.hero` already isolates and clips, so grains cannot
   escape the section. Never display:none - a hidden canvas measures 0x0 and
   every draw silently goes nowhere; sand.js decides instead, and it also
   honours reduced motion and the 900px breakpoint. The id is the kit's; the
   script falls as snow on this site. */
#sand{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* The darkening between the photograph and the words. The owner set the value at the
   words on the stage 2 tuner: 0.65, no more - past that the photograph stops being the
   point. The stops above it are the least that keeps the transparent header readable
   over a bright sky (0.38 at the top) and the mid-frame from going muddy. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,29,41,.38) 0%, rgba(20,29,41,.12) 26%,
    rgba(20,29,41,.26) 52%, rgba(20,29,41,.50) 78%, rgba(20,29,41,.65) 100%)}
.hero-in{position:relative;z-index:1;width:100%;
         max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;
         padding:0 var(--gutter) 78px;color:#fff}
/* The hero is bottom-aligned with a fixed 78px pad, which reads correctly on a
   laptop and badly on a tall display: the text ends up pinned to the very bottom
   under a large empty area. On a big screen only, lift the block toward the middle.
   `clamp` keeps it sane - a proportional pad alone would push the text off a very
   tall window, and a fixed one would do nothing on a 1600px-high display.
   Gated on BOTH dimensions, so a short wide laptop is untouched. */
@media (min-width:1100px) and (min-height:760px){
  .hero-in{padding-bottom:clamp(140px, 24vh, 320px)}
}
.hero-t{max-width:60ch}
/* Scoped to the hero. Unscoped, this pill - border, dark backing, blur and a heavy
   text-shadow, all designed to sit on a photograph - also landed on the finder's
   eyebrow on light paper, where it read as a smudged badge. */
.hero-in .eyebrow{display:inline-block;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
         color:#FBD98A;font-weight:700;margin:0 0 18px;
         border:1px solid rgba(251,217,138,.45);border-radius:999px;padding:6px 14px;
         backdrop-filter:blur(3px)}
.hero h1{font-size:clamp(40px,6.2vw,76px);font-weight:700;letter-spacing:-.035em;line-height:1.02;
         margin:0 0 20px;text-wrap:balance;color:#fff;
         text-shadow:0 2px 24px rgba(10,16,24,.45)}
.hero .lede{font-size:clamp(17px,1.55vw,22px);line-height:1.5;color:#E7EBF1;margin:0 0 30px;
            max-width:52ch;text-shadow:0 1px 12px rgba(10,16,24,.5)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--cta);
     color:var(--cta-ink);border:0;border-radius:12px;padding:17px 30px;font:inherit;font-size:17.5px;
     font-weight:700;text-decoration:none;white-space:nowrap;transition:background .12s,transform .12s;
     box-shadow:0 8px 26px -8px rgba(242,167,42,.6)}
.cta:hover{background:var(--cta-hover);transform:translateY(-1px)}
.cta2{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);
      color:#fff;border:1.5px solid rgba(255,255,255,.45);border-radius:12px;padding:16px 28px;
      font:inherit;font-size:17.5px;font-weight:700;text-decoration:none;white-space:nowrap;
      backdrop-filter:blur(6px)}
.cta2:hover{background:rgba(255,255,255,.2);border-color:#fff}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:14.5px;color:#B9C3D0;margin:26px 0 0}
.hero-meta i{font-style:normal;color:rgba(255,255,255,.3)}
/* The byline in the hero: same line as the homepage's independence claim, but it is
   the article's own evidence. White on a photograph, so it drops the article version's
   rule and ink colours. */
.byline.hero-meta{color:#C7CFDA;border-bottom:0;padding-bottom:0;margin:24px 0 0;
  font-size:14.5px;text-shadow:0 1px 8px rgba(10,16,24,.5)}
.byline.hero-meta svg{opacity:.9}
.byline.hero-meta i{color:rgba(255,255,255,.32)}
.byline.hero-meta .src2{color:#8FD3DC}
.hero-cred{position:absolute;right:var(--gutter);bottom:14px;z-index:1;
           font-size:11.5px;color:rgba(255,255,255,.5)}
.scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:1;
        color:rgba(255,255,255,.65);animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion:reduce){.scroll{animation:none}}

/* key figures */
/* The figure strip as a dark band. It was a sunk grey band separated by gaps alone, and
   with four labels of very unequal length the gaps stopped reading as separators - the
   four facts ran together as one paragraph. Harbour navy with a hairline between each
   column fixes both: the band now divides hero from article without a rule of its own,
   and it is the strongest the page goes without introducing a new colour.

   Behind each column sits its glyph, large and faint, in the bay blue rather than white:
   at low alpha a white line drawing on navy reads as grey haze, while a tinted one keeps
   a hue and stays inside the palette. It is decoration and carries aria-hidden. */
.glance{background:var(--ink);color:#fff}
.glance-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:34px var(--gutter);
           display:grid;grid-template-columns:repeat(4,1fr)}
.glance-in>div{padding-inline:26px;border-left:1px solid rgba(255,255,255,.16);
           position:relative;overflow:hidden}
.glance-in>div:first-child{padding-inline-start:0;border-left:0}
.glance .gl-ic{position:absolute;right:14px;top:-6px;color:rgba(127,196,236,.22);pointer-events:none}
.glance-in>div:last-child .gl-ic{right:0}
.glance .gl-ic svg{width:74px;height:74px}
.glance b{display:block;position:relative;font-size:32px;font-weight:700;letter-spacing:-.028em;
          font-variant-numeric:tabular-nums;line-height:1.02;color:#fff}
.glance span{display:block;position:relative;font-size:14px;color:rgba(255,255,255,.72);
          margin-top:7px;line-height:1.4}

/* section cards */
.secs{padding:56px 0 20px}
.secs-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.secs-head{grid-column:1/-1;margin-bottom:6px}
.secs h2{font-size:30px;letter-spacing:-.025em;margin:0 0 8px;font-weight:700}
.secs-head p{font-size:17px;color:var(--ink-soft);margin:0;max-width:62ch}
.secs-in{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sec{display:grid;grid-template-columns:150px 1fr;gap:0;background:var(--card);
     border:1px solid var(--rule);border-radius:var(--radius-card);overflow:hidden;
     text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}
.sec:hover{border-color:var(--ink-faint);box-shadow:0 10px 26px -14px rgba(26,39,55,.3);transform:translateY(-2px)}
.sec-img img{width:100%;height:100%;object-fit:cover;display:block}
/* A section with no usable photograph must not keep the 150px image column,
   or its text renders in a narrow strip beside an empty gap. */
.sec.noimg{grid-template-columns:1fr}
.sec-b{padding:16px 18px}
.sec-h{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.sec-h h3{font-size:19px;margin:0;letter-spacing:-.018em}
.cnt{font-size:11.5px;color:var(--ink-faint);background:var(--paper-sunk);border-radius:999px;padding:2px 8px}
.sec-b p{font-size:15.5px;color:var(--ink-soft);margin:0 0 10px;line-height:1.45}
.sec-b ul{list-style:none;margin:0 0 11px;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.sec-b li{font-size:13px;color:var(--ink-soft);background:var(--paper-sunk);
          border:1px solid var(--rule);border-radius:6px;padding:2px 8px}
.more{font-size:14.5px;font-weight:700;color:var(--accent)}

/* one featured product */
.pick{padding:44px 0}
.pick-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.pick h2{font-size:26px;letter-spacing:-.022em;margin:0 0 6px}
.pick .sub{font-size:16.5px;color:var(--ink-soft);margin:0 0 20px;max-width:70ch}
.pcard{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
       display:grid;grid-template-columns:210px 1fr 250px;gap:22px;padding:18px;align-items:center}
.pcard-i img{width:100%;height:auto;border-radius:10px;display:block;aspect-ratio:1/1;object-fit:cover}
.partner{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-faint)}
.pcard-b h3{font-size:20px;margin:6px 0 7px;letter-spacing:-.018em;line-height:1.3}
.pcard-b p{font-size:16px;color:var(--ink-soft);margin:0 0 12px;line-height:1.5}
.trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.trust li{display:flex;gap:7px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);line-height:1.35}
.trust svg{width:15px;height:15px;flex:none;color:var(--teal);margin-top:2px}
.pcard-f{border-left:1px solid var(--rule-soft);padding-left:22px}
/* Scoped to the pick card. Unscoped, this reached every offer block in every
   article and added a 12px bottom margin and a 14.5px size those cards never asked
   for - article.css only overrides `white-space`, so the rest simply applied. */
.pcard-f .price{font-size:14.5px;color:var(--ink-soft);line-height:1.2;margin-bottom:12px}
.pcard-f .price b{display:block;font-size:28px;color:var(--ink);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pcard-f .cta{width:100%}

/* source logos */
.trustrow{background:var(--paper-sunk);border-top:1px solid var(--rule);padding:38px 0 46px}
.trustrow-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.trustrow h2{font-size:22px;letter-spacing:-.02em;margin:0 0 6px}
.trustrow p{font-size:16px;color:var(--ink-soft);margin:0 0 18px;max-width:70ch}
.logos{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.logos img{width:34px;height:34px;border-radius:7px;background:#fff;padding:4px;object-fit:contain;
           box-shadow:0 0 0 1px rgba(26,39,55,.08);filter:grayscale(1);opacity:.6;
           transition:filter .12s,opacity .12s}
.logos img:hover{filter:none;opacity:1}
.trustrow .small{font-size:14px;color:var(--ink-faint);margin:0}
.trustrow a{color:var(--accent)}
/* ===================== article on the homepage ===================== */
.article{padding:56px 0 20px;border-top:1px solid var(--rule)}
.art-in{max-width:calc(var(--measure) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.kicker{font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
        font-weight:700;margin:0 0 12px}
.art-h{font-size:var(--size-h1);font-weight:700;letter-spacing:-.028em;line-height:1.15;margin:0 0 .5em;text-wrap:balance}
/* At the FOOT of the article now, so the rule sits above it rather than below. */
.byline{display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;font-size:15.5px;
        color:var(--ink-faint);padding-top:22px;border-top:1px solid var(--rule);margin:34px 0 0}
.byline svg{width:14px;height:14px;flex:none;opacity:.85;margin-right:-4px}
.byline i{font-style:normal;color:var(--rule)}
.byline .src2{color:var(--teal);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.art-in p{margin:0 0 1.1em;font-size:var(--size-body);line-height:var(--leading-body)}
/* :not(.cta) matters: without it this rule painted every button's label orange
   and underlined it, because a CTA is an <a> inside the article too. */
.art-in a:not(.cta):not(.cta2){color:var(--accent);text-decoration:underline;text-underline-offset:2.5px}
.ph{color:var(--ink-faint);border-bottom:1px dotted var(--ink-faint);cursor:help}

.blk{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
     padding:22px 24px;margin:1.7em 0}
.blk>h3{font-size:var(--size-h3);font-weight:700;letter-spacing:-.015em;margin:0 0 4px;line-height:1.25}
.blk .intro{font-size:16px;color:var(--ink-soft);margin:0 0 16px}
.blk .foot{font-size:14.5px;color:var(--ink-soft);margin:16px 0 0;padding-top:13px;
           border-top:1px solid var(--rule-soft);line-height:1.5}
.facts{margin:0;display:grid}
.frow{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.frow:first-child{padding-top:0}.frow:last-child{border-bottom:0}
.frow dt{color:var(--ink-soft);font-size:16.5px;max-width:46%}
.frow dd{margin:0;text-align:right;font-weight:700;font-size:16.5px}
.aag{background:var(--paper-sunk);border:0;border-left:3px solid var(--teal);border-radius:0 14px 14px 0}

.tw{overflow-x:auto;margin:0 -24px;padding:0 24px}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
th{text-align:left;font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
   color:var(--ink-faint);padding:0 14px 9px 0;border-bottom:1px solid var(--rule)}
td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-soft);vertical-align:top}
td:first-child{color:var(--ink);font-weight:700}
tr:last-child td{border-bottom:0}
.stack{display:none}
.srow{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.srow:last-child{border-bottom:0}
.srow b{display:block;font-size:16.5px;margin-bottom:7px}
.srow dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:15px}
.srow dt{color:var(--ink-faint);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding-top:3px}
.srow dd{margin:0;color:var(--ink-soft);line-height:1.45}

.myth{display:grid;margin:0;padding:0}
.myth>li{list-style:none;padding:16px 0;border-bottom:1px solid var(--rule-soft);
         display:grid;grid-template-columns:auto 1fr;gap:14px}
.myth>li:first-child{padding-top:0}.myth>li:last-child{border-bottom:0;padding-bottom:0}
.vd{display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:999px;
    padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    white-space:nowrap;align-self:start;width:108px}
.vd svg{width:14px;height:14px}
.vd.stimmt{background:var(--teal-bg);color:var(--teal)}
.vd.teilweise{background:transparent;color:var(--ink-soft);border:1.5px solid var(--rule)}
.vd.falsch{background:var(--ink);color:#fff}
.myth .claim{font-weight:700;margin:0 0 5px!important;line-height:1.4}
.myth .exp{margin:0!important;color:var(--ink-soft);font-size:16.5px;line-height:1.5}

/* Figures break out of the prose measure to the same width as the comparison block,
   so photographs, pairs and galleries all line up on one edge instead of each finding
   their own. Same mechanism: `.art-in` is page-centred, so 50% of it is the page
   centre, and a -50% translate re-centres the wider element without 100vw and the
   scrollbar overflow that comes with it. Captions stay at the measure - they are
   prose and a 1180px line is unreadable. */
.fig{margin:1.9em 0}
@media(min-width:1280px){
  .fig{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
  .fig figcaption,.fig .galtitle{max-width:var(--measure);margin-left:auto;margin-right:auto}
}
.fig img{width:100%;height:auto;display:block;border-radius:var(--radius-card)}
.fig figcaption{font-size:16px;color:var(--ink-soft);margin-top:10px;line-height:1.5}

/* Caption as a panel on the picture, bottom right.

   `.fig > .pic` is a direct child only on a single-image block: an image-pair nests
   its pictures in `.pair` and a gallery in `.gal > div`, and both of those caption
   each tile separately. So this selector reaches the 254 single images and nothing
   else, without needing a new class in the markup.

   The panel carries its own contrast rather than trusting the photograph underneath.
   A caption over the King's Chamber and one over a noon sky cannot both rely on a
   text shadow, and these captions carry real information - "Woran man die amtliche
   Seite erkennt: ..." is the point of its picture, not a label for it. Backdrop blur
   is an enhancement; the 74% ground alone already clears contrast on any image.

   The credit moves to the left on these figures, because it used to sit exactly
   where the panel now is. */
.fig{position:relative}
.fig > .pic + figcaption{
  position:absolute;right:14px;bottom:14px;left:auto;margin:0;
  max-width:min(46ch,calc(100% - 28px));
  padding:11px 14px;border-radius:10px;
  background:rgba(14,19,26,.74);
  -webkit-backdrop-filter:blur(7px) saturate(1.15);
  backdrop-filter:blur(7px) saturate(1.15);
  color:#F4F6F8;font-size:14.5px;line-height:1.45;text-wrap:pretty;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.55)}
.fig > .pic .credit{left:10px;right:auto}

.stand{margin:2.4em 0 0;padding:16px 20px;background:var(--paper-sunk);border:1px solid var(--rule);
       border-radius:var(--radius-card);display:flex;gap:13px;align-items:flex-start}
.stand svg{width:19px;height:19px;flex:none;color:var(--teal);margin-top:2px}
.stand div{font-size:16px;line-height:1.5;color:var(--ink-soft)}
.stand b{color:var(--ink);display:block;margin-bottom:2px}

.offer{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
       padding:18px;margin:1.9em 0;display:grid;grid-template-columns:140px 1fr;gap:20px}
.offer.noimg{grid-template-columns:1fr}
/* Shape only, through the component's own variable. This used to restate width,
   height, object-fit and aspect-ratio, which merely duplicated carousel.css, and
   a border-radius that carousel.css does NOT override - so every slide was
   rounded inside an already-rounded frame. */
.offer .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.offer h3{font-size:19.5px;margin:6px 0 0;letter-spacing:-.018em;line-height:1.3}
.rate{display:inline-flex;align-items:center;gap:6px;font-size:15px;white-space:nowrap}
.rate b{color:#B4740A;font-weight:700}
/* was `.rate s` - the strikethrough element, chosen by accident and then hidden
   with text-decoration:none. `i` carries no such meaning and needs no undoing. */
.rate i{color:var(--ink-faint);font-style:normal;font-size:14px}
.bene{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:8px}
.bene li{display:flex;gap:9px;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.bene svg{width:16px;height:16px;flex:none;color:var(--teal);margin-top:3px}
/* `1fr auto` gave the button its max-content width, and `.cta` is white-space:nowrap,
   so a long German label - 201 of the 311 on this site run past 34 characters - took
   the whole row and squeezed the price hint into one word per line.
   `fit-content(58%)` caps the button's share so it wraps to two lines instead of
   starving the text beside it, and the label is allowed to wrap at all. */
.buy{display:grid;grid-template-columns:minmax(0,1fr) fit-content(58%);align-items:center;
     gap:16px;margin-top:16px;padding-top:15px;border-top:1px solid var(--rule-soft)}
.buy .cta{white-space:normal;text-align:center;line-height:1.25}
/* The amount and its symbol are one token. Without nowrap a narrow column breaks
   "114 €" across two lines, which reads as a different number. */
.price{white-space:nowrap}
.price b{white-space:nowrap;display:block}
.price.sm{font-size:15px;white-space:normal}
/* The live price line: „ab" and any unit small and grey, the amount carries the weight.
   Owner-approved treatment, 2026-09-02 („plain, but ab smaller and gray"). */
.price.sm .ab{font-size:.78em;color:var(--ink-faint);font-weight:400}
.price.sm b{display:inline;color:var(--accent);font-size:1.16em;font-weight:800;
 letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cta.sm{padding:11px 18px;font-size:15.5px;border-radius:10px;box-shadow:none;white-space:nowrap}

.compact{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-card);
         padding:14px;margin:1.8em 0;display:grid;
         grid-template-columns:82px minmax(0,1fr) fit-content(46%);gap:16px;align-items:center}
.compact img{width:82px;height:82px;object-fit:cover;border-radius:9px;display:block}
/* The picture column carries its rating underneath; the button column carries the
   one feature that decides a click. Both stack in place rather than adding rows, so
   the three columns keep a single shared centre line. */
.compact > .cmedia,.compact > .side{display:flex;flex-direction:column;align-items:center;gap:8px}
.compact > .side{justify-content:center}
.compact .cfeat{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.25;color:var(--ink-soft);white-space:nowrap}
.compact .cfeat svg{width:14px;height:14px;flex:none}
.compact .cfeat.ok svg{color:#1E8E5A}
.compact .cfeat.am svg{color:#E8A317}
.compact .cfeat.nu svg{color:var(--accent)}
/* Only GetYourGuide products come with photography. The other partners get the
   same card without the thumbnail column, not an empty 82px gutter. */
.compact.noimg{grid-template-columns:minmax(0,1fr) fit-content(46%)}
.compact h4{font-size:17px;margin:4px 0 3px;letter-spacing:-.015em;line-height:1.3}
.compact p{font-size:15.5px!important;color:var(--ink-soft);margin:0!important;line-height:1.45}
.compact .side{display:flex;align-items:center;gap:13px;min-width:0}
.compact .side .cta{white-space:normal;text-align:center;line-height:1.25}
.compact > .cmedia{align-items:flex-start}
.compact .crate{font-size:13px}

.cmp{margin:1.9em 0}
.cmp>p{font-size:16.5px;color:var(--ink-soft)}
/* The comparison block breaks out of the prose measure.

   13 of the 18 of these carry three options and the grid was hard-coded to two
   columns, so they rendered 2 + 1 with an orphan on its own row - the worst possible
   shape for the block whose whole job is putting choices side by side. 660px of
   measure cannot hold three cards, so the block leaves the measure instead.

   `.art-in` is centred on the page, so 50% of it IS the page centre: margin-left:50%
   with a -50% translate re-centres the wider block without needing 100vw, which would
   have added a scrollbar's width of horizontal overflow on any platform that still
   draws a classic one. The intro paragraph keeps the measure - it is prose. */
.cmp .grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){
  /* two options fit inside the measure; three do not */
  .cmp .grid:not(:has(>:nth-child(3))){grid-template-columns:1fr 1fr}
}
@media(min-width:1280px){
  .cmp{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
  .cmp>p{max-width:var(--measure);margin-inline:auto}
  .cmp .grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
.opt{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
     overflow:hidden;display:flex;flex-direction:column}
.opt.best{border-color:var(--cta);box-shadow:0 0 0 3px rgba(242,167,42,.16)}
.optwrap{position:relative}
.opt img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
/* The recommended option keeps the solid amber badge. The others get a quiet
   dark one: still a distinct claim, but it does not compete with the pick. */
.badge{display:inline-flex;align-items:center;gap:5px}
.badge svg{width:13px;height:13px;flex:none}
.badge.alt{background:rgba(16,22,30,.78);color:#fff;backdrop-filter:blur(4px)}
/* The flame keeps its own colour on the amber badge, where currentColor would
   make it disappear into the background. */
.badge:not(.alt) svg{color:#D2500F}
.badge{position:absolute;top:10px;left:10px;background:var(--cta);color:var(--cta-ink);font-size:11px;
       font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
/* Same badge on a card with no image to sit on: it flows instead of floating. */
.optbadge{padding:15px 17px 0}
.optbadge .badge{position:static;display:inline-block}
.opt .in{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
.opt h4{font-size:17.5px;margin:0 0 10px;letter-spacing:-.015em;line-height:1.3}
.opt dl{margin:0 0 14px;display:grid;gap:7px;font-size:15px}
.opt dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.opt dd{margin:0;color:var(--ink-soft);line-height:1.42}
/* Grid, not wrapping flex. `justify-content:space-between` with flex-wrap:wrap put
   the button on its own line the moment the price hint got long - "deutlich darüber,
   dafür ohne zweiten Anfahrtstag" wrapped and the CTA dropped below it, left-aligned,
   while the shorter cards beside it kept theirs on the right. Two columns: the hint
   takes what is left and wraps inside its own cell, the button is always the right
   column. */
.opt .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-soft);
           display:grid;grid-template-columns:minmax(0,1fr) fit-content(56%);
           align-items:center;gap:12px}

/* ---------------------------------------------------------------- FAQ
   The `faq` renderer has emitted <details>/<summary> with an inline chevron since
   chapter 2 and NOTHING styled it. An <svg> with a viewBox and no width or height
   has no intrinsic size, so it filled the paragraph box - a chevron several hundred
   pixels tall under every question - and <summary> still showed the browser's own
   disclosure triangle beside our own. 904 question pairs across the site. */
.faq{margin:2.6em 0 0}
.faq h2{font-size:var(--size-h2);letter-spacing:-.022em;margin:0 0 14px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:15px 2px;cursor:pointer;font-weight:700;font-size:17px;line-height:1.4;
  list-style:none;color:var(--ink)}
/* Two rules, NOT one comma group. A selector list is discarded whole if any part of
   it is unknown to the browser, so grouping these would have dropped ::marker in
   every engine that does not know ::-webkit-details-marker. Both are needed:
   ::marker for Firefox and Chrome, the -webkit- pseudo for Safari, which still
   ignores list-style on a summary. */
.faq summary::marker{display:none;content:""}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary span{flex:1}
.faq .chev{width:19px;height:19px;flex:none;margin-top:3px;color:var(--ink-faint);
  transition:transform .18s ease}
.faq details[open] .chev{transform:rotate(180deg)}
.faq .a{margin:0 0 17px;padding-right:36px;font-size:16.5px;line-height:1.6;
  color:var(--ink-soft)}

/* ============================================================================
   BLOCKS THAT SHIPPED WITH NO CSS AT ALL

   48 classes emitted by render.py matched no rule in any stylesheet. The FAQ was
   the first one anybody noticed; the checklist on /ganzer-tag-route/ was the
   second. The failure is always the same and always ugly: an inline <svg> carries
   a viewBox and no width or height, which gives it no intrinsic size, so it
   expands to fill whatever box it lands in - a checkmark several hundred pixels
   tall next to one line of text.

   Every icon below is therefore given an explicit size. That is the rule to keep.
   ============================================================================ */

/* tip-box. Renamed from `.tip`, which belongs to the hotspot tooltip and is
   display:none until its script runs - so every tip-box was invisible. */
.tipbox{display:flex;gap:13px;align-items:flex-start;margin:1.8em 0;padding:16px 18px;
  border-radius:var(--radius-card);border:1px solid var(--rule)}
.tipbox>svg{width:20px;height:20px;flex:none;margin-top:2px}
.tipbox h4{font-size:16px;margin:0 0 3px;letter-spacing:-.01em}
.tipbox p{margin:0!important;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.tipbox.tipp{background:var(--teal-bg);border-color:transparent}
.tipbox.tipp>svg{color:var(--teal)}
.tipbox.achtung{background:#FDF4EC;border-color:#F0DCC6}
.tipbox.achtung>svg{color:#B25309}
.tipbox.gut-zu-wissen{background:var(--paper-sunk)}
.tipbox.gut-zu-wissen>svg{color:var(--ink-faint)}

/* checklist */
.chk{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.chk li{display:flex;gap:10px;font-size:16.5px;line-height:1.5;color:var(--ink-soft)}
.chk svg{width:16px;height:16px;flex:none;color:var(--teal);margin-top:4px}

/* step-list */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:15px}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.steps li::before{content:counter(s);width:25px;height:25px;border-radius:50%;flex:none;
  background:var(--teal-bg);color:var(--teal);font-size:13px;font-weight:700;
  display:grid;place-items:center}
.steps b{display:block;font-size:16.5px;margin-bottom:2px}
.steps p{margin:0!important;font-size:16px;line-height:1.5;color:var(--ink-soft)}

/* pros-cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pc h4{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 10px}
.pc .yes h4{color:var(--teal)}
.pc .no h4{color:var(--ink-faint)}
.pc svg{width:15px;height:15px;flex:none}
.pc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pc li{position:relative;padding-left:15px;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.pc li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--rule)}

/* comparison-cards */
/* Same breakout as the offer comparison. 19 of the 23 of these carry three cards,
   and 720px of prose measure fits two - so they rendered 2 + 1 with an orphan, which
   is the wrong shape for a block whose whole job is showing options side by side.
   `.art-in` is page-centred, so 50% of it is the page centre and a -50% translate
   re-centres the wider block without 100vw. The heading keeps the measure. */
.ccwrap{margin:1.9em 0}
@media(min-width:1280px){
  .ccwrap{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
  .ccwrap>h3{max-width:var(--measure);margin-left:auto;margin-right:auto}
}
.ccwrap>h3{font-size:var(--size-h3);font-weight:700;letter-spacing:-.015em;margin:0 0 14px}
.cc{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.cc>div{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);
  padding:17px 18px}
.cc h4{font-size:17.5px;margin:0 0 6px;letter-spacing:-.015em;line-height:1.3}
.cc .sum{font-size:15.5px;color:var(--ink-soft);margin:0 0 14px!important;line-height:1.45}
.cc dl{margin:0;display:grid;gap:11px}
.cc dt{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;margin-bottom:3px}
.cc .yes dt{color:var(--teal)}
.cc .no dt{color:var(--ink-faint)}
.cc svg{width:14px;height:14px;flex:none}
.cc dd{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink-soft)}

/* hypothesis-cards */
.hypwrap{margin:1.9em 0}
.hypwrap>h3{font-size:var(--size-h3);font-weight:700;letter-spacing:-.015em;margin:0 0 14px}
.hyp{display:grid;gap:16px}
.hyp>div{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);padding:18px}
.hyp h4{font-size:17.5px;margin:0 0 7px;letter-spacing:-.015em;line-height:1.3}
.hyp .idea{font-size:16px;color:var(--ink-soft);margin:0 0 14px!important;line-height:1.5}
.fa{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:14px;
  border-top:1px solid var(--rule-soft)}
.fa h5{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 6px}
.fa .pro h5{color:var(--teal)}
.fa .con h5{color:var(--ink-faint)}
.fa svg{width:14px;height:14px;flex:none}
.fa p{margin:0!important;font-size:15.5px;line-height:1.45;color:var(--ink-soft)}

/* timeline */
.tl{list-style:none;margin:0;padding:0 0 0 19px;display:grid;gap:16px;
  border-left:2px solid var(--rule)}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;left:-25px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px var(--paper)}
.tl b{display:block;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);margin-bottom:3px}
.tl p{margin:0!important;font-size:16px;line-height:1.5;color:var(--ink-soft)}

/* map-static and infographic share a shape: a graphic beside its legend */
.map,.info{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;margin:1.9em 0;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);padding:18px}
.map h4,.info h4{font-size:17.5px;margin:0 0 10px;letter-spacing:-.015em}
.mapimg{min-width:0}   /* grid child: without this a wide graphic refuses to shrink */
.maplg ol{margin:0;padding-left:19px;display:grid;gap:8px}
.maplg li{font-size:15.5px;color:var(--ink-soft);line-height:1.4}
.maplg b{color:var(--ink);display:block}
.maplg span{display:block}
.infolg ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.infolg li{font-size:13.5px;color:var(--ink-soft);background:var(--paper-sunk);
  border-radius:999px;padding:4px 11px}
.map.noimg{grid-template-columns:1fr}

/* quote-source */
.quote{margin:2em 0;padding:2px 0 2px 20px;border-left:3px solid var(--teal)}
.quote blockquote{margin:0;font-size:19px;line-height:1.5;letter-spacing:-.012em}
.quote cite{display:block;margin-top:11px;font-style:normal;font-size:15px;color:var(--ink-soft)}
.quote .note{margin:8px 0 0!important;font-size:14.5px;color:var(--ink-faint);line-height:1.5}

/* image-pair and gallery */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair img{border-radius:var(--radius-card)}
.galtitle{font-size:13px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);margin:0 0 12px!important}
/* 280 not 220: at the figure's new 1180px the smaller floor produced five thin
   columns out of a six-image gallery. */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.gal img{border-radius:var(--radius-card)}
.gal figcaption{font-size:14.5px;color:var(--ink-soft);margin-top:7px;line-height:1.45}

/* chart: bars, and the one chart that renders as a table */
/* The chart owns `c`-prefixed names because two of the obvious ones were already
   taken by other components, and both collisions landed on this one block:

     .bar   home.css - the site header bar. Every chart row inherited max-width
            1084px, margin:0 auto, 40px of padding and height:66px, so the rows were
            centred, fixed-height and far narrower than the block.
     .val   hotspot.css - a value label pinned onto a graphic, `position:absolute`.
            Every chart number was taken out of flow and dropped on top of its own
            label, which is the floating chip in the middle of the wreckage.

   Neither was overridden, because both stylesheets declare properties this one never
   mentions - a later rule only wins the properties it actually sets. */
.bars{display:grid;gap:9px;margin:4px 0 2px}
.cbar{display:grid;grid-template-columns:minmax(78px,auto) 1fr auto;gap:11px;align-items:center}
.cbar .clab{font-size:14.5px;color:var(--ink-soft)}
.cbar .ctrack{height:9px;border-radius:999px;background:var(--paper-sunk);overflow:hidden}
.cbar .cfill{display:block;height:100%;border-radius:999px;background:var(--teal)}
.cbar .cval{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ctab{min-width:0}
.take{margin:15px 0 0!important;font-size:15.5px;line-height:1.5;color:var(--ink)}

/* size-comparison: columns whose height carries the meaning */
.sizes{display:flex;align-items:flex-end;gap:12px;min-height:210px;margin:6px 0 2px}
.sz{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:210px;text-align:center}
.sz .m{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:5px}
.sz .col{display:block;width:100%;max-width:62px;border-radius:5px 5px 0 0;
  background:var(--rule);min-height:3px}
.sz.subj .col{background:var(--teal)}
.sz.subj .m{color:var(--teal)}
.sz .n{font-size:12.5px;color:var(--ink-soft);margin-top:7px;line-height:1.3}

/* calculator */
.calc{display:grid;gap:13px}
.calc>div{display:grid;gap:5px}
.calc label{font-size:13px;font-weight:700;color:var(--ink-soft)}
.calc input,.calc select{font:inherit;font-size:16px;padding:10px 12px;
  border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--paper);color:var(--ink)}
.calc .out{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:4px;padding-top:14px;border-top:1px solid var(--rule-soft)}
.calc .out .lab{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint)}
.calc .out .big{font-size:27px;font-weight:700;letter-spacing:-.02em}

/* quiz */
.qz{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.qz .q{display:flex;gap:10px;align-items:baseline;font-weight:700;font-size:16.5px;
  margin:0 0 10px!important;line-height:1.4}
.qz .q i{font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums}
.opts{display:grid;gap:7px}
.opts button{display:flex;align-items:center;gap:9px;text-align:left;font:inherit;font-size:16px;
  padding:11px 13px;border:1px solid var(--rule);border-radius:var(--radius-control);
  background:var(--card);color:var(--ink);cursor:pointer}
.opts button:hover{border-color:var(--ink-faint)}
.opts .mk{display:inline-flex;width:17px;height:17px;flex:none;opacity:0;color:var(--teal)}
.opts .mk svg{width:17px;height:17px}
.opts button[data-right] .mk{opacity:1}
.qz .exp{margin:10px 0 0!important;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}

/* benefit-box */
.benefit{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-card);
  padding:18px;margin:1.9em 0}
.benefit h4{font-size:18px;margin:5px 0 11px;letter-spacing:-.015em;line-height:1.3}
.benefit ul{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:7px}
.benefit li{position:relative;padding-left:15px;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.benefit li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--teal)}

/* ---- offer-comparison: facets to scan, not a paragraph to read ---- */
.opt .ometa,.opt .ofit{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px!important;
  font-size:15px;line-height:1.4;color:var(--ink-soft)}
.opt .ometa svg,.opt .ofit svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ink-faint)}
.opt .ometa{font-weight:700;color:var(--ink)}
/* No margin-top:auto here - `.opt .foot` already claims the free space to stay
   pinned at the card's bottom, and two auto margins split it between them. */
.opt .ofit{padding-top:2px}
.facets{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.facets li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.38}
.facets svg{width:15px;height:15px;flex:none;margin-top:3px}
/* Three states, three weights: what you get reads strongest, what costs extra sits
   between, what you do not get recedes without being hidden. */
.f-included{color:var(--ink)}
.f-included svg{color:var(--teal)}
.f-add_on{color:var(--ink-soft)}
.f-add_on svg{color:var(--cta-hover,#B25309)}
.f-excluded{color:var(--ink-faint)}
.f-excluded svg{color:var(--rule)}
/* A named property's own amenities: each line has its own icon, so the eye can
   tell a pool from a rooftop restaurant without reading. */
.f-feature{color:var(--ink)}
.f-feature svg{color:var(--teal)}
.oinc{font-size:15px;line-height:1.45;color:var(--ink-soft);margin:0 0 14px!important}

/* Partner map. Breaks out like the other comparison blocks - a map squeezed into
   the prose measure is a map you cannot read. */
.embed{margin:1.9em 0;border-radius:var(--radius-card);overflow:hidden;
  border:1px solid var(--rule);background:var(--paper-sunk)}
.embed iframe{display:block;width:100%}
@media(min-width:1280px){
  .embed{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
}

/* Article subheadings.
   The prose blocks were always the sections; these finally name them. One step above the
   h3 that block titles use, so the article's own sections outrank the boxes sitting inside
   them - the hierarchy a screen reader and Google both walk.

   The mark is the church spire and its cross, hung in the margin (owner's pick, 2026-09-07,
   from six on the stage 2 tuner page). Three things make it behave rather than merely look
   right:

   1. It hangs OUTSIDE the text column, in the gutter `.art-in` already reserves, so nothing
      interrupts the line the words start on and a heading that wraps to three lines is not
      pushed around by it. 30px left of the text edge inside a 40px gutter.
   2. It is drawn as a mask over `background:var(--accent)`, not as a coloured SVG, so it
      follows the palette. One token changes it everywhere.
   3. On a phone there is no gutter to hang in - 20px, and the mark would collide with the
      screen edge - so it stops being absolute and sits above the heading instead, which is
      the same mark doing the same job in the space that exists. */
.art-in h2.ah{
  font-size:var(--size-h2);font-weight:var(--weight-head);letter-spacing:-.022em;
  line-height:1.22;color:var(--ink);margin:2.15em 0 .5em;padding:0;border:0;
  background:none;text-wrap:balance;position:relative}
.art-in h2.ah::before{
  content:"";position:absolute;left:-30px;top:.2em;width:14px;height:27px;
  background:var(--accent);
  -webkit-mask:var(--mark-spire) center/14px 27px no-repeat;
  mask:var(--mark-spire) center/14px 27px no-repeat}
.art-in h2.ah:first-child{margin-top:1.1em}

/* ------------------------------------------------------------------ Tourverzeichnis
   Zwei Bloecke: `tour-list` (Angebote einer Kategorie oder eines Ortes) und
   `place-facts` (die belegten Kennzahlen eines Ortes). Die Faktentabelle borgt sich
   .tw/.stack/.srow von `table` und braucht deshalb nur zwei eigene Regeln; die
   Tourliste ist eine Zeile statt einer Karte, weil vierzig Angebote nebeneinander
   nicht vergleichbar sind und untereinander schon. */
.trl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.trl-i{display:grid;grid-template-columns:152px 1fr auto;gap:16px;align-items:start;
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:12px}
.trl-pic{display:block;border-radius:10px;overflow:hidden;line-height:0}
.trl-pic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.trl-b{min-width:0}
.trl-b h4{font-size:17px;margin:0 0 6px;letter-spacing:-.015em;line-height:1.32}
/* Der Kartentitel ist ein Link und darf trotzdem nicht wie einer aussehen: acht
   unterstrichene Zeilen in Rost wuerden die Liste in ein Linkverzeichnis verwandeln
   und mit dem Knopf um dieselbe Aufmerksamkeit streiten. Die Ausnahmen im Selektor
   spiegeln die Artikelregel, weil sie sonst spezifischer bleibt als diese hier. */
.art-in .trl-b h4 a:not(.cta):not(.cta2){color:var(--ink);text-decoration:none}
.art-in .trl-b h4 a:not(.cta):not(.cta2):hover{text-decoration:underline;
  text-underline-offset:2.5px;text-decoration-color:var(--rule)}
.trl-m{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 6px;font-size:14.5px;
  color:var(--ink-faint)}
.trl-m span+span::before{content:"·";margin-right:14px;color:var(--rule)}
.trl-r{margin:0 0 9px;display:flex;align-items:baseline;gap:7px;font-size:15px}
/* Die Note traegt einen Stern als Zeichen, nicht als Bild: eine Reihe von fuenf
   Sternen behauptet eine Genauigkeit, die eine Kommazahl schon hat. */
.trl-r b{color:var(--ink);font-weight:800}
.trl-r b::before{content:"\2605";color:var(--cta);margin-right:5px;font-weight:400}
.trl-r em{font-style:normal;color:var(--ink-faint);font-size:14px}
/* Unter der Qualitaetsschwelle des Projekts: nicht versteckt, aber auch nicht
   hervorgehoben. Die Zahl steht da, damit der Leser sie einordnen kann. */
.trl-r.thin b,.trl-r.thin em{color:var(--ink-faint);font-weight:600}
.trl-r.thin b::before{color:var(--rule)}
.trl-f{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;
  font-size:14px;color:var(--ink-soft)}
.trl-f li{display:flex;align-items:center;gap:5px}
.trl-f svg{width:13px;height:13px;flex:none;color:var(--teal)}
.trl-p{display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding-left:4px}
.trl-p .price.sm{text-align:right}
.tlist .foot{line-height:1.5}

/* Die Anmerkung einer Faktenzeile steht unter dem Wert, nicht daneben: sie erklaert
   ihn haeufig ("400 bis 1.500 EGP kursieren") und gehoert damit in dieselbe Zelle. */
.pfn{display:block;font-size:14px;color:var(--ink-faint);line-height:1.45;margin-top:3px}
.pf .pfq{font-size:14.5px;white-space:normal}
.pf td:first-child{white-space:normal}

/* Der Reiseverlauf als Leiste. Die Linie liegt hinter den Punkten und endet am
   letzten Punkt, nicht am Rand des Kastens: sonst zeigt der Tag ins Nichts weiter.
   Start und Rueckkehr sind gefuellte Punkte, die Halte dazwischen offene - die
   Unterscheidung traegt Bedeutung und ist nicht nur Zierde. */
.stpl{list-style:none;margin:0;padding:0;position:relative}
.stpl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;
  background:var(--rule);border-radius:2px}
.stp{position:relative;padding:0 0 22px 34px}
.stp:last-child{padding-bottom:0}
.stp::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;
  border-radius:50%;background:var(--paper);border:2.5px solid rgb(var(--accent-rgb));
  box-sizing:border-box}
.stp.end::before{background:rgb(var(--accent-rgb))}
.stp-b h4{font-size:18px;margin:0 0 3px;letter-spacing:-.012em;line-height:1.25}
.art-in .stp-b h4 a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(var(--accent-rgb),.35)}
.art-in .stp-b h4 a:hover{border-bottom-color:rgb(var(--accent-rgb))}
.stp-x{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.5}
.stp-f{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.stp-f li{background:var(--paper-sunk);border-radius:8px;padding:6px 11px;font-size:13.5px;
  color:var(--ink-soft);line-height:1.35;display:flex;align-items:baseline;gap:7px;
  flex-wrap:wrap;max-width:100%}
.stp-f b{color:var(--ink-faint);font-weight:700;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap}
.stp-v{color:var(--ink);font-weight:600}
.stp-q{font-size:11.5px;color:var(--ink-faint);flex-basis:100%}
.art-in .stp-q a{color:var(--ink-faint);text-decoration:none;border-bottom:1px dotted var(--rule)}

/* ------------------------------------------------------- Tourseiten, zweiter Teil
   Bildstrecke, zwei Diagrammformen, Vergleichstabelle, Datenblatt, Quellenapparat. */

/* Die Bildstrecke laeuft ueber die volle Textbreite. carousel.js findet jedes .mc
   und baut Pfeile und Punkte; hier steht nur das Seitenverhaeltnis. */
.tgal{margin:1.9em 0}
.mc-wide{--ar:16/10;border-radius:var(--radius-card);overflow:hidden;
  border:1px solid var(--rule)}
.gcap{font-size:15px;color:var(--ink-faint);margin:9px 0 0;line-height:1.45}

/* Balken. Eine Reihe, ein Farbton; der hervorgehobene Eintrag ist das Subjekt der
   Seite und nicht der groesste Wert - die Farbe folgt der Identitaet, nicht dem Rang. */
.chart .cbars{display:grid;gap:9px;margin:4px 0 2px}
.cb{display:grid;grid-template-columns:minmax(120px,34%) 1fr auto;gap:12px;align-items:center;
  font-size:14.5px}
.cbl{color:var(--ink-soft);line-height:1.35}
.cbt{height:14px;background:var(--chart-track);border-radius:7px;overflow:hidden}
.cbf{display:block;height:100%;background:var(--chart-mute);border-radius:7px}
.cb.on .cbf{background:var(--chart-warm)}
.cb.on .cbl,.cb.on .cbv{color:var(--ink);font-weight:700}
.cbv{font-variant-numeric:tabular-nums;color:var(--ink-soft);white-space:nowrap;min-width:62px;
  text-align:right}

/* Linien. Zwei Reihen ueber zwoelf Monate, eine Achse, Punkte nur an den Extremwerten. */
.clegend{display:flex;flex-wrap:wrap;gap:16px;margin:2px 0 10px;font-size:14px;
  color:var(--ink-soft)}
.clg{display:inline-flex;align-items:center;gap:7px}
.clg i{width:14px;height:3px;border-radius:2px;display:inline-block}
.cline{display:block;width:100%;height:auto}
.cax{font-size:11.5px;fill:var(--ink-faint)}
.cpt{font-size:12px;fill:var(--ink);font-weight:700}
.cdata{margin-top:14px;border-top:1px solid var(--rule-soft);padding-top:11px}
.cdata summary{font-size:14px;color:var(--ink-faint);cursor:pointer}
.cdata[open] summary{margin-bottom:11px}
.chart .take{font-size:16px;color:var(--ink-soft);margin:14px 0 0;line-height:1.5}

/* Vergleich. Die eigene Spalte traegt einen Rahmen, damit man sie im Scrollen
   wiederfindet, und keine Fuellfarbe, damit sie nicht wie eine Empfehlung aussieht. */
.cmpt table{font-size:15px}
.cmpt th[scope=row]{text-align:left;color:var(--ink);font-weight:700;white-space:nowrap;
  padding:11px 16px 11px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
/* Die Kopfzeile traegt Tournamen, keine Feldnamen. Die globale th-Regel setzt sie in
   gesperrte Versalien, was bei „ANBIETER" richtig ist und bei einem Titel aus acht
   Woertern unlesbar wird - also hier zurueckgenommen. Der Link bleibt ein Link, traegt
   die Unterstreichung aber erst beim Darueberfahren, damit fuenf unterstrichene
   Blocksaetze nebeneinander die Tabelle nicht zerreissen. */
.cmpt thead th{vertical-align:bottom;line-height:1.35;white-space:normal;min-width:132px;
  text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:700;color:var(--ink);
  padding:0 16px 12px 0}
.art-in .cmpt thead th a:not(.cta){color:inherit;text-decoration:none}
.art-in .cmpt thead th a:not(.cta):hover,
.art-in .cmpt thead th a:not(.cta):focus-visible{color:var(--accent);
  text-decoration:underline;text-underline-offset:3px}
.cmpt thead th.sub{color:var(--accent);padding-top:10px}
.cmpt td{white-space:normal}
.cmpt .sub{background:rgba(var(--accent-rgb),.06);color:var(--ink);font-weight:700}
.cmpt thead th.sub{box-shadow:inset 0 3px 0 rgb(var(--accent-rgb))}

/* Das Datenblatt. Zugeklappt, aber vollstaendig im HTML. */
.sheet .dscsv{font-size:15px;color:var(--ink-soft);margin:0 0 14px}
.dsx summary{font-size:16.5px;font-weight:700;cursor:pointer;padding:12px 15px;
  background:var(--paper-sunk);border-radius:10px;color:var(--ink)}
.dsx[open] summary{margin-bottom:14px}
.ds{font-size:14.5px}
.ds td{padding:9px 14px 9px 0;vertical-align:top}
.ds td:first-child{font-weight:400;color:var(--ink-soft);width:34%}
.ds td:nth-child(2){color:var(--ink);font-weight:700}
.dsq{color:var(--ink-faint);font-size:13.5px}
.art-in .dsq a{color:var(--ink-faint);text-decoration:none;border-bottom:1px dotted var(--rule)}
tr.dsg th{background:var(--paper-sunk);color:var(--ink);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:10px 14px;border-radius:6px;position:relative}
tr.dsg th i{font-style:normal;color:var(--ink-faint);font-weight:400;margin-left:8px}

/* Der Apparat. Nummeriert, mit Abrufdatum, wie in einer Arbeit. */
.rlist{list-style:none;margin:0;padding:0;display:grid;gap:11px;counter-reset:r}
.rlist li{display:grid;grid-template-columns:26px 1fr;gap:11px;font-size:15px;
  color:var(--ink-soft);line-height:1.5}
.rn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--paper-sunk);color:var(--ink-faint);font-size:12.5px;
  font-weight:700;margin-top:2px}
.rdate{color:var(--ink-faint);white-space:nowrap}
.rwhat{display:block;color:var(--ink-faint);font-size:14px;margin-top:2px}

/* Ein Produktname von sechzig Zeichen in der Heldenschrift ergibt vier Zeilen, und
   weil der Held von unten ausgerichtet ist, wandert der ganze Block dabei nach oben.
   Lange Titel bekommen deshalb einen eigenen Grad; der Block wird kuerzer und sitzt
   damit wieder da, wo er auf der Startseite sitzt. */
.hero h1.long{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.028em;line-height:1.08}
body[data-kind=directory] .hero-t{max-width:52ch}

/* Betraege im Fliesstext, die der Waehrungsumschalter anfasst. Sie sollen als Zahl
   auffallen und nicht als fettes Wort mitten im Satz, deshalb Ziffern in Tabellen-
   breite und ein halber Schritt Gewicht statt eines ganzen. */
.art-in b.cur{font-weight:560;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Die Vergleichstabelle traegt fuenf Spalten und passt nicht in die Textbreite (660px),
   also bricht sie auf dem Desktop aus ihr aus - mittig, nicht nach rechts. Die Breite
   haengt an `min`, damit der Ausbruch nie ueber den Viewport hinauswaechst und aus dem
   Scrollen im Block ein Scrollen der ganzen Seite wird. `.tw` behaelt sein overflow-x
   als Netz fuer schmale Desktops.

   ACHTUNG, hier ist schon einmal etwas kaputtgegangen: _mobile_layer() in site.py
   entscheidet ueber eine Textsuche im Selektortext, und der Selektortext ist alles
   zwischen der letzten schliessenden Klammer und der naechsten oeffnenden - also
   dieser Kommentar mit. Steht die gesuchte Zeichenfolge im Kommentar, wandert der
   ganze Block in die max-width-Abfrage und die Desktopregel greift nie. Deshalb wird
   die Zeichenfolge hier umschrieben und nicht ausgeschrieben: gemeint ist das
   Attribut, mit dem die Mockups ihre Mobilregeln markiert haben. */
@media (min-width:1100px){
  .cmpt{width:min(1180px, calc(100vw - 48px));max-width:none;
        margin-left:50%;transform:translateX(-50%)}
  .cmpt thead th{min-width:0}
  .cmpt .tw{overflow-x:auto}
  .cmpt table{width:100%;table-layout:fixed}
  .cmpt th[scope=row]{white-space:normal;width:19%}
}

/* Die Landeswaehrung hinter dem umgerechneten Betrag: da, aber nicht laut. */
.art-in .egp,.art-in .cur-src{color:var(--ink-faint);font-size:.92em;white-space:nowrap}

/* ---------------------------------------------------------------- Tour-Finder
   Der Block liegt hier und nicht mehr im Renderer: so greift `site.py --css-only`
   und eine Aenderung am Aussehen kostet eine halbe Sekunde statt eines vollen Laufs.

   Die erste Regel ist die wichtigste. `.art-in a:not(.cta):not(.cta2)` faerbt und
   unterstreicht jeden Link im Artikel und wiegt (0,3,1); jede Regel aus drei Klassen
   verliert dagegen. Der Finder besteht fast nur aus Links - Pillen, Karten, Kacheln -
   und stand deshalb unterstrichen und orange auf der Startseite. */
.art-in .finder a:not(.cta):not(.cta2){color:inherit;text-decoration:none;border-bottom:0}

.finder{margin:2.4em 0}
.finder .fin{--fpaper:var(--paper);background:var(--paper-sunk);border:1px solid var(--rule);
  border-radius:20px;padding:26px 24px 24px}
.finder .eyebrow{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--accent);margin:0 0 8px}
.finder h3{font-size:29px;font-weight:800;letter-spacing:-.025em;line-height:1.13;margin:0 0 7px;
  text-wrap:balance}
.finder .flead{margin:0 0 20px;color:var(--ink-soft);font-size:16.5px;max-width:64ch}
/* The row gap separates one filter set from the next. At 11px three sets of pills
   ran together as one block and the reader could not see where "where" ended and
   "what kind" began. */
.finder .fgrid{display:grid;grid-template-columns:auto 1fr;gap:22px 18px;align-items:start;
  padding:19px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.finder .rlab{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.07em;
  text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin:6px 0 0}
.finder .rlab svg{width:16px;height:16px;flex:none}
.finder .pills{display:flex;flex-wrap:wrap;gap:8px}
.finder .pill{font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:999px;
  padding:7px 14px;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  transition:background .13s,border-color .13s,color .13s}
.finder .pill .pi{width:17px;height:17px;flex:none;opacity:.7}
.finder .pill[aria-pressed=true] .pi{opacity:1}
.finder .pill em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-faint);
  font-weight:500;font-size:13.5px}
.finder .pill:hover:not([disabled]){border-color:rgba(var(--accent-rgb),.5)}
.finder .pill[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.finder .pill[aria-pressed=true] em{color:rgba(255,255,255,.75)}
.finder .pill[disabled]{opacity:.3;cursor:not-allowed}
/* The count and its unit are one phrase - "458 places" - so they sit close.
   At 15px they read as two separate things. */
.finder .tally{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:16px 0 14px}
.finder .tally b{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.finder .tally span{color:var(--ink-soft);font-size:15px}
.finder .reset{margin-left:auto;font-size:14px;color:var(--accent);background:none;border:0;
  font-family:inherit;font-weight:600;cursor:pointer;padding:0}
.finder .rail{position:relative;margin:0 -24px;padding:0 24px}
.finder .rail::before,.finder .rail::after{content:"";position:absolute;top:0;bottom:12px;
  width:34px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s}
.finder .rail::before{left:0;background:linear-gradient(to right,var(--paper-sunk),transparent)}
.finder .rail::after{right:0;background:linear-gradient(to left,var(--paper-sunk),transparent)}
.finder .rail[data-l]::before{opacity:1}
.finder .rail[data-r]::after{opacity:1}
.finder .fcards{display:grid;grid-auto-flow:column;grid-auto-columns:258px;gap:13px;
  overflow-x:auto;overflow-y:hidden;padding-bottom:12px;scroll-snap-type:x proximity;
  scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;scroll-behavior:smooth}
/* KEIN touch-action hier. `pan-y` sagt dem Browser: du darfst nur senkrecht
   schieben, waagerecht gehoert der Anwendung - und die Schiene liess sich am
   iPhone nicht mehr wischen. Der Zeigercode ueberspringt Beruehrungen ohnehin
   (`pointerType === 'touch'` steigt sofort aus), also soll der Browser beide
   Richtungen behalten. Das ist der Vorgabewert, und der ist hier der richtige. */
.finder .fcards::-webkit-scrollbar{height:0}
.finder .fcards.grabbing{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.finder .fcards.grabbing .fcard{pointer-events:none}
.finder .fcard{position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;
  border-radius:14px;aspect-ratio:4/3;background:#2A3646;scroll-snap-align:start;
  user-select:none;-webkit-user-drag:none}
.finder .fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);-webkit-user-drag:none;pointer-events:none}
.finder .fcard:hover img{transform:scale(1.06)}
.finder .fcard .shade{position:absolute;inset:0;background:linear-gradient(to top,
  rgba(10,16,24,.93) 0%,rgba(10,16,24,.6) 36%,rgba(10,16,24,.04) 74%)}
.finder .fcard .fb{position:absolute;left:0;right:0;bottom:0;padding:13px 14px}
.art-in .finder .fcard h4{margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.28;
  color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Die Fusszeile der Karte darf nie ueberlaufen. Sie stand auf `nowrap`, und sobald
   der Umschalter auf eine Waehrung mit dreistelligem Code stand („ab 48 CHF" statt
   „ab 48 €"), schob sich der Preis rechts aus der Karte. Der Preis ist die eine
   Angabe, die nicht verhandelbar ist: er behaelt seine Breite, die Dauer gibt nach
   und kuerzt sich notfalls mit Auslassungspunkten. */
.finder .fcard .fm{display:flex;align-items:center;gap:6px;font-size:13px;color:#D6DDE6;
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0;overflow:hidden}
.finder .fcard .fm .thin{min-width:0;overflow:hidden;text-overflow:ellipsis}
.finder .fcard .pr{flex:none}
.finder .fcard .st{flex:none}
.finder .fcard .sp{flex:1}
.finder .fcard .dot{opacity:.45}
.finder .fcard .st{color:#FFCF8B;font-weight:700}
.finder .fcard .pr{font-weight:800;color:#fff}
.finder .fcard .thin{color:#B6C0CC;font-weight:500}
.finder .fcard .flag{position:absolute;top:9px;left:9px;background:rgba(255,255,255,.94);
  color:#16202C;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px}
.finder .fnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;
  height:40px;border-radius:999px;border:1px solid var(--rule);background:rgba(255,255,255,.94);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 3px 14px rgba(20,30,45,.13);transition:transform .12s}
.finder .fnav:hover{transform:translateY(-50%) scale(1.07)}
.finder .fnav svg{width:19px;height:19px}
.finder .fnav[hidden]{display:none}
.finder .fnav.prev{left:2px}
.finder .fnav.next{right:2px}
@media (hover:none){.finder .fnav{display:none}}
.art-in .finder a.fgo:not(.cta){display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;
  padding:12px 21px;border-radius:11px;transition:background .14s}
.art-in .finder a.fgo:not(.cta):hover{background:var(--accent-ink);color:#fff}
.finder .fgo svg{width:19px;height:19px}
.finder .fsub{margin:30px 0 12px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.finder .fsub i{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--ink-faint);font-size:14px}
.finder .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.finder .tile{position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;
  border-radius:13px;aspect-ratio:5/4;background:#2A3646}
.finder .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.finder .tile:hover img{transform:scale(1.06)}
.finder .tile .shade{position:absolute;inset:0;background:linear-gradient(to top,
  rgba(10,16,24,.9) 0%,rgba(10,16,24,.5) 44%,rgba(10,16,24,.06) 78%)}
.finder .tile .ti{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.18);display:grid;place-items:center}
.finder .tile .ti svg{width:17px;height:17px}
.finder .tile .tb{position:absolute;left:0;right:0;bottom:0;padding:11px 12px}
.art-in .finder .tile h4{margin:0 0 3px;font-size:15px;font-weight:700;line-height:1.2;color:#fff}
.finder .tile .m{font-size:12.5px;color:#C7D0DA;font-variant-numeric:tabular-nums}
.finder .tile .m b{color:#fff;font-weight:700}
/* The full index, grouped and folded away. 51 links in one justified paragraph read
   as a wall of text; as named columns behind a disclosure they are a directory a
   reader opens on purpose. */
.finder .frest{margin:24px 0 0;padding-top:17px;border-top:1px solid var(--rule)}
.finder .frest>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);padding:2px 0}
.finder .frest>summary::-webkit-details-marker{display:none}
.finder .frest>summary:hover{color:var(--accent)}
.finder .frest>summary svg{width:15px;height:15px;flex:none;transition:transform .16s ease}
.finder .frest[open]>summary svg{transform:rotate(45deg)}
.finder .fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:22px 30px;margin-top:18px}
.finder .fcol h5{margin:0 0 9px;font-size:13px;font-weight:700;color:var(--ink);
  letter-spacing:-.005em}
.finder .fcol h5{display:flex;align-items:center;gap:7px}
.finder .fcol h5 svg{width:15px;height:15px;flex:none;color:var(--accent)}
.finder .fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.finder .fcol li{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.4}
.finder .fcol li em{font-style:normal;color:var(--ink-faint);font-size:12.5px;
  margin-left:auto;flex:none}
.art-in .finder .frest a:not(.cta){color:var(--ink-soft);text-decoration:none;border-bottom:0}
.art-in .finder .frest a:not(.cta):hover{color:var(--accent)}
.finder .fempty{padding:18px;border:1px dashed var(--rule);border-radius:12px;
  color:var(--ink-soft);font-size:15.5px}
@media(max-width:760px){
  .finder .fgrid{grid-template-columns:1fr}
  .finder .rlab{margin:2px 0 0}
  .finder h3{font-size:24px}
  .finder .fin{padding:20px 16px 18px;border-radius:16px}
  .finder .rail{margin:0 -16px;padding:0 16px}
  .finder .tiles{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
}
/* Dieselbe Ausbruchsbreite wie die Vergleichsbloecke, damit die Startseite eine
   Kante hat und nicht drei. Unter 1280px bleibt der Block im Textmass.

   Die Werkzeugleiste steht direkt darunter und lag im Textmass, also 720 gegen 1180:
   zwei Kanten auf derselben Seite, und die schmalere zuerst. Sie bekommt denselben
   Ausbruch, damit es bei einer bleibt. Der Aufbau ist derselbe wie bei .fig und .cmp -
   `.art-in` ist seitenzentriert, 50 Prozent davon ist die Seitenmitte, und die
   Ruecknahme um die halbe eigene Breite zentriert den breiteren Block ohne 100vw und
   den Ueberlauf, den das mit einer Bildlaufleiste ausloest. */
@media(min-width:1280px){
  .finder{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
  /* Die Werkzeugleiste steht direkt darunter und lag im Textmass: zwei Kanten auf
     derselben Seite, die schmalere zuerst. Sie bekommt denselben Ausbruch.

     `.art-in .htools` und nicht `.htools`, weil die Leiste ihr Grundformat aus
     site.py bezieht und dieser Block dort ZWANZIG Kilobyte spaeter steht. Das
     `margin:24px 0` von dort ueberschrieb ein einfaches `margin-left:50%` wieder,
     die Ruecknahme um die halbe Breite blieb stehen, und der Block rutschte um seine
     halbe Breite nach links aus dem Bild. Zwei Klassen gewinnen unabhaengig von der
     Reihenfolge. */
  .art-in .htools{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)}
}

/* Kacheln auf schmalen Schirmen. Der Titel steht unten und waechst nach oben; bei
   „Touren mit deutschsprachigem Guide" wuchs er in das Symbol hinein und die
   Preiszeile brach um und lief aus der Kachel. Zwei Zeilen Titel, eine Zeile
   Zahlen, und auf dem Telefon etwas mehr Hoehe, damit beides Platz hat. */
.art-in .finder .tile h4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-wrap:balance}
.finder .tile .m{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finder .tile .tb{padding-right:12px}
@media(max-width:760px){
  .finder .tile{aspect-ratio:4/3}
  .art-in .finder .tile h4{font-size:14px;line-height:1.22}
  /* Auf einer 150 Pixel breiten Kachel passt „186 Angebote · ab 12 €" nur knapp.
     Bei 12px wurde daraus „ab 1…" - abgeschnitten wurde ausgerechnet der Preis,
     also das, wofuer die Zeile da ist. Eine Spur kleiner und enger, und sie passt
     ganz; der Titel darueber traegt die Groesse. */
  .finder .tile .m{font-size:11px;letter-spacing:-.01em}
  /* Der Grenzfall ist die dreistellige Zahl auf beiden Seiten: „127 Angebote ·
     ab 103 €". Nur dafuer eine halbe Stufe kleiner, damit auch dort der Preis
     ganz dasteht statt als „ab 103…". */
  .finder .tile .m{font-size:10.5px}
  .finder .tile .tb{padding:9px 10px}
  .finder .tile .ti{width:26px;height:26px;border-radius:8px;top:8px;left:8px}
  .finder .tile .ti svg{width:15px;height:15px}
}

/* Zugeklappte Zusammenstellungen. Der Knopf sitzt in der Ueberschrift und greift nur
   unter 760px: am Schreibtisch sind Kacheln und Linkliste eine Uebersicht, auf dem
   Telefon stehen sie zwischen dem Leser und dem Artikel. Das Attribut setzt das
   Skript immer; welche Breite es betrifft, entscheidet allein diese Abfrage. */
.finder .fr-t{display:none}
@media(max-width:760px){
  .finder .fsub{margin:22px 0 0;align-items:center;justify-content:space-between;
    flex-wrap:nowrap;gap:10px}
  .finder .fsub .fs-txt{min-width:0;display:block}
  .finder .fsub i{display:block;margin-top:3px}
  .finder .fin[data-collapsed] .fr-fold{display:none}
  .finder .fr-fold{margin-top:12px}
  .finder .fr-t{display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;flex:none;border-radius:999px;border:1px solid var(--rule);
    background:var(--card);color:var(--ink);cursor:pointer;padding:0;
    transition:transform .18s ease,background .14s}
  .finder .fr-t svg{width:16px;height:16px}
  .finder .fin:not([data-collapsed]) .fr-t{transform:rotate(45deg);
    background:var(--paper-sunk)}
}

/* ---- kit blocks, 2026-09-06: compare-slider, explainer, map-leaflet ------------------- */
/* compare-slider: both pictures in the DOM; without the script they sit side by side,
   with it the after-image is clipped to the handle position (a range input). */
.cmps-stage{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
.cmps-stage img{width:100%;height:auto;display:block;border-radius:var(--radius-card)}
.cmps-before,.cmps-after{position:relative}
.cmps-lab{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;
  font-weight:700;padding:3px 8px;border-radius:var(--radius-pill,999px);letter-spacing:.02em}
.cmps-range{display:none}
.cmps[data-ready] .cmps-stage{display:block;--x:50%;overflow:hidden;border-radius:var(--radius-card)}
.cmps[data-ready] .cmps-stage img{border-radius:0;aspect-ratio:16/10;object-fit:cover}
.cmps[data-ready] .cmps-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.cmps[data-ready] .cmps-after .cmps-lab{left:auto;right:10px}
.cmps[data-ready] .cmps-stage::after{content:"";position:absolute;top:0;bottom:0;left:var(--x);width:2px;
  margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.cmps[data-ready] .cmps-range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.cmps[data-ready] .cmps-handle{position:absolute;top:50%;left:var(--x);width:36px;height:36px;margin:-18px 0 0 -18px;
  border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none;
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-weight:800;font-size:14px}

/* explainer: every panel in the DOM with its heading; the script adds a tab strip and
   shows one panel at a time. `steps` mode adds previous/next buttons. */
.explainer{border:1px solid var(--rule);border-radius:var(--radius-card);padding:18px 20px;margin:1.9em 0;background:var(--card)}
.explainer>h3{margin:0 0 12px;font-size:1.15em}
.ex-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.ex-tabs button{border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:var(--radius-pill,999px);
  padding:6px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ex-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ex-panel>h4{margin:0 0 8px;font-size:1em}
.ex-panel+.ex-panel{border-top:1px solid var(--rule-soft);margin-top:14px;padding-top:14px}
.explainer[data-ready] .ex-panel{display:none;border:0;margin:0;padding:0}
.explainer[data-ready] .ex-panel[data-on]{display:block}
.ex-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.ex-nav button{border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:var(--radius-control,8px);
  padding:7px 12px;font:inherit;font-size:14px;cursor:pointer}
.ex-nav button:disabled{opacity:.4;cursor:default}
.ex-count{font-size:13px;color:var(--ink-faint);align-self:center}

/* map-leaflet: the legend is server-rendered and stands alone; the map fills in when
   the self-hosted Leaflet arrives. */
.maplf-map{height:420px;border-radius:var(--radius-card);background:var(--paper-sunk);border:1px solid var(--rule)}
.maplf-map:empty::before{content:attr(data-fallback);display:block;padding:16px;color:var(--ink-faint);font-size:14px}
.maplf-legend{margin:12px 0 0;padding-left:1.4em;font-size:15px;color:var(--ink-soft)}
.maplf-legend li{margin:4px 0}
.maplf-legend b{color:var(--ink)}
.leaflet-container{font:inherit}
.leaflet-popup-content{font-size:14px;line-height:1.45}
/* Stars only. The score and the review count sit in an instant tooltip: at 82px the
   full line overflowed its column and ran into the title. No transition delay - a
   tooltip that fades in is slower than the eye that asked for it. */
.compact .crate{position:relative;display:flex;align-items:center;justify-content:center;
                gap:0;font-size:14px;line-height:1;white-space:nowrap;cursor:default;outline:none}
.compact .crate .st{letter-spacing:1px}
.compact .crate .st .on{color:#E8A317}
.compact .crate .st .off{color:var(--rule)}
.compact .crate::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(-50%);background:#16212B;color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.01em;padding:6px 9px;border-radius:7px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(11,17,25,.22);opacity:0;visibility:hidden;pointer-events:none;z-index:20}
.compact .crate::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;
  transform:translateX(-50%);border:5px solid transparent;border-top-color:#16212B;
  opacity:0;visibility:hidden;pointer-events:none;z-index:20}
/* The tooltip flickered on the way in and out. Two reasons, both about the size of the
   target: the crate is only as big as five star glyphs, so a pointer moving across them
   crosses its edge easily, and the tooltip vanished the instant it did. The padding
   enlarges the target without moving anything - the negative margin takes the space
   back - and the delay on the way out means a wobble of a few pixels no longer closes
   it. Opacity is transitioned; visibility is switched, so it cannot be read by a screen
   reader while invisible. */
.compact .crate{padding:3px 8px;margin:-3px -8px}
.compact .crate::after,.compact .crate::before{
  transition:opacity .1s ease .16s,visibility 0s linear .26s}
.compact .crate:hover::after,.compact .crate:focus-visible::after,
.compact .crate:hover::before,.compact .crate:focus-visible::before{
  opacity:1;visibility:visible;transition:opacity .1s ease,visibility 0s}
/* A commercial card is one target. The button stays the visible affordance, but the
   whole card carries the click: the CTA is stretched over the card by a pseudo-element
   rather than by wrapping the card in an anchor, which would nest the rating's tooltip
   and any prose link inside a link. Everything that must stay separately clickable is
   lifted above it. */
.compact,.opt,.offer{position:relative}
.compact .cta::after,.opt .cta::after,.offer .cta::after{
  content:"";position:absolute;inset:0;z-index:1}
.compact:hover,.opt:hover,.offer:hover{border-color:var(--accent)}
.compact,.opt,.offer{transition:border-color .12s ease,box-shadow .12s ease}
.compact:hover,.offer:hover{box-shadow:0 4px 16px rgba(20,29,41,.08)}
.opt:hover{box-shadow:0 8px 22px rgba(20,29,41,.10)}
.opt.gold:hover{border-color:#D9920F}
/* Only the rating is lifted, because its tooltip must reach the pointer. Badges,
   bullets and the feature line are part of the card and open the offer like the rest
   of it. */
.compact .crate{position:relative;z-index:2}
/* The button must NOT be positioned. `inset:0` on its own ::after resolves against
   the nearest positioned ancestor, so `position:relative` here made the overlay the
   size of the button - 162x41 on #b15 - and the card was never clickable outside it.
   The anchor stays clickable without lifting: the overlay is its own pseudo-element,
   and it is transparent, so nothing needs to paint above it. */
.compact .cta,.opt .cta,.offer .cta{z-index:2}
.compact,.opt,.offer{cursor:pointer}
.compact a,.opt a,.offer a{cursor:pointer}
/* The carousel's arrows and dots keep their own clicks. The track does not need
   lifting: a drag is suppressed in script, and the picture itself stays part of the
   card so clicking it opens the offer. */
.offer .mc-arrow,.opt .mc-arrow,.compact .mc-arrow,
.offer .mc-dots,.opt .mc-dots,.compact .mc-dots{z-index:3}
/* z-index only. `position:relative` here took the arrows and dots out of the
   carousel's absolute frame and stacked them above the picture in normal flow, so
   the thumbnail grew 48px of chrome on top of itself. They are already positioned;
   an absolutely positioned box honours z-index on its own. */
/* The eight cited institutions, each mark beside the name it belongs to: a crest
   identifies nothing to a reader who does not already know it. Two columns, not four -
   at a quarter of the footer's left half a name like "Icelandic Met Office" had about
   nine characters of room and wrapped to three truncated lines. Four rows of two sit at
   the same height as the affiliate note beside them. The marks are published at wildly
   different aspect ratios, so each is contained in its own square rather than stretched. */
.srcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;align-items:center}
.srcgrid .src{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:9px;
              width:auto;height:auto;min-width:0}
.srcgrid img{width:24px;height:24px;padding:3px;border-radius:6px;object-fit:contain;background:#fff;
             box-shadow:0 0 0 1px rgba(26,39,55,.08);filter:grayscale(1);opacity:.62;
             transition:filter .12s,opacity .12s}
.srcgrid .src:hover img,.srcgrid .src:focus img{filter:none;opacity:1}
.srcgrid .src > b{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink-soft);
                  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.srcgrid .src:hover > b{color:var(--ink)}
@media(max-width:860px){.srcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Three badges, in the same voice as the homepage comparison. Amber for the popular
   one, so it reads as the site's own recommendation rather than an operator's. */
/* Every card carries a label, so the pill must stay small and legible over a
   photograph: a filled mark, tight tracking, and a colour per class. */
/* One colour per label, so a rail of ten cards reads as ten different claims rather
   than one repeated sticker. Amber is the site's own recommendation; green is money;
   red is scarcity; blue is evidence; neutral is a plain fact about the trip. */
.finder .fcard .flag{display:inline-flex;align-items:center;gap:5px}
.finder .fcard .flag svg{width:12px;height:12px;flex:none}
.finder .fcard .flag.fl-hot{background:var(--cta);color:var(--cta-ink)}
.finder .fcard .flag.fl-star{background:#5B3FA8;color:#fff}
.finder .fcard .flag.fl-loved{background:#C2185B;color:#fff}
.finder .fcard .flag.fl-sellout{background:#C0392B;color:#fff}
.finder .fcard .flag.fl-cheap{background:#177245;color:#fff}
.finder .fcard .flag.fl-value{background:#1E8E5A;color:#fff}
.finder .fcard .flag.fl-proven{background:#0F6C9E;color:#fff}
.finder .fcard .flag.fl-ticket{background:#0E7C86;color:#fff}
/* A guided package: indigo, its own colour, because it is a different product
   from everything around it and not a longer version of one. */
.finder .fcard .flag.fl-pkg{background:#3E4C99;color:#fff}
.finder .fcard .flag.fl-big,.finder .fcard .flag.fl-multi,
.finder .fcard .flag.fl-quick{background:rgba(22,32,44,.82);color:#fff}
.finder .fcard .flag.fl-new{background:rgba(255,255,255,.92);color:#4A5561}
/* --- Directory mode ---------------------------------------------------------
   A finder on a hub page is the page. The rail becomes a grid that grows as the
   reader narrows, the filters stick to the top so re-filtering costs no scroll,
   and every card can argue within the filter rather than across the catalogue. */
/* A pill is display:inline-flex, which beats the user agent's [hidden] rule, so the
   money-row swap needs this to actually hide the set that is off. */
.finder .pill[hidden]{display:none}
.finder .fsortbar{display:flex;justify-content:flex-end;margin:0 0 12px}
.finder .fsortbar label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--ink-soft)}
.finder .fsort{font:inherit;font-size:13.5px;color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:9px;padding:7px 10px;cursor:pointer}
/* The rail bleeds 24px past the container so a dragged card can run to the edge.
   A grid must not: negative margins pushed the whole listing out of the page on
   both sides. */
.finder .rail.grid{overflow:visible;margin:0;padding:0}
.finder .rail.grid .fnav{display:none}
/* Every rail property has to be undone, not just the column template: the rail sets
   `grid-auto-flow:column` with fixed 258px tracks, so a grid-template-columns override
   alone still laid the cards out in one horizontal row that ran off the page. */
.finder .rail.grid .fcards{display:grid;grid-auto-flow:row;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));grid-auto-columns:auto;
  gap:16px;overflow:visible;padding-bottom:0;scroll-snap-type:none;cursor:default}
.finder .rail.grid .fcard{width:auto;scroll-snap-align:none}
.finder .fmore{display:block;margin:18px auto 0;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:11px;padding:11px 22px;font:inherit;
  font-weight:700;font-size:15px;cursor:pointer;transition:border-color .12s,color .12s}
.finder .fmore:hover{border-color:var(--accent);color:var(--accent)}
.finder .fmore[hidden]{display:none}
/* The one line on a card that argues within the filter the reader set. */
.finder .fcard .fctx{display:block;margin-top:5px;font-size:12px;font-weight:700;
  letter-spacing:.02em;color:#8FE3B8}
/* Filters: a plain block on desktop, a disclosure on a phone. The <details> is
   rendered open so the markup is complete without JavaScript; the media query closes
   it below 760px, where 23 wrapping pills would otherwise fill the screen before the
   reader met a single tour. */
.finder .ffilters>summary{display:none}
.finder .ffilters .fgrid{border-top:1px solid var(--rule)}
@media(max-width:760px){
  .finder .ffilters>summary{display:flex;align-items:center;gap:9px;cursor:pointer;
    list-style:none;padding:13px 0;border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);font-weight:700;font-size:15px}
  .finder .ffilters>summary::-webkit-details-marker{display:none}
  .finder .ffilters>summary svg{width:17px;height:17px;margin-left:auto;
    transition:transform .16s ease}
  .finder .ffilters[open]>summary svg{transform:rotate(180deg)}
  .finder .ffilters>summary .fcount{font-style:normal;font-size:12.5px;font-weight:600;
    color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    min-width:0;flex:1}
  .finder .ffilters>summary .fcount[hidden]{display:none}
  .finder .ffilters .fgrid{border-top:0;padding-top:14px;gap:16px 12px}
  /* Two cards a row rather than one: at one per row eight results is a very long
     scroll, and the 4:3 card still reads at half width. */
  .finder .rail.grid .fcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .finder .rail.grid .fcard h4{font-size:13.5px;line-height:1.25}
  .finder .rail.grid .fcard .fm{font-size:11.5px}
  .finder .rail.grid .fcard .flag{font-size:9.5px;padding:3px 7px;gap:4px}
  .finder .rail.grid .fcard .flag svg{width:10px;height:10px}
  .finder .fsortbar{justify-content:flex-start;margin-top:14px}
}
/* One filter, two controls. Pills where there is a pointer; a native <select> on
   touch, because iOS and Android render that as their own picker - reachable at the
   bottom of the screen, no custom sheet to maintain, and no keyboard. Exactly one is
   ever visible; the script keeps both in step. */
.finder .fsel{display:none}
@media(max-width:760px){
  .finder .pills{display:none}
  .finder .fgrid{grid-template-columns:1fr;gap:10px}
  .finder .rlab{display:none}
  .finder .fsel{display:grid;gap:5px}
  .finder .fsel>span{font-size:12px;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:var(--ink-faint)}
  .finder .fsel select{-webkit-appearance:none;appearance:none;width:100%;
    font:inherit;font-size:16px;   /* 16px or iOS zooms the page on focus */
    color:var(--ink);background:var(--card);border:1px solid var(--rule);
    border-radius:11px;padding:12px 38px 12px 13px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354626B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
  .finder .fsel select:focus-visible{outline:2px solid rgb(var(--accent-rgb));outline-offset:2px}
}
/* The tools strip is a sibling of the finder and sat in a different visual language:
   a flat card on --card with a 15px radius and 13px of padding, against the finder's
   sunk panel at 20px with 26px. Same panel, same eyebrow, same rhythm - so the two
   blocks read as one system rather than two components that happen to be adjacent. */
/* `margin-block`, never the `margin` shorthand: the wide-breakout rule further up
   sets `margin-left:50%` alongside `transform:translateX(-50%)`, and a shorthand here
   resets the left margin while the transform survives - which slides the whole strip
   half its own width off the left edge. The file already carries a comment about this
   exact trap and I walked into it anyway. */
.art-in .htools,.htools{background:var(--paper-sunk);border:1px solid var(--rule);
  border-radius:20px;padding:26px 24px 24px;margin-block:2.4em}
.ht-head{display:block;margin:0 0 18px}
/* The eyebrow rule is scoped to .finder, and the bare `.eyebrow` in home.css is the
   hero's - a pill on a photograph. The strip needs the finder's treatment, not either. */
.htools .eyebrow{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin:0 0 8px;background:none;border:0;padding:0;
  text-shadow:none;backdrop-filter:none}
.ht-head b{display:block;font-size:29px;font-weight:800;letter-spacing:-.025em;
  line-height:1.13;margin:0 0 7px;text-wrap:balance}
/* `> span`, not `span`. The heading is emitted as `<b><svg><span>…</span></b>`, so a
   descendant selector caught the heading text as well and painted it 16.5px grey -
   the `.ht-head b` rule above set 29px/800 on the <b>, and the inner span overrode
   it. Only the lead, which is the direct child, is meant to be small and soft. */
.ht-head > span{display:block;font-size:16.5px;color:var(--ink-soft);max-width:64ch}
.ht-head b > span{font:inherit;color:inherit;max-width:none;display:inline}
.ht-grid{gap:12px}
.htools .ht-grid a,.art-in .htools .ht-grid a{background:var(--card);
  border:1px solid var(--rule);border-radius:14px}
@media(max-width:760px){
  .art-in .htools,.htools{padding:20px 16px 18px;border-radius:16px}
  .ht-head b{font-size:24px}
}
/* Desktop sizing for the tool cards. The 30px tile and 16px glyph come from a rule
   that loads after the intended 36/19, so both were being reset; at a 274px card the
   result was a 13.5px label beside a 16px icon inside a 30px tile - all of it reading
   as fine print next to the finder's 29px heading. */
/* Four across only where the strip has its full breakout width. Between 900 and
   1280 the panel is inside the text measure and a 15.5px label wraps to two lines. */
@media(min-width:900px) and (max-width:1279px){
  .htools .ht-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
  .htools .ht-grid a,.art-in .htools .ht-grid a{padding:18px 16px;font-size:15.5px;gap:14px}
  .htools .ht-grid i{width:42px;height:42px;border-radius:12px}
  .htools .ht-grid i svg{width:22px;height:22px}
  .htools .ht-grid span{font-size:15.5px;font-weight:600}
  .htools .ht-grid .ht-a{width:16px;height:16px}
}
/* One card a row on a phone: at 390px two columns leave about 120px of label, which
   wraps "Airport transfer tool" onto three lines. */
@media(max-width:480px){
  .htools .ht-grid{grid-template-columns:1fr}
}
/* The heading mark. Sized to the cap height of the 29px heading and set on the accent,
   so it reads as part of the line rather than a bullet in front of it. */
.ht-head b{display:flex;align-items:center;gap:11px}
.ht-head .ht-mark{width:28px;height:28px;flex:none;color:var(--accent)}
@media(max-width:760px){ .ht-head .ht-mark{width:23px;height:23px} }
/* --- Directory item pages: the offer block in the compact card's language ---------
   #b15 on the homepage is the shape the owner wants, at the larger scale a page whose
   whole job is one product deserves: the sunk paper ground, a square thumbnail with
   the rating stacked beneath it, eyebrow-title-bullets in the middle, and price,
   amber button and feature line on the right. The markup nests everything but the
   thumbnail in one wrapper, so `display:contents` promotes those children to grid
   items and the card becomes three columns like .compact. */
.offer{background:var(--paper-sunk);
  grid-template-columns:150px minmax(0,1fr) minmax(152px,180px);
  /* Explicit rows, or `grid-row:1/-1` below resolves against an empty explicit grid
     and spans one row: the thumbnail took the whole first row and the button sat
     level with the eyebrow instead of centred against the card. */
  grid-template-rows:auto auto;
  gap:18px 22px;padding:20px;align-items:center;border-radius:16px}
.offer > div:not(.othumb){display:contents}
/* render.py moves .rate inside .othumb so the media column is one stack like .cmedia.
   Two grid items in different parents cannot do this: the row holding the image would
   set its height from the image and leave the title floating a hundred pixels above
   the bullets. Spanning both text rows keeps the stack centred against them. */
.offer .othumb{grid-column:1;grid-row:1/-1;align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.offer .othumb .mc{--ar:1/1;width:150px}
.offer .othumb .mc,.offer .othumb>img{border-radius:11px}
.offer .othumb>img{width:150px;height:150px;object-fit:cover;display:block}
/* 150px cannot hold "(3,733 reviews)" on one line, and .rate is nowrap by default. */
.offer .othumb .rate{max-width:150px;flex-wrap:wrap;justify-content:center;
  white-space:normal;text-align:center;gap:5px;font-size:14px;line-height:1.3}
.offer .othumb .rate i{font-size:13px}
/* Hotels: the score sits under the button instead of under the photo. */
.offer .buy .rate{justify-content:center;flex-wrap:wrap;white-space:normal;
  text-align:center;gap:5px;font-size:14px;line-height:1.3}
.offer .buy .rate i{font-size:13px}
/* A bounded buy column, not fit-content: the CTA is nowrap, so fit-content let it
   claim 501 of the 720px and collapsed the title column to zero. The base .buy is a
   footer strip under a full-width card - here it is a side column, so its top rule,
   top margin and two-column grid all have to go. */
.offer .top{grid-column:2;align-self:end;display:block}
.offer .bene{grid-column:2;align-self:start;margin:0}
.offer .buy{grid-column:3;grid-row:1/-1;display:flex;flex-direction:column;
  align-items:stretch;justify-content:center;gap:11px;text-align:center;
  margin:0;padding:0;border-top:0}
.offer .buy .cta{white-space:nowrap}
.offer .buy .price{text-align:center}
/* Larger than the 82px compact card: h3 not h4, and a price that carries the page. */
.offer h3{font-size:21px;line-height:1.25;letter-spacing:-.018em;margin:0}
.offer .bene{font-size:15px}
.offer .bene li{font-size:15px}
.offer .price b{font-size:24px}
/* No thumbnail: the same card minus its first column. */
.offer.noimg{grid-template-columns:minmax(0,1fr) minmax(152px,180px)}
.offer.noimg .top,.offer.noimg .bene{grid-column:1}
.offer.noimg .buy{grid-column:2}
@media(max-width:760px){
  /* minmax(0,1fr), not 1fr: a grid item defaults to min-width:auto, so the carousel
     image's intrinsic width pushed the column to 473px inside a 390px screen. */
  .offer,.offer.noimg{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    gap:14px;padding:16px}
  .offer .othumb,.offer .top,.offer .bene,.offer .buy{grid-column:1;grid-row:auto;min-width:0}
  /* One column wide: the thumbnail goes back to a 16/9 banner and the rating sits
     under its left edge rather than centred in a column that no longer exists. */
  .offer .othumb{align-items:stretch;gap:8px}
  .offer .othumb .mc{width:auto;--ar:16/9}
  .offer .othumb>img{width:100%;height:auto;aspect-ratio:16/9}
  .offer .othumb .rate{max-width:none;justify-content:flex-start;text-align:left}
  .offer .buy{align-items:stretch}
  .offer h3{font-size:19px}
}
/* ===================== footer ===================== */
.ft{background:var(--paper-sunk);color:var(--ink);border-top:1px solid var(--rule);margin-top:60px}
.ft-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:44px var(--gutter) 0}
/* Brand beside blurb, same .78/1.22 split and hairline as .ft-mid below, so the
   two rows of the footer read as one system. */
.ft-top{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:center;padding-bottom:34px}
.fbrand{display:flex;align-items:center;gap:11px;margin:0;padding-right:34px;
 color:inherit;text-decoration:none}
.fbrand:hover b{color:var(--accent)}
.fbrand svg{width:36px;height:36px;flex:none;color:var(--ink)}
.fbrand b{font-size:19px;letter-spacing:-.02em;line-height:1.1;display:block}
.fbrand small{display:block;font-size:10.5px;letter-spacing:.055em;text-transform:uppercase;
              color:var(--ink-faint);margin-top:2px}
.ft-blurb{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0;
  border-left:1px solid var(--rule);padding-left:34px}
.nl h3{font-size:18px;margin:0 0 6px;letter-spacing:-.015em}
.nl p{font-size:15.5px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5;max-width:44ch}
.nl form{display:flex;gap:9px;flex-wrap:wrap}
.nl input{flex:1 1 200px;min-width:0;background:#fff;border:1px solid var(--rule);border-radius:10px;
          padding:12px 14px;font:inherit;font-size:16px;color:var(--ink)}
.nl button{background:var(--cta);color:var(--cta-ink);border:0;border-radius:10px;padding:12px 20px;
           font:inherit;font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap}
.nl button:hover{background:var(--cta-hover)}
.nl .small{font-size:13px;color:var(--ink-faint);margin:9px 0 0}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 30px;padding:32px 0 34px;
         border-top:1px solid var(--rule)}
.ft-cols h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
            font-weight:700;margin:0 0 11px}
.ft-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft-cols a{color:var(--ink-soft);text-decoration:none;font-size:15.5px}
.ft-cols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2.5px}
/* source row, in the footer on every page */
/* The sources and the affiliate note sit side by side. The note is the longer
   text so it takes the wider column, and a hairline between them does the
   separating that two stacked full-width rules used to. */
.ft-mid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  border-top:1px solid var(--rule);padding:24px 0 22px}
.ft-src{padding:0 34px 0 0}
.ft-src h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
           font-weight:700;margin:0 0 4px}
.ft-src .lead{font-size:14.5px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
/* Two components share the class `.srcgrid`, and they disagreed.
   article.css lays a source out as a two-track grid - a 24px icon column beside the
   name - and stacks those in two columns. This file assumed the footer version was a
   bare row of logos: `display:flex;flex-wrap:wrap` with a 34px image.
   The footer renders the article's markup, so each source really is icon + name, and
   eight names of different lengths packed into a wrapping row put every icon at a
   different x. On top of that the 34px image sat in article.css's 24px track and
   pushed its own name sideways.
   The footer therefore states the whole thing at two classes: a real grid, so the
   icons line up one under the other, and an icon track that matches the icon. */
.ft-src .srcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
                 gap:10px 20px;align-items:center}
.ft-src .srcgrid .src{grid-template-columns:32px minmax(0,1fr);gap:10px}
.ft-src .srcgrid img{width:32px;height:32px;border-radius:7px;background:#fff;padding:4px;
             object-fit:contain;box-shadow:0 0 0 1px rgba(26,39,55,.08);
             filter:grayscale(1);opacity:.6;transition:filter .12s,opacity .12s;cursor:default}
.ft-src .srcgrid .src:hover img{filter:none;opacity:1}

.ft-aff{border-left:1px solid var(--rule);padding:0 0 0 34px;display:grid;grid-template-columns:auto 1fr;
        gap:14px;align-items:start}
.ft-aff svg{width:19px;height:19px;color:var(--ink-faint);flex:none;margin-top:2px}
.ft-aff p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.ft-aff .partners{margin-top:7px;font-size:13.5px;color:var(--ink-faint)}
.ft-legal{border-top:1px solid var(--rule);padding:18px 0 30px;display:flex;justify-content:space-between;
          align-items:center;gap:16px;flex-wrap:wrap}
.ft-legal nav{display:flex;gap:18px;flex-wrap:wrap}
.ft-legal a{color:var(--ink-soft);text-decoration:none;font-size:14.5px}
.ft-legal .cr{font-size:14px;color:var(--ink-faint)}
/* ============================================================================
   media-carousel — ONE component, used wherever an image appears.

   Controls (arrows, dots) render only when there is more than one slide, so a
   single-image block degrades to a plain picture and lights up automatically
   when more images arrive. No template change needed later.

   Size is set by the parent, not by this component: it always fills its
   container and takes its shape from --ar.
   ============================================================================ */
.mc{position:relative;border-radius:var(--mc-radius,11px);overflow:hidden;background:var(--paper-sunk)}
.mc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
          cursor:grab;touch-action:pan-x;user-select:none;scrollbar-width:none;-ms-overflow-style:none}
.mc-track::-webkit-scrollbar{display:none}
.mc-track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.mc-track img{flex:0 0 100%;width:100%;height:auto;display:block;scroll-snap-align:center;
              aspect-ratio:var(--ar,3/2);object-fit:cover;pointer-events:none}
.mc-track:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* single slide: no chrome at all */
.mc[data-n="1"] .mc-arrow,.mc[data-n="1"] .mc-dots{display:none}

.mc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
          width:var(--mc-arrow,32px);height:var(--mc-arrow,32px);border-radius:50%;border:0;padding:0;
          background:rgba(254,251,246,.94);color:var(--ink);cursor:pointer;display:grid;place-items:center;
          box-shadow:0 2px 8px rgba(26,39,55,.24);opacity:0;transition:opacity .14s,background .12s}
.mc-arrow:hover{background:#fff}
.mc-arrow svg{width:calc(var(--mc-arrow,32px) * .46);height:calc(var(--mc-arrow,32px) * .46)}
.mc-arrow.prev{left:8px}.mc-arrow.next{right:8px}
.mc:hover .mc-arrow,.mc-arrow:focus-visible{opacity:1}
.mc-arrow[disabled]{opacity:0!important;pointer-events:none}

.mc-dots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:3}
.mc-dots button{width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer;
                background:rgba(255,255,255,.65);transition:width .15s,background .15s}
.mc-dots button[aria-current=true]{background:#fff;width:16px;border-radius:3px}

/* very small instances: no room for chrome, tap the image instead */
.mc.mc-mini .mc-arrow{--mc-arrow:22px}
.mc.mc-mini .mc-dots{bottom:5px;gap:3px}
.mc.mc-mini .mc-dots button{width:4px;height:4px}
.mc.mc-mini .mc-dots button[aria-current=true]{width:10px}

/* touch: arrows are pointless, the swipe is the control */
@media (hover:none){.mc-arrow{display:none}}
/* ---------------------------------------------------------------- photo carousel
   The rules below were lifted from a reference implementation that carried its own
   token file. Ours does not define --space-*, --type-*, --shadow-* or --ease, and an
   unknown custom property makes the whole declaration invalid: the card body lost its
   padding entirely, so the caption sat flush against the picture edge and the gradient
   collapsed to a strip. The tokens are therefore declared here, on the section, and
   mapped onto this site's own palette where one exists.

   The first rule is the same trap the tour-finder documents further up article.css:
   `.art-in a:not(.cta):not(.cta2)` colours and underlines every link in an article and
   weighs (0,3,1). Every card is a link, so all nine captions rendered underlined and
   blue. */
.art-in .pcarousel a:not(.cta):not(.cta2){color:inherit;text-decoration:none;border-bottom:0}

.pcarousel{
  --space-2xs:.25rem; --space-xs:.5rem; --space-s:.75rem; --space-m:1rem;
  --space-l:1.25rem; --space-xl:1.5rem; --space-2xl:2rem; --space-3xl:2.75rem;
  --type-title-3:1.3rem; --type-subhead:.9375rem; --type-caption:.75rem;
  --weight-semibold:600; --weight-bold:700; --leading-tight:1.15; --track-title:-.018em;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 1px 3px rgba(0,0,0,.06),0 6px 16px -6px rgba(0,0,0,.10);
  --shadow-lg:0 2px 6px rgba(0,0,0,.07),0 14px 34px -10px rgba(0,0,0,.16);
  --ease:cubic-bezier(.32,.72,0,1); --dur-fast:.18s; --dur:.28s;
  --bg-elevated:var(--card,#fff); --label:var(--ink,#12222C);
}

/* Centred at the tour-finder's width, using the finder's own idiom and its own
   breakpoint: `.art-in` is page-centred, so 50% of it is the page centre, and pulling
   back half the block's own width re-centres the wider block without 100vw and the
   horizontal overflow a scrollbar then causes.

   The full-bleed version this replaces ran to the right edge of the screen. It read as
   a different component from everything above it. */
@media(min-width:1280px){
  .pcarousel{width:var(--width-wide);max-width:none;margin-left:50%;transform:translateX(-50%)}
}

/* --c-peek is how much of a card is showing, cut, at each end of the row. At 0 the
   first card starts flush and only the right-hand end is cut. Above 0 the track is
   inset by that much and a sliver stands at BOTH edges, which says "this scrolls"
   without a hint or a dot. Flip it and rerun `site.py --assets-only`; it costs
   seconds, no page is re-rendered. */
/* How many cards are in view. The reference sets this on bare `.carousel` and steps it
   down in two media queries; those rules weigh (0,1,0) and this one weighs (0,2,0), so
   the desktop count of 3.5 also applied on a phone - four 145px cards with the titles
   bursting out of them. The responsive steps are therefore restated at this weight. */
.pcarousel .carousel{--c-visible:3.5;--c-peek:0px}
@media(max-width:1024px){.pcarousel .carousel{--c-visible:2.4}}
@media(max-width:760px){.pcarousel .carousel{--c-visible:1.6;--c-gap:14px;--c-radius:16px}}
@media(max-width:520px){.pcarousel .carousel{--c-visible:1.15;--c-gap:12px}}

/* The track is a <ul> inside an article that styles lists. Restated at two classes so
   the row cannot be re-laid-out by a generic list rule, and stretched explicitly so the
   cards sit on one top edge rather than stepping down the row. */
.pcarousel .c-track{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;
  inline-size:max-content;gap:var(--c-gap)}
.pcarousel .c-slot{display:block;margin:0;padding:0}
.pcarousel .c-slot::before,.pcarousel .c-slot::marker{content:none}

/* At a phone width the title has to fit a 300px card, not a 320px one. */
@media(max-width:760px){
  .art-in .pcarousel .c-card__title{font-size:1.12rem}
  .art-in .pcarousel .c-card__body{padding:2.1rem .95rem .9rem}
  .art-in .pcarousel .c-card__eyebrow{font-size:.7rem}
}
.pcarousel .c-viewport{padding-inline:var(--c-peek)}
.pcarousel .c-track{margin-inline-start:0}

/* No edge fade. A gradient mask made the end cards look half-loaded rather than
   scrollable; the cut itself plus the one-time nudge in carousel-photo.js is the
   affordance now. */

/* ---- carousel: the reference's own rules ---- */
.carousel{--c-gap:24px;--c-visible:3.2;--c-radius:22px;position:relative;}
@media (max-width:64rem){.carousel{--c-visible:2.2}}
@media (max-width:40rem){.carousel{--c-visible:1.04;--c-gap:16px;--c-radius:16px}}
.c-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-m);
  margin-block-end:var(--space-l);}
.c-controls{display:flex;gap:var(--space-2xs);flex:0 0 auto;}
.c-arrow{inline-size:44px;block-size:44px;border-radius:50%;border:0;background:var(--bg-elevated);
  color:var(--label);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur-fast);}
.c-arrow svg{inline-size:17px;block-size:17px;}
.c-arrow:hover{background:var(--label);color:var(--bg-elevated);}
.c-arrow:active{transform:scale(.92);}
.c-arrow:disabled{opacity:.32;pointer-events:none;}
@media (hover:none) and (pointer:coarse){.c-controls{display:none}}
.carousel img{-webkit-user-drag:none;pointer-events:none;}
.carousel a,.carousel .c-card{-webkit-user-drag:none;}
.carousel .c-track,.carousel .c-card{user-select:none;}
.c-viewport{container-type:inline-size;overflow:auto hidden;padding-block:4px;scrollbar-width:none;}
.c-viewport::-webkit-scrollbar{display:none;}
.carousel:not(.c-ready) .c-viewport{scroll-snap-type:x mandatory;}
.carousel:not(.c-ready) .c-slot{scroll-snap-align:start;scroll-snap-stop:always;}
.carousel.c-ready .c-viewport{overflow:hidden;cursor:grab;touch-action:pan-y;}
.carousel.c-dragging .c-viewport{cursor:grabbing;}
.carousel.c-ready .c-track{user-select:none;will-change:transform;}
.c-track{list-style:none;margin:0;padding:0;display:flex;gap:var(--c-gap);inline-size:max-content;}
.c-slot{flex:0 0 calc((100cqw - (var(--c-visible) - 1) * var(--c-gap)) / var(--c-visible));
  max-inline-size:30rem;}
.c-card{aspect-ratio:.747/1;border-radius:var(--c-radius);overflow:hidden;position:relative;
  display:flex;flex-direction:column;background:var(--bg-elevated);box-shadow:var(--shadow-md);
  text-decoration:none;color:var(--label);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.c-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.c-card>img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  object-position:center center;}
.c-card__body{position:relative;z-index:1;margin-block-start:auto;
  padding:var(--space-l) var(--space-m) var(--space-m);color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.66) 45%,rgba(0,0,0,.34) 78%,transparent 100%);}
.c-card__eyebrow{font-size:var(--type-caption);font-weight:var(--weight-semibold);letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.8);display:block;}
.c-card__title{font-size:var(--type-title-3);font-weight:var(--weight-bold);
  line-height:var(--leading-tight);letter-spacing:var(--track-title);color:#fff;text-wrap:balance;margin:2px 0 0;}
.c-card__text{font-size:var(--type-subhead);color:rgba(255,255,255,.88);margin:3px 0 0;}



.pcarousel{margin-block:var(--space-3xl,2.75rem);}
.pc-head{margin-block-end:1.5rem;}
.pc-head .eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted,#4a6070);margin:0;}
.pc-head h2{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.2;letter-spacing:-.02em;margin:.15em 0 0;}

/* Article typography reaches inside the card: `.art-in p` carries its own margin and
   measure, and the eyebrow inherits the article's letter-spacing. Stated explicitly so
   the caption looks the same wherever the block is dropped. */
.art-in .pcarousel .c-card__title{margin:2px 0 0;max-width:none;color:#fff;
  font-size:var(--type-title-3);font-weight:var(--weight-bold);
  line-height:var(--leading-tight);letter-spacing:var(--track-title);text-wrap:balance}
.art-in .pcarousel .c-card__eyebrow{margin:0;letter-spacing:.07em;
  font-size:var(--type-caption);font-weight:var(--weight-semibold)}
.art-in .pcarousel .c-card__body{padding:2.6rem 1.15rem 1.1rem}
.art-in .pcarousel .pc-head h2{max-width:none}
/* The arrows sit above the row on the right. White on the near-white page ground with
   only a hairline shadow, they read as smudges rather than controls, so they carry a
   real border, a real shadow and a heavier stroke - and the whole control inverts on
   hover, which is unmistakable at a glance. */
.art-in .pcarousel .c-arrow{
  inline-size:46px;block-size:46px;
  color:var(--ink,#12222C);background:var(--card,#fff);
  border:1px solid var(--rule,#dbe3e8);
  box-shadow:0 1px 2px rgba(18,34,44,.06),0 6px 16px -8px rgba(18,34,44,.28);}
.art-in .pcarousel .c-arrow svg{inline-size:19px;block-size:19px;stroke-width:2.4}
.art-in .pcarousel .c-arrow:hover{
  background:var(--ink,#12222C);color:var(--card,#fff);border-color:var(--ink,#12222C);
  box-shadow:0 2px 6px rgba(18,34,44,.10),0 10px 24px -10px rgba(18,34,44,.45)}
.art-in .pcarousel .c-arrow:active{transform:scale(.94)}
.art-in .pcarousel .c-arrow:focus-visible{outline:2px solid var(--accent,#0F6C9E);outline-offset:2px}
/* Disabled still has to look like a button, just a spent one: the ring stays, the
   glyph fades. At the old flat 0.32 the whole control vanished into the page. */
.art-in .pcarousel .c-arrow:disabled{opacity:1;background:transparent;
  border-color:var(--rule,#dbe3e8);color:var(--ink-faint,#9fb0bb);box-shadow:none}
.art-in .pcarousel .c-controls{gap:8px}
/* ---- sight picker ----
   It sits at the top of its page, above the article, so it reads as the thing the page
   is for rather than as a widget dropped into an essay. The question panel is the tour
   finder's sunk panel at the same measurements, so the two tools look like one family.

   Every control has two shapes. Pills and checkboxes for a pointer; native <select>s
   for touch, because iOS and Android render those as their own picker - the finder
   makes the same swap at the same width and says why. */
.sp{margin:0 0 2.4em}
.sp-q{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:20px;
  padding:26px 24px 24px}
.sp-q h2{font-size:29px;font-weight:800;letter-spacing:-.025em;line-height:1.13;
  margin:0 0 7px;text-wrap:balance}
.sp-lead{margin:0 0 18px;color:var(--ink-soft);font-size:16.5px;max-width:64ch}

/* what to see - pills */
.sp-picks{display:flex;flex-wrap:wrap;gap:8px}
.sp-pick{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--rule);background:var(--card);border-radius:999px;
  padding:8px 14px 8px 11px;font-size:15px;font-weight:600;line-height:1.2;
  transition:background .13s,border-color .13s,color .13s}
.sp-pick:hover{border-color:var(--accent)}
.sp-pick input{position:absolute;opacity:0;pointer-events:none}
.sp-pick .sp-i{width:17px;height:17px;flex:none;opacity:.72}
.sp-pick:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--card)}
.sp-pick:has(input:checked) .sp-i{opacity:1}
.sp-pick:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* the month, all twelve at once - nothing to open first */
.sp-mrow{margin-top:19px;padding-top:19px;border-top:1px solid var(--rule)}
.sp-mlab{display:block;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft);margin-bottom:9px}
.sp-ms{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.sp-m{font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:9px 4px;
  border:1px solid var(--rule);background:var(--card);color:var(--ink);
  border-radius:10px;transition:background .13s,border-color .13s,color .13s}
.sp-m:hover{border-color:var(--accent)}
.sp-m[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--card)}

/* the touch pair, hidden on a pointer device */
.sp-sel{display:none}
.sp-chips{display:none}

/* results */
.sp-out{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.sp-card{margin:0}
.sp-h{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.sp-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);
  color:var(--card);display:grid;place-items:center;font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.sp-h .sp-i{width:19px;height:19px;flex:none;color:var(--accent)}
.sp-h b{font-size:18px;font-weight:700;letter-spacing:-.015em}
.sp-season{display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--ink-soft)}
.sp-mark{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;background:var(--ink-faint)}
.sp-yes .sp-mark{background:#1E8E5A}
.sp-yes .sp-mark::before{content:"\2713"}
.sp-no .sp-mark{background:#C2301A}
.sp-no .sp-mark::before{content:"\2717"}
.sp-no .sp-season{color:var(--ink-faint)}
.sp-no > .compact{opacity:.72}
.sp-empty{margin:18px 0 0;color:var(--ink-faint);font-size:15px}
/* Before the script runs every card is visible, which is the correct no-JS page. */
.sp:not(.sp-ready) .sp-empty{display:none}

/* Touch. The same 760px the finder swaps at, so the whole page changes shape once. */
@media(max-width:760px){
  .sp-q{padding:20px 16px 18px;border-radius:16px}
  .sp-q h2{font-size:24px}
  .sp-picks,.sp-ms{display:none}
  .sp-sel{display:grid;gap:5px}
  .sp-sel > span{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
    font-weight:700;color:var(--ink-soft)}
  .sp-sel select{font:inherit;font-size:16px;font-weight:600;color:var(--ink);
    padding:12px 14px;border:1px solid var(--rule);border-radius:12px;
    background:var(--card);width:100%;-webkit-appearance:menulist}
  .sp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
  .sp-chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;
    font-weight:600;cursor:pointer;background:var(--ink);color:var(--card);border:0;
    border-radius:999px;padding:8px 12px}
  .sp-chip span{font-size:15px;line-height:1;opacity:.7}
  .sp-mrow{margin-top:16px;padding-top:16px}
  .sp-mlab{display:none}
}
/* ============================================================================
   Interactive infographic. A commissioned bitmap plus numbered hotspots
   positioned in percentages, so they hold at any width.

   The tooltip is INSTANT: no transition, no delay, no animation. A teaching
   overlay that fades in reads as sluggish, and the reader is comparing several
   markers in quick succession.
   ============================================================================ */
/* NOT overflow:hidden. A tooltip near an edge must be able to leave the figure,
   so the rounding lives on the image and the legend instead of on a clipping box. */
.ig{position:relative;border:1px solid var(--rule);border-radius:var(--radius-card);
    background:var(--paper);margin:1.6em 0}
.ig-fig{position:relative;display:block;line-height:0}
.ig-fig img{display:block;width:100%;height:auto;
            border-radius:calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0}
.ig-legend{border-radius:0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px)}

.hs{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
    border:2px solid #fff;background:var(--ink);color:#fff;font:700 14px/1 var(--font-body);
    font-variant-numeric:tabular-nums;display:grid;place-items:center;cursor:pointer;padding:0;
    box-shadow:0 1px 4px rgba(26,39,55,.35);z-index:2;
    transition:background .1s,transform .1s}
.hs:hover,.hs[aria-expanded="true"]{background:var(--accent);transform:translate(-50%,-50%) scale(1.12)}
.hs:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
/* a quiet pulse ring, once, so the reader notices the markers are live */
.hs::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ink);
           opacity:0;animation:hsr 2.4s ease-out 3}
@keyframes hsr{0%{opacity:.5;transform:scale(.75)}60%,100%{opacity:0;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.hs::after{animation:none}.hs{transition:none}}

.tip{position:absolute;z-index:40;width:min(300px,72vw);background:var(--ink);color:#fff;
     border-radius:11px;padding:12px 14px;box-shadow:0 8px 28px -8px rgba(26,39,55,.55);
     transform:translate(-50%,0);pointer-events:none;
     display:none}                      /* instant: shown by display, never faded */
.tip[data-on]{display:block}
.tip b{display:block;font-size:14.5px;line-height:1.3;margin-bottom:5px}
.tip span{display:block;font-size:13.5px;line-height:1.5;color:#c8d1dd}
.tip::before{content:"";position:absolute;left:var(--arrow,50%);margin-left:-7px;border:7px solid transparent}
.tip[data-side="below"]::before{top:-14px;border-bottom-color:var(--ink)}
.tip[data-side="above"]::before{bottom:-14px;border-top-color:var(--ink)}

/* Static value labels. Some graphics are unreadable without their numbers, and a
   number you must hover to see is a number most readers never see. */
.val{position:absolute;transform:translate(0,-50%);z-index:1;white-space:nowrap;
     font:700 13px/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink);
     background:rgba(254,251,246,.86);padding:2px 6px;border-radius:5px}
.val.hi{color:var(--accent)}
@media (max-width:560px){.val{font-size:11px;padding:1px 4px}}

.ig-legend{border-top:1px solid var(--rule-soft);padding:14px 18px 16px;background:var(--card)}
.ig-legend h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
              margin:0 0 10px;font-weight:700}
.ig-legend ol{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.ig-legend li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;align-items:start}
.ig-legend b{width:22px;height:22px;border-radius:50%;background:var(--paper-sunk);
             border:1px solid var(--rule);color:var(--ink-soft);display:grid;place-items:center;
             font-size:12px;font-variant-numeric:tabular-nums}
.ig-legend li.on b{background:var(--accent);border-color:var(--accent);color:#fff}
.ig-legend span{color:var(--ink-soft);line-height:1.4;padding-top:1px}
.ig-legend li.on span{color:var(--ink)}
.ig-note{font-size:13.5px;color:var(--ink-faint);line-height:1.5;margin:12px 0 0;
         padding-top:11px;border-top:1px solid var(--rule-soft)}

@media (max-width:560px){
  .hs{width:26px;height:26px;font-size:12.5px}
  .tip{width:min(260px,80vw)}
}

.lsw{position:relative}
.lsw summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  -webkit-user-select:none;user-select:none}
.lsw summary::-webkit-details-marker{display:none}
.lsw summary svg{width:14px;height:14px}
.lsw summary .chev{width:12px;height:12px;transition:transform .18s ease}
.lsw[open] summary .chev{transform:rotate(180deg)}
.lsw-m{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;z-index:80;
  background:var(--paper,#fff);border:1px solid var(--rule,#e4ddd1);border-radius:16px;
  box-shadow:0 14px 40px rgba(26,39,55,.18);padding:7px;display:flex;flex-direction:column}
.lsw-m a,.lsw-m .cur,.lsw-m button{display:flex;align-items:center;gap:10px;padding:8px 11px;
  border-radius:10px;font-size:13.5px;color:var(--ink,#1A2737);text-decoration:none;
  text-shadow:none;white-space:nowrap;border:0;background:none;font-family:inherit;
  width:100%;text-align:left;cursor:pointer}
.lsw-m a:hover,.lsw-m button:hover{background:var(--card,#f4efe6)}
.lsw-cur{min-width:250px}
.lsw-cur em{font-style:normal;margin-left:auto;padding-left:14px;font-size:11.5px;
  color:var(--ink-faint,#8a8274);font-variant-numeric:tabular-nums;white-space:nowrap}
.lsw-cur button>svg{width:14px;height:14px;flex:none;margin-left:10px;color:var(--accent,#C97B2D)}
.lsw-cur button[aria-current]{font-weight:800}
.lsw-m .cur{font-weight:700}
.lsw-m .cur svg{width:14px;height:14px;margin-left:auto;color:var(--accent,#C97B2D)}
.lsw-m i{font-style:normal;font-weight:800;font-size:10.5px;letter-spacing:.04em;
  width:24px;flex:none;color:var(--ink-faint,#8a8274)}
.lsw-flat{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 0;font-size:13.5px}
.lsw-flat a{color:inherit;text-decoration:none;opacity:.75}
.lsw-flat a:hover{opacity:1;text-decoration:underline}
.lsw-flat b{font-weight:800}
/* ---- mobile drawer: full screen, one left edge, settled bottom bar ---- */
.drawer{position:fixed;top:66px;left:0;right:0;bottom:0;height:auto;
  display:none;flex-direction:column;background:var(--paper);
  border-top:1px solid var(--rule);z-index:70;overscroll-behavior:contain}
.drawer[data-open]{display:flex;animation:dw-in .24s ease}
@keyframes dw-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.drawer[data-open]{animation:none}}
body.dw-open{overflow:hidden}
.dw-scroll{flex:1;overflow-y:auto;padding:10px 26px 24px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.dw-scroll::-webkit-scrollbar{display:none}
.drawer details{border-bottom:1px solid var(--rule-soft)}
.drawer details:last-child{border-bottom:0}
.drawer summary{display:flex;align-items:center;justify-content:space-between;
  padding:19px 0;font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary svg{width:17px;height:17px;flex:none;color:var(--ink-faint);
  transition:transform .2s ease}
.drawer details[open] summary svg{transform:rotate(180deg)}
.dw-links{padding:2px 0 16px}
.drawer .dw-links a{display:block;padding:11.5px 0;font-size:15.5px;font-weight:500;
  color:var(--ink-soft);text-decoration:none;border:0}
.drawer .dw-links a.all{color:var(--accent);font-weight:700;padding-top:14px}
.dw-foot{flex:none;border-top:1px solid var(--rule);background:var(--card,#f7f2e9)}
/* burger becomes a clean X while open */
.burger span{transition:transform .2s ease,opacity .15s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* the bar above an open drawer is always solid, hero or not */
.site-header.dw-solid{background:var(--paper);border-bottom-color:var(--rule)}
.site-header.dw-solid .brand b{color:var(--ink);text-shadow:none}
.site-header.dw-solid .brand svg path{fill:var(--ink);stroke:var(--ink)}
.site-header.dw-solid .burger{background:var(--card);border-color:var(--rule)}
.site-header.dw-solid .burger span{background:var(--ink)}

/* ---- full-screen pickers (language, currency) ---- */
.picker{position:fixed;inset:0;z-index:100;background:var(--paper);
  display:flex;flex-direction:column;animation:pk-in .22s ease}
.picker[hidden]{display:none}
@keyframes pk-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.picker{animation:none}}
.pk-top{display:flex;align-items:center;gap:12px;padding:20px 26px;
  border-bottom:1px solid var(--rule);flex:none}
.pk-top svg{width:20px;height:20px;color:var(--accent);flex:none}
.pk-top b{font-size:19px;letter-spacing:-.01em}
.pk-x{margin-left:auto;border:1px solid var(--rule);background:var(--card);
  border-radius:999px;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--ink)}
.pk-x svg{width:16px;height:16px;color:inherit}
.pk-list{flex:1;overflow:hidden;padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:center}
.pk-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  flex:1 1 0;min-height:42px;max-height:70px;padding:0 14px;
  border:0;border-radius:14px;background:none;cursor:pointer;
  font-size:16.5px;font-weight:600;color:var(--ink);text-decoration:none}
.pk-row:hover{background:var(--card)}
.pk-row[aria-current]{font-weight:800}
.pk-row i{font-style:normal;font-weight:800;font-size:12px;width:38px;height:38px;
  flex:none;display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--card);border:1px solid var(--rule);color:var(--ink-soft);
  letter-spacing:.02em}
.pk-row span{flex:1;min-width:0}
.pk-row em{font-style:normal;margin-left:12px;font-size:12.5px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.pk-row>svg{width:16px;height:16px;color:var(--accent);flex:none;margin-left:10px}
.pk-row[aria-current]>svg{margin-left:auto}
.pk-row em+svg{margin-left:10px}
/* the two settings rows at the drawer's foot */
.dw-foot{padding:10px 14px calc(12px + env(safe-area-inset-bottom))}
.dw-set{display:flex;align-items:center;gap:13px;width:100%;padding:15px 12px;
  border:0;background:none;border-radius:14px;cursor:pointer;text-align:left;
  font-size:15.5px;color:var(--ink)}
.dw-set:hover{background:var(--paper)}
.dw-set>svg:first-child{width:19px;height:19px;color:var(--accent);flex:none}
.dw-set>svg:last-child{width:15px;height:15px;color:var(--ink-faint);flex:none;margin-left:auto}
.dw-set .s-l{font-weight:700}
.dw-set .s-v{color:var(--ink-faint);font-weight:600;margin-left:auto}
.dw-set .s-v+svg{margin-left:10px}
.dw-set+.dw-set{border-top:1px solid var(--rule-soft)}
.pill-btn{cursor:pointer;background:none;font:inherit;font-size:12px}
body.pk-open{overflow:hidden}

/* ---- homepage tools strip ----
   The box, the head and the card row are article.css's, further down the bundle under
   "Werkzeugleiste": it already gives the strip the tour finder's own eyebrow, heading
   and lead, and the finder's sunk panel. This file loads AFTER article.css, so every
   rule repeated here silently won - which is how the strip ended up a white card with
   its three head lines on one baseline while the finder beside it looked nothing like
   it. Only what article.css does not cover belongs here. */
.ht-head b{display:flex;align-items:center;gap:10px}
.ht-head .ht-mark{width:26px;height:26px;flex:none;color:var(--accent,#0F6C9E)}
.ht-grid{display:grid;grid-template-columns:repeat(4,1fr)}
/* Two classes plus the element, because `.art-in a:not(.cta):not(.cta2)` weighs (0,3,1)
   and colours and underlines every link in an article. A bare `.ht-grid a` loses to it
   and all four tool labels rendered blue and underlined - the same trap the tour finder
   and the photo carousel each have a rule for. */
.htools .ht-grid a,.art-in .htools .ht-grid a{text-decoration:none;border-bottom:0;
  color:var(--ink,#12222C);font-size:12.5px;font-weight:700;line-height:1.2;
  display:flex;align-items:center;gap:11px;padding:11px 12px;
  transition:transform .15s ease,box-shadow .15s ease}
.ht-grid a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(26,39,55,.10)}
.ht-grid i{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:color-mix(in srgb,var(--accent,#C97B2D),#fff 86%);
  color:var(--accent,#C97B2D)}
.ht-grid i svg{width:17px;height:17px}
.ht-grid span{flex:1;min-width:0}
.ht-grid .ht-a{width:13px;height:13px;flex:none;color:var(--ink-faint,#8a8274)}
@media(max-width:900px){.ht-grid{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.ht-grid{grid-template-columns:1fr 1fr}
  .ht-grid a{padding:11px 10px;font-size:12.5px}}

/* ---- sticky tour bar. Rebuilt 2026-09-07 to the owner's own layout, on this site's
   palette instead of the reference site's night card: a white card on the page's ground,
   with the roof red doing the only selling on it.

   The layout is his, drawn as a grid rather than nested rows, so each part sits where he
   put it and nothing depends on the order the renderer emits them in:

       title .................... price       price right, on the title's first line
       picture   badge           button       badge and rating stack beside the picture
                 rating
       reviews  ·  duration  ·  cancellation  one line, spread across the full width

   That last line is space-between, not a row of separators: the owner asked for the width
   to be used with bigger gaps, not bigger text. Two facts or four, it still fills. */
/* The container is a positioner and nothing else. It used to carry its own white
   panel - background, border and radius - which drew a second frame around the card
   that already has one, and the two rounded rectangles read as a mistake. The card is
   the whole visual now; the shadow moves onto it so the lift belongs to the thing
   being lifted. `overflow:visible` so the close button can hang over the corner. */
.tourbar{position:fixed;left:0;right:0;bottom:0;z-index:60;overflow:visible;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom)) 14px;
  background:none;border:0;color:var(--ink)}
.tourbar .tb-card{box-shadow:0 -6px 30px rgba(18,34,44,.18)}
.tourbar[hidden],.tb-pill[hidden]{display:none!important}
.tourbar{animation:tb-in .22s ease-out}
@keyframes tb-in{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.tourbar{animation:none}}
/* The card is the `.compact` offer block, to the same measurements: the sunk panel,
   the 82px square with its rating beneath, the title column, and price over button on
   the right. It used to be a component of its own - 58px thumbnail, its own type scale,
   its own badge row - which read as an advert bolted onto the page rather than as the
   same offer the article already shows. Owner's decision, 2026-09-10. */
.tb-card{display:grid;
  grid-template-columns:82px minmax(0,1fr) fit-content(46%);
  grid-template-areas:"im title price" "im md cta" "im meta cta";
  column-gap:16px;row-gap:6px;align-items:center;
  background:var(--paper-sunk);border:1px solid var(--rule);
  border-radius:var(--radius-card);padding:14px;
  text-decoration:none;color:var(--ink)}
.tb-title{grid-area:title;align-self:end;font-size:16px;font-weight:700;line-height:1.3;
  color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.tb-im{grid-area:im;align-self:center;width:82px;height:82px;border-radius:9px;
  overflow:hidden;background:var(--rule-soft)}
.tb-im img{width:100%;height:100%;object-fit:cover;display:block}
.tb-md{grid-area:md;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-b{background:var(--badge);color:var(--badge-ink);font-size:10.5px;font-weight:700;
  letter-spacing:.02em;padding:3px 7px;border-radius:999px;white-space:nowrap}
.tb-r{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.tb-star{color:var(--star)}
.tb-meta{grid-area:meta;align-self:start;display:flex;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-soft)}
.tb-p{grid-area:price;align-self:end;text-align:right;white-space:nowrap;line-height:1.2;
  font-size:19px;font-weight:800;color:var(--ink)}
.tb-p i{display:block;font-style:normal;font-size:11px;font-weight:600;
  color:var(--ink-soft);margin:0 0 2px}
.tb-cta{grid-area:cta;align-self:start;justify-self:end;background:var(--cta);
  color:var(--cta-ink);font-size:13.5px;font-weight:700;padding:10px 16px;
  border-radius:999px;white-space:nowrap;text-align:center;margin-top:4px}
@media(max-width:560px){
  .tb-card{grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:"im title" "im md" "price cta" "meta meta";column-gap:12px}
  .tb-im{width:64px;height:64px}
  .tb-title{font-size:14.5px}
  .tb-p{text-align:left;align-self:center}
  .tb-cta{justify-self:stretch;margin-top:0}
}
.tb-t{color:var(--teal)}
/* A proper button, sitting on the card's top-right corner and overhanging it by about
   a third of itself - the shape a dismissable panel is expected to have. It was a bare
   glyph tucked inside the padding, which read as part of the card's content. The card
   is a link, so this sits above it in the stack and stops the click reaching it. */
.tb-x{position:absolute;top:0;right:6px;z-index:2;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 2px 8px rgba(18,34,44,.16);
  transition:background .15s ease,color .15s ease,transform .15s ease}
.tb-x:hover{background:var(--ink);color:var(--card);border-color:var(--ink)}
.tb-x:active{transform:scale(.92)}
.tb-x svg{width:13px;height:13px}
@media(min-width:900px){.tb-x{top:-17px;right:-13px}}
.tb-pill{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  border:0;background:var(--ink);color:#fff;font-weight:700;font-size:12.5px;padding:11px 17px;
  border-radius:999px;cursor:pointer;box-shadow:0 8px 24px rgba(18,34,44,.28)}
body.tb-open{padding-bottom:150px}
@media(min-width:901px){
  .tourbar{left:auto;right:22px;bottom:22px;width:500px;padding:0;
    background:none;border:0;box-shadow:none}
  .tourbar .tb-card{box-shadow:0 16px 44px rgba(18,34,44,.22)}
  body.tb-open{padding-bottom:0}
}

.smap-lang{margin-top:34px}
.smap-lang h2{display:flex;align-items:baseline;gap:10px;font-size:24px;
  border-bottom:1px solid var(--rule,#e4ddd1);padding-bottom:8px}
.smap-lang h2 i{font-style:normal;font-size:13px;font-weight:400;color:var(--ink-faint,#8a8274)}
.smap-lang .hubcol h3{display:flex;align-items:baseline;gap:8px;font-size:17px;margin:18px 0 10px}
.smap-lang .hubcol h3 i{font-style:normal;font-size:12px;font-weight:400;color:var(--ink-faint,#8a8274)}
.smap-lang .hubcol h3 a{color:inherit;text-decoration:none}
.smap-lang .hubcol h3 a:hover{text-decoration:underline}
.smap-jump{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px}
.smap-jump a{color:var(--ink-soft,#5a5348);text-decoration:none}
.smap-jump a:hover{text-decoration:underline}

.pic{position:relative}
.pic img{display:block;width:100%;height:auto;border-radius:10px}
/* The caption, set into the lower right of the plate. Restraint is the whole effect:
   small, letter-spaced, near-white, and carried on a gradient that only darkens the
   corner it sits in rather than a box drawn around the words. A panel would look like
   a UI label; this looks like a caption a picture editor set. */
.pic{isolation:isolate}
.pic .pcap{position:absolute;right:0;bottom:0;left:0;pointer-events:none;
  display:flex;justify-content:flex-end;
  padding:46px 13px 12px;border-radius:0 0 10px 10px;
  background:linear-gradient(to top,rgba(10,18,24,.8) 0%,rgba(10,18,24,.36) 46%,transparent 100%);
  color:rgba(255,255,255,.86);font-size:16px;font-weight:400;letter-spacing:.045em;
  line-height:1.35;text-align:right;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.pic .credit{position:absolute;right:8px;bottom:8px;background:rgba(18,22,28,.62);
  color:#fff;font-size:11.5px;padding:3px 7px;border-radius:5px;backdrop-filter:blur(3px)}
/* When both are present the credit sits above the caption rather than on top of it. */
.pic .pcap:not(:empty) ~ .credit{bottom:34px}
.pic .credit a{color:#fff;text-decoration:none}
/* carousel.css owns the component. Only the things that are actually different
   about a tour thumbnail belong here - a square crop and a tighter radius. The
   track, the dots and the arrows were duplicated here once, and the copy set
   `left:0;right:0` on the dots while leaving carousel.css's
   `transform:translateX(-50%)` in force, which shoved them off to the left. */
.othumb .mc{border-radius:12px;--ar:1}
/* A card that names its own picture puts a bare <img> here, with no carousel
   around it. The old `.othumb img` rule was removed when the carousel took over
   sizing, so that image had nothing constraining it and rendered at its natural
   width, bursting the 140px column. Direct child only, so it cannot reach the
   carousel slides, which carousel.css already sizes. */
.othumb>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:12px}

.hubwrap{max-width:var(--container);margin:0 auto;padding:26px var(--gutter) 80px}
.hubhead{max-width:660px;margin:0 0 34px}
.hubhead h1{font-size:clamp(30px,5vw,44px);line-height:1.1;letter-spacing:-.025em;margin:0 0 12px}
.hubhead p{color:var(--ink-soft);font-size:18px;margin:0}
.hubhead .cnt{margin-top:12px;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);font-weight:700}
.huboffer{max-width:var(--measure);margin:0 0 34px}
.huboffer .offer{margin:0}
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:30px 34px;align-items:start}
.hubcol h2{font-size:15px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1px solid var(--rule);padding-bottom:9px;margin:0 0 12px;display:flex;
  justify-content:space-between;align-items:baseline}
.hubcol h2 i{font-style:normal;font-size:13px;color:var(--ink-faint);opacity:.7}
.hubcol ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.hubcol li a{display:block;font-weight:700;color:var(--ink);text-decoration:none;font-size:16.5px;line-height:1.3}
.hubcol li a:hover{color:var(--accent)}
.hubcol li span{display:block;color:var(--ink-soft);font-size:13.5px;line-height:1.45;margin-top:3px}
.hnav .mpanel .mhead,.dw-links .mhead{display:block;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  padding:6px 0 4px;pointer-events:none}
.hnav .mpanel .mrule,.dw-links .mrule{display:block;height:1px;background:var(--rule);
  margin:8px 0 6px}
.hnav .mpanel a.all{color:var(--accent);font-weight:700;
  border-top:1px solid var(--rule-soft);margin-top:5px;padding-top:9px}

/* --- shell additions the mockups carried inline --- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
.crumbs{max-width:var(--container);margin:0 auto;padding:14px var(--gutter) 0;display:flex;
  gap:7px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--ink-faint)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs svg{width:14px;height:14px;flex:none;opacity:.55}
.crumbs [aria-current]{color:var(--ink)}
.hnav .mgroup{position:relative}
.hnav .mgroup>button{background:none;border:0;font:inherit;cursor:pointer;color:inherit;
  display:inline-flex;align-items:center;gap:2px;padding:8px 5px;white-space:nowrap}
/* home.css sets white-space and the over-hero white on `.hnav span`, but every
   group label is a <button>. Neither rule was reaching the navigation. */
.site-header:not(.solid) .hnav .mgroup>button{color:#fff;
  text-shadow:0 1px 10px rgba(10,16,24,.5)}
.hnav .mgroup>button svg{width:12px;height:12px;transition:transform .15s}
.hnav .mgroup[data-open] >button svg{transform:rotate(180deg)}
.hnav .mpanel{display:none;position:absolute;top:100%;left:-14px;min-width:250px;background:var(--card);
  border:1px solid var(--rule);border-radius:12px;padding:9px;box-shadow:0 16px 40px rgba(20,25,35,.13);z-index:60}
.hnav .mgroup[data-open] .mpanel{display:grid}
.hnav .mpanel a{padding:7px 11px;border-radius:7px;text-decoration:none;color:var(--ink);font-size:15.5px}
.hnav .mpanel a:hover{background:var(--paper-sunk);color:var(--accent)}
.drawer details a{display:block;padding:9px 14px;color:var(--ink-soft);text-decoration:none}
.srcgrid .src{position:relative;display:inline-flex}
.srcgrid .tip{display:none;position:absolute;bottom:130%;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:9px 12px;border-radius:9px;width:max-content;max-width:250px;
  font-size:13px;line-height:1.45;z-index:70}
.srcgrid .tip i{display:block;opacity:.72;font-style:normal}
.srcgrid .src:hover .tip,.srcgrid .src:focus .tip{display:block}
.ph-img{aspect-ratio:3/2;background:var(--paper-sunk);border-radius:10px}
.ph-img.mini{aspect-ratio:1}
.ph-graphic{aspect-ratio:16/10;background:var(--paper-sunk);border-radius:12px;display:grid;
  place-items:center;color:var(--ink-faint);font-size:14px}

@media (max-width:900px){
.frame{max-width:390px;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
:root{--gutter:20px}
.burger{display:flex}
.hnav, .hutil{display:none}
.hero{margin-top:-66px}
.hero-bg img{object-position:72% 50%}
.hero-in{padding-bottom:64px}
.hero h1{font-size:38px}
.cta, .cta2{width:100%}
.scroll, .hero-cred{display:none}
.glance-in{grid-template-columns:1fr 1fr;gap:18px;padding:22px var(--gutter)}
.glance-in>div{padding-inline:0;border-left:0;
          border-top:1px solid rgba(255,255,255,.16);padding-block:14px}
.glance-in>div:nth-child(-n+2){border-top:0;padding-top:0}
.glance b{font-size:23px}
.glance .gl-ic svg{width:56px;height:56px}
.secs-in{grid-template-columns:1fr}
.sec{grid-template-columns:1fr}
.sec-img img{aspect-ratio:16/9}
.secs h2{font-size:24px}
.secs{padding-top:34px}
.pcard{grid-template-columns:1fr;gap:14px}
.trust{grid-template-columns:1fr}
.pcard-f{border-left:0;padding-left:0;border-top:1px solid var(--rule-soft);padding-top:14px}
.pick h2{font-size:22px}
.frow{flex-direction:column;gap:2px}
.frow dd{text-align:left}
.frow dt{max-width:none}
.tw{display:none}
.stack{display:block}
.myth>li{grid-template-columns:1fr;gap:7px}
.vd{width:auto;justify-self:start}
.fig img{aspect-ratio:4/5;object-fit:cover}
.fig > .pic + figcaption{
  position:static;max-width:none;margin-top:10px;padding:0;border-radius:0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;color:var(--ink-soft);font-size:16px;line-height:1.5}
.fig > .pic .credit{right:8px;left:auto}
.offer{grid-template-columns:1fr;padding:14px}
.othumb .mc{--ar:16/9}
.othumb>img{aspect-ratio:16/9}
.offer h3{font-size:18px}
.bene li{font-size:15.5px}
.buy{grid-template-columns:1fr;align-items:stretch;gap:12px}
.buy .cta{width:100%;justify-content:center;white-space:normal;text-align:center;
                              padding-inline:16px}
.price.sm{font-size:14.5px}
.compact{grid-template-columns:78px minmax(0,1fr);
  grid-template-areas:"media text" "price cta";column-gap:14px;row-gap:12px;
  align-items:start}
.compact.noimg{grid-template-columns:1fr;
  grid-template-areas:"text" "cta"}
.compact img{width:78px;height:78px}
.compact > .cmedia{grid-area:media}
.compact > .cmedia, .compact .price{
  justify-self:center;text-align:center}
.compact > .side{display:contents}
.compact .price{grid-area:price;align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:1px}
.compact .cta{grid-area:cta;justify-self:stretch;align-self:center;
  width:100%;white-space:nowrap}
.compact .cfeat{display:none}
.compact > div:not(.cmedia):not(.side) p{display:none}
.compact .price b{font-size:22px}
.compact .cta{white-space:nowrap}
.cmp .grid{grid-template-columns:1fr}
.opt .foot .cta{white-space:nowrap}
.art-h{font-size:var(--size-h1-sm)}
.faq h2{font-size:var(--size-h2-sm)}
.faq summary{font-size:16px}
.faq .a{font-size:16px;padding-right:0}
.pc{grid-template-columns:1fr;gap:16px}
.cc{grid-template-columns:1fr}
.fa{grid-template-columns:1fr;gap:13px}
.map, .info{grid-template-columns:1fr}
.pair, .gal{grid-template-columns:1fr}
.sz .n{font-size:11px}
.art-in h2.ah{font-size:var(--size-h2-sm);margin:1.75em 0 .45em}
.art-in h2.ah::before{position:static;display:block;
  width:11px;height:21px;margin:0 0 .34em;
  -webkit-mask-size:11px 21px;mask-size:11px 21px}
.trl-i{grid-template-columns:1fr;gap:11px;padding:11px}
.trl-pic img{aspect-ratio:16/9}
.trl-p{flex-direction:row;align-items:center;
  justify-content:space-between;padding:0;width:100%}
.stp{padding-left:28px}
.stp-f li{width:100%}
.cdata .tw, .sheet .tw{display:block;margin:0;padding:0}
.cdata table, .sheet table{min-width:480px}
.cb{grid-template-columns:1fr auto;grid-template-areas:"l v" "t t";gap:5px 10px}
.cbl{grid-area:l}
.cbv{grid-area:v}
.cbt{grid-area:t}
.ds td:first-child{width:auto}
.maplf-map{height:320px}
.ft-src .srcgrid{grid-template-columns:minmax(0,1fr)}
.ft-top{grid-template-columns:1fr;gap:20px;align-items:start}
.fbrand{padding:0}
.ft-blurb{border-left:0;padding-left:0}
.ft-cols{grid-template-columns:1fr 1fr;gap:22px}
.ft-mid{grid-template-columns:1fr;gap:20px}
.ft-src{padding:0}
.ft-aff{border-left:0;border-top:1px solid var(--rule);padding:18px 0 0}
.ft-legal{flex-direction:column;align-items:flex-start;gap:12px}
}