/* Radio Lamington (11 Sep 2026) – on top of ../page.css. Soft pink, the charity first. */
:root{--blush:#F2ECE9;   /* SANDSTONE (Nuo, 2 Oct 2026: "the same sandstone background as all the other pages except art and christmas"); the plum ink and frames stay - his call, option A. Before: #FFFBFC */ --blush-was:#FFFBFC;   /* brighter and less pink again (Nuo, 29 Sep 2026: "make the background colour for the radio lamington page even brighter and less pink"; #FDF5F7 from 27 Sep, #F9E1E7 before) */ --rose:#F3C4D0;--raspberry:#D6336C;--plum:#3A1020;--accent:var(--raspberry);--accent-ink:#fff;--nav:112px}
body{background:var(--blush);color:var(--plum)}
/* .pill{border-color:var(--plum);color:var(--plum)}  RETIRED 3 Oct 2026: buttons are black with blue hover on every light page (Nuo); the plum stays on type and frames */
/* the plum hover rules retired 3 Oct 2026 with the line above */
.pill.sm{padding:8px 14px;font-size:12px}
.nav.solid{background:var(--blush)}
.nav.solid ul{color:var(--plum)}
.chapters a{background:rgba(253,245,247,.9);border-color:rgba(58,16,32,.12);color:var(--plum)}
.chapters a.here{background:var(--raspberry);border-color:var(--raspberry);color:#fff}
p.body{color:#4a2334}
h2.caps{color:var(--plum)}
.hero{background:#2a0b16}
.hero .shade{background:linear-gradient(180deg,rgba(58,16,32,.45),rgba(58,16,32,0) 40%,rgba(58,16,32,.7) 100%)}
/* the Radio Lamington mark, big (Nuo, 11 Sep: "much larger", then "even much bigger"); the nav is taller on this page to hold it */
.nav .logo.rl{height:92px;transition:height .35s var(--ease)}
/* the 92px mark is 230px wide, and between 861 and 1280px the eight-item bar (footer.js steps it down to 10.5px at 960) met the
   Book button with 0px to spare at 880 and 1024, 10px at 1280 - every other page has 5-7px at 880 and 55px at 1024 with a
   93px wordmark (measured 13 Sep 2026). The mark steps down with the bar: 60px (150 wide) to 1280, 38px (95 wide) under 960,
   and is its full size again where the bar has the room. The burger takes over at 860. */
@media (max-width:1280px) and (min-width:961px){.nav .logo.rl{height:60px}}
@media (max-width:960px) and (min-width:861px){.nav .logo.rl,.nav.solid .logo.rl{height:38px}}   /* .solid's own 48px would out-rank this and take the gap back once scrolled */
/* once the hero has gone and the nav turns pink, the mark shrinks and the bar with it (Nuo, 11 Sep) */
.nav{transition:background .35s,height .35s var(--ease)}
.nav.solid{height:72px}.nav.solid .logo.rl{height:48px}
.chapters{top:72px}
.hero h1{font-size:clamp(44px,6.5vw,96px)}
/* THE COVER HAS NO ORDER NOW PILL (Nuo, 29 Sep 2026: "delete the pink order now button on the hero image of radio lamington
   page, both on desktop and mobile"). It was filled Neon Pink #FF3CA0 from 13 Sep; its rules went with it. Ordering stays one
   tap away: the bar's own Order now, and the pill beside Our Lamingtons. */

/* the ticker strip's rules were deleted on 23 Sep 2026 (Nuo: "prue hates these strips, delete them everywhere!") */

.intro{padding:96px var(--pad) 40px}
/* two equal columns: the right photograph is 4:5, the one under the text 8:5 – exactly half its height at the same
   width – and both columns pin their photograph to the foot of the row, so the two bottoms are always level */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
.intro .pic{display:flex;align-items:flex-end}
.intro .pic img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px;box-shadow:0 30px 60px rgba(58,16,32,.18)}
.intro .txt{display:flex;flex-direction:column}
/* the Chelsea and Westminster photograph is 4:3 (1500x1125) in an 8:5 box, so 17% of its height is cropped. At
   50% 60% the cut came off the top and took the pride flag; at 20% (Nuo, 13 Sep 2026: "move up this image a bit so
   the full pride flag is visible") the cut is 3.4% of the photo above the flag, which starts at ~7%, and the rest
   is pavement below the nurses. Measured live at 0%, 20% and 60%. On a phone the box is 4:3 and nothing is cut. */
.intro .txt img.under{margin-top:auto;width:100%;aspect-ratio:8/5;object-fit:cover;object-position:50% 20%;border-radius:20px;box-shadow:0 30px 60px rgba(58,16,32,.18)}
.intro .txt p:last-of-type{margin-bottom:28px}

.give{padding:60px var(--pad) 100px}
/* THE BAND IS A PLAIN BLOCK, NOT A PINK BANNER (Prue 22 Sep 2026, via Nuo: "you already said you don't like these banners... the pictures are pretty nice... a straight background"). Raspberry fill and white type became the blush ground with plum type; the number and the words are unchanged. The hospital ticker went the same day. */
.band{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;background:transparent;color:var(--plum);border-top:1px solid rgba(58,16,32,.18);border-bottom:1px solid rgba(58,16,32,.18);border-radius:0;padding:40px 0;margin-bottom:48px}
.band .num b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(32px,3.2vw,56px);letter-spacing:-0.02em;line-height:1.02;font-variant-numeric:tabular-nums}
.band .num span{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.1em;display:block;margin-top:10px;opacity:.9}
.band .every .k{color:var(--raspberry);margin-bottom:8px}
.band .every p{font-size:clamp(16px,1.3vw,20px);line-height:1.45}
.two{columns:2;column-gap:48px;margin-bottom:36px}
.two p{break-inside:avoid}
.ask{background:#fff;border-radius:20px;padding:28px 32px;margin-bottom:36px}
/* the charity copy: a fixed two-column grid, the ask card in the left column under the first paragraph, so the
   card is half the page and takes the space the short column left empty (Nuo, 11 Sep 2026) */
.two.split{columns:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start}
.two.split .ask{margin:8px 0 0}
.two.split .ask .row{flex-direction:column;align-items:flex-start;gap:14px}
.ask p.lead{margin-bottom:18px}
.ask .row{display:flex;align-items:center;gap:24px}
.ask .row .pill{flex:0 0 auto}
.ask .row p{margin:0}
/* The tag-us card (.tag) and the #aLamingtonforaLamington heading (h2.caps.tag) were deleted on 13 Sep 2026
   (Nuo). Note for the record: both carried the class "tag", so the heading had been sitting in the card's rose
   rounded box by collision, not by design. */
.band .every p{hyphens:auto;-webkit-hyphens:auto}                           /* justified everywhere (Nuo, 10 Sep); the centred contact card stays centred */
.mosaic .tile .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(180deg,rgba(58,16,32,0),rgba(58,16,32,.75));color:#fff;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
@media (hover:hover){.mosaic .tile:hover .cap{opacity:1;transform:none}}
.mosaic.small{grid-auto-rows:170px}

.story{padding:0 var(--pad) 100px}
.boxes{padding:0 var(--pad) 100px}
.boxes .hd{align-items:center}.boxes .hd h2{margin-bottom:0}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product{position:relative;display:block;background:#fff;border-radius:20px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s;box-shadow:0 14px 30px rgba(58,16,32,.12);transition-delay:var(--d,0ms)}
@media (hover:hover){.product:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(58,16,32,.22)}}
.product img{width:100%;aspect-ratio:1/1;object-fit:cover}
.product .body{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:20px 22px 6px}
.product .name{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:clamp(22px,2vw,28px);line-height:1}
.product .price{font-family:var(--head);font-size:18px;color:var(--raspberry);white-space:nowrap}
.product .pill{margin:8px 22px 22px}

.ingr{padding:0 var(--pad) 100px}
/* the allergens card closes the section, under the supplier grid (Nuo, 13 Sep 2026) */
.allergens{background:#fff;border-radius:20px;padding:28px 32px;margin-top:28px}
/* page.css caps every p.body at 68ch, which left the right third of this card empty. The text takes the
   card's full width (Nuo, 13 Sep 2026: "use the full width of the card for the text"). */
.allergens p.body{max-width:none}
.allergens p.body:last-child{margin-bottom:0}
.allergens h3{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:20px;margin-bottom:10px}
.scard h3{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:15px;line-height:1.15;margin-bottom:8px}
/* SIX ACROSS ON A DESKTOP (Nuo, 23 Sep 2026: "show these cards 6 side by side as well!"; was three). A supplier card at six across is
   ~190px wide on a 1280 screen, so the type steps down: 15px name, 12.5px copy, tighter padding. Four on a tablet, one on a phone (below). */
.sup{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (min-width:861px) and (max-width:1100px){.sup{grid-template-columns:repeat(4,1fr)}}
.scard{background:#fff;border-radius:14px;overflow:hidden;transition-delay:var(--d,0ms)}
.scard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.scard .body{padding:14px 14px 16px}
.scard p{font-size:12.5px;line-height:1.45;color:#4a2334;margin-bottom:8px;hyphens:auto;-webkit-hyphens:auto}
/* three lines by default (Nuo, 13 Sep 2026). -webkit-line-clamp counts lines across the paragraphs inside the
   box; the paragraph gap is kept as margin-top so the box's first line starts at its top. .open lifts it.
   rl.js shows the button only where scrollHeight exceeds clientHeight - a clamp hides nothing visibly. */
.scard .desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.scard .desc p{margin:0}
.scard .desc p + p{margin-top:10px}
.scard.open .desc{display:block;overflow:visible}
.scard .acts{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.scard .more{display:inline-block;padding:6px 0;margin:0;background:none;border:0;cursor:pointer;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--plum)}
@media (hover:hover){.scard .more:hover{color:var(--raspberry)}}
/* the author display: above beats the UA's [hidden]{display:none} (CLAUDE.md); restated so hidden means hidden */
.scard .more[hidden]{display:none}
.scard a{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--raspberry)}

.press{padding:0 var(--pad) 100px}
/* the contact sentence sits UNDER the heading on one line, not beside it in a 46ch box that broke it in two
   (Nuo, 11 Sep 2026) */
/* THE TWO ARTICLE PILLS SIT TOP RIGHT, LEVEL WITH THE HEADING (Nuo, 23 Sep 2026, red arrow on a screenshot: "move the pill buttons for
   the 2 press articles"). They were a row under the six logos. .press is a positioned block; .plinks is absolute at the top right
   of it; on a phone it drops back into the flow under the logos. */
.press{position:relative}
.press .hd{flex-direction:column;align-items:flex-start;gap:10px;padding-right:340px}
.press .plinks{position:absolute;right:var(--pad);top:6px;margin:0;justify-content:flex-end}
@media (max-width:860px){.press .hd{padding-right:0}.press .plinks{position:static;margin-top:16px;justify-content:flex-start}}
.press .hd p.body{max-width:none;margin:0;text-align:left;white-space:nowrap}
@media (max-width:860px){.press .hd p.body{white-space:normal}}   /* a phone cannot hold it on one line */
.press .hd a{text-decoration:underline;text-underline-offset:3px}
.clips{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:22px}   /* the six press logos on one line on a desktop (Nuo, 11 Sep 2026) */
.clip{background:#fff;border-radius:16px;overflow:hidden;padding:14px;transition-delay:var(--d,0ms);transform:rotate(var(--r,0));display:flex;align-items:center;justify-content:center}   /* equal-height cards, each logo centred */
.clip:nth-child(odd){--r:-1deg}.clip:nth-child(even){--r:1deg}
.clip img{width:100%;height:auto;border-radius:6px}
.plinks{display:flex;gap:10px;flex-wrap:wrap}

.contact{padding:0 var(--pad) 110px}
.contact .frame{background:var(--plum);color:var(--blush);border-radius:24px;padding:56px 64px;text-align:center}
.contact h2{color:var(--rose);font-size:clamp(28px,2.8vw,40px);margin-bottom:18px}
.contact .big{display:inline-block;font-family:var(--head);font-size:clamp(22px,2vw,28px);letter-spacing:-0.02em;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.contact .soc{display:flex;justify-content:center;gap:22px;margin-top:26px;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em}
@media (hover:hover){.contact .soc a:hover{color:var(--rose)}}
/* the Instagram row (13 Sep 2026): six square thumbnails in one line under the links, each a link to its post,
   headed by the handle in the same small caps as the row above. Drawn only when rl-feed.js has posts. */
.contact .feed{margin-top:34px}
.contact .feed .fh{display:inline-block;padding:6px 0;margin-bottom:14px;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:var(--rose)}
@media (hover:hover){.contact .feed .fh:hover{color:#fff}}
.contact .feed .tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.contact .feed .ft{display:block;border-radius:12px;overflow:hidden;background:rgba(253,245,247,.08);transition:transform .45s var(--ease),box-shadow .45s}   /* the tiles reveal with the frame; no .reveal of their own */
@media (hover:hover){.contact .feed .ft:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,0,0,.35)}}
.contact .feed .ft img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}

/* tap boxes: an 11px link with no padding is a 15px target; the floor is 24px */
.scard a,.contact .soc a{display:inline-block;padding:6px 0}
/* the social marks (11 Sep 2026): footer.js's .dgsoc a is display:inline-flex, and the rule ABOVE beats it on
   specificity (.contact .soc a is 0,2,1 against 0,1,1) - so it is restated here, or the glyph sits on its own line
   above its label. The nested row keeps the parent's 22px so the gap between Facebook and Order now matches. */
.contact .soc .dgsoc{gap:22px}
.contact .soc .dgsoc a{display:inline-flex;align-items:center;gap:7px}
.band .num span{opacity:1}                                              /* 11px white at .9 on raspberry was 4.3:1; 4.6 at full */
.mmenu{--menu-bg:var(--blush)}body.mopen .nav{--menu-bg:var(--blush)}   /* the mobile menu wears this page's pink, not the sand */

@media (max-width:1100px){.products,.sup,.clips{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  :root{--nav:76px}.nav .logo.rl{height:56px}.nav.solid{height:60px}.nav.solid .logo.rl{height:38px}.chapters{top:60px}
  .hero h1{font-size:min(40px,10.4vw)}                                     /* "LAMINGTON BOXES" is 349px at 40px: it fits 390 and clips 375 */
  .intro{padding:56px var(--pad) 24px}.grid{grid-template-columns:1fr;gap:28px}.intro .txt img.under{aspect-ratio:4/3}
  .band{grid-template-columns:1fr;gap:20px;padding:28px}.two{columns:1}.two.split{grid-template-columns:1fr;gap:0}.two.split .ask{margin:8px 0 28px}.ask .row{flex-direction:column;align-items:flex-start;gap:14px}
  .products,.sup{grid-template-columns:1fr}
  .contact .feed .tiles{grid-template-columns:repeat(3,1fr);gap:8px}       /* six posts as 3 x 2 on a phone */
  .clips{grid-template-columns:1fr 1fr;gap:12px}                         /* press logos two a row (Nuo, 11 Sep 2026) */
  .clip{padding:10px}
  .mosaic .tile .cap{opacity:1;transform:none}                            /* hover-only captions never show on touch */
  .scard p,.band .every p,.ask .row p{font-size:14px}                      /* justified type one size down on a phone */
  .contact .frame{padding:32px 24px}
}
/* == SUPPLIER CARDS, 27 SEP 2026 == Nuo: "bottom align all the read more and more info links in the 6 cards, top align the description
   texts across all cards, reduce the font size for all titles and description text for these 6 cards, make all the titles fit on one
   line if possible! reduce the font size of the allergen text". SHARED TRACKS, never margins (the /requests/ rule): each card is a
   subgrid over four rows of .sup - photo, title, description, actions - so every title row, description row and action row is the
   height of the tallest in its row of cards. The description starts on one line across the row, and the actions sit on the row's
   foot (align-self:end). .body becomes display:contents so its three children are the subgrid's items; its padding moves onto them.
   The titles: 13px, and rl.js fitSupplierTitles() brings every title in the row down TOGETHER to the size the longest needs to sit on
   one line, floor 11px; a title that still will not fit at 11px wraps at that size rather than shrinking past the floor. */
.sup{row-gap:14px}
.scard{display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);grid-row:span 4;row-gap:0}   /* minmax(0,1fr): an auto column would widen to a nowrap title and the card would clip it */
.scard .body{display:contents}
.scard h3{font-size:13px;line-height:1.2;margin:0;padding:14px 14px 8px}
.scard .desc{margin:0 14px}
.scard p{font-size:12px}
.scard .acts{align-self:end;margin:0;padding:10px 14px 14px}
.allergens h3{font-size:17px}
.allergens p.body{font-size:14px;line-height:1.55}
@media (max-width:860px){.scard p{font-size:13px}.allergens p.body{font-size:13px}}
/* THE SECTION BUTTONS SIT ON THEIR OWN BAND (Nuo, 27 Sep 2026, picked from the open items): once the row pins under the bar it
   floated over the page and the text read through its gaps. It is now a solid blush band with a hairline under it, part of the
   bar rather than on top of the copy; the pills themselves are unchanged. */
.chapters{background:var(--blush);border-bottom:1px solid rgba(58,16,32,.12)}
/* == THE TAGLINE 29 SEP 2026 == index.html's .hero .hline, the same rules (rl.js has the ruling). 64px up (56 on a phone) so the scroll
   cue at 20px sits clear below it. */
.hero .hline{position:absolute;left:var(--pad);right:var(--pad);bottom:64px;z-index:3;margin:0;text-align:center;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);letter-spacing:.06em;line-height:1.3;color:#fff;text-wrap:balance}
.hero .hline .tg-w{white-space:nowrap}
.hero .hline.tg-arm .tg-l{opacity:0}
.hero .hline.tg-in .tg-l{animation:tgIn .5s ease var(--d) backwards}
@keyframes tgIn{from{opacity:0}to{opacity:1}}
/* (the tagline's colour wave and its halo were deleted 12 Oct 2026 - Prue does not like the glow; the letters still arrive white) */
@media (max-width:860px){.hero .hline{bottom:56px;font-size:18px;letter-spacing:.04em}}
/* the flower top right (rl.js): 22px, white over the photograph, black on the solid blush bar; desktop only */
.nav .rlhome{display:none;align-items:center;margin-left:22px;min-height:24px}
.nav .rlhome img{width:22px;height:22px;display:block}.nav .rlhome .dark{display:none}
.nav.solid .rlhome .light{display:none}.nav.solid .rlhome .dark{display:block}
@media (min-width:861px){.nav .rlhome{display:inline-flex}.nav>ul{margin:0 auto}}   /* four items under space-between would pull Book off the flower: the links take the free space either side instead */
/* == THE RADIO CURSOR 29 SEP 2026 == Nuo: "when the mouse is on the hero image, make the cursor look like the radio from the logo",
   "use the mark without the circle", "show normal cursor when the mouse is on the top bar". The radio, cut from the mark by
   _Supporting/scripts/build_radio_cursor.py (never by hand), 64px tall with a 128px copy for sharp screens; the click point is the top
   of the heart. It is the hero's own cursor, so the bar - a separate element over the photograph - keeps the normal one, and footer.js
   skips its hero flower on this page. A browser that cannot draw it falls back to the normal arrow. */
.hero,.hero *{cursor:url(../../assets/radio-cursor.png) 12 2,auto;cursor:-webkit-image-set(url(../../assets/radio-cursor.png) 1x,url(../../assets/radio-cursor@2x.png) 2x) 12 2,auto;cursor:image-set(url(../../assets/radio-cursor.png) 1x,url(../../assets/radio-cursor@2x.png) 2x) 12 2,auto}
/* == THE INTRO, LAID OUT 29 SEP 2026 == rl.js introHtml has the ruling. The lead in the head face; the middle paragraphs in columns of
   at least 30ch, so a wide text column holds two and a phone one; the donation card white on the blush with a rose rule. The page's
   68ch cap on p.body (page.css) is lifted inside the columns and the card, where the column width already sets the measure. */
.intro .lead{font-family:var(--head);font-weight:400;font-size:clamp(22px,1.9vw,30px);line-height:1.25;letter-spacing:-0.01em;color:var(--plum);margin:0 0 24px;text-wrap:balance}
.intro .cols{columns:2 30ch;column-gap:44px;margin-bottom:26px}
.intro .cols p.body{break-inside:avoid;margin:0 0 14px;max-width:none}
.intro .give{background:#fff;border:1px solid var(--rose);border-radius:16px;padding:22px 26px;margin-bottom:28px}
.intro .give .k{font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:var(--raspberry);margin-bottom:10px}
.intro .give p.body{margin:0 0 10px;max-width:none}
.intro .give p.body:last-child{margin-bottom:0}
.intro .give a{color:var(--raspberry);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.intro .lead{font-size:21px;margin-bottom:18px}.intro .give{padding:18px 20px}}
/* the beating heart (rl.js THE RADIO CURSOR, WITH A BEATING HEART): the element that stands in for the cursor over the hero */
.rlcur{position:fixed;left:0;top:0;width:39.5px;height:76px;z-index:2147483000;pointer-events:none;display:none;will-change:transform}
.rlcur.on{display:block}
.rlcur img{position:absolute;left:6px;top:6px;width:27.5px;height:64px;display:block}
.rlcur .heart{transform-origin:20% 7.2%}   /* the heart's centre on its layer, printed by build_radio_cursor.py */
@media (prefers-reduced-motion:no-preference){
  .rlcur .heart{animation:rlBeat 1.1s ease-in-out infinite}
  @keyframes rlBeat{0%,60%,100%{transform:scale(1)}14%{transform:scale(1.28)}28%{transform:scale(1)}42%{transform:scale(1.18)}}
}
.hero.rlcur-on,.hero.rlcur-on *{cursor:none!important}
/* the donation card's address button (rl.js introHtml, 29 Sep 2026): the page's outline pill, 4px under the paragraph */
.intro .give .gbtn{margin-top:6px;display:inline-flex;text-decoration:none;text-transform:none;letter-spacing:.01em;color:var(--btn,#000);border-color:var(--btn,#000)}   /* black, blue on hover like every button (Nuo, 3 Oct 2026); was plum */
@media (hover:hover){.intro .give .gbtn:hover{color:var(--btn-hover,#F36F23);border-color:var(--btn-hover,#F36F23)}}   /* plum like every pill on the page, not the card's raspberry link colour */
/* the lead, letter by letter (rl.js): back at the top of the left column on 29 Sep 2026 (Nuo: "move the large text back to only use
   the left half of the page, but keep the appear animation") - the column's size (.intro .lead above); only the entrance stays. */
.intro .lead .ll-w{white-space:nowrap}
.intro .lead.ll-arm .ll{opacity:0}
.intro .lead.ll-in .ll{animation:llIn .45s ease var(--d) both}
@keyframes llIn{from{opacity:0}to{opacity:1}}
/* TOP-ALIGNED WITH THE TEXT (Nuo, 29 Sep 2026: "top align this text with the image next to it"). The box photograph was a 4:5 pinned to
   the foot of the row, so since the lead left the column (above) and the column grew its card, it started well below the first
   paragraph. On a desktop it now FILLS the row - its top level with the text, its foot still level with the Chelsea photograph - and
   crops to cover. The phone stacks the two columns and keeps the 4:5. */
@media (min-width:861px){.intro .pic{position:relative}.intro .pic img{position:absolute;inset:0;height:100%;aspect-ratio:auto}}
/* absolute, not just height:100% (29 Sep 2026, same afternoon): a 4:5 image still set the row's height, so the text column stretched and
   left an empty band above the Chelsea photograph. Out of the flow, the row is the text column's height and the photograph fills it. */

/* == SANDSTONE 1 OCT 2026 == Prue, 30 Sep 2026: "use the same sandstone background as the other pages". Nuo, 1 Oct. Overrides the
   blush ground (line 2); the plum type and the raspberry accent stay. The radio cursor stays (Nuo's ruling, 29 Sep). */
body{background:var(--sand,#F2ECE9)}

/* == THE ROWS 4 OCT 2026 == (Nuo: "organise the radio lamington page into expandable sections, just like other pages"; rl.js has the
   ruling). A section inside a row drops its own side and top padding - the row (../expand.css .xp, margin 0 var(--pad)) already
   sets the gutter - and keeps a gap under it. Our Lamingtons closes on a shorter gap before the first row; Contact sits clear of the
   last row. The row rules and the summary type are expand.css's, as on About and Private Hire. */
.xp .xp-b>section{padding:8px 0 56px}
.boxes{padding-bottom:64px}
.press .plinks{right:0}
.xp+section.contact{margin-top:72px}
/* the six press logos, level (4 Oct 2026; rl.js PRESS_LOGOS has the ruling): one height, no tilt, each logo at its own --lh */
.clip{transform:none;aspect-ratio:2.1/1;padding:0;border-radius:16px;box-shadow:0 1px 0 rgba(58,16,32,.04)}
.clip:nth-child(odd),.clip:nth-child(even){--r:0deg}
.clip img{width:auto;height:var(--lh,34%);max-width:78%;object-fit:contain;border-radius:0}

/* CONCISE AND ELEGANT (Nuo, 6 Nov 2026, "Do all"): the page as a site page reads - see rl.js. */
.rl-intro{padding:88px var(--pad) 36px;max-width:1100px;margin:0 auto;text-align:center}
.rl-intro .lead{font-family:var(--head);font-weight:400;font-size:clamp(22px,2.4vw,34px);line-height:1.25;letter-spacing:.01em;margin:0 auto 22px}
.rl-intro p.body{margin:0 auto;max-width:none}
.rl-six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:20px var(--pad) 90px}
.rl-six .tile{margin:0;aspect-ratio:4/5;overflow:hidden;cursor:pointer;background:#e6ddd7}
.rl-six .tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
@media (hover:hover){.rl-six .tile:hover img{transform:scale(1.03)}}
.boxes .cater{margin:-6px 0 22px;max-width:none}
.products.swipe{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px) / 3);grid-template-columns:none;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.products.swipe::-webkit-scrollbar{display:none}
.products.swipe .product{scroll-snap-align:start}
@media (min-width:1101px){.products.swipe{grid-auto-columns:minmax(0,1fr)}}
.give{padding:0 var(--pad) 70px}
.give > h2{margin-bottom:22px}
.give .gblock{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.give .gblock img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px}
.give .num b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(40px,4vw,64px);letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums}
.give .num span{display:block;margin-top:10px;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.1em}
.give .gtxt p.body{margin:22px 0 24px;max-width:none}

.give details.xp{margin:40px 0 0}   /* .xp carries the page gutter itself; inside .give the gutter is already there */
.suplist{list-style:none;margin:0 0 20px;padding:0;columns:2;column-gap:48px}
.suplist li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:.5px solid rgba(58,16,32,.14);break-inside:avoid;font-size:15px}
.suplist li a{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--raspberry);white-space:nowrap}
.press{padding:70px var(--pad) 30px}
.press .clips{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:14px}
.press .clip{background:transparent;box-shadow:none;padding:6px;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
@media (hover:hover){.press .clip:hover{filter:none;opacity:1}}
.press .plinks{position:static;justify-content:center;gap:24px;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.press .plinks a{color:var(--raspberry);padding:6px 0}
.contact{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 28px;padding:30px var(--pad) 70px;text-align:center}
.contact .mail{font-family:var(--head);font-size:clamp(17px,1.4vw,20px);text-decoration:underline;text-underline-offset:5px;color:var(--plum)}
.contact .soc .dgsoc{gap:18px}
/* the mark says hello once: a little wiggle as the page opens (Nuo's "Do all", idea 7) */
.nav .logo.rl{animation:rlHello 1.1s cubic-bezier(.3,1.4,.5,1) .6s both;transform-origin:20% 90%}
@keyframes rlHello{0%{transform:rotate(0)}25%{transform:rotate(-6deg)}50%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@media (max-width:860px){
  .rl-intro{padding:56px var(--pad) 24px}
  .rl-six{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-bottom:60px}
  .products.swipe{grid-auto-columns:78%;gap:14px;margin-right:calc(-1 * var(--pad));padding-right:var(--pad)}
  .give .gblock{grid-template-columns:1fr;gap:24px}
  .suplist{columns:1}
  .press .clips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact{flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion:reduce){.nav .logo.rl{animation:none}}
/* the catering line centred under Our Lamingtons and its button (Nuo, 6 Nov 2026, 23:15: "Centre align all the text here") */
.boxes .cater{text-align:center;text-wrap:balance}
.boxes .hd{flex-direction:column;justify-content:center;align-items:center;gap:14px;text-align:center}   /* heading over its button, both centred, on every screen (23:15) */
/* Prue with the cookie tray (b554c77b): the crop moved left so her face is in full (Nuo, 7 Nov 2026: "Move this image bit to the left to show more of Prue's face") */
.rl-six .tile img[src*="b554c77b"]{object-position:0% 50%}

/* CENTRED AT EVERY WIDTH (Nuo, 7 Nov 2026): Instagram sits UNDER the email address on a desktop too, both on the page's axis
   ("move instagram below email address on desktop, centre align both"); the rows (The Deliveries, Our Story, Ingredients & Suppliers)
   centre their title with the sign after it at every width, not only from 1441px ("also centre these"). 36px = the sign and its gap. */
.contact{flex-direction:column;gap:12px}
.xp > summary.dgx{justify-content:center}
.xp > summary.dgx > h2{flex:none;text-align:center;padding-left:36px}

/* THE SUPPLIERS ARE SIX PHOTO CARDS, THREE A ROW (Nuo, 8 Nov 2026), the About page's link cards (.ab-more .mbox): photo filling a 4:5 tile,
   a dark veil, the name centred in the head face, caps, white; the veil deepens and the photo eases in on hover. Replaces 6 Nov's name list. */
.supgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px}
.supcard{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#E6DDD7;color:#FFFFFF;text-decoration:none}
.supcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.supcard::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32);transition:background .35s}
.supcard h3{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;margin:0;padding:0 10px;text-align:center;text-wrap:balance;font-family:var(--head);font-weight:400;font-size:clamp(13px,1.5vw,24px);line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF}
@media (hover:hover){a.supcard:hover::after{background:rgba(0,0,0,.55)}a.supcard:hover img{transform:scale(1.04)}}
@media (min-width:861px){.supcard{aspect-ratio:3/2}}   /* three across a desktop at 4:5 stood 540px tall: 3:2 there, as About's cards at 861-1439px */
@media (max-width:860px){.supgrid{gap:8px}.supcard h3{font-size:11px;padding:0 6px;letter-spacing:.04em}}