/* OPTION E — "Editorial Blush" (The Knot-style): white, blush hero, ink-black square buttons, serif display. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap");
:root{--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
 --ink:#1b1b1b;--text:#3a3633;--muted:#7a716b;--bg:#ffffff;--hdr-bg:#ffffff;--blush:#fbeeea;
 --line:#ebe3dd;--line-strong:#cfc4bc;--acc:#d4532a;--foot-acc:#ffb898;
 --btn-bg:#1b1b1b;--btn-fg:#ffffff;--rad:0;--rad-s:0;--img-r:50%;--blush2:#f6e0d8;--tex-dot:rgba(212,83,42,.17)}

/* EDITORIAL BASE (shared by Options E and F) — "big wedding-brand" look: whitespace, serif display
   type, hairlines, quiet buttons, a hero panel and a TIDY occasion index instead of the 9,700px
   single column. Needs the token block (:root vars) from brand-E / brand-F in front of it.
   CSS only — no HTML / text change. Overlay loaded AFTER smm.css + site-nav-v8.css. */

html body{background:var(--bg);color:var(--text)}

/* ---------- header: white, logo-forward, quiet ---------- */
html body header{background:var(--hdr-bg);color:var(--ink);box-shadow:none;border-bottom:1px solid var(--line)}
html body header .sn-burger{color:var(--ink)}
html body header .logo{background-color:transparent;width:150px;height:46px;padding:4px 10px}
html body header .bar a:last-child{background:var(--btn-bg);color:var(--btn-fg);border-radius:var(--rad);padding:11px 24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
html body header .bar a:last-child:hover{background:var(--acc);color:#fff}
html body .sn-search{border:1px solid var(--line-strong);border-radius:var(--rad-s);overflow:hidden;background:#fff}
html body .sn-search input{border-radius:0;background:transparent;color:var(--ink)}
html body .sn-search input:focus{box-shadow:none;background:var(--blush)}
html body .sn-search button{background:transparent;color:var(--ink);border:0;border-radius:0}
html body .sn-search button:hover{background:var(--blush)}

/* link row under the header becomes a thin uppercase nav (the "|" separators fade to light grey) */
html body .site-nav{background:#fff;border-bottom:1px solid var(--line)}
html body .sn-notice{background:#fff;color:#cfc6c0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:11px 16px}
html body .sn-notice a{color:var(--ink)!important;text-decoration:none;margin:0 6px}
html body .sn-notice a:hover{color:var(--acc)!important}

/* ---------- canvas ---------- */
html body main{max-width:1000px;margin-top:0}
html body .smm-card{background:transparent;box-shadow:none;border-radius:0;padding:0 24px 40px;text-align:center}
html body .smm-card::after{content:"";display:block;clear:both}

/* ---------- type ---------- */
html body main h1,html body main h2,html body main h3{font-family:var(--serif);color:var(--ink)}
html body main h1 span,html body main h2 span{color:inherit!important}
html body main h1{font-weight:600;letter-spacing:-.005em;font-size:clamp(28px,3.2vw,40px)!important;line-height:1.15!important;margin:0}
html body .smm-card h3 a,html body .smm-card h3 span{text-decoration:none!important}
html body .smm-card a{color:var(--acc)}
html body .smm-card p,html body .smm-card li{font-size:16px;line-height:1.75;color:var(--text)}

/* ---------- hero: ONE textured panel = headline + Customize + rolling promo band (markup: hero_roll.py) ----------
   texture is pure CSS (dot lattice + soft top glow + gentle gradient): nothing to download, nothing to "fail to load" */
html body .smm-hero{position:relative;overflow:hidden;text-align:center;
 background:
  radial-gradient(circle at 1px 1px,var(--tex-dot) 1.1px,transparent 1.7px) 0 0/22px 22px,
  radial-gradient(ellipse 70% 55% at 50% 0%,rgba(255,255,255,.85),transparent 72%),
  linear-gradient(180deg,var(--blush),var(--blush2))}
html body .smm-hero>h1{background:none;margin:0 auto;padding:84px 24px 4px;max-width:860px;font-size:clamp(34px,5.4vw,64px)!important;line-height:1.06!important;font-weight:600;text-align:center}
html body .smm-hero>.cta{margin:0;padding:26px 0 54px}

/* rolling promo band: 2 slides, 4s each (inline script in the markup), cross-fade; dots are buttons */
html body .smm-roll{position:relative;height:104px;background:rgba(255,255,255,.66);border-top:1px solid rgba(27,27,27,.10)}
html body .smm-hero .smm-roll-s{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 24px 22px;text-decoration:none!important;color:var(--ink)!important;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
html body .smm-hero .smm-roll-s.on{opacity:1;visibility:visible;transition:opacity .5s ease}
html body .smm-roll-s .t{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);font-weight:600;line-height:1.15;color:var(--ink)}
html body .smm-roll-s .go{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:1px;white-space:nowrap}
html body .smm-roll-s:hover .go{color:var(--acc);border-color:var(--acc)}
html body .smm-roll-dots{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;z-index:3}
html body .smm-roll-dots button{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;width:30px;height:24px;cursor:pointer;position:relative}
html body .smm-roll-dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#c9bfb8;transition:background .3s}
html body .smm-roll-dots button.on::before{background:var(--ink)}
html body .smm-roll-dots button:hover::before{background:var(--acc)}
html body .cta a{background:var(--btn-bg);color:var(--btn-fg)!important;border-radius:var(--rad);padding:16px 44px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;box-shadow:none}
html body .cta a:hover{background:var(--acc)}

/* tagline directly under the hero → small uppercase eyebrow */
html body .smm-card>h1:nth-child(2){margin:54px 0 18px;font-family:inherit;font-size:13px!important;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted)}
html body .smm-card>h1:nth-child(2) span{font-size:inherit!important;color:var(--muted)!important}
/* press logos: quiet greyscale strip, colour on hover */
html body .smm-card img.wp-image-63560{display:block;margin:0 auto 6px!important;max-width:min(100%,640px)!important;filter:grayscale(1);opacity:.7;transition:.2s}
html body .smm-card img.wp-image-63560:hover{filter:none;opacity:1}

/* "Readily Available Designs" intro */
html body .smm-card>h3:nth-child(4){margin:56px 0 8px;font-size:clamp(24px,2.6vw,32px);font-weight:600;text-align:center}
html body .smm-card>h3:nth-child(4)~.btn{margin:0}
html body .smm-card>a.btn{background:transparent;color:var(--ink)!important;border:1px solid var(--ink);border-radius:var(--rad);padding:13px 30px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;box-shadow:none;display:table;margin:14px auto 0!important}
html body .smm-card>a.btn:nth-child(5){margin-top:26px!important}
html body .smm-card>a.btn:hover{background:var(--ink);color:#fff!important}

/* ---------- section headings: hairline + air ---------- */
html body .smm-card>h1:not(:nth-child(2)){border-top:1px solid var(--line);margin-top:72px;padding-top:44px;margin-bottom:20px;text-align:center}
html body .smm-card>h2{font-weight:600;font-size:clamp(22px,2.4vw,30px)!important;line-height:1.3!important;margin:72px auto 12px!important;max-width:760px;border-top:1px solid var(--line);padding-top:44px;text-align:center}

/* ---------- Free / Paid lists ---------- */
html body .smm-card>ul{list-style:none;padding:0;margin:0 auto 8px;max-width:720px;text-align:left}
html body .smm-card>ul>li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line)}
html body .smm-card>ul>li::before{content:"";position:absolute;left:3px;top:1.35em;width:7px;height:7px;background:var(--acc);transform:rotate(45deg)}

/* ---------- occasion index: image + name pairs → tidy 3-up list (was one 9,700px column) ----------
   floats (not grid) because the page has bare text nodes that a grid would squeeze into one track */
html body .smm-card>h3:has(img),html body .smm-card>p.img,html body .smm-card>img.aligncenter{float:left;width:84px;height:84px;margin:14px 0 6px;padding:0;line-height:0;text-align:left}
html body .smm-card>h3:has(img) img,html body .smm-card>p.img img,html body .smm-card>img.aligncenter{
 display:block!important;width:84px!important;height:84px!important;max-width:84px!important;max-height:84px!important;margin:0!important;object-fit:cover!important;border-radius:var(--img-r)!important;box-shadow:0 0 0 1px var(--line),0 6px 14px rgba(0,0,0,.08)}
html body .smm-card>h3:has(img)+h3,html body .smm-card>p.img+h3,html body .smm-card>img.aligncenter+h3{float:left;width:calc(33.333% - 98.5px);min-height:84px;display:flex;align-items:center;margin:14px 0 6px 14px;text-align:left!important;font-size:20px;line-height:1.2;font-weight:600;letter-spacing:0}
html body .smm-card>h3:has(img)+h3 a,html body .smm-card>p.img+h3 a,html body .smm-card>img.aligncenter+h3 a{color:var(--ink)}
html body .smm-card>h3:has(img)+h3 a:hover,html body .smm-card>p.img+h3 a:hover,html body .smm-card>img.aligncenter+h3 a:hover{color:var(--acc)}
/* the one name with no picture ("Other Events") */
html body .smm-card>h3:has(img)+h3+h3:not(:has(img)){float:left;width:33.333%;min-height:84px;display:flex;align-items:center;margin:14px 0 6px;text-align:left!important;font-size:20px}
/* anything after the floats starts on a fresh line */
html body .smm-card>h1,html body .smm-card>h2{clear:both}

/* ---------- closing block ---------- */
html body .smm-card>h2~h3:not(:has(img)){text-align:center;font-size:24px;font-weight:600;margin:28px 0 4px}
html body .smm-card>p:not(.img){max-width:760px;margin:0 auto!important;text-align:center!important}
html body .smm-card>.cta:last-child{margin:36px 0 12px}

/* ---------- misc ---------- */
html body details{border-color:var(--line);background:#fff;border-radius:var(--rad-s)}
html body summary{color:var(--ink)}
html body footer{background:var(--ink);color:#d9d2cc;margin-top:0}
html body footer a{color:#fff}
html body footer a[style]{color:var(--foot-acc)!important}

@media(max-width:700px){
 html body header .logo{width:112px;height:38px;padding:4px 4px}
 html body header .bar a:last-child{padding:10px 14px;font-size:11px;letter-spacing:.1em}
 html body .smm-card{padding:0 16px 32px}
 html body .smm-hero>h1{padding:52px 16px 2px}
 html body .smm-hero>.cta{padding:18px 16px 36px}
 html body .smm-hero .smm-roll-s{padding:8px 18px 26px}
 html body .smm-roll-dots button{width:36px;height:30px}
  html body .cta a{display:block;width:100%}
 html body .smm-card>h3:has(img),html body .smm-card>p.img,html body .smm-card>img.aligncenter{width:60px;height:60px}
 html body .smm-card>h3:has(img) img,html body .smm-card>p.img img,html body .smm-card>img.aligncenter{width:60px!important;height:60px!important;max-width:60px!important;max-height:60px!important}
 html body .smm-card>h3:has(img)+h3,html body .smm-card>p.img+h3,html body .smm-card>img.aligncenter+h3{width:calc(50% - 72.5px);min-height:60px;margin-left:12px;font-size:16px}
 html body .smm-card>h3:has(img)+h3+h3:not(:has(img)){width:50%;min-height:60px;font-size:16px}
 html body .smm-card>a.btn{display:block;margin:12px 0 4px!important}
}
@media(max-width:700px){html body .smm-roll{height:132px}}