/* ========================================================================== KNIGHT & ROSE CAFÉ Ivory. Space. Photography. Everything else earns its place. ========================================================================== */ /* ---------------------------------------------------------------- 1. FONTS */ @font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:'Jost';src:url('../fonts/jost-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Jost';src:url('../fonts/jost-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} /* --------------------------------------------------------------- 2. TOKENS */ :root{ /* Surfaces — ivory carries the site */ --ivory:#FCF7ED; --ivory-2:#F7F0E1; --ivory-3:#F2E9D8; /* Ink */ --ink:#2A1613; --ink-72:rgba(42,22,19,.72); --ink-52:rgba(42,22,19,.52); --ink-34:rgba(42,22,19,.34); --hair:rgba(42,22,19,.13); /* Brand accents — used sparingly */ --wine:#6B1710; --wine-deep:#3A0C07; --gold:#D5BE8B; /* on dark only */ --gold-ink:#85632A; /* accessible gold for ivory backgrounds */ --sand:#FFECCB; /* Type */ --serif:'Cormorant','Cormorant Garamond',Garamond,'Times New Roman',serif; --sans:'Jost','Helvetica Neue',Helvetica,Arial,sans-serif; --t-display:clamp(3.5rem,9.4vw,11rem); --t-xl:clamp(2.7rem,6.4vw,7rem); --t-l:clamp(2.1rem,3.6vw,3.6rem); --t-m:clamp(1.5rem,2.2vw,2.1rem); --t-lead:clamp(1.06rem,1.32vw,1.3rem); --t-body:1.03rem; --t-eyebrow:.655rem; /* Space — generous by default, then more */ --gut:clamp(1.6rem,6vw,7rem); --sec:clamp(4rem,8.4vw,9rem); --sec-half:clamp(2.8rem,5.2vw,5.4rem); --max:1680px; --ease:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1); --nav:96px; --barh:74px; } /* ----------------------------------------------------------- 3. BASE/RESET */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--ivory);color:var(--ink); font-family:var(--sans);font-size:var(--t-body);font-weight:300;line-height:1.8; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; /* clip, not hidden: `hidden` forces overflow-y to auto, which turns into the scroll container and breaks skip-links and smooth scrolling. */ overflow-x:clip;font-feature-settings:"kern" 1,"liga" 1; } body.lock{overflow:hidden} img,video,svg{display:block;max-width:100%} picture{display:contents} img{height:auto} h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} ::selection{background:var(--wine);color:var(--sand)} :focus-visible{outline:1px solid var(--gold-ink);outline-offset:5px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;top:-100px;left:1rem;z-index:3000;background:var(--wine);color:var(--sand);padding:.9rem 1.5rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;transition:top .25s} .skip:focus{top:1rem} /* ----------------------------------------------------------- 4. TYPOGRAPHY */ h1,h2,h3,.d,.xl,.l,.xl{font-size:var(--t-xl);line-height:1;letter-spacing:-.026em} .l{font-size:var(--t-l);line-height:1.08;letter-spacing:-.018em} .eyebrow{ font-family:var(--sans);font-size:var(--t-eyebrow);font-weight:400; letter-spacing:.42em;text-transform:uppercase;line-height:1;color:var(--gold-ink); } .eyebrow--light{color:var(--gold)} .note{font-size:.885rem;line-height:1.9;letter-spacing:.03em;color:var(--ink-52);max-width:44ch} /* ---------------------------------------------------------------- 5. LAYOUT */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .narrow{max-width:1140px;margin-inline:auto} .sec{padding-block:var(--sec)} .sec-half{padding-block:var(--sec-half)} .mid{text-align:center} .mid .note{margin-inline:auto} /* ---------------------------------------------------------------- 6. MOTION */ .fade{opacity:0;transform:translate3d(0,16px,0); transition:opacity 1.25s var(--ease),transform 1.25s var(--ease);transition-delay:var(--d,0ms)} .fade.in{opacity:1;transform:none} /* Above-the-fold copy: rises without fading, so it paints on first frame. An element at opacity:0 is not "rendered" for LCP, which puts the animation duration underneath the metric as a hard floor. */ .rise{transform:translate3d(0,14px,0);transition:transform 1.05s var(--ease); transition-delay:var(--d,0ms)} .rise.in{transform:none} @media (prefers-reduced-motion:reduce){.rise{transform:none!important;transition:none!important}} @media (prefers-reduced-motion:reduce){ .fade{opacity:1!important;transform:none!important;transition:none!important} [data-par] img{transform:none!important} } /* Parallax frame: the image is taller than its window and drifts within it */ [data-par]{overflow:hidden;position:relative} [data-par] img{will-change:transform} /* Slow, quiet zoom on hover */ .zoom{overflow:hidden} .zoom img{transition:transform 2.4s var(--ease)} [data-par].zoom img,[data-par] > img.cover{height:110%} .zoom:hover img{transform:scale(1.035)} /* ------------------------------------------------------------ 7. NAVIGATION */ .nav{ position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav); display:grid;grid-template-columns:1fr auto 1fr;align-items:center; padding-inline:var(--gut);isolation:isolate; transition:background .7s var(--ease-soft),height .7s var(--ease-soft), border-color .7s var(--ease-soft),color .5s var(--ease-soft), transform .6s var(--ease-soft); border-bottom:1px solid transparent; } .nav--over{color:var(--sand)} .nav--over::before{ content:"";position:absolute;inset:0 0 -70px 0;z-index:-1;pointer-events:none; background:linear-gradient(to bottom,rgba(24,7,4,.42),rgba(24,7,4,0)); } .nav--solid{background:rgba(252,247,237,.94);-webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);border-bottom-color:var(--hair);height:var(--barh);color:var(--ink)} .nav--up{transform:translateY(-101%)} /* While the sheet is open the bar stays, but recedes to plain ink on ivory */ body.menu .nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none; border-bottom-color:transparent;color:var(--ink);height:var(--nav);transform:none} body.menu .nav--over::before{opacity:0} /* the reservation control moves into the sheet itself */ body.menu .nav__r{opacity:0;pointer-events:none;transition:opacity .3s} .nav__mark{justify-self:center;display:block;line-height:0} .nav__mark img{height:48px;width:auto;transition:height .6s var(--ease-soft)} .nav--solid .nav__mark img{height:44px} .nav__mark .on-dark{display:none} .nav--over .nav__mark .on-dark{display:block} .nav--over .nav__mark .on-light{display:none} .nav__l{justify-self:start} .nav__r{justify-self:end} /* The only two controls on the page */ .tag{ font-family:var(--sans);font-size:var(--t-eyebrow);font-weight:400; letter-spacing:.34em;text-transform:uppercase;position:relative; padding-bottom:.55rem;display:inline-block; transition:letter-spacing .7s var(--ease),opacity .5s; } .tag::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px; background:currentColor;opacity:.28;transition:opacity .6s var(--ease)} .tag:hover{letter-spacing:.42em} .tag:hover::after{opacity:.9} .tag--plain::after{display:none} .tag--plain:hover{opacity:.62} .frame{ display:inline-block;font-family:var(--sans);font-size:var(--t-eyebrow);font-weight:400; letter-spacing:.34em;text-transform:uppercase; padding:1.35rem clamp(2rem,3.4vw,3.4rem); border:1px solid var(--ink-34);color:var(--ink);position:relative;overflow:hidden;isolation:isolate; transition:color .7s var(--ease),border-color .7s var(--ease),letter-spacing .7s var(--ease); } .frame::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wine); transform:translateY(101%);transition:transform .75s var(--ease)} .frame:hover{color:var(--sand);border-color:var(--wine);letter-spacing:.4em} .frame:hover::before{transform:translateY(0)} /* Full-screen menu */ .burger{display:flex;align-items:center;gap:.85rem;position:relative;z-index:1001} .burger i{display:block;width:26px;height:7px;position:relative;flex:0 0 auto} .burger i::before,.burger i::after{content:"";position:absolute;left:0;width:100%;height:1px; background:currentColor;transition:transform .6s var(--ease),opacity .35s} .burger i::before{top:0} .burger i::after{top:6px} body.menu .burger i::before{transform:translateY(3px) rotate(45deg)} body.menu .burger i::after{transform:translateY(-3px) rotate(-45deg)} .sheet{ position:fixed;inset:0;z-index:995;background:var(--ivory);color:var(--ink); opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility .8s; display:grid;grid-template-columns:1.25fr .75fr; } body.menu .sheet{opacity:1;visibility:visible} .sheet__l{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav) + 1rem) var(--gut) 2.5rem;overflow-y:auto} .sheet__r{position:relative;overflow:hidden;background:var(--ivory-3)} .sheet__r img{width:100%;height:100%;object-fit:cover;transform:scale(1.06); transition:transform 1.6s var(--ease)} body.menu .sheet__r img{transform:scale(1)} .sheet a.big{ font-family:var(--serif);font-weight:300;font-size:clamp(1.75rem,3.9vw,3.15rem);line-height:1.42; letter-spacing:-.02em;display:block;opacity:0;transform:translateY(14px); transition:opacity .8s var(--ease),transform .8s var(--ease),color .4s; } body.menu .sheet a.big{opacity:1;transform:none} .sheet a.big:hover{color:var(--wine)} .sheet__meta{margin-top:clamp(2rem,3.6vw,3.2rem);opacity:0;transition:opacity .7s .55s} body.menu .sheet__meta{opacity:1} /* ----------------------------------------------------------- 8. STAGE (hero) */ /* ------------------------------------------------------ 9. STATEMENT / TEXT */ /* Editorial pair: photograph and a very short paragraph, far apart */ .pair{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,5vw,6rem);align-items:center} .pair--top{align-items:start} .pair__img{grid-column:1/8} .pair__txt{grid-column:9/13} .pair--r .pair__img{grid-column:6/13;order:2} .pair--r .pair__txt{grid-column:1/5;order:1} .pair__txt .eyebrow{display:block;margin-bottom:2rem} .pair__txt .l{margin-bottom:1.9rem} /* Full-bleed photographic band */ .bleed{position:relative;overflow:hidden;height:clamp(440px,78vh,940px);background:var(--ivory-3)} .bleed img{width:100%;height:118%;object-fit:cover;position:absolute;inset:0} .bleed__c{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;color:var(--sand);padding:var(--gut)} .bleed--scrim::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom,rgba(24,7,4,.30),rgba(24,7,4,.52))} /* Moments: large photographs, unequal, plenty of air */ /* Ratios */ .r-45{aspect-ratio:4/5} .cover{width:100%;height:100%;object-fit:cover} figure.zoom{background:var(--ivory-3)} /* Dark passage — the single dark moment on the page */ .dark{background:var(--wine-deep);color:var(--sand)} .dark .eyebrow{color:var(--gold)} /* A single photograph, centred, given room */ /* Product still life on ivory (no cards, no borders) */ .still{display:flex;align-items:flex-end;justify-content:center;height:clamp(210px,22vw,320px)} .still img{max-height:100%;width:auto;object-fit:contain; filter:drop-shadow(0 30px 40px rgba(42,22,19,.13))} .still-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,6rem);align-items:end} .still-name{font-family:var(--serif);font-size:1.4rem;font-weight:400;margin-top:2rem;text-align:center} .still-sub{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-34); margin-top:.8rem;text-align:center} /* ══════════════════════════════════════════════════ 12. SURFACE & DEPTH */ /* A whisper of paper tooth. Keeps large ivory fields from reading as flat screen. */ .grain{position:relative} .grain::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); } .grain>*{position:relative;z-index:2} /* ══════════════════════════════════════════════════════════ 13. THE HERO */ /* Typography gets its own ground. The photograph gets its own frame. A third element crosses the seam so the composition has real depth. */ .hero{ position:relative;display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); height:calc(100svh - var(--barh));min-height:620px;max-height:1080px; margin-top:var(--barh);background:var(--ivory); } .hero__type{ position:relative;display:flex;flex-direction:column;justify-content:center; padding:clamp(2.5rem,5vw,5rem) clamp(2.4rem,5vw,6rem) clamp(2.5rem,5vw,5rem) clamp(1.8rem,6vw,7rem); } /* warm light falling from the upper left */ .hero__type::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(120% 90% at 8% 12%,rgba(213,190,139,.22),rgba(213,190,139,0) 62%); } .hero__type>*{position:relative;z-index:2} .hero__rule{position:absolute;top:0;bottom:0;right:0;width:1px; background:linear-gradient(to bottom,transparent,rgba(133,99,42,.28) 22%,rgba(133,99,42,.28) 78%,transparent);z-index:3} .hero__media{position:relative;overflow:hidden;background:var(--ivory-3)} .hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.045); animation:breathe 26s cubic-bezier(.33,0,.2,1) forwards} @keyframes breathe{to{transform:scale(1)}} @media (prefers-reduced-motion:reduce){.hero__media img{animation:none;transform:none}} /* the seam reads as light falling away, not as a cut */ .hero__media::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(to right,rgba(42,22,19,.30) 0%,rgba(42,22,19,.06) 9%,rgba(42,22,19,0) 22%), linear-gradient(to top,rgba(42,22,19,.22),rgba(42,22,19,0) 34%); } /* the foreground layer */ .hero__card{ position:absolute;z-index:6;width:clamp(160px,17vw,272px); left:46%;margin-left:calc(clamp(160px,17vw,272px) * -.42); bottom:clamp(2.5rem,6vh,6rem); box-shadow:0 46px 90px -34px rgba(42,22,19,.52),0 12px 30px -14px rgba(42,22,19,.34); } .hero__card img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block} .hero__card::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,236,203,.32);pointer-events:none} .hero__eyebrow{margin-bottom:clamp(1.6rem,2.6vw,2.4rem)} .hero h1{font-size:clamp(2.6rem,4.95vw,6.1rem);line-height:.97;letter-spacing:-.032em;max-width:12ch} .hero__sub{margin-top:clamp(1.6rem,2.4vw,2.2rem);max-width:34ch; font-size:.96rem;line-height:1.85;color:rgba(42,22,19,.8)} .hero__acts{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.6rem); margin-top:clamp(2.2rem,3.6vw,3.4rem);flex-wrap:wrap} /* the one solid element on the site — it should be unmissable */ .solid{ display:inline-block;font-family:var(--sans);font-size:var(--t-eyebrow);font-weight:400; letter-spacing:.34em;text-transform:uppercase;color:var(--sand);background:var(--wine); padding:1.45rem clamp(2.2rem,3.2vw,3.4rem);position:relative;overflow:hidden;isolation:isolate; box-shadow:0 22px 44px -22px rgba(107,23,16,.6); transition:letter-spacing .7s var(--ease),box-shadow .7s var(--ease),color .6s var(--ease); } .solid::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wine-deep); transform:translateY(101%);transition:transform .7s var(--ease)} .solid::after{content:"";position:absolute;inset:5px;border:1px solid rgba(213,190,139,.34);pointer-events:none} .solid:hover{letter-spacing:.4em;box-shadow:0 30px 56px -22px rgba(107,23,16,.72)} .solid:hover::before{transform:translateY(0)} /* ════════════════════════════════════════════════════ 14. EDITORIAL PROSE */ /* Body copy set like a magazine: real measure, real leading, two columns where there is room for them. Text is allowed to be text. */ .prose{ max-width:74ch;margin:clamp(1.9rem,3vw,2.8rem) auto 0; font-size:1.02rem;line-height:1.95;color:var(--ink-72);text-align:left; } .prose p + p{margin-top:1.15em} @media (min-width:901px){ .prose{columns:2;column-gap:clamp(2.6rem,4.5vw,5rem)} .prose p{break-inside:avoid} .prose p + p{margin-top:0} } .prose--tight{max-width:58ch;columns:1!important;text-align:center} .prose--light{color:rgba(255,236,203,.74)} /* Soft stone — a third surface between ivory and photography */ .stone{background:var(--ivory-3)} /* A compact still-life row when it sits inside a column */ .still-row--3{gap:clamp(1rem,2vw,2rem)} .still-row--3 .still{height:clamp(112px,10.5vw,168px)} .still-row--3 .still-name{font-size:.98rem;margin-top:1.3rem} @media (max-width:900px){ .still-row--3{grid-template-columns:repeat(3,1fr);gap:1rem} .still-row--3 .still{height:clamp(88px,22vw,130px)} .still-row--3 .still-name{font-size:.82rem;margin-top:.9rem} } /* --------------------------------------------------------------- 10. FOOTER */ .foot{background:var(--ivory-2);padding-top:clamp(3rem,5vw,5rem);border-top:1px solid var(--hair)} .foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(2rem,5vw,6rem); padding-bottom:clamp(2.4rem,4vw,4rem)} .foot li+li{margin-top:1rem} .foot li a,.foot address a{font-size:.94rem;transition:opacity .4s} .foot li a:hover,.foot address a:hover{opacity:.55} .foot address{font-style:normal;font-size:.94rem;line-height:2.1;color:var(--ink-72)} .foot__bar{border-top:1px solid var(--hair);padding-block:2rem;display:flex; justify-content:space-between;gap:1.5rem;flex-wrap:wrap; font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-34)} .foot__mark{width:132px;margin-bottom:2.2rem} /* ----------------------------------------------------------- 11. RESPONSIVE */ @media (max-width:1100px){ .pair__img,.pair--r .pair__img{grid-column:1/8} .pair__txt,.pair--r .pair__txt{grid-column:9/13} } @media (max-width:900px){ :root{--nav:68px} :root{--barh:62px} .hero{grid-template-columns:1fr;height:auto;max-height:none;min-height:0} .hero__media{order:-1;height:46svh;min-height:280px} .hero__type{padding:clamp(3.4rem,10vw,4.6rem) var(--gut) clamp(3.4rem,10vw,4.6rem)} .hero__rule{display:none} .hero__card{left:auto;margin-left:0;right:var(--gut); bottom:auto;top:calc(46svh - clamp(92px,26vw,132px));width:clamp(112px,28vw,164px)} .hero__eyebrow{padding-right:clamp(110px,32vw,190px);letter-spacing:.26em;font-size:.6rem} .hero h1{max-width:14ch} .pair{grid-template-columns:1fr;gap:clamp(2rem,7vw,3.5rem)} .pair>*{grid-column:1/-1!important;order:initial!important} .sheet{grid-template-columns:1fr} .sheet__r{display:none} .still-row{grid-template-columns:1fr;gap:clamp(3rem,10vw,4rem)} .still{height:clamp(190px,44vw,260px)} .foot__grid{grid-template-columns:1fr} .bleed{height:clamp(400px,68vh,640px)} } /* Show/hide by breakpoint */ .only-sm{display:none} @media (max-width:640px){ .nav__mark img,.nav--solid .nav__mark img{height:32px} .only-sm{display:inline} .only-lg{display:none} .burger__t{display:none} .burger i{width:24px} .nav__r .tag{font-size:.6rem;letter-spacing:.2em} .nav__r .tag:hover{letter-spacing:.24em} .frame{padding:1.2rem 2.1rem;letter-spacing:.28em} .tag{letter-spacing:.28em} } @media print{.nav,.sheet,.stage__foot{display:none!important}body{background:#fff}} /* ══════════════════════════════════════════════ 15. INTERIOR PAGE HEADS */ /* No page borrows the homepage hero. Interior pages open on ivory with type. */ .phead{padding:calc(var(--barh) + clamp(2.6rem,4.6vw,4.6rem)) 0 clamp(2.4rem,4vw,4rem);background:var(--ivory)} .phead h1{max-width:16ch;margin-top:clamp(1.4rem,2.4vw,2rem)} .phead .prose{margin-top:clamp(1.8rem,3vw,2.6rem)} .phead__acts{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.6rem); margin-top:clamp(2.2rem,3.6vw,3.2rem);flex-wrap:wrap} .crumb{font-size:.63rem;max-width:100%;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-34); margin-bottom:clamp(2rem,3.5vw,3rem)} .crumb a{transition:color .4s} .crumb a:hover{color:var(--gold-ink)} .crumb span{margin-inline:.5rem} /* ═══════════════════════════════════════════════════════════ 16. THE MENU */ .menuwrap{display:grid;grid-template-columns:clamp(170px,17vw,230px) minmax(0,1fr); gap:clamp(2rem,5vw,6rem);padding-bottom:clamp(4rem,9vw,9rem);align-items:start} .mrail{position:sticky;top:calc(var(--barh) + 2.4rem)} .mrail li + li{margin-top:.9rem} .mrail a{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-52); transition:color .4s,letter-spacing .5s;display:inline-block} .mrail a:hover{color:var(--ink);letter-spacing:.26em} .mbody{max-width:1040px} .msec + .msec{margin-top:clamp(3.5rem,7vw,7rem)} .msec__head{padding-bottom:1.6rem;border-bottom:1px solid var(--hair);margin-bottom:.5rem; scroll-margin-top:calc(var(--barh) + 2rem)} .msec{scroll-margin-top:calc(var(--barh) + 2rem)} .mnote{font-size:.78rem;line-height:1.8;color:var(--ink-52);margin-top:.9rem;max-width:60ch; font-style:italic} .mnote--foot{margin-top:clamp(3rem,5vw,4.5rem);padding-top:1.8rem;border-top:1px solid var(--hair)} .mrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1rem,2vw,1.8rem); align-items:center;padding:clamp(1rem,1.8vw,1.5rem) 0;border-bottom:1px solid var(--hair)} .mrow:last-child{border-bottom:0} .mrow__ph{width:clamp(52px,5.5vw,74px);display:flex;align-items:center;justify-content:center} .mrow__ph img{max-height:clamp(52px,5.5vw,74px);width:auto;object-fit:contain; filter:drop-shadow(0 10px 14px rgba(42,22,19,.13))} .mrow__ph--none{width:clamp(52px,5.5vw,74px)} .mrow__n{font-family:var(--serif);font-size:clamp(1.14rem,1.5vw,1.34rem);font-weight:400; display:block;line-height:1.24} .mrow__d{font-size:.82rem;line-height:1.7;color:var(--ink-52);display:block;margin-top:.35rem;max-width:52ch} .mrow__p{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;color:var(--gold-ink); font-variant-numeric:tabular-nums;white-space:nowrap} @media (max-width:900px){ .menuwrap{grid-template-columns:1fr;gap:2rem} .mrail{position:sticky;top:var(--barh);z-index:80;background:var(--ivory); margin-inline:calc(var(--gut) * -1);padding:.9rem var(--gut); border-bottom:1px solid var(--hair)} .mrail ul{display:flex;gap:1.6rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .mrail ul::-webkit-scrollbar{display:none} .mrail li + li{margin-top:0} .mrail a{white-space:nowrap;font-size:.64rem} .mrow{gap:1rem} .mrow__ph,.mrow__ph--none{width:48px} .mrow__ph img{max-height:48px} } .foot-h{font-family:var(--sans);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase; color:var(--gold-ink);margin-bottom:2rem;font-weight:400} /* ═══════════════════════════════════════════════ 17. VOICES (social proof) */ /* No cards, no boxes, no stars. Three quotes given room, hairline-separated. */ .voices{display:grid;grid-template-columns:repeat(3,1fr);gap:0; margin-top:clamp(2.2rem,4vw,4rem);border-top:1px solid var(--hair)} .voice{margin:0;padding:clamp(1.9rem,3vw,2.8rem) clamp(1.4rem,3vw,3rem); border-right:1px solid var(--hair);display:flex;flex-direction:column;justify-content:space-between} .voice:last-child{border-right:0} .voice p{font-family:var(--serif);font-weight:300;font-style:italic; font-size:clamp(1.2rem,1.75vw,1.6rem);line-height:1.42;letter-spacing:-.008em;color:var(--ink)} .voice footer{font-family:var(--sans);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase; color:var(--gold-ink);margin-top:clamp(1.3rem,2.2vw,1.9rem)} .voice footer span{display:block;color:var(--ink-34);margin-top:.5rem;letter-spacing:.2em} /* ══════════════════════════════════════════════ 18. THE CART, KEPT IN ITS PLACE */ /* Deliberately the quietest band on the page: no solid CTA, no full-bleed drama. */ .cartband{display:grid;grid-template-columns:46fr 54fr;align-items:stretch; background:var(--ivory-2);border-top:1px solid var(--hair)} .cartband__img{position:relative;overflow:hidden;min-height:clamp(260px,34vw,460px)} .cartband__img img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover} .cartband__txt{display:flex;flex-direction:column;justify-content:center; padding:clamp(2.4rem,4.4vw,4.4rem) clamp(2rem,5vw,6rem)} .cartband__txt .note{max-width:38ch} @media (max-width:900px){ .voices{grid-template-columns:1fr} .voice{border-right:0;border-bottom:1px solid var(--hair)} .voice:last-child{border-bottom:0} .cartband{grid-template-columns:1fr} .cartband__img{min-height:0;aspect-ratio:3/2} } /* ═══════════════════════════════════════════════ 19. THE GALLERY RAIL */ /* One aspect ratio, eight subjects, edge to edge. Frames are staggered vertically so the row reads as a curated sequence rather than a filmstrip, and every caption is visible — a gallery should label its pictures. */ .grail{ display:flex;align-items:flex-start;gap:clamp(.9rem,1.8vw,2rem); margin-top:clamp(1.6rem,2.8vw,2.6rem); padding-inline:var(--gut); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scroll-padding-left:var(--gut); scrollbar-width:none;-ms-overflow-style:none;cursor:grab; } .grail::-webkit-scrollbar{display:none} .grail.drag{cursor:grabbing;scroll-snap-type:none} .grail:focus-visible{outline:1px solid var(--gold-ink);outline-offset:6px} .grail::after{content:"";flex:0 0 calc(var(--gut) - clamp(.9rem,1.8vw,2rem))} .gslide{ position:relative;flex:0 0 clamp(224px,28vw,438px); scroll-snap-align:start;display:block;text-decoration:none; } .gslide:nth-child(even){margin-top:clamp(1.4rem,3.4vw,3.6rem)} .gframe{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--ivory-3)} .gslide img{width:100%;height:100%;object-fit:cover;transition:transform 2.2s var(--ease)} .gslide:hover img{transform:scale(1.045)} .gframe::after{content:"";position:absolute;inset:0;background:var(--wine-deep); opacity:0;transition:opacity .7s var(--ease)} .gslide:hover .gframe::after,.gslide:focus-visible .gframe::after{opacity:.10} .gcap{ display:block;margin-top:1.1rem; font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-34); transition:color .5s var(--ease); } .gslide:hover .gcap{color:var(--gold-ink)} /* A hairline that fills as the rail moves — position without instruction. */ .gtrack{position:relative;height:1px;background:var(--hair); margin:clamp(2rem,3.6vw,3.2rem) var(--gut) 0} .gtrack i{position:absolute;inset:0 auto 0 0;display:block;width:100%; background:var(--gold-ink);transform:scaleX(0);transform-origin:left; transition:transform .18s linear} @media (max-width:900px){ .gslide{flex:0 0 70vw} .gslide:nth-child(even){margin-top:0} .gcap{margin-top:.85rem} } @media (prefers-reduced-motion:reduce){ .gslide img{transition:none} .gtrack i{transition:none} } /* ─────────────────────────────────────────────────────────── LIGHTBOX */ .lb{position:fixed;inset:0;z-index:1200;display:grid;place-items:center; padding:clamp(1.2rem,5vw,4rem);background:rgba(24,7,4,.97); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s} .lb.on{opacity:1;visibility:visible} .lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:1.3rem;max-width:100%;max-height:100%} .lb img{max-width:100%;max-height:78vh;object-fit:contain;transform:scale(.98);transition:transform .6s var(--ease)} .lb.on img{transform:scale(1)} .lb figcaption{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,236,203,.66)} .lb button{position:absolute;color:var(--sand);width:56px;height:56px;display:grid;place-items:center; font-size:2rem;line-height:1;opacity:.68;transition:opacity .35s,background .35s;border:0;background:none} .lb button:hover{opacity:1;background:rgba(213,190,139,.12)} .lb__x{top:clamp(.6rem,2vw,1.6rem);right:clamp(.6rem,2vw,1.6rem);font-size:2.2rem} .lb__p{left:clamp(.2rem,2vw,1.6rem);top:50%;transform:translateY(-50%);font-size:2.6rem} .lb__n{right:clamp(.2rem,2vw,1.6rem);top:50%;transform:translateY(-50%);font-size:2.6rem} /* ═══════════════════════════════════════════ 20. TOUCH TARGETS (mobile) */ /* Visual weight stays identical; only the tappable area grows. */ @media (hover:none), (max-width:900px){ .tag{padding-top:.85rem;padding-bottom:.95rem} .tag::after{bottom:.4rem} .foot li a,.foot address a,.foot__bar a{display:inline-block;padding-block:.55rem} .crumb a{display:inline-block;padding-block:.5rem} .mrail a{padding-block:.55rem} .burger{padding:.7rem .4rem;margin-left:-.4rem} .nav__r .tag{padding-top:.9rem;padding-bottom:1rem} } .qlink{color:var(--gold-ink);display:inline-block;transition:opacity .4s} .qlink:hover{opacity:.62} @media (hover:none), (max-width:900px){ .qlink{padding:.7rem .4rem} .sheet__meta a{display:inline-block;padding-block:.5rem} .burger{padding:.95rem .6rem;margin-left:-.6rem} } /* ══════════════════════════════════════════ 21. DUO — full-bleed split band */ /* Structurally distinct from .pair (which is inset with gutters). Used where a movement needs its own identity rather than another editorial row. */ .duo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch; min-height:clamp(500px,80vh,900px)} .duo__img{position:relative;overflow:hidden;background:var(--ivory-3)} .duo__img img{position:absolute;inset:0;width:100%;height:106%;object-fit:cover} .duo__txt{display:flex;flex-direction:column;justify-content:center; padding:clamp(2.6rem,5vw,5.5rem) clamp(2rem,5vw,6rem);background:var(--ivory-3)} .duo__txt>*{max-width:42ch} .duo--rev .duo__img{order:2} @media (max-width:900px){ .duo{grid-template-columns:1fr;min-height:0} .duo__img{aspect-ratio:4/5} .duo--rev .duo__img{order:0} } /* ═══════════════════════════════════════════════════ 22. MOTION, EXPANDED */ /* Headline rises from behind a mask. The single most effective luxury move — it reads as considered rather than animated. */ .mask{overflow:hidden;display:block} .mask>span{display:block;transform:translateY(104%); transition:transform 1.15s var(--ease);transition-delay:var(--d,0ms)} .mask.in>span{transform:none} /* Still-life products settle rather than appear. */ .still img{transition:transform 1.5s var(--ease),opacity 1.2s var(--ease)} .fade .still img{transform:translateY(18px) scale(.97)} .fade.in .still img{transform:none;scale:1} /* A hairline that draws itself under each section index. */ .eyebrow{position:relative} .rule-draw::after{content:"";display:block;height:1px;background:var(--hair); width:100%;max-width:260px;margin-top:1.1rem;transform:scaleX(0);transform-origin:left; transition:transform 1.4s var(--ease);transition-delay:var(--d,120ms)} .fade.in.rule-draw::after,.in .rule-draw::after{transform:scaleX(1)} /* Reading-progress hairline. Gold, 2px, top of the viewport. */ .prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:1100; transform:scaleX(0);transform-origin:left;background:var(--gold-ink); opacity:.55;pointer-events:none;will-change:transform} @media (prefers-reduced-motion:reduce){ .mask>span{transform:none!important;transition:none!important} .rule-draw::after{transform:scaleX(1)!important;transition:none!important} .fade .still img{transform:none!important} .prog{display:none} .duo__img img{transform:none!important} } /* ══════════════════════════════════════════ 23. INTERIOR PAGE OPENINGS */ /* Three distinct openings so no interior page reads as a copy of another, and none of them borrows the homepage hero. */ /* (a) Editorial split — type on ivory, one photograph holding the edge. */ .phead--split{ display:grid;grid-template-columns:54fr 46fr;align-items:center; gap:clamp(2rem,5vw,6rem);padding-block:0; min-height:clamp(560px,84vh,940px);overflow:hidden; } .phead--split .phead__txt{ padding:calc(var(--barh) + clamp(3rem,5vw,5rem)) clamp(1.6rem,3vw,4rem) clamp(3rem,5vw,5rem) var(--gut); } .phead--split h1{max-width:13ch} .phead--split .prose{max-width:46ch;text-align:left;margin-inline:0;columns:1} .phead__img{position:relative;overflow:hidden;background:var(--ivory-3);align-self:stretch} .phead__img img{position:absolute;inset:0;width:100%;height:108%;object-fit:cover} /* a hairline of light where photograph meets paper */ .phead__img::before{ content:"";position:absolute;top:0;bottom:0;left:0;width:clamp(40px,7vw,120px);z-index:2; background:linear-gradient(90deg,var(--ivory) 0%,rgba(252,247,237,.42) 46%,transparent 100%); pointer-events:none; } .phead--rev{grid-template-columns:46fr 54fr} .phead--rev .phead__img{order:0} .phead--rev .phead__txt{order:1;padding-inline:clamp(1.6rem,3vw,4rem) var(--gut)} .phead--rev .phead__img::before{left:auto;right:0; background:linear-gradient(270deg,var(--ivory) 0%,rgba(252,247,237,.42) 46%,transparent 100%)} /* (b) Cinematic — a full-bleed photograph, then type below it on ivory. */ .pstage{position:relative;overflow:hidden;background:var(--wine-deep); height:clamp(420px,68vh,780px);margin-top:0} .pstage__m{position:absolute;inset:0} .pstage__m img{width:100%;height:110%;object-fit:cover;position:absolute;inset:0} .pstage::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(24,7,4,.42) 0%,rgba(24,7,4,0) 34%,rgba(24,7,4,0) 68%,rgba(252,247,237,.9) 100%)} .phead--under{padding-top:clamp(2.6rem,4.6vw,4.4rem)} .phead--under h1,.phead--quiet h1{margin-inline:auto;text-align:center;max-width:15ch} .phead--under .crumb,.phead--quiet .crumb{text-align:center} .phead--under .eyebrow,.phead--quiet .eyebrow{display:block;text-align:center} .phead--under .rule-draw::after,.phead--quiet .rule-draw::after{margin-inline:auto} .phead--under .phead__acts,.phead--quiet .phead__acts{justify-content:center} .phead--under .prose,.phead--quiet .prose{text-align:center;columns:1;max-width:62ch;margin-inline:auto} /* (c) Quiet — type only, for story and utility pages. */ .phead--quiet{padding-top:calc(var(--barh) + clamp(3.4rem,6vw,6.5rem)); padding-bottom:clamp(2.4rem,4vw,4rem)} @media (max-width:900px){ .phead--split,.phead--rev{grid-template-columns:1fr;min-height:0} .phead--split .phead__txt,.phead--rev .phead__txt{ order:1;padding:calc(var(--barh) + clamp(2.4rem,7vw,3.4rem)) var(--gut) clamp(2rem,6vw,3rem)} .phead--split .phead__img,.phead--rev .phead__img{order:2;aspect-ratio:4/5} .phead__img::before{display:none} .pstage{height:clamp(320px,48vh,460px)} } /* ═══════════════════════════════════════════════════ 24. THE ACCORDION */ /* Questions answered without a card in sight. Hairlines only. */ .acc{border-top:1px solid var(--hair)} .acc h3{margin:0;font-weight:400;font-size:inherit;line-height:inherit} .acc__item{border-bottom:1px solid var(--hair)} .acc__btn{ width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:2rem; background:none;border:0;text-align:left;cursor:pointer;color:var(--ink); font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.65vw,1.5rem); line-height:1.4;letter-spacing:-.01em;padding:clamp(1.3rem,2.2vw,1.9rem) 0; transition:color .45s var(--ease); } .acc__btn:hover{color:var(--wine)} .acc__ico{position:relative;flex:0 0 14px;width:14px;height:14px;margin-top:.5em} .acc__ico::before,.acc__ico::after{content:"";position:absolute;background:var(--gold-ink); transition:transform .6s var(--ease),opacity .4s} .acc__ico::before{left:0;top:6px;width:14px;height:1px} .acc__ico::after{left:6px;top:0;width:1px;height:14px} .acc__btn[aria-expanded="true"] .acc__ico::after{transform:rotate(90deg);opacity:0} .acc__btn[aria-expanded="true"]{color:var(--wine)} .acc__panel{height:0;overflow:hidden;transition:height .58s var(--ease)} .acc__panel>div{padding-bottom:1px} .acc__panel>div>*{opacity:0;transform:translateY(10px); transition:opacity .5s .12s var(--ease),transform .5s .12s var(--ease)} .acc__item.on .acc__panel>div>*{opacity:1;transform:none} .acc__panel p{font-size:.95rem;line-height:1.95;color:var(--ink-72);max-width:62ch; padding-bottom:clamp(1.4rem,2.4vw,2rem)} .acc__panel p + p{margin-top:1rem} @media (prefers-reduced-motion:reduce){ .acc__panel,.acc__panel>div>*,.acc__ico::before,.acc__ico::after{transition:none!important} } /* ═══════════════════════════════════════════════ 25. FORMS & BOOKING */ /* The JotForm is wrapped, not restyled — it stays the client's working form. */ /* The JotForm's own theme is #111 with cream and gold type, so the band around it is dark to match exactly. No seam, no restyling of the client's form. */ .formband{background:#111;padding-block:clamp(3rem,6vw,6rem)} .formband__head{margin-bottom:clamp(2rem,3.4vw,3rem)} .formband__head h2{color:var(--sand)} .formwrap{background:#111;position:relative;max-width:660px;margin-inline:auto; padding:clamp(.4rem,1vw,.9rem)} .formwrap::after{content:"";position:absolute;inset:0;border:1px solid rgba(213,190,139,.26); pointer-events:none} .formwrap iframe{width:100%!important;min-height:1220px;border:0;display:block; position:relative;z-index:2;background:#111;color-scheme:dark} .formnote{font-size:.78rem;line-height:1.9;color:rgba(255,236,203,.6);max-width:62ch; margin:clamp(1.6rem,2.6vw,2.2rem) auto 0;text-align:center;padding-inline:var(--gut)} .formnote a{color:var(--gold)} .sec-half .formnote,.mapwrap + .formnote{color:var(--ink-52)} .sec-half .formnote a{color:var(--gold-ink)} .formwrap--wide{max-width:1180px;background:#111;padding:0} .formwrap--wide::after{border-color:rgba(213,190,139,.22)} .formwrap--wide iframe{background:#111;min-height:1600px} @media (max-width:640px){ .formwrap iframe{min-height:1420px} .formwrap--wide iframe{min-height:2100px} } /* Anchored sections must clear the fixed masthead. */ .formband[id]{scroll-margin-top:calc(var(--barh) + 1rem)} /* Alternative routes, given equal dignity to the form itself. */ .routes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hair); margin-top:clamp(2.6rem,4.4vw,4rem)} .route{padding:clamp(1.8rem,3vw,2.6rem) clamp(1.2rem,2.4vw,2.4rem); border-right:1px solid var(--hair)} .route:last-child{border-right:0} .route h2{font-family:var(--sans);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase; color:var(--gold-ink);font-weight:400;margin-bottom:1.1rem} .route p{font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.35;font-weight:300} .route p a{transition:color .4s} .route p a:hover{color:var(--wine)} .route .note{margin-top:.9rem;font-size:.8rem} @media (max-width:900px){ .routes{grid-template-columns:1fr} .route{border-right:0;border-bottom:1px solid var(--hair)} .route:last-child{border-bottom:0} .formwrap iframe{min-height:900px} } /* ══════════════════════════════════════════ 26. PACKAGES (mobile cart) */ /* Prices the client supplied, set as a menu rather than as pricing cards. */ .pkgs{border-top:1px solid var(--hair);margin-top:clamp(2.4rem,4vw,3.6rem)} .pkg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.4rem,3vw,3rem); align-items:baseline;padding:clamp(1.7rem,3vw,2.6rem) 0;border-bottom:1px solid var(--hair); transition:padding-left .6s var(--ease)} .pkg:hover{padding-left:clamp(0px,1.2vw,18px)} .pkg h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.16;letter-spacing:-.016em} .pkg .note{margin-top:.9rem;max-width:52ch} .pkg__p{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-ink);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums} .pkg__p b{display:block;font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,2rem); letter-spacing:-.01em;text-transform:none;font-weight:400;color:var(--ink);margin-bottom:.35rem} @media (max-width:640px){ .pkg{grid-template-columns:1fr} .pkg__p{text-align:left;margin-top:1.1rem} } /* ═══════════════════════════════════════════════ 27. THE GALLERY GRID */ /* A wall, not a carousel: unequal columns, staggered reveal, real captions. */ .ggrid{columns:3;column-gap:clamp(1rem,2.4vw,2.6rem)} .ggrid figure{break-inside:avoid;margin:0 0 clamp(1rem,2.4vw,2.6rem)} .ggrid a{display:block;position:relative;overflow:hidden;background:var(--ivory-3)} .ggrid img{width:100%;height:auto;display:block;transition:transform 2.2s var(--ease)} .ggrid a:hover img{transform:scale(1.045)} .ggrid a::after{content:"";position:absolute;inset:0;background:var(--wine-deep);opacity:0; transition:opacity .7s var(--ease)} .ggrid a:hover::after,.ggrid a:focus-visible::after{opacity:.10} .ggrid figcaption{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase; color:var(--ink-34);margin-top:.95rem;transition:color .5s var(--ease)} .ggrid figure:hover figcaption{color:var(--gold-ink)} @media (max-width:1000px){.ggrid{columns:2}} @media (max-width:600px){.ggrid{columns:1}} @media (prefers-reduced-motion:reduce){.ggrid img{transition:none}} /* ═════════════════════════════════════════════ 28. FACTS & DIRECTIONS */ /* The visit page. Hairline rows, no icons, no boxes. */ .facts{border-top:1px solid var(--hair)} .facts__row{display:grid;grid-template-columns:minmax(140px,22%) minmax(0,1fr); gap:clamp(1.2rem,3vw,3rem);padding:clamp(1.4rem,2.4vw,2rem) 0; border-bottom:1px solid var(--hair);align-items:baseline} .facts dt{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase; color:var(--gold-ink)} .facts dd{margin:0;font-size:1rem;line-height:1.95;color:var(--ink-72)} .facts dd a{color:var(--ink);border-bottom:1px solid var(--hair);transition:border-color .4s} .facts dd a:hover{border-color:var(--gold-ink)} .facts dd b{font-weight:400;color:var(--ink)} @media (max-width:640px){.facts__row{grid-template-columns:1fr;gap:.5rem}} .mapwrap{position:relative;border:1px solid var(--hair);background:var(--ivory-3); aspect-ratio:16/9;overflow:hidden} .mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0; filter:grayscale(.34) sepia(.14) contrast(1.02)} /* Numbered sequence — used for "how a booking works", never for fake stats. */ .steps{counter-reset:s;border-top:1px solid var(--hair)} .steps li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr); gap:clamp(1.4rem,3vw,2.6rem);padding:clamp(1.5rem,2.6vw,2.2rem) 0; border-bottom:1px solid var(--hair);align-items:baseline} .steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--sans); font-size:.66rem;letter-spacing:.28em;color:var(--gold-ink)} .steps h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.9vw,1.7rem); line-height:1.3;margin-bottom:.65rem} .steps p{font-size:.9rem;line-height:1.9;color:var(--ink-52);max-width:56ch} /* ══════════════════════════════════════════════ 29. LEGAL / LONG-FORM */ .legal{max-width:72ch;margin-inline:auto} .legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.2vw,1.9rem); letter-spacing:-.014em;margin:clamp(2.6rem,4vw,3.4rem) 0 1.1rem} .legal h2:first-child{margin-top:0} .legal p,.legal li{font-size:.95rem;line-height:1.95;color:var(--ink-72)} .legal p + p{margin-top:1.05rem} .legal ul{margin:1.1rem 0 0;padding-left:1.2rem;list-style:disc} .legal li + li{margin-top:.55rem} .legal a{color:var(--gold-ink);border-bottom:1px solid var(--hair)} /* A quiet, factual notice — used where the client must still confirm a fact. */ .notice{border-left:2px solid var(--gold-ink);padding:1.1rem 0 1.1rem 1.4rem; font-size:.86rem;line-height:1.9;color:var(--ink-52);max-width:62ch; margin:clamp(1.8rem,3vw,2.6rem) auto 0} /* ══════════════════════════════════════════ 30. MOTION, THIRD PASS */ /* Children of a .stagger reveal in sequence rather than as one block. */ /* Transform only, no opacity — these groups carry gallery images, price lists and body copy, any of which can be the Largest Contentful Paint element. The staggered sequence still reads; it simply does not gate the metric. */ .stagger>*{transform:translate3d(0,18px,0);transition:transform 1.05s var(--ease)} .stagger.in>*{transform:none} .stagger.in>*:nth-child(1){transition-delay:0ms} .stagger.in>*:nth-child(2){transition-delay:90ms} .stagger.in>*:nth-child(3){transition-delay:180ms} .stagger.in>*:nth-child(4){transition-delay:270ms} .stagger.in>*:nth-child(5){transition-delay:360ms} .stagger.in>*:nth-child(6){transition-delay:450ms} .stagger.in>*:nth-child(7){transition-delay:540ms} .stagger.in>*:nth-child(8){transition-delay:630ms} .stagger.in>*:nth-child(n+9){transition-delay:700ms} /* A rule that draws itself across a section head. */ /* Numerals and prices settle a beat after their row. */ .pkg .pkg__p,.mrow__p{transition:opacity .8s var(--ease) .18s} @media (prefers-reduced-motion:reduce){ .stagger>*{transform:none!important;transition:none!important} .pstage__m img,.phead__img img{transform:none!important} .ggrid a:hover img{transform:none} } /* ══════════════════════════════════════════ 31. LATE CORRECTIONS */ /* Column counts live in classes, never in inline styles — an inline grid-template-columns outranks every media query below it. */ .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} @media (max-width:1000px){.cols-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:900px){ .cols-2,.cols-3,.cols-4{grid-template-columns:1fr} } /* A 1fr track floors at min-content, so the menu index's flex row was able to stretch the whole document. minmax(0,1fr) lets it scroll instead. */ @media (max-width:900px){ .menuwrap{grid-template-columns:minmax(0,1fr)} .mrail,.mbody,.msec,.mlist{min-width:0;max-width:100%} .mrail ul{max-width:100%} } /* Inline links inside prose blocks need a real tap area on touch devices. */ @media (hover:none), (max-width:900px){ .route p a,.facts dd a,.formnote a,.legal a,.notice a,.steps a,.acc__panel a{ display:inline-block;padding-block:.6rem} .foot__bar a{padding-block:.6rem} } /* A menu section outside the menu page's index grid gets the full measure. */ .mgroup{max-width:1040px;margin-inline:auto} .mgroup__head{max-width:1040px;margin:0 auto clamp(2rem,3.4vw,3rem)} .mgroup .msec:first-child{margin-top:0} /* Add-on price list — four short columns, hairlines, no cards. */ .addons{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,3.2rem); border-top:1px solid var(--hair);padding-top:clamp(1.6rem,2.6vw,2.4rem)} .addon h3{font-family:var(--sans);font-size:.6rem;letter-spacing:.32em;text-transform:uppercase; color:var(--gold-ink);font-weight:400;margin-bottom:1.3rem} .addon__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline; padding:.62rem 0;border-bottom:1px solid var(--hair);font-size:.88rem;color:var(--ink-72)} .addon__row:last-child{border-bottom:0} .addon__p{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.82rem} @media (max-width:900px){.addons{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.addons{grid-template-columns:1fr;gap:2rem}} /* A held slot. Deliberately reads as unfinished — it is. */ .voice--slot p{color:var(--ink-34);font-style:normal; border:1px dashed var(--hair);border-radius:2px;padding:1.6rem 1.4rem; font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.5} .voice--slot footer{color:var(--ink-34)} .notice strong{color:var(--ink);font-weight:400} /* What a package includes — a quiet list, not a feature grid. */ .pkg__inc{margin-top:1.1rem;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;max-width:56ch} .pkg__inc li{font-size:.78rem;letter-spacing:.02em;color:var(--ink-52);position:relative;padding-left:.9rem} .pkg__inc li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:1px;background:var(--gold-ink)} .pkg__common{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink); margin-top:clamp(1rem,1.8vw,1.4rem)} /* ══════════════════════════════════════════════ 32. THE JOURNAL */ /* An editorial reading layout, not a blog theme. One column, a real measure, and type sized for someone who intends to finish the piece. */ /* ─────────────────────────────────────────────────────── the index */ .jfilters{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;padding-bottom:clamp(1.6rem,2.6vw,2.4rem); border-bottom:1px solid var(--hair);margin-bottom:clamp(2rem,3.6vw,3.4rem)} .jfilter{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-52); transition:color .4s,letter-spacing .5s} .jfilter:hover{color:var(--wine);letter-spacing:.32em} .jgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2.4rem,4.4vw,4.4rem) clamp(1.8rem,3.4vw,3.4rem)} .jcard--lead{grid-column:1/-1;display:block} .jcard__l{display:block;text-decoration:none;color:inherit} .jcard__f{display:block;overflow:hidden;background:var(--ivory-3);aspect-ratio:16/10} .jcard--lead .jcard__f{aspect-ratio:21/9} .jcard__f img{width:100%;height:100%;object-fit:cover;transition:transform 2.2s var(--ease)} .jcard__l:hover .jcard__f img{transform:scale(1.045)} .jcard__m{display:block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase; color:var(--gold-ink);margin-top:1.4rem} .jcard__t{display:block;font-family:var(--serif);font-weight:400;letter-spacing:-.018em; font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.22;margin-top:.85rem; transition:color .4s var(--ease)} .jcard--lead .jcard__t{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.08;max-width:20ch} .jcard__l:hover .jcard__t{color:var(--wine)} .jcard__s{display:block;font-size:.88rem;line-height:1.85;color:var(--ink-52);margin-top:.9rem; max-width:46ch} .jcard--lead .jcard__s{font-size:1rem;max-width:56ch} .jcard__go{display:inline-block;margin-top:1.3rem;font-size:.6rem;letter-spacing:.28em; text-transform:uppercase;color:var(--ink-34);position:relative;padding-bottom:.4rem} .jcard__go::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px; background:var(--gold-ink);transform:scaleX(0);transform-origin:left; transition:transform .6s var(--ease)} .jcard__l:hover .jcard__go{color:var(--gold-ink)} .jcard__l:hover .jcard__go::after{transform:scaleX(1)} @media (max-width:760px){.jgrid{grid-template-columns:1fr}} .jcard[hidden]{display:none} .jfilter[aria-current="true"]{color:var(--wine)} .jfilter[aria-current="true"]::after{content:"";display:block;height:1px;background:var(--gold-ink);margin-top:.45rem} /* ───────────────────────────────────────────────────── the article */ .jhead{padding:calc(var(--barh) + clamp(2.6rem,5vw,5rem)) 0 clamp(1.8rem,3vw,2.6rem)} .jhead h1{max-width:19ch;margin-top:clamp(1.2rem,2vw,1.8rem);text-wrap:balance} .jmeta{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-34)} .jmeta span{margin-inline:.55rem} .jcat{color:var(--gold-ink);transition:opacity .4s} .jcat:hover{opacity:.62} .jstand{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,1.85vw,1.6rem); line-height:1.5;color:var(--ink-72);max-width:44ch;margin-top:clamp(1.4rem,2.4vw,2rem)} .jhero{position:relative;overflow:hidden;margin:0 0 clamp(2.4rem,5vw,4.5rem); height:clamp(300px,52vh,640px);background:var(--ivory-3)} .jhero img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover} .jbody{max-width:68ch;margin-inline:auto;font-size:clamp(1.02rem,1.15vw,1.12rem);line-height:1.95; color:var(--ink-72)} .jbody > p + p{margin-top:1.35em} .jbody h2{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.02em; font-size:clamp(1.6rem,2.7vw,2.3rem);line-height:1.18; margin:clamp(2.8rem,5vw,4.2rem) 0 1.2rem;max-width:22ch} .jbody h3{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.012em; font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.3;margin:clamp(2rem,3.4vw,2.8rem) 0 .9rem} .jbody .lead-in{font-family:var(--serif);font-weight:300;color:var(--ink); font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.62;margin-bottom:1.6em} .jbody strong{font-weight:400;color:var(--ink)} .jbody em{font-style:italic} .jbody a{color:var(--ink);border-bottom:1px solid rgba(133,99,42,.42); transition:border-color .4s,color .4s} .jbody a:hover{color:var(--wine);border-color:var(--wine)} .jbody ul,.jbody ol{margin:1.5em 0;padding-left:1.4rem} .jbody ul{list-style:none;padding-left:0} .jbody ul li{position:relative;padding-left:1.5rem} .jbody ul li::before{content:"";position:absolute;left:0;top:.92em;width:7px;height:1px; background:var(--gold-ink)} .jbody ol{list-style:decimal} .jbody ol li::marker{color:var(--gold-ink);font-size:.85em} .jbody li + li{margin-top:.75em} .jlinks{margin-top:clamp(2.6rem,4.4vw,3.6rem);padding-top:1.6rem;border-top:1px solid var(--hair); font-size:.76rem;letter-spacing:.04em;color:var(--ink-34)} .jlinks a{color:var(--gold-ink);border-bottom:0} .jby{max-width:68ch;margin:clamp(2.4rem,4vw,3.4rem) auto 0;padding-top:1.6rem; border-top:1px solid var(--hair);font-size:.76rem;line-height:1.9;color:var(--ink-34)} /* ─────────────────────────────────────────────────── related posts */ .rels{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hair); margin-top:clamp(1.6rem,2.6vw,2.4rem)} .rel{display:block;padding:clamp(1.8rem,3vw,2.6rem) clamp(1.2rem,2.4vw,2.4rem) clamp(1.8rem,3vw,2.6rem) 0;border-right:1px solid var(--hair);text-decoration:none; transition:padding-left .6s var(--ease)} .rel:last-child{border-right:0;padding-left:clamp(1.2rem,2.4vw,2.4rem);padding-right:0} .rel:hover{padding-left:clamp(.6rem,1.4vw,1.4rem)} .rel:last-child:hover{padding-left:clamp(1.8rem,3.4vw,3.4rem)} .rel__c{display:block;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase; color:var(--gold-ink)} .rel__t{display:block;font-family:var(--serif);font-weight:400;letter-spacing:-.014em; font-size:clamp(1.15rem,1.75vw,1.5rem);line-height:1.28;margin-top:.9rem;color:var(--ink); transition:color .4s} .rel:hover .rel__t{color:var(--wine)} @media (max-width:760px){ .rels{grid-template-columns:1fr} .rel{border-right:0;border-bottom:1px solid var(--hair);padding-inline:0!important} .rel:last-child{border-bottom:0} .rel:hover,.rel:last-child:hover{padding-left:clamp(.6rem,2vw,1rem)} } @media (prefers-reduced-motion:reduce){ .jcard__l:hover .jcard__f img{transform:none} .jcard__go::after{transform:scaleX(1)!important;transition:none} .jhero img{transform:none!important} .rel,.rel:hover{padding-left:0;transition:none} }