/* Minimal, clean, white + pastel blue */
:root{
  --bg:#ffffff;
  --ink:#0f172a;               /* slate-900 */
  --muted:#475569;             /* slate-600 */
  --blue-50:#eff6ff;
  --blue-100:#dbeafe;
  --blue-300:#93c5fd;
  --blue-500:#3b82f6;          /* accents */
  --ring: rgba(59,130,246,.35);

/* === Pastel yellow palette for content buttons === */
  --yellow-50:  #fffef6;   /* almost white with a hint of yellow */
  --yellow-100: #fffbea;   /* softer pastel */
  --yellow-200: #fef3c7;   /* for border/hover */
  --yellow-400: #f59e0b;   /* leave as-is */
  --ring-yellow: rgba(245, 158, 11, .3);
}

/* hide-only-for-screen-readers helper used below */
.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* === Content buttons grid === */
.content-grid{
  display: flex;               /* instead of grid */
  gap: 1.5rem;                 /* more space between buttons */
  flex-wrap: wrap;             /* wrap to new row if screen is narrow */
  justify-content: flex-start; /* align left */
  margin: 1.5rem 0 2rem;
}

/* Button-like links */
.content-button{
  display: grid;
  align-content: center;
  gap: .25rem;

  /* updated sizing */
  flex: 1 1 240px;          
  max-width: 300px;         
  min-height: 140px;        
  padding: 1.25rem 1.4rem;  /* was 1rem 1.1rem */

  border-radius: 16px;
  background: var(--yellow-100);
  border: 1px solid var(--yellow-200);
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
  color: var(--ink);
  text-decoration: none;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}


.content-button:hover{
  transform: translateY(-1px);
  background: var(--yellow-50);
  border-color: var(--yellow-200);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.content-button:focus{
  outline: 3px solid var(--ring-yellow);
  outline-offset: 2px;
}

/* Title + description */
.content-title{
  font-weight: 700;
  letter-spacing: .2px;
}

.content-desc{
  color: var(--muted);
  font-size: .95rem;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  background: linear-gradient(180deg, var(--blue-50), #fff 40%);
}

a{color:var(--blue-500); text-decoration:none}
a:hover{text-decoration:underline}

/* Home hero */
.hero{
  min-height: 80vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem;
}
.name{
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-nav{display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center}
.pill{
  display:inline-block; padding:.6rem 1rem; border-radius:999px;
  background:var(--blue-100); border:1px solid var(--blue-300);
  font-weight:600;
  transition: transform .06s ease;
}
.pill:hover{transform: translateY(-1px); text-decoration:none}

/* Shared layout for subpages */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 1rem; background: #fff; border-bottom: 1px solid var(--blue-100);
  position: sticky; top: 0; z-index: 10;
}

/* Handwritten title + wordmark */
.name, .wordmark{
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  letter-spacing: .5px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Title sizing on the home hero */
.name{
  font-size: clamp(3rem, 8vw, 5rem);
  margin-bottom: 1rem;
}

/* Top-left wordmark in the sticky header */
.wordmark{
  font-size: 1.4rem;        /* tweak if you want it bigger */
  padding: 0 .1rem;
  text-decoration: none;
}

.topnav{display:flex; gap:1rem; align-items:center}
.topnav a{color:var(--muted); font-weight:600}
.topnav a[aria-current="page"]{color:var(--blue-500)}

.container{max-width:840px; margin:2rem auto; padding:0 1rem}
.container h1 {
  margin: .25rem 0 1rem;
  font-size: clamp(1.6rem, 3vw, 2rem);
  text-align: center;   /* centers my headings */
}

/* Simple cards for content */
.card-list{list-style:none; padding:0; margin:1rem 0; display:grid; gap:1rem}
.card{
  padding:1rem; border:1px solid var(--blue-100); background:#fff; border-radius:14px;
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
}

/* Footer */
.site-footer{padding:2rem 1rem; text-align:center; color:var(--muted)}

/* Make hero a bit shorter to leave room for the image */
.hero{
  min-height: 62vh;         /* was ~80vh; moves content up */
  padding-top: 6vh;
}

/* The image container */
.hero-image{
  max-width: 1100px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

/* Image: 4:3, cover, and fade the top edge softly */
.hero-image img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  /* top fade to blend into the page background */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
}

/* Footer sticks to bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* full viewport height */
}

main {
  flex: 1; /* pushes footer down */
}

.site-footer {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--muted);
  background: #fff; /* optional: gives it a base background */
}