/* The front page, framed.
 *
 * Loaded after kokko.css and teema.css, and on the front page only: every
 * rule is under .etusivu, because kokko.css is shared with the booking,
 * host and legal pages and several of these class names (.kortti, .rivi,
 * .huomio) mean something else there.
 *
 * Two decisions:
 *
 *   1. One ground. The page no longer changes colour between sections and
 *      there are no smoke bands; the planks with their flowers run the whole
 *      length from the hero to the treeline at the bottom.
 *
 *   2. Each section is framed by a different thing you would actually find
 *      at this campsite, chosen for what that section says:
 *        photos      prints in a family album, the first one held by corners
 *        about       a folded letter from the hosts, with a key tag on it
 *        amenities   stops on the shore path, over a depth chart of the lake
 *        reviews     postcards, stamped with the treeline
 *        prices      the painted board by the kiosk, screwed on, with leaders
 *        rally       the start line and a door plate
 *        directions  the blue roadside pointer, and the real board at the end
 *        terms       the fine print, one corner dog-eared
 *        the end     the forest itself, which the footer sits under
 */

.etusivu {
  /* Paper that is lighter than the page: letters, prints, postcards. */
  --arkki: color-mix(in srgb, var(--pohja) 40%, #fff);
  --vedos: color-mix(in srgb, var(--pohja) 25%, #fff);
  /* A manila tag, off the wildflower gold. */
  --lappu: color-mix(in srgb, var(--kukka) 26%, var(--arkki));
  --lappu-reuna: color-mix(in srgb, var(--kukka-ink) 45%, var(--arkki));
  /* Lake water, from base.css, for the depth lines. */
  --kayra: color-mix(in srgb, var(--vesi) 60%, transparent);
  /* The Finnish roadside blue. Fixed on purpose: it is the sign's colour,
     not the palette's. White on it measures 7.0. */
  --viitta: #19599e;
  --varjo: var(--jalka-rgb);
}

/* Under the dark palettes, paper is the next surface up instead of white. */
:root[data-teema="kuusikko"] .etusivu,
:root[data-teema="kesayo"] .etusivu,
:root[data-teema="hamara"] .etusivu,
:root[data-teema="nuotio"] .etusivu {
  --arkki: var(--pinta);
  --vedos: var(--syva);
  --varjo: 0 0 0;
}

/* ===========================================================================
   ONE GROUND
   =========================================================================== */

.etusivu main > section { background: none; }

/* The reviews used to run full bleed on a band of their own, over the
   planks. They now sit in the column like everything else, and the moving
   row fades out at its edges instead of being cut off by the window. */
.etusivu .palaute { padding-left: var(--sivu); padding-right: var(--sivu); }
.etusivu .palaute-yla,
.etusivu .palaute-huom { padding-left: 0; padding-right: 0; }
.etusivu .palaute-rivi,
.etusivu .palaute-rivi:not(.liikkuu) { padding: 1.25rem 0.5rem 2rem; }
.etusivu .palaute-rivi.liikkuu {
  padding: 1.25rem 0 2rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
@media (min-width: 80rem) {
  .etusivu .palaute {
    padding-left: max(var(--sivu), 5.5rem);
    padding-right: max(var(--sivu), 5.5rem);
  }
}

.etusivu .kukkarivi { padding: 0 0 0.5rem; }

/* ===========================================================================
   KUVAT, the album
   Every photo is a print with its white edge; the small ones lie a touch
   crooked, as prints do when they were put in by hand. The big one is held
   by four photo corners.
   =========================================================================== */

.etusivu .kuva-ruutu {
  padding: clamp(0.3rem, 0.55vw, 0.5rem);
  background: var(--vedos);
  box-shadow:
    0 1px 2px rgb(var(--varjo) / 0.12),
    0 16px 30px -20px rgb(var(--varjo) / 0.5);
}
.etusivu .mosaiikki > li:nth-child(2) .kuva-ruutu { rotate: -0.9deg; }
.etusivu .mosaiikki > li:nth-child(3) .kuva-ruutu { rotate: 0.7deg; }
.etusivu .mosaiikki > li:nth-child(4) .kuva-ruutu { rotate: 0.5deg; }
.etusivu .mosaiikki > li:nth-child(5) .kuva-ruutu { rotate: -0.6deg; }

.etusivu .mosaiikki > li:first-child { position: relative; }
.etusivu .mosaiikki > li:first-child::after {
  --k: clamp(1.5rem, 2.4vw, 2.25rem);
  --c: color-mix(in srgb, var(--otsikko) 90%, transparent);
  --v: color-mix(in srgb, var(--otsikko) 55%, var(--vedos));
  content: "";
  position: absolute;
  inset: -0.3rem;
  pointer-events: none;
  /* Each corner is the pocket's face with a lighter lip where the paper
     folds over the print. */
  background:
    linear-gradient(135deg, var(--c) 0 46%, var(--v) 46% 50%, transparent 50%) left top / var(--k) var(--k) no-repeat,
    linear-gradient(225deg, var(--c) 0 46%, var(--v) 46% 50%, transparent 50%) right top / var(--k) var(--k) no-repeat,
    linear-gradient(45deg, var(--c) 0 46%, var(--v) 46% 50%, transparent 50%) left bottom / var(--k) var(--k) no-repeat,
    linear-gradient(315deg, var(--c) 0 46%, var(--v) 46% 50%, transparent 50%) right bottom / var(--k) var(--k) no-repeat;
  filter: drop-shadow(0 1px 1px rgb(var(--varjo) / 0.3));
}

/* ===========================================================================
   YLEISTIEDOT, the letter
   A sheet that has been folded in three to fit an envelope, the photo laid
   over its edge, the note that nobody is on duty tied on as a key tag, and
   the two people who wrote it at the bottom.
   =========================================================================== */

.etusivu .kirje {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: 3px;
  background:
    linear-gradient(to bottom,
      transparent calc(33.3% - 1px), rgb(var(--varjo) / 0.05) 33.3%,
      rgb(255 255 255 / 0.5) calc(33.3% + 1px), transparent calc(33.3% + 3px)),
    linear-gradient(to bottom,
      transparent calc(66.6% - 1px), rgb(var(--varjo) / 0.05) 66.6%,
      rgb(255 255 255 / 0.5) calc(66.6% + 1px), transparent calc(66.6% + 3px)),
    var(--arkki);
  box-shadow:
    0 1px 1px rgb(var(--varjo) / 0.06),
    0 26px 50px -32px rgb(var(--varjo) / 0.45);
}

.etusivu .kirje-kuva {
  position: relative;
  z-index: 2;
  margin-left: calc(clamp(2rem, 5vw, 4.5rem) * -1 - 2.5rem);
  rotate: 1.4deg;
}

/* The key tag. Chamfered at the string end, with a reinforced hole; drawn
   in gradients rather than clipped, so the string can leave the tag. */
#yleistiedot .huomio {
  position: relative;
  width: fit-content;
  max-width: 36ch;
  margin: 2rem 0 0 1.25rem;
  padding: 0.95rem 1.3rem 0.95rem 2.75rem;
  border: 0;
  border-image: none;
  border-radius: 0 4px 4px 0;
  background:
    linear-gradient(135deg, transparent 0.8rem, var(--lappu) 0.8rem) left top / 51% 51% no-repeat,
    linear-gradient(45deg, transparent 0.8rem, var(--lappu) 0.8rem) left bottom / 51% 51% no-repeat,
    linear-gradient(var(--lappu), var(--lappu)) right / 50% 100% no-repeat;
  rotate: -1.6deg;
  color: var(--teksti);
  font-size: 0.9375rem;
}
#yleistiedot .huomio::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.35rem;
  border-radius: 50%;
  background: var(--arkki);
  box-shadow: 0 0 0 0.2rem var(--lappu-reuna);
}
#yleistiedot .huomio::after {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: calc(50% - 1.9rem);
  width: 2.7rem;
  height: 1.9rem;
  border-left: 1.5px solid var(--teksti-3);
  border-bottom: 1.5px solid var(--teksti-3);
  border-bottom-left-radius: 100% 100%;
}

#yleistiedot .terveiset {
  margin-top: 2.1rem;
  max-width: none;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--otsikko);
}
#yleistiedot .terveiset-nimet {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72em;
  color: var(--liekki-ink);
}

/* ===========================================================================
   PIIRTEET, the shore path
   The panel is a depth chart of the lake; the amenities are stops on the
   path along its shore, each an orange trail marker, joined by the path.
   =========================================================================== */

.etusivu .syvyyskartta {
  --rako: clamp(1.5rem, 3vw, 2.75rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.75rem, 4.5vw, 3.75rem);
  border-radius: clamp(1.25rem, 3vw, 2.5rem);
  background: color-mix(in srgb, var(--pinta) 75%, var(--pohja));
}
.etusivu .syvyyskartta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The lines fade out toward the heading, so they never sit under words
     at full strength. */
  background: linear-gradient(to right, transparent 8%, var(--kayra) 55%);
  /* Sized to cover, so the chart always runs off every edge of the panel
     instead of stopping short of the bottom. */
  -webkit-mask: url("../assets/img/syvyyskayrat.svg") right top / cover no-repeat;
  mask: url("../assets/img/syvyyskayrat.svg") right top / cover no-repeat;
  opacity: 0.6;
}

.etusivu .piirteet-ruudukko { gap: clamp(1.75rem, 3.5vw, 2.75rem) var(--rako); }
.etusivu .piirre {
  padding: 0;
  background: none;
  overflow: visible;
}
.etusivu .piirre-merkki {
  position: relative;
  z-index: 1;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.75rem;
  border-radius: 50%;
  background: var(--arkki);
  box-shadow: inset 0 0 0 2.5px var(--korostus), 0 6px 14px -8px rgb(var(--varjo) / 0.4);
  color: var(--liekki-ink);
}
/* The path to the next stop. */
.etusivu .piirre::before {
  content: "";
  position: absolute;
  top: 1.625rem;
  left: 3.75rem;
  right: calc(var(--rako) * -1 + 0.5rem);
  border-top: 2px dashed color-mix(in srgb, var(--korostus) 60%, transparent);
}
.etusivu .piirre:nth-child(3n)::before,
.etusivu .piirre:last-child::before { display: none; }
.etusivu .piirre p { max-width: 32ch; }

/* ===========================================================================
   PALAUTE, the postcards
   =========================================================================== */

.etusivu .kortti {
  position: relative;
  padding: clamp(1.3rem, 2.4vw, 1.75rem);
  border-top: 0;
  border-radius: 2px;
  background: var(--arkki);
  box-shadow:
    0 1px 2px rgb(var(--varjo) / 0.1),
    0 18px 32px -22px rgb(var(--varjo) / 0.5);
}
.etusivu .palaute-jono > .kortti:nth-child(odd) { rotate: -1deg; }
.etusivu .palaute-jono > .kortti:nth-child(even) { rotate: 0.8deg; }

/* The stars keep the top left; the quote starts below the stamp. */
.etusivu .kortti .tahdet { min-height: 3.9rem; margin-bottom: 0.4rem; align-items: flex-start; }
.etusivu .kortti blockquote { margin-bottom: 1.4rem; }

/* The stamp: sunset over the campsite's treeline, with a perforated edge.
   Its size is an exact number of perforations each way, so a hole lands
   on every corner. */
.etusivu .postimerkki {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3.36rem;
  height: 3.78rem;
  padding: 0.3rem;
  background: var(--pinta);
  -webkit-mask:
    radial-gradient(circle at center, #0000 0.13rem, #000 0.145rem) -0.21rem -0.21rem / 0.42rem 0.42rem,
    linear-gradient(#000 0 0) content-box;
  mask:
    radial-gradient(circle at center, #0000 0.13rem, #000 0.145rem) -0.21rem -0.21rem / 0.42rem 0.42rem,
    linear-gradient(#000 0 0) content-box;
}
.etusivu .postimerkki svg {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--korostus) 55%, var(--arkki)) 0%,
    color-mix(in srgb, var(--kukka) 30%, var(--arkki)) 62%,
    color-mix(in srgb, var(--vesi) 35%, var(--arkki)) 100%);
  color: var(--otsikko);
}
/* The postmark, run across the stamp's left edge. */
.etusivu .kortti::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 2.3rem;
  right: 2.3rem;
  width: 6.9rem;
  height: 2.26rem;
  background: var(--teksti-3);
  opacity: 0.4;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 36' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='18' cy='18' r='15'/%3E%3Cpath d='M9 15h18M11 21h14'/%3E%3Cpath d='M38 10q6-5 12 0t12 0 12 0 12 0 12 0 12 0M38 18q6-5 12 0t12 0 12 0 12 0 12 0 12 0M38 26q6-5 12 0t12 0 12 0 12 0 12 0 12 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 36' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='18' cy='18' r='15'/%3E%3Cpath d='M9 15h18M11 21h14'/%3E%3Cpath d='M38 10q6-5 12 0t12 0 12 0 12 0 12 0 12 0M38 18q6-5 12 0t12 0 12 0 12 0 12 0 12 0M38 26q6-5 12 0t12 0 12 0 12 0 12 0 12 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The name goes where the address would, on a line of its own. */
.etusivu .kortti .palaute-nimi {
  margin-left: 36%;
  padding: 0 0 0.35rem;
  border-bottom: 1px solid var(--viiva);
}

/* ===========================================================================
   HINNASTO, the price board
   A plank board like the painted signs round the site, screwed on at the
   corners, with dotted leaders from each item to its price.
   =========================================================================== */

.etusivu .hinnat-ryhmat {
  --ruuvi: color-mix(in srgb, var(--teksti-3) 45%, var(--lauta));
  --ura: color-mix(in srgb, var(--otsikko) 55%, transparent);
  --syy: color-mix(in srgb, var(--lauta-viiva) 22%, transparent);
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 2.75rem) clamp(2rem, 5vw, 4.5rem);
  padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.5rem, 4.5vw, 3.75rem);
  border-radius: 6px;
  background:
    /* four screws: a slot, then the head */
    linear-gradient(45deg, transparent 42%, var(--ura) 42% 58%, transparent 58%) left 1.05rem top 1.05rem / 0.5rem 0.5rem no-repeat,
    linear-gradient(135deg, transparent 42%, var(--ura) 42% 58%, transparent 58%) right 1.05rem top 1.05rem / 0.5rem 0.5rem no-repeat,
    linear-gradient(135deg, transparent 42%, var(--ura) 42% 58%, transparent 58%) left 1.05rem bottom 1.05rem / 0.5rem 0.5rem no-repeat,
    linear-gradient(45deg, transparent 42%, var(--ura) 42% 58%, transparent 58%) right 1.05rem bottom 1.05rem / 0.5rem 0.5rem no-repeat,
    radial-gradient(circle, var(--ruuvi) 0 0.34rem, transparent 0.37rem) left 0.8rem top 0.8rem / 1rem 1rem no-repeat,
    radial-gradient(circle, var(--ruuvi) 0 0.34rem, transparent 0.37rem) right 0.8rem top 0.8rem / 1rem 1rem no-repeat,
    radial-gradient(circle, var(--ruuvi) 0 0.34rem, transparent 0.37rem) left 0.8rem bottom 0.8rem / 1rem 1rem no-repeat,
    radial-gradient(circle, var(--ruuvi) 0 0.34rem, transparent 0.37rem) right 0.8rem bottom 0.8rem / 1rem 1rem no-repeat,
    /* grain, on two periods that never quite repeat together, soft-edged so
       it reads as wood and not as ruled paper */
    repeating-linear-gradient(to bottom, transparent 0 12px, var(--syy) 14px, transparent 16px 37px),
    repeating-linear-gradient(to bottom, transparent 0 27px, var(--syy) 30px, transparent 33px 53px),
    var(--lauta);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lauta-viiva) 70%, transparent),
    0 22px 44px -32px rgb(var(--varjo) / 0.55);
}
.etusivu .ryhma h3 { border-bottom-color: var(--lauta-viiva); }

.etusivu .rivi {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(1.25rem, 1fr) max-content;
  align-items: end;
  column-gap: 0.5rem;
}
.etusivu .rivi dd { display: contents; }
.etusivu .rivi dt { grid-column: 1; grid-row: 1; }
.etusivu .rivi::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0.42em;
  border-bottom: 2px dotted color-mix(in srgb, var(--teksti-3) 60%, transparent);
}
.etusivu .rivi dd b { grid-column: 3; grid-row: 1; font-size: 1rem; }
.etusivu .rivi dd span { grid-column: 1 / -1; grid-row: 2; }

/* ===========================================================================
   RALLY, the start line
   =========================================================================== */

.etusivu .ralli-kuva { position: relative; }
.etusivu .ralli-kuva .kehys-levy::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(0.5rem, 1vw, 0.8rem);
  background: repeating-conic-gradient(var(--otsikko) 0 25%, var(--arkki) 0 50%) 0 0 / clamp(0.5rem, 1vw, 0.8rem) clamp(0.5rem, 1vw, 0.8rem);
}
.etusivu .rallikilpi {
  position: absolute;
  right: clamp(-1.25rem, -1.5vw, -0.5rem);
  bottom: clamp(-1.75rem, -2.2vw, -1rem);
  display: grid;
  justify-items: center;
  min-width: 7.25rem;
  padding-bottom: 0.55rem;
  overflow: hidden;
  border: 3px solid var(--otsikko);
  border-radius: 0.6rem;
  background: var(--arkki);
  rotate: -3deg;
  box-shadow: 0 14px 26px -16px rgb(var(--varjo) / 0.6);
  color: var(--otsikko);
  font-family: "Geist", system-ui, sans-serif;
  text-align: center;
}
.etusivu .rallikilpi-yla {
  justify-self: stretch;
  padding: 0.25rem 0.6rem;
  background: var(--korostus);
  color: var(--korostus-ink);
  font-size: 0.75rem;
  font-weight: 600;
}
.etusivu .rallikilpi b {
  margin-top: 0.3rem;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: lining-nums;
}
.etusivu .rallikilpi-ala { font-size: 0.8125rem; color: var(--teksti-2); }

/* ===========================================================================
   AJO, the roadside
   =========================================================================== */

.etusivu .ajo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.etusivu .ajo-teksti { grid-column: 1; grid-row: 1; }
.etusivu .ajo-kartta { grid-column: 1; grid-row: 2; }
.etusivu .ajo-kyltti {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
}
.etusivu .ajo-kyltti img {
  width: 100%;
  border-radius: 0.9rem;
  box-shadow: 0 26px 48px -30px rgb(var(--varjo) / 0.6);
}
.etusivu .ajo-kyltti figcaption { margin-top: 0.8rem; font-size: 0.875rem; }
/* The roadside sign and the arrival board, side by side under the map. */
.etusivu .ajo-perilla {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.etusivu .ajo-perilla figure { margin: 0; }
.etusivu .ajo-perilla img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.9rem;
  box-shadow: 0 26px 48px -30px rgb(var(--varjo) / 0.6);
}
.etusivu .ajo-perilla figcaption { margin-top: 0.8rem; font-size: 0.875rem; }

.etusivu .viitta {
  display: block;
  width: 10.5rem;
  height: auto;
  margin-bottom: 1rem;
  filter: drop-shadow(0 6px 8px rgb(var(--varjo) / 0.22));
}
.etusivu .viitta-pohja { fill: var(--viitta); }
.etusivu .viitta-reuna { fill: none; stroke: #fff; stroke-width: 2.2; }
.etusivu .viitta text {
  fill: #fff;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
}

/* ===========================================================================
   EHDOT, the fine print
   =========================================================================== */

.etusivu .ehdot-osio { max-width: none; }
.etusivu .ehdot-arkki {
  position: relative;
  max-width: 46rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(225deg, transparent 1.4rem, var(--arkki) 1.4rem);
  filter: drop-shadow(0 14px 18px rgb(var(--varjo) / 0.12));
  font-size: 0.9375rem;
}
/* The folded-over corner, showing the back of the sheet. */
.etusivu .ehdot-arkki::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1.98rem;
  height: 1.98rem;
  border-bottom-left-radius: 0.3rem;
  background: linear-gradient(45deg, var(--syva) 50%, transparent 50%);
  filter: drop-shadow(-1px 2px 2px rgb(var(--varjo) / 0.2));
}
.etusivu .ehdot-arkki h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

/* ===========================================================================
   The end: the treeline, and the footer is the dark beneath it.
   =========================================================================== */

.etusivu .loppu-varaa { padding-bottom: clamp(2.5rem, 7vh, 4.5rem); }
.etusivu .metsaraja {
  display: block;
  width: 100%;
  height: clamp(3rem, 5vw, 5.5rem);
  margin-bottom: -1px;
  fill: var(--jalka-pohja);
}

/* ===========================================================================
   Narrow
   =========================================================================== */

@media (max-width: 64rem) {
  .etusivu .kirje-kuva {
    margin: -3.5rem 0.5rem 0 1.5rem;
    rotate: 1deg;
  }
  .etusivu .piirre:nth-child(3n)::before { display: block; }
  .etusivu .piirre:nth-child(2n)::before,
  .etusivu .piirre:last-child::before { display: none; }
  .etusivu .ajo { grid-template-columns: minmax(0, 1fr); }
  .etusivu .ajo-kyltti { grid-column: 1; grid-row: 2; max-width: 34rem; margin-top: 2.5rem; }
  .etusivu .ajo-kartta { grid-row: 3; }
  .etusivu .ajo-perilla { grid-row: 4; }
}

@media (max-width: 46rem) {
  .etusivu .hinnat-ryhmat { grid-template-columns: minmax(0, 1fr); }
  /* One column: the path runs down from marker to marker instead. */
  .etusivu .piirre { padding-left: 4.25rem; }
  .etusivu .piirre-merkki { position: absolute; left: 0; top: 0; }
  .etusivu .piirre h3 { margin-top: 0.7rem; }
  .etusivu .piirre::before,
  .etusivu .piirre:nth-child(3n)::before,
  .etusivu .piirre:nth-child(2n)::before {
    display: block;
    top: 3.75rem;
    bottom: -1.5rem;
    left: 1.625rem;
    right: auto;
    border-top: 0;
    border-left: 2px dashed color-mix(in srgb, var(--korostus) 60%, transparent);
  }
  .etusivu .piirre:last-child::before { display: none; }
  .etusivu .rallikilpi { min-width: 6rem; }
  .etusivu .rallikilpi b { font-size: 2.25rem; }
}

/* Top-left brand: the original Karijärvi Camping GIF in place of the drawn wordmark. */
.etusivu .tunnus-gif { display: block; width: clamp(190px, 22vw, 280px); height: auto; }
/* Logo and the confirmed dates of the next rally, beside the rally text. */
.etusivu .ralli-paivat {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.etusivu .ralli-logo {
  flex: none;
  width: clamp(4.5rem, 3.5rem + 3vw, 6rem);
  height: auto;
  border-radius: 0.4rem;
}
.etusivu .ralli-paivat > span { display: grid; gap: 0.15rem; }
.etusivu .ralli-paivat b {
  color: var(--otsikko);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}
.etusivu .ralli-paivat > span > span { font-size: 0.875rem; color: var(--teksti-2); }