/* =========================================================
   Cullen Design — Portfolio Site Styles
   Colors, fonts and spacing transcribed from the original
   Claude Design composition. Central tokens below — edit
   here to rebrand everywhere.
   ========================================================= */

:root {
  --color-cream: #EDE6D8;
  --color-ink: #1C1A17;
  --color-rust: #C1502E;
  --color-ivory: #E2D8C2;
  --color-ink-soft: #3a342b;
  --color-line-dark: #d8cdb8;
  --color-muted: #8f8271;
  --color-tan: #c9bfa8;
  --color-espresso: #15130f;

  --font-display: 'Ubuntu Condensed', sans-serif;
  --font-label: 'Archivo Narrow', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-serif: 'Cormorant', serif;

  --content-max-width: 1400px;
  --header-padding-x: 56px;
  --header-padding-y: 20px;
  --scroll-offset: 24px;
}

/* ===== Base / Reset ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
}

a {
  color: var(--color-rust);
  text-decoration: none;
}
a:hover { color: var(--color-ink); }

::selection {
  background: var(--color-rust);
  color: var(--color-cream);
}

img { max-width: 100%; display: block; }

/* ===== Header / Nav =====
   Header itself is transparent, non-sticky, and scrolls away with the
   page. It shares the exact same max-width + centering as every other
   section (.hero, .featured, .portfolio, .footer-inner) so the logo and
   nav button land on the same content edges as the hero-side rust
   block, at every viewport width — not just below ~1512px, where a
   full-bleed header happens to coincide with the centered content edge
   by accident.
   Only the menu button stays put while scrolling — position:fixed
   rather than sticky, since sticky would only hold it within the
   header's own ~90px box, not for the full page. Because it's fixed,
   it escapes .site-header's box model entirely (fixed positioning is
   viewport-relative, not parent-relative), so its own `right` offset
   is computed to match the content edge directly via the same
   max-width math below, rather than inheriting it from the header. */
.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--header-padding-y) var(--header-padding-x);
  background: transparent;
}

.logo {
  display: inline-block;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
/* Plain text link, deliberately static — no color change on hover, and
   the underline bar below (a sibling, not a child) stays outside the
   clickable area entirely. */
.logo__link {
  color: inherit;
}

.logo__underline {
  width: 64px;
  height: 4px;
  background: var(--color-rust);
  margin-bottom: 26px;
  margin-top: 4px;
}

.menu-btn {
  position: fixed;
  top: var(--header-padding-y);
  /* Matches the right edge of the (centered, max-width-capped) content
     column at any viewport width: 56px in from the viewport edge below
     ~1512px, same as the header's own padding; beyond that, adds the
     extra centering margin the 1400px-capped sections pick up, exactly
     mirroring where .hero-side__block's right edge actually sits. */
  right: max(var(--header-padding-x), calc((100vw - var(--content-max-width)) / 2 + var(--header-padding-x)));
  z-index: 40;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  width: 69px;
  height: 40px;
  background-color: rgba(193, 80, 46, 0.92);
  justify-content: center;
  align-items: center;
  transition: gap .2s ease;
}
/* Once docked with the rust block (see main.js), swap the button's
   translucent rust to the block's exact solid rust — otherwise the
   92% alpha reads as a faint seam where the two meet, undercutting the
   "one cohesive block" effect. */
.menu-btn.is-docked {
  background-color: var(--color-rust);
}
.menu-btn:hover,
.menu-btn:focus-visible,
.menu-btn[aria-expanded="true"] { gap: 0; }

.menu-btn__bar {
  width: 30px;
  height: 3px;
  background: var(--color-ink);
  display: block;
}
.menu-btn__bar--thin { height: 1px; }

/* ===== Menu Overlay ===== */
.menu-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: var(--color-ink);
  z-index: 30;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}

.menu-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear 0s;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.menu-nav a {
  color: var(--color-cream);
  transition: color .2s;
}
.menu-nav a:hover,
.menu-nav a:focus-visible { color: var(--color-rust); }

.menu-nav__resume {
  background: var(--color-rust);
  color: var(--color-cream) !important;
  border: 2px solid transparent;
  padding: 14px 28px;
  font-size: 17px;
  transition: background .2s, border-color .2s, color .2s;
}
.menu-nav__resume:hover,
.menu-nav__resume:focus-visible {
  background: var(--color-rust);
  border-color: var(--color-cream);
  color: var(--color-ink) !important;
}

/* ===== Buttons (shared) =====
   Hover rule across the whole site: every button lands on a rust
   background with ink text. The only thing that varies is the border
   color, which matches whatever the button's home surface is —
   ink border on light (cream/ivory) backgrounds, cream border on
   dark (ink) backgrounds — so the border reads correctly against
   both the button's fill and the page behind it. */
.btn-primary {
  display: inline-block;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 16px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  border: 2px solid var(--color-ink);
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer;
}
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--color-rust); color: var(--color-ink); border-color: var(--color-ink); }

.btn-outline {
  display: inline-block;
  border: 2px solid var(--color-ink);
  color: var(--color-ink);
  padding: 16px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-outline:hover,
.btn-outline:focus-visible { background: var(--color-rust); color: var(--color-ink); border-color: var(--color-ink); }

.btn-cream {
  color: var(--color-ink);
  padding: 16px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background-color: var(--color-cream);
  min-width: 206px;
  text-align: center;
  border: 2px solid var(--color-cream);
  transition: background .2s, color .2s, border-color .2s;
  display: inline-block;
}
.btn-cream:hover,
.btn-cream:focus-visible { background: var(--color-rust); color: var(--color-ink); border-color: var(--color-cream); }

.btn-outline-cream {
  border: 2px solid var(--color-cream);
  color: var(--color-cream);
  padding: 16px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  min-width: 206px;
  text-align: center;
  transition: background .2s, color .2s, border-color .2s;
  display: inline-block;
}
.btn-outline-cream:hover,
.btn-outline-cream:focus-visible { background: var(--color-rust); color: var(--color-ink); border-color: var(--color-cream); }

/* ===== Hero ===== */
.hero {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 80px 56px 46px;
}

.hero__rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 15px;
}
.hero__rule { height: 3px; background: var(--color-ink); }
.hero__rule--2 { height: 2px; width: 94%; }
.hero__rule--3 { height: 1px; width: 80%; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 34px 180px;
  gap: 15px;
  align-items: center;
  min-height: 540px;
}

/* align-self overrides the grid's align-items:center specifically for
   this column, so the title always sits a fixed distance below
   .hero__rules (matching .page-intro__content) instead of drifting
   based on how tall this column's own content happens to be relative
   to the row (which is stretched to min-height by .hero-visual/
   .hero-side, both of which have their own explicit height and are
   unaffected by this). */
.hero-content { max-width: 620px; align-self: start; }

.hero__kicker {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-rust);
  margin-bottom: 8px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.02;
  margin: 0 0 26px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.hero__desc {
  font-size: 18px;
  line-height: 1.7;
  max-width: 480px;
  margin: 0 0 34px;
  color: var(--color-ink-soft);
}

.hero__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.hero-visual {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  justify-self: center;
  height: 100%;
  min-height: 380px;
  transform-origin: top;
  will-change: transform;
}
.hero-visual__bar { width: 2px; background: var(--color-ink); }
.hero-visual__bar--1 { height: 62%; }
.hero-visual__bar--2 { height: 100%; }
.hero-visual__bar--accent { width: 5px; height: 80%; background: var(--color-rust); }
.hero-visual__bar--4 { height: 45%; }
.hero-visual__bar--5 { height: 90%; }

.hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
}
.hero-side__label {
  writing-mode: vertical-rl;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
  will-change: transform;
}
.hero-side__block {
  width: 69px;
  height: 176px;
  background-color: var(--color-rust);
}
/* Once pinned under the docked nav button (see main.js), both switch to
   position:fixed inline — z-index here keeps them above whatever normal
   page content scrolls beneath them while pinned. The label needs to
   beat the block specifically: with equal z-index, the block (which
   comes after the label in the DOM) would win the stacking tie and
   cover the text. */
.hero-side__block.is-pinned {
  z-index: 35;
}
.hero-side__label.is-pinned {
  z-index: 36;
}

/* ===== Featured Project ===== */
.featured {
  padding: 56px 56px 80px;
  max-width: var(--content-max-width);
  margin: 0 auto;
  position: relative;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.featured-project {
  background-color: var(--color-ivory);
  font-size: 15px;
  font-family: var(--font-label);
  padding: 16px 0 22px;
}

.featured-project__rules { margin: 0; }
.featured-project__rule { height: 3px; background: var(--color-ink); width: 96%; }
.featured-project__rule--thin { height: 1px; margin-top: 6px; margin-bottom: 6px; width: 90%; }

.featured-project__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 26px;
  align-items: center;
  margin: 56px;
}

.featured-project__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.featured-project__desc {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin: 0 0 26px;
}

.tag-list {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-rust);
  margin: 0 0 30px;
}

.featured-project__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.mockup-frame {
  border: 3px solid var(--color-ink);
  display: block;
  width: 100%;
  overflow: hidden;
}

.mockup-image {
  width: 100%;
  height: auto;
}

/* ===== Portfolio Grid ===== */
.portfolio {
  padding: 0 56px 80px;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.portfolio__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Cards are plain, fully-bordered boxes in a standard static grid (no
   scroll-driven motion for now). The left-edge "spine" (a thin vertical
   line with a small rust marker after it) is its own auto-width grid
   column rather than absolutely-positioned — it reserves real layout
   space instead of floating over fixed pixel coordinates, so it holds
   up under resizing/responsive width changes the way absolute
   positioning wouldn't.
   .project-card__stretched-link makes the whole card click-through to
   the case study — .project-card__spine and .project-card__content sit
   visually above it (z-index 2 vs 1) but both have pointer-events:none
   so clicks fall through to the link everywhere except
   .project-card__link, which opts back in with pointer-events:auto so
   the live-site URL stays independently clickable. */
.project-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  border: 3px solid var(--color-ink);
  background: var(--color-cream);
  min-height: 220px;
  transition: background .2s ease;
}
.project-card:hover,
.project-card:focus-within {
  background: var(--color-ivory);
}

/* auto-width (not a fixed column size) so the spine is only ever as
   wide as its content actually needs — line inset 8px from the card's
   own left edge via padding, marker immediately after it. Both are
   real elements (not a background-image trick) so each can carry its
   own z-index: the line sits above the marker so a sub-pixel rounding
   gap between the two (flex layout doesn't always land on whole
   pixels) never shows as a notch — the line simply paints through. */
.project-card__spine {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  padding-left: 8px;
  pointer-events: none;
}

.project-card__line {
  position: relative;
  z-index: 2;
  width: 1.8px;
  height: 90%;
  background: var(--color-ink);
  flex-shrink: 0;
}

.project-card__marker {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: var(--color-rust);
  flex-shrink: 0;
}

.project-card__stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.project-card__stretched-link:focus-visible {
  outline: 2px solid var(--color-rust);
  outline-offset: -2px;
}

.project-card__content {
  position: relative;
  z-index: 2;
  padding: 26px 26px 26px 18px;
  pointer-events: none;
}

.project-card__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-rust);
  margin-bottom: 14px;
}

.project-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.project-card__desc {
  font-size: 14px;
  color: var(--color-ink-soft);
  line-height: 1.55;
  margin: 0 0 10px;
}

.project-card__link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  pointer-events: auto;
}

/* ===== Internal Page Intro (projects.html and future internal pages) =====
   Same "3 ruled lines + rust box/label column" motif as the homepage
   hero — reuses .hero__rules/.hero__rule and .hero-side/.hero-side__label/
   .hero-side__block directly rather than parallel classes, so internal
   pages read as part of the same system AND the dock/stick scroll
   effect (main.js, built once against those exact selectors) just
   works here too, unmodified. */
.page-intro {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 80px 56px 20px;
}

.page-intro__grid {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 15px;
  align-items: center;
  min-height: 280px;
}

.page-intro__content { max-width: 620px; align-self: start; }

.page-intro__desc {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  color: var(--color-ink-soft);
}

/* ===== Projects Page (projects.html) =====
   Same card system as .project-card on the homepage — grid layout with
   a left-edge spine (thin line + rust marker), opaque cream background
   that shifts to ivory on hover/focus, and a stretched-link click
   target — plus an image slot .project-card doesn't have. The rust
   marker here is 20% larger (12px → 14.4px) than the homepage's, per
   this page's distinct scale. Reveal-on-scroll only (no scroll-grow
   effect — that trick relies on cards touching with zero gap, which
   contradicts this grid's deliberate 40px gap). */
.projects-section {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 40px 56px 100px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.project-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  border: 3px solid var(--color-ink);
  background: var(--color-cream);
  transition: background .2s ease;
}
.project-tile:hover,
.project-tile:focus-within {
  background: var(--color-ivory);
}

.project-tile__spine {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  padding-left: 8px;
  pointer-events: none;
}

.project-tile__line {
  position: relative;
  z-index: 2;
  width: 1.8px;
  height: 90%;
  background: var(--color-ink);
  flex-shrink: 0;
}

.project-tile__marker {
  position: relative;
  z-index: 1;
  width: 14.4px;
  height: 14.4px;
  background: var(--color-rust);
  flex-shrink: 0;
}

/* Sits above .project-tile__spine/.project-tile__content (z-index 1
   vs 2) but both of those have pointer-events:none, so clicks fall
   through to this link everywhere except .project-tile__link, which
   opts back in with pointer-events:auto to stay independently
   clickable. */
.project-tile__stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.project-tile__stretched-link:focus-visible {
  outline: 2px solid var(--color-rust);
  outline-offset: -2px;
}

.project-tile__content {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Insets the placeholder/image box away from the card's border on all
   sides (no more border-bottom divider) — left/right margins match
   .project-tile__body's own padding (18px/26px) so the image's edges
   line up with the text content below it, rather than spanning the
   full container width. */
.project-tile__image {
  aspect-ratio: 16 / 9;
  background: var(--color-tan);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 26px 26px 20px 18px;
  overflow: hidden;
}
.project-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-tile__image-label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-soft);
}

.project-tile__body {
  padding: 0 26px 26px 18px;
}

.project-tile__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-rust);
  margin-bottom: 12px;
}

.project-tile__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.project-tile__desc {
  font-size: 15px;
  color: var(--color-ink-soft);
  line-height: 1.6;
  margin: 0 0 10px;
}

.project-tile__link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  pointer-events: auto;
}

/* ===== Project Detail Pages (projects/<slug>.html) =====
   Hero reuses .page-intro/.page-intro__grid/.hero-side exactly as on
   projects.html, plus two additions scoped here: .hero__kicker
   (already used on the homepage) doubles as the small rust eyebrow tag
   above the h1, and .page-intro__link is the "visit live site" call to
   action under .page-intro__desc — styled as a real button by pairing
   this class with .btn-primary in the markup (this class only supplies
   the spacing above it), omitted entirely on pages with no live site
   (Cullen Design, Scryline). .page-intro__desc itself carries the
   longer process/design-choices writeup on these pages (in place of
   the one-line teaser used on the homepage/projects.html) — no
   separate "Overview" section. */
.page-intro__link {
  margin-top: 24px;
}

/* Grid supports more screenshots later; a single image (:only-child)
   spans the full width instead of sitting alone in a half-width cell.
   Frames reuse .mockup-frame/.mockup-image from the homepage's
   Featured Project — same bordered-screenshot treatment. Narrower than
   the site's usual --content-max-width (1400px) so the gallery reads
   as its own contained, centered block rather than spanning the full
   page width. Top padding (112px) is double the gap other internal
   sections get below their hero, giving clearer separation from
   .page-intro above it. */
.project-gallery {
  max-width: 1200px;
  margin: 0 auto;
  padding: 112px 56px 80px;
}
.project-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.project-gallery__item:only-child {
  grid-column: 1 / -1;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--color-ink);
  color: var(--color-cream);
  overflow: hidden;
}

.footer-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 56px 60px;
  position: relative;
}

.footer-top {
  display: grid;
  /* Third track (180px) is intentionally empty — no rust box here
     anymore, but keeping the track reserves the same space the hero's
     matching column takes, so .footer-visual (34px column) lands at
     the same horizontal position as .hero-visual up in the hero. */
  grid-template-columns: 1.3fr 34px 180px;
  gap: 15px;
  align-items: flex-end;
  border-bottom: 1px solid var(--color-ink-soft);
  padding-bottom: 0;
  margin-bottom: 66px;
}

.footer-cta-col { display: flex; flex-direction: column; position: relative; }

.footer-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  margin-top: 56px;
  margin-bottom: 46px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.footer-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.footer-watermark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 133px);
  line-height: 0.78;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-rust);
  opacity: 0.12;
  margin-left: -6px;
  margin-top: 138px;
}

.footer-visual {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  justify-self: center;
  height: 100%;
  opacity: 0.4;
  margin-bottom: 90px;
  transform-origin: top;
  will-change: transform;
}
.footer-visual__bar { width: 2px; background: var(--color-line-dark); }
.footer-visual__bar--1 { height: 62%; }
.footer-visual__bar--2 { height: 100%; }
.footer-visual__bar--accent { width: 5px; height: 80%; background: var(--color-rust); }
.footer-visual__bar--4 { height: 45%; }
.footer-visual__bar--5 { height: 90%; }

.footer-about {
  max-width: 620px;
  margin-bottom: 50px;
}
.footer-about__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-rust);
  margin: 0 0 12px;
}
.footer-about__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-line-dark);
  margin: 0;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  margin-bottom: 60px;
}

.skill-col__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-rust);
  margin: 0 0 12px;
}

.skill-col__list {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  color: var(--color-line-dark);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 26px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
}

.footer-bottom__social {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  /* add social links here */
}

/* =========================================================
   Motion — smooth anchor scroll only. The scroll-linked effects
   (hero waterfall/label/dock, footer bars) live in js/main.js and are
   already gated behind this same media query there. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  #work, #about, #portfolio, #contact {
    scroll-margin-top: var(--scroll-offset);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-visual, .hero-side { display: none; }
  .hero-content { max-width: none; }

  .footer-top { grid-template-columns: 1fr; }
  .footer-visual { display: none; }
  .footer-watermark { margin-top: 40px; }

  .featured-project__grid { grid-template-columns: 1fr; }

  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }

  .skills-grid { grid-template-columns: repeat(3, 1fr); }

  .page-intro__grid { grid-template-columns: 1fr; min-height: 0; }

  .projects-grid { gap: 26px; }
}

@media (max-width: 640px) {
  .site-header { padding: 16px 24px; }
  .menu-btn { top: 16px; right: 24px; }

  .hero { padding: 60px 24px 30px; }
  .hero__title { font-size: clamp(2.4rem, 12vw, 4rem); }

  .featured { padding: 40px 24px 56px; }
  .featured-project__grid { margin: 24px; }

  .portfolio { padding: 0 24px 56px; }
  .portfolio-grid { grid-template-columns: 1fr; }

  .page-intro { padding: 60px 24px 20px; }
  .projects-section { padding: 24px 24px 60px; }
  .projects-grid { grid-template-columns: 1fr; gap: 24px; }

  .project-gallery { padding: 80px 24px 60px; }
  .project-gallery__grid { grid-template-columns: 1fr; gap: 24px; }

  .footer-inner { padding: 0 24px 40px; }
  .footer-heading { font-size: clamp(2rem, 10vw, 3.5rem); margin-top: 32px; }
  .footer-actions { flex-direction: column; }
  .btn-cream, .btn-outline-cream { width: 100%; min-width: 0; }

  .skills-grid { grid-template-columns: repeat(2, 1fr); }

  .menu-nav { font-size: 28px; gap: 20px; }
}