:root { --ink:#14120e; --paper:#f2ead8; --gold:#c99a28; --red:#813b2a; --muted:#70695d; } * { box-sizing:border-box; } html { background:var(--ink); color:var(--paper); font-family:Arial,"Microsoft YaHei",sans-serif; } body { margin:0; min-width:320px; background:radial-gradient(circle at 85% 8%,#3b2c14 0,transparent 24rem),var(--ink); } button,input { font:inherit; } button { cursor:pointer; } .skip-link { position:absolute; left:1rem; top:-4rem; background:var(--paper); color:var(--ink); padding:.6rem; z-index:10; } .skip-link:focus { top:1rem; } .masthead,main,footer { width:min(1180px,calc(100% - 2.5rem)); margin:auto; } .masthead { min-height:4.8rem; border-bottom:1px solid #62522a; display:flex; justify-content:space-between; align-items:center; font-family:monospace; letter-spacing:.13em; font-size:.68rem; color:#d7c69c; } .masthead p { margin:0; } .masthead span { color:var(--gold); font-size:1rem; font-weight:bold; } .hero { min-height:31rem; display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:end; padding:5rem 0 4rem; border-bottom:1px solid #62522a; } .eyebrow,.card-id { margin:0 0:.65rem; color:var(--gold); font:700 .7rem/1.3 monospace; letter-spacing:.13em; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; max-width:8ch; color:var(--paper); font-size:clamp(3.8rem,9vw,8rem); line-height:.87; letter-spacing:-.09em; } h2 { margin-bottom:0; font-size:clamp(1.8rem,4vw,3.2rem); letter-spacing:-.06em; } h3 { font-size:1.18rem; } .hero-copy { max-width:30rem; margin:0 0 .4rem auto; color:#d5c9b3; line-height:1.9; } .tools { display:flex; justify-content:space-between; gap:1rem; padding:1.3rem 0; border-bottom:1px solid #62522a; } .tools label { color:#d5c9b3; font-size:.82rem; } input { margin-left:.6rem; max-width:15rem; border:0; border-bottom:1px solid var(--gold); border-radius:0; padding:.35rem; background:transparent; color:var(--paper); outline-offset:4px; } .filters { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:end; } .filter,.text-button { border:1px solid #766033; padding:.33rem .55rem; background:transparent; color:#e9ddc6; font-size:.75rem; } .filter[aria-pressed="true"],.filter:hover,.text-button:hover { background:var(--gold); color:var(--ink); } .archive-section,.feature-section,.private-section { padding:4.5rem 0; border-bottom:1px solid #62522a; } .section-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.7rem; } .section-head .eyebrow { align-self:start; } .section-head > span { color:#d5c9b3; font: .7rem monospace; } .index-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#62522a; border:1px solid #62522a; } .archive-card { min-height:13rem; padding:1.2rem; background:#1d1a14; display:flex; flex-direction:column; align-items:flex-start; } .card-type,.volume { color:#bcb19d; font-size:.83rem; } .volume { margin: auto 0 0; color:var(--gold); } .tags { display:flex; flex-wrap:wrap; gap:.35rem; } .tag { border:1px solid #65562e; padding:.2rem .35rem; color:#d9cba8; font-size:.7rem; } .feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; } .feature-card { min-height:18rem; padding:1.5rem; background:var(--paper); color:var(--ink); border-left:8px solid var(--gold); } .context,.detail { line-height:1.75; } .feature-card .tag { border-color:#a9842b; color:#493b18; } .restricted { display:grid; grid-template-columns:1fr minmax(19rem,.7fr); gap:3rem; padding:4.5rem 0; } .restricted h2 { color:var(--gold); } .restricted p { color:#d5c9b3; line-height:1.8; } .unlock-form { align-self:end; background:#241f15; padding:1.4rem; border:1px solid #74602c; } .unlock-form label { display:block; color:#d5c9b3; font-size:.8rem; } .unlock-form input { display:block; width:100%; max-width:none; margin:.5rem 0 1rem; } .unlock-form button { border:0; background:var(--gold); color:var(--ink); padding:.65rem .9rem; font-weight:bold; } #unlock-status { min-height:1.5em; margin:1rem 0 0; font-size:.8rem; } .private-card { background:#2b251a; } footer { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem 0 2rem; color:#a79b84; font: .65rem monospace; letter-spacing:.08em; } @media(max-width:760px) { .masthead,main,footer { width:min(100% - 1.5rem,1180px); } .masthead p { max-width:20ch; } .hero { min-height:25rem; grid-template-columns:1fr; gap:2rem; padding:3rem 0; } .hero-copy { margin:0; } .tools,.restricted { display:block; } .filters { margin-top:1rem; justify-content:start; } .index-grid,.feature-grid { grid-template-columns:1fr; } .archive-section,.feature-section,.private-section,.restricted { padding:3rem 0; } .section-head { display:grid; grid-template-columns:1fr auto; } .section-head h2 { grid-column:1/-1; grid-row:2; } .unlock-form { margin-top:1.5rem; } footer { flex-direction:column; } } @media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }