/* ============================================================
   Cent & Marriage — Production Site
   Editorial, warm, film-tone, "red thread" accent
   ============================================================ */

:root{
  --paper: #FAF7F1;
  --paper-2: #F2EBDD;
  --paper-3: #E8DFCC;
  --ink: #1A1814;
  --ink-2: #3A352E;
  --ink-3: #6B655B;
  --ink-4: #9B9387;
  --rule: #C9C0AD;
  --rule-soft: #DFD6C2;
  --thread: #C13F2C;       /* subdued red — "red thread of fate" */
  --thread-deep: #A2331F;
  --serif: "Noto Serif JP", "Cormorant Garamond", serif;
  --display: "Cormorant Garamond", "Noto Serif JP", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --maxw: 1240px;
  --gutter-w: 88px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  font-family:var(--serif);
  background:var(--paper);
  color:var(--ink);
  font-weight:400;
  line-height:1.85;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:transparent;border:none;color:inherit;cursor:pointer}
ul{list-style:none}

/* film-tone treatment for photos so they share a palette */
.film{ filter: saturate(.82) contrast(1.02) brightness(1.0); }

/* ============== Header ============== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding:22px 40px;
  display:flex;justify-content:space-between;align-items:center;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
  color:var(--paper);
}
.hdr.scrolled{
  background: rgba(250,247,241,.94);
  backdrop-filter: blur(8px);
  color:var(--ink);
  border-bottom:1px solid var(--rule-soft);
}
.hdr.solid{
  background: var(--paper);
  color: var(--ink);
  border-bottom:1px solid var(--rule-soft);
}
.hdr-logo{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--display);
  font-style:italic;
  font-size:23px;
  letter-spacing:.005em;
  font-weight:500;
}
.hdr-logo .amp{
  color:var(--thread);
  font-size:26px;
  font-weight:400;
  margin: 0 1px;
}
.hdr-logo .jp{
  font-family:var(--serif);
  font-style:normal;
  font-size:11px;
  letter-spacing:.2em;
  opacity:.72;
  padding-bottom:3px;
}
.nav-desk{
  display:flex;align-items:center;gap:36px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.nav-desk a{
  position:relative;
  padding:6px 0;
  transition:opacity .2s;
}
.nav-desk a .num{
  display:inline-block;
  font-size:9px;
  opacity:.55;
  margin-right:8px;
  vertical-align:1px;
}
.nav-desk a:hover{ opacity:.7 }
.nav-desk a.is-current{ color: var(--thread); }
.nav-cta{
  border:1px solid currentColor;
  padding:9px 16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:background .2s,color .2s;
}
.hdr.scrolled .nav-cta:hover, .hdr.solid .nav-cta:hover{
  background:var(--ink); color:var(--paper);
}
.hdr:not(.scrolled):not(.solid) .nav-cta:hover{
  background:var(--paper); color:var(--ink);
}
.burger{
  display:none;
  width:42px;height:42px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid currentColor;
}
.burger span{width:18px;height:1px;background:currentColor;display:block}

/* ============== Mobile menu ============== */
.fsmenu{
  position:fixed;inset:0;z-index:80;
  background:var(--paper);
  padding:32px 28px;
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.7,0,.2,1);
  display:flex;flex-direction:column;
  overflow:auto;
}
.fsmenu.open{ transform:translateY(0); }
.fsmenu-top{ display:flex;justify-content:space-between;align-items:center; }
.fsmenu-close{
  width:42px;height:42px;border:1px solid var(--ink);
  font-size:20px;
}
.fsmenu-nav{
  display:flex;flex-direction:column;
  margin-top:48px;flex:1;justify-content:center;
}
.fsmenu-nav a{
  font-family:var(--display);font-style:italic;
  font-size: clamp(34px, 8vw, 56px);
  line-height:1.1;
  padding:14px 0;
  border-bottom:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;align-items:baseline;
}
.fsmenu-nav a .num{
  font-family:var(--mono);font-style:normal;font-size:11px;
  color:var(--ink-3);letter-spacing:.2em;
}
.fsmenu-bot{
  margin-top:32px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--ink-3);
  display:flex;flex-direction:column;gap:8px;
}

/* ============== Footer ============== */
footer{
  background:var(--ink);
  color:var(--paper);
  padding: 96px 48px 48px;
  margin-top: 0;
}
.foot-grid{
  max-width: var(--maxw); margin: 0 auto;
  display:grid;grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom:64px;
  border-bottom:1px solid rgba(250,247,241,.16);
}
.foot-grid h5{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  color: rgba(250,247,241,.55);
  text-transform:uppercase;
  margin-bottom:18px;
  font-weight:400;
}
.foot-grid ul{ display:flex;flex-direction:column;gap:10px;}
.foot-grid a{ font-size:14px;color: rgba(250,247,241,.85); }
.foot-grid a:hover{ color: var(--paper); }
.foot-brand .mark{
  font-family:var(--display);font-style:italic;
  font-size:36px;font-weight:500;
  margin-bottom:10px;
}
.foot-brand .mark .amp{ color:var(--thread); }
.foot-brand p{
  font-size:13px;line-height:1.9;
  color: rgba(250,247,241,.7);
  max-width:340px;
}
.foot-bot{
  max-width:var(--maxw);margin: 32px auto 0;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color: rgba(250,247,241,.5);
}
.foot-bot .links{ display:flex;gap:24px; }
.foot-bot .links a:hover{ color:var(--paper); }

/* ============== Buttons ============== */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 26px;
  font-family:var(--serif);font-size:14px;
  letter-spacing:.08em;
  border:1px solid currentColor;
  cursor:pointer;
  transition: background .25s, color .25s, transform .2s;
}
.btn .arr{ font-family:var(--mono);font-size:13px; }
.btn:hover{ transform:translateY(-1px) }
.btn-solid{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.btn-solid:hover{ background:var(--thread); border-color:var(--thread); color:var(--paper); }
.btn-outline{ background:transparent; color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-thread{ background:var(--thread); color:var(--paper); border-color:var(--thread); }
.btn-thread:hover{ background:var(--thread-deep); border-color:var(--thread-deep); }
.btn-ghost-light{
  background:transparent; color:var(--paper); border:1px solid rgba(250,247,241,.5);
}
.btn-ghost-light:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* ============== Common typography ============== */
.mono-label{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.22em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:.22em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:32px;height:1px;background:var(--thread);
  display:inline-block;
}

.section-title{
  font-family:var(--serif);
  font-weight:500;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing:.04em;
  line-height:1.45;
}
.section-title em{
  font-family:var(--display);
  font-style:italic;
  color:var(--thread);
  font-weight:500;
}

.stage{
  max-width:var(--maxw);
  margin: 0 auto;
  padding: 0 48px;
}

/* page hero (inner pages) */
.page-hero{
  padding: 180px 0 72px;
  border-bottom:1px solid var(--rule-soft);
}
.page-hero .stage{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:end;
  gap:32px;
}
.page-hero .num{
  font-family:var(--display);font-style:italic;
  font-size:14px;letter-spacing:.3em;color:var(--ink-3);
  margin-bottom:18px;
  display:flex;align-items:center;gap:14px;
}
.page-hero .num::before{
  content:"";width:48px;height:1px;background:var(--thread);
}
.page-hero h1{
  font-family:var(--serif);font-weight:500;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing:.04em;
  line-height:1.3;
}
.page-hero h1 em{
  font-family:var(--display);font-style:italic;
  color:var(--thread);font-weight:500;
}
.page-hero .sub{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--ink-3);
  text-transform:uppercase;
  white-space:nowrap;
}

/* ============== Floating bar ============== */
.floatbar{
  position:fixed;bottom:18px;left:50%;
  transform:translate(-50%, 130%);
  z-index:70;
  display:flex;align-items:stretch;gap:0;
  background:var(--ink);
  color:var(--paper);
  border-radius:2px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;
  transition: transform .4s cubic-bezier(.7,0,.2,1);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.floatbar.show{ transform:translate(-50%, 0); }
.floatbar > *{ padding: 14px 18px; display:flex;align-items:center;gap:8px; }
.floatbar .label{ color: rgba(250,247,241,.6); }
.floatbar .sep{ width:1px; padding:0; background: rgba(250,247,241,.18); }
.floatbar .pri{
  background:var(--thread);
  color:var(--paper);
}
.floatbar .pri:hover{ background:var(--thread-deep) }

/* ============== Responsive ============== */
@media (max-width: 980px){
  .nav-desk{display:none}
  .burger{display:flex}
  .hdr{padding:16px 20px}
  .stage{padding: 0 20px}
  .foot-grid{grid-template-columns: 1fr 1fr; gap:40px;}
  .page-hero{ padding: 130px 0 48px; }
  .page-hero .stage{ grid-template-columns:1fr; gap:14px; align-items:start;}
  .page-hero .sub{ white-space:normal; }
  footer{padding:64px 24px 32px}
  .foot-bot{flex-direction:column;gap:14px;align-items:flex-start}
}