/* ==========================================================================
   CREATIVE COLLECTIVE — GLOBAL STYLESHEET
   Typography: Cormorant Garamond (serif) + Inter (sans)
   Accent: #B85C38 (terracotta)
   ========================================================================== */


/* --------------------------------------------------------------------------
   CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */

:root {
  /* Color system */
  --color-bg:           #F5F2EE;
  --color-ink:          #1A1A18;
  --color-grey-light:   #E8E4DE;
  --color-grey-mid:     #9B9690;
  --color-grey-dark:    #5C5A57;
  --color-surface:      #EEEAE4;
  --color-accent:       #B85C38;
  --color-accent-dark:  #9A4A2D;
  --color-white:        #FFFFFF;
  --color-ink-inverse:  #F5F2EE;

  /* Typography */
  --font-serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale */
  --text-xs:      0.6875rem;   /* 11px */
  --text-sm:      0.8125rem;   /* 13px */
  --text-base:    1rem;        /* 16px */
  --text-lg:      1.1875rem;   /* 19px */
  --text-xl:      1.375rem;    /* 22px */
  --text-2xl:     1.75rem;     /* 28px */
  --text-3xl:     2.25rem;     /* 36px */
  --text-4xl:     3rem;        /* 48px */
  --text-5xl:     4rem;        /* 64px */
  --text-display: clamp(3rem, 6.5vw, 6rem);

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  /* Spacing scale (8px base) */
  --space-1:   0.25rem;   /*   4px */
  --space-2:   0.5rem;    /*   8px */
  --space-3:   0.75rem;   /*  12px */
  --space-4:   1rem;      /*  16px */
  --space-5:   1.5rem;    /*  24px */
  --space-6:   2rem;      /*  32px */
  --space-7:   3rem;      /*  48px */
  --space-8:   4rem;      /*  64px */
  --space-9:   6rem;      /*  96px */
  --space-10:  8rem;      /* 128px */
  --space-11: 12rem;      /* 192px */

  /* Containers */
  --container-sm:      680px;
  --container-md:      960px;
  --container-lg:      1200px;
  --container-xl:      1440px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 450ms cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Z-index */
  --z-nav:     100;
  --z-overlay: 200;

  /* Nav height — used by sticky positioning calculations */
  --nav-height: 68px;
}


/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul, ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}


/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-display); }
h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
h4 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  line-height: var(--leading-relaxed);
  max-width: 65ch;
}

p + p {
  margin-top: var(--space-4);
}

strong { font-weight: 600; }
em     { font-style: italic; }

a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: opacity var(--transition-fast);
}

a:not([class]):hover {
  opacity: 0.6;
}


/* --------------------------------------------------------------------------
   FOCUS STATES
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* --------------------------------------------------------------------------
   CONTAINERS
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--sm { max-width: var(--container-sm); }
.container--md { max-width: var(--container-md); }
.container--lg { max-width: var(--container-lg); }


/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: 0.875rem var(--space-6);
  border: 1px solid currentColor;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
  white-space: nowrap;
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--outline:hover {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

.btn--outline-inverse {
  background: transparent;
  color: var(--color-ink-inverse);
  border-color: rgba(245, 242, 238, 0.4);
}

.btn--outline-inverse:hover {
  background-color: var(--color-ink-inverse);
  color: var(--color-ink);
  border-color: var(--color-ink-inverse);
}


/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */

.label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-grey-mid);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }

.discipline-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-grey-mid);
}


/* --------------------------------------------------------------------------
   REVEAL ANIMATION (scroll-triggered via JS)
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   SITE HEADER / NAV
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-grey-light);
}

.site-nav {
  display: flex;
  align-items: center;
  height: var(--nav-height);
  gap: var(--space-5);
}

.nav-logo {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.nav-logo:hover {
  opacity: 0.6;
}

/* Hamburger toggle — mobile only */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-toggle__line {
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--color-ink);
  transition:
    transform var(--transition-base),
    opacity var(--transition-fast);
  transform-origin: center;
}

/* Hamburger → X animation */
.nav-open .nav-toggle__line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-open .nav-toggle__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-open .nav-toggle__line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Nav menu — single element, two states */
.nav-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg);
  padding: var(--space-8) var(--container-padding);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-7);
  z-index: var(--z-overlay);
  overflow-y: auto;
}

.nav-open .nav-menu {
  display: flex;
}

/* Mobile nav links — large editorial style */
.nav-links {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nav-links li {
  border-bottom: 1px solid var(--color-grey-light);
}

.nav-links li:first-child {
  border-top: 1px solid var(--color-grey-light);
}

.nav-links a {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  padding: var(--space-4) 0;
  transition: color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--color-grey-dark);
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    background: none;
    padding: 0;
    gap: var(--space-6);
    margin-left: auto;
    overflow: visible;
  }

  .nav-links {
    flex-direction: row;
    width: auto;
    gap: var(--space-6);
  }

  .nav-links li {
    border: none;
  }

  .nav-links li:first-child {
    border: none;
  }

  .nav-links a {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--color-grey-dark);
    padding: 0;
  }

  .nav-links a:hover {
    color: var(--color-ink);
  }

  .nav-links a.is-current {
    color: var(--color-ink);
  }
}


/* --------------------------------------------------------------------------
   PAGE INTRO (shared across interior pages)
   -------------------------------------------------------------------------- */

.page-intro {
  padding-block: var(--space-9) var(--space-8);
  border-bottom: 1px solid var(--color-grey-light);
}

.page-intro__label {
  margin-bottom: var(--space-5);
}

.page-intro__headline {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-4xl), 7vw, 7rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.page-intro__body {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: var(--color-grey-dark);
  max-width: 52ch;
  line-height: var(--leading-relaxed);
}


/* --------------------------------------------------------------------------
   SECTION HEADER (label + "View all" link row)
   -------------------------------------------------------------------------- */

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-grey-light);
}

.section-link {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-grey-mid);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  transition: color var(--transition-fast), gap var(--transition-base);
}

.section-link::after {
  content: '→';
}

.section-link:hover {
  color: var(--color-ink);
  gap: var(--space-3);
}


/* --------------------------------------------------------------------------
   SITE FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--color-ink);
  color: var(--color-ink-inverse);
  padding-block: var(--space-8) var(--space-6);
}

.footer__inner {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(245, 242, 238, 0.1);
}

@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.footer__brand .nav-logo {
  color: var(--color-ink-inverse);
  display: inline-block;
  margin-bottom: var(--space-3);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: rgba(245, 242, 238, 0.45);
  max-width: 28ch;
  line-height: var(--leading-normal);
}

/* One horizontal row of page links; wraps on narrow screens */
.footer__col-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.footer__col-links a {
  font-size: var(--text-sm);
  color: rgba(245, 242, 238, 0.6);
  transition: color var(--transition-fast);
}

.footer__col-links a:hover {
  color: var(--color-ink-inverse);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-5);
}

.footer__legal p,
.footer__legal a {
  font-size: var(--text-xs);
  color: rgba(245, 242, 238, 0.25);
  max-width: none;
  transition: color var(--transition-fast);
}

.footer__legal a:hover {
  color: rgba(245, 242, 238, 0.5);
}

/* Pre-launch note — its own line under the legal row. Remove it at launch (all pages). */
.footer__legal .footer__preview {
  flex-basis: 100%;
  color: rgba(245, 242, 238, 0.5);
}


/* --------------------------------------------------------------------------
   FOOTER CTA
   The dark "Start a project" band that closes a top-level page. Shared by
   Home, The Collective and Capabilities, so it lives here.
   -------------------------------------------------------------------------- */

.footer-cta {
  background-color: var(--color-ink);
  color: var(--color-ink-inverse);
  padding-block: var(--space-11);
  text-align: center;
}

.footer-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
  max-width: var(--container-md);
  margin-inline: auto;
}

.footer-cta__headline {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-4xl), 7vw, 7rem);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-inverse);
}

.footer-cta__subtext {
  font-size: var(--text-lg);
  color: rgba(245, 242, 238, 0.5);
  font-weight: 300;
  max-width: 44ch;
  line-height: var(--leading-normal);
  text-align: center;
  margin-top: calc(var(--space-4) * -1);
}


/* --------------------------------------------------------------------------
   IMAGE PROMPT PLACEHOLDERS (temporary)
   Stands in for an image that hasn't been generated yet and carries its
   Midjourney prompt. Sits inside any image container on the site; add
   .has-image-prompt to the container so the box can grow past its aspect
   ratio on narrow screens instead of clipping the prompt.

   Shared by case studies and profile pages, so it lives here. The selectors
   are written div.… on purpose: the containers are styled by single-class
   rules in page stylesheets that load after this one, and these must win.

   Remove this block once every placeholder has been replaced.
   -------------------------------------------------------------------------- */

div.has-image-prompt {
  display: grid;
  overflow: visible;
  max-height: none;
  min-width: 0;
}

/* Below this width the prompt is taller than the box. Left in place, the
   aspect ratio would turn that extra height into extra width and push the
   box off-screen, so let the box size to its text instead. */
@media (max-width: 639px) {
  div.has-image-prompt {
    aspect-ratio: auto;
  }
}

.image-prompt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px dashed var(--color-grey-mid);
  background-color: var(--color-surface);
}

.image-prompt__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink);
}

.image-prompt__text {
  max-width: 80ch;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-grey-dark);
  user-select: all; /* one click selects the whole prompt for copying */
}

.image-prompt__note {
  max-width: 80ch;
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-grey-mid);
}

@media (min-width: 768px) {
  .image-prompt {
    padding: var(--space-7);
  }
}