:root{--page:#f7f2e8;--page-warm:#fbf8f1;--page-deep:#efe7d8;--ink:#16130f;--ink-soft:#3a3733;--muted:#8c8278;--rule:#ddd3c3;--orange:#e8701a;--orange-deep:#c2410c;--blue:#365b70;--desk:#cfc4b5;--desk-deep:#b8ac9c;--cover:#8a5a33;--cover-dark:#5e3a1e;--gutter:#5a443033;--f-display:"Playfair Display", Georgia, serif;--f-display-th:"Anuphan", "IBM Plex Sans Thai", sans-serif;--f-sans:"DM Sans", "IBM Plex Sans Thai", system-ui, sans-serif;--f-sans-th:"IBM Plex Sans Thai", "DM Sans", system-ui, sans-serif;--f-script:"Caveat", cursive;--t-hero:calc(clamp(2.1rem, 1rem + 3.4vw, 4rem));--t-h1:calc(clamp(1.8rem, 1rem + 2.4vw, 3.1rem));--t-h2:calc(clamp(1.25rem, .9rem + 1.2vw, 1.9rem));--t-h3:calc(clamp(1.05rem, .95rem + .5vw, 1.3rem));--t-body:calc(clamp(.92rem, .88rem + .18vw, 1.02rem));--t-small:.8125rem;--t-micro:.6875rem;--ease:cubic-bezier(.22, .61, .36, 1);--ease-book:cubic-bezier(.33, .02, .18, 1);--turn:.82s;--write:.9s}@media (prefers-reduced-motion:reduce){:root{--turn:1ms;--write:1ms}}*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{background:var(--desk);min-height:100dvh;color:var(--ink);font-family:var(--f-sans-th);font-size:var(--t-body);-webkit-font-smoothing:antialiased;background-image:radial-gradient(120% 90% at 50% 0,#ffffff38,#0000 60%),radial-gradient(90% 70% at 50% 120%,#3c2a1c2e,#0000 60%);line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}.desk{grid-template-rows:auto 1fr;gap:0;min-height:100dvh;padding:calc(clamp(.75rem,1.4vw,1.4rem)) calc(clamp(.75rem,2vw,2.2rem)) calc(clamp(.75rem,2vw,2.2rem));display:grid}.book{background:linear-gradient(180deg,var(--cover) 0,var(--cover-dark) 100%);perspective:2400px;border-radius:16px;width:min(1420px,100%);margin:0 auto;padding:calc(clamp(8px,.7vw,14px));box-shadow:0 2px 4px #32221447,0 26px 60px -22px #281a0ead}.book,.spread{position:relative}.spread{background:var(--page);border-radius:9px;grid-template-columns:1fr 1fr;min-height:calc(min(76dvh,880px));display:grid;overflow:hidden;box-shadow:inset 0 1px #ffffffb3}.spread:after{content:"";inset-block:0;pointer-events:none;background:linear-gradient(90deg,transparent 0,var(--gutter) 38%,#4634244d 50%,var(--gutter) 62%,transparent 100%);z-index:3;width:calc(clamp(26px,3vw,54px));position:absolute;left:50%;transform:translate(-50%)}.leaf{background-blend-mode:multiply;background-image:url(../img/tex/paper-fibre.png);background-size:420px;min-width:0;padding:calc(clamp(1.1rem,2vw,2.4rem)) calc(clamp(1.1rem,2.2vw,2.6rem));position:relative}.leaf--left{padding-right:calc(clamp(1.4rem,2.6vw,3rem))}.leaf--right{padding-left:calc(clamp(1.4rem,2.6vw,3rem))}.tabs{z-index:4;justify-content:flex-end;gap:calc(clamp(4px,.5vw,10px));width:min(1420px,100%);margin:0 auto;padding-right:calc(clamp(1rem,4vw,5rem));display:flex}.tab,.tabs{position:relative}.tab{background:linear-gradient(180deg,var(--page-warm),var(--page-deep));min-width:calc(clamp(78px,8vw,116px));color:var(--muted);font-family:var(--f-sans);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;transition:transform .34s var(--ease),color .34s var(--ease),background .34s var(--ease);border-radius:12px 12px 0 0;justify-items:center;gap:3px;padding:calc(clamp(.5rem,.9vw,.85rem)) calc(clamp(.7rem,1.2vw,1.3rem)) calc(clamp(.85rem,1.2vw,1.1rem));font-weight:600;display:grid;transform:translateY(6px);box-shadow:inset 0 -1px #fff9,0 -8px 18px -10px #281a0e80}.tab:hover{color:var(--ink-soft);transform:translateY(2px)}.tab[aria-current=page]{color:var(--orange);background:linear-gradient(180deg,#fffcf5,var(--page));transform:translateY(0);box-shadow:inset 0 -2px #fffc,0 -10px 22px -10px #281a0e8c}.tab svg{stroke:currentColor;fill:none;stroke-width:1.6px;width:20px;height:20px}.turner{z-index:6;transform-origin:0;transform-style:preserve-3d;backface-visibility:hidden;background:linear-gradient(90deg,#5a443042 0,#fff0 14%),var(--page);background-blend-mode:multiply,normal;pointer-events:none;animation:leaf-turn var(--turn) var(--ease-book) forwards;background-image:url(../img/tex/paper-fibre.png),none;background-size:420px,auto;border-radius:0 9px 9px 0;position:absolute;inset:calc(clamp(8px,.7vw,14px)) calc(clamp(8px,.7vw,14px)) calc(clamp(8px,.7vw,14px)) 50%;box-shadow:-10px 0 26px -12px #281a0e80}@keyframes leaf-turn{0%{transform:rotateY(0);box-shadow:-6px 0 18px -12px #281a0e66}60%{box-shadow:-26px 0 46px -14px #281a0e8c}to{transform:rotateY(-178deg);box-shadow:10px 0 30px -14px #281a0e4d}}.turn-shade{z-index:5;pointer-events:none;animation:shade-sweep var(--turn) var(--ease-book) forwards;background:linear-gradient(270deg,#3222144d,#0000 62%);border-radius:9px 0 0 9px;position:absolute;inset:calc(clamp(8px,.7vw,14px)) 50% calc(clamp(8px,.7vw,14px)) calc(clamp(8px,.7vw,14px))}@keyframes shade-sweep{0%{opacity:0}38%{opacity:1}to{opacity:0}}.write>*{animation:write-in var(--write) var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}@keyframes write-in{0%{clip-path:inset(0 100% 0 0);opacity:.25;transform:translateY(5px)}to{clip-path:inset(0);opacity:1;transform:none}}.swash{background:var(--orange);transform-origin:0;width:calc(clamp(92px,12vw,164px));height:7px;animation:swash-draw calc(var(--write) * .8) var(--ease) both;animation-delay:calc(.16s + var(--i,0) * 90ms);border-radius:99px;margin-top:.35rem;display:block}@keyframes swash-draw{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (width<=900px){.book,.desk{padding:0}.book{box-shadow:none;background:var(--page);min-height:100dvh}.book,.spread,.tab{border-radius:0}.spread{min-height:0;padding-bottom:calc(68px + env(safe-area-inset-bottom,0px));grid-template-columns:1fr}.spread:after,.turn-shade,.turner{display:none}.leaf{padding:calc(clamp(1rem,4.5vw,1.4rem))}.leaf--left,.leaf--right{padding-inline:calc(clamp(1rem,4.5vw,1.4rem))}.leaf--right{margin-top:.4rem;padding-top:1.3rem}.leaf--right,.tabs{border-top:1px solid var(--rule)}.tabs{width:100%;padding:0 0 env(safe-area-inset-bottom,0);-webkit-backdrop-filter:saturate(1.2)blur(8px);backdrop-filter:saturate(1.2)blur(8px);z-index:40;background:#faf6eef5;justify-content:stretch;gap:0;margin:0;position:fixed;inset:auto 0 0;box-shadow:0 -8px 24px -18px #281a0ecc}.tab{letter-spacing:.1em;flex:1;min-width:0;padding:.55rem .25rem .5rem;font-size:10px}.tab,.tab[aria-current=page]{box-shadow:none;background:0 0;transform:none}.tab[aria-current=page]:before{content:"";background:var(--orange);border-radius:0 0 3px 3px;height:3px;position:absolute;top:0;left:28%;right:28%}.tab:hover{transform:none}}