/* About the publisher (pages/about.html, on page.css): a page to read - the
   text beside the contacts, the chronicle of the journals, the details. */

.about { display: grid; gap: var(--space-lg); }
.about > .psheet + .psheet { margin-top: 0; }

/* ── the text and the contacts ── */
.about__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
@media (min-width: 62rem) {
  .about__top { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .about__contacts { position: sticky; top: calc(var(--header-h, 4rem) + var(--space-md)); }
}
.about__text { max-width: none; }
.about__text > * { max-width: 64ch; }
.about__text p { margin: 0 0 1em; font-size: 1.0625rem; line-height: 1.65; color: var(--color-ink-2); text-wrap: pretty; }
.about__text .about__lead { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); line-height: 1.45; color: var(--color-ink); }
.about__text h2 {
  margin: var(--space-xl) 0 var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 650; line-height: 1.2;
}
/* a journal named in the text: its name, underlined in its own colour */
.about__journal {
  color: var(--color-ink); font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--jc); text-decoration-thickness: 2px; text-underline-offset: 0.22em;
}
.about__journal:hover { color: color-mix(in srgb, var(--jc) 55%, var(--color-ink)); }
.about__text .about__note { margin-top: -0.4em; font-size: 0.8125rem; color: var(--color-ink-2); }

/* contacts, on the dark card */
.about-contacts { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.about-contacts li { display: grid; gap: 2px; }
.about-contacts span { font-size: 0.8125rem; color: var(--ink-2); }
.about-contacts a { font-family: var(--font-display); font-size: 1.375rem; font-weight: 650; color: var(--card-ink, var(--color-ink)); }
.about-contacts a:hover { color: var(--card-ink, var(--color-ink)); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.about-address { margin: 0; line-height: 1.5; }

/* ── the chronicle ──
   A line of years down the page. Each year sits as far below the one before
   as the years between them ask for (within reason), so the long quiet after
   1937 and the run of new journals around 2000 are seen, not read. A pause
   of eight years or more is spelled out on a dotted stretch of the line. */
.chron { --year-w: 7rem; --axis-w: 2.75rem; overflow: hidden; }
.chron__head { max-width: 62ch; margin-bottom: var(--space-lg); }
.chron__head .pkicker { margin: 0 0 var(--space-2xs); }
.chron__head h2 { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); font-weight: 650; line-height: 1.15; }
.chron__head p { margin: 0; color: var(--color-ink-2); line-height: 1.6; }

.chron__line { position: relative; margin: 0; padding: var(--space-xs) 0; list-style: none; }
/* the line itself */
.chron__line::before {
  content: ""; position: absolute; top: 1.6rem; bottom: 1.6rem;
  left: calc(var(--year-w) + var(--axis-w) / 2 - 1px); width: 2px; border-radius: 2px;
  background: linear-gradient(var(--brand), color-mix(in srgb, var(--brand) 45%, transparent));
}
.chron__year, .chron__pause { display: grid; grid-template-columns: var(--year-w) var(--axis-w) minmax(0, 1fr); align-items: start; }
.chron__year { margin-top: clamp(0.5rem, calc(var(--gap) * 0.22rem), 2rem); }
.chron__year:first-child { margin-top: 0; }
.chron__year.is-after-pause { margin-top: 0; }
/* the year, big, and its point on the line in its journal's colour */
.chron__num {
  grid-column: 1; padding-right: var(--space-sm); text-align: right;
  font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); font-weight: 650; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums;
  color: color-mix(in srgb, var(--jc) 60%, var(--color-ink));
}
.chron__year::before {
  content: ""; grid-column: 2; grid-row: 1; justify-self: center; margin-top: 0.55rem;
  width: 14px; height: 14px; border-radius: 50%; background: var(--jc);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px color-mix(in srgb, var(--jc) 45%, transparent);
  position: relative; z-index: 1;
}
.chron__journals { grid-column: 3; grid-row: 1; display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.chron__journals a {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-md);
  max-width: 40rem; padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
  border-radius: 16px; color: var(--color-ink);
  transition: background-color 0.2s ease;
}
.chron__journals a:hover { background: color-mix(in srgb, var(--jc) 10%, #fff); color: var(--color-ink); }
.chron__cover { grid-column: 1; display: block; line-height: 0; border-radius: 3px; box-shadow: 0 8px 18px -10px rgb(6 30 38 / 0.6); transition: transform 0.35s var(--ease-out); transform: rotate(-2deg); }
.chron__journals li:nth-child(even) .chron__cover { transform: rotate(1.5deg); }
.chron__journals a:hover .chron__cover { transform: rotate(0) translateY(-3px) scale(1.04); }
.chron__cover img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 410; object-fit: cover; border-radius: 3px; background: color-mix(in srgb, var(--jc) 30%, #e8ecef); }
.chron__name { grid-column: 2; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.chron__age {
  grid-column: 3; padding: 0.2rem 0.65rem; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--jc) 14%, #fff); color: color-mix(in srgb, var(--jc) 55%, var(--color-ink));
  font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* a long pause: a dotted stretch of the line, how many years it lasted */
.chron__pause { height: clamp(3rem, calc(var(--gap) * 0.16rem), 5.5rem); align-items: center; }
.chron__pause::before {
  content: ""; grid-column: 2; grid-row: 1; justify-self: center; align-self: stretch; width: 4px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 70%, transparent) 1.5px, transparent 2px) center / 4px 9px repeat-y, var(--color-paper, #fff);
  position: relative; z-index: 1;
}
.chron__pause span { grid-column: 3; grid-row: 1; padding-left: var(--space-xs); font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; color: var(--color-ink-2); }

/* drawn in as it comes into view (the script on the page; without it, all is simply there) */
@media (prefers-reduced-motion: no-preference) {
  .chron__line.is-waiting > li { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .chron__line.is-waiting > li.is-in { opacity: 1; transform: none; }
}

@media (max-width: 40rem) {
  .chron { --year-w: 4.25rem; --axis-w: 1.75rem; }
  .chron__journals a { grid-template-columns: 2.75rem minmax(0, 1fr); padding-right: var(--space-xs); }
  .chron__age { grid-column: 2; justify-self: start; }
  .chron__name { font-size: 1rem; }
}

/* ── the details: facts in columns, and a button to copy them all ── */
.about-details__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
.about-details h2 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 650; }
.about-details .pkicker { margin: 0 0 var(--space-2xs); }
.about-copy { min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--color-ink); font: inherit; font-weight: 600; cursor: pointer; }
.about-copy:hover { background: color-mix(in srgb, var(--brand) 22%, #fff); }
.about-req { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-md) var(--space-xl); margin: var(--space-lg) 0 0; }
.about-req div { display: grid; gap: 2px; }
.about-req--wide { grid-column: span 2; }
@media (max-width: 40rem) { .about-req--wide { grid-column: auto; } }
.about-req dt { font-size: 0.8125rem; color: var(--color-ink-2); }
.about-req dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* on a wide screen the chronicle's heading stays at the left as its years go by on the right */
@media (min-width: 62rem) {
  .chron { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); align-items: start; overflow: visible; }
  .chron__head { position: sticky; top: calc(var(--header-h, 4rem) + var(--space-lg)); margin-bottom: 0; }
}

/* on a phone the years are simply there: drawn in while one scrolls, they twitched */
@media (max-width: 720px) {
  .chron__line.is-waiting > li { opacity: 1; transform: none; transition: none; }
}