/* Elf Did It — door & lavender design system (design pass 2026-11-07).
   Approved design: door-slit logo + light-lavender day theme, with a
   deep-purple night theme in the same hue family. Tokens sampled from
   the approved lavender design sheet; see
   ~/workspace/custom-skills/elf-site-layout/references/tokens.md.
   Day is the default (no data-theme attribute). Night applies under
   [data-theme="night"] on <html>; the visitor's choice is stored in
   localStorage ("elf-theme") and never follows the OS setting.
   Class names are semantic and unchanged from the skeleton. */
:root{
  /* Day — light lavender (default) */
  --color-bg:#F9F3FA;             /* palest lavender-white page base */
  --color-surface:#FDFBFF;        /* card face, a breath above the base */
  --color-text:#2E283C;           /* deep purple-charcoal ink */
  --color-muted:#6E6486;          /* muted violet-grey secondary text */
  --color-accent:#66598F;         /* mid lavender-violet: primary buttons */
  --color-accent-hover:#574B7D;
  --color-on-accent:#FFFFFF;
  --color-border:#E0D2EF;         /* fine lavender card edge */
  --color-tint:#F1EAF9;           /* lavender wash: notices, upload zone */
  --color-dash:#C4B2E3;           /* upload-zone dashed edge */
  --color-amber:#E8A24B;          /* door-light amber — the only warm colour */
  --color-amber-bright:#F5B95E;
  --color-dot:rgba(102,89,143,.10);   /* hero dot texture */
  --shadow-card:0 10px 30px rgba(46,40,60,.07);
  --shadow-lift:0 14px 34px rgba(102,89,143,.22);
  --font-display:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radius:20px;
  --radius-btn:12px;
  --radius-pill:999px;
  --radius-tile:14px;
  --max-width:1080px;
  --space-section:64px;
  --tap-min:44px;
  --tap-primary:52px;
}
[data-theme="night"]{
  /* Night — deep purple, same hue family, never pure black */
  --color-bg:#211A38;             /* deep violet night base */
  --color-surface:#2C2249;        /* raised deep-purple card face */
  --color-text:#F0EAFB;           /* lavender-white ink */
  --color-muted:#BDB1DE;
  --color-accent:#8D7ED6;         /* one step brighter for dark ground */
  --color-accent-hover:#9E90E2;
  --color-on-accent:#FFFFFF;
  --color-border:#4C3E78;         /* fine bright edge on dark cards */
  --color-tint:#2A2147;
  --color-dash:#6A5AA0;
  --color-dot:rgba(157,144,226,.12);
  --shadow-card:0 10px 30px rgba(8,4,20,.45);
  --shadow-lift:0 14px 34px rgba(141,126,214,.28);
}
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);line-height:1.6;transition:background-color .25s ease,color .25s ease}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;margin:0 0 14px}
h1{font-size:clamp(38px,6vw,58px);font-weight:800;letter-spacing:-.01em}
h2{font-size:30px;font-weight:700}
h3{font-weight:700}
a{color:var(--color-accent)}
::selection{background:var(--color-accent);color:var(--color-on-accent)}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* Header */
.site-header{border-bottom:1px solid var(--color-border);background:var(--color-bg)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.site-logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--color-text)}
.header-actions{display:flex;align-items:center;gap:6px}
.site-nav{display:flex;align-items:center;flex-wrap:wrap}
.site-nav a{margin-left:18px;color:var(--color-text);text-decoration:none;font-size:15px;font-weight:600;padding:8px 4px}
.site-nav a:hover{color:var(--color-accent)}

/* Door logo — one inline SVG, two states.
   Strokes ride on currentColor (ink by day, lavender-white by night);
   the light wedge is the amber variable in both, glowing at night. */
.logo-lockup{display:inline-flex;align-items:center;gap:10px;color:var(--color-text)}
.logo-mark{height:46px;width:auto;display:block;flex:none}
.logo-mark .logo-light{fill:var(--color-amber)}
[data-theme="night"] .logo-mark .logo-light{fill:var(--color-amber-bright);filter:drop-shadow(0 0 3.5px rgba(245,169,61,.85))}
.logo-text{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.08;letter-spacing:.01em}
.logo-lockup--footer .logo-mark{height:40px}
.logo-lockup--footer .logo-text{font-size:17px}

/* Day / night toggle — small icon button, fixed at the header's top right */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:14px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;flex:none}
.theme-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}
.theme-toggle svg{width:19px;height:19px;display:block}
.theme-toggle .icon-sun{display:none}
[data-theme="night"] .theme-toggle .icon-sun{display:block}
[data-theme="night"] .theme-toggle .icon-moon{display:none}

/* Hero */
.hero{padding:56px 0 40px;text-align:center;background-image:radial-gradient(var(--color-dot) 1.5px,transparent 1.6px);background-size:26px 26px}
.hero-subtitle{font-size:clamp(17px,2.4vw,21px);max-width:720px;margin:0 auto 24px;color:var(--color-muted)}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);font-weight:700;margin-bottom:10px}
.eyebrow::before{content:"★ ";color:var(--color-amber)}

/* Split hero (home): copy left, photo right on desktop;
   headline → photo → button stacked on mobile (v10 restore) */
.hero--split{text-align:left}
.hero-split{display:grid;grid-template-columns:1fr 1.05fr;gap:36px;align-items:center}
.hero--split .hero-subtitle{margin-left:0;margin-right:0}
.hero-media{position:relative;margin:0}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:24px;border:1px solid var(--color-border);box-shadow:var(--shadow-card)}
.hero-img--wide{aspect-ratio:4/2.9}
.hero-media .hero-img--tall{aspect-ratio:3/3.1;display:none}
.hero-chip{position:absolute;left:14px;bottom:14px;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);box-shadow:var(--shadow-card);padding:6px 14px;border-radius:var(--radius-pill);font-size:13px;font-weight:600}

/* Sections & cards */
.section{padding:var(--space-section) 0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card)}
.card--highlighted{border:2px solid var(--color-accent);position:relative;box-shadow:var(--shadow-lift)}
.card-badge{position:absolute;top:-13px;right:14px;background:var(--color-amber);color:#2E283C;padding:3px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:700}
.price{font-size:34px;font-family:var(--font-display);font-weight:800;color:var(--color-accent);line-height:1.1}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-primary);background:var(--color-accent);color:var(--color-on-accent);padding:14px 30px;border-radius:var(--radius-btn);text-decoration:none;font-weight:700;border:1.5px solid var(--color-accent);cursor:pointer;font-size:17px;font-family:var(--font-display)}
.button:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}
.button--secondary{background:var(--color-surface);color:var(--color-accent)}
.button--secondary:hover{background:var(--color-tint);color:var(--color-accent-hover)}
.button:disabled{opacity:.6;cursor:wait}

/* FAQ */
.faq-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow-card)}
.faq-item summary{cursor:pointer;min-height:var(--tap-min);display:flex;align-items:center}

/* Dream Makers team note — plain on the page, amber rule, signed */
.team-note{max-width:720px;border-left:3px solid var(--color-amber);padding-left:20px}
.team-note p{margin:0 0 10px}
.team-note .signoff{font-family:var(--font-display);font-weight:700;color:var(--color-text)}

/* Footer */
.site-footer{border-top:1px solid var(--color-border);padding:28px 0;margin-top:24px;font-size:14px;color:var(--color-muted)}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:10px;color:var(--color-text)}

/* Forms */
.form-field{margin-bottom:16px}
.form-field label{display:block;font-weight:600;margin-bottom:6px}
input[type=email],select{width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-tile);background:var(--color-surface);font-size:16px;color:var(--color-text)}
input[type=email]:focus,select:focus{outline:2px solid var(--color-accent);outline-offset:1px;border-color:var(--color-accent)}
input[type=file]{width:100%;padding:18px;border:1.5px dashed var(--color-dash);border-radius:var(--radius-tile);background:var(--color-tint);font-size:15px;cursor:pointer;color:var(--color-text)}
.preview{width:100%;max-height:280px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--color-border);display:none;margin-top:10px}
.step-indicator{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.step-indicator span{padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--color-border);font-size:14px;background:var(--color-surface)}
.step-indicator span.is-active{background:var(--color-accent);color:var(--color-on-accent);border-color:var(--color-accent)}
.progress-placeholder{height:18px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-tint),var(--color-border),var(--color-tint));background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.notice{background:var(--color-tint);border:1px solid var(--color-border);padding:14px 16px;border-radius:var(--radius-tile)}

/* Watch page: door mark as video-corner watermark */
.watch-panel{position:relative}
.corner-watermark{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-card);pointer-events:none;display:flex;align-items:center;justify-content:center}
.corner-watermark .logo-mark{height:30px}

@media(max-width:860px){
  .hero-split{display:flex;flex-direction:column;align-items:stretch;gap:22px}
  .hero-media .hero-img--wide{display:none}
  .hero-media .hero-img--tall{display:block}
}
@media(max-width:640px){
  :root{--space-section:40px}
  .logo-mark{height:40px}
  .logo-text{font-size:17px}
  .site-nav a{margin-left:10px}
  .hero{padding-top:36px}
  .button{width:100%}
}

/* ===== v9 visual-first pass (2026-11-07): pictures lead, words follow.
   Every block is image-first; copy is cut to a headline, a label,
   a price. Same tokens, same two themes — photos serve both. ===== */

/* Full-width hero: one big photo, one line, one button (overlaid) */
.hero--full{padding:28px 0 8px;background:none;text-align:left}
.hero-media--full{aspect-ratio:16/8.6}
.hero-media--full img{border-radius:28px}
.hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:64px 30px 24px;border-radius:0 0 28px 28px;background:linear-gradient(transparent,rgba(24,15,42,.62));color:#fff}
.hero-overlay h1{color:#fff;margin:0 0 14px;text-shadow:0 2px 18px rgba(24,15,42,.45)}
.hero--full .hero-chip{top:14px;bottom:auto}

/* Template-page hero: big photo first, then headline + CTA */
.hero--page{padding:28px 0 4px;background:none;text-align:left}
.hero--page h1{margin:22px 0 14px}
.hero-media--page{aspect-ratio:16/8.2}
.hero-media--page img{border-radius:28px}

/* Cinema block — the demo "last night" film, second visual lead.
   Fallback state: a still with a play button (links to the template). */
.film-section{padding:88px 0 72px}
.film-block{position:relative;display:block;border-radius:28px;overflow:hidden;border:1px solid var(--color-border);box-shadow:var(--shadow-lift);aspect-ratio:16/9}
.film-block img{width:100%;height:100%;object-fit:cover;display:block}
.film-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-lift);display:flex;align-items:center;justify-content:center;color:var(--color-accent)}
.film-play svg{width:34px;height:34px;margin-left:5px}
.film-block:hover .film-play{background:var(--color-accent);color:var(--color-on-accent)}
.film-stamp{position:absolute;right:16px;bottom:16px;background:rgba(24,15,42,.72);color:#fff;padding:6px 14px;border-radius:var(--radius-pill);font-size:13.5px;font-weight:600;letter-spacing:.02em}
.film-stamp i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF5A4E;margin-right:7px;vertical-align:1px}
.film-caption{text-align:center;font-family:var(--font-display);font-weight:700;font-size:19px;margin:20px 0 0}

/* Steps & tips — picture cards with a one-line caption */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step-card{margin:0}
.step-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:var(--radius);border:1px solid var(--color-border);box-shadow:var(--shadow-card)}
.step-card figcaption{display:flex;align-items:center;gap:10px;margin-top:12px;font-family:var(--font-display);font-weight:700;font-size:17.5px}
.step-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--color-amber);color:#2E283C;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}

/* Image tiles — templates & mischief scenes */
.tile-grid{display:grid;gap:18px}
.tile-grid--3{grid-template-columns:repeat(3,1fr)}
.tile-grid--2{grid-template-columns:repeat(2,1fr)}
.tile{display:block;text-decoration:none;color:var(--color-text)}
.tile-media{position:relative;display:block}
.tile-media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:var(--radius);border:1px solid var(--color-border);box-shadow:var(--shadow-card)}
a.tile:hover .tile-media img{box-shadow:var(--shadow-lift)}
.tile-chip{position:absolute;top:12px;right:12px;background:var(--color-surface);color:var(--color-accent);border:1px solid var(--color-border);padding:4px 12px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:700}
.tile-name{display:block;margin-top:12px;font-family:var(--font-display);font-weight:700;font-size:18px}

/* Compact price strip (home) */
.price-strip .card{text-align:left}
.price-strip .card p{margin:2px 0 16px;color:var(--color-muted)}
.fine-line{color:var(--color-muted);margin-top:18px}
.fine-line--center{text-align:center}

/* Pricing page: payment marks + guarantee, one line each */
.pay-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 12px}
.pay-chip{border:1px solid var(--color-border);background:var(--color-surface);border-radius:10px;padding:7px 14px;font-size:13.5px;font-weight:700;color:var(--color-muted)}
.guarantee-line{display:flex;align-items:center;gap:10px;font-weight:600}
.guarantee-line .step-num{font-size:14px}

/* Create page: template picker as image tiles (radio-driven) */
.picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pick{cursor:pointer;display:block}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick-media{position:relative;display:block;border:2.5px solid transparent;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card)}
.pick-media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pick-check{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:var(--color-amber);color:#2E283C;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.7);transition:opacity .15s ease,transform .15s ease}
.pick-check svg{width:17px;height:17px}
.pick input:checked~.pick-media{border-color:var(--color-accent);box-shadow:var(--shadow-lift)}
.pick input:checked~.pick-media .pick-check{opacity:1;transform:scale(1)}
.pick input:focus-visible~.pick-media{outline:2px solid var(--color-accent);outline-offset:2px}
.pick-name{display:block;margin-top:10px;font-family:var(--font-display);font-weight:700;font-size:16.5px}
.pick-tag{display:block;color:var(--color-accent);font-size:13.5px;font-weight:700}

@media(max-width:860px){
  .hero-media--full{aspect-ratio:auto}
  .hero-media--full .hero-img--wide{display:none}
  .hero-media--full .hero-img--tall{display:block;aspect-ratio:3/3.6}
  .hero-media--page{aspect-ratio:4/3}
  .film-section{padding:56px 0 48px}
  .steps-grid{grid-template-columns:1fr}
  .tile-grid--3{grid-template-columns:1fr}
  .tile-grid--2{grid-template-columns:repeat(2,1fr)}
  .picker-grid{grid-template-columns:1fr}
  .pick-media img{aspect-ratio:16/9}
}
@media(max-width:640px){
  .hero-overlay{padding:48px 18px 18px}
  .film-play{width:68px;height:68px}
  .film-stamp{font-size:12px;right:10px;bottom:10px}
}

/* ===== v10 hero restore (2026-11-07): home hero back to the approved v7
   split — headline copy left, hanging-star photo right on desktop;
   headline → photo → button stacked on mobile. The big film block
   stays directly underneath, ahead of the step cards. ===== */
.hero-split{grid-template-areas:"copy media" "cta media";row-gap:0;align-content:center}
.hero-copy{grid-area:copy}
.hero-cta{grid-area:cta}
.hero--split .hero-media{grid-area:media}
.hero-fine{color:var(--color-muted);margin:14px 0 0;font-size:15px}

/* ===== v11 December Nights campaign (2026-11-07): the site exists for
   December, so the campaign is a full section, not a banner. A fixed
   deep-purple band in BOTH themes — by day it reads as a night-time
   preview dropped into the lavender page; by night the border and the
   amber door-light lift it off the base. Amber is the only warm accent.
   The countdown uses real dates (Dec 1 / Dec 31, visitor-local). ===== */

/* Slim campaign bar above the header (home) */
.campaign-bar{background:#241B40;color:#F0EAFB;font-size:14px}
.campaign-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.campaign-bar-text{font-weight:600;letter-spacing:.01em}
.campaign-bar-text::before{content:"★ ";color:var(--color-amber)}
.campaign-bar-link{color:var(--color-amber-bright);font-weight:700;text-decoration:none;white-space:nowrap}
.campaign-bar-link:hover{color:var(--color-amber);text-decoration:underline}
[data-theme="night"] .campaign-bar{background:#191230;border-bottom:1px solid #4C3E78}

/* The big campaign band */
.campaign{padding-top:8px}
.campaign-inner{background:linear-gradient(160deg,#2C2249 0%,#241B40 58%,#1E1735 100%);color:#F0EAFB;border:1px solid #3D2F63;border-radius:28px;padding:52px 44px 40px;box-shadow:var(--shadow-lift);text-align:center}
[data-theme="night"] .campaign-inner{background:linear-gradient(160deg,#352A5C 0%,#2C2249 60%,#251D45 100%);border-color:#5A4A94}
.eyebrow--band{color:#CDBEF2}
.campaign-title{font-size:clamp(34px,5vw,50px);font-weight:800;color:#FFF;margin-bottom:10px}
.campaign-sub{color:#CFC4EE;font-size:clamp(16px,2.2vw,19px);max-width:620px;margin:0 auto}

/* Countdown cells */
.countdown{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:30px 0 12px}
.cd-cell{min-width:78px;background:rgba(253,251,255,.06);border:1px solid rgba(189,177,222,.38);border-radius:14px;padding:12px 8px 9px}
.cd-num{display:block;font-family:var(--font-display);font-weight:800;font-size:32px;line-height:1.05;color:#FFF}
.cd-cell:last-child .cd-num{color:var(--color-amber-bright)}
.cd-label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#BDB1DE;margin-top:3px}
.campaign-status{color:#E4DBFA;font-weight:600;margin:0 0 30px}
.campaign-status::before{content:"★ ";color:var(--color-amber)}

/* December nights wall — the pictures are the message */
.nights-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;max-width:880px;margin:0 auto}
.night{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:1;border:1px solid rgba(189,177,222,.30)}
.night img{width:100%;height:100%;object-fit:cover;display:block}
.night-num{position:absolute;left:5px;bottom:5px;background:rgba(24,15,42,.78);color:#FFF;font-size:11px;font-weight:700;line-height:1;padding:3px 7px;border-radius:var(--radius-pill)}
.night--encore{background:rgba(253,251,255,.05);display:flex;align-items:center;justify-content:center;border-style:dashed}
.night-star{color:var(--color-amber);font-size:19px;opacity:.85}
.campaign-note{color:#BDB1DE;font-size:14px;margin:16px 0 0}

/* Campaign cards: Season Pass leads, free trial rides along */
.campaign-cards{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;max-width:880px;margin:30px auto 0;text-align:left}
.campaign-card{position:relative;background:rgba(253,251,255,.055);border:1px solid rgba(189,177,222,.38);border-radius:var(--radius);padding:26px}
.campaign-card--main .card-badge{top:-13px;right:16px}
.campaign-card h3{color:#FFF;font-size:21px;margin-bottom:6px}
.campaign-card p{color:#CFC4EE;margin:4px 0 18px}
.price--band{color:var(--color-amber-bright)}
.button--amber{background:var(--color-amber);border-color:var(--color-amber);color:#2E283C}
.button--amber:hover{background:var(--color-amber-bright);border-color:var(--color-amber-bright)}
.campaign-card--trial{display:block;text-decoration:none;color:#F0EAFB;padding:0;overflow:hidden}
.campaign-card-media{display:block}
.campaign-card-media img{width:100%;aspect-ratio:16/8.4;object-fit:cover;display:block}
.campaign-card-label{display:block;font-family:var(--font-display);font-weight:700;font-size:18.5px;color:#FFF;padding:16px 22px 0}
.campaign-card-sub{display:block;color:#BDB1DE;font-size:14px;padding:2px 22px 20px}
.campaign-fine{color:#A99AD6;font-size:13.5px;margin:20px 0 0}

/* Pricing page: Season card carries the campaign badge */
#season{position:relative}

@media(max-width:860px){
  .campaign-inner{padding:38px 20px 30px}
  .nights-grid{grid-template-columns:repeat(6,1fr)}
  .campaign-cards{grid-template-columns:1fr}
  .cd-cell{min-width:66px}
  .cd-num{font-size:27px}
}
@media(max-width:640px){
  .campaign-bar-inner{justify-content:center;text-align:center}
  .countdown{flex-wrap:nowrap;gap:6px}
  .cd-cell{min-width:0;flex:1;padding:10px 2px 8px}
  .cd-num{font-size:24px}
}