/* ============================================================
   TOBIMASU — DESIGN SYSTEM
   お土産 | Le Japon s'envole vers vous
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Zen+Kaku+Gothic+New:wght@300;400;700&display=swap');

/* TOKENS */
:root {
  --ink:          #0d0b09;
  --ink-80:       rgba(13,11,9,0.8);
  --torii:        #b8301c;
  --torii-dark:   #8f2415;
  --torii-glow:   rgba(184,48,28,0.12);
  --washi:        #f2ece2;
  --washi-dim:    rgba(242,236,226,0.6);
  --washi-ghost:  rgba(242,236,226,0.04);
  --gold:         #c4922a;
  --gold-light:   #e8c97a;
  --gold-glow:    rgba(196,146,42,0.1);
  --smoke:        #8a8278;
  --smoke-light:  rgba(138,130,120,0.4);
  --cream:        #faf7f2;
  --border:       rgba(242,236,226,0.07);
  --border-hover: rgba(242,236,226,0.15);

  /* Gamme colors */
  --aji:     #b8301c;
  --karada:  #7a9e7e;
  --undo:    #c4922a;
  --kokoro:  #8a7cc8;

  /* Typography scale */
  --font-display: 'Shippori Mincho', serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-body:    'Zen Kaku Gothic New', sans-serif;

  /* Spacing */
  --nav-h:    88px;
  --pad-x:    60px;
  --pad-page: 140px;
}

/* RESET */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--ink);
  color: var(--washi);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--font-body); cursor:none; }
ul { list-style:none; }

/* GRAIN */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.032;
  pointer-events:none;
  z-index:9000;
}

/* CURSOR */
.cursor, .cursor-ring { position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; }
.cursor { width:8px; height:8px; background:var(--torii); }
.cursor-ring {
  width:32px; height:32px;
  border:1px solid rgba(184,48,28,0.35);
  z-index:9998;
  transition:width .3s ease, height .3s ease, border-color .3s ease;
}

/* NAV */
.nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x);
  z-index:500;
}
.nav::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(13,11,9,0.95) 0%, rgba(13,11,9,0.4) 80%, transparent 100%);
  pointer-events:none;
}
.nav-logo {
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  letter-spacing:.18em;
  position:relative; z-index:1;
}
.nav-logo .accent { color:var(--torii); }
.nav-logo .jp {
  font-size:11px;
  color:var(--smoke);
  letter-spacing:.25em;
  display:block;
  font-weight:400;
  margin-top:1px;
}
.nav-links {
  display:flex; gap:36px; align-items:center;
  position:relative; z-index:1;
}
.nav-links a {
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--smoke);
  transition:color .25s;
}
.nav-links a:hover { color:var(--washi); }
.nav-links a.active { color:var(--washi); }
.nav-cta {
  background:var(--torii);
  color:var(--washi) !important;
  padding:11px 26px;
  border-radius:2px;
  transition:background .25s !important;
}
.nav-cta:hover { background:var(--torii-dark) !important; }

/* MARQUEE */
.marquee-wrap {
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:18px 0;
  white-space:nowrap;
}
.marquee-track { display:inline-flex; animation:marquee 30s linear infinite; }
.marquee-item {
  padding:0 52px;
  font-size:10px;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:rgba(138,130,120,.3);
  border-right:1px solid var(--border);
}
.marquee-item .sep { color:var(--torii); margin-right:14px; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* SECTION UTILS */
.section-tag {
  font-size:10px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--torii);
  margin-bottom:22px;
  display:flex; align-items:center; gap:14px;
}
.section-tag::before { content:''; width:28px; height:1px; background:var(--torii); }
.section-title {
  font-family:var(--font-display);
  font-size:clamp(34px,4vw,58px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.02em;
  margin-bottom:28px;
}
.section-title em {
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:300;
  color:var(--gold);
  font-size:1.08em;
}
.section-body {
  font-size:15px;
  line-height:2;
  color:var(--smoke);
  max-width:480px;
}

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:15px 32px; border-radius:2px;
  border:none; transition:all .3s;
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.08);
  transform:translateX(-100%); transition:transform .4s;
}
.btn:hover::after { transform:translateX(0); }
.btn-primary { background:var(--torii); color:var(--washi); }
.btn-primary:hover { background:var(--torii-dark); }
.btn-outline {
  background:transparent;
  border:1px solid var(--border);
  color:var(--smoke);
}
.btn-outline:hover { border-color:var(--border-hover); color:var(--washi); }
.btn-ghost {
  background:transparent; color:var(--smoke);
  padding:0; border-radius:0;
}
.btn-ghost:hover { color:var(--washi); }
.btn-ghost::after { display:none; }

/* FORM ELEMENTS */
.field { margin-bottom:20px; }
.field label {
  display:block;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--smoke); margin-bottom:10px;
}
.field input, .field select, .field textarea {
  width:100%;
  background:rgba(242,236,226,.03);
  border:1px solid var(--border);
  color:var(--washi);
  font-family:var(--font-body);
  font-weight:300;
  font-size:14px;
  padding:14px 18px;
  border-radius:2px;
  outline:none;
  transition:border-color .25s;
  -webkit-appearance:none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:rgba(242,236,226,.25);
}
.field input::placeholder { color:var(--smoke); opacity:.5; }

/* CARD BASE */
.card {
  background:var(--washi-ghost);
  border:1px solid var(--border);
  border-radius:4px;
  transition:border-color .3s, background .3s;
}
.card:hover {
  border-color:var(--border-hover);
  background:rgba(242,236,226,.06);
}

/* DIVIDER */
.divider { height:1px; background:var(--border); margin:0; }

/* FOOTER */
.footer {
  border-top:1px solid var(--border);
  padding:80px var(--pad-x) 52px;
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px;
  margin-bottom:72px;
  max-width:1400px; margin-left:auto; margin-right:auto;
}
.footer-brand-name {
  font-family:var(--font-display);
  font-size:28px; font-weight:700;
  margin-bottom:6px;
}
.footer-brand-name .accent { color:var(--torii); }
.footer-brand-jp {
  font-family:var(--font-display);
  font-size:13px; color:var(--smoke);
  letter-spacing:.2em; margin-bottom:20px;
}
.footer-brand-text {
  font-size:13px; line-height:1.9;
  color:var(--smoke); max-width:290px;
}
.footer-col-title {
  font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--washi);
  margin-bottom:22px;
}
.footer-col-links { display:flex; flex-direction:column; gap:11px; }
.footer-col-links a { font-size:13px; color:var(--smoke); transition:color .25s; }
.footer-col-links a:hover { color:var(--washi); }
.footer-bottom {
  max-width:1400px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; border-top:1px solid rgba(242,236,226,.04);
}
.footer-copy { font-size:11px; color:rgba(138,130,120,.4); letter-spacing:.08em; }
.footer-jp { font-family:var(--font-display); font-size:13px; color:rgba(138,130,120,.25); }

/* SCROLL REVEAL */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .75s ease, transform .75s ease;
}
.reveal.from-left { transform:translateX(-28px); }
.reveal.from-right { transform:translateX(28px); }
.reveal.visible { opacity:1; transform:translate(0); }

/* LEGAL PAGES */
.legal-content {
  max-width:800px; margin:0 auto;
  padding:calc(var(--nav-h) + 80px) var(--pad-x) 120px;
}
.legal-content h1 {
  font-family:var(--font-display); font-size:42px; font-weight:600;
  letter-spacing:-.02em; margin-bottom:12px;
}
.legal-content .legal-date {
  font-size:12px; color:var(--smoke); letter-spacing:.15em;
  margin-bottom:60px; padding-bottom:32px; border-bottom:1px solid var(--border);
}
.legal-content h2 {
  font-family:var(--font-display); font-size:22px; font-weight:600;
  margin:52px 0 18px; letter-spacing:-.01em;
}
.legal-content h3 {
  font-size:14px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--smoke); margin:28px 0 12px;
}
.legal-content p {
  font-size:14px; line-height:2.1; color:rgba(138,130,120,.85);
  margin-bottom:16px;
}
.legal-content p strong { color:var(--washi); font-weight:400; }
.legal-content ul { margin:12px 0 16px 0; }
.legal-content ul li {
  font-size:14px; line-height:2; color:rgba(138,130,120,.85);
  padding-left:20px; position:relative; margin-bottom:4px;
}
.legal-content ul li::before {
  content:'—'; position:absolute; left:0;
  color:var(--torii); font-size:11px;
}
.legal-content a { color:var(--torii); border-bottom:1px solid rgba(184,48,28,.3); transition:border-color .25s; }
.legal-content a:hover { border-color:var(--torii); }

/* SVG ICONS */
.icon { display:inline-block; vertical-align:middle; }
.icon svg { display:block; }

/* HAMBURGER MENU */
.nav-burger {
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; padding:8px;
  cursor:pointer; z-index:600;
  position:relative;
}
.nav-burger span {
  display:block; width:22px; height:1.5px;
  background:var(--washi); transition:all .3s ease;
}
.nav-burger.active span:nth-child(1) { transform:rotate(45deg) translate(4px, 5px); }
.nav-burger.active span:nth-child(2) { opacity:0; }
.nav-burger.active span:nth-child(3) { transform:rotate(-45deg) translate(4px, -5px); }

/* RESPONSIVE */
@media (max-width:1024px) {
  :root { --pad-x:32px; --pad-page:100px; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .gammes-grid { grid-template-columns:repeat(2,1fr); }
  .seasonal-grid { grid-template-columns:repeat(2,1fr); }
  .stories-grid { grid-template-columns:1fr; }
  .products-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  :root { --pad-x:20px; --pad-page:80px; }
  body { cursor:auto; }
  .cursor, .cursor-ring { display:none; }

  /* Mobile Nav */
  .nav-burger { display:flex; }
  .nav-links {
    display:flex !important;
    position:fixed; inset:0;
    background:var(--ink);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    z-index:550;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
  }
  .nav-links.open {
    opacity:1;
    pointer-events:all;
  }
  .nav-links a {
    font-size:16px !important;
    letter-spacing:.15em !important;
  }
  .nav-cta {
    margin-top:12px;
  }

  /* Layout fixes */
  #concept { grid-template-columns:1fr; gap:48px; }
  .concept-card-wrap { height:380px; }
  .cc-main { width:260px; height:340px; }
  .cc-stat { width:160px; height:120px; bottom:20px; }
  .gammes-header { flex-direction:column; gap:20px; align-items:flex-start; }
  .gammes-grid { grid-template-columns:1fr; }
  .gamme { min-height:auto; padding:40px 28px; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .stat-cell { padding:28px var(--pad-x); }
  .seasonal-grid { grid-template-columns:1fr 1fr; }
  .products-grid { grid-template-columns:1fr; }
  .stories-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }

  /* Builder responsive */
  .builder-layout { grid-template-columns:1fr; }
  .builder-right {
    position:relative; top:auto; height:auto;
    border-top:1px solid var(--border);
    padding:32px var(--pad-x);
  }
  .format-grid { grid-template-columns:1fr; gap:10px; }
  .items-grid { grid-template-columns:1fr; }

  /* Auth responsive */
  .auth-layout { grid-template-columns:1fr; }
  .auth-left { display:none; }
  .auth-right { padding:calc(var(--nav-h) + 40px) var(--pad-x) 60px; }

  /* Dashboard responsive */
  .dash-layout { grid-template-columns:1fr; }
  .dash-sidebar {
    position:relative; height:auto;
    padding:calc(var(--nav-h) + 20px) var(--pad-x) 20px;
    border-right:none; border-bottom:1px solid var(--border);
  }
  .dash-main { padding:40px var(--pad-x) 80px; }

  /* CTA band */
  #cta-band { padding:60px var(--pad-x); }
  .cta-band-title { font-size:clamp(28px, 8vw, 48px); }
}

@media (max-width:480px) {
  :root { --pad-x:16px; --pad-page:60px; }
  .stats-row { grid-template-columns:1fr; }
  .seasonal-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .pref-grid { grid-template-columns:1fr; }
  .builder-steps { flex-direction:column; gap:8px; }
  .catalogue-hero { flex-direction:column; align-items:flex-start; gap:16px; }
}