/* Maths & Physics Tuition — bake-off (Hugo/hilbert) */
:root{
  --teal:#2f8f88; --teal-dark:#22706a; --ink:#26313a; --muted:#5c6b76;
  --bg:#ffffff; --bg-alt:#f4f8f7; --line:#e0e8e6; --accent:#e8a23d;
  --maxw:940px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:var(--bg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
a{color:var(--teal-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* header */
.site-header{background:var(--teal);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.brand{display:flex;flex-direction:column;color:#fff}
.brand:hover{text-decoration:none}
.brand-title{font-weight:700;font-size:1.3rem;line-height:1.1}
.brand-sub{font-size:.8rem;opacity:.9;letter-spacing:.02em}
.main-nav ul{display:flex;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0}
.main-nav a{display:block;color:#fff;padding:8px 12px;border-radius:6px;font-size:.95rem}
.main-nav a:hover{background:rgba(255,255,255,.15);text-decoration:none}
.main-nav a.active{background:var(--teal-dark)}
.nav-toggle,.nav-toggle-label{display:none}

/* hero */
.hero{background:linear-gradient(135deg,var(--bg-alt),#eaf3f1);border-bottom:1px solid var(--line);
  text-align:center;padding:48px 20px 40px;margin-bottom:8px}
.hero h1{margin:0 0 .3em;font-size:2rem;color:var(--teal-dark)}
.hero-sub{max-width:640px;margin:0 auto 1.4em;color:var(--muted);font-size:1.1rem}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:11px 22px;border-radius:8px;font-weight:600;margin:4px}
.btn:hover{background:var(--teal-dark);text-decoration:none}
.btn-ghost{background:transparent;color:var(--teal-dark);border:2px solid var(--teal)}
.btn-ghost:hover{background:var(--teal);color:#fff}

/* content */
main.wrap{padding-top:28px;padding-bottom:48px}
.page-head h1{color:var(--teal-dark);margin:.2em 0 .4em;font-size:1.8rem}
.post-meta{color:var(--muted);margin-top:-.4em;font-size:.95rem}
.content{font-size:1.03rem}
.content h2,.content h3{color:var(--teal-dark)}
.content p{margin:0 0 1em}
.content ul,.content ol{margin:0 0 1em;padding-left:1.4em}
.content li{margin:.25em 0}
.content img{border-radius:6px;margin:.4em 0}
.content blockquote{margin:1.2em 0;padding:.6em 1.2em;border-left:4px solid var(--teal);
  background:var(--bg-alt);border-radius:0 6px 6px 0;font-style:italic;color:#3a4750}
.content blockquote p{margin:.4em 0}
/* neutralise legacy fixed-width Drupal #div1 wrappers */
.content #div1,.content [id^="div1"]{width:auto!important;max-width:100%!important}
/* responsive embeds — iframes scale to container width */
.content iframe{max-width:100%}
.content iframe[src*="youtube"],.content iframe[src*="maps"]{width:100%}

.back-link{margin-top:2em}

/* blog list */
.post-list{list-style:none;margin:1em 0;padding:0}
.post-item{padding:14px 0;border-bottom:1px solid var(--line)}
.post-item-title{font-weight:600;font-size:1.12rem}
.post-item-date{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}
.post-item-summary{color:var(--muted);margin:.4em 0 0}
.home-blog{margin-top:40px;padding-top:24px;border-top:2px solid var(--line)}
.home-blog h2{color:var(--teal-dark)}

/* footer */
.site-footer{background:var(--ink);color:#cdd7dd;margin-top:40px}
.footer-inner{display:flex;flex-wrap:wrap;gap:32px;padding:36px 20px 20px}
.footer-col{flex:1;min-width:200px}
.footer-col h3{color:#fff;font-size:1rem;margin:0 0 .6em}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:.3em 0}
.footer-col a{color:#9fd3ce}
.footer-legal{border-top:1px solid #3a464f;padding:14px 20px 28px;font-size:.85rem;color:#8b98a1}

/* mobile nav */
@media (max-width:720px){
  .nav-toggle-label{display:block;cursor:pointer;padding:10px}
  .nav-toggle-label span,.nav-toggle-label span::before,.nav-toggle-label span::after{
    display:block;width:24px;height:2px;background:#fff;position:relative;transition:.2s}
  .nav-toggle-label span::before,.nav-toggle-label span::after{content:"";position:absolute}
  .nav-toggle-label span::before{top:-7px}.nav-toggle-label span::after{top:7px}
  .main-nav{flex-basis:100%;display:none}
  .nav-toggle:checked ~ .main-nav{display:block}
  .main-nav ul{flex-direction:column;gap:0;padding:8px 0}
  .main-nav a{padding:10px 6px}
  .hero h1{font-size:1.6rem}
}

/* --- masthead: large full-width logo BANNER, stacked on its own row ABOVE the
   nav bar. Black-on-transparent line-art sits on a white card (header bg is
   teal), so the card gives it the light background it needs. --- */
.header-inner{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px}
.brand{display:block;width:100%;background:#fff;padding:14px 20px;border-radius:8px;color:inherit;box-sizing:border-box}
.brand-logo{display:block;width:100%;height:auto}
.main-nav ul{justify-content:center}