/* DW Wrzosek — production styles. Design tokens per approved Phase 3 design system. */

@font-face { font-family:'Fraunces'; font-style:normal; font-weight:300 700; font-display:swap; src:url('../fonts/fraunces_normal_ext.woff2') format('woff2'); unicode-range:U+0100-024F,U+1E00-1EFF,U+0300-0301; }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:300 700; font-display:swap; src:url('../fonts/fraunces_normal_lat.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:300 700; font-display:swap; src:url('../fonts/fraunces_italic_ext.woff2') format('woff2'); unicode-range:U+0100-024F,U+1E00-1EFF,U+0300-0301; }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:300 700; font-display:swap; src:url('../fonts/fraunces_italic_lat.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'Karla'; font-style:normal; font-weight:300 800; font-display:swap; src:url('../fonts/karla_normal_ext.woff2') format('woff2'); unicode-range:U+0100-024F,U+1E00-1EFF,U+0300-0301; }
@font-face { font-family:'Karla'; font-style:normal; font-weight:300 800; font-display:swap; src:url('../fonts/karla_normal_lat.woff2') format('woff2'); unicode-range:U+0000-00FF; }

:root{
  --heather:#6E5C8C; --heather-dark:#4E4066; --heather-tint:#EDE9F3;
  --hedge:#4B5B3B; --hedge-dark:#364028; --hedge-tint:#E7EBE2;
  --terracotta:#9C5A3C; --terracotta-tint:#F1E4DC;
  --sand:#EFE9DC; --sand-deep:#E3DBC9;
  --ink:#2B2A26; --ink-soft:#55534B;
  --dusk:#8E97C4; --dusk-deep:#4C5178;
  --amber:#D97B2E; --amber-dark:#B3611E;
  --paper:#FBF9F4; --line:#DED5C2;
  --star:#C9932E; --flag:#B3492E;

  --bg:var(--paper); --bg-elevated:#FFFFFF; --fg:var(--ink); --fg-soft:var(--ink-soft);
  --accent:var(--heather); --border:var(--line); --chip-bg:var(--sand);

  --radius-sm:3px; --radius-md:6px; --radius-lg:14px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  --shadow-sm:0 1px 2px rgba(43,42,38,.06),0 1px 1px rgba(43,42,38,.04);
  --shadow-md:0 4px 12px rgba(43,42,38,.08),0 1px 3px rgba(43,42,38,.06);
  --shadow-lg:0 16px 40px rgba(43,42,38,.14),0 4px 10px rgba(43,42,38,.07);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }

body{margin:0; background:var(--bg); color:var(--fg); font-family:'Karla',-apple-system,sans-serif; font-size:16px; line-height:1.6;}
img{max-width:100%; display:block;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:560; text-wrap:balance; margin:0; color:var(--fg);}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--heather); outline-offset:2px;}

.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.kicker{font-family:'Karla',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:600; color:var(--accent); margin:0 0 12px;}

/* nav */
.site-nav{position:sticky; top:0; z-index:50; background:rgba(251,249,244,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--border);}
.site-nav .inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto;}
.site-nav .logo{font-family:'Fraunces',serif; font-size:19px; font-weight:600; text-decoration:none; color:var(--ink); flex-shrink:0;}
.site-nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.site-nav a.navlink{text-decoration:none; color:var(--fg-soft); font-size:14.5px; font-weight:600;}
.site-nav a.navlink:hover{color:var(--ink);}
.site-nav .nav-cta{background:var(--amber); color:#fff; padding:10px 18px; border-radius:var(--radius-sm); text-decoration:none; font-size:14px; font-weight:700; flex-shrink:0;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle svg{width:24px; height:24px;}
.lang-switch{display:flex; gap:6px; margin-right:8px;}
.lang-switch a{font-size:12px; font-weight:700; color:var(--fg-soft); text-decoration:none; padding:4px 6px; border-radius:3px;}
.lang-switch a[aria-current="true"]{color:var(--ink); background:var(--sand);}

@media (max-width:880px){
  .site-nav ul{position:fixed; inset:64px 0 0 0; background:var(--paper); flex-direction:column; padding:28px 24px; gap:22px; transform:translateX(100%); transition:transform 250ms ease; overflow-y:auto;}
  .site-nav ul.open{transform:translateX(0);}
  .site-nav a.navlink{font-size:19px;}
  .nav-toggle{display:block;}
  .site-nav .nav-cta{display:none;}
}

/* hero */
.hero{position:relative; min-height:88vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden;}
.hero picture, .hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero::after{content:"";position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,19,16,.46) 0%,rgba(20,19,16,.40) 35%,rgba(16,15,12,.92) 100%);}
.hero .content{position:relative; width:100%; padding:56px 24px 64px; max-width:1180px; margin:0 auto;}
.hero .text-panel{display:inline-block; background:rgba(15,14,11,.62); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-md); padding:28px 32px; margin-bottom:28px; backdrop-filter:blur(2px);}
.hero .kicker-hero{font-family:'Karla',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:12.5px; font-weight:700; opacity:1; margin-bottom:16px;}
.hero h1{color:#fff; font-weight:700; font-size:clamp(34px,5.4vw,58px); line-height:1.08; max-width:16ch; margin-bottom:20px;}
.hero p.lede{max-width:48ch; font-size:17px; opacity:1; margin:0;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{font-family:'Karla',sans-serif; font-size:14.5px; font-weight:700; padding:14px 26px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; letter-spacing:.01em; text-decoration:none; display:inline-block; transition:transform 150ms ease,box-shadow 150ms ease,background 150ms ease;}
.btn-primary{background:var(--amber); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--amber-dark); box-shadow:var(--shadow-md);}
.btn-ghost-dark{background:transparent; border-color:rgba(255,255,255,.55); color:#fff;}
.btn-ghost-dark:hover{background:rgba(255,255,255,.12);}
.btn-outline{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:#fff;}

.facts-strip{position:relative; display:flex; flex-wrap:wrap; margin-top:34px; border-top:1px solid rgba(255,255,255,.25); padding-top:22px; gap:0;}
.facts-strip .fact{padding-right:28px; margin-right:28px; border-right:1px solid rgba(255,255,255,.25); font-size:13.5px; text-shadow:0 1px 6px rgba(0,0,0,.6);}
.facts-strip .fact:last-child{border-right:none; margin-right:0;}
.facts-strip .fact b{display:block; font-family:'Fraunces',serif; font-size:18px; font-weight:500; margin-bottom:2px;}

section{padding:var(--space-9) 0;}
section.tight{padding:var(--space-8) 0;}
.section-head{display:flex; align-items:baseline; gap:14px; margin-bottom:36px;}
.section-head h2{font-size:clamp(26px,3.4vw,34px);}
.section-head .rule{flex:1; height:1px; background:var(--border);}
p.lede-sm{color:var(--fg-soft); max-width:62ch; font-size:16px; margin:0 0 32px;}

/* about + color story */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.about-grid img{border-radius:var(--radius-md); box-shadow:var(--shadow-md); width:100%; aspect-ratio:4/3; object-fit:cover;}
.about-grid .text p{color:var(--fg-soft); font-size:16.5px; margin:0 0 18px;}
.about-grid .text p:first-of-type{font-family:'Fraunces',serif; font-size:21px; color:var(--fg); font-style:italic; line-height:1.4;}

.story{margin-top:64px; display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); padding:36px;}
.story .dots{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.story .dots span{aspect-ratio:1; border-radius:50%;}
.story h3{font-size:20px; margin-bottom:10px;}
.story p{color:var(--fg-soft); font-size:15px; max-width:48ch; margin:0;}

/* cards grid (amenities) */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5);}
@media (max-width:900px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .card-grid{grid-template-columns:1fr;} }
.g-card{background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5); box-shadow:var(--shadow-sm); transition:box-shadow 200ms ease,transform 200ms ease;}
.g-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.g-card .icon-dot{width:36px; height:36px; border-radius:50%; background:var(--heather-tint); color:var(--heather-dark); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:15px; margin-bottom:16px;}
.g-card h3{font-size:17.5px; margin-bottom:8px;}
.g-card p{font-size:14px; color:var(--fg-soft); margin:0;}

/* room cards */
.room-cards{display:flex; flex-direction:column; gap:var(--space-4);}
.room-card{display:grid; grid-template-columns:280px 1fr; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
.room-card .rc-imgs{display:grid; grid-template-columns:1fr; gap:2px;}
.room-card img{width:100%; height:100%; object-fit:cover; min-height:220px;}
.room-card .rc-body{padding:var(--space-6); display:flex; flex-direction:column;}
.room-card .rc-type{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); font-weight:700; margin-bottom:10px;}
.room-card h3{font-size:23px; margin-bottom:10px;}
.room-card p{color:var(--fg-soft); font-size:15px; max-width:52ch; margin:0 0 18px;}
.room-card .rc-footer{display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:16px; flex-wrap:wrap;}
.room-card .amenity-row{display:flex; gap:16px; flex-wrap:wrap;}
.room-card .amenity-row span{font-size:12.5px; color:var(--fg-soft);}
.room-card .rc-cta{background:var(--ink); color:#fff; font-family:'Karla',sans-serif; font-size:13px; font-weight:700; padding:11px 20px; border-radius:var(--radius-sm); border:none; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-block;}
.rooms-note{margin-top:20px; font-size:13.5px; color:var(--fg-soft); font-style:italic;}

/* local attractions */
.dist-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.dist-row{display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); font-size:15.5px;}
.dist-row:first-child{padding-top:0;}
.dist-row .place{font-weight:600;}
.dist-row .time{color:var(--fg-soft); font-variant-numeric:tabular-nums;}
.attractions-photo{border-radius:var(--radius-md); width:100%; aspect-ratio:3/4; object-fit:cover; box-shadow:var(--shadow-md);}

/* cyclist map */
.cyclist-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
.map-mock{background:var(--dusk-deep); border-radius:var(--radius-lg); overflow:hidden; position:relative; box-shadow:var(--shadow-lg);}
.map-mock img{width:100%; height:auto; display:block;}
.map-mock svg{position:absolute; inset:0; width:100%; height:100%;}
.map-mock .attrib{position:absolute; right:8px; bottom:6px; font-size:9.5px; color:rgba(43,42,38,.55); background:rgba(251,249,244,.72); padding:2px 6px; border-radius:3px; font-family:'Karla',sans-serif;}
.map-pin-label{font-family:'Fraunces',serif; font-size:15px; fill:var(--ink); paint-order:stroke; stroke:var(--paper); stroke-width:4px;}
.map-pin-label.small{font-family:'Karla',sans-serif; font-size:11px; font-weight:700;}
.map-caption{font-size:13.5px; color:var(--fg-soft); margin-top:16px; line-height:1.5;}
.cyclist-facts{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:14px;}
.cyclist-facts li{padding-left:22px; position:relative; font-size:15px; color:var(--fg-soft);}
.cyclist-facts li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--amber);}
.cyclist-facts b{color:var(--fg);}

/* gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:6px; border-radius:var(--radius-md); overflow:hidden;}
.gallery-grid a{display:block;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 400ms ease;}
.gallery-grid a:hover img{transform:scale(1.04);}
.gallery-grid .big{grid-column:span 2; grid-row:span 2;}

/* reviews */
.review-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5);}
.review-card{background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5); display:flex; flex-direction:column; gap:14px;}
.review-card .stars{color:var(--star); font-size:14px; letter-spacing:2px;}
.review-card blockquote{margin:0; font-family:'Fraunces',serif; font-size:16.5px; line-height:1.5; color:var(--fg); font-style:italic;}
.review-card .who{display:flex; align-items:center; gap:10px; margin-top:4px;}
.review-card .avatar{width:32px; height:32px; border-radius:50%; background:var(--heather-tint); color:var(--heather-dark); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:13px; flex-shrink:0;}
.review-card .who .name{font-size:13.5px; font-weight:700;}
.review-card .who .src{font-size:11.5px; color:var(--fg-soft);}

/* faq */
.faq-list{display:flex; flex-direction:column; gap:2px; max-width:760px;}
.faq-item{background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm);}
.faq-item + .faq-item{margin-top:8px;}
.faq-item summary{padding:18px 22px; font-weight:700; font-size:15.5px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:'Fraunces',serif; font-size:22px; color:var(--accent); flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item p.a{padding:0 22px 20px; margin:0; color:var(--fg-soft); font-size:15px; max-width:64ch;}

/* contact + booking */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px;}
.contact-list li{font-size:15.5px;}
.contact-list .label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-soft); margin-bottom:4px;}
.contact-list a{text-decoration:none; font-weight:600; color:var(--ink);}
.contact-list a:hover{color:var(--accent);}

.booking-band{background:var(--ink); color:#fff; border-radius:var(--radius-md); padding:44px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.booking-band h2{color:#fff; font-size:28px; margin-bottom:10px;}
.booking-band p{color:rgba(255,255,255,.75); margin:0; max-width:44ch;}
.bb-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.platform-badge{font-size:11.5px; opacity:.75; padding:8px 12px; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-sm); white-space:nowrap;}
.platform-badge.pending{border-style:dashed;}

footer.site-footer{background:var(--sand); border-top:1px solid var(--border); padding:var(--space-8) 0 var(--space-6);}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.footer-grid h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-soft); margin-bottom:16px; font-family:'Karla',sans-serif;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-grid a{text-decoration:none; font-size:14.5px; color:var(--fg-soft);}
.footer-grid a:hover{color:var(--ink);}
.footer-grid .logo{font-family:'Fraunces',serif; font-size:20px; margin-bottom:12px;}
.footer-bottom{border-top:1px solid var(--border); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--fg-soft);}
.footer-bottom a{text-decoration:underline; color:inherit;}

/* cookie consent */
.cookie-banner{position:fixed; left:16px; right:16px; bottom:16px; max-width:560px; margin:0 auto; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:22px 24px; z-index:200;}
.cookie-banner[hidden]{display:none;}
.cookie-banner p{margin:0 0 16px; font-size:14px; color:var(--fg-soft); line-height:1.5;}
.cookie-banner .cb-actions{display:flex; gap:10px; flex-wrap:wrap;}
.cookie-banner button{font-family:'Karla',sans-serif; font-size:13.5px; font-weight:700; padding:10px 18px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid var(--ink);}
.cookie-banner .cb-accept{background:var(--ink); color:#fff;}
.cookie-banner .cb-decline{background:transparent; color:var(--ink);}
.cookie-banner a{text-decoration:underline; color:var(--ink);}

@media (max-width:900px){
  .about-grid, .dist-grid, .cyclist-wrap, .story, .review-grid, .contact-grid, .footer-grid{grid-template-columns:1fr;}
  .room-card{grid-template-columns:1fr;}
  .room-card img{min-height:200px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid .big{grid-column:span 2; grid-row:span 1;}
  .booking-band{flex-direction:column; align-items:flex-start; text-align:left;}
  section{padding:var(--space-8) 0;}
}