:root { --ink:#362d38; --muted:#786d79; --pink:#f48daf; --deep:#db5b89; --lav:#b99ce8; --cream:#fff9f4; --line:#f2dce5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; cursor:url('/assets/kuromi-cursor-v3.png') 5 4,auto; }
body { --wallpaper-tile:min(900px,100vw); margin:0; color:var(--ink); background-color:white; background-image:linear-gradient(rgba(255,255,255,.48),rgba(255,255,255,.48)),url('/assets/sanrio-pattern.png'); background-position:0 0,0 0; background-size:auto,var(--wallpaper-tile) auto; background-repeat:repeat,repeat; font-family:Arial,Helvetica,sans-serif; animation:wallpaper-loop 32s linear infinite; }
a { color:inherit; text-decoration:none; }
a,button,summary { cursor:url('/assets/kuromi-cursor-v3.png') 5 4,pointer; }
.announcement { padding:10px 20px; text-align:center; color:#fff; background:var(--ink); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
header { position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:14px clamp(22px,5vw,72px); background-color:#2d163f; background-image:linear-gradient(rgba(45,22,63,.2),rgba(45,22,63,.2)),url('/assets/kuromi-header-pattern.png'); background-position:center; background-size:460px; border-bottom:1px solid #130b19; }
.brand { display:flex; align-items:center; flex:0 1 280px; min-width:150px; padding:7px 12px; background:rgba(255,255,255,.94); border:2px solid rgba(225,205,242,.9); border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.24); }
.brand img { display:block; width:100%; height:auto; }
.category-banner { position:sticky; top:0; z-index:11; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(20px,5vw,58px); min-height:62px; padding:12px 24px; color:#f1e7ff; background-color:#2d163f; background-image:linear-gradient(rgba(45,22,63,.5),rgba(45,22,63,.5)),url('/assets/kuromi-header-pattern.png'); background-position:center 38%; background-size:400px; border-top:1px solid #6b4b82; border-bottom:3px solid #a985cc; box-shadow:0 9px 24px rgba(45,22,63,.3); font-family:"Cooper Black","Arial Rounded MT Bold",Georgia,serif; font-size:clamp(16px,2vw,20px); font-weight:900; letter-spacing:.015em; }
.category-banner a { position:relative; text-shadow:0 2px 0 rgba(0,0,0,.24); transition:color .2s ease,transform .2s ease; }
.category-banner a::after { content:'♥'; position:absolute; left:50%; bottom:-12px; color:#ef8eb4; font-family:Arial,sans-serif; font-size:8px; opacity:0; transform:translateX(-50%) scale(.4); transition:opacity .2s ease,transform .2s ease; }
.category-banner a:hover,.category-banner a.active { color:white; transform:translateY(-2px); }
.category-banner a:hover::after,.category-banner a.active::after { opacity:1; transform:translateX(-50%) scale(1); }
.email-link { padding:11px 17px; color:white; background:var(--pink); border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; }
.page-hero { position:relative; display:grid; place-items:center; min-height:330px; padding:72px 22px; overflow:hidden; text-align:center; isolation:isolate; }
.page-hero::before { content:''; position:absolute; inset:0; z-index:-2; background:rgba(255,255,255,.28); }
.page-hero::after { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle,rgba(255,255,255,.98) 0 20%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.28) 70%); }
.hero-card,.page-hero>div { color:#2f193d; background-color:#eadcff; background-image:url('/assets/kuromi-outline-transparent.png'); background-position:center; background-size:430px; border:2px solid #b594d2; box-shadow:inset 0 0 0 999px rgba(239,228,255,.72),0 25px 80px rgba(87,57,106,.25); }
.page-hero>div { width:min(700px,100%); padding:35px 45px; border-radius:30px; }
.kicker { margin:0 0 12px; color:var(--deep); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font:500 clamp(45px,8vw,72px)/1 Georgia,serif; letter-spacing:-.045em; }
.page-hero p:last-child { max-width:540px; margin:18px auto 0; color:#564160; font-weight:600; line-height:1.7; }
.content { width:min(1080px,calc(100% - 40px)); margin:0 auto; padding:70px 0 95px; }
.section-title { margin:0 0 12px; font:500 clamp(31px,5vw,46px)/1.1 Georgia,serif; text-align:center; }
.section-copy { max-width:600px; margin:0 auto 36px; color:var(--muted); line-height:1.7; text-align:center; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.product-grid { grid-template-columns:repeat(2,1fr); max-width:900px; margin:0 auto; }
.card { padding:24px; color:#321d40; background-color:#eadcff; background-image:url('/assets/kuromi-outline-transparent.png'); background-position:center; background-size:350px; border:2px solid #aa86c7; border-radius:24px; box-shadow:inset 0 0 0 999px rgba(239,228,255,.72),0 12px 35px rgba(87,57,106,.14); }
.product-image { aspect-ratio:1; display:grid; place-items:center; margin-bottom:20px; color:var(--deep); background:linear-gradient(145deg,#fff0f5,#f3eaff); border-radius:18px; font-size:45px; }
.card h2,.card h3 { margin:0 0 9px; font:600 24px/1.2 Georgia,serif; }
.card p { margin:0; color:var(--muted); line-height:1.6; }
.price { display:block; margin-top:14px; color:var(--deep); font-weight:800; }
.faq { max-width:800px; margin:auto; }
details { margin-bottom:14px; padding:0 22px; color:#321d40; background-color:#eadcff; background-image:url('/assets/kuromi-outline-transparent.png'); background-position:center; background-size:350px; border:2px solid #aa86c7; border-radius:18px; box-shadow:inset 0 0 0 999px rgba(239,228,255,.74),0 10px 28px rgba(87,57,106,.12); }
summary { padding:20px 0; cursor:pointer; font-size:19px; font-weight:900; line-height:1.4; }
details p { margin:0; padding:0 0 21px; color:var(--muted); font-size:17px; line-height:1.75; }
.about-layout { display:grid; grid-template-columns:340px 1fr; gap:45px; align-items:center; max-width:900px; margin:auto; }
.portrait { aspect-ratio:1; display:grid; place-items:center; overflow:hidden; background:white url('/assets/sanrio-pattern.png') center/480px; border:10px solid white; border-radius:50%; box-shadow:0 18px 55px rgba(80,50,66,.13); }
.portrait span { padding:14px 18px; background:rgba(255,255,255,.9); border-radius:999px; color:var(--deep); font-weight:800; }
.about-copy { padding:clamp(26px,4vw,40px); color:#321d40; background-color:#eadcff; background-image:url('/assets/kuromi-outline-transparent.png'); background-position:center; background-size:380px; border:2px solid #aa86c7; border-radius:28px; box-shadow:inset 0 0 0 999px rgba(239,228,255,.74),0 14px 38px rgba(87,57,106,.16); }
.about-copy h2 { margin:0 0 18px; font:500 42px/1 Georgia,serif; }
.about-copy p { color:var(--muted); line-height:1.8; }
.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; padding:18px; background:white; border:1px solid var(--line); border-radius:24px; box-shadow:0 12px 35px rgba(80,50,66,.07); }
.cal-head { padding:10px 2px; color:var(--deep); font-size:11px; font-weight:800; text-align:center; text-transform:uppercase; }
.day { min-height:88px; padding:10px; background:#fffafb; border-radius:12px; font-size:12px; }
.day.muted { color:#c9bdc5; }
.event-list { display:grid; gap:15px; max-width:800px; margin:40px auto 0; }
.event { display:grid; grid-template-columns:86px 1fr; gap:20px; align-items:center; padding:20px; background:white; border:1px solid var(--line); border-radius:20px; }
.event-date { padding:13px 8px; color:white; background:var(--deep); border-radius:14px; text-align:center; font-weight:800; }
.event h3 { margin:0 0 6px; font:600 21px Georgia,serif; }
.event p { margin:0; color:var(--muted); }
.season { margin-bottom:42px; }
.season h2 { margin:0 0 20px; color:var(--deep); font:600 30px/1 Georgia,serif; }
.season-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.market-date { display:grid; grid-template-columns:82px 1fr; gap:18px; align-items:center; padding:18px; background:white; border:1px solid var(--line); border-radius:20px; box-shadow:0 8px 24px rgba(80,50,66,.05); }
.date-tile { padding:11px 6px; color:white; background:var(--deep); border-radius:14px; text-align:center; }
.date-tile strong { display:block; font:600 26px/1 Georgia,serif; }
.date-tile span { display:block; margin-top:4px; font-size:10px; font-weight:800; letter-spacing:.1em; }
.market-date h3 { margin:0 0 5px; font:600 19px/1.2 Georgia,serif; }
.market-date p { margin:0; color:var(--muted); font-size:13px; }
.location-card { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; margin:0 0 42px; padding:25px; color:white; background:var(--ink); border-radius:24px; }
.location-card h2 { margin:0 0 8px; font:600 25px Georgia,serif; }
.location-card p { margin:0; color:#e8dfe6; line-height:1.6; }
.location-card a { padding:12px 18px; color:var(--ink); background:white; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; }
.notice { max-width:800px; margin:30px auto 0; padding:22px; color:#6e5864; background:#fff0f5; border-radius:18px; text-align:center; line-height:1.6; }
.hero { position:relative; min-height:min(760px,calc(100vh - 108px)); display:grid; place-items:center; overflow:hidden; padding:80px 24px; isolation:isolate; }
.hero::before { content:''; position:absolute; inset:0; z-index:-2; background:rgba(255,255,255,.32); }
.hero::after { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle,rgba(255,255,255,.98) 0 20%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.28) 70%); }
.hero-card { width:min(680px,100%); padding:clamp(40px,7vw,74px); text-align:center; border-radius:40px; }
.hero-card .kicker { margin-bottom:18px; color:#3b214c; background:#f3e5ff; }
.hero h1 { margin:0; font-size:clamp(56px,10vw,96px); font-weight:800; line-height:.94; letter-spacing:-.045em; }
.hero h1 span { color:#c8487d; }
.hero p { max-width:500px; margin:25px auto 30px; color:#564160; font-size:18px; font-weight:600; line-height:1.65; }
.buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.button { padding:15px 23px; border-radius:999px; font:800 13px Arial,Helvetica,sans-serif; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { color:white; background:var(--deep); box-shadow:0 10px 24px rgba(219,91,137,.28); }
.button.secondary { color:#3b214c; background:#f5eaff; border:1px solid #d6bce9; }
.categories { padding:80px clamp(22px,6vw,90px) 96px; text-align:center; background:rgba(255,249,244,.9); backdrop-filter:blur(3px); }
.categories h2 { margin:0 0 12px; font:500 clamp(34px,5vw,52px)/1 Georgia,serif; }
.categories>p { margin:0 auto 38px; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1000px; margin:auto; }
.category { min-height:220px; display:grid; place-items:center; padding:28px; color:#321d40; background-color:#eadcff; background-image:url('/assets/kuromi-outline-transparent.png'); background-position:center; background-size:350px; border:2px solid #aa86c7; border-radius:28px; overflow:hidden; font-family:"Cooper Black","Arial Rounded MT Bold",Georgia,serif; font-size:clamp(29px,4vw,38px); font-weight:900; line-height:1.08; text-align:center; text-shadow:0 2px 0 rgba(255,255,255,.95),0 0 12px #f5ebff; box-shadow:inset 0 0 0 999px rgba(239,228,255,.67),0 14px 34px rgba(87,57,106,.18); transition:transform .2s ease,box-shadow .2s ease; }
.category:hover { transform:translateY(-4px); box-shadow:inset 0 0 0 999px rgba(239,228,255,.76),0 19px 42px rgba(45,22,63,.3); }
.contact { padding:70px 24px 84px; text-align:center; background:rgba(255,255,255,.88); backdrop-filter:blur(3px); }
.contact-card { width:min(620px,100%); margin:auto; padding:clamp(30px,5vw,48px); background:white; border:1px solid var(--line); border-radius:30px; box-shadow:0 18px 55px rgba(80,50,66,.1); }
.contact h2 { margin:0 0 12px; font:500 clamp(32px,5vw,46px)/1 Georgia,serif; }
.contact p { margin:0 0 24px; color:var(--muted); line-height:1.7; }
.contact-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; }
.email-address { color:var(--deep); font-weight:800; }
.copy-status { min-height:20px; margin:14px 0 0; color:var(--deep); font-size:13px; font-weight:700; }
footer { display:flex; justify-content:space-between; gap:20px; padding:28px clamp(22px,5vw,72px); color:var(--muted); background:white; border-top:1px solid var(--line); font-size:12px; }
@keyframes wallpaper-loop { to { background-position:0 0,var(--wallpaper-tile) 0; } }
@media(prefers-reduced-motion:reduce){body{animation:none}}
@media(max-width:820px){.brand{flex-basis:230px}.category-banner{gap:10px 22px;min-height:auto;padding:13px 16px;font-size:15px}.card-grid,.product-grid,.season-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.about-layout{grid-template-columns:1fr;text-align:center}.portrait{width:min(320px,90%);margin:auto}.day{min-height:54px;padding:7px}.calendar{gap:3px;padding:9px}.location-card{grid-template-columns:1fr;text-align:center}.email-link{padding:10px 13px}footer{flex-direction:column;text-align:center}.page-hero div{padding:30px 22px} }