/*
  MIRROR ARCHIVE — shared design system
  One stylesheet, linked by every page (home, directory, 34 detail pages).
  Cached once by the browser, then free on every subsequent navigation —
  this is also *why* it's a good idea: it removes 30+ copies of the same
  ~500 lines of CSS from the repo and guarantees every page stays in sync.

  Source specs:
    - MOTION_SPEC.md (motion vars, choreography, the "absolutely forbidden" list)
    - archive-redesign.html mockup (palette, type, component shapes)
*/

@font-face{
  font-family:'Saol Display';
  src:url('/assets/fonts/SaolDisplay-Light.ttf') format('truetype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Saol Display';
  src:url('/assets/fonts/SaolDisplay-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Saol Display';
  src:url('/assets/fonts/SaolDisplay-LightItalic.ttf') format('truetype');
  font-weight:300; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'BT Beau Sans';
  src:url('/assets/fonts/BT-BeauSans-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'BT Beau Sans';
  src:url('/assets/fonts/BT-BeauSans-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'BT Beau Sans';
  src:url('/assets/fonts/BT-BeauSans-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* ---- palette ---- */
  --accent:#BC224C;
  --accent-dark:#8f1a3b;
  --ink:#231017;
  --ink-soft:#5c4750;
  --ink-faint:#9c8790;
  --cream:#faf5f6;
  --cream-2:#fdf9f6;
  --hairline:rgba(35,16,23,0.10);
  --hairline-soft:rgba(35,16,23,0.06);
  --serif:'Saol Display', 'Playfair Display', Georgia, serif;
  --sans:'BT Beau Sans', 'Plus Jakarta Sans', -apple-system, sans-serif;

  /* ---- motion (MOTION_SPEC §1 — do not hardcode magic numbers) ---- */
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit:     cubic-bezier(0.55, 0, 0.55, 0.2);
  --ease-move:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-hero:      1000ms;
  --dur-content:   700ms;
  --dur-micro:     320ms;
  --dur-cross:     600ms;
  --stagger:       90ms;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ width:100%; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(120% 100% at 100% 0%, #fdeef1 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, #fbe9ee 0%, transparent 60%),
    linear-gradient(180deg, #faf5f6 0%, #f7eef0 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* Elegant, understated focus ring — MOTION_SPEC §5 */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:3px;
  box-shadow:0 0 0 3px rgba(188,34,76,0.4);
  border-radius:2px;
}

/* Fine film-grain to stop gradient banding — MOTION_SPEC §3 */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== MOTION PRIMITIVES ===================== */
@keyframes revealUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes revealHero{
  from{ opacity:0; transform:translateY(16px) scale(1.03); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
@keyframes breathe{
  0%,100%{ opacity:0.85; }
  50%{ opacity:1; }
}
@keyframes shimmerSweep{
  0%{        background-position:-160% 0; opacity:0; }
  8%{        opacity:0.9; }
  38%{       opacity:0.9; }
  46%{       background-position:220% 0; opacity:0; }
  100%{      background-position:220% 0; opacity:0; }
}
@keyframes dustDrift{
  0%{   transform:translate(0,0);   opacity:0.15; }
  50%{  transform:translate(5px,-16px); opacity:0.4; }
  100%{ transform:translate(0,0);   opacity:0.15; }
}
@keyframes revealCta{
  from{ opacity:0; transform:translateY(14px); box-shadow:0 14px 28px -12px rgba(188,34,76,0); }
  to{   opacity:1; transform:translateY(0);    box-shadow:0 20px 42px -16px rgba(188,34,76,0.4); }
}
.reveal-cta{
  opacity:0;
  animation:revealCta var(--dur-content) var(--ease-entrance) forwards;
  border-radius:16px;
}

/* Entrance choreography utilities — apply .reveal + .reveal-N (N = step index) */
.reveal{
  opacity:0;
  animation:revealUp var(--dur-content) var(--ease-entrance) forwards;
  will-change:transform, opacity;
}
.reveal-hero{
  opacity:0;
  animation:revealHero var(--dur-hero) var(--ease-entrance) forwards;
  will-change:transform, opacity;
}
.reveal-0{ animation-delay:0ms; }
.reveal-1{ animation-delay:calc(var(--stagger) * 1); }
.reveal-2{ animation-delay:calc(var(--stagger) * 2); }
.reveal-3{ animation-delay:calc(var(--stagger) * 3); }
.reveal-4{ animation-delay:calc(var(--stagger) * 4); }
.reveal-5{ animation-delay:calc(var(--stagger) * 5); }
.reveal-6{ animation-delay:calc(var(--stagger) * 6); }
.reveal-7{ animation-delay:calc(var(--stagger) * 7); }
.reveal-8{ animation-delay:calc(var(--stagger) * 8); }
.reveal-9{ animation-delay:calc(var(--stagger) * 9); }

.float-loop{ animation:floatY 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:200ms !important;
    animation-delay:0ms !important;
    transition-duration:200ms !important;
    scroll-behavior:auto !important;
  }
  .reveal, .reveal-hero{
    animation-name:fadeIn !important;
    transform:none !important;
  }
  .float-loop, .dust span, .shimmer, .logo-breathe{
    animation:none !important;
  }
}

/* ===================== HEADER (shared: home / directory / detail) ===================== */
header.site{
  position:relative; z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 64px;
  height:84px;
  border-bottom:1px solid var(--hairline);
  background:rgba(253,249,246,0.7);
  backdrop-filter:blur(6px);
}

.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{ height:20px; width:auto; display:block; filter:invert(1); }
.logo-archive{
  font-family:var(--sans); font-weight:500; font-size:11px;
  letter-spacing:0.32em; text-transform:uppercase; color:var(--accent);
  padding-top:2px;
}

.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:13px; letter-spacing:0.02em; color:var(--ink-faint);
}
.breadcrumb a{ position:relative; color:var(--ink-faint); }
.breadcrumb a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:var(--accent); transition:right var(--dur-micro) var(--ease-move);
}
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb a:hover::after{ right:0; }
.breadcrumb .sep{ color:var(--hairline); font-size:12px; }
.breadcrumb .current{ color:var(--ink); font-weight:500; }

.btn-collection{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:0.03em; color:var(--ink);
  padding:10px 20px; border:1px solid var(--hairline); border-radius:999px;
  background:#fff;
  transition:border-color var(--dur-micro) var(--ease-move),
             color var(--dur-micro) var(--ease-move),
             box-shadow var(--dur-micro) var(--ease-move),
             transform var(--dur-micro) var(--ease-move);
}
.btn-collection:hover{
  border-color:var(--accent); color:var(--accent);
  box-shadow:0 4px 14px rgba(188,34,76,0.12);
}
.btn-collection:active{ transform:scale(0.97); filter:brightness(1.08); }

/* ===================== MAIN LAYOUT ===================== */
main{
  position:relative; z-index:1;
  display:flex;
  padding:56px 64px 48px;
  gap:56px;
  align-items:stretch;
}

/* ---- viewer (left, 62%) ---- */
.viewer-col{ flex:0 0 62%; max-width:62%; }

.viewer-frame{
  position:relative; width:100%; height:640px;
  border-radius:18px; overflow:hidden;
  background:
    radial-gradient(120% 140% at 30% 20%, #fff 0%, #fdeef1 32%, #f6d9e2 58%, #eec3d1 78%, #e2adbe 100%);
  border:1px solid var(--hairline);
  box-shadow:0 30px 60px -25px rgba(188,34,76,0.28), inset 0 0 0 1px rgba(255,255,255,0.4);
}
.viewer-frame::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(35,16,23,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,16,23,0.035) 1px, transparent 1px);
  background-size:32px 32px; opacity:0.5; pointer-events:none;
}
.viewer-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent;
  opacity:0; transition:opacity var(--dur-cross) var(--ease-entrance);
}
.viewer-frame iframe.is-ready{ opacity:1; }

.viewer-tag{
  position:absolute; top:24px; left:24px; z-index:3;
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
  background:rgba(255,255,255,0.65); padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.8);
}
.viewer-tag .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px rgba(188,34,76,0.18);
}
.viewer-index{
  position:absolute; top:24px; right:24px; z-index:3;
  font-size:11px; letter-spacing:0.1em; color:var(--ink-faint);
  background:rgba(255,255,255,0.65); padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.8);
}
.viewer-index b{ color:var(--ink); font-weight:600; }

.viewer-controls-hint{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:0.04em; color:var(--ink-soft);
  background:rgba(255,255,255,0.75); padding:11px 22px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.9); box-shadow:0 8px 24px rgba(35,16,23,0.08);
  transition:opacity var(--dur-cross) var(--ease-exit);
}
.viewer-controls-hint b{ color:var(--accent); font-weight:600; }
.viewer-controls-hint .divider{ width:1px; height:12px; background:var(--hairline); }

/* Dust motes — decorative depth, MOTION_SPEC §3 */
.dust{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.dust span{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:rgba(255,255,255,0.9); opacity:0.2;
  animation:dustDrift 16s ease-in-out infinite;
}
.dust span:nth-child(1){ top:18%; left:22%; animation-duration:14s; }
.dust span:nth-child(2){ top:30%; left:70%; animation-duration:18s; animation-delay:-3s; }
.dust span:nth-child(3){ top:55%; left:40%; animation-duration:15s; animation-delay:-7s; }
.dust span:nth-child(4){ top:68%; left:80%; animation-duration:20s; animation-delay:-2s; }
.dust span:nth-child(5){ top:78%; left:15%; animation-duration:17s; animation-delay:-9s; }
.dust span:nth-child(6){ top:40%; left:55%; animation-duration:19s; animation-delay:-5s; }

/* ---- loading skeleton: "loading is a stage" — MOTION_SPEC §6 ---- */
.viewer-skeleton{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:
    radial-gradient(120% 140% at 30% 20%, #fff 0%, #fdeef1 32%, #f6d9e2 58%, #eec3d1 78%, #e2adbe 100%);
  transition:opacity var(--dur-cross) var(--ease-exit), transform var(--dur-cross) var(--ease-exit);
}
.viewer-skeleton .sk-logo{ height:22px; width:auto; filter:invert(1); animation:breathe 3s ease-in-out infinite; }
.viewer-skeleton .sk-mark{
  font-size:96px; line-height:1; color:transparent;
  background:linear-gradient(155deg, #ffffff 0%, #f3c9d6 28%, var(--accent) 55%, #7a1636 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 20px 30px rgba(122,22,54,0.3));
  position:relative; user-select:none;
}
.viewer-skeleton .sk-mark::after{
  content:"◆"; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmerSweep 5s ease-in-out infinite;
}
.viewer-skeleton .sk-copy{
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); opacity:0.75;
}
.viewer-skeleton .sk-bar{
  width:160px; height:2px; border-radius:2px; background:rgba(35,16,23,0.08); overflow:hidden;
}
.viewer-skeleton .sk-bar-fill{
  height:100%; width:0%; background:var(--accent);
  transition:width 1.4s var(--ease-move);
}
.viewer-skeleton.is-hidden{ opacity:0; transform:scale(1.02); pointer-events:none; }

.viewer-error{
  position:absolute; inset:0; z-index:5;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center; padding:40px;
  background:linear-gradient(180deg, #fdf5f6, #f8e7ec);
}
.viewer-error.is-visible{ display:flex; }
.viewer-error .err-title{ font-family:var(--serif); font-size:22px; color:var(--ink); }
.viewer-error .err-body{ font-size:13.5px; color:var(--ink-soft); max-width:36ch; line-height:1.6; }
.viewer-error a{
  font-size:12px; font-weight:600; letter-spacing:0.06em; color:var(--accent);
  border-bottom:1px solid rgba(188,34,76,0.35); padding-bottom:2px;
}

.thumb-strip{ display:flex; gap:12px; margin-top:20px; }
.thumb{
  width:72px; height:72px; border-radius:12px;
  background:linear-gradient(160deg,#fdeef1,#eec3d1);
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--accent); opacity:0.55;
  transition:opacity var(--dur-micro) var(--ease-move), transform var(--dur-micro) var(--ease-move);
}
.thumb.active{ opacity:1; border-color:var(--accent); box-shadow:0 8px 18px -8px rgba(188,34,76,0.5); }
.thumb:hover{ opacity:0.9; transform:translateY(-2px); }

/* ---- content (right, 38%) ---- */
.content-col{ flex:0 0 38%; max-width:38%; display:flex; flex-direction:column; padding-top:6px; }

.piece-tag{
  display:inline-flex; align-self:flex-start;
  font-size:11px; font-weight:700; letter-spacing:0.16em; color:var(--accent);
  background:rgba(188,34,76,0.08); border:1px solid rgba(188,34,76,0.22);
  padding:6px 14px; border-radius:999px; margin-bottom:20px;
}

h1.piece-title{
  font-family:var(--serif); font-weight:500; font-size:42px; line-height:1.15;
  letter-spacing:-0.01em; color:var(--ink); margin-bottom:6px;
}
.piece-subtitle{
  font-family:var(--serif); font-weight:300; font-style:italic; font-size:16px;
  color:var(--ink-faint); margin-bottom:28px;
}

.story{
  font-size:15.5px; line-height:1.75; color:var(--ink-soft);
  margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid var(--hairline-soft);
}
.story strong{ color:var(--ink); font-weight:600; }

.spec-table{ margin-bottom:32px; }
.spec-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--hairline-soft); font-size:14px;
}
.spec-row:first-child{ padding-top:0; }
.spec-label{
  color:var(--ink-faint); letter-spacing:0.03em; text-transform:uppercase;
  font-size:11px; font-weight:600;
}
.spec-value{ color:var(--ink); font-weight:500; text-align:right; font-family:var(--serif); }

.cta-block{
  background:linear-gradient(160deg,#ffffff, #fdf2f4);
  border:1px solid rgba(188,34,76,0.16); border-radius:16px;
  padding:26px 26px 22px; margin-bottom:26px;
}
.cta-primary{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:16px 22px; background:var(--accent); color:#fff;
  font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:0.02em;
  border-radius:10px; border:none; cursor:pointer;
  transition:background var(--dur-micro) var(--ease-move),
             transform var(--dur-micro) var(--ease-move),
             box-shadow var(--dur-micro) var(--ease-move);
  box-shadow:0 14px 28px -12px rgba(188,34,76,0.55);
}
.cta-primary:hover{ background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 18px 32px -12px rgba(188,34,76,0.65); }
.cta-primary:active{ transform:translateY(0) scale(0.97); filter:brightness(1.08); }
.cta-primary .arrow{ font-size:16px; transition:transform var(--dur-micro) var(--ease-move); }
.cta-primary:hover .arrow{ transform:translateX(3px); }

.cta-sub{ text-align:center; font-size:12px; color:var(--ink-faint); margin-top:12px; letter-spacing:0.01em; }

.meta-line{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap; }
.meta-line .badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  background:rgba(35,16,23,0.04); border:1px solid var(--hairline); font-weight:500; color:var(--ink-soft);
}
.meta-line .badge .dot{ width:5px; height:5px; border-radius:50%; background:#8a9a7a; }

/* ===================== FOOTER NAV (detail pages) ===================== */
footer.piece-nav{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 64px 46px; margin-top:8px; gap:16px;
}
.nav-side{
  display:flex; align-items:center; gap:14px; max-width:360px;
  font-size:13.5px; color:var(--ink-soft);
  padding:14px 18px; border-radius:12px; border:1px solid transparent;
  transition:background var(--dur-micro) var(--ease-move),
             border-color var(--dur-micro) var(--ease-move),
             box-shadow var(--dur-micro) var(--ease-move);
}
.nav-side:hover{ background:#fff; border-color:var(--hairline); box-shadow:0 12px 26px -16px rgba(35,16,23,0.18); }
.nav-side.next{ justify-content:flex-end; text-align:right; margin-left:auto; }
.nav-thumb{
  width:44px; height:44px; border-radius:10px;
  background:linear-gradient(160deg,#fdeef1,#eec3d1);
  display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:16px; flex-shrink:0;
}
.nav-label{ font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:2px; }
.nav-name{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.nav-center{
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint);
  display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.nav-center .line{ width:36px; height:1px; background:var(--hairline); }
.nav-back{
  margin:0 auto; display:flex; align-items:center; gap:10px;
  font-size:13.5px; color:var(--ink-soft); padding:14px 22px; border-radius:999px;
  border:1px solid var(--hairline);
  transition:border-color var(--dur-micro) var(--ease-move), color var(--dur-micro) var(--ease-move);
}
.nav-back:hover{ border-color:var(--accent); color:var(--accent); }

/* ===================== DIRECTORY + HOME GRID ===================== */
.hero{
  position:relative; z-index:1; text-align:center;
  padding:88px 24px 56px; max-width:760px; margin:0 auto;
}
.hero .eyebrow{
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--accent);
  font-weight:600; margin-bottom:18px;
}
.hero h1{
  font-family:var(--serif); font-weight:300; font-size:clamp(36px,5vw,64px);
  line-height:1.08; letter-spacing:-0.01em; color:var(--ink); margin-bottom:18px;
}
.hero p{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); }

.piece-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:28px; max-width:1280px; margin:0 auto; padding:0 64px 96px;
}
.piece-card{
  display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,0.55); border:1px solid var(--hairline);
  transition:transform var(--dur-micro) var(--ease-move),
             box-shadow var(--dur-micro) var(--ease-move),
             border-color var(--dur-micro) var(--ease-move);
}
.piece-card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 50px -24px rgba(35,16,23,0.24);
  border-color:rgba(188,34,76,0.28);
}
.piece-card .card-media{
  position:relative; aspect-ratio:1/1;
  background:radial-gradient(120% 130% at 30% 18%, #fff 0%, #fdeef1 34%, #f2cdd9 62%, #e2adbe 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.piece-card .card-media::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(35,16,23,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,16,23,0.03) 1px, transparent 1px);
  background-size:26px 26px;
}
.piece-card .card-mark{
  font-size:64px; line-height:1; color:transparent;
  background:linear-gradient(155deg, #ffffff 0%, #f3c9d6 28%, var(--accent) 55%, #7a1636 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 14px 22px rgba(122,22,54,0.28));
  transition:transform var(--dur-micro) var(--ease-move);
}
.piece-card:hover .card-mark{ transform:scale(1.06) rotate(-4deg); }
.piece-card .card-type{
  position:absolute; top:14px; left:14px;
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
  background:rgba(255,255,255,0.7); padding:6px 11px; border-radius:999px; border:1px solid rgba(255,255,255,0.85);
}
.piece-card .card-body{ padding:18px 20px 22px; }
.piece-card .card-name{ font-family:var(--serif); font-size:18px; color:var(--ink); line-height:1.3; margin-bottom:4px; }
.piece-card .card-sub{ font-size:11.5px; color:var(--ink-faint); letter-spacing:0.02em; }

/* skeleton placeholder cards while catalog.json loads (fixed size = no layout shift) */
.piece-card.is-skeleton{ pointer-events:none; }
.piece-card.is-skeleton .card-media{ background:linear-gradient(100deg, #f3e7ea 20%, #fbeef1 40%, #f3e7ea 60%); background-size:300% 100%; animation:shimmerSweep 2.4s ease-in-out infinite; }
.piece-card.is-skeleton .card-mark,
.piece-card.is-skeleton .card-type{ display:none; }
.piece-card.is-skeleton .card-body{ display:flex; flex-direction:column; gap:8px; }
.piece-card.is-skeleton .card-body::before,
.piece-card.is-skeleton .card-body::after{
  content:""; display:block; height:10px; border-radius:4px; background:var(--hairline-soft);
}
.piece-card.is-skeleton .card-body::after{ width:60%; }

.grid-state{
  grid-column:1/-1; text-align:center; padding:48px 24px;
  font-size:14px; color:var(--ink-soft);
}
.grid-state a{ color:var(--accent); font-weight:600; border-bottom:1px solid rgba(188,34,76,0.35); }

.site-footer{
  position:relative; z-index:1; text-align:center;
  padding:40px 24px 56px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-faint); border-top:1px solid var(--hairline-soft); margin-top:24px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  header.site{ padding:0 24px; }
  .breadcrumb{ display:none; }
  main{ flex-direction:column; padding:32px 24px 40px; gap:32px; }
  .viewer-col, .content-col{ max-width:100%; flex:1 1 auto; }
  .viewer-frame{ height:420px; }
  footer.piece-nav{ flex-direction:column; padding:20px 24px 40px; }
  .nav-side.next{ margin-left:0; }
  .piece-grid{ padding:0 24px 64px; }
  .hero{ padding:56px 24px 40px; }
}

/* ===== Real render thumbnails (chụp từ iJewel, tools/gen_viewers.py) ===== */
.viewer-skeleton .sk-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:.92;
}
.viewer-skeleton .sk-logo, .viewer-skeleton .sk-mark,
.viewer-skeleton .sk-bar, .viewer-skeleton .sk-copy{ position:relative; z-index:2; }
.viewer-skeleton:has(.sk-poster) .sk-mark{ display:none; }
.viewer-skeleton:has(.sk-poster) .sk-logo{ display:none; }
.viewer-skeleton:has(.sk-poster) .sk-bar,
.viewer-skeleton:has(.sk-poster) .sk-copy{
  position:absolute; left:50%; transform:translateX(-50%);
}
.viewer-skeleton:has(.sk-poster) .sk-bar{ bottom:64px; }
.viewer-skeleton:has(.sk-poster) .sk-copy{ bottom:36px; }
.nav-thumb.has-photo{ overflow:hidden; padding:0; }
.nav-thumb.has-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.piece-card .card-media{ overflow:hidden; }
.piece-card .card-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform 900ms var(--ease-entrance, cubic-bezier(0.22,1,0.36,1));
}
.piece-card:hover .card-photo{ transform:scale(1.045); }
.piece-card:hover .card-mark{ opacity:0; }

/* ===== Viewer-first detail layout (quyết định CTO: bỏ story/spec/prev-next) ===== */
.viewer-col--hero{ width:100%; max-width:none; }
.viewer-col--hero .viewer-frame{ height:calc(100vh - 220px); min-height:520px; }
main:has(.viewer-col--hero){ display:block; max-width:1600px; margin:0 auto; padding:24px 40px 0; }
.piece-bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 8px 10px; flex-wrap:wrap;
}
.piece-bar__left{ display:flex; align-items:baseline; gap:16px; min-width:0; }
.piece-title--bar{ font-size:clamp(24px,2.6vw,38px); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.piece-bar__right{ display:flex; align-items:center; gap:18px; flex:none; }
.cta-primary--bar{ padding:12px 22px; font-size:14px; }
.piece-nav--minimal{ justify-content:center; padding:18px 0 34px; }
@media (max-width:760px){
  main:has(.viewer-col--hero){ padding:12px 14px 0; }
  .viewer-col--hero .viewer-frame{ height:calc(100vh - 300px); min-height:380px; }
  .piece-title--bar{ white-space:normal; }
}