/* Scenic / Dusk: a variant of scenic, after instalanding.ai's maasai-inspired-event-landing-page
   (visual language only). Warm dusk: a sand ground, Instrument Serif for headlines and big
   numbers, Jost for everything else, a deep red, and geometric bead-like chevron rules above the
   section heads. The pricing slab and the footer are deep red bands with a faint chevron check
   and sand text. The hero keeps scenic's layered landscape, painted in dusk orange, brick and
   brown. Abstract geometry only. Light set only. Loads after scenic.css and overrides it.
   Suits tour operators, event venues, wineries, retreats. */

:root[data-variant="scenic-dusk"] {
  --reveal-y: 20px; --nav-lift: 0 10px 30px -18px rgb(60 25 10 / 0.4);
  --bg: #ead5b8;
  --bg-soft: #e2cba9;
  --surface: #f2e3cd;
  --ink: #1c0b06;
  --ink-2: #5e3d2c;            /* the brief's ink-soft */
  --muted: #5e3d2c;
  --line: rgb(28 11 6 / 0.18);
  --line-2: rgb(28 11 6 / 0.38);
  --accent: #9d1f19;           /* the red darkened to read as text on the tinted bands: 5.1:1 */
  --red: #b3261e;              /* the band: fills only, text on it is --red-ink */
  --red-ink: #f8e9d4;
  --red-soft: #f3cdb8;
  --primary: #b3261e;
  --primary-ink: #f8e9d4;
  --glass: rgb(242 227 205 / 0.93);
  --glass-border: rgb(28 11 6 / 0.38);
  --sun: #e19a57;
  --peach: #efbd85;
  --rose: #cf7f3c;
  --plum: #7d1f19;
  --navy: #3a130c;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Jost", system-ui, sans-serif;
  --font-mono: "Jost", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.01em;
  --display-leading: 1.02;

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 2px;
  --shadow: 0 1px 2px rgb(60 25 10 / 0.06), 0 14px 34px -14px rgb(100 40 20 / 0.28);
  --card-border: 1px solid var(--line);

  --slab-bg: var(--red);
  --slab-ink: var(--red-ink);
  --footer-bg: var(--red);
  --footer-ink: var(--red-ink);

  /* the chevron: a zigzag tile used twice, as a mask coloured by a token (the rule) and as a
     faint check on the red bands (the texture) */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M0 10.5 7 3l7 7.5L21 3l7 7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --chev-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 10 14 2l14 8 14-8 14 8M0 24l14-8 14 8 14-8 14 8' fill='none' stroke='%23f8e9d4' stroke-opacity='.09' stroke-width='2'/%3E%3C/svg%3E");
  --chev-rule: var(--accent);

  /* placeholders: little dusk landscapes in sand, orange, brick and brown */
  --ph-1: radial-gradient(circle at 70% 38%, #f8e9d4 0 7%, transparent 8%), radial-gradient(120% 50% at 30% 100%, #b3261e 0 60%, transparent 61%), radial-gradient(120% 45% at 90% 100%, #5a1a10 0 60%, transparent 61%), linear-gradient(180deg, #efbd85, #e19a57 55%, #cf7f3c);
  --ph-2: radial-gradient(110% 50% at 20% 100%, #7d1f19 0 60%, transparent 61%), radial-gradient(110% 40% at 85% 100%, #2c0f08 0 60%, transparent 61%), linear-gradient(180deg, #cf7f3c, #e19a57 60%, #efbd85);
  --ph-3: radial-gradient(circle at 30% 45%, #f8e9d4 0 6%, transparent 7%), radial-gradient(130% 45% at 60% 100%, #a13a22 0 60%, transparent 61%), radial-gradient(100% 35% at 10% 100%, #6e2a1c 0 60%, transparent 61%), linear-gradient(180deg, #f2d3a2, #e19a57 60%, #cf7f3c);
  --ph-4: radial-gradient(120% 55% at 50% 100%, #3a130c 0 60%, transparent 61%), radial-gradient(120% 40% at 0% 100%, #7d1f19 0 60%, transparent 61%), linear-gradient(180deg, #b3261e, #cf7f3c 60%, #efbd85);
  --ph-5: radial-gradient(circle at 78% 30%, #fbf1e0 0 5%, transparent 6%), radial-gradient(130% 50% at 40% 100%, #c14a2a 0 60%, transparent 61%), radial-gradient(110% 35% at 100% 100%, #7d1f19 0 60%, transparent 61%), linear-gradient(180deg, #e8b172, #efbd85 65%, #f2d3a2);
  --ph-6: radial-gradient(120% 50% at 70% 100%, #6e2a1c 0 60%, transparent 61%), radial-gradient(100% 40% at 0% 100%, #a13a22 0 60%, transparent 61%), linear-gradient(180deg, #efbd85, #e8a463 50%, #d58a45);

  & body { font-size: 17px; line-height: 1.65; }
  & ::selection { background: var(--red); color: var(--red-ink); }
  & h1 { font-size: clamp(44px, 6.2vw, 88px); }
  & h2 { font-size: clamp(38px, 4.8vw, 66px); line-height: 1; }
  & h3 { font-size: 28px; }
  & .lead { font-size: clamp(17px, 1.5vw, 20px); }

  /* labels, nav and buttons are Jost caps */
  & .eyebrow, & .btn, & .nav-links a, & .footer-title, & .stat dt, & .index, & .hours caption, & .field label, & .pill {
    font-family: var(--font-body); text-transform: uppercase;
  }
  & .eyebrow { font-weight: 500; font-size: 12px; letter-spacing: 0.16em; color: var(--accent); }
  & .eyebrow::before { background: var(--red); box-shadow: 0 0 0 3px rgb(207 127 60 / 0.35); border-radius: 0; rotate: 45deg; }
  & .nav-links a { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; }
  & .pill { font-weight: 500; font-size: 11px; letter-spacing: 0.1em; background: var(--surface); border-color: var(--line-2); color: var(--ink); }
  & .index { font-weight: 500; letter-spacing: 0.14em; color: var(--accent); }
  & .stat dt, & .hours caption, & .field label { font-weight: 500; letter-spacing: 0.1em; font-size: 12px; }

  & .btn { font-weight: 500; font-size: 13px; letter-spacing: 0.14em; }
  & .btn-primary { background: var(--red); color: var(--red-ink); box-shadow: 0 8px 18px -8px rgb(125 31 25 / 0.7); }
  & .btn-primary:hover { background: #8f1c16; }
  & .btn-ghost { background: rgb(242 227 205 / 0.7); border-color: var(--ink); color: var(--ink); }
  & .btn-ghost:hover { background: var(--surface); }
  & .callbar { background: rgb(234 213 184 / 0.95); }

  & .nav { background: rgb(234 213 184 / 0.9); border-bottom-color: var(--line-2); }
  & .brand-mark { background: var(--red); color: var(--red-ink); text-shadow: none; border-radius: 4px; font-family: var(--font-display); font-weight: 400; font-size: 20px; }
  & .brand-name { font: 400 24px/1 var(--font-display); letter-spacing: 0; }
  & .nav-links a:hover, & .nav-phone:hover { color: var(--accent); }
  & .nav-phone { font-family: var(--font-body); font-weight: 500; }
  & .nav-menu summary { border-radius: 4px; border-color: var(--line-2); }

  /* ---------- the rule above section heads: a chevron row ---------- */
  & .section-head::before {
    content: ""; display: block; width: min(100%, 280px); height: 12px; margin-bottom: 22px;
    background: var(--chev-rule);
    -webkit-mask: var(--chev) repeat-x 0 0 / 28px 12px; mask: var(--chev) repeat-x 0 0 / 28px 12px;
  }
  & .pricing-slab { --chev-rule: var(--red-ink); }
  & .group-title::after {
    width: 84px; height: 12px; border-radius: 0; margin-top: 12px; background: var(--chev-rule);
    -webkit-mask: var(--chev) repeat-x 0 0 / 28px 12px; mask: var(--chev) repeat-x 0 0 / 28px 12px;
  }

  /* ---------- hero: the landscape in dusk colours ---------- */
  & .sn-hero { background: var(--navy); }
  & #sn-sky stop:nth-child(1) { stop-color: #8e2a1a; }
  & #sn-sky stop:nth-child(2) { stop-color: #cf7f3c; }
  & #sn-sky stop:nth-child(3) { stop-color: #e19a57; }
  & #sn-sky stop:nth-child(4) { stop-color: #efbd85; }
  & #sn-sun stop:nth-child(1) { stop-color: #fbf1e0; }
  & #sn-sun stop:nth-child(2) { stop-color: #f2d3a2; }
  & #sn-sun stop:nth-child(3) { stop-color: #e19a57; }
  & #sn-h1 stop:nth-child(1) { stop-color: #d9a46a; }
  & #sn-h1 stop:nth-child(2) { stop-color: #c0824a; }
  & #sn-h2 stop:nth-child(1) { stop-color: #b0482a; }
  & #sn-h2 stop:nth-child(2) { stop-color: #8a2e20; }
  & #sn-h3 stop:nth-child(1) { stop-color: #6e2a1c; }
  & #sn-h3 stop:nth-child(2) { stop-color: #4a1a10; }
  & #sn-h4 stop:nth-child(1) { stop-color: #33120b; }
  & #sn-h4 stop:nth-child(2) { stop-color: #1c0b06; }
  & .sn-clouds-a { fill: #fbf1e0; }
  & .sn-clouds-b { fill: #f2c9a0; }
  & .sn-scene > path[fill="#3a2f6e"] { fill: #6e2a1c; }
  & .sn-scene > path[fill="#1d1f52"] { fill: #2c0f08; }
  & .sn-panel { box-shadow: 0 30px 60px -28px rgb(40 12 6 / 0.6); border-radius: 8px; }
  & .sn-panel h1 { font-size: clamp(40px, 5.6vw, 78px); }

  /* ---------- sections ---------- */
  & .highlights { background: var(--bg-soft); border-block: 1px solid var(--line-2); }
  & .marquee-track { color: var(--ink-2); font-family: var(--font-body); font-weight: 500; letter-spacing: 0.14em; }
  & .marquee-track li::after { color: var(--red); content: "\25C6"; font-size: 0.7em; }
  & main > .section:nth-of-type(even) { background: var(--bg-soft); }
  & .service-name, & .plan-name { font-weight: 400; }
  & .service-name { font-size: 28px; }
  & .price { font-family: var(--font-display); font-weight: 400; font-size: 28px; }
  & .stat dd { font: 400 40px/1.05 var(--font-display); color: var(--accent); }
  & .stat { border-radius: var(--radius); }
  & .stars { color: var(--accent); }
  & .ph-label { background: rgb(242 227 205 / 0.92); font-family: var(--font-body); font-weight: 500; letter-spacing: 0.06em; }

  & main > .section .reviews-grid > li.card:nth-child(3n + 2) {
    background: var(--chev-tex), var(--red); color: var(--red-ink); border-color: transparent;
  }
  & main > .section .reviews-grid > li.card:nth-child(3n + 2) .stars { color: var(--red-ink); }
  & main > .section .reviews-grid > li.card:nth-child(3n + 2) .review-source { color: var(--red-ink); }

  /* highlights "beads": sand tokens on a red string, each with a small red diamond */
  & .highlights-beads { background: var(--bg-soft); border-block: 1px solid var(--line-2); }
  & .beads { gap: 24px 16px; }
  & .bead::before { border-top: 2px dotted var(--red); }
  & .bead > span {
    display: flex; align-items: center; gap: 12px; padding: 10px 24px 10px 18px;
    background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 6px 14px -10px rgb(100 40 20 / 0.5);
    font: 400 22px/1.15 var(--font-display); letter-spacing: 0; text-align: left;
  }
  & .bead > span::before { content: ""; flex: none; width: 9px; height: 9px; rotate: 45deg; background: var(--red); box-shadow: 0 0 0 3px rgb(207 127 60 / 0.35); }

  /* about "letter" and reviews "pullquote": the story in serif, the opening review huge in italic with a red mark */
  & .about-letter .about-copy p { font-size: 19px; }
  & .about-letter .stat dd { color: var(--accent); }
  & .pull blockquote p { font-style: italic; letter-spacing: -0.015em; line-height: 1.08; }
  & .pull blockquote p::before { content: "\201C"; display: block; height: 0.45em; margin-bottom: 0.25em; font-size: 1.6em; line-height: 1; font-style: normal; color: var(--red); }
  & .pull mark { background: linear-gradient(180deg, transparent 58%, rgb(207 127 60 / 0.5) 58%); }
  & .pull .review-author { font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; }
  & .footnotes { border-top: 1px solid var(--line-2); }
  & .footnotes > li::before { content: counter(fn, upper-roman); font: 400 24px/1 var(--font-display); color: var(--red); }
  & .footnotes blockquote p { font-size: 18px; }

  /* the layouts: a red trail and a sand-to-orange sky over brick and brown hills, running into the red footer */
  & main > .section.contact-horizon { background: linear-gradient(180deg, var(--bg) 8%, #f1d3a8 58%, #eba96a); }
  & .contact-horizon { --hill-1: #cf7f3c; --hill-2: #a13a22; --hill-3: var(--red); --sun-core: #f8e9d4; }
  & .stop-dot { background: radial-gradient(circle, #f8e9d4 0 25%, var(--red) 75%); box-shadow: 0 0 0 4px rgb(179 38 30 / 0.22); }
  & .stop-price { color: var(--accent); font-weight: 400; font-size: 30px; }
  & .stop-name { font-weight: 400; font-size: clamp(28px, 3vw, 38px); }

  /* the pricing slab and the footer: deep red bands with a chevron check */
  & .pricing-slab {
    border-radius: var(--radius-lg);
    background: var(--chev-tex), var(--red);
  }
  & .pricing-slab .lead, & .pricing-slab .eyebrow { opacity: 1; color: var(--red-ink); }
  & .pricing-slab .eyebrow::before { background: var(--red-ink); }
  & .plan { background: rgb(248 233 212 / 0.1); border-color: rgb(248 233 212 / 0.4); border-radius: var(--radius); }
  & .plan.featured { background: var(--surface); color: var(--ink); }
  & .plan:not(.featured) .btn-primary { background: var(--red-ink); color: var(--ink); box-shadow: none; }
  & .plan:not(.featured) .btn-primary:hover { background: #ffffff; }
  & .plan:not(.featured) .btn-ghost { background: transparent; border-color: var(--red-ink); color: var(--red-ink); }
  & .plan:not(.featured) .btn-ghost:hover { background: rgb(248 233 212 / 0.14); }
  & .plan:not(.featured) .plan-flag { background: var(--red-ink); color: var(--ink); }
  & .plan-flag { border-color: transparent; }
  & .plan-price .mono { font: 400 52px/1 var(--font-display); }
  & .plan-features li::before { color: var(--red-soft); }
  & .plan.featured .plan-features li::before { color: var(--accent); }

  & .faq-item summary { font: 400 23px/1.2 var(--font-display); }
  & .faq-item summary::after { color: var(--accent); }
  & .faq-item, & .faq-item:first-child { border-radius: var(--radius); border: 1px solid var(--line); }
  & .hours td { font-family: var(--font-body); }
  & .field input, & .field textarea { background: var(--surface); border-color: var(--line-2); }
  & .field input:focus, & .field textarea:focus { border-color: var(--accent); }

  & .footer-card {
    border-radius: var(--radius-lg);
    background: var(--chev-tex), var(--red);
  }
  & .footer-card::before {
    background: radial-gradient(60% 100% at 30% 0%, rgb(248 233 212 / 0.16), transparent 70%), radial-gradient(50% 90% at 78% 0%, rgb(239 189 133 / 0.18), transparent 70%);
  }
  & .footer-name { font: 400 34px/1.05 var(--font-display); }
  & .footer-title { opacity: 1; color: var(--red-ink); font-weight: 500; letter-spacing: 0.16em; }
  & .footer a:hover { color: var(--red-ink); text-decoration: underline; }
  & .footer .btn-primary { background: var(--red-ink); color: var(--ink); box-shadow: none; }
  & .footer .btn-primary:hover { background: #ffffff; }
  & .footer .btn-ghost { background: transparent; border-color: var(--red-ink); color: var(--red-ink); }
  & .footer-base { color: var(--red-ink); border-top-color: rgb(248 233 212 / 0.4); }
  & .wordmark {
    font: 400 clamp(56px, 15vw, 200px)/0.85 var(--font-display); letter-spacing: -0.03em;
    background: linear-gradient(180deg, rgb(248 233 212 / 0.55), rgb(248 233 212 / 0));
    -webkit-background-clip: text; background-clip: text;
  }
  & .pricing-slab :focus-visible, & .footer :focus-visible { outline-color: var(--red-ink); }
}