/* =========================================================
   Miles & Memories — landing page
   Palette sampled from the InDesign design PNG
   ========================================================= */

/* ---------------------------------------------------------
   Brand fonts (commercial — not on Google Fonts).
   Drop the web-font files into assets/fonts/ with these names
   and they take over automatically. Until then the Google
   fallbacks in the font stacks below are used.
   Needed files:
     assets/fonts/the-seasons-bold.woff2  (+ .woff)
     assets/fonts/widescreen-light.woff2  (+ .woff)
   --------------------------------------------------------- */
@font-face {
  font-family: "The Seasons";
  src: url("../assets/fonts/the-seasons-bold.woff2") format("woff2"),
       url("../assets/fonts/the-seasons-bold.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Widescreen";
  src: url("../assets/fonts/widescreen-light.woff2") format("woff2"),
       url("../assets/fonts/widescreen-light.woff") format("woff");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --plum-deep: #2d1a25;   /* buttons, headings (sampled from design) */
  --plum: #5c3348;        /* secondary dark */
  --mauve: #daaabb;       /* country buttons */
  --mauve-dark: #c98da2;  /* hover */
  --pink-1: #f8e1e9;      /* light section pink */
  --pink-2: #edc8d3;      /* deeper section pink */
  --pink-hero-1: #f9e4ec;
  --pink-hero-2: #e8c2ce;
  --cream: #fffcf4;
  --white: #ffffff;
  --text: #4a3b42;        /* body copy */
  --deco: #c99aa8;

  --maxw: 1180px;
  /* The Seasons (display serif) → Cormorant Garamond fallback */
  --font-display: "The Seasons", "Cormorant Garamond", Georgia, serif;
  /* Widescreen (light sans) → Poppins fallback */
  --font-body: "Widescreen", "Poppins", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- shared ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--plum-deep);
  text-align: center;
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .6em;
}
.section-title strong { font-weight: 700; }
.section-title--left { text-align: left; }

/* mixed-weight display headings all use the same recipe */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(24px, 5vw, 72px);
  background: linear-gradient(90deg, rgba(233,212,217,.5) 0%, rgba(249,238,240,.85) 100%);
  box-shadow: 0 8px 24px rgba(45, 26, 37, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.logo { color: var(--plum-deep); display: inline-flex; }
.logo img { height: 38px; width: auto; display: block; }
.lang-switch {
  font-family: var(--font-body); /* Widescreen (light) → Poppins fallback */
  letter-spacing: .1em;
  color: var(--plum-deep);
  font-size: 1.2rem;
  display: flex;
  gap: 10px;
  align-items: center;
}
.lang { font-weight: 300; opacity: .55; transition: opacity .2s; }        /* light */
.lang.is-active { font-weight: 700; opacity: 1; }                          /* bold — current language */
.lang:hover { opacity: 1; }
.lang-sep { font-weight: 300; opacity: .4; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  min-height: min(92vh, 880px);
  display: flex;
  align-items: center;
  padding: clamp(96px, 12vh, 132px) clamp(24px, 6vw, 90px) 0;
  background: #f6eef1;
}
/* Freeform (freehand) gradient rebuilt from the Illustrator source,
   shown at 57% opacity. Corner stops:
   TL 100% d78fa6 · TR 64% f9d2e2 (37% spread) · BL 64% f9d2e2 · BR 100% d78fa6 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .57;
  pointer-events: none;
  background:
    /* light corners (f9d2e2 @ 64%) — top-right reaches further for its 37% spread */
    radial-gradient(120% 120% at 100% 0%, rgba(249,210,226,.64) 0%, rgba(249,210,226,0) 58%),
    radial-gradient(88% 88% at 0% 100%,   rgba(249,210,226,.64) 0%, rgba(249,210,226,0) 46%),
    /* dark corners (d78fa6 @ 100%) */
    radial-gradient(100% 100% at 0% 0%,     #d78fa6 0%, rgba(215,143,166,0) 62%),
    radial-gradient(100% 100% at 100% 100%, #d78fa6 0%, rgba(215,143,166,0) 62%),
    #e3aebd;
}
.hero__book {
  position: absolute;
  left: clamp(40px, 7vw, 170px);
  bottom: -2.5%;
  width: clamp(300px, 40vw, 600px);
  height: auto;
  transform: rotate(-2deg);
  transform-origin: bottom left;
  filter: drop-shadow(0 30px 45px rgba(45, 26, 37, .28));
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: min(50%, 660px);
  text-align: center;
}
.hero__title {
  color: var(--plum-deep);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.12;
  letter-spacing: .02em;
  margin: 0 0 .55em;
  font-weight: 400;
}
.hero__title strong { font-weight: 700; }
.hero__text {
  max-width: 30ch;
  margin: 0 auto 2em;
  color: #5a3a46;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}
.brand { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.hero__insta {
  position: absolute;
  right: clamp(20px, 3vw, 52px);
  bottom: clamp(20px, 3vw, 46px);
  color: var(--plum-deep);
  z-index: 2;
}

.btn {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  padding: .58em 2.2em;
  border-radius: 40px;
  display: inline-block;
  transition: transform .2s, background .2s, color .2s;
}
.btn--primary { background: var(--plum-deep); color: var(--cream); }
.btn--primary:hover { transform: translateY(-2px); background: #46283a; }
.icon-link { color: var(--plum-deep); display: inline-flex; transition: transform .2s; }
.icon-link:hover { transform: scale(1.12); }

/* hero decorations */
.deco { position: absolute; pointer-events: none; }
.deco--sun {
  position: static;
  display: block;
  width: clamp(112px, 12vw, 155px);
  height: auto;
  margin: 0 auto clamp(20px, 3vw, 38px);
  transform: none;
}
.deco--pen {
  width: auto; height: clamp(240px, 40vh, 400px);
  top: clamp(20px, 4vh, 64px);
  right: clamp(-70px, -3vw, -30px);
  transform: rotate(125deg);
  transform-origin: center center;
  filter: drop-shadow(0 12px 18px rgba(45, 26, 37, .16));
  z-index: 1;
}

/* ---------------------------------------------------------
   HERO — entrance animation (plays once on load)

   Sequence:
     1. Pen slides in from the right.
     2. The sun's base line draws in, then all its rays rise up
        out of that line together (see the .sun-* rules below).
     3. Headline, then body text, then button + Instagram
        cascade in beneath it.
     4. Finally the book slides up from the bottom.

   Each element starts hidden via `animation-fill-mode: both`,
   so the `from` frame holds during its delay. The book/pen
   keyframes end on their resting transform (rotation) so the
   animated transform hands off cleanly to the static CSS.
   --------------------------------------------------------- */
.hero__book  { animation: book-in 1s   cubic-bezier(.16, 1, .3, 1) 2s both; }
.deco--pen   { animation: pen-in  .9s  cubic-bezier(.16, 1, .3, 1) .45s both; }
.hero__title { animation: hero-rise .8s ease both; animation-delay: 1.2s; }
.hero__text  { animation: hero-rise .8s ease both; animation-delay: 1.45s; }
.hero__content .btn { animation: hero-rise .7s ease both; animation-delay: 1.7s; }
.hero__insta { animation: hero-rise .7s ease both; animation-delay: 1.85s; }

/* --- Sun: the horizontal base line draws in first, then all the
       rays rise up out of that line together.
   The paths inherit the plum fill; transform-box:view-box lets the
   groups scale around a point in the SVG's own coordinate system.
   Origin y ≈ 48 sits on the base line, so scaleY grows each ray
   upward from it (x is untouched, so nothing shifts sideways). --- */
.deco--sun path { fill: var(--plum-deep); }
.sun-base, .sun-ray {
  transform-box: view-box;
  transform-origin: 53.8px 48px;
}
/* sunrise begins together with the title (1.2s); rays bloom just after */
.sun-base { animation: sun-base-in .5s ease 1.2s both; transform-origin: 53.8px 47.5px; }
.sun-ray  { animation: ray-rise .7s cubic-bezier(.2, .75, .3, 1) 1.6s both; }

@keyframes book-in {
  from { opacity: 0; transform: translateY(130px) rotate(-2deg); }
  to   { opacity: 1; transform: translateY(0)     rotate(-2deg); }
}
@keyframes pen-in {
  from { opacity: 0; transform: translateX(180px) rotate(125deg); }
  to   { opacity: 1; transform: translateX(0)     rotate(125deg); }
}
@keyframes sun-base-in {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes ray-rise {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__book,
  .deco--pen,
  .sun-base,
  .sun-ray,
  .hero__title,
  .hero__text,
  .hero__content .btn,
  .hero__insta { animation: none; }
}

/* =========================================================
   SCROLL REVEAL
   Everything below the hero fades + rises in as its section
   scrolls into view, cascading top-to-bottom. The stagger
   (--reveal-delay) is set per element by JS so each section
   restarts the cascade from its first item.

   Elements are hidden ONLY under `.has-js` (added by a tiny
   inline script in <head>), so with JS disabled the page
   renders fully visible instead of blank.
   ========================================================= */
.has-js .reveal {
  opacity: 0;
  transform: translateY(44px);
  /* ~550ms ease-out (NN/g: entrances read best easing-out in the
     200–500ms range; slightly longer here to survive the snap-scroll
     and stay clearly visible as the section settles) */
  transition: opacity .55s ease-out,
              transform .55s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { transition: none; }
}

/* =========================================================
   WHAT'S IN THE BOOK
   ========================================================= */
.book-section {
  background: var(--white);
  padding: clamp(50px, 7vw, 90px) clamp(20px, 5vw, 64px);
}
.book-section__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* carousel */
.carousel { width: 100%; }

/* two columns: the 3D book (left) + the active caption (right).
   The .book element is inserted as the first grid cell by JS. */
.carousel__track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
  perspective: 2400px;
}
.carousel__slides { min-width: 0; }
.carousel__slide { display: none; }
.carousel__slide.is-active { display: block; }

/* --- the book: a realistic, multi-leaf page turn between two spreads ---
   Each PNG is a full double-page spread with the spine at its centre, so we
   render one half per pane by sliding a 200%-wide copy of the spread left or
   right inside a 50%-wide clipped pane. */
.book {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 597;
  transform-style: preserve-3d;
  /* current spread's page colour; set per turn by JS, inherited by leaves */
  --leaf: #e7d5dc;
}
.book__base,
.book__face {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.book__base img,
.book__face img {
  position: absolute;
  top: 0;
  height: 100%;
  width: 200%;      /* == full spread width; JS slides it to show one half */
  max-width: none;
}
/* the two static halves currently on screen (and revealed as leaves pass) */
.book__base { width: 50%; }
.book__base--left  { left: 0;   }
.book__base--right { left: 50%; }

/* a turning leaf, hinged at the spine (book centre) */
.book__leaf {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
.book__leaf--fwd { left: 50%; transform-origin: left center;  } /* turn ← */
.book__leaf--bwd { left: 0;   transform-origin: right center; } /* turn → */
.book__face {
  inset: 0;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: transparent;
}
.book__face--back { transform: rotateY(180deg); }

/* blank leaves flicking past read as paper — inset to match the real page
   footprint inside each spread PNG (pages sit within transparent margins;
   spine at 50%, outer/top/bottom margins measured from the artwork). */
.book__paper {
  position: absolute;
  top: 5%;
  bottom: 5.7%;
  /* --leaf (from .book, set per turn by JS) is the current spread's page
     colour, so the blank pages flicking past match the section you leaf through */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--leaf) 94%, #000),
    color-mix(in srgb, var(--leaf) 68%, #fff) 62%);
  box-shadow: 0 6px 18px rgba(58, 20, 34, .10);
}
.book__leaf--fwd .book__paper { left: 0; right: 8.6%; border-radius: 0 4px 4px 0; }
.book__leaf--bwd .book__paper {
  left: 8.6%; right: 0; border-radius: 4px 0 0 4px;
  background: linear-gradient(270deg,
    color-mix(in srgb, var(--leaf) 94%, #000),
    color-mix(in srgb, var(--leaf) 68%, #fff) 62%);
}
/* soft shading toward the spine gives each leaf some depth as it turns */
.book__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(58, 20, 34, .16), rgba(58, 20, 34, 0) 28%);
}
.book__leaf--bwd .book__paper::after {
  background: linear-gradient(270deg, rgba(58, 20, 34, .16), rgba(58, 20, 34, 0) 28%);
}

/* --- caption (title + list) : calm fade-and-rise, staggered --- */
.carousel__caption { color: var(--slide-color, var(--plum-deep)); }
.carousel__slide.is-active .slide-title,
.carousel__slide.is-active .squiggle,
.carousel__slide.is-active .slide-list li {
  animation: rise-in .7s ease both;
}
.carousel__slide.is-active .slide-title   { animation-delay: .18s; }
.carousel__slide.is-active .squiggle      { animation-delay: .30s; }
.carousel__slide.is-active .slide-list li:nth-child(1) { animation-delay: .42s; }
.carousel__slide.is-active .slide-list li:nth-child(2) { animation-delay: .54s; }
.carousel__slide.is-active .slide-list li:nth-child(3) { animation-delay: .66s; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-title {
  font-family: var(--font-body);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--slide-color, var(--plum-deep));
  /* 20% smaller than the H2 section title (clamp(1.7rem,4vw,2.9rem)) */
  font-size: clamp(1.36rem, 3.2vw, 2.32rem);
  line-height: 1.12;
  letter-spacing: .03em;
  margin: 0 0 .55em;
}
.slide-title strong {
  font-family: var(--font-display);
  font-weight: 700;
}
/* wave divider between title & list — own per-slide color (falls back to font color) */
.squiggle {
  display: block;
  width: 155px;
  aspect-ratio: 95.582 / 4.119;
  margin-bottom: 1.1em;
  color: var(--wave-color, var(--slide-color, var(--deco))); /* drives fill: currentColor */
  overflow: visible;
}

.slide-list li {
  font-family: var(--font-body);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--slide-color, var(--plum-deep));
  /* 20% smaller than before (was clamp(1.15rem, 1.9vw, 1.55rem)) */
  font-size: clamp(0.92rem, 1.52vw, 1.24rem);
  line-height: 1.3;
  letter-spacing: .02em;
  padding: .55em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--slide-color, #451c30) 16%, transparent);
}
.slide-list li:last-child { border-bottom: none; }
.slide-list li strong {
  font-family: var(--font-display);
  font-weight: 700;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(24px, 4vw, 40px);
}
.carousel__arrow {
  background: none; border: none; cursor: pointer;
  font-size: 1.8rem; color: var(--plum-deep); line-height: 1;
  padding: 0 6px; opacity: .6; transition: opacity .2s;
}
.carousel__arrow:hover { opacity: 1; }
.carousel__dots { display: flex; gap: 9px; }
.carousel__dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: var(--mauve); opacity: .5; transition: opacity .2s, transform .2s;
}
.carousel__dots button.is-active { opacity: 1; transform: scale(1.25); background: var(--plum); }

@media (prefers-reduced-motion: reduce) {
  .carousel__slide.is-active .slide-title,
  .carousel__slide.is-active .squiggle,
  .carousel__slide.is-active .slide-list li {
    animation: fade .3s ease both;
  }
  .wave-line { animation: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================
   GET YOUR COPY
   ========================================================= */
.copy-section {
  position: relative;
  background: linear-gradient(160deg, var(--pink-1) 0%, var(--pink-2) 100%);
  padding: clamp(50px, 7vw, 90px) clamp(20px, 5vw, 64px);
  overflow: hidden;
}
.copy-section__sub { text-align: center; color: var(--plum); margin: 0 auto 2.2em; }
.country-grid {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 24px;
}
.country-btn {
  background: var(--mauve);
  color: var(--plum-deep);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1rem;
  text-align: center;
  padding: 1.05em 1.4em;
  border-radius: 30px;
  transition: background .2s, transform .2s;
}
.country-btn:hover { background: var(--mauve-dark); transform: translateY(-2px); }
/* last row has 2 items — center them */
.country-btn:nth-child(10) { grid-column: 1 / 2; }
.country-btn:nth-child(11) { grid-column: 2 / 3; }

.deco--stars { width: 22px; height: auto; top: 50%; left: 3.5%; transform: translateY(-50%); }
.deco--waves {
  width: 128px; height: auto;
  aspect-ratio: 121.9998795 / 36.4408569; /* inline svg needs this when absolutely positioned */
  top: 58%; right: 0;
  transform: translateY(-50%);
}
/* fill on the svg itself so the <use> clones inherit it */
.deco--waves { fill: #451c30; }
/* Each line drifts horizontally on its own, looping seamlessly (the line is
   tripled in the markup so a copy is always sliding in). Alternating the
   direction line-by-line — right, left, right — gives a woven, water-like
   motion. Slightly different speeds keep it from marching in lockstep. */
.wave-line { will-change: transform; }
.wave-line--1 { animation: wave-flow-right 7s linear infinite; }
.wave-line--2 { animation: wave-flow-left  9s linear infinite; }
.wave-line--3 { animation: wave-flow-right 8s linear infinite; }
@keyframes wave-flow-right {
  from { transform: translateX(-103.668px); }
  to   { transform: translateX(0); }
}
@keyframes wave-flow-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-103.668px); }
}

/* =========================================================
   MADE FOR VANLIFERS
   ========================================================= */
.about-section {
  background: var(--white);
  padding: clamp(50px, 7vw, 90px) clamp(20px, 5vw, 64px);
}
.about-section__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
}
.about-section__media img {
  width: 100%;
  /* the PNG already has rounded corners; use a shape-aware drop-shadow
     (follows the transparency) instead of a rectangular box-shadow, and
     don't re-round with border-radius or we expose white corner slivers */
  filter: drop-shadow(0 20px 40px rgba(69,27,48,.15));
}
.about-section__text p { margin: 0 0 1.1em; color: var(--text); }
.about-section__text .section-title { margin-bottom: 1em; }
.signature {
  width: 140px;
  height: auto;
  display: block;
  margin: .4em 0 0 auto;   /* right aligned */
}

/* =========================================================
   QUOTE BANNER
   ========================================================= */
.quote-section {
  position: relative;
  background: linear-gradient(160deg, var(--pink-1) 0%, var(--pink-2) 100%);
  padding: clamp(60px, 9vw, 120px) clamp(20px, 5vw, 64px);
  text-align: center;
}
.quote-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 20px;
}
.quote-deco {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
}
.quote strong { font-weight: 700; }

/* =========================================================
   COMMUNITY
   ========================================================= */
.community-section {
  background: var(--white);
  padding: clamp(50px, 7vw, 90px) clamp(20px, 5vw, 64px) clamp(30px, 4vw, 50px);
}
.insta-grid {
  max-width: 980px;
  margin: 0 auto 1.8em;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.insta-grid__item { overflow: hidden; }
.insta-grid__item img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform .3s;
}
.insta-grid__item:hover img { transform: scale(1.06); }
.insta-handle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--plum-deep);
  font-family: var(--font-body);
  letter-spacing: .05em;
  font-size: 1rem;
}
.insta-handle:hover { color: var(--mauve-dark); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--white);
  text-align: center;
  padding: 24px 20px 40px;
  color: var(--plum);
  font-size: .85rem;
  letter-spacing: .03em;
}

/* =========================================================
   PLACEHOLDERS (shown until real assets are added to /assets)
   ========================================================= */
.placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em;
  color: var(--plum);
  font-family: var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .95rem;
  background:
    repeating-linear-gradient(45deg, rgba(218,170,187,.18) 0 12px, rgba(218,170,187,.30) 12px 24px);
  border: 1.5px dashed var(--mauve-dark);
  border-radius: 10px;
}

/* =========================================================
   FULL-PAGE SCROLL SNAP
   Each section fills the viewport and the page snaps to the
   next section as you scroll. Enabled on larger screens only —
   on phones the content (paragraphs, country grid) stacks too
   tall for one screen, so snapping is turned off there.

   We use `proximity` (not `mandatory`) on purpose: the About
   section (Lena's bio) is taller than a typical laptop screen,
   and `mandatory` would trap it — you couldn't scroll to read
   the bottom. `proximity` snaps to fill the viewport as you move
   between sections, but lets you scroll freely through any
   section that's taller than the screen. If every section is
   ever guaranteed to fit, you can switch this to `mandatory` for
   a stricter one-screen-per-scroll feel.
   ========================================================= */
@media (min-width: 861px) {
  html {
    scroll-snap-type: y proximity;
  }
  main > section {
    min-height: 100vh;
    scroll-snap-align: start;
  }
  /* vertically centre each section's content within the viewport */
  .book-section,
  .copy-section,
  .about-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero {
    min-height: 100vh;
  }
  /* last two sections (Quote + Community) opt out of the full-screen
     snap — they flow at their natural height and don't snap */
  .quote-section,
  .community-section {
    min-height: 0;
    scroll-snap-align: none;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  body { font-size: 17px; }

  .hero {
    min-height: auto;
    flex-direction: column;
    padding: 96px 24px 0;
    text-align: center;
  }
  .hero__book {
    position: static;
    order: 1;
    width: min(72%, 300px);
    margin: 32px auto 0;
  }
  .hero__content { width: 100%; margin-left: 0; }
  .hero__insta { right: 24px; bottom: 24px; }
  .deco--pen { display: none; }

  .carousel__track { grid-template-columns: 1fr; gap: 24px; }
  .carousel__caption { text-align: center; }
  .squiggle { margin-left: auto; margin-right: auto; }
  .slide-list li { border-bottom: none; padding: .35em 0; }

  .about-section__inner { grid-template-columns: 1fr; }
  .about-section__media { max-width: 340px; margin: 0 auto; }
  .section-title--left { text-align: center; }
  .signature { text-align: center; }

  .deco--stars, .deco--waves { display: none; }

  .insta-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px) {
  .country-grid { grid-template-columns: repeat(2, 1fr); }
  /* reset the desktop last-row centering */
  .country-btn:nth-child(10),
  .country-btn:nth-child(11) { grid-column: auto; }

  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__actions { flex-direction: column; gap: 16px; }
}