/* ==========================================================================
   KJoinery — Google review rail  (namespace .kjr, replaces every .kjrw rule)

   Two voices on purpose: the brand speaks in condensed Oswald, the customers
   speak in the platform's own UI face. White cards on a coloured band so the
   card is a figure, not a slightly-lighter patch of the background.
   ========================================================================== */

/* tokens live on both roots: the overlays render outside .kjr (a transformed
   ancestor would break position:fixed) and would otherwise inherit nothing */
.kjr,.kjr-modals{
  /* ground + brand */
  --kjr-ground:#e8e2d7;          /* raw board, warmer and cooler than cream */
  --kjr-head:#1c1917;
  --kjr-sub:#6d665c;
  --kjr-brass:#8a5e28;           /* burnished — the pale #c5a47e dies on light */
  --kjr-rule:rgba(28,25,23,.14);

  /* card interior — identical on both grounds, that is the point */
  --kjr-card:#fff;
  --kjr-edge:#e7e1d7;
  --kjr-name:#1c1917;
  --kjr-text:#413c36;
  --kjr-meta:#79726a;
  --kjr-hair:#ece7df;
  --kjr-link:#8a5e28;
  --kjr-gold:#f5a302;
  --kjr-shadow:0 1px 2px rgba(24,20,16,.07),0 8px 24px -6px rgba(24,20,16,.16);
  --kjr-shadow-h:0 2px 4px rgba(24,20,16,.09),0 18px 40px -8px rgba(24,20,16,.26);

  --kjr-card-w:372px;
  --kjr-card-h:406px;
  --kjr-gap:18px;

  --kjr-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --kjr-display:'Oswald',var(--kjr-ui);

}
.kjr{
  background:var(--kjr-ground);
  padding:clamp(54px,6.5vw,92px) 0 clamp(46px,5vw,70px);
  position:relative;
  overflow:hidden;
  /* the rail's track is thousands of px wide, which triggers mobile font
     boosting and blows every card's type up on a real phone */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* the theme leaves body a 10px right margin, which showed as a dark stripe
     beside the light band. Paint past the box without adding page width. */
  box-shadow:0 0 0 100vmax var(--kjr-ground);
  clip-path:inset(0 -100vmax);
}
.kjr-track,.kjr-card,.kjr-card *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.kjr[data-ground="dark"]{
  --kjr-ground:#12100e;
  --kjr-head:#fff;
  --kjr-sub:#9a9289;
  --kjr-brass:#c5a47e;
  --kjr-rule:rgba(255,255,255,.13);
}
.kjr *,.kjr *::before,.kjr *::after{box-sizing:border-box}
.kjr img{display:block;max-width:100%}
.kjr-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,20px)}

/* ---------- header ------------------------------------------------------ */
.kjr-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,5vw,64px);align-items:end;
  padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--kjr-rule);
}
.kjr-eyebrow{
  display:block;font-family:var(--kjr-ui);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--kjr-brass);-webkit-text-fill-color:var(--kjr-brass);margin-bottom:14px;
}
.kjr h2{
  font-family:var(--kjr-display);font-weight:400;font-size:clamp(1.65rem,3.7vw,2.7rem);
  line-height:1.08;letter-spacing:.004em;margin:0;
  color:var(--kjr-head);-webkit-text-fill-color:var(--kjr-head);
  text-transform:none!important;text-align:left!important;
}
.kjr h2 em{font-style:normal;color:var(--kjr-brass);-webkit-text-fill-color:var(--kjr-brass)}

/* signature: every reviewer's actual face, in one row */
.kjr-faces{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.kjr-mugs{display:flex;flex:0 0 auto}
.kjr-mugs img{
  width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:2px solid var(--kjr-ground);margin-left:-9px;background:var(--kjr-ground);
}
.kjr-mugs img:first-child{margin-left:0}
.kjr .kjr-faces p{
  margin:0;font-family:var(--kjr-ui);font-size:13px;line-height:1.45;font-weight:400;
  color:var(--kjr-sub);-webkit-text-fill-color:var(--kjr-sub);text-align:left;
}
.kjr-faces b{color:var(--kjr-head);-webkit-text-fill-color:var(--kjr-head);font-weight:600}

.kjr-ledger{display:flex;flex-direction:column;align-items:flex-end;line-height:1;flex:0 0 auto}
.kjr-ledger .kjr-g{line-height:0;margin-bottom:10px}
.kjr-score{
  font-family:var(--kjr-display);font-weight:400;font-size:clamp(2.7rem,6vw,3.9rem);
  color:var(--kjr-brass);-webkit-text-fill-color:var(--kjr-brass);letter-spacing:.01em;
}
.kjr-ledger .kjr-stars{
  color:var(--kjr-gold);-webkit-text-fill-color:var(--kjr-gold);
  font-size:16px;letter-spacing:.19em;margin:10px 0 9px;
}
.kjr-ledger i{
  font-style:normal;font-family:var(--kjr-ui);font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--kjr-sub);-webkit-text-fill-color:var(--kjr-sub);
}

/* ---------- rail -------------------------------------------------------- */
.kjr-rail{position:relative;margin:0 calc(clamp(16px,4vw,20px) * -1)}
.kjr-track{
  display:flex;gap:var(--kjr-gap);align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  padding:6px clamp(16px,4vw,20px) 26px;
  scrollbar-width:none;-ms-overflow-style:none;
  /* ⛔ NEVER set touch-action:pan-x here. It tells the browser this element
     handles horizontal panning ONLY, so a vertical swipe that starts on a
     card is swallowed and the page stops scrolling — the rail traps the
     finger. `auto` lets the browser read gesture direction: sideways pans
     the rail, up/down scrolls the page. */
  touch-action:auto;
  overscroll-behavior-x:contain;
  cursor:grab;
}
.kjr-track::-webkit-scrollbar{display:none}
.kjr-track.is-grabbing{cursor:grabbing;user-select:none;-webkit-user-select:none}
.kjr-track img{-webkit-user-drag:none;user-select:none}
.kjr-track:focus-visible{outline:2px solid var(--kjr-brass);outline-offset:-4px}

/* only the gutter outside the content column fades — never a word of a card */
.kjr-rail::before,.kjr-rail::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(16px,4vw,20px);
  pointer-events:none;z-index:2;
}
.kjr-rail::before{left:0;background:linear-gradient(90deg,var(--kjr-ground) 45%,rgba(0,0,0,0))}
.kjr-rail::after{right:0;background:linear-gradient(270deg,var(--kjr-ground) 45%,rgba(0,0,0,0))}

/* controls live above the rail, so nothing ever sits on top of a review */
.kjr-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 14px}
.kjr-hint{
  margin-right:auto;font-family:var(--kjr-ui);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;opacity:.72;
  color:var(--kjr-sub);-webkit-text-fill-color:var(--kjr-sub);
}
.kjr-nav{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--kjr-rule);
  background:transparent;color:var(--kjr-head);-webkit-text-fill-color:var(--kjr-head);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex:0 0 auto;
  transition:background .2s,border-color .2s,color .2s;
}
.kjr-nav:hover{background:var(--kjr-brass);border-color:var(--kjr-brass);
  color:var(--kjr-ground);-webkit-text-fill-color:var(--kjr-ground)}
.kjr-nav:focus-visible{outline:2px solid var(--kjr-brass);outline-offset:3px}
.kjr-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

/* band-theme switch: sits with the rail controls, remembers the choice */
.kjr-skin{margin-right:6px}
.kjr-skin svg{width:18px;height:18px}
.kjr-skin .kjr-moon{display:block}
.kjr-skin .kjr-sun{display:none}
.kjr[data-ground="dark"] .kjr-skin .kjr-moon{display:none}
.kjr[data-ground="dark"] .kjr-skin .kjr-sun{display:block}

/* ---------- card -------------------------------------------------------- */
.kjr-card{
  flex:0 0 var(--kjr-card-w);width:var(--kjr-card-w);height:var(--kjr-card-h);
  display:flex;flex-direction:column;
  background:var(--kjr-card);border:1px solid var(--kjr-edge);border-radius:14px;
  box-shadow:var(--kjr-shadow);overflow:hidden;
  transition:box-shadow .28s ease,transform .28s ease;
}
.kjr[data-ground="dark"] .kjr-card{border-color:rgba(255,255,255,.08)}
.kjr-card:hover{box-shadow:var(--kjr-shadow-h);transform:translateY(-3px)}

.kjr-who{display:flex;align-items:center;gap:11px;padding:19px 20px 0;flex:0 0 auto}
.kjr-mug{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;object-fit:cover;
  background:#efe9e1;
}
.kjr-mug--fb{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--kjr-display);font-size:17px;color:#8a5e28;
  -webkit-text-fill-color:#8a5e28;background:#f3ece2;
}
.kjr-who-t{min-width:0;flex:1 1 auto}
.kjr-name{
  display:block;font-family:var(--kjr-ui);font-size:15px;font-weight:600;line-height:1.25;
  color:var(--kjr-name);-webkit-text-fill-color:var(--kjr-name);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kjr-when{
  display:block;font-family:var(--kjr-ui);font-size:12.5px;line-height:1.3;margin-top:3px;
  color:var(--kjr-meta);-webkit-text-fill-color:var(--kjr-meta);
}
.kjr-who .kjr-g{flex:0 0 auto;line-height:0;opacity:.95}

.kjr-card .kjr-stars{
  display:block;padding:0 20px;margin:13px 0 9px;flex:0 0 auto;
  color:var(--kjr-gold);-webkit-text-fill-color:var(--kjr-gold);
  font-size:16px;letter-spacing:.13em;line-height:1;
}
/* flex:0 1 auto, never grow — a stretched -webkit-box leaks a sliver of the
   line after the clamp, which is what put half a sentence under the photos.
   Selectors are doubled up because the site's Customizer CSS carries
   `body.dark p{font-size:17px}` and the theme forces `display:flow-root`,
   which silently disables -webkit-line-clamp. */
.kjr .kjr-quote{
  --kjr-lh:1.6;--kjr-lines:10;
  /* flex-shrink MUST stay 0: a shrinkable quote gets squeezed to a fractional
     number of lines and the last one is sliced through the middle */
  padding:0 20px;margin:0 0 auto;flex:0 0 auto;min-height:0;
  font-family:var(--kjr-ui);font-size:15px;line-height:var(--kjr-lh);font-weight:400;
  color:var(--kjr-text);-webkit-text-fill-color:var(--kjr-text);text-align:left;
  display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden;
  -webkit-line-clamp:var(--kjr-lines)!important;
  max-height:calc(1em * var(--kjr-lh) * var(--kjr-lines));
}
.kjr .kjr-card.has-shots .kjr-quote{--kjr-lines:5}
.kjr .kjr-card.has-one .kjr-quote{--kjr-lines:4}
.kjr .kjr-card:not(.has-shots){padding-bottom:18px}   /* no photo strip to close the card */

/* A two-line review cannot carry a card at body size. Set it as a quote and
   move the signature to the foot — same parts, editorial order, no void. */
.kjr .kjr-card--brief .kjr-stars{order:1;margin:22px 0 16px}
.kjr .kjr-card--brief .kjr-quote{
  order:2;--kjr-lh:1.38;--kjr-lines:7;
  font-size:23px;letter-spacing:-.013em;margin:0 0 auto;
  color:#2b2620;-webkit-text-fill-color:#2b2620;
}
.kjr .kjr-card--brief .kjr-who{
  order:3;padding:16px 20px 0;margin-top:18px;
  border-top:1px solid var(--kjr-hair);
}
.kjr-more{
  flex:0 0 auto;padding:12px 20px 16px;
  font-family:var(--kjr-ui);font-size:13.5px;font-weight:500;
  color:var(--kjr-link);-webkit-text-fill-color:var(--kjr-link);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(138,94,40,.36);
}
.kjr-more:hover{text-decoration-color:var(--kjr-link)}

.kjr-shots{
  margin-top:auto;flex:0 0 auto;display:grid;gap:2px;height:132px;
  background:var(--kjr-hair);
}
.kjr-shots--1{height:150px}
.kjr-shots a{display:block;overflow:hidden;position:relative;background:#efe9e1}
.kjr-shots img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.kjr-shots a:hover img{transform:scale(1.06)}
.kjr-shots a:focus-visible{outline:2px solid var(--kjr-brass);outline-offset:-2px}

/* ---------- footer links ------------------------------------------------ */
.kjr .kjr-links{
  display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  margin:6px 0 0;font-family:var(--kjr-ui);font-size:14px;line-height:1.4;
}
.kjr .kjr-links a{
  color:var(--kjr-brass);-webkit-text-fill-color:var(--kjr-brass);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--kjr-brass) 40%,transparent);
}
.kjr .kjr-links a:hover{text-decoration-color:var(--kjr-brass)}
.kjr-links .kjr-cta{
  text-decoration:none;border:1px solid var(--kjr-brass);border-radius:999px;
  padding:11px 24px;transition:background .22s,color .22s;
}
.kjr-links .kjr-cta:hover{
  background:var(--kjr-brass);color:var(--kjr-ground);-webkit-text-fill-color:var(--kjr-ground);
}

/* ---------- overlays (CSS :target — work with JS disabled) --------------- */
.kjr-modals{position:static}
.kjr-lbx,.kjr-pop{
  position:fixed;inset:0;z-index:2147483000;display:none;
  align-items:center;justify-content:center;padding:24px;
}
/* :target is the no-JS path; .is-open is what the script uses so the URL
   hash — and therefore the reader's scroll position — is left alone */
.kjr-lbx:target,.kjr-pop:target,
.kjr-lbx.is-open,.kjr-pop.is-open{display:flex}
.kjr-veil{position:absolute;inset:0;background:rgba(10,8,6,.9);cursor:zoom-out}
.kjr-lbx>img{
  position:relative;max-width:94vw;max-height:90vh;width:auto;object-fit:contain;
  border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.kjr-x{
  position:absolute;top:14px;right:20px;z-index:3;line-height:1;
  font-size:34px;color:#fff;-webkit-text-fill-color:#fff;text-decoration:none;
}
.kjr-x:hover{color:var(--kjr-gold);-webkit-text-fill-color:var(--kjr-gold)}
.kjr-pop-in{
  position:relative;width:100%;max-width:600px;max-height:86vh;overflow:auto;
  background:#fff;border-radius:14px;padding:30px 30px 26px;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.kjr-pop-in .kjr-x{color:#8b837a;-webkit-text-fill-color:#8b837a;top:10px;right:16px;font-size:28px}
.kjr-pop-in .kjr-who{padding:0}
/* the gold lives on `.kjr-card .kjr-stars`, and these stars are not in a
   card — without this they inherit the body grey */
.kjr-modals .kjr-pop-in .kjr-stars{
  display:block;padding:0;margin:16px 0 12px;line-height:1;
  font-size:16px;letter-spacing:.13em;
  color:var(--kjr-gold);-webkit-text-fill-color:var(--kjr-gold);
}
.kjr-modals .kjr-pop-in .kjr-quote{
  padding:0;margin:0;max-height:none;font-weight:400;text-align:left;
  display:block!important;-webkit-line-clamp:none!important;overflow:visible;
  font-family:var(--kjr-ui);font-size:15.5px;line-height:1.7;white-space:pre-line;
  color:var(--kjr-text);-webkit-text-fill-color:var(--kjr-text);
}
.kjr-reply{
  margin:20px 0 0;padding:15px 17px;border-radius:10px;background:#f6f2ec;
  font-family:var(--kjr-ui);font-size:14px;line-height:1.6;
  color:var(--kjr-text);-webkit-text-fill-color:var(--kjr-text);
}
.kjr-reply b{
  display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--kjr-brass);-webkit-text-fill-color:var(--kjr-brass);margin-bottom:6px;
}
.kjr-pop-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:20px}
.kjr-pop-shots a{display:block;border-radius:8px;overflow:hidden}
.kjr-pop-shots img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* the theme paints decorative column rules over everything; let clicks through */
.content-lines,.content-lines-inner,.content-lines-wrapper{pointer-events:none!important}

/* ---------- responsive -------------------------------------------------- */
@media(max-width:900px){
  .kjr-head{grid-template-columns:1fr;align-items:start;gap:22px}
  .kjr-ledger{
    flex-direction:row;align-items:center;gap:14px;
    padding-top:20px;border-top:1px solid var(--kjr-rule);width:100%;
  }
  .kjr-ledger .kjr-g{margin-bottom:0}
  .kjr-score{font-size:2.4rem}
  .kjr-ledger .kjr-stars{margin:0}
  .kjr-ledger i{margin-left:auto;text-align:right}
}
@media(max-width:640px){
  /* a phone should reach the first review without a long scroll */
  .kjr{--kjr-card-w:min(86vw,340px);--kjr-card-h:406px;--kjr-gap:14px;padding-top:46px}
  .kjr-head{padding-bottom:18px;margin-bottom:20px;gap:16px}
  .kjr-faces{gap:10px;margin-top:15px}
  .kjr-mugs img{width:30px;height:30px;margin-left:-8px}
  .kjr-faces p{font-size:12.5px}
  .kjr-ledger{padding-top:15px;gap:11px}
  .kjr-score{font-size:2.05rem}
  .kjr-ledger .kjr-stars{font-size:14px;letter-spacing:.16em}
  .kjr-tools{margin-bottom:10px}
  .kjr-links{gap:18px;font-size:13.5px}
  .kjr-nav{width:40px;height:40px}
  .kjr-hint{font-size:11px;letter-spacing:.12em}
  .kjr .kjr-card--brief .kjr-quote{font-size:20px}
}
@media(max-width:400px){
  .kjr-ledger i{display:none}
}

@media(prefers-reduced-motion:reduce){
  .kjr *{transition:none!important;animation:none!important}
  .kjr-track{scroll-snap-type:x mandatory}
  .kjr-card{scroll-snap-align:start}
}