/* ===================================================================== CLAIRMONT'S STYLESHEET 1 Design tokens 8 Upcoming auctions 2 Base and focus 9 Stories 3 Shared components 10 Sell with Clairmont's 4 Header 11 Newsletter 5 Hero carousel 12 Follow 6 Hero timeline 13 Footer 7 Auction highlights 14 Loops and motion 15 Inner pages (current menu item) 16 Auctions page 17 Individual auction page (/a1000/ ...) 18 Individual lot page (/a1000/l001/ ...) 19 Results page (/results/, built on 16) 20 Closed Auction (results state) 21 Sell page 22 Valuations page 23 Touch screens 24 About page 25 FAQ page (svg) BREAKPOINTS (max-width unless noted; CSS cannot read variables here) 1280 narrower desktop header 1180 small laptop: header, 2 and 3 column grids 1100 compact header 1080 stories stack to one column 980 footer to 2 columns 960 phone/tablet header 860 phone and tablet layout 760 upcoming auctions become a swipe row 560 stacked section headings 520 footer to 1 column min-width 861 with max-height 860 shorter desktop windows (hero text) ===================================================================== */ /* 1 DESIGN TOKENS ------------------------------------------------------ */ :root{ /* Brand colours (principal dark colour: Clairmont navy #0B1830) */ --navy:#0B1830; --velvet:#1C3352; --silver:#C9CFD6; --ivory:#F3EEE7; --charcoal:#221F1C; --stone:#D9D0C3; --taupe:#9C9080; --mist:#F4F4F3; --white:#fff; /* Text tints */ --ink-body:#3c3732; --ink-soft:#4a4540; --ink-meta:#5f584f; --on-photo:#F5F2EA; /* text set on photographs */ --placeholder:#9a948c; /* Lines and borders */ --rule:var(--stone); /* hairlines, dividers, menu borders */ --rule-input:var(--charcoal);/* underline of form fields */ --track:#E3E3E3; /* carousel progress track */ --track-active:#5E5E5E; /* carousel progress segment */ /* Footer (on navy) */ --ft-ink:rgba(243,238,231,.72); --ft-ink-faint:rgba(243,238,231,.45); --ft-rule:rgba(201,207,214,.16); /* Typography: two families only. Change a family here to change it everywhere. Didot = editorial (headings, titles, reading text) Work Sans = functional (navigation, buttons, labels, metadata, forms) */ --head:Didot, "Bodoni 72", "Baskerville Old Face", "Times New Roman", serif; --text:Didot, "Bodoni 72", "Baskerville Old Face", "Times New Roman", serif; --label:"Work Sans", "Helvetica Neue", Arial, sans-serif; /* Type sizes */ --fs-h2:clamp(24px,2vw,30px); /* section headings */ --fs-body:15px; /* base reading size (14.5px on phones) */ --fs-ui:11.5px; /* navigation, login, language */ --fs-cta:11px; /* every text link and button */ --fs-meta:10.5px; /* lot numbers, dates, estimates, story dates */ /* Letter spacing for uppercase labels */ --tr-ui:.16em; --tr-nav:.135em; --tr-cta:.18em; --tr-meta:.12em; /* Layout */ --max:1600px; /* maximum content width */ --g:32px; /* page side gutter */ --grid-gap:32px; /* gap between cards in a row */ /* Header dimensions */ --tbh:24px; /* utility bar */ --mainh:38px; /* main navigation bar */ --headh:64px; /* whole header: both bars + two hairlines */ --pad-x:32px; /* header side padding */ --logo-w:168px; /* wordmark width; height follows the file */ --nav-gap:36px; /* logo to first menu item; the divider starts here too */ /* Section spacing */ --sec:92px; /* standard section padding */ --sec-lg:108px; /* major editorial transitions */ --sec-tight:68px; /* sections that are intentionally connected */ --sec-s:48px; /* compact padding after a full bleed block */ --head-gap:48px; /* section heading to its content */ /* Rhythm inside cards and text blocks */ --sp-img:20px; /* image to first line of text */ --sp-label:10px; /* small label to title */ --sp-title:12px; /* title to the line below */ --sp-para:16px; /* between paragraphs */ --sp-cta:24px; /* last line of text to a CTA */ --sp-h2:20px; /* section heading to body copy */ --arrow-gap:10px; /* text to arrow inside every CTA */ /* Motion */ --dur:.25s; /* hover colour and opacity changes */ --dur-quick:.2s; /* small icon and link fades */ --ease-img:transform 1.2s ease; /* slow photographic zoom on hover */ } @media (max-width:1280px){:root{--nav-gap:34px}} @media (max-width:1180px){:root{--pad-x:24px;--logo-w:153px}} @media (max-width:1100px){:root{--nav-gap:27px}} @media (max-width:960px){:root{--headh:56px;--pad-x:20px;--logo-w:143px}} @media (max-width:860px){:root{--fs-body:14.5px;--g:20px;--grid-gap:16px;--sec:64px;--sec-lg:72px;--sec-tight:48px;--sec-s:40px;--head-gap:40px}} /* 2 BASE AND FOCUS ----------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--white);color:var(--charcoal);font-family:var(--text);font-size:var(--fs-body);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{display:block;max-width:100%;height:auto} a{color:inherit} h1,h2,h3,h4{font-family:var(--head);font-weight:400;margin:0;letter-spacing:-.005em} p{margin:0 0 1em} button{font:inherit} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--navy);outline-offset:4px} /* 3 SHARED COMPONENTS -------------------------------------------------- */ /* Generic names (.container, .section, .section-title, .meta, .cta-link, .btn, .frame) are reusable on future pages; the homepage's own class names are listed beside them. */ /* Section container and spacing */ .container,.wide{max-width:var(--max);margin:0 auto;padding:0 var(--g)} .section,.sec{padding:var(--sec) 0} /* Section heading row: title on the left, CTA link on the right */ .sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:32px;margin-bottom:var(--head-gap)} @media (max-width:560px){.sec-head{flex-direction:column;align-items:flex-start;gap:14px}} /* Section title */ .section-title,.sec-head h2,.sell4-text h2,.news h2,.follow h2{font-size:var(--fs-h2);color:var(--navy)} .section-title,.sec-head h2,.sell4-text h2,.news h2{line-height:1.2} .sec-head h2{letter-spacing:0} /* Metadata: lot numbers, dates, estimates, categories */ .meta,.lot2 .kicker,.lot2 .est,.au2 .when,.ins-meta{font-family:var(--label);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);text-transform:uppercase} /* CTA language: same size, tracking and arrow spacing for every link and button */ .cta-link,.btn,.more,.sell4-btn,.news button,.acts2 a{font-family:var(--label);font-size:var(--fs-cta);font-weight:500;letter-spacing:var(--tr-cta);text-transform:uppercase;text-decoration:none;line-height:1} /* Text link with underline and arrow: View auction, Explore all auctions, View all stories */ .cta-link,.more{color:var(--navy);display:inline-flex;align-items:center;gap:var(--arrow-gap);white-space:nowrap;padding-bottom:6px;border-bottom:1px solid currentColor} .arr{display:inline-block;transition:transform var(--dur)} .cta-link:hover .arr,.btn:hover .arr,.more:hover .arr,.sell4-btn:hover .arr,.news button:hover .arr{transform:translateX(4px)} /* Buttons: 43px tall; solid navy or navy outline */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--arrow-gap);height:43px;padding:0 24px;border:1px solid var(--navy);transition:background var(--dur),color var(--dur),border-color var(--dur)} .btn--solid{background:var(--navy);color:var(--white)} .btn--solid:hover{background:var(--velvet);border-color:var(--velvet)} .btn--outline{background:transparent;color:var(--navy)} .btn--outline:hover{background:var(--navy);color:var(--white)} /* Image frame: photograph fills the frame and zooms slowly on hover */ .frame,.pic{position:relative;overflow:hidden;background:var(--velvet)} .frame img,.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:var(--ease-img)} /* Form fields share one quiet underlined treatment */ .hsearch input,.search-bar input,.news input{border:0;background:transparent;font-family:var(--label);border-radius:0} /* 4 HEADER ------------------------------------------------------------- */ .site-header{background:var(--white);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rule)} .site-header .bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:var(--mainh);padding:0 var(--pad-x);max-width:var(--max);margin:0 auto} .logo{display:flex;align-items:center} /* approved wide wordmark: width set, height follows the file's own proportions; file is about 4x for Retina */ .logo img{width:var(--logo-w);height:auto;max-width:none;flex:none} @media (min-width:961px){.logo img{transform:translateY(calc(-1 * (var(--tbh) + 1px) / 2))}} /* centred across both bars */ /* Slim utility bar; its divider starts exactly where the menu starts, so the wordmark sits clear of it */ .topbar{padding-bottom:1px;overflow:hidden} .topbar-in{position:relative;max-width:var(--max);margin:0 auto;height:var(--tbh);padding:0 var(--pad-x);gap:0} .topbar-in::after{content:"";position:absolute;bottom:-1px;left:calc(var(--pad-x) + var(--logo-w) + var(--nav-gap));right:-100vw;height:1px;background:var(--rule);pointer-events:none} .topbar-in>*{display:flex;align-items:center;height:12px;padding:0 16px;border-left:1px solid var(--rule)} .topbar-in>:first-child{border-left:0} .topbar-in>:last-child{padding-right:0} .topbar-in a,.topbar-in details.lang>summary{font-size:10.5px} .topbar-in details.lang>summary{padding:4px 13px 4px 0} .topbar-in .tb-alert svg,.topbar-in .tb-account svg{width:14px;height:14px;stroke-width:1.3} .topbar-in .tb-account{gap:7px} .topbar-in .tb-account svg{stroke-linecap:round} .topbar-in .lang-menu{top:calc(100% + 10px);right:-12px} .bar .lang-m{display:none} /* Main navigation and interface labels */ .nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .nav{display:flex;gap:34px;margin-left:var(--nav-gap)} .nav a,.util a,.util button,details.lang>summary{font-family:var(--label);font-size:var(--fs-ui);font-weight:500;letter-spacing:var(--tr-nav);text-transform:uppercase;text-decoration:none;color:var(--navy)} .nav a{padding:6px 0;border-bottom:1px solid transparent} .nav a:hover{border-bottom-color:var(--navy)} .nav .m-login{display:none} .util{display:flex;align-items:center;justify-content:flex-end;gap:26px} .util button{background:none;border:0;padding:4px;cursor:pointer;display:flex;align-items:center} .util svg{width:17px;height:17px;stroke:var(--navy);fill:none;stroke-width:1.4} .util a:hover{opacity:.7} .util .search-btn,.util .acct-btn,.menu-btn{display:none} /* Inline search field */ .hsearch{display:flex;align-items:center;width:230px;border-bottom:1px solid var(--rule-input)} .hsearch input{flex:1;min-width:0;font-size:12px;letter-spacing:.02em;color:var(--charcoal);padding:5px 2px;-webkit-appearance:none;appearance:none} .hsearch input::placeholder{color:var(--placeholder)} .hsearch input:focus{outline:none} .hsearch:focus-within{border-bottom-color:var(--navy)} .util .hsearch button{padding:4px 0 4px 10px} .util .hsearch svg{width:16px;height:16px;stroke-width:1.3} /* Language selector (works without scripts) */ .lang{position:relative;display:flex;align-items:center} .lang::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;border-right:1px solid var(--navy);border-bottom:1px solid var(--navy);transform:translateY(-70%) rotate(45deg);pointer-events:none} details.lang>summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:4px 14px 4px 0;-webkit-tap-highlight-color:transparent} details.lang>summary::-webkit-details-marker{display:none} details.lang>summary::marker{content:""} .lang-menu{position:absolute;top:calc(100% + 18px);right:-18px;min-width:160px;margin:0;padding:6px 0;list-style:none;background:var(--white);border:1px solid var(--rule);z-index:60} details.lang:not([open]) .lang-menu{display:none} .util .lang-menu button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:11px 20px;font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:none;text-align:left} .util .lang-menu button:hover,.util .lang-menu button:focus-visible{background:var(--mist);outline:none} .util .lang-menu button[aria-checked="true"]::after{content:"";width:5px;height:9px;border-right:1px solid var(--navy);border-bottom:1px solid var(--navy);transform:rotate(45deg) translate(-2px,-2px)} /* Search drawer (small screens) */ .search-bar{display:none;border-top:1px solid var(--rule);background:var(--white)} .search-bar.open{display:block} .search-bar form{max-width:720px;margin:0 auto;padding:18px 32px;display:flex;gap:16px} .search-bar input{flex:1;border-bottom:1px solid var(--rule-input);font-size:15px;padding:8px 2px} .search-bar input:focus{outline:none;border-bottom-color:var(--navy)} .search-bar button{background:none;border:0;font-family:var(--label);font-size:var(--fs-ui);letter-spacing:var(--tr-nav);text-transform:uppercase;color:var(--navy);cursor:pointer} @media (max-width:1280px){.nav{gap:26px}.hsearch{width:200px}} @media (max-width:1180px){.util{gap:18px}} @media (max-width:1100px){.nav{gap:20px}.hsearch{width:168px}.util{gap:16px}} @media (max-width:960px){ .topbar{display:none} .site-header .bar{grid-template-columns:auto 1fr;height:var(--headh)} .bar .lang-m{display:flex} .nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;background:var(--white);flex-direction:column;gap:20px;padding:4px 20px 24px;border-bottom:1px solid var(--rule)} #navtoggle:checked ~ .nav{display:flex} .nav a{padding:16px 0;border-bottom:1px solid var(--rule)} .nav .m-login{display:block} .util{gap:10px} .hsearch{display:none} .util .search-btn{display:flex} .util .acct-btn{display:flex;align-items:center;justify-content:center;padding:10px 6px} .util .acct-btn svg{width:21px;height:21px;stroke-width:1.35;stroke-linecap:round} details.lang>summary{padding:12px 16px 12px 6px} .lang-menu{right:-8px;top:calc(100% + 6px)} .menu-btn{display:flex;flex-direction:column;gap:5px;padding:14px 4px 14px 10px;margin-right:-4px;cursor:pointer;-webkit-tap-highlight-color:transparent} .menu-btn span{display:block;width:22px;height:1px;background:var(--navy)} } /* 5 HERO CAROUSEL ------------------------------------------------------ */ /* Runs on CSS alone: radios #hr1 to #hr4 choose the starting slide, keyframes move the track. */ .hero2{position:relative;background:var(--white)} .hr{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px} .hero2 .stage{position:relative;height:clamp(460px,min(52vw,calc(100vh - var(--headh) - 110px)),920px);overflow:hidden;background:var(--navy);cursor:grab;user-select:none;-webkit-user-select:none} .hero2 .stage a,.hero2 .stage label{cursor:pointer} .hero2 .slides{position:absolute;inset:0;display:flex;touch-action:pan-y;will-change:transform;animation:28s cubic-bezier(.45,0,.2,1) infinite both} .hero2 .slide{position:relative;flex:0 0 100%;height:100%} .hero2 .imgbox{position:absolute;inset:0} .hero2 .himg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none} /* soft gradient for legibility, no visible box */ .hero2 .imgbox::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,12,26,.42) 0%,rgba(6,12,26,.18) 32%,rgba(6,12,26,0) 55%),linear-gradient(0deg,rgba(6,12,26,.34) 0%,rgba(6,12,26,0) 45%)} /* Text set directly on the photograph */ .hero2 .hpanel{position:absolute;left:44px;bottom:56px;width:min(560px,46%);color:var(--on-photo);z-index:2} .hero2 .hpanel h2{font-size:clamp(30px,2.9vw,44px);line-height:1.08;color:var(--on-photo);margin:0 0 16px} .hero2 .hmeta{font-family:var(--label);font-size:var(--fs-ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,234,.86);margin:0 0 16px} .hero2 .hdesc{font-size:14px;line-height:1.7;max-width:420px;color:rgba(245,242,234,.84);margin:0 0 var(--sp-cta)} .hero2 .hpanel .more{color:var(--on-photo)} /* light photographs: navy text and a faint light wash */ .hero2 .slide.light .hpanel,.hero2 .slide.light .hpanel h2,.hero2 .slide.light .hpanel .more{color:var(--navy)} .hero2 .slide.light .hmeta,.hero2 .slide.light .hdesc{color:rgba(11,24,48,.8)} .hero2 .slide.light .imgbox::after{background:linear-gradient(90deg,rgba(240,250,250,.34) 0%,rgba(240,250,250,.12) 34%,rgba(240,250,250,0) 55%)} /* Arrows and position markers */ .hero2 .harrows .set{visibility:hidden;animation:28s linear infinite both} .hero2 .arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;color:var(--white);z-index:3;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity var(--dur)} .hero2 .arrow:hover{opacity:1} .hero2 .arrow svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1;filter:drop-shadow(0 0 2px rgba(11,24,48,.55)) drop-shadow(0 0 8px rgba(11,24,48,.25))} .hero2 .arrow.prev{left:16px}.hero2 .arrow.next{right:16px} .hero2 .dots{position:absolute;bottom:34px;right:48px;display:flex;gap:12px;z-index:3;filter:drop-shadow(0 0 2px rgba(11,24,48,.6))} .hero2 .dots label{width:36px;height:13px;position:relative;display:block} .hero2 .dots label::after{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:rgba(255,255,255,.45)} .hero2 .dots label::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--white);z-index:1;opacity:0;animation:28s linear infinite both} .hero2 .stage.dragging .slides,.hero2 .stage.dragging .set,.hero2 .stage.dragging .dots label::before{animation-play-state:paused} /* Keyboard use: a white outline shows only for keyboard focus, and the slideshow holds while focus is inside it */ .hero2 .arrow:focus-visible,.hero2 .dots label:focus-visible{outline:1px solid var(--white);outline-offset:2px} .hero2 .stage:has(:focus-visible) .slides,.hero2 .stage:has(:focus-visible) .set,.hero2 .stage:has(:focus-visible) .dots label::before{animation-play-state:paused} /* Shorter or narrower desktop windows */ @media (min-width:861px) and (max-height:860px),(min-width:861px) and (max-width:1280px){ .hero2 .hpanel{bottom:44px} .hero2 .hpanel h2,.hero2 .hmeta{margin-bottom:12px} .hero2 .hdesc{margin-bottom:18px;font-size:13.5px;line-height:1.65} } @media (max-width:960px){.hero2 .stage{max-height:78vh}} @media (max-width:860px){ .hero2 .stage{height:min(118vw,calc(100vh - var(--headh) - 40px))} .hero2 .hpanel{left:22px;bottom:26px;width:calc(100% - 44px);max-width:340px} .hero2 .slide:not(.light) .hpanel{text-shadow:0 1px 12px rgba(6,12,26,.45)} .hero2 .hpanel h2{font-size:23px;line-height:1.1;margin-bottom:10px} .hero2 .hmeta{font-size:10px;margin-bottom:14px} .hero2 .hdesc{display:none} .hero2 .hpanel .more{font-size:10px} .hero2 .imgbox::after{background:linear-gradient(0deg,rgba(6,12,26,.86) 0%,rgba(6,12,26,.66) 26%,rgba(6,12,26,.2) 46%,rgba(6,12,26,0) 58%)} .hero2 .slide.light .imgbox::after{background:linear-gradient(0deg,rgba(236,250,249,.88) 0%,rgba(236,250,249,.6) 24%,rgba(236,250,249,0) 50%)} .hero2 .arrow{top:42%} .hero2 .arrow svg{width:20px;height:20px} .hero2 .arrow.prev{left:4px}.hero2 .arrow.next{right:4px} .hero2 .dots{top:16px;bottom:auto;right:16px;gap:8px} .hero2 .dots label{width:22px} /* art direction on phones: each hero image carries its own crop (focusMobile in js/auctions.js) */ .hero2 .himg[style*="--focus-m"]{object-position:var(--focus-m)!important} } /* 6 HERO TIMELINE ------------------------------------------------------ */ /* 4 slides of 7s; slide 1 is cloned at the end so the track always moves forward */ @keyframes heroA1{0.00%,21.20%{transform:translate3d(0%,0,0)}25.00%,46.20%{transform:translate3d(-100%,0,0)}50.00%,71.20%{transform:translate3d(-200%,0,0)}75.00%,96.20%{transform:translate3d(-300%,0,0)}100%{transform:translate3d(-400%,0,0)}} @keyframes heroA2{0.00%,21.20%{transform:translate3d(-100%,0,0)}25.00%,46.20%{transform:translate3d(-200%,0,0)}50.00%,71.20%{transform:translate3d(-300%,0,0)}75.00%{transform:translate3d(-400%,0,0);animation-timing-function:steps(1,end)}75.01%,96.20%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-100%,0,0)}} @keyframes heroA3{0.00%,21.20%{transform:translate3d(-200%,0,0)}25.00%,46.20%{transform:translate3d(-300%,0,0)}50.00%{transform:translate3d(-400%,0,0);animation-timing-function:steps(1,end)}50.01%,71.20%{transform:translate3d(0%,0,0)}75.00%,96.20%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(-200%,0,0)}} @keyframes heroA4{0.00%,21.20%{transform:translate3d(-300%,0,0)}25.00%{transform:translate3d(-400%,0,0);animation-timing-function:steps(1,end)}25.01%,46.20%{transform:translate3d(0%,0,0)}50.00%,71.20%{transform:translate3d(-100%,0,0)}75.00%,96.20%{transform:translate3d(-200%,0,0)}100%{transform:translate3d(-300%,0,0)}} @keyframes dotW0{0%,23.05%{opacity:1}23.10%,98.05%{opacity:0}98.10%,100%{opacity:1}} @keyframes arrW0{0%,23.05%{visibility:visible}23.10%,98.05%{visibility:hidden}98.10%,100%{visibility:visible}} @keyframes dotW1{0%,23.05%{opacity:0}23.10%,48.05%{opacity:1}48.10%,100%{opacity:0}} @keyframes arrW1{0%,23.05%{visibility:hidden}23.10%,48.05%{visibility:visible}48.10%,100%{visibility:hidden}} @keyframes dotW2{0%,48.05%{opacity:0}48.10%,73.05%{opacity:1}73.10%,100%{opacity:0}} @keyframes arrW2{0%,48.05%{visibility:hidden}48.10%,73.05%{visibility:visible}73.10%,100%{visibility:hidden}} @keyframes dotW3{0%,73.05%{opacity:0}73.10%,98.05%{opacity:1}98.10%,100%{opacity:0}} @keyframes arrW3{0%,73.05%{visibility:hidden}73.10%,98.05%{visibility:visible}98.10%,100%{visibility:hidden}} #hr1:checked~.stage .slides{animation-name:heroA1} #hr1:checked~.stage .dots label:nth-child(1)::before{animation-name:dotW0}#hr1:checked~.stage .harrows .set:nth-child(1){animation-name:arrW0} #hr1:checked~.stage .dots label:nth-child(2)::before{animation-name:dotW1}#hr1:checked~.stage .harrows .set:nth-child(2){animation-name:arrW1} #hr1:checked~.stage .dots label:nth-child(3)::before{animation-name:dotW2}#hr1:checked~.stage .harrows .set:nth-child(3){animation-name:arrW2} #hr1:checked~.stage .dots label:nth-child(4)::before{animation-name:dotW3}#hr1:checked~.stage .harrows .set:nth-child(4){animation-name:arrW3} #hr2:checked~.stage .slides{animation-name:heroA2} #hr2:checked~.stage .dots label:nth-child(1)::before{animation-name:dotW3}#hr2:checked~.stage .harrows .set:nth-child(1){animation-name:arrW3} #hr2:checked~.stage .dots label:nth-child(2)::before{animation-name:dotW0}#hr2:checked~.stage .harrows .set:nth-child(2){animation-name:arrW0} #hr2:checked~.stage .dots label:nth-child(3)::before{animation-name:dotW1}#hr2:checked~.stage .harrows .set:nth-child(3){animation-name:arrW1} #hr2:checked~.stage .dots label:nth-child(4)::before{animation-name:dotW2}#hr2:checked~.stage .harrows .set:nth-child(4){animation-name:arrW2} #hr3:checked~.stage .slides{animation-name:heroA3} #hr3:checked~.stage .dots label:nth-child(1)::before{animation-name:dotW2}#hr3:checked~.stage .harrows .set:nth-child(1){animation-name:arrW2} #hr3:checked~.stage .dots label:nth-child(2)::before{animation-name:dotW3}#hr3:checked~.stage .harrows .set:nth-child(2){animation-name:arrW3} #hr3:checked~.stage .dots label:nth-child(3)::before{animation-name:dotW0}#hr3:checked~.stage .harrows .set:nth-child(3){animation-name:arrW0} #hr3:checked~.stage .dots label:nth-child(4)::before{animation-name:dotW1}#hr3:checked~.stage .harrows .set:nth-child(4){animation-name:arrW1} #hr4:checked~.stage .slides{animation-name:heroA4} #hr4:checked~.stage .dots label:nth-child(1)::before{animation-name:dotW1}#hr4:checked~.stage .harrows .set:nth-child(1){animation-name:arrW1} #hr4:checked~.stage .dots label:nth-child(2)::before{animation-name:dotW2}#hr4:checked~.stage .harrows .set:nth-child(2){animation-name:arrW2} #hr4:checked~.stage .dots label:nth-child(3)::before{animation-name:dotW3}#hr4:checked~.stage .harrows .set:nth-child(3){animation-name:arrW3} #hr4:checked~.stage .dots label:nth-child(4)::before{animation-name:dotW0}#hr4:checked~.stage .harrows .set:nth-child(4){animation-name:arrW0} /* 7 AUCTION HIGHLIGHTS ------------------------------------------------- */ #lots.sec{padding-top:var(--sec-s)} .lots-wrap{position:relative} .lots-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*var(--grid-gap))/4);gap:var(--grid-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px} .lots-row::-webkit-scrollbar{display:none} .lot2{scroll-snap-align:start;text-decoration:none;color:inherit;display:block} .lot2 .lotpic{aspect-ratio:1/1;background:var(--white);margin-bottom:var(--sp-img)} .lot2 .lotpic img{object-fit:contain;padding:16%;mix-blend-mode:multiply} .lot2:hover .lotpic img{transform:scale(1.03)} .lot2 .kicker{display:block;font-weight:500;color:var(--taupe);margin-bottom:var(--sp-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* title always reserves two lines so estimates line up across the row */ .lot2 h3{font-size:19px;line-height:1.35;min-height:2.7em;color:var(--navy);margin-bottom:var(--sp-title)} .lot2 .est{color:var(--ink-meta)} /* round arrows on the images */ .lot-arrow{position:absolute;z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid rgba(11,24,48,.08);background:rgba(255,255,255,.94);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translateY(-50%);box-shadow:0 1px 6px rgba(11,24,48,.05);transition:background var(--dur),color var(--dur),opacity .3s} .lot-arrow:hover{background:var(--navy);color:var(--white)} .lot-arrow svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.3} .lot-arrow.lots-next{right:-10px}.lot-arrow.lots-prev{left:-10px} /* Carousel progress control: full width track with small arrows at either end. The dark segment rests at the left; while the row moves it stretches forward, then eases back (main.js). */ .row-track{display:flex;align-items:center;gap:10px;margin-top:var(--head-gap)} .row-progress{flex:1;height:1px;background:var(--track);position:relative} .row-progress span{position:absolute;left:0;top:0;height:1px;background:var(--track-active);width:21%} .trk-btn{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:24px;padding:0;border:0;background:none;color:var(--charcoal);cursor:pointer;opacity:.85;transition:opacity var(--dur-quick)} .trk-btn:hover{opacity:1} .trk-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round} .trk-prev{margin-left:-3px}.trk-next{margin-right:-3px} /* without scripts, the segment follows the scroll position where the browser supports it */ @supports (animation-timeline: scroll()){ #lots .wide{timeline-scope:--lots} .lots-row{scroll-timeline:--lots inline} #lots .row-progress span{width:var(--bw,21%);animation:lotsbar linear both;animation-timeline:--lots;transition:none} @keyframes lotsbar{from{left:0}to{left:calc(100% - var(--bw,21%))}} } .js-loop #lots .row-progress span{animation:none;left:0} @media (max-width:1180px){.lots-row{grid-auto-columns:calc((100% - 2*var(--grid-gap))/3)}} @media (max-width:860px){ .lots-row{grid-auto-columns:74%} .lot-arrow{display:none} } /* 8 UPCOMING AUCTIONS -------------------------------------------------- */ .au-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)} .au2{display:flex;flex-direction:column} .au2 .pic{display:block;aspect-ratio:11/12;margin-bottom:var(--sp-img)} .au2 .pic:hover img{transform:scale(1.025)} .au2 h3{font-size:22px;line-height:1.3;color:var(--navy);margin-bottom:var(--sp-title)} .au2 h3 a{text-decoration:none;color:inherit} /* date and buttons are pushed to the foot of the card so every row lines up */ .au2 .when{margin-top:auto;color:var(--ink-meta);margin-bottom:var(--sp-cta)} .acts2{display:grid;grid-template-columns:1fr 1.35fr;gap:10px} .acts2 a{display:flex;align-items:center;justify-content:center;height:43px;border:1px solid var(--navy);transition:background var(--dur),color var(--dur)} .acts2 .b-bid{background:var(--navy);color:var(--white)} .acts2 .b-bid:hover{background:var(--velvet);border-color:var(--velvet)} .acts2 .b-cat{color:var(--navy);background:transparent} .acts2 .b-cat:hover{background:var(--navy);color:var(--white)} @media (max-width:1180px){.au-row{grid-template-columns:repeat(2,1fr);row-gap:56px}} @media (max-width:760px){ .au-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--g));padding:0 var(--g);scroll-padding-left:var(--g)} .au-row::-webkit-scrollbar{display:none} .au2{scroll-snap-align:start} .au2 h3{font-size:21px} } /* 9 STORIES ------------------------------------------------------------ */ #insights.sec{padding:var(--sec-lg) 0 0} /* major editorial transition */ .ins{display:grid;grid-template-columns:1.08fr 1fr;gap:56px;align-items:stretch} .ins a{text-decoration:none;color:inherit;display:block} .ins-img{position:relative;overflow:hidden;background:var(--mist)} .ins-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:var(--ease-img)} .ins a:hover .ins-img img{transform:scale(1.025)} .ins a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px} .ins-meta{color:var(--taupe);margin-bottom:var(--sp-label)} .ins-meta .sep{margin:0 8px;color:var(--rule)} .ins-meta .nw{white-space:nowrap} /* narrow story cards set the date and the category on two lines */ .ins-item .ins-meta .sep{display:none} .ins-item .ins-meta .nw{display:block} .ins h3{color:var(--navy);line-height:1.28} .ins p{font-size:14px;line-height:1.7;color:var(--ink-soft);margin:0;max-width:600px} /* lead story fills the height of the column beside it */ .ins .ins-lead{display:flex;flex-direction:column} .ins-lead .ins-img{flex:1 1 auto;min-height:300px;margin-bottom:var(--sp-img)} .ins-lead h3{font-size:clamp(21px,1.6vw,24px);line-height:1.3;margin-bottom:var(--sp-title);max-width:640px} .ins-lead p{line-height:1.65;max-width:620px} .ins-side{display:grid;gap:42px} .ins .ins-item{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start} .ins-item .ins-img{aspect-ratio:4/3} .ins-item h3{font-size:21px;margin-bottom:var(--sp-title)} @media (max-width:1080px){ .ins{grid-template-columns:1fr} .ins-lead .ins-img{aspect-ratio:16/10;flex:none;min-height:0} } @media (max-width:860px){ .ins{display:flex;gap:var(--grid-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--g));padding:0 var(--g);scroll-padding-left:var(--g);align-items:flex-start} .ins::-webkit-scrollbar{display:none} .ins-side{display:contents} .ins .ins-lead,.ins .ins-item{flex:0 0 84%;scroll-snap-align:start} .ins .ins-item{display:block} .ins-lead .ins-img,.ins-item .ins-img{aspect-ratio:4/3;min-height:0;flex:none;margin-bottom:var(--sp-img)} .ins-lead h3,.ins-item h3{font-size:20px} .ins p{font-size:13.5px} .ins-lead .ins-meta .sep{display:none} .ins-lead .ins-meta .nw{display:block} } /* 10 SELL WITH CLAIRMONT'S -------------------------------------------- */ #sell.sec{padding-top:var(--sec-lg);padding-bottom:0} /* follows Stories with the same generous break */ .sell4{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(400px,32vw,510px);background:var(--mist)} .sell4-text{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(32px,8vw,140px)} .sell4-text h2{margin-bottom:var(--sp-h2)} .sell4-text p{font-size:14.5px;line-height:1.8;color:var(--ink-body);max-width:520px;margin-bottom:var(--sp-para)} .sell4-text p:last-of-type{margin-bottom:0} .sell4-btn{align-self:flex-start;margin-top:calc(var(--sp-cta) + 8px);display:inline-flex;align-items:center;gap:var(--arrow-gap);height:43px;padding:0 24px;background:var(--navy);color:var(--white);transition:background var(--dur)} .sell4-btn:hover{background:var(--velvet)} .sell4-img{position:relative;overflow:hidden;min-height:320px} .sell4-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} @media (max-width:860px){ .sell4{grid-template-columns:1fr} .sell4-img{order:-1;aspect-ratio:3/2;min-height:0} .sell4-text{padding:40px 20px 48px} .sell4-btn{align-self:stretch;justify-content:center} } /* 11 NEWSLETTER -------------------------------------------------------- */ .news{background:var(--white);padding:var(--sec-tight) 0 var(--sec)} /* connected to the Sell box above */ .news .inner{max-width:640px;margin:0 auto;text-align:center} .news h2{margin:0 0 var(--sp-h2)} .news p{font-size:15px;line-height:1.75;color:var(--ink-soft)} .news form{display:flex;margin:40px auto var(--sp-para);max-width:520px;border-bottom:1px solid var(--rule-input)} .news form:focus-within{border-bottom-color:var(--navy);box-shadow:0 1px 0 var(--navy)} .news input{flex:1;min-width:0;font-size:15px;padding:14px 4px;color:var(--charcoal)} .news input:focus{outline:none} .news button{border:0;background:none;color:var(--navy);cursor:pointer;padding:0 4px 0 16px;white-space:nowrap;display:inline-flex;align-items:center;gap:var(--arrow-gap)} .news small{font-family:var(--label);font-size:12.5px;letter-spacing:.01em;color:var(--taupe)} .news .thanks{display:none;font-family:var(--head);font-size:18px;color:var(--navy);margin-top:36px} @media (max-width:560px){ .news form{flex-direction:column;border-bottom:0} .news input{border-bottom:1px solid var(--rule-input)} .news button{padding:18px 0 0;align-self:flex-start} } /* 12 FOLLOW ------------------------------------------------------------ */ /* quiet band: heading and a compact row of small icons, centred together */ .follow{background:var(--mist);padding:40px 0} .follow-in{display:flex;justify-content:center;align-items:center;gap:56px} .follow h2{white-space:nowrap} .follow-icons{display:flex;align-items:center;gap:22px} .follow-icons a{color:var(--navy);display:flex;padding:6px;opacity:.72;transition:opacity var(--dur-quick)} .follow-icons a:hover{opacity:1} .follow-icons svg{width:18px;height:18px} @media (max-width:860px){ .follow-in{flex-direction:column;gap:18px;text-align:center} .follow-icons{gap:20px} } /* 13 FOOTER ------------------------------------------------------------ */ .ft{background:var(--navy);color:var(--ft-ink);padding:64px 0 36px} .ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:48px} .ft h4{font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:var(--tr-ui);text-transform:uppercase;color:var(--white);margin:0 0 24px} .ft h4 a,.ft h4 a:hover{color:inherit;text-decoration:none} .ft ul{list-style:none;margin:0;padding:0} .ft li,.ft address{font-family:var(--label);font-size:14px} .ft li{line-height:1.4;margin-bottom:15px} .ft a{color:var(--ft-ink);text-decoration:none;transition:color var(--dur-quick)} .ft a:hover{color:var(--white)} .ft address{font-style:normal;line-height:1.75;margin-bottom:15px} .ft-base{margin-top:48px;padding-top:20px;border-top:1px solid var(--ft-rule);font-family:var(--label);font-size:11px;letter-spacing:.06em;color:var(--ft-ink-faint)} @media (max-width:980px){.ft-cols{grid-template-columns:1fr 1fr;gap:44px 32px}} @media (max-width:520px){.ft{padding:56px 0 32px}.ft-cols{grid-template-columns:1fr;gap:36px}.ft h4{margin-bottom:16px}.ft li{margin-bottom:12px}} /* 14 LOOPS AND MOTION -------------------------------------------------- */ /* main.js clones cards for seamless loops; clones only show where the row scrolls */ @media (min-width:761px){.au-row>.loop-clone{display:none}} @media (min-width:861px){.ins>.loop-clone{display:none}} @media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} .hero2 .slides,.hero2 .set,.hero2 .dots label::before{animation-duration:1000s!important} } /* 15 INNER PAGES ------------------------------------------------------- */ /* Current section in the main menu (pages set ) */ @media (min-width:961px){.nav a[aria-current="page"]{border-bottom-color:var(--navy)}} @media (max-width:960px){.nav a[aria-current="page"]{color:var(--navy);font-weight:600}} /* 16 AUCTIONS PAGE ---------------------------------------------------- */ .ab{--ab-side:300px;--ab-rule:#E6E1D9;padding-bottom:var(--sec)} .ab [hidden]{display:none!important} .ab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;flex:none} .ab button,.ab a,.ab select{-webkit-tap-highlight-color:transparent} /* Category and search bar */ .ab-bar{display:grid;grid-template-columns:minmax(0,360px) minmax(0,460px) 1fr;align-items:end;column-gap:clamp(24px,3.2vw,56px);padding:40px 0 26px;border-bottom:1px solid var(--ab-rule)} .ab-field{position:relative;display:flex;align-items:center;gap:10px;height:40px;border-bottom:1px solid var(--rule);color:var(--navy);transition:border-color var(--dur)} .ab-field:focus-within{border-bottom-color:var(--navy)} .ab-field select,.ab-field input{flex:1;min-width:0;height:100%;border:0;border-radius:0;background:transparent;font-family:var(--label);font-size:13px;color:var(--charcoal);padding:0 26px 0 0;-webkit-appearance:none;appearance:none;cursor:pointer} .ab-field input{cursor:text;padding-right:8px} .ab-field input::placeholder{color:var(--ink-meta)} .ab-field input::-webkit-search-cancel-button{-webkit-appearance:none} .ab-field select:focus,.ab-field input:focus{outline:none} .ab-field .ab-chev{position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:none;width:16px;height:16px} .ab-go{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:none;color:var(--navy);cursor:pointer} .ab-go svg{width:16px;height:16px} .ab-view{display:flex;gap:6px;align-self:center;justify-self:end} .ab-view button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;color:var(--taupe);transition:color var(--dur)} .ab-view button:hover,.ab-view button[aria-pressed="true"]{color:var(--navy)} .ab-view svg{width:20px;height:20px} /* Category chips: one quiet row that scrolls sideways */ .ab-chips-wrap{padding:26px 0 0} .ab-chips{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .ab-chips::-webkit-scrollbar{display:none} .ab-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 18px;border:1px solid var(--ab-rule);background:var(--white);cursor:pointer;font-family:var(--label);font-size:var(--fs-meta);font-weight:500;letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--navy);white-space:nowrap;transition:border-color var(--dur),background var(--dur),color var(--dur)} .ab-chip:hover{border-color:var(--navy)} .ab-chip-n{color:var(--taupe);font-weight:400} .ab-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)} .ab-chip[aria-pressed="true"] .ab-chip-n{color:var(--silver)} /* Months on the left, auctions on the right */ .ab-layout{display:grid;grid-template-columns:var(--ab-side) minmax(0,1fr);column-gap:clamp(48px,7vw,128px);align-items:start;padding-top:56px} .ab-side{position:sticky;top:calc(var(--headh) + 32px);border:1px solid var(--ab-rule)} .ab-months ol{list-style:none;margin:0;padding:22px 0} .ab-month{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 28px;text-decoration:none;font-family:var(--head);font-size:23px;line-height:1.3;color:var(--ink-meta);transition:color var(--dur)} .ab-month:hover{color:var(--navy)} .ab-month[aria-current]{color:var(--navy)} .ab-month[aria-current]::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;background:var(--navy)} .ab-month[aria-disabled]{color:var(--silver);pointer-events:none} .ab-year{font-family:var(--label);font-size:var(--fs-meta);letter-spacing:.06em;color:var(--taupe)} .ab-quick{border-top:1px solid var(--ab-rule);padding:22px 28px 26px} .ab-quick-label{font-family:var(--label);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-meta);margin:0 0 14px} .ab-results{width:100%;height:40px} .ab-main-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:40px} .ab-title{font-size:clamp(30px,2.6vw,40px);line-height:1.15;color:var(--navy)} .ab-count{margin:0;font-family:var(--label);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--taupe);white-space:nowrap} .ab-group{scroll-margin-top:calc(var(--headh) + 32px)} .ab-group+.ab-group{margin-top:72px} .ab-group-title{font-size:15px;font-family:var(--label);font-weight:500;letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-meta);padding-bottom:14px;border-bottom:1px solid var(--ab-rule);margin-bottom:32px} .ab-group-title:focus{outline:none} /* Grid view: two columns, the date above each card */ .ab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:56px} .ae{display:flex;flex-direction:column;margin:0} .ae-date{font-family:var(--head);font-size:clamp(22px,1.9vw,27px);line-height:1.2;color:var(--navy);margin:0 0 16px} .ae-card{flex:1;display:flex;flex-direction:column;border:1px solid var(--ab-rule);padding:12px} .ae-pic{display:block;aspect-ratio:16/10} .ae-pic:hover img{transform:scale(1.025)} .ae-pic.is-empty{background:var(--mist)} /* photograph not yet supplied */ .ae-body{flex:1;display:flex;flex-direction:column;padding:18px 6px 6px} .ae-meta{margin:0 0 8px;font-family:var(--label);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-meta)} .ae-sep{margin:0 .6em;color:var(--rule)} .ae-title{font-size:clamp(22px,1.75vw,26px);line-height:1.22;color:var(--navy);margin:0 0 12px} .ae-title a{text-decoration:none;color:inherit} .ae-loc{display:flex;align-items:center;gap:6px;margin:0 0 24px;font-family:var(--label);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-meta)} .ae-loc svg{width:14px;height:14px} .ae-acts{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px} .ae-acts .btn{height:43px;padding:0 10px;white-space:nowrap} /* List view: one auction per row */ .ab.is-list .ab-grid{grid-template-columns:1fr;row-gap:0} .ab.is-list .ae{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:32px;align-items:start;padding:28px 0;border-bottom:1px solid var(--ab-rule)} .ab.is-list .ae:first-child{padding-top:4px} .ab.is-list .ae-date{font-size:22px;margin:0} .ab.is-list .ae-card{display:grid;grid-template-columns:minmax(180px,34%) minmax(0,1fr);column-gap:32px;border:0;padding:0} .ab.is-list .ae-body{padding:0} .ab.is-list .ae-acts{grid-template-columns:repeat(2,minmax(0,170px))} .ab.is-list .ab-group-title{margin-bottom:0} .ab-empty{padding:48px 0;border-top:1px solid var(--ab-rule)} .ab-empty p{font-family:var(--head);font-size:20px;color:var(--navy);margin:0 0 20px} .ab-clear-link{background:none;border-top:0;border-left:0;border-right:0;padding:0 0 6px;cursor:pointer} @media (max-width:1180px){ .ab{--ab-side:240px} .ab-month{font-size:20px;padding:6px 22px} .ab-quick{padding:20px 22px 22px} .ab.is-list .ae{grid-template-columns:1fr;row-gap:14px} } @media (min-width:861px) and (max-width:980px){.ae-acts{grid-template-columns:1fr}} @media (max-width:1100px){.ab-bar{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto}} /* Phones and tablets: compact filters, months as a sideways row, one column */ @media (max-width:860px){ .ab-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c c" "s v";column-gap:16px;row-gap:8px;padding:22px 0 18px} .ab-go{display:none} .ab-view{gap:0} .ab-search{grid-area:s}.ab-view{grid-area:v}.ab-cat{grid-area:c} .ab-chips-wrap{padding-top:18px} .ab-chips{margin:0 calc(-1 * var(--g));padding:0 var(--g) 2px;scroll-padding-left:var(--g)} .ab-chip{height:36px;padding:0 14px} .ab-layout{grid-template-columns:minmax(0,1fr);padding-top:28px} .ab-side{position:static;border:0;border-bottom:1px solid var(--ab-rule);display:flex;align-items:center;gap:20px;margin-bottom:32px} .ab-months{flex:1;min-width:0} .ab-months ol{display:flex;gap:24px;padding:0;overflow-x:auto;scrollbar-width:none} .ab-months ol::-webkit-scrollbar{display:none} .ab-month{padding:4px 0 12px;font-size:19px;white-space:nowrap;gap:6px} .ab-month[aria-current]::before{left:0;right:0;top:auto;bottom:-1px;width:auto;height:2px} .ab-year{display:none} .ab-quick{border:0;padding:0 0 12px} .ab-quick-label{display:none} .ab-results{width:auto;height:auto;border:0;padding:0;background:none!important;color:var(--navy)!important;font-size:10.5px;white-space:nowrap} .ab-main-head{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:24px} .ab-title{font-size:28px} .ab-grid{grid-template-columns:1fr;row-gap:48px} .ab-group+.ab-group{margin-top:56px} .ab-group-title{margin-bottom:24px} .ae-date{font-size:22px;margin-bottom:12px} .ae-card{padding:10px} .ae-body{padding:16px 4px 4px} .ae-title{font-size:23px} /* compact list: small photograph beside the details */ .ab.is-list .ae{padding:22px 0;row-gap:10px} .ab.is-list .ae-date{font-size:19px} .ab.is-list .ae-card{grid-template-columns:112px minmax(0,1fr);column-gap:16px} .ab.is-list .ae-pic{aspect-ratio:1} .ab.is-list .ae-sep,.ab.is-list .ae-when{display:none} .ab.is-list .ae-title{font-size:20px;margin-bottom:8px} .ab.is-list .ae-loc{margin-bottom:14px} .ab.is-list .ae-acts{grid-template-columns:1fr;gap:6px} .ab.is-list .ae-acts .btn{height:38px} } /* 17 INDIVIDUAL AUCTION PAGE ------------------------------------------ */ .au-page{--ap-rule:#E6E1D9;--ab-rule:var(--ap-rule)} /* chips share the Auctions page treatment */ .au-page [hidden]{display:none!important} .au-page svg{fill:none;stroke:currentColor;stroke-width:1.2;flex:none} .au-page button,.au-page a{-webkit-tap-highlight-color:transparent} .ap-label,.ap-back,.ap-meta,.ap-loc,.ap-tool,.ap-tabs a,.ap-search-label,.ap-sort,.lc-no{font-family:var(--label);font-weight:500;text-transform:uppercase} /* Back to all auctions */ .ap-back-row{border-bottom:1px solid var(--ap-rule)} .ap-back{display:inline-flex;align-items:center;gap:7px;padding:14px 0 13px;font-size:10.5px;letter-spacing:var(--tr-nav);color:var(--navy);text-decoration:none} .ap-back svg{width:13px;height:13px} .ap-back:hover{text-decoration:underline;text-underline-offset:5px} /* Auction details: title on the left, closing and actions on the right */ .ap-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);column-gap:clamp(48px,7vw,120px);padding-top:36px;padding-bottom:34px} .ap-info{display:flex;flex-direction:column} .ap-meta{margin:0;font-size:10.5px;letter-spacing:var(--tr-meta);color:var(--charcoal)} .ap-sep{margin:0 .7em;color:var(--rule)} .ap-title{font-size:clamp(28px,2.55vw,40px);line-height:1.12;color:var(--navy);margin:10px 0 0} .ap-loc{display:flex;align-items:center;gap:7px;margin:auto 0 0;padding-top:26px;font-size:10.5px;letter-spacing:var(--tr-meta);color:var(--charcoal)} .ap-loc svg{width:14px;height:14px} .ap-closing{margin:0 0 12px;font-family:var(--label);font-size:13.5px;color:var(--charcoal)} .au-page[data-status="today"] .ap-closing{color:var(--navy);font-weight:500} .ap-tools{display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px} .ap-tool{display:inline-flex;align-items:center;gap:6px;padding:2px 0;border:0;background:none;cursor:pointer;font-size:10px;letter-spacing:var(--tr-nav);color:var(--navy)} .ap-tool svg{width:13px;height:13px} .ap-tool:hover span{text-decoration:underline;text-underline-offset:5px} .ap-note{font-family:var(--label);font-size:11px;color:var(--taupe);min-height:0} .ap-note:empty{display:none} .ap-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px} .ap-acts .btn{height:40px;padding:0 14px;font-size:10.5px;white-space:nowrap;cursor:pointer} .ap-conditions{display:inline-block;margin-top:10px;font-family:var(--label);font-size:11.5px;color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} /* Browse lots tab */ .ap-tabs-row{border-bottom:1px solid var(--ap-rule)} .ap-tabs a{display:inline-block;padding-bottom:11px;margin-bottom:-1px;border-bottom:2px solid var(--navy);font-size:11px;letter-spacing:var(--tr-meta);color:var(--navy);text-decoration:none} /* Search, lot number order, grid or list */ .ap-browse{padding-bottom:var(--sec)} .ap-controls{display:flex;justify-content:flex-end;align-items:center;padding:14px 0 16px} .ap-controls>.ap-sort,.ap-controls>.ap-view{border-left:1px solid var(--ap-rule);margin-left:20px;padding-left:20px} .ap-search{display:flex;align-items:center;gap:6px;height:30px} .ap-search-label{font-size:10.5px;letter-spacing:var(--tr-nav);color:var(--navy);cursor:text} .ap-search input{width:0;opacity:0;height:28px;padding:0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;font-family:var(--label);font-size:12px;color:var(--charcoal);transition:width var(--dur),opacity var(--dur);-webkit-appearance:none;appearance:none} .ap-search input::-webkit-search-cancel-button{-webkit-appearance:none} .ap-search input::placeholder{color:var(--ink-meta)} .ap-search input:focus{outline:none;border-bottom-color:var(--navy)} .ap-search:focus-within input,.ap-search.has-q input{width:190px;opacity:1} .ap-icon-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:none;color:var(--navy);cursor:pointer} .ap-icon-btn svg{width:16px;height:16px} .ap-sort{display:inline-flex;align-items:center;gap:6px;height:30px;border-top:0;border-right:0;border-bottom:0;background:none;cursor:pointer;font-size:10.5px;letter-spacing:var(--tr-nav);color:var(--navy)} .ap-sort svg{width:15px;height:15px} .ap-sort[data-dir="asc"] .down,.ap-sort[data-dir="desc"] .up{stroke:var(--silver)} .ap-view{display:flex;gap:2px} .ap-view button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;color:var(--taupe);transition:color var(--dur)} .ap-view button:hover,.ap-view button[aria-pressed="true"]{color:var(--navy)} .ap-view svg{width:17px;height:17px} /* Category chips (same quiet chips as the Auctions page) */ .ap-chips{gap:8px;margin-bottom:40px} .au-page .ab-chip{height:30px;padding:0 13px;font-size:10px;font-weight:500} /* Lots: four columns of large photographs */ .ap-lots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;row-gap:64px} .lc{display:flex;flex-direction:column;margin:0} .lc-pic{display:block;aspect-ratio:1;background:var(--white);overflow:hidden} .lc-pic img{width:100%;height:100%;object-fit:contain;transition:var(--ease-img)} .lc-pic:hover img{transform:scale(1.03)} .lc-body{flex:1;display:flex;flex-direction:column;padding-top:16px} .lc-no{margin:0 0 6px;font-size:10px;letter-spacing:var(--tr-meta);color:var(--ink-meta)} .lc-nr:not(:empty)::before{content:"|";margin:0 .7em;color:var(--rule)} .lc-nr{color:var(--navy)} .lc-title{font-size:16px;line-height:1.3;letter-spacing:.01em;color:var(--navy);margin:0 0 14px} .lc-title a{color:inherit;text-decoration:none} .lc-title a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .lc-figs{margin-top:auto} .lc-fig{display:flex;flex-direction:column;gap:1px;margin:0 0 8px;font-family:var(--label)} .lc-label{font-size:11px;color:var(--ink-meta)} .lc-val{font-size:12.5px;color:var(--charcoal)} .lc-strong{font-weight:500;color:var(--navy)} .lc-close{margin:2px 0 14px;font-family:var(--label);font-size:11px;color:var(--ink-body)} .lc-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px} .lc-acts .btn{height:32px;padding:0 8px;font-size:10px;white-space:nowrap;cursor:pointer} /* quiet lot actions: thin outlines; Bid fills on hover, Watch stays lighter */ .lc-acts .btn--solid{background:transparent;color:var(--navy);border-color:var(--navy)} .lc-acts .btn--solid:hover{background:var(--navy);border-color:var(--navy);color:var(--white)} .lc-acts .lc-watch{border-color:var(--ap-rule)} .lc-acts .lc-watch:hover{border-color:var(--navy);background:transparent;color:var(--navy)} .lc-acts .lc-watch[aria-pressed="true"]{border-color:var(--navy)} /* List view: one lot per row */ .au-page.is-list .ap-lots{grid-template-columns:1fr;row-gap:0;border-top:1px solid var(--ap-rule)} .au-page.is-list .lc{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:36px;align-items:center;padding:18px 0;border-bottom:1px solid var(--ap-rule)} .au-page.is-list .lc-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 160px;column-gap:36px;align-items:center;padding:0} .au-page.is-list .lc-title{margin:0} .au-page.is-list .lc-figs{margin:0} .au-page.is-list .lc-close{margin-bottom:0} .au-page.is-list .lc-acts{grid-template-columns:1fr;gap:6px} .ap-empty{padding:40px 0;border-top:1px solid var(--ap-rule)} .ap-empty p{font-family:var(--head);font-size:18px;color:var(--navy);margin:0 0 20px} .ap-empty .cta-link{background:none;border-top:0;border-left:0;border-right:0;padding:0 0 6px;cursor:pointer} @media (max-width:1180px){ .ap-head{grid-template-columns:minmax(0,1fr) minmax(260px,360px);column-gap:48px} .ap-lots{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px} .au-page.is-list .lc-body{grid-template-columns:minmax(0,1fr) 150px;row-gap:12px} .au-page.is-list .lc-figs{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;column-gap:40px} .au-page.is-list .lc-acts{grid-column:2;grid-row:1 / span 2} } /* Phones and tablets: details stacked, controls in one quiet row */ @media (max-width:860px){ .ap-head{grid-template-columns:1fr;row-gap:20px;padding-top:24px;padding-bottom:26px} .ap-title{font-size:28px;margin-top:8px} .ap-loc{padding-top:14px} .ap-side{border-top:1px solid var(--ap-rule);padding-top:18px} .ap-closing{margin-bottom:10px} .ap-acts{margin-top:16px;max-width:440px} .ap-controls{padding:10px 0 12px} .ap-controls>.ap-sort,.ap-controls>.ap-view{margin-left:14px;padding-left:14px} .ap-search{flex:1;min-width:0} .ap-search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .ap-search input,.ap-search:focus-within input,.ap-search.has-q input{flex:1;min-width:0;width:auto;opacity:1} .ap-sort span{font-size:10px} .ap-view{gap:0} .ap-chips{margin:0 calc(-1 * var(--g)) 28px;padding:0 var(--g) 2px;scroll-padding-left:var(--g)} .ap-lots{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:48px} .lc-title{font-size:15.5px} .au-page.is-list .lc{grid-template-columns:104px minmax(0,1fr);column-gap:16px;align-items:start;padding:16px 0} .au-page.is-list .lc-body{display:flex;flex-direction:column} .au-page.is-list .lc-title{margin-bottom:10px} .au-page.is-list .lc-figs{display:block} .au-page.is-list .lc-close{margin-bottom:10px} .au-page.is-list .lc-acts{grid-template-columns:1fr 1fr} .au-page.is-list .lc-acts .btn{height:32px} } @media (max-width:520px){ .ap-lots{grid-template-columns:1fr;row-gap:48px} .ap-controls{flex-wrap:wrap;row-gap:6px} .ap-search{flex:1 1 100%} .ap-controls>.ap-sort{border-left:0;margin-left:0;padding-left:0} .ap-controls>.ap-view{margin-left:auto} } /* Printing an auction: the catalogue without the interface */ @media print{ .site-header,.ft,.ap-back-row,.ap-tools,.ap-acts,.ap-controls,.ap-chips,.lc-acts{display:none!important} .ap-head{padding:0 0 24px} .ap-lots{grid-template-columns:repeat(3,1fr);row-gap:32px} .lc{break-inside:avoid} } /* 18 INDIVIDUAL LOT PAGE ---------------------------------------------- */ .lot-page{--lp-rule:#E6E1D9;--lp-band:var(--white)} /* pure white, so the photographs float */ .lot-page [hidden]{display:none!important} .lot-page svg{fill:none;stroke:currentColor;stroke-width:1.2;flex:none} .lot-page button,.lot-page a{-webkit-tap-highlight-color:transparent} .lp-back,.lp-step,.lp-no,.lp-nr,.lp-index a,.lp-section-label,.lp-viewall,.lm-no{font-family:var(--label);font-weight:500;text-transform:uppercase} /* Breadcrumb and main lot area share one quiet band */ .lp-band{background:var(--lp-band)} .lp-crumbs{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:12px;padding-bottom:11px;border-bottom:1px solid var(--lp-rule)} .lp-back{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:10.5px;letter-spacing:var(--tr-meta);color:var(--navy);text-decoration:none} .lp-back svg{width:13px;height:13px} .lp-back-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lp-back:hover .lp-back-title{text-decoration:underline;text-underline-offset:4px} .lp-step{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:var(--tr-meta);color:var(--navy);white-space:nowrap} .lp-step a{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--navy)} .lp-step svg{width:13px;height:13px} .lp-main{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(300px,400px);grid-template-areas:"thumbs stage info";column-gap:clamp(32px,4vw,64px);align-items:start;padding-top:20px;padding-bottom:32px} .lp-thumbs{grid-area:thumbs;display:flex;flex-direction:column;gap:10px} .lp-thumb{display:block;width:56px;height:56px;padding:0;border:1px solid transparent;background:var(--white);cursor:pointer;transition:border-color var(--dur)} .lp-thumb img{width:100%;height:100%;object-fit:contain} .lp-thumb[aria-pressed="true"],.lp-thumb:hover{border-color:var(--lp-rule)} .lp-stage{grid-area:stage} .lp-image{width:100%;max-width:440px;aspect-ratio:1;margin:0 auto;background:var(--white)} .lp-image img{width:100%;height:100%;object-fit:contain} .lp-info{grid-area:info;padding-top:4px} .lp-no{margin:0 0 6px;font-size:10px;letter-spacing:var(--tr-meta);color:var(--ink-meta)} .lp-title{font-size:21px;line-height:1.28;letter-spacing:.01em;color:var(--navy);margin:0} .lp-nr{margin:8px 0 0;font-size:10px;letter-spacing:var(--tr-meta);color:var(--navy)} .lp-nr:empty{display:none} .lp-figs{display:grid;grid-template-columns:auto minmax(0,1fr);margin-top:18px;padding-top:14px;border-top:1px solid var(--lp-rule)} .lp-fig{display:flex;flex-direction:column;gap:2px;margin:0;font-family:var(--label)} .lp-fig+.lp-fig{border-left:1px solid var(--lp-rule);margin-left:14px;padding-left:14px} .lp-label{font-size:11px;color:var(--ink-meta)} .lp-val{font-size:12.5px;color:var(--charcoal)} .lp-fig:first-child .lp-val{font-weight:500;color:var(--navy)} .lp-closing{margin:16px 0 12px;font-family:var(--label);font-size:12.5px;color:var(--charcoal)} .lot-page[data-status="today"] .lp-closing{color:var(--navy);font-weight:500} .lp-bid{width:100%;height:26px;padding:0 10px;font-size:9.5px;letter-spacing:.15em;cursor:pointer} .lp-bid[aria-disabled="true"]{background:var(--silver);border-color:var(--silver);pointer-events:none} .lp-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px} .lp-acts .btn{height:26px;padding:0 8px;font-size:9.5px;letter-spacing:.15em;gap:5px;border-color:var(--lp-rule);background:var(--white);cursor:pointer} .lp-acts .btn:hover,.lp-acts .btn[aria-pressed="true"]{border-color:var(--navy);background:var(--white);color:var(--navy)} .lp-acts svg{width:10px;height:10px} .lp-calc{margin:12px 0 0;font-family:var(--label);font-size:11.5px;color:var(--ink-body)} .lp-calc-link{padding:0;border:0;background:none;font:inherit;color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer} .lp-note{margin:8px 0 0;font-family:var(--label);font-size:11px;color:var(--taupe)} .lp-note:empty{display:none} /* Details, condition report and More From */ .lp-lower{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(240px,340px);column-gap:clamp(32px,5vw,96px);row-gap:72px;align-items:start;padding-top:36px;padding-bottom:var(--sec)} .lp-index{grid-row:1 / span 2;position:sticky;top:calc(var(--headh) + 24px);display:flex;flex-direction:column} .lp-index a{padding:7px 0 7px 12px;border-left:1px solid var(--lp-rule);font-size:10.5px;letter-spacing:var(--tr-meta);color:var(--ink-meta);text-decoration:none} .lp-index a:hover{color:var(--navy)} .lp-index a[aria-current]{border-left:2px solid var(--navy);padding-left:11px;color:var(--navy)} .lp-details{scroll-margin-top:calc(var(--headh) + 24px)} .lp-section-label{margin:0;font-size:10.5px;letter-spacing:var(--tr-meta);color:var(--navy)} .lp-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit} .lp-toggle svg{width:14px;height:14px;transition:transform var(--dur)} .lp-toggle[aria-expanded="false"] svg{transform:rotate(180deg)} .lp-details-body{margin-top:14px;padding-bottom:18px;border-bottom:1px solid var(--lp-rule)} .lp-details-body p{margin:0;font-family:var(--label);font-size:13px;line-height:1.65;color:var(--charcoal)} .lp-details-body .lp-pending{color:var(--ink-meta)} .lp-links{display:flex;align-items:center;margin:14px 0 0;font-family:var(--label);font-size:12px} .lp-links a{color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .lp-links a+a{margin-left:14px;padding-left:14px;border-left:1px solid var(--lp-rule)} .lp-aside{padding-top:0} .lp-report{width:100%;height:34px;font-size:10.5px;padding:0 12px;white-space:nowrap} .lp-more{grid-column:2 / 4;scroll-margin-top:calc(var(--headh) + 24px)} .lp-more-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px} .lp-more-title{font-size:24px;line-height:1.2;color:var(--navy);margin:6px 0 0} .lp-viewall{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:var(--tr-meta);color:var(--navy);text-decoration:none;white-space:nowrap} .lp-viewall svg{width:13px;height:13px;transition:transform var(--dur)} .lp-viewall:hover svg{transform:translateX(3px)} .lp-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% / 4.35);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline-offset:4px} .lp-rail::-webkit-scrollbar{display:none} .lm{display:flex;flex-direction:column;padding-right:22px;margin-right:22px;border-right:1px solid var(--lp-rule);scroll-snap-align:start} .lm-pic{display:block;aspect-ratio:1;background:var(--white);overflow:hidden;margin-bottom:14px} .lm-pic img{width:100%;height:100%;object-fit:contain;transition:var(--ease-img)} .lm-pic:hover img{transform:scale(1.03)} .lm-no{margin:0 0 5px;font-size:10px;letter-spacing:var(--tr-meta);color:var(--ink-meta)} .lm-title{font-size:14px;line-height:1.3;letter-spacing:.01em;color:var(--navy);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lm-title a{color:inherit;text-decoration:none} .lm-title a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .lm-fig{display:flex;flex-direction:column;gap:1px;margin:auto 0 8px;font-family:var(--label);font-size:12px;color:var(--charcoal)} .lm-label{font-size:11px;color:var(--ink-meta)} .lm-close{margin:0 0 12px;font-family:var(--label);font-size:11px;color:var(--ink-body)} .lm-watch{width:100%;height:30px;font-size:10px;border-color:var(--lp-rule);cursor:pointer} .lm-watch:hover,.lm-watch[aria-pressed="true"]{border-color:var(--navy);background:transparent;color:var(--navy)} .lp-track{display:flex;align-items:center;gap:14px;margin-top:28px} .lp-arrow{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:none;color:var(--navy);cursor:pointer} .lp-arrow svg{width:16px;height:16px} .lp-arrow:disabled{color:var(--silver);cursor:default} .lp-progress{flex:1;height:1px;background:var(--track)} .lp-progress span{display:block;height:1px;background:var(--track-active);transition:margin-left .2s linear} @media (max-width:1180px){ .lp-main{grid-template-columns:52px minmax(0,1fr) minmax(280px,340px)} .lp-lower{grid-template-columns:120px minmax(0,1fr) minmax(220px,280px)} .lp-rail{grid-auto-columns:calc(100% / 3.3)} } /* Phones and tablets: image first, thumbnails beneath, one column below */ @media (max-width:860px){ .lp-main{grid-template-columns:1fr;grid-template-areas:"stage" "thumbs" "info";row-gap:14px;padding-top:16px;padding-bottom:28px} .lp-thumbs{flex-direction:row;justify-content:center} .lp-thumb{width:48px;height:48px} .lp-thumbs.is-single{display:none} .lp-image{max-width:520px} .lp-info{padding-top:6px} .lp-title{font-size:19px} .lp-lower{grid-template-columns:minmax(0,1fr);row-gap:28px;padding-top:28px} .lp-index{display:none} .lp-aside{max-width:360px} .lp-more{grid-column:1;margin-top:28px} .lp-more-title{font-size:21px} .lp-rail{grid-auto-columns:46%;margin:0 calc(-1 * var(--g));padding:0 var(--g);scroll-padding-left:var(--g)} .lm{padding-right:14px;margin-right:14px} } @media (max-width:520px){ .lp-rail{grid-auto-columns:68%} .lp-more-head{flex-direction:column;align-items:flex-start;gap:10px} } /* Watch buttons (auction and lot pages): navy fill on hover, eased */ .lc-watch,.lm-watch,#lp-watch{transition:background-color var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease} @media (hover:hover){ .lc-acts .lc-watch:hover,.lm-watch:hover,.lp-acts #lp-watch:hover{background:var(--navy);border-color:var(--navy);color:var(--white)} } /* Cost calculator window */ .cc{width:min(400px,calc(100vw - 32px));padding:0;border:1px solid var(--lp-rule,#E6E1D9);background:var(--white);color:var(--charcoal)} .cc::backdrop{background:rgba(11,24,48,.32)} .cc-in{padding:26px 28px 28px} .cc-head{display:flex;justify-content:space-between;align-items:center;gap:16px} .cc-title{font-size:21px;line-height:1.2;color:var(--navy);margin:0} .cc-x{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:-6px;padding:0;border:0;background:none;color:var(--navy);cursor:pointer} .cc-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2} .cc-lot{margin:4px 0 20px;font-family:var(--label);font-size:10px;font-weight:500;letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-meta)} .cc-field{display:flex;flex-direction:column;gap:6px;font-family:var(--label);font-size:11px;color:var(--ink-meta)} .cc-input{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--rule);font-size:15px;color:var(--charcoal)} .cc-input:focus-within{border-bottom-color:var(--navy)} .cc-input input{flex:1;min-width:0;height:34px;border:0;padding:0;background:transparent;font-family:var(--label);font-size:15px;color:var(--charcoal)} .cc-input input:focus{outline:none} .cc-rows{margin:18px 0 0;font-family:var(--label);font-size:12.5px} .cc-rows div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--lp-rule,#E6E1D9)} .cc-rows dt{color:var(--ink-body)} .cc-rows dd{margin:0;color:var(--charcoal);white-space:nowrap} .cc-note{display:block;font-size:10.5px;color:var(--taupe)} .cc-total{border-bottom:0!important} .cc-total dt,.cc-total dd{color:var(--navy);font-weight:500} .cc-small{margin:12px 0 18px;font-family:var(--label);font-size:11px;line-height:1.55;color:var(--ink-meta)} .cc-small a{color:var(--navy)} .cc-done{width:100%;height:30px;font-size:10px;cursor:pointer} /* 19 RESULTS PAGE ------------------------------------------------------ */ /* The Auctions page system (section 16), unchanged in scale and spacing. Only the closed sale treatment differs: year menu, no chips, a CLOSED label on the photograph and a single View results button. */ .ab-bar--results{grid-template-columns:minmax(0,260px) minmax(0,300px) minmax(0,420px) 1fr} .ae-pic{position:relative} .ae-flag{position:absolute;top:10px;right:10px;padding:4px 8px;background:rgba(255,255,255,.92);font-family:var(--label);font-size:9.5px;font-weight:500;letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--navy);pointer-events:none} .ae-acts--single{grid-template-columns:1fr} .ab.is-list .ae-acts--single{grid-template-columns:minmax(0,170px)} @media (max-width:1100px){.ab-bar--results{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr) auto}} @media (max-width:860px){ .ab-bar.ab-bar--results{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"y c c" "s s v"} .ab-bar--results .ab-yr{grid-area:y} .ab.is-list .ae-acts--single{grid-template-columns:1fr} } /* 20 CLOSED AUCTION (RESULTS STATE) ------------------------------------- */ /* The Individual Auction and Lot pages for a sale with status "closed". Same components and proportions; only the closed treatment differs: no auction number, Closed, Share and Print stacked as in the results reference, five lots across on wide screens, and lot cards with the estimate and Closed only. Lot pages show no bidding figures. */ .au-page[data-status="closed"] .ap-sep{display:none} .au-page[data-status="closed"] .ap-closing{margin-bottom:14px} .au-page[data-status="closed"] .ap-tools{flex-direction:column;align-items:flex-start;gap:9px} .au-page[data-status="closed"] .ap-conditions{margin-top:18px} .au-page[data-status="closed"] .lc-close{margin:4px 0 0} @media (min-width:1181px){ .au-page[data-status="closed"]:not(.is-list) .ap-lots{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:28px} } .au-page.is-list[data-status="closed"] .lc-figs{display:block} .au-page.is-list[data-status="closed"] .lc-body{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} @media (max-width:1180px){.au-page.is-list[data-status="closed"] .lc-body{grid-template-columns:minmax(0,1fr)}} @media (max-width:860px){.au-page.is-list[data-status="closed"] .lc-close{margin-bottom:0}} .lot-page[data-status="closed"] .lp-figs{grid-template-columns:1fr} .lot-page[data-status="closed"] .lp-fig+.lp-fig{border-left:0;margin-left:0;padding-left:0} /* closed sale lot pages: no condition report column, Details runs to the More From edge */ @media (min-width:861px){.lp-sale-closed .lp-details{grid-column:2 / 4}} .lp-sale-closed .lp-closing{margin-bottom:0} .lp-sale-closed .lm-close{margin-bottom:0} /* 21 SELL PAGE ---------------------------------------------------------- */ /* /sell/: a free estimate banner, how it works in three steps, what we sell, questions, seller information and the London office. One centred column (narrower than the auction pages, as an editorial page), the site's Didot and Work Sans, navy and warm ivory. */ .sell-page{--sl-grey:var(--mist);--sl-rule:#E6E1D9} /* light grey: the site's alternate section colour */ .sell-page svg{fill:none;stroke:currentColor;stroke-width:1.2;flex:none} .sl-wrap{max-width:calc(1180px + 2 * var(--g));margin:0 auto;padding:0 var(--g)} .sl-h2{font-size:var(--fs-h2);line-height:1.2;color:var(--navy)} .sl-h3{font-size:22px;line-height:1.25;color:var(--navy)} /* Page title */ .sl-intro{padding-top:56px} .sl-title{font-size:clamp(30px,2.6vw,40px);line-height:1.15;color:var(--navy)} /* same scale as the Auctions and Results page titles */ .sell-page .pic.is-empty{background:var(--mist)} /* photograph not yet supplied */ /* 1 Banner: slim, full width, the whole band is the link */ .sl-banner{display:flex;align-items:center;justify-content:center;gap:18px;min-height:132px;padding:40px var(--g);background:var(--navy);color:var(--white);font-family:var(--label);font-size:clamp(16px,1.35vw,20px);font-weight:500;letter-spacing:.24em;line-height:1.3;text-align:center;text-transform:uppercase;text-decoration:none;transition:background var(--dur)} .sl-banner:hover{background:var(--velvet)} .sl-banner:hover .arr{transform:translateX(4px)} .sl-banner .arr{font-size:1.1em} .sl-banner:focus-visible{outline-offset:-6px;outline-color:var(--white)} /* 2 How it works */ .sl-how{padding-top:56px} .sl-sub{margin:8px 0 0;font-family:var(--label);font-size:13px;color:var(--ink-meta)} .sl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;margin:36px 0 0;padding:0} .sl-step{text-align:center} .sl-pic{aspect-ratio:3/2;margin-bottom:var(--sp-img)} .sl-step-title{font-size:18px;line-height:1.3;color:var(--navy);margin:0 0 8px} .sl-num{font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.04em;vertical-align:1px} .sl-step p{max-width:320px;margin:0 auto;font-family:var(--label);font-size:13px;line-height:1.65;color:var(--ink-body)} .sl-btn{min-width:300px} /* 3 More than six items */ .sl-more{max-width:620px;margin:56px auto 0;padding-top:32px;border-top:1px solid var(--sl-rule);text-align:center} .sl-more-h{font-size:18px;line-height:1.3;color:var(--navy);margin:0 0 8px} .sl-more p{margin:0;font-family:var(--label);font-size:13px;line-height:1.7;color:var(--ink-body)} .sl-more a{color:var(--navy);font-weight:500;text-underline-offset:3px;text-decoration-thickness:1px} /* 4 What we sell: text and photograph in one bordered card */ .sl-what{padding-top:var(--sec)} .sl-card{display:grid;grid-template-columns:1fr 1fr;min-height:400px;border:1px solid var(--sl-rule)} .sl-card-text{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px clamp(28px,4vw,56px);background:var(--white);text-align:center} .sl-list{list-style:none;margin:26px 0 0;padding:0;text-align:left} .sl-list li{position:relative;padding-left:20px;margin-bottom:12px;font-family:var(--label);font-size:14px;line-height:1.5;color:var(--ink-body)} .sl-list li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--navy)} .sl-list li:last-child{margin-bottom:0} .sl-card-pic{min-height:320px} /* 5 Questions: a quiet accordion */ .sl-faq{padding-top:var(--sec)} .sl-acc{max-width:850px;margin:0 auto} .sl-acc details{border-bottom:1px solid var(--sl-rule)} .sl-acc summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-family:var(--head);font-size:18px;line-height:1.35;color:var(--navy)} .sl-acc summary::-webkit-details-marker{display:none} .sl-acc summary svg{width:18px;height:18px;transition:transform var(--dur)} .sl-acc details[open] summary svg{transform:rotate(180deg)} .sl-acc summary:hover{color:var(--velvet)} .sl-acc summary:focus-visible{outline-offset:2px} .sl-acc details p{max-width:720px;margin:-6px 0 0;padding-bottom:24px;font-family:var(--label);font-size:13.5px;line-height:1.75;color:var(--ink-body)} /* 6 Important information: ivory panel and photograph */ .sl-info{padding-top:var(--sec);padding-bottom:var(--sec);scroll-margin-top:calc(var(--headh) + 24px)} .sl-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:300px} .sl-split-text{background:var(--sl-grey);display:flex;flex-direction:column;align-items:flex-start;padding:36px clamp(28px,4vw,48px)} .sl-split-text p{margin:10px 0 28px;font-family:var(--label);font-size:13.5px;color:var(--ink-body)} .sl-learn{margin-top:auto;height:40px;padding:0 22px} .sl-split-pic{min-height:260px} .sell-page .sl-split-pic.is-empty{background:var(--white);border:1px solid var(--sl-rule);border-left:0} /* white until the photograph arrives */ /* 8 Start your submission, always to hand */ /* flush to the bottom edge of the window while the page scrolls; it is the last part of the page content, so when the footer arrives it stops on the footer's top edge and never covers it (position: sticky) */ .sell-body{--sl-bar:60px} .sl-dock{position:sticky;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;height:var(--sl-bar);margin:0;padding:0 var(--g) env(safe-area-inset-bottom);background:rgba(255,255,255,.98);box-shadow:0 -1px 0 var(--sl-rule),0 -8px 22px rgba(11,24,48,.05)} .sl-dock .btn{height:40px} @media (max-width:860px){ .sl-how{padding-top:48px} .sl-steps{grid-template-columns:1fr;gap:36px;margin-top:28px} .sl-step p{max-width:420px} .sl-card,.sl-split{grid-template-columns:1fr;min-height:0} .sl-card-pic,.sl-split-pic{order:-1;aspect-ratio:3/2;min-height:0} .sl-card-text,.sl-split-text{padding:32px 24px 36px} .sell-page .sl-split-pic.is-empty{border-left:1px solid var(--sl-rule);border-bottom:0} .sl-intro{padding-top:40px} .sl-title{font-size:28px} .sl-banner{min-height:104px;padding:32px var(--g);gap:12px;font-size:15px;letter-spacing:.2em} .sl-how{padding-top:40px} .sl-learn{margin-top:0} .sl-acc summary{font-size:16.5px;padding:18px 0} } @media (max-width:520px){ .sell-body{--sl-bar:58px} .sl-btn{min-width:0;width:100%} } @media print{.sl-banner,.sl-dock{display:none!important}} /* 22 VALUATIONS PAGE ------------------------------------------------------ */ /* /valuations/: a private client and professional advisory page. White and light grey sections alternate; restrained Didot headings, Work Sans for reading text and labels, fine rules, no icons. */ .val-page{--va-rule:#E6E1D9} .val-page [hidden]{display:none!important} .val-page svg{fill:none;stroke:currentColor;stroke-width:1.2;flex:none} .va-wrap{max-width:calc(1180px + 2 * var(--g));margin:0 auto;padding:0 var(--g)} .va-sec{padding:var(--sec) 0} .va-grey{background:var(--mist)} .va-h2{font-size:var(--fs-h2);line-height:1.2;color:var(--navy);margin:0 0 22px} .va-center{text-align:center} .val-page p{font-family:var(--label);font-size:14px;line-height:1.8;color:var(--ink-body);margin:0 0 16px;max-width:620px} .va-center p{margin-left:auto;margin-right:auto} .va-note{color:var(--ink-meta)!important;font-size:13px!important} .va-btn{margin-top:16px;padding:0 30px} .va-link{margin-top:14px} .va-narrow{max-width:calc(760px + 2 * var(--g))} /* 1 Opening: text beside a residential photograph */ .va-open{padding-top:72px} .va-open-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center} .va-eyebrow{margin:0 0 14px!important;font-family:var(--label);font-size:var(--fs-meta)!important;font-weight:500;letter-spacing:var(--tr-ui);text-transform:uppercase;color:var(--ink-meta)!important} .va-title{font-size:clamp(30px,2.6vw,40px);line-height:1.15;color:var(--navy);margin:0 0 24px;max-width:560px} .val-page .va-lead{font-family:var(--text);font-size:18px;line-height:1.6;color:var(--charcoal)} .va-open-pic{aspect-ratio:4/5;max-height:620px;width:100%} .val-page .pic.is-empty{background:var(--mist)} /* photograph not yet supplied */ /* 2 Probate and estate: the five specialisms as a ruled list */ .va-two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start} .va-cats{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--va-rule)} .va-cats li{padding:16px 0;border-bottom:1px solid var(--va-rule);font-family:var(--head);font-size:21px;line-height:1.3;color:var(--navy)} /* 3 How the service works: three ruled columns, roman numerals */ .va-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);list-style:none;margin:20px 0 0;padding:0} .va-steps li{padding-top:22px;border-top:1px solid var(--navy)} .va-step-no{display:block;margin-bottom:14px;font-family:var(--head);font-size:15px;letter-spacing:.08em;color:var(--taupe)} .va-steps h3,.va-who h3{font-size:20px;line-height:1.3;color:var(--navy);margin:0 0 10px} .va-steps p,.va-who p{font-size:13.5px;margin:0} /* 5 From valuation to auction: photograph and text */ .va-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center} .va-split-pic{aspect-ratio:4/5;max-height:600px;width:100%} /* 6 Who we work with: three columns divided by fine rules */ .va-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px} .va-who>div{padding:4px clamp(20px,3vw,44px)} .va-who>div:first-child{padding-left:0} .va-who>div:last-child{padding-right:0} .va-who>div+div{border-left:1px solid var(--va-rule)} /* 7 Why an informed valuation matters: the Sell page questions */ .va-acc{max-width:850px;margin:10px auto 0;border-top:1px solid var(--va-rule)} .va-acc details{border-bottom:1px solid var(--va-rule)} .va-acc summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-family:var(--head);font-size:18px;line-height:1.35;color:var(--navy)} .va-acc summary::-webkit-details-marker{display:none} .va-acc summary svg{width:18px;height:18px;transition:transform var(--dur)} .va-acc details[open] summary svg{transform:rotate(180deg)} .va-acc summary:hover{color:var(--velvet)} .va-acc summary:focus-visible{outline-offset:2px} .val-page .va-acc details p{max-width:720px;margin:-6px 0 0;padding-bottom:24px;font-size:13.5px;line-height:1.75} /* 8 Request a valuation */ .va-request{scroll-margin-top:var(--headh)} /* Enquiry window */ .vf{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:1px solid var(--va-rule,#E6E1D9);background:var(--white);color:var(--charcoal)} .vf::backdrop{background:rgba(11,24,48,.32)} .vf [hidden]{display:none!important} .vf-in{padding:28px 32px 32px} .vf-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px} .vf-title{font-size:22px;line-height:1.2;color:var(--navy);margin:0} .vf-x{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:-6px;padding:0;border:0;background:none;color:var(--navy);cursor:pointer} .vf-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2} .vf-intro,.vf-done p{margin:0 0 20px;font-family:var(--label);font-size:13px;line-height:1.7;color:var(--ink-body)} .vf-field{display:flex;flex-direction:column;gap:4px;margin-bottom:18px;font-family:var(--label);font-size:11px;letter-spacing:.04em;color:var(--ink-meta)} .vf-field em{font-style:normal;color:var(--placeholder)} .vf-field input,.vf-field select,.vf-field textarea{width:100%;padding:6px 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;font-family:var(--label);font-size:14.5px;color:var(--charcoal);-webkit-appearance:none;appearance:none} .vf-field select{background:linear-gradient(45deg,transparent 50%,var(--navy) 50%) right 6px center/5px 5px no-repeat,linear-gradient(-45deg,transparent 50%,var(--navy) 50%) right 1px center/5px 5px no-repeat;padding-right:20px;cursor:pointer} .vf-field textarea{resize:vertical;min-height:84px;line-height:1.6} .vf-field input:focus,.vf-field select:focus,.vf-field textarea:focus{outline:none;border-bottom-color:var(--navy)} .vf-field [aria-invalid="true"]{border-bottom-color:#8a2b2b} .vf-error{min-height:0;margin:0 0 12px;font-family:var(--label);font-size:12px;color:#8a2b2b} .vf-error:empty{display:none} .vf-send{width:100%;cursor:pointer} .vf-done .btn{cursor:pointer} @media (max-width:860px){ .va-open{padding-top:40px} .va-open-grid,.va-two,.va-split{grid-template-columns:1fr} .va-open-pic{order:-1;aspect-ratio:3/2} .va-split-pic{aspect-ratio:3/2} .va-title{font-size:28px} .val-page .va-lead{font-size:16.5px} .va-steps{grid-template-columns:1fr;gap:32px} .va-who{grid-template-columns:1fr} .va-who>div{padding:22px 0!important;border-left:0!important;border-top:1px solid var(--va-rule)} .va-who>div:last-child{border-bottom:1px solid var(--va-rule)} .va-acc summary{font-size:16.5px;padding:18px 0} .va-cats li{font-size:19px;padding:14px 0} } @media (max-width:520px){ .va-btn{width:100%} .vf-in{padding:22px 20px 24px} } @media print{.vf{display:none!important}} /* 23 TOUCH SCREENS --------------------------------------------------------- */ /* Shared rules for every page on phones and tablets. Desktop is unaffected. 1 Hero height follows the visible screen (svh), not the browser's tallest viewport, so the slide text is never hidden behind Safari's toolbar. 2 Form fields are 16px: smaller text makes iOS zoom the page on focus, which leaves the layout enlarged and sideways scrollable. 3 Small arrows and markers keep their look but get a finger sized touch area. */ @supports (height:100svh){ .hero2 .stage{height:clamp(460px,min(52vw,calc(100svh - var(--headh) - 110px)),920px)} @media (max-width:860px){.hero2 .stage{height:min(118vw,calc(100svh - var(--headh) - 40px))}} .vf{max-height:calc(100svh - 32px)} } @media (pointer:coarse){ input,select,textarea,.hsearch input,.ap-search input,.ab-field select,.ab-field input,.vf-field input,.vf-field select,.vf-field textarea,.cc-input input{font-size:16px!important} .hero2 .dots label{height:33px;margin:-10px 0} .hero2 .dots label::after{top:16px} .hero2 .dots label::before{top:15px} .trk-btn{width:40px;height:40px;margin:-8px -10px} .lp-step a{width:40px;height:40px;margin:-9px} .lp-arrow{width:40px;height:40px;margin:-7px} a,button,label,summary,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation} } /* 24 ABOUT PAGE ------------------------------------------------------------- */ /* /about/: editorial hero with a navy title band, a narrow introduction, the About directory (six image cards), a navy stories band, You may also like, and quiet privacy and security notes. Image led, no boxes or shadows. */ .about-page [id]{scroll-margin-top:calc(var(--headh) + 24px)} .abt-hero-pic{position:relative;height:clamp(320px,44vw,760px);overflow:hidden;background:var(--navy)} .abt-hero-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} @media (min-width:1728px){.abt-hero-pic{height:44vw}} /* very wide screens: the frame keeps the photograph's proportions, so the rostrum stays in view */ .abt-hero-band{background:var(--navy);padding:46px var(--g) 50px;text-align:center} .abt-title{font-size:clamp(30px,2.8vw,42px);line-height:1.15;color:var(--white);margin:0} .abt-intro{max-width:calc(700px + 2 * var(--g));margin:0 auto;padding:var(--sec) var(--g) 72px} .abt-intro p{font-family:var(--text);font-size:18.5px;line-height:1.75;color:var(--charcoal);margin:0 0 24px} .abt-intro p:last-child{margin-bottom:0} .abt-dir{padding-bottom:var(--sec)} .abt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:56px} .abt-card{display:flex;flex-direction:column;text-decoration:none;color:inherit} .abt-pic{display:block;aspect-ratio:16/10;margin-bottom:var(--sp-img)} .abt-card:hover .abt-pic img{transform:scale(1.025)} .abt-card-title{font-family:var(--head);font-size:22px;line-height:1.25;color:var(--navy);margin-bottom:8px} .abt-card:hover .abt-card-title{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} .abt-card-text{font-family:var(--label);font-size:13.5px;line-height:1.7;color:var(--ink-body);max-width:420px} .abt-stories{background:var(--navy);padding:64px var(--g) 68px;text-align:center} .abt-stories-title{font-size:clamp(24px,2.2vw,32px);line-height:1.25;color:var(--white);margin:0 auto 28px;max-width:760px} .abt-stories-btn{border-color:rgba(255,255,255,.7);color:var(--white);background:transparent} .abt-stories-btn:hover{background:var(--white);border-color:var(--white);color:var(--navy)} .abt-more{padding:var(--sec) 0} .abt-h2{font-size:var(--fs-h2);line-height:1.2;color:var(--navy);margin:0 0 var(--head-gap)} .abt-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)} .abt-feat{display:flex;flex-direction:column} .abt-feat-pic{display:block;aspect-ratio:16/10;margin-bottom:28px} .abt-feat-pic:hover img{transform:scale(1.025)} .abt-kicker{font-family:var(--label);font-size:var(--fs-meta);font-weight:500;letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-meta);margin:0 0 12px} .abt-feat-title{font-size:clamp(24px,2vw,30px);line-height:1.2;color:var(--navy);margin:0 0 14px} .abt-feat-title a{color:inherit;text-decoration:none} .abt-feat-title a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} .abt-feat-text{font-family:var(--label);font-size:14px;line-height:1.75;color:var(--ink-body);margin:0 0 var(--sp-cta);max-width:440px} .abt-feat-btn{align-self:flex-start;margin-top:auto} .abt-legal{background:var(--mist);padding:56px 0 60px} .abt-legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)} .abt-legal-h{font-size:19px;line-height:1.3;color:var(--navy);margin:0 0 10px} .abt-legal p{font-family:var(--label);font-size:13px;line-height:1.7;color:var(--ink-meta);margin:0;max-width:460px} @media (max-width:1000px){.abt-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}} @media (max-width:860px){ .abt-hero-pic{height:auto;aspect-ratio:4/3} .abt-hero-band{padding:30px var(--g) 34px} .abt-title{font-size:28px} .abt-intro{padding-top:48px;padding-bottom:48px} .abt-intro p{font-size:17px;line-height:1.7;margin-bottom:20px} .abt-more-grid{grid-template-columns:1fr;gap:48px} .abt-feat-pic{margin-bottom:22px} .abt-stories{padding:48px var(--g) 52px} .abt-stories-title{font-size:23px} .abt-legal-grid{grid-template-columns:1fr;gap:28px} .abt-legal{padding:44px 0 48px} } @media (max-width:560px){ .abt-grid{grid-template-columns:1fr;row-gap:40px} .abt-card-title{font-size:21px} } /* 25 FAQ PAGE --------------------------------------------------------------- */ /* /faq/: a banner and the title, then categories of questions in two columns (one on phones). Fine rules, a small chevron and no boxes. Answers open with a short height animation (js/faq-page.js). */ .faq-page svg{fill:none;stroke:currentColor;stroke-width:1.2;flex:none} .faq-page [id]{scroll-margin-top:calc(var(--headh) + 24px)} .fq-hero{position:relative;height:clamp(240px,34vw,580px);overflow:hidden;background:var(--navy)} .fq-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .fq-intro{background:var(--mist);padding:56px 0 60px} .fq-title{font-size:clamp(30px,2.8vw,42px);line-height:1.15;color:var(--navy);text-align:center;margin:0} .fq-cat{padding-top:72px} .fq-cat:last-of-type{padding-bottom:16px} .fq-h2{font-size:var(--fs-h2);line-height:1.2;color:var(--navy);margin:0 0 26px} .fq-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,56px);align-items:start} .fq-item{border-bottom:1px solid #E6E1D9} .fq-item summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:58px;padding:16px 0;cursor:pointer;list-style:none;font-family:var(--label);font-size:15px;font-weight:500;line-height:1.45;color:var(--charcoal);transition:color var(--dur)} .fq-item summary::-webkit-details-marker{display:none} .fq-item summary:hover{color:var(--navy)} .fq-item summary:focus-visible{outline-offset:2px} .fq-item summary svg{width:16px;height:16px;color:var(--navy);transition:transform .3s ease} .fq-item[open]:not(.is-moving) summary svg,.fq-item.is-open summary svg{transform:rotate(180deg)} .fq-a{overflow:hidden;transition:height .32s ease} .fq-a p{max-width:620px;margin:0;padding:0 28px 20px 0;font-family:var(--label);font-size:14px;line-height:1.75;color:var(--ink-body)} .fq-a a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px} .fq-help{padding:var(--sec) 0} .fq-help-list{display:grid;gap:36px} .fq-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:440px} .fq-panel-text{display:flex;flex-direction:column;align-items:flex-start;padding:36px clamp(28px,3.5vw,48px);background:var(--mist)} .fq-panel-h{font-size:24px;line-height:1.25;color:var(--navy);margin:0 0 10px} .fq-panel-text p{font-family:var(--label);font-size:14px;line-height:1.7;color:var(--ink-body);margin:0 0 28px;max-width:440px} .fq-panel-btn{margin-top:auto;height:40px;padding:0 22px} .fq-panel-pic{min-height:260px} @media (max-width:860px){ .fq-hero{height:auto;aspect-ratio:16/9} .fq-intro{padding:40px 0 44px} .fq-title{font-size:28px} .fq-cat{padding-top:52px} .fq-cols{grid-template-columns:1fr} .fq-item summary{font-size:14.5px} .fq-panel{grid-template-columns:1fr;min-height:0} .fq-panel-pic{order:-1;aspect-ratio:3/2;min-height:0} .fq-panel-text{padding:28px 22px 32px} .fq-panel-btn{margin-top:0} } @media print{.fq-a{height:auto!important}}