:root{
  --ink:#342a21;
  --muted:#77684e;
  --paper:#e7d7b9;
  --paper2:#ddcaa8;
  --moss:#4d5d45;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  background:#2d4337;
}

.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--paper);padding:.7rem 1rem}

.side-card{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:28rem;
  padding:3rem 3.25rem 2.5rem;
  text-align:center;
  z-index:3;
  background:
    radial-gradient(circle at 50% 7%, rgba(232,218,178,.16), transparent 14rem),
    linear-gradient(180deg, rgba(30,47,38,.96), rgba(37,54,45,.94));
  border-right:1px solid rgba(232,218,178,.14);
  box-shadow:12px 0 42px rgba(16,25,20,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.15rem;
}
.mini-moon{position:absolute;left:2rem;top:2rem;font-size:2.1rem;color:rgba(228,204,138,.45)}
.side-frog{width:min(14rem,68%);margin-top:.5rem;filter:sepia(.12) saturate(.86) drop-shadow(0 8px 15px rgba(38,28,18,.18))}
.side-card h1{font-size:4.45rem;line-height:.9;margin:.1rem 0 0;letter-spacing:.03em;color:#f2e8ca}
.tagline{max-width:20rem;font-size:1.18rem;line-height:1.65;margin:0;color:#d9cfad}
.cta-stack{width:100%;display:grid;gap:1rem;margin-top:.8rem}
.btn{display:block;padding:1.12rem 1.2rem;border-radius:12px;text-decoration:none;font-weight:700;letter-spacing:.05em;text-transform:lowercase;box-shadow:0 10px 20px rgba(42,31,20,.22);font-size:1.06rem;position:relative;z-index:3}
.btn.primary{background:#5c6e50;color:#fff0c9;border:2px solid #1f2f27}
.btn.secondary{background:#d9caa8;color:#25352d;border:2px dashed rgba(68,76,49,.52)}
.tiny-links{display:flex;gap:1.7rem;margin-top:.7rem}
.tiny-links a{color:#e7dcb8;text-decoration:none;border-bottom:1px dotted rgba(231,220,184,.45)}
.footer-note{margin-top:auto;margin-bottom:.4rem;color:#d7cca7;font-style:italic;font-size:.95rem;letter-spacing:.04em}

.toc{
  position:fixed;
  left:29.4rem;
  top:2rem;
  width:13rem;
  z-index:4;
  padding:1rem;
  background:rgba(225,211,181,.92);
  backdrop-filter:blur(7px);
  border:1px solid rgba(52,39,26,.22);
  box-shadow:0 14px 30px rgba(14,22,18,.28);
  border-radius:14px;
}
.toc-title{font-style:italic;font-size:1.3rem;margin:0 0 .7rem}
.toc a{display:flex;gap:.6rem;align-items:center;color:var(--ink);text-decoration:none;padding:.68rem .55rem;border-radius:10px;font-size:.95rem}
.toc a:hover{background:rgba(82,88,57,.15)}
.toc span{color:#7c704e;min-width:1.6rem}

.desk{
  position:relative;
  z-index:1;
  margin-left:44rem;
  padding:2.25rem 3.75rem 4.5rem;
  max-width:92rem;
}
.hero-card{
  margin:0 0 2.6rem;
  overflow:hidden;
  border-radius:3px;
  box-shadow:0 24px 48px rgba(11,18,14,.42);
}
.hero-card img{width:100%;display:block}

.paper{
  position:relative;
  margin:0 0 2.6rem;
  padding:2.4rem 2.7rem;
  background:linear-gradient(rgba(94,61,25,.07), rgba(94,61,25,.07)),var(--paper);
  box-shadow:0 24px 48px rgba(11,18,14,.42), inset 0 0 46px rgba(102,72,33,.13);
  clip-path:polygon(0.5% 4%,4% 2%,10% 3.5%,18% 1.5%,25% 3%,33% 2%,44% 3.2%,58% 1.7%,68% 3%,79% 1.5%,89% 3%,99% 2%,98.5% 96%,91% 97.5%,82% 96%,72% 98%,63% 96.8%,52% 98.4%,42% 97%,30% 98.5%,20% 97%,9% 98.2%,1% 96%);
}
.paper:before{
  content:"";
  position:absolute;
  right:7rem;
  top:1rem;
  width:6rem;
  height:1.8rem;
  background:rgba(143,121,79,.34);
  transform:rotate(-4deg);
  box-shadow:0 2px 5px rgba(45,34,22,.12);
}
.paper h2{margin:.15rem 0 1rem;color:#30271f;line-height:1.08;font-size:clamp(1.8rem,3vw,2.8rem)}
.paper p{line-height:1.65;font-size:1.06rem}
.eyebrow{margin:0;color:var(--muted);letter-spacing:.14em;text-transform:lowercase}
.wide{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.scrap-list{background:var(--paper2);padding:1.5rem 1.7rem;box-shadow:0 12px 20px rgba(45,34,22,.16);transform:rotate(.7deg);border:1px solid rgba(63,47,28,.08)}
.scrap-list ul{margin:.6rem 0 0;padding-left:1.25rem;line-height:1.95}
.section-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:1.5rem;gap:1rem}
.back-link{color:#303822;background:#d8d7bb;text-decoration:none;padding:.78rem 1rem;border-radius:999px;border:1px solid rgba(68,76,49,.28);font-size:.9rem;white-space:nowrap;box-shadow:0 6px 12px rgba(45,34,22,.10)}
.commands-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.note-card{background:#eadbbf;min-height:12rem;padding:1.5rem;text-align:center;box-shadow:0 13px 20px rgba(45,34,22,.15)}
.note-card:nth-child(2){transform:rotate(.7deg)}
.note-card:nth-child(4){transform:rotate(-.7deg)}
.note-card h3{font-size:1.25rem;margin:.2rem 0 .8rem}
.embed-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 3.4rem;padding:.7rem .2rem .2rem}
.embed-card{position:relative;margin:0;padding:1.05rem 1.05rem 1.45rem;background:#d9c6a3;box-shadow:0 18px 26px rgba(45,34,22,.28);border:1px solid rgba(63,47,28,.10);transform:rotate(-.45deg)}
.embed-card:nth-child(even){transform:rotate(.65deg)}
.embed-card:before,.embed-card:after{content:"";position:absolute;top:-.5rem;width:5.4rem;height:1.45rem;background:rgba(134,111,72,.46);box-shadow:0 2px 4px rgba(45,34,22,.14)}
.embed-card:before{left:1rem;transform:rotate(-10deg)}
.embed-card:after{right:1rem;transform:rotate(9deg)}
.embed-card img{width:100%;display:block;border-radius:6px;box-shadow:0 8px 14px rgba(0,0,0,.26);filter:brightness(.9) sepia(.04) saturate(.92)}
.embed-card figcaption{margin-top:.85rem;text-align:center;font-style:italic;color:#36452f;font-size:1.05rem}
.roadmap-sheet{display:grid;grid-template-columns:.42fr 1fr;gap:2rem;align-items:center}
.roadmap{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.roadmap li{background:#dfcfaf;padding:1rem;border-left:3px solid var(--moss);box-shadow:0 8px 13px rgba(45,34,22,.12)}
.roadmap li:before{content:"☐ ";color:var(--moss)}

@media(max-width:1180px){
  .side-card{position:relative;width:auto;min-height:auto}
  .toc{position:sticky;top:0;left:0;width:auto;margin:0;display:flex;overflow:auto;border-radius:0}
  .toc-title{display:none}
  .toc a{white-space:nowrap}
  .desk{margin-left:0;padding:1rem}
}
@media(max-width:900px){
  .wide,.roadmap-sheet{grid-template-columns:1fr}
  .commands-grid,.embed-gallery{grid-template-columns:1fr}
  .paper{padding:1.7rem 1.3rem}
}


body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;
    background:
      linear-gradient(rgba(46,33,22,.14),rgba(46,33,22,.14)),
      radial-gradient(circle at center,
        transparent 38%,
        rgba(0,0,0,.20) 100%);
    mix-blend-mode:multiply;
}

.note-card,.embed-card,.scrap-list,.tilt,.tilt-back{transform:none!important}.embed-card:nth-child(even),.note-card:nth-child(2),.note-card:nth-child(4){transform:none!important}.btn small{display:block;font-size:.68rem;opacity:.8}
/* final content edits */
.note-card,
.note-card:nth-child(2),
.note-card:nth-child(4),
.embed-card,
.embed-card:nth-child(even),
.scrap-list {
  transform: none !important;
}

.btn.tertiary,
.btn.contact {
  background:#eadfc7;
  color:#25352d;
  border:2px solid rgba(68,76,49,.45);
}

.coming-soon,
.btn .coming-soon {
  display:block;
  margin-top:.22rem;
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.08em;
  opacity:.78;
}

.about-wrap {
  width:min(1100px, calc(100% - 2rem));
  margin:0 auto;
  padding:2.4rem 0 5rem;
}

.about-page .about-hero {
  margin-bottom:2.4rem;
}

.about-paper {
  max-width:900px;
  margin-inline:auto;
}

.about-paper h1 {
  font-size:clamp(2.2rem, 5vw, 4rem);
  line-height:1.05;
  margin:.25rem 0 1.5rem;
}

.about-paper p {
  font-size:1.1rem;
  line-height:1.85;
  margin:0 0 1.25rem;
}

.about-status {
  background:#ddcaa8;
  padding:1.2rem 1.4rem;
  border-left:4px solid #4d5d45;
  box-shadow:0 10px 18px rgba(45,34,22,.13);
}

.about-return {
  width:max-content;
  margin-top:1rem;
}


.discord-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.1rem;
  margin-right:.55rem;
  opacity:.75;
  font-size:1rem;
}

.btn.contact{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.15rem;
}

.btn.contact{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:.2rem;
}

.btn.contact{display:flex;align-items:center;justify-content:center;}

/* projects page — intentionally reuses the main site's existing layout */
.projects-intro h2{margin-top:.15rem}
.project-sheet .section-header{margin-bottom:1rem}
.project-sheet .project-banner{margin:0 0 1.8rem;padding:1rem 1rem 1.25rem}
.project-sheet .project-banner img{width:100%;height:auto;object-fit:contain;background:rgba(45,67,55,.08)}
.project-sheet .project-lede{font-size:1.25rem;line-height:1.55;margin:.2rem 0 .8rem}
.project-links{display:grid;gap:.8rem;margin-top:1.4rem}
.project-links .btn{width:100%;text-align:left}
.text-link{color:#342a21;font-weight:700;text-underline-offset:.2rem}
.project-sheet .about-status{margin-top:1.35rem}
@media(max-width:1180px){.projects-desk{padding-top:1.4rem}}