/* ============ TOKENS ============ */
:root{
  --ivory:      #FFFDFB;
  --yellow:      #FFFEE8;;
  --blush:      #F5E6E6;
  --blush-deep: #F2FFF1;
  --rose:       #A9707E;
  --rose-deep:  #7C4B57;
  --ink:        #2A2422;
  --ink-soft:   #6B5F5C;
  --gold:       #C7A468;
  --gold-soft:  #DCC496;
  --hairline:   rgba(42,36,34,0.14);

  --display: 'Cormorant Garamond', serif;
  --body:    'Jost', sans-serif;

  --vh: 100vh;
  --header-h: 5.4rem;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; height:100%; overflow-x:hidden; overflow-y:auto; background: transparent; }

body{
  height:100%;
  font-family: var(--body);
  color: var(--ink);
  background: var(--ivory);
  font-weight:300;
  overflow-x:hidden;
}
/* モバイルでのバウンス/セーフエリア時に body の背景色が
   ページのヒーロー背景と食い違って白く見えるのを防ぐ */
body.page-product{ background: var(--blush); }
body.page-collections{ background: var(--yellow); }
body.page-about{ background: var(--blush-deep); }
body.page-contact, 
body.theme-dark{ background: var(--ink); }

::selection{ background: var(--gold-soft); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:1px solid var(--rose-deep); outline-offset:4px; }

/* ============ SIGNATURE THREAD LINE ============ */
.thread{
  position:absolute;
  stroke: var(--gold);
  stroke-width: 1;
  fill:none;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 2.6s ease forwards 0.35s;
  opacity:0.9;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 2.4rem;
  background: rgba(255,253,251,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
body.theme-dark .site-header{
  background: rgba(42,36,34,0.6);
  border-bottom: 1px solid rgba(255,253,251,0.14);
}

.brandmark{
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  font-weight:500;
  color: var(--ink);
  white-space:nowrap;
}
.brandmark span{ color: var(--rose); }
body.theme-dark .brandmark{ color: var(--ivory); }

.nav-desktop{ display:flex; align-items:center; gap:2.6rem; }
.nav-desktop a{
  font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
  color: var(--ink-soft);
  padding-bottom:0.4rem;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.nav-desktop a:hover{ color: var(--rose-deep); }
.nav-desktop a.active{ color: var(--ink); border-color: var(--gold); }
body.theme-dark .nav-desktop a{ color: rgba(255,253,251,0.62); }
body.theme-dark .nav-desktop a:hover{ color: var(--gold-soft); }
body.theme-dark .nav-desktop a.active{ color: var(--ivory); border-color: var(--gold-soft); }

/* burger */
.burger{
  display:none;
  width:26px; height:18px;
  position:relative;
  background:none; border:none; cursor:pointer;
  padding:0;
}
.burger span{
  position:absolute; left:0; right:0; height:1px;
  background: var(--ink);
  transition: transform .35s ease, opacity .35s ease, top .35s ease;
}
body.theme-dark .burger span{ background: var(--ivory); }
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:8px; }
.burger span:nth-child(3){ top:16px; }
.burger.open span:nth-child(1){ top:8px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:8px; transform:rotate(-45deg); }

/* mobile accordion nav */
.mobile-nav{
  position:fixed; top: var(--header-h); left:0; right:0; z-index:99;
  max-height:0; overflow:hidden;
  background: var(--ivory);
  transition: max-height .5s cubic-bezier(.65,0,.35,1);
  border-bottom: 1px solid transparent;
}
.mobile-nav.open{
  max-height: 420px;
  border-bottom: 1px solid var(--hairline);
}
body.theme-dark .mobile-nav{ background: var(--ink); }
body.theme-dark .mobile-nav.open{ border-bottom-color: rgba(255,253,251,0.14); }

.mobile-nav ul{ list-style:none; }
.mobile-nav li{ border-top:1px solid var(--hairline); }
body.theme-dark .mobile-nav li{ border-top-color: rgba(255,253,251,0.14); }
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.15rem 2.4rem;
  font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--ink-soft);
}
.mobile-nav a.active{ color: var(--rose-deep); }
body.theme-dark .mobile-nav a{ color: rgba(255,253,251,0.7); }
body.theme-dark .mobile-nav a.active{ color: var(--gold-soft); }
.mobile-nav a::after{ content:"→"; font-size:0.75rem; opacity:0.5; }

/* ============ HERO (one per page, fills viewport) ============ */
.hero{
  position:relative;
  min-height: 100vh;
  min-height: var(--vh);
  width:100%;
  display:flex;
  align-items:center;
  padding-top: var(--header-h);
  overflow:hidden;
}

.container{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding: 0 6vw;
}

.eyebrow{
  font-family: var(--body);
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-transform:uppercase;
  color: var(--rose-deep);
  font-weight:400;
}
body.theme-dark .eyebrow{ color: var(--gold-soft); }

h1,h2{ font-family: var(--display); font-weight:400; line-height:1.05; color: var(--ink); }
body.theme-dark h1, body.theme-dark h2{ color: var(--ivory); }

.lede{ font-family: var(--body); font-weight:300; color: var(--ink-soft); line-height:1.85; font-size:1rem; }
body.theme-dark .lede{ color: rgba(255,253,251,0.62); }

.btn{
  display:inline-flex; align-items:center; gap:0.9rem;
  font-family: var(--body); font-size:0.72rem; letter-spacing:0.32em; text-transform:uppercase;
  color: var(--ink);
  padding-bottom:0.35rem;
  border-bottom:1px solid var(--ink);
  width:fit-content;
  transition: letter-spacing .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover{ letter-spacing:0.45em; color:var(--rose-deep); border-color:var(--rose-deep); }
.btn svg{ width:14px; height:9px; transition: transform .35s ease; }
.btn:hover svg{ transform:translateX(4px); }
body.theme-dark .btn{ color: var(--ivory); border-color: var(--ivory); }
body.theme-dark .btn:hover{ color: var(--gold-soft); border-color: var(--gold-soft); }

.tick{ position:absolute; width:26px; height:26px; z-index:3; opacity:0.55; border:0 solid var(--hairline); }
.tick.tl{ top: calc(var(--header-h) + 1.4rem); left:2.4rem; border-top-width:1px; border-left-width:1px; }
.tick.br{ bottom:2.4rem; right:2.4rem; border-bottom-width:1px; border-right-width:1px; }
body.theme-dark .tick{ border-color: rgba(255,253,251,0.2); }

.scrolldown{
  position:absolute; bottom:2.4rem; left:6vw;
  display:flex; align-items:center; gap:0.8rem;
  font-size:0.65rem; letter-spacing:0.3em; color:var(--ink-soft);
  text-transform:uppercase;
}
.scrolldown i{ width:1px; height:34px; background:var(--hairline); position:relative; display:block; overflow:hidden; }
.scrolldown i::after{ content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--rose-deep); animation: slide 2.2s ease-in-out infinite; }
@keyframes slide{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* ============ PAGE: HOME ============ */
.hero-home{
  background: var(--ivory);
  min-height: 100vh;
  min-height: var(--vh);
  padding-top: 0;
  box-sizing: border-box;
}
.home-copy{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.7rem; z-index:5; max-width:640px; margin:0 auto; }
.home-copy img{ display:block; width:78vw; max-width:320px; height:auto; object-fit:contain; }
.home-copy h1{ font-size: clamp(2.6rem,5.4vw,5rem); }
.home-copy h1 em{ font-style:italic; color:var(--rose-deep); font-weight:300; }
.home-copy .lede{ max-width:42ch; }
.home-thread{ width:180px; height:14px; margin-top:-0.3rem; }
.home-thread path{ stroke:var(--gold); stroke-width:1; fill:none; stroke-dasharray:280; stroke-dashoffset:280; animation: draw 1.7s ease forwards .5s; opacity:0.85; }
.hero-home .scrolldown{ left:50%; transform:translateX(-50%); }

/* ============ PAGE: PRODUCT ============ */
.hero-product{ background: var(--blush); }
.product-grid{ display:grid; grid-template-columns:0.92fr 1.08fr; align-items:center; width:100%; }
.product-photo{ position:relative; height: calc(100vh - var(--header-h)); height: calc(var(--vh) - var(--header-h)); overflow:hidden; }
.product-photo img{ width:100%; height:100%; object-fit:cover; object-position:40% 55%; transform:scaleX(-1); }
.product-photo::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:1px; background:var(--hairline); }
.product-copy{ padding:0 6vw; display:flex; flex-direction:column; gap:1.3rem; }
.product-copy h2{ font-size: clamp(1.5rem,3.6vw,3rem); }
.price-row{ display:flex; align-items:baseline; gap:0.9rem; font-family:var(--display); color:var(--rose-deep); padding-top:0.3rem; }
.price-row .amount{ font-size:1.7rem; }
.price-row .unit{ font-family:var(--body); font-size:0.68rem; letter-spacing:0.2em; color:var(--ink-soft); text-transform:uppercase; }
.spec-list{ display:flex; flex-direction:column; gap:0.6rem; border-top:1px solid var(--hairline); padding-top:1.2rem; margin-top:0.2rem; }
.spec-list div{ display:flex; justify-content:space-between; font-size:0.78rem; color:var(--ink-soft); max-width:360px; }
.spec-list span:last-child{ color:var(--ink-soft); font-weight:400; text-align:right; }

/* ============ PAGE: COLLECTIONS ============ */
.hero-collections{ background: var(--yellow); }
.coll-wrap{ width:100%; display:flex; flex-direction:column; gap:2.2rem; }
.coll-head{ display:flex; flex-direction:column; gap:1.3rem; }
.coll-head h2{ font-size: clamp(1.5rem,3.6vw,3rem); }
.coll-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hairline); }
.coll-card{ padding:2.2rem 2.1rem; border-right:1px solid var(--hairline); display:flex; flex-direction:column; gap:1rem; transition: background .4s ease; }
.coll-card:last-child{ border-right:none; }
.coll-card:hover{ background: var(--blush); }
.coll-icon{ width:58px; height:58px; }
.coll-icon path, .coll-icon circle, .coll-icon ellipse{ stroke:var(--gold); stroke-width:1; fill:none; }
.coll-card h3{ font-family:var(--display); font-weight:400; font-size:1.35rem; }
.coll-card p{ font-size:0.84rem; color:var(--ink-soft); line-height:1.72; }
.coll-card .link{ font-size:0.65rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--rose-deep); margin-top:0.2rem; }

/* ============ PAGE: ABOUT ============ */
.hero-about{ background: var(--blush-deep); }
.about-single{ display:flex; flex-direction:column; width:100%; max-width:900px; margin:0 auto; }
.about-num{ font-family:var(--display); font-size: clamp(5rem,10vw,9rem); font-weight:300; color:var(--rose); opacity:0.55; line-height:0.8; }
.about-copy h2{ font-size: clamp(1.5rem,3.6vw,3rem); max-width:600px; margin-top: 0.3em; margin-bottom:1.1rem; }
.pillars{ display:grid; grid-template-columns:1fr; gap:2rem; margin-top:2rem; border-top:1px solid var(--hairline); padding-top:1.8rem; }
.pillars h4{ font-family:var(--display); font-weight:400; font-size:1.05rem; color:var(--rose-deep); margin-bottom:0.45rem; }
.pillars p{ font-size:0.78rem; color:var(--ink-soft); line-height:1.68; line-break: strict; word-break: keep-all; overflow-wrap: break-word;}
.sponsors span{ display:inline; margin-right:0.75em; }
.sponsors span:last-child{ margin-right:0; }

/* ============ PAGE: CONTACT ============ */
.hero-contact{ background: var(--ink); padding-bottom:4rem; }
.contact-single{ display:flex; flex-direction:column; gap:2.8rem; width:100%; max-width:760px; margin:150px auto; }
.hero-contact h2{ max-width:14ch; font-size: clamp(1.5rem,3.6vw,3rem); margin-top:1.2rem; }
.hero-contact .lede{ max-width:44ch; }
.contact-line{ font-family:var(--display); font-size:1.4rem; font-style:italic; color:var(--gold-soft); margin-top:1.2rem; }

.contact-details{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; border-top:1px solid rgba(255,253,251,0.16); padding-top:1.8rem; }
.contact-block .eyebrow{ display:block; margin-bottom:0.45rem; }
.contact-block p, .contact-block a{ font-size:0.9rem; color: rgba(255,253,251,0.85); line-height:1.65; }
.social-row{ display:flex; gap:1.5rem; margin-top:0.2rem; }
.social-row a{ font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color: rgba(255,253,251,0.7); border-bottom:1px solid transparent; transition:.3s; }
.social-row a:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }

/* -- email form -- */
.contact-form{ border-top:1px solid rgba(255,253,251,0.16); padding-top:2.2rem; display:flex; flex-direction:column; gap:1.5rem; }
.contact-form .eyebrow{ display:block; }
.form-field{ display:flex; flex-direction:column; gap:0.55rem; }
.form-field label{ font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase; color: rgba(255,253,251,0.55); }
.form-field label .req{ color:var(--gold-soft); margin-left:0.2rem; }
.form-field input, .form-field textarea{
  background:transparent; border:none; border-bottom:1px solid rgba(255,253,251,0.28);
  color:var(--ivory); font-family:var(--body); font-weight:300; font-size:0.92rem;
  padding:0.55rem 0.05rem; transition: border-color .3s ease; width:100%;
}
.form-field input::placeholder, .form-field textarea::placeholder{ color: rgba(200,200,200,0.15); }
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color: var(--gold-soft); }
.form-field textarea{ resize:vertical; min-height:130px; line-height:1.7; }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-submit{
  display:inline-flex; align-items:center; gap:0.9rem;
  font-family: var(--body); font-size:0.72rem; letter-spacing:0.32em; text-transform:uppercase;
  color: var(--ivory); background:none; border:none; cursor:pointer;
  padding-bottom:0.35rem; border-bottom:1px solid var(--ivory); width:fit-content;
  transition: letter-spacing .35s ease, color .35s ease, border-color .35s ease;
}
.form-submit:hover{ letter-spacing:0.45em; color:var(--gold-soft); border-color:var(--gold-soft); }
.form-submit svg{ width:14px; height:9px; transition: transform .35s ease; }
.form-submit:hover svg{ transform:translateX(4px); }
.form-note{ font-size:0.7rem; letter-spacing:0.03em; color: rgba(255,253,251,0.42); line-height:1.7; }
.form-msg{ font-size:0.84rem; letter-spacing:0.02em; padding:1rem 1.2rem; border:1px solid rgba(255,253,251,0.22); line-height:1.7; }
.form-msg.success{ color:var(--gold-soft); border-color:var(--gold-soft); }
.form-msg.error{ color:#e2a3a3; border-color:#e2a3a3; }
.form-msg ul{ margin:0.4rem 0 0 1.1rem; padding:0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  :root{ --header-h: 4.4rem; }
  .site-header{ padding: 0 1.2rem; }
  .brandmark{ font-size:0.78rem; letter-spacing:0.18em; }
  .nav-desktop{ display:none; }
  .burger{ display:block; }

  .hero{ padding: calc(var(--header-h) + 2.4rem) 0 3.2rem; }
  .hero-product{ padding-top: var(--header-h); }

  .product-grid{ grid-template-columns:1fr; }
  .product-photo{ height:44vh; order:-1; margin-bottom:1.6rem; }
  .product-copy{ padding: 0 6vw; }
  .scrolldown{ display:none; }

  .coll-grid{ grid-template-columns:1fr; }
  .coll-card{ border-right:none; border-bottom:1px solid var(--hairline); }
  .coll-card:last-child{ border-bottom:none; }

  .about-num{ font-size:3.6rem; }
  .pillars{ grid-template-columns:1fr; gap:1.3rem; }
  .sponsors span{ display:block; margin-right:0; }

  .contact-details{ grid-template-columns:1fr; gap:1.4rem; }
  .contact-single{ gap:2.2rem; margin:0px; }
  .tick{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}