@font-face{font-family:Prata;src:url(/fonts/Prata-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/Jost-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/Jost-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--paper:#f6f1e4;--ink:#1c2145;--ink2:#4d5272;--rule:rgb(28 33 69 / .2);--gt:clamp(18px,3vw,44px)}
*{box-sizing:border-box}body{margin:0;font:400 18px/1.4 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}p,h1,h2,h3,figure{margin:0}img{display:block}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}:focus-visible{outline:2px solid currentColor;outline-offset:3px}
html{transition:background .6s}html.lock{overflow:hidden}
html{background:#2c2a26}
.tbl{color:var(--ink);min-height:100svh;background:#2c2a26 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");}
.tb{position:relative;height:100dvh;min-height:620px;overflow:hidden;background:radial-gradient(ellipse at 45% 35%,rgb(255 236 200 / .09),transparent 60%)}
/* Sheets on the table: a paper margin, the print, a pencilled name in the margin. */
.pc,.nt{position:absolute;left:var(--x);top:var(--y);rotate:var(--r);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transition:box-shadow .25s,rotate .35s,scale .25s;box-shadow:0 1px 1px rgb(0 0 0 / .25),0 6px 14px -4px rgb(0 0 0 / .4),0 22px 40px -18px rgb(0 0 0 / .55)}
.pc{width:var(--w);background:var(--paper);padding:clamp(10px,1.1vw,18px) clamp(10px,1.1vw,18px) 0}.pc img{width:100%;height:auto;pointer-events:none}
.pc:hover,.nt:hover,.pc:focus-visible{rotate:calc(var(--r)*.4);scale:1.015;box-shadow:0 1px 1px rgb(0 0 0 / .2),0 14px 24px -6px rgb(0 0 0 / .45),0 40px 60px -24px rgb(0 0 0 / .6)}
.up{cursor:grabbing;scale:1.04!important;transition:box-shadow .25s,scale .2s;box-shadow:0 30px 50px -16px rgb(0 0 0 / .6),0 60px 90px -40px rgb(0 0 0 / .6)!important}
.pm{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 0 10px}.pm b{font:400 clamp(18px,1.5vw,24px)/1.1 Prata,serif;white-space:nowrap}.pm i{font-style:normal;font-size:13px;line-height:1.25;color:var(--ink2);text-align:right;max-width:20em;opacity:0;transition:opacity .3s}.pc:hover .pm i,.pc:focus-visible .pm i{opacity:1}
.ttl{background:var(--paper);padding:clamp(18px,2vw,30px) clamp(22px,2.4vw,36px) clamp(16px,1.6vw,26px);cursor:grab}.ttl h1{font:400 clamp(70px,8.5vw,150px)/.92 Prata,serif;letter-spacing:-.02em;margin-left:-.03em}.ttl p{font-size:clamp(16px,1.3vw,20px);font-weight:500;margin-top:8px}
.abt{width:clamp(180px,15vw,240px);aspect-ratio:5/3;background:#fbf8ef;padding:16px 18px;background-image:linear-gradient(transparent 33px,#d6563f 33px,#d6563f 34px,transparent 34px),repeating-linear-gradient(transparent 0 23px,rgb(60 110 170 / .25) 23px 24px);background-position:0 0,0 34px;display:flex;flex-direction:column;justify-content:space-between}.abt b{font:400 24px/1 Prata,serif}.abt span{font-size:15px;line-height:1.3}
.fld{width:clamp(220px,19vw,320px);aspect-ratio:4/3;background:#d9b878;padding:26px 20px 18px;border-radius:0 6px 6px 6px;display:flex;flex-direction:column;justify-content:flex-end}.fld .tab{position:absolute;top:-24px;left:0;background:#d9b878;padding:4px 16px 2px;border-radius:6px 6px 0 0;font:400 20px/1.1 Prata,serif}.fb{font-size:15px;line-height:1.3;max-width:15em}
.mob{display:none}
@media (orientation:portrait),(max-width:699px){
 .tb{height:auto;min-height:100svh;overflow:visible}.tb>.nt,.tb>.pc{display:none}
 .mob{display:flex;flex-direction:column;min-height:100svh;padding:max(14px,env(safe-area-inset-top)) var(--gt) max(18px,env(safe-area-inset-bottom));color:var(--paper)}
 .mh h1{font:400 clamp(72px,21vw,140px)/.95 Prata,serif;letter-spacing:-.02em;margin-left:-.03em}.mh p{font-size:18px;font-weight:500;margin-top:5px}
 .stk{position:relative;flex:1;min-height:380px;margin:26px 0 8px;touch-action:pan-y}
 .sc{position:absolute;left:50%;top:50%;width:min(86vw,420px);background:var(--paper);color:var(--ink);padding:12px 12px 0;translate:-50% -50%;rotate:calc((var(--k) * 3deg) - 3deg);scale:calc(1 - var(--k)*.03);transition:translate .26s ease-out,rotate .26s,scale .26s;box-shadow:0 2px 3px rgb(0 0 0 / .3),0 22px 40px -16px rgb(0 0 0 / .6);-webkit-user-select:none;user-select:none}
 .sc[style*="--k: 0"],.sc[style*="--k:0"]{rotate:-.6deg}
 .sc img{width:100%;height:auto;max-height:52svh;object-fit:contain;pointer-events:none;background:var(--paper)}.sc .pm i{opacity:1;font-size:13px}.sc.drag{transition:none}.sc.back{transition:none;opacity:0}
 .sc:not(:first-child){}
 .hint{text-align:center;font-size:15px;opacity:.65}.mf{display:flex;justify-content:space-between;margin-top:18px;font:400 26px/1 Prata,serif}.mf a{border-bottom:1px solid rgb(246 241 228 / .4)}
}
@media (prefers-reduced-motion:reduce){.pc,.nt,.sc{transition:none}}

.sh{position:fixed;inset:0;z-index:50;color:var(--paper);opacity:0;transition:opacity .35s}.sh.in{opacity:1}.sh[hidden]{display:none}
.sbg{position:absolute;inset:0;height:100lvh}.sbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.sfade{position:absolute;inset:0;height:100lvh;pointer-events:none;mix-blend-mode:multiply;background:linear-gradient(to bottom,rgb(28 33 69 / .5),rgb(28 33 69 / 0) 16%,rgb(28 33 69 / 0) 46%,rgb(28 33 69 / .86) 74%,rgb(28 33 69 / .92))}
.ssc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.sop{min-height:84svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gt) 26px}.sop small{font-size:17px;font-weight:500}.sop h2{font:400 clamp(58px,16vw,120px)/1.02 Prata,serif;letter-spacing:-.015em;margin:2px 0 8px -.02em;overflow-wrap:anywhere}.sop p{font-size:clamp(21px,2vw,26px);line-height:1.25;max-width:24em}
.sbody{position:relative;background:var(--paper);color:var(--ink);padding:24px var(--gt) max(40px,env(safe-area-inset-bottom));min-height:60svh;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.sh.anim .sbody{transform:translateY(40svh)}.sh.anim.in .sbody{transform:none}.sh.anim .sop{opacity:0;transform:translateY(16px);transition:opacity .5s .1s,transform .5s .1s}.sh.anim.in .sop{opacity:1;transform:none}
.open{display:block;padding:15px 18px 16px;background:var(--ink);color:var(--paper);font-size:19px;font-weight:500;text-align:center}
.story section{margin-top:28px}.story h3{font:500 16px/1.2 Jost,sans-serif;margin-bottom:6px;color:var(--ink2)}.story p{font-size:20px;line-height:1.38}
.shot{margin:34px auto 0;max-width:min(72%,320px)}.shot img{width:100%;height:auto;border:1px solid var(--rule)}.shot figcaption{padding-top:8px;font-size:15.5px;color:var(--ink2);text-align:center}
dl{display:grid;grid-template-columns:5.6em 1fr;gap:9px 12px;margin:34px 0 0;padding-top:16px;border-top:1px solid var(--rule);font-size:16.5px;line-height:1.35}dt{color:var(--ink2)}dd{margin:0;min-width:0}dd a{text-decoration:underline;text-underline-offset:3px}
.cr{margin-top:28px;padding-top:16px;border-top:1px solid var(--rule);font-size:15.5px;line-height:1.4;color:var(--ink2)}.cr b{font-weight:500;color:var(--ink)}
.x{position:fixed;z-index:2;right:var(--gt);top:max(14px,env(safe-area-inset-top));font-weight:500;padding:7px 14px;border-radius:99px;background:rgb(28 33 69 / .55);color:var(--paper);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (orientation:landscape) and (min-width:700px){
 .sbg img{top:auto;bottom:0;height:auto;object-fit:fill;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%);mask-image:linear-gradient(to bottom,transparent,#000 9%)}
 .sop{min-height:78vh;padding-bottom:30px}.sbody{width:min(820px,100%);margin:0 0 0 var(--gt);padding:30px clamp(26px,4vw,56px) 56px}
 .story{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}.open{display:inline-block;padding-inline:28px}}
@media (orientation:landscape) and (min-width:700px) and (min-aspect-ratio:16/9){.sbg img{top:0;height:100%;object-fit:cover;-webkit-mask-image:none;mask-image:none}}
@media (prefers-reduced-motion:reduce){html,.sh,.sbody,.sop{transition:none!important}.sh.anim .sbody,.sh.anim .sop{transform:none;opacity:1}}
