/* The Barber's Blade — Companion Site Shared Styles */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --red:#c0181a; --gold:#c8a55a;
  --gold-faint:rgba(200,165,90,0.22);
  --dark:#080808;
}
html, body {
  width:100%; min-height:100%;
  background:var(--dark);
  font-family:'Cormorant Garamond',serif;
  color:var(--gold);
}
a { color:inherit; text-decoration:none; }

/* NAV */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:60px; background:rgba(8,8,8,0.96);
  border-bottom:1px solid rgba(200,165,90,0.1);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5vw; max-width:1200px; margin:0 auto; left:50%; transform:translateX(-50%); right:auto; width:100%;
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-kanji { font-family:'Noto Serif JP',serif; font-size:20px; font-weight:100; color:var(--red); text-shadow:0 0 12px rgba(192,24,26,0.4); line-height:1; }
.nav-name { font-size:12px; font-weight:300; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold); }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-link { font-size:11px; font-weight:300; color:rgba(200,165,90,0.65); letter-spacing:0.3em; text-transform:uppercase; transition:color 0.2s; }
.nav-link:hover, .nav-link.active { color:var(--gold); }
.nav-cta { padding:8px 18px; border:1px solid rgba(200,165,90,0.5); border-radius:2px; font-size:11px; font-weight:300; color:var(--gold); letter-spacing:0.3em; text-transform:uppercase; transition:border-color 0.2s; }
.nav-cta:hover { border-color:var(--gold); }

/* PAGE WRAPPER */
.site-page { max-width:1000px; margin:0 auto; padding:100px 5vw 80px; }

/* TYPOGRAPHY */
h1 { font-family:'Noto Serif JP',serif; font-size:clamp(28px,5vw,52px); font-weight:100; color:var(--red); line-height:1.15; text-shadow:0 0 30px rgba(192,24,26,0.3); }
h2 { font-family:'Noto Serif JP',serif; font-size:clamp(20px,3vw,32px); font-weight:100; color:var(--red); line-height:1.2; margin-bottom:12px; }
h3 { font-size:clamp(16px,2vw,22px); font-weight:300; color:var(--gold); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:8px; }
p { font-size:clamp(16px,1.5vw,20px); font-weight:300; line-height:1.9; color:rgba(200,165,90,0.8); letter-spacing:0.05em; }
.rule { width:40px; height:1px; background:linear-gradient(to right,transparent,rgba(200,165,90,0.4),transparent); margin:24px 0; }

/* HERO */
.hero { min-height:85vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.hero-question { font-size:clamp(24px,4vw,48px); font-weight:200; color:var(--gold); line-height:1.4; max-width:700px; font-style:italic; margin-bottom:20px; }
.hero-byline { font-size:clamp(14px,1.8vw,20px); font-weight:300; color:rgba(200,165,90,0.6); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:40px; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.btn { height:56px; padding:0 28px; background:transparent; border-radius:2px; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:14px; font-weight:300; color:var(--gold); letter-spacing:0.35em; text-transform:uppercase; transition:border-color 0.25s; display:flex; align-items:center; gap:12px; }
.btn-primary { border:1px solid rgba(200,165,90,0.6); }
.btn-primary:hover { border-color:var(--gold); }
.btn-secondary { border:1px solid rgba(200,165,90,0.2); }
.btn-secondary:hover { border-color:rgba(200,165,90,0.5); color:rgba(200,165,90,0.8); }
.btn-kanji { font-family:'Noto Serif JP',serif; font-size:18px; font-weight:100; color:var(--red); }

/* SECTIONS */
.section { padding:60px 0; border-top:1px solid rgba(200,165,90,0.08); opacity:0; transform:translateY(8px); transition:opacity 0.6s ease, transform 0.6s ease; }
.section.visible { opacity:1; transform:none; }
.section-head { margin-bottom:32px; }

/* GRID */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-top:24px; }
.card { border:1px solid rgba(200,165,90,0.15); border-radius:2px; padding:24px; background:rgba(200,165,90,0.02); transition:border-color 0.25s; }
.card:hover { border-color:rgba(200,165,90,0.35); }
.card-kanji { font-family:'Noto Serif JP',serif; font-size:28px; font-weight:100; color:var(--red); text-shadow:0 0 14px rgba(192,24,26,0.3); margin-bottom:10px; line-height:1; }
.card-title { font-size:15px; font-weight:300; color:var(--gold); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:8px; }
.card-text { font-size:14px; font-weight:300; color:rgba(200,165,90,0.6); letter-spacing:0.05em; line-height:1.7; }
.card-link { display:inline-block; margin-top:14px; font-size:11px; font-weight:300; color:rgba(200,165,90,0.5); letter-spacing:0.3em; text-transform:uppercase; border-bottom:1px solid rgba(200,165,90,0.2); padding-bottom:2px; transition:color 0.2s; }
.card-link:hover { color:var(--gold); }

/* ARTICLE */
.article { max-width:680px; }
.article p { margin-bottom:24px; }
.article .lead { font-size:clamp(18px,2vw,24px); font-weight:300; color:rgba(200,165,90,0.9); margin-bottom:32px; }
.article-meta { font-size:10px; font-weight:300; color:rgba(200,165,90,0.35); letter-spacing:0.4em; text-transform:uppercase; margin-bottom:20px; }
.article-takeaway { border-left:2px solid rgba(192,24,26,0.5); padding:16px 20px; margin:32px 0; background:rgba(192,24,26,0.04); }
.article-takeaway p { font-size:15px; color:rgba(200,165,90,0.8); font-style:italic; margin:0; }

/* SHOP */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; margin-top:24px; }
.product-card { border:1px solid rgba(200,165,90,0.12); border-radius:2px; overflow:hidden; }
.product-img { height:200px; background:rgba(200,165,90,0.04); display:flex; align-items:center; justify-content:center; }
.product-img-kanji { font-family:'Noto Serif JP',serif; font-size:56px; font-weight:100; color:rgba(200,165,90,0.2); }
.product-body { padding:18px; }
.product-title { font-size:15px; font-weight:300; color:var(--gold); letter-spacing:0.15em; margin-bottom:4px; }
.product-desc { font-size:13px; font-weight:300; color:rgba(200,165,90,0.5); letter-spacing:0.05em; line-height:1.6; margin-bottom:12px; }
.product-price { font-size:12px; font-weight:300; color:rgba(200,165,90,0.4); letter-spacing:0.25em; }
.btn-notify { width:100%; height:44px; background:transparent; border:1px solid rgba(200,165,90,0.3); border-radius:2px; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:12px; font-weight:300; color:rgba(200,165,90,0.7); letter-spacing:0.3em; text-transform:uppercase; margin-top:10px; transition:border-color 0.2s; }
.btn-notify:hover { border-color:rgba(200,165,90,0.6); color:var(--gold); }
.notify-form { display:none; margin-top:8px; gap:8px; flex-direction:column; }
.notify-form.open { display:flex; }
.notify-input { width:100%; height:44px; background:transparent; border:1px solid rgba(200,165,90,0.3); border-radius:2px; padding:0 14px; font-family:'Cormorant Garamond',serif; font-size:14px; font-weight:300; color:var(--gold); outline:none; }
.notify-input::placeholder { color:rgba(200,165,90,0.4); }
.notify-submit { width:100%; height:44px; background:transparent; border:1px solid rgba(200,165,90,0.5); border-radius:2px; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:12px; font-weight:300; color:var(--gold); letter-spacing:0.3em; text-transform:uppercase; }

/* EMAIL FORM (general) */
.email-row { display:flex; gap:10px; flex-wrap:wrap; max-width:480px; margin-top:16px; }
.email-input { flex:1; min-width:200px; height:52px; background:transparent; border:1px solid rgba(200,165,90,0.35); border-radius:2px; padding:0 16px; font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:300; color:var(--gold); outline:none; }
.email-input::placeholder { color:rgba(200,165,90,0.4); }
.email-submit { height:52px; padding:0 24px; background:transparent; border:1px solid rgba(200,165,90,0.55); border-radius:2px; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:13px; font-weight:300; color:var(--gold); letter-spacing:0.35em; text-transform:uppercase; transition:border-color 0.2s; white-space:nowrap; }
.email-submit:hover { border-color:var(--gold); }

/* FOOTER */
.site-footer { border-top:1px solid rgba(200,165,90,0.08); padding:40px 5vw; max-width:1000px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-kanji { font-family:'Noto Serif JP',serif; font-size:14px; font-weight:100; color:var(--red); }
.footer-text { font-size:11px; font-weight:300; color:rgba(200,165,90,0.35); letter-spacing:0.3em; text-transform:uppercase; }
.footer-cta { font-size:12px; font-weight:300; color:rgba(200,165,90,0.5); letter-spacing:0.2em; text-transform:uppercase; transition:color 0.2s; }
.footer-cta:hover { color:var(--gold); }

/* RESPONSIVE */
@media (max-width:640px) {
  .site-nav { padding:0 20px; }
  .nav-links { display:none; }
  .site-page { padding:90px 20px 60px; }
  .hero { min-height:70vh; }
  .hero-btns { flex-direction:column; }
  .btn { width:100%; justify-content:center; }
  .btn-primary { font-size:12px; letter-spacing:0.25em; }
  .hero-question { font-size:clamp(22px,6vw,42px); }
}

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes riseIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation:fadeIn 0.8s ease forwards; }
.rise-in { animation:riseIn 0.8s ease forwards; }