/* Karijarvi Camping, shared foundation.
 *
 * Colour is sampled from the photographs in original-site/images and nothing
 * else. Every value below can be pointed at the pixel it came from.
 */

/* --- typefaces, self hosted, no CDN ------------------------------------ */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- the place ---------------------------------------------------------- */

:root {
  /* kokko.jpg, the midsummer bonfire, read top to bottom */
  --yo:        #14304f;   /* zenith at midnight */
  --taivas:    #2c5f8a;   /* the blue behind the treeline */
  --vesi:      #4788ae;   /* mid sky, lake water */
  --horisontti:#94d1d6;   /* the pale band along the horizon */

  /* leirintaalue.jpg, the entrance in daylight */
  --kuusi:     #202e10;   /* darkest spruce mass */
  --lehti:     #3a4924;   /* foliage */
  --heina:     #5d6c3e;   /* dry grass, birch leaf */
  --sora:      #c9b59a;   /* the gravel road */
  --kyltti:    #8a2b1c;   /* the red of the entrance sign */
  --paperi:    #e5e1dd;   /* the white of the caravans */
  --muste:     #0c1622;   /* ink */

  --sivu: clamp(1.25rem, 5vw, 5.5rem);   /* page gutter, never below 20px */
}

/* --- reset -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paperi);
  color: var(--muste);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* the attribute has to beat any display rule that follows it */
[hidden] { display: none !important; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

table { border-collapse: collapse; }

/* --- keyboard ----------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--kyltti);
  outline-offset: 3px;
}
.on-sky :focus-visible { outline-color: var(--paperi); }

.ohita {
  position: absolute;
  left: -100vw;
  top: 0;
  background: var(--paperi);
  color: var(--muste);
  padding: 0.75rem 1rem;
  z-index: 50;
}
.ohita:focus { left: 0; }

/* Visually hidden, still read aloud. */
.vain-ruudunlukija {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- the sky ------------------------------------------------------------ */

.taivas-kangas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --- tunnus, the wordmark ------------------------------------------------ */

/* Replaces the old GIF. Set in type rather than drawn, so it stays crisp at
   any size, reads to a screen reader, and takes the colour of wherever it
   sits. The mark above it is the campsite's own horizon, traced from the
   photograph, with its reflection under it. */

.tunnus {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}
.tunnus-merkki {
  grid-row: 1 / span 2;
  width: 2.4rem;
  height: auto;
  flex: none;
}
.tunnus-nimi {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  align-self: end;
}
.tunnus-alanimi {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
  align-self: start;
  margin-top: 0.22rem;
}
.tunnus:hover .tunnus-merkki { opacity: 0.8; }

.tunnus-iso .tunnus-merkki { width: 3.6rem; }
.tunnus-iso .tunnus-nimi { font-size: 2.25rem; }
.tunnus-iso .tunnus-alanimi { font-size: 0.75rem; }

/* --- kartta, the embedded map --------------------------------------------- */

/* It sits in the same frame as the photographs so it belongs to whichever
   site it lands in. This iframe is the only third party request on the page. */
.kartta {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  filter: saturate(0.85);
}
@media (max-width: 46rem) {
  .kartta { aspect-ratio: 1 / 1; }
}

/* The campsite's own wordmark, the same GIF on every page's top bar. */
.tunnus-gif { display: block; width: clamp(170px, 22vw, 280px); height: auto; }