/* Homepage polish: warm timber, orchard dusk and restrained Somerset countryside tones. */

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(230, 171, 83, .08), transparent 30rem),
    linear-gradient(180deg, #160e0b, #21140f 45%, #120b09);
}

body::before {
  background-image:
    repeating-linear-gradient(90deg, rgba(245, 227, 194, .012) 0 1px, transparent 1px 44px);
}

.site-header.is-scrolled {
  background: rgba(24, 14, 11, .92);
  border-color: rgba(237, 206, 156, .16);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.hero::before {
  background:
    radial-gradient(circle at 76% 18%, rgba(238, 170, 76, .30), transparent 29rem),
    radial-gradient(circle at 58% 62%, rgba(169, 70, 37, .12), transparent 32rem),
    linear-gradient(90deg, rgba(31, 18, 12, .86), rgba(26, 17, 12, .52) 48%, rgba(18, 10, 7, .78)),
    linear-gradient(180deg, rgba(13, 8, 5, .18), rgba(15, 8, 5, .82));
}

.home-intro {
  --cabin-dark: #17100c;
  --cabin: #261912;
  --cabin-light: #382419;
  --sunset: #d17a3d;
  --ember: #a44b30;
  --honey: #e3b44f;
  --parchment: #f3e4c6;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 72% -8%, rgba(209, 122, 61, .20), transparent 46%),
    radial-gradient(circle at 10% 22%, rgba(227, 180, 79, .08), transparent 27rem),
    linear-gradient(180deg, #25170f 0%, #17100c 100%);
}

.home-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .58;
  background:
    repeating-linear-gradient(176deg, rgba(255, 239, 207, .014) 0 1px, transparent 1px 13px),
    linear-gradient(90deg, transparent, rgba(207, 115, 58, .035) 48%, transparent);
}

.home-intro .section-heading {
  max-width: 720px;
  margin-bottom: clamp(30px, 4vw, 46px);
}

.home-intro .section-heading h2 {
  font-size: clamp(2.35rem, 4.2vw, 3.9rem);
}

.home-intro .section-label {
  color: var(--honey);
}

.home-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  align-items: stretch;
}

.home-intro-panel {
  position: relative;
  min-width: 0;
  min-height: 430px;
  padding: clamp(28px, 3.6vw, 44px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(228, 184, 113, .19);
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(83, 48, 29, .42), rgba(31, 22, 17, .90)),
    var(--cabin);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 203, .045),
    0 24px 58px rgba(0, 0, 0, .20);
}

.home-intro-panel:nth-child(2) {
  background:
    radial-gradient(circle at 94% 3%, rgba(164, 75, 48, .14), transparent 19rem),
    linear-gradient(145deg, rgba(73, 41, 28, .38), rgba(29, 21, 17, .92)),
    var(--cabin);
}

.home-intro-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 236, 196, .028), transparent 32%, transparent 70%, rgba(209, 122, 61, .025));
}

.home-intro-panel > * {
  position: relative;
  z-index: 1;
}

.home-intro-panel h2 {
  max-width: 13ch;
  margin-bottom: 18px;
  font-size: clamp(2.15rem, 3.15vw, 3.15rem);
  line-height: 1.01;
}

.home-intro-panel p {
  max-width: 58ch;
  color: rgba(243, 228, 198, .80);
}

.home-intro-panel p + p {
  margin-top: 4px;
}

.home-intro-panel p:last-of-type {
  margin-bottom: 0;
}

.home-intro-panel .button-row {
  margin-top: auto;
  padding-top: 26px;
}

.home-intro .btn-primary {
  background: linear-gradient(180deg, #f0ca70, #dda43d);
  box-shadow: 0 10px 28px rgba(160, 88, 38, .15);
}

.home-intro .btn-secondary {
  border-color: rgba(232, 196, 137, .24);
  background: rgba(124, 77, 48, .18);
}

.home-intro .btn-secondary:hover {
  background: rgba(141, 84, 49, .28);
}

.home-points {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  list-style: none;
}

.home-points li {
  position: relative;
  padding: 18px 18px 18px 50px;
  border: 1px solid rgba(228, 184, 113, .18);
  border-radius: 20px;
  color: rgba(243, 228, 198, .82);
  background: rgba(255, 233, 194, .035);
}

.home-points li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 25px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 5px rgba(227, 180, 79, .11);
}

.makers-section {
  background: linear-gradient(180deg, #f0dfbf 0%, #dcc39a 100%);
}

.home-route-summary {
  border-block: 1px solid rgba(228, 184, 113, .16);
  background: rgba(126, 76, 45, .055);
}

.home-route-summary .route-step {
  min-height: 250px;
}

.home-final-cta {
  background:
    radial-gradient(circle at 84% 8%, rgba(190, 87, 43, .18), transparent 30rem),
    radial-gradient(circle at 10% 100%, rgba(225, 166, 73, .07), transparent 26rem),
    linear-gradient(180deg, #1b110d, #120b09);
}

.home-final-panel {
  padding: clamp(32px, 6vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  border: 1px solid rgba(228, 184, 113, .19);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 10%, rgba(209, 122, 61, .13), transparent 22rem),
    linear-gradient(145deg, rgba(95, 54, 31, .34), rgba(255, 235, 199, .035));
  box-shadow: inset 0 1px 0 rgba(255, 238, 203, .04);
}

.home-final-panel h2 {
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
}

.home-final-panel p {
  max-width: 740px;
  color: rgba(243, 228, 198, .79);
}

.home-final-panel .button-row {
  margin-top: 0;
  justify-content: flex-end;
}

.site-footer {
  background: #100a08;
}

.back-to-top {
  background: rgba(27, 16, 12, .90);
}

.age-gate {
  background: rgba(18, 10, 7, .96);
}

.age-gate-card {
  background:
    radial-gradient(circle at 88% 5%, rgba(209, 122, 61, .14), transparent 18rem),
    linear-gradient(145deg, #302016, #1a110d);
}

@supports (color: color-mix(in oklch, white, black)) {
  .home-intro-panel {
    border-color: color-mix(in oklch, var(--sunset) 28%, transparent);
  }

  .home-intro-panel p,
  .home-final-panel p {
    color: color-mix(in oklch, var(--parchment) 82%, #b98b66 18%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .home-intro-panel {
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  }

  .home-intro-panel:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 176, 94, .34);
    box-shadow:
      inset 0 1px 0 rgba(255, 238, 203, .055),
      0 30px 72px rgba(0, 0, 0, .25);
  }
}

@media (max-width: 920px) {
  .home-intro-grid,
  .home-final-panel {
    grid-template-columns: 1fr;
  }

  .home-intro-panel {
    min-height: 0;
  }

  .home-intro-panel h2 {
    max-width: 16ch;
  }

  .home-final-panel .button-row {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .home-intro .section-heading h2 {
    font-size: clamp(2.25rem, 12vw, 3.2rem);
  }

  .home-intro-panel {
    padding: 28px 24px;
    border-radius: 22px;
  }

  .home-intro-panel h2 {
    font-size: clamp(2rem, 10.5vw, 2.75rem);
  }
}