@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Nanum+Myeongjo:wght@400;700;800&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');
:root { --ink:#1e2a21; --paper:#f8f5ed; --line:#d8d5ca; --leaf:#41664b; --clay:#c96e4f; --mist:#e7ede4; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:'Plus Jakarta Sans',sans-serif; } header, footer { max-width:1200px; margin:auto; padding:25px 36px; display:flex; align-items:center; justify-content:space-between; } header { border-bottom:1px solid var(--line); } .wordmark { font:800 25px 'Nanum Myeongjo',serif; color:var(--ink); text-decoration:none; letter-spacing:-1.5px; } .wordmark span { color:var(--clay); padding:0 2px; } nav { display:flex; gap:25px; } nav a, .back { color:var(--ink); font-size:13px; text-decoration:none; } nav a:hover, .back:hover { color:var(--clay); } main { max-width:1200px; margin:auto; padding:0 36px; }.hero { min-height:580px; padding:84px 0 90px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); align-items:center; gap:38px; }.hero-copy { position:relative; z-index:1; }.hero-art { margin:0; position:relative; }.hero-art::before { content:''; position:absolute; inset:6% 7% -5% -6%; border:1px solid var(--leaf); border-radius:50%; opacity:.33; transform:rotate(-8deg); }.hero-art img { display:block; width:100%; position:relative; filter:drop-shadow(0 17px 22px rgba(39,65,45,.12)); }.eyebrow { font:500 11px 'DM Mono',monospace; letter-spacing:.12em; color:var(--leaf); margin:0 0 17px; }.hero h1, .article h1 { font:800 clamp(48px,8vw,94px)/1.11 'Nanum Myeongjo',serif; letter-spacing:-.065em; margin:0; }.hero h1 em { color:var(--clay); font-style:normal; }.intro { max-width:490px; margin:30px 0; color:#526057; font-size:17px; line-height:1.9; }.button { display:inline-block; background:var(--ink); color:var(--paper); text-decoration:none; font-size:13px; padding:15px 20px; border-radius:2px; transition:transform .2s; }.button:hover { transform:translateY(-2px); }.stories { border-top:1px solid var(--line); padding:70px 0 110px; }.section-heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:34px; }.section-heading h2 { margin:0; font:700 27px 'Nanum Myeongjo',serif; letter-spacing:-.04em; }.post-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.post-card { min-height:290px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; }.post-card h2 { margin:0; font:700 25px/1.35 'Nanum Myeongjo',serif; letter-spacing:-.04em; }.post-card > p:not(.eyebrow) { color:#657067; font-size:14px; line-height:1.7; }.post-card a { color:var(--leaf); margin-top:auto; font-size:13px; text-decoration:none; }.post-card a span { padding-left:4px; }.post-card:hover { background:var(--mist); }.empty { padding:32px; border:1px solid var(--line); }.about { background:var(--leaf); color:var(--paper); padding:70px; margin:0 -36px; }.about .eyebrow { color:#b8cfb8; }.about > p:last-child { max-width:630px; margin:0; font:700 clamp(30px,4vw,52px)/1.3 'Nanum Myeongjo',serif; letter-spacing:-.05em; } footer { color:#717b72; font:11px 'DM Mono',monospace; border-top:1px solid var(--line); }.breeds { padding-top:82px; padding-bottom:110px; }.breed-intro { max-width:760px; margin-bottom:72px; }.breed-intro h1 { margin:0; font:800 clamp(48px,7vw,86px)/1.1 'Nanum Myeongjo',serif; letter-spacing:-.065em; }.breed-intro h1 em { color:var(--clay); font-style:normal; }.breed-intro > p:last-child { max-width:570px; color:#526057; font:17px/1.9 'Plus Jakarta Sans',sans-serif; margin:29px 0 0; }.catalog-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr); align-items:center; gap:52px; margin-bottom:72px; }.catalog-hero .breed-intro { margin:0; }.catalog-photo { margin:0; }.catalog-photo img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.86) contrast(.98); }.catalog-photo figcaption { margin-top:9px; color:#727a72; font:10px/1.45 'DM Mono',monospace; }.breed-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.breed-card { min-height:245px; padding:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.breed-link { min-height:330px; padding:0 0 25px; display:flex; flex-direction:column; color:inherit; text-decoration:none; }.breed-photo { display:block; width:100%; height:150px; object-fit:cover; margin-bottom:20px; filter:saturate(.9); }.breed-link > :not(.breed-photo) { margin-left:25px; margin-right:25px; }.breed-link span { margin-top:auto; color:var(--leaf); font:11px 'DM Mono',monospace; opacity:0; transition:opacity .2s; }.breed-card:hover .breed-link span, .breed-link:focus-visible span { opacity:1; }.breed-card:hover { background:var(--mist); }.breed-number { margin:0 0 35px; color:var(--clay); font:11px 'DM Mono',monospace; }.breed-card h2 { margin:0; font:700 28px 'Nanum Myeongjo',serif; letter-spacing:-.045em; }.breed-card h3, .breed-group { margin:9px 0 12px; color:var(--leaf); font:500 12px 'DM Mono',monospace; letter-spacing:.06em; }.breed-card > p:last-child { margin:0; color:#657067; font-size:13px; line-height:1.75; }.breed-note { max-width:650px; margin:85px auto 0; padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.breed-note > p:last-child { margin:0; font:700 22px/1.7 'Nanum Myeongjo',serif; letter-spacing:-.04em; }.breed-detail { max-width:1000px; padding-top:60px; padding-bottom:110px; }.detail-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; padding:50px 0 70px; border-bottom:1px solid var(--line); }.detail-hero h1 { margin:0; font:800 clamp(48px,7vw,82px)/1.08 'Nanum Myeongjo',serif; letter-spacing:-.065em; }.detail-lede { color:#526057; font-size:18px; line-height:1.9; }.detail-hero figure { margin:0; }.detail-hero img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }.detail-hero figcaption { margin-top:9px; color:#727a72; font:10px 'DM Mono',monospace; }.detail-copy { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:60px; border-top:1px solid var(--line); border-left:1px solid var(--line); }.detail-copy > div { padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.detail-copy h2 { margin:0 0 15px; font:700 25px/1.35 'Nanum Myeongjo',serif; letter-spacing:-.04em; }.detail-copy > div > p:last-child { margin:0; color:#59655b; font-size:14px; line-height:1.8; }.article { max-width:800px; padding-top:105px; padding-bottom:110px; }.article .lede { font:400 21px/1.7 'Nanum Myeongjo',serif; color:#536258; margin:33px 0 14px; }.date { font:12px 'DM Mono',monospace; color:#788078; }.content { font-size:17px; line-height:2; margin:65px 0; }.content p { margin:0 0 25px; } @media(max-width:700px) { header, footer, main { padding-left:20px; padding-right:20px; } .hero { min-height:0; padding:72px 0 54px; display:flex; flex-direction:column; align-items:stretch; gap:30px; } .hero-art { max-width:430px; align-self:center; } .catalog-hero { grid-template-columns:1fr; gap:28px; margin-bottom:48px; } .detail-hero, .detail-copy { grid-template-columns:1fr; gap:28px; } .detail-copy { gap:0; margin-top:40px; } .post-grid, .breed-grid { grid-template-columns:1fr; } .about { margin:0 -20px; padding:45px 20px; } footer { gap:15px; flex-wrap:wrap; } }