@font-face{font-family:Instrument;src:url("fonts/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Instrument;src:url("fonts/InstrumentSerif-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Hanken;src:url("fonts/HankenGrotesk.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Tokens: Day (default) ---------- */
:root{
  color-scheme:light;
  --paper:#f4efe6;--stage:#fff;--ink:#1b1a22;--ink-soft:#5e5850;--ink-hover:#38343b;--line:#dad1c3;--label:#2a3591;
  --band:#e5ddd0;--deep:#1b1a22;--deep-2:#2e2b30;--on-deep:#f4efe6;--chip:#fff;
  --orange:#e9552a;--yellow:#f0ae2e;--green:#5e9b33;--blue:#2c3aa8;
  --accent-text:var(--orange);
  --trim:var(--orange);--trim-light:#f7a27f;
  --glass:rgba(255,255,255,.4);--glass-solid:rgba(251,249,245,.92);--glass-border:rgba(255,255,255,.72);
  --glass-shadow:0 24px 60px rgba(40,50,70,.14),inset 0 1px 0 rgba(255,255,255,.8);
  --scene-day:1;--scene-evening:0;--veil:rgba(250,247,242,.18)
}
:root[data-trim=yellow]{--trim:var(--yellow);--trim-light:#f5c66a}
:root[data-trim=green]{--trim:var(--green);--trim-light:#9ccb78}
:root[data-trim=blue]{--trim:var(--blue);--trim-light:#a3adf2}

/* ---------- Tokens: Evening ---------- */
:root[data-mood=evening]{
  color-scheme:dark;
  --paper:#1c1612;--stage:#ebe0d1;--ink:#f5ede2;--ink-soft:#cbbda9;--ink-hover:#fff6ea;--line:rgba(245,237,226,.16);--label:#e8b48f;
  --band:#2a211b;--deep:#110d0a;--deep-2:#221a15;--chip:rgba(255,240,220,.07);
  --accent-text:#f08a62;
  --glass:rgba(30,23,18,.62);--glass-solid:rgba(30,23,18,.94);--glass-border:rgba(255,226,190,.18);
  --glass-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,230,200,.12);
  --scene-day:0;--scene-evening:1;--veil:rgba(12,9,7,.3)
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Hanken,"Avenir Next",Arial,sans-serif;transition:background-color .5s,color .5s}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.skip-link{position:absolute;z-index:20;top:-100px;left:12px;padding:12px 20px;background:var(--ink);color:var(--paper)}
.skip-link:focus{top:12px}

/* ---------- Logo ---------- */
.mark{width:34px;height:34px;flex:none;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.mark .mark-ties{stroke:var(--trim);transition:stroke .4s}
:root[data-mood=evening] .site-header .mark-ties,.site-footer .mark-ties{stroke:var(--trim-light)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}
.brand-name{font-family:Instrument,Georgia,serif;font-size:1.45rem;letter-spacing:.16em;line-height:1}

/* ---------- Header ---------- */
.site-header{min-height:86px;padding:0 clamp(20px,4.4vw,72px);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.main-nav{display:flex;align-items:center;gap:clamp(22px,3vw,44px)}
.main-nav a{font-size:.88rem;font-weight:700;text-decoration:none}
.main-nav a:hover{text-decoration:underline;text-underline-offset:6px}
.header-actions{display:flex;align-items:center;gap:14px}
.mood-toggle{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:50px}
.mood-toggle button{min-height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 14px 0 11px;border:0;border-radius:50px;background:transparent;color:var(--ink);font:inherit;font-size:.8rem;font-weight:800;cursor:pointer;transition:background .3s,color .3s}
.mood-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mood-toggle button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.mood-toggle button:hover:not([aria-pressed=true]){background:var(--chip)}
.nav-cta{background:var(--ink);color:var(--paper);padding:13px 17px;border-radius:50px;display:flex;gap:23px;font-size:.88rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .2s,background .2s}
.nav-cta:hover,.button-dark:hover{background:var(--ink-hover);transform:translateY(-2px)}

/* ---------- Shared type ---------- */
.eyebrow,.hero-foot,.photo-label,.color-number,.card-action,.control-label,.feature-list span,.close-card>p,.footer-bottom>span{font-size:.75rem;font-weight:800;letter-spacing:.16em;line-height:1.4}
.eyebrow{margin:0;color:var(--label)}
.hero h1 em,.section-heading h2 em,.statement em,.details h2 em,.close-card h3 em,.footer-statement em{font-family:Instrument,Georgia,serif;font-weight:400}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,50%) minmax(0,50%);min-height:min(790px,calc(100svh - 86px))}
.hero-copy{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:48px 2.8vw 28px clamp(20px,4.4vw,72px)}
.hero-main{padding-bottom:20px}
.hero h1{font-family:Instrument,Georgia,serif;font-weight:400;font-size:clamp(5.2rem,8.7vw,9rem);line-height:.82;letter-spacing:-.055em;margin:0}
.hero h1 em{color:var(--accent-text)}
.hero-main>p{font-size:clamp(1.12rem,1.5vw,1.35rem);line-height:1.45;max-width:460px;margin:38px 0 28px;color:var(--ink-soft)}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;border-radius:100px;padding:15px 20px;text-decoration:none;font-size:.9rem;font-weight:800;transition:transform .2s,background .2s}
.button-dark{background:var(--ink);color:var(--paper)}
.text-link{font-size:.9rem;font-weight:800;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:4px}
.text-link span{padding-left:10px}
.hero-foot{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding-top:17px;color:var(--ink-soft)}
.hero-photo{position:relative;min-width:0;overflow:hidden;background:#f98e7e}
.hero-photo picture{display:block;width:100%;height:100%}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.photo-label{position:absolute;bottom:25px;left:25px;background:#f4efe6;color:#1b1a22;padding:14px 18px;display:flex;justify-content:space-between;gap:38px}

/* ---------- Marquee + statement ---------- */
.marquee{display:flex;align-items:center;justify-content:space-around;gap:32px;overflow:hidden;white-space:nowrap;padding:14px 20px;background:var(--band);color:var(--ink);font-size:.76rem;letter-spacing:.26em;font-weight:800;transition:background .5s}
.marquee span:nth-child(even){font-size:1.5rem;color:var(--orange);letter-spacing:0}

/* ---------- Kitchen moments ---------- */
.moments{background:var(--paper)}
.moments-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,360px);gap:8px 50px;align-items:end;padding-top:100px;padding-bottom:42px}
.moments-intro .eyebrow{grid-column:1/-1}
.moments h2{font-family:Instrument,Georgia,serif;font-size:clamp(4.5rem,7vw,8rem);font-weight:400;letter-spacing:-.045em;line-height:.9;margin:20px 0 0;max-width:900px}
.moments h2 em{font-weight:400;color:var(--accent-text)}
.moments-intro>p:last-child{color:var(--ink-soft);font-size:1.1rem;line-height:1.45;margin:0 0 4px}
.moments-gallery{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,340px));gap:12px;padding:0 clamp(20px,4.4vw,72px)}
.moment{position:relative;min-width:0;min-height:0;margin:0;overflow:hidden;background:var(--band)}
.moment-hanging{grid-row:span 2}
.moment picture{display:block;width:100%;height:100%}
.moment img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.moment-hanging img{object-position:center 40%}
.moment-green img,.moment-yellow img{object-position:center 38%}
.moment:hover img{transform:scale(1.025)}
.moment figcaption{position:absolute;left:20px;bottom:20px;display:grid;gap:3px;max-width:calc(100% - 40px);padding:13px 18px;background:rgba(244,239,230,.94);color:#1b1a22;box-shadow:0 8px 25px rgba(29,20,15,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.moment figcaption span{font-size:.65rem;font-weight:800;letter-spacing:.16em}
.moment figcaption strong{font-family:Instrument,Georgia,serif;font-size:clamp(1.35rem,2vw,2rem);font-weight:400;line-height:1}
.moments-outro{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:25px;padding-bottom:70px}
.moments-outro p{margin:0;color:var(--ink-soft);font-size:1rem}
.moments-outro a{display:inline-flex;align-items:center;gap:20px;border-bottom:1px solid var(--ink);padding-bottom:5px;font-weight:800;text-decoration:none;white-space:nowrap}
.moments-outro a span{font-size:1.25rem;line-height:1}

/* ---------- Color edit ---------- */
.section-shell{padding-left:clamp(20px,4.4vw,72px);padding-right:clamp(20px,4.4vw,72px)}
.colors{padding-top:125px;padding-bottom:135px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:45px}
.section-heading h2,.details h2{font-family:Instrument,Georgia,serif;font-weight:400;font-size:clamp(4.7rem,7vw,8rem);line-height:.88;letter-spacing:-.035em;margin:18px 0 0}
.section-heading h2 em{color:var(--accent-text)}
.section-heading>p{font-size:1.12rem;line-height:1.45;color:var(--ink-soft);max-width:280px;margin:0 0 4px}
.rail-cue{display:none}
.color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.color-card{min-width:0;text-decoration:none}
.color-image{position:relative;aspect-ratio:1/1.28;overflow:hidden;border-top:5px solid var(--accent);background:var(--stage);transition:background .5s}
.color-image picture{display:block;width:100%;height:100%}
.color-card:nth-child(1){--accent:var(--orange)}
.color-card:nth-child(2){--accent:var(--yellow)}
.color-card:nth-child(3){--accent:var(--green)}
.color-card:nth-child(4){--accent:var(--blue)}
.color-image img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 0;mix-blend-mode:multiply;transition:transform .35s}
.color-card:hover img{transform:scale(1.035)}
.color-meta{display:flex;justify-content:space-between;align-items:center;padding:14px 1px 0}
.color-number{color:var(--ink-soft)}
.color-arrow{font-size:1.35rem}
.color-card h3{font-family:Instrument,Georgia,serif;font-size:clamp(2.3rem,3.2vw,3.3rem);font-weight:400;line-height:1;margin:7px 0 8px;display:flex;align-items:center;gap:12px}
.swatch{display:inline-block;width:24px;height:24px;border:2px solid var(--paper);box-shadow:0 0 0 1px #b9b3a7;border-radius:50%;flex:none}
.swatch-orange{background:var(--orange)}.swatch-yellow{background:var(--yellow)}.swatch-green{background:var(--green)}.swatch-blue{background:var(--blue)}
.card-action{border-bottom:1px solid var(--ink);padding-bottom:3px;letter-spacing:.04em}
.card-action span{padding-left:7px}

/* ---------- Explorer: glass stage ---------- */
.details{position:relative;isolation:isolate;overflow:hidden;padding-top:120px;padding-bottom:130px;background:var(--paper)}
.ambience{position:absolute;inset:0;z-index:-1;overflow:hidden}
.scene{position:absolute;inset:-60px;filter:blur(28px);transition:opacity .7s}
.scene-day{background:#e7d3b2;opacity:var(--scene-day)}
.scene-evening{background:#1c1612;opacity:var(--scene-evening)}
.scene i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);background:var(--c)}
.scene .round{border-radius:50%}
.scene .glow{box-shadow:0 0 90px 30px rgba(255,238,205,.9)}
.scene .fire{box-shadow:0 0 90px 36px rgba(255,130,50,.55)}
.scene .warm{box-shadow:0 0 70px 22px rgba(255,215,160,.55)}
.scene .oak{background:repeating-linear-gradient(90deg,#d4b283 0 70px,#c49e6c 70px 74px)}
.scene .walnut{background:repeating-linear-gradient(90deg,#4c301c 0 46px,#3a2415 46px 50px)}
.veil{position:absolute;inset:0;background:var(--veil);transition:background .7s}

.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:36px;transition:background .5s,border-color .5s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--glass-solid)}}

.details-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"stage head" "stage panel";gap:24px;align-items:stretch}
.details-head{grid-area:head;min-width:0;padding:clamp(30px,3.4vw,52px)}
.stage-panel{grid-area:stage;min-width:0;padding:16px;display:flex;flex-direction:column;background:#fff}
.stage-panel{scroll-margin-top:16px}
.stage{position:relative;flex:1 1 auto;min-height:600px;border-radius:26px;overflow:hidden;background:#fff;container-type:size;color:#1e1c1a;touch-action:pan-y;user-select:none}
.stage-frame{position:absolute;inset:0;margin:auto;width:100%;height:100%;width:min(100cqw,100cqh);height:min(100cqw,100cqh);background:#fff;transform-origin:center;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.stage[data-zoom=true]{cursor:grab;touch-action:none}
.stage[data-zoom=true][data-dragging=true]{cursor:grabbing}
.stage[data-zoom=true][data-dragging=true] .stage-frame{transition:none}
.stage[data-zoom=true] .stage-frame{transform:translate3d(var(--pan-x,0px),var(--pan-y,0px),0) scale(2)}
.stage-frame img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:10px;transform:translate(-7px,-50%);transition:opacity .3s;pointer-events:none}
.hotspot i{width:14px;height:14px;flex:none;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.45),0 2px 8px rgba(0,0,0,.25)}
.hotspot span{padding:8px 14px;border-radius:50px;background:rgba(30,28,26,.86);color:#fbf9f5;font-size:.8rem;font-weight:700;white-space:nowrap}
.hotspot-flip{flex-direction:row-reverse;transform:translate(calc(-100% + 7px),-50%)}
.stage:not([data-view=front]) .hotspot{display:none}
.stage[data-zoom=true] .hotspot{opacity:0}
.stage-title{position:absolute;left:28px;top:24px;display:flex;flex-direction:column;gap:6px;pointer-events:none;transition:opacity .3s}
.stage[data-zoom=true] .stage-title{opacity:0}
.stage[data-view=measurements] .stage-title,.stage[data-view=measurements] #product-photo-label{display:none}
.stage-title span{font-family:Instrument,Georgia,serif;font-size:clamp(2.6rem,4vw,3.8rem);line-height:.95}
.stage-title small{font-size:.7rem;font-weight:800;letter-spacing:.16em;color:#3a342e}
.pan-hint{position:absolute;z-index:1;top:20px;left:50%;width:max-content;max-width:calc(100% - 40px);transform:translateX(-50%);padding:9px 14px;border-radius:50px;background:rgba(30,28,26,.86);color:#fff;font-size:.72rem;font-weight:800;line-height:1.3;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s}
.stage[data-zoom=true] .pan-hint{opacity:1}
#product-photo-label{position:absolute;left:20px;bottom:20px;background:#1e1c1a;color:#fbf9f5;padding:12px 16px;font-size:.72rem;font-weight:800;letter-spacing:.16em;border-radius:50px;box-shadow:0 0 0 2px rgba(255,255,255,.7);transition:opacity .2s}
.stage[data-zoom=true] #product-photo-label{opacity:0;pointer-events:none}
.zoom-toggle{position:absolute;right:18px;bottom:18px;width:56px;height:56px;border:0;border-radius:50%;background:#1e1c1a;color:#fbf9f5;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.7);transition:transform .2s}
.zoom-toggle:hover{transform:scale(1.06)}
.zoom-toggle:focus-visible{outline-color:#1e1c1a}
.zoom-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.zoom-toggle[aria-pressed=true] .zoom-plus{display:none}
.photo-navigation{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 12px 0;color:#1e1c1a}
.photo-nav-button{position:absolute;z-index:3;top:50%;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(30,28,26,.22);border-radius:50%;background:rgba(255,255,255,.82);color:#1e1c1a;font:inherit;font-size:1.5rem;line-height:1;opacity:.68;cursor:pointer;transform:translateY(-50%);transition:background .2s,opacity .2s,transform .2s;backdrop-filter:blur(8px)}
.photo-nav-button[hidden]{display:none}
.photo-prev{left:16px}
.photo-next{right:16px}
.photo-nav-button:hover,.photo-nav-button:focus-visible{background:#fff;opacity:1;transform:translateY(-50%) scale(1.05)}
.photo-nav-button:focus-visible{outline:3px solid #1e1c1a;outline-offset:3px}
.photo-navigation-status{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;margin:0;text-align:center}
.photo-navigation-status strong{font-size:.85rem}
.photo-navigation-status span{font-size:.72rem;font-weight:800;letter-spacing:.12em;white-space:nowrap;color:#5d5750}

.details-panel{grid-area:panel;min-width:0;padding:clamp(30px,3.4vw,52px);display:flex;flex-direction:column}
.details h2{font-size:clamp(3.6rem,5.2vw,6rem);line-height:.9;margin:22px 0 0}
.details h2 em{color:var(--accent-text)}
.details-intro{font-size:1.05rem;line-height:1.5;color:var(--ink-soft);max-width:430px;margin:18px 0 0}
.explorer-controls{display:grid;gap:28px}
.preview-return{display:none}
.control-group{border-top:1px solid var(--line);padding-top:19px}
.control-group:first-child{border-top:0;padding-top:0}
.control-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}
.control-heading p{margin:0 0 14px}
.control-heading p:last-child{font-size:.88rem;font-weight:800}
.control-label{margin:0 0 14px;color:var(--ink-soft)}
.color-options,.view-options{display:flex;flex-wrap:wrap;gap:8px}
.color-option,.view-option{font:inherit;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.color-option{border:1px solid var(--line);background:var(--chip);border-radius:50px;min-height:52px;padding:8px 14px 8px 10px;display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:800}
.color-option .swatch{width:22px;height:22px;border-color:#fff}
.color-option[aria-pressed=true],.view-option[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.color-option:hover:not([aria-pressed=true]),.view-option:hover:not([aria-pressed=true]){border-color:var(--ink)}
.view-option{border:1px solid var(--line);background:var(--chip);border-radius:50px;min-height:46px;padding:10px 20px;font-size:.88rem;font-weight:800}
.feature-list{margin-top:auto;padding-top:35px}
.feature-list>div{display:flex;align-items:baseline;gap:20px;border-top:1px solid var(--line);padding:13px 0}
.feature-list>div:last-child{border-bottom:1px solid var(--line)}
.feature-list span{color:var(--ink-soft)}
.feature-list p{font-size:1.05rem;font-weight:700;margin:0}

/* ---------- Up close ---------- */
.up-close{padding-top:120px;padding-bottom:130px}
.close-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.close-card{min-width:0}
.close-image{height:clamp(280px,31vw,470px);background-color:var(--stage);background-blend-mode:multiply;background-repeat:no-repeat;background-size:175%;transition:background-color .5s}
.close-neck{background-image:url("apron-yellow-worn.jpg");background-position:50% 7%}
.close-pocket{background-image:url("apron-orange-flatlay.webp");background-size:145%;background-position:50% 75%}
.close-ties{background-image:url("apron-blue-waist-detail.webp");background-blend-mode:normal;background-size:145%;background-position:50% 24%}
.close-grid:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.close-card>p{margin:18px 0 8px;color:var(--label)}
.close-card h3{font-family:Instrument,Georgia,serif;font-size:clamp(2.4rem,3.6vw,4rem);font-weight:400;line-height:.92;margin:0}
.close-card h3 em{color:var(--accent-text)}

/* ---------- Footer ---------- */
.site-footer{background:var(--deep);color:var(--on-deep);padding:42px clamp(20px,4.4vw,72px) 28px;transition:background .5s}
.site-footer a:focus-visible{outline-color:var(--on-deep)}
.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-top .eyebrow{color:#d6b4a9}
.footer-top>a{font-size:.85rem;font-weight:800;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.footer-statement{font-family:Instrument,Georgia,serif;font-size:clamp(5rem,11vw,13rem);letter-spacing:-.055em;line-height:.75;margin:88px 0 105px}
.footer-statement em{color:#f1ad8f}
.footer-bottom{border-top:1px solid rgba(244,239,230,.2);padding-top:25px}
.footer-bottom .brand-name{font-size:1.25rem}
.footer-bottom .mark{width:30px;height:30px}
.footer-bottom>span{color:#c9c1b8}

/* ---------- Tablet ---------- */
@media(max-width:1099px){
  .nav-cta{display:none}
  .hero{min-height:660px}.hero h1{font-size:clamp(5.1rem,8.3vw,7.1rem)}
  .hero-foot span:last-child{display:none}
  .color-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px}
  .details-layout{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"head" "stage" "panel"}
  .stage{flex:none;height:min(78vw,680px);min-height:0}
  .details-head,.details-panel{padding:40px 48px}
  .feature-list{margin-top:8px}
}
@media(max-width:760px){
  .main-nav{display:none}
}
@media(max-width:900px){
  .moments-intro{grid-template-columns:1fr;gap:0;padding-top:78px;padding-bottom:30px}
  .moments-intro>p:last-child{max-width:460px;margin-top:22px}
  .moments-gallery{grid-template-rows:repeat(2,minmax(0,280px))}
}

/* ---------- Phone ---------- */
@media(max-width:699px){
  .site-header{min-height:70px;padding:0 16px 0 20px}
  .brand{gap:9px}
  .mark{width:28px;height:28px}
  .brand-name{font-size:1.08rem;letter-spacing:.13em}
  .mood-toggle button{padding:0 11px}
  .mood-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero-photo{order:-1;height:min(95vw,580px)}
  .hero-copy{padding:26px 20px 28px;gap:25px}
  .hero h1{font-size:clamp(4.5rem,14vw,6.5rem)}
  .hero-main>p{font-size:1.06rem;margin:25px 0 25px}
  .hero-foot{margin-top:7px}
  .photo-label{left:14px;bottom:14px;padding:10px 12px;font-size:.61rem}
  .marquee{justify-content:start;gap:26px}
  .marquee span:nth-last-child(-n+2){display:none}
  .moments-intro{padding-top:75px;padding-bottom:28px}
  .moments h2{font-size:clamp(4.1rem,11vw,6rem)}
  .moments-intro>p:last-child{font-size:1rem;margin-top:17px}
  .moments-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:8px;padding:0 12px}
  .moment-hanging{grid-column:span 2;grid-row:auto;aspect-ratio:1.15}
  .moment-green,.moment-yellow{aspect-ratio:1}
  .moment figcaption{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:8px 10px}
  .moment figcaption span{font-size:.55rem;letter-spacing:.09em}
  .moment figcaption strong{font-size:1.13rem}
  .moments-outro{display:block;padding-top:22px;padding-bottom:45px}
  .moments-outro a{margin-top:17px}
  .colors,.up-close{padding-top:90px;padding-bottom:95px}
  .section-heading{display:block;margin-bottom:32px}
  .section-heading h2{font-size:clamp(4rem,11vw,6rem)}
  .section-heading>p{max-width:450px;margin:20px 0 0;font-size:1rem}
  .rail-cue{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 17px;color:var(--ink-soft);font-size:.78rem;font-weight:800;letter-spacing:.07em}
  .rail-cue span{font-size:1.25rem;line-height:1;color:var(--accent-text)}
  .color-grid,.close-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-left:-20px;margin-right:-20px;padding:0 20px 15px;gap:14px;scrollbar-width:none}
  .color-grid::-webkit-scrollbar,.close-grid::-webkit-scrollbar{display:none}
  .color-card{flex:0 0 min(74vw,330px);scroll-snap-align:start}
  .color-image{aspect-ratio:1/1.27}
  .color-card h3{font-size:2.8rem}
  .details{padding-top:64px;padding-bottom:72px}
  .details-layout{padding-left:12px;padding-right:12px;gap:12px}
  .glass{border-radius:28px}
  .stage-panel{padding:10px}
  .stage{height:min(112vw,520px);border-radius:20px}
  .stage-title{left:18px;top:16px}
  .hotspot span{padding:6px 11px;font-size:.72rem}
  #product-photo-label{left:12px;bottom:12px;padding:10px 12px;font-size:.62rem}
  .zoom-toggle{right:12px;bottom:12px;width:50px;height:50px}
  .photo-navigation{min-height:48px;padding:8px 4px 0}
  .photo-navigation-status{flex-direction:column;gap:2px}
  .photo-nav-button{width:44px;height:44px}
  .photo-prev{left:10px}
  .photo-next{right:10px}
  .color-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .color-option{flex-direction:column;justify-content:center;gap:6px;min-height:68px;padding:8px 4px;border-radius:22px;font-size:.74rem}
  .view-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .view-option{padding:10px 8px;font-size:.8rem}
  .details-head{padding:28px 20px}
  .details-panel{padding:26px 20px 22px}
  .preview-return{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:24px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.85rem;font-weight:800;text-decoration:none}
  .preview-return span:last-child{font-size:1.3rem;line-height:1}
  .details h2{font-size:clamp(3.4rem,11vw,5rem);margin-top:16px}
  .stage-frame{margin-bottom:0}
  .close-card{flex:0 0 min(78vw,350px);scroll-snap-align:start}
  .close-image{height:360px}
  .close-pocket{background-image:url("apron-orange-flatlay-mobile.webp")}
  .close-card h3{font-size:3.4rem}
  .footer-statement{margin:100px 0 120px;font-size:clamp(5.2rem,15vw,8rem)}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:390px){
  .brand-name{font-size:.98rem;letter-spacing:.11em}
  .hero h1{font-size:4.15rem}
  .hero-actions{gap:18px}
  .button{gap:16px}
  .color-option{font-size:.7rem}
  .moment-green,.moment-yellow{display:flex;flex-direction:column;aspect-ratio:auto;overflow:visible;background:transparent}
  .moment-green picture,.moment-yellow picture{height:auto;aspect-ratio:1;overflow:hidden}
  .moment-green figcaption,.moment-yellow figcaption{position:static;max-width:none;min-height:66px;padding:9px 2px 0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
  .moment-green figcaption strong,.moment-yellow figcaption strong{font-size:1.2rem;line-height:1.05}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}