/* ============================================================
   "Stary atlas" — Alina, przewodnik po Wilnie i Trokach
   Paper-and-map heritage direction. Vanilla CSS, no build step.
   Type: Bona Nova (display, PL heritage serif) + Alegreya Sans.
   Shape system: buttons/inputs 4px · cards/photos 8px · arch = hero only.
   Accent: brick, CTA + links only. Gold = hairlines/ornament only.
   ============================================================ */

:root{
  --paper:#F2EBDC;          /* parchment page */
  --paper-2:#E9DFC8;        /* aged band */
  --card:#FAF5E8;           /* lighter paper artifacts (postcards, form) */
  --green:#1C3B2D;          /* bottle green: headings, dark band */
  --green-2:#152E23;        /* deeper green (footer) */
  --ink:#27241B;            /* warm ink body text */
  --ink-soft:#5C564A;       /* secondary text */
  --gold:#B5872F;           /* map-line gold, ornament only */
  --gold-soft:#B5872F66;
  --brick:#9E3D23;          /* the accent: CTA + links */
  --brick-dark:#84301B;
  --line:#D6C9A8;           /* paper hairline */
  --r-s:4px; --r-m:8px;
  --df:"Bona Nova", Georgia, serif;
  --bf:"Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --shadow-paper:0 1px 2px rgba(60,46,20,.10), 0 10px 30px -14px rgba(60,46,20,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 var(--bf);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
h1,h2,h3{font-family:var(--df); color:var(--green); line-height:1.08; margin:0; font-weight:700; text-wrap:balance}
h1{font-size:clamp(2.7rem,6vw,4.6rem); letter-spacing:-.01em}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:clamp(1.25rem,1.8vw,1.5rem)}
p{margin:0}
.lead{font-size:clamp(1.02rem,1.3vw,1.17rem); color:var(--ink-soft); max-width:58ch}
.wrap{max-width:1200px; margin-inline:auto; padding-inline:clamp(18px,4vw,40px)}
section{padding-block:clamp(64px,8.5vw,120px)}
section[id]{scroll-margin-top:96px}   /* clear the 68px sticky nav on anchor jumps */
::selection{background:var(--gold); color:#fff}

/* paper grain, fixed so it never repaints on scroll */
body::after{
  content:""; position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* consistent warm grade so all photos live in one world */
.ph{filter:sepia(.16) saturate(.94) contrast(1.03)}

/* eyebrow: rationed, max 1 per 3 sections per page */
.eyebrow{
  display:inline-block; font:700 .72rem/1 var(--bf); letter-spacing:.22em;
  text-transform:uppercase; color:var(--brick);
}

/* links + buttons: brick is the only accent */
a{color:var(--brick)}
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font:700 1rem/1 var(--bf); letter-spacing:.02em; text-decoration:none;
  padding:.95em 1.7em; border-radius:var(--r-s); border:0; cursor:pointer;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background:var(--brick); color:#FBF4E4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(60,30,10,.25);
}
.btn-primary:hover{background:var(--brick-dark)}
.btn:active{transform:translateY(1px) scale(.99)}
.arrow-link{
  display:inline-flex; align-items:center; gap:.45em;
  font:700 1rem var(--bf); color:var(--brick); text-decoration:none;
  border-bottom:1.5px solid var(--gold-soft); padding-bottom:2px;
  transition:border-color .2s ease, gap .2s ease;
}
.arrow-link:hover{border-color:var(--gold); gap:.7em}
.arrow-link.muted{color:var(--ink-soft); font-weight:500}
:focus-visible{outline:2.5px solid var(--brick); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--green); color:#fff; padding:.7em 1.2em; font:700 .95rem var(--bf)}
.skip:focus{left:12px; top:12px}

/* brand icons via mask (Simple Icons), tinted with currentColor */
.ic{display:inline-block; width:21px; height:21px; background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic-wa{--m:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z%22%2F%3E%3C%2Fsvg%3E")}
.ic-fb{--m:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.101%2023.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085%201.848-5.978%205.858-5.978.401%200%20.955.042%201.468.103a8.68%208.68%200%200%201%201.141.195v3.325a8.623%208.623%200%200%200-.653-.036%2026.805%2026.805%200%200%200-.733-.009c-.707%200-1.259.096-1.675.309a1.686%201.686%200%200%200-.679.622c-.258.42-.374.995-.374%201.752v1.297h3.919l-.386%202.103-.287%201.564h-3.246v8.245C19.396%2023.238%2024%2018.179%2024%2012.044c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.628%203.874%2010.35%209.101%2011.647Z%22%2F%3E%3C%2Fsvg%3E")}
.ic-ig{--m:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228%201.3877-.6652.6677-1.075%201.3368-1.3802%202.127-.2954.7638-.4956%201.6365-.552%202.914-.0564%201.2775-.0689%201.6882-.0626%204.947.0062%203.2586.0206%203.6671.0825%204.9473.061%201.2765.264%202.1482.5635%202.9107.308.7889.72%201.4573%201.388%202.1228.6679.6655%201.3365%201.0743%202.1285%201.38.7632.295%201.6361.4961%202.9134.552%201.2773.056%201.6884.069%204.9462.0627%203.2578-.0062%203.668-.0207%204.9478-.0814%201.28-.0607%202.147-.2652%202.9098-.5633.7889-.3086%201.4578-.72%202.1228-1.3881.665-.6682%201.0745-1.3378%201.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982%201.33%2020.628.9208%2019.8378.6165%2019.074.321%2018.2017.1197%2016.9244.0645%2015.6471.0093%2015.236-.005%2011.977.0014%208.718.0076%208.31.0215%207.0301.0839m.1402%2021.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814%201.3783-.9003.423-.1651%201.0575-.3614%202.227-.4171%201.2655-.06%201.6447-.072%204.848-.079%203.2033-.007%203.5835.005%204.8495.0608%201.169.0508%201.8053.2445%202.228.408.5608.216.96.4754%201.3816.895.4217.4194.6816.8176.9005%201.3787.1653.4217.3617%201.056.4169%202.2263.0602%201.2655.0739%201.645.0796%204.848.0058%203.203-.0055%203.5834-.061%204.848-.051%201.17-.245%201.8055-.408%202.2294-.216.5604-.4763.96-.8954%201.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953%205.5864A1.44%201.44%200%201%200%2018.39%204.144a1.44%201.44%200%200%200-1.437%201.4424M5.8385%2012.012c.0067%203.4032%202.7706%206.1557%206.173%206.1493%203.4026-.0065%206.157-2.7701%206.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156%202.771-6.1496%206.1738M8%2012.0077a4%204%200%201%201%204.008%203.9921A3.9996%203.9996%200%200%201%208%2012.0077%22%2F%3E%3C%2Fsvg%3E")}
.gl{width:21px;height:21px}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:90;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:18px; height:68px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--green); font:700 1.3rem var(--df)}
.brand .mark{flex:none; color:var(--gold)}
.brand small{font:500 .7rem/1 var(--bf); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); align-self:center; margin-top:4px}
.nav-links{display:flex; gap:clamp(14px,2.4vw,30px)}
.nav-links a{font:700 .95rem var(--bf); color:var(--green); text-decoration:none; padding:6px 2px; border-bottom:2px solid transparent}
.nav-links a:hover, .nav-links a.active{border-color:var(--gold)}
.nav-right{display:flex; align-items:center; gap:16px}
.nav-contact{display:flex; gap:12px; align-items:center}
.nav-contact a{color:var(--green); display:inline-flex; padding:4px; transition:color .2s}
.nav-contact a:hover{color:var(--brick)}
/* hamburger (mobile only) */
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:9px; margin:0; background:none; border:0; cursor:pointer; color:var(--green)}
.nav-toggle span{display:block; width:100%; height:2px; background:currentColor; border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero (homepage) ---------- */
.hero{position:relative; overflow:hidden; padding-block:clamp(40px,5.5vw,84px) clamp(56px,7vw,104px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,72px); align-items:center}
.hero-copy h1{margin:0 0 1.15rem; font-size:clamp(2.8rem,5.6vw,5rem)}
.hero-copy .lead{max-width:46ch}
.hero-cta{display:flex; align-items:center; gap:26px; margin-top:2rem; flex-wrap:wrap}
.hero-route{margin-top:clamp(30px,4vw,52px); max-width:330px; color:var(--green)}
.hero-figure{position:relative; margin:0}
.arch{
  border:1px solid var(--gold); border-radius:999px 999px var(--r-m) var(--r-m);
  padding:10px; background:var(--card); box-shadow:var(--shadow-paper);
}
.arch img{width:100%; aspect-ratio:4/5.1; object-fit:cover; border-radius:990px 990px calc(var(--r-m) - 3px) calc(var(--r-m) - 3px)}
.hero-figure figcaption{
  text-align:center; font:400 italic .95rem/1.4 var(--df); color:var(--ink-soft); margin-top:12px; padding-bottom:2px;
}
/* round travelling stamp, straddles the frame corner (sits on the paper, not on the photo) */
.stamp{
  position:absolute; left:-34px; bottom:42px; width:118px; height:118px; color:var(--brick);
  filter:drop-shadow(0 2px 3px rgba(60,30,10,.18)); transform:rotate(-12deg); pointer-events:none;
}
.stamp svg{width:100%; height:100%}
@media (prefers-reduced-motion: no-preference){
  .stamp svg{animation:spin 30s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
}

/* ---------- destinations: two postal cards, offset ---------- */
.dest-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.5vw,44px); align-items:start; margin-top:clamp(28px,4vw,48px)}
.dest{
  display:block; color:inherit; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  overflow:hidden; box-shadow:var(--shadow-paper);
  transition:transform .25s ease, box-shadow .25s ease;
}
.dest:hover{transform:translateY(-5px); box-shadow:0 2px 3px rgba(60,46,20,.10), 0 22px 44px -18px rgba(60,46,20,.38)}
.dest:hover .arrow-link{gap:.7em; border-color:var(--gold)}
.dest img{width:100%; aspect-ratio:16/10; object-fit:cover; border-bottom:1px solid var(--gold)}
.dest .body{padding:clamp(20px,2.6vw,30px)}
.dest .body h3{font-size:clamp(1.7rem,2.6vw,2.2rem)}
.dest .kk{font:700 .7rem/1 var(--bf); letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.dest p{margin:.7rem 0 1.1rem; color:var(--ink-soft)}

/* ---------- route map band ---------- */
.route-band{background:var(--paper-2); border-block:1px solid var(--line); overflow:hidden}
.route-band .sec-head{max-width:640px}
.route-map{margin-top:clamp(26px,4vw,46px)}
.route-map svg{width:100%; height:auto; display:block}
.route-map .trk{stroke:var(--gold); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:.8 7}
.route-map .nod{fill:var(--green)} .route-map .nod-end{fill:var(--brick)}
.route-map .lbl{font:700 13.5px var(--bf); letter-spacing:.14em; fill:var(--green)}
.route-map .big{font:700 34px var(--df); fill:var(--green)}
.route-map .sm{font:500 12.5px var(--bf); fill:var(--ink-soft)}
/* the map ships in two orientations: wide (desktop/tablet) and tall (phones) */
.route-map.rm-mobile{display:none; max-width:420px; margin-inline:auto}
.route-map .wave{stroke:var(--gold-soft); stroke-width:1.3; fill:none}
.route-map .tick{stroke:var(--green); stroke-width:1.4}
/* hidden initial states only when JS is present (html.js), so no-JS still shows the full map */
@media (prefers-reduced-motion: no-preference){
  .js .route-map .draw{stroke-dasharray:1600; stroke-dashoffset:1600; transition:stroke-dashoffset 3s cubic-bezier(.5,0,.2,1) .15s}
  .js .route-map.in .draw{stroke-dashoffset:0}
  .js .route-map .pop{opacity:0; transform:translateY(6px); transition:opacity .55s ease var(--d,0s), transform .55s ease var(--d,0s)}
  .js .route-map.in .pop{opacity:1; transform:none}
}

/* ---------- how: photo + rows ---------- */
.how-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(28px,5vw,70px); align-items:center}
.how-grid figure{margin:0; border:1px solid var(--gold); border-radius:var(--r-m); padding:9px; background:var(--card); box-shadow:var(--shadow-paper); transform:rotate(-1.4deg)}
.how-grid figure img{border-radius:calc(var(--r-m) - 3px); aspect-ratio:4/4.6; object-fit:cover; width:100%}
.how-grid figcaption{font:400 italic .95rem var(--df); color:var(--ink-soft); text-align:center; padding:10px 4px 3px}
.row-list{display:grid}
.row-list .row{padding:clamp(18px,2.2vw,26px) 0; border-top:1px solid var(--line)}
.row-list .row:last-child{border-bottom:1px solid var(--line)}
.row-list .t{font:700 clamp(1.15rem,1.6vw,1.35rem) var(--df); color:var(--green); margin-bottom:.3rem}
.row-list .d{color:var(--ink-soft); max-width:52ch}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(30px,5vw,80px); align-items:center}
.about-grid h2{margin:0 0 1.2rem}
.about-grid p{color:var(--ink-soft); max-width:56ch}
.about-grid p + p{margin-top:1rem}
.sign{font:400 italic clamp(2rem,3vw,2.6rem)/1.2 var(--df); color:var(--brick); margin-top:1.5rem; transform:rotate(-3deg); display:inline-block; padding-bottom:.2em}
.polaroid{margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
  padding:12px 12px 8px; box-shadow:var(--shadow-paper); transform:rotate(2deg)}
.polaroid img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px}
.polaroid figcaption{font:400 italic 1.02rem/1.3 var(--df); color:var(--ink-soft); text-align:center; padding:12px 6px 8px}

/* ---------- tickets (concierge) ---------- */
.tickets{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,26px); margin-top:clamp(26px,4vw,44px)}
.ticket{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,28px) clamp(20px,2.4vw,28px) calc(clamp(20px,2.4vw,28px) + 18px);
  box-shadow:var(--shadow-paper);
}
.ticket::before{ /* perforated stub edge */
  content:""; position:absolute; left:14px; top:9px; bottom:9px; width:0;
  border-left:2px dashed var(--gold-soft);
}
.ticket::after{ /* punched hole */
  content:""; position:absolute; left:-8px; top:50%; width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line); transform:translateY(-50%);
}
.ticket h3{font-size:1.3rem}
.ticket p{color:var(--ink-soft); margin-top:.5rem; font-size:.98rem}

/* ---------- filmstrip gallery ---------- */
.strip{
  display:flex; gap:clamp(16px,2.2vw,26px); overflow-x:auto; padding:26px 6px 32px;
  scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
}
.strip figure{
  margin:0; flex:0 0 clamp(240px,30vw,360px); scroll-snap-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
  padding:10px 10px 6px; box-shadow:var(--shadow-paper);
}
.strip figure:nth-child(odd){transform:rotate(-1.3deg)}
.strip figure:nth-child(even){transform:rotate(1.1deg) translateY(10px)}
.strip img{width:100%; aspect-ratio:4/3.4; object-fit:cover; border-radius:2px}
.strip figcaption{font:400 italic .92rem/1.3 var(--df); color:var(--ink-soft); text-align:center; padding:9px 4px 6px}

/* ---------- postcard reviews ---------- */
.pgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,30px); margin-top:clamp(28px,4vw,48px)}
.pcard{
  position:relative; margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
  padding:clamp(20px,2.4vw,28px); box-shadow:var(--shadow-paper);
  display:flex; flex-direction:column; gap:14px; min-height:215px;
  transition:transform .25s ease;
}
.pcard:nth-child(3n+1){transform:rotate(-1.1deg)}
.pcard:nth-child(3n+2){transform:rotate(.8deg) translateY(8px)}
.pcard:nth-child(3n+3){transform:rotate(-.5deg)}
.pcard:hover{transform:rotate(0) translateY(-4px)}
.pcard .pstamp{ /* little perforated stamp corner, like on a postcard */
  position:absolute; top:14px; right:14px; width:46px; height:54px; color:var(--gold);
  background:var(--paper-2); border:1px dashed var(--gold-soft); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
}
.pcard .pstamp svg{width:26px;height:26px}
.pcard .q{
  font:400 italic clamp(1.08rem,1.4vw,1.22rem)/1.5 var(--df); color:var(--ink); padding-right:48px;
}
.pcard .q::before{content:"„"} .pcard .q::after{content:"”"}
.pcard .by{margin-top:auto; font:500 .92rem var(--bf); color:var(--ink-soft); border-top:1px dashed var(--line); padding-top:12px; display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.pcard .by b{font:700 1rem var(--bf); color:var(--green)}

/* ---------- quote (subpages) ---------- */
.quote{background:var(--paper-2); border-block:1px solid var(--line); text-align:center}
.quote blockquote{margin:0 auto; max-width:24ch; font:400 italic clamp(1.6rem,3.2vw,2.5rem)/1.35 var(--df); color:var(--green)}
.quote .who{margin-top:1.4rem; font:500 .95rem var(--bf); color:var(--ink-soft)}
.quote .who b{color:var(--green)}

/* ---------- contact band ---------- */
.contact{position:relative; background:var(--green); color:#EFE7D2; overflow:hidden}
.contact::before{ /* faint map contour lines in the dark band */
  content:""; position:absolute; inset:0; opacity:.09; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='240' viewBox='0 0 420 240'%3E%3Cg fill='none' stroke='%23F2EBDC' stroke-width='1'%3E%3Cpath d='M-20 50 Q 90 10 200 55 T 440 35'/%3E%3Cpath d='M-20 110 Q 110 70 210 115 T 440 95'/%3E%3Cpath d='M-20 170 Q 100 130 205 175 T 440 155'/%3E%3Cpath d='M-20 230 Q 105 190 215 235 T 440 215'/%3E%3C/g%3E%3C/svg%3E");
}
.contact .wrap{position:relative}
.contact h2{color:#FBF4E4}
.contact .lead{color:#D9CFB4}
.contact-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(30px,5vw,80px); align-items:center}
.channels{display:grid; gap:12px}
.channels a{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  border:1px solid #EFE7D233; border-radius:var(--r-m); padding:14px 18px; color:#EFE7D2;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.channels a:hover{border-color:var(--gold); background:#FFFFFF0D; transform:translateX(3px)}
.channels .meta{display:grid; line-height:1.3}
.channels .k{font:700 1rem var(--bf)}
.channels .v{font:400 .88rem var(--bf); color:#D9CFB4}
/* light variant on kontakt page */
.channels.on-paper a{color:var(--green); border-color:var(--line); background:var(--card)}
.channels.on-paper a:hover{border-color:var(--gold); background:#FFFDF4}
.channels.on-paper .v{color:var(--ink-soft)}

/* ---------- form (kontakt) ---------- */
.form{
  display:grid; gap:18px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-m); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-paper);
}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:grid; gap:7px}
.field label{font:700 .92rem var(--bf); color:var(--green)}
.field .opt{font-weight:500; color:var(--ink-soft)}
input[type=text],input[type=email],input[type=tel],textarea{
  font:400 1rem var(--bf); color:var(--ink); background:#FFFDF4;
  border:1px solid var(--line); border-radius:var(--r-s); padding:.8em .9em; width:100%;
}
input::placeholder,textarea::placeholder{color:#76705F}
input:focus,textarea:focus{outline:2px solid var(--brick); outline-offset:1px; border-color:var(--brick)}
textarea{min-height:130px; resize:vertical}
.field .err{display:none; font:500 .85rem var(--bf); color:var(--brick)}
.field.invalid input,.field.invalid textarea{border-color:var(--brick)}
.field.invalid .err{display:block}
.consent{display:flex; gap:10px; align-items:flex-start; font:400 .88rem/1.5 var(--bf); color:var(--ink-soft)}
.consent input{margin-top:3px; accent-color:var(--brick)}
.hp{position:absolute; left:-9999px; opacity:0; height:0}
.form-note{font:500 .95rem var(--bf); min-height:1.2em}
.form-note.ok{color:var(--green)} .form-note.bad{color:var(--brick)}
.fb-btn{margin-top:14px}

/* ---------- subpage hero ---------- */
.page-hero{position:relative; min-height:76vh; display:flex; align-items:flex-end; overflow:hidden; padding:clamp(120px,18vh,200px) 0 clamp(36px,5vw,64px)}
.page-hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:sepia(.16) saturate(.94) contrast(1.02)}
.page-hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,40,32,.10) 30%, rgba(18,28,22,.78) 100%)}
.page-hero .ph-in{position:relative; z-index:2; width:100%; max-width:1200px; margin-inline:auto; padding-inline:clamp(18px,4vw,40px)}
.page-hero h1{color:#FBF4E4; font-size:clamp(3.2rem,8vw,6rem); text-shadow:0 2px 14px rgba(10,16,12,.55)}
.page-hero p{color:#F0E8D4; max-width:52ch; margin-top:1rem; font-size:clamp(1.02rem,1.3vw,1.15rem); text-shadow:0 1px 8px rgba(10,16,12,.6)}
.page-hero .eyebrow{color:#E9C87B; text-shadow:0 1px 6px rgba(10,16,12,.6)}

/* generic section header */
.sec-head h2{margin-top:.45rem}
.sec-head .lead{margin-top:.9rem}
.split-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,80px); align-items:start}
.split-grid .sec-head{position:sticky; top:96px}

/* ---------- footer ---------- */
footer{background:var(--green-2); color:#D9CFB4; padding:clamp(40px,5vw,64px) 0 36px}
footer .brand{color:#FBF4E4}
footer .brand small{color:#B7AC8F}
.foot-in{display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid #EFE7D226; margin-bottom:20px}
.foot-links{display:flex; gap:22px; flex-wrap:wrap}
.foot-links a{color:#EFE7D2; text-decoration:none; font:700 .95rem var(--bf)}
.foot-links a:hover{color:var(--gold)}
.foot-r{display:grid; gap:18px; justify-items:end}
.socials{display:flex; gap:14px}
.socials a{color:#D9CFB4; display:inline-flex; padding:4px}
.socials a:hover{color:var(--gold)}
.foot-fine{font:400 .88rem/1.6 var(--bf); color:#B7AC8F}
.foot-fine a{color:inherit}

/* ---------- mobile sticky contact bar ---------- */
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  grid-template-columns:1fr 1fr; box-shadow:0 -4px 18px rgba(30,24,12,.18)}
.mbar a{display:flex; align-items:center; justify-content:center; gap:9px;
  font:700 1rem var(--bf); text-decoration:none; padding:15px 10px}
.mbar .wa{background:var(--green); color:#FBF4E4}
.mbar .fb{background:var(--brick); color:#FBF4E4}

/* ---------- reveal motion (added by JS; no-JS shows everything) ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1; transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .hero-figure{max-width:430px; margin-inline:auto}
  /* seal sits on the photo's lower-left, clear of the caption below */
  .stamp{left:-6px; right:auto; bottom:84px; width:98px; height:98px}
  .about-grid,.how-grid,.contact-grid,.split-grid{grid-template-columns:1fr; gap:40px}
  .split-grid .sec-head{position:static}
  .pgrid{grid-template-columns:1fr 1fr}
  .nav-contact{display:none}
}
@media (max-width:860px){
  /* mobile nav: hamburger reveals the links; top CTA + icons hidden (sticky bottom bar covers contact) */
  .nav-toggle{display:flex}
  .nav-right{display:none}
  .nav-links{
    position:absolute; left:0; right:0; top:100%; z-index:90;
    flex-direction:column; gap:0; background:var(--paper);
    border-bottom:1px solid var(--line); box-shadow:0 16px 26px -18px rgba(60,46,20,.5);
    padding:6px 0; display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px clamp(18px,5vw,40px); border:0; border-left:3px solid transparent}
  .nav-links a.active{border-left-color:var(--gold); color:var(--brick)}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .dest-grid{grid-template-columns:1fr}
  .dest:nth-child(2){margin-top:0}
  .tickets{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .pcard{min-height:0}
  .pcard:nth-child(3n+2){transform:rotate(.8deg)}
  .mbar{display:grid}
  footer{padding-bottom:120px}
  .foot-r{justify-items:start}
  .row2{grid-template-columns:1fr}
  .page-hero{min-height:60vh; padding-top:90px}
  .hero{padding-top:26px}
  .hero-route{display:none}
  /* map: swap the wide map for its vertical twin (no horizontal scrolling) */
  .route-map.rm-desktop{display:none}
  .route-map.rm-mobile{display:block}
}
@media (max-width:430px){
  h1{font-size:2.45rem}
  .strip figure{flex-basis:78vw}
}

/* print: drop chrome */
@media print{ .nav,.mbar{display:none} body::after{display:none} }