/* Hello Stella — static site styles */
:root {
  --orange: #ffa175;
  --brown: #260e07;
  --cream: #f5f3e6;
  --maroon: #5a0e0b;
  --text: #260e07;
  --muted: #5b463f;
  --sans: "Open Sans", Arial, sans-serif;
  --display: "Rubik", "Open Sans", Arial, sans-serif;
  --serif: "p22-mackinac-pro", Georgia, "Times New Roman", serif;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15px/1.7 var(--sans); color: var(--text); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 14px; background: var(--brown); color: var(--orange); border-radius: 4px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }

.container { width: min(1080px, 100% - 32px); margin-inline: auto; }
.section { padding: 100px 0; }
.serif { font-family: var(--serif); font-weight: 700; }
.light { font-family: var(--display); font-weight: 300; }

/* Header + fullscreen menu */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .3s, box-shadow .3s; }
.site-header.is-scrolled { background: var(--orange); box-shadow: 0 1px 0 rgba(38, 14, 7, .08); }
.header-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); width: min(1240px, 100% - 32px); margin-inline: auto; }
.brand img { width: 150px; height: auto; }
.nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: none; color: var(--brown); cursor: pointer; }
.nav-toggle svg path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .3s, opacity .2s; transform-origin: 12px 12px; }
.nav-open .nav-toggle { color: var(--orange); }
.nav-open .bar-top { transform: translateY(5px) rotate(45deg); }
.nav-open .bar-mid { opacity: 0; }
.nav-open .bar-bot { transform: translateY(-5px) rotate(-45deg); }
.nav-open .brand img { filter: brightness(0) saturate(100%) invert(76%) sepia(30%) saturate(1200%) hue-rotate(320deg) brightness(102%); }

.site-nav { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; background: var(--brown); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.nav-open .site-nav { opacity: 1; visibility: visible; }
.site-nav ul { text-align: center; }
.site-nav a { display: inline-block; padding: 10px 16px; color: var(--orange); font: 600 24px/1.4 var(--sans); text-decoration: none; text-transform: uppercase; letter-spacing: .04em; }
.site-nav a:hover { color: var(--cream); }
body.nav-open { overflow: hidden; }

/* Hero */
.hero { display: grid; place-items: center; min-height: min(100svh, 860px); padding: calc(var(--header-h) + 40px) 16px 120px; background: var(--orange) url("/assets/img/hero-bg-2560.webp") center / cover no-repeat; }
.hello-stack { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--brown); font-weight: 400; text-align: center; }
.hello-line { display: block; opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards; }
.hello-line:nth-child(2) { animation-delay: .15s; }
.hello-line:nth-child(3) { animation-delay: .3s; }
.hello-line:nth-child(4) { animation-delay: .45s; }
.hello { font: 300 clamp(26px, 3.4vw, 40px)/1.2 var(--display); }
.hello-line .serif { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.2; }
.is-stella { color: var(--maroon); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Who we are (dark) */
.section-dark { background: var(--brown); color: var(--cream); }
.intro-grid { display: grid; gap: 40px; }
.intro-head { color: var(--orange); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.4; font-weight: 400; }
.intro-head .serif { font-size: 1.1em; }
.intro-sub { display: block; margin-top: 8px; }
.intro-body { display: grid; gap: 18px; font-size: 16px; }
.intro-body strong { color: var(--orange); }
.definition { margin-top: 64px; padding: 30px 40px; border: 3px double rgba(245, 243, 230, .2); font-weight: 300; font-style: italic; font-size: 16px; }
.definition-term { color: var(--orange); font-style: normal; font-size: 22px; margin-bottom: 8px; }
.definition-say { font-family: var(--sans); font-weight: 400; font-size: 16px; }
.definition-num { font-style: normal; font-weight: 600; margin-right: 4px; }

/* Built for */
.section-light { padding-top: 120px; }
.section-head { color: var(--brown); font-size: clamp(28px, 3vw, 38px); line-height: 1.3; font-weight: 400; }
#built-for .section-head { text-align: center; margin-bottom: 56px; }
.focus-grid { display: grid; gap: 40px 32px; }
.focus-grid li { text-align: center; }
.focus-grid h3 { min-height: 4.2em; margin-bottom: 10px; color: var(--orange); font: 700 18px/1.4 var(--sans); filter: brightness(.82); }
.focus-grid p { color: var(--brown); font-size: 14px; line-height: 1.7; }

/* About Shannon */
.section-cream { background: var(--cream); padding: 120px 0 100px; overflow: hidden; }
.bio-grid { display: grid; gap: 48px; width: min(1240px, 100% - 32px); margin-inline: auto; }
.bio-photo { margin: 0; }
.bio-photo[data-reveal] { opacity: 0; transform: translateX(-60px); transition: opacity .9s, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.bio-photo.is-visible { opacity: 1; transform: none; }
.bio-text { display: grid; gap: 14px; align-content: start; max-width: 560px; }
.bio-role { margin: -6px 0 10px; color: var(--maroon); font-weight: 600; font-size: 16px; }

/* Gallery */
.section-orange { background: var(--orange); padding: 120px 0; }
.gallery { display: grid; gap: 32px; }
.gallery-item { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery-item img { opacity: .4; transition: opacity .4s; }
.gallery-item:hover img, .gallery-item:focus-visible img { opacity: .95; }

.lightbox { max-width: min(92vw, 960px); padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(38, 14, 7, .9); }
.lightbox img { max-height: 86vh; width: auto; }
.lightbox-close { position: absolute; top: -48px; right: -6px; width: 44px; height: 44px; border: 0; background: none; color: var(--cream); cursor: pointer; }
.lightbox-close path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Contact + footer */
.contact { padding: 160px 0 40px; text-align: center; }
.contact-logo { width: min(252px, 54%); margin: 0 auto 24px; }
.contact-head { color: var(--orange); font: 600 24px/1.4 var(--sans); margin-bottom: 10px; }
.contact-email { font-size: 18px; margin-bottom: 24px; overflow-wrap: anywhere; }
.contact-email a { text-decoration: none; }
.contact-email a:hover { color: var(--orange); }
.social { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 3px; background: var(--orange); color: var(--brown); transition: transform .2s; }
.social svg { fill: currentColor; }
.social:hover { transform: translateY(-2px); }
/* Swirl image is 2560x548; never narrower than 900px so the loops stay visible on phones */
.site-footer { --swirl-w: max(100vw, 900px); height: calc(var(--swirl-w) * 548 / 2560); background: var(--brown) url("/assets/img/footer-swirl-2560.webp") right top / var(--swirl-w) auto no-repeat; }

/* Breakpoints */
@media (min-width: 700px) {
  .focus-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 699px) {
  .gallery { width: min(320px, 70%); }
  .section { padding: 80px 0; }
  .definition { padding: 24px; }
  .hello-line .hello { display: block; }
  .bio-text { text-align: center; }
  .bio-text .section-head { text-align: center; }
}
@media (min-width: 900px) {
  .intro-grid { grid-template-columns: 2fr 3fr; gap: 64px; }
  .focus-grid { grid-template-columns: repeat(4, 1fr); }
  .bio-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
  .bio-text { padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hello-line, .bio-photo[data-reveal] { animation: none; opacity: 1; transform: none; transition: none; }
}