/* The thesommer.co splash page. Every value comes from the stand-in brand kit;
   brand-source.json names the brand-kit commit. Don't add values here that the
   kit doesn't have: change the kit first. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-1.003-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-1.000-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  /* Stand-in kit colors */
  --canvas: #FBFAF7;
  --ink: #1F2328;
  --envelope: #EAE4D9;
  --oxblood: #5A2E28;
  --viewer: #141516;
  --secondary: #5E6266;
  /* Jobs on this page */
  --background: var(--canvas);
  --brand: var(--oxblood);     /* the wordmark, and the logo once it's added */
  --text: var(--secondary);
  --link: var(--ink);
  --book: "Newsreader", Georgia, "Times New Roman", serif;
  --system: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Dark mode follows the kit: the viewer color behind, envelope for the brand
   reversed and for the text. */
@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--viewer);
    --brand: var(--envelope);
    --text: var(--envelope);
    --link: var(--envelope);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--background);
}

body {
  color: var(--text);
  font: 400 16px/1.5 var(--system);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.splash {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  text-align: center;
  animation: arrive 900ms ease-out both;
}

.wordmark {
  margin: 0;
  color: var(--brand);
  font: 400 clamp(56px, 4.5vw + 34px, 88px)/1 var(--book);
  letter-spacing: -0.01em;
}

.line {
  margin: 0;
  color: var(--text);
  font: 400 15px/1.5 var(--system);
  letter-spacing: 0.04em;
}

@media (min-width: 768px) {
  .splash { gap: 22px; }
  .line { font-size: 16px; }
}

a {
  color: var(--link);
  text-underline-offset: 3px;
}
a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The logo slot. Unused until the logo is added (README, "Adding the logo").
   The kit: oxblood on canvas, envelope on dark; the mark alone only at 40 px
   or taller. */
.logo {
  display: block;
  width: auto;
  height: clamp(96px, 6vw + 64px, 132px);
  margin-bottom: 8px;
  color: var(--brand);
}

@keyframes arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .splash { animation: none; }
}