/* Bar Franco — franco.css · the digital grammar (Oct 2026)
   One stylesheet for every page. It replaces static/styles.css + ora.css + chrome.css + site.css,
   static/pages/christmas-v5.css and every page's own <style> block.
   Order: fonts → tokens → chapters → base → type → layout → photographs → rules & frames →
   menu lines → asks → chrome (masthead, Index, dock, footer) → questions & tabs → motion.
   Grammar in one line: one ink on one ground per chapter, four Marsha sizes, one button (the menu line),
   one frame (the double rule) for printed objects, three movements. */

/* ---- fonts ---- */
@font-face{font-family:"VTC Marsha";src:url("fonts/VTCMarsha-Bold.otf") format("opentype"),url("fonts/VTCMarsha-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Affairs";src:url("fonts/Affairs-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Affairs";src:url("fonts/Affairs-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}

/* ---- tokens ---- */
:root{
  /* the four inks + the menu stock. Nothing else: no black, no greys, no tints except the hairline */
  --deep:#6C0600;--almond:#FAD7C3;--bright:#AF0F00;--spritz:#F00000;--paper:#F1EEE6;
  --hairline:rgba(108,6,0,.15);
  --marsha:"VTC Marsha","Arial Black",Impact,sans-serif;
  --affairs:"Affairs",Georgia,"Times New Roman",serif;
  /* type: M = Marsha (always capitals), A = Affairs */
  --m1:clamp(64px,12vw,208px);--m2:clamp(44px,6vw,96px);--m3:clamp(32px,4vw,56px);--m4:24px;
  --a1:clamp(22px,2.4vw,34px);--a2:20px;--a3:18px;--a4:16px;--fine:14px;
  /* page */
  --margin:clamp(20px,4vw,64px);--frame-max:1440px;--gutter:24px;
  --edge:max(var(--margin),calc((100vw - var(--frame-max)) / 2));
  /* rhythm: inside a section · between sections on one ground · inside a band of colour */
  --inside:clamp(32px,3.4vw,48px);--between:128px;--band:96px;
  /* motion */
  --ease-ink:cubic-bezier(.25,.1,.25,1);--ease-in:cubic-bezier(.2,.7,.2,1);
  --t-ink:200ms;--t-set:900ms;--t-unmask:1200ms;--t-settle:700ms;
}
@media (max-width:1199.98px){:root{--between:96px}}
@media (max-width:899.98px){:root{--gutter:20px}}
@media (max-width:639.98px){:root{--gutter:16px;--between:64px;--band:64px;--inside:40px;--a2:18px;--a3:17px}}

/* ---- chapters: a ground and its fixed inks. Every section is one of these ---- */
:root,.ch-menu{--ground:var(--paper);--ink:var(--deep);--head:var(--bright);--title:var(--deep);--frame:var(--bright);--obj:var(--paper);--fill:var(--deep);--fill-text:var(--almond);--hair:var(--hairline)}
.ch-aframe{--ground:var(--almond);--ink:var(--deep);--head:var(--bright);--title:var(--deep);--frame:var(--deep);--obj:var(--paper);--fill:var(--deep);--fill-text:var(--almond);--hair:var(--hairline)}
.ch-night{--ground:var(--deep);--ink:var(--almond);--head:var(--almond);--title:var(--almond);--frame:var(--almond);--obj:var(--deep);--fill:var(--almond);--fill-text:var(--deep);--hair:rgba(250,215,195,.3)}
.ch-poster{--ground:var(--bright);--ink:var(--almond);--head:var(--almond);--title:var(--almond);--frame:var(--almond);--obj:var(--bright);--fill:var(--almond);--fill-text:var(--bright);--hair:rgba(250,215,195,.35)}
.ch-menu,.ch-aframe,.ch-night,.ch-poster{background:var(--ground);color:var(--ink)}
/* framed objects are paper even inside an Almond chapter, so they take the Paper inks */
.ch-aframe .frame{--ink:var(--deep);--head:var(--bright)}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--deep);font-family:var(--affairs);font-size:var(--a3);line-height:1.5;overflow-x:clip}
p,h1,h2,h3,h4,ul,ol,figure,dl,dd,blockquote{margin:0}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color var(--t-ink) var(--ease-ink)}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
button{font:inherit;color:inherit}
em,i{font-style:italic}
::selection{background:var(--almond);color:var(--deep)}
:focus-visible{outline:2px solid var(--spritz);outline-offset:2px}
.ch-night :focus-visible,.ch-poster :focus-visible,.dock :focus-visible{outline-color:var(--almond)}
[hidden]{display:none!important}
.link{color:var(--head);text-decoration:none}
.link:hover{color:var(--ink);text-decoration:underline}
.u{color:var(--head);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.u:hover{color:var(--ink)}

/* ---- type ---- */
.m1,.m2,.m3,.m4{font-family:var(--marsha);font-weight:700;text-transform:uppercase;color:var(--head);text-wrap:balance}
.m1{display:flex;justify-content:space-between;width:100%;font-size:var(--m1);line-height:.82;letter-spacing:0}  /* force-justified sign: one letter per span */
.m2{font-size:var(--m2);line-height:.88;letter-spacing:-.005em;max-width:14ch}
.m3{font-size:var(--m3);line-height:.9;letter-spacing:-.005em;max-width:18ch}
.m4{font-size:var(--m4);line-height:1.1;letter-spacing:.06em}
.title{color:var(--title)}                     /* page titles are Deep Red on paper */
.sup{font-size:.5em;vertical-align:.5em;letter-spacing:.04em}   /* AT · AND · ST inside M1/M2 only */
.aside{font-family:var(--affairs);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:.42em;vertical-align:.5em}
.a1{font-size:var(--a1);line-height:1.3;max-width:30ch;text-wrap:pretty}
.a2{font-size:var(--a2);line-height:1.4;max-width:44ch;text-wrap:pretty}
.a3{font-size:var(--a3);line-height:1.5;max-width:44ch;text-wrap:pretty}
.a4,.eyebrow{font-size:var(--a4);font-style:italic;line-height:1.4}
.it{font-style:italic}
.fine{font-size:var(--fine);font-style:italic;line-height:1.45}
.c{text-align:center;justify-items:center;margin-left:auto;margin-right:auto}

/* ---- layout ---- */
.wrap{width:100%;max-width:calc(var(--frame-max) + 2 * var(--margin));margin:0 auto;padding-left:var(--margin);padding-right:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--inside)}
.sec{padding-top:var(--between)}                 /* sections on one ground */
.sec.last{padding-bottom:var(--between)}
.band{padding-top:var(--band);padding-bottom:var(--band)}   /* a chapter of colour */
.intro{display:grid;gap:16px;align-content:start;justify-items:start}
.intro.c{justify-items:center;text-align:center}
.mt{margin-top:var(--inside)}
.emb{height:22px;width:auto}
/* text starts on column 1 or column 7 */
.at-1{grid-column:1/7}.at-1-5{grid-column:1/6}.at-1-8{grid-column:1/9}.at-7{grid-column:7/13}.at-8{grid-column:8/13}.at-all{grid-column:1/-1}
.self-end{align-self:end}
@media (max-width:899.98px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .at-1,.at-1-5,.at-1-8,.at-7,.at-8{grid-column:1/-1}
}
@media (max-width:639.98px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- photographs: three treatments, three ratios ---- */
.ph{position:relative;overflow:hidden;background:var(--almond);margin:0}
.ph>img:first-child{width:100%;height:100%;object-fit:cover}
.r-169{aspect-ratio:16/9}.r-32{aspect-ratio:3/2}.r-45{aspect-ratio:4/5}
.bleed-l{margin-left:calc(-1 * var(--edge))}.bleed-r{margin-right:calc(-1 * var(--edge))}
/* the script rides the photograph: small, almond, in a dark corner */
.mark{position:absolute;left:var(--margin);bottom:clamp(20px,3.4vw,48px);width:clamp(110px,11vw,180px);height:auto}
.mark.r{left:auto;right:var(--margin)}
/* 1 · full-bleed: one per page */
.full.r-169{width:100%}
@media (max-width:639.98px){.full.r-169{aspect-ratio:4/5}}
/* 2 · editorial pair: 7 columns at 3:2 + 4 columns at 4:5, sharing a bottom edge */
.pair{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end}
.pair>.p7{grid-column:1/8}.pair>.p4{grid-column:9/13}
.pair.flip>.p7{grid-column:6/13}.pair.flip>.p4{grid-column:1/5;grid-row:1}
@media (max-width:639.98px){.pair{grid-template-columns:1fr}.pair>.p4{display:none}.pair>.p7,.pair.flip>.p7{grid-column:1/-1;margin-left:calc(-1 * var(--margin));margin-right:calc(-1 * var(--margin))}}
/* 3 · print on the table: one photograph on a paper mat over another, once per page */
.print{position:relative}
.print>.mat{position:absolute;left:calc(-1 * clamp(32px,6vw,96px));bottom:clamp(32px,5vw,72px);width:46%;background:var(--ground);padding:10px 10px 0 0;z-index:2}
@media (max-width:899.98px){.print>.mat{display:none}.print>.ph{margin-left:calc(-1 * var(--margin))!important;margin-right:calc(-1 * var(--margin))!important}}

/* ---- rules & frames ---- */
.hair{border-top:1px solid var(--hair)}
.hair-b{border-bottom:1px solid var(--hair)}
.rule-ink{border-top:1px solid currentColor}
.rule2{height:7px;border-top:2px solid var(--frame);border-bottom:1px solid var(--frame)}   /* 2px · 4px · 1px */
/* the double rule: 10px of paper, 2px, 4px, 1px, 24px to the type. Printed objects only */
.frame{position:relative;background:var(--obj);padding:41px}
.frame::before{content:"";position:absolute;inset:10px;border:2px solid var(--frame);pointer-events:none}
.frame::after{content:"";position:absolute;inset:16px;border:1px solid var(--frame);pointer-events:none}
.frame.menu{display:grid;gap:22px;justify-items:center;text-align:center}
.frame .m1{font-size:clamp(28px,5vw,48px);line-height:1}
@media (max-width:639.98px){.frame{padding:36px 28px}}

/* ---- menu lines: name — italic detail ..... number ---- */
.ml{display:flex;align-items:baseline;gap:.5em;width:100%;font-size:var(--a2);line-height:1.35;text-align:left}
.ml>.n{flex:0 1 auto;min-width:0}
.ml>.lead{flex:1 1 24px;min-width:24px;border-bottom:2px dotted currentColor;transform:translateY(-.28em)}
.ml>.v{flex:0 1 auto;min-width:0;text-align:right;font-style:italic;text-wrap:balance}
.ml>.v.r{flex:none;white-space:nowrap;font-style:normal}
.lines-list{display:grid;gap:8px;width:100%}
.lines-list .ml{font-size:var(--a3)}
a.ml:hover{text-decoration:none;color:var(--head)}

/* ---- asks ---- */
/* primary: the menu line — the words, a dotted leader and a short fact where a price would be, a hairline above and below.
   No arrows. With no fact (the dock, Send) it is the words alone between the rules */
.line{display:flex;align-items:baseline;width:100%;max-width:440px;padding:16px 12px 15px;border:0;border-top:1px solid currentColor;border-bottom:1px solid currentColor;background:transparent;color:var(--ink);font-family:var(--affairs);font-style:normal;font-size:var(--a2);line-height:1.2;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--t-ink) var(--ease-ink),color var(--t-ink) var(--ease-ink)}
.line>.lead{flex:1 1 auto;min-width:1.25em;margin:0 .5em;border-bottom:2px dotted currentColor;transform:translateY(-.28em)}
.line>.v{flex:none;font-style:italic;white-space:nowrap}
.line:hover,.line:focus-visible{background:var(--fill);color:var(--fill-text);text-decoration:none}
.line:active{opacity:.6}
.line+.line{border-top:0}
.lines{display:grid;width:100%;max-width:440px}
/* secondary: the written ask — italic words in the head ink, underlined on hover */
.ask{display:inline-flex;align-items:baseline;font-style:italic;font-size:var(--a2);line-height:1.3;color:var(--head);white-space:nowrap;padding:6px 0}
.ask:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.ask:active{opacity:.6}
@media (max-width:639.98px){.line{max-width:none;padding:15px 10px 14px}}

/* ---- masthead (every page) — chrome.js adds .bf-tight past 90px ---- */
.bf-mast{position:sticky;top:0;z-index:30;background:var(--paper);color:var(--deep);--frame:var(--bright);--head:var(--bright);--ink:var(--deep)}
.mast-row{display:flex;align-items:flex-start;gap:16px clamp(20px,2.5vw,40px);padding-top:clamp(16px,2vw,26px);padding-bottom:clamp(12px,1.4vw,18px)}
.mast-logo{flex:none}
.mast-logo img{height:clamp(30px,3vw,42px);width:auto}
.mast-nav{display:flex;gap:clamp(18px,2.2vw,34px);margin-left:auto;font-size:19px;line-height:1.2;white-space:nowrap}
.mast-nav a{position:relative;display:block;padding:4px 0}
.mast-nav a:hover{color:var(--bright);text-decoration:none}
.mast-nav a[aria-current="page"]{color:var(--bright)}
.mast-dog{position:absolute;left:50%;top:100%;width:32px;height:auto;max-width:none;margin-top:2px;transform:translateX(-50%);pointer-events:none}
.mast-asks{display:flex;gap:clamp(16px,2vw,28px);flex:none}
.mast-asks .ask{font-size:18px;padding:4px 0}
.mast-menu{all:unset;display:none;cursor:pointer;font-family:var(--affairs);font-style:italic;font-size:18px;line-height:1;padding:12px 0}
.mast-menu:focus-visible{outline:2px solid var(--spritz);outline-offset:3px}
.bf-tight .mast-row{align-items:center;padding-top:10px;padding-bottom:10px}
.bf-tight .mast-logo img{height:28px}
.bf-tight .mast-dog{display:none}
@media (max-width:1199.98px){.mast-nav{font-size:17px;gap:16px}.mast-asks .ask{font-size:16px}}
@media (max-width:999.98px){.mast-nav{display:none}.mast-asks{margin-left:auto}.mast-menu{display:block}}
@media (max-width:639.98px){.mast-asks{display:none}.mast-menu{margin-left:auto}.mast-row{align-items:center}}

/* campaign pages (Christmas): the nav gives way to Call · Enquire, so the Index button shows at every width */
.mast-menu.always{display:block}
.mast-asks+.mast-menu.always{margin-left:clamp(16px,2vw,28px)}
@media (min-width:1000px){.mast-row:not(:has(.mast-nav)) .mast-asks{margin-left:auto}}
@media (max-width:639.98px){.mast-asks+.mast-menu.always{margin-left:auto}}


/* ---- phone Index (every page) ---- */
#ora-index{position:fixed;inset:0;z-index:60;overflow:auto;padding:0 var(--margin) 32px}
.ix-top{display:flex;justify-content:space-between;align-items:center;height:72px}
.ix-top img{height:26px;width:auto}
.ix-close{all:unset;cursor:pointer;font-family:var(--affairs);font-style:italic;font-size:18px;padding:12px 0}
.ix-card{max-width:640px;margin:8px auto 0;display:grid;gap:28px;justify-items:center;text-align:center}
.ix-card .ix-logo{width:min(60%,280px);height:auto}
.ix-nav{display:grid;gap:6px;width:100%}
.ix-nav .ml{font-size:clamp(20px,2.4vw,24px)}
.ix-nav .ml{justify-content:center}
.ix-nav .ml>.lead,.ix-nav .ml>.v{display:none}

/* ---- phone dock: two menu lines on Night — chrome.js slides it (.bf-dock-on) ---- */
.dock{display:none}
@media (max-width:639.98px){
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;padding:0 4px env(safe-area-inset-bottom);transition:transform 320ms var(--ease-ink),visibility 0s linear 0s}
  .dock .line{max-width:none;border:0;padding:17px 10px 16px;font-size:clamp(15px,4.3vw,17px);white-space:nowrap}
  .dock .line{justify-content:center}
  .dock .line>.lead,.dock .line>.v{display:none}
  .dock .line+.line{border-left:1px solid var(--hair)}  /* the divider between the two asks is a plain hairline */
  .dock .line:hover,.dock .line:active{background:var(--almond);color:var(--deep)}
  .bf-dockjs .dock:not(.bf-dock-on){transform:translateY(calc(100% + 4px));visibility:hidden;transition:transform 320ms var(--ease-ink),visibility 0s linear 320ms}
}

/* ---- footer (every page): the Night chapter ---- */
.bf-foot{padding:var(--band) 0 40px;text-align:center}
.now{display:grid;gap:12px;justify-items:center}
.now-k{font-style:italic;font-size:clamp(20px,2vw,28px)}
.now .m2{max-width:none}
.now-t{font-size:clamp(18px,1.6vw,22px);font-variant-numeric:tabular-nums}
.foot-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:40px clamp(32px,5vw,80px);max-width:1000px;margin:clamp(56px,7vw,88px) auto 0;text-align:left;align-items:start}
.foot-body .lines{max-width:none}
.foot-more{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:clamp(48px,6vw,72px);padding-top:20px;border-top:1px solid var(--hair);font-style:italic;font-size:16px}
.foot-legal{margin-top:14px;font-size:var(--fine);font-style:italic;text-wrap:balance}
.foot-legal a{text-decoration:underline 1px;text-underline-offset:.16em}
.foot-emb{height:22px;width:auto;margin:32px auto 0}
.bf-lite .foot-body{display:none}

/* ---- questions & tabs ---- */
.qa{display:grid;border-bottom:1px solid var(--hair)}
.qa details{border-top:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;font-size:var(--a2);line-height:1.3;transition:color var(--t-ink) var(--ease-ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;color:var(--head);font-size:24px;line-height:1}
.qa details[open] summary::after{content:"\2212"}
.qa summary:hover{color:var(--head)}
.qa details>:not(summary){padding:0 0 20px;font-style:italic;font-size:var(--a3);max-width:60ch}
.tabs{display:flex;gap:clamp(24px,3vw,40px);border-bottom:1px solid var(--hair)}
.tabs button{all:unset;cursor:pointer;font-family:var(--affairs);font-style:italic;font-size:19px;padding:0 0 12px;margin-bottom:-1px;border-bottom:1px solid transparent;transition:color var(--t-ink) var(--ease-ink)}
.tabs button[aria-selected="true"]{color:var(--head);border-bottom-color:var(--head)}
.tabs button:focus-visible{outline:2px solid var(--spritz);outline-offset:3px}

/* ---- forms: printed objects. Labels above, no placeholders, fields underline in the ink ---- */
.form{display:grid;gap:22px;width:100%;text-align:left}
.field{display:grid;gap:6px;width:100%}
.field>label{font-style:italic;font-size:var(--a4);line-height:1.3}
.field input,.field textarea,.field select{width:100%;margin:0;border:0;border-bottom:1px solid currentColor;border-radius:0;background:transparent;color:inherit;font-family:var(--affairs);font-size:var(--a2);line-height:1.3;padding:8px 0 10px;-webkit-appearance:none;appearance:none}
.field textarea{min-height:140px;resize:vertical}
.field .help{font-style:italic;font-size:var(--fine)}
.form-note{font-style:italic;font-size:var(--a4)}
.form-note.err{color:var(--head)}
button.line{appearance:none;-webkit-appearance:none}
.frame iframe{width:100%;border:0;background:transparent}

/* ---- campaign cover strip (Christmas, Events Pack): 3–4 photographs at 4:5; two on phones ---- */
.strip{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--gutter)}
@media (max-width:639.98px){.strip{grid-template-columns:1fr 1fr}.strip>:nth-child(n+3){display:none}}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- motion: set · unmask · settle — once each, only with JS (html.fx), never with reduced motion ---- */
.fx [data-set]{opacity:0;letter-spacing:.06em;transition:opacity var(--t-set) var(--ease-in),letter-spacing var(--t-set) var(--ease-in)}
.fx img[data-set]{letter-spacing:normal}
.fx [data-set][data-on]{opacity:1;letter-spacing:var(--ls,-.005em)}
.fx [data-unmask]::before{content:"";position:absolute;inset:0;z-index:3;background:var(--ground);transform-origin:50% 100%;transition:transform var(--t-unmask) var(--ease-in);pointer-events:none}
.fx [data-unmask][data-on]::before{transform:scaleY(0)}
.fx [data-settle]{opacity:0;transform:translateY(12px);transition:opacity var(--t-settle) var(--ease-in),transform var(--t-settle) var(--ease-in)}
.fx [data-settle][data-on]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .fx [data-set],.fx [data-settle]{opacity:1;transform:none;letter-spacing:var(--ls,-.005em)}
  .fx [data-unmask]::before{display:none}
}
@media print{.bf-mast,.dock,#ora-index{display:none!important}.fx [data-set],.fx [data-settle]{opacity:1;transform:none}.fx [data-unmask]::before{display:none}}
/* between pages the masthead holds still and the page turns under it, like a menu (Chrome, Safari; elsewhere a normal load) */
@view-transition{navigation:auto}
.bf-mast{view-transition-name:bf-mast}
::view-transition-old(root),::view-transition-new(root){animation-duration:420ms;animation-timing-function:cubic-bezier(.25,.1,.25,1)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---- Home: the cover ---- */
.cover{padding-top:clamp(24px,3vw,40px)}
.cover-text{grid-column:1/6;display:grid;grid-template-rows:auto 1fr auto;gap:28px;padding-bottom:4px}
.cover-logo{width:100%;max-width:560px;height:auto;align-self:center}
.cover-ph{grid-column:6/13;height:clamp(480px,calc(100svh - 150px),860px)}
.cover-asks{display:none}
.level{padding:clamp(28px,3vw,44px) 0;align-items:end}
.level .lv-ph{grid-column:1/5}
.level .lv-txt{grid-column:7/13}
@media (max-width:899.98px){
  .cover-text{grid-column:1/-1;grid-template-rows:none;gap:20px}
  .cover-logo{max-width:420px}
  .cover-ph{grid-column:1/-1;height:auto;aspect-ratio:4/5;margin-left:calc(-1 * var(--margin))!important;margin-right:calc(-1 * var(--margin))!important}
  .level .lv-ph{grid-column:1/4}.level .lv-txt{grid-column:1/-1}
}
@media (max-width:639.98px){.cover-asks{display:grid}.cover-logo{max-width:300px}.level .lv-ph{grid-column:1/4}}

/* ==== index.html ==== */
/* the cover logo is the page h1 */
.cover-h1{align-self:center;max-width:560px;width:100%}
.cover-h1 .cover-logo{max-width:none}
@media (max-width:899.98px){.cover-h1{max-width:420px}}
@media (max-width:639.98px){.cover-h1{max-width:300px}}

/* ==== menus/index.html ==== */
/* hero: title + lede, the lead photograph, and the tabs sitting right above the sheets */
.pg-menus .mn-hero{padding-top:clamp(24px,3vw,40px);padding-bottom:var(--inside)}
.pg-menus .mn-txt{grid-column:1/6;grid-row:1;align-self:end}
.pg-menus .mn-ph{grid-column:8/13;grid-row:1/3}
.pg-menus .mn-tabs{grid-column:1/6;grid-row:2;align-self:end}
/* the sheets: one centred printed menu at a time */
.pg-menus .mn-sheet{grid-column:3/11}
.pg-menus .mn-sheet .frame{padding-top:56px;padding-bottom:56px}
.pg-menus .course{display:grid;gap:6px;justify-items:center;width:100%;max-width:680px}
.pg-menus .course .m4{margin-bottom:6px}
.pg-menus .dish{font-size:var(--a3);line-height:1.4;text-wrap:balance}
.pg-menus .dish .pr{white-space:nowrap}
.pg-menus .course .ml{font-size:var(--a3)}
.pg-menus .mn-foot{grid-column:3/11;justify-items:center;text-align:center}
.pg-menus .mn-pdf{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 32px}
@media (max-width:899.98px){
  .pg-menus .mn-txt,.pg-menus .mn-ph,.pg-menus .mn-tabs,.pg-menus .mn-sheet,.pg-menus .mn-foot{grid-column:1/-1;grid-row:auto}
  .pg-menus .mn-ph{margin-left:calc(-1 * var(--margin));margin-right:calc(-1 * var(--margin))}
}
@media (min-width:640px) and (max-width:899.98px){.pg-menus .mn-ph{aspect-ratio:3/2}}
/* the event menus sheet: courses carry italic sub-heads and dietary tags */
.pg-menus .ev-sub{margin-top:12px;font-family:var(--affairs);font-weight:400;font-style:italic;font-size:var(--a2);line-height:1.3;color:var(--head)}
.pg-menus .ev-sub span{color:var(--ink)}
.pg-menus .dish .tg{white-space:nowrap}

/* ==== bookings/index.html ==== */
/* first screen: title, one line and the live widget side by side */
.pg-bookings .bk-hero{padding-top:clamp(24px,3vw,40px)}
.pg-bookings .bk-txt{grid-column:1/6;align-self:start;padding-top:clamp(8px,2vw,32px)}
.pg-bookings .bk-widget{grid-column:7/13;display:grid;gap:14px}
.pg-bookings .bk-frame{display:grid;gap:16px;padding:36px}
.pg-bookings .bk-label{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.pg-bookings .bk-iframe{width:100%;height:clamp(520px,calc(100svh - 280px),720px);border:0;background:var(--paper)}
.pg-bookings .bk-help{text-align:center}
@media (max-width:899.98px){
  .pg-bookings .bk-txt,.pg-bookings .bk-widget{grid-column:1/-1}
  .pg-bookings .bk-iframe{height:min(720px,80svh)}
}
@media (max-width:639.98px){.pg-bookings .bk-frame{padding:28px 22px}}

/* ==== functions/index.html ==== */
/* ---- Page: Functions — the nameplate, the coaster, the five chapters (functions.js) ---- */
/* the nameplate: functions.js sets one size for every line so the widest fills the frame; this is the fallback */
.np-cover{padding-top:clamp(20px,3vw,44px)}
.np{display:grid;justify-items:center;row-gap:.02em;position:relative;overflow:hidden;font-family:var(--marsha);font-weight:700;text-transform:uppercase;color:var(--title);line-height:.84;letter-spacing:-.005em;font-size:calc((min(100vw,1568px) - 2 * var(--margin)) / 13)}
.np-l{display:block;width:max-content;white-space:nowrap}
.np-probe{position:absolute;left:0;top:0;display:block;width:max-content;white-space:nowrap;visibility:hidden;pointer-events:none;font-size:100px;letter-spacing:-.005em}
.np-date{margin-top:clamp(14px,1.8vw,24px);padding:12px 0;border-top:1px solid var(--deep);border-bottom:1px solid var(--deep);text-align:center}
.np-cover .strip{margin-top:clamp(14px,1.8vw,24px)}
@media (max-width:899.98px){.strip.all{grid-template-columns:1fr 1fr}}
@media (max-width:639.98px){.np{font-size:calc((100vw - 2 * var(--margin)) / 7.5)}.np-w{display:block}.strip.all>:nth-child(n+3){display:block}}
/* why people book Franco: the coaster and the words, beside the framed enquiry card */
.hook{align-items:start;max-width:calc(1240px + 2 * var(--margin))}
.hook-l{grid-column:1/7;display:grid;gap:16px;align-content:start;justify-items:start}
.hook-mid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:center;width:100%}
.hook-copy{display:grid;gap:16px}
.hook-mid>.coaster-wrap{display:grid;justify-items:center;gap:14px;margin:0 8px 0 0}
@media (max-width:1099.98px){.hook-mid{display:contents}.hook-mid>.coaster-wrap{order:1;display:flex;gap:22px;margin:18px 0 0 6px}}
.hook-talk{display:grid;gap:8px;width:100%;margin-top:20px}
.hook-talk .ml{font-size:var(--a3)}
.hook-talk .facts .a4{margin-top:2px}
.hook-card{grid-column:7/13;display:grid;gap:14px;justify-items:center;text-align:center;scroll-margin-top:72px}
.hook-card iframe{height:520px}
/* phones: words, then the form, then the phone lines and the coaster */
@media (max-width:899.98px){.hook{row-gap:16px}.hook-l{display:contents}.hook-l>*,.hook-mid>*,.hook-card{grid-column:1/-1}.hook-card{order:1;width:100%;max-width:680px;justify-self:center;margin:24px 0 8px}.hook-talk{order:2}.hook-mid>.coaster-wrap{order:3}}
/* the coaster: a printed object set down on the table — the one shadow on the site. Turn it over */
.coaster-wrap{display:flex;align-items:center;gap:22px;margin:18px 0 0 6px}
.coaster{position:relative;width:clamp(180px,15vw,230px);aspect-ratio:1/1;transform:rotate(-8deg);filter:drop-shadow(0 1px .5px rgba(108,6,0,.22)) drop-shadow(0 6px 12px rgba(108,6,0,.10));transition:transform 1100ms var(--ease-in),filter 1100ms var(--ease-in),opacity 600ms var(--ease-ink)}
.fx .coaster:not([data-settled]){opacity:0;transform:translateY(-18px) rotate(-16deg) scale(1.05);filter:drop-shadow(0 22px 26px rgba(108,6,0,.10))}
@media (hover:hover) and (pointer:fine){.coaster[data-settled]:hover{transform:translateY(-4px) rotate(-6deg);filter:drop-shadow(0 2px 1px rgba(108,6,0,.20)) drop-shadow(0 14px 22px rgba(108,6,0,.12));transition-duration:500ms}}
.co-flip{all:unset;position:absolute;inset:0;cursor:pointer;transform-style:preserve-3d;transform:perspective(900px) rotateY(0deg);transition:transform 850ms var(--ease-in)}
.co-flip[data-turned="true"]{transform:perspective(900px) rotateY(180deg)}
.co-flip:focus-visible{outline:2px solid var(--spritz);outline-offset:6px;border-radius:50%}
.co-face{position:absolute;inset:0;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.co-back{transform:rotateY(180deg)}
.co-bg,.co-cg{position:absolute;inset:0;display:block;-webkit-mask:url("shapes/coaster.svg") center/100% 100% no-repeat;mask:url("shapes/coaster.svg") center/100% 100% no-repeat}
.co-bg{background:var(--almond)}
.co-cg{background:var(--deep)}
.co-cg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:0}
.co-cg img[data-show]{opacity:1}
.co-ring{position:absolute;inset:9%;border:1.5px solid var(--deep);border-radius:50%}
.co-ring.in{inset:calc(9% + 4px);border-width:1px}
.co-back .co-ring{border-color:var(--almond)}
.co-emb{position:absolute;left:50%;top:50%;width:30%;height:auto;transform:translate(-50%,-50%)}
.co-hint{margin:0;font-style:italic;font-size:var(--a4);transition:opacity 400ms var(--ease-ink)}
.coaster-wrap:hover .co-hint{opacity:.5}
@media (prefers-reduced-motion:reduce){.fx .coaster:not([data-settled]){opacity:1;transform:rotate(-8deg);filter:drop-shadow(0 1px .5px rgba(108,6,0,.22)) drop-shadow(0 6px 12px rgba(108,6,0,.10))}}
/* the five chapters: across the page from 1100px (one always open), a list below (all closed) */
.chx-intro{padding-top:var(--between)}
.sec.chx-sec{padding-top:clamp(40px,4.5vw,64px)}
.chx{margin-top:clamp(16px,2vw,24px)}
.chx-h{position:relative;font:inherit}
.chx-head{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:8px;align-content:start;width:100%;padding:18px 0 22px}
.chx-head:focus-visible{outline:2px solid var(--spritz);outline-offset:4px}
.chx-n{font-style:italic;font-size:var(--a4)}
.chx-t{font-family:var(--marsha);font-weight:700;text-transform:uppercase;font-size:var(--m4);line-height:1.05;letter-spacing:.06em;text-wrap:balance;transition:color var(--t-ink) var(--ease-ink)}
.chx-l{font-style:italic;font-size:var(--a4);line-height:1.4;text-wrap:pretty}
.chx-oc{display:none;color:var(--head);font-size:24px;line-height:1}
.chx-oc::before{content:"+"}
.chx-ch[data-open="true"] .chx-oc::before{content:"\2212"}
.chx-head:hover .chx-t,.chx-ch[data-open="true"] .chx-t{color:var(--head)}
.chx-js .chx-ch:not([data-open="true"]) .chx-body{display:none}
.chx-body{padding-top:var(--inside)}
.chx-card{align-items:start}
.chx-ph{grid-column:1/6}
.chx-tx{grid-column:7/13;display:grid;gap:16px;align-content:start}
.facts{display:grid;width:100%;border-bottom:1px solid var(--hair)}
.facts>*{padding:9px 0;border-top:1px solid var(--hair);font-size:var(--a3);line-height:1.45}
.facts .ml>.n{flex-shrink:0}   /* a label stays on one line; the fact wraps on the right */
.lv2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gutter)}
.lv2>div{display:grid;gap:8px;align-content:start}
.qlist{display:grid;border-bottom:1px solid var(--hair)}
.qlist>div{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--hair)}
.qlist h4{font-size:var(--a2);font-weight:400;line-height:1.35;color:var(--head)}
.links{display:flex;flex-wrap:wrap;gap:6px 24px}
@media (min-width:1100px){
  .chx{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .chx-ch{display:contents}
  .chx-h{grid-row:1;padding-right:var(--gutter);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .chx-h::after{content:"";position:absolute;left:0;right:var(--gutter);bottom:-1px;height:2px;background:transparent;transition:background-color var(--t-ink) var(--ease-ink)}
  .chx-ch:last-child .chx-h{padding-right:0}
  .chx-ch:last-child .chx-h::after{right:0}
  .chx-ch[data-open="true"] .chx-h::after{background:var(--head)}
  .chx-body{grid-column:1/-1}
}
@media (max-width:1099.98px){
  .chx{border-bottom:1px solid var(--hair)}
  .chx-h{border-top:1px solid var(--hair);transition:border-color var(--t-ink) var(--ease-ink)}
  .chx-ch[data-open="true"] .chx-h{border-top-color:var(--head)}
  .chx-head{grid-template-columns:2.2em minmax(0,1fr) auto;column-gap:12px;row-gap:6px;align-items:baseline;padding:20px 0}
  .chx-n{grid-column:1;grid-row:1}
  .chx-t{grid-column:2;grid-row:1;font-size:var(--m3);line-height:.9;letter-spacing:-.005em}
  .chx-l{grid-column:2;grid-row:2}
  .chx-oc{display:block;grid-column:3;grid-row:1}
  .chx-body{padding:8px 0 var(--inside)}
  .chx-ph,.chx-tx{grid-column:1/-1}
  .chx-ph{order:2;aspect-ratio:3/2}
  .lv2{grid-template-columns:1fr}
}

/* ==== vouchers/index.html ==== */
/* hero: title and line beside the lead photograph */
.pg-vouchers .hero{padding-top:clamp(24px,3vw,40px)}
.pg-vouchers .hero-txt{align-content:start}
.pg-vouchers .hero-ph{align-self:start}
@media (max-width:899.98px){.pg-vouchers .hero-ph{margin-left:calc(-1 * var(--margin));margin-right:calc(-1 * var(--margin))}}
/* 01 · the voucher: the one framed object */
.pg-vouchers .voucher{width:100%;max-width:560px;justify-self:center}
.pg-vouchers .voucher .v-logo{width:min(80%,340px);height:auto}
.pg-vouchers .voucher .lines-list{max-width:360px}

/* ==== contact/index.html ==== */
/* Contact: the details beside the framed note, underline fields, the full-bleed map */
.pg-contact .c-find{margin-top:var(--between)}
.pg-contact .c-details{gap:14px}
.pg-contact .c-details .lines-list:not(:last-child){margin-bottom:18px}
.pg-contact .c-frame{align-self:start}
.pg-contact .field input:focus,.pg-contact .field textarea:focus{border-bottom-color:var(--head)}
.pg-contact .form .line{max-width:none}
.pg-contact .form-note a{text-decoration:underline 1px;text-underline-offset:.16em}
.pg-contact .c-map .ph iframe{width:100%;height:100%;border:0}
.pg-contact .c-note{padding-top:16px}
.pg-contact .c-note .ask{font-size:var(--a4);padding:0}

/* ==== christmas-functions/index.html ==== */
/* the running head, the CHRISTMAS sign, the chapter row and the chapters under it */
.pg-xmas .x-cover{padding-top:18px;padding-bottom:var(--inside)}
.pg-xmas .x-run{display:grid;grid-template-columns:2fr 2fr 2fr 1fr;gap:16px}
.pg-xmas .x-run span:last-child{text-align:right}
.pg-xmas .x-h1{display:grid;gap:clamp(18px,2.4vw,28px);justify-items:center;width:100%;margin-top:clamp(28px,5vw,72px);font-weight:400}
.pg-xmas .x-sub{max-width:22ch;text-wrap:balance}
.pg-xmas .x-intro{display:grid;gap:20px;justify-items:center;text-align:center}
.pg-xmas .x-lede{max-width:52ch}
.pg-xmas .x-intro .lines,.pg-xmas .x-intro .line{max-width:520px}
.pg-xmas .x-tabs{justify-content:center;margin-top:clamp(40px,5vw,64px)}
.pg-xmas .x-tabs em{font-size:var(--a4);margin-right:.3em}
.pg-xmas .x-panel{padding-top:var(--inside)}
.pg-xmas .x-eb{max-width:none}
.pg-xmas .x-card{max-width:760px;margin-left:auto;margin-right:auto;padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px)}
.pg-xmas .x-card .m4{margin-top:14px}
.pg-xmas .x-card .lines-list{max-width:560px}
.pg-xmas .x-solo{justify-content:center;text-align:center}
.pg-xmas .x-hd{margin-top:4px}
.pg-xmas .x-qa,.pg-xmas .x-list{width:100%;max-width:720px;margin-left:auto;margin-right:auto}
.pg-xmas .x-list{max-width:620px}
.pg-xmas .x-list .ml>.n{flex-shrink:0}   /* a label stays on one line; the fact wraps on the right */
.pg-xmas .x-room{gap:14px}
.pg-xmas .x-enq{max-width:820px;margin-left:auto;margin-right:auto}
.pg-xmas .x-vf{width:100%;text-align:left}
.pg-xmas .x-vf iframe{width:100%;height:460px;border:0;background:var(--paper)}
@media (max-width:899.98px){
  .pg-xmas .x-run{grid-template-columns:1fr 1fr}
  .pg-xmas .x-run span:nth-child(2),.pg-xmas .x-run span:nth-child(3){display:none}
}
@media (max-width:639.98px){
  .pg-xmas .x-h1 .m1{font-size:12.6vw}   /* nine letters must fit 390px; never under 24px */
  .pg-xmas .x-tabs{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;border-bottom:0}
  .pg-xmas .x-tabs button{text-align:center}
  .pg-xmas .x-tabs button:not([aria-selected="true"]){border-bottom-color:var(--hair)}
}
.pg-xmas .intro.c{justify-items:center;text-align:center}

/* ==== events-pack/index.html ==== */
/* Events pack: the masthead cover, eight chapters that open underneath their row (events-pack.js), the three food tabs */
.pg-pack .pk-cover{padding-top:clamp(24px,3vw,40px)}
.pg-pack .pk-mast img{width:100%;height:auto}
.pk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pg-pack .pk-date{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;column-gap:var(--gutter);margin:clamp(14px,1.8vw,24px) 0;padding:12px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.pg-pack .pk-date>:last-child{text-align:right}
.pg-pack .pk-date em{font-family:var(--affairs);font-weight:400;text-transform:none;letter-spacing:0;color:var(--title)}
.pg-pack .pk-intro{margin:var(--inside) 0 12px}
/* the chapter rows: number · title · italic line · Open ↓ */
.pg-pack .pk-list{border-bottom:1px solid var(--hairline)}
.pg-pack .pk-ch{border-top:1px solid var(--hair)}
.pg-pack .pk-h{font:inherit}
.pg-pack .pk-row{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:clamp(40px,5vw,72px) minmax(0,1fr) auto;align-items:center;column-gap:var(--gutter);width:100%;padding:clamp(14px,1.6vw,22px) 0}
.pg-pack .pk-row:focus-visible,.pg-pack .pk-tab:focus-visible{outline:2px solid var(--spritz);outline-offset:2px}
.pg-pack .pk-n{color:var(--head)}
.pg-pack .pk-t{display:grid;gap:6px}
.pg-pack .pk-row .m3,.pg-pack .pk-tt{color:var(--title);transition:color var(--t-ink) var(--ease-ink)}
.pg-pack .pk-row:hover .m3,.pg-pack [data-open="true"] .pk-row .m3{color:var(--head)}
.pg-pack [data-open="true"] .pk-plus,.pg-pack [data-open="false"] .pk-minus,.pk-pr{display:none}
.fx .pg-pack [data-open="false"] .pk-body{display:none}
.pg-pack .pk-body{display:grid;row-gap:var(--band);padding:8px 0 var(--band)}
/* columns inside a chapter (a grid, never multi-column: columns froze Chromium at ~920px) */
.pg-pack .pk-cols2,.pg-pack .pk-3{display:grid;gap:var(--inside) clamp(24px,4vw,64px);align-items:start}
.pg-pack .pk-cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-pack .pk-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-pack .frame,.pg-pack .frame .pk-cols2,.pg-pack .intro>.ph{width:100%}
.pg-pack .pk-col{display:grid;gap:var(--inside);align-content:start}
.pg-pack .pk-m{display:grid;gap:6px;width:100%}
.pg-pack .pk-m span.a4{white-space:nowrap}
/* how it works: seven numbered steps */
.pg-pack .pk-steps{list-style:none;padding:0;border-bottom:1px solid var(--hair)}
.pg-pack .pk-steps li{display:grid;grid-template-columns:clamp(64px,10vw,148px) minmax(0,1fr);column-gap:var(--gutter);align-items:baseline;padding:var(--gutter) 0;border-top:1px solid var(--hair)}
/* the three ways to feed the room */
.pg-pack .pk-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
.pg-pack .pk-tab{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:8px;align-content:start;padding:clamp(18px,2.2vw,28px) 0;border-top:2px solid var(--hair)}
.pg-pack .pk-tab[aria-selected="true"]{border-top-color:var(--bright)}
.pg-pack .pk-tab:hover .pk-tt,.pg-pack .pk-tab[aria-selected="true"] .pk-tt{color:var(--bright)}
.pg-pack .pk-tab[aria-selected="true"] .pk-off,.pg-pack .pk-tab[aria-selected="false"] .pk-on{display:none}
.pg-pack .pk-card{align-self:start}
@media (max-width:899.98px){
  .pg-pack .pk-date{grid-template-columns:minmax(0,1fr);row-gap:6px;text-align:center}
  .pg-pack .pk-date>:last-child{text-align:center}
  .pg-pack .pk-cols2,.pg-pack .pk-3,.pg-pack .pk-tabs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:639.98px){.pg-pack .pk-row{grid-template-columns:34px minmax(0,1fr) auto;column-gap:10px}}
@media print{.pk-pr{display:grid;gap:12px}}

/* ==== weddings/index.html ==== */
/* Weddings · Corporate · Private dining share one landing-page template (these rules also serve .pg-corporate and .pg-private) */
:is(.pg-weddings,.pg-corporate,.pg-private) .ev-hero{padding-top:clamp(32px,4vw,64px)}
:is(.pg-weddings,.pg-corporate,.pg-private) .ev-hero .ph.full{margin-top:var(--inside)}
/* the enquiry card: the VenueFlow form, then the pack */
:is(.pg-weddings,.pg-corporate,.pg-private) .ev-enq{display:grid;gap:24px;align-self:start}
:is(.pg-weddings,.pg-corporate,.pg-private) .ev-enq iframe{width:100%;height:460px;border:0}
:is(.pg-weddings,.pg-corporate,.pg-private) .ev-pack{display:flex;flex-wrap:wrap;gap:4px 28px;padding-top:16px}
/* formats: Marsha category heads in two columns, a hairline above each */
:is(.pg-weddings,.pg-corporate,.pg-private) .ev-fmts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);border-bottom:1px solid var(--hair)}
:is(.pg-weddings,.pg-corporate,.pg-private) .ev-fmts>div{display:grid;gap:10px;align-content:start;padding:24px 0 28px}
@media (max-width:639.98px){:is(.pg-weddings,.pg-corporate,.pg-private) .ev-fmts{grid-template-columns:1fr}}
/* the food card */
:is(.pg-weddings,.pg-corporate,.pg-private) .ev-card .lines-list{max-width:440px}
/* 01's photograph: four columns, to the right edge */
@media (min-width:900px){:is(.pg-weddings,.pg-corporate,.pg-private) .ev-why{grid-column:9/13}}

/* ==== corporate-events/index.html ==== */
/* Corporate uses the shared Weddings · Corporate template rules above */

/* ==== private-dining/index.html ==== */
/* Private dining uses the shared Weddings · Corporate template rules above */

/* ==== aperitivo/index.html ==== */
/* Aperitivo · Negroni Bar · Pasta fresca · Before the stadium share one dining landing-page template (.pg-dine) */
.pg-dine .dine-hero{padding-top:clamp(32px,4vw,64px)}
.pg-dine .dine-hero .ph.full{margin-top:var(--inside)}
/* 02 · on the board: one centred printed card */
.pg-dine .dine-board{width:100%;max-width:720px;margin:0 auto;gap:40px}
.pg-dine .dine-cat{display:grid;gap:12px;justify-items:center;width:100%}
.pg-dine .dine-cat>.a4{max-width:44ch;text-align:center}
.pg-dine .dine-cat>.lines-list{margin-top:4px}
@media (max-width:639.98px){.pg-dine .dine-board{gap:32px}.pg-dine .dine-board .lines-list .ml{font-size:var(--a4)}}
.pg-dine .dine-board-head{justify-items:center}
/* phones: a bled photograph runs edge to edge */
@media (max-width:899.98px){.pg-dine .ph.bleed-l{margin-right:calc(-1 * var(--margin))}.pg-dine .ph.bleed-r{margin-left:calc(-1 * var(--margin))}}
/* a title holding "Christchurch" (12 letters) can't fit 390px at the 44px M2 floor: on phones these pages step the title and the closing sign down to M3 */
@media (max-width:639.98px){.pg-dine.dine-long .m2{font-size:var(--m3)}}

/* ==== fresh-pasta/index.html ==== */
/* the pasta card: each menu line carries the page's own note beneath it */
.pg-pasta .dine-dishes{gap:18px}
.pg-pasta .dine-dishes>div{display:grid;gap:2px}
.pg-pasta .dine-dishes .a4{text-align:left;max-width:none}