@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2")}@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/figtree-latin-400-normal.woff2") format("woff2")}@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/figtree-latin-500-normal.woff2") format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2")}   /* the typewriter face (6 Nov 2026 meeting), see the last block */
/* layout.css - LOADED LAST ON EVERY PROTOTYPE PAGE (19 Oct 2026). One place for rules that apply across the site and must win over
   each page's own stylesheet: it is linked as the last stylesheet in every page's <head> (and in build_green_pages.py's issue
   template). Prue's review of 19 Oct 2026; Nuo's answers in the interview that followed.

   1. THE PAGE TITLE SITS IN THE MIDDLE OF THE HERO PHOTOGRAPH, on every page that has one (Prue: "maybe these could sit in the
      middle ... for all the pages ... for all the hero image"). The .hline rules in page.css, index.html, about.css, menus.css,
      hire.css, art.css, christmas.css and rl.css all put it 64px up from the foot (56 on a phone, 104 on Art); this moves it to
      the vertical centre and leaves its size, letters and animation alone. The scroll cue stays at the foot. */
.hero .hline{top:50%;bottom:auto!important;transform:translateY(-50%)}

/* 2. FULL WIDTH ON A DESKTOP (Nuo, 20 Oct 2026: "use the full page width on desktop but keep the size of the current images and
      cards, just have more spacing inbetween"; asked, he chose every prototype page, and MORE CARDS A ROW on a wider screen).
   THIS REVERSES THE 1440px CONTENT COLUMN OF 19 OCT 2026 (Prue's review: "more empty space" on a desktop; Nuo's answer then was a
   1440px column with margins that grew with the screen - on his 3440px screen about 1,000px either side). The empty space now sits
   BETWEEN the cards instead of either side of them: the cards keep the size the 1440px column gave them (section 7).
   HOW: --pad is the one gutter every full-width section already pads with; it is now just the margin, --gut:
     --gut  40px up to 1280px wide, rising to 96px at 1680px (laptop screens barely move)
   Below about 1,614px nothing changes - the column only ever bound above that (1440px plus two gutters).
   THE TRAP (page.css, 13 Sep 2026): a container that is NOT full width but pads with var(--pad) - the Menus page's sliding sheet
   is min(1100px,100%) wide - keeps the fixed 40px it was drawn with, below. The harness asserts no element anywhere carries more
   padding than half its own width. */
@media (min-width:1101px){
  :root{--gut:clamp(40px, calc(40px + (100vw - 1280px) * .14), 96px);--pad:var(--gut)}
  .panel .sheet,dialog,.reader,.mmenu,.lb,.issue-page .reading,[role="dialog"]{--pad:40px}
  /* Shop's small print pads itself with --pad inside a 70ch measure: the measure grows by the padding so the words keep 70ch */
  .fine{max-width:calc(70ch + 2 * var(--pad))}
}

/* 3. RUNNING TEXT STOPS AT ABOUT 66 CHARACTERS A LINE (roughly 620px at body size). Display type (a 40px quote) is unaffected
      because the cap is in characters. A centred line stays centred. */
/* :where() - no specificity, so any measure a page already sets on its own text wins over this one */
:where(#app, main, .reading) :where(p, dd){max-width:66ch}
.one p.onel{margin-inline:auto;max-width:none}   /* a one-line intro holds its own line (data-oneline), so the 66ch measure would push it off-centre */
/* and where a page had set its own text to full width (max-width:none - each was right for a 1,360px line at most, not for a
   screen of any size), the same measure, said with enough weight to win: */
.xps .spot .copy p.body,.xps .sub.lead.ll,.allergens p.body,.lam p{max-width:66ch}

/* 4. MORE ROOM BETWEEN SECTIONS ON A DESKTOP: up to 48px more between top-level blocks, from nothing at 1280px to the full 48px
      at 1680px. A margin, so a coloured band keeps its own padding and the extra room is page ground; between two blocks the
      margins collapse into one gap. Not the hero, not the footer, not the stacked rows of a page (details.xp). */
@media (min-width:1281px){
  #app > :is(section, main, div.xps):not(.hero){margin-block:clamp(0px, calc((100vw - 1280px) * .12), 48px)}
}

/* 5. THE BIG TYPE STOPS GROWING AT 1440px, with the content column (Prue, on the Shop page: "make it smaller on desktop, just like
      the actual contents"). Three display sizes still scaled with the screen past the cap - measured 19 Oct 2026 at 1440 and
      3440: Shop's title 109 -> 128px, Green Pages' 66 -> 76px, About's FOLLOW US 101 -> 112px. Each is held at its 1440 size. */
@media (min-width:1441px){
  /* .shero h1 (Shop) left this list on 20 Oct 2026: shop.css now holds it to 88px on any desktop - the page's own rebuild */
  .gp-hero h1{font-size:66.24px}
  /* .follow .fhd h2.big left this list on 7 Nov 2026: about.css holds it at 28-40px (Nuo: smaller, centred) */
}

/* 6. SHARP EDGES ON EVERY IMAGE AND EVERY CARD (Nuo, 20 Oct 2026: "use sharp edges for all images and cards throughout the
      entire website"). Found by a browser sweep of all 41 prototype pages at 1440 and 390, the booking pop-up and the menus sheet
      open: 95 kinds of rounded image or card, from 4px to 27px. !important because several pages set the radius inline or on a
      hover state. STILL ROUND, deliberately - not images or cards: buttons and pills (Book, the app's skip link, the guest
      chips, the award-site pills), tags, the dots on What's On, the play buttons, the burger, form fields and the app-store
      badges' own artwork (the shape is in the file). A NEW PAGE'S CARD is caught by the first two lines if its class says
      "card" or it is an image; anything else needs adding here. */
:is(img, video, picture, canvas, iframe, figure),
[class*="card"], [class*="card"]::before, [class*="card"]::after,
.tile, .frame, .photo, .pic, .media, .player, .film, .packbox, .flipbook .gp-page, .gmap, .thumbs .th, .thumbs .panel, .tourw .panel,
.tm, .tm-paper, .xp-b .panel, .notes .note, .cpic, .mz, .strip .tl, .pin .chip, .cards h2.caps > span, h2.caps > span[aria-hidden],
.mosaic .tile, .clips .clip, .products .product, .tiles .ft, .give, .ask, .allergens, .lam, .pledge, .vt, .role, .box, .liav,
.feed .post, .lpost .media, .ftiles .ftile, .awt, .aons .aon, .rail .can, .bgrid .bag, .bxgrid .lbox, .hgrid .hitem, .shero .pic,
.st .dgl, dialog#book, dialog#dgbook,
.fx-menu, .fx-party, .fx-pack, .fx-board, .fx-calc, .fx-table, .fx-band{border-radius:0!important}   /* + the season's menu cards (christmas/festive.css), drawn on Events since 20 Oct */

/* 7. THE CARDS KEEP THEIR SIZE ON A WIDE SCREEN, A WIDER SCREEN TAKES MORE OF THEM, AND EVERYTHING IS CENTRED (Nuo, 20 Oct 2026,
      with section 2: "keep the size of the current images and cards, just have more spacing inbetween"; asked, "more cards per
      row"; then at 15:55 "centre align all the page content, NOT left aligned!" - asked, everything: blocks, headings, the lines
      under them; section 8 does the words).
   THE SIZE IS THE ONE THE 1440px COLUMN GAVE: a grid that was N columns with gap G across the column is now as many columns as fit
   of (min(100%, 1440px) - (N - 1) x G) / N, AUTO-FIT and SPREAD (space-between): every row runs gutter to gutter, the room left over
   shared between its cards - a short row (three cards where six would fit) spreads its three across the width. CENTRED
   (15:55) and spread are the same thing for a row that reaches both gutters; the 16:52 message ("use full page width on desktop
   with more spacing") ruled out the first cut, which centred rows at their old gap.
   min(100%, ...) is the grid's own width, so below the width where the column used to bind (about 1,614px) every grid is exactly
   what it was. --wc is the width a grid had in the column where that was not 1440px. A grid with a different SHAPE - two halves,
   a lead and its followers, the landing's sections - is handled by name below the list, centred too. Found by measuring every
   image and card on every page at 3440px with and without the column (20 Oct 2026); the harness re-measures them
   (audit_prototype_caps.js). */
@media (min-width:1441px){
  :is(.purpose .pgrid, #cases .cgrid, .space #vgrid, #food .fpics, .mosaic, .rail, .occs .ogrid, #venues #vgrid, .follow .ftiles,
      .artists .agrid, .arton .aons, .suppliers .grid, #charity .past, .awsplit.solo .awg, #boxes .products, #ingredients .sup, #press .clips,
      .near .cards, #counters .cgrid, .dcards, .specials .strip, .fx-menus, .fx-packs, .fx-boards){
    grid-template-columns:repeat(auto-fit, minmax(calc((min(100%, var(--wc, 1440px)) - (var(--wn) - 1) * var(--wg)) / var(--wn) - .05px), 1fr))!important;
    column-gap:var(--wg)!important;row-gap:var(--wg)!important;justify-content:center!important}
  /* a grid of six cards or fewer grows each card by a third at most and stands centred (a short row on a very wide screen would
     otherwise stretch three cards across 3,000px): its width is the cards at four thirds of their size and the gaps */
  :is(.purpose .pgrid, #cases .cgrid, #food .fpics, .occs .ogrid, .follow .ftiles, .arton .aons, .suppliers .grid, #charity .past,
      #boxes .products, #ingredients .sup, #press .clips, #counters .cgrid, .specials .strip, .fx-menus, .fx-packs, .fx-boards){--wt:calc((min(100%, var(--wc, 1440px)) - (var(--wn) - 1) * var(--wg)) / var(--wn))}
  :is(.purpose .pgrid, #cases .cgrid, #food .fpics, .occs .ogrid, .follow .ftiles, .arton .aons, .suppliers .grid, #charity .past,
      #boxes .products, #ingredients .sup, #press .clips, #counters .cgrid, .specials .strip, .fx-menus, .fx-packs, .fx-boards):not(:has(> :nth-child(7))){margin-inline:auto}
  :is(.purpose .pgrid, #cases .cgrid, #food .fpics, .occs .ogrid, .follow .ftiles, .arton .aons, .suppliers .grid, #charity .past, #boxes .products, #ingredients .sup, #press .clips, #counters .cgrid, .specials .strip, .fx-menus, .fx-packs, .fx-boards):not(:has(> :nth-child(2))){max-width:calc(var(--wt) * 4 / 3)}
  :is(.purpose .pgrid, #cases .cgrid, #food .fpics, .occs .ogrid, .follow .ftiles, .arton .aons, .suppliers .grid, #charity .past, #boxes .products, #ingredients .sup, #press .clips, #counters .cgrid, .specials .strip, .fx-menus, .fx-packs, .fx-boards):has(> :nth-child(2)):not(:has(> :nth-child(3))){max-width:calc(2 * var(--wt) * 4 / 3 + var(--wg))}
  :is(.purpose .pgrid, #cases .cgrid, #food .fpics, .occs .ogrid, .follow .ftiles, .arton .aons, .suppliers .grid, #charity .past, #boxes .products, #ingredients .sup, #press .clips, #counters .cgrid, .specials .strip, .fx-menus, .fx-packs, .fx-boards):has(> :nth-child(3)):not(:has(> :nth-child(4))){max-width:calc(3 * var(--wt) * 4 / 3 + 2 * var(--wg))}
  :is(.purpose .pgrid, #cases .cgrid, #food .fpics, .occs .ogrid, .follow .ftiles, .arton .aons, .suppliers .grid, #charity .past, #boxes .products, #ingredients .sup, #press .clips, #counters .cgrid, .specials .strip, .fx-menus, .fx-packs, .fx-boards):has(> :nth-child(4)):not(:has(> :nth-child(5))){max-width:calc(4 * var(--wt) * 4 / 3 + 3 * var(--wg))}
  :is(.purpose .pgrid, #cases .cgrid, #food .fpics, .occs .ogrid, .follow .ftiles, .arton .aons, .suppliers .grid, #charity .past, #boxes .products, #ingredients .sup, #press .clips, #counters .cgrid, .specials .strip, .fx-menus, .fx-packs, .fx-boards):has(> :nth-child(5)):not(:has(> :nth-child(6))){max-width:calc(5 * var(--wt) * 4 / 3 + 4 * var(--wg))}
  :is(.purpose .pgrid, #cases .cgrid, #food .fpics, .occs .ogrid, .follow .ftiles, .arton .aons, .suppliers .grid, #charity .past, #boxes .products, #ingredients .sup, #press .clips, #counters .cgrid, .specials .strip, .fx-menus, .fx-packs, .fx-boards):has(> :nth-child(6)):not(:has(> :nth-child(7))){max-width:calc(6 * var(--wt) * 4 / 3 + 5 * var(--wg))}
  .purpose .pgrid,#food .fpics,.follow .ftiles{--wn:3;--wg:16px}
  #cases .cgrid{--wn:3;--wg:32px}
  .space #vgrid{--wn:7;--wg:16px}
  #venues #vgrid{--wn:5;--wg:16px}
  .mosaic{--wn:6;--wg:10px}
  html.ph .mosaic{--wg:26px}
  .rail{--wn:4;--wg:clamp(16px, calc(16px + (100vw - 1440px) / 15), 48px)}
  .occs .ogrid{--wn:3;--wg:24px}
  .artists .agrid{--wn:8;--wg:var(--ag)}
  .arton .aons{--wn:2;--wg:24px}
  .suppliers .grid{--wn:3;--wg:28px}
  #charity .past,#boxes .products{--wn:3;--wg:22px}
  .awsplit.solo .awg{--wn:5;--wg:var(--pg)}
  #ingredients .sup{--wn:6;--wg:14px}
  #press .clips{--wn:6;--wg:16px}
  /* A SITE PAGE'S GALLERY STRIP: four photographs a row in the 1440px content column, centred. ONE COLUMN FOR EVERY MEDIA BLOCK ON
     A SITE PAGE (Nuo, 25 Oct 2026, 11:20, interviewed on Ziggy: "always make sure all the images and cards are perfectly aligned
     everywhere on every type of screen"; asked which width, he chose the 1440px cap): the strip, Day / After Dark (films.css),
     the films block (films.css) and the 3D tour (site-page.css .tourw) share the same left and right edges at every width.
     THIS REVERSES, ON THE SITE PAGES' GALLERY ONLY, the full-width strip of 20 Oct 2026 (more photographs a row on a wider
     screen): at 2,698px the strip ran 96-2,586px, six a row, while Day / After Dark ran 621-2,061px. Every photograph is still
     shown, four a row in more rows. Every other page's full width is untouched. */
  #gallery.gal .thumbs{grid-template-columns:repeat(auto-fit, minmax(calc((min(100%, 1440px) - 36px) / 4 - .05px), 1fr))!important;gap:12px;justify-content:center;max-width:1440px;margin-inline:auto}
  .near .cards .card{height:calc((min(100cqw, 1440px) - 5 * var(--ng)) / 6 * 1.25)}   /* the landing card's height, from the column, not the screen */
  .near .cards{--wn:3;--wg:var(--ng)}
  #counters .cgrid{--wn:2;--wg:32px}
  .dcards,.specials .strip{--wn:4;--wg:var(--cgap)}
  .fx-menus{--wn:2;--wg:22px}   /* the season's menus, packages and boards (christmas/festive.css): on Christmas and Events */
  .fx-packs{--wn:4;--wg:14px}
  .fx-boards{--wn:3;--wg:14px}
  /* the specials strip lines up with the season's cards below it (Nuo, 11 Sep 2026), so on a wide screen it is the same grid */
  .specials .strip{display:grid;overflow:visible;scroll-snap-type:none;margin:0;padding:6px 0 8px;align-items:start}
  .specials .sp{flex:none;min-width:0}

  /* THE SAME HEIGHTS (16:57: "make the cards grow bit wider but keep the same heights"): where a card's picture took its height
     from its width (an aspect ratio), it is held at the height the 1440px column gave it - measured 20 Oct 2026 at 1920px on the
     column copy - and the picture fills it (object-fit). Below 1,614px the cards are their old width, so nothing is held there. */
  @media (min-width:1614px){
    :is(.dcards, .specials .strip) > * .pic{aspect-ratio:auto!important;height:405px!important}
    .purpose .pgrid > *{aspect-ratio:auto!important;height:586.7px!important}
    #cases .cgrid > * > figure{aspect-ratio:auto!important;height:305.8px!important}
    .space #vgrid > *{aspect-ratio:auto!important;height:240px!important}
    #food .fpics > *{aspect-ratio:auto!important;height:352px!important}
    .rail > *{aspect-ratio:auto!important;height:222.8px!important}
    .occs .ogrid > * > figure{aspect-ratio:auto!important;height:309.3px!important}
    /* the occasion cards are whole photographs since 4 Nov 2026 (the figure fills the card): hold the CARD at its 1440 height and let
       the photograph fill it, or a wide screen shows a 309px photo over a black card (Nuo, 7 Nov 2026: "make them look consistent
       with laptop screens") */
    body.xmas .occs .ogrid > .occ{aspect-ratio:auto!important;height:535px!important}
    body.xmas .occs .ogrid > .occ > figure{height:auto!important}
    #venues #vgrid > *{aspect-ratio:auto!important;height:348.7px!important}
    .follow .ftiles .feed > a.post{aspect-ratio:auto!important;height:176.6px!important}
    .suppliers .grid > * > figure{aspect-ratio:auto!important;height:346px!important}
    #boxes .products > * img{aspect-ratio:auto!important;height:465.3px!important;object-fit:cover}
    #ingredients .sup > * img{aspect-ratio:auto!important;height:171.2px!important;object-fit:cover}
    #press .clips > *{aspect-ratio:auto!important;height:107.9px!important}
    #gallery.gal .thumbs > .th{aspect-ratio:auto!important;height:234px!important}
    #counters .cgrid .cpic img{aspect-ratio:auto!important;height:205.2px!important;object-fit:cover}
  }
  @media (min-width:1614px) and (max-width:1920px){.artists .agrid .pic{aspect-ratio:auto!important;height:200.8px!important}}   /* from 1921px art.css holds it at 235px itself */

  /* A COMPOSITION THAT IS NOT A ROW OF LIKE CARDS keeps the shape, the width and the gaps it had in the column, CENTRED (16:57:
     "equal space" - two halves spread to the gutters stood 1,800px apart at 3440px): two halves (a
     photograph and its words), and Find Us (Opening hours | the map | Find us: the map's height is the taller text's, so the text
     keeps its width too) */
  .who{grid-template-columns:calc((min(100%, 1440px) - 64px) / 2.1) calc((min(100%, 1440px) - 64px) * 1.1 / 2.1);justify-content:center}
  .perks.solo .grid,#dgmain .grid{grid-template-columns:repeat(2, calc((min(100%, 1440px) - 56px) / 2));justify-content:center}
  .xps .about.haspic{grid-template-columns:repeat(2, calc((min(100%, 1440px) - 40px) / 2));justify-content:center}
  .find{grid-template-columns:calc((min(100%, 1440px) - 48px) / 4) calc((min(100%, 1440px) - 48px) / 2) calc((min(100%, 1440px) - 48px) / 4);justify-content:center}
  /* Shop's lead bag and its four: the lead is 1.25 of a column and two rows tall, each column keeps its width, centred */
  .bgrid{grid-template-columns:calc((min(100%, 1440px) - 36px) / 3.25 * 1.25) repeat(2, calc((min(100%, 1440px) - 36px) / 3.25));justify-content:center}
  #charity .gg.one{grid-template-columns:min(100%, 1440px);justify-content:center}

  /* ONE BLOCK THE WIDTH OF THE OLD COLUMN keeps that width, centred - a card or a panel, never stretched: the dark video box
     (Careers), Radio Lamington's contact frame; Press's awards beside the LinkedIn post (the post is as tall as the awards, so more
     awards a row would shorten its photograph) with the heading row and the covers that share its line; a panel holding a menu, a
     form, a table or questions and answers (the party menu on Christmas and Events, the extras table, the booking and enquiry
     frames, the menu's allergens, the Events band, each FAQ); the text-in-two-columns blocks */
  :is(.social .box, .contact .frame, .awsplit:not(.solo), .awhd.split, .cvg, .cvg + .dgmore, .fx-party, #extras .fx, #book > .frame,
      .enq > .frame, .allergens > .box, .fx-band, .faq > dl.grid, .two, .work .grid){max-width:1440px;margin-inline:auto}
  /* the two document pages (the facts, the privacy policy - a label or contents column beside the text) read as the old 1440px
     column, centred; every band runs the full width */
  :is(main.facts, section.policy){padding-inline:max(var(--pad), calc((100% - 1440px) / 2))}
  /* the flipbooks (Sustainability's report, the Christmas pack) are sized from the column in flipbook.css and were already centred */

  /* THE LANDING (Nuo, 16:52: "use full page width on desktop with more spacing" - a 1440px section centred on his 1,850px screen
     read as the old column; then 16:57: "make the cards grow bit wider but keep the same heights on super wide screens / have equal
     space between cards on the same row as space between rows of cards"). Every section runs the FULL width, or half of it where
     two fit side by side (from about 3,150px), laid out exactly as in the 1440px section - the same rows, the same 16px between
     cards across and down - its cards wider by the same share, their HEIGHT the one the 1440px section gave them: the page's own
     height rules read the section's width (100cqi), so here they read min(100cqi, 1440px). The map view is untouched. */
  body:not(.mapon) .split > .cards{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;column-gap:calc(var(--g) * 5);row-gap:calc(var(--g) * 5)}
  body:not(.mapon) .split > .cards > .cat{flex:1 1 1440px;width:auto;min-width:0;margin-top:0}
  body:not(.mapon) .split > .cards > .cat > .card{height:calc((min(100cqi, 1440px) - 5 * 16px) / 6 * 1.25)!important}
  body:not(.mapon) .split > .cards > .cat[data-tier="compact"] > .card{height:calc((min(100cqi, 1440px) - 5 * 16px) / 6 * .78)!important}
}
/* Green Pages' rack is as many issues a row as fit at 140px (reader.css), so its size in the column depended on the screen; from
   1920px the column held seven at the 48px gap, and that is the size it keeps, centred. Below 1920px its own rule stands. */
@media (min-width:1920px){
  .rack{grid-template-columns:repeat(auto-fit, minmax(calc((min(100%, 1440px) - 6 * 48px) / 7 - .05px), 1fr))!important;gap:48px!important;justify-content:center!important}
  .rack .cov{aspect-ratio:auto!important;height:232.3px!important}
}

/* 8. THE WORDS ARE CENTRED TOO ON A WIDE SCREEN (Nuo, 20 Oct 2026, 15:55: "centre align all the page content, NOT left aligned!";
      asked, "centre everything": the section headings, the rows they sit in and the short lines under them). From 1441px, with
      section 7. A heading row that carried a link at its right (the landing's Show on a map, Awards' logos) stacks: the heading, then
      the link, centred. Inside a card, a photograph's caption or a composition (two halves, a form, a table, Press's awards) nothing
      moves: those are centred as blocks by section 7. Long running text (the facts page, a site page's paragraphs) is a centred
      column of left-aligned lines (the 1440px column, section 7) - centred lines of a paragraph read badly; the short lead lines
      are centred. The rows of an
      expander centre their title with the circled sign right after it (25 Oct 2026; was the + at the right). */
@media (min-width:1441px){
  :is(section, main, header, .xp-b, .blk) > :is(.hd, .shd, .top, .fhd, .xpo-h, .row:has(> #discoverH)):not(.awhd, :is(footer, #dgfoot, nav, .nav, dialog, [class*="card"], .ftile, .tile) *){flex-direction:column;align-items:center;justify-content:center;text-align:center;row-gap:14px}
  :is(.near > h2, .cards .cathd, .fhd > h2, .part > h2, .rv > h2, .rv > h1, #canh, #bagh, .gp-hero h1, .gp-hero > div, .shero .txt, section > h2.caps, .blk > h2, .numbers > h2):not(:is(footer, #dgfoot, nav, .nav, dialog) *){text-align:center}
  .cards .cathd.hdlogo{justify-content:center}
  :is(p.sub, p.lead, p.lede, p.fine, p.note, .hiretxt > p, .menuwrap > p.quiet):not(:is(footer, #dgfoot, nav, .nav, dialog, [class*="card"]) *){margin-inline:auto;text-align:center}
  .xps summary.dgx{justify-content:center}.xps summary.dgx > h2{flex:none;text-align:center;padding-left:36px}   /* the circled sign follows the title (Nuo, 25 Oct 2026); 36 = the sign (24px) and its gap, so the title sits on the page's middle */
}

/* 9. DISCOVER OUR COLLECTION, CENTRED AT EVERY WIDTH (Nuo, 3 Nov 2026: "Always centre align buttons like these", then "Centre at every width"):
      the heading, then Show on a map under it, both on the page's axis. The map's Near me / Show all wait in .tools at opacity 0 until
      the map opens; their width had pushed the button 165px right of the axis, so with the map off they take none. */
.row:has(> #discoverH){flex-direction:column;align-items:center;justify-content:center;text-align:center;row-gap:14px}
.row:has(> #discoverH) > h2{flex:none;max-width:100%;text-align:center}
.row:has(> #discoverH) .rt{justify-content:center}
body:not(.mapon) .row:has(> #discoverH) .rt{gap:0}
body:not(.mapon) .row:has(> #discoverH) .tools{width:0;overflow:hidden}

/* == MUTED PHOTOGRAPHS, FULL COLOUR ON HOVER 5 NOV 2026 == (Prue, website comments with Nuo: "muted in colours, so it doesn't feel so
   much bright colour coming out everywhere ... like when you print on matte rather than gloss"; Nuo, interviewed: muted everywhere, full
   colour on hover; a phone has no hover, so a phone stays muted). One rule for every page, here because layout.css loads last on every
   page. A PHOTOGRAPH is a raster that is not one of our files in /assets/ (logos, award marks, the flower) and not a PNG (cut-outs and
   marks are PNG); What's On's posters are artwork and keep their inks. The colour comes back when the photo, its link, card or figure
   is under the pointer. */
:root{--dg-matte:saturate(.78) contrast(.93) brightness(1.03)}
img:not([src*="/assets/"]):not([src$=".png"]):not([src*=".png?"]):not([src$=".svg"]):not([src*="/whatson/"]),video{filter:var(--dg-matte);transition:filter .45s ease}
@media (hover:hover){
  :is(a,figure,article,.card,.hero,.story,.tile):hover img,:is(a,figure,article,.card,.hero,.tile):hover video,img:hover{filter:none}
}
/* HEROES STAY MATTE (Nuo, 8 Nov 2026, of the Private events hero, "too vivid"; interviewed: "Heroes stay matte"): a hero fills the
   screen, so the hover above would give it full colour almost always; and an animation that names filter (Private events' flick-in)
   would replace the matte. !important beats both. Same exclusions as the rule above (logos, PNG marks, What's On posters). */
.hero img:not([src*="/assets/"]):not([src$=".png"]):not([src*=".png?"]):not([src$=".svg"]):not([src*="/whatson/"]),.hero video{filter:var(--dg-matte)!important}
@media print{img,video{filter:none!important}}


/* == 6 NOV 2026 WEBSITE MEETING (Prue, Tom, Georgia, Nuo; Nuo's answers that morning) ==
   TYPE: "I'd prefer like a typewriter font as opposed to the font we're using"; Nuo: use it now. IBM Plex Mono is the brand's menu
   face (Brand Guides 2026 V2) and is free to embed (SIL OFL), so it is served from Google Fonts like Inter and Figtree. It takes
   the HEAD role - headings, the bar, buttons, labels, the drawer. Running text stays Figtree (Solina's stand-in): a page of body copy
   set in a monospace reads slowly. When John's own face arrives it replaces this one line.
   COLOUR: "it looks very childish ... lots of bright colours"; "you want to not have too much going on". One accent: the brand's dark
   green on Sandstone, Dust Green on the film and dark grounds. The bar's per-section hues, the four-neon link cycle, the orange
   buttons and the per-card neon all collapse to it. Art keeps its own (art.css declares its neon on body, which wins). */
html:root{--head:"IBM Plex Mono","Courier New",monospace;--blue:#0F4A2C;--accent:#000;--btn-hover:#F36F23;--n1:#0F4A2C;--n2:#0F4A2C;--n3:#0F4A2C;--n4:#0F4A2C}
html body .nav:not(.solid),html body footer.dgf.dark,html body .specials,html body .follow{--n1:#C3E1CC;--n2:#C3E1CC;--n3:#C3E1CC;--n4:#C3E1CC}
html body.mopen .nav{--n1:#0F4A2C;--n2:#0F4A2C;--n3:#0F4A2C;--n4:#0F4A2C}
.nav ul a[data-bar]{--bar:#0F4A2C!important}
.nav:not(.solid) ul a[data-bar]{--bar:#C3E1CC!important}
.nav ul.dgsub a[data-bar]{--bar:#0F4A2C!important}
/* GREEN PAGES HOVERS LIKE ITS NEIGHBOURS (Nuo, 7 Nov 2026: "use same colour for green pages link when mouse hovers over it like other
   links"; reverses 23 Sep's Dust Green hover, which on the Sandstone bar read almost white): text and line take the bar's --bar, dark
   green on Sandstone, Dust Green over the film; the footer and the phone drawer follow their neighbours too */
html body .nav ul li a[href*="green-pages"]:hover,html body .nav ul li a[href*="green-pages"]:focus-visible{color:var(--bar,currentColor)!important}
html body .nav ul li a[href*="green-pages"]::after{background:var(--bar,currentColor)!important}
html body footer.dgf li a[href*="green-pages"]:hover,html body footer.dgf li a[href*="green-pages"]:focus-visible,html body .mmenu a[href*="green-pages"]:hover,html body .mmenu a[href*="green-pages"]:focus-visible{color:inherit!important}
html body footer.dgf li a[href*="green-pages"]::after{background:currentColor!important}
#cards .card,.card[data-neon]{--neon:#C3E1CC!important}
.nav ul{font-weight:400;letter-spacing:0}
/* site pages: six photographs under the hero, one row of six on a desktop (three a row to 1100px); the last-row fill is off for six */
@media (min-width:861px){html body #gallery.gal.six .thumbs{grid-template-columns:repeat(6,minmax(0,1fr))!important;max-width:none}html body #gallery.gal.six .thumbs > .th{grid-column:auto!important;aspect-ratio:3/4!important;height:auto!important}}
@media (min-width:861px) and (max-width:1100px){html body #gallery.gal.six .thumbs{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* EVERY PAGE ON SANDSTONE (Nuo, 6 Nov 2026, 10:41: "every page should be sandstone background!"): the bands that still had their own
   ground - About's story (white), Shop's subscription (black), gift (Dust Blue) and cans (a tint) - take Sandstone and ink. The Art page
   is turned in art/art.css. The cocktail deck (an overlay of colour cards) and the hidden /collection/ are left. */
html body .story{background:#F2ECE9!important;color:#000}
html body .subs,html body .gift,html body .cans{background:#F2ECE9!important;color:#000}
html body .subs .kick,html body .subs p{color:rgba(0,0,0,.72)}
html body .subs .pill.light{color:#000;border-color:#000}

/* == BUTTONS HOVER ORANGE (Nuo, 6 Nov 2026, 11:54: "book now button and all other similar buttons should show in orange font and border
   when mouse hovers over them"): Neon Orange words and border, the ground left as it is (no fill), for every outlined button on every page
   - Book now (the bar's, the film's, a site's hero), the pills (Show on a map, Plan your party, Apply now), the events chat's launcher.
   --btn-hover (above) is orange again for the rules that read it. */
@media (hover:hover){
  html body :is(a.book,button.book,.nav > a.book,span.bk[data-book],.hbook,.bknow,a.pill,button.pill,span.pill,.gbtn,.evc-btn,.mapcard .mcbk):hover,
  html body :is(a.book,button.book,.hbook,.bknow,a.pill,button.pill,.gbtn,.evc-btn):focus-visible{color:#F36F23!important;border-color:#F36F23!important;background:transparent!important}
  html body :is(.hbook,.bknow,a.pill,button.pill,.evc-btn):hover *{color:inherit!important}
  html body .evc-btn.evc-btn.evc-btn:hover{background:#F2ECE9!important}   /* the chat's launcher floats over the page: it keeps its Sandstone */
}
html body .evc-btn{font-family:var(--head)!important}
/* the Menu page's Allergies and Calories text runs the width of the rule above it (Nuo, 6 Nov 2026, 12:22: "use same width for this
   text here as the line above"); was a 66ch reading column */
html body .allergens .box p{max-width:none!important}
/* ONE BUTTON (Nuo, 6 Nov 2026, 13:07: "show all the buttons with sharp edges for the box, make all the buttons look consistent across
   all pages!"): every worded button takes Book now's box - square corners, 1px border, IBM Plex Mono 15px, 9px 18px. Round icon
   buttons (arrows, close, play) are not worded and keep their circles. The award cards' site links on /press/ stay compact
   (a row of up to six under each award) but lose their round ends too. */
html body :is(a.pill,button.pill,span.pill,.pill.big,.pill.light,.pill.fill,a.book,button.book,.hbook,.bknow,.gbtn,.evc-btn,.mapcard .mcbk,.chapters a){border-radius:0!important;border-width:1px!important;border-style:solid!important;font-family:var(--head)!important;font-size:15px!important;letter-spacing:0!important;padding:9px 18px!important;line-height:1.3!important;min-height:0!important}
html body .bknow{height:auto!important}
html body a.awpill{border-radius:0!important;font-family:var(--head)!important}
/* the Radio Lamington mark in the bar names itself AT ONCE on hover (Nuo, 6 Nov 2026, 13:08), not after the browser's title delay */
.nav ul li.dgicon a{position:relative}
html body .nav ul li.dgicon a::before{content:attr(aria-label);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#fff;color:#111;border:1px solid #111;font-family:var(--head);font-size:12px;line-height:1;letter-spacing:.02em;text-transform:none;padding:6px 8px;white-space:nowrap;pointer-events:none;visibility:hidden;z-index:50;transition:none}
html body .nav ul li.dgicon a:hover::before,html body .nav ul li.dgicon a:focus-visible::before{visibility:visible}
@media (hover:none){html body .nav ul li.dgicon a::before{display:none}}
/* ONE CLOSE BUTTON (Nuo, 6 Nov 2026, 20:01: "Make all the close buttons consistent / No box outline / Make the X more visible in black
   font, orange font when mouse hovers over it on desktop"): every X that closes something - no box, ring, fill or focus outline, a large
   black X, orange on hover (desktop). No focus colour: a dialog puts its focus on the X as it opens, which turned it orange at once. On a dark ground (lightboxes, films, the art and menu dialogs, a photo) the X
   is white instead (text on a dark ground is white, 2 Oct 2026). Worded Close buttons (the tour's, the PDF viewer's) are buttons, not Xs. */
html body button[aria-label^="Close"]:not(.tourclose):not(.pill):not(.hv-btn){--cx:#000;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;outline:none!important;color:var(--cx)!important;font-family:Arial,Helvetica,sans-serif!important;font-weight:400!important;font-size:32px!important;line-height:1!important;min-width:44px;min-height:44px;padding:0 6px!important;display:inline-grid;place-items:center;cursor:pointer;text-shadow:none!important;transition:color .15s;-webkit-tap-highlight-color:transparent}
/* ALWAYS BLACK ON SANDSTONE (Nuo, 6 Nov 2026, 22:36: "Always show close button in black on light sandstone background"): every X sits on
   a Sandstone disc, no outline, so it reads on a photograph, a dark dialog or the page alike; replaces the white X on dark grounds and the
   dish card's halo of earlier the same evening */
html body button[aria-label^="Close"]:not(.tourclose):not(.pill):not(.hv-btn){--cx:#000!important;background:#F2ECE9!important;border-radius:50%!important;width:44px;height:44px;min-width:44px;min-height:44px;padding:0!important;font-size:28px!important;box-shadow:0 1px 6px rgba(0,0,0,.12)!important;text-shadow:none!important}
@media (hover:hover) and (pointer:fine){html body button[aria-label^="Close"]:not(.tourclose):not(.pill):not(.hv-btn):hover{color:var(--orange,#F36F23)!important}}
/* THE MENUS ARE ROUNDED (Nuo, 6 Nov 2026, 22:12: "Use rounded edges for all menus"): the typed menu card (orange frame and paper) and the
   dish card that opens from it take their round corners back, on the Menus page and every site page. An exception to section 6's sharp
   edges (20 Oct 2026) for these two only; photographs and other cards stay sharp. */
html body .tm{border-radius:calc(var(--tm-frame,24px) * .45)!important}
html body .tm-paper{border-radius:calc(var(--tm-frame,24px) * .75)!important}
html body dialog.tm-dlg{border-radius:14px!important}
html body dialog.tm-dlg .tm-dbody{border-radius:14px!important;overflow:hidden}

/* THE TYPEWRITER (Nuo, 6 Nov 2026, 22:32; footer.js re-times the letters and adds .tw): each letter is struck on at once with a tiny jolt
   and a slight tilt, a white block cursor rides on the letter just typed and blinks at the end, then fades. Wider tracking and a soft
   dark shadow under the words so they read on any photograph - a shadow, not a glow (Prue, 12 Oct 2026). */
html body .hero .hline{letter-spacing:.12em;text-shadow:0 1px 3px rgba(0,0,0,.35),0 0 18px rgba(0,0,0,.18)}
html body .hero .hline.tw .tg-l{position:relative;display:inline-block;opacity:0;animation:twStrike .16s cubic-bezier(.2,1.6,.4,1) var(--d) forwards}
html body .hero .hline.tw .tg-l::after{content:"";position:absolute;left:calc(100% + .08em);top:.12em;bottom:.08em;width:.55em;background:#FFFFFF;opacity:0;box-shadow:0 1px 3px rgba(0,0,0,.3);animation:twCur 1ms linear var(--d) forwards;animation-duration:var(--hold,1ms)}
html body .hero .hline.tw .tg-l.tw-end::after{animation:twBlink 1s linear var(--d) 4 forwards,twGone .4s ease calc(var(--d) + 4s) forwards}
@keyframes twStrike{0%{opacity:0;transform:translateY(-.18em) scale(1.25) rotate(var(--j,0deg));filter:blur(.6px)}55%{opacity:1;transform:translateY(calc(var(--y,0px) + .04em)) scale(.96) rotate(var(--j,0deg))}100%{opacity:1;transform:translateY(var(--y,0px)) rotate(var(--j,0deg));filter:none}}
@keyframes twCur{0%,96%{opacity:1}100%{opacity:0}}
@keyframes twBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes twGone{to{opacity:0}}
@media (max-width:860px){html body .hero .hline{letter-spacing:.08em}}
/* == NO WORD ALONE ON A LINE (Nuo, 6 Nov 2026, 22:56: "Never have just one word on a separate line") == every running text avoids a
   last line of one word (text-wrap:pretty, Chrome and Safari 26). :where() has no specificity, so any page's own wrap rule still wins. */
:where(p,li,dd,figcaption,blockquote){text-wrap:pretty}
:where(h1,h2,h3,h4,.name){text-wrap:balance}   /* headings and card names share their words out evenly, so none ends on one word (23:15: "A LAMINGTON FOR A / LAMINGTON", "Icons / Box") */

/* == TYPED ON INK (Nuo, 7 Nov 2026, 00:04, Green Pages; the What's On kicker's look of 6 Nov, 23:07) == a heading typed letter by letter on a light
   ground: h1.twink holds .twd words of .twl letters with --d (when), --h (how long the cursor stays) and --j (a tilt); the heroes' keyframes */
@media (prefers-reduced-motion:no-preference){
  html body .twink .twd{white-space:nowrap}
  html body .twink .twl{position:relative;display:inline-block;opacity:0;animation:twStrike .16s cubic-bezier(.2,1.6,.4,1) var(--d) forwards}
  html body .twink .twl::after{content:"";position:absolute;left:calc(100% + .06em);top:.1em;bottom:.04em;width:.55em;background:currentColor;opacity:0;animation:twCur var(--h,90ms) linear var(--d) forwards}
  html body .twink .twl.twe::after{animation:twBlink 1s linear var(--d) 4 forwards,twGone .4s ease calc(var(--d) + 4s) forwards}
}

/* A TYPED LETTER (Nuo, 7 Nov 2026: "do 6" - Contact, the chat's thank-you and the website's 404 written as a typed letter on paper,
   signed Daisy Green; Tom and Prue "love the retro look such as the typewriter font"). One sheet of paper on the Sandstone: the head
   face (IBM Plex Mono) at reading size, the date top right, a salutation, the body, and the signature as the logo ARTWORK (the logo is
   never type). The sheet is the container; its paragraphs run its full width. */
.dg-letter{background:#FBF8F3;color:#1d1b19;max-width:820px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(22px,5vw,72px) clamp(32px,5vw,56px);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 32px -18px rgba(0,0,0,.28);font-family:var(--head,"IBM Plex Mono",monospace);font-size:clamp(15px,1.15vw,17px);
  line-height:1.75;text-align:left;position:relative}
.dg-letter p{margin:0 0 1.1em;font:inherit;color:inherit;max-width:none;text-shadow:0 0 .35px rgba(0,0,0,.55)}   /* a touch of ink spread */
.dg-letter .date{text-align:right;margin-bottom:2.2em}
.dg-letter .sal{margin-bottom:1.4em}
.dg-letter a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.dg-letter a:hover{color:#F36F23}
.dg-letter .sig{margin-top:2.2em}
.dg-letter .sig img{display:block;height:26px;width:auto;margin-top:.9em}
.dg-letter .acts{display:flex;flex-wrap:wrap;gap:10px;margin:.4em 0 1.4em}
.dg-letter .nb{white-space:nowrap}

.dg-letter a.pill,.dg-letter a.dgp{text-decoration:none}

/* 10. EXPANDER TITLES CENTRED AT EVERY WIDTH (Nuo, 7 Nov 2026, of THE EVENTS PACK / GOOD TO KNOW: "centre align these, do this for all similar
      expandable sections"): section 8's centred pair (the title, the circled sign right after it) for every details.xp row, not only from 1441px
      inside .xps. The 36px on the title's left balances the sign (24px) and its gap, so the words sit on the row's middle; on a phone a long
      title may wrap (flex 0 1 auto), its lines centred. */
details.xp>summary.dgx{justify-content:center}
details.xp>summary.dgx>:is(h2,h3){flex:0 1 auto;min-width:0;text-align:center;padding-left:36px}

/* 11. NO BLACK GROUND ANYWHERE (Nuo, 7 Nov 2026, 18:53: "I don't want to see any black background anywhere on the website!"). Found by
      rendering every page (1440 and 390, rows opened) and listing every visible box whose ground is near black (luminance under 12%),
      then the dialogs and hover states by their CSS. The ground behind a photograph or film while it loads, under a hero, behind a
      letterboxed film, a tour, a card or a thumbnail is the dark sandstone (#E6DDD7, Press Enquiries' band); a black button fill or hover
      becomes the One Button's outline with orange on hover; dialog backdrops are Sandstone, the dialogs themselves light. */
html body :is(.hero, .hero .slides, figure.flm, .film, .player, .facade, .gal .th, .thumbs .th, button.th, .panel.tourp, .tourp .frame, #tour.frame,
  .lipic, .spot .frame, .spot .licard .player, .purpose .pbox, .pgrid .pbox, .occ, .occ figure, .mag .cov, .gcard, .scard, .card, .tcard, .vcard,
  .hp-top, .acard .pic, .museum .frame img, .poster26 .pfig, .gal-strip button, .dgpeek, .dgpeek img, .ab-more a.mbox, .pg.cover, .tour.wall,
  .follow .post.nomedia, .specials .sp .pic, .grow:not(.mmenu), .reader, .cx-m figure){background-color:#E6DDD7!important}
html body .dgskip{background:#F2ECE9!important;color:#000!important;border:1px solid #000}
html body .mapfab{background:#F2ECE9!important;color:#000!important;border:1px solid #000!important;box-shadow:0 6px 18px rgba(0,0,0,.12)!important}
html body .mapfab *{color:inherit}
html body .mmenu.in .mmplus[aria-expanded="true"]{background:transparent!important;color:#000!important}
html body :is(.evc-btn, .evc .chips button, .evc .pick button, .evc .sum .acts .go):hover{background:transparent!important;color:#F36F23!important;border-color:#F36F23!important}
html body .evc .sum .acts .go{background:transparent!important;color:#000!important;border-color:#000!important}
html body :is(dialog, .dlg, dialog.lb, dialog.gal, dialog.artist, dialog.fxd, dialog.flm-dlg, .tm-dlg, .evm, dialog.eyd)::backdrop{background:rgba(242,236,233,.94)!important}
html body :is(.lb, dialog.lb, dialog.gal, .drawer, .guide, .miniplan){background-color:rgba(242,236,233,.97)!important}
html body :is(dialog#post, dialog#post .frame, dialog#post .frame iframe, dialog.flm-dlg video, .eyd .eyp){background-color:#E6DDD7!important}
/* ... and the words and controls inside those light dialogs are ink (they were white or Sandstone for the black ground) */
html body dialog.flm-dlg figcaption,html body dialog.flm-dlg .x{color:#000!important}
html body dialog#post{color:#000!important}
html body dialog#post .hd{border-bottom-color:rgba(0,0,0,.14)!important}
html body dialog#post .pill.light{border-color:#000!important;color:#000!important}
html body dialog#post .x{color:#000!important}
/* ... and no control turns black on hover: outlined, orange words and border, like every button (ONE BUTTON) */
html body :is(.tcard .expand, .fields .num button, .deck-side .arrow, .reader .arrow, .railnav button):hover{background:transparent!important;color:#F36F23!important;border-color:#F36F23!important}
/* 12. FULL AUDIT, 7 Nov 2026 (Nuo: "Make sure every page displays perfectly on every screen size"). Found by a crawl of every page at
   320-2560px and contact sheets; each fix names what it fixed. */
/* a long bar button ("Plan your party", Christmas's) touched the wordmark at 320-360px: tighter padding on a phone, a size down under 375 */
@media (max-width:420px){html body .nav :is(a,button).book.book.book{padding-left:12px!important;padding-right:12px!important}}
@media (max-width:374px){html body .nav :is(a,button).book.book.book{font-size:12px!important;padding-left:8px!important;padding-right:8px!important}}
/* /press/'s awards grid ran 33px past a 320px screen: its two columns are as wide as a site pill ("Daisy Green at Holland Park", which
   never wraps); under 390px (where two would pass the gutter) the cards go one to a row */
@media (max-width:389px){html body :is(.awg,.awsplit.solo .awg){grid-template-columns:minmax(0,1fr)!important}html body .awsplit{grid-template-columns:minmax(0,1fr)!important}}
/* the Green Pages reader's bar ran 25px past a 320px screen (issues 7 and 9: "Green Pages · Issue 9", the count and the close) */
@media (max-width:374px){html body .reader .bar{gap:8px!important}html body .reader .bar .ttl{min-width:0;flex:1 1 auto}html body .reader .bar .ttl b{font-size:12px!important;white-space:normal!important;line-height:1.25}html body .reader .bar .acts{gap:6px!important;flex:0 0 auto}}
/* ... and on a 320px phone issues 7 and 9 widened the whole screen to 329-345px while the book was built: the stage clips, the book never exceeds it */
html body .reader .stage{overflow:hidden}html body .reader .flipbook{max-width:100%!important}
/* tap targets under the 24px floor (layout floors: phone tap target 24px), found on tablets and phones */
html body .nav li.dgicon > a{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
html body .nav a.rlhome{min-width:24px}
html body :is(.produce-line > a.dgl, ul.suplist li > a.dgl, .ftile > a.h){display:inline-flex;align-items:center;min-height:24px}
html body footer.dgf .bottom a.bcorp{min-width:24px;display:inline-flex;justify-content:center}
/* the footer's "DAISY GREEN COLLECTION" broke mid-word ("COLLECTI / ON") on Shop, Produce and Careers at 360px: those pages let any
   paragraph break anywhere; the footer breaks between words only */
html body footer.dgf :is(p,li,a){overflow-wrap:normal!important;word-break:normal!important}

/* == GOOD TO KNOW, ONE DESIGN (Nuo, 8 Nov 2026, interviewed: numbered, tap to open; thin rules between questions; grey numbers, orange
   when open; two columns on a desktop; the section heading stays a collapsed expander) == drawn by sites.js DG_QA */
.qa-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;align-items:start}
.qa{list-style:none;margin:0;padding:0}
.qa>li{border-bottom:1px solid rgba(0,0,0,.14);margin:0;padding:0}
.qa>li:first-child{border-top:1px solid rgba(0,0,0,.14)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:14px;align-items:baseline;padding:18px 0;-webkit-tap-highlight-color:transparent}
.qa summary::-webkit-details-marker{display:none}
.qa .qn{font-family:var(--head);font-size:13px;letter-spacing:.04em;color:#6B645E;transition:color .25s}
.qa .qq{font-family:var(--head);font-size:17px;line-height:1.35;letter-spacing:-0.01em;color:#000;text-wrap:pretty;transition:color .25s}
.qa summary i{position:relative;align-self:center;width:24px;height:24px;display:block;color:#000;transition:color .25s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa details[open]>summary i::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
.qa details[open]>summary :is(.qq,i){color:#F36F23}   /* no numbers since 8 Nov 2026 (07:35): the open question turns orange */
@media (hover:hover){.qa summary:hover :is(.qq,i){color:#F36F23}}
.qa summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.qa .qa-a{padding:0 38px 22px 0;font-size:17px;line-height:1.55;color:#2b2926}
.qa .qa-a a{text-decoration:underline}
@media (max-width:860px){
  .qa-cols{grid-template-columns:minmax(0,1fr)}
  .qa-cols>.qa+.qa>li:first-child{border-top:0}
  .qa .qq,.qa .qa-a{font-size:16px}
  .qa summary{padding:16px 0}
  .qa .qa-a{padding-right:0}
}