/* Saint Paul gift preview: the archive page (archive.html), lane archive, 2026-10-06.
   Page classes use the prefix .ar-*. Tokens come from css/base.css and are never redefined here. */

/* 1. Intro: the reading room */
.ar-intro {
  position: relative;
  padding-block: clamp(var(--sp-space-6), 7vw, var(--sp-space-8));
  background:
    radial-gradient(120% 80% at 85% 10%, rgba(246, 183, 91, .24), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(214, 140, 59, .12), transparent 65%),
    linear-gradient(180deg, var(--sp-ivory) 0%, var(--sp-paper) 100%);
  overflow: clip;
}
.ar-intro::before { /* thin gilded rule along the top and bottom of the room */
  content: "";
  position: absolute;
  inset: 10px var(--sp-gutter);
  border-block: var(--sp-line) solid rgba(214, 140, 59, .55);
  pointer-events: none;
}
.ar-intro__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-space-6);
  align-items: center;
}
.ar-intro__title {
  margin-bottom: var(--sp-space-4);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-display);
  font-weight: 600;
  line-height: 1.02;
  color: var(--sp-ink);
  text-wrap: balance;
}
.ar-intro .sp-lede { color: var(--sp-ink-soft); }
.ar-intro.sp-grain::after { opacity: .05; mix-blend-mode: multiply; animation: none; }
.ar-intro__light { /* a soft window of daylight in the top corner of the room */
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 223, 162, .55), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.ar-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-2);
  margin-top: var(--sp-space-5);
}
.ar-jump a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-tap);
  padding: 8px 14px;
  border: var(--sp-line) solid rgba(112, 57, 18, .35);
  border-radius: var(--sp-radius-s);
  background: rgba(255, 253, 248, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  color: var(--sp-bronze);
  font: 500 .9375rem/1.25 var(--sp-font-label);
  text-decoration: none;
  position: relative;
}
/* The hover glow is a layer that fades in (opacity only, Coach order 6). */
.ar-jump a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(214, 140, 59, .10);
  opacity: 0;
  transition: opacity var(--sp-dur-1) var(--sp-ease-out);
  pointer-events: none;
}
.ar-jump a:hover { border-color: var(--sp-gold-500); }
.ar-jump a:hover::before { opacity: 1; }
.ar-intro__figure { margin: 0; }
.ar-intro__open, .ar-photo__open, .ar-shot__open {
  display: block;
  width: 100%;
  min-width: 0;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
.ar-intro__open img { width: 100%; height: auto; }
.ar-intro__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-space-2) var(--sp-space-3);
  margin-top: var(--sp-space-3);
}
.ar-intro__caption .sp-caption { margin: 0; color: var(--sp-ink-soft); }
.ar-hint { /* the double-tap hint, once, above the first wired picture */
  margin-top: var(--sp-space-3);
  color: var(--sp-bronze);
  font: italic 500 1.0625rem/1.4 var(--sp-font-display);
  letter-spacing: .01em;
}
.ar-hint::before { content: "\2726"; margin-right: 8px; font-style: normal; font-size: .8em; opacity: .8; }
@media (min-width: 900px) {
  .ar-intro__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-space-8); }
}

/* 2. The parish books: three framed volumes with a gilded spine */
.ar-books {
  display: grid;
  gap: var(--sp-space-6);
}
.ar-volume {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-space-4);
  align-items: start;
  padding: var(--sp-space-4);
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-m);
  background: #fffdf8;
  box-shadow: var(--sp-shadow-1);
}
.ar-volume__cover {
  position: relative;
  padding: 6px 6px 6px 18px;
  border: var(--sp-line) solid var(--sp-gold-500);
  border-radius: 2px 6px 6px 2px;
  background: var(--sp-paper);
  box-shadow: 0 1px 0 var(--sp-bronze), 4px 6px 0 -2px var(--sp-sand), var(--sp-shadow-2);
  transform-origin: left center;
  transition: transform var(--sp-dur-2) var(--sp-ease-out);
}
.ar-volume__spine { /* the gold edge of the binding */
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  border-radius: 2px 0 0 2px;
  background:
    linear-gradient(180deg, transparent 10%, rgba(45, 21, 4, .35) 10% 11%, transparent 11% 89%, rgba(45, 21, 4, .35) 89% 90%, transparent 90%),
    linear-gradient(90deg, var(--sp-bronze) 0, var(--sp-gold-300) 40%, var(--sp-gold-500) 70%, var(--sp-bronze) 100%);
}
.ar-volume__img { display: block; width: 100%; height: auto; background: var(--sp-paper); outline: var(--sp-line) solid var(--sp-bronze); }
.ar-volume__num {
  margin-bottom: var(--sp-space-1);
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-label)/1.3 var(--sp-font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ar-volume__title {
  margin-bottom: var(--sp-space-1);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h3);
  font-weight: 600;
  line-height: var(--sp-lh-tight);
  text-wrap: balance;
}
.ar-volume__year {
  margin-bottom: var(--sp-space-3);
  color: var(--sp-brick);
  font-family: var(--sp-font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: oldstyle-nums;
}
.ar-volume__about { color: var(--sp-ink-soft); font-size: var(--sp-fs-small); }
.ar-volume__links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-2);
  margin-top: var(--sp-space-3);
}
.ar-volume__body .ar-volume__links { grid-column: auto; }
.ar-volume__btn { flex: 1 1 auto; }
.ar-ext { display: inline; font-weight: 500; opacity: .85; }
/* A button or link with "(opens Facebook)" lets the label and the note flow as centered lines,
   not as two narrow side-by-side columns on a small phone. */
a:has(> .ar-ext) { flex-wrap: wrap; column-gap: .3em; row-gap: 0; }
.sp-btn:has(> .ar-ext) { justify-content: center; text-align: center; }
@media (max-width: 520px) {
  .ar-volume { grid-template-columns: 112px minmax(0, 1fr); }
  .ar-volume__body { display: contents; }
  .ar-volume__num, .ar-volume__title, .ar-volume__year { grid-column: 2; }
  .ar-volume__cover { grid-row: 1 / span 3; }
  .ar-volume__about, .ar-volume__body .ar-volume__links { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .ar-books { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .ar-volume { grid-template-columns: 1fr; grid-template-rows: 300px 1fr; padding: var(--sp-space-5); text-align: center; }
  .ar-volume::before { /* the shelf the volumes stand on */
    content: "";
    grid-row: 1; grid-column: 1;
    align-self: end;
    height: 8px;
    margin-inline: calc(-1 * var(--sp-space-3));
    border-radius: 2px;
    background: linear-gradient(180deg, var(--sp-gold-500), var(--sp-bronze));
    box-shadow: 0 6px 12px -6px rgba(45, 21, 4, .5);
  }
  .ar-volume__cover { grid-row: 1; grid-column: 1; align-self: end; justify-self: center; width: fit-content; max-width: 90%; margin-bottom: 8px; }
  .ar-volume__img { width: auto; max-width: 100%; max-height: 270px; }
  .ar-volume__body { padding-top: var(--sp-space-4); }
  .ar-volume__body { display: flex; flex-direction: column; align-items: center; height: 100%; }
  .ar-volume__about { flex: 1; }
  .ar-volume__links { justify-content: center; width: 100%; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ar-volume:hover .ar-volume__cover { transform: perspective(900px) rotateY(-8deg); }
}

/* 3. Photographs: framed pictures that keep their own shape */
.ar-features {
  columns: 1;
  column-gap: var(--sp-space-5);
}
.ar-photo, .ar-shot {
  break-inside: avoid;
  margin: 0 0 var(--sp-space-6);
}
.ar-photo__open img, .ar-shot__open img { width: 100%; height: auto; }
.ar-photo__body, .ar-shot__body { padding: var(--sp-space-3) 2px 0; }
.ar-photo__title {
  margin: var(--sp-space-2) 0 var(--sp-space-1);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h3);
  font-weight: 600;
  line-height: var(--sp-lh-tight);
}
.ar-photo__date {
  color: var(--sp-bronze);
  font: 600 var(--sp-fs-small)/1.4 var(--sp-font-label);
}
.ar-photo__note, .ar-shot__caption, .ar-shot__credit {
  margin-top: var(--sp-space-2);
  color: var(--sp-muted);
  font-size: var(--sp-fs-small);
  line-height: 1.5;
}
.ar-shot__credit { font-style: italic; }
.ar-photo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-space-2) var(--sp-space-4);
  margin-top: var(--sp-space-3);
}
@media (min-width: 768px) {
  .ar-features {
    columns: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-space-6) var(--sp-space-5);
    align-items: start;
  }
  .ar-features > .ar-photo { margin: 0; }
  .ar-photo__open { aspect-ratio: 4 / 3; overflow: clip; }
  .ar-photo__open img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
}
@media (min-width: 1100px) { .ar-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ar-extra { margin-top: var(--sp-space-7); padding-top: var(--sp-space-7); border-top: var(--sp-line) solid var(--sp-sand); }
.ar-extra__title {
  margin-bottom: var(--sp-space-3);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h2);
  font-weight: 600;
  line-height: var(--sp-lh-tight);
  text-wrap: balance;
}
.ar-extra__grid { columns: 1; column-gap: var(--sp-space-5); }
.ar-shot__media .sp-compare { width: 100%; }
@media (min-width: 768px) { .ar-extra__grid { columns: 2; } }

/* 4. Source albums */
.ar-albums { display: grid; gap: var(--sp-space-5); }
.ar-album {
  display: flex;
  flex-direction: column;
  padding: var(--sp-space-4);
  border: var(--sp-line) solid var(--sp-sand);
  border-radius: var(--sp-radius-m);
  background: #fffdf8;
  box-shadow: var(--sp-shadow-1);
}
.ar-album__cover { aspect-ratio: 4 / 3; overflow: hidden; }
.ar-album__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.ar-album__title {
  margin: var(--sp-space-3) 0 var(--sp-space-1);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h3);
  font-weight: 600;
  line-height: var(--sp-lh-tight);
}
.ar-album__note { flex: 1; color: var(--sp-muted); font-size: var(--sp-fs-small); }
.ar-album--text { border-top: 3px solid var(--sp-gold-500); }
.ar-album--text .ar-album__title { margin-top: 0; }
.ar-album__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-space-4); margin-top: var(--sp-space-2); }
@media (min-width: 640px) { .ar-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ar-albums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 5. Sources and credits */
.ar-credits__grid { display: grid; gap: var(--sp-space-6); }
.ar-credits__head {
  margin-bottom: var(--sp-space-3);
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-h3);
  font-weight: 600;
  line-height: var(--sp-lh-tight);
}
.ar-credits__list { margin: 0; padding: 0; list-style: none; }
.ar-credits__list li { border-bottom: var(--sp-line) solid var(--sp-sand); }
.ar-credits__list .sp-link { padding-block: 6px; }
.ar-credits__people { margin: 0; }
.ar-credit { padding-block: var(--sp-space-2); border-bottom: var(--sp-line) solid var(--sp-sand); }
.ar-credit dt { font: 600 1rem/1.4 var(--sp-font-label); color: var(--sp-ink); }
.ar-credit dd { margin: 2px 0 0; color: var(--sp-muted); font-size: var(--sp-fs-small); }
.ar-credits__notes { margin-top: var(--sp-space-6); max-width: 80ch; }
.ar-credits__notes p + p { margin-top: var(--sp-space-3); }
.ar-credits__next { display: flex; flex-wrap: wrap; gap: var(--sp-space-3); margin-top: var(--sp-space-6); }
@media (min-width: 900px) { .ar-credits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-space-8); } }

.ar-fallback { color: var(--sp-muted); }
.ar-intro__source { display: block; margin-top: var(--sp-space-1); }

/* 6. Phones (Coach order 6): photographs as a sideways rail with scroll snap,
   16 px reading text, room for the bottom action bar, and safe areas. */
.ar-rail { display: none; }
@media (max-width: 767.98px) {
  .ar-rail:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-3);
    margin-bottom: var(--sp-space-3);
  }
  .ar-rail__hint {
    margin: 0;
    color: var(--sp-bronze);
    font: 600 .875rem/1.3 var(--sp-font-label);
    letter-spacing: .04em;
  }
  .ar-rail__hint::before { /* a small gold arrow line that says "more this way" */
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-right: 8px;
    vertical-align: middle;
    background: linear-gradient(90deg, transparent, var(--sp-gold-500));
  }
  .ar-rail__count { margin-left: 6px; color: var(--sp-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
  .ar-rail__btns { display: flex; gap: var(--sp-space-2); }
  .ar-rail__btn {
    display: grid;
    place-items: center;
    width: var(--sp-tap);
    height: var(--sp-tap);
    border: var(--sp-line) solid var(--sp-gold-500);
    border-radius: 50%;
    background: #fffdf8;
    color: var(--sp-bronze);
    font: 600 1.6rem/1 var(--sp-font-display);
    box-shadow: var(--sp-shadow-1);
    transition: transform var(--sp-dur-1) var(--sp-ease-out), opacity var(--sp-dur-1) var(--sp-ease-out);
  }
  .ar-rail__btn:active { transform: scale(.94); }
  .ar-rail__btn:disabled { opacity: .35; }
  .ar-features {
    columns: auto;
    display: flex;
    gap: var(--sp-space-4);
    margin-inline: calc(-1 * max(var(--sp-gutter), env(safe-area-inset-left)));
    padding: 4px max(var(--sp-gutter), env(safe-area-inset-left)) var(--sp-space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--sp-gutter), env(safe-area-inset-left));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ar-features::-webkit-scrollbar { display: none; }
  .ar-features > .ar-photo {
    flex: 0 0 84%;
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .ar-photo__open { aspect-ratio: 4 / 5; overflow: hidden; }
  .ar-photo__open img { width: 100%; height: 100%; object-fit: cover; }
  .ar-volume__about, .ar-photo__note, .ar-shot__caption, .ar-shot__credit,
  .ar-album__note, .ar-credit dd { font-size: 1rem; }
  .ar-credits { padding-bottom: calc(var(--sp-space-8) + 56px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .ar-features > .ar-photo .ar-photo__open img { transition: transform var(--sp-dur-2) var(--sp-ease-out); }
  .ar-features > .ar-photo .ar-photo__open:active img { transform: scale(.985); }
}

/* Phones: centered (Coach 2026-10-06) */
@media (max-width: 699px) {
  /* Intro: label, title, lede, chips, hint, picture caption */
  .ar-intro__text, .ar-hint, .ar-intro__caption, .ar-intro__source { text-align: center; }
  .ar-intro .sp-eyebrow, .ar-jump, .ar-intro__caption { justify-content: center; }
  /* Section heads: label, title, lede */
  main .sp-section__head { margin-inline: auto; text-align: center; }
  main .sp-section__head .sp-eyebrow { justify-content: center; }
  /* Parish books: the buttons under each book */
  .ar-volume__links { justify-content: center; }
  /* Photographs: rail controls, titles, dates, captions, credits, actions */
  .ar-rail:not([hidden]) { justify-content: center; }
  .ar-photo__body, .ar-shot__body, .ar-extra__title { text-align: center; }
  .ar-photo__actions { justify-content: center; }
  /* Source albums: titles, short notes, links */
  .ar-album__title, .ar-album__note { text-align: center; }
  .ar-album__links { justify-content: center; }
  /* Sources and credits: headings and the short notes card, buttons; lists stay left */
  .ar-credits__head, .ar-credits__notes { text-align: center; }
  .ar-credits__notes { margin-inline: auto; }
  .ar-credits__next { justify-content: center; }
}

/* 7. Motion (2026-10-06 "make it amazing"): the darkroom. Old prints develop into color with the
   scroll, the rail thread fills toward the count, and daylight drifts across the reading room.
   The still page above is the final state; nothing here runs with reduced motion. */
@keyframes ar-develop {
  from { filter: grayscale(1) sepia(.5) contrast(.9) brightness(1.06); transform: scale(1.06); }
  to { filter: none; transform: none; }
}
@keyframes ar-develop-rail {
  0% { filter: grayscale(1) sepia(.5) contrast(.9) brightness(1.06); transform: scale(1.05); }
  38%, 62% { filter: none; transform: none; }
  100% { filter: grayscale(1) sepia(.5) contrast(.9) brightness(1.06); transform: scale(1.05); }
}
@keyframes ar-light { to { transform: translate(-30vw, 40%) scale(1.25); opacity: .35; } }
@keyframes ar-thread { from { transform: scaleX(.125); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .ar-intro__open img { animation: ar-develop 1400ms var(--sp-ease-out) 150ms both; }
  .ar-jump a { transition: transform 100ms var(--sp-ease-out); }
  .ar-jump a:active { transform: scale(.98); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ar-intro { view-timeline: --ar-room block; }
    .ar-intro__light { animation: ar-light linear both; animation-timeline: --ar-room; animation-range: exit 0% exit 100%; }
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ar-photo, .ar-shot { view-timeline: --ar-card block; }
    .ar-photo__open, .ar-shot__open { overflow: clip; }
    .ar-photo__open img, .ar-shot__open img { animation: ar-develop linear both; animation-timeline: --ar-card; animation-range: entry 0% cover 45%; }
  }
}

/* The rail thread: a gold line under the phone rail that fills toward the count. */
@media (max-width: 767.98px) {
  .ar-photos-section .sp-wrap { timeline-scope: --ar-rail; }
  .ar-features { scroll-timeline: --ar-rail inline; }
  .ar-rail { position: relative; }
  .ar-rail:not([hidden])::before, .ar-rail:not([hidden])::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    pointer-events: none;
  }
  .ar-rail::before { background: rgba(214, 140, 59, .18); }
  .ar-rail::after {
    background: linear-gradient(90deg, var(--sp-gold-500), var(--sp-gold-300));
    box-shadow: 0 0 8px rgba(246, 183, 91, .6);
    transform-origin: left center;
    transform: scaleX(var(--ar-p, .125));
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ar-photo__open { overflow: clip; }
    .ar-features > .ar-photo { view-timeline: --ar-card inline; }
    .ar-features > .ar-photo .ar-photo__open img { animation: ar-develop-rail linear both; animation-timeline: --ar-card; animation-range: cover 0% cover 100%; }
  }
  @supports (animation-timeline: scroll()) {
    .ar-rail::after { animation: ar-thread linear both; animation-timeline: --ar-rail; }
  }
}