@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

500;600;700;800&display=swap");

:root{
  --blue:#0136FF;
  --lime:#CAFF01;
  --text:#111827;
  --muted:#6B7280;
  --line:#E5E7EB;
  --bg:#F8FAFC;
}
*{box-sizing:border-box}

body,
button,
input,
textarea,
select{
  font-family:"Montserrat", Arial, Helvetica, sans-serif;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Montserrat", Arial, Helvetica, sans-serif;
  line-height:1.5;
}
.wrap{
  width:min(1080px,calc(100% - 32px));
  margin:0 auto;
  padding:48px 0 72px;
}
.intro{margin-bottom:36px}
.label{
  margin:0 0 8px;
  color:var(--blue);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
}
h1{
  margin:0;
  font-size:clamp(32px,5vw,56px);
  line-height:1.05;
  letter-spacing:-.04em;
}
.sub{margin:14px 0 0;color:var(--muted)}
.storyboard{
  display:grid;
  gap:50px;
}

.scene{
  background:#fff;
  border:1px solid #D9DEE8;
  border-radius:16px;
  padding:18px;
  margin:0;
}
.meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  color:var(--blue);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.scene>img,.frame-stack img{
  width:100%;
  display:block;
  border-radius:10px;

  border:1px solid #E5E7EB;}
.frame-stack{
  display:grid;
  gap:14px;
}
.notes{padding:16px 2px 2px}
h2{
  margin:0 0 8px;
  font-size:22px;
  letter-spacing:-.02em;
}
.notes p{
  margin:6px 0;
  color:var(--muted);
  font-size:14px;
}
.notes b{color:var(--text)}


}

.notes p:last-child{margin-bottom:0}
.scene .notes{padding-bottom:0}


@media(max-width:680px){
  .wrap{
    width:calc(100% - 16px);
    padding-top:28px;
  }

  .scene{
    padding:10px;
    border:1px solid #D9DEE8;
    border-radius:12px;
  }

  h1{
    font-size:30px;
    line-height:1.1;
  }

  h2{
    font-size:20px;
  }

  .sub{
    font-size:14px;
  }

  .meta{
    font-size:11px;
    gap:10px;
  }

  .notes p{
    font-size:14px;
    line-height:1.6;
  }

  .frame-stack{
    gap:12px;
  }
}

/* =========================================================
   FRAME / BORDER SIZE CONTROL
   Change ONLY --frame-border-gap.
   The image/content size stays the same.
   The outer scene border expands outward.
   ========================================================= */
:root{
  --frame-border-gap:0px;
}

.scene{
  padding:calc(18px + var(--frame-border-gap));
  width:calc(100% + (var(--frame-border-gap) * 2));
  margin-left:calc(var(--frame-border-gap) * -1);
  margin-right:calc(var(--frame-border-gap) * -1);
}

/* Keep the original content spacing inside the expanded frame */
.meta{
  margin-bottom:14px;
}

.notes{
  padding:16px 2px 2px;
}

.frame-stack{
  gap:20px;
}

@media(max-width:680px){
  .scene{
    padding:calc(10px + var(--frame-border-gap));
    width:calc(100% + (var(--frame-border-gap) * 2));
    margin-left:calc(var(--frame-border-gap) * -1);
    margin-right:calc(var(--frame-border-gap) * -1);
  }
}