/*
Theme Name: J&J Catering
Theme URI: https://jandjcatering.com
Author: Almena Labs
Author URI: https://almenalabs.com
Description: Custom block theme for J&J Catering — a family-run catering business in the San Diego area. Hand-coded, no page builders. Design tokens live in theme.json; everything the client edits is a locked pattern.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jandj
Tags: block-theme, full-site-editing, catering, restaurant, one-column, custom-colors, custom-menu
*/

/*
 * PORTED FROM design-system/APPROVED-DESIGN.html (mockup 15, approved
 * 2026-08-18). Do not hand-rewrite this from a description of the design.
 *
 * Three attempts at rebuilding these components from notes produced three
 * different wrong answers: the blue and purple fields came out as pale washes
 * because the pale tokens are the TEXT colour on those grounds, the signboard
 * came out entirely dark when it is a light paper card with a dark header
 * strip and a yellow rule, the menu section came out as a photo-card grid
 * when it is alternating feature blocks, the full green vegan panel shrank to
 * a line of green text, and the scroll reveal was dropped completely.
 *
 * Every one of those was visible in this file. The failure each time was
 * working from a summary instead of the source, so the source is now the
 * source: the approved stylesheet is ported verbatim below and the patterns
 * emit its markup.
 *
 * Tokens live in theme.json and are mapped onto the design's variable names
 * at the top of this file, so the ported rules resolve unchanged.
 */

:root {
	/* The design's own names, resolved from the theme.json palette so the
	   ported rules below work untouched. */
	--yellow: var(--wp--preset--color--yellow);
	--yellow-lt: #FFD250;
	--ink: var(--wp--preset--color--ink);
	--ink-2: #3A2226;
	--ink-3: #5A4A44;
	--on-yel-2: #4A2E08;
	--night: var(--wp--preset--color--night);
	--blue: var(--wp--preset--color--blue);
	--blue-field: #2B5FD4;
	--sky: var(--wp--preset--color--sky);
	--cobalt: #1B4FA8;
	--blue-d: #123E86;
	--red: var(--wp--preset--color--red);
	--red-lt: #FF6E5C;
	--red-d: #98180E;
	--green: var(--wp--preset--color--green);
	--green-d: #0A6E4A;
	--gold: var(--wp--preset--color--gold);
	--purple: var(--wp--preset--color--purple);
	--purple-lt: #C9A6F7;
	--lilac: var(--wp--preset--color--lilac);
	--masa: var(--wp--preset--color--masa);
	--masa-2: #EFE3D0;
	--white: #FFFFFF;
	--chalk: #FFF8EE;
	--bone: #FFF6EE;
	--bone-2: #E4D3C8;
	--bone-3: #C9B8AE;
	--paper: var(--wp--preset--color--paper);
	--corn: #FFE8BE;
	--cream: var(--wp--preset--color--cream);
	--on-cream-2: #6B4F3A;
	--on-board-2: #5B4148;
	--on-board-hd: #C9BDB2;
	--hair-lt: rgba(255,248,238,.18);
	--hair-lt-2: rgba(255,248,238,.30);
	--hair-dk: rgba(22,16,14,.16);
	--hair-blue: rgba(231,237,251,.34);
	--display: var(--wp--preset--font-family--display);
	--body: var(--wp--preset--font-family--body);
	--ease: cubic-bezier(.32,.72,0,1);
	--ease-out: cubic-bezier(.16,1,.3,1);
	--shell: 1280px;
	--gut: clamp(1.15rem,4vw,4rem);
	--band: clamp(4.5rem,9vw,8rem);
	--stack: clamp(2.6rem,5.5vw,4.2rem);
	--r: 24px;
	--r-sm: 14px;
	--focus: #1A4AD6;
}

/* ---- ported component styles ---- */

/* ============================================================
   1. TOKENS
   Five accents, each owning a whole field: yellow, red, blue,
   green, purple. They are never lined up beside one another as a
   stripe, a fringe or a run of differently coloured pills. Ratios
   are written beside any value whose job is to carry text.
   ============================================================ */


/* ============================================================
   2. RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .24vw,1.09rem);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* height:auto matters. The width and height attributes on every img are
   presentational hints, so without this they beat aspect-ratio. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
ul{list-style:none}
h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}
::selection{background:var(--ink);color:var(--yellow)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--chalk);
  padding:.85rem 1.3rem;font-weight:700;border-radius:0 0 12px 0;
}
.skip:focus{left:0}

/* ============================================================
   3. FIELDS
   One room, one ground. The colour change is the doorway.
   ============================================================ */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);position:relative}
.section{position:relative;padding-block:var(--band)}

.f-yel{background:var(--yellow);color:var(--ink)}
.f-ink{background:var(--ink);color:var(--chalk);--focus:#FFC20E}
.f-night{background:var(--night);color:var(--chalk);--focus:#FFC20E}
.f-masa{background:var(--masa);color:var(--ink)}
.f-white{background:var(--white);color:var(--ink)}
.f-cream{background:var(--cream);color:var(--ink)}
.f-blue{background:var(--blue-field);color:var(--chalk);--focus:#FFC20E}
.f-purple{background:var(--purple);color:var(--bone);--focus:#FFC20E}

/* ============================================================
   4. TYPE SCALE
   ============================================================ */
.d1{font-size:clamp(2.8rem,7.4vw,6rem);letter-spacing:-.038em;line-height:.92}
.d2{font-size:clamp(2.2rem,5.2vw,4.2rem);letter-spacing:-.034em;line-height:.95}
.d3{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.026em}
.lede{font-size:clamp(1.05rem,.98rem + .42vw,1.28rem);line-height:1.56;max-width:56ch}
.small{font-size:.83rem;line-height:1.55}

/* the two or three picked out words. Display sizes only. */
.pop{color:var(--blue)}
.f-ink .pop,.f-night .pop,.f-blue .pop,.f-purple .pop{color:var(--yellow)}

.f-yel .lede,.f-yel .dim{color:var(--on-yel-2)}
.f-masa .lede,.f-masa .dim{color:var(--ink-2)}
.f-white .lede,.f-white .dim{color:var(--ink-2)}
.f-cream .lede,.f-cream .dim{color:var(--on-cream-2)}
.f-ink .lede,.f-ink .dim,.f-night .lede,.f-night .dim{color:var(--bone-3)}
.f-blue .lede,.f-blue .dim{color:var(--sky)}
.f-purple .lede,.f-purple .dim{color:var(--lilac)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  border-radius:999px;padding:.38rem .95rem;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  border:1px solid var(--hair-dk);
  background:rgba(22,16,14,.06);
  color:var(--ink);
  margin-bottom:1.5rem;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--hue,var(--ink));flex:none}
.f-ink .eyebrow,.f-night .eyebrow,.f-blue .eyebrow,.f-purple .eyebrow{
  border-color:var(--hair-lt-2);background:rgba(255,248,238,.09);color:var(--chalk);
}
.head-rule{height:1px;width:100%;background:var(--hair-dk);margin-bottom:1.8rem}

/* ============================================================
   5. BUTTONS AND LINKS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  border-radius:999px;padding:.8rem 1.45rem;
  font-family:var(--body);font-size:.94rem;font-weight:700;letter-spacing:-.005em;
  border:2px solid transparent;cursor:pointer;
  transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-red{background:var(--red);color:var(--ink)}
.btn-red:hover{background:var(--red-lt)}
.btn-ink{background:var(--ink);color:var(--chalk)}
.btn-ink:hover{background:#2A1F1B}
.btn-out{background:transparent;color:currentColor;border-color:currentColor}
.btn-out:hover{background:rgba(22,16,14,.08)}
.f-ink .btn-out:hover,.f-night .btn-out:hover,.f-blue .btn-out:hover,.f-purple .btn-out:hover{background:rgba(255,248,238,.12)}
.btn-chalk{background:var(--chalk);color:var(--ink)}
.btn-chalk:hover{background:var(--yellow)}
.btn-yel{background:var(--yellow);color:var(--ink)}
.btn-yel:hover{background:var(--yellow-lt)}
.btn-ghost{background:transparent;color:var(--chalk);border-color:var(--hair-lt-2)}
.btn-ghost:hover{background:rgba(255,248,238,.12);border-color:var(--chalk)}

.tlink{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:700;font-size:.93rem;
  padding-bottom:.15rem;border-bottom:2px solid currentColor;
  transition:gap .4s var(--ease),color .4s var(--ease);
}
.tlink:hover{gap:.8rem}
.tlink svg{width:14px;height:10px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.f-white .tlink{color:var(--blue)}
.f-yel .tlink{color:var(--ink)}
.f-cream .tlink{color:var(--red-d)}
.f-masa .tlink{color:var(--blue-d)}
.f-ink .tlink,.f-night .tlink{color:var(--yellow)}
.f-blue .tlink{color:var(--chalk)}
.f-purple .tlink{color:var(--yellow)}
/* a menu board is always a dark card, whatever field it stands on, so the link
   inside it takes the board's own colour rather than the room's */
.board .tlink{color:var(--gold)}
.board .tlink:hover{color:var(--chalk)}

/* ============================================================
   6. SCROLL REVEAL
   The visible state is the default. The hidden state is applied
   only once the head script has proved scripting is on, and it is
   lifted for reduced motion. No script, no reveal, no blank page.
   ============================================================ */
html.js [data-rv]{
  opacity:0;transform:translate3d(0,2.4rem,0);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);
}
html.js [data-rv].in{opacity:1;transform:none}

/* ============================================================
   7. NAV : mockup 11's short black pill, with its red
   The badge carries the name, so there is no wordmark beside it.
   The mobile menu is a native details element, which is why the
   whole nav still opens with scripting switched off.
   ============================================================ */
.navwrap{position:fixed;inset:1rem 0 auto;z-index:80;display:flex;justify-content:center;padding-inline:var(--gut);pointer-events:none}
.nav{
  pointer-events:auto;position:relative;
  width:max-content;max-width:100%;
  display:flex;align-items:center;gap:.3rem;
  background:var(--ink);color:var(--chalk);
  border-radius:999px;padding:.38rem .38rem .38rem 1.15rem;
  box-shadow:0 16px 36px -18px rgba(11,7,8,.9);
  --focus:#FFC20E;
}
/* THE REAL LOGO. The badge file still carries a sliver of the cream menu card
   in its corners, so it is masked to a circle and scaled a few percent to push
   that outside the mask. Its ground is nearly black, so on any dark field it
   gets a gold ring to lift it off. */
.mark{display:block;border-radius:50%;overflow:hidden;flex:none;background:#0A1024}
.mark img{width:106%;height:106%;max-width:none;object-fit:cover;object-position:50% 45%}
.brand{display:flex;align-items:center;padding-right:.85rem;margin-right:.2rem;border-right:1px solid var(--hair-lt)}
.brand .mark{width:2.35rem;height:2.35rem;box-shadow:0 0 0 2px var(--gold)}
.nav ul{display:flex;align-items:center;gap:.05rem}
.nav ul a{
  display:block;padding:.48rem .72rem;border-radius:999px;
  font-size:.84rem;font-weight:600;color:var(--bone-3);
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.nav ul a:hover{color:var(--chalk);background:rgba(255,248,238,.1)}
.nav .btn{padding:.5rem 1rem;font-size:.83rem;margin-left:.3rem}
.nav-desk{display:contents}

.mnav{display:none;margin-left:.2rem}
.mnav summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:999px;
  background:var(--yellow);color:var(--ink);
  font-weight:700;font-size:.83rem;
}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary i{display:grid;gap:3px;width:14px}
.mnav summary i b{display:block;height:2px;background:var(--ink);border-radius:2px}
.mnav[open] summary i b:nth-child(2){width:65%}
.mpanel{
  position:absolute;left:0;right:0;top:calc(100% + .5rem);
  background:var(--ink);border-radius:var(--r);
  padding:.5rem;box-shadow:0 22px 46px -22px rgba(11,7,8,.95);
}
.mpanel a{
  display:block;padding:.75rem .95rem;border-radius:var(--r-sm);
  font-family:var(--display);font-size:1.3rem;font-weight:800;color:var(--chalk);
}
.mpanel a:hover{background:rgba(255,248,238,.1)}
.mpanel .btn{width:100%;justify-content:center;margin-top:.4rem}
.mpanel .contactline{padding:.9rem .95rem .5rem;font-size:.8rem;color:var(--bone-3)}

/* ============================================================
   8. HERO : split in two on mockup 14's yellow
   Left is mockup 14's column. Right is mockup 12's board. The
   headline steps down a size because it is now living in half the
   width it was drawn for, and nothing else about the column moves.
   ============================================================ */
.hero{padding-block:clamp(7.5rem,12vw,10rem) clamp(3.5rem,6vw,5rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(60vw,640px);aspect-ratio:1;right:-14%;top:-26%;border-radius:50%;
  background:radial-gradient(circle closest-side,rgba(255,255,255,.40),transparent 70%);
}
.hero .shell{z-index:1}
.hero-split{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,3.6vw,3.2rem);align-items:center;
}
.hero h1{font-size:clamp(2.5rem,4.4vw,4rem);letter-spacing:-.036em;line-height:.94;max-width:15ch}
.hero .lede{margin-top:1.5rem;max-width:46ch;color:var(--on-yel-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}

/* ---- THE BOARD, from mockup 12 ----
   Paper card, ink header, a yellow rule under it, dotted leaders, and
   status wording where a price board would carry numbers. J&J publishes
   no prices, so the board tells the truth it can. Its names are set in
   the page's display face rather than mockup 12's sign face, because
   mockup 14's boards are set that way and one page gets one type scale. */
.signboard{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--r);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 30px 60px -34px rgba(11,7,8,.6);
}
.signboard-head{background:var(--ink);color:var(--chalk);padding:1.15rem 1.4rem 1.05rem;flex:none}
.signboard-head h2{
  font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.92;
  font-size:clamp(1.7rem,3vw,2.3rem);color:var(--chalk);
}
.signboard-head p{margin-top:.35rem;font-size:.84rem;font-weight:600;letter-spacing:.06em;color:var(--on-board-hd)}
.signboard-rule{display:block;width:100%;height:5px;border:0;margin:0;background:var(--yellow)}
.signboard-list{padding:.3rem 1.4rem;flex:1;display:flex;flex-direction:column}
.signboard-list li{flex:1;display:flex;align-items:center;gap:.65rem;min-height:3.2rem;padding:.55rem 0}
.signboard-list li + li{border-top:1px solid rgba(22,16,14,.13)}
.signboard-name{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1;letter-spacing:-.02em;
}
.signboard-dots{flex:1;min-width:1rem;height:2px;border-bottom:2px dotted rgba(22,16,14,.34)}
.signboard-note{font-size:.78rem;font-weight:600;color:var(--on-board-2);white-space:nowrap}
.signboard-foot{flex:none;background:var(--corn);padding:1.15rem 1.4rem 1.3rem}
.signboard-foot p{font-size:.9rem;line-height:1.55;color:var(--on-board-2);max-width:46ch}
.signboard-foot .tlink{margin-top:.85rem;color:var(--red-d)}
.signboard-foot .tlink:hover{color:var(--ink)}

/* the status badges, kept from mockup 5 by name. Four of them across eight
   lines, each one separated by a plain row, so the column reads as a status
   system rather than as a run of coloured pills. */
.badge{
  display:inline-flex;align-items:center;flex:none;
  border-radius:8px;padding:.34rem .78rem .38rem;
  font-family:var(--body);font-weight:800;
  font-size:.665rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.b-yel{background:var(--yellow);color:var(--ink)}
.b-red{background:var(--red);color:var(--ink)}
.b-blue{background:var(--blue);color:var(--chalk)}
.b-green{background:var(--green);color:var(--ink)}
/* the quiet badge only ever sits inside a menu board, which is always dark */
.b-line{background:transparent;color:var(--bone-2);border:1px solid var(--hair-lt-2)}

/* ============================================================
   9. THE ROLLING MECHANIC
   One set of rules, used twice: the food band under the hero and
   the Instagram track in the events room. Three ways to stop each
   of them, and under reduced motion both lay out flat and readable.
   ============================================================ */
.mask{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.roll-stop{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(22,16,14,.92);color:var(--chalk);
  border:1px solid var(--hair-lt-2);border-radius:999px;
  padding:.4rem .85rem .42rem;cursor:pointer;
  font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
}
.roll-stop:hover{background:#000;border-color:var(--chalk)}
.roll-stop svg{width:11px;height:11px;fill:currentColor;stroke:none}
.roll-stop .ic-play{display:none}
.paused .roll-stop .ic-play{display:block}
.paused .roll-stop .ic-pause{display:none}

/* ---- the food band, from mockup 14. Every dish is a struck yellow tag on
   the black band. One colour, so a rolling list never reads as a flag. ---- */
.band{position:relative;overflow:hidden;background:var(--ink);padding-block:1.45rem;--focus:#FFC20E}
.band .mask{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 68%,transparent 90%);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 68%,transparent 90%);
}
.mq{display:flex;width:max-content;animation:mq 58s linear infinite}
.band:hover .mq,.band:focus-within .mq,.band.paused .mq{animation-play-state:paused}
.mq-set{display:flex;align-items:center;gap:.55rem;padding-right:.55rem}
.mq-set span{
  display:inline-flex;align-items:center;white-space:nowrap;
  background:var(--yellow);color:var(--ink);
  border-radius:999px;padding:.48rem 1.12rem .54rem;
  font-family:var(--display);font-weight:700;
  font-size:clamp(.95rem,1.7vw,1.26rem);letter-spacing:-.015em;
}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}
.band .roll-stop{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);z-index:4}

/* ---- the Instagram track, the same mechanic at tile scale ---- */
.roll{position:relative;overflow:hidden;margin-top:var(--stack)}
.roll-track{display:flex;width:max-content;animation:roll 96s linear infinite}
.roll:hover .roll-track,.roll:focus-within .roll-track,.roll.paused .roll-track{animation-play-state:paused}
.roll-set{display:flex;align-items:flex-start;gap:clamp(.8rem,1.3vw,1.25rem);padding-right:clamp(.8rem,1.3vw,1.25rem)}
@keyframes roll{to{transform:translate3d(-50%,0,0)}}
.roll .roll-stop{position:absolute;right:var(--gut);top:1rem;z-index:4}

/* ============================================================
   10. STORY : mockup 10's family section, arriving through mockup 14
   The client asked for the entirety of it, the off axis photograph,
   the lettering, the font and the blue, all unchanged. The palette
   lift stops at this section's edge for that reason.
   ============================================================ */
.story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.story-grid > *{min-width:0}
.story-photo{position:relative}
.bez{
  padding:.5rem;border-radius:2rem;
  background:rgba(22,16,14,.05);border:1px solid var(--hair-dk);
  transition:transform .8s var(--ease);
}
.bez > .core{border-radius:calc(2rem - .375rem);background:var(--masa-2);box-shadow:inset 0 1px 1px rgba(255,255,255,.65);overflow:hidden;height:100%}
.story-photo .bez{transform:rotate(-2.2deg)}
.story-photo .bez:hover{transform:rotate(-1deg)}
.ph{position:relative;overflow:hidden;background:var(--ink)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.story-photo .ph{aspect-ratio:1100/1250}
.story-photo .ph img{filter:saturate(1.05) contrast(1.02)}
.story-photo .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(26,15,17,.28))}
.tagchip{
  position:absolute;right:-.5rem;bottom:1.6rem;z-index:2;
  background:var(--ink);color:var(--bone);
  border-radius:999px;padding:.55rem 1.1rem;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 16px 40px -14px rgba(26,15,17,.7);
  transform:rotate(2.4deg);
}
.story-body p + p{margin-top:1.15rem}
/* the mission line, set apart by ground, type and space, never by a bar
   down one edge */
.mission{
  margin:2.2rem 0 0;padding:1.6rem 1.7rem 1.7rem;
  background:var(--masa-2);border-radius:calc(2rem - .375rem);
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.34;letter-spacing:-.02em;
  color:var(--ink);
}
.mission .cite{
  display:block;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--hair-dk);
  font-family:var(--body);font-weight:600;
  font-size:.71rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.partners{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.partners li{border-radius:999px;padding:.44rem 1rem;font-size:.79rem;font-weight:700;background:var(--cobalt);color:var(--bone)}

/* ============================================================
   11. THE SEVEN BOARDS, from mockup 14
   Seven menus, so seven real boards. Two of them have a photograph
   worth showing and the other five are held by the board alone, which
   is steadier than an empty picture slot.
   ============================================================ */
.sec-head{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-end;justify-content:space-between;margin-bottom:var(--stack)}
.sec-head h2{max-width:15ch}
.sec-head .lede{max-width:38ch}

.board{
  background:var(--ink);color:var(--chalk);
  border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 26px 54px -34px rgba(22,16,14,.55);
}
.board-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.3rem;
  padding:1.4rem clamp(1.15rem,2.4vw,2rem) 1.25rem;
  border-bottom:2px solid var(--gold);
}
.board-head h3{color:var(--chalk);font-size:clamp(1.5rem,2.6vw,2.05rem);text-transform:uppercase;letter-spacing:-.02em}
.board-head p{font-size:.88rem;color:var(--bone-3);margin-left:auto}

.menu-feature{display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(1.3rem,2.6vw,2.2rem);align-items:stretch}
.menu-feature > *{min-width:0}
.menu-feature + .menu-feature{margin-top:clamp(1.6rem,3vw,2.4rem)}
.menu-feature.flip{grid-template-columns:.78fr 1.22fr}
.menu-feature.flip .feature-shot{order:-1}
.feature-shot{border-radius:var(--r);overflow:hidden;background:var(--ink);position:relative;min-height:16rem}
.feature-shot .ph{position:absolute;inset:0}
.feature-shot figcaption{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  background:var(--yellow);color:var(--ink);border-radius:999px;
  padding:.42rem 1rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.shot-black{background:#000}
.shot-black .ph{background:#000}
.shot-black .ph img{object-fit:contain}

.menu-rest{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.3rem,2.6vw,2.2rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
/* the seventh board runs the full width and reads its lines two across, which
   is what a wide printed board does with a short list */
.board-wide{grid-column:1 / -1}
.board-wide .lines{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.6rem,3.4vw,3.4rem)}
.board-wide .lines > div + div{border-top:1px solid var(--hair-lt)}
.board-wide .lines > div:nth-child(2){border-top:0}

/* the leader lines : the label runs to the right edge on dots, then the
   items sit under it in running prose with the real names in bold */
.lines{padding:.3rem clamp(1.15rem,2.4vw,2rem) 0}
.lines > div{padding-block:1rem}
.lines > div + div{border-top:1px solid var(--hair-lt)}
.lines dt{
  display:flex;align-items:baseline;gap:.8rem;
  font-family:var(--body);font-weight:800;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.lines dt::after{content:"";flex:1;height:.5em;border-bottom:2px dotted rgba(233,168,46,.42)}
.lines dd{margin-top:.55rem;font-size:1rem;line-height:1.6;color:var(--bone-2);max-width:60ch}
.lines dd b{color:var(--chalk);font-weight:700}
.board .foot-note{padding:1.1rem clamp(1.15rem,2.4vw,2rem) 1.5rem;margin-top:auto;color:var(--bone-3)}

/* the vegan panel. A full green field inside the board, because the vegan
   offering is real, it is on three menus, and no mockup showed it before 14. */
.vegan{
  background:var(--green);color:var(--ink);
  padding:1rem clamp(1.15rem,2.4vw,2rem) 1.1rem;
  display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:baseline;
}
.vegan > b{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.06em;flex:none;
}
.vegan p{font-size:.95rem;line-height:1.5;font-weight:500;max-width:64ch}
.vegan p b{font-weight:800}

.menu-note{margin-top:var(--stack);padding-top:1.8rem;border-top:1px solid var(--hair-dk);display:flex;flex-wrap:wrap;gap:1.2rem 3rem;align-items:center;justify-content:space-between}

/* ============================================================
   12. EVENTS : mockup 11's cream room, its tiles now rolling
   ============================================================ */
.ev-head{max-width:56rem;margin:0 auto;text-align:center}
.ev-head h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
.ev-head .lede{margin:1.1rem auto 0}
.ev{display:flex;flex-direction:column;flex:0 0 clamp(11rem,17vw,15.5rem)}
.ev .shot{
  border-radius:1.4rem;overflow:hidden;background:var(--ink);
  box-shadow:0 16px 32px -22px rgba(22,16,14,.55);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.ev .shot img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--ease)}
.ev:hover .shot{transform:translateY(-6px);box-shadow:0 24px 42px -22px rgba(22,16,14,.6)}
.ev:hover .shot img{transform:scale(1.05)}
.ev h3{
  margin-top:.95rem;font-family:var(--body);font-weight:700;
  font-size:clamp(.92rem,1vw,1.02rem);line-height:1.3;letter-spacing:-.005em;
  color:var(--ink);
}
.ev .loc{
  margin-top:.35rem;display:inline-block;font-size:.78rem;font-weight:600;color:var(--red-d);
  text-decoration:underline;text-underline-offset:3px;
}
.ev-cta{margin-top:var(--stack);display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.ev-foot{margin-top:1.5rem;text-align:center}

/* ============================================================
   13. WHAT PEOPLE SAY : the blue room, lifted, slots visibly empty
   ============================================================ */
.say-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.say-grid > *{min-width:0}
.q-grid{display:grid;gap:.9rem}
.q{background:rgba(11,26,64,.34);border:2px dashed var(--hair-blue);border-radius:var(--r);padding:1.6rem;display:flex;flex-direction:column;gap:1rem;min-height:9.5rem}
.q .qm{font-family:var(--display);font-weight:800;font-size:2.9rem;line-height:.62;color:var(--yellow)}
.q .slot{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.75rem}
.q .slot i{display:block;height:2px;background:rgba(231,237,251,.42);border-radius:2px}
.q .slot i:nth-child(2){width:88%}
.q .slot i:nth-child(3){width:62%}
.q .who{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);padding-top:.9rem;border-top:1px solid var(--hair-blue)}

/* ============================================================
   14. FAQ : the purple room, lifted
   ============================================================ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.faq-grid > *{min-width:0}
.faq details{border-top:1px solid var(--hair-lt-2)}
.faq details:last-of-type{border-bottom:1px solid var(--hair-lt-2)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.22rem);letter-spacing:-.022em;line-height:1.26;
  color:var(--bone);transition:color .4s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--purple-lt)}
.faq .pm{position:relative;width:1.9rem;height:1.9rem;border-radius:999px;flex:none;border:1px solid var(--hair-lt-2);background:rgba(255,246,238,.1);transition:background-color .45s var(--ease),transform .55s var(--ease)}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:var(--bone);border-radius:2px;transform:translate(-50%,-50%);transition:transform .55s var(--ease),opacity .35s var(--ease)}
.faq .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pm{background:var(--purple-lt);border-color:var(--purple-lt);transform:rotate(90deg)}
.faq details[open] .pm::before{background:var(--ink)}
.faq details[open] .pm::after{opacity:0}
.faq .ans p{padding:0 0 1.5rem;max-width:60ch;color:var(--lilac);font-size:.96rem}
#faq .head-rule{background:var(--hair-lt-2)}

/* ============================================================
   15. CLOSING : mockup 11's block, whole
   ============================================================ */
.close{text-align:center}
.close h2{margin-inline:auto;max-width:15ch;color:var(--chalk)}
.close .lede{margin:1.5rem auto 0}
.close .btnrow{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.3rem}
.close .contacts{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;justify-content:center;margin-top:2.5rem;font-size:.95rem;font-weight:600}
.close .contacts a{color:var(--yellow);border-bottom:2px solid rgba(255,194,14,.42);padding-bottom:2px}
.close .contacts a:hover{border-color:var(--yellow)}

footer{background:#050304;color:var(--bone-3);padding-block:2.6rem;--focus:#FFC20E}
.f-in{display:flex;flex-wrap:wrap;gap:1.3rem 2rem;align-items:center;justify-content:space-between}
.f-brand{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.f-brand .mark{width:4.4rem;height:4.4rem;box-shadow:0 0 0 2px var(--gold)}
.f-brand .tagline{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:1.25rem;line-height:1.05;letter-spacing:-.01em;color:var(--chalk);
}
footer nav{display:flex;flex-wrap:wrap;gap:1.3rem}
footer nav a{font-size:.87rem;font-weight:600}
footer nav a:hover,footer a:hover{color:var(--chalk)}
.f-ig{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:.9rem;
  font-size:.88rem;font-weight:700;color:var(--chalk);
  border-bottom:1px solid var(--hair-lt);padding-bottom:.2rem;
}
.f-ig:hover{border-color:var(--yellow)}
.f-ig svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-split{grid-template-columns:minmax(0,1fr);gap:clamp(2.2rem,5vw,3rem)}
  .hero h1{font-size:clamp(2.6rem,7vw,4.4rem);max-width:16ch}
  .hero .lede{max-width:52ch}
  .menu-feature,.menu-feature.flip{grid-template-columns:1fr}
  .menu-feature.flip .feature-shot{order:0}
  /* a min-height with an aspect ratio forces the figure wider than its column
     on a phone, which pushed the page sideways. The ratio alone does the job. */
  .feature-shot{min-height:0;aspect-ratio:16/10}
  .say-grid{grid-template-columns:1fr}
  .q-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .story-grid,.faq-grid,.menu-rest{grid-template-columns:1fr}
  .board-wide .lines{grid-template-columns:1fr}
  .board-wide .lines > div:nth-child(2){border-top:1px solid var(--hair-lt)}
  .story-photo{max-width:26rem}
  .story-photo .bez,.story-photo .bez:hover{transform:none}
  .tagchip{transform:none;right:1rem}
  .q-grid{grid-template-columns:1fr}
  .sec-head{display:block}
  .sec-head .lede{margin-top:1.2rem;max-width:100%}
}
@media (max-width:820px){
  .nav-desk{display:none}
  .mnav{display:block}
  .brand{border-right:none;padding-right:.5rem;margin-right:0}
}
@media (max-width:768px){
  :root{--r:18px}
  .ev{flex-basis:63vw}
  .signboard-list,.signboard-head,.signboard-foot{padding-inline:1.05rem}
  .signboard-list li{min-height:0;flex-wrap:wrap;gap:.45rem .7rem;padding:.85rem 0}
  .signboard-dots{display:none}
  .board-head p{margin-left:0;flex-basis:100%}
  .mission{padding:1.3rem 1.35rem 1.4rem}
  .lines dt::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  html.js [data-rv],[data-rv]{opacity:1!important;transform:none!important}
  /* both rolling strips stop and lay themselves out flat, so everything on
     them is readable standing still. Nothing here is only legible mid scroll. */
  .mq{animation:none!important;width:100%;flex-wrap:wrap}
  .mq-set{flex-wrap:wrap;gap:.5rem;padding-right:0}
  .mq-set + .mq-set{display:none}
  .roll-track{animation:none!important;width:100%;flex-wrap:wrap;justify-content:center}
  .roll-set{flex-wrap:wrap;justify-content:center;padding-right:0;row-gap:2rem}
  .roll-set + .roll-set{display:none}
  .roll{padding-inline:var(--gut)}
  .mask{-webkit-mask-image:none;mask-image:none}
  .roll-stop{display:none}
  .story-photo .bez,.story-photo .bez:hover{transform:none}
}


/*
 * WordPress bridging. Full-bleed block groups pick up a vertical margin from
 * the block layout, which shows as a hairline of page background between two
 * adjacent colour fields, and as the white bar above the footer.
 */
.wp-block-group.alignfull { margin-block: 0; }
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks { padding-block: 0; }

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px; min-height: 44px;
	display: flex; align-items: center; justify-content: center;
}

.skip-link:focus {
	background: var(--paper); color: var(--ink);
	padding: .75rem 1.25rem; z-index: 100000;
}

:target { scroll-margin-top: 6rem; }

/*
 * Section seams.
 *
 * WordPress's flow layout puts a margin-block-start on every child of
 * post-content. Between two full-bleed colour fields that margin is a gap, and
 * because body is yellow it read as a yellow line drawn between every section.
 * It was never a separator, it was the page showing through.
 */
.entry-content > *,
.wp-block-post-content > * {
	margin-block: 0 !important;
}

/*
 * Except one. The client liked the line between the purple FAQ and the black
 * closing block and asked to keep it there, so it becomes a deliberate rule
 * rather than an accident of layout: drawn on the element, at a chosen weight,
 * where the gap used to fall.
 */
.close.f-night {
	border-top: 10px solid var(--yellow);
}

/* ---- contact page ---- */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.contact-facts { margin-top: 2.2rem; display: grid; gap: 1.1rem; }
.contact-facts p { margin: 0; line-height: 1.5; }
.contact-facts strong { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-cream-2); }

.contact-form {
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--r);
	padding: clamp(1.3rem, 3vw, 2.2rem);
}

/* Fluent Forms ships its own look; bring it onto the theme's tokens so the
   form does not read as a bolted-on plugin. */
.contact-form .ff-el-input--label label { font-weight: 700; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form input[type="number"],
.contact-form select,
.contact-form textarea {
	border: 1.5px solid var(--hair-dk) !important;
	border-radius: var(--r-sm) !important;
	padding: .7rem .9rem !important;
	font-family: var(--body) !important;
	background: #fff !important;
}
.contact-form .ff-btn-submit {
	background: var(--red) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	padding: .9rem 1.6rem !important;
}
.contact-form .ff-btn-submit:hover { background: var(--red-d) !important; }

@media (max-width: 860px) {
	.contact-grid { grid-template-columns: 1fr; }
}

/* ---- our story, full page ----
 *
 * Prefixed spage- rather than story-.
 *
 * These started as .story-body and .story-photo, which the approved design
 * already uses for the home page's story section. The page rules loaded later
 * and won, so the home section's single column became a two-column grid and
 * its headline broke across five lines. Same class name, two different
 * components, and the one that lost was the one the client had already
 * approved. */
.spage-shell { max-width: 46rem; }
.spage-body { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(2rem,5vw,4.5rem); align-items: start; }
.spage-photo { margin: 0; }
.spage-photo img { display: block; width: 100%; border-radius: var(--r); transform: rotate(-1.4deg); box-shadow: 0 22px 50px rgba(22,16,14,.18); }
.spage-photo figcaption { margin-top: 1.1rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-cream-2); }
.spage-prose p { margin: 0 0 1.15rem; font-size: 1.0625rem; line-height: 1.7; }
.spage-pull { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem,2.6vw,1.75rem); line-height: 1.3; margin: 1.8rem 0 !important; }
.spage-sign { font-weight: 700; color: var(--blue); }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,20rem),1fr)); gap: clamp(1rem,2.4vw,1.6rem); margin-top: 2.4rem; }
.org { display: block; text-decoration: none; color: inherit; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); padding: clamp(1.2rem,2.6vw,1.8rem); }
.org h3 { font-size: 1.25rem; margin: 0 0 .6rem; }
.org p { margin: 0 0 1rem; color: var(--on-cream-2); line-height: 1.55; }
.org:hover { transform: translateY(-2px); }
.org-note { margin-top: 1.6rem; font-size: .9rem; color: var(--on-cream-2); }

@media (max-width: 860px) { .spage-body { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .org:hover { transform: none; } }

/* ---- story page photo wall ---- */
.spage-wall {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: clamp(.75rem, 1.8vw, 1.25rem);
	margin-top: 2.4rem;
}
.spage-wall figure { margin: 0; }
.spage-wall img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--r-sm);
}

/* ============================================================
   NAV FIXES
   ============================================================ */

/*
 * Home only appears when you are not already home.
 *
 * WordPress puts .home on <body> for the front page, so this needs no PHP and
 * no second header template. On /our-story/ and /contact/ the item shows and
 * gives a way back that is not the browser button.
 */
body.home .nav-home { display: none !important; }

/*
 * The desktop row was wrapping onto two lines once Home was added, which is
 * what stacked Home above Menus. Stop it wrapping and let the gap tighten
 * instead.
 */
.nav-desk {
	flex-wrap: nowrap;
	white-space: nowrap;
}

/*
 * Mobile pill.
 *
 * It was sized to its content, which put the badge hard against the Menu
 * button and read as cramped. A minimum width and a real gap give the two
 * elements room to be separate things.
 */
@media (max-width: 860px) {
	.nav {
		min-width: min(19rem, calc(100vw - 2rem));
		justify-content: space-between;
		gap: .9rem;
		padding-right: .5rem;
	}
}

/* ---- footer: a way home from the bottom of a long page ---- */
.foot-brand a,
.foot-brand img { display: block; }

.foot-home {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1.1rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid rgba(255, 194, 14, .42);
	padding-bottom: 2px;
}

.foot-home:hover { border-color: var(--yellow); }

/*
 * Nav centring.
 *
 * .navwrap is position:fixed, so it centres on the viewport including the
 * scrollbar gutter, while the page content centres on the space left over.
 * On a page tall enough to scroll, that put the pill a few pixels right of
 * the content it sits above. Reserving the gutter on every page, scrolling or
 * not, makes the two agree.
 */
/* Not scrollbar-gutter: reserving the gutter leaves a strip of body yellow
   down the right edge that no section can paint over. Instead nav.js measures
   the scrollbar and the pill offsets by exactly that, so it centres on the
   content rather than on the viewport. */

/* Tucked away while reading down the page, back on the way up. */
.navwrap {
	transition: transform 320ms var(--ease-out), opacity 220ms linear;
	/* Set by nav.js. Zero when there is no scrollbar, so nothing shifts. */
	padding-right: calc(var(--gut) + var(--jj-sbw, 0px));
}

.navwrap.is-tucked {
	transform: translate3d(0, calc(-100% - 1.5rem), 0);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.navwrap { transition: none; }
	.navwrap.is-tucked { transform: none; opacity: 1; pointer-events: auto; }
}

/*
 * Selects were sized to their widest option, which pushed the "Optional"
 * dropdown past the card's edge. Constrain them to the field column.
 */
.contact-form select,
.contact-form input,
.contact-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/*
 * Our Story: tighter.
 *
 * The page was running at the full 80rem shell with the site's standard band
 * spacing, which is right for a home page of alternating colour rooms and
 * wrong for one continuous piece of writing. A reading measure and reduced
 * vertical rhythm make it a story rather than a landing page, which is the
 * tone the client asked for.
 */
.spage-top { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.25rem); }
.spage-top .shell { max-width: 44rem; }

.spage-body {
	max-width: 62rem;
	margin-inline: auto;
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: start;
}

.spage-body + .section,
section.f-white.section:has(.spage-body) { padding-block: clamp(2.5rem, 5vw, 4rem); }

.spage-prose p { margin-bottom: .95rem; }
.spage-pull { margin: 1.4rem 0 !important; }

.spage-wall { margin-top: 1.8rem; }
.org-grid { margin-top: 1.8rem; }

@media (min-width: 861px) {
	.spage-body { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
}

/* The submit button sat hard against the last select. */
.contact-form .ff-el-group.ff-text-left,
.contact-form .ff_submit_btn_wrapper,
.contact-form .ff-el-group:last-of-type { margin-top: 1.6rem; }
.contact-form .ff-btn-submit { margin-top: .4rem; }

/*
 * The submitted state.
 *
 * Fluent Forms replaces the form with .ff-message-success, which by default
 * is a line of unstyled text where a whole form used to be. On a page whose
 * only purpose is that one submission, the moment it succeeds is the moment
 * that matters most, and the client watched it land as an apparently blank
 * form. This gives the confirmation the same card the form occupied so
 * nothing appears to vanish.
 */
.contact-form .ff-message-success {
	/* .contact-form is already the card. Framing the confirmation again
	   nested one bordered box inside another. */
	background: none;
	border: 0;
	padding: 0;
	color: var(--ink);
	/* Fluent Forms ships its own drop shadow on this element, which drew a
	   second card edge inside the one .contact-form already provides. */
	box-shadow: none;
	/* Fluent Forms scrolls this into view on success. The nav pill is
	   fixed, so without a margin the confirmation lands underneath it and
	   the first thing the visitor sees is a covered tick. */
	scroll-margin-top: 7rem;
}

.jj-thanks-tick {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--green);
	margin-bottom: 1.25rem;
}

/* Drawn rather than a glyph: a checkmark character renders as a different
   shape in every font stack, and as an emoji on some. */
.jj-thanks-tick::after {
	content: "";
	width: 20px;
	height: 11px;
	border-left: 3px solid var(--chalk);
	border-bottom: 3px solid var(--chalk);
	transform: translateY(-3px) rotate(-45deg);
}

.jj-thanks h3 {
	font-family: var(--display);
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 .75rem;
}

.jj-thanks p {
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 0 0 1rem;
	max-width: 34rem;
}

.jj-thanks-back { margin: 1.5rem 0 0 !important; }

.jj-thanks-back a {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 2px solid var(--red);
	padding-bottom: 2px;
	transition: gap .3s var(--ease);
}

.jj-thanks-back a::after { content: "\2192"; }
.jj-thanks-back a:hover { gap: .85rem; }

@media (prefers-reduced-motion: reduce) {
	.jj-thanks-back a { transition: none; }
}