:root{
  --forest:#354d3f;
  --sage:#acb193;
  --rose:#cf988a;
  --stone:#cbc3b8;
  --white:#f4efe9;

  --line: rgba(203,195,184,.18);
  --line2: rgba(203,195,184,.12);

  --r:18px;
  --r2:26px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--forest);
  color:var(--stone);
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}

/* Skip */
.skip{position:absolute;left:-999px;top:10px;background:var(--white);color:#111;padding:10px 12px;border-radius:12px}
.skip:focus{left:10px;z-index:9999}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(53,77,63,.92), rgba(53,77,63,.70));
  border-bottom:1px solid var(--line2);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand__title{font-weight:900;letter-spacing:.02em;color:var(--white)}
.brand__sub{font-weight:700;color:rgba(203,195,184,.92);font-size:.9rem}
.tools{display:none;gap:10px;align-items:center}

.chip{
  border-radius:999px;padding:10px 12px;
  border:1px solid rgba(203,195,184,.22);
  background:rgba(0,0,0,.14);
  color:rgba(244,239,233,.92);
  font-weight:900;cursor:pointer;
}
.chip--accent{background:rgba(207,152,138,.18);border:1px solid rgba(207,152,138,.42)}
.chip:active{transform:translateY(1px)}

.burger{
  width:44px;height:40px;border-radius:12px;
  border:1px solid rgba(203,195,184,.22);
  background:rgba(0,0,0,.16);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 12px;
}
.burger span{display:block;height:2px;background:rgba(203,195,184,.88);border-radius:2px}

.mobilebar{
  display:none;
  border-top:1px solid var(--line2);
  padding:10px 16px 16px;
  background:rgba(53,77,63,.92);
  gap:10px;
}
.mobilebar.open{display:grid}

/* Progress */
.progress{height:3px;background:rgba(0,0,0,.10)}
.progress__bar{height:3px;width:0;background:rgba(207,152,138,.88);transition:width .12s linear}

/* HERO like image */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line2);
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;
  background-image: url("assets/hero-feed.png");
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
}
.hero__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 700px at 15% 20%, rgba(207,152,138,.20), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(244,239,233,.20), transparent 62%),
    linear-gradient(to bottom, rgba(53,77,63,.55), rgba(53,77,63,.78));
  mix-blend-mode: normal;
}
.hero__inner{
  position:relative;
  padding:56px 0;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
}
.hero__stack{max-width:720px}

.hero__kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(203,195,184,.25);
  background:rgba(0,0,0,.18);
  color:rgba(244,239,233,.92);
  font-weight:800;
  font-size:.92rem;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 6px rgba(207,152,138,.18)}

.hero__h1{
  margin:16px 0 6px;
  font-family:"DM Serif Display", serif;
  font-weight:400;
  letter-spacing:.01em;
  font-size:2.6rem;
  line-height:1.02;
  color:var(--white);
  text-shadow:0 18px 45px rgba(0,0,0,.28);
}
.hero__accent{color:var(--rose)}
.hero__script{
  font-family:Allura, "DM Serif Display", serif;
  font-size:2.1rem;
  color:rgba(244,239,233,.92);
  margin:0 0 16px;
  letter-spacing:.01em;
}

/* Paper label */
.paperTag{
  display:flex;align-items:flex-start;gap:12px;
  width:min(520px, 100%);
  padding:16px 16px;
  border-radius:18px;
  background:
    radial-gradient(420px 220px at 20% 10%, rgba(244,239,233,.70), rgba(244,239,233,.58)),
    linear-gradient(180deg, rgba(244,239,233,.70), rgba(244,239,233,.58));
  color:#1f2c25;
  border:1px solid rgba(53,77,63,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
  position:relative;
}
.paperTag::before{
  content:"";
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0, rgba(0,0,0,.02) 1px, transparent 1px, transparent 6px);
  opacity:.35;
  border-radius:18px;
  pointer-events:none;
}
.paperTag__heart{
  width:34px;height:34px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(207,152,138,.18);
  border:1px solid rgba(207,152,138,.30);
}
.paperTag__text{
  font-family:"DM Serif Display", serif;
  font-size:1.18rem;
  line-height:1.25;
}
.paperTag--center{margin:18px auto 0}

/* CTA */
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 12px}
.btn{
  border-radius:999px;
  padding:12px 16px;
  border:1px solid rgba(203,195,184,.22);
  background:rgba(0,0,0,.16);
  color:var(--white);
  text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(180deg, rgba(207,152,138,.30), rgba(203,195,184,.10));border:1px solid rgba(207,152,138,.44)}
.btn--ghost{background:rgba(0,0,0,.10);border:1px solid rgba(203,195,184,.18);color:rgba(244,239,233,.92)}
.btn--accent{background:rgba(207,152,138,.18);border:1px solid rgba(207,152,138,.44)}
.btn--wide{width:100%}

.hero__micro{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.micro{
  padding:12px;border-radius:16px;
  border:1px solid rgba(203,195,184,.18);
  background:rgba(0,0,0,.16);
}
.micro b{display:block;color:var(--white)}
.micro span{color:rgba(203,195,184,.92);font-size:.9rem}

/* Right card */
.hero__card{display:grid;gap:12px}
.glassCard{
  border-radius:var(--r2);
  border:1px solid rgba(203,195,184,.20);
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.25);
}
.glassCard__top{
  padding:16px;
  background:
    radial-gradient(700px 320px at 20% 0%, rgba(207,152,138,.14), transparent 62%),
    rgba(0,0,0,.18);
  border-bottom:1px solid rgba(203,195,184,.16);
}
.badge{
  display:inline-flex;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(207,152,138,.38);
  background:rgba(207,152,138,.14);
  color:var(--white);
  font-weight:900;
  font-size:.9rem;
}
.glassCard__title{margin:10px 0 6px;font-weight:900;color:var(--white)}
.glassCard__sub{color:rgba(203,195,184,.92);font-size:.96rem}
.glassCard__body{padding:14px 16px 16px}
.bullets{margin:0;padding-left:18px;color:rgba(203,195,184,.95)}
.bullets li{margin:8px 0}
.divider{height:1px;background:rgba(203,195,184,.18);margin:14px 0}

/* Signature */
.sig{padding-top:12px;border-top:1px solid rgba(203,195,184,.16)}
.sig__brand{font-weight:900;color:var(--white)}
.sig__tag{margin-top:4px;color:rgba(203,195,184,.92)}
.sig__links,.sig__mail{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sig a{color:rgba(244,239,233,.92);text-decoration:none;border-bottom:1px solid rgba(207,152,138,.55)}
.sig span{opacity:.65}

/* Pages */
.page{padding:48px 0}
.page--sage{
  background:
    radial-gradient(900px 620px at 12% 10%, rgba(53,77,63,.16), transparent 58%),
    radial-gradient(900px 620px at 90% 30%, rgba(207,152,138,.12), transparent 60%),
    var(--sage);
  color:#23332b;
}
.page--forest{
  background:
    radial-gradient(900px 620px at 16% 0%, rgba(172,177,147,.16), transparent 62%),
    radial-gradient(900px 620px at 85% 30%, rgba(207,152,138,.10), transparent 60%),
    var(--forest);
  color:var(--stone);
}

/* Chapter + tiles */
.chapter{max-width:840px;margin:0 auto 18px}
.chapter__kicker{
  display:inline-flex;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(53,77,63,.25);
  background:rgba(255,255,255,.22);
  color:#1f2c25;
  font-weight:900;
  font-size:.85rem;
  margin-bottom:10px;
}
.chapter h2{font-family:"DM Serif Display", serif;font-weight:400;margin:0 0 8px;font-size:1.85rem}
.chapter p{margin:0;opacity:.95}
.chapter--dark .chapter__kicker{border:1px solid rgba(203,195,184,.18);background:rgba(0,0,0,.12);color:rgba(244,239,233,.92)}
.chapter--dark h2{color:var(--white)}
.chapter--dark p{color:rgba(203,195,184,.92)}

.grid{display:grid;gap:12px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}

.tile{
  border-radius:var(--r);
  border:1px solid rgba(53,77,63,.25);
  background:rgba(255,255,255,.22);
  padding:16px;
}
.tile h3{margin:0 0 6px;font-size:1.08rem;color:#1f2c25}
.tile p{margin:0;line-height:1.6;color:#23332b}
.tile--dark{border:1px solid rgba(203,195,184,.18);background:rgba(0,0,0,.14)}
.tile--dark h3{color:var(--white)}
.tile--dark p{color:rgba(203,195,184,.92)}
.list{margin:0;padding-left:18px;line-height:1.6;color:#23332b}
.list li{margin:8px 0}

.callout{
  margin-top:14px;
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;border-radius:18px;
  border:1px solid rgba(53,77,63,.28);
  background:rgba(255,255,255,.22);
}
.callout__icon{
  width:38px;height:38px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(53,77,63,.18);
  border:1px solid rgba(53,77,63,.22);
}
.callout h4{margin:0 0 4px;color:#1f2c25}
.callout p{margin:0;color:#23332b}

.nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* Legal */
.legal{
  margin-top:22px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(203,195,184,.18);
  background:rgba(0,0,0,.14);
}
.legal h3{margin:0 0 6px;color:var(--white)}
.legal p{margin:0;line-height:1.6;color:rgba(203,195,184,.92)}
.legal a{color:rgba(244,239,233,.92);text-decoration:none;border-bottom:1px solid rgba(207,152,138,.55)}

/* Drawer */
.drawer{position:fixed;inset:0;display:none;z-index:100}
.drawer.open{display:block}
.drawer__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(6px)}
.drawer__panel{
  position:absolute;right:0;top:0;height:100%;width:min(420px, 92vw);
  background:linear-gradient(135deg,#354d3f 0%, #2b3f34 45%, #acb193 120%);
  color:var(--stone);
  border-left:1px solid rgba(203,195,184,.22);
  display:flex;flex-direction:column;
}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid rgba(203,195,184,.18);background:rgba(0,0,0,.10)}
.drawer__title{font-weight:900;color:var(--white)}
.drawer__sub{color:rgba(203,195,184,.92);font-size:.92rem;margin-top:2px}
.iconBtn{width:42px;height:42px;border-radius:14px;border:1px solid rgba(203,195,184,.22);background:rgba(0,0,0,.12);color:rgba(244,239,233,.92);cursor:pointer}
.drawer__body{padding:14px;overflow:auto}
.toc{
  display:block;padding:12px 12px;border-radius:14px;
  border:1px solid rgba(203,195,184,.20);
  background:rgba(0,0,0,.10);
  color:rgba(244,239,233,.92);
  text-decoration:none;
  font-weight:900;
  margin-bottom:10px;
}

.step{
  display:grid;grid-template-columns:38px 1fr;gap:10px;
  padding:12px;border-radius:16px;
  border:1px solid rgba(203,195,184,.18);
  background:rgba(0,0,0,.10);
  margin-bottom:10px;
}
.step__n{
  width:38px;height:38px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(207,152,138,.18);
  border:1px solid rgba(207,152,138,.35);
  color:rgba(244,239,233,.92);
  font-weight:900;
}
.step__t{color:rgba(203,195,184,.95);font-weight:800}

/* Responsive */
@media (min-width: 860px){
  .tools{display:flex}
  .burger{display:none}
  .mobilebar{display:none!important}

  .hero__inner{grid-template-columns:1.05fr .95fr;gap:22px}
  .hero__h1{font-size:3.3rem}

  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--2{grid-template-columns:repeat(2,1fr)}
}

/* Print */
@media print{
  .topbar,.drawer,.skip{display:none!important}
  body{background:#fff;color:#111}
  .hero{min-height:auto}
  .hero__bg,.hero__veil{display:none}
  .page{padding:24px 0}
  .page--forest,.page--sage{background:#fff;color:#111;border:0}
  .tile,.callout,.legal{background:#fff;border-color:#bbb}
  a{color:#111;text-decoration:none;border:none}
  .btn,.chip,.burger{display:none!important}
}