/* ============================================================
   BRAIN BOOST — one stylesheet for the whole site.
   Change something here and it changes on every page.

   How this file is organized (scroll to the part you need):
     1.  Settings ......... colors, sizes, all in one place
     2.  Reset ............ boring browser cleanup
     3.  Layout ........... .page, .band, .wrap
     4.  Nav .............. the bar at the top
     5.  Buttons
     6.  Hero ............. the big headline area
     7.  Image slots ...... dashed boxes where pictures go
     8.  App tiles
     9.  Stats strip
     10. Steps
     11. Quote cards
     12. "Next up" box
     13. CTA band
     14. Text blocks
     15. App detail page
     16. Apps listing page
     17. Team cards
     18. Footer
     19. Focus outlines + animation
   ============================================================ */


/* ---- 1. SETTINGS -------------------------------------------
   These are the "dials" for the whole site. Change a hex code
   here and that color updates everywhere it is used.
   ------------------------------------------------------------ */

:root {
  --ink:      #14213D;   /* dark navy — all the text and outlines */
  --paper:    #EFF5F2;   /* the page background */
  --paper-2:  #E4EFEA;   /* a slightly darker band background */
  --card:     #FFFFFF;   /* inside of cards and tiles */

  --creature: #2FBF71;   /* Creature Catch  — green  */
  --math:     #FF6B35;   /* Hack Math       — orange */
  --note:     #7B5CD6;   /* Grow a Note     — violet */
  --sun:      #FFD166;   /* highlight yellow */
  --sky:      #4CC9F0;   /* extra blue, for a 4th app */
  --bubble:   #FF8FAB;   /* extra pink, for a 5th app */

  --edge:   3px;         /* how thick the outlines are */
  --pop:    8px;         /* how far the "sticker" shadow sits */
  --radius: 18px;        /* how round the corners are */
}


/* ---- 2. RESET ---------------------------------------------- */

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

body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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


/* ---- 3. LAYOUT ---------------------------------------------- */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* keeps the floating shapes tidy */
}

/* .page wraps the content on every page */
.page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

/* .band is a full-width stripe of color.
   Put a .wrap inside it to keep the words centered. */
.band {
  margin: 5rem calc(50% - 50vw) 0;
  padding: 4rem calc(50vw - 50%);
  background: var(--paper-2);
  border-top: var(--edge) solid var(--ink);
  border-bottom: var(--edge) solid var(--ink);
}

.band--white { background: var(--card); }

/* small helpers */
.center      { text-align: center; }
.center .lede,
.center h2   { margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: 1rem; }

/* a section title used above a group of cards */
.section-head { margin-bottom: 2.5rem; }

.section-head h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.section-head p {
  margin-top: 0.75rem;
  max-width: 48ch;
  font-size: 1.0625rem;
}

/* the little pill that sits above a section title */
.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.2rem 0.8rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--accent, var(--sun));
}


/* ---- 4. NAV -------------------------------------------------
   The bar at the top. It sticks to the top of the screen as
   you scroll. On a phone the links drop onto a second row.
   ------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: var(--edge) solid var(--ink);
}

.nav__inner {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.wordmark:hover { text-decoration: underline; text-decoration-thickness: 3px; }

/* the three little color chips next to the name */
.chips { display: flex; gap: 5px; }
.chips span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ink);
}
.chips span:nth-child(1) { background: var(--creature); }
.chips span:nth-child(2) { background: var(--math); }
.chips span:nth-child(3) { background: var(--note); }

.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.nav__links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding: 0.2rem 0;
  border-bottom: 3px solid transparent;
}

.nav__links a:hover { border-bottom-color: var(--ink); }

/* add class="is-here" to the link for the page you are on */
.nav__links a.is-here { border-bottom-color: var(--math); }

@media (max-width: 40rem) {
  .wordmark { margin-right: 0; width: 100%; }
  .nav__inner { justify-content: center; }
}

/* the old header, kept so older pages still look right */
.masthead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 0 4rem;
}


/* ---- 5. BUTTONS --------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: var(--card);
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

.btn--sun      { background: var(--sun); }
.btn--creature { background: var(--creature); }
.btn--math     { background: var(--math); }
.btn--note     { background: var(--note); color: #FFFFFF; }
.btn--small    { padding: 0.35rem 1rem; font-size: 0.9375rem; box-shadow: 3px 3px 0 var(--ink); }

/* a row of buttons that wraps neatly */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}


/* ---- 6. HERO ------------------------------------------------ */

.hero {
  position: relative;
  padding: 4rem 0 3.5rem;
}

/* two columns: words on the left, picture on the right */
.hero--split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 52rem) {
  .hero--split { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero h1 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 15ch;
}

/* draw a wobbly yellow highlight behind a word */
.hero h1 .mark {
  background: linear-gradient(transparent 58%, var(--sun) 58%);
  padding: 0 0.1em;
}

.lede {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: 1.1875rem;
}

/* the floating shapes beside the hero — just decoration.
   They sit out in the empty space at the edges of the page, and
   they disappear on smaller screens where there is no room. */
.deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;                  /* switched on in the media query below */
}

/* everything except the shapes sits on top of them */
.hero > *:not(.deco) { position: relative; z-index: 1; }

.deco i {
  position: absolute;
  display: block;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
}

.deco i:nth-child(1) { width: 78px; height: 78px; top: 8%;    right: -5.5rem; background: var(--sun); }
.deco i:nth-child(2) { width: 46px; height: 46px; bottom: 14%; left: -5rem;   background: var(--sky); }
.deco i:nth-child(3) { width: 26px; height: 26px; top: 58%;   left: -3.25rem; background: var(--bubble); }

@media (min-width: 74rem) {
  .deco { display: block; }
}


/* ---- 7. IMAGE SLOTS -----------------------------------------
   A dashed box that shows where a picture goes and how big it
   should be. When the real picture is ready:

     1. Put the image file in the bucket next to the html.
     2. Delete the whole <div class="slot"> block.
     3. Paste in:  <img src="myfile.png" alt="what it shows">

   The sizes written on each box are the pixel sizes to export.
   ------------------------------------------------------------ */

.slot {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--slot-ratio, 4 / 3);
  padding: 1rem;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
  border: var(--edge) dashed var(--ink);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, #FFFFFF 0 14px, #F1F6F4 14px 28px);
}

.slot b {
  display: block;
  margin-top: 0.35rem;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 1.0625rem;
}

/* the logo mark in the nav bar. It's an SVG, so it stays sharp at
   any size — change the two numbers here and in the <img> tag
   together if you ever want it bigger. */
.logo-mark {
  width: 40px;
  height: 40px;
  flex: none;
}

/* a square slot, for photos of people */
.slot--square { --slot-ratio: 1 / 1; }

/* a wide slot, for screenshots */
.slot--wide { --slot-ratio: 16 / 10; }

/* ---- Real pictures, once a dashed box has been replaced -------
   .hero-art is for a drawing with a see-through background, so it
   gets no outline. .shot is for screenshots and photos, so it gets
   the same thick outline as everything else on the site.
   --------------------------------------------------------------- */

.hero-art { width: 100%; height: auto; }

.shot {
  width: 100%;
  height: auto;
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
}

/* keeps a person's photo square no matter what shape the file is */
.shot--square { aspect-ratio: 1 / 1; object-fit: cover; }


/* ---- 8. APP TILES ------------------------------------------- */

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem;
}

.tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

/* pressing a tile pushes it down into its own shadow */
.tile:hover,
.tile:focus-visible {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0 var(--ink);
}

.tile:active {
  transform: translate(var(--pop), var(--pop));
  box-shadow: 0 0 0 var(--ink);
}

/* the colored square the drawing sits in */
.glyph {
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  border: var(--edge) solid var(--ink);
  border-radius: 14px;
  background: var(--accent, var(--sun));
  margin-bottom: 1.25rem;
  flex: none;
}

.glyph svg { width: 2.5rem; height: 2.5rem; display: block; }

.glyph--big { width: 6rem; height: 6rem; border-radius: 18px; }
.glyph--big svg { width: 3.25rem; height: 3.25rem; }

.tile h2, .tile h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.tile p {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* pushes the Play pill to the bottom so every tile lines up */
.tile .play { margin-top: auto; align-self: flex-start; }

.play {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.3rem 0.9rem;
  font-weight: 500;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--accent, var(--sun));
}

/* a row of small labels under an app name */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.tags li {
  padding: 0.1rem 0.65rem;
  font-size: 0.8125rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
}

/* each tile sets its own accent color */
.tile--creature { --accent: var(--creature); }
.tile--math     { --accent: var(--math); }
.tile--note     { --accent: var(--note); color: var(--ink); }
.tile--sky      { --accent: var(--sky); }
.tile--note .glyph, .tile--note .play { color: #FFFFFF; }


/* ---- 9. STATS STRIP ----------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding: 1.75rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  text-align: center;
}

.stats dt {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stats dd { margin-top: 0.35rem; font-size: 0.9375rem; }


/* ---- 10. STEPS ---------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem;
  counter-reset: step;
}

.step {
  padding: 1.5rem;
  background: var(--card);
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--accent, var(--sun));
}

.step:nth-child(1) { --accent: var(--creature); }
.step:nth-child(2) { --accent: var(--math); }
.step:nth-child(3) { --accent: var(--sky); }

.step h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.step p { margin-top: 0.5rem; font-size: 1rem; }


/* ---- 11. QUOTE CARDS ---------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem;
}

.quote {
  padding: 1.5rem;
  background: var(--card);
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--accent, var(--sun));
}

.quote:nth-child(1) { --accent: var(--sun); }
.quote:nth-child(2) { --accent: var(--creature); }
.quote:nth-child(3) { --accent: var(--bubble); }

.quote p { font-size: 1.0625rem; }

.quote footer {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 2px solid var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}


/* ---- 12. "NEXT UP" BOX --------------------------------------- */

.soon {
  margin-top: 4rem;
  padding: 1.75rem;
  border: var(--edge) dashed var(--ink);
  border-radius: var(--radius);
  max-width: 46ch;
}

.soon h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}


/* ---- 13. CTA BAND -------------------------------------------- */

.cta {
  margin-top: 5rem;
  padding: 3rem 2rem;
  text-align: center;
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  background: var(--sun);
  box-shadow: var(--pop) var(--pop) 0 var(--ink);
}

.cta h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.cta p { margin: 1rem auto 0; max-width: 42ch; }

.cta .btn-row { justify-content: center; }


/* ---- 14. TEXT BLOCKS ----------------------------------------- */

.block { padding-top: 4rem; max-width: 46ch; }

.block h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.block h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.block p + p { margin-top: 1rem; }
.block a { color: var(--ink); text-decoration-thickness: 2px; }

/* a bullet list with little colored check marks */
.checks { margin-top: 1rem; }

.checks li {
  position: relative;
  padding-left: 2rem;
  margin-top: 0.625rem;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--creature);
}


/* ---- 15. APP DETAIL PAGE ------------------------------------- */

/* top of a single app page: glyph + name + buttons */
.app-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 3rem 0 2rem;
}

.app-head h1 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

@media (max-width: 40rem) {
  .app-head { grid-template-columns: 1fr; }
}

/* body of an app page: main column + little info card */
.app-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 3rem;
}

@media (max-width: 52rem) {
  .app-body { grid-template-columns: 1fr; gap: 2.5rem; }
}

.app-body .block { padding-top: 0; max-width: none; }
.app-body .block + .block { padding-top: 2.5rem; }

/* inside the narrower column, the numbered steps stack into rows
   with the number sitting to the left instead of on top */
.app-body .steps { grid-template-columns: 1fr; gap: 1rem; }

.app-body .step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.25rem;
  align-items: start;
}

.app-body .step::before { grid-row: span 2; margin-bottom: 0; }

/* the info card on the right */
.factcard {
  padding: 1.5rem;
  background: var(--card);
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  position: sticky;
  top: 5.5rem;
}

.factcard h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.factcard dl { font-size: 0.9375rem; }
.factcard dt { font-weight: 500; margin-top: 0.875rem; }
.factcard dt:first-child { margin-top: 0; }
.factcard dd { opacity: 0.85; }

@media (max-width: 52rem) { .factcard { position: static; } }

/* a row of screenshots */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}


/* ---- 16. APPS LISTING PAGE ----------------------------------- */

/* the row of category pills. These are labels for now — they do
   not filter anything yet. That can come later. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 2.5rem;
}

.filters a {
  padding: 0.35rem 1rem;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
}

.filters a.is-on { background: var(--ink); color: var(--paper); }
.filters a:hover { background: var(--sun); }

/* the little "New" flag in the corner of a tile */
.tile { position: relative; }

.flag {
  position: absolute;
  top: -0.85rem;
  right: -0.6rem;
  padding: 0.15rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--bubble);
  transform: rotate(4deg);
}


/* ---- 17. TEAM CARDS ------------------------------------------ */

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem;
}

.member {
  padding: 1.5rem;
  background: var(--card);
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop) var(--pop) 0 var(--accent, var(--sun));
}

.member:nth-child(1) { --accent: var(--creature); }
.member:nth-child(2) { --accent: var(--note); }

.member .slot { margin-bottom: 1.25rem; }

.member h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.member .role { font-weight: 500; opacity: 0.8; }
.member p { margin-top: 0.75rem; font-size: 1rem; }

/* the dated list on the about page */
.timeline { margin-top: 1.5rem; border-left: var(--edge) solid var(--ink); }

.timeline li {
  position: relative;
  padding: 0 0 1.75rem 1.75rem;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--edge) / 2 - 8px);
  top: 0.45em;
  width: 16px;
  height: 16px;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
}

.timeline .when {
  display: block;
  font-weight: 500;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
}


/* ---- 18. FOOTER ---------------------------------------------- */

.foot {
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: var(--edge) solid var(--ink);
  font-size: 0.9375rem;
}

.foot__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 40rem) {
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__cols > :first-child { grid-column: 1 / -1; }
}

.foot h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 0.625rem;
}

.foot ul li { margin-top: 0.375rem; }
.foot a { color: var(--ink); }

.foot__base {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  opacity: 0.85;
}


/* ---- 19. FOCUS OUTLINES + ANIMATION -------------------------- */

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .shelf li {
    animation: rise 420ms cubic-bezier(.2, .8, .3, 1) backwards;
  }
  .shelf li:nth-child(1) { animation-delay:  60ms; }
  .shelf li:nth-child(2) { animation-delay: 140ms; }
  .shelf li:nth-child(3) { animation-delay: 220ms; }
  .shelf li:nth-child(4) { animation-delay: 300ms; }
  .shelf li:nth-child(5) { animation-delay: 380ms; }
  .shelf li:nth-child(6) { animation-delay: 460ms; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}