/* ==========================================================================
   enhanced.css - "Imprint": printed-ledger detailing layer (local variant).
   Loaded after style.css. Additive only: it uses pseudo-elements verified free
   in style.css (.section-head::before, .card::after, body::after,
   .detail-meta::before, .timeline .t::after, .filter-btn::after) and data-
   attributes written by enhanced.js. Every measure is rem/vw (1rem = 16px, V17
   fixed root); px appears only for 1-2px hairlines. Deleting the <link> and the
   <script> restores the base v17 page exactly. The custom cursor is off in V17,
   so this layer carries no cursor rules.
   ========================================================================== */

/* ---- 0. Motion contract: one switch resolves every initial state -------- */
:root {
  --enh: 1;
  --rule-hair: 1px;
  --tick-h: .75rem;
  --frame-inset: -.625rem;
  --frame-radius: 1.375rem;
  --grain-alpha: .055;
  --turn-dir: 1;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .07 0 0 0 0 .06 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { :root { --enh: 0; } }
html.enh-off { --enh: 0; }

/* ---- 1. Page material: the cover paper stock continues on the pages ----- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  background: var(--grain) 0 0 / 12.5rem 12.5rem repeat;
  mix-blend-mode: multiply;
  opacity: var(--grain-alpha);
  transition: opacity calc(var(--enh) * .6s) ease;
}
body.book-closed::after,
body.detail-open::after,
body.menu-open::after,
body:has(.lightbox:not([hidden]))::after { opacity: 0; }
@media (max-width: 820px) {
  :root { --grain-alpha: .035; }
  body::after { mix-blend-mode: normal; }
}

/* ---- 2. Reference numerals set as tabular lining figures ---------------- */
.card-idx,
.hero-stats b,
.timeline .t,
.detail-position b,
.deck-note-index,
.award-list li::before,
.still-frame figcaption span:first-child,
.card-cat span:last-child,
.detail-meta span,
.authority-trace span,
.research-status span,
.filter-btn::after,
.card::after {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "case" 1;
}

/* ---- 3. Oxford rules: hairline under the ink rule, registration ticks --- */
.section-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: var(--tick-h);
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 100% var(--rule-hair) no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / var(--rule-hair) 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / var(--rule-hair) 100% no-repeat;
  transform-origin: 0 0;
  transform: scaleX(calc(1 - var(--enh)));
  transition: transform calc(var(--enh) * .52s) var(--ease-out) .12s;
}
.section-head.on::before,
.section-head:not(.rv)::before { transform: none; }

.detail-meta { position: relative; }
.detail-meta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: var(--rule-hair);
  background: var(--ink);
}
.media-label::after {
  height: .5rem;
  align-self: center;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 50% / 100% var(--rule-hair) no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / var(--rule-hair) 100% no-repeat;
}

/* ---- 4. Evidence and archive cards: dormant plate-mark frame + folio ---- */
.card::after {
  content: attr(data-folio) / "";
  position: absolute;
  inset: var(--frame-inset);
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: .5rem .75rem;
  border: var(--rule-hair) solid rgba(17, 17, 15, .26);
  border-radius: var(--frame-radius);
  color: var(--ink-faint);
  font: 700 .5625rem/1 var(--mono);
  letter-spacing: .16em;
  opacity: 0;
  transform: scale(.985);
  transition: opacity calc(var(--enh) * .18s) ease, transform calc(var(--enh) * .18s) ease;
}
.card.on:hover::after,
.card.on:focus-visible::after {
  opacity: 1;
  transform: none;
  transition: opacity calc(var(--enh) * .26s) var(--ease-out), transform calc(var(--enh) * .26s) var(--ease-out);
}
/* Cover image settles on inspect: a print developing, not an app zoom. */
.card .card-par img { transition: transform calc(var(--enh) * 1.1s) var(--ease-out), filter calc(var(--enh) * .9s) ease; }
.card.on:hover .card-par img,
.card.on:focus-visible .card-par img { transform: scale(1.025); }

/* Evidence cards state their working mode on the face (from PROJECTS.workType). */
.card-type {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  align-items: baseline;
  margin-top: .875rem;
  padding-top: .625rem;
  border-top: var(--rule-hair) dotted var(--line);
}
.card-type b {
  color: var(--accent-deep);
  font: 700 .625rem/1.6 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.card-type span {
  color: var(--ink-soft);
  font: 600 clamp(.75rem, .85vw, .8125rem)/1.6 var(--sans);
  letter-spacing: .01em;
}
.card.rv .card-body > :nth-child(6) { transition-delay: calc(var(--card-delay, 0ms) + .48s); }

/* ---- 5. Research ledgers: registration closes on inspect; limit tile ---- */
.research-card::before {
  transition: inset calc(var(--enh) * .24s) var(--ease-out), border-color calc(var(--enh) * .24s) ease;
}
.research-card:hover::before,
.research-card:focus-within::before {
  inset: .625rem;
  border-color: rgba(17, 17, 15, .42);
}
.research-card dt { transition: color calc(var(--enh) * .2s) ease; }
.research-card:hover dt,
.research-card:focus-within dt { color: var(--accent-deep); }

.research-card dl > div:last-child {
  position: relative;
  padding: .875rem .9375rem 1rem;
  border: var(--rule-hair) dashed rgba(239, 74, 50, .58);
  border-radius: 1rem;
  background: rgba(239, 74, 50, .045);
  transition: border-color calc(var(--enh) * .24s) ease, background-color calc(var(--enh) * .24s) ease;
}
.research-card dl > div:last-child dt { color: var(--accent-deep); }
.research-card dl > div:last-child dt::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: .05em;
}
.research-card:hover dl > div:last-child,
.research-card:focus-within dl > div:last-child {
  border-style: solid;
  background: rgba(239, 74, 50, .07);
}

/* ---- 6. About: table-of-contents leaders between date and entry --------- */
.timeline .t {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.timeline .t::after {
  content: "";
  flex: 1 1 .75rem;
  border-bottom: var(--rule-hair) dotted var(--line);
  transform: translateY(-.35em);
  transition: border-color calc(var(--enh) * .15s) ease;
}
.timeline li:hover .t::after { border-color: var(--accent); }

/* ---- 7. Archive toolbar: per-category counts as superior figures -------- */
.filter-btn { position: relative; }
.filter-btn::after {
  content: attr(data-count) / "";
  position: relative;
  top: -.3em;
  color: var(--ink-faint);
  font: 700 .5625rem/1 var(--mono);
  letter-spacing: .1em;
  opacity: 0;
  transform: translateY(.25rem);
  transition: opacity calc(var(--enh) * .18s) ease, transform calc(var(--enh) * .18s) var(--ease-out);
}
.filter-btn:hover::after,
.filter-btn:focus-visible::after,
.filter-btn.active::after { opacity: 1; transform: none; }
.filter-btn.active::after { color: var(--accent); }

/* ---- 8. Detail overlay: prev/next turns the page ------------------------ */
@keyframes enhTurn {
  from { opacity: 0; transform: translate3d(calc(var(--turn-dir) * 2.5rem), 0, 0); }
  to   { opacity: 1; transform: none; }
}
.detail-inner.is-turning {
  animation: enhTurn calc(var(--enh) * .56s) var(--ease-out) both;
}
/* Gallery images develop like prints as they enter. */
.detail-media .masonry img.rv,
.detail-media .still-frame.rv img {
  filter: saturate(.7) contrast(.94);
  transition: filter calc(var(--enh) * 1.1s) ease;
}
.detail-media .masonry img.rv.on,
.detail-media .still-frame.rv.on img { filter: none; }

/* ---- 9. Ink that prints into the paper; marquee rests under the hand ---- */
.research-status span,
.deck-note-kicker i { mix-blend-mode: multiply; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---- 11. Reduced motion: nothing animates, every state is final --------- */
@media (prefers-reduced-motion: reduce) {
  .section-head::before { transform: none; }
  .detail-inner.is-turning { animation: none; }
  .card .card-par img,
  .detail-media .masonry img.rv,
  .detail-media .still-frame.rv img { transition: none; filter: none; transform: none; }
}