/* Shared design: one typeface (Mona Sans), two colours, a top bar that inverts against whatever is
   behind it, section titles whose letters flip in, and the contact footer. Used by every page. */
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(fonts/mona-sans.woff2) format('woff2')}
/* The same font pinned to its widest and narrowest widths, for canvas text (Safari's canvas ignores fontStretch). */
@font-face{font-family:'Mona Sans Wide';font-style:normal;font-weight:200 900;font-stretch:125%;font-display:swap;src:url(fonts/mona-sans.woff2) format('woff2')}
@font-face{font-family:'Mona Sans Narrow';font-style:normal;font-weight:200 900;font-stretch:75%;font-display:swap;src:url(fonts/mona-sans.woff2) format('woff2')}

:root{--light:#ebebe8;--dark:#0b0b0b;--bg:var(--light);--fg:var(--dark);--pad:clamp(18px,4vw,64px);--sans:'Mona Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:light}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.55 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,p{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--fg);color:var(--bg)}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip{position:fixed;z-index:20;top:10px;left:10px;padding:10px 16px;background:var(--fg);color:var(--bg);transform:translateY(-160%)}
.skip:focus{transform:none}

/* Top bar: inverts against whatever is behind it. */
.bar{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding:20px var(--pad);color:#fff;mix-blend-mode:difference;font-size:.875rem;font-weight:500;letter-spacing:.01em}
.bar a{text-decoration:none}
.bar-name{margin-right:auto;font-weight:600;font-stretch:112%}
.bar-nav{display:flex;gap:clamp(18px,2.4vw,36px)}
.bar-nav a,.bar-lang button{position:relative;padding:6px 0}
.bar-nav a:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bar-nav a:hover:after{transform:scaleX(1);transform-origin:left}
.bar-lang{display:flex;gap:12px}
.bar-lang button{opacity:.45}.bar-lang button.is-active{opacity:1}
.bar-menu{display:none}.bar-menu .when-open,.menu-open .bar-menu .when-closed{display:none}.menu-open .bar-menu .when-open{display:inline}


.word{display:inline-block;white-space:nowrap;transform-style:preserve-3d}
/* Letters are animated in 3D; they never take clicks (Safari hit-tests tilted elements generously). */
.ch{display:inline-block;transform-origin:50% 60%;backface-visibility:hidden;pointer-events:none}
.bar-nav a[aria-current]:after{transform:scaleX(1)}

/* Contact */
.contact{position:relative;z-index:5;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(22px,3.4vh,40px);padding:22vh var(--pad) 28px;background:var(--dark);color:var(--light)}
.contact-label{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.contact-mail{align-self:flex-start;font-size:min(6.2vw,8.5rem);line-height:1;font-weight:650;font-stretch:112%;letter-spacing:-.035em;text-decoration:none;transition:font-stretch .6s cubic-bezier(.2,.8,.2,1),font-weight .6s cubic-bezier(.2,.8,.2,1)}
.contact-mail:hover{font-stretch:78%;font-weight:850}
.contact-note{max-width:38em;font-size:1rem;opacity:.75}
.contact-note a{text-underline-offset:3px}
.contact-links{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:1rem;font-weight:500}
.contact-links a{text-decoration:none;border-bottom:1px solid rgba(235,235,232,.28);transition:border-color .25s}
.contact-links a:hover{border-color:currentColor}
.contact-foot{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(24px,6vh,70px);padding-top:18px;border-top:1px solid rgba(235,235,232,.16);font-size:.8125rem;opacity:.6}

@media (max-aspect-ratio:1/1),(max-width:760px){
  .contact-mail{font-size:min(8.6vw,4rem);font-stretch:84%}
}
@media (max-width:760px){
  .bar{padding:16px var(--pad)}
  .bar-menu{display:block;padding:6px 0}
  .bar-nav{position:fixed;inset:0;z-index:-1;display:none;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--pad);font-size:clamp(2.4rem,11vw,3.6rem);font-weight:700;font-stretch:115%;letter-spacing:-.03em;text-transform:uppercase}
  .menu-open .bar{mix-blend-mode:normal;color:var(--light);background:var(--dark);bottom:0;align-items:flex-start}
  .menu-open .bar-nav{display:flex}
  .menu-open{overflow:hidden}
  .bar-nav a:after{display:none}
  .contact-foot{flex-direction:column;gap:4px}
}

/* A book in 3D, built from the flat cover: page edges, spine and back. --turn turns it (degrees),
   --tx and --ty tilt it towards the pointer. */
.book3d{--d:clamp(20px,3vw,38px);display:block;width:100%;perspective:1800px;filter:drop-shadow(0 30px 36px rgba(0,0,0,.34))}
.book3d-body{pointer-events:none;position:relative;display:block;aspect-ratio:827/1254;transform-style:preserve-3d;transform:rotateY(calc(var(--turn,-22)*1deg + var(--tx,0)*10deg)) rotateX(calc(var(--ty,0)*-8deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.book3d-body>*{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.book3d-cover{inset:0;width:100%;height:100%;max-width:none;transform:translateZ(calc(var(--d) / 2));border-radius:0 2px 2px 0}
.book3d-body:after{content:'';position:absolute;inset:0;transform:translateZ(calc(var(--d) / 2 + .6px));background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.2) 1.6%,rgba(0,0,0,.08) 3.4%,rgba(0,0,0,0) 7%);pointer-events:none}
.book3d-pages{top:.8%;bottom:.8%;left:calc(100% - var(--d) / 2 - 1px);width:var(--d);transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#f3f0e8 0 1px,#d8d3c8 1px 2px)}
.book3d-spine{top:0;bottom:0;left:calc(var(--d) / -2);width:var(--d);transform:rotateY(-90deg);background:linear-gradient(90deg,#a3261a,#c9361f 45%,#ae2a1b)}
.book3d-back{inset:0;transform:translateZ(calc(var(--d) / -2)) rotateY(180deg);background:#bb3020}
@media (prefers-reduced-motion:reduce){.book3d-body{transition:none}}