/* =========================================================
   ROOT VARIABLES
   ========================================================= */
:root{
  --bg:#f5f7fb;
  --page:#ffffff;
  --ink:#222;
  --muted:#475569;
  --border:#dde2f0;
  --boxbg:#f9faff;

  --nav:#202055;
  --nav-hover:#4040aa;

  --link:#2563eb;
  --link-hover:#1d4ed8;
}

/* =========================================================
   GLOBAL RESET
   ========================================================= */
*{ box-sizing:border-box; }

body{
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
}

/* =========================================================
   PAGE WRAPPER
   ========================================================= */
#page{
  max-width:1100px;
  margin:0 auto;
  padding:16px 20px 40px;
  background:var(--page);
  min-height:100vh;
  box-shadow:0 0 10px rgba(0,0,0,.08);
}

/* =========================================================
   HEADINGS
   ========================================================= */
h1,h2{
  color:#1b2a4a;
  font-weight:600;
}
h1 span.subtitle{
  display:block;
  font-size:.6em;
  color:var(--muted);
}

/* =========================================================
   BOXES
   ========================================================= */
.box{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--boxbg);
}

/* =========================================================
   LINKS
   ========================================================= */
a{ color:var(--link); }
a:hover{ color:var(--link-hover); }

.simple-link{
  text-decoration:none;
}
.simple-link:hover{
  text-decoration:underline;
}

/* =========================================================
   BRAND STRIP (BIG & SMALL)
   ========================================================= */
.brand-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 16px;
  background:#fff;
  border-bottom:1px solid var(--border);
}

.brand-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.who-box{
  text-align:right;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#f8fafc;
  min-width:220px;
  flex-shrink:0;
}
.who-box .big{ font-weight:900; color:#0f172a; }
.who-box .small{ font-size:.9em; }
.who-box .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; }

@media (max-width:820px){
  .brand-strip{ flex-wrap:wrap; }
  .who-box{ width:100%; text-align:left; }
}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  background:var(--nav);
  overflow:visible;
}

.navbar > a,
.navbar .dd > a{
  display:inline-block;
  color:#fff;
  text-decoration:none;
  padding:12px 14px;
  white-space:nowrap;
  font-size:16px;
}

.navbar > a:hover,
.navbar .dd > a:hover{
  background:var(--nav-hover);
}

/* =========================================================
   DROPDOWNS (FINAL, SINGLE SYSTEM)
   ========================================================= */
.dd{
  position:relative;
  display:inline-block;
}

.dd-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  z-index:9999;
}

.dd-menu a{
  display:block !important;
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
  color:#0f172a;
  font-weight:700;
  white-space:nowrap;
}

.dd-menu a:hover{
  background:#e0e7ff;
}

.dd:hover .dd-menu{
  display:block;
}

.caret{
  margin-left:6px;
  font-weight:900;
  opacity:.85;
}

/* =========================================================
   ITEMS / THUMB LAYOUT
   ========================================================= */
.item-row{
  display:flex;
  gap:12px;
  justify-content:space-between;
}

.item-body{ flex:1; }
.item-media{ flex:0 0 220px; }

.item-thumb{
  width:220px;
  max-width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
}

@media (max-width:720px){
  .item-row{ flex-direction:column; }
  .item-media{ width:100%; }
}

/* =========================================================
   SECTION TAG
   ========================================================= */
.section-tag{
  margin-top:20px;
  font-size:.8em;
  color:#6b7280;
  letter-spacing:.08em;
  text-transform:uppercase;
}