:root {
  --bg: #fffaf2;
  --surface: #ffffff;
  --ink: #1d2a44;
  --muted: #5b6478;
  --line: #eadfcd;
  --blue: #1f6fd1;
  --blue-dark: #174f96;
  --yellow: #ffc233;
  --red: #ef5a3c;
  --green: #2fa36b;
  --brand: #651961;       /* header and footer */
  --brand-dark: #4b1248;  /* menu hover on the header */
  --radius: 14px;
  --wrap: 1120px;
  --measure: 72ch;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Fredoka", "Nunito Sans", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh; display: flex; flex-direction: column; /* keeps the footer at the bottom on short pages */
  background-color: rgb(255, 182, 70);
  background-image: url(cogs.png); /* relative to this stylesheet: /assets/cogs.png */
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-body);
}
img, video, iframe { max-width: 100%; }
img { height: auto; }
/* The build wraps images in <picture> for AVIF/WebP; keep layout as if it weren't there. */
picture { display: contents; }
picture > source { display: none; }
a { color: var(--blue); text-underline-offset: 0.18em; }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 12px; z-index: 10; }

/* Header ------------------------------------------------------------------ */
.site-header {
  background: var(--brand);
  border-bottom: 4px solid var(--yellow);
  position: sticky; top: 0; z-index: 5;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { display: block; flex-shrink: 1; min-width: 0; }
.brand img { display: block; height: 52px; width: auto; max-width: 100%; }

nav ul { list-style: none; margin: 0; padding: 0; }
.menu-wide { display: none; }
.menu summary {
  cursor: pointer; list-style: none;
  font: 600 1rem var(--font-head); padding: 8px 14px; border-radius: 999px; color: #fff; border: 2px solid rgba(255, 255, 255, 0.6);
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] > ul {
  position: absolute; right: 16px; left: 16px; top: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px; box-shadow: 0 12px 30px rgba(29, 42, 68, 0.12);
}
.menu li a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 700; }
.menu li a[aria-current] { background: var(--bg); color: var(--blue); }
.nav-label { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--muted); }
.menu .sub { margin: 0 0 4px 12px; padding-left: 8px; border-left: 2px solid var(--line); }
.menu .sub a { font-weight: 400; padding-block: 6px; }

@media (min-width: 1080px) {
  .menu { display: none; }
  .menu-wide { display: flex; align-items: center; gap: 2px; }
  .menu-wide a {
    display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none;
    color: #fff; font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  }
  .menu-wide a:hover { background: var(--brand-dark); color: #fff; }
  .menu-wide a[aria-current] { color: #fff; box-shadow: inset 0 -3px 0 var(--yellow); border-radius: 0; }

  /* Sub-menus: drop down on hover or keyboard focus */
  .menu-wide .has-sub { position: relative; }
  .menu-wide .has-sub > a::after, .menu-wide .has-sub > .nav-label::after { content: " ▾"; font-size: 0.8em; }
  .menu-wide .nav-label { padding: 8px 12px; color: #fff; font-size: 0.95rem; white-space: nowrap; cursor: default; }
  .menu-wide .in-section > a, .menu-wide .in-section > .nav-label { box-shadow: inset 0 -3px 0 var(--yellow); border-radius: 0; }
  .menu-wide .sub {
    display: none; position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 6;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 8px; box-shadow: 0 12px 30px rgba(29, 42, 68, 0.16);
  }
  .menu-wide .has-sub:hover > .sub, .menu-wide .has-sub:focus-within > .sub { display: block; }
  .menu-wide .sub a { color: var(--ink); border-radius: 8px; white-space: normal; }
  .menu-wide .sub a:hover { background: var(--bg); color: var(--blue); }
  .menu-wide .sub a[aria-current] { color: var(--blue); box-shadow: none; border-radius: 8px; }
}
.nav-button, .menu-wide a.nav-button { background: var(--red); color: #fff !important; border-radius: 999px !important; box-shadow: none !important; margin-left: 6px; }
.nav-button:hover { background: #d9462a !important; }

/* Main -------------------------------------------------------------------- */
/* Content sits on a white panel over the patterned page background */
main {
  background: var(--surface);
  border-radius: var(--radius);
  margin-block: 28px 40px;
  padding: 32px clamp(16px, 4vw, 48px) 56px;
  box-shadow: 0 10px 30px rgba(101, 25, 97, 0.18);
}
.page-header { max-width: var(--measure); margin: 0 auto 20px; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); margin: 0 0 8px; }
.meta { color: var(--muted); font-size: 0.95rem; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }

.featured { margin: 0 auto 28px; max-width: 900px; }
.featured img { display: block; width: auto; max-width: 100%; max-height: 520px; margin-inline: auto; border-radius: var(--radius); }
.home .featured { max-width: none; }
.home .featured img { width: 100%; max-height: 460px; object-fit: cover; }

.content { max-width: var(--measure); margin-inline: auto; overflow-wrap: break-word; }
.content h2 { font-size: 1.75rem; margin: 2em 0 0.5em; }
.content h3 { font-size: 1.35rem; margin: 1.6em 0 0.4em; }
.content img { border-radius: 10px; display: block; margin: 1.25em auto; }
/* Image galleries (the "Image gallery" block in the CMS) */
.content .gallery { display: grid; gap: 8px; margin: 1.5em 0; grid-template-columns: repeat(3, 1fr); }
.content .gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.content .gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.content .gallery img { margin: 0; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.content .gallery figure { margin: 0; }
.content .gallery figure img { height: auto; }
.content .gallery figcaption { margin-top: 6px; color: var(--muted); font-size: .9rem; font-style: italic; text-align: center; line-height: 1.35; }
@media (max-width: 600px) { .content .gallery { grid-template-columns: repeat(2, 1fr); } }
.content iframe { width: 100%; border-radius: 10px; border: 0; }
.content iframe[src*="youtube"], .content iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }
.content hr { border: 0; height: 4px; margin: 2.5em auto; width: 120px; border-radius: 4px;
  background: linear-gradient(90deg, var(--blue) 0 33%, var(--yellow) 33% 66%, var(--red) 66%); }
/* "Centered text" and "Button" blocks in the CMS */
.content .center { text-align: center; }
.content .cta { margin: 1.75em 0; }
.content .cta.center { text-align: center; }
.content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.content th, .content td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.content blockquote { margin: 1.5em 0; padding: 4px 20px; border-left: 4px solid var(--yellow); background: var(--bg); border-radius: 0 10px 10px 0; }
.content a[href$=".pdf"]::after { content: " (PDF)"; font-size: 0.85em; color: var(--muted); }
.content p > strong:only-child { font-size: 1.05em; }
/* Home page gift certificate link: Markdown can't carry a class, so match the purchase URL.
   The intro spans the full card, with the button beside the paragraph before it on wide screens. */
.home .content { max-width: none; }
@media (min-width: 720px) {
  .home .content { display: flex; flex-wrap: wrap; column-gap: 40px; align-items: center; }
  .home .content > * { flex: 0 0 100%; }
  /* Flex items don't collapse margins, so drop the top margin to keep normal spacing */
  .home .content > * + * { margin-top: 0; }
  .home .content > :has(+ p > a[href*="veevartapp.com/gift-cards"]) { flex: 1 1 0; }
  .home .content > p:has(> a[href*="veevartapp.com/gift-cards"]) { flex: 0 0 auto; margin: 0; }
}
.home .content a[href*="veevartapp.com/gift-cards"],
.content .cta a {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); color: #fff; font-weight: 700; text-decoration: none;
  padding: 12px 26px; border-radius: 999px;
  box-shadow: 0 4px 0 #c2412a, 0 8px 18px rgba(239, 90, 60, 0.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.content .cta a { white-space: normal; text-align: center; } /* long labels wrap on phones */
.home .content a[href*="veevartapp.com/gift-cards"]::before { content: "🎁"; font-size: 1.15em; }
.home .content a[href*="veevartapp.com/gift-cards"]:hover, .content .cta a:hover { background: #d9462a; transform: translateY(-2px); box-shadow: 0 6px 0 #c2412a, 0 12px 22px rgba(239, 90, 60, 0.32); }
.home .content a[href*="veevartapp.com/gift-cards"]:active, .content .cta a:active { transform: translateY(2px); box-shadow: 0 2px 0 #c2412a, 0 4px 10px rgba(239, 90, 60, 0.25); }
.home .content a[href*="veevartapp.com/gift-cards"]:focus-visible, .content .cta a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.lede { font-size: 1.2rem; color: var(--muted); }
.kicker { margin: 0 0 4px; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--brand); }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.meta time { white-space: nowrap; }

/* Blog ---------------------------------------------------------------------- */
.blog-section + .blog-section { margin-top: 48px; }
.wide .lede { max-width: var(--measure); }
.topics { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 540px) { .topics, .new-articles .cards { grid-template-columns: repeat(2, 1fr); } }
/* Topic tiles: solid colour blocks with a tilted snapshot, unlike the white article cards */
.topic {
  --tilt: -2deg;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; padding: 16px 16px 18px;
  background: var(--topic); color: #fff; border-radius: 22px;
  box-shadow: 0 6px 0 var(--topic-shade);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.topic:nth-child(even) { --tilt: 2deg; }
/* Playful dots and a big soft circle in the corner */
.topic::before {
  content: ""; position: absolute; z-index: -1; right: -60px; bottom: -70px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.12);
}
.topic::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.16) 2px, transparent 2.5px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 45%); mask-image: linear-gradient(200deg, #000 0%, transparent 45%);
}
.topic:hover { transform: translateY(-4px) rotate(calc(var(--tilt) / -2)); box-shadow: 0 10px 0 var(--topic-shade); }
.topic-1 { --topic: #d94a2e; --topic-shade: #a8361f; }
.topic-2 { --topic: #1f6fd1; --topic-shade: #174f96; }
.topic-3 { --topic: #7a2275; --topic-shade: #4b1248; }
.topic-4 { --topic: #1f7f52; --topic-shade: #155a3a; }
.topic-media {
  aspect-ratio: 21 / 9; overflow: hidden; background: rgba(255, 255, 255, 0.2);
  border: 5px solid #fff; border-radius: 14px; transform: rotate(var(--tilt));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22); transition: transform 0.2s ease;
}
.topic:hover .topic-media { transform: rotate(0deg) scale(1.02); }
.topic-media picture { display: block; width: 100%; height: 100%; }
.topic-media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.topic-body { padding: 18px 4px 0; display: flex; flex-direction: column; flex: 1; }
.topic h3 { font-size: 1.45rem; margin: 0 0 6px; color: #fff; }
.topic h3 a { color: inherit; text-decoration: none; }
.topic h3 a::after { content: ""; position: absolute; inset: 0; } /* whole tile is the link */
.topic h3 a:focus-visible { outline: none; }
.topic:focus-within { outline: 3px solid var(--yellow); outline-offset: 3px; }
.topic p { margin: 0 0 16px; color: rgba(255, 255, 255, 0.92); font-size: 0.97rem; }
.topic .topic-count {
  align-self: flex-start; margin-top: auto;
  padding: 4px 14px; border-radius: 999px; background: #fff; color: var(--topic-shade);
  font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
}
.topic .topic-count::after { content: " →"; }
.topic:hover .topic-count { background: var(--yellow); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .topic, .topic-media { transition: none; }
  .topic:hover { transform: none; }
  .topic:hover .topic-media { transform: rotate(var(--tilt)); }
}
.article .content h3 + p > em:only-child { color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tag {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 10px; border-radius: 999px; background: #e7f0fc; color: var(--blue-dark); text-decoration: none;
}
a.tag:hover { background: var(--blue); color: #fff; }
.back { max-width: var(--measure); margin: 40px auto 0; font-weight: 700; }
.back:first-child { margin-top: 0; margin-bottom: 24px; }

/* Listing pages use the full width */
.wide .page-header, .wide .content { max-width: none; }

/* Cards ------------------------------------------------------------------- */
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card {
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); display: flex; flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(29, 42, 68, 0.1); }
/* Every card image is cropped to the same 16:10 frame. The image plugin wraps
   the <img> in a <picture>, which must fill the frame too or height: 100% fails. */
.card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.card-media picture { display: block; width: 100%; height: 100%; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.card-placeholder { display: block; height: 100%;
  background: repeating-linear-gradient(45deg, #e7f0fc 0 18px, #fff4d6 18px 36px); }
.card-body { padding: 16px 18px 20px; }
.card h3 { font-size: 1.25rem; margin: 8px 0 6px; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--blue); }
.card p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.card-body > p:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.card .meta { font-size: 0.85rem; }

/* Home ---------------------------------------------------------------------- */
.home .latest { margin-top: 56px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.section-head h2 { margin: 0; font-size: 1.9rem; }
.section-head a { font-weight: 700; }

/* Footer -------------------------------------------------------------------- */
.site-footer { margin-top: auto; background: var(--brand); color: #fff; padding-block: 20px 48px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 48px; }
.footer-logo { display: block; width: 150px; height: auto; }
.site-footer address {
  display: flex; flex-direction: column; margin-top: 24px;
  font-style: normal; font-size: 1.2rem; line-height: 1.3;
}
.site-footer address a { color: #fff; text-decoration: none; }
.site-footer address a:hover { text-decoration: underline; }
.socials { margin-left: auto; margin-top: 24px; display: flex; align-items: center; gap: 20px; }
.social { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; font-size: 32px; line-height: 0; }
.social:hover { color: var(--yellow); }