@font-face { font-family:'Space Grotesk'; src:url('assets/space-grotesk-variable.ttf') format('truetype'); font-weight:300 700; font-display:swap; }
@font-face { font-family: Barlow; src: url('assets/barlow-regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family: Barlow; src: url('assets/barlow-semibold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family: Barlow; src: url('assets/barlow-bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
:root { color-scheme: light; --yellow:#ffcf24; --ink:#171916; --paper:#f4f3ed; --about-surface:#f4eccd; --muted:#5b5d54; --line:#cccec3; --font-display:'Space Grotesk',Arial,sans-serif; --font-body:Barlow,Arial,sans-serif; --gutter:clamp(20px,3vw,64px); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 var(--font-body); }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; text-wrap:balance; overflow-wrap:break-word; }
h1,h2 { line-height:1.12; }
h1 { font-size:clamp(40px,4.5vw,76px); }
h2 { font-size:clamp(28px,2.6vw,42px); }
h3 { font-size:20px; line-height:1.3; font-weight:600; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { touch-action:manipulation; }
button { cursor:pointer; color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #996600; outline-offset:4px; }
svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; flex-shrink:0; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.skip { position:fixed; top:-100px; left:20px; z-index:10; padding:12px; background:#fff; }
.skip:focus { top:15px; }
.site-nav { padding:18px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand img { object-fit:contain; }
.brand>span { font:700 23px/1.1 var(--font-display); letter-spacing:-.025em; }
.brand small { display:block; font:600 10px/1.4 var(--font-body); letter-spacing:.2em; margin-top:6px; }
.brand:hover { text-decoration:none; }
.site-nav nav { display:flex; align-items:center; gap:32px; }
.site-nav nav>a { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; }
.site-nav nav>a[aria-current] { text-decoration:underline; text-underline-offset:6px; }
.site-nav nav svg { width:16px; height:16px; }
.nav-discord { background:var(--yellow); border:1px solid var(--ink); padding:11px 18px; }
.menu-toggle { display:none; background:none; border:1px solid var(--ink); min-height:44px; padding:8px 14px; font-size:13px; }
.page-padding { padding-inline:var(--gutter); }
.home-hero { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:clamp(24px,4vw,80px); background:var(--yellow); padding:46px var(--gutter); border-block:1px solid var(--ink); }
.hero-copy { container-type:inline-size; min-width:0; }
.home-hero h1 { font-size:clamp(38px,12cqw,132px); line-height:1.05; letter-spacing:-.04em; }
.hero-copy>p { font-size:19px; margin-top:24px; max-width:570px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; margin-top:30px; }
.hero-mascot { display:block; width:100%; height:clamp(350px,29vw,540px); object-fit:contain; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); padding:13px 22px; min-height:49px; font-size:14px; font-weight:600; border-radius:0; transition:background-color 120ms ease-out; }
.button:hover { background:#34382f; text-decoration:none; }
.button-outline { background:none; color:var(--ink); }
.button-outline:hover { background:#e8e8e0; }
.text-link { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; background:none; padding:0; border:0; }
.text-link svg { width:18px; height:18px; }
.home-preview { padding-top:44px; padding-bottom:52px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 28px; }
.product-card { min-width:0; }
.product-image { position:relative; display:block; width:100%; aspect-ratio:1.6; background:#e9edf1; overflow:hidden; }
.product-image img { width:100%; height:100%; display:block; object-fit:cover; transition:transform 150ms ease-out; }
.product-image:hover img { transform:scale(1.025); }
.studio-image { background:#e8e8df; }
.studio-image img { object-fit:contain; padding:15px; }
.sample-label { position:absolute; top:10px; left:10px; font-size:10px; line-height:1.2; background:#fff; padding:5px 7px; color:#565f69; }
.product-info { padding-top:14px; }
.product-info>p { font-size:12px; color:var(--muted); margin-bottom:6px; }
.product-card h3 { font-size:20px; }
.product-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; font-size:16px; font-weight:600; }
.product-bottom small { margin-left:7px; font-size:12px; font-weight:400; color:var(--muted); }
.product-bottom>a { display:flex; align-items:center; justify-content:center; min-height:38px; min-width:38px; }
.page-heading { padding:42px 0 32px; }
.page-heading p { color:var(--muted); font-size:17px; margin-top:18px; }
.catalog-page { padding-bottom:56px; }
.catalog-controls { display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.filters { display:flex; gap:28px; align-self:stretch; }
.filter { border:0; border-bottom:3px solid transparent; margin-bottom:-1px; min-height:50px; padding:13px 0; background:none; font-size:14px; font-weight:600; white-space:nowrap; color:var(--muted); }
.filter.selected { color:var(--ink); border-color:var(--ink); }
.catalog-tools { display:flex; align-items:center; gap:12px; padding-bottom:12px; }
.search { display:flex; align-items:center; gap:10px; width:250px; min-height:42px; background:#fff; border:1px solid var(--line); padding:8px 12px; }
.search input { width:100%; min-width:0; outline:none; border:0; background:none; font-size:13px; }
.search svg { width:17px; height:17px; }
.search:focus-within { outline:2px solid var(--ink); outline-offset:2px; }
#resource-sort { min-height:42px; padding:8px 12px; border:1px solid var(--line); background:#fff; font-size:13px; }
.catalog-meta { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:19px 0 27px; color:var(--muted); font-size:12px; }
.catalog-meta>p { display:flex; gap:20px; }
.sample-toggle { display:flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; min-height:28px; }
.sample-toggle input { accent-color:var(--ink); margin:0; width:14px; height:14px; }
.empty-state { border-top:1px solid var(--line); padding:45px 0; }
.empty-state p { color:var(--muted); margin:15px 0 24px; }
.about-page { padding-bottom:64px; }
.home-about { background:var(--about-surface); border-top:1px solid #ded4b3; }
.about-layout { display:grid; grid-template-columns:1.15fr 1fr; gap:50px; align-items:center; }
.about-copy { max-width:780px; }
.about-copy p { font-size:19px; line-height:1.7; margin-bottom:22px; }
.about-mascot { display:block; width:100%; height:420px; object-fit:contain; }
.about-links { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:30px; }
.suggest-link { margin-top:26px; }
.suggest-page { padding-bottom:60px; }
#idea-form { width:min(100%,780px); margin-bottom:24px; }
form label { display:block; font-size:14px; font-weight:600; margin:18px 0 7px; }
form input,form select,form textarea { display:block; width:100%; background:#fff; color:var(--ink); border:1px solid #93998e; padding:11px 13px; min-height:46px; border-radius:0; font-size:15px; }
form textarea { resize:vertical; }
.form-note { font-size:12px; color:var(--muted); margin:12px 0 22px; }
.form-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }
.form-status { font-size:13px; min-height:21px; margin-top:15px; color:var(--muted); }
#copy-fallback { margin-top:12px; }
.product-page { padding-top:32px; padding-bottom:65px; }
.back-link { font-size:14px; display:inline-block; margin-bottom:32px; }
.product-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,70px); align-items:start; }
.product-gallery { background:#e9edf1; }
.product-gallery img { display:block; width:100%; height:auto; aspect-ratio:1.6; object-fit:contain; }
.studio-gallery { background:none; }
.studio-gallery img { aspect-ratio:1; max-height:600px; }
.product-category { font-size:13px; color:var(--muted); margin-bottom:15px; }
.product-detail h1 { font-size:clamp(38px,4vw,68px); }
.product-summary { font-size:18px; max-width:750px; color:var(--muted); margin:22px 0; }
.product-facts { display:flex; flex-wrap:wrap; gap:28px; margin:25px 0; padding-block:20px; border-block:1px solid var(--line); }
.product-facts dt { color:var(--muted); font-size:12px; }
.product-facts dd { margin:4px 0 0; font-size:15px; font-weight:600; }
.product-detail h2 { font-size:31px; }
.features-list { margin:17px 0 22px; padding-left:20px; font-size:15px; }
.features-list li { padding-bottom:7px; }
.product-note { font-size:13px; color:var(--muted); margin-bottom:24px; max-width:700px; }
.product-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px var(--gutter); background:var(--ink); color:var(--paper); border-top:1px solid var(--ink); font-size:14px; }
.site-footer>span { font-family:var(--font-display); font-weight:600; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:24px; }
.site-footer a:hover { color:var(--yellow); }
.site-footer a:focus-visible { outline-color:var(--yellow); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none!important; }
@media(min-width:2200px) { .product-grid { gap:40px; } .hero-mascot { height:590px; } }
@media(max-width:1100px) {
 .site-nav nav { gap:24px; } .site-nav nav>a { font-size:13px; }
 .home-hero { gap:25px; padding-block:40px; } .hero-mascot { height:370px; }
 .hero-copy>p { font-size:17px; } .hero-actions { gap:22px; } .button { padding-inline:18px; font-size:13px; }
 .catalog-controls { gap:20px; } .filters { gap:20px; } .filter { font-size:13px; } .search { width:210px; }
 .product-grid { gap:28px 20px; } .product-card h3 { font-size:18px; }
 .about-copy p { font-size:17px; } .about-mascot { height:340px; }
}
@media(max-width:850px) {
 .site-nav { flex-wrap:wrap; gap:0; } .menu-toggle { display:block; }
 .site-nav nav { display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; padding-top:20px; }
 .site-nav nav.open { display:flex; } .site-nav nav>a { border-top:1px solid var(--line); padding:12px 0; font-size:15px; }
 .site-nav nav .nav-discord { margin-top:10px; padding:12px; border:1px solid var(--ink); }
 .hero-mascot { height:300px; } .hero-actions { flex-direction:column; align-items:flex-start; gap:17px; }
 .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .home-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .catalog-controls { flex-wrap:wrap; gap:12px; } .catalog-tools { width:100%; } .search { flex:1; }
 .about-layout { gap:30px; } .about-mascot { height:290px; }
 .product-layout { gap:30px; } .product-detail h1 { font-size:42px; } .product-summary { font-size:16px; }
}
@media(max-width:640px) {
 .site-nav { padding-block:13px; } .brand img { width:48px; height:48px; } .brand>span { font-size:20px; } .brand small { font-size:9px; }
 .home-hero { grid-template-columns:1fr; padding-top:32px; padding-bottom:30px; gap:25px; }
 .hero-copy>p { font-size:17px; margin-top:20px; }
 .hero-actions { flex-direction:row; align-items:center; gap:22px; margin-top:25px; } .hero-actions .text-link { font-size:12px; }
 .hero-mascot { height:290px; } .home-preview { padding-top:30px; padding-bottom:38px; }
 .section-heading { margin-bottom:22px; gap:16px; } .section-heading .text-link { font-size:12px; gap:5px; }
 .section-heading .text-link svg { width:16px; }
 .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px; }
 .product-card h3 { font-size:16px; min-height:40px; } .product-info>p { font-size:11px; } .product-info { padding-top:11px; }
 .product-bottom { margin-top:3px; font-size:14px; } .product-bottom small { font-size:11px; margin-left:5px; }
 .sample-label { top:7px; left:7px; font-size:8px; padding:4px 5px; } .studio-image img { padding:10px; }
 .page-heading { padding-top:30px; padding-bottom:25px; } .page-heading h1 { font-size:40px; }
 .page-heading p { font-size:15px; margin-top:16px; }
 .filters { width:100%; justify-content:space-between; gap:12px; } .filter { font-size:12px; }
 .catalog-controls { gap:12px; } .catalog-tools { gap:8px; } .search { width:auto; } #resource-sort { font-size:12px; padding-inline:9px; }
 .catalog-meta { font-size:10px; gap:10px; align-items:flex-start; margin-bottom:22px; }
 .catalog-meta>p { flex-direction:column; gap:4px; } .sample-toggle { min-height:20px; }
 .catalog-page { padding-bottom:40px; } .about-layout { grid-template-columns:1fr; gap:32px; }
 .about-copy p { font-size:16px; } .about-links { gap:12px; } .about-mascot { height:300px; }
 .about-page { padding-bottom:38px; } .suggest-page .page-heading h1 { font-size:36px; }
 .product-page { padding-top:25px; padding-bottom:40px; } .back-link { margin-bottom:24px; }
 .product-layout { grid-template-columns:1fr; gap:28px; } .studio-gallery img { max-height:350px; }
 .product-detail h1 { font-size:42px; } .product-category { margin-bottom:12px; font-size:12px; }
 .product-summary { font-size:16px; margin:18px 0; } .product-facts { gap:25px; margin-block:21px; }
 .product-actions { gap:20px; } .product-actions .text-link { font-size:13px; }
 form input,form select,form textarea { font-size:15px; }
 .site-footer { flex-direction:column; align-items:flex-start; gap:12px; } .site-footer nav { gap:20px; }
}
@media(max-width:360px) {
 .brand>span { font-size:18px; } .brand img { width:44px; height:44px; } .menu-toggle { padding-inline:11px; }
 .hero-actions { gap:17px; } .hero-actions .button { padding-inline:14px; font-size:12px; }
 .hero-actions .text-link { font-size:11px; gap:4px; } .hero-mascot { height:260px; }
 .product-card h3 { font-size:15px; } .section-heading .text-link { font-size:11px; }
 .filter { font-size:11px; } .product-bottom { font-size:13px; } .product-bottom small { font-size:10px; }
 .page-heading h1 { font-size:36px; } .product-detail h1 { font-size:38px; }
}
@media(prefers-reduced-motion:reduce) { * { transition-duration:.01ms!important; } }