/* Shared tone-and-manner for /works/[slug] case-study pages.
   Mirrors index.html's palette/typography. No build step in this project,
   so this file plays the role CSS Modules would in a bundled setup:
   a single, reusable source of truth instead of duplicating <style> per page. */

:root {
  --ink: #0a111e;
  --ink-soft: #070c16;
  --cream: #f2ede3;
  --gold: #c7a670;
  --gold-soft: rgba(199,166,112,.28);
  --gold-border: rgba(199,166,112,.18);
  --grey-1: #aeb6c2;
  --grey-2: #97a1b0;
  --grey-3: #8a94a3;
  --grey-4: #6b7480;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

.nav-link:hover { color: var(--gold); }
.contact-btn:hover { background: rgba(199,166,112,.12) !important; }
.cta-btn:hover { filter: brightness(1.05); }
.cs-demo-link:hover { gap: 20px !important; }

.cs-page { position: relative; overflow: hidden; background: var(--ink); min-width: 1200px; }

.cs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 56px; border-bottom: 1px solid rgba(199,166,112,.14);
}
.cs-header nav { display: flex; align-items: center; gap: 40px; }
.cs-header .nav-link {
  font-size: 12.5px; letter-spacing: 2px; color: #e5ddce; transition: color .2s;
}

.cs-hero {
  padding: 90px 56px 70px;
  background: linear-gradient(180deg, rgba(199,166,112,.06), rgba(10,17,30,0));
  border-bottom: 1px solid rgba(199,166,112,.1);
}
.cs-hero-inner { max-width: 900px; margin: 0 auto; }
.cs-tag {
  display: inline-block; font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: 3px; color: var(--gold); border: 1px solid var(--gold-soft);
  border-radius: 2px; padding: 6px 14px;
}
.cs-hero h1 {
  margin: 22px 0 0; font-family: 'Shippori Mincho', serif; font-weight: 600;
  font-size: 34px; letter-spacing: .08em; color: #fbf8f1;
}
.cs-hero p.lead {
  margin: 18px 0 0; font-size: 13.5px; line-height: 1.9; letter-spacing: .04em; color: var(--grey-1);
}
.cs-disclaimer {
  margin: 20px 0 0; font-size: 11.5px; letter-spacing: .04em; color: var(--grey-3);
  border-left: 2px solid var(--gold-soft); padding-left: 12px;
}

.cs-block {
  max-width: 900px; margin: 0 auto; padding: 64px 56px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cs-block:last-of-type { border-bottom: none; }
.cs-block-label {
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 4px; color: var(--gold);
}
.cs-block h2 {
  margin: 12px 0 0; font-family: 'Shippori Mincho', serif; font-weight: 600;
  font-size: 24px; letter-spacing: .1em; color: #fbf8f1;
}
.cs-block p {
  margin: 22px 0 0; font-size: 13.5px; line-height: 2.05; letter-spacing: .03em; color: var(--grey-1);
}
.cs-block ul { margin: 22px 0 0; padding: 0; list-style: none; }
.cs-block ul li {
  position: relative; padding-left: 20px; margin-top: 14px;
  font-size: 13.5px; line-height: 1.9; letter-spacing: .03em; color: var(--grey-1);
}
.cs-block ul li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--gold);
}

.cs-meta-grid {
  margin-top: 26px; display: grid; grid-template-columns: 140px 1fr; row-gap: 14px;
}
.cs-meta-grid dt { font-size: 12px; letter-spacing: .1em; color: var(--grey-4); }
.cs-meta-grid dd { margin: 0; font-size: 13.5px; letter-spacing: .03em; color: var(--cream); }

.cs-demo-link {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 30px;
  font-size: 12.5px; letter-spacing: .1em; color: var(--gold);
  border-bottom: 1px solid var(--gold-soft); padding-bottom: 6px; transition: gap .25s;
}

.cs-cta {
  text-align: center; padding: 90px 56px 100px;
}
.cs-cta h2 {
  margin: 14px 0 0; font-family: 'Shippori Mincho', serif; font-weight: 600;
  font-size: 28px; letter-spacing: .08em; color: #fbf8f1;
}
.cs-cta p { margin: 18px 0 0; font-size: 13px; color: var(--grey-2); }
.cs-cta-btn {
  display: inline-flex; align-items: center; gap: 20px; margin-top: 34px;
  padding: 18px 28px; background: linear-gradient(180deg,#f6dd8e 0%,#e0b74e 46%,#c69a34 100%);
  border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px rgba(0,0,0,.3);
  transition: filter .2s;
}
.cs-cta-btn span.label { font-size: 13.5px; font-weight: 500; letter-spacing: .1em; color: #2a1e0e; }
.cs-cta-btn span.icon {
  width: 26px; height: 26px; border-radius: 50%; background: #faf4e8;
  display: flex; align-items: center; justify-content: center;
}

.cs-footer { background: var(--ink-soft); border-top: 1px solid rgba(199,166,112,.14); }
.cs-footer-inner {
  max-width: 1240px; margin: 0 auto; padding: 34px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.cs-footer nav { display: flex; align-items: center; gap: 34px; }
.cs-footer .nav-link { font-size: 11.5px; letter-spacing: 2px; color: #b6bdc8; transition: color .2s; }
.cs-footer-bottom { border-top: 1px solid rgba(255,255,255,.05); padding: 22px; text-align: center; }
.cs-footer-bottom span {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 3px; color: var(--grey-4);
}