/*  ─────────────────────────────────────────────────────────────
    VillageHQ
    1. Tokens          the palette and type
    2. Page            wrap, nav
    3. The hero         the illustration, masthead, sign
    4. Places          pins on the map (wide screens)
    5. The list        the layout for phones
    6. About / footer
    7. Motion          everything that moves, and how to stop it
    ───────────────────────────────────────────────────────────── */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  --paper:        #f7f1e6;
  --paper-2:      #efe5d3;
  --paper-3:      #e6d9c2;
  --cloud:        #fffcf5;

  --ink:          #2a3238;
  --ink-2:        #55616b;
  --ink-3:        #8b949c;

  --olive:        #5c6e40;
  --olive-d:      #3f4f2c;
  --olive-l:      #7d9159;

  --terracotta:   #c4664a;
  --terracotta-d: #a2503a;
  --terracotta-l: #da8163;

  --sage:         #93a883;
  --sage-d:       #6d7f61;
  --sage-l:       #aebd9d;

  --sky:          #4d7fa8;
  --sky-d:        #395f80;
  --sky-l:        #a9cbe3;

  --lavender:     #93789f;
  --lavender-l:   #c4b3cc;

  --gold:         #d9a441;
  --gold-l:       #f6d489;
  --sand:         #d9b98a;

  --wood:         #c9a87c;
  --wood-d:       #9d7c55;
  --stone:        #d9cdb8;

  --display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand:    'Caveat', var(--display);

  --edge: 22px;
  --shadow-soft: 0 1px 2px rgb(42 50 56 / .06), 0 10px 28px -10px rgb(42 50 56 / .22);
  --shadow-card: 0 2px 4px rgb(42 50 56 / .08), 0 14px 30px -10px rgb(42 50 56 / .28);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 90;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { left: 16px; }

/* ── 2. Page ───────────────────────────────────────────────── */
.wrap {
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(14px, 2.2vw, 30px);
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 6px 18px;
}

.nav__mark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
}

.nav__links {
  display: flex;
  gap: 22px;
  margin-right: auto;
}
.nav__links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
}
.nav__links a:hover,
.nav__links a:focus-visible { color: var(--ink); }

.nav__pill {
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--cloud);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .nav__pill { display: none; }
  .nav__links { gap: 16px; }
}

/* ── 3. The hero ───────────────────────────────────────────── */
.hero {
  position: relative;
  border-radius: var(--edge);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 1536 / 1024;
}

.hero__pic,
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.masthead {
  position: absolute;
  left: 21%;
  top: 4.5%;
  z-index: 20;
  max-width: 32%;
  padding: 18px 22px 22px 4px;
}
.masthead::before {
  content: '';
  position: absolute;
  inset: -8% -14% -30% -18%;
  z-index: -1;
  background: radial-gradient(ellipse at 32% 38%, rgb(255 253 247 / .85), rgb(255 253 247 / 0) 75%);
}

.masthead__title {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}

.masthead__tagline {
  margin: 12px 0 0;
  max-width: 24ch;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.45;
  color: var(--ink-2);
}

.handwritten {
  position: absolute;
  left: 56%;
  top: 6%;
  z-index: 20;
  margin: 0;
  max-width: 19ch;
  font-family: var(--hand);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--olive-d);
  transform: rotate(-2deg);
  text-shadow: 0 1px 3px rgb(255 253 247 / .9), 0 1px 16px rgb(255 253 247 / .8);
}

.sign {
  position: absolute;
  left: 4.5%;
  bottom: 6%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 20px;
  border-radius: 8px;
  background: rgb(247 241 230 / .92);
  border: 1px solid rgb(255 255 255 / .6);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(2px);
}
.sign__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.sign__text {
  font-size: 12.5px;
  color: var(--ink-2);
}

.noscript {
  position: absolute;
  left: 5%;
  bottom: 20%;
  z-index: 25;
  max-width: 44ch;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--cloud);
  box-shadow: var(--shadow-card);
  font-size: 15px;
  color: var(--ink-2);
}

/* ── 4. Places: pins on the map ────────────────────────────── */
.village { position: absolute; inset: 0; z-index: 15; }
.village:focus { outline: none; }

.place {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  text-decoration: none;
  color: inherit;
}
.place--right { transform: translate(-78%, -50%); }
.place--left  { transform: translate(-22%, -50%); }

.place__card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: clamp(148px, 14.5vw, 208px);
  padding: 9px 13px 10px;
  border-radius: 12px;
  background: rgb(255 252 245 / .94);
  border: 1px solid rgb(255 255 255 / .7);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(3px);
  transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease;
}

.place__row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.icon { width: 17px; height: 17px; flex: none; }
.icon--fork     { color: var(--terracotta-d); }
.icon--boat     { color: var(--sky-d); }
.icon--car      { color: var(--olive-d); }
.icon--leaf     { color: var(--sage-d); }
.icon--signpost { color: var(--wood-d); }
.icon--paw      { color: var(--gold); }
.icon--box      { color: var(--lavender); }
.icon--clock    { color: var(--terracotta-d); }

.place__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.place__go {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--terracotta-d);
}

.place__soon {
  margin-left: auto;
  padding: 1px 7px 2px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: lowercase;
}

.place__blurb {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-2);
}

.is-soon .place__card { opacity: .86; }

.place:hover .place__card,
.place:focus-visible .place__card {
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgb(42 50 56 / .1), 0 22px 40px -14px rgb(42 50 56 / .32);
}
.is-soon:hover .place__card,
.is-soon:focus-visible .place__card { transform: none; box-shadow: var(--shadow-card); }

.place:focus-visible {
  outline: none;
}
.place:focus-visible .place__card {
  outline: 2.5px solid var(--terracotta-d);
  outline-offset: 2px;
}

/* ── 5. The list: phones and small tablets ─────────────────── */
@media (max-width: 860px) {
  .wrap { padding: 0 0 28px; }

  .nav { padding: 18px 20px 14px; }

  /* The locked-aspect, absolutely-positioned overlay only really works
     for the wide map layout. On phones the illustration becomes a plain
     banner and the title/tagline/sign drop into normal flow below it —
     simpler, and immune to text landing on a busy part of the picture. */
  .hero {
    position: static;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    background: var(--paper);
  }

  .hero__pic { position: static; display: block; }
  .hero__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1086 / 1448;
    object-position: top center;
  }

  .masthead {
    position: static;
    max-width: none;
    padding: 22px 22px 16px;
  }
  .masthead::before { display: none; }
  .masthead__title { font-size: clamp(32px, 10vw, 46px); }
  .masthead__tagline { max-width: 30ch; }

  .handwritten { display: none; }

  .sign {
    position: static;
    width: fit-content;
    margin: 0 22px 4px;
  }

  .noscript { position: static; margin: 20px; box-shadow: none; background: var(--paper-2); }

  /* Pins become a plain vertical list, all in one accessible order. */
  .village {
    position: static;
    display: flex;
    flex-direction: column;
    padding: 14px 18px 8px;
    background: var(--paper);
  }

  .place {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    padding: 12px 4px;
    border-bottom: 1px solid var(--paper-3);
  }
  .place--right, .place--left { transform: none; }

  .place__card {
    width: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  .place:hover .place__card,
  .place:focus-visible .place__card { transform: none; box-shadow: none; }

  .icon { width: 22px; height: 22px; }
  .place__name { font-size: 17px; }
  .place__blurb { font-size: 14px; margin-left: 29px; }
  .place__go { font-size: 15px; }

  .is-live:active { background: var(--paper-3); }
  .is-live:focus-visible { outline: 2.5px solid var(--terracotta-d); outline-offset: -2px; }
}

/* ── 6. About / footer ─────────────────────────────────────── */
.about {
  max-width: 56ch;
  margin: 34px 6px 0;
}
.about h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}
.about p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 28px;
  padding: 18px 6px 4px;
  border-top: 1px solid var(--paper-3);
  font-size: 13.5px;
  color: var(--ink-2);
}
.footer p { margin: 0; }
.footer__made { font-family: var(--display); font-size: 15px; color: var(--ink-2); }

@media (max-width: 860px) {
  .about { padding: 0 22px; margin-top: 30px; }
  .footer { margin: 0; padding: 20px 22px 0; flex-direction: column; gap: 4px; }
}

/* ── 7. Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}