/* Snow globe: a souvenir shop shelf in warm paper and pine green; inside the glass, a winter night in deep blue
   with a cottage, three firs and white star-shaped flakes. */
:root {
  --paper: #f1e8d8;         /* the page */
  --ink: #1f3a2f;           /* the words */
  --ink-soft: #5d6b61;      /* the smaller words */
  --accent: #b5482f;        /* the price */
  --water-light: #4a7aa3;   /* the water near the light */
  --water-deep: #183654;    /* the water at the edges */
  --hill-far: #2a4c6e;      /* the hills far away */
  --hill-near: #355d80;     /* the hills nearer */
  --snow: #e9f0f6;          /* the snowy ground and the caps */
  --flake: #ffffff;         /* the snowflakes */
  --flake-edge: #5f7f9f;    /* the thin outline of the flakes */
  --fir: #1f5a4a;           /* the fir trees */
  --fir-dark: #164437;      /* the shaded side of the firs */
  --wall: #b5482f;          /* the cottage walls */
  --roof: #3b2a2a;          /* the roof and the chimney */
  --window: #f4c96b;        /* the warm windows */
  --wood-light: #8a5a36;    /* the walnut base, top */
  --wood-dark: #4f2f1c;     /* the walnut base, bottom */
  --brass-light: #e8cf8a;   /* the plaque, the bright corner */
  --brass-dark: #a98236;    /* the plaque, the dark corner */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(16px, 4vw, 64px);
  padding: clamp(20px, 5vh, 56px) clamp(20px, 6vw, 96px);
  background:
    radial-gradient(ellipse 60% 55% at 70% 58%, color-mix(in srgb, var(--paper) 70%, #fff) 0%, transparent 70%),
    var(--paper);
  user-select: none;
  -webkit-user-select: none;
}

.copy {
  max-width: 30rem;
}

.copy__shop {
  margin: 0 0 0.9em;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.copy__title {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 560;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: clamp(38px, 5.4vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.word {
  display: inline-block;
  white-space: nowrap;
}

.char,
.char__in {
  display: inline-block;
}

.copy__line {
  margin: 1.1em 0 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 26rem;
}

.copy__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em 1em;
  margin: 1.2em 0 0;
  font-size: clamp(13px, 1.05vw, 15px);
  color: var(--ink-soft);
}

.copy__price {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 1.7em;
  font-weight: 600;
  color: var(--accent);
}

.shelf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
}

.globe {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  width: min(100%, 72vh);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.globe:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
  border-radius: 24px;
}

.globe__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hint {
  margin: 0.6em 0 0;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 500;
  color: var(--ink-soft);
}

/* the scene inside the glass */
.water {
  stroke: none;
}

.hill--far {
  fill: var(--hill-far);
}

.hill--near {
  fill: var(--hill-near);
}

.ground {
  fill: var(--snow);
}

.fir {
  fill: var(--fir);
}

.fir__shade {
  fill: var(--fir-dark);
}

.fir__trunk {
  fill: var(--roof);
}

.house__wall {
  fill: var(--wall);
}

.house__gable {
  fill: color-mix(in srgb, var(--wall) 82%, #000);
}

.house__boards {
  fill: none;
  stroke: color-mix(in srgb, var(--wall) 70%, #000);
  stroke-width: 1;
  opacity: 0.5;
}

.house__roof,
.house__chimney,
.house__chimney-cap {
  fill: var(--roof);
}

.house__window {
  fill: var(--window);
}

.house__frame {
  fill: none;
  stroke: var(--roof);
  stroke-width: 1.6;
}

.house__door {
  fill: var(--roof);
}

.house__knob {
  fill: var(--window);
}

.cap {
  fill: none;
  stroke: var(--snow);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flake__edge {
  fill: none;
  stroke: var(--flake-edge);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-opacity: 0.8;
}

.flake__body {
  fill: none;
  stroke: var(--flake);
  stroke-width: 1.05;
  stroke-linecap: round;
}

/* the glass */
.glass__rim {
  fill: none;
  stroke: #ffffff;
  stroke-opacity: 0.45;
  stroke-width: 3;
}

.glass__sheen {
  opacity: 0;
}

.glass__shine {
  fill: #ffffff;
  opacity: 0.55;
}

.glass__shine--small {
  opacity: 0.35;
}

/* the base */
.shadow {
  fill: var(--ink);
  opacity: 0.16;
}

.base__collar {
  fill: var(--wood-dark);
}

.base__body {
  fill: url(#sg-wood);
}

.base__grain {
  fill: none;
  stroke: var(--wood-dark);
  stroke-width: 1.4;
  opacity: 0.35;
}

.base__foot {
  fill: var(--wood-dark);
}

.base__plate-edge {
  fill: none;
  stroke: var(--brass-dark);
  stroke-width: 1;
  opacity: 0.7;
}

.base__small {
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  fill: #5a4320;
}

.base__name {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  fill: #4a3518;
}

/* the phone and the narrow windows: the words on top, the globe under them */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 28px 20px 20px;
  }

  .copy {
    max-width: 34rem;
  }

  .copy__title {
    font-size: clamp(34px, 9vw, 60px);
  }

  .copy__line {
    margin-top: 0.7em;
    font-size: 15px;
  }

  .copy__meta {
    margin-top: 0.7em;
  }

  .shelf {
    justify-content: center;
  }

  .globe {
    width: min(100%, 64vh, 560px);
  }
}

@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  .copy__line {
    display: none;
  }
}