:root{--mint:#E5F9E4;--green:#97C1AB;--teal:#84BBBD;--dark:#2b2b2b;--text:#333;--shadow:0 6px 18px rgba(0,0,0,.08)}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;scroll-behavior:smooth}
:root{--radius:12px}
body{font-family:"HvD Brandon Grotesque","Brandon Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial, sans-serif;color:var(--text);background:#fff;padding-bottom:120px}
h1,h2,h3,h4,h5,h6{font-family:"HvD Brandon Grotesque","Brandon Grotesque",Arial,sans-serif}
.logo img{height:54px}

/* HvDTrial Brandon Grotesque local fonts */
@font-face{
  font-family: 'HvDTrial Brandon Grotesque';
  src: url("../assets/HvDTrial_Brandon_Grotesque_bold-BF64a625c9151d5.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'HvDTrial Brandon Grotesque';
  src: url("../assets/font/hvdtrial-brandon-grotesque-cufonfonts/HvDTrial_Brandon_Grotesque_regular-BF64a625c9311e1.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Apply HvDTrial Brandon Grotesque: bold for titles, regular for body text */
h1,h2,h3,h4,h5,h6,.site-title,.menu a{font-family:'HvDTrial Brandon Grotesque', Arial, sans-serif; font-weight:700}
body,p,li,span,a{font-family:'HvDTrial Brandon Grotesque', Arial, sans-serif; font-weight:400}

/* ensure menu items remain bold */
.menu a{font-weight:700}

.container{max-width:1280px;margin-inline:auto;padding-inline:clamp(12px,3vw,24px)}
.topbar{background:var(--mint);border-radius:var(--radius);margin:14px auto 0;box-shadow:var(--shadow)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0;flex-wrap:wrap;position:relative}
.menu{display:flex;gap:22px;list-style:none;margin:0;padding:0;color:#555;flex-wrap:wrap}
.menu a{color:#629279;text-decoration:none;font-family:"HvDTrial Brandon Grotesque","Brandon Grotesque",Arial,sans-serif;font-weight:700}
.menu a:hover{opacity:.85}
.logo img{height:54px}
.logo{display:flex;align-items:center;gap:12px}
.site-title{font-family:"HvDTrial Brandon Grotesque","Brandon Grotesque",Arial,sans-serif;color:#629279;font-weight:700;font-size:18px}
@media (max-width:600px){.site-title{font-size:16px}}
.hero{display:grid;grid-template-columns:1fr minmax(0,960px) 1fr;align-items:center;padding:40px 0}
.hero img{max-width:100%;height:auto}
.spider-left{justify-self:center}
.spider-left img{width:180px}
.masthead{display:flex;gap:20px;align-items:center;justify-content:center;text-align:center}
.masthead img{width:120px;height:auto}
.masthead-text{display:flex;flex-direction:column;align-items:center}
.masthead-text .small{font-family:'KunKun W00 Bold', 'HvD Brandon Grotesque', Arial, sans-serif;color:#113647;font-weight:700}
.small{font-size:14px;opacity:.9}
.muted{color:#777}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));justify-items:center;gap:28px;margin-top:20px;min-width:0}
.card{background:#fff;border-radius:16px;padding:20px 15px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.card-art{width:100%;height:auto;max-width:260px;margin:0 auto 12px;display:block}
.btn{padding:10px 18px;border-radius:20px;border:none;background:var(--teal);color:white}
.btn-outline{background:#fff;border:2px solid var(--teal);color:var(--teal)}
.footer{position:fixed;left:0;bottom:0;width:100%;background:#f8fbf6;border-top:1px solid #eee;z-index:999;max-height:50px;overflow:hidden;transition:max-height 0.3s ease}
.footer.expanded{max-height:400px}
.footer-toggle{cursor:pointer}
.toggle-icon{transition:transform 0.3s ease}
.footer.expanded .toggle-icon{transform:rotate(180deg)}
.fade-in{animation:fadeIn .6s ease-out both}
.hidden{display:none}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.studio-mansa{background:#8FC9CB}
.anansewaa{background:#BDE6D1}
.maduane-card{background:#97C1AB}
/* local KunKun W00 Bold font */
@font-face {
  font-family: 'KunKun W00 Bold';
  src: url("../assets/font/KunKun W00 Bold/Web Fonts/62cb8bd12757d772dfb5522182c93ea1.woff") format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Links: no underline across states (keep focus outline for accessibility) */
a, a:visited, a:hover, a:active { text-decoration: none; }
a:focus { outline: 2px solid #79cbbd; outline-offset: 2px; }

/* Footer text color */
.footer, .footer * { color: #777 !important; }
.footer a { color: #777 !important; }
.footer a:hover { opacity:.85; }

/* Footer adjustments: smaller font and horizontal link layout */
.footer{font-size:12px}
.footer h3{font-size:14px;margin-bottom:4px}
.footer p,.footer a,.footer .subscribe-msg{font-size:12px}
.footer .subscribe-form input[type="email"],
.footer .subscribe-form button,
.footer .subscribe-form .btn{font-size:12px}
.footer .subscribe-form input::placeholder{font-size:12px}
.footer .footer-links-grid{display:flex !important; flex-wrap:wrap; gap:8px 20px; align-items:flex-start}
.footer .footer-links-grid ul{display:flex; flex-wrap:wrap; gap:16px; margin:0; padding:0}
.footer .footer-links-grid li{list-style:none}
.footer .footer-links-grid a{white-space:nowrap}

/* Responsive adjustments */
@media (max-width: 1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px){
  .hero{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr;gap:20px}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width: 480px){
  .cards{grid-template-columns:1fr}
}
.card-link{display:block;text-decoration:none;color:inherit}
.card-link .btn{display:inline-block}
.card-link img{pointer-events:none}
/* Dropdown menu styles */
.dropdown { position: relative }
.dropdown > a{ cursor:pointer }
.dropdown-content { display: none; position: absolute; left: 0; top: calc(100% + 8px); background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.08); border-radius:8px; padding:8px 0; min-width:200px; z-index:200 }
.dropdown-content li{ list-style:none }
.dropdown-content li a{ display:block; padding:8px 18px; color:#333; white-space:nowrap }
.dropdown-content li a:hover{ background: #f2fbf7 }
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content{ display:block }
/* Keep dropdown visible when .open is applied (used by JS) */
.dropdown.open .dropdown-content { display: block }
.dropdown-content{transition:opacity .18s ease, transform .18s ease}

/* Hamburger button and mobile slide-out menu */
.hamburger-toggle{display:none;border:0;background:transparent;padding:8px;border-radius:8px;cursor:pointer;margin-right:8px}
.hamburger-toggle .hamburger-line{display:block;width:22px;height:2px;background:#2b2b2b;margin:5px 0;border-radius:2px;transition:transform .18s ease, opacity .18s ease}

/* mobile nav open state: slide menu from right */
@media (max-width:900px){
  .hamburger-toggle{display:inline-flex;align-items:center;justify-content:center}
  /* hide original menu in header and show slide panel instead */
  .nav{position:relative}
  .menu{position:fixed;right:-320px;top:0;height:100vh;width:320px;background:#fff;box-shadow:-12px 0 30px rgba(0,0,0,0.12);display:flex;flex-direction:column;gap:8px;padding:22px;transition:right .28s cubic-bezier(.2,.9,.2,1);z-index:1200}
  body.mobile-nav-open .menu{right:0}
  .menu a{padding:12px 16px;border-radius:8px;background:transparent}
  /* animate hamburger into X when open */
  body.mobile-nav-open .hamburger-toggle .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.mobile-nav-open .hamburger-toggle .hamburger-line:nth-child(2){opacity:0}
  body.mobile-nav-open .hamburger-toggle .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Ensure dropdown contents inside slide-out are visible and positioned statically */
@media (max-width:900px){
  .dropdown-content{position:static;box-shadow:none;border-radius:8px;padding:6px 0;background:transparent}
  .dropdown .dropdown-content li a{padding-left:20px}
}

/* Additional responsive improvements for full-site mobile behavior */
:root{
  --gap-small:12px;
  --gap-medium:20px;
  --max-width:1100px;
}
/* Make container padding and max-width more fluid */
.container{max-width:var(--max-width);padding-inline:clamp(12px,4vw,24px)}

/* Navigation: collapse to stacked layout on small screens */
.nav{padding:12px 0}
.logo img{height:48px}
.menu{gap:16px}

/* mobile nav toggle (CSS-only simple stacking) */
@media (max-width:900px){
  .nav{align-items:center; justify-content:space-between; padding:12px 16px}
  .logo{flex:1; text-align:center}
  .site-title{font-size:20px; font-weight:700}
  .hamburger-toggle{margin-left:auto}
  .menu{display:none} /* Hide menu by default, shown by JS */
}

/* Hero and masthead scaling */
.hero{padding:28px 0}
.masthead img{width:96px}
.masthead-text .small{font-size:13px}

/* Cards: ensure single column on very small screens and comfortable touch targets */
.cards{gap:18px}
.card{padding:18px}
.card .btn{padding:12px 18px}
.card-art{max-width:220px}

@media (max-width:820px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .card-art{max-width:100%}
  .card{padding:14px}
}

/* Typography scaling for mobile */
h1{font-size:clamp(20px,3.6vw,34px);line-height:1.08}
h2{font-size:clamp(18px,3vw,28px)}
p,li,small{font-size:clamp(14px,2.4vw,16px)}

/* Footer adjustments */
.footer{position:static;bottom:auto;padding:18px 0}
/* Pin footer to bottom on desktop widths */
@media (min-width:900px){
  .footer{position:fixed;left:0;right:0;bottom:0;width:100%;z-index:999}
}

/* Exploration circle: keep responsive already but ensure center alignment */
.exploration-hero.centered-hero{justify-content:center}
.exploration-circle-wrap{flex:0 0 auto}

/* Improve touch targets for dropdowns */
.dropdown > a{padding:8px 10px}
.dropdown-content li a{padding:12px 16px}

/* Utility tweaks for small screens */
@media (max-width:420px){
  .logo img{height:40px}
  .site-title{font-size:15px}
  .menu a{font-size:15px}
  .masthead img{width:84px}
  .exploration-circle .node{width:100px;height:40px;font-size:14px}
}

/* Ensure images are responsive throughout */
img{max-width:100%;height:auto}

/* keep interactive elements large enough on touch devices */
button,.btn,a{touch-action:manipulation}

/* Floating sidebar toggle (three dashes) */
.sidebar-toggle{display:none;position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,0.06);box-shadow:0 8px 20px rgba(0,0,0,0.12);align-items:center;justify-content:center;z-index:1300;cursor:pointer}
.sidebar-toggle .dash{display:block;width:22px;height:3px;background:#2b2b2b;border-radius:2px;margin:3px 0;transition:transform .18s ease,opacity .18s ease}

@media(max-width:900px){
  .sidebar-toggle{display:flex}
  /* when menu open, fade button slightly */
  body.mobile-nav-open .sidebar-toggle{opacity:.9}
}

/* Strong mobile stacking for content to ensure images and text flow vertically on small screens */
@media (max-width:900px){
  /* General content stack: ensure sections stack vertically */
  main.container, .hero, .exploration-hero, .masthead, .masthead-text, .hero-center{display:block;width:100%}

  /* Hero grid -> single column */
  .hero{grid-template-columns:1fr;gap:18px;padding:20px 0}

  /* Masthead adjustments */
  .masthead{flex-direction:row;gap:12px;align-items:center}
  .masthead img{width:80px}
  .masthead-text{align-items:flex-start;text-align:left}

  /* Cards become full width stack */
  .cards{grid-template-columns:1fr;margin-top:12px}
  .card{width:100%;max-width:none;text-align:left;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  .card-art{max-width:100%;height:auto;margin:0}
  .card img:first-child{max-width:220px}

  /* Exploration circle area stacks */
  .exploration-hero.centered-hero{flex-direction:column;align-items:center}
  .exploration-circle-wrap{width:100%;display:flex;justify-content:center}
  .exploration-circle{width:260px;height:260px}
  .exploration-text{width:100%}
  .exploration-info{width:100%;display:flex;flex-direction:column;gap:12px}
  .exploration-info .info{position:static;width:100%}

  /* Characters / article layouts - stack image then text */
  article.card{display:flex;flex-direction:column;align-items:center}
  article.card h3, article.card p{text-align:center}

  /* Make typographic rhythm comfortable on mobile */
  body{font-size:16px}
  h1{font-size:22px}
  h2{font-size:18px}

  /* Give larger tap targets */
  .menu a, .dropdown .dropdown-content li a, .btn{padding:14px 12px}

  /* Footer stack */
  .footer .container{flex-direction:column;align-items:center;text-align:center}
}

/* Force images above text on mobile for content-heavy pages */
@media (max-width:900px){
  /* Generic: any figure/img that is alongside text should appear first */
  .container img, .container figure img, .card-art, .masthead img, .exploration-circle .center-image{order:-1}

  /* Ensure article/card layout stacks image then headings then paragraphs */
  .card, article.card, .content-block{display:flex;flex-direction:column}
  .card img, article.card img, .content-block img{width:100%;max-width:100%;height:auto;margin-bottom:12px}
  .card h3, article.card h3, .content-block h2{margin-top:0}

  /* Specific: about pages often have structure with image + paragraphs in same container */
  .about-hero, .about-intro, .page-hero{display:flex;flex-direction:column;gap:12px}
  .about-hero img, .about-intro img, .page-hero img{width:100%;height:auto}

  /* Exploration image center should remain centered and scale above text */
  .exploration-circle-wrap{order:-1}
}

/* Extra safety: ensure images inside content always scale */
.content img, .article img, img{max-width:100%;height:auto}

/* Stack image + text sections on mobile (override inline flex rows) */
@media (max-width:900px){
  /* Any section explicitly set to display:flex should stack vertically on small screens */
  section[style*="display:flex"]{flex-direction:column !important; align-items:stretch !important}
  section[style*="display:flex"] > div{flex:unset !important; width:100% !important}
  /* Images expand full width and sit above the text naturally */
  section[style*="display:flex"] img{max-width:100%;height:auto}
}

/* Footer pinned to bottom at all sizes */
html,body{min-height:100%}
.footer{position:fixed !important; left:0; right:0; bottom:0; width:100%; z-index:999;}

/* Floating top-right Ntontan logo for store page (visible on desktop, hidden on small devices) */
.top-right-logo { position: fixed; top: 60px; right: 20px; z-index: 3; width: 140px; }
@media (max-width: 600px) { .top-right-logo { display: none; } }