/* Fortunier — shared styles
   Tokens
   --ink:        #1B2521  (near-black, warm)
   --paper:      #F6F2E7  (warm cream page bg)
   --surface:    #FFFFFF  (card bg)
   --primary:    #0B5D49  (deep teal — trust, money)
   --primary-2:  #16846A  (brighter teal — accents, links)
   --gold:       #E8A23A  (fortune gold — sparing highlight)
   --line:       rgba(27,37,33,0.12)
   Display face: "Fraunces" (serif, warm, a little eccentric — "fortune" personality)
   Body face:    "Inter"
   Data face:    "IBM Plex Mono" (ticker / numbers)
*/

@font-face {
  font-family: 'Fraunces';
  src: local('Fraunces');
}

:root{
  --ink:#1B2521;
  --ink-soft:#5B6660;
  --paper:#F6F2E7;
  --surface:#FFFFFF;
  --primary:#0B5D49;
  --primary-2:#16846A;
  --gold:#E8A23A;
  --gold-soft:#FBE6C4;
  --line:rgba(27,37,33,0.12);
  --line-strong:rgba(27,37,33,0.2);
  --radius:14px;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:16px;
}

img{max-width:100%;display:block;}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 0.5em;
  color:var(--ink);
}

h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:600;line-height:1.05;letter-spacing:-0.02em;}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.2;}
h3{font-size:1.15rem;}

p{margin:0 0 1em;color:var(--ink-soft);}
a{color:var(--primary-2);text-decoration:none;}
a:hover{text-decoration:underline;}

.eyebrow{
  font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--primary-2);
  margin:0 0 0.9em;
  display:flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:1.4em;height:1px;
  background:var(--gold);
}

/* layout shell */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* header / nav */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,242,231,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  max-width:var(--maxw);margin:0 auto;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Fraunces',serif;font-weight:600;font-size:1.25rem;color:var(--ink);
}
.brand:hover{text-decoration:none;}
.brand-mark{flex:none;}
.brand-mark rect{fill:var(--primary);}
.brand-mark .star{fill:var(--gold);}

.nav-links{display:flex;align-items:center;gap:28px;font-size:0.95rem;}
.nav-links a{color:var(--ink);}
.nav-links a.is-active{color:var(--primary);font-weight:500;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter',sans-serif;font-weight:500;font-size:0.95rem;
  padding:11px 22px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);
  cursor:pointer;
  transition:transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;border-color:var(--primary);color:var(--primary);}
.btn:active{transform:scale(0.98);}
.btn-primary{
  background:var(--primary);color:var(--paper);border-color:var(--primary);
}
.btn-primary:hover{background:var(--primary-2);color:var(--paper);border-color:var(--primary-2);}

/* hero */
.hero{
  padding:88px 0 64px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
.hero p.lede{
  font-size:1.15rem;
  max-width:34em;
}

/* countdown — signature element: a ledger/ticker card */
.ticker{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px;
  box-shadow:0 1px 0 var(--line);
}
.ticker-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:18px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-soft);
}
.ticker-head .date{color:var(--primary);}
.ticker-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.ticker-cell{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 8px;
  text-align:center;
}
.ticker-num{
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:600;
  color:var(--primary);
  line-height:1;
}
.ticker-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:8px;
}
.ticker-foot{
  margin-top:18px;
  padding-top:18px;
  border-top:1px dashed var(--line-strong);
}

/* email form */
.signup{
  display:flex;gap:10px;margin-top:1.4rem;flex-wrap:wrap;
}
.signup input[type="email"]{
  flex:1 1 220px;
  min-width:0;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:var(--surface);
  font-family:'Inter',sans-serif;font-size:0.95rem;color:var(--ink);
}
.signup input[type="email"]:focus{
  outline:2px solid var(--primary-2);outline-offset:1px;
}
.signup-note{font-size:0.82rem;color:var(--ink-soft);margin-top:0.6em;}

/* sections */
.section{padding:64px 0;}
.section-head{max-width:42em;margin-bottom:40px;}

/* feature / pillar cards */
.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.pillar{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
}
.pillar .glyph{
  width:40px;height:40px;
  border-radius:10px;
  background:var(--primary);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  color:var(--gold-soft);
  font-family:'Fraunces',serif;font-weight:600;font-size:1.1rem;
}
.pillar h3{margin-bottom:0.4em;}
.pillar p{margin-bottom:0;font-size:0.95rem;}

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

/* footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:40px 0;
}
.footer-grid{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px;
}
.footer-grid .brand{font-size:1.05rem;}
.footer-links{display:flex;gap:24px;font-size:0.9rem;}
.footer-links a{color:var(--ink-soft);}
.copyright{font-size:0.82rem;color:var(--ink-soft);}

/* about page specifics */
.about-hero{padding:72px 0 40px;}
.about-hero h1{max-width:14ch;}
.story{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:48px;
  align-items:start;
}
.story .lead-col p.lede{font-size:1.1rem;}
.values{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:8px;
}
.value-row{
  border-top:1px solid var(--line);
  padding:18px 0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:baseline;
}
.value-row .num{
  font-family:'IBM Plex Mono',monospace;color:var(--gold);font-size:0.85rem;letter-spacing:0.1em;
}
.value-row h3{margin-bottom:0.3em;}
.value-row p{margin-bottom:0;font-size:0.92rem;}

.cta-band{
  background:var(--primary);
  border-radius:var(--radius);
  padding:48px 40px;
  color:var(--paper);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.cta-band h2{color:var(--paper);margin-bottom:0.3em;}
.cta-band p{color:rgba(246,242,231,0.78);margin-bottom:0;}
.cta-band .btn-primary{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.cta-band .btn-primary:hover{background:var(--gold-soft);border-color:var(--gold-soft);}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

/* responsive */
@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .pillars{grid-template-columns:1fr;}
  .story{grid-template-columns:1fr;}
  .values{grid-template-columns:1fr;}
  .nav-links{gap:16px;}
}
@media (max-width: 600px){
  .nav-links .nav-only{display:none;}
  .ticker-grid{grid-template-columns:repeat(4,1fr);gap:6px;}
  .ticker{padding:20px 16px;}
  .ticker-num{font-size:1.5rem;}
  .cta-band{padding:32px 24px;flex-direction:column;align-items:flex-start;}
  .section{padding:48px 0;}
  .hero{padding:56px 0 40px;}
}