/* Ultra and Chivo are declared once, in mockup.css (always loaded first), at the assets/fonts/ URLs the
   head preloads. Declaring them again here at ds/fonts/ (byte-identical files) made the home page download
   both faces twice and left the preloads unused (Lighthouse 2026-10-27). */
/* Fable pass 2026-09-24, #18: Latin subset (Basic Latin, nbsp, middle dot, curly quotes, ellipsis, e acute) of the same OFL file, 149 KB instead of 209 KB. The full file stays at ds/fonts/fredericka-400.woff2. */
@font-face{font-family:"Fredericka the Great";src:url("ds/fonts/fredericka-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00B7,U+00E9,U+2018-2019,U+201C-201D,U+2026}
@font-face{font-family:"Caveat Brush";src:url("ds/fonts/caveat-brush-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* ============================================================================
   MATERIALS — used only in the masthead.
   ========================================================================= */

/* matt chalkboard with chalk dust — a pre-baked tile, not an SVG filter */
.ct-m-board{background-color:var(--board);
  background-image:url("ds/img/chalk-noise.png"),
    linear-gradient(104deg,rgba(244,241,232,.05),transparent 34%,transparent 62%,rgba(244,241,232,.035));
  background-size:256px 256px,100% 100%;background-repeat:repeat,no-repeat}
/* ============================================================================
   MASTHEAD — the top bar, the pendant lights, the specials board.
   ========================================================================= */
/* the shop photograph, with everything sitting over it */
.ct-top{position:relative;isolation:isolate;overflow:hidden;background:#141a20;display:flex;flex-direction:column}
.ct-top-hero{min-height:clamp(470px,74vh,780px)}
.ct-top-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;z-index:0}
/* dark at the top for the nav, and down the left for the headline */
.ct-top-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,11,14,.80) 0%,rgba(8,11,14,.42) 12%,rgba(8,11,14,.08) 30%,transparent 56%),
    linear-gradient(96deg,rgba(8,11,14,.70) 0%,rgba(8,11,14,.38) 34%,rgba(8,11,14,.06) 64%,transparent 88%)}
.ct-infobar,.ct-bar-in{position:relative;z-index:2}
/* the lamps hang in the header and throw their light down onto the cabinet */
.ct-top .pendants{position:absolute;left:0;right:0;top:104px;height:0;max-width:none;margin:0;
  padding:0 clamp(40px,9vw,150px);z-index:2;pointer-events:none}
.ct-hero-in{position:relative;z-index:3}
/* the shop facts, in a hairline strip above the nav */
.ct-infobar{border-bottom:1px solid rgba(255,255,255,.13)}
.ct-infobar-in{display:flex;flex-wrap:wrap;gap:5px 26px;justify-content:space-between;
  max-width:1240px;margin:0 auto;padding:9px var(--gut);
  font:700 10.5px/1.4 var(--text);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.74);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.ct-infobar-in b{color:var(--lamp)}
/* ============================ THE HERO ================================== */
/* sits inside .ct-top, over the photograph */
.ct-hero-in{width:100%;max-width:1240px;margin:0 auto;padding:clamp(150px,20vw,260px) var(--gut) clamp(44px,7vw,104px);display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 auto}
.ct-kicker{font-family:var(--chalk);font-size:clamp(15px,1.6vw,20px);color:var(--lamp);margin-bottom:10px}
.ct-hero-in h1{font-size:clamp(2.05rem,4.6vw,3.6rem);line-height:1;color:#fff;max-width:17ch;margin-bottom:18px;text-shadow:0 2px 28px rgba(0,0,0,.6)}
/* Local SEO wave 1 (2026-10-19): "Butcher in Emu Plains" leads the H1 as a line of its own.
   It sits under the shop's own chalk kicker (cb001b4), so it must NOT share that face: in the
   chalk face it read as a third line of the shop's product list. Same label style as .ct-link. */
.ct-hero-in h1 .ct-h1-place{display:block;max-width:none;margin:2px 0 12px;font:700 12px/1.3 var(--text);
  letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.ct-page .fb-areas{margin-top:14px;font-size:.95rem;color:var(--ink-soft)}
.ct-page .fb-areas a{color:var(--meat-deep);font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.ct-hero-in .ct-lede{font-size:17px;line-height:1.7;color:rgba(255,255,255,.88);max-width:46ch;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.ct-hero-cta{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:26px}
.ct-link{font:700 12px/1 var(--text);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  color:#fff;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.5)}
.ct-link:hover{border-bottom-color:var(--lamp);color:var(--lamp)}
.ct-bar-in{display:flex;align-items:center;gap:clamp(12px,2.4vw,34px);padding:9px var(--gut);max-width:1240px;margin:0 auto;position:relative;z-index:2}
.ct-brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;text-decoration:none}
.ct-brand img{width:42px;height:42px;flex:0 0 auto}
.ct-brand b{display:block;font-family:var(--display);font-weight:400;font-size:16px;line-height:1.05;color:var(--paper)}
.ct-brand i{display:block;font-family:var(--chalk);font-style:normal;font-size:12px;line-height:1.2;color:var(--lamp)}
.ct-bar-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);flex-wrap:wrap}
.ct-bar-nav a{font:700 12px/1 var(--text);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:rgba(244,241,232,.8);padding:7px 0;border-bottom:1px solid transparent}
.ct-bar-nav a:hover{color:var(--paper);border-bottom-color:var(--lamp)}
.ct-call{font:700 13px/1 var(--text);letter-spacing:.06em;text-decoration:none;color:#1a1206;background:linear-gradient(180deg,#ffd08a,var(--lamp) 55%,#e59a34);padding:10px 15px;border-radius:999px;box-shadow:0 6px 18px -8px rgba(255,180,92,.75);white-space:nowrap}
.ct-call:hover{background:linear-gradient(180deg,#ffe0ac,#ffc271 55%,#f0a53f)}
/* ============================================================================
   THE PAGE BELOW — flat ground, the type does the work.
   ========================================================================= */
.ct-btn{display:inline-block;font:700 12px/1 var(--text);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;padding:15px 22px;background:var(--meat);color:#fff}
.ct-btn:hover{background:var(--meat-deep)}
.visit .ct-btn{margin-top:22px}
@media (max-width:900px){
  .ct-bar-in{flex-wrap:wrap;row-gap:9px}
  .ct-bar-nav{order:3;width:100%;margin-left:0;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:9px}
  .ct-call{margin-left:auto}}
@media (max-width:640px){
  .ct-bar-nav{gap:6px}
  .ct-bar-nav a{font-size:10.5px;letter-spacing:.07em}}

/* ============================================================================
   THE MASTHEAD'S OWN TOKENS (ds/style.css :root) — scoped to .ct-top.
   The approved preview runs two scopes: ds :root for the masthead (where --chalk is the
   chalk FONT) and #fb2 for the sections (where --chalk is the chalk COLOUR). The port
   flattened both onto .ct-page, so --gut/--lamp/--line-soft were never defined:
   .ct-hero-in's padding shorthand was invalid and computed to 0 (hero copy on the left
   edge at 375px), .ct-call lost its lamp gradient, .ct-kicker lost its colour and face.
   ========================================================================= */
.ct-page .ct-top{
  --gut:clamp(18px,4.4vw,64px);
  --lamp:#ffb45c;
  --line:rgba(244,241,232,.18);
  --line-soft:rgba(244,241,232,.10);
  --chalk:"Fredericka the Great","Chivo",cursive;
  --paper:#f4f1e8;
  --meat:#a41623;
  --meat-deep:#7e0f1a;
}
/* the logo lockup — the mockup's rule targeted the pre-namespace .top .bar-in .brand */
.ct-page .ct-top .ct-bar-in .ct-brand .ct-lockup{height:88px;width:auto;max-width:none;border-radius:0;filter:drop-shadow(0 3px 10px rgba(0,0,0,.65))}
@media (max-width:640px){
  .ct-page .ct-top .ct-bar-in .ct-brand .ct-lockup{height:60px}}
/* 44px touch floor on everything tappable in the masthead; the underlines move from
   border-bottom to text-decoration so they stay on the text, not 16px under it */
.ct-page .ct-top .ct-bar-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0;border-bottom:0;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:6px}
.ct-page .ct-top .ct-bar-nav a:hover{text-decoration:underline;text-decoration-color:var(--lamp)}
.ct-page .ct-top .ct-link{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;border-bottom:0;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-decoration-thickness:1px;text-underline-offset:5px}
.ct-page .ct-top .ct-link:hover{text-decoration-color:var(--lamp)}
.ct-page .ct-top .ct-call{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px}
.ct-page .ct-top .ct-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.ct-page .ct-top :focus-visible{outline:3px solid var(--lamp);outline-offset:3px}

/* ---- sections ---- */
.ct-page{
  --graphite:#262320;
  --graphite-2:#2f2b27;
  --board:#16130f;
  --chalk:#f4efe5;
  --chalk-soft:rgba(244,239,229,.68);
  --chalk-faint:rgba(244,239,229,.3);
  --warm:#ffb75e;
  --warm-soft:#ffd9a3;
  --rose:#ff6f92;
  --timber:#a9793f;
  --meat:#cf2130;
  --meat-deep:#93131f;
  --ink:#1c1916;
  --ink-soft:#56504a;
  --paper:#efece4;
  --display:"Ultra","Rockwell Extra Bold",Georgia,serif;
  --text:"Chivo","Helvetica Neue",Arial,sans-serif;
  --chalkfont:"Caveat Brush","Fredericka the Great","Bradley Hand",cursive; /* Caveat Brush self-hosted (ds/fonts/caveat-brush-400.woff2, OFL 1.1, Lane D 2026-09-20); Fredericka is the fallback only */
  --tile:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><rect width='120' height='60' fill='%230c0d0e'/><g fill='%231e2124'><rect x='1' y='1' width='58' height='28' rx='1'/><rect x='61' y='1' width='58' height='28' rx='1'/><rect x='-29' y='31' width='58' height='28' rx='1'/><rect x='31' y='31' width='58' height='28' rx='1'/><rect x='91' y='31' width='58' height='28' rx='1'/></g></svg>");
}
.ct-page > section,.ct-page > section *,.ct-page > .fb-steelband,.ct-page > .fb-steelband *,.ct-page > .fb-salt,.ct-page > .fb-salt *{margin:0;padding:0;box-sizing:border-box}
.ct-page .ct-top *{box-sizing:border-box}
.ct-page{scroll-behavior:smooth}
.ct-page{background:var(--graphite);color:var(--chalk);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.ct-page img{display:block;max-width:100%}
/* :where() keeps this at (0,0,1) so their own .ct-call / .ct-bar-nav a colours win */
:where(.ct-page) a{color:inherit}
.ct-page .fb-wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.ct-page /* ---------- materials from the shop ---------- */
.fb-m-tile{background-image:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.3) 45%,rgba(0,0,0,.5)),var(--tile)}
.ct-page .fb-m-timber{
  background-color:#7a5027;
  background-image:
    linear-gradient(180deg,rgba(255,238,210,.20),rgba(0,0,0,.05) 26%,rgba(0,0,0,.02) 60%,rgba(0,0,0,.26)),
    url("img/timber.jpg");
  background-size:auto,1840px 100%;
  background-repeat:no-repeat,repeat-x;
  background-position:center,center;
}
.ct-page .fb-m-salt{
  background-color:#2a120b;
  background-image:
    linear-gradient(180deg,rgba(28,10,4,.18),rgba(28,10,4,.02) 42%,rgba(28,10,4,.22)),
    url("img/salt.jpg");
  background-size:auto,1400px 100%;
  background-repeat:no-repeat,repeat-x;
  background-position:center,center;
}
.ct-page .fb-m-terrazzo{
  background-color:#eae7df;
  background-image:
    radial-gradient(2.5px 2.5px at 12% 22%,#b9b2a6,transparent 60%),
    radial-gradient(3px 3px at 62% 12%,#8d867a,transparent 60%),
    radial-gradient(2px 2px at 34% 68%,#c9a58f,transparent 60%),
    radial-gradient(3.5px 3.5px at 82% 54%,#a9a294,transparent 60%),
    radial-gradient(2px 2px at 48% 88%,#7f7a70,transparent 60%),
    radial-gradient(2.5px 2.5px at 92% 84%,#c2bbae,transparent 60%),
    radial-gradient(2px 2px at 22% 48%,#d3c4b4,transparent 60%);
  background-size:180px 180px,220px 220px,160px 160px,240px 240px,200px 200px,260px 260px,140px 140px;
}
.ct-page /* warm pendants and cool ceiling lights */
.fb-lights{position:absolute;inset:0 0 auto 0;height:380px;pointer-events:none;overflow:hidden}
.ct-page .fb-lights i{position:absolute;top:-170px;display:block;width:430px;height:430px;margin-left:-215px;border-radius:50%;filter:blur(16px)}
.ct-page .fb-lights .fb-w{background:radial-gradient(circle at 50% 42%,rgba(255,196,120,.36),rgba(255,170,80,.13) 38%,transparent 68%)}
.ct-page .fb-lights .fb-c{background:radial-gradient(circle at 50% 42%,rgba(214,234,255,.30),rgba(190,220,255,.10) 38%,transparent 68%)}
.ct-page /* ---------- top strip + header ---------- */
.strip{background:#0c0d0e;border-bottom:1px solid rgba(244,239,229,.08);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--chalk-soft)}
.ct-page .strip .fb-wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:9px 0;flex-wrap:wrap}
.ct-page .strip b{color:var(--warm);font-weight:700}
.ct-page .site-head{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(0,0,0,.85);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.ct-page .site-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(150px 60px at 14% 0%,rgba(255,183,94,.30),transparent 70%),
    radial-gradient(150px 60px at 38% 0%,rgba(207,228,255,.16),transparent 70%),
    radial-gradient(150px 60px at 62% 0%,rgba(255,183,94,.24),transparent 70%);
}
.ct-page .site-head .fb-wrap{position:relative;display:flex;align-items:center;gap:26px;padding:14px 0}
.ct-page .fb-brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.ct-page .fb-brand img{height:92px;width:auto;filter:drop-shadow(0 3px 10px rgba(0,0,0,.65))}
.ct-page .nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.ct-page .nav a{text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:var(--chalk-soft);min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.ct-page .nav a:hover{color:var(--chalk);border-bottom-color:var(--meat)}
.ct-page .call{display:inline-flex;align-items:center;min-height:44px;background:var(--warm);color:#1a1207;font-weight:900;padding:11px 20px;border-radius:999px;text-decoration:none;font-size:.9rem;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 8px 22px rgba(255,150,40,.25);transition:transform .15s}
.ct-page .call:hover{transform:translateY(-1px)}
.ct-page /* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#0d0b0a}
.ct-page .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.ct-page .hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(60% 40% at 50% 0%,rgba(255,186,110,.26),transparent 68%),
    linear-gradient(180deg,rgba(12,10,9,.55) 0%,rgba(12,10,9,.3) 36%,rgba(12,10,9,.84) 92%),
    linear-gradient(90deg,rgba(12,10,9,.76) 0%,rgba(12,10,9,.28) 52%,transparent 78%);
}
.ct-page .hero .fb-wrap{position:relative;z-index:2;padding:124px 0 112px}
.ct-page .hero-copy{max-width:640px}
.ct-page .fb-kicker{font-family:var(--chalkfont);font-size:1.5rem;color:var(--warm-soft)}
.ct-page .hero h1{font-family:var(--display);font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.04;margin:6px 0 18px;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.ct-page .hero p{font-size:1.1rem;color:rgba(244,239,229,.88);max-width:34em}
.ct-page .fb-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.ct-page .fb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 30px;border-radius:3px;text-decoration:none;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:.86rem;border:2px solid transparent;transition:transform .15s,background .15s,color .15s}
.ct-page .fb-btn:hover{transform:translateY(-2px)}
.ct-page .fb-btn-meat{background:var(--meat);color:#fff;border-color:var(--meat);box-shadow:0 10px 26px rgba(207,33,48,.3)}
.ct-page .fb-btn-meat:hover{background:var(--meat-deep);border-color:var(--meat-deep)}
.ct-page .fb-btn-chalk{border-color:rgba(244,239,229,.6);color:var(--chalk)}
.ct-page .fb-btn-chalk:hover{background:var(--chalk);color:var(--ink)}
.ct-page .fb-btn-ink{border-color:var(--ink);color:var(--ink)}
.ct-page .fb-btn-ink:hover{background:var(--ink);color:var(--paper)}
.ct-page /* ---------- checker band ---------- */
.fb-checker{position:relative;border-top:3px solid rgba(255,214,160,.32);border-bottom:3px solid rgba(0,0,0,.55);box-shadow:inset 0 14px 34px rgba(0,0,0,.28)}
.ct-page .fb-checker .fb-wrap{position:relative;display:flex;justify-content:center;padding:56px 0}
.ct-page .fb-plate{
  background:rgba(14,12,10,.8);border:1px solid rgba(244,239,229,.2);
  box-shadow:0 18px 40px rgba(0,0,0,.45);padding:20px 34px;border-radius:3px;
  display:flex;gap:14px 44px;flex-wrap:wrap;justify-content:center;align-items:baseline;
}
.ct-page .fb-fact{display:flex;align-items:baseline;gap:10px}
.ct-page .fb-fact b{font-family:var(--chalkfont);font-weight:400;font-size:1.36rem;color:#fff}
.ct-page .fb-fact span{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-soft)}
.ct-page /* ---------- section furniture ---------- */
.fb-sec{padding:92px 0;position:relative}
.ct-page .fb-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px;position:relative;z-index:2}
.ct-page h2{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.06}
.ct-page .fb-rule{height:2px;margin-top:14px;background:linear-gradient(90deg,var(--chalk-faint) 0 62%,transparent 62% 70%,var(--chalk-faint) 70% 100%)}
.ct-page .fb-eyebrow{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);font-weight:700;margin-bottom:10px}
.ct-page .fb-light .fb-eyebrow{color:var(--meat)}
.ct-page .fb-light .fb-rule{background:linear-gradient(90deg,rgba(28,25,22,.35) 0 62%,transparent 62% 70%,rgba(28,25,22,.35) 70% 100%)}
.ct-page /* ---------- chalk menu wall ---------- */
.fb-chalkwall{background:linear-gradient(180deg,#1a1713,var(--board) 55%,#1a1713);padding:52px 0 48px;border-bottom:1px solid rgba(0,0,0,.6)}
.ct-page .fb-frame{border:2px solid rgba(244,239,229,.22);border-radius:4px;padding:34px 30px 28px;position:relative}
.ct-page .fb-frame::after{content:"";position:absolute;inset:7px;border:1px solid rgba(244,239,229,.12);border-radius:3px;pointer-events:none}
.ct-page .fb-wall-title{position:absolute;top:-15px;left:36px;background:#16130f;padding:0 16px;font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--chalk-soft)}
.ct-page .fb-cuts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.ct-page .fb-cut{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;padding:16px 8px 14px;border-radius:3px;transition:background .18s,transform .18s}
.ct-page .fb-cut:hover{background:rgba(244,239,229,.06);transform:translateY(-3px)}
.ct-page .fb-cut svg{width:98px;height:76px;stroke:var(--chalk);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9;filter:url(#chalky)}
.ct-page .fb-cut:hover svg{stroke:var(--warm-soft);opacity:1}
.ct-page .fb-cut b{font-family:var(--chalkfont);font-weight:400;font-size:1.45rem;text-align:center;line-height:1.15}
.ct-page .fb-cut span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-soft)}
.ct-page .fb-wall-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px dashed rgba(244,239,229,.2)}
.ct-page .fb-special{display:flex;align-items:center;gap:14px}
.ct-page .fb-special b{font-family:var(--chalkfont);font-weight:400;font-size:1.8rem;color:var(--warm-soft);line-height:1}
.ct-page .fb-special svg{width:58px;height:26px;stroke:var(--warm-soft);fill:none;stroke-width:2;stroke-linecap:round;filter:url(#chalky)}
.ct-page .fb-wall-foot .side{font-size:.88rem;color:var(--chalk-soft)}
.ct-page /* ---------- the lit case ---------- */
.fb-case{background:linear-gradient(180deg,var(--graphite),var(--graphite-2) 55%,var(--graphite))}
.ct-page .fb-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;position:relative;z-index:2}
.ct-page .fb-tray{border-radius:3px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.45);transition:transform .2s;position:relative;padding:5px;background-image:linear-gradient(180deg,#9fa6ad,#6f767c 60%,#878e95)}
.ct-page .fb-tray:hover{transform:translateY(-4px)}
.ct-page .fb-tray img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ct-page .fb-tray figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#1c1917;padding:15px 16px;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.ct-page .fb-tray figcaption span{color:var(--chalk-soft);letter-spacing:.02em;text-transform:none;font-weight:400;font-family:var(--chalkfont);font-size:1.05rem}
.ct-page .fb-case-glow{height:6px;margin-top:28px;border-radius:99px;position:relative;z-index:2;background:linear-gradient(90deg,transparent,rgba(255,111,146,.9) 12%,rgba(255,150,130,.95) 50%,rgba(255,111,146,.9) 88%,transparent);box-shadow:0 0 50px 14px rgba(255,111,146,.32)}
.ct-page .fb-case-foot{display:flex;justify-content:center;margin-top:42px;position:relative;z-index:2}
.ct-page /* ---------- packs on the board ---------- */
.fb-packs{background:var(--board)}
.ct-page .fb-board{border:2px solid rgba(244,239,229,.18);border-radius:5px;background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),transparent 60%),linear-gradient(180deg,#1c1813,#120f0c);padding:40px 36px 42px;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.ct-page .fb-board-inner{border:1px dashed rgba(244,239,229,.16);border-radius:3px;padding:32px 28px}
.ct-page .fb-pack-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(244,239,229,.14)}
.ct-page .fb-pack{background:#16130f;padding:26px 22px;display:flex;flex-direction:column;gap:11px;text-decoration:none;transition:background .18s}
.ct-page .fb-pack:hover{background:#221d17}
.ct-page .fb-pack .fb-price{font-family:var(--display);font-size:2.4rem;line-height:1}
.ct-page .fb-pack .fb-qty{font-family:var(--chalkfont);font-size:1.15rem;color:var(--warm-soft);margin-top:-6px}
.ct-page .fb-pack h3{font-size:1.05rem}
.ct-page .fb-pack p{font-size:.92rem;color:var(--chalk-soft);flex-grow:1}
.ct-page .fb-pack .fb-go{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:#ff5a68;display:inline-flex;align-items:center;min-height:44px}
.ct-page .fb-board-note{margin-top:24px;font-size:.88rem;color:var(--chalk-soft);text-align:center}
.ct-page /* ---------- stainless divider ---------- */
.fb-m-steel{
  background-color:#2b2f33;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 22%,rgba(0,0,0,.18) 78%,rgba(0,0,0,.34)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 3px,rgba(0,0,0,.03) 3px 7px),
    linear-gradient(180deg,#42474c,#2c3135 55%,#373c41);
}
.ct-page .fb-steelband{position:relative;border-top:3px solid rgba(255,214,160,.3);border-bottom:3px solid rgba(0,0,0,.55);box-shadow:inset 0 14px 34px rgba(0,0,0,.28)}
.ct-page .fb-steelband .fb-wrap{position:relative;padding:52px 0;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.ct-page .fb-steelband h2{color:#f2efe9;text-shadow:0 3px 14px rgba(0,0,0,.5)}
.ct-page .fb-steelband p{color:rgba(242,239,233,.82);max-width:30em}
.ct-page .fb-steelband .fb-chalkline{font-family:var(--chalkfont);font-size:1.5rem;color:#ffe9cd}
.ct-page /* ---------- timber divider ---------- */
.timber{position:relative;border-top:3px solid rgba(255,214,160,.3);border-bottom:3px solid rgba(0,0,0,.55);box-shadow:inset 0 14px 34px rgba(0,0,0,.28)}
.ct-page .timber .fb-wrap{position:relative;padding:54px 0;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.ct-page .timber h2{color:#fff8ee;text-shadow:0 3px 14px rgba(0,0,0,.5)}
.ct-page .timber p{color:rgba(255,244,230,.92);max-width:30em;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.ct-page .timber .fb-chalkline{font-family:var(--chalkfont);font-size:1.5rem;color:#ffe9cd}
.ct-page /* ---------- the rest of the counter ---------- */
.fb-more{background:linear-gradient(180deg,var(--graphite-2),var(--graphite))}
.ct-page .fb-snags-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:50px;align-items:center}
.ct-page .fb-snags-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;box-shadow:0 24px 48px rgba(0,0,0,.45),0 0 0 6px #c1c6cc}
.ct-page .fb-snag-list{list-style:none;margin-top:24px}
.ct-page .fb-snag-list li{display:flex;gap:16px;padding:13px 0;border-bottom:1px dashed rgba(244,239,229,.16)}
.ct-page .fb-snag-list li:last-child{border-bottom:none}
.ct-page .fb-snag-list b{flex:0 0 40%;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}
.ct-page .fb-snag-list span{color:var(--chalk-soft);font-size:.94rem}
.ct-page .fb-week-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.ct-page .fb-week-card{background:#1c1917;border:1px solid rgba(244,239,229,.1);border-radius:3px;overflow:hidden}
.ct-page .fb-week-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ct-page .fb-week-card div{padding:22px 24px 26px}
.ct-page .fb-week-card h3{font-family:var(--display);font-size:1.3rem;margin-bottom:8px}
.ct-page .fb-week-card p{color:var(--chalk-soft);font-size:.95rem}
.ct-page /* ---------- salt wall ---------- */
.fb-salt{position:relative;border-top:3px solid rgba(255,190,150,.35);border-bottom:3px solid rgba(60,20,12,.5)}
.ct-page .fb-salt .fb-wrap{position:relative;padding:76px 0;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ct-page .fb-salt-copy{max-width:560px}
.ct-page .fb-salt-plate{background:rgba(18,10,7,.78);border:1px solid rgba(255,220,200,.28);border-radius:3px;padding:26px 30px;backdrop-filter:blur(2px);box-shadow:0 20px 44px rgba(60,20,10,.4)}
.ct-page .fb-salt h2{color:#fff;text-shadow:0 4px 20px rgba(70,20,10,.6)}
.ct-page .fb-salt p{color:#fff;text-shadow:0 2px 12px rgba(70,20,10,.7)}
.ct-page .fb-salt .fb-kicker{color:#fff3ea;text-shadow:0 2px 10px rgba(70,20,10,.6)}
.ct-page .fb-btn-salt{background:#fff;color:#7a2b1c;border-color:#fff}
.ct-page .fb-btn-salt:hover{background:#2a1510;color:#fff;border-color:#2a1510}
.ct-page /* ---------- visit, .ct-page on the shop floor ---------- */
.fb-light{color:var(--ink)}
.ct-page .fb-light h2, .ct-page .fb-light h3{color:var(--ink)}
.ct-page .fb-visit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center}
.ct-page .fb-addr{font-size:1.05rem;color:var(--ink-soft)}
.ct-page .fb-hours{list-style:none;margin:20px 0 24px;max-width:420px}
.ct-page .fb-hours li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px dashed rgba(28,25,22,.25);font-size:.97rem}
.ct-page .fb-hours li span{font-family:var(--chalkfont);font-size:1.15rem;color:var(--meat-deep)}
/* Visit figure holds the Lennox Village static map (1000x640, OSM tiles, Lane D 2026-09-20).
   height:auto is required: the <img height> attribute otherwise wins over aspect-ratio and
   the old photo rendered a fixed 675px tall at every width (measured live, 320-1440). */
.ct-page .fb-visit-photo{border:6px solid #fff;background:#fff;box-shadow:0 26px 56px rgba(0,0,0,.28);border-radius:2px}
.ct-page .fb-visit-photo a{display:block;line-height:0}
.ct-page .fb-visit-photo img{display:block;width:100%;height:auto;aspect-ratio:25/16;object-fit:cover}
.ct-page .fb-visit-photo figcaption{font-family:var(--text);font-size:.8rem;line-height:1.4;color:var(--ink-soft);text-align:center;padding:8px 6px 2px}
.ct-page .fb-deliver{margin-top:24px;padding:18px 22px;border-left:3px solid var(--meat);background:rgba(207,33,48,.08);font-size:.95rem;color:var(--ink-soft)}
.ct-page .fb-stars{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.ct-page .fb-stars b{font-family:var(--display);font-size:2rem;line-height:1}
.ct-page .fb-stars i{position:relative;display:inline-block;color:rgba(28,25,22,.28);font-style:normal;font-size:1.2rem;letter-spacing:.24em;white-space:nowrap}
.ct-page .fb-stars .fb-stars__fill{position:absolute;left:0;top:0;overflow:hidden;color:#d98a12;white-space:nowrap}
.ct-page .fb-stars span{font-size:.9rem;color:var(--ink-soft)}
.ct-page /* ---------- footer ---------- */
.fb-site-foot{border-top:3px solid var(--meat);padding:38px 0 26px;position:relative}
.ct-page .fb-foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;position:relative;align-items:start}
.ct-page .fb-foot-brand .fb-brand img{height:112px}
.ct-page .fb-foot-addr{margin-top:12px;font-size:.88rem;color:var(--chalk-soft);line-height:1.5}
.ct-page .fb-foot-col{display:flex;flex-direction:column}
.ct-page .fb-foot-col h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin-bottom:8px}
.ct-page .fb-foot-col a{text-decoration:none;font-size:.9rem;color:var(--chalk-soft);min-height:32px;display:inline-flex;align-items:center;width:fit-content}
.ct-page .fb-foot-col a:hover{color:var(--chalk)}
.ct-page .fb-foot-col p{font-size:.88rem;color:var(--chalk-soft);line-height:1.7}
.ct-page .fb-foot-phone{font-family:var(--display);font-size:1.25rem;color:var(--chalk)!important;margin-bottom:4px}
.ct-page .fb-foot-note{margin-top:26px;padding-top:16px;border-top:1px solid rgba(244,239,229,.12);font-size:.78rem;color:rgba(244,239,229,.5);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative}
.ct-page .fb-foot-note a{color:rgba(244,239,229,.6);text-decoration:none}
.ct-page .fb-foot-note a:hover{color:var(--warm)}

@media (max-width:1000px){
.ct-page .site-head .fb-wrap{flex-wrap:wrap;gap:12px}
.ct-page .nav{order:3;width:100%;margin-left:0;gap:20px;overflow-x:auto;scrollbar-width:none;border-top:1px solid rgba(244,239,229,.1)}
.ct-page .nav::-webkit-scrollbar{display:none}
.ct-page .nav a{font-size:.74rem;white-space:nowrap;min-height:40px}
.ct-page .call{margin-left:auto}
.ct-page .fb-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-page .fb-cuts{grid-template-columns:repeat(3,minmax(0,1fr))}
.ct-page .fb-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-page .fb-snags-grid, .ct-page .fb-visit-grid{grid-template-columns:minmax(0,1fr);gap:32px}
.ct-page .fb-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.ct-page .hero .fb-wrap{padding:92px 0 82px}}
@media (max-width:640px){
.ct-page{font-size:16px}
.ct-page .fb-wrap{width:calc(100% - 32px)}
.ct-page .fb-sec{padding:64px 0}
.ct-page .fb-shelf, .ct-page .fb-week-grid, .ct-page .fb-pack-grid{grid-template-columns:minmax(0,1fr)}
.ct-page .fb-cuts{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ct-page .fb-cut{padding:14px 4px 12px}
.ct-page .fb-cut svg{width:76px;height:58px}
.ct-page .fb-cut b{font-size:1.28rem}
.ct-page .fb-frame{padding:26px 14px 22px}
.ct-page .fb-wall-title{left:18px;font-size:.7rem;letter-spacing:.22em}
.ct-page .fb-board{padding:22px 16px 24px}
.ct-page .fb-board-inner{padding:20px 14px}
.ct-page .hero .fb-wrap{padding:70px 0 62px}
.ct-page .hero h1{font-size:2.05rem}
.ct-page .fb-kicker{font-size:1.28rem}
.ct-page .hero p{font-size:1rem}
.ct-page .fb-btn{padding:13px 22px;font-size:.8rem}
.ct-page .fb-brand img{height:62px}
.ct-page .call{font-size:.78rem;padding:10px 15px;white-space:nowrap}
.ct-page .strip .fb-wrap{justify-content:center;text-align:center;font-size:.72rem}
.ct-page .fb-foot-grid{grid-template-columns:minmax(0,1fr);gap:22px}
.ct-page .fb-foot-brand .fb-brand img{height:76px}
.ct-page .fb-plate{padding:16px 20px;gap:10px 24px}
.ct-page .fb-lights i{width:300px;height:300px;margin-left:-150px}
.ct-page .fb-salt .fb-wrap, .ct-page .timber .fb-wrap{padding:48px 0}}
@media (prefers-reduced-motion:reduce){
.ct-page *{transition:none!important}}

/* ---- carried over from their :root, which my extraction dropped ---- */
.ct-page{
  --gut:clamp(18px,4.4vw,64px);
}
/* their lockup, at the size the owner asked for */
.ct-page .ct-brand .ct-lockup{height:88px;width:auto;max-width:none;border-radius:0;filter:drop-shadow(0 3px 10px rgba(0,0,0,.65))}
@media (max-width:640px){.ct-page .ct-brand .ct-lockup{height:60px}}
/* 44px touch floor on everything tappable in the hero */
.ct-page .ct-bar-nav a,
.ct-page .ct-call,
.ct-page .ct-btn,
.ct-page .ct-link{min-height:44px;display:inline-flex;align-items:center}

/* ---------- Lane D 2026-09-20: consistency sweep fixes (front page) ---------- */
/* .fb-eyebrow on the light sections measured 4.34:1 (--meat #cf2130 on the terrazzo #eae7df, 390px); --meat-deep is 7.2:1. */
.ct-page .fb-light .fb-eyebrow{color:var(--meat-deep)}
/* Hero bar nav link CART measured 30px wide at 320/390 (44px floor). */
.ct-page .nav a{min-width:44px;text-align:center;justify-content:center}
/* Round 2: the hero bar's links are nav.ct-bar-nav a (display:flex), not .nav a — CART still measured 30px wide. */
.ct-page .ct-bar-nav a{min-width:44px;justify-content:center}

/* ---------- phone type: the things a customer taps ----------
   Measured on the live home page at 390px, 2026-09-21: the two hero buttons rendered at 12px,
   the phone CTA at 13px and the nav at 10.5px - a media query was REDUCING the nav on exactly
   the screens that need it most. 45 text nodes sat under 14px.
   ⚠ The NAV is deliberately NOT in here. Raising it to 11.5px wrapped it onto two lines at
   both 390 and 320 - measured, and the exact thing the owner objected to. Six items across a
   phone is the constraint; 10.5px keeps them on one row and reads acceptably on the device.
   Any future attempt to grow it has to drop an item first. */
@media (max-width:640px){
  .ct-page .ct-btn{font-size:14px;padding:16px 22px}
  .ct-page .ct-link{font-size:13px}
  .ct-page .ct-call{font-size:14px;padding:12px 16px}
  /* Cart was wrapping to a second row at 390 BEFORE any of tonight's changes: the six links
     measure 328px inside a 354px bar, and five 6px gaps take it to 358. Four pixels over.
     A 4px gap lands it at 348 with room to spare. */
  .ct-page .ct-bar-nav{gap:4px}
}
/* The six links measure 328px of text, and five 4px gaps take the row to 348px. The nav gets
   the viewport less 36px of bar padding, so one line needs 384px or more. 360 was the wrong
   threshold: it left the band from 361 to 383 wrapping, and 375 sits in it, which is the
   iPhone SE and the 13 mini. Measured at 375 on 2026-09-21: nav 339px wide, 348px of content,
   Cart on a second row. So the in-page jump to the sausage section steps aside up to 389 -
   it is two taps away inside The case, and a wrapped menu is what the owner complained about. */
@media (max-width:389px){
  .ct-page .ct-bar-nav a[href="#sausages"]{display:none}
}

/* ---------- Fable site pass 2026-09-24, #13: a legibility floor on the home page ----------
   Measured at 390px before this block: 30 text elements under 13px. The six "Our selection"
   labels were 10.88px (.68rem), the "Our selection" title 11.2px, the eyebrows and the pack
   "Order this pack" links 12.16px, every .fb-btn 12.8px, the map caption 12.8px and the info
   bar 10.5px. Floor: 13px on small labels, 14px on buttons. Placed last so it beats the
   earlier phone media queries that were shrinking these.
   ⚠ The main nav is deliberately NOT raised (see "phone type" above): at 13px its six items
   need about 384px and wrap on a 375px phone, which the owner has refused. It stays 10.5px
   on phones until an item is dropped. */
.ct-infobar-in{font-size:13px;letter-spacing:.06em}
.ct-page .fb-wall-title{font-size:13px}
.ct-page .fb-cut span{font-size:13px;letter-spacing:.1em}
.ct-page .fb-eyebrow{font-size:13px}
.ct-page .fb-pack .fb-go{font-size:13px}
.ct-page .fb-btn{font-size:14px}
.ct-page .ct-btn{font-size:14px}
.ct-page .ct-link{font-size:13px}
.ct-page .fb-visit-photo figcaption{font-size:13px}
/* At 360px the info bar's second line wrapped "25KM" onto a third line at .06em. */
@media (max-width:389px){.ct-infobar-in{letter-spacing:.02em}}

/* ---------- Fat Boy's Kitchen (owner 2026-10-19): Damien's photos, one tile per product ----------
   Follows .fb-more on the same graphite, so it opens with a hairline and a shorter top pad instead of a
   second 92px gap. 5-up desktop, 3-up to 1000px, 2-up on phones; captions 13px+ like the rest of the
   phone type. */
.fb-kitchen{background:linear-gradient(180deg,var(--graphite),var(--graphite-2));border-top:1px solid rgba(244,239,229,.1)}
.ct-page .fb-kitchen{padding-top:72px}
.ct-page .fb-kitchen-grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.ct-page .fb-kitchen-tile{display:block;height:100%;background:#1c1917;border:1px solid rgba(244,239,229,.1);border-radius:3px;overflow:hidden;color:var(--chalk);text-decoration:none;transition:transform .2s,border-color .2s}
.ct-page .fb-kitchen-tile:hover,.ct-page .fb-kitchen-tile:focus-visible{transform:translateY(-4px);border-color:rgba(255,183,94,.55)}
.ct-page .fb-kitchen-tile img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.ct-page .fb-kitchen-tile span{display:block;padding:12px 14px 14px;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;line-height:1.35}
@media (max-width:1000px){.ct-page .fb-kitchen-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
.ct-page .fb-kitchen{padding-top:52px}
.ct-page .fb-kitchen-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ct-page .fb-kitchen-tile span{font-size:13px;padding:10px 10px 12px;letter-spacing:.05em}}
@media (prefers-reduced-motion:reduce){.ct-page .fb-kitchen-tile{transition:none}.ct-page .fb-kitchen-tile:hover,.ct-page .fb-kitchen-tile:focus-visible{transform:none}}