:root{
  --sage:#D3D8CF; --pale:#E9ECE6; --slate:#2F4347; --slate2:#5B7478; --ox:#4A1810; --ink:#1E1512; --cream:#F2EDE2; --tan:#B5692F;
  --disp:"Gloock",Georgia,serif; --body:"Schibsted Grotesk",system-ui,sans-serif; --mono:"DM Mono",ui-monospace,monospace;
  --gut:clamp(16px,3vw,48px);
}
*{box-sizing:border-box;margin:0}
html{background:var(--sage);-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--pale);color:var(--ink);font:400 17px/1.5 var(--body);overflow-x:clip}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.01em}
em{font-style:normal;color:var(--ox)}
.eyebrow{font:500 12.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.btn{display:inline-block;padding:15px 22px;background:var(--ox);color:var(--cream);font:500 15px/1 var(--body);text-decoration:none;transition:background .2s}
.btn:hover{background:var(--ink)}

.hdr{position:fixed;z-index:40;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px var(--gut);transition:transform .4s,background .3s,color .4s;color:var(--hdr,var(--ink))}
.hdr.up{transform:translateY(-110%)}
.hdr.solid{background:var(--pale);color:var(--ink)}
.wm{font:400 25px/1 var(--disp);text-decoration:none}
.hdr__nav{display:flex;gap:clamp(14px,2.2vw,32px);font-size:14.5px}
.hdr__nav a{text-decoration:none;padding:7px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s}
.hdr__nav a:hover{background-size:100% 1px}
.bagbtn{justify-self:end;padding:8px 2px;font-size:14.5px}
.bagbtn span{display:inline-grid;place-items:center;min-width:21px;height:21px;margin-left:4px;background:var(--ox);color:var(--cream);border-radius:99px;font-size:12px}

/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--bg,var(--sage));transition:background .6s;--type:var(--ox)}
.hero[data-v="w-cognac"]{--bg:#2F4347;--type:#D3D8CF}
.hero[data-v="m-black"]{--bg:#C9B59C;--type:#2F4347}
.hero[data-v="w-black"]{--bg:#E2D3C9;--type:#4A1810}
.hero__k{position:absolute;left:var(--gut);right:var(--gut);top:clamp(66px,10vh,92px);text-align:center;font:500 12.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--type);transition:color .5s}
.hero__t{position:absolute;left:0;right:0;top:clamp(84px,13vh,116px);display:flex;justify-content:center;font:400 25vw/.86 var(--disp);letter-spacing:-.025em;color:var(--type);white-space:nowrap;transition:color .5s;user-select:none}
.hero__t span{display:inline-block;will-change:transform}
.hero__stage{position:absolute;left:50%;bottom:clamp(-30px,-2vh,-8px);width:min(64vw,92vh);aspect-ratio:1;transform:translateX(-50%)}
.boot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateX(4%) rotate(1.5deg);transition:opacity .45s,transform .75s cubic-bezier(.2,.9,.2,1);pointer-events:none}
.boot.on{opacity:1;transform:none}
.stitch{position:absolute;left:-40vw;right:-40vw;width:180vw;top:42%;height:42%;overflow:visible;pointer-events:none}
.stitch path{fill:none;stroke:var(--type);stroke-width:2.2;stroke-dasharray:13 10;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.85}
.hero__b{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(16px,3vh,30px);display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:var(--type);transition:color .5s}
.pick{display:flex;gap:6px;flex-wrap:wrap;max-width:60%}
.pick button{min-height:44px;padding:0 14px;font-size:13.5px;border:1px solid currentColor;transition:background .2s,color .2s}
.pick button[aria-pressed=true]{background:var(--type);color:var(--bg,var(--sage))}
.hero__buy{display:grid;justify-items:end;gap:9px;text-align:right}
.hero__buy p{font-size:14.5px}

/* story */
.story{padding:clamp(90px,14vw,210px) var(--gut);background:var(--pale)}
.story .eyebrow{margin-bottom:26px}
.story__l{font:400 clamp(34px,5.6vw,92px)/1.06 var(--disp);letter-spacing:-.012em;max-width:17em}
.story__l .w{display:inline-block;margin-right:.2em;opacity:.16}

/* wide */
.wide{background:var(--pale);padding-bottom:clamp(50px,7vw,110px)}
.wide__i{height:92vh;overflow:hidden;margin:0 var(--gut)}
.wide__i img{width:100%;height:116%;object-fit:cover;object-position:50% 62%;will-change:transform}
.wide__c{margin:14px var(--gut) 0;max-width:30rem;font-size:15.5px}

/* made */
.made{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,6vw,96px) clamp(14px,2vw,28px);padding:clamp(70px,9vw,140px) var(--gut);background:var(--slate);color:var(--cream)}
.made em{color:#C9B59C}
.made__h{grid-column:1/-1}
.made__h .eyebrow{margin-bottom:18px}
.made__h h2{font-size:clamp(50px,9.2vw,160px);line-height:.94}
.m figure{overflow:hidden;margin:0}
.m img{width:100%;object-fit:cover}
.m div{padding-top:15px;max-width:27rem}
.m b{font:500 12.5px/1 var(--mono);color:#C9B59C}
.m h3{font-size:clamp(25px,2.5vw,38px);line-height:1.08;margin:7px 0}
.m p{font-size:16px;opacity:.9}
.m--a{grid-column:1/9}.m--a img{aspect-ratio:3/2}
.m--b{grid-column:9/13;margin-top:clamp(50px,12vw,190px)}.m--b img{aspect-ratio:4/5;object-position:60% 50%}
.m--c{grid-column:3/8}.m--c img{aspect-ratio:1/1}
.rev{clip-path:inset(12% 8% 12% 8%)}

/* boots */
.boots{padding:clamp(70px,9vw,140px) var(--gut);background:var(--sage)}
.boots__h{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end;gap:24px;margin-bottom:clamp(30px,4vw,60px)}
.boots__h h2{font-size:clamp(58px,11.5vw,200px);line-height:.88;color:var(--ox)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.card{position:relative;background:var(--pale);padding:clamp(14px,1.5vw,22px);display:flex;flex-direction:column;gap:10px}
.card:nth-child(1){grid-column:1/8}
.card:nth-child(2){grid-column:8/13;margin-top:clamp(36px,7vw,110px)}
.card:nth-child(3){grid-column:1/6}
.card:nth-child(4){grid-column:6/13;margin-top:clamp(-70px,-4vw,-20px)}
.card__i{flex:1;display:grid;place-items:center;overflow:hidden;min-height:0}
.card__i img{width:100%;max-height:620px;object-fit:contain;transition:transform .7s cubic-bezier(.2,.9,.2,1)}
.card:hover .card__i img{transform:scale(1.045) rotate(-1.2deg)}
.card__t{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card h3{font-size:clamp(24px,2.6vw,40px);line-height:1.05}
.card small{font:400 12.5px/1.3 var(--mono)}
.card__p{font:500 16px/1 var(--body);white-space:nowrap}
.card__d{font-size:15px;max-width:30rem}
.sizes{display:flex;flex-wrap:wrap;gap:4px}
.sizes button{min-width:42px;min-height:42px;padding:0 4px;font:400 13px/1 var(--mono);border:1px solid rgba(30,21,18,.32);transition:background .12s,color .12s}
.sizes button:hover{border-color:var(--ink)}
.sizes button[aria-pressed=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.add{height:50px;background:var(--ox);color:var(--cream);font:500 15px/1 var(--body);transition:background .2s}
.add:hover{background:var(--ink)}
.card__e{min-height:1.2em;font:400 12.5px/1.2 var(--mono);color:var(--ox)}

/* worn */
.worn{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,28px);padding:clamp(70px,9vw,140px) var(--gut);background:var(--pale);align-items:end}
.worn figure{margin:0}
.worn img{width:100%;object-fit:cover}
.worn figcaption{padding-top:10px;font-size:15px}
.worn__a{grid-column:1/7}
.worn__b{grid-column:1/6}.worn__a:not([hidden])~.worn__b{grid-column:7/12}
.worn__b img{aspect-ratio:4/5}
.worn blockquote{grid-column:7/13}
.worn__a:not([hidden])~blockquote{grid-column:1/-1}
.worn blockquote p{font:400 clamp(36px,5.2vw,86px)/1.05 var(--disp);color:var(--ox)}
.worn blockquote footer{margin-top:14px;font:500 12.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* backing */
.back{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,44px);padding:0 var(--gut) clamp(70px,9vw,140px);background:var(--pale)}
.back figure{grid-column:1/7;margin:0}
.back figure img{width:100%;height:100%;min-height:380px;object-fit:cover}
.back__c{grid-column:7/13;display:grid;gap:17px;align-content:center;justify-items:start}
.back h2{font-size:clamp(34px,4.2vw,68px);line-height:1.03}
.back ol{list-style:none;padding:0;border-top:1px solid rgba(30,21,18,.25);width:100%}
.back li{padding:12px 0;border-bottom:1px solid rgba(30,21,18,.25)}
.back li b{font-weight:600}
.btn--l{margin-top:6px}

/* list */
.list{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:24px;padding:clamp(50px,6vw,90px) var(--gut);background:var(--ox);color:var(--cream)}
.list h2{font-size:clamp(40px,6.2vw,104px);line-height:.98}
.list label{display:block;font:500 12.5px/1 var(--mono);margin-bottom:9px}
.list form>div{display:flex}
.list input{flex:1;min-width:0;height:54px;padding:0 14px;border:1px solid var(--cream);border-right:0;background:transparent;color:var(--cream);font:400 17px/1 var(--body);border-radius:0}
.list input::placeholder{color:rgba(242,237,226,.72)}
.list button{height:54px;padding:0 20px;background:var(--cream);color:var(--ox);font:500 15px/1 var(--body);white-space:nowrap}
.list p{min-height:1.2em;margin-top:7px;font:400 12.5px/1.2 var(--mono)}

/* footer */
.ft{background:var(--slate);color:var(--cream);padding:clamp(18px,2.4vw,34px) var(--gut) 20px;overflow:hidden}
.ft__wm{font:400 25.5vw/.86 var(--disp);letter-spacing:-.025em;white-space:nowrap;margin-left:-.02em}
.ft__r{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;margin-top:20px;font-size:14px;align-items:start}
.ft__r nav{display:flex;gap:6px 16px;flex-wrap:wrap}
.ft__r nav a{text-decoration:none}.ft__r nav a:hover{text-decoration:underline}
.ft__r p:last-child{text-align:right}

/* jemirae badge */
.jb{position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:30;display:flex;align-items:center;gap:10px;padding:9px 38px 9px 12px;background:var(--cream);color:var(--ink);text-decoration:none;font-size:12.5px;line-height:1.25;box-shadow:0 0 0 1px rgba(30,21,18,.2)}
.jb svg{width:42px}
.jb button{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:32px;height:40px;font-size:17px}

/* bag */
.drawer{position:fixed;z-index:70;top:0;right:0;bottom:0;width:min(450px,100%);background:var(--pale);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.drawer.open{transform:none}
.drawer>header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid rgba(30,21,18,.25)}
.drawer h2{font-size:31px}
.drawer>header button{width:44px;height:44px;font-size:25px}
.drawer__b{flex:1;overflow:auto;padding:6px 20px}
.line{display:grid;grid-template-columns:92px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(30,21,18,.18)}
.line img{width:92px;height:92px;object-fit:contain;background:var(--sage)}
.line h3{font-size:19px;line-height:1.1}
.line small{display:block;font:400 12px/1.5 var(--mono)}
.line__q{display:flex;align-items:center;gap:2px;margin-top:4px;font:500 12.5px/1 var(--mono)}
.line__q button{width:32px;height:32px;border:1px solid var(--ink)}
.line__q span{min-width:24px;text-align:center}
.line b{font-weight:500;font-size:15px}
.empty{padding:36px 0;font:400 32px/1.1 var(--disp)}
.empty small{display:block;margin-top:10px;font:400 15px/1.4 var(--body)}
.drawer>footer{padding:14px 20px 18px;border-top:1px solid rgba(30,21,18,.25);display:grid;gap:10px}
.drawer>footer:empty{display:none}
.steps{display:flex;gap:6px;font:500 11.5px/1 var(--mono)}
.steps span{flex:1;padding-top:7px;border-top:3px solid rgba(30,21,18,.18)}
.steps span.on{border-color:var(--ox)}
.field{display:grid;gap:5px;font:500 12px/1 var(--mono)}
.field input,.field select{height:46px;padding:0 12px;border:1px solid var(--ink);background:#fff;border-radius:0;color:var(--ink);font:400 16px/1 var(--body);min-width:0;width:100%}
.twin{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sum{display:flex;justify-content:space-between;font-size:15px}
.sum--t{font-weight:600;font-size:16.5px}
.go{height:52px;background:var(--ox);color:var(--cream);font:500 15.5px/1 var(--body)}
.go:hover{background:var(--ink)}
.bk{font-size:13.5px;text-decoration:underline;justify-self:start;min-height:30px}
.scrim{position:fixed;inset:0;z-index:65;background:rgba(30,21,18,.5);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}

/* concept modal */
.dev{margin:auto;width:min(500px,calc(100% - 32px));padding:clamp(22px,3vw,34px);border:0;background:var(--cream);color:var(--ink)}
.dev::backdrop{background:rgba(30,21,18,.55)}
.dev[open]{animation:rise .5s cubic-bezier(.2,.9,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.dev .eyebrow{color:var(--ox);margin-bottom:12px}
.dev h2{font-size:clamp(31px,4.4vw,44px);line-height:1.04;margin-bottom:11px}
.dev p:not(.eyebrow){margin-bottom:20px}
.dev__a{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.dev__a button{min-height:48px;padding:0 19px;background:var(--ox);color:var(--cream);font-size:15px}
.dev__a a{font-size:15px;padding:12px 0}

@media (max-width:860px){
  .hdr{grid-template-columns:1fr auto}
  .hdr__nav{display:none}
  .hero__t{top:112px;flex-direction:column;align-items:center;font-size:37vw;line-height:.82}
  .hero__stage{width:min(100vw,62vh);bottom:112px}
  .hero__b{flex-direction:column;align-items:stretch;gap:10px}
  .pick{max-width:none;display:grid;grid-template-columns:1fr 1fr}
  .pick button{padding:0 6px;font-size:13px}
  .hero__buy{display:flex;justify-content:space-between;align-items:center;text-align:left}
  .hero__buy .btn{padding:13px 14px;font-size:14px}
  .wide__i{height:68vh}
  .made{grid-template-columns:repeat(6,minmax(0,1fr))}
  .m--a{grid-column:1/-1}
  .m--b{grid-column:2/-1;margin-top:0}
  .m--c{grid-column:1/6}
  .boots__h,.list{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .card:nth-child(n){grid-column:1;margin-top:0}
  .worn{grid-template-columns:repeat(6,minmax(0,1fr))}
  .worn__a,.worn__a:not([hidden])~.worn__b,.worn__b{grid-column:1/6}
  .worn blockquote,.worn__a:not([hidden])~blockquote{grid-column:1/-1}
  .back{grid-template-columns:1fr}
  .back figure,.back__c{grid-column:1}
  .ft__r{grid-template-columns:1fr}
  .ft__r p:last-child{text-align:left;padding-bottom:62px}
  .jb{font-size:12px}
}
@media (max-width:860px) and (max-height:680px){
  .hero__k{display:none}
  .hero__t{top:62px;font-size:26vw}
  .hero__stage{width:min(90vw,50vh);bottom:112px}
}
@media (prefers-reduced-motion:reduce){
  .boot,.hero,.card__i img{transition:none}
  .dev[open]{animation:none}
  .rev{clip-path:none}
  .story__l .w{opacity:1}
}