/* Quiet visual depth for the public Classic archive. */
body.journal-public {
  background-color: #f5f1e9;
  background-image:
    radial-gradient(ellipse at 8% 2%, #fffdf880 0, transparent 34%),
    radial-gradient(ellipse at 92% 28%, #d9e1d334 0, transparent 30%),
    radial-gradient(ellipse at 28% 72%, #eadfd43d 0, transparent 36%),
    linear-gradient(112deg, #7e674608 0, transparent 22%, #ffffff18 58%, transparent 82%),
    linear-gradient(180deg, #f7f3eb 0, #f3efe6 48%, #f6f2e9 100%);
  background-attachment: fixed;
}

.journal-public .header {
  box-shadow: 0 1px 0 #fff9 inset;
  transition: box-shadow 240ms ease, background-color 240ms ease;
}
.journal-public .header.is-scrolled {
  background-color: #f5f1e9f7;
  box-shadow: 0 8px 22px #3c332818, 0 1px 0 #fff9 inset;
}
.journal-public .header .nav-pill { position: relative; }
.journal-public .header .nav-pill::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 5px;
  left: 13px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}
.journal-public .header .nav-pill:hover::after,
.journal-public .header .nav-pill:focus-visible::after,
.journal-public .header .nav-pill.is-active::after { transform: scaleX(1); }

.journal-public .home-band,
.journal-public .archive-index,
.journal-public .detail { position: relative; isolation: isolate; }
.journal-public .home-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px 0;
  border-radius: 18px;
  background: linear-gradient(118deg, #fffdf42e, transparent 42%, #dfe5d837);
  pointer-events: none;
}
.journal-public .home-band + .home-band::before {
  background: linear-gradient(118deg, #e8ddd133, transparent 45%, #fffdf435);
}

/* Paper mounts and restrained depth keep the photographs dominant. */
.journal-public .album-card,
.journal-public .restored-card,
.journal-public .album-shot {
  border-color: #d7d0c3;
  box-shadow: 0 2px 4px #47392b0b, 0 9px 24px #47392b12;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.journal-public .album-photo,
.journal-public .restored-card-media,
.journal-public .album-shot__frame,
.journal-public .version-stage {
  border: 5px solid #fbf8f1;
  box-sizing: border-box;
  box-shadow:
    inset 0 0 0 1px #74645138,
    inset 0 1px 0 #fff,
    0 2px 5px #47392b18,
    0 11px 24px #47392b12;
  background-color: #e8e1d5;
}
.journal-public .album-photo::after,
.journal-public .restored-card-media::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  border: 1px solid #fff9;
  box-shadow: inset 0 0 16px #6c543c12;
  pointer-events: none;
}
.journal-public .album-photo > img,
.journal-public .restored-card-media > img,
.journal-public .album-shot__frame > img,
.journal-public .album-shot__comparison,
.journal-public .compact-compare {
  transition: transform 300ms ease;
  transform-origin: center;
}
.journal-public .album-photo > img,
.journal-public .hero-photo img {
  object-fit: contain;
  background-color: #e8e1d5;
}
.journal-public .version-stage {
  border-width: 7px;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px #7464513d,
    0 3px 7px #47392b1a,
    0 18px 42px #47392b17;
}
.journal-public .album-shot__frame { border-width: 4px; }

@media (hover: hover) and (pointer: fine) {
  .journal-public .album-card:hover,
  .journal-public .restored-card:hover,
  .journal-public .album-shot:hover,
  .journal-public :is(.album-card,.restored-card,.album-shot):focus-within {
    border-color: #c8beae;
    box-shadow: 0 5px 10px #47392b12, 0 17px 38px #47392b20;
    transform: translateY(-4px);
  }
  .journal-public .album-card:hover .album-photo > img,
  .journal-public .album-card:focus-within .album-photo > img,
  .journal-public .restored-card:hover .compact-compare,
  .journal-public .restored-card:focus-within .compact-compare,
  .journal-public .album-shot:hover .album-shot__comparison,
  .journal-public .album-shot:focus-within .album-shot__comparison,
  .journal-public .album-shot:hover .album-shot__frame > img,
  .journal-public .album-shot:focus-within .album-shot__frame > img { transform: scale(1.008); }
}

/* The hero is one calm, clickable photograph rather than a decorative dead end. */
.journal-public .hero-photo > a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.journal-public .hero-photo > a:focus-visible {
  outline: 3px solid #7b4c24;
  outline-offset: -5px;
  border-radius: inherit;
}
.journal-public .hero-photo figcaption {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: calc(100% - 24px);
  border: 1px solid #fff8;
  box-shadow: 0 3px 10px #30271f1c;
}
.journal-public .hero-photo figcaption small {
  color: #5d594f;
  font-size: .68rem;
  white-space: nowrap;
}
.journal-public .hero-photo figcaption small::after { content: " →"; }

.journal-public .text-link,
.journal-public .album-shot__open {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 220ms ease;
}
.journal-public .text-link:hover,
.journal-public .text-link:focus-visible,
.journal-public .album-shot__open:hover,
.journal-public .album-shot__open:focus-visible { background-size: calc(100% - 20px) 1px; }
.journal-public :is(.text-link,.album-shot__open,.button):hover span,
.journal-public :is(.text-link,.album-shot__open,.button):focus-visible span { transform: translateX(4px); }
.journal-public :is(.text-link,.album-shot__open,.button) span { transition: transform 220ms ease; }

/* A published empty album is shown as a closed paper volume, not a fake photograph. */
.journal-public .album-empty-art {
  background: linear-gradient(140deg, #ded3c2 0, #f1eadf 52%, #d8cbb8 100%);
}
.journal-public .album-empty-art.is-empty-album::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 14%;
  left: 25%;
  width: 50%;
  height: 62%;
  border: 1px solid #79664f70;
  border-radius: 4px 9px 9px 4px;
  background: linear-gradient(90deg, #856d54 0 9%, #aa9273 10% 12%, #bca88b 13% 100%);
  box-shadow: inset 12px 0 18px #4b382632, inset -1px 0 #fff5, 0 8px 15px #4a3b2b2b;
  transform: rotate(-2deg);
}
.journal-public .album-empty-art.is-empty-album::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 18%;
  left: 29%;
  width: 49%;
  height: 61%;
  padding: 0;
  border: 1px solid #a18f7655;
  border-radius: 3px 8px 8px 3px;
  background: #eee7da;
  box-shadow: 4px 4px 0 #dfd5c5, 7px 7px 0 #c8b9a4;
  transform: rotate(3deg);
}
.journal-public .album-empty-label {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 8%;
  left: 0;
  color: #5d503f;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-align: center;
}

/* Existing reveal markup remains visible until JavaScript adds the .js marker. */
.js .journal-public .reveal { opacity: 0; transform: translateY(12px); }
.js .journal-public .reveal.is-visible {
  animation: classic-reveal-up 440ms cubic-bezier(.2,.72,.3,1) both;
  animation-delay: var(--delay, 0ms);
}
@keyframes classic-reveal-up {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .journal-public .hero-photo > a {
    animation: classic-hero-enter 480ms cubic-bezier(.2,.72,.3,1) both;
  }
  .journal-public .hero-photo:nth-child(2) > a { animation-delay: 100ms; }
  .journal-public .hero-photo:nth-child(3) > a { animation-delay: 180ms; }
  .journal-public .hero-photo img {
    animation: classic-hero-settle 16s cubic-bezier(.2,.65,.3,1) 520ms 1 forwards;
  }
  @keyframes classic-hero-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes classic-hero-settle {
    from { transform: scale(1); }
    to { transform: scale(1.012); }
  }
}

@media (max-width: 580px) {
  .journal-public .album-photo,
  .journal-public .restored-card-media,
  .journal-public .version-stage { border-width: 4px; }
  .journal-public .hero-photo figcaption { gap: 5px; }
  .journal-public .hero-photo figcaption small { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .journal-public .header,
  .journal-public .header .nav-pill::after,
  .journal-public :is(.album-card,.restored-card,.album-shot),
  .journal-public :is(.album-photo > img,.restored-card-media > img,.album-shot__frame > img,.album-shot__comparison,.compact-compare),
  .journal-public :is(.text-link,.album-shot__open,.button),
  .journal-public :is(.text-link,.album-shot__open,.button) span,
  .journal-public .hero-photo > a,
  .journal-public .hero-photo img { animation: none !important; transition: none !important; transform: none !important; }
  .js .journal-public .reveal,
  .js .journal-public .reveal.is-visible { opacity: 1; animation: none !important; transform: none; }
}