/* ═══════════════════════════════════════════════════════════════════
   Theme: Vanessa Banks — Y2K dollhouse taste diary

   Early-2000s "dollhouse" web: milk-pink paper, bubblegum bands, lilac
   checkerboards, espresso pixel-art borders, hard offset shadows, and
   Pixelify Sans metadata. Design source: docs/vanessa-banks/handoffs/
   design_handoff_vanessa_banks_blog/ (README.md carries the tokens).
   Selector list and layout contract mirror the other theme so the same
   JSX markup renders correctly either way — see themes/vanessa/theme.json
   for the manifest (fonts, favicon) and css/site.css for the
   theme-agnostic admin/composer styling that reads these same tokens.

   Pixel-icon assets (assets/*.png, sliced from the client's sprite
   sheet): nav-home/blog/portfolio/packages/about label the built-in nav
   items, nav-folder marks any custom page in the nav, and the deco-*
   sprites (cherries, cursor, sparkles, heart, butterfly) are sprinkled
   as decoration only.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Palette — brand kit */
  --paper: #FFF3FC;            /* milk */
  --ink: #291F1E;              /* espresso */
  --accent: #DC326A;           /* hot pink */
  --accent-bright: #B80303;    /* cherry */
  --wine: #B80303;
  --blush: #FFCFEE;            /* cotton */
  --box-bg: #FFEAF7;           /* soft panel pink */
  --img-dark: #D3B0EA;         /* lilac — behind loading photos */
  --text-body: #291F1E;
  --text-2: #5A4644;
  --text-3: #7C6663;
  --text-4: #A18B88;
  --ph-caption: #DC326A;
  --hairline: rgba(41, 31, 30, .25);
  --hairline-soft: rgba(41, 31, 30, .12);
  --hairline-dark: rgba(41, 31, 30, .18);
  --cream-50: rgba(255, 243, 252, .5);
  --cream-62: rgba(255, 243, 252, .72);

  /* Theme-private supporting tints */
  --bubblegum: #FD9BCF;
  --lilac: #D3B0EA;
  --checker-lilac: #E7D8F2;
  --dash-pink: #F3B8DE;
  --checker: repeating-conic-gradient(var(--checker-lilac) 0% 25%, #FFFFFF 0% 50%) 0 0 / 46px 46px;
  --stripe-a: repeating-linear-gradient(45deg, #FD9BCF 0 12px, #FFCFEE 12px 24px);
  --stripe-b: repeating-linear-gradient(45deg, #D3B0EA 0 12px, #FFF3FC 12px 24px);
  --stripe-c: repeating-linear-gradient(45deg, #FFCFEE 0 12px, #FD9BCF 12px 24px);
  --dotted-rule: repeating-linear-gradient(90deg, #FD9BCF 0 8px, transparent 8px 14px);

  /* Type */
  --font-display: 'Fraunces', serif;      /* headings, logo — italic 800–900 */
  --font-post: 'Fraunces', serif;         /* post titles, drop caps, pull quotes */
  --font-body: 'Poppins', sans-serif;     /* body, deks, captions */
  --font-ui: 'Baloo 2', sans-serif;       /* nav, labels, buttons, chips */
  --font-mono: 'Pixelify Sans', ui-monospace, monospace;  /* pixel/retro labels */

  /* Layout */
  --maxw: 1180px;
  --gutter: 40px;
  --radius: 14px;
  --shadow-photo: 6px 7px 0 rgba(41, 31, 30, .18);
  --shadow-photo-sm: 4px 5px 0 rgba(41, 31, 30, .16);
}

/* Full-bleed bands are painted with 100vw pseudo-elements from inside the
   centered .wrap — clip the sliver of horizontal overflow they create
   (100vw includes the scrollbar width, so the bands poke a few px past). */
html, body { overflow-x: clip; }

::selection { background: var(--bubblegum); color: var(--ink); }

/* Signature display face: Fraunces runs soft + a little wonky everywhere —
   softest on the big display sizes, tighter on card titles (mockup values). */
h1, h2, h3, h4, .logo-name, .footer-logo, .post-title, .signature {
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}
.page-head h1, .post-title, .logo-name, .footer-logo, .signature {
  font-variation-settings: 'SOFT' 70, 'WONK' 1;
}
.card h3, .related-card h4, .studio-item-name {
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

@keyframes vb-float {
  0%, 100% { transform: translateY(-9px); }
  50% { transform: translateY(9px); }
}

/* ── Shared micro-typography ─────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.micro {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.dek {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-2);
}

/* Dotted pink rule instead of a solid bar */
.divider-bar {
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--dotted-rule);
}

.btn-pill {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: lowercase;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  padding: 8px 20px;
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-pill:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--accent); }

.btn-dark {
  background: var(--accent);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 11px 26px;
  font-size: 14px;
}
.btn-dark:hover { box-shadow: 2px 2px 0 var(--ink); }

.btn-light {
  background: var(--blush);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 11px 26px;
  font-size: 14px;
}
.btn-light:hover { box-shadow: 2px 2px 0 var(--ink); }

/* ── Announcement top bar (VanessaAnnounce, src/app.jsx) ─────────────
   Static gradient strip: messages left, sign-in / join / smiley / fake
   window controls right. NOT a marquee — that lives above the footer. */

.vb-announce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 16px;
  background: linear-gradient(90deg, #FD9BCF, #DC326A 55%, #FD9BCF);
  overflow: hidden;
}

.vb-announce-msgs {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  color: #FFF3FC;
}
.vb-announce-msgs a {
  color: #FFF3FC;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vb-announce-sep { opacity: .6; }

.vb-announce-right {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: #FFF3FC;
}
.vb-join {
  background: #FFF3FC;
  color: var(--accent);
  border-radius: 6px;
  padding: 2px 10px;
  font-weight: 600;
}
.vb-smiley {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFD84D;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  line-height: 0;
}
.vb-winctl { font-size: 11px; letter-spacing: 1px; }

/* ── Nav ─────────────────────────────────────────────────────────── */

.site-nav {
  z-index: 50;
  background: var(--box-bg);
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--gutter) 14px;
}

.logo { cursor: pointer; position: relative; width: fit-content; }

/* Sparkles scattered off the wordmark's shoulder */
.logo::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -36px;
  width: 30px;
  height: 34px;
  background: url("assets/deco-sparkles.png") center / contain no-repeat;
  pointer-events: none;
}

.logo-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(30px, 4vw, 44px);
  line-height: .9;
  letter-spacing: -.5px;
  color: var(--accent);
  text-shadow: 3px 3px 0 var(--blush);
  white-space: nowrap;
}

.logo-sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
  text-align: center;
}

.nav-links {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

/* Icon-over-label nav items, pixel icon above a Baloo label with a small
   rounded underline bar. Custom pages fall back to the folder icon. */
.nav-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 58px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--ink);
  transition: color .3s;
}

.nav-links a::before {
  content: "";
  width: 30px;
  height: 30px;
  background: url("assets/nav-folder.png") center / contain no-repeat;
  transition: transform .2s ease;
}
.nav-links a[href="/"]::before { background-image: url("assets/nav-home.png"); }
.nav-links a[href="/blog"]::before { background-image: url("assets/nav-blog.png"); }
.nav-links a[href="/portfolio"]::before { background-image: url("assets/nav-portfolio.png"); }
.nav-links a[href="/packages"]::before { background-image: url("assets/nav-packages.png"); }
.nav-links a[href="/about"]::before { background-image: url("assets/nav-about.png"); }

/* 24×3 rounded underline bar under the active label */
.nav-links a::after {
  content: "";
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background .3s;
}

.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::before { transform: translateY(-2px); }
.nav-links a:hover::after { background: var(--bubblegum); }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after { background: var(--accent); }

.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}

/* ── Marquee (VanessaMarquee, src/app.jsx — above the footer) ────────
   Bubblegum bar, 2px espresso rules, pixel type scrolling left on a 24s
   loop. The whole bar is a link to the newest post. */

@keyframes vb-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.vb-marquee {
  display: block;
  background: var(--bubblegum);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
  padding: 9px 0;
  cursor: pointer;
}
.vb-marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: vb-marquee 24s linear infinite;
}
.vb-marquee-track span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--ink);
  padding-left: 8px;
}

/* ── Footer (VanessaFooter, src/app.jsx) ─────────────────────────────
   Milk footer; the marquee's espresso rules provide the separation, so
   the footer itself carries no top border (mockup). */

.site-footer {
  background: var(--paper);
  color: var(--ink);
}

/* Pages whose content isn't a full-bleed band breathe before the footer;
   full-bleed bands sit flush against it. */
main.wrap { padding-bottom: 90px; }

.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 34px var(--gutter) 24px;
}

/* 3 columns: stacked wordmark + tagline / pages / elsewhere ♡ */
.vb-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr;
  gap: 24px;
  padding-bottom: 20px;
}

.footer-logo {
  position: relative;
  width: fit-content;
  max-width: min-content;   /* stacks the wordmark one word per line */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 30px;
  line-height: .85;
  color: var(--accent);
}

/* Sticker cherries bobbing off the footer wordmark */
.footer-logo::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -52px;
  width: 40px;
  height: 41px;
  background: url("assets/deco-cherries.png") center / contain no-repeat;
  animation: vb-float 5s ease-in-out infinite;
  pointer-events: none;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-2);
  max-width: 280px;
  margin-top: 12px;
  line-height: 1.6;
}

/* elsewhere ♡ — 36px candy circles, alternating fills. Scoped under
   .footer-col so these outrank the generic .footer-col a text-link rules
   further down regardless of order. */
.vb-social-circles { display: flex; gap: 9px; flex-wrap: wrap; }
.footer-col .vb-social-circles a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bubblegum);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  margin: 0;
  transition: transform .2s ease;
}
.footer-col .vb-social-circles a:nth-child(3n+2) { background: var(--lilac); }
.footer-col .vb-social-circles a:nth-child(3n) { background: var(--blush); }
.footer-col .vb-social-circles a:hover { transform: translateY(-2px); color: var(--ink); }

.footer-col h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--ink);
  margin-bottom: 9px;
}

.footer-col a, .footer-col span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--text-2);
  margin-bottom: 7px;
  transition: color .3s;
}
.footer-col a:hover { color: var(--accent); }

/* RSS is the one pixel-pink link in the Pages column */
.footer-col a[href="/rss"] {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  padding-top: 4px;
}
.footer-col a[href="/rss"]::after { content: " ✦"; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 2px dashed var(--dash-pink);
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-3);
}
.footer-bottom span:last-child {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}

/* ── Image placeholder ───────────────────────────────────────────── */

.photo-frame {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--img-dark);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Branded placeholder: cotton diagonal stripes + icon + pixel label,
   so a missing image still reads as part of the dollhouse ("PHOTO COMING
   SOON ♥" treatment from the mockup's unphotographed portfolio card). */
.ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #FFEAF7 0 14px, #FFF3FC 14px 28px);
}
.ph svg { stroke: var(--bubblegum); opacity: .9; }
.ph-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ph-caption);
}

/* Pixel caption, centered under the photo with a leading sparkle */
.caption {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .04em;
  text-align: center;
  color: var(--accent);
  margin-top: 10px;
}
.caption::before { content: "✦ "; }

/* ── Home: hero (VanessaHome, src/pages.jsx) ──────────────────────────
   Checkerboard band holding the welcome.exe retro window beside the
   wavy-clipped featured photo (newest post cover) with the bobbing
   sticker cherries. The mockup's structure, translated 1:1. */

.vb-hero {
  background: var(--checker);
  padding: 52px 0;
}

.vb-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* Retro window chassis (welcome.exe, DOLLZ BUILDER) */
.vb-window {
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 7px 7px 0 rgba(41, 31, 30, .18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.vb-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 15px;
  background: var(--bubblegum);
  border-bottom: 3px solid var(--ink);
}
.vb-window-title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--ink);
}
.vb-window-btns { display: flex; gap: 6px; }
.vb-window-btns i {
  width: 17px;
  height: 17px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  color: var(--ink);
}

.vb-welcome-body {
  position: relative;
  flex: 1;
  padding: 30px 30px 26px;
}
.vb-glyph { position: absolute; color: var(--bubblegum); pointer-events: none; }
.vb-glyph.g1 { top: 22px; right: 26px; font-size: 22px; }
.vb-glyph.g2 { top: 50px; right: 52px; font-size: 13px; color: #F7A8D6; }

.vb-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}
/* On the gradient CTA cards the eyebrow reads white */
.vb-cta-card .vb-eyebrow { color: #FFF3FC; font-size: 11px; letter-spacing: 1px; }

.vb-welcome-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: .95;
  color: var(--accent);
  margin-top: 8px;
  font-variation-settings: 'SOFT' 70, 'WONK' 1;
}

.vb-welcome-intro {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  opacity: .82;
  margin: 16px 0 0;
  max-width: 400px;
}

.vb-welcome-btns { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* Mockup button chassis: Baloo 700, 2px espresso border, radius 10,
   hard 3px shadow. Hot / cotton / espresso fills. */
.vb-btn {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: transform .15s ease;
}
.vb-btn:hover { transform: translate(1px, 1px); }
.vb-btn-hot { background: var(--accent); color: #FFF3FC; box-shadow: 3px 3px 0 var(--ink); }
.vb-btn-cotton { background: var(--blush); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.vb-btn-ink { background: var(--ink); color: #FFF3FC; box-shadow: 3px 3px 0 var(--accent); padding: 9px 18px; margin-top: 16px; }

/* Featured photo: soft-wavy SVG clip, soft (not hard) shadow, cherries */
.vb-hero-photo { position: relative; align-self: center; }
.vb-wavy-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #fff;
  overflow: hidden;
  clip-path: url(#vbwavy);
  box-shadow: 0 10px 26px rgba(41, 31, 30, .2);
}
.vb-wavy-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vb-hero-photo::after {
  content: "";
  position: absolute;
  top: -16px;
  left: -12px;
  width: 64px;
  height: 66px;
  background: url("assets/deco-cherries.png") center / contain no-repeat;
  animation: vb-float 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* ── Home: wavy divider + lower grid (dollz builder / CTA cards) ──── */

.vb-wave { line-height: 0; background: var(--bubblegum); }
.vb-wave svg { display: block; width: 100%; height: 74px; }

/* Dollz builder parked (owner call) — the lower band is the CTA pair
   side by side; auto-fit keeps a lone card full-width when the
   portfolio CTA is hidden. The .vb-dollz styles below stay for when
   the builder returns. */
.vb-home-lower {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  align-items: stretch;
  padding-top: 20px;
  padding-bottom: 52px;
}

/* DOLLZ BUILDER window */
.vb-dollz { border-radius: 8px; background: var(--blush); }
.vb-dollz .vb-window-bar { padding: 9px 14px; }
.vb-dollz .vb-window-btns i { width: 16px; height: 16px; }

.vb-dollz-body {
  flex: 1;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
}

.vb-doll-stage {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: repeating-conic-gradient(#FFE0F2 0% 25%, #FFF3FC 0% 50%) 0 0 / 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
}
.vb-doll-tag {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}
.vb-doll-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  margin-top: 12px;
  text-align: center;
}

/* Pixel doll, drawn from absolutely-positioned rectangles (mockup) */
.vb-doll { width: 96px; height: 150px; position: relative; image-rendering: pixelated; }
.vb-doll i { position: absolute; display: block; }
.vb-doll-hair { left: 26px; top: 0; width: 44px; height: 26px; background: #8a5a2b; }
.vb-doll-face { left: 30px; top: 18px; width: 36px; height: 34px; background: #F4C9A8; }
.vb-doll-eye { width: 6px; height: 6px; background: var(--ink); top: 28px; }
.vb-doll-eye.l { left: 34px; }
.vb-doll-eye.r { left: 56px; }
.vb-doll-dress { left: 24px; top: 50px; width: 48px; height: 62px; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.vb-doll-leg { width: 10px; height: 34px; background: #F4C9A8; top: 112px; }
.vb-doll-leg.l { left: 34px; }
.vb-doll-leg.r { left: 52px; }
.vb-doll-shoe { width: 16px; height: 8px; background: var(--ink); top: 142px; }
.vb-doll-shoe.l { left: 30px; }
.vb-doll-shoe.r { left: 50px; }

.vb-looks { display: flex; flex-direction: column; }
.vb-looks-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 10px;
}
.vb-looks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  flex: 1;
}

.vb-look {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 2px 2px 0 rgba(41, 31, 30, .12);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.vb-look.selected {
  background: #FFB8E1;
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}
.vb-look-heart { position: absolute; top: 4px; right: 6px; color: var(--accent); font-size: 11px; }
.vb-look-doll { width: 22px; height: 34px; position: relative; display: block; }
.vb-look-doll i { position: absolute; display: block; }
.vb-look-doll .hair { left: 6px; top: 0; width: 10px; height: 8px; background: var(--ink); }
.vb-look-doll .dress { left: 4px; top: 12px; width: 14px; height: 22px; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.vb-look-name {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink);
  text-align: center;
  line-height: 1.1;
}

.vb-dollz-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-top: 3px solid var(--ink);
  background: #FFE0F2;
}
.vb-dollz-dress {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  white-space: nowrap;
}
.vb-progress {
  position: relative;
  flex: 1;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.vb-progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bubblegum); }
.vb-save {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #FFF3FC;
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}

/* Gradient CTA cards (About / Portfolio) — whole card is the link */
.vb-cta-card {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 6px 6px 0 rgba(41, 31, 30, .18);
  padding: 32px 30px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: transform .2s ease;
}
.vb-cta-card:hover { transform: translateY(-2px); }
.vb-cta-about { background: linear-gradient(135deg, #FFCFEE, #FD9BCF); }
.vb-cta-portfolio { background: linear-gradient(135deg, #D3B0EA, #C79BE3); }

.vb-cta-glyph { position: absolute; top: 14px; right: 18px; color: #FFF3FC; font-size: 30px; }
.vb-cta-star {
  top: 16px;
  right: 20px;
  width: 26px;
  height: 26px;
  background: #FFF3FC;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.vb-cta-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 34px);
  line-height: .95;
  color: var(--ink);
  margin-top: 6px;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}
.vb-cta-body {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  opacity: .8;
  margin: 10px 0 0;
  max-width: 360px;
}

/* ── Home: journal section / cards ───────────────────────────────── */

/* "From the blog" rides a full-bleed bubblegum band. */
.section {
  position: relative;
  isolation: isolate;
  padding-top: 48px;
  padding-bottom: 52px;
}
.section::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--bubblegum);
  z-index: -1;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  margin-top: 12px;
  color: #FFF3FC;
  text-shadow: 2px 2px 0 var(--accent);
}
.section-head h2::before { content: "✦ "; font-size: .6em; vertical-align: 3px; }
.section-head h2::after { content: " ✦"; font-size: .6em; vertical-align: 3px; }

/* White glyphs sprinkled in the band's corners */
.section::after {
  content: "❀";
  position: absolute;
  bottom: 34px;
  right: 7%;
  color: var(--blush);
  font-size: 34px;
  pointer-events: none;
}

.section .eyebrow { color: #fff; }

.view-all {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  text-transform: lowercase;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.view-all:hover { color: var(--box-bg); }

/* Pixel cursor pointing at the link — pure decoration */
.view-all::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 22px;
  margin-left: 8px;
  vertical-align: -4px;
  background: url("assets/deco-cursor.png") center / contain no-repeat;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* A short row (1–2 posts — e.g. a brand-new diary) would otherwise leave a card
   stranded in the rigid 3-col grid. Match the track count to the card count and
   center, so it still reads as an intentional row. Below 761px the grid stacks. */
@media (min-width: 761px) {
  .card-grid:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 400px); justify-content: center; }
  .card-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
}

/* Card chassis: milk window with espresso border + hard shadow. The
   candy-stripe photo frame runs flush to the card edges (no milk margin),
   so the card itself carries no padding — the text block below does. */
.card {
  cursor: pointer;
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 6px 0 rgba(41, 31, 30, .22);
  padding: 0;
  overflow: hidden;
  transition: transform .25s ease;
}
.card:hover { transform: translateY(-3px); }

/* Stretched-link overlay: the whole card is still one click target (the
   title/photo), while the engagement row's own buttons sit above it and
   stay independently clickable — a <button> can never be a descendant of
   an <a>, so the link lives here instead of wrapping the card. */
.card-link-cover { position: absolute; inset: 0; z-index: 1; }

/* Card photos sit inside an 11px candy-stripe frame flush to the card
   edge; the inner photo carries its own espresso border. The stripe
   pattern rotates card to card (see the :nth-child cycle just below). */
.card .photo-frame {
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--stripe-a);
}
.card .photo-frame img,
.card .photo-frame .ph {
  inset: 11px;
  width: auto;
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.card:nth-child(3n+2) .photo-frame { background: var(--stripe-b); }
.card:nth-child(3n) .photo-frame { background: var(--stripe-c); }

/* Category badge pinned inside the photo (mockup): 8px into the framed
   photo, which itself sits 11px stripe + 2px card border from the card
   edge — so 21px from the card's top-left corner. */
.vb-card-badge {
  position: absolute;
  top: 21px;
  left: 21px;
  z-index: 2;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: 2px 8px;
  pointer-events: none;
}

.card-cat {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 8px 16px 0;
}

.card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
  margin: 4px 16px 0;
  color: var(--ink);
  transition: color .3s;
}
.card:hover h3 { color: var(--accent); }

/* With the badge inside the photo there's no cat line above the title —
   give the title the text block's breathing room itself. */
.vb-card-badge ~ h3 { margin-top: 10px; }

.card-dek {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 8px 16px 0;
  color: var(--ink);
  opacity: .7;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 16px 16px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Card engagement (heart/share): sits in the meta row, above the card's
   stretched-link overlay so its own buttons stay independently clickable. */
.card-engagement {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-engagement .icon-btn-plain { padding: 4px; }

/* ── Home: quote band ────────────────────────────────────────────── */

.quote-band {
  background: var(--bubblegum);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  color: #fff;
  text-align: center;
  padding: 64px var(--gutter) 68px;
  margin-top: 0;
}

/* Pixel heart floating above the quote */
.quote-band::before {
  content: "";
  display: block;
  width: 42px;
  height: 40px;
  margin: 0 auto 18px;
  background: url("assets/deco-heart.png") center / contain no-repeat;
  animation: vb-float 5s ease-in-out infinite;
}

.quote-band .eyebrow { color: #fff; }

.quote-band blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.25;
  max-width: 880px;
  margin: 24px auto 28px;
  text-shadow: 2px 2px 0 var(--accent);
}

/* The band's Read pill goes espresso for contrast on bubblegum */
.quote-band .btn-light {
  background: var(--ink);
  color: #fff;
  box-shadow: 3px 3px 0 var(--accent);
}

/* ── Page headers (Blog / Studio / About) ────────────────────────── */

/* Centered heading on a full-bleed checkerboard band, dek in a rounded
   white pill for legibility against the checker. */
.page-head {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: 54px 0 46px;
  margin-bottom: 44px;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--checker);
  border-bottom: 2px solid var(--ink);
  z-index: -1;
}

.page-head h1 {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.06;
  margin: 12px 0 18px;
  color: var(--ink);
}
.page-head h1::after {
  content: "";
  position: absolute;
  top: -16px;
  right: -38px;
  width: 30px;
  height: 34px;
  background: url("assets/deco-sparkles.png") center / contain no-repeat;
  pointer-events: none;
}

.page-head h1 em, .section-head em { font-style: italic; color: var(--accent); }
.page-head h1 em { color: var(--accent); }

.page-head .dek {
  display: inline-block;
  font-size: 14px;
  color: rgba(41, 31, 30, .8);
  background: rgba(255, 255, 255, .9);
  border-radius: 14px;
  padding: 10px 20px;
  max-width: 640px;
}

/* ── Bubblegum content bands ─────────────────────────────────────────
   In the mockup, everything below the checker page header on the Blog,
   Portfolio and Packages screens rides a full-bleed #FD9BCF section —
   filters, card grids, pagination and status lines all sit on pink.
   The pages carry no page-level class, so the band keys off content
   that only those pages render. (No :has() support → milk fallback.) */
main:has(.blog-grid),
main:has(.studio-grid),
main:has(.package-grid),
main:has(.filter-row) {
  background: var(--bubblegum);
}

/* Chrome that sits on the pink band flips to milk/white */
main:has(.blog-grid) .loading,
main:has(.studio-grid) .loading,
main:has(.package-grid) .loading,
main:has(.filter-row) .loading {
  color: #FFF3FC;
}
main:has(.filter-row) .loading a { color: #FFF3FC; text-decoration: underline; }
main:has(.filter-row) .search-elsewhere { border-top-color: rgba(255, 243, 252, .5); }
main:has(.filter-row) .search-elsewhere .eyebrow { color: #FFF3FC; }

/* Grids breathe before the band hands over to the next section */
main:has(.blog-grid) > .wrap,
main:has(.studio-grid) > .wrap,
main:has(.package-grid) > .wrap,
main:has(.filter-row) > .wrap {
  padding-bottom: 48px;
}

/* Status lines everywhere else read as pixel type */
div.loading {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--accent);
}

/* ── Blog: filters ───────────────────────────────────────────────── */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-bottom: none;
  margin-bottom: 22px;
}

/* FILTER ✦ label — white pixel type on the pink band */
.filter-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFF3FC;
}
.filter-label::after { content: " ✦"; }

.chip {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  background: var(--paper);
  transition: all .2s;
}
.chip:hover { background: var(--blush); }
.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 3px 3px 0 var(--accent);
}

/* Active tag/search chip: dismissable — dashed pixel pill on milk */
.chip.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: none;
  letter-spacing: .02em;
  background: var(--paper);
  border-style: dashed;
  border-color: var(--ink);
  color: var(--accent);
  box-shadow: none;
}
.tag-chip svg { stroke: currentColor; }

/* Tag chips (post sidebar + portfolio modal): pixel pills on milk */
.tag-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-link {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--accent);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 11px;
  transition: all .2s;
}
.tag-link:hover { background: var(--blush); text-decoration: none; }

/* ── Post page ───────────────────────────────────────────────────── */

/* Centered post header on the checker band, like the page heads. */
.post-head {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: 54px 0 46px;
  margin-bottom: 48px;
}
.post-head::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--checker);
  border-bottom: 2px solid var(--ink);
  z-index: -1;
}
/* The mockup post header carries no rule — just h1 + pill dek */
.post-head .divider-bar { display: none; }

.post-title {
  font-family: var(--font-post);
  font-weight: 900;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1;
  margin: 0 0 14px;
  color: var(--ink);
}

.post-head .dek {
  display: inline-block;
  font-size: 15px;
  color: rgba(41, 31, 30, .8);
  max-width: 620px;
  background: rgba(255, 255, 255, .9);
  border-radius: 14px;
  padding: 10px 20px;
}

/* Magazine lead: the photo runs a centered 980px column above the body */
.post-lead { max-width: 980px; margin: 0 auto 44px; }
.post-lead .lead-photo { aspect-ratio: 16 / 9; }

/* Article left, sticky sidebar panel right (mockup: 1fr / 300px) */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0 36px;
  align-items: start;
}
.post-sidebar { order: 2; }
.post-content { order: 1; }

/* Sidebar: soft-pink retro panel that sticks alongside the article */
.post-sidebar {
  position: sticky;
  top: 20px;
  background: var(--box-bg);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 6px 6px 0 rgba(41, 31, 30, .18);
  padding: 22px;
}

.author-card { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blush);
  border: 2px solid var(--ink);
  flex-shrink: 0;
  position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.author-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.author-handle {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--accent);
  margin-top: 3px;
}

.meta-item { margin-bottom: 12px; }
.meta-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.meta-value { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; }
.meta-value.accent { color: var(--accent); font-weight: 600; }

/* Sidebar meta rows read label ↔ value on one line (mockup) — except the
   Tagged block, whose chips need the full row. */
.post-sidebar .meta-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.post-sidebar .meta-item .meta-label { margin-bottom: 0; }
.post-sidebar .meta-item:has(.tag-links),
.post-sidebar .meta-item:has(.engagement-row) {
  display: block;
}
.post-sidebar .meta-item:has(.tag-links) .meta-label { margin-bottom: 8px; }

/* Sidebar heart/share become bordered pixel pills */
.post-sidebar .icon-btn-plain {
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--paper);
  font-family: var(--font-mono);
}
.post-sidebar .icon-btn-plain .engagement-count { font-size: 12px; }
.post-sidebar .heart-btn { color: var(--accent); }
.post-sidebar .heart-btn.hearted { background: var(--blush); }

.sidebar-rule { border: none; height: 2px; background: var(--dotted-rule); margin: 22px 0; }

.post-content { padding: 6px 0 0; min-width: 0; }

/* Custom pages (Phase 5C): reuses .post-content's article typography but
   sits directly under .page-head (no .post-layout sidebar grid to offset),
   so it drops the left/top padding entirely — page-head's own bottom
   padding is the single source of dek→content spacing here, matching
   Blog/Studio/Packages. */
.custom-page-content { padding: 0; }

.lead-photo {
  aspect-ratio: 16 / 9;
  border-width: 3px;
  border-radius: 18px;
  box-shadow: var(--shadow-photo);
}

.post-body { margin-top: 0; }

/* Comfortable diary measure for prose; images span the full column */
.post-body p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body);
  margin-top: 22px;
  max-width: 680px;
}

/* Drop cap via CSS: the first letter of the first paragraph of the first
   text block. Markdown renders each text block into a .md wrapper. */
.post-body .md:first-of-type > p:first-child::first-letter {
  float: left;
  font-family: var(--font-post);
  font-weight: 900;
  font-size: 58px;
  line-height: .75;
  margin: 8px 12px 0 0;
  color: var(--accent);
}

/* ── Markdown body (.md wraps each rendered text block) ──────────────
   Paragraph typography inherits .post-body p; these style the inline
   markdown extras: headings, links, images, code, lists, quotes. */
.md h2, .md h3 {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--accent);
  line-height: 1.15;
  margin: 38px 0 6px;
  max-width: 680px;
}
.md h2 { font-size: 28px; }
.md h3 { font-size: 21px; font-weight: 800; color: var(--ink); }
.md h2::before { content: "✦ "; }

.md a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md a:hover { color: var(--accent-bright); }

.md img {
  max-width: 100%;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 12px;
  margin: 44px 0;
}

/* Inline code: cherry pixel type on a cotton chip (mockup: no border) */
.md code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .9em;
  background: var(--blush);
  color: var(--accent-bright);
  border-radius: 5px;
  padding: 2px 7px;
}

.md ul, .md ol { margin: 20px 0 20px 1.3em; max-width: 680px; }
.md li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-body);
  margin-top: 7px;
}
.md li::marker { color: var(--accent); }

/* Blockquote: Fraunces italic on the soft-pink slab (mockup) */
.md blockquote {
  font-family: var(--font-post);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--box-bg);
  border-left: 5px solid var(--bubblegum);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 26px 0;
  max-width: 680px;
}

/* Pull quote: a centered bubblegum sticker card, ✦ ✦ ✦ on top */
.pullquote {
  font-family: var(--font-post);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
  color: #FFF3FC;
  background: var(--bubblegum);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 5px 5px 0 rgba(41, 31, 30, .18);
  padding: 24px 28px;
  margin: 34px 0;
  max-width: 760px;
}
.pullquote::before {
  content: "✦ ✦ ✦";
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .2em;
}

.img-block { margin-top: 44px; margin-bottom: 44px; }
.img-block .photo-frame { aspect-ratio: 16 / 9; }

.img-grid { display: grid; gap: 16px; margin-top: 44px; }
.img-grid.duo { grid-template-columns: repeat(2, 1fr); }
.img-grid.trio { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.img-grid .photo-frame { aspect-ratio: 3 / 4; border-width: 3px; border-radius: 14px; }
.img-grid.trio .photo-frame { aspect-ratio: 1 / 1; }

/* Video block: 16:9 frame matching the photo treatment. iframe/video fill it. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 5px 5px 0 rgba(41, 31, 30, .18);
}
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
  background: var(--ink);
}

/* ── Credits box ─────────────────────────────────────────────────── */

/* ♥ CREDITS.TXT: soft-pink retro file box with a pixel heading */
.credits-box {
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--box-bg);
  box-shadow: 5px 5px 0 rgba(41, 31, 30, .18);
  padding: 20px 24px;
  margin-top: 44px;
}

.credits-box h3 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.credits-box h3::before { content: "♥ "; }
.credits-box h3::after { content: ".TXT"; }

.credit-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--dash-pink);
}
.credit-row:last-child { border-bottom: none; }

.credit-slot {
  flex: 0 0 90px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}

.credit-brand { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--ink); }
.credit-brand a:hover { color: var(--accent); text-decoration: underline; }
.credit-item { font-family: var(--font-body); font-size: 13px; }

.credit-at {
  margin-left: auto;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
  text-align: right;
}
.credit-at a { text-decoration: underline; text-underline-offset: 2px; }
.credit-at a:hover { color: var(--accent-bright); }

/* ── Related posts ───────────────────────────────────────────────── */

.related { margin-top: 44px; padding-top: 0; border-top: none; }

/* "keep reading ✦" — espresso Fraunces, sparkle typed in the copy */
.related h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 16px;
}

.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

/* Related cards are soft-pink slabs, not the striped chassis — they keep
   their own padding (the base .card dropped to 0 for the flush frame). */
.related-card,
.card.related-card {
  background: var(--box-bg);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 rgba(41, 31, 30, .16);
  padding: 12px 14px;
  overflow: visible;
  transition: transform .25s ease;
}
.related-card:hover { transform: translateY(-2px); }

.related-card .card-cat { margin: 0; font-size: 9.5px; }
.related-card .card-meta { margin: 8px 0 0; }

.related-card h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.15;
  margin: 4px 0 0;
  transition: color .3s;
}
.related-card:hover h4 { color: var(--accent); }

/* ── Studio ──────────────────────────────────────────────────────── */

.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}

/* Portfolio cards share the flush-stripe milk chassis, square photo */
.studio-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 6px 0 rgba(41, 31, 30, .22);
  padding: 0;
  overflow: hidden;
  transition: transform .25s ease;
}
.studio-item:hover { transform: translateY(-3px); }
a.studio-item { cursor: pointer; }
a.studio-item:hover .studio-item-name { color: var(--accent); }
.studio-item-name { transition: color .3s; }

.studio-item .photo-frame {
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--stripe-a);
}
.studio-item .photo-frame img,
.studio-item .photo-frame .ph {
  inset: 11px;
  width: auto;
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.studio-item:nth-child(3n+2) .photo-frame { background: var(--stripe-b); }
.studio-item:nth-child(3n) .photo-frame { background: var(--stripe-c); }

.studio-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 8px 16px 0;
}

.studio-item-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
}

.studio-item-price {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--accent);
  white-space: nowrap;
}

.studio-item-sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2px 16px 0;
}

.studio-item-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  opacity: .7;
  margin: 7px 16px 16px;
}

/* ── Portfolio product detail styles ─────────────────────────────────
   Shared by the composer's studio-item live preview (src/admin.jsx) and
   the public studio detail modal (.studio-modal-body, below) — the
   common "product detail" look both surfaces render. ─────────────── */

.product-lead .product-lead-photo { aspect-ratio: 1 / 1; background: var(--blush); max-width: 560px; margin: 0 auto; }

.product-layout { max-width: 680px; margin: 0 auto; }

.product-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-body);
}

.product-price {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 20px;
  color: var(--accent);
  margin: 24px 0 20px;
}

/* SPECS.TXT — retro file box, dashed rows */
.specs-box {
  margin-top: 18px;
  background: var(--box-bg);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 14px 18px;
}
.specs-box h3 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.specs-box h3::after { content: " ✦"; }
.specs-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--dash-pink);
  font-family: var(--font-body);
  font-size: 13.5px;
}
.specs-row:last-child { border-bottom: none; }
.specs-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Full-bleed lilac call-to-action band with a white glyph in the corner */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--lilac);
  color: var(--ink);
  text-align: center;
  padding: 44px var(--gutter);
  margin-top: 0;
}
.cta-band::after {
  content: "✦";
  position: absolute;
  top: 18px;
  right: 9%;
  color: #FFF3FC;
  font-size: 24px;
  pointer-events: none;
}

.cta-band .eyebrow { color: #FFF3FC; letter-spacing: .17em; font-size: 11px; }

.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--ink);
  margin: 10px 0 18px;
}

/* The band's pill goes espresso for contrast on lilac */
.cta-band .btn-light {
  background: var(--ink);
  color: #fff;
  box-shadow: 3px 3px 0 var(--accent);
}

/* ── Packages ────────────────────────────────────────────────────── */

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 30px;
  align-items: stretch;
}

/* 4th/5th tier (rare) wrap onto a second row rather than squeeze a 4th
   column — keeps cards legible instead of turning into a spreadsheet.
   Scoped to wide screens: :has() outranks the plain selector in the
   narrow-viewport media queries below, so an unscoped version would pin
   3 columns at every width. */
@media (min-width: 961px) {
  .package-grid:has(.package-card:nth-child(4)) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.package-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 6px 0 rgba(41, 31, 30, .22);
  overflow: hidden;
  transition: transform .3s ease;
}

.package-card:hover { transform: translateY(-3px); }

/* Package photo rides a full striped frame on all four sides, flush to
   the card (no rule under the frame — the inner photo carries the border).
   Stripe rotation follows the mockup's package order: a · c · b. */
.package-card .photo-frame {
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--stripe-a);
}
.package-card:nth-child(3n+2) .photo-frame { background: var(--stripe-c); }
.package-card:nth-child(3n) .photo-frame { background: var(--stripe-b); }
.package-card .photo-frame img,
.package-card .photo-frame .ph {
  inset: 11px;
  width: auto;
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 12px;
}

.package-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 20px 20px;
}

.package-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.15;
}

.package-tagline {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink);
  opacity: .7;
}

.package-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
}

.package-price {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .01em;
  color: var(--accent);
}

/* Dotted pink rule between the price and the feature list (mockup) */
.package-features {
  list-style: none;
  margin: 0;
  flex: 1;
}
.package-features::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--dotted-rule);
  margin: 14px 0;
}

.package-features li {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-body);
  padding: 4px 0;
}
.package-features li::before { content: "♥ "; color: var(--accent); font-size: 12px; }

.package-cta {
  align-self: flex-start;
  margin-top: 18px;
}

/* CTAs: cotton pills by default; the middle (featured) tier goes hot pink.
   Markup ships them as .btn-dark, so reset that variant here. */
.package-cta.btn-dark {
  background: var(--blush);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 20px;
  font-size: 14px;
}
.package-card:nth-child(3n+2) .package-cta.btn-dark {
  background: var(--accent);
  color: #FFF3FC;
}

@media (max-width: 960px) {
  .package-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .package-grid { grid-template-columns: 1fr; }
}

/* ── About ───────────────────────────────────────────────────────── */

/* The whole About spread rides the checkerboard (mockup) */
main:has(.about-grid) { background: var(--checker); }

.about-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  align-items: start;
  padding: 52px 0;
  max-width: 1080px;
  margin: 0 auto;
}

/* Tilted polaroid portrait with a butterfly perched on the corner */
.portrait-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 3px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--img-dark);
  box-shadow: 8px 8px 0 rgba(41, 31, 30, .2);
  transform: rotate(-1.6deg);
}
/* BS.Photo wraps the image in its own .photo-frame; without a height it
   collapses and the portrait shows as just the frame background. Make it fill
   the aspect-ratio'd portrait-frame so the image (and placeholder) show. */
.portrait-frame .photo-frame { position: absolute; inset: 0; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.portrait-frame .ph { border-radius: 14px; }

/* ABOUT.TXT: the text column is a milk retro panel on the checker, with
   the butterfly sticker perched on its top corner. */
.about-text {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 7px 7px 0 rgba(41, 31, 30, .18);
  padding: 32px 36px;
}
.about-text::after {
  content: "";
  position: absolute;
  top: -32px;
  right: -14px;
  width: 64px;
  height: 55px;
  background: url("assets/deco-butterfly.png") center / contain no-repeat;
  transform: rotate(8deg);
  animation: vb-float 6s ease-in-out infinite;
  pointer-events: none;
}

.about-text h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1;
  margin: 0 0 18px;
}
.about-text h1 em { font-style: italic; color: var(--accent); }

.about-text > p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-body);
  opacity: .85;
  margin-bottom: 14px;
}

/* Facts grid: soft-pink panel inside the ABOUT.TXT window */
.about-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  background: var(--box-bg);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 22px;
}
.about-meta .meta-value { font-size: 13px; font-weight: 600; }
.about-meta .meta-value em { font-style: normal; }

/* .meta-item's own margin-bottom (shared with the post sidebar/portfolio
   modal) would otherwise stack on top of this grid's row-gap, doubling the
   space between facts — the grid gap alone is the right amount here. */
.about-meta .meta-item { margin-bottom: 0; }

.signature {
  display: inline-block;
  font-family: var(--font-post);
  font-style: italic;
  font-weight: 800;
  font-size: 24px;
  color: var(--accent);
  transform: rotate(-2deg);
}
.signature::after { content: " ✦"; font-style: normal; font-size: 16px; }

/* The gap above the signature adapts to what precedes it — a full gap
   following the facts grid, a smaller one when the owner has removed
   every fact and the signature sits directly after a paragraph. */
.about-meta + .signature { margin-top: 32px; }
.about-text > p + .signature { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════
   Engagement (icon-only heart/share, share modal, views)
   Shared between the post-page sidebar and every post-card (home + blog
   index). Anonymous/approximate counters — see docs/editing-guide.md.
   ═══════════════════════════════════════════════════════════════════ */

.engagement-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Icon-only control base: no border/pill (unlike the admin .icon-btn) —
   just an icon with a subtle count beside it. Used for heart + share on
   both the post page and post cards. */
.icon-btn-plain {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  transition: color .3s;
}
.icon-btn-plain:hover { color: var(--accent); }
.icon-btn-plain svg { stroke: currentColor; }

.engagement-count {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--accent);
}

.heart-btn.hearted { color: var(--accent); }
.heart-btn.hearted svg { fill: var(--accent); }
.heart-btn.pulse svg { transform: scale(1.35); }
.heart-btn svg { transition: transform .2s ease; }

.share-control { position: relative; }

/* ── Share modal (BS.ShareModal) — reuses .modal-overlay/.modal-box,
   same visual language as .contact-modal. ─────────────────────────── */

.share-modal {
  text-align: center;
  padding: 44px 38px 40px;
}

.share-modal-heading {
  font-family: var(--font-post);
  font-weight: 900;
  font-size: 26px;
  color: var(--ink);
  margin: 8px 0 18px;
}

.share-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--ink);
  background: var(--blush);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.share-option:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.share-option svg { stroke: currentColor; }

/* Mockup button trio: espresso (X) · cotton (facebook) · lilac (more…) */
.share-option:first-child {
  background: var(--ink);
  color: #FFF3FC;
  box-shadow: 3px 3px 0 var(--accent);
}
.share-option:first-child:hover { box-shadow: 2px 2px 0 var(--accent); }
.share-option:nth-child(3) { background: var(--lilac); }

.share-permalink-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 0;
  border-top: none;
}

.permalink-url {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--ink);
  opacity: .8;
  background: var(--box-bg);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 9px 12px;
  word-break: break-all;
}

/* Copy button (ships as the admin .icon-btn) → bubblegum pixel square */
.share-permalink-row .icon-btn {
  font-family: var(--font-mono);
  background: var(--bubblegum);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 9px 14px;
}
.share-permalink-row .icon-btn:hover {
  background: var(--ink);
  color: #FFF3FC;
  border-color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════
   Discovery (search box · date filter · pagination)
   ═══════════════════════════════════════════════════════════════════ */

/* Search + date controls sit at the right end of the .filter-row, so the
   category chips keep the left. Pushed right on wide screens; wraps below
   the chips on narrow ones. */
.filter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.filter-select,
.filter-search-input {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  transition: box-shadow .2s;
}
.filter-search-input { font-family: var(--font-body); font-weight: 400; padding: 6px 14px; }
.filter-select { text-transform: none; cursor: pointer; }
.filter-select:focus,
.filter-search-input:focus {
  outline: none;
  box-shadow: 2px 2px 0 var(--accent);
}

.filter-search { margin: 0; }
.filter-search-input { width: 190px; }
.filter-search-input::placeholder { color: var(--text-3); }

/* Prev / next pills flanking a white "PAGE N OF M" — centered on the
   pink band, no rule above (mockup). */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
  padding-top: 0;
  border-top: none;
}
.page-link {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 18px;
  box-shadow: 3px 3px 0 var(--accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.page-link:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--accent); }
.page-link.disabled {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--ink);
  box-shadow: none;
  opacity: .4;
  pointer-events: none;
}
.page-status {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFF3FC;
}

@media (max-width: 760px) {
  .filter-controls { margin-left: 0; width: 100%; }
  .filter-search { flex: 1; }
  .filter-search-input { width: 100%; }
}

/* ── Lightbox (original-size photo viewer) ───────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(41, 31, 30, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox img {
  max-width: 94vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  border: 3px solid #FFF3FC;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* Lightbox ✕: hot-pink square with a milk border (mockup) */
.lightbox .lightbox-close {
  background: var(--accent);
  border: 2px solid #FFF3FC;
  border-radius: 10px;
  color: #FFF3FC;
  padding: 6px;
  opacity: 1;
}
.lightbox .lightbox-close:hover { background: var(--accent-bright); }

.lightbox-close, .modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  color: #fff;
  padding: 8px;
  cursor: pointer;
  opacity: .85;
  transition: opacity .3s;
  z-index: 2;
}
.lightbox-close:hover, .modal-close:hover { opacity: 1; }

/* ── Studio detail modal ─────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(41, 31, 30, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.modal-box {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  max-width: 460px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px 28px 30px;
  box-shadow: 10px 10px 0 rgba(41, 31, 30, .3);
}

/* Pink square ✕ button */
.modal-close {
  color: var(--ink);
  background: var(--bubblegum);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 5px;
  top: 12px;
  right: 12px;
  opacity: 1;
}
.modal-close:hover { background: var(--accent); color: #fff; }

.modal-photo { aspect-ratio: 1 / 1; background: var(--blush); margin-bottom: 12px; }

.modal-thumbs { display: flex; gap: 10px; margin-bottom: 16px; }
.modal-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  opacity: .75;
  transition: all .3s;
}
.modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-thumb:hover { opacity: 1; }
.modal-thumb.active { border-color: var(--accent); border-width: 3px; opacity: 1; }

.modal-details {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 14px 0 22px;
}

/* Portfolio detail modal — a wide two-column layout: image + thumbnails
   fixed on the left (soft-pink media pane), text content scrolling on
   the right. */
.studio-modal {
  max-width: 920px;
  padding: 0;
  overflow: hidden;
  max-height: 88vh;
}

.studio-modal-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  max-height: 88vh;
}

.studio-modal-media {
  padding: 18px;
  background: var(--box-bg);
  border-right: 3px solid var(--ink);
  overflow-y: auto;
}
.studio-modal-media .modal-photo { margin-bottom: 12px; }

.studio-modal-body {
  padding: 28px 30px 30px 24px;
  overflow-y: auto;
}

.studio-modal-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.2;
  margin: 8px 0 4px;
}

.studio-modal-body .product-price { margin: 16px 0 18px; }
.studio-modal-body .specs-box { margin-top: 26px; }

/* Actions row: the in-world link pill + the text-only Share control
   sit side by side. */
.studio-modal-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Text-only button (no icon) — used for Share in the portfolio modal,
   set beside a .btn-pill so it reads as a secondary, quieter action. */
.text-btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s;
}
.text-btn:hover { color: var(--accent-bright); }

/* ── Contact modal ("Get in touch") ──────────────────────────────── */

/* A touch wider than the default 460px .modal-box so 5 equal columns
   (see .contact-links) have room to breathe. */
.contact-modal {
  text-align: center;
  padding: 44px 30px 46px;
  max-width: 520px;
}

.contact-heading {
  font-family: var(--font-post);
  font-weight: 900;
  font-size: 26px;
  color: var(--ink);
  margin: 8px 0 26px;
}

/* All 5 in one row (5 equal columns) by default — grid instead of
   flex-wrap, so the row doesn't wrap until the viewport actually forces
   it (see the responsive block below for the narrow-width step-down). */
.contact-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  gap: 30px 20px;
}

.contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  transition: opacity .3s, transform .3s;
}

/* Candy circles behind the icons, alternating fills */
.contact-link svg {
  box-sizing: content-box;
  padding: 11px;
  background: var(--bubblegum);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.contact-link:nth-child(3n+2) svg { background: var(--lilac); }
.contact-link:nth-child(3n) svg { background: var(--blush); }

.contact-link span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.contact-link:hover { transform: translateY(-2px); }
.contact-link:hover span { color: var(--accent); }
.contact-link.disabled { opacity: .45; cursor: default; }
.contact-link.disabled svg { background: #EEE6F5; }
.contact-link.disabled:hover { transform: none; }
.contact-link.disabled:hover span { color: var(--ink); }

/* ── Responsive ──────────────────────────────────────────────────── */

/* Home edge case: when the studio teaser is hidden, breathe before footer */
main > .section:last-child { padding-bottom: 90px; }

@media (max-width: 960px) {
  .post-title { font-size: 42px; }
  .page-head h1 { font-size: 38px; }
  .quote-band blockquote { font-size: 30px; }
  .card-grid, .studio-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-links { grid-template-columns: repeat(3, 1fr); }
  .vb-hero-grid, .vb-home-lower { grid-template-columns: 1fr; }
  .vb-announce-right { display: none; }
  /* Portfolio detail modal: stack image-over-text instead of side-by-side
     once the two-column layout no longer has room to breathe. */
  .studio-modal { max-width: 460px; }
  .studio-modal-grid {
    grid-template-columns: 1fr;
    max-height: none;
    overflow-y: auto;
  }
  .studio-modal-media, .studio-modal-body { overflow-y: visible; }
  .studio-modal-media { border-right: none; border-bottom: 2px solid var(--ink); }
}

@media (max-width: 760px) {
  :root { --gutter: 22px; }
  .nav-inner { grid-template-columns: auto 1fr; gap: 14px; padding: 12px 22px; min-width: 0; }
  /* The nav can now carry any number of items (packages, custom pages) —
     on small screens it becomes a swipeable row instead of overflowing. */
  .nav-links {
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 0 0 auto; font-size: 12px; }
  .nav-links a::before { width: 26px; height: 26px; }
  .nav-right { display: none; }
  .logo::after { display: none; }
  .logo-name { font-size: 24px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .vb-hero { padding: 36px 0; }
  .vb-hero-photo::after { width: 52px; height: 54px; top: -12px; left: -8px; }
  .vb-welcome-title { font-size: 30px; }
  .vb-dollz-body { grid-template-columns: 1fr; }
  .post-title { font-size: 34px; }
  .page-head h1 { font-size: 32px; }
  .page-head h1::after { top: -14px; right: -30px; width: 24px; height: 27px; }
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; margin-top: 34px; }
  .post-content { padding-left: 0; }
  .about-text { padding: 24px 22px; }
  .about-text::after { right: 0; }
  .post-body p { font-size: 14.5px; }
  .card-grid, .studio-grid, .related-grid { grid-template-columns: 1fr; }
  .img-grid.duo, .img-grid.trio { grid-template-columns: 1fr; }
  .vb-footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-logo { max-width: none; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .pullquote { font-size: 20px; }
  .quote-band blockquote { font-size: 24px; }
  .contact-links { grid-template-columns: repeat(2, 1fr); }
  .about-text::after { top: -30px; right: 6px; width: 52px; height: 45px; }
}

/* Motion is decorative here — respect the user's preference. */
@media (prefers-reduced-motion: reduce) {
  .vb-hero-photo::after,
  .footer-logo::after,
  .quote-band::before,
  .vb-marquee-track,
  .about-text::after { animation: none; }
  .card, .related-card, .package-card, .studio-item, .btn-pill, .page-link { transition: none; }
}

/* ── Admin panel (scoped) ─────────────────────────────────────────────
   The admin composer is theme-agnostic (styled in css/site.css) and
   inherits this theme's tokens and fonts. Verified 2026-07-10: inputs,
   cards, buttons and the offset shadows all render cleanly under this
   palette — the ONLY legibility problem is text contrast, because a few
   of the supporting tints tuned for the loud public pages fall below
   WCAG AA on dense admin forms:
     · form labels use --text-4 (#A18B88) → 3.2:1 on white
     · section titles use --accent (hot pink) → 3.9:1 on white
     · the active sidebar link is --accent on --blush → 3.3:1
   These overrides lift each to AA while staying on-brand (cherry/wine
   red). Everything is prefixed `.admin`, and this whole file only ships
   on the Vanessa build — so nothing here touches the public pages or
   Sofia's admin. Do not restyle the admin beyond contrast fixes. */
.admin .admin-main label { color: var(--text-2); }        /* #5A4644 — ~7:1 */
.admin .admin-main .block-kind { color: var(--wine); }    /* #B80303 — ~10:1 */
.admin .admin-sidebar-link.active { color: var(--wine); } /* on --blush — ~7:1 */