/* ============================================================
   ENABLED COPYWRITING
   ============================================================ */

:root {
  --bg: #fbf9f2;
  --ink: #000000;
  --nav-size: clamp(20px, 2.4vw, 34px);
  --hero-size: clamp(40px, 6vw, 104px);
  --lead-size: var(--hero-size);   /* match the hero phrases */
  --pad: clamp(18px, 3vw, 44px);
  --col-gap: clamp(12px, 1.4vw, 26px);
}

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

html { scroll-behavior: auto; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.07em;       /* tight tracking, sitewide */
  line-height: 1.1;              /* tight leading, sitewide */
  -webkit-font-smoothing: antialiased;
}
body.lock { overflow: hidden; height: 100vh; }

/* --- fixed full-screen background -------------------------- */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--bg)
    url("Images/Site BackgroundSite Background.jpg") center center / cover no-repeat;
}

/* --- Lenis smooth scroll ---------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------------
   12-COLUMN GRID
   ------------------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.grid-overlay.is-on { opacity: 1; }
.grid-overlay .grid { height: 100%; }
.grid-overlay span {
  background: rgba(214, 78, 78, 0.16);
  border-left: 1px solid rgba(214, 78, 78, 0.5);
  border-right: 1px solid rgba(214, 78, 78, 0.5);
}

/* ------------------------------------------------------------
   PRELOADER
   ------------------------------------------------------------ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg) url("Images/Site BackgroundSite Background.jpg") center / cover no-repeat;
}
.loader__logo {
  width: clamp(220px, 34vw, 520px);
  height: auto;
  opacity: 0;
}
.loader.is-in .loader__logo  { animation: logoIn 0.9s ease forwards; }
.loader.is-out .loader__logo { animation: logoOut 0.7s ease forwards; }
.loader.is-gone { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }

@keyframes logoIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes logoOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.01); }
}

/* ------------------------------------------------------------
   NAV
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding-top: var(--pad);
  padding-bottom: var(--pad);
  mix-blend-mode: difference;          /* inverts as dark text passes behind it */
}
.nav__mask { overflow: hidden; }      /* mask for the reveal-up */
.nav__inner {
  align-items: center;
  color: #fff;                         /* white + difference => dark on light, light on dark */
  font-weight: 700;
  font-size: var(--nav-size);
  transform: translateY(115%);        /* hidden below the mask */
}
.nav__menu img { filter: invert(1); }  /* white star, so it inverts with the rest */
.nav.is-revealed .nav__inner {
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__item   { white-space: nowrap; }
.nav a, a.nav__item { color: inherit; text-decoration: none; }
.nav__item--a { grid-column: 1 / span 4; }
.nav__item--b { grid-column: 5 / span 4; }
.nav__end {
  grid-column: 9 / span 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 1.4vw, 26px);
}

.nav__menu {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: clamp(28px, 3vw, 40px);
  height: clamp(28px, 3vw, 40px);
  display: grid;
  place-items: center;
  transition: transform 0.4s ease;
}
.nav__menu img { width: 100%; height: 100%; display: block; }
.nav__menu:hover { transform: rotate(72deg); }

/* ------------------------------------------------------------
   HERO  (sticky left lead + scrolling right phrases)
   ------------------------------------------------------------ */
.hero { position: relative; }

.hero__left {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
.hero__lead {
  font-weight: 700;
  font-size: var(--hero-size);
  line-height: 0.92;
}
.caret {
  display: inline-block;
  width: 0.06em;
  height: 0.92em;
  margin-left: 0.04em;
  vertical-align: -0.12em;
  background: var(--ink);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.hero__right { grid-column: 5 / span 8; }

.phrase-slot {
  height: 100vh;
  display: flex;
  align-items: center;
}
.phrase { overflow: hidden; }
.phrase__inner {
  display: block;
  font-weight: 700;
  font-size: var(--hero-size);
  line-height: 0.92;
}
.pch { visibility: hidden; }
.pch.show { visibility: visible; }

/* ------------------------------------------------------------
   REUSABLE BODY COPY
   ------------------------------------------------------------ */
.body-copy {
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.045em;
}
.body-copy p + p,
.body-copy .lead__p + .lead__p { margin-top: 1em; }

/* ------------------------------------------------------------
   MANIFESTO  (scroll-scrubbed: headline types in, image + body
   reveal, then heading exits and the body chases after it)
   ------------------------------------------------------------ */
.manifesto {
  position: relative;
  background: transparent;
  height: 180vh;                 /* scroll track to scrub through */
}
.manifesto__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: calc(var(--nav-size) + 2 * var(--pad));   /* centre below the nav */
  display: flex;
  align-items: center;
  overflow: hidden;              /* clip the exiting layers */
}
.manifesto__inner { width: 100%; }

.lead {
  grid-column: 1 / -1;           /* title justified to the site margin */
  font-weight: 700;
  font-size: var(--lead-size);
  line-height: 0.98;
  will-change: transform;
}
.lead__seg .ch { visibility: hidden; }
.lead__seg .ch.show { visibility: visible; }

/* row beneath the title: image left, body copy right */
.manifesto__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: start;
  margin-top: clamp(16px, 3vh, 44px);
  will-change: transform;
}
.manifesto__media {
  grid-column: 1 / span 3;
  margin-top: clamp(12px, 2vh, 32px);   /* sit a little lower than the body */
  aspect-ratio: 4 / 5;
  max-height: 46vh;              /* keep the whole block within the viewport */
  overflow: hidden;              /* mask for the reveal-up */
}
.manifesto__media__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #cfcabb url("Images/working-from-home.jpg") center / cover no-repeat;
  transform: translateY(100%);   /* hidden below the mask, revealed up by JS */
  will-change: transform;
}
.manifesto__body {
  grid-column: 6 / span 6;       /* nudged right of the image */
  opacity: 0;                    /* revealed by scroll (JS) */
  will-change: opacity, transform;
}

/* the inline on/off switch */
.switch {
  display: inline-flex;
  position: relative;
  width: 1.95em;
  height: 0.92em;
  vertical-align: -0.04em;
  border: 0.085em solid var(--ink);
  border-radius: 0.5em;
  background: transparent;
  overflow: hidden;
  opacity: 0;                    /* fades in with the typewriter (JS) */
  transition: background 0.45s ease;
}
.switch__knob {
  position: absolute;
  top: 50%;
  left: 0.12em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--ink);
  transform: translateY(-50%);
  transition: left 0.5s cubic-bezier(0.6, 0, 0.2, 1), background 0.45s ease;
}
.switch__label {
  position: absolute;
  top: 50%;
  left: 0.3em;
  transform: translateY(-50%);
  color: var(--bg);
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: -0.04em;
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}
.switch.is-on { background: var(--ink); }
.switch.is-on .switch__knob { left: calc(100% - 0.72em); background: var(--bg); }
.switch.is-on .switch__label { opacity: 1; }

/* ------------------------------------------------------------
   ENABLERS  (Idea / Brand scramble in, separate, reveal the line)
   ------------------------------------------------------------ */
.enablers {
  position: relative;
  height: 300vh;                 /* scroll track */
  background: transparent;
}
.enablers__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.enablers__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-size: var(--hero-size);   /* drives word size + em gap */
  max-width: 100%;
  will-change: transform;
}
.enablers__word {
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
}
.enablers__word > span { display: inline-block; }
.enablers__box {
  flex: none;
  width: 0;
  height: 1.7em;
  overflow: hidden;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(15px, 1.5vw, 26px);   /* box text size */
}
.enablers__box-text {
  white-space: nowrap;
  color: var(--bg);
  font-weight: 700;
  letter-spacing: -0.04em;
  padding: 0 1.1em;
}

/* ------------------------------------------------------------
   WHO WE'VE ENABLED  (sticky title, client list slides up)
   ------------------------------------------------------------ */
.enabled-list { position: relative; }     /* height set by JS for a 1:1 list scroll */
.enabled-list__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: calc(var(--nav-size) + 2 * var(--pad) + 3vh);
  overflow: hidden;              /* clips the list + the exit */
}
.enabled-list__inner { width: 100%; will-change: transform; }
.enabled-list__left { grid-column: 1 / span 3; align-self: start; }
.enabled-list__title {
  font-weight: 700;
  font-size: var(--lead-size);   /* same as the manifesto header */
  line-height: 0.98;
}
.enabled-list__col {
  grid-column: 5 / span 8;       /* aligns to "Copywriting" in the nav */
  height: calc(100vh - (var(--nav-size) + 2 * var(--pad) + 3vh) - 6vh);
  /* no clip here — names scroll up UNDER the nav (clipped by the pin at the very top),
     so the nav's mix-blend inversion applies as they pass behind it */
}
.enabled-list__names {
  list-style: none;
  font-weight: 700;
  font-size: var(--hero-size);
  line-height: 0.98;             /* one tight column, no gaps */
  will-change: transform;
}

/* ------------------------------------------------------------
   SELECTED WORK  (giant heading slides R -> L)
   ------------------------------------------------------------ */
.work-intro { position: relative; height: 220vh; }
.work-intro__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.work-intro__heading {
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(64px, 12vw, 200px);   /* bigger than H1 */
  line-height: 1;
  transform: translateX(100vw);          /* starts off the right (JS scrubs) */
  will-change: transform;
}

/* ------------------------------------------------------------
   JOURNAL  (article list + hover image)
   ------------------------------------------------------------ */
.journal {
  position: relative;
  padding-top: 16vh;
  padding-bottom: 16vh;
}
.journal__item {
  text-decoration: none;
  color: var(--ink);
  align-items: start;
  padding-top: clamp(16px, 3vh, 44px);
  padding-bottom: clamp(16px, 3vh, 44px);
}
.journal__source { grid-column: 1 / span 3; }
.journal__title {
  grid-column: 5 / span 5;               /* aligned to "Copywriting" in the nav */
  font-weight: 700;
  font-size: clamp(24px, 3vw, 52px);     /* H2: bigger than body, smaller than H1 */
  line-height: 1.04;
}

.journal__image {
  position: absolute;
  top: 0;
  right: var(--pad);
  width: clamp(300px, 32vw, 540px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 2;
}
.journal__image.is-visible { opacity: 1; }
.journal__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* TLDR directly below the articles */
.journal__tldr { margin-top: clamp(40px, 8vh, 120px); }
.journal__tldr-link {
  grid-column: 5 / span 8;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--hero-size);
  line-height: 0.98;
}

/* ------------------------------------------------------------
   CLOSER  (TLDR sticks at the bottom, footer card swipes over)
   ------------------------------------------------------------ */
.closer { position: relative; height: 180vh; }
.closer__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.closer__tldr {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(8vh, 12vh, 16vh);
}
.closer__tldr-link {
  grid-column: 5 / span 8;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--hero-size);
  line-height: 0.98;
}

/* full-screen footer card that swipes up (JS scrubs translateY) */
.site-footer {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-size) + 2 * var(--pad)) var(--pad) clamp(5vh, 7vh, 9vh);
  transform: translateY(100%);
  will-change: transform;
}
.site-footer__top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: start;
}
.site-footer__head {
  grid-column: 1 / span 5;
  grid-row: 1;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 64px);
  line-height: 1.05;
}
.site-footer__contact { grid-column: 6 / span 4; grid-row: 1; }
.site-footer__social  { grid-column: 10 / span 3; grid-row: 1; }
.site-footer__social a { color: var(--bg); text-decoration: none; }
.site-footer__social a:hover { text-decoration: underline; }
.site-footer__logo {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);   /* the loader logo, in white */
}

/* ------------------------------------------------------------
   ARTICLE PAGE  (left meta sticky, right text mask-reveals + scrolls)
   ------------------------------------------------------------ */
.article {
  position: relative;
  align-items: start;
  padding-top: calc(var(--nav-size) + 2 * var(--pad) + 5vh);
  padding-bottom: 18vh;
}
.article__meta {
  grid-column: 1 / span 3;
  position: sticky;
  top: calc(var(--nav-size) + 2 * var(--pad) + 5vh);
  align-self: start;
}
.article__info {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7em;
  row-gap: 0.05em;
  margin: 0 0 clamp(20px, 4vh, 44px);
}
.article__info dt { font-weight: 700; white-space: nowrap; }
.article__info dd { margin: 0; font-weight: 700; }
.article__image { aspect-ratio: 4 / 5; overflow: hidden; }
.article__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article__body { grid-column: 5 / span 7; }
.article__title,
.article__body p {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 52px);   /* same as homepage article titles (H2) */
  line-height: 1.06;
}
.article__title { margin: 0 0 clamp(20px, 4vh, 48px); }
.article__body p { margin: 0 0 clamp(18px, 3vh, 40px); }
.article__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.1em; }

/* mask reveal up */
.reveal { overflow: hidden; }
.reveal > span { display: block; transform: translateY(110%); }
.reveal.is-in > span {
  transform: translateY(0);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  :root { --hero-size: clamp(34px, 9vw, 64px); }
  .nav__item--a { grid-column: 1 / span 5; }
  .nav__item--b { display: none; }       /* keep the bar uncluttered on small screens */
  .nav__end     { grid-column: 7 / span 6; }
  .hero__left   { grid-column: 1 / span 12; height: auto; position: static; padding-top: 22vh; padding-bottom: 6vh; }
  .hero__right  { grid-column: 1 / span 12; }
  .phrase-slot  { height: 78vh; }
  .manifesto__media { grid-column: 1 / span 12; aspect-ratio: 16 / 10; }
  .manifesto__body  { grid-column: 1 / span 12; margin-top: 1em; }
  .manifesto__row   { row-gap: 1.2em; }
  .enabled-list__left { grid-column: 1 / span 12; margin-bottom: 0.3em; }
  .enabled-list__col  { grid-column: 1 / span 12; }
  .journal__source { grid-column: 1 / span 12; }
  .journal__title  { grid-column: 1 / span 12; }
  .journal__image  { display: none; }            /* no hover on touch */
  .closer__tldr-link  { grid-column: 1 / span 12; }
  .site-footer__head  { grid-column: 1 / span 12; }
  .site-footer__contact { grid-column: 1 / span 12; grid-row: 2; margin-bottom: 0.6em; }
  .site-footer__social  { grid-column: 1 / span 12; grid-row: 3; }
  .article__meta { grid-column: 1 / span 12; position: static; margin-bottom: 1em; }
  .article__body { grid-column: 1 / span 12; }
}