/* Storyish, coming soon (storyish.net)
   The approved Bubble look: lime is the ground, ink carries everything, pink appears only where speech happens.
   The logo's bubble is mid-sentence: three dots pulse inside it at speaking pace. CSS only, no JavaScript. */

/* Fraunces: Fontsource 5.3.0 (Google Fonts v38), instanced to SOFT 100, WONK 0, wght 560; opsz kept variable. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 560;
  font-display: swap;
  src: url("/fonts/fraunces-560-latin-ext-v1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 560;
  font-display: swap;
  src: url("/fonts/fraunces-560-latin-v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* League Spartan: Fontsource 5.3.0, unmodified, variable wght. */
@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/league-spartan-latin-ext-v1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/league-spartan-latin-v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --lime: #D5F16F;
  --ink: #272A25;
  --pink: #F185BB;

  --serif: "Fraunces", serif;
  --sans: "League Spartan", sans-serif;

  /* layout: 12 columns, margins and gutters scale with the viewport (as bubble-v2) */
  --m: clamp(20px, 4.45vw, 64px);
  --g: clamp(12px, 1.67vw, 24px);

  /* type (min at 375, max at 1440) */
  --t-say: clamp(40px, 5.6vw, 80px);
  --t-body: clamp(18px, 1.46vw, 21px);
  --t-small: 16px;
}

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

html {
  background: var(--lime);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.012em;
  font-synthesis: none;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--pink); color: var(--ink); }

a { color: inherit; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

.link {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.24em;
  transition: text-decoration-color .25s ease;
}
.link:hover { text-decoration-color: var(--pink); text-decoration-thickness: 4px; }

/* ---------- header: the language switcher, plain text "SR / EN", the current language is not a link ---------- */

.top {
  display: flex;
  justify-content: flex-end;
  padding: 26px var(--m) 0;
}
.lang { margin: 0; padding: 6px 0; font-size: 17px; font-weight: 500; letter-spacing: 0.015em; white-space: nowrap; }
.lang a {
  display: inline-block;
  padding: 8px 4px;
  margin: -8px -4px;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.24em;
  transition: text-decoration-color .25s ease;
}
.lang a:hover { text-decoration-color: var(--pink); text-decoration-thickness: 4px; }

/* ---------- the page: the logo is the hero, the note sits under it ---------- */

/* rows: free space above the logo, the logo, free space, the note. The free space is shared, never a fixed gap. */
.page {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(16px, 1fr) auto minmax(40px, 1.25fr) auto;
  column-gap: var(--g);
  padding: 0 var(--m) clamp(28px, 5vh, 56px);
}
/* the 404 has no switcher; this keeps its logo where the other pages have theirs */
.page-bare { padding-top: 58px; }

.logo { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: inherit; font-weight: inherit; line-height: 0; }
/* the lockup is as large as the width allows, but shrinks on short screens so the note stays in view */
.lockup {
  display: block;
  width: min(100%, 1240px, max(55%, (100vh - 470px) * 2.787));
  width: min(100%, 1240px, max(55%, (100svh - 470px) * 2.787));
  height: auto;
  overflow: visible;
}

/* the headline and the right column share their last baseline */
.note {
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  align-items: end;
  align-items: last baseline;
}

/* Branislava's line: Fraunces, as the Bubble's headlines */
.say {
  grid-column: 1 / 7;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-say);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.018em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.side { grid-column: 8 / -1; }
.prose p { margin: 0 0 0.7em; max-width: 29em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.where { margin: 28px 0 0; font-size: var(--t-small); line-height: 1.4; max-width: 22em; }

/* ---------- the voice: the logo's bubble, mid-sentence ----------
   Static by default: the dots sit in the bubble as an ellipsis. They pulse only when the visitor has not asked for
   reduced motion. Scale only, so every frame stays ink on pink (an opacity fade mixes the two into mauve).
   Speaking pace: one dot every 0.3 s, then a pause; nothing travels. */

.voice { transform-box: fill-box; transform-origin: 4% 100%; }
.dot { transform-box: fill-box; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) {
  .voice { animation: breathe 4.8s ease-in-out infinite; }
  .dot { animation: speak 2.4s ease-in-out infinite both; }
  .dot:nth-of-type(2) { animation-delay: .3s; }
  .dot:nth-of-type(3) { animation-delay: .6s; }
}

@keyframes speak {
  0%, 50%, 100% { transform: scale(.6); }
  20% { transform: scale(1); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* ---------- 404: the same look, one line in each language ---------- */

.lost { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.lost-en { grid-column: 1 / 6; }
.lost-sr { grid-column: 7 / 12; }
.lost .say { font-size: clamp(34px, 4vw, 58px); }
.lost p:last-child { margin: 20px 0 0; }

/* ---------- 375 to tablet ---------- */

@media (max-width: 820px) {
  .top { padding-top: 20px; }
  .lang { font-size: 16px; }

  .page { grid-template-rows: minmax(8px, 1fr) auto minmax(32px, 1fr) auto; }
  .page-bare { padding-top: 50px; }
  .lockup { width: 100%; }

  .note, .lost { display: block; }
  .say { margin-bottom: 22px; }
  .where { margin-top: 22px; }
  .lost-sr { margin-top: 40px; }
}