/*
Theme Name: Don Pavlik Art
Theme URI: https://donpavlikart.com/
Author: Don Pavlik
Author URI: https://donpavlikart.com/
Description: "Two Worlds" — the studio hub for artist Don Pavlik. A classic PHP theme with a real (parchment) palette and a Kid Disco dream (night-violet) palette toggled by a lights-down switch. Includes a Sketchbook CPT, a Kayden & the Coat landing template, and the disco-ball emblem. Shape DNA: circles + rounded rectangles only.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: donpavlik-art
Tags: art, illustration, portfolio, classic, custom-colors, custom-logo, custom-menu, featured-images, theme-options, translation-ready
*/

/* ============================================================
   Don Pavlik Art — "Two Worlds" brand system
   Shape DNA: circles + rounded rects only. No triangles.
   Fonts are enqueued by functions.php (not @imported).
   ============================================================ */

/* ---------- Real world (default) ---------- */
:root {
  --bg:        #F2EBDD;   /* parchment */
  --surface:   #FBF7EF;   /* off-white card */
  --surface-2: #EFE6D4;   /* sunk panel */
  --ink:       #292524;
  --ink-soft:  #5C534B;
  --ink-faint: #6F6359;
  --accent:    #3E5C76;   /* slate blue */
  --accent-ink:#2E4759;
  --warm:      #C77F33;   /* ochre */
  --pop:       #C77F33;   /* real has no neon; pop folds into ochre */
  --line:      rgba(41,37,36,0.12);
  --line-strong: rgba(41,37,36,0.22);
  --on-accent: #FBF7EF;
  --shadow:    0 1px 2px rgba(41,37,36,.05), 0 18px 40px -24px rgba(41,37,36,.35);
  --shadow-lg: 0 2px 4px rgba(41,37,36,.06), 0 40px 80px -40px rgba(41,37,36,.45);
  --glow:      none;
  --world: 'Real world';

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 34px;
  --maxw: 1200px;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-story:   'Newsreader', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;
  --font-hand:    'Caveat', cursive;
}

/* ---------- Dream world (Kid Disco) ----------
   Applied globally via [data-world="dream"] (the lights-down toggle)
   OR locally via .world-dream (a section that's always dream).  */
[data-world="dream"], .world-dream {
  --bg:        #1B1035;   /* night violet */
  --surface:   #2A1A55;   /* indigo surface */
  --surface-2: #20123F;
  --ink:       #F4ECFF;
  --ink-soft:  #C7B8E6;
  --ink-faint: #9784BE;
  --accent:    #29D6CE;   /* electric cyan  (= slate amped) */
  --accent-ink:#7BEFE9;
  --warm:      #FFC93C;   /* spark gold     (= ochre amped) */
  --pop:       #F0379A;   /* disco magenta — dream-only pop */
  --line:      rgba(244,236,255,0.14);
  --line-strong: rgba(244,236,255,0.26);
  --on-accent: #1B1035;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 20px 50px -28px rgba(0,0,0,.8);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 50px 90px -40px rgba(0,0,0,.9);
  --glow:      0 0 0 1px rgba(240,55,154,.0), 0 0 40px -6px rgba(240,55,154,.55);
  --world: 'Kid Disco';
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .7s ease, color .7s ease;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--pop); color: #fff; }

.wrap { width: min(100% - 48px, var(--maxw)); margin-inline: auto; }
.eyebrow {
  font-family: var(--font-ui);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--accent); display: inline-block;
  background: radial-gradient(circle at 50% 50%, var(--accent) 0 4px, transparent 5px);
  flex: none;
}
.story { font-family: var(--font-story); font-size: 1.18rem; line-height: 1.7; color: var(--ink-soft); }
.hand  { font-family: var(--font-hand); }

h1,h2,h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.display { font-size: clamp(2.6rem, 6.5vw, 5.2rem); font-weight: 800; letter-spacing: -0.03em; }
.h-section { font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: -0.02em; }

/* skip link (a11y) */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--on-accent);
  padding: .8em 1.4em; border-radius: 0 0 999px 0;
  font-family: var(--font-ui); font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Buttons (pills only)
   ============================================================ */
.btn {
  font-family: var(--font-ui); font-weight: 600; font-size: .98rem;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.5em; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s ease, background-color .25s ease, color .25s, box-shadow .25s, border-color .25s;
  white-space: nowrap; text-align: center;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow), var(--glow); }
.btn-pop { background: var(--pop); color: #fff; }
.btn-pop:hover { transform: translateY(-2px); box-shadow: 0 0 40px -6px var(--pop); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}
.btn .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: background-color .7s ease, border-color .7s ease;
}
.site-head .bar { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.brandmark { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em; color: var(--ink); }
.brandmark .mk { width: 34px; height: 34px; flex: none; }
.nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav a {
  font-family: var(--font-ui); font-weight: 500; font-size: .95rem;
  padding: .5em .9em; border-radius: 999px; color: var(--ink-soft);
  transition: background-color .2s, color .2s;
}
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a.active, .nav .current-menu-item > a, .nav .current_page_item > a { color: var(--ink); font-weight: 600; }
.nav ul { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: .35rem; }

/* lights-down toggle */
.lights {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-size: .8rem; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; user-select: none;
  padding: .4rem .4rem .4rem .9rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  transition: all .25s;
}
.lights:hover { border-color: var(--accent); }
.lights .lbl { white-space: nowrap; letter-spacing: .04em; }
.switch {
  width: 52px; height: 30px; border-radius: 999px; flex: none;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  position: relative; transition: background-color .3s, border-color .3s;
}
.switch::after {
  content: ""; position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent);
  transition: left .32s cubic-bezier(.7,0,.3,1.4), background-color .3s, box-shadow .3s;
}
[data-world="dream"] .switch { background: rgba(240,55,154,.18); border-color: var(--pop); }
[data-world="dream"] .switch::after { left: 25px; background: var(--pop); box-shadow: 0 0 16px var(--pop); }

/* ============================================================
   Sections & rhythm
   ============================================================ */
section { position: relative; }
.pad { padding-block: clamp(64px, 9vw, 128px); }
.pad-sm { padding-block: clamp(48px, 6vw, 84px); }
.kicker-row { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.lede { max-width: 46ch; }

/* placeholder art slots (empty-state — only shown when no image is provided) */
.slot {
  position: relative; border-radius: var(--r-md);
  background:
    repeating-linear-gradient(45deg, transparent 0 13px, color-mix(in srgb, var(--ink) 4%, transparent) 13px 14px),
    var(--surface-2);
  border: 1.5px dashed var(--line-strong);
  display: grid; place-items: center; text-align: center;
  color: var(--ink-faint); overflow: hidden;
  transition: background-color .7s, border-color .7s;
}
.slot .tag {
  font-family: var(--font-ui); font-weight: 600; font-size: .8rem;
  letter-spacing: .04em; padding: .5em 1em; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line); color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: .5em;
}
.slot .tag::before { content:""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot.has-image { background: var(--surface-2); border: 0; }
.slot.has-image .tag { display: none; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, background-color .7s, border-color .7s;
}
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ============================================================
   Disco-ball badge (the one allowed-intricate mark)
   Filled by brand.js (or rendered server-side by inc/disco-ball.php)
   ============================================================ */
.discoball {
  display: inline-block; line-height: 0;
  --db-base: #20123F; --db-face: #6E58A8;
  --db-c: #29D6CE; --db-p: #F0379A; --db-g: #FFC93C;
  --db-rim: rgba(255,255,255,.24);
}
.discoball svg { display: block; width: 100%; height: 100%; }

/* dot-grid decorative motif */
.dotgrid {
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 22px 22px; color: var(--line-strong);
  pointer-events: none;
}

/* concentric-circle motif */
.rings {
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 28%, var(--line) 28% calc(28% + 1.5px), transparent calc(28% + 1.5px) 46%),
    radial-gradient(circle, transparent 0 46%, var(--line) 46% calc(46% + 1.5px), transparent calc(46% + 1.5px) 66%),
    radial-gradient(circle, transparent 0 66%, var(--line) 66% calc(66% + 1.5px), transparent calc(66% + 1.5px) 86%);
  pointer-events: none;
}

/* ============================================================
   Newsletter
   ============================================================ */
.news-form { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 460px; }
.news-form .field { flex: 1 1 220px; position: relative; }
.news-form input[type="email"] {
  width: 100%; font-family: var(--font-ui); font-size: 1rem;
  padding: .9em 1.1em; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.news-form input::placeholder { color: var(--ink-faint); }
.news-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.news-form.invalid input { border-color: var(--pop); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pop) 18%, transparent); }
.news-msg { font-size: .85rem; margin-top: .7rem; min-height: 1.2em; color: var(--ink-soft); font-family: var(--font-ui); }
.news-msg.err { color: var(--pop); }
.news-success {
  display: none; align-items: center; gap: .8rem;
  font-family: var(--font-story); font-size: 1.15rem; color: var(--ink);
}
.news-success .check {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-size: 1.3rem;
  animation: pop .4s cubic-bezier(.5,1.6,.4,1) both;
}
.news-wrap.done .news-form, .news-wrap.done .news-msg { display: none; }
.news-wrap.done .news-success { display: flex; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ============================================================
   Footer
   ============================================================ */
.site-foot { background: var(--surface); border-top: 1px solid var(--line); transition: background-color .7s, border-color .7s; }

/* social circular badges */
.social { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink);
  transition: transform .2s, background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.social:hover { transform: translateY(-4px); background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow); }
.social svg { width: 26px; height: 26px; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* utility */
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.center { text-align: center; }
.grid { display: grid; gap: 1.4rem; }
.flexrow { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.tagpill { display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-ui); font-weight:600; font-size:.8rem; letter-spacing:.04em; padding:.45em 1em; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); }
.tagpill::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--warm); }

/* ============================================================
   Hub home — front-page.php layout
   ============================================================ */
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.hero-slot { aspect-ratio: 4/3.4; }
.worlds-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.proj { overflow:hidden; display:flex; flex-direction:column; }
.proj-art { border-radius:0; border-left:0; border-right:0; border-top:0; aspect-ratio: 16/8.5; position:relative; }
.proj-body { padding: 1.5rem 1.6rem 1.7rem; }
.badge-emblem { position:absolute; right:18px; bottom:18px; width:54px; height:54px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.3)); }
.go { display:inline-flex; align-items:center; gap:.6em; margin-top:1.1rem; font-family:var(--font-ui); font-weight:600; font-size:.92rem; color:var(--accent-ink); }
.go-dot { width:24px; height:24px; border-radius:50%; border:1.5px solid currentColor; display:inline-grid; place-items:center; transition:transform .2s, background-color .2s, color .2s; }
.go-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.proj:hover .go-dot { transform:translateX(4px); background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

.about { display:grid; grid-template-columns: .9fr 1.1fr; gap:0; overflow:hidden; padding:0; }
.about-portrait { border-radius:0; border:0; aspect-ratio: 1/1; min-height:100%; }
.about-body { padding: clamp(2rem,4vw,3.2rem); align-self:center; }

.social-row { display:flex; gap:1.1rem; justify-content:center; }

/* ---- sketchbook ---- */
.filters { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem; }
.chip {
  font-family:var(--font-ui); font-weight:600; font-size:.9rem;
  padding:.55em 1.15em; border-radius:999px; cursor:pointer;
  background:var(--surface); color:var(--ink-soft);
  border:1.5px solid var(--line-strong);
  transition:background-color .2s, color .2s, border-color .2s, transform .15s;
}
.chip:hover { border-color:var(--accent); color:var(--accent-ink); }
.chip.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.chip:active { transform:translateY(1px); }

.sketch-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:1rem; grid-auto-flow:dense; }
.sketch-tile {
  position:relative; aspect-ratio:auto; border-radius:var(--r-sm);
  display:flex; flex-direction:column; justify-content:flex-end;
  align-items:flex-start; padding:1rem; text-align:left; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, opacity .35s ease;
}
.sketch-tile.wide { grid-column:span 2; }
.sketch-tile.tall { grid-row:span 2; }
.sketch-tile:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.sketch-tile .s-tag {
  font-family:var(--font-ui); font-weight:700; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35em .8em; border-radius:999px; background:var(--surface); color:var(--ink-soft);
  border:1px solid var(--line); position:absolute; top:.9rem; left:.9rem; white-space:nowrap;
  z-index: 2;
}
.sketch-tile .s-tag.ink   { color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.sketch-tile .s-tag.disco { background:var(--pop); color:#fff; border-color:transparent; }
.sketch-tile .s-cap {
  font-family:var(--font-story); font-size:1.02rem; line-height:1.25; color:var(--ink);
  background:color-mix(in srgb,var(--surface) 78%, transparent); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  padding:.4em .7em; border-radius:10px; max-width:90%;
  position: relative; z-index: 2;
}
.sketch-tile .s-img { position:absolute; inset:0; z-index:1; }
.sketch-tile .s-img img { width:100%; height:100%; object-fit:cover; display:block; }
.sketch-tile.is-hidden { display:none; }

/* ---- shop strip ---- */
.shop-strip { display:grid; grid-template-columns:.8fr 1.2fr; gap:0; overflow:hidden; padding:0; }
.shop-emblem { border-radius:0; border:0; min-height:260px; }
.shop-body { padding:clamp(2rem,4vw,3.2rem); align-self:center; }

.foot-grid { display:grid; grid-template-columns: 1.4fr .8fr 1.4fr; gap: 2.4rem; align-items:start; }
.foot-links { display:flex; flex-direction:column; gap:.55rem; list-style: none; padding: 0; margin: 0; }
.foot-links li { display: block; }
.foot-h { font-family:var(--font-ui); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.7rem; display:block; }
.foot-links a { color:var(--ink-soft); font-size:.96rem; }
.foot-links a:hover { color:var(--accent-ink); }
.foot-base { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; }

/* ============================================================
   Kayden landing — page-kayden.php layout
   ============================================================ */
.backlink { display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-ui); font-weight:600; font-size:.9rem; color:var(--ink-soft); }
.backlink .back-dot { width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-strong); display:inline-grid; place-items:center; transition:transform .2s, border-color .2s; }
.backlink .back-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.backlink:hover .back-dot { transform:translateX(-3px); border-color:var(--accent); }

.k-hero { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.lockup { font-size:clamp(3rem,7vw,5.8rem); line-height:.94; }
.lockup .amp { color:var(--accent); font-style:normal; }
.k-hero-slot { aspect-ratio: 4/4.3; }

.premise { max-width:760px; }
.premise-body { font-size:clamp(1.4rem,2.6vw,2.05rem); line-height:1.5; color:var(--ink); margin:1.4rem 0 0; text-wrap:balance; }
.premise-body em { color:var(--accent); font-style:italic; }

.cast-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cast-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:2rem 1.6rem 1.8rem; }
.portrait { width:150px; height:150px; border-radius:50%; aspect-ratio:1; margin-bottom:1.3rem; overflow:hidden; }
.portrait .tag { font-size:.72rem; padding:.35em .8em; }
.cast-body h3 { font-size:1.35rem; display:flex; align-items:center; gap:.5em; justify-content:center; }
.dream-chip { font-family:var(--font-ui); font-weight:700; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:.3em .7em; border-radius:999px; background:var(--pop); color:#fff; }
.cast-card .muted { margin:.5rem 0 0; max-width:24ch; }
.hand-note { font-family:var(--font-hand) !important; font-size:1.25rem !important; color:var(--ink-faint) !important; }
.is-dream { box-shadow: var(--shadow), 0 0 50px -16px rgba(240,55,154,.5); }

/* dream band — always dream palette via .world-dream */
.dream-band { background:var(--bg); color:var(--ink); padding-block:clamp(72px,10vw,140px); overflow:hidden; border-block:1px solid var(--line); }
.dream-inner { position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.dream-emblem { position:relative; display:grid; place-items:center; }
.dream-emblem .discoball { width:min(360px,70%); aspect-ratio:1; filter:drop-shadow(0 0 60px rgba(240,55,154,.45)); position:relative; z-index:1; }
.spin svg { animation: spin 26s linear infinite; transform-origin:50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin svg { animation:none; } }

/* preview card */
.preview { display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; padding:0; }
.preview-art { border-radius:0; border:0; aspect-ratio:auto; min-height:340px; position:relative; }
.comingsoon { position:absolute; top:18px; left:18px; font-family:var(--font-ui); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; padding:.45em 1em; border-radius:999px; background:var(--ink); color:var(--bg); z-index: 2; }
.preview-body { padding:clamp(2rem,4vw,3.4rem); align-self:center; }

/* ============================================================
   Sketch archive / single
   ============================================================ */
.sketch-single { max-width: 880px; margin-inline: auto; }
.sketch-single .artwork { border-radius: var(--r-lg); overflow:hidden; background:var(--surface-2); margin-bottom: 1.8rem; }
.sketch-single .artwork img { width:100%; height:auto; }
.sketch-single .meta { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.sketch-single h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: .6rem; }
.sketch-single .caption { font-family: var(--font-story); font-size: 1.1rem; color: var(--ink-soft); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .worlds-grid { grid-template-columns: 1fr; }
  .sketch-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .shop-strip { grid-template-columns:1fr; }
  .shop-emblem { min-height:200px; }
  .about { grid-template-columns: 1fr; }
  .about-portrait { aspect-ratio: 16/9; }
  .foot-grid { grid-template-columns: 1fr; }
  .k-hero { grid-template-columns:1fr; }
  .cast-grid { grid-template-columns:repeat(2,1fr); }
  .dream-inner { grid-template-columns:1fr; }
  .dream-emblem { order:-1; }
  .preview { grid-template-columns:1fr; }
  .preview-art { min-height:240px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav .navlink, .nav .menu-item { display: none; }
  .lights .lbl { display: none; }
}
@media (max-width: 560px) {
  .sketch-grid { grid-template-columns:1fr; }
  .cast-grid { grid-template-columns:1fr; }
}