/* Movement follows the collection: a quiet surface, a more expressive entrance. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --focus-olive: #73745c;
  --focus-halo: rgba(115, 116, 92, .17);
}

/* A connected focus treatment, instead of a detached box around each field. */
:where(input:not([type="radio"]):not([type="checkbox"]), select, textarea):focus {
  outline: none;
  outline-offset: 0;
  border-color: var(--focus-olive);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
select, select option, select optgroup {
  color: var(--ink);
  background-color: var(--paper);
  color-scheme: light;
}
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-olive);
  outline-offset: 2px;
}
.hero :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible {
  outline-color: #e0e5c8;
}
.quantity-control:focus-within,
.search-form:focus-within {
  border-color: var(--focus-olive);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
.quantity-control input:focus,
.search-form input:focus {
  outline: none;
  border: 0;
  box-shadow: none;
}
.quantity-control button:focus-visible {
  outline-offset: -4px;
}
.search-form button:focus-visible {
  outline-offset: -3px;
}
.size-option > input.size-choice:focus-visible {
  outline: none;
  box-shadow: none;
}
.size-option > input.size-choice:focus-visible + .size-label {
  border-color: var(--focus-olive);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-halo);
}

.scroll-progress {
  position: fixed;
  z-index: 90;
  inset: 0 0 auto;
  height: 3px;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.site-header.is-scrolled::after { opacity: 1; }

/* Content is visible unless the observer has been successfully installed. */
.motion-enabled .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity .85s var(--motion-ease), transform 1.05s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-enabled .motion-reveal.motion-card {
  transform: translate3d(0, 64px, 0);
}
.motion-enabled .motion-reveal.is-visible,
.motion-enabled .motion-reveal:focus-within {
  opacity: 1;
  transform: none;
}
.motion-enabled .motion-reveal:focus-within {
  transition: none;
}
.motion-line {
  display: block;
  overflow: hidden;
  padding: .1em 0 .14em;
  margin: -.1em 0 -.14em;
}
.motion-line-inner { display: block; }
.motion-enabled .motion-hero .motion-line-inner {
  animation: line-arrive 1.25s var(--motion-ease) both;
  animation-delay: var(--hero-delay, 180ms);
}
.motion-enabled .motion-hero .motion-hero-item {
  animation: hero-arrive 1.15s var(--motion-ease) both;
  animation-delay: var(--hero-delay, 0ms);
}
.motion-enabled .motion-hero .motion-hero-item:focus-within {
  animation: none;
}
.motion-hero-media {
  position: absolute;
  z-index: -3;
  inset: -5%;
  pointer-events: none;
}
.motion-hero-media .hero-image { z-index: auto; }
.motion-enabled .motion-hero-media {
  transform: translate3d(0, var(--hero-pan, 0px), 0);
}
.motion-enabled .motion-hero-media .hero-image {
  animation: hero-settle 7s cubic-bezier(.16, .55, .35, 1) both;
}
.motion-enabled .hero-motion-complete .motion-line-inner,
.motion-enabled .hero-motion-complete .motion-hero-item,
.motion-enabled .hero-motion-complete .hero-image {
  animation: none;
}
.motion-enabled .hero-motion-complete .hero-image { transform: scale(1.025); }
.motion-enabled .material-story-image img {
  transform: translate3d(0, var(--material-pan, 0px), 0) scale(1.13);
}
.hero-bottom a span { display: inline-block; }
.motion-enabled .hero-bottom a span {
  animation: discover-cue 2.2s ease-in-out 1.8s 3;
}

/* The material ribbon travels with the page, without an autoplay marquee. */
.principles-strip.is-motion-strip { overflow: hidden; }
.motion-strip-track, .motion-strip-group {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.motion-strip-group[aria-hidden="true"] { display: none; }
.motion-enabled .principles-strip.is-motion-strip {
  display: block;
  padding: 0;
}
.motion-enabled .motion-strip-track {
  width: max-content;
  justify-content: flex-start;
  transform: translate3d(var(--strip-pan, 0px), 0, 0);
}
.motion-enabled .motion-strip-group {
  flex: none;
  min-width: 100vw;
  width: auto;
  justify-content: space-evenly;
}
.motion-enabled .motion-strip-group[aria-hidden="true"] { display: flex; }
.motion-enabled .motion-strip-group span {
  max-width: none;
  padding: 0 clamp(35px, 5vw, 84px);
  flex: none;
  white-space: nowrap;
}
.motion-enabled .motion-strip-group span:last-child {
  border-right: 1px solid var(--line);
}

.button > span[aria-hidden],
.text-link > span[aria-hidden],
.finish-tile > div > span,
.product-quick-link > span {
  display: inline-block;
  transition: transform .45s var(--motion-ease);
}
.button:active:not(:disabled) { transform: translateY(1px); }
.button:hover > span[aria-hidden],
.button:focus-visible > span[aria-hidden],
.text-link:hover > span[aria-hidden],
.text-link:focus-visible > span[aria-hidden],
.finish-tile:hover > div > span,
.finish-tile:focus-visible > div > span,
.product-photo:hover .product-quick-link > span {
  transform: translate3d(3px, -3px, 0);
}
.product-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(85, 88, 66, .13), inset 0 -35px 70px rgba(76, 71, 52, .08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .65s var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .product-photo img, .finish-tile img {
    transition: transform 1.1s var(--motion-ease);
  }
  .product-photo:hover img, .product-photo:focus-visible img {
    transform: scale(1.085) rotate(-1.2deg);
  }
  .finish-tile:hover img, .finish-tile:focus-visible img {
    transform: scale(1.09) rotate(-1deg);
  }
  .product-photo:hover::after, .product-photo:focus-visible::after { opacity: 1; }
}

@keyframes hero-arrive {
  from { opacity: 0; transform: translate3d(0, 35px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes line-arrive {
  from { opacity: 0; transform: translate3d(0, 115%, 0) rotate(2deg); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-settle {
  from { transform: scale(1.14); }
  to { transform: scale(1.025); }
}
@keyframes discover-cue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (max-width: 760px) {
  .motion-enabled .motion-reveal { transform: translate3d(0, 34px, 0); }
  .motion-enabled .motion-reveal.motion-card { transform: translate3d(0, 44px, 0); }
  .motion-enabled .motion-reveal.is-visible,
  .motion-enabled .motion-reveal:focus-within { transform: none; }
  .motion-enabled .motion-strip-group span { padding: 0 30px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
  .motion-reveal, .motion-line-inner, .motion-hero-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .motion-hero-media, .motion-hero-media .hero-image, .motion-strip-track {
    transform: none !important;
    animation: none !important;
  }
  .material-story-image img { transform: scale(1.08) !important; }
  .product-photo:hover img, .product-photo:focus-visible img,
  .finish-tile:hover img, .finish-tile:focus-visible img { transform: none; }
  .button:active:not(:disabled),
  .button > span[aria-hidden], .text-link > span[aria-hidden],
  .finish-tile > div > span, .product-quick-link > span { transform: none !important; }
}
@media (forced-colors: active) {
  :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea):focus,
  .quantity-control:focus-within,
  .search-form:focus-within,
  .size-option > input.size-choice:focus-visible + .size-label {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }
  .quantity-control input:focus, .search-form input:focus { outline: none; }
}