@layer tokens,primitives,composition,responsive;@layer tokens{:root{color-scheme:light;--paper: #f2eedf;--paper-light: #fffaf0;--ink: #293b32;--ink-soft: #56604e;--pencil: #994937;--sage: #647059;--rule: #a6ac99;--focus: #8f3928;--font-body: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;--font-book: Georgia, "Songti SC", "SimSun", serif;--font-note: "Palatino Linotype", Palatino, "Kaiti SC", "STKaiti", serif;--font-index: "Courier New", monospace;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--space-16: 4rem;--radius-control: 2px;--shadow-paper: 2px 8px 15px #26352d18;--duration: .16s;--ease: cubic-bezier(.2,.7,.3,1);--z-skip: 100;--z-modal: 50;font-family:var(--font-body);color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0}button,input{font:inherit;color:inherit}a{color:inherit;text-underline-offset:5px}button,summary{cursor:pointer}button,a,input,summary{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--focus);outline-offset:5px}::selection{background:#d5cda7;color:#203326}[inert]{pointer-events:none}p{line-height:1.65}img{display:block;max-width:100%}}@layer primitives{.control{border:1px solid transparent;border-radius:var(--radius-control);background:transparent;min-height:44px;min-width:44px;padding:.65rem .8rem;line-height:1.25;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);transition:background var(--duration) var(--ease),color var(--duration) var(--ease)}.control:hover{background:#e5e1ce}.control[aria-pressed=true]{color:var(--pencil);border-bottom:2px solid var(--pencil)}.eyebrow{font:12px/1.7 var(--font-index);letter-spacing:.1em;text-transform:uppercase}.pencil-note{font:italic 22px/1.45 var(--font-note);color:var(--pencil)}.text-link{display:inline-flex;align-items:center;min-height:44px;gap:var(--space-2)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:fixed;top:-120px;left:20px;padding:16px;z-index:var(--z-skip);background:var(--paper-light)}.skip-link:focus{top:12px}details{border-top:1px solid var(--rule);padding:var(--space-3) 0}summary{min-height:44px;padding:.7rem 0;font-size:14px;line-height:1.5}details p{font-size:14px}.image-frame{position:relative;width:100%;background:#e2decd;overflow:hidden}.image-frame img{width:100%;height:auto}.drawing-button{display:block;position:relative;width:100%;min-width:44px;min-height:44px;border:0;background:transparent;padding:0;text-align:left}.drawing-button:focus-visible{outline-offset:-6px;outline:4px solid var(--paper-light);box-shadow:inset 0 0 0 7px var(--focus)}.image-loading{position:absolute;inset:auto 0 0;padding:16px;background:var(--paper);font:13px var(--font-index)}.open-hint{position:absolute;right:12px;bottom:12px;width:44px;height:44px;display:grid;place-content:center;font-size:24px;background:var(--paper-light);color:var(--ink);opacity:0;transition:opacity var(--duration)}.drawing-button:hover .open-hint,.drawing-button:focus-visible .open-hint{opacity:1}.asset-error{height:100%;min-height:260px;display:flex;flex-direction:column;gap:var(--space-3);justify-content:center;align-items:center;padding:var(--space-6);text-align:center}.asset-error p{max-width:260px;margin:0;font-size:14px}.asset-error .control{border:1px solid var(--ink-soft)}.error-mark{font:44px var(--font-book);color:var(--pencil)}}@layer composition{.site-shell{max-width:1720px;margin:auto;padding:var(--space-8) 5vw 0}.site-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:var(--space-6)}.wordmark{font:italic 46px/1 var(--font-book);letter-spacing:-3px;text-decoration:none;display:inline-flex;align-items:center;min-height:48px}.wordmark svg{color:var(--pencil);width:25px;height:29px;margin-left:7px;transform:rotate(10deg)}.header-nav{display:flex;gap:var(--space-6);align-items:center;font-size:14px}.header-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.header-nav a:hover{text-decoration:underline}.language-button{border-left:1px solid var(--rule);border-radius:0}.intro{padding:68px 0 37px;position:relative}.intro .eyebrow{margin:0 0 28px}.intro h1{font:normal clamp(80px,9.2vw,154px)/.91 var(--font-book);letter-spacing:-.065em;margin:0 0 32px;max-width:950px}.intro h1 i{font-weight:400;color:var(--sage)}.intro>.pencil-note{position:absolute;right:5%;top:34%;transform:rotate(-7deg)}.series-label{font:11px/1.5 var(--font-index);letter-spacing:.16em;color:var(--ink-soft)}.page-tools{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-6);padding:var(--space-6) 0;border-top:1px solid var(--rule)}.collection-tabs{display:flex;gap:.2rem;flex-wrap:wrap;margin-left:-.8rem}.collection-tabs .control{font-size:14px}.tab-number{align-self:flex-start;font:10px var(--font-index);margin-top:-1px}.search-field{display:flex;align-items:center;border-bottom:1px solid var(--ink-soft);width:260px}.search-field svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.search-field input{padding:.7rem;min-height:44px;min-width:0;width:100%;background:transparent;border:0;font-size:14px;border-radius:0}.search-field input::placeholder{color:var(--ink-soft);opacity:1}.page-index{display:flex;justify-content:space-between;font:11px/1.6 var(--font-index);letter-spacing:.08em;color:var(--ink-soft);margin-top:12px}.sketchbook-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);column-gap:9%;row-gap:85px;align-items:start;padding:52px 2% 90px}.art-page{margin:0;min-width:0;position:relative}.paper-mount{padding:14px;background:var(--paper-light);box-shadow:var(--shadow-paper);transform:rotate(-1.5deg);position:relative}.paper-mount:before{content:"";position:absolute;top:-13px;left:40%;z-index:1;width:100px;height:29px;background:#d0bc8eaa;transform:rotate(-5deg);pointer-events:none}.art-page:nth-child(2n) .paper-mount{transform:rotate(2deg)}.art-page:nth-child(3n) .paper-mount{transform:rotate(-2.5deg)}.art-page figcaption{font:24px/1.35 var(--font-book);padding:25px 4px 0}.drawing-number{font-style:italic;font-size:20px;color:var(--ink-soft)}.art-collection{display:block;margin-top:10px;font:11px/1.6 var(--font-index);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}.art-page:nth-child(2){padding-top:145px}.art-page:nth-child(2)>.pencil-note{margin:-60px 0 35px;transform:rotate(-5deg)}.art-page:nth-child(3){max-width:90%;margin-top:-10px}.art-page:nth-child(4){margin-top:40px}.art-page:nth-child(5){max-width:84%;margin-left:9%}.art-page:nth-child(6){margin-top:110px}.art-page:nth-child(7){max-width:88%}.art-page:nth-child(8){margin-top:130px}.art-page:nth-child(9){grid-column:1 / -1;max-width:55%;justify-self:center;margin-top:10px}.margin-star{position:absolute;right:-43px;top:-10px;width:87px;height:96px;color:var(--pencil);pointer-events:none;transform:rotate(8deg)}.scenic-sticker{width:120px;height:120px;display:grid;place-content:center;margin:40px 0 -35px 23%;border:1px solid var(--pencil);border-radius:50%;font:italic 19px/1.25 var(--font-note);color:var(--pencil);transform:rotate(-13deg);text-align:center}.empty-page{text-align:center;padding:70px 20px 90px}.empty-page svg{width:60px;height:66px;color:var(--pencil)}.empty-page h2{font:36px var(--font-book)}.empty-page .control{border:1px solid var(--ink-soft)}.unknown-drawing{margin:25px 0;padding:20px;border:1px solid var(--pencil)}.tiny-note{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-12);border-top:1px solid var(--rule);padding:60px 7% 65px}.note-asterisk{font:170px/1 var(--font-book);color:var(--pencil);text-align:center;transform:rotate(-12deg)}.tiny-note h2{font:34px/1.2 var(--font-book);font-weight:400;max-width:470px}.tiny-note p{max-width:600px;font-size:15px}.tiny-note .eyebrow{font-size:11px}.site-footer{border-top:1px solid var(--rule);padding:22px 0 26px;display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:12px;line-height:1.6}.site-footer nav{display:flex;gap:24px;flex-wrap:wrap}.site-footer a{display:inline-flex;align-items:center;min-height:44px}.dialog-backdrop{position:fixed;inset:0;z-index:var(--z-modal);background:#1d2c27b8;overflow-y:auto;padding:32px;display:flex;align-items:flex-start;justify-content:center}.drawing-dialog{background:var(--paper);max-width:1460px;width:100%;box-shadow:0 24px 100px #0005;padding:24px 32px 40px;margin:auto}.dialog-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--rule);padding-bottom:16px;margin-bottom:32px}.dialog-topline .control{border:1px solid var(--ink-soft)}.detail-spread{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:5%;align-items:start}.detail-art{padding:12px;background:var(--paper-light)}.detail-notes{min-width:0}.detail-notes h2{font:48px/1.05 var(--font-book);font-weight:400;letter-spacing:-.03em;margin:18px 0 26px;overflow-wrap:anywhere}.detail-notes .pencil-note{transform:rotate(-3deg);margin-bottom:32px}.description{font-size:15px}.provenance{margin:30px 0 10px}.provenance h3{font:20px var(--font-book)}.provenance p{font-size:13px}.provenance dl{font-size:12px;line-height:1.6}.provenance dt{font-weight:700;margin-top:12px}.provenance dd{margin:3px 0 0;overflow-wrap:anywhere;font-family:var(--font-index)}:lang(zh) .tiny-note h2,:lang(zh) .detail-notes .pencil-note,:lang(zh) .provenance>p{text-wrap:balance}}@layer responsive{@media(min-width:1600px){.site-shell{padding-left:100px;padding-right:100px}.sketchbook-grid{padding-left:55px;padding-right:55px;gap:100px 12%;grid-template-columns:.95fr 1fr}.art-page:nth-child(1){max-width:550px}.intro>.pencil-note{right:12%}}@media(max-width:1000px){.intro>.pencil-note{right:0;font-size:19px;top:44%}.intro h1{font-size:clamp(72px,10vw,112px)}.page-tools{gap:14px}.search-field{width:100%;max-width:340px}.sketchbook-grid{column-gap:7%;row-gap:70px;padding-left:1%;padding-right:2%}.art-page:nth-child(2){padding-top:85px}.art-page figcaption{font-size:21px}.paper-mount{padding:10px}.margin-star{width:60px;height:66px;right:-25px}.detail-spread{grid-template-columns:1fr 1fr;gap:24px}.detail-notes h2{font-size:36px}.tiny-note{padding-left:0;padding-right:0;grid-template-columns:.6fr 2fr}.note-asterisk{font-size:130px}}@media(max-width:600px){.site-shell{padding:22px 22px 0}.site-header{padding-bottom:15px}.wordmark{font-size:39px}.wordmark svg{width:21px}.header-nav{gap:10px;font-size:12px}.header-nav .control{padding-left:8px;padding-right:8px}.intro{padding-top:38px;padding-bottom:24px}.intro .eyebrow{font-size:10px;letter-spacing:.07em;margin-bottom:24px;max-width:280px}.intro h1{font-size:clamp(65px,17.7vw,104px);margin-bottom:20px}.intro>.pencil-note{position:static;font-size:19px;transform:rotate(-3deg);margin:20px 0 24px 6px}.intro>.pencil-note br{display:none}.series-label{font-size:10px}.page-tools{padding:18px 0;gap:20px}.collection-tabs{column-gap:5px;row-gap:3px;margin-left:-8px}.collection-tabs .control{padding:10px 8px;font-size:12px}.search-field{max-width:none}.sketchbook-grid{grid-template-columns:minmax(0,1fr);gap:52px;padding:40px 6px 60px}.art-page:nth-child(n){margin:0;padding:0;max-width:100%;grid-column:auto}.art-page:nth-child(2n){width:94%;justify-self:end}.art-page:nth-child(3n){width:90%;justify-self:start}.art-page:nth-child(2)>.pencil-note{margin:0 0 24px 7px}.paper-mount:before{width:78px;height:25px;top:-12px}.art-page figcaption{font-size:22px;padding-top:22px}.art-collection{font-size:10px;margin-top:8px}.scenic-sticker{width:100px;height:100px;margin:28px 0 0 19%;font-size:17px}.margin-star{right:-17px;width:48px;top:-22px}.open-hint{width:36px;height:36px;opacity:1;right:8px;bottom:8px;font-size:20px}.tiny-note{grid-template-columns:1fr;gap:5px;padding:35px 0}.note-asterisk{font-size:70px;text-align:left;margin-left:6px}.tiny-note h2{font-size:31px}.site-footer{flex-direction:column;align-items:start;gap:8px}.site-footer nav{gap:20px}.dialog-backdrop{padding:12px}.drawing-dialog{padding:14px 16px 28px}.dialog-topline{margin-bottom:24px;padding-bottom:12px}.detail-spread{grid-template-columns:minmax(0,1fr);gap:28px}.detail-art{padding:7px}.detail-notes h2{font-size:37px}.empty-page h2{font-size:30px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}}
