/* polish-rooms: 2026-09-28 usability and finish pass for the room guide (/home/), the gallery (/gallery/)
   and the shared photo viewer. Loaded after site.css. Page rules are scoped to [data-page=home] and
   [data-page=gallery]; viewer rules are unscoped because the viewer opens from every page. */

/* ---------- Shared: readable minimums on the two photo pages ---------- */
:is([data-page=home],[data-page=gallery]) main .eyebrow{font-size:10.5px;letter-spacing:.16em}
:is([data-page=home],[data-page=gallery]) .page-intro-aside p{font-size:15px;line-height:1.8}
:is([data-page=home],[data-page=gallery]) .page-intro h1{text-wrap:balance}
:is([data-page=home],[data-page=gallery]) .photo-button:focus-visible{outline-offset:4px}
/* Photographs fade in as they arrive instead of popping in (class added by polish-rooms.js). */
.rooms-fade{opacity:0;transition:opacity .5s cubic-bezier(.2,.6,.2,1),transform .45s cubic-bezier(.2,.6,.2,1)}
.rooms-fade.is-loaded{opacity:1}

/* ---------- Room guide ---------- */
[data-page=home] .room-tabs>button{min-height:56px;transition:color .2s,box-shadow .2s}
[data-page=home] .room-tabs>button>span{font-size:14px}
[data-page=home] .room-tabs>button:hover{color:var(--ink)}
[data-page=home] .room-tabs>button:hover>.icon{transform:translateX(3px)}
[data-page=home] .room-tabs>button>.icon{transition:transform .2s}
[data-page=home] .room-tabs>button:focus-visible{outline-offset:-2px}
[data-page=home] .room-panel-copy>p:not(.eyebrow){font-size:15px;line-height:1.8}
[data-page=home] .room-panel-copy .check-list{font-size:14px;gap:12px}
[data-page=home] .room-panel-copy>.text-link{font-size:14px}
[data-page=home] .room-main-photo .photo-caption,[data-page=home] .room-related .photo-caption{font-size:12px;letter-spacing:.02em}
/* Previous / next: each step names where it goes, so the four parts read as one sequence. */
[data-page=home] .room-stepper{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end;border-top:1px solid var(--line);padding-top:18px;margin-top:auto}
[data-page=home] .room-panel-copy>.text-link{margin-bottom:28px}
.room-step{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:52px;padding:6px 0;border:0;background:none;color:var(--ink);text-align:left;text-decoration:none}
.room-step.next{align-items:flex-end;text-align:right;grid-column:2}
.room-step-label{display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.room-step-label .icon{width:15px;height:15px;color:var(--gold-ink);transition:transform .2s}
.room-step-name{font:19px/1.3 var(--serif);letter-spacing:-.015em;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
.room-step:hover .room-step-name{text-decoration-color:var(--gold-ink)}
.room-step.next:hover .icon{transform:translateX(3px)}
.room-step.previous:hover .icon{transform:rotate(180deg) translateX(3px)}
/* Stacked layouts repeat the step control after the related photographs, so it is not passed before they are seen. */
[data-page=home] .room-stepper-end{display:none}
/* Two related photographs share the row instead of leaving an empty third column. */
[data-page=home] .room-related[data-count="2"]{grid-template-columns:1fr 1fr}
[data-page=home] .room-related[data-count="2"]>.photo-button{aspect-ratio:2}
/* Floor-plan note */
[data-page=home] .guide-note strong{font-size:15px}
[data-page=home] .guide-note p{font-size:14px;line-height:1.75}
[data-page=home] .guide-note p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:3px}
[data-page=home] .guide-note p a:hover{color:var(--gold-ink)}
[data-page=home] .guide-note>.text-link{font-size:13px}

@media(max-width:1000px){
  [data-page=home] .room-stepper{padding-top:14px}
  [data-page=home] .room-step-name{font-size:18px}
  /* Icon, text, then the link under the text, instead of three squeezed columns. */
  [data-page=home] .guide-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 18px;align-items:start}
  [data-page=home] .guide-note>div{flex:none}
  [data-page=home] .guide-note>.text-link{grid-column:2;margin-left:0;justify-self:start}
}
@media(max-width:800px){
  [data-page=home] .room-stepper{grid-column:1/-1;margin-top:20px}
  [data-page=home] .room-panel-copy>.room-stepper{display:none}
  [data-page=home] .room-panel-copy>.text-link{margin-bottom:0}
  [data-page=home] .room-stepper-end{display:grid;margin-top:18px;padding-top:12px}
  [data-page=home] .room-related[data-count="2"]>.photo-button{aspect-ratio:1.5}
}
@media(max-width:600px){
  [data-page=home] .room-tabs>button{min-height:52px;font-size:10px}
  [data-page=home] .room-tabs>button>span{font-size:13px}
  [data-page=home] .room-panel-copy>p:not(.eyebrow){font-size:15px}
  [data-page=home] .room-panel-copy .check-list{font-size:14px}
  [data-page=home] .room-panel-copy>.text-link{font-size:14px}
  [data-page=home] .room-stepper-end{margin-top:14px;gap:12px}
  [data-page=home] .room-step-name{font-size:17px}
  [data-page=home] .room-related .photo-caption{font-size:11px;padding:24px 10px 9px}
  [data-page=home] .room-related[data-count="2"]>.photo-button{aspect-ratio:1.13}
  [data-page=home] .guide-note{gap:10px 14px;padding-top:24px}
  [data-page=home] .guide-note strong{font-size:14px}
  [data-page=home] .guide-note p{font-size:14px}
}

/* ---------- Gallery ---------- */
[data-page=gallery] .photo-total span{font-size:12px;line-height:1.5}
[data-page=gallery] .gallery-intro .page-intro-aside>p{font-size:15px}
/* Filter bar stays reachable under the header while browsing (top offset kept in sync by polish-rooms.js). */
[data-page=gallery] .gallery-controls{position:sticky;top:var(--rooms-sticky-top,var(--header));z-index:30;background:var(--paper);padding-block:10px;transition:box-shadow .25s}
[data-page=gallery] .gallery-controls.is-stuck{box-shadow:0 12px 20px -18px rgba(20,41,31,.45);border-top-color:transparent}
[data-page=gallery] .gallery-filters{position:relative;gap:6px}
[data-page=gallery] .gallery-filters>button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px;border:1px solid var(--line);font-size:13px;color:var(--ink);transition:background .2s,border-color .2s,color .2s}
[data-page=gallery] .gallery-filters>button>span{margin:0;font-size:11px;opacity:1;color:var(--muted);font-variant-numeric:tabular-nums}
[data-page=gallery] .gallery-filters>button:hover:not([aria-pressed=true]){background:var(--soft);border-color:#c9cbbd}
[data-page=gallery] .gallery-filters>button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:var(--paper)}
[data-page=gallery] .gallery-filters>button[aria-pressed=true]>span{color:var(--gold)}
[data-page=gallery] .gallery-filters>button:focus-visible{outline-offset:2px}
[data-page=gallery] .gallery-count{font-size:12px;color:var(--muted)}
[data-page=gallery] .gallery-card[hidden]{display:none}
[data-page=gallery] .gallery-card{min-width:0}
[data-page=gallery] .gallery-card figcaption{cursor:pointer}
[data-page=gallery] .gallery-card figcaption>span{font-size:11px;font-variant-numeric:tabular-nums}
[data-page=gallery] .gallery-card figcaption>h2{transition:color .2s}
[data-page=gallery] .gallery-card:hover figcaption>h2{color:var(--gold-ink)}
[data-page=gallery] .gallery-card:hover figcaption>.icon{color:var(--ink)}
[data-page=gallery] .gallery-note p{font-size:14px;line-height:1.75}
[data-page=gallery] .gallery-note>.text-link{font-size:13px}
/* Editorial rhythm (row sizes set in the template and recomputed by site.js after filtering):
   a row of two wide photographs, then a row of three. */
@media(min-width:1001px){
  [data-page=gallery] .gallery-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 22px}
  [data-page=gallery] .gallery-card{grid-column:span 2}
  [data-page=gallery] .gallery-card[data-d="2"]{grid-column:span 3}
  [data-page=gallery] .gallery-card[data-d="1"]{grid-column:2/span 4}
  [data-page=gallery] .gallery-card .photo-button{aspect-ratio:1.5}
  [data-page=gallery] .gallery-card[data-d="2"] figcaption>h2{font-size:19px}
}
@media(max-width:1250px){
  /* Hidden visually, still announced when a filter changes the count. */
  [data-page=gallery] .gallery-count{display:block;position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  [data-page=gallery] .gallery-filters>button{font-size:12.5px;padding:0 13px}
}
/* Tablet: an even two-column grid. Phone: one full-width photograph, then a pair. Filters become one swipeable row. */
@media(max-width:1000px){
  [data-page=gallery] .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  [data-page=gallery] .gallery-card{grid-column:span 1}
  [data-page=gallery] .gallery-card .photo-button{aspect-ratio:1.5}
  [data-page=gallery] .gallery-controls{display:block;margin-bottom:24px;padding-block:8px}
  [data-page=gallery] .gallery-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--edge)*-1);padding-inline:var(--edge);scroll-padding-inline:var(--edge);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--edge),#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 var(--edge),#000 calc(100% - 40px),transparent)}
  [data-page=gallery] .gallery-filters::-webkit-scrollbar{display:none}
  [data-page=gallery] .gallery-filters>button{flex:0 0 auto}
  [data-page=gallery] .gallery-filters>button:last-child{margin-right:24px}
}
@media(max-width:600px){
  [data-page=gallery] .gallery-grid{gap:24px 12px}
  [data-page=gallery] .gallery-card[data-m="1"]{grid-column:1/-1}
  [data-page=gallery] .gallery-card[data-m="2"] .photo-button{aspect-ratio:1.28}
  [data-page=gallery] .gallery-card figcaption{gap:9px;padding-top:10px;align-items:baseline}
  [data-page=gallery] .gallery-card figcaption>h2{font-size:19px}
  [data-page=gallery] .gallery-card[data-m="2"] figcaption>h2{font-size:15px;line-height:1.35}
  [data-page=gallery] .gallery-card[data-m="2"] figcaption>.icon{display:none}
  [data-page=gallery] .gallery-card figcaption>span{font-size:10px}
  [data-page=gallery] .gallery-filters>button{font-size:13px;padding:0 14px}
  [data-page=gallery] .gallery-note p{font-size:14px}
}

/* ---------- Photo viewer (all pages) ---------- */
/* Full-bleed, like a dedicated photo view; the page stays dimmed behind any browser chrome. */
.photo-dialog{width:100%;height:100dvh;max-width:none;max-height:none;margin:0;inset:0;border:0;background:#0f2118}
.photo-dialog::backdrop{background:#0f2118}
.viewer-toolbar{position:relative;padding:14px 24px 14px 28px;gap:24px}
.viewer-toolbar>div:first-child{min-width:0}
.viewer-toolbar .eyebrow{font-size:10.5px;letter-spacing:.16em;margin-bottom:4px}
.viewer-toolbar h2{font-size:24px;line-height:1.25}
.viewer-tools{gap:8px;flex-shrink:0}
.viewer-tools .icon-button{width:46px;height:46px;transition:background .2s,border-color .2s}
.viewer-tools .icon-button:hover{border-color:#ffffff55}
.photo-dialog :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Loading: a thin moving line under the toolbar, and the outgoing photo dims only if the wait is noticeable. */
.photo-dialog.is-loading .viewer-toolbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:rooms-loading 1.1s linear infinite}
@keyframes rooms-loading{from{background-position:-40% 0}to{background-position:140% 0}}
.viewer-stage{padding:16px 88px 0;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
.viewer-stage>img{transition:opacity .2s,transform .28s cubic-bezier(.2,.7,.2,1);-webkit-user-drag:none}
.photo-dialog.is-loading .viewer-stage>img{opacity:.35;transition:opacity .25s .15s}
.photo-dialog.is-dragging .viewer-stage>img{transition:none}
.photo-dialog.is-dragging .viewer-stage{cursor:grabbing}
.viewer-arrow{width:52px;height:52px;background:#16301fcc;transition:background .2s,border-color .2s}
.viewer-arrow:hover{background:#2a4737;border-color:#ffffff55}
.viewer-arrow.previous{left:18px}
.viewer-arrow.next{right:18px}
.photo-dialog.is-single .viewer-arrow{display:none}
.viewer-caption{align-items:baseline;gap:22px;padding:14px 28px 12px;font-size:12px}
.viewer-caption>span:first-child{font-size:14px;letter-spacing:.04em;flex-shrink:0}
.viewer-description{margin:0;flex:1;min-width:0;font-size:14px;line-height:1.5;color:#d3dcd1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.viewer-caption>span:last-child{flex-shrink:0;font-size:11px;color:#9fb2a0}
.viewer-thumbnails{gap:8px;padding:4px 28px 18px;justify-content:safe center;scroll-padding-inline:28px}
.viewer-thumbnail{flex:0 0 84px;width:84px;height:56px;opacity:.5;transition:opacity .2s,border-color .2s}
.viewer-thumbnail:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;opacity:1}
.viewer-thumbnail[aria-current=true]{opacity:1}
.viewer-announce{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.viewer-feedback{position:absolute;z-index:4;left:50%;top:88px;transform:translateX(-50%);margin:0;padding:11px 18px;background:var(--paper);color:var(--ink);border:1px solid var(--gold);font-size:13px;box-shadow:0 10px 30px #0006;white-space:nowrap}
.viewer-feedback[hidden]{display:none}
/* Hints about keys only make sense with a keyboard and a fine pointer. */
@media(pointer:coarse){.viewer-caption>span:last-child{display:none}}

@media(max-width:800px){
  .photo-dialog{width:100%;height:100dvh}
  .viewer-toolbar{padding:12px 16px 12px 20px}
  .viewer-toolbar h2{font-size:20px}
  .viewer-tools .icon-button{width:44px;height:44px}
  .viewer-stage{padding:12px 70px 0}
  .viewer-arrow{width:48px;height:52px}
  .viewer-arrow.previous{left:10px}
  .viewer-arrow.next{right:10px}
  .viewer-caption{padding:12px 20px 10px}
  .viewer-caption>span:last-child{max-width:none;font-size:11px}
  .viewer-thumbnails{padding:4px 20px 16px}
  .viewer-thumbnail{flex-basis:72px;width:72px;height:50px}
}
/* Phones: the photograph gets the full width; previous, position and next sit together at thumb height. */
@media(max-width:600px){
  .photo-dialog[open]{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"bar bar bar" "photo photo photo" "text text text" "prev count next" "thumbs thumbs thumbs"}
  .viewer-toolbar{grid-area:bar;padding:10px 12px 10px 18px;gap:12px;align-items:flex-start}
  .viewer-toolbar .eyebrow{font-size:10px;margin-bottom:3px}
  .viewer-toolbar h2{font-size:18px;max-width:none}
  .viewer-tools{gap:6px}
  .viewer-tools .icon-button{width:44px;height:44px}
  .viewer-tools .icon{width:18px;height:18px}
  .viewer-stage,.viewer-caption{display:contents}
  .viewer-stage>img{grid-area:photo;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;padding-top:10px;touch-action:pan-y pinch-zoom}
  .viewer-description{grid-area:text;padding:12px 18px 2px;font-size:14px}
  .viewer-caption>span:last-child{display:none}
  .viewer-caption>span:first-child{grid-area:count;align-self:center;justify-self:center;font-size:15px}
  .viewer-arrow{position:static;transform:none;width:48px;height:48px;align-self:center;justify-self:center;background:transparent}
  .viewer-arrow.previous{grid-area:prev}
  .viewer-arrow.next{grid-area:next}
  .viewer-arrow.previous .icon{transform:rotate(180deg)}
  .photo-dialog.is-single .viewer-arrow{display:grid;visibility:hidden}
  .viewer-thumbnails{grid-area:thumbs;padding:6px 14px calc(14px + env(safe-area-inset-bottom));gap:7px;scroll-padding-inline:14px}
  .viewer-thumbnail{flex-basis:64px;width:64px;height:44px}
  .viewer-feedback{top:74px;white-space:normal;max-width:calc(100% - 32px);text-align:center}
}
/* Phones turned sideways: give the height to the photograph. */
@media(max-height:500px) and (orientation:landscape){
  .viewer-toolbar{padding:6px 12px 6px 18px}
  .viewer-toolbar .eyebrow{display:none}
  .viewer-toolbar h2{font-size:17px}
  .viewer-tools .icon-button{width:44px;height:44px}
  .viewer-stage{padding:6px 70px 0}
  .viewer-description,.viewer-thumbnails,.viewer-caption>span:last-child{display:none}
  .viewer-caption{padding:6px 18px 8px}
}
@media(prefers-reduced-motion:reduce){
  .rooms-fade{opacity:1}
}