/* ¡Qué oso! website. Copied into site/ by build.py; colours are the cover palette from tools/cover.py. */

@font-face {
  font-family: "Fredoka";
  src: url("/fonts/Fredoka.ttf") format("truetype");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --blue: #1e4e9c;
  --cream: #f7eedd;
  --terracotta: #c65a3a;
  --terracotta-text: #9a3d24;
  --mustard: #e2a72e;
  --ink: #22223b;
  --es-tint: #f4d9cd;   /* Nacho, España: the terracotta wall of his flat */
  --mx-tint: #d9e3f3;   /* Paloma, México: the Talavera tiles behind her */
  --line: 3px;
  --radius: 22px;
  --gutter: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--cream);
  font: 400 1.125rem/1.55 "Fredoka", ui-rounded, system-ui, sans-serif;
  /* the covers' risograph grain, in ink, over Talavera blue */
  background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .13 0 0 0 0 .23 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

main { flex: 1; }
::selection { background: var(--mustard); color: var(--ink); }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 8px; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 1.1em; height: 1.1em; flex: none; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .2em; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.12; text-wrap: balance; }
p { margin: 0; }
mark {
  background: var(--mustard);
  color: var(--ink);
  border-radius: 6px;
  padding: 0 .18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- header and footer ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}
.top .brand img { width: 128px; }
.top nav { display: flex; gap: clamp(14px, 3vw, 30px); font-weight: 600; }
.top nav a { text-decoration: none; padding-block: 6px; white-space: nowrap; }
.top nav a:hover { text-decoration: underline; }
@media (max-width: 420px) {
  .top .brand img { width: 100px; }
  .top nav { gap: 14px; font-size: 1rem; }
}

.foot {
  margin-top: clamp(64px, 9vw, 112px);
  padding-block: 40px 48px;
  background: var(--ink);
  font-size: 1rem;
}
.foot .wrap { display: grid; gap: 10px; }
.foot-name { font-weight: 700; font-size: 1.2rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 8px; font-weight: 600; }

/* ---------- shared pieces ---------- */

.display {
  color: var(--cream);
  font-size: clamp(2.3rem, 7.2vw, 4.6rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  -webkit-text-stroke: .15em var(--ink);
  paint-order: stroke fill;
  text-shadow: .05em .07em 0 var(--ink);
}

.window {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--ink);
}
.window figcaption {
  position: absolute;
  left: 6%;
  bottom: 6%;
  padding: .25em .85em;
  border-radius: 99px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  font-size: clamp(.8rem, 1.6vw, .95rem);
  white-space: nowrap;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .75em 1.25em;
  border: var(--line) solid var(--ink);
  border-radius: 99px;
  background: var(--cream);
  color: var(--ink);
  font: 600 1.05rem/1.2 "Fredoka", ui-rounded, system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: translate .16s cubic-bezier(.16, 1, .3, 1), box-shadow .16s cubic-bezier(.16, 1, .3, 1);
}
.button:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.button:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.button.primary { background: var(--mustard); }
.sheet .button { color: var(--ink); }

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pill {
  padding: .2em .85em;
  border-radius: 99px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  font-size: .95rem;
}
.pill.new { background: var(--mustard); color: var(--ink); font-size: .8rem; vertical-align: .1em; }
.done-pill {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding-left: .55em;
  background: var(--blue);
  font-size: .8rem;
  vertical-align: .1em;
}
.done-pill svg { width: 1em; height: 1em; }
.thumb { position: relative; }
.done-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--mustard);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: translate .2s cubic-bezier(.16, 1, .3, 1);
}
.done-badge svg { width: 26px; height: 26px; }
.episodes a:hover .done-badge { translate: -2px -2px; }

/* a button that reads as a link: secondary actions that shouldn't compete with the content */
.text-button {
  margin-top: 14px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: 600 1rem/1.3 "Fredoka", ui-rounded, system-ui, sans-serif;
  text-decoration: underline 2px;
  text-underline-offset: .2em;
  cursor: pointer;
}

.sheet {
  padding: clamp(24px, 5.5vw, 72px);
  border: var(--line) solid var(--ink);
  border-radius: calc(var(--radius) + 6px);
  background: var(--cream);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}
.sheet a:not(.button) { color: var(--blue); }
.sheet h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); margin-bottom: 20px; }
.sheet > section + section { margin-top: clamp(56px, 8vw, 96px); }
.note { color: #4a4a63; margin-bottom: 20px; max-width: 62ch; }

/* ---------- home ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.55fr) 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding-block: clamp(20px, 5vw, 64px) clamp(56px, 8vw, 104px);
}
.hero .window { width: 100%; max-width: 290px; }
.hero .nacho { justify-self: end; rotate: -2.5deg; }
.hero .paloma { justify-self: start; rotate: 2.5deg; }
.hero-text { display: grid; justify-items: center; gap: 18px; text-align: center; }
.hero h1 img { width: min(100%, 540px); }
.tagline { font-weight: 600; font-size: clamp(1.35rem, 2.8vw, 1.9rem); line-height: 1.2; }
.lead { max-width: 44ch; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }

@media (prefers-reduced-motion: no-preference) {
  /* the two call windows connect: they rise and settle into their tilt */
  .hero .window { animation: join 1s cubic-bezier(.16, 1, .3, 1) both; }
  .hero .paloma { animation-delay: .14s; }
}
@keyframes join { from { translate: 0 22px; rotate: 0deg; } }

.how { padding-bottom: clamp(56px, 8vw, 96px); }
.how h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); margin-bottom: 28px; }
.how dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 28px clamp(24px, 3vw, 36px);
  margin: 0;
}
.how dt { color: var(--mustard); font-weight: 700; font-size: 1.45rem; line-height: 1.2; }
.how dd { margin: 6px 0 0; }

.episodes { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 40px); }
.episodes a {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  align-items: center;
  gap: clamp(18px, 3.5vw, 40px);
  color: var(--ink) !important;
  text-decoration: none;
}
.episodes img {
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: translate .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s cubic-bezier(.16, 1, .3, 1);
}
.episodes a:hover img { translate: -2px -2px; box-shadow: 7px 7px 0 var(--ink); }
.episodes a:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .15em; }
.episodes h3 { font-size: clamp(1.45rem, 3vw, 2rem); margin-block: 6px 10px; }
.meta { color: var(--blue); font-weight: 600; font-size: .95rem; }
.hook { max-width: 52ch; }

.signup { margin-top: clamp(56px, 8vw, 96px); display: grid; justify-items: start; gap: 12px; }
.signup h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .hero .window { max-width: 210px; }
  .hero-text { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .episodes a { grid-template-columns: 1fr; }
}

/* ---------- episode ---------- */

.ep-head {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-block: clamp(20px, 5vw, 56px) clamp(40px, 6vw, 72px);
  text-align: center;
}
.grammar { max-width: 60ch; }
.video { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; margin-top: 18px; }
.video a, .video img, .video iframe { display: block; width: 100%; height: 100%; border: 0; }
.video img { object-fit: cover; }
.video.loading .play-btn { animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { scale: .9; opacity: .75; } }
/* where the visitor stopped last time, in the poster's empty band where the title was */
.resume-at {
  position: absolute;
  left: 50%;
  top: 4.5%;
  translate: -50% 0;
  padding: .3em .9em;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(64px, 11vw, 92px);
  height: clamp(64px, 11vw, 92px);
  display: grid;
  place-items: center;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--mustard);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: scale .25s cubic-bezier(.16, 1, .3, 1);
}
.play-btn svg { width: 44%; height: 44%; translate: 6% 0; }
.video a:hover .play-btn { scale: 1.08; }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}
.blurb { display: grid; gap: 1em; font-size: 1.2rem; max-width: 62ch; }
.blurb p { margin: 0; }
.blurb p:first-child { font-size: 1.4rem; font-weight: 600; line-height: 1.35; }
.phrases ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 1.15rem; font-weight: 500; }

.pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.pairs li { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pairs li span {
  padding: 12px 18px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
}
.pairs .es { background: var(--es-tint); }
.pairs .mx { background: var(--mx-tint); }
.pairs .head span {
  padding-block: 0;
  border: 0;
  background: none;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pairs .head .es { color: var(--terracotta-text); }
.pairs .head .mx { color: var(--blue); }

/* Spain-or-Mexico game, played on the two flags: Spain on the left, Mexico on the right, split by an
   ink line like the covers' video call. Plain stripes, no coats of arms. Everything to read sits on
   cream, because dark text on the flag reds doesn't hold up. */
.quiz {
  --es-red: #aa151b;
  --es-yellow: #f1bf00;
  --mx-green: #006847;
  --mx-red: #ce1126;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 760px;
  padding: clamp(26px, 4.5vw, 44px) 16px;
  border: var(--line) solid var(--ink);
  border-radius: 20px;
  background:
    linear-gradient(var(--es-red) 25%, var(--es-yellow) 25% 75%, var(--es-red) 75%) left / 50% 100% no-repeat,
    linear-gradient(90deg, var(--mx-green) 33.34%, #fff 33.34% 66.67%, var(--mx-red) 66.67%) right / 50% 100% no-repeat;
  text-align: center;
}
.quiz::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: var(--line);
  translate: -50% 0;
  background: var(--ink);
}
.quiz > * { position: relative; }
.quiz[hidden], .pairs[hidden] { display: none; }
.quiz + .pairs { margin-top: 32px; }
.quiz-count {
  padding: .25em .9em;
  border-radius: 99px;
  background: var(--ink);
  color: var(--cream);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.quiz-card {
  display: grid;
  gap: 2px;
  padding: 12px 28px 14px;
  border: var(--line) solid var(--ink);
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 5px 5px 0 var(--ink);
}
.quiz-word { font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 700; line-height: 1.2; }
.quiz-ask { font-weight: 600; font-size: 1.05rem; }
.quiz-answers { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.quiz-answers .correct { background: var(--mustard); }
.quiz-answers .wrong { text-decoration: line-through 2px; color: #6b6b80; }
.quiz-answers button:disabled { cursor: default; }
.quiz-answers button:disabled:hover { translate: none; box-shadow: 4px 4px 0 var(--ink); }
.quiz-result:not(:empty) {
  max-width: 46ch;
  padding: 12px 18px 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--cream);
  font-size: 1.1rem;
}
.quiz-result .button { margin: 12px auto 0; display: flex; width: fit-content; }

.vocab { overflow-x: auto; }
.star {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -4px 8px -4px -4px;
  padding: 0;
  vertical-align: middle;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: scale .2s cubic-bezier(.16, 1, .3, 1);
}
.star svg { width: 22px; height: 22px; fill: transparent; transition: fill .15s; }
.star:hover { scale: 1.12; }
.star:hover svg { fill: #f3d58a; }
.star[aria-pressed="true"] svg { fill: var(--mustard); }
.vocab table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.vocab th {
  padding: 10px 14px 10px 0;
  border-bottom: var(--line) solid var(--ink);
  text-align: left;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vocab td { padding: 13px 14px 13px 0; border-bottom: 2px dashed #c9bfae; vertical-align: top; }
.vocab td:first-child { width: 46%; font-weight: 600; }
.vocab tr:last-child td { border-bottom: 0; }

.transcript { max-width: 820px; margin-inline: auto; }
.transcript > h2 { text-align: center; }
.transcript > .note { margin-inline: auto; text-align: center; }
.chapter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 56px 0 22px;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}
.time {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .4em .8em .4em .6em;
  border-radius: 99px;
  background: var(--ink);
  color: var(--cream) !important;
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background .15s;
}
.time:hover { background: var(--blue); }
.time svg { width: .9em; height: .9em; }

/* Nacho on the left and Paloma on the right, as on the covers; the names are for screen readers */
.legend { display: flex; justify-content: space-between; gap: 12px; margin: 28px 0 -8px; font-weight: 600; font-size: .95rem; }
.legend span { padding: .2em .8em; border: 2px solid var(--ink); border-radius: 99px; }
.legend .nacho { background: var(--es-tint); }
.legend .paloma { background: var(--mx-tint); }
.turn { width: fit-content; max-width: min(88%, 640px); margin-bottom: 10px; }
.turn.paloma { margin-left: auto; }
.who {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bubble {
  display: grid;
  gap: .45em;
  padding: 10px 17px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  font-size: 1.1rem;
  line-height: 1.5;
}
.nacho .bubble { background: var(--es-tint); border-bottom-left-radius: 6px; }
.paloma .bubble { background: var(--mx-tint); border-bottom-right-radius: 6px; }

/* Following the video: the bubble being said lifts like a pressed sticker, its other lines fade back */
.bubble { transition: translate .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s cubic-bezier(.16, 1, .3, 1); }
.bubble.live { translate: -2px -3px; box-shadow: 5px 6px 0 var(--ink); }
.bubble.live p { transition: opacity .3s; }
.bubble.live p:not(.now) { opacity: .5; }
.transcript p[data-s] { cursor: pointer; }
.transcript p[data-s]:hover { text-decoration: underline 2px dotted; text-underline-offset: .28em; }

.your-turn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0;
  font-weight: 500;
}
.your-turn span {
  padding: .25em .9em;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: var(--mustard);
  font-weight: 700;
}

.question { display: grid; justify-items: center; gap: 18px; text-align: center; }
.question h2 { margin-bottom: 0; }
.question p { max-width: 54ch; font-size: 1.25rem; }

.prevnext { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 44px; }
.prevnext .next { margin-left: auto; text-align: right; }

@media (max-width: 760px) {
  .intro { grid-template-columns: 1fr; }
  .turn { max-width: 92%; }
}

/* ---------- about and 404 ---------- */

.prose { max-width: 860px; margin-top: clamp(16px, 4vw, 48px); }
.prose h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 24px; }
.prose p, .prose dl { max-width: 66ch; }
.prose > p + p { margin-top: 1em; }
.prose section { margin-top: clamp(40px, 6vw, 64px) !important; }
.prose dl { display: grid; gap: 18px; margin: 0; }
.prose dt { font-weight: 700; font-size: 1.25rem; }
.prose dd { margin: 2px 0 0; }
.prose section p + p { margin-top: 1em; }

.my-words section { margin-top: 36px; }
.my-words h2 { font-size: 1.4rem; margin-bottom: 10px; }
.my-words ul { list-style: none; margin: 0; padding: 0; }
.my-words li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 2px dashed #c9bfae;
}
.my-words li:last-child { border-bottom: 0; }
.my-words .es { font-weight: 600; }
.my-words .remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
}
.my-words .remove:hover { background: var(--es-tint); }
.my-words .remove svg { width: 16px; height: 16px; }
.empty { margin-top: 24px; padding: 18px 22px; border: 2px dashed #c9bfae; border-radius: 16px; max-width: 56ch; }
@media (max-width: 560px) {
  .my-words li { grid-template-columns: minmax(0, 1fr) 36px; }
  .my-words .en { grid-column: 1; grid-row: 2; color: #4a4a63; }
  .my-words .remove { grid-column: 2; grid-row: 1 / span 2; }
}

.lost { display: grid; justify-items: center; gap: 22px; padding-block: clamp(48px, 10vw, 120px); text-align: center; }
.lost p { max-width: 40ch; font-size: 1.25rem; }