:root{
  --hdr:58px;             /* sticky header height */
  --belt:92px;            /* checkout belt height */
  --gum:#234A3B;          /* eucalyptus, from the cover backdrop */
  --gum-deep:#16302A;
  --gum-ink:#1B2B24;      /* text on paper */
  --sage:#8FAE98;
  --paper:#F5F0E4;        /* page ground: warm, not Brenda's cream */
  --paper-2:#FBF8F1;
  --kraft:#C9A374;
  --kraft-ink:#5A4126;
  --cream:#F3EAD6;
  --gold:#D2AE58;
  --gold-deep:#A9852F;
  --wattle:#F2C230;       /* buy button, shelf ticket */
  --tomato:#C2412D;
  --muted:#5D6A62;
  --rule:#DCD3C0;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --label:"Big Shoulders Text","Arial Narrow",sans-serif;
  --serif:"Libre Caslon Text",Georgia,serif;
  --body:"Libre Franklin",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--gum-ink);font-family:var(--body);font-size:18px;line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.2vw,54px);line-height:.98;letter-spacing:.005em;text-transform:uppercase}
h2 em,.card__h em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:.74em;display:inline-block;color:var(--gum)}
main{max-width:1160px;margin:0 auto;padding-inline:24px}
main>section{padding-block:clamp(48px,6.5vw,88px)}
.kick{font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gum);margin-bottom:12px}
.kick--gold{color:var(--gold)}
.head{max-width:660px;margin-bottom:40px}
.head h2{margin-bottom:14px}
.head p:not(.kick){color:var(--muted);font-size:19px}
.micro{font-family:var(--label);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-top:12px}

.btn{display:inline-flex;align-items:center;gap:12px;background:var(--wattle);color:var(--gum-deep);font-family:var(--body);font-weight:700;font-size:18px;text-decoration:none;padding:15px 26px;border-radius:3px;box-shadow:0 2px 0 #B8901A,0 10px 24px -12px rgba(0,0,0,.45);transition:transform .15s,background .15s}
.btn:hover{background:#FFD24A;transform:translateY(-1px)}
.btn__p{font-family:var(--display);font-weight:800;font-size:1.2em;letter-spacing:.02em;padding-left:12px;border-left:1.5px solid rgba(22,48,42,.35)}
.btn--sm{font-size:15px;padding:9px 16px;gap:10px}
.btn--lg{font-size:20px;padding:18px 30px}
.btn:focus-visible,.link:focus-visible,.note__b:focus-visible,summary:focus-visible,.top a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.link{font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:6px}
.link--light{color:var(--cream)}

/* header: slim dark bar, price + countdown in the middle */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;height:var(--hdr);padding:0 max(24px,calc((100% - 1160px)/2 + 24px));background:#121815;color:#E9E3D2;box-shadow:0 1px 0 rgba(210,174,88,.22),0 8px 24px -16px rgba(0,0,0,.7)}
.top__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream)}
.top__brand img{width:28px;height:28px;border-radius:6px}
.top__brand span{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:.1em;text-transform:uppercase}
.top__offer{display:flex;align-items:center;gap:10px;margin:0 auto;font-size:15px;color:#BFC6BE}
.top__label{font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.top__was{text-decoration:line-through;opacity:.6}
.top__now{font-family:var(--display);font-weight:800;font-size:22px;color:var(--wattle);line-height:1;letter-spacing:.02em}
.top__clock{display:inline-flex;gap:3px;font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;color:#fff}
.top__clock i{font-style:normal;background:rgba(255,255,255,.08);border:1px solid rgba(210,174,88,.3);border-radius:4px;padding:3px 6px;min-width:30px;text-align:center}
.top__clock em{font-style:normal;opacity:.5;align-self:center}
.top__left{font-size:14px}
.top__nav{display:flex;gap:22px}
.top__nav a{font-size:15px;font-weight:600;text-decoration:none;color:#BFC6BE}
.top__nav a:hover{color:#fff}
.top__btn{font-size:15px;font-weight:700;text-decoration:none;color:var(--gum-deep);background:var(--wattle);padding:10px 18px;border-radius:2px;box-shadow:0 6px 16px -8px rgba(242,194,48,.8);white-space:nowrap}
.top__btn:hover{background:#FFD24A}
.top a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:1100px){.top__nav{display:none}}

/* hero: the cover's painted backdrop */
.hero{position:relative;color:var(--cream);background:var(--gum-deep) url(assets/backdrop.jpg) center/cover no-repeat;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 30% 40%,rgba(0,0,0,0) 40%,rgba(8,20,16,.45) 100%);mix-blend-mode:multiply}
.hero__in{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:clamp(16px,3svh,32px) 24px;display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center;min-height:clamp(480px,calc(100svh - var(--hdr) - var(--belt)),760px)}
.hero h1{font-weight:400;margin-bottom:min(18px,2.2svh)}
.h1__a{display:block;font-family:var(--display);font-weight:900;font-size:clamp(40px,min(5.6vw,8.6svh),76px);line-height:.92;text-transform:uppercase;letter-spacing:.005em;color:var(--wattle)}
.h1__b{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(22px,min(3vw,4.6svh),40px);line-height:1.15;color:#F3EAD6;margin-top:min(10px,1.2svh)}
.hero__lead{font-size:clamp(16px,2.6svh,19px);line-height:1.55;max-width:31em;color:#E3DCC8;margin-bottom:min(26px,3svh)}
.hero__act{display:flex;flex-wrap:wrap;gap:26px;align-items:center}
.hero .micro{color:#CFC6AE}

.hero__art{justify-self:center;display:grid;justify-items:center;position:relative}
.art__row{position:relative;display:grid;justify-items:center}
.art__book{position:relative;z-index:2;display:grid;justify-items:center}
.book3d{position:relative;width:min(300px,26vw,calc((100svh - var(--hdr) - var(--belt) - 110px) * .75));aspect-ratio:896/1200;perspective:1500px}
.book3d__in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-20deg) rotateX(2deg);transition:transform .8s cubic-bezier(.2,.8,.3,1)}
.hero__art:hover .book3d__in{transform:rotateY(-8deg)}
.book3d__face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateZ(12px);border-radius:0 3px 3px 0;box-shadow:14px 22px 40px rgba(0,0,0,.5)}
.book3d__hinge{position:absolute;inset:0;transform:translateZ(12.5px);border-radius:0 3px 3px 0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.16) 0,rgba(0,0,0,.38) 1.6%,rgba(255,255,255,.1) 3.2%,rgba(0,0,0,0) 7%,rgba(0,0,0,0) 94%,rgba(255,255,255,.06) 100%)}
.book3d__pages{position:absolute;top:3px;bottom:3px;right:0;width:24px;transform:translateX(12px) rotateY(90deg);background:repeating-linear-gradient(90deg,#fbf7ee 0 2px,#ddd3bf 2px 3px)}
.book3d__back{position:absolute;inset:0;transform:translateZ(-12px);background:#10251E;border-radius:0 3px 3px 0}
.book3d__ground{width:115%;height:26px;margin-top:-2px;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 70%)}

/* the shelf ticket: an Aussie supermarket price label */
.ticket{position:absolute;z-index:1;left:calc(100% - 46px);bottom:22%;width:176px;display:grid;grid-template-columns:1fr;background:var(--wattle);color:#1A1A12;border-radius:3px;padding:0 0 8px;transform:rotate(6deg);box-shadow:0 14px 26px -10px rgba(0,0,0,.6);font-family:var(--body);text-align:left;overflow:hidden;padding-left:40px}
.ticket::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--tomato)}
.ticket__top{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:10px 12px 0;color:var(--tomato)}
.ticket__now{font-family:var(--display);font-weight:900;font-size:58px;line-height:.9;padding:2px 12px 0;letter-spacing:-.01em}
.ticket__now small{font-size:.38em;font-weight:800;vertical-align:top;position:relative;top:.35em;margin-right:2px}
.ticket__was{font-size:12px;font-weight:600;padding:2px 12px 0;text-decoration:line-through;opacity:.75}
.ticket__unit{font-size:11px;font-weight:600;margin:6px 12px 0;padding-top:5px;border-top:1px solid rgba(0,0,0,.25)}
.ticket__bars{height:14px;margin:6px 12px 0;background:repeating-linear-gradient(90deg,#1A1A12 0 1px,transparent 1px 3px,#1A1A12 3px 5px,transparent 5px 6px,#1A1A12 6px 7px,transparent 7px 10px);opacity:.75;width:60%}
.ticket.ticket--big{position:relative;left:auto;bottom:auto;width:176px;transform:rotate(-3deg);padding-left:0}
.ticket.ticket--big .ticket__now{font-size:70px}

.pill{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:7px 16px 7px 8px;border-radius:999px;background:rgba(243,234,214,.1);border:1px solid rgba(243,234,214,.22);color:#EDE5CF;font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pill__tick{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#F0D27C,var(--gold) 55%,var(--gold-deep));color:var(--gum-deep);font-size:13px;font-weight:700}
.pill__sep{opacity:.5}

/* the checkout belt */
.belt{position:relative;overflow:hidden;white-space:nowrap;color:#ECE6D6;padding:22px 0;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px),
  linear-gradient(180deg,#2A2C2B,#1D1F1E 50%,#252726);
  border-block:6px solid #0F1110;box-shadow:inset 0 8px 14px -8px rgba(0,0,0,.7),inset 0 -8px 14px -8px rgba(0,0,0,.7)}
.belt__track{display:inline-flex;animation:belt 55s linear infinite}
.belt:hover .belt__track{animation-play-state:paused}
.belt__run{display:inline-flex;align-items:center}
.bi{display:inline-flex;align-items:center;gap:12px;padding:0 2.4rem}
.bi__n{font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:var(--wattle)}
.bi__n--gold{color:var(--gold)}
.bi__l{display:inline-flex;align-items:baseline;gap:10px;line-height:1;font-family:var(--label);font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase}
.bi__l small{font-size:13px;letter-spacing:.12em;opacity:.6;font-weight:600}
.bi__l small::before{content:"\00b7";margin-right:10px;opacity:.7}
.bi__q{font-family:var(--serif);font-style:italic;font-size:23px;color:#F6EFDD}
.bi__own{font-family:var(--label);font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase}
.bi__own svg{color:var(--sage)}
.bi__chip{margin-left:4px;padding:2px 9px;border:1px solid rgba(143,174,152,.55);border-radius:3px;font-size:11.5px;color:#C4D8C9}
.bd{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:3px;background:linear-gradient(180deg,#F4F0E6,#CFC9BC);color:#3B3F3D;font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 4px 8px -2px rgba(0,0,0,.6),inset 0 1px 0 #fff}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* what's inside: the fridge door */
.fridge{position:relative;border-radius:18px;padding:clamp(28px,4vw,48px) clamp(20px,4vw,56px) clamp(28px,4vw,48px) clamp(20px,4vw,48px);background:
  linear-gradient(100deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 70%,rgba(255,255,255,.35) 100%),
  linear-gradient(180deg,#F2F1EC,#E4E2DA);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),inset 0 2px 0 #fff,0 40px 70px -40px rgba(30,40,35,.55)}
.fridge__handle{position:absolute;right:16px;top:12%;bottom:12%;width:10px;border-radius:6px;background:linear-gradient(90deg,#BDBAB0,#F6F5F0 45%,#A9A69C);box-shadow:0 6px 10px -4px rgba(0,0,0,.35)}
.notes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(20,1fr);gap:30px 20px}
.note{grid-column:span 4}
.note:nth-child(6),.note:nth-child(10){grid-column:3/span 4}
.note{transform:rotate(var(--r));transition:transform .2s}
.note:hover{transform:rotate(0deg) translateY(-3px)}
.note__b{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;align-content:start;gap:6px;width:100%;min-height:150px;padding:26px 18px 18px;box-shadow:0 10px 18px -10px rgba(40,35,20,.5),0 1px 2px rgba(0,0,0,.08)}
.note__mag{position:absolute;top:-10px;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;box-shadow:0 4px 6px -2px rgba(0,0,0,.45),inset 0 -3px 4px rgba(0,0,0,.18),inset 0 3px 4px rgba(255,255,255,.35)}
.note__mag--1{background:var(--tomato)}
.note__mag--2{background:var(--gum)}
.note__mag--3{background:var(--wattle)}
.note__mag--4{background:#2F5D8A}
.note__n{font-family:var(--label);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.note__t{font-family:var(--display);font-weight:800;font-size:27px;line-height:1;text-transform:uppercase}
.note__d{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.4;opacity:.85}
.note--1 .note__b{background:#FBE58A;color:#3B3112}
.note--2 .note__b{background:#D2B48A url(assets/kraft.jpg) center/320px;color:var(--kraft-ink)}
.note--3 .note__b{background:#FFFDF6 repeating-linear-gradient(180deg,transparent 0 27px,#C9DDE8 27px 28px);color:var(--gum-ink);border-top:28px solid #FFFDF6;padding-top:0;min-height:150px}
.note--3 .note__mag{top:-38px}
.note--4 .note__b{background:#CFE3D4;color:#183626}
.note--5 .note__b{background:#FFFFFF;color:var(--gum-ink);border-left:6px solid var(--tomato)}
.note__b:hover{filter:brightness(1.03)}

/* popup */
.pd{width:min(640px,calc(100% - 28px));max-height:calc(100% - 48px);padding:0;border:none;border-radius:6px;background:var(--paper-2);color:var(--gum-ink);box-shadow:0 40px 90px -20px rgba(10,25,20,.65)}
.pd::backdrop{background:rgba(16,32,27,.6)}
.pd__x{position:sticky;top:12px;float:right;margin:12px 12px -52px 0;z-index:2;width:40px;height:40px;border-radius:50%;border:none;background:var(--gum);color:var(--cream);font-size:26px;line-height:1;cursor:pointer}
.pp{padding:30px 34px 30px}
.pp__n{font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tomato)}
.pp h3{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;text-transform:uppercase;margin:6px 0 6px}
.pp__d{font-family:var(--serif);font-style:italic;color:var(--muted);margin-bottom:18px}
.pc{list-style:none;margin:0;padding:0;counter-reset:c}
.pc li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:12px 0;border-top:1px solid var(--rule);font-size:17px;line-height:1.4}
.pc__n{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;color:var(--gum)}

/* a page from the book */
.page{display:grid;grid-template-columns:repeat(12,1fr);align-items:start}
.page__photo{grid-column:1/9;grid-row:1;margin:0}
.page__photo img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;box-shadow:0 30px 60px -36px rgba(20,30,25,.6)}
.card{grid-column:7/13;grid-row:1;position:relative;z-index:1;margin-top:clamp(48px,6vw,90px);padding:34px 34px 28px;background:#D2B48A url(assets/kraft.jpg) center/420px;color:#2E2414;border-radius:2px;box-shadow:0 30px 50px -24px rgba(40,25,5,.55),0 2px 3px rgba(0,0,0,.12);transform:rotate(.6deg)}
.card .kick{color:#6B4E2B;font-size:13px}
.card__h{font-family:var(--display);font-weight:900;font-size:clamp(34px,3.6vw,46px);line-height:.95;text-transform:uppercase;margin-bottom:12px}
.card__h em{color:#4A3519}
.card__lead{font-family:var(--serif);font-size:17px;line-height:1.5;margin-bottom:18px}
.card__cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card__t{font-family:var(--label);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:6px;margin-bottom:8px;border-bottom:2px solid currentColor}
.card__t--yes{color:#1F5B3A}
.card__t--no{color:#A3301F}
.card__l{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.42}
.card__l li{position:relative;padding-left:24px;margin-bottom:9px}
.card__l li::before{position:absolute;left:0;top:0;font-weight:800;font-size:16px}
.card__l--yes li::before{content:"\2713";color:#1F5B3A}
.card__l--no li::before{content:"\2715";color:#A3301F}
.card__foot{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(60,40,15,.4);font-size:14px;color:#5A4628}

/* about */
.jodie{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;border-top:1px solid var(--rule)}
.jodie__img{order:2;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:52% 40%;border-radius:4px}
.jodie h2{margin-bottom:16px}
.jodie__copy p:not(.kick):not(.sig){font-size:19px;color:#3D4A43;margin-bottom:14px;max-width:32em}
.sig{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--gum)}

/* order: back on the painted backdrop */
.order{position:relative;color:var(--cream);background:var(--gum-deep) url(assets/backdrop.jpg) center/cover;overflow:hidden}
.order__in{max-width:1160px;margin:0 auto;padding:clamp(56px,7vw,96px) 24px;display:grid;grid-template-columns:260px 1fr;gap:64px;align-items:center}
.order__book{border-radius:2px 4px 4px 2px;box-shadow:0 30px 60px -18px rgba(0,0,0,.7);transform:rotate(-2deg)}
.order h2{color:#FBF4E4;margin-bottom:16px}
.order__copy>p{max-width:34em;color:#DED6C1}
.order__buy{display:flex;align-items:center;gap:40px;flex-wrap:wrap;margin:28px 0 20px}
.order .micro{color:#CFC6AE}
.order__fine{font-size:14px;color:#B9B19B}

/* faq */
.faq h2{margin-bottom:20px}
.faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font-weight:600;font-size:19px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-weight:800;font-size:24px;line-height:1;color:var(--gum)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:18px;color:#4A5751;font-size:17px}

/* footer */
.foot{background:var(--gum-deep);color:#C9C3AF;padding:60px 24px 28px;font-size:16px}
.foot__in{max-width:1160px;margin:0 auto;padding-inline:24px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.foot__name{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);margin-bottom:6px}
.foot__brand p{max-width:24em}
.foot__btn{margin-top:20px;font-size:16px;padding:12px 20px}
.foot__h{font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.foot__col{display:grid;gap:8px;align-content:start}
.foot__col a{color:#ECE5D2;text-decoration:none}
.foot__col a:hover{text-decoration:underline;text-underline-offset:4px}
.foot__base{max-width:1112px;margin:44px auto 0;padding-top:20px;border-top:1px solid rgba(243,234,214,.12);display:grid;gap:6px;font-size:14px;color:#8F9A90}

/* phone buy bar */
.buybar{display:none}

@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:22px;min-height:0;align-content:center}
  .hero__art{order:-1;justify-self:center}
  .art__row{transform:translateX(-40px)}
  .book3d{width:min(300px,40vw)}
  .page{grid-template-columns:1fr}
  .notes{grid-template-columns:repeat(3,1fr)}
  .note,.note:nth-child(6),.note:nth-child(10){grid-column:auto}
  .page__photo,.card{grid-column:1;grid-row:auto}
  .card{margin:-60px 14px 0}
  .jodie{grid-template-columns:1fr;gap:30px}
  .jodie__img{order:0}
  .order__in{grid-template-columns:1fr;gap:36px}
  .order__book{max-width:200px}
  .faq__grid{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--buybar:62px}
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:center;justify-content:space-between;gap:12px;height:calc(var(--buybar) + env(safe-area-inset-bottom));padding:0 16px env(safe-area-inset-bottom);background:rgba(22,48,42,.97);color:var(--cream);box-shadow:0 -10px 24px -12px rgba(0,0,0,.5);transform:translateY(110%);transition:transform .3s ease}
  .buybar.is-on{transform:none}
  .buybar__t{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .buybar .btn{white-space:nowrap;flex:none}
  .foot{padding-bottom:calc(28px + var(--buybar))}
  .buybar__t b{color:var(--wattle);margin-left:6px}
}
@media (max-width:600px){
  :root{--hdr:46px;--belt:70px}
  main{padding-inline:16px}
  /* phone hero: book + ticket, headline, lead, button, with the belt peeking above the buy bar */
  .hero__in{padding:14px 16px 18px;gap:12px;min-height:calc(100svh - var(--hdr) - var(--belt))}
  .hero__art{justify-self:stretch}
  .art__row{transform:translateX(-30px)}
  .book3d{width:min(232px,60vw)}
  .book3d__ground{height:16px}
  .ticket{width:132px;left:calc(100% - 34px);padding-left:30px;bottom:24%}
  .ticket__now{font-size:36px}
  .ticket__top{font-size:9px;letter-spacing:.1em;padding:8px 9px 0;white-space:nowrap}
  .ticket__was,.ticket__unit{white-space:nowrap}
  .ticket__was,.ticket__unit{font-size:10px;margin-inline:9px;padding-inline:0}
  .ticket__now,.ticket__was{padding-inline:9px}
  .ticket__bars{margin-inline:9px;height:10px}
  .pill{font-size:10.5px;padding:5px 10px 5px 5px;margin-top:2px}
  .pill__tick{width:18px;height:18px;font-size:11px}
  .hero .kick{display:none}
  .h1__a{font-size:clamp(34px,10vw,42px)}
  .h1__b{font-size:21px;margin-top:4px}
  .hero h1{margin-bottom:10px}
  .hero__lead{font-size:15.5px;line-height:1.48;margin-bottom:14px}
  .hero__act{gap:10px 20px}
  .hero__act .btn{padding:13px 22px;font-size:17px}
  .hero__act .link{font-size:15.5px}
  .hero .micro{margin-top:8px;font-size:11.5px}
  .belt{padding:12px 0;border-width:4px}
  .bi{padding:0 1.4rem}
  .bi__n{font-size:30px}
  .bi__l{font-size:14px}
  .bi__q{font-size:18px}
  .bd{height:26px;font-size:10px}
  .notes{grid-template-columns:1fr 1fr;gap:20px 14px}
  .note:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}
  .note__b{min-height:132px;padding:22px 12px 14px}
  .note__t{font-size:21px}
  .note__d{font-size:14px}
  .note__n{font-size:11px}
  .fridge{padding:26px 14px 22px 12px;border-radius:12px}
  .fridge__handle{display:none}
  .card{margin:-40px 6px 0;padding:24px 20px 20px}
  .card__cols{grid-template-columns:1fr;gap:14px}
  .pp{padding:24px 20px}
  .pp h3{font-size:32px}
  .order__buy{gap:24px}
  .ticket.ticket--big{width:150px;margin-bottom:0}
  .ticket.ticket--big .ticket__now{font-size:56px}
  .ticket.ticket--big .ticket__top{font-size:10px}
  .ticket.ticket--big .ticket__unit{display:block}
  .foot__in{grid-template-columns:1fr}
}
@media (max-width:600px) and (max-height:760px){
  /* short phones (SE, mini, Safari with its bars): keep book, headline, button and the belt in one screen */
  .hero__in{padding:10px 16px 12px;gap:8px}
  .book3d{width:min(196px,54vw)}
  .ticket{width:124px;padding-left:28px}
  .ticket__now{font-size:32px}
  .ticket__unit{display:none}
  .ticket__bars{display:none}
  .pill{display:none}
  .h1__a{font-size:34px}
  .h1__b{font-size:19px}
  .hero h1{margin-bottom:8px}
  .hero__lead{font-size:14.5px;line-height:1.42;margin-bottom:12px}
  .hero__act .btn{padding:11px 20px;font-size:16px}
  .hero .micro{display:none}
}
@media (max-width:760px){
  /* phone bar = just the offer, centred (the bottom bar carries the button) */
  .top{justify-content:center;padding:0 12px}
  .top__brand,.top__btn,.top__nav,.top__was{display:none}
  .top__offer{margin:0;gap:8px}
  .top__label{font-size:10.5px;letter-spacing:.12em}
  .top__now{font-size:19px}
  .top__clock{font-size:12.5px}
  .top__clock i{min-width:26px;padding:2px 5px}
  .top__left{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .belt{white-space:normal;text-align:center}
  .belt__track{animation:none;display:block}
  .belt__run[aria-hidden]{display:none}
  .belt__run{flex-wrap:wrap;justify-content:center;gap:14px 0}
  *{transition:none!important;animation:none!important}
}
html.shot .hero__in{min-height:0!important}

/* hero split: copy on the painted green, the book on a torn kraft-paper panel (the grocery bag, ripped open) */
.hero__kraftwrap{position:absolute;z-index:1;top:0;bottom:0;right:0;left:calc(max(0px,(100% - 1160px)/2) + 24px + (min(100%,1160px) - 88px) * .56 + 18px);filter:drop-shadow(-10px 0 18px rgba(0,0,0,.45))}
.hero__kraft{position:absolute;inset:0;background:#C9A374 url(assets/kraft.jpg) center/640px;clip-path:polygon(100% 0,100% 100%,1.2px 100.00%,3.4px 98.10%,0.5px 95.67%,7.7px 92.87%,16.4px 90.76%,12.9px 87.37%,1.2px 84.50%,9.5px 81.71%,16.8px 78.41%,11.6px 75.99%,13.9px 73.32%,17.5px 71.15%,15.3px 68.52%,0.8px 65.72%,3.0px 63.24%,8.4px 60.28%,19.6px 58.46%,14.6px 56.35%,10.5px 53.17%,4.9px 50.54%,15.9px 47.68%,9.1px 45.54%,6.3px 42.88%,13.6px 40.51%,1.2px 38.54%,11.0px 36.83%,12.8px 34.56%,3.6px 31.91%,6.2px 28.84%,2.9px 27.03%,17.2px 24.91%,19.5px 23.23%,11.5px 20.91%,12.5px 17.61%,2.5px 15.61%,8.5px 12.52%,1.4px 10.75%,0.7px 8.37%,1.2px 5.86%,10.7px 3.60%,13.0px 1.87%,6.5px 0.00%)}
.hero__kraft::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 55% 45%,rgba(255,240,210,.25),rgba(70,40,10,.28) 100%)}
.hero__in{z-index:2}
.hero .book3d__ground{background:radial-gradient(ellipse at 50% 50%,rgba(50,30,8,.5) 0%,rgba(0,0,0,0) 70%)}
.hero .pill{background:rgba(255,248,230,.45);border-color:rgba(70,45,15,.28);color:#3A2B17}
.hero .pill__sep{opacity:.45}
@media (min-width:981px){.hero__art{transform:translateX(20px)}}
@media (max-width:980px){
  .hero__kraftwrap{display:none}
  .hero__art{justify-self:stretch;margin:-14px -24px 0;padding:22px 24px 30px;background:#C9A374 url(assets/kraft.jpg) center/520px;clip-path:polygon(0 0,100% 0,100.00% calc(100% - 4.0px),95.94% calc(100% - 9.8px),91.25% calc(100% - 0.4px),87.84% calc(100% - 1.6px),84.97% calc(100% - 0.0px),82.33% calc(100% - 5.4px),79.43% calc(100% - 3.3px),76.76% calc(100% - 1.0px),72.67% calc(100% - 1.7px),69.18% calc(100% - 6.3px),64.68% calc(100% - 14.0px),60.23% calc(100% - 14.4px),57.60% calc(100% - 10.8px),53.55% calc(100% - 8.2px),49.33% calc(100% - 15.2px),45.41% calc(100% - 5.9px),41.86% calc(100% - 0.1px),38.71% calc(100% - 9.4px),34.99% calc(100% - 3.7px),31.92% calc(100% - 2.8px),29.04% calc(100% - 15.3px),24.33% calc(100% - 5.7px),20.79% calc(100% - 4.5px),16.13% calc(100% - 13.1px),11.42% calc(100% - 8.8px),7.80% calc(100% - 1.3px),3.12% calc(100% - 6.3px),0.00% calc(100% - 2.1px));position:relative}
}
@media (max-width:600px){
  .hero__art{margin:-14px -16px 0;padding:18px 16px 26px}
}
/* headline colour previews (build phase) */
html.h1-wattle .h1__a{color:var(--wattle)}
html.h1-cream .h1__a{color:#F3EAD6}html.h1-cream .h1__b{color:var(--gold)}