/* ============================================================================================== Harrington Waters Clubhouse Café Hand-authored. No framework, no CDN, no third-party request. ============================================================================================== */ /* --- 1. Tokens ------------------------------------------------------------------------------ */ :root{ /* Ground */ --ink:#14170F; /* deep green-black, the dark ground */ --ink-2:#1E2317; --paper:#F8F5EC; /* cream */ --paper-hi:#FCFAF5; --stone:#EAE3D4; /* warm stone */ --moss:#46462A; /* fairway green band */ --moss-2:#535337; --ornament-dk:#FFEDCE; /* ornament + illustration colour on dark grounds */ /* Ornament + accent */ --sage:#98985B; /* the flourish colour, taken from the reference ornament */ --copper:#B07F4E; --copper-ink:#865B2F; /* small copper text: 5.4:1 on cream, 4.6:1 on stone */ --copper-cream:#D7B07D; /* small copper text on dark: 4.7:1 on moss, 9.0:1 on ink */ --water:#5E7F7C; /* Text */ --t-1:#14170F; /* primary on light */ --t-2:#4A4F41; /* secondary on light */ --t-3:#606657; /* tertiary on light: 5.5:1 on cream, 4.7:1 on stone */ --c-1:#F5F2E8; /* primary on dark */ --c-2:#C6C6B4; /* secondary on dark */ --c-3:#B5B8A4; /* tertiary on dark: 4.6:1 on moss, 8.9:1 on ink */ /* Lines */ --line:rgba(20,23,15,.14); --line-soft:rgba(20,23,15,.08); --line-dk:rgba(245,242,232,.20); --line-dk-soft:rgba(245,242,232,.10); /* Type */ --f-display:'Baskervville', 'Iowan Old Style', Georgia, serif; --f-garamond:'EB Garamond', 'Baskervville', Georgia, serif; --f-body:'Jost', 'Helvetica Neue', Arial, sans-serif; --f-label:'Urbanist', 'Helvetica Neue', Arial, sans-serif; /* Rhythm */ --gut:clamp(20px, 5vw, 72px); /* Header geometry. The logo's height is derived rather than guessed so the rule that centres it on the hairline stays correct at every viewport. 1494x666 is the wordmark's own aspect. */ --logo-w:clamp(150px,15vw,214px); --logo-h:calc(var(--logo-w) * 666 / 1494); --site-pt:clamp(22px,2vw,30px); --rule-lift:4px; /* Pinned rather than left to the type: the logo's offset is measured against it, so it has to be a number the stylesheet knows. 34px is the natural height of the link row. */ --nav-h:34px; --wrap:1360px; --sec:clamp(72px, 11vw, 168px); /* vertical section padding */ --sec-s:clamp(52px, 7vw, 104px); /* Motion */ --e-out:cubic-bezier(.22,.61,.36,1); --e-soft:cubic-bezier(.33,1,.68,1); --e-arch:cubic-bezier(.16,.84,.44,1); } *,*::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(--paper); color:var(--t-1); font-family:var(--f-body); font-size:clamp(17px,.55vw + 15.5px,18.5px); font-weight:300; line-height:1.68; letter-spacing:.004em; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{ max-width:100%; display:block } img{ height:auto } a{ color:inherit } h1,h2,h3,h4,figure,p,ul,ol,dl,dd,blockquote{ margin:0 } ul,ol{ padding:0; list-style:none } button{ font:inherit; color:inherit } .u-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 } .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--c-1); padding:14px 20px; font-family:var(--f-label); font-size:14.5px; letter-spacing:.1em; text-transform:uppercase } .skip:focus{ left:12px; top:12px } :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--copper-ink); outline-offset:3px; border-radius:2px; } .band--ink :focus-visible,.band--moss :focus-visible,.phero :focus-visible,.hero :focus-visible,.foot :focus-visible{ outline-color:var(--copper-cream) } /* --- 2. Typography -------------------------------------------------------------------------- */ .d1,.d2,.d3,.d4,h1,h2,h3{ font-family:var(--f-display); font-weight:400; letter-spacing:-.012em; line-height:1.06; text-wrap:balance } h1,.d1{ font-size:clamp(36px,5.2vw,74px) } h2,.d2{ font-size:clamp(30px,4.2vw,58px); line-height:1.1 } h3,.d3{ font-size:clamp(22px,2.1vw,31px); line-height:1.18; letter-spacing:-.006em } .d4{ font-size:clamp(19px,1.4vw,23px); line-height:1.26 } em,.it{ font-style:italic } .lead{ font-size:clamp(18.5px,1.25vw,22px); line-height:1.6; color:var(--t-2); font-weight:300; text-wrap:pretty } .body p + p{ margin-top:1.05em } .body{ color:var(--t-2); text-wrap:pretty } .measure{ max-width:62ch } .measure-s{ max-width:48ch } .num{ font-family:var(--f-garamond); font-weight:400; font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.01em } .eyebrow{ display:flex; align-items:center; gap:.62em; font-family:var(--f-label); font-size:clamp(13px,.85vw,15px); font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--copper-ink); line-height:1; } .eyebrow.is-center{ justify-content:center } .eyebrow .star{ width:.82em; height:.82em; flex:none; fill:var(--copper); } .band--ink .eyebrow,.band--moss .eyebrow,.foot .eyebrow{ color:var(--copper-cream) } /* Sections whose ground is a photograph take the ornament colour instead, which is what the flourishes on those grounds already use and reads more clearly over an image. */ .hero .eyebrow,.phero .eyebrow,.closer .eyebrow,.qband .eyebrow{ color:var(--ornament-dk) } .phero .eyebrow,.hero .eyebrow{ text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.5) } .band--ink .eyebrow .star,.band--moss .eyebrow .star{ fill:var(--copper-cream) } .hero .eyebrow .star,.phero .eyebrow .star,.closer .eyebrow .star,.qband .eyebrow .star{ fill:var(--ornament-dk) } /* --- 3. Layout ------------------------------------------------------------------------------ */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) } .wrap--n{ max-width:1080px } .wrap--t{ max-width:800px } main{ display:block } .band{ padding-block:var(--sec); position:relative } .band--cream{ background:var(--paper); color:var(--t-1) } .band--paper-hi{ background:var(--paper-hi); color:var(--t-1) } .band--stone{ background:var(--stone); color:var(--t-1) } .band--ink{ background:var(--ink); color:var(--c-1) } .band--moss{ background:var(--moss); color:var(--c-1) } .band--ink .body,.band--moss .body,.band--ink .lead,.band--moss .lead{ color:var(--c-2) } .band--tight{ padding-block:var(--sec-s) } .ornrule{ display:flex; align-items:center; gap:14px; color:var(--sage) } .ornrule span{ flex:1; height:1px; background:currentColor; opacity:.42 } .ornrule i{ width:5px; height:5px; background:currentColor; transform:rotate(45deg); flex:none } /* Ornaments are masked so a single file serves both grounds. */ .flr{ display:block; width:clamp(72px,7.4vw,96px); aspect-ratio:89/43; background:var(--sage); -webkit-mask:url('/assets/brand/flourish.svg') no-repeat center/contain; mask:url('/assets/brand/flourish.svg') no-repeat center/contain } .flr--lg{ width:clamp(220px,27vw,421px); aspect-ratio:421/87; -webkit-mask-image:url('/assets/brand/flourish-lg.svg'); mask-image:url('/assets/brand/flourish-lg.svg') } .band--ink .flr,.band--moss .flr,.hero .flr,.phero .flr,.qband .flr,.closer .flr,.drawer .flr{ background:var(--ornament-dk) } /* the hours card is a cream panel, so its ornament goes back to sage even though it sits inside the dark hero */ .hcard .flr,.tript__mid .flr{ background:var(--sage) } .band--ink .ornrule,.band--moss .ornrule{ color:var(--ornament-dk) } .vals__ic{ color:var(--ornament-dk) } /* --- 4. Motion base ------------------------------------------------------------------------- */ /* Per-word blur reveal: the signature move of the reference. Words are wrapped by motion.js. */ .rv [data-w]{ display:inline-block; opacity:0; filter:blur(6px); transform:translateY(.36em); } .rv.is-in [data-w]{ opacity:1; filter:blur(0); transform:none; transition:opacity .72s var(--e-soft), filter .72s var(--e-soft), transform .8s var(--e-out); transition-delay:calc(var(--wi) * 38ms); } /* will-change only while the word is actually in flight. Leaving it on every span permanently pins a compositor layer per word, which on a heading-heavy page costs more than it buys. */ .rv.is-animating [data-w]{ will-change:transform,opacity,filter } .rv.is-done [data-w]{ will-change:auto } /* No `will-change` here. It was promoting EVERY fade target to its own compositor layer for the whole session - dozens per page on a long one - to serve a transition that runs once. The transform/opacity pair composites perfectly well without the hint, and the layers cost real memory and real compositing work on every scroll frame. The words keep theirs, because it is added and removed around the animation (`.is-animating` / `.is-done`). */ [data-reveal="fade"]{ opacity:0; transform:translateY(16px) } [data-reveal="fade"].is-in{ opacity:1; transform:none; transition:opacity .8s var(--e-soft), transform .9s var(--e-out) } [data-reveal="rise"]{ opacity:0; transform:translateY(34px) } [data-reveal="rise"].is-in{ opacity:1; transform:none; transition:opacity .85s var(--e-soft), transform .95s var(--e-out) } [data-stagger] > *{ opacity:0; transform:translateY(24px) } [data-stagger].is-in > *{ opacity:1; transform:none; transition:opacity .7s var(--e-soft), transform .8s var(--e-out); transition-delay:calc(var(--i,0) * 90ms) } /* Image mask reveal: the picture scales down inside a clip that opens upward. */ .fig{ position:relative; overflow:hidden; margin:0; background:var(--stone) } .fig img{ width:100%; height:100%; object-fit:cover; display:block } .fig[data-reveal="mask"] img{ transform:scale(1.16); will-change:transform } .fig[data-reveal="mask"]{ clip-path:inset(0 0 100% 0) } .fig[data-reveal="mask"].is-in{ clip-path:inset(0 0 0 0); transition:clip-path 1.15s var(--e-arch) } .fig[data-reveal="mask"].is-in img{ transform:scale(1); transition:transform 1.5s var(--e-arch) } /* Arch masks. The dominant shape language of the reference. */ /* A true arch needs the vertical radius to equal HALF THE WIDTH. As a percentage of height that is (ratio/2), so --archv is written per figure by pic() from its own aspect ratio. */ .fig--arch{ border-radius:50% 50% 0 0 / var(--archv,42%) var(--archv,42%) 0 0 } .fig--arch-both{ border-radius:50% 50% 50% 50% / var(--archv,42%) var(--archv,42%) var(--archv,42%) var(--archv,42%) } /* The reference's asymmetric "leaf": a big radius top-left and bottom-right, square elsewhere. */ .fig--leaf{ border-radius:44% 0 44% 0 / 34% 0 34% 0 } .fig--circle{ border-radius:50% } .fig--bleed{ border-radius:0 } @media (prefers-reduced-motion:reduce){ .rv [data-w],[data-reveal],[data-stagger] > *{ opacity:1!important; filter:none!important; transform:none!important; transition:none!important } .fig[data-reveal="mask"]{ clip-path:none!important } .fig[data-reveal="mask"] img{ transform:none!important } *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important } } /* --- 5. Buttons ----------------------------------------------------------------------------- */ .btn{ --bg:transparent; --fg:var(--t-1); --bd:var(--t-1); position:relative; display:inline-block; text-decoration:none; isolation:isolate; font-family:var(--f-label); font-size:clamp(13.5px,.82vw,15.5px); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg); } .btn__in{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:.7em; min-height:64px; padding:0 clamp(30px,3.1vw,50px); border:1px solid var(--bd); background:var(--bg); transition:color .45s var(--e-soft), border-color .45s var(--e-soft), background-color .45s var(--e-soft); } /* The offset second frame that sits behind the button in the reference, revealed on hover. */ .btn::after{ content:''; position:absolute; inset:0; z-index:1; border:1px solid var(--bd); opacity:.42; transform:translate(5px,7px); transition:transform .5s var(--e-out), opacity .5s var(--e-soft); } .btn:hover::after,.btn:focus-visible::after{ transform:translate(0,0); opacity:0 } .btn:hover .btn__in{ background:var(--t-1); color:var(--paper); border-color:var(--t-1) } /* flex:none matters: without it a full-width button lets the icon box grow and the 15px pin renders at 100px. Every inline icon gets an explicit size, never an implicit one. */ .btn__i{ display:flex; flex:none; width:1.25em; height:1.25em } .btn__i svg{ width:100%; height:100% } /* Defensive: an SVG dropped straight into a button without the .btn__i wrapper has no intrinsic size and stretches to fill the flex line. This caught a 15px pin rendering at 138px. */ .btn__in > svg,.txtlnk > svg{ width:1.25em; height:1.25em; flex:none } .btn--solid .btn__in{ background:var(--t-1); color:var(--paper) } .btn--solid:hover .btn__in{ background:transparent; color:var(--t-1) } /* On dark grounds */ /* .owners is NOT in this list: it sits on paper-hi, and the cream-on-cream button it inherited here was all but invisible. Every other section named is genuinely dark. */ .band--ink .btn,.band--moss .btn,.phero .btn,.hero .btn,.foot .btn,.closer .btn,.qband .btn{ --fg:var(--c-1); --bd:rgba(245,242,232,.62) } /* On a photographic band a hairline outline disappears into the picture, so the primary action is filled and the secondary keeps a brighter border plus a faint scrim behind its label. */ .closer .btn:first-child .btn__in{ background:var(--paper); color:var(--ink); border-color:var(--paper) } .closer .btn:first-child:hover .btn__in{ background:transparent; color:var(--paper) } .closer .btn + .btn .btn__in{ background:rgba(12,14,9,.34); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px) } .closer .btn + .btn:hover .btn__in{ background:var(--paper); color:var(--ink); border-color:var(--paper) } .band--ink .btn:hover .btn__in,.band--moss .btn:hover .btn__in,.phero .btn:hover .btn__in,.hero .btn:hover .btn__in,.qband .btn:hover .btn__in{ background:var(--paper); color:var(--ink); border-color:var(--paper); } .btnrow{ display:flex; flex-wrap:wrap; gap:14px } .btnrow--c{ justify-content:center } h2.pill,.pill{ display:inline-grid; place-items:center; position:relative; font-family:var(--f-label); line-height:1.2; letter-spacing:.18em; padding:15px 40px; min-width:190px; font-family:var(--f-label); font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--sage); border-radius:50%; } .pill::after{ content:''; position:absolute; inset:0; border:1px solid var(--sage); border-radius:50%; opacity:.45; transform:translate(-4px,5px) } .txtlnk{ display:inline-flex; align-items:center; gap:.55em; text-decoration:none; font-family:var(--f-label); font-size:13.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding-bottom:5px; border-bottom:1px solid currentColor; color:var(--copper-ink); transition:gap .35s var(--e-out), color .35s var(--e-soft); } .txtlnk svg{ width:1.15em; height:1.15em } .txtlnk:hover{ gap:1em; color:var(--t-1) } .band--ink .txtlnk,.band--moss .txtlnk{ color:var(--copper-cream) } .band--ink .txtlnk:hover,.band--moss .txtlnk:hover{ color:var(--c-1) } /* --- 6. Topbar + header --------------------------------------------------------------------- */ .chrome{ position:relative; z-index:50; background:var(--paper) } .chrome--over{ position:absolute; top:0; left:0; right:0; background:transparent; color:var(--c-1) } .chrome--over .topbar,.chrome--over .site{ background:transparent; border-bottom-color:transparent } .chrome--over .topbar{ color:var(--c-1) } .chrome--over .site__rule-l,.chrome--over .site__rule-r{ opacity:.15 } .chrome--over .topbar a,.chrome--over .site__nav a,.chrome--over .site__logo,.chrome--over .drop__t{ text-shadow:0 1px 14px rgba(0,0,0,.55) } .topbar{ background:var(--paper); color:var(--t-2); position:relative; z-index:2 } .topbar__in{ padding:0 var(--gut); /* Full viewport width, matching the reference. The hairlines below share this measure, which is the thing that matters: when the two disagreed they visibly failed to line up. */ min-height:52px; display:flex; justify-content:space-between; align-items:center; gap:24px; font-family:var(--f-body); font-size:16.5px; font-weight:400; letter-spacing:.01em; } .topbar a{ display:inline-flex; align-items:center; gap:.55em; min-height:32px; padding-block:5px; text-decoration:none; color:inherit; transition:color .35s } .topbar a:hover{ color:var(--c-1) } .topbar svg{ width:17px; height:17px; opacity:1; flex:none; color:var(--copper-cream) } .chrome--over .topbar svg{ color:var(--ornament-dk) } .topbar__r{ text-align:right } /* Under about 520px the phone number and the full street address cannot share one line, and both wrapped to two. The street drops out below 560px and the address reads "Harrington NSW", still a map link; the full address is in the drawer, the footer and the visit band. */ @media (max-width:560px){ .topbar__st{ display:none } .topbar__in{ gap:14px; font-size:15.5px} .topbar a{ white-space:nowrap } } .site{ position:relative; z-index:1; background:var(--paper); border-bottom:1px solid var(--line-soft); transition:background .5s var(--e-soft), border-color .5s } .site__rule{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,28px); padding-inline:var(--gut); pointer-events:none; transform:translateY(-4px) } .site__rule-l,.site__rule-r{ flex:1; height:1px; background:currentColor; opacity:.15 } /* Derived from the logo rather than clamped independently, so the clearance either side of the mark is the same at every viewport instead of drifting as the two clamps cross over. */ .site__rule-gap{ flex:none; width:calc(var(--logo-w) + clamp(28px,3vw,52px)) } .site__in{ max-width:var(--wrap); margin-inline:auto; padding:var(--site-pt) var(--gut) clamp(16px,1.6vw,26px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(16px,2.2vw,38px); } .site__logo{ display:block; justify-self:center; text-decoration:none; color:inherit } .logo{ display:block; width:var(--logo-w); aspect-ratio:1494/666; background:currentColor; -webkit-mask:url('/assets/brand/logo.svg') no-repeat center/contain; mask:url('/assets/brand/logo.svg') no-repeat center/contain; } .site__nav ul{ display:flex; align-items:center; gap:clamp(18px,2.4vw,44px) } .site__nav--l ul{ justify-content:flex-end } .site__nav--r ul{ justify-content:flex-start } .site__nav a{ position:relative; text-decoration:none; white-space:nowrap; font-family:var(--f-label); font-size:15px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; padding:6px 0; color:inherit; opacity:.86; transition:opacity .35s var(--e-soft); } .site__nav a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e-out); } .site__nav a:hover{ opacity:1 } .site__nav a:hover::after{ transform:scaleX(1); transform-origin:left } /* The current page is marked by colour rather than a rule. copper-cream over the hero, and the light-ground copper once the bar sticks and turns to paper, where copper-cream is only 1.9:1. */ .site__nav a[aria-current="page"]{ opacity:1; color:var(--copper-ink) } .chrome--over .site__nav a[aria-current="page"]{ color:var(--copper-cream) } .chrome.is-stuck .site__nav a[aria-current="page"]{ color:var(--copper-ink) } /* Sticky state once the hero has passed. */ /* The stuck bar slides down and fades in rather than materialising. An animation rather than a transition, because `position` cannot be transitioned and the class is what switches it: an animation replays every time the class is added, which is exactly the moment to play it. */ @keyframes stickIn{ from{ transform:translateY(-100%); opacity:0 } to{ transform:none; opacity:1 } } /* The blur is 8px, not 14px with a saturate() on top. A backdrop-filter on a fixed, full-width element is re-sampled on every scroll frame, and the cost scales with the radius; at .95 opacity almost nothing shows through it anyway, so the larger radius was being paid for and not seen. `contain:paint` stops the blur having to consider anything outside the bar. */ .chrome.is-stuck{ position:fixed; top:0; left:0; right:0; background:rgba(248,245,236,.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--t-1); box-shadow:0 1px 30px rgba(20,23,15,.07); contain:paint; animation:stickIn .5s var(--e-out) both } .chrome.is-stuck .topbar{ display:none } .chrome.is-stuck .site{ background:transparent; border-bottom-color:var(--line-soft) } /* The stuck bar is its own composition, not a squashed copy of the header. The mark sits flush to the top and smaller; the menu is centred against it rather than sharing its baseline. */ .chrome.is-stuck .site__in{ padding-block:clamp(8px,.9vw,14px) } .chrome.is-stuck .site__rule{ display:none } .chrome.is-stuck .site__logo{ margin-top:0; align-self:start } .chrome.is-stuck .site__nav{ align-self:center } .chrome.is-stuck .logo{ width:clamp(118px,10.5vw,158px) } @media (prefers-reduced-motion:reduce){ .chrome.is-stuck{ animation:none } } .burger{ display:none; justify-self:end; width:46px; height:46px; background:none; border:0; padding:0; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:6px } .burger span{ display:block; width:24px; height:1px; background:currentColor; transition:transform .4s var(--e-out), opacity .3s } /* Three bars. With a 1px bar and a 6px gap the outer two sit 7px either side of the middle, so that is the distance each has to travel to meet in the centre as a cross. */ .burger[aria-expanded="true"] span:first-child{ transform:translateY(7px) rotate(45deg) } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.4) } .burger[aria-expanded="true"] span:last-child{ transform:translateY(-7px) rotate(-45deg) } /* The drawer covers the header, so the burger that opened it is not reachable to close it. This is the drawer's own close control, top right, over the safe-area inset. */ .drawer__x{ position:absolute; z-index:2; top:calc(env(safe-area-inset-top) + 18px); right:18px; width:48px; height:48px; display:grid; place-items:center; background:none; border:0; padding:0; cursor:pointer; color:var(--c-1); transition:color .3s; } /* No fade of its own. It used to hold opacity:0 for 180ms after the drawer opened, which is exactly when open() moves focus to it - so the first thing a keyboard user landed on was invisible, and the interaction suite's "focus moves into the drawer" check failed about two runs in three. The drawer itself fades, and this is inside it, so it still fades in with everything else. */ .drawer__x:hover{ color:var(--copper-cream) } .drawer__x span{ position:absolute; display:block; width:22px; height:1px; background:currentColor } .drawer__x span:first-child{ transform:rotate(45deg) } .drawer__x span:last-child{ transform:rotate(-45deg) } /* --- 7. Drawer ------------------------------------------------------------------------------ */ .drawer{ position:fixed; inset:0; z-index:70; background:var(--ink); color:var(--c-1); display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .5s var(--e-soft), visibility .5s } .drawer.is-open{ opacity:1; visibility:visible } .drawer[hidden]{ display:none } .drawer__in{ text-align:center; padding:calc(env(safe-area-inset-top) + 84px) 24px calc(env(safe-area-inset-bottom) + 32px); width:100%; max-height:100dvh; overflow-y:auto } .drawer__orn{ display:flex; justify-content:center; margin-bottom:26px; opacity:0; transition:opacity .5s .12s } .drawer.is-open .drawer__orn{ opacity:1 } .drawer nav ul{ display:grid; gap:2px } .drawer nav a{ display:block; padding:11px 0; text-decoration:none; font-family:var(--f-display); font-size:clamp(27px,7.4vw,40px); line-height:1.1; letter-spacing:-.01em; opacity:0; transform:translateY(20px); } .drawer.is-open nav a{ opacity:1; transform:none; transition:opacity .55s var(--e-soft) calc(var(--i) * 55ms + 90ms), transform .6s var(--e-out) calc(var(--i) * 55ms + 90ms) } .drawer nav a[aria-current="page"]{ color:var(--copper-cream) } .drawer__foot{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line-dk-soft); color:var(--c-3); font-size:15.5px; line-height:1.6; opacity:0; transition:opacity .5s .42s } .drawer.is-open .drawer__foot{ opacity:1 } .drawer__tel{ display:inline-block; font-family:var(--f-garamond); font-size:27px; color:var(--c-1); text-decoration:none; margin-bottom:12px } .drawer__hrs{ margin-top:9px; font-family:var(--f-label); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--copper-cream) } body.is-locked{ overflow:hidden } /* --- Pages dropdown ------------------------------------------------------------------------- */ .hasdrop{ position:relative } .drop__t{ display:inline-flex; align-items:center; gap:.5em; background:none; border:0; padding:6px 0; cursor:pointer; font-family:var(--f-label); font-size:15px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:inherit; opacity:.86; transition:opacity .35s } .drop__t:hover{ opacity:1 } .drop__t svg{ width:11px; height:8px; transition:transform .4s var(--e-out) } .drop__t[aria-expanded="true"] svg{ transform:rotate(180deg) } .drop{ position:absolute; top:calc(100% + 20px); left:-24px; z-index:60; min-width:min(680px,84vw); background:var(--paper-hi); color:var(--t-1); box-shadow:0 30px 80px rgba(20,23,15,.16); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .38s var(--e-soft), transform .42s var(--e-out), visibility .38s } .drop[hidden]{ display:none } .drop.is-open{ opacity:1; visibility:visible; transform:none } .drop__in{ display:grid; grid-template-columns:repeat(3,1fr); padding:clamp(22px,2.2vw,34px) } .drop__c{ padding-inline:clamp(16px,1.8vw,28px) } .drop__c + .drop__c{ border-left:1px solid var(--line) } .drop__h{ font-family:var(--f-body); font-size:16.5px; font-weight:300; color:var(--t-3); margin-bottom:16px } .drop__c ul{ display:grid; gap:13px } .drop__c a{ display:block; text-decoration:none; font-family:var(--f-label); font-size:15px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; transition:color .3s } .drop__c a:hover,.drop__c a[aria-current="page"]{ color:var(--copper-ink) } /* --- 8. Home hero --------------------------------------------------------------------------- */ .hero{ position:relative; min-height:clamp(600px,100svh,1000px); display:flex; align-items:flex-end; color:var(--c-1); background:var(--ink); overflow:hidden } .hero__bg{ position:absolute; inset:0 } .hero__bg .fig,.hero__bg img{ width:100%; height:100%; border-radius:0 } /* A slow push in on the hero photograph. It runs once and holds, on the img rather than on .hero__bg, because the parallax writes a transform to that element on every scroll frame and the two would fight. transform only, so it composites and costs no layout. */ @keyframes heroPush{ from{ transform:scale(1) } to{ transform:scale(1.1) } } .hero__bg img,.phero__bg img{ transform-origin:center; animation:heroPush 22s var(--e-soft) forwards } @media (prefers-reduced-motion:reduce){ .hero__bg img,.phero__bg img{ animation:none } } .hero__bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(100deg, rgba(12,14,9,.72) 0%, rgba(12,14,9,.46) 34%, rgba(12,14,9,.06) 62%, rgba(12,14,9,0) 100%), linear-gradient(180deg, rgba(12,14,9,.58) 0%, rgba(12,14,9,.14) 30%, rgba(12,14,9,.24) 60%, rgba(12,14,9,.72) 100%); } .hero__bg img{ object-position:68% 62% } .hero__in{ position:relative; z-index:3; width:100%; max-width:var(--wrap); margin-inline:auto; padding:clamp(190px,17vw,240px) var(--gut) clamp(56px,7vw,104px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,4vw,72px); align-items:end } .hero .eyebrow{ margin-bottom:clamp(18px,2vw,30px) } /* No measure here: the headline's own
s set its shape and the grid column is the bound. A ch cap was cut to the old two-line headline; against this copy it computed to 616px inside an 806px column and broke three lines into five, which pushed the buttons past the fold. */ .hero__t{ max-width:none; text-shadow:0 1px 2px rgba(0,0,0,.34), 0 2px 26px rgba(0,0,0,.4), 0 0 74px rgba(0,0,0,.28) } .hero__i{ margin-top:clamp(18px,1.8vw,26px); max-width:46ch; color:var(--c-1); font-size:clamp(18px,1.15vw,21px); text-shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 22px rgba(0,0,0,.45) } .hero__cta{ margin-top:clamp(26px,3vw,40px) } .hero__scroll{ position:absolute; left:clamp(20px,5vw,72px); bottom:clamp(18px,2.4vw,34px); transform:none; z-index:3; display:grid; justify-items:center; gap:9px; font-family:var(--f-label); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,242,232,.7) } .hero__scroll i{ display:block; width:1px; height:38px; background:linear-gradient(var(--copper-cream), transparent); animation:sdown 2.4s var(--e-soft) infinite } @keyframes sdown{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top } 46%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } } /* The cream arch card that overlaps the hero. */ .hcard{ position:relative; z-index:4; width:min(352px,32vw); background:var(--paper-hi); color:var(--t-1); border-radius:50% 50% 0 0 / 37% 37% 0 0; padding:clamp(34px,3vw,50px) clamp(26px,2.4vw,40px) clamp(30px,2.6vw,44px); text-align:center; box-shadow:0 30px 90px rgba(10,12,7,.34); align-self:end; margin-bottom:calc(clamp(56px,7vw,104px) * -1); } .hcard__orn{ display:flex; justify-content:center; margin-bottom:20px } .hcard__tel{ margin-top:2px } /* These two labels carry real information - the opening hours and the phone number that follows them - so they are set heavier and larger than a decorative eyebrow, and in the darker body grey rather than the tertiary one. */ .hcard__h{ font-family:var(--f-label); font-size:14.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--t-2) } .hcard dl{ margin-top:18px; display:grid; gap:9px; font-size:16px} .hcard dl > div{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 16px; align-items:baseline } .hcard dt{ white-space:nowrap } .hcard dt{ color:var(--t-1); font-weight:500 } .hcard dd{ color:var(--t-1); white-space:nowrap } .hcard__sep{ margin:22px 0 18px } .hcard__tel{ display:block; font-family:var(--f-garamond); font-size:clamp(30px,2.6vw,40px); text-decoration:none; letter-spacing:-.01em; transition:color .35s } .hcard__tel:hover{ color:var(--copper-ink) } /* --- 9. Page hero (inner pages) ------------------------------------------------------------- */ .phero{ position:relative; min-height:clamp(400px,62svh,660px); display:grid; place-items:center; text-align:center; color:var(--c-1); background:var(--ink); overflow:hidden; padding:clamp(140px,16vw,210px) var(--gut) clamp(64px,7vw,96px) } .phero__bg{ position:absolute; inset:0 } .phero__bg .fig,.phero__bg img{ width:100%; height:100%; border-radius:0 } .phero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,14,9,.66) 0%, rgba(12,14,9,.30) 44%, rgba(12,14,9,.62) 100%) } .phero__in{ position:relative; z-index:3; max-width:900px; display:grid; gap:clamp(14px,1.4vw,20px); justify-items:center } .phero__t{ text-shadow:0 1px 2px rgba(0,0,0,.34), 0 2px 26px rgba(0,0,0,.42), 0 0 74px rgba(0,0,0,.3) } .phero__i{ max-width:56ch; color:var(--c-1); font-size:clamp(17.5px,1.1vw,20.5px); text-shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 20px rgba(0,0,0,.45) } /* --- 10. Section header --------------------------------------------------------------------- */ .sech{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(24px,4vw,80px); align-items:end; margin-bottom:clamp(40px,4.6vw,76px) } .sech.is-center{ grid-template-columns:1fr; justify-items:center; text-align:center; max-width:840px; margin-inline:auto } .sech__l{ display:grid; gap:clamp(14px,1.4vw,20px) } .sech.is-center .sech__l{ justify-items:center } .sech__t{ max-width:19ch } .sech.is-center .sech__t{ max-width:24ch } .sech__r{ display:grid; gap:22px; align-content:end; justify-items:start } .sech.is-center .sech__r{ justify-items:center } .sech__i{ color:var(--t-2); font-size:clamp(17px,1.05vw,19px); max-width:48ch } .band--ink .sech__i,.band--moss .sech__i{ color:var(--c-2) } /* --- 11. Editorial split -------------------------------------------------------------------- */ .split{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(22px,3vw,54px); align-items:center } .split__txt{ grid-column:span 5; display:grid; gap:clamp(16px,1.6vw,24px) } .split__med{ grid-column:7 / span 6 } .split--flip .split__txt{ grid-column:8 / span 5; order:2 } .split--flip .split__med{ grid-column:1 / span 6; order:1 } .split__med .fig{ aspect-ratio:var(--ar,4/5) } /* Offset trio, as on the reference About page. */ .trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.7vw,26px); align-items:start } /* pic() writes --archv inline from the IMAGE's aspect ratio, which is the right answer until the box is re-sized here. These three are, and each to a different ratio, so the left and right arch of a trio drew two different curves: one taller than a semicircle, one shallower. Each rule now restates --archv as half its own width expressed against its own height - (ratio/2) - so every arch is a true semicircle and the outer two match. It has to out-rank an inline style, hence !important. Change an aspect-ratio here and its --archv has to change with it. */ .trio .fig:nth-child(1){ aspect-ratio:3/4; --archv:37.5%!important; margin-top:clamp(28px,4vw,64px) } .trio .fig:nth-child(2){ aspect-ratio:3/4.4; --archv:34.09%!important } .trio .fig:nth-child(3){ aspect-ratio:3/3.4; --archv:44.12%!important; margin-top:clamp(48px,7vw,116px) } /* Stat pair beside a portrait, as on the reference home page. */ .stats{ display:grid; gap:clamp(30px,3.6vw,56px); text-align:center } .stat__n{ font-family:var(--f-garamond); font-size:clamp(52px,6vw,88px); line-height:1; letter-spacing:-.02em } .stat__l{ margin-top:10px; font-family:var(--f-label); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--t-3); line-height:1.45 } .band--ink .stat__l,.band--moss .stat__l{ color:var(--c-3) } /* Full-bleed quote over the course panorama. The scrim is kept light enough that the photograph still reads as a photograph; the text carries its own shadow instead of relying on a heavy wash. */ .qband{ position:relative; display:grid; place-items:center; min-height:clamp(420px,58svh,640px); background:var(--ink); overflow:hidden; padding:clamp(60px,8vw,120px) var(--gut) } .qband > .fig{ position:absolute; inset:0; border-radius:0 } .qband > .fig img{ width:100%; height:100%; object-fit:cover; object-position:center 72% } /* The centre of this scrim was .16, which is exactly where the heading sits, so the line measured 2.72:1 over the brighter parts of the panorama - under the 3:1 large-text minimum. Raised at the centre and kept as a vignette so the photograph still reads. */ .qband__scrim{ position:absolute; inset:0; background:radial-gradient(120% 86% at 50% 52%, rgba(12,14,9,.44) 0%, rgba(12,14,9,.58) 66%, rgba(12,14,9,.72) 100%) } .qband__in{ position:relative; z-index:2; display:grid; gap:clamp(16px,1.8vw,26px); justify-items:center; text-align:center; max-width:min(940px,84vw) } .qband__orn{ color:var(--copper-cream) } .qband__t{ color:var(--c-1); text-shadow:0 1px 2px rgba(0,0,0,.42), 0 2px 30px rgba(0,0,0,.5), 0 0 80px rgba(0,0,0,.35) } .qband__by{ font-size:15.5px; color:var(--c-2); text-shadow:0 1px 12px rgba(0,0,0,.6) } /* --- 12. Three-up value props (moss band) --------------------------------------------------- */ .vals{ display:grid; grid-template-columns:repeat(3,1fr) } .vals__i{ padding:0 clamp(18px,2.6vw,44px); text-align:center; display:grid; gap:14px; justify-items:center } .vals__i + .vals__i{ border-left:1px solid var(--line-dk-soft) } .vals__ic{ width:clamp(72px,6.2vw,92px); color:var(--ornament-dk); opacity:.95 } .vals__ic svg{ width:100%; height:auto } .vals h3{ font-size:clamp(21px,1.7vw,27px) } .vals p{ color:var(--c-2); font-size:16.5px; line-height:1.62; max-width:34ch } /* --- 13. Feature grid ----------------------------------------------------------------------- */ .feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line) } .feats__i{ background:var(--paper-hi); padding:clamp(28px,2.8vw,44px); display:grid; gap:11px; align-content:start; transition:background .45s var(--e-soft) } .feats__ic{ display:block; width:clamp(60px,4.8vw,74px); color:var(--sage); margin-bottom:12px } .ill{ width:100%; height:auto; display:block; overflow:visible } .band--ink .feats__ic,.band--moss .feats__ic{ color:var(--ornament-dk) } .feats__i:hover{ background:var(--paper) } .feats__t{ font-family:var(--f-display); font-size:clamp(18px,1.35vw,22px); line-height:1.2 } .feats__d{ font-size:16px; line-height:1.6; color:var(--t-2) } /* Function-type cards reveal a photograph of that kind of event on hover, Danielle 27 Aug 2026, so a visitor can picture their own. The card keeps its text in the DOM underneath: the reveal is a sibling layer, never a replacement, so nothing is lost to a screen reader or with JS off. `:focus-within` and `:focus-visible` give the same reveal to a keyboard, and the card is focusable, because hover alone strands every touch and keyboard user. */ /* The hiring band on the home page and About. Media is deliberately narrow: it is a signpost, not a section about the job. */ .hire{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(26px,3.6vw,64px); align-items:center } .hire__t{ display:grid; gap:clamp(14px,1.5vw,20px); justify-items:start } .hire__d{ font-size:clamp(17px,1.15vw,19px); line-height:1.66; max-width:52ch } .band--moss .hire__d,.band--ink .hire__d{ color:var(--c-2) } .band--moss .hire__d strong,.band--ink .hire__d strong{ color:var(--c-1) } .hire__m{ width:100% } /* The apron mark above the eyebrow, Danielle 27 Aug 2026, so the hiring band announces itself before anybody reads the heading. Sized between the small feature icons and the big value-prop ones, and on the ornament colour because the band is always moss or ink. */ .hire__ic{ display:block; width:clamp(66px,5.4vw,86px); color:var(--ornament-dk); opacity:.95; margin-bottom:-2px } @media (max-width:860px){ .hire{ grid-template-columns:1fr } .hire__m{ max-width:340px; margin-inline:auto } } /* --------------------------------------------------------------------------------------------- The hiring ticker under the home hero. One link the width of the page, with the three phrases repeated behind it. Every gap is carried by the diamond's own margins rather than by `gap`, because the track travels exactly -50% and with `gap` the two halves differ by one gap width, which shows as a tick once a loop. The words are aria-hidden; the link's accessible name is the single sentence in `.u-sr`. --------------------------------------------------------------------------------------------- */ .tick{ display:block; position:relative; background:var(--moss); color:var(--c-1); text-decoration:none; overflow:hidden; border-bottom:1px solid var(--line-dk-soft) } .tick__vp{ display:block; overflow:hidden; padding-block:clamp(13px,1.5vw,19px) } .tick__track{ display:flex; align-items:center; width:max-content; animation:tickrun 62s linear infinite; will-change:transform } .tick__w{ flex:none; font-family:var(--f-label); font-size:clamp(12px,.82vw,14px); font-weight:600; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; color:var(--c-1) } .tick__d{ flex:none; width:7px; height:7px; background:var(--copper-cream); transform:rotate(45deg); margin-inline:clamp(20px,2.4vw,38px) } .tick:hover .tick__track{ animation-play-state:paused } .tick:hover .tick__d{ background:#E6C79A } .tick:focus-visible{ outline:2px solid var(--copper-cream); outline-offset:-4px } @keyframes tickrun{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } } @media (prefers-reduced-motion:reduce){ .tick__track{ animation:none } } /* --------------------------------------------------------------------------------------------- Work with us. The café struggles to hire, so this page has to do the persuading: the two hard requirements are given a dark band of their own so nobody can miss them, and the reasons to work here are numbered so they read as an argument rather than a list of adjectives. --------------------------------------------------------------------------------------------- */ .ess{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,40px) } .ess__i{ border:1px solid var(--line-dk); border-left:3px solid var(--copper-cream); padding:clamp(22px,2.4vw,34px) clamp(22px,2.6vw,38px); border-radius:2px } .ess__t{ font-family:var(--f-display); font-size:clamp(21px,1.8vw,30px); line-height:1.2; color:var(--c-1); margin-bottom:.5em } .ess__d{ font-size:17px; line-height:1.62; color:var(--c-2); max-width:44ch } @media (max-width:760px){ .ess{ grid-template-columns:1fr } } .whyl{ display:grid; gap:clamp(20px,2.2vw,34px); max-width:74ch; margin-inline:auto } .whyl__i{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,1.8vw,28px); align-items:start; padding-bottom:clamp(18px,2vw,30px); border-bottom:1px solid var(--line) } .whyl__i:last-child{ border-bottom:0; padding-bottom:0 } .whyl__n{ font-family:var(--f-label); font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--copper-ink); padding-top:.5em } .whyl__t{ font-family:var(--f-display); font-size:clamp(20px,1.6vw,27px); line-height:1.22; margin-bottom:.42em } .whyl__d{ font-size:17px; line-height:1.66; color:var(--t-2) } .askd{ font-family:var(--f-garamond); font-size:clamp(20px,1.7vw,27px); line-height:1.55; color:var(--c-1); max-width:60ch; margin-top:clamp(14px,1.6vw,22px) } .applyg{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(24px,3vw,52px); margin-top:clamp(24px,2.6vw,40px); align-items:start } .applyg__a{ display:grid; gap:clamp(16px,1.8vw,24px) } @media (max-width:900px){ .applyg{ grid-template-columns:1fr } } /* The file input. Styled as a bordered drop-target rather than left as the browser default, which is the ugliest control on any form and reads as unfinished on a page this considered. */ .f--file input[type=file]{ width:100%; font:inherit; font-size:15px; color:var(--t-2); border:1px dashed var(--line); border-radius:2px; padding:12px 14px; background:var(--paper-hi); cursor:pointer } .f--file input[type=file]::file-selector-button{ font:inherit; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-right:14px; padding:8px 14px; border:1px solid var(--line); border-radius:2px; background:transparent; color:var(--t-1); cursor:pointer; transition:background .3s, border-color .3s } .f--file input[type=file]:hover::file-selector-button{ background:var(--stone); border-color:var(--t-3) } .f__hint{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--t-3) } .applyc{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,32px); margin-top:clamp(24px,2.6vw,40px) } .applyc__i{ background:var(--paper-hi); border:1px solid var(--line); border-radius:2px; padding:clamp(22px,2.3vw,34px); display:grid; gap:12px; align-content:start } .applyc__t{ font-family:var(--f-display); font-size:clamp(19px,1.5vw,25px); line-height:1.2 } .applyc__d{ font-size:16.5px; line-height:1.6; color:var(--t-2) } .applyc__i .btn{ justify-self:start; margin-top:4px } @media (max-width:900px){ .applyc{ grid-template-columns:1fr } } /* Opening hours block. Two columns: the times, and the two reasons the café may be shut when the times say open. The caveats are given real weight rather than being small print, because a visitor who drives out on a wet Wednesday or a wedding day finds the doors closed. */ .hrs{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(26px,3.4vw,60px); align-items:start } .hrs__t{ display:grid; gap:0; margin:0; border-top:1px solid var(--line) } .hrs__t > div{ display:grid; grid-template-columns:minmax(9.5em,auto) 1fr; gap:clamp(12px,1.6vw,26px); padding:clamp(13px,1.3vw,18px) 0; border-bottom:1px solid var(--line); align-items:baseline } .hrs__t dt{ font-family:var(--f-label); font-size:12.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--t-3) } .hrs__t dd{ margin:0; font-size:17px; line-height:1.5; color:var(--t-1) } .hrs__n{ display:grid; gap:clamp(16px,1.8vw,24px) } .hrs__c{ border-left:3px solid var(--copper); padding-left:clamp(15px,1.5vw,22px) } .hrs__ct{ font-family:var(--f-display); font-size:clamp(18px,1.35vw,22px); line-height:1.25; margin-bottom:.42em } .hrs__cd{ font-size:16.5px; line-height:1.62; color:var(--t-2); max-width:52ch } @media (max-width:860px){ .hrs{ grid-template-columns:1fr } } @media (max-width:520px){ .hrs__t > div{ grid-template-columns:1fr; gap:3px } } /* Organiser contacts on an event. Ladies with a Cause is run by volunteers rather than the café, so the people to ring are not the café's own line. Names are as the flyer prints them. */ .evtc{ border:1px solid var(--line); border-left:3px solid var(--copper); background:var(--paper-hi); padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px); border-radius:2px; max-width:34em } .evtc__h{ font-family:var(--f-label); font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 .7em } .evtc__l{ list-style:none; margin:0; padding:0; display:grid; gap:.45em } .evtc__l li{ display:flex; gap:.9em; align-items:baseline; flex-wrap:wrap; font-size:17px } .evtc__n{ min-width:5.5em; color:var(--t-2) } .evtc__l a{ color:var(--t-1); text-decoration:none; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; transition:border-color .3s } .evtc__l a:hover{ border-color:var(--copper) } /* Partner credit under an event. A third party's registered mark, so it is shown at its own proportions on a quiet ground and never tinted, boxed or locked up with our wordmark. The label above it does the work of saying what the relationship actually is. */ .evtp{ display:grid; gap:.75em; justify-items:start; margin-top:clamp(20px,2vw,28px) } .evtp__h{ font-family:var(--f-label); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--t-3); margin:0 } .evtp__i{ width:clamp(184px,17vw,228px); height:auto; display:block } .feats__i--rev{ position:relative; overflow:hidden; isolation:isolate } .freveal{ position:absolute; inset:0; z-index:2; opacity:0; visibility:hidden; transition:opacity .5s var(--e-soft), visibility 0s linear .5s } .feats__i--rev:hover .freveal, .feats__i--rev:focus-visible .freveal, .feats__i--rev:focus-within .freveal{ opacity:1; visibility:visible; transition-delay:0s, 0s } .freveal .freveal__img{ position:absolute; inset:0; width:100%; height:100%; border-radius:0 } .freveal .freveal__img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 3.2s var(--e-soft) } .feats__i--rev:hover .freveal .freveal__img img, .feats__i--rev:focus-within .freveal .freveal__img img{ transform:scale(1) } /* A scrim so the label stays legible over any part of any photograph. */ .freveal__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,23,15,.78) 0%, rgba(20,23,15,.34) 42%, rgba(20,23,15,.12) 100%) } .freveal__t{ position:absolute; left:clamp(20px,2vw,30px); right:clamp(20px,2vw,30px); bottom:clamp(18px,1.8vw,26px); color:var(--c-1); font-family:var(--f-display); font-size:clamp(19px,1.5vw,25px); line-height:1.15 } @media (prefers-reduced-motion:reduce){ .freveal,.freveal .freveal__img img{ transition-duration:.01ms } .freveal .freveal__img img{ transform:none } } /* Touch has no hover, so the photograph cannot be a reveal. Danielle's instruction 27 Aug 2026 is that it must still be SHOWN, so on touch the same layer stops being an overlay and becomes a full-bleed picture at the top of the card, above the icon and the text. Nothing is hidden and nothing is duplicated: the scrim and the repeated title are dropped, because the card's own heading is right underneath. */ @media (hover:none){ .feats__i--rev{ padding-top:0 } .freveal{ position:static; inset:auto; opacity:1; visibility:visible; order:-1; margin:0 calc(-1 * clamp(28px,2.8vw,44px)) clamp(12px,1.4vw,18px); transition:none } .freveal .freveal__img{ position:static; width:100%; height:auto; aspect-ratio:3/2 } .freveal .freveal__img img{ transform:none; transition:none } .freveal__scrim,.freveal__t{ display:none } } /* The cards stay white on the stone band too - Danielle, 25 August 2026. They used to match the band, which is why the grid read as one flat field rather than as nine cards. */ .band--stone .feats__i{ background:var(--paper-hi) } .band--stone .feats__i:hover{ background:var(--paper) } /* Plain tick list */ .ticks{ display:grid; gap:12px } .ticks li{ display:flex; gap:.8em; align-items:flex-start; font-size:17px; line-height:1.55 } .ticks li::before{ content:''; flex:none; width:7px; height:7px; margin-top:.58em; background:var(--sage); transform:rotate(45deg) } .ticks--2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px clamp(20px,3vw,48px) } /* --- 14. Menu ------------------------------------------------------------------------------- */ .mzone{ position:relative } /* the central hairline with its ornamental finial */ .mzone__cols{ position:relative } .mzone__rule{ position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--line); transform:translateX(-50%) } .mzone__rule::before{ content:''; position:absolute; top:-26px; left:50%; width:66px; aspect-ratio:89/43; transform:translateX(-50%); background:var(--sage); -webkit-mask:url('/assets/brand/flourish.svg') no-repeat center/contain; mask:url('/assets/brand/flourish.svg') no-repeat center/contain } .mcols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,9.5vw,190px) } /* Menu rows. One block of the menu against one photograph, the photograph stretched to the block's height so the pair reads as a unit. The arch is derived from the COLUMN WIDTH for the same reason the contact panel's is: a percentage of a stretched element's height is not a shape, it is a by-product of how much menu happens to sit opposite it. */ .mrows{ --mgap:clamp(40px,9.5vw,190px); --mcol:calc((min(var(--wrap), 100vw) - 2 * var(--gut) - var(--mgap)) / 2); --march:calc(var(--mcol) * .34); display:grid; gap:clamp(46px,5.5vw,86px); } .mrow{ display:grid; grid-template-columns:1fr 1fr; gap:var(--mgap); align-items:stretch } .mrow__t > .mgroup:last-child{ margin-bottom:0 } .mrow__m{ min-height:100%; display:grid } .mrow__m .mfig{ height:100%; min-height:420px; border-radius:50% 50% 0 0 / var(--march) var(--march) 0 0 } .mrow__m .mfig img{ width:100%; height:100%; object-fit:cover } .mgroup{ display:grid; gap:clamp(20px,2vw,30px); margin-bottom:clamp(46px,5.5vw,86px) } .mgroup__h{ display:grid; gap:20px; justify-items:start } .mgroup__hrs{ font-family:var(--f-label); font-size:12.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--t-3) } .mlist{ display:grid; gap:clamp(18px,1.7vw,26px) } .mitem{ display:grid; grid-template-columns:1fr auto; gap:4px clamp(14px,2vw,28px); align-items:baseline } /* Weight is set here rather than left to the tag: the reset covers h1-h3 and the Sides items are h4, which the browser draws bold. */ .mitem__n{ font-family:var(--f-display); font-weight:400; font-size:clamp(21px,1.75vw,28px); line-height:1.22; letter-spacing:-.004em } .mitem__p{ font-family:var(--f-body); font-weight:400; font-size:clamp(17.5px,1.25vw,20.5px); color:var(--t-1); white-space:nowrap; font-variant-numeric:lining-nums tabular-nums } .mitem__p::before{ content:'$'; font-size:.72em; vertical-align:.14em; margin-right:.06em; color:var(--t-3) } .mitem__d{ grid-column:1 / -1; font-size:16px; line-height:1.55; color:var(--t-2); max-width:44ch } /* Menu items on a dark ground - the all-day list sits on moss. Without these the descriptions keep their light-ground grey and land at 1.15:1. */ .band--moss .mitem__n,.band--ink .mitem__n,.band--moss .mitem__p,.band--ink .mitem__p{ color:var(--c-1) } .band--moss .mitem__d,.band--ink .mitem__d{ color:var(--c-2) } .band--moss .mitem__p::before,.band--ink .mitem__p::before{ color:var(--c-3) } .mitem__v{ grid-column:1 / -1; display:grid; grid-template-columns:1fr auto; gap:clamp(14px,2vw,28px); align-items:baseline; margin-top:2px; padding-left:1.1em; border-left:1px solid var(--line) } .mitem__vn{ font-size:16.5px; color:var(--t-2) } /* A sub-heading inside a group: Sides under Breakfast. A tracked label rather than the display face, so it sits clearly above its two items instead of competing with them, and clearly below the section pill rather than rivalling it. */ .msub{ display:grid; gap:clamp(16px,1.6vw,24px) } .msub__h{ font-family:var(--f-label); font-size:13.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--t-2) } .mnote{ font-size:16px; color:var(--t-2); line-height:1.6; padding-top:4px; border-top:1px solid var(--line) } .mitem--nop .mitem__n{ grid-column:1 / -1 } .mzone__cta{ display:flex; justify-content:center; margin-top:clamp(40px,4.6vw,76px) } .mnotes{ display:grid; gap:11px; padding:clamp(24px,2.6vw,38px); background:var(--paper-hi); border:1px solid var(--line) } .mnotes li{ display:flex; gap:.8em; font-size:16.5px; line-height:1.6; color:var(--t-2) } .mnotes li::before{ content:''; flex:none; width:6px; height:6px; margin-top:.62em; background:var(--sage); transform:rotate(45deg) } .mstamp{ font-family:var(--f-label); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--t-3) } /* --- 15. Reviews ---------------------------------------------------------------------------- */ /* The reference frames the quote inside a centre column marked by two full-height hairlines, with the arrows outside it. */ .rband{ position:relative; overflow:hidden } .rband__col{ position:absolute; top:0; bottom:0; width:1px; background:var(--line-dk-soft); z-index:1 } .rband__col--l{ left:20% } .rband__col--r{ right:20% } .rband > .wrap{ position:relative; z-index:2 } .rslide{ position:relative; text-align:center; display:grid; justify-items:center; gap:clamp(20px,2.4vw,34px); padding-inline:clamp(40px,7vw,110px) } .rarrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:52px; height:52px; display:grid; place-items:center; background:none; border:0; cursor:pointer; color:var(--c-2); transition:color .35s, transform .4s var(--e-out) } .rarrow svg{ width:26px; height:26px } .rarrow:hover{ color:var(--c-1) } .rarrow--p{ left:calc(-1 * clamp(20px,6vw,96px)) } .rarrow--n{ right:calc(-1 * clamp(20px,6vw,96px)) } .rarrow--p:hover{ transform:translate(-4px,-50%) } .rarrow--n:hover{ transform:translate(4px,-50%) } .rslide__orn{ margin-bottom:clamp(10px,1.4vw,22px) } .rq{ display:none } .rq.is-on{ display:grid; gap:clamp(20px,2.2vw,30px); justify-items:center; animation:rqin .7s var(--e-soft) } @keyframes rqin{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } } .rq__t{ font-family:var(--f-display); font-style:italic; font-size:clamp(22px,2.6vw,37px); line-height:1.38; max-width:34ch; letter-spacing:-.008em } .rq__by{ display:grid; gap:5px } .rq__n{ font-family:var(--f-label); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase } .rq__m{ font-size:15px; color:var(--c-3) } .rnav{ display:flex; gap:10px; justify-content:center; margin-top:6px } .rnav button{ width:44px; height:44px; display:grid; place-items:center; background:none; border:1px solid var(--line-dk); cursor:pointer; transition:background .35s, border-color .35s } .rnav button:hover{ background:rgba(245,242,232,.09); border-color:var(--c-2) } .rnav svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.3 } .rdots{ display:flex; gap:7px; justify-content:center; margin-top:4px } /* The visible dot is 7px; the hit area around it is 26px, so it is actually tappable. */ .rdots{ gap:0 } .rdots button{ width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center } .rdots button::before{ content:''; width:7px; height:7px; border-radius:50%; background:rgba(245,242,232,.3); transition:background .35s, transform .35s } .rdots button[aria-current="true"]::before{ background:var(--copper-cream); transform:scale(1.34) } .rsrc{ font-size:13.5px; color:var(--c-3); max-width:52ch; margin-top:4px } /* Static review cards (used on Functions) */ .rcards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,32px) } .rcard{ background:var(--paper-hi); border:1px solid var(--line); padding:clamp(26px,2.6vw,40px); display:grid; gap:16px; align-content:start } .rcard blockquote{ font-family:var(--f-display); font-style:italic; font-size:clamp(18.5px,1.4vw,22.5px); line-height:1.48 } .rcard figcaption{ font-family:var(--f-label); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--t-3) } /* --- 16. Owners (the chef-section adaptation) ----------------------------------------------- */ .owners{ position:relative; background:var(--paper-hi); text-align:center; overflow:hidden; padding-block:clamp(96px,11vw,180px) clamp(60px,7vw,110px) } /* The backdrop belongs to the portrait, not to the section: it is bottom-aligned with the pair and drawn at its own aspect, so it never scales up to cover the band the way `cover` did. */ /* Widened from 1196px on 27 August 2026, Danielle's note that too little of the kitchen shows. 1196 was the point where the 2396-wide asset draws 1:1 at DPR 2, which is the right rule for a SUBJECT and too strict for a backdrop that is mostly white and heavily faded before anyone sees it. At 1560 it is still a downscale on every 1x display and a 1.3x draw on a retina one, which is invisible at this contrast. */ .owners__bg{ position:absolute; left:50%; bottom:0; width:min(1560px,100vw); translate:-50% 0; z-index:0; opacity:1; pointer-events:none } .owners__bg img{ display:block; width:100%; height:auto } /* No fade at the top - the reference runs the kitchen full strength up there. Both fades were pulled back on 27 August 2026. The side fade ate 12% of the picture from each edge, which is where the ovens and the sink live, and the bottom fade was fully opaque by 84%, which erased the cooktop, the fryer and the benches - the detail that makes it read as a kitchen rather than a white smudge. The bottom fade still exists, and still has to: the portrait's own lower half is semi-transparent, so a kitchen at full strength down there shows straight through Ann and Elizabeth. It now starts lower and lands softer. */ .owners__bg::after{ content:''; position:absolute; inset:-1px; background: linear-gradient(90deg,var(--paper-hi) 0%, rgba(252,250,245,0) 4.5%, rgba(252,250,245,0) 95.5%, var(--paper-hi) 100%), linear-gradient(180deg, rgba(252,250,245,0) 0%, rgba(252,250,245,0) 60%, rgba(252,250,245,.55) 80%, rgba(252,250,245,.92) 93%, var(--paper-hi) 100%) } .owners__in{ position:relative; z-index:2; display:grid; justify-items:center; gap:clamp(16px,1.6vw,24px) } .owners__pair{ position:relative; display:flex; justify-content:center; align-items:flex-end; gap:clamp(6px,1.4vw,26px); width:100% } .owners__par{ position:relative; z-index:1; width:100%; display:flex; justify-content:center; will-change:transform } /* Opacity-only reveal here. The upward glide on .owners__par is the motion; a second translate on the wrapper would eat the gap between the portrait and the name beneath it. */ .owners__pair[data-reveal="fade"],.owners__pair[data-reveal="fade"].is-in{ transform:none } /* The pair portrait is a transparent cut-out, so it must never sit on the .fig placeholder tint, must scale by height rather than fill its box, and fades out at the foot into the band. */ .owners__pairimg{ background:transparent; width:min(660px,74vw); margin-inline:auto; overflow:visible } .owners__pairimg img{ width:100%; height:auto; object-fit:contain; -webkit-mask:linear-gradient(180deg,#000 78%,rgba(0,0,0,0) 99%); mask:linear-gradient(180deg,#000 78%,rgba(0,0,0,0) 99%) } .owners__p{ width:min(280px,34vw) } .owners__p .fig{ aspect-ratio:3/4; background:transparent } .owners__p .fig img{ object-fit:contain; object-position:bottom } .owners__n{ font-size:clamp(30px,4.4vw,60px) } .owners__r{ font-size:16.5px; color:var(--t-3) } /* Placeholder card shown while real owner photographs are outstanding. */ .pslot{ width:min(280px,34vw); aspect-ratio:3/4; display:grid; place-items:center; gap:10px; padding:22px; text-align:center; border:1px dashed var(--line); background:rgba(234,227,212,.4); color:var(--t-3) } .pslot__n{ font-family:var(--f-display); font-size:clamp(19px,1.8vw,26px); color:var(--t-2); font-style:normal } .pslot__m{ font-family:var(--f-label); font-size:12px; letter-spacing:.13em; text-transform:uppercase; line-height:1.5 } /* --- 17. Arch triptych (forms) -------------------------------------------------------------- */ /* Three equal columns, and a deep arch. The vertical radius was a percentage of each element's own HEIGHT, which is why the curve read as almost flat: the panel is far taller than it is wide, so 15% of its height was a fraction of the half-width an arch needs. It is now derived from the COLUMN WIDTH, which the grid's own maths gives us, so the curve keeps its shape whatever the content does to the height. .45 rather than .5 matches the reference, which is a semicircle flattened very slightly. */ .tript{ /* Wider than the --wrap text measure: this block is three photographs and a form, not a column of reading, and it breaks out symmetrically with a negative margin rather than escaping right. */ --tpad:clamp(16px,3vw,56px); --tw:min(1580px, calc(100vw - 2 * var(--tpad))); --tgap:clamp(12px,1.6vw,26px); --tcol:calc((var(--tw) - 2 * var(--tgap)) / 3); width:var(--tw); margin-inline:calc((100% - var(--tw)) / 2); --arch:calc(var(--tcol) * .45); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--tgap); align-items:stretch; overflow:hidden; } /* The side panels are transform-driven by motion.js. will-change stays on because the transform updates on every scroll frame while the section is on screen, not once. */ .tript__side{ will-change:transform, opacity } .tript__mid{ position:relative; z-index:2 } .tript__side .fig{ height:100%; min-height:460px; border-radius:50% 50% 0 0 / var(--arch) var(--arch) 0 0 } .tript__mid{ border:1px solid var(--line); border-radius:50% 50% 0 0 / var(--arch) var(--arch) 0 0; /* White rather than paper-hi, Danielle's instruction 26 August 2026: the card sat almost the same colour as the bands behind it, so the enquiry form did not read as a distinct object. */ background:#fff; /* The top padding has to clear the arch, or the ornament sits inside the curve. */ padding:calc(var(--arch) * .5 + 18px) clamp(24px,2.8vw,50px) clamp(30px,3vw,48px); display:grid; gap:clamp(18px,1.8vw,26px); align-content:start; text-align:center; } .tript__orn{ display:flex; justify-content:center } /* --- 18. Forms ------------------------------------------------------------------------------ */ .form{ display:grid; gap:clamp(16px,1.7vw,24px); text-align:left } .frow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,22px) } .f{ position:relative; display:grid } .f label{ font-family:var(--f-label); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--t-3); margin-bottom:8px } .f input,.f select,.f textarea{ width:100%; font:inherit; font-size:17px; color:var(--t-1); background:transparent; border:0; border-bottom:1px solid var(--line); padding:9px 0 11px; border-radius:0; -webkit-appearance:none; appearance:none; transition:border-color .4s var(--e-soft); } .f textarea{ min-height:104px; resize:vertical; line-height:1.6 } .f select{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236C7263' stroke-width='1.4'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 2px center; padding-right:24px; cursor:pointer } .f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-bottom-color:var(--t-1) } .f input::placeholder,.f textarea::placeholder{ color:var(--t-3); opacity:.75 } .f--hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden } .fnote{ font-size:14.5px; color:var(--t-3); line-height:1.55 } .fnote strong{ font-weight:400; color:var(--t-2) } .fmsg{ display:none; padding:15px 18px; font-size:16px; line-height:1.55; border:1px solid var(--line) } .fmsg.is-on{ display:block } .fmsg--ok{ background:rgba(152,152,91,.13); border-color:rgba(152,152,91,.45) } .fmsg--err{ background:rgba(176,74,50,.08); border-color:rgba(176,74,50,.4); color:#8C3A22 } .form button[type=submit]{ justify-self:stretch; cursor:pointer; border:0; background:none; padding:0; width:100% } .form .btn__in{ width:100% } .form button[disabled]{ opacity:.55; pointer-events:none } /* --- 19. Events ----------------------------------------------------------------------------- */ /* An event is a card rather than a row between hairlines: there is usually only one of them on the page, and a single row of text under a rule does not read as a fixture worth turning up to. */ .evt{ display:grid; grid-template-columns:clamp(210px,25vw,340px) 1fr; gap:clamp(24px,3.4vw,56px); align-items:start; padding:clamp(30px,3.4vw,54px); background:var(--paper-hi); border:1px solid var(--line); box-shadow:0 24px 60px rgba(20,23,15,.05) } .evt + .evt{ margin-top:clamp(24px,2.6vw,40px) } /* align-content:start matters: the column is stretched to the card so its rule runs the full height, and without it the grid stretches its own rows too - which turned the day badge into a tall empty box. */ .evt__when{ display:grid; gap:10px; justify-items:start; align-content:start; align-self:stretch; padding-right:clamp(20px,2.6vw,44px); border-right:1px solid var(--line) } .evt__orn{ margin-top:clamp(10px,1.4vw,20px); color:var(--sage) } /* Each event heads its own card with its own drawing, in place of the flourish both cards used to share. Sits above the repeat label so the mark is the first thing read. */ .evt__ic{ display:block; width:clamp(46px,4.2vw,60px); color:var(--sage); margin-bottom:4px } .evt__ic svg{ width:100%; height:auto; display:block } .evt--rose .evt__ic{ color:var(--rose-ink) } /* What is actually on, said in three words rather than buried in a paragraph. */ .evt__x{ display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 4px } .evt__x li{ font-family:var(--f-label); font-size:13.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--t-1); background:var(--stone); padding:9px 16px } /* The photograph fills the space under the day and time rather than taking a third column, which squeezed the copy and cropped a landscape shot into a slot half its width. */ .evt__m{ justify-self:stretch; margin-top:clamp(14px,1.6vw,24px) } .evt__m .fig{ width:100% } .evt__day{ font-family:var(--f-display); font-size:clamp(28px,3.2vw,46px); line-height:1 } .evt__time{ font-family:var(--f-garamond); font-size:clamp(18.5px,1.4vw,22.5px); color:var(--t-2) } .evt__rep{ font-family:var(--f-label); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--copper-ink); padding:5px 11px; border:1px solid currentColor } .evt__b{ display:grid; gap:16px } .evt__lead{ font-size:clamp(18px,1.2vw,21px); color:var(--t-1); line-height:1.55 } .evt--empty{ background:none; border:0; box-shadow:none; padding:0; display:block } .evt__empty{ padding:clamp(34px,4vw,60px); text-align:center; border:1px dashed var(--line); color:var(--t-3); display:grid; gap:12px; justify-items:center } /* --- 20. Blog ------------------------------------------------------------------------------- */ .jgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,44px) } .jcard{ display:grid; gap:18px; text-decoration:none; color:inherit; align-content:start } .jcard .fig{ aspect-ratio:4/3 } .jcard .fig img{ transition:transform 1.1s var(--e-arch) } .jcard:hover .fig img{ transform:scale(1.055) } .jcard__m{ display:flex; gap:.7em; align-items:center; font-family:var(--f-label); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--t-3) } .jcard__m i{ width:3px; height:3px; background:var(--sage); transform:rotate(45deg); font-style:normal } .jcard__t{ font-family:var(--f-display); font-size:clamp(20px,1.6vw,26px); line-height:1.22 } .jcard__d{ font-size:16px; color:var(--t-2); line-height:1.6 } .jcard:hover .jcard__t{ color:var(--copper-ink) } /* --- Follow band ---------------------------------------------------------------------------- */ .follow{ display:grid; justify-items:center; text-align:center; gap:clamp(12px,1.3vw,18px) } .follow__orn{ display:flex; justify-content:center; margin-bottom:2px } .follow__t{ font-family:var(--f-display); font-size:clamp(30px,3.6vw,52px); line-height:1.08; max-width:16ch } .follow__i{ max-width:56ch; color:var(--t-2); font-size:clamp(16.5px,1.05vw,18px); line-height:1.68 } .band--ink .follow__i,.band--moss .follow__i{ color:var(--c-2) } .follow__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.4vw,20px); margin-top:clamp(8px,1vw,14px) } /* White ground on every band, Danielle's instruction 26 August 2026, so the two buttons read as buttons wherever the Follow band lands. The handle was dropped at the same time - it was the same string on both platforms and it made the pills very wide. */ .soclink{ display:flex; align-items:center; justify-content:center; gap:.7em; text-decoration:none; padding:15px clamp(22px,2vw,32px); min-height:48px; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:999px; transition:border-color .4s var(--e-soft), box-shadow .4s var(--e-soft), transform .4s var(--e-out); } .band--ink .soclink,.band--moss .soclink{ border-color:transparent } .soclink:hover{ border-color:var(--copper-ink); box-shadow:0 6px 22px rgba(20,23,15,.10); transform:translateY(-1px) } .band--ink .soclink:hover,.band--moss .soclink:hover{ border-color:transparent } .soclink__i{ display:block; width:21px; height:21px; flex:none; color:var(--copper-ink) } .soclink__i svg{ width:100%; height:100%; display:block } .soclink__l{ font-family:var(--f-label); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase } @media (max-width:640px){ .follow__links{ width:100%; flex-direction:column; align-items:stretch } } .art{ display:grid; gap:clamp(22px,2.4vw,34px) } .art h2{ font-size:clamp(24px,2.5vw,36px); margin-top:clamp(14px,1.6vw,24px) } .art p{ font-size:clamp(18px,1.15vw,20px); line-height:1.72; color:var(--t-2); max-width:66ch } .art__meta{ display:flex; flex-wrap:wrap; gap:.8em; align-items:center; font-family:var(--f-label); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--t-3) } /* An image set into the body of an article. It runs the full measure of the column rather than the 66ch the prose is capped to, and takes a little more air than the paragraph gap gives. */ .art__fig{ width:100%; aspect-ratio:4/3; margin-block:clamp(6px,.8vw,14px) } /* The answer box. It is the first thing a reader sees and the thing an AI assistant lifts, so it is written to stand alone: no "as mentioned above", no pronoun pointing back at the title. The `.ansbox__a` selector is the speakable target in the BlogPosting schema. */ .ansbox{ background:var(--paper-hi); border:1px solid var(--line); border-left:3px solid var(--copper); border-radius:2px; padding:clamp(20px,2.2vw,32px) clamp(20px,2.4vw,36px); max-width:66ch } .ansbox__k{ font-family:var(--f-label); font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 .6em } .art .ansbox__a{ font-family:var(--f-garamond); font-size:clamp(19px,1.3vw,22px); line-height:1.6; color:var(--t-1); margin:0; max-width:none } /* Scannable lists inside an article. Extraction likes a real