/*
  components.css — the scaling substrate. Every reusable piece of chrome and
  every "paper object sitting in the dark attic" lives here. Future pages
  (second coloring book, story books, picture-book line, character pages)
  reuse these classes; they should never need a new component just to add
  another page of the same kind.

  site-head / site-foot are the permanent chrome: product-free by rule, and
  byte-identical across every page (see site-tools/CONVENTIONS.md).
*/

/* ---------- site-head / site-foot (chrome) ---------- */

.site-head {
  border-bottom: 1px solid var(--thread);
}

.site-head .wrap {
  padding-block: var(--sp-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* One nav link, in the typed face so it reads as a label rather than a menu.
   Kept PRODUCT-FREE: "the books" is a section of the site, not a product name, so it
   survives Vol 2, the story books and the picture-book line without ever being edited. */
/* The links need spacing. This lived in home.css while the header had one link and the
   gap could not show; with three they ran together as "the atticthe booksfree pages".
   It belongs here, with the component, so every page gets it. */
.site-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.site-nav a, .social a { display: inline-block; padding: 5px 0; }

.site-nav a {
  font-family: var(--font-typed);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--candle);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-bottom-color: var(--candle);
}

.mark {
  display: inline-block;
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-weight: 600;
  font-size: 22px;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.mark:hover {
  color: var(--candle);
}

.site-foot {
  border-top: 1px solid var(--thread);
  margin-top: var(--sp-5);
}

.site-foot .wrap {
  padding-block: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-family: var(--font-typed);
  font-size: var(--text-typed);
}

.social a {
  color: var(--paper);
}

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

.byline {
  margin: 0;
  font-family: var(--font-typed);
  font-size: var(--text-typed);
  color: var(--sage);
}

.byline a {
  color: var(--sage);
}

.byline a:hover {
  color: var(--candle);
}

/* ---------- eyebrow ---------- */

.eyebrow {
  font-family: var(--font-typed);
  font-size: var(--text-typed);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sage);
  margin: 0 0 var(--sp-2);
}

/* ---------- stitch — the site's only divider/border style ---------- */

.stitch {
  border: none;
  height: 0;
  margin: var(--sp-5) 0;
  border-top: 2px dashed var(--thread);
}

@media (max-width: 520px) {
  .stitch {
    margin: var(--sp-4) 0;
  }
}

/* ---------- figure-paper — the only way an image appears ---------- */

.figure-paper {
  background: var(--paper);
  padding: var(--sp-1);
  box-shadow: var(--paper-shadow);
  border-radius: 2px;
}

.figure-paper img {
  width: 100%;
  border: 1px solid var(--thread);
}

.figure-paper figcaption {
  font-family: var(--font-typed);
  font-size: var(--text-typed);
  color: var(--attic);
  text-align: center;
  padding-block: var(--sp-1);
  letter-spacing: 0.03em;
}

.figure-paper--full {
  transform: rotate(-0.6deg);
}

/* ---------- split — before/after pair ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-block: var(--sp-3);
}

.split .figure-paper:first-child {
  transform: rotate(-1deg);
}

.split .figure-paper:last-child {
  transform: rotate(0.8deg);
}

@media (max-width: 560px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* ---------- wall — many interior pages at reduced scale ----------

   Antecedent: a contact sheet, or prints pinned to a board. NOT a product grid
   — that distinction is the whole point of the component and the reason it
   reuses .figure-paper rather than inventing a card.

   Why it exists: the homepage used to show ONE before/after pair, which is two
   images to argue that a 44-page book is worth buying. Competitive research
   (2026-08-25, site-tools/design-exploration/RESEARCH.md) found both category
   leaders show MANY pages — ColorIt coloured, Coco Wyo blank in a numbered
   gallery — and neither uses a single pair. The single pair was original to us
   and unproven; a mockup tested multiplicity against it and multiplicity won.
   The before/after pair did not die, it moved to the book product page, where
   a reader comparing is actually deciding.

   The named failure mode is reading as a bare Shopify grid. Three things
   prevent that and none is decorative: every tile keeps its paper mount with
   attic ground visible around it, the tilt cycle means no two neighbours share
   an angle, and the typed caption is a REAL book page number out of a numbered
   set of 44. Remove any of the three and it becomes a store.

   Tile count is deliberately 9, not 12 — at twelve the tiles land near 150px
   and the art reads intricate directly above a spec line promising "bold lines
   and open spaces". See make_derivatives.py section 4b. */

.wall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-block: var(--sp-3);
}

/* .figure-paper carries its own paper/shadow/border; the grid only positions.
   min-width: 0 defeats the grid default of min-width: auto, which otherwise
   lets a wide child force a column past its track and overflow the row. */
.wall-grid > * {
  min-width: 0;
  margin: 0;
}

/* Tilt cycles over five positions, not three, so the repeat never lines up
   with the three-column rhythm and produce a visible pattern down a column. */
.wall-grid .figure-paper:nth-child(5n + 1) { transform: rotate(-0.9deg); }
.wall-grid .figure-paper:nth-child(5n + 2) { transform: rotate(0.6deg); }
.wall-grid .figure-paper:nth-child(5n + 3) { transform: rotate(-0.4deg); }
.wall-grid .figure-paper:nth-child(5n + 4) { transform: rotate(0.9deg); }
.wall-grid .figure-paper:nth-child(5n + 5) { transform: rotate(-0.6deg); }

@media (max-width: 560px) {
  .wall-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }
}

/* ---------- jcard / track — THE SIGNATURE ---------- */

.jcard-section {
  display: flex;
  justify-content: center;
}

.jcard {
  background: var(--paper);
  color: var(--attic);
  width: 100%;
  max-width: 560px;
  padding: var(--sp-3);
  box-shadow: var(--paper-shadow);
  border-radius: 2px;
  transform: rotate(0.5deg);
  font-family: var(--font-typed);
}

@media (max-width: 520px) {
  .jcard {
    padding: var(--sp-2);
  }
}

.jcard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px dashed var(--thread);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.jcard-title {
  font-size: var(--text-typed);
  letter-spacing: 0.16em;
  font-weight: 700;
}

.jcard-length {
  font-size: var(--text-typed);
  color: var(--thread);
}

.jcard-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

@media (max-width: 560px) {
  .jcard-sides {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
}

.side-label {
  font-size: var(--text-typed);
  letter-spacing: 0.12em;
  color: var(--thread);
  margin: 0 0 var(--sp-1);
}

.tracklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/*
  .track-row carries all row layout and hover/focus treatment. It is applied
  today to a plain <div> inside each <li>. To make a track link to its
  character page later, wrap the row content in <a class="track-row"> in
  place of the <div> — no rule here changes, since layout is keyed to the
  class, not the tag.
*/
.track-row {
  display: grid;
  grid-template-columns: 1.6em auto;
  column-gap: var(--sp-1);
  row-gap: 0.15em;
  color: inherit;
  text-decoration: none;
  padding: 3px 4px;
  margin: -3px -4px;
  border-radius: 2px;
}

a.track-row:hover,
a.track-row:focus-visible {
  background: rgba(107, 84, 67, 0.12);
}

a.track-row:focus-visible {
  outline: 2px solid var(--thread);
  outline-offset: 1px;
}

.track-num {
  font-weight: 700;
  color: var(--thread);
}

.track-name {
  font-weight: 700;
}

.track-desc {
  grid-column: 2;
  color: var(--attic);
  font-size: var(--text-typed);
  opacity: 0.85;
}

.jcard-close {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-2);
  border-top: 2px dashed var(--thread);
  font-size: var(--text-typed);
  font-style: italic;
  color: var(--thread);
  text-align: center;
}

/* ---------- spec-list — typed product specs ---------- */

.spec-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-family: var(--font-typed);
  font-size: var(--text-typed);
  color: var(--paper);
  margin-block: var(--sp-3);
}

.spec-list li {
  padding-left: 1.4em;
  position: relative;
}

.spec-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--sage);
}

/* ---------- btn + dormancy contract ---------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: var(--sp-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border: 1px solid var(--thread);
  border-radius: 2px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
}

.btn-primary {
  background: var(--candle);
  color: var(--attic);
  border-color: var(--candle);
}

.btn-secondary {
  background: transparent;
  color: var(--paper);
}

/*
  Dormancy state machine — launch day is adding the href and flipping the
  attribute, nothing else.
  data-live="false": NO href attribute at all (not href="#"). A hrefless
    <a> is not a hyperlink per the HTML spec — not focusable, not
    activatable, no navigation, no JS needed to make it inert.
  data-live="true":  href starts https://, full brand colour.

  The muted look below is done with flat, AA-checked colour swaps rather
  than opacity, because opacity blends BOTH the text and the background
  toward the page ground together and silently drags a compliant pair
  below 4.5:1 — that is exactly how the previous rose-on-thread sub-label
  failed AA at 2.02:1. See site-tools/CONVENTIONS.md's contrast table.
*/
.btn[data-live='false'] {
  cursor: default;
}

.btn[data-live='false'].btn-primary {
  background: var(--thread);
  border-color: var(--thread);
  color: var(--paper); /* paper/thread = 5.49:1, AA pass */
}

.btn[data-live='false'].btn-secondary {
  border-style: dashed; /* echoes the stitch motif: not sewn in yet */
  color: var(--paper); /* paper/attic = 13.66:1, AA pass */
}

.btn[data-live='true'].btn-primary:hover {
  background: var(--paper);
  color: var(--attic);
}

.btn[data-live='true'].btn-secondary:hover {
  color: var(--candle);
  border-color: var(--candle);
}

/* The shared date line for whatever dormant CTAs are on the page — one
   line, not a sub-label repeated inside every button (see CONVENTIONS.md,
   F5). rose/attic = 5.03:1, AA pass. */
.cta-date {
  font-family: var(--font-typed);
  font-size: var(--text-typed);
  color: var(--rose);
  margin-top: calc(-1 * var(--sp-2));
  margin-bottom: var(--sp-3);
}

/* ---------- note — quiet typed aside ---------- */

.note {
  font-family: var(--font-typed);
  font-size: var(--text-typed);
  color: var(--sage);
  border-left: 2px dashed var(--thread);
  padding-left: var(--sp-2);
  margin-block: var(--sp-3);
}

/* ---------- print ---------- */

/*
  The night-attic ground is a screen-only idea. On paper it is wasted ink
  and unreadable once a printer or photocopier drops to greyscale, so print
  gets its own flat, high-contrast treatment: white ground, black text, no
  paper-object shadows or tilts (those read as mis-registered ink on a real
  page, not as a design choice).
*/
@media print {
  * {
    box-shadow: none !important;
    transform: none !important;
    text-shadow: none !important;
    color: #000000 !important;
    background: transparent !important;
    border-color: #000000 !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  a {
    text-decoration: underline;
  }

  .skip-link {
    display: none !important;
  }

  .figure-paper,
  .jcard,
  .btn {
    border: 1px solid #000000;
  }

  /* Social links carry no visible URL on screen — print the destination
     so the page is useful once it can't be clicked. */
  .social a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 10px;
  }
}

/* Visually hidden but read aloud. Lives here, not in home.css, because the
   footer's "opens in a new tab" hints appear on EVERY page and only the
   homepage loads home.css. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }