:root { --paper:#f6f0e4; --paper-deep:#ece2d0; --ink:#202522; --soft:#6e6b62; --hair:#cfc4af; --red:#bd5237; --green:#1f4c3d; --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.45; }
button, input, select { font:inherit; } button, a, select, input { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } a { color:inherit; text-underline-offset:3px; } :focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.skip-link { position:fixed; z-index:10; top:0; left:1rem; transform:translateY(-120%); background:var(--ink); color:var(--paper); padding:.6rem .8rem; } .skip-link:focus { transform:translateY(0); }
.site-header { min-height:112px; display:grid; grid-template-columns:180px 1fr auto; gap:1.5rem; align-items:center; padding:20px clamp(1rem, 4vw, 4.5rem); border-bottom:1px solid var(--hair); }
.wordmark { font:700 16px/.76 var(--sans); letter-spacing:.08em; text-decoration:none; } .wordmark i { font-family:var(--serif); font-size:22px; letter-spacing:-.04em; font-weight:400; }.masthead { color:var(--soft); margin:0; font-family:var(--serif); font-size:14px; }.site-header nav { display:flex; gap:1.25rem; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }.site-header nav a { text-decoration:none; } .site-header nav a:hover { color:var(--red); }
main { overflow:hidden; }.intro { min-height:min(690px, calc(100vh - 112px)); padding:clamp(4.4rem, 12vw, 10rem) clamp(1rem, 12vw, 13rem) 5rem; position:relative; }.intro::before { content:"Paper / 001"; position:absolute; top:3rem; right:4vw; color:var(--soft); font:12px var(--serif); letter-spacing:.1em; transform:rotate(90deg); }.eyebrow { margin:0; margin-bottom:1rem; color:var(--red); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }.intro h1, h2 { margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.055em; line-height:.92; }.intro h1 { max-width:900px; font-size:clamp(4rem, 10vw, 9.5rem); }.intro-copy { display:grid; grid-template-columns:minmax(220px, 370px) minmax(180px, 280px); gap:3rem; margin-top:3rem; max-width:730px; }.intro-copy p { margin:0; }.intro-note { padding-left:1rem; border-left:1px solid var(--hair); font-size:13px; color:var(--soft); }
.scroll-cue { border:0; background:none; display:flex; gap:1rem; align-items:center; margin-top:4rem; padding:0; color:var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.11em; }.scroll-cue b { font-size:1.4rem; font-weight:400; }.scroll-cue:hover { color:var(--red); }
.catalog { padding:clamp(3.5rem, 8vw, 7rem) clamp(1rem, 4vw, 4.5rem); background:var(--paper-deep); }.catalog-heading, .folio-heading { display:flex; justify-content:space-between; gap:2rem; align-items:end; }.catalog h2, .print-studio h2, .folio h2 { font-size:clamp(2.8rem, 6vw, 5.8rem); max-width:790px; }.catalog-count { margin:0 0 .25rem; color:var(--soft); font:italic 15px var(--serif); }.catalog-controls { border-top:1px solid var(--hair); margin-top:3rem; padding:1rem 0 1.25rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; }.filters { display:flex; flex-wrap:wrap; gap:.4rem; }.filter { border:1px solid transparent; border-radius:2rem; padding:.45rem .8rem; color:var(--soft); background:transparent; }.filter:hover, .filter.is-active { color:var(--paper); background:var(--ink); }.filter small { opacity:.7; }.search-label { font-size:0; }.search-label input { width:min(260px, 45vw); border:1px solid var(--hair); border-radius:0; padding:.55rem .7rem; background:#fbf7ef; color:var(--ink); font-size:13px; }
.edition-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-top:1px solid var(--hair); border-left:1px solid var(--hair); }.edition-card { display:flex; min-width:0; flex-direction:column; position:relative; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); background:rgba(255,255,255,.12); }.edition-art { width:100%; aspect-ratio:2 / 1; overflow:hidden; background:#d7d0c1; }.edition-art img { height:100%; width:100%; object-fit:cover; display:block; transition:transform .5s ease; }.edition-card:hover .edition-art img { transform:scale(1.025); }.card-body { display:grid; grid-template-columns:1fr auto; gap:.75rem; padding:.9rem; }.card-kind, .card-region { margin:0; color:var(--soft); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.card-title { grid-column:1 / -1; margin:0; font:400 clamp(1.2rem, 2vw, 1.65rem)/.95 var(--serif); letter-spacing:-.04em; }.card-actions { display:flex; gap:.45rem; margin-top:auto; padding:0 .9rem .9rem; }.card-actions button, .card-actions a { border:0; background:none; padding:0; font-size:11px; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }.card-actions .save-button { margin-left:auto; text-decoration:none; font-size:16px; line-height:.7; }.card-actions .save-button[aria-pressed="true"] { color:var(--red); }.empty-results { grid-column:1 / -1; padding:3rem 1rem; }
.print-studio { padding:clamp(3.5rem, 8vw, 7rem) clamp(1rem, 8vw, 9rem); display:grid; grid-template-columns:minmax(260px, 1fr) minmax(270px, 340px); column-gap:clamp(2rem, 9vw, 10rem); row-gap:2rem; }.studio-copy > p:not(.eyebrow) { max-width:450px; }.studio-caution { border-top:1px solid var(--hair); padding-top:1rem; color:var(--soft); font-size:13px; }.studio-controls { align-self:end; display:grid; gap:1.25rem; }.studio-controls label, .studio-controls legend { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.studio-controls select { display:block; width:100%; margin-top:.3rem; padding:.6rem; border:1px solid var(--ink); border-radius:0; background:transparent; }.studio-controls fieldset { margin:0; padding:0; border:0; display:flex; gap:1rem; }.studio-controls fieldset label { font-weight:400; letter-spacing:0; text-transform:none; }.studio-controls input { accent-color:var(--red); }.studio-actions { display:flex; flex-wrap:wrap; gap:.6rem; }.button { display:inline-block; text-align:center; border:1px solid var(--ink); padding:.65rem .85rem; text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.button-ink { color:var(--paper); background:var(--ink); }.button-ink:hover { background:var(--red); border-color:var(--red); }.button-line:hover { background:var(--ink); color:var(--paper); }.proof-readout { grid-column:1 / -1; color:var(--soft); font:italic 14px var(--serif); }
.paper-stage { grid-column:1 / -1; display:flex; justify-content:center; padding:clamp(.5rem, 5vw, 4rem); background:#ded7c7; overflow:auto; }.page-preview { width:612px; height:792px; flex:0 0 auto; padding:30px 42px; position:relative; background:white; color:#202522; box-shadow:0 18px 40px rgba(46,36,22,.16); }.page-preview.is-a4 { width:595px; height:842px; }.page-meta { display:flex; justify-content:space-between; color:#777; font-size:8px; letter-spacing:.08em; text-transform:uppercase; }.proof-notes { display:grid; justify-items:center; margin-top:48px; gap:22px; }.proof-notes.one { margin-top:195px; }.proof-note { width:425.2px; height:212.6px; overflow:hidden; border:1px dashed rgba(20,20,20,.35); position:relative; }.proof-note img { display:block; width:100%; height:100%; object-fit:cover; }.proof-note::after { content:"150 × 75 mm"; position:absolute; bottom:4px; right:5px; padding:1px 3px; background:rgba(255,255,255,.8); color:#555; font:7px var(--sans); letter-spacing:.08em; }.calibration { position:absolute; bottom:38px; left:50%; width:141.7px; transform:translateX(-50%); display:flex; align-items:center; gap:4px; color:#555; font:7px var(--sans); white-space:nowrap; }.calibration span { height:9px; border-left:1px solid #333; flex:1; }.calibration b { font-weight:400; }.actual-size { position:absolute; bottom:16px; width:100%; left:0; text-align:center; color:#777; font:8px var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.folio { padding:clamp(3.5rem, 8vw, 7rem) clamp(1rem, 8vw, 9rem); background:var(--green); color:#f5eddd; }.folio .eyebrow { color:#eab28c; }.folio h2 { max-width:620px; }.folio-heading { align-items:start; }.text-button { border:0; background:transparent; color:inherit; padding:0; text-decoration:underline; font-size:12px; }.folio > p { color:#d4d9ce; }.folio-list { margin-top:2.5rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:rgba(245,237,221,.3); }.folio-item { display:grid; grid-template-columns:96px 1fr auto; gap:.8rem; align-items:center; background:var(--green); padding:.7rem; }.folio-item img { width:96px; aspect-ratio:2/1; object-fit:cover; }.folio-item p { margin:0; }.folio-item .folio-name { font:20px/.95 var(--serif); }.folio-item .folio-region { color:#d4d9ce; margin-top:.3rem; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.folio-item button { border:0; background:transparent; color:#f5eddd; font-size:18px; } #folio-empty[hidden] { display:none; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:1.25rem clamp(1rem, 4vw, 4.5rem); font:12px var(--serif); color:var(--soft); }footer p { margin:0; }
dialog { width:min(860px, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); padding:0; border:0; background:var(--paper); box-shadow:0 18px 60px rgba(0,0,0,.35); color:var(--ink); } dialog::backdrop { background:rgba(19,28,24,.55); backdrop-filter:blur(2px); }.dialog-close { position:absolute; z-index:1; top:.7rem; right:.7rem; border:0; width:36px; height:36px; border-radius:100%; background:var(--paper); font-size:25px; }.dialog-layout { display:grid; grid-template-columns:1.25fr 1fr; }.dialog-art { min-height:330px; background:#d7d0c1; }.dialog-art img { display:block; width:100%; height:100%; object-fit:contain; }.dialog-copy { padding:3rem clamp(1.25rem, 5vw, 3rem); }.dialog-copy h2 { font-size:clamp(2.8rem, 5vw, 4.5rem); }.dialog-copy .eyebrow { margin-top:1.5rem; }.dialog-copy p { margin:1.2rem 0; }.detail-list { border-top:1px solid var(--hair); padding-top:1rem; font-size:13px; color:var(--soft); }.detail-list p { margin:.35rem 0; }.dialog-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }.dialog-actions .button { flex:1; }.dialog-actions .saved { color:var(--red); } #toast { position:fixed; z-index:20; bottom:1rem; left:50%; opacity:0; transform:translate(-50%, 20px); transition:.2s; padding:.7rem 1rem; background:var(--ink); color:var(--paper); font-size:13px; pointer-events:none; }#toast.show { opacity:1; transform:translate(-50%, 0); }
@media (max-width:820px) { .site-header { grid-template-columns:1fr auto; min-height:0; }.masthead { display:none; }.site-header nav { grid-column:1/-1; grid-row:2; justify-content:space-between; gap:.5rem; }.intro { min-height:620px; }.intro-copy { grid-template-columns:1fr; gap:1.5rem; }.edition-grid { grid-template-columns:repeat(2, 1fr); }.catalog-controls { align-items:stretch; flex-direction:column; }.search-label input { width:100%; }.print-studio { grid-template-columns:1fr; }.proof-readout { grid-column:auto; }.paper-stage { grid-column:auto; }.folio-list { grid-template-columns:1fr; }.dialog-layout { grid-template-columns:1fr; }.dialog-art { min-height:220px; } }
@media (max-width:420px) { .site-header { padding:16px; }.site-header nav { font-size:10px; }.intro { padding:4.5rem 1rem 3rem; min-height:540px; }.intro h1 { font-size:3.9rem; }.intro::before { display:none; }.catalog, .print-studio, .folio { padding-left:1rem; padding-right:1rem; }.catalog-heading { display:block; }.catalog-count { margin-top:1rem; }.edition-grid { grid-template-columns:1fr; }.paper-stage { padding:.5rem; justify-content:flex-start; }.folio-heading { display:block; }.folio-heading .text-button { margin-top:1rem; } footer { display:block; } footer a { display:inline-block; margin-top:.5rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
@media print {
 body { margin:0; padding:0; background:white; }
 body > :not(main), main > :not(.print-studio), .print-studio > :not(.paper-stage) { display:none !important; }
 main, .print-studio { display:block !important; margin:0 !important; padding:0 !important; border:0 !important; }
 .paper-stage { display:block !important; margin:0 !important; padding:0 !important; background:white !important; overflow:visible !important; }
 .page-preview { display:block !important; box-shadow:none !important; width:215.9mm !important; height:279.4mm !important; padding:10mm 15mm !important; margin:0 !important; box-sizing:border-box; break-inside:avoid; }
 .page-preview.is-a4 { width:210mm !important; height:297mm !important; }
 .page-meta { display:flex !important; font-size:7pt; }
 .proof-notes { display:grid !important; margin-top:8mm !important; gap:4mm !important; }
 .proof-notes.one { margin-top:50mm !important; }
 .proof-note { width:150mm !important; height:75mm !important; box-sizing:border-box; border:0; }
 .proof-note::after { display:none; }
 .calibration { display:block !important; width:50mm !important; height:3mm; border:solid #333; border-width:0 .2mm .2mm; bottom:14mm; font-size:7pt; text-align:center; }
 .calibration span { display:none; }
 .actual-size { display:block !important; bottom:7mm; font-size:7pt; }
}