/* Cozy playful / Autumn: a variant of cozy-playful, after instalanding.ai's grain-motion-system-page
   (MIT). Warm paper, grainy autumn gradients, brown-tinted shadows and one amber accent. The
   artwork (placeholders, the hero panel, the stickers) is a radial gradient from light honey
   through amber to deep brown under a film of fine grain. Space Grotesk for headlines, Inter for
   reading, JetBrains Mono for values. Buttons are 100px pills that square off to 12px on hover
   and shrink a little when pressed. Keeps cozy-playful's structure, torn bands and stickers; loads
   after cozy-playful.css and overrides it. Suits bakeries, cafes, farm shops, craft studios. */

:root[data-variant="cozy-playful-autumn"] {
  --bg: #f5f3ef;
  --bg-soft: #eeece7;
  --bg-soft-2: #e6e3dc;
  --surface: #fdfcf9;
  --ink: #0d0d1a;
  --ink-2: #3a3a46;
  --muted: #5d5a54;
  --line: #dedad2;
  --amber: #a96a1e;                  /* fills, glows and marks */
  --accent: #85530f;                 /* the amber darkened to read as text: 5.4:1 on the recessed bands */
  --amber-soft: color-mix(in srgb, var(--amber) 14%, var(--surface));
  --amber-mid: color-mix(in srgb, var(--amber) 35%, var(--surface));
  --amber-glow: color-mix(in srgb, var(--amber) 40%, transparent);
  --primary: #8f5a14;                /* a button fill the cream label holds on: 5.6:1 */
  --primary-ink: #fdfcf9;
  --primary-edge: #5b3512;
  --glass: rgb(253 252 249 / 0.88);
  --glass-border: var(--line);
  --brown: 90 55 20;                 /* the shadows' tint, as rgb channels */

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: -0.035em;
  --display-leading: 1;

  --shadow: 0 1px 2px rgb(var(--brown) / 0.07), 0 12px 28px -10px rgb(var(--brown) / 0.14);
  --card-border: 1px solid var(--line);
  --reveal-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --reveal-scale: 0.97;

  --tint: var(--brown);
  --sticker-1: #6a3f15; --sticker-1-ink: #fdfcf9;   /* 9:1 */
  --sticker-2: var(--honey); --sticker-2-ink: var(--ink);
  --sticker-3: #e8b35f; --sticker-3-ink: var(--ink);
  --sticker-4: #fdfcf9; --sticker-4-ink: var(--ink);
  --note-1: var(--honey); --note-2: #ecd2a2; --note-3: #f4e3c4; --note-4: var(--surface);

  --night: #2b1b0d;                  /* the dark bands: deep brown */
  --slab-bg: var(--night);
  --slab-ink: #fdfcf9;
  --footer-bg: var(--night);
  --footer-ink: #fdfcf9;

  /* the grain: fine noise in brown, laid over every gradient */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .12 0 0 0 0 .04 0 0 1.3 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --honey: #f6dca6;
  --amber-hi: #c9852c;
  --brown-deep: #6a3f15;

  --ph-1: var(--grain), radial-gradient(110% 100% at 28% 28%, var(--honey), var(--amber-hi) 52%, var(--brown-deep));
  --ph-2: var(--grain), radial-gradient(110% 100% at 72% 26%, #f9e6bd, #d39a47 52%, #7a4a1b);
  --ph-3: var(--grain), radial-gradient(110% 100% at 38% 72%, #f3d79c, var(--amber-hi) 55%, #5b3512);
  --ph-4: var(--grain), radial-gradient(110% 100% at 64% 34%, #f6e3b9, #c58a3c 50%, #6a3f15);
  --ph-5: var(--grain), radial-gradient(110% 100% at 22% 62%, #fbe9c4, #dba352 54%, #7d4c1c);
  --ph-6: var(--grain), radial-gradient(110% 100% at 60% 64%, #f6d9a0, #b9772a 52%, #53310f);

  & body {
    background:
      radial-gradient(50% 40% at 85% 0%, var(--amber-glow), transparent 70%),
      radial-gradient(40% 40% at 0% 30%, rgb(var(--brown) / 0.08), transparent 70%),
      var(--bg);
  }
  & h1, & h2 { font-variation-settings: normal; }
  & ::selection { background: var(--amber-mid); color: var(--ink); }

  /* ---------- pills that square off ---------- */
  & .btn { height: 52px; border-radius: 100px; font-weight: 600; letter-spacing: -0.005em; }
  & .btn-sm { height: 40px; padding: 0 16px; }
  & .btn:hover { border-radius: 12px; }
  & .btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 16px -6px rgb(var(--brown) / 0.5); }
  & .btn-primary:hover { background: #6f430c; transform: none; box-shadow: 0 10px 22px -8px rgb(var(--brown) / 0.55); }
  & .btn-primary:active { transform: none; box-shadow: 0 2px 6px -2px rgb(var(--brown) / 0.5); }
  & .btn-ghost, & .btn-sm.btn-ghost { background: var(--surface); border: 1.5px solid var(--ink); box-shadow: 0 2px 6px -3px rgb(var(--brown) / 0.3); }
  & .btn-ghost:hover { background: var(--bg-soft); transform: none; box-shadow: 0 8px 16px -8px rgb(var(--brown) / 0.35); }
  & .btn-ghost:active { transform: none; box-shadow: none; }
  & .plan:not(.featured) .btn-ghost { background: transparent; border-color: var(--slab-ink); color: var(--slab-ink); box-shadow: none; }
  & .plan:not(.featured) .btn-ghost:hover { background: rgb(253 252 249 / 0.12); }
  & .plan:not(.featured) .btn-primary, & .footer .btn-primary { background: var(--honey); color: var(--ink); }
  & .footer .btn-primary:hover, & .plan:not(.featured) .btn-primary:hover { background: #fdfcf9; }
  & .pill { background: var(--amber-soft); border-color: var(--amber-mid); color: var(--ink); }

  & .eyebrow { color: var(--accent); }
  & .pricing-slab .eyebrow { color: var(--honey); }
  & .card { border-radius: var(--radius-lg); }

  /* ---------- nav ---------- */
  & .nav { background: rgb(245 243 239 / 0.9); border-bottom: 1px solid var(--line); }
  & .brand-mark { background: var(--primary); color: var(--primary-ink); box-shadow: 0 3px 8px -2px rgb(var(--brown) / 0.5); }
  & .nav-menu summary { border: 1px solid var(--ink); }
  & .callbar { background: rgb(245 243 239 / 0.95); border-top: 1px solid var(--line); }

  /* ---------- hero: the panel is an autumn gradient under grain ---------- */
  & .cp-dot { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); }
  & .cp-checks li::before { background: var(--ink); color: var(--honey); }
  & .cp-window {
    border: 1px solid rgb(var(--brown) / 0.3);
    box-shadow: 0 2px 4px rgb(var(--brown) / 0.1), 0 28px 50px -22px rgb(var(--brown) / 0.5);
    background: radial-gradient(110% 100% at 62% 40%, var(--honey), var(--amber-hi) 55%, var(--brown-deep));
  }
  & .cp-window::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--grain);
  }
  & #cp-sky stop:nth-child(1) { stop-color: #f7e2b6; }
  & #cp-sky stop:nth-child(2) { stop-color: #f0c47a; }
  & #cp-sky stop:nth-child(3) { stop-color: #d79338; }
  & #cp-sun stop:nth-child(1) { stop-color: #fff3d6; }
  & #cp-sun stop:nth-child(2) { stop-color: #f2bd62; }
  & #cp-sun stop:nth-child(3) { stop-color: #c9852c; }
  & #cp-bloom stop { stop-color: #fff1cf; }
  & #cp-band stop:nth-child(1) { stop-color: #5b3512; }
  & #cp-band stop:nth-child(2) { stop-color: #a96a1e; }
  & .cp-hill.h1 { fill: #c8924a; stroke: rgb(253 252 249 / 0.5); }
  & .cp-hill.h2 { fill: #8a5522; stroke: rgb(253 252 249 / 0.4); }
  & .cp-hill.h3 { filter: drop-shadow(0 -4px 8px rgb(201 133 44 / 0.5)); stroke: rgb(253 252 249 / 0.35); }
  & .cp-clouds { fill: #fdf6e6; }
  & .cp-mug { filter: drop-shadow(0 0 22px rgb(201 133 44 / 0.55)); }
  & #cp-mugbody stop:nth-child(1) { stop-color: #f6dca6; }
  & #cp-mugbody stop:nth-child(2) { stop-color: #c9852c; }
  & #cp-spectrum stop:nth-child(1) { stop-color: #5b3512; }
  & #cp-spectrum stop:nth-child(2) { stop-color: #a96a1e; }
  & #cp-spectrum stop:nth-child(3) { stop-color: #e8b35f; }
  & #cp-spectrum stop:nth-child(4) { stop-color: #fdfcf9; }
  & .cp-mug > ellipse:nth-of-type(1) { fill: #3a2210; }
  & .cp-mug > ellipse:nth-of-type(2) { stroke: #e8b35f; }
  & .cp-mug > path:nth-of-type(1) { stroke: #a96a1e; }

  & .cp-sticker {
    border: 1.5px solid rgb(var(--brown) / 0.35);
    box-shadow: 0 2px 4px rgb(var(--brown) / 0.12), 0 14px 24px -10px rgb(var(--brown) / 0.5);
  }
  & .cp-sticker.k1 { background: var(--grain), radial-gradient(circle at 35% 30%, #f9e6bd, #e8b35f 60%, #c9852c); }
  & .cp-sticker.k2 { background: var(--grain), radial-gradient(circle at 35% 30%, #fdfcf9, #f3e2bd 60%, #e2bd7e); }
  & .cp-sticker.k3 { background: var(--grain), radial-gradient(circle at 35% 30%, #f3dcae, #d9a050 60%, #b97a2c); }

  /* ---------- sections ---------- */
  & .highlights {
    background: var(--grain), linear-gradient(90deg, #6d3d10, #8f5a14);
    border: 0;
  }
  /* stickers and notes get the grain over their fills */
  & .stickers li, & .notes li { background-image: var(--grain); }
  & .stickers li { border-color: var(--surface); }
  & .board { box-shadow: 0 8px 0 var(--amber-mid); }
  & .board .row[data-on] { background: var(--amber-soft); }
  & .board .row:hover .row-name { text-decoration-color: var(--amber); }
  & .notes li::before { background: radial-gradient(circle at 35% 30%, #e8b35f, #8f5a14 60%, #4a2a0c); }
  & .marquee-track { font-weight: 700; }
  & .marquee-track li::after { color: var(--honey); }

  & .group-title { border-top: 1px solid var(--line); }
  & .service-foot, & .stat { border-top: 1px solid var(--line); }
  & .stat dd { font-weight: 700; }
  & .stars { color: var(--amber); }

  & .about-media, & .gallery-item, & .map {
    border: 1px solid var(--line);
    box-shadow: 0 2px 4px rgb(var(--brown) / 0.07), 0 20px 36px -18px rgb(var(--brown) / 0.35);
  }
  & .gallery-item:nth-child(3n + 2), & .gallery-item:nth-child(3n) { rotate: none; }
  & .ph-label { border: 1px solid rgb(var(--brown) / 0.4); background: var(--surface); }

  & .plan { border: 1px solid rgb(253 252 249 / 0.16); }
  & .plan.featured { outline: 3px solid var(--amber); outline-offset: 4px; }
  & .plan-features li::before { color: var(--honey); }
  & .plan.featured .plan-features li::before { color: var(--accent); }
  & .plan-flag { background: var(--amber-soft); }

  & .faq-item, & .faq-item:first-child { border-width: 1px; }
  & .faq-item summary::after { background: var(--amber-soft); color: var(--ink); box-shadow: none; border: 1px solid var(--amber-mid); }
  & .chips .pill { border-width: 1px; }

  & .visit-card, & .form { border-width: 1px; }
  & .field input, & .field textarea { background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--ink) 40%, var(--surface)); }
  & .hours th, & .hours td { border-bottom-color: var(--line); }

  & .footer-card {
    background:
      var(--grain),
      radial-gradient(60% 90% at 12% 0%, rgb(201 133 44 / 0.4), transparent 70%),
      radial-gradient(50% 80% at 100% 100%, rgb(169 106 30 / 0.3), transparent 70%),
      var(--footer-bg);
  }
  & .footer-title { color: var(--honey); opacity: 1; }
  & .wordmark { background: linear-gradient(90deg, #f6dca6, #e8b35f 35%, #c9852c 65%, #a96a1e); -webkit-background-clip: text; background-clip: text; }

  /* ---------- borrowed faq "columns", and the pricing tickets ---------- */
  /* faq "columns": a column rule of amber dots between the columns, the question in the display
     face with an amber mark, the answer in full ink */
  & .faq-paper dt { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
  & .faq-paper dt::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--amber); vertical-align: 1px; }
  & .faq-paper dd { font-size: 17px; color: var(--ink); }
  @media (min-width: 700px) {
    & .faq-paper { column-rule: 2px dotted var(--amber-mid); }
  }

  /* pricing "tickets": paper stubs in honey, sand and cream under grain; the featured one has the dark
     brown stub with honey figures, a pill and a taller body */
  & .tickets { gap: 26px; }
  & .ticket { filter: drop-shadow(0 0 1px rgb(var(--brown) / 0.55)) drop-shadow(0 12px 14px rgb(var(--brown) / 0.2)); }
  & .ticket-main { background: var(--grain), var(--note-2); }
  & .ticket-2 .ticket-main { background: var(--grain), var(--note-3); }
  & .ticket-3 .ticket-main { background: var(--grain), var(--honey); }
  & .ticket.featured .ticket-main { background: var(--grain), var(--honey); }
  & .ticket-stub { background: var(--surface); }
  & .ticket { --perf: var(--brown-deep); }
  & .ticket-amount { font-weight: 700; }
  & .ticket-includes li::before { color: var(--brown-deep); }
  & .ticket .btn-ghost { background: var(--surface); }
  & .ticket.featured .ticket-stub { background: var(--grain), var(--night); color: var(--honey); --perf: var(--honey); }
  & .ticket.featured .ticket-period { color: #fdfcf9; opacity: 1; }
  & .ticket-flag { background: var(--night); border-color: var(--night); color: var(--honey); }
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) .ticket { transition: translate 0.2s ease; }
    &:not([data-motion="none"]) .ticket:hover { translate: 0 -4px; }
  }

  /* ---------- motion: the corners ease only when motion is allowed ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .btn { transition: border-radius 0.25s ease, scale 0.15s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease; }
      & .btn:active { transform: none; scale: 0.96; }
    }
  }
}