/* ==========================================================================
   Damon Eckhoff — Portfolio Stylesheet
   --------------------------------------------------------------------------
   Organised top-to-bottom in the order the browser needs them:

     1. Design tokens (CSS custom properties — edit these to re-skin the site)
     2. Reset + base typography
     3. Layout primitives (container, section, section-title)
     4. Floating hamburger nav + slide-out panel
     5. Components (hero, about, quote, work, why, contact, footer)
     6. Utilities (parallax, reveal, back-to-top, lightbox)

   Responsive tweaks live in responsive.css.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   The whole visual system is driven by these custom properties. Change one
   value here and the entire site updates.
   ========================================================================== */
:root {
  /* Colors — warm grayscale palette pulled directly from the original theme.
     --color-text is #525252 (nudged darker from the original's #6d6d6d) so
     body copy passes WCAG AAA (7:1 contrast) on both #f5f5f5 and #fff
     backgrounds. Visually the shift is tiny — still reads as "warm gray". */
  --color-bg:          #f5f5f5;          /* page background */
  --color-surface:     #ffffff;          /* card backgrounds */
  --color-text:        #525252;          /* body copy — AAA on bg and surface */
  --color-heading:     #373432;          /* headings — warm near-black */
  --color-muted:       #999999;          /* secondary text */
  --color-accent:      #373432;          /* section-title underline */
  --color-border:      #e3e3e3;          /* work card borders */
  --color-overlay:     rgba(0, 0, 0, 0.8); /* darkening over parallax images (matches original's 0.8 opacity) */
  --color-dark:        #222222;          /* dark panels (nav, footer) */
  --color-invert:      #ffffff;          /* text on dark sections */

  /* Type — matches what the original theme loaded from Google Fonts */
  --font-body:      "Open Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-heading:   "Montserrat", "Open Sans", sans-serif;
  --font-script:    "Pacifico", cursive; /* used for the signature "Damon Eckhoff" */

  /* Fluid type — scales smoothly between phone and desktop.
     Body stays at 16px (matches original exactly). Large display text (hero
     signature, section headings, tagline) is fluid with clamp() so it looks
     right from 320px phones to 1440px desktops. */
  --fs-body:        16px;                                  /* original body = 16px flat */
  --fs-section:     clamp(2.2rem, 1.2rem + 4vw, 3.75rem);  /* ABOUT / WORK / CONTACT big titles = 60px desktop */
  --fs-sig:         clamp(2.4rem, 1.5rem + 3vw, 3.75rem);  /* "Damon Eckhoff" Pacifico signature */
  --fs-tagline:     clamp(1.05rem, 0.8rem + 1.2vw, 1.875rem); /* tagline under signature = 30px desktop */
  --fs-h3:          clamp(1.2rem, 1rem + 0.6vw, 1.5rem);   /* "Who am I?", card titles = 24px desktop */
  --fs-lead:        clamp(1rem, 0.9rem + 0.4vw, 1.25rem);  /* section description text = 20px desktop */

  /* Spacing scale (use multiples of this for consistent rhythm) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  1rem;
  --space-4:  1.5rem;
  --space-5:  2rem;
  --space-6:  3rem;
  --space-7:  5rem;

  /* Layout */
  --container-max: 1140px;
  --radius:        0px;        /* original theme was square-cornered */

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-med:  300ms ease;
}


/* ==========================================================================
   2. RESET + BASE TYPOGRAPHY
   Small, opinionated reset.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;                          /* the original uses light body text */
  line-height: 1.55;                         /* matches original's ~25px/16px */
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                        /* never allow sideways scroll */
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-heading); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: #000; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  font-weight: 400;
}
p { margin: 0 0 var(--space-3); }

/* Keyboard focus outline — visible only when navigating by keyboard */
:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 3px;
}


/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

/* Centers content at a readable width, with side padding */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  width: 100%;
}

/* Standard vertical rhythm for content sections */
.section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

/* Section title: "About", "Work", "Contact", "Why me?" etc.
   LEFT-aligned (matches original). Big Montserrat 60px with tight -5px
   tracking, then a 100×10px gray bar, then (optional) description paragraph. */
.section-title {
  text-align: left;
  margin-bottom: var(--space-6);
}
.section-title h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-section);
  text-transform: uppercase;
  letter-spacing: -0.08em;                   /* signature tight tracking (-5px on 60px = -0.083em) */
  color: var(--color-heading);
  line-height: 0.85;
  margin: 0 0 var(--space-3);
}
.section-title__border {
  display: block;
  width: 100px;                              /* matches original */
  height: 10px;                              /* matches original */
  background: var(--color-muted);            /* #999999 — medium gray */
  margin: var(--space-4) 0;
}
.section-title__desc {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-lead);                 /* 20px at desktop */
  line-height: 1.5;
}
.section-title--light h2                      { color: var(--color-invert); }
.section-title--light .section-title__border  { background: var(--color-invert); }   /* pure white */
.section-title--light .section-title__desc    { color: var(--color-invert); }        /* pure white */


/* ==========================================================================
   4. FLOATING HAMBURGER NAV
   A circular button in the top-left corner. Click → slide-out nav panel
   appears from the left. Works at every viewport size — no desktop "top bar".
   ========================================================================== */
.nav-toggle {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
  transition: background var(--transition-fast);
}
.nav-toggle:hover { background: #fff; }
.nav-toggle__bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-heading);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Slide-out panel */
.site-nav {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(320px, 85vw);
  background: var(--color-dark);
  color: var(--color-invert);
  padding: var(--space-7) var(--space-4) var(--space-4);
  transform: translateX(-100%);
  transition: transform var(--transition-med);
  z-index: 150;
  overflow-y: auto;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);
}
.site-nav.is-open { transform: translateX(0); }
.site-nav[hidden] { display: block; }        /* keep in DOM — we use transform, not hide */

.site-nav__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.site-nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-nav__link {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-invert);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 44px;                           /* iOS tap-target minimum */
}
.site-nav__link:hover { color: #bbb; }

.site-nav__social {
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-invert);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.site-nav__social:hover { color: #bbb; }

/* Backdrop behind the panel — dims the page and closes nav when clicked */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 140;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-med);
}
.nav-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.nav-backdrop[hidden] { display: block; }


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* -----------------------------
   5.1 Hero — full-viewport parallax with big avatar + signature
   ----------------------------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;                        /* accounts for mobile URL bar */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-invert);
  position: relative;
  background-size: cover;
  background-position: center;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
}
.hero__inner {
  position: relative;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__avatar {
  /* Matches the original theme:
     • 16px translucent-white INSET ring (frosted-glass inner border)
     • background-position: 0% 0% (top-left anchor) — this is what keeps the
       face high in the frame with headroom above. `center` crops too low. */
  width: clamp(180px, 26vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  margin-bottom: var(--space-4);
  background-size: cover;
  background-position: 0% 0%;
  box-shadow:
    inset 0 0 0 16px rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.1);
}
.hero__name {
  font-family: var(--font-script);
  font-size: var(--fs-sig);
  font-weight: 400;
  color: var(--color-invert);
  margin: 0 0 var(--space-3);
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  padding-bottom: 0.1em;                     /* Pacifico descenders */
}
.hero__tagline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-tagline);
  color: var(--color-invert);
  line-height: 1.35;
  max-width: 720px;
  margin: 0 0 var(--space-5);
  opacity: 0.97;
}
.hero__chevron {
  display: inline-flex;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--color-invert);
  align-items: center;
  justify-content: center;
  animation: chevron-bob 2s ease-in-out infinite;
}
.hero__chevron:hover { color: var(--color-invert); opacity: 0.8; }
@keyframes chevron-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}


/* -----------------------------
   5.2 About — two-column grid: photo + copy. Stacks on mobile.
   Photo fills its column (~360px on desktop) and is aligned flush-left
   with the section title above it. No auto margins on the <figure>.
   ----------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 2fr;
  gap: var(--space-5);
  align-items: start;
}
.about__photo {
  margin: 0;
}
.about__photo img {
  border-radius: var(--radius);
  cursor: zoom-in;
  width: 100%;                               /* fill the column */
  max-width: 400px;                          /* but don't get absurdly large */
  height: auto;
}
.about__copy h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  color: var(--color-heading);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}
.about__copy h3:first-child { margin-top: 0; }
.about__copy p {
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

/* Inline emphasis in About body copy:
   • <strong> — used for key phrases like "Product Design Leader" —
     rendered bold in a DARKER color so it pops off the lighter body text.
   • <b>      — used for inline labels like "Simplifying Complexity:" —
     stays the same body color, just bolded. This mirrors the original. */
.about__copy strong {
  font-weight: 700;
  color: #1c1c1c;
}
.about__copy b {
  font-weight: 700;
  color: inherit;
}


/* -----------------------------
   5.3 Quote — big italic Montserrat line on dark parallax band
   ----------------------------- */
.quote {
  position: relative;
  color: var(--color-invert);
  background-size: cover;
  background-position: center;
}
.quote__overlay {
  background: var(--color-overlay);
  padding: var(--space-7) 0;
}
.quote__text {
  margin: 0;
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.quote__text p {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1rem + 1.6vw, 2rem);
  line-height: 1.4;
  font-weight: 400;
  font-style: normal;                         /* user preference — no italic */
  margin: 0 0 var(--space-4);
  color: var(--color-invert);
}
.quote__author {
  font-family: var(--font-body);
  color: var(--color-invert);
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  text-transform: uppercase;
  opacity: 0.8;
}


/* -----------------------------
   5.4 Work — 3-col bordered cards (title above image above description)
   ----------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.work-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.work-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}
.work-card a { display: block; margin-bottom: var(--space-3); }
.work-card img {
  width: 100%;
  cursor: zoom-in;
}
.work-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text);
}


/* -----------------------------
   5.5 "Why me?" — pillars stacked vertically, left-aligned, on dark parallax
   ----------------------------- */
.why {
  position: relative;
  color: var(--color-invert);
  background-size: cover;
  background-position: center;
}
.why__overlay {
  background: var(--color-overlay);
  padding: var(--space-7) 0;
}

.why__list {
  /* LEFT-aligned content, flush with the "WHY ME?" title above it.
     No auto-centering, no max-width — it follows the container edges. */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                       /* tighter pillar rhythm, matches original */
}
.why__pillar h3 {
  font-family: var(--font-heading);
  /* Original spec is 400, but at 30px Montserrat renders visually thin on
     dark backgrounds — bump to 500 (medium) so headings read clearly. */
  font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1vw, 1.875rem);  /* 30px at desktop */
  line-height: 1.1;
  color: var(--color-invert);
  margin: 0 0 var(--space-2);
  text-align: left;
}
.why__pillar p {
  /* Pure white. Weight 400 (not 300) so thin strokes don't read as gray
     against the dark overlay — keeps AAA-level perceived contrast. */
  color: var(--color-invert);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.56;                         /* 25px / 16px — matches original */
  margin: 0;
  text-align: left;
  max-width: 720px;                          /* readable measure, still left-aligned */
}


/* -----------------------------
   5.6 Contact — 3-col layout like the original: circular Portland photo
   on the LEFT, email/LinkedIn buttons in the middle column. Left-aligned,
   flush with the section title above.
   ----------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: center;
}
.contact__photo {
  margin: 0;
}
.contact__photo img {
  /* SQUARE — matches the original (no border-radius). */
  border-radius: 0;
  width: 100%;
  max-width: 300px;                          /* matches the original's 300×300 */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.contact__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;                   /* left-align the column */
}

/* Generic button — dark pill style, matches the original's `.btn-lg.btn-link`.
   Both Email and LinkedIn use the SAME width so they line up visually. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;                   /* center the label inside the button */
  text-align: center;
  width: 180px;                              /* fixed width so both buttons match */
  padding: 10px 16px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.33;
  color: var(--color-invert);
  background: var(--color-dark);             /* #222 — matches original */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;                        /* matches original's rounded corners */
  text-decoration: none;
  min-height: 44px;                           /* iOS tap-target minimum */
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn:hover {
  color: var(--color-invert);
  background: #000;
  transform: translateY(-1px);
}


/* -----------------------------
   5.7 Footer
   ----------------------------- */
.site-footer {
  padding: var(--space-5) 0;
  background: var(--color-dark);
  text-align: center;
  /* 0.7 alpha composites to ~rgb(189,189,189) on #222, giving ~8.8:1 —
     well into AAA. 0.55 only gave ~5.8:1 (AA but not AAA). */
  color: rgba(255, 255, 255, 0.7);
}
.site-footer__copy {
  margin: 0;
  font-size: 0.85rem;
}


/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

/* Parallax — background-attachment:fixed for cheap, performant parallax.
   iOS doesn't support fixed attachment so we gracefully fall back to scroll. */
.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
@media (hover: none) and (pointer: coarse) {
  .parallax { background-attachment: scroll; }
}

/* Reveal-on-scroll — JS flips .is-visible as sections enter the viewport.
   IMPORTANT: content is ALWAYS visible (no opacity fade) so a broken observer
   or a pre-rendered screenshot can never trap content at opacity:0. We only
   animate a subtle translateY offset on sections still below the fold. */
.reveal {
  transform: translateY(18px);
  transition: transform 600ms ease;
}
.reveal.is-visible {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible, .hero__chevron {
    animation: none; transition: none; transform: none;
  }
  html { scroll-behavior: auto; }
}

/* Back-to-top floating button */
.back-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-heading);
  color: var(--color-invert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  z-index: 90;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.back-to-top:hover { color: var(--color-invert); transform: translateY(-2px); }
.back-to-top[hidden] { display: none; }


/* -----------------------------
   Lightbox — native <dialog> gets us Esc-to-close for free.
   ----------------------------- */
.lightbox {
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.92);
  color: var(--color-invert);
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
.lightbox__figure {
  margin: 0;
  max-width: 95vw;
  max-height: 90vh;
  text-align: center;
}
.lightbox__img {
  max-width: 95vw;
  max-height: 80vh;
  width: auto; height: auto;
  margin: 0 auto;
}
.lightbox__caption {
  margin-top: var(--space-3);
  font-size: 0.9rem;
  opacity: 0.8;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  color: var(--color-invert);
  border: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close      { top: var(--space-3); right: var(--space-3); transform: none; font-size: 1.5rem; }
.lightbox__nav--prev  { left: var(--space-3); }
.lightbox__nav--next  { right: var(--space-3); }
.lightbox__close:hover,
.lightbox__nav:hover  { background: rgba(255,255,255,0.2); }