:root {
  color-scheme:light;
  --cream:#f5efe5;
  --ink:#233843;
  --navy:#101e29;
  --mint:#b8fbd9;
  --page-bg:var(--cream);
  --hero-ink:var(--ink);
  --stars:0;
  --gutter:clamp(24px,5.5vw,88px);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:16px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  background:var(--page-bg);
  color:var(--hero-ink);
  line-height:1.6
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  font:inherit
}

a {
  color:inherit;
  text-decoration:none
}

button {
  cursor:pointer
}

img {
  display:block;
  max-width:100%;
  height:auto
}

figure,p,h1,h2,h3 {
  margin:0
}

h1,h2,h3,.brand,.brand-moment p {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400
}

h2 {
  font-size:clamp(2.25rem,4.1vw,4rem);
  line-height:1.17;
  letter-spacing:-.045em
}

h3 {
  font-size:clamp(2.2rem,4.2vw,4.4rem);
  line-height:1.15;
  letter-spacing:-.04em
}

em {
  font-weight:400
}

.wrap {
  width:min(100%,1440px);
  margin-inline:auto;
  padding-inline:var(--gutter)
}

.eyebrow {
  font-size:.75rem;
  line-height:1.6;
  font-weight:500;
  letter-spacing:.19em
}

.night-section {
  position:relative;
  color:var(--cream)
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

[hidden] {
  display:none!important
}

:focus-visible {
  outline:2px solid currentColor;
  outline-offset:6px
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  padding:12px 20px;
  background:var(--cream);
  color:var(--navy);
  z-index:20;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

.masthead {
  height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  position:relative;
  z-index:3
}

.brand {
  font-size:1.8rem;
  letter-spacing:-.065em;
  white-space:nowrap;
  line-height:1.1;
  padding-block:8px
}

.brand>span:first-child {
  font-size:1.8rem;
  vertical-align:middle;
  padding-right:7px
}

.brand em {
  font-size:.8em
}

.brand-note {
  display:block;
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:.5625rem;
  font-weight:500;
  letter-spacing:.2em;
  margin-top:11px;
  padding-left:35px
}

.masthead nav {
  display:flex;
  align-items:center;
  gap:30px
}

.shop-link {
  white-space:nowrap;
  font-size:.8125rem;
  padding:12px 0;
  border-bottom:1px solid color-mix(in srgb,currentColor 28%,transparent)
}

.shop-link span {
  margin-left:18px
}

.motion-control {
  border:0;
  background:none;
  color:inherit;
  font-size:.75rem;
  padding:12px 0;
  text-decoration:underline;
  text-underline-offset:5px
}

.sky {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:var(--stars)
}

.sky i {
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#c5ecd9;
  box-shadow:0 0 8px #b8fbd944;
  opacity:.5
}

.sky i:nth-child(1) {
  left:8%;
  top:26%
}

.sky i:nth-child(2) {
  left:37%;
  top:14%
}

.sky i:nth-child(3) {
  left:87%;
  top:18%
}

.sky i:nth-child(4) {
  left:94%;
  top:68%
}

.sky i:nth-child(5) {
  left:19%;
  top:81%
}

.sky i:nth-child(6) {
  left:56%;
  top:72%
}

.sky i:nth-child(7) {
  left:69%;
  top:8%
}

.sky i:nth-child(8) {
  left:5%;
  top:59%
}

.sky i:nth-child(9) {
  left:77%;
  top:89%
}

.hero-story {
  position:relative
}

.hero-pin {
  position:relative;
  padding-top:26px;
  padding-bottom:64px
}

.hero-copy {
  position:relative;
  z-index:1
}

.hero-copy .eyebrow {
  margin-bottom:24px
}

h1 {
  font-size:clamp(2.4rem,5.2vw,5.2rem);
  line-height:1.015;
  letter-spacing:-.06em;
  min-width:0
}

.hero-lines {
  display:grid
}

.hero-lines>span {
  grid-area:1/1;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none
}

.hero-lines>span.is-current {
  opacity:1
}

.hero-support {
  max-width:320px;
  font-size:1rem;
  line-height:1.7;
  margin-top:26px
}

.night-support {
  position:absolute;
  max-width:320px;
  font-size:1rem;
  opacity:0;
  transition:opacity .3s ease
}

.hero-copy.is-night .hero-support {
  visibility:hidden
}

.hero-copy.is-night .night-support {
  opacity:1
}

.night-support {
  bottom:60px
}

.scroll-hint {
  display:inline-flex;
  gap:24px;
  align-items:center;
  font-size:.875rem;
  min-height:44px;
  margin-top:30px
}

.scroll-hint span {
  font-size:1.25rem
}

.static-story {
  margin-top:24px;
  font-family:Georgia,serif;
  font-size:1.5rem
}

.hero-art {
  margin:32px auto 0;
  max-width:500px;
  min-width:0;
  width:100%
}

.art-frame {
  position:relative;
  width:100%;
  aspect-ratio:var(--ratio,4 / 5);
  background:#14202b;
  isolation:isolate;
  box-shadow:0 20px 58px #00000024
}

.art-frame img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:none;
  transform:none
}

.pair-dark {
  position:absolute;
  inset:0;
  clip-path:inset(0 0 var(--dark-cut,100%) 0)
}

.hero-art figcaption,.gallery-item figcaption {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  font-size:.6875rem;
  letter-spacing:.07em
}

.hero-art figcaption>span:first-child {
  font-family:Georgia,serif;
  font-size:.8125rem;
  letter-spacing:0
}

.image-state,.product-state {
  font-size:.625rem;
  letter-spacing:.16em
}

.day-clock {
  display:none;
  align-items:center;
  gap:18px;
  font-size:.625rem;
  letter-spacing:.14em
}

.phase-track {
  height:1px;
  background:color-mix(in srgb,currentColor 22%,transparent);
  width:90px
}

.phase-track i {
  display:block;
  height:1px;
  width:calc(var(--progress,0) * 100%);
  background:currentColor
}

.phase-name {
  min-width:105px
}

.motion .static-story {
  display:none
}

/* Small screens have a short, vertically composed hero; the gallery stays in flow. */
@media (min-height:680px) {
  .motion:not(.hero-static) .hero-story {
    height:calc(172svh - 104px)
  }
  .motion:not(.hero-static) .hero-pin {
    height:100svh;
    position:sticky;
    top:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-block:22px 48px
  }
  .motion:not(.hero-static) .hero-copy .eyebrow {
    margin-bottom:14px
  }
  .motion:not(.hero-static) h1 {
    font-size:clamp(2.4rem,5.2vw,5.2rem)
  }
  .motion:not(.hero-static) .hero-support {
    margin-top:14px;
    max-width:400px
  }
  .motion:not(.hero-static) .hero-art {
    width:auto;
    max-width:100%;
    margin-top:22px
  }
  .motion:not(.hero-static) .hero-art .art-frame {
    height:calc(100svh - 390px);
    max-height:530px;
    width:auto
  }
  .motion:not(.hero-static) .scroll-hint {
    margin-top:8px
  }
  .motion:not(.hero-static) .day-clock {
    display:flex;
    position:absolute;
    bottom:12px;
    left:var(--gutter)
  }
  .motion:not(.hero-static) .night-support {
    bottom:48px
  }
}

.bridge {
  text-align:center;
  padding:clamp(110px,16vw,240px) var(--gutter);
  background:linear-gradient(180deg,#101e2900,#0d1924 60%)
}

.quiet-star {
  display:block;
  color:var(--mint);
  font-size:2rem;
  line-height:1;
  margin-bottom:45px;
  opacity:.8
}

.bridge .eyebrow {
  color:#b9c6cd;
  margin-bottom:28px
}

.bridge em {
  color:#cee4d9
}

.fine-rule {
  display:block;
  width:1px;
  height:70px;
  background:linear-gradient(#a7cdb84d,transparent);
  margin:48px auto 0
}

.section-heading {
  display:flex;
  flex-direction:column;
  gap:32px;
  padding-top:56px;
  padding-bottom:56px
}

.section-heading .eyebrow {
  margin-bottom:24px;
  color:#abc0c8
}

.collection {
  background:#0d1924;
  --section-ink:var(--cream);
  color:var(--section-ink);
  transition:background-color .4s,color .4s
}

.collection[data-lighting=day] {
  background:#eae6de;
  --section-ink:#233843
}

.collection[data-lighting=day] .eyebrow {
  color:#49616a
}

.collection-tools {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:16px
}

.light-switch {
  display:inline-flex;
  padding:4px;
  border:1px solid color-mix(in srgb,currentColor 22%,transparent);
  border-radius:50px;
  gap:4px
}

.light-switch button {
  min-height:44px;
  background:transparent;
  border:0;
  color:inherit;
  border-radius:40px;
  padding:10px 17px;
  font-size:.6875rem;
  letter-spacing:.07em;
  transition:background .25s,color .25s,box-shadow .25s
}

.light-switch button[aria-pressed=true] {
  background:#c5ead8;
  color:#142d2b;
  box-shadow:0 0 18px #b8fbd918
}

.collection[data-lighting=day] .light-switch button[aria-pressed=true] {
  background:#233843;
  color:var(--cream);
  box-shadow:none
}

.text-link {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:.75rem;
  opacity:.82
}

.gallery-item {
  padding-block:28px 72px;
  display:grid;
  gap:32px;
  max-width:800px;
  margin-inline:auto
}

.gallery-item figure {
  width:min(100%,420px);
  margin-inline:auto
}

.product-pair {
  --dark-cut:0%
}

.product-copy .eyebrow {
  margin-bottom:20px
}

.product-description {
  margin-top:22px;
  max-width:330px;
  line-height:1.8;
  font-size:1rem;
  opacity:.82
}

.etsy-button {
  display:inline-flex;
  gap:32px;
  align-items:center;
  min-height:48px;
  padding:12px 0;
  border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent);
  margin-top:26px;
  font-size:.75rem;
  letter-spacing:.12em;
  transition:color .2s
}

.etsy-button:hover {
  color:#b8fbd9
}

.collection[data-lighting=day] .etsy-button:hover {
  color:#185d4a
}

.gallery-progress {
  display:none
}

.section-space {
  padding-block:100px
}

.center-heading {
  text-align:center
}

.center-heading .eyebrow {
  color:#abc0c8;
  margin-bottom:24px
}

.center-heading>p:last-child:not(.eyebrow) {
  margin-top:26px;
  color:#b4c1c8;
  line-height:1.8
}

.how {
  background:#0c1722
}

.steps {
  list-style:none;
  padding:0;
  margin:60px 0 0;
  display:grid;
  gap:40px
}

.steps li {
  position:relative;
  text-align:center;
  padding:24px 12px
}

.step-icon {
  display:block;
  font-family:Georgia,serif;
  font-size:3.5rem;
  height:85px;
  line-height:1;
  color:#d9e4dc
}

.moon-icon {
  font-size:3.2rem
}

.glow-icon {
  color:var(--mint);
  text-shadow:0 0 22px #b8fbd935
}

.step-number {
  display:block;
  font-size:.6875rem;
  letter-spacing:.15em;
  color:#8eaaa9;
  margin-bottom:16px
}

.steps h3 {
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:.8125rem;
  letter-spacing:.18em
}

.steps p {
  font-size:.9375rem;
  color:#b4c1c8;
  margin-top:14px
}

.rooms {
  background:#0b1520
}

.room-story {
  max-width:1120px;
  padding-top:70px
}

.room-card {
  max-width:780px
}

.room-image {
  background:#152633;
  overflow:hidden
}

.room-image img {
  width:100%;
  height:auto;
  object-fit:contain
}

.room-card figcaption {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:22px
}

.room-card figcaption .eyebrow {
  color:#a8c4bf
}

.room-card figcaption p {
  font-family:Georgia,serif;
  font-size:1.2rem;
  color:#d4dedc
}

.room-after {
  margin-left:auto
}

.room-connection {
  display:block;
  width:180px;
  margin:45px auto;
  color:#91aaa9;
  font-family:Georgia,serif;
  font-style:italic;
  text-align:center;
  font-size:1rem
}

.room-connection span {
  display:block;
  font-style:normal;
  margin-top:12px
}

.brand-moment {
  background:#0a141e;
  text-align:center;
  padding:140px var(--gutter)
}

.brand-moment p {
  font-size:clamp(2.3rem,4.9vw,5rem);
  line-height:1.45;
  letter-spacing:-.035em
}

.brand-moment em {
  color:#b8d5c9
}

.finale {
  background:radial-gradient(ellipse at 50% 75%,#20372e50,transparent 60%),#09131d;
  text-align:center;
  padding:100px 0 72px
}

.finale .eyebrow {
  color:#abc9ba;
  margin-bottom:32px
}

.finale h2 {
  font-size:clamp(2.4rem,4.9vw,5rem);
  line-height:1.14
}

.finale h2+p {
  margin-top:28px;
  color:#b6c5c8
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  min-height:56px;
  padding:18px 24px;
  background:#c2ebd5;
  color:#16312c;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  margin-top:40px;
  border-radius:2px;
  transition:box-shadow .25s,background .25s
}

.button:hover {
  background:#d1f5e2;
  box-shadow:0 0 26px #b8fbd921
}

.closing-line {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1rem;
  margin-top:70px;
  color:#9eb7b1
}

.footer {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  background:#09131d;
  border-top:1px solid #bbc9c31a;
  padding-block:35px;
  font-size:.75rem;
  color:#9ab0b5
}

.footer .brand {
  color:var(--cream);
  font-size:1.6rem
}

.footer>a:last-child {
  min-height:44px;
  display:flex;
  align-items:center
}

.mobile-break {
  display:none
}

@media(min-width:700px) {
  .masthead {
    height:120px
  }
  .hero-pin {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:7vw;
    padding-block:50px 70px
  }
  .hero-art {
    margin:0;
    max-width:480px
  }
  .hero-copy {
    padding-bottom:30px
  }
  .motion:not(.hero-static) .hero-pin {
    display:grid;
    grid-template-columns:1fr 1fr;
    height:100svh;
    padding-top:40px;
    padding-bottom:66px;
    gap:6vw
  }
  .motion:not(.hero-static) .hero-story {
    height:calc(245svh - 120px)
  }
  .motion:not(.hero-static) .hero-art {
    width:100%;
    margin:0
  }
  .motion:not(.hero-static) .hero-art .art-frame {
    width:100%;
    height:auto;
    max-height:none
  }
  .motion:not(.hero-static) .hero-art {
    max-width:calc((100svh - 168px) * .666667)
  }
  .motion:not(.hero-static) .hero-support {
    margin-top:28px;
    max-width:320px
  }
  .motion:not(.hero-static) .scroll-hint {
    margin-top:36px
  }
  .motion:not(.hero-static) .night-support {
    bottom:96px
  }
  .hero-copy .eyebrow {
    margin-bottom:30px!important
  }
  .motion:not(.hero-static) .day-clock {
    bottom:30px
  }
  .section-space {
    padding-block:140px
  }
  .steps {
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:70px
  }
  .steps li+li:before {
    content:"";
    position:absolute;
    left:0;
    top:50px;
    height:120px;
    border-left:1px solid #c1d6ce26
  }
  .room-card figcaption {
    flex-direction:row;
    justify-content:space-between;
    align-items:center
  }
  .footer {
    flex-direction:row;
    justify-content:space-between
  }
  .gallery-item {
    grid-template-columns:1.2fr 1fr;
    align-items:center;
    max-width:none;
    gap:8vw;
    padding-block:60px 110px
  }
  .gallery-item figure {
    width:100%
  }
  .section-heading {
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px
  }
  .collection-tools {
    align-items:flex-end
  }
  .brand-moment {
    padding-block:200px
  }
  .room-connection {
    margin-block:70px
  }
}

@media(min-width:1000px) and (min-height:680px) {
  .motion:not(.gallery-static) .gallery-story {
    height:var(--gallery-height,420svh)
  }
  .motion:not(.gallery-static) .gallery-pin {
    height:100svh;
    position:sticky;
    top:0;
    padding-block:36px 76px
  }
  .motion:not(.gallery-static) .gallery-items {
    position:relative;
    height:100%;
    max-width:1120px;
    margin:auto
  }
  .motion:not(.gallery-static) .gallery-item {
    position:absolute;
    inset:0;
    grid-template-columns:1fr 1fr;
    height:100%;
    padding:0;
    gap:10vw;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(12px)
  }
  .motion:not(.gallery-static) .gallery-item.is-active {
    visibility:visible;
    pointer-events:auto
  }
  .motion:not(.gallery-static) .gallery-item figure {
    width:auto;
    max-width:100%;
    justify-self:center
  }
  .motion:not(.gallery-static) .product-pair {
    height:calc(100svh - 172px);
    max-height:650px;
    width:auto
  }
  .motion:not(.gallery-static) .gallery-progress {
    position:absolute;
    bottom:30px;
    left:var(--gutter);
    right:var(--gutter);
    display:flex;
    align-items:center;
    gap:24px;
    font-size:.625rem;
    letter-spacing:.14em
  }
  .gallery-track {
    height:1px;
    background:#c0d3c62d;
    flex:1
  }
  .gallery-track i {
    display:block;
    height:1px;
    background:#9dbdae;
    width:calc(var(--gallery-progress,0) * 100%)
  }
  .collection[data-lighting=day] .gallery-track {
    background:#23384330
  }
  .collection[data-lighting=day] .gallery-track i {
    background:#496b67
  }
}

@media(max-width:699px) {
  .masthead {
    height:94px;
    gap:12px;
    align-items:center
  }
  .brand {
    font-size:1.45rem
  }
  .brand>span:first-child {
    font-size:1.4rem;
    padding-right:4px
  }
  .brand-note {
    font-size:.45rem;
    padding-left:27px;
    letter-spacing:.13em
  }
  .masthead nav {
    gap:0;
    align-items:flex-end;
    flex-direction:column
  }
  .shop-link {
    border:0;
    font-size:.6875rem;
    padding:8px 0;
    min-height:36px
  }
  .shop-link span {
    margin-left:6px
  }
  .motion-control {
    font-size:.6875rem;
    padding:4px 0;
    min-height:32px
  }
  .hero-copy .eyebrow {
    font-size:.625rem
  }
  .hero-support {
    font-size:.875rem!important;
    line-height:1.65
  }
  .scroll-hint {
    font-size:.8125rem
  }
  .hero-art figcaption {
    margin-top:12px
  }
  .hero-art figcaption>span:first-child {
    font-size:.6875rem
  }
  .day-clock {
    font-size:.5625rem;
    gap:12px
  }
  .phase-track {
    width:70px
  }
  .hero-pin {
    padding-top:18px
  }
  .hero-lines br {
    display:none
  }
  .hero-lines {
    max-width:360px;
    min-height:2.1em
  }
  .hero-lines>span {
    align-self:start
  }
  .hero-lines>span[data-line="0"] {
    max-width:270px
  }
  .hero-lines>span[data-line="1"] {
    max-width:340px
  }
  .hero-lines>span[data-line="2"] {
    max-width:330px
  }
  .motion:not(.hero-static) .hero-pin {
    padding-top:18px;
    padding-bottom:48px
  }
  .sky i:nth-child(n+5) {
    display:none
  }
  .section-heading h2 {
    font-size:2.45rem
  }
  .room-card figcaption p {
    font-size:1.0625rem
  }
  .mobile-break {
    display:inline
  }
  .finale h2 br {
    display:none
  }
  .finale .wrap {
    max-width:580px
  }
}

/* No pinning or hidden product copy when motion is off, at short heights,
   or when enlarged text cannot fit. Both hero source images remain readable. */
html:not(.motion) .hero-pair,.hero-static .hero-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  aspect-ratio:auto;
  background:transparent;
  box-shadow:none
}

html:not(.motion) .hero-pair img,.hero-static .hero-pair img {
  position:static;
  clip-path:none;
  width:100%;
  height:auto;
  aspect-ratio:var(--ratio);
  object-fit:contain;
  box-shadow:0 10px 30px #0002
}

html:not(.motion) .hero-art .image-state,.hero-static .hero-art .image-state {
  font-size:0
}

html:not(.motion) .hero-art .image-state:after,.hero-static .hero-art .image-state:after {
  content:"DAY / AFTER DARK";
  font-size:.625rem
}

html:not(.motion) .hero-support,.hero-static .hero-support {
  visibility:visible!important
}

.hero-static .static-story {
  display:block
}

.hero-static .night-support,html:not(.motion) .night-support {
  display:none
}

.hero-static .scroll-hint,html:not(.motion) .scroll-hint {
  display:none
}

.hero-static .hero-lines>span,html:not(.motion) .hero-lines>span {
  opacity:0
}

.hero-static .hero-lines>span:first-child,html:not(.motion) .hero-lines>span:first-child {
  opacity:1
}

html:not(.motion) .hero-story,.hero-static .hero-story {
  height:auto!important
}

html:not(.motion) .hero-pin,.hero-static .hero-pin {
  height:auto!important;
  position:relative!important
}

.motion [data-reveal] {
  opacity:0;
  transform:translateY(10px);
  transition:opacity .65s ease,transform .65s ease
}

.motion [data-reveal].is-revealed {
  opacity:1;
  transform:none
}

.nojs-gallery article {
  margin:50px auto 100px;
  max-width:600px
}

.nojs-gallery img {
  max-height:620px;
  width:auto;
  margin-bottom:30px
}

.nojs-gallery a {
  display:inline-block;
  padding:12px 0
}

@media(max-height:679px) {
  .hero-story {
    height:auto!important
  }
  .hero-pin {
    height:auto!important;
    position:relative!important
  }
  .hero-pair {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    aspect-ratio:auto;
    background:none;
    box-shadow:none
  }
  .hero-pair img {
    position:static;
    clip-path:none;
    height:auto;
    width:100%
  }
  .motion .static-story {
    display:block
  }
  .motion .scroll-hint {
    display:none
  }
  .hero-art .image-state {
    font-size:0
  }
  .hero-art .image-state:after {
    content:"DAY / AFTER DARK";
    font-size:.625rem
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
  .hero-story,.gallery-story {
    height:auto!important
  }
  .hero-pin,.gallery-pin {
    position:relative!important;
    height:auto!important
  }
  .gallery-item {
    position:relative!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important
  }
  .gallery-progress,.day-clock {
    display:none!important
  }
  [data-reveal] {
    opacity:1!important;
    transform:none!important
  }
}

.motion-control,.shop-link {
  min-height:44px;
  font-size:.75rem
}

.image-state,.product-state,.day-clock,.gallery-progress,.hero-art figcaption,.gallery-item figcaption {
  font-size:.75rem
}

.light-switch button {
  font-size:.75rem
}

.brand-moment:before,.finale:before,.collection:before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 10% 20%,#b8fbd966 0 1px,transparent 1.5px),radial-gradient(circle at 85% 65%,#b8fbd944 0 1px,transparent 1.5px),radial-gradient(circle at 75% 12%,#b8fbd94d 0 1px,transparent 1.5px);
  opacity:.65
}

.collection[data-lighting=day]:before {
  opacity:0
}

.brand-moment>*,.finale>* {
  position:relative
}

.motion-control:disabled {
  opacity:.7;
  cursor:default
}

@media(min-height:680px) and (max-width:699px) {
  .motion:not(.hero-static) .hero-art .art-frame {
    height:calc(100svh - 440px)
  }
  .hero-art figcaption {
    gap:12px
  }
  .hero-art figcaption>span:first-child {
    font-size:.75rem
  }
}

@media(min-width:700px) and (min-height:680px) {
  .motion:not(.hero-static) .hero-art {
    max-width:calc((100svh - 180px) * .666667)
  }
}

.hero-lines>span {
  transition:none
}

.motion .hero-lines>span.is-current {
  animation:headline-in .35s ease both
}

@keyframes headline-in {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}

.steps li:nth-child(2) {
  transition-delay:.12s
}

.steps li:nth-child(3) {
  transition-delay:.24s
}

html:not(.motion) {
  scroll-behavior:auto
}

html:not(.motion) *,html:not(.motion) *:before,html:not(.motion) *:after {
  animation:none!important;
  transition:none!important
}

html:not(.motion) .bridge,.hero-static .bridge {
  background:#101e29
}

html:not(.motion) .hero-lines>span:not(:first-child),.hero-static .hero-lines>span:not(:first-child) {
  display:none
}

@media(max-width:699px) {
  .hero-support {
    font-size:1rem!important
  }
  .motion:not(.hero-static) .hero-art .art-frame {
    height:calc(100svh - 460px)
  }
  html:not(.motion) .hero-pair,.hero-static .hero-pair {
    grid-template-columns:1fr;
    gap:20px
  }
  .hero-static .hero-pair:before,html:not(.motion) .hero-pair:before {
    content:"DAY";
    font-size:.75rem;
    letter-spacing:.15em;
    grid-row:1
  }
  .hero-static .hero-pair:after,html:not(.motion) .hero-pair:after {
    content:"AFTER DARK";
    font-size:.75rem;
    letter-spacing:.15em;
    grid-row:3
  }
  .hero-static .hero-pair .pair-light,html:not(.motion) .hero-pair .pair-light {
    grid-row:2
  }
  .hero-static .hero-pair .pair-dark,html:not(.motion) .hero-pair .pair-dark {
    grid-row:4
  }
}