/*!
Theme Name: The Source
Theme URI: https://preview-14d41b2f.sitereboots.com/
Author: Site Reboots
Description: Block theme for The Source Coffee Roastery + Taproom, Sioux Falls.
Version: 1.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: thesource
*/

@import url("assets/mechanics.css");

/* ===========================================================================
   THE SOURCE — the skin.

   mechanics.css (imported above) owns behaviour: sticky header, burger, mobile
   nav, action bar, back-to-top, tap targets. Nothing in this file should
   re-implement any of that.

   The idea, so the next person changing it knows what they are protecting:

   The business is called The Source and every single thing it sells is
   traceable to a named place — six coffees published with region, elevation
   and process, and sixteen rotating taps from named breweries. So the site is
   built as a set of origin records.

   The shape language comes straight off their own wordmark: in "THE SOURCE"
   the TH and the final E are FIELDS OF HORIZONTAL BARS, and the O is a disc
   that is half vertical stripes and half solid. Hence .tsr-bars and .tsr-disc.
   The disc's stripes-to-solid fill doubles as a roast indicator.

   Everything is square. 0 radius, no shadows, structure from 1px rules and
   solid bars. The only curve on the site is a disc, and it is a true circle.
   =========================================================================== */

:root{
  /* ---- the four variables mechanics.css reads (the contract) ---- */
  --tsr-focus:#7A2E3F;
  --tsr-nav-bg:#E5E9DC;      /* must be opaque */
  --tsr-burger:#1A1C16;
  --tsr-header-h:74px;

  /* ---- palette (mirrors theme.json) ---- */
  --ink:#1A1C16;
  --body:#33362C;
  --muted:#5A5E50;
  --paper:#E5E9DC;
  --sage:#D5DACA;
  --panel:#242720;
  --wine:#7A2E3F;
  --claret:#6B2535;
  --highlight:#B8C0A8;
  --dimsage:#99A189;
  --rule:#C3C7B8;

  --rule-dark:#3A3E32;       /* 1px rules inside dark surfaces */
  --gut:clamp(1.25rem,4vw,2rem);
}

html{background:var(--paper)}
body{background:var(--paper);color:var(--body)}

/* ------------------------------------------------------------------ bands */
.tsr-band{padding-block:clamp(3.25rem,7vw,5.5rem);padding-inline:var(--gut)}
.tsr-band--sage{background:var(--sage)}
.tsr-band--paper{background:var(--paper)}
.tsr-band--ink{background:var(--ink)}
.tsr-band--tight{padding-block:clamp(2.25rem,4.5vw,3.25rem)}

/* ---------------------------------------------------------------------------
   ON-DARK SURFACES — read this before adding one.

   There is more than one dark surface and they are NOT all bands. Scoping the
   on-dark rules to the band class alone shipped a dark heading on a dark
   photograph on a previous build. Every dark surface on this site is listed
   here, together, on purpose. ADD NEW ONES TO ALL OF THESE GROUPS.

     .tsr-band--ink    the dark section band
     .tsr-photo        the photo CTA band (image under a dark scrim)
     .tsr-pagehead     the inner-page masthead
     .tsr-footer       the footer
     .tsr-tapwall      the tap wall panel (sits INSIDE a light band)
   --------------------------------------------------------------------------- */
.tsr-band--ink,.tsr-photo,.tsr-pagehead,.tsr-footer,.tsr-tapwall{color:var(--highlight)}

.tsr-band--ink h1,.tsr-band--ink h2,.tsr-band--ink h3,.tsr-band--ink h4,
.tsr-photo h1,.tsr-photo h2,.tsr-photo h3,.tsr-photo h4,
.tsr-pagehead h1,.tsr-pagehead h2,.tsr-pagehead h3,.tsr-pagehead h4,
.tsr-footer h1,.tsr-footer h2,.tsr-footer h3,.tsr-footer h4,
.tsr-tapwall h1,.tsr-tapwall h2,.tsr-tapwall h3,.tsr-tapwall h4{color:var(--paper)}

.tsr-band--ink p,.tsr-photo p,.tsr-pagehead p,.tsr-footer p,.tsr-tapwall p{color:var(--highlight)}

/* The wine accent reaches only 1.87:1 on ink, so it can never be text on a
   dark surface. Links there are sage; a call to action there must be a filled
   button with a pale label. :not(.tsr-btn) because a .tsr-btn inside one of
   these would otherwise take the link colour over its own. */
.tsr-band--ink a:not(.tsr-btn),.tsr-photo a:not(.tsr-btn),
.tsr-pagehead a:not(.tsr-btn),.tsr-footer a:not(.tsr-btn),
.tsr-tapwall a:not(.tsr-btn){color:var(--paper);text-decoration-color:var(--dimsage)}
.tsr-band--ink a:not(.tsr-btn):hover,.tsr-photo a:not(.tsr-btn):hover,
.tsr-pagehead a:not(.tsr-btn):hover,.tsr-footer a:not(.tsr-btn):hover,
.tsr-tapwall a:not(.tsr-btn):hover{color:var(--highlight)}

.tsr-band--ink .tsr-eyebrow,.tsr-photo .tsr-eyebrow,.tsr-pagehead .tsr-eyebrow,
.tsr-footer .tsr-eyebrow,.tsr-tapwall .tsr-eyebrow{color:var(--highlight)}
.tsr-band--ink .tsr-eyebrow i,.tsr-photo .tsr-eyebrow i,.tsr-pagehead .tsr-eyebrow i,
.tsr-footer .tsr-eyebrow i,.tsr-tapwall .tsr-eyebrow i{background:var(--highlight)}
.tsr-band--ink .tsr-muted,.tsr-photo .tsr-muted,.tsr-pagehead .tsr-muted,
.tsr-footer .tsr-muted,.tsr-tapwall .tsr-muted{color:var(--dimsage)}

/* ------------------------------------------------------------- the motif */
/* .tsr-bars — a field of horizontal bars, lifted from the TH and the final E
   of their wordmark. Used as the eyebrow mark and as a rule under headings. */
.tsr-bars{display:inline-flex;flex-direction:column;gap:3px;vertical-align:middle}
.tsr-bars i{display:block;height:2.5px;background:var(--ink);width:22px}
.tsr-bars i:nth-child(2){width:15px}
.tsr-bars i:nth-child(3){width:22px}

/* .tsr-disc — the O: a true circle, left half vertical stripes, right half
   solid. The stripe-to-solid ratio reads as a roast level. */
.tsr-disc{
  display:inline-block;width:var(--d,20px);height:var(--d,20px);border-radius:50%;
  background:
    linear-gradient(to right,transparent 50%,var(--ink) 50%),
    repeating-linear-gradient(to right,var(--ink) 0 2px,transparent 2px 4px);
  flex:0 0 auto;
}
.tsr-disc--light{
  background:
    linear-gradient(to right,transparent 50%,var(--highlight) 50%),
    repeating-linear-gradient(to right,var(--highlight) 0 2px,transparent 2px 4px);
}
.tsr-disc--wine{
  background:
    linear-gradient(to right,transparent 50%,var(--wine) 50%),
    repeating-linear-gradient(to right,var(--wine) 0 2px,transparent 2px 4px);
}

/* ---------------------------------------------------------- type + prose */
.tsr-eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-family:Jost,ui-sans-serif,system-ui,sans-serif;
  font-weight:500;font-size:.98rem;color:var(--wine);
  margin:0 0 .85rem;                       /* sentence case, NOT letterspaced */
}
/* The mark is a STACKED bar field (the wordmark's TH and E), not a dash.
   Two bars sitting side by side read as an em dash, which is both a weaker
   quotation of the logo and the eyebrow another demo already uses. */
.tsr-ebars{display:inline-flex;flex-direction:column;gap:2.5px;flex:0 0 auto}
.tsr-ebars i{display:block;height:2.5px;width:16px;background:currentColor}
.tsr-ebars i:nth-child(2){width:10px}
.tsr-ebars i:nth-child(3){width:16px}

.tsr-h{font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:600;line-height:1.06;letter-spacing:-.018em;color:var(--ink);margin:0}
.tsr-lede{font-size:clamp(1.14rem,1.9vw,1.32rem);line-height:1.6;color:var(--body);max-width:52ch}
.tsr-muted{color:var(--muted)}
.tsr-small{font-size:.95rem}

.tsr-prose{max-width:66ch}
.tsr-prose > * + *{margin-top:1.15rem}
.tsr-prose h2{margin-top:2.5rem}
.tsr-prose h3{margin-top:2rem}
.tsr-prose a:not(.tsr-btn){color:var(--claret);text-underline-offset:3px}
.tsr-prose a:not(.tsr-btn):hover{color:var(--ink)}
.tsr-prose ul{padding-left:0;list-style:none}
.tsr-prose ul li{position:relative;padding-left:1.5rem;margin-top:.6rem}
.tsr-prose ul li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:2.5px;background:var(--wine)}

/* Numerals are everywhere on this site — elevations, tap numbers, prices,
   hours, weights. Lining tabular figures keep columns aligned. */
.tsr-num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}

/* ------------------------------------------------------------------ rules */
.tsr-hr{border:0;border-top:1px solid var(--rule);margin:0}
.tsr-band--ink .tsr-hr,.tsr-footer .tsr-hr,.tsr-tapwall .tsr-hr{border-top-color:var(--rule-dark)}

/* ---------------------------------------------------------------- buttons */
.tsr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.85rem 1.6rem;border-radius:0;border:0;
  font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:1.02rem;
  text-decoration:none;cursor:pointer;
  background:var(--wine);color:var(--paper);
  transition:background .15s linear,color .15s linear;
}
.tsr-btn:hover{background:var(--ink);color:var(--paper)}
.tsr-btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tsr-btn--ghost:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* On a dark surface a ghost button needs a pale ring, and the filled wine
   button is still the right CTA because its label is pale. */
.tsr-band--ink .tsr-btn--ghost,.tsr-photo .tsr-btn--ghost,.tsr-pagehead .tsr-btn--ghost,
.tsr-footer .tsr-btn--ghost,.tsr-tapwall .tsr-btn--ghost{color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--dimsage)}
.tsr-band--ink .tsr-btn--ghost:hover,.tsr-photo .tsr-btn--ghost:hover,.tsr-pagehead .tsr-btn--ghost:hover,
.tsr-footer .tsr-btn--ghost:hover,.tsr-tapwall .tsr-btn--ghost:hover{background:var(--paper);color:var(--ink)}
.tsr-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* The three trailing bars on a primary button, echoing the wordmark's E. */
.tsr-btn__bars{display:inline-flex;flex-direction:column;gap:2.5px}
.tsr-btn__bars i{display:block;width:14px;height:2px;background:currentColor}
.tsr-btn__bars i:nth-child(2){width:9px}

/* ----------------------------------------------------------------- header */
.tsr-header{background:var(--paper);border-bottom:1px solid var(--ink)}
.tsr-headbar{max-width:84rem;margin:0 auto;padding:.85rem var(--gut)}
.tsr-brand img{display:block;height:26px;width:auto}
.tsr-nav__link{
  font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:500;
  color:var(--ink);text-decoration:none;font-size:1.02rem;
}
.tsr-nav__link:hover{color:var(--claret)}
.tsr-nav__link[aria-current="page"]{color:var(--claret)}
.tsr-header .tsr-nav{background:var(--tsr-nav-bg)}
/* Mobile panel rows: a hairline between, and the micro-type uppercase that
   their own nav uses. Headings stay sentence case; the uppercase lives here. */
.tsr-header .tsr-nav__link{border-bottom:1px solid var(--rule);font-size:1.12rem}
.tsr-nav__foot{border-top:1px solid var(--ink);margin-top:1.25rem}
.tsr-nav__foot .tsr-btn{width:100%;margin-top:1.25rem}

/* Desktop navigation. MUST be inside this query — mechanics.css sets the
   mobile panel in a max-width query, and a media query adds no specificity,
   so an unscoped rule here would win on a phone too and lay all the links out
   in one row running off the right edge. */
@media (min-width:52.0625rem){
  .tsr-nav__inner{display:flex;align-items:center;gap:1.6rem}
  .tsr-header .tsr-nav__link{border-bottom:0;font-size:1.02rem;min-height:auto}
  .tsr-brand img{height:30px}
}

/* --------------------------------------------------------------- page head */
.tsr-pagehead{background:var(--ink);padding:clamp(2.75rem,5vw,4rem) var(--gut) clamp(2.25rem,4vw,3rem)}
.tsr-pagehead__in{max-width:84rem;margin:0 auto}
.tsr-pagehead h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:0}
.tsr-pagehead .tsr-lede{color:var(--highlight);margin-top:1rem}
.tsr-crumbs{font-size:.95rem;color:var(--dimsage);margin-bottom:.85rem}
.tsr-crumbs a{color:var(--dimsage)}

/* -------------------------------------------------------------------- hero */
/* Flat sage ground, no photograph. The graphic IS the data: every origin they
   sell, plotted on a shared elevation axis. It says "we know where this came
   from" before a word is read, and it does not lean on a stock-looking photo. */
.tsr-hero{background:var(--paper);padding:clamp(2.75rem,6vw,4.75rem) var(--gut) clamp(3rem,6vw,4.5rem)}
.tsr-hero__in{max-width:84rem;margin:0 auto;display:grid;gap:clamp(2.5rem,5vw,4rem)}
.tsr-hero h1{font-size:clamp(2.6rem,7.2vw,5rem);line-height:.99;letter-spacing:-.03em;margin:0}
.tsr-hero h1 em{font-style:normal;color:var(--wine)}
.tsr-hero__sub{margin-top:1.35rem;max-width:46ch}

@media (min-width:60rem){
  .tsr-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
}

/* ---- the elevation axis ---- */
.tsr-axis{border-top:1px solid var(--ink);padding-top:1.1rem}
.tsr-axis__cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.25rem}
.tsr-axis__cap h2{font-size:1.05rem;font-weight:600;margin:0;letter-spacing:-.004em}
.tsr-axis__row{display:grid;grid-template-columns:1fr;gap:.3rem;padding:.6rem 0;border-bottom:1px solid var(--rule)}
.tsr-axis__row:last-child{border-bottom:0}
.tsr-axis__lab{display:flex;align-items:center;gap:.55rem;font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:.98rem;color:var(--ink);line-height:1.2}
.tsr-axis__m{margin-left:auto;font-size:.88rem;color:var(--muted);white-space:nowrap}
/* The track is the 700-2300 MASL range; each bar spans that coffee's own
   published band. Ethiopia's is genuinely only 30m wide, so bars carry a
   min-width to stay visible and the figure is written out beside it. */
.tsr-axis__track{position:relative;height:9px;background:var(--sage)}
.tsr-axis__bar{position:absolute;top:0;bottom:0;background:var(--ink);min-width:5px}
.tsr-axis__bar--wine{background:var(--wine)}
.tsr-axis__scale{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-top:.7rem}
.tsr-axis__note{margin-top:1rem;font-size:.92rem;color:var(--muted)}

@media (min-width:34rem){
  .tsr-axis__row{grid-template-columns:minmax(10.5rem,15rem) 1fr;gap:1rem;align-items:center}
}

/* ------------------------------------------------------------ origin cards */
/* The signature component. Their own site has region, elevation, process and
   tasting notes for every coffee and hides all of it inside a product
   dropdown. Here it is the card. */
.tsr-origins{display:grid;gap:1.25rem;margin-top:2.5rem}
@media (min-width:46rem){.tsr-origins{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:76rem){.tsr-origins{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* A sage panel with a stripe field across its top edge. No border, no radius,
   no shadow — not a white bordered card. */
.tsr-origin{background:var(--paper);padding:0;display:flex;flex-direction:column}
.tsr-band--paper .tsr-origin{background:var(--sage)}
.tsr-origin__bars{display:flex;gap:3px;height:9px;padding:0;background:transparent}
.tsr-origin__bars i{display:block;flex:1 1 auto;background:var(--ink)}
.tsr-origin__bars i:nth-child(n+5){background:var(--rule)}
.tsr-origin--dark .tsr-origin__bars i:nth-child(n+5){background:var(--rule-dark)}
.tsr-origin__in{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1 1 auto}
.tsr-origin__top{display:flex;align-items:flex-start;gap:.75rem}
.tsr-origin__name{font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:1.32rem;line-height:1.14;letter-spacing:-.014em;color:var(--ink);margin:0}
.tsr-origin__price{margin-left:auto;font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:1.1rem;color:var(--wine);white-space:nowrap}
.tsr-origin__cup{margin:1rem 0 0;font-size:1rem;line-height:1.55;color:var(--body)}

/* The sourcing record. A definition list, because that is what it is. */
/* margin-top:auto pins the sourcing record to the BOTTOM of the card, so
   Region/Elevation/Process line up across a row whose cards carry
   different amounts of context above them. Without it the records sit at
   six different heights and the grid stops reading as a table of records. */
.tsr-spec{margin:1.35rem 0 0;margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;font-size:.93rem}
.tsr-spec dt{color:var(--muted);margin:0}
.tsr-spec dd{margin:0;color:var(--ink);font-weight:500;text-align:right}
.tsr-origin__foot{margin-top:auto;padding-top:1.4rem}

/* --------------------------------------------------------------- tap wall */
/* Sixteen taps that rotate constantly. The grid is the point: it is a wall. */
.tsr-tapwall{background:var(--panel);padding:clamp(1.75rem,4vw,2.5rem)}
.tsr-tapgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);margin-top:1.5rem}
@media (max-width:40rem){.tsr-tapgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tsr-tap{background:var(--panel);padding:1rem .85rem;min-height:92px;display:flex;flex-direction:column;gap:.35rem}
.tsr-tap__n{font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:.86rem;color:var(--dimsage)}
.tsr-tap__s{font-size:.92rem;line-height:1.35;color:var(--paper)}
.tsr-tap--open .tsr-tap__s{color:var(--dimsage)}

/* ---------------------------------------------------------------- figures */
.tsr-figs{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule);margin-top:2.25rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:52rem){.tsr-figs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tsr-fig{background:var(--paper);padding:1.4rem 1.1rem}
.tsr-band--sage .tsr-fig{background:var(--sage)}
.tsr-fig b{display:block;font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:clamp(1.9rem,4vw,2.5rem);line-height:1;color:var(--ink);letter-spacing:-.02em}
.tsr-fig span{display:block;margin-top:.5rem;font-size:.93rem;color:var(--muted);line-height:1.4}

/* ------------------------------------------------------------------ media */
.tsr-figure{margin:0}
.tsr-figure img{display:block;width:100%;height:auto}
.tsr-split{display:grid;gap:clamp(2rem,4vw,3.25rem);align-items:center}
@media (min-width:56rem){
  .tsr-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tsr-split--wide-l{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}

/* Photo CTA band. A dark band must never be the last band before the dark
   footer — they fuse into one slab. A photo band closes the page instead,
   because the image gives it its own edge. */
.tsr-photo{position:relative;padding:clamp(3.5rem,8vw,6rem) var(--gut);background:var(--ink);overflow:hidden}
.tsr-photo__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.tsr-photo__in{position:relative;max-width:84rem;margin:0 auto}
.tsr-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,28,22,.92) 0%,rgba(26,28,22,.78) 48%,rgba(26,28,22,.5) 100%)}
.tsr-photo__in{z-index:2}

/* ------------------------------------------------------------------- cards */
.tsr-cards{display:grid;gap:1.25rem;margin-top:2.25rem}
@media (min-width:48rem){.tsr-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:44rem){.tsr-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tsr-card{background:var(--paper);padding:1.6rem 1.5rem 1.75rem;display:flex;flex-direction:column;gap:.7rem;border-top:3px solid var(--ink)}
.tsr-band--paper .tsr-card{background:var(--sage)}
.tsr-card h3{margin:0;font-size:1.26rem}
.tsr-card p{margin:0;font-size:1rem;line-height:1.55}

/* ------------------------------------------------------------------ hours */
.tsr-hours{width:100%;border-collapse:collapse;margin-top:1.25rem}
.tsr-hours th,.tsr-hours td{text-align:left;padding:.62rem 0;border-bottom:1px solid var(--rule);font-weight:400;font-size:1rem}
.tsr-hours td{text-align:right;color:var(--ink);font-weight:500}
.tsr-hours th{color:var(--muted)}
.tsr-footer .tsr-hours th,.tsr-footer .tsr-hours td{border-bottom-color:var(--rule-dark)}
.tsr-footer .tsr-hours th{color:var(--dimsage)}
.tsr-footer .tsr-hours td{color:var(--paper)}

/* ------------------------------------------------------------------ forms */
.tsr-form{margin-top:1.75rem;max-width:40rem}
.tsr-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.tsr-field label{font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:.98rem;color:var(--ink)}
.tsr-field .tsr-hint{font-size:.88rem;color:var(--muted)}
.tsr-field input,.tsr-field select,.tsr-field textarea{
  font:inherit;font-size:1.02rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--rule);border-radius:0;padding:.8rem .9rem;min-height:52px;width:100%;
}
.tsr-band--sage .tsr-field input,.tsr-band--sage .tsr-field select,.tsr-band--sage .tsr-field textarea{background:var(--paper)}
.tsr-field textarea{min-height:140px;resize:vertical}
.tsr-field input:focus-visible,.tsr-field select:focus-visible,.tsr-field textarea:focus-visible{border-color:var(--wine)}
/* A row where one field has a hint and the other does not would otherwise
   misalign its inputs: the labels are different heights. */
.tsr-field-row{display:grid;gap:0 1.1rem;align-items:end}
@media (min-width:40rem){.tsr-field-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tsr-form__note{font-size:.9rem;color:var(--muted);margin-top:.9rem}

/* --------------------------------------------------------------- footer */
.tsr-footer{background:var(--ink);padding:clamp(3rem,6vw,4.5rem) var(--gut) 2rem}
.tsr-footer__in{max-width:84rem;margin:0 auto;display:grid;gap:2.5rem}
@media (min-width:52rem){.tsr-footer__in{grid-template-columns:1.3fr 1fr 1.1fr}}
.tsr-footer img{height:28px;width:auto;display:block}
.tsr-footer h2{font-size:1.08rem;margin:0 0 .9rem;font-weight:600;color:var(--paper)}
.tsr-footer ul{list-style:none;margin:0;padding:0}
.tsr-footer__bot{max-width:84rem;margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--rule-dark);display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;font-size:.9rem;color:var(--dimsage)}

/* --------------------------------------------------- action bar + to top */
.tsr-ab{background:var(--wine);color:var(--paper);font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:600;text-decoration:none;border-radius:0;font-size:1rem}
.tsr-ab--alt{background:var(--ink);color:var(--paper)}
.tsr-top{background:var(--ink);color:var(--paper);border:0;border-radius:0}
.tsr-top svg{width:20px;height:20px;display:block}

/* ------------------------------------------------------------ utilities */
.tsr-wrap{max-width:84rem;margin:0 auto}
.tsr-narrow{max-width:62rem;margin:0 auto}
.tsr-stack > * + *{margin-top:1.15rem}
.tsr-mt0{margin-top:0}

/* The header call to action collapses into the burger panel on a phone, where
   the fixed action bar already carries "Order ahead" and "Call us". Two CTAs
   plus a burger will not fit a 390px bar without the logo shrinking to nothing. */
.tsr-headbar .tsr-btn{min-height:46px;padding:.6rem 1.15rem;font-size:.94rem}
@media (max-width:52rem){
  .tsr-header .tsr-headbar > .tsr-btn{display:none}
}

/* ------------------------------------------------- the enquiry form shell */
/* Class list taken from 010-thesource-enquiries.php. If a class is added
   there and not styled here, it renders unstyled on a live page. */
.tsr-form h3{font-size:clamp(1.5rem,3vw,1.9rem);margin:0 0 .75rem}
.tsr-form__intro{color:var(--body);margin:0 0 1.5rem;max-width:58ch}
.tsr-form__fine{font-size:.9rem;color:var(--muted);margin:.9rem 0 0;max-width:52ch}

/* The honeypot. It must be OFF-SCREEN and not display:none, because a bot
   that can see display:none skips it and the trap stops working. Unstyled,
   this renders as a visible "Leave this empty" field on three live pages. */
.tsr-trap{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.tsr-submit{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.85rem 1.8rem;border:0;border-radius:0;cursor:pointer;
  font-family:Jost,ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:1.02rem;
  background:var(--wine);color:var(--paper);
  transition:background .15s linear;
}
.tsr-submit:hover{background:var(--ink)}

.tsr-note{padding:1rem 1.15rem;margin:0 0 1.5rem;border-left:4px solid var(--ink);font-size:1rem}
.tsr-note--ok{background:var(--paper);border-left-color:var(--ink);color:var(--ink)}
.tsr-band--sage .tsr-note--ok{background:var(--paper)}
.tsr-note--err{background:var(--paper);border-left-color:var(--wine);color:var(--claret)}
.tsr-note a{color:var(--claret)}