@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* ^ KLLD-FONTLOAD — @import inside a data-no-optimize stylesheet survives LiteSpeed's
   Google-Fonts replacement optimizer (a bare <link> to fonts.googleapis.com is stripped
   even with data-no-optimize on the tag). Page-scoped: this sheet is enqueued ONLY on
   template-tour-search-result.php, so the three faces never load site-wide. */

/* =========================================================================
   KLLD Tours listing — "FIELD GUIDE" (2026-08-18).

   Ported from the user's Stitch design "Khao Lak Tours Redesign Variant 1"
   (project 4987087108027540640). The Tailwind CDN it shipped with is NOT used
   — every utility is restated here as real CSS, scoped under .kdtsr.

   Direction: a printed field guide opened flat. LEFT is the spread's verso —
   cream paper, a gold mono eyebrow, one enormous Fraunces headline, and the
   destinations as a wrapped key. RIGHT is the recto — a mono index bar over a
   horizontally snapping rail of 3:4 photographic plates. The photography is
   the entire right half of the page; the left half is deliberately quiet so
   the first plate reads as the page's image.

   Replaces klld-tour-search.css ("Andaman Field Plate", 2026-07-30) on this
   template. That file is kept on disk and in git history — flip the path in
   klld_enqueue_tour_search_2026() to revert.

   LOAD-BEARING SELECTORS (assets/js/klld-tour-search.js queries these — do NOT
   rename; that script is shipped unchanged and this markup keeps its contract):
     #kdtsrRoot[data-init-loc][data-init-s] · #kdtsrTrack(.is-swap)
     .tcard[hidden] · [data-loc] · [data-title]
     #kdtsrFilter .lf[aria-pressed] · #kdtsrCount · #kdtsrEmpty(.on)
     .kdtsr-search(.has-val) · #kdtsrSearch · .clr
   The hero crossfade hooks (.kdtsr-bg .layer / #kdtsrProg) are intentionally
   absent — this design has no hero — and that script no-ops cleanly on them.
   The rail arrows are #kdtsrRailPrev/#kdtsrRailNext, NOT the old
   #kdtsrArrowPrev/Next: they scroll the rail here rather than stepping the
   destination filter, so they are deliberately invisible to the shipped JS.
   ========================================================================= */

.kdtsr{
  --fg-surface:#fdf9ed;
  --fg-card:#fefdf8;
  --fg-brand:#099024;
  --fg-brand-d:#077a1e;
  --fg-ink:#1a4331;
  --fg-ink-2:#3a5245;
  /* KLLD-TSR-A11Y-2026-08-18 — the Stitch palette's gold was measured against the
     cream ground and does not carry text at any size: #bc9653 on #fdf9ed is 2.62:1,
     under both the 3:1 large-text and the 4.5:1 body thresholds. Split into three
     roles rather than abandoning the gold:
       --fg-accent      #bc9653  DECORATION ONLY — rules, the hint stroke, borders.
       --fg-accent-lg   #ab8442  3.26:1 — the ≥24px "Field Guide" display line.
       --fg-accent-txt  #8f6a32  4.67:1 — small gold text (index total, hint label).
     Same hue family, so the design still reads as gold on cream. */
  --fg-accent:#bc9653;
  --fg-accent-lg:#ab8442;
  --fg-accent-txt:#8f6a32;
  /* Gold CTA: white on #b89b65 is 2.65:1, so the arrow glyph failed the 3:1 that
     non-text UI components need. Darkened to 4.19:1 rest / 4.84:1 hover. */
  --fg-gold:#96773f;
  --fg-gold-h:#8b6d38;
  /* #6b6b6b clears 4.5:1 on the card and the page ground (5.2 / 5.1) but only
     reaches 4.19:1 on the chip's own count pill (#e8e4d8). One darker muted for
     that surface. */
  --fg-muted:#6b6b6b;
  --fg-muted-d:#5a5a5a;
  --fg-line:#e8e4d8;
  --fg-chip:#f7f3e7;
  --fg-chip-line:#dddace;
  --fg-disp:"Fraunces",Georgia,"Times New Roman",serif;
  --fg-ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fg-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fg-ease:cubic-bezier(0.23, 1, 0.32, 1);
  font-family:var(--fg-ui);
  color:var(--fg-ink);
  background:var(--fg-surface);
  line-height:1.55;
  overflow-x:clip;
}
.kdtsr *{box-sizing:border-box;}
.kdtsr img{max-width:100%;display:block;}

/* ---------------------------------------------------------------- the spread */
/* Not `height:100vh` as the export had it: this page renders INSIDE the site's
   fixed header and above the real footer, so a locked viewport height would put
   the rail under the header on short laptops. A min-height keeps the full-bleed
   feel and lets the composition breathe when the browser chrome is tall. */
.kdtsr .fg{
  display:grid;
  grid-template-columns:1fr;
  min-height:auto;
  border-bottom:1px solid var(--fg-line);
}
@media (min-width:1024px){
  .kdtsr .fg{
    grid-template-columns:minmax(0,40%) minmax(0,60%);
    min-height:clamp(680px,86svh,980px);
  }
}
@media (min-width:1440px){
  .kdtsr .fg{ grid-template-columns:minmax(0,34%) minmax(0,66%); }
}

/* ------------------------------------------------------------- verso (left) */
.kdtsr .fg-side{
  background:var(--fg-surface);
  padding:clamp(34px,5vw,64px) clamp(20px,5vw,68px) clamp(30px,4vw,56px);
  display:flex;
  align-items:center;
}
@media (min-width:1024px){
  .kdtsr .fg-side{
    border-right:1px solid var(--fg-line);
    position:sticky;
    top:0;
    align-self:start;
    min-height:clamp(680px,86svh,980px);
  }
}
.kdtsr .fg-side-in{max-width:34rem;width:100%;}

/* "Field Guide" is a DISPLAY line, not a micro-eyebrow: in the Stitch preview it is
   set in gold Fraunces at roughly half the headline's size, forming a two-tier
   serif lockup with the page title beneath it. A small mono kicker (the first pass
   here) read as UI chrome and threw the whole left pane's hierarchy away. */
.kdtsr .fg-eyebrow{
  font-family:var(--fg-disp);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(1.6rem,3.1vw,2.9rem);
  line-height:1.02;
  letter-spacing:-.014em;
  color:var(--fg-accent-lg);
  margin:0 0 .1em;
  text-wrap:balance;
}

.kdtsr .fg-h1{
  font-family:var(--fg-disp);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(2.9rem,7.4vw,5.4rem);
  line-height:.92;
  letter-spacing:-.022em;
  color:var(--fg-ink);
  margin:0 0 .34em;
  text-wrap:balance;
}
.kdtsr .fg-lede{
  font-size:clamp(1rem,1.15vw,1.16rem);
  line-height:1.62;
  color:var(--fg-ink-2);
  max-width:30rem;
  margin:0 0 1.9em;
}

/* the destination key — one REAL featured photo per bucket, the same overlapping
   photo-row motif the header mega panel uses, so the nav and the page speak the
   same language. Decorative here (the chips below carry the semantics). */
.kdtsr .fg-keys{
  display:flex;align-items:center;gap:14px;
  margin:0 0 1.7em;
}
.kdtsr .fg-keys-pics{display:flex;align-items:center;}
.kdtsr .fg-keys-pics img{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:2px solid var(--fg-surface);
  margin-left:-11px;
  box-shadow:0 3px 10px rgba(26,67,49,.18);
}
.kdtsr .fg-keys-pics img:first-child{margin-left:0;}
.kdtsr .fg-keys-n{
  font-family:var(--fg-mono);
  font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
}

/* --------------------------------------------------------------- the chips */
.kdtsr .fg-chips{
  display:flex;flex-wrap:wrap;gap:9px;
  border:0;padding:0;margin:0;
}
.kdtsr .fg-chips .lf{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fg-ui);
  font-size:.875rem;font-weight:500;line-height:1;
  color:#1a1815;
  background:var(--fg-chip);
  border:1px solid var(--fg-chip-line);
  border-radius:999px;
  padding:9px 15px;
  cursor:pointer;
  transition:border-color .4s var(--fg-ease), background-color .4s var(--fg-ease),
             color .4s var(--fg-ease), transform .4s var(--fg-ease);
}
.kdtsr .fg-chips .lf .c{
  font-family:var(--fg-mono);
  font-size:.66rem;font-weight:500;
  color:var(--fg-muted-d);
  background:var(--fg-line);
  border-radius:6px;
  padding:2px 6px;
  font-variant-numeric:tabular-nums;
}
.kdtsr .fg-chips .lf:hover{border-color:var(--fg-brand);transform:translateY(-1px);}
.kdtsr .fg-chips .lf:focus-visible{outline:2px solid var(--fg-ink);outline-offset:3px;}
.kdtsr .fg-chips .lf[aria-pressed="true"]{
  /* the surface darkens to the deep brand shade so white label text clears
     4.5:1 (5.51:1); #099024 stays the brand token and keeps the border+hover. */
  background:var(--fg-brand-d);
  border-color:var(--fg-brand-d);
  color:#fff;
}
.kdtsr .fg-chips .lf[aria-pressed="true"] .c{
  color:#fff;
  background:rgba(255,255,255,.22);
}

/* ------------------------------------------------------------- recto (right) */
.kdtsr .fg-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--fg-surface);
  min-width:0;
}

/* index bar: mono counter · search · rail arrows */
.kdtsr .fg-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px clamp(20px,3vw,48px);
  border-bottom:1px solid var(--fg-line);
  background:var(--fg-surface);
}
@media (min-width:1024px){
  .kdtsr .fg-bar{
    position:sticky;top:0;z-index:6;
    min-height:80px;
    border-top:1px solid var(--fg-line);
  }
}
.kdtsr .fg-idx{
  font-family:var(--fg-mono);
  font-size:.86rem;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:baseline;gap:4px;
  flex:0 0 auto;
}
.kdtsr .fg-idx i{font-style:normal;font-weight:600;color:var(--fg-ink);}
.kdtsr .fg-idx em{font-style:normal;color:var(--fg-accent-txt);}
.kdtsr .fg-idx b{font-weight:400;color:var(--fg-accent-txt);}

.kdtsr .kdtsr-search{
  position:relative;
  flex:1 1 190px;
  min-width:0;
  display:flex;align-items:center;
}
.kdtsr .kdtsr-search .ic{
  position:absolute;left:13px;width:15px;height:15px;
  color:var(--fg-muted);pointer-events:none;
}
.kdtsr .kdtsr-search input{
  width:100%;
  font-family:var(--fg-ui);font-size:.875rem;
  color:var(--fg-ink);
  background:var(--fg-chip);
  border:1px solid var(--fg-chip-line);
  border-radius:999px;
  padding:9px 34px 9px 35px;
  transition:border-color .4s var(--fg-ease), background-color .4s var(--fg-ease);
  -webkit-appearance:none;appearance:none;
}
.kdtsr .kdtsr-search input::-webkit-search-cancel-button{display:none;}
.kdtsr .kdtsr-search input::placeholder{color:var(--fg-muted);opacity:1;}
.kdtsr .kdtsr-search input:focus{
  border-color:var(--fg-brand-d);background:#fff;
}
/* A 1px beige→green border swap was the ONLY keyboard focus cue on the search field
   — technically a change, but not a focus indicator anyone can find. Real ring, same
   ink as every other focus style on this page so the whole tab route looks alike. */
.kdtsr .kdtsr-search input:focus-visible{
  outline:3px solid var(--fg-ink);
  outline-offset:2px;
}
.kdtsr .kdtsr-search .clr{
  position:absolute;right:8px;
  width:24px;height:24px;border:0;border-radius:50%;
  background:transparent;color:var(--fg-muted);
  display:none;place-items:center;cursor:pointer;
}
.kdtsr .kdtsr-search .clr svg{width:12px;height:12px;}
.kdtsr .kdtsr-search.has-val .clr{display:grid;}
.kdtsr .kdtsr-search .clr:hover{color:var(--fg-ink);background:var(--fg-line);}

.kdtsr .fg-arrows{display:flex;gap:7px;flex:0 0 auto;}
.kdtsr .fg-arrows button{
  width:36px;height:36px;
  display:grid;place-items:center;
  border:1px solid var(--fg-chip-line);
  border-radius:50%;
  background:var(--fg-card);
  color:var(--fg-ink);
  cursor:pointer;
  transition:border-color .4s var(--fg-ease), background-color .4s var(--fg-ease),
             opacity .4s var(--fg-ease);
}
.kdtsr .fg-arrows button svg{width:15px;height:15px;}
.kdtsr .fg-arrows button:hover:not(:disabled){border-color:var(--fg-brand);background:#fff;}
.kdtsr .fg-arrows button:focus-visible{outline:2px solid var(--fg-ink);outline-offset:2px;}
.kdtsr .fg-arrows button:disabled{opacity:.32;cursor:default;}
/* Below the desktop breakpoint the pager under the rail owns navigation, and it
   carries the full 44px targets. Showing both pairs there would be two sets of
   ‹ › on one screen doing exactly the same thing, and would push the index and
   the search field into a cramped third row on a phone. */
@media (max-width:1023px){
  .kdtsr .fg-arrows{display:none;}
}

/* ------------------------------------------------------------------- the rail */
.kdtsr .fg-rail{
  position:relative;
  flex:1 1 auto;
  display:flex;align-items:center;
  overflow-x:auto;overflow-y:visible;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:clamp(24px,3vw,40px) clamp(20px,3vw,48px) clamp(26px,3vw,42px);
}
.kdtsr .fg-rail::-webkit-scrollbar{display:none;}
/* KLLD-TSR-A11Y — the rail is tabindex="0" so a keyboard user can scroll it with the
   arrow keys (the plates far to the right are otherwise reachable only by tabbing
   through every card in front of them). Without a focus style that tab stop was
   completely silent: focus landed on the region and nothing on screen changed. */
.kdtsr .fg-rail:focus-visible{
  outline:3px solid var(--fg-ink);
  outline-offset:-3px;
  border-radius:6px;
}
/* KLLD-TSR-FABCLEAR-2026-08-18 — bottom clearance for the site's fixed controls.
   Below the desktop breakpoint the page stacks and the rail is the last thing in
   the viewport, so a card's bottom row lands squarely in the band owned by the
   cookie-preference button (bottom-left, 45px + 18px inset) and the klfab chat
   toggle (bottom-right, 45px + 1em). Measured live at 430x819: both occupy the
   lowest ~80px. Clear that band plus the home indicator, so the price row and its
   CTA are never underneath a fixed control at the rail's resting position. */
@media (max-width:1023px){
  .kdtsr .fg-rail{
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));
  }
}
.kdtsr .fg-track{
  display:flex;
  gap:clamp(18px,2vw,38px);
  min-width:max-content;
  align-items:stretch;
}
/* re-filter swap: the shipped JS stamps .is-swap on the track after a user-driven
   filter change. One short, uniform settle — no per-card stagger, which would read
   as a page reload every time a chip is pressed. */
@keyframes kdtsrFgSwap{ from{opacity:.35;transform:translateY(10px);} to{opacity:1;transform:none;} }
.kdtsr .fg-track.is-swap{animation:kdtsrFgSwap .5s var(--fg-ease) both;}

/* --------------------------------------------------------------------- plates */
@keyframes kdtsrFgRise{ from{opacity:0;transform:translateY(40px);} to{opacity:1;transform:translateY(0);} }
.kdtsr .tcard{
  position:relative;
  flex:0 0 auto;
  width:280px;
  /* snap to START, not centre as the export had it: the rail is read left-to-right
     like a filmstrip, and centre-snap makes plate 1 unreachable as "the current
     one" at scrollLeft 0 — the index would open on 02 with the first plate flush
     left. Start-snap keeps the counter and the .is-active plate honest at rest. */
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--fg-card);
  border:1px solid var(--fg-line);
  border-radius:18px;
  padding:16px;
  opacity:0;
  animation:kdtsrFgRise 1.2s var(--fg-ease) forwards;
  transition:transform .6s var(--fg-ease), box-shadow .6s var(--fg-ease);
}
@media (min-width:1024px){ .kdtsr .tcard{width:340px;padding:20px;} }
@media (min-width:1440px){ .kdtsr .tcard{width:380px;} }
/* A 3:4 plate on a 380px card is 507px tall — add the title block and the price row
   and the plate no longer fits between this site's fixed header and the fold on a
   laptop. Below 900px of viewport height, narrow the card (the aspect ratio does the
   rest) and tighten the rail so the ฿ price and its CTA stay above the fold, which is
   the whole point of putting them on the card. */
@media (min-width:1024px) and (max-height:900px){
  .kdtsr .fg{min-height:clamp(600px,92svh,880px);}
  .kdtsr .fg-side{min-height:clamp(600px,92svh,880px);}
  .kdtsr .fg-rail{padding-top:20px;padding-bottom:22px;}
  .kdtsr .tcard{width:296px;padding:16px;}
  .kdtsr .tcard .fg-pic{margin-bottom:14px;}
  .kdtsr .tcard h3{font-size:1.22rem;}
  .kdtsr .tcard .fg-dur{margin-bottom:12px;}
}
.kdtsr .tcard[hidden]{display:none;}
/* entrance stagger — first ten only; deeper cards are off-screen anyway and a
   30-step ladder would leave the tail of the rail blank for three seconds. */
.kdtsr .tcard:nth-child(1){animation-delay:.05s}
.kdtsr .tcard:nth-child(2){animation-delay:.15s}
.kdtsr .tcard:nth-child(3){animation-delay:.25s}
.kdtsr .tcard:nth-child(4){animation-delay:.35s}
.kdtsr .tcard:nth-child(5){animation-delay:.45s}
.kdtsr .tcard:nth-child(6){animation-delay:.55s}
.kdtsr .tcard:nth-child(7){animation-delay:.65s}
.kdtsr .tcard:nth-child(8){animation-delay:.75s}
.kdtsr .tcard:nth-child(9){animation-delay:.85s}
.kdtsr .tcard:nth-child(n+10){animation-delay:.95s}

.kdtsr .tcard:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px -10px rgba(26,67,49,.16);
}
/* the focused plate — set from rail scroll position by the page script, never
   hardcoded to one card. */
.kdtsr .tcard.is-active{
  transform:scale(1.02);
  box-shadow:0 22px 44px -12px rgba(26,67,49,.20);
  z-index:2;
}
.kdtsr .tcard.is-active:hover{transform:translateY(-8px) scale(1.02);}
.kdtsr .tcard:focus-within{
  box-shadow:0 0 0 2px var(--fg-ink), 0 20px 40px -10px rgba(26,67,49,.16);
}

/* --plate is the photo's own averaged colour, stamped inline per card by
   klld_tsr_plate_color(). The plate is the product on this page, so the frame
   holds a tint of the picture that is about to arrive rather than an empty cream
   box; --fg-chip is the fallback for a tour with no usable image. */
.kdtsr .tcard .fg-pic{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:13px;
  margin-bottom:20px;
  background:var(--plate,var(--fg-chip));
}
.kdtsr .tcard .fg-pic img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--fg-ease), opacity .7s var(--fg-ease);
}
/* Fade the photo up over its own tint. The class is added by the img's onload,
   so a cached image that is already complete when CSS applies still resolves:
   `img:not(.is-in)` only holds it back until that event, and the :where() guard
   keeps specificity at zero so nothing here outranks the rules above. */
.kdtsr .tcard .fg-pic img:not(.is-in){opacity:0;}
.kdtsr .tcard .fg-pic img.is-in{opacity:1;}
/* .is-in is set by the img's own onload attribute, so with scripting off it would
   never arrive and every plate would stay blank — a far worse failure than the one
   this fixes. Hand the photos back unconditionally in that case. (The tint alone
   already does the real work: an <img> paints nothing until it decodes, so the
   --plate background shows through regardless. The fade is only the polish.) */
@media (scripting:none){
  .kdtsr .tcard .fg-pic img:not(.is-in){opacity:1;}
}
.kdtsr .tcard:hover .fg-pic img{transform:scale(1.05);}
/* rating badge — a display-only trust signal (Policy 6A: never an outbound link) */
.kdtsr .tcard .fg-rate{
  position:absolute;top:10px;right:10px;z-index:2;
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--fg-mono);font-size:.66rem;font-weight:600;
  color:var(--fg-ink);
  background:rgba(254,253,248,.93);
  border-radius:999px;padding:4px 9px;
  box-shadow:0 2px 8px rgba(26,67,49,.16);
}
.kdtsr .tcard .fg-rate svg{width:10px;height:10px;color:var(--fg-gold);}

.kdtsr .tcard .fg-cbody{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;}
.kdtsr .tcard .fg-loc{
  font-family:var(--fg-ui);
  font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
  margin-bottom:8px;
}
.kdtsr .tcard h3{
  font-family:var(--fg-disp);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:1.22rem;
  line-height:1.22;
  letter-spacing:-.008em;
  color:var(--fg-ink);
  margin:0 0 6px;
  text-wrap:pretty;
}
@media (min-width:1024px){ .kdtsr .tcard h3{font-size:1.42rem;} }
.kdtsr .tcard h3 a{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--fg-ease);
}
.kdtsr .tcard:hover h3 a{background-size:100% 1px;}
/* the plate is one target: the title anchor is stretched over the whole card, so
   the accessible name stays the tour title and there is no nested-link soup. The
   gold CTA sits above it on its own z-index. */
.kdtsr .tcard h3 a::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:18px;
}
.kdtsr .tcard .fg-dur{
  font-family:var(--fg-mono);
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-muted);
  margin-bottom:18px;
}
/* The class is namespaced now, but the reset stays belt-and-braces: this row was
   .row, and the parent theme's Bootstrap grid gave it flex-wrap:wrap plus
   margin:0 -12px, which broke the CTA onto its own line at the card's left edge.
   Stating wrap and margin explicitly means no future generic rule can do it again. */
.kdtsr .tcard .fg-row{
  margin:auto 0 0;
  display:flex;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;gap:12px;
}
.kdtsr .tcard .fg-price{
  font-size:.86rem;font-weight:500;color:var(--fg-ink);
  display:inline-flex;align-items:baseline;gap:5px;
}
.kdtsr .tcard .fg-price b{font-weight:700;font-variant-numeric:tabular-nums;}
.kdtsr .tcard .fg-cta{
  position:relative;z-index:2;
  /* margin-left:auto pins the arrow to the card's right edge even when the price
     is missing — with space-between a lone child sits at the START, which put the
     CTA in the bottom-LEFT corner, the exact spot the fixed cookie button owns. */
  flex:0 0 auto;margin-left:auto;
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:9px;
  background:var(--fg-gold);
  color:#fff;
  text-decoration:none;
  transition:background-color .4s ease, transform .4s var(--fg-ease);
}
.kdtsr .tcard .fg-cta svg{width:19px;height:19px;}
.kdtsr .tcard:hover .fg-cta{background:var(--fg-gold-h);transform:translateX(4px);}
/* Two links point at the same tour (the stretched title and this arrow), so both
   raise the card's :focus-within ring. Give the arrow its own ring on top, or a
   keyboard user cannot tell which of the two tab stops they are on. */
.kdtsr .tcard .fg-cta:focus-visible{
  outline:3px solid var(--fg-ink);
  outline-offset:3px;
  background:var(--fg-gold-h);
}

.kdtsr .fg-empty{
  display:none;
  font-family:var(--fg-disp);
  font-size:1.15rem;color:var(--fg-ink-2);
  padding:40px 4px;margin:0;
}
.kdtsr .fg-empty.on{display:block;}

/* ------------------------------------------------------- pager (all widths) */
/* Navigators + position marks under the rail. The bar's ‹ › pair is a desktop
   convenience sitting up beside the search field; this strip is the one that has
   to work under a thumb, so it is present at every breakpoint and its controls
   meet the 44px target. Same cream/hairline/gold language as the plates. */
.kdtsr .fg-pager{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.4vw,18px);
  padding:2px clamp(20px,3vw,48px) clamp(14px,1.6vw,20px);
}
.kdtsr .fg-pg-btn{
  flex:0 0 auto;
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid var(--fg-chip-line);
  border-radius:50%;
  background:var(--fg-card);
  color:var(--fg-ink);
  cursor:pointer;
  transition:border-color .4s var(--fg-ease), background-color .4s var(--fg-ease),
             color .4s var(--fg-ease), opacity .4s var(--fg-ease);
}
.kdtsr .fg-pg-btn svg{width:17px;height:17px;}
.kdtsr .fg-pg-btn:hover:not(:disabled){border-color:var(--fg-gold);background:var(--fg-gold);color:#fff;}
.kdtsr .fg-pg-btn:focus-visible{outline:3px solid var(--fg-ink);outline-offset:2px;}
.kdtsr .fg-pg-btn:disabled{opacity:.3;cursor:default;}

.kdtsr .fg-dots{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  min-width:0;
}
.kdtsr .fg-dots[hidden]{display:none;}
/* Dashes, not circles: they read as a filmstrip's frame edges, which is what the
   rail is, and the current one can elongate without changing the row's height. */
.kdtsr .fg-dot{
  flex:0 0 auto;
  width:16px;height:3px;
  padding:0;border:0;border-radius:2px;
  background:var(--fg-chip-line);
  cursor:pointer;
  /* the visible dash is 3px tall; this pseudo-element gives every mark a real
     44px-tall pointer/touch target without inflating the strip. */
  position:relative;
  transition:width .5s var(--fg-ease), background-color .5s var(--fg-ease);
}
.kdtsr .fg-dot::after{
  content:"";position:absolute;left:0;right:0;
  top:50%;height:44px;transform:translateY(-50%);
}
.kdtsr .fg-dot:hover{background:var(--fg-accent);}
.kdtsr .fg-dot:focus-visible{outline:2px solid var(--fg-ink);outline-offset:6px;}
.kdtsr .fg-dot.is-on{
  width:34px;
  background:var(--fg-gold);
}

/* ------------------------------------------------------------------ the hint */
@keyframes kdtsrFgPulse{0%,100%{opacity:.7}50%{opacity:1}}
/* In FLOW at the end of the stage, not absolutely positioned as the export had it.
   Absolute + bottom:0 pins it to the stage box, and the stage is as tall as the
   plates — so on a real card height the label landed on top of a plate's price row
   instead of below the rail. In flow it can never collide, and the rail no longer
   has to reserve empty space for it. */
.kdtsr .fg-hint{
  display:none;
  flex-direction:column;align-items:center;
  padding:6px 0 clamp(20px,2.6vw,36px);
  pointer-events:none;
}
@media (min-width:1024px){ .kdtsr .fg-hint{display:flex;} }
.kdtsr .fg-hint span{
  font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-accent-txt);
  margin-bottom:14px;
  animation:kdtsrFgPulse 3s ease-in-out infinite;
}
.kdtsr .fg-hint i{display:block;width:1px;height:46px;background:var(--fg-accent);opacity:.85;}

/* --------------------------------------------------- intro copy + FAQ ground */
.kdtsr .kdtsr-intro{
  padding:clamp(40px,5vw,76px) clamp(20px,5vw,68px) clamp(8px,1.5vw,20px);
  border-top:1px solid var(--fg-line);
}
.kdtsr .kdtsr-intro__grid{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1fr;
  gap:clamp(18px,2.4vw,40px);
}
/* Verso/recto again, at the same 34/66 split the spread uses at this width, so
   the band sits under the plates as the same page rather than as an appendix. */
@media (min-width:1024px){
  .kdtsr .kdtsr-intro__grid{
    grid-template-columns:minmax(0,34%) minmax(0,66%);
    gap:clamp(32px,4vw,72px);
  }
}
.kdtsr .kdtsr-intro__eyebrow{
  display:block;
  font-family:var(--fg-mono);
  font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg-accent-txt);
  margin-bottom:.9em;
}
.kdtsr .kdtsr-intro h2{
  font-family:var(--fg-disp);font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.14;
  color:var(--fg-ink);margin:0;text-wrap:balance;
}
.kdtsr .kdtsr-intro__body{color:var(--fg-ink-2);font-size:1.02rem;}
/* Two measures at desktop: one 66%-wide column of prose runs to ~110 characters,
   well past the comfortable line length, and it was the single column of text in
   a full-bleed band that made the right side look empty in the first place. */
@media (min-width:1024px){
  .kdtsr .kdtsr-intro__body{
    columns:2;column-gap:clamp(28px,3vw,56px);
  }
  .kdtsr .kdtsr-intro__body p{break-inside:avoid;}
}
.kdtsr .kdtsr-intro__body p{margin:0 0 1em;}
.kdtsr .kdtsr-intro__body p:last-child{margin-bottom:0;}
.kdtsr .kdtsr-intro__body a{color:var(--fg-brand);}
.kdtsr .klld-tsr-faq{color:var(--fg-ink);}
.kdtsr .klld-tsr-faq-h2{font-family:var(--fg-disp);font-weight:400;}

/* screen-reader-only helper (the theme ships .screen-reader-text; restate so the
   label never paints even if that rule is optimised away) */
.kdtsr .screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ----------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .kdtsr *,
  .kdtsr *::before,
  .kdtsr *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .kdtsr .tcard{opacity:1;}
  .kdtsr .tcard:hover,
  .kdtsr .tcard.is-active,
  .kdtsr .tcard.is-active:hover{transform:none;}
  .kdtsr .tcard:hover .fg-pic img{transform:none;}
  .kdtsr .tcard:hover .fg-cta{transform:none;}
}