*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{--bg:#d8d6ce;--ink:#1f1c19;--soft:#655f58;--line:#c8c5bb;--accent:#7c7268;--accent2:#3a352f;--card:#e6e4dc;--g1:#cecbc1;--g2:#bcb8ab;--dark:#1f1c19;--darkfg:#d8d6ce;--darksoft:#9a948a;--darkline:#3a352f;--darkaccent:#b0a89b;--close1:#d2cfc6;--close2:#c4c0b4}
body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}

/* nav */
.nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .in{max-width:1180px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:14px;cursor:pointer;line-height:1}
.brand .l-bar{width:4px;height:42px;background:var(--accent);flex-shrink:0}
.brand .txt{font-family:'Fraunces';font-weight:600;font-size:34px;letter-spacing:-0.025em;line-height:1}
.brand .txt .d{color:var(--accent)}
/* no cart in the header any more, so the links sit at the right edge themselves */
.nav .links{display:flex;gap:36px;font-size:15.5px;color:var(--soft);margin-left:auto;margin-right:0}
.nav .links a{cursor:pointer;transition:color .2s;font-weight:600}
.nav .links a:hover{color:var(--ink)}
/* the one thing in the header anybody is meant to click, so it is a control
   rather than another word in a row of words */
.nav .links a.nav-cta{background:var(--ink);color:var(--bg);padding:9px 20px;border-radius:100px;font-weight:600;transition:transform .2s,background .2s,color .2s}
.nav .links a.nav-cta:hover{color:var(--bg);background:var(--accent);transform:translateY(-1px)}
.nav .links{align-items:center}

/* image placeholder */
.frame{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--soft);background:linear-gradient(150deg,var(--g1),var(--g2))}
img.frame{width:100%;height:auto;object-fit:cover;display:block;background:none}
/* A picture is only a wrapper for choosing the file. Without this it becomes the grid
   item in .story .row and the box that lays out in .hero, in place of the img inside it,
   which is not what any of the rules below are written against. */
picture{display:contents}
/* And the source has to go with it. Taking the picture out of the layout hands ALL of
   its children to the parent, not just the img, and a bare <source> computes to inline
   in the browser, not to none. So every <source> came back as a second, zero-height
   item in .story .row's grid and ate a cell, which pushed the img on to a row of its
   own underneath the text. Hiding it is what makes display:contents mean "the img is
   the item". It does not affect which file is chosen: the picture element picks its
   source from the DOM, not from the box tree. */
source{display:none}
.frame .mk{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.55;text-align:center;padding:20px}
.frame .mk svg{width:30px;height:30px}
.frame .mk .lb{font-size:10px;letter-spacing:0.18em;text-transform:uppercase}
.frame .cn{position:absolute;width:16px;height:16px;opacity:.3}
.frame .cn.tl{top:16px;left:16px;border-top:1px solid currentColor;border-left:1px solid currentColor}
.frame .cn.tr{top:16px;right:16px;border-top:1px solid currentColor;border-right:1px solid currentColor}
.frame .cn.bl{bottom:16px;left:16px;border-bottom:1px solid currentColor;border-left:1px solid currentColor}
.frame .cn.br{bottom:16px;right:16px;border-bottom:1px solid currentColor;border-right:1px solid currentColor}

/* hero side by side */
.wrap-hero{max-width:1340px;margin:0 auto;padding:0 40px}
.hero{position:relative;width:100%;min-height:540px;display:flex;align-items:flex-end;padding-bottom:52px;overflow:hidden;border-radius:18px;margin-top:20px;box-shadow:0 40px 80px -20px rgba(31,28,25,.42),0 10px 30px rgba(31,28,25,.18)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,18,16,0.62) 0%,rgba(20,18,16,0.4) 34%,rgba(20,18,16,0.14) 62%,rgba(20,18,16,0.03) 100%),linear-gradient(0deg,rgba(20,18,16,0.55) 0%,rgba(20,18,16,0.25) 34%,rgba(20,18,16,0) 60%)}
.hero-content{position:relative;z-index:2;color:#fff;text-align:left;width:100%;padding:0 60px}
.hero-content .inner{max-width:54%}
.hero-content .hero-line{font-family:'Fraunces';font-weight:340;font-size:clamp(44px,6vw,82px);line-height:1.0;letter-spacing:-0.02em;margin-bottom:22px;color:#fff;white-space:nowrap}
.hero-content .hero-line em{font-style:italic;font-weight:340;color:#e8d9c4}
.hero-btn{background:#fff;color:var(--ink);padding:15px 38px;font-weight:600}
.hero-btn:hover{background:var(--ink);color:#fff}
.btn{display:inline-block;background:var(--ink);color:var(--bg);padding:15px 32px;border-radius:100px;font-size:15px;font-weight:500;transition:transform .2s,background .2s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}

/* trust */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.trust .in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.trust .t{font-size:13px;color:var(--soft)}
.trust .t b{color:var(--ink);font-weight:600}

/* intro */
.intro{padding:64px 0 0;text-align:center;max-width:720px;margin:0 auto}
.intro .k{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent2);margin-bottom:20px;font-weight:600}
.intro h2{font-family:'Fraunces';font-weight:300;font-size:clamp(30px,3.6vw,42px);line-height:1.2;letter-spacing:-0.02em;margin-bottom:22px}
.intro p{font-size:17px;color:var(--soft);line-height:1.85}

/* story */
.story{padding:90px 0}
.story .row{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-bottom:80px}
.story .row:last-child{margin-bottom:0}
.story .row:nth-child(even) .txt{order:2}
.story .frame{aspect-ratio:4/3;border-radius:14px;box-shadow:0 40px 80px -20px rgba(31,28,25,.42),0 10px 30px rgba(31,28,25,.18)}
.story img.frame{aspect-ratio:auto;height:auto}
.story .k{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-weight:600}
.story h1,.story h2{font-family:'Fraunces';font-weight:400;font-size:34px;line-height:1.15;letter-spacing:-0.02em;margin-bottom:18px}
.story p{font-size:16px;color:var(--soft);line-height:1.8;margin-bottom:14px}

/* process */
.process{background:var(--dark);color:var(--darkfg);padding:90px 0}
.process .k{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--darkaccent);margin-bottom:16px;font-weight:600;text-align:center}
.process h2{font-family:'Fraunces';font-weight:300;font-size:42px;text-align:center;margin-bottom:56px;letter-spacing:-0.02em}
.process .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.process .steps-4{grid-template-columns:repeat(4,1fr);gap:32px}
.process .st{text-align:center}
.process .st .hex{width:58px;height:64px;margin:0 auto 20px;position:relative;display:flex;align-items:center;justify-content:center}
.process .st .hex::before{content:"";position:absolute;inset:0;background:var(--darkaccent);opacity:.16;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.process .st .hex::after{content:"";position:absolute;inset:1.5px;background:var(--dark);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.process .st .hex span{position:relative;z-index:1;font-family:'Fraunces';font-size:16px;color:var(--darkaccent);letter-spacing:0.06em}
.process .st h4{font-family:'Fraunces';font-weight:500;font-size:20px;margin-bottom:10px}
.process .st p{font-size:14px;color:var(--darksoft);line-height:1.75}
.process-cta{text-align:center;margin-top:56px}
.process-btn{background:var(--bg);color:var(--ink);padding:15px 38px;font-weight:600}
.process-btn:hover{background:var(--darkaccent);color:var(--ink)}

/* teaser */
.teaser{padding:96px 0;text-align:center}
.teaser .k{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent2);margin-bottom:16px;font-weight:600}
.teaser h2{font-family:'Fraunces';font-weight:300;font-size:clamp(32px,4.2vw,50px);line-height:1.08;letter-spacing:-0.03em;margin-bottom:20px;max-width:20ch;margin-left:auto;margin-right:auto}
.teaser p{font-size:17px;color:var(--soft);max-width:48ch;margin:0 auto 40px;line-height:1.8}
.teaser .tease-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px}
.teaser .tease-imgs .frame{aspect-ratio:1/1;border-radius:10px}
.teaser .tease-imgs a.frame{overflow:hidden}
.teaser .tease-imgs a.frame img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}

/* ==================== FAQ ====================
   Cards, per FAQ_style.md. Still native <details> and <summary>: the opening
   and closing needs no script, the summary is already a control in the tab
   order, and find-in-page can still reach a closed answer. The script below
   only closes the others, and the page is fully usable without it.

   The expansion is the 0fr to 1fr grid-rows trick, which animates to the
   content's own height without anybody having to measure it. */
.faq{padding:96px 0 100px;border-top:1px solid var(--line)}
.faq-head{max-width:640px;margin:0 auto 44px;text-align:center}
.faq-head .k{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent2);margin-bottom:16px;font-weight:600}
.faq-head h2{font-family:'Fraunces';font-weight:300;font-size:clamp(30px,3.6vw,42px);line-height:1.2;letter-spacing:-0.02em}

.faq-list{display:flex;flex-direction:column;gap:14px;max-width:780px;margin:0 auto}
.faq-item{background:var(--card);border:1px solid transparent;border-radius:16px;transition:border-color .25s,box-shadow .3s,background .25s;overflow:hidden}
.faq-item[open]{border-color:var(--line);box-shadow:0 18px 40px -22px rgba(31,28,25,.4);background:color-mix(in srgb,var(--card) 70%,#fff)}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:'Fraunces',serif;font-weight:400;font-size:19px;letter-spacing:-.01em;color:var(--ink);transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item:hover summary{color:var(--accent)}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:16px}
.faq-mk{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--accent);position:relative;transition:transform .35s cubic-bezier(.4,0,.2,1),background .25s}
.faq-mk::before,.faq-mk::after{content:"";position:absolute;background:var(--accent);border-radius:2px;transition:background .25s}
.faq-mk::before{width:12px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-mk::after{height:12px;width:1.5px;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .35s,transform .35s}
.faq-item[open] .faq-mk{transform:rotate(135deg);background:var(--accent)}
.faq-item[open] .faq-mk::before,.faq-item[open] .faq-mk::after{background:#fff}
.faq-item[open] .faq-mk::after{opacity:0}
.faq-ans{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1)}
.faq-item[open] .faq-ans{grid-template-rows:1fr}
.faq-ans-inner{overflow:hidden;min-height:0}
/* Closing is the half the browser does not animate: it hides the content the
   moment `open` comes off. The script holds it open, adds this class to run the
   same transition backwards, and drops `open` when it finishes. Declared after
   the [open] rule so it wins at equal specificity. */
.faq-item.is-closing .faq-ans{grid-template-rows:0fr}
.faq-item.is-closing{box-shadow:none}
.faq-ans p{padding:0 24px 24px;color:var(--soft);font-size:15.5px;line-height:1.8;max-width:60ch}

@media(prefers-reduced-motion:reduce){
.faq-item,.faq-mk,.faq-ans,.faq-mk::before,.faq-mk::after{transition:none}
}
@media(max-width:860px){
.faq{padding:64px 0 72px}
.faq-item summary{font-size:17px;padding:19px 18px;gap:14px}
.faq-ans p{padding:0 18px 20px;font-size:15px}
}

/* footer */
/* the line that closes the page. --line is nearly the same value as --bg, so at
   1px it disappeared: this is the same greige family, mixed dark enough to read. */
.foot{padding:16px 0 30px;border-top:2px solid color-mix(in srgb,var(--ink) 34%,var(--bg))}
.foot .in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:28px}
.foot .brand{margin-bottom:10px}
.foot .brand .l-bar{height:36px}
.foot .brand .txt{font-size:29px}
.foot .about{font-size:13px;color:var(--soft);max-width:34ch;line-height:1.7}
.foot .col{text-align:right}
.foot .col h5{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.foot .col a{display:block;font-size:14px;color:var(--ink);margin-bottom:9px;cursor:pointer}
.foot .cr{font-size:12px;color:var(--soft);border-top:1px solid color-mix(in srgb,var(--ink) 20%,var(--bg));padding-top:24px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px}
.foot .cr span:last-child{text-align:right;line-height:1.6}

@media(max-width:860px){
.nav .links{display:none}
/* The hero is one photograph with the copy laid over it, so on a narrow screen
   the only thing that matters is how wide the copy column is allowed to be.
   `.hero-content` keeps a 60px inset and `.inner` a 54% cap, both of which are
   desktop numbers, and until this block set them the sum was
   390 - 80 - 120 = 190, times 54%, or a 103px column: the heading broke into
   three lines, the sentence into seven, and the call to action wrapped into a
   circle. 22px is the padding `.wrap` already takes below, so the hero now
   lines up with every other section instead of sitting further in than all of
   them. */
.wrap-hero{padding:0 22px}
.hero-content{padding:0 26px}
.hero-content .inner{max-width:100%}
/* nowrap is a desktop measure. 390px cannot hold the line at 44px, so let it break. */
.hero-content .hero-line{white-space:normal}
.story .row{grid-template-columns:1fr;gap:36px}
.story .row:nth-child(even) .txt{order:0}
.process .steps{grid-template-columns:1fr;gap:36px}
.teaser .tease-imgs{grid-template-columns:1fr}
.wrap,.nav .in{padding:0 22px}
.nav .in{padding:14px 22px}
}

/* ==================== SHIPPING & RETURNS MODAL ==================== */
.modal-ov{position:fixed;inset:0;z-index:1000;background:rgba(20,18,16,0.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .28s ease}
.modal-ov.on{opacity:1;pointer-events:auto}
.modal{position:relative;background:var(--bg);border-radius:18px;max-width:540px;width:100%;max-height:85vh;overflow-y:auto;padding:40px 40px 36px;box-shadow:0 40px 90px -20px rgba(20,18,16,.5);transform:translateY(14px) scale(.98);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.modal-ov.on .modal{transform:translateY(0) scale(1)}
.modal-x{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:50%;background:transparent;border:none;font-size:26px;line-height:1;color:var(--soft);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.modal-x:hover{background:var(--line);color:var(--ink)}
.modal h3{font-family:'Fraunces';font-weight:400;font-size:28px;letter-spacing:-0.02em;margin-bottom:22px;padding-right:30px}
.modal-body h4{font-family:'Fraunces';font-weight:500;font-size:17px;margin:20px 0 8px;color:var(--ink)}
.modal-body h4:first-child{margin-top:0}
.modal-body p{font-size:15px;color:var(--soft);line-height:1.7;margin-bottom:4px}
.modal-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.modal-body a:hover{color:var(--ink)}

/* link into Shelf Studio, used on the home page */
.st-link{color:var(--darkaccent);font-weight:600;font-size:14px;border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .2s}
.st-link:hover{color:var(--bg)}
.btn.ghost.process-ghost{border-color:var(--darkaccent);color:var(--darkaccent);background:transparent;margin-left:10px}
.btn.ghost.process-ghost:hover{background:var(--darkaccent);color:var(--ink)}
@media(max-width:640px){.process-ghost{margin-left:0;margin-top:12px}}