/* Visually hidden but still in the DOM/readable by search engines and screen readers — for copy we want indexed for SEO without showing on screen (the standard "sr-only" clip pattern, not display:none, which some crawlers/AT treat as truly absent). */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @font-face { font-family:'Archivo'; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/archivo-variable.woff2) format('woff2'); } @font-face { font-family:'Fraunces'; font-style:normal; font-weight:300 900; font-display:swap; src:url(fonts/fraunces-normal.woff2) format('woff2'); } @font-face { font-family:'Fraunces'; font-style:italic; font-weight:300 900; font-display:swap; src:url(fonts/fraunces-italic.woff2) format('woff2'); } :root{ --serif: Georgia, 'Times New Roman', Times, serif; --bg:#FFFFFF; --bg-elevated:#FFFFFF; --bg-sunken:#F5F4F1; --ink:#1C1B19; --ink-soft:#6E6A63; --ink-faint:#6B6558; --accent-text:#85652F; --accent:#B08D57; --accent-ink:#1C1B19; --accent-soft:#F0E6D2; --sage:#5B6B4F; --sage-soft:#E7EAE0; --rose:#8E4A40; --rose-soft:#F3E1DC; --line:rgba(28,27,25,0.12); --shadow:rgba(28,27,25,0.16); --card-1:#F7F5F1; --card-2:#F3EFE9; --card-3:#F1F2ED; --card-4:#F6EFEB; --wrap-pad: 28px; /* Spacing scale (px), used across the collection page and section rhythm — see .section-top / .eyebrow--tight for the class-based consumers. */ --space-1:8px; --space-2:14px; --space-3:24px; --space-4:32px; --space-5:48px; /* Section-level tokens: --space-6 is the standard section padding; --space-7 is the deliberately larger "brand moment" padding for .band (dark full-bleed sections) — kept as its own token rather than a bare 88px so it's still traceable to the scale instead of an independently eyeballed number. */ --space-6:70px; --space-7:88px; /* Brand-moment bar (header + .band) — derived from the current theme's own surface tokens (--ink here) rather than a fixed independent near-black, so it reads as part of the same palette instead of an unrelated black block. Dark theme below overrides this to an elevated surface tone so the bar blends into the dark page instead of sitting as an extra-dark slab. */ --band-bg:var(--ink); --band-ink:#F5F1E8; --band-ink-soft:rgba(245,241,232,.72); color-scheme: light; } /* Dark theme: manual toggle only (button in header), default is always light regardless of OS preference — set via [data-theme="dark"] on , not a prefers-color-scheme media query. Tight 2-tone surface system (--bg / --bg-elevated, plus --bg-sunken a touch darker) instead of many near-random near-blacks — every dark-mode surface derives from these three. Body also carries the same soft gold-radial + dot-grain texture as the band sections (see body::before/::after below) so the whole page reads as one consistent dark treatment, not an isolated effect on one block. */ :root[data-theme="dark"]{ --bg:#121316; --bg-elevated:#1A1B1E; --bg-sunken:#0C0D0F; --ink:#EDEDEE; --ink-soft:#A7A8AC; --ink-faint:#83858B; --accent-text:var(--accent); --accent:#C9A365; --accent-ink:#121316; --accent-soft:#332C1E; --sage:#8CA07A; --sage-soft:#20261C; --rose:#C4796C; --rose-soft:#2E211E; --line:rgba(237,237,238,0.12); --shadow:rgba(0,0,0,0.5); --card-1:#1A1B1E; --card-2:#1A1B1E; --card-3:#1A1B1E; --card-4:#1A1B1E; /* --ink is near-white in dark mode, so the band can't reuse it like the light theme does — use the elevated surface instead, matching the dark theme's own card/panel tone so the bar reads as "this page, dark" not a foreign block. */ --band-bg:var(--bg-elevated); color-scheme: dark; } *{box-sizing:border-box} html{background:var(--bg)} body{margin:0;background:var(--bg);color:var(--ink);font-family:'Archivo',-apple-system,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;position:relative} /* Same radial-gold-glow + dot-grain texture used in .band, applied once to the whole page background in dark mode so every section shares it instead of it looking like a one-off effect. Fixed + behind everything (z-index:-1) so it reads through the page consistently as you scroll, not tiled per-section. */ :root[data-theme="dark"] body::before{ content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background: radial-gradient(circle at 12% 8%, rgba(201,163,101,.10), transparent 40%), radial-gradient(circle at 88% 92%, rgba(201,163,101,.08), transparent 42%); } :root[data-theme="dark"] body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05; background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);background-size:26px 26px; } /* Light-mode equivalent — same texture family, just much softer so it stays elegant on white instead of muddying it. Keeps light/dark reading as one consistent system rather than two unrelated designs. */ :root:not([data-theme="dark"]) body::before{ content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background: radial-gradient(circle at 12% 8%, rgba(176,141,87,.07), transparent 40%), radial-gradient(circle at 88% 92%, rgba(176,141,87,.05), transparent 42%); } :root:not([data-theme="dark"]) body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035; background-image:radial-gradient(rgba(28,27,25,.9) 1px, transparent 1px);background-size:26px 26px; } a{color:inherit;text-decoration:none} /* Plain inline links inside flowing text (paragraphs, list items) need an underline to read as links at all. :not([class]) scopes this to bare mentions specifically — a styled CTA like .btn-ghost or .team-link sitting inside a

already reads as clickable on its own and shouldn't get an underline on top of its own styling. */ p a:not([class]), li a:not([class]){text-decoration:underline;text-underline-offset:2px} img,svg{display:block;max-width:100%} .wrap{max-width:1440px;margin:0 auto;padding:0 var(--wrap-pad);width:100%} header.site{ --hdr-bg:var(--band-bg); --hdr-elevated:#17181A; --hdr-ink:#F5F1E8; --hdr-ink-soft:rgba(245,241,232,.68); --hdr-ink-faint:rgba(245,241,232,.45); --hdr-line:rgba(245,241,232,.16); --hdr-shadow:rgba(0,0,0,.5); position:sticky;top:0;z-index:40;background:var(--hdr-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--hdr-line);overflow:hidden} /* Same radial-gold-glow + dot-grain texture as .band and footer, not a flat fill — header/band/footer are one dark "brand moment" family, so they share the same texture, not just the same base color. */ header.site::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background: radial-gradient(circle at 15% 20%, rgba(176,141,87,.14), transparent 42%), radial-gradient(circle at 85% 85%, rgba(176,141,87,.09), transparent 45%)} header.site::after{content:'';position:absolute;inset:0;z-index:0;opacity:.06;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);background-size:26px 26px} header.site>*{position:relative;z-index:1} /* Grid, not flex+space-between: the wordmark and navbtns columns are different widths (logo vs. search+CTA+burger), so a flex space-between visibly drags the middle nav.links block off true center. Grid with an explicit 1fr middle column keeps links centered on the bar regardless of the side columns' widths. */ .nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px} .wordmark{display:flex;align-items:center;flex-shrink:0} .logo-header{height:56px;width:auto;flex-shrink:0} nav.links{display:flex;justify-content:center;align-items:center;gap:28px;font-size:.94rem;min-width:0} nav.links a{color:var(--hdr-ink-soft);font-weight:600;white-space:nowrap} nav.links a:hover{color:var(--hdr-ink)} .navbtns{flex-shrink:0;display:flex;align-items:center;justify-self:end;gap:10px} /* Header CTA reuses .btn-primary (the site's one primary-button style) with a compact size modifier for the nav bar, instead of a second parallel button definition (.cta-pill) that drifted out of sync with it. */ .btn-primary--nav{font-size:.84rem;padding:10px 18px;white-space:nowrap} .btn-primary--nav:hover{transform:translateY(-1px);box-shadow:0 8px 16px -8px var(--hdr-shadow)} /* Category quick-nav strip, sitewide below the header (Saks/Macy's pattern: thin bordered bar, uppercase letter-spaced links, horizontally scrollable on narrow screens). Sticky itself, pinned right under the header — see --hdr-h below, set by JS from the header's real measured height so it can't drift out of sync the way a hardcoded pixel offset does whenever the header's content changes. */ .category-nav{position:sticky;top:var(--hdr-h,90px);z-index:30;background:var(--bg);border-bottom:1px solid var(--line)} .category-nav-inner{display:flex;gap:26px;overflow-x:auto;padding:13px var(--wrap-pad);scrollbar-width:none} .category-nav-inner::-webkit-scrollbar{display:none} .category-nav a{font-size:.76rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;flex-shrink:0} .category-nav a:hover{color:var(--ink)} .category-nav a:first-child{color:var(--ink)} /* Breadcrumb — small gray trail above page titles (Saks/Aesop pattern). */ .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-faint);margin:0 0 16px} .breadcrumb a{color:var(--ink-faint)} .breadcrumb a:hover{color:var(--ink)} .breadcrumb span{color:var(--ink-soft)} .crumb-sep{color:var(--ink-faint)} /* Light/dark toggle — pill switch with a sliding sun/moon knob (Aviasales-style), not a plain icon button, so the current state reads at a glance. Track uses the fixed --hdr-* header tokens (always dark chrome) rather than --bg/--ink, since the header itself never changes with the toggle it controls. */ .theme-toggle{display:flex;align-items:center;justify-content:flex-start;width:52px;height:30px;padding:3px;border:1px solid var(--hdr-line);border-radius:100px;background:var(--hdr-bg);cursor:pointer;flex-shrink:0;transition:background .2s} .theme-toggle-knob{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--hdr-bg);transition:transform .25s cubic-bezier(.4,0,.2,1);flex-shrink:0} .theme-toggle-knob svg{width:13px;height:13px} .theme-toggle-knob .icon-moon{display:none} :root[data-theme="dark"] .theme-toggle-knob{transform:translateX(22px)} :root[data-theme="dark"] .theme-toggle-knob .icon-sun{display:none} :root[data-theme="dark"] .theme-toggle-knob .icon-moon{display:block} .icon-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--hdr-line);border-radius:10px;background:var(--hdr-elevated);color:var(--hdr-ink-soft);cursor:pointer;flex-shrink:0} .icon-btn:hover{color:var(--hdr-ink);border-color:var(--hdr-ink-faint)} .icon-btn svg{width:17px;height:17px} .nav-search-wrap{position:relative} .nav-search-panel{display:none;position:absolute;top:calc(100% + 10px);right:0;width:280px;background:var(--hdr-elevated);border:1px solid var(--hdr-line);border-radius:14px;padding:10px;box-shadow:0 20px 40px -20px var(--hdr-shadow);z-index:50} .nav-search-panel.open{display:block} .nav-search-panel .search-input{width:100%;background:var(--hdr-bg);border-color:var(--hdr-line);color:var(--hdr-ink)} .suggest-list{margin-top:8px;max-height:320px;overflow-y:auto;border-radius:10px} .suggest-list:not(:empty){border:1px solid var(--hdr-line);background:var(--hdr-elevated)} .suggest-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;font-size:.86rem;color:var(--hdr-ink);border-bottom:1px solid var(--hdr-line)} .suggest-item:last-child{border-bottom:none} .suggest-item:hover{background:var(--hdr-bg)} .suggest-cat{font-size:.7rem;color:var(--hdr-ink-faint);white-space:nowrap} .mobile-search{margin:14px 0 6px} .mobile-search form{display:flex;align-items:center;gap:8px;padding:0 var(--wrap-pad)} .mobile-search svg{width:16px;height:16px;color:var(--hdr-ink-faint);flex-shrink:0} .mobile-search .search-input{flex:1;background:var(--hdr-bg);border-color:var(--hdr-line);color:var(--hdr-ink)} .mobile-search .suggest-list{margin:8px var(--wrap-pad) 0} .menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;padding:0;border:1px solid var(--hdr-line);border-radius:10px;background:var(--hdr-elevated);cursor:pointer;flex-shrink:0} .menu-toggle span{display:block;width:16px;height:2px;background:var(--hdr-ink);margin:0 auto;transition:transform .2s,opacity .2s} .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{display:none} .mobile-menu-theme{display:flex;padding:14px var(--wrap-pad) 0} .hero{padding:36px 0 36px;background:var(--bg);position:relative;z-index:0;overflow-x:hidden} .hero-grid{display:flex;flex-direction:column;align-items:center;text-align:center} .hero-grid > h1.hero-h{max-width:20ch;margin-top:36px} .hero-grid > .hero-sub{max-width:52ch;margin:0 0 30px} .hero-grid > .hero-actions{justify-content:center;margin-bottom:0;width:100%;max-width:480px} .eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);display:flex;align-items:center;gap:10px;margin-bottom:22px} .eyebrow--tight{margin-bottom:var(--space-2)} /* Repeated section-opener spacer (was a duplicated inline style="padding-top:32px" on ~9

tags in build_site.py) — one class, one place to change it. */ .section-top{padding-top:var(--space-4)} /* Spacing utility classes — replace one-off inline style="margin-top:...px" in build_site.py, so every gap is traceable to --space-* instead of an independently chosen pixel value per call site. */ .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .pt-5{padding-top:var(--space-5)} h1.hero-h{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.12;letter-spacing:-.005em;margin:0 0 24px} .hero-sub{font-size:1.08rem;color:var(--ink-soft);max-width:46ch;margin:0 0 34px} .hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap} .hero-search{position:relative;width:100%;max-width:480px} .hero-search-form{display:flex;align-items:center;gap:10px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:100px;padding:6px 6px 6px 20px} .hero-search-form svg{width:18px;height:18px;color:var(--ink-faint);flex-shrink:0} .hero-search-input{flex:1;border:none;background:none;font-family:'Archivo',sans-serif;font-size:.92rem;padding:10px 0;color:var(--ink)} .hero-search-input:focus{outline:none} .hero-search-form .btn-primary{padding:11px 22px;font-size:.86rem;flex-shrink:0} .suggest-list--hero{position:absolute;top:calc(100% + 8px);left:0;right:0} .btn-primary{font-weight:600;font-size:.96rem;background:var(--accent);color:var(--accent-ink);padding:15px 28px;border-radius:100px;display:inline-block;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s} .btn-primary:disabled{opacity:.4;cursor:not-allowed} .form-success-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .35s ease;text-align:center;padding:20px;border-radius:14px;z-index:5} .form-success-overlay.show{opacity:1;pointer-events:auto} .form-success-overlay svg{width:52px;height:52px;flex-shrink:0} .form-success-overlay circle{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset .5s ease .1s} .form-success-overlay path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .35s ease .5s} .form-success-overlay.show circle{stroke-dashoffset:0} .form-success-overlay.show path{stroke-dashoffset:0} .form-success-overlay p{font-family:var(--serif);font-size:1.05rem;color:var(--ink);max-width:32ch;margin:0} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px var(--shadow)} .btn-ghost{font-weight:600;font-size:.96rem;color:var(--ink);padding:15px 6px;border-bottom:1px solid var(--ink);background:none;cursor:pointer;display:inline-block;transition:opacity .15s} .btn-ghost:hover{opacity:.65} /* Hero marquee — a single continuous full-bleed drift of item photos, no arrows, no snap, no JS. The track is two identical copies of the slide set; a linear translateX(0 -> -50%) runs forever, and at -50% copy 2 is pixel-for-pixel where copy 1 began, so the loop seam is invisible by construction (nothing to reset). Each slide carries its gap as margin-right so -50% stays exact. Edge-to-edge (100vw breakout from the centered .wrap) with a soft mask fade at both ends. A slow JS-driven auto scroll (see the [data-hero-carousel] wiring in footer()'s script) replaces the old pure-CSS transform loop, because a real scroll container is what gives us both native touch swipe on mobile and arrow-button nudging on desktop for free — a transform-only strip can't be dragged/swiped. Pauses on hover/touch; frozen entirely under prefers-reduced-motion. */ .hero-marquee{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:44px;position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} /* width:max-content here was the earlier bug: it let the track's own box grow to fit BOTH slide copies, so it was never actually wider than its own scrollport and there was nothing to scroll — the "carousel" just sat still. The track has to stay boxed to its parent's width (100%) so the flex children overflow it and overflow-x:auto has something to do. */ .hero-marquee-track{display:flex;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch} .hero-marquee-track::-webkit-scrollbar{display:none} .hero-slide{flex:0 0 auto;width:clamp(190px,20vw,300px);aspect-ratio:4/5;margin-right:16px;border-radius:16px;overflow:hidden;position:relative;background:var(--card-1);box-shadow:0 20px 40px -24px var(--shadow)} .hero-slide img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block;transition:transform .4s ease} .hero-slide:hover img{transform:scale(1.04)} /* Plain arrow glyphs, no button chrome (no circle, no blur, no shadow) — big enough to read as a real control, colored to sit quietly against the slides until hovered. */ .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:56px;height:56px;border:none;background:none;display:flex;align-items:center;justify-content:center;padding:0;color:#fff;cursor:pointer;opacity:0;transition:opacity .15s ease} .hero-arrow svg{width:100%;height:100%} .hero-marquee:hover .hero-arrow,.hero-arrow:focus-visible{opacity:.9} .hero-arrow:hover{opacity:1} .hero-arrow--prev{left:4px} .hero-arrow--next{right:4px} @media (max-width:900px){.hero-arrow{display:none}} @media (prefers-reduced-motion:reduce){.hero-marquee-track{scroll-behavior:auto}} section{padding:var(--space-6) 0} #how{padding-top:40px;background:var(--bg-sunken)} #shop-preview{background:var(--bg)} #request{background:var(--accent-soft)} .section-head{margin-bottom:40px} .section-head-row{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap} .section-head-copy{flex:1;min-width:280px} .section-head-row .btn-primary{flex-shrink:0} h2.section-h,h1.section-h{font-family:var(--serif);font-weight:700;font-size:clamp(1.55rem,2.8vw,2.1rem);margin:0;max-width:24ch} .section-desc{color:var(--ink-soft);max-width:58ch;margin:12px 0 0;font-size:.98rem} .section-head--center{text-align:center;max-width:520px;margin-left:auto;margin-right:auto} .section-head--center .section-desc{margin-left:auto;margin-right:auto} h2.section-h--sm{font-size:clamp(1.25rem,2vw,1.55rem)} .shop-preview-cta{text-align:center;margin-top:40px} .btn-large{font-size:1.05rem;padding:19px 38px} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden} .step{background:var(--bg-elevated);padding:var(--space-3)} .step .num{font-family:var(--serif);font-style:italic;color:var(--accent-text);font-size:1.05rem;margin-bottom:16px;display:block} .step h3{font-family:var(--serif);font-weight:700;font-size:1.1rem;margin:0 0 8px} .step p{font-size:.88rem;color:var(--ink-soft);margin:0} /* Desktop: persistent sidebar (ecom-catalog convention, e.g. Gymshark PLPs) — filters stay visible, not tucked behind a button. Mobile switches to a collapsible drawer, see @media below. */ .collection-layout{display:grid;grid-template-columns:240px 1fr;gap:0;align-items:start;border-top:1px solid var(--line)} .collection-main{min-width:0;padding-left:40px} /* Spacing scale used consistently across the collection page (px): 8 / 14 / 24 / 32 / 48 */ /* Zone 1: toolbar strip — search + result count, sticky under the header on scroll (Gymshark-style), visually separated from the grid below by a rule. */ .collection-toolbar{position:sticky;top:var(--sticky-top,136px);z-index:20;display:flex;align-items:center;gap:16px;padding:24px 0 18px;background:var(--bg);border-bottom:1px solid var(--line)} .search-row{display:flex;gap:12px;flex:1} /* Search icon inside the field (not just a bare placeholder) so the search box reads as "search" at a glance instead of blending into the other plain-text controls in the toolbar. */ .search-input-wrap{position:relative;flex:1;max-width:420px} .search-input-wrap svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-faint);pointer-events:none} .search-input-wrap .search-input{padding-left:40px} .search-input{width:100%;font-family:'Archivo',sans-serif;font-size:.92rem;padding:13px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg-elevated);color:var(--ink)} .search-input:focus{outline:2px solid var(--accent);outline-offset:1px} .filter-toggle{display:none;font-size:.86rem;font-weight:600;padding:0 20px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--bg-elevated);color:var(--ink);cursor:pointer;white-space:nowrap} .results-count{font-size:.82rem;color:var(--ink-faint);margin:0;flex-shrink:0;white-space:nowrap} .sort-row{display:flex;align-items:center;gap:8px;flex-shrink:0} .sort-label{font-size:.78rem;color:var(--ink-faint);white-space:nowrap} .sort-select{font-family:'Archivo',sans-serif;font-size:.82rem;font-weight:600;color:var(--ink);background:var(--bg-elevated);border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer} /* Zone 2: filter panel — bordered/padded so it reads as its own column, not loose controls floating next to the grid. */ .filter-sidebar{position:sticky;top:var(--sticky-top,136px);padding:var(--space-3) var(--space-4) var(--space-3) 0;border-right:1px solid var(--line);min-height:calc(100vh - 200px)} .filter-sidebar-head{display:flex;align-items:center;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)} .filter-sidebar-title{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)} .filter-close{display:none} .filter-sidebar-foot{display:none} body.no-scroll{overflow:hidden} /* Zone 3: grid — gets its own top padding so it doesn't run straight into the toolbar rule. */ #grid{padding-top:32px} .filter-group{border:none;margin-bottom:4px;border-bottom:1px solid var(--line);padding-bottom:14px} .filter-group:last-of-type{border-bottom:none} .filter-group + .filter-group{margin-top:14px} .filter-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;-webkit-tap-highlight-color:transparent} .filter-label::-webkit-details-marker{display:none} .filter-label::after{content:'+';font-size:.95rem;font-weight:400;color:var(--ink-faint);transition:transform .15s} .filter-group[open] > .filter-label::after{content:'\2212'} .filter-row{display:flex;flex-wrap:wrap;gap:8px} .filter-sidebar .filter-row{flex-direction:column;align-items:stretch} .tag-chip{font-size:.82rem;font-weight:600;padding:8px 16px;border-radius:100px;border:1px solid var(--line);background:var(--bg-elevated);color:var(--ink-soft);cursor:pointer;text-align:left} .filter-sidebar .tag-chip{border-radius:9px;display:flex;align-items:center;justify-content:space-between;gap:8px} .tag-chip:hover{border-color:var(--ink-faint);color:var(--ink)} .tag-chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink)} .tag-chip .count{color:var(--ink-faint);font-weight:500;margin-left:4px} .tag-chip.active .count{color:rgba(255,255,255,.6)} .filter-row--multi .tag-chip.active{background:var(--accent);border-color:var(--accent)} .filter-row--multi .tag-chip.active .count{color:rgba(28,27,25,.55)} .tag-chip.is-empty{opacity:.4;pointer-events:none} .active-filters[hidden]{display:none} .active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:24px 0 18px;padding:14px 16px;background:var(--bg-sunken);border-radius:14px} .active-filters-list{display:flex;flex-wrap:wrap;gap:8px;flex:1} .active-chip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;padding:6px 8px 6px 14px;border-radius:100px;background:var(--bg-elevated);border:1px solid var(--line);color:var(--ink);cursor:pointer} .active-chip .x{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--bg-sunken);font-size:.9rem;line-height:1} .active-chip:hover{border-color:var(--ink-faint)} .clear-all{font-size:.8rem;font-weight:600;color:var(--ink-soft);background:none;border:none;cursor:pointer;text-decoration:underline;flex-shrink:0} .clear-all:hover{color:var(--ink)} /* Card is one bounded surface (per feedback, 2026-09-22): photo, name and the "Request to rent" CTA all live inside a single bordered tile instead of reading as three stacked, independently-spaced pieces. Grid defaults to align-items:stretch, so every in a row is forced to the same height — combined with .card-cta{margin-top:auto} below, this keeps the CTA at the same baseline across a row even when titles wrap differently. */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px} .card{background:var(--card-1);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:none;flex-direction:column;transition:box-shadow .2s ease,border-color .2s ease} .card.show{display:flex} .card:hover{box-shadow:0 18px 34px -18px var(--shadow);border-color:var(--ink-faint)} .card-media{aspect-ratio:4/5;position:relative;display:flex;align-items:center;justify-content:center;background:var(--card-2);overflow:hidden;border-radius:0} .card-media.has-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;transition:transform .5s ease} .card:hover .card-media.has-photo img{transform:scale(1.04)} .card-media svg{width:42%;height:42%;color:var(--ink-soft)} .card-tag-overlay{position:absolute;top:12px;left:12px;z-index:2;font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.42);backdrop-filter:blur(8px) saturate(1.4);-webkit-backdrop-filter:blur(8px) saturate(1.4);color:#fff} .card-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1} /* min-height reserves room for 2 lines always, whether a name wraps or not \\u2014 keeps every card's title block the same height instead of the CTA landing at a different spot depending on how long the name happens to be. */ .card-body h3{font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.3;min-height:2.6em;margin:0;letter-spacing:.005em} .card-dim{font-size:.78rem;color:var(--ink-faint);margin:4px 0 0} /* Contained pill, not a line divided off by a border-top — the CTA reads as part of the same card surface, not a separate footer strip. */ /* Fixed margin-top, not margin-top:auto: auto collapsed to ~0 on cards whose name wraps to two lines (grid row-stretch left them less slack), so the CTA sat flush against the title with no breathing room on those cards specifically \\u2014 a fixed gap is consistent across every card regardless of title length, at the cost of the CTA no longer sharing one exact baseline across a row. Also shrunk the pill's own padding so it reads as a smaller in-card control, not a full-width button. */ .card-cta{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;box-sizing:border-box;font-size:.78rem;font-weight:600;color:var(--ink);margin-top:12px;padding:8px 14px;border-radius:100px;background:var(--bg-elevated);border:1px solid var(--line);transition:background .15s ease,border-color .15s ease} .card-cta svg{width:12px;height:12px;transition:transform .15s ease} .card:hover .card-cta{background:var(--ink);color:var(--bg);border-color:var(--ink)} .card:hover .card-cta svg{transform:translateX(3px)} .mini-tag{font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 9px;border-radius:100px} .t-gold{background:var(--accent-soft);color:#7A6537} .t-sage{background:var(--sage-soft);color:var(--sage)} .t-rose{background:var(--rose-soft);color:var(--rose)} .empty-state{display:none;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:50px 20px;color:var(--ink-faint)} .empty-state.show{display:flex} .empty-state p{margin:0;font-size:.98rem} .back-link{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--ink-soft);margin-bottom:28px} .back-link:hover{color:var(--ink)} .item-detail{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start} .item-media{aspect-ratio:1/1;border-radius:20px;position:relative;display:flex;align-items:center;justify-content:center;background:var(--card-1);overflow:hidden;cursor:zoom-in} .item-media.has-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain} .item-media svg{width:34%;height:34%;color:var(--ink-soft)} .item-media .placeholder-tag{position:absolute;top:14px;left:14px;font-size:.64rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:rgba(28,27,25,.82);color:#fff;padding:6px 11px;border-radius:100px;max-width:calc(100% - 28px)} .item-media .zoom-hint{position:absolute;bottom:14px;right:14px;display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:#fff;background:rgba(28,27,25,.72);padding:6px 12px;border-radius:100px;pointer-events:none;opacity:0;transition:opacity .15s} .item-media:hover .zoom-hint{opacity:1} .item-media .zoom-hint svg{width:14px;height:14px} .gallery-thumbs{display:flex;gap:10px;margin-top:12px} .gallery-thumb{width:64px;height:64px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:var(--card-1);flex-shrink:0} .gallery-thumb.active{border-color:var(--accent)} .gallery-thumb img{width:100%;height:100%;object-fit:contain} /* Blurred continuation of the image itself as the letterbox fill — instead of a flat color that reads as empty space (black in dark mode, white in light), the backdrop is the photo's own color bleeding outward. Works identically in both themes since it's derived from the image, not a theme token. */ .media-bg-blur{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(24px) saturate(1.15) brightness(.92);transform:scale(1.1);z-index:0} /* Fullscreen gallery viewer is GLightbox (assets/vendor/glightbox/) — styled by its own stylesheet, not here. Don't reintroduce custom .lightbox rules; see build_site.py gallery_html() for the wiring. */ .item-info .item-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px} .item-info h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.15rem);margin:0 0 14px} .item-info .lead{font-size:1rem;color:var(--ink-soft);margin:0 0 26px} .item-info .lead p{margin:0 0 12px} .item-info .lead p:last-child{margin-bottom:0} .item-specs{display:flex;flex-direction:column;gap:12px;margin-bottom:8px;padding:20px 22px;background:var(--bg-sunken);border-radius:14px} .item-specs .spec{display:flex;justify-content:space-between;font-size:.88rem;gap:20px} .item-specs .spec dt{color:var(--ink-faint);margin:0} .item-specs .spec dd{margin:0;font-weight:600;text-align:right} .item-note{font-size:.82rem;color:var(--ink-faint);margin:14px 0 0} .request-form-wrap{margin-top:30px} .request-form-title{font-family:var(--serif);font-weight:700;font-size:1.15rem;margin:0 0 18px} .related-section{margin-top:64px;padding-top:var(--space-5);border-top:1px solid var(--line)} .related-title{font-family:var(--serif);font-weight:700;font-size:1.3rem;margin:0 0 22px} .related-grid{grid-template-columns:repeat(4,1fr)} /* One dark full-bleed "brand moment" section: quote + video credit together, instead of two separate black blocks stacked back to back (was a jarring double-black-section run — Igor flagged the landing page as visually inconsistent, this was one concrete cause). */ .band{background:var(--band-bg);color:var(--band-ink);padding:var(--space-7) 0;position:relative;overflow:hidden} .band::before{content:'';position:absolute;inset:0;background: radial-gradient(circle at 15% 20%, rgba(176,141,87,.14), transparent 42%), radial-gradient(circle at 85% 85%, rgba(176,141,87,.09), transparent 45%); pointer-events:none} .band::after{content:'';position:absolute;inset:0;opacity:.06;background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);background-size:26px 26px;pointer-events:none} .band-wrap-video{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;min-width:0} .band-wrap-video>*{min-width:0} .band blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.3vw,1.8rem);line-height:1.3;margin:0} .band blockquote em{color:var(--accent);font-style:italic} .band-eyebrow{display:block;font-family:'Archivo',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 16px} /* Quote (headline-equivalent) needs the same breathing room before its supporting paragraph that .section-desc gets after h2 elsewhere — was missing here (blockquote has margin:0, .band-side had no margin-top), so the quote ran straight into the paragraph below it. */ .band-side{margin-top:var(--space-4)} .band-side p{color:var(--band-ink-soft);font-size:.96rem;margin:0 0 18px} .band-side .btn-primary{background:var(--accent);color:var(--accent-ink)} .band-video-col{display:flex;flex-direction:column;align-items:center;text-align:center} .brand-band-video{width:100%;border-radius:12px;display:block} .brand-band-credit{font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-soft);opacity:.75;margin:18px 0 0;max-width:320px} .brand-band-credit a{color:var(--accent);text-decoration:none} .brand-band-credit a:hover{text-decoration:underline} .band-video-col .brand-band-video{max-width:420px;margin:0 auto} .trust-strip{background:var(--bg-sunken);padding:var(--space-6) 0;position:relative;z-index:0} .trust-strip-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} .trust-strip-wrap .trust-strip-head{margin:0} .trust-strip-wrap .btn-primary{margin-top:var(--space-3)} .trust-strip-wrap .trust-strip-sketch{justify-self:center} .trust-strip-sketch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;width:270px;aspect-ratio:1/1;background:var(--bg-elevated);border:1px solid var(--line);border-radius:24px;padding:27px} .trust-strip-sketch svg{width:100%;max-width:165px;height:auto} .trust-strip-sketch-label{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink-soft);text-align:center} @media (max-width:900px){.trust-strip-wrap{grid-template-columns:1fr;gap:32px}.trust-strip-sketch{order:-1;max-width:270px;margin:0 auto}} /* Instagram strip sits between the sunken trust-strip and the dark footer — give it an explicit opaque base fill so it doesn't fall through to the dotted body texture (visible in dark, invisible in light = looked inconsistent between themes). */ .instagram-section{background:var(--bg);position:relative;z-index:0} .trust-strip-head{max-width:560px;margin:0 0 40px} .trust-strip-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.55rem,2.8vw,2.1rem);margin:0 0 10px} .trust-strip-head p{color:var(--ink-soft);font-size:.98rem;margin:0} .trust-points{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:100%;margin:0 0 36px} .trust-point{display:flex;gap:14px;align-items:flex-start} .trust-point svg{flex-shrink:0;width:22px;height:22px;color:var(--accent);margin-top:2px} .trust-point b{display:block;font-size:.96rem;margin-bottom:3px} .trust-point span{display:block;font-size:.84rem;color:var(--ink-soft)} @media (max-width:700px){.trust-points{grid-template-columns:1fr;text-align:left;max-width:340px}} .request-info{max-width:640px} .request-info h3{font-family:var(--serif);font-weight:700;font-size:1.4rem;margin:0 0 12px} .request-info p{color:var(--ink-soft);font-size:.94rem;margin:0 0 20px} .request-info ul{margin:0 0 26px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .request-info li{font-size:.88rem;color:var(--ink-soft);display:flex;gap:10px} .request-info li svg{flex-shrink:0;width:16px;height:16px;margin-top:3px;color:var(--accent)} .section-link{margin:32px 0 0} /* Static Instagram preview — replaces the live embed.js widget, which frequently rendered blank (ad blockers, browser privacy modes, and Instagram's own bot-walling all break it silently with no fallback). Thumbnails are saved locally instead, each linking out to the real post. Slide carousel (not an infinite marquee): auto-advances one slide every few seconds, but scroll-snap means it's also directly swipeable/draggable and the prev/next buttons work off the same native scroll position — so "auto" and "manual" are the same mechanism, not two competing ones. */ .ig-carousel{position:relative} .ig-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px} .ig-track::-webkit-scrollbar{display:none} .ig-slide{scroll-snap-align:start;position:relative;display:block;flex:0 0 170px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--card-1);transition:box-shadow .15s} .ig-slide:hover{box-shadow:0 14px 26px -14px var(--shadow)} .ig-slide img{width:100%;height:100%;object-fit:cover} .ig-slide .ig-play{position:absolute;top:10px;right:10px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(28,27,25,.55);color:#fff;pointer-events:none} .ig-slide .ig-play svg{width:10px;height:10px} .ig-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--bg-elevated);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px -10px var(--shadow);z-index:2} .ig-nav svg{width:16px;height:16px} .ig-prev{left:-18px} .ig-next{right:-18px} @media (max-width:900px){.ig-nav{display:none}} .instagram-cta{text-align:center;margin-top:32px} .team-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .team-card{border:1px solid var(--line);border-radius:16px;padding:var(--space-3)} .team-card h3{font-family:var(--serif);font-weight:700;font-size:1.15rem;margin:0 0 4px} .team-card .team-role{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin:0 0 14px;display:block} .team-card p{color:var(--ink-soft);font-size:.9rem;margin:0 0 16px} .team-card a.team-link{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--ink)} .team-card a.team-link:hover{color:var(--accent)} @media (max-width:700px){.team-grid{grid-template-columns:1fr}} .faq-list{display:flex;flex-direction:column;gap:2px;max-width:760px} .faq-item{border-bottom:1px solid var(--line);padding:20px 0} .faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink);-webkit-tap-highlight-color:transparent} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'+';font-size:1.3rem;font-weight:400;color:var(--ink-faint);flex-shrink:0;transition:transform .15s} .faq-item[open] summary::after{content:'\2212'} .faq-item p{color:var(--ink-soft);font-size:.92rem;margin:14px 0 0;max-width:62ch} .policy-sections{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px} .policy-section h3{font-family:var(--serif);font-weight:700;font-size:1.1rem;margin:0 0 8px} .policy-section p{color:var(--ink-soft);font-size:.92rem;margin:0} @media (max-width:900px){.policy-sections{grid-template-columns:1fr}} .policy-doc{max-width:74ch;display:flex;flex-direction:column;gap:28px} .policy-doc-section{padding-top:20px;border-top:1px solid var(--line)} .policy-doc-section:first-child{padding-top:0;border-top:none} .policy-doc-section h2{font-family:var(--serif);font-weight:700;font-size:1.05rem;margin:0 0 10px} .policy-doc-section p{color:var(--ink-soft);font-size:.92rem;line-height:1.6;margin:0 0 10px} .policy-doc-section p:last-child{margin-bottom:0} .policy-doc-section ul{margin:0 0 10px;padding-left:20px;color:var(--ink-soft);font-size:.92rem;line-height:1.6} .policy-doc-section ul:last-child{margin-bottom:0} .policy-doc-section li{margin-bottom:4px} .policy-doc-section a{color:var(--ink)} .request-form{display:flex;flex-direction:column;gap:16px} .request-form-card{border:1px solid var(--line);border-radius:16px;padding:var(--space-3);background:var(--bg-elevated);box-shadow:0 4px 20px var(--shadow)} .request-form-head{margin-bottom:2px} .request-form-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px} .request-item-name{font-family:var(--serif);font-weight:700;font-size:1.3rem;margin:0 0 4px} .field{display:flex;flex-direction:column;gap:6px;position:relative} .field label{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} input{font-family:'Archivo',sans-serif;font-size:.92rem;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)} input[readonly]{color:var(--ink-soft);background:var(--bg-sunken)} input:focus{outline:2px solid var(--accent);outline-offset:1px} input[readonly]:focus{outline:none} .request-form input{padding-right:40px} .field-check{position:absolute;right:14px;bottom:12px;width:18px;height:18px;color:#2f9e5b;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s;pointer-events:none} .field.valid .field-check{opacity:1;transform:scale(1)} /* Browser-tab styling, take 3: the whole thing (tabs + panel) is one rounded-rect surface via overflow:hidden on .fulfil-wrap itself, so all four outer corners are always correctly rounded no matter which tab is active — no per-state corner logic needed (that's what broke take 1). The active tab's background matches the panel's, and its bottom border is painted the same color, so it visually fuses into the content below; the inactive tab keeps a visible divider so it still reads as "not this one". A vertical divider separates the two tabs. */ .fulfil-wrap{margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-sunken)} .toggle{display:flex} .toggle-opt{flex:1;position:relative} .toggle-opt:first-child{border-right:1px solid var(--line)} .toggle-opt input{position:absolute;opacity:0;pointer-events:none} .toggle-opt span{display:flex;align-items:center;justify-content:center;padding:12px;font-size:.84rem;font-weight:600;color:var(--ink-faint);cursor:pointer;border-bottom:1px solid var(--line);transition:background .15s,color .15s,border-color .15s} .toggle-opt input:checked + span{background:var(--bg);color:var(--ink);border-bottom-color:var(--bg)} /* Both fulfilment panels occupy the same grid cell so the container is always the height of the taller one — swapping tabs no longer changes the block height. Uses a dedicated --inactive class rather than the `hidden` attribute: a site-wide `[hidden]{display:none!important}` safety net (kept for unrelated show/hide toggles elsewhere) was winning over this rule and collapsing the inactive panel out of the grid, which is what caused the visible jump when switching tabs. */ .fulfil-panel{display:grid;background:var(--bg);padding:14px} .fulfil-detail{grid-area:1/1;padding:0;align-self:start} .fulfil-detail--inactive{visibility:hidden;pointer-events:none} .fulfil-detail input[readonly]{background:var(--bg)} /* Pickup and delivery use the same .field label treatment (uppercase, small, 6px gap to its content) so the two panels line up instead of one using a bare