/* All Stiles: Discover (look index) and Tile Finder (size + colour) pages, Oct 22 2026. Loaded last on those two pages.
   Photos are never cropped here, except the small swatches. */
.dc-page,.tf-page{--dc-stone:#f5f2ec;--dc-ink:#1d3d4c;--dc-night:#111c20;--dc-blue:#65afc7;--dc-line:rgba(29,61,76,.16);background:var(--dc-stone);color:var(--dc-ink);font-family:'DM Sans',sans-serif}
.dc-page .wrap,.tf-page .wrap{display:block;height:auto;max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}


/* Light opening (no dark band): crumbs, headline, short line */
.dc-page .crumbs,.tf-page .crumbs{margin-bottom:18px;font:600 10.5px/1.4 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5d8a9b}
.dc-page .crumbs a,.tf-page .crumbs a{color:inherit;text-decoration:none}
.dc-page .crumbs a:hover,.tf-page .crumbs a:hover{color:var(--dc-ink)}
.dc-eyebrow{font:600 11px/1.4 'DM Sans',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#5d8a9b;margin:0 0 14px}
.dc-page h1,.tf-page h1{font:400 clamp(38px,3.8vw,60px)/1 Italiana,serif;color:var(--dc-ink);margin:0;letter-spacing:0}
.dc-lede{margin:14px 0 0;max-width:420px;font:400 14.5px/1.65 'DM Sans',sans-serif;color:var(--dc-ink);opacity:.8}
.dc-intro{padding:100px 0 0}
/* Tile Finder fills exactly one screen (below the fixed header): the intro sits near the top and the two bands share the
   rest, with the extra space going between them, so "See it in person" starts below the fold. */
.tf-page{min-height:calc(100svh - 88px);display:flex;flex-direction:column}
.tf-page .dc-intro{padding-top:44px}
@media (max-width:820px){.tf-page{min-height:calc(100svh - 72px)}.tf-page .dc-intro{padding-top:28px}}
.tf-page .tf-bands{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;padding:12px 0 28px}
.tf-page .tf-band-head-2{margin-top:0}
.tf-page .tf-bands>.wrap,.tf-page .tf-group>.wrap{width:100%;box-sizing:border-box}
/* Same gap from each heading to its row (sizes, colours) */
.tf-page .tf-band-head{margin-bottom:28px}
.tf-page .crumbs{margin-bottom:8px}
.tf-page h1{font-size:clamp(38px,3.8vw,60px)}
/* Page title sits out at the site edge (in line with the logo / back links), so it reads as the page header */
.tf-intro .wrap{max-width:none;padding:0 clamp(16px,4.2vw,80px)}
.dc-intro-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 48px;flex-wrap:wrap}
.dc-intro-row .dc-lede{margin:0}
.dc-count{display:block;font:600 10.5px/1.4 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#5d8a9b}
.dc-page .btn,.tf-page .btn{border-radius:999px}

/* Discover: fanned sample book. Six material chips (swatches, so filling the chip is fine) fanned from one pivot like a
   showroom sample book; the chip you point at rises out of the fan and its look is described on the right with a room
   photo shown whole. */
.dc-book{overflow-x:clip;padding:44px 0 16px;min-height:calc(100svh - 88px);box-sizing:border-box;display:flex;flex-direction:column}
.dc-book .wrap{width:100%;box-sizing:border-box;max-width:none;padding:0 clamp(16px,4.2vw,80px)}
.dc-book-intro{max-width:none!important;padding:0 clamp(16px,4.2vw,80px)!important}
.dc-book-grid{flex:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);align-items:center;margin-top:0}
/* Chip width follows the screen so the whole fan (8 chips, -32° to +32°) fits beside the photo and inside one screen */
.dc-fan{--cw:clamp(118px,min(10.5vw,calc((100svh - 330px) * .4)),200px);position:relative;height:calc(var(--cw) * 5 / 3 * 1.42 + 56px)}
.dc-chip{position:absolute;left:50%;bottom:calc(var(--cw) * 5 / 3 * .36);width:var(--cw);aspect-ratio:3/5;margin-left:calc(var(--cw) / -2);padding:0;border:0;border-radius:14px;background:#fbf9f5;box-shadow:0 1px 0 rgba(29,61,76,.12),0 12px 26px rgba(17,28,32,.14);cursor:pointer;transform-origin:50% 200%;transform:rotate(var(--a));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s;overflow:hidden;display:flex;flex-direction:column-reverse;text-align:left}
.dc-chip-tex{flex:1;display:block;background:#e7e1d7 center/cover no-repeat}
.dc-chip-label{display:block;padding:12px 14px;font:500 clamp(17px,1.4vw,22px)/1.1 'Cormorant Garamond',serif;color:var(--dc-ink);border-bottom:1px solid var(--dc-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-chip-label small{display:block;margin-bottom:3px;font:600 9.5px/1 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#5d8a9b}
.dc-chip:hover,.dc-chip:focus-visible{outline:none;transform:rotate(var(--a)) translateY(-14px)}
.dc-chip.is-active{transform:rotate(var(--a)) translateY(-44px);z-index:10;box-shadow:0 0 0 2px var(--dc-ink),0 22px 40px rgba(17,28,32,.22)}
.dc-detail{max-width:520px}
.dc-detail-ph{display:block;margin:0 0 18px}
.dc-detail-ph img{display:block;max-width:100%;max-height:clamp(180px,24vw,300px);width:auto;height:auto;box-shadow:16px 16px 0 -1px var(--dc-stone),16px 16px 0 0 rgba(101,175,199,.75)}
.dc-detail h2{font:400 clamp(30px,3vw,46px)/1.05 Italiana,serif;color:var(--dc-ink);margin:0 0 10px}
.dc-detail p{margin:0 0 6px;font:400 14.5px/1.6 'DM Sans',sans-serif;opacity:.85}
.dc-detail-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px}
.dc-detail-go{display:inline-flex;align-items:center;min-height:46px;padding:0 26px;border-radius:999px;background:var(--dc-ink);color:#fff;text-decoration:none;font:600 10.5px/1 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.dc-detail-go:hover{background:#163240}
.dc-detail .dc-count{margin:0}
.dc-detail>*{animation:dcIn .45s ease both}
@keyframes dcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dc-look:focus-visible,.tf-size:focus-visible,.tf-colour:focus-visible{outline:2px solid var(--dc-blue);outline-offset:3px}

/* Tile Finder: two bands. Band 1 = a shelf of every size standing to scale (--px per inch), painted with the chosen
   colour; band 2 = tall colour strips cut from real tiles (swatches, so filling the strip is fine). */
.tf-bands{padding:clamp(12px,1.6vw,22px) 0 clamp(36px,4vw,56px)}
.tf-band-head{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-bottom:10px}
.tf-band-head .dc-eyebrow{margin:0}
.tf-band-head h2{font:400 clamp(28px,2.5vw,38px)/1 Italiana,serif;color:var(--dc-ink);margin:0}
.tf-hint{margin-left:auto;font:400 12px/1.3 'DM Sans',sans-serif;opacity:.65}
.tf-band-head-2{margin-top:clamp(14px,1.8vw,24px)}
.tf-go-link[hidden]{display:none}
.tf-go-link{margin-left:auto;padding:9px 18px;border-radius:999px;background:var(--dc-ink);color:#fff;text-decoration:none;font:600 10.5px/1.2 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:background .2s}
.tf-go-link:hover{background:#163240}
.tf-shelf-scroll{display:flex;justify-content:center;overflow-x:auto;overflow-y:hidden;scrollbar-color:#b9b1a4 transparent;scrollbar-width:thin}
.tf-shelf{--px:2.25px;flex:none;box-sizing:border-box;width:min(1320px,100%);min-width:max-content;justify-content:space-between;display:flex;align-items:flex-end;gap:14px;padding:0 clamp(16px,4vw,48px) 6px;background:linear-gradient(var(--dc-ink),var(--dc-ink)) no-repeat center bottom 24px/calc(100% - 2*clamp(16px,4vw,48px)) 1px}
.tf-tile .tf-n{display:none}
.tf-tile{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:0;color:var(--dc-ink);cursor:pointer;font-family:'DM Sans',sans-serif}
.tf-tile-shape{display:block;width:calc(var(--w) * var(--px));height:calc(var(--h) * var(--px));min-width:5px;min-height:5px;margin-bottom:8px;background:#ebe5db var(--face) center/cover;border:1px solid rgba(29,61,76,.38);transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
.tf-shelf.has-face .tf-tile-shape{border-color:rgba(29,61,76,.2)}
.tf-tile:hover .tf-tile-shape{transform:translateY(-6px);border-color:var(--dc-ink)}
.tf-tile.is-on .tf-tile-shape{transform:translateY(-10px);border:2px solid var(--dc-ink);box-shadow:0 10px 0 -6px rgba(101,175,199,.55)}
.tf-tile-name{font:500 11.5px/1 'DM Sans',sans-serif;white-space:nowrap}
.tf-tile.is-on .tf-tile-name{font-weight:700}
.tf-tile.is-none,.tf-strip.is-none{opacity:.28;cursor:default}
.tf-strips{display:flex;justify-content:space-between;gap:10px}
.tf-strip{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 1 auto;min-width:0;padding:0;border:0;background:none;cursor:pointer;color:var(--dc-ink);font-family:'DM Sans',sans-serif}
.tf-dot{display:block;width:clamp(56px,5.6vw,92px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#e7e1d7;box-shadow:0 0 0 1px var(--dc-line);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.tf-dot img{display:block;width:100%;height:100%;object-fit:cover}
.tf-strip:hover .tf-dot{transform:translateY(-6px)}
.tf-strip.is-on .tf-dot{transform:translateY(-8px);box-shadow:0 0 0 3px var(--dc-stone),0 0 0 5px var(--dc-ink)}
.tf-strip.is-on .tf-strip-name{font-weight:700}
.tf-strip .tf-n{display:none}
.tf-strip-name{font:500 11.5px/1.2 'DM Sans',sans-serif;color:var(--dc-ink);text-align:center;white-space:nowrap}

@media (max-width:1100px){
.tf-shelf{--px:1.9px;justify-content:flex-start}
}
@media (max-width:900px){
.dc-book-grid{grid-template-columns:1fr;gap:8px}
.dc-fan{--cw:clamp(84px,17vw,140px)}
.dc-book{min-height:0}
}
@media (max-width:820px){
}
@media (max-width:600px){
.dc-fan{--cw:84px}
.dc-chip-label{font-size:13px;padding:8px}
.tf-hint{display:none}
.tf-strips{flex-wrap:wrap;justify-content:center;gap:16px 10px}
.tf-strip{flex:0 0 calc(25% - 8px)}
.tf-strip-name{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.dc-chip,.dc-detail>*,.tf-dot,.tf-tile-shape{transition:none}}