:root{
  --bg: #0b0b10;
  --text: #0f1020;
  --muted: #616176;
  --brand: #b996ff;
  --paper: #fff6f8;
  --ink: #0b1220;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:#f7f7fb;
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}
.container{ width:min(1100px,92vw); margin-inline:auto; }

.site-header{
  position: relative;       /* change to sticky if you want it pinned */
  z-index: 1000;
  background: #ffffff;
  overflow: visible;
  min-height: 60px;
}
.header-inner{ padding: 1rem 0 0; }

.nav{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}
.nav__brand{
  font-weight: 800;
  text-decoration: none;
  color: #1a1039;
  letter-spacing: .4px;
}
.nav__toggle{
  display: none;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  position: relative; z-index: 1100;
}
.nav__links{
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  z-index: 1100;
}
.nav__links a{
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 999px;
  color: #1a1039;
  font-weight: 600;
}
.nav__links a:hover{ background: #d3bfff; }

/* Mobile menu */
@media (max-width: 640px){
  .nav{ grid-template-columns: 1fr auto; }
  .nav__toggle{ display: inline-block; }
  .nav__links{
    position: absolute;
    inset: 56px 0 auto 0;
    z-index: 1100;
    padding: .75rem .75rem 1rem;
    background: var(--brand);
    display: grid;
    gap: .5rem;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: .2s ease;
  }
  .nav__links.open{
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }
}


/* Title */
.title{ background:#fff; }
.title h1{
  margin:0; padding: clamp(1.6rem, 5vw, 2.4rem) 0 0.8rem;
  text-align:center; font-weight:800; font-size: clamp(2rem, 4.4vw, 3rem);
}

/* Main */
.section{ background:#fff; padding: 0 0 2.4rem; }

.about-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:32px; align-items:start;
  padding: 0 0 1rem;
}

/* Portrait block with purple “bar” */
.portrait{
  margin:0; position:relative; isolation:isolate;
  border-left:10px solid var(--accent);
  padding-left:16px;
}
.portrait img{
  width:100%; display:block; background:#e5e5ea;
  border-radius:4px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

/* Big stacked words */
.big-words,
#aboutBio {
  max-width: min(1100px, 92vw); /* same as .container */
  margin: 0 auto 1.5rem;        /* center and space below */
  padding: 0 1rem;              /* same padding as container */
}

.big-words {
  font-weight: 800;
  line-height: 1.2;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  text-align: center;           /* matches site style */
}

.big-words span {
  display: inline;               /* let text wrap naturally */
}


/* Emojis + paragraph */
.emoji-row{ text-align:center; font-size:2rem; margin: .5rem 0 .25rem; }
.lede{
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  max-width: 68ch; margin: .2rem auto 1rem;
  padding: 0 4px;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* full fraction columns */
  gap: 6px;                               /* small gap between images */
  padding-bottom: 2rem;
  max-width: 800px;   /* matches your .container max */
  margin-inline: auto; /* center it */
}

.gallery__img {
  width: 100%;                            /* fill grid cell */
  aspect-ratio: 1/1;                      /* perfect square */
  object-fit: cover;                      /* crop to fill */
  border-radius: 6px;
  background: #e7e7ee;
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
}

/* Footer */
.site-footer{ background:#fff; }
.footer-inner{ padding: 1rem 0 2rem; }
.divider{ height:1px; background:#e9e9f2; margin:.5rem 0 1.2rem; }
.socials{ display:flex; gap:18px; justify-content:center; }
.icon{ color:#0f1020; opacity:.85; }
.icon:hover{ opacity:1; }

/* Accessibility helper */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Responsive */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
  .big-words{ order: -1; } /* put headline above portrait on small screens */
}
@media (max-width: 640px){
  .nav{ grid-template-columns: 1fr auto; }
  .nav__toggle{ display:inline-block; }
  .nav__links{
    position:absolute; inset:56px 0 auto 0;
    background:#fff; border-bottom:1px solid #ececf4;
    display:grid; gap:.25rem; padding:.5rem .75rem 1rem;
    transform: scaleY(0); transform-origin: top; opacity:0; pointer-events:none; transition:.2s;
  }
  .nav__links.open{ transform: scaleY(1); opacity:1; pointer-events:auto; }
}

.btn--ghost { border: 2px solid #141414; padding: .35rem .7rem; border-radius: 10px; }

/* Bio container — cohesive with site spacing & type */
#aboutBio{
  width: min(760px, 92vw);   /* same feel as .container content blocks */
  margin: 1.25rem auto 2rem; /* consistent vertical rhythm */
  padding: 0;                /* let container edges handle gutters */
  color: var(--ink);         /* unify with site text color */
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.75;
  text-wrap: pretty;         /* nicer wrapping on modern browsers */
  hyphens: auto;
}

#aboutBio .lede{
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 400;
  margin: .5rem 0 1.25rem;
}

#aboutBio p{
  margin: 0 0 1.15rem;
}
#aboutBio p:last-child{
  margin-bottom: 0;
}

/* Optional: keep the emoji row snug with the bio */
.emoji-row{
  margin: 1rem 0 .25rem;
}

.portrait {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically if there's extra height */
}

.portrait img {
  width: 70%;
  aspect-ratio: 1 / 1;     /* keeps it square */
  object-fit: cover;       /* fills square without distortion */
  background: #e5e5ea;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}