:root{
  --bg:#f8f3e7;      /* creamy background */
  --panel:#e9f9fb;   /* slightly stronger teal-tinted background */
  --ink:#000000;     /* black text */
  --muted:#555555;   /* dark gray for secondary text */
  --primary:#00bcd4; /* teal-blue for nav/sidebar accents */
  --accent:#26d9f8;  /* lighter teal accent */
  --border:#cfdedc;  /* softened border to match teal tone */
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
}
a{color:inherit;text-decoration:none}
.container{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{
  position:sticky; top:0; align-self:flex-start; height:100vh; width:72px;
  background:var(--bg); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px; padding:12px; z-index:40;
  transition:width 0.35s ease-in-out; /* smooth expand/collapse */
}
.brand{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
.brand-badge{width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--accent));}
.brand span{
  font-weight:800;white-space:nowrap;opacity:0;
  transition:opacity 0.3s ease-in-out; /* smooth fade */
}
.nav-section{display:flex;flex-direction:column;gap:8px}
.pinto-link{
  position:relative;
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;font-weight:800;
  transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}
.pinto-link .letter{
  font-size:22px; font-weight:900; color:var(--primary); line-height:1;
}
.pinto-link .label{
  white-space:nowrap;
  opacity:0;
  transform:translateX(-10px); /* start slightly left */
  pointer-events:none;
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

/* Sidebar hover clarity */
.pinto-link:hover,
.pinto-link.active {
  background:var(--bg);
  outline:1px solid var(--border);
}
.pinto-link:hover::before,
.pinto-link.active::before {
  content:"";
  width:3px; height:100%;
  background:var(--primary);
  border-radius:2px;
  position:absolute; left:6px; top:0;
}

/* Expand labels on hover */
.sidebar:hover{width:220px}
.sidebar:hover .brand span{opacity:1}
.sidebar:hover .pinto-link .label{
  opacity:1;
  transform:translateX(0); /* slide into place */
}

/* --- Staggered fade + slide-in effect --- */
.nav-section .pinto-link:nth-child(1) .label { transition-delay: 0.10s; }
.nav-section .pinto-link:nth-child(2) .label { transition-delay: 0.20s; }
.nav-section .pinto-link:nth-child(3) .label { transition-delay: 0.30s; }
.nav-section .pinto-link:nth-child(4) .label { transition-delay: 0.40s; }
.nav-section .pinto-link:nth-child(5) .label { transition-delay: 0.50s; }

/* --- Reverse stagger on collapse --- */
.sidebar:not(:hover) .pinto-link .label {
  opacity:0;
  transform:translateX(-10px);
}
.sidebar:not(:hover) .pinto-link:nth-child(1) .label { transition-delay: 0.50s; }
.sidebar:not(:hover) .pinto-link:nth-child(2) .label { transition-delay: 0.40s; }
.sidebar:not(:hover) .pinto-link:nth-child(3) .label { transition-delay: 0.30s; }
.sidebar:not(:hover) .pinto-link:nth-child(4) .label { transition-delay: 0.20s; }
.sidebar:not(:hover) .pinto-link:nth-child(5) .label { transition-delay: 0.10s; }

/* MAIN */
.main{flex:1;min-width:0}

/* TOP NAV */
.topnav{
  position:sticky; top:0;
  background:var(--primary);   /* teal background */
  border-bottom:1px solid var(--border);
  z-index:30;
  box-shadow:0 2px 8px rgba(0,0,0,.06); /* subtle separation */
}
.topnav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:12px 20px}
.menu{display:flex;gap:16px;flex-wrap:wrap}
.topnav a{
  color:#000;
  padding:8px 12px;
  border-radius:10px;
  font-weight:600;
  transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out; /* smooth fade */
}
.topnav a:hover,
.topnav a.current {
  background:var(--bg); /* cream hover/current */
}

/* Call-to-action (if used elsewhere) */
.cta{background:var(--primary);color:#fff;padding:9px 14px;border-radius:12px;font-weight:700}

/* PAGE SECTIONS */
header.hero{max-width:1100px;margin:0 auto;padding:42px 20px 26px}
.eyebrow{display:inline-block;background:#e8f0ff;color:#153e9f;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
h1{font-family:Merriweather,Georgia,serif;font-size:40px;line-height:1.1;margin:12px 0 10px}
.lead{color:var(--muted);font-size:18px;max-width:70ch}

.content{max-width:1100px;margin:0 auto;padding:10px 20px 60px}
.section{
  margin-top:28px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:0 2px 6px rgba(0,0,0,.05); /* base lift */
  transition:box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.section:hover,
.section:focus-within{
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
.section h2{font-size:26px;margin:0 0 6px}
.muted{color:var(--muted)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition:box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.card:hover,
.card:focus-within{
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
ul{margin:8px 0 0 18px}
li{margin:6px 0}

/* FOOTER */
footer{max-width:1100px;margin:0 auto;padding:20px;color:#616a78}

/* ACCESSIBILITY */
a:focus-visible {
  outline:2px solid var(--primary);   /* teal outline */
  outline-offset:2px;
  border-radius:8px;
  transition:outline-color 0.25s ease-in-out;
}

/* REDUCED MOTION SAFEGUARD */
@media (prefers-reduced-motion: reduce){
  .sidebar,
  .pinto-link,
  .pinto-link .label,
  .topnav a,
  .section,
  .card,
  a:focus-visible{
    transition:none !important;
  }
  .section:hover, .section:focus-within,
  .card:hover, .card:focus-within{
    transform:none;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
  }
}

/* MOBILE */
@media (max-width:900px){
  .container{flex-direction:column}
  .sidebar{position:relative;height:auto;width:100%;flex-direction:row;align-items:center;padding:10px 12px;border-right:none;border-bottom:1px solid var(--border)}
  .sidebar:hover{width:100%}
  .brand span,.sidebar:hover .pinto-link .label{opacity:1;transform:translateX(0)}
  .nav-section{flex-direction:row;flex-wrap:wrap}
  .topnav{top:auto;position:relative}
  .grid{grid-template-columns:1fr}
  .section{padding:18px}
}