/* ============================================================
   THEMES — REAL CONTENT + SCROLL/STATIC COMPARISON
   Section skeletons for the real yanlingzeng.com content, a
   carousel/stack rail driven by [data-mode], per-look flourishes
   for the three shortlisted styles, and the side-by-side compare
   Section layout for the live site. Load after watercolor-theme.css.
   (Exploration-only: gallery-board + theme packs 01–02 live under explorations/styles/.)
   ============================================================ */

/* ----------------------------------------------------------------
   COMPARE SHELL (board level)
   ---------------------------------------------------------------- */
.cmp-head{ max-width:1180px; margin:0 auto; padding:48px 34px 0; }
.cmp-kicker{ font-family:var(--font-label, "IBM Plex Mono", monospace); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--board-mute); margin:0 0 16px; }
.cmp-title{ font-family:var(--font-body, system-ui, sans-serif); font-weight:500; font-size:clamp(28px,3.6vw,46px); line-height:1.04; letter-spacing:-.012em; margin:0; max-width:24ch; }
.cmp-title em{ font-style:italic; color:#d8a06a; }
.cmp-sub{ margin:16px 0 0; max-width:64ch; font-size:13px; line-height:1.7; color:#c7bca6; }

.cmp-switch{ display:inline-flex; gap:4px; margin:24px 0 4px; padding:5px; border:1px solid var(--board-line); border-radius:999px; background:rgba(255,255,255,.04); }
.cmp-switch button{ font-family:var(--font-label, "IBM Plex Mono", monospace); font-size:12px; letter-spacing:.04em; color:var(--board-mute); background:none; border:none; cursor:pointer; padding:8px 16px; border-radius:999px; transition:.18s; }
.cmp-switch button:hover{ color:var(--board-ink); }
.cmp-switch button[aria-pressed="true"]{ background:#efe7d6; color:#231d15; font-weight:700; }

.cmp-cols{ display:flex; gap:30px; justify-content:center; align-items:flex-start; padding:26px 34px 84px; flex-wrap:wrap; }
.cmp-col{ width:486px; max-width:100%; }
.cmp-col-head{ display:flex; align-items:baseline; gap:11px; margin:0 2px 13px; }
.cmp-tag{ font-family:var(--font-label, "IBM Plex Mono", monospace); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#231d15; background:#d8a06a; padding:4px 9px; border-radius:999px; }
.cmp-col.is-scroll .cmp-tag{ background:#8fae9b; }
.cmp-col-h{ font-size:15px; font-weight:700; color:var(--board-ink); }
.cmp-col-note{ font-size:12px; color:var(--board-mute); margin-left:auto; text-align:right; }

.cmp-frame{ height:80vh; min-height:600px; overflow-y:auto; overflow-x:hidden; border-radius:10px;
  border:1px solid var(--board-line); background:#0c0a08;
  box-shadow:0 40px 70px -36px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05);
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
.cmp-frame::-webkit-scrollbar{ width:9px; }
.cmp-frame::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:99px; }
.cmp-frame .page{ width:100%; margin:0; }

@media (max-width:1040px){ .cmp-frame{ height:auto; min-height:0; } }

/* single clean page — compare/exploration preview (shipped site uses .app.single + portfolio-site.css) */
.app:not(.single) .single-stage{ display:flex; justify-content:center; padding:28px 24px 90px; }
.app:not(.single) .single-stage .page{ width:min(720px,100%); --pw:720px; border-radius:9px;
  box-shadow:0 50px 90px -46px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05); }

/* ----------------------------------------------------------------
   REAL-CONTENT SECTION SKELETON (neutral — themed below)
   ---------------------------------------------------------------- */
.page .rsec{ padding:32px 32px 12px; scroll-margin-top:90px; }
.page .rsec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.page .rsec-sub{ font-size:14px; line-height:1.5; opacity:.82; margin:7px 0 22px; max-width:42ch; }
.page .drag-hint{ font-family:var(--font-label, "IBM Plex Mono", monospace); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); white-space:nowrap; display:flex; align-items:center; gap:6px; }
.page .drag-hint::after{ content:"→"; font-size:13px; animation:nudge 1.4s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(4px) } }

/* rails: stack vs horizontal scroll */
.page .rail[data-mode="static"]{ display:flex; flex-direction:column; gap:30px; }
.page .rail[data-mode="scroll"]{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px; scrollbar-width:thin; }
.page .rail[data-mode="scroll"] .pcard{ flex:0 0 var(--cardw,278px); scroll-snap-align:start; }

.page .pcard{ display:flex; flex-direction:column; }
.page .rail[data-mode="static"] .pcard .thumb{ height:236px; }
.page .rail[data-mode="scroll"] .pcard .thumb{ height:168px; }
.page .pcard-tags{ font-family:var(--font-label, "IBM Plex Mono", monospace); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0; }
.page .pcard-titlewrap{ display:flex; flex-direction:column; gap:4px; margin-top:13px; position:relative; }
.page .pcard-summary{ font-size:14px; line-height:1.5; opacity:1; margin:6px 0 0; }
.page .pcard .work-desc{ margin-top:9px; }

/* discover tiles */
.page .drail[data-mode="static"]{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.page .drail[data-mode="scroll"]{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-width:thin; }
.page .drail[data-mode="scroll"] .dtile{ flex:0 0 196px; scroll-snap-align:start; }
.page .dthumb{ width:100%; height:132px; }
.page .dtile-row{ display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.page .dtile-title{ font-size:14px; font-weight:600; }
.page .dtile-kind{ font-family:var(--font-label, "IBM Plex Mono", monospace); font-size:10px; opacity:.6; }

/* reviews */
.page .rrail[data-mode="static"]{ display:flex; flex-direction:column; gap:18px; }
.page .rrail[data-mode="scroll"]{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px; scrollbar-width:thin; }
.page .rrail[data-mode="scroll"] .rcard{ flex:0 0 322px; scroll-snap-align:start; }
.page .rcard{ border:1px solid var(--soft); border-radius:12px; padding:22px 22px 20px; margin:0; background:rgba(0,0,0,.018); }
.page .rquote{ display:block; font-size:42px; line-height:.1; height:22px; color:var(--accent); }
.page .rcard-text{ font-size:13.5px; line-height:1.58; margin:6px 0 16px; }
.page .rcard-by{ display:flex; flex-direction:column; gap:2px; }
.page .rby-name{ font-weight:700; font-size:13px; }
.page .rby-role{ font-family:var(--font-label, "IBM Plex Mono", monospace); font-size:10px; opacity:.66; }

/* shared rail scrollbars */
.page .rail::-webkit-scrollbar,.page .drail::-webkit-scrollbar,.page .rrail::-webkit-scrollbar{ height:7px; }
.page .rail::-webkit-scrollbar-thumb,.page .drail::-webkit-scrollbar-thumb,.page .rrail::-webkit-scrollbar-thumb{ background:var(--soft); border-radius:99px; }

/* about + contact */
.page .about{ padding-top:30px; }
.page .contact{ padding:48px 32px 52px; margin-top:18px; border-top:1px solid var(--soft); display:flex; flex-direction:column; gap:28px; }
.page .contact-cta{ font-size:14px; line-height:1.5; opacity:.82; margin:0; max-width:36ch; }
.page .contact-h{ font-size:30px; line-height:1.06; margin:2px 0 0; }
.page .contact-links{ display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; }
.page .contact-links a{ font-family:var(--font-label, "IBM Plex Mono", monospace); font-size:12px; letter-spacing:.04em; padding:9px 15px; border:1px solid var(--soft); border-radius:999px; color:inherit; text-decoration:none; transition:.18s; }
.page .contact-links a:hover{ background:var(--accent); color:#fff; border-color:transparent; }
.page .contact .foot-row{ margin-top:20px; display:flex; gap:20px; font-family:var(--font-label, "IBM Plex Mono", monospace); font-size:11px; opacity:.62; }

/* ================================================================
   01 · NEWSPRINT
   ================================================================ */
.s-newsprint .rsec{ border-top:1px solid #1a1813; }
.s-newsprint .sec-label{ border:none; padding:0; text-align:left; }
.s-newsprint .pcard-tags{ color:#8a1f12; }
.s-newsprint .dtile-title{ font-weight:700; }
.s-newsprint .rcard{ border:1px solid #1a1813; border-radius:0; background:transparent; }
.s-newsprint .rquote{ font-family:var(--font-body, system-ui, sans-serif),serif; }
.s-newsprint .rcard-text{ font-style:italic; }
.s-newsprint .contact-h{ font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.01em; font-size:42px; }

/* ================================================================
   02 · MID-CENTURY
   ================================================================ */
.s-midcentury .pcard-tags{ color:#c2622d; }
.s-midcentury .pcard-sub{ color:#9a7b3c; opacity:1; }
.s-midcentury .dtile-title{ font-weight:800; color:#2c4a45; }
.s-midcentury .rcard{ background:#2c4a45; color:#efe6d2; border:none; }
.s-midcentury .rquote{ color:#e0a32e; }
.s-midcentury .rby-name{ color:#e0a32e; }
.s-midcentury .contact-h{ font-weight:800; color:#2c4a45; }
.s-midcentury .contact-links a{ border-color:rgba(44,74,69,.3); }

/* ================================================================
   05 · WATERCOLOR
   ================================================================ */
.s-watercolor .pcard-tags{ color:#5a7a8a; }
.s-watercolor .dtile-title{ font-weight:600; }
.s-watercolor .rcard{ border:1px solid rgba(44,40,35,.12); border-radius:12px; position:relative; overflow:hidden;
  background:
    radial-gradient(64% 58% at 24% 22%, rgba(90,122,138,.20), transparent 72%),
    radial-gradient(58% 56% at 78% 78%, rgba(184,94,62,.16), transparent 72%), #f5f2ea; }
.s-watercolor .rquote{ font-family:var(--font-head, "Spectral", Georgia, serif); }
.s-watercolor .rcard-text{ font-style:italic; }
.s-watercolor .contact-h{ font-weight:600; }

/* ----------------------------------------------------------------
   REAL IMAGES — photo fills the themed thumb; decorations suppressed
   ---------------------------------------------------------------- */
.page .thumb.has-img,
.page .dthumb.has-img{
  background-color:transparent !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
}
/* Project cards — Framer thumbnails fill the 16:9 frame */
.app.single .page .pcard-media .thumb.has-img,
.app.single .page .pcard-media .dropslot.has-img {
  background-size: cover !important;
  background-position: center center !important;
}
.app.single .page .pcard-media .thumb.has-img.thumb-align-top,
.app.single .page .pcard-media .dropslot.has-img.thumb-align-top {
  background-position: center top !important;
}
.page .thumb.has-img::after,
.page .thumb.has-img::before,
.page .dthumb.has-img::after,
.page .dthumb.has-img::before{ display:none !important; }
/* watercolor/mid-century keep full colour; newsprint keeps its press-grayscale */
.s-midcentury .thumb.has-img,
.s-watercolor .thumb.has-img,
.s-midcentury .dthumb.has-img,
.s-watercolor .dthumb.has-img{ filter:none; }

/* drag-drop slots (Spanner / Mimi / JoliPay) — themed placeholder is the
   empty state; a dropped image fills it and persists in localStorage */
.page .dropslot{ position:relative; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.page .rail[data-mode="static"] .pcard .dropslot{ height:236px; }
.page .rail[data-mode="scroll"] .pcard .dropslot{ height:168px; }
.page .dropslot .dropslot-hint{ font-family:var(--font-label, "IBM Plex Mono", monospace); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); background:rgba(255,255,255,.72); backdrop-filter:blur(2px);
  padding:7px 12px; border-radius:999px; box-shadow:0 1px 0 rgba(0,0,0,.06); text-align:center; max-width:80%; }
.page .dropslot.is-over{ outline:2px dashed var(--accent); outline-offset:-5px; }
.page .dropslot.is-over .dropslot-hint{ color:var(--accent); }

/* dark-paper guards */
.app[data-paper="dark"] .page .rcard{ background:rgba(255,255,255,.04); }
.app[data-paper="dark"] .s-midcentury .rcard{ background:#21403a; }