/* Local Table: an illustrative laneway café in Melbourne. An example website by Matt's Websites, October 2026.
   Hand written for this site; every class starts with lt-. The pages are generated by build.py.

   Type sizes follow (v - 1) x 1.2 x var(--vw) + 16 px, where --vw is 1vw capped at 16.8 px on desktop and 1vh
   capped at 9 px on phones. Desktop lengths written calc(N * var(--u)) are N px at 1440 wide and grow or shrink
   with the content width (1376 px at 1440, at most 1680; wider screens centre it). As the reference's, the header and
   the home hero photo keep 32 px side gutters at any width (Boss, 21 October 2026: too much space beside the photo).
   Positions are the reference's, measured at 1440 x 900 and 390 x 844 (reference/spec.json, measure-2026-10-19);
   the desktop layout starts at 1024 px. */

@font-face{font-family:"LT Fanwood";src:url(/static/lt-fanwood-italic-4f12d46bd756.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"LT Fanwood";src:url(/static/lt-fanwood-2efc92b03419.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"LT Libertinus";src:url(/static/lt-libertinus-cf7cd547140f.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"LT Libertinus";src:url(/static/lt-libertinus-italic-3ab5b3442726.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"LT Grotesk";src:url(/static/lt-grotesk-1abf7df5fdb8.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"LT Mono";src:url(/static/lt-mono-0268a3ba9acd.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}

:root{
  --paper:#f1ebd8;--ink:#5f1e1b;--ink-soft:rgba(95,30,27,.72);--red:#bf3933;--red-deep:#b53530;
  --brick:#60201c;--cream:#f2ecd9;--chalk:#e5dbc8;--card:#fefaf1;
  --f-disp:"LT Fanwood","Iowan Old Style",Palatino,Georgia,serif;
  --f-text:"LT Libertinus","Iowan Old Style",Georgia,serif;
  --f-grot:"LT Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"LT Mono","Courier New",Courier,monospace;
  --vw:min(1vw,16.8px);
  --u:calc(min(100vw - 64px,1680px) / 1376);
  --fs-h1:calc(16px + 2.22 * var(--vw));
  --fs-h2:calc(16px + 1.389 * var(--vw));
  --fs-h3:calc(16px + .84 * var(--vw));
  --fs-lead:calc(16px + .552 * var(--vw));
  --fs-th:calc(16px + .3 * var(--vw));
  --fs-kick:calc(16px - .06 * var(--vw));
  --fs-nav:calc(16px - .216 * var(--vw));
  --fs-btn:calc(16px - .15 * var(--vw));
  --ease-out:cubic-bezier(.33,1,.68,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-burger:cubic-bezier(.2,.6,.3,1);
  --paper-tile:url(/static/paper-tile-c38e5bf24090.webp);
  color-scheme:light;
}

/* ---------------------------------------------------------------- base */
html{background:var(--paper)}
/* The paper scrolls with the page at every width (Boss, 23 October 2026; it was fixed behind the content on desktop). */
body.lt{margin:0;color:var(--ink);font:400 16px/1.32 var(--f-text);letter-spacing:-.01em;font-kerning:normal;font-synthesis:none;background:var(--paper) var(--paper-tile) 0 0/640px 640px repeat}
:where(.lt) a{color:inherit;text-decoration:none}
:where(.lt) :where(p,h1,h2,h3,dl,dd,figure,blockquote,ul){margin:0}
:where(.lt) ul{padding:0;list-style:none}
:where(.lt) :where(h1,h2,h3){font-weight:400}
.lt :focus-visible{outline:2px solid currentColor;outline-offset:3px}
.lt-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lt-nw{white-space:nowrap}
.lt-wrap{width:min(100% - 64px,1680px);margin-inline:auto}
.lt-grid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:11px}
.lt img{max-width:none}
.lt picture{display:block}

/* type roles */
/* Every heading, paragraph, list item and caption wraps "pretty", so no word stands alone on a last line (review
   round 1: "May.", "out." and "from…" did at some widths). The longhand leaves any nowrap rule alone, and :where adds
   no specificity. The article headings and the live plan line balance instead (pretty left "pouring" and "minutes."
   alone there). */
:where(.lt) :where(p,h1,h2,h3,h4,li,figcaption,blockquote,dt,dd){text-wrap-style:pretty}
.lt-h1{font:italic 400 var(--fs-h1)/.926 var(--f-disp);letter-spacing:0}
.lt-h3{font:italic 400 var(--fs-h3)/.972 var(--f-disp);letter-spacing:0}
.lt-statement{font:400 var(--fs-h2)/.955 var(--f-disp);letter-spacing:0}
.lt-statement em{font-style:italic}
.lt-lead{font:400 var(--fs-lead)/1.32 var(--f-disp);letter-spacing:-.01em}
.lt-label-i{font:italic 400 var(--fs-th)/1.32 var(--f-disp);letter-spacing:-.01em}
.lt-kick{font:400 var(--fs-kick)/1.2 var(--f-grot);text-transform:uppercase;letter-spacing:-.025em}
.lt-note{font:400 12px/15.84px var(--f-mono);letter-spacing:0}
.lt-label{font:400 10.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.02em}

/* ---------------------------------------------------------------- notice bar */
.lt-bar{position:relative;z-index:40;background:var(--red-deep);color:var(--cream);text-align:center}
.lt-bar-t{padding:8.81px 48px;font:400 13.58px/13.58px var(--f-text);letter-spacing:-.01em}
.lt-bar-more{white-space:nowrap}
.lt-bar a{display:inline-block;padding:15.3px 0;margin:-15.3px 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.lt-bar-x{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0 0 12.8px;border:0;background:none;color:inherit;font:400 16px/1 var(--f-text);cursor:pointer}
.lt-bar-x:focus-visible{outline:0}
.lt-bar-x:focus-visible span{outline:2px solid currentColor;outline-offset:3px}
html.lt-bar-closed .lt-bar{display:none}
html:not(.lt-js) .lt-bar-x{display:none}

/* ---------------------------------------------------------------- header (not sticky, as the reference's) */
.lt-head{position:relative;z-index:35;display:flex;align-items:center;height:88.5px;padding:5.5px 32px 0}
/* With the notice closed the header loses its 5.6 px top offset as well as the bar (measured on desktop). */
@media (min-width:1024px){html.lt-bar-closed .lt-head{height:82.9px;padding-top:0}}
.lt-brand{display:block;flex:none;width:205.8px;height:58.1px;margin-top:3.9px}
.lt-word{display:block;width:100%;height:100%;fill:currentColor}
.lt-tag{flex:none;margin-left:12px;font:italic 400 12.6px/15px var(--f-disp);letter-spacing:0;white-space:nowrap}
.lt-nav{display:flex;gap:25.9px;margin-left:27.5px}
.lt-nav a,.lt-util a{display:block;font:400 var(--fs-nav)/19.6px var(--f-mono);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.lt-nav a[aria-current],.lt-util a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.lt-util{display:flex;gap:34px;margin-left:auto}
.lt-burger,.lt-nomenu,.lt-menu{display:none}

/* ---------------------------------------------------------------- buttons, rules and drawings */
.lt-act{display:block}
.lt-btn{display:inline-flex;align-items:center;vertical-align:top;min-height:44px;margin:-11.5px 0;padding:0;border:0;background:none;color:var(--cream);font:inherit;cursor:pointer}
.lt-btn span{display:block;height:21px;padding:0 5px;background:var(--red);font:400 var(--fs-btn)/21px var(--f-mono);letter-spacing:0;text-transform:uppercase;white-space:nowrap;transition:background-color .5s ease}
.lt-btn span .lt-sr{padding:0}
.lt-btn:hover span{background:var(--ink)}
.lt-btn:focus-visible{outline:0}
.lt-btn:focus-visible>span{outline:2px solid var(--ink);outline-offset:3px}
.lt-btn:disabled{cursor:default}
.lt-btn:disabled span{background:var(--ink-soft)}
.lt-rule{display:block;height:20.9px;margin:0;border:0;background:center/100% 100% no-repeat}
.lt-rule-a{background-image:url(/static/rule-a-1400-1ada68414996.svg)}
.lt-rule-b{background-image:url(/static/rule-b-1400-7442ffbbe111.svg)}
.lt-rule-c{background-image:url(/static/rule-c-1400-76b78159f72b.svg)}
.lt-rule-d{background-image:url(/static/rule-d-1400-01957d79dc17.svg)}
.lt-rule-e{background-image:url(/static/rule-e-1400-13c8f63cd6b5.svg)}
.lt-draw{display:block}
.lt-draw img{display:block;width:100%;height:auto}
/* The hand drawn vertical rule: a 24 x 800 tile of page ink at .35, as the reference's. */
.lt-vrule{display:block;width:24px;background:url(/static/vrule-a-bcfbc3838dcd.svg) center top/24px 800px repeat-y;opacity:.35;pointer-events:none}
.lt-vrule-2,.lt-book-v{background-image:url(/static/vrule-b-160c95501a74.svg)}
.lt-badge{position:absolute;top:10px;right:10px;z-index:3;padding:0 5px;background:var(--red);color:#fff;font:400 10.8px/19px var(--f-mono);letter-spacing:0;text-transform:uppercase;white-space:nowrap}

/* ---------------------------------------------------------------- photos that change in place */
.lt-show{position:relative}
.lt-slide{position:absolute;inset:0;display:none}
.lt-slide.is-on,.lt-slide.is-prep{display:block}
.lt-slide.is-prep{visibility:hidden}
.lt-slide picture,.lt-slide img{display:block;width:100%;height:100%}
.lt-slide img{object-fit:cover}
.lt-slide.lt-in{animation:lt-in .8s var(--ease-out) both}
@keyframes lt-in{from{opacity:0}}

/* ---------------------------------------------------------------- home: hero and intro
   Boss, 20 October 2026: a heading is never half cut off by the bottom of the screen; here it is meant to show under
   the photo. So the photo is the reference's 695 px at 1440 wide (growing with its width, which keeps 32 px gutters
   past the 1680 px content cap, as the reference's), but never taller than leaves room under it for the
   gap, the two line heading and its descenders (--lt-top is the notice bar and header above it). A window under
   603 px tall would squeeze it below 320 px, so there the photo fills the window instead and the heading starts
   wholly below the fold. Room for the reader drawing beside the heading as well was tried on 21 October 2026; Boss
   preferred this bigger photo, though the drawing's foot can then sit below the fold. */
.lt-hero-s{padding:0 0 calc(16 * var(--u))}
.lt-hero{--lt-top:119.7px;width:calc(100% - 64px);height:min(calc((100vw - 64px) * 695 / 1376),calc(100vh - var(--lt-top) - 24 * var(--u) - 2.2 * var(--fs-h1) - 16px));margin:0 auto}
@media (min-width:1024px){
  html.lt-bar-closed .lt-hero{--lt-top:82.9px}
  /* On short screens the photo is a wide strip: keep the lids of the two iced coffees (slide 2) and the
     barista's head (slide 3) in it. */
  .lt-hero .lt-slide:nth-child(2) img{object-position:50% 22%}
  .lt-hero .lt-slide:nth-child(3) img{object-position:50% 30%}
}
@media (min-width:1024px) and (max-height:602.98px){.lt-hero{height:calc(100vh - var(--lt-top))}}
.lt-intro{padding-bottom:calc(24.7 * var(--u))}
.lt-intro-row{align-items:start}
.lt-intro-a{grid-column:1/14;display:flex;align-items:flex-start}
.lt-intro-a .lt-h1{flex:none;margin-top:calc(8 * var(--u))}
/* Boss, 21 October 2026 ("move it up a bit"): the top of the window in the drawing lines up with the top of the heading.
   The same day the drawing grew wide (reader-wide, 310 x 172 units): at 1440 it is 297.6 px wide (0.96 px a unit, the
   other drawings' line weight) and the top margin keeps the window on the heading's top line. Round 3 (22 October
   2026): the arch stands 3 units taller, so the drawing sits 3 units lower, and the bottom margin keeps at least 20 px
   of paper between the floor and the hand drawn rule below at every width (the row is 7.5 px taller than the square
   drawing made it at 1440; at 1024 to 1300 the px floor holds the gap as the drawing shrinks). The auto margins centre
   it between the heading and the text; the paddings are its least gaps and keep the two ink gaps about equal (the
   heading's italic box runs past its ink on the left, the text starts a column gap past the box on the right): 45 and
   47.5 px at 1440. Under 1440 px the heading (its type follows the viewport) takes more of the row and the drawing
   shrinks; the paddings narrow with the viewport so it keeps at least 0.62 px a unit (192 px at 1024, ink gaps about
   20 px), and --lt-dt lowers it by up to 1.2 px there, as the heading's type sits relatively lower in its box.
   Round 4 (22 October 2026): Chrome places the image on a whole pixel, and the drawing's three boils put the window's
   top within 0.6 px of each other, the still's lowest; the top margin is 0.3 u less (so at 1440 and 1100 the box lands
   a pixel higher) and the drawing sits a quarter unit lower in its box, so the still and the boils sit on the heading's
   top line; the bottom margin takes the 0.3 back, so the row and the rule below are where they were. Round 5 (22 October
   2026): the bottom margin's px floor 1.5 px more, so the floor keeps 20 px from the rule in all three boils at 1240 to
   1366 too (the second boil's floor dips lowest; 1 px left 19.5 at 1280 and 1300, edge to edge at half the ink); the
   floor now holds up to about 1534 px, so the rule is 1.04 px lower at 1440 and unmoved from 1540 up. */
.lt-intro-draw{--lt-dt:max(0px,4.78px - .353vw);flex:0 1 calc(348.6 * var(--u));min-width:0;margin:calc(4.77 * var(--u) + var(--lt-dt)) auto max(calc(15.56 * var(--u) - var(--lt-dt)),calc(16.3px + .3 * var(--u)));padding:0 clamp(4.45px,4.219vw - 38.75px,22 * var(--u)) 0 clamp(14.55px,3.474vw - 21.02px,29 * var(--u))}
.lt-intro-b{grid-column:14/-1;padding-top:calc(10 * var(--u))}
.lt-intro .lt-act{margin-top:calc(35.1 * var(--u))}
.lt-intro .lt-rule{margin-top:calc(-5.1 * var(--u))}

/* ---------------------------------------------------------------- the priced grid (home and menu.html)
   Intro column at x 32; the tables in two columns at x 552.1 and 1014.5 on shared rows, so each second table starts
   51.6 px under the taller of the two above it (the reference's 2 x 2 grid). */
.lt-mg{align-items:start}
.lt-mg-intro{grid-column:1/7}
.lt-mg-tables{grid-column:10/-1;display:grid;grid-template-columns:repeat(15,minmax(0,1fr));column-gap:11px;row-gap:calc(51.6 * var(--u));align-items:start}
.lt-mg-t{grid-row:var(--r)}
.lt-mg-c1{grid-column:1/7}
.lt-mg-c2{grid-column:9/15}
.lt-mg-lead{margin-top:calc(12.9 * var(--u))}
.lt-mg-photo{aspect-ratio:335.8/444.3}
.lt-mg-intro .lt-note{margin-top:12px}
.lt-mg-intro .lt-note+.lt-note{margin-top:10px}
.lt-mg-home .lt-mg-intro{padding:calc(50 * var(--u)) 0 calc(93.4 * var(--u))}
.lt-mg-home .lt-mg-photo{margin-top:calc(32 * var(--u))}
.lt-mg-home .lt-mg-tables{padding-top:calc(42 * var(--u))}
/* The stacked cups sit just under the right hand second table (1.9 px, measured), crossing the closing rule.
   23 October 2026: the bottom margin makes the cups reserve their room, so when the tables run longer than the photo
   column (narrow desktops, about 1024 to 1330 px) the section grows instead of the courtyard photo covering the cups.
   Their ink then ends at most 12.4 px (at 1440) below the rule, 15 px clear of the photo, at every width; at 1440 and
   wider nothing moves. */
.lt-mg-draw{grid-column:9/15;grid-row:3;width:calc(194 * var(--u));margin:calc(-49.7 * var(--u)) 0 calc(22.6 * var(--u) - 20.9px) calc(186.4 * var(--u))}
.lt-mt{padding-bottom:calc(26.2 * var(--u))}
.lt-mg-home+.lt-rule{margin-top:calc(-45.1 * var(--u))}
.lt-mt-full{padding:calc(66 * var(--u)) 0 calc(120 * var(--u))}
/* menu.html: the photo and its note travel with the long table columns (sticky, 32 px from the top). */
.lt-mg-full .lt-mg-intro{align-self:stretch}
.lt-mg-full .lt-mg-stick{position:sticky;top:32px}
.lt-mg-full .lt-mg-intro .lt-note:first-of-type{margin-top:14px}

.lt-prices{width:100%;border-collapse:collapse;border-spacing:0}
.lt-prices caption{padding:0 0 21px;text-align:left;font:italic 400 var(--fs-th)/1.32 var(--f-disp);letter-spacing:-.01em}
.lt-prices th,.lt-prices td{padding:0 0 10px;font-weight:400;text-align:left}
.lt-prices tr:last-child>*{padding-bottom:0}
.lt-prices tbody th{width:100%;vertical-align:top;font:400 16px/23px var(--f-grot);text-transform:uppercase;letter-spacing:-.025em}
/* Prices: mono in a shrink to fit column, centred on two line rows, as the reference's. Its prices all have the
   same number of characters, so its left aligned column ends flush; ours mix $8.50 and $24.00, so the column is
   right aligned (Copy spec 6), which keeps that flush edge and lines up the points (review round 1). 17 px matches
   the reference mono's ink at 16 (ledger). */
.lt-prices td{width:1%;padding-left:12px;vertical-align:middle;text-align:right;font:400 17px/23px var(--f-mono);letter-spacing:-.025em;white-space:nowrap}
.lt-prices tr:not(:last-child) td{padding-bottom:10px}
.lt-prices small{display:block;max-width:230px;padding-bottom:1.16px;font:400 12px/15.84px var(--f-mono);letter-spacing:0;text-transform:none}

/* ---------------------------------------------------------------- home: the courtyard (wide photo with text) */
.lt-court{padding:calc(1.5 * var(--u)) 0 calc(26.1 * var(--u))}
.lt-court-frame{position:relative;height:calc(557.1 * var(--u));overflow:hidden}
.lt-court-pic{position:absolute;inset:0}
.lt-court-pic picture,.lt-court-pic img{display:block;width:100%;height:100%}
.lt-court-pic img{object-fit:cover}
/* The parallax drift: the photo is 6% taller than its frame and moves 2% of the scroll (site.js). */
html.lt-js .lt-court-pic img{position:absolute;left:0;top:-3%;height:106%;will-change:transform}
/* The wash sits only behind the words (review round 1, 20 October 2026: the reference's band reads light and
   colourful), strongest under the paragraph and gone before the stair. Review round 2 (the brighter courtyard
   frame): smaller and lighter, it holds the cream small text at 5.4:1 or more against the brightest 1% of the
   photo behind it, and the title at 3.4:1 or more against the brightest 5%, 1024 to 1920 px wide, wherever the
   drift has the photo. Since 23 October 2026 (Boss chose the carnations, whose glass latte and saucer sit pale
   under the words): a little wider and deeper, holding the 16 px lines at 5.3:1 or more and the kicker and title
   at 5.7:1 or more against the brightest 1%, 1024 to 1920 px wide, at the drift's ends and middle. */
.lt-court-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 42% 72% at 19% 84%,rgba(0,0,0,.66) 0,rgba(0,0,0,.6) 45%,rgba(0,0,0,.28) 75%,transparent 100%)}
.lt-court-text{position:absolute;left:calc(34 * var(--u));bottom:calc(36.6 * var(--u));z-index:2;width:calc(500 * var(--u));color:var(--cream)}
.lt-court-h{font:italic 400 var(--fs-h2)/.955 var(--f-disp);letter-spacing:0}
.lt-court-k{margin-top:calc(14.6 * var(--u))}
.lt-court-p{margin-top:calc(11.8 * var(--u))}
.lt-court .lt-rule{margin-top:calc(35.6 * var(--u))}

/* ---------------------------------------------------------------- home: the long lunch feature */
.lt-feat{padding-bottom:calc(24.6 * var(--u))}
.lt-feat-row{align-items:start}
.lt-feat-pic{position:relative;grid-column:1/13;grid-row:1;aspect-ratio:682.5/678.8;overflow:hidden}
.lt-feat-pic picture,.lt-feat-pic img{display:block;width:100%;height:100%}
.lt-feat-pic img{object-fit:cover}
/* Drawings laid over photographs in pale ink, as the reference draws on its event photos (review round 1,
   20 October 2026): stills, clear of faces and of the words on a photo. Each drawing file is a 200 unit square
   with margins, so the boxes below are larger than the figures and the frames clip them (overflow:hidden). */
img.lt-over{position:absolute;z-index:1;display:block;height:auto;pointer-events:none}
.lt-feat-text{grid-column:14/21;grid-row:1;padding-top:calc(6.9 * var(--u))}
.lt-feat-h{margin-top:calc(68.6 * var(--u));font:italic 400 var(--fs-h1)/.926 var(--f-disp);letter-spacing:0}
.lt-feat-p{margin-top:calc(4.8 * var(--u))}
.lt-feat-act{margin-top:calc(25.2 * var(--u))}
.lt-feat-draw{grid-column:21/-1;grid-row:1;justify-self:center;width:calc(192 * var(--u));margin:calc(527.5 * var(--u)) 0 calc(-200 * var(--u))}
.lt-feat .lt-rule{margin-top:calc(76.2 * var(--u))}

/* ---------------------------------------------------------------- home: the take home strip */
.lt-strip-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;height:calc(73 * var(--u));padding-top:calc(4.2 * var(--u));box-sizing:border-box}
.lt-strip-head .lt-act{flex:none;margin-top:11.5px}
/* The reference clips the strip at the page gutters, so its fourth card ends exactly under the button's right edge
   (1408 at 1440). Ours ends there too (review round 3, 20 October 2026: it ran 5 px past, so the cut read as an
   overflow); the 5 px of room for focus rings is kept on the left and, by scroll padding, wherever a focused card
   scrolls into view. */
.lt-strip{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:-5px max(32px,50% - 840px) -5px calc(max(32px,50% - 840px) - 5px);padding:5px 5px 9px;scroll-padding-inline:5px}
.lt-strip::-webkit-scrollbar{display:none}
.lt-strip-list{display:flex;gap:calc(40 * var(--u));width:max-content}
.lt-card{flex:none;width:calc(339 * var(--u))}
.lt-card a{display:block}
.lt-card-pic{position:relative;display:block;aspect-ratio:1}
.lt-card-pic picture,.lt-card-pic img{display:block;width:100%;height:100%}
.lt-card-pic img{object-fit:cover}
.lt-hov,.lt-card-draw{position:absolute;inset:0}
.lt-hov img{opacity:0;transition:opacity .3s ease}
.lt-card-draw{z-index:2;width:100%;height:100%;opacity:0;transition:opacity .3s ease}
.lt-card a:hover .lt-hov img,.lt-card a:hover .lt-card-draw,.lt-card a:focus-visible .lt-hov img,.lt-card a:focus-visible .lt-card-draw{opacity:1}
.lt-card-t{display:block;margin-top:calc(14.4 * var(--u));text-align:center;font:400 var(--fs-kick)/1.2 var(--f-grot);text-transform:uppercase;letter-spacing:-.025em}
.lt-card-n{display:-webkit-box;margin:calc(2.6 * var(--u)) auto 0;max-width:calc(318 * var(--u));overflow:hidden;text-align:center;font:400 12px/15.84px var(--f-mono);letter-spacing:0;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.lt-strip-s>.lt-wrap:last-child .lt-rule{margin-top:calc(153 * var(--u))}
.lt-strip-s{padding-bottom:calc(145 * var(--u))}

/* ---------------------------------------------------------------- journal cards (home teaser, journal.html, mornings) */
.lt-jcard-pic{position:relative;display:block;overflow:hidden}
.lt-jcard-pic picture,.lt-jcard-pic img{display:block;width:100%;height:100%}
.lt-jcard-pic img{object-fit:cover}
.lt-jcard-pic .lt-hov img{transition:opacity .4s ease}
.lt-jcard:hover .lt-hov img,.lt-jf:hover .lt-hov img,.lt-jcard:focus-within .lt-hov img,.lt-jf:focus-within .lt-hov img{opacity:1}
.lt-jcard .lt-jcard-pic{aspect-ratio:437.8/583.8}
.lt-jcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:calc(10 * var(--u))}
.lt-jcard-h{font:italic 400 24px/24.48px var(--f-disp);letter-spacing:-.01em}
/* Title links keep their line but get a 44 px tall tap area. */
.lt-jcard-h a{display:inline-block;padding:12px 0;margin:-12px 0}
.lt-jcard-cat{flex:none;font:400 var(--fs-kick)/1.2 var(--f-grot);text-transform:uppercase;letter-spacing:-.025em}
.lt-jcard-p{margin-top:calc(12.5 * var(--u))}
.lt-jcard .lt-act,.lt-jf .lt-act,.lt-next .lt-act{margin-top:calc(12.8 * var(--u))}

/* ---------------------------------------------------------------- home: the café journal */
.lt-jt-row{position:relative;align-items:start;min-height:calc(818.6 * var(--u))}
.lt-jt-intro{grid-column:1/8;padding-top:calc(2.4 * var(--u))}
.lt-jt-p{margin-top:calc(15.7 * var(--u))}
.lt-jt-act{margin-top:calc(26.4 * var(--u))}
.lt-jt-draw{position:absolute;left:calc(173.4 * var(--u));top:calc(548.9 * var(--u));width:calc(220 * var(--u))}
.lt-jt-cards{grid-column:9/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(38 * var(--u))}

/* ---------------------------------------------------------------- page opener (menu.html) */
.lt-open{padding-top:calc(40 * var(--u))}
.lt-open-row{align-items:start}
.lt-open-a{grid-column:1/14}
.lt-open-a .lt-kick{margin-bottom:calc(11.8 * var(--u))}
.lt-open-b{grid-column:14/21;padding-top:calc(32 * var(--u))}
.lt-open-nok .lt-open-a .lt-h1{margin-top:calc(8 * var(--u))}
.lt-open-nok .lt-open-b{padding-top:calc(10 * var(--u))}
.lt-open-b .lt-act{margin-top:calc(35.8 * var(--u))}
.lt-open-draw{grid-column:21/-1;grid-row:2;justify-self:center;width:calc(194 * var(--u));margin-top:calc(-53 * var(--u))}
.lt-open+.lt-wrap{margin-top:calc(60 * var(--u))}
.lt-open-drawn+.lt-wrap{margin-top:calc(-54 * var(--u))}

/* ---------------------------------------------------------------- mornings.html (the reference's journal post) */
.lt-post-head{padding-top:calc(32 * var(--u))}
.lt-post-top{align-items:stretch}
.lt-post-a{position:relative;grid-column:1/12;display:flex;flex-direction:column}
.lt-post-a .lt-kick{font-size:12.5px;line-height:15.1px}
.lt-post-h1{margin-top:calc(39.5 * var(--u))}
.lt-post-draw{position:absolute;left:calc(444 * var(--u));top:calc(299.9 * var(--u));width:calc(192 * var(--u))}
.lt-post-intro{margin-top:auto;max-width:calc(566.3 * var(--u))}
.lt-post-intro p+p{margin-top:12.9px}
.lt-post-cover{grid-column:12/-1;justify-self:end;width:calc(722.4 * var(--u));aspect-ratio:722.4/716}
.lt-post-cover picture,.lt-post-cover img,.lt-pp-a img,.lt-pp-b img,.lt-post-one img{display:block;width:100%;height:100%;object-fit:cover}
.lt-post-rule{margin-top:calc(34 * var(--u))}
.lt-post-s{padding-top:calc(126 * var(--u))}
.lt-post-h2{font:400 var(--fs-h2)/.955 var(--f-disp);letter-spacing:0;max-width:calc(278 * var(--u));text-wrap-style:balance}
.lt-post-in .lt-post-h2{max-width:calc(553.5 * var(--u));margin-left:calc(352.5 * var(--u))}
.lt-post-body{width:calc(553.5 * var(--u));margin:calc(36 * var(--u)) 0 0 calc(352.5 * var(--u))}
.lt-post-in .lt-post-body{margin-top:calc(17 * var(--u))}
.lt-post-body p+p{margin-top:12.9px}
.lt-post-pair{display:flex;align-items:flex-start;gap:calc(34 * var(--u));margin-top:calc(39 * var(--u))}
.lt-pp-a{flex:none;width:calc(553.5 * var(--u));aspect-ratio:553.5/626.6}
.lt-pp-b{flex:none;width:calc(318.5 * var(--u));aspect-ratio:318.5/212.3}
.lt-post-pair+.lt-post-s,.lt-post-one+.lt-post-s{padding-top:calc(31 * var(--u))}
.lt-post-one{margin-top:calc(39 * var(--u))}
.lt-post-one>div{width:calc(553.5 * var(--u));margin-left:calc(352.5 * var(--u));aspect-ratio:553.5/622.5}
.lt-post-end{padding-top:calc(90 * var(--u))}
/* the sticky side column (closing fix, 20 October 2026): right of the body column, which ends at x 938 */
.lt-post-main{position:relative}
.lt-post-sidewrap{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;pointer-events:none}
.lt-post-side{position:absolute;top:calc(126 * var(--u));bottom:0;left:calc(970 * var(--u));right:0;pointer-events:auto}
.lt-post-side-in{position:sticky;top:32px;padding:calc(24 * var(--u)) 0 calc(40 * var(--u)) calc(70 * var(--u))}
.lt-post-side::before{content:"";position:absolute;top:0;bottom:0;left:0;width:24px;background:url(/static/vrule-a-bcfbc3838dcd.svg) center top/24px 800px repeat-y;opacity:.35}
.lt-ps-draw{display:block;width:calc(180 * var(--u));margin:0 0 calc(40 * var(--u))}
.lt-ps-draw img{display:block;width:100%;height:auto}
.lt-ps-k{font-size:12.5px;line-height:15.1px}
.lt-ps-list{list-style:none;margin:calc(14 * var(--u)) 0 0;padding:0}
.lt-ps-list a{display:inline-flex;align-items:center;min-height:44px;font:italic 400 24px/1.15 var(--f-disp);color:inherit;text-decoration:none}
.lt-ps-list a:hover{text-decoration:underline;text-underline-offset:3px}
.lt-pull{max-width:calc(840 * var(--u));font:400 var(--fs-h3)/.972 var(--f-disp);letter-spacing:0}
.lt-sign{margin-top:calc(52 * var(--u))}
.lt-sign-s{margin-top:10px}
.lt-sign-svg{display:block;width:186.1px;height:34.6px;fill:currentColor}
.lt-post-rule2{margin-top:calc(100 * var(--u))}
.lt-more{padding:calc(130.4 * var(--u)) 0 calc(96 * var(--u))}
.lt-more-row{position:relative;align-items:start}
.lt-more-a{grid-column:1/8;padding-top:calc(8 * var(--u))}
.lt-more-p{margin-top:calc(16.6 * var(--u));max-width:calc(335.7 * var(--u))}
.lt-more-a .lt-act{margin-top:calc(28.6 * var(--u))}
.lt-more-draw{position:absolute;left:calc(119.6 * var(--u));top:calc(156.1 * var(--u));width:calc(192 * var(--u))}
.lt-next{grid-column:16/-1;justify-self:end;width:calc(504 * var(--u))}
.lt-next .lt-jcard-pic{aspect-ratio:504/520}
.lt-next-k{margin-top:calc(12 * var(--u))}
.lt-next .lt-jcard-h{margin-top:calc(8 * var(--u));font-size:var(--fs-h3);line-height:.954}
.lt-next .lt-jcard-p{margin-top:calc(14 * var(--u))}

/* ---------------------------------------------------------------- story.html (the reference's about page) */
.lt-story-top{padding-top:calc(55.5 * var(--u));text-align:center}
.lt-story-h{max-width:calc(1030 * var(--u));margin:calc(30.6 * var(--u)) auto 0}
.lt-story-note{padding-top:calc(98.7 * var(--u))}
.lt-story-row{position:relative;align-items:start}
.lt-story-a{grid-column:1/7;padding-top:calc(9.3 * var(--u))}
.lt-story-p{margin-top:calc(16.7 * var(--u))}
.lt-story-draw{position:absolute;left:calc(202.6 * var(--u));top:calc(530.8 * var(--u));width:calc(192 * var(--u))}
.lt-story-big{grid-column:8/-1;aspect-ratio:971.5/719.4}
.lt-story-big picture,.lt-story-big img,.lt-pair picture,.lt-pair img{display:block;width:100%;height:100%;object-fit:cover}
.lt-story-pair{padding:calc(95 * var(--u)) 0 calc(164 * var(--u))}
.lt-pair{align-items:start}
.lt-pair figure{margin:0}
.lt-pair picture{aspect-ratio:624.7/800.6}
.lt-pair{column-gap:calc(20 * var(--u))}
.lt-pair-a{grid-column:1/13}
.lt-pair-b{grid-column:13/-1}
.lt-pair figcaption{max-width:calc(335.7 * var(--u));margin-top:calc(16.3 * var(--u))}
.lt-story-pair .lt-sign{width:calc(380 * var(--u));margin:calc(16 * var(--u)) 0 0 calc(809 * var(--u))}

/* ---------------------------------------------------------------- gatherings.html (the reference's events page) */
.lt-gt{padding-top:calc(40 * var(--u))}
.lt-gt-row{position:relative;align-items:start}
.lt-gt-a{grid-column:1/18}
.lt-gt-h{margin-top:calc(22.3 * var(--u))}
.lt-gt-draw{position:absolute;right:calc(27.6 * var(--u));top:calc(28.7 * var(--u));width:calc(222 * var(--u))}
.lt-on{padding-top:calc(122.1 * var(--u))}
.lt-on .lt-label-i+.lt-rule{margin-top:calc(17.8 * var(--u))}
.lt-arch .lt-label-i+.lt-rule{margin-top:calc(20.1 * var(--u))}
.lt-ev{position:relative;display:grid;grid-template-columns:calc(250.3 * var(--u)) calc(215.7 * var(--u)) calc(81 * var(--u)) calc(252 * var(--u)) calc(460 * var(--u)) minmax(0,1fr);align-items:stretch;padding:calc(43.1 * var(--u)) 0 calc(44.9 * var(--u))}
/* The poster reads as the reference's printed flyer: the name large in the display italic (16% of the card's
   inner width, so the longest name spans 80% of the card, as the flyer's title spans 205 of its 250 px), a small
   line of times, the party size, the drawing and the café's name at the foot. The drawing is the flyer's central
   figure (review round 2, 20 October 2026): its file is cropped to the ink, and 41% of the inner width makes it
   about 90 px tall in the 250 px card, the reference figure's 80 px width. The card face is the reference flyer's
   white (about #fdf9f0) with the paper's own tooth: the tile is lifted to that white by a colour dodge rather
   than washed, so its grain keeps its strength (a 30% wash calms it to the flyer's).
   Composed as the flyer is (layout fixer, review round 2): the title near the top, the times spread evenly
   across the card as the flyer spreads its date, hour and place, the party size under them as the flyer's
   small italic line, the figure centred in the space that is left, and the name at the foot, about 85% down
   the card as the flyer's last line is. */
.lt-poster{grid-column:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:11% 6% 16%;aspect-ratio:250.3/300.4;background:linear-gradient(rgba(254,250,241,.3),rgba(254,250,241,.3)),linear-gradient(#0c0f1a,#0c0f1a),var(--card) var(--paper-tile) 0 0/320px 320px repeat;background-blend-mode:normal,color-dodge,normal;box-shadow:0 1px 2px rgba(95,30,27,.08);text-align:center;container-type:inline-size}
.lt-poster-k{font:italic 400 35px/1 var(--f-disp);font-size:16cqw;letter-spacing:0}
.lt-poster-t{display:flex;justify-content:space-evenly;align-self:stretch;margin-top:6cqw;font:400 10.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.lt-poster-n{margin-top:2.4cqw;font:italic 400 15px/1.2 var(--f-disp);letter-spacing:0}
.lt-poster-d{display:block;width:auto;height:41cqw;margin:auto 0}
.lt-poster-c{font:italic 400 13px/1 var(--f-disp)}
.lt-ev-when{grid-column:2;margin-top:calc(-6 * var(--u));display:flex;flex-direction:column;align-items:flex-end;text-align:right;font:400 var(--fs-h3)/37.1px var(--f-disp);letter-spacing:0}
.lt-ev-when>span{white-space:nowrap}
.lt-ev-when em{font-style:italic}
.lt-ev-time{color:rgba(95,30,27,.6)}
.lt-ev-v{position:absolute;left:calc(488.5 * var(--u));top:calc(28.4 * var(--u));bottom:calc(27 * var(--u))}
.lt-ev-what{grid-column:4;margin-top:calc(-6 * var(--u));display:flex;flex-direction:column;justify-content:space-between}
.lt-ev-h{font:400 var(--fs-h3)/37.1px var(--f-disp);letter-spacing:0}
.lt-ev-who{display:flex;flex-direction:column;gap:5px}
.lt-ev-who span+span{font:400 var(--fs-th)/26.8px var(--f-disp);letter-spacing:-.01em}
.lt-ev-desc{grid-column:5;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.lt-ev-act{margin-bottom:calc(1.2 * var(--u))}
.lt-evs>.lt-rule{margin:0}
.lt-arch{padding-bottom:calc(122 * var(--u))}
.lt-arch .lt-label-i{margin-top:calc(156.6 * var(--u))}
.lt-past{display:grid;grid-template-columns:repeat(4,calc(332 * var(--u)));column-gap:calc(17 * var(--u));margin-top:calc(36.4 * var(--u))}
.lt-past-a{display:block}
.lt-past-pic{position:relative;display:block;aspect-ratio:332/443.7}
/* A soft shade in the top left corner under the white date (review round 1, 20 October 2026): the reference's archive photo is dark there; ours are a candlelit table and the courtyard at night, and the shade keeps the date at AA on every width. Sized in px because the date is. No drawings on these covers (review round 2): the reference's archive card has none. */
.lt-past-pic::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 190px 72px at 0 0,rgba(0,0,0,.44) 0,rgba(0,0,0,.32) 55%,transparent 100%)}
.lt-past-pic picture,.lt-past-pic img{display:block;width:100%;height:100%;object-fit:cover}
.lt-past-m{position:absolute;z-index:2;left:14px;top:14px;color:#fff;font:400 12.5px/15.1px var(--f-grot);text-transform:uppercase;letter-spacing:-.025em;text-shadow:0 0 6px rgba(0,0,0,.45)}
.lt-past-h{display:block;margin-top:5px;font:400 var(--fs-th)/26.8px var(--f-disp);letter-spacing:-.01em}
.lt-past-n{display:block;margin-top:calc(11 * var(--u));font:400 12px/15.84px var(--f-mono);letter-spacing:0}
/* The lightbox: a native dialog over a dimmed, blurred page. Without JavaScript the photos show on the page. */
.lt-box{box-sizing:border-box;width:min(808px,calc(100% - 32px));max-height:min(728px,calc(100% - 48px));margin:auto;padding:4px;border:2px solid var(--ink);background:transparent;color:var(--ink);overflow:visible}
.lt-box[open]{animation:lt-box-in .3s ease both}
@keyframes lt-box-in{from{opacity:0}}
.lt-box::backdrop{background:rgba(31,12,10,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lt-box-in{position:relative;max-height:calc(min(728px,100vh - 48px) - 12px);overflow-y:auto;overscroll-behavior:contain;padding:31px 30px 30px;background:var(--paper) var(--paper-tile) 0 0/640px 640px repeat;text-align:center}
.lt-box-x{position:absolute;top:1px;right:1px;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.lt-box-x span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#6f6a63;font:400 20px/1 var(--f-text)}
.lt-box-x:focus-visible{outline:0}
.lt-box-x:focus-visible span{outline:2px solid var(--ink);outline-offset:2px}
.lt-box-k{font-size:12.5px;line-height:15.1px}
.lt-box-h{margin-top:12px;font:italic 400 var(--fs-h1)/.926 var(--f-disp)}
.lt-box-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:52px}
.lt-box-grid li{aspect-ratio:1;background:rgba(95,30,27,.06)}
.lt-box-grid picture,.lt-box-grid img{display:block;width:100%;height:100%;object-fit:cover}
html.lt-js .lt-box-grid img{opacity:0;transition:opacity 1s ease}
html.lt-js .lt-box-grid img.is-in{opacity:1}
.lt-box-spin{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:2px solid rgba(191,57,51,.25);border-top-color:var(--red);border-radius:50%;animation:lt-spin 1s linear infinite}
@keyframes lt-spin{to{transform:rotate(360deg)}}
html:not(.lt-js) .lt-box{position:static;display:block;width:auto;max-height:none;margin:calc(64 * var(--u)) 0 0;padding:0;border:0}
html:not(.lt-js) .lt-box-in{max-height:none;overflow:visible;padding:0;background:none;text-align:left}
html:not(.lt-js) .lt-box-x{display:none}
html:not(.lt-js) .lt-box-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:11px;margin-top:24px}
body.lt.lt-boxed{overflow:hidden}

/* ---------------------------------------------------------------- visit.html (the reference's privacy page layout) */
/* The reference's photo starts 303 px under the end of its five line lead (its section heights assume that lead);
   ours is two lines, so the photo keeps that 303 px gap instead of the section height, and the drawing sits in
   the middle of the gap at the right, where the reference's vase is (review round 1, 20 October 2026). */
.lt-vt{padding-top:calc(43.5 * var(--u))}
.lt-vt-row{position:relative;align-items:start}
.lt-vt-a{grid-column:1/15}
.lt-vt-a .lt-lead{margin-top:calc(11.8 * var(--u));max-width:calc(800 * var(--u))}
.lt-vt-draw{position:absolute;right:calc(14.4 * var(--u));top:calc(100% + 55.5 * var(--u));width:calc(192 * var(--u))}
.lt-visit{padding:calc(303 * var(--u)) 0 calc(150 * var(--u))}
.lt-visit-row{align-items:stretch}
.lt-visit-pics{grid-column:1/10;display:flex;flex-direction:column;gap:calc(50 * var(--u))}
.lt-visit-pics>div{width:calc(509.1 * var(--u));aspect-ratio:509.1/678.8}
.lt-visit-pics picture,.lt-visit-pics img{display:block;width:100%;height:100%;object-fit:cover}
.lt-visit-text{grid-column:16/22}
.lt-visit-stick{position:sticky;top:32px;padding-top:calc(8 * var(--u))}
.lt-visit-i+.lt-visit-i{margin-top:calc(48 * var(--u))}
.lt-visit-i .lt-kick{margin-bottom:calc(13.6 * var(--u))}
.lt-visit-i p+p{margin-top:12.9px}
.lt-hours{max-width:none}
.lt-hours th{width:auto}
.lt-hours td{text-align:left;font-size:15px}
.lt-visit-text .lt-credits{margin-top:calc(48 * var(--u));max-width:calc(335.7 * var(--u))}

/* ---------------------------------------------------------------- reservations.html (booking preview)
   The reference's event page around the form: the centred italic h1 72 px under the header (48 px, line 1), four
   329 px squares 20 px apart from y 343.6, and its right aligned next link (roman 28.1) in a 130.5 px band. */
.lt-et{padding:calc(72 * var(--u)) 0 calc(150 * var(--u))}
.lt-et-h{text-align:center;line-height:1}
.lt-et-pics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(20 * var(--u));margin-top:calc(103.9 * var(--u))}
.lt-et-pics li{position:relative;overflow:hidden;aspect-ratio:1;background:rgba(95,30,27,.06)}
.lt-et-pics picture,.lt-et-pics img{display:block;width:100%;height:100%;object-fit:cover}
/* the waiter over the third and fourth frames, as the reference's figure over its event photos, and larger on the
   fourth as the reference's is (review round 2, 20 October 2026: the figure 32% and 38% of a frame tall, the
   reference's 31% and 44%). Review round 3 (the same day): solid hair and a second pose on the fourth frame (from
   the front, a cake and a coffee held out), each larger, 41% and 47% of a frame tall: on the pale wall left of the
   arm, clear of the plate (x 5 to 37%, y 3 to 45%), and across the left of the table (x 3 to 40%, y 2 to 48%); no
   faces in either frame */
.lt-et-pics .lt-over{height:auto;object-fit:fill}
.lt-et-pics .lt-over-et3{left:-9%;top:-7%;width:58%}
.lt-et-pics .lt-over-et4{left:-11%;top:-10%;width:66%}
/* The table for two stands on the right end of the rule, as the reference's drink set rests on its rule: the
   feet (the ink's foot is 91.2% down the drawing's box) meet the line, drawn at the middle of the rule's box, and
   dip about 2 px into it (review round 2, 20 October 2026: round 2 set it lower, so the rule ran through the
   chair legs). It stays clear of the visit photo below it. */
.lt-book-top{position:relative}
.lt-book-draw{position:absolute;right:calc(54 * var(--u));top:calc(12.5px - 177 * var(--u));width:calc(194 * var(--u))}
.lt-pager{height:calc(130.5 * var(--u))}
.lt-pager .lt-wrap{display:flex;justify-content:flex-end;padding-top:calc(51.3 * var(--u))}
.lt-pager-a{display:inline-flex;align-items:center;gap:calc(16 * var(--u));min-height:44px;font:400 var(--fs-h3)/1 var(--f-disp);letter-spacing:0}
.lt-pager-i{display:block;flex:none;width:14px;height:28px}
.lt-book{padding:calc(60 * var(--u)) 0 calc(96 * var(--u))}
.lt-book-row{position:relative;align-items:start}
.lt-book-a{grid-column:1/13}
.lt-book-v{position:absolute;top:0;bottom:0;left:calc(737 * var(--u))}
.lt-book-b{grid-column:16/22;align-self:stretch}
.lt-book-stick{position:sticky;top:32px}
.lt-book-pic{aspect-ratio:3/4}
.lt-book-pic picture,.lt-book-pic img{display:block;width:100%;height:100%;object-fit:cover}
.lt-book-b .lt-label{margin-top:22px}
/* The visit line: two deliberate lines (a newline in the text), no separators (review round 3, 20 October 2026). */
.lt-yv{margin-top:10px;font:italic 400 calc(16px + .55 * var(--vw))/1.15 var(--f-disp);letter-spacing:0;white-space:pre-line}
.lt-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 22px}
.lt-field{grid-column:1/-1;min-width:0;margin:0;padding:0;border:0}
.lt-half{grid-column:auto}
.lt-field label,.lt-field legend{display:block;padding:0;color:var(--ink-soft);font:400 12px/1.3 var(--f-mono);letter-spacing:.02em;text-transform:uppercase}
/* Every field is at least 44 px tall, the tap target rule (review round 1, 20 October 2026). */
.lt-field input:not([type=radio]),.lt-field select,.lt-field textarea{box-sizing:border-box;display:block;width:100%;min-height:44px;margin:6px 0 0;padding:8px 0;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:400 16px/1.32 var(--f-text);letter-spacing:-.01em;-webkit-appearance:none;appearance:none}
.lt-field input:not([type=radio]):focus-visible,.lt-field select:focus-visible,.lt-field textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.lt-field select{padding-right:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f1e1b' stroke-width='1.4'/%3E%3C/svg%3E") right 2px center/12px 8px no-repeat;cursor:pointer}
.lt-field select:disabled{opacity:.6;cursor:default}
.lt-field textarea{resize:vertical;min-height:80px}
.lt-field input[type=date]{color:var(--ink)}
/* An empty date shows no format pattern until it has focus: the browser's pattern follows its own locale, not the
   page's (a US browser shows mm/dd/yyyy on this Australian café); the label, hint and calendar button carry it.
   site.js sets lt-empty; without JavaScript the browser's pattern shows. */
.lt-field input[type=date].lt-empty:not(:focus)::-webkit-datetime-edit{color:transparent}
.lt-field input[type=date]::-webkit-calendar-picker-indicator{width:16px;height:16px;padding:2px;opacity:1;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%235f1e1b' stroke-width='1.3'%3E%3Crect x='1.5' y='2.75' width='13' height='11.5'/%3E%3Cpath d='M1.5 6.5h13M5 1v3.5M11 1v3.5'/%3E%3C/g%3E%3C/svg%3E") center/16px 16px no-repeat}
/* Chrome gives the calendar button its own tab stop and focus ring: the ring takes the page ink. */
.lt-field input[type=date]::-webkit-calendar-picker-indicator{outline-color:var(--ink)}
.lt-hint{margin-top:6px;font:400 12px/15.84px var(--f-mono);letter-spacing:0}
.lt-date-words:empty{display:none}
.lt-date-words{color:var(--ink)}
/* Each button is a 44 px tall tap target with its 24 px box centred in it (.lt-field label would make it a block). */
.lt-choice-row{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:0}
.lt-field .lt-choice{position:relative;display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.lt-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lt-choice span{display:block;padding:0 6px;border:1.5px solid var(--ink);font:400 var(--fs-btn)/22px var(--f-mono);letter-spacing:0;text-transform:uppercase;white-space:nowrap;transition:background-color .5s ease,color .5s ease}
.lt-choice:hover span{background:rgba(95,30,27,.08)}
.lt-choice input:checked+span{background:var(--ink);color:var(--cream)}
.lt-choice input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.lt-form-acts,.lt-form>.lt-note,.lt-form>noscript{grid-column:1/-1}
/* 12 px between wrapped rows keeps the preview button's 44 px touch area (it overhangs its 22 px box by 11 px)
   clear of the clear button's under 360 px (review round 2, 20 October 2026: 8 px let them overlap by 3 px). */
.lt-form-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.lt-tbtn{min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:400 13px/1 var(--f-mono);text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lt-result{max-width:624.7px}
.lt-result-note{margin-top:14px}
.lt-summary{margin-top:18px;padding:16px 0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);white-space:pre-line}
.lt-result .lt-form-acts{margin-top:22px}

/* ---------------------------------------------------------------- journal.html (the reference's blog)
   The reference's sidebar is a 100vh sticky panel that starts 32 px from the top of the page, under the header,
   with its words 148.7 px down; once the page moves its top goes to 0 and its padding grows by 32 px, so the
   words hold still. The listing is pulled up under our in-flow header (bar 31.2 + header 88.5) to match. */
.lt-blog{position:relative;display:grid;grid-template-columns:calc(281.6 * var(--u)) minmax(0,1fr);column-gap:calc(84 * var(--u));margin-top:-119.7px;padding-bottom:calc(32 * var(--u))}
html.lt-bar-closed .lt-blog{margin-top:-82.9px}
.lt-side{position:relative}
.lt-side-in{--lt-side-pad:calc(148.7 * var(--u) - 32px);position:sticky;top:32px;box-sizing:border-box;height:100vh;padding-top:var(--lt-side-pad);transition:top .5s ease,padding-top .5s ease}
.lt-side.is-stuck .lt-side-in{--lt-side-pad:calc(148.7 * var(--u));top:0}
.lt-side-in::after{content:"";position:absolute;top:calc(var(--lt-side-pad) + 7px);bottom:0;right:calc(-12.8 * var(--u));width:24px;background:url(/static/vrule-a-bcfbc3838dcd.svg) center top/24px 800px repeat-y;opacity:.35;transition:top .5s ease}
.lt-side-p{margin-top:calc(14 * var(--u));max-width:calc(250 * var(--u))}
.lt-side-draw{position:absolute;left:calc(56.75 * var(--u));top:calc(var(--lt-side-pad) + 542.8 * var(--u));width:calc(180 * var(--u));transition:top .5s ease}
.lt-posts{padding-top:calc(152 * var(--u))}
.lt-jf{display:grid;grid-template-columns:calc(574.3 * var(--u)) minmax(0,1fr);column-gap:calc(18 * var(--u));align-items:start}
.lt-jf .lt-jcard-pic{aspect-ratio:574.3/684}
.lt-jf .lt-jcard-cat,.lt-jp .lt-jcard-cat{font-size:12.5px;line-height:15.1px}
.lt-jf-h{margin-top:calc(8 * var(--u));font-size:var(--fs-h3);line-height:1}
.lt-jf .lt-jcard-p{margin-top:calc(24 * var(--u));max-width:calc(390 * var(--u))}
.lt-jf .lt-act{margin-top:calc(35.6 * var(--u))}
.lt-jps{display:grid;grid-template-columns:repeat(2,calc(497.2 * var(--u)));column-gap:calc(16 * var(--u));margin-top:calc(84 * var(--u))}
.lt-jp .lt-jcard-pic{aspect-ratio:497.2/663.9}
.lt-jp .lt-jcard-h{font-size:var(--fs-h3);line-height:1}
.lt-jp .lt-jcard-p{max-width:calc(420 * var(--u))}

/* ---------------------------------------------------------------- pantry.html (the reference's shop) */
.lt-pantry-s{padding:calc(36 * var(--u)) 0 calc(126 * var(--u))}
.lt-pantry{position:relative;display:grid;grid-template-columns:repeat(3,calc(381.9 * var(--u)));justify-content:space-between;row-gap:calc(70 * var(--u))}
.lt-vrules{position:absolute;inset:calc(-20 * var(--u)) 0 0;pointer-events:none}
/* As the reference's shop: each rule is a full height box whose 100vh drawing sticks to the top of the window, so
   the line holds still on the paper while the items scroll past. */
.lt-vrules .lt-vrule{position:absolute;top:0;bottom:0;background:none;opacity:1}
.lt-vrules .lt-vrule::before{content:"";position:sticky;top:0;display:block;height:100vh;background:url(/static/vrule-a-bcfbc3838dcd.svg) center top/24px 800px repeat-y;opacity:.35}
.lt-vrules .lt-vrule-2::before{background-image:url(/static/vrule-b-160c95501a74.svg)}
.lt-vrule-1{left:calc(427.5 * var(--u))}
.lt-vrule-2{left:calc(924.5 * var(--u))}
.lt-pantry-first{position:relative;min-height:calc(489.2 * var(--u))}
.lt-pantry-h{font:400 var(--fs-h1)/1.2 var(--f-disp);letter-spacing:0}
.lt-pantry-h sup{position:relative;top:-.05em;margin-left:4px;font-size:.5em;line-height:0;vertical-align:super}
.lt-pantry-first .lt-note{margin-top:14px;max-width:calc(300 * var(--u))}
.lt-pantry-first .lt-note+.lt-note{margin-top:6px}
.lt-pantry-draw{position:absolute;right:calc(-17 * var(--u));top:calc(286 * var(--u));width:calc(160 * var(--u))}
.lt-pi-pic{position:relative;aspect-ratio:1}
.lt-pi-pic picture,.lt-pi-pic img{display:block;width:100%;height:100%;object-fit:cover}
.lt-pi-a,.lt-pi-b,.lt-pi-draw{position:absolute;inset:0}
/* The cover comes first in the markup and lies over the second photo, so fading it out reveals the second. */
.lt-pi-a{z-index:1}
.lt-pi-a img{transition:opacity 1s ease}
.lt-pi-draw{z-index:2;width:100%;height:100%;opacity:0;transition:opacity .3s ease}
.lt-pantry-item:hover .lt-pi-a img{opacity:0}
.lt-pantry-item:hover .lt-pi-draw{opacity:1}
.lt-pi-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:calc(29 * var(--u))}
.lt-pi-h{font:400 var(--fs-th)/1 var(--f-disp);letter-spacing:0}
.lt-pi-price{flex:none;font:400 var(--fs-kick)/1.2 var(--f-grot);text-transform:uppercase;letter-spacing:-.025em}
.lt-pi-n{margin-top:calc(16 * var(--u));max-width:calc(320 * var(--u));font:400 12px/15.84px var(--f-mono);letter-spacing:0}

/* ---------------------------------------------------------------- footer */
.lt-brick{background:var(--brick) url(/static/paper-oxblood-a595565a23ec.webp) 0 0/640px 640px repeat;color:var(--cream)}
.lt-foot-in{position:relative;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:11px;align-items:start;min-height:calc(467.7 * var(--u));padding-top:calc(32 * var(--u))}
.lt-foot-a{grid-column:1/8}
.lt-foot-line{font:400 16px/21.12px var(--f-text)}
.lt-foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;width:calc(331 * var(--u));max-width:100%;height:41.2px;margin-top:calc(16.1 * var(--u));border-bottom:1.5px solid var(--cream)}
.lt-foot-row>span:first-child{font:400 16px/19.2px var(--f-text)}
.lt-foot-go{font:400 14px/20px var(--f-mono);letter-spacing:0;text-transform:uppercase}
@media (pointer:coarse){.lt-foot-row{height:44px}}
.lt-foot-find{grid-column:16/22}
.lt-foot-find p,.lt-foot-links a,.lt-foot-map a{font:400 14px/18.5px var(--f-text);letter-spacing:-.01em}
.lt-foot .lt-label{display:block;margin-bottom:16px}
.lt-foot-links{margin-top:calc(36.95 * var(--u))}
.lt-foot-links a,.lt-foot-map a{display:block}
.lt-foot-map{grid-column:23/25}
.lt-top{position:absolute;left:0;top:calc(179.6 * var(--u));display:block;width:calc(280 * var(--u));aspect-ratio:1}
.lt-top picture,.lt-top img{display:block;width:100%;height:100%}
.lt-top-w{position:absolute;color:var(--chalk);font:italic 400 calc(17 * var(--u))/1 var(--f-disp);letter-spacing:0;text-transform:uppercase;writing-mode:vertical-rl;text-orientation:upright}
.lt-top-1{left:5%;top:14.29%}
.lt-top-2{left:87.86%;top:40%}
.lt-top-3{left:5%;top:73.57%}
.lt-ring{position:absolute;right:calc(46 * var(--u));top:calc(357 * var(--u));width:calc(70 * var(--u));height:auto}
.lt-fbar{padding:9.43px 32px;background:var(--red-deep);color:var(--cream);text-align:center;font:400 10.5px/13.65px var(--f-mono);letter-spacing:.02em;text-transform:uppercase}
.lt-fbar a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.lt-sep{margin:0 .6em}

/* ---------------------------------------------------------------- fades (only with JavaScript, never with reduced motion) */
@media (prefers-reduced-motion:no-preference){
  html.lt-js .lt-f{opacity:0}
  html.lt-js .lt-f.is-in{opacity:1;transition:opacity .4s linear}
  html.lt-js .lt-draw.lt-f.is-in{transition:opacity .55s cubic-bezier(.37,0,.63,1)}
  html.lt-js:not(.lt-go) .lt-f{animation:lt-safe 0s linear 2.5s forwards}
}
@keyframes lt-safe{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lt-btn span,.lt-hov img,.lt-card-draw,.lt-pi-a img,.lt-pi-draw,.lt-choice span,.lt-side-in{transition:none}
  .lt-box[open]{animation:none}
  html.lt-js .lt-box-grid img{opacity:1;transition:none}
  .lt-box-spin{display:none}
}

/* ---------------------------------------------------------------- desktop widths */
@media (max-width:1099.98px){
  .lt-tag{display:none}
  .lt-rule-a{background-image:url(/static/rule-a-860-80c50a868b15.svg)}
  .lt-rule-b{background-image:url(/static/rule-b-860-1a044e0c23cf.svg)}
  .lt-rule-c{background-image:url(/static/rule-c-860-199f9bb5396c.svg)}
  .lt-rule-d{background-image:url(/static/rule-d-860-73ecac62a5ee.svg)}
  .lt-rule-e{background-image:url(/static/rule-e-860-2fb0ffd5cf72.svg)}
}

/* ---------------------------------------------------------------- phones and small tablets */
@media (max-width:1023.98px){
  :root{--vw:min(1vh,9px);--side:max(6vw,calc(50% - 320px))}
  .lt-wrap{width:min(88%,640px)}
  .lt-grid{display:block}

  .lt-bar-t{padding:7.15px 44px 7.15px 14px;font-size:13px;line-height:15.6px}
  .lt-bar a{padding:14.3px 0;margin:-14.3px 0}

  .lt-head{display:block;height:86.3px;padding:0}
  .lt-brand{position:absolute;left:var(--side);top:21.5px;width:166.5px;height:47px;margin:0}
  .lt-tag,.lt-nav{display:none}
  .lt-util{position:absolute;top:28.45px;right:calc(var(--side) + 65.5px);display:block;margin:0}
  .lt-util a{display:flex;align-items:center;min-height:44px}
  .lt-burger{position:absolute;top:28.5px;right:var(--side);display:block;width:47px;height:44px;min-height:44px;margin:0;padding:0;border:0;background:none;cursor:pointer}
  /* The reference's burger: two 35 px lines that turn to -135 and 135 degrees and shorten to 28 px. */
  .lt-burger span{position:absolute;left:6px;width:35px;height:1px;background:var(--ink);transition:width .25s var(--ease-burger),transform .25s var(--ease-burger)}
  .lt-burger span:first-child{top:16px}
  .lt-burger span:last-child{top:27px}
  .lt-burger[aria-expanded=true] span{width:28px}
  .lt-burger[aria-expanded=true] span:first-child{transform:translate(3.5px,5.5px) rotate(-135deg)}
  .lt-burger[aria-expanded=true] span:last-child{transform:translate(3.5px,-5.5px) rotate(135deg)}
  html:not(.lt-js) .lt-burger{display:none}
  html:not(.lt-js) .lt-nomenu{position:absolute;top:28.45px;right:var(--side);display:flex;align-items:center;min-height:44px;font:400 var(--fs-nav)/1 var(--f-mono);letter-spacing:-.01em;text-transform:uppercase}

  .lt-menu{position:fixed;inset:0;z-index:30;display:block;overflow-y:auto;overscroll-behavior:contain;padding:var(--lt-menu-top,128px) var(--side) 24px;background:var(--paper) var(--paper-tile) 0 0/640px 640px repeat;visibility:hidden;opacity:0;transition:opacity .4s var(--ease-std),visibility 0s linear .4s}
  .lt-menu[data-open]{visibility:visible;opacity:1;transition:opacity .4s var(--ease-std)}
  .lt-menu-nav a{display:flex;align-items:center;justify-content:center;height:max(44px,min(87.2px,10.33vh));font:400 19.5px/1 var(--f-mono);letter-spacing:-.01em;text-transform:uppercase;transform:translateY(20px);transition:transform .6s var(--ease-std)}
  .lt-menu[data-open] .lt-menu-nav a{transform:none}
  .lt-menu-nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
  .lt-menu-draw{display:block;width:140px;height:140px;margin:24px auto 0}
  body.lt.menu-open{overflow:hidden}

  .lt-btn{margin:-11px 0}
  .lt-btn span{height:22px;line-height:22px}

  .lt-hero-s{padding:0}
  .lt-hero{width:min(88%,640px);height:58.1vh;margin:0 auto}

  .lt-intro{padding:34.8px 0 0}
  .lt-intro-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .lt-intro-a,.lt-intro-b{display:contents}
  .lt-intro-a .lt-h1{grid-column:1/-1;grid-row:1;margin:0}
  .lt-intro-p{grid-column:1/-1;grid-row:2;margin-top:21.9px}
  .lt-intro .lt-act{grid-column:1;grid-row:3;margin-top:22px}
  /* The wide reader (21 October 2026) takes its own row under the button, at most 88% of the text's width and 310 px
     (1 px a unit at most, the other drawings' weight), so its floor stops short of the rule below and does not read as
     a second rule. On tablets it starts on the text's left edge, as the heading, text and button do (round 3, 22
     October 2026: centred there it floated alone in the column; round 5: 7.5 px further left, the ink's own margin in
     its box, so the floor's ink starts on that edge); phones centre it (under 600 px). The paper from the button to the
     arch matches the paper from the floor to the rule (about 32 px at 390). */
  .lt-intro-draw{grid-column:1/-1;grid-row:4;justify-self:start;width:min(88%,310px);padding:0;margin:28px 0 0 -7.5px}
  .lt-intro .lt-rule{margin-top:22px}

  .lt-mt{padding:26.8px 0 0}
  .lt-mg-home .lt-mg-intro{padding:0}
  .lt-mg-lead{margin-top:12.4px}
  .lt-mg-photo,.lt-mg-home .lt-mg-photo{width:100%;max-width:420px;margin-top:33px;aspect-ratio:343.2/409}
  /* Boss, 23 October 2026: on phones the home menu follows its heading straight away; the photos stay beside it
     on desktop. Hidden, the lazy photos are not fetched and the slideshow never starts. */
  .lt-mg-home .lt-mg-photo{display:none}
  .lt-mg-tables,.lt-mg-home .lt-mg-tables{display:block;padding:0}
  .lt-mg-t{margin-top:46px}
  /* On phones the reference centres the drawing over the closing rule. */
  .lt-mg-draw{width:min(164px,42vw);margin:-6.5px auto 0}
  .lt-mg-home+.lt-rule{margin-top:16.3px}
  .lt-mt-full{padding:30px 0 74px}
  .lt-mg-full .lt-mg-stick{position:static}
  .lt-mg-full .lt-mg-photo{margin-top:0}
  .lt-prices td{padding-left:10px}

  .lt-court{padding:24px 0 0}
  .lt-court-frame{height:auto;overflow:visible}
  .lt-court-frame::after{content:none}
  .lt-court-pic{position:relative;inset:auto;overflow:hidden;aspect-ratio:343.2/268.5}
  .lt-court-text{position:static;width:auto;margin-top:15.5px;color:var(--ink)}
  .lt-court-k{margin-top:8.5px}
  .lt-court-p{margin-top:10.5px}
  .lt-court .lt-rule{margin-top:37px}

  .lt-feat{padding:23.3px 0 0}
  .lt-feat-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  .lt-feat-text{display:contents}
  .lt-feat-pic{grid-column:1/-1;grid-row:1;aspect-ratio:343.2/338.5}
  .lt-feat-k{grid-column:1;grid-row:2;margin-top:16.5px}
  .lt-feat-h{grid-column:1;grid-row:3;margin-top:27.1px}
  /* The reference's phone event drawing: a 94 px box at the right, beside the kicker and the top of the title
     (review round 2, 20 October 2026: at 132 px it crowded "The long lunch"). */
  .lt-feat-draw{grid-column:2;grid-row:2/4;align-self:start;justify-self:end;width:min(94px,24.1vw);margin:-3px 0 0}
  .lt-feat-p{grid-column:1/-1;grid-row:4;margin-top:4.5px}
  .lt-feat-act{grid-column:1/-1;grid-row:5;margin-top:23px}
  .lt-feat .lt-rule{margin-top:81px}

  .lt-strip-s{padding:0 0 59.5px}
  .lt-strip-head{align-items:center;height:auto;padding:22px 0 53.5px}
  .lt-strip-head .lt-act{margin-top:0}
  .lt-strip{margin:-5px var(--side) -5px calc(var(--side) - 5px);scroll-snap-type:x proximity}
  .lt-strip-list{gap:30px}
  .lt-card{width:222.1px;scroll-snap-align:start}
  .lt-card-t{margin-top:12px}
  .lt-card-n{max-width:none}
  .lt-strip-s>.lt-wrap:last-child .lt-rule{margin-top:71.5px}

  .lt-jt{padding-top:0}
  .lt-jt-row{display:flex;flex-direction:column;min-height:0;padding:0 0 6.4px}
  .lt-jt-intro{display:contents}
  .lt-jt-h{order:0}
  .lt-jt-p{order:1;margin-top:12px}
  .lt-jt-act{order:2;margin-top:26px}
  .lt-jt-cards{order:3;display:block;margin-top:44px}
  .lt-jt-cards .lt-jcard+.lt-jcard{margin-top:44px}
  .lt-jt-draw{order:4;position:static;align-self:center;width:186px;margin-top:184.5px}
  .lt-jcard .lt-jcard-pic{aspect-ratio:343.2/457.6}
  .lt-jcard-top{margin-top:10px}
  .lt-jcard-cat{font-size:15.49px}
  .lt-jcard-p{margin-top:9px}
  .lt-jcard .lt-act{margin-top:7px}
  .lt-jf .lt-act{margin-top:16px}

  /* The opener: the drawing sits beside the button, as on home. */
  .lt-open{padding-top:24px}
  .lt-open-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}
  .lt-open-a,.lt-open-b{display:contents}
  .lt-open-a .lt-kick{grid-column:1/-1;grid-row:1;margin-bottom:14px}
  .lt-open-a .lt-h1,.lt-open-nok .lt-open-a .lt-h1{grid-column:1/-1;grid-row:2;margin:0}
  .lt-open-lead{grid-column:1/-1;grid-row:3;margin-top:18px}
  .lt-open-b .lt-act{grid-column:1;grid-row:4;margin-top:22px}
  .lt-open-draw{grid-column:2;grid-row:4;width:min(150px,40vw);margin:2px 0 0}
  .lt-open+.lt-wrap,.lt-open-drawn+.lt-wrap{margin-top:14px}

  .lt-post-head{padding-top:21px}
  .lt-post-top{display:flex;flex-direction:column}
  .lt-post-a{display:contents}
  .lt-post-a .lt-kick{order:0;text-align:center;font-size:14px;line-height:16.8px}
  .lt-post-h1{order:1;margin-top:26.5px;text-align:center}
  .lt-post-cover{order:2;width:100%;margin-top:37px;aspect-ratio:343.2/454.7}
  .lt-post-intro{order:3;margin-top:34.6px;max-width:none}
  .lt-post-draw{order:4;position:static;align-self:flex-end;width:min(150px,40vw);margin-top:-23px}
  .lt-post-rule{margin-top:30px}
  .lt-post-s{padding-top:56px}
  .lt-post-h2,.lt-post-in .lt-post-h2{max-width:none;margin-left:0}
  .lt-post-body,.lt-post-in .lt-post-body{width:auto;margin:31px 0 0}
  .lt-post-pair{flex-direction:column;gap:34.5px;margin-top:32px}
  .lt-pp-a,.lt-pp-b{width:100%}
  .lt-post-pair+.lt-post-s,.lt-post-one+.lt-post-s{padding-top:36px}
  .lt-post-one{margin-top:32px}
  .lt-post-one>div{width:100%;margin:0}
  .lt-post-end{padding-top:48px}
  .lt-post-sidewrap{display:none}
  .lt-pull{max-width:none}
  .lt-sign{margin-top:37.5px}
  .lt-post-rule2{margin-top:32px}
  .lt-more{padding:58px 0 73px}
  .lt-more-row{display:flex;flex-direction:column}
  .lt-more-a{position:relative;padding:0}
  .lt-more-p{max-width:none;margin-top:11px}
  .lt-more-a .lt-act{margin-top:35px}
  .lt-more-draw{position:static;width:min(120px,32vw);margin:15.5px 0 0 auto}
  /* The next card on phones takes the whole column at the reference's phone proportion (171.5 x 200). The reference
     sets it in the right half beside empty paper, where its excerpt runs three or four words a line; full width it
     reads as the home page's journal cards do on phones (review round 3, 20 October 2026; precedence rule 3). */
  .lt-next{align-self:stretch;width:auto;margin-top:43px}
  .lt-next .lt-jcard-pic{aspect-ratio:171.5/200}
  .lt-next-k{margin-top:9.3px}
  .lt-next .lt-jcard-h{margin-top:5.9px;font-size:23.1px;line-height:22px}
  .lt-next .lt-jcard-p{margin-top:10.3px}
  .lt-next .lt-act{margin-top:14px}

  .lt-story-top{padding-top:34px}
  .lt-story-h{max-width:none;margin-top:28.5px}
  .lt-story-note{padding-top:73px}
  .lt-story-row{display:flex;flex-direction:column}
  .lt-story-a{display:contents}
  .lt-story-big{order:0;aspect-ratio:343.2/268.9}
  .lt-story-draw{order:1;position:static;align-self:flex-end;width:min(110px,30vw);margin-top:1px}
  .lt-story-a .lt-kick{order:2;margin-top:-12px}
  .lt-story-p{order:3;margin-top:12px}
  .lt-story-pair{padding:92px 0 31px}
  .lt-pair figure+figure{margin-top:23px}
  .lt-pair picture{aspect-ratio:343.2/409}
  .lt-pair figcaption{max-width:none;margin-top:21px}
  /* The reference's phone sign off: a left aligned block in the right half. */
  .lt-story-pair .lt-sign{width:auto;margin:34.5px 0 0 min(50% - 12px,100% - 186.1px);text-align:left}

  .lt-gt{padding-top:38px}
  .lt-gt-row{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .lt-gt-a{grid-column:1/-1}
  .lt-gt-h{margin-top:9.5px}
  .lt-gt-draw{position:static;grid-column:2;width:min(150px,40vw);margin-top:-2.5px}
  .lt-on{padding-top:0}
  .lt-on .lt-label-i{margin-top:-28px}
  .lt-on .lt-label-i+.lt-rule{margin-top:8.5px}
  .lt-arch .lt-label-i+.lt-rule{margin-top:12px}
  /* The reference's phone poster: 181.5 x 209.5, about 53% of the column, with the date beside it. */
  .lt-ev{display:grid;grid-template-columns:52.9% minmax(0,1fr);column-gap:16px;padding:49px 0 28px}
  .lt-poster{grid-column:1;grid-row:1;padding-bottom:13%;aspect-ratio:181.5/209.5}
  .lt-poster-t{font-size:10px}
  .lt-poster-n{font-size:14px}
  .lt-poster-d{height:37cqw}
  .lt-poster-c{font-size:12px}
  /* 24 px keeps the softer time line large text, so its 3.6:1 contrast passes. */
  .lt-ev-when{grid-column:2;grid-row:1;justify-content:flex-end;font-size:24px;line-height:30px}
  .lt-ev-v{display:none}
  .lt-ev-what{grid-column:1/-1;grid-row:2;gap:12px;margin-top:24px;padding-top:30.5px;background:url(/static/rule-e-400-75e9b44ea68c.svg) center top/100% 16px no-repeat}
  .lt-ev-desc{grid-column:1/-1;grid-row:3;gap:34.5px;margin-top:14px;padding:0}
  .lt-arch{padding-bottom:147px}
  .lt-arch .lt-label-i{margin-top:99.5px}
  .lt-past{grid-template-columns:minmax(0,1fr);row-gap:40px;margin-top:39px}
  .lt-past-n{margin-top:6.1px}
  .lt-past-pic{aspect-ratio:343.2/458.6}
  .lt-box{width:calc(100% - 46.8px);max-height:calc(100% - 64px)}
  .lt-box-in{max-height:calc(100vh - 76px);padding:24px 16px 20px}
  .lt-box-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
  html:not(.lt-js) .lt-box-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .lt-vt{padding-top:25.5px}
  .lt-vt-row{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .lt-vt-a{grid-column:1/-1}
  .lt-vt-a .lt-lead{max-width:none;margin-top:9.8px}
  .lt-vt-draw{position:static;grid-column:2;width:min(120px,32vw);margin-top:.5px}
  .lt-visit{padding:55px 0 29px}
  /* The reference's privacy page shows one full width photo on phones (343.2 x 444): the warm room photo. */
  .lt-visit-pics{display:block}
  .lt-visit-pics>div{width:auto;aspect-ratio:343.2/444}
  .lt-visit-pics>div+div{display:none}
  .lt-visit-text{margin-top:16px}
  .lt-visit-stick{position:static;padding:0}
  .lt-visit-i+.lt-visit-i,.lt-visit-text .lt-credits{margin-top:48px}
  .lt-visit-text .lt-credits{max-width:none}
  .lt-visit-i .lt-kick{margin-bottom:14.2px}

  /* The reference's phone event page: the title, then the photos two by two (161.6 px squares, 20 px apart) 67 px
     under it. Its 166 px of paper above the title is not kept (review round 1: an empty band on phones). */
  .lt-et{padding:34px 0 104px}
  .lt-et-pics{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:67px}
  .lt-book-draw{right:0;top:calc(12.5px - min(118px,32vw) * .912);width:min(118px,32vw)}
  .lt-pager{height:85.6px}
  .lt-pager .lt-wrap{padding-top:19.8px}
  .lt-book{padding:30px 0 48px}
  .lt-book-v{display:none}
  .lt-book-b{margin-top:44px}
  .lt-book-stick{position:static;display:grid;grid-template-columns:minmax(0,1fr) min(150px,40vw);column-gap:16px;align-items:end}
  .lt-book-pic{grid-column:2;grid-row:1/3}
  .lt-book-b .lt-label{grid-column:1;grid-row:1;margin:0}
  .lt-yv{grid-column:1;grid-row:2;margin-top:8px}
  .lt-form{grid-template-columns:minmax(0,1fr)}
  .lt-choice-row{column-gap:6px}
  .lt-choice span{padding:0 5px}
  .lt-half{grid-column:1/-1}

  .lt-blog,html.lt-bar-closed .lt-blog{display:block;margin-top:0;padding:24px 0 72.5px}
  .lt-side-in,.lt-side.is-stuck .lt-side-in{position:relative;top:auto;height:auto;padding:0;transition:none}
  .lt-side-in::after{content:none}
  .lt-side-p{max-width:none;margin-top:11.3px}
  /* The reference's blog shows no drawing on phones. */
  .lt .lt-side-draw{display:none}
  .lt-posts{padding-top:16px}
  .lt-jf{display:block}
  .lt-jf .lt-jcard-pic{aspect-ratio:343.2/458}
  .lt-jf-text{margin-top:16px}
  .lt-jf .lt-jcard-cat,.lt-jp .lt-jcard-cat{font-size:14px;line-height:16.8px}
  .lt-jf-h{margin-top:10.4px}
  .lt-jf .lt-jcard-p{max-width:none;margin-top:10.2px}
  .lt-jps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin-top:55.5px}
  /* Both READ MORE buttons sit on one line at the foot of the row (review round 3, 20 October 2026): the reference
     lets each follow its own excerpt, so a longer one left them at two heights. */
  .lt-jp{display:flex;flex-direction:column}
  .lt-jp .lt-jcard-pic{aspect-ratio:3/4}
  .lt-jp .lt-jcard-top{flex-direction:column-reverse;align-items:flex-start;gap:17px;margin-top:14.5px}
  .lt-jp .lt-jcard-h{font-size:var(--fs-h3);line-height:.97}
  .lt-jp .lt-jcard-p{max-width:none;margin-top:15px}
  .lt-jp .lt-act{margin-top:auto;padding-top:21px}

  .lt-pantry-s{padding:46.5px 0 142px}
  .lt-pantry{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;row-gap:36px}
  /* As on the reference's phone shop: the rule runs from the first row of items to the last (an absolutely
     placed grid child takes its grid area as its box), the title cell sits above it, no drawing and no notes. */
  .lt-vrules{grid-row:2/auto;grid-column:1/-1;inset:0}
  .lt-vrule-1{left:calc(50% - 12px)}
  .lt-vrule-2{display:none}
  .lt-pantry-first{grid-column:1/-1;min-height:0;padding-bottom:12px}
  .lt-pantry-first .lt-note{max-width:none}
  .lt .lt-pantry-draw{display:none}
  .lt-pi-top{gap:10px;margin-top:15px}
  .lt-pi-h{font-size:18.5px;line-height:18.5px}
  .lt-pi-n{display:none}

  .lt-foot-in{grid-template-columns:minmax(0,48.4fr) minmax(0,35.5fr);column-gap:16.1%;min-height:0;padding:32px 0 26px}
  .lt-foot-a{grid-column:1/-1;grid-row:1}
  .lt-foot-row{width:100%;height:44px;margin-top:16px}
  .lt-foot-find{grid-column:1;grid-row:2;margin-top:36px}
  .lt-foot-map{grid-column:2;grid-row:2/4;margin-top:36px}
  .lt-foot .lt-label{margin-bottom:10px;font-size:13px}
  .lt-foot-map .lt-label{margin-bottom:0}
  .lt-foot-links{display:flex;flex-wrap:wrap;column-gap:16px;margin-top:6px}
  .lt-foot-links a,.lt-foot-map a{display:flex;align-items:center;min-height:44px}
  .lt-top{position:relative;top:auto;left:auto;grid-column:1;grid-row:3/5;width:min(200px,56vw);margin-top:22px}
  .lt-top-w{font-size:13px}
  .lt-ring{position:static;grid-column:2;grid-row:4;align-self:end;width:62px;margin:22px 0 4px}
  .lt-fbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:1.4em;padding:9px var(--side) 4px;line-height:21px}
  .lt-fbar>span:first-child{flex-basis:100%}
  .lt-fbar .lt-sep{display:none}
  .lt-fbar a{display:inline-flex;align-items:center;min-height:44px}
}

@media (max-width:599.98px){
  .lt-rule{height:16px}
  .lt-intro-draw{justify-self:center;margin-left:0}
  .lt-book-draw{top:calc(10px - min(118px,32vw) * .912)}
  .lt-rule-a{background-image:url(/static/rule-a-400-495fab6128fd.svg)}
  .lt-rule-b{background-image:url(/static/rule-b-400-a1471f4120c2.svg)}
  .lt-rule-c{background-image:url(/static/rule-c-400-3af437ef47d1.svg)}
  .lt-rule-d{background-image:url(/static/rule-d-400-875d8b3ecc7a.svg)}
  .lt-rule-e{background-image:url(/static/rule-e-400-75e9b44ea68c.svg)}
}

/* Narrow phones (under 360 px): each gathering's day, time and poster times stay on one line (review round 1). */
@media (max-width:359.98px){
  .lt-ev-when{font-size:21px;line-height:27px}
  /* Under 24 px the softer time line is small text, so it takes the darker ink (about 5:1 on the paper). */
  .lt-ev-time{color:var(--ink-soft)}
  .lt-poster{padding:11% 3%}
  .lt-poster-t{font-size:9.5px;letter-spacing:.02em}
  /* The name and price no longer fit side by side in a column of about 130 px (review round 2, 20 October 2026:
     the price ran past the photo's edge and the names broke to four lines), so the price goes under the name. */
  .lt-pi-top{flex-direction:column;align-items:flex-start;gap:5px}
  /* journal.html: in two columns of about 133 px the excerpts ran two or three words a line, so under 360 px the
     two cards stack in one column, as the home page's do (review round 3, 20 October 2026). */
  .lt-jps{grid-template-columns:minmax(0,1fr);row-gap:44px}
}

/* The notice wraps on narrow phones: the link goes to its own line and the dot is dropped. */
@media (max-width:389.98px){
  .lt-bar-dot{display:none}
  .lt-bar-more{display:block}
}