/* ---------- Design System ---------- */
:root{
  --brand:#0b3d91;          /* primary blue */
  --brand-2:#163a5f;        /* deep blue */
  --accent:#ffd166;         /* warm accent */
  --ink:#000000;            /* body text */
  --paper:#ffffff;          /* white */
  --glass:rgba(255,255,255,.82);
  --line:rgba(10,20,30,.08);
  --shadow:0 20px 60px rgba(6,18,44,.25);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink); line-height:1.65;
  background:
    linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('bookshelf.jpg') center/cover fixed no-repeat;
}

/* Typography */
h1,h2,h3,h4{ font-weight:900; letter-spacing:.2px }
h1{ font-size: clamp(36px, 5.5vw, 64px); line-height:1.05; margin:0 0 10px }
h2{ font-size: clamp(24px, 3vw, 34px); margin:18px 0 8px }
h3{ font-size: clamp(18px, 2.2vw, 22px); margin:14px 0 6px }
p{ margin: 0 0 14px }

.container{ width:min(1160px, 92%); margin:0 auto }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(8px);
  background:rgba(255,255,255,.78);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; color:var(--brand) }
.brand .logo{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  color:#fff; font-weight:900;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 10px 20px rgba(11,61,145,.25);
}
.brand small{ display:block; font-weight:700; letter-spacing:.4px; color:var(--brand-2) }

.nav a{ font-weight:700; padding:10px 14px; border-radius:12px; color:var(--brand-2) }
.nav a:hover{ background:rgba(11,61,145,.08); text-decoration:none }
.nav a.cta{
  background:var(--brand); color:#fff; border:1px solid rgba(255,255,255,.3);
  box-shadow:0 10px 24px rgba(11,61,145,.35);
}
.nav a.cta:hover{ filter:brightness(1.03) }

/* ---------- Hero ---------- */
.hero{ color:#000; padding:96px 0 70px; text-align:center }
.hero .kicker{ text-transform:uppercase; letter-spacing:.18em; opacity:.9; font-weight:800 }
.hero h1{  opacity:.95; max-width: 820px; margin:0 auto 22px }
.actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.button{
  display:inline-block; padding:12px 18px; border-radius:14px; font-weight:800;
  border:1px solid rgba(255,255,255,.22); transform: translateY(0); transition: transform .15s ease;
}
.button:hover{ transform: translateY(-2px); text-decoration:none }
.button.primary{ background:var(--accent); color:#231a00 }
.button.ghost{ background:transparent; color:var(--brand); border:2px solid var(--brand) }

/* ---------- Sections ---------- */
.section{ padding:64px 0 }
.card-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px }
.card{
  background:var(--glass); border:1px solid var(--line); border-radius:22px; padding:22px;
  box-shadow:var(--shadow);
}
.card .eyebrow{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#2b3b55; font-weight:900 }
.card p{ margin-top:8px }

/* ---------- About Page ---------- */
.prose{
  background:var(--glass); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow);
}
.prose ul, .prose ol{ margin:0 0 14px 20px }
.prose li{ margin:6px 0 }

/* ---------- Forms ---------- */
.form-wrap{ background:var(--glass); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow) }
label{ font-weight:800; display:block; margin:6px 0 8px }
input, select, textarea{
  width:100%; padding:12px 12px; border-radius:14px; border:1px solid #cfd8ea; background:#fff; font:inherit;
}
textarea{ min-height:160px; resize:vertical }
input[type="file"]{ padding:10px; background:#f8fbff }
small.help{ color:#2b3b55; opacity:.9 }

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

.notice{ margin-top:10px; font-weight:800; padding:12px; border-radius:12px; display:none }
.notice.success{ background:#e8fbf0; color:#0b4d2a }
.notice.error{ background:#ffebee; color:#7a1320 }

/* ---------- Footer ---------- */
.site-footer{ padding:34px 0; color:#000; background:rgba(255,255,255,0.85); text-align:center }
.site-footer .foot{ display:flex; justify-content:center; gap:18px; align-items:center; flex-wrap:wrap; color:#000 }
.site-footer a{ color:var(--brand) }
.icon{ width:18px; height:18px; vertical-align:-3px; }

/* ---------- Animations ---------- */
@keyframes floatUp { from{ transform: translateY(8px); opacity:0 } to{ transform: translateY(0); opacity:1 } }
.hero .actions .button{ animation: floatUp .5s ease both }
.hero .actions .button:nth-child(2){ animation-delay: .08s }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .card-grid{ grid-template-columns: 1fr }
  .grid-2, .grid-3{ grid-template-columns: 1fr }
  .nav a{ font-weight:700; padding:10px 14px; border-radius:12px; color:var(--brand-2) }
}

/* Submission instructions highlight */
.submission-box{
  background:#e8f4ff;
  border:1px solid rgba(11,61,145,.25);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 6px 20px rgba(11,61,145,.08);
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:16px;
}
.submission-box .icon{
  width:22px; height:22px; flex:0 0 22px; margin-top:2px;
}
.submission-box h3{
  margin:0 0 6px 0; font-size:18px; color:#0b3d91;
}
.submission-box p{ margin:0; }
.submission-box a{ color:#0b3d91; font-weight:700; }
/* Center the note under the cards */
.centered-note{
  text-align:center;
  max-width: 900px;
  margin: 26px auto 0;
}