/* ═══════════════════════════════════════════════════════════════════════════
   SITE VARIANT 3 — "Split flipped, photo left"
   Red nav. The photograph leads and the copy sits right on near-white, which
   is the reverse reading order to variant 1.
   Loaded after hero-redrail.css. Delete the link to revert.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  --v-paper:#F7F2EA; --v-red:#8E2A18; --v-ink:#211A15; --v-mute:#584C43;
}
/* ── nav: red, cream mark ───────────────────────────────────────────────── */
:root[data-theme="light"] .pagetop,
:root[data-theme="light"] .pagetop.is-stuck{background:var(--v-red);}
:root[data-theme="light"] .pagetop .topbar,
:root[data-theme="light"] .pagetop.is-stuck .topbar{border-bottom:1px solid rgba(255,255,255,.18);}
:root[data-theme="light"] .pagetop .nav a,
:root[data-theme="light"] .pagetop.is-stuck .nav a{color:#FFF;}
:root[data-theme="light"] .pagetop .nav a::after{background:#FFF;}
:root[data-theme="light"] .pagetop .topcall{background:#FFF;color:var(--v-red);}
:root[data-theme="light"] .pagetop .topcall:hover{background:#FFEDE7;color:var(--v-red);}
:root[data-theme="light"] .navtoggle span,
:root[data-theme="light"] .navtoggle span::before,
:root[data-theme="light"] .navtoggle span::after{background:#FFF;}

/* ── hero: photo LEFT at 58%, copy right at 42% ─────────────────────────────
   Order is flipped in CSS rather than in the markup, so the copy still comes
   first in the source. A screen reader and a search engine both read the
   headline before the photograph, which is the right order regardless of
   which side each lands on visually. */
:root[data-theme="light"] .hsplit{grid-template-columns:58fr 42fr;}
:root[data-theme="light"] .hsplit-shot{order:1;}
:root[data-theme="light"] .hsplit-panel{order:2;background:var(--v-paper);}
:root[data-theme="light"] .hsplit-word{color:var(--v-ink);}
:root[data-theme="light"] .hsplit-sub{color:var(--v-mute);}
:root[data-theme="light"] .hsplit-in .btn{background:var(--v-red);color:#FFF;}

/* stacked, the photo goes back on top */
@media (max-width:900px){
  :root[data-theme="light"] .hsplit-shot{order:1;}
  :root[data-theme="light"] .hsplit-panel{order:2;}
}

/* ── the bar, smaller again ──────────────────────────────────────────────────
   125px, then 91px, now 73px: a 48px mark with 12px of padding either side.

   This is the floor for THIS mark. Below about 48px the ring type (OPEN, ON
   O'CONNELL, 24HRS) stops resolving and the badge reads as a dark smudge,
   which was the exact fault flagged earlier in the build. Going thinner than
   73px means changing what sits in the bar, not shrinking it further. */
:root[data-theme="light"] .pagetop .topbar,
:root[data-theme="light"] .pagetop.is-stuck .topbar{
  padding-top:clamp(9px,.95vw,12px);
  padding-bottom:clamp(9px,.95vw,12px);
}
:root[data-theme="light"] .pagetop .brand img,
:root[data-theme="light"] .pagetop.is-stuck .brand img{
  width:clamp(40px,3.4vw,48px);
  height:clamp(40px,3.4vw,48px);
}
/* the links come down a touch with it, or they crowd the shorter bar */
:root[data-theme="light"] .pagetop .nav a{font-size:14px;}
:root[data-theme="light"] .pagetop .topcall{padding:10px 17px;font-size:14px;}

/* ── the photograph takes more of the width ──────────────────────────────────
   58/42 to 64/36. A bakery is sold by what is in the window, so the photo
   earns the space. The copy column drops to about 518px at 1440, which the
   headline still clears at its current size, checked rather than assumed. */
:root[data-theme="light"] .hsplit{grid-template-columns:64fr 36fr;}

/* ── the mark as their own hanging sign ──────────────────────────────────────
   A cream mark on the red bar was measuring fine at 8.42:1 but it was not
   READING: at 48px the fine ring type has no edge to sit against and the whole
   badge dissolves into the red.

   The shop already solved this. Their verandah sign is a charcoal shield with
   the lettering knocked out in white, and that is what makes it legible from
   across the street. Sampled off the photograph, the sign ground runs
   #282828 to #392D32 and the lettering is #FCFCFE.

   So the mark sits on a charcoal chip here, which is the same device, and it
   separates the badge from the red rather than dissolving into it. */
:root[data-theme="light"] .pagetop .brand{
  background:#2C2A2B;
  padding:7px 11px;
  border-radius:3px;
  display:inline-flex;align-items:center;
}
:root[data-theme="light"] .pagetop .brand img,
:root[data-theme="light"] .pagetop.is-stuck .brand img{
  width:clamp(38px,3.2vw,45px);
  height:clamp(38px,3.2vw,45px);
}
/* the chip adds its own height, so the bar padding comes back down to hold 73 */
:root[data-theme="light"] .pagetop .topbar,
:root[data-theme="light"] .pagetop.is-stuck .topbar{
  padding-top:clamp(6px,.7vw,8px);
  padding-bottom:clamp(6px,.7vw,8px);
}

/* ── the mark centred, hanging off the bar ───────────────────────────────────
   Josh's layout. The badge sits in the middle of the bar and drops below its
   bottom edge, with the links split either side of it, so the bar reads as a
   rail the sign hangs from rather than as a solid block with a logo parked in
   the corner.

   It also solves the size problem the other way round. The bar can stay thin
   because the mark is no longer trapped inside it, so the badge gets to be
   big enough for its ring type to read whilst the bar itself is only 62px.

   The mark is their own artwork: the mono cut off their live site, inverted so
   the line work is light and the BAKERY banner knocks out of the charcoal,
   which is exactly how their verandah sign is drawn. */
:root[data-theme="light"] .pagetop{overflow:visible;}
:root[data-theme="light"] .pagetop .topbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(14px,2vw,30px);
  padding-top:9px;padding-bottom:9px;
  overflow:visible;
}
/* the two link groups, pushed in towards the centre mark */
:root[data-theme="light"] .pagetop .nav{display:flex;margin:0;}
:root[data-theme="light"] .pagetop .nav-l{justify-content:flex-end;gap:clamp(14px,1.9vw,28px);}
:root[data-theme="light"] .pagetop .nav-r{justify-content:flex-start;gap:clamp(14px,1.9vw,28px);align-items:center;}

/* the sign itself */
:root[data-theme="light"] .pagetop .brand{
  position:relative;z-index:2;
  background:#2C2A2B;
  padding:10px clamp(14px,1.6vw,22px) 12px;
  border-radius:4px;
  /* the overhang. The chip is taller than the bar and hangs below it, which
     is the whole device. */
  margin-bottom:clamp(-34px,-2.6vw,-22px);
  box-shadow:0 10px 22px rgba(20,14,12,.28);
  display:inline-flex;align-items:center;
}
:root[data-theme="light"] .pagetop .brand img,
:root[data-theme="light"] .pagetop.is-stuck .brand img{
  width:clamp(58px,5.6vw,76px);
  height:auto;
}
/* the phone sits at the far right of the right-hand group */
:root[data-theme="light"] .pagetop .nav-r .topcall{margin-left:auto;}

/* the hero starts below the overhang, not below the bar, or the sign covers
   the top of the photograph */
:root[data-theme="light"] .hsplit{margin-top:calc(var(--navh,62px) + clamp(22px,2.6vw,34px));}

@media (max-width:900px){
  /* stacked, the split nav has nothing to split, so the mark goes back inline */
  :root[data-theme="light"] .pagetop .topbar{
    display:flex;justify-content:space-between;padding-top:8px;padding-bottom:8px;
  }
  :root[data-theme="light"] .pagetop .brand{margin-bottom:0;box-shadow:none;}
  :root[data-theme="light"] .pagetop .brand img{width:52px;}
  :root[data-theme="light"] .hsplit{margin-top:var(--navh,72px);}
}

/* the bar has exactly three grid children now. The burger rides with the left
   group and the phone with the right, so neither can fall into a phantom
   fourth column and land on top of the links. */
:root[data-theme="light"] .pagetop .bar-l{display:flex;align-items:center;justify-content:flex-end;gap:clamp(14px,1.9vw,28px);min-width:0;}
:root[data-theme="light"] .pagetop .bar-r{display:flex;align-items:center;justify-content:flex-start;gap:clamp(14px,1.9vw,28px);min-width:0;}
:root[data-theme="light"] .pagetop .bar-r .topcall{margin-left:auto;}
:root[data-theme="light"] .pagetop .topbar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
@media (min-width:901px){ :root[data-theme="light"] .pagetop .navtoggle{display:none;} }
@media (max-width:900px){
  :root[data-theme="light"] .pagetop .bar-l{justify-content:flex-start;}
  :root[data-theme="light"] .pagetop .bar-r .nav{display:none;}
}

/* Both groups were justified towards the centre, which piled every link up
   against the sign and left the ends of the bar empty. They push outwards
   instead, so the row reads left group, sign, right group across the width. */
:root[data-theme="light"] .pagetop .bar-l{justify-content:flex-start;}
:root[data-theme="light"] .pagetop .bar-r{justify-content:flex-end;}
:root[data-theme="light"] .pagetop .bar-l .nav,
:root[data-theme="light"] .pagetop .bar-r .nav{flex:0 0 auto;white-space:nowrap;}
:root[data-theme="light"] .pagetop .bar-r .topcall{margin-left:clamp(14px,1.9vw,28px);}
@media (max-width:900px){
  :root[data-theme="light"] .pagetop .bar-r{justify-content:flex-end;}
}

/* ── undo the old absolute nav centring ──────────────────────────────────────
   styles.css line 426, inside a min-width:1081px block, pins .nav with
   position:absolute, left:50%, translate(-50%,-50%). That was how the nav was
   centred before the sign existed. It is why both link groups ignored their
   own containers and stacked on top of each other in the middle of the bar:
   they were not in the flow at all.
   The sign is the centred thing now, so the links go back into normal flow. */
@media (min-width:1081px){
  :root[data-theme="light"] .pagetop .topbar .nav{
    position:static;left:auto;top:auto;transform:none;
  }
}

/* ── the mark is the sign itself now ─────────────────────────────────────────
   Rebuilt rather than cut out of the photograph. Keying it off the storefront
   shot was never going to be clean: the sign physically touches its bracket
   and the rail behind it, so any threshold that keeps the shield also keeps
   those. This is their real BAKERY lettering, lifted from the mono artwork on
   their own site, set in the shield shape with the ON O'CONNELL plate.

   No charcoal chip any more. The shield IS the dark shape, so it hangs
   straight off the bar the way the real one hangs off the verandah. */
:root[data-theme="light"] .pagetop .brand{
  background:none;padding:0;border-radius:0;box-shadow:none;
  margin-bottom:clamp(-40px,-3vw,-26px);
  filter:drop-shadow(0 10px 18px rgba(20,14,12,.34));
}
:root[data-theme="light"] .pagetop .brand img,
:root[data-theme="light"] .pagetop.is-stuck .brand img{
  width:clamp(132px,12vw,176px);
  height:auto;
}
@media (max-width:900px){
  :root[data-theme="light"] .pagetop .brand{margin-bottom:0;filter:none;}
  :root[data-theme="light"] .pagetop .brand img{width:118px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV BACK TO NORMAL, SIGN ON THE LEFT
   The centred overhanging arrangement is undone. Sign left, links right,
   phone far right. Everything below reverses the split-bar block above it.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .pagetop{overflow:hidden;}
:root[data-theme="light"] .pagetop .topbar,
:root[data-theme="light"] .pagetop.is-stuck .topbar{
  display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);
  padding-top:clamp(8px,.9vw,11px);
  padding-bottom:clamp(8px,.9vw,11px);
  overflow:hidden;
}
/* one auto margin only, on the brand, so the links and phone sit right */
:root[data-theme="light"] .pagetop .brand{
  margin:0 auto 0 0;
  background:none;padding:0;border-radius:0;box-shadow:none;filter:none;
  display:inline-flex;align-items:center;
}
:root[data-theme="light"] .pagetop .nav{margin:0;}
:root[data-theme="light"] .pagetop .topcall{margin-left:0;}
/* the hero goes back to sitting directly under the bar */
:root[data-theme="light"] .hsplit{margin-top:var(--navh,80px);}

/* ═══════════════════════════════════════════════════════════════════════════
   THE RIGHT PANEL GOES CHARCOAL
   #272321, sampled off the logo artwork itself rather than picked, so the copy
   panel is literally the same material as the sign in the bar and in the photo.
   The lettering follows the sign too: cream on charcoal, 13.28:1.

   The red cannot come with it. #8E2A18 on this charcoal is under 2:1 and even
   the bright #D2452B only reaches 3.43:1, which is large-text only. So the CTA
   takes a cream fill with charcoal type, which is exactly how the ON O'CONNELL
   plate is drawn on the sign. The red stays where it works: the nav bar.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{ --char:#272321; --char-cream:#F3ECE2; }

:root[data-theme="light"] .hsplit-panel{background:var(--char);}
:root[data-theme="light"] .hsplit-word{color:var(--char-cream);}      /* 13.28:1 */
:root[data-theme="light"] .hsplit-sub{color:#BDB3AA;}                 /* 8.1:1  */
:root[data-theme="light"] .hsplit-in .btn{background:var(--char-cream);color:var(--char);}
:root[data-theme="light"] .hsplit-in .btn:hover{background:#FFF;color:var(--char);}

/* ── the hours band, three columns ───────────────────────────────────────────
   One question per column: when, where, how good. The score is set large
   because a 4.6 is the single most persuasive thing in the band and it was
   previously the smallest thing in it. */
:root[data-theme="light"] .band{background:var(--char);color:var(--char-cream);border-bottom:0;}
:root[data-theme="light"] .band-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,64px);align-items:start;
  max-width:var(--maxw);margin-inline:auto;
}
:root[data-theme="light"] .band-col{min-width:0;}
:root[data-theme="light"] .band-lab{
  margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#E8734F;                            /* 5.19:1 */
}
:root[data-theme="light"] .band-in .band-big{
  font-size:clamp(19px,1.75vw,26px);line-height:1.28;margin:0 0 12px;
  color:var(--char-cream);letter-spacing:normal;
}
:root[data-theme="light"] .band-in .band-note{
  margin:0 0 16px;font-size:14.5px;line-height:1.55;color:#A89E96;max-width:34ch;
}
:root[data-theme="light"] .band-score{
  margin:0 0 6px;font-family:'Plus Jakarta Sans','Anton',sans-serif;
  font-size:clamp(46px,5.2vw,76px);line-height:.9;color:var(--char-cream);
}
:root[data-theme="light"] .band-in .btn{background:var(--char-cream);color:var(--char);}
:root[data-theme="light"] .band-in .btn:hover{background:#FFF;color:var(--char);}
@media (max-width:820px){
  :root[data-theme="light"] .band-grid{grid-template-columns:1fr;gap:28px;}
}

/* Get directions goes pure white rather than the site cream, so it separates
   from the cream type around it and reads as the one thing to press in the
   band. White on charcoal is 15.28:1. */
:root[data-theme="light"] .band-in .btn{background:#FFFFFF;color:var(--char);}
:root[data-theme="light"] .band-in .btn:hover{background:#FFEDE7;color:var(--char);}

/* ═══════════════════════════════════════════════════════════════════════════
   DISPLAY FACE: Plus Jakarta Sans 800
   SIL Open Font Licence, free commercially, self hosted at 12KB. This replaces
   Heavitas and CLEARS the licence blocker: nothing on the site now needs a
   font purchase before it can go live.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('fonts/PlusJakartaSans-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
}
:root[data-theme="light"] .hsplit-word,
:root[data-theme="light"] .sec-head h2,
:root[data-theme="light"] .split h2,
:root[data-theme="light"] .find h2,
:root[data-theme="light"] .band-in .band-big,
:root[data-theme="light"] .band-score,
:root[data-theme="light"] #range-h{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.015em;   /* Jakarta is looser than Heavitas, so it wants tracking back in */
}

/* Pre-existing gap, found 12-09-2026 and unrelated to anything else here.
   The links hide at 1080 but `.navtoggle` only appears at 900, so between
   901 and 1080 the site had no navigation at all. */
@media (max-width:1080px){
  :root[data-theme="light"] .pagetop .navtoggle{display:inline-flex;}
}