:root{
  --bg:#EEF6FF;
  --surface:#FFFFFF;
  --muted:#516273;
  --text:#0C1B2A;
  --accent:#1E88E5;
  --accent2:#10B981;
  --ring:#3B82F6;
  --radius:16px;
  --space:1rem;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.site-header{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,4vw,2rem);background:linear-gradient(180deg,rgba(30,136,229,.08),transparent)}

.brand a{display:flex;gap:.5rem;align-items:center;color:var(--text);font-weight:700;font-size:1.125rem}
.logo{filter:drop-shadow(0 1px 0 #000)}
.site-nav{display:flex;gap:1rem;flex-wrap:wrap}
.site-nav a{padding:.25rem .5rem;border-radius:10px}
.site-nav a:hover{background:rgba(30,136,229,.10)}
.nav-toggle{display:none}

.layout{display:flex;gap:clamp(1rem,3vw,2rem);padding:clamp(1rem,4vw,2rem);align-items:flex-start}
.sidebar{position:sticky;top:1rem;flex:0 0 320px;background:var(--surface);border:1px solid rgba(0,0,0,.08);padding:1rem;border-radius:var(--radius)}
.sidebar .mobile {
  display: none;
}
@media(min-width:768px) {
  .content--centre {margin-left:3em; margin-right:3em;}
}
.content{flex:1;display:grid;gap:1rem}
.content--wide{max-width:70ch}
.widget{display:grid;gap:.5rem}
.stack{display:grid;gap:.5rem}
.button,button{display:inline-block;border:1px solid rgba(0,0,0,.15);background:transparent;color:var(--text);padding:.6rem 1rem;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}
button:hover,.button:hover{background:rgba(30,136,229,.10);border-color:var(--accent)}
.button:active,button:active{transform:translateY(1px)}
input{width:100%;padding:.6rem;border-radius:10px;border:1px solid rgba(0,0,0,.15);background:#FAFCFF;color:var(--text)}
.note,.muted{color:var(--muted)}

.hero{display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:center;background:var(--surface);border:1px solid rgba(0,0,0,.08);padding:1rem;border-radius:var(--radius)}
.hero .book{border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15)}

.article {
  background:var(--surface);
  border:1px solid rgba(0,0,0,.08);
  padding:1rem;
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}


.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--surface);border:1px solid rgba(0,0,0,.08);padding:1rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,.05)}
.card:hover{transform:translateY(-2px);transition:transform .15s ease;box-shadow:0 10px 24px rgba(0,0,0,.08)}

.links{display:grid;gap:.5rem}

.site-footer{padding:2rem;opacity:.9;text-align:center}
.site-footer p{color:var(--muted)}

/* Dropdowns */
.dropdown{ position:relative; display:inline-flex; align-items:center; gap:.25rem }
.drop-btn{ background:none; border:0; color:var(--text); cursor:pointer; padding:.25rem .25rem; border-radius:8px }
.drop-btn:focus{ outline:2px solid var(--ring); outline-offset:2px }
.dropdown-menu{
  display:none; position:absolute; top:100%; left:0; min-width:220px;
  background:var(--surface); border:1px solid rgba(0,0,0,.15);
  border-radius:var(--radius); box-shadow:0 6px 18px rgba(0,0,0,.15);
  padding:.5rem 0; z-index:1000
}
.dropdown-menu li{ list-style:none }
.dropdown-menu a{ display:block; padding:.5rem 1rem; color:var(--text) }
.dropdown-menu a:hover{ background:rgba(30,136,229,.10) }
/* Hover buffer to prevent accidental close */
@media (hover:hover) and (pointer:fine){
  .dropdown::after{ content:""; position:absolute; left:0; top:100%; width:100%; height:8px; }
  .dropdown:hover > .dropdown-menu,
  .dropdown:focus-within > .dropdown-menu,
  .dropdown.open > .dropdown-menu { display:block }
}

/* Mobile drawer + visibility */
.mobile-menu-toggle{ margin-left:auto; font-weight:700; background:var(--accent); color:#fff; border:1px solid transparent; border-radius:10px; padding:.4rem .6rem; box-shadow:0 2px 8px rgba(0,0,0,.15) }
.mobile-menu-toggle:hover{ filter:brightness(.95) }
.drawer[hidden]{ display:none }
.drawer{ position:fixed; inset:0; z-index:1500 }
.drawer-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4) }
.drawer-panel{
  position:absolute; right:0; top:0; height:100%; width:min(88vw,360px);
  background:var(--surface); border-left:1px solid rgba(0,0,0,.12);
  box-shadow: -10px 0 30px rgba(0,0,0,.2); display:flex; flex-direction:column
}
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid rgba(0,0,0,.08) }
.drawer-close{ background:transparent; border:0; font-size:1rem; cursor:pointer; color:var(--text) }
.drawer-nav{ padding:1rem; display:grid; gap:.5rem }
.drawer-nav a{ padding:.5rem .75rem; border-radius:10px; border:1px solid rgba(0,0,0,.08); background:var(--surface); color:var(--text) }
.drawer-nav details{ border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:.25rem .5rem; background:var(--surface) }
.drawer-nav summary{ cursor:pointer; padding:.4rem .25rem; font-weight:600; list-style:none; color:var(--text) }
.drawer-nav summary::-webkit-details-marker { display:none }
.drawer-nav ul{ list-style:none; margin:0; padding:.25rem 0 .5rem 0; display:grid; gap:.25rem }
.drawer-nav li a { border:none }
.drawer-nav a:hover{ background: rgba(30,136,229,.10) }

/* Mobile layout: show sidebar under content */
@media (max-width: 960px){
  .layout{flex-direction:column}
  .sidebar{position:relative;flex:auto;margin-top:1rem;}
  .sidebar .full { display: none; }
  .sidebar .mobile { display: block; }


  .site-nav{ display:none } /* hide desktop nav */
  .mobile-menu-toggle{ display:inline-flex }
}


/* Collapsible sidebar (mobile) */
.sidebar details.sidebar-section{
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  background:var(--surface);
  margin:.5rem 0;
  padding:.25rem .5rem;
}
.sidebar details.sidebar-section > summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
  padding:.5rem .25rem;
}
.sidebar details.sidebar-section > summary::-webkit-details-marker{ display:none }


/* Announcements widget: old-twitter-ish feed box */
.announcements-widget{
  border:1px solid rgba(0,0,0,.12);
  background:var(--surface);
  border-radius:12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  overflow:hidden;
  margin:.5rem 0;
}

.announcements-widget .ann-head{
  font-weight:700;
  padding:.5rem .75rem;
  background:linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,.00));
  border-bottom:1px solid rgba(0,0,0,.08);
}

.announcements-widget .ann-list{
  list-style:none;
  margin:0;
  padding:0;
  max-height:220px;   /* scroll like the old feed boxes */
  overflow:auto;
}

.announcements-widget .ann-item{
  padding:.6rem .75rem .5rem .75rem;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.announcements-widget .ann-item:last-child{ border-bottom:none }

.announcements-widget .ann-message{
  padding-top: 1em;
  margin-left:1em;
  font-size:.94rem;
  line-height:1.35;
}

.announcements-widget .ann-time{
  margin-top:.25rem;
  font-size:.78rem;
  color:var(--muted);
}

.announcements-widget .ann-empty{
  padding:.75rem;
  color:var(--muted);
}

.announcements-widget.ann-error .ann-head{
  color:#B91C1C;
}

/* Nice thin scrollbar on WebKit */
.announcements-widget .ann-list::-webkit-scrollbar{ width:8px }
.announcements-widget .ann-list::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:8px;
}

.amazon-btn {
  display: inline-block;
  padding: 12px 24px;
  background: #232f3e; /* Amazon navy */
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.amazon-btn:hover {
  background: #131921;
  transform: translateY(-2px);
}

.amazon-btn:active {
  transform: translateY(0);
}