/*
 * Comics reader: the index, the issue page, and the page layout. The panel
 * frame and the lettering are in panels.css, loaded before this file.
 * --f is the issue's faction colour, set inline per cover / issue.
 *
 * An issue is a stack of .cm-page sections. On a phone each page is a run of
 * panels in one continuous strip, with a thin marker where the page begins.
 * From 700px each page is a sheet: .cm-row lays its cells side by side, and
 * each .cm-cell takes a share of the row set by --r (its width over its
 * height), so cells in a row come out the same height. src/comics-layout.ts
 * explains the packing.
 */

.comics {
  background: var(--ink);
}

.cm-cx {
  --f: var(--paper);
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px var(--pad) 56px;
}

.cm-cx-crumb {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--dim);
}
.cm-cx-crumb a {
  color: var(--paper);
}

.cm-cx-head {
  margin-bottom: 24px;
  max-width: 760px;
}
.cm-cx-kicker {
  display: inline-block;
  margin: 0 0 12px;
  padding: 2px 10px;
  background: var(--f);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cm-cx-h1 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 9vw, 76px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--paper);
}
.cm-cx-lede {
  margin: 0;
  font-size: 19px;
  color: var(--text);
}
.cm-cx-back {
  margin: 28px 0 0;
  font-size: 16px;
  color: var(--dim);
}
.cm-cx-crumb a,
.cm-cx-back a {
  display: inline-block;
  padding: 12px 0;
}
.cm-cx-back a + a {
  margin-left: 12px;
}

/* the index opens like the other section pages; an issue keeps its compact header so the first panel stays above the fold */
.cm-cx-index {
  padding-top: 56px;
}
.cm-cx-index .cm-cx-h1 {
  font-size: clamp(44px, 9.5vw, 92px);
  line-height: 0.88;
  text-shadow:
    3px 0 0 var(--registry),
    -3px 0 0 var(--lattice);
  text-wrap: balance;
}


/* ── index: covers ─────────────────────────────────────────────────── */

.cm-covers {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}
.cm-cover {
  --f: var(--paper);
  background: var(--night);
  border: 3px solid var(--paper);
  box-shadow: 6px 6px 0 var(--f);
}
.cm-cover a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.cm-cover a:focus-visible {
  outline: 3px solid var(--lattice);
  outline-offset: 4px;
}
.cm-cover-art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--night-2);
}
.cm-cover-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a draft issue whose cover art is not drawn yet */
.cm-cover-blank {
  background:
    repeating-linear-gradient(135deg, rgba(217, 210, 189, 0.08) 0 2px, transparent 2px 12px), var(--night-2);
}
.cm-cover-draft {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 10px;
  border: 2px dashed var(--paper);
  color: var(--paper);
  font-size: 14px;
}
/* the title sits at the foot of the art: a 16:9 panel cropped to 4:5 keeps its full height, and the heads are in the upper half */
.cm-cover-title {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 14px 16px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 11vw, 56px);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--sodium);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-2deg);
  transform-origin: left bottom;
}
.cm-cover-plate {
  display: block;
  padding: 14px 16px 18px;
  border-top: 6px solid var(--f);
}
.cm-cover-no {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f);
}
.cm-cover-hero {
  display: block;
  margin: 4px 0 6px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper);
}
.cm-cover-log {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
}

/* ── issue: header notes ───────────────────────────────────────────── */

.cm-cx-meta {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--dim);
}
.cm-draft {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 2px dashed var(--paper);
  color: var(--paper);
  font-size: 16px;
}

/* ── issue: pages ──────────────────────────────────────────────────── */

.cm-cx-issue {
  --gutter: 10px;
}
.cm-pages {
  display: grid;
  gap: 28px;
  margin: 0 -4px;
}
.cm-page {
  display: grid;
  gap: var(--gutter);
}
/* the page-break marker: a thin rule and the page number */
.cm-page::before {
  content: "Page " attr(data-page) " of " attr(data-pages);
  /* the section is already labelled "Page n of m", so the marker is not read out a second time (browsers without alt text keep the line above) */
  content: "Page " attr(data-page) " of " attr(data-pages) / "";
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.cm-page[data-pages="1"]::before {
  display: none;
}
.cm-row,
.cm-cell {
  display: grid;
  gap: var(--gutter);
}

/* ── issue: phones keep the lettering on the art but move captions below it ──
   The lettering on the art is 14px, the smallest the reader goes. */

@media (max-width: 699px) {
  .cm-panel {
    aspect-ratio: auto;
  }
  .cm-panel > img {
    position: static;
    height: auto;
    aspect-ratio: var(--ar);
  }
  .cm-panel .pn-ph {
    position: relative;
    inset: auto;
    aspect-ratio: var(--ar);
  }
  .cm-panel .lt-let {
    font-size: 14px;
    gap: 6px;
    padding: 8px;
  }
  .cm-panel .lt-let-bot {
    position: static;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--paper);
    border-top: 3px solid var(--ink);
  }
  .cm-panel .lt-let-bot .lt-cap {
    max-width: none;
    padding: 8px 12px;
    border: 0;
    border-top: 2px solid var(--line);
    box-shadow: none;
    font-size: 14px;
  }
  .cm-panel .lt-let-bot .lt-cap:first-child {
    border-top: 0;
  }
  .cm-panel .lt-let-top .lt-cap {
    max-width: 78%;
    padding: 0.3em 0.5em;
    box-shadow: 0.15em 0.15em 0 var(--ink);
  }
  .cm-panel .lt-bln {
    max-width: 66%;
    font-size: 1em;
  }
  .cm-panel.pn-r43 .lt-bln {
    max-width: 58%;
  }
  .cm-panel.pn-r34 .lt-bln,
  .cm-panel.pn-r916 .lt-bln,
  .cm-panel.pn-r45 .lt-bln {
    max-width: 72%;
  }
  .cm-panel .lt-sfx {
    top: calc(var(--ih) - 24cqw);
    bottom: auto;
    font-size: clamp(30px, 11cqw, 60px);
  }
}

/* ── issue: a panel's lead caption goes above the art below 1100px ──
   A caption at the top of the art covers a face once the panel is narrower
   than a desktop page. Below 1100px it is a paper strip above the art instead.
   The panel becomes a grid: the strip, then the art, then (on a phone) the
   bottom captions. The art and everything still lettered on it share the
   middle row, which is the containing block for the absolutely placed
   lettering, so the sound effect and bottom captions land on the art, not on
   the strip. */
@media (max-width: 1099px) {
  .cm-panel.pn-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: auto;
  }
  .cm-panel.pn-lead > img,
  .cm-panel.pn-lead > .pn-ph {
    grid-row: 2;
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: var(--ar);
  }
  .cm-panel.pn-lead > .lt-let-lead {
    grid-row: 1;
    position: static;
    padding: 0;
    background: var(--paper);
    border-bottom: 3px solid var(--ink);
  }
  .cm-panel.pn-lead > .lt-let-lead .lt-cap {
    max-width: none;
    padding: 8px 12px;
    border: 0;
    box-shadow: none;
  }
  .cm-panel.pn-lead > .lt-let-bot,
  .cm-panel.pn-lead > .lt-sfx {
    grid-row: 2;
  }
}
@media (max-width: 699px) {
  .cm-panel.pn-lead > .lt-let-bot {
    grid-row: 3;
  }
}

/* issue navigation */
.cm-iss-nav {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  grid-template-columns: minmax(0, 1fr);
}
.cm-iss {
  --f: var(--paper);
  display: block;
  min-height: 44px;
  padding: 12px 16px;
  background: var(--night);
  border: 3px solid var(--paper);
  border-left: 8px solid var(--f);
  color: var(--paper);
  text-decoration: none;
}
.cm-iss-next {
  text-align: right;
  border-left-width: 3px;
  border-right: 8px solid var(--f);
}
.cm-iss-l {
  display: block;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.cm-iss-t {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: 24px;
  text-transform: uppercase;
}
.cm-iss:hover,
.cm-iss:focus-visible {
  background: var(--night-2);
}
.cm-iss:focus-visible {
  outline: 3px solid var(--lattice);
  outline-offset: 3px;
}

@media (min-width: 700px) {
  .cm-covers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .cm-iss-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cm-iss-nav .cm-iss-next:only-child {
    grid-column: 2;
  }
  .cm-cx-issue {
    --gutter: 14px;
  }
  .cm-pages {
    gap: 44px;
    margin: 0;
  }
  /* a page is a sheet: ink gutters, a paper edge, the faction colour as the hard offset */
  .cm-page {
    padding: calc(var(--gutter) * 1.5);
    background: #000;
    border: 3px solid var(--paper);
    box-shadow: 8px 8px 0 var(--f);
  }
  .cm-page::before {
    justify-self: end;
    padding: 0 0 2px;
    border-top: 0;
  }
  .cm-row {
    display: flex;
    align-items: stretch;
  }
  .cm-cell {
    display: flex;
    flex-direction: column;
    flex: var(--r, 1) 1 0%;
    min-width: 0;
  }
  /* panels fill their cell's height, so a tall panel and its stacked neighbours end on the same line */
  .cm-cell > .cm-panel {
    flex: 1 1 auto;
  }
  /* a panel on a row of its own is not stretched across the page */
  .cm-row-lone {
    justify-content: center;
  }
  .cm-row-lone > .cm-cell {
    flex: 0 1 var(--w);
  }
  /* a lone 4:3 panel (a closer) takes the row at the 16:9 of its art, so it is not cropped between black bars (src/comics-layout.ts) */
  .cm-row-lone .pn-r43 {
    --ar: 16 / 9;
    --arn: 1.7778;
    --ih: 56.25cqw;
  }
  /* a splash is shown whole and as large as one screen allows */
  .cm-row-splash {
    justify-content: center;
  }
  .cm-row-splash > .cm-cell {
    flex: 0 1 min(100%, calc((100svh - 9rem) * var(--r)));
  }
  .cm-panel {
    border-width: 2px;
  }
  /* lettering is one size for the whole page: sized from each panel's own width it would change from panel to panel, smallest on a splash.
     It reaches 21px, the size a full-width panel was lettered at before pages, from about 910px wide. */
  .cm-panel .lt-let {
    font-size: clamp(16px, calc(2.2vw + 1px), 21px);
  }
}

/* a phone on its side: a page is no wider than the screen is tall allows, so every panel fits on screen whole */
@media (min-width: 700px) and (max-height: 500px) {
  .cm-page {
    width: min(100%, calc((100svh - var(--head-h) - 40px) * 16 / 9));
    margin-inline: auto;
  }
}

/* with the wide page margin, the sheet's padding and edge sit in it, so the panels are as wide as the text above them */
@media (min-width: 960px) {
  .cm-pages {
    margin: 0 calc(-1.5 * var(--gutter) - 3px);
  }
}

@media (min-width: 1100px) {
  .cm-covers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
  .cm-cover-title {
    font-size: 42px;
  }
}

/* the same hover as every other clickable card on the site: a hard step up and a longer offset, in the faction's colour */
.cm-cover {
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
.cm-cover:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--f);
}