/* ---------------------------------------------------------------
   Acre — acreagency.ai
   Shared stylesheet. Every colour and every font lives in here.
   --------------------------------------------------------------- */

:root{
  --forest:#1B4332; --mid:#2D6A4F; --leaf:#40916C;
  --pale:#B7E4C7; --mist:#DCF0E3;
  --ink:#16261E; --grey:#5F6F66; --paper:#FBFAF7; --line:#E3E7E3;
  --white:#FFFFFF;

  --serif:Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;

  /* cap height of the serif stack, in em. Measured off the resolved
     Palatino stack with canvas TextMetrics: flat-topped H/R/E land on
     .694 (round C overshoots to .708). Drives the lockup geometry. */
  --cap:.694;

  /* How tall the mark stands relative to the cap height of the letters.
     1 is the strict cap-height lockup. Above 1 the beam feet stay on the
     baseline and the apex rises above the cap line, so the A reads as the
     dominant element instead of the letters. Tune here, one place. */
  --mark-scale:1.4;
}

*{box-sizing:border-box;}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif);
  font-size:18px; line-height:1.62;
}

/* ---- shared type ------------------------------------------------ */

h2{
  font-size:15px; letter-spacing:3px; text-transform:uppercase;
  color:var(--leaf); margin:56px 0 6px; font-weight:normal;
}
h3{font-size:26px; color:var(--forest); margin:0 0 14px; font-weight:normal;}
p{margin:0 0 18px;}
.lede{font-size:21px; color:var(--ink);}
a{color:var(--mid);}

ol{padding-left:22px; margin:0 0 18px;}
ol li{margin-bottom:20px;}
ol li b{color:var(--forest); font-weight:normal; font-size:20px;}
ul{padding-left:22px; margin:0 0 18px;}
ul li{margin-bottom:10px;}

pre{
  background:var(--mist); border-radius:6px; padding:24px 26px;
  font-family:var(--mono); font-size:14.5px;
  line-height:1.75; white-space:pre-wrap; overflow-wrap:break-word;
  margin:0 0 14px; color:var(--ink);
}

.rule{height:1px; background:var(--line); margin:52px 0;}

.callout{
  border-left:3px solid var(--leaf); padding:2px 0 2px 22px;
  margin:0 0 22px; color:var(--ink);
}

/* ---- content column --------------------------------------------- */

.wrap{max-width:760px; margin:0 auto; padding:0 24px 120px;}
.head-in,.inner{max-width:760px; margin:0 auto; padding:0 24px;}

/* ---- the lockup -------------------------------------------------
   The mark is the A in "Acre". It is never decorative and never
   separated from the letters beside it.

   Geometry comes straight out of the mark's viewBox (0 30 162 74):
   the beams run y=34 to y=100, so the drawn extent is 66/74 of the
   box height and the mark's baseline sits at 70/74 = 94.6% of it.
   Sizing off --cap makes the beams span exactly cap height to
   baseline of the letters, at any wordmark size.
   ------------------------------------------------------------------ */

.logo{display:flex; align-items:baseline; font-size:34px;}
.logo svg{
  display:block; flex:none;
  height:calc(var(--cap) * var(--mark-scale) * 1.121212em);  /* cap * 74/66 */
  width:calc(var(--cap) * var(--mark-scale) * 2.454545em);   /* cap * 162/66 */
  /* baseline alignment lands the svg's border-box bottom on the text
     baseline, so nudge it down by the mark's own 5.4% shelf to put the
     beam feet, not the box, on the baseline. (A negative margin-bottom
     does not move it: Chrome takes the border edge as the baseline.) */
  position:relative;
  top:calc(var(--cap) * var(--mark-scale) * .060606em);
  /* eat the 6 units of empty viewBox to the right of the last beam,
     so the A's leg lands flush against the C */
  margin-right:calc(var(--cap) * var(--mark-scale) * -.090909em);
}
.logo span{
  color:var(--white); font-size:1em; line-height:1;
  letter-spacing:.147em;                  /* 5px at 34px */
  text-transform:uppercase;
}

/* light ground: the two A legs are the darkest elements */
.logo .beam-1{fill:var(--m1,#DCF0E3);}
.logo .beam-2{fill:var(--m2,#B7E4C7);}
.logo .beam-3{fill:var(--m3,#9AD2B2);}
.logo .beam-4{fill:var(--m4,#7FC29D);}
.logo .leg   {fill:var(--m5,#1B4332);}

/* forest ground: the ramp inverts so the A is the brightest element */
.logo.on-dark{
  --m1:#2F5B47; --m2:#4A8768; --m3:#6BC194; --m4:#8FD3AC; --m5:#DCF0E3;
}

.logo-sm{font-size:22px;}

/* ---- entry animation -------------------------------------------
   Every beam shares the apex at user point (128,34). With
   transform-box:view-box the origin is the viewBox corner (0,30),
   so the apex is 128px across and 4px down from it. Rotating each
   beam about that point sweeps its foot along an arc.

   All six start collapsed straight down, then open outward: the two
   legs first, forming the A, then the four beams fan past them.
   Every one lands on rotate(0), so the resting geometry is exactly
   the measured lockup.
   ---------------------------------------------------------------- */

.intro svg path{
  transform-box:view-box;
  /* the apex, in the viewBox's own user coordinates. Chrome resolves
     these lengths against the user-space origin, not the viewBox
     corner, so this is (128,34) and not (128,4). Verified by rotating
     a beam and checking the apex does not move. */
  transform-origin:128px 34px;
}
.intro svg path{
  opacity:0;
  animation:fan-out 1.15s cubic-bezier(.22,1,.36,1) forwards;
}
/* Each beam carries a full turn on top of its own fan angle, so it
   sweeps once around the apex before settling. Every --from is
   positive and every beam lands on 0, so they all travel the same
   direction and read as one unwinding sweep rather than a scramble.
   360 - 18.43 for the right leg keeps it turning with the rest. */
.intro .leg-r{--from:341.57deg; animation-delay:.04s;}
.intro .leg-l{--from:378.43deg; animation-delay:.04s;}
.intro .beam-4{--from:394.88deg; animation-delay:.13s;}
.intro .beam-3{--from:406.68deg; animation-delay:.20s;}
.intro .beam-2{--from:414.93deg; animation-delay:.27s;}
.intro .beam-1{--from:420.78deg; animation-delay:.34s;}

@keyframes fan-out{
  0%  {opacity:0; transform:rotate(var(--from));}
  18% {opacity:1;}
  100%{opacity:1; transform:rotate(0deg);}
}

.intro span{
  opacity:0;
  animation:settle .7s cubic-bezier(.22,1,.36,1) .72s forwards;
}

@keyframes settle{ from{opacity:0;} to{opacity:1;} }

.rise{
  opacity:0;
  animation:rise .8s cubic-bezier(.22,1,.36,1) forwards;
}
.rise-1{animation-delay:1.02s;}
.rise-2{animation-delay:1.16s;}
.rise-3{animation-delay:1.30s;}

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

@media (prefers-reduced-motion:reduce){
  .intro svg path,.intro span,.rise{
    animation:none; opacity:1; transform:none;
  }
}

/* =================================================================
   /buildathon  — the playbook
   ================================================================= */

.playbook header{background:var(--forest); padding:52px 0 46px; margin-bottom:56px;}
.playbook header h1{
  color:var(--white); font-size:34px; font-weight:normal;
  margin:34px 0 8px; line-height:1.22;
}
.playbook header p{color:var(--pale); margin:0; font-size:16px; letter-spacing:2px;}

.times{width:100%; border-collapse:collapse; margin:0 0 18px;}
.times td{padding:12px 0; border-bottom:1px solid var(--line); vertical-align:top;}
.times td:first-child{width:120px; color:var(--leaf); font-size:19px;}

.playbook footer{
  margin-top:70px; padding-top:26px; border-top:1px solid var(--line);
  color:var(--grey); font-size:15px; letter-spacing:2px;
}
.playbook footer a{color:var(--grey); text-decoration:none;}
.playbook footer a:hover{color:var(--leaf);}

/* =================================================================
   /  — landing. One screen, forest throughout.
   ================================================================= */

.home{
  background:var(--forest); min-height:100svh;
  display:flex; flex-direction:column;
}

.stage{flex:1; display:flex; align-items:center; padding:72px 0 56px;}
.stage .inner{text-align:center;}
.stage .logo{justify-content:center; font-size:clamp(48px,16vw,112px);}
/* The lockup's content runs 4.07x the wordmark size, and that ratio holds
   within 1.2% across Palatino, Georgia, Times and Noto Serif, so the
   fallback stack cannot overflow. At 375px this is 56px -> 229px of
   content against 327px available. */

.line{
  color:var(--white); font-size:29px; line-height:1.38;
  max-width:22em; margin:46px auto 0;
}
.line-2{
  color:var(--pale); font-size:21px; line-height:1.58;
  max-width:33em; margin:20px auto 0;
}

.acts{margin:52px 0 0;}
.act{
  display:inline-block; padding:15px 30px;
  border:1px solid var(--leaf); border-radius:4px;
  color:var(--pale); font-size:20px; text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.act:hover,.act:focus-visible{
  background:var(--mid); border-color:var(--mid); color:var(--white);
}
.act-2{
  display:block; margin:22px 0 0;
  color:var(--pale); font-size:19px; text-decoration:none;
  border-bottom:1px solid transparent; width:fit-content; margin-inline:auto;
}
.act-2:hover,.act-2:focus-visible{border-bottom-color:var(--leaf);}

.home footer{padding:0 0 40px;}
.foot-in{display:flex; align-items:baseline; justify-content:space-between; gap:24px;}
.foot-in p{margin:0; color:var(--leaf); font-size:16px; letter-spacing:2px;}

/* =================================================================
   single breakpoint
   ================================================================= */

@media (max-width:640px){
  .playbook header h1{font-size:25.5px;}

  .logo-sm{font-size:20px;}

  .stage{padding:56px 0 40px;}
  .line{font-size:23px; margin-top:34px;}
  .line-2{font-size:18px; margin-top:15px;}
  .acts{margin-top:34px;}

  /* keep the code blocks wide enough to read at 375px */
  pre{padding:18px 16px; font-size:14px;}
  .times td:first-child{width:82px;}
  /* 16px overshoots 375px by 8px and orphans "THON" onto its own line */
  .playbook header p{font-size:15px;}

  .foot-in{display:block; text-align:center;}
  .foot-in p{font-size:13px; letter-spacing:1.5px;}
  .foot-in .logo{justify-content:center;}
  .foot-in p{margin-top:18px;}
}