/* ============================================================================
   author.css — the Author view (#view-author): 自序, the compiler's preface
   ----------------------------------------------------------------------------
   Mission (問) argues why the archive exists, in the institution's voice. This
   is its human counterpart: 序 — the author's own preface, the one place a
   scholarly work lets the compiler step out from behind the sources and say,
   in the first person, who he is and why he could not leave it unbuilt.

   It borrows Mission's SPINE on purpose — the same four-movement editorial
   rhythm, the single oversized 漢字 watermark, the closing name-chop and the
   live 五行 signature — so it reads as a sibling chapter. It DIVERGES in
   composition — Mission opens text-only; this opens as a portrait/name split,
   and carries the site's first photographs — so it is never a Mission clone.

   Same vocabulary: Spectral / Source Serif 4 / Inter / Noto Serif TC, and the
   seasonal 五行 accent through the --lib-* bridge library.css sets on .oa-lib,
   so every colour here is phase- and dark-correct for free.

   TWO HOUSE LAWS (identical to mission.css):
   1. Content is fully visible with NO JavaScript and under reduced motion.
      Every hidden initial state is gated on `html.oa-author-live`, a class
      motion-author.js adds ONLY once its IntersectionObserver is live.
   2. The words move, the portrait only settles. Type rises out of its clip;
      the photograph wipes in once and holds; nothing loops.
   ============================================================================ */

#view-author{
  --au-gutter: clamp(22px, 6vw, 96px);
  font-family:'Source Serif 4', Georgia, serif;
  color: var(--lib-t1, #14110f);
}

#view-author .au-wrap{
  max-width:1180px; margin:0 auto;
  padding-left:var(--au-gutter); padding-right:var(--au-gutter);
}

/* the microscopic tracked label that opens each movement */
#view-author .au-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Inter', sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--lib-acc, #9e2b25);
  margin:0 0 30px;
}
#view-author .au-eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.55;
}

/* --- the shared portrait frame: a photograph seated in the site's hairline,
   flat paper, no card chrome. If the image is missing the mat still reads as an
   intentional plate rather than a broken box. --- */
/* a dark photo-well, held dark in BOTH themes (a passe-partout does not invert),
   with a whisper of the seasonal accent so an empty plate still reads warm and
   intentional rather than like a broken box */
#view-author .au-plate{
  position:relative; overflow:hidden;
  border:1px solid var(--lib-bd, #e4e0d8);
  background:
    radial-gradient(130% 96% at 50% 6%,
      color-mix(in srgb, #241d18 88%, var(--lib-acc,#9e2b25)) 0%, #191410 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
#view-author .au-plate img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
}
/* a faint 序 watermark sits in an empty plate; any loaded photo (z-index 1) hides it */
#view-author .au-plate::before{
  content:"序"; position:absolute; z-index:0; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif TC', serif; font-weight:900; font-size:38%;
  color:rgba(243,239,231,.05); pointer-events:none; user-select:none;
}
/* a faint top/bottom breath so the photo settles rather than floats */
#view-author .au-plate::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,8,6,.26), transparent 20%, transparent 80%, rgba(10,8,6,.32));
}
#view-author .au-plate-cap{
  position:absolute; z-index:3; left:14px; bottom:12px;
  font-family:'Inter', sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, #f3efe7 82%, transparent);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* ============================================================================
   MOVEMENT I — 序 · THE PORTRAIT (hero, the name + the first photograph)
   ============================================================================ */
#view-author .au-hero{
  position:relative; overflow:hidden;
  min-height:100dvh; display:flex; align-items:center;
  border-bottom:1px solid var(--lib-bd, #e4e0d8);
}
#view-author .au-hero-mark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-52%);
  font-family:'Noto Serif TC', serif; font-weight:900;
  font-size:min(72vw, 700px); line-height:.8;
  color:var(--lib-t1, #14110f); opacity:.04;
  pointer-events:none; user-select:none; white-space:nowrap; z-index:0;
}
html[data-theme="dark"] #view-author .au-hero-mark{ opacity:.055; }

#view-author .au-hero-inner{
  position:relative; z-index:1; width:100%;
  padding-top:clamp(116px, 18vh, 176px); padding-bottom:clamp(84px, 13vh, 132px);
}
#view-author .au-hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(38px,6vw,72px);
  align-items:center;
}
@media (min-width:900px){
  #view-author .au-hero-grid{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.82fr);
    gap:clamp(48px,6vw,88px);
  }
}

#view-author .au-hero-lead{
  font-family:'Source Serif 4', serif; font-size:clamp(16px,2.1vw,20px);
  line-height:1.6; color:var(--lib-t3, #7a736b); margin:0 0 26px; max-width:40ch;
}
#view-author .au-name{ margin:0; }
#view-author .au-name-han{
  display:block; font-family:'Noto Serif TC', serif; font-weight:800;
  font-size:clamp(52px, 8.6vw, 116px); line-height:.96; letter-spacing:.02em;
  color:var(--lib-t1, #14110f);
}
#view-author .au-name-rom{
  display:block; margin-top:clamp(12px,1.6vw,18px);
  font-family:'Spectral', serif; font-weight:500; font-style:italic;
  font-size:clamp(20px,2.6vw,30px); letter-spacing:.01em;
  color:var(--lib-acc, #9e2b25);
}
#view-author .au-name-lat{
  display:block; margin-top:6px;
  font-family:'Source Serif 4', serif; font-weight:600;
  font-size:clamp(16px,1.7vw,19px); letter-spacing:.01em;
  color:var(--lib-t2, #4b4540);
}
#view-author .au-role{
  display:block; margin-top:clamp(18px,2.2vw,24px);
  font-family:'Inter', sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lib-t3, #7a736b);
}
#view-author .au-name-gloss{
  margin:clamp(22px,2.6vw,30px) 0 0; max-width:42ch;
  font-family:'Source Serif 4', serif; font-size:clamp(14.5px,1.4vw,16px);
  line-height:1.66; color:var(--lib-t2, #4b4540);
}
#view-author .au-name-gloss .au-han{ font-family:'Noto Serif TC', serif; color:var(--lib-t1,#14110f); }
#view-author .au-name-gloss em{ font-style:italic; color:var(--lib-acc,#9e2b25); }

/* the hero photograph — the dusk figure, kept close to natural */
#view-author .au-hero-portrait{ margin:0; }
#view-author .au-hero-portrait .au-plate{ aspect-ratio:3 / 4; border-radius:2px; }
#view-author .au-hero-portrait .au-plate img{
  filter:contrast(1.03) saturate(1.03);
  transform:scale(1.04) translate(calc(var(--px,0) * 7px), calc(var(--py,0) * 7px));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
#view-author .au-hero-fignote{
  margin:14px 2px 0; max-width:40ch;
  font-family:'Source Serif 4', serif; font-size:12.5px; line-height:1.55;
  color:var(--lib-t3, #7a736b); font-style:italic;
}
/* photo credit — a real photographer, credited plainly under the frame */
#view-author .au-credit{
  margin:7px 2px 0;
  font-family:'Inter', sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.07em; color:var(--lib-t4, #9b938a);
}

#view-author .au-scrollcue{
  position:absolute; left:var(--au-gutter); bottom:34px; z-index:1;
  display:flex; align-items:center; gap:12px;
  font-family:'Inter', sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--lib-t3, #7a736b);
}
#view-author .au-scrollcue-line{
  display:block; width:1px; height:34px; background:currentColor; opacity:.55;
  transform-origin:top;
}
@media (max-width:899px){ #view-author .au-scrollcue{ display:none; } }

/* ============================================================================
   MOVEMENT II — WHY THIS EXISTS (the origin, first person)
   A single manuscript column — deliberately NOT Mission's answer grid — so the
   voice carries alone; the face photograph rides alongside the prose.
   ============================================================================ */
#view-author .au-origin{
  padding-top:clamp(92px, 16vh, 160px); padding-bottom:clamp(92px, 16vh, 160px);
  border-bottom:1px solid var(--lib-bd, #e4e0d8);
}
#view-author .au-origin-grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(40px,6vw,72px);
  align-items:start;
}
@media (min-width:920px){
  #view-author .au-origin-grid{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:clamp(52px,6vw,96px);
  }
}
#view-author .au-lead{
  font-family:'Spectral', serif; font-weight:500;
  font-size:clamp(24px, 3.5vw, 42px); line-height:1.2; letter-spacing:-.4px;
  margin:0 0 clamp(26px,3vw,38px); max-width:22ch; text-wrap:balance;
  color:var(--lib-t1, #14110f);
}
#view-author .au-lead em{ font-style:italic; color:var(--lib-acc, #9e2b25); }
#view-author .au-prose p{
  font-family:'Source Serif 4', serif; font-size:clamp(16px,1.35vw,18px);
  line-height:1.72; color:var(--lib-t2, #4b4540); margin:0 0 1.15em; max-width:60ch;
}
#view-author .au-prose p:last-child{ margin-bottom:0; }
#view-author .au-prose .au-han{ font-family:'Noto Serif TC', serif; color:var(--lib-t1,#14110f); }
#view-author .au-pull{
  margin:clamp(30px,3.4vw,42px) 0 0; padding-left:clamp(18px,2vw,26px);
  border-left:2px solid var(--lib-acc, #9e2b25);
  font-family:'Spectral', serif; font-style:italic; font-weight:500;
  font-size:clamp(18px,1.9vw,23px); line-height:1.42; color:var(--lib-t1, #14110f);
  max-width:34ch;
}

/* the face — warm, quiet, seated into the paper; treatment tunable once the
   real file lands. Kept restrained (not a hard duotone) so a candid frame reads
   as a portrait, not a filter. */
#view-author .au-origin-aside{ position:sticky; top:96px; }
#view-author .au-face .au-plate{ aspect-ratio:4 / 5; border-radius:2px; }
/* the photograph is shown unedited — no colour filter, no overlay */
#view-author .au-face .au-plate img{
  /* show the full frame, not a face crop — plate is 4/5, photo 3/4, so cover
     trims only a whisper top and bottom */
  object-position:50% 42%;
}
/* drop the top/bottom darkening the shared plate paints over its photo, so this
   frame reads as the raw picture rather than a treated one */
#view-author .au-face .au-plate::after{ display:none; }
#view-author .au-face-cap{
  margin:14px 2px 0;
  font-family:'Inter', sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lib-t3, #7a736b);
}
@media (max-width:919px){ #view-author .au-origin-aside{ position:static; } }

/* ============================================================================
   MOVEMENT III — THE HAND BEHIND IT (person → the archive's parts)
   A call-and-response ledger: each thing here began as a private wish. The wish
   on the left, the piece it became on the right, as a live link. A distinct
   composition from Mission's figure rows — no drawn diagrams, no hairline grid.
   ============================================================================ */
#view-author .au-hand{
  padding-top:clamp(88px, 14vh, 148px); padding-bottom:clamp(88px, 14vh, 148px);
  border-bottom:1px solid var(--lib-bd, #e4e0d8);
}
#view-author .au-hand-head{ margin-bottom:clamp(34px,5vw,60px); max-width:60ch; }
#view-author .au-hand-head h2{
  font-family:'Spectral', serif; font-weight:800;
  font-size:clamp(26px,3.6vw,44px); line-height:1.08; letter-spacing:-.8px;
  margin:0 0 clamp(16px,1.8vw,22px); color:var(--lib-t1, #14110f);
  text-wrap:balance; max-width:20ch;
}
#view-author .au-hand-head p{
  font-family:'Source Serif 4', serif; font-size:clamp(16px,1.35vw,18px);
  line-height:1.7; color:var(--lib-t2, #4b4540); margin:0; max-width:56ch;
}

#view-author .au-wishes{ display:block; }
#view-author .au-wish{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(14px,2vw,26px);
  align-items:baseline; padding:clamp(26px,3.4vw,40px) 0;
  border-top:1px solid var(--lib-bd, #e4e0d8);
}
#view-author .au-wish:first-child{ border-top:none; }
@media (min-width:820px){
  #view-author .au-wish{
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:clamp(40px,5vw,80px);
  }
}
#view-author .au-wish-q{
  margin:0; font-family:'Spectral', serif; font-style:italic; font-weight:500;
  font-size:clamp(19px,2.05vw,27px); line-height:1.34; letter-spacing:-.2px;
  color:var(--lib-t1, #14110f); text-wrap:pretty;
}
#view-author .au-wish-a{ align-self:center; }
#view-author .au-wish-became{
  display:block; font-family:'Inter', sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lib-t2, #4b4540);
  margin:0 0 10px;
}
#view-author .au-link{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  background:none; border:none; padding:0; text-align:left;
  font-family:'Spectral', serif; font-weight:700;
  font-size:clamp(18px,1.7vw,22px); line-height:1.15; letter-spacing:-.3px;
  color:var(--lib-t1, #14110f);
  transition:color .4s var(--lib-ease2, cubic-bezier(.32,.72,0,1));
}
#view-author .au-link .au-link-han{ font-family:'Noto Serif TC', serif; color:var(--lib-acc,#9e2b25); font-weight:800; }
#view-author .au-link-i{
  display:inline-grid; place-items:center; width:28px; height:28px; flex:none;
  border-radius:50%; font-size:13px; color:var(--lib-acc, #9e2b25);
  border:1px solid color-mix(in srgb, var(--lib-acc,#9e2b25) 40%, transparent);
  transition:transform .5s var(--lib-ease2, cubic-bezier(.32,.72,0,1)),
             background .4s var(--lib-ease2, cubic-bezier(.32,.72,0,1)),
             color .4s var(--lib-ease2, cubic-bezier(.32,.72,0,1));
}
#view-author .au-link:hover{ color:var(--lib-acc, #9e2b25); }
#view-author .au-link:hover .au-link-i{
  transform:translate(3px,-1px); background:var(--lib-acc,#9e2b25); color:#f3efe7;
}
html[data-theme="dark"] #view-author .au-link:hover .au-link-i{ color:#1a1410; }
#view-author .au-hand-foot{
  margin-top:clamp(34px,4.4vw,56px); padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--lib-bd, #e4e0d8);
  font-family:'Source Serif 4', serif; font-size:clamp(15px,1.2vw,16.5px);
  line-height:1.66; color:var(--lib-t3, #7a736b); max-width:60ch;
}
#view-author .au-hand-foot em{ font-style:italic; color:var(--lib-t2,#4b4540); }
#view-author .au-inline-link{
  color:var(--lib-acc, #9e2b25); text-decoration:none; cursor:pointer;
  background:none; border:none; padding:0; font:inherit;
  border-bottom:1px solid color-mix(in srgb, var(--lib-acc,#9e2b25) 40%, transparent);
  transition:border-color .3s ease;
}
#view-author .au-inline-link:hover{ border-color:var(--lib-acc,#9e2b25); }

/* ============================================================================
   MOVEMENT IV — THE PREFACE'S CLOSE (the vow, the seal, the signature)
   Rhymes with Mission's close on purpose: the same chop pressed once, the same
   live 五行 line — the signature of the same hand.
   ============================================================================ */
#view-author .au-close{
  padding-top:clamp(96px, 17vh, 176px); padding-bottom:clamp(108px, 18vh, 180px);
  text-align:center;
}
#view-author .au-close-inner{ max-width:700px; margin:0 auto; }
#view-author .au-vow-final{
  font-family:'Spectral', serif; font-weight:500; font-style:italic;
  font-size:clamp(23px,3.3vw,40px); line-height:1.28; letter-spacing:-.4px;
  margin:0 auto clamp(44px,6vw,64px); color:var(--lib-t1, #14110f);
  max-width:640px; text-wrap:balance;
}
#view-author .au-vow-final em{ font-style:italic; color:var(--lib-acc, #9e2b25); }

/* the seal is the LOGO itself, given depth — the same rounded mark as the
   header, extruded into a turnable 3D tile. No rectangular frame: the tile IS
   the logo, matched to its own aspect (340:520) and corner radius (rx 48). Its
   thickness is a z-stack of the logo's rounded silhouette (built by
   motion-author.js), so the rounded corners are preserved through the depth.
   Drag to turn; it idles with a slow rotation. Without JS / reduced motion it
   rests as the flat logo, slightly turned. */
#view-author .au-seal-wrap{
  display:flex; justify-content:center; margin:0 0 clamp(30px,5vw,46px);
}
#view-author .au-med-mount{ perspective:1150px; }         /* the fade rides here, not on the 3D tile (opacity would flatten it) */
#view-author .au-medallion{
  --au-w:clamp(92px,10.5vw,118px);
  --au-h:calc(var(--au-w) * 520 / 340);
  --au-d:clamp(13px,1.5vw,18px);
  --au-r:calc(var(--au-w) * 48 / 340);
  --au-lit:#ea6a44; --au-deep:#9c2c17;   /* fire default; motion-author.js sets these per 五行 phase */
  position:relative; width:var(--au-w); height:var(--au-h);
  transform-style:preserve-3d; transform:rotateX(-6deg) rotateY(-20deg);
  cursor:grab; touch-action:pan-y; will-change:transform;
}
#view-author .au-medallion:active{ cursor:grabbing; }
#view-author .au-medallion .au-med-face{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:var(--au-r); display:block;
  /* no backface-visibility:hidden — the opaque slab body already occludes the
     far face, and hiding it culled the back glyph at some angles */
}
#view-author .au-medallion .au-med-front{ transform:translateZ(calc(var(--au-d) / 2)); }
/* the back carries the season's live 五行 glyph on a matching lacquer tile,
   with the logo's inner ring; motion via library.js paintPhase() keeps it current */
#view-author .au-medallion .au-med-back{
  transform:translateZ(calc(var(--au-d) / -2)) rotateY(180deg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--au-deep) 85%, #000) 0%,
    color-mix(in srgb, var(--au-deep) 52%, #000) 100%);
  box-shadow:inset 0 2px 12px rgba(255,255,255,.28), inset 0 -14px 30px rgba(0,0,0,.4);
}
#view-author .au-medallion .au-med-back::before{
  content:""; position:absolute; inset:11%;
  border-radius:calc(var(--au-r) * .68);
  border:1.5px solid rgba(246,234,214,.5);
}
#view-author .au-medallion .au-med-phase{
  font-family:'Noto Serif TC', serif; font-weight:800; line-height:1;
  font-size:calc(var(--au-w) * .42); color:#f6ead6;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
/* the extruded body — dark lacquer slabs sharing the logo's rounded silhouette;
   motion-author.js stamps them out between front and back */
#view-author .au-medallion .au-med-slab{
  position:absolute; inset:0; border-radius:var(--au-r);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--au-deep) 68%, #000),
    color-mix(in srgb, var(--au-deep) 45%, #000));
}

#view-author .au-sign{
  display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 15px;
  font-family:'Inter', sans-serif; font-size:13px; color:var(--lib-t3, #7a736b);
  margin-bottom:clamp(20px,2.6vw,28px);
}
#view-author .au-sign .au-sign-han{ font-family:'Noto Serif TC', serif; color:var(--lib-t2,#4b4540); }
#view-author .au-sign .au-dot{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; }
#view-author .au-sign .au-live-han{ color:var(--lib-acc, #9e2b25); font-family:'Noto Serif TC', serif; }

#view-author .au-contact{
  font-family:'Source Serif 4', serif; font-size:clamp(14.5px,1.2vw,16px);
  line-height:1.6; color:var(--lib-t3, #7a736b); margin:0 0 clamp(40px,5vw,54px);
}
#view-author .au-contact a{
  color:var(--lib-acc, #9e2b25); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--lib-acc,#9e2b25) 40%, transparent);
  transition:border-color .3s ease;
}
#view-author .au-contact a:hover{ border-color:var(--lib-acc,#9e2b25); }

#view-author .au-cta{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
#view-author .au-btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Inter', sans-serif; font-size:15px; font-weight:600;
  padding:15px 16px 15px 26px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; text-decoration:none;
  transition:background .5s var(--lib-ease2, cubic-bezier(.32,.72,0,1)),
             color .5s var(--lib-ease2, cubic-bezier(.32,.72,0,1)),
             border-color .5s var(--lib-ease2, cubic-bezier(.32,.72,0,1)),
             transform .4s var(--lib-ease2, cubic-bezier(.32,.72,0,1));
}
#view-author .au-btn:active{ transform:scale(.975); }
#view-author .au-btn-solid{ background:var(--lib-acc, #9e2b25); color:#f3efe7; }
#view-author .au-btn-solid:hover{ background:color-mix(in srgb, var(--lib-acc, #9e2b25) 82%, #000); }
html[data-theme="dark"] #view-author .au-btn-solid{ color:#1a1410; }
#view-author .au-btn-quiet{
  background:none; color:var(--lib-t2, #4b4540); padding:15px 24px;
  border-color:color-mix(in srgb, var(--lib-t1, #14110f) 18%, transparent);
}
#view-author .au-btn-quiet:hover{ color:var(--lib-t1, #14110f); border-color:var(--lib-t1, #14110f); }
#view-author .au-btn-i{
  display:inline-grid; place-items:center; width:30px; height:30px;
  border-radius:50%; font-size:14px;
  background:color-mix(in srgb, #000 20%, transparent);
  transition:transform .5s var(--lib-ease2, cubic-bezier(.32,.72,0,1));
}
#view-author .au-btn:hover .au-btn-i{ transform:translate(3px,-1px); }
#view-author .au-btn-quiet .au-btn-i{ display:none; }

/* ============================================================================
   THE REVEAL — gated on html.oa-author-live (motion-author.js sets it only once
   its observer is live). Words rise; the portrait wipes in once; the chop
   presses. Nothing is hidden unless that class is present, so no-JS and
   reduced-motion visitors always see a finished page.
   ============================================================================ */
html.oa-author-live #view-author .au-rise{
  opacity:0; transform:translateY(24px);
  transition:opacity .82s var(--lib-ease, cubic-bezier(.22,1,.36,1)),
             transform .82s var(--lib-ease, cubic-bezier(.22,1,.36,1));
}
html.oa-author-live #view-author [data-au-group].is-on .au-rise{
  opacity:1; transform:none; transition-delay:calc(var(--i,0) * .08s);
}

/* the name — each register rises out of its own clip (descender room reserved) */
html.oa-author-live #view-author .au-riseclip{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.14em; margin-bottom:-.14em;
}
html.oa-author-live #view-author .au-riseclip > span{
  display:inline-block; transform:translateY(112%);
  transition:transform .95s var(--lib-ease2, cubic-bezier(.32,.72,0,1));
}
html.oa-author-live #view-author .au-hero.is-on .au-riseclip > span{
  transform:none; transition-delay:calc(.14s + var(--i,0) * .07s);
}

/* the hero photograph — an INK-BLOOM reveal: four wet-ink origins spread and
   merge to uncover the figure. Pure CSS mask (no WebGL) so it is cheap even on
   weak devices; where @property is missing it steps instead of glides but still
   ends fully revealed. It settles once; it does not loop. */
@property --au-ink{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
html.oa-author-live #view-author .au-hero-portrait .au-plate{
  --au-ink:0%;
  -webkit-mask-image:radial-gradient(circle,#000 45%,transparent 72%),radial-gradient(circle,#000 45%,transparent 72%),radial-gradient(circle,#000 45%,transparent 72%),radial-gradient(circle,#000 45%,transparent 72%);
          mask-image:radial-gradient(circle,#000 45%,transparent 72%),radial-gradient(circle,#000 45%,transparent 72%),radial-gradient(circle,#000 45%,transparent 72%),radial-gradient(circle,#000 45%,transparent 72%);
  -webkit-mask-position:27% 22%,71% 37%,41% 73%,83% 82%; mask-position:27% 22%,71% 37%,41% 73%,83% 82%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:var(--au-ink) var(--au-ink); mask-size:var(--au-ink) var(--au-ink);
}
html.oa-author-live #view-author .au-hero.is-on .au-hero-portrait .au-plate{
  animation:auInkBloom 1.4s var(--lib-ease, cubic-bezier(.22,1,.36,1)) .1s forwards;
}
@keyframes auInkBloom{ from{ --au-ink:0%; } to{ --au-ink:330%; } }

/* the face photograph — a quieter fade as the story reaches it */
html.oa-author-live #view-author .au-face .au-plate{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--lib-ease), transform .9s var(--lib-ease);
}
html.oa-author-live #view-author [data-au-group].is-on .au-face .au-plate{ opacity:1; transform:none; transition-delay:.12s; }

/* the scroll cue line draws down */
html.oa-author-live #view-author .au-scrollcue-line{ transform:scaleY(0); transition:transform .7s var(--lib-ease) .6s; }
html.oa-author-live #view-author .au-hero.is-on .au-scrollcue-line{ transform:scaleY(1); }

/* the medallion — the mount fades in (opacity on the 3D tile itself would
   flatten its perspective); motion-author.js owns the tile's rotation */
html.oa-author-live #view-author .au-med-mount{ opacity:0; }
html.oa-author-live #view-author .au-close-inner.is-on .au-med-mount{
  opacity:1; transition:opacity .75s var(--lib-ease, cubic-bezier(.22,1,.36,1)) .1s;
}

@media (prefers-reduced-motion: reduce){
  html.oa-author-live #view-author .au-rise,
  html.oa-author-live #view-author .au-riseclip > span,
  html.oa-author-live #view-author .au-face .au-plate,
  html.oa-author-live #view-author .au-scrollcue-line{
    opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;
  }
  /* ink-bloom off: drop the mask so the photo is simply present */
  html.oa-author-live #view-author .au-hero-portrait .au-plate{
    -webkit-mask-image:none !important; mask-image:none !important; animation:none !important;
  }
  html.oa-author-live #view-author .au-hero-portrait .au-plate img{ opacity:1 !important; transform:none !important; }
  html.oa-author-live #view-author .au-med-mount{ opacity:1 !important; }
}