/* ============================================================
   BACTRIA — landing page
   Palette sampled from the brand assets:
   Navy  #01225b  (LinkedIn banner ground)
   Cream #fcf6eb  (the leopard)
   Gold  #d8b065  (the scepter)
   Wordmark: Cinzel — Roman inscriptional caps, matching the banner.
   ============================================================ */

:root{
  --navy:#01225b;
  --navy-deep:#011a47;
  --cream:#fcf6eb;
  --gold:#d8b065;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  min-height:100svh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 90% at 50% 38%, #02265f 0%, var(--navy) 54%, var(--navy-deep) 100%);
  color:var(--cream);
  font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-attachment:fixed;
  position:relative;
}
/* landing page is a single locked screen; the record page scrolls */
body:not(.page-record){overflow:hidden;}
body.page-record{display:flex;flex-direction:column;}

/* ── centered mark + wordmark ── */
.stage{
  position:relative;z-index:1;
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:2rem 1.5rem;
}

.mark{
  width:clamp(112px,16vw,188px);
  height:auto;
  /* transparent mark — no tile; soft shadow gives it gentle lift on the navy */
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.30));
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}

.wordmark{
  font-family:"Cinzel",serif;
  font-weight:500;
  font-size:clamp(2.4rem,8vw,5.4rem);
  letter-spacing:.30em;
  text-transform:uppercase;
  padding-left:.30em;                 /* optical centering for tracking */
  color:var(--cream);
  line-height:1;
  margin-top:clamp(1.6rem,3.4vw,2.6rem);
  animation:rise .9s .08s cubic-bezier(.2,.7,.2,1) both;
}

/* poetic tagline — Cinzel, wide, cream; matches the wordmark, quieter */
.tagline{
  font-family:"Cinzel",serif;
  font-weight:400;
  font-size:clamp(.84rem,1.9vw,1.18rem);
  letter-spacing:.26em;
  text-transform:uppercase;
  padding-left:.26em;
  color:var(--cream);
  line-height:1.4;
  margin-top:clamp(1.5rem,3vw,2.2rem);
  animation:rise .9s .16s cubic-bezier(.2,.7,.2,1) both;
}

/* plain standfirst — what Bactria is, stated honestly */
.standfirst{
  font-family:"Inter",sans-serif;
  font-weight:300;
  font-size:clamp(.66rem,1.4vw,.8rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(252,246,235,.55);
  position:relative;
  margin-top:clamp(1.4rem,2.6vw,1.9rem);
  padding-top:clamp(1.3rem,2.4vw,1.7rem);
  animation:rise .9s .24s cubic-bezier(.2,.7,.2,1) both;
}
/* thin divider rule above the standfirst */
.standfirst::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:clamp(46px,7vw,74px);height:1px;background:rgba(252,246,235,.22);
}

/* ── footer ── */
.foot{
  position:relative;z-index:1;
  padding:0 1.5rem clamp(1.6rem,4vw,2.4rem);
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:.85rem 1.1rem;
  animation:rise .9s .32s cubic-bezier(.2,.7,.2,1) both;
}
.foot-links{display:flex;align-items:center;gap:1.1rem;}
.foot-links a,
.foot-copy{
  font-family:"Inter",sans-serif;font-weight:300;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(252,246,235,.42);
}
.foot-links a{
  text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.foot-links a:hover{color:var(--cream);border-color:rgba(252,246,235,.4);}
/* thin separator between links and the copyright */
.foot-sep{width:1px;height:.78rem;background:rgba(252,246,235,.2);}

@media (max-width:520px){
  .foot-sep--copy{display:none;}
}

@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .mark,.wordmark,.tagline,.standfirst,.foot{animation:none;}
}

/* ============================================================
   TRACK RECORD PAGE
   ============================================================ */
.page-record{min-height:100svh;}

.rec-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem clamp(1.4rem,5vw,3.5rem);
}
.rec-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--cream);}
.rec-mark{width:34px;height:auto;}
.rec-word{
  font-family:"Cinzel",serif;font-size:1.05rem;letter-spacing:.28em;
  text-transform:uppercase;padding-left:.28em;
}
.rec-back{
  font-family:"Inter",sans-serif;font-weight:300;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(252,246,235,.5);
  text-decoration:none;transition:color .25s;
}
.rec-back:hover{color:var(--cream);}

.rec-main{
  max-width:920px;margin:0 auto;width:100%;
  padding:clamp(2.5rem,6vw,5rem) clamp(1.4rem,5vw,3.5rem) 4rem;
}
.rec-head{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4rem);}
.rec-eyebrow{
  font-family:"Inter",sans-serif;font-weight:400;font-size:.72rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;
}
.rec-title{
  font-family:"Cinzel",serif;font-weight:500;
  font-size:clamp(1.9rem,5vw,3.1rem);letter-spacing:.02em;line-height:1.1;color:var(--cream);
}
.rec-sub{
  font-family:"Inter",sans-serif;font-weight:300;line-height:1.6;
  font-size:clamp(.92rem,1.6vw,1.02rem);color:rgba(252,246,235,.62);
  margin-top:1.2rem;max-width:54ch;
}

/* chart */
.rec-chart{margin:0 0 clamp(2rem,4vw,3rem);}
.rec-chart svg{
  width:100%;height:clamp(240px,36vw,400px);display:block;
}
/* axis labels + gridlines (styled here so they share the type system) */
.rec-axis{
  font-family:"Inter",sans-serif;font-weight:300;font-size:13px;
  letter-spacing:.04em;fill:rgba(252,246,235,.45);
}
.rec-grid{shape-rendering:crispEdges;}
.rec-chartcap{
  font-family:"Inter",sans-serif;font-weight:300;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(252,246,235,.42);
  margin-top:1rem;text-align:right;
}

/* stats */
.rec-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(252,246,235,.1);
  border:1px solid rgba(252,246,235,.1);
  margin:0 0 clamp(2.5rem,5vw,4rem);
}
.rec-stat{background:var(--navy);padding:clamp(1.1rem,2.4vw,1.6rem);}
.rec-stat dt{
  font-family:"Inter",sans-serif;font-weight:300;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(252,246,235,.5);margin-bottom:.6rem;
}
.rec-stat dd{
  font-family:"Cinzel",serif;font-weight:500;
  font-size:clamp(1.3rem,3vw,1.9rem);color:var(--cream);
}

/* log */
.rec-log{margin-bottom:clamp(2.5rem,5vw,4rem);}
.rec-logtitle{
  font-family:"Inter",sans-serif;font-weight:400;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem;
}
.rec-logitems{list-style:none;}
.rec-logitem{
  display:grid;grid-template-columns:140px 1fr;gap:1.5rem;
  padding:1.1rem 0;border-top:1px solid rgba(252,246,235,.1);
}
.rec-logitem:last-child{border-bottom:1px solid rgba(252,246,235,.1);}
.rec-logperiod{
  font-family:"Cinzel",serif;font-weight:400;font-size:.92rem;
  letter-spacing:.1em;color:var(--cream);
}
.rec-lognote{
  font-family:"Inter",sans-serif;font-weight:300;line-height:1.55;
  font-size:.92rem;color:rgba(252,246,235,.66);
}

.rec-updated{
  font-family:"Inter",sans-serif;font-weight:300;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(252,246,235,.38);
}
.rec-empty .rec-stats,
.rec-empty .rec-log{opacity:.35;}

.rec-foot{margin-top:auto;}

@media (max-width:680px){
  .rec-stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .rec-logitem{grid-template-columns:1fr;gap:.35rem;}
}