:root{
    --paper:#fbfaf7;
    --ivory:#f5f2ec;
    --bone:#f1ede6;
    --fog:#e9e6e2;
    --smoke:#dcd8d3;
    --charcoal:#1f1f1f;
    --ink:#0d1b2a;
    --ink-40:rgba(13,27,42,.4);
    --ink-10:rgba(13,27,42,.10);
    --burgundy:#6e2831;
    --burgundy-30:rgba(110,40,49,.3);
    --shadow:0 10px 30px rgba(0,0,0,.06);
    --rule:rgba(31,31,31,.22);
    --radius:10px;
    --speed:.4s;
  }

  /* Base */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    color:var(--charcoal);
    background:
      radial-gradient(rgba(0,0,0,.025) 1px, transparent 1px) 0 0/6px 6px,
      linear-gradient(180deg, var(--paper), var(--ivory));
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Inter,Segoe UI,Arial,sans-serif;
    line-height:1.6;
    letter-spacing:.01em;
  }
  img{max-width:100%;height:auto;display:block}
  a{color:var(--charcoal);text-underline-offset:2px;text-decoration-thickness:.06em;transition:color var(--speed) ease, background var(--speed) ease, box-shadow var(--speed) ease, opacity var(--speed) ease}
  a:hover{color:var(--burgundy)}
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:2px dashed var(--burgundy);
    outline-offset:3px;
  }
  h1,h2,h3,h4{
    font-family:Georgia,"Times New Roman",serif;
    font-weight:600;
    letter-spacing:.01em;
    line-height:1.15;
    margin:.2em 0 .4em;
  }
  h1{font-size:2.6rem}
  h2{font-size:1.8rem}
  h3{font-size:1.2rem}
  p{margin:.75em 0}
  small{opacity:.75}

  .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
  .rule{border-top:1px solid var(--rule)}
  .hairline{border-top:1px solid var(--rule);height:1px}

  /* Header & Nav */
  header.site-header{
    position:sticky;top:0;z-index:50;
    background:linear-gradient(180deg, rgba(251,250,247,.9), rgba(251,250,247,.8));
    backdrop-filter:saturate(140%) blur(6px);
    border-bottom:1px solid var(--rule);
  }
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;max-width:1200px;margin:0 auto}
  .logo{
    font-family:Georgia,serif;font-size:1.4rem;letter-spacing:.06em;text-decoration:none;
    padding:4px 8px;border:1px solid var(--rule);border-radius:30px;color:var(--charcoal)
  }

  /* Burger */
  #nav-toggle{position:absolute;left:-9999px}
  .burger{
    width:38px;height:38px;border:1px solid var(--rule);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background var(--speed) ease;
  }
  .burger span,.burger::before,.burger::after{
    content:"";display:block;width:18px;height:1px;background:var(--charcoal);transition:transform var(--speed) ease, opacity var(--speed) ease}
  .burger::before{transform:translateY(-5px)}
  .burger::after{transform:translateY(5px)}
  #nav-toggle:checked + label.burger span{opacity:0}
  #nav-toggle:checked + label.burger::before{transform:translateY(0) rotate(45deg)}
  #nav-toggle:checked + label.burger::after{transform:translateY(0) rotate(-45deg)}

  nav.nav{
    position:fixed;inset:0 0 auto auto;height:100vh;width:80vw;max-width:420px;background:var(--paper);
    transform:translateX(100%);transition:transform var(--speed) ease, box-shadow var(--speed) ease;
    box-shadow:-20px 0 40px rgba(0,0,0,.06);padding:90px 28px 28px;display:flex;flex-direction:column;gap:18px
  }
  #nav-toggle:checked ~ nav.nav{transform:translateX(0)}
  nav.nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
  nav.nav li a{display:block;padding:8px 2px;border-bottom:1px solid var(--rule);text-decoration:underline}
  .header-cta{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
  .btn{
    appearance:none;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:.95rem;text-decoration:none;
    box-shadow:0 0 0 0 rgba(13,27,42,0);transition:box-shadow var(--speed) ease, background var(--speed) ease, color var(--speed) ease, border-color var(--speed) ease
  }
  .btn:hover{box-shadow:0 0 0 8px var(--ink-10)}
  .btn.outline{background:transparent;color:var(--ink);border-color:var(--ink)}
  .btn.outline:hover{background:var(--ink);color:#fff}

  /* HERO */
  .hero{position:relative}
  .hero-inner{max-width:1200px;margin:0 auto;padding:46px 20px 12px}
  .hero h1{
    font-size:clamp(2.4rem, 5vw, 4.8rem);
    letter-spacing:.02em;
  }
  .hero .dek{max-width:65ch;color:#333;opacity:.85;margin-top:8px}
  .slider{
    position:relative;overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    max-height:600px;background:#000;
  }
  .slides{display:flex;transition:transform var(--speed) ease}
  .slider input[type=radio]{position:absolute;left:-9999px}
  .slide{
    min-width:100%;height:52vh;max-height:600px;position:relative;background:#000;
    display:grid;place-items:end start
  }
  .slide img{width:100%;height:100%;object-fit:cover;filter:grayscale(85%) contrast(1.05) brightness(.92)}
  .slide figcaption{
    position:absolute;left:20px;bottom:18px;padding:8px 12px;border-radius:999px;background:rgba(251,250,247,.82);
    border:1px solid var(--rule);font-family:Georgia,serif;font-size:.9rem
  }
  .slider-nav{
    position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px;z-index:2
  }
  .slider-nav label{
    width:9px;height:9px;border:1px solid var(--paper);border-radius:999px;background:rgba(255,255,255,.25);display:block;cursor:pointer;transition:transform var(--speed) ease, background var(--speed) ease
  }
  .slider-nav label:hover{transform:scale(1.15)}

  /* Radio -> transform */
  #s1:checked ~ .slides{transform:translateX(0)}
  #s2:checked ~ .slides{transform:translateX(-100%)}
  #s3:checked ~ .slides{transform:translateX(-200%)}
  #s1:checked ~ .slider-nav label[for=s1],
  #s2:checked ~ .slider-nav label[for=s2],
  #s3:checked ~ .slider-nav label[for=s3]{background:#fff}

  /* Sections (cards) */
  main{padding:40px 0}
  section.category{padding:30px 0;border-top:1px solid var(--rule)}
  .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 auto 18px;max-width:1200px;padding:0 20px}
  .section-head h2{margin:0}
  .section-head small{letter-spacing:.08em;text-transform:uppercase}
  .grid{
    display:grid;gap:16px;grid-template-columns:1fr;max-width:1200px;margin:0 auto;padding:0 20px
  }
  article.card{
    background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
    display:flex;flex-direction:column;overflow:hidden;transition:transform var(--speed) ease, box-shadow var(--speed) ease, border-color var(--speed) ease
  }
  .card figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--rule)}
  .card img{width:100%;height:100%;object-fit:cover;filter:grayscale(90%) saturate(.8);transition:filter var(--speed) ease, transform var(--speed) ease}
  .card .body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px}
  .meta{font-size:.85rem;opacity:.75}
  .read-more{align-self:flex-start;margin-top:auto}
  .read-more a{display:inline-block;padding:8px 12px;border:1px solid var(--ink);border-radius:999px;text-decoration:none;color:var(--ink);transition:background var(--speed) ease, color var(--speed) ease, box-shadow var(--speed) ease}
  .read-more a:hover{background:var(--ink);color:#fff;box-shadow:0 0 0 8px var(--ink-10)}
  article.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  article.card:hover img{filter:grayscale(60%) saturate(1);transform:scale(1.03)}

  /* Section variants */
  section.category.culture{background:linear-gradient(180deg, var(--paper), var(--ivory))}
  section.category.culture article.card{background:var(--paper)}
  section.category.style{background:linear-gradient(180deg, var(--ivory), var(--bone))}
  section.category.style article.card{background:var(--ivory)}
  section.category.itineraries{background:linear-gradient(180deg, var(--bone), var(--paper))}
  section.category.itineraries article.card{background:var(--bone);border-color:rgba(13,27,42,.25)}
  section.category.itineraries .read-more a{border-color:var(--burgundy);color:var(--burgundy)}
  section.category.itineraries .read-more a:hover{background:var(--burgundy);color:#fff;box-shadow:0 0 0 8px var(--burgundy-30)}

  /* Blog list */
  .blog-list{border-top:1px solid var(--rule);padding:34px 0;background:var(--paper)}
  .blog-list .wrap>h2{margin:0 0 12px}
  .blog-list ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:14px}
  .blog-list li a{
    display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:12px;border:1px solid var(--rule);border-radius:12px;background:var(--ivory);
  }
  .blog-list li img{width:96px;height:64px;object-fit:cover;filter:grayscale(85%) contrast(1.05)}
  .blog-list li a:hover{box-shadow:var(--shadow);border-color:var(--ink)}

  /* Content */
  .content-wrap{max-width:800px;margin:40px auto;padding:0 20px}
  .lead-image{display:grid;place-items:center;margin:10px auto 10px;max-width:760px;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:#000}
  .lead-image img{width:100%;height:auto;object-fit:cover;filter:grayscale(85%)}
  .rating{font-family:Georgia,serif;font-style:italic;margin:10px 0;padding:8px 12px;border-left:2px solid var(--burgundy);background:linear-gradient(90deg, rgba(110,40,49,.06), transparent)}
  .divider{margin:18px 0;border:0;border-top:1px solid var(--rule)}
  article[itemscope]{padding:8px 0}
  article[itemscope] h1{font-size:2rem;margin:.2em 0}
  .article-meta{font-size:.9rem;opacity:.8}
  .article-body{margin-top:10px}

  .pager{display:flex;justify-content:space-between;gap:12px;margin:22px 0}
  .pager a{padding:10px 12px;border:1px solid var(--rule);border-radius:10px;text-decoration:none;background:var(--ivory)}
  .pager a:hover{border-color:var(--ink);box-shadow:var(--shadow)}

  /* Comments */
  .comments{margin:28px 0;padding:18px;border:1px dashed var(--rule);border-radius:12px;background:var(--paper)}
  .comments h3{margin:0 0 10px}
  .comment-form{display:grid;gap:10px}
  .comment-form input,.comment-form textarea{
    width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:#fff
  }
  .comment-form button{justify-self:start}

  /* Related */
  .related{margin:28px 0}
  .related-grid{display:grid;gap:12px;grid-template-columns:1fr}
  .related a{display:block;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--paper)}
  .related figure{margin:0}
  .related img{width:100%;height:160px;object-fit:cover;filter:grayscale(85%)}
  .related .cap{padding:10px}

  /* Contacts */
  .contact-block{padding:34px 20px;background:linear-gradient(180deg, var(--paper), var(--ivory));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .contact-grid{display:grid;gap:18px;max-width:1100px;margin:0 auto}
  .contact-form{display:grid;gap:10px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:16px}
  .contact-form input,.contact-form textarea{padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:#fff}
  .address, .contact-note{background:var(--ivory);border:1px solid var(--rule);border-radius:12px;padding:16px}
  .map{border:1px solid var(--rule);border-radius:12px;overflow:hidden;height:240px}
  .map iframe{border:0;width:100%;height:100%}

  /* Aside promos + Modal */
  aside{max-width:1200px;margin:34px auto;padding:0 20px}
  .promo-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .promo a{display:block;padding:16px;border:1px solid var(--rule);border-radius:12px;background:var(--bone);text-decoration:none}
  .promo a:hover{box-shadow:var(--shadow);border-color:var(--ink)}
  /* CSS-only modal via :target */
  .modal{
    position:fixed;inset:0;background:rgba(0,0,0,.35);
    display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity var(--speed) ease;z-index:100
  }
  .modal:target{opacity:1;pointer-events:auto}
  .modal .dialog{
    width:min(560px, 92vw);background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:18px 18px 16px;box-shadow:0 30px 60px rgba(0,0,0,.18)
  }
  .modal .dialog h3{margin-top:2px}
  .modal .dialog form{display:grid;gap:10px;margin-top:10px}
  .modal .dialog input,.modal .dialog textarea{padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:#fff}
  .modal .close{
    position:absolute;top:14px;right:14px;padding:8px 10px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);text-decoration:none
  }

  /* Footer */
  footer{
    border-top:1px solid var(--rule);background:var(--paper)
  }
  .footer-grid{
    max-width:1200px;margin:0 auto;padding:28px 20px;display:grid;gap:18px
  }
  .footer-grid .slogan{font-family:Georgia,serif;font-size:1.4rem}
  .about{opacity:.85}
  .social{display:flex;gap:14px;flex-wrap:wrap}
  .social a{padding:6px 10px;border:1px solid var(--rule);border-radius:999px;text-decoration:none;background:var(--ivory)}
  .copy{border-top:1px solid var(--rule);padding:12px 20px;opacity:.7;max-width:1200px;margin:0 auto}

  /* Responsive */
  @media (min-width:768px){
    .grid{grid-template-columns:repeat(2, 1fr)}
    .blog-list ul{grid-template-columns:repeat(2,1fr)}
    .related-grid{grid-template-columns:repeat(3,1fr)}
    .promo-grid{grid-template-columns:repeat(4,1fr)}
    .contact-grid{grid-template-columns:1.2fr 1fr}
    .contact-aside{display:grid;gap:12px}
  }
  @media (min-width:1200px){
    /* Desktop nav */
    .burger{display:none}
    nav.nav{
      position:static;height:auto;width:auto;transform:none;box-shadow:none;padding:0;background:transparent;flex-direction:row;gap:24px;align-items:center
    }
    nav.nav ul{flex-direction:row;gap:18px}
    nav.nav li a{border:0;padding:6px 4px;text-decoration:underline}
    .slider .slide{height:58vh}
    .grid{grid-template-columns:repeat(3, 1fr)}
    .blog-list ul{grid-template-columns:repeat(3,1fr)}
    .footer-grid{grid-template-columns:1.6fr 1fr .8fr}
  }