/* EVENT ONLINE / INVITATION ATELIER 4.0
   Twelve hand-authored pattern families, eight color palettes, eight signature covers.
   CSS-only ornaments – no third-party imagery or template assets. */
body.design-v4{color-scheme:dark;background:var(--page-bg,#11131e)}
body.design-v4[data-light=true]{color-scheme:light}
.design-v4 .page{background:radial-gradient(ellipse at 50% -8%,color-mix(in srgb,var(--page-glow) 25%,transparent),transparent 62%),var(--page-bg);padding:clamp(14px,3vw,45px) 14px 20px}
.design-v4 .invitation{width:min(100%,670px);min-height:810px;border-radius:10px;padding:clamp(35px,5.3vw,61px) clamp(23px,7vw,65px) 38px;box-shadow:0 24px 85px #0004,0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);transition:background .15s ease}
.design-v4 .invitation .paper-texture{z-index:0;opacity:.1;background-image:radial-gradient(circle,#fff 0 .8px,transparent 1px);background-size:17px 21px}
.design-v4 .invitation .spot,.design-v4 .invitation .stage-glow,.design-v4 .invitation .crowd-art,.design-v4 .invitation .confetti{display:none}
.design-v4 .invitation .sparkles{background:none}
.design-v4 .invitation::after{inset:10px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:2px;opacity:.72}
.design-v4 .invitation .frame-outer{inset:17px;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:1px;opacity:.76}
.design-v4 .invitation .frame-inner{inset:23px;border-color:var(--outline);border-radius:1px;opacity:.13}
.design-v4 .invitation .decor-circle{opacity:.08;border-color:var(--accent)}
.design-v4 .invite-content{min-height:730px;justify-content:flex-start}
.design-v4 .invite-upper{margin:7px 0 11px;min-height:37px;text-shadow:none;gap:8px}
.design-v4 .script-heading{font-family:'Playfair Display',Georgia,serif;letter-spacing:.025em;font-size:clamp(24px,4vw,36px);font-weight:600;line-height:1.5;white-space:normal}
.design-v4 .cover-mail{display:none}
.design-v4 .flourish{font-size:10px;opacity:.65}
.design-v4 .overline{font-size:clamp(8px,1.35vw,10px);letter-spacing:.3em;margin:4px 0 17px;color:var(--accent)}
.design-v4 .event-title{font:700 clamp(34px,6.3vw,57px)/1.12 'Playfair Display',Georgia,serif;letter-spacing:-.025em;text-transform:none;text-shadow:none;margin:3px 0 4px;max-width:100%}
.design-v4 .title-main{background:none;color:var(--ink);filter:none}
.design-v4 .title-accent{background:none;color:var(--accent);filter:none;font:800 clamp(38px,7vw,68px)/1.1 'Be Vietnam Pro',Arial,sans-serif;letter-spacing:-.05em;margin-top:7px}
.design-v4 .center-ornament{margin:15px 0 17px;font-size:18px;gap:12px}
.design-v4 .center-ornament span{width:48px;opacity:.65}
.design-v4 .highlight-banner{font-size:clamp(10px,1.9vw,14px);font-weight:800;line-height:1.75;background:none;color:var(--accent);box-shadow:none;transform:none;padding:5px 12px 7px;width:100%;margin:7px 0 16px;letter-spacing:.055em;border-top:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.design-v4 .intro-title{font:600 clamp(12px,1.9vw,14px)/1.8 'Be Vietnam Pro',sans-serif;margin:7px 0 13px;color:var(--ink)}
.design-v4 .invite-body{font-size:clamp(12px,1.75vw,14px);font-weight:450;line-height:1.92;color:var(--muted);text-shadow:none;max-width:515px;margin-bottom:20px}
.design-v4 .detail-grid{margin:7px 0 24px;gap:12px}
.design-v4 .detail-box{padding:16px 15px;border-radius:5px;background:var(--panel);box-shadow:none;backdrop-filter:none;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.design-v4 .detail-emoji{font-size:20px;width:20px}
.design-v4 .detail-copy>span{color:var(--accent);font-size:9px;letter-spacing:.17em}
.design-v4 .detail-copy strong{color:var(--ink);font-size:clamp(11px,1.8vw,14px)}
.design-v4 .detail-copy small{color:var(--muted);font-size:11px}
.design-v4 .closing-banner{border:0;border-top:1px solid var(--outline);border-bottom:1px solid var(--outline);padding:11px 3px;color:var(--accent);background:transparent;box-shadow:none;font-size:clamp(11px,1.9vw,13px);letter-spacing:.03em;line-height:1.65;margin-bottom:15px}
.design-v4 .ending-text{font-size:clamp(11px,1.8vw,13px);font-weight:550;line-height:1.9;color:var(--ink)}
.design-v4 .organizer-text{color:var(--muted);font-size:11px}
.design-v4 .action-button{background:color-mix(in srgb,var(--card) 80%,transparent);border-color:color-mix(in srgb,var(--accent) 44%,transparent);color:var(--ink);border-radius:5px;font-size:10px}
.design-v4 .primary-action{background:var(--accent);border-color:var(--accent);color:var(--card2)}
.design-v4 .action-button:hover{background:color-mix(in srgb,var(--accent) 16%,var(--card))}
.design-v4 .primary-action:hover{background:var(--accent);filter:brightness(1.05)}
.design-v4 .public-footer{background:var(--page-bg);color:var(--footer-ink,#b7b6c5)}
/* Classic frames */
.design-v4 .invitation[data-family='classic'] .frame-outer,
.design-v4 .invitation[data-family='royal'] .frame-outer{inset:17px;border:2px solid var(--outline);outline:1px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:5px}
.design-v4 .invitation[data-family='classic'] .sparkles,
.design-v4 .invitation[data-family='royal'] .sparkles{background:conic-gradient(from 190deg at 4% 5%,transparent 0 65deg,var(--accent) 66deg 68deg,transparent 69deg 360deg),conic-gradient(from 65deg at 96% 5%,transparent 0 65deg,var(--accent) 66deg 68deg,transparent 69deg 360deg),conic-gradient(from 65deg at 4% 95%,transparent 0 65deg,var(--accent) 66deg 68deg,transparent 69deg 360deg),conic-gradient(from 190deg at 96% 95%,transparent 0 65deg,var(--accent) 66deg 68deg,transparent 69deg 360deg);opacity:.45}
.design-v4 .invitation[data-family='finegold'] .frame-outer{border:1px solid var(--accent);inset:18px;opacity:.7}
.design-v4 .invitation[data-family='finegold'] .frame-inner{inset:25px;opacity:.25}
.design-v4 .invitation[data-family='finegold'] .center-ornament{font-size:14px}
/* Fine circular culture-inspired repeating rays. This is original vector geometry. */
.design-v4 .invitation[data-family='bronze'] .paper-texture{inset:0;opacity:.21;background:repeating-conic-gradient(from 0deg at 50% 42%,transparent 0deg 7deg,var(--accent) 8deg 8.5deg,transparent 9deg 14deg);mask-image:radial-gradient(circle at 50% 42%,transparent 0 180px,#000 185px 195px,transparent 203px 100%);-webkit-mask-image:radial-gradient(circle at 50% 42%,transparent 0 180px,#000 185px 195px,transparent 203px 100%)}
.design-v4 .invitation[data-family='bronze'] .decor-one{left:calc(50% - 238px);top:110px;width:476px;height:476px;border:2px dotted var(--accent);opacity:.14;box-shadow:0 0 0 21px color-mix(in srgb,var(--accent) 10%,transparent),0 0 0 55px color-mix(in srgb,var(--accent) 4%,transparent)}
/* Auspicious cloud lines */
.design-v4 .invitation[data-family='clouds'] .sparkles{opacity:.45;background:repeating-radial-gradient(circle at 0 0,transparent 0 13px,var(--accent) 14px 15px,transparent 16px 25px),repeating-radial-gradient(circle at 100% 100%,transparent 0 12px,var(--accent) 13px 14px,transparent 15px 26px);mask-image:linear-gradient(135deg,#000 0%,transparent 24%,transparent 72%,#000 100%)}
.design-v4 .invitation[data-family='clouds'] .frame-outer{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
/* Paired inner frames */
.design-v4 .invitation[data-family='double'] .frame-outer{inset:16px;border:2px solid var(--outline);opacity:.84}
.design-v4 .invitation[data-family='double'] .frame-inner{inset:27px;border:1px solid var(--accent);opacity:.5}
/* Header ribbon */
.design-v4 .invitation[data-family='band']{--card-bg:linear-gradient(180deg,var(--accent) 0 28%,var(--card2) 28% 100%)!important}
.design-v4 .invitation[data-family='band'] .invite-upper{background:var(--card2);margin:0 -10px 22px;padding:10px;border:1px solid var(--outline);color:var(--ink)}
.design-v4 .invitation[data-family='band'] .overline{background:var(--card2);padding:7px 14px;border-radius:25px}
.design-v4 .invitation[data-family='band'] .event-title{margin-top:34px}
.design-v4 .invitation[data-family='band'] .spot{display:none}
/* Polygon panels */
.design-v4 .invitation[data-family='geometric'] .paper-texture,
.design-v4 .invitation[data-family='product'] .paper-texture{opacity:.18;background:linear-gradient(137deg,transparent 0 71%,var(--accent) 71% 77%,transparent 77%),linear-gradient(153deg,transparent 0 14%,var(--accent) 14% 20%,transparent 20%),linear-gradient(32deg,transparent 0 89%,var(--accent) 89%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.design-v4 .invitation[data-family='geometric'] .event-title{font-family:'Be Vietnam Pro',sans-serif;font-weight:900;text-transform:uppercase}
/* Radiating arch at the top and bottom */
.design-v4 .invitation[data-family='arcs'] .sparkles,
.design-v4 .invitation[data-family='school'] .sparkles{opacity:.48;background:repeating-radial-gradient(circle at 50% -5%,transparent 0 16px,var(--accent) 17px 18px,transparent 19px 30px),repeating-radial-gradient(circle at 50% 105%,transparent 0 18px,var(--accent) 19px 20px,transparent 21px 34px);mask-image:linear-gradient(180deg,#000 0%,transparent 28%,transparent 70%,#000 100%)}
/* Star clusters */
.design-v4 .invitation[data-family='sparkle'] .sparkles,
.design-v4 .invitation[data-family='gala'] .sparkles{opacity:.42;background-image:radial-gradient(circle at 12% 8%,var(--accent) 1px,transparent 2px),radial-gradient(circle at 84% 16%,var(--accent) 2px,transparent 4px),radial-gradient(circle at 28% 41%,var(--accent) 1px,transparent 2px),radial-gradient(circle at 78% 66%,var(--accent) 1px,transparent 2px),radial-gradient(circle at 10% 90%,var(--accent) 1px,transparent 2px),radial-gradient(circle at 90% 89%,var(--accent) 2px,transparent 3px),radial-gradient(circle,var(--accent) .8px,transparent 2px);background-size:auto,auto,auto,auto,auto,auto,43px 51px}
.design-v4 .invitation[data-family='sparkle'] .frame-outer,
.design-v4 .invitation[data-family='gala'] .frame-outer{border-color:var(--accent);opacity:.67}
/* Art-deco corners */
.design-v4 .invitation[data-family='deco'] .sparkles,
.design-v4 .invitation[data-family='royal'] .paper-texture{opacity:.42;background:linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 22px,var(--accent) 23px 25px,transparent 26px) top left/115px 115px no-repeat,linear-gradient(-135deg,var(--accent) 0 2px,transparent 2px 22px,var(--accent) 23px 25px,transparent 26px) top right/115px 115px no-repeat,linear-gradient(45deg,var(--accent) 0 2px,transparent 2px 22px,var(--accent) 23px 25px,transparent 26px) bottom left/115px 115px no-repeat,linear-gradient(-45deg,var(--accent) 0 2px,transparent 2px 22px,var(--accent) 23px 25px,transparent 26px) bottom right/115px 115px no-repeat}
/* Grid and circuitry */
.design-v4 .invitation[data-family='circuit'] .paper-texture,
.design-v4 .invitation[data-family='futurist'] .paper-texture{opacity:.3;background:linear-gradient(color-mix(in srgb,var(--accent) 25%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 25%,transparent) 1px,transparent 1px),radial-gradient(circle at 80% 10%,var(--accent) 1px,transparent 4px);background-size:34px 34px,34px 34px,95px 95px;mask-image:linear-gradient(90deg,#000,transparent 28%,transparent 70%,#000)}
.design-v4 .invitation[data-family='circuit'] .event-title,
.design-v4 .invitation[data-family='futurist'] .event-title{font-family:'Be Vietnam Pro',sans-serif;font-weight:900;text-transform:uppercase}
.design-v4 .invitation[data-family='circuit'] .highlight-banner{border-radius:2px;background:color-mix(in srgb,var(--accent) 11%,transparent)}
/* Branches: leaf shapes via multiple, flat radial-gradient spots. */
.design-v4 .invitation[data-family='botanical'] .paper-texture{opacity:.26;background:radial-gradient(ellipse 17px 44px at 9% 15%,var(--accent) 0 42%,transparent 46%),radial-gradient(ellipse 12px 35px at 16% 24%,var(--accent) 0 42%,transparent 46%),radial-gradient(ellipse 14px 38px at 90% 12%,var(--accent) 0 42%,transparent 46%),radial-gradient(ellipse 17px 45px at 83% 22%,var(--accent) 0 42%,transparent 46%),radial-gradient(ellipse 16px 38px at 11% 87%,var(--accent) 0 42%,transparent 46%),radial-gradient(ellipse 15px 38px at 88% 89%,var(--accent) 0 42%,transparent 46%)}
/* Signature covers – further variants beyond the twelve base families. */
.design-v4 .invitation[data-family='stage']{border-radius:20px;--card-bg:radial-gradient(ellipse at 50% 5%,#823c88 0%,#36154e 35%,#170c27 100%)!important;box-shadow:0 0 55px #c04cff2b,0 30px 100px #0009}
.design-v4 .invitation[data-family='stage'] .spot{display:block;opacity:.5;filter:blur(20px)}
.design-v4 .invitation[data-family='stage'] .stage-glow{display:block;opacity:.4}
.design-v4 .invitation[data-family='stage'] .title-accent{font-size:clamp(45px,9vw,98px);font-style:italic;text-shadow:0 0 18px #ffae5b6e}
.design-v4 .invitation[data-family='stage'] .highlight-banner{background:linear-gradient(110deg,#a26529,#ffd36c,#fff3ba,#d38730);border:0;color:#2c1928;box-shadow:0 0 22px #ffc26466;transform:skew(-2deg)}
.design-v4 .invitation[data-family='stage'] .script-heading{font-family:'Great Vibes',cursive;font-size:clamp(45px,8vw,67px)}
.design-v4 .invitation[data-family='stage'] .crowd-art{display:block;opacity:.48}
.design-v4 .invitation[data-family='gala']{--card-bg:radial-gradient(circle at 50% 0%,#6e5229 0%,#171516 35%,#090909 100%)!important}
.design-v4 .invitation[data-family='minimal'] .frame-inner,
.design-v4 .invitation[data-family='minimal'] .frame-outer{opacity:.15}
.design-v4 .invitation[data-family='minimal'] .highlight-banner{border-top:0;border-bottom:0;color:var(--ink);font-weight:500}
.design-v4 .invitation[data-family='minimal'] .event-title{font-size:clamp(39px,7vw,66px)}
.design-v4 .invitation[data-family='lantern'] .sparkles{background:radial-gradient(circle at 18% 7%,var(--accent) 0 19px,transparent 20px),radial-gradient(circle at 50% 10%,var(--accent) 0 25px,transparent 26px),radial-gradient(circle at 82% 7%,var(--accent) 0 19px,transparent 20px),linear-gradient(90deg,var(--accent),var(--accent)) 18% 0/1px 68px no-repeat,linear-gradient(90deg,var(--accent),var(--accent)) 50% 0/1px 65px no-repeat,linear-gradient(90deg,var(--accent),var(--accent)) 82% 0/1px 68px no-repeat;opacity:.2}
.design-v4 .invitation[data-family='school'] .event-title{font-family:'Playfair Display',Georgia,serif}
.design-v4 .invitation[data-family='futurist'] .event-title{color:var(--ink)}
/* Light surface legibility and contrast */
.design-v4[data-light=true] .invitation .title-main{color:var(--ink)}
.design-v4[data-light=true] .invitation .detail-box{background:#ffffff6b}
.design-v4[data-light=true] .invitation .action-button{background:#ffffff77;color:var(--ink)}
.design-v4[data-light=true] .invitation .primary-action{background:var(--accent);color:#fff}
.design-v4[data-light=true] .invitation .sparkles{opacity:.16}
.design-v4[data-light=true] .invitation .center-ornament span{background:var(--accent)}
@media(max-width:580px){
  .design-v4 .page{padding:12px 10px 10px}
  .design-v4 .invitation{padding:32px 29px 24px;border-radius:8px;min-height:690px}
  .design-v4 .invite-content{min-height:650px}
  .design-v4 .invitation::after{inset:6px}
  .design-v4 .invitation .frame-outer{inset:11px}
  .design-v4 .invitation .frame-inner{inset:17px}
  .design-v4 .script-heading{font-size:27px}
  .design-v4 .event-title{font-size:clamp(29px,7.2vw,42px)}
  .design-v4 .title-accent{font-size:clamp(34px,8vw,55px)}
  .design-v4 .highlight-banner{font-size:10px}
  .design-v4 .invite-body{font-size:12px;line-height:1.85}
  .design-v4 .detail-grid{grid-template-columns:1fr;gap:8px}
  .design-v4 .detail-box{padding:11px 12px}
  .design-v4 .detail-emoji{font-size:17px}
  .design-v4 .card-actions{gap:7px}
  .design-v4 .action-button{font-size:10px;padding:10px 9px;min-height:38px}
  .design-v4 .invitation[data-family='bronze'] .paper-texture{opacity:.13}
}
@media(prefers-reduced-motion:reduce){.design-v4 .invitation{transition:none}}