/* =========================================================
   Home page
   Positions come straight from the Figma frame "MacBook Air - 2"
   (1280px wide). In the hero, every number is a Figma pixel
   multiplied by --u, so the composition shrinks evenly on
   smaller screens.
   ========================================================= */

/* ---------- Hero ---------- */
.hero {
  --u: min(1px, 100vw / 1280);
  height: calc(989 * var(--u));
}
.hero > * { position: absolute; z-index: 2; }

/* Header (home variant) */
.site-header--home .site-title,
.site-header--home .site-tagline,
.site-header--home .site-nav { position: absolute; white-space: nowrap; }
.site-header--home .site-nav ul { flex-wrap: nowrap; }
.site-header--home .site-title { left: calc(78 * var(--u)); top: calc(47 * var(--u)); font-size: calc(60.197 * var(--u)); }
.site-header--home .site-tagline { left: calc(91 * var(--u)); top: calc(125 * var(--u)); font-size: calc(34.569 * var(--u)); }
.site-header--home .site-nav { left: calc(60 * var(--u)); top: calc(182 * var(--u)); }
.site-header--home .site-nav ul { column-gap: calc(24 * var(--u)); }
.site-header--home .site-nav a { font-size: calc(28.24 * var(--u)); }

/* Map illustration */
.hero-art { inset: 0; z-index: 1; }
.hero-art > * { position: absolute; }

.map {
  left: calc(62.2 * var(--u)); top: calc(34.36 * var(--u));
  width: calc(1154.57 * var(--u)); height: calc(936.68 * var(--u));
  transform: rotate(7.95deg);
  overflow: hidden;
}
.map img { position: absolute; left: -0.01%; top: 0; width: 100.02%; }

.lens {
  left: calc(1021.5 * var(--u)); top: calc(491.25 * var(--u));
  width: calc(291.59 * var(--u)); height: calc(213.66 * var(--u));
  transform: rotate(16.63deg);
  overflow: hidden;
}
.lens img { position: absolute; left: -51.47%; top: -445.57%; width: 396.05%; height: 581.63%; }

.lens-ring {
  left: calc(1042 * var(--u)); top: calc(516 * var(--u));
  width: calc(296 * var(--u)); height: calc(249 * var(--u));
  transform: rotate(26.89deg);
}

.map-dot {
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(21 * var(--u)); height: calc(21 * var(--u));
}

/* Small map tooltip (placeholder text from Figma) */
.map-tip {
  left: calc(897 * var(--u)); top: calc(493 * var(--u));
  width: calc(118 * var(--u)); height: calc(69.12 * var(--u));
  font-size: calc(10 * var(--u));
  white-space: nowrap;
}
.map-tip > * { position: absolute; }
.map-tip__box { inset: 0 0 29.11% 0; background: #fff; border: 1px solid #000; border-radius: calc(10 * var(--u)); }
.map-tip__name { left: 26.27%; top: 2.89%; font-family: var(--font-latin); font-weight: 700; }
.map-tip__place { left: 11.86%; top: 23.15%; color: var(--ink-muted); }
.map-tip__place b { font-weight: 700; }
.map-tip__link { left: 28.81%; top: 43.4%; font-family: var(--font-latin); font-weight: 700; }
.map-tip__tri1 {
  left: calc(59.05 * var(--u)); top: calc(53.06 * var(--u));
  width: calc(20.37 * var(--u)); height: calc(17.64 * var(--u));
  transform: translate(-50%, -50%) rotate(60deg);
}
.map-tip__tri2 {
  left: calc(86.2 * var(--u)); top: calc(38.2 * var(--u));
  width: calc(6.58 * var(--u)); height: calc(5.7 * var(--u));
  transform: translate(-50%, -50%) rotate(-30deg);
}

/* Featured article card */
.feature-card {
  left: calc(60 * var(--u)); top: calc(276 * var(--u));
  width: calc(510 * var(--u)); height: calc(296 * var(--u));
  border: 1px solid #000;
  border-radius: calc(27 * var(--u));
}
.feature-card__label {
  position: absolute; left: 0; right: 0; top: 0;
  text-align: center;
  font-size: calc(28.24 * var(--u));
}
.feature-card__image {
  position: absolute; left: -1px; right: -1px; bottom: -1px;
  height: calc(237 * var(--u));
  background: var(--placeholder);
  border: 1px solid #000;
  border-radius: calc(26 * var(--u));
}
.feature-card:hover .feature-card__image { filter: brightness(0.97); }

.hero-intro {
  left: calc(658 * var(--u)); top: calc(795 * var(--u));
  width: calc(593 * var(--u));
  text-align: center;
  font-weight: 300;
  font-size: calc(26.281 * var(--u));
}

/* ---------- Sections ---------- */
.block .section-sub { min-height: 57.4px; }

/* Regions */
.block--regions .section-title { margin-left: 91px; }
.block--regions .section-sub { margin-left: 98px; }

.region-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 383.3px));
  gap: 63px 22px;
  margin-top: 60.6px;
  padding: 0 41px 0 45px;
}
.region-card {
  display: block;
  aspect-ratio: 383.3 / 287;
  border: 1px solid #000;
  border-radius: var(--radius-card);
  text-align: center;
}
a.region-card:hover { background: rgba(255, 255, 255, 0.25); }
.region-card__name {
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 54.638px;
}

/* Journal */
.block--journal { margin-top: 159px; }
.block--journal .section-title { margin-left: 94px; }
.block--journal .section-sub { margin-left: 106px; }

.journal-row,
.walks-row {
  gap: 27px;
  margin-top: 23.6px;
  padding: 0 36px;
}

.jcard {
  position: relative;
  display: block;
  width: 535.94px;
  aspect-ratio: 535.94 / 670;
  border: 1px solid #000;
  border-radius: var(--radius-card);
  container-type: inline-size;
}
.jcard--filled { background: rgba(217, 217, 217, 0.36); }
a.jcard:hover { background: rgba(217, 217, 217, 0.5); }

/* Inside the card, --k is one Figma pixel, scaled to the card's width */
.jcard__inner { --k: calc(100cqw / 534); position: absolute; inset: 0; }
.jcard__inner > * { position: absolute; }

.jcard__frame {
  left: calc(34.23 * var(--k)); top: calc(36 * var(--k));
  width: calc(187 * var(--k)); height: calc(224 * var(--k));
  border: calc(3 * var(--k)) solid var(--teal);
  border-radius: calc(11 * var(--k));
}
.jcard__photo {
  left: calc(58.23 * var(--k)); top: calc(51 * var(--k));
  width: calc(185 * var(--k)); height: calc(194 * var(--k));
  border-radius: calc(16 * var(--k));
  overflow: hidden;
}
.jcard__photo img { position: absolute; left: -14.85%; top: -29.8%; width: 123.76%; height: 157.23%; }

.jcard__tag {
  left: calc(287.23 * var(--k)); top: calc(var(--y) * var(--k));
  width: calc(187 * var(--k)); height: calc(42 * var(--k));
  border-width: calc(3 * var(--k));
  font-size: calc(20 * var(--k));
}
.jcard__title {
  left: calc(278.7 * var(--k)); top: calc(294 * var(--k));
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--ink-soft);
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: calc(60.197 * var(--k));
}
.jcard__line {
  left: 0; right: 0; top: calc(376 * var(--k));
  border-top: 1px solid var(--teal);
}
.jcard__text {
  left: calc(278.7 * var(--k)); top: calc(403 * var(--k));
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-size: calc(36 * var(--k));
}

/* Walks */
.block--walks { margin-top: 121px; padding-bottom: 240px; }
.block--walks .section-title { margin-left: 94px; }
.block--walks .section-sub { margin-left: 108px; }

.wcard {
  width: 535.94px;
  aspect-ratio: 535.94 / 258;
  border: 1px solid #000;
  border-radius: var(--radius-card);
}

/* ---------- Tablets ---------- */
@media (max-width: 1100px) {
  .region-card__name { font-size: 40px; }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .hero {
    --u: calc(100vw / 1280);
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px 0;
  }
  .hero > * { position: relative; inset: auto; left: auto; top: auto; }

  .site-header--home .site-title,
  .site-header--home .site-tagline,
  .site-header--home .site-nav { position: static; }
  .site-header--home .site-title { font-size: 40px; }
  .site-header--home .site-tagline { font-size: 22px; margin-top: 2px; }
  .site-header--home .site-nav { margin-top: 12px; }
  .site-header--home .site-nav ul { column-gap: 16px; }
  .site-header--home .site-nav a { font-size: 18px; }

  .hero-art { order: 1; height: calc(990 * var(--u)); margin: 0 -16px; }

  .hero-intro { order: 2; width: auto; font-size: 16px; line-height: 1.7; }
  .hero-intro br { display: none; }

  .feature-card { order: 3; width: 100%; height: auto; aspect-ratio: 510 / 296; border-radius: 22px; }
  .feature-card__label { font-size: 20px; top: 4px; }
  .feature-card__image { height: 80%; border-radius: 21px; }

  .block--regions { margin-top: 56px; }
  .block .section-title,
  .block .section-sub { margin-left: 16px !important; }
  .block .section-sub { min-height: 0; }

  .region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
    padding: 0 16px;
  }
  .region-card { border-radius: 20px; }
  .region-card__name { font-size: 28px; }

  .block--journal,
  .block--walks { margin-top: 64px; }
  .block--walks { padding-bottom: 96px; }

  .journal-row,
  .walks-row { gap: 12px; margin-top: 20px; padding: 0 16px; }
  .jcard,
  .wcard { width: 82vw; border-radius: 20px; }
}