/* Photography stays fixed. The catalog changes only at discrete material waypoints. */
html{scroll-behavior:auto}
.reading-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;overflow:hidden;pointer-events:none}
.reading-progress span{display:block;height:100%;background:var(--wood);transform:scaleX(0);transform-origin:left}
.hero-line{display:block;width:fit-content}
.hero-content,.scene-image,.interlude-content,.image-caption{transform:none;will-change:auto}
.scene-image{height:100%;top:0}
.hero-story,.interlude-story{height:auto}
.hero,.interlude{position:relative;top:0}

.material-stage{background:#ded7cb;min-height:680px}
.material-stage:after{display:none}
.catalog-topline{position:absolute;top:36px;left:9%;right:9%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;color:#766a5c;z-index:12}
.catalog-viewport{position:absolute;top:6%;left:0;right:0;height:59%;perspective:1200px;overflow:visible}
.swatch-deck{position:absolute;inset:0;transform-style:preserve-3d}
.swatch-card{--x:0px;--y:0px;--rot:0deg;--scale:1;--card-opacity:0;position:absolute;top:50%;left:50%;width:min(66%,360px);aspect-ratio:1;padding:0;border:1px solid rgba(255,255,255,.72);border-radius:4px;background:#bba78c;overflow:hidden;box-shadow:0 24px 55px rgba(61,46,29,.18);opacity:var(--card-opacity);transform:translate(-50%,-50%) translate3d(var(--x),var(--y),0) rotate(var(--rot)) scale(var(--scale));transform-origin:50% 80%;transition:transform .46s cubic-bezier(.22,.8,.24,1),opacity .34s ease,box-shadow .34s ease;cursor:pointer;will-change:transform,opacity}
.swatch-card:after{content:'';position:absolute;inset:48% 0 0;background:linear-gradient(0deg,rgba(30,24,18,.72),transparent);pointer-events:none}
.swatch-card img{width:100%;height:100%;object-fit:cover;object-position:center;transition:filter .35s ease}
.swatch-card:not(.is-current) img{filter:saturate(.78) brightness(.83)}
.swatch-card.is-current{box-shadow:0 30px 70px rgba(61,46,29,.28)}
.swatch-code{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;color:white;text-align:left;text-shadow:0 1px 12px rgba(0,0,0,.28)}
.swatch-code small{display:block;font-size:9px;letter-spacing:.18em;margin-bottom:2px}
.swatch-code strong{display:block;font-family:var(--sans);font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:.02em}
.swatch-deck.is-paused .swatch-card{transition:none}

.catalog-controls{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;z-index:3}
.catalog-status{font-size:10px;letter-spacing:.02em;color:#6e6356}
.catalog-pause{display:flex;align-items:center;gap:8px;border:1px solid #a79c8b;border-radius:30px;background:transparent;color:#514739;font-size:11px;line-height:1.2;padding:10px 13px;cursor:pointer;white-space:nowrap}
.catalog-pause[hidden]{display:none}
.catalog-pause:hover{background:rgba(255,255,255,.4)}
.material-stage .image-caption{left:9%;right:9%;bottom:30px;color:var(--ink)}
.material-stage .image-caption>span{font-size:10px;letter-spacing:.14em;color:#766a5c}
.material-stage .image-caption p{font-size:clamp(30px,3.2vw,46px);line-height:1.08;margin-top:10px}
.material-stage .image-caption em{color:#8b6743}
.material-current{margin-top:16px;padding-top:12px;border-top:1px solid #bfb4a3;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:13px}
.current-number{font-size:11px;color:#82603f;letter-spacing:.1em}
.current-name{font-weight:600;letter-spacing:.04em}
.material-meter{position:absolute;top:15%;bottom:15%;left:22px;width:1px;background:#c1b5a3;z-index:12}
.material-meter span{display:block;width:100%;height:100%;background:#94704c;transform:scaleY(.1667);transform-origin:top;transition:transform .4s cubic-bezier(.22,.8,.24,1)}

.product{position:relative;width:100%;border:0;border-top:1px solid #ccc7bc;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:background .25s,color .25s}
.product-copy{display:block}
.product-title{display:block;font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.4}
.product-description{display:block;font-size:14px;color:var(--muted);line-height:1.7;margin-top:7px}
.product:before{content:'';position:absolute;left:-12px;top:24px;bottom:24px;width:2px;background:var(--wood);opacity:0;transition:opacity .25s}
.product.is-current{background:rgba(255,255,255,.38)}
.product.is-current:before{opacity:1}
.product.is-current .product-title{color:#795732}
.product.is-current .product-arrow{transform:translateX(4px)}
.catalog-link{margin-top:30px}

.motion-on .reveal{transform:none;opacity:0;transition:opacity .5s ease;transition-delay:var(--reveal-delay,0ms)}
.motion-on .reveal.visible{transform:none;opacity:1}
@media(min-width:801px){.material-content{padding-bottom:25svh}}
@media(max-width:1100px){
  .catalog-controls{gap:8px;flex-wrap:wrap}
  .catalog-topline{top:28px}
  .swatch-card{width:min(64%,310px)}
}
@media(max-width:800px){
  .material-stage{height:690px;min-height:690px;max-height:none}
  .catalog-viewport{top:7%;height:56%}
  .catalog-topline{left:7%;right:7%}
  .swatch-card{width:min(68vw,310px)}
  .swatch-card:not(.is-current){pointer-events:none}
  .material-stage .image-caption{left:7%;right:7%;bottom:28px}
  .material-stage .image-caption p{font-size:38px}
  .material-meter{left:13px}
  .product-title{font-size:25px}
}
@media(max-width:480px){
  .material-stage{height:620px;min-height:620px}
  .catalog-topline{font-size:9px}
  .catalog-viewport{height:53%;top:8%}
  .swatch-card{width:min(66vw,270px)}
  .swatch-code{left:16px;bottom:14px}
  .material-stage .image-caption p{font-size:32px}
  .catalog-controls{margin-bottom:12px}
}
@media(max-height:700px) and (min-width:801px){
  .hero-content{top:8%}
  .hero h1{font-size:clamp(44px,6vw,64px)}
  .hero-content .eyebrow{margin-bottom:16px}
  .hero-description{margin-top:15px}
  .hero .button{margin-top:20px;padding:12px 20px}
  .hero-bottom{bottom:18px}
}
@media(max-height:780px) and (min-width:801px){.material-stage{position:relative;top:0}}
@media(prefers-reduced-motion:reduce){
  .motion-on .reveal{opacity:1;transform:none}
  .swatch-card,.material-meter span{transition:none}
}