/* ============================================================
   home.css  ·  page-specific styles for index.html
   ------------------------------------------------------------
   Styles that ONLY the homepage uses (the intro overlay, project
   rows, etc.). Shared styling comes from tokens/base/site.

   Link after tokens.css, site.css, base.css.
   ============================================================ */

/* index runs darker-mode text a shade lower than the other
   site pages, so it layers three more overrides on site.css */
[data-theme="dark"] {
  --color-text-secondary: rgba(252, 252, 252, 0.60);
  --color-text-muted:     rgba(252, 252, 252, 0.40);
  --color-border-hairline: rgba(252, 252, 252, 0.10);
}



/* ============================================================
   DESIGN TOKENS — LIGHT MODE
   ============================================================ */


/* ============================================================
   DESIGN TOKENS — DARK MODE
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}


#page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


.page { flex: 1; position: relative; }


/* ============================================================
   PAGE
   ============================================================ */
.page { padding: 80px 48px; }


.page-eyebrow { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 12px; }

.page-heading { font-family: 'Instrument Serif', serif; font-size: 34px; color: var(--color-text-primary); line-height: 1.1; margin-bottom: 8px; letter-spacing: 0.01em; }

.page-sub { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 16px; color: var(--color-text-secondary); margin-bottom: 64px; }


/* ============================================================
   HERO
   ------------------------------------------------------------
   Fills roughly the first viewport (100dvh minus the sticky nav
   and the .page top padding). Name/subhead and the scroll cue
   both sit at the bottom of that opening beat.
   ============================================================ */
.hero {
  --hero-top-pad: 80px;
  min-height: calc(100dvh - 60px - var(--hero-top-pad));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

/* Ambient watercolor blobs (same flower-path motion as the intro overlay)
   drifting behind the name/subhead, in the site's accent colors. Positioned
   against .page (not .hero), pulled up by the nav's own height so it starts
   behind the nav bar rather than stopping at its bottom edge (the nav's
   background is made transparent below so the colors actually show through).
   Sits behind the hero text via z-index, so it never affects legibility. */
.hero-blobs {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 100dvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: multiply;
  filter: saturate(2.3);
  /* Explicit vh-based radii, not farthest-side: farthest-side matches the
     box's own (very wide) aspect ratio, which made the whole field read as
     a flat "egg" rather than a rounded cluster. Sizing both axes off the
     viewport height instead keeps the shape closer to circular regardless
     of how wide the hero is, while still fading to transparent well
     inside the box edge so overflow:hidden never cuts it off. */
  mask-image: radial-gradient(ellipse 82vh 60vh at center, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 82vh 60vh at center, black 30%, transparent 100%);
}

[data-theme="dark"] .hero-blobs { opacity: 1; mix-blend-mode: screen; filter: saturate(2.6) contrast(1.1); }

/* Let the hero blobs bleed through the nav bar instead of being hidden
   behind its solid background. Only the nav is affected here (home.css is
   index-only), and it still sits above the blobs via z-index so its own
   links/logo stay crisp. */
.site-nav { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .hero-blobs { display: none; }
}

.hero-intro .page-sub { margin-bottom: 0; }


/* SCROLL INDICATOR */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 32px;
}

.scroll-label {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}


/* ============================================================
   SECTION LABEL
   ============================================================ */
.section-label {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin: 56px 0 0;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--color-border-hairline);
}


/* ============================================================
   PROJECT LIST
   ============================================================ */
.project-list { border-top: 0.5px solid var(--color-border-hairline); }


.project-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  padding: 32px 16px;
  border-bottom: 0.5px solid var(--color-border-hairline);
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}


.project-row:hover { background: rgba(87, 184, 232, 0.06); }


.project-num { font-family: 'Instrument Serif', serif; font-size: 20px; color: var(--color-text-muted); padding-top: 2px; }


.project-body { display: flex; flex-direction: column; gap: 8px; }


.project-title-row { display: flex; align-items: baseline; gap: 10px; }


.project-name { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 18px; color: var(--color-text-primary); }

.project-pipe { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 18px; color: var(--color-border-hairline); }

.project-org  { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 18px; color: var(--color-text-primary); }


.project-desc { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 15px; color: var(--color-text-secondary); line-height: 1.6; }


.project-tags { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

.tag { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); padding: 3px 8px; border-radius: 4px; border: 0.5px solid var(--color-border-hairline); }


/* INTRO OVERLAY */
@font-face { font-family: 'Aretha Bridge'; src: url('../assets/fonts/Aretha Bridge.otf') format('opentype'); }

html.intro-active, html.intro-active body { overflow: hidden; }

#intro-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1000;
  background: #14172A;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

#intro-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 2;
}

#intro-content { position: relative; z-index: 3; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }

#intro-name { display: block; font-family: 'Aretha Bridge', 'Instrument Serif', serif; font-size: clamp(36px, 5vw, 72px); color: #f5f5f0; line-height: 1; letter-spacing: 0.01em; }

#intro-sub { display: block; font-family: 'Instrument Sans', sans-serif; font-size: 13px; font-weight: 400; color: rgba(245,245,240,0.38); margin-top: 18px; letter-spacing: 0.08em; }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  border-top: 0.5px solid var(--color-border-hairline);
  margin-top: 40px;
}

.footer-copy {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px;
  color: var(--color-text-muted);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-link {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-link:hover { color: var(--color-text-primary); }


/* Tablet */
@media (max-width: 960px) {
  .site-nav { padding: 0 32px; }
  .page { padding: 60px 32px 64px; }
  .hero { --hero-top-pad: 60px; }
}


/* Mobile */
@media (max-width: 640px) {
  .site-nav { padding: 0 20px; }
  .nav-link, .nav-divider { display: none; }
  .page { padding: 48px 20px 64px; }
  .hero { --hero-top-pad: 48px; }
  .page-heading { font-size: 26px; }
  .project-row { grid-template-columns: 40px 1fr; padding: 20px 8px; }
  .project-name, .project-org { font-size: 15px; }
  .project-desc { font-size: 14px; }
  .site-footer { padding: 20px; align-items: center; }
}


#page-wrap { opacity: 0; }