:root{--les:#142A18;--krem:#F4E4C5;--card:#FBF4E4;--ruz:#F074AC;--salvej:#8C9278;--linka:#D8CCA8;--r:16px;
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .9 0 0 0 0 .77 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .16 0 0 0 0 .09 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .57 0 0 0 0 .47 .9 0 0 0 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--mottle-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .25 0 0 0 0 .17 .5 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M0.8 14.0 L10.0 3.8 L20.0 9.8 L30.0 2.9 L40.0 8.4 L50.0 6.4 L60.0 2.7 L70.0 8.1 L80.0 2.4 L90.0 7.2 L100.0 2.8 L110.0 3.1 L120.0 7.1 L130.0 11.9 L140.0 3.5 L150.0 4.7 L160.0 9.5 L170.0 13.4 L180.0 8.9 L190.0 6.8 L200.0 13.7 L210.0 2.6 L220.0 12.3 L230.0 5.5 L240.0 3.7 L250.0 3.4 L260.0 5.7 L270.0 11.8 L280.0 4.2 L290.0 9.0 L300.0 9.7 L310.0 6.5 L320.0 8.6 L330.0 2.8 L340.0 2.7 L350.0 4.5 L360.0 10.2 L370.0 7.1 L380.0 5.8 L390.0 9.0 L386.2 10.0 L400.0 69.6 L390.0 75.5 L380.0 74.4 L370.0 68.9 L360.0 72.9 L350.0 72.3 L340.0 76.5 L330.0 74.8 L320.0 69.5 L310.0 77.8 L300.0 67.4 L290.0 71.0 L280.0 75.1 L270.0 67.8 L260.0 71.9 L250.0 66.5 L240.0 74.0 L230.0 75.2 L220.0 72.9 L210.0 76.5 L200.0 69.8 L190.0 74.3 L180.0 73.1 L170.0 73.0 L160.0 71.5 L150.0 76.1 L140.0 77.3 L130.0 71.7 L120.0 74.0 L110.0 66.7 L100.0 74.4 L90.0 73.8 L80.0 77.9 L70.0 75.9 L60.0 69.4 L50.0 70.6 L40.0 74.0 L30.0 66.3 L20.0 71.5 L10.0 68.0 L0.0 67.4Z' fill='%23F4E4C5'/%3E%3Crect x='49' y='26' width='65' height='2' fill='%23142A18' opacity='.18'/%3E%3Crect x='331' y='18' width='70' height='2' fill='%23142A18' opacity='.18'/%3E%3Crect x='209' y='58' width='104' height='2' fill='%23142A18' opacity='.18'/%3E%3Crect x='328' y='28' width='67' height='2' fill='%23142A18' opacity='.18'/%3E%3Crect x='136' y='58' width='116' height='2' fill='%23142A18' opacity='.18'/%3E%3Crect x='57' y='23' width='51' height='2' fill='%23142A18' opacity='.18'/%3E%3Crect x='89' y='38' width='83' height='2' fill='%23142A18' opacity='.18'/%3E%3Crect x='100' y='14' width='68' height='2' fill='%23142A18' opacity='.18'/%3E%3Crect x='140' y='42' width='116' height='2' fill='%23142A18' opacity='.18'/%3E%3C/svg%3E");
--torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 0.00,81 1.67,71 3.33,77 5.00,81 6.67,43 8.33,94 10.00,87 11.67,92 13.33,88 15.00,64 16.67,64 18.33,46 20.00,78 21.67,44 23.33,44 25.00,53 26.67,50 28.33,60 30.00,43 31.67,40 33.33,49 35.00,46 36.67,62 38.33,42 40.00,92 41.67,77 43.33,49 45.00,55 46.67,61 48.33,62 50.00,47 51.67,91 53.33,100 55.00,68 56.67,69 58.33,45 60.00,46 61.67,61 63.33,56 65.00,90 66.67,50 68.33,41 70.00,97 71.67,72 73.33,49 75.00,73 76.67,42 78.33,72 80.00,99 81.67,92 83.33,82 85.00,56 86.67,62 88.33,50 90.00,86 91.67,72 93.33,87 95.00,60 96.67,53 98.33,89 100.00,99 100,100' fill='%23F4E4C5'/%3E%3C/svg%3E");
--stamp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='100.0,50.0 95.6,56.0 98.3,62.9 92.5,67.6 93.3,75.0 86.5,78.0 85.4,85.4 78.0,86.5 75.0,93.3 67.6,92.5 62.9,98.3 56.0,95.6 50.0,100.0 44.0,95.6 37.1,98.3 32.4,92.5 25.0,93.3 22.0,86.5 14.6,85.4 13.5,78.0 6.7,75.0 7.5,67.6 1.7,62.9 4.4,56.0 0.0,50.0 4.4,44.0 1.7,37.1 7.5,32.4 6.7,25.0 13.5,22.0 14.6,14.6 22.0,13.5 25.0,6.7 32.4,7.5 37.1,1.7 44.0,4.4 50.0,0.0 56.0,4.4 62.9,1.7 67.6,7.5 75.0,6.7 78.0,13.5 85.4,14.6 86.5,22.0 93.3,25.0 92.5,32.4 98.3,37.1 95.6,44.0' fill='%23F4E4C5'/%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='%23142A18' stroke-width='1.5' stroke-dasharray='3 3'/%3E%3C/svg%3E");
--paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%238C9278'%3E%3Cellipse cx='20' cy='27' rx='9' ry='8'/%3E%3Cellipse cx='9' cy='17' rx='4' ry='5'/%3E%3Cellipse cx='16' cy='10' rx='4' ry='5'/%3E%3Cellipse cx='24' cy='10' rx='4' ry='5'/%3E%3Cellipse cx='31' cy='17' rx='4' ry='5'/%3E%3C/svg%3E");
--hatch:repeating-linear-gradient(0deg,transparent 0 5px,rgba(20,42,24,.3) 5px 6px),repeating-linear-gradient(90deg,transparent 0 5px,rgba(20,42,24,.3) 5px 6px);
--grid:repeating-linear-gradient(0deg,transparent 0 31px,rgba(244,228,197,.09) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(244,228,197,.09) 31px 32px);
--gingham:repeating-linear-gradient(0deg,rgba(140,146,120,.55) 0 8px,transparent 8px 16px),repeating-linear-gradient(90deg,rgba(140,146,120,.55) 0 8px,transparent 8px 16px);
--gingham-pink:repeating-linear-gradient(0deg,rgba(240,116,172,.45) 0 8px,transparent 8px 16px),repeating-linear-gradient(90deg,rgba(240,116,172,.45) 0 8px,transparent 8px 16px);
--dots:radial-gradient(circle,rgba(244,228,197,.5) 1.6px,transparent 2px) 0 0/18px 18px;
--stripes:repeating-linear-gradient(45deg,rgba(140,146,120,.5) 0 6px,transparent 6px 14px)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grain-light),var(--mottle),var(--krem);color:var(--les);font:16px/1.6 'Manrope',sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.dark{background:var(--grain),var(--mottle-dark),var(--les);color:var(--krem)}
.top{position:relative;color:var(--krem);background:var(--grain),var(--grid),var(--mottle-dark),var(--les);padding-bottom:40px}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:28px;background:var(--torn) 0 0/100% 100%}
.top.slim{padding-bottom:36px}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px;padding-bottom:18px}
.logo{font:400 28px 'Gilda Display',serif;text-decoration:none;color:var(--krem)}.logo span{color:var(--ruz)}
nav{display:flex;gap:20px;flex-wrap:wrap}
nav a{color:var(--krem);text-decoration:none;font-weight:600;font-size:15px;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-bottom-color:var(--ruz)}
h1,h2,h3{font-family:'Gilda Display',serif;font-weight:400;letter-spacing:-.01em}
h1{font-size:clamp(38px,6.4vw,64px);line-height:1.04;margin:0 0 16px}
h2{font-size:clamp(26px,3.6vw,34px);line-height:1.15;margin:0 0 12px}
h3{font-size:24px;line-height:1.2;margin:28px 0 8px}
.brush{background:var(--brush) 0 55%/100% 88% no-repeat;color:var(--les);padding:0 .18em;margin:0 -.04em}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;padding-top:24px;padding-bottom:40px}
.lead{font-size:18px;max-width:46ch;margin:0 0 24px;opacity:.92}
.art{position:relative}
.art img{width:100%;height:auto;border-radius:200px 200px var(--r) var(--r)}
.stamp{position:absolute;right:-8px;top:-14px;width:104px;height:104px;background:var(--stamp) 0 0/100% 100%;color:var(--les);display:grid;place-items:center;text-align:center;font:700 13px/1.1 'Manrope',sans-serif;transform:rotate(10deg)}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{background:var(--mottle),var(--ruz);color:var(--les);border-radius:999px;padding:12px 24px;font-weight:600;text-decoration:none;display:inline-block;border:0;font:600 16px 'Manrope',sans-serif;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:inherit;border:2px solid currentColor;padding:10px 22px}
.sec{padding:48px 0}
.trail{height:20px;margin:8px 0 28px;background:radial-gradient(circle,var(--salvej) 1.5px,transparent 2px) 0 50%/12px 12px repeat-x;position:relative}
.trail::after{content:"";position:absolute;right:0;top:-6px;width:30px;height:30px;background:var(--paw) 0 0/contain no-repeat;transform:rotate(80deg)}
.bar{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--les);border-radius:999px;padding:5px 16px;font:600 14px 'Manrope',sans-serif;background:transparent;color:var(--les);cursor:pointer}
.chip[aria-pressed=true]{background:var(--grain),var(--les);color:var(--krem)}
.count{font-size:14px;opacity:.75}
.notice{background:var(--stripes),var(--card);border:1.5px dashed var(--salvej);border-radius:12px;padding:10px 14px;font-size:14px;margin:16px 0 0}
.notice span{background:var(--card);padding:0 4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:32px 22px;margin-top:28px}
.card{position:relative;background:var(--mottle),var(--card);border:1.5px solid var(--linka);border-radius:var(--r);text-decoration:none;color:var(--les);display:flex;flex-direction:column;transition:transform .15s}
.card:hover{transform:translateY(-3px) rotate(-.4deg)}
.card::before{content:"";position:absolute;top:-10px;left:50%;width:84px;height:22px;margin-left:-42px;background:var(--gingham),rgba(244,228,197,.9);transform:rotate(-4deg);z-index:2}
.card:nth-child(3n+2)::before{background:var(--gingham-pink),rgba(244,228,197,.9);transform:rotate(3deg)}
.photo{position:relative;aspect-ratio:4/3;border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:#102A17}
.photo img{width:100%;height:100%;object-fit:cover}
.photo img.ph{object-fit:contain;padding:10px}
.photo .tag{position:absolute;left:0;bottom:12px}
.in{padding:14px 16px 18px;flex:1}
.in b{font:400 24px/1.15 'Gilda Display',serif;display:block;margin-bottom:2px}
.meta{font-size:14px;opacity:.85}
.tag{display:inline-block;background:var(--grain),var(--les);color:var(--krem);padding:4px 22px 4px 14px;font-size:13px;font-weight:600;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%)}
.tag.p{background:var(--mottle),var(--ruz);color:var(--les)}
.orig{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;padding:2px 10px 2px 22px;border-radius:999px;background:var(--krem);border:1px solid var(--linka);position:relative}
.orig::before{content:"";position:absolute;left:8px;top:50%;width:8px;height:8px;margin-top:-6px;background:var(--ruz);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.empty{text-align:center;padding:24px 0}
.empty img{max-width:360px;margin:0 auto 16px;border-radius:var(--r)}
.note{border-radius:var(--r);padding:28px;display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;position:relative;overflow:hidden}
.note::after{content:"";position:absolute;right:-50px;bottom:-50px;width:150px;height:150px;background:var(--dots);border-radius:50%;opacity:.7}
.note>div{position:relative;z-index:1}
.note img{width:140px;border-radius:50%;aspect-ratio:1;object-fit:cover;border:3px solid var(--krem);outline:2px dashed var(--krem);outline-offset:5px}
.note p{margin:0 0 16px}
/* detail */
.back{display:inline-block;margin:8px 0 20px;color:var(--krem);text-decoration:none;font-weight:600}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.detail .photo{border-radius:var(--r);aspect-ratio:1}
.facts{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.facts dt{opacity:.7}.facts dd{margin:0;font-weight:600}
.checks{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.checks span{border:1.5px solid var(--linka);border-radius:999px;padding:3px 12px;font-size:14px;background:var(--card)}
.checks span.no{opacity:.6;text-decoration:line-through}
.story{background:var(--mottle),var(--card);border:1.5px solid var(--linka);border-radius:var(--r);padding:18px 20px;margin:16px 0}
.story h3{margin-top:0}
/* prose */
.prose{max-width:720px}
.prose h1{display:none}
.prose h2{margin-top:44px;padding-bottom:6px;background:radial-gradient(circle,var(--salvej) 1.4px,transparent 1.8px) 0 100%/10px 6px repeat-x}
.prose h3{font-size:22px}
.prose p,.prose li{font-size:17px}
.prose li{margin:4px 0}
.prose blockquote{margin:16px 0;padding:14px 18px;background:var(--grain),var(--les);color:var(--krem);border-radius:12px}
.prose em:last-child{opacity:.8}
.with-art{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.with-art aside{position:sticky;top:20px}
.with-art aside img{border-radius:200px 200px var(--r) var(--r)}
.toc{background:var(--mottle),var(--card);border:1.5px solid var(--linka);border-radius:var(--r);padding:14px 18px;margin-top:16px;font-size:15px}
.toc a{display:block;padding:3px 0;text-decoration:none}.toc a:hover{color:#B8467D}
details.tpl{background:var(--mottle),var(--card);border:1.5px solid var(--linka);border-radius:var(--r);padding:0 20px;margin:14px 0}
details.tpl summary{cursor:pointer;padding:16px 0;font:400 24px 'Gilda Display',serif;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
details.tpl summary::after{content:"+";font:600 22px 'Manrope'}
details.tpl[open] summary::after{content:"–"}
details.tpl .dl{margin:0 0 18px}
footer{margin-top:56px;padding:28px 0 36px;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--krem)}
@media(max-width:820px){
 .hero .wrap,.detail,.with-art{grid-template-columns:1fr}
 .with-art aside{position:static;order:-1}
 .with-art aside img{max-width:260px}
 .note{grid-template-columns:1fr}
 nav{gap:14px}nav a{font-size:14px}
 .stamp{right:0}
}
@media(max-width:520px){header .wrap{flex-direction:column;align-items:flex-start;gap:8px}}
