/* The photograph is the canvas. Controls live outside its composition. */
:root { --gallery-black:#080909; --gallery-white:#f5f5f2; --gallery-muted:#b6c2bf; --gallery-line:#ffffff26; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.journey { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:var(--gallery-black); color:var(--gallery-white); overflow:auto; }
.journey[open] { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(160px,1fr) auto; }
.journey::backdrop { background:var(--gallery-black); }
.journey button { color:inherit; font:inherit; }
.journey-header { display:flex; align-items:center; gap:24px; padding:20px 32px; }
.journey-brand { font-size:22px; font-weight:750; letter-spacing:-.07em; justify-self:start; }
.journey-header h2 { flex:1; min-width:0; margin:0; font-size:13px; font-weight:400; color:var(--gallery-muted); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.journey-button { background:transparent; border:1px solid var(--gallery-line); border-radius:30px; padding:10px 17px; font-size:12px!important; }
.journey-stage { position:relative; min-height:160px; margin:0 32px; display:grid; place-items:center; overflow:hidden; }
.journey-stage > img { width:100%; height:100%; min-height:0; position:absolute; inset:0; object-fit:contain; animation:frame-arrive .55s ease-out; }
.journey-stage > img[hidden] { display:none; }
.journey-message { max-width:460px; text-align:center; padding:24px; color:var(--gallery-muted); line-height:1.8; font-size:15px; }
.frame-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:1px solid #ffffff55; border-radius:50%; background:#080909c9; font-size:20px!important; backdrop-filter:blur(12px); }
.frame-arrow.previous { left:12px; }.frame-arrow.next { right:12px; }
.frame-arrow:disabled { opacity:.25; cursor:default; }
.journey-footer { padding:14px 32px max(16px,env(safe-area-inset-bottom)); width:min(1040px,100%); margin:0 auto; }
.frame-details { display:flex; justify-content:space-between; gap:20px; font-size:11px; color:var(--gallery-muted); margin-bottom:12px; }
.journey-frames { display:flex; gap:8px; overflow-x:auto; padding:3px; scrollbar-width:thin; justify-content:safe center; }
.journey-frames:empty { display:none; }
.journey-frames button { flex:0 0 64px; height:43px; padding:0; border:1px solid transparent; background:transparent; opacity:.5; transition:opacity .2s; }
.journey-frames button[aria-pressed=true] { opacity:1; outline:1px solid #e5f0ed; outline-offset:2px; }
.journey-frames button:hover { opacity:1; }
.journey-frames img { width:100%; height:100%; object-fit:cover; display:block; }
.journey-reply { font-size:13px; line-height:1.65; color:var(--gallery-muted); margin:13px auto; max-width:720px; max-height:70px; overflow:auto; text-align:center; }
.journey-form { display:flex; align-items:center; gap:12px; width:min(720px,100%); margin:auto; border-bottom:1px solid #ffffff70; }
.journey-form input { flex:1; min-width:0; padding:14px 0; border:0; background:transparent; color:white; font-size:15px; }
.journey-form input::placeholder { color:#9ca9a5; }
.journey-form button { flex-shrink:0; background:transparent; border:0; padding:14px 4px 14px 16px; font-size:13px; }
.journey-bottom { display:flex; justify-content:space-between; gap:16px; font-size:10px; color:#a5b1ad; padding-top:14px; }
.journey-bottom a { color:#e5f0ed; }
@keyframes frame-arrive { from { opacity:0; } to { opacity:1; } }
@media(max-width:760px) {
  .journey-header { padding:14px 16px; gap:14px; }.journey-brand { font-size:19px; }
  .journey-header h2 { font-size:12px; }.journey-stage { margin:0; }
  .journey-footer { padding:12px 18px max(16px,env(safe-area-inset-bottom)); }
  .journey-bottom { font-size:9px; }.journey-bottom span { max-width:190px; }
  .journey-reply { max-height:64px; font-size:12px; }.frame-arrow { width:38px; height:38px; }
}
@media(max-height:600px) and (min-width:761px) {
  .journey-header { padding:10px 24px; }.journey-footer { padding-top:6px; }
  .journey-frames button { height:30px; flex-basis:45px; }.journey-bottom { display:none; }
  .journey-reply { margin:7px auto; max-height:40px; }
}
@media(prefers-reduced-motion:reduce) { .journey-stage > img { animation:none; }.journey-frames button { transition:none; } }
.journey.is-focused { grid-template-rows:minmax(160px,1fr); }
.journey.is-focused .journey-header { position:absolute; inset:0 0 auto; justify-content:flex-end; z-index:2; pointer-events:none; }
.journey.is-focused .journey-header button { pointer-events:auto; background:#080909c9; }
.journey.is-focused .journey-brand,.journey.is-focused .journey-header h2,.journey.is-focused .journey-footer { display:none; }
.journey.is-focused .journey-stage { grid-row:1; margin:0; }
@media(max-width:480px) { .journey-header { gap:8px; }.journey-button { padding:9px 11px; font-size:11px!important; } }

.journey > * { min-width:0; }
.journey-header button { flex-shrink:0; }
/* A personal shelf of frames, using the same gallery rather than a second viewer. */
.collection-link span, #collectionCount { font-size:10px; margin-left:5px; color:#b8ccc6; }
.frame-details { align-items:center; }
.frame-details > :first-child { flex:1; }
.save-frame { border:0; background:transparent; padding:5px 10px; color:#d4ded9!important; font-size:12px!important; }
.save-frame[aria-pressed=true] { color:#e2f3d7!important; }
.save-frame:disabled { visibility:hidden; }
.collection-status { position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:5; max-width:calc(100% - 32px); width:max-content; margin:0 0 12px; padding:10px 16px; background:#222c27; color:#eef5ee; border:1px solid #ffffff29; border-radius:8px; font-size:12px; line-height:1.5; pointer-events:none; }
.collection-status:empty { display:none; }
.collection-panel { min-height:0; overflow-y:auto; padding:30px max(32px,calc((100vw - 1320px)/2)) 70px; }
.collection-panel[hidden] { display:none; }
.collection-intro { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:48px; }
.collection-kicker { color:#afc0b8; font-size:12px; margin:0 0 15px; }
.collection-intro h3 { font-family:Georgia,serif; font-size:clamp(44px,6vw,86px); font-weight:400; letter-spacing:-.055em; line-height:1; margin:0; }
.collection-intro > p { font-size:12px; color:#acb9b2; line-height:1.7; max-width:240px; }
.collection-grid { columns:3; column-gap:24px; }
.collection-card { break-inside:avoid; margin-bottom:28px; }
.collection-photo { display:block; width:100%; min-height:110px; border:0; padding:0; background:#151c18; color:#c8d3cc; }
.collection-photo img { display:block; width:100%; height:auto; }
.collection-card-details { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:12px; font-size:11px; color:#adbbb3; }
.collection-card-details button { background:transparent; border:0; padding:7px 0 7px 12px; font-size:11px; color:#c0cdc5; }
.collection-empty { min-height:45vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.collection-empty[hidden] { display:none; }
.collection-empty p { font-family:Georgia,serif; font-size:clamp(30px,4vw,48px); margin:0 0 20px; letter-spacing:-.035em; }
.collection-empty span { color:#a5b6ac; font-size:14px; line-height:1.8; max-width:330px; }
.collection-empty button { margin-top:28px; }
.journey.is-collection { grid-template-rows:auto minmax(0,1fr); }
.journey.is-collection .journey-stage,.journey.is-collection .journey-footer,.journey.is-collection #focusJourney,.journey.is-collection #openCollection { display:none; }
@media(max-width:760px) {
  .collection-panel { padding:25px 18px 70px; }
  .collection-intro { display:block; margin-bottom:30px; }
  .collection-intro > p { margin:20px 0 0; }
  .collection-grid { columns:2; column-gap:12px; }
  .collection-card { margin-bottom:18px; }
  .collection-card-details span { display:none; }
  .collection-card-details { justify-content:flex-end; padding-top:2px; }
  .journey-header { flex-wrap:wrap; }
  .journey-header h2 { flex-basis:calc(100% - 120px); }
  .journey-header .journey-button { padding:9px 11px; }
  .journey-header #closeJourney { margin-left:auto; }
  .nav .logo span { display:none; }
  .nav .links { gap:8px; }
  .nav .outline { padding:10px 12px; font-size:11px; }
}
@media(max-width:760px) {
  .journey-header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px 8px; }
  .journey-brand { grid-column:1; grid-row:1; }
  .journey-header h2 { grid-column:2; grid-row:1; max-width:130px; }
  .journey-header #closeJourney { grid-column:3; grid-row:1; margin-left:0; }
  .journey-header #returnJourney { grid-column:1; grid-row:2; justify-self:start; }
  .journey-header #openCollection { grid-column:2; grid-row:2; }
  .journey-header #focusJourney { grid-column:3; grid-row:2; }
  .journey-header .journey-button { font-size:10px!important; padding:9px 8px; }
  .journey.is-focused .journey-header { display:flex; }
}

/* Search becomes a contact sheet; the single-frame stage keeps the full composition. */
.gallery-panel { min-height:0; overflow-y:auto; scrollbar-gutter:stable; padding:22px 32px 40px; overscroll-behavior:contain; }
.gallery-panel[hidden] { display:none; }
.gallery-intro { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:4px 0 28px; }
.gallery-intro h3 { margin:0; font-family:Georgia,serif; font-size:clamp(32px,4.3vw,58px); font-weight:400; letter-spacing:-.045em; line-height:1.12; }
.gallery-intro p { margin:12px 0 0; color:var(--gallery-muted); font-size:12px; line-height:1.7; }
.gallery-density { display:flex; flex-shrink:0; gap:4px; border:1px solid var(--gallery-line); border-radius:24px; padding:4px; }
.gallery-density button { border:0; border-radius:20px; background:transparent; color:var(--gallery-muted); padding:9px 15px; font-size:11px; }
.gallery-density button[aria-pressed=true] { background:#f5f5f2; color:#080909; }
/* Justified rows: every frame in a row shares a height, widths follow each photograph's shape, ranking reads left to right. */
.gallery-grid { --row:250px; display:flex; flex-wrap:wrap; gap:6px; }
.gallery-grid.is-closer { --row:400px; }
.gallery-grid::after { content:''; flex-grow:1000000; }
.gallery-card { --r:1.5; flex-grow:calc(var(--r) * 100); flex-shrink:1; flex-basis:calc(var(--r) * var(--row)); min-width:0; margin:0; }
.gallery-photo { position:relative; display:block; width:100%; aspect-ratio:var(--r); padding:0; border:0; background:#18201e; overflow:hidden; text-align:left; cursor:pointer; }
.gallery-photo img { display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s; }
.gallery-photo.is-loaded img { opacity:1; }
.gallery-filters { display:flex; flex-wrap:wrap; gap:8px; margin:-12px 0 24px; }
.gallery-filters[hidden] { display:none; }
.gallery-filters button { display:inline-block; border:1px solid var(--gallery-line); border-radius:999px; background:transparent; padding:8px 14px; font-size:12px; color:var(--gallery-muted); transition:border-color .2s,color .2s,background .2s; }
.gallery-filters button::first-letter { text-transform:uppercase; }
.gallery-filters button:hover { border-color:#ffffff70; color:var(--gallery-white); }
.gallery-filters button[aria-pressed=true] { background:var(--gallery-white); border-color:var(--gallery-white); color:var(--gallery-black); }
.gallery-filters .gallery-filters-clear { border-color:transparent; text-decoration:underline; text-underline-offset:3px; }
.gallery-photo.is-unavailable { padding:40px 20px; font-size:12px; line-height:1.7; }
.gallery-photo-caption { position:absolute; bottom:0; left:0; right:0; padding:42px 18px 16px; background:linear-gradient(transparent,#000b); color:#fff; font-size:12px; line-height:1.5; opacity:0; transition:opacity .18s; pointer-events:none; }
.gallery-photo:hover .gallery-photo-caption,.gallery-photo:focus-visible .gallery-photo-caption { opacity:1; }
.journey :is(button,input):focus-visible { outline:2px solid #e5f0ed; outline-offset:4px; }
.journey.is-gallery { grid-template-rows:auto minmax(0,1fr) auto; }
.journey.is-gallery .journey-stage,.journey.is-gallery .frame-details,.journey.is-gallery .journey-frames,.journey.is-gallery #focusJourney { display:none; }
.journey.is-gallery .journey-footer { border-top:1px solid var(--gallery-line); width:100%; padding-top:4px; }
.journey.is-gallery .journey-reply { max-height:48px; margin:10px auto 3px; }
.journey.is-gallery .journey-bottom { display:none; }
.journey.is-focused #galleryToggle { display:none; }
@media(min-width:1700px) { .gallery-grid { --row:300px; }.gallery-grid.is-closer { --row:480px; } }
@media(max-width:1000px) and (min-width:761px) { .journey-header { gap:12px; padding-inline:24px; }.journey-header .journey-button { padding:9px 12px; } }
@media(max-width:760px) {
  .gallery-panel { padding:16px 16px 28px; }
  .gallery-intro { align-items:start; margin-bottom:22px; }
  .gallery-intro p { max-width:220px; font-size:11px; }
  .gallery-density { flex-direction:column; border-radius:18px; }
  .gallery-density button { padding:7px 12px; }
  .gallery-grid { --row:150px; gap:4px; }
  .gallery-grid.is-closer { --row:260px; }
  .gallery-filters { margin:-8px 0 18px; gap:6px; }.gallery-filters button { padding:7px 12px; font-size:11px; }
  .journey-header #galleryToggle { grid-column:1; grid-row:2; justify-self:start; }
  .journey-header:has(#returnJourney:not([hidden])) #galleryToggle { grid-column:1; grid-row:3; }
  .journey.is-gallery .journey-footer { padding:4px 18px max(12px,env(safe-area-inset-bottom)); }
}
@media(max-width:480px) { .gallery-density { display:none; } }
@media(prefers-reduced-motion:reduce) { .gallery-photo-caption,.gallery-photo img,.gallery-filters button { transition:none; } }

.gallery-intro > :first-child{flex:1}.begin-visual-journey{align-self:center;background:#e1e9f0;color:#101820!important;border-color:#e1e9f0;white-space:nowrap}.begin-visual-journey[hidden]{display:none}@media(max-width:760px){.gallery-intro{flex-wrap:wrap}.begin-visual-journey{margin-left:auto}}

.journey-service-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:4px 0 12px}.journey-service-actions[hidden]{display:none}

/* The archive is an intentional destination, outside the homepage invitation. */
.browse-archive{display:inline-block;width:fit-content;margin:16px auto 0;padding:8px 0;border:0;background:transparent;color:#b6c2bf;font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#ffffff45}
.browse-archive:hover{color:#f5f5f2;text-decoration-color:currentColor}
.journey-bottom .browse-archive{margin:0;padding:0;font-size:10px;flex-shrink:0}
.archive-browser{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--gallery-black);color:var(--gallery-white);overflow:auto}
.archive-browser::backdrop{background:var(--gallery-black)}
.archive-browser-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;background:#080909f5}
.archive-browser .wall{padding-top:20px}
@media(max-width:760px){.archive-browser-header{padding:14px 0}.journey-bottom{flex-wrap:wrap}.journey-bottom .browse-archive{font-size:10px}}