/* Hallmark · genre: editorial gallery · theme: reading room · shape: curated library · v2.0.0 */
/* Critique: real slide frames lead; compact library follows a generous editorial opening. */
/* Waiver: complete 38-work catalog exceeds marketing word/image budgets by explicit user requirement. */
:root{--paper:#f5f2eb;--ink:#242721;--muted:#62665d;--line:#d4d4c9;--accent:#873e30;--white:#fff;--display:Newsreader,Georgia,'Times New Roman','Noto Serif SC',serif;--body:"DM Sans",Arial,'Microsoft YaHei','PingFang SC',sans-serif;--max:1440px;--gap:32px}

@font-face{font-family:Newsreader;src:url("fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--body)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
img{display:block;width:100%;height:auto}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed;background:var(--line);color:var(--ink)}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:auto;padding-inline:48px}
.skip{position:fixed;top:8px;left:8px;z-index:20;background:var(--paper);padding:12px;transform:translateY(-150%)}
.skip:focus{transform:none}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:96px;border-bottom:1px solid var(--line)}
.brand{font:25px/1.15 var(--display);letter-spacing:-.03em}
.brand span{display:block;font:13px/1.8 var(--body);letter-spacing:0;color:var(--muted)}
nav{display:flex;gap:32px;align-items:center}
nav a{padding-block:12px;font-size:15px}
nav a:hover{color:var(--accent)}
.hero{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0,1.15fr);gap:56px;align-items:center;padding-block:72px 76px}
.hero h1{font:clamp(54px,5.7vw,85px)/1.04 var(--display);letter-spacing:-.035em;margin:0 0 28px;overflow-wrap:break-word;min-width:0}
.hero-copy>p{max-width:380px;color:var(--muted);font-size:18px;line-height:1.7;margin:0 0 32px}
.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;min-height:48px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-size:15px;transition:background .18s,color .18s}
.button:hover{background:var(--accent);border-color:var(--accent)}
.hero-count{display:block;font-size:13px;color:var(--muted);margin-top:20px}
.hero-art{margin:0}
.hero-art a{display:block}
.hero-art img{aspect-ratio:16/9;object-fit:contain;background:var(--ink)}
.hero-art figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:16px;color:var(--muted);font-size:13px}
.hero-art strong{font-weight:400;color:var(--ink)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-top:1px solid var(--ink);padding-top:24px;margin-bottom:32px}
.section-head h2{font:38px/1.2 var(--display);letter-spacing:-.02em;margin:0;overflow-wrap:break-word;min-width:0}
.section-head p{font-size:14px;color:var(--muted);margin:0}
.selected{padding-bottom:80px}
.selected-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--gap)}
.feature{grid-column:span 3}
.feature:nth-child(-n+2){grid-column:span 6}
.feature img{aspect-ratio:16/9;object-fit:contain;background:var(--ink);transition:transform .25s}
.feature a{display:block}
.feature a:hover img{transform:translateY(-4px)}
.feature h3{font:22px/1.4 var(--display);margin:16px 0 4px}
.feature p{margin:0;color:var(--muted);font-size:13px}
.feature .subject{display:block;margin-top:8px;font-size:12px;color:var(--accent)}
.library{padding-bottom:80px}
.filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.4fr) auto;gap:16px;align-items:end}
.field label{display:block;font-size:13px;margin-bottom:8px}
.field input,.field select{display:block;width:100%;height:50px;background:transparent;color:var(--ink);border:1px solid var(--line);padding:0 16px;border-radius:0}
.clear{min-height:50px;padding:0 20px;border:1px solid var(--line);background:transparent;color:var(--ink)}
.clear:hover{border-color:var(--ink)}
.results-line{display:flex;justify-content:space-between;margin:20px 0;color:var(--muted);font-size:13px}
.index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.entry{border-top:1px solid var(--line);padding:24px 0}
.entry a{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;align-items:center;min-height:110px}
.entry img{aspect-ratio:16/9;object-fit:contain;background:var(--ink)}
.entry h3{font-size:19px;line-height:1.45;font-weight:500;margin:0 0 4px;overflow-wrap:break-word;min-width:0}
.entry .en{color:var(--muted);font-size:12px;margin:0 0 8px}
.entry .summary{font-size:13px;color:var(--muted);line-height:1.7;margin:0}
.entry a:hover h3{color:var(--accent)}
.entry .meta{font-size:11px;color:var(--accent);margin-top:8px}
.empty{padding:48px 0;text-align:center;border-block:1px solid var(--line)}
.empty h3{font:30px var(--display)}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;padding:56px 0 72px;border-top:1px solid var(--ink)}
.about h2{font:46px/1.12 var(--display);letter-spacing:-.025em;margin:0;overflow-wrap:break-word;min-width:0}
.about p{margin:0 0 20px;color:var(--muted);max-width:540px}
.about a{text-decoration:underline;text-underline-offset:5px}
.footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-block:24px 36px;font-size:12px;color:var(--muted)}
.footer a{display:inline-block;padding-block:12px}
.error-page{padding-block:100px;max-width:650px}
.error-page h1{font:64px var(--display)}

@media(min-width:1500px){.hero{padding-block:84px 96px}
.selected-grid{gap:48px var(--gap)}
}

@media(max-width:1100px){.wrap{padding-inline:32px}
.hero{gap:32px;padding-block:48px 60px}
.hero h1{font-size:60px}
.entry a{grid-template-columns:120px minmax(0,1fr);gap:16px}
.index-grid{gap:0 28px}
.selected-grid{gap:32px 24px}
}

@media(max-width:760px){.wrap{padding-inline:24px}
.masthead{min-height:85px}
.brand{font-size:22px}
.brand span{font-size:12px}
nav{gap:20px}
nav a{font-size:13px}
nav a:last-child{display:none}
.hero{grid-template-columns:minmax(0,1fr);gap:36px;padding-block:40px 48px}
.hero h1{font-size:57px;max-width:420px}
.hero-copy>p{font-size:16px;margin-bottom:24px}
.hero-art figcaption{font-size:12px}
.section-head{align-items:start;flex-direction:column;gap:8px;margin-bottom:24px}
.section-head h2{font-size:32px}
.selected-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
.feature,.feature:nth-child(-n+2){grid-column:auto}
.feature h3{font-size:18px}
.feature p{font-size:12px}
.selected{padding-bottom:48px}
.filters{grid-template-columns:minmax(0,1fr) auto}
.field:first-child{grid-column:1/-1}
.index-grid{grid-template-columns:minmax(0,1fr)}
.entry a{grid-template-columns:112px minmax(0,1fr);gap:20px}
.entry h3{font-size:18px}
.entry .summary{font-size:12px}
.about{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:36px}
.about h2{font-size:38px}
.footer{flex-wrap:wrap}
.library{padding-bottom:48px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}


button:active,.button:active{transform:translateY(1px)}


h1,h2{ text-wrap:balance }