/* ═══════════════════════════════════════════════════════════════
   ORDJÉ · The Editorial Archive — the reader
   ───────────────────────────────────────────────────────────────
   A publication opened on screen, not a webpage in a frame.
   One trim for the family: page ratio 0.707 (the cover's own),
   spread 1.414. Motion is one dry cross-turn — the incoming
   spread slides over the outgoing with a narrow fold shadow,
   380–460ms, weighted. No curl, no 3D, no theatrics.
   ═══════════════════════════════════════════════════════════════ */

.reader { position: fixed; inset: 0; z-index: 62; }
.reader[hidden] { display: none; }

/* Each issue is a catalogue with its own paper; the reader inherits
   the issue's personality through these variables (set per issue). */
.book {
  --paper: #ece3d3;
  --endpaper: #e6dbc8;
  --ink: 52, 38, 26;
}

/* the room dims a little further while the book is open */
.reader-scrim {
  position: absolute; inset: 0;
  background: rgba(22, 16, 10, .32);
  opacity: 0; transition: opacity 600ms ease;
}
.reader.is-in .reader-scrim { opacity: 1; }

/* ─── the book ─── */
.book {
  position: absolute; overflow: hidden;
  background: var(--paper);
  box-shadow: 0 44px 96px -32px rgba(0, 0, 0, .58);
  will-change: transform, clip-path;
}
.spread-stack { position: absolute; inset: 0; }

.spread {
  position: absolute; inset: 0;
  background: var(--paper);
  display: flex;
}
.spread.endpaper { background: var(--endpaper); }

/* the paper itself — a breath of grain, never a filter on the work */
.grain {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: .045; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.page { position: relative; flex: 1 1 50%; overflow: hidden; }

/* paper: media either bleeds the page or sits as a plate */
.media-bleed { position: absolute; inset: 0; }
.media-bleed img, .media-bleed video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.media-plate {
  position: absolute; inset: 8%;
  display: flex; align-items: center; justify-content: center;
}
.media-plate img, .media-plate video {
  max-width: 100%; max-height: 100%; display: block;
  box-shadow: 0 1px 0 rgba(90, 70, 45, .10), 0 10px 26px -14px rgba(60, 40, 20, .28);
}
/* a full-bleed spread crosses the gutter as one sheet */
.spread-full { position: absolute; inset: 0; }
.spread-full img, .spread-full video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* the centre gutter — always above the paper, beneath nothing */
.gutter {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 7%;
  transform: translateX(-50%); pointer-events: none; z-index: 4;
  background: linear-gradient(90deg,
    rgba(60, 40, 20, 0) 0%, rgba(60, 40, 20, .03) 32%,
    rgba(38, 25, 12, .10) 50%,
    rgba(60, 40, 20, .03) 68%, rgba(60, 40, 20, 0) 100%);
}
/* single-page mode implies its facing page at the outer edge */
.book.single .gutter { display: none; }
.book.single .spread .page-off { display: none; }
.book.single::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 10px;
  background: linear-gradient(90deg, rgba(60,40,20,0), rgba(38,25,12,.18));
  pointer-events: none; z-index: 4;
}

/* the incoming sheet carries a fold shadow on its leading edge */
.spread.turning-in { box-shadow: -18px 0 34px -18px rgba(30, 20, 10, .45); }

/* ─── composed spreads: work placed by hand, allowed to cross the
   gutter, start halfway down, or bleed off the trim ─── */
.composed-item { position: absolute; overflow: hidden; }
.composed-item img, .composed-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.composed-item.on-paper {
  box-shadow: 0 1px 0 rgba(90, 70, 45, .10), 0 12px 30px -16px rgba(60, 40, 20, .32);
}

/* ─── title, colophon — the masthead's language: tracked caps,
   no decorative serif, type that disappears ─── */
.title-page {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 11% 12% 15%;
}
.title-page .t-no {
  font-size: clamp(8px, .95vh, 10px); letter-spacing: .48em; text-indent: .02em;
  text-transform: uppercase; font-weight: 500; color: rgba(var(--ink), .42);
  margin-bottom: 1.6em;
}
.title-page .t-name {
  font-size: clamp(11px, 1.5vh, 16px); letter-spacing: .58em; text-indent: .02em;
  text-transform: uppercase; font-weight: 500; color: rgba(var(--ink), .88);
}
.colophon-page {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2em; text-align: center; padding: 12%;
}
.colophon-page .c-mast {
  font-size: clamp(10px, 1.35vh, 14px); letter-spacing: .6em; text-indent: .6em;
  text-transform: uppercase; font-weight: 500; color: rgba(var(--ink), .85);
}
.colophon-page .c-line {
  font-size: clamp(7px, .9vh, 10px); letter-spacing: .32em; text-indent: .32em;
  text-transform: uppercase; color: rgba(var(--ink), .5); line-height: 2.3;
}

/* ─── quiet controls ─── */
.zone {
  position: absolute; top: 0; bottom: 0; width: 38%;
  background: none; border: 0; padding: 0; z-index: 6;
  cursor: pointer; outline: none;
}
.zone:focus-visible { box-shadow: inset 0 0 0 1px rgba(80, 62, 44, .35); }
.zone-prev { left: 0; width: 30%; }
.zone-next { right: 0; }

.reader-folio {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; justify-content: space-between; align-items: baseline;
  pointer-events: none; opacity: 0; transition: opacity 700ms ease 200ms;
}
.reader.is-in .reader-folio { opacity: 1; }
.reader-folio .rf-issue, .reader-folio .rf-count {
  font-size: 9px; letter-spacing: .34em; text-indent: .02em;
  text-transform: uppercase; color: rgba(244, 241, 234, .48);
  white-space: nowrap;
}
.reader-close {
  position: absolute; top: 78px; right: 3vw; z-index: 8;
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: 1px solid rgba(244, 241, 234, .34);
  color: rgba(244, 241, 234, .72); cursor: pointer;
  font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity 500ms ease 250ms, border-color 200ms ease, color 200ms ease;
}
.reader.is-in .reader-close { opacity: 1; }
.reader-close:hover, .reader-close:focus-visible {
  border-color: rgba(244, 241, 234, .7); color: rgba(244, 241, 234, 1);
}

/* sound toggle — infrastructure only; hidden until a film's
   original track is ratified (per-film `sound: true`) */
.sound-toggle {
  position: absolute; right: 4%; bottom: 4%; z-index: 7;
  background: none; border: 1px solid rgba(244, 241, 234, .4);
  border-radius: 50%; width: 34px; height: 34px;
  color: rgba(244, 241, 234, .75); cursor: pointer; font-size: 11px;
}

/* the front board, used while opening and closing */
.board {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  z-index: 5; overflow: hidden; background: #ece3d3;
}
.board img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book.single .board { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .spread.turning-in { box-shadow: none; }
}