/* The flip-book's styles, for the CHRISTMAS pack (15 Sep 2026).

   HONEST STATE, AND IT IS NOT THE ONE I SET OUT TO LEAVE. flipbook.js is shared by three pages - the events
   pack on /private-hire/, the ESG report on /sustainability/ (/esg/ until 15 Oct 2026) and now the Christmas pack - and its CSS is not: page.css
   and private-hire/hire.css each carry their own copy. I tried to extract them into this one file and stopped,
   because the two copies HAVE DRIFTED and reconciling them is a real change to two live pages:

     hire.css has none of the three .portrait rules, so a portrait PDF would size itself as landscape there
     hire.css's `.packbox .bar .pill` has lost `border-color:#fff;color:#fff` - the rule that makes Expand and
       PDF legible against the box's near-black ground
     the RESPONSIVE halves differ too: page.css gives the box 70dvh on a phone, hire.css 60dvh capped at 600px
       and moves the arrows to the bottom edge

   Neither has a visible symptom on the pages as they stand, so this is a latent fault, not a live one, and it
   is the wrong thing to fix in the same breath as adding a page. So: page.css and hire.css are untouched, this
   file is page.css's copy plus its responsive rules, and only /christmas/ loads it. Consolidating the three is
   a contained follow-up - one file, three pages, verified in a browser at two widths - and it is worth doing
   before a fourth page uses flipbook.js. */

/* a PDF as a flip-book (as the events pack) */
.packbox{--bh:min(66vh,700px,calc((min(100vw - var(--pad) * 2, 1440px) - 144px) / 1.4134));position:relative;background:#141414;border-radius:20px;padding:56px 72px 28px;min-height:0;width:min(100%,calc(var(--bh) * 1.4134 + 144px));margin:0 auto}
.packbox.portrait{--bh:min(80vh,900px,calc((min(100vw - var(--pad) * 2, 1440px) - 144px) / 0.7071));width:min(100%,calc(var(--bh) * 0.7071 + 144px))}
.packbox .flipbook{height:var(--bh);width:100%;margin:0 auto}
.packbox .arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(0,0,0,.3);color:#fff;font-size:20px;display:grid;place-items:center;z-index:5}
.packbox .arrow.prev{left:14px}.packbox .arrow.next{right:14px}
.packbox .bar{position:absolute;left:24px;right:24px;top:12px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;z-index:5}
.packbox .bar .acts{display:flex;gap:8px}
.packbox .bar .pill{padding:8px 14px;font-size:11px;border-color:#fff;color:#fff}
@media (hover:hover){.packbox .bar .pill:hover{background:#fff;color:var(--ink)}}
.packbox.full{--bh:min(calc(100vh - 80px),calc((100vw - 144px) / 1.4134));position:fixed;inset:0;z-index:200;border-radius:0;padding:56px 72px 24px;min-height:0;width:auto}
.packbox.full.portrait{--bh:min(calc(100vh - 80px),calc((100vw - 144px) / 0.7071))}
.packbox.full .flipbook{width:calc(var(--bh) * 1.4134)}
.packbox.full.portrait .flipbook{width:calc(var(--bh) * 0.7071)}
@media (min-width:1700px){
  .packbox.portrait{--bh:min(80vh,900px,calc((min(100vw - var(--pad) * 2, 1440px) - 144px) / 1.4142));width:min(100%,calc(var(--bh) * 1.4142 + 144px))}
  .packbox.full.portrait{--bh:min(calc(100vh - 80px),calc((100vw - 144px) / 1.4142))}
  .packbox.full.portrait .flipbook{width:calc(var(--bh) * 1.4142)}
}
.packbox .empty{color:rgba(255,255,255,.75);text-align:center;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em;padding:80px 0}
.packbox .empty a{color:#fff;text-decoration:underline}
.gp-page{background:#fff;overflow:hidden;position:relative;container-type:size}
.gp-page img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;pointer-events:none}
.gp-page .tl{position:absolute;inset:0}
.gp-page .tl span{position:absolute;color:transparent;white-space:pre;line-height:1;font-family:Arial,sans-serif;font-size:calc(var(--s) * 100cqh);left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);cursor:text}
.gp-page .tl span::selection{background:rgba(24,71,232,.35)}

/* the responsive half, from page.css. A phone has no room for 72px of side padding or a centred arrow. */
@media (max-width:860px){
  .packbox,.packbox.portrait{padding:52px 16px 20px;width:100%;--bh:auto}
  .packbox .flipbook{height:70dvh}
  .packbox .arrow{top:auto;bottom:10px;transform:none;width:40px;height:40px}
  .packbox.full,.packbox.full.portrait{padding:52px 12px 16px;--bh:auto;width:auto}
  .packbox.full .flipbook,.packbox.full.portrait .flipbook{width:100%;height:calc(100dvh - 68px)}
}
.flipbook.scroll .gp-page{width:100%;flex:0 0 auto;border-radius:6px}
/* THE SCROLL FALLBACK SCROLLS INSIDE ITS BOX (17 Sep 2026). On a phone hire.js draws the pack as .flipbook.scroll - the
   24 pages stacked - and nothing gave that stack an overflow, so it ran the page to 6,562px on a 390px screen (measured):
   the whole pack, page after page, on the device Prue said matters most. The box keeps the 70dvh the rule above gives it
   and the pages scroll within it; the arrows already call scrollBy on the book. */
.flipbook.scroll{overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch;scroll-snap-type:y proximity}
.flipbook.scroll .gp-page{scroll-snap-align:start}
/* TWO PAGES SIDE BY SIDE, FULL WIDTH (17 Sep 2026; hire.js packFlipStart says why). The box takes the whole measure and its
   height is half the book's width over the page's own aspect - two landscapes as one open pair. The side padding (72px a
   side, for the arrows) is what the 144 is. Under 861px the phone rules above still apply and the pack scrolls. */
.packbox.spread{--bh:calc((min(100vw - var(--pad) * 2, 1440px) - 144px) / 2 / 1.4134);width:min(100%, 1440px)}   /* a book no wider than the 1440px column it was drawn in (Nuo, 20 Oct 2026: full width, the cards at their size - layout.css section 7) */
.packbox.spread .flipbook{height:var(--bh);width:100%}
.packbox.spread.full{--bh:min(calc(100vh - 80px),calc((100vw - 144px) / 2 / 1.4134));width:auto}
.packbox.spread.full .flipbook{width:calc(var(--bh) * 2 * 1.4134);max-width:100%}
/* EXPAND INSIDE A ROW (Nuo, 27 Sep 2026: "expand view is broken!"). A flip-book in a closed-by-default row (.xp, expand.css) sits
   in .xp-b, whose opening animation leaves a transform on it; any transform makes the element the containing block for
   position:fixed, so .packbox.full stopped filling the screen and sat 80px tall inside the row with the book spilling below it.
   While a book is full screen, its row lets go of the transform (and anything clipping it). */
.xp-b:has(.packbox.full){transform:none!important;animation:none!important;overflow:visible!important;contain:none!important;filter:none!important}
.xp:has(.packbox.full){overflow:visible!important;contain:none!important;transform:none!important}
.packbox.full{display:flex;flex-direction:column;justify-content:center}   /* full screen: the open book sits in the middle of the screen, not at its top (27 Sep 2026) */
/* == TWO WHOLE PAGES ON A PHONE 13 OCT 2026 == (Nuo: "the card displaying the PDF is too small! should be big enough so that 2 pages
   of the PDF are visible on mobile! use the same size for other PDF cards such as the report on the ESG page"; interviewed: two pages
   stacked at full width, scrolling inside the box; iPhone Safari; the events pack, the festive pack and the ESG report; a thinner frame).
   The book's height is now measured off its own width - two pages at the page's aspect plus the 10px gap between them - instead of
   70dvh, which on an iPhone with Safari's toolbars showed under two. The frame drops to 8px a side and the arrows move up into the
   bar, so nothing covers the pages. Supersedes the 70dvh / 16px phone rules above for these three boxes. Full screen is unchanged. */
@media (max-width:860px){
  .packbox:not(.full){container-type:inline-size;padding:46px 8px 8px}
  .packbox:not(.full) .flipbook{height:calc(100cqw / 1.4134 * 2 + 10px)}               /* two landscape pages (all three packs are 1600x1132) */
  .packbox.portrait:not(.full) .flipbook{height:calc(100cqw / 0.7071 * 2 + 10px)}
  .packbox .bar{left:12px;right:12px;top:8px}
  .packbox .arrow{top:6px;bottom:auto;transform:none;width:32px;height:32px;font-size:16px}
  .packbox .arrow.prev{left:calc(50% - 38px)}.packbox .arrow.next{right:auto;left:calc(50% + 6px)}
  .flipbook.scroll .gp-page{border-radius:4px}
}
/* EXPAND ON A PHONE (Nuo, 13 Oct 2026, with an iPhone screenshot: Expand showed one page as a thin strip in the middle of a black
   screen). On a phone the book is the scrolling stack of pages, but the spread's desktop rules - `.packbox.spread .flipbook{height:
   var(--bh)}` and `.packbox.spread.full .flipbook{width:calc(var(--bh) * 2 * 1.4134)}`, where --bh came out at about 87px on a 390px
   screen - sat later in this file than the 52-53 phone rules and beat them. Full screen on a phone is now the whole screen under the
   bar, pages at full width, scrolling. Desktop is untouched: this is inside the phone query. */
@media (max-width:860px){
  .packbox.full,.packbox.spread.full,.packbox.full.portrait{padding:52px 8px 8px;width:auto;justify-content:flex-start}
  .packbox.full .flipbook,.packbox.spread.full .flipbook,.packbox.full.portrait .flipbook{width:100%;max-width:100%;height:calc(100dvh - 60px)}
}
/* == NO BLACK, FULL WIDTH 7 NOV 2026 == (Nuo, 18:53: "for all pdfs displayed within the page, use dark sandstone background instead of black /
   I don't want to see any black background anywhere on the website!"; 18:57: "for superwide screens, use the full width to display all the PDFs
   like this with 2 pages shown side by side, keep this aspect ratio"). Every PDF box - the events pack, the Christmas brochure, the ESG report -
   sits on the dark sandstone (#E6DDD7, Press Enquiries' band) with ink type, ink arrows and an ink Expand; full screen too. The open pair is no
   longer held to the 1440px column: it runs gutter to gutter at its own aspect (two pages of 1.4134), only capped so it never outgrows the screen. */
.packbox,.packbox.full{background:#E6DDD7;color:#000}
.packbox .bar{color:#000}
.packbox .bar .pill,.packbox .bar .pill.light{border-color:#000!important;color:#000!important;background:transparent!important}
@media (hover:hover){.packbox .bar .pill:hover,.packbox .bar .pill.light:hover{color:#F36F23!important;border-color:#F36F23!important;background:transparent!important}}
.packbox .arrow{border-color:rgba(0,0,0,.55);background:rgba(242,236,233,.7);color:#000}
@media (hover:hover){.packbox .arrow:hover{border-color:#F36F23;color:#F36F23}}
.packbox .empty{color:#3f3c39}.packbox .empty a{color:#000}
@media (min-width:861px){
  .packbox.spread{--bh:min(calc((100vw - var(--pad) * 2 - 144px) / 2 / 1.4134),calc(100vh - 160px));width:100%;max-width:none}
  .packbox.spread .flipbook{width:calc(var(--bh) * 2 * 1.4134);max-width:100%}
}
/* == THE BAR, ONE CENTRE LINE, AND AIR UNDER IT (Nuo, 8 Nov 2026, 02:34: "Middle align 10 pages and expand button here / Have a little space
   between the expand button and the pdf page below / Do this for all PDFs displayed within pages") == The bar is a fixed 44px row; the page
   count, Expand and (on a phone, where they sit in the bar) the two arrows share its centre line; the book starts 14px under it. Every PDF
   box: the events pack, the Christmas brochure, the ESG report, in the page and full screen. */
.packbox .bar{height:44px;top:12px}
.packbox:not(.full){padding-top:70px}
.packbox.full{padding-top:70px}
.packbox.full{--bh:min(calc(100vh - 94px),calc((100vw - 144px) / 1.4134))}
@media (max-width:860px){
  .packbox .bar{top:8px}
  .packbox:not(.full){padding-top:66px}
  .packbox .arrow{top:30px!important;transform:translateY(-50%)!important}
  .packbox.full,.packbox.spread.full,.packbox.full.portrait{padding-top:66px}
  .packbox.full .flipbook,.packbox.spread.full .flipbook,.packbox.full.portrait .flipbook{height:calc(100dvh - 74px)}
}