/* ============================================================
One stylesheet. fonts.css and lqip.css used to be two more
render-blocking requests before anything could paint; they are
inlined here in order (faces, then placeholders, then the page).
Regenerate the LQIP block with the same generator as before.
============================================================ */
/* Self-hosted Google Fonts. These are the exact files Google was serving,
so the rendering is unchanged — only the two extra DNS/TLS handshakes and
the render-blocking third-party stylesheet are gone. latin + latin-ext
only; vietnamese, greek and cyrillic subsets were dropped.
Regenerate: re-fetch the css2 URL with a modern UA, keep these subsets. */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 200 400;
font-display: swap;
src: url(../fonts/fraunces-200-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 200 400;
font-display: swap;
src: url(../fonts/fraunces-200-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url(../fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url(../fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* LQIP blur-up placeholders — generated, 20px-wide JPEGs inlined. */
.ph[data-src="burger"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAPTGF2YzYxLjMuMTAwAP/bAEMAFA4PEg8NFBIQEhcVFBgeMiEeHBwePSwuJDJJQExLR0BGRVBac2JQVW1WRUZkiGVtd3uBgoFOYI2XjH2Wc36BfP/bAEMBFRcXHhoeOyEhO3xTRlN8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fP/AABEIACQAFAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AMS5SW2uHjmG0nkEHgj1FQkhedwZT684rbmEWpWeCAP4Qf7j/wCB6GqNlpRM5e8j2RQ8uPX/AOtUpluLuRQ6ddXEYkhgyh6E4GaK3oLmaeMNHIIUHCrgHj3opczK5EYtvdPbzSRlWBc7mVQT71s2M0d0GjVTvxnByp/AHrWRcssepb1lMDqcgtz/AJFXomUuJHvkDBgysMZHt1rB66muq0M3VjL9szAz7CoPAI56UVryXVnG2B5k2eS6pkE0Vam0tiHC/UilSOf/AFkat+dV2s4FPypj8aKKhNmli5b2iNHnc457GiiigR//2Q==)}
.ph[data-src="chicken-rice"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDH0vYvmuxXGNpDKG6/Xp9a0ksrZ7BhE0YIG5v4vzzzWKuM8A/nQzMqsu9trDpurKcZN3TNYONrMjxC3IRgO3NFTLAu3rRWtjK5/9k=)}
.ph[data-src="choc-cake"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDGW1gNnFJEJZ5W+8qjhfb1zVmPRzJAkhfymY42ODkc4qmsIHzBmB9QcGrMElwjhluJOP72G/mKLMLogmsTDIUkVgw9Ohoq+/79zJKzu56ktRVCP//Z)}
.ph[data-src="falooda"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDCs4Ynn2yAsduQvrWjdadFPbJLbxBX6Oo4ArGhkkSUOj4Ye1aQ1K5MbLuQFhgsF5xUSUr3RtGUORpoz3hZG2tGVPoetFWhDv8AmZ2JPUmirMT/2Q==)}
.ph[data-src="hero"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCa7E0MrFp1iRQdqJglvrmmWuono4MhHpgCtd1juFzJEp98c1mzabGNzwsY9p+71BrJxlfRmsZQ+0i9FaQyoG+bjg/KD/OipIx5caoucAYorVbGT3P/2Q==)}
.ph[data-src="hummus"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAeABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCpdfZiqEHzNyA4Udaq2ljczOW8pkGDjd+ma3IEigCyAL5bfuzFtxhvQEVHMsg3EIgb2YgsPf8ADNcnteXRHS6fNqzMk0pFcjc30UAge3JzRVp2d5GZpAhJ6Y9qKXtpD9kuxaS8RB5kSh9w5U9j61laje3bTZG2PHRlOSPxqe8iCNlSQsnYDGKzZLME5d2Yema1jTT1MpTtoyqzRliZJcsep5NFadpYQTI7CH5Q5AzIc4/Kiquhan//2Q==)}
.ph[data-src="jerk-platter"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAeABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDJm09lTdES+OoUDj61o2tnbxwqpRGmYYJcg8n+VIl1FanYnmGMcdAATj1PWnQGzlLeZIyPnOyRtqmuSU5LQ6Iw301IpdLVWwtk5GOomGDRWptB/wBXKMewAxRS9uP2RzvmgwhQuw7cFgeDUbXSpkSK5GOhXqfr6ULcFGkXy18rH3Qx5PYmo4G8wMF4HbPNbct3sDlyxTuT2+sJAhU72JbJOwUVE1uhP7wlm9QMUU/Yxe6M/ayP/9k=)}
.ph[data-src="lamb-rice"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDGeyl+UGFtx7ZFSRaVM2GW3dgeeCK6WW3WRTtZkz1296yriI2rFlcsM8g1Dcl0LiovdmdNpkqPgxY47uBRXSxyMsajJPFFWQf/2Q==)}
.ph[data-src="occasion-a"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAeABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDUkjKp8uAewPeqsZnK/vbVFIOTOG7ZqO9O0Ru0u9m6oOmCP6VNaTp5WxGIGc4zXM6zvsbqlpcsQ+XOm9CCM4oqrJbwlyRgZ5OO5opqqw9nEy754Q+9DvU/L8hyV/D0pLASXFw2IpGQdz8oH5VoJp1sGLOnmZOcN0H0qeQLtEaFogOmzir9nfUHVS0jsWIgmwfKD+FFUhFgczTMf94CiqSkuxm2j//Z)}
.ph[data-src="occasion-b"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAeABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDBSHdENo55Kj1A6+9alvaT29itwqqpUnfuTnrx+FXS0UFvhEMa4CjJ598H1FOjuhIgCByxGGXlgR7n+dczrXNvZM5/UrmJrgEwqG2Dds+UE+uKK0JfD5nkMlo8YjP8Ltyp9PeitlOPcz5WJPeWkEmVPmsTkgDOD9elQrqVzOy28G2FWOM46D3NZPmiM4Rcn1bpUiieQgtKRjkBeMVnGkjWVR7G99gTA8y4nZu5DYooW5lljjkAX5l5yT16UVOqDRn/2Q==)}
.ph[data-src="shawarma-platter"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwC9ceXBGw2tlBk7eMf5xVWCRZXMqFtwI3o7cY9RxVjVJGeRIhhQ4yDjkEU+1tPLVZZJDJIeclQMflWUlJy02NVyxjqLGqyruYxtk8FfSinswRiAoorSxnc//9k=)}
.ph[data-src="tikka-platter"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAeABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDZNvleOOOKrxxyRW0kc0at824TbxwM/nkVXkubiSKOXaUSQZXvgdR+NThjNaCKVQ5OQSepH1FYOtG9jVU3a5KrxFQdx5/2TRTrO1ZbdVNxJwSB09aK0Tk1clqKZl6kJ2AKAtHEoyo7D1x6UaTNJMCNoEafxE9Pb3pU02IzNJJJISTkbWxirPlhCPLRQAcg5OazlTvqa+0SXKjQicxxgd+tFVBccd6K6ErKxzt3P//Z)}
.ph[data-src="wrap-chicken"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwChb2cksLPLIqhh8jbj/L0pp0wzwKUf94RyOcH6VXHmAjy32j0xxVq2EquGWY5HTcoNZOM76M1ThYyXtCGIDDFFbZtyx3FwSeeUFFamR//Z)}
.ph[data-src="wrap-jerk"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDPtLaWcMzSrsI+Rtx6/SrCaS0kLl7gLIOFxk7z/SslQ68o5X6VbtpJ0YlZ2GexANYuNS90zVOFtUUrqGS3uZIWZSY22kg0VceJncsXySc/dFFbIyP/2Q==)}
.ph[data-src="wrap-lamb"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAAeABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDONyxIbyTg8A54zS/aJHjLrBIUXqw6D8am+wXFvGotLkF2IIR14J9R6H61DHpd9DN5KhxIRkEHcjD3HSslUvdo0cLOzIPtZ/55n8xRUd3aTRTstw3lSd1K7fxwKKvmJ5TQs/PgZpWA5+UOjZwD3zV2XUmkVXhkIk27ioHIx0z+dYUTPEco5Ht2q3BdIWWN48EtnKnvisZQaN1NT33F1jz7++MxCjCheG9Bz+uaKhnaWSUsjhF9KKtKdjNyh2P/2Q==)}
.ph[data-src="wrap-shawarma"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDMs7G3e28x53Dei9qu/wBmibd/pCS7o9wLRhcH3I6Viwh4GWRJDleRWmt3vgGIwPMTLZOfwrBxlc2ThYzBakjLSRgnttJop0+I5SoB/OitrGVz/9k=)}
.ph[data-src="wrap-tikka"]{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDMsbKEostznyz90DofqashdLhTAj81n5DNkhR7/rVGK4IGFG0egNJO+8YcbgTnGcCsnGTe5qpRS2LD2Vs7bo5vLU9Ayk/rRVIRxnnyxRVcsu5PMux//9k=)}
/* hero clip — same treatment, keyed to the video frame not a .ph */
.hero__vid{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgADhAN5AAD//gAPTGF2YzYxLjMuMTAwAP/bAEMACBAQExATFhYWFhYWGhgaGxsbGhoaGhsbGx0dHSIiIh0dHRsbHR0gICIiJSYlIyMiIyYmKCgoMDAuLjg4OkVFU//EAH8AAAIDAQEAAAAAAAAAAAAAAAUGAwIEAAcBAAMBAQAAAAAAAAAAAAAAAAABBAMCEAACAQEGAQsBCQEAAAAAAAACAREAIRIxQQMEE6FSYXGSUULRgSIjM8GxkVNiJHIyBdIRAAIBBAMBAQAAAAAAAAAAAAABEgNRAhFhQTHwof/AABEIACQAFAMBIgACEQADEQD/2gAMAwEAAhEDEQA/APDmMVGxpqPbBN21t5rFZOxwkpxbdZFsmSbRN++FClNemL6FWU0bwyF27XXaMPQaeI/jVeB+oe0qclc5g7DktxthWk0wZlGEpqfzG7TUO21LGth/uLy28NiS+a+gAZn2ivDLyUt0iPTiUxZGP9kKkVPeSeNUXsdwDcFih+1ZRk6ldHvb3z4WKr00tcehs9Pb3mjI7ysKRLHouvDrtqPh7Xnl2T/6oUetqoneJXs5mcPXKouOfPHl8qcMr/oTw+Q36nw6D4aQNKJFQ8c3i310L3WmO20VcVpxJO0re540T3P0CrJ/pfR0/T7qrIwfwRSGJtSbztfXXcJdPJ5Vs8IfxVUoA//Z)}
/* ============================================================
Catering4Professional — "Marquet" direction
Cream ground, ink-navy dark, arch-masked photography,
light-weight display serif over a soft grotesk.
============================================================ */
:root{
--cream: #F0EBE2;
--cream-deep: #E7E0D4; /* warm second ground — bands, not one flat slab */
--cream-soft: #EAE4D9;
--ink: #14181F; /* near-black, cooled toward the brand navy */
--navy: #0B1A38; /* dark ground */
--navy-deep: #071227;
--brass: #B08A4F; /* one warm accent — rules, dots, ornaments */
--rule: rgba(20,24,31,.16);
--rule-soft: rgba(20,24,31,.09);
--rule-light: rgba(240,235,226,.20);
--muted: rgba(20,24,31,.62);
--muted-light:rgba(240,235,226,.66);
--display: "Fraunces", "Times New Roman", serif;
--body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--gut: clamp(20px, 5vw, 72px);
/* The signature shape. Written so the two top horizontal radii sum to
exactly 100% of the width — anything larger makes the browser scale
ALL four radii down and the dome collapses into a flat corner. */
--arch: 50% 50% 10px 10px / 45% 45% 10px 10px;
--arch-soft: 50% 50% 10px 10px / 26% 26% 10px 10px;
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--expo: cubic-bezier(.19,1,.22,1); /* outExpo — marquet's easing */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
html.has-smooth{ scroll-behavior:auto }
body{
margin:0; background:var(--cream); color:var(--ink);
font-family:var(--body); font-weight:300; font-size:16px; line-height:1.6;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* One grain sheet over the whole page, not just the dark blocks — it is
what stops the cream reading as blank browser white. */
body::after{
content:""; position:fixed; inset:0; z-index:900; pointer-events:none;
opacity:.028; background-image:var(--grain);
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
ul,ol{ margin:0; padding:0; list-style:none }
h1,h2,h3{ margin:0; font-weight:300 }
figure{ margin:0 }
/* Display type: Fraunces held light and soft — the closest free face to
Moranga, which is what marquet.nyc uses. */
h1,h2,h3,.display{
font-family:var(--display);
font-variation-settings:"opsz" 144, "SOFT" 60, "WONK" 0;
font-weight:300; line-height:.94; letter-spacing:-.02em;
}
em{ font-style:italic; font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1 }
/* Fraunces italic overhangs its right sidebearing; without this the word
after an italic collides with it at display sizes. */
h1 em, h2 em, h3 em, .statement__lead em, .quote em{ margin-right:.09em }
.eyebrow{
margin:0 0 1.4rem; font-size:11px; font-weight:500; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted);
}
.eyebrow--light{ color:var(--muted-light) }
/* the brass tick that opens every eyebrow */
.eyebrow::before{
content:""; display:inline-block; width:16px; height:1px; margin:0 12px 4px 0;
background:var(--brass); vertical-align:middle;
}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
height:38px; padding:0 20px; border-radius:99px;
font-size:12.5px; font-weight:400; letter-spacing:.01em;
border:1px solid currentColor; transition:background .4s var(--ease), color .4s var(--ease);
}
.btn--ghost{ color:var(--cream) }
.btn--ghost:hover{ background:var(--cream); color:var(--navy) }
.nav--solid .btn--ghost{ color:var(--ink) }
.nav--solid .btn--ghost:hover{ background:var(--ink); color:var(--cream) }
.btn--solid{
height:52px; padding:0 30px; background:var(--cream); color:var(--navy);
border-color:var(--cream); font-size:13px; letter-spacing:.04em;
}
.btn--solid i{ font-style:normal; transition:transform .5s var(--expo) }
.btn--solid:hover{ background:transparent; color:var(--cream) }
.btn--solid:hover i{ transform:translateX(5px) }
/* ── loader ───────────────────────────────────────────────── */
.loader{
position:fixed; inset:0; z-index:1000; background:var(--navy-deep);
display:flex; align-items:flex-end; justify-content:flex-end;
padding:var(--gut); transition:opacity .6s var(--ease), visibility .6s;
}
.loader__bar{
font-family:var(--display); font-size:clamp(48px,12vw,120px);
color:var(--cream); line-height:1; font-variant-numeric:tabular-nums;
}
body.ready .loader{ opacity:0; visibility:hidden; pointer-events:none }
/* ── nav ──────────────────────────────────────────────────── */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
display:flex; align-items:center; gap:24px;
padding:22px var(--gut); color:var(--cream);
opacity:0; transform:translateY(-8px);
transition:opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s,
background .5s var(--ease), color .5s var(--ease), padding .4s var(--ease);
}
body.ready .nav{ opacity:1; transform:none }
.nav--solid{
background:rgba(240,235,226,.86); backdrop-filter:blur(14px) saturate(1.2);
-webkit-backdrop-filter:blur(14px) saturate(1.2);
color:var(--ink); padding-top:14px; padding-bottom:14px;
border-bottom:1px solid var(--rule-soft);
}
.nav__mark{ font-family:var(--display); font-size:17px; letter-spacing:-.01em; margin-right:auto }
.nav__mark span{ font-style:italic }
.nav__links{ display:flex; gap:26px; font-size:13px }
.nav__links a{ position:relative; opacity:.82 }
.nav__links a::after{
content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
background:currentColor; transform:scaleX(0); transform-origin:right;
transition:transform .45s var(--ease-out);
}
.nav__links a:hover{ opacity:1 }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }
/* ── blur-up image loading ────────────────────────────────── */
/* .ph carries a 20px inlined JPEG (see lqip.css). The real photo sits on
top at opacity 0 and cross-fades in once decoded. */
.ph{ position:relative; overflow:hidden;
background-size:cover; background-position:center; background-repeat:no-repeat }
/* The blur layer is a compositing layer per image, and there are twenty of
them. Once the real photo has faded in it has nothing left to blur, so it
is taken out of the tree entirely rather than left at opacity 0. */
.ph::after{
content:""; position:absolute; inset:0; z-index:3; backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px); transition:opacity .8s var(--ease);
}
.ph.is-clean::after{ display:none }
/* .ph__in owns the load-in settle; the inside owns the scroll
parallax. Two elements so the two transforms never overwrite each other. */
.ph__in{
position:relative; display:block; width:100%; height:100%;
opacity:0; transform:scale(1.05);
transition:opacity 1.1s var(--ease), transform 1.8s var(--expo);
}
/* The grade. The photo set comes from three different shoots; a shared
tone wash and a hairline edge are what make them read as one campaign
instead of a folder of stock. */
.ph__in::after{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
background:
linear-gradient(180deg, rgba(7,18,39,.16), rgba(7,18,39,0) 34%,
rgba(7,18,39,0) 56%, rgba(7,18,39,.30)),
radial-gradient(120% 78% at 50% 42%, rgba(0,0,0,0) 48%, rgba(7,18,39,.20));
}
.ph img{
display:block; width:100%; height:100%; object-fit:cover;
/* per-frame framing, set inline where a subject sits off-centre */
object-position:var(--pos, 50% 50%);
transform:scale(1.12); /* headroom for the parallax travel */
filter:saturate(1.05) contrast(1.03);
}
.ph.is-loaded .ph__in{ opacity:1; transform:none }
.ph.is-loaded::after{ opacity:0 }
.arch{ border-radius:var(--arch) }
/* ── hero ───────────────────────────────────────────────────
Split hero. Copy column left, a silent looping grill clip in the
signature arch right. The old centred oval + curved tagline read as a
logo screen; this one has to sell in the first screen. Navy ground on
both halves so the fixed nav keeps one colour the whole way across —
a cream left half would strand the nav links mid-bar. */
.hero{
position:relative; min-height:100svh; overflow:hidden; isolation:isolate;
background:var(--navy-deep); color:var(--cream);
display:grid; grid-template-columns:1fr; align-content:center;
gap:clamp(34px,6vw,60px);
padding:clamp(84px,11vh,132px) var(--gut) clamp(56px,8vh,110px);
}
@media(min-width:900px){
.hero{
grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
align-items:center; column-gap:clamp(40px,5vw,86px);
padding-top:100px; padding-bottom:92px;
}
}
.hero__grain{
position:absolute; inset:-50%; z-index:3; pointer-events:none; opacity:.05;
background-image:var(--grain);
}
/* soft off-centre glow so the flat black doesn't read as dead */
.hero::before{
content:""; position:absolute; inset:0; z-index:0;
background:radial-gradient(66% 52% at 58% 40%, rgba(78,96,140,.15), transparent 72%);
}
/* ── left: the pitch ─────────────────────────────────────── */
.hero__copy{ position:relative; z-index:2; max-width:660px; will-change:transform }
.hero__copy .eyebrow{
margin-bottom:clamp(18px,2.4vw,26px);
opacity:0; transition:opacity .9s var(--ease) .35s;
}
body.ready .hero__copy .eyebrow{ opacity:1 }
.hero__word{
margin:0 0 clamp(20px,2.6vw,30px);
font-size:clamp(34px,7.2vw,98px); line-height:.94; letter-spacing:-.03em;
}
.hero__word em{ font-style:italic }
/* Splitting into inline-block letters lets the browser break mid-word. */
.hero__word .l{ display:block; white-space:nowrap }
.hero__word .l > em{ display:inline-block }
/* Letters are split by JS. Each rises from +12% over 1200ms on outExpo,
staggered — the reference's exact recipe, kept from the old hero. */
.hero__word .ch{
display:inline-block; white-space:pre;
opacity:0; transform:translate3d(0,12%,0);
transition:opacity 900ms var(--ease), transform 1200ms var(--expo);
transition-delay:inherit;
}
body.ready .hero__word .ch{ opacity:1; transform:none }
/* Once the entrance has played, the scroll loop writes these inline. */
body.hero-live .hero__word .ch{ transition:none }
.hero__lead{
margin:0 0 clamp(26px,3.2vw,36px); max-width:46ch;
font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.75;
color:var(--muted-light);
opacity:0; transition:opacity 1s var(--ease) .55s;
}
.hero__cta{
display:flex; flex-wrap:wrap; align-items:center; gap:14px clamp(20px,2.4vw,30px);
opacity:0; transition:opacity 1s var(--ease) .7s;
}
.hero__link{
display:inline-flex; align-items:center; gap:9px; padding-bottom:4px;
font-size:13px; letter-spacing:.02em;
border-bottom:1px solid rgba(240,235,226,.34);
transition:border-color .4s var(--ease);
}
.hero__link i{ font-style:normal; transition:transform .5s var(--expo) }
.hero__link:hover{ border-bottom-color:var(--cream) }
.hero__link:hover i{ transform:translateX(5px) }
.hero__facts{
display:grid; grid-template-columns:repeat(3,auto); justify-content:start;
gap:clamp(18px,3vw,48px);
margin:clamp(32px,4.6vw,52px) 0 0; padding-top:clamp(18px,2.2vw,26px);
border-top:1px solid var(--rule-light);
opacity:0; transition:opacity 1s var(--ease) .85s;
}
.hero__facts strong{
display:block; font-family:var(--display); font-weight:300;
font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 0;
font-size:clamp(20px,2vw,26px); letter-spacing:-.01em;
}
.hero__facts span{
display:block; margin-top:6px; font-size:10.5px; letter-spacing:.13em;
text-transform:uppercase; color:var(--muted-light);
}
body.ready .hero__lead,
body.ready .hero__cta,
body.ready .hero__facts{ opacity:1 }
/* ── right: the clip ─────────────────────────────────────── */
.hero__media{
position:relative; z-index:1; width:100%; justify-self:center;
max-width:440px; will-change:transform;
}
@media(min-width:900px){ .hero__media{ justify-self:end; max-width:none } }
.hero__vid{
position:relative; overflow:hidden; border-radius:var(--arch);
aspect-ratio:.88; background-color:var(--navy);
background-size:cover; background-position:center;
opacity:0; transform:translateY(20px);
transition:opacity 1.2s var(--ease) .15s, transform 1.5s var(--expo) .15s;
}
body.ready .hero__vid{ opacity:1; transform:none }
@media(max-width:639px){
/* Phone: the pitch has to reach the CTA inside the first screen, so the
clip is cropped square-ish rather than kept at the 9:16 it was shot in. */
.hero__vid{ aspect-ratio:1.04 }
.hero__lead{ font-size:14.5px; line-height:1.62 }
}
@media(min-width:640px){ .hero__vid{ aspect-ratio:.8 } }
@media(min-width:900px){ .hero__vid{ aspect-ratio:auto; height:min(76vh,700px) } }
.hero__vid video{
display:block; width:100%; height:100%; object-fit:cover;
/* same settle as the old hero photo, and the same grade as every still */
transform:scale(1.16); transition:transform 3.6s var(--expo);
filter:saturate(1.05) contrast(1.03);
}
body.ready .hero__vid video{ transform:scale(1.02) }
.hero__vid::after{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
background:
linear-gradient(180deg, rgba(7,18,39,.30), rgba(7,18,39,0) 32%,
rgba(7,18,39,0) 50%, rgba(7,18,39,.50)),
radial-gradient(120% 78% at 50% 42%, rgba(0,0,0,0) 46%, rgba(7,18,39,.26));
}
/* hairline ring picks the arch back out of the navy */
.hero__vid::before{
content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
border:1px solid rgba(240,235,226,.16); border-radius:inherit;
}
.hero__chip{
position:absolute; z-index:4; left:50%; bottom:clamp(16px,2.2vw,26px);
transform:translateX(-50%);
display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
padding:9px 16px; border-radius:99px;
background:rgba(7,18,39,.46); border:1px solid rgba(240,235,226,.18);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
font-size:10px; letter-spacing:.14em; text-transform:uppercase;
opacity:0; transition:opacity 1s var(--ease) 1.1s;
}
body.ready .hero__chip{ opacity:.94 }
.hero__chip::before{
content:""; width:6px; height:6px; border-radius:50%; background:var(--brass);
animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
.hero__cue{
position:absolute; z-index:4; bottom:26px; left:var(--gut);
color:var(--cream); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
display:none; align-items:center; gap:10px; opacity:0;
transition:opacity 1s var(--ease) 1.2s;
}
@media(min-width:900px){ .hero__cue{ display:flex } }
body.ready .hero__cue{ opacity:.7 }
.hero__cue span{ width:1px; height:26px; background:currentColor; display:block;
animation:cue 2.4s var(--ease) infinite }
@keyframes cue{ 0%,100%{ transform:scaleY(.35); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } }
/* ── statement ────────────────────────────────────────────── */
/* Editorial two-column: a narrow label rail that stays put while the
lead reads past it. The lone paragraph on empty cream was the flattest
moment on the page. */
.statement{
padding:clamp(88px,13vw,170px) var(--gut) clamp(60px,8vw,110px);
display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,56px);
border-bottom:1px solid var(--rule-soft);
}
@media(min-width:900px){
.statement{ grid-template-columns:180px minmax(0,1fr); column-gap:clamp(40px,6vw,90px) }
.statement__rail{ position:sticky; top:26vh; align-self:start }
.statement__meta{ grid-column:2 }
}
.statement__rail .eyebrow{ margin-bottom:18px }
.statement__rail p{ margin:0; font-size:12.5px; line-height:1.7; color:var(--muted); max-width:22ch }
.statement__lead{
margin:0; font-family:var(--display); font-weight:300;
font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 0;
font-size:clamp(26px, 4.2vw, 54px); line-height:1.14; letter-spacing:-.02em;
max-width:20ch;
}
@media(min-width:900px){ .statement__lead{ max-width:none } }
.statement__lead em{ font-style:italic }
/* stats as a ruled grid, not three floating numbers */
.statement__meta{
display:grid; grid-template-columns:1fr; margin-top:clamp(40px,5vw,64px);
border-top:1px solid var(--rule);
}
@media(min-width:640px){ .statement__meta{ grid-template-columns:repeat(3,1fr) } }
.statement__meta div{
display:flex; flex-direction:column; gap:4px;
padding:24px 26px 26px 0; border-bottom:1px solid var(--rule-soft);
position:relative;
}
@media(min-width:640px){
.statement__meta div{ border-bottom:0; padding-left:26px }
.statement__meta div:first-child{ padding-left:0 }
.statement__meta div + div{ border-left:1px solid var(--rule-soft) }
}
.statement__meta strong{
font-family:var(--display); font-weight:300; font-size:clamp(34px,4vw,46px);
line-height:1; font-variant-numeric:tabular-nums;
}
.statement__meta span{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
/* ── section heads ────────────────────────────────────────── */
.sec-head{ padding:0 var(--gut); margin-bottom:clamp(40px,6vw,72px) }
.sec-head h2{ font-size:clamp(38px,6.6vw,88px) }
.sec-head h2 em{ font-style:italic }
.sec-head--split{ display:grid; grid-template-columns:1fr; gap:22px; align-items:end }
.sec-head__note{ margin:0; max-width:36ch; font-size:14.5px; color:var(--muted) }
/* The split head hangs its note off in the top right, which on a two-line
display heading reads as a stray paragraph. The ruled variant keeps the
note under the heading and closes the block with a full-width hairline —
the same move the menu list makes, so the two sections rhyme. */
.sec-head--rule{ display:block; padding-bottom:clamp(22px,3vw,34px);
border-bottom:1px solid var(--rule); margin-bottom:clamp(34px,4.6vw,60px) }
.sec-head--rule h2{ max-width:16ch }
.sec-head--rule .sec-head__note{ margin-top:clamp(18px,2.2vw,26px); max-width:52ch }
@media(min-width:900px){
.sec-head--rule{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
column-gap:clamp(40px,6vw,90px); align-items:end;
grid-template-areas:"e e" "h n" }
.sec-head--rule .eyebrow{ grid-area:e }
.sec-head--rule h2{ grid-area:h; max-width:none }
.sec-head--rule .sec-head__note{ grid-area:n; margin-top:0; padding-bottom:.5em }
}
@media(min-width:900px){
.sec-head--split{ grid-template-columns:1fr auto; grid-template-areas:"e e" "h n" }
.sec-head--split .eyebrow{ grid-area:e }
.sec-head--split h2{ grid-area:h }
.sec-head--split .sec-head__note{ grid-area:n; padding-bottom:.6em }
}
/* ── services cards ───────────────────────────────────────────
Was: three arch-cropped portraits with the caption floating under them.
The dome ate the top third of every plate and the stagger left the row
looking accidental. Now: plain rectangles that show the whole dish, a
ruled caption plate under each, and hairline gutters between the columns
so the three read as one index rather than three loose cards. */
.services{ padding:clamp(64px,9vw,120px) 0 clamp(40px,6vw,80px) }
.cards{
display:grid; gap:clamp(34px,4vw,0px); padding:0 var(--gut);
grid-template-columns:1fr;
}
@media(min-width:760px){
/* The divider lives in the gap, not on the card. Padding the cards to
make room for a border made the outer two wider than the middle one —
equal columns, three different photo heights. */
.cards{ --cardgap:clamp(28px,3.4vw,52px);
grid-template-columns:repeat(3,1fr); gap:0 var(--cardgap) }
.cards .card{ position:relative }
.cards .card + .card::before{
content:""; position:absolute; top:0; bottom:0;
left:calc(var(--cardgap) / -2); width:1px; background:var(--rule-soft);
}
}
.card{ display:flex; flex-direction:column }
.card__frame{ position:relative; margin-bottom:clamp(18px,2vw,26px) }
.card__img{
aspect-ratio:4/5; border-radius:3px; background-color:var(--cream-deep);
}
/* A cream ring is invisible on cream — the frame needs an ink hairline to
sit on this ground, unlike the ones over the navy. */
.card__frame::after{
content:""; position:absolute; inset:0; border-radius:3px;
box-shadow:inset 0 0 0 1px rgba(20,24,31,.10); pointer-events:none; z-index:4;
}
.card__img img{ transition:transform 1.1s var(--expo), filter .8s var(--ease) }
.card__body{ display:flex; flex-direction:column; flex:1 }
.card__idx{
display:flex; align-items:baseline; gap:14px; margin:0 0 12px;
padding-top:16px; border-top:1px solid var(--rule);
}
.card__idx span{
font-size:11px; letter-spacing:.2em; color:var(--brass);
font-variant-numeric:tabular-nums;
}
.card__idx h3{ font-size:clamp(24px,2.2vw,30px); line-height:1 }
.card__desc{ margin:0 0 20px; font-size:14.5px; color:var(--muted); max-width:36ch }
.card__more{
margin-top:auto; display:inline-flex; align-items:center; gap:9px;
font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
transition:color .4s var(--ease);
}
.card__more i{ font-style:normal; transition:transform .55s var(--expo) }
.card:hover .card__more{ color:var(--ink) }
.card:hover .card__more i{ transform:translateX(6px) }
.card:hover .card__img img{ transform:scale(1.16); filter:saturate(1.1) contrast(1.04) }
/* ── menu ─────────────────────────────────────────────────── */
.menu{ padding:clamp(60px,9vw,120px) 0; border-top:1px solid var(--rule-soft) }
.menu__grid{ display:flex; flex-direction:column; gap:clamp(56px,8vw,120px) }
.mrow{
display:grid; gap:clamp(24px,4vw,60px); padding:0 var(--gut);
grid-template-columns:1fr; align-items:center;
}
@media(min-width:860px){
.mrow{ grid-template-columns:1.15fr .85fr }
.mrow--flip .mrow__txt{ order:2 }
.mrow--flip .mrow__img{ order:1 }
}
.mrow__txt{ position:relative }
/* ghost numeral behind the category — depth without another element */
.mrow__txt::before{
content:attr(data-n); position:absolute; z-index:0; right:0; top:-.34em;
font-family:var(--display); font-weight:300; font-size:clamp(90px,11vw,170px);
line-height:1; color:rgba(20,24,31,.055); pointer-events:none;
}
.mrow__no,.mrow__txt h3,.mrow__txt ul{ position:relative; z-index:1 }
.mrow__no{ margin:0 0 10px; font-size:11px; letter-spacing:.18em; color:var(--muted) }
.mrow__txt h3{ font-size:clamp(30px,4.6vw,54px); margin-bottom:26px }
.mrow__txt li{
display:flex; align-items:baseline; gap:12px;
padding:13px 10px 13px 0; border-top:1px solid var(--rule-soft); font-size:15px;
transition:padding-left .5s var(--expo), background-color .5s var(--ease);
}
.mrow__txt li:last-child{ border-bottom:1px solid var(--rule-soft) }
.mrow__txt li i{ flex:1; height:1px; background:var(--rule); align-self:center }
.mrow__txt li span:last-child{ color:var(--muted); font-size:13px; text-align:right }
@media(hover:hover){
.mrow__txt li:hover{
padding-left:14px;
background-color:rgba(20,24,31,.035);
}
}
/* Rectangles, not arches: the dome cropped the top of every board and both
ends of every tray. A 5:4 window at this width shows the whole dish. */
.mrow__img{ aspect-ratio:1.15; background-color:var(--cream-deep); border-radius:3px }
@media(min-width:860px){ .mrow__img{ aspect-ratio:1.05 } }
/* NOT ::after — .mrow__img is a .ph and ::after is the LQIP blur layer.
An outline pulled inward draws over the photo without claiming it. */
.mrow__img{ outline:1px solid rgba(20,24,31,.10); outline-offset:-1px }
/* ── the dark interlude: ticker + photo marquee ───────────── */
/* The page was one unbroken cream slab from the statement to the footer.
This is the break — a dark band two thirds of the way down that resets
the eye before the process and the quote. */
.showcase{
position:relative; background:var(--navy-deep); color:var(--cream);
padding-bottom:clamp(52px,7vw,92px); overflow:hidden; isolation:isolate;
}
.showcase::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(74% 60% at 50% 0%, rgba(78,96,140,.16), transparent 70%);
}
.ticker{
position:relative; z-index:1; overflow:hidden;
border-bottom:1px solid var(--rule-light);
padding:20px 0; margin-bottom:clamp(46px,6vw,80px);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ticker__row{ display:flex; width:max-content; animation:tick 46s linear infinite }
.ticker__row b{
font-weight:400; padding:0 22px; white-space:nowrap;
font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
color:var(--muted-light);
}
.ticker__row b::after{ content:"✦"; margin-left:22px; color:var(--brass); letter-spacing:0 }
@keyframes tick{ to{ transform:translateX(-50%) } }
.gallery{ position:relative; z-index:1; overflow:hidden }
.gallery__track{
display:flex; align-items:flex-start; gap:22px; width:max-content;
padding:0 18px; will-change:transform;
}
.gitem{ flex:none; margin:0 }
.g{ background-color:rgba(240,235,226,.07); overflow:hidden; border-radius:var(--arch-soft) }
.gitem--tall .g{ width:clamp(190px,24vw,300px); aspect-ratio:.72 }
.gitem--wide .g{ width:clamp(280px,36vw,460px); aspect-ratio:1.4 }
.gitem figcaption{
margin-top:13px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
color:var(--muted-light);
}
/* every other tile drops to give the strip a rhythm rather than a flat band */
.gallery__track > .gitem:nth-child(even){ margin-top:52px }
.gallery__track > .gitem:nth-child(3n){ margin-top:24px }
/* ── process ──────────────────────────────────────────────── */
.process{ padding:clamp(72px,10vw,140px) 0 clamp(60px,8vw,110px) }
.steps{
display:grid; gap:clamp(28px,4vw,44px); padding:0 var(--gut);
grid-template-columns:1fr;
}
@media(min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr) } }
.steps li{ position:relative; padding-top:26px; border-top:1px solid var(--rule) }
/* a brass node on the rule at each step — the connector reads as a timeline */
.steps li::before{
content:""; position:absolute; top:-3.5px; left:0; width:7px; height:7px;
border-radius:50%; background:var(--brass);
}
.steps li::after{
content:attr(data-n); position:absolute; right:0; top:14px;
font-family:var(--display); font-weight:300; font-size:clamp(64px,7vw,104px);
line-height:1; color:rgba(20,24,31,.05); pointer-events:none;
}
.steps span{ font-size:11px; letter-spacing:.18em; color:var(--muted) }
.steps h3{ font-size:25px; margin:14px 0 10px; position:relative; z-index:1 }
.steps p{ margin:0; font-size:14.5px; color:var(--muted); max-width:32ch; position:relative; z-index:1 }
/* ── quote ────────────────────────────────────────────────── */
.quote{
position:relative; background:var(--cream-deep);
padding:clamp(72px,10vw,140px) var(--gut);
border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
text-align:center; overflow:hidden;
}
/* Measure in px, not ch: 20ch of a 44px display face is a poem column. */
.quote blockquote{ margin:0 auto; max-width:880px; position:relative; z-index:1 }
.quote__mark{
position:absolute; z-index:0; left:50%; top:clamp(20px,4vw,48px);
transform:translateX(-50%);
font-family:var(--display); font-size:clamp(180px,26vw,340px); line-height:1;
color:rgba(20,24,31,.045); pointer-events:none; user-select:none;
}
.quote p{
margin:0 0 26px; font-family:var(--display); font-weight:300;
font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 0;
font-size:clamp(24px,3.6vw,44px); line-height:1.18; letter-spacing:-.02em;
}
.quote cite{
font-style:normal; font-size:11.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--muted);
display:inline-flex; align-items:center; gap:12px;
}
.quote cite::before{ content:""; width:26px; height:1px; background:var(--brass) }
/* ── contact ──────────────────────────────────────────────── */
.contact{
position:relative; background:var(--navy); color:var(--cream);
padding:clamp(76px,10vw,150px) var(--gut); overflow:hidden; isolation:isolate;
display:grid; gap:clamp(36px,5vw,72px); align-items:center;
grid-template-columns:1fr;
}
@media(min-width:900px){ .contact{ grid-template-columns:.92fr 1.08fr } }
.contact__grain{
position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.05;
background-image:var(--grain);
}
.contact::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(58% 60% at 22% 45%, rgba(78,96,140,.20), transparent 68%);
}
.contact__arch{
position:relative; z-index:1;
border-radius:var(--arch); aspect-ratio:.78;
max-width:470px; width:100%; background-color:var(--navy-deep);
}
.contact__body{ position:relative; z-index:1 }
.contact__body h2{ font-size:clamp(40px,7vw,96px) }
.contact__body h2 em{ font-style:italic }
.contact__note{ margin:24px 0 32px; max-width:38ch; font-size:15px; color:var(--muted-light) }
.contact__links{ display:flex; flex-direction:column; gap:8px;
font-family:var(--display); font-size:clamp(19px,2.4vw,28px) }
.contact__links a{ width:fit-content; border-bottom:1px solid var(--rule-light);
padding-bottom:5px; transition:border-color .4s var(--ease) }
.contact__links a:hover{ border-color:var(--cream) }
.contact__cta{ margin-top:34px }
/* the detail rail fills the dead space the old layout left under the links */
.contact__facts{
display:grid; grid-template-columns:1fr; gap:0;
margin-top:clamp(36px,5vw,54px); border-top:1px solid var(--rule-light);
}
@media(min-width:620px){ .contact__facts{ grid-template-columns:repeat(3,1fr) } }
.contact__facts div{ padding:18px 20px 18px 0 }
@media(min-width:620px){
.contact__facts div{ padding-left:20px }
.contact__facts div:first-child{ padding-left:0 }
.contact__facts div + div{ border-left:1px solid var(--rule-light) }
}
.contact__facts dt{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
color:var(--muted-light); margin-bottom:7px }
.contact__facts dd{ margin:0; font-size:14px; line-height:1.5 }
/* ── footer ───────────────────────────────────────────────── */
.foot{
background:var(--navy-deep); color:var(--muted-light);
padding:clamp(48px,6vw,76px) var(--gut) 30px;
border-top:1px solid var(--rule-light);
}
.foot__word{
font-family:var(--display); font-weight:300; color:var(--cream);
font-size:clamp(38px,9vw,132px); line-height:.9; letter-spacing:-.03em;
margin:0 0 clamp(34px,5vw,58px);
}
.foot__word em{ font-style:italic }
.foot__cols{
display:grid; grid-template-columns:1fr; gap:26px;
padding-top:26px; border-top:1px solid var(--rule-light);
font-size:12.5px; letter-spacing:.04em;
}
@media(min-width:700px){ .foot__cols{ grid-template-columns:repeat(3,1fr) } }
.foot__cols h4{ margin:0 0 12px; font-family:var(--body); font-weight:400;
font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream) }
.foot__cols li{ margin-bottom:6px }
.foot__cols a:hover{ color:var(--cream) }
.foot__base{
display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
margin-top:clamp(34px,4vw,50px); padding-top:22px;
border-top:1px solid var(--rule-light); font-size:11.5px; letter-spacing:.05em;
}
/* ── scroll reveal ────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(38px);
transition:opacity 1.1s var(--ease), transform 1.3s var(--expo) }
.reveal.in{ opacity:1; transform:none }
/* Menu lines and step headings arrive one after another, not as a slab. */
.mrow__txt li, .steps h3{
opacity:0; transform:translateY(14px);
transition:opacity .8s var(--ease), transform .9s var(--expo),
padding-left .5s var(--expo), background-color .5s var(--ease);
}
/* `.reveal.in .steps h3` could never match: each
IS the .reveal, so
.steps is its parent, not its descendant — the three step headings were
stuck at opacity 0 for good. Match the li directly instead. */
.reveal.in .mrow__txt li{ opacity:1; transform:none }
.steps li.reveal.in h3{ opacity:1; transform:none }
/* the three steps arrive together, so the stagger has to be declared */
.steps li:nth-child(2) h3{ transition-delay:.09s }
.steps li:nth-child(3) h3{ transition-delay:.18s }
/* ── motion & fallbacks ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
.reveal{ opacity:1; transform:none }
.mrow__txt li,.steps h3{ opacity:1; transform:none }
.hero__word .ch{ opacity:1; transform:none }
.ph__in{ opacity:1; transform:none }
.hero__vid video{ transform:scale(1.02) }
.hero__vid,.hero__copy .eyebrow,.hero__lead,.hero__cta,.hero__facts,
.hero__chip,.hero__word .l,.hero__cue,.nav{ opacity:1; transform:none }
.gallery__track{ transform:none !important }
.ticker__row{ animation:none }
}
/* If JS never runs, nothing may stay hidden. */
html.no-js .loader{ display:none }
html.no-js .reveal,html.no-js .nav,html.no-js .hero__vid,html.no-js .hero__word .l,
html.no-js .hero__copy .eyebrow,html.no-js .hero__lead,html.no-js .hero__cta,
html.no-js .hero__facts,html.no-js .hero__chip,html.no-js .hero__cue{ opacity:1; transform:none }
html.no-js .ph__in{ opacity:1; transform:none }
html.no-js .hero__word .ch{ opacity:1; transform:none }
html.no-js .hero__vid video{ transform:scale(1.02) }
html.no-js .mrow__txt li,html.no-js .steps h3{ opacity:1; transform:none }
html.no-js .ph::after{ opacity:0 }
/* ── narrow screens ───────────────────────────────────────── */
@media (max-width:899px){
/* Stacked hero: the clip leads, the pitch reads under it. */
.hero__media{ order:-1 }
}
@media (max-width:720px){
/* The three nav links won't fit beside the wordmark and the button;
the same links live in the page and the footer, so drop them here
rather than hiding real navigation behind a hamburger. */
.nav__links{ display:none }
.nav__mark{ font-size:15px }
.btn{ height:34px; padding:0 16px; font-size:12px }
.hero__facts{ gap:16px }
.hero__facts span{ font-size:9.5px; letter-spacing:.1em }
.statement__meta strong{ font-size:30px }
.mrow__txt li{ flex-wrap:wrap; gap:2px 10px }
.mrow__txt li i{ display:none }
.mrow__txt li span:last-child{ flex:1 0 100%; text-align:left }
.mrow__txt::before{ font-size:96px; top:-.28em }
.contact__arch{ max-width:300px }
.gitem--tall .g{ width:190px }
.gitem--wide .g{ width:270px }
.gallery__track > .gitem:nth-child(even){ margin-top:30px }
}
/* ═══════════════════════════════════════════════════════════
Second motion pass — the page below the hero was too static.
Four devices, all built from the same gesture as the hero:
something masked, rising, on outExpo.
═══════════════════════════════════════════════════════════ */
/* ── 1. images unmask upward into their arch ─────────────────
The frame's own border-radius still clips, so the photo appears
to be poured into the arch rather than fading on top of it. */
.ph{ clip-path:inset(101% 0 0 0); transition:clip-path 1.25s var(--expo) }
.ph.is-shown{ clip-path:inset(0 0 0 0) }
.g.ph{ clip-path:none } /* the moving strip is exempt */
/* ── 2. headings rise word by word out of a mask ───────────── */
.w{
display:inline-block; overflow:hidden; vertical-align:top;
/* The mask clips at the padding edge, so pad for the parts of a glyph
that sit outside its advance width — descenders below, and Fraunces
italic's overhang to the right — then pull the box back in. */
padding:0 .1em .14em; margin:0 -.1em -.14em;
}
.w > i{
display:block; font-style:inherit;
transform:translateY(108%);
transition:transform 1.15s var(--expo);
}
.is-shown .w > i, .in .w > i{ transform:none }
/* ── 3. the menu becomes a pinned photo beside a scrolling list ──
One image at a time, held in place while its category scrolls past.
Built by JS on wide screens only; the markup stays a plain list. */
@media(min-width:900px){
.menu--pinned .menu__grid{
display:grid; grid-template-columns:1.02fr .98fr;
gap:clamp(40px,5vw,90px); align-items:start;
padding:0 var(--gut);
}
.menu--pinned .menu__list{ display:flex; flex-direction:column }
.menu--pinned .mrow{
padding:0; min-height:76vh;
display:flex; flex-direction:column; justify-content:center;
align-items:stretch; /* .mrow's base align-items:center would shrink the list */
}
.menu--pinned .mrow__txt{ max-width:none }
.menu__media{
position:sticky; top:13vh; height:74vh;
display:flex; flex-direction:column; gap:18px;
}
.menu__stack{
position:relative; flex:1; border-radius:3px;
overflow:hidden; background-color:var(--cream-deep);
}
/* Hairline inside the frame. Ink, not cream — this one sits on the cream
ground, and a cream ring on cream is nothing. */
.menu__stack::after{
content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(20,24,31,.12);
}
.menu__stack .mrow__img{
position:absolute; inset:0; aspect-ratio:auto; border-radius:0;
opacity:0; transition:opacity .9s var(--ease);
}
.menu__stack .mrow__img.is-current{ opacity:1 }
/* the pinned frame is already revealed; the wipe would fight the fade */
.menu__stack .ph{ clip-path:none }
/* The caption used to float on the photo as a blurred chip. It is now a
rail under the frame with the counter, so nothing is laid over the food
and the photo is shown whole. */
.menu__rail{
display:flex; align-items:center; gap:clamp(14px,1.6vw,22px);
padding-top:16px; border-top:1px solid var(--rule);
}
.menu__cap{
margin:0; display:inline-flex; align-items:center; gap:10px;
font-family:var(--display); font-weight:300; font-size:20px;
letter-spacing:-.01em; color:var(--ink); white-space:nowrap;
}
.menu__cap::before{ content:""; width:5px; height:5px; border-radius:50%;
background:var(--brass); flex:none }
.menu__count{
margin:0 0 0 auto; display:flex; align-items:center; gap:12px;
font-size:11px; letter-spacing:.18em; color:var(--muted);
font-variant-numeric:tabular-nums; flex:1; max-width:230px;
}
.menu__count b{
font-weight:400; font-size:11px; letter-spacing:.18em; color:var(--ink);
}
.menu__count .bar{
flex:1; height:1px; background:var(--rule); position:relative; overflow:hidden;
}
.menu__count .bar span{
position:absolute; inset:0; background:var(--ink);
transform-origin:left; transform:scaleX(0);
transition:transform .7s var(--expo);
}
}
@media (prefers-reduced-motion:reduce){
.ph{ clip-path:none !important }
.w > i{ transform:none !important }
.menu__stack .mrow__img{ opacity:1 }
}
html.no-js .ph{ clip-path:none }
html.no-js .w > i{ transform:none }
/* ═══════════════════════════════════════════════════════════
Sixth pass — the phone. Three complaints:
(a) after the hero it is a wall of text with nothing to look at,
(b) the page keeps scrolling past the footer into an empty screen,
(c) the logo was nowhere on the site.
═══════════════════════════════════════════════════════════ */
/* ── (b) the empty screen after the end ──────────────────────
Nothing was actually taller than the document — the page ends exactly
at the footer. What you see on a phone is the rubber band: iOS Safari
(and Chrome's overscroll) drags the page past its end and paints the
ROOT background behind it. That root was `body`'s cream, so overscroll
below a navy footer showed a blank cream screen and read as a second,
empty page.
Two fixes, both needed: stop the chain/bounce where the browser allows
it, and make the root ground match the ends of the page so any bounce
that still happens is invisible. Keep BOTH on every future site. */
html{
background:var(--navy-deep); /* hero top and footer bottom are both navy-deep */
overscroll-behavior:none; /* both axes: no bounce, no pull-to-refresh */
}
body{ overscroll-behavior:none }
/* ── (c) the logo ────────────────────────────────────────────
These were `mask-image` + `background:currentColor`, which recolours for
free — and which fails CLOSED: when the mask image doesn't resolve, or the
engine reads a greyscale PNG as a luminance mask instead of an alpha one,
the element keeps its box and paints NOTHING. That is exactly what he saw:
the footer masthead holding its space as an empty navy block. Not worth 20KB.
Plain , one file per colour, swapped by the nav's own state. */
.nav__mark{ display:inline-flex; align-items:center; gap:11px }
.nav__mark > span{ font-style:normal } /* .nav__mark span used to italicise everything */
.nav__logo{ display:block; flex:none; width:auto; height:29px }
.nav__logo--ink{ display:none }
.nav--solid .nav__logo--cream{ display:none }
.nav--solid .nav__logo--ink{ display:block }
.nav__name{ font-family:var(--display); font-size:17px; letter-spacing:-.01em }
.nav__name span{ font-style:italic }
@media(max-width:720px){
.nav__logo{ height:25px }
.nav__name{ font-size:15px }
}
/* On a wide bar a small mark next to 17px type disappears into the gutter. */
@media(min-width:900px){
.nav__logo{ height:36px }
.nav__name{ font-size:19px }
.nav--solid .nav__logo{ height:32px }
.nav--solid .nav__name{ font-size:17px }
}
.loader__mark{
margin-right:auto; align-self:flex-end; display:block;
width:clamp(30px,8vw,44px); height:auto; opacity:.85;
}
/* The footer masthead is the real lockup now, not type set to look like it.
It also fixes the 375px nit where the Fraunces word ran into the gutter. */
.foot__logo{ display:block; width:min(280px,58vw); height:auto }
@media(min-width:900px){ .foot__logo{ width:min(420px,32vw) } }
@media(min-width:700px){
.loader__mark{ width:min(230px,26vw) } /* the one place the logo owns the screen */
}
/* ── (a1) a photograph directly under the hero ───────────────
Two frames, the wide one dropped against the tall one, ruled captions
underneath. On a phone this is what now follows the hero instead of a
paragraph; on desktop it fills the column beside the sticky rail. */
.statement__art{
display:grid; grid-template-columns:1.06fr .94fr;
gap:clamp(12px,2.4vw,22px); align-items:start;
margin-top:clamp(34px,4.6vw,56px);
}
/* PHONES ONLY. The desktop statement was already right — a lead beside a
sticky rail — and this pair only crowded it. Capping it and pushing it
right was still the wrong call: the fix was for the phone, so it stops at
the phone. `display:none` also means the two images are never fetched on
desktop (lazy images inside a none-d subtree don't load). */
@media(min-width:900px){ .statement__art{ display:none } }
.sart{ margin:0 }
.sart--b{ margin-top:clamp(26px,5vw,64px) }
.sart__img{
border-radius:3px; background-color:var(--cream-deep);
outline:1px solid rgba(20,24,31,.10); outline-offset:-1px;
}
.sart--a .sart__img{ aspect-ratio:.76 }
.sart--b .sart__img{ aspect-ratio:.92 }
.sart figcaption{
display:flex; align-items:baseline; gap:10px;
margin-top:12px; padding-top:10px; border-top:1px solid var(--rule);
font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.sart figcaption span{ color:var(--brass); font-variant-numeric:tabular-nums }
/* ── (a2) the stats stop being three tall rows of text ───────
They were one column below 640px, which is three more paragraphs of
scrolling. Three ruled columns reads as one band instead. */
.statement__meta{ grid-template-columns:repeat(3,1fr) }
@media(max-width:639px){
.statement__meta div{
border-bottom:0; padding:18px 10px 18px 0;
}
.statement__meta div + div{ border-left:1px solid var(--rule-soft); padding-left:12px }
.statement__meta strong{ font-size:clamp(19px,5.6vw,30px) }
.statement__meta span{ font-size:9px; letter-spacing:.08em; line-height:1.35 }
}
/* ── (a3) the three service cards become a swipeable rail ────
Stacked, they were three photo-plus-paragraph blocks in a row — the
longest text run on the page. Side by side in a snap rail they cost one
screen instead of three, and the swipe is the interaction the section
was missing. Desktop keeps the ruled three-up grid. */
.cards__hint{ display:none }
@media(max-width:759px){
.cards__hint{
display:flex; align-items:center; justify-content:flex-end; gap:8px;
margin:0 0 14px; padding:0 var(--gut);
font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.cards__hint i{ font-style:normal; color:var(--brass);
animation:nudge 2.4s var(--ease) infinite }
@keyframes nudge{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(5px) } }
.cards{
grid-auto-flow:column; grid-auto-columns:78%; grid-template-columns:none;
gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-padding-left:var(--gut);
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.cards::-webkit-scrollbar{ display:none }
.card{ scroll-snap-align:start }
.card__desc{ font-size:14px }
}
/* ── (a4) the menu leads with the food, full bleed ───────────
Every category used to open with a title and four ruled lines, with its
photo underneath — so on a phone you read four blocks of text before
seeing anything. The photo now comes first and runs edge to edge, so
the section alternates picture, list, picture, list. */
@media(max-width:859px){
.mrow{ gap:clamp(20px,4vw,30px) }
.mrow__img{
order:-1;
margin-inline:calc(var(--gut) * -1); /* the row's own gutter, cancelled */
border-radius:0; outline:0; aspect-ratio:1.22;
}
.menu__grid{ gap:clamp(46px,9vw,80px) }
}
/* ── (a5) the process reads as a timeline, not three paragraphs ──
The brass nodes were already there; on a phone there was nothing
joining them, so the three steps read as three unrelated blocks. */
@media(max-width:759px){
/* The connector is a border on each step, not one absolute line down the
column: it then ends exactly at the last node instead of trailing a
tail past it, and it needs no magic number to do it. */
.steps{ gap:0 }
.steps li{
border-top:0; border-left:1px solid rgba(176,138,79,.34);
padding:0 0 38px 28px;
}
.steps li:last-child{ border-left-color:transparent; padding-bottom:0 }
.steps li::before{ top:7px; left:-4px } /* the node straddles the line */
.steps li::after{ font-size:72px; top:-8px }
.steps h3{ margin-top:10px }
}
/* ── (a6) the closing photo earns its screen ─────────────────
It was capped at 300px on a 375px screen — a thumbnail under a headline. */
@media(max-width:720px){
.contact__arch{ max-width:none; width:100%; aspect-ratio:1.02 }
}
/* new pieces, same fallbacks as everything else */
@media (prefers-reduced-motion:reduce){
.cards__hint i{ animation:none }
.statement__art{ opacity:1; transform:none }
}
html.no-js .statement__art{ opacity:1; transform:none }
/* ═══════════════════════════════════════════════════════════
Seventh pass — "paper". A brand motif under the cream, instead of
flat #F0EBE2 everywhere.
TOGGLE: this is ALL scoped to `body.paper`. Drop the `paper` class in
index.html and the site is back to plain cream, no other edits.
The motif is the site's own vocabulary, not clip art: the arch from
`--arch` drawn as a hairline, and the brass ✦ the ticker already uses.
═══════════════════════════════════════════════════════════ */
:root{ --paper-tile:url("data:image/svg+xml,") }
/* The dark sections (hero, showcase, contact, footer) all paint their own
opaque grounds, so putting the motif on `body` shows it through exactly
the cream sections and nowhere else — one paint layer, no extra elements,
no stacking-context games. */
body.paper{
background-image:var(--paper-tile);
background-repeat:repeat;
background-size:460px 460px;
}
/* .quote is the one cream section with a background of its own, so it would
cover the body layer — it carries the motif itself. */
body.paper .quote{
background-image:var(--paper-tile);
background-size:460px 460px;
}
@media(max-width:720px){
body.paper, body.paper .quote{ background-size:320px 320px }
}
/* Two oversized watermarks of the mark itself, bleeding off opposite edges.
The tile gives the ground texture; these give it a brand. z-index:-1 keeps
them above the body tile and behind every bit of content — both sections
have no background of their own, so nothing hides them. */
/* overflow:hidden is load-bearing — the watermarks bleed off the section
edge on purpose, and without it they push documentElement.scrollWidth past
the viewport (1440 -> 1678 when this was first added). Neither section has
a sticky descendant, so clipping them costs nothing. */
body.paper .services,
body.paper .process{ position:relative; overflow:hidden }
body.paper .services::after,
body.paper .process::after{
content:""; position:absolute; z-index:-1; pointer-events:none;
width:min(560px,62vw); aspect-ratio:220/318;
background:url(../img/logo-mark-ink.png) center/contain no-repeat;
opacity:.06;
}
body.paper .services::after{ top:-4%; right:-14%; transform:rotate(8deg) }
body.paper .process::after{ bottom:-6%; left:-16%; transform:rotate(-10deg) }
@media(max-width:720px){
body.paper .services::after,
body.paper .process::after{ width:74vw; opacity:.028 }
}
/* The existing grain sheet sits on top of all of this and ties it together;
it is dialled back a touch so the two textures don't fight. */
body.paper::after{ opacity:.022 }
/* ═══════════════════════════════════════════════════════════
Eighth pass — desktop only.
(1) The footer stacked the lockup above the columns and left half the
band empty to its right. Logo and columns now share one row.
(2) The cream ground is no longer a repeating tile on desktop. He asked
for something abstract that is NOT the same thing wallpapered down
the page, so each cream section gets ONE bespoke composition,
scaled and bled off a different edge. Phones keep the botanical
tile — big single figures need width to read, and at 390px they
just look like a stray line.
NINTH PASS replaces those compositions. They were concentric rings,
arcs and ellipses — geometry, and it read as boring. They are now
HAND-DRAWN CULINARY LINE ART: a platter and its service, the cloche
from the mark, a frieze of the kitchen, the pot and its steam, a
wreath. Same architecture — one `background-image` per section, so
nothing can overflow and there are no extra elements or stacking
contexts. Every stroke is a parametric curve resampled with smooth
noise pushed along its normal (periodic noise for closed shapes, so
the ends meet), emitted as an M/Q/T chain with no transform
attributes. Generated by `hand.py`; regenerate there, don't hand-edit
the path data.
═══════════════════════════════════════════════════════════ */
@media(min-width:900px){
/* ── footer: one row ─────────────────────────────────────── */
.foot{
display:grid; align-items:start;
grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr);
column-gap:clamp(48px,7vw,120px);
}
.foot__word{ grid-column:1; margin:0 }
.foot__logo{ width:min(340px,26vw) }
/* the rule and its padding existed to separate the columns from the
masthead ABOVE them; side by side there is nothing to separate. */
.foot__cols{ grid-column:2; align-self:center; border-top:0; padding-top:0; gap:clamp(24px,3vw,48px) }
.foot__base{ grid-column:1 / -1 }
/* ── the abstract figures ────────────────────────────────── */
body.paper{ background-image:none } /* no tile on desktop */
body.paper .services::after,
body.paper .process::after{ display:none } /* the logo watermarks go with it */
body.paper .statement,
body.paper .services,
body.paper .menu,
body.paper .process,
body.paper .quote{ background-repeat:no-repeat }
/* FIGURES:DESKTOP — generated by tools/hand.py, do not hand-edit */
/* a platter and its service, bled off the left gutter */
body.paper .statement{
background-image:var(--fig-statement);
background-size:min(940px,66vw) auto;
background-position:left -150px center;
}
/* the cloche of the mark, steam rising past the section head */
body.paper .services{
background-image:var(--fig-services);
background-size:min(640px,42vw) auto;
background-position:right -120px top -10px;
}
/* a frieze of the kitchen under the section head */
body.paper .menu{
background-image:var(--fig-menu);
background-size:62% auto;
background-position:center top 4%;
}
/* the pot, and what rises off it, out of the bottom corner */
body.paper .process{
background-image:var(--fig-process);
background-size:min(620px,42vw) auto;
background-position:right -120px bottom -260px;
}
/* an open wreath around the pull quote */
body.paper .quote{
background-image:var(--fig-quote);
background-size:min(1240px,88vw) auto;
background-position:center center;
}
/* FIGURES:DESKTOP END */
}
/* FIGURES:GROUND — generated by tools/hand.py, do not hand-edit */
:root{
--fig-statement:url("data:image/svg+xml,");
--fig-services:url("data:image/svg+xml,");
--fig-menu:url("data:image/svg+xml,");
--fig-process:url("data:image/svg+xml,");
--fig-quote:url("data:image/svg+xml,");
}
/* Phones get the same drawings, not the botanical tile — he asked for one
design at both widths. They are scaled so the OBJECTS stay about the size
they are on desktop (a figure shrunk to fit 390px is just a stray line)
and bled off an edge, so each section shows a part of one drawing rather
than a small complete picture. The tile and the two logo watermarks are
switched off here; `--paper-tile` is left in the sheet, so putting the
texture back is one declaration. */
@media(max-width:899px){
body.paper{ background-image:none }
body.paper .services::after,
body.paper .process::after{ display:none }
body.paper .statement,
body.paper .services,
body.paper .menu,
body.paper .process,
body.paper .quote{ background-repeat:no-repeat }
/* the platter, behind the lead — only lightly bled, or all that shows on a phone is its rim */
body.paper .statement{
background-image:var(--fig-statement);
background-size:clamp(430px,110vw,900px) auto;
background-position:left -40px top 22%;
}
/* the cloche, off the top-right, steam past the head */
body.paper .services{
background-image:var(--fig-services);
background-size:clamp(360px,92vw,640px) auto;
background-position:right -120px top 8px;
}
/* the frieze twice, a different third of it each time */
body.paper .menu{
background-image:var(--fig-menu), var(--fig-menu);
background-size:190% auto, 190% auto;
background-position:left -4% top 26px, right -6% top 62%;
}
/* the pot, low right — the body has to clear the section edge or only the steam shows */
body.paper .process{
background-image:var(--fig-process);
background-size:clamp(320px,82vw,600px) auto;
background-position:right -70px bottom -30px;
}
/* the wreath, bleeding off both edges of the short band */
body.paper .quote{
background-image:var(--fig-quote);
background-size:175% auto;
background-position:center center;
}
}
/* FIGURES:GROUND END */
/* PAGES:BEGIN */
/* ═══════════════════════════════════════════════════════════
Multi-page pass (2026-09-15). Generated into style.css by
Tools/scripts/pages.py from Tools/scripts/pages.css. Edit the .css
file there and re-run; don't hand-edit between the markers.
═══════════════════════════════════════════════════════════ */
.vh{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
/* the intro plays on the first page of a visit only */
.no-intro .loader{ display:none }
.skip{ position:fixed; left:var(--gut); top:-80px; z-index:1001; padding:10px 18px;
border-radius:99px; background:var(--cream); color:var(--navy); font-size:13px }
.skip:focus{ top:12px }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px }
/* ── nav: six pages + a burger below 1100px ──────────────── */
.nav__links a[aria-current="page"]{ opacity:1 }
.nav__links a[aria-current="page"]::after{ transform:scaleX(1) }
.nav__burger{
display:none; flex:none; width:40px; height:40px; margin-right:-8px; padding:0;
border:0; background:none; color:inherit; cursor:pointer;
flex-direction:column; align-items:center; justify-content:center; gap:7px;
}
.nav__burger span{ display:block; width:22px; height:1px; background:currentColor;
transition:transform .5s var(--expo) }
.menu-open .nav__burger span:first-child{ transform:translateY(4px) rotate(45deg) }
.menu-open .nav__burger span:last-child{ transform:translateY(-4px) rotate(-45deg) }
@media(max-width:1099px){
.nav__links{ display:none }
.nav__burger{ display:inline-flex }
}
@media(max-width:720px){ .nav{ gap:14px } }
@media(max-width:459px){ .nav__cta{ display:none } }
.mnav{
position:fixed; inset:0; z-index:99; overflow-y:auto;
display:flex; flex-direction:column;
padding:104px var(--gut) 36px; background:var(--navy-deep); color:var(--cream);
opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.menu-open .mnav{ opacity:1; visibility:visible }
.menu-open body{ overflow:hidden }
.menu-open .nav{ background:transparent; color:var(--cream); border-bottom-color:transparent;
-webkit-backdrop-filter:none; backdrop-filter:none }
.menu-open .nav .nav__logo--cream{ display:block }
.menu-open .nav .nav__logo--ink{ display:none }
.menu-open .nav .btn--ghost{ color:var(--cream) }
.mnav ol{ counter-reset:m; border-top:1px solid var(--rule-light) }
.mnav li{ border-bottom:1px solid var(--rule-light) }
.mnav li a{
display:flex; align-items:baseline; gap:16px; padding:13px 0;
font-family:var(--display); font-weight:300; font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 0;
font-size:clamp(26px,7vw,40px); line-height:1.1; letter-spacing:-.02em;
}
.mnav li a::before{ counter-increment:m; content:counter(m,decimal-leading-zero);
min-width:22px; font-family:var(--body); font-size:11px; letter-spacing:.18em; color:var(--brass) }
.mnav li a[aria-current="page"]{ font-style:italic }
.mnav__foot{ margin-top:auto; padding-top:32px; display:flex; flex-direction:column; gap:14px;
font-size:14px; color:var(--muted-light) }
.mnav__foot .btn{ align-self:flex-start }
.mnav__foot address{ font-style:normal }
@media(min-width:1100px){ .mnav{ display:none } }
/* ── page hero: the home hero's language, a photo not a clip ─ */
.phero{
position:relative; overflow:hidden; isolation:isolate;
background:var(--navy-deep); color:var(--cream);
display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,60px);
padding:clamp(104px,14vh,150px) var(--gut) clamp(56px,8vw,100px);
}
.phero::before{
content:""; position:absolute; inset:0; z-index:0;
background:radial-gradient(66% 52% at 58% 40%, rgba(78,96,140,.15), transparent 72%);
}
@media(min-width:900px){
.phero{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center;
column-gap:clamp(40px,5vw,86px); min-height:min(94vh,880px); padding-top:128px }
}
.phero__copy{ position:relative; z-index:2; max-width:700px }
.phero h1{ margin:0 0 clamp(20px,2.6vw,30px); font-size:clamp(40px,6.2vw,90px);
line-height:.98; letter-spacing:-.03em }
.phero h1 em{ font-style:italic }
.phero__lead{ margin:0 0 clamp(26px,3.2vw,36px); max-width:48ch;
font-size:clamp(15px,1.1vw,17px); line-height:1.75; color:var(--muted-light) }
.phero__media{ position:relative; z-index:1; width:100%; max-width:540px; justify-self:center }
@media(min-width:900px){ .phero__media{ justify-self:end } }
.phero__img{ border-radius:var(--arch); aspect-ratio:.8; background-color:var(--navy) }
@media(max-width:899px){ .phero__img{ aspect-ratio:1.1; border-radius:var(--arch-soft) } }
.phero__cap{ display:flex; align-items:center; gap:10px; margin-top:16px;
font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-light) }
.phero__cap::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brass) }
.phero--404{ min-height:100svh }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(22px,3vw,34px);
font-size:12px; letter-spacing:.06em; color:var(--muted-light) }
.crumbs li + li::before{ content:"/"; margin-right:8px; opacity:.6 }
.crumbs a{ border-bottom:1px solid var(--rule-light) }
.crumbs a:hover{ color:var(--cream); border-color:var(--cream) }
/* text link on cream */
.tlink{ display:inline-flex; align-items:center; gap:9px; padding-bottom:4px;
font-size:13px; letter-spacing:.02em; color:var(--ink); border-bottom:1px solid var(--rule);
transition:border-color .4s var(--ease) }
.tlink i{ font-style:normal; transition:transform .5s var(--expo) }
.tlink:hover{ border-color:var(--ink) }
.tlink:hover i{ transform:translateX(5px) }
.sec-head__note .tlink, .statement__rail .tlink{ margin-top:16px }
a.card__more{ width:fit-content }
.tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(26px,3vw,38px) }
.tags li{ padding:8px 16px; border:1px solid var(--rule); border-radius:99px; font-size:13px;
background:rgba(240,235,226,.7) }
/* ── what's included: a ruled index ─────────────────────── */
.included{ padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--rule-soft) }
.incl{ display:grid; grid-template-columns:1fr; gap:0 clamp(28px,3.4vw,52px); padding:0 var(--gut) }
@media(min-width:640px){ .incl{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:1000px){ .incl{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.incl li{ position:relative; padding:24px 0 32px; border-top:1px solid var(--rule) }
.incl li::before{ content:""; position:absolute; top:-3.5px; left:0; width:7px; height:7px;
border-radius:50%; background:var(--brass) }
.incl__n{ font-size:11px; letter-spacing:.18em; color:var(--muted) }
.incl h3{ margin:12px 0 10px; font-size:clamp(22px,2.2vw,28px); line-height:1.08 }
.incl p{ margin:0; max-width:38ch; font-size:14.5px; color:var(--muted); overflow-wrap:anywhere }
.incl p a{ color:var(--ink); border-bottom:1px solid var(--rule) }
.incl address{ font-style:normal }
/* ── photo strip ──────────────────────────────────────────── */
.pstrip{ padding:0 var(--gut) clamp(64px,9vw,120px) }
.pstrip__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.4vw,36px); align-items:start }
.pfig:first-child{ grid-column:1 / -1 }
.pfig .card__img{ aspect-ratio:4/5 }
@media(max-width:759px){ .pfig:first-child .card__img{ aspect-ratio:1.3 } }
@media(min-width:760px){
.pstrip__grid{ grid-template-columns:1fr 1.25fr 1fr }
.pfig:first-child{ grid-column:auto }
.pfig:nth-child(2){ margin-top:clamp(40px,6vw,90px) }
}
.pfig figcaption{ display:flex; align-items:baseline; gap:12px; margin-top:4px; padding-top:12px;
border-top:1px solid var(--rule); font-family:var(--display); font-size:clamp(16px,1.6vw,21px) }
.pfig figcaption span{ font-family:var(--body); font-size:11px; letter-spacing:.2em; color:var(--muted) }
/* ── from the menu ────────────────────────────────────────── */
.picks{ padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--rule-soft) }
.picks__grid{ display:grid; grid-template-columns:1fr; gap:clamp(48px,6vw,90px); padding:0 var(--gut) }
@media(min-width:860px){ .picks__grid{ grid-template-columns:1fr 1fr } }
.picks__more{ padding:clamp(34px,4vw,50px) var(--gut) 0 }
.mrow__note{ position:relative; z-index:1; margin:-12px 0 22px; max-width:44ch; font-size:14px; color:var(--muted) }
/* ── FAQ ──────────────────────────────────────────────────── */
.faq{ padding:clamp(64px,9vw,120px) 0; background:var(--cream-deep); border-top:1px solid var(--rule-soft) }
.faq__list{ padding:0 var(--gut); max-width:1120px }
.faq__item{ border-top:1px solid var(--rule) }
.faq__item:last-child{ border-bottom:1px solid var(--rule) }
.faq__item summary{
list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
gap:24px; padding:22px 0; font-family:var(--display); font-weight:300;
font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 0;
font-size:clamp(20px,2.2vw,28px); line-height:1.2; letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary i{ position:relative; flex:none; width:14px; height:14px }
.faq__item summary i::before,
.faq__item summary i::after{ content:""; position:absolute; left:0; top:50%; width:14px; height:1px;
background:currentColor; transition:transform .45s var(--expo) }
.faq__item summary i::after{ transform:rotate(90deg) }
.faq__item[open] summary i::after{ transform:none }
.faq__a p{ margin:0 0 24px; max-width:62ch; font-size:15px; color:var(--muted) }
.faq__a a{ color:var(--ink); border-bottom:1px solid var(--rule) }
/* ── footer: four columns now ─────────────────────────────── */
.foot__word a{ display:inline-block }
.foot__cols a{ display:inline-block; padding:3px 0 }
.foot__cols li{ overflow-wrap:anywhere }
.foot__cols address{ font-style:normal; line-height:1.6 }
@media(min-width:700px){ .foot__cols--4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:1100px){ .foot__cols--4{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (prefers-reduced-motion:reduce){ .mnav{ transition:none } }
/* PAGES:END */