:root {
  --ink:#0a0a0a;
  --paper:#fff;
  --line:rgba(10,10,10,.2);
  --muted:#777;
  --ui:'Inter Tight',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:90px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased
}
button,input,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
button,a,input {
  outline-offset:6px
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid var(--ink)
}
::selection {
  background:#0a0a0a;
  color:white
}
.micro {
  font-size:10px;
  line-height:1.4;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500
}
.page-frame {
  position:fixed;
  inset:12px;
  border:1px solid var(--ink);
  z-index:20;
  pointer-events:none
}
.header {
  position:absolute;
  top:13px;
  left:13px;
  right:13px;
  height:88px;
  padding:0 37px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  z-index:10
}
.wordmark {
  position:relative;
  font-size:26px;
  font-weight:650;
  letter-spacing:-1.6px;
  line-height:1
}
.wordmark-dot {
  font-size:10px;
  letter-spacing:0;
  vertical-align:top;
  margin-left:3px;
  position:relative;
  top:2px
}
.header-edition {
  margin-left:90px;
  color:#666
}
.header-shop {
  display:flex;
  gap:27px;
  align-items:center
}
.header-shop>span {
  font-size:20px
}
.experience {
  position:relative
}
.stage-track {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none
}
.stage {
  position:sticky;
  top:0;
  height:100svh;
  min-height:600px;
  z-index:2;
  pointer-events:none;
  overflow:hidden
}
.stage canvas {
  display:block;
  width:100%;
  height:100%
}
.fallback {
  display:none;
  position:absolute;
  width:73%;
  max-width:1100px;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%)
}
.stage.webgl-failed canvas {
  display:none
}
.stage.webgl-failed .fallback {
  display:block
}
.chapter {
  position:relative;
  height:100svh;
  min-height:700px;
  padding:135px 50px 45px
}
.hero {
  padding-top:130px
}
.hero-topline {
  display:flex;
  justify-content:space-between
}
.hero-topline>span:last-child {
  color:var(--muted)
}
h1,h2,p {
  margin:0
}
h1,h2 {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.9
}
em {
  font-weight:400
}
h1 {
  text-align:center;
  font-size:clamp(110px,15.8vw,260px);
  margin-top:43px;
  position:relative;
  z-index:1;
  white-space:nowrap
}
h1 em {
  padding-right:.06em
}
h2 {
  font-size:clamp(70px,7.8vw,130px)
}
.hero-index {
  position:absolute;
  top:50%;
  left:50px;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:8px
}
.index-mark {
  font-size:11px
}
.hero-index:before {
  content:'+';
  font-size:20px;
  font-weight:400;
  margin-bottom:8px
}
.hero-bottom {
  position:absolute;
  left:50px;
  right:50px;
  bottom:48px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  z-index:4
}
.hero-bottom p {
  font-size:17px;
  line-height:1.4;
  letter-spacing:-.03em
}
.text-link {
  display:flex;
  align-items:center;
  gap:30px;
  padding-bottom:6px;
  border-bottom:1px solid var(--ink)
}
.down-arrow {
  font-size:22px;
  line-height:1;
  font-weight:400
}
.hero-color {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px
}
.hero-color i {
  width:7px;
  height:7px;
  background:#ef682d;
  border-radius:50%;
  margin-right:4px
}
.edge-note {
  position:absolute;
  right:30px;
  top:53%;
  writing-mode:vertical-rl;
  font-size:8px;
  letter-spacing:.18em
}
.section-number {
  margin-bottom:32px
}
.perspective h2 {
  position:relative;
  z-index:3
}
.type-reveal {
  clip-path:inset(0 100% 0 0);
  display:inline-block
}
.side-copy {
  position:absolute;
  right:6%;
  bottom:20%;
  width:210px;
  z-index:3
}
.side-copy>p:first-child {
  font-size:24px;
  letter-spacing:-.04em;
  line-height:1.15;
  margin-bottom:20px
}
.small-copy {
  font-size:13px;
  color:#666;
  line-height:1.7
}
.dimension {
  position:absolute;
  left:33%;
  bottom:25%;
  width:28%;
  display:flex;
  align-items:center;
  gap:13px;
  flex-direction:column;
  z-index:3
}
.dimension-line {
  height:10px;
  border-bottom:1px solid var(--ink);
  width:100%;
  position:relative;
  transform:scaleX(0);
  transform-origin:left
}
.dimension-line:before,.dimension-line:after {
  content:'';
  position:absolute;
  height:9px;
  width:1px;
  bottom:-5px;
  background:var(--ink)
}
.dimension-line:before {
  left:0
}
.dimension-line:after {
  right:0
}
.chapter-foot {
  position:absolute;
  left:50px;
  right:50px;
  bottom:40px;
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:8px
}
.construction h2 {
  font-size:clamp(68px,7.4vw,120px);
  position:relative;
  z-index:3
}
.construction-intro {
  position:absolute;
  right:7%;
  top:150px;
  font-size:16px;
  line-height:1.4
}
.callouts {
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none
}
.callout {
  position:absolute;
  font-size:10px;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  gap:12px;
  opacity:0
}
.callout b {
  font-size:8px;
  font-weight:400;
  border:1px solid var(--line);
  border-radius:50%;
  width:21px;
  height:21px;
  display:grid;
  place-items:center
}
.callout i {
  width:70px;
  height:1px;
  background:var(--ink);
  position:relative
}
.callout i:after {
  content:'';
  width:4px;
  height:4px;
  border:1px solid var(--ink);
  border-radius:50%;
  position:absolute;
  right:-4px;
  top:-2px;
  background:white
}
.lens-label {
  left:10%;
  top:65%
}
.frame-label {
  left:19%;
  top:38%
}
.hinge-label {
  right:7%;
  top:50%;
  flex-direction:row-reverse
}
.hinge-label i:after,.pads-label i:after {
  right:auto;
  left:-4px
}
.pads-label {
  right:18%;
  top:77%;
  flex-direction:row-reverse
}
.palette h2 {
  font-size:clamp(64px,6.5vw,110px);
  position:relative;
  z-index:3
}
.color-selector {
  position:absolute;
  right:6%;
  bottom:17%;
  width:285px;
  z-index:5
}
.color-meta {
  display:flex;
  justify-content:space-between;
  font-size:8px
}
.color-meta .micro {
  font-size:8px
}
.color-count {
  color:#777
}
.swatches {
  display:flex;
  gap:17px;
  margin:22px 0
}
.swatch {
  border:1px solid transparent;
  border-radius:50%;
  background:none;
  padding:5px;
  width:53px;
  height:53px;
  cursor:pointer;
  transition:border-color .2s,transform .2s
}
.swatch:hover {
  transform:translateY(-3px)
}
.swatch.active {
  border-color:var(--ink)
}
.swatch span {
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px #0000000a
}
.fire span {
  background:linear-gradient(145deg,#f8cb64 3%,#fa742d 48%,#a32b2a)
}
.ice span {
  background:linear-gradient(145deg,#9fe6ed,#5382cf 48%,#6c3d96)
}
.smoke span {
  background:linear-gradient(145deg,#bcc0c0,#555e61 48%,#212329)
}
.emerald span {
  background:linear-gradient(145deg,#d1dc74,#458d70 48%,#103f37)
}
.selected-color {
  display:flex;
  flex-direction:column;
  gap:9px
}
.selected-color>span:first-child {
  font-family:var(--serif);
  font-size:36px;
  letter-spacing:-.03em
}
.selected-color .micro {
  font-size:8px;
  color:#666
}
.product {
  position:relative;
  padding:125px 8%;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:10%;
  border-top:1px solid var(--ink);
  margin:0 13px;
  background:var(--paper);
  z-index:4
}
.product-heading>.micro {
  display:block;
  margin-bottom:65px
}
.product h2 {
  font-size:clamp(65px,7.1vw,115px)
}
.product-details {
  padding-top:90px
}
.product-name {
  display:flex;
  justify-content:space-between;
  align-items:baseline
}
.product-name h3 {
  font-family:var(--serif);
  font-size:48px;
  font-weight:400;
  letter-spacing:-.04em;
  margin:0
}
.price {
  font-size:24px;
  letter-spacing:-.05em
}
.product-subtitle {
  font-size:13px;
  color:#666;
  margin:10px 0 35px
}
.product-spec {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  padding:16px 0;
  border-top:1px solid var(--line)
}
.product-spec>span:first-child {
  color:#777
}
.product-spec a {
  display:flex;
  gap:12px
}
.bag-button {
  background:var(--ink);
  color:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:23px 24px;
  margin-top:16px;
  font-size:12px;
  transition:background .2s
}
.bag-button:hover {
  background:#333
}
.bag-button>span:last-child {
  font-size:20px
}
.availability {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:8px;
  margin-top:15px;
  color:#666
}
.availability>span {
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--ink)
}
.notify {
  margin:0 50px;
  padding:90px 4% 100px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px 10%;
  align-items:end
}
.notify>.micro {
  grid-column:1/-1
}
.notify h2 {
  font-size:clamp(65px,7vw,110px)
}
.notify form {
  padding-bottom:7px
}
.email-row {
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--ink)
}
.email-row input {
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  font-size:14px;
  padding:18px 0;
  border-radius:0;
  color:var(--ink)
}
.email-row button {
  background:transparent;
  color:var(--ink);
  border:0;
  font-size:28px;
  cursor:pointer;
  padding:10px
}
.notify form p {
  font-size:10px;
  line-height:1.6;
  color:#777;
  max-width:290px;
  margin-top:14px
}
footer {
  margin:0 13px 13px;
  padding:40px 37px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  border-top:1px solid var(--ink);
  gap:20px;
  align-items:start
}
.footer-cell {
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:11px
}
.footer-cell .micro {
  font-size:8px;
  color:#777
}
.footer-last {
  text-align:right
}
.skip-link {
  position:fixed;
  top:-100px;
  left:25px;
  background:var(--ink);
  color:white;
  padding:15px;
  z-index:30
}
.skip-link:focus {
  top:25px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  clip:rect(0,0,0,0);
  overflow:hidden
}
.lenis.lenis-smooth {
  scroll-behavior:auto!important
}
.lenis.lenis-stopped {
  overflow:hidden
}
@media(min-width:1600px) {
  .chapter {
    padding-left:75px;
    padding-right:75px
  }
  .hero-index {
    left:75px
  }
  .hero-bottom {
    left:75px;
    right:75px
  }
}
@media(max-width:800px) {
  .header {
    padding:0 22px;
    height:75px
  }
  .header-edition {
    display:none
  }
  .wordmark {
    font-size:23px
  }
  .header-shop {
    font-size:8px;
    gap:16px
  }
  .chapter {
    padding:118px 30px 35px;
    min-height:670px
  }
  .hero-topline {
    font-size:8px
  }
  .hero-topline>span:last-child {
    display:none
  }
  h1 {
    font-size:18vw;
    margin-top:66px
  }
  .hero-index {
    left:30px;
    top:44%;
    font-size:7px
  }
  .hero-bottom {
    left:30px;
    right:30px;
    bottom:42px
  }
  .hero-bottom p {
    font-size:14px
  }
  .hero-color {
    display:none
  }
  .text-link {
    font-size:8px;
    gap:20px
  }
  .edge-note {
    right:22px;
    font-size:7px
  }
  .section-number {
    font-size:8px;
    margin-bottom:25px
  }
  .side-copy {
    right:35px;
    bottom:15%;
    width:175px
  }
  .side-copy>p:first-child {
    font-size:20px;
    margin-bottom:10px
  }
  .small-copy {
    font-size:11px
  }
  .dimension {
    left:14%;
    bottom:28%;
    width:38%;
    font-size:8px
  }
  .chapter-foot {
    left:30px;
    right:30px;
    bottom:30px;
    font-size:7px
  }
  .construction-intro {
    display:none
  }
  .construction h2 {
    font-size:10vw
  }
  .callout {
    font-size:8px;
    gap:7px
  }
  .callout i {
    width:35px
  }
  .lens-label {
    left:7%;
    top:70%
  }
  .frame-label {
    left:10%;
    top:37%
  }
  .hinge-label {
    right:7%;
    top:45%
  }
  .pads-label {
    right:8%;
    top:80%
  }
  .color-selector {
    right:35px;
    bottom:13%;
    width:250px
  }
  .swatches {
    gap:11px;
    margin:15px 0
  }
  .swatch {
    width:48px;
    height:48px
  }
  .palette h2 {
    font-size:10vw
  }
  .selected-color>span:first-child {
    font-size:30px
  }
  .product {
    padding:75px 25px;
    gap:50px;
    grid-template-columns:1fr
  }
  .product-heading>.micro {
    margin-bottom:30px
  }
  .product h2 {
    font-size:15vw
  }
  .product-details {
    padding-top:0
  }
  .product-name h3 {
    font-size:44px
  }
  .notify {
    margin:0 38px;
    padding:65px 0;
    grid-template-columns:1fr;
    gap:30px
  }
  .notify h2 {
    font-size:17vw
  }
  .notify>.micro {
    grid-column:auto
  }
  .notify form {
    padding-top:10px
  }
  footer {
    padding:30px 25px;
    grid-template-columns:1fr 1fr;
    gap:30px
  }
  .footer-last {
    text-align:left
  }
  .footer-cell {
    font-size:10px
  }
  .stage {
    min-height:600px
  }
  .fallback {
    width:100%
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .type-reveal {
    clip-path:none
  }
  .dimension-line {
    transform:none
  }
  .callout {
    opacity:1
  }
}
.spec-preview {
  position:absolute;
  left:50px;
  bottom:78px;
  font-size:7px;
  color:#777;
  z-index:4
}
.preview-price {
  font-size:10px;
  color:#777;
  margin-top:12px
}
@media(max-width:800px) {
  .spec-preview {
    left:30px;
    bottom:65px;
    max-width:220px;
    font-size:6px
  }
}
#notify-fields {
  border:0;
  padding:0;
  margin:0;
  min-width:0
}
#notify-fields:disabled {
  opacity:.45
}

@media(max-width:699.98px) {
  .hero-index,.edge-note {
    display:none
  }
}

.stage.palette-view .fallback {
  left:36%;
  width:55%
}
@media(max-width:800px) {
  .stage.palette-view .fallback {
    left:50%;
    top:48%;
    width:90%
  }
}