/* Viking Name Generator v2 (DRAFT) — scoped to #vng2 so nothing leaks into the theme. Asgard maroon + gold. */
#vng2 { --vng-maroon:#7A1F1F; --vng-maroon-d:#5a1616; --vng-gold:#B8860B; --vng-gold-l:#E8C872; --vng-ink:#2b1d14;
  --vng-parch:#f6ecd4; --vng-parch-d:#e9d8b0; --vng-muted:#6b5a48; max-width:760px; margin:0 auto; color:var(--vng-ink);
  font-family:'EB Garamond','Noto Sans Runic',Georgia,serif; font-size:18px; line-height:1.55; }
#vng2 *, #vng2 *::before, #vng2 *::after { box-sizing:border-box; }
#vng2 .vng2-form { display:grid; gap:14px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:#fff; border:1px solid var(--vng-parch-d);
  border-radius:14px; padding:20px; box-shadow:0 2px 10px rgba(43,29,20,.06); }
#vng2 .vng2-form label { font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vng-muted); display:block; margin-bottom:4px; }
#vng2 .vng2-form select, #vng2 .vng2-form input[type=text], #vng2 .vng2-cert input[type=text], #vng2 .vng2-cert input[type=email] {
  width:100%; max-width:100%; min-width:0; box-sizing:border-box; font:inherit; padding:10px 12px; border:1px solid #cdbb95; border-radius:8px; background:#fffdf7; color:var(--vng-ink); }
#vng2 .vng2-actions { grid-column:1 / -1; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }   /* Glen 9/28/26: centred under the fields */
#vng2 .vng2-btn { font-family:'Cinzel',serif; font-weight:700; letter-spacing:.04em; border:0; border-radius:999px; padding:12px 22px;
  cursor:pointer; text-decoration:none; display:inline-block; font-size:.95rem; transition:transform .12s ease, box-shadow .12s ease; }
#vng2 .vng2-btn:focus-visible { outline:3px solid var(--vng-gold); outline-offset:2px; }
#vng2 .vng2-btn-primary { background:var(--vng-maroon); color:#fff; }
#vng2 .vng2-btn-primary:hover { background:var(--vng-maroon-d); transform:translateY(-1px); }
#vng2 .vng2-btn-ghost { background:transparent; color:var(--vng-maroon); border:1.5px solid var(--vng-maroon); padding:8px 16px; font-size:.82rem; }
#vng2 .vng2-btn-gold { background:linear-gradient(180deg,var(--vng-gold-l),var(--vng-gold)); color:var(--vng-ink); box-shadow:0 2px 0 #8a6408; }
#vng2 .vng2-btn-gold:hover { transform:translateY(-1px); }
#vng2 #vng2-out { margin-top:22px; scroll-margin-top:90px; }
/* countdown */
#vng2 .vng2-wait { text-align:center; background:radial-gradient(ellipse at top,#2c1a12,#140c08); color:var(--vng-parch); border-radius:16px; padding:28px 22px 30px; min-height:260px; }
#vng2 .vng2-wait-kicker { font-family:'Cinzel',serif; letter-spacing:.08em; text-transform:uppercase; font-weight:700; line-height:1.3;
  font-size:clamp(1.1rem,3.6vw,1.45rem); color:#f3d98b; text-shadow:0 1px 2px rgba(0,0,0,.6); }   /* larger + bold, Glen 9/29/26 */
#vng2 .vng2-count { font-family:'Cinzel',serif; font-size:3.4rem; font-weight:700; color:var(--vng-gold-l); margin:6px 0 10px; animation:vng2pulse 1s ease-in-out infinite; }
#vng2 .vng2-wait-fact { font-size:clamp(1.25rem,3.4vw,1.5rem); line-height:1.45; max-width:620px; margin:0 auto; font-style:normal; text-shadow:0 1px 2px rgba(0,0,0,.45); }   /* larger, Glen 9/29/26 */
@keyframes vng2pulse { 0%,100% { opacity:.55; transform:scale(.96);} 50% { opacity:1; transform:scale(1.04);} }
/* result card */
#vng2 .vng2-card { position:relative; text-align:center; background:linear-gradient(180deg,#fbf4e2,var(--vng-parch)); border:2px solid var(--vng-gold);
  outline:6px double var(--vng-maroon); outline-offset:-14px; border-radius:6px; padding:44px 34px 28px; box-shadow:0 10px 30px rgba(43,29,20,.18);
  opacity:0; transform:translateY(8px) scale(.98); transition:opacity .5s ease, transform .5s ease; }
#vng2 .vng2-card.vng2-in { opacity:1; transform:none; }
#vng2 .vng2-card-runes { font-family:'Noto Sans Runic',serif; color:var(--vng-gold); letter-spacing:.35em; font-size:1rem; opacity:.85; }
#vng2 .vng2-card-kicker { font-family:'Cinzel',serif; letter-spacing:.18em; text-transform:uppercase; font-size:.75rem; color:var(--vng-muted); margin-top:6px; }
#vng2 .vng2-card-name { font-family:'Cinzel',serif; font-weight:700; color:var(--vng-maroon); font-size:clamp(1.7rem,4.8vw,2.6rem); line-height:1.15; margin:8px 0 4px; }
#vng2 .vng2-card-on { font-style:italic; color:var(--vng-muted); font-size:1.15rem; }
#vng2 .vng2-card-means { margin:12px auto 4px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-size:1rem; max-width:560px; }
#vng2 .vng2-card-bynote { font-size:.95rem; color:var(--vng-muted); }
#vng2 .vng2-card-story { font-size:1.15rem; max-width:580px; margin:16px auto; }
#vng2 .vng2-card-runeline { display:flex; flex-direction:column; align-items:center; gap:2px; margin:10px 0 14px; }
#vng2 .vng2-runes-lg { font-family:'Noto Sans Runic',serif; font-size:2.2rem; color:var(--vng-ink); letter-spacing:.12em; }
#vng2 .vng2-runes-cap { font-size:.8rem; color:var(--vng-muted); font-family:'Cinzel',serif; letter-spacing:.06em; }
#vng2 .vng2-share { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
/* did you know + cta */
#vng2 .vng2-dyk { margin:18px 0; padding:14px 18px; border-left:4px solid var(--vng-gold); background:#fffaf0; border-radius:0 10px 10px 0; font-size:1.05rem; }
#vng2 .vng2-dyk a { color:var(--vng-maroon); }
#vng2 .vng2-cta { text-align:center; background:var(--vng-maroon); color:#fff; border-radius:14px; padding:20px; margin:18px 0; }
#vng2 .vng2-cta-h { font-family:'Cinzel',serif; font-weight:700; font-size:1.25rem; margin-bottom:6px; }
#vng2 .vng2-cta-sub { opacity:.92; margin-bottom:12px; font-size:1rem; }
#vng2 .vng2-note { background:#eef7ee; border:1px solid #b9dcb9; padding:14px 18px; border-radius:10px; }
/* certificate form */
#vng2 .vng2-cert { background:#fff; border:2px solid var(--vng-gold); border-radius:14px; padding:20px; margin:10px 0 24px; }
#vng2 .vng2-cert h3 { font-family:'Cinzel',serif; color:var(--vng-maroon); margin:0 0 4px; font-size:1.3rem; }
#vng2 .vng2-cert .vng2-vname { font-family:'Cinzel',serif; font-weight:700; }
#vng2 .vng2-cert-grid { display:grid; gap:12px; grid-template-columns:1fr 1fr; margin:12px 0; }
#vng2 .vng2-cert label { font-size:.9rem; color:var(--vng-muted); display:block; }
#vng2 .vng2-consent { display:flex; gap:10px; align-items:flex-start; font-size:.95rem; margin:6px 0 12px; }
#vng2 .vng2-hp { position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
#vng2 .vng2-fine { font-size:.82rem; color:var(--vng-muted); margin-top:8px; }
#vng2 #vng2-cert-msg { margin-top:8px; }
/* store panel */
#vng2 .vng2-store { margin-top:30px; text-align:center; }
#vng2 .vng2-store h3 { font-family:'Cinzel',serif; color:var(--vng-maroon); }
#vng2 .vng2-store-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0; }
#vng2 .vng2-store-grid a { display:block; background:#fff; border:1px solid var(--vng-parch-d); border-radius:12px; padding:8px; text-decoration:none; color:var(--vng-ink); font-size:.85rem; }
#vng2 .vng2-store-grid img { width:100%; height:auto !important; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }   /* height:auto — the 360px height attribute was stretching every tile (Glen 9/28/26) */
#vng2 .vng2-store-fine { font-size:.85rem; color:var(--vng-muted); }
@media (max-width:640px) {
  #vng2 { font-size:17px; }
  #vng2 .vng2-form, #vng2 .vng2-cert-grid { grid-template-columns:minmax(0,1fr); }
  #vng2 .vng2-form { padding:14px; }
  #vng2 .vng2-card { padding:36px 18px 22px; outline-offset:-10px; }
  #vng2 .vng2-store-grid { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) { #vng2 .vng2-count { animation:none; } #vng2 .vng2-card { transition:none; } }

/* Banner mockups (Glen 9/28/26) — slim, text is real HTML (the page H1), image is decoration */
.vng2-banner { position:relative; width:100%; max-width:100%; min-width:0; box-sizing:border-box; height:clamp(150px, 27.8vw, 200px);
  background-size:cover; background-position:center;   /* no aspect-ratio: with min-height it forced a ~540px min-width and widened the whole page on phones (Glen 9/28/26) */
  border-radius:6px; overflow:hidden; margin:0 0 18px; display:flex; align-items:center; }
.vng2-banner-text { padding:0 6% 0 5%; max-width:62%; min-width:0; }
.vng2-banner .vng2-banner-title { font-family:'Cinzel',serif; font-weight:700; font-size:clamp(1.25rem,3.4vw,2.1rem); line-height:1.15; margin:0 0 .35em; letter-spacing:.02em; }
.vng2-banner .vng2-banner-sub { font-family:'EB Garamond',Georgia,serif; font-size:clamp(.85rem,1.6vw,1.05rem); line-height:1.35; margin:0; }
.vng2-banner-a .vng2-banner-title { color:#490016; } .vng2-banner-a .vng2-banner-sub { color:#3b2f2a; }
.vng2-banner-b { background-position:78% center; } .vng2-banner-b .vng2-banner-text { max-width:42%; } .vng2-banner-b .vng2-banner-title { color:#f1eeea; } .vng2-banner-b .vng2-banner-sub { color:#d9d2c7; }
.vng2-banner-c .vng2-banner-title { color:#f1eeea; } .vng2-banner-c .vng2-banner-sub { color:#e8cf8f; }
@media (max-width:600px){ .vng2-banner-a{background-position:right center} .vng2-banner-b{background-position:62% center}
  .vng2-banner-text,.vng2-banner-b .vng2-banner-text{max-width:70%} }

/* Glen 9/28/26: no breadcrumbs on the generator page (this stylesheet loads only where the generator is) */
.site-breadcrumbs { display:none; }
#vng2 .vng2-form > div { min-width:0; }

/* Phone fixes (Glen 9/28/26 screenshot): the theme's h1 size outranked ours, and 'cover' cropped the runes off the right. */
.vng2-banner h1.vng2-banner-title { font-size:clamp(1.15rem, 5vw, 2.1rem); line-height:1.12; margin:0 0 .3em; padding:0; }
@media (max-width:600px){
  .vng2-banner-c1,.vng2-banner-c4,.vng2-banner-c5,.vng2-banner-c6,.vng2-banner-c { background-position:right center; }
  .vng2-banner-c2 { background-position:center; } .vng2-banner-c3 { background-position:center bottom; }
  .vng2-banner .vng2-banner-text { max-width:64%; padding-left:6%; }
  .vng2-banner-c5 .vng2-banner-text { max-width:60%; }
  .vng2-banner .vng2-banner-sub { font-size:.85rem; }
}

#vng2 .vng2-trait-msg { margin:6px 0 0; font-size:.9rem; color:#7a1f1f; }   /* family-friendly guard message */

/* Confirmation landing page (Glen 9/28/26) */
/* Glen 10/1/26: the Confirmed! box is green, the same as the 'check your inbox' box after a request */
#vng2.vng2-confirmed .vng2-done { text-align:center; background:#e8f5e9; border:2px solid #2e7d32; border-left-width:8px; color:#1b3d1f; border-radius:14px; padding:22px 20px; margin:0 0 26px; }
#vng2 .vng2-done-lead { font-size:1.1rem; line-height:1.55; margin:0 0 8px; }
#vng2 .vng2-done-skal { font-family:'Cinzel',serif; font-weight:700; font-size:1.6rem; color:var(--vng-maroon); margin:0; }
#vng2 .vng2-reads h3, #vng2.vng2-confirmed .vng2-store h3 { font-family:'Cinzel',serif; color:var(--vng-maroon); text-align:center; margin:0 0 12px; }
#vng2 .vng2-reads-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 28px; }
#vng2 .vng2-read { display:block; background:#fff; border:1px solid var(--vng-parch-d); border-radius:10px; overflow:hidden; text-decoration:none; color:var(--vng-ink); }
#vng2 .vng2-read img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; margin:0 !important; }   /* the theme adds an image margin */
#vng2 .vng2-read strong { display:block; padding:10px 12px 2px; font-family:'Cinzel',serif; font-size:.95rem; color:var(--vng-maroon); }
#vng2 .vng2-read span { display:block; padding:0 12px 12px; font-size:.92rem; line-height:1.4; color:var(--vng-muted); }
@media (max-width:640px){ #vng2 .vng2-reads-grid { grid-template-columns:minmax(0,1fr); } }
/* Store tiles: the theme's image margin left a tall empty band under each sticker (9/28/26) */
#vng2 .vng2-store-grid img { margin:0 0 6px !important; }

/* "Check your inbox" after a certificate request: a green box (Glen 9/28/26 — "I almost missed it") */
.vng2 #vng2-cert-msg.vng2-msg-ok{background:#e8f5e9;border:2px solid #2e7d32;border-left-width:8px;color:#1b3d1f;border-radius:8px;
  padding:14px 16px;margin:12px 0;font-size:1.05em;line-height:1.5}
.vng2 #vng2-cert-msg.vng2-msg-ok strong{color:#1b5e20;font-size:1.1em;display:block;margin-bottom:4px}

/* Store tiles (Glen 9/28/26: "sized too tall"): a square frame that crops into the centre of Printful's mockup,
   so the sticker or print fills the tile instead of floating in white margin. */
#vng2 .vng2-store-grid .vng2-thumb { display:block; aspect-ratio:1/1; overflow:hidden; border-radius:8px; margin:0 0 6px; background:#fff; }
#vng2 .vng2-store-grid .vng2-thumb img { width:100%; height:100% !important; aspect-ratio:auto; object-fit:cover; transform:scale(1.4); margin:0 !important; border-radius:0; }

/* newsletter thank-you page (Glen 9/28/26) */
#vng2.vng2-joined .vng2-done-small{font-size:.92rem;color:var(--vng-muted);margin:4px 0 10px}