:root{
    --oxford-blue:#0a1f44;
    --navy-800:#0f2a58;
    --navy-700:#163a72;
    --blue-600:#2456a3;
    --blue-500:#3568bb;
    --blue-tint:#eef3fb;
    --paper:#f6f4ee;
    --gold:#b8912f;
    --gold-light:#e7cd8a;
    --gold-bg:#faf3df;
    --ink:#101828;
    --muted:#5f6b85;
    --line:#e2e6f0;
    --white:#ffffff;
    --green:#1e7a44;
    --green-bg:#e3f5e9;
    --red:#b3261e;
    --red-bg:#fbe6e4;
    --amber:#a5670f;
    --amber-bg:#fbedd6;
    --radius:12px;
    --radius-lg:18px;
    --shadow-sm: 0 2px 8px rgba(10,31,68,0.06);
    --shadow: 0 14px 34px -16px rgba(10,31,68,0.35);
    --shadow-lg: 0 24px 60px -20px rgba(10,31,68,0.45);
    --serif: Georgia, 'Times New Roman', Times, 'Noto Serif', serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--sans);
    color:var(--ink);
    min-height:100vh;
    background:
      radial-gradient(900px 500px at 100% 0%, rgba(184,145,47,0.07) 0%, transparent 55%),
      radial-gradient(1000px 600px at 0% 0%, rgba(10,31,68,0.06) 0%, transparent 55%),
      var(--paper);
  }
  ::selection{background:var(--gold-light);color:var(--oxford-blue);}
  .app{min-height:100vh;display:flex;flex-direction:column;}
  a{color:inherit;}

  /* ---------- Crest ---------- */
  .crest{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
  .crest svg{display:block;}

  /* ---------- Header ---------- */
  header.topbar{
    background:
      radial-gradient(600px 120px at 8% 0%, rgba(231,205,138,0.12) 0%, transparent 60%),
      linear-gradient(180deg,var(--oxford-blue) 0%, var(--navy-800) 100%);
    color:#fff;
    padding:0;
    box-shadow:0 4px 18px rgba(10,31,68,0.35);
    position:sticky;top:0;z-index:30;
    border-bottom:3px solid var(--gold);
  }
  .topbar-inner{
    max-width:1240px;margin:0 auto;padding:14px 26px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .brand-block{display:flex;align-items:center;gap:14px;}
  .brand-text .name{
    font-family:var(--serif);font-weight:700;font-size:1.28rem;letter-spacing:.2px;
    line-height:1.1;
  }
  .brand-text .name .accent{color:var(--gold-light);}
  .brand-text .sub{
    font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:#a9bde0;
    margin-top:3px;font-weight:600;
  }
  .rightbar{display:flex;align-items:center;gap:14px;font-size:.86rem;}
  .rightbar .who{
    display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.16);padding:7px 14px;border-radius:30px;
    font-weight:600;
  }
  .rightbar .who .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-light);}
  button.linkbtn{
    background:transparent;
    border:1px solid rgba(255,255,255,0.35);
    color:#fff;padding:8px 16px;border-radius:8px;cursor:pointer;
    font-size:.82rem;font-weight:600;letter-spacing:.2px;
    transition:background .15s ease, border-color .15s ease;
  }
  button.linkbtn:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.55);}

  main{flex:1;padding:34px 24px 70px;max-width:1240px;margin:0 auto;width:100%;}
  .fade-in{animation:fadeIn .35s ease both;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}