/* Veduka Design System — built stylesheet. Generated by scripts/build-css.mjs. */
/* Imported verbatim from the Claude Design project "Veduka — Design System"
   (@veduka/design-system@0.1.0). Do NOT hand-edit: re-import instead.
   The Google Fonts @import lives in functions.php as a real enqueue so that it
   is not render-blocked behind this file. */

/* ===== tokens/tokens.css ===== */
/* ==========================================================================
   Veduka Design System — tokens
   The single source of truth. Every value here also lives in tokens.json.
   Prefix: --vd-
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- 1. Brand palette -------------------------------------------------
     Purple and yellow are lifted straight out of the logo. Purple 500 is
     the logo purple: it is a SURFACE and a 32px+ display colour, not a
     button colour (white on it is 3.87:1). Purple 600 is the one that
     carries white text. */
  --vd-purple-50:  #F6F1F9;
  --vd-purple-100: #EDE3F2;
  --vd-purple-200: #DBC8E4;
  --vd-purple-300: #C4A8D2;
  --vd-purple-400: #AE8CC0;
  --vd-purple-500: #9C72AE;  /* logo */
  --vd-purple-600: #8A5C9C;  /* interactive */
  --vd-purple-700: #6C4A7C;
  --vd-purple-800: #513860;
  --vd-purple-900: #382642;

  --vd-yellow-50:  #FFFAEE;
  --vd-yellow-100: #FFF1D3;
  --vd-yellow-200: #FEE3A8;
  --vd-yellow-300: #FDD47D;
  --vd-yellow-400: #FCC557;  /* logo sparkles + tagline */
  --vd-yellow-500: #F5AF2E;
  --vd-yellow-600: #D9901A;
  --vd-yellow-700: #96600F;

  /* --- 2. Cream & ink ---------------------------------------------------
     The paper the whole brand sits on. Cream, never white-white; ink is a
     warm purple-cast charcoal, never #000. */
  --vd-cream-50:  #FFFCF8;
  --vd-cream-100: #FDF7F0;
  --vd-cream-200: #F8EEE3;
  --vd-cream-300: #F3E7DA;
  --vd-cream-400: #E8D8C7;

  --vd-ink:           #3E3646;
  --vd-ink-muted:     #6E6478;
  --vd-ink-subtle:    #8F8699;
  --vd-ink-link:      #6C4A7C;
  --vd-ink-on-brand:  #FDF7F0;
  --vd-ink-on-accent: #3E3646;

  /* --- 3. Semantic surfaces --------------------------------------------- */
  --vd-surface-page:    var(--vd-cream-100);
  --vd-surface-card:    #FFFFFF;
  --vd-surface-subtle:  var(--vd-purple-50);
  --vd-surface-sunken:  var(--vd-cream-200);
  --vd-surface-inverse: var(--vd-purple-700);
  --vd-surface-footer:  var(--vd-purple-800);

  --vd-border-subtle:  var(--vd-cream-300);
  --vd-border-default: var(--vd-cream-400);
  --vd-border-strong:  var(--vd-ink);
  --vd-border-brand:   var(--vd-purple-500);

  /* --- 4. Actions -------------------------------------------------------- */
  --vd-action-primary:       var(--vd-purple-600);
  --vd-action-primary-hover: var(--vd-purple-700);
  --vd-action-accent:        var(--vd-yellow-400);
  --vd-action-accent-hover:  var(--vd-yellow-500);
  --vd-focus-ring:           var(--vd-purple-600);

  /* --- 5. Subject colours ------------------------------------------------
     One hue per category, the way the reference shops colour-code subjects.
     Each comes as a solid (ink text sits on it), an ink (text on cream) and
     a tint (card and chip backgrounds). Never invent a seventh. */
  --vd-coral:      #F58C7E;  --vd-coral-ink:      #B33F33;  --vd-coral-tint:      #FDE7E3;
  --vd-mint:       #7FCFBB;  --vd-mint-ink:       #1F7A66;  --vd-mint-tint:       #E3F5EF;
  --vd-sky:        #7FB6E8;  --vd-sky-ink:        #2C6BA0;  --vd-sky-tint:        #E4F0FB;
  --vd-terracotta: #D69277;  --vd-terracotta-ink: #9A4E31;  --vd-terracotta-tint: #F6E7DE;
  --vd-amber:      #FCC557;  --vd-amber-ink:      #96600F;  --vd-amber-tint:      #FFF1D3;
  --vd-lilac:      #C4A8D2;  --vd-lilac-ink:      #6C4A7C;  --vd-lilac-tint:      #EDE3F2;

  /* --- 6. Feedback ------------------------------------------------------- */
  --vd-success: var(--vd-mint);   --vd-success-ink: var(--vd-mint-ink);
  --vd-danger:  var(--vd-coral);  --vd-danger-ink:  var(--vd-coral-ink);
  --vd-warning: var(--vd-amber);  --vd-warning-ink: var(--vd-amber-ink);
  --vd-info:    var(--vd-sky);    --vd-info-ink:    var(--vd-sky-ink);

  /* --- 7. Type ----------------------------------------------------------- */
  --vd-font-display: 'Fredoka', 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --vd-font-script:  'Caveat', 'Bradley Hand', cursive;
  --vd-font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vd-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --vd-text-3xs: 0.6875rem;  --vd-text-2xs: 0.75rem;    --vd-text-xs:  0.8125rem;
  --vd-text-sm:  0.9375rem;  --vd-text-md:  1rem;       --vd-text-lg:  1.125rem;
  --vd-text-xl:  1.3125rem;  --vd-text-2xl: 1.5rem;     --vd-text-3xl: 1.875rem;
  --vd-text-4xl: 2.375rem;   --vd-text-5xl: 3rem;       --vd-text-6xl: 3.75rem;
  --vd-text-7xl: 4.5rem;

  --vd-weight-regular: 400; --vd-weight-medium: 500; --vd-weight-semibold: 600;
  --vd-weight-bold: 700;    --vd-weight-black: 800;

  --vd-leading-tight: 1.06; --vd-leading-snug: 1.2;
  --vd-leading-normal: 1.45; --vd-leading-relaxed: 1.65;

  --vd-tracking-tight: -0.02em; --vd-tracking-normal: 0;
  --vd-tracking-wide: 0.06em;   --vd-tracking-wider: 0.14em;  --vd-tracking-widest: 0.22em;

  /* --- 8. Space (4px base) ------------------------------------------------ */
  --vd-space-0: 0;        --vd-space-1: 0.25rem;  --vd-space-2: 0.5rem;
  --vd-space-3: 0.75rem;  --vd-space-4: 1rem;     --vd-space-5: 1.25rem;
  --vd-space-6: 1.5rem;   --vd-space-7: 2rem;     --vd-space-8: 2.5rem;
  --vd-space-9: 3rem;     --vd-space-10: 4rem;    --vd-space-11: 5rem;
  --vd-space-12: 6.5rem;

  /* --- 9. Radius — the brand is round. Nothing is square except the page. -- */
  --vd-radius-xs: 6px;   --vd-radius-sm: 10px;  --vd-radius-md: 14px;
  --vd-radius-lg: 20px;  --vd-radius-xl: 28px;  --vd-radius-2xl: 36px;
  --vd-radius-pill: 999px; --vd-radius-circle: 50%;

  /* --- 10. Shadow — warm, soft, and one flat "sticker" drop --------------- */
  --vd-shadow-sm:      0 1px 2px rgba(62,54,70,0.06), 0 2px 6px rgba(62,54,70,0.05);
  --vd-shadow-md:      0 2px 4px rgba(62,54,70,0.05), 0 8px 20px rgba(62,54,70,0.08);
  --vd-shadow-lg:      0 4px 8px rgba(62,54,70,0.05), 0 18px 40px rgba(62,54,70,0.10);
  --vd-shadow-lift:    0 10px 24px rgba(108,74,124,0.18);
  --vd-shadow-press:   0 2px 0 rgba(62,54,70,0.14);
  --vd-shadow-sticker: 0 3px 0 rgba(62,54,70,0.16);

  /* --- 11. Motion -------------------------------------------------------- */
  --vd-duration-fast: 120ms;
  --vd-duration-base: 200ms;
  --vd-duration-slow: 360ms;
  --vd-ease:        cubic-bezier(0.34, 0.9, 0.36, 1);
  --vd-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- 12. Layout -------------------------------------------------------- */
  --vd-container-sm: 40rem; --vd-container-md: 58rem;
  --vd-container-lg: 72rem; --vd-container-xl: 82rem;
  --vd-gutter: 1.25rem;     --vd-gutter-lg: 2.5rem;
  --vd-section-y: 4rem;     --vd-section-y-lg: 6.5rem;

  /* --- 13. Elevation order ----------------------------------------------- */
  --vd-z-base: 0;
  --vd-z-raised: 10;
  --vd-z-sticky: 100;
  --vd-z-header: 200;
  --vd-z-overlay: 300;
  --vd-z-modal: 400;
  --vd-z-toast: 500;
}

@media (min-width: 768px) {
  :root { --vd-gutter: var(--vd-gutter-lg); --vd-section-y: var(--vd-section-y-lg); }
}

/* ===== css/reset.css ===== */
/* Veduka — reset. Small, opinionated, cream-first. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--vd-surface-page);
  color: var(--vd-ink);
  font-family: var(--vd-font-body);
  font-size: var(--vd-text-md);
  line-height: var(--vd-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: var(--vd-ink-link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--vd-purple-500); }

:focus-visible {
  outline: 3px solid var(--vd-focus-ring);
  outline-offset: 3px;
  border-radius: var(--vd-radius-xs);
}

::selection { background: var(--vd-yellow-200); color: var(--vd-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ===== css/typography.css ===== */
/* ==========================================================================
   Veduka — typography
   Three voices, and they never trade jobs:
     display (Fredoka)  headings, buttons, numbers — the logo's own voice
     script  (Caveat)   the eyebrow above a heading, a margin note. Never
                        uppercase, never body copy, never a whole sentence
                        longer than ~6 words
     body    (Nunito)   everything a person actually reads
   ========================================================================== */

/* --- Display ------------------------------------------------------------ */
.vd-display,
.vd-h1, .vd-h2, .vd-h3, .vd-h4 {
  font-family: var(--vd-font-display);
  font-weight: var(--vd-weight-semibold);
  color: var(--vd-ink);
  line-height: var(--vd-leading-snug);
  letter-spacing: var(--vd-tracking-tight);
  text-wrap: balance;
}

.vd-display { font-size: clamp(2.5rem, 6vw, var(--vd-text-7xl)); font-weight: var(--vd-weight-bold); line-height: var(--vd-leading-tight); }
.vd-h1 { font-size: clamp(2rem, 4.5vw, var(--vd-text-5xl)); font-weight: var(--vd-weight-bold); line-height: var(--vd-leading-tight); }
.vd-h2 { font-size: clamp(1.625rem, 3.2vw, var(--vd-text-4xl)); font-weight: var(--vd-weight-semibold); }
.vd-h3 { font-size: var(--vd-text-2xl); }
.vd-h4 { font-size: var(--vd-text-xl); }

/* The one place the logo purple is allowed on type: 32px and up, bold. */
.vd-display--brand, .vd-h1--brand { color: var(--vd-purple-500); }
.vd-h2--brand, .vd-h3--brand, .vd-h4--brand { color: var(--vd-purple-700); }

/* --- Script eyebrow ------------------------------------------------------ */
.vd-script {
  font-family: var(--vd-font-script);
  font-weight: var(--vd-weight-bold);
  font-size: clamp(var(--vd-text-2xl), 3vw, var(--vd-text-4xl));
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--vd-purple-500);
  text-transform: none;   /* never uppercase the script */
}
.vd-script--accent { color: var(--vd-yellow-600); }
.vd-script--on-brand { color: var(--vd-yellow-400); }
.vd-script--sm { font-size: var(--vd-text-xl); }

/* --- Body ---------------------------------------------------------------- */
.vd-lead {
  font-size: var(--vd-text-lg);
  line-height: var(--vd-leading-relaxed);
  color: var(--vd-ink-muted);
  max-width: 46ch;
  text-wrap: pretty;
}
.vd-body   { font-size: var(--vd-text-md); line-height: var(--vd-leading-relaxed); max-width: 68ch; }
.vd-body--sm { font-size: var(--vd-text-sm); }
.vd-muted  { color: var(--vd-ink-muted); }
.vd-subtle { color: var(--vd-ink-subtle); }

.vd-body + .vd-body, .vd-lead + .vd-body { margin-top: var(--vd-space-4); }

/* --- Tracked caps — the reference set's navigation signature -------------- */
.vd-caps {
  font-family: var(--vd-font-body);
  font-weight: var(--vd-weight-semibold);
  font-size: var(--vd-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--vd-tracking-wider);
  color: var(--vd-ink);
}
.vd-caps--lg { font-size: var(--vd-text-sm); letter-spacing: var(--vd-tracking-wide); }
.vd-caps--muted { color: var(--vd-ink-muted); }

/* --- Utility ------------------------------------------------------------- */
.vd-center { text-align: center; }
.vd-center .vd-lead, .vd-center .vd-body { margin-inline: auto; }
.vd-underline-mark {
  background: linear-gradient(transparent 62%, var(--vd-yellow-300) 62%, var(--vd-yellow-300) 94%, transparent 94%);
  padding-inline: 0.1em;
}

/* ===== css/components.css ===== */
/* ==========================================================================
   Veduka — components
   Every class is prefixed .vd-. Variants are --modifiers. Subject colour is
   set with a data attribute: data-subject="coral|mint|sky|terracotta|amber|lilac".
   ========================================================================== */

/* --- Subject colour hook -------------------------------------------------
   Any component inside [data-subject] picks up three variables. This is how
   a whole card, chip or circle changes hue without a new class. */
[data-subject="coral"]      { --vd-s: var(--vd-coral);      --vd-s-ink: var(--vd-coral-ink);      --vd-s-tint: var(--vd-coral-tint); }
[data-subject="mint"]       { --vd-s: var(--vd-mint);       --vd-s-ink: var(--vd-mint-ink);       --vd-s-tint: var(--vd-mint-tint); }
[data-subject="sky"]        { --vd-s: var(--vd-sky);        --vd-s-ink: var(--vd-sky-ink);        --vd-s-tint: var(--vd-sky-tint); }
[data-subject="terracotta"] { --vd-s: var(--vd-terracotta); --vd-s-ink: var(--vd-terracotta-ink); --vd-s-tint: var(--vd-terracotta-tint); }
[data-subject="amber"]      { --vd-s: var(--vd-amber);      --vd-s-ink: var(--vd-amber-ink);      --vd-s-tint: var(--vd-amber-tint); }
[data-subject="lilac"]      { --vd-s: var(--vd-lilac);      --vd-s-ink: var(--vd-lilac-ink);      --vd-s-tint: var(--vd-lilac-tint); }
:root { --vd-s: var(--vd-purple-500); --vd-s-ink: var(--vd-purple-700); --vd-s-tint: var(--vd-purple-50); }

/* ==========================================================================
   Layout
   ========================================================================== */
.vd-container { width: 100%; max-width: var(--vd-container-lg); margin-inline: auto; padding-inline: var(--vd-gutter); }
.vd-container--sm { max-width: var(--vd-container-sm); }
.vd-container--md { max-width: var(--vd-container-md); }
.vd-container--xl { max-width: var(--vd-container-xl); }

.vd-section { padding-block: var(--vd-section-y); }
.vd-section--tight { padding-block: var(--vd-space-8); }
.vd-section--card   { background: var(--vd-surface-card); }
.vd-section--sunken { background: var(--vd-surface-sunken); }
.vd-section--subtle { background: var(--vd-surface-subtle); }

.vd-stack > * + * { margin-top: var(--vd-space-4); }
.vd-stack--lg > * + * { margin-top: var(--vd-space-7); }
.vd-row { display: flex; align-items: center; gap: var(--vd-space-3); flex-wrap: wrap; }

.vd-grid { display: grid; gap: var(--vd-space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.vd-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.vd-grid--5 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--vd-space-7) var(--vd-space-5); }

/* ==========================================================================
   Section head — script eyebrow over a display heading
   ========================================================================== */
.vd-section-head { margin-bottom: var(--vd-space-8); }
.vd-section-head .vd-script { display: block; margin-bottom: var(--vd-space-1); }
.vd-section-head--center { text-align: center; }
.vd-section-head--center :where(.vd-lead, .vd-body) { margin-inline: auto; }

/* ==========================================================================
   Buttons — chunky, rounded, one flat drop shadow. They move on hover.
   ========================================================================== */
.vd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vd-space-2);
  font-family: var(--vd-font-display);
  font-weight: var(--vd-weight-semibold);
  font-size: var(--vd-text-md);
  line-height: 1;
  padding: 0.85em 1.6em;
  border-radius: var(--vd-radius-pill);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--vd-duration-fast) var(--vd-ease-bounce),
              box-shadow var(--vd-duration-fast) var(--vd-ease),
              background-color var(--vd-duration-fast) var(--vd-ease),
              color var(--vd-duration-fast) var(--vd-ease);
}
.vd-btn:hover { transform: translateY(-2px); }
.vd-btn:active { transform: translateY(1px); box-shadow: none; }

.vd-btn--primary { background: var(--vd-action-primary); color: #FFFFFF; box-shadow: var(--vd-shadow-sticker); }
.vd-btn--primary:hover { background: var(--vd-action-primary-hover); color: #FFFFFF; box-shadow: var(--vd-shadow-lift); }

.vd-btn--accent { background: var(--vd-action-accent); color: var(--vd-ink-on-accent); box-shadow: var(--vd-shadow-sticker); }
.vd-btn--accent:hover { background: var(--vd-action-accent-hover); color: var(--vd-ink-on-accent); box-shadow: var(--vd-shadow-lift); }

.vd-btn--outline { border-color: var(--vd-purple-600); color: var(--vd-purple-700); background: transparent; }
.vd-btn--outline:hover { background: var(--vd-purple-50); color: var(--vd-purple-700); }

.vd-btn--ghost { color: var(--vd-ink); background: transparent; }
.vd-btn--ghost:hover { background: var(--vd-cream-300); color: var(--vd-ink); }

/* On a purple band, the accent button leads and the outline turns cream. */
.vd-btn--on-brand { border-color: var(--vd-ink-on-brand); color: var(--vd-ink-on-brand); background: transparent; }
.vd-btn--on-brand:hover { background: var(--vd-ink-on-brand); color: var(--vd-purple-700); }

.vd-btn--sm { font-size: var(--vd-text-sm); padding: 0.7em 1.2em; }
.vd-btn--lg { font-size: var(--vd-text-lg); padding: 0.95em 2em; }
.vd-btn--block { display: flex; width: 100%; }
.vd-btn[disabled], .vd-btn--disabled {
  background: var(--vd-cream-300); color: var(--vd-ink-subtle);
  box-shadow: none; pointer-events: none; border-color: transparent;
}

/* ==========================================================================
   Badges & chips
   ========================================================================== */
.vd-badge {
  display: inline-flex; align-items: center; gap: var(--vd-space-1);
  font-family: var(--vd-font-body); font-weight: var(--vd-weight-bold);
  font-size: var(--vd-text-2xs); text-transform: uppercase;
  letter-spacing: var(--vd-tracking-wide);
  padding: 0.4em 0.85em; border-radius: var(--vd-radius-pill);
  background: var(--vd-s); color: var(--vd-ink);
}
.vd-badge--new  { background: var(--vd-yellow-400); color: var(--vd-ink); }
.vd-badge--free { background: var(--vd-mint); color: var(--vd-ink); }
.vd-badge--brand { background: var(--vd-purple-600); color: #FFFFFF; }
.vd-badge--outline { background: transparent; border: 2px solid var(--vd-border-default); color: var(--vd-ink-muted); }

.vd-chip {
  display: inline-flex; align-items: center; gap: var(--vd-space-2);
  font-size: var(--vd-text-sm); font-weight: var(--vd-weight-semibold);
  padding: 0.5em 1em; border-radius: var(--vd-radius-pill);
  background: var(--vd-s-tint); color: var(--vd-s-ink);
  border: 2px solid transparent; cursor: pointer;
  transition: border-color var(--vd-duration-fast) var(--vd-ease), transform var(--vd-duration-fast) var(--vd-ease-bounce);
}
.vd-chip:hover { transform: translateY(-1px); }
.vd-chip[aria-pressed="true"], .vd-chip--active { border-color: var(--vd-s-ink); }

/* ==========================================================================
   Cards
   ========================================================================== */
.vd-card {
  display: flex; flex-direction: column;
  background: var(--vd-surface-card);
  border-radius: var(--vd-radius-lg);
  box-shadow: var(--vd-shadow-sm);
  overflow: hidden;
  transition: transform var(--vd-duration-base) var(--vd-ease), box-shadow var(--vd-duration-base) var(--vd-ease);
}
.vd-card--link { text-decoration: none; color: inherit; }
.vd-card--link:hover { transform: translateY(-4px); box-shadow: var(--vd-shadow-lg); }
.vd-card--tint { background: var(--vd-s-tint); box-shadow: none; }
.vd-card--outline { box-shadow: none; border: 2px solid var(--vd-border-subtle); }

.vd-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--vd-s-tint); overflow: hidden; }
.vd-card__media img { width: 100%; height: 100%; object-fit: cover; }
.vd-card__media .vd-badge { position: absolute; top: var(--vd-space-3); left: var(--vd-space-3); box-shadow: var(--vd-shadow-sm); }
/* Stand-in for a missing cover: centres an emoji or icon in the media slot. */
.vd-placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.5rem; }
.vd-card__body { padding: var(--vd-space-5); display: flex; flex-direction: column; gap: var(--vd-space-2); flex: 1; }
.vd-card__title {
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold);
  font-size: var(--vd-text-lg); line-height: var(--vd-leading-snug); color: var(--vd-ink);
}
.vd-card__title a { color: inherit; text-decoration: none; }
.vd-card__title a:hover { color: var(--vd-purple-700); }
.vd-card__meta { font-size: var(--vd-text-xs); color: var(--vd-ink-muted); }
.vd-card__footer { margin-top: auto; padding-top: var(--vd-space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--vd-space-3); }
.vd-card__price { font-family: var(--vd-font-display); font-weight: var(--vd-weight-bold); font-size: var(--vd-text-lg); color: var(--vd-purple-700); }
.vd-card__price s { color: var(--vd-ink-subtle); font-weight: var(--vd-weight-regular); font-size: var(--vd-text-sm); margin-right: var(--vd-space-2); }

/* ==========================================================================
   Theme circle — the "browse by theme" row from the reference shops
   ========================================================================== */
.vd-theme { display: flex; flex-direction: column; align-items: center; gap: var(--vd-space-3); text-align: center; text-decoration: none; }
.vd-theme__circle {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--vd-radius-circle);
  overflow: hidden; background: var(--vd-s-tint);
  box-shadow: 0 0 0 0 var(--vd-s);
  transition: box-shadow var(--vd-duration-base) var(--vd-ease), transform var(--vd-duration-base) var(--vd-ease-bounce);
}
.vd-theme__circle img { width: 100%; height: 100%; object-fit: cover; }
.vd-theme:hover .vd-theme__circle { transform: translateY(-4px); box-shadow: 0 0 0 4px var(--vd-s); }
.vd-theme__label { font-size: var(--vd-text-xs); text-transform: uppercase; letter-spacing: var(--vd-tracking-wider); font-weight: var(--vd-weight-semibold); color: var(--vd-ink); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.vd-topbar {
  background: var(--vd-yellow-400); color: var(--vd-ink);
  font-size: var(--vd-text-sm); font-weight: var(--vd-weight-semibold);
}
.vd-topbar .vd-container { display: flex; align-items: center; justify-content: space-between; gap: var(--vd-space-5); min-height: 2.75rem; }
.vd-topbar a { color: var(--vd-ink); text-decoration: none; }
.vd-topbar a:hover { text-decoration: underline; }

.vd-header { background: var(--vd-surface-card); position: relative; z-index: var(--vd-z-header); }
.vd-header .vd-container { display: flex; align-items: center; justify-content: space-between; gap: var(--vd-space-6); padding-block: var(--vd-space-4); }
.vd-logo img { height: 3rem; width: auto; }
.vd-logo--sm img { height: 2.25rem; }

.vd-nav { display: flex; align-items: center; gap: var(--vd-space-7); flex-wrap: wrap; }
.vd-nav__link {
  display: inline-flex; align-items: center; gap: var(--vd-space-1);
  font-size: var(--vd-text-xs); font-weight: var(--vd-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--vd-tracking-wider);
  color: var(--vd-ink); text-decoration: none; padding-block: var(--vd-space-2);
  border-bottom: 2px solid transparent;
  transition: color var(--vd-duration-fast) var(--vd-ease), border-color var(--vd-duration-fast) var(--vd-ease);
}
.vd-nav__link:hover, .vd-nav__link[aria-current="page"] { color: var(--vd-purple-700); border-bottom-color: var(--vd-yellow-400); }
.vd-nav__link--hot { color: var(--vd-coral-ink); }

/* Icon subject bar */
.vd-subjectbar { background: var(--vd-surface-card); border-top: 2px solid var(--vd-border-subtle); }
.vd-subjectbar .vd-container { display: flex; justify-content: space-between; gap: var(--vd-space-4); overflow-x: auto; padding-block: var(--vd-space-4); }
.vd-subject { display: flex; flex-direction: column; align-items: center; gap: var(--vd-space-2); min-width: 5.5rem; text-decoration: none; }
.vd-subject__icon {
  width: 3.25rem; height: 3.25rem; border-radius: var(--vd-radius-circle);
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--vd-s-tint);
  transition: transform var(--vd-duration-base) var(--vd-ease-bounce);
}
.vd-subject:hover .vd-subject__icon { transform: translateY(-3px) rotate(-4deg); }
.vd-subject__label { font-size: var(--vd-text-3xs); text-transform: uppercase; letter-spacing: var(--vd-tracking-wide); font-weight: var(--vd-weight-bold); color: var(--vd-ink); }

/* ==========================================================================
   Band — the full-bleed colour strip with a script line in it
   ========================================================================== */
.vd-band { background: var(--vd-surface-inverse); color: var(--vd-ink-on-brand); padding-block: var(--vd-space-9); text-align: center; }
.vd-band .vd-script { color: var(--vd-yellow-400); }
.vd-band p { color: var(--vd-ink-on-brand); opacity: 0.92; margin-inline: auto; max-width: 46ch; }
.vd-band--accent { background: var(--vd-yellow-400); color: var(--vd-ink); }
.vd-band--accent .vd-script, .vd-band--accent p { color: var(--vd-ink); opacity: 1; }
.vd-band--terracotta { background: var(--vd-terracotta); color: var(--vd-ink); }
.vd-band--terracotta .vd-script, .vd-band--terracotta p { color: var(--vd-ink); opacity: 1; }

/* ==========================================================================
   Hero
   ========================================================================== */
.vd-hero { position: relative; overflow: hidden; background: var(--vd-surface-page); }
.vd-hero .vd-container { display: grid; gap: var(--vd-space-8); align-items: center; padding-block: var(--vd-space-10); }
@media (min-width: 768px) { .vd-hero .vd-container { grid-template-columns: 1.05fr 0.95fr; } }
.vd-hero__copy { position: relative; z-index: var(--vd-z-raised); display: flex; flex-direction: column; gap: var(--vd-space-5); align-items: flex-start; }
.vd-hero__art { position: relative; }
.vd-hero__art img { border-radius: var(--vd-radius-2xl); }

/* ==========================================================================
   Forms
   ========================================================================== */
.vd-field { display: flex; flex-direction: column; gap: var(--vd-space-2); }
.vd-label { font-size: var(--vd-text-sm); font-weight: var(--vd-weight-bold); color: var(--vd-ink); }
.vd-hint { font-size: var(--vd-text-xs); color: var(--vd-ink-muted); }
.vd-input, .vd-select, .vd-textarea {
  width: 100%; background: var(--vd-surface-card); color: var(--vd-ink);
  border: 2px solid var(--vd-border-default); border-radius: var(--vd-radius-pill);
  padding: 0.75em 1.15em; font-size: var(--vd-text-md);
  transition: border-color var(--vd-duration-fast) var(--vd-ease), box-shadow var(--vd-duration-fast) var(--vd-ease);
}
.vd-textarea { border-radius: var(--vd-radius-md); min-height: 7rem; resize: vertical; }
.vd-input::placeholder, .vd-textarea::placeholder { color: var(--vd-ink-subtle); }
.vd-input:hover, .vd-select:hover, .vd-textarea:hover { border-color: var(--vd-purple-300); }
.vd-input:focus, .vd-select:focus, .vd-textarea:focus {
  outline: none; border-color: var(--vd-purple-600); box-shadow: 0 0 0 4px var(--vd-purple-100);
}
.vd-input[aria-invalid="true"] { border-color: var(--vd-danger-ink); }
.vd-input[disabled], .vd-select[disabled], .vd-textarea[disabled] {
  background: var(--vd-cream-200); color: var(--vd-ink-subtle);
  border-color: var(--vd-border-subtle); cursor: not-allowed;
}
.vd-error { font-size: var(--vd-text-xs); font-weight: var(--vd-weight-bold); color: var(--vd-danger-ink); }
.vd-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E6478' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 0.75rem;
  padding-right: 2.75rem;
}
.vd-search { position: relative; }
.vd-search .vd-input { padding-left: 2.9rem; }
.vd-search__icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--vd-ink-muted); pointer-events: none; }

/* ==========================================================================
   Newsletter bar — the sticky capture strip
   ========================================================================== */
.vd-newsletter { background: var(--vd-mint); color: var(--vd-ink); padding-block: var(--vd-space-4); }
.vd-newsletter .vd-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--vd-space-4); }
.vd-newsletter__title { font-family: var(--vd-font-display); font-weight: var(--vd-weight-bold); font-size: var(--vd-text-xl); }
.vd-newsletter form { display: flex; flex-wrap: wrap; gap: var(--vd-space-3); flex: 1; min-width: min(100%, 22rem); justify-content: flex-end; }
.vd-newsletter .vd-input { flex: 1; min-width: 9rem; border-color: transparent; }

/* Floating free-resources pill */
.vd-float-cta {
  position: fixed; left: var(--vd-space-4); bottom: var(--vd-space-4); z-index: var(--vd-z-sticky);
  background: var(--vd-terracotta); color: var(--vd-ink);
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold);
  padding: 0.9em 1.6em; border-radius: var(--vd-radius-pill) var(--vd-radius-pill) 0 0;
  box-shadow: var(--vd-shadow-lg); text-decoration: none;
}
.vd-float-cta:hover { background: var(--vd-terracotta-ink); color: var(--vd-cream-100); }

/* ==========================================================================
   Review card
   ========================================================================== */
.vd-review { background: var(--vd-surface-card); border-radius: var(--vd-radius-lg); padding: var(--vd-space-6); box-shadow: var(--vd-shadow-sm); display: flex; flex-direction: column; gap: var(--vd-space-3); }
.vd-stars { color: var(--vd-yellow-500); font-size: var(--vd-text-lg); letter-spacing: 0.1em; }
.vd-review__quote { font-size: var(--vd-text-md); line-height: var(--vd-leading-relaxed); }
.vd-review__author { font-size: var(--vd-text-xs); text-transform: uppercase; letter-spacing: var(--vd-tracking-wide); font-weight: var(--vd-weight-bold); color: var(--vd-ink-muted); }

/* ==========================================================================
   Alerts & notes
   ========================================================================== */
.vd-alert {
  display: flex; gap: var(--vd-space-3); align-items: flex-start;
  padding: var(--vd-space-4) var(--vd-space-5); border-radius: var(--vd-radius-md);
  background: var(--vd-s-tint); color: var(--vd-ink);
  border-left: 6px solid var(--vd-s);
}
.vd-alert--success { background: var(--vd-mint-tint); border-left-color: var(--vd-success); }
.vd-alert--danger  { background: var(--vd-coral-tint); border-left-color: var(--vd-danger); }
.vd-alert--warning { background: var(--vd-amber-tint); border-left-color: var(--vd-warning); }
.vd-alert--info    { background: var(--vd-sky-tint); border-left-color: var(--vd-info); }
.vd-alert__title { font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold); }

/* Teacher's sticky note — for tips inside a resource page */
.vd-note {
  background: var(--vd-yellow-100); padding: var(--vd-space-5);
  border-radius: var(--vd-radius-sm); box-shadow: var(--vd-shadow-sm);
  transform: rotate(-1deg);
}
.vd-note .vd-script { display: block; margin-bottom: var(--vd-space-2); color: var(--vd-yellow-700); }

/* Checklist */
.vd-check { display: flex; flex-direction: column; gap: var(--vd-space-3); }
.vd-check li { display: flex; gap: var(--vd-space-3); align-items: flex-start; }
.vd-check li::before {
  content: "✓"; flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--vd-radius-circle);
  background: var(--vd-mint); color: var(--vd-ink); display: grid; place-items: center;
  font-size: var(--vd-text-xs); font-weight: var(--vd-weight-bold); margin-top: 0.1rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.vd-footer { background: var(--vd-surface-footer); color: var(--vd-ink-on-brand); padding-block: var(--vd-space-9) var(--vd-space-7); }
.vd-footer a { color: var(--vd-ink-on-brand); text-decoration: none; opacity: 0.85; }
.vd-footer a:hover { opacity: 1; color: var(--vd-yellow-400); text-decoration: underline; }
.vd-footer__grid { display: grid; gap: var(--vd-space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.vd-footer__title { font-family: var(--vd-font-display); font-weight: var(--vd-weight-semibold); font-size: var(--vd-text-md); text-transform: uppercase; letter-spacing: var(--vd-tracking-wide); margin-bottom: var(--vd-space-4); color: var(--vd-yellow-400); }
.vd-footer__list { display: flex; flex-direction: column; gap: var(--vd-space-2); font-size: var(--vd-text-sm); }
.vd-footer__bottom { margin-top: var(--vd-space-8); padding-top: var(--vd-space-5); border-top: 1px solid rgba(253,247,240,0.2); font-size: var(--vd-text-xs); opacity: 0.75; display: flex; flex-wrap: wrap; gap: var(--vd-space-4); justify-content: space-between; }

/* Skip link */
.vd-skip { position: absolute; left: -9999px; }
.vd-skip:focus { left: var(--vd-space-4); top: var(--vd-space-4); z-index: var(--vd-z-toast); background: var(--vd-purple-700); color: #fff; padding: var(--vd-space-3) var(--vd-space-5); border-radius: var(--vd-radius-pill); }
.vd-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== css/patterns.css ===== */
/* ==========================================================================
   Veduka — decoration
   The playfulness lives here, and it is always BEHIND the content: a tinted
   pattern, a blob, a sparkle. Never over type, never above 0.5 opacity on a
   surface that carries body copy.

   Patterns are masks, so their colour comes from --vd-pattern-color. Set it
   per section and the same tile works in any hue.
   ========================================================================== */

.vd-pattern { position: relative; isolation: isolate; }
.vd-pattern > * { position: relative; z-index: 1; }
.vd-pattern::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--vd-pattern-color, var(--vd-yellow-500));
  opacity: var(--vd-pattern-opacity, 0.28);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: var(--vd-pattern-size, 240px); mask-size: var(--vd-pattern-size, 240px);
}
.vd-pattern--doodle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 240 240%22 width%3D%22240%22 height%3D%22240%22%3E %3Cg fill%3D%22none%22 stroke%3D%22%233E3646%22 stroke-width%3D%223%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E %3C!-- pencil --%3E %3Cg transform%3D%22translate(18 20) rotate(-18)%22%3E %3Cpath d%3D%22M0 8h40l10 8-10 8H0z%22%2F%3E%3Cpath d%3D%22M40 8l10 8-10 8%22%2F%3E%3Cpath d%3D%22M8 8v16%22%2F%3E %3C%2Fg%3E %3C!-- open book --%3E %3Cg transform%3D%22translate(126 26)%22%3E %3Cpath d%3D%22M0 6c10-6 22-6 32 0v30c-10-6-22-6-32 0z%22%2F%3E %3Cpath d%3D%22M32 6c10-6 22-6 32 0v30c-10-6-22-6-32 0z%22%2F%3E %3C%2Fg%3E %3C!-- star --%3E %3Cg transform%3D%22translate(96 96)%22%3E %3Cpath d%3D%22M16 0l5 11 12 1-9 8 3 12-11-6-11 6 3-12-9-8 12-1z%22%2F%3E %3C%2Fg%3E %3C!-- graduation cap --%3E %3Cg transform%3D%22translate(20 128)%22%3E %3Cpath d%3D%22M0 12L24 2l24 10-24 10z%22%2F%3E%3Cpath d%3D%22M10 17v12c0 4 28 4 28 0V17%22%2F%3E%3Cpath d%3D%22M46 13v14%22%2F%3E %3C%2Fg%3E %3C!-- apple --%3E %3Cg transform%3D%22translate(176 122)%22%3E %3Cpath d%3D%22M16 8c-4-4-14-3-15 6-1 10 7 20 12 20 2 0 3-1 4-1s2 1 4 1c5 0 12-10 11-20-1-9-11-10-15-6z%22%2F%3E %3Cpath d%3D%22M16 8V2%22%2F%3E%3Cpath d%3D%22M16 4c4-3 8-3 10-1-1 3-6 4-10 1z%22%2F%3E %3C%2Fg%3E %3C!-- scissors --%3E %3Cg transform%3D%22translate(34 190) rotate(-8)%22%3E %3Cpath d%3D%22M2 2l24 20M26 2L2 22%22%2F%3E%3Ccircle cx%3D%2230%22 cy%3D%226%22 r%3D%224%22%2F%3E%3Ccircle cx%3D%2230%22 cy%3D%2220%22 r%3D%224%22%2F%3E %3C%2Fg%3E %3C!-- paint brush --%3E %3Cg transform%3D%22translate(122 178) rotate(22)%22%3E %3Cpath d%3D%22M4 0h10v22H4z%22%2F%3E%3Cpath d%3D%22M2 22h14l-3 12H5z%22%2F%3E%3Cpath d%3D%22M9 34v8%22%2F%3E %3C%2Fg%3E %3C!-- sparkle --%3E %3Cg transform%3D%22translate(196 196)%22%3E %3Cpath d%3D%22M12 0c1 8 3 11 12 12-9 1-11 3-12 12-1-9-3-11-12-12 9-1 11-4 12-12z%22%2F%3E %3C%2Fg%3E %3C%2Fg%3E %3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 240 240%22 width%3D%22240%22 height%3D%22240%22%3E %3Cg fill%3D%22none%22 stroke%3D%22%233E3646%22 stroke-width%3D%223%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E %3C!-- pencil --%3E %3Cg transform%3D%22translate(18 20) rotate(-18)%22%3E %3Cpath d%3D%22M0 8h40l10 8-10 8H0z%22%2F%3E%3Cpath d%3D%22M40 8l10 8-10 8%22%2F%3E%3Cpath d%3D%22M8 8v16%22%2F%3E %3C%2Fg%3E %3C!-- open book --%3E %3Cg transform%3D%22translate(126 26)%22%3E %3Cpath d%3D%22M0 6c10-6 22-6 32 0v30c-10-6-22-6-32 0z%22%2F%3E %3Cpath d%3D%22M32 6c10-6 22-6 32 0v30c-10-6-22-6-32 0z%22%2F%3E %3C%2Fg%3E %3C!-- star --%3E %3Cg transform%3D%22translate(96 96)%22%3E %3Cpath d%3D%22M16 0l5 11 12 1-9 8 3 12-11-6-11 6 3-12-9-8 12-1z%22%2F%3E %3C%2Fg%3E %3C!-- graduation cap --%3E %3Cg transform%3D%22translate(20 128)%22%3E %3Cpath d%3D%22M0 12L24 2l24 10-24 10z%22%2F%3E%3Cpath d%3D%22M10 17v12c0 4 28 4 28 0V17%22%2F%3E%3Cpath d%3D%22M46 13v14%22%2F%3E %3C%2Fg%3E %3C!-- apple --%3E %3Cg transform%3D%22translate(176 122)%22%3E %3Cpath d%3D%22M16 8c-4-4-14-3-15 6-1 10 7 20 12 20 2 0 3-1 4-1s2 1 4 1c5 0 12-10 11-20-1-9-11-10-15-6z%22%2F%3E %3Cpath d%3D%22M16 8V2%22%2F%3E%3Cpath d%3D%22M16 4c4-3 8-3 10-1-1 3-6 4-10 1z%22%2F%3E %3C%2Fg%3E %3C!-- scissors --%3E %3Cg transform%3D%22translate(34 190) rotate(-8)%22%3E %3Cpath d%3D%22M2 2l24 20M26 2L2 22%22%2F%3E%3Ccircle cx%3D%2230%22 cy%3D%226%22 r%3D%224%22%2F%3E%3Ccircle cx%3D%2230%22 cy%3D%2220%22 r%3D%224%22%2F%3E %3C%2Fg%3E %3C!-- paint brush --%3E %3Cg transform%3D%22translate(122 178) rotate(22)%22%3E %3Cpath d%3D%22M4 0h10v22H4z%22%2F%3E%3Cpath d%3D%22M2 22h14l-3 12H5z%22%2F%3E%3Cpath d%3D%22M9 34v8%22%2F%3E %3C%2Fg%3E %3C!-- sparkle --%3E %3Cg transform%3D%22translate(196 196)%22%3E %3Cpath d%3D%22M12 0c1 8 3 11 12 12-9 1-11 3-12 12-1-9-3-11-12-12 9-1 11-4 12-12z%22%2F%3E %3C%2Fg%3E %3C%2Fg%3E %3C%2Fsvg%3E");
}
.vd-pattern--confetti::before {
  -webkit-mask-size: 120px; mask-size: 120px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 120 120%22 width%3D%22120%22 height%3D%22120%22%3E %3Cg fill%3D%22%233E3646%22%3E %3Crect x%3D%228%22   y%3D%2214%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(28 9 20)%22%2F%3E %3Crect x%3D%2246%22  y%3D%226%22   width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(-42 47 12)%22%2F%3E %3Crect x%3D%2286%22  y%3D%2218%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(66 87 24)%22%2F%3E %3Crect x%3D%2224%22  y%3D%2244%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(-14 25 50)%22%2F%3E %3Crect x%3D%2266%22  y%3D%2252%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(52 67 58)%22%2F%3E %3Crect x%3D%22104%22 y%3D%2246%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(-36 105 52)%22%2F%3E %3Crect x%3D%2212%22  y%3D%2282%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(48 13 88)%22%2F%3E %3Crect x%3D%2252%22  y%3D%2290%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(-24 53 96)%22%2F%3E %3Crect x%3D%2292%22  y%3D%2284%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(16 93 90)%22%2F%3E %3Crect x%3D%2234%22  y%3D%22108%22 width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(-58 35 114)%22%2F%3E %3Crect x%3D%2278%22  y%3D%22112%22 width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(34 79 118)%22%2F%3E %3C%2Fg%3E %3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 120 120%22 width%3D%22120%22 height%3D%22120%22%3E %3Cg fill%3D%22%233E3646%22%3E %3Crect x%3D%228%22   y%3D%2214%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(28 9 20)%22%2F%3E %3Crect x%3D%2246%22  y%3D%226%22   width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(-42 47 12)%22%2F%3E %3Crect x%3D%2286%22  y%3D%2218%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(66 87 24)%22%2F%3E %3Crect x%3D%2224%22  y%3D%2244%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(-14 25 50)%22%2F%3E %3Crect x%3D%2266%22  y%3D%2252%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(52 67 58)%22%2F%3E %3Crect x%3D%22104%22 y%3D%2246%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(-36 105 52)%22%2F%3E %3Crect x%3D%2212%22  y%3D%2282%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(48 13 88)%22%2F%3E %3Crect x%3D%2252%22  y%3D%2290%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(-24 53 96)%22%2F%3E %3Crect x%3D%2292%22  y%3D%2284%22  width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(16 93 90)%22%2F%3E %3Crect x%3D%2234%22  y%3D%22108%22 width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(-58 35 114)%22%2F%3E %3Crect x%3D%2278%22  y%3D%22112%22 width%3D%223%22 height%3D%2213%22 rx%3D%221.5%22 transform%3D%22rotate(34 79 118)%22%2F%3E %3C%2Fg%3E %3C%2Fsvg%3E");
}
.vd-pattern--dots::before {
  -webkit-mask-size: 60px; mask-size: 60px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 60 60%22 width%3D%2260%22 height%3D%2260%22%3E %3Cg fill%3D%22%233E3646%22%3E%3Ccircle cx%3D%2215%22 cy%3D%2215%22 r%3D%224%22%2F%3E%3Ccircle cx%3D%2245%22 cy%3D%2245%22 r%3D%224%22%2F%3E%3C%2Fg%3E %3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 60 60%22 width%3D%2260%22 height%3D%2260%22%3E %3Cg fill%3D%22%233E3646%22%3E%3Ccircle cx%3D%2215%22 cy%3D%2215%22 r%3D%224%22%2F%3E%3Ccircle cx%3D%2245%22 cy%3D%2245%22 r%3D%224%22%2F%3E%3C%2Fg%3E %3C%2Fsvg%3E");
}
.vd-pattern--sparkle::before {
  -webkit-mask-size: 180px; mask-size: 180px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 100 100%22 width%3D%22100%22 height%3D%22100%22%3E %3Cpath d%3D%22M50 0c4 32 14 46 50 50-36 4-46 14-50 50-4-36-14-46-50-50 36-4 46-18 50-50z%22 fill%3D%22%23FCC557%22%2F%3E %3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 100 100%22 width%3D%22100%22 height%3D%22100%22%3E %3Cpath d%3D%22M50 0c4 32 14 46 50 50-36 4-46 14-50 50-4-36-14-46-50-50 36-4 46-18 50-50z%22 fill%3D%22%23FCC557%22%2F%3E %3C%2Fsvg%3E");
}

/* Blob — the soft shape behind a hero photo or a portrait */
.vd-blob { position: relative; }
.vd-blob::before {
  content: ""; position: absolute; inset: -13% -11% -9% -13%; z-index: 0;
  background: var(--vd-blob-color, var(--vd-mint));
  opacity: var(--vd-blob-opacity, 1);
  border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
}
.vd-blob > * { position: relative; z-index: 1; }
.vd-blob--outline::before { background: transparent; border: 3px solid var(--vd-blob-color, var(--vd-mint)); }

/* Sparkle accents — the two stars in the logo, reused as punctuation */
.vd-sparkle { position: relative; display: inline-block; }
.vd-sparkle::after {
  content: ""; position: absolute; top: -0.4em; right: -0.9em;
  width: 0.7em; height: 0.7em;
  background: var(--vd-yellow-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 100 100%22 width%3D%22100%22 height%3D%22100%22%3E %3Cpath d%3D%22M50 0c4 32 14 46 50 50-36 4-46 14-50 50-4-36-14-46-50-50 36-4 46-18 50-50z%22 fill%3D%22%23FCC557%22%2F%3E %3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 100 100%22 width%3D%22100%22 height%3D%22100%22%3E %3Cpath d%3D%22M50 0c4 32 14 46 50 50-36 4-46 14-50 50-4-36-14-46-50-50 36-4 46-18 50-50z%22 fill%3D%22%23FCC557%22%2F%3E %3C%2Fsvg%3E") center / contain no-repeat;
}

/* Scalloped edge — the paper-cutout hem between two sections */
.vd-scallop { position: relative; }
.vd-scallop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 24px;
  background: var(--vd-scallop-color, var(--vd-surface-page));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 120 24%22 width%3D%22120%22 height%3D%2224%22 preserveAspectRatio%3D%22none%22%3E %3Cpath fill%3D%22%23FDF7F0%22 d%3D%22M0 24h120V8c-10 0-10 10-20 10S90 8 80 8 70 18 60 18 50 8 40 8 30 18 20 18 10 8 0 8z%22%2F%3E %3C%2Fsvg%3E") bottom center / 120px 24px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 120 24%22 width%3D%22120%22 height%3D%2224%22 preserveAspectRatio%3D%22none%22%3E %3Cpath fill%3D%22%23FDF7F0%22 d%3D%22M0 24h120V8c-10 0-10 10-20 10S90 8 80 8 70 18 60 18 50 8 40 8 30 18 20 18 10 8 0 8z%22%2F%3E %3C%2Fsvg%3E") bottom center / 120px 24px repeat-x;
}

/* Rotation — stickers are never perfectly straight, but only just barely */
.vd-tilt-l { transform: rotate(-2deg); }
.vd-tilt-r { transform: rotate(2deg); }

/* Frames */
.vd-frame-circle { border-radius: var(--vd-radius-circle); overflow: hidden; }
.vd-frame-soft { border-radius: var(--vd-radius-2xl); overflow: hidden; }
.vd-frame-ring { box-shadow: 0 0 0 4px var(--vd-surface-page), 0 0 0 8px var(--vd-yellow-400); }