/* ============================================================
   BE THE ONE — Home v3 component styles
   Shared tokens + nav/mobile-menu/footer/reveal used across the
   site. Page-specific styles (hero, system, book, journal, etc.)
   live inline in their own pages.
   ============================================================ */

:root{
  --bg:      #0b0a08;
  --bg-2:    #141211;
  --bg-3:    #1c1918;
  --ink:     #f2ead9;
  --ink-2:   #b4a891;
  --ink-3:   #7a7060;
  --ink-4:   #494132;
  --rule:    rgba(242,234,217,0.10);
  --rule-2:  rgba(242,234,217,0.22);
  --gold:    #d4a853;
  --bone:    #e8dcc4;
  --blood:   #b0442a;
  --accent:  var(--gold);

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  --pad-x:  clamp(20px, 4vw, 56px);
  --pad-y:  clamp(72px, 10vh, 128px);
  --cont:   1320px;
}

/* Grain */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(0,0,0,0.35) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.91  0 0 0 0 0.83  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: soft-light;
  opacity: 0.45;
}

/* =========== primitives =========== */
.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.eyebrow .mark{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--accent); margin-right: 10px; vertical-align: 2px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.4} }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 26px;
  background: var(--accent); color: var(--bg);
  font-family: var(--sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  transition: transform .2s ease, box-shadow .3s ease;
  border: 1px solid var(--accent);
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -16px color-mix(in oklab, var(--accent) 55%, transparent);
}
.btn svg{ width: 16px; height: 16px; transition: transform .2s ease; }
.btn:hover svg{ transform: translateX(3px); }

/* =========== NAV =========== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  padding: 16px 0;
  backdrop-filter: blur(18px);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.scrolled{ border-bottom-color: var(--rule); }
.nav-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px;
  max-width: var(--cont); margin: 0 auto; padding: 0 var(--pad-x);
}
.brand{
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink);
  justify-self: start;
  text-decoration: none;
}
.brand em{ color: var(--accent); font-style: italic; font-weight: 400; }
.nav-links{
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-links a{
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding: 6px 0;
  transition: color .2s ease;
  white-space: nowrap;
  text-decoration: none;
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a::after{
  content:''; position:absolute; left:50%; bottom:0; width:0; height:1px;
  background: var(--accent); transition: width .25s ease, left .25s ease;
}
.nav-links a:hover::after{ width:100%; left:0; }
.nav-right{ justify-self: end; display: flex; gap: 14px; align-items: center; }
.nav-lang{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 4px;
}
.nav-lang a{ color: var(--ink-3); padding: 2px 3px; transition: color .2s ease; text-decoration: none; }
.nav-lang a:hover{ color: var(--ink); }
.nav-lang a.on{ color: var(--accent); }
.nav-lang .sep{ color: var(--ink-4); }
.nav-cta{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 18px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  transition: all .2s ease;
  text-decoration: none;
}
.nav-cta:hover{ background: var(--accent); color: var(--bg); border-color: var(--accent); }
@media (max-width: 1200px){ .nav-lang{ display:none; } }
@media (max-width: 960px){
  .nav-row{ grid-template-columns: 1fr auto; }
  .nav-links{ display: none; }
  .nav-lang{ display:none; }
}
@media (max-width: 560px){
  .nav-cta .arrow-txt{ display:none; }
  .nav-cta{ padding: 10px 14px; }
}

/* Mobile menu button */
.nav-burger{
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--rule-2);
  cursor: pointer;
  transition: border-color .2s ease;
}
.nav-burger:hover{ border-color: var(--accent); }
.nav-burger .bars{ position: relative; width: 18px; height: 12px; }
.nav-burger .bars span{
  position: absolute; left: 0; right: 0;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
.nav-burger .bars span:nth-child(1){ top: 0; }
.nav-burger .bars span:nth-child(2){ top: 5px; }
.nav-burger .bars span:nth-child(3){ top: 10px; }
body.menu-open .nav-burger .bars span:nth-child(1){ top: 5px; transform: rotate(45deg); background: var(--accent); }
body.menu-open .nav-burger .bars span:nth-child(2){ opacity: 0; }
body.menu-open .nav-burger .bars span:nth-child(3){ top: 5px; transform: rotate(-45deg); background: var(--accent); }
@media (max-width: 960px){
  .nav-burger{ display: inline-flex; }
  .nav-right{ gap: 10px; }
}

/* Mobile drawer */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--bg);
  padding: 96px var(--pad-x) 32px;
  transform: translateY(-100%);
  transition: transform .45s cubic-bezier(0.76, 0, 0.24, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  pointer-events: none;
  visibility: hidden;
}
body.menu-open .mobile-menu{ transform: translateY(0); pointer-events: auto; visibility: visible; }
.mobile-menu .mm-links{
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
}
.mobile-menu .mm-links a{
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  transition: color .2s ease;
  text-decoration: none;
}
.mobile-menu .mm-links a .idx{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-4);
  text-transform: uppercase;
  font-weight: 500;
}
.mobile-menu .mm-links a:hover,
.mobile-menu .mm-links a:active{ color: var(--accent); }
.mobile-menu .mm-foot{
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 18px;
}
.mobile-menu .mm-foot .row{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mobile-menu .mm-foot .row .vals{ display:flex; gap: 12px; color: var(--ink); }
.mobile-menu .mm-foot .row .vals a{ color: var(--ink-2); padding: 2px 4px; text-decoration: none; }
.mobile-menu .mm-foot .row .vals a.on{ color: var(--accent); }
.mobile-menu .mm-cta{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 24px;
  background: var(--accent);
  color: var(--bg);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
}

/* =========== FOOTER =========== */
.foot{
  padding: 72px 0 28px;
  border-top: 1px solid var(--rule);
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}
.foot-main{
  max-width: var(--cont);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.foot-brand-col .foot-brand{
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
}
.foot-brand-col .foot-brand em{ color: var(--accent); font-style: italic; font-weight: 400; }
.foot-brand-col .tag{
  margin-top: 14px;
  max-width: 34ch;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.55;
}
.foot-brand-col .socials{
  margin-top: 22px;
  display: inline-flex; gap: 18px; align-items: center;
}
.foot-brand-col .socials a{
  color: var(--ink-3);
  display: inline-flex;
  transition: color .2s ease, transform .2s ease;
  text-decoration: none;
}
.foot-brand-col .socials a:hover{ color: var(--accent); transform: translateY(-1px); }
.foot-brand-col .socials svg{ display: block; }
.foot-col h4{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.foot-col a{
  display: block;
  padding: 5px 0;
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: none;
}
.foot-col a:hover{ color: var(--accent); }
.foot-bottom{
  max-width: var(--cont);
  margin: 56px auto 0;
  padding: 20px var(--pad-x) 0;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  gap: 20px;
  flex-wrap: wrap;
}
.foot-bottom .legal{ display: flex; gap: 22px; flex-wrap: wrap; }
.foot-bottom .legal a:hover{ color: var(--accent); }
@media (max-width: 900px){ .foot-main{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px){ .foot-main{ grid-template-columns: 1fr; } }

/* reveal */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .grain{ animation: none; }
  .eyebrow .mark{ animation: none; }
  .reveal{ transition: none; }
}