/*
Theme Name: Josiah's Coffeehouse
Theme URI: https://preview-fb83de0f.sitereboots.com/
Author: Site Reboots
Author URI: https://sitereboots.com/
Description: Block theme for Josiah's Coffeehouse, Cafe & Bakery, Sioux Falls. Behaviour lives in assets/mechanics.css; this file is the skin.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: josiahs
*/

/* ---------------------------------------------------------------------------
   Josiah's is a room where you walk in, look up at a wall of hand-lettered
   blackboards, and order. So the board is the organising idea: the recurring
   component here is a slate panel with a chalk hairline frame set in from the
   edge, and a chalk double rule under its heading. The menu is built out of
   them, because that is how you read it standing at the counter.

   Palette is all theirs. The crimson and the near-black are measured off their
   own crest; the teal is their cafe chairs; the brass is the pendant bulbs.
   Every pair in here was checked with palette.py before a line was written.
   ------------------------------------------------------------------------- */

:root{
  /* --- the contract mechanics.css needs ------------------------------- */
  --jsh-focus:#CC0C2A;
  --jsh-nav-bg:#111A1F;          /* must be opaque: the panel is fixed */
  --jsh-burger:#E8E6DB;
  --jsh-header-h:74px;

  /* --- the palette ---------------------------------------------------- */
  --jsh-slate:#111A1F;           /* their crest ring, and the chalkboard */
  --jsh-slate-2:#1A252B;         /* a board lifted off a slate band */
  --jsh-ink:#2B373D;             /* body text, 12.23 on white */
  --jsh-muted:#5C686E;           /* 5.74 on white, 4.84 on stone */
  --jsh-paper:#FFFFFF;
  --jsh-stone:#E7EDEC;           /* their chairs, taken a long way down */
  --jsh-chalk:#E8E6DB;           /* 14.08 on slate */
  --jsh-crimson:#CC0C2A;         /* their crest red. Fills only */
  --jsh-claret:#B00A24;          /* the same red, dark enough for inline links */
  --jsh-teal:#2F6168;            /* eyebrows and secondary buttons */
  --jsh-brass:#E0A94E;           /* on slate only, 8.36 */
  --jsh-mist:#8FB8B8;            /* on slate only, 8.16 */
  --jsh-rule:#D7DEDC;
  --jsh-chalk-rule:rgba(232,230,219,.26);

  --jsh-band-y:clamp(3.25rem,6.5vw,5.5rem);
  --jsh-gutter:1.25rem;
}

/* Square corners everywhere. Not a stylistic tic: a chalkboard, a subway tile
   and a menu board are all rectangles, and keeping one radius for the whole
   site is what stops it drifting. */
.jsh-btn,.jsh-board,.jsh-card,.jsh-form input,.jsh-form select,.jsh-form textarea,
.jsh-submit,.jsh-ab,.jsh-note,.jsh-pill,.jsh-top{border-radius:0}

/* --------------------------------------------------------------- bands --- */
.jsh-band{
  padding-block:var(--jsh-band-y);
  padding-inline:var(--jsh-gutter);
  background:var(--jsh-paper);
  color:var(--jsh-ink);
}
.jsh-band--stone{background:var(--jsh-stone)}
.jsh-band--slate{background:var(--jsh-slate);color:var(--jsh-chalk)}
.jsh-band--tight{padding-block:calc(var(--jsh-band-y) * .62)}
.jsh-band--flush{padding-block:0}

/* ── Dark surfaces, in one place ──────────────────────────────────────────
   There are four of them and they are not all bands: the slate band, the photo
   band, the page head and the board, which can sit inside a LIGHT band. Every
   "on dark" rule has to name all four or something inherits a dark colour from
   theme.json onto a dark ground. Two shipped that way in this build: the photo
   band's h2 was slate on a photograph, and a board's eyebrow was teal on slate
   at 2.54:1. Both passed the overflow and button checks.

   The footer is the fifth: it sets its own link and paragraph colours, so it
   only joins the lists it does not already cover. Its `.jsh-deets b` labels
   were teal on slate at 2.54:1 on all six pages.

   Add a dark surface, add it to every list below. */
.jsh-band--slate h1,.jsh-band--slate h2,.jsh-band--slate h3,.jsh-band--slate h4,
.jsh-band--photo h1,.jsh-band--photo h2,.jsh-band--photo h3,.jsh-band--photo h4,
.jsh-pagehead h1,.jsh-pagehead h2,.jsh-pagehead h3,.jsh-pagehead h4,
.jsh-board h1,.jsh-board h2,.jsh-board h3,.jsh-board h4{color:var(--jsh-chalk)}

.jsh-band--slate .jsh-eyebrow,.jsh-band--photo .jsh-eyebrow,
.jsh-pagehead .jsh-eyebrow,.jsh-board .jsh-eyebrow,
.jsh-footer .jsh-eyebrow{color:var(--jsh-brass)}

.jsh-band--slate .jsh-lede,.jsh-band--slate p,
.jsh-band--photo .jsh-lede,.jsh-band--photo p,
.jsh-pagehead .jsh-lede,.jsh-pagehead p,
.jsh-board .jsh-lede,.jsh-board p{color:rgba(232,230,219,.88)}

.jsh-band--slate .jsh-sectionhead p,.jsh-band--photo .jsh-sectionhead p,
.jsh-pagehead .jsh-sectionhead p,.jsh-board .jsh-sectionhead p{color:rgba(232,230,219,.8)}

.jsh-band--slate a:not(.jsh-btn),.jsh-band--photo a:not(.jsh-btn),
.jsh-pagehead a:not(.jsh-btn),.jsh-board a:not(.jsh-btn){color:var(--jsh-brass)}
.jsh-band--slate a:not(.jsh-btn):hover,.jsh-band--photo a:not(.jsh-btn):hover,
.jsh-pagehead a:not(.jsh-btn):hover,.jsh-board a:not(.jsh-btn):hover{color:var(--jsh-chalk)}

.jsh-band--slate .jsh-rule2,.jsh-band--photo .jsh-rule2,
.jsh-pagehead .jsh-rule2,.jsh-board .jsh-rule2,.jsh-footer .jsh-rule2{
  border-top-color:var(--jsh-brass);
  border-bottom-color:var(--jsh-chalk-rule);
}
.jsh-band--slate .jsh-fig figcaption,.jsh-band--photo .jsh-fig figcaption,
.jsh-pagehead .jsh-fig figcaption,.jsh-board .jsh-fig figcaption{color:rgba(232,230,219,.7)}
.jsh-board .jsh-deets b,.jsh-band--photo .jsh-deets b,
.jsh-band--slate .jsh-deets b,.jsh-footer .jsh-deets b{color:var(--jsh-mist)}
.jsh-board .jsh-deets,.jsh-board .jsh-deets a{color:var(--jsh-chalk)}

/* A photo band so a page can close dark without fusing into the footer. */
.jsh-band--photo{
  position:relative;background:var(--jsh-slate);color:var(--jsh-chalk);
  padding-block:calc(var(--jsh-band-y) * 1.15);
}
.jsh-band--photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--jsh-photo);background-size:cover;background-position:center 58%;
}
.jsh-band--photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(17,26,31,.97) 0%,rgba(17,26,31,.93) 38%,rgba(17,26,31,.74) 68%,rgba(17,26,31,.58) 100%),
    linear-gradient(rgba(17,26,31,.34),rgba(17,26,31,.34));
}
.jsh-band--photo > *{position:relative;z-index:2}

/* ---------------------------------------------------------- typography --- */
.jsh-eyebrow{
  /* Newsreader italic, sentence case. Deliberately NOT an uppercase
     letterspaced eyebrow: that is the agency's own tell. */
  display:block;
  font-family:Newsreader,Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:1.08rem;letter-spacing:0;text-transform:none;
  color:var(--jsh-teal);
  margin:0 0 .7rem;
}
.jsh-lede{
  font-size:clamp(1.18rem,1.9vw,1.4rem);line-height:1.56;
  color:var(--jsh-ink);max-width:40ch;
}

/* The chalk double rule under a heading. The whole motif in four lines. */
.jsh-rule2{
  margin:1.1rem 0 0;border:0;height:5px;
  border-top:2px solid var(--jsh-crimson);
  border-bottom:1px solid var(--jsh-rule);
  max-width:4.5rem;
}
.jsh-rule2--wide{max-width:none}

.jsh-sectionhead{max-width:46rem;margin-bottom:2.25rem}
.jsh-sectionhead h2{margin:0}
.jsh-sectionhead p{margin:1.1rem 0 0;color:var(--jsh-muted)}

.jsh-prose > * + *{margin-top:1.15rem}
.jsh-prose{max-width:38rem}
.jsh-prose h3{margin-top:2.25rem}
/* :not(.jsh-btn) on every descendant link rule. `.jsh-prose a` is (0,2,0) and
   beats `.jsh-btn` (0,1,0), so a button sitting inside a prose block took the
   claret link colour: claret on crimson is 1.25:1. It looked like a disabled
   button and the contrast audit reads the button as a link, not a failure. */
.jsh-prose a:not(.jsh-btn){color:var(--jsh-claret);text-underline-offset:3px}
.jsh-prose a:not(.jsh-btn):hover{color:var(--jsh-slate)}

.jsh-fig{margin:0}
.jsh-fig img{display:block;width:100%}
.jsh-fig figcaption{
  margin-top:.65rem;font-size:.95rem;font-style:italic;color:var(--jsh-muted);
}

/* ------------------------------------------------------------- buttons --- */
.jsh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.6rem;
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:.98rem;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;border:0;cursor:pointer;
  background:var(--jsh-crimson);color:var(--jsh-paper);
  transition:background .16s ease,color .16s ease;
}
.jsh-btn:hover{background:var(--jsh-claret);color:var(--jsh-paper)}
.jsh-btn--line{
  background:transparent;color:var(--jsh-slate);
  box-shadow:inset 0 0 0 1px var(--jsh-slate);
}
.jsh-btn--line:hover{background:var(--jsh-slate);color:var(--jsh-paper)}
.jsh-btn--chalk{
  background:transparent;color:var(--jsh-chalk);
  box-shadow:inset 0 0 0 1px var(--jsh-chalk-rule);
}
.jsh-btn--chalk:hover{background:var(--jsh-chalk);color:var(--jsh-slate)}
.jsh-btn--teal{background:var(--jsh-teal);color:var(--jsh-paper)}
.jsh-btn--teal:hover{background:#255056;color:var(--jsh-paper)}

.jsh-btnrow{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

/* --------------------------------------------------------------- board --- */
/* The recurring component. A slate panel with a chalk hairline set in from the
   edge, like the timber-framed boards over their counter. */
.jsh-board{
  position:relative;
  background:var(--jsh-slate);color:var(--jsh-chalk);
  padding:clamp(1.6rem,3.2vw,2.5rem);
}
.jsh-band--slate .jsh-board{background:var(--jsh-slate-2)}
.jsh-board::before{
  content:"";position:absolute;inset:8px;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--jsh-chalk-rule);
}
.jsh-board > *{position:relative}
.jsh-board__head{margin:0 0 1.5rem}
.jsh-board__head h2,.jsh-board__head h3{margin:0}
.jsh-board__note{
  margin:.75rem 0 0;font-style:italic;font-size:1rem;
  color:rgba(232,230,219,.72);max-width:48ch;
}

/* --------------------------------------------------- the menu, on boards -- */
.jsh-menu{list-style:none;margin:0;padding:0}
.jsh-menu > li + li{
  margin-top:1.15rem;padding-top:1.15rem;
  border-top:1px solid var(--jsh-chalk-rule);
}
.jsh-menu__row{display:flex;align-items:baseline;gap:.6rem}
.jsh-menu__name{
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:1.02rem;letter-spacing:.045em;text-transform:uppercase;
  color:var(--jsh-chalk);
}
/* The dotted leader a printed board has, and the reason name and price read as
   one line instead of two columns that drift apart on a narrow screen. */
.jsh-menu__lead{
  flex:1 1 1.5rem;min-width:1rem;height:0;
  border-bottom:1px dotted rgba(232,230,219,.34);
  transform:translateY(-.32em);
}
.jsh-menu__price{
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:1.02rem;font-variant-numeric:tabular-nums;
  color:var(--jsh-brass);white-space:nowrap;
}
.jsh-menu__desc{
  margin:.4rem 0 0;font-size:1rem;line-height:1.55;
  color:rgba(232,230,219,.78);max-width:54ch;
}
.jsh-menu__opts{
  margin:.45rem 0 0;font-size:.98rem;font-style:italic;
  color:var(--jsh-mist);
}
.jsh-boards{display:grid;gap:1.5rem}
@media (min-width:60rem){
  .jsh-boards--2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}

/* ---------------------------------------------------------------- hero --- */
/* Split: their headline on a board, their neon sign beside it. Both previous
   reboots used a full-bleed photo under a gradient, so this one does not. */
.jsh-hero{
  display:grid;grid-template-columns:1fr;
  background:var(--jsh-slate);color:var(--jsh-chalk);
}
.jsh-hero__text{
  padding:clamp(2.5rem,6vw,4.75rem) var(--jsh-gutter);
  display:flex;flex-direction:column;justify-content:center;
}
.jsh-hero__inner{max-width:34rem;margin-inline:auto;width:100%}
.jsh-hero h1{
  margin:0;color:var(--jsh-chalk);
  font-size:clamp(2.25rem,6.2vw,3.9rem);line-height:1.04;letter-spacing:.002em;
}
.jsh-hero__eyebrow{color:var(--jsh-brass)}
.jsh-hero__lede{
  margin:1.35rem 0 0;font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.56;
  color:rgba(232,230,219,.86);max-width:36ch;
}
.jsh-hero__media{position:relative;min-height:16rem}
.jsh-hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* The seam between the slate and the photograph, in their crimson. */
.jsh-hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 3px 0 0 var(--jsh-crimson);
}
.jsh-hero__strip{
  display:flex;flex-wrap:wrap;gap:0;
  background:var(--jsh-slate-2);
  border-top:1px solid var(--jsh-chalk-rule);
}
.jsh-hero__fact{
  flex:1 1 11rem;padding:1.15rem var(--jsh-gutter);
  border-left:1px solid var(--jsh-chalk-rule);
}
.jsh-hero__fact:first-child{border-left:0}
.jsh-hero__fact dt{
  font-family:Newsreader,Georgia,serif;font-style:italic;font-size:.98rem;
  color:var(--jsh-mist);margin:0 0 .25rem;
}
.jsh-hero__fact dd{
  margin:0;
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:1.04rem;letter-spacing:.035em;text-transform:uppercase;
  color:var(--jsh-chalk);
}

@media (min-width:52.0625rem){
  .jsh-hero{grid-template-columns:1.04fr .96fr}
  .jsh-hero__media{min-height:30rem}
  .jsh-hero__media::after{box-shadow:inset 3px 0 0 0 var(--jsh-crimson)}
  .jsh-hero__text{padding-inline:clamp(2rem,4.5vw,4rem)}
  .jsh-hero__inner{margin-inline:0 auto}
}

/* --------------------------------------------------------------- cards --- */
.jsh-grid{display:grid;gap:1.75rem}
@media (min-width:44rem){ .jsh-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:58rem){
  .jsh-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jsh-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* NEVER height:100% on a grid item. See mechanics.css. */
.jsh-card{
  background:var(--jsh-paper);
  box-shadow:inset 0 0 0 1px var(--jsh-rule);
  display:flex;flex-direction:column;
}
.jsh-band--stone .jsh-card{box-shadow:inset 0 0 0 1px #D2DBDA}
.jsh-card__media{display:block;margin:0}
.jsh-card__media img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.jsh-card__body{padding:1.5rem 1.5rem 1.65rem}
.jsh-card h3{margin:0;font-size:1.22rem}
.jsh-card p{margin:.7rem 0 0;color:var(--jsh-ink)}
.jsh-card__more{
  display:inline-block;margin-top:1rem;
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--jsh-claret);text-decoration:none;
}
.jsh-card__more:hover{color:var(--jsh-slate);text-decoration:underline}

/* A row of plain facts, no card chrome. */
.jsh-facts{display:grid;gap:1.5rem;list-style:none;margin:0;padding:0}
@media (min-width:44rem){ .jsh-facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:62rem){ .jsh-facts{grid-template-columns:repeat(4,minmax(0,1fr))} }
.jsh-facts li{border-top:2px solid var(--jsh-crimson);padding-top:1.1rem}
.jsh-band--slate .jsh-facts li,.jsh-band--photo .jsh-facts li,
.jsh-board .jsh-facts li{border-top-color:var(--jsh-brass)}
.jsh-facts h3{margin:0 0 .55rem;font-size:1.14rem}
.jsh-facts p{margin:0;color:var(--jsh-muted)}
.jsh-band--slate .jsh-facts p,.jsh-band--photo .jsh-facts p,
.jsh-board .jsh-facts p{color:rgba(232,230,219,.78)}

/* ---------------------------------------------------------------- hours -- */
.jsh-hours{width:100%;border-collapse:collapse;margin:0}
.jsh-hours th,.jsh-hours td{
  text-align:left;padding:.62rem 0;
  border-bottom:1px solid var(--jsh-chalk-rule);
  font-size:1.02rem;
}
.jsh-hours th{
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--jsh-chalk);font-size:.95rem;
}
.jsh-hours td{
  text-align:right;font-variant-numeric:tabular-nums;
  color:var(--jsh-chalk);
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;letter-spacing:.03em;
}
.jsh-hours tr:last-child th,.jsh-hours tr:last-child td{border-bottom:0}

/* A single labelled line, used for the address and the phone. */
.jsh-deets{list-style:none;margin:0;padding:0}
.jsh-deets li + li{margin-top:1.15rem}
.jsh-deets b{
  display:block;
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:400;
  font-size:1rem;color:var(--jsh-teal);margin-bottom:.2rem;
}
.jsh-deets a{color:inherit}

.jsh-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .75rem;margin:0 .4rem .4rem 0;
  background:var(--jsh-stone);color:var(--jsh-ink);
  font-size:.95rem;
}
.jsh-band--slate .jsh-pill,.jsh-band--photo .jsh-pill,
.jsh-board .jsh-pill{background:rgba(232,230,219,.1);color:var(--jsh-chalk)}

/* -------------------------------------------------------------- header --- */
.jsh-header{background:var(--jsh-slate);border-bottom:3px solid var(--jsh-crimson)}
.jsh-headbar{
  max-width:82rem;margin:0 auto;
  padding:.85rem var(--jsh-gutter);
  min-height:74px;
}
.jsh-brand img{display:block;height:40px;width:auto}
.jsh-brand__sub{
  display:none;
  margin-left:.9rem;padding-left:.9rem;
  border-left:1px solid var(--jsh-chalk-rule);
  font-family:Newsreader,Georgia,serif;font-style:italic;font-size:.98rem;
  color:var(--jsh-mist);
}
.jsh-nav__link{
  /* No `display` here. mechanics.css sets the mobile panel's links inside a
     max-width query, and a media query adds no specificity, so a top-level
     display on an owned selector wins at every width. The desktop bar makes
     these flex items anyway. */
  text-decoration:none;
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:500;letter-spacing:.055em;text-transform:uppercase;font-size:.93rem;
  color:var(--jsh-chalk);
}
.jsh-nav__link:hover{color:var(--jsh-brass)}
.jsh-nav__link[aria-current="page"]{color:var(--jsh-brass)}
.jsh-nav__foot{border-top:1px solid var(--jsh-chalk-rule);margin-top:1.25rem}
.jsh-nav__foot .jsh-btn{width:100%;margin-bottom:.75rem}
.jsh-nav__foot p{color:var(--jsh-mist);font-size:1rem;margin:.75rem 0 0}
.jsh-nav__foot a:not(.jsh-btn){color:var(--jsh-chalk)}
.jsh-headbar .jsh-btn{min-height:46px;padding:.6rem 1.15rem;font-size:.9rem}

/* Mobile panel: the links sit on slate, so they need the chalk treatment and a
   rule between them. These are inside the mobile query on purpose. */
@media (max-width:52rem){
  .jsh-header .jsh-nav__link{
    border-bottom:1px solid var(--jsh-chalk-rule);
    font-size:1.08rem;
  }
  .jsh-header .jsh-headbar .jsh-btn{display:none}
}

/* Desktop navigation. Scoped, because mechanics.css sets the mobile panel
   inside a max-width query and a media query adds no specificity. */
@media (min-width:52.0625rem){
  .jsh-nav{margin-left:auto}
  .jsh-nav__inner{display:flex;align-items:center;gap:1.6rem}
  .jsh-nav__link{padding-block:.35rem}
  .jsh-brand__sub{display:block}
  .jsh-brand img{height:44px}
}
@media (min-width:52.0625rem) and (max-width:66rem){
  .jsh-nav__inner{gap:1.1rem}
  .jsh-nav__link{font-size:.87rem;letter-spacing:.04em}
  .jsh-brand__sub{display:none}
}

/* -------------------------------------------------------------- footer --- */
.jsh-footer{
  background:var(--jsh-slate);color:rgba(232,230,219,.82);
  border-top:3px solid var(--jsh-crimson);
  padding:calc(var(--jsh-band-y) * .8) var(--jsh-gutter) 1.5rem;
}
.jsh-footer__inner{
  max-width:82rem;margin:0 auto;
  display:grid;gap:2.25rem;
}
@media (min-width:46rem){ .jsh-footer__inner{grid-template-columns:1.3fr 1fr 1fr} }
.jsh-footer h2,.jsh-footer h3{
  font-size:1rem;letter-spacing:.045em;color:var(--jsh-chalk);margin:0 0 1rem;
}
.jsh-footer ul{list-style:none;margin:0;padding:0}
.jsh-footer a:not(.jsh-btn){color:rgba(232,230,219,.82);text-decoration:none}
.jsh-footer a:not(.jsh-btn):hover{color:var(--jsh-brass);text-decoration:underline}
.jsh-footer__mark{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.jsh-footer__mark img{display:block;width:62px;height:62px}
.jsh-footer__mark span{
  font-family:Newsreader,Georgia,serif;font-style:italic;font-size:1.05rem;
  color:var(--jsh-mist);
}
.jsh-footer__base{
  max-width:82rem;margin:2.5rem auto 0;padding-top:1.4rem;
  border-top:1px solid var(--jsh-chalk-rule);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  font-size:.92rem;color:rgba(232,230,219,.62);
}

/* ---------------------------------------------------------------- forms -- */
.jsh-form{max-width:44rem}
.jsh-form h3{margin:0 0 .9rem}
.jsh-form__intro{margin:0 0 2rem;color:var(--jsh-muted)}
.jsh-form__intro a:not(.jsh-btn){color:var(--jsh-claret)}
.jsh-field{margin-bottom:1.35rem}
/* align-items:end so a field WITH a hint and one without still line their
   inputs up along the bottom. */
.jsh-field-row{display:grid;gap:1.35rem;align-items:end}
@media (min-width:38rem){ .jsh-field-row{grid-template-columns:repeat(2,minmax(0,1fr))} }
.jsh-form label{
  display:block;margin-bottom:.4rem;
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:.93rem;letter-spacing:.045em;text-transform:uppercase;
  color:var(--jsh-slate);
}
.jsh-hint{
  display:block;margin-top:.2rem;
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:400;
  font-size:.97rem;letter-spacing:0;text-transform:none;color:var(--jsh-muted);
}
.jsh-form input,.jsh-form select,.jsh-form textarea{
  width:100%;min-height:52px;padding:.8rem .9rem;
  font-family:Newsreader,Georgia,serif;font-size:1.05rem;
  color:var(--jsh-ink);background:var(--jsh-paper);
  border:1px solid var(--jsh-rule);
}
.jsh-form textarea{min-height:9rem;resize:vertical}
.jsh-form input:focus,.jsh-form select:focus,.jsh-form textarea:focus{
  outline:0;border-color:var(--jsh-slate);box-shadow:inset 0 0 0 1px var(--jsh-slate);
}
.jsh-submit{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.85rem 1.8rem;width:auto;
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:.98rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--jsh-crimson);color:var(--jsh-paper);border:0;cursor:pointer;
}
.jsh-submit:hover{background:var(--jsh-claret)}
.jsh-form__fine{margin:1.1rem 0 0;font-size:.95rem;color:var(--jsh-muted)}
/* Off-screen rather than display:none, so a bot still fills it. */
.jsh-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.jsh-note{padding:1.1rem 1.25rem;margin:0 0 1.75rem;font-size:1.03rem}
.jsh-note--ok{background:#E7EDEC;box-shadow:inset 0 0 0 1px #BCCFCD;color:var(--jsh-ink)}
.jsh-note--ok a{color:var(--jsh-claret)}
.jsh-note--err{background:#FBE9EC;box-shadow:inset 0 0 0 1px #E9BCC4;color:#7A0A1C}

/* ------------------------------------------------- mobile action bar ----- */
.jsh-ab{
  font-family:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:.95rem;letter-spacing:.045em;text-transform:uppercase;
  background:var(--jsh-crimson);color:var(--jsh-paper);
  box-shadow:0 2px 14px rgba(17,26,31,.3);
}
.jsh-ab--call{background:var(--jsh-slate);color:var(--jsh-chalk)}

.jsh-top{
  border:0;background:var(--jsh-slate);color:var(--jsh-chalk);
  box-shadow:0 2px 14px rgba(17,26,31,.3);
}
.jsh-top:hover{background:var(--jsh-crimson);color:var(--jsh-paper)}

/* ------------------------------------------------------ page furniture --- */
.jsh-pagehead{
  background:var(--jsh-slate);color:var(--jsh-chalk);
  padding:clamp(2.5rem,5vw,4rem) var(--jsh-gutter) clamp(2.25rem,4vw,3rem);
}
.jsh-pagehead__inner{max-width:68rem;margin:0 auto}
.jsh-pagehead h1{margin:0}
.jsh-pagehead .jsh-lede{margin-top:1.2rem;max-width:46ch}

.jsh-crumbs{
  padding:.9rem var(--jsh-gutter);background:var(--jsh-stone);
  font-size:.95rem;color:var(--jsh-muted);
}
.jsh-crumbs__inner{max-width:68rem;margin:0 auto}
.jsh-crumbs a{color:var(--jsh-claret);text-decoration:none}
.jsh-crumbs a:hover{text-decoration:underline}

.jsh-split{display:grid;gap:2.5rem;align-items:start}
@media (min-width:56rem){
  .jsh-split{grid-template-columns:1.15fr .85fr;gap:3.5rem}
  .jsh-split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jsh-split--flip > :first-child{order:2}
}

/* 16/10 full-bleed is a 900px-tall map on a desktop. Cap it. */
.jsh-map{display:block;width:100%;border:0;aspect-ratio:21/9;max-height:440px;filter:grayscale(.2)}
@media (max-width:52rem){.jsh-map{aspect-ratio:4/3;max-height:none}}

/* WordPress wraps our markup in a group whose padding we do not want, because
   .jsh-band carries its own. */
.wp-block-group.jsh-band{max-width:none}
.jsh-inner{max-width:68rem;margin:0 auto}
.jsh-inner--wide{max-width:82rem}