/* All Stiles: Discover + Tile Finder "stage" (Oct 2026, owner: keep the ideas, add drama, not a beige canvas).
   Loaded after as-discover.css on those two pages only; remove this file to go back to the light version.
   Deep brand teal with light and texture (never a flat black): Discover shows the active look's room photo, blurred, behind
   the fan with its name in huge outlined letters; Tile Finder stands the sizes on a glossy floor under a spotlight and
   tints the stage with the colour you pick. Photos shown whole stay whole; only swatches and the blurred backdrop fill. */
.dc-page,.tf-page{
	--st-cream:#f5f2ec;--st-soft:rgba(245,242,236,.72);--st-faint:rgba(245,242,236,.16);--st-blue:#8fc9db;
	position:relative;isolation:isolate;overflow:hidden;color:var(--st-cream);
	background:
		radial-gradient(900px 520px at 78% 8%,rgba(101,175,199,.20),transparent 62%),
		radial-gradient(700px 480px at 8% 92%,rgba(196,164,112,.10),transparent 60%),
		linear-gradient(160deg,#21485a 0%,#163240 42%,#0f222b 100%)}
/* Tile Finder: a softer grey-teal, like the Discover page's photo-tinted stage (owner, Oct 22) */
.tf-page{background:
	radial-gradient(1000px 560px at 70% 6%,rgba(143,201,219,.13),transparent 64%),
	radial-gradient(800px 520px at 10% 95%,rgba(205,190,165,.07),transparent 62%),
	linear-gradient(165deg,#3b4f57 0%,#2d3e45 40%,#22313a 72%,#1b272d 100%)}
/* Fine grain so the dark reads as a material, not a flat fill */
.dc-page::after,.tf-page::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dc-page .crumbs,.tf-page .crumbs{color:rgba(245,242,236,.55)}
.dc-page .crumbs a:hover,.tf-page .crumbs a:hover{color:var(--st-cream)}
.dc-page h1,.tf-page h1{color:var(--st-cream);text-shadow:0 2px 30px rgba(0,0,0,.35)}
.dc-eyebrow{color:var(--st-blue)}

/* ---------- Discover ---------- */
.dc-book{position:relative}
/* The active look's room photo, blurred and dimmed, fills the stage; two layers cross-fade */
.dc-stage-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.dc-stage-bg i{position:absolute;inset:-60px;background:center/cover no-repeat;filter:blur(26px) brightness(.68) saturate(1.3);transform:scale(1.12);opacity:0;transition:opacity 1.1s ease,transform 6s ease}
.dc-stage-bg i.is-on{opacity:1;transform:scale(1.04)}
.dc-stage-bg::after{content:'';position:absolute;inset:0;background:
	radial-gradient(ellipse 60% 70% at 30% 70%,rgba(255,240,214,.10),transparent 70%),
	linear-gradient(180deg,rgba(15,34,43,.62) 0%,rgba(15,34,43,.18) 38%,rgba(15,34,43,.30) 70%,rgba(12,23,28,.78) 100%)}
/* The look's name in huge outlined letters behind the fan */
.dc-word{position:absolute;left:clamp(8px,2vw,40px);bottom:clamp(24px,5vh,64px);z-index:-1;pointer-events:none;white-space:nowrap;
	font:400 clamp(90px,min(19vw,calc(54vw / (var(--len,6) * .74))),330px)/.8 Italiana,serif;letter-spacing:.02em;text-transform:uppercase;color:transparent;
	-webkit-text-stroke:1px rgba(245,242,236,.22);animation:dcWord 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes dcWord{from{opacity:0;transform:translateY(30px);letter-spacing:.12em}to{opacity:1;transform:none;letter-spacing:.02em}}
/* A warm spotlight under the fan */
.dc-fan::before{content:'';position:absolute;left:50%;bottom:4%;width:120%;height:70%;transform:translateX(-50%);z-index:-1;pointer-events:none;
	background:radial-gradient(closest-side,rgba(255,236,204,.20),rgba(143,201,219,.08) 55%,transparent)}
.dc-chip{background:#f7f3ec;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 18px 34px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35)}
.dc-chip-label{color:#1d3d4c;background:#f7f3ec}
.dc-chip.is-active{box-shadow:0 0 0 2px var(--st-cream),0 34px 60px rgba(0,0,0,.6),0 0 70px rgba(143,201,219,.45)}
.dc-chip:not(.is-active) .dc-chip-tex{filter:brightness(.82) saturate(.9);transition:filter .4s}
.dc-chip:hover .dc-chip-tex{filter:none}
.dc-detail h2{color:var(--st-cream);font-size:clamp(34px,3.4vw,54px)}
.dc-detail p{color:var(--st-soft);opacity:1}
.dc-detail-ph{position:relative;display:inline-block}
.dc-detail-ph img{box-shadow:0 26px 60px rgba(0,0,0,.55)}
.dc-detail-ph::after{content:'';position:absolute;inset:0;transform:translate(16px,16px);border:1px solid rgba(143,201,219,.75);z-index:-1;pointer-events:none}
.dc-detail-go{background:var(--st-cream);color:#1d3d4c;box-shadow:0 10px 26px rgba(0,0,0,.35);transition:background .25s,color .25s,transform .25s}
.dc-detail-go:hover{background:var(--st-blue);color:#0f222b;transform:translateY(-2px)}
/* Auto-play progress: a hairline that fills while a look is shown */
.dc-progress{display:block;width:120px;height:1px;margin-top:22px;background:var(--st-faint);overflow:hidden}
.dc-progress i{display:block;height:100%;width:100%;background:var(--st-blue);transform-origin:left;transform:scaleX(0)}
.dc-progress.is-run i{animation:dcProg 3.5s linear forwards}
@keyframes dcProg{to{transform:scaleX(1)}}

/* ---------- Tile Finder ---------- */
/* The stage takes on the chosen colour: its tile photo, blurred, glows behind everything */
.tf-ambient{position:absolute;inset:-80px;z-index:-2;pointer-events:none;background:center/cover no-repeat;filter:blur(60px) saturate(1.3) brightness(.55);opacity:0;transition:opacity .9s ease}
.tf-ambient.is-on{opacity:.95}
.tf-page .tf-band-head h2{color:var(--st-cream);font-size:clamp(32px,2.9vw,44px)}
.tf-go-link{background:var(--st-cream);color:#1d3d4c;box-shadow:0 10px 26px rgba(0,0,0,.35);transition:background .25s,transform .25s}
.tf-go-link:hover{background:var(--st-blue);color:#0f222b;transform:translateY(-2px)}
/* Band 1: sizes stand on a glossy floor under a spotlight, each with a soft reflection */
.tf-group{position:relative}
.tf-group::before{content:'';position:absolute;left:50%;top:-10%;width:min(1100px,90%);height:120%;transform:translateX(-50%);z-index:-1;pointer-events:none;
	background:radial-gradient(closest-side,rgba(255,240,214,.13),transparent)}
.tf-shelf{background:linear-gradient(90deg,transparent,rgba(245,242,236,.35) 15%,rgba(245,242,236,.35) 85%,transparent) no-repeat left 0 bottom 52px/100% 1px}
.tf-tile{color:var(--st-cream)}
.tf-tile-shape{margin-bottom:40px;background-color:#e9e3d9;border:1px solid rgba(245,242,236,.55);box-shadow:0 12px 24px rgba(0,0,0,.4);
	-webkit-box-reflect:below 1px linear-gradient(to bottom,transparent calc(100% - 34px),rgba(255,255,255,.28))}
.tf-shelf.has-face .tf-tile-shape{border-color:rgba(245,242,236,.3)}
.tf-tile:hover .tf-tile-shape{border-color:var(--st-cream);box-shadow:0 18px 30px rgba(0,0,0,.5)}
.tf-tile.is-on .tf-tile-shape{border:2px solid var(--st-cream);box-shadow:0 22px 36px rgba(0,0,0,.55),0 0 40px rgba(143,201,219,.55)}
.tf-tile-name{color:var(--st-soft)}
.tf-tile.is-on .tf-tile-name{color:var(--st-cream)}
.tf-tile.is-none,.tf-strip.is-none{opacity:.22}
/* Band 2: colours as lit, glossy pebbles */
.tf-dot{box-shadow:inset 0 10px 16px rgba(255,255,255,.28),inset 0 -12px 20px rgba(0,0,0,.35),0 14px 26px rgba(0,0,0,.45)}
.tf-dot{position:relative}
.tf-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.45),transparent 38%);pointer-events:none}
.tf-strip:hover .tf-dot{box-shadow:inset 0 10px 16px rgba(255,255,255,.3),inset 0 -12px 20px rgba(0,0,0,.3),0 20px 32px rgba(0,0,0,.5)}
.tf-strip.is-on .tf-dot{box-shadow:0 0 0 3px #163240,0 0 0 5px var(--st-cream),0 0 46px rgba(255,240,214,.45),0 20px 32px rgba(0,0,0,.5)}
.tf-strip-name{color:var(--st-soft)}
.tf-strip.is-on .tf-strip-name{color:var(--st-cream)}
.tf-dot img{position:relative;z-index:0}
.tf-dot::after{z-index:1}

@media (max-width:900px){.dc-word{font-size:clamp(60px,calc(92vw / (var(--len,6) * .74)),180px);bottom:auto;top:110px}}
@media (prefers-reduced-motion:reduce){.dc-stage-bg i,.dc-word,.tf-ambient{transition:none;animation:none}.dc-progress{display:none}}