/* ============================================================
   Prang Out — components
   Every value resolves from tokens.css. No raw literals here
   beyond layout mechanics (0, 1px hairlines, %, transforms).
   ============================================================ */

/* --- Faces ---------------------------------------------------- */
@font-face {
  font-family: "Geared Slab";
  src: url("/assets/fonts/geared-slab-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--po-paper);
  color: var(--po-ink);
  font-family: var(--po-font-micro);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Paper grain -------------------------------------------- */
/* Fixed overlay that gives the white field a printed texture.  */
.po-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  background-image: var(--po-grain-img);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

/* --- Skip link ----------------------------------------------- */
.po-skip {
  position: absolute;
  left: var(--po-space-sm);
  top: var(--po-space-sm);
  z-index: 10;
  transform: translateY(-200%);
  padding: var(--po-space-2xs) var(--po-space-xs);
  background: var(--po-ink);
  color: var(--po-paper);
  font-size: var(--po-size-micro);
  letter-spacing: var(--po-track-micro);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 160ms var(--po-ease);
}
.po-skip:focus { transform: translateY(0); }

/* --- Layout --------------------------------------------------- */
.po-shell {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--po-space-xl);
  padding: var(--po-space-xl) var(--po-gutter);
  text-align: center;
}

.po-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--po-notice-w);
}

/* --- Lockup --------------------------------------------------- */
.po-lockup {
  display: block;
  width: var(--po-lockup-w);
  height: auto;
}

/* --- Hairline rule -------------------------------------------- */
.po-rule {
  width: var(--po-rule-w);
  height: 1px;
  margin: var(--po-space-lg) 0;
  border: 0;
  background: var(--po-ink);
  transform-origin: center;
}

/* --- Typography ----------------------------------------------- */
.po-label {
  margin: 0;
  font-family: var(--po-font-micro);
  font-size: var(--po-size-label);
  font-weight: 600;
  letter-spacing: var(--po-track-label);
  /* Tracking is applied to the right of each glyph; nudge back
     so the block stays optically centred. */
  text-indent: var(--po-track-label);
  text-transform: uppercase;
}

.po-years {
  margin: var(--po-space-sm) 0 0;
  font-family: var(--po-font-display);
  font-size: var(--po-size-years);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  line-height: 0.92;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.po-tagline {
  max-width: var(--po-measure);
  margin: var(--po-space-sm) 0 0;
  font-family: var(--po-font-tagline);
  font-size: var(--po-size-tagline);
  font-weight: 700;
  letter-spacing: var(--po-track-tagline);
  text-indent: var(--po-track-tagline);
  text-transform: uppercase;
  line-height: 1.9;
}

.po-thanks {
  max-width: var(--po-measure);
  margin: var(--po-space-md) 0 0;
  font-family: var(--po-font-display);
  font-size: var(--po-size-thanks);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
}

.po-kiss {
  display: block;
  margin-top: var(--po-space-xs);
  font-family: var(--po-font-micro);
  font-style: normal;
  font-size: var(--po-size-kiss);
  font-weight: 500;
  letter-spacing: var(--po-track-label);
  text-indent: var(--po-track-label);
  text-transform: uppercase;
}

/* --- Footer ---------------------------------------------------- */
.po-foot {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: var(--po-space-sm);
  padding: var(--po-space-md) var(--po-gutter);
  color: var(--po-ink-soft);
  font-size: var(--po-size-micro);
  font-weight: 500;
  letter-spacing: var(--po-track-micro);
  text-transform: uppercase;
}

.po-foot span { text-indent: var(--po-track-micro); }

/* --- Archive (masonry, populated from archive.json) ------------ */
/* Hidden until the manifest yields at least one item, so the
   memorial reads as a single quiet screen while it is empty.    */
.po-archive[hidden] { display: none; }

.po-archive {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--po-gutter) var(--po-space-xl);
}

.po-archive__rule {
  width: var(--po-rule-w);
  height: 1px;
  margin: 0 auto var(--po-space-lg);
  border: 0;
  background: var(--po-ink);
}

.po-archive__grid {
  columns: 1;
  column-gap: var(--po-space-sm);
}

@media (min-width: 40rem)  { .po-archive__grid { columns: 2; } }
@media (min-width: 64rem)  { .po-archive__grid { columns: 3; } }
@media (min-width: 90rem)  { .po-archive__grid { columns: 4; } }

.po-archive__item {
  break-inside: avoid;
  margin: 0 0 var(--po-space-sm);
}

.po-archive__item img,
.po-archive__item video {
  display: block;
  width: 100%;
  height: auto;
}

.po-archive__cap {
  margin-top: var(--po-space-2xs);
  color: var(--po-ink-soft);
  font-size: var(--po-size-micro);
  letter-spacing: var(--po-track-micro);
  text-transform: uppercase;
  text-align: left;
}

/* --- Focus ----------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--po-focus);
  outline-offset: 3px;
}

/* --- Entrance -------------------------------------------------- */
/* One orchestrated page load: the mark settles first, the rule
   draws out from the centre, then the text rises beneath it.     */
.po-reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  animation: po-rise var(--po-dur-slow) var(--po-ease) forwards;
  animation-delay: var(--po-delay, 0ms);
}

.po-rule {
  transform: scaleX(0);
  animation: po-draw var(--po-dur-rule) var(--po-ease) forwards;
  animation-delay: var(--po-delay, 0ms);
}

@keyframes po-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes po-draw {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .po-reveal,
  .po-rule {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .po-skip { transition: none; }
}

/* --- Print ----------------------------------------------------- */
@media print {
  .po-grain,
  .po-skip { display: none; }
  .po-reveal,
  .po-rule { animation: none; opacity: 1; transform: none; }
  body { color: var(--po-ink); background: var(--po-paper); }
}

/* Archive heading sits between the rule and the grid. */
.po-archive .po-label {
  margin-bottom: var(--po-space-lg);
  text-align: center;
}