/* bioQ Stage 3 · page-level layout. Tokens and components come from bioq.css; this file only arranges them into pages. */
html{scroll-behavior:smooth}
body{margin:0}
.pg-skip{position:absolute;left:-999px;top:0;background:var(--bq-ink);color:var(--bq-on-ink);padding:10px 14px;z-index:50}
.pg-skip:focus{left:8px;top:8px}

/* phone menu: the system hides the links below 900 px, so pages add a plain disclosure */
.pg-menu{display:none;position:relative}
.pg-menu summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--bq-ink);font:500 14px/1 var(--bq-sans)}
.pg-menu summary::-webkit-details-marker{display:none}
.pg-menu nav{position:absolute;right:0;top:52px;background:var(--bq-card);border:1px solid var(--bq-ink);padding:8px 16px;display:flex;flex-direction:column;min-width:220px;z-index:30}
.pg-menu nav a{padding:12px 0;border-bottom:1px solid var(--bq-line);color:var(--bq-ink);text-decoration:none}
.pg-menu nav a:last-child{border-bottom:0}
@media (max-width:900px){.pg-menu{display:block}.bq-nav{gap:10px}.bq-nav .bq-plate{padding:8px 10px;letter-spacing:.14em;font-size:11px}}

.pg-crumb{font-family:var(--bq-mono);font-size:var(--bq-cap);letter-spacing:.04em;color:var(--bq-soft);padding:14px var(--bq-gut) 0}
.pg-crumb a{color:var(--bq-soft)}
.pg-pad{padding-inline:var(--bq-gut)}
.pg-band{padding:var(--bq-sec) var(--bq-gut);display:flex;flex-direction:column;gap:clamp(24px,3vw,44px)}
.pg-band--dim{background:var(--bq-plaster-2)}
.pg-band--rule{border-top:1px solid var(--bq-line)}
.pg-band--tight{padding-block:clamp(28px,4vw,56px)}
.pg-note{font-size:var(--bq-small);color:var(--bq-soft);max-width:60ch}
.bq-level__plate::before{background:url(../img/moss.jpg) center/260px}

/* page header for inner pages */
.pg-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;padding:clamp(24px,4vw,56px) var(--bq-gut) clamp(20px,3vw,40px)}
.pg-top .bq-lead{max-width:36em}

/* catalogue */
.pg-filter{display:flex;flex-wrap:wrap;gap:var(--bq-2);align-items:center;padding:0 var(--bq-gut) var(--bq-5)}
.pg-filter .bq-cap{margin-right:8px}
.pg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px) clamp(14px,2vw,28px);padding:0 var(--bq-gut)}
.pg-item{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.pg-item[hidden]{display:none}
.pg-item a.im{display:block;aspect-ratio:1;background:var(--bq-white);overflow:hidden}
.pg-item a.im img{width:100%;height:100%;object-fit:contain;transition:transform var(--bq-slow) var(--bq-ease)}
.pg-item:hover a.im img{transform:scale(1.03)}
.pg-item h3{font:400 20px/1.2 var(--bq-serif);margin:0}
.pg-item h3 a{color:var(--bq-ink);text-decoration:none}
.pg-item p{font-size:15px;line-height:1.4;color:var(--bq-soft)}
.pg-add{position:absolute;top:10px;right:10px;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--bq-ink);background:var(--bq-card);color:var(--bq-ink);font:500 13px/1 var(--bq-sans);cursor:pointer;transition:background var(--bq-med) var(--bq-ease)}
.pg-add[aria-pressed="true"]{background:var(--bq-plate);border-color:var(--bq-brass);color:var(--bq-plate-ink);letter-spacing:.08em}

/* product */
.pg-product{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding:clamp(16px,3vw,36px) var(--bq-gut) var(--bq-sec);align-items:start}
.pg-gallery{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
.pg-gallery .bq-stage{background:var(--bq-white)}
.pg-gallery .bq-stage img{object-fit:contain}
.pg-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pg-thumbs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;border-top:2px solid transparent;padding-top:6px}
.pg-thumbs button img{aspect-ratio:1;object-fit:contain;background:var(--bq-white);width:100%}
.pg-thumbs button span{font-family:var(--bq-mono);font-size:10.5px;letter-spacing:.04em;color:var(--bq-soft);line-height:1.35}
.pg-thumbs button[aria-pressed="true"]{border-top-color:var(--bq-teal)}
.pg-thumbs button[aria-pressed="true"] span{color:var(--bq-ink)}
.pg-thumbs button:focus-visible{outline:2px solid var(--bq-teal-deep);outline-offset:2px}
.pg-info{display:flex;flex-direction:column;gap:22px}
.pg-spec{margin:0;display:grid;grid-template-columns:130px minmax(0,1fr);gap:0;border-top:1px solid var(--bq-line)}
.pg-spec dt,.pg-spec dd{padding:11px 0;border-bottom:1px solid var(--bq-line);margin:0}
.pg-spec dt{font-family:var(--bq-mono);font-size:var(--bq-cap);letter-spacing:.06em;text-transform:uppercase;color:var(--bq-soft);padding-top:14px}
.pg-acc{border-top:1px solid var(--bq-line)}
.pg-acc details{border-bottom:1px solid var(--bq-line)}
.pg-acc summary{cursor:pointer;padding:14px 0;font:400 20px/1.2 var(--bq-serif);list-style:none;display:flex;justify-content:space-between;gap:12px}
.pg-acc summary::after{content:"+";font-family:var(--bq-mono);color:var(--bq-teal-deep)}
.pg-acc details[open] summary::after{content:"–"}
.pg-acc summary::-webkit-details-marker{display:none}
.pg-acc .in{padding:0 0 16px;font-size:16px;line-height:1.55;color:var(--bq-soft);display:flex;flex-direction:column;gap:8px}
.pg-acc ul{margin:0;padding-left:1.1em}

/* two-part text and picture rows */
.pg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.pg-split.top{align-items:start}
.pg-split figure{margin:0;display:flex;flex-direction:column;gap:10px}
.pg-prose{display:flex;flex-direction:column;gap:16px;max-width:40em}
.pg-prose ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:6px}
.pg-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.pg-table th,.pg-table td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--bq-line)}
.pg-table th{font:500 var(--bq-cap)/1.4 var(--bq-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bq-soft)}
.pg-scroll{overflow-x:auto}
.pg-scroll table{min-width:620px}

/* private client page */
.pg-private{background:var(--bq-plate);color:var(--bq-plate-ink);border-bottom:1px solid var(--bq-brass);padding:10px var(--bq-gut);font:500 12px/1.4 var(--bq-sans);letter-spacing:.14em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.pg-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--bq-line)}
.pg-track li{padding:14px 14px 14px 0;border-bottom:1px solid var(--bq-line);display:flex;flex-direction:column;gap:4px;border-top:3px solid transparent;margin-top:-1px}
.pg-track li.done{border-top-color:var(--bq-teal)}
.pg-track li.now{border-top-color:var(--bq-ink)}
.pg-track b{font:400 20px/1.2 var(--bq-serif)}
.pg-track span{font-family:var(--bq-mono);font-size:var(--bq-cap);letter-spacing:.04em;color:var(--bq-soft)}
.pg-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center}
.pg-step figure{margin:0;display:flex;flex-direction:column;gap:10px}
.pg-step figure img{background:var(--bq-white);width:100%}

/* occasions strip */
.pg-occ{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--bq-line)}
.pg-occ a{display:flex;flex-direction:column;gap:4px;padding:18px 18px 18px 0;border-bottom:1px solid var(--bq-line);color:var(--bq-ink);text-decoration:none}
.pg-occ a b{font:400 24px/1.15 var(--bq-serif)}
.pg-occ a span{font-size:15px;color:var(--bq-soft)}
.pg-occ a:hover b{font-style:italic}

@media (max-width:900px){
  .pg-top,.pg-product,.pg-split,.pg-step{grid-template-columns:minmax(0,1fr)}
  .pg-gallery{position:static}
  .pg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-track{grid-template-columns:minmax(0,1fr)}
  .pg-track li{border-top:0;border-left:3px solid transparent;padding-left:12px;margin-top:0}
  .pg-track li.done{border-left-color:var(--bq-teal)}
  .pg-track li.now{border-left-color:var(--bq-ink)}
  .pg-occ{grid-template-columns:minmax(0,1fr)}
  .pg-spec{grid-template-columns:110px minmax(0,1fr)}
}

/* Home 3: the scale is the first screen. The five stops sit on one line across the page; on phones they fall back to the system's stacked rail. */
.pg-h3{padding:clamp(22px,3.4vw,48px) var(--bq-gut) clamp(32px,4.5vw,64px);display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px)}
.pg-h3__top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,5vw,80px);align-items:center}
.pg-h3__txt{display:flex;flex-direction:column;gap:20px}
.pg-h3__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.pg-h3__fig .bq-stage{width:min(100%,50vh,540px);min-width:min(100%,300px);background:var(--bq-white)}
.pg-h3__fig .bq-row{justify-content:center}
.pg-h3__line{display:flex;flex-direction:column;gap:12px}
@media (min-width:901px){
  .pg-line{flex-direction:row;border-top:0;position:relative}
  .pg-line::before{content:"";position:absolute;left:0;right:0;top:8px;height:1px;background:var(--bq-ink)}
  .pg-line li{flex:1;min-width:0}
  .pg-line button{display:flex;flex-direction:column;gap:5px;height:100%;padding:30px 18px 0 0;border-bottom:0;position:relative}
  .pg-line button::before{content:"";position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;box-sizing:border-box;border:1px solid var(--bq-ink);background:var(--bq-plaster);transition:background var(--bq-med) var(--bq-ease),border-color var(--bq-med) var(--bq-ease)}
  .pg-line button:hover::before{background:var(--bq-plate);border-color:var(--bq-brass)}
  .pg-line button[aria-pressed="true"]::before{background:var(--bq-teal-deep);border-color:var(--bq-teal-deep)}
  .pg-line .n{padding-top:0}
  .pg-line .t{font-size:clamp(20px,1.9vw,27px)}
  .pg-line .d{display:block;visibility:hidden;font-size:14.5px}
  .pg-line button[aria-pressed="true"] .d{visibility:visible}
}
@media (max-width:900px){
  .pg-h3__top{grid-template-columns:minmax(0,1fr)}
  .pg-h3__fig .bq-stage{width:100%}
}

/* prototype only: the three versions of Home, one press apart. A strip above the page, not part of the design. */
.pg-switch{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;padding:5px var(--bq-gut);background:var(--bq-ink);border-bottom:1px dashed var(--bq-on-ink-soft);font:500 11.5px/1 var(--bq-mono);letter-spacing:.06em;text-transform:uppercase}
.pg-switch span{color:var(--bq-on-ink-soft);padding:0 8px 0 0}
.pg-switch i{font-style:normal}
.bq .pg-switch a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;color:var(--bq-on-ink);text-decoration:none}
.bq .pg-switch a:hover{background:rgba(238,243,238,.14)}
.bq .pg-switch a[aria-current="page"]{background:var(--bq-plate);color:var(--bq-plate-ink)}
.pg-switch a:focus-visible{outline:2px solid var(--bq-green);outline-offset:2px}
@media (max-width:480px){.pg-switch i{display:none}.bq .pg-switch a{padding:0 9px}}
@media print{.pg-switch{display:none}}

/* the dream pages: Specials and Spaces */
.dr-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(28px,5vw,72px) var(--bq-gut) clamp(40px,6vw,88px);overflow:hidden}
.dr-hero__txt{display:flex;flex-direction:column;gap:22px;position:relative;z-index:2}
.dr-hero__fig{margin:0;display:flex;flex-direction:column;gap:16px;align-items:center;position:relative;z-index:2}
.dr-hero__fig .mo-cycle{width:min(100%,58svh,600px);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.dr-hero__fig figcaption{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.dr-room{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:end}
.dr-room--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.dr-room--flip>figure{order:2}
.dr-room figure,.dr-duo figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.dr-room__im{aspect-ratio:3/2;overflow:hidden}
.dr-duo__im{aspect-ratio:2/3;overflow:hidden}
.dr-room__im img,.dr-duo__im img{width:100%;height:100%;object-fit:cover}
.dr-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,44px)}
.dr-say{display:flex;flex-direction:column;gap:14px;padding-bottom:6px;min-width:0}
.dr-say .bq-t1{font-size:clamp(28px,3vw,44px);font-weight:300;line-height:1.08}
@media (max-width:900px){.dr-hero,.dr-room,.dr-room--flip{grid-template-columns:minmax(0,1fr)}.dr-room--flip>figure{order:0}}