:root{--cream:#f3eee3;--cream-2:#eae3d1;--paper:#faf7f0;--ink:#1f1c18;--ink-2:#5a534a;--ink-3:#8a8275;--line:#d6ccb6;
--terra:#8c3b25;--terra-2:#6e2d1b;--blue:#2b4a8b;--jade:#2f6b5a;--ochre:#c9a227;
--serif:"Iowan Old Style",Palatino,"Palatino Linotype","Book Antiqua",Georgia,"Times New Roman",serif;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--max:1180px;--gut:24px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.62 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--terra);text-decoration:none}a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.2vw,4.4rem)}h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}h3{font-size:1.25rem;line-height:1.25}
p{margin:0 0 1em}.muted{color:var(--ink-2)}.small{font-size:.9rem}.lead{font-size:1.15rem;line-height:1.55}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.kicker{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);margin:0 0 1em;font-weight:600}
.kicker.ink{color:var(--ink-3)}
.num{font-family:var(--serif);font-size:clamp(2.8rem,6vw,5rem);line-height:.95;letter-spacing:-.03em}
.rule{height:1px;background:var(--line);border:0;margin:0}
/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--cream);position:relative;z-index:2}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;height:64px}
.brand{font-family:var(--serif);font-size:1.3rem;color:var(--ink);display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.brand img{width:26px;height:26px}
.nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.nav a{color:var(--ink);padding:4px 0;border-bottom:1px solid transparent}.nav a:hover{text-decoration:none;border-bottom-color:var(--ink)}
.nav a.ext{color:var(--terra)}
.crumbs{font-size:.78rem;letter-spacing:.04em;color:var(--ink-3);margin:22px 0 0}.crumbs a{color:var(--ink-3)}
main{padding:0 0 64px;overflow-x:clip}section{margin:0 0 72px;position:relative}
/* full-bleed bands with tile backgrounds */
.band{position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:64px 0;background-color:var(--cream);overflow:hidden}
.band.tile{background-repeat:repeat;background-size:360px 360px;animation:pan 120s linear infinite}
.band.deep{background-color:var(--cream-2)}
.band.ink{background-color:var(--ink);color:var(--cream)}
.band .wrap{position:relative}
@keyframes pan{from{background-position:0 0}to{background-position:360px 360px}}
/* ghost motif bleeding off the edge */
.ghost{position:absolute;pointer-events:none;user-select:none;z-index:0}
.ghost.tr{right:-12%;top:-10%;width:min(58vw,720px)}
.ghost.br{right:-8%;bottom:-18%;width:min(44vw,520px)}
.ghost.tl{left:-14%;top:-6%;width:min(40vw,480px)}
/* hero */
.hero{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end;min-height:520px;padding:56px 0 48px}
.hero h1{margin:0 0 .35em}.hero .lead{max-width:30em;color:var(--ink-2)}
.hero-art{position:relative;min-height:360px}
.hero-art .main{position:absolute;right:-30%;top:-24%;width:124%;max-width:none}
.hero-art .chip{position:absolute;width:34%;border:1px solid var(--line);background:var(--paper)}
.hero-art .chip.a{left:-8%;top:22%}.hero-art .chip.b{left:6%;bottom:-10%;width:26%}
.stats{display:flex;gap:40px;flex-wrap:wrap;margin:36px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.stats div{display:flex;flex-direction:column}.stats .num{font-size:clamp(2.2rem,4vw,3.4rem)}
.stats small{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
/* buttons */
.btn{display:inline-block;padding:13px 24px;border:1px solid var(--ink);color:var(--ink);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;line-height:1.2;transition:transform .18s ease,background .18s ease,color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--terra);border-color:var(--terra);color:#fff}.btn-primary:hover{background:var(--terra-2);border-color:var(--terra-2)}
.btn-secondary{background:transparent}.btn-secondary:hover{background:var(--ink);color:var(--cream)}
.btn-cream{background:var(--cream);border-color:var(--cream);color:var(--ink)}.btn-cream:hover{background:#fff}
.btn.disabled{opacity:.5;cursor:default;pointer-events:none}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
/* section heads */
.sec-head{display:grid;grid-template-columns:1fr 2fr;gap:24px 48px;align-items:end;margin:0 0 36px}
.sec-head h2{margin:0}.sec-head p{margin:0;color:var(--ink-2);max-width:40em}
/* dividers */
.divider{display:flex;align-items:center;gap:20px;margin:0 0 56px;color:var(--ink-3)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.divider img{width:32px;height:32px;opacity:.75}
/* tags */
.tag{display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:4px 8px;border:1px solid currentColor;line-height:1}
.tag-terra{color:var(--terra)}.tag-blue{color:var(--blue)}.tag-jade{color:var(--jade)}.tag-ochre{color:#8a6d0e}.tag-ink{color:var(--ink-3)}
/* pack cards */
.grid{display:grid;gap:28px 24px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;color:var(--ink);position:relative;transition:transform .22s ease,border-color .22s ease}
.card:hover{text-decoration:none;transform:translateY(-5px);border-color:var(--ink)}
.card img{width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--cream);border-bottom:1px solid var(--line)}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .title{font-family:var(--serif);font-size:1.15rem;line-height:1.2;margin-top:2px}
.card .meta{font-size:.84rem;color:var(--ink-2)}
.card .foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line)}
.card .price{font-family:var(--serif);font-size:1.2rem}.card .price.free{color:var(--jade)}
.card .count{font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--ink)}.card .count small{font:.68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-left:6px}
.stagger>:nth-child(even){transform:translateY(36px)}.stagger>:nth-child(even):hover{transform:translateY(31px)}
.stagger{padding-bottom:36px}
/* bundle feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:var(--paper);color:var(--ink);transition:border-color .22s ease}
.feature:hover{text-decoration:none;border-color:var(--ink)}
.feature img{width:100%;height:100%;object-fit:contain;background:var(--cream);border-right:1px solid var(--line)}
.feature .body{padding:32px 36px;display:flex;flex-direction:column;gap:12px}
.feature .num{font-size:clamp(3rem,6vw,5.4rem);color:var(--terra)}
.feature .title{font-family:var(--serif);font-size:1.6rem;line-height:1.15}
.feature .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:1px solid var(--line)}
.feature .price{font-family:var(--serif);font-size:1.4rem}
.features{display:grid;gap:24px}
.features .feature:nth-child(even) img{order:2;border-right:0;border-left:1px solid var(--line)}
/* playground */
.play{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.play a{display:block;aspect-ratio:1;border:1px solid var(--line);background-color:#fff;background-size:100% 100%;background-repeat:repeat;background-position:center;transition:background-size .7s cubic-bezier(.2,.7,.2,1),border-color .2s;position:relative;overflow:hidden}
.play a:hover,.play a:focus-visible,.play a:active{background-size:33.34% 33.34%;border-color:var(--ink)}
.play a span{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:var(--paper);border-top:1px solid var(--line);font-size:.72rem;letter-spacing:.06em;color:var(--ink-2);transform:translateY(100%);transition:transform .25s}
.play a:hover span,.play a:focus-visible span{transform:none}
/* pack page */
.pack-head{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end;padding:40px 0 48px}
.pack-head .vol{font-family:var(--serif);font-size:clamp(4rem,10vw,8rem);line-height:.9;letter-spacing:-.04em;color:var(--terra);margin:0 0 12px}
.pack-head h1{font-size:clamp(2rem,4vw,3.3rem)}
.pack-head .stats{margin-top:28px}
.buybox{background:var(--paper);border:1px solid var(--ink);padding:26px 28px;position:relative}
.buybox .price{font-family:var(--serif);font-size:2.6rem;line-height:1}
.buybox .btn{display:block;text-align:center;margin:12px 0 0}
.buybox ul{padding-left:1.1em;margin:18px 0 0;font-size:.9rem;color:var(--ink-2)}.buybox li{margin:0 0 .3em}
.cover{border:1px solid var(--line)}
.gallery{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.gallery img{border:1px solid var(--line)}
.motif-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}
.motif-grid figure{margin:0;background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .2s,border-color .2s}
.motif-grid figure:hover{transform:translateY(-3px);border-color:var(--ink)}
.motif-grid figcaption{font-size:.7rem;color:var(--ink-2);padding:7px 9px;line-height:1.35;word-break:break-word;border-top:1px solid var(--line)}
.motif-grid.big{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.motif-grid.big figcaption{font-size:.78rem}
.tile-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tile-grid figure{margin:0}.tile-grid img{border:1px solid var(--line)}
.tile-grid figcaption{font-size:.8rem;color:var(--ink-2);margin-top:8px;line-height:1.4}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.inside ul{columns:2;column-gap:40px;padding-left:1.1em;margin:0}.inside li{break-inside:avoid;margin:0 0 .5em}
.note{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--terra);padding:18px 22px}
.cta{padding:56px 0}.cta .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.cta h2{color:#fff;margin:0 0 .3em}.cta p{margin:0;color:#cfc7b8;max-width:38em}
/* glossary (museum catalog) */
.cat-list{border-top:1px solid var(--line)}
.cat-row{display:grid;grid-template-columns:64px 96px 1fr 1.4fr;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink);transition:background .2s}
.cat-row:hover{text-decoration:none;background:var(--paper)}
.cat-row .idx{font-family:var(--serif);font-size:1.4rem;color:var(--ink-3)}
.cat-row img{width:96px;height:96px;border:1px solid var(--line);background:var(--paper)}
.cat-row .name{font-family:var(--serif);font-size:1.5rem;line-height:1.1}.cat-row .ko{font-size:.8rem;color:var(--ink-3);margin-top:4px;letter-spacing:.04em}
.cat-row .line{color:var(--ink-2);font-size:.95rem}
.cat-head{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end;padding:36px 0 40px}
.cat-head .idx{font-family:var(--serif);font-size:1rem;letter-spacing:.1em;color:var(--ink-3);margin:0 0 18px}
.cat-head .line{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.55rem);font-style:italic;color:var(--ink-2);line-height:1.35;max-width:30em}
.label{font-size:.72rem;letter-spacing:.06em;color:var(--ink-2);line-height:1.5;text-transform:none}
.label b{font-weight:600;color:var(--ink);letter-spacing:0;font-size:.8rem}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:16px;overflow-x:auto;padding:4px 0 16px;scroll-snap-type:x proximity}
.strip figure{margin:0;background:var(--paper);border:1px solid var(--line);scroll-snap-align:start;transition:transform .2s,border-color .2s}
.strip figure:hover{transform:translateY(-4px);border-color:var(--ink)}
.strip figcaption{padding:10px 12px 12px;border-top:1px solid var(--line)}
.strip a{color:var(--ink)}
.prose{max-width:42em}.prose p{font-size:1.08rem;line-height:1.7}.prose h2{margin-top:1.8em;font-size:1.6rem}
.prose ul{padding-left:1.2em}.prose li{margin:0 0 .5em}
.faq dt{font-family:var(--serif);font-size:1.2rem;margin-top:1.2em}.faq dd{margin:.3em 0 0;color:var(--ink-2)}
table{border-collapse:collapse;width:100%;font-size:.92rem}th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--ink-3);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.pager{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:20px;font-family:var(--serif);font-size:1.1rem}
.pager a{color:var(--ink)}
/* footer */
.site-foot{border-top:1px solid var(--line);padding:44px 0 48px;font-size:.86rem;color:var(--ink-2);position:relative;overflow:hidden}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;position:relative}.site-foot a{color:var(--ink-2)}
.site-foot h4{margin:0 0 .7em;color:var(--ink);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}.site-foot ul{list-style:none;margin:0;padding:0}.site-foot li{margin:0 0 .4em}
.site-foot .kogl{font-size:.78rem;line-height:1.55;max-width:44em}.site-foot .kogl p{margin:0 0 .6em}
.site-foot .copy{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative}
.site-foot .copy .brand{font-size:1rem}
@media(max-width:960px){.play{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}
.cat-row{grid-template-columns:40px 72px 1fr;gap:16px}.cat-row .line{grid-column:2/-1}.cat-row img{width:72px;height:72px}}
@media(max-width:820px){.hero,.pack-head,.two,.sec-head,.cat-head,.feature,.cta .wrap{grid-template-columns:1fr}.site-foot .cols{grid-template-columns:1fr}
.inside ul{columns:1}.hero{padding-top:28px;min-height:0;gap:24px}.hero-art{min-height:0;order:-1;height:56vw;max-height:360px}
.hero-art{height:64vw;max-height:380px}.hero-art .main{right:-22%;top:0;width:auto;height:100%}.hero-art .chip.a{left:0;top:8%;width:34%}.hero-art .chip.b{left:10%;bottom:0;width:28%}.ghost.tr{right:-30%;top:0;width:80vw}
.features .feature:nth-child(even) img{order:0;border-left:0;border-right:0}.feature img{border-right:0;border-bottom:1px solid var(--line)}
.stagger>:nth-child(even),.stagger>:nth-child(even):hover{transform:none}.stagger{padding-bottom:0}
.band{padding:44px 0}.cta{padding:40px 0}h1{font-size:clamp(2rem,9vw,3rem)}}
@media(max-width:560px){.play{grid-template-columns:repeat(2,1fr)}.grid-4,.grid-3{grid-template-columns:1fr}.nav{gap:4px 14px;font-size:.72rem}.site-head .wrap{height:auto;padding-top:12px;padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}