/* Catodoro - shared chrome for the scrolling pages.

   The guide (index.html) locks the body to a single non-scrolling viewport
   for its camera, so the pages that are ordinary documents - About, Features,
   FAQ - can't share styles.css. They share this instead. It carries the
   tokens, the navbar, the button and the document scale, and nothing else;
   each page adds its own content styles on top.

   The navbar block here is the one in styles.css, value for value. Keeping a
   second hand-maintained copy is what made the two bars drift apart before. */

:root {
  --ink: #1e0808;
  --card: #fffefc;
  --red: #d90429;
  --cream: #fff8e7;
  --display: 'Fuzzy Bubbles', cursive;
  --body: 'Quicksand', sans-serif;

  /* The design's canvas. Everything below is placed against this width and
     scales down from it rather than being re-laid-out. */
  --page: 1440px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  /* The book's own paper, tiled. The design lays it out as four blocks per
     screen; at this size the repeat is invisible and the seams are not. */
  background: #f7f3ef url('assets/paper-texture.jpg') 0 0 / 720px auto repeat;
  line-height: 1.6;
}

a { color: inherit; }
p { margin: 0; }

/* ---------- Navbar ----------

   Only the positioning differs from the guide's: that one is a fixed
   viewport so its navbar is `fixed`, while these pages scroll, so it
   sticks instead. */

.navbar {
  position: sticky;
  top: 28px;
  z-index: 5;
  width: max-content;
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 60px;
  padding: 0 13px;
  background: var(--card);
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(30, 8, 8, 0.13);
  max-width: calc(100vw - 2rem);
}

.nav-item {
  padding: 6px 13px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--ink);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.16s ease;
}

.nav-item:hover { background: rgba(30, 8, 8, 0.06); }

/* The page you are already on carries no styling of its own - it is still
   marked up with aria-current for anyone navigating by structure. */

.nav-cta {
  /* Matches a nav item's own padding, so the air before the button is
     the same as the air between the links rather than 20px more. */
  margin-left: 13px;
  padding: 8px 17px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--cream);
  background: var(--red);
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  box-shadow: 0 3px 10px rgba(217, 4, 41, 0.32);
}

.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(217, 4, 41, 0.4); }


/* ---------- Narrow screens ----------

   Five items at full size need 397px and a phone gives the bar 358px at most,
   so something has to yield. Wrapping the button onto its own row was worse:
   it left the links and the button on different lines with nothing lining up.
   Shrinking the type keeps all five on one row, where `align-items: center`
   holds them to a single axis. Measured, not guessed - at 12px the bar comes
   to 319px, which clears every common width from 360 up, and the tighter side
   margin below covers 320 as well. */
@media (max-width: 480px) {
  .navbar {
    height: 50px;
    padding: 0 8px;
    gap: 2px;
    /* 1rem of margin rather than 2: on a 320px screen those 16px are the
       difference between one row and two. */
    max-width: calc(100vw - 1rem);
  }

  .nav-item {
    padding: 6px;
    font-size: 12px;
  }

  .nav-cta {
    margin-left: 6px;
    padding: 8px 11px;
    font-size: 12px;
  }
}

/* The very smallest phones still in use. 12px needs 319px and a 320 screen
   leaves the bar 297, so one more step down - measured the same way, this
   comes to 286. */
@media (max-width: 344px) {
  .navbar { padding: 0 6px; }

  .nav-item {
    padding: 6px 4px;
    font-size: 11.5px;
  }

  .nav-cta {
    padding: 8px 9px;
    font-size: 11.5px;
  }
}

/* ---------- Shared page furniture ---------- */

.cta-btn {
  display: inline-flex;
  align-items: center;
  height: 57px;
  padding: 0 34px;
  background: var(--red);
  border-radius: 999px;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(173, 1, 1, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(173, 1, 1, 0.34); }

/* ---------- Document pages ----------

   Features and FAQ are reference reading, so they are set in one measure
   with a plain scale: one page title, one section heading, body at 17px.
   No cards, no rules between rows. Prose sits at 500 and emphasis at 700;
   what separates a heading from its explanation is colour, not weight. */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.doc-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -1px;
}

.doc-lede {
  max-width: 34em;
  margin: 18px 0 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
}

.doc-section { margin-top: 56px; }

.doc-section h2 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.4px;
  color: var(--text-em);
}

.doc-section > p {
  margin: 0 0 20px;
  font-weight: 500;
  color: var(--text);
}

.doc-cta {
  margin: 72px 0 0;
  text-align: center;
}

/* The reference page runs long, so its contents sit beside it and stay put.
   A grid rather than a float: the column reserves its own width, so the
   measure beside it is still a measure and not what is left over.

   The title sits in the content column, on the same left edge as the
   sections under it - spanning both columns hung it off the side against
   nothing. Rows are placed explicitly so the contents column still starts
   level with the first section rather than beside the title. Source order is
   title, contents, sections, which is also the reading order once the grid
   collapses, so there is nothing to re-order. */
.doc-toc {
  max-width: 1064px;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 0 56px;
  align-items: start;
}

.doc-head { grid-column: 2; grid-row: 1; }
.doc-toc > .toc { grid-column: 1; grid-row: 2; }
.doc-main { grid-column: 2; grid-row: 2; }

/* Below this the sidebar has nowhere to sit without eating the measure, so
   it goes back to being a block at the top of the page. */
@media (max-width: 1020px) {
  .doc-toc {
    display: block;
    max-width: 720px;
  }
}

/* The footer ends these pages rather than floating over them, so it needs
   air above it and a hairline to sit against - the panel on the guide gets
   that separation from its own shadow instead. */
.site-footer {
  margin-top: 96px;
  border-top: 1px solid rgba(30, 8, 8, 0.08);
}