:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #302f2d;
  background: #f3f2ee;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --muted: #777571;
  --line: #deddd7;
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; color: inherit; }
button:disabled { opacity: .42; cursor: default; }
button:focus-visible, canvas:focus-visible { outline: 2px solid #777571; outline-offset: 5px; }
[hidden] { display: none !important; }
p { margin: 0; }
.experience {
  height: 100vh;
  height: 100svh;
  min-height: 440px;
  display: grid;
  grid-template-rows: 86px minmax(0, 1fr) 196px;
  padding: env(safe-area-inset-top) max(40px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(40px, env(safe-area-inset-left));
}
.masthead { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .15em; }
.divider { color: #aaa8a1; padding: 0 13px; }
.masthead-right { color: var(--muted); display: flex; align-items: center; gap: 12px; font-size: 9px; }
.small-dot { width: 3px; height: 3px; background: #aaa8a1; border-radius: 50%; }
.viewer { position: relative; min-height: 0; }
.caption { position: absolute; top: 28px; left: 0; pointer-events: none; z-index: 1; }
.caption h1 { margin: 0 0 10px; font: normal 25px/1.2 Georgia, 'Times New Roman', serif; letter-spacing: -.035em; }
.caption p { font-size: 11px; color: var(--muted); }
#ring-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; opacity: 0; transition: opacity .6s ease; }
#ring-canvas:active { cursor: grabbing; }
.viewer[data-state="ready"] #ring-canvas { opacity: 1; }
.view-marker { position: absolute; right: 0; bottom: 30px; font-size: 10px; color: #8e8b85; letter-spacing: .08em; pointer-events: none; }
.loading, .load-error { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: min(290px, 90%); }
.loading-title { display: block; font: normal 19px/1.5 Georgia, serif; }
.progress-track { height: 1px; background: #d8d6ce; width: 180px; margin: 23px auto 16px; }
.progress-fill { height: 100%; width: 0; background: #77746d; transition: width .2s linear; }
.loading-detail { font-size: 10px; color: var(--muted); }
.load-error p:first-child { font: normal 19px/1.5 Georgia, serif; }
.load-error p:nth-child(2) { margin: 13px 0 20px; font-size: 12px; color: var(--muted); line-height: 1.65; }
.text-button { border: 0; background: none; padding: 8px 0; border-bottom: 1px solid #a7a49b; font-size: 12px; }
.text-button span { margin-left: 12px; }
.controls-area { border-top: 1px solid var(--line); padding-top: 25px; }
.toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.toolbar-label { font-size: 9px; color: var(--muted); letter-spacing: .13em; }
.material-switch { display: flex; gap: 3px; padding: 4px; border: 1px solid #d7d5ce; border-radius: 40px; }
.material-switch button { border: 0; border-radius: 30px; background: none; padding: 13px 21px; min-height: 44px; font-size: 9px; letter-spacing: .07em; transition: background .18s, color .18s; white-space: nowrap; }
.material-switch button[aria-pressed="true"] { background: #343330; color: #f4f3ef; }
.material-switch button:not([aria-pressed="true"]):not(:disabled):hover { background: #e5e3dd; }
.reset-button { justify-self: end; display: inline-flex; align-items: center; gap: 9px; border: 0; padding: 10px 0 10px 12px; min-height: 44px; background: none; font-size: 11px; }
.reset-button:hover:not(:disabled) { color: #7a766d; }
.footer-details { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; margin-top: 24px; font-size: 10px; color: #8a877f; line-height: 1.5; }
.hint-divider { color: #b6b2a8; padding: 0 12px; }
.geometry-note { text-align: right; }
.mobile-hint { display: none; }
@media (max-width: 700px) {
  .experience { padding-right: max(22px, env(safe-area-inset-right)); padding-left: max(22px, env(safe-area-inset-left)); grid-template-rows: 64px minmax(0,1fr) 206px; }
  .masthead { font-size: 8px; letter-spacing: .1em; }
  .masthead-right { font-size: 8px; gap: 8px; }
  .masthead-right .small-dot { display: none; }
  .divider { padding: 0 8px; }
  .caption { top: 20px; }
  .caption h1 { font-size: 23px; margin-bottom: 7px; }
  .caption p { font-size: 10px; }
  .controls-area { padding-top: 20px; }
  .toolbar { grid-template-columns: 1fr auto; gap: 12px; }
  .toolbar-label { display: none; }
  .material-switch { justify-self: start; }
  .material-switch button { padding: 12px 14px; font-size: 8px; letter-spacing: .035em; }
  .reset-button { font-size: 10px; gap: 5px; padding-left: 0; }
  .reset-button svg { width: 15px; }
  .footer-details { grid-template-columns: 1fr; gap: 9px; margin-top: 18px; font-size: 9px; }
  #material-note { grid-row: 2; text-align: center; }
  #interaction-hint { text-align: center; }
  .geometry-note { display: none; }
  .desktop-hint { display: none; }
  .mobile-hint { display: inline; }
  .view-marker { bottom: 20px; font-size: 9px; }
}
@media (max-width: 360px) {
  .experience { padding-left: 16px; padding-right: 16px; }
  .material-switch button { padding: 12px 10px; }
  .masthead-right { display: none; }
}
@media (max-height: 550px) and (min-width: 701px) {
  .experience { min-height: 320px; grid-template-rows: 50px minmax(0,1fr) 160px; }
  .caption { top: 10px; }
  .caption h1 { font-size: 21px; }
  .controls-area { padding-top: 14px; }
  .footer-details { margin-top: 16px; }
}
@media (max-height: 500px) and (max-width: 700px) and (orientation: landscape) {
  .experience { min-height: 280px; grid-template-rows: 42px minmax(0,1fr) 152px; }
  .caption { top: 4px; }
  .caption h1 { font-size: 19px; }
  .caption p { display: none; }
  .controls-area { padding-top: 10px; }
  .footer-details { display: block; margin-top: 9px; }
  #material-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #ring-canvas, .progress-fill, .material-switch button { transition: none; }
}

.collection-nav { display:flex; justify-content:center; gap:28px; margin:-12px 0 16px; }
.collection-nav button { border:0; border-bottom:1px solid transparent; background:none; min-height:44px; padding:8px 0; font-size:9px; letter-spacing:.1em; color:var(--muted); }
.collection-nav button span { margin-left:8px; }
.collection-nav button[aria-pressed="true"] { color:#302f2d; border-bottom-color:#302f2d; }
#ring-canvas { transition:opacity .3s ease, filter .3s ease; }
.viewer.is-switching #ring-canvas { opacity:0; filter:blur(4px); }
@media (max-width:700px) { .caption { top:0; } .caption h1 {font-size:21px;} .collection-nav {gap:26px;} }
@media (prefers-reduced-motion:reduce) { #ring-canvas {transition:none;} .viewer.is-switching #ring-canvas {filter:none;} }

.brand-intro { position:fixed; inset:0; z-index:10; background:#171819; }
#skip-intro { position:absolute; z-index:30; right:max(40px,env(safe-area-inset-right)); bottom:max(32px,env(safe-area-inset-bottom)); border:0; background:none; color:#babbbd; padding:14px 0 14px 14px; min-height:44px; font-size:9px; letter-spacing:.14em; }
#skip-intro span { margin-left:14px; }
#skip-intro:focus-visible { outline-color:#babbbd; }
body.brand-intro-active #ring-canvas { position:fixed; inset:0; width:100vw; height:100svh; z-index:20; opacity:1; filter:none; cursor:default; transition:none; pointer-events:none; }
body.brand-intro-active .brand-intro { z-index:21; background:#171819; pointer-events:none; }
body.brand-intro-active #skip-intro { pointer-events:auto; }
@media (max-width:700px) { #skip-intro {right:22px;bottom:20px;} }
@media (prefers-reduced-motion:reduce) { .brand-intro { display:none; } }

body.brand-intro-rendering .brand-intro {background:transparent;}

.intro-placeholder { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(48vw,400px); height:auto; opacity:.72; }
.brand-intro {transition:opacity .45s ease;}
body.brand-intro-rendering .intro-placeholder {opacity:0; transition:opacity .25s ease;}
body.brand-intro-leaving .brand-intro {opacity:0;}
body.brand-intro-leaving #ring-canvas {opacity:0; transition:opacity .45s ease;}
@media(max-width:700px) {.intro-placeholder {width:58vw;}}

#skip-intro { left:50%; right:auto; bottom:auto; top:calc(50% + min(23vw, 23svh) + 28px); transform:translateX(-50%); padding:14px 12px; white-space:nowrap; }

.intro-brand {position:absolute;top:max(42px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);color:#e9e8e4;font:normal 40px/1 Georgia,'Times New Roman',serif;letter-spacing:.065em;padding-left:.065em;}
@media(max-width:700px){.intro-brand{top:max(32px,env(safe-area-inset-top));font-size:32px;}}

img.intro-brand {width:100px;height:auto;padding:0;mix-blend-mode:screen;}
@media(max-width:700px){img.intro-brand{width:80px;}}

.intro-photograph {display:none;position:fixed;inset:0;z-index:10;background:#171b16 url('./assets/rove-heritage.png') center center / cover no-repeat;transition:opacity .45s ease;}
body.brand-intro-active .intro-photograph {display:block;}
body.brand-intro-active .brand-intro, body.brand-intro-rendering .brand-intro {background:transparent;}
body.brand-intro-leaving .intro-photograph {opacity:0;}
.intro-placeholder {top:37%;width:min(39vw,330px);}
#skip-intro {top:calc(37% + min(20vw,20svh) + 24px);color:#f2f0e9;text-shadow:0 1px 4px #171819;}
@media(max-width:700px) {
 .intro-photograph {background-size:100% auto;background-position:center 70%;}
 .intro-placeholder {width:48vw;}
}

.intro-photograph {background-size:cover;background-position:center center;}
@media(max-width:700px) { .intro-photograph {background-image:url('./assets/rove-heritage-mobile.png');background-size:cover;background-position:center center;} }

/* Showroom background only: transparent canvas keeps grain below the jewelry. */
:root {background:#EEECE5;}
.experience {position:relative;isolation:isolate;background:#EEECE5;background-image:radial-gradient(ellipse at 40% 26%,rgba(255,255,255,.21),transparent 72%),radial-gradient(ellipse at 90% 100%,rgba(53,64,48,.025),transparent 75%);}
.experience::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23g)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");}
.showroom-wordmark {width:94px;height:auto;filter:invert(1);mix-blend-mode:multiply;}
.collection-nav button[aria-pressed="true"] {color:#314638;border-bottom-color:#314638;}
.collection-nav button:hover:not(:disabled) {color:#314638;}
#interaction-hint {grid-column:2;}
@media(max-width:700px) {.showroom-wordmark{width:78px;} #interaction-hint{grid-column:1;} }
@media(max-width:360px) {.masthead-right{display:block;font-size:7px;}}

/* Keep the intro canvas above its photograph; isolate grain only in the showroom. */
body.brand-intro-active .experience {isolation:auto;background:transparent;}
body.brand-intro-active .experience::before {display:none;}

/* Match the initial frontal projection before the chrome gently takes over. */
.intro-placeholder {width:calc(min(100vw,100svh) * .48);transition:none!important;}

/* Editorial details are overlays; keep viewer dimensions and camera framing intact. */
.showroom-wordmark {width:154px;height:auto;filter:none;mix-blend-mode:normal;}
.caption {max-width:300px;}
.piece-index {display:block;margin-bottom:10px;font-size:8px;line-height:1.4;letter-spacing:.16em;color:#77766e;}
.caption h1 {font-size:34px;line-height:1.08;letter-spacing:-.035em;margin-bottom:10px;}
.caption .product-description {font-size:10px;line-height:1.6;letter-spacing:.015em;}
.controls-area {position:relative;}
.brand-signature {position:absolute;left:0;top:70px;font:italic 14px/1.4 Georgia,'Times New Roman',serif;color:#77766e;}
.collection-nav {gap:38px;}
.collection-nav button {font-size:9px;letter-spacing:.12em;padding-bottom:9px;}
.collection-nav button[aria-pressed="true"] {border-bottom-color:#314638;}
.reset-button {font-size:10px;letter-spacing:.025em;}
@media(max-width:700px){
 .showroom-wordmark {width:116px;}
 .caption {max-width:245px;}
 .piece-index {font-size:7px;margin-bottom:8px;}
 .caption h1 {font-size:27px;margin-bottom:8px;}
 .caption .product-description {font-size:9px;}
 .brand-signature {font-size:12px;top:68px;}
 .collection-nav {gap:28px;}
}
@media(max-width:360px){.showroom-wordmark{width:104px;}.masthead-right{font-size:7px;letter-spacing:.04em;}.caption h1{font-size:25px;}}
@media(max-height:500px) and (orientation:landscape){.piece-index{margin-bottom:4px;}.caption h1{font-size:23px;}.brand-signature{top:58px;}}

/* Showroom-only graphic overlays: no changes to the viewer's layout. */
.showroom-ornament {position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;}
.showroom-ornament img {position:absolute;width:clamp(280px,38vw,590px);height:auto;right:-6%;top:-17%;opacity:.24;}
.piece-arrow {position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:6px;border:0;background:transparent;color:#314638;opacity:.75;}
.piece-arrow:hover {opacity:1;}
.piece-arrow-prev {left:16%;}
.piece-arrow-next {right:16%;}
body.brand-intro-active .showroom-ornament,body.brand-intro-active .piece-arrow {visibility:hidden;}
@media(max-width:700px){
 .showroom-ornament img {width:250px;right:-90px;top:-58px;opacity:.13;}
 .caption .product-description {max-width:210px;}
 .piece-arrow-prev {left:0;}
 .piece-arrow-next {right:0;}
 .piece-arrow svg {width:24px;}
}