/* ============================================================
     NITRA.NET — Immersive Editorial Scroll Story
     A long-form, National-Geographic-style journey through
     Slovakia: castles, mountains, business, culture.
     All imagery is CSS gradients / inline SVG — no external assets.
     ============================================================ */

  :root{
    /* ---- palette: dawn (hero) ---- */
    --dawn-1:#ffd9a0;
    --dawn-2:#ff9466;
    --dawn-3:#7a3d68;
    --dawn-4:#1c1030;

    /* ---- palette: dusk / castles ---- */
    --dusk-1:#e88a4e;
    --dusk-2:#a13b52;
    --dusk-3:#4a2049;
    --dusk-4:#170c22;

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

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

    /* ---- palette: folk / culture ---- */
    --folk-1:#f4e0ad;
    --folk-2:#d98a3d;
    --folk-3:#9c2b3a;
    --folk-4:#3a1220;

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

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

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

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

  html{
    scroll-behavior:smooth;
    scroll-snap-type:y proximity;
  }

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

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

  a{color:inherit;}

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

  /* ---------------- NAV ---------------- */
  .site-nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:clamp(.9rem,2vw,1.4rem) var(--gutter);
    background:linear-gradient(to bottom, rgba(10,8,14,.55), rgba(10,8,14,0));
    pointer-events:none;
  }
  .site-nav *{pointer-events:auto;}
  .nav-mark{
    font-family:var(--serif);
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:.06em;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
  }
  .nav-mark em{font-style:normal;color:var(--dawn-1);}
  .nav-links{
    display:flex;
    gap:clamp(1rem,2.6vw,2.2rem);
    list-style:none;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .nav-links a{
    text-decoration:none;
    color:rgba(255,255,255,.82);
    border-bottom:1px solid transparent;
    padding-bottom:3px;
    transition:border-color .25s ease, color .25s ease;
  }
  .nav-links a:hover{color:#fff;border-color:var(--dawn-1);}
  .nav-links{display:none;}
  @media(min-width:720px){ .nav-links{display:flex;} }

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

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

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

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

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

  .headline{
    font-family:var(--serif);
    font-weight:700;
    line-height:1.03;
    letter-spacing:-.01em;
    font-size:clamp(2.4rem,6.4vw,5.4rem);
    max-width:14ch;
    margin-bottom:1.4rem;
  }

  .lede{
    font-size:clamp(1rem,1.5vw,1.25rem);
    line-height:1.7;
    max-width:52ch;
    font-weight:400;
  }
  .lede + .lede{margin-top:1.1rem;}
  .lede::first-letter{
    font-family:var(--serif);
    font-size:2.6em;
    float:left;
    line-height:.82;
    padding-right:.1em;
    padding-top:.04em;
    font-weight:700;
  }

  .pull{
    font-family:var(--serif);
    font-style:italic;
    font-size:clamp(1.15rem,2vw,1.6rem);
    line-height:1.5;
    max-width:34ch;
    border-left:2px solid currentColor;
    padding-left:1.2rem;
    opacity:.92;
  }

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

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

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

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

  /* ============================================================
     CASTLES — dusk
     ============================================================ */
  .castles{
    background:linear-gradient(180deg, var(--dusk-1) 0%, var(--dusk-2) 38%, var(--dusk-3) 72%, var(--dusk-4) 100%);
    color:var(--folk-1);
  }
  .castles .chapter-kicker{color:var(--dusk-1);}
  .castles .headline{color:#fff;}
  .castles .lede{color:rgba(255,240,225,.88);}
  .castles .pull{color:var(--dawn-1);}

  /* ============================================================
     MOUNTAINS — alpine
     ============================================================ */
  .mountains{
    background:linear-gradient(180deg, var(--alp-1) 0%, var(--alp-2) 40%, var(--alp-3) 75%, var(--alp-4) 100%);
    color:var(--alp-4);
  }
  .mountains .chapter-kicker{color:var(--alp-4);}
  .mountains .headline{color:var(--alp-4);}
  .mountains .lede{color:#1e3652;}
  .mountains .pull{color:#0d2036;}
  .mountains .chapter-num{color:var(--alp-4);opacity:.14;}
  .mountains .stat b{color:var(--alp-4);}
  .mountains .stat span{color:#2a4a68;}
  .mountains .scroll-cue,.mountains .nav-links a{color:#1e3652;}

  /* ============================================================
     BUSINESS — steel
     ============================================================ */
  .business{
    background:linear-gradient(180deg, var(--biz-1) 0%, var(--biz-2) 42%, var(--biz-3) 78%, var(--biz-4) 100%);
    color:#eef3f8;
  }
  .business .chapter-kicker{color:#dfe8f0;}
  .business .headline{color:#fff;}
  .business .lede{color:#e7edf3;}
  .business .pull{color:var(--dawn-1);}

  /* ============================================================
     CULTURE — folk
     ============================================================ */
  .culture{
    background:linear-gradient(180deg, var(--folk-1) 0%, var(--folk-2) 42%, var(--folk-3) 78%, var(--folk-4) 100%);
    color:#fff;
  }
  .culture .chapter-kicker{color:var(--folk-1);}
  .culture .headline{color:#fff;}
  .culture .lede{color:#fdf1e2;}
  .culture .pull{color:var(--folk-1);}

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

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

  /* ============================================================
     FOOTER
     ============================================================ */
  .site-footer{
    background:var(--ink);
    color:var(--cream);
    padding:clamp(3rem,6vw,5rem) var(--gutter) 2rem;
    scroll-snap-align:start;
  }
  .footer-top{
    display:flex;
    flex-wrap:wrap;
    gap:3rem;
    justify-content:space-between;
    max-width:1180px;
    margin:0 auto 3rem;
    border-bottom:1px solid rgba(255,255,255,.14);
    padding-bottom:2.6rem;
  }
  .footer-brand h2{
    font-family:var(--serif);
    font-size:1.7rem;
    margin-bottom:.6rem;
  }
  .footer-brand p{
    max-width:32ch;
    font-size:.9rem;
    line-height:1.6;
    opacity:.75;
  }
  .footer-cols{
    display:flex;
    gap:clamp(2rem,5vw,4.5rem);
    flex-wrap:wrap;
  }
  .footer-col h4{
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:.6;
    margin-bottom:.9rem;
  }
  .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;}
  .footer-col a{text-decoration:none;font-size:.92rem;opacity:.85;}
  .footer-col a:hover{opacity:1;text-decoration:underline;}
  .footer-bottom{
    max-width:1180px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:1rem;
    font-size:.78rem;
    opacity:.55;
  }

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

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

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

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

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

  /* ---------------- floating EN/SK toggle control ---------------- */
  /* Fixed bottom-right, above the story sections at all times. Unlike
     .nav-links (which collapses below 720px), this control must stay
     reachable at every width down to 360px — no collapsing breakpoint
     is defined for it on purpose. */
  .lang-toggle{
    position:fixed;
    right:clamp(.75rem,3vw,1.6rem);
    bottom:clamp(.75rem,3vw,1.6rem);
    z-index:300;
    display:flex;
    align-items:center;
    gap:2px;
    padding:3px;
    background:rgba(20,15,10,.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    box-shadow:0 4px 18px rgba(0,0,0,.28);
    font-family:var(--sans);
  }

  .lang-toggle-btn{
    -webkit-appearance:none;
    appearance:none;
    border:none;
    background:transparent;
    color:rgba(255,255,255,.6);
    font-family:var(--sans);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.06em;
    line-height:1;
    padding:.42rem .72rem;
    border-radius:999px;
    cursor:pointer;
    transition:background-color .25s ease, color .25s ease, opacity .25s ease;
  }
  .lang-toggle-btn:hover{color:rgba(255,255,255,.92);}
  .lang-toggle-btn:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}

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

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

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

  /* Shorter hero than the homepage's full-viewport one. */
  .subpage-hero{
    min-height:68vh;
    justify-content:flex-end;
    padding-bottom:4.5rem;
  }
  .subpage-hero h1{
    font-family:var(--serif);
    font-weight:700;
    font-size:clamp(2.6rem,7.5vw,5.8rem);
    line-height:1;
    letter-spacing:-.015em;
    max-width:16ch;
    margin-bottom:1.2rem;
    text-shadow:0 6px 40px rgba(0,0,0,.25);
  }

  /* Content sections flow at natural height — no full-viewport
     stretch, no scroll-snap (long editorial pages read better free). */
  .subpage-section{
    min-height:0;
    scroll-snap-align:none;
    padding-top:clamp(3.2rem,7vw,5.5rem);
    padding-bottom:clamp(3.2rem,7vw,5.5rem);
  }

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

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

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

  /* ============================================================
     FEATURED VIDEOS — the 4 x 4 (16 video) band that closes every
     content page. Markup is generated at runtime by
     /static/featured-videos1.js from the page's co-located
     <stem>.playlist.json; the page only ships the #fv-root hook.
     Same horizontal-row grid convention as pacificair.com, restyled
     for this site's dark editorial palette.
     ============================================================ */
  .fv-section{
    background:linear-gradient(180deg, #241733 0%, #1a1026 45%, var(--ink) 100%);
    color:var(--cream);
    min-height:0;
    scroll-snap-align:none;
    padding-top:clamp(3.2rem,7vw,5.5rem);
    padding-bottom:clamp(3.2rem,7vw,5.5rem);
  }
  .fv-section .chapter-kicker{color:var(--dawn-1);}
  .fv-section .headline{color:var(--cream);}
  .fv-section .section-inner{max-width:1180px;}
  .fv-section .lede{max-width:70ch;}
  .fv-section .lede::first-letter{float:none;font-size:inherit;line-height:inherit;
    font-family:inherit;padding:0;margin:0;color:inherit;}

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

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

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

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

  .video-description{
    padding:.85rem .95rem 1rem;
    font-size:.82rem;
    line-height:1.5;
    opacity:.92;
  }
  .video-channel{
    display:block;
    font-size:.64rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--dawn-1);
    opacity:.9;
    margin-bottom:.35rem;
  }

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

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

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

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

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

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

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

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

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

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