/* Premium refinements for the article family (the 14 Shop Manual guides and the flagship article),
   loaded after premium-motion.css on these pages only. Mart's Tools - No Video PSD stays the visual
   authority; the motion is Melissa's (Saqib, 2026-09-29). Hooks: scripts/premium/article.py.
   Only transform, opacity and clip-path move; nothing here hides content. */

/* ---------- hero plate: the hero photo as an image layer, so it can settle and drift like Melissa's ----------
   The layer repeats the background sizing of src/editorial-continuity.css at every breakpoint and sits
   under the phone veil (::after, z-index -1). The background goes only where the layer exists. */
/* The photo itself (2026-10-02 fix round, C2): full colour; src/editorial-continuity.css adds the chevron and the
   gradient that stops. Set here, not in the shared file, so no park microsite carries it. Phones: plain navy. */
/* Each page's own photo (2026-10-03 polish, P3): scripts/premium/_editorial.py writes --uf-ed-photo on the hero. */
body.uf-site[data-page-family=article] .uf-ed-hero{background-image:var(--uf-ed-photo,url('../pages/melissa/building-101.jpg'));background-position:62% 70%;background-size:cover}
@media (max-width:800px){body.uf-site[data-page-family=article] .uf-ed-hero{background-image:none}}
body.uf-site[data-page-family=article] .uf-ed-hero:has(>.uf-ed-plate){background-image:none}
body.uf-site[data-page-family=article] .uf-ed-plate{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
body.uf-site[data-page-family=article] .uf-ed-plate-drift{position:absolute;inset:0}
body.uf-site[data-page-family=article] .uf-ed-plate img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 70%}

/* ---------- "Keep going" cards: Melissa's photo tile hover (1.04 over .8s), pointer devices only ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.uf-site[data-page-family=article] .rel .rc .rph img{transition:scale .8s var(--mx-ease)}
  body.uf-site[data-page-family=article] .rel .rc:is(:hover,:focus-visible) .rph img{scale:1.04}
}

/* ---------- flagship article: the contents list (961px and wider, where it is a sticky column) ----------
   One orange indicator slides to the section being read (src/premium/article.js), on the engine's
   ease, instead of the orange rule jumping link to link. It exists only while the engine runs. */
@media (min-width:961px){
  body.uf-site[data-page=article] .toc .uf-toc-ink{position:absolute;left:0;top:0;width:2px;height:1px;background:var(--uf-orange,#ff8405);transform-origin:0 0;transform:scaleY(0);transition:transform .5s var(--mx-ease);pointer-events:none}
  html.uf-toc-ink-on body.uf-site[data-page=article] .toc a.on:not(:hover){border-left-color:rgba(0,21,35,.12)}
  /* The sticky column follows the header: when the header tucks away, the list rises into the space
     it left, on the header's own curve (.55s). */
  body.uf-site[data-page=article] .uf-editorial .toc{transition:translate .55s var(--mx-ease)}
  body.uf-site[data-page=article]:has(.uf-header.mx-hdr-hide) .uf-editorial .toc{translate:0 calc(24px - var(--uf-toc-top,110px))}
}
@media (prefers-reduced-motion:reduce){
  body.uf-site[data-page=article] .toc .uf-toc-ink,body.uf-site[data-page=article] .uf-editorial .toc{transition:none}
}

/* The answer line under a question heading (Rick, audit C08-28): the first sentence answers the question. */
.uf-site .art p.uf-ans{font-weight:600;color:var(--uf-navy,#001523)}
/* Sources: official outbound links at the end of a guide (Rick, audit C08-05). */
.uf-site .art .uf-sources{margin-top:56px;padding-top:28px;border-top:2px solid var(--uf-orange,#ff7d01)}
.uf-site .art .uf-sources h2{font-size:22px;margin:0 0 10px}
.uf-site .art .uf-sources p{font-size:15px;margin:0 0 14px;color:#526570}
.uf-site .art .uf-sources ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.uf-site .art .uf-sources li{margin:0;font-size:16px;line-height:1.5}
.uf-site .art .uf-sources li a{display:inline-flex;align-items:center;min-height:44px;color:#ae5000;font-weight:700;text-decoration:underline;text-underline-offset:3px;border-bottom:0}
.uf-site .art .uf-sources .by{margin-left:10px;font-size:13px;color:#526570}
.uf-site .art .uf-sources .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}