/* Studio M — site stylesheet
   Structure: tokens · base · header · hero · buttons · intro · range ·
   story · journal · contact · footer · founders page · responsive.
   Historical override layers have been resolved into single rules;
   computed styles and layout geometry are unchanged. */

/* ---------- Tokens ---------- */
:root{--paper:#f6f4ef;--ink:#20251f;--olive:#30382d;--line:#d6d7cc;--muted:#62665d;--gutter:clamp(22px,5vw,88px)}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:hover{text-underline-offset:5px}
a:focus-visible{outline:2px solid #a88248;outline-offset:5px}
img{display:block;max-width:100%}
figure{margin:0}
h1,h2,h3,p{margin-top:0}
h2{font-size:clamp(38px,4.5vw,68px);line-height:1.05;font-weight:400;letter-spacing:-.055em;margin-bottom:24px}
em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.06em}
.skip{position:absolute;top:-100px;z-index:100;background:white;padding:16px}
.skip:focus{top:0}
.eyebrow{font-size:12px;letter-spacing:.14em;line-height:1.5;margin-bottom:25px}
.underlink{display:inline-block;font-size:14px;border-bottom:1px solid;padding:0 0 5px}
.underlink:hover{opacity:.7}

/* ---------- Header ---------- */
.masthead{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px var(--gutter);background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 1px 0 #20251f05}
.wordmark{display:flex;align-items:center;gap:12px;font-weight:700;font-size:24px;letter-spacing:-1px;white-space:nowrap}
.wordmark img{width:36px;height:40px;object-fit:contain}
.masthead nav{display:flex;gap:32px;font-size:14px}
.masthead nav a:hover{text-decoration:underline}
.meet-nav{font-size:12px;letter-spacing:.06em;white-space:nowrap}
.meet-nav[aria-current=page]{text-decoration:underline;text-underline-offset:7px}
.header-shop{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--ink);color:var(--paper);padding:11px 22px;font-size:14px;white-space:nowrap}
.header-shop:hover{background:#46503f}

/* ---------- Hero ---------- */
.hero{height:min(820px,84svh);min-height:590px;position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.hero video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b120ab8,#0b120a10 85%),linear-gradient(0deg,#0b120a70,transparent 65%)}
.hero-content{position:absolute;left:var(--gutter);right:var(--gutter);bottom:65px}
.hero .eyebrow{margin-bottom:32px}
.hero h1{font-size:clamp(85px,10vw,160px);font-weight:400;line-height:.9;letter-spacing:-.075em;margin-bottom:38px}
.hero h1 em{line-height:1.07}
.hero-lower{display:flex;align-items:center;gap:50px}
.hero-lower p{line-height:1.6;margin:0;font-size:17px}

/* ---------- Buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;border:1px solid transparent;font-size:14px;transition:background .2s,color .2s}
.cream{background:var(--paper);color:var(--ink)}
.cream:hover{background:#dedfce}
.outline{border-color:#a1aa92;color:var(--paper)}
.outline:hover{background:var(--paper);color:var(--ink)}

/* ---------- Intro ---------- */
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;padding:66px var(--gutter)}
.intro>p{font-size:clamp(32px,3.6vw,52px);line-height:1.1;letter-spacing:-.05em;margin:0}
.intro>div{max-width:420px;justify-self:end}
.intro>div>p{margin:0 0 17px;color:var(--muted)}

/* ---------- Range ---------- */
.range{padding:0 var(--gutter)}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding-top:34px;margin-bottom:35px}
.section-heading h2{margin:0;font-size:clamp(38px,4vw,58px)}
.section-heading>span{font-size:12px;letter-spacing:.08em}
.products{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 22px}
.product{min-width:0;display:flex;flex-direction:column}
.product-image{position:relative;display:block;aspect-ratio:1/1.12;overflow:hidden;background:#ddd9d0;isolation:isolate}
.product-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.product-image:hover img{transform:scale(1.04)}
.size{position:absolute;top:16px;left:17px;font-size:12px;letter-spacing:.08em}
.product-title{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:22px 0 8px}
.product-title h3{font-size:24px;line-height:1.2;letter-spacing:-.04em;font-weight:400;margin:0}
.product-title>span{font-size:16px;white-space:nowrap}
.product p{font-size:14px;color:var(--muted);margin:0 0 19px}
.product .finish{font-size:12px;letter-spacing:.045em;color:var(--ink);margin-bottom:10px}
.shop-link{display:flex;justify-content:center;align-items:center;min-height:48px;border:1px solid var(--ink);font-size:14px;margin-top:auto;transition:background .2s,color .2s}
.shop-link:hover{background:var(--ink);color:var(--paper)}
.product .shop-link{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.product .shop-link:hover{background:#46513f}
.product .product-title{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-height:30px}
.product .product-title h3{min-height:0;margin:0}
.product .product-title>span{margin:0}
.product>p:not(.finish){min-height:45px}
.product-values{display:flex;justify-content:space-between;gap:20px;padding:30px 0 34px;border-top:1px solid var(--line);margin-top:22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Story ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;background:var(--olive);color:var(--paper)}
.story-image{position:relative;min-height:660px;overflow:hidden}
.story-image img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.story-image>span{position:absolute;left:8%;bottom:25px;font-size:12px;letter-spacing:.12em;color:white;text-shadow:0 1px 6px #000}
.story-copy{padding:65px 12%;align-self:center}
.story-copy h2{font-size:clamp(40px,4.5vw,67px);margin-bottom:32px}
.story-copy>p:not(.eyebrow){color:#d1d6cb;margin-bottom:21px;max-width:440px}
.story-copy .button{margin-top:12px}

/* ---------- Studio journal ---------- */
.studio-journal{padding:78px var(--gutter) 84px}
.journal-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:45px;margin-bottom:40px}
.journal-heading h2{margin:0}
.journal-intro{max-width:310px;padding-bottom:5px}
.journal-intro p{color:var(--muted);margin-bottom:19px}
.journal-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:900px;margin:0 auto}
.studio-clip{position:relative;min-width:0}
.studio-clip video{display:block;width:100%;aspect-ratio:512/910;object-fit:cover;background:var(--ink)}
.journal-films video{width:100%;height:auto;aspect-ratio:512/910;object-fit:cover}
.studio-clip figcaption{font-size:14px;color:var(--muted);padding-top:12px}
.journal-films figcaption{border-bottom:1px solid var(--line);padding:15px 0 18px;font-size:14px}

/* ---------- Contact ---------- */
.contact{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:55px var(--gutter);background:#e7e6dc;border-top:1px solid var(--line)}
.contact h2{font-size:clamp(34px,3.5vw,52px);margin:0;max-width:450px}
.contact p{color:var(--muted);font-size:14px;margin-bottom:7px}
.contact a{font-size:18px;border-bottom:1px solid;padding-bottom:5px}

/* ---------- Footer ---------- */
footer{padding:60px var(--gutter) 24px;background:#191e18;color:var(--paper)}
.footer-main{display:grid;grid-template-columns:1.7fr 1.2fr 1fr 1fr;gap:30px;padding-bottom:50px}
.footer-logo{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:700;letter-spacing:-1px}
.monogram{width:38px;height:44px}
.monogram img{height:100%;width:100%;object-fit:contain;filter:invert(1)}
.footer-main p{font-size:14px;color:#aeb6a8;margin-top:20px}
.footer-main h3{font-size:12px;color:#aeb6a8;text-transform:uppercase;letter-spacing:.09em;font-weight:400;margin-bottom:20px}
.footer-main a:not(.logo){display:block;font-size:14px;margin:10px 0;overflow-wrap:anywhere}
.footer-main a:hover{text-decoration:underline}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:#aeb6a8;border-top:1px solid #424b3d;padding-top:24px}
.footer-bottom>div{display:flex;gap:20px}

/* ---------- Founders page ---------- */
.founders-page{max-width:1440px;margin:0 auto}
.founders-intro{padding:76px var(--gutter) 55px;display:grid;grid-template-columns:1.2fr 1fr;gap:25px 70px;align-items:end}
.founders-intro .eyebrow{grid-column:1/-1;margin:0}
.founders-intro h1{font-size:clamp(65px,7.5vw,112px);line-height:.99;letter-spacing:-.065em;font-weight:400;margin:0}
.founders-lead{max-width:420px;color:var(--muted);margin:0 0 5px;font-size:18px;line-height:1.75}
.founder-profiles{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:0 var(--gutter) 70px}
.founder-photo{position:relative;aspect-ratio:4/5;background:#e4e3dd;overflow:hidden}
.founder-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.025)}
.sam-photo img{object-position:51% 45%}
.cj-photo img{object-position:50% 30%;transform:scale(1.18);transform-origin:50% 35%}
.founder-copy{padding:27px 0 0}
.founder-name{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:18px}
.founder-name h2{font-size:32px;letter-spacing:-.035em;margin:0}
.founder-name span{font-size:12px;letter-spacing:.06em}
.founder-copy>p{max-width:480px;color:var(--muted);font-size:16px;line-height:1.8;margin-bottom:22px;min-height:115px}
.founder-book{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;border-bottom:1px solid var(--ink);font-size:13px;letter-spacing:.04em}
.founder-book:hover{opacity:.7}
.regime-note{display:flex;align-items:center;gap:30px;margin:0 var(--gutter);padding:35px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.regime-note img{width:90px;height:108px;object-fit:contain;flex-shrink:0;mix-blend-mode:multiply}
.regime-note .eyebrow{margin-bottom:10px}
.regime-note h2{font-size:29px;letter-spacing:-.035em;margin-bottom:12px}
.regime-note p:last-child{color:var(--muted);margin:0;max-width:530px}
.founders-shop{padding:52px var(--gutter) 65px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.founders-shop>p{font-size:36px;letter-spacing:-.04em;line-height:1.15;margin:0}

/* ---------- Responsive ---------- */
@media(min-width:1700px){:root{--gutter:max(6%,calc((100vw - 1500px)/2))}}

@media(min-width:1100px){
.hero-content{bottom:64px}
.hero-lower{gap:45px}
.product-image{aspect-ratio:4/5}
.product .finish{min-height:36px}
}

/* Below five-across the range runs 3+2 then 2+2+1. The grid is doubled up so
   the trailing row can sit centred rather than stranded to one side; card
   widths are identical to a plain 3- or 2-column grid. */
@media(max-width:1299px){
.products{grid-template-columns:repeat(6,minmax(0,1fr))}
.product{grid-column:span 2}
.product:nth-child(4){grid-column:2/span 2}
.product:nth-child(5){grid-column:4/span 2}
}

@media(max-width:1000px){
.masthead nav{gap:18px}
.masthead nav>a:not(.meet-nav){display:none}
.products{grid-template-columns:repeat(4,minmax(0,1fr))}
.product:nth-child(4){grid-column:span 2}
.product:nth-child(5){grid-column:2/span 2}
.story-copy{padding:45px 9%}
.story-image{min-height:620px}
.footer-main{grid-template-columns:1fr 1fr}
.founder-profiles{gap:28px}
.founder-name{display:block}
.founder-name span{display:block;margin-top:7px}
}

@media(max-width:700px){
html{scroll-padding-top:90px}
.masthead{padding:13px 20px;gap:12px;flex-wrap:wrap;row-gap:0}
.wordmark{font-size:21px;gap:8px}
.wordmark img{width:27px;height:32px}
.header-shop{font-size:12px;padding:11px 14px}
.hero{height:calc(86svh - 64px);min-height:540px;max-height:780px}
.hero video{object-position:center 42%}
.hero-shade{background:linear-gradient(0deg,#0c130aca,#0c130a15 90%)}
.hero-content{bottom:45px}
.hero h1{font-size:clamp(69px,16vw,110px);letter-spacing:-.075em;margin-bottom:26px}
.hero .eyebrow{font-size:12px;margin-bottom:26px}
.hero-lower{display:block}
.hero-lower p{font-size:16px;margin-bottom:22px}
.intro{padding:36px var(--gutter) 37px;grid-template-columns:1fr;gap:22px}
.intro>p{font-size:36px}
.intro>div{max-width:none;justify-self:start}
.section-heading{display:block;padding-top:28px;margin-bottom:26px}
.section-heading h2{font-size:39px;margin-bottom:12px}
.section-heading>span{font-size:12px}
.products{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 14px}
.product-image{aspect-ratio:3/4}
.size{font-size:12px;top:11px;left:10px;letter-spacing:0}
.product-title{margin:15px 0 8px}
.product-title h3{font-size:23px}
.product .finish{font-size:12px;min-height:38px;line-height:1.5;letter-spacing:0;margin-bottom:8px}
.product p{font-size:14px;line-height:1.5;margin-bottom:17px}
.shop-link{font-size:14px}
.product .product-title{flex-wrap:wrap;gap:5px 10px;min-height:56px;align-items:flex-start}
.product .product-title h3{font-size:22px}
.product .product-title>span{font-size:14px}
.product>p:not(.finish){min-height:63px}
.product-values{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:12px;text-align:center;letter-spacing:.04em;margin-top:14px}
.story{grid-template-columns:1fr}
.story-image{min-height:0;height:380px}
.story-copy{padding:43px var(--gutter) 50px}
.story-copy h2{font-size:46px}
.studio-journal{padding:45px var(--gutter) 42px;overflow:hidden}
.journal-heading{display:block;margin-bottom:27px}
.journal-heading h2{font-size:41px;line-height:1.08}
.journal-intro{max-width:none;margin-top:24px}
.journal-films{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-bottom:0}
.journal-films figcaption{font-size:12px;padding-top:12px;padding-bottom:14px}
.studio-clip figcaption{font-size:12px}
.contact{padding:32px var(--gutter) 34px;display:block}
.contact h2{font-size:39px;margin-bottom:23px}
.contact a{font-size:17px}
footer{padding-top:40px}
.footer-main{gap:28px 20px;row-gap:32px;padding-bottom:30px}
.footer-main>div:first-child{grid-column:1/-1}
.footer-main h3{margin-bottom:17px}
.footer-bottom>span:last-child{width:100%}
.masthead nav{display:flex;order:3;width:100%;justify-content:center;border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.masthead nav .meet-nav{display:block;font-size:12px;padding:3px 0}
.founders-intro{padding:40px var(--gutter) 32px;grid-template-columns:1fr;gap:22px}
.founders-intro h1{font-size:66px}
.founders-lead{font-size:16px;max-width:none}
.founder-profiles{grid-template-columns:1fr;gap:42px;padding-bottom:42px}
.founder-photo{aspect-ratio:4/5}
.founder-copy{padding-top:22px}
.founder-name{display:flex;align-items:baseline}
.founder-name span{font-size:11px;margin:0}
.founder-copy>p{min-height:0}
.regime-note{gap:20px;align-items:flex-start;padding:28px 0}
.regime-note img{width:64px;height:80px}
.regime-note h2{font-size:27px}
.regime-note p:last-child{font-size:14px}
.founders-shop{display:block;padding-top:36px;padding-bottom:42px}
.founders-shop>p{font-size:32px;margin-bottom:25px}
}

@media(max-width:340px){
.product .product-title h3{font-size:20px}
}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.product-image img,.button,.shop-link{transition:none}
}