/* ──────────────────────────────────────────────
   Designer Recruitment® — Brand Tokens
   Source: Brand_assets/DR_Guidelines_1.png

   Single source of truth for both the homepage
   (index.html) and the about-page Vite project.
   Edit here; the rest of the site follows.
   ────────────────────────────────────────────── */

:root {
  /* ── Brand palette (per guidelines) ─────────── */
  --color-midnight:    #07071B;   /* R7  G7  B27   — primary dark surface */
  --color-navy-deep:   #07071B;   /* aliased to midnight (was #0B0252) */
  --color-blue:        #07071B;   /* aliased to midnight (was #2353E8) */
  --color-gold:        #D9BC80;   /* R217 G188 B128 — warm gold accent */
  --color-gold-soft:   #E6CC94;   /* lighter gold for hover/highlight */
  --color-gold-ink:    #8A6A1F;   /* darker gold for TEXT on light bg (WCAG AA) */
  --color-cream:       #F2EDE4;   /* R242 G237 B228 — light surface */
  --color-white:       #FFFFFF;

  /* ── Functional aliases ─────────────────────── */
  --bg-base:           var(--color-midnight);
  --bg-surface:        #0F0E2C;        /* +1 step lift from midnight */
  --bg-elevated:       #14133A;        /* card/elevated surface */
  --bg-light:          var(--color-cream);

  --fg-base:           var(--color-cream);
  --fg-muted:          rgba(242,237,228,0.62);
  --fg-soft:           rgba(242,237,228,0.40);
  --fg-on-light:       var(--color-midnight);
  --fg-on-light-muted: rgba(7,7,27,0.60);

  --accent:            var(--color-gold);
  --accent-soft:       rgba(217,188,128,0.16);
  --accent-strong:     var(--color-blue);

  --line:              rgba(242,237,228,0.10);
  --line-on-light:     rgba(7,7,27,0.10);

  /* ── Typography ─────────────────────────────── */
  --font-display: "Canela Deck", "Canela", "Canela Text", Georgia, "Times New Roman", serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — pick from these only */
  --fs-3xs: 10px;
  --fs-2xs: 11px;
  --fs-xs:  12.5px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;

  /* Display scale (clamped) — for headings only */
  --fs-display-sm: clamp(28px, 3.2vw, 38px);
  --fs-display-md: clamp(32px, 4vw, 52px);
  --fs-display-lg: clamp(40px, 5vw, 68px);
  --fs-display-xl: clamp(54px, 8vw, 112px);

  /* Weights — Montserrat Light/Regular/Medium/Bold/Black */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    900;

  /* Line heights */
  --lh-tight:    1.06;
  --lh-snug:     1.2;
  --lh-body:     1.7;
  --lh-loose:    1.85;

  /* Tracking */
  --ls-display:  -0.02em;
  --ls-body:     0;
  --ls-tag:      0.22em;
  --ls-button:   0.15em;

  /* ── Radius scale ───────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Spacing (4px base, t-shirt) ────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Section padding (responsive) ───────────── */
  --pad-section-y: clamp(72px, 10vw, 140px);
  --pad-section-x: clamp(24px, 5vw, 56px);

  /* ── Motion ─────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.22s;
  --dur-base:   0.45s;
  --dur-slow:   0.85s;
  --dur-reveal: 1.1s;

  /* ── Elevation ──────────────────────────────── */
  --shadow-sm: 0 2px 4px rgba(7,7,27,0.06);
  --shadow-md: 0 6px 16px rgba(7,7,27,0.10);
  --shadow-lg: 0 12px 32px rgba(7,7,27,0.18);
  --shadow-glow-gold: 0 12px 36px rgba(217,188,128,0.30);

  /* ── Container ──────────────────────────────── */
  --container-max: 1240px;

  /* ── Z-index scale ──────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-nav:     200;
  --z-modal:   300;
  --z-cursor:  9998;
  --z-grain:   9999;

  /* ── Nav height (matches #nav-bar padding + logo) ── */
  --nav-h: 70px;
}
@media (max-width: 1024px) { :root { --nav-h: 64px; } }
@media (max-width: 860px)  { :root { --nav-h: 56px; } }

/* Push every page below the fixed top nav so content never sits under it. */
body { padding-top: var(--nav-h); }
/* Anchored links should scroll to land below the nav, not behind it. */
html { scroll-padding-top: var(--nav-h); }

/* ──────────────────────────────────────────────
   Web fonts — served from /Fonts (lower-cased
   path resolves to the Fonts folder on macOS HFS).
   The about-page resolves these via /fonts (symlink).
   ────────────────────────────────────────────── */
@font-face {
  font-family: "Canela Deck";
  src: url("/fonts/Canela-Medium.woff2") format("woff2"),
       url("/fonts/Canela-Medium.woff") format("woff");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Canela Deck";
  src: url("/fonts/Canela-MediumItalic.woff2") format("woff2"),
       url("/fonts/Canela-MediumItalic.woff") format("woff");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* Backwards-compatible alias — anything still using
   "Canela Text" continues to render correctly. */
@font-face {
  font-family: "Canela Text";
  src: url("/fonts/Canela-Medium.woff2") format("woff2"),
       url("/fonts/Canela-Medium.woff") format("woff");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Canela Text";
  src: url("/fonts/Canela-MediumItalic.woff2") format("woff2"),
       url("/fonts/Canela-MediumItalic.woff") format("woff");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* ──────────────────────────────────────────────
   Section tag — canonical pill eyebrow.
   Defined here so every page picks up the same
   high-contrast, accessible style. Pages may still
   override color via more specific selectors.
   ────────────────────────────────────────────── */
.section-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  border: 1px solid rgba(7,7,27,0.20);
  background: rgba(7,7,27,0.025);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-midnight);
  white-space: nowrap;
}
.section-tag.is-blue {
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  background: var(--color-white);
}
.section-tag.is-gold,
.section-tag.on-dark {
  color: var(--color-cream);
  border-color: rgba(242,237,228,0.28);
  background: rgba(242,237,228,0.05);
}

/* ──────────────────────────────────────────────
   Site Footer — global, sitewide styles
   The canonical footer markup lives in
   /partials/footer.html. New pages should use the
   same class names so they pick up these styles.
   ────────────────────────────────────────────── */
.site-footer {
  background: var(--color-midnight);
  border-top: 1px solid var(--line);
  padding: 68px 56px 36px;
}
.footer-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
}
.foot-brand img { height: 60px; margin-bottom: 22px; width: auto; }
.foot-home { display: inline-block; transition: opacity 0.22s ease; }
.foot-home:hover { opacity: 0.78; }
.foot-home:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 6px; border-radius: 4px; }
.foot-brand p {
  font-size: 13px;
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: rgba(242, 237, 228, 0.78);
  max-width: 280px;
  margin-bottom: 28px;
}
.foot-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  color: var(--fg-muted);
  text-decoration: none;
  transition: border-color 0.22s ease, color 0.22s ease;
}
.foot-social:hover { border-color: var(--accent); color: var(--accent); }
.foot-social svg { width: 14px; height: 14px; }
.foot-head {
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-base);
  margin-bottom: 22px;
}
.foot-link {
  display: block;
  padding: 6px 0;
  font-size: 12.5px;
  font-weight: var(--fw-light);
  letter-spacing: 0.04em;
  color: rgba(242, 237, 228, 0.82);
  text-decoration: none;
  transition: color 0.22s ease;
}
.foot-link:hover { color: var(--fg-base); }

.foot-base {
  max-width: var(--container-max);
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(242, 237, 228, 0.75);
}
.foot-base > div > a:not(.ff-credit) {
  margin-left: 22px;
  color: rgba(242, 237, 228, 0.75);
  text-decoration: none;
}
.foot-base > div > a:not(.ff-credit):hover { color: var(--fg-base); }

/* "Built by …" credit — sitewide, with 5s gold-underline sweep */
.ff-credit {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-light);
  letter-spacing: 0.08em;
  color: rgba(242, 237, 228, 0.65);
  text-decoration: none;
  transition: color 0.5s var(--ease-out-expo);
}
.foot-base .ff-credit { display: flex; margin-top: 6px; }
.ff-credit:hover,
.ff-credit:hover .ff-credit-name { color: var(--accent); }
.ff-credit-name {
  position: relative;
  color: rgba(242, 237, 228, 0.65);
  transition: color 0.5s var(--ease-out-expo);
}
.ff-credit-name::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: ffSweep 5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}
@keyframes ffSweep {
  0%, 8%   { transform: scaleX(0); transform-origin: left center;  opacity: 0.9; }
  24%      { transform: scaleX(1); transform-origin: left center;  opacity: 0.9; }
  30%      { transform: scaleX(1); transform-origin: right center; opacity: 0.9; }
  46%      { transform: scaleX(0); transform-origin: right center; opacity: 0; }
  100%     { transform: scaleX(0); transform-origin: right center; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ff-credit-name::after { animation: none; opacity: 0.35; transform: scaleX(1); }
}

/* Footer responsive */
@media (max-width: 1024px) {
  .site-footer { padding-left: 40px; padding-right: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .site-footer { padding-left: 24px; padding-right: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}