/* jkf-home.css: homepage sections from Website features (film grain, marquee, location board, reviews, collage story, CTA kit). Built by port_home.py, do not edit by hand. */
/* ===== Film Grain Overlay =====
   Analog grain + soft vignette for photo/video heroes. CSS only.
   Markup: drop ONE empty element inside the hero's media layer, after the photos/scrim
   and before (below) the text layer:
     <div class="fg" aria-hidden="true"></div>
   The parent must be position:relative (or absolute) so .fg can fill it.
   - Noise is an inline SVG feTurbulence tile (data URI): no network request, no canvas, no JS.
   - pointer-events:none, so it never blocks clicks.
   - Stacking: the pseudo-layers use z-index var(--grain-z). Keep the text layer above it, and keep
     .fg in the SAME stacking context as the photos (blend modes cannot see outside their context).
   - Flicker is opt-in (.fg--flicker): background-position jumps in steps(), never
     continuous motion. Off under prefers-reduced-motion. Hidden in forced-colors and print.
   Tokens (set on .fg or any ancestor):
     --grain-opacity  0 to ~.35   strength of the grain (default .16)
     --grain-size     tile size   bigger = coarser, softer grain (default 180px)
     --grain-blend    blend mode  overlay (default) | soft-light (gentler) | multiply (dirtier)
     --vignette       0 to ~.6    edge darkening (default .35, 0 = off)
     --vignette-shape ellipse size of the clear center (default 75% 70%)
     --grain-z        z-index of the layer (default 1)
     --grain-speed    flicker cycle length (default .9s, 6 jumps per cycle) */

.fg{
  --_noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.7 0 0 0 -.35 1.7 0 0 0 -.35 1.7 0 0 0 -.35 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  /* IMPORTANT: no z-index / opacity / transform / filter / contain on .fg itself. Any of those
     makes it a stacking context, and mix-blend-mode would then blend with nothing. The two
     pseudo-layers carry the z-index so they blend with the photos in the parent context. */
}
.fg::before,.fg::after{content:"";position:absolute;inset:0;z-index:var(--grain-z,1);pointer-events:none}
/* soft vignette (edge darkening) */
.fg::before{
  background:radial-gradient(ellipse var(--vignette-shape,75% 70%) at 50% 50%,transparent 45%,rgba(0,0,0,var(--vignette,.35)) 100%);
}
/* the grain itself */
.fg::after{
  background-image:var(--_noise);
  background-size:var(--grain-size,180px) var(--grain-size,180px);
  opacity:var(--grain-opacity,.16);
  mix-blend-mode:var(--grain-blend,overlay);
}

/* optional slow flicker: the tile jumps to a new offset ~6-7 times a second, like film frames */
.fg--flicker::after{animation:fg-flicker var(--grain-speed,.9s) steps(1,end) infinite}
@keyframes fg-flicker{
  0%  {background-position:0 0}
  17% {background-position:-37px 61px}
  33% {background-position:83px -29px}
  50% {background-position:-71px -97px}
  67% {background-position:23px 113px}
  83% {background-position:109px 41px}
}

/* presets */
.fg--soft{--grain-opacity:.11;--vignette:.25;--grain-blend:soft-light}
.fg--strong{--grain-opacity:.24;--vignette:.45}
.fg--no-vignette::before{display:none}

/* A/B switch for review pages: add .fg-off to any ancestor to hide the layer */
.fg-off .fg{display:none}

@media (prefers-reduced-motion:reduce){.fg--flicker::after{animation:none}}
@media (forced-colors:active),print{.fg{display:none}}

.hero .fg{--grain-opacity:.2;--grain-size:170px;--vignette:.38;--vignette-shape:85% 80%;--grain-speed:1.1s}
@media(max-width:900px){.hero .fg{--grain-size:130px;--vignette:.3}}
@media(max-width:480px){.hero-slide-dark{background:linear-gradient(to right,rgba(4,12,9,.9) 0%,rgba(4,12,9,.74) 100%)}}
/* ===== Marquee Band =====
   Infinite scrolling band of words, logos or photos. CSS animation only; JS just clones the
   items so the loop is seamless and adds a pause button. Pauses on hover and focus.
   Reduced motion: the band becomes a still, wrapping row. Variants: .mq--tilt, .mq--reverse, .mq--logos.
   Skin: --mq-* tokens. Default skin = Café Mia. Also covers "logo / press marquee" (D2). */
.mq{
  --mq-bg:#F71BB3; --mq-ink:#1A130E; --mq-sep:#FFF9F5; --mq-speed:38s; --mq-gap:28px;
  --mq-font:italic 800 clamp(26px,4vw,44px)/1 "Playfair Display",Georgia,serif;
  position:relative; background:var(--mq-bg); color:var(--mq-ink); overflow:hidden; padding-block:18px;
  contain:inline-size; min-width:0; max-width:100%; /* the long track must never widen a grid/flex parent */
}
.mq__track{display:flex;width:max-content;animation:mq-move var(--mq-speed) linear infinite}
.mq--reverse .mq__track{animation-direction:reverse}
.mq__group{display:flex;align-items:center;gap:var(--mq-gap);padding-right:var(--mq-gap);margin:0;list-style:none;padding-left:0}
.mq__item{font:var(--mq-font);white-space:nowrap;display:flex;align-items:center;gap:var(--mq-gap)}
.mq__item::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--mq-sep);flex:none}
.mq__item img{display:block;height:clamp(40px,6vw,64px);width:auto;border-radius:12px}
.mq--logos .mq__item::after{display:none}
.mq--logos .mq__item img{height:34px;border-radius:0;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.mq--logos .mq__item img:hover{filter:none;opacity:1}
.mq:hover .mq__track,.mq:focus-within .mq__track,.mq.is-paused .mq__track{animation-play-state:paused}
.mq--tilt{transform:rotate(-2deg);margin-inline:-2%;box-shadow:0 10px 30px -14px rgba(0,0,0,.35)}
.mq__pause{position:absolute;right:10px;top:50%;translate:0 -50%;z-index:2;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:var(--mq-ink);color:var(--mq-bg);display:grid;place-items:center;opacity:.0;transition:opacity .2s}
.mq:hover .mq__pause,.mq__pause:focus-visible,.mq.is-paused .mq__pause{opacity:.9}
.mq__pause:focus-visible{outline:2px solid var(--mq-ink);outline-offset:2px}
.mq__pause svg{width:14px;height:14px}
@keyframes mq-move{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .mq__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;padding-inline:16px}
  .mq__group[aria-hidden="true"]{display:none}
  .mq__group{flex-wrap:wrap;justify-content:center;row-gap:10px}
  .mq__pause{display:none}
}

/* ===== Location Board =====
   Bento "local info board" for multi-store businesses. One <article class="lb__store"> per store, each a grid of tiles:
   photo · name + live status + hours · shop (primary button) · address + directions · tap-to-call · delivery note.
   Source order = visual order on phones. Tiles reflow with a container query on each store, so the board works
   in any column width. No map iframes. Live status + today's hours row come from _shared/store-hours.js.
   Skin: override the --lb-* tokens (and optional tile modifiers) on .lb or a wrapper class. */
.lb{
  --lb-bg:#f5f4f0; --lb-ink:#1b1b1b; --lb-muted:#555; --lb-line:rgba(0,0,0,.12);
  --lb-tile:#fff; --lb-tile-ink:var(--lb-ink);
  --lb-info:#1b1b1b; --lb-info-ink:#f5f4f0; --lb-info-muted:#c4c4c0;
  --lb-shop:#e8e3d6; --lb-shop-ink:#1b1b1b;
  --lb-call:#fff; --lb-call-ink:#1b1b1b;
  --lb-deliv:#2f4a3f; --lb-deliv-ink:#f5f4f0;
  --lb-btn:#1b1b1b; --lb-btn-ink:#fff; --lb-btn-hover:#000;
  --lb-open:#2e9b4f; --lb-closed:#9a9a9a; --lb-focus:#1b6bd6;
  --lb-display:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --lb-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --lb-label-font:var(--lb-body); --lb-head-weight:800;
  --lb-radius:18px; --lb-gap:12px; --lb-max:1240px;
  background:var(--lb-bg); color:var(--lb-ink); font:16px/1.55 var(--lb-body);
  padding:clamp(48px,7vw,96px) clamp(16px,3vw,32px);
}
.lb *,.lb *::before,.lb *::after{box-sizing:border-box}
.lb__in{max-width:var(--lb-max);margin:0 auto;display:grid;gap:clamp(28px,4vw,44px)}
.lb :focus-visible{outline:3px solid var(--lb-focus);outline-offset:3px;border-radius:8px}

/* header */
.lb__head{display:grid;gap:12px;max-width:62ch}
.lb__eyebrow{margin:0;font:600 12.5px/1.2 var(--lb-label-font);letter-spacing:.18em;text-transform:uppercase;color:var(--lb-muted)}
.lb__head h2{margin:0;font:var(--lb-head-weight) clamp(32px,5vw,58px)/1.02 var(--lb-display);letter-spacing:-.01em;text-wrap:balance}
.lb__head p:not(.lb__eyebrow){margin:0;color:var(--lb-muted);font-size:clamp(16px,1.4vw,18px)}

/* one store = one container */
.lb__stores{display:grid;gap:clamp(28px,4vw,48px)}
.lb__store{container:lb-store / inline-size}
.lb__tiles{display:grid;gap:var(--lb-gap);grid-template-columns:minmax(0,1fr)}

/* tiles */
.lb__tile{margin:0;border-radius:var(--lb-radius);padding:clamp(18px,2.2vw,26px);background:var(--lb-tile);color:var(--lb-tile-ink);
  border:1px solid var(--lb-line);display:flex;flex-direction:column;gap:10px;min-width:0}
.lb__tile h3,.lb__tile h4{margin:0}
.lb__tile h4{font:600 12px/1.2 var(--lb-label-font);letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.lb__tile p{margin:0}
.lb__tile address{font-style:normal}

.lb__photo{padding:0;overflow:hidden;position:relative;aspect-ratio:4/3;border:0;background:var(--lb-info)}
.lb__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--lb-pos,50% 50%)}
.lb__chip{position:absolute;left:14px;bottom:14px;padding:7px 12px;border-radius:50px;background:var(--lb-info);color:var(--lb-info-ink);
  font:600 11.5px/1 var(--lb-label-font);letter-spacing:.14em;text-transform:uppercase}

.lb__info{background:var(--lb-info);color:var(--lb-info-ink);border-color:transparent}
.lb__info h3{font:var(--lb-head-weight) clamp(28px,3.4vw,40px)/1.02 var(--lb-display);letter-spacing:-.005em}
.lb__info a{color:inherit}

/* live status pill (text written by store-hours.js) */
.lb__status{display:inline-flex;align-self:flex-start;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:7px 13px;border-radius:50px;
  background:rgba(255,255,255,.1);font:600 12px/1.2 var(--lb-label-font);letter-spacing:.1em;text-transform:uppercase}
.lb__status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lb-closed)}
.lb__status.is-open::before{background:var(--lb-open);box-shadow:0 0 0 3px color-mix(in srgb,var(--lb-open) 30%,transparent)}
.lb__status [data-status-detail]{text-transform:none;letter-spacing:.02em;color:var(--lb-info-muted)}
.lb__status [data-status-detail]:empty{display:none}

.lb__hours{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:auto}
.lb__hours th,.lb__hours td{padding:8px 0;border-top:1px solid rgba(128,128,128,.35);border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.lb__hours th{text-align:left;font-weight:400;color:var(--lb-info-muted)}
.lb__hours td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb__hours tr.is-today th,.lb__hours tr.is-today td{color:var(--lb-info-ink);font-weight:700}
.lb__hours tr.is-today th::after{content:"Today";margin-left:8px;padding:2px 8px;border-radius:50px;background:var(--lb-open);color:#fff;
  font:700 10px/1.6 var(--lb-label-font);letter-spacing:.12em;text-transform:uppercase;vertical-align:1px}

.lb__shop{background:var(--lb-shop);color:var(--lb-shop-ink);border-color:transparent;justify-content:space-between}
.lb__call{background:var(--lb-call);color:var(--lb-call-ink);container-type:inline-size}
.lb__deliv{background:var(--lb-deliv);color:var(--lb-deliv-ink);border-color:transparent}
.lb__deliv a,.lb__call a,.lb__addr a,.lb__shop a{color:inherit}

/* links + buttons */
.lb__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:50px;
  background:var(--lb-btn);color:var(--lb-btn-ink)!important;text-decoration:none;font:700 15px/1.1 var(--lb-label-font);text-align:center}
.lb__btn:hover{background:var(--lb-btn-hover)}
.lb__btn svg,.lb__link svg{width:18px;height:18px;flex:none}
.lb__link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.lb__link:hover{text-decoration-thickness:3px}
.lb__phone{display:inline-flex;align-items:center;min-height:44px;font:var(--lb-head-weight) 26px/1.1 var(--lb-display);font-size:clamp(19px,9.5cqi,30px);
  text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb__phone:hover{text-decoration:underline;text-underline-offset:5px}
.lb__note{font-size:14.5px;opacity:.95}
.lb__actions{display:flex;flex-direction:column;gap:6px}
.lb__vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- layouts (container queries on each store) ---- */
@container lb-store (min-width:600px){
  .lb__tiles{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"photo info" "shop shop" "addr call" "deliv deliv"}
  .lb__photo{grid-area:photo;aspect-ratio:auto;min-height:260px}
  .lb__info{grid-area:info} .lb__shop{grid-area:shop} .lb__addr{grid-area:addr} .lb__call{grid-area:call} .lb__deliv{grid-area:deliv}
}
@container lb-store (min-width:960px){
  .lb__tiles{grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));
    grid-template-areas:"photo info info shop" "photo addr call deliv"}
  .lb__store--flip .lb__tiles{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);
    grid-template-areas:"info info shop photo" "addr call deliv photo"}
  .lb__photo{min-height:100%}
}

/* motion: only when the visitor allows it */
.lb__nw{white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  .lb__btn{transition:background-color .18s ease,transform .18s ease}
  .lb__btn:hover{transform:translateY(-1px)}
  .lb__photo img{transition:transform .6s ease}
  .lb__store:hover .lb__photo img{transform:scale(1.03)}
}
@media (forced-colors:active){ .lb__tile{border:1px solid CanvasText} .lb__btn{border:2px solid ButtonText} }


/* Fonts: the live site already self-hosts these; only needed in the workshop. */






/* ===== JKF skin (ship this block with location-board.css) =====
   Maps to the live site's tokens when they exist (--green, --bark...), with literal fallbacks. */
.lb--jkf{
  --lb-bg:var(--cream,#edf2ee); --lb-ink:var(--bark,#0a1410); --lb-muted:#2a4238; --lb-line:rgba(10,50,40,.13);
  --lb-tile:var(--parch,#f4f8f5); --lb-tile-ink:#0a1410;
  --lb-info:var(--panel,#0f1f1b); --lb-info-ink:#edf2ee; --lb-info-muted:#b4cabe;
  --lb-shop:var(--green-neon,#f7ee87); --lb-shop-ink:#0a1410;
  --lb-call:var(--bark,#0a1410); --lb-call-ink:#edf2ee;
  --lb-deliv:#7a5230; --lb-deliv-ink:#f2f5f2;
  --lb-btn:var(--green,#006838); --lb-btn-ink:#fff; --lb-btn-hover:var(--green-dark,#004d2a);
  --lb-open:#36b149; --lb-closed:#7d8f87; --lb-focus:#004d2a;
  --lb-display:'Grover','Playfair Display',Georgia,serif; --lb-body:'Ministry','DM Sans',system-ui,sans-serif; --lb-label-font:'Ministry','DM Sans',system-ui,sans-serif;
  --lb-head-weight:800; --lb-radius:14px; --lb-gap:10px;
  font-weight:300;
}
.lb--jkf .lb__info,.lb--jkf .lb__call,.lb--jkf .lb__deliv,.lb--jkf .lb__photo{--lb-focus:#f7ee87}
.lb--jkf .lb__eyebrow{display:flex;align-items:center;gap:12px;color:var(--green,#006838);font-weight:500;letter-spacing:.2em}
.lb--jkf .lb__eyebrow img{width:38px;height:auto}
.lb--jkf .lb__head h2{font-weight:900;color:var(--green-dark,#004d2a);font-size:clamp(36px,6vw,68px)}
.lb--jkf .lb__head h2 em{font-style:normal;color:var(--green,#006838);box-shadow:inset 0 -.22em 0 #f7ee87}
.lb--jkf .lb__head p:not(.lb__eyebrow){color:#2a4238;font-weight:300}
.lb--jkf .lb__tile h4{font-weight:500;letter-spacing:.2em;font-size:12px}
.lb--jkf .lb__note{font-weight:500}
.lb--jkf .lb__btn{font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:14px}
.lb--jkf .lb__link{font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.lb--jkf .lb__status,.lb--jkf .lb__chip{font-weight:500}
/* rugged details: a wood rule under the store name, a stamped chip, gold phone number */
.lb--jkf .lb__info h3{font-weight:900;padding-bottom:12px;border-bottom:3px solid #7a5230}
.lb--jkf .lb__chip{background:#f7ee87;color:#0a1410;border:2px solid #0a1410;border-radius:6px;transform:rotate(-2deg)}
.lb--jkf .lb__call .lb__phone{color:#f7ee87}
.lb--jkf .lb__deliv h4::before{content:"";display:inline-block;width:18px;height:2px;margin-right:10px;vertical-align:.3em;background:#f7ee87}
.lb--jkf .lb__hours tr.is-today th::after{background:#36b149;color:#0a1410}
.lb--jkf .lb__shop .lb__btn{box-shadow:0 0 0 2px #0a1410}


/* ===== Review Carousel =====
   Rating summary on the left, a swipeable rail of review cards on the right. Gently auto-advances
   (stops on hover, focus, touch, or the pause button; never auto-advances with reduced motion).
   Reviews come from the JSON block in the page, so updating them never touches markup.
   ONLY use real reviews, quoted as written, with the reviewer's first name or initial as shown on Google. */
.rc{
  --rc-bg:#FFF0F5; --rc-card:#fff; --rc-ink:#1A130E; --rc-muted:#5F5145; --rc-accent:#C7158E; --rc-star:#E8B75E; --rc-btn:#F71BB3; --rc-line:#f3c9df;
  --rc-display:"Playfair Display",Georgia,serif; --rc-body:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --rc-card-w:clamp(260px,28vw,340px); --rc-interval:6000;
  background:var(--rc-bg); color:var(--rc-ink); font-family:var(--rc-body); padding:clamp(56px,8vw,96px) 0;
}
.rc__wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-left:20px}
.rc__sum{display:grid;gap:14px;padding-right:20px}
.rc__tag{font:500 12px/1 var(--rc-body);letter-spacing:.2em;text-transform:uppercase;color:var(--rc-accent)}
.rc__sum h2{margin:0;font:800 clamp(30px,3.6vw,42px)/1.08 var(--rc-display);letter-spacing:-.01em;text-wrap:balance}
.rc__score{display:flex;align-items:center;gap:12px}
.rc__score b{font:800 52px/1 var(--rc-display)}
.rc__score small{display:block;color:var(--rc-muted);font-size:14px}
.rc__stars{display:flex;gap:2px;color:var(--rc-star)}
.rc__stars svg{width:18px;height:18px}
.rc__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.rc__btn{display:inline-flex;align-items:center;padding:12px 18px;border-radius:999px;font:700 14px/1 var(--rc-body);text-decoration:none;color:var(--rc-ink)}
.rc__btn--fill{background:var(--rc-btn)} .rc__btn--line{box-shadow:inset 0 0 0 1.5px var(--rc-ink)}
.rc__btn:focus-visible,.rc__nav button:focus-visible,.rc__rail:focus-visible{outline:2px solid var(--rc-accent);outline-offset:3px}
.rc__rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--rc-card-w);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 20px 22px 4px;scrollbar-width:none;overscroll-behavior-x:contain}
.rc__rail::-webkit-scrollbar{display:none}
.rc__card{scroll-snap-align:start;margin:0;display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:22px;border-radius:20px;background:var(--rc-card);
  box-shadow:0 18px 40px -26px rgba(199,21,142,.35);min-height:250px;position:relative}
.rc__card blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--rc-ink)}
.rc__card blockquote::before{content:"\201C";display:block;font:800 46px/.6 var(--rc-display);color:var(--rc-btn);margin-bottom:8px}
.rc__who{display:flex;align-items:center;gap:10px;font-size:14px}
.rc__who i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--rc-body);font-style:normal;background:#FFB8DC;color:var(--rc-ink)}
.rc__who span{color:var(--rc-muted);display:block;font-size:12.5px}
.rc__sample{position:absolute;top:14px;right:14px;font:700 10px/1 var(--rc-body);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:#1A130E;color:#fff}
.rc__nav{display:flex;align-items:center;gap:10px;padding:0 20px 0 4px}
.rc__nav button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--rc-ink);background:transparent;color:var(--rc-ink);cursor:pointer;display:grid;place-items:center}
.rc__nav button svg{width:16px;height:16px}
.rc__nav button:hover{background:var(--rc-ink);color:var(--rc-bg)}
.rc__prog{flex:1;height:3px;border-radius:3px;background:var(--rc-line);overflow:hidden}
.rc__prog i{display:block;height:100%;width:var(--w,20%);margin-left:var(--x,0%);background:var(--rc-accent);border-radius:3px}
@media (max-width:820px){ .rc__wrap{grid-template-columns:minmax(0,1fr);padding-right:0} .rc__rail{padding-left:0} }

/* ===== Collage Story =====
   Anti-"AI template" story section: big pull quote with a hand-drawn underline, a short story
   paragraph, a signature line and one link, next to a collage of overlapping, slightly rotated
   photos in print frames. Source order = reading order (text first, then photos).
   Phones (<860px): single column, photos become a plain 2-up grid with no overlap.
   Motion (optional, needs collage-story.js): photos settle in once on scroll and the underline
   draws in. Without JS, or under prefers-reduced-motion, everything is simply visible.
   Tokens (set on .cs):
     --cs-bg, --cs-ink, --cs-ink-m (body text), --cs-accent (eyebrow + link), --cs-accent-ink (link text)
     --cs-mark (underline color, decorative), --cs-frame (photo border), --cs-tape, --cs-stamp-bg, --cs-stamp-ink
     --cs-quote-font, --cs-body-font, --cs-label-font
     --cs-mark-offset (nudges the underline up/down; depends on the display font's metrics)
   Per photo: style="--r:-2deg" (rotation) and "--d:.1s" (settle-in delay). */

.cs{
  --cs-bg:#f5f1ea; --cs-ink:#1d1a16; --cs-ink-m:#3d3830; --cs-accent:#8a3a1c; --cs-accent-ink:#fff;
  --cs-mark:#e0a23a; --cs-frame:#fff; --cs-tape:rgba(240,214,140,.9); --cs-stamp-bg:#1d1a16; --cs-stamp-ink:#f5f1ea;
  --cs-quote-font:italic 800 clamp(34px,4.4vw,60px)/1.04 Georgia,"Times New Roman",serif;
  --cs-body-font:400 17px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif;
  --cs-label-font:600 12px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--cs-bg); color:var(--cs-ink);
  padding:clamp(56px,8vw,112px) clamp(16px,5vw,64px);
  overflow:hidden; /* rotated frames can poke out a few px; never let them cause horizontal scroll */
}
.cs *,.cs *::before,.cs *::after{box-sizing:border-box}
.cs__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,84px);align-items:center}

/* ---- text column ---- */
.cs__eyebrow{margin:0 0 clamp(40px,4.4vw,60px);font:var(--cs-label-font);letter-spacing:.2em;text-transform:uppercase;color:var(--cs-accent)}
.cs__quote{position:relative;margin:0 0 28px;padding:0;transform:rotate(-1deg);transform-origin:left center}
.cs__quote p{margin:0;font:var(--cs-quote-font);color:var(--cs-ink);text-wrap:balance}
.cs__quote::before{ /* oversized open-quote mark, offset up and left */
  content:"\201C"; position:absolute; left:-.04em; top:-.36em; font:var(--cs-quote-font); font-size:clamp(96px,10vw,150px); line-height:1;
  color:var(--cs-mark); opacity:.9; pointer-events:none; z-index:0;
}
.cs__quote p{position:relative;z-index:1}
.cs__mark{position:relative;white-space:nowrap}
.cs__scribble{position:absolute;left:-4%;bottom:var(--cs-mark-offset,-.08em);width:108%;height:.34em;overflow:visible;color:var(--cs-mark);z-index:-1;pointer-events:none}
.cs__scribble path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.cs__story{margin:0 0 24px;font:var(--cs-body-font);color:var(--cs-ink-m);max-width:52ch}
.cs__sign{margin:0 0 28px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-top:14px;border-top:2px solid currentColor;max-width:max-content;color:var(--cs-ink)}
.cs__name{font:var(--cs-quote-font);font-size:22px;line-height:1.2}
.cs__role{font:var(--cs-label-font);letter-spacing:.12em;text-transform:uppercase;color:var(--cs-ink-m)}
.cs__link{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:50px;background:var(--cs-accent);color:var(--cs-accent-ink);font:var(--cs-label-font);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:transform .15s,box-shadow .2s}
.cs__link::after{content:"";width:16px;height:2px;background:currentColor;box-shadow:none;transition:width .2s}
.cs__link:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(0,0,0,.5)}
.cs__link:hover::after{width:24px}
.cs__link:focus-visible{outline:3px solid var(--cs-ink);outline-offset:3px}

/* ---- collage (desktop: 12x12 grid, photos overlap each other, never the text) ---- */
.cs__collage{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));aspect-ratio:1/1.02}
.cs__photo{
  --r:0deg; position:relative; margin:0; display:flex; flex-direction:column; min-height:0;
  background:var(--cs-frame); padding:clamp(6px,.7vw,10px); border-radius:3px;
  box-shadow:0 2px 4px rgba(0,0,0,.12),0 22px 44px -22px rgba(0,0,0,.55);
  transform:rotate(var(--r));
}
.cs__photo img{display:block;width:100%;height:100%;flex:1;min-height:0;object-fit:cover;border-radius:1px;background:#ccc}
.cs__photo figcaption{padding:8px 4px 2px;font:var(--cs-label-font);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-ink)}
.cs__nw{white-space:nowrap}
.cs__photo--tape::before{ /* paper tape strip */
  content:""; position:absolute; top:-12px; left:50%; width:78px; height:24px; translate:-50% 0; rotate:-4deg;
  background:var(--cs-tape); box-shadow:0 1px 2px rgba(0,0,0,.12); z-index:2;
}
.cs__photo--a{grid-area:1/1/8/9;z-index:1}
.cs__photo--b{grid-area:6/5/12/13;z-index:2}
.cs__photo--b figcaption{text-align:right} /* photo D overlaps B's left edge; keep B's caption clear of it */
.cs__photo--c{grid-area:1/9/5/13;z-index:1;margin-top:8%}
.cs__photo--d{grid-area:8/1/13/6;z-index:3}
.cs__stamp{
  grid-area:12/6/13/13; z-index:4; align-self:end; justify-self:end; margin:0 0 -18px; white-space:nowrap; /* hangs below photo B so it never covers B's caption */
  padding:10px 16px; border-radius:4px; transform:rotate(-3deg);
  background:var(--cs-stamp-bg); color:var(--cs-stamp-ink); font:var(--cs-label-font); letter-spacing:.14em; text-transform:uppercase; text-align:center;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6);
}

/* ---- settle-in motion (only after collage-story.js arms it; never under reduced motion) ---- */
@media (prefers-reduced-motion:no-preference){
  .cs--armed .cs__photo{opacity:0;transform:translateY(28px) rotate(calc(var(--r) * 2.2))}
  .cs--armed .cs__stamp{opacity:0;transform:translateY(12px) rotate(-8deg)}
  .cs--armed .cs__scribble path{stroke-dasharray:1;stroke-dashoffset:1} /* path has pathLength="1" */
  .cs--armed.is-in .cs__photo{opacity:1;transform:rotate(var(--r));transition:opacity .6s ease var(--d,0s),transform .9s cubic-bezier(.2,.75,.25,1) var(--d,0s)}
  .cs--armed.is-in .cs__stamp{opacity:1;transform:rotate(-3deg);transition:opacity .5s ease .55s,transform .7s cubic-bezier(.2,.75,.25,1) .55s}
  .cs--armed.is-in .cs__scribble path{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease .35s}
}

/* ---- phones and small tablets: stack, photos become a plain 2-up grid ---- */
@media (max-width:860px){
  .cs__inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .cs__quote{transform:none;margin-left:.15em}
  .cs__collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;aspect-ratio:auto;gap:14px}
  .cs__photo{grid-area:auto!important;margin:0!important;aspect-ratio:1/1;--r-m:calc(var(--r) * .4);transform:rotate(var(--r-m))}
  .cs--armed.is-in .cs__photo{transform:rotate(var(--r-m))}
  .cs__photo--tape::before{width:56px;height:18px;top:-9px}
  .cs__photo--b figcaption{text-align:left}
  .cs__stamp{grid-area:auto;grid-column:1/-1;justify-self:center;align-self:auto;margin:6px 0 0;white-space:normal}
}
@media (max-width:420px){
  .cs__photo figcaption{font-size:10px;letter-spacing:.08em}
  .cs__name{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .cs__link,.cs__link::after{transition:none}
}
@media (forced-colors:active){.cs__scribble{display:none}.cs__photo{border:1px solid CanvasText}}






/* ===== JKF skin (ship this block with collage-story.css) ===== */
.cs--jkf{
  --cs-bg:#edf2ee;          /* cream */
  --cs-ink:#0a1410;         /* text / bark */
  --cs-ink-m:#2a4238;       /* text-m */
  --cs-accent:#006838;      /* green: eyebrow + pill link */
  --cs-accent-ink:#fff;
  --cs-mark:#36b149;        /* green-bright: quote mark + hand-drawn underline (decorative) */
  --cs-frame:#fff;
  --cs-tape:rgba(247,238,135,.92); /* neon gold paper tape */
  --cs-stamp-bg:#0a1410; --cs-stamp-ink:#f7ee87;
  --cs-quote-font:normal 800 clamp(32px,3.7vw,50px)/1.04 'Grover','Playfair Display',Georgia,serif;
  --cs-body-font:300 17px/1.75 'Ministry','DM Sans',system-ui,sans-serif;
  --cs-label-font:500 12px/1.3 'Ministry','Space Grotesk',system-ui,sans-serif;
  --cs-mark-offset:.12em;   /* Grover has a deep descent, lift the underline */
}
.cs--jkf .cs__quote em{font-style:normal;color:#006838}
.cs--jkf .cs__photo figcaption{color:#7a5230} /* wood; 5.9:1 on white frame */
.cs--jkf .cs__sign{border-top-color:#0a1410}


/* ===== CTA Kit =====
   One component, several layouts (modifier classes). Built so far: .ctk--picker (store / delivery picker).
   Planned, not built yet: .ctk--split (path splitter), .ctk--signup (offer signup), .ctk--band (single-line banner).

   Rules every layout follows:
   - One filled button per card, plus at most one quiet secondary link.
   - Compliance line sits directly under the buttons, at 14px or larger, 4.5:1 contrast.
   - No gradients behind text, no frosted glass, no motion beyond hover color changes.
   Skin: override the --ctk-* tokens on .ctk or a wrapper class. */
.ctk{
  --ctk-bg:#f4f2ed; --ctk-ink:#161616; --ctk-muted:#4f4f4f; --ctk-line:rgba(0,0,0,.14);
  --ctk-card:#fff; --ctk-card-ink:#161616; --ctk-card-muted:#4f4f4f;
  --ctk-alt:#161616; --ctk-alt-ink:#f4f2ed; --ctk-alt-muted:#c9c9c4;
  --ctk-btn:#161616; --ctk-btn-ink:#fff; --ctk-btn-hover:#000;
  --ctk-alt-btn:#f4f2ed; --ctk-alt-btn-ink:#161616; --ctk-alt-btn-hover:#fff;
  --ctk-open:#2e9b4f; --ctk-closed:#8a8a8a; --ctk-focus:#1b6bd6; --ctk-alt-focus:#ffd34d;
  --ctk-display:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --ctk-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ctk-label:var(--ctk-body); --ctk-head-weight:800;
  --ctk-radius:20px; --ctk-max:1240px;
  background:var(--ctk-bg); color:var(--ctk-ink); font:16px/1.55 var(--ctk-body);
  padding:clamp(56px,8vw,112px) clamp(16px,3vw,32px);
}
.ctk *,.ctk *::before,.ctk *::after{box-sizing:border-box}
.ctk__in{max-width:var(--ctk-max);margin:0 auto;display:grid;gap:clamp(32px,4.5vw,56px)}
.ctk :focus-visible{outline:3px solid var(--ctk-focus);outline-offset:3px;border-radius:8px}
.ctk__vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* statement header */
.ctk__head{display:grid;gap:16px;max-width:1080px}
.ctk__eyebrow{margin:0;font:600 12.5px/1.2 var(--ctk-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ctk-muted)}
.ctk__title{margin:0;font:var(--ctk-head-weight) clamp(40px,7.4vw,96px)/.95 var(--ctk-display);letter-spacing:-.015em;text-wrap:balance}
.ctk__lead{margin:0;max-width:58ch;color:var(--ctk-muted);font-size:clamp(16px,1.5vw,19px)}

/* ---- layout: store picker ---- */
.ctk__cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ctk__card{display:flex;flex-direction:column;min-width:0;border-radius:var(--ctk-radius);overflow:hidden;
  background:var(--ctk-card);color:var(--ctk-card-ink);border:1px solid var(--ctk-line)}
.ctk__media{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ctk-alt)}
.ctk__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:clamp(20px,2.4vw,28px)}
.ctk__kicker{margin:0;font:600 12px/1.2 var(--ctk-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ctk-card-muted)}
.ctk__card h3{margin:0;font:var(--ctk-head-weight) clamp(26px,2.8vw,34px)/1.05 var(--ctk-display)}
.ctk__meta{margin:0;color:var(--ctk-card-muted)}
.ctk__meta address{font-style:normal}

.ctk__status{display:inline-flex;align-self:flex-start;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0;
  font:600 12.5px/1.3 var(--ctk-label);letter-spacing:.08em;text-transform:uppercase}
.ctk__status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ctk-closed)}
.ctk__status.is-open::before{background:var(--ctk-open)}
.ctk__status [data-status-detail]{text-transform:none;letter-spacing:.02em;color:var(--ctk-card-muted)}
.ctk__status [data-status-detail]:empty{display:none}

.ctk__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:auto;padding-top:14px}
.ctk__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:50px;
  background:var(--ctk-btn);color:var(--ctk-btn-ink);text-decoration:none;font:700 15px/1.1 var(--ctk-label);text-align:center}
.ctk__btn:hover{background:var(--ctk-btn-hover)}
.ctk__btn svg{width:18px;height:18px;flex:none}
.ctk__quiet{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.ctk__quiet:hover{text-decoration-thickness:3px}
.ctk__fine{margin:0;font-size:14px;line-height:1.5;color:var(--ctk-card-muted)}

/* the delivery option reads as the "other path": inverted card */
.ctk__card--alt{background:var(--ctk-alt);color:var(--ctk-alt-ink);border-color:transparent;--ctk-card-muted:var(--ctk-alt-muted);--ctk-focus:var(--ctk-alt-focus)}
.ctk__card--alt .ctk__btn{background:var(--ctk-alt-btn);color:var(--ctk-alt-btn-ink)}
.ctk__card--alt .ctk__btn:hover{background:var(--ctk-alt-btn-hover)}
.ctk__facts{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.ctk__facts li{position:relative;padding-left:22px}
.ctk__facts li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:currentColor}

.ctk__nw{white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  .ctk__btn{transition:background-color .18s ease}
}
@media (forced-colors:active){ .ctk__card{border:1px solid CanvasText} .ctk__btn{border:2px solid ButtonText} }


/* Fonts: the live site already self-hosts these; only needed in the workshop. */






/* ===== JKF skin (ship this block with cta-kit.css) =====
   Maps to the live site's tokens when they exist (--green, --bark...), with literal fallbacks. */
.ctk--jkf{
  --ctk-bg:var(--bark,#0a1410); --ctk-ink:#edf2ee; --ctk-muted:#b4cabe; --ctk-line:transparent;
  --ctk-card:var(--parch,#f4f8f5); --ctk-card-ink:#0a1410; --ctk-card-muted:#2a4238;
  --ctk-alt:#1c3028; --ctk-alt-ink:#edf2ee; --ctk-alt-muted:#b4cabe;
  --ctk-btn:var(--green,#006838); --ctk-btn-ink:#fff; --ctk-btn-hover:var(--green-dark,#004d2a);
  --ctk-alt-btn:#36b149; --ctk-alt-btn-ink:#0a1410; --ctk-alt-btn-hover:#f7ee87;
  --ctk-open:#36b149; --ctk-closed:#7d8f87; --ctk-focus:#004d2a; --ctk-alt-focus:#f7ee87;
  --ctk-display:'Grover','Playfair Display',Georgia,serif; --ctk-body:'Ministry','DM Sans',system-ui,sans-serif; --ctk-label:'Ministry','DM Sans',system-ui,sans-serif;
  --ctk-head-weight:900; --ctk-radius:14px;
  font-weight:300;
}
.ctk--jkf .ctk__head{--ctk-focus:#f7ee87}
.ctk--jkf .ctk__eyebrow{color:#f7ee87;font-weight:500;letter-spacing:.22em}
.ctk--jkf .ctk__title em{font-style:normal;color:#f7ee87}
.ctk--jkf .ctk__lead{font-weight:300}
.ctk--jkf .ctk__card{border-top:6px solid #7a5230}
.ctk--jkf .ctk__card--alt{border-top-color:#f7ee87}
.ctk--jkf .ctk__kicker{color:var(--green,#006838);font-weight:500;letter-spacing:.2em}
.ctk--jkf .ctk__card--alt .ctk__kicker{color:#f7ee87}
.ctk--jkf .ctk__meta,.ctk--jkf .ctk__fine,.ctk--jkf .ctk__facts{font-weight:500}
.ctk--jkf .ctk__status{font-weight:500}
.ctk--jkf .ctk__btn{font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:14px}
.ctk--jkf .ctk__quiet{font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--green-dark,#004d2a)}
.ctk--jkf .ctk__fine{padding-top:12px;border-top:1px dashed rgba(10,50,40,.3)}
.ctk--jkf .ctk__card--alt .ctk__fine{border-top-color:rgba(237,242,238,.3)}
.ctk--jkf .ctk__facts li::before{background:#36b149}


/* ===== Jungle Kingdom Flower skin for homepage sections =====
   Brand Marquee (sections/marquee-band) + Review Carousel (carousels/review-carousel).
   Load after marquee-band.css / review-carousel.css. No glass, no gradients. */

/* Brand marquee: product shots + brand names on the dark panel green */
.mq.jkf-brands{--mq-bg:#0f1f1b;--mq-ink:#f2f5f2;--mq-sep:#36b149;--mq-speed:52s;--mq-gap:30px;
  --mq-font:800 clamp(24px,3.2vw,40px)/1 'Grover','Playfair Display',Georgia,serif;padding-block:22px;border-block:2px solid #1c3028}
.jkf-brands .mq__item a{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none;border-radius:14px;padding:4px 6px 4px 4px}
.jkf-brands .mq__item a:hover span{color:#f7ee87}
.jkf-brands .mq__item a:focus-visible{outline:3px solid #36b149;outline-offset:3px}
.jkf-brands .mq__item img{height:clamp(52px,6vw,72px);width:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:#1c3028}
.jkf-brands-head{max-width:1400px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(16px,3vw,48px) 22px;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px}
.jkf-brands-head p{margin:0 0 10px;font:700 11px/1 'Ministry',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#006838}
.jkf-brands-head h2{margin:0;font:800 clamp(30px,4vw,52px)/1.05 'Grover','Playfair Display',Georgia,serif;color:#0a1410}
.jkf-brands-head h2 em{font-style:italic;color:#006838}
.jkf-brands-head a{font:700 12px/1 'Ministry',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#006838;text-decoration:underline;text-underline-offset:5px}
[data-theme="dark"] .jkf-brands-head h2{color:#e8f0ec}
[data-theme="dark"] .jkf-brands-head p,[data-theme="dark"] .jkf-brands-head h2 em,[data-theme="dark"] .jkf-brands-head a{color:#36b149}

/* Review carousel: cream section, white cards, green actions */
.rc.jkf-reviews{--rc-bg:#edf2ee;--rc-card:#fff;--rc-ink:#0a1410;--rc-muted:#3d5c50;--rc-accent:#006838;--rc-star:#d99a00;--rc-btn:#006838;--rc-line:#cfe0d4;
  --rc-display:'Grover','Playfair Display',Georgia,serif;--rc-body:'Ministry','DM Sans',system-ui,sans-serif;--rc-card-w:clamp(270px,28vw,350px)}
.jkf-reviews .rc__wrap{max-width:1400px;grid-template-columns:minmax(0,360px) minmax(0,1fr)}
.jkf-reviews .rc__sum h2{font-size:clamp(30px,3.2vw,44px)}
@media (max-width:820px){ .jkf-reviews .rc__wrap{grid-template-columns:minmax(0,1fr)} }
.jkf-reviews .rc__tag{font-weight:700}
.jkf-reviews .rc__sum h2 em{font-style:italic;color:#006838}
.jkf-reviews .rc__btn--fill{color:#fff}
.jkf-reviews .rc__card{box-shadow:0 0 0 1px rgba(10,50,40,.1),0 18px 40px -26px rgba(0,104,56,.45)}
.jkf-reviews .rc__card blockquote::before{color:#36b149}
.jkf-reviews .rc__who i{background:#e3f1e6;color:#004d2a}
.jkf-scores{display:grid;gap:10px;margin:2px 0}
.jkf-score{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(10,50,40,.1)}
.jkf-score b{font:800 34px/1 'Grover',Georgia,serif;color:#0a1410;min-width:2.2ch}
.jkf-score span{display:grid;gap:3px;font-size:13.5px;color:#3d5c50;line-height:1.3}
.jkf-score strong{font:700 12px/1.2 'Ministry',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#0a1410}
.jkf-score svg{width:15px;height:15px;color:#d99a00}
.jkf-score .jkf-stars{display:flex;gap:1px}
[data-theme="dark"] .rc.jkf-reviews{--rc-bg:#0f1f1b;--rc-card:#16302a;--rc-ink:#e8f0ec;--rc-muted:#a9c3b8;--rc-line:#2a4a3f;--rc-accent:#36b149}
[data-theme="dark"] .jkf-score{background:#16302a}
[data-theme="dark"] .jkf-score b,[data-theme="dark"] .jkf-score strong{color:#e8f0ec}
[data-theme="dark"] .jkf-score span{color:#a9c3b8}