@font-face {
  font-family: "Gochi Hand";
  src: url("/fonts/gochi-hand.woff2") format("woff2");
  font-display: swap;
}

/* Tokens are duplicated rather than imported: this is a separate Netlify site
   on taraconcelman.com and cannot reach the book site's stylesheets. */
:root {
  --ink: #5E3332;
  --near-black: #231F20;
  --sky: #00B6E2;
  --sky-clear: #7ADCE8;
  --cloud-card: #FCFEFE;
  --tap-min: 44px;
  --font-display: "Gochi Hand", cursive;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sky-clear) url("/img/clear.webp") center / cover fixed;
}

img { display: block; max-width: 100%; height: auto; }

.chooser {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  gap: clamp(1.75rem, 4vh, 3rem);
  padding: clamp(2rem, 6vh, 4rem) 1rem;
  max-width: 64rem;
  margin-inline: auto;
}

.chooser__intro { text-align: center; display: grid; justify-items: center; gap: .35rem; }

.chooser__portrait {
  width: clamp(96px, 14vw, 132px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--cloud-card);
  box-shadow: 4px 4px 0 rgb(94 51 50 / .25);
  margin-bottom: .5rem;
}

.chooser__intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  margin: 0;
}

.chooser__intro p { margin: 0; font-size: 1.05rem; }

.chooser__cards { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .chooser__cards { grid-template-columns: 1fr 1fr; } }

/* Sticker language, same as the book site: chunky border, hard offset shadow,
   springs on hover, presses flat. Duplicated deliberately — separate origins. */
.card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem;
  background: var(--cloud-card);
  border: 2.5px solid var(--ink);
  border-radius: 1.25rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 160ms cubic-bezier(.34, 1.56, .64, 1),
              box-shadow 160ms ease;
}

.card:hover { transform: translate(-3px, -3px) rotate(-.7deg); box-shadow: 9px 9px 0 var(--ink); }
.card:active { transform: translate(2px, 2px) rotate(0deg); box-shadow: 2px 2px 0 var(--ink); }
.card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* Full width of the card — a photograph of the book wants to be seen, and at
   thumbnail size the detail is lost. */
.card__art {
  width: 100%;
  border-radius: .6rem;
  box-shadow: 4px 4px 0 rgb(94 51 50 / .22);
}

/* The Lab's mark, sized to sit level with the book photo's visual weight
   without pretending to be a photograph. */
.card__logo { width: clamp(120px, 40%, 190px); margin: .5rem auto 1rem; }

.card h2 { font-family: var(--font-display); font-size: 1.7rem; margin: .25rem 0 0; }
.card p { margin: 0; line-height: 1.5; }
.card__tagline { font-family: var(--font-display); font-size: 1.15rem; }

/* Looks like a button, is a span. The card is already one big <a>, and a real
   button nested inside a link is invalid HTML. margin-top:auto pins it to the
   foot so both cards' actions line up regardless of copy length. */
.card__go {
  margin-top: auto;
  align-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  /* --near-black, not --ink: --ink on --sky is 4.40:1 and this label is
     18.4px, below the large-text threshold, so 4.5:1 applies. 6.82:1 here. */
  color: var(--near-black);
  background: var(--sky);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.card:hover .card__go { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .card, .card__go { transition: none; }
  .card:hover { transform: none; }
  .card:hover .card__go { transform: none; }
}