/* ========== SITE-WIDE VARIABLES (colors, fonts, sizes) ========== */
:root {
  --font-title : 'Barrio', system-ui;
  --font-body : 'EB Garamond', serif;
  --c-bg      : #FFFCF5;
  --c-ink     : #421414;
  --c-accent  : #D60D69;
  --c-leaf    : #B6E86B;
  --nav-h      : 64px;
  --page-pad   : 1.5rem;
}

/* ========== GLOBAL RESET + PAGE BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

/* Whole page background + default body paragraph text */
body {
  font-family      : var(--font-body);
  background-color : var(--c-bg);
  color            : var(--c-ink);
  line-height      : 1.7;
  min-height       : 100vh;
}

main {
  width: min(100%, 1100px);
  margin: 0 auto;
}

/* ========== TOP NAV BAR (green bar at top) ========== */
.site-header {
  position      : fixed;
  top: 0; left: 0; right: 0;
  z-index       : 1000;
  background    : var(--c-leaf);
  border-bottom : none;
  height        : var(--nav-h);
}

/* Container that spaces "my little corner" and "HOME" */
.nav-inner {
  max-width       : 1100px;
  margin          : 0 auto;
  padding         : 0 var(--page-pad);
  height          : 100%;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  position        : relative;
}

/* "my little corner ✿" text in nav bar */
.site-title { 
  font-family: var(--font-title); 
  font-size: clamp(1rem,3vw,1.3rem); 
  color: var(--c-accent); 
  text-decoration: none; }

/* "HOME" text in nav bar */
.nav-note {
  font-family    : var(--font-title);
  font-weight    : 400;
  font-size      : clamp(1rem,3vw,1.3rem);
  color          : var(--c-accent);
  letter-spacing : .08em;
  text-transform : uppercase;
}

/* ========== HERO SECTION (center intro area) ========== */
/* Wrapper for welcome text block below nav */
.hero { margin-top: var(--nav-h); padding: 5rem 1.5rem 3rem; text-align: center; }

/* Big "welcome!" heading */
.hero-title {
  font-family   : var(--font-title);
  font-size     : clamp(3rem, 9vw, 6.2rem);
  color         : var(--c-accent);
  display       : inline-block;
  transform     : rotate(-1.5deg);
  margin-bottom : 1rem;
}

/* Subtitle: "the quick brown fox..." line */
.hero-sub {
  font-size  : clamp(.95rem,2.5vw,1.15rem);
  color      : rgba(33, 18, 18, .65);
  max-width  : 480px;
  margin     : 0 auto 2rem;
}

/* ========== FOOTER (bottom strip) ========== */
.site-footer {
  background  : var(--c-ink);
  color       : var(--c-bg);
  text-align  : center;
  padding     : 1.2rem 1rem;
  font-size   : .82rem;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */
/* Tablet and small laptops */
@media (max-width: 1024px) {
  :root {
    --nav-h: 60px;
    --page-pad: 1.25rem;
  }

  .hero {
    padding: 4.5rem 1.25rem 2.75rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --nav-h: 56px;
    --page-pad: 1rem;
  }

  .site-title,
  .nav-note {
    font-size: clamp(.95rem, 4.5vw, 1.15rem);
  }

  .hero {
    padding: 3.5rem 1rem 2rem;
  }

  .hero-title {
    transform: none;
  }

  .hero-sub {
    max-width: 34ch;
    margin-bottom: 1.5rem;
  }

  .site-footer {
    font-size: .9rem;
    padding: 1rem;
  }
}

/* Very small phones */
@media (max-width: 420px) {
  .nav-note {
    letter-spacing: .04em;
  }

  .hero {
    padding-top: 3rem;
  }

  .hero-title {
    font-size: clamp(2rem, 11vw, 2.9rem);
  }
}