/* ===================================================================
   TOKENS — earthy, mossy, ink-wash
=================================================================== */
:root{
  --paper:       #f0e6cb;      /* Claude-ish cream */
  --paper-soft:  #ebe0c1;
  --paper-warm:  #e8dcb8;
  --card:        #f5ecd2;      /* lighter cream for boxes (index-card) */
  --card-edge:   #d9cba4;
  --ink:         #1a1510;
  --ink-soft:    #372c1f;
  --ink-mute:    #6a5a40;

  --umber:       #8a5a2c;
  --umber-deep:  #5c3a18;
  --moss:        #3b5a28;
  --moss-deep:   #203718;
  --leaf-1:      #22381a;
  --leaf-2:      #3b5a28;
  --leaf-3:      #5c8a3a;
  --leaf-4:      #8aa85c;
  --leaf-5:      #b3c680;

  --f-display:   "Special Elite", "Courier Prime", ui-monospace, monospace;
  --f-body:      "Lora", Georgia, ui-serif, serif;
  --f-type:      "Special Elite", "Courier Prime", ui-monospace, monospace;
  --f-mono:      "Courier Prime", ui-monospace, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ overflow-x: clip }
body{
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--leaf-4); color:var(--ink)}

/* ===================================================================
   BRICK WALL + VIGNETTE
   Wall lives on the sides, fades to paper in the center for readability
=================================================================== */
.wall{
  position: fixed; inset: 0;
  z-index: -4;
  background-color: var(--paper);
  background-repeat: repeat;
  background-size: 640px auto;
}
.wash{
  position: fixed; inset: 0; z-index: -2; pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(240,230,203,0.08) 0%,
      rgba(240,230,203,0.25) 8%,
      rgba(240,230,203,0.55) 18%,
      rgba(240,230,203,0.75) 30%,
      rgba(240,230,203,0.80) 50%,
      rgba(240,230,203,0.75) 70%,
      rgba(240,230,203,0.55) 82%,
      rgba(240,230,203,0.25) 92%,
      rgba(240,230,203,0.08) 100%
    ),
    linear-gradient(to bottom,
      rgba(26,21,16,0.06) 0%,
      rgba(26,21,16,0) 12%,
      rgba(26,21,16,0) 86%,
      rgba(26,21,16,0.10) 100%
    );
}
/* paper grain */
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .15  0 0 0 0 .12  0 0 0 0 .08  0 0 0 .12 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  opacity: .45;
  mix-blend-mode: multiply;
}

/* ===================================================================
   IVY RAILS — dense edge ivy, generated by JS
=================================================================== */
.rail{
  position: fixed; top:0; bottom:0;
  width: 180px;
  pointer-events:none;
  z-index: 1;
  overflow: visible;
  display: none;
}
.rail.left{ left:0 }
.rail.right{ right:0; transform: scaleX(-1) }
.rail svg{ width:100%; height:100%; overflow: visible }
@media(min-width: 820px){ .rail{ display:block } }
@media(min-width: 1200px){ .rail{ width: 220px } }
@media(min-width: 1500px){ .rail{ width: 260px } }

/* mobile: ivy drape across the top. Rails can't fit below 820px without
   eating the reading column, so the drape carries the ivy signature. */
.mobile-drape{
  position: fixed; top: 0; left: 0; right: 0;
  height: 140px;
  pointer-events:none;
  z-index: 1;
  display: block;
  /* Soft fade on the bottom edge so the vines melt into the page instead
     of ending at a hard horizontal line. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
@media(min-width: 820px){ .mobile-drape{ display:none } }
.mobile-drape svg{ width: 100%; height: 100%; overflow: visible }

/* ===================================================================
   LAYOUT STAGE — narrow column of "paper" punching through the brick
=================================================================== */
.stage{
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 180px;
  z-index: 2;
}
@media(min-width: 900px){ .stage{ max-width: 880px; padding: 0 40px 220px } }

/* ===================================================================
   NAV
=================================================================== */
.topbar{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: rgba(240,230,203,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1.5px dashed rgba(26,21,16,.28);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-type);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration:none;
  white-space: nowrap;
}
.brand::before{
  content:"";
  width: 22px; height:22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22 C 6 16, 4 10, 8 4 C 10 8, 14 8, 16 4 C 20 10, 18 16, 12 22 Z' fill='%23223818'/><path d='M12 22 L 12 10' stroke='%231a1510' stroke-width='1.3' fill='none'/></svg>");
  background-size:contain; background-repeat:no-repeat;
}
.nav{
  display:flex; gap: 2px;
  font-family: var(--f-type);
  font-size: 13px;
  letter-spacing: .02em;
}
.nav a{
  padding: 6px 10px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .2s;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.nav a:hover{ color: var(--moss) }
.nav a.cta{
  color: var(--paper);
  background: var(--ink);
  padding: 7px 14px;
  white-space: nowrap;
  letter-spacing: .08em;
}
.nav a.cta:hover{ background: var(--moss-deep); color: var(--paper) }
@media (max-width: 640px){
  .nav a:not(.cta){ display:none }
}

/* ===================================================================
   CONNECTOR VINES — thin SVG lines between sections
=================================================================== */
.connector{
  height: 160px;
  margin: -40px auto -40px;
  max-width: 760px;
  position: relative;
  pointer-events:none;
  z-index: 0;
}
.connector svg{ width:100%; height:100%; overflow: visible }

/* ===================================================================
   FOOTER — with socials
=================================================================== */
footer.foot{
  margin-top: 100px;
  padding-top: 40px;
  text-align: center;
  border-top: 1px dashed rgba(26,21,16,.3);
}
footer.foot .a{
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--ink-soft);
  display: inline-block;
  letter-spacing: .02em;
}
footer.foot .socials{
  display: inline-flex;
  gap: 16px;
  margin-top: 14px;
  justify-content: center;
}
footer.foot .socials a{
  opacity: .45;
  transition: opacity .2s, transform .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: var(--ink-soft);
}
footer.foot .socials a:hover{ opacity: 1; transform: translateY(-1px) }
footer.foot .socials svg{ width: 18px; height: 18px; display:block }
footer.foot .b{
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: .2em;
  margin-top: 14px;
}
footer.foot .b a{ color: inherit; text-decoration: none }
footer.foot .b a:hover{ color: var(--ink-soft) }

.reveal{ opacity: 1 }