/* iuliana.jp — 2026 redesign */
:root{
  --ink:#1c1917;
  --ink-soft:#4a423e;
  --paper:#fdfaf8;
  --blush:#f7e2df;
  --blush-deep:#f0cdc8;
  --black:#0c0b0a;
  --red:#c8342a;
  --red-dark:#9c2620;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  font-family:"Zen Kaku Gothic New",sans-serif;
  color:var(--ink);
  line-height:1.6;
}
h1,h2{font-family:"Shippori Mincho",serif;margin:0;}
a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}
.star{color:var(--red);}
.kicker{font-size:12px;letter-spacing:.16em;font-weight:700;color:var(--red);text-transform:uppercase;}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;}

/* top button kept from the original site */
#top{position:fixed;bottom:22px;right:22px;z-index:30;background:var(--red);color:#fff;border:none;border-radius:999px;width:48px;height:48px;font-size:12px;cursor:pointer;display:none;box-shadow:0 8px 20px rgba(0,0,0,.25);}
#top.show{display:block;}

/* NAV */
#header_nav{
  position:sticky;top:0;z-index:20;width:100%;
  background:var(--black);
  padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;
}
#header_nav .logo img{height:26px;width:auto;}
#header_nav nav.menu{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
#header_nav nav.menu a{color:rgba(255,255,255,.82);font-size:13px;letter-spacing:.03em;white-space:nowrap;}
#header_nav nav.menu a.lang{background:var(--red);color:#fff;font-weight:700;padding:6px 14px;border-radius:999px;font-size:12px;}
#header_nav nav.menu a.cta{background:var(--red);color:#fff;font-weight:700;padding:8px 16px;border-radius:2px;}

/* HERO */
#hero{width:100%;background:var(--blush);padding:64px 0;}
#hero .inner{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
#hero h1{font-size:28px;line-height:1.5;margin:14px 0;}
#hero h1 em{font-style:normal;color:var(--red);}
#hero p{font-size:15px;line-height:1.9;color:var(--ink-soft);max-width:520px;}
#hero .cta-row{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
#hero .photo{border-radius:4px;overflow:hidden;box-shadow:0 20px 50px rgba(28,25,23,.18);}
.btn-primary,.btn-dark{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:700;padding:14px 22px;border-radius:2px;border:1px solid transparent;
}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red);}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink);}

/* VIDEO / SHOP TOUR */
#tour{width:100%;background:var(--black);padding:64px 0;text-align:center;}
#tour h2{font-size:26px;color:#fff;margin-top:10px;}
#tour p.lead{color:rgba(255,255,255,.62);font-size:14px;max-width:520px;margin:12px auto 28px;line-height:1.9;}
#tour video{width:100%;border-radius:6px;background:#000;border:1px solid rgba(255,255,255,.08);}
#tour .caption{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:rgba(255,255,255,.5);font-size:12px;flex-wrap:wrap;gap:6px;}

/* ABOUT / CORSET / FAQ / CMCAC — shared section styling */
#about, #corset, #cmcac, #follow, #contact{width:100%;padding:56px 0;}
#about{background:var(--paper);}
#about h2{font-size:24px;line-height:1.6;margin-bottom:14px;}
#corset{background:var(--paper);}
#corset .grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;}
#corset .photo{border-radius:4px;overflow:hidden;position:sticky;top:80px;}
#corset h2{font-size:26px;margin-bottom:18px;}
#corset p{font-size:14.5px;line-height:1.9;color:var(--ink-soft);margin:0 0 16px;}

/* FAQ as native <details> — no JS needed */
#faq{width:100%;background:var(--blush);padding:56px 0;}
#faq h2{font-size:26px;text-align:center;margin-bottom:28px;}
#faq details{background:#fff;border-radius:4px;margin-bottom:10px;padding:4px 18px;}
#faq details+details{background:transparent;}
#faq details[open]{background:#fff;}
#faq summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
#faq summary::-webkit-details-marker{display:none;}
#faq summary::after{content:"+";font-size:20px;color:var(--red);font-weight:400;flex-shrink:0;}
#faq details[open] summary::after{content:"–";}
#faq details p{font-size:14px;line-height:1.85;color:var(--ink-soft);padding:0 0 18px;margin:0;}

#cmcac{background:var(--paper);}
#cmcac .grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
#cmcac h2{font-size:24px;margin-bottom:10px;}
#cmcac h4{font-weight:500;color:var(--ink-soft);font-size:13px;margin:0 0 16px;}
#cmcac p{font-size:14.5px;line-height:1.9;color:var(--ink-soft);}
#cmcac .photo{border-radius:4px;overflow:hidden;}

#follow{background:var(--black);text-align:center;}
#follow h2{color:#fff;font-size:22px;margin-bottom:12px;}
#follow h4{font-weight:500;font-size:14px;color:rgba(255,255,255,.65);}
#follow h4 a{color:var(--red);font-weight:700;}
#follow img.ig{width:22px;height:22px;vertical-align:middle;margin-right:6px;}

#contact{background:var(--blush-deep);}
#contact h2{font-size:24px;margin-bottom:6px;}
#contact h4{font-weight:500;color:var(--ink-soft);font-size:13px;margin:0 0 20px;}
#contact p{font-size:15px;line-height:2;color:var(--ink);}
#contact a.mail{color:var(--red);font-weight:700;}

footer.site-footer{width:100%;background:var(--black);padding:22px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
footer.site-footer img{height:16px;opacity:.85;}
footer.site-footer .c{color:rgba(255,255,255,.4);font-size:11px;}

/* Desktop breakpoint */
@media (min-width:860px){
  #header_nav{padding:18px 48px;}
  #hero{padding:96px 0;}
  #hero .inner{grid-template-columns:1.05fr 1fr;gap:64px;}
  #hero h1{font-size:40px;}
  #hero .cta-row{flex-direction:row;}
  #tour{padding:96px 0;}
  #tour h2{font-size:32px;}
  #corset{padding:96px 0;}
  #corset .grid{grid-template-columns:0.8fr 1fr;gap:64px;}
  #faq{padding:96px 0;}
  #cmcac{padding:96px 0;}
  #cmcac .grid{grid-template-columns:1fr 0.8fr;}
  #contact{padding:88px 0;}
  #contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
}