/* The collection is a gallery of ordinary moments. */
.offered-collection { padding:clamp(40px,5vw,68px) 0 var(--space-16); }
.collection-welcome { display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); margin-bottom:var(--space-8); }
.collection-welcome h1 { font:400 clamp(38px,4.8vw,64px)/1.12 var(--serif); letter-spacing:-.035em; }
.collection-welcome p:not(.eyebrow) { color:var(--muted); font:22px/1.55 var(--serif); margin-top:var(--space-4); }
.collection-welcome #arrival-actions { flex:none; }
.collection-entrances { display:flex; justify-content:space-between; align-items:center; gap:var(--space-6); margin-bottom:var(--space-10); padding-bottom:var(--space-5); border-bottom:1px solid var(--rule); }
.collection-entrances > div { display:flex; align-items:center; gap:var(--space-4); }
.collection-entrances span { color:var(--muted); font-size:var(--type-label); }
.collection-entrances .text-button { color:var(--action); }
.collection-offers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:var(--space-12) var(--space-8); }
.occasion-card { min-width:0; display:flex; flex-direction:column; scroll-margin-top:24px; }
.occasion-card > img { width:100%; aspect-ratio:16 / 10; object-fit:cover; display:block; border-radius:var(--radius); background:var(--paper-deep); box-shadow:0 0 0 1px #26374712; }
.occasion-card-copy { display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:var(--space-6) 2px 0; }
.occasion-card .eyebrow { font-size:11px; margin-bottom:var(--space-3); }
.occasion-card h2 { font:400 32px/1.18 var(--serif); letter-spacing:-.025em; text-wrap:initial; }
.occasion-card-copy > p:not(.eyebrow) { color:var(--muted); font:18px/1.6 var(--serif); margin:var(--space-3) 0 var(--space-6); max-width:35ch; }
.occasion-card .button { margin-top:auto; padding-inline:var(--space-5); gap:var(--space-8); }
.occasion-card .button:hover { background:var(--wash); border-color:var(--action); }
.occasion-card .button.primary:hover { background:var(--action-hover); }
.starting-coverage { margin-top:26px; }
.curated-stage { overflow:hidden; border-radius:var(--radius-large); aspect-ratio:3 / 2; background:var(--paper-deep); }
.curated-stage img { width:100%; height:100%; object-fit:cover; display:block; transition:object-position 1.6s ease,transform 1.6s ease; }
@media(max-width:1000px) {
  .collection-offers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-10) var(--space-6); }
}
@media(max-width:650px) {
  .offered-collection { padding:var(--space-6) 0 var(--space-12); }
  .collection-welcome { display:block; margin-bottom:var(--space-6); }
  .collection-welcome h1 { font-size:clamp(38px,8vw,48px); }
  .collection-welcome p:not(.eyebrow) { font-size:20px; margin-top:var(--space-3); max-width:28ch; }
  .collection-welcome #arrival-actions { margin-top:16px; }
  .collection-entrances { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-1) var(--space-6); margin-bottom:var(--space-6); padding-bottom:var(--space-3); }
  .collection-entrances > div { flex-wrap:wrap; gap:0 var(--space-3); }
  .collection-offers { grid-template-columns:1fr; gap:var(--space-10); }
  .occasion-card-copy { padding-top:var(--space-5); }
  .occasion-card h2 { font-size:30px; }
  .occasion-card-copy > p:not(.eyebrow) { margin:var(--space-3) 0 var(--space-5); max-width:38ch; }
}
/* Painting, reading and controls remain one spread throughout a visit. */
body[data-route="visit"] .site-footer { display:none; }
body[data-route="visit"][data-phase="living"] { height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
body[data-route="visit"][data-phase="living"] > :is(.site-header,.site-footer) { display:none; }
body[data-route="visit"][data-phase="living"] main { width:100%; max-width:none; min-height:0; flex:1; padding:0; display:flex; }
.scene-overlay { display:none; }
.encounter[data-phase="living"] { flex:1; min-height:0; display:flex; flex-direction:column; width:100%; }
.encounter[data-phase="living"] .occasion-bar { display:none; }
.encounter:not([data-phase="living"]) .scene-art { display:none; }
.encounter[data-phase="living"] .scene-art { position:relative; flex:1 1 0; min-height:40%; overflow:hidden; background:var(--paper-deep); }
.encounter[data-phase="living"] .scene-art > :is(.stage,.curated-stage,.personal-stage) { position:absolute; inset:0; width:100%; height:100%; min-height:0; aspect-ratio:auto!important; border-radius:0; box-shadow:none; }
.encounter[data-phase="living"] .scene-art > :is(.curated-stage,.personal-stage) img { width:100%; height:100%; object-fit:cover; }
.encounter[data-phase="living"] .personal-stage img { object-position:50% 45%; }
.encounter[data-phase="living"] .p-stage { container-type:size; }
.encounter[data-phase="living"] .p-stage-world { width:max(100cqw,calc(100cqh / var(--frame-ratio,.5625))); left:50%; top:calc(var(--focus-y,50) * 1%)!important; translate:-50% calc(var(--focus-y,50) * -1%); margin-top:0; container-type:inline-size; }
.encounter[data-phase="living"] .p-stage-caption { display:none; }
.encounter[data-phase="living"] .scene-overlay { display:flex; align-items:center; gap:18px; position:absolute; inset:0 0 auto; z-index:3; padding:max(16px,env(safe-area-inset-top)) var(--gutter) var(--space-8); color:#f2f0e9; background:linear-gradient(#263747b8,#26374747 70%,transparent); }
.scene-overlay button { flex:none; min-height:var(--control-height); padding:10px 16px; border:1px solid #f2f0e94d; border-radius:var(--radius); background:#26374726; color:inherit; font:var(--type-label)/1.5 var(--sans); }
.scene-overlay button:hover,.scene-overlay button:focus-visible { background:#26374799; border-color:#f2f0e9b3; }
.scene-overlay button:focus-visible { outline:2px solid #f2f0e9; outline-offset:4px; }
.scene-overlay > span { min-width:0; overflow-wrap:anywhere; font:21px/1.3 var(--serif); text-shadow:0 1px 5px #263747; }
.encounter[data-phase="living"] .encounter-body { display:flex; flex-direction:column; flex:0 1 auto; min-height:0; max-height:60%; width:min(1080px,100% - 2 * var(--gutter)); margin:0 auto; padding:var(--space-6) 0 max(24px,env(safe-area-inset-bottom)); }
.scene-copy { position:relative; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--rule-strong) transparent; overflow-wrap:anywhere; padding:2px 6px; margin:0 -6px; }
.scene-copy:focus-visible { outline:2px solid var(--action); outline-offset:-2px; }
.scene-copy .reading { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:center; gap:var(--space-12); }
.scene-copy .reading > .passage { grid-column:1; grid-row:1; }
.scene-copy .reading > .inner { grid-column:2; grid-row:1; }
.scene-copy .reading > .previous-voice { grid-column:1 / -1; grid-row:2; }
.scene-copy .passage p:last-child,.scene-copy .inner p:last-child { margin-bottom:0; }
.scene-copy .inner { margin:0; }
.scene-copy .seeing-note { margin-bottom:16px; }
.scene-copy .action-prompt { margin:18px 0 0; }
.scene-copy .own { margin:12px 0 0; }
.scene-controls { flex:none; margin-top:auto; }
.scene-controls .story-nav { margin-top:22px; padding-top:14px; }
.scene-controls .story-nav :is(.button,.text-button) { min-width:76px; }
.scene-copy .choices { margin-top:18px; }
.choices-jump { gap:12px; padding:10px 14px; }
.scene-controls .emotion-submit { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:10px 0 0; }
.scene-controls .emotion-submit :is(.button,.text-button) { min-width:44px; }
.scene-controls .emotion-submit .primary { width:auto; }
/* Feelings keep the whole painting in view and the picker in its own scroll area. */
.encounter[data-phase="living"][data-mode="feelings"] .scene-art { flex:0 0 36%; min-height:0; }
.encounter[data-phase="living"][data-mode="feelings"] .encounter-body { flex:1; max-height:64%; width:min(660px,100% - 2 * var(--gutter)); padding-top:var(--space-6); }
.encounter[data-phase="living"][data-mode="feelings"] .scene-art > :is(.curated-stage,.personal-stage) img { object-fit:contain; object-position:50% 50%!important; transform:none!important; transition:none; }
.encounter[data-mode="feelings"] .scene-controls .emotion-submit { order:1; justify-content:flex-end; margin:0; }
.encounter[data-mode="feelings"] .scene-controls .story-nav { border:0; padding:0; margin:0; }
.encounter[data-mode="feelings"] .scene-controls { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px; padding-top:14px; }
.painting-arriving { opacity:0; }
.painting-arriving.painting-arrived { opacity:1; animation:painting-arrival .7s ease-out; }
@keyframes painting-arrival { from { opacity:0; } to { opacity:1; } }
/* Personal paintings have no editorial camera: keep the whole occasion on wide screens. */
@media(min-width:1001px) and (min-height:501px) {
  .encounter[data-phase="living"]:has(.personal-stage:not([hidden])) { flex-direction:row; }
  .encounter[data-phase="living"]:has(.personal-stage:not([hidden])) .scene-art { flex:0 0 55%; min-height:0; }
  .encounter[data-phase="living"]:has(.personal-stage:not([hidden])) .personal-stage img { object-fit:contain; object-position:50% 50%; }
  .encounter[data-phase="living"]:has(.personal-stage:not([hidden])) .encounter-body { flex:1; width:auto; height:100%; max-height:100%; padding:32px clamp(28px,3.5vw,56px); }
  .encounter:not([data-mode="feelings"]):has(.personal-stage:not([hidden])) .scene-copy { margin-block-start:auto; }
  .encounter:has(.personal-stage:not([hidden])) .scene-copy .reading { display:block; }
  .encounter:has(.personal-stage:not([hidden])) .scene-copy .inner { margin:24px 0 4px; }
  .encounter:has(.personal-stage:not([hidden])) .scene-overlay { color:var(--ink); background:none; }
  .encounter:has(.personal-stage:not([hidden])) .scene-overlay > span { text-shadow:none; }
  .encounter:has(.personal-stage:not([hidden])) .scene-overlay button { border-color:var(--rule-strong); background:var(--surface); }
  .encounter:has(.personal-stage:not([hidden])) .scene-overlay button:is(:hover,:focus-visible) { background:var(--wash); border-color:var(--action); }
  .encounter:has(.personal-stage:not([hidden])) .scene-overlay button:focus-visible { outline-color:var(--action); }
}
@media(max-width:1000px) {
  .encounter[data-phase="living"] .encounter-body { width:calc(100% - 2 * var(--gutter)); padding-top:var(--space-5); }
  .scene-copy .reading { display:block; }
  .scene-copy .inner { margin:18px 0 4px; }
}
@media(max-width:600px) {
  .encounter[data-phase="living"] .scene-art { min-height:34%; }
  .encounter[data-phase="living"] .encounter-body { max-height:66%; width:calc(100% - 2 * var(--gutter)); padding:var(--space-4) 0 max(16px,env(safe-area-inset-bottom)); }
  .encounter[data-phase="living"] .scene-overlay { padding:max(12px,env(safe-area-inset-top)) var(--gutter) var(--space-6); gap:var(--space-3); }
  .encounter[data-phase="living"]:has(.choices) .scene-art { min-height:26%; }
  .encounter[data-phase="living"]:has(.choices) .encounter-body { max-height:74%; }
  .scene-overlay > span { font-size:18px; }
  .scene-overlay button { padding:8px 12px; }
  .scene-copy .inner { margin-top:14px; }
  .scene-copy .own { margin-top:10px; }
  .scene-copy .choices { gap:7px; margin-top:12px; }
  .scene-copy .choice { padding:12px 14px; font-size:18px; }
  .scene-controls .story-nav { margin-top:12px; padding-top:10px; }
  .scene-controls .emotion-submit { gap:12px; }
  .scene-controls .story-nav .progress { gap:5px; }
  .scene-controls .story-nav:has(.progress) { gap:8px; }
  .scene-controls .story-nav .progress { flex:1; min-width:0; }
  .scene-controls .story-nav .progress i { flex:1; width:auto; min-width:3px; }
  .encounter[data-phase="living"][data-mode="feelings"] .scene-art { flex-basis:26%; }
  .encounter[data-phase="living"][data-mode="feelings"] .encounter-body { width:calc(100% - 2 * var(--gutter)); max-height:74%; padding-top:var(--space-4); }
  .encounter[data-mode="feelings"] .scene-controls { gap:8px; }
  .encounter[data-mode="feelings"] .scene-controls .story-nav :is(.button,.text-button) { min-width:60px; }
  .encounter[data-mode="feelings"] .scene-controls .emotion-submit { flex-wrap:nowrap; gap:10px; }
  .encounter[data-mode="feelings"] .scene-controls .emotion-submit .primary { padding-inline:14px; }
}
/* Short portrait viewports include the space left above a phone keyboard. */
@media(max-width:600px) and (max-height:500px) and (max-aspect-ratio:3/2) {
  .encounter[data-phase="living"] .scene-art { min-height:28%; }
  .encounter[data-phase="living"] .encounter-body { max-height:72%; }
  .encounter[data-phase="living"]:has(.choices) .scene-art { min-height:22%; }
  .encounter[data-phase="living"]:has(.choices) .encounter-body { max-height:78%; }
  .encounter[data-phase="living"][data-mode="feelings"] .scene-art { flex-basis:22%; }
  .encounter[data-phase="living"][data-mode="feelings"] .encounter-body { max-height:78%; }
}
@media(max-height:500px) and (min-aspect-ratio:3/2) {
  .encounter[data-phase="living"] { flex-direction:row; }
  .encounter[data-phase="living"] .scene-art,.encounter[data-phase="living"][data-mode="feelings"] .scene-art { flex:0 0 40%; min-height:0; }
  .encounter[data-phase="living"] .encounter-body,.encounter[data-phase="living"][data-mode="feelings"] .encounter-body { flex:1; width:auto; height:100%; max-height:100%; padding:12px max(18px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
  .scene-copy .reading { display:block; }
  .scene-copy .inner { margin-top:10px; }
  .scene-copy .choices { gap:5px; }
  .scene-copy .choice { padding:9px 12px; }
  .scene-controls .story-nav { margin-top:10px; padding-top:6px; }
}
.encounter[data-phase="living"][data-has-art="false"] { flex-direction:column; }
.encounter[data-phase="living"][data-has-art="false"] .scene-art { flex:0 0 68px; }
.encounter[data-phase="living"][data-has-art="false"] .encounter-body { flex:1; width:min(760px,100% - 40px); }
@media(prefers-reduced-motion:reduce) { .curated-stage img,.painting-arriving.painting-arrived { transition:none; animation:none; } }