/* layout.css — additive structure for the built-out site (2026-11-13).
   The recovered theme (styles/site.css) is unchanged; everything here is
   new structure written in the theme's own tokens: the left menu, the
   inner-page top bar, the news list, the catalogue tree, the merch grid.

   Layout contract (designer pass, 2026-11-13): the menu is a LEFT sidebar
   at every width — desktop, tablet, and phone (a slim rail). It never
   stacks on top. The banner always displays whole, never cropped. No
   element may force horizontal overflow at any width. */

/* ---- page frame: sidebar left, content right, at ALL widths ---- */
.layout {
  display: flex;
  align-items: flex-start;
  max-width: 84rem;
  margin: 0 auto;
}

.layout > main {
  flex: 1 1 auto;
  min-width: 0;
}

.layout .section {
  margin: 0;
}

/* ---- left menu ---- */
.sidebar {
  flex: 0 0 17rem;
  min-width: 0;
  position: sticky;
  top: 0;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overflow-wrap: anywhere;
  padding: 1.6rem 1.25rem 2rem var(--space);
  border-right: 1px solid var(--rule);
  font-size: 0.98rem;
}

.sidebar .side-home {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
  display: block;
  margin-bottom: 0.15rem;
}

.sidebar .side-tag {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 1.3rem;
  font-size: 0.92rem;
}

.sidebar nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar .side-pages {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.1rem;
}

.sidebar .side-pages a {
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 0.3rem 0;
}

.sidebar .side-pages a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.sidebar h2 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.sidebar .tree,
.sidebar .tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar .tree > li {
  margin-bottom: 1rem;
}

.sidebar .tree .universe {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  display: block;
  margin-bottom: 0.3rem;
}

.sidebar .tree .series-name {
  font-style: italic;
  color: var(--ink-soft);
  display: block;
  margin: 0.45rem 0 0.2rem;
}

.sidebar .tree ul {
  padding-left: 0.85rem;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.sidebar .tree ul a {
  text-decoration: none;
}

.sidebar .tree ul a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.sidebar a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ---- banner: always whole, never cropped ----
   The theme (unchanged) gives .banner a fixed aspect box with
   object-fit: cover, and at <=700px switches the box to 4/3 — which
   center-crops the 2:1 art and cuts the baked-in name and tagline at
   the right edge. These overrides ride in this layer instead: the box
   takes the image's natural ratio at every width, so the full art is
   always visible; any slack sits on the header's own dark ground. */
.banner {
  aspect-ratio: auto;
  height: auto;
}

.banner picture,
.banner img {
  height: auto;
  object-fit: contain;
}

/* ---- overflow armour for the theme's grids ----
   A grid track's minmax() floor is a hard minimum: inside a narrower
   column the track cannot shrink below it and pushes the page wider
   than the viewport. Capping each floor at 100% of the container
   (min(100%, …)) keeps the desktop geometry identical while making a
   sub-floor container yield one full-width track instead of overflow.
   Grid children also give up their automatic min-content floor so a
   wide child can never hold a column open. */
.book-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 16rem));
}

.buy-groups {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}

.book-detail > * {
  min-width: 0;
}

/* Long unbreakable link text (the contact email, social handles) may
   break anywhere rather than widen the page. */
.prose a,
.contact a {
  overflow-wrap: anywhere;
}

/* ---- inner-page top bar (pages without the banner) ---- */
.topbar {
  background: #1a1210;
  color: var(--nav-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  padding: 0.8rem var(--space);
}

.topbar .brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--nav-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
}

.topbar nav a {
  color: var(--nav-ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.3rem 0;
}

.topbar nav a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.page-head {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) var(--space) 0;
}

.page-head h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.9rem);
  margin: 0 0 0.4rem;
  line-height: 1.15;
}

.page-head .lead {
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

/* ---- news ---- */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.news-item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}

.news-item:first-child {
  padding-top: 0.2rem;
}

.news-item:last-child {
  border-bottom: 0;
}

.news-item h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.news-item time {
  display: block;
  color: var(--ink-soft);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.news-item p {
  margin: 0;
  max-width: var(--measure);
}

/* ---- catalogue (books page) ---- */
.universe-block {
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
  margin-top: 2.25rem;
}

.universe-block:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0.5rem;
}

.universe-block > h2 {
  margin-bottom: 0.35rem;
}

.series-block {
  margin-top: 1.75rem;
}

.series-block > h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.standing {
  display: inline-block;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.6rem;
  margin: 0 0 0.8rem;
}

.book-plain {
  padding: 1.4rem 0 0.4rem;
}

.book-plain h4 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.book-plain .series {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}

.book-plain p {
  max-width: var(--measure);
  margin: 0 0 0.8rem;
}

.title-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.title-list h4 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
}

.title-list p {
  margin: 0;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---- merch ---- */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 17rem));
  gap: 1.75rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.merch-card {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 1.1rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
}

.merch-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.merch-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.merch-card .standing {
  align-self: flex-start;
  margin: 0.4rem 0 0;
}

/* ---- tablet: the menu stays on the left, slimmer ----
   The row never becomes a column; only the sidebar's measure and
   padding tighten so the content column keeps a workable width. */
@media (max-width: 900px) {
  .sidebar {
    flex-basis: 13.25rem;
    padding: 1.5rem 1rem 2rem 1.25rem;
    font-size: 0.96rem;
  }
}

/* ---- phone: the menu stays on the left as a slim rail ----
   Same row, same sticky behaviour, same full contents (brand, page
   links, the whole books tree) — set in a compact measure so the
   content column keeps ~70% of the viewport. The rail scrolls its own
   overflow internally, as it does at every other width. */
@media (max-width: 600px) {
  .sidebar {
    flex-basis: 7rem;
    padding: 1.1rem 0.6rem 1.5rem 0.7rem;
    font-size: 0.82rem;
  }

  .sidebar .tree {
    font-size: 0.8rem;
  }

  .sidebar .side-home {
    font-size: 1.02rem;
    line-height: 1.25;
  }

  .sidebar .side-tag {
    font-size: 0.74rem;
    margin-bottom: 1rem;
  }

  .sidebar .side-pages {
    gap: 0.15rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
  }

  .sidebar .side-pages a {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    padding: 0.42rem 0;
  }

  .sidebar h2 {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }

  .sidebar .tree > li {
    margin-bottom: 0.85rem;
  }

  .sidebar .tree ul {
    padding-left: 0.5rem;
    gap: 0.3rem;
  }
}

/* ---- social icons (footer row + contact list) ---- */
.social-row {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.1rem;
}

.social-row a {
  display: inline-flex;
  color: var(--ink-soft);
  padding: 0.3rem;
}

.social-row a:hover {
  color: var(--ember);
}

.social-row svg {
  width: 1.65rem;
  height: 1.65rem;
  fill: currentColor;
  display: block;
}

.social-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.social-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}

.social-list svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.social-list .social-text {
  color: var(--ink-soft);
}

/* ---- buy pop-up (Books page) ---- */
.buy-open {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 0.8rem 2.4rem;
  cursor: pointer;
}

.buy-open:hover {
  background: var(--ember);
}

.buy-dialog {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 1.25rem 1.5rem 1.5rem;
  width: min(34rem, calc(100vw - 2rem));
  box-shadow: 0 1.5rem 3rem rgba(26, 18, 16, 0.35);
}

.buy-dialog::backdrop {
  background: rgba(26, 18, 16, 0.55);
}

.buy-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.buy-dialog-head h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
}

.buy-close {
  background: none;
  border: 0;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 0.2rem;
}

.buy-close:hover {
  color: var(--ember);
}

.buy-country {
  margin-top: 1.1rem;
}

.buy-country h5 {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: #fff;
}

.buy-btn svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.buy-kindle {
  background: #111;
  border-color: #111;
  color: #fff;
}

.kindle-word {
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: 1.05rem;
}

.buy-amazon {
  background: linear-gradient(#f7dfa5, #f0c14b);
  border-color: #a88734;
  color: #111;
}

.buy-amazon:hover,
.buy-kindle:hover {
  filter: brightness(1.07);
}

.buy-eleven {
  background: #fff;
  border-color: var(--ink);
  color: var(--ink);
}

.buy-store {
  background: #fff;
  border-color: var(--ink);
  color: var(--ink);
}

.buy-store:hover {
  background: var(--paper);
}

.buy-note {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---- children's books: cover grid ---- */
.title-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.75rem), 1fr));
  gap: 1.5rem 1.25rem;
}

.kid-cover {
  margin: 0 0 0.6rem;
}

.kid-cover img {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}

/* Merch product photos (Michael, 2026-11-13): each live card shows the
   item's first shop picture above its name. */
.merch-img { width: 100%; height: auto; display: block; margin-bottom: 0.85rem; }