/* THE TYPED MENU'S STYLE (23 Sep 2026; typed.js explains why it exists). The printed menu, per the brand deck: Sandstone
   paper, a Neon Orange rule and site logo, IBM Plex Mono copy (visual-identity skill §7, slides 97-98). Plex Mono is OFL and
   may be embedded (§2.6) - the one brand face that can be; it is fetched from Google Fonts here, so a page that loads this
   file loads the face with it. Dish names are Title Case in the data and set in caps here (writing conventions 9A.7).
   Neon Orange as TEXT on Sandstone is 2.9:1 (§3) - so the orange is the RULE and the LOGO, never the copy; the copy is ink. */
/* IBM Plex Mono is self-hosted in layout.css on the website (build_website_dist.py) */
/* THE PRINTED CARD'S FRAME (Nuo, 25 Sep 2026: "for all the menus, can we show rounded orange frames just like our printed
   menus?" - the Timmy Nippers card: a thick Neon Orange border, a small radius outside and a larger one inside, the paper a
   warm off-white, the logo in BLACK on the paper). Interviewed: the frame as printed, about 5% of the card's width (36px on a
   desktop, 16px on a phone); the logo black; warm paper; the same frame on the /menu/ panel, every site page's Menu expander
   and the dish dialog. The tab row and the section rules keep their orange (the tabs are the web's own control; the print has
   one menu per card) - Nuo did not ask for black rules. Built as a padding-box: the orange is the .tm's own background and the
   paper is an inner box, so the corner radii nest the way the print's do. */
.tm{--tm-mono:"IBM Plex Mono Margot","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;--tm-orange:#F36F23;--tm-paper:#F5EFE7;--tm-frame:clamp(16px,5vw,36px);font-family:var(--tm-mono);color:var(--ink,#000);background:var(--tm-orange);border:0;border-radius:calc(var(--tm-frame) * .45);padding:var(--tm-frame);max-width:860px;margin:0 auto}
.tm-paper{background:var(--tm-paper);border-radius:calc(var(--tm-frame) * .75);padding:32px 36px 28px}
.tm-head{display:flex;justify-content:center;align-items:center;min-height:56px;margin-bottom:18px}   /* 56: room for the two script marks, capped at 48px by data-maxh (Larry's drew 68px into a 32px head - Nuo, 25 Sep 2026) */
.tm-mark{display:block;line-height:0}
.tm-mark{max-width:100%}
.tm-mark canvas{display:block;max-height:48px;width:auto;max-width:100%!important;height:auto!important;object-fit:contain}   /* audit 7 Nov 2026: Audrey Green's wide mark ran 10px past a 320px screen */
.tm-name{font-family:var(--head,"Graphik","Inter",Arial,sans-serif);text-transform:uppercase;letter-spacing:-0.02em;font-size:24px;color:var(--ink,#000)}   /* black, as the logo is printed */
.tm-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;border-top:1px solid var(--tm-orange);border-bottom:1px solid var(--tm-orange);padding:10px 0;margin-bottom:26px}
.tm-tab{font-family:var(--tm-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:none;border:0;padding:6px 2px;color:#5a5754;cursor:pointer;border-bottom:2px solid transparent}
.tm-tab.on{color:var(--ink,#000);border-bottom-color:var(--tm-orange)}
.tm .tm-sec,section.tm-sec{margin-bottom:28px;padding:0}   /* padding:0 - a .tm-sec is a <section>, and every host page's stylesheet gives section{padding:0 var(--pad)}: 40px of dead margin each side INSIDE the card, which is why the Bondi wrapped with room to spare (found 25 Sep 2026). The card's own margin is .tm-paper's */
.tm-l{font-family:var(--head,"Graphik","Inter",Arial,sans-serif);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:13px;margin:0 0 12px;text-align:center}
.tm-note{font-size:12px;color:#5a5754;text-align:center;margin:-6px 0 12px;font-style:italic}
.tm-list{display:grid;gap:10px}
.tm-dish{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n p" "d d";column-gap:18px;align-items:start}   /* the description spans BOTH columns (Nuo, 25 Sep 2026: "there is space to put sourdough at the end of the line above"): the price sits beside the name only, so the description has the card's full width - 130px more at 860px, four of nine Savoury dishes back to one line */
.tm-n{grid-area:n;font-size:13px;letter-spacing:.04em;text-transform:uppercase;line-height:1.35}
.tm-n i{font-style:normal;font-size:10px;letter-spacing:.06em;margin-left:8px;color:#5a5754;vertical-align:1px}
.tm-d{grid-area:d;font-size:12.5px;line-height:1.45;color:#3f3c39}
.tm-p{grid-area:p;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:1px}
.tm-foot{font-size:11px;line-height:1.5;color:#5a5754;text-align:center;margin:8px 0 0;border-top:1px solid var(--tm-orange);padding-top:14px}
@media (max-width:860px){.tm-paper{padding:22px 16px 20px}.tm-tabs{gap:4px 12px}.tm-dish{column-gap:12px}}

/* the dish link and its dialog (23 Sep 2026; typed.js openDish) */
.tm-open{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:3px 0;margin:-3px 0;cursor:pointer;text-align:left}   /* no rule under the name (Nuo, 25 Sep 2026: "get rid of all the lines under the dish names! it's enough that the font colour changes when the mouse hovers") */
@media (hover:hover){.tm-open:hover{color:var(--tm-orange)}}
.tm-dlg{position:fixed;inset:0;margin:auto;border:0;padding:clamp(12px,3vw,24px);background:#F36F23;border-radius:12px;color:var(--ink,#000);width:min(760px,94vw);max-height:92vh;max-height:92dvh;overflow:auto;font-family:var(--tm-mono,"IBM Plex Mono",monospace)}   /* the card's orange frame, thinner: the dialog is a smaller card (25 Sep 2026) */
.tm-dlg::backdrop{background:rgba(10,8,8,.6)}
.tm-x{position:absolute;right:calc(clamp(12px,3vw,24px) + 6px);top:calc(clamp(12px,3vw,24px) + 4px);width:40px;height:40px;border:0;background:none;font:inherit;font-size:26px;cursor:pointer;color:var(--ink,#000);z-index:2}
.tm-dbody{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#F5EFE7;border-radius:14px;overflow:hidden}
.tm-pic{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.tm-tile{display:grid;place-items:center;background:#F5EFE7;border-right:1px solid #F36F23;padding:32px;text-align:center}
.tm-tile span{font-family:var(--head,"Graphik","Inter",Arial,sans-serif);text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(24px,3vw,40px);line-height:1;color:var(--ink,#000)}   /* black on the paper, like the logo (25 Sep 2026) */
.tm-txt{padding:36px 32px 28px}
.tm-dn{font-family:var(--head,"Graphik","Inter",Arial,sans-serif);font-weight:400;text-transform:uppercase;letter-spacing:-0.02em;font-size:22px;line-height:1.05;margin:0 0 12px}
.tm-dn i{font-style:normal;font-family:var(--tm-mono,monospace);font-size:11px;letter-spacing:.06em;margin-left:8px;color:#5a5754;vertical-align:4px}
.tm-dd{font-size:13px;line-height:1.5;color:#3f3c39;margin:0 0 18px}
.tm-row{display:grid;grid-template-columns:96px 1fr;gap:12px;font-size:12.5px;line-height:1.5;padding:8px 0;border-top:1px solid rgba(0,0,0,.12)}
.tm-row .tm-k{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:#5a5754;padding-top:2px}
.tm-txt .tm-foot{text-align:left;margin-top:18px}
@media (max-width:860px){.tm-dbody{grid-template-columns:1fr}.tm-pic{aspect-ratio:4/3}.tm-tile{border-right:0;border-bottom:1px solid #F36F23}.tm-txt{padding:22px 18px 20px}}

/* an ingredient or a bracketed note is never split over two lines (typed.js descHtml, 27 Sep 2026) */
.tm-d .nw,.tm-dd .nw{white-space:nowrap}

/* the ingredients: one to a line, folded to three lines (typed.js ingHtml, 27 Sep 2026) */
.tm-il{list-style:none;margin:0;padding:0}
.tm-il li{margin:0 0 2px}
.tm-il.folded{max-height:calc(3 * 1.5em + 4px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.tm-more{margin-top:6px;padding:4px 0;background:none;border:0;border-bottom:1px solid currentColor;font:inherit;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#3f3c39;cursor:pointer}
.tm-daisy{display:block;height:36px;width:auto}   /* the DAISY. wordmark where a place has no mark of its own: sized by height (the logo rule), under the 48px cap */

/* THE DISH CARD KEEPS ITS TWO COLUMNS (Nuo, 27 Sep 2026: "fix these" - the Marble Arch dishes with no photograph). A 1fr column
   cannot shrink below its longest unbreakable content, so a nowrap ingredient or a big one-word name widened one side and
   squeezed the other until the details ran off the card. Both columns are minmax(0, ...) now; with no photograph the name tile
   takes two fifths, sized down so a long name wraps inside it, and the details three fifths. Phone: stacked, the tile short. */
.tm-dbody{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tm-dbody.nopic{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.tm-tile{min-width:0}
.tm-dbody.nopic .tm-tile{aspect-ratio:auto;align-self:stretch}   /* the tile runs the card's full height, so its rule does too */
.tm-dbody.nopic .tm-tile span{font-size:clamp(20px,2.4vw,30px);overflow-wrap:anywhere;hyphens:auto}
.tm-txt{min-width:0}
.tm-il li{overflow-wrap:anywhere}
@media (max-width:860px){.tm-dbody,.tm-dbody.nopic{grid-template-columns:minmax(0,1fr)}.tm-dbody.nopic .tm-tile{min-height:120px;padding:22px;align-self:auto}}

/* the photograph runs the card's full height (Nuo, 27 Sep 2026: "for dish cards, remove the empty space below image"): a 4:5 picture
   beside a taller details column left a band of paper under it; it now stretches to the row and crops (object-fit cover). Phone
   unchanged: stacked, 4:3. */
@media (min-width:861px){.tm-dbody:not(.nopic) .tm-pic{aspect-ratio:auto;height:100%;min-height:100%;align-self:stretch}}

/* THE COCKTAIL DECK'S PILL (3 Oct 2026; typed.js deckPill): at the top of Larry's and Ziggy's typed Cocktails list, the way back
   into the full-screen deck after it has been closed. The deck's web button: a 2px outline in the menu's Neon Orange with black
   text (slide 79: outline, text in the accent or black; black for the 2.9:1 that orange text would give on paper). */
.tm-deck{margin:0 0 18px;text-align:center}
.tm-deckbtn{font-family:var(--head,"Graphik","Inter",Arial,sans-serif);font-size:14px;letter-spacing:-0.01em;padding:12px 22px;border:2px solid var(--tm-orange,#F36F23);border-radius:999px;background:transparent;color:#000;cursor:pointer;transition:border-color .2s,color .2s}
.tm-deckbtn:hover{border-color:#000}

/* one menu: no tab and no second rule; the rule under the name stays (typed.js, Nuo 4 Oct 2026) */
.tm-tabs.one{border-bottom:0;padding:0;min-height:0}
/* no film mark on a dish's name: the dish card shows no film (Georgia's video review via Nuo, 4 Nov 2026 ('All of it'); typed.js) */
.tm-open.has-film::after{content:none!important;display:none!important}

/* THE DISH CARD'S CLOSE (Nuo, 6 Nov 2026, 19:05: "do not show the box around the close button, make the X more visible especially on
   dark background"): no border, background, radius, shadow box or focus ring when tapped (a keyboard still gets an underline); a white,
   larger X with a dark halo, so it reads on a dark photograph, a light one and the card's cream alike */
html body .tm-x{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;outline:none!important;-webkit-tap-highlight-color:transparent;
  color:#FFFFFF!important;font-size:34px!important;line-height:40px;font-weight:400;text-shadow:0 0 1px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8),0 1px 10px rgba(0,0,0,.55);padding:0!important}
html body .tm-x:focus{outline:none!important;box-shadow:none!important}
@media (hover:hover){html body .tm-x:focus-visible{text-decoration:underline;text-underline-offset:4px}}
/* THE DECK LINK AND THE FOOT NOTE ON THE SHEET'S AXIS (Nuo, 7 Nov 2026: "centre the link for cocktails at Larry's"): layout.css caps every
   p in #app at 66ch, which left both centred in a column narrower than the sheet - off its middle. Both are one short centred line. */
.tm p.tm-deck,.tm p.tm-foot{max-width:none}