:root{
  --blue-top:#0A193C;
  --blue-bottom:#143278;
  --yellow:#F5DC78;
  --navy:#0A193C;
  --text:#F5DC78;
  --maxw:1100px;
  --border:16px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "DejaVu Sans", sans-serif;color:var(--text);}
body{min-height:100dvh;background:linear-gradient(180deg,var(--blue-top) 0%,var(--blue-bottom) 100%);display:flex;flex-direction:column;}
.wrapper{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;}
/* Yellow frame around the whole site */
.site-border{outline:var(--border) solid var(--yellow);outline-offset:-var(--border);}
/* Header */
header{position:sticky;top:0;z-index:50;padding:20px 0 8px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0));}
.brand{font-weight:700;font-size:clamp(18px,2.2vw,28px);letter-spacing:.2px;text-decoration:none;color:var(--text);}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.nav-links{display:flex;gap:20px;}
.nav-links a{color:var(--text);text-decoration:none;font-weight:700;padding:8px 12px;border-radius:10px;transition:transform .08s ease,background-color .15s ease,outline-color .15s ease;outline:2px solid transparent;border:2px solid rgba(245,220,120,.85);}
.nav-links a:hover,.nav-links a:focus{background:rgba(245,220,120,.1);outline-color:rgba(245,220,120,.3);}
.nav-links a.active{background:rgba(245,220,120,.18);outline-color:rgba(245,220,120,.45);}
/* Hamburger */
.hamb{display:none;width:42px;height:36px;border:2px solid var(--yellow);border-radius:10px;position:relative;background:transparent;}
.hamb span{position:absolute;left:6px;right:6px;height:3px;background:var(--yellow);border-radius:2px;transition:transform .2s ease,top .2s ease,opacity .2s ease;}
.hamb span:nth-child(1){top:9px;}
.hamb span:nth-child(2){top:16px;}
.hamb span:nth-child(3){top:23px;}
.hamb[aria-expanded="true"] span:nth-child(1){top:16px;transform:rotate(45deg);}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamb[aria-expanded="true"] span:nth-child(3){top:16px;transform:rotate(-45deg);}
.mobile-panel{display:none;position:absolute;right:0;top:64px;background:rgba(10,25,60,.98);border:2px solid var(--yellow);border-radius:12px;padding:12px;min-width:220px;box-shadow:0 6px 28px rgba(0,0,0,.35);}
.mobile-panel a{display:block;color:var(--text);text-decoration:none;padding:12px 10px;border-radius:8px;font-weight:600;}
.mobile-panel a:hover,.mobile-panel a:focus{background:rgba(245,220,120,.12);}
/* Hero */
.hero{position:relative;text-align:center;padding:clamp(24px, 5vw, 48px) 0 0;}
.hero .script-title{
  font-family:"Great Vibes", "Segoe Script","Brush Script MT", cursive;
  font-size: clamp(38px, 6vw, 96px);
  font-weight: 400;
  margin: 8px 0 0;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.logo{
  width:min(56vw, 540px);
  height:auto;
  display:block;
  margin: clamp(8px, 3vw, 16px) auto 0;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.45));
  position: relative;
  z-index: 1;
}
.hero .subtitle{
  font-weight:800;
  font-size: clamp(18px, 2.8vw, 34px);
  margin: 14px 0 0;
}
.quote{margin: clamp(16px, 4vw, 40px) auto 24px; font-style: italic; font-size: clamp(16px, 2.2vw, 24px);}
.main{flex:1;}
.section{padding: clamp(24px, 4vw, 48px) 0;}
.photo-frame{width:min(90%,900px);margin:8px auto 24px;border:6px solid var(--yellow);border-radius:24px;overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.15);}
.photo-frame img{width:100%;height:100%;object-fit:cover;}
.text-block{max-width:1000px;margin:0 auto;line-height:1.65;font-size: clamp(16px, 2.2vw, 20px);}
.btn{display:inline-block;padding:14px 22px;border-radius:12px;border:3px solid var(--yellow);color:var(--text);text-decoration:none;font-weight:800;margin:8px 0;transition:transform .06s ease,background-color .15s ease;}
.btn:hover{background:rgba(245,220,120,.1);} .btn:active{transform:scale(.98);}
.center{text-align:center;}
.list{max-width:880px;margin:0 auto;font-size:clamp(16px,2.2vw,20px);line-height:1.7;}
.list h3{margin:24px 0 8px;font-size:clamp(20px,2.6vw,26px);} .list ul{margin:8px 0 24px 20px;padding:0;} .list li{margin:6px 0;}
.cta-note{text-align:center;margin-top:24px;font-size:clamp(14px,2vw,18px);opacity:.95;font-style:italic;}
/* Footer with strip */
.footer-strip{
  background: var(--yellow);
  color: var(--navy);
  text-align:center;
  padding: 10px 0 12px;
  font-weight: 700;
  letter-spacing:.2px;
  border-top: 3px solid rgba(0,0,0,.08);
}
/* Responsive */
@media (max-width: 768px){ .nav-links{display:none;} .hamb{display:inline-block;} }