/* Stands of covers and the card they open into: the home page's journals and
 * new books, and the journals page. The motion is static/js/stand.js; the
 * card's markup is pages/_stand_pop.html. Also the link-button these pages share.
 */

/* A plain link-button (the class name is from its pill days): a rectangle in
   the brand blue, the label and a small arrow that steps forward when pointed
   at; the fill only darkens. The same shape as the journal page's buttons. */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 1.375rem;
  border-radius: 6px;
  background: var(--brand-tile);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.pill-link__go { display: grid; place-items: center; }
.pill-link__go svg { width: 1.05rem; height: 1.05rem; transition: translate 0.3s var(--ease-out); }
.pill-link:hover, .pill-link:focus-visible { background: var(--brand-tile-hover); color: #fff; }
.pill-link:hover .pill-link__go svg, .pill-link:focus-visible .pill-link__go svg { translate: 0.15rem 0; }
.pill-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* on a dark ground: white, the text in the brand's deep colour */
.pill-link--on-dark { background: #fff; color: var(--brand-deep); }
.pill-link--on-dark:hover, .pill-link--on-dark:focus-visible { background: var(--brand-mist); color: var(--brand-deep); }
.pill-link--on-dark:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .pill-link, .pill-link__go svg { transition: none; }
}

/* a mesh (static/js/mesh.js) lies behind the content of its section */
.mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--mesh-line);
}
/* the meshes behind a stand: sized outright (a canvas does not stretch
   between edges); the grey one on a light ground fades towards the left */
.stand__mesh {
  /* a canvas does not stretch between edges: size it outright */
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.stand__mesh--light {
  --mesh-signal: #5d7889;
  color: #8693a0;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgb(0 0 0 / 0.16) 38%, #000 74%);
  mask-image: linear-gradient(90deg, transparent 4%, rgb(0 0 0 / 0.16) 38%, #000 74%);
}

/* two rows of seven; on short windows the covers shrink so both rows fit */
.jstand {
  --cols: 3;
  --gap-x: var(--space-md);
  --gap-y: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap-y) var(--gap-x);
}
@media (min-width: 40rem) { .jstand { --cols: 5; } }
@media (min-width: 62rem) {
  .jstand {
    --cols: 7;
    --gap-x: clamp(1rem, 1.6vw, 1.5rem);
    --gap-y: calc(var(--space-xl) + var(--space-xs));
    /* cover height = width × 410/300; two rows must fit under the head */
    max-width: calc((100svh - var(--header-h, 4.5rem) - 16rem) / 2 * 300 / 410 * 7 + 6 * var(--gap-x));
    width: 100%;
    margin-inline: auto;
  }
  /* the books: two rows of six, taller covers */
  .jstand--books {
    --cols: 6;
    --gap-x: clamp(1.25rem, 2vw, 2rem);
    max-width: calc((100svh - var(--header-h, 4.5rem) - 16rem) / 2 * 300 / 440 * 6 + 5 * var(--gap-x));
  }
}
.jstand--books .jstand__cover img, .jstand--books .jstand__blank { aspect-ratio: 300 / 440; }
.jstand > li { position: relative; }
.jstand__link { position: relative; display: block; color: inherit; border-radius: var(--radius-cover); }
.jstand__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.jstand__cover { display: block; line-height: 0; transition: translate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.jstand__cover img, .jstand__blank { display: block; width: 100%; height: auto; aspect-ratio: 300 / 410; object-fit: cover; }
.jstand__blank { display: grid; place-items: center; padding: var(--space-sm); border-radius: var(--radius-cover); background: var(--jc); color: #fff; font-family: var(--font-display); font-size: var(--text-sm); text-align: center; }
.jstand__link:hover .jstand__cover, .jstand__link:focus-visible .jstand__cover { translate: 0 -6px; }
html:not(.js-sheen) :is(.jstand__link:hover, .jstand__link:focus-visible) .jstand__cover::after { background-position: 0 50%; transition: background-position 1.1s var(--ease-out); }

/* the name is for screen readers only: the covers carry it, and a click opens the card */
.jstand__name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── The lifted cover and its sheet ─────────────────────────────────────
   A click lifts the cover off the stand to the middle of the window, and a
   sheet steeped in the journal's colour unrolls from behind it; the rest of
   the page dims. The script sizes and places everything (one size for every
   journal) and runs the motion; the sheet keeps its round corners throughout,
   since it unrolls by width, not by a mask. */
/* the page behind stays put; the scrollbar keeps its place (scrollbar-gutter in site.css), so nothing shifts as the card opens and closes */
html:has(.jpop[open]) { overflow: hidden; }
.jpop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
}
.jpop::backdrop { background: rgb(8 28 34 / 0.45); }
.jpop__group { position: absolute; }

.jpop__cover {
  position: absolute;
  z-index: 2;
  top: 0;
  line-height: 0;
  transform-origin: 0 0;
  will-change: transform;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.18), 0 34px 70px -20px rgb(0 0 0 / 0.6);
}
.jpop__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* the sheet is a window that grows; what is inside keeps its full size, so
   the text never reflows while it unrolls */
.jpop__sheet {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 16px;
  /* the same soft tone of the journal's (the book's) colour as the side cards
     (page.css .pcard): dark text, the button in the colour itself */
  background: color-mix(in srgb, var(--jc) 18%, var(--color-canvas-default));
  background: oklch(from var(--jc) 0.925 min(calc(c * 0.4), 0.06) h);
  box-shadow: 0 30px 70px -28px rgb(0 0 0 / 0.5);
}
[data-theme="dark"] .jpop__sheet { background: oklch(from var(--jc) 0.3 min(calc(c * 0.4), 0.05) h); }
.jpop__inner {
  --ink: var(--color-ink);
  --ink-2: color-mix(in srgb, var(--color-ink) 64%, transparent);
  --rule: color-mix(in srgb, var(--jc) 30%, transparent);
  position: relative;
  box-sizing: border-box;
  overflow: auto;
  padding: 1.75rem 2.25rem 1.75rem calc(2.25rem + 20px);
  color: var(--ink);
  scrollbar-width: thin;
}
.jpop[data-side="below"] .jpop__inner { padding: calc(1.5rem + 24px) 1.5rem 1.75rem; }

.jpop__body { display: flex; flex-direction: column; gap: 0.85rem; min-height: 100%; }
.jpop__title { margin: 0; padding-right: 2.75rem; font-family: var(--font-display); font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); font-weight: 650; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.jpop__summary { margin: 0; font-size: 0.96875rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* the indexing marks: quiet tags of one colour, a hairline round each, as on the journal's page */
.jpop__marks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.jpop__marks li { padding: 0.3rem 0.65rem; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 16%, transparent); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--ink); }

.jpop__facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 2rem; margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.jpop__facts div { display: grid; gap: 2px; }
.jpop__facts dt { font-size: 0.8125rem; color: var(--ink-2); }
.jpop__facts dd { margin: 0; font-weight: 600; }
.jpop__facts dd small { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); }

.jpop__actions { display: flex; margin-top: auto; padding-top: 0.25rem; transform-origin: 0 50%; }
/* the main button (the cards here and the side cards): a rectangle in the
   journal's colour, the label and a small arrow that steps forward */
.jpop__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 1.25rem;
  border-radius: 6px;
  background: var(--jc);
  color: var(--jc-ink, #fff);
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.jpop__arrow { display: grid; place-items: center; }
.jpop__arrow svg { width: 1.05rem; height: 1.05rem; transition: translate 0.3s var(--ease-out); }
.jpop__go:hover { background: color-mix(in srgb, var(--jc) 84%, #000); color: var(--jc-ink, #fff); }
.jpop__go:hover .jpop__arrow svg { translate: 0.15rem 0; }
.jpop__go:focus-visible, .jpop__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.jpop__close {
  position: absolute;
  z-index: 1;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-ink) 7%, transparent);
  color: var(--color-ink);
  cursor: pointer;
}
.jpop__close svg { width: 1.15rem; height: 1.15rem; transition: rotate 0.35s var(--ease-out); }
.jpop__close:hover { background: color-mix(in srgb, var(--color-ink) 12%, transparent); }
.jpop__close:hover svg { rotate: 90deg; }
@media (prefers-reduced-motion: reduce) {
  .jpop__close svg, .jpop__arrow svg { transition: none; }
}


/* the book's sheet: authors under the title, three facts, and the price set
   large beside the button */
.jpop__authors { margin: -0.35rem 0 0; font-weight: 600; color: var(--ink); opacity: 0.88; }
.jpop[data-kind="book"] .jpop__title { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem); }
.jpop[data-kind="book"] .jpop__title--long { font-size: 1.2rem; line-height: 1.25; }
.jpop__facts--book { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 2.25rem; }
.jpop__actions--buy { align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.jpop__price { margin: 0; font-family: var(--font-display); font-size: 1.75rem; font-weight: 650; letter-spacing: -0.01em; }
.jpop__price-ask { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--ink-2); }


/* ── the way back: one capsule on every page ──
   Home is a house; the steps are separated by thin chevrons; the page you are
   on is a raised chip. Light on light heads,
   glass on the dark petrol band (.crumbs--dark, or a .phead without a wash).
   Between pages it stays put and morphs; coming from a page without it
   (home, a first visit) it comes out from under the header (.crumbs-arrive). */
.crumbs {
  --cr-bg: rgb(255 255 255 / 0.55);
  --cr-line: rgb(16 24 32 / 0.08);
  --cr-ink: var(--color-ink-2);
  --cr-ink-strong: var(--color-ink);
  --cr-hover: rgb(255 255 255 / 0.85);
  --cr-chip: #fff;
  --cr-chip-shadow: 0 1px 2px rgb(16 24 32 / 0.08), 0 4px 12px -6px rgb(16 24 32 / 0.18);
  --cr-dot: var(--jc, var(--brand));
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  padding: 4px;
  border-radius: 999px;
  background: var(--cr-bg);
  box-shadow: inset 0 0 0 1px var(--cr-line);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  font-size: var(--text-meta, 0.8125rem);
  line-height: 1;
  white-space: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  view-transition-name: crumbs;
}
.crumbs::-webkit-scrollbar { display: none; }
/* scrolled on a phone: the start fades out, so the trail reads as going on */
.crumbs.is-cut { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem); mask-image: linear-gradient(90deg, transparent, #000 2.5rem); }
.phead:not(.phead--wash) .crumbs, .crumbs--dark {
  --cr-bg: rgb(255 255 255 / 0.07);
  --cr-line: rgb(255 255 255 / 0.12);
  --cr-ink: var(--on-brand-2);
  --cr-ink-strong: #fff;
  --cr-hover: rgb(255 255 255 / 0.1);
  --cr-chip: rgb(255 255 255 / 0.15);
  --cr-chip-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.crumbs > a, .crumbs > [aria-current] {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  height: 36px;
  padding: 0 0.875rem;
  border-radius: 999px;
  color: var(--cr-ink);
}
.crumbs > a:hover { background: var(--cr-hover); color: var(--cr-ink-strong); }
.crumbs > a:focus-visible { outline: 2px solid var(--cr-dot); outline-offset: -2px; }
.crumbs > [aria-current] {
  background: var(--cr-chip);
  box-shadow: var(--cr-chip-shadow);
  color: var(--cr-ink-strong);
  font-weight: 600;
}
/* home: the word stays for screen readers, the eye sees a house */
/* no gap: the hidden word beside the house would push it 4px off the centre */
.crumbs > a:first-child { width: 36px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
.crumbs > a:first-child::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.4 12 4l8 6.4V19a1 1 0 0 1-1 1h-4.25v-5.5h-5.5V20H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.4 12 4l8 6.4V19a1 1 0 0 1-1 1h-4.25v-5.5h-5.5V20H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* the separators: a "/" in the markup, a thin chevron on screen */
.crumbs > span[aria-hidden] {
  flex: none;
  width: 6px;
  height: 10px;
  margin: 0 1px;
  font-size: 0;
  background: var(--cr-ink);
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* between pages the capsule is not stretched: the old and the new trail are
   pinned at the left, the steps they share stay, the rest cross-fades */
::view-transition-old(crumbs), ::view-transition-new(crumbs) {
  height: 100%;
  width: auto;
  object-fit: none;
  object-position: left center;
}
::view-transition-group(crumbs) { animation-duration: 0.32s; animation-timing-function: var(--ease-out, ease-out); }

/* arriving from a page without crumbs (base.html adds .crumbs-arrive for a
   moment): the capsule slides out from under the header and eases to a stop,
   its steps come in from the left one after another - no bounce */
@media (prefers-reduced-motion: no-preference) {
  html.crumbs-arrive .crumbs { animation: crumbs-out 0.75s var(--ease-out) 0.08s both; }
  html.crumbs-arrive .crumbs > * { animation: crumbs-step 0.45s var(--ease-out) 0.36s both; }
  html.crumbs-arrive .crumbs > :nth-child(2) { animation-delay: 0.41s; }
  html.crumbs-arrive .crumbs > :nth-child(3) { animation-delay: 0.46s; }
  html.crumbs-arrive .crumbs > :nth-child(4) { animation-delay: 0.51s; }
  html.crumbs-arrive .crumbs > :nth-child(5) { animation-delay: 0.56s; }
  html.crumbs-arrive .crumbs > :nth-child(6) { animation-delay: 0.61s; }
  html.crumbs-arrive .crumbs > :nth-child(n + 7) { animation-delay: 0.66s; }
}
/* not a snapshot of its own during the cross-fade between pages: snapshots are
   drawn over everything, the header too, and its blurred glass showed as a hazy
   square sliding over the emblem; left in the page, it slides out under the header */
html.crumbs-arrive .crumbs { view-transition-name: none; }
@keyframes crumbs-out { from { opacity: 0; translate: 0 -40px; } 45% { opacity: 1; } }
@keyframes crumbs-step { from { opacity: 0; translate: -6px 0; } }
/* between two pages with crumbs (base.html): the steps of the page before
   fold away, the one you were on keeping its raised chip while it goes; the
   capsule stays in the page's own cross-fade, as a snapshot of its own it
   would not show the blind */
html.crumbs-trail .crumbs { view-transition-name: none; }
/* while the capsule changes width (base.html), its glass is three pieces that
   only move: the left end stays, the middle stretches, the right end slides */
.crumbs { position: relative; isolation: isolate; }
.crumbs.is-morphing { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.crumbs__pill { position: absolute; top: 0; left: 0; z-index: -1; width: var(--w); height: 100%; pointer-events: none; }
.crumbs__pill > i {
  position: absolute; top: 0; bottom: 0;
  border: 1px solid var(--cr-line);
  background: var(--cr-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  will-change: transform;
}
.crumbs__pill .pl { left: 0; width: var(--r); border-right: 0; border-radius: var(--r) 0 0 var(--r); }
.crumbs__pill .pm { left: var(--r); width: calc(var(--w) - 2 * var(--r)); border-left: 0; border-right: 0; transform-origin: 0 50%; }
.crumbs__pill .pr { left: calc(var(--w) - var(--r)); width: var(--r); border-left: 0; border-radius: 0 var(--r) var(--r) 0; }
.crumbs > a.crumbs-ghost { pointer-events: none; }
.crumbs > a.crumbs-ghost.is-chip { background: var(--cr-chip); box-shadow: var(--cr-chip-shadow); color: var(--cr-ink-strong); font-weight: 600; }

/* ── the band between pages ──
   Every page's band ends in a line of its own (under the band's content:
   covers stand on it and hang over it). On a hop inside the site the new
   page opens with the previous page's band height and grows or shrinks to
   its own (base.html), the content below riding along with the line. */
.band-line {
  position: absolute;
  inset: auto 0 -4px;
  z-index: 0;
  height: 4px;
  background: var(--brand);
  pointer-events: none;
}
.phead--wash .band-line, .jdp__hero .band-line { background: var(--jc); }

/* ── a cover between pages ──
   A journal's cover on the stands (home, the journals page) and on its own
   page share a view-transition name (jcover-<pk>, set in the markup): going
   to the journal, the cover flies from the stand to its place on the page
   and back again, instead of loading anew. Until an image has come, its box
   shows the journal's colour, never a blank. */
.jstand__cover img, .jdp__cover img { background: color-mix(in srgb, var(--jc, #7d858b) 30%, #e8ecef); }
.jstand__cover, .jdp__cover, .jpop__cover { view-transition-class: jcover; }
::view-transition-group(*.jcover) { animation-duration: 0.56s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
/* neither side is a journal's page (home <-> journals): no flight (base.html) */
html.no-jcover :is(.jstand__cover, .jpop__cover) { view-transition-name: none !important; }