/* =====================================================
   STUDIO RIBBON — COMPLETE CSS (replace whole file)
   ===================================================== */

:root{
  /* COLORS */
  --cream:#f6f3ee;
  --white:#fbf9f9;
  --graphite:#2b2b2b;
  --burg:#7a1f2b;

  /* MAIN BOX (fixed proportions, scalable size) */
  --box-h: 65vh;
  --box-ratio: 1100 / 1430;

  /* =======================
     LANDING (inside box)
     ======================= */
  --landing-title-top: 22%;
  --landing-title-left: 50%;
  --landing-title-size: 4.2vh;

  --landing-sub-top: 48%;
  --landing-sub-left: 50%;
  --landing-sub-size: 1.7vh;

  /* ribbon image (OVERLAPS box + cream) */
  --ribbon-top: -2%;      /* can be negative */
  --ribbon-left: 82%;     /* % of box width */
  --ribbon-width: 30%;    /* % of box width */

  /* =======================
     RIBBONBOARD (scene)
     ======================= */

  /* LEFT BOARD IMAGE (relative to viewport, not box) */
  --board-top: 30vh;      /* vertical position in viewport */
  --board-left: -25vw;     /* horizontal position in viewport (can be negative) */
  --board-w: 18vw;        /* size */

  /* ribbonboard heading/subtitle (inside box) */
  --rb-title-top: 16%;
  --rb-title-left: 50%;
  --rb-title-size: 3.4vh;

  --rb-sub-top: 34%;
  --rb-sub-left: 50%;
  --rb-sub-size: 1.7vh;

  /* email block (inside box) */
  --email-top: 54%;
  --email-left: 18%;
  --email-width: 64%;
  --email-font: 1.6vh;

  --email-underline: 1px;
  --email-pad-bottom: 0px;    /* distance from text to underline */
  --email-text-nudge: 0px;    /* pushes placeholder closer to underline */

  /* Send button placement (under the line) */
  --send-drop: 2.7vh;         /* how far below underline */
  --send-right: 0px;          /* right inset */

  /* privacy note */
  --privacy-bottom: 6%;
  --privacy-size: 1.2vh;

  /* signature (below box) */
  --sig-gap: 3vh;
  --sig-size: 1.2vh;
}

/* ---------- BASE ---------- */

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

body{
  background:var(--cream);
  font-family:"Libre Baskerville", serif;
  color:var(--graphite);
}

.stage{
  height:100vh;
  width:100vw;
  display:grid;
  place-items:center;
}

.unit{ position:relative; }

/* ---------- WHITE CONTAINER ---------- */

.box{
  position:relative;
  height:var(--box-h);
  aspect-ratio:var(--box-ratio);
  background:var(--white);
  overflow:visible; /* allow overlap assets */
}

/* common centered helper */
.centered{
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  margin:0;
}

/* =======================
   LANDING
   ======================= */

.ribbon{
  position:absolute;
  top: var(--ribbon-top);
  left: var(--ribbon-left);
  width: var(--ribbon-width);
  height:auto;
  pointer-events:none;
}

.landing-title{
  position:absolute;
  top: var(--landing-title-top);
  left: var(--landing-title-left);
  transform:translateX(-50%);
  margin:0;

  font-size: var(--landing-title-size);
  color: var(--burg);
  font-weight:700;
  white-space:nowrap;
}

.landing-sub{
  position:absolute;
  top: var(--landing-sub-top);
  left: var(--landing-sub-left);
  transform:translateX(-50%);
  margin:0;

  font-size: var(--landing-sub-size);
  color: var(--graphite);
  font-style:italic;
  white-space:nowrap;
}

/* =======================
   RIBBONBOARD
   ======================= */

.board-asset{
  position:absolute;
  top: var(--board-top);
  left: var(--board-left);
  transform: translateY(-50%);
  width: var(--board-w);
  height:auto;
  pointer-events:none;
}

/* heading + subtitle (charcoal) */
.rb-title{
  position:absolute;
  top: var(--rb-title-top);
  left: var(--rb-title-left);
  transform:translateX(-50%);
  margin:0;

  font-size: var(--rb-title-size);
  color: var(--graphite);
  font-weight:700;
  white-space:nowrap;
}

.rb-sub{
  position:absolute;
  top: var(--rb-sub-top);
  left: var(--rb-sub-left);
  transform:translateX(-50%);
  margin:0;

  font-size: var(--rb-sub-size);
  color: var(--graphite);
  font-style:italic;
  white-space:nowrap;
}

/* email capture (underline + input + send under line) */
.email-row{
  position:absolute;
  top: var(--email-top);
  left: var(--email-left);
  width: var(--email-width);

  border-bottom: var(--email-underline) solid rgba(43,43,43,0.55);
  padding-bottom: var(--email-pad-bottom);

  display:block;
}

.email-row input{
  width: 70%;

  font-family:"Libre Baskerville", serif;
  font-size: var(--email-font);
  color: var(--graphite);

  background:transparent;
  border:none;
  outline:none;

  line-height:1;
  padding: 0 0 var(--email-text-nudge) 0;
}

.email-row input::placeholder{
  color: rgba(43,43,43,0.7);
}

.email-row button{
  position:absolute;
  right: var(--send-right);
  top: var(--send-drop);

  font-family:"Libre Baskerville", serif;
  font-size: var(--email-font);
  color: var(--graphite);

  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
}

.form-success{
  position:absolute;
  top:68%;            /* adjust freely */
  left:50%;
  transform:translateX(-50%);

  font-size:1.2vh;
  color:rgba(43,43,43,0.7);

  opacity:0;
  transition:opacity .4s ease;
}

.privacy{
  position:absolute;

  /* bottom of the white box */
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);

  margin:0;
  width: 70%;              /* makes it wrap nicely */
  text-align:center;
  white-space:normal;      /* allow wrapping */

  font-size: var(--privacy-size);
  color: rgba(43,43,43,0.65);
  line-height: 1.25;
}

/* signature below box */
.signature{
  position:absolute;
  top: calc(var(--box-h) + var(--sig-gap));
  left:50%;
  transform:translateX(-50%);
  font-size: var(--sig-size);
  color: var(--graphite);
}

/* =======================
   MOBILE
   ======================= */

@media (max-width: 800px){

  .stage{
    padding-top: 6vh;
  }

  /* stack: board above box */
  .unit{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4vh;
  }

  .board-asset{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:60vw;
  }

  .box{
    height:auto;
    width:80vw;
    aspect-ratio:1100 / 1430;
  }

  .signature{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    font-size: 12px;
    margin-top: 18px;
  }

  .privacy{
    position:absolute;

    /* bottom of the white box */
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);

    margin:0;
    width: 70%;              /* makes it wrap nicely */
    text-align:center;
    white-space:normal;      /* allow wrapping */

    font-size: var(--privacy-size);
    color: rgba(43,43,43,0.65);
    line-height: 1.25;
  }
  }
}