:root {
  --ink: #122b58;
  --ink-soft: #39507c;
  --muted: #57709c;
  --line: rgba(53, 84, 138, 0.16);
  --paper: #f6f9ff;
  --card: rgba(255,255,255,0.76);
  --card-strong: rgba(255,255,255,0.86);
  --blue: #3358ff;
  --blue-2: #5c8cff;
  --shadow: 0 18px 44px rgba(35, 61, 122, 0.14);
  --shadow-heavy: 0 30px 65px rgba(35, 61, 122, 0.16);
  --max: 1520px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, #eef5ff 0%, #f8fbff 22%, #f6f9ff 100%);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.page-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: -2;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.78), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.55), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.72), transparent 40%),
    linear-gradient(180deg, #ebf4ff 0%, #f8fbff 100%);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  height: 96px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 92px);
  border-bottom: 1px solid rgba(255,255,255,.34);
}
.brand { display: inline-flex; align-items: center; gap: 18px; min-width: 0; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(from 210deg, #3358ff 0 32%, #4ba9ff 32% 66%, #6b6fff 66% 100%);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.76), 0 8px 18px rgba(72,102,193,.18);
}
.brand-name {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(1.8rem, 2.4vw, 3rem);
  letter-spacing: -.02em;
  color: #142650;
}
.main-nav { display: flex; align-items: center; gap: 36px; font-size: 1rem; color: #17345f; }
.main-nav > a:not(.nav-cta) { position: relative; padding: 34px 0 28px; }
.main-nav > a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 18px; height: 2px;
  background: var(--blue); transition: right .22s ease;
}
.main-nav > a:not(.nav-cta):hover::after { right: 0; }
.nav-cta {
  color: #fff; padding: 16px 30px; border-radius: 999px;
  background: linear-gradient(135deg, #3c53ff 0%, #2e6bff 42%, #5790ff 100%);
  box-shadow: 0 18px 28px rgba(58, 86, 255, .22), inset 0 0 0 2px rgba(255,255,255,.32);
}
.menu-toggle { display: none; }
.hero {
  position: relative; min-height: 860px; overflow: hidden;
  background: url('assets/hero.jpg') center center / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 210px;
  background: linear-gradient(to bottom, rgba(246,249,255,0), rgba(246,249,255,.98) 78%, #f6f9ff 100%);
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(249,252,255,.76) 0%, rgba(249,252,255,.54) 27%, rgba(249,252,255,.12) 55%, rgba(249,252,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 24%, rgba(255,255,255,.1));
}
.hero-inner {
  position: relative; z-index: 2; max-width: var(--max); margin: 0 auto;
  padding: 150px clamp(24px, 6vw, 96px) 330px;
}
.eyebrow {
  margin: 0 0 16px; font-size: .92rem; font-weight: 700; letter-spacing: .48em; color: #314f83;
}
.hero h1 {
  margin: 0; max-width: 780px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.5rem, 8vw, 7.8rem); line-height: .9; font-weight: 400; letter-spacing: -.05em;
  color: #081b43;
}
.hero-subtitle {
  margin: 14px 0 0; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.2vw, 4rem); line-height: 1; letter-spacing: -.03em; color: #163266;
}
.hero-description {
  max-width: 760px; margin: 18px 0 0; font-size: 1.22rem; line-height: 1.55; color: #34517f;
}
.hero-actions { display: flex; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.button {
  min-height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 30px; border-radius: 999px; font-weight: 700; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  color: #fff; background: linear-gradient(135deg, #3d51ff 0%, #3266ff 48%, #5294ff 100%);
  box-shadow: 0 14px 24px rgba(64, 93, 255, .18), inset 0 0 0 2px rgba(255,255,255,.35);
}
.button-secondary {
  background: rgba(255,255,255,.86); color: #163266; border-color: rgba(79, 111, 207, .28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.button-dark {
  min-height: 52px; border-radius: 14px; color: #fff; background: #102751;
}
.destinations-wrap {
  position: relative; z-index: 4; max-width: var(--max); margin: -250px auto 0;
  padding: 0 clamp(20px, 4vw, 56px) 40px;
}
.destination-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px;
}
.destination-card {
  border-radius: 24px; overflow: hidden; background: var(--card);
  border: 1px solid rgba(255,255,255,.62);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-heavy);
  transition: transform .2s ease, box-shadow .2s ease;
}
.destination-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px rgba(29, 53, 108, .19); }
.destination-art {
  aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(180deg, #edf5ff 0%, #ffffff 100%);
}
.destination-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.destination-body { padding: 18px 20px 20px; }
.destination-body h3 {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 400; line-height: 1.02; letter-spacing: -.03em; color: #132a55;
}
.destination-body p { margin: 10px 0 18px; color: #466184; font-size: 1.04rem; line-height: 1.45; }
.card-link-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #112a57;
}
.card-arrow {
  width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(121, 146, 193, .4); color: #163266; background: rgba(255,255,255,.6);
}
.about-section {
  max-width: var(--max); margin: 0 auto; padding: 44px clamp(24px, 6vw, 96px) 86px;
  display: grid; grid-template-columns: minmax(320px, .95fr) minmax(480px, 1.55fr); gap: 48px; align-items: end;
}
.about-copy h2 {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: .98;
  font-size: clamp(3rem, 5vw, 5.3rem); letter-spacing: -.05em; color: #10224c;
}
.about-copy p:not(.eyebrow) {
  margin-top: 16px; max-width: 530px; color: #557099; font-size: 1.12rem; line-height: 1.58;
}
.about-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow);
}
.site-footer {
  max-width: var(--max); margin: 0 auto; padding: 24px clamp(24px, 6vw, 96px) 52px;
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px;
  color: #5a7298;
}
.site-footer strong { display: block; color: #132856; margin-bottom: 6px; letter-spacing: .06em; }
.footer-links { display: flex; gap: 24px; color: #14305e; }

/* library page */
.library-main {
  max-width: 1540px; margin: 0 auto; padding: 130px 24px 80px;
}
.library-main h1 {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.6rem, 6vw, 6.8rem); font-weight: 400; letter-spacing: -.05em;
}
.library-main .intro {
  max-width: 900px; color: #53709b; font-size: 1.12rem; line-height: 1.65; margin-top: 16px;
}
.art-library-grid {
  margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;
}
.art-card {
  border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.72); box-shadow: var(--shadow);
}
.art-card img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; }
.art-card-body { padding: 14px 16px 16px; }
.art-card-body strong { display: block; color: #142b58; margin-bottom: 8px; }
.art-card-body code {
  display: inline-block; padding: 8px 10px; border-radius: 10px; background: #edf4ff; color: #1a3a6c;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem;
}
.notes {
  margin-top: 38px; padding: 22px 24px; border-radius: 18px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.76);
  color: #456283; line-height: 1.65;
}
.notes code { color: #17335e; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (max-width: 1100px) {
  .main-nav { gap: 24px; }
  .hero { min-height: 920px; }
  .hero-inner { padding-bottom: 360px; }
  .destinations-wrap { margin-top: -270px; }
}
@media (max-width: 980px) {
  .site-header { height: 82px; }
  .menu-toggle {
    display: grid; width: 46px; height: 46px; place-content: center; gap: 5px; background: rgba(255,255,255,.72);
    border: 1px solid rgba(40,72,128,.14); border-radius: 14px; cursor: pointer;
  }
  .menu-toggle span:not(.sr-only) { display: block; width: 20px; height: 2px; background: #17345f; }
  .main-nav {
    position: absolute; display: none; top: 72px; right: 18px; width: 250px; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px; background: rgba(255,255,255,.96); border-radius: 20px; box-shadow: var(--shadow-heavy); border: 1px solid rgba(53,84,138,.14);
  }
  .main-nav.is-open { display: flex; }
  .main-nav > a:not(.nav-cta) { padding: 13px 10px; }
  .main-nav > a:not(.nav-cta)::after { display: none; }
  .nav-cta { text-align: center; margin-top: 4px; }
  .about-section { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* Mobile header stays compact so the hero artwork gets the screen space. */
  .site-header { padding-left: 16px; padding-right: 16px; }
  .brand { gap: 10px; }
  .brand-mark { width: 30px; height: 30px; flex: 0 0 auto; }
  .brand-name {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    white-space: nowrap;
  }

  /*
     On desktop the panoramic hero is intentionally used as a cover image.
     That crops badly on a tall phone. On mobile we show the panorama at its
     full width, then fade it into the page below so the wolf, lake and
     mountains remain visible instead of zooming into one small section.
  */
  .hero {
    min-height: 0;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #f6f9ff;
    overflow: hidden;
  }
  .hero::after {
    height: 120px;
    background: linear-gradient(to bottom, rgba(246,249,255,0), #f6f9ff 82%);
  }
  .hero-overlay {
    background:
      linear-gradient(to bottom,
        rgba(246,249,255,0) 0,
        rgba(246,249,255,.05) 22vw,
        rgba(246,249,255,.74) 47vw,
        #f6f9ff 64vw,
        #f6f9ff 100%);
  }
  .hero-inner {
    padding: clamp(248px, 60vw, 430px) 18px 70px;
    max-width: 100%;
  }
  .eyebrow {
    margin-bottom: 10px;
    font-size: .68rem;
    line-height: 1.35;
    letter-spacing: .28em;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(2.7rem, 12.7vw, 4.55rem);
    line-height: .94;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
  }
  .hero-subtitle {
    margin-top: 10px;
    font-size: clamp(1.45rem, 6.3vw, 2rem);
    line-height: 1.05;
  }
  .hero-description {
    margin-top: 12px;
    max-width: 34rem;
    font-size: .96rem;
    line-height: 1.48;
  }
  .hero-actions {
    gap: 10px;
    margin-top: 20px;
  }
  .hero-actions .button {
    min-height: 46px;
    padding: 0 17px;
    font-size: .86rem;
  }

  /* The cards become a compact two-column gallery instead of full-screen slabs. */
  .destinations-wrap {
    margin-top: -18px;
    padding: 0 10px 28px;
  }
  .destination-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .destination-card { border-radius: 16px; }
  .destination-card:hover { transform: none; }
  .destination-art { aspect-ratio: 16 / 10; }
  .destination-body { padding: 11px 11px 12px; }
  .destination-body h3 {
    font-size: clamp(1.03rem, 4.8vw, 1.28rem);
    line-height: 1.03;
  }
  .destination-body p {
    margin: 6px 0 10px;
    font-size: .79rem;
    line-height: 1.33;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-link-row { gap: 6px; }
  .card-link { gap: 4px; font-size: .78rem; }
  .card-arrow { width: 31px; height: 31px; font-size: .85rem; flex: 0 0 auto; }

  /* Keep the bottom three landscapes together, matching the desktop composition. */
  .about-section {
    padding: 30px 18px 54px;
    gap: 28px;
  }
  .about-copy h2 {
    font-size: clamp(2.45rem, 11vw, 3.6rem);
  }
  .about-copy p:not(.eyebrow) {
    margin-top: 12px;
    font-size: .96rem;
  }
  .about-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .about-gallery img {
    aspect-ratio: 4 / 3;
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(34, 62, 112, .12);
  }

  .site-footer {
    padding: 24px 18px 42px;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-links { flex-wrap: wrap; gap: 15px; }

  /* The artwork chooser is also more practical on a phone. */
  .library-main { padding: 110px 12px 60px; }
  .library-main h1 { font-size: clamp(2.8rem, 13vw, 4.6rem); }
  .art-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .art-card { border-radius: 14px; }
  .art-card-body { padding: 10px; }
  .art-card-body code { font-size: .68rem; padding: 6px 7px; }
}

@media (max-width: 380px) {
  .hero-inner { padding-top: max(225px, 61vw); }
  .hero h1 { font-size: clamp(2.45rem, 12.3vw, 3rem); }
  .hero-actions .button { padding-inline: 13px; font-size: .8rem; }
  .destination-body { padding: 9px 9px 10px; }
  .destination-body h3 { font-size: 1rem; }
  .destination-body p { font-size: .75rem; }
}

/* ================================================================
   MOBILE V2 — definitive phone layout
   Appended last intentionally so these rules override earlier
   responsive rules. Desktop (>760px) is completely unchanged.
   ================================================================ */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  /* Show the ENTIRE 16:9-ish hero artwork on phones instead of cropping it. */
  .hero {
    min-height: 0 !important;
    background: #f6f9ff !important;
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    aspect-ratio: 1672 / 941;
    background-image: url('assets/hero.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
  .hero::after {
    z-index: 1;
    top: calc(56.28vw - 78px);
    bottom: auto;
    height: 82px;
    background: linear-gradient(to bottom, rgba(246,249,255,0), #f6f9ff 92%);
  }
  .hero-overlay {
    z-index: 1;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 56.28vw;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 72%, rgba(246,249,255,.22));
    pointer-events: none;
  }
  .hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: -18px 0 0 !important;
    padding: 0 16px 46px !important;
  }

  /* Keep the main title on-screen. */
  .hero h1 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: clamp(2.35rem, 11.25vw, 3.8rem) !important;
    line-height: .96 !important;
    letter-spacing: -.05em;
    white-space: nowrap;
    overflow-wrap: normal !important;
    word-break: normal;
  }
  .hero-subtitle {
    font-size: clamp(1.3rem, 5.6vw, 1.8rem) !important;
    line-height: 1.08;
  }
  .hero-description {
    max-width: 34rem;
    font-size: .92rem !important;
    line-height: 1.42;
  }
  .hero-actions { margin-top: 17px; gap: 8px; }
  .hero-actions .button {
    min-height: 43px;
    padding: 0 14px;
    font-size: .80rem;
  }

  /* Cards: two compact tiles per row, not one near-full-screen card. */
  .destinations-wrap {
    margin-top: -10px !important;
    padding: 0 8px 28px !important;
  }
  .destination-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .destination-card {
    min-width: 0;
    border-radius: 14px !important;
    box-shadow: 0 9px 24px rgba(29,53,108,.13) !important;
  }
  .destination-art {
    aspect-ratio: 1.45 / 1 !important;
  }
  .destination-body {
    padding: 9px 9px 10px !important;
  }
  .destination-body h3 {
    font-size: clamp(.98rem, 4.4vw, 1.16rem) !important;
    line-height: 1.02 !important;
  }
  .destination-body p {
    margin: 5px 0 8px !important;
    font-size: .72rem !important;
    line-height: 1.28 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 1.85em;
  }
  .card-link { font-size: .72rem !important; }
  .card-arrow {
    width: 27px !important;
    height: 27px !important;
    font-size: .75rem !important;
  }

  /* Bottom artwork: keep the desktop three-image composition on one row. */
  .about-section {
    grid-template-columns: 1fr !important;
    padding: 28px 16px 46px !important;
    gap: 22px !important;
  }
  .about-copy h2 {
    font-size: clamp(2.2rem, 10vw, 3.25rem) !important;
  }
  .about-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100%;
  }
  .about-gallery img {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 16px rgba(34,62,112,.10) !important;
  }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 2.18rem !important; }
  .destination-body h3 { font-size: .93rem !important; }
  .destination-body p { font-size: .68rem !important; }
  .hero-actions .button { padding-inline: 11px; font-size: .76rem; }
}