/* Random Salt — one stylesheet for the whole site. Paper & ink. */

@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/caveat-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/caveat-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --paper: #faf6ec;
  --paper-deep: #f1ecdf;
  --ink: #1e2433;
  --night: #1c2440;
  --star: #fdfaf1;
  --teal: #00c4a7;
  --teal-light: #8ff2df;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.65;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; }

h1, h2 { font-family: var(--hand); font-weight: 600; line-height: 1.15; margin: 0 0 0.5rem; }
h1 { font-size: clamp(2.8rem, 8vw, 4.4rem); }
h2 { font-size: clamp(2rem, 5vw, 2.8rem); }

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

/* ---- nav ---- */
.site-nav { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 0; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--hand); font-weight: 600; font-size: 1.6rem; text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; font-family: var(--hand); font-size: 1.35rem; }
.site-nav ul a { text-decoration: none; }

/* ---- hero ---- */
.hero { text-align: center; padding: 3.5rem 0 0; }
.hero .tagline { font-size: 1.15rem; opacity: 0.75; max-width: 34ch; margin: 0.25rem auto 0; }
.hero .pour { display: block; width: min(340px, 80vw); margin: 1rem auto -1px; }
button.pour { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.pour svg { display: block; width: 100%; height: auto; }
button.pour:focus-visible { outline: 2px dashed var(--ink); outline-offset: 6px; border-radius: 10px; }
.shaker-wiggle { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes idle-twitch {
  0%, 86%, 100% { transform: rotate(0deg); }
  89% { transform: rotate(4deg); }
  92% { transform: rotate(-3deg); }
  95% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .shaker-wiggle { animation: idle-twitch 4.5s ease-in-out infinite; }
}

/* ---- night band (products) ---- */
.night { background: linear-gradient(var(--paper), var(--night) 17%); color: var(--star); text-align: center; padding: 5.5rem 1.25rem 4.5rem; }
.night .kicker { font-family: var(--serif); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-light); margin: 0; }
.night h2 { color: var(--star); }
.night .desc { opacity: 0.8; max-width: 42ch; margin: 0.4rem auto 1rem; }
.badge-soon { display: inline-block; font-family: var(--hand); font-weight: 600; font-size: 1.2rem; color: var(--night); background: var(--teal); border-radius: 999px; padding: 0.1rem 0.9rem; }
.night .skyline { display: block; width: min(420px, 90vw); margin: 2rem auto 0; }

/* ---- paper sections ---- */
.section { padding: 3.5rem 0; text-align: center; }
.section p { max-width: 52ch; margin-inline: auto; }

/* ---- long-form text (privacy) ---- */
.prose { text-align: left; padding: 2.5rem 0 4rem; }
.prose h1 { font-size: clamp(2.4rem, 6vw, 3.2rem); }
.prose h2 { font-size: 1.9rem; margin-top: 2rem; }
.prose .meta { opacity: 0.6; font-size: 0.9rem; }

/* ---- 404 ---- */
.lost { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: 0.5rem; }
.lost img { width: 110px; margin: 0 auto; }

/* ---- footer ---- */
.site-footer { background: var(--paper-deep); font-size: 0.85rem; padding: 1.4rem 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.site-footer p { margin: 0; }

@media (max-width: 480px) {
  .site-nav ul { gap: 0.9rem; font-size: 1.2rem; }
}