/* ─────────────────────────────────────────────
   The Archive — every entry is a bridge:
   the ask → what I made. Ledgers for campaigns and
   interfaces, contact sheets for sound made visible.
   ───────────────────────────────────────────── */

/* ── masthead ── */
.arc-hero { position: relative; padding: 140px 0 60px; max-width: 1240px; margin: 0 auto; }
.arc-hero .case-back { top: 90px; left: 0; }
.arc-hero h1 { margin: 0; font: 400 clamp(52px, 8.4vw, 132px)/.92 var(--f-display); letter-spacing: -.02em; }
.arc-hero h1 .script { font-size: 1.08em; color: var(--accent); filter: url(#boil); }
.arc-hero__deck { max-width: 60ch; margin: 30px 0 0; font-size: 18px; color: rgba(233,225,204,.82); }


/* ── chapter nav ── */
.arc-nav {
  position: sticky; top: 46px; z-index: 46;
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter);
  background: rgba(16,14,12,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(233,225,204,.08);
}
.arc-nav a {
  display: inline-flex; gap: 10px; align-items: baseline;
  padding: 8px 14px; border: 1px solid rgba(233,225,204,.18);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.arc-nav a span { color: var(--accent); }
.arc-nav a i { font-style: normal; opacity: .55; }
.arc-nav a:hover, .arc-nav a.is-current { border-color: var(--accent); background: rgba(171,51,40,.12); }

/* ── chapters ── */
.reel-ch { max-width: 1240px; margin: 0 auto; padding: 110px 0 40px; }
.reel-ch__head { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 28px; align-items: end; margin-bottom: 44px; }
.reel-ch__letter {
  grid-row: span 3; font: 400 clamp(110px, 14vw, 200px)/.8 var(--f-display);
  color: transparent; -webkit-text-stroke: 1px var(--accent);
}
.reel-ch h2 { margin: 0; font: 400 clamp(44px, 6vw, 84px)/1 var(--f-display); letter-spacing: -.02em; }
.reel-ch__thesis { margin: 12px 0 6px; max-width: 52ch; font: italic 400 clamp(19px, 2vw, 24px)/1.35 var(--f-display); color: rgba(233,225,204,.85); }
.reel-ch__count { margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sepia); }

/* ── ledger (campaigns + interfaces) ── */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(233,225,204,.16); }
.entry { border-bottom: 1px solid rgba(233,225,204,.16); }
.entry__open {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 220px 52px minmax(0, 1fr) minmax(0, 1.5fr) 170px; gap: 24px; align-items: start;
  padding: 26px 0;
}
.entry__open:focus-visible { outline: 1px dashed var(--accent); outline-offset: 6px; }
.entry__plate { display: block; aspect-ratio: 7 / 5; overflow: hidden; background: #0b0a09; padding: 6px; box-shadow: 0 12px 24px rgba(0,0,0,.45); }
.entry__plate img, .frame__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.15) brightness(.85) sepia(.15);
  transition: filter .5s steps(5), transform .5s steps(5);
}
.entry__open:hover .entry__plate img, .entry__open:focus-visible .entry__plate img { filter: none; transform: scale(1.03); }
.entry__id { font-size: 12px; color: var(--accent); padding-top: 4px; }
.entry__head { display: grid; gap: 6px; }
.entry__client { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sepia); }
.entry__via { color: rgba(233,225,204,.45); letter-spacing: .06em; text-transform: none; }
.entry__title { font: 400 clamp(26px, 2.6vw, 36px)/1.05 var(--f-display); }
.entry__open:hover .entry__title { color: var(--accent); }
.entry__bridge { display: grid; gap: 10px; font-size: 15px; line-height: 1.5; color: rgba(233,225,204,.82); }
.entry__bridge b { display: block; margin-bottom: 2px; font-weight: 400; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sepia); }
.entry__made b { color: var(--accent); }
.entry__meta { display: grid; gap: 8px; font-size: 11.5px; line-height: 1.5; color: rgba(233,225,204,.6); text-align: right; }
.entry__meta span:first-child { color: var(--bone); font-size: 13px; }

/* ── contact sheets (sound made visible) ── */
.sheet-title { display: flex; gap: 14px; align-items: baseline; margin: 40px 0 16px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.sheet-title span { color: var(--sepia); letter-spacing: .06em; text-transform: none; }
.sheet {
  list-style: none; margin: 0; padding: 22px 16px 26px; position: relative;
  display: grid; gap: 14px; background: #0b0a09;
}
.sheet::before, .sheet::after { /* sprocket holes, like a strip of negatives */
  content: ""; position: absolute; left: 12px; right: 12px; height: 8px;
  background: repeating-linear-gradient(90deg, rgba(233,225,204,.14) 0 8px, transparent 8px 20px);
}
.sheet::before { top: 6px; }
.sheet::after { bottom: 8px; }
.sheet--covers { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sheet--posters { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.sheet--marks { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sheet--film { grid-template-columns: 1fr; }
.sheet-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }

.frame button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 8px; width: 100%; }
.frame button:focus-visible { outline: 1px dashed var(--accent); outline-offset: 4px; }
.frame__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--soot); }
.frame--poster .frame__img { aspect-ratio: 3 / 4; }
.frame--mark .frame__img { aspect-ratio: 4 / 3; }
.frame--film .frame__img { aspect-ratio: 16 / 7; }
.frame button:hover .frame__img img, .frame button:focus-visible .frame__img img { filter: none; transform: scale(1.04); }
.frame__play {
  position: absolute; inset: auto 8px 8px auto; padding: 4px 8px;
  font: 11px/1 var(--f-mono); background: var(--accent); color: var(--bone);
}
.frame__cap { font-size: 10.5px; line-height: 1.4; letter-spacing: .04em; color: rgba(233,225,204,.6); }
.frame__cap b { display: block; color: var(--bone); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.frame button:hover .frame__cap b { color: var(--accent); }

/* ── viewer ── */
.viewer {
  width: min(1280px, 100vw - 32px); max-width: none; height: min(92vh, 100%); max-height: none;
  margin: auto; padding: 0; border: 1px solid rgba(233,225,204,.2);
  background: var(--void); color: var(--bone);
}
.viewer::backdrop { background: rgba(6,5,4,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr; }
.viewer__bar { display: flex; gap: 18px; align-items: center; padding: 12px 18px; border-bottom: 1px solid rgba(233,225,204,.14); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.viewer__bar button { all: unset; cursor: pointer; padding: 4px 6px; }
.viewer__bar button:hover, .viewer__bar button:focus-visible { color: var(--accent); }
.viewer__bar [data-viewer-pos] { color: var(--sepia); }
.viewer__close { margin-left: auto; }
.viewer__body { display: grid; grid-template-columns: 340px 1fr; min-height: 0; }
.viewer__info { padding: 28px 26px; border-right: 1px solid rgba(233,225,204,.12); overflow-y: auto; }
.viewer__client { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sepia); }
.viewer h2 { margin: 0 0 22px; font: 400 40px/1.02 var(--f-display); }
.viewer__bridge { margin: 0; display: grid; gap: 18px; }
.viewer__bridge dt { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sepia); margin-bottom: 4px; }
.viewer__bridge div + div dt { color: var(--accent); }
.viewer__bridge dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(233,225,204,.88); }
.viewer__meta { margin: 26px 0 0; padding-top: 14px; border-top: 1px dashed rgba(233,225,204,.25); font-size: 12px; line-height: 1.7; color: rgba(233,225,204,.6); }
.viewer__plates { overflow-y: auto; padding: 26px; display: grid; gap: 22px; align-content: start; justify-items: center; overscroll-behavior: contain; }
.viewer__plates img { max-width: 100%; height: auto; display: block; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.vid { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16 / 9; background: #000; }
.vid button {
  all: unset; cursor: pointer; position: absolute; inset: 0; display: grid; place-items: center;
  font: 13px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  background: repeating-linear-gradient(0deg, rgba(233,225,204,.04) 0 1px, transparent 1px 3px);
}
.vid button span { padding: 12px 18px; border: 1px solid var(--accent); }
.vid button:hover span { background: var(--accent); }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid__note { font: 11px/1.4 var(--f-mono); color: rgba(233,225,204,.5); text-align: center; }

/* ── responsive ── */
@media (max-width: 1100px) {
  .entry__open { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.3fr); }
  .entry__id { display: none; }
  .entry__meta { grid-column: 2 / -1; text-align: left; grid-auto-flow: column; justify-content: start; gap: 18px; }
}
@media (max-width: 900px) {
  .arc-hero { padding-top: 120px; }
  .arc-nav { top: 42px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .arc-nav a { flex: none; }
  .reel-ch { padding-top: 80px; }
  .entry__open { grid-template-columns: 120px minmax(0, 1fr); gap: 14px 18px; }
  .entry__bridge, .entry__meta { grid-column: 1 / -1; }
  .entry__meta { grid-auto-flow: row; }
  .sheet-pair { grid-template-columns: 1fr; gap: 0; }
  .sheet--covers { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .viewer { width: 100vw; height: 100dvh; border: 0; }
  .viewer__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .viewer__info { border-right: 0; border-bottom: 1px solid rgba(233,225,204,.12); overflow: visible; }
  .viewer__plates { overflow: visible; padding: 18px; }
  .viewer h2 { font-size: 32px; }
}
@media (max-width: 560px) {
  .reel-ch__head { grid-template-columns: 1fr; }
  .reel-ch__letter { grid-row: auto; font-size: 90px; }
  .entry__plate { padding: 4px; }
  .entry__title { font-size: 24px; }
  .viewer__bar { gap: 10px; font-size: 11px; }
}
@media (hover: none) {
  .entry__plate img, .frame__img img { filter: grayscale(.4) contrast(1.05) sepia(.1); }
}