:root { --paper:#f5ecdc; --ink:#25231f; --muted:#645e56; --display:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif; --ui:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 86% 9%, rgba(66,127,168,.18), transparent 22rem), var(--paper); font-family:var(--ui); -webkit-font-smoothing:antialiased; }
.catalog { width:min(100% - 32px, 780px); margin:0 auto; padding:26px 0 48px; }.back { display:inline-block; color:#3976a0; font:500 10px/1 "DM Mono",monospace; letter-spacing:.12em; text-decoration:none; }.hero { max-width:620px; padding:54px 0 38px; }.eyebrow,.tag { margin:0 0 12px; color:#3976a0; font:500 10px/1.2 "DM Mono",monospace; letter-spacing:.11em; }.hero h1 { margin:0; font:600 clamp(46px,8vw,73px)/.91 var(--display); letter-spacing:-.06em; }.hero h1 em { color:#3976a0; font-style:normal; }.hero>p:last-child { max-width:480px; margin:18px 0 0; color:var(--muted); font-size:16px; line-height:1.55; }.products { display:grid; gap:18px; }.product { display:grid; grid-template-columns:220px 1fr; min-height:260px; overflow:hidden; border:1px solid rgba(37,35,31,.1); border-radius:24px; background:#fffaf0; box-shadow:10px 12px 0 rgba(37,35,31,.08), 0 15px 30px rgba(48,41,31,.1); }.product img { width:100%; height:100%; object-fit:cover; }.copy { display:flex; flex-direction:column; padding:27px 28px 24px; }.product--stories { background:#f9f0df; }.product--stories .tag { color:#a64f32; }.product h2 { margin:0; font:600 clamp(30px,4.2vw,42px)/.94 var(--display); letter-spacing:-.055em; }.copy>p:not(.tag) { max-width:410px; margin:15px 0 20px; color:var(--muted); font-size:14px; line-height:1.5; }.bottom { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:auto; }.bottom strong { color:#3976a0; font:600 24px/1 var(--display); }.product--stories .bottom strong { color:#a64f32; }.bottom a { display:inline-flex; align-items:center; gap:9px; padding:11px 14px; border-radius:99px; background:#25231f; color:white; font-size:12px; font-weight:700; text-decoration:none; transition:transform .2s ease, background .2s ease; }.bottom a:hover,.bottom a:focus-visible { transform:translateY(-2px); background:#3976a0; outline:none; }.bottom span { font-size:16px; }.note { margin:32px 0 0; color:#81796f; text-align:center; font:10px/1.4 "DM Mono",monospace; }
@media (max-width:580px) { .catalog{width:min(100% - 28px,780px);padding-top:20px}.hero{padding:43px 0 30px}.product{grid-template-columns:1fr;min-height:0}.product img{aspect-ratio:16/9;object-position:center 43%}.copy{padding:22px 21px}.product h2{font-size:34px}.bottom{align-items:flex-start;flex-direction:column}.bottom a{width:100%;justify-content:center}.hero>p:last-child{font-size:15px} }