body{margin:0}
a{color:var(--ink);text-decoration:none;transition:color .25s}a:hover{color:var(--accent)}
.pd{max-width:1440px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px;box-sizing:border-box}
.eb{display:flex;align-items:center;gap:18px;font:400 10px var(--sans);letter-spacing:.3em;color:var(--accent)}
.eb::after{content:"";flex:1;height:1px;background:rgba(154,64,33,.35)}
.nx .eb::after{display:none}
.h2{margin:18px 0 0;font:300 60px/1 var(--serif);letter-spacing:-.01em}
.landing main .btn{height:58px;padding:0 36px;font:500 10.5px var(--sans);letter-spacing:.3em}
.lnk{display:inline-block;padding-bottom:5px;border-bottom:1px solid var(--accent);font:400 10px var(--sans);letter-spacing:.26em}
.landing{position:relative;--landing-nav-height:58px}
.landing > .store-head{position:absolute;inset:0 0 auto}
@media(max-width:1320px){.landing{--landing-nav-height:56px}}
.hero{
  --hero-edge:clamp(20px,4vw,72px);
  --hero-mark-width:min(57vw,740px);
  --hero-mark-height:calc(var(--hero-mark-width) * .086066);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  align-items:end;
  min-height:clamp(420px,100svh,1000px);
  padding:calc(var(--hero-edge) + var(--hero-mark-height) + 44px) var(--hero-edge) var(--hero-edge);
  background:var(--ink);
  color:var(--paper);
}
.hero-screen,.hero-wordmark,.hero-mark{position:absolute;inset:0;pointer-events:none}
.hero-screen::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#211b17ad 0%,transparent 34%,transparent 47%,#211b17ed 100%);
}
.hero-media{position:absolute;inset:10% 0 auto;margin-inline:auto;width:min(76%,620px);height:74%;object-fit:contain}
.hero-wordmark{opacity:0}
.hero-mark{display:flex;padding:var(--hero-edge)}
.hero-mark-glyph{
  display:block;
  flex:none;
  width:auto;
  height:var(--hero-mark-height);
  filter:invert(1) hue-rotate(180deg);
}
.hero-mark{mix-blend-mode:screen}
.hero-mark-start{
  --split-x:calc(50% - var(--hero-edge) - var(--hero-mark-width) * .5);
  --split-y:calc(50% - var(--hero-edge) - var(--hero-mark-height) * .5);
  justify-content:flex-start;
  align-items:flex-start;
}
.hero-mark-end{
  --split-x:calc(-50% + var(--hero-edge) + var(--hero-mark-width) * .5);
  --split-y:calc(-50% + var(--hero-edge) + var(--hero-mark-height) * .5);
  justify-content:flex-end;
  align-items:flex-end;
}
.hero-copy{position:relative;width:min(100%,48vw);max-width:540px}
.hero h1{margin:0;font:300 clamp(40px,4.2vw,72px)/1.02 var(--serif);letter-spacing:-.02em}
.hero h1 em{white-space:nowrap}
.hero-note{max-width:38ch;margin:14px 0 0;font-size:16px;line-height:1.5}
.hero .hero-actions{gap:12px 22px;margin-top:22px}
.landing main .hero .btn{height:48px;padding-inline:22px;background:var(--paper);color:var(--ink);letter-spacing:.14em}
.landing main .hero .btn:hover{background:var(--cream)}
.hero .lnk{color:var(--paper);border-color:var(--light-accent);letter-spacing:.14em}
.hero :focus-visible{outline-color:var(--paper)}
@media(prefers-reduced-motion:no-preference){
  .landing{
    --hero-open-start:2.35s;
    --hero-open-time:1.55s;
    --hero-open-ease:cubic-bezier(.45,0,.24,1);
    --hero-reveal-time:calc(var(--hero-open-start) + var(--hero-open-time));
    --hero-glyph-time:.4s;
    --hero-glyph-step:.01s;
    --hero-intro-end:calc(var(--hero-reveal-time) + var(--hero-glyph-time) + 12 * var(--hero-glyph-step));
  }
  .hero-wordmark{opacity:1}
  .hero-mark{
    animation:
      hero-split .62s var(--hero-open-ease) 1.17s both,
      hero-mark-open var(--hero-open-time) var(--hero-open-ease) var(--hero-open-start) forwards;
  }
  .hero-mark-glyph{
    --glyph-delay:0s;
    animation:
      hero-mark-in var(--hero-glyph-time) ease-out calc(.18s + var(--glyph-delay)) both,
      hero-mark-out var(--hero-glyph-time) ease-in calc(var(--hero-reveal-time) + var(--glyph-delay)) forwards;
  }
  .hero-screen{animation:hero-screen-open var(--hero-open-time) var(--hero-open-ease) var(--hero-open-start) both}
  .landing > .store-head{animation:landing-nav-enter .32s ease-out var(--hero-intro-end) both}
  .hero-copy{animation:hero-copy-enter .46s ease-out var(--hero-intro-end) both}
  .hero-copy:focus-within{animation:none}
  @keyframes hero-split{
    from{transform:translate3d(var(--split-x),var(--split-y),0)}
    to{transform:translate3d(0,var(--split-y),0)}
  }
  @keyframes hero-mark-open{
    from{transform:translate3d(0,var(--split-y),0)}
    to{transform:none}
  }
  @keyframes hero-mark-in{
    from{opacity:0;filter:invert(1) hue-rotate(180deg) blur(10px)}
    to{opacity:1;filter:invert(1) hue-rotate(180deg) blur(0)}
  }
  @keyframes hero-mark-out{
    from{opacity:1;filter:invert(1) hue-rotate(180deg) blur(0);transform:translateY(0)}
    to{opacity:0;filter:invert(1) hue-rotate(180deg) blur(10px);transform:translateY(-30px)}
  }
  @keyframes hero-screen-open{
    from{opacity:0;clip-path:inset(49% 49% round 40px)}
    30%{opacity:1}
    to{opacity:1;clip-path:inset(0 round 0px)}
  }
  @keyframes hero-copy-enter{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:none}
  }
  @keyframes landing-nav-enter{
    from{opacity:0;visibility:hidden;transform:translateY(-10px)}
    to{opacity:1;visibility:visible;transform:none}
  }
}
.drs{display:flex;gap:12px;height:600px;margin-top:48px}
.dr{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:3px;background:radial-gradient(ellipse at 52% 38%,#48382b,#211a16 75%);color:#fff;transition:flex .8s cubic-bezier(.2,.8,.2,1)}
.dr:hover{color:#fff}
.dr img{position:absolute;inset:14% 8% 25%;width:84%;height:61%;object-fit:contain;transition:transform 1s}
.dr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#15100d22,transparent 28%,transparent 55%,#15100deb 100%);pointer-events:none}
.ix{position:absolute;z-index:1;top:22px;left:24px;font:400 10px 'Michroma',sans-serif;letter-spacing:.16em}
.vt{position:absolute;z-index:1;inset:auto 14px 26px;font:italic 300 clamp(19px,1.7vw,26px)/1.15 var(--serif);text-align:center;transition:opacity .3s}
.in{position:absolute;z-index:1;left:26px;right:26px;bottom:26px;opacity:0;transform:translateY(10px);transition:opacity .5s .15s,transform .6s .15s}
@media(width > 980px){
  .dr:hover,.drs:not(:hover) .dr.f{flex:3;color:#fff}
  .dr:hover img,.drs:not(:hover) .dr.f img{transform:scale(1.04)}
  .dr:hover .in,.drs:not(:hover) .dr.f .in{opacity:1;transform:none}
  .dr:hover .vt,.drs:not(:hover) .dr.f .vt{opacity:0}
}
.in h3{margin:0;font:300 52px/1 var(--serif)}
.in p{margin:12px 0 0;font-size:12px;line-height:1.7;color:#f2e7dc;max-width:300px}
.dots{display:flex;gap:7px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.25)}
.dots i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.dots span{margin-left:auto;font:400 9px var(--sans);letter-spacing:.26em}
.sws{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px 20px;margin-top:56px}
.sw{display:flex;flex-direction:column;align-items:center;gap:16px;font:400 9px var(--sans);letter-spacing:.2em;color:var(--muted)}
.sw i{display:block;width:78px;height:78px;box-sizing:border-box;border-radius:50%;border:13px solid var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(33,27,22,.08),0 18px 22px -16px rgba(33,27,22,.6);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sw:hover i{transform:translateY(-8px) rotate(14deg)}
.dark{background:var(--ink);color:#fff}
.dark .h2{color:#fff}
.craft{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:90px;align-items:center;padding-top:120px;padding-bottom:120px}
.pw{position:relative;justify-self:end;width:340px;margin:0 20px 20px 0}
.pw::before{content:"";position:absolute;inset:20px -20px -20px 20px;border:1px solid rgba(206,127,89,.55)}
.pw img{position:relative;display:block;width:100%;aspect-ratio:9/16;object-fit:contain;box-shadow:0 40px 70px -30px rgba(0,0,0,.75)}
.size{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:90px;align-items:center;padding-top:120px;padding-bottom:120px}
.rings{display:flex;align-items:flex-end;justify-content:center;gap:min(34px,3vw);padding-bottom:22px;border-bottom:1px solid rgba(154,64,33,.45)}
.rings div{display:flex;min-width:0;flex-direction:column;align-items:center;gap:14px;font:400 18px var(--serif)}
.rings i{display:block;border-radius:50%;box-sizing:border-box;border:7px solid var(--accent);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),rgba(255,255,255,0) 50%)}
.rings div{flex-direction:column-reverse}
.rings span{text-align:center}
.rings small{display:block;font:12px var(--sans);color:var(--muted)}
.best{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:48px}
.pc{display:block;color:var(--ink)}
.pc .im{position:relative;overflow:hidden;aspect-ratio:10/15;background:#000;border-radius:2px}
.pc img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;transition:transform .9s}
.pc:hover img{transform:scale(1.05)}
.pc em{position:absolute;z-index:1;left:16px;bottom:16px;font:normal 400 9px var(--sans);letter-spacing:.28em;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.pc:hover em{opacity:1;transform:none}
.pc b{display:block;margin-top:18px;font:400 24px/1.1 var(--serif)}
.pc span{display:block;margin-top:8px;font-size:11px;letter-spacing:.06em;color:var(--muted)}
.ft{background:var(--ink);color:#d6c7ba;overflow:hidden}
.ft a{color:#f2e7dc}.ft a:hover{color:var(--light-accent)}
.fc{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-top:80px;padding-bottom:40px;font-size:11px;letter-spacing:.14em}
.fc h4{margin:0 0 18px;font:400 9px var(--sans);letter-spacing:.3em;color:var(--light-accent)}
.fc a{display:block;padding:7px 0}
.wm{padding-bottom:0;font:400 clamp(18px,6.5vw,110px)/1 'Michroma',sans-serif;letter-spacing:.1em;color:rgba(255,255,255,.07);white-space:nowrap;text-align:center;user-select:none}
.fb{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px;margin-top:30px;border-top:1px solid rgba(255,255,255,.1);font-size:10px;letter-spacing:.16em}
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@supports(animation-timeline:view()){.rv{animation:up linear both;animation-timeline:view();animation-range:entry 4% entry 42%}}
@media(prefers-reduced-motion:reduce){.rv{animation:none!important}.dr,.in{transition:none}}
@media(max-width:980px){
.pd{padding-left:20px;padding-right:20px}
.craft,.size{grid-template-columns:1fr;gap:44px;min-height:0}
.h2{font-size:42px}
.drs{flex-direction:column;height:auto}
.dr{flex:none;height:360px}.vt{display:none}.in{opacity:1;transform:none}
.in h3{font-size:clamp(25px,7vw,38px)}
.pw{justify-self:center}
.best,.fc{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.landing main .btn,.landing .lnk,.landing .eb,.landing .sw{text-transform:uppercase}
.landing main .btn{border:0}
.landing-section{padding-block:110px 120px}
.colour-section,.featured-section{padding-top:0}
.section-row{display:flex;align-items:flex-end;justify-content:space-between;gap:25px}
.section-row p{margin:0;max-width:290px;font-size:12px;line-height:1.8;color:var(--muted)}
.collection-tap-note{display:none}
.dr:focus-visible .in{opacity:1;transform:none}
.dr:focus-visible .vt{opacity:0}
.craft .craft-eyebrow,.craft .lnk{color:var(--light-accent)}
.craft p,.size p{margin:28px 0 36px;max-width:440px;line-height:1.9}
.craft p{color:#e7d9cc}
.size p{color:var(--muted)}
.size .size-note{text-align:center;margin:18px auto 0;font-size:11px}
.rings i{width:var(--ring);max-width:100%;aspect-ratio:1}
.pc .im{background:var(--cream)}
.pc .im em{background:var(--ink);padding:8px}
.pc:focus-visible em{opacity:1;transform:none}
@media(max-width:980px){
  .craft,.size{grid-template-columns:minmax(0,1fr)}
  .landing-section{padding-block:66px 76px}
  .colour-section,.featured-section{padding-top:0}
  .section-row{align-items:start;flex-direction:column;gap:14px}
  [data-collection-previews][data-enhanced] .collection-lookbook-note{display:none}
  [data-collection-previews][data-enhanced] .collection-tap-note{display:block}
  [data-collection-previews][data-enhanced] .drs{overflow-anchor:none}
  [data-collection-previews][data-enhanced] .dr{height:112px}
  [data-collection-previews][data-enhanced] .dr:not(.is-expanded) img{inset:12% 6% auto auto;width:34%;height:76%}
  [data-collection-previews][data-enhanced] .dr.is-expanded{height:360px}
  [data-collection-previews][data-enhanced] .vt{display:block;inset:auto 30% 18px 24px;text-align:left;font-size:clamp(22px,5vw,30px)}
  [data-collection-previews][data-enhanced] .in{opacity:0;transform:translateY(10px)}
  [data-collection-previews][data-enhanced] .is-expanded .in{opacity:1;transform:none}
  [data-collection-previews][data-enhanced] .is-expanded .vt{opacity:0}
  .craft,.size{padding-block:74px}
  .pw{width:min(340px,calc(100% - 20px))}
}
@media(max-width:980px) and (prefers-reduced-motion:no-preference){
  [data-collection-previews][data-enhanced] .dr{transition:height .48s cubic-bezier(.2,.8,.2,1)}
  [data-collection-previews][data-enhanced] .dr:not(.is-expanded) .in{transition:opacity .2s,transform .2s}
}
@media(max-width:980px) and (prefers-reduced-motion:reduce){
  [data-collection-previews][data-enhanced] .vt{transition:none}
}
@media(max-width:820px){
  .hero{--hero-mark-width:min(78vw,430px)}
  .hero-copy{width:min(100%,460px)}
  .hero h1{font-size:clamp(35px,9.5vw,54px)}
}
@media(max-height:500px) and (orientation:landscape){
  .hero{
    --hero-edge:20px;
    --hero-mark-width:min(44vw,450px);
    min-height:100svh;
    padding-block:calc(var(--hero-edge) + var(--hero-mark-height) + 16px) var(--hero-edge);
  }
  .hero-copy{width:min(55vw,490px)}
  .hero h1{font-size:clamp(32px,4.5vw,42px)}
  .hero .hero-actions{margin-top:14px}
}
@media(max-width:360px){
  .hero .hero-actions{column-gap:12px}
  .landing main .hero .btn{padding-inline:14px;letter-spacing:.1em}
}
@media(max-width:560px){
  .landing main .btn{padding-inline:18px;letter-spacing:.14em}
  .sw i{width:57px;height:57px;border-width:9px}
  .sws{justify-content:start;gap:24px 18px;margin-top:32px}
  .rings{gap:9px}
  .rings i{width:calc(var(--ring) * .55)}
  .best{gap:22px 12px}
}