@font-face{font-family:"Jost";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format("woff2")}

:root{
  --meta:clamp(10px,7.5px + .3vw,13px);
  --bg:#000;
  --mute:#a6a6a4;
  --line:rgba(255,255,255,.2);
  --pad-x:clamp(14px,3.4vw,48px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;color:#fff}
body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:#000 url(bg.jpg?v=13) center/cover no-repeat;pointer-events:none}
body{
  font-family:"Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  font-weight:400;line-height:1.4;-webkit-text-size-adjust:100%;
  height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
}
a,button{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.top{flex:none;display:flex;justify-content:space-between;align-items:flex-end;gap:12px 32px;flex-wrap:wrap;padding:max(20px,env(safe-area-inset-top)) var(--pad-x) 14px}
.id h1{margin:0;font-weight:300;font-size:clamp(20px,3.1vw,34px);letter-spacing:.42em;text-transform:uppercase;color:#fff;line-height:1.1}
.id p{margin:6px 0 0;font-weight:300;font-size:var(--meta);letter-spacing:.2em;color:var(--mute);text-transform:uppercase}
.contact{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;gap:4px 1.8em;font-weight:300;font-size:var(--meta);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.contact a,.contact button{color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;border:0;padding:4px 0;transition:color .2s}
.contact a:hover,.contact button:hover{color:#fff}

/* Viewer */
.viewer{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column;background:transparent}
.stage{position:relative;flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;overflow:hidden;padding:clamp(8px,1.6vw,24px) 72px;touch-action:none;user-select:none;-webkit-user-select:none}
#bookbox{position:relative}
#book{position:relative}
.page{background:#fff;overflow:hidden}
.page canvas{display:block;width:100%;height:100%}

.status{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--mute);font-weight:300;letter-spacing:.2em;font-size:14px;pointer-events:none;text-align:center;padding:0 24px}
.status[hidden]{display:none}
.tap{display:none;position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;color:var(--mute);font-size:14px;font-weight:300;letter-spacing:.06em;pointer-events:none}

/* Side arrows */
.side{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:#fff;z-index:3;transition:background .2s,opacity .2s}
.side:hover:not(:disabled){background:rgba(255,255,255,.14)}
.side:disabled{opacity:.22;cursor:default}
.side.prev{left:8px}
.side.next{right:8px}

/* Bottom bar: zoom slider, page count, full screen */
.bar{flex:none;display:flex;align-items:center;gap:14px 20px;height:56px;padding:0 var(--pad-x);background:transparent;border-top:1px solid var(--line);position:relative;z-index:6}
.spacer{flex:1}
.chapters{display:flex;gap:4px 22px;min-width:0;overflow:hidden}
.chapters:empty{display:none}
.chapters button{font-size:15px;color:var(--mute);padding:6px 0;white-space:nowrap;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.chapters button:hover{color:#fff}
.chapters button[aria-current="true"]{color:#fff;border-bottom-color:#fff}
.zoomctl{display:flex;align-items:center;gap:12px}
.zoomctl output{min-width:3.2em;font-size:15px;font-variant-numeric:tabular-nums}
.where{font-size:15px;min-width:6.5em;text-align:center;font-variant-numeric:tabular-nums}
.icon{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:#fff;transition:background .2s}
.icon:hover{background:rgba(255,255,255,.14)}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;width:170px;height:24px;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,.3);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;margin-top:-6.5px;border:0}
input[type=range]::-moz-range-track{height:3px;background:rgba(255,255,255,.3);border-radius:2px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}

/* Exit button, full screen only */
.exit{display:none;position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:9;width:44px;height:44px;place-items:center;border-radius:50%;color:#fff;background:rgba(0,0,0,.6);border:1px solid var(--line)}
.exit:hover{background:rgba(255,255,255,.18)}

/* Full screen */
body.full .top{display:none}
body.full .viewer{position:fixed;inset:0;z-index:50}
body.full .exit{display:grid}

/* Phones */
body.mobile .stage{padding:12px 16px}
body.mobile:not(.full) .bar,body.mobile:not(.full) .side{display:none}
body.mobile:not(.full) .tap{display:block}
body.mobile:not(.full) .stage{cursor:pointer}
body.mobile.full .stage{padding:0 4px}
body.mobile .side{width:44px;height:44px;background:rgba(0,0,0,.45)}
body.mobile .side.prev{left:6px}
body.mobile .side.next{right:6px}
body.mobile .chapters,body.mobile .spacer{display:none}
body.mobile .bar{height:52px;justify-content:space-between;padding-bottom:env(safe-area-inset-bottom)}
body.mobile input[type=range]{width:min(38vw,180px)}
body.mobile .id h1{letter-spacing:.3em}
body.mobile{--meta:11px}
body.mobile .contact{justify-content:flex-start;margin-left:0;gap:4px 1.4em;letter-spacing:.16em}
body.mobile .id p{letter-spacing:.16em}
@media (max-width:900px){.chapters{display:none}}

#bookbox.moving{will-change:transform}

body.mobile .contact{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:2px}

/* Mobile: bigger portfolio in full screen (no bottom bar) */
body.mobile.full .bar{display:none}

/* Portrait phone, cover view: links sit evenly between the title and the cover */
@media (orientation:portrait){
  body.mobile:not(.full) .top{display:contents}
  body.mobile:not(.full) .id{flex:none;padding:max(20px,env(safe-area-inset-top)) var(--pad-x) 0}
  body.mobile:not(.full) .contact{flex:1 1 0;min-height:0;justify-content:center;padding:0 var(--pad-x)}
  body.mobile:not(.full) .stage{padding:0 16px 40px}
}

/* Phone held sideways, cover view: same arrangement as the desktop page */
@media (orientation:landscape){
  body.mobile:not(.full) .top{padding:max(10px,env(safe-area-inset-top)) var(--pad-x) 6px;align-items:center;flex-wrap:nowrap;gap:12px 24px}
  body.mobile:not(.full) .id h1{font-size:clamp(18px,3vw,28px);letter-spacing:.34em;white-space:nowrap}
  body.mobile:not(.full) .id p{margin-top:4px;white-space:nowrap}
  body.mobile:not(.full) .contact{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin-left:auto;gap:0 1.4em;max-width:52%}
  body.mobile:not(.full) .contact a{padding:3px 0}
  body.mobile:not(.full) .stage{padding:4px 16px 26px}
  body.mobile:not(.full) .tap{bottom:4px;font-size:12px}
}

/* Tap hint animation over the cover (phones, before full screen) */
.tapanim{display:none;position:absolute;left:50%;top:50%;width:min(52%,230px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:4;filter:drop-shadow(0 1px 6px rgba(0,0,0,.55))}
.tapanim svg{display:block;width:100%;height:100%}
body.mobile:not(.full) .tapanim{display:block}