/* homeviz.css · the home page room on www.powellflooring.com (2026-10-07)
   A real floor laid in a real room of ours, by a line in the seven price-code colors, beside the floor's own words and a
   rack of samples at one true scale. Powell's own ground and type (site.css tokens); everything scoped .hv. The layout is
   the spec's section 4: the head above the band at every width; on a desktop the stage and the floor block side by side,
   the rack under both; on a tablet and a phone the stage, the rack, then the words. */
.hv{
  --hv-paper:var(--paper,#faf8f5); --hv-ink:var(--ink,#1a1512); --hv-muted:var(--muted,#6b625a); --hv-line:var(--line,#e6e0d8);
  --hv-oak:var(--oak,#b4783c); --hv-walnut:var(--walnut,#3d2f24);
  --hv-oak-ink:#8b5a2b;   /* oak for small words: 5.5:1 on the paper (the site's oak is 3.5:1, kept for large type) */
  --hv-glass:rgba(15,12,10,.62); --hv-on-glass:#f6efe4; --hv-ey-glass:#d9b98a;
  --hv-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --hv-sans:'Instrument Sans',system-ui,sans-serif;
  --hv-edge:max(24px,calc((100vw - 1180px) / 2 + 24px));
  --hv-ppi:4.5px;
  position:relative;background:var(--hv-paper);color:var(--hv-ink);border-bottom:1px solid var(--hv-line)}
.hv *,.hv *::before,.hv *::after{box-sizing:border-box}
.hv [hidden]{display:none!important}
.hv-mono{font:500 .68rem/1.2 var(--hv-mono);letter-spacing:.14em;text-transform:uppercase}
.hv .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- the head: above the band at every width ---------- */
.hv-head{max-width:1180px;margin:0 auto;padding:2.4rem 1.5rem 1.3rem}
.hv-head-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"ey ey" "h in";column-gap:3rem;align-items:end}
.hv-ey{grid-area:ey;color:var(--hv-oak-ink);margin:0 0 .8rem}
.hv-head h2{grid-area:h;font-family:var(--f-d,'Bricolage Grotesque',Georgia,serif);font-weight:800;font-size:clamp(2rem,3.1vw,2.75rem);line-height:1.02;
  letter-spacing:-.03em;margin:0;text-wrap:balance}
.hv-intro{grid-area:in;margin:0;color:var(--hv-muted);font-size:1rem;line-height:1.5;max-width:46ch}

/* ---------- the band ---------- */
.hv-band{display:grid;grid-template-columns:minmax(0,1fr) calc(min(440px,34vw) + var(--hv-edge));
  grid-template-areas:"stage spec" "rack rack"}

/* ---------- the stage ---------- */
.hv-stage{grid-area:stage;position:relative;overflow:hidden;margin:0;background:#0f0c0a;width:100%;
  height:min(clamp(440px,calc(100vh - 260px),680px),max(280px,calc(100vh - 96px)));
  height:min(clamp(440px,calc(100svh - 260px),680px),max(280px,calc(100svh - 96px)));
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.hv-stage > img,.hv-stage > canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
.hv-gl{z-index:1}.hv-ov{z-index:2;pointer-events:none}.hv-poster{z-index:4}
.hv-stage[data-state="ready"] .hv-poster,.hv-stage[data-state="laying"] .hv-poster{visibility:hidden}
.hv-stage.is-holding .hv-poster,.hv-stage.is-pair .hv-poster{visibility:visible}
.hv-stage[data-state="loading"] .hv-gl,.hv-stage[data-state="loading"] .hv-ov,
.hv-stage[data-state="still"] .hv-gl,.hv-stage[data-state="still"] .hv-ov,
.hv-stage[data-state="failed"] .hv-gl,.hv-stage[data-state="failed"] .hv-ov{visibility:hidden}

.hv-bar{position:absolute;left:14px;right:14px;z-index:6;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none}
.hv-bar > *{pointer-events:auto}
.hv-top{top:14px}.hv-bot{bottom:14px;align-items:flex-end}
.hv-glass{background:var(--hv-glass);color:var(--hv-on-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;
  border:1px solid rgba(255,255,255,.14)}

/* the room pill */
.hv-room{display:flex;align-items:center;min-width:0;max-width:min(440px,100%);padding:3px}
.hv-room button{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0}
@media (hover:hover){.hv-room button:hover{background:rgba(255,255,255,.12)}}
.hv-room svg{width:18px;height:18px}
.hv-room-t{min-width:0;padding:0 4px;display:flex;flex-direction:column;gap:3px;transition:opacity .15s}
.hv-room-t.is-wait{opacity:.55}   /* the next room is on its way: its name shows at once, dimmed until its picture is in */
.hv-room-t .hv-mono{font-size:.58rem;color:var(--hv-ey-glass);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-room-t .hs{display:none}
.hv-room-t b{display:block;font:600 .92rem/1.15 var(--hv-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-room-t .l,.hv-room-t .s{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-room-t .s{display:none}

/* the toolbar: Hold for before, Side by side, the eye */
.hv-tools{display:flex;align-items:center;gap:2px;padding:3px;flex:none;margin-left:auto;transition:opacity .15s}
.hv-tools button{position:relative;height:40px;min-width:40px;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;font:600 .84rem/1 var(--hv-sans);
  transition:background .15s,color .15s,opacity .15s}
.hv-tools .hv-hold{touch-action:none}
.hv-tools button.ic{padding:0;width:40px}
@media (hover:hover){.hv-tools button:hover{background:rgba(255,255,255,.12)}}
.hv-tools button[aria-pressed="true"],.hv-stage.is-holding .hv-hold{background:var(--hv-paper);color:var(--hv-ink)}
.hv-tools button[aria-disabled="true"]{opacity:.42;cursor:default;background:transparent;color:inherit}
.hv-tools svg{width:18px;height:18px;flex:none}
.hv-tools .sep{width:1px;height:20px;background:rgba(255,255,255,.18);flex:none}
.hv-tools .lab-s{display:none}
.hv-tools .hv-eye[aria-pressed="true"]{background:transparent;color:inherit}
.hv-eye .off{display:none}.hv-eye[aria-pressed="true"] .on{display:none}.hv-eye[aria-pressed="true"] .off{display:block}
@media (pointer:coarse){
  .hv-room button::after,.hv-tools button::after{content:'';position:absolute;inset:-2px}
  .hv-room button{position:relative}
}

/* the caption (phone) and the light pill (wider) */
.hv-cap{display:none;margin:0;padding:9px 14px 10px;border-radius:14px;max-width:calc(100% - 8px);min-width:0}
.hv-cap b{display:block;font:600 .95rem/1.15 var(--hv-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-cap span{display:block;margin-top:3px;font:500 .62rem/1.2 var(--hv-mono);letter-spacing:.08em;text-transform:uppercase;color:#d8cdbf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-light{display:flex;align-items:center;gap:10px;padding:6px 16px;font:500 .64rem/1 var(--hv-mono);letter-spacing:.08em;text-transform:uppercase;margin-left:auto;cursor:pointer}
.hv-range{-webkit-appearance:none;appearance:none;width:150px;height:28px;background:transparent;cursor:pointer;margin:0}
.hv-range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#cfe0ee,#f4ece0 50%,#f0b46a)}
.hv-range::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#cfe0ee,#f4ece0 50%,#f0b46a)}
.hv-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;border-radius:50%;background:#fff;border:2px solid var(--hv-walnut);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hv-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--hv-walnut);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hv-lightrow{display:none}

/* pane labels and the seam: only in side by side */
.hv-lab{position:absolute;z-index:5;bottom:14px;display:none;padding:7px 11px;border-radius:999px;font:500 .62rem/1 var(--hv-mono);letter-spacing:.12em;text-transform:uppercase;
  max-width:calc(50% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-lab-a{left:14px}.hv-lab-b{left:calc(50% + 14px)}
.hv-seam{position:absolute;z-index:5;display:none;background:var(--hv-paper)}

/* side by side, a wide stage: the photo as made on the left, the laid floor on the right, both cropped the same way */
.hv-stage.is-pair .hv-poster{right:auto;width:calc(50% - 1px)}
.hv-stage.is-pair .hv-gl,.hv-stage.is-pair .hv-ov{left:auto;width:calc(50% - 1px)}
.hv-stage.is-pair .hv-lab{display:block}
.hv-stage.is-pair .hv-seam{display:block;top:0;bottom:0;left:calc(50% - 1px);width:2px}
.hv-stage.is-pair .hv-bot{left:calc(50% + 14px)}
.hv-stage.is-pair .hv-light{display:none}   /* compared at midday: the photo cannot be relit, so neither is the floor */
.hv-stage:not(.is-pair) .hv-lab{display:none}

/* the eye: a clean picture; the eye stays where it was, quiet */
.hv-stage.is-clean .hv-room,.hv-stage.is-clean .hv-cap,.hv-stage.is-clean .hv-light,.hv-stage.is-clean .hv-lab,
.hv-stage.is-clean .hv-tools > :not(.hv-eye){display:none!important}
.hv-stage.is-clean .hv-tools{opacity:.7}
.hv-stage.is-clean .hv-tools:hover,.hv-stage.is-clean .hv-tools:focus-within{opacity:1}
.hv-band.is-clean .hv-lightrow{visibility:hidden}
.hv-band.is-pair .hv-lightrow{display:none}

/* ---------- the floor block ---------- */
.hv-spec{grid-area:spec;align-self:start;padding:20px var(--hv-edge) 1.2rem 40px;min-width:0}
.hv-fb{position:relative}
.hv-kind{color:var(--hv-muted);margin:0}
.hv-name{font-family:var(--f-d,'Bricolage Grotesque',Georgia,serif);font-weight:800;font-size:1.9rem;letter-spacing:-.025em;line-height:1.05;margin:.35rem 0 .15rem;
  overflow-wrap:anywhere}
.hv-name a{color:inherit;text-decoration:none;border-bottom:2px solid transparent}.hv-name a:hover{border-color:currentColor}
.hv-sub{color:var(--hv-muted);font-size:.92rem;margin:0}
/* the price area's tallest case, kept from the server's first print (the module never sets less): a price with its carton
   on one line, a note and a code. Narrower floor blocks wrap the carton or the stain line and keep more (below). */
.hv-pa{position:relative;min-height:86px}
.hv-price{display:flex;align-items:baseline;column-gap:.45rem;row-gap:.1rem;flex-wrap:wrap;margin:.85rem 0 0}
.hv-price b{font-family:var(--f-d,'Bricolage Grotesque',Georgia,serif);font-weight:600;font-size:1.65rem;color:var(--hv-oak);letter-spacing:-.02em;line-height:1.1}
.hv-price span{font-size:.85rem;color:var(--hv-muted)}
.hv-price i{font-style:normal;font-size:.85rem;color:var(--hv-muted);margin-left:.35rem}
.hv-note{font-size:.8rem;color:var(--hv-muted);margin:.25rem 0 0}
.hv .pcode{margin:.55rem 0 0;max-width:100%}
.hv .pcode-t{white-space:nowrap}   /* WebKit sized the button to its line and wrapped the name over three lines */
.hv-ask{font-size:.9rem;color:var(--hv-muted);margin:.85rem 0 0;max-width:40ch}
.hv-pp{margin:.6rem 0 0;font-size:.85rem;color:var(--hv-muted)}
.hv-pp b{font-family:var(--f-d,'Bricolage Grotesque',Georgia,serif);font-weight:700;font-size:1.25rem;color:var(--hv-oak)}
.hv-nogl{font-size:.85rem;color:var(--hv-muted);margin:.8rem 0 0}
.hv-acts{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1.05rem}
.hv-acts .cta{padding:.8rem 1.25rem;font-size:.95rem;border-radius:8px}
.hv-acts .ghost{padding:.75rem 1.1rem;font-size:.95rem;white-space:nowrap}
.hv-finish{margin:.9rem 0 0;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hv-finish .hv-mono{color:var(--hv-muted)}
.hv-seg{display:inline-flex;border:1px solid var(--hv-line);border-radius:999px;padding:2px;background:#fff}
.hv-seg button{border:0;background:transparent;border-radius:999px;padding:.42rem .8rem;font:600 .8rem/1 var(--hv-sans);color:var(--hv-muted);cursor:pointer;min-height:34px}
.hv-seg button[aria-checked="true"]{background:var(--hv-walnut);color:#fff}
.hv-fall{margin:.9rem 0 0;font-size:.9rem}
.hv-fall a{color:var(--hv-oak-ink);font-weight:600;border-bottom:1px solid currentColor}

/* the See row beside it: compact tiles on a desktop */
.hv-see{margin-top:1.1rem}
.hv-see .see{margin:0}
.hv-see .see-h{font-size:.8rem;color:var(--hv-muted);font-weight:500;margin-bottom:.4rem}
.hv-see .see-t{min-height:0;flex-direction:row;align-items:center;gap:.5rem;padding:.6rem .7rem}
.hv-see .see-i{width:22px;height:22px;margin:0}
.hv-see .see-t b{font-size:.86rem;white-space:nowrap}
.hv-see .see-t small{display:none}
.hv-see .see-t.is-busy small,.hv-see .see-t.is-err small{display:block}
.hv-see .see-fine{margin-top:.45rem}

/* ---------- the rack ---------- */
.hv-rack{grid-area:rack;display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 1.4rem;padding:.7rem 0 1.4rem var(--hv-edge);min-width:0}
/* its height while the module is on its way (measured with the first kind open), so the page below never jumps */
.hv-rack:empty{min-height:283px}
.hv-kinds{display:flex;flex-direction:column;gap:2px;padding-top:2.4rem}
.hv-kinds button{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;border:0;background:transparent;text-align:left;
  padding:.55rem .8rem;border-radius:8px;font:600 .95rem/1.1 var(--hv-sans);color:var(--hv-muted);cursor:pointer;min-height:38px}
.hv-kinds button i{font:500 .68rem/1 var(--hv-mono);font-style:normal;color:var(--hv-muted)}
.hv-kinds button:hover{color:var(--hv-ink)}
.hv-kinds button[aria-pressed="true"]{color:var(--hv-ink);background:#f1ece5}
.hv-kinds button[aria-pressed="true"]::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--hv-walnut)}
.hv-rmain{min-width:0}
.hv-rhead{display:flex;align-items:center;gap:.8rem;min-height:2.2rem;padding-right:var(--hv-edge)}
.hv-scale{display:flex;align-items:center;gap:.6rem;margin:0;color:var(--hv-muted);font:500 .68rem/1.3 var(--hv-mono);letter-spacing:.04em;min-width:0}
.hv-scale i{flex:none;width:calc(12 * var(--hv-ppi));height:7px;border:1.5px solid #9a8f84;border-top:0}
.hv-scale .s{display:none}
.hv-rhead .pcode-legend{margin-left:auto;font:inherit;font-size:.8rem;color:var(--hv-muted);white-space:nowrap;
  text-decoration-line:underline;text-decoration-style:dotted;text-underline-offset:3px}
.hv-rhead .pcode-legend:hover{color:var(--hv-ink)}
.hv-arrows{display:flex;gap:6px;margin-left:auto}
.hv-rhead .pcode-legend:not([hidden]) + .hv-arrows{margin-left:0}
.hv-arrows button{width:34px;height:34px;border-radius:50%;border:1px solid var(--hv-line);background:#fff;color:var(--hv-ink);display:grid;place-items:center;cursor:pointer;padding:0}
.hv-arrows button[disabled]{opacity:.4;cursor:default}
.hv-arrows svg{width:15px;height:15px}
/* 8 px of room on the left and below, pulled back by the margin, so a sample's focus ring (3 px out, 3 px wide) is never cut
   by the scrolling row */
.hv-row{display:flex;gap:16px;align-items:flex-start;overflow-x:auto;scrollbar-width:none;padding:12px 24px 10px 8px;margin:0 0 -4px -6px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scroll-padding-inline:8px}
.hv-row::-webkit-scrollbar{display:none}
.hv-group{display:flex;gap:16px;align-items:flex-start;flex:none}
.hv-smp{flex:none;align-self:flex-start;min-height:calc(28 * var(--hv-ppi) + 4.4rem);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:calc(16 * var(--hv-ppi));border:0;background:transparent;
  padding:0;margin:0;text-align:left;cursor:pointer;position:relative;scroll-snap-align:start;color:var(--hv-ink);font:inherit;text-decoration:none}
.hv-smp .im{position:relative;display:block;width:100%;aspect-ratio:16/28;border-radius:3px;overflow:hidden;background:var(--hv-line);
  box-shadow:0 1px 2px rgba(43,33,26,.18),0 6px 14px -8px rgba(43,33,26,.35);transition:transform .18s}
.hv-smp .im img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.hv-smp .st{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--pb)}
/* a name may run 6 px past its sample (the gap is 16), so 10 px always part two names */
.hv-smp b{width:calc(100% + 6px);margin-right:-6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.5rem;font:600 .78rem/1.2 var(--hv-sans);color:var(--hv-muted)}
.hv-smp small{display:block;margin-top:.15rem;font:500 .64rem/1.3 var(--hv-mono);color:var(--hv-muted);letter-spacing:.02em}
.hv-smp[aria-checked="true"] b{color:var(--hv-ink)}
.hv-smp::before{content:'';position:absolute;left:0;right:0;top:-9px;height:3px;border-radius:2px;background:var(--hv-walnut);opacity:0;transition:opacity .18s}
.hv-smp[aria-checked="true"]::before{opacity:1}
.hv-smp[aria-checked="true"].hv-wait::before{opacity:.35}
.hv-smp[aria-disabled="true"]{cursor:default}
.hv-smp[aria-disabled="true"] .im{opacity:.45}
@media (hover:hover){.hv-smp:hover .im{transform:translateY(-2px)}.hv-smp[aria-disabled="true"]:hover .im{transform:none}}
.hv-end{flex:none;width:160px;align-self:flex-start;padding:.2rem 0 0 .9rem;border-left:1px solid var(--hv-line)}
.hv-end b{display:block;font-family:var(--f-d,'Bricolage Grotesque',Georgia,serif);font-size:1.05rem;line-height:1.2;letter-spacing:-.02em}
.hv-end a{display:inline-block;margin-top:.55rem;font-weight:600;font-size:.85rem;border-bottom:1px solid currentColor;color:var(--hv-oak-ink);text-decoration:none}

/* focus */
.hv button:focus-visible,.hv a:focus-visible,.hv input:focus-visible{outline:3px solid var(--hv-oak);outline-offset:3px}
.hv-stage button:focus-visible,.hv-stage input:focus-visible{outline-color:#f2c98a}
.hv button.hv-smp:focus-visible,.hv a.hv-smp:focus-visible{outline-offset:2px;border-radius:4px}

/* ---------- tablet (640 to 1023) ---------- */
@media (max-width:1023px){
  .hv-head{padding:2.2rem 24px 1.1rem}
  .hv-head-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"ey" "h" "in"}
  .hv-intro{margin-top:.7rem}
  .hv-band{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "rack" "spec"}
  .hv-stage{height:min(66.667vw,max(280px,calc(100vh - 96px)));height:min(66.667vw,max(280px,calc(100svh - 96px)))}
  .hv-rack{grid-template-columns:minmax(0,1fr);padding:1rem 0 0 24px;row-gap:.4rem}
  .hv-rack:empty{min-height:310px}
  .hv-kinds{flex-direction:row;padding-top:0;margin-right:24px}
  .hv-kinds button{justify-content:center;gap:.4rem}
  .hv-kinds button[aria-pressed="true"]::before{left:22%;right:22%;top:auto;bottom:5px;width:auto;height:2px}
  .hv-rhead{padding-right:24px}
  .hv-spec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 2rem;padding:1.1rem 24px 1.8rem}
  .hv-spec > .hv-see{margin-top:0}
}
/* full tiles under 1280: half a tablet's width, and the desktop floor block until it is 392 px wide (every iPad held
   sideways and the narrower laptops), cannot hold three compact tiles on one line (measured in Chromium and WebKit) */
@media (max-width:1279px){
  .hv-see .see-t{flex-direction:column;align-items:flex-start;gap:.15rem;padding:.7rem .7rem .65rem}
  .hv-see .see-i{width:26px;height:26px;margin:0 0 .35rem}
  .hv-see .see-t b{white-space:normal}
  .hv-see .see-t small{display:block}
}
@media (max-width:1179px){.hv-pa{min-height:108px}}   /* a floor block under 358 px wraps a carton line or the stain line */
@media (min-width:800px) and (max-width:1023px){.hv-pa{min-height:86px}}
/* ---------- phone (under 640) ---------- */
@media (max-width:639px){
  .hv{--hv-ppi:4px}
  .hv-head{padding:2rem 16px .9rem}
  .hv-head h2{font-size:2rem}
  .hv-intro{font-size:.95rem;margin-top:.6rem}
  .hv-band{grid-template-areas:"stage" "lightm" "rack" "spec"}
  .hv-stage{height:min(clamp(66.67vw,calc(100vh - 484px),80vw),max(280px,calc(100vh - 96px)));height:min(clamp(66.67vw,calc(100svh - 484px),80vw),max(280px,calc(100svh - 96px)))}
  .hv-bar{left:10px;right:10px;gap:6px}.hv-top{top:10px}.hv-bot{bottom:10px}
  /* the house, short, over the room's short name: two kitchens and two primary bedrooms read apart */
  .hv-room-t{gap:2px}
  .hv-room-t .hv-mono{font-size:.55rem;letter-spacing:.1em}
  .hv-room-t .rn,.hv-room-t .hn{display:none}.hv-room-t .hs{display:inline}
  .hv-room-t .l{display:none}.hv-room-t .s{display:block}
  .hv-room-t b{font-size:.86rem}
  .hv-tools button{padding:0 11px}
  .hv-tools .lab-l{display:none}.hv-tools .lab-s{display:inline}
  .hv-tools .hv-pair .lab-l,.hv-tools .hv-pair .lab-s{display:none}
  .hv-tools .hv-pair{padding:0;width:40px}
  .hv-tools .hv-pair svg{transform:rotate(90deg)}
  .hv-cap{display:block}
  .hv-light{display:none}
  .hv-lightrow{grid-area:lightm;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;font:500 .64rem/1 var(--hv-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hv-muted);cursor:pointer}
  .hv-lightrow .hv-range{flex:1;min-width:0;width:auto;height:44px}
  .hv-lightrow .hv-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,#b9cfe1,#e9dccb 50%,#e9a55a)}
  /* side by side on a phone: the photo over the floor, each the whole room at 3:2; the stage grows */
  .hv-stage.is-pair{height:calc(400vw / 3 + 2px)}
  .hv-stage.is-pair .hv-poster{width:100%;height:calc(50% - 1px);right:0;bottom:auto}
  .hv-stage.is-pair .hv-gl,.hv-stage.is-pair .hv-ov{width:100%;left:0;top:auto;height:calc(50% - 1px)}
  .hv-stage.is-pair .hv-seam{top:calc(50% - 1px);left:0;right:0;bottom:auto;width:auto;height:2px}
  .hv-stage.is-pair .hv-lab-a{left:10px;bottom:calc(50% + 11px);max-width:none}
  .hv-stage.is-pair .hv-lab-b{display:none}
  .hv-stage.is-pair .hv-bot{left:10px}
  .hv-rack{padding:.6rem 0 0 0;row-gap:0}
  .hv-rack:empty{min-height:301px}
  .hv-pa{min-height:86px}
  .hv-kinds{gap:0;margin:0 16px;border:1px solid var(--hv-line);border-radius:12px;padding:3px;background:#fff;justify-content:space-between}
  .hv-kinds button{flex:1 1 auto;padding:.5rem .3rem;font-size:.86rem;gap:.3rem;min-height:44px;align-items:center}
  .hv-rmain{display:flex;flex-direction:column}
  .hv-rhead{order:2;padding:0 16px;margin-top:.25rem}
  .hv-rhead .hv-arrows{display:none}
  .hv-row{padding:14px 16px 8px;margin:0 0 -4px;gap:18px;scroll-padding-inline:16px}
  .hv-group{gap:18px}
  .hv-smp b{font-size:.75rem;width:calc(100% + 8px);margin-right:-8px}   /* Shenandoah fits; 10 px between names */
  .hv-scale .l{display:none}.hv-scale .s{display:inline}
  .hv-spec{display:block;padding:1.2rem 16px 2rem}
  .hv-acts .cta,.hv-acts .ghost{flex:1 1 100%;text-align:center}
  .hv-spec > .hv-see{margin-top:1.4rem}
}
@media (max-width:389px){.hv-pa{min-height:108px}}
/* the smallest phones (320): the four kinds fit the bar, so the page never scrolls sideways */
@media (max-width:359px){.hv-kinds button{font-size:.8rem;padding:.5rem .15rem;gap:.2rem}}
/* a phone held sideways (the tablet layout on a short screen, near 3:1): anchored a little above the bottom, so the windows
   keep some of their height and the floor still runs to the near edge */
@media (min-width:640px) and (max-height:500px) and (orientation:landscape){
  .hv-stage > img,.hv-stage > canvas{object-position:50% 62%}
}
@media (prefers-reduced-motion:reduce){.hv *{transition:none!important}}