/* Layout: a cross of full screens. Home in the centre, four continuous arms
   (Interior up, Exhibition right, Publication down, Store left).
   Single deliberate look: pure white paper, soft grey letter stacks, one red letter, wood-edged photos. */
:root{
  --paper:#ffffff;
  --soft:#bdbdbd;
  --accent:#e60012;
  --wood:#5a3e2b;
  --rule:#4a4a4a;
  --frame:#2b2b2b;
  --wait:#efeeeb;
  --nav:#c4c4c4;
  --font:'Hanken Grotesk', 'Helvetica Neue', Arial, system-ui, sans-serif;
  color-scheme: light;
}
html,body{height:100%;margin:0;background:var(--paper);overflow:hidden;overscroll-behavior:none}
body{font-family:var(--font);font-weight:300;color:var(--soft);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0;overflow:hidden;background:var(--paper)}
/* going Home from far away: the current page dissolves over Home, Home settles in from a soft zoom */
#ghost{position:fixed;inset:0;overflow:hidden;z-index:4;pointer-events:none}
#ghost .gw{position:absolute;left:0;top:0;transform-origin:0 0}
/* zoom crossfade: the current page shrinks away and fades, Home grows in from small */
#ghost{transform-origin:50% 50%}
#ghost.go{animation:shrinkout 1.7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes shrinkout{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.82)}}
#app{transform-origin:50% 50%}
#app.arrive{animation:growin 2.2s cubic-bezier(.25,.6,.2,1) .35s both}
@keyframes growin{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){#ghost.go,#app.arrive{animation-duration:.01s}}
#world{position:absolute;left:0;top:0;will-change:transform;transform-origin:0 0;--ow:1px}
.scr{position:absolute;overflow:hidden;background:var(--paper);contain:layout paint}
.stage{position:absolute;left:0;top:0;transform-origin:0 0}
.stage>*,.pin>*,.anim>*{position:absolute}
.anim{left:0;top:0;width:100%;height:100%}

/* letter stacks */
.tt{margin:0;display:flex;align-items:flex-start;font-weight:300;line-height:1;color:var(--soft);white-space:nowrap;will-change:transform}
.tt .col{display:flex;flex-direction:column;align-items:center}
.tt .r{color:var(--accent)}
.anim .tt span span{animation:rise 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 70ms + 250ms)}
@keyframes rise{from{opacity:0}to{opacity:1}}
.tt .col>span{display:block;will-change:transform}
#app.drag{cursor:grabbing}
/* overview: the whole maze shrinks into view, every page becomes a tile */
/* overview tiles: each page is a card with its own frame, inset by a small gutter, so frames never overlap */
body.ov .scr{cursor:pointer}
/* overview: a soft off-white canvas, every page a clean white card with a thin gutter, no borders */
#app{transition:background-color .7s ease}
body.ov #app{background:#efede8}
body.ov .scr{clip-path:inset(calc(var(--ow) * 3.5))}
.scr::after{content:"";position:absolute;inset:calc(var(--ow) * 3.5);border:calc(var(--ow) * 1.6) solid transparent;pointer-events:none;z-index:6;transition:border-color .3s ease}
body.ov .scr.hov::after{border-color:var(--wood)}
.scr.split{transition:transform .9s cubic-bezier(.3,.6,.2,1),filter .6s ease,opacity .6s ease}
/* half size with a doubled inset: the gutters around and between the two small pages match every other gutter */
body.ov .scr.mini{clip-path:inset(calc(var(--ow) * 3.5 / var(--ms,.5)))}
body.ov .scr.mini::after{inset:calc(var(--ow) * 3.5 / var(--ms,.5));border-width:calc(var(--ow) * 1.6 / var(--ms,.5))}
.spotframe{position:absolute;pointer-events:none;display:none;outline:var(--ow) solid #e4e0d9;z-index:3}
body.ov .spotframe{display:block}
.spotframe{outline:none!important;z-index:-1;transition:opacity .6s ease}
/* a shared spot is one white card holding two small pages, with a faint hairline between them */
.spotframe b{position:absolute;inset:calc(var(--ow) * 3.5);background:#fff;display:block;clip-path:none!important}
.spotframe b+b{display:none}
.spotframe i{display:block!important;position:absolute;height:var(--ow);background:#e6e1da;z-index:1;transform-origin:0 50%}
.spotframe{overflow:hidden;clip-path:inset(calc(var(--ow) * 3.5))}
body.ov[data-cat] .spotframe{opacity:.22}
body.ov .spotframe{pointer-events:auto;cursor:pointer}
.spotframe i{display:none}
.spotframe i{transition:opacity .6s ease}
.spotframe.hov i{opacity:0}
.spotframe i{display:none!important}


#ovbtn{position:fixed;z-index:6;right:calc(env(safe-area-inset-right,0px) + 20px);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:var(--nav);transition:color .3s ease}
#ovbtn:hover,#ovbtn[aria-pressed=true]{color:var(--wood)}
#ovbtn:focus-visible{outline:1px solid var(--wood);outline-offset:-6px}
#ovbtn svg{width:16px;height:16px;display:block}
#homebtn{position:fixed;z-index:6;left:calc(env(safe-area-inset-left,0px) + 20px);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;opacity:.6;transition:opacity .4s ease,transform .4s ease}
#homebtn:hover{opacity:1;transform:rotate(60deg)}
#homebtn:focus-visible{outline:1px solid var(--wood);outline-offset:-4px;opacity:1}
#homebtn.athome{opacity:.25}
#upbtn{position:fixed;z-index:6;left:calc(env(safe-area-inset-left,0px) + 66px);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);height:44px;min-width:44px;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0 6px;cursor:pointer;color:#9a958e;font:400 10px/1 var(--font);letter-spacing:.24em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .5s ease,color .3s ease}
#upbtn.on{opacity:1;pointer-events:auto}
#upbtn:hover{color:var(--wood)}
#upbtn:focus-visible{outline:1px solid var(--wood);outline-offset:-4px}
#upbtn svg{width:14px;height:14px;display:block;flex:none}
#homebtn svg{width:24px;height:27.4px;display:block}
#zoom{position:fixed;z-index:6;right:calc(env(safe-area-inset-right,0px) + 20px);bottom:calc(env(safe-area-inset-bottom,0px) + 68px);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .5s ease}
body.ov #zoom{opacity:1;pointer-events:auto}
#zoom button{width:44px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:#9a958e;transition:color .3s ease}
#zoom button:hover{color:var(--wood)}
#zoom button:focus-visible{outline:1px solid var(--wood);outline-offset:-6px}
#zoom svg{width:12px;height:12px;display:block}
#cats{position:fixed;z-index:6;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);left:50%;transform:translateX(-50%);display:flex;gap:4px;opacity:0;pointer-events:none;transition:opacity .5s ease;background:rgba(239,237,232,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:0 10px;border-radius:2px}
body.ov #cats{opacity:1;pointer-events:auto}
#cats button{font:400 11px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:#9a958e;background:none;border:0;border-bottom:1px solid transparent;padding:14px 10px 10px;cursor:pointer;transition:color .3s ease,border-color .3s ease}
#cats button:hover{color:var(--wood)}
#cats button[aria-pressed=true]{color:var(--wood);border-bottom-color:var(--accent)}
#cats button:focus-visible{outline:1px solid var(--wood);outline-offset:-2px}
@media (max-width:640px){#zoom{bottom:calc(env(safe-area-inset-bottom,0px) + 122px)}#cats{bottom:calc(env(safe-area-inset-bottom,0px) + 74px);max-width:calc(100vw - 32px);overflow-x:auto;padding:0 4px}#cats button{letter-spacing:.08em;padding:14px 6px 10px;font-size:10px;flex:none}}
.scr{transition:filter .6s ease,opacity .6s ease}
body.ov[data-cat] .scr:not(.c-home){filter:grayscale(1);opacity:.22}
body.ov[data-cat=up] .scr.c-up,body.ov[data-cat=right] .scr.c-right,body.ov[data-cat=down] .scr.c-down,body.ov[data-cat=left] .scr.c-left{filter:none;opacity:1}

#ovlabel{position:fixed;z-index:6;left:50%;top:calc(env(safe-area-inset-top,0px) + 24px);padding:10px 14px;background:rgba(239,237,232,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:2px;transform:translateX(-50%);font:400 12px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:#7a756e;opacity:0;transition:opacity .3s ease;pointer-events:none;white-space:nowrap}
#ovlabel.on{opacity:1}

/* hairlines */
.hl{display:block;height:1px;background:var(--rule)}
.hl.v{width:1px;height:auto}
.cap{margin:0;color:#767676;font-weight:400;letter-spacing:.08em;line-height:1.55;white-space:normal;will-change:transform}

/* pictures: placed directly on the white page, no frame */
.pic{display:block;max-width:none;opacity:0;transition:opacity 1s ease;will-change:transform}
.pic.ld{opacity:1}
.hl.faint{background:#e4e2de}


/* home hexagon */
.hex .lat{animation:lat 1.8s ease .2s both}
.hex{animation:hexin 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes lat{from{opacity:0}to{opacity:1}}
@keyframes hexin{from{opacity:0}to{opacity:1}}

/* store: rotated words with reflection */
.soon{transform-origin:50% 50%}
.soon .w{position:absolute;display:flex;flex-direction:column;line-height:1}
.soon .row{display:flex}
.soon .ref{color:#e4e4e4;transform:rotate(180deg)}

/* edge arrows */
.nav{position:fixed;z-index:5;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--nav);opacity:0;pointer-events:none;transition:opacity .5s ease,color .3s ease}
.nav.on{opacity:1;pointer-events:auto}
.nav:hover{color:var(--wood)}
.nav{color:var(--nav)}
.nav .nl,.nav.glow .nl{color:#9a958e}
.nav{-webkit-touch-callout:none;touch-action:none}
.nav svg{transition:transform .65s ease}
.nav.hold{color:var(--accent);transition:opacity .5s ease,color .65s linear}
.nav.hold svg{transform:scale(1.6)}
.nav:focus-visible{outline:1px solid var(--wood);outline-offset:-6px}
.nav svg{width:12px;height:12px;display:block}
.nav[data-dir=up]{top:calc(env(safe-area-inset-top,0px) + 2px);left:50%;transform:translateX(-50%)}
.nav[data-dir=down]{bottom:calc(env(safe-area-inset-bottom,0px) + 2px);left:50%;transform:translateX(-50%)}
.nav[data-dir=left]{left:calc(env(safe-area-inset-left,0px) + 2px);top:50%;transform:translateY(-50%)}
.nav[data-dir=right]{right:calc(env(safe-area-inset-right,0px) + 2px);top:50%;transform:translateY(-50%)}
.nav.hint{animation:none}
/* crossroads: the arrows that turn off the current line name the page they lead to */
.nav .nl{position:absolute;font:400 10px/1 var(--font);letter-spacing:.24em;text-transform:uppercase;color:#9a958e;white-space:nowrap;opacity:0;transition:opacity .5s ease;pointer-events:none}
.nav.lab .nl{opacity:1}
.nav[data-dir=up] .nl{top:40px;left:50%;transform:translateX(-50%)}
.nav[data-dir=down] .nl{bottom:40px;left:50%;transform:translateX(-50%)}
.nav[data-dir=left] .nl{left:36px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl}
.nav[data-dir=right] .nl{right:36px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl}
.nav.pulse{animation:pulse 1.6s ease 2}
/* a design that opens into sub designs: its turn-off arrows light up and breathe */
.nav[data-dir=up]{--nx:0px;--ny:-2px}.nav[data-dir=down]{--nx:0px;--ny:2px}.nav[data-dir=left]{--nx:-2px;--ny:0px}.nav[data-dir=right]{--nx:2px;--ny:0px}
.nav.glow,.nav.glow.pulse{color:var(--accent);animation:none}
.nav.glow:hover{color:#a3000d}
.nav.glow svg{width:14px;height:14px;animation:nudge 2.8s ease-in-out infinite}
.nav.glow .nl{color:var(--accent);font-weight:400}

@keyframes nudge{0%,100%{transform:none}50%{transform:translate(var(--nx),var(--ny))}}
@keyframes breathe{0%,100%{transform:scale(.6);opacity:.35}50%{transform:scale(1.35);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hint{0%,100%{color:var(--nav)}50%{color:var(--wood)}}
@media (prefers-reduced-motion: reduce){
  .anim .tt span span,.hex,.hex .lat,.nav.hint,.nav.pulse,.nav.glow svg,.nav.glow::before{animation:none}
  .pic{transition:none}
}

/* shown instead of the maze when content.json cannot be read */
.loaderr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 48px));margin:0;font:400 14px/1.6 var(--font);color:#555;text-align:center;user-select:text;-webkit-user-select:text}
.loaderr small{display:block;margin-top:12px;font:12px/1.5 ui-monospace,monospace;color:#9a958e;white-space:pre-wrap;text-align:left}