/**
 * Vertwo Premium — work-detail.css
 *
 * v0.26.0 — verbatim port of /html/05-work-details.html <style> block.
 * Sections kept: 1 (tokens · reset), 3 (HERO), 4 (MAIN GRID), 5 (LEFT cover-info),
 * 6 (RIGHT iPhone preview), 7 (PAGING), 8 (LIGHTBOX), 11 (SCROLL REVEAL — .r/.d1/.d2/.d3),
 * 12 (RESPONSIVE).
 *
 * Dropped from prototype:
 * - Section 2 (NAV): rules already in main.css (header.php emits same markup).
 * - Section 9 (FOOTER): rules already in main.css (footer.php emits same markup).
 * - Section 10 (BACK TO TOP): handled by main.js + main.css site-wide.
 * - Inline @font-face base64 blocks: NHG / NeueHaasGrotesk faces already shipped via
 *   assets/fonts/NeueHaasDisplay-{Black,Bold,Roman}.woff and registered in design-system.css.
 *
 * Enqueued from functions.php gated on is_singular('vertwo_work'). Loads after
 * vertwo-design-system + vertwo-components.
 *
 * @package Vertwo
 * @since   0.26.0
 */

/* ═══════════════════════════════════════
   1 · TOKENS · RESET
═══════════════════════════════════════ */
@property --pd-tilt-x { syntax: '<angle>';  initial-value: 0deg; inherits: true; }
@property --pd-tilt-y { syntax: '<angle>';  initial-value: 0deg; inherits: true; }
@property --pd-lift-z { syntax: '<length>'; initial-value: 0px;  inherits: true; }

:root{
  --orange:#F27A0F;--gold:#F5A623;
  --black:#1A1A1A;--white:#fff;
  --off:#F5F5F7;--mid:#697386;--line:#D2D2D7;
  --hairline:rgba(0,0,0,0.08);
  --font-title:'NHG','NeueHaasGrotesk','Helvetica Neue','Arial Black','Arial',sans-serif;
  --font-body:'DM Sans','Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.7,0,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-y:scroll;overflow-x:hidden;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--white);color:var(--black);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
ul{list-style:none}
::selection{background:rgba(242,122,15,0.22);color:var(--black)}

/* Page scrollbar */
::-webkit-scrollbar{width:14px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.38);border:3px solid transparent;background-clip:padding-box;border-radius:980px;transition:background-color .2s ease}
::-webkit-scrollbar-thumb:hover{background-color:rgba(242,122,15,0.7);background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background-color:var(--orange);background-clip:padding-box}
html{scrollbar-width:auto;scrollbar-color:rgba(0,0,0,0.38) transparent}


/* ═══════════════════════════════════════
   3 · HERO — Works hero scaled, left-aligned, v2 breadcrumb
═══════════════════════════════════════ */
#pd-hero{
  position:relative;
  min-height:28vh;height:auto;
  display:flex;align-items:flex-end;
  overflow:hidden;background:#0a0a0c;isolation:isolate;
  padding:110px 24px 40px;
}
.ah-bg{position:absolute;inset:-10% -5%;z-index:0;pointer-events:none;filter:blur(70px) saturate(140%);opacity:.85;will-change:transform}
.ah-blob{position:absolute;border-radius:50%;mix-blend-mode:screen}
.ah-blob--a{width:55vw;height:55vw;left:-10%;top:-10%;background:radial-gradient(circle at 30% 30%,#1E3A8A 0%,rgba(30,58,138,0) 60%);animation:ahDriftA 22s ease-in-out infinite alternate}
.ah-blob--b{width:50vw;height:50vw;right:-12%;top:8%;background:radial-gradient(circle at 70% 50%,#5B21B6 0%,rgba(91,33,182,0) 60%);animation:ahDriftB 28s ease-in-out infinite alternate}
.ah-blob--c{width:62vw;height:62vw;left:18%;bottom:-22%;background:radial-gradient(circle at 50% 50%,#F59E0B 0%,rgba(245,158,11,0) 60%);animation:ahDriftC 34s ease-in-out infinite alternate}
@keyframes ahDriftA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(8vw,4vh,0) scale(1.12)}}
@keyframes ahDriftB{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(-6vw,5vh,0) scale(1)}}
@keyframes ahDriftC{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-4vw,-6vh,0) scale(1.15)}}
.ah-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;mix-blend-mode:overlay}
.ah-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 30% 90%,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 60%),linear-gradient(180deg,rgba(10,10,12,0.0) 0%,rgba(10,10,12,0.45) 100%)}

.pd-hero-inner{position:relative;z-index:3;width:100%;max-width:1200px;margin:0 auto;color:#fff;text-align:left}
/* v0.32.111 — eyebrow + leading dash → solid white (was orange / orange-0.7).
   Matches the .vw-hero-eyebrow change in page-hero.css this round. */
.pd-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:0.66rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.pd-hero-eyebrow::before{content:"";display:inline-block;width:18px;height:1px;background:#fff;opacity:1}
.pd-hero-title{
  font-family:var(--font-title);font-weight:900;
  font-size:clamp(1.6rem,2.8vw,2.8rem);
  letter-spacing:-0.045em;line-height:1.04;color:#fff;
  max-width:880px;
}
.pd-hero-title em{font-style:normal;color:var(--orange)}

/* breadcrumb pill — v2 style */
.pd-breadcrumb{
  display:inline-flex;align-items:center;gap:0;
  max-width:100%;
  margin-top:18px;padding:6px 6px 6px 14px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:980px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:0.74rem;font-weight:500;letter-spacing:-0.005em;
  color:rgba(255,255,255,0.62);
  transition:background .3s ease,border-color .3s ease,color .3s ease;
  min-width:0;
}
.pd-breadcrumb:hover{background:rgba(242,122,15,0.16);border-color:rgba(242,122,15,0.4);color:#fff}
.pd-breadcrumb-back{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.85);font-weight:700;transition:color .25s ease;flex-shrink:0}
.pd-breadcrumb-back svg{width:11px;height:11px;transition:transform .35s var(--ease)}
.pd-breadcrumb:hover .pd-breadcrumb-back svg{transform:translateX(-3px)}
.pd-breadcrumb-sep{display:inline-block;margin:0 10px;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.30);flex-shrink:0}
.pd-breadcrumb-current{
  display:inline-block;padding:5px 12px;border-radius:980px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.92);font-weight:600;
  margin-left:2px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}

/* ═══════════════════════════════════════
   4 · MAIN GRID — 4fr / 2fr (= 4/6 + 2/6)
═══════════════════════════════════════ */
#pd-main{
  position:relative;
  max-width:1200px;margin:0 auto;
  padding:56px 24px 48px; /* v0.26.8: bottom 96 -> 48 (Vic feedback - too much empty space below synopsis) */
  display:grid;grid-template-columns:4fr 2fr;
  gap:56px;align-items:start;
}
.pd-left{display:flex;flex-direction:column;gap:36px;min-width:0}
.pd-right{
  position:-webkit-sticky; /* older Safari needs the prefix */
  position:sticky;
  top:104px;
  align-self:start;
  z-index:1; /* belt-and-braces against grid stacking quirks */
  /* v0.28.9 - stripped v0.28.8 GPU promotion (will-change /
     translateZ / backface-visibility). Pattern was theory-correct
     but practice-wrong: news-single.css's .nd-gallery-col uses
     plain sticky (no GPU hints) and scrolls smoothly on Edge,
     while v0.28.8's promotion made jitter WORSE on the other-
     services page - the new GPU layer was compositing on a
     different cadence than the main content layer, so the sticky
     pin drifted by sub-pixels each frame instead of the 1-pixel
     drift we were trying to fix. Plain sticky lets the compositor
     paint the element in the same layer as its siblings; native
     scroll + Lenis smooth-scroll then move them atomically. */
}

/* ═══════════════════════════════════════
   5 · LEFT — cover-info row (v1 layout)
═══════════════════════════════════════ */
.pd-cover-info{display:flex;gap:56px;align-items:flex-start}

/* Cover wrapper holds cover + (later) the inline slider — both sized to 240px */
.pd-cover-wrap{flex-shrink:0;width:240px;display:flex;flex-direction:column;gap:14px}

.pd-cover{
  position:relative;
  width:240px;
  cursor:zoom-in;
  /* Per-cover perspective for the book tilt. NO transform-style:preserve-3d. */
  perspective:1000px;
  perspective-origin:50% 40%;
  padding-bottom:14px; /* shadow room */
  --pd-lift-z:0px;
  /* Per-cover accent color for the hover bloom layer.
     Matches Works page convention — same `--accent-rgb` field drives both pages.
     For this cover (Skill: Steal / My Skills Are Only Stealing), Works already
     assigned cyan-blue (64,183,227) on its grid card; reuse here for consistency.
     CMS-ported version: override per record with style="--accent-rgb:R,G,B" */
  --accent-rgb:64,183,227;
  /* @property-typed vars transition smoothly; no separate transform transition needed */
  transition:
    --pd-tilt-x .3s cubic-bezier(.22,1,.36,1),
    --pd-tilt-y .3s cubic-bezier(.22,1,.36,1),
    --pd-lift-z .35s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .pd-cover:hover{ --pd-lift-z:18px; }
}
.pd-cover-book{
  position:relative;
  aspect-ratio:1/1.414;
  transform:
    rotateY(var(--pd-tilt-y))
    rotateX(var(--pd-tilt-x))
    translateZ(var(--pd-lift-z));
  will-change:transform;
}
/* Right-edge page-block — book "paper" peek */
.pd-cover-pageblock{
  position:absolute;
  top:2px;bottom:2px;right:-3px;
  width:6px;
  background:repeating-linear-gradient(
    to bottom,
    #f4ecdc 0px,#f4ecdc 1.5px,
    #d9cfb8 1.5px,#d9cfb8 2px
  );
  border-radius:0 3px 3px 0;
  box-shadow:
    inset -1px 0 0 rgba(0,0,0,0.18),
    inset 1px 0 0 rgba(255,255,255,0.4),
    1px 1px 4px rgba(0,0,0,0.15);
  z-index:1;
  pointer-events:none;
}
/* Cover front face — image + spine + gloss + vignette */
.pd-cover-front{
  position:absolute;inset:0;
  border-radius:3px 6px 6px 3px;
  overflow:hidden;
  background:linear-gradient(160deg,#0e1a3a 0%,#1d4a8a 50%,#091226 100%);
  isolation:isolate;
  z-index:2;
  /* Default state: neutral multi-layer black ambient shadow.
     Verbatim from Works page (.pm-cover) — 4 inset rim lights + 3 outer black drops. */
  box-shadow:
    inset 1px 0 0 rgba(0,0,0,0.4),
    inset -1px 0 0 rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 4px 10px -2px rgba(0,0,0,0.18),
    0 16px 32px -8px rgba(0,0,0,0.20),
    0 28px 56px -12px rgba(0,0,0,0.16);
  transition:box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.pd-cover:hover .pd-cover-front{
  /* Hover state: verbatim from Works (.pm-card:hover .pm-cover) —
     3 stronger black ambient layers PLUS one colored bloom layer
     using --accent-rgb. Bloom adds the colored halo without losing
     the grounded shadow underneath. */
  box-shadow:
    inset 1px 0 0 rgba(0,0,0,0.4),
    inset -1px 0 0 rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 6px 14px -2px rgba(0,0,0,0.20),
    0 24px 50px -8px rgba(0,0,0,0.30),
    0 42px 80px -12px rgba(0,0,0,0.18),
    0 32px 70px -8px rgba(var(--accent-rgb,30,30,40),0.55);
}
.pd-cover-glyph{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:900;
  font-size:5rem;color:rgba(255,255,255,0.10);letter-spacing:-0.04em;
  pointer-events:none;
}
.pd-cover-front img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  filter:saturate(1.02) contrast(1.02);
}
/* Spine — flat decoration on cover's left edge */
.pd-cover-spine{
  position:absolute;top:0;bottom:0;left:0;
  width:14px;pointer-events:none;z-index:3;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.32) 28%,
      rgba(0,0,0,0.12) 60%,
      rgba(0,0,0,0)    100%
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,0.20) 0%,
      rgba(255,255,255,0)    6%,
      rgba(255,255,255,0)    94%,
      rgba(0,0,0,0.30)       100%
    );
}
.pd-cover-spine::after{
  content:"";position:absolute;top:5%;bottom:5%;right:0;width:1px;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,0.28) 22%,
    rgba(255,255,255,0.28) 78%,
    transparent 100%);
}
/* Gloss — angle responds to tilt via @property vars */
.pd-cover-gloss{
  position:absolute;inset:0;z-index:4;
  background:linear-gradient(
    calc(115deg + var(--pd-tilt-y) * 3 - var(--pd-tilt-x) * 1.2),
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0)    28%,
    rgba(255,255,255,0.13) 40%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.13) 60%,
    rgba(255,255,255,0)    72%,
    rgba(255,255,255,0)    100%
  );
  mix-blend-mode:overlay;
  pointer-events:none;
}
.pd-cover-vignette{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 30%,transparent 55%,rgba(0,0,0,0.20) 100%),
    linear-gradient(to top,rgba(0,0,0,0.22) 0%,rgba(0,0,0,0) 35%);
}
.pd-cover-zoom{
  position:absolute;bottom:10px;right:10px;z-index:6;
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.20);
  color:rgba(255,255,255,0.85);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0.85);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  pointer-events:none;
}
.pd-cover:hover .pd-cover-zoom{opacity:1;transform:scale(1)}
.pd-cover-zoom svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){
  .pd-cover-book{transform:none!important}
}

/* ── Tiny slider — nested below the cover, matches cover width (240px) ── */
.pd-mini-slider{
  position:relative;
  width:240px;
  margin-top:6px;
}
.pd-mini-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.pd-mini-label{
  font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);
}
.pd-mini-controls{display:flex;gap:6px}
.pd-mini-arrow{
  /* Square-rounded — match v2 pagination language */
  width:30px;height:30px;border-radius:9px;
  background:var(--white);border:1px solid var(--hairline);
  color:var(--black);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pd-mini-arrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pd-mini-arrow:hover{
  background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:0 4px 12px rgba(242,122,15,0.32);
}
.pd-mini-arrow:disabled,.pd-mini-arrow[aria-disabled="true"]{
  opacity:.35;cursor:not-allowed;pointer-events:none;
}

.pd-mini-viewport{
  position:relative;
  width:100%;aspect-ratio:4/3;
  border-radius:12px;overflow:hidden;
  background:#0d0d10;
  box-shadow:0 10px 28px rgba(0,0,0,0.14),inset 0 0 0 1px rgba(255,255,255,0.04);
}
.pd-mini-track{
  position:absolute;inset:0;
  display:flex;
  /* Bumped from .55s → .85s for more inertia/momentum feel */
  transition:transform .85s var(--ease);
  will-change:transform;
}
.pd-mini-card{
  position:relative;flex:0 0 100%;height:100%;
  cursor:pointer;
  overflow:hidden;
}
.pd-mini-card-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1.4s var(--ease);
  /* ↑ slow scale for "parallax-y" feel inside the card on slide change */
  transform:scale(1.08);
}
.pd-mini-card.is-current .pd-mini-card-bg{transform:scale(1)}
.pd-mini-card-noise{
  position:absolute;inset:0;pointer-events:none;
  opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nn)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.pd-mini-card-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,0.65) 100%);
}
.pd-mini-card-text{
  position:absolute;left:14px;right:14px;bottom:12px;z-index:2;
  color:#fff;
}
.pd-mini-card-eyebrow{
  display:block;font-size:0.55rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--orange);margin-bottom:4px;
}
.pd-mini-card-title{
  font-family:var(--font-title);font-weight:700;letter-spacing:-0.02em;
  font-size:0.78rem;line-height:1.25;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Card placeholders — picsum dummy images so the Ken Burns parallax shows on screen.
   Replace with real CMS image URLs when porting to Wix Studio. */
.pd-mini-card.c1 .pd-mini-card-bg{background-image:url('https://picsum.photos/seed/vertwo-process/800/600')}
.pd-mini-card.c2 .pd-mini-card-bg{background-image:url('https://picsum.photos/seed/vertwo-art/800/600')}
.pd-mini-card.c3 .pd-mini-card-bg{background-image:url('https://picsum.photos/seed/vertwo-color/800/600')}
.pd-mini-card.c4 .pd-mini-card-bg{background-image:url('https://picsum.photos/seed/vertwo-team/800/600')}

.pd-mini-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;
}
.pd-mini-pills{display:flex;gap:5px}
.pd-mini-pill{
  width:18px;height:3px;border-radius:2px;
  background:rgba(0,0,0,0.12);cursor:pointer;
  transition:background .3s ease,width .3s ease;
  border:none;padding:0;
}
.pd-mini-pill.is-active{background:var(--orange);width:26px}
.pd-mini-pill:hover{background:rgba(242,122,15,0.55)}
.pd-mini-counter{
  font-family:var(--font-title);font-weight:700;
  font-size:0.66rem;letter-spacing:0.04em;
  color:var(--black);font-variant-numeric:tabular-nums;
}
.pd-mini-counter span{color:var(--mid)}

/* ─── Info beside cover ─── */
/* Info column: flex column with consistent vertical rhythm.
   Replaces ad-hoc margin-bottoms with a single gap value so each section
   sits in proportional vertical space. */
.pd-info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  gap:22px;
}
.pd-info-titles{display:flex;flex-direction:column;gap:8px}

.pd-title-eng-big{
  font-family:var(--font-title);font-weight:800;
  font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-0.03em;
  color:var(--black);line-height:1.12;
}
.pd-title-jp-small{
  font-family:var(--font-title);font-weight:600;
  font-size:0.95rem;letter-spacing:-0.015em;
  color:var(--mid);line-height:1.3;
}
/* v0.32.39 — English tagline subtitle. Sits BELOW .pd-title-jp-small
   (was above in v0.32.38). Order top-down now: title → JP → tagline.
   Color changed to brand --orange per Vic so the tagline reads as the
   accent line (the JP title is the structural secondary, the tagline
   is the playful pull-quote). Italic + slightly larger than
   .pd-title-jp-small so it still feels like a subtitle, not body text. */
.pd-tagline{
  font-family:var(--font-body);font-weight:500;font-style:italic;
  font-size:1.05rem;letter-spacing:0.005em;
  color:var(--orange);line-height:1.35;
}

/* 3-row meta grid:
   row 1 → [ Client | Publisher ]   (vertical separator between)
   row 2 → [ Genres              ]   (full width, no internal separator)
   row 3 → [ Episodes | Status   ]   (vertical separator between)
   Rows separated by horizontal hairlines. */
.pd-meta-grid{
  border:1px solid var(--hairline);border-radius:14px;overflow:hidden;
  background:var(--white);
}
.pd-meta-row{
  display:flex;
  border-bottom:1px solid var(--hairline);
}
.pd-meta-row:last-child{border-bottom:none}
.pd-meta-pair{
  flex:1;min-width:0;
  padding:13px 18px;
  display:flex;flex-direction:column;gap:6px;
  transition:background .3s ease;
}
.pd-meta-pair:hover{background:rgba(242,122,15,0.025)}
/* Vertical separator on split rows — border on the first cell's right edge */
.pd-meta-row-split .pd-meta-pair:first-child{
  border-right:1px solid var(--hairline);
}
.pd-meta-label{
  font-size:0.56rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);
}
.pd-meta-value{
  font-family:var(--font-title);font-weight:700;letter-spacing:-0.01em;
  font-size:0.88rem;color:var(--black);line-height:1.3;
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  min-width:0;
}
.pd-meta-value.is-orange{color:var(--orange)}
.pd-meta-value small{
  font-family:var(--font-body);font-size:0.66rem;font-weight:400;
  color:var(--mid);letter-spacing:0;
}

/* ── Status pill — v2 animated pulse ring, v1 variants ── */
.pd-status{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 11px 5px 10px;border-radius:980px;
  font-family:var(--font-title);font-weight:700;font-size:0.72rem;letter-spacing:0;
  position:relative;
}
.pd-status-dot{position:relative;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pd-status-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid currentColor;opacity:0;
}

.pd-status.ongoing{
  background:linear-gradient(135deg,rgba(52,199,89,0.10),rgba(52,199,89,0.04));
  color:#1a8e3d;
  box-shadow:inset 0 0 0 1px rgba(52,199,89,0.28);
}
.pd-status.ongoing .pd-status-dot{background:#34c759}
.pd-status.ongoing .pd-status-dot::after{animation:pdPulseRing 2s var(--ease) infinite}

.pd-status.finished{
  background:linear-gradient(135deg,rgba(245,166,35,0.10),rgba(245,166,35,0.04));
  color:#a06c00;
  box-shadow:inset 0 0 0 1px rgba(245,166,35,0.32);
}
.pd-status.finished .pd-status-dot{background:var(--gold)}

/* v0.26.2 - .completed status variant. FG5 display_status uses the slug
   'completed', not 'finished' which the prototype CSS originally shipped,
   so until v0.26.2 the WP page rendered 'Completed' text with no colour
   or pulse. Blue-cyan family reads as "shipped/done" (vs gold .finished
   which reads as "wrap-up"). Calm slow pulse (vs the active .ongoing
   broadcast) to indicate the work is closed but the project still has
   life. */
.pd-status.completed{
  background:linear-gradient(135deg,rgba(59,130,246,0.10),rgba(59,130,246,0.04));
  color:#1d4ed8;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,0.30);
}
.pd-status.completed .pd-status-dot{background:#3b82f6}
.pd-status.completed .pd-status-dot::after{animation:pdPulseRing 3.4s var(--ease) infinite;opacity:.5}


.pd-status.unpublished,.pd-status.hiatus{
  background:rgba(105,115,134,0.08);
  color:var(--mid);
  box-shadow:inset 0 0 0 1px rgba(105,115,134,0.20);
}
.pd-status.unpublished .pd-status-dot,.pd-status.hiatus .pd-status-dot{background:var(--mid)}

@keyframes pdPulseRing{
  0%{opacity:.7;transform:scale(.55)}
  70%{opacity:0;transform:scale(1.7)}
  100%{opacity:0;transform:scale(1.7)}
}
@media (prefers-reduced-motion:reduce){.pd-status.ongoing .pd-status-dot::after{animation:none}}

/* ── Scope card (v1 wrapper) + v2 chip styling inside ── */
.pd-scope{
  padding:14px 16px;
  border:1px solid var(--hairline);border-radius:14px;
  background:var(--off);
}
.pd-scope-label{
  font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);margin-bottom:11px;
}
.pd-scope-tags{display:flex;flex-wrap:wrap;gap:7px}
.pd-chip{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:980px;
  font-family:var(--font-title);font-weight:700;font-size:0.7rem;letter-spacing:-0.005em;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  isolation:isolate;
}
.pd-chip::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  transition:opacity .4s var(--ease);
}
.pd-chip-dot{width:4px;height:4px;border-radius:50%;background:rgba(0,0,0,0.18)}
.pd-chip.inactive{
  background:rgba(0,0,0,0.04);
  color:rgba(0,0,0,0.32);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);
}
.pd-chip.inactive::before{opacity:0}
.pd-chip.active{
  background:linear-gradient(135deg,var(--orange) 0%,var(--gold) 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(242,122,15,0.32),0 0 0 1px rgba(242,122,15,0.45),inset 0 1px 0 rgba(255,255,255,0.32);
}
.pd-chip.active::before{
  background:radial-gradient(ellipse at center,rgba(242,122,15,0.45) 0%,rgba(242,122,15,0) 70%);
  filter:blur(10px);opacity:.7;inset:-5px;
  animation:pdChipBreath 3.4s ease-in-out infinite;
}
.pd-chip.active .pd-chip-dot{background:#fff;box-shadow:0 0 6px rgba(255,255,255,0.7)}
@keyframes pdChipBreath{
  0%,100%{opacity:.55;transform:scale(.96)}
  50%{opacity:.85;transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){.pd-chip.active::before{animation:none}}

/* ── Platform buttons (v1 vertical stack), refined hover ── */
.pd-platforms{display:flex;flex-direction:column;gap:8px}
.pd-platform-btn{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:12px;
  border:1px solid var(--hairline);background:var(--white);
  font-size:0.78rem;font-weight:700;color:var(--black);
  cursor:pointer;
  transition:border-color .3s ease,color .3s ease,background .3s ease,transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pd-platform-btn:hover{
  border-color:rgba(242,122,15,0.42);
  color:var(--orange);
  background:rgba(242,122,15,0.03);
  transform:translateX(3px);
  box-shadow:0 6px 16px -8px rgba(242,122,15,0.30);
}
.pd-platform-icon{width:16px;height:16px;flex-shrink:0;stroke:var(--mid);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.pd-platform-btn:hover .pd-platform-icon{stroke:var(--orange)}
.pd-platform-name{flex:0 0 auto;font-size:0.78rem;font-weight:700;letter-spacing:-0.005em}
.pd-platform-url{flex:1;min-width:0;font-size:0.66rem;font-weight:400;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;margin-right:2px}
.pd-arrow{width:14px;height:14px;flex-shrink:0;stroke:rgba(0,0,0,0.20);fill:none;stroke-width:1.6;stroke-linecap:round;transition:stroke .3s ease,transform .35s var(--ease)}
.pd-platform-btn:hover .pd-arrow{stroke:var(--orange);transform:translateX(2px)}

/* ─── Synopsis ─── */
.pd-synopsis-section{}
.pd-synopsis-label{
  font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);margin-bottom:14px;
  display:flex;align-items:center;gap:12px;
}
.pd-synopsis-label::after{content:"";flex:1;height:1px;background:var(--hairline)}
.pd-synopsis{
  font-size:0.94rem;font-weight:300;line-height:1.82;
  /* v0.28.5 - solid black (was rgba 0.78). Vic flagged that the
     synopsis had two color tones - the base p body was at 78% opacity
     and the first paragraph overrode to 90%, producing a subtle
     two-tone read. Unified to solid var(--black) on both rules so
     all paragraphs match. */
  color:var(--black);max-width:64ch;
}
.pd-synopsis p:first-child{font-size:1rem;font-weight:400;color:var(--black);line-height:1.7}
.pd-synopsis p+p{margin-top:16px}
.pd-synopsis em{font-style:normal;color:var(--orange);font-weight:600}
/* v0.32.48 — explicit bold on <strong>/<b> so Block Editor bold runs
   render consistently inside the synopsis (the parent is weight 300
   and the browser-default `bolder` wasn't reading cleanly). */
.pd-synopsis strong,
.pd-synopsis b { font-weight: 700; color: var(--black); }

/* ═══════════════════════════════════════
   6 · RIGHT — sticky iPhone preview
═══════════════════════════════════════ */
.pd-right-label{
  display:flex;align-items:center;gap:12px;
  font-size:0.6rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);margin-bottom:22px;
}
.pd-right-label::before,.pd-right-label::after{content:"";flex:1;height:1px;background:var(--hairline)}

.iphone-wrap{
  position:relative;
  /* v0.26.2: shadow toned down (Vic feedback) — was drop-shadow(0 40px 80px rgba(0,0,0,0.7)) which dominated the white background; now subtle ambient. */
  filter:drop-shadow(0 18px 36px rgba(0,0,0,0.18)) drop-shadow(0 4px 12px rgba(0,0,0,0.10));
  display:flex;justify-content:center;
}
.iphone-frame{
  /* v0.32.38 — synced to homepage hero iPhone (.iphone-frame in hero.css):
     was 290×600 with 44px radius, now 320×660 with 46px radius. The
     .pd-right grid column at #pd-main max-width 1200px is ~365px wide,
     so 320 fits comfortably with margin to spare. Screen radius bumped
     35 → 36 to match hero too (keeps the same bezel proportions). */
  width:320px;height:660px;
  border-radius:46px;
  background:linear-gradient(160deg,#2e2e2e 0%,#1c1c1c 50%,#111 100%);
  border:2.5px solid rgba(255,255,255,0.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),inset 0 -1px 0 rgba(0,0,0,0.6),0 0 0 1px rgba(0,0,0,0.6);
  position:relative;overflow:hidden;
}
.iphone-screen{position:absolute;top:10px;left:10px;right:10px;bottom:10px;border-radius:36px;background:#000;overflow:hidden} /* v0.32.38 — 35 → 36 to match hero.css */
.iphone-scroll{position:absolute;inset:0;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:inherit}
.iphone-scroll::-webkit-scrollbar{display:none}
.webtoon-panels{display:flex;flex-direction:column;width:100%}
.wt-panel{width:100%;flex-shrink:0;background-size:cover;background-position:center top}
.wp1{height:280px;background:linear-gradient(160deg,#1a0820 0%,#3d1565 50%,#1a0820 100%)}
.wp2{height:230px;background:linear-gradient(160deg,#0a1a30 0%,#1a3d60 50%,#0a1a30 100%)}
.wp3{height:320px;background:linear-gradient(160deg,#1a0505 0%,#4a0f0f 50%,#1a0505 100%)}
.wp4{height:250px;background:linear-gradient(160deg,#041a06 0%,#0a3d10 50%,#041a06 100%)}
.wp5{height:300px;background:linear-gradient(160deg,#0a0a0a 0%,#1a1a08 50%,#0a0a0a 100%)}
.wp6{height:220px;background:linear-gradient(160deg,#1a0510 0%,#3d0a28 50%,#1a0510 100%)}
.wt-panel+.wt-panel{border-top:1.5px solid rgba(255,255,255,0.06)}
.iphone-scrollbar{position:absolute;right:7px;top:14px;bottom:14px;width:4px;background:rgba(255,255,255,0.07);border-radius:2px;z-index:10;cursor:pointer;user-select:none}
.iphone-scrollthumb{width:100%;background:rgba(255,255,255,0.38);border-radius:2px;position:absolute;top:0;left:0;height:28%;cursor:grab;transition:background .15s}
.iphone-scrollthumb:hover{background:rgba(255,255,255,0.65)}
.iphone-scrollthumb:active{cursor:grabbing;background:var(--orange)}
.iphone-label{position:absolute;top:14px;left:0;right:0;z-index:5;text-align:center;pointer-events:none}
.iphone-label-text{
  display:inline-block;
  font-size:0.55rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.65);
  background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:3px 10px;border-radius:980px;
  border:1px solid rgba(255,255,255,0.12);
}

/* ═══════════════════════════════════════
   7 · PAGING — square-rounded arrows (kept from v2)
═══════════════════════════════════════ */
#pd-paging{
  background:var(--off);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.pd-paging-inner{
  max-width:1200px;margin:0 auto;
  padding:28px 24px;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;
}
.pd-page-link{
  display:inline-flex;align-items:center;gap:14px;
  padding:8px;border-radius:14px;
  min-width:0;max-width:100%;
}
.pd-page-link.next{justify-self:end;flex-direction:row-reverse}
.pd-page-arrow{
  flex-shrink:0;width:48px;height:48px;
  border-radius:12px; /* square-rounded per spec */
  background:var(--white);border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;
  color:var(--black);
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .4s var(--ease),box-shadow .35s var(--ease);
}
.pd-page-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pd-page-link:hover .pd-page-arrow{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(242,122,15,0.32)}
.pd-page-link.prev:hover .pd-page-arrow{transform:translateX(-3px)}
.pd-page-link.next:hover .pd-page-arrow{transform:translateX(3px)}
.pd-page-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pd-page-link.next .pd-page-text{text-align:right}
.pd-page-dir{font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--mid)}
.pd-page-title{font-family:var(--font-title);font-weight:700;letter-spacing:-0.015em;font-size:0.95rem;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;transition:color .3s ease}
/* On hover: arrow + title go orange. Direction label ("PREVIOUS"/"NEXT") stays neutral. */
.pd-page-link:hover .pd-page-title{color:var(--orange)}
.pd-page-current{font-family:var(--font-title);font-weight:700;letter-spacing:0.06em;font-size:0.7rem;text-transform:uppercase;color:var(--mid);text-align:center;padding:0 8px}
.pd-page-current span{display:block;color:var(--black);letter-spacing:-0.02em;font-size:0.92rem;text-transform:none;margin-top:3px}

/* ═══════════════════════════════════════
   8 · LIGHTBOX — verbatim v2 (pd-lb-* prefix)
═══════════════════════════════════════ */
.pd-lightbox{
  position:fixed;inset:0;
  background:rgba(10,10,12,0.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;opacity:0;pointer-events:none;
  transition:opacity 260ms var(--ease);
}
.pd-lightbox.is-open{opacity:1;pointer-events:auto}
.pd-lightbox:not(.is-open),.pd-lightbox:not(.is-open) *{pointer-events:none!important}
.pd-lb-viewport{position:relative;width:92vw;height:84vh;overflow:hidden}
.pd-lb-track{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform;transition:transform .55s var(--ease)}
.pd-lb-slide{flex:0 0 92vw;width:92vw;height:84vh;display:flex;align-items:center;justify-content:center;position:relative}
.pd-lb-image{display:block;max-width:92vw;max-height:84vh;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;cursor:pointer;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,0.5)}
/* v0.32.61 — Tag pill floating at the bottom of each lightbox slide.
   Pulls from s.alt (sourced from data-cap on other-services thumbs or
   the .pd-mini-card-eyebrow text on webtoon detail). Mirrors the
   .nd-lb-tag styling in news-single.css for visual parity. */
.pd-lb-tag{
  position:absolute;
  bottom:24px;left:50%;
  transform:translateX(-50%);
  font-family:var(--font-title);
  font-size:0.66rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--orange);
  background:rgba(0,0,0,0.55);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
          backdrop-filter:blur(8px) saturate(140%);
  padding:8px 16px;
  border-radius:980px;
  white-space:nowrap;
  pointer-events:none;
  z-index:3;
}
.pd-lb-block{
  width:min(540px,80vw);aspect-ratio:4/3;
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:900;font-size:5rem;
  color:rgba(255,255,255,0.10);letter-spacing:-0.04em;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  position:relative;overflow:hidden;
}
.pd-lb-block.b1{background:linear-gradient(135deg,#1d2a5e 0%,#0a1226 100%);aspect-ratio:1/1.414;width:min(380px,68vw)}
.pd-lb-block.b2{background:linear-gradient(135deg,#1d2a5e 0%,#0a1226 100%)}
.pd-lb-block.b3{background:linear-gradient(135deg,#5e1d3a 0%,#260a14 100%)}
.pd-lb-block.b4{background:linear-gradient(135deg,#1d5e3a 0%,#0a261a 100%)}
.pd-lb-block.b5{background:linear-gradient(135deg,#5e3a1d 0%,#26190a 100%)}

.pd-lb-close,.pd-lb-nav{
  position:absolute;width:48px;height:48px;border-radius:50%;
  background:transparent;border:1px solid rgba(255,255,255,0.24);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;
  transition:background .3s ease,border-color .3s ease,transform .3s ease,box-shadow .35s ease;
}
.pd-lb-close{top:24px;right:24px}
.pd-lb-close svg{width:20px;height:20px}
.pd-lb-close:hover{background:var(--orange);border-color:var(--orange);transform:rotate(90deg);box-shadow:0 10px 30px -6px rgba(242,122,15,0.6)}
.pd-lb-nav{top:50%;width:52px;height:52px;border-radius:14px;transform:translateY(-50%)}
.pd-lb-nav svg{width:22px;height:22px}
.pd-lb-prev{left:24px}
.pd-lb-next{right:24px}
.pd-lb-nav:hover{background:var(--orange);border-color:var(--orange);box-shadow:0 10px 30px -6px rgba(242,122,15,0.6)}
.pd-lb-prev:hover{transform:translateY(-50%) translateX(-3px)}
.pd-lb-next:hover{transform:translateY(-50%) translateX(3px)}
.pd-lb-footer{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:2}
.pd-lb-pills{display:flex;gap:6px}
.pd-lb-pill{width:28px;height:4px;background:rgba(255,255,255,0.22);border-radius:2px;cursor:pointer;border:none;padding:0;transition:background .3s ease,width .3s ease}
.pd-lb-pill.is-active{background:var(--orange);width:40px}
.pd-lb-pill:hover{background:rgba(242,122,15,0.75)}
.pd-lb-counter{color:rgba(255,255,255,0.7);font-size:12px;font-weight:600;letter-spacing:0.06em;font-variant-numeric:tabular-nums}


/* ═══════════════════════════════════════
   11 · SCROLL REVEAL
═══════════════════════════════════════ */
.r{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.r.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.14s}.d3{transition-delay:.22s}
@media (prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}}

/* ═══════════════════════════════════════
   12 · RESPONSIVE
═══════════════════════════════════════ */

/* Nav: hamburger below 1024 */
@media(max-width:1023px){
  nav#nav{top:12px;padding:10px 14px 10px 18px;width:calc(100% - 20px);left:10px;transform:none;border-radius:16px;justify-content:space-between;flex-wrap:wrap;row-gap:0;gap:0 10px}
  nav#nav.hidden{transform:translateY(calc(-100% - 12px));opacity:0;pointer-events:none}
  .nav-pill,.nav-hover-pill,.nav-links,.pb-wrap{display:none!important}
  .nav-hamburger{display:flex}
  .nav-logo-svg{height:40px}
  .mobile-menu{display:block;width:100%;order:99;max-height:0;overflow:hidden;margin-top:0;padding:0 4px;transition:max-height .6s var(--ease-io),margin-top .6s var(--ease-io),padding .6s var(--ease-io)}
  nav.mobile-open .mobile-menu{max-height:520px;margin-top:10px;padding:4px 4px 2px}
}
@media (hover:none){.nav-links a{padding:13px 20px}}

/* Tablet — collapse to single column at 960 */
@media(max-width:960px){
  #pd-main{grid-template-columns:1fr;gap:48px;padding:48px 24px 80px}
  .pd-right{position:static;align-self:auto}
  .pd-right .iphone-wrap{margin:0 auto}
}

@media(max-width:860px){
  #pd-hero{padding:96px 20px 32px;min-height:24vh}
  .pd-hero-title{font-size:clamp(1.4rem,5.5vw,2rem)}
  .ft-top{grid-template-columns:1fr;gap:40px}
  /* (.ft-left-col @860px lives in its own dedicated block earlier in
     the file — must come BEFORE the ≤600px comprehensive footer block
     so that block wins at narrower widths via cascade source order.) */
}

@media(max-width:720px){
  /* Stack cover on top of info on phones — keeps cover prominent */
  .pd-cover-info{flex-direction:column;gap:24px}
  .pd-cover-wrap{width:240px;margin:0 auto}
  .pd-cover{width:100%}
  .pd-mini-slider{width:100%}
  .pd-info{width:100%}
}

@media(max-width:600px){
  #pd-hero{padding:90px 18px 28px}
  .pd-hero-eyebrow{font-size:0.62rem}
  .pd-breadcrumb{font-size:0.7rem;padding:5px 5px 5px 12px}
  .pd-breadcrumb-sep{margin:0 8px}
  .pd-breadcrumb-current{padding:4px 10px}

  #pd-main{padding:40px 18px 64px;gap:40px}
  .pd-left{gap:32px}

  /* Meta grid keeps the same 3-row split layout on mobile as desktop —
     no responsive collapse. Cells stay narrow but text still fits. */

  .pd-platform-name{font-size:0.74rem}
  .pd-platform-url{display:none}

  .pd-synopsis{font-size:0.9rem;line-height:1.78}

  .iphone-frame{width:240px;height:496px;border-radius:38px}
  .iphone-screen{border-radius:30px;top:8px;left:8px;right:8px;bottom:8px}

  #pd-paging .pd-paging-inner{padding:20px 16px;gap:8px;grid-template-columns:auto 1fr auto}
  .pd-page-link{padding:4px;gap:8px}
  .pd-page-arrow{width:42px;height:42px;border-radius:11px}
  .pd-page-text{display:none}
  .pd-page-current{font-size:0.66rem}
  .pd-page-current span{font-size:0.85rem}

  .ft-top{grid-template-columns:1fr}
  /* Footer rules for ≤600px moved to comprehensive ≤600px block above */
  #backToTop{width:36px;height:36px;bottom:20px;right:20px}
  #backToTop svg{width:14px;height:14px}
}


/* ═══════════════════════════════════════
   v0.26.2 - SHARE ROW (verbatim port from /html/06_work-details
   -other-services.html lines 643-720, also used here on the webtoon
   detail page per Vic's request).

   Section is full-width container inside max-width:1200px, centered
   card with hairline border + soft off-white background. Five buttons:
   Facebook / X / LinkedIn / Pinterest / Copy link. Mobile collapses
   to label-on-its-own-line + 2-up button grid (single-up below 420px).
═══════════════════════════════════════ */
#pd-share{
  max-width:1200px;margin:0 auto;
  padding:14px 24px 56px;
}
.pd-share-inner{
  /* prototype v0.1.2: full-width to align visually with the synopsis
     above. Was max-width:780px which under-stretched relative to
     synopsis and caused copy-link orphan-wrap at mid-size widths. */
  max-width:none;margin:0;
  display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;
  padding:18px 22px;
  border:1px solid var(--hairline);border-radius:14px;
  background:var(--off);
}
.pd-share-label{
  font-family:var(--font-title);font-weight:700;font-size:0.66rem;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--mid);
  flex-shrink:0;
}
.pd-share-buttons{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.pd-share-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:980px;
  background:#fff;border:1px solid var(--hairline);
  font-family:var(--font-title);font-weight:600;font-size:0.78rem;color:var(--black);
  transition:border-color .25s ease,color .25s ease,background .25s ease,transform .35s var(--ease);
  cursor:pointer;
  white-space:nowrap;
}
.pd-share-btn:hover{
  border-color:var(--orange);color:var(--orange);
  background:rgba(242,122,15,0.04);
  transform:translateY(-1px);
}
.pd-share-btn svg{width:14px;height:14px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke:currentColor}
.pd-share-btn.copy-link.is-copied{
  border-color:#1a8e3d;color:#1a8e3d;background:rgba(52,199,89,0.06);
}

@media (max-width: 720px){
  .pd-share-inner{
    flex-direction:column;align-items:stretch;
    gap:12px;padding:16px 18px;
  }
  .pd-share-label{align-self:flex-start}
  .pd-share-buttons{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .pd-share-btn{
    flex:1 1 calc(50% - 4px);
    justify-content:center;padding:10px 12px;
  }
}
@media (max-width: 420px){
  .pd-share-btn{flex:1 1 100%}
}


/* v0.26.7 - the v0.26.4 belt-and-braces `.pd-cover-tilt-cta{display:none !important}` rule that lived here was the reason the badge never rendered on v0.26.5/v0.26.6. The v0.26.5 cleanup patch only stripped the comment block above it but left the rule intact. !important overrode the v0.26.5 styling block below, hiding the badge. Removed entirely in v0.26.7. */


/* ═══════════════════════════════════════
   v0.26.5 - Tilt badge + bloom-while-tilting (touch devices only)
   ───────────────────────────────────────
   The .pd-cover-tilt-cta badge is injected by work-detail.js
   IIFE #7 (gyro tilt) on touch devices regardless of OS. Tap on:
   - Android → instant activation, no OS dialog
   - iOS 13+ → OS permission prompt fires (Apple's hard requirement,
     can't be skipped), grant flips to .is-granted and fades out
   - iOS pre-13 → instant activation (no permission gate exists)

   .is-tilting class on .pd-cover is added by JS while the
   deviceorientation listener is active. CSS below mirrors the
   desktop :hover bloom shadow to .pd-cover.is-tilting so the
   colored halo (driven by --accent-rgb) shows during touch tilt -
   which it didn't pre-v0.26.5 because there's no :hover on touch.
═══════════════════════════════════════ */
.pd-cover-tilt-cta{
  position:absolute;top:10px;right:10px;z-index:6;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px 6px 8px;border-radius:980px;
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-family:var(--font-title);font-weight:600;
  font-size:0.62rem;letter-spacing:0.06em;text-transform:uppercase;
  line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s ease;
  /* Gentle attention pulse so first-time visitors notice the badge. */
  animation:pdTiltCtaPulse 2.6s ease-in-out infinite;
}
.pd-cover-tilt-cta svg{width:14px;height:14px;display:block;flex-shrink:0}
.pd-cover-tilt-cta-label{display:inline-block}
.pd-cover-tilt-cta:active{transform:scale(0.94)}

/* Granted state - fade out + scale down before JS removes element. */
.pd-cover-tilt-cta.is-granted{
  animation:none;
  opacity:0;transform:scale(0.85);
  pointer-events:none;
}
/* Denied state - red tint while the message lingers briefly. */
.pd-cover-tilt-cta.is-denied{
  animation:none;
  background:rgba(220,38,38,0.55);
  border-color:rgba(255,255,255,0.30);
}

@keyframes pdTiltCtaPulse{
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 0 rgba(242,122,15,0.50); }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 7px rgba(242,122,15,0.00); }
}

@media (prefers-reduced-motion:reduce){
  .pd-cover-tilt-cta{ animation:none; }
}

/* Desktop hides the badge entirely - the gyro IIFE bails on non-
   touch devices so it'd be a no-op cue anyway. */
@media (hover: hover) and (pointer: fine){
  .pd-cover-tilt-cta{ display:none; }
}

/* Bloom-while-tilting: mirror the desktop :hover bloom shadow
   onto .pd-cover.is-tilting so the colored halo (--accent-rgb,
   set inline on .pd-cover) shows on touch devices during tilt.

   This is the exact same box-shadow stack as .pd-cover:hover
   .pd-cover-front earlier in the file - 4 inset rim lights + 3
   black ambient drops + the colored bloom layer keyed off
   var(--accent-rgb). Verbatim parity. */
.pd-cover.is-tilting .pd-cover-front{
  box-shadow:
    inset 1px 0 0 rgba(0,0,0,0.4),
    inset -1px 0 0 rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 6px 14px -2px rgba(0,0,0,0.20),
    0 24px 50px -8px rgba(0,0,0,0.30),
    0 42px 80px -12px rgba(0,0,0,0.18),
    0 32px 70px -8px rgba(var(--accent-rgb,30,30,40),0.55);
}


/* ═══════════════════════════════════════
   v0.26.8 - Sticky-friendliness override
   ───────────────────────────────────────
   The prototype's section-1 reset declares
   `body{overflow-x:hidden}` and `html{overflow-x:hidden}` which,
   per the CSS-Containment spec, makes body/html a new scroll
   context. Safari (and to a lesser extent Chromium) then refuse
   to engage `position:sticky` for descendants because they treat
   that scroll context as the sticky containing block, not the
   viewport. Net effect on v0.26.0-0.26.7: .pd-right was declared
   sticky but rendered static-positioned, scrolling away with the
   left column instead of holding at top:104px.

   Modern fix: `overflow: clip` provides the same horizontal-
   overflow suppression but does NOT create a scroll context, so
   sticky descendants engage normally. Scoped to the
   single-vertwo_work template body class so it doesn't affect
   any other page. Browser support: Chrome 90+, Safari 16+,
   Firefox 81+ - well within Vic's mobile-first audience.

   Fallback: for the rare older browser, `overflow-x: hidden`
   stays in effect from section 1, and sticky degrades to
   static (same as v0.26.7 - no regression). */
body.single-vertwo_work,
html:has(body.single-vertwo_work){
  overflow-x: clip;
}


/* ═══════════════════════════════════════
   v0.27.0 - SECTIONS FOR SINGLE-VERTWO_WORK-OTHER (05b port)
   ───────────────────────────────────────
   Everything below is the verbatim port of /html/06_work-details
   -other-services.html sections 5 (gallery) and 6b (synopsis-block).
   Gated to the 05b body via:
     - .gal-* selectors: only exist on 05b markup, no clash with
       05 webtoon (.pd-cover-* / .pd-mini-* / .iphone-*)
     - #pd-synopsis-block id: full-width section unique to 05b
     - #pd-main.is-other: when the dispatcher routes to
       single-vertwo_work-other.php the main element carries
       .is-other so we can scope minor padding/grid adjustments
       without touching the 05 webtoon rules
═══════════════════════════════════════ */

/* v0.27.0 - main grid adjustment for the 05b layout: align-items
   stretch (vs the 05 webtoon's align-items:start) so the sticky
   right column gets a taller scroll track matching the gallery's
   height. */
#pd-main.is-other{ align-items: stretch; }

/* ═══════════════════════════════════════
   5 · LEFT — gallery (orientation-adaptive)
   The outer .gal-stage reserves landscape (16:9) height across the full
   left column. The inner .gal-media takes its own aspect ratio (3:4 / 1:1
   / 16:9), inherits the envelope's height, and is centered horizontally
   so portrait/square pieces letterbox into the same vertical envelope.

   Width values are EXPLICIT PERCENTAGES of the 16:9 stage:
     landscape: 100%            (16/9 ÷ 16/9 = 1)
     square   : 56.25%          (1/1  ÷ 16/9 = 9/16)
     portrait : 42.1875%        (3/4  ÷ 16/9 = 27/64)
   Using percentages instead of `width:auto` so transitions interpolate
   smoothly — auto values cannot be tweened, hence the v0.1.1 jump.

   Main media also picks up the @property --pd-tilt-x / --pd-tilt-y /
   --pd-lift-z mouse-tracked 3D tilt verbatim from .pd-cover-book in 05.
═══════════════════════════════════════ */
/* v0.1.8: dropped the 16:9 envelope entirely. Previously .gal-stage had
   aspect-ratio:16/9 to letterbox portrait/square at the same height as
   landscape (Vic's original "match landscape height" ask). But that
   envelope's height = column_width × 9/16 had no viewport-height cap, so
   on wide+short viewports (e.g. 1300×500) the envelope overflowed the
   viewport. And separately, on narrow 2-col viewports the 42% portrait
   letterbox felt skimpy.
   New approach: no envelope. Each orientation gets its OWN width, capped
   so HEIGHT never exceeds 60vh:
     landscape 16:9 → width:min(100%, 106.67vh)  (60vh × 16/9)
     portrait 3:4   → width:min(100%, 45vh)      (60vh × 3/4)
     square 1:1     → width:min(100%, 60vh)
   The .gal-stage takes content height (= media height). Trade-off:
   gallery section grows/shrinks slightly between orientations (no
   uniform letterbox); benefit: portrait gets meaningful presence at all
   viewports and never overflows the screen. */
.gal-stage{
  position:relative;
  width:100%;
  height:auto;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  perspective:1000px;
  perspective-origin:50% 40%;
}
.gal-media{
  position:relative;
  margin:0 auto;
  border-radius:14px;overflow:hidden;
  /* v0.27.5: cover (not contain) so the image FILLS the frame
     with no white margin on the sides. v0.27.3's contain left
     visible padding when image's aspect didn't exactly match the
     orientation bucket (e.g. a 9:16 cover in a 3:4 portrait
     frame); Vic feedback: "still has white spaces on each sides".
     Trade-off: cover crops some image content when aspect mismatch
     is large, but most covers have their subject centered so the
     crop is usually invisible. The dark gradient is now a true
     fallback (only shows if background-image fails to load). */
  background:linear-gradient(135deg,#1f2030,#0e1a3a) center / cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 50px -14px rgba(0,0,0,0.28);
  cursor:zoom-in;
  --pd-lift-z:0px;
  /* @property-typed vars (declared in :root) animate smoothly */
  transition:
    --pd-tilt-x .3s cubic-bezier(.22,1,.36,1),
    --pd-tilt-y .3s cubic-bezier(.22,1,.36,1),
    --pd-lift-z .35s cubic-bezier(.22,1,.36,1),
    width .7s cubic-bezier(.22,1,.36,1),
    aspect-ratio .7s cubic-bezier(.22,1,.36,1),
    box-shadow .35s var(--ease);
  transform:
    rotateY(var(--pd-tilt-y))
    rotateX(var(--pd-tilt-x))
    translateZ(var(--pd-lift-z));
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .gal-media:hover{ --pd-lift-z:18px; }
}
@media (prefers-reduced-motion:reduce){
  .gal-media{transform:none!important; transition:width .7s ease, aspect-ratio .7s ease}
}
.gal-stage.is-landscape .gal-media{width:min(100%, 106.67vh); aspect-ratio:16/9}
/* v0.27.5 - reverted to v0.27.3 45vh cap. v0.27.4 made portrait
   fill column width (misread of Vic's "fit to width" - he meant the
   IMAGE fits the frame, not the frame fills the column). Portrait
   cap stays small; fix #2 (cover sizing) makes the image actually
   fill the frame with no side margins. */
.gal-stage.is-portrait  .gal-media{width:min(100%, 45vh);     aspect-ratio:3/4}
.gal-stage.is-square    .gal-media{width:min(100%, 60vh);     aspect-ratio:1/1}
.gal-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 55%,rgba(0,0,0,0.20) 100%);
  z-index:3;
}
.gal-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
  filter:saturate(1.02) contrast(1.02);
}
.gal-stage-mark{
  font-family:var(--font-title);font-weight:800;
  font-size:1rem;letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(255,255,255,0.95);
  position:relative;z-index:2;
}
.gal-counter{
  position:absolute;top:14px;left:14px;z-index:5;
  font-family:var(--font-title);font-weight:700;font-size:0.7rem;letter-spacing:0.06em;
  background:rgba(0,0,0,0.5);color:#fff;padding:4px 10px;border-radius:980px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.gal-zoom{
  position:absolute;bottom:14px;right:14px;z-index:6;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.20);color:rgba(255,255,255,0.85);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0.85);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.gal-media:hover .gal-zoom{opacity:1;transform:scale(1)}
.gal-zoom svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Thumbnail section: head (label + controls) above strip (bottom-aligned) ── */
.gal-thumbs-section{
  margin-top:auto;          /* push entire section to bottom of .pd-left so it aligns with info column's bottom */
  display:flex;flex-direction:column;gap:10px;
}
.gal-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding-bottom:2px;
}
.gal-label{
  font-family:var(--font-title);font-weight:700;
  font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);
}
.gal-controls{
  display:flex;align-items:center;gap:6px;
  flex-shrink:0;
}
.gal-arrow{
  width:32px;height:32px;border-radius:8px;
  background:var(--white);border:1px solid var(--hairline);color:var(--mid);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .35s var(--ease),box-shadow .35s var(--ease);
}
.gal-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gal-arrow:hover{
  /* v0.27.4 - verbatim from About's .tc-arrow:hover (page-about.css
     line 553-557, Team & Culture section). Filled orange + white icon
     + 2px lift + soft orange shadow. Vic feedback: v0.27.3's tight-
     ring style read as too subtle/inverted for nav arrows; the filled
     pattern is what About uses for its rounded-box arrows and feels
     more clickable. */
  background:var(--orange);border-color:var(--orange);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(242,122,15,0.35);
}
.gal-arrow:active{transform:scale(0.96)}

/* ── Strip — horizontal scroll, mixed-orientation thumbs bottom-aligned ──
   Scrollbar fully hidden — the .gal-arrow buttons in the head provide nav
   on desktop, and on touch devices native swipe-scroll handles it without
   needing a visible bar (Vic v0.1.4: "remove the scroll bar under the
   gallery on mobile"). */
.gal-thumbs{
  display:flex;
  align-items:flex-end;       /* bottom-align all thumbs to a common baseline */
  gap:8px;
  overflow-x:auto;
  padding:4px 2px 6px;
  scroll-behavior:smooth;
  scrollbar-width:none;       /* Firefox */
  -ms-overflow-style:none;    /* legacy Edge / IE */
}
.gal-thumbs::-webkit-scrollbar{display:none}    /* WebKit */

/* Thumb container — parallax pattern verbatim from .pd-mini-card / .pd-mini-card-bg in 05.
   The bg layer extends 10%/20% past the container so it can shift without exposing edges,
   and scale-zooms from 1.06 (idle) to 1 (active). */
.gal-thumb{
  position:relative;
  flex-shrink:0;
  border-radius:8px;overflow:hidden;
  border:2px solid transparent;
  background:#0d0e1a;
  cursor:pointer;
  padding:0;
  isolation:isolate;
  transition:transform .25s var(--ease),border-color .25s ease,box-shadow .25s ease;
}
.gal-thumb-bg{
  position:absolute;inset:-10% -20%;z-index:0;
  background:linear-gradient(135deg,#2a2c40,#1a1c2e);
  background-size:cover;background-position:center;
  transition:transform 1.4s cubic-bezier(.22,1,.36,1);
  transform:scale(1.06);
}
.gal-thumb.is-active .gal-thumb-bg{transform:scale(1)}
/* Tonal placeholder bgs so the strip looks varied without real images.
   v0.27.5 - changed from `background:` shorthand to `background-image:`
   longhand. Vic feedback: "thumbnails also clipped". Root cause: the
   shorthand here silently reset background-size to its default (auto)
   which OVERRODE the .gal-thumb-bg{background-size:cover} above. With
   auto, the inline background-image URL (set by PHP per-image) rendered
   at intrinsic pixel size and got clipped to whatever fit the thumb's
   -10%/-20% inset envelope. Longhand only touches the image property,
   leaves size + position intact. */
.gal-thumb[data-orient="portrait"]  .gal-thumb-bg{background-image:linear-gradient(135deg,#3a1f4d,#1a1c2e)}
.gal-thumb[data-orient="landscape"] .gal-thumb-bg{background-image:linear-gradient(135deg,#0e1a3a,#1a1c2e)}
.gal-thumb[data-orient="square"]    .gal-thumb-bg{background-image:linear-gradient(135deg,#1f4d3a,#1a1c2e)}
.gal-thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;
}
.gal-thumb-label{
  position:relative;z-index:1;
  align-self:flex-end;
  padding:8px 10px;
  font-family:var(--font-title);font-weight:600;font-size:0.62rem;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(255,255,255,0.6);
}
.gal-thumb:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(0,0,0,0.25)}
.gal-thumb.is-active{
  border-color:var(--orange);
  box-shadow:0 0 0 1px var(--orange),0 6px 16px -6px rgba(242,122,15,0.4);
}
.gal-thumb[data-orient="portrait"] {width:64px;height:90px;display:flex}
.gal-thumb[data-orient="landscape"]{width:120px;height:68px;display:flex}
.gal-thumb[data-orient="square"]   {width:78px;height:78px;display:flex}

.pd-info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  gap:22px;
}
.pd-info-titles{display:flex;flex-direction:column;gap:8px}

.pd-title-eng-big{
  font-family:var(--font-title);font-weight:800;
  font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-0.03em;
  color:var(--black);line-height:1.12;
}
.pd-title-jp-small{
  font-family:var(--font-title);font-weight:600;
  font-size:0.95rem;letter-spacing:-0.015em;
  color:var(--mid);line-height:1.3;
}
/* v0.32.39 — English tagline subtitle. Sits BELOW .pd-title-jp-small
   (was above in v0.32.38). Order top-down now: title → JP → tagline.
   Color changed to brand --orange per Vic so the tagline reads as the
   accent line (the JP title is the structural secondary, the tagline
   is the playful pull-quote). Italic + slightly larger than
   .pd-title-jp-small so it still feels like a subtitle, not body text. */
.pd-tagline{
  font-family:var(--font-body);font-weight:500;font-style:italic;
  font-size:1.05rem;letter-spacing:0.005em;
  color:var(--orange);line-height:1.35;
}

/* 3-row meta grid:
   row 1 → [ Client | Publisher ]   (vertical separator between)
   row 2 → [ Genres              ]   (full width, no internal separator)
   row 3 → [ Episodes | Status   ]   (vertical separator between)
   Rows separated by horizontal hairlines. */
.pd-meta-grid{
  border:1px solid var(--hairline);border-radius:14px;overflow:hidden;
  background:var(--white);
}
.pd-meta-row{
  display:flex;
  border-bottom:1px solid var(--hairline);
}
.pd-meta-row:last-child{border-bottom:none}
.pd-meta-pair{
  flex:1;min-width:0;
  padding:13px 18px;
  display:flex;flex-direction:column;gap:6px;
  transition:background .3s ease;
}
.pd-meta-pair:hover{background:rgba(242,122,15,0.025)}
/* Vertical separator on split rows — border on the first cell's right edge */
.pd-meta-row-split .pd-meta-pair:first-child{
  border-right:1px solid var(--hairline);
}
.pd-meta-label{
  font-size:0.56rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);
}
.pd-meta-value{
  font-family:var(--font-title);font-weight:700;letter-spacing:-0.01em;
  font-size:0.88rem;color:var(--black);line-height:1.3;
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  min-width:0;
}
.pd-meta-value.is-orange{color:var(--orange)}
.pd-meta-value small{
  font-family:var(--font-body);font-size:0.66rem;font-weight:400;
  color:var(--mid);letter-spacing:0;
}

/* ── Status pill — v2 animated pulse ring, v1 variants ── */
.pd-status{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 11px 5px 10px;border-radius:980px;
  font-family:var(--font-title);font-weight:700;font-size:0.72rem;letter-spacing:0;
  position:relative;
}
.pd-status-dot{position:relative;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pd-status-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid currentColor;opacity:0;
}

.pd-status.ongoing{
  background:linear-gradient(135deg,rgba(52,199,89,0.10),rgba(52,199,89,0.04));
  color:#1a8e3d;
  box-shadow:inset 0 0 0 1px rgba(52,199,89,0.28);
}
.pd-status.ongoing .pd-status-dot{background:#34c759}
.pd-status.ongoing .pd-status-dot::after{animation:pdPulseRing 2s var(--ease) infinite}

.pd-status.finished{
  background:linear-gradient(135deg,rgba(245,166,35,0.10),rgba(245,166,35,0.04));
  color:#a06c00;
  box-shadow:inset 0 0 0 1px rgba(245,166,35,0.32);
}
.pd-status.finished .pd-status-dot{background:var(--gold)}

.pd-status.unpublished,.pd-status.hiatus{
  background:rgba(105,115,134,0.08);
  color:var(--mid);
  box-shadow:inset 0 0 0 1px rgba(105,115,134,0.20);
}
.pd-status.unpublished .pd-status-dot,.pd-status.hiatus .pd-status-dot{background:var(--mid)}

@keyframes pdPulseRing{
  0%{opacity:.7;transform:scale(.55)}
  70%{opacity:0;transform:scale(1.7)}
  100%{opacity:0;transform:scale(1.7)}
}
@media (prefers-reduced-motion:reduce){.pd-status.ongoing .pd-status-dot::after{animation:none}}

/* ── Scope card (v1 wrapper) + v2 chip styling inside ── */
.pd-scope{
  padding:14px 16px;
  border:1px solid var(--hairline);border-radius:14px;
  background:var(--off);
}
.pd-scope-label{
  font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);margin-bottom:11px;
}
.pd-scope-tags{display:flex;flex-wrap:wrap;gap:7px}
.pd-chip{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:980px;
  font-family:var(--font-title);font-weight:700;font-size:0.7rem;letter-spacing:-0.005em;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  isolation:isolate;
}
.pd-chip::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  transition:opacity .4s var(--ease);
}
.pd-chip-dot{width:4px;height:4px;border-radius:50%;background:rgba(0,0,0,0.18)}
.pd-chip.inactive{
  background:rgba(0,0,0,0.04);
  color:rgba(0,0,0,0.32);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);
}
.pd-chip.inactive::before{opacity:0}
.pd-chip.active{
  background:linear-gradient(135deg,var(--orange) 0%,var(--gold) 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(242,122,15,0.32),0 0 0 1px rgba(242,122,15,0.45),inset 0 1px 0 rgba(255,255,255,0.32);
}
.pd-chip.active::before{
  background:radial-gradient(ellipse at center,rgba(242,122,15,0.45) 0%,rgba(242,122,15,0) 70%);
  filter:blur(10px);opacity:.7;inset:-5px;
  animation:pdChipBreath 3.4s ease-in-out infinite;
}
.pd-chip.active .pd-chip-dot{background:#fff;box-shadow:0 0 6px rgba(255,255,255,0.7)}
@keyframes pdChipBreath{
  0%,100%{opacity:.55;transform:scale(.96)}
  50%{opacity:.85;transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){.pd-chip.active::before{animation:none}}

/* ── Platform buttons (v1 vertical stack), refined hover ── */
.pd-platforms{display:flex;flex-direction:column;gap:8px}
.pd-platform-btn{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:12px;
  border:1px solid var(--hairline);background:var(--white);
  font-size:0.78rem;font-weight:700;color:var(--black);
  cursor:pointer;
  transition:border-color .3s ease,color .3s ease,background .3s ease,transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pd-platform-btn:hover{
  border-color:rgba(242,122,15,0.42);
  color:var(--orange);
  background:rgba(242,122,15,0.03);
  transform:translateX(3px);
  box-shadow:0 6px 16px -8px rgba(242,122,15,0.30);
}
.pd-platform-icon{width:16px;height:16px;flex-shrink:0;stroke:var(--mid);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.pd-platform-btn:hover .pd-platform-icon{stroke:var(--orange)}
.pd-platform-name{flex:0 0 auto;font-size:0.78rem;font-weight:700;letter-spacing:-0.005em}
.pd-platform-url{flex:1;min-width:0;font-size:0.66rem;font-weight:400;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;margin-right:2px}
.pd-arrow{width:14px;height:14px;flex-shrink:0;stroke:rgba(0,0,0,0.20);fill:none;stroke-width:1.6;stroke-linecap:round;transition:stroke .3s ease,transform .35s var(--ease)}
.pd-platform-btn:hover .pd-arrow{stroke:var(--orange);transform:translateX(2px)}

/* ─── Synopsis ─── */
.pd-synopsis-section{}
.pd-synopsis-label{
  font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);margin-bottom:14px;
  display:flex;align-items:center;gap:12px;
}
.pd-synopsis-label::after{content:"";flex:1;height:1px;background:var(--hairline)}
.pd-synopsis{
  font-size:0.94rem;font-weight:300;line-height:1.82;
  /* v0.28.5 - solid black (was rgba 0.78). Vic flagged that the
     synopsis had two color tones - the base p body was at 78% opacity
     and the first paragraph overrode to 90%, producing a subtle
     two-tone read. Unified to solid var(--black) on both rules so
     all paragraphs match. */
  color:var(--black);max-width:64ch;
}
.pd-synopsis p:first-child{font-size:1rem;font-weight:400;color:var(--black);line-height:1.7}
.pd-synopsis p+p{margin-top:16px}
.pd-synopsis em{font-style:normal;color:var(--orange);font-weight:600}
/* v0.32.48 — explicit bold on <strong>/<b> so Block Editor bold runs
   render consistently inside the synopsis (the parent is weight 300
   and the browser-default `bolder` wasn't reading cleanly). */
.pd-synopsis strong,
.pd-synopsis b { font-weight: 700; color: var(--black); }

═══════════════════════════════════════ */
.pd-right-label{
  display:flex;align-items:center;gap:12px;
  font-size:0.6rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);margin-bottom:22px;
}
.pd-right-label::before,.pd-right-label::after{content:"";flex:1;height:1px;background:var(--hairline)}


/* ═══════════════════════════════════════
   6b · SYNOPSIS BLOCK (full-width container)
   Project Notes label and prose both span the full content width — no
   centered narrow column. The `.pd-synopsis` 64ch cap from 05 is
   overridden so the prose extends to the right edge, aligned with the
   project-notes divider line.
═══════════════════════════════════════ */
#pd-synopsis-block{
  max-width:1200px;margin:0 auto;
  padding:18px 24px 20px;     /* v0.1.3: top 30→18 to tighten gap below gallery */
}
#pd-synopsis-block .pd-synopsis-section{max-width:none;margin:0}
#pd-synopsis-block .pd-synopsis{max-width:none}



/* ═══════════════════════════════════════
   v0.27.2 - Gallery polish (Vic feedback)
   ───────────────────────────────────────
   - Hide .gal-stage-mark (orientation label like "PORTRAIT 3:4")
     when the .gal-media has an inline background-image set. The
     mark was a prototype-mockup placeholder for when no real image
     existed; in the WP port with real images it's just visual
     noise overlaying the artwork. The CSS selector matches when
     style="...background-image..." is on the element OR its parent
     stage (defensive - depending on where PHP renders the inline
     style we want either path to hide the label).
   - .gal-media hover: orange ring + colored bloom shadow, same
     visual language as .pd-cover hover on the webtoon detail page.
     Layered ON TOP of the existing translateZ lift + base shadow
     stack so the hover state reads as "lifted + glowing".
═══════════════════════════════════════ */

.gal-media[style*="background-image"] .gal-stage-mark,
.gal-stage[style*="background-image"] .gal-stage-mark{
  display:none;
}

@media (hover:hover) and (pointer:fine){
  .gal-media:hover{
    /* v0.27.3 - subtler hover, mirrors About's .kp-card:hover pattern
       (page-about.css line 2382-2386). Tight 2px orange ring via
       box-shadow spread (no outline, no offset gap), then a soft
       orange bloom + closer halo. The ring sits flush against the
       image border-radius edge - no extra gap like v0.27.2's outline
       had. Much less heavy than v0.27.2's inset-rim + 3-black-drop
       stack which Vic flagged as "drop shadow too intense". */
    box-shadow:
      0 0 0 2px var(--orange),
      0 18px 50px -12px rgba(242,122,15,0.38),
      0 4px 12px -2px rgba(242,122,15,0.18);
  }
}