:root{
  /* Specs (locked) */
  --ink: #252525;
  --accent: #4e0000;
  --box: #e7ebe6;
  --scale: 1;
  --manifest-overlay: rgba(231, 235, 230, 0.3);

  /* Warm off-white (as in screenshot) */
  --paper: #f4f1ec;

  /* Fonts (locked) */
  --sans: var(--font-inter);
  --serif: var(--font-pt-serif);
  --quote: var(--font-quotation);

  /* Soft rules */
  --rule: rgba(17,17,17,.28);

  /* Fluid spacing: margins shrink first when viewport shrinks */
  --pad: calc(clamp(18px, 3.2vmin, 48px) * var(--scale));
  --gap: calc(clamp(8px, 1.6vmin, 18px) * var(--scale));
}

*{ box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-inter);
}

/* Page layout: centered column, lots of air (like screenshot) */
.manifest-page{
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: var(--pad);
  position: relative;
  isolation: isolate;
}

.manifest-page::before{
  content: "";
  position: fixed;
  inset: 0;
  background: var(--manifest-overlay);
  pointer-events: none;
  z-index: 0;
}

.manifest-shell{
  width: min(calc(920px * var(--scale)), 92vw);
  display: grid;
  justify-items: start;
  gap: var(--gap);
  align-content: center;
  min-height: calc(100vh - (var(--pad) * 2));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ===== Header + logo block ===== */
.manifest-head{
  width: 100%;
  display: grid;
  justify-items: start;
  gap: clamp(2px, 0.6vmin, 6px);
  padding-top: 0;
}

.manifest-kicker{
  font-family: var(--font-inter);
  font-size: calc(clamp(11px, 1.5vmin, 13px) * var(--scale));
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Logo container (no grey glass panel) */
.manifest-brand{
  position: relative;
  display: grid;
  place-items: start;
  width: calc(clamp(300px, 38vmin, 430px) * var(--scale));
  height: calc(clamp(120px, 17vmin, 175px) * var(--scale));
  text-decoration: none;
  color: var(--ink);
  background: transparent;
}

/* thin frame around logo (as in screenshot) */
.manifest-brand-frame{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Where VDLogo mounts its SVG */
.manifest-brand-mount{
  position: relative;
  margin-top: calc(-40px * var(--scale));
  width: 100%;
  height: 100%;
  display: grid;
  place-items: start;
  --logo-offset-x: calc(-60px * var(--scale));
  transform: translate(var(--logo-offset-x), calc(-6px * var(--scale)));
}




/* Hide fallback when VDLogo is mounted */
.manifest-brand[data-logo-mounted="true"] .manifest-brand-fallback{
  display: none;
}

/* If compact class is present, VDLogo will be in compact state (JS controls) */
.manifest-brand.is-logo-compact{
  /* keep stable; no visual panel */
}

/* ===== The green manifest box ===== */
.manifest-box{
  width: min(calc(720px * var(--scale)), 100%);
  background: var(--box);
  padding: calc(clamp(18px, 3.2vmin, 40px) * var(--scale));
  margin-top: calc(-30px * var(--scale));
  border-radius: calc(3px * var(--scale));
  border: calc(2px * var(--scale)) solid var(--ink);
  box-shadow:
    0 calc(14px * var(--scale)) calc(24px * var(--scale)) rgba(0, 0, 0, 0.18),
    0 calc(-10px * var(--scale)) calc(20px * var(--scale)) rgba(0, 0, 0, 0.12);
}

.manifest-box-inner{
  font-family: var(--font-inter);
  font-size: calc(clamp(15px, 1.9vmin, 19px) * var(--scale));
  line-height: calc(clamp(1.45, 1.25 + 0.6vmin, 1.7) * var(--scale));
}

.manifest-box-inner p{
  margin: 0 0 calc(clamp(6px, 1vmin, 10px) * var(--scale)) 0;
}

.manifest-box-inner .manifest-list{
  margin: 0 0 calc(clamp(6px, 1vmin, 10px) * var(--scale)) 0;
  padding-left: calc(clamp(18px, 2.2vmin, 26px) * var(--scale));
}

.manifest-box-inner .manifest-list li{
  margin: 0 0 calc(clamp(4px, 0.8vmin, 8px) * var(--scale)) 0;
}

.manifest-box-inner .manifest-list li:last-child{
  margin-bottom: 0;
}

.manifest-box-inner p strong{
  font-weight: 700;
}

/* CTA inside box */
.manifest-cta{
  display: inline-flex;
  gap: calc(8px * var(--scale));
  align-items: center;
  margin-top: calc(clamp(10px, 1.6vmin, 16px) * var(--scale));
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: calc(clamp(12px, 1.6vmin, 14px) * var(--scale));
  color: var(--accent);
  text-decoration: none;
}

/* ===== Quote section ===== */
.manifest-quote{
  width: min(calc(720px * var(--scale)), 100%);
  display: grid;
  justify-items: start;
  gap: calc(clamp(2px, 0.4vmin, 4px) * var(--scale));
  padding-top: calc(clamp(2px, 0.4vmin, 6px) * var(--scale));
}

.manifest-quote-mark{
  font-family: var(--font-quotation);
  color: var(--accent);
  font-size: calc(clamp(22px, 5.6vmin, 52px) * var(--scale));
  line-height: 0.8;
}

.manifest-quote-text{
  margin-top: calc(-20px * var(--scale));
  font-family: var(--font-pt-serif);
  font-weight: 400;          /* Horizon Regular */
  font-style: italic;        /* matches screenshot feel */
  font-size: calc(clamp(18px, 2.6vmin, 26px) * var(--scale));
  line-height: 1.25;
  color: var(--ink);
}

/* Signature under quote */
.manifest-signoff{
  margin-top: calc(clamp(6px, 1.2vmin, 10px) * var(--scale));
  display: grid;
  gap: 2px;
}

.manifest-signoff-name{
  font-family: var(--font-inter);
  font-size: calc(clamp(12px, 1.7vmin, 14px) * var(--scale));
  color: var(--ink);
}

.manifest-signoff-role{
  font-family: var(--font-inter);
  font-size: calc(clamp(11px, 1.6vmin, 13px) * var(--scale));
  color: rgba(17,17,17,.55);
}

/* Height pressure: reduce margins first, then text sizes */
@media (max-height: 760px){
  :root{
    --pad: calc(clamp(12px, 2.4vmin, 22px) * var(--scale));
    --gap: calc(clamp(10px, 2vmin, 18px) * var(--scale));
  }
  .manifest-box-inner{
    font-size: calc(clamp(14px, 1.5vmin, 17px) * var(--scale));
  }
  .manifest-quote-text{
    font-size: calc(clamp(16px, 2.3vmin, 22px) * var(--scale));
  }
}

@media (max-width: 600px){
  .manifest-brand{
    --logo-color: #000;
    color: #000;
  }

  .manifest-box{
    margin-top: calc(-40px * var(--scale));
  }

  .manifest-flow p{
    display: inline;
    margin: 0;
  }

  .manifest-box-inner{
    font-size: calc(clamp(13px, 1.5vw, 16px) * var(--scale));
    line-height: calc(clamp(1.35, 1.2 + 0.5vmin, 1.55) * var(--scale));
  }

  .manifest-box-inner .manifest-list{
    padding-left: calc(clamp(14px, 3.4vw, 20px) * var(--scale));
  }

  .manifest-box-inner p{
    margin-bottom: calc(clamp(4px, 0.8vmin, 8px) * var(--scale));
  }
}