/* Hallmark · genre: editorial · macrostructure: The Instrument (scroll narrative) · tone: luxury · anchor hue: brown 50°
 * design-system: docs/visual-system.md (v2) · designed-as-app
 * pre-emit critique: P4 H4 E4 S4 R4 V4
 * Visual system v2 — loaded after style.css. Adds the cinematic home, page headers and the full commerce set.
 */
:root{
	--bone:oklch(95.5% 0.012 75);
	--bone-2:oklch(91% 0.018 72);
	--ink:oklch(17% 0.008 50);
	--brown:oklch(34.5% 0.045 48);
	--brown-deep:oklch(21% 0.028 48);
	--brown-line:oklch(74% 0.03 60);
	--on-dark:oklch(97% 0.008 75);
	--on-dark-2:oklch(80% 0.02 70);
	--mist:var(--bone);
	--ok:oklch(45% 0.09 150);
	--ease-out:cubic-bezier(.16,1,.3,1);
	--ease-in-out:cubic-bezier(.65,0,.35,1);
	--d1:220ms; --d2:600ms; --d3:1100ms;
	--display:clamp(3.5rem,9.2vw,9.5rem);
	--h-xl:clamp(2.25rem,5vw,4.5rem);
	--h-lg:clamp(1.75rem,3.2vw,2.75rem);
	--sec:clamp(72px,11vw,168px);
}
html,body{overflow-x:clip}
body{color:var(--ink)}
::selection{background:var(--brown);color:var(--on-dark)}
.wrap{max-width:1280px}
.lab{letter-spacing:.22em}

/* ---------- buttons on dark ---------- */
.btn{transition:background var(--d1) var(--ease-out),color var(--d1) var(--ease-out),border-color var(--d1) var(--ease-out)}
.btn.inv{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.btn.inv:hover{background:transparent;color:var(--on-dark)}
.btn.ghost-inv{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}
.btn.ghost-inv:hover{background:var(--on-dark);color:var(--ink)}
.btn.lg{min-height:56px;padding:0 36px;font-size:16px}
.arrow{display:inline-flex;align-items:center;gap:10px;font-weight:400;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.arrow::after{content:"";width:22px;height:1px;background:currentColor;transition:width var(--d1) var(--ease-out)}
.arrow:hover::after{width:36px}

/* ---------- header over the home hero ---------- */
.home .hd{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;transition:background var(--d1) var(--ease-out),border-color var(--d1) var(--ease-out)}
.home .hd.solid,.home .hd.mega-on,.home .hd.search-on{background:rgba(255,255,255,.97);border-bottom-color:var(--g1)}
.admin-bar.home .hd{top:32px}
.hd nav a,.hd nav button{letter-spacing:.02em}
.mega,.searchp{color:var(--ink)}
.mega .tile .im img{transition:transform var(--d2) var(--ease-out)} .mega .tile:hover .im img{transform:scale(1.04)}

/* ---------- hero ---------- */
.hero2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh;background:var(--bone);color:var(--ink)}
.hero2-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hh) + 40px) clamp(24px,5vw,80px) clamp(40px,6vw,88px)}
.hero2 .kick{font-size:14px;color:var(--brown);margin-bottom:auto;padding-top:24px}
.hero2 h1{font-family:var(--latin);font-weight:200;font-size:var(--display);line-height:.92;letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0}
.hero2 h1 span{display:block}
.hero2 .sub{font-size:clamp(17px,1.5vw,21px);color:var(--g7);margin:28px 0 32px;max-width:28ch}
.hero2 .acts{justify-content:flex-start}
.hero2-media{position:relative;min-height:60svh;overflow:hidden;background:var(--bone-2)}
.hero2-media video,.hero2-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero2-media video{opacity:0;transition:opacity var(--d3) var(--ease-out)} .hero2-media video.on{opacity:1}
.hero2 .scroll-cue{position:absolute;right:24px;bottom:24px;font-family:var(--latin);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);writing-mode:vertical-rl;display:flex;align-items:center;gap:12px}
.hero2 .scroll-cue::after{content:"";width:1px;height:56px;background:var(--ink);transform-origin:top;animation:cue 2.4s var(--ease-in-out) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero2 h1 span,.hero2 .sub,.hero2 .acts,.hero2 .kick{animation:rise var(--d3) var(--ease-out) both}
.hero2 h1 span:nth-child(2){animation-delay:.09s}.hero2 h1 span:nth-child(3){animation-delay:.18s}.hero2 .sub{animation-delay:.3s}.hero2 .acts{animation-delay:.4s}

/* ---------- statement ---------- */
.state{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--bone);align-items:stretch}
.state-copy{padding:var(--sec) clamp(24px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
.state h2,.shades .hdr h2,.life h2,.ph h1,.step h2{text-wrap:balance}
.state h2{font-family:var(--latin);font-weight:200;font-size:var(--h-xl);line-height:1.02;letter-spacing:-.005em;overflow-wrap:anywhere;min-width:0}
.state p{margin-top:28px;max-width:38ch;font-size:clamp(17px,1.4vw,20px);color:var(--g7)}
.state-img{min-height:70svh;overflow:hidden}
.state-img img{height:100%}

/* ---------- The Instrument: pinned media, scrolling steps ---------- */
.scrolly{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--paper)}
.scrolly-media{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bone)}
.scrolly-media figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--d2) var(--ease-out)}
.scrolly-media figure.on{opacity:1}
.scrolly-media img{transform:scale(1.06);transition:transform 6s linear} .scrolly-media figure.on img{transform:scale(1)}
.scrolly-count{position:absolute;left:28px;bottom:24px;font-family:var(--latin);font-size:13px;letter-spacing:.2em;color:var(--ink);z-index:2}
.step{min-height:92svh;display:flex;flex-direction:column;justify-content:center;padding:64px clamp(24px,6vw,104px)}
.step .n{font-family:var(--latin);font-weight:200;font-size:clamp(5rem,10vw,10rem);line-height:.85;color:var(--brown-line)}
.step h2{font-family:var(--latin);font-weight:300;font-size:var(--h-xl);line-height:1.05;margin:20px 0 20px;overflow-wrap:anywhere;min-width:0}
.step h2.th{font-family:var(--thai);font-weight:300;line-height:1.25}
.step ul{list-style:none;padding:0;max-width:36ch}
.step li{padding:14px 0;border-top:1px solid var(--brown-line);font-size:clamp(16px,1.3vw,19px);color:var(--g7)}
.step li:last-child{border-bottom:1px solid var(--brown-line)}
.step .step-img{display:none}

/* ---------- product cards v2 ---------- */
.shades{background:var(--bone);padding:var(--sec) 0}
.shades .hdr{margin-bottom:clamp(28px,4vw,56px);align-items:flex-end}
.shades .hdr h2{font-family:var(--thai);font-weight:300;font-size:var(--h-xl);line-height:1.15}
.cards{gap:clamp(12px,2vw,28px)}
.card{transition:transform var(--d2) var(--ease-out)}
.card .im{position:relative;aspect-ratio:4/5;background:var(--paper)}
.card .im img{position:absolute;inset:0;transition:opacity var(--d2) var(--ease-out),transform 1.2s var(--ease-out)}
.card .im .alt{opacity:0}
.card:hover .im .alt,.card:focus-within .im .alt{opacity:1}
.card:hover .im img{transform:scale(1.03)}
.card .bd{padding:20px 20px 24px}
.card .sh{letter-spacing:.02em}
.card h3{font-size:18px}
.card .price{font-size:20px}

/* ---------- tones band ---------- */
.tones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--paper)}
.tone{display:block;text-decoration:none;color:var(--ink)}
.tone .ti{display:block;aspect-ratio:1/1;overflow:hidden}
.tone img{transition:transform 1.4s var(--ease-out)}
.tone:hover img{transform:scale(1.05)}
.tone .t{display:block;padding:clamp(16px,2.4vw,32px) clamp(16px,2.4vw,36px) clamp(28px,4vw,56px)}
.tone .t b{display:block;font-family:var(--latin);font-weight:200;font-size:clamp(2.5rem,5.5vw,5.5rem);line-height:.9}
.tone .t i{display:block;font-style:normal;font-weight:400;font-size:17px;margin-top:12px}
.tone .t span{display:block;margin-top:4px;font-size:15px;color:var(--g7)}
.tone+.tone{border-left:1px solid var(--g1)}

/* ---------- maker (dark) ---------- */
.maker2{background:var(--brown-deep);color:var(--on-dark);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.maker2-img{min-height:80svh;overflow:hidden}
.maker2-copy{padding:var(--sec) clamp(24px,6vw,104px);display:flex;flex-direction:column;justify-content:center}
.maker2 .lab{color:var(--on-dark-2)}
.maker2 blockquote{text-wrap:balance;font-weight:300;font-size:var(--h-lg);line-height:1.4;margin:20px 0 28px;max-width:22em}
.maker2 p{color:var(--on-dark-2);max-width:44ch}
.maker2 .who{margin-top:32px;font-weight:400;color:var(--on-dark)}

/* ---------- everyday gallery ---------- */
.life{padding:var(--sec) 0 0}
.life .hdr{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:clamp(24px,3vw,48px)}
.life h2{font-family:var(--thai);font-weight:300;font-size:var(--h-xl);line-height:1.15}
.rail{display:flex;gap:clamp(8px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(20px,calc((100vw - 1280px)/2 + 40px)) var(--sec);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail figure{flex:none;width:min(78vw,420px);aspect-ratio:4/5;margin:0;scroll-snap-align:center;overflow:hidden;background:var(--bone)}
.rail figure:nth-child(even){margin-top:clamp(24px,5vw,72px)}

/* ---------- closing CTA ---------- */
.close{background:var(--bone);text-align:center;padding:var(--sec) 24px}
.close h2{font-weight:300;font-size:var(--h-xl);line-height:1.2;text-wrap:balance}
.close p{margin:24px auto 32px;max-width:36ch;color:var(--g7);font-size:18px}

/* ---------- footer v2 ---------- */
.ft{background:var(--brown-deep);color:var(--on-dark);padding-top:clamp(56px,8vw,112px)}
.ft .mark{font-family:var(--latin);font-weight:200;font-size:clamp(4rem,17vw,16rem);line-height:.8;letter-spacing:-.02em;margin-bottom:clamp(40px,6vw,88px);color:var(--on-dark)}
.ft h4{color:var(--on-dark-2)} .ft a{color:var(--on-dark)}
.ft .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid oklch(40% 0.03 50);margin-top:48px;padding-top:20px;font-size:13px;color:var(--on-dark-2)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity var(--d2) var(--ease-out),transform var(--d3) var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}

/* ---------- inner page header ---------- */
.ph{background:var(--bone);padding:clamp(40px,6vw,88px) 0 clamp(28px,4vw,56px);margin-bottom:clamp(32px,5vw,64px)}
.ph .crumb{font-size:13px;color:var(--g5);margin-bottom:14px} .ph .crumb a{text-decoration:none} .ph .crumb a:hover{color:var(--brown)}
.ph h1{font-weight:300;font-size:var(--h-xl);line-height:1.15;overflow-wrap:anywhere;min-width:0}
.ph p{margin-top:12px;color:var(--g7);max-width:52ch}
.pg{padding-top:0}

/* ---------- product page v2 ---------- */
.pd{padding-top:clamp(20px,3vw,40px)}
.pd .info h1{font-size:var(--h-lg)}
.pd .info .price{font-size:26px;margin-top:6px}
.assure{list-style:none;padding:0;margin:0 0 28px;border-top:1px solid var(--g3)}
.assure li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--g1);font-size:14px;color:var(--g7)}
.assure svg{width:20px;height:20px;fill:none;stroke:var(--brown);stroke-width:1.2;flex:none}
.pd-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);padding-block:var(--sec)}
.pd-feat figure{margin:0} .pd-feat .im{aspect-ratio:4/5;overflow:hidden;background:var(--bone);margin-bottom:18px}
.pd-feat .n{font-family:var(--latin);font-size:13px;letter-spacing:.2em;color:var(--brown)}
.pd-feat h3{font-family:var(--latin);font-weight:300;font-size:28px;line-height:1.15;margin:6px 0 8px} .pd-feat h3.th{font-family:var(--thai)}
.pd-feat p{color:var(--g7);font-size:15px}
.howto{background:var(--brown-deep);color:var(--on-dark);padding:var(--sec) 0}
.howto h2{font-weight:300;font-size:var(--h-xl);margin-bottom:clamp(28px,4vw,56px)}
.howto ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
.howto li{border-top:1px solid oklch(45% 0.03 50);padding-top:20px}
.howto .n{font-family:var(--latin);font-weight:200;font-size:72px;line-height:1;color:var(--on-dark-2)}
.howto p{margin-top:12px;font-size:17px}
.more{padding:var(--sec) 0;background:var(--bone)}
.more h2{font-weight:300;font-size:var(--h-lg);margin-bottom:28px}

/* ---------- commerce: shared ---------- */
.woo .woocommerce{max-width:none}
.note-bar{display:flex;gap:12px;align-items:center;background:var(--bone);padding:14px 18px;font-size:14px;margin-bottom:24px}
.note-bar svg{width:20px;height:20px;fill:none;stroke:var(--brown);stroke-width:1.2;flex:none}
.woocommerce-info,.woocommerce-message,.woocommerce-error{background:var(--bone)}
.woocommerce table.shop_table th{letter-spacing:.04em}
.woocommerce .cart-collaterals{background:var(--bone)}
.woocommerce-checkout form.checkout #order_review_heading,.woocommerce-checkout form.checkout #order_review,.woocommerce-checkout form.checkout>#payment{background:var(--bone)}
.woocommerce-checkout form.checkout #order_review{position:relative}
.woocommerce-checkout .woocommerce-billing-fields>h3,.woocommerce-checkout .woocommerce-additional-fields>h3,.woocommerce-checkout .woocommerce-shipping-fields h3{font-size:22px;font-weight:300}
.woocommerce-checkout #payment ul.payment_methods li{padding:10px 0} .woocommerce-checkout #payment ul.payment_methods li label{font-weight:400}
.co-assure{list-style:none;padding:16px 0 0;margin:16px 0 0;border-top:1px solid var(--brown-line);font-size:14px;color:var(--g7)}
.co-assure li{padding:4px 0 4px 22px;position:relative}
.co-assure li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:8px;background:var(--brown);clip-path:polygon(0 100%,38% 0,100% 0,62% 100%)}
.cart-empty.woocommerce-info{display:none}
.empty-cart{text-align:center;padding:16px 0 56px}
.empty-cart h2{font-weight:300;font-size:var(--h-lg);margin-bottom:10px}
.empty-cart p{color:var(--g7);margin-bottom:36px}
.empty-cart .cards{text-align:left}
.return-to-shop{text-align:center}

/* ---------- order received / timeline ---------- */
.thanks{background:var(--brown-deep);color:var(--on-dark);padding:clamp(40px,6vw,80px) clamp(20px,4vw,56px);margin-bottom:40px}
.thanks h2{font-weight:300;font-size:var(--h-xl);line-height:1.15;margin:8px 0 12px}
.thanks p{color:var(--on-dark-2);max-width:48ch}
.thanks .lab{color:var(--on-dark-2)}
.thanks .acts{justify-content:flex-start;margin-top:28px}
.woocommerce-order>.woocommerce-notice--success{display:none}
.tline{list-style:none;padding:0;margin:32px 0 40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:t}
.tline li{position:relative;padding:22px 16px 0 0;color:var(--g5);font-size:14px;border-top:1px solid var(--g3)}
.tline li::before{content:"";position:absolute;left:0;top:-5px;width:13px;height:9px;background:var(--g3);clip-path:polygon(0 100%,38% 0,100% 0,62% 100%)}
.tline li b{display:block;font-weight:400;font-size:16px;color:inherit}
.tline li.done{color:var(--ink);border-top-color:var(--brown)} .tline li.done::before{background:var(--brown)}
.tline li.now b{color:var(--brown)}
.tline.cancelled li{color:var(--g5)}
.ostat{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline;margin-bottom:24px}
.ostat .num{font-family:var(--latin);font-weight:300;font-size:var(--h-lg)}

/* ---------- account ---------- */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.woocommerce-account:not(.logged-in) .woocommerce{display:block}
.woocommerce-account .woocommerce::before,.woocommerce-account .woocommerce::after{display:none}
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{width:auto;float:none}
.woocommerce-account .woocommerce>.woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-MyAccount-navigation{position:sticky;top:calc(var(--hh) + 24px)}
.woocommerce-MyAccount-navigation a{padding:14px 0;font-weight:300}
.dash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.dash a,.dash div{display:block;background:var(--bone);padding:24px;text-decoration:none;min-height:140px}
.dash a:hover{background:var(--bone-2)}
.dash .k,.dash .v,.dash .s{display:block}
.dash .k{font-family:var(--latin);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown)}
.dash .v{font-size:20px;font-weight:300;margin-top:10px;line-height:1.35}
.dash .s{font-size:14px;color:var(--g7);margin-top:6px}
.hello{font-weight:300;font-size:var(--h-lg);line-height:1.2}
.auth-note{color:var(--g7);margin-bottom:20px;max-width:40ch}
.woocommerce-account .col2-set .col-2 .guest{margin-top:8px}
.woocommerce form.lost_reset_password,.woocommerce form.woocommerce-ResetPassword{max-width:480px}
.woocommerce-account .addresses .title h2,.woocommerce-account .addresses .title h3{font-size:20px;font-weight:400}
.woocommerce-account address{font-style:normal;background:var(--bone);padding:20px;border:0!important}
.woocommerce table.my_account_orders .button{min-height:40px;padding:0 16px}

/* ---------- search results ---------- */
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.result{background:var(--bone);padding:24px;text-decoration:none;display:block}
.result:hover{background:var(--bone-2)}
.result .k{font-family:var(--latin);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown)}
.result b{display:block;font-weight:400;font-size:19px;margin:8px 0 6px}
.result span{font-size:14px;color:var(--g7)}

/* ---------- tablet ---------- */
@media (max-width:1023px){
	.step{padding:56px clamp(24px,5vw,56px)}
	.howto ol,.pd-feat{grid-template-columns:1fr 1fr}
	.woocommerce-account .woocommerce{grid-template-columns:200px minmax(0,1fr)}
	.results{grid-template-columns:1fr 1fr}
}
/* ---------- mobile ---------- */
@media (max-width:719px){
	.hero2{grid-template-columns:minmax(0,1fr);position:relative;min-height:100svh}
	.hero2-media{position:absolute;inset:0;min-height:0}
	.hero2-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,oklch(95.5% 0.012 75) 0%,oklch(95.5% 0.012 75 / .94) 34%,oklch(95.5% 0.012 75 / .35) 62%,oklch(95.5% 0.012 75 / .55) 100%)}
	.hero2-copy{position:relative;z-index:1;min-height:100svh;padding:calc(var(--hh) + 16px) 20px 36px}
	.hero2 .sub{color:var(--ink);margin:20px 0 24px}
	.hero2 .scroll-cue{display:none}
	.state,.maker2{grid-template-columns:minmax(0,1fr)}
	.state-img{min-height:0;aspect-ratio:4/5;order:-1}
	.maker2-img{min-height:0;aspect-ratio:4/5}
	.scrolly{grid-template-columns:minmax(0,1fr)}
	.scrolly-media{display:none}
	.step{min-height:0;padding:0 0 56px}
	.step .step-img{display:block;aspect-ratio:4/5;overflow:hidden;margin-bottom:28px}
	.step>*:not(.step-img){margin-left:20px;margin-right:20px}
	.step .n{font-size:5rem}
	.tones{grid-template-columns:minmax(0,1fr)} .tone{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center} .tone .t{padding:16px 20px} .tone+.tone{border-left:0;border-top:1px solid var(--g1)}
	.card .bd{padding:12px 12px 16px} .card h3{font-size:15px} .card .price{font-size:18px}
	.shades .hdr,.life .hdr{flex-direction:column;align-items:flex-start;gap:16px}
	.howto ol,.pd-feat{grid-template-columns:minmax(0,1fr)}
	.tline{grid-template-columns:minmax(0,1fr)} .tline li{border-top:0;border-left:1px solid var(--g3);padding:0 0 22px 22px} .tline li.done{border-left-color:var(--brown)} .tline li::before{left:-7px;top:6px}
	.woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr)} .woocommerce-MyAccount-navigation{position:static}
	.woocommerce-MyAccount-navigation ul{display:flex;overflow-x:auto;gap:20px;border-bottom:1px solid var(--g1)} .woocommerce-MyAccount-navigation a{border:0;white-space:nowrap}
	.dash,.results{grid-template-columns:minmax(0,1fr)}
	.ft .legal{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
	.hero2 h1 span,.hero2 .sub,.hero2 .acts,.hero2 .kick{animation:none}
	.rv{opacity:1;transform:none}
	.scrolly-media img,.card .im img,.tone img{transition:none;transform:none}
	.hero2 .scroll-cue::after{animation:none}
}