/* Double Shot — element vocabulary. Marshall's picks canonized 2026-08-04.
   Icons 1A and buttons 3A are the ONLY icon/button styles (buttons live in base.css).
   Every other element below is official vocabulary with an assigned use case;
   the rule is one line above each block. Requires system/defs.js on the page. */

/* ========== ICONS (1A, the only icon style) ==========
   USE: everywhere an icon appears. Outline, round caps, a hair off true.
   Glyphs: #i-cup #i-phone #i-pin #i-chart #i-mail (extend in defs.js, same stroke). */
.ds-icon{display:inline-block;width:24px;height:24px;flex-shrink:0;}
.ds-icon svg{width:100%;height:100%;display:block;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.ds-icon.lg{width:44px;height:44px;}
.ds-icon.tilt-l svg{transform:rotate(-2.5deg);}
.ds-icon.tilt-r svg{transform:rotate(2deg);}

/* ========== MARKS ========== */
/* 2A badge coin. USE: app icon, avatar, favicon-scale brand presence. */
.mark-coin{display:inline-flex;align-items:center;justify-content:center;
  width:74px;height:96px;border-radius:22px;background:var(--paper);border:2.5px solid var(--ink);}
.mark-coin.ink{background:var(--ink);border-color:var(--ink);}
/* 2B/7D seal. USE: footer seal, invoices, cup sleeves, proposal PDFs, stickers.
   Markup recipe (defs.js provides #seal-circ + #bean + #rough1):
   <svg class="mark-seal" viewBox="0 0 130 130"><circle cx="65" cy="65" r="62"/><circle class="inner" cx="65" cy="65" r="42"/>
   <text><textPath href="#seal-circ">DOUBLE SHOT MARKETING &#183; NC TRIAD</textPath></text>
   <use href="#bean" x="49" y="41" width="32" height="48"/></svg> */
.mark-seal{width:110px;height:110px;filter:url(#rough1);opacity:.9;color:var(--ink);}
.mark-seal.roast{color:var(--orange-deep);}
.mark-seal circle{fill:none;stroke:currentColor;stroke-width:3.5;}
.mark-seal circle.inner{stroke-width:1.5;}
.mark-seal text{font-family:var(--font-mono);font-size:10.5px;letter-spacing:2.3px;fill:currentColor;}
.mark-seal use{fill:currentColor;}
/* 2C steam. USE: section accents, loading states, above the bean; never more than one per view. */
.mark-steam{stroke:var(--ink);stroke-width:3.4;fill:none;stroke-linecap:round;filter:url(#rough1);}
/* 2D coffee ring + splatter. USE: behind headlines and photos at <=50% opacity; posters; one ring per surface. */
.stain{position:absolute;pointer-events:none;mix-blend-mode:multiply;opacity:.5;z-index:0;}

/* ========== BORDERS + FRAMES ========== */
/* 4A print frame. USE: default structural frame (already the site frame). */
.frame-print{border:2.5px solid var(--ink);}
/* 4B double rule. USE: upscale print surfaces: letterheads, proposals, the letterpress poster. */
.frame-double{border:3px solid var(--ink);outline:1.5px solid var(--ink);outline-offset:4px;}
/* 4C hand wobble. USE: casual social graphics and callouts; never on UI containers. */
.frame-wobble{border:2.5px solid var(--ink);filter:url(#rough2);}
/* 4D coupon + notches. USE: offers and pricing callouts ONLY. */
.frame-coupon{border:2.5px dashed var(--ink);border-radius:14px;position:relative;background:var(--paper);}
.frame-coupon::before,.frame-coupon::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;
  background:var(--paper-deep);border:2.5px solid var(--ink);transform:translateY(-50%);}
.frame-coupon::before{left:-13px;}
.frame-coupon::after{right:-13px;}
/* 4E scalloped awning edge. USE: section caps and page headers only; one per page. */
.edge-awning{position:relative;}
.edge-awning::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:11px;
  background:radial-gradient(circle at 8px -2px, transparent 8px, var(--ink) 8.5px, var(--ink) 10.5px, transparent 11px);
  background-size:16px 12px;background-repeat:repeat-x;}

/* ========== BACKGROUNDS + TEXTURES (all take .grainy) ========== */
/* 5A .sunfade lives in base.css. USE: default orange field. */
/* 5B weathered sun-fade = .sunfade + .stained + stain SVGs. USE: big brand moments: CTA fields, posters, covers. */
.stained{position:relative;overflow:hidden;}
.stained > .stain{z-index:1;}
/* 5C halftone fade. USE: poster corners and section transitions; never behind body text. */
.bg-halftone{position:relative;background:radial-gradient(var(--orange-deep) 1.35px, transparent 1.55px);
  background-size:9px 9px;background-color:var(--paper);}
.bg-halftone::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg, transparent 20%, var(--paper) 78%);}
/* 5D faded awning stripes. USE: banners, social frames, event surfaces; never full page. */
.bg-awning{position:relative;background:repeating-linear-gradient(90deg, var(--orange) 0 34px, var(--paper) 34px 68px);}
.bg-awning::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.9;background:
  radial-gradient(120% 90% at 20% 0%, rgba(242,235,223,.5), transparent 60%),
  radial-gradient(120% 120% at 85% 115%, rgba(166,78,46,.35), transparent 60%);}
/* 5E old menu paper. USE: quiet alternate section ground, document surfaces, the letterpress poster. */
.bg-oldpaper{position:relative;background:radial-gradient(120% 120% at 50% 40%, var(--paper-deep) 40%, #DCCDB0 100%);}
/* 5F roast field. USE: dark sections and menu boards wanting warmth instead of flat ink. */
.bg-roast{position:relative;color:var(--paper);background:
  radial-gradient(100% 80% at 20% 10%, rgba(74,62,51,.85), transparent 60%),
  radial-gradient(120% 120% at 85% 110%, rgba(20,16,13,.9), transparent 65%),
  var(--ink);}
/* grain pass for any of the above */
.grainy{position:relative;}
.grainy::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23g)' opacity='0.6'/></svg>");
  opacity:.16;mix-blend-mode:multiply;}

/* ========== DIVIDERS ========== */
/* 6A bean row. USE: footers and end-of-document strips (already in components.css .foot-beans). */
/* 6B steam line. USE: playful social/email dividers.
   <svg class="div-steam" viewBox="0 0 640 26" preserveAspectRatio="none"><path d="M0 14 Q40 2 80 14 T160 14 T240 14 T320 14 T400 14 T480 14 T560 14 T640 14"/></svg> */
.div-steam{width:100%;height:26px;display:block;}
.div-steam path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;filter:url(#rough1);}
/* 6C rule + bean. USE: upscale print and on-page section breaks inside a section. */
.div-rule-bean{display:flex;align-items:center;gap:18px;}
.div-rule-bean::before,.div-rule-bean::after{content:"";flex:1;height:2.5px;background:var(--ink);}
.div-rule-bean .bean{height:18px;}
.section-ink .div-rule-bean::before,.section-ink .div-rule-bean::after,
.bg-roast .div-rule-bean::before,.bg-roast .div-rule-bean::after{background:var(--hairline-on-ink);}
/* 6D receipt tear. USE: receipts, invoices, pricing documents. */
.div-receipt{font-family:var(--font-mono);font-size:13px;letter-spacing:.6em;color:var(--ink-soft);text-align:center;}

/* ========== BADGES + STAMPS + CHIPS ========== */
/* 7A ink chip lives in base.css (.chip). USE: labels on orange fields, small tags. */
/* 7B rubber stamp. USE: approvals, offers, proposal PDFs, one per surface, always rotated. */
.badge-stamp{display:inline-block;border:3px solid var(--orange-deep);color:var(--orange-deep);
  font-family:var(--font-mono);font-weight:500;font-size:14px;letter-spacing:.22em;padding:9px 18px;
  transform:rotate(-3.5deg);filter:url(#rough1);opacity:.85;}
.badge-stamp.round{border-radius:50%;padding:20px 14px;font-size:11px;text-align:center;}
/* 7C ticket stub. USE: offers and freebies; the perforation is the promise. */
.badge-ticket{display:inline-flex;align-items:center;gap:12px;background:var(--paper-deep);border:2px solid var(--ink);
  border-radius:10px;padding:10px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;position:relative;}
.badge-ticket::after{content:"";position:absolute;right:44px;top:-2px;bottom:-2px;border-left:2px dashed var(--ink);}
/* 7D round seal = .mark-seal above, shrunk. USE: footer, invoices, cup sleeve. */

/* ========== PHOTO GRADES (on .photo-frame) ========== */
/* 8A clean warm. USE: default site photography. */
.photo-clean img{filter:saturate(.86) contrast(.97);}
/* 8B faded film. USE: about/people/place photos; the storytelling grade. */
.photo-film img{filter:saturate(.65) contrast(.9) brightness(1.06) sepia(.18);}
/* 8C orange duotone. USE: posters and social tiles; never every photo on a page. */
.photo-duotone{background:var(--orange);}
.photo-duotone img{mix-blend-mode:multiply;filter:grayscale(1) contrast(1.15) brightness(1.08);}
/* 8D ink print. USE: print documents and newspaper-feel moments. */
.photo-inkprint{background:var(--paper);}
.photo-inkprint img{mix-blend-mode:multiply;filter:grayscale(1) contrast(1.2) brightness(1.12);}

/* ========== POSTER WORLDS (compositions, not single classes) ==========
   9A sun-bleached: .sunfade.stained.grainy + Chango word + .chip + logo. USE: loud promo, social.
   9B backlit menu: .bg-roast.grainy + menu rows + cream logo. USE: services, price lists, events.
   9C letterpress: .bg-oldpaper.grainy + .frame-double inset + stacked logo + .mark-seal. USE: covers, invites, the upscale face. */
.poster{position:relative;overflow:hidden;border-radius:14px;border:2.5px solid var(--ink);box-shadow:var(--block-shadow);}