/* Glenn Ashley lookbook
   Layout concept: a physical book on a taupe table. Every page is 72em x 100em where 1em = 1% of page height,
   so spacing, type and artwork scale together from iPad mini to desktop. Type is Jost Light, small and widely tracked. */
:root{
  color-scheme:dark;
  --paper:#f5f1ea; --sand:#e7dbc7; --charcoal:#3a3733; --ink:#2c2a27; --mute:#8a8176;
  --table:#574c44; --table-2:#4a4039;
  --sans:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%;margin:0;overflow:hidden;background:var(--table);color:var(--ink);font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{background:radial-gradient(120% 90% at 50% 40%,var(--table) 0%,var(--table-2) 100%)}
button{font:inherit;color:inherit;cursor:pointer}
#stage{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;padding-bottom:3.2rem}
#book{position:relative;font-size:var(--u,7px);width:144em;height:100em;perspective:300em;flex:none}
#book .shadow{position:absolute;left:2%;right:2%;bottom:-1.4em;height:3em;background:rgba(0,0,0,.45);filter:blur(1.6em);border-radius:50%;pointer-events:none}
#leaves{position:absolute;inset:0}
.leaf{position:absolute;left:72em;top:0;width:72em;height:100em;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face.back{transform:rotateY(180deg)}
.face .shade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(90deg,rgba(30,18,8,.55),rgba(30,18,8,0) 80%);opacity:0;z-index:20}
.face.back .shade{background:linear-gradient(270deg,rgba(30,18,8,.55),rgba(30,18,8,0) 80%)}

/* ---------- pages ---------- */
.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}
.page::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:15;opacity:.45;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .3  0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.page::after{content:"";position:absolute;top:0;bottom:0;width:5.5%;pointer-events:none;z-index:16}
.page.l::after{right:0;background:linear-gradient(270deg,rgba(60,38,18,.2),rgba(60,38,18,.05) 45%,transparent)}
.page.r::after{left:0;background:linear-gradient(90deg,rgba(60,38,18,.2),rgba(60,38,18,.05) 45%,transparent)}
.bg-warm{background:var(--paper)}
.bg-sand{background:var(--sand)}
.bg-tint{background:var(--tint,var(--sand))}
.bg-char{background:var(--charcoal);color:#efe8dc}
.bg-char .cap,.bg-char .body,.bg-char .pn,.bg-char .rh{color:#cfc6b8}
.bg-char .kicker,.bg-char .lead,.bg-char .display{margin:0;font-weight:300;font-size:2.9em;line-height:1.15;letter-spacing:0}

/* running head: one small name per spread, outer margin, no rule */
.rh{position:absolute;top:calc(5*var(--u,7px));font-size:calc(1em + 2pt);letter-spacing:.5em;font-weight:500;text-transform:uppercase;white-space:nowrap;color:#3d3832;z-index:3}
.page.l .rh{left:calc(8*var(--u,7px))} .page.r .rh{right:calc(8*var(--u,7px))}
.kicker{font-size:calc(1.35em + 2pt);font-weight:500;letter-spacing:.01em;color:#5b534a;white-space:nowrap;line-height:1.3}
.caps{font-size:calc(1.15em + 2pt);letter-spacing:.42em;font-weight:500;text-transform:uppercase;color:#5b534a;white-space:nowrap}
.pn{position:absolute;bottom:calc(4.4*var(--u,7px));font-size:calc(1.15em + 2pt);letter-spacing:.02em;font-weight:400;color:var(--mute);z-index:3}
.page.l .pn{left:calc(7*var(--u,7px))} .page.r .pn{right:calc(7*var(--u,7px))}
.display{margin:0;font-weight:300;font-size:2.9em;line-height:1.2;letter-spacing:.03em}
.lead{margin:0;font-size:calc(1.65em + 2pt);line-height:1.5;font-weight:300;letter-spacing:.01em}
.body{margin:0;font-size:calc(1.4em + 2pt);line-height:1.55;color:#5a534b;font-weight:300;letter-spacing:.01em}
.ph{font-style:italic;color:var(--mute)}
.bg-char .ph{color:#a89f92}
.tag{font-size:calc(1.35em + 2pt);font-weight:500;letter-spacing:.01em}
.photo{position:absolute;filter:drop-shadow(0 .5em .9em rgba(60,38,18,.22))}
.photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- artwork ---------- */
.work{position:absolute;margin:0;cursor:zoom-in;-webkit-tap-highlight-color:transparent;z-index:2}
.work>img{display:block;height:100%;width:100%;filter:drop-shadow(0 .5em .8em rgba(60,38,18,.26));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.work:active>img{transform:scale(.992)}
.cap{position:absolute;left:0;top:100%;margin-top:1.4em;white-space:nowrap;font-size:calc(1.35em + 2pt);letter-spacing:.01em;line-height:1.4;color:#4d463e;font-weight:400}
.cap b{display:block;font-weight:400}
.cap.one b,.cap.one span{display:inline}
.cap span{opacity:.9}

.grid{position:absolute;display:grid;z-index:2}
.grid.g2{grid-template-columns:21.5em 21.5em;column-gap:11em;row-gap:4.5em;grid-auto-rows:min-content}
.cell{position:relative;margin:0;display:flex;flex-direction:column;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.cell .im{position:relative}
.cell .im img{display:block;width:100%;height:100%;object-fit:contain;object-position:left top;filter:drop-shadow(0 .45em .7em rgba(60,38,18,.24))}
.cell .cap{position:static;margin-top:1.4em}
.bg-char .work>img,.bg-char .cell .im img{filter:drop-shadow(0 .6em 1em rgba(0,0,0,.5))}

/* ---------- macro (detail) ---------- */
.macro{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;touch-action:none;cursor:grab;z-index:1;background:#cfc3b0}
.macro:active{cursor:grabbing}
.macro img{position:absolute;left:0;top:0;max-width:none;will-change:transform;-webkit-user-drag:none}
.macro .label{position:absolute;left:calc(8*var(--u,7px));bottom:calc(9.5*var(--u,7px));color:#fff;font-size:calc(1.3em + 2pt);font-weight:500;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.55);pointer-events:none;transition:opacity .8s;z-index:2}
.macro .label i{display:block;font-style:normal;margin-top:.3em;font-size:.85em;font-weight:300}
.macro.touched .label{opacity:0}
.macro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(transparent,rgba(30,20,10,.45));pointer-events:none}
/* locator: appears briefly as a teaser and while touching, never as a permanent box */
.ind{position:absolute;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 .8em rgba(0,0,0,.25);pointer-events:none;z-index:4;opacity:0;transition:opacity .7s ease}
.ind.on{opacity:1}

/* ---------- rooms: generated interior + real artwork on the wall + "try on this wall" ---------- */
.room{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#d8c3a2}
.room>img.bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.room .work{filter:drop-shadow(.8em 1em 1.2em rgba(45,28,12,.42)) drop-shadow(0 0 .3em rgba(45,28,12,.30));transition:opacity .28s ease}
.room .work>img{clip-path:inset(0 1.4% 1.8% 0);filter:none}
.room .work.fade{opacity:0}
.room-scrim{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(transparent,rgba(30,18,8,.6));pointer-events:none;z-index:11}
.room-ui{position:absolute;left:8em;bottom:4.2em;z-index:12;color:#fff}
.swap-panel{display:inline-block;padding:1.5em 1.8em 1.7em;border-radius:.8em;background:rgba(28,18,10,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14)}
.room-cap{font-size:calc(1.4em + 2pt);letter-spacing:.01em;font-weight:400;margin-bottom:1.4em;min-height:1.4em;white-space:nowrap}
.swap-row{display:flex;align-items:flex-end;gap:2em}
.swap-l{font-size:calc(1.2em + 2pt);letter-spacing:.01em;font-weight:500;white-space:nowrap;line-height:1.3;padding-bottom:.3em}
.swap{display:flex;align-items:flex-end;gap:1.3em}
.swap button{height:7em;padding:0;margin:0;border:0;background:none;display:block;opacity:.72;border-radius:.15em;outline:1px solid rgba(255,255,255,.35);outline-offset:.3em;
  transition:opacity .25s,transform .25s,outline-color .25s;-webkit-tap-highlight-color:transparent}
.swap button img{display:block;height:100%;width:auto;border-radius:.15em;clip-path:inset(0 1.4% 1.8% 0)}
.swap button.on{opacity:1;outline:2px solid #fff;transform:translateY(-.5em)}
.room-tag{margin-top:1.8em;font-size:calc(1.15em + 2pt);font-style:italic;font-weight:300;letter-spacing:.02em;opacity:.95;text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* ---------- chrome ---------- */
.nav{position:fixed;top:15%;bottom:15%;width:5.5rem;display:flex;align-items:center;background:none;border:0;padding:0;color:#fff;z-index:20;transition:opacity .3s;-webkit-tap-highlight-color:transparent}
.nav.prev{left:0;justify-content:flex-start;padding-left:max(1.6rem,env(safe-area-inset-left,0px))}
.nav.next{right:0;justify-content:flex-end;padding-right:max(1.6rem,env(safe-area-inset-right,0px))}
.nav svg{width:1.35rem;height:1.35rem;stroke-width:1.3;opacity:.55;filter:drop-shadow(0 0 2px rgba(0,0,0,.5));transition:opacity .2s}
.nav:active svg,.nav:focus-visible svg{opacity:1}
.nav[disabled]{opacity:0;pointer-events:none}
@media (max-aspect-ratio:1/1){.nav{width:4.2rem}}
#ui{position:fixed;left:0;right:0;bottom:0;height:3.2rem;display:flex;align-items:center;justify-content:center;gap:1.4rem;z-index:20;color:#e9dfd0;
  padding-bottom:env(safe-area-inset-bottom,0px)}
#dots{display:flex;gap:.5rem;align-items:center}
#dots button{width:.58rem;height:.58rem;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.3);transition:all .3s}
#dots button[aria-current="true"]{background:#fff;width:1.4rem;border-radius:.4rem}
#hint{font-size:calc(.74rem + 2pt);letter-spacing:.22em;text-transform:uppercase;opacity:.8;transition:opacity .8s;white-space:nowrap;font-weight:400}
#hint.gone{opacity:0}
#sname{font-size:calc(.74rem + 2pt);letter-spacing:.22em;text-transform:uppercase;min-width:9rem;text-align:right;opacity:.85;font-weight:400}
@media (max-width:760px){#hint{display:none}#sname{min-width:0}}

/* ---------- viewer ---------- */
#viewer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:rgba(18,14,10,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f1eadd;display:flex;align-items:center;justify-content:center;
  padding:max(3vh,env(safe-area-inset-top)) max(3vw,env(safe-area-inset-right)) max(3vh,env(safe-area-inset-bottom)) max(3vw,env(safe-area-inset-left));
  animation:vin .35s ease both;touch-action:none;user-select:none;-webkit-user-select:none}
#vpanel{position:relative;width:100%;height:100%;max-width:1400px;display:flex;flex-direction:column;overflow:hidden;background:#2a2520;border:1px solid rgba(255,255,255,.1);border-radius:1.2rem;box-shadow:0 2rem 5rem rgba(0,0,0,.55)}
#viewer[hidden]{display:none!important}
@keyframes vin{from{opacity:0}to{opacity:1}}
#vstage{position:relative;flex:1;min-height:0;overflow:hidden}
#vimg{position:absolute;left:50%;top:50%;max-width:86%;max-height:86%;transform-origin:50% 50%;filter:drop-shadow(0 1.2rem 2rem rgba(0,0,0,.5));cursor:grab;-webkit-user-drag:none}
#vscale{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:70px}
#vscale::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,0))}
#vscale[hidden]{display:none}
#vscale .scene{position:relative;display:flex;align-items:flex-end;gap:0;height:100%}
#vscale .floorline{position:absolute;left:-30vw;right:-30vw;bottom:0;height:1px;background:rgba(255,255,255,.35)}
#vscale .dim{position:absolute;font-size:calc(.74rem + 2pt);letter-spacing:.18em;color:#cdbfa8;white-space:nowrap;font-weight:400}
#vscale img{position:absolute;filter:drop-shadow(0 .8rem 1.4rem rgba(0,0,0,.5))}
#vscale svg{position:absolute;bottom:0;fill:#6d6258}
#vbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding:1rem 1.6rem 1.2rem;
  border-top:1px solid rgba(255,255,255,.12)}
#vinfo h2{margin:0 0 .35rem;font-size:1.5rem;font-weight:300;letter-spacing:.01em}
#vinfo p{margin:0;font-size:calc(.9rem + 2pt);letter-spacing:.02em;color:#cdbfa8;line-height:1.9;font-weight:400}
#vinfo .st{display:inline-block;margin-left:.8rem;padding:.12rem .7rem;border:1px solid currentColor;border-radius:1rem;font-size:calc(.75rem + 2pt);letter-spacing:.02em}
#vinfo .st.ok{color:#b9d3a3}
#vact{display:flex;gap:.7rem;flex:none}
#vact button,#vact a{display:inline-flex;align-items:center;min-height:2.8rem;padding:0 1.3rem;border:1px solid rgba(255,255,255,.4);border-radius:1.5rem;background:transparent;font-size:calc(.85rem + 2pt);letter-spacing:.02em;color:inherit;text-decoration:none;font-weight:500}
#vact button[aria-pressed="true"]{background:#f1eadd;color:#2c2a27}
#vclose{position:absolute;right:1rem;top:1rem;z-index:3;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.2);display:grid;place-items:center}
#vclose svg{width:1.1rem;height:1.1rem}
@media (max-width:760px){#vbar{flex-direction:column;align-items:flex-start}}
:focus-visible{outline:2px solid #e8c47a;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.work>img,.room .work{transition:none}#viewer{animation:none}}

/* ---------- cover options ---------- */
.cv-full,.cv-top{position:absolute;overflow:hidden;background:#cfc3b0}
.cv-full{top:0;right:0;bottom:0;left:0}.cv-top{left:0;right:0;top:0;height:66em}
.cv-full img,.cv-top img{width:100%;height:100%;object-fit:cover;display:block}
.cv-scrim{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(transparent,rgba(24,16,8,.62));pointer-events:none;z-index:2}
.cv-scrim.top{top:0;bottom:auto;height:26%;background:linear-gradient(rgba(24,16,8,.5),transparent)}
.cv-name{font-size:1.9em;letter-spacing:.62em;font-weight:400;text-transform:uppercase;white-space:nowrap;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.bg-warm .cv-name{color:#2c2a27;text-shadow:none}
.cv-sub{font-size:calc(1.25em + 2pt);letter-spacing:.42em;font-weight:500;text-transform:uppercase;white-space:nowrap;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.cv-sub.dim{font-weight:300;letter-spacing:.3em;opacity:.85}
.cv-cred{font-size:calc(1.2em + 2pt);letter-spacing:.02em;line-height:1.7;color:#fff;font-weight:400;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.cv-vert{writing-mode:vertical-rl;font-size:1.9em;letter-spacing:.7em;font-weight:400;text-transform:uppercase;color:#efe8dc;white-space:nowrap}

.cv-name,.cv-sub,.cv-cred,.cv-vert{position:relative;z-index:3}
.cv-scrim{height:48%;background:linear-gradient(transparent,rgba(24,16,8,.7))}
.cv-scrim.top{top:0;bottom:auto;height:26%;background:linear-gradient(rgba(24,16,8,.5),transparent)}

/* ---------- iPad / WebKit hardening ---------- */
/* paper grain is an SVG feTurbulence tile on 24 pages: too heavy for tablet GPUs, so touch devices skip it */
@media (hover:none){.page::before{display:none}}
.face>.page{-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* static rendered scene (not interactive) */
.shot{position:absolute;overflow:hidden;background:#d8c3a2;box-shadow:0 .5em 1.2em rgba(60,38,18,.22);z-index:2}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
/* full-screen button */
#fs{position:absolute;right:max(1rem,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.18);display:grid;place-items:center;padding:0;color:#e9dfd0;-webkit-tap-highlight-color:transparent}
#fs svg{width:1rem;height:1rem}
#fs[hidden]{display:none}

/* contact + links */
.contact{display:grid;row-gap:1.8em}
.contact .row span{display:block;font-size:calc(1.05em + 2pt);letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:#8a8176;margin-bottom:.5em}
.contact .row b{display:block;font-weight:300;font-size:calc(1.65em + 0pt);line-height:1.3;color:#2c2a27}
.contact .ph{font-style:italic;color:var(--mute)}
.lnk{display:inline-block;color:#2c2a27;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;padding:.5em 0;font-size:calc(1.4em + 2pt);font-weight:400;-webkit-tap-highlight-color:transparent}
.lnk i{font-style:normal;margin-left:.4em;opacity:.6}
.links{display:grid;row-gap:.6em;justify-items:start}

/* admin preview: selected item */
.sel-el{outline:2px solid #2a7fff!important;outline-offset:3px}