/* ============================================================
   GRCE PROJECTS — STYLE.CSS
   ------------------------------------------------------------
   Foundation: tokens, typography, base, fixed shell.
   Section layout and loader come next.
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  --bg:        #f7f7f7;
  --ink:       #2e2e2e;
  --grey:      #d9d9d9;

  --font:      'Spectral', Georgia, 'Times New Roman', serif;

  /* Type sizes — desktop */
  --t-hero:    14px;   /* matches logo size exactly */
  --t-body:    13px;
  --t-nav:     13px;
  --t-logo:    14px;
  --t-cta:     13px;   /* matches nav per design direction */
  --t-footer:  8px;

  /* Layout spacing */
  --pad-x:     48px;
  --pad-y:     32px;
  --gap:       32px;   /* matches --pad-y so top/bottom/image-to-strip margins are all equal */

  /* Image band height — bottom strip is compact (300px reserved), so the
     image takes ~70-75vh on common viewports and the hero block reads as
     a proportional footer strip, not a tall section. */
  --image-h:   calc(100vh - 300px);

  /* Track widths (desktop horizontal scroll) */
  --section-w:    74vw;   /* sections 1-4 */
  --section-w-why: 100vw; /* section 5 (image + second image side by side) */

  /* Bottom-strip column widths — cascade so a single change moves everything.
     hero-end -> nav-end -> mask-w -> copy-left -> copy-w, all derived.
     Hero width matches body's max-width (22em ≈ 286px) so the signature
     and body share the same visual right edge. */
  --hero-w:    286px;
  --hero-gap:  clamp(40px, 5vw, 64px);   /* horizontal gap from hero block to nav */
  --nav-w:     140px;                     /* visual width reserved for nav column */
  --hero-end:  calc(var(--pad-x) + var(--hero-w));
  --nav-end:   calc(var(--hero-end) + var(--hero-gap) + var(--nav-w));
  --copy-left: calc(var(--nav-end) + 80px);
  /* Mask reaches all the way to where the copy starts, so as the copy
     slides leftward it begins fading immediately and is fully invisible
     well before reaching the hero block. */
  --mask-w:    var(--copy-left);
  /* Section copy width: capped at 380px but never wider than the section's
     photo above it (74vw is the narrowest section width). Identical width
     on every section, identical left edge. */
  --copy-w:    min(380px, calc(74vw - var(--copy-left)));
}

@media (max-width: 767px) {
  :root {
    --t-hero:   13px;
    --t-body:   10px;
    --t-nav:    10px;
    --t-logo:   13px;
    --t-cta:    10px;
    --t-footer: 8px;
    --pad-x:    24px;
    --pad-y:    20px;
  }
}

/* Mobile-only blocks are hidden by default; the mobile media query at
   the bottom of this file reveals them and hides the desktop sidebar. */
.mobile-stage,
.mobile-footer { display: none; }

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* No body overflow lock — content must remain scrollable at every breakpoint.
   Vertical scrolling is delegated to .scroll where horizontal scroll lives. */

img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

p { margin: 0 0 1em 0; }
p:last-child { margin-bottom: 0; }

h1 { font-size: inherit; font-weight: inherit; margin: 0; }

/* ============================================================
   LOADER — true SVG stroke-draw, then crossfade to final PNG, then fade out.
   Phase 1 (~1800ms): SVG paths draw via stroke-dashoffset 0
   Phase 2 (~500ms):  SVG fades out, PNG (Grace-black/rest-grey) fades in
   Phase 3 (~400ms):  hold
   Phase 4 (~600ms):  loader fades out, site appears beneath
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  background: #f7f7f7;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 1500ms ease-out;
}

.loader__signature {
  position: relative;
  width: 300px;
  max-width: 90vw;
  aspect-ratio: 10 / 3;   /* matches signature SVG viewBox 750x225 */
}

@media (max-width: 767px) {
  .loader__signature { width: 150px; }
}

.loader__sig-svg,
.loader__sig-png {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 500ms ease-out;
}

/* SVG renders with its filled letters as-is. Reveal is done by an
   animated clip-path on the container that wipes left-to-right. */
.loader__sig-svg {
  opacity: 1;
  clip-path: inset(0 100% 0 0);              /* start fully hidden */
  animation: sig-reveal 1500ms ease-out forwards;
  transition: opacity 500ms ease-out;        /* used for the crossfade-out */
}
.loader__sig-png  { opacity: 0; object-fit: contain; transition: opacity 500ms ease-out; }

/* Inside the injected SVG: hide the white background rects so the page
   bg shows through; let the letters render as their normal filled glyphs. */
.loader__sig-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.loader__sig-svg svg rect[fill="#ffffff"] { fill: none; }

@keyframes sig-reveal {
  from { clip-path: inset(0 100% 0 0); }     /* clipped to zero width on the right */
  to   { clip-path: inset(0 0 0 0); }        /* fully revealed */
}

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

/* ---------- TOP LOGO (fixed) ---------- */
.site-logo {
  position: fixed;
  top: var(--pad-y);
  left: var(--pad-x);
  z-index: 30;
  font-size: var(--t-logo);
  font-weight: 300;
  letter-spacing: 0.01em;
}
.site-logo__grce     { font-style: normal; }
.site-logo__projects { font-style: italic; }

/* ============================================================
   HORIZONTAL SCROLL TRACK (desktop)
   ============================================================ */
.scroll {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: auto;          /* never hide vertical overflow — let it scroll */
  scroll-behavior: smooth;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Flex children flow horizontally */
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}
.scroll::-webkit-scrollbar { display: none; }

/* ---------- SECTION ---------- */
.section {
  position: relative;
  flex: 0 0 var(--section-w);
  width: var(--section-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.section--why {
  flex-basis: var(--section-w-why);
  width: var(--section-w-why);
}

/* Image band — fills the top of each section, edge to edge */
.section__image {
  position: relative;
  width: 100%;
  height: var(--image-h);
  overflow: hidden;
}
.section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The Why has TWO images side by side (main + second).
   Main takes 74% of section width, second takes 26%. */
.section__image--double {
  display: flex;
}
.section__image--double img:first-child {
  flex: 0 0 74%;
  width: 74%;
}
.section__image--double img:last-child {
  flex: 0 0 26%;
  width: 26%;
}

/* Section copy — top-aligned with hero-block/nav in the bottom strip,
   slides horizontally with its section.
   Fixed width and identical left edge on every section (Work / Who / How /
   Why) so the copy block reads as a consistent "box" across the whole
   scroll. Width is capped so it never exceeds the photo's horizontal extent. */
.section__copy {
  position: absolute;
  top: calc(var(--image-h) + var(--gap));
  left: var(--copy-left);
  right: 0;                /* right edge aligns with section right = image right */
  width: auto;
  padding-bottom: 32px;    /* consistent breathing room below last line */
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
/* Paragraph spacing inside section copy matches outer margins (32px) */
.section__copy p { margin: 0 0 32px 0; }
.section__copy p:last-child { margin-bottom: 0; }

/* Why section: copy ends at right edge of why-main (74% of section width),
   not at the section's own right edge (which would be the second image). */
.section--why .section__copy { right: 26%; }

/* The Why's main image needs to keep the subject's face in frame */
.section--why .section__image img:first-child {
  object-position: center top;
}

/* ============================================================
   FADE OVERLAY — left band of the bottom strip
   Covers hero block + nav columns; section copy slides under it
   and dissolves into bg before passing the nav's right edge.
   z-index 15 -> sits ABOVE section copy (z 0) and BELOW
   hero-block / nav (z 25), so it hides copy but not the nav.
   ============================================================ */
/* Solid overlay covering the left column (hero block + nav column).
   Sections scroll horizontally behind it and naturally disappear under
   the opaque #f7f7f7. No gradient, no JS opacity calculations. The
   section copy at rest sits to the right of this overlay (copy-left
   = nav-end + 80px), so the resting copy is never affected. */
.fade-mask {
  position: fixed;
  top: var(--image-h);
  bottom: 0;
  left: 0;
  width: var(--nav-end);   /* hero block + nav column combined */
  z-index: 15;
  pointer-events: none;
  background: #f7f7f7;
}

/* ============================================================
   FIXED BOTTOM-LEFT — HERO BLOCK
   Top-aligned with section nav and section copy.
   ============================================================ */
.hero-block {
  position: fixed;
  top: calc(var(--image-h) + var(--gap));
  bottom: var(--pad-y);         /* symmetrical to top: pad-y above logo */
  left: var(--pad-x);
  z-index: 25;
  width: 220px;                 /* narrower than --hero-w so the hero block
                                   stops well before the nav column;
                                   cascade (nav, copy) still uses --hero-w */
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Never clip: if content is taller than the available height
     (very short viewports), the block scrolls internally instead of
     hiding the signature and footer links. */
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hero-block::-webkit-scrollbar { display: none; }

.hero-block__headline {
  font-size: var(--t-hero);
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
  margin: 0 0 1.4em 0;
}

.hero-block__body {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 1.4em 0;
  max-width: 22em;
}

.hero-block__cta {
  margin: 0;
}
.hero-block__cta a {
  font-size: var(--t-cta);
  font-weight: 400;
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: #2e2e2e;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

/* Top group: padding-bottom reserves space for the absolutely positioned
   bottom group so the intro content and CTA never overlap it. */
.hero-block__top {
  padding-bottom: 100px;
}

/* Bottom group: absolutely anchored to the bottom edge of .hero-block.
   No internal padding on .hero-block, so `bottom: 0` aligns the
   signature+footer with the block's bottom edge. */
.hero-block__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.hero-block__signature {
  width: 100%;
  max-width: 200px;     /* fixed — do not change without explicit instruction */
}
.hero-block__signature img {
  width: 100%;
  height: auto;
  opacity: 0.55;
}

.hero-block__footer {
  display: flex;
  gap: 0.9em;
  margin-top: 0.4em;    /* signature and footer read as one cohesive unit */
  font-size: var(--t-footer);
  letter-spacing: 0.08em;
}

/* ============================================================
   FIXED BOTTOM-CENTER — SECTION NAV
   Top-aligned with hero-block headline.
   ============================================================ */
.section-nav {
  position: fixed;
  top: calc(var(--image-h) + var(--gap));
  left: calc(var(--hero-end) + var(--hero-gap));
  width: var(--nav-w);
  z-index: 25;
  font-size: var(--t-nav);
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
}
.section-nav ol {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}
.section-nav a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.section-nav a span {
  display: inline-block;
  width: 2.2em;
}
/* Active underline rendered as a pseudo-element so the color is exactly
   #2e2e2e (no text-decoration anti-aliasing differences vs the text). */
.section-nav li.is-active a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: #2e2e2e;
}

/* ============================================================
   MOBILE — SPA crossfade (<768px)
   ------------------------------------------------------------
   No scroll-based section switching. The desktop .scroll markup
   (5 horizontally-arranged .section elements) is hidden; .mobile-stage
   takes over as the entire page body.

   Layout, top to bottom:
     1. Thin white header bar with "GRCE Projects" (fixed, top)
     2. Image slot — 5 images stacked in one CSS grid cell, only
        .is-active is opaque. Crossfade on nav tap.
     3. Persistent intro block — headline / body / CTA (left col) +
        01-04 nav (right col). Never animates, never moves.
     4. Copy slot — 5 copy blocks stacked in one CSS grid cell, only
        .is-active is opaque. Crossfade on nav tap.
     5. Footer — signature + SOCIAL/LINKEDIN/CONTACT.
   ============================================================ */
@media (max-width: 767px) {
  body { overflow: auto; height: auto; }

  /* Desktop-only chrome — hide entirely on mobile */
  .fade-mask,
  .hero-block,
  nav.section-nav,
  main.scroll { display: none; }

  /* ---------- Header bar ---------- */
  /* The fixed logo becomes a full-width strip at the top of the page,
     matching the reference PDFs' header band. */
  .site-logo {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--bg);
    padding: 14px var(--pad-x);
    line-height: 1;
  }

  /* ---------- Mobile stage (shown) ---------- */
  .mobile-stage {
    display: block;
    padding-top: 50px;          /* clears the header bar */
  }

  /* ---------- Image slot ----------
     CSS grid with a single named cell — every image occupies the same
     area and stacks visually. Auto-sized to the largest image (they
     share the same aspect ratio, so the slot height is stable). */
  .mobile-stage__images {
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 78vh;
    overflow: hidden;
  }
  .mobile-stage__image {
    grid-area: stack;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 450ms ease-out;
    pointer-events: none;
  }
  .mobile-stage__image.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- Intro block (persistent, static) ---------- */
  .mobile-stage__intro {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 28px var(--pad-x) 0 var(--pad-x);
    align-items: start;
  }
  .mobile-stage__intro-hero { color: var(--ink); }
  .mobile-stage__headline {
    font-size: var(--t-hero);
    font-weight: 300;
    font-style: italic;
    line-height: 1.25;
    margin: 0 0 1.4em 0;
  }
  .mobile-stage__body {
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.55;
    margin: 0 0 1.4em 0;
    max-width: 22em;
  }
  .mobile-stage__cta { margin: 0; }
  .mobile-stage__cta a {
    font-size: var(--t-cta);
    font-weight: 400;
    font-style: italic;
    text-decoration: underline;
    text-decoration-color: var(--ink);
    text-underline-offset: 0.18em;
    text-decoration-thickness: from-font;
  }

  /* Nav column — italic, right-aligned, one item per row */
  .mobile-stage__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: var(--t-nav);
    font-weight: 300;
    font-style: italic;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    gap: 1.4em;
    white-space: nowrap;
  }
  .mobile-stage__nav li { position: relative; }
  .mobile-stage__nav a {
    display: inline-block;
    text-decoration: none;
    color: var(--ink);
  }
  /* Active underline rendered as pseudo-element so the ink matches exactly. */
  .mobile-stage__nav li.is-active a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--ink);
  }

  /* ---------- Copy slot ----------
     Same grid-stack pattern as the image slot. Slot height fits the
     tallest copy block; shorter sections leave whitespace below. */
  .mobile-stage__copies {
    display: grid;
    grid-template-areas: "stack";
    padding: 32px var(--pad-x) 0 var(--pad-x);
  }
  .mobile-stage__copy {
    grid-area: stack;
    font-size: var(--t-body);
    line-height: 1.7;
    color: var(--ink);
    text-align: justify;
    opacity: 0;
    transition: opacity 450ms ease-out;
    pointer-events: none;
  }
  .mobile-stage__copy.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-stage__copy p { margin: 0 0 1.4em 0; }
  .mobile-stage__copy p:last-child { margin-bottom: 0; }

  /* ---------- Mobile footer (signature + links) ---------- */
  .mobile-footer {
    display: block;
    padding: 56px var(--pad-x) 32px var(--pad-x);
  }
  .mobile-footer__signature {
    width: 12em;
    max-width: 200px;
    margin: 0 0 0.6em 0;
  }
  .mobile-footer__signature img {
    width: 100%;
    height: auto;
    opacity: 0.55;
  }
  .mobile-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.9em;
    font-size: var(--t-footer);
    letter-spacing: 0.08em;
  }
}