:root{--paper:#F4F1E9;--paper-2:#ECE6D8;--panel:#E5D9C2;--ink:#17140E;--ink-soft:#241F16;--rubric:#1F4E79;--rubric-dark:#163A5C;--eyebrow-mark:"\00A7";--accent-on-dark:#A7C2DD;--accent-creed:#8FB1D0;--accent-pale:#CFE0F0;--rubric-rgb:31,78,121;--mark-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 9.5C7 6.5 8 4.5 8.5 4.5 9 4.5 10 6.5 10 9 10 6 11 4 12 4 13 4 14 6 14 9 14 6.5 15 4.5 15.5 4.5 16 4.5 17 6.5 17 9.5 17 12.5 15 15 12 15.5 9 15 7 12.5 7 9.5Z'/%3E%3Cpath d='M11.4 15h1.2v7h-1.2z'/%3E%3Cpath d='M12 19C8.5 18.5 6.8 16.5 6.5 14 9.5 14.8 11.4 16.3 12 19Z'/%3E%3Cpath d='M12 19C15.5 18.5 17.2 16.5 17.5 14 14.5 14.8 12.6 16.3 12 19Z'/%3E%3C/svg%3E");--header-bg:#fff;--footer-bg:#173B5C;--muted:#6E6657;--line:rgba(23,20,14,.14);--line-lt:rgba(244,241,233,.16);} /* Color-scheme toggle. Default = Geneva navy (blue) — the primary brand theme. Setting data-theme="red" on swaps the accent back to the original rubric red + pilcrow eyebrow. The head script sets it from ?theme=blue|red (remembered in localStorage); each theme also overrides the on-dark/pale accent tints + --rubric-rgb. */ [data-theme="red"]{--rubric:#9E2B22;--rubric-dark:#85221b;--eyebrow-mark:"\00B6";--footer-bg:#7E211A;--accent-on-dark:#E7A79F;--accent-creed:#D98A82;--accent-pale:#F3CFCB;--rubric-rgb:158,43,34;} *{box-sizing:border-box;} body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;} /* Sticky footer (all page templates): short pages stretch the main area so the footer sits at the bottom of the viewport instead of floating mid-page with blank space beneath it. Most pages wrap
+footer in
; some (index, products, categories) put content/footer straight in . These rules cover every variant — whichever wrapper exists grows to fill. */ .page{flex:1 0 auto;display:flex;flex-direction:column;} #main{flex:1 0 auto;} .foot{margin-top:auto;} a{color:inherit;text-decoration:none;}img{max-width:100%;display:block;} .wrap{max-width:1280px;margin:0 auto;padding:0 28px;} /* Align the ECT/Bootstrap pages (products, proddetail) to the themed .wrap geometry so content — the breadcrumb especially — sits at the same width/left-edge as the rest of the site (header, footer, homepage, categories). Bootstrap's responsive .container (1140–1320px, 12px pad) otherwise makes the breadcrumb jump when navigating. Row(-12px)+col(12px) nets back to this 28px edge, so the grid math still works. */ .pg-products .container,.pg-proddetail .container{max-width:1280px;padding-left:28px;padding-right:28px;} /* Mobile: tighten the site-wide side edges from 28px to 16px so content (esp. the product/ category grids) gets more width on a phone. Covers the content .wrap, the announce bar + footer wraps (own explicit 28px), and the ECT/Bootstrap container override. */ @media(max-width:600px){.wrap,.utility .wrap,.foot .wrap,.pg-products .container,.pg-proddetail .container{padding-left:16px;padding-right:16px;}} .serif{font-family:Fraunces,Georgia,serif;} .rubric{font:500 .72rem/1 Inter;letter-spacing:.24em;text-transform:uppercase;color:var(--rubric);display:inline-flex;align-items:center;gap:.55em;} .rubric::before{content:"";display:inline-block;width:1.15em;height:1.15em;background-color:currentColor;-webkit-mask:var(--mark-mask) center/contain no-repeat;mask:var(--mark-mask) center/contain no-repeat;} .btn{display:inline-block;font:500 .82rem/1 Inter;letter-spacing:.1em;text-transform:uppercase;padding:15px 30px;border:1px solid var(--ink);cursor:pointer;transition:.18s;} .btn-solid{background:var(--rubric);border-color:var(--rubric);color:var(--paper);}.btn-solid:hover{background:var(--rubric-dark);border-color:var(--rubric-dark);} .btn-ghost{background:transparent;color:var(--paper);border-color:var(--line-lt);}.btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);} .utility{background:var(--ink);color:var(--paper);font:500 .72rem/1 Inter;letter-spacing:.14em;text-transform:uppercase;} .utility .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 28px;} .utility .msg .dot{color:var(--rubric);margin:0 .6em;} .utility .msg .ann-flash{background:var(--rubric);color:var(--paper);padding:2px 9px;border-radius:2px;margin-left:.7em;letter-spacing:.08em;} .utility .soc{display:flex;gap:14px;font-size:.95rem;} .utility .soc a:hover{color:var(--rubric);} .head{position:sticky;top:0;z-index:40;background:var(--header-bg);border-bottom:1px solid var(--line);} /* Desktop (>=1024): single-row header — logo left · nav centred · icons right, all * in the 1280 wrap. DOM order is burger,brand,icons,navrow; grid-column places them. * Below 1024 this collapses to the compact burger + drawer bar (see the max-width * block further down). The nav shares the row now, so the mobile flip moved 920 -> 1024. */ .head .wrap.head-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:72px;gap:20px;} .head-top .burger{display:none;} /* grid-row:1 on all three so DOM order (burger,brand,icons,navrow) can't let grid's * sparse auto-placement bump the nav — placed after icons in the DOM — onto a 2nd row. */ .head-top .brand{grid-column:1;grid-row:1;justify-self:start;} .head-top .navrow{grid-column:2;grid-row:1;min-width:0;align-self:stretch;} .head-top .icons{grid-column:3;grid-row:1;justify-self:end;} .navrow .menu{max-width:none;margin:0;padding:0;justify-content:center;height:100%;gap:2px;flex-wrap:nowrap;} .navrow .menu>li>a{padding:10px 13px;white-space:nowrap;display:flex;align-items:center;align-self:stretch;} .brand{font-family:Fraunces,serif;font-weight:600;font-size:1.44rem;letter-spacing:.01em;display:inline-flex;align-items:center;}.brand .amp{color:var(--rubric);} .brand img{height:46px;width:auto;display:block;} .d-top .brand img{height:30px;} .menu{display:flex;gap:30px;list-style:none;margin:0;padding:0;height:100%;} .menu>li{display:flex;align-items:center;} .menu>li>a{font:500 .78rem/1 Inter;letter-spacing:.13em;text-transform:uppercase;padding:6px 0;transition:color .15s;position:relative;} /* Tab indicator lives on the LINK, never the li. The li must stay UNPOSITIONED: the * full-width .mega panel is position:absolute; left/right:0 and anchors to the nearest * positioned ancestor — if the li is relative, the panel collapses to one item's width. * The link stretches full-height (single-row rule above), so bottom:0 sits at the header base. */ .menu>li>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--rubric);opacity:0;transition:opacity .15s;} .menu>li:hover>a,.menu>li:focus-within>a{color:var(--rubric);} .menu>li:hover>a::after,.menu>li:focus-within>a::after{opacity:1;} .menu>li>a.nolink,.mega a.nolink,.drawer a.nolink{cursor:default;} /* href-less items: trigger a submenu, navigate nowhere */ .icons{display:flex;gap:18px;align-items:center;}.icons a,.icons button{display:inline-flex;background:none;border:0;color:var(--ink);cursor:pointer;padding:0;}.icons svg{width:21px;height:21px;} .icons #cartToggle{position:relative;overflow:visible;} .cart-count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--rubric);color:#fff;font:600 .6rem/16px Inter;text-align:center;letter-spacing:.02em;pointer-events:none;} .cart-count.hidden{display:none;} .burger{display:none;appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;} .burger svg{width:24px;height:24px;display:block;} /* No fade — the panel snaps straight to fully-opaque parchment. An opacity fade makes * the whole box (background included) translucent for its duration, which over the busy * hero slider reads as a broken, see-through, garbled panel. Instant open/close means it * is only ever fully absent or fully opaque — never a translucent in-between frame. */ .mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 26px 46px rgba(23,20,14,.12);opacity:0;visibility:hidden;transition:none;z-index:39;} .menu>li:hover .mega,.menu>li:focus-within .mega{opacity:1;visibility:visible;} /* nowrap keeps all containers on one row so a promo never floats to a second line; the text columns' flex-shrink then compresses them (links wrap within reason) to make room, while the fixed-width promos hold their size. */ .mega .inner{max-width:1280px;margin:0 auto;padding:30px 28px 36px;display:flex;flex-wrap:nowrap;justify-content:center;gap:22px 16px;align-items:flex-start;} .mega .mh{flex:0 0 100%;margin-bottom:2px;} .mega a{font-size:.84rem;color:#43403a;padding:4px 0;display:block;border-bottom:1px solid transparent;width:max-content;} .mega a:hover{color:var(--rubric);} /* Promo block (mType=promo) — featured image+caption card in the mega panel. */ .mega a.mega-promo{flex:0 0 177px;align-self:flex-start;width:auto;padding:0;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;} .mega a.mega-promo .mega-promo-frame{display:block;overflow:hidden;background:#ECE6D8;} .mega a.mega-promo img{display:block;width:177px;height:236px;object-fit:cover;border-radius:0;background:#ECE6D8;transition:opacity .4s ease, transform .5s;} .mega a.mega-promo:hover .mega-promo-img{transform:scale(1.04);} .mega .mega-promo-t{display:block;font-weight:500;color:var(--ink);padding:8px 0 0;font-size:.82rem;} .mega a.mega-promo:hover .mega-promo-t{color:var(--rubric);} .mega .mega-promo-b{display:block;color:#7a766c;font-size:.76rem;line-height:1.3;padding:1px 0 0;} /* Grouped column (mType=group) / loose-link column: heading + child links. */ /* Text columns sit at their own content width (grow:0 → no empty padding inside a short block): narrow menus stay narrow, wider menus + fixed-width promos still fit one row, and columns shrink (text wraps within reason) before anything floats to a second row. max-width only caps a pathologically long single column; the panel's justify-content:center then clusters the blocks instead of stretching/spreading them. */ .mega .mega-col,.mega .mega-loose{flex:0 1 auto;min-width:0;max-width:240px;align-self:flex-start;} .mega .mega-col a{width:auto;white-space:normal;line-height:1.25;} /* 1-2 text columns: size to content (links don't wrap), plus a fixed breathing gutter so a dense column isn't cramped — a set amount beyond natural width, rather than growing to absorb all the slack (which over-pads short columns, the Discover-menu problem). */ .mega.mega-wide .mega-col,.mega.mega-wide .mega-loose{flex:0 1 auto;min-width:0;max-width:320px;padding-right:34px;} .mega.mega-wide .mega-col-h,.mega.mega-wide .mega-col a{white-space:nowrap;} /* Hairline "pinstripe" dividers between adjacent text columns only — never against an image block. Drawn as an absolutely-positioned pseudo-element so its height is independent of the column: it starts at the top of the content and runs the height of the promo image (236px, matching .mega-promo img). */ .mega .mega-col + .mega-col{position:relative;padding-left:22px;} .mega .mega-col + .mega-col::before{content:"";position:absolute;left:0;top:0;height:236px;width:1px;background:var(--line);} .mega .mega-col-h{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#9b8f78;font-weight:600;padding:0;margin-bottom:4px;width:auto;} /* lazysizes fade-in + parchment placeholder while the image loads. */ .mega a.mega-promo img{background:#ECE6D8;} .mega img.lazyload{opacity:0;} .mega img.lazyloaded{opacity:1;transition:opacity .4s ease;} /* Below full desktop width, drop the feature image cards (they duplicate the text links) so the columns get the room; text menu stays to the drawer cutoff. */ @media(max-width:1280px){.mega a.mega-promo{display:none;}} .slider{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;max-width:1280px;margin:0 auto;touch-action:pan-y;}/* pan-y: let the page scroll vertically but keep horizontal swipes for the JS carousel (else the browser hijacks them and touchend never fires) */ .slides{display:flex;transition:transform .6s cubic-bezier(.4,0,.1,1);touch-action:pan-y;}/* pan-y on the track itself (where the swipe handlers live), not just .slider: reserve horizontal for the JS carousel so iOS can't claim the gesture for scrolling */ .slide{min-width:100%;position:relative;} /* Kill iOS long-press on the slide links/images: if a finger lingers (a brief pause mid-swipe) iOS fires its callout / image-drag, which cancels the touch and stalls the swipe. Suppressing callout + selection + native drag keeps the gesture ours. */ .slide,.slide picture,.slide img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;} .imgslide{display:block;} .imgslide img{width:100%;height:auto;display:block;} .slide .wrap{padding:108px 28px 104px;position:relative;z-index:2;} .slide .rubric{color:var(--accent-creed);} .slide h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(2.8rem,8vw,5.6rem);line-height:.98;letter-spacing:-.018em;margin:.5rem 0 1.3rem;max-width:13ch;} .slide h2 em{font-style:italic;color:var(--rubric);} .slide p{font-size:1.16rem;color:#CFC7B5;max-width:34ch;margin:0 0 2.1rem;} .slide .ghost{position:absolute;right:-2%;bottom:-6%;font-family:Fraunces,serif;font-style:italic;font-size:clamp(5rem,15vw,12rem);color:rgba(244,241,233,.045);white-space:nowrap;z-index:1;pointer-events:none;} /* Sleek circular "glass" arrows (replaces the old translucent squares). */ .s-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:0;background:rgba(23,20,14,.30);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(23,20,14,.18);transition:background .18s ease,transform .18s ease;} .s-arrow:hover{background:rgba(23,20,14,.52);} .s-arrow:active{transform:translateY(-50%) scale(.92);} .s-arrow.prev{left:14px;}.s-arrow.next{right:14px;} .dots{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:5;} .dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(244,241,233,.5);background:transparent;cursor:pointer;padding:0;}.dot.on{background:var(--rubric);border-color:var(--rubric);} /* Mobile: lift the dots off the image into a discrete strip below it (on the page parchment, not a black bar), and drop the arrows — autoplay + dots already cue the swipe. */ @media(max-width:700px){ .slider{background:var(--paper);} .dots{position:static;padding:13px 0 14px;} .dot{border-color:rgba(23,20,14,.32);} /* visible on the light strip */ .s-arrow{display:none;} } .section{padding:84px 0;} .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:38px;gap:20px;flex-wrap:wrap;} .section-head h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.015em;margin:.5rem 0 0;} .section-head .more{font:500 .76rem/1 Inter;letter-spacing:.13em;text-transform:uppercase;color:var(--rubric);border-bottom:1.5px solid var(--rubric);padding-bottom:3px;} /* Interior page header (account, contact, faq, returns, legal, etc.) */ .page-hero{padding:48px 0 6px;} .page-hero .crumb{font:500 .72rem/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;} .page-hero .crumb a{color:inherit;text-decoration:none;}.page-hero .crumb a:hover{color:var(--rubric);} .page-hero h1{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.015em;margin:0;} .page-hero h1::before{content:"";display:inline-block;width:.74em;height:.74em;background-color:var(--rubric);-webkit-mask:var(--mark-mask) center/contain no-repeat;mask:var(--mark-mask) center/contain no-repeat;vertical-align:-.02em;margin-right:.5rem;} .page-hero p.lede{color:var(--muted);max-width:60ch;margin:14px 0 0;} /* Long-form content pages (policies, FAQ, care, shipping) */ .prose{max-width:72ch;margin:0 auto;} .prose h2,.prose h3,.prose h4{font-family:Fraunces,serif;font-weight:500;letter-spacing:-.01em;margin:1.8em 0 .5em;} .prose h2{font-size:1.55rem;} .prose h3{font-size:1.3rem;} .prose h4{font-size:1.12rem;} .prose p,.prose li{line-height:1.7;} .prose ul,.prose ol{padding-left:1.2em;margin:0 0 1em;} .prose li{margin:.3em 0;} .prose a{color:var(--rubric);text-decoration:underline;text-underline-offset:2px;} .prose hr{border:0;border-top:1px solid var(--line);margin:1.8em 0;} .prose blockquote{border-left:3px solid var(--rubric);padding-left:1em;margin:1.4em 0;color:var(--muted);} .prose blockquote center{text-align:left;} /* "Still need help?" style call-to-action band */ .cta-band{background:var(--ink);color:var(--paper);text-align:center;padding:56px 0;} .cta-band h3{font-family:Fraunces,serif;font-weight:500;font-size:1.6rem;margin:0 0 18px;color:var(--paper);} /* FAQ accordion (native details/summary, no JS) */ .faq{max-width:72ch;margin:0 auto;} .faq details{border-top:1px solid var(--line);} .faq details:last-child{border-bottom:1px solid var(--line);} .faq summary{list-style:none;cursor:pointer;padding:18px 0;font-family:Fraunces,serif;font-size:1.12rem;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:1em;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";color:var(--rubric);font-size:1.4em;line-height:1;} .faq details[open] summary::after{content:"\2013";} .faq details > div{padding:0 0 20px;max-width:68ch;} .faq details > div p{margin:0 0 .8em;line-height:1.7;} .faq a{color:var(--rubric);text-decoration:underline;text-underline-offset:2px;} /* Contact page */ .contact-wrap{max-width:560px;margin:0 auto;} .contact-wrap .form-control,.contact-wrap select,.contact-wrap textarea{margin-bottom:14px;} .contact-wrap button{width:100%;} .contact-meta{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin:42px auto 0;max-width:560px;text-align:center;} .contact-meta .ci{flex:1 1 200px;} .contact-meta .ci i{color:var(--rubric);font-size:1.4rem;display:block;margin-bottom:8px;} .contact-meta .ci h4{font-family:Fraunces,serif;font-weight:500;margin:0 0 .25em;} .contact-meta .ci a{color:var(--rubric);} /* 404 / error page */ .notfound{text-align:center;padding:90px 0;} .notfound .code{font-family:Fraunces,serif;font-size:clamp(4rem,12vw,8rem);font-weight:500;color:var(--rubric);line-height:1;} .notfound p{color:var(--muted);font-size:1.1rem;margin:12px 0 28px;} /* ECT product-not-found state (proddetail.php → notfoundmarkup(): a #stextform wrapper holding .prodnoexist h1, .notfoundremoved, .notfoundtrysearch and a search bar). Bare/unstyled out of the box — give it the centred empty-state treatment matching .notfound above. NB: the class `notfoundinput` is on BOTH the wrapper div and the , so disambiguate with div./input. */ .pg-proddetail #stextform{max-width:620px;margin:0 auto;text-align:center;padding:30px 0 12px;} .pg-proddetail .prodnoexist{margin:0;} .pg-proddetail .prodnoexist h1{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.14;color:var(--ink);margin:0 0 16px;} .pg-proddetail .notfoundremoved{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0;} .pg-proddetail .notfoundtrysearch{color:var(--ink);font-weight:500;margin:20px 0 14px;} .pg-proddetail .notfoundinputcntnr{display:flex;justify-content:center;} .pg-proddetail div.notfoundinput{display:flex;align-items:stretch;width:100%;max-width:420px;text-align:left;} .pg-proddetail input.ecttextinput.notfoundinput{flex:1;min-width:0;border:1px solid var(--line);border-right:0;border-radius:2px 0 0 2px;padding:13px 15px;font:400 .98rem Inter;background:#fff;color:var(--ink);} .pg-proddetail input.ecttextinput.notfoundinput:focus{outline:none;border-color:var(--ink);} .pg-proddetail .notfoundsubmit{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:52px;border:1px solid var(--rubric);background:var(--rubric);color:var(--paper);border-radius:0 2px 2px 0;font-size:1.05rem;line-height:1;cursor:pointer;transition:.18s;} .pg-proddetail .notfoundsubmit:hover{background:var(--rubric-dark);border-color:var(--rubric-dark);} /* Optional "similar category" suggestion + contact-us fallback, if ECT emits them */ .pg-proddetail .prodnoexistaltcat{margin:22px 0 4px;} .pg-proddetail .prodnoexistcatimg img{max-width:160px;height:auto;border:1px solid var(--line);border-radius:3px;} .pg-proddetail .prodnoexistcat a,.pg-proddetail .notfoundcontact a{color:var(--rubric);} .pg-proddetail .notfoundcontact{color:var(--muted);margin-top:22px;} /* Gift certificate options */ .gift-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} .gift-tile{background:var(--paper-2);border:1px solid var(--line);padding:48px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;} .gift-tile .rubric{margin-bottom:14px;} .gift-tile h2{font-family:Fraunces,serif;font-weight:500;margin:0 0 22px;font-size:1.7rem;} @media(max-width:700px){.gift-duo{grid-template-columns:1fr;}} /* Partner / client logo strip (about page) */ .logo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:38px;margin-top:6px;} .logo-strip img{height:54px;width:auto;opacity:.55;filter:grayscale(1);transition:.2s;} .logo-strip img:hover{opacity:1;filter:none;} .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px;} .card{position:relative;} .card .frame{background:var(--paper-2);aspect-ratio:4/5;overflow:hidden;margin-bottom:16px;} .card .frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s;} .card:hover .frame img{transform:scale(1.04);} .card .nm{font-size:.98rem;line-height:1.35;margin-bottom:3px;}.card:hover .nm{color:var(--rubric);} .card .pr{font:500 .92rem/1 Inter;color:var(--muted);} .tag{position:absolute;top:12px;left:12px;background:var(--rubric);color:var(--paper);font:500 .62rem/1 Inter;letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;} /* Store-generated product blocks (ECT inccrosssell, fp-bs-*) */ .ectblock{padding:70px 0;} .ectblock.alt{background:var(--paper-2);} .ectblock .cstitle{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.015em;margin:0 0 34px;} .ectblock .cstitle::before{content:"";display:inline-block;width:.78em;height:.78em;background-color:var(--rubric);-webkit-mask:var(--mark-mask) center/contain no-repeat;mask:var(--mark-mask) center/contain no-repeat;vertical-align:-.04em;margin-right:.5rem;} .cs-carousel{position:relative;} /* overflow-y:hidden is deliberate — overflow-x:auto alone makes overflow-y compute to auto, giving the rail a few px of vertical scroll that absorbs page-scroll and jitters the row. justify-content:safe center centers a partial row but falls back to start when it overflows. */ .fp-bs-products{display:flex;gap:24px;justify-content:safe center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;list-style:none;margin:0;padding:0 0 6px;scrollbar-width:none;} .fp-bs-products::-webkit-scrollbar{display:none;} .fp-bs-product{position:relative;flex:0 0 calc((100% - 72px)/4);scroll-snap-align:start;}/* 3 gaps × 24px = 72 */ .fp-bs-product.reveal{transform:none;}/* fade only — vertical rise would clip under overflow-y:hidden */ /* Sleek, discreet edge arrows. Hidden by default; each slides in only when the pointer is on its side of the rail (JS toggles .show-prev/.show-next on the wrap), and the arrow for an end you've already reached is removed (JS toggles .at-start/.at-end). */ .cs-arrow{position:absolute;top:46%;z-index:4;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.8);color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer;opacity:0;box-shadow:0 2px 9px rgba(23,20,14,.12);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .2s ease, transform .2s ease, background .15s, color .15s;} .cs-arrow.prev{left:8px;transform:translateY(-50%) translateX(-8px);} .cs-arrow.next{right:8px;transform:translateY(-50%) translateX(8px);} /* reveal the arrow for the hovered side (or on keyboard focus) — slide flush to the edge */ .cs-carousel.show-prev .cs-arrow.prev,.cs-carousel.show-next .cs-arrow.next,.cs-arrow:focus-visible{opacity:1;transform:translateY(-50%) translateX(0);} .cs-arrow:hover{background:#fff;color:var(--rubric);} /* no arrow pointing where you can't go: hide prev at the start, next at the end */ .cs-carousel.at-start .cs-arrow.prev,.cs-carousel.at-end .cs-arrow.next{display:none;} .cs-carousel.no-overflow .cs-arrow{display:none;}/* nothing to scroll (partial row) — hide arrows */ /* Touch / mobile: no arrows at all — free-scroll with peeking neighbours is the cue (ScriptureType style). Dropping mandatory snap makes the rail glide instead of stopping. */ @media (hover:none){.cs-arrow{display:none;}.fp-bs-products{scroll-snap-type:none;}} div.fp-bs-prodimage{background:var(--paper-2);aspect-ratio:4/5;overflow:hidden;margin-bottom:14px;} .ectblock.alt div.fp-bs-prodimage{background:#E2DAC9;} div.fp-bs-prodimage .ectlink,div.fp-bs-prodimage a{display:block;width:100%;height:100%;} img.fp-bs-prodimage{width:100%;height:100%;object-fit:cover;transition:transform .5s;} .fp-bs-product:hover img.fp-bs-prodimage{transform:scale(1.04);} .fp-bs-prodname{font-size:.96rem;line-height:1.35;} .fp-bs-prodname a{color:var(--ink);} .fp-bs-product:hover .fp-bs-prodname a{color:var(--rubric);} /* Narrower viewports: size the cards so the NEXT one peeks past the edge — the visual cue that the rail is swipeable (ScriptureType-style). The gesture itself is native: overflow-x:auto + scroll-snap (set above) give touch momentum + snap. scroll-padding-left keeps the snapped card off the container edge. */ @media(max-width:920px){.fp-bs-products{gap:18px;scroll-padding-left:0;}.fp-bs-product{flex:0 0 44%;}} @media(max-width:600px){.fp-bs-product{flex:0 0 70%;}} /* Mobile: let the horizontal card rails (cross-sell + reviews) break out of the page container to the viewport edges, so an off-screen card peeks at the very edge instead of stopping at the 28px gutter. calc(50% - 50vw) reaches each edge regardless of container padding; the re-added 28px keeps the first card aligned with the content/heading above and gives the last card room. */ @media(max-width:600px){ .fp-bs-products, #reviews-slot .reviewscontainer{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:16px; padding-right:16px; scroll-padding-left:16px; } } /* Detail-page related-product section titles ("You might also like", "More From This Collection", "Best Sellers"…). On proddetail and the cart these aren't inside .ectblock, so style them here — a centered Fraunces heading. Scoped to .pd-more / .pg-cart so the homepage titles are untouched. */ .pd-more .cstitle,.pg-cart .cstitle{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.01em;color:var(--ink);text-align:center;width:fit-content;max-width:100%;margin:0 auto 30px;position:relative;} /* Thin grey underline under the heading text, drawn in from the centre on scroll-in (mw.js adds .in to every .cstitle). Shared by proddetail's "more" section and the cart so both match; width:fit-content + margin:auto centers it regardless of the parent's text alignment. The homepage .ectblock heading keeps its logo-mark bullet instead, so it's excluded here. */ .pd-more .cstitle::after,.pg-cart .cstitle::after{content:"";position:absolute;left:10%;bottom:0;width:80%;height:1px;border-bottom:1px solid #ccc;padding-bottom:.25rem;transform-origin:center;} .reveal-on .pd-more .cstitle::after,.reveal-on .pg-cart .cstitle::after{transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1);} .reveal-on .pd-more .cstitle.in::after,.reveal-on .pg-cart .cstitle.in::after{transform:scaleX(1);} .brandintro{text-align:center;padding:82px 0 70px;} .brandintro .rubric{justify-content:center;margin-bottom:1.25rem;} .brandintro h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.08;letter-spacing:-.018em;margin:0 auto;max-width:17ch;} .brandintro p{color:var(--muted);font-size:1.08rem;line-height:1.6;margin:1.1rem auto 0;max-width:52ch;} /* Leaner top spacing for the bento tiles (the intro heading now lives in .brandline). */ .catfeature{padding-top:60px;} .values{padding:18px 0 84px;} .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;text-align:center;} .vitem .seal{width:86px;height:86px;border-radius:50%;background:var(--paper-2);display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;} .vitem .seal::after{content:"";position:absolute;inset:7px;border:1px solid rgba(var(--rubric-rgb),.42);border-radius:50%;} .vitem .seal i{font-size:30px;color:var(--rubric);line-height:1;} .vitem h3{font-family:Fraunces,serif;font-weight:500;font-size:1.3rem;margin:0 0 9px;} .vitem p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0 auto;max-width:32ch;} @media(max-width:780px){.vgrid{grid-template-columns:1fr;gap:36px;}} .ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:13px 0;} .ticker-track{display:flex;width:max-content;animation:tickermove 32s linear infinite;} .ticker:hover .ticker-track{animation-play-state:paused;} .ticker-set{display:flex;align-items:center;flex:0 0 auto;} .ticker .ph{font-family:Fraunces,serif;font-style:italic;font-size:1.12rem;padding:0 26px;white-space:nowrap;} .ticker .sep{color:var(--rubric);font-size:.95rem;} @keyframes tickermove{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;justify-content:center;}.ticker .ph{padding:4px 16px;}} .tmonials{padding:90px 0;background:var(--ink);color:var(--paper);} .tmonials .t-head{text-align:center;margin-bottom:46px;} .tmonials .t-head .rubric{justify-content:center;margin-bottom:1rem;color:#9A9079;} .tmonials .t-head h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.015em;margin:0;color:var(--paper);max-width:24ch;margin-inline:auto;} /* Homepage "wall of praise": aggregate proof bar + two auto-scrolling marquee rows (opposite directions), pause on hover, full-bleed with masked edges. */ .tmonials .t-head h2{margin-bottom:1.1rem;} .praise-proof{display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;} .praise-proof .pstars{color:#C9A24B;letter-spacing:4px;font-size:1.2rem;line-height:1;} .praise-proof .pscore{font-family:Fraunces,serif;font-weight:600;font-size:1.25rem;color:var(--paper);} .praise-proof .ptext{font-size:.92rem;color:#B7AF9D;} .praise-proof .plink{font:500 .72rem/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:#C9A24B;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap;}.praise-proof .plink:hover{color:var(--paper);} .praise-wall{position:relative;display:flex;flex-direction:column;gap:18px;overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .praise-row{overflow:hidden;} .praise-track{display:flex;gap:18px;width:max-content;} .praise-wall.scroll .praise-track{animation:praise-scroll 64s linear infinite;} .praise-wall.scroll .praise-row.rev .praise-track{animation-direction:reverse;animation-duration:78s;} .praise-wall.scroll:hover .praise-track{animation-play-state:paused;} @keyframes praise-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} .praise-card{flex:0 0 clamp(260px,26vw,340px);background:#211B12;border:1px solid rgba(244,241,233,.07);border-radius:5px;padding:22px 24px;display:flex;flex-direction:column;gap:11px;} .praise-card .stars{color:#C9A24B;letter-spacing:3px;font-size:.92rem;line-height:1;} .praise-card .stars .off{color:rgba(201,162,75,.26);} .praise-card blockquote{margin:0;font-family:Inter,sans-serif;font-size:.95rem;line-height:1.55;color:#D9D2C2;} .praise-card .who{font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--paper);margin-top:auto;} .praise-card .who::before{content:"\2014\00a0";color:#9A9079;} @media (prefers-reduced-motion:reduce){ .praise-wall{-webkit-mask:none;mask:none;} .praise-wall.scroll .praise-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;} } /* Mobile: a single scrolling row keeps the reviews block from getting too tall. */ @media(max-width:560px){.praise-wall .praise-row.rev{display:none;}} .section.alt{background:var(--paper-2);} .catfeature .bento,.catfeature .plates{margin-top:4px;} .tile{position:relative;overflow:hidden;display:block;background:var(--paper-2);} .tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;} .tile:hover img{transform:scale(1.05);} .tile .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(23,20,14,.74),rgba(23,20,14,.06) 56%,rgba(23,20,14,0));} .tile .cap{position:absolute;left:20px;right:20px;bottom:17px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;} .tile .nm{font-family:Fraunces,serif;font-weight:500;font-size:1.45rem;line-height:1.04;color:var(--paper);} .tile .go{font:500 .67rem/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-pale);white-space:nowrap;padding-bottom:5px;transition:.15s;} .tile:hover .go{color:var(--paper);} .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:198px;gap:14px;} .bento .b1{grid-column:1/3;grid-row:1/3;}.bento .b2{grid-column:3/5;}.bento .b5{grid-column:1/3;}.bento .b6{grid-column:3/5;} /* Apparel-styles expanding panels (interactive lookbook) sitting under the bento. Hover a panel to widen it and reveal its caption; the others collapse to vertical serif labels. First panel (.is-open) is open by default until the row is hovered. Per-panel background image is set inline in index.php; empty panels fall back to a tinted fill so the row reads before photos are added. */ .panels-head{margin:34px 0 14px;} .panels{display:flex;gap:8px;height:300px;overflow:hidden;} .panels .panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;background:var(--panel) center/cover no-repeat;flex-grow:1;transition:flex-grow .55s cubic-bezier(.4,.05,.15,1);} .panels .panel .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(23,20,14,.82),rgba(23,20,14,.12) 62%,rgba(23,20,14,.28));transition:.3s;} .panels .vlab{position:absolute;bottom:18px;left:50%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-weight:500;font-size:1.05rem;letter-spacing:.02em;color:var(--paper);white-space:nowrap;transition:opacity .3s;} .panels .cap{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;opacity:0;transition:opacity .35s .12s;} .panels .cap .nm{font-weight:500;font-size:1.45rem;line-height:1.02;color:var(--paper);} .panels .cap .go{font:500 .67rem/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-pale);white-space:nowrap;padding-bottom:5px;} .panels .panel.is-open{flex-grow:4.6;} .panels .panel.is-open .vlab{opacity:0;}.panels .panel.is-open .cap{opacity:1;} .panels:hover .panel{flex-grow:1;} .panels:hover .panel .vlab{opacity:1;}.panels:hover .panel .cap{opacity:0;} .panels:hover .panel:hover{flex-grow:4.6;} .panels:hover .panel:hover .vlab{opacity:0;}.panels:hover .panel:hover .cap{opacity:1;} .panels .panel:hover .ov{background:linear-gradient(to top,rgba(23,20,14,.7),rgba(23,20,14,.04) 66%);} .panels .panel:nth-child(6n+1){background-color:#34302a;} .panels .panel:nth-child(6n+2){background-color:#6b3b3b;} .panels .panel:nth-child(6n+3){background-color:#2e2b26;} .panels .panel:nth-child(6n+4){background-color:#3c3a34;} .panels .panel:nth-child(6n+5){background-color:#2a2825;} .panels .panel:nth-child(6n){background-color:#5a3b40;} @media(max-width:780px){ .panels{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:auto;} .panels .panel{height:150px;} .panels .vlab{display:none;} .panels .cap{opacity:1;} } .plates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .plates .tile{aspect-ratio:3/4;} .plates .ov{background:rgba(23,20,14,.34);transition:.25s;} .plates .tile:hover .ov{background:rgba(23,20,14,.52);} .plates .cap{flex-direction:column;align-items:center;justify-content:center;inset:0;text-align:center;gap:8px;} .plates .eyebrow{font:500 .64rem/1 Inter;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-pale);} .plates .nm{font-size:1.5rem;} @media(max-width:780px){.bento{grid-template-columns:1fr 1fr;grid-auto-rows:158px;}.bento .tile{grid-column:auto!important;grid-row:auto!important;}.plates{grid-template-columns:1fr 1fr;}} .creed{background:var(--ink);color:var(--paper);text-align:center;} .creed .wrap{padding:96px 28px;}.creed .rubric{color:var(--accent-creed);justify-content:center;margin-bottom:1.5rem;} .creed blockquote{font-family:Fraunces,serif;font-weight:400;font-size:clamp(1.8rem,4.4vw,3.1rem);line-height:1.18;margin:0 auto;max-width:20ch;} .creed blockquote em{font-style:italic;color:var(--rubric);} .creed cite{display:block;margin-top:1.7rem;font:500 .76rem/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:#9A9079;font-style:normal;} /* Editorial mission band — a parchment block that bridges the image-heavy slider and the dark brand hero below it. Two-column "masthead" split (statement left, supporting copy + shop link right, hairline between) finished with a flanked Latin-motto colophon. */ .brandline{background:var(--paper);padding:84px 28px;} .brandline .rubric{margin-bottom:1rem;} .brandline .rubric::before{display:none;}/* drop the fleuron mark on this eyebrow */ .brandline h2 em{font-style:italic;color:var(--rubric);} .bl-split{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:56px;align-items:center;} .bl-logo{display:flex;align-items:center;justify-content:center;} .bl-logo img{width:132px;height:132px;object-fit:contain;display:block;}/* no circle crop — the emblem is already round on transparent bg, so a mask would trim its edges */ .bl-logo-ph{width:118px;height:118px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:2.1rem;letter-spacing:.04em;color:var(--rubric);background:var(--paper);border:1.5px solid var(--rubric);box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 6px rgba(var(--rubric-rgb),.35);} .bl-head{text-align:right;}/* hug the centered logo so it reads as the centerpiece */ .bl-head h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(2.1rem,4.2vw,2.9rem);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin:0;} .bl-copy p{color:var(--muted);font-size:1.05rem;line-height:1.62;margin:0 0 22px;} .bl-link{display:inline-block;font:500 .76rem/1 Inter;letter-spacing:.13em;text-transform:uppercase;color:var(--rubric);border-bottom:1.5px solid var(--rubric);padding-bottom:3px;transition:.15s;} .bl-link:hover{color:var(--rubric-dark);border-color:var(--rubric-dark);} /* "conviction" — a rubric brushstroke that paints itself left-to-right when the split scrolls into view (and re-paints on hover of the band). With no JS / reduced motion (no .reveal-on) the stroke is simply shown, fully painted. */ .bl-copy .ul-draw{position:relative;white-space:nowrap;} .bl-copy .ul-scribble{position:absolute;left:-5px;right:-5px;bottom:-9px;width:calc(100% + 10px);height:13px;overflow:visible;} .bl-copy .ul-scribble path{fill:var(--rubric);} .reveal-on .brandline .ul-scribble{clip-path:inset(0 100% 0 0);transition:clip-path .95s cubic-bezier(.45,.05,.2,1);} .reveal-on .brandline .bl-split.in .ul-scribble,.brandline:hover .ul-scribble{clip-path:inset(0 0 0 0);} /* Colophon — Latin mottos centred between two short rules. */ .bl-colophon{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:42px;} .bl-colophon::before,.bl-colophon::after{content:"";height:1px;width:72px;background:var(--line);} .bl-motto{font:500 .72rem/1 Inter;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:12px;} .bl-motto i{color:var(--rubric);font-style:normal;} @media(max-width:680px){ .brandline{padding:36px 22px 44px;} .bl-split{grid-template-columns:1fr;gap:14px;text-align:center;justify-items:center;} .brandline .rubric{margin-bottom:.55rem;} .bl-logo{order:-1;}/* logo stacks on top on mobile */ .bl-logo img{width:92px;height:92px;} .bl-logo-ph{width:84px;height:84px;} .bl-logo-ph{font-size:1.5rem;box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px rgba(var(--rubric-rgb),.35);} .bl-head{text-align:center;} .brandline .rubric{justify-content:center;} .bl-colophon{margin-top:30px;} .bl-colophon::before,.bl-colophon::after{width:42px;} .bl-motto .m-extra{display:none;}/* mobile: Soli Deo Gloria only */ } /* Full-width product feature hero — full-bleed stylized image with a left-weighted scrim, slow Ken Burns drift, and scroll-revealed copy. Shared by the brand ("Wear what you believe"), statue, and sticker blocks on the homepage; each sets its own background inline in index.php (CDN-served, swappable). */ .feat-hero{position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate;min-height:clamp(420px,54vw,600px);background:var(--ink);} .feat-hero .sh-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 28%;transform:scale(1.06);will-change:transform;animation:sh-kenburns 24s ease-in-out infinite alternate;} .feat-hero .sh-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,12,8,.88) 0%,rgba(15,12,8,.66) 40%,rgba(15,12,8,.22) 76%,rgba(15,12,8,.04) 100%);} .feat-hero .sh-inner{width:100%;} .feat-hero .sh-copy{max-width:34rem;color:var(--paper);padding:74px 0;} .feat-hero .sh-copy .rubric{color:var(--accent-on-dark);margin-bottom:1.1rem;} .feat-hero .sh-copy h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.06;letter-spacing:-.02em;margin:0 0 1rem;} .feat-hero .sh-copy h2 em{font-style:italic;color:var(--accent-on-dark);} .feat-hero .sh-copy p{color:rgba(244,241,233,.85);font-size:1.06rem;line-height:1.6;margin:0 0 1.9rem;max-width:42ch;} @keyframes sh-kenburns{from{transform:scale(1.06) translate3d(0,0,0);}to{transform:scale(1.15) translate3d(-2%,-1.5%,0);}} @media(prefers-reduced-motion:reduce){.feat-hero .sh-bg{animation:none;transform:none;}} @media(max-width:700px){ .feat-hero{min-height:0;} .feat-hero .sh-bg{background-position:center 22%;} .feat-hero .sh-scrim{background:linear-gradient(180deg,rgba(15,12,8,.40) 0%,rgba(15,12,8,.80) 100%);} .feat-hero .sh-copy{padding:54px 0;max-width:none;text-align:center;} .feat-hero .sh-copy .rubric{justify-content:center;} .feat-hero .sh-copy p{margin-left:auto;margin-right:auto;} } /* Email-signup band: its own full-width strip in the brand accent (toggles with the theme), sitting above the deeper-accent footer. */ .foot-signup{background:var(--rubric);color:var(--paper);} .foot-news{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:42px 0;} .foot-news h3{font-family:Fraunces,serif;font-weight:500;color:var(--paper);font-size:1.4rem;margin:0 0 5px;} .foot-news p{font-size:.9rem;color:rgba(244,241,233,.82);margin:0;max-width:48ch;} .fn-formwrap{flex:0 0 auto;width:440px;max-width:100%;} .fn-form{display:flex;width:100%;} .fn-form input[type=email]{flex:1;min-width:0;background:var(--paper);border:1px solid var(--paper);color:var(--ink);padding:13px 16px;font:400 .9rem Inter;} .fn-form input[type=email]:focus{outline:2px solid var(--paper);outline-offset:-2px;} /* Join the field + button into one clean control: square the button (Bootstrap's .btn adds a 4px radius on product pages, leaving it looking detached/rounded against the square input) and split them with a hairline divider. */ .fn-form .btn{padding:13px 22px;white-space:nowrap;border-radius:0;border-left:1px solid var(--line);} /* Solid buttons on dark / accent surfaces invert: parchment fill + accent text, so a primary button never sits invisibly on a dark section or accent band. Buttons on the light parchment body keep the normal solid-accent fill (defined above). */ .slider .btn-solid,.cta-band .btn-solid,.tmonials .btn-solid,.creed .btn-solid,.foot-signup .btn-solid,.foot .btn-solid{background:var(--paper);border-color:var(--paper);color:var(--rubric);} .slider .btn-solid:hover,.cta-band .btn-solid:hover,.tmonials .btn-solid:hover,.creed .btn-solid:hover,.foot-signup .btn-solid:hover,.foot .btn-solid:hover{background:#fff;border-color:#fff;color:var(--rubric);} /* Hairline between field and button (needs to out-rank the .btn-solid border-color above). */ .foot-signup .fn-form .btn{border-left:1px solid rgba(23,20,14,.16);} .fn-result{margin:10px 0 0;font-size:.85rem;min-height:1em;color:#A39A86;} .fn-result.ok{color:#8fc99a;} .fn-result.err{color:#e6a39c;} .fn-code{display:inline-block;margin-top:4px;padding:2px 10px;background:var(--paper);color:var(--ink);border-radius:4px;font:700 .92rem Inter;letter-spacing:.06em;} .foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding:44px 0 6px;} .foot{background:var(--footer-bg);color:#CFC7B5;} .foot .wrap{padding:0 28px;} .foot h4{font-family:Fraunces,serif;font-weight:500;color:var(--paper);font-size:1.05rem;margin:0 0 16px;} .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .foot ul a{font-size:.92rem;}.foot ul a:hover,.foot p a:hover{color:var(--paper);} .foot .soc{display:flex;gap:16px;font-size:1.15rem;margin-top:16px;}.foot .soc a:hover{color:var(--paper);} .foot .colophon{border-top:1px solid var(--line-lt);padding:22px 0 36px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#8C836F;} .foot .colophon .sdg{color:var(--rubric);letter-spacing:.16em;text-transform:uppercase;font-weight:500;} .scrim{position:fixed;inset:0;background:rgba(23,20,14,.5);opacity:0;visibility:hidden;transition:.2s;z-index:50;}.scrim.on{opacity:1;visibility:visible;} .drawer{position:fixed;top:0;left:0;bottom:0;width:86%;max-width:360px;background:var(--paper);z-index:60;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;} .drawer.open{transform:none;} .drawer .d-top{display:flex;align-items:center;justify-content:flex-end;padding:14px 18px;border-bottom:1px solid var(--line);} /* Quick Ship menu label: small green ship-now dot to the right (reinforces the on-product dot) */ .nav-shipdot{margin-left:3px;} .d-cat{border-bottom:1px solid var(--line);} .d-cat>.d-cat-h{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;font:500 .82rem/1 Inter;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;} .d-cat .d-sub{display:none;padding:0 22px 14px;} .d-cat.exp .d-sub{display:block;}.d-cat.exp>.d-cat-h .chev{transform:rotate(180deg);} .d-cat .d-sub a{display:block;padding:8px 0;font-size:.95rem;color:#43403a;} .d-cat .d-sub .d-sub-h{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#9b8f78;font-weight:600;margin:12px 0 2px;} /* Indent each run of sub-links under a subtle left rule so long category lists read as tidy groups; the d-sub-h headings (and the lead "Shop all" link + promo cards) stay flush, which breaks the rule between groups. */ .d-cat .d-sub a:not(.d-promo):not(:first-child){border-left:1.5px solid var(--line);padding-left:15px;margin-left:1px;} .d-cat .d-sub a:not(.d-promo):not(:first-child):hover{border-left-color:var(--rubric);color:var(--ink);} .d-cat .d-sub>a:first-child{margin-bottom:3px;} .d-cat .d-sub a.d-promo{display:flex;align-items:center;gap:10px;padding:8px 0;} .d-cat .d-sub a.d-promo img{width:52px;height:52px;object-fit:cover;border-radius:8px;background:#ECE6D8;flex:none;} .d-cat .d-sub a.d-promo img.lazyload{opacity:0;} .d-cat .d-sub a.d-promo img.lazyloaded{opacity:1;transition:opacity .4s ease;} .d-cat .chev{transition:.2s;color:var(--rubric);} .drawer .d-soc{display:flex;gap:18px;font-size:1.25rem;padding:22px;} /* Mini cart tray (slides in from the right; ECT incminicart output) */ .cart-tray{position:fixed;top:0;right:0;bottom:0;width:90%;max-width:380px;background:var(--paper);z-index:60;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;display:flex;flex-direction:column;} .cart-tray.open{transform:none;} .ct-top{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);} .ct-title{font-family:Fraunces,serif;font-weight:600;font-size:1.2rem;} .ct-x{background:none;border:0;color:var(--ink);cursor:pointer;padding:0;display:inline-flex;} .ct-body{padding:6px 22px 24px;} /* Theme the ECT-generated .minicart markup */ .ct-body .minicart{font-family:Inter,system-ui,sans-serif;font-size:.95rem;} .ct-body .minicart img{display:none;} .ct-body .minicartcnt{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);} .ct-body .mcLNitems .minicartcnt{display:flex;justify-content:space-between;gap:12px;} /* Per-line thumbnail (mw.js: api/cart-tray-images.php — ECT's own line items are text-only) */ .ct-body .minicart img.ct-thumb{display:block;width:44px;height:44px;object-fit:cover;border-radius:6px;background:var(--paper-2);flex:none;} .ct-body .mcLNitems .minicartcnt:has(.ct-thumb){display:flex;align-items:center;justify-content:flex-start;} .ct-body .ectMCquant,.ct-body .ectMCtot{font-weight:600;color:var(--ink);} .ct-body .minicart>.minicartcnt:first-child,.ct-body .minicart>.minicartcnt:last-child{border-bottom:0;} .ct-body .minicart>.minicartcnt:first-child{padding-top:14px;} .ct-body .minicart>.minicartcnt:first-child a.mincart{font:500 .72rem/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .ct-body .minicart>.minicartcnt:first-child a.mincart:hover{color:var(--rubric);} .ct-body button.mincart,.ct-body input.mincart{display:block;width:100%;text-align:center;margin-top:16px;background:var(--rubric);border:1px solid var(--rubric);color:var(--paper);font:500 .82rem/1 Inter;letter-spacing:.1em;text-transform:uppercase;padding:15px 30px;cursor:pointer;transition:.18s;} .ct-body button.mincart:hover,.ct-body input.mincart:hover{background:var(--rubric-dark);border-color:var(--rubric-dark);color:var(--paper);} /* Soft-add-to-cart popup. ECT injects #scdiv.scart.scwrap into the shared #opaquediv.ectopaque overlay (styled in the softform-modals block above) when the hard cart is off, to confirm the added item. The .ectopaque backdrop + .scclose::before X are inherited; here we only theme the inner .scwrap box and its contents, mirroring the .ectsoftwrapper / .qbuywrapper look. */ .scart.scwrap{position:relative;background:var(--paper);width:100%;max-width:560px;padding:34px 30px 28px;border-radius:3px;box-shadow:0 30px 70px rgba(23,20,14,.35);box-sizing:border-box;text-align:left;font-family:Inter,system-ui,sans-serif;color:var(--ink-soft);animation:nis-pop .22s ease;} .scart.sccheckout{display:block;text-align:center;margin-bottom:8px;} #scoutercontainer{clear:both;} .scart.scprodsadded{clear:both;font-family:Fraunces,serif;font-size:1.25rem;font-weight:500;color:var(--ink);padding:2px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px;} .scimgproducts{display:flex;gap:18px;align-items:flex-start;} .scart.scimage{flex:0 0 120px;width:120px;text-align:center;} img.scimage{max-width:100%;height:auto;border:1px solid var(--line);} .scart.scproducts{flex:1;min-width:0;} .scart.scproduct{padding-bottom:12px;} .scart.scprodname{font-weight:500;color:var(--ink);} .scart.scprice{margin-top:6px;font-weight:600;color:var(--ink);} /* Selected options — styled to match the cart line: a muted label + a soft "filled" chip on the value, the whole set sitting in one subtly-raised card (mirrors .cart-optsgroup / .cartoption). */ .scart.scoptions{margin-top:8px;display:inline-flex;flex-direction:column;gap:5px; padding:8px 12px;background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:8px;} .scart.scoption{display:flex;align-items:baseline;gap:7px;font-size:.84rem;line-height:1.45;color:var(--muted);} .scart.scoptname{font-weight:500;color:var(--muted);} .scart.scoptvalue{color:var(--ink);font-weight:500;background:var(--paper-2);border-radius:5px;padding:1.5px 8px;} /* Cart contents + cart total share one tighter line; the total stands out (bigger + bolder) against the muted contents count. The popup's last block wraps these two + the links row. */ #scoutercontainer>div:last-child{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;border-top:1px solid var(--line);margin-top:16px;padding-top:13px;} .scart.sccartitems{flex:1 1 auto;text-align:left;color:var(--muted);font-size:.84rem;padding:0;margin:0;border:0;} .scart.sccarttotal{flex:0 0 auto;text-align:right;font-weight:700;font-size:1.15rem;color:var(--ink);padding:0;margin:0;border:0;} .scart.sccarttotal span.sccartdscnt,.scart .sccartdscamnt,.scart .mcMCdsct{color:var(--rubric);} .scart.scnostock,.scart.scbackorder{text-align:center;padding:9px;background:#FBE9E7;border:1px solid var(--rubric);color:var(--rubric);margin:8px 0;} .scart.scerror{text-align:center;padding:60px 0;color:var(--rubric);} /* Continue Shopping + Edit Order on one centered row; font-size:0 hides the literal " | " text separator ECT prints between the two buttons (buttons re-set their own size below). */ .scart.sclinks{flex:1 1 100%;display:flex;justify-content:center;gap:8px;font-size:0;padding-top:16px;margin-top:14px;border-top:1px solid var(--line);} /* Buttons inside the popup */ .scart .ectbutton{font:500 .74rem/1 Inter;letter-spacing:.08em;text-transform:uppercase;padding:12px 20px;cursor:pointer;transition:.18s;border:1px solid var(--ink);background:transparent;color:var(--ink);} .scart .ectbutton:hover{background:var(--ink);color:var(--paper);} .scart button.sccheckout,.scart .sccheckout .ectbutton{background:var(--rubric);border-color:var(--rubric);color:var(--paper);} .scart button.sccheckout:hover,.scart .sccheckout .ectbutton:hover{background:var(--rubric-dark);border-color:var(--rubric-dark);color:var(--paper);} .scart .sclinks .ectbutton{margin:0;font-size:.62rem;padding:11px 13px;white-space:nowrap;} /* Quantity badge (mw.js wraps the leading number in the soft-add popup AND the side cart drawer) — a small, lightly-tinted pill so the qty reads apart from the title subtly. */ .sc-qty{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;padding:0 .35em;margin-right:.25em;border-radius:999px;background:rgba(var(--rubric-rgb),.13);color:var(--rubric);font-weight:700;font-size:.82em;line-height:1;vertical-align:.08em;} /* Quantity > 1: solid rubric fill instead of the faint tint, so multi-qty lines stand out at a glance. */ .sc-qty-multi{background:var(--rubric);color:#fff;} /* keep the badge inline with the name in the drawer (its line-item rows can be flex) */ .cart-tray .minicartcnt:has(.sc-qty){display:block;} /* mw.js lifts the product image to the top of the popup so it sits beside the "The following…" heading on the first row; the product details then flow full-width on their own row below. One layout at every width (the popup is capped at 560px), so longer names are never squeezed into a narrow column. */ .sc-floatimg{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;} .sc-floatimg .scart.scimage{flex:0 0 96px;width:96px;} .sc-floatimg .scart.scprodsadded{flex:1;border-bottom:0;margin:0;padding:0;} .sc-floatimg .scimgproducts{flex:1 1 100%;display:block;margin-top:16px;} .sc-floatimg>div:last-child{flex:1 1 100%;} @media(max-width:560px){ /* Tighten the popup type for the narrow viewport: smaller image + serif heading, calmer body, and stack the cart contents / total so the (Discounts) + total can't clip off-edge. */ .scart.scwrap{padding:30px 20px 24px;} .sc-floatimg .scart.scimage{flex:0 0 80px;width:80px;} .scart.scprodsadded{font-size:1.05rem;line-height:1.25;} .scart.scprodname,.scart.scprice{font-size:.95rem;} .scart.sccartitems{flex:1 1 100%;font-size:.78rem;} /* Smaller total so "(Discounts:…) / Cart total:…" fits one line instead of breaking mid-phrase; the discount span rides a touch smaller again for a calmer hierarchy. */ .scart.sccarttotal{flex:1 1 100%;text-align:left;font-size:.92rem;margin-top:4px;line-height:1.4;} .scart .sccartdscnt{font-size:.9em;} } #softcartrelated{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);clear:both;} /* Header drops to the burger + drawer bar below 1024 (the nav no longer fits its * share of a single row). Header-only breakpoint — the site-wide 920 block below * still governs product grids / footer, which are unaffected by the row change. */ @media(max-width:1023px){ .head .wrap.head-top{grid-template-columns:1fr auto 1fr;height:56px;gap:12px;} .head-top .burger{display:inline-flex;grid-column:1;justify-self:start;} .head-top .brand{grid-column:2;justify-self:center;} .head-top .navrow,.icons .desk{display:none;} .head-top .brand img{height:38px;} } @media(max-width:920px){ .grid{grid-template-columns:repeat(2,1fr);gap:28px 18px;} .foot-cols{grid-template-columns:1fr 1fr;} .foot-news{flex-direction:column;align-items:flex-start;gap:16px;} .fn-formwrap{width:100%;} .utility .soc{display:none;} } /* Scroll-reveal: hidden state applied pre-paint via the head's `reveal-on` class (set only when JS+IO available and motion allowed) so content never flashes/jumps. The footer JS just adds `.in` to fade each element in on scroll. */ .reveal-on .brandline>*,.reveal-on .vitem,.reveal-on .section-head,.reveal-on .bento .tile,.reveal-on .plates .tile,.reveal-on .fp-bs-product,.reveal-on .creed blockquote,.reveal-on .news h2,.reveal-on .news p,.reveal-on .ms-card,.reveal-on .feat-hero .sh-copy>*{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);} .reveal-on .brandline>*.in,.reveal-on .vitem.in,.reveal-on .section-head.in,.reveal-on .bento .tile.in,.reveal-on .plates .tile.in,.reveal-on .fp-bs-product.in,.reveal-on .creed blockquote.in,.reveal-on .news h2.in,.reveal-on .news p.in,.reveal-on .ms-card.in,.reveal-on .feat-hero .sh-copy>*.in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){*{transition:none!important;}.slides{transition:none;}} /* ===== ECT product detail (proddetail.php) ===== */ .proddetail-col1,.proddetail-col2{margin-bottom:1.5rem;} /* Collapse an empty cross-sell rail (e.g. "recommended" with no matching products): ECT still prints the
wrapper, so its vertical padding leaves a blank band above the footer. Hide any rail whose product column rendered empty. Scoped to the crosssell columns (they carry the inline text-align), so the reviews slot is untouched. Keyed off the missing .fp-bs-products rail — can't use :empty (ECT leaves a whitespace node) and can't nest :has() inside :has(), so test for the rail via :not(:has()). */ .pd-more section:has(> .container > .row > .col-md-12[style*="text-align"]):not(:has(.fp-bs-products)){display:none;} /* Sticky gallery: the image column follows the scroll until the (taller) info column runs out, then releases — like scripturetype.com. Desktop only; on mobile the columns stack so there's nothing to pin against. Top offset clears the sticky header (.head-top 76px + nav row ≈ 124px). */ @media(min-width:768px){ .proddetail-col1 .pd-gallery-sticky{position:sticky;top:130px;} } .detailimage img{width:100%;height:auto;border-radius:2px;} /* Reserve the thumbnail strip's height before MagicScroll initializes (it builds late, after load), so the page doesn't jump when the initially-tall raw markup collapses to a single strip. Reserved height ≈ one square thumb = column ÷ cols (3 across on desktop, 2 on narrow); overflow clips the tall inner until mw.js pins the exact height. Keep this slightly generous so a thumb is never cropped. */ .detailthumbnailimage{overflow:hidden;aspect-ratio:2/1;} @media(min-width:768px){.detailthumbnailimage{aspect-ratio:3/1;}} .detailname{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.12;letter-spacing:-.012em;color:var(--ink);margin:0 0 1rem;} /* Shopify-style price box: current price + struck original + save pill on one row */ .mw-pricebox{display:flex;align-items:baseline;flex-wrap:wrap;gap:.55rem .7rem;margin:.5rem 0 1rem;} .detailprice{font-size:1.7rem;font-weight:600;color:var(--ink);margin:0;line-height:1;} .detailprice strong{display:none;} /* hide the "Price:" label */ .detailprice .price{color:inherit;} /* When discounted (save badge present), the live price turns rubric-red */ .mw-pricebox:has(.mw-savebadge) .detailprice .price{color:var(--rubric);} .listpricediv,.detaillistprice{color:var(--muted);} .detaillistprice{font-size:1.05rem;} .detaillistprice del,.listprice del,.detailprice del{color:var(--muted);font-weight:400;text-decoration-thickness:1px;} /* "Save X%" pill */ .mw-savebadge{display:inline-flex;align-items:center;} .mw-savebadge .badge{display:inline-block;background:var(--rubric);color:var(--paper);font:600 .68rem/1 Inter;letter-spacing:.06em;text-transform:uppercase;padding:.4em .6em;border-radius:999px;} /* Hide the now-redundant ECT percent-off text (the pill carries it) */ .detailpercentofflistprice{display:none;} .shiptime{font-size:.92rem;color:var(--muted);margin:.5rem 0 1rem;} .detailoptions,.optioncontainer{margin:1.1rem 0;} .optiontext,.detailoptiontext{font:500 .78rem/1.4 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;display:block;} .detailquantity,.quantity2div{margin:1rem 0;} .quantity2input,input.detailquantity2input,input.detailquantity{border:1px solid var(--line);padding:10px 12px;width:74px;font:400 1rem Inter;border-radius:2px;} /* ECT buttons -> theme button (also themes cart/checkout/account site-wide) */ .ectbutton{display:inline-block;font:500 .8rem/1 Inter;letter-spacing:.1em;text-transform:uppercase;padding:14px 28px;border:1px solid var(--rubric);background:var(--rubric);color:var(--paper);cursor:pointer;transition:.18s;border-radius:2px;text-decoration:none;} .ectbutton:hover{background:var(--rubric-dark);border-color:var(--rubric-dark);color:var(--paper);} .ectbutton.forgotpassword,.ectbutton.createaccount,.ectbutton.newaccount{background:transparent;color:var(--ink);border-color:var(--ink);} .ectbutton.forgotpassword:hover,.ectbutton.createaccount:hover,.ectbutton.newaccount:hover{background:var(--ink);color:var(--paper);} .addtocartquant,.detailaddtocartquant{margin-top:1.4rem;} .detailbuybutton,.ectbutton.buybutton{padding:16px 40px;font-size:.88rem;} .detailprodoption,.rcoption{margin-bottom:.4rem;} /* ===== Product detail refinements: breadcrumb, options-as-buttons, quantity, add-to-cart ===== */ /* Breadcrumb cleanup + hide the in-breadcrumb "Proceed to Checkout" */ .catnavdetail{font-size:.85rem;color:var(--muted);line-height:1.7;margin:0 0 1.2rem;} .catnavdetail .ectbreadcrumb{display:inline;} .catnavdetail a.ectlink{color:var(--muted);text-decoration:none;} .catnavdetail a.ectlink:hover{color:var(--rubric);} .catnavcheckout{display:none;} /* Radio/checkbox options styled as selectable buttons. A single-value option group is emitted by ECT as a pre-checked .ectcheckbox (not a radio) — hide that native box too so it renders as a button like the rest. */ .option.detailoption{display:flex;flex-wrap:wrap;gap:8px;} .rcoption{position:relative;margin:0;} .rcoption input.ectradio,.rcoption input.ectcheckbox{position:absolute;opacity:0;width:1px;height:1px;} .rcoption label.ectlabel{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 16px;min-width:46px;text-align:center;font-size:.92rem;line-height:1.1;cursor:pointer;border-radius:2px;transition:.15s;} .rcoption label.ectlabel:hover{border-color:var(--ink);} .rcoption input.ectradio:checked + label.ectlabel,.rcoption input.ectcheckbox:checked + label.ectlabel{background:var(--ink);border-color:var(--ink);color:var(--paper);} .rcoption input.ectradio:focus-visible + label.ectlabel,.rcoption input.ectcheckbox:focus-visible + label.ectlabel{outline:2px solid var(--rubric);outline-offset:2px;} /* "hidden" admin option Class = remove the option entirely (not just mark it sold out). ECT puts the optClass on the .rcoption wrapper, so an option set to "hidden" in the back office disappears from the size selector. (.hidden is scoped here, not global, so it can't clobber other uses like .cart-count.hidden.) */ .rcoption.hidden{display:none;} /* Sold-out option buttons. ECT marks the