it replaced, no UA underline; the painted classes sit on the anchor itself, so color:transparent above already covers it and the ink render is unchanged. */ .lp-addr, .lp-flink{ display:block; text-decoration:none; } /* painted footer links: no UA underline/colour */ /* events calendar: hidden in base. Mobile re-shows the section (the .lp-sec rule in the max-760 block) with the compact day rows; web (min-761 below) re-shows it as a printed two-week wall-calendar grid (.cw) and keeps the mobile rows hidden. */ .lp-cal{ display:none; } .cw{ display:none; } /* web-only grid: base-hidden so the mobile sheet stays pixel-identical */ /* ══ WEB (>=761px): the events calendar as a printed TWO-WEEK WALL CALENDAR. Rows are split by horizontal ink lines and columns by vertical ink lines — but NO outer border at the far left/right, so the grid bleeds open at the sides. All lines are .rule elements painted by webgl-ink.js (the DOM markers themselves are transparent, exactly like .res-book-rule); every numeral/caption below is in the renderer's SEL list, so it's ink on the paper. The shared .lp-sec sizing (100vh snap sections, full width) comes from the desktop layout block — only this section's internals are defined here. ══ */ @media (min-width:761px){ .lp-cal{ display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; padding:calc(48px * var(--scale)) 0; } .lp-cal .cal-head, .lp-cal .cal-title, .lp-cal .cal-rows{ display:none; } /* the compact rows stay mobile-only */ .cw{ display:block; width:70vw; margin:0 auto; } /* header — the tracked title, then an italic Cormorant strapline; the whole block floats a touch higher (bigger gap below the strapline) so the title breathes away from the grid */ .cw-mon{ font-family:'Avenir Next','Helvetica Neue',sans-serif; font-weight:500; text-align:center; letter-spacing:.2em; text-indent:.2em; font-size:calc(20.5px * var(--scale)); margin-bottom:calc(14px * var(--scale)); } .cw-sub{ font-family:'Cormorant Garamond',Garamond,serif; font-style:italic; font-weight:400; font-size:calc(15.5px * var(--scale)); line-height:var(--lh); text-align:center; margin-bottom:calc(64px * var(--scale)); } .cw-rule{ width:100%; margin:0; background:transparent; opacity:1; } .cw-dows{ display:grid; grid-template-columns:repeat(7, 1fr); } .cw-dow{ font-family:'Avenir Next','Helvetica Neue',sans-serif; font-weight:500; text-align:center; letter-spacing:.14em; text-indent:.14em; font-size:calc(10.5px * var(--scale)); padding:calc(14px * var(--scale)) 0 calc(9px * var(--scale)); } /* top +3: the headers read centred between the rules (caps sit low in their line box) */ .cw-week{ position:relative; display:grid; grid-template-columns:repeat(7, 1fr); } .cw-cell{ box-sizing:border-box; min-width:0; min-height:21vh; padding:calc(12px * var(--scale)) calc(14px * var(--scale)); } .cw-num{ display:block; width:max-content; font-family:'EB Garamond',Garamond,serif; font-weight:700; font-size:calc(28px * var(--scale)); line-height:1.1; position:relative; } /* anchors the hand-drawn today-ring */ /* today's marker ring (injected by index.html when the date is in the printed window): a loose hand-drawn oval around the digit — bigger than the numeral, centred on it via 50% + em offsets (NO transform: the renderer reads layout boxes). em-based, so it tracks the numeral's size; pointer-events off, it's pure print. */ .cw-ring{ position:absolute; left:calc(50% - 1.25em); top:calc(50% - 1.02em); width:2.5em; height:2.04em; pointer-events:none; } .cw-ev{ display:block; margin-top:calc(10px * var(--scale)); font-family:'Cormorant Garamond',Garamond,serif; font-style:italic; font-weight:500; font-size:calc(14.5px * var(--scale)); line-height:1.22; } .cw-meta{ display:block; margin-top:calc(3px * var(--scale)); font-family:'EB Garamond',Garamond,serif; font-weight:400; font-size:calc(11.5px * var(--scale)); line-height:1.25; } /* vertical ink separators — invisible DOM markers the renderer paints (webgl-ink.js draws any .rule taller than wide as a vertical line). Six per week row, between columns 1|2 .. 6|7 only: none at the far left/right edges (the signature open look). Cells are the week row's children 1-7, so the separators are children 8-13. */ .cw-vr{ position:absolute; top:0; bottom:0; width:1px; height:auto; margin:0; border:0; background:transparent; opacity:1; } .cw-vr:nth-child(8){ left:calc(100% / 7); } .cw-vr:nth-child(9){ left:calc(100% / 7 * 2); } .cw-vr:nth-child(10){ left:calc(100% / 7 * 3); } .cw-vr:nth-child(11){ left:calc(100% / 7 * 4); } .cw-vr:nth-child(12){ left:calc(100% / 7 * 5); } .cw-vr:nth-child(13){ left:calc(100% / 7 * 6); } } /* ── phone: full-screen scroll-snap sections (the reservations V1 mobile format) ── */ @media (max-width:760px){ /* overscroll-behavior-y:none kills the iOS rubber-band / pull-to-refresh bounce that made '21+ ESTABLISHMENT' (and the whole hero) drift up/down on an overscroll gesture. */ /* mandatory (crisp, perfect on Safari); the Chrome-iOS / DDG late-toolbar-resize re-snap is neutralised by the JS snap-suspend shim in webgl-ink.js, not by weakening the CSS. */ html:has(.lp){ scroll-snap-type:y mandatory; scroll-behavior:smooth; overscroll-behavior-y:none; } /* Chrome-iOS / DDG: webgl-ink's shim adds .snap-off through a height-only resize (the bar popping) — mandatory snap would otherwise re-snap mid-scroll (the jump). Safari never gets the class. Applies to every snap page (landing, reservations, menus). */ html.snap-off{ scroll-snap-type:none !important; } body:has(.lp){ overscroll-behavior-y:none; } .lp{ width:auto; margin:0; padding:0; } /* EVERY landing section is a fixed 9:16 panel — height comes from the WIDTH, not the viewport height — so the safe area / device height never reshapes a section; content just re-flows inside it. (9:16 is shorter than a typical phone viewport, so the next panel peeks below.) */ .lp-sec{ margin:0; box-sizing:border-box; width:100vw; height:calc(100vw * 16 / 9); scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column; justify-content:center; padding:calc(40px * var(--scale)) 0; --lp-gut:13vw; position:relative; } /* positioning context for absolutely-placed section content */ /* hero: logo + tagline flex-centred. It CAPS at 86% of the frozen with-bar viewport so the next image always peeks above the bottom bar on first load — a plain 9:16 hero is taller than the with-bar viewport on tall phones, so its peek fell below the fold / under the bar. On short/wide phones min() keeps it a true 9:16 panel. */ /* the logo + tagline group centres between the NAV'S BOTTOM edge and the panel's bottom (= the top of the next section's image), not mid-panel: the nav floats over the hero, so its measured height becomes padding and the flex centring happens below it. */ /* the 0.86 cap must measure the WITH-BAR viewport — that is what buys the "next image peeks above the bottom bar" first load. 100svh IS that height and is STATIC (it does not track the bar), so using it here cannot bring back the mid-scroll growth --fixvh was changed to kill. --fixvh stays the bar-HIDDEN height for the full-screen sections. */ .lp-hero{ padding:var(--nav-h, 76px) 0 0; min-height:0; /* the base 80vh min would breathe */ height:min(calc(100vw * 16 / 9), calc(var(--loadvh, 100svh) * 0.86)); } /* --loadvh: frozen at-load height (svh BREATHES in Chrome/DDG — the webview resizes with their bars); Safari has no --loadvh and keeps its stable svh */ /* logo + tagline read as ONE group, flex-centred; more room between them */ .lp-tagline{ margin-top:calc(var(--loadvh, 100vh) * 0.08); font-size:clamp(11px, 3vw, 14px); } .ink-logo{ width:min(150px, 40vw); } /* x1.12 to match the padded asset — same visual size */ /* first image screen is itself a 9:16 panel; the image fills it edge-to-edge, and The Space (the next 9:16 panel) butts right against its bottom edge. */ /* the image fills the panel edge-to-edge exactly as before; the poster type prints INSIDE the image bounds — head band at its top, captions at its foot */ .lp-sec--pair{ padding:0; justify-content:flex-start; position:relative; } .print-photo.lp-photo--pair{ width:100vw; height:100%; aspect-ratio:auto; } .pp-head, .pp-caps{ position:absolute; left:0; right:0; z-index:2; padding:0 calc(34px * var(--scale)); } /* the poster insets its dates ~9% of the sheet */ .pp-head{ top:calc(30px * var(--scale)); } .pp-caps{ bottom:calc(30px * var(--scale)); gap:calc(18px * var(--scale)); } .pp-date{ font-size:calc(17px * var(--scale)); } .pp-cap{ font-size:calc(12.5px * var(--scale)); } .pp-div{ width:calc(100px * var(--scale)); height:calc(13px * var(--scale)); margin:.5em auto calc(.5em + 6.5px * var(--scale)); } .pp-name{ font-size:calc(14.5px * var(--scale)); } .pp-desc{ font-size:calc(12px * var(--scale)); line-height:1.45; } /* interior screen: nav + rule, then a SQUARE image (1:1, the divider's width), then Our Story underneath — the copy scrolls within itself (ink-clip fade) when it overflows. Unlike the other 9:16 panels this one owns a FULL screen, so the footer (and its rule) never peeks in at the bottom: lvh is the bar-HIDDEN height and never changes as the toolbar comes and goes, so it can't peek in either bar state and can't jump. */ /* the top gap MATCHES the side inset: the rule and the 88vw image both sit 6vw in from each edge, so 6vw of air above them squares the panel off (they were 12px vs 23px). */ .lp-sec--interior{ padding:6vw 0 calc(46px * var(--scale)); /* LARGE PROTOTYPE: the old overhang tail read live svh (breathes in DDG) — content now lays out in the full large box */ gap:calc(12px * var(--scale)); height:auto; min-height:var(--fixvh, 100svh); } /* (5) Safari never gets --fixvh, so ITS fallback must be lvh — the bar-HIDDEN height — or the footer's rule shows through the moment Safari's toolbar retracts. @supports because var(--fixvh, 100lvh) is invalid at computed-value time without lvh, which would collapse the section entirely; a plain second declaration cannot rescue that. */ @supports (height:100lvh){ .lp-sec--interior{ min-height:var(--fixvh, 100lvh); } } /* match the top-bar nav: same font size and same side inset (bar-pad + gutter). Tighter to the line above and to the image below (was 28px each side). */ .lp-sec--interior .lp-nav{ padding:0 calc(var(--bar-pad) + var(--gutter)); font-size:var(--fs-nav); margin:calc(14px * var(--scale)) 0; } /* 88vw (the divider's width) on every phone, capped by the panel so the square can't eat the screen on a wide/short viewport where --scale snaps back to 1 */ .print-photo.lp-photo--interior{ width:min(88vw, calc(var(--fixvh, 100svh) * 0.52)); aspect-ratio:1 / 1; height:auto; flex:0 0 auto; min-height:0; margin-inline:auto; } .lp-sec--interior .lp-text{ padding:0 var(--lp-gut); } /* Our Story: breathing room above the heading (to the image), and the copy becomes the section's flexible remainder — a real scroller with the web ink-clip fade */ /* the same air above the heading as below the copy (the section's bottom padding) */ /* a floor of heading + ~3 lines: flex-basis stays 0 (the copy is still the section's flexible remainder) but the box can no longer collapse, so the panel grows instead — and the ink-clip host can never fall under the renderer's <2px inert guard. */ .lp-sec--interior .lp-text--story{ display:flex; flex-direction:column; flex:1 1 0; min-height:calc(112px * var(--scale)); margin-top:calc(46px * var(--scale)); } /* overscroll-behavior AUTO, not contain: `contain` blocks scroll chaining even when this box has NOTHING to scroll, so a finger landing on the copy dead-ended the page. With `auto` a non-overflowing box passes the gesture straight through, and one that IS overflowing hands the page back the moment it hits either end. */ .lp-sec--interior .lp-story-scroll{ display:block; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:auto; scrollbar-width:none; -ms-overflow-style:none; } .lp-sec--interior .lp-story-scroll::-webkit-scrollbar{ display:none; } .lp-story-scroll .lp-body + .lp-body{ margin-top:calc(24px * var(--scale)); } /* the gap the flex parent used to draw */ .lp-sec--space, .lp-sec--story{ gap:calc(44px * var(--scale)); } .lp-text{ padding:0 var(--lp-gut); gap:calc(24px * var(--scale)); } /* The Space is a FULL screen — nothing from the next section peeks at the bottom (no rule / nav / image protruding). The nav + rule live only at the top of the following section. Content stays centred (padding above heading / below Gallery). */ .lp-sec--space{ height:auto; min-height:var(--fixvh, 100svh); } /* extra breathing room under The Space body copy (not the header) -> before the image */ .lp-sec--space .lp-text{ margin-bottom:calc(36px * var(--scale)); } /* ── Events calendar (paper / ink): a centred 'HAPPENING NOW' title over compact day rows (event LEFT, date RIGHT) split by ink rules. justify-content:center leaves blank space above the title and below the last row. ── */ .lp-cal{ height:var(--fixvh, 100svh); min-height:0; justify-content:center; padding:calc(52px * var(--scale)) var(--lp-gut); gap:calc(38px * var(--scale)); } /* the day list is a SCROLLER (ink-clip fade at the edges, today on top); rows shrank so more of the fortnight shows before scrolling */ /* a FIXED window of eight rows: adding days changes nothing about the block's height or where it sits on the screen — it just scrolls inside. */ /* padding-top starts the list slightly lower so today's RING (which reaches above its numeral) is not clipped at the box's top edge on first paint */ .cal-rows{ flex:0 0 auto; box-sizing:border-box; height:calc(96px * var(--scale) * 8 + 14px * var(--scale)); padding-top:calc(14px * var(--scale)); min-height:0; overflow-y:auto; overscroll-behavior:auto; /* same pass-through as the story copy */ scrollbar-width:none; -ms-overflow-style:none; } .cal-rows::-webkit-scrollbar{ display:none; } /* title + strapline read as ONE block, so the section's flex gap applies to the PAIR */ .cal-head{ display:flex; flex-direction:column; align-items:center; gap:calc(12px * var(--scale)); margin-bottom:calc(16px * var(--scale)); } /* a bit more air before the list */ .cal-title{ font-family:'Avenir Next','Helvetica Neue',sans-serif; font-weight:500; text-align:center; letter-spacing:.2em; text-indent:.2em; font-size:clamp(16px, 4.8vw, 20px); } /* the same proportion to the title as on web (15.5 / 20.5 = 0.756) */ .cal-sub{ margin:0; font-family:'Cormorant Garamond',Garamond,serif; font-style:italic; font-weight:400; text-align:center; line-height:var(--lh); font-size:clamp(12px, 3.63vw, 15px); } .cal-rows{ display:flex; flex-direction:column; } /* rows carry their own rules */ /* compact rows -> more days fit; date and event share a tight, uniform line height */ /* ONE container per day: event text left, date right, a single rule pinned to the row's BOTTOM edge, and zero gap to the next row — so the numerals sit in a clean band between two lines and the ring can spill over them without changing any box. */ /* The row grows ONLY by what extra events need: its padding is fixed, so the gap from the top rule to the first event and from the last event to the bottom rule is identical in every row. min-height keeps a one-event (or empty) day at the standard height. */ .cal-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:calc(14px * var(--scale)); box-sizing:border-box; padding:calc(22.5px * var(--scale)) 0; /* = (standard row - one event block) / 2, so a tall row keeps the SAME gaps */ flex:0 0 auto; /* never let the column shrink a row — the box SCROLLS instead */ min-height:calc(96px * var(--scale)); } .cal-rule{ position:absolute; left:0; right:0; bottom:0; width:auto; margin:0; } .cal-ev{ display:flex; flex-direction:column; gap:calc(14px * var(--scale)); min-width:0; overflow:hidden; max-width:calc(100% - 200px * var(--scale)); } /* the date block is out of flow: the reserve keeps a REAL gap (~40px) to the numeral — and the text must truly wrap inside it (see below): the ink painter reads text RANGES, which ignore overflow clipping, so a nowrap line paints straight under the numeral */ .cal-ev-one{ display:flex; flex-direction:column; gap:calc(2px * var(--scale)); min-width:0; } .cal-row--tall{ align-items:flex-start; } /* height now comes from the events themselves */ /* WRAP, never clip: overflow:hidden only hides the DOM text — the ink painter paints from ranges, and a nowrap range ran 21px under the numerals (measured). Wrapping at spaces keeps every painted line inside the reserve; tall rows grow as designed. */ .cal-ev-title, .cal-ev-meta{ white-space:normal; overflow:hidden; } .cal-ev-title{ font-family:'Cormorant Garamond',Garamond,serif; font-style:italic; font-weight:600; font-size:clamp(14px, 4.2vw, 19px); line-height:1.05; } .cal-ev-meta{ font-family:'EB Garamond',Garamond,serif; font-weight:100; font-size:clamp(10px, 3vw, 13px); line-height:1.15; } /* padding-right buys the today-RING room to finish inside the scroll box (it is wider than the numeral and the box clips ink); position/top lifts the pair by the numeral's own ink offset — measured 0.069em — so the DIGITS, not their em box, centre between the rules */ /* a small inset from the container edge, and EVERY day-letter box the same width, so no numeral ends up nearer the edge than another (SU/MO/TU/WE/TH/FR/SA differ in ink width) */ .cal-date{ display:flex; align-items:flex-start; gap:calc(3px * var(--scale)); flex:0 0 auto; padding-right:calc(11px * var(--scale)); } /* line-height 1 is REQUIRED: the renderer paints the baseline at rangeTop + fontSize*0.80, and with a 1.0 line box that lands the digits' ink centred in the row (9.1 / 8.5 px at 375). A sub-1 line-height moved the browser's box but not the painted glyph — that is what made the numerals straddle the rules. */ .cal-num{ font-family:'EB Garamond',Garamond,serif; font-weight:800; font-size:calc(100px * var(--scale)); line-height:1; position:relative; } /* out of flow: a day with several events grows downward, but the numeral stays exactly where a one-event day puts it (and can never stretch the row itself) */ .cal-row .cal-date{ position:absolute; right:0; top:calc(-1px * var(--scale)); } /* today's ring (same hand-drawn marker as the web calendar), wrapped around the number. Sized to stay inside its OWN row now that the numerals are large (0.91em tall vs the 60.4px row), and nudged down 0.069em because the numeral's ink sits that far below its box centre — so the oval rides the DIGIT, not the em box. */ /* mounted on the SECTION (not in the scroll box) and placed by JS over today's numeral, so it truly overflows the list — across rules, neighbouring days and the box's edge */ .lp-cal{ position:relative; } .cal-ring{ position:absolute; pointer-events:none; z-index:2; } /* SUPERSCRIPT: flush with the TOP of the numeral (the box now hugs the digits, so flex-start + no margin lands the caps at the digit's ink top) */ /* SUPERSCRIPT: dropped to the numeral's INK top (the numeral's line box starts ~10px above its ink at this size, so flex-start alone would float the caps too high) */ .cal-dow{ font-family:'Avenir Next','Helvetica Neue',sans-serif; font-weight:500; letter-spacing:.1em; font-size:clamp(8px, 2.4vw, 10px); line-height:1; margin-top:calc(16px * var(--scale)); width:2.05em; flex:0 0 auto; } /* one width for every day: the widest pair + its tracking */ .lp-head{ font-size:clamp(19px, 5.2vw, 27px); } /* The Space / Our Story — smaller */ .lp-head--sm{ font-size:clamp(12px, 3.4vw, 15px); } /* Directions / Contact — significantly smaller */ .lp-body{ font-size:clamp(13px, 3.7vw, 18px); } /* copy under The Space / Our Story — smaller (matches) */ .lp-body--up{ font-size:clamp(12px, 3.5vw, 16px); } /* footer address / contact — slightly smaller */ .print-photo.lp-photo--space{ width:60vw; } /* original size — unchanged */ /* GSA shell: the bars are permanently on, so the shell viewport is the small at-load frame — at 60vw the 2:3 photo pushes the Gallery link past the fold (measured: link at 643..663 of 659). Height-driven cap: the photo may only use what the section's fixed content leaves over (heading+copy ~231, gaps ~74, link 20, ~30 of visible bottom padding = 355px), converted to width via the 2:3 aspect. Google app only. */ html.gsa-shell .print-photo.lp-photo--space{ width:min(60vw, calc((var(--fixvh, 100svh) - 391px) * 2 / 3)); } /* spacing spec: P below the text = P below the Gallery link, P/2 between image and link (P = the section's own 44*scale gap). The flex gap already gives P above the photo; the wrap's margin pulls the photo->link gap to P/2; the photo cap above leaves exactly P of paper under the link within the fixvh section. */ html.gsa-shell .lp-sec--space .lp-gallery-wrap{ margin-top:calc(-7px * var(--scale)); } .lp-sec--gallery{ gap:calc(46px * var(--scale)); } .lp-gallery{ font-size:clamp(13px, 3.8vw, 16px); } .lp-divider{ width:88vw; margin-inline:auto; } .lp-nav{ padding:0 8vw; font-size:clamp(15px, 4.6vw, 20px); } /* the footer is NOT a full panel: the document simply ends under the last section (as on web) — height comes from content, with honest padding either side */ .lp-footer{ height:auto; min-height:0; justify-content:center; padding:calc(30px * var(--scale)) 8vw calc(58px * var(--scale)); gap:calc(29px * var(--scale)); } /* Index: the five links flow in rows instead of one tall stack. FLEX, not a grid of equal columns — every gap is then measured from the END of one word to the start of the next (a grid column would place 'Events' off the widest cell, i.e. off the middle of nothing). A zero-height break element after the third link keeps it to 3 + 2. */ .lp-footer .lp-foot-grp--index{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; /* .lp-foot-grp is a column stack — this row overrides it */ column-gap:calc(22px * var(--scale)); row-gap:calc(10px * var(--scale)); } .lp-footer .lp-foot-grp--index .lp-foot-h{ flex:0 0 auto; } .lp-footer .lp-foot-br{ display:block; flex:0 0 100%; width:100%; height:0; } /* printed underline under each footer header (mobile only). The line box already carries ~2.8px of leading below the glyphs, so the margin is what's left of a HALVED gap (6.4px total -> ~3.4px). */ .lp-footer .lp-foot-rule{ display:block; width:100%; margin:calc(1px * var(--scale)) 0 0; } .lp-footer .lp-ig{ margin-top:calc(10px * var(--scale)); /* air between the phone number and the glyph */ margin-bottom:calc(7px * var(--scale)); } /* and under the glyph */ .lp-footer .lp-divider{ width:100%; margin:0 0 calc(8px * var(--scale)); } .lp-ig{ width:clamp(22px, 6vw, 30px); } } /* ============================ WEB LANDING (index.html, >760px) ============================ Full-viewport snap sections, like the reservations desktop: the .lp column goes full-width, every .lp-sec becomes a 100vh screen (the wheel glide in index.html moves exactly one per input), and the nav floats over the hero. Sections that keep the old centered-column look constrain their CONTENT instead (the column itself is no longer 560px). All of it lives in this min-width block so nothing can leak into the mobile (<=760px) layout above. */ /* web-only composition pieces (second pair image + the paper window) — hidden by default so mobile never sees them; the min-width block below re-shows and places them. */ /* ── BI-WEEKLY pairing poster (first image section): dates flanking a stacked caps title above the print, the pairing captions below across a printed vertical rule. All painted ink (item-name/item-desc); the caps carry their OWN Avenir Next at every breakpoint (house rule: all-caps is never set in the serifs). */ .pp-cap{ font-family:'Avenir Next','Helvetica Neue',sans-serif; font-weight:500; letter-spacing:.22em; text-indent:.22em; text-align:center; } .pp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .pp-title{ flex:1 1 auto; min-width:0; } .pp-date{ flex:0 0 auto; font-family:'Cormorant Garamond',Garamond,serif; font-style:italic; font-weight:300; } /* the divider: TWO INTERSECTING LINES forming a wide, flat X (the reference drawing) — each a real printed rule (usual thickness) rotated a few degrees, painted by the renderer's rotated-rule path. The container height just reserves the X's rise. */ .pp-div{ position:relative; margin:.5em auto; } /* measured INK gaps (not boxes): the caps' line boxes hide descender room above the X and almost none below it — the bottom margin carries the difference so the DRAWN X sits visually centred between the two texts */ .pp-x{ position:absolute; left:0; top:50%; width:100%; height:1px; margin:0; display:block; } .pp-x--a{ transform:rotate(7deg); } .pp-x--b{ transform:rotate(-7deg); } .pp-caps{ display:flex; align-items:stretch; } .pp-col{ flex:1 1 0; min-width:0; } .pp-caps .pp-col:last-of-type{ flex:1.6 1 0; } /* the fuller side gets the wider column — the rule rides the balance, not the centre */ .pp-vrule{ flex:0 0 auto; width:1px; height:auto; align-self:stretch; margin:0; display:block; } .pp-desc{ margin:.35em 0 0; } .pp-desc--it{ font-style:italic; } .lp-pair-sm, .lp-pair-paper{ display:none; } /* Our Story's copy wrapper: layout-invisible on web (the renderer ignores boxless ink-clip hosts); the mobile block above turns it into the real scroller */ .lp-story-scroll{ display:contents; } @media (min-width:761px){ html:has(.lp) .topbar{ position:absolute; left:0; right:0; z-index:7; } /* nav floats over the hero, as on reservations */ .lp{ width:100%; max-width:none; padding-bottom:0; } .lp-sec{ min-height:100vh; box-sizing:border-box; width:100%; margin:0; position:relative; } /* positioning context for absolutely-placed section content (pair pieces etc.) */ /* hero: the topbar is out of the flow (absolute), so plain flex-centring would centre the logo group in the FULL viewport. padding-top = the measured nav height (--nav-h, set by index.html's setNavH, same pattern as reservations) + box-sizing:border-box (on .lp-sec) shrinks the flex content box to nav-bottom..page-bottom, so the group centres THERE. The wordmark gets a FIXED width (not viewport-tied). */ .lp-hero{ height:100vh; padding-top:var(--nav-h, 80px); } .ink-logo{ width:200px; } .lp-tagline{ font-size:13px; } /* a notch under the 15px base; tracking unchanged */ /* interior (Our Story): the old centred-560px-column rule is gone — the section now mirrors The Space split; its layout lives in the web block further down. */ /* ── two-image composition: image 1 fills the left half of the screen; a WINDOW of clean paper sits over image 1's right side with its right edge exactly ON the 50vw seam, and image 2 starts exactly AT that seam — the two meet edge to edge. Both share the SAME height but real photography ratios that DIFFER: the paper window is 3:4 portrait, the right print a wider 4:5 — each width is ratio x height on BOTH min() arms, so the ratios stay exact on either side of the min() flip (the old vw x vh sizing drifted square on wide viewports); min() guards ultrawides so the height never exceeds the section. Vertical centring via top/bottom 0 + auto margins — no transforms (the ink renderer mis-places transformed content). The window is a print tile whose source is pure white (../img/white.jpg): the shader multiplies photo x paper, so it renders as the bare sheet showing through, wicked edge included. ── */ .lp-sec--pair{ position:relative; height:100vh; } /* 50% (container), NOT 50vw: vw includes the scrollbar, the container doesn't — mixing the two put every "half the screen" edge on a DIFFERENT midline (off by a scrollbar width) from section to section. All half-screen geometry now shares the container midline. */ .print-photo.lp-photo--pair{ position:absolute; left:0; top:0; width:50%; height:100vh; aspect-ratio:auto; } /* height is written out (shared by both pieces), not aspect-ratio: with top+bottom insets the abs box stretches and aspect-ratio loses; explicit height + auto margins = true centring. Widths are per-piece below (ratio x this height). Both pieces position with LEFT in vw, same unit space as image 1's 50vw width — right:50vw resolved against the section's content box and sat a scrollbar-width off the seam. */ .lp-pair-sm, .lp-pair-paper{ display:block; position:absolute; top:0; bottom:0; margin-top:auto; margin-bottom:auto; height:min(45vw, 69vh); } /* 4:5 (wider than the window) — width = height * 4/5 on both min() arms (45*4/5 = 36vw, 69*4/5 = 55.2vh). Anchored on the seam (left:50%) it grows RIGHTWARD only: max right extent 50 + 36 = 86vw, no overflow. */ .lp-pair-sm{ left:50%; width:min(36vw, 55.2vh); } /* The paper window KEEPS 3:4 — base width min(33.75vw, 51.75vh) = height * 3/4 on both min() arms; only .lp-pair-sm got wider. SEAM FIX: geometry puts the window's right edge and image 2's left edge on the identical 50vw pixel, but the shader wicks every tile edge OUTWARD with fibre jitter (cov = 1-smoothstep(0,bw, sd-(fib-0.5)*bw*1.6), bw = 2.2*uEff -> 2.2 CSS px), so the two wicks mix visibly at the seam. Max outward reach = bw + 0.8*bw = 1.8*2.2 = 3.96 CSS px; ceil -> 4, +1 safety -> 5px. Extend ONLY the window's WIDTH by that 5px so its right edge tucks UNDER image 2 (later in DOM -> blends over the overlap, and its own left wick lands on the window's white instead of image 1's grey). Left edge must not move. */ .lp-pair-paper{ left:calc(50% - min(33.75vw, 51.75vh)); width:calc(min(33.75vw, 51.75vh) + 5px); } /* the poster type prints INSIDE that paper window — which is a vertically CENTRED band (height:min(45vw,69vh), margin auto), not the full section. Mirror its geometry: --ppt = the window's top offset, --ppb = the padded bottom inset. The dates sit at the window's top edge + the shared padding, the captions end the same padding above its bottom edge, and the title centres in the window (the head band spans the padded window, dates pinned to its top, the title flex-centred within). */ .lp-sec--pair{ --ppw:min(33.75vw, 51.75vh); --pph:min(45vw, 69vh); --ppt:calc((100vh - var(--pph)) / 2); --ppp:clamp(26px, 4.4vh, 44px); --ppb:calc(100vh - var(--ppt) - var(--pph) + var(--ppp)); } .pp-head, .pp-caps{ position:absolute; left:calc(50% - var(--ppw)); width:calc(var(--ppw) + 5px); box-sizing:border-box; padding:0 2.6vw; z-index:2; } .pp-head{ top:calc(var(--ppt) + var(--ppp)); bottom:var(--ppb); align-items:flex-start; } .pp-head .pp-title{ position:absolute; left:2.6vw; right:2.6vw; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; } .pp-caps{ bottom:var(--ppb); gap:1.6vw; } .pp-date{ font-size:clamp(13px, 1.25vw, 17px); } .pp-cap{ font-size:clamp(9px, .86vw, 12px); } .pp-div{ width:clamp(54px, 5vw, 72px); height:clamp(8px, .8vw, 11px); margin:.5em auto calc(.5em + 6.5px); } .pp-name{ font-size:clamp(12px, 1.1vw, 15px); } .pp-desc{ font-size:clamp(10.5px, .94vw, 13px); line-height:1.4; } } /* ══════════ WEB LANDING (min-width:761px) — The Space split · V1/V2 duo · footer ══════════ Desktop-only styling for the landing's sections. The SHARED frame (full-width .lp, every .lp-sec a min-height:100vh snap section, absolute topbar, JS glide) is defined elsewhere — these rules only lay out the INTERNALS of the sections below. Mobile (max-width:760px above) is untouched. */ /* V2-only, web-only section: hidden in the BASE (appended after the mobile block, so it also beats the mobile `.lp-sec{display:flex}` — same specificity, later in the file — and a phone NEVER shows the duo, toggle or not). Re-shown only for body.v2 inside the web block below. */ .lp-sec--duo{ display:none; } @media (min-width:761px){ /* ── The Space (V1): image fills the LEFT half edge-to-edge, text centred in the RIGHT half, the Gallery link overlaid near the image's bottom (the ink renderer now overprints ink on photos, so the link + its rule print ON the picture). Pure CSS reorder via grid placement — the DOM keeps the mobile order (text, photo, gallery). No transforms: the ink renderer mis-places transformed text. ── */ /* 1fr|1fr, not 50vw|1fr: both half-screen sections must split on the CONTAINER midline (50vw includes the scrollbar and put this seam ~15px off the mirrored section's seam). */ .lp-sec--space{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:100vh; gap:0; position:relative; } .lp-sec--space .print-photo.lp-photo--space{ grid-column:1; grid-row:1; width:100%; height:100vh; aspect-ratio:auto; margin:0; } .lp-sec--space .lp-text{ grid-column:2; grid-row:1; align-self:center; justify-self:center; width:30vw; } /* centred WITHIN the left half, no transform: left+right insets pin the area to the image, auto margins centre the max-content box inside it (50%, not 50vw — container midline) */ .lp-sec--space .lp-gallery-wrap{ position:absolute; left:0; right:50%; bottom:46px; margin:0 auto; width:max-content; z-index:5; } /* a touch more breathing room off the image's bottom edge */ .lp-sec--space .lp-gallery{ font-size:18px; } /* a touch smaller than the base 21px */ /* ── Our Story (V1): the MIRROR of The Space — image fills the RIGHT half edge-to-edge, text centred in the LEFT half. Same grid mechanics, columns flipped; DOM keeps the mobile order (rule, nav, photo, text) and grid placement reorders. The mobile furniture inside this section (the .lp-divider rule + mid-page .lp-nav) has no place in the full-bleed mirrored layout, so BOTH are hidden on web. No transforms. ── */ .lp-sec--interior{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:100vh; gap:0; } .lp-sec--interior .print-photo.lp-photo--interior{ grid-column:2; grid-row:1; width:100%; height:100vh; aspect-ratio:auto; margin:0; } .lp-sec--interior .lp-text--story{ grid-column:1; grid-row:1; align-self:center; justify-self:center; width:30vw; } .lp-sec--interior .lp-divider, .lp-sec--interior .lp-nav{ display:none; } /* the 4th section (Our Story · story2) is REVERSED: image left, text right */ .lp-sec--story2 .print-photo.lp-photo--interior{ grid-column:1; } .lp-sec--story2 .lp-text--story{ grid-column:2; } /* V1 split sections: quieter type than the base landing sizes (32/21) */ .lp-sec--space .lp-head, .lp-sec--interior .lp-head{ font-size:24px; } .lp-sec--space .lp-body, .lp-sec--interior .lp-body{ font-size:16px; } /* ── V1 / V2 switch (web only — mobile always shows the V1 sections; the duo stays base-hidden there and .ver-toggle is display:none). V2 swaps sections 3+4 for the duo. ── */ body.v2 .lp-sec--space, body.v2 .lp-sec--interior:not(.lp-sec--story2){ display:none; } /* the extra story section belongs to the V2 set: any layout that isn't V2 hides it */ body:not(.v2) .lp-sec--story2{ display:none; } /* SHAYE-style pair: both images the SAME HEIGHT (--duoH — vh-driven, but CAPPED in vw so squarish screens still fit: total width = 2.6 * duoH + 6vw gap, and 2.6 * 34vw + 6vw = 94.4vw < 100vw even when the vw arm wins), different shapes: The Space a TRUE 1:1 square (track = duoH), Our Story a WIDE 16:10 landscape (duoH * 16/10). The grid tracks ARE the image widths, so each column's text wraps to its own image and left-aligns to that image's left edge. Grid, not flex: align-items:start pins BOTH images' tops to one line, align-content:center centres the pair as a block. The footer no longer shares this screen (it's a shallow reveal below the last section), so the duo owns a full 100vh again. */ body.v2 .lp-sec--duo{ --duoH:min(46vh, 34vw); display:grid; grid-template-columns:var(--duoH) calc(var(--duoH) * 16 / 10); /* left a TRUE 1:1 square, right wide 16:10, same height */ gap:6vw; justify-content:center; align-content:center; align-items:start; min-height:100vh; } .lp-duo-col{ display:flex; flex-direction:column; } .lp-duo-fig{ position:relative; } /* Gallery link BELOW The Space copy, left-aligned in the column flow (moved off the image) */ .lp-sec--duo .lp-gallery-wrap{ margin:calc(16px * var(--scale)) 0 0; width:max-content; } .lp-sec--duo .lp-gallery{ font-size:16px; } /* duo-only vertical rhythm (explicit margins, no flex gap): clear padding image -> heading, a tighter step heading -> copy. Type runs smaller than the base landing sizes here. */ .lp-duo-col .lp-head{ margin-top:calc(26px * var(--scale)); font-size:calc(18px * var(--scale)); } .lp-duo-col .lp-body{ font-size:calc(14px * var(--scale)); } /* the copy is CAPPED at 5 lines and scrolls within itself (renderer clips + edge-fades the painted ink via [data-inkclip]); no scrollbar, no overscroll chaining into the page glide. FADE HEADROOM: one line-height of padding-top, cancelled by an equal negative margin — the first line sits exactly where it always did (12px under the heading, layout height unchanged), but the box now CLIPS one line higher, so the outgoing line stays visible while it fades instead of meeting the container's hard edge mid-gradient. max-height carries the extra line (border-box), keeping 5 lines of text on screen. */ .lp-duo-col .lp-body{ --inkpad:1.36em; padding-top:var(--inkpad); margin-top:calc(12px * var(--scale) - var(--inkpad)); max-height:calc(1.36em * 5 + var(--inkpad)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none; } .lp-duo-col .lp-body::-webkit-scrollbar{ display:none; } .print-photo.lp-photo--duo{ width:100%; height:var(--duoH); } /* fills its grid track: 1:1 square left, wide 16:10 right, same height — larger images = wider text columns = shorter copy blocks, less vertical cramp */ /* below 1200px of window width, the WHOLE duo scales as width/1200 — the 1200-wide look is the floor reference; side proportions hold (the gap is vw, the grid stays centred). min(46vh, 408px) * (100vw/1200px) is CONTINUOUS with the >=1200 formula in both regimes (408px = 34vw at exactly 1200). At >=1200 nothing changes. TYPE does NOT scale — it stays at full size and simply WRAPS in the narrower columns (shrunken text went illegible almost immediately); the 5-line cap + scroll-fade absorbs the extra lines. */ @media (max-width:1200px){ body.v2 .lp-sec--duo{ --duoH:calc(min(46vh, 408px) * (100vw / 1200px)); } } /* ── Footer — ONE layout for V1 and V2 (the V2 treatment, kept): NOT a full screen, a shallow band right below the last section. The final scroll stop is the document end (the glide caps at maxY), so the last view shows the previous section with its top clipped and the footer at the bottom, padding above and below. The columns (Directions · Hours · Contact · Explore) sit side by side — never stacked — as ONE cluster centred across the page, each column's own copy left-aligned under its heading. The rule keeps spanning the sheet: it's a full-width flex line of its own, which also forces the columns onto the line below. Widths/margins only — no transforms. ── */ .lp-footer{ min-height:0; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; column-gap:clamp(40px, 5vw, 96px); row-gap:calc(28px * var(--scale)); padding:9vh 2vw 7vh; } .lp-footer .lp-divider{ flex:0 0 100%; width:100%; margin:0 0 calc(18px * var(--scale)); } .lp-footer .lp-foot-grp{ gap:calc(8px * var(--scale)); } .lp-footer .lp-head--sm{ font-size:15px; } .lp-footer .lp-body--up{ font-size:13px; } .lp-footer .lp-ig{ width:calc(24px * var(--scale)); margin-top:calc(6px * var(--scale)); } } /* ============ CAREERS (careers.html) · PRIVATE-EVENTS FORM (events.html) · /OTHER ============ Three page additions, all namespaced (.careers-* under body.careers-page, .events-form/.ev-*, .other-* under body.other-page) — nothing here touches existing pages. BASE = desktop, per the file convention; the single mobile block at the end restacks careers and rescales the /other print. All TYPE reuses the already-painted classes (.section-title, .item-name, .item-desc, .res-book, .rule markers) — no new painted classes, no webgl-ink.js changes. */ /* ── CAREERS: a 3:2 landscape print offset a little from the left edge; CAREERS in the tracked-caps title style centred in the space to its right. The group sits vertically centred between the NAV'S BOTTOM and the page bottom — same flex-body pattern as the menu index (body column flex, main takes the rest and centres its content). ── */ body.careers-page, body.events-page{ display:flex; flex-direction:column; min-height:100svh; } /* the EVENTS hero: image left, header + subheader right, chevron; it owns the whole first screen (viewport minus the measured nav) and the form below can never shift it. body.careers-hero reuses it wholesale for the careers HERO layout option. */ body.events-page .careers, body.careers-hero .careers{ flex:0 0 auto; display:flex; align-items:center; width:100%; position:relative; box-sizing:border-box; min-height:calc(100svh - var(--nav-h, 84px)); } #cr-hero{ display:none; } /* the careers hero exists only while the pill says HERO (web) */ .careers-row{ display:flex; align-items:center; width:100%; /* MAX EXPANSION (user, 2026-09-01): past a full Mac window the composition FREEZES and the sides gain whitespace instead of the image growing. Internals use % of the row, so below the cap nothing changes (row = 100vw). */ max-width:1440px; margin-left:auto; margin-right:auto; } /* the right side: header with its subheader(s) stacked under it, centred in the leftover space (the side carries the flex + padding the bare title used to) */ .careers-side{ flex:1 1 auto; min-width:0; padding:0 6%; } /* matches the photo's 6vw edge inset: window->image, image->text, text->window all breathe at the same rate when the window narrows */ .careers-side .section-title{ flex:none; padding:0; } .careers-side .ev-intro{ max-width:560px; margin:calc(20px * var(--scale)) auto 0; } @media (min-width:761px){ /* the split-form intro (careers) reads a touch larger; the hero-side subheaders print in the site's thin italic voice at the SAME size — the two treatments stay matched. Subheader TEXT centres under the centred headers on both pages. */ body.careers-page .careers-apply > .ev-intro{ font-size:calc(16px * var(--scale)); text-align:center; } .careers-side .ev-intro{ font-size:calc(16px * var(--scale)); font-family:'Cormorant Garamond',Garamond,serif; font-style:italic; font-weight:300; line-height:1.4; text-align:center; } /* the page headers size like the wall calendar's EVENT CALENDAR (.cw-mon): 20.5px*scale (the .2em tracking scales with the em automatically) */ .careers-side .section-title, body.careers-page .careers-apply > .section-title{ font-size:calc(20.5px * var(--scale)); } } .print-photo.careers-photo{ flex:0 0 auto; margin-left:6%; width:min(44%, 90vh); aspect-ratio:3 / 2; } /* % of the capped row; 90vh = at most 60vh tall at 3:2 */ .careers-row > .section-title{ flex:1 1 auto; min-width:0; padding:0 3vw; } /* legacy: a bare title directly in the row (the side wrapper carries this now) */ /* ── PRIVATE EVENTS inquiry: one centred paper column. All COPY is painted ink (the established classes); the CONTROLS are real DOM — white rectangular wells framed by PRINTED .ink-box strokes (square corners, toner ink drawn by webgl-ink.js), plain Avenir Next inside (no ink effects on typed values). Checkbox/radio squares are .ink-box frames that FILL solid when checked — a tick reads as printed on the paper. ── */ .events-form{ width:min(608px, 100% - var(--gutter) * 2); margin:0 auto; padding:calc(88px * var(--scale)) 0 calc(120px * var(--scale)); } .events-form .ev-intro{ max-width:none; margin:calc(18px * var(--scale)) 0 0; } .events-form .ev-lead-rule{ display:none; } /* web: the lead flows straight into the form */ .ev-block{ margin-top:calc(44px * var(--scale)); } .ev-h{ font-family:'Avenir Next','Helvetica Neue',sans-serif; font-weight:500; /* HOUSE RULE: all-caps is ALWAYS Avenir Next, never the serifs (the mobile-scoped .cal-title font didn't reach this page on web) */ font-size:max(14px, calc(16px * var(--scale))); letter-spacing:.2em; text-indent:0; text-align:left; margin:calc(56px * var(--scale)) 0 calc(8px * var(--scale)); } .ev-block .ev-h{ margin-top:0; } /* the PROSE sections (not the form) set exactly like The Space / Our Story duo (the web landing's V2 columns): EB Garamond 18px heads, 14px italic Cormorant body — the events type may never exceed the calendar's or the duo's */ .events-form .ev-prose-h{ font-family:'EB Garamond',Garamond,serif; font-style:normal; font-weight:600; font-size:calc(18px * var(--scale)); letter-spacing:0; line-height:1.15; text-align:left; text-indent:0; margin:calc(56px * var(--scale)) 0 calc(8px * var(--scale)); } .ev-block .ev-prose-h{ margin-top:0; } .events-form .item-desc{ font-size:calc(14px * var(--scale)); } /* EVERY body run on this page — prose, lists, option labels — sits at the duo's 14px */ .events-form .ev-intro, .events-form .ev-list .item-desc{ font-style:italic; line-height:1.36; } /* the duo's italic voice for the prose itself */ .ev-list{ margin:calc(12px * var(--scale)) 0 0; padding-left:0; list-style:none; } /* ::markers can't be painted ink — plain printed lines */ .ev-list .item-desc{ max-width:none; margin:calc(7px * var(--scale)) 0 0; } .events-form .ev-form-intro{ margin-top:calc(52px * var(--scale)); } .ev-field{ margin-top:calc(22px * var(--scale)); } .ev-row{ display:grid; grid-template-columns:1fr 1fr; column-gap:calc(20px * var(--scale)); } .ev-field .item-name, .ev-fieldset legend{ display:block; padding:0; font-family:'EB Garamond',Garamond,serif; font-weight:520; font-size:max(13px, calc(15px * var(--scale))); line-height:var(--lh); } .ev-opt{ font-weight:400; } /* the printed frame: the renderer strokes the .ink-box rect; the white well insets 3px so the ink line stays visible around it */ .ev-well{ display:block; margin-top:calc(7px * var(--scale)); padding:3px; } .ev-in{ display:block; width:100%; box-sizing:border-box; margin:0; padding:8px 10px; border:0; border-radius:0; outline:none; background:transparent; -webkit-appearance:none; appearance:none; color:transparent; -webkit-text-fill-color:transparent; /* the site's core trick, now for values: invisible real text (editable, selectable), the renderer paints the INK — typed letters get the full treatment with no raw-glyph flash */ caret-color:transparent; /* the caret is painted INK too (webgl-ink caretBox, blinked by the page) */ font-family:'Avenir Next','Helvetica Neue',sans-serif; font-weight:400; font-size:16px; line-height:1.35; /* >=16px stops iOS's focus auto-zoom */ position:relative; z-index:5; } /* above the ink canvas */ .ev-in::selection{ background:rgba(140,138,130,0.5); } /* CAREERS: the application form reuses the events classes. The apply section flows under the full-screen hero (it lives OUTSIDE main.careers — that flex row centres the hero). */ .careers-apply{ padding:calc(8px * var(--scale)) 0 calc(96px * var(--scale)); } @media (min-width:761px){ /* CAREERS web: the landing pair treatment. The print owns the LEFT half of the page from the very top edge to the very bottom; the nav floats over it (the back arrow knocks out of the print — data-ink-knockout); the application centres in the RIGHT half with its header tight over the form, a normal form. */ body.careers-page .topbar{ position:absolute; left:0; right:0; z-index:7; } .careers-split{ position:relative; min-height:100svh; } .careers-split .careers-photo{ position:absolute; left:-4px; top:-4px; bottom:-4px; width:calc(50% + 4px); height:auto; margin:0; aspect-ratio:auto; } /* bled past the screen edges: the ink wick can never expose paper there */ body.careers-page .careers-apply{ /* photo removed: the column inherits .events-form's margin:0 auto -> centred */ padding:calc(var(--nav-h, 84px) + 30px) 0 calc(96px * var(--scale)); } body.careers-page .careers-apply .section-title{ margin:0; } body.careers-page .careers-apply > .ev-intro{ margin-top:calc(16px * var(--scale)); /* the intro runs wider than the 608px form column (image gone = room to breathe); the negative side-margin centres the overhang symmetrically */ --introW:min(840px, calc(100vw - var(--gutter) * 2)); width:var(--introW); margin-left:calc((100% - var(--introW)) / 2); } body.careers-page .ev-form{ margin-top:calc(26px * var(--scale)); } /* HERO mode (the pill): the events-page structure wholesale — hero screen on top, the form back to the page centre; the split pieces stand down */ body.careers-hero #cr-hero{ display:flex; } body.careers-hero .topbar{ position:static; } body.careers-hero .careers-split .careers-photo{ display:none; } body.careers-hero .careers-apply{ margin:0 auto; padding:calc(88px * var(--scale)) 0 calc(120px * var(--scale)); } body.careers-hero .careers-apply > .section-title, body.careers-hero .careers-apply > .ev-intro{ display:none; } .ver-toggle--crmode .ver-btn{ font-family:'Avenir Next','Helvetica Neue',sans-serif; font-weight:500; font-size:10px; letter-spacing:.14em; padding:6px 12px 5px; } } @media (max-width:760px){ .ver-toggle--crmode{ display:none; } } /* mobile always uses the split flow */ /* the dropdown: .ev-in already kills the native face (appearance:none, transparent text) — the renderer paints the chosen label; the printed arrow is a painted chevron. The POPUP list is native and must NOT inherit the transparency: options are colored explicitly. */ select.ev-in{ cursor:pointer; } select.ev-in option{ color:#231f20; background:#f4f1e8; -webkit-text-fill-color:#231f20; } select.ev-in option:disabled{ color:rgba(35,31,32,.35); -webkit-text-fill-color:rgba(35,31,32,.35); } .ev-selwell{ position:relative; } .ev-selchev{ position:absolute; right:12px; top:50%; width:12px; height:7px; margin-top:-3.5px; pointer-events:none; } .ev-selchev svg{ display:block; width:100%; height:100%; } .ev-selchev path{ fill:none; stroke:#231f20; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } html.ink-ready .ev-selchev path{ stroke:transparent; } /* WebGL paints it (same ink as the res chevron) */ /* the resume control: a visually-hidden real file input (keyboard/AT reachable), an underlined printed 'Choose File' that opens it, the chosen name printed beside */ .ev-file{ position:relative; margin-top:calc(7px * var(--scale)); display:flex; align-items:baseline; gap:16px; } .ev-file-in{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip-path:inset(50%); } .ev-filebtn{ display:inline-block; flex:0 0 auto; cursor:pointer; } .ev-file-rule{ display:block; margin:3px 0 0; width:100%; opacity:.45; } /* the printed underline, res-book-rule weight (span: an hr is invalid inside a label) */ .ev-file-in:focus-visible ~ .ev-filebtn{ outline:1px dotted rgba(35,31,32,.5); outline-offset:3px; } .ev-file-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ev-in::placeholder{ color:transparent; } /* hints are painted as FADED INK by the renderer */ textarea.ev-in{ resize:none; overflow-y:auto; scrollbar-width:none; } /* past the box it SCROLLS (the ink follows scrollTop) — the frame is a printed rectangle and may not grow. The NATIVE bar is hidden (it also stole 15px of wrap width on classic-scrollbar machines): the renderer paints a printed bubble instead */ textarea.ev-in::-webkit-scrollbar{ display:none; } /* the Other write-in: a bare text LINE — ink typing + ink caret over a printed rule */ .ev-line{ display:inline-block; position:relative; width:min(200px, 48%); margin-left:10px; } .ev-line .ev-in{ padding:2px 4px 3px; font-size:14px; } .ev-line-rule{ position:absolute; left:0; right:0; bottom:0; height:1px; display:block; background:transparent; opacity:1; margin:0; } /* invisible marker; the renderer prints the line */ .ev-fieldset{ border:0; padding:0; margin-inline:0; min-width:0; margin-top:calc(36px * var(--scale)); margin-bottom:calc(36px * var(--scale)); } /* air above Type of Event and below Other */ .ev-checks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:calc(12px * var(--scale)) calc(20px * var(--scale)); margin-top:calc(12px * var(--scale)); } .ev-checks--inline{ display:flex; flex-wrap:wrap; gap:calc(12px * var(--scale)) calc(32px * var(--scale)); } .ev-check{ display:flex; align-items:center; gap:10px; cursor:pointer; position:relative; } .ev-check > input{ position:absolute; opacity:0; width:1px; height:1px; } /* the CONTROL only (direct child) — the Other write-in input nests deeper and must keep its box */ .ev-check > input:focus-visible + .ev-tick{ outline:1px dotted rgba(35,31,32,.55); outline-offset:3px; } .ev-tick{ flex:0 0 auto; width:15px; height:15px; } .ev-check .item-desc{ max-width:none; margin:0; } .events-form .ev-policy{ max-width:none; margin:calc(12px * var(--scale)) 0 0; } /* the policies as hyphen points: the dash is real text (painted ink), hanging indent */ .ev-list--dash .item-desc{ padding-left:1.1em; text-indent:-1.1em; } /* the acknowledgement row + validation rings: the calendar's hand-drawn circle, stretched into an oval over whatever it flags (the renderer draws [data-ink] at the element's rect) */ .ev-ack{ margin-top:calc(44px * var(--scale)); align-items:flex-start; } /* air above the acknowledgement */ .ev-ack .ev-tick{ margin-top:2px; } .ev-ack .item-desc{ text-wrap:pretty; } /* if it ever must wrap, break evenly — never one orphan word */ .ev-field .item-name, .ev-tick, .ev-fieldset legend{ position:relative; } .ev-field .item-name, .ev-fieldset legend{ width:max-content; max-width:100%; } /* rings hug the label text, not the row */ .ev-ring{ position:absolute; inset:-6px -14px; pointer-events:none; transition:opacity .16s ease-out; } /* live-validation rings FADE in (the painter reads the live opacity; a pump repaints through the transition) */ .ev-tick .ev-ring{ inset:-8px -9px; } /* a tight oval around just the printed square */ .ev-ring[hidden]{ display:none; } .ev-check--other{ position:relative; } /* anchors the Other row's own ring */ .ev-check--other .ev-ring{ inset:-4px -10px; } .ev-send{ margin:calc(56px * var(--scale)) auto 0; } /* .res-book-wrap is width:max-content — auto margins centre it */ button.ev-submit{ appearance:none; -webkit-appearance:none; border:0; background:none; padding:0; cursor:pointer; } /* .res-book supplies the type + the painted ink */ button.ev-submit:disabled{ cursor:default; } .ev-error{ text-align:center; max-width:none; margin:calc(18px * var(--scale)) 0 0; } /* the THANK YOU screen: its own screen, the message vertically CENTRED; both paragraphs print at ONE size; the text container is wide enough that a sentence keeps its line whenever the screen allows (text-wrap:pretty kills the lone-word last line) */ .ev-confirm{ min-height:calc(100svh - var(--nav-h, 84px) - 2px); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; } .ev-confirm[hidden]{ display:none; } /* display:flex would override [hidden] (the hero-bg lesson): before submission this section must not exist — no height, nothing to scroll to */ .ev-confirm .ev-intro, .ev-confirm .ev-policy{ text-align:center; } .ev-confirm .ev-intro, .ev-confirm .ev-confirm-note{ font-size:calc(16px * var(--scale)); line-height:1.5; margin:calc(14px * var(--scale)) 0 0; max-width:none; text-wrap:pretty; } @media (min-width:761px){ /* escape the 608px form column so full sentences get full lines (page-centred parents: the events form and careers HERO — split keeps its narrow column) */ body.events-page .ev-confirm, body.careers-hero .ev-confirm{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0 var(--gutter); } .ev-confirm .ev-intro, .ev-confirm .ev-confirm-note{ max-width:1080px; } } @media (max-width:520px){ .ev-row{ grid-template-columns:1fr; } .ev-checks{ grid-template-columns:1fr; } } /* ── /OTHER: one SUPER-WIDE print below the nav (default wicked edges — it floats on the sheet, no data-crisp), then a full viewport of blank paper. Native scroll only. ── */ body.other-page .print-photo.other-photo{ width:96vw; height:78vh; aspect-ratio:auto; margin:calc(48px * var(--scale)) auto 0; } body.other-page .other-blank{ height:100vh; } /* mobile: careers stacks (print above, the word below, group still centred); /other scales down to 92vw and shorter. ONLY the new classes above are touched in this block. */ @media (max-width:760px){ .careers-row{ flex-direction:column; align-items:flex-start; } .print-photo.careers-photo{ width:80vw; margin-left:6vw; } .careers-side{ width:100%; padding:0; } .careers-row .section-title{ flex:0 0 auto; width:100%; box-sizing:border-box; padding:0 var(--gutter); margin-top:calc(48px * var(--scale)); } .careers-side .ev-intro{ max-width:none; box-sizing:border-box; padding:0 var(--gutter); margin:calc(18px * var(--scale)) 0 0; font-size:clamp(11px, 3vw, 13px); line-height:1.4; } .lp-sec--story2{ display:none; } /* the extra story section is a WEB addition */ /* JS pager hosts (Chrome/DDG — webgl-ink.js adds html.ink-pager): ownership comes from preventDefault on the FIRST touchmove of each gesture — NOT from touch-action. A touch-action lock declared the page non-pannable, and these browsers pin their nav bars over pages that cannot pan; without it the page stays "scrollable" in their eyes, the pager still owns every gesture, and the bars live their own life — appearing and hiding as they naturally would, never touching the layout (--fixvh). */ /* careers mobile matches events mobile exactly: no photo, and the subheader text centres on BOTH pages */ body.careers-page .careers-photo{ display:none; } .careers-side .ev-intro, body.careers-page .careers-apply > .ev-intro{ text-align:center; } /* FROZEN-HEIGHT overrides for base rules that also serve mobile: in Chrome/DDG the webview resizes with the browser bars, so raw svh/vh units breathe mid-scroll and elements visibly change size. --loadvh (at-load) / --fixvh (bar-hidden) are frozen; Safari has neither var and keeps its genuinely stable svh fallbacks. */ body{ min-height:var(--loadvh, 100vh); } body.careers-page, body.events-page{ min-height:var(--loadvh, 100svh); } body.menu-pager .menu-sheet-screen{ height:var(--loadvh, 100svh); margin-top:calc(-1 * var(--nav-h, 76px)) !important; } body:has(.menu-index) .menu-index{ min-height:var(--loadvh, 100svh); } .ev-confirm{ min-height:calc(var(--loadvh, 100svh) - var(--nav-h, 84px) - 2px); } /* the hero chevron + its glide are a WEB treatment (events; careers has none) */ body.careers-page .res-chevron, body.events-page .res-chevron{ display:none; } /* careers mobile: the split stacks — print up top, then the form page */ body.careers-page .careers-split .careers-photo{ margin-top:calc(18px * var(--scale)); } body.careers-page .careers-apply .section-title{ margin-top:calc(42px * var(--scale)); } /* events mobile keeps the flowing page it always had: no photo, no full-screen hero, the title spaced as the old in-form lead was */ body.events-page .careers{ min-height:0; } body.events-page .careers-photo{ display:none; } body.events-page .careers-row .section-title{ margin-top:calc(88px * var(--scale)); } body.events-page .events-form{ padding-top:0; } body.other-page .print-photo.other-photo{ width:92vw; height:calc(var(--loadvh, 100vh) * 0.52); } body.other-page .other-blank{ height:var(--loadvh, 100vh); } /* events prose keeps the CALENDAR page's own mobile clamps — never types larger than it */ .events-form .ev-prose-h{ font-size:clamp(17px, 4.8vw, 24px); } .events-form .ev-intro, .events-form .item-desc{ font-size:clamp(11px, 3vw, 13px); line-height:1.4; } /* the lead hands off to the form across a printed rule (the footer's span: the full container, gutter to gutter) with real air on both sides — the header block used to sit nearly on top of the first field */ .events-form .ev-lead-rule{ display:block; width:100%; margin:calc(44px * var(--scale)) 0 0; } .events-form .ev-form{ margin-top:calc(40px * var(--scale)); } } /* ============================ MENU PAGES — FORCED SECTION SCROLL ============================ body.menu-snap (cocktails / food / drinks): every menu category becomes its own screen. Desktop: the wheel glide in scroll.js steps section-top to section-top, with a REMAINDER step for categories taller than the viewport (it reveals the hidden tail before moving on). Mobile: native CSS mandatory snap, same mechanics as the landing / reservations sheets (--fixvh frozen geometry + the pinch-zoom snap-suspender in webgl-ink.js now also gate on .menu-snap). scroll.js also appends the single floating back-to-top control (.float-top) and runs the one-screen fit pass (see the var re-declarations at the end of this block). */ /* web: min-height (not height) lets a tall category grow; flex-centring gives short ones breathing room above and below. */ @media (min-width:761px){ body.menu-snap .menu > section{ min-height:100vh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; margin-top:0; padding:7vh 0; } } /* mobile: the same sections as native mandatory snap screens. Only these NEW body.menu-snap-scoped rules — zero changes to the existing mobile rules above. */ @media (max-width:760px){ html:has(body.menu-snap){ scroll-snap-type:y mandatory; overscroll-behavior-y:none; } body.menu-snap .menu > section{ min-height:var(--fixvh, 100svh); box-sizing:border-box; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:center; margin-top:0; padding:5vh 0; } } /* ONE-SCREEN FIT: scroll.js measures the tallest category and, when it overflows one snap screen, sets an inline --scale on the .menu ELEMENT (rootScale * fit, one factor for the whole page). The derived type/spacing vars are :root-COMPUTED, so a descendant --scale alone would not recompute them — re-declaring the SAME calc(Npx * var(--scale)) formulas here makes every var inside the column resolve against the local scale (rules that use calc(...var(--scale)) directly pick it up via plain inheritance), while the topbar, outside .menu, keeps the root scale. Both breakpoints: the base formulas are identical. */ body.menu-snap .menu{ --fs-body:calc(19px * var(--scale)); --fs-header:calc(30px * var(--scale)); --fs-foot:calc(16px * var(--scale)); --space-desc:calc(8px * var(--scale)); --space-item:calc(16px * var(--scale)); --space-hdr:calc(80px * var(--scale)); --space-foot:calc(40px * var(--scale)); --desc-max:calc(400px * var(--scale)); --col-max:calc(512px * var(--scale)); } /* the food / drinks body-level --space-hdr overrides (see the base rules further up), re-mirrored at the .menu level so they too track the local scale. Same specificity as the block above — later in the file, so they win. */ body.menu--food .menu{ --space-hdr:calc(48px * var(--scale)); } body.menu--drinks .menu{ --space-hdr:calc(56px * var(--scale)); } /* ============================ FLOATING BACK-TO-TOP (.float-top) ============================ ONE fixed control per page (landing + menu pages), replacing the per-section ink chevrons. It is the RESERVATIONS chevron, flipped, with the real ink treatment: a position:fixed element can't be painted into the document-anchored canvas (its ink would scroll away), so webgl-ink.js gives it its OWN small canvas run through the SAME shader in sprite mode — same toner pattern, fiber displacement and edge bleed — multiply-blended onto the sheet. The DOM stroke below is only the pre-ink fallback (and the hit target); .has-ink (set by the renderer once its canvas is in) blanks it, exactly like html.ink-ready does for .res-chevron. It must NOT carry .res-chevron itself (the renderer would collect its rect into the document ink). Hidden until scrolled: page JS toggles .is-on past scrollY > 0.4 viewport. The base rule sits OUTSIDE any media query — it serves both breakpoints; only the inset differs. */ /* ── the page scroll BUBBLE (web only): the window's native bar is hidden and the renderer mounts a printed ink pill on a fixed sprite canvas (webgl-ink.js pillSprite). Indicator only — it shows while the page scrolls and fades as it settles, like an overlay bar. ── */ @media (min-width:761px){ html{ scrollbar-width:none; } html::-webkit-scrollbar{ display:none; } } .ink-scrollpill{ position:fixed; top:0; right:5px; width:4px; z-index:7; opacity:0; pointer-events:none; transition:opacity .45s ease-out; will-change:transform; } .ink-scrollpill.is-on{ opacity:1; transition:opacity .12s ease-out; } /* the transparent, grabbable thumb region — rides with the pill (webgl-ink.js wirePillDrag). Wider + taller than the 3.5px ink so it's an easy target; only this child is interactive (the host stays pointer-events:none, so a faded pill never blocks the page). */ .ink-scrollpill-grab{ position:absolute; top:-4px; bottom:-4px; right:-5px; width:16px; pointer-events:auto; cursor:default; touch-action:none; } html.ink-pill-drag, html.ink-pill-drag *{ cursor:default !important; user-select:none; -webkit-user-select:none; } .float-top{ position:fixed; right:58px; bottom:54px; z-index:7; display:block; opacity:0; pointer-events:none; transition:opacity .25s ease-out; } .float-top.is-on{ opacity:1; pointer-events:auto; } /* real ink now — no opacity fudge needed */ .float-top svg{ display:block; width:calc(17px * var(--scale)); height:auto; } .float-top path{ fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .float-top.has-ink path{ stroke:transparent; } /* the sprite canvas is the visible chevron */ @media (max-width:760px){ .float-top{ display:none; } /* mobile: no back-to-top chevrons anywhere */ } /* ── LARGE PROTOTYPE (mobile): sections fit the BAR-HIDDEN screen. Safari never runs the shim, so its sections take the large viewport straight from CSS — lvh is honest there. Non-Safari browsers have --fixvh set (shim: honest lvh probe, else screen - 59) and the fallback is inert. Appended LAST so it outranks every earlier snap-section rule. ── */ @media (max-width:760px){ @supports (height:100lvh){ .res-hero, .res-col, .lp-sec--space, body.menu-snap .menu > section{ min-height:var(--fixvh, 100lvh); } .lp-cal{ height:var(--fixvh, 100lvh); } } } /* ── RED SHEET section (index.html, WEB ONLY) — the TEQUILA card as a loose red menu sheet between the pairing and the calendar. Web: a full 100vh screen, the sheet centred; the sheet-print carries the cocktails (ck) container-query geometry so the type scales with the sheet. Mobile: the whole section is hidden (the experiment is web-first). ── */ @media (min-width:761px){ .lp-sec--redsheet{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:100vh; gap:0; height:100vh; } .lp-sec--redsheet .redsheet-dummy{ grid-column:2; grid-row:1; width:100%; height:100vh; aspect-ratio:auto; margin:0; } /* edge-to-edge image, right half — like the Our Story photo */ .lp-sec--redsheet .menu-sheet.lp-sheet-demo{ grid-column:1; grid-row:1; align-self:center; justify-self:center; height:min(86.75vh, 799px); width:auto; margin:0; } /* midway between the old min(80vh,760px) and the tight min(93.5vh,838px) */ /* the red sheet centred in the blank left half */ .lp-sec--redsheet .lp-sheet-demo .sheet-print{ --mL:18.462cqw; --mW:63.077cqw; --fs-header:3.5558cqw; --fs-body:1.7193cqh; --fs-foot:1.5359cqh; --title-top:9.41cqh; --space-hdr:6.5058cqh; --space-item:1.5152cqh; --space-desc:0.9864cqh; --desc-pitch:2.0493cqh; --note-gap:0cqh; } } @media (max-width:760px){ .lp-sec--redsheet{ display:none; } }