/* ==========================================================================
   GrowLedger — holding page
   1. Tokens
   2. Base
   3. Masthead
   4. Hero
   5. Revision register
   6. Footer
   7. Toast
   8. Motion
   9. Responsive
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root{
  --field:#143024;
  --field-deep:#0E241A;
  --paper:#ECE6D8;
  --paper-70:rgba(236,230,216,.70);
  --paper-45:rgba(236,230,216,.45);
  --rule:rgba(236,230,216,.14);
  --rule-soft:rgba(236,230,216,.07);
  --brass:#C8A24A;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(20px,5vw,72px);
  --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* 2. Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--field);
  /* ledger paper, inverted: ruled lines over a green field */
  background-image:
    linear-gradient(to bottom,var(--rule-soft) 1px,transparent 1px),
    radial-gradient(120% 80% at 82% 0%,rgba(200,162,74,.10),transparent 60%),
    linear-gradient(to bottom,var(--field) 0%,var(--field-deep) 100%);
  background-size:100% 34px,100% 100%,100% 100%;
  background-attachment:scroll,fixed,fixed;
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gut);
}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

/* 3. Masthead ------------------------------------------------------------ */
.masthead{
  padding-top:28px;
  padding-bottom:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--rule);
}

.wordmark{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--paper);
}
/* Logo lockup. Height is the control; width follows the aspect ratio. */
.wordmark-img{
  display:block;
  height:clamp(19px,2.4vw,24px);
  width:auto;
  transition:opacity .2s var(--ease);
}
.wordmark:hover .wordmark-img{opacity:.78}
.wordmark span{
  padding-left:14px;
  border-left:1px solid var(--rule);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--paper-45);
  white-space:nowrap;
}
/* Text fallback if the logo file is ever missing */
.wordmark b{
  font-family:var(--serif);
  font-weight:400;
  font-size:22px;
  letter-spacing:.01em;
}

.status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 14px 7px 12px;
  border:1px solid var(--rule);
  border-radius:999px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--paper-70);
}
.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--brass);
  animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(200,162,74,.5)}
  70%{box-shadow:0 0 0 7px rgba(200,162,74,0)}
  100%{box-shadow:0 0 0 0 rgba(200,162,74,0)}
}

/* 4. Hero ---------------------------------------------------------------- */
main{
  flex:1 0 auto;
  display:flex;
  align-items:center;
  padding-top:clamp(48px,7vw,88px);
  padding-bottom:clamp(56px,7vw,88px);
}
main > .grid{width:100%}

.grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(40px,6vw,80px);
  align-items:start;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 26px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--brass);
}
.eyebrow::after{
  content:"";
  flex:1;
  max-width:120px;
  height:1px;
  background:var(--rule);
}

h1{
  margin:0 0 28px;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(34px,4.6vw,62px);
  line-height:1.08;
  letter-spacing:-.015em;
}
h1 em{font-style:italic}
h1 .break{display:block}

.lede{
  margin:0 0 18px;
  max-width:46ch;
  font-size:clamp(16px,1.35vw,18px);
  line-height:1.68;
  color:var(--paper-70);
}
.lede strong{color:var(--paper);font-weight:500}

.note{
  margin:0 0 38px;
  max-width:44ch;
  font-size:15px;
  color:var(--paper-45);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 26px;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:15px 24px;
  border:1px solid var(--paper);
  background:var(--paper);
  color:var(--field-deep);
  font-family:var(--sans);
  font-weight:500;
  font-size:14.5px;
  text-decoration:none;
  transition:background .22s var(--ease),color .22s var(--ease);
}
.cta .arrow{transition:transform .22s var(--ease)}
.cta:hover{background:transparent;color:var(--paper)}
.cta:hover .arrow{transform:translateX(4px)}

.direct{
  padding:0 0 3px;
  border:0;
  border-bottom:1px solid var(--rule);
  background:none;
  color:var(--paper-70);
  font-family:var(--mono);
  font-size:13px;
  cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.direct:hover{color:var(--paper);border-color:var(--brass)}

/* 5. Revision register --------------------------------------------------- */
.register{
  border:1px solid var(--rule);
  background:rgba(236,230,216,.035);
}

.register-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-45);
}
.register-head b{color:var(--paper);font-weight:500;letter-spacing:.14em}

.cols,
.row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 96px;
  gap:16px;
}

.cols{
  padding:11px 20px;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-45);
}

.row{
  align-items:baseline;
  padding:18px 20px;
  border-bottom:1px solid var(--rule-soft);
}
.row:last-of-type{border-bottom:0}
.row .ref{
  font-family:var(--mono);
  font-size:12px;
  color:var(--paper-45);
}
.row .obs{
  font-size:14.5px;
  line-height:1.5;
  color:var(--paper);
}
.row .obs small{
  display:block;
  margin-top:5px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--paper-45);
}

.pos{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-45);
  white-space:nowrap;
}
.pos.live{color:var(--brass)}
.pos.done{color:var(--paper-70)}
.pos.done::before{content:"\2713\00a0"}

.register-foot{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper-45);
}

/* 6. Footer -------------------------------------------------------------- */
footer{
  border-top:1px solid var(--rule);
  padding-top:22px;
  padding-bottom:30px;
}
.foot-in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 28px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper-45);
}
.foot-in em{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
  color:var(--paper-70);
}

/* 7. Toast --------------------------------------------------------------- */
.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%,14px);
  padding:11px 18px;
  border:1px solid var(--rule);
  background:var(--field-deep);
  color:var(--paper);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  z-index:20;
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* 8. Motion -------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(14px)}
.js-ready [data-reveal]{
  animation:rise .8s var(--ease) forwards;
  animation-delay:calc(var(--delay,0) * 110ms);
}
.no-js [data-reveal]{opacity:1;transform:none}
@keyframes rise{to{opacity:1;transform:none}}

/* 9. Responsive ---------------------------------------------------------- */
@media (max-width:900px){
  .grid{grid-template-columns:1fr;gap:52px}
  h1 .break{display:inline}
}

@media (max-width:560px){
  .wordmark span{display:none}
  .wordmark-img{height:17px}      /* logo shouldn't own the whole top edge */
  .masthead{gap:14px}   /* logo carries the tagline; drop the echo */
  .cols,.row{grid-template-columns:52px minmax(0,1fr)}
  .cols span:last-child{display:none}
  .row .pos{grid-column:2;margin-top:8px}
  .cta{width:100%;justify-content:space-between}
  body{background-attachment:scroll}
}

@media (prefers-reduced-motion:reduce){
  [data-reveal],
  .js-ready [data-reveal]{opacity:1;transform:none;animation:none}
  .dot{animation:none}
  *{transition-duration:.01ms !important}
}