/* Shared banner-face styles used by both the homepage carousel cards and the design-page
   preview. Only the byte-identical pieces live here — fabric backgrounds and the embroidered
   lace edges. Per-context sizing/positioning (.cloth vs .banner, .l-* vs .ltr-*, grommet vs
   eyelet, etc.) deliberately stays in each page's own stylesheet for this pass.
   Note: .lace-* relies on the --lace variable, which each page already defines in scope
   (:root on the design page, .wheelwrap on the homepage). */

/* fabrics — clean cloth, no stripes; sheer (tulle) is translucent */
.fab-linen{background-color:#f1ece3;}
.fab-satin{background-color:#f3efe7;background-image:linear-gradient(115deg,rgba(120,110,98,.10),rgba(255,255,255,.34) 47%,rgba(255,255,255,.52) 50%,rgba(255,255,255,.34) 53%,rgba(120,110,98,.10));}
.fab-tulle{background-color:rgba(246,243,237,.55);}

/* embroidered lace edges */
.lace-l,.lace-r{display:none;position:absolute;top:0;bottom:0;width:20px;z-index:2;background:var(--lace) repeat-y;background-size:20px 30px;pointer-events:none;}
.e-embroidered .lace-l{display:block;left:-5px;}
.e-embroidered .lace-r{display:block;right:-5px;transform:scaleX(-1);}

/* ----- Design-skin face (the full-size banner) -----
   This is what renderBanner's default ("design") skin produces, used by the design-page preview
   and now by the admin CMS preview. Reproduced here so banner.css fully styles that face and the
   --grain/--lace fabric textures resolve anywhere this file is loaded (incl. the preview iframe).
   On the homepage these selectors match nothing (the carousel uses .cloth/.b-*/.l-*/.grommet);
   on the design page they duplicate its inline copy identically. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  --lace:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='30'%3E%3Cpath%20d='M20%200%20L8%200%20Q2%205%208%2010%20Q2%2015%208%2020%20Q2%2025%208%2030%20L20%2030%20Z'%20fill='%23fcfaf6'%20fill-opacity='0.5'/%3E%3Cpath%20d='M8%200%20Q2%205%208%2010%20Q2%2015%208%2020%20Q2%2025%208%2030'%20fill='none'%20stroke='%238a7565'%20stroke-opacity='0.5'%20stroke-width='0.8'/%3E%3Ccircle%20cx='12'%20cy='5'%20r='1.1'%20fill='%238a7565'%20fill-opacity='0.4'/%3E%3Ccircle%20cx='12'%20cy='15'%20r='1.1'%20fill='%238a7565'%20fill-opacity='0.4'/%3E%3Ccircle%20cx='12'%20cy='25'%20r='1.1'%20fill='%238a7565'%20fill-opacity='0.4'/%3E%3Ccircle%20cx='15'%20cy='10'%20r='0.7'%20fill='%238a7565'%20fill-opacity='0.35'/%3E%3Ccircle%20cx='15'%20cy='20'%20r='0.7'%20fill='%238a7565'%20fill-opacity='0.35'/%3E%3C/svg%3E");
}
.banner{position:relative;width:100%;max-width:296px;max-height:66vh;aspect-ratio:7/17;margin:0 auto;display:flex;align-items:center;justify-content:center;box-shadow:0 34px 44px -24px rgba(58,30,20,.55),0 5px 14px -7px rgba(58,30,20,.3);transition:aspect-ratio .3s;}
.banner::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:var(--grain);background-size:150px 150px;opacity:.1;}
.banner::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(100deg,rgba(58,42,34,.10) 0%,transparent 16%,transparent 84%,rgba(58,42,34,.10) 100%);}
.eyelet{position:absolute;top:11px;width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(103,86,71,.5);background:rgba(255,255,255,.4);z-index:4;}
.eyelet.l{left:28%;} .eyelet.r{right:28%;}
.banner-stack{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;padding:2rem 1.1rem;gap:.32em;}
.e-embroidered .banner-stack{padding-left:1.7rem;padding-right:1.7rem;}
.bn-pre{font-family:'EB Garamond';font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:#8a7565;line-height:1.6;max-width:20ch;}
.bn-name{display:inline-block;max-width:100%;line-height:1.08;color:#231a16;white-space:pre-line;margin:.08em 0;}
.bn-date{font-family:'EB Garamond';font-size:.7rem;letter-spacing:.12em;color:#8a7565;line-height:1.6;}
.ltr-script{font-family:'Pinyon Script',cursive;font-size:clamp(2rem,6vw,3rem);}
.ltr-flourish{font-family:'Tangerine',cursive;font-weight:700;font-size:clamp(2.8rem,9vw,4.2rem);line-height:1.05;}
.ltr-serif{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(1.5rem,4.5vw,2.1rem);letter-spacing:.02em;}
.ltr-modern{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.5rem,4.5vw,2.1rem);}
.ltr-vibes{font-family:'Great Vibes',cursive;font-size:clamp(2.2rem,6.5vw,3.2rem);line-height:1.1;}
.ltr-cinzel{font-family:'Cinzel',serif;font-weight:600;font-size:clamp(1.3rem,3.6vw,1.8rem);letter-spacing:.06em;text-transform:uppercase;}
.ltr-playfair{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(1.6rem,4.5vw,2.2rem);}
.ltr-custom{font-size:clamp(1.5rem,4.5vw,2.1rem);line-height:1.1;}
.sz-160{aspect-ratio:7/15;} .sz-180{aspect-ratio:7/17;} .sz-200{aspect-ratio:7/19;}