/* The furniture range (docs/slices/furniture-range-2026-10-05.md; Dean, 30 Sep 2026; Karo, 5 Oct 2026): Dean's groups
   and names, each picture opening large in a dialog. Since 9 Oct 2026 only on the catalogue page
   (docs/slices/furniture-catalogue-2026-10-09.md). Round G (Karo, 26 Oct 2026: "it is quite flat";
   docs/design-loop/2026-10-26-round-g-catalogue-brief.md): the catalogue takes the full width; each piece stands on a lit
   ground and casts a shadow from its own outline; bands of alternating tone replace the hairlines, each tile one step
   deeper than its band; a large photograph leads its group as a 2x2 tile; the "In this guide" menu becomes a dark sticky
   group bar; Dean's finishes show uncropped in a band of their own. */
.furniture-range{color:var(--hhi-ink,#24232c)}
.furniture-grid,.furniture-swatches{margin:0;padding:0;list-style:none}
.furniture-item{margin:0;min-width:0}
.furniture-name{font-size:16px;font-weight:600;line-height:1.35;margin:0 0 4px}
.furniture-note{font-size:14px;line-height:1.55;color:var(--hhi-ink,#24232c);margin:0 0 4px}

/* The full width page: one column, More guides closing it (move 2). */
html body.hhi-page-guide div.door-guides.catalogue-guides{grid-template-columns:minmax(0,1fr);row-gap:0}
html body.hhi-page-guide .catalogue-guides>.door-guide-body{grid-column:1;grid-row:1;min-width:0}
html body.hhi-page-guide .catalogue-guides>.door-guide-rail{grid-column:1;grid-row:2;display:block;position:static;max-height:none;overflow:visible;padding:clamp(48px,5vw,72px) 0 0}
html body.hhi-page-guide .catalogue-guides .door-guide-more{border-top:0}
@media (min-width:761px){html body.hhi-page-guide .catalogue-guides .door-guide-rail .door-guide-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}}
html body.hhi-page-guide .furniture-shelf>.furniture-catalogue-intro{font-size:16px;line-height:1.6;color:var(--hhi-muted,#615f69);margin:0 0 20px;max-width:66ch}

/* Bands (move 4): full width, the page tone and one warmer step in turn, no hairlines. Each band names its tile ground,
   one step deeper than itself, lit from the top. The band paints past the column with a spread shadow clipped to its
   own height, so nothing widens the page. */
.furniture-range.is-catalogue{container-type:inline-size;margin:0}
html body.hhi-page-guide .furniture-range.is-catalogue .furniture-group{--band:#faf9f7;--tile-light:#f7f5f1;--tile:#ede9e2;--tile-deep:#e1dbd1;
 margin:0;padding:clamp(44px,5.5vw,80px) 0;border:0;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
html body.hhi-page-guide .furniture-range.is-catalogue .furniture-group.is-warm{--band:#f3efe8;--tile-light:#f0ebe3;--tile:#e6e0d6;--tile-deep:#d9d1c4}
html body.hhi-page-guide .furniture-range.is-catalogue .furniture-group h2{margin:0 0 clamp(20px,2.4vw,32px)}
/* A jump from the bar lands the heading clear of it. */
html body.hhi-page-guide .furniture-range.is-catalogue .furniture-group h2[id]{scroll-margin-top:104px}

/* Tiles about 300px (move 2): two columns below a 680px column, three to 1060px (tablets and small laptops), four
   above, never wider than 360px. Each tile's shape at each column count comes from the template (catalogueTiles(), as
   tile-<columns>-<shape> classes), which packs every group with no empty cell: a large photograph leads as a 2x2 tile
   (move 3), or stands tall where a square would leave a gap; a single piece on a short row widens to two columns. */
html body.hhi-page-guide .is-catalogue .furniture-grid{--gx:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:28px var(--gx)}
@container (min-width:680px){html body.hhi-page-guide .is-catalogue .furniture-grid{--gx:clamp(16px,2vw,22px);grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(32px,3.4vw,40px)}}
@container (min-width:1060px){html body.hhi-page-guide .is-catalogue .furniture-grid{--gx:clamp(18px,1.8vw,24px);grid-template-columns:repeat(4,minmax(0,1fr));row-gap:clamp(32px,3vw,44px);max-width:calc(1440px + 3 * var(--gx))}}
/* A tile spans --c columns and --r rows (one square by default). Its picture is r tiles tall: as padding, a share of its
   own width, (r / c) x width - (1 - r / c) x the column gap, so a two column tile is exactly one tile tall. A tile two
   rows tall grows its picture to fill both rows, so its name sits level with its neighbours' on the lower row. */
.is-catalogue .furniture-item{--pad:13%;display:flex;flex-direction:column;grid-column:span var(--c,1);grid-row:span var(--r,1)}
@container (max-width:679.98px){
 .is-catalogue .tile-2-w{--c:2;--pad:6% 28%}
 .is-catalogue .tile-2-l{--c:2;--r:2;--pad:11%}
 .is-catalogue .tile-2-t{--r:2;--pad:9% 8%}
}
@container (min-width:680px) and (max-width:1059.98px){
 .is-catalogue .tile-3-w{--c:2;--pad:6% 28%}
 .is-catalogue .tile-3-l{--c:2;--r:2;--pad:11%}
 .is-catalogue .tile-3-t{--r:2;--pad:9% 8%}
}
@container (min-width:1060px){
 .is-catalogue .tile-4-w{--c:2;--pad:6% 28%}
 .is-catalogue .tile-4-l{--c:2;--r:2;--pad:11%}
 .is-catalogue .tile-4-t{--r:2;--pad:9% 8%}
}
/* The letterplate's photograph is landscape, so it leads as a wide tile at every width. */
.is-catalogue .furniture-item.is-lead.is-wide{--pad:7% 10%}
.is-catalogue .furniture-item .furniture-picture{aspect-ratio:auto;height:auto;flex-grow:calc(var(--r,1) - 1);flex-shrink:0;flex-basis:auto;
 padding:0 0 calc(var(--r,1) / var(--c,1) * 100% - (1 - var(--r,1) / var(--c,1)) * var(--gx,0px))}

/* Staging (move 1): a soft top lit ground; each cut-out casts a contact shadow from its own outline, falling down the
   tile as a fitting mounted on a door lit from above. A large photograph has no transparent ground, so it is set with
   multiply (its white studio ground drops away) and carries its own light. */
/* The picture sits absolutely inside its tile, inset by --pad, so a tall photograph can never stretch the tile past its
   shape (a grid item will not shrink below its content: the 1600px photographs made the 2x2 tiles up to twice as tall). */
.furniture-picture{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;margin:0 0 14px;border:0;border-radius:3px;box-sizing:border-box;
 background:radial-gradient(130% 95% at 50% 0%,var(--tile-light,#f7f5f1) 0%,var(--tile,#ede9e2) 55%,var(--tile-deep,#e1dbd1) 100%)}
/* The site's button rules set a pointer; a picture that opens larger says so (the critic, 26 Oct 2026). */
html body .furniture-range .furniture-picture{cursor:zoom-in}
.furniture-picture:focus-visible{outline:3px solid var(--hhi-indigo,#332483);outline-offset:3px}
.furniture-picture img{position:absolute;inset:0;display:block;width:100%;height:100%;padding:var(--pad,13%);box-sizing:border-box;object-fit:contain}
.furniture-cutout{filter:drop-shadow(0 3px 2px rgba(41,33,22,.2)) drop-shadow(0 14px 14px rgba(41,33,22,.14))}
.furniture-photo{mix-blend-mode:multiply}
/* Hover lifts the piece and lengthens its shadow, only where a mouse hovers and motion is welcome; under reduced motion
   the shadow deepens where the piece stands, so a hover still answers without anything moving. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .furniture-picture img{transition:transform .45s cubic-bezier(.22,1,.36,1),filter .45s cubic-bezier(.22,1,.36,1)}
 .furniture-picture:hover .furniture-cutout{transform:translateY(-5px);filter:drop-shadow(0 7px 4px rgba(41,33,22,.16)) drop-shadow(0 26px 22px rgba(41,33,22,.17))}
 .furniture-picture:hover .furniture-photo{transform:translateY(-4px)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
 .furniture-picture:hover .furniture-cutout{filter:drop-shadow(0 3px 2px rgba(41,33,22,.28)) drop-shadow(0 14px 14px rgba(41,33,22,.22))}
}

/* Each card (move 7): the name, a small capitals line from `chosen`, then Dean's notes. */
.is-catalogue .furniture-item h3.furniture-name{font-size:16px;line-height:1.35;letter-spacing:0;margin:0 0 4px}
.furniture-chosen{margin:0 0 6px;font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hhi-muted,#615f69)}

/* The finishes (move 6): Dean's swatch photographs uncropped, larger, each with its name, as samples on the band. */
html body.hhi-page-guide .is-catalogue .furniture-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 14px}
@container (min-width:640px){html body.hhi-page-guide .is-catalogue .furniture-swatches{grid-template-columns:repeat(7,minmax(0,1fr));gap:24px clamp(14px,2vw,28px)}}
.is-catalogue .furniture-swatch{display:grid;gap:12px;align-content:start;margin:0;min-width:0}
.is-catalogue .furniture-swatch img{display:block;width:100%;max-width:168px;height:auto;aspect-ratio:154/136;object-fit:cover;border-radius:3px;
 filter:drop-shadow(0 1px 1px rgba(41,33,22,.16)) drop-shadow(0 10px 12px rgba(41,33,22,.16))}
.is-catalogue .furniture-swatch .furniture-name{font-size:15px;font-weight:600;line-height:1.3;margin:0}

/* The group bar (move 5): the "In this guide" menu, sticky in the site's darkest colour (the top bar's #17152B, not
   black). Its links are controls, so they are not framed; the current group is marked in the page's light tone, since
   indigo would not read on it. It sits in the shelf with the groups, so it lets go after Miscellaneous; its links keep
   the column's edge and its ground runs full width, as the bands' do. Wherever its row is wider than the column it
   scrolls sideways, fading on the side that has more (data-fade, set by furniture-range.js). */
html body:has(.catalogue-guides) .hhi-guide-menu{display:block;position:sticky;top:0;z-index:30;margin:0 0 clamp(28px,3vw,40px);padding:0;border:0;background:#17152B;color:#f7f6f3;
 box-shadow:0 0 0 100vmax #17152B;clip-path:inset(0 -100vmax)}
html body:has(.catalogue-guides) .hhi-guide-menu p{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html body:has(.catalogue-guides) .hhi-guide-menu ul{display:flex;gap:0 clamp(20px,2.4vw,36px);list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
html body:has(.catalogue-guides) .hhi-guide-menu ul::-webkit-scrollbar{display:none}
html body:has(.catalogue-guides) .hhi-guide-menu li{flex:none}
html body:has(.catalogue-guides) .hhi-guide-menu a{position:relative;display:flex;align-items:center;min-height:56px;font-size:15px;font-weight:600;letter-spacing:.01em;color:rgba(247,246,243,.74);text-decoration:none;white-space:nowrap}
html body:has(.catalogue-guides) .hhi-guide-menu a[aria-current]{color:#fff}
html body:has(.catalogue-guides) .hhi-guide-menu a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;background:#f7f6f3}
html body:has(.catalogue-guides) .hhi-guide-menu a:focus-visible{outline:2px solid #f7f6f3;outline-offset:-4px;border-radius:2px}
@media (hover:hover){html body:has(.catalogue-guides) .hhi-guide-menu a:hover{color:#fff}}
html body:has(.catalogue-guides) .hhi-guide-menu ul[data-fade="end"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
html body:has(.catalogue-guides) .hhi-guide-menu ul[data-fade="start"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
html body:has(.catalogue-guides) .hhi-guide-menu ul[data-fade="start end"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
@media (max-width:760px){
 html body:has(.catalogue-guides) .hhi-guide-menu a{min-height:52px;font-size:14px}
 html body:has(.catalogue-guides) .hhi-guide-menu a[aria-current]::after{bottom:10px}
}

/* The page's own header picture stands on the same lit ground. */
html body:has(.catalogue-guides) .hhi-guide-hero-stage{background:radial-gradient(130% 95% at 50% 0%,#f7f5f1 0%,#ede9e2 55%,#e1dbd1 100%)}

/* The dialog: one height for every item, so the previous and next buttons stay put (the critic, 5 Oct 2026); its picture
   on the same lit ground, the cut-out with its shadow until the large photograph replaces it. */
html.furniture-dialog-open{overflow:hidden}
.furniture-dialog{width:min(920px,calc(100vw - 48px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:12px;background:#fff;color:var(--hhi-ink,#24232c);box-shadow:0 24px 64px rgba(23,21,43,.28)}
.furniture-dialog::backdrop{background:rgba(23,21,43,.55)}
.furniture-dialog-frame{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:0 32px;padding:32px;height:min(720px,calc(100dvh - 48px));box-sizing:border-box}
.furniture-dialog-picture{grid-row:1/3;position:relative;overflow:hidden;margin:0;border-radius:6px;min-height:0;background:radial-gradient(130% 95% at 50% 0%,#f7f5f1 0%,#ede9e2 55%,#e1dbd1 100%)}
.furniture-dialog-picture img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 4px 3px rgba(41,33,22,.2)) drop-shadow(0 18px 18px rgba(41,33,22,.14))}
.furniture-dialog-picture img[data-large-shown]{filter:none}
.furniture-dialog-text [data-furniture-name]:focus{outline:none}
.furniture-dialog-text{align-self:center;padding-right:24px}
.furniture-dialog-group{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hhi-muted,#615f69);margin:0 0 8px}
.furniture-dialog-text h3{font-size:26px;line-height:1.25;letter-spacing:-.02em;margin:0 0 8px}
.furniture-dialog-text .furniture-chosen{margin:0 0 12px}
.furniture-dialog-text [data-furniture-notes] p{font-size:16px;line-height:1.6;margin:0 0 6px}
.furniture-dialog-nav{display:flex;align-items:center;gap:16px;align-self:end}
.furniture-dialog-nav span{font-size:14px;color:var(--hhi-muted,#615f69);min-width:5.5em;text-align:center}
.furniture-dialog-nav button,.furniture-dialog-close{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--hhi-line,#dedbd6);border-radius:50%;background:#fff;color:var(--hhi-ink,#24232c);font-size:20px;line-height:1;cursor:pointer}
.furniture-dialog-nav button:hover,.furniture-dialog-close:hover{background:#f4f2ee}
.furniture-dialog-nav button:focus-visible,.furniture-dialog-close:focus-visible{outline:3px solid var(--hhi-indigo,#332483);outline-offset:2px}
.furniture-dialog-close{position:absolute;top:16px;right:16px;font-size:26px;z-index:1}
@media(max-width:760px){
 .furniture-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
 .furniture-dialog-frame{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto;gap:16px;padding:64px 16px calc(16px + env(safe-area-inset-bottom));min-height:100%;height:100%;box-sizing:border-box}
 .furniture-dialog-picture{grid-row:auto}
 .furniture-dialog-text{padding:0}
 .furniture-dialog-text h3{font-size:22px}
 .furniture-dialog-nav{justify-content:space-between}
 .furniture-dialog-close{top:12px;right:12px}
}