/* ── What is a creative director anyway? (/creative-director/) ───
   A guide for founders. Flat ink, like the other sub-pages. One
   accent: the venn overlap, the creative director's dot, the focused
   brand, and links. Everything renders without JS. */

/* ── Role line positions ───────────────────────────────────────
   The one list to edit. 0 is business, 100 is creativity. Kept in CSS
   rather than the script so the line still draws with JS off. If a
   dot moves past a neighbour, move its <li> in the page as well:
   labels alternate above and below by order. */
#rl-account-manager                            { --pos: 10; }
#rl-producer-or-project-manager                { --pos: 20; }
#rl-strategist                                 { --pos: 35; }
#rl-developer                                  { --pos: 45; }
#rl-creative-director                          { --pos: 50; }
#rl-editor                                     { --pos: 62; }
#rl-copywriter                                 { --pos: 70; }
#rl-art-director                               { --pos: 75; }
#rl-designer                                   { --pos: 82; }
#rl-photographer-illustrator-animator-filmmaker { --pos: 92; }

/* The venn's meet value, registered as a number so its default is the
   end state. */
@property --vp {
  syntax: '<number>';
  inherits: true;
  initial-value: 1.35;
}

.cd-page {
  color: var(--color-white);
}

/* The nav is fixed, so anything linked to lands below it */
.cd-page [id] {
  scroll-margin-top: 96px;
}

/* ── Shared ─────────────────────────────────────────────────── */
.cd-section,
.cd-open {
  max-width: calc(1200px + var(--pad-h) * 2);
  margin: 0 auto;
  padding: var(--space-xl) var(--pad-h) 0;
}

.cd-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 6vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 14em;
}

/* Every h2 here opens on W, Wh or a cap with the same bearing */
#the-role-h,
#where-each-one-sits-h,
#who-h,
#the-glossary-h {
  margin-left: -0.010em;
}

/* The last section closes the page with the full rung */
main > .cd-section:last-child {
  padding-bottom: var(--space-xl);
}

.cd-copy {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.6;
  max-width: 58ch;
  margin-top: var(--space-md);
  color: rgb(255 255 255 / 72%);
}

.cd-copy p + p {
  margin-top: 1em;
}

/* Links are one of the four things orange is for */
.cd-page main a {
  color: var(--color-orange);
  transition: color 0.2s var(--ease-snap);
}

.cd-page main a:hover {
  color: var(--color-white);
}

/* A quieter link inside running copy: white against the grey, with a
   fine underline so it still reads as a link without leaning on colour */
.cd-page main a.cd-quiet-link {
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgb(255 255 255 / 45%);
}

.cd-page main a.cd-quiet-link:hover {
  color: var(--color-orange);
  text-decoration-color: currentColor;
}

/* ── 1 · Opening ────────────────────────────────────────────── */
/* Starts high: the nav's height plus a rung, so the title card is in
   the first view, not half way down it */
.cd-open {
  padding-top: calc(var(--space-md) + 64px);
}

/* The title on a card someone has already scratched. The script draws
   the foil behind the h1 and scrapes it back along each line. The card
   reaches into the gutter by its own padding, so the words keep the
   page margin. */
.cd-title-card {
  position: relative;
  width: fit-content;
  max-width: calc(100% + var(--space-sm));
  margin-left: calc(var(--space-sm) * -1);
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-sm);
}

@media (max-width: 599px) {
  .cd-title-card { padding-right: var(--space-sm); }
}

/* In front of the h1: what's left of the foil bites into the letters,
   as a rushed scratch leaves it. The h1 is still the text underneath. */
.cd-title-foil {
  z-index: 2;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-cta);
  pointer-events: none;
}

.cd-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 9vw, 150px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  max-width: 9em;
  text-wrap: balance;
}

.cd-title .opt-w {
  display: block;
}

/* Straight under the title card, as a standfirst: bigger and in full
   white, then the next paragraph back at body size */
.cd-open .cd-copy {
  margin-top: calc(var(--space-sm) + 8px);
}

.cd-standfirst {
  max-width: 34em;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.4;
  color: var(--color-white);
  text-wrap: pretty;
}

.cd-copy .cd-standfirst + p {
  margin-top: 1.2em;
}

/* Scraped foil falling off a card. Fixed over the page, never in the way */
.cd-flakes {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  pointer-events: none;
}

/* ── 2 · The role: the homepage venn, relabelled ──────────────
   Geometry, keyline and z-order from styles/sections/venn.css: two
   discs set from the frame's centre and moved by --vp, the lens is the
   right disc clipped by the left, so only the shared ground fills.
   Here the circles are bigger and come in from beyond the edges of the
   screen as you scroll (scripts/creative-director.js), holding on a
   pinned stage. They meet at --vp 1.35. Without the script, or with
   reduced motion, it sits there from the start. */
.cd-venn-track {
  position: relative;
  margin-top: var(--space-md);
}

.cd-venn-track.is-live {
  height: 260vh;
}

.cd-venn-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-md);
}

.cd-venn-track.is-live .cd-venn-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-block: 0;
}

.cd-venn {
  margin: 0;
}

.cd-venn-frame {
  --vd: min(calc((100vw - var(--pad-h) * 2) / 1.66), 660px, 74svh);
  position: relative;
  width: calc(var(--vd) * 1.66);
  height: var(--vd);
  margin: 0 auto;
}

.cd-venn-disc,
.cd-venn-lens {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.cd-venn-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgb(255 255 255 / 85%);
}

/* Left: everything you want to say, the business */
.cd-venn-disc--know {
  z-index: 3;
  transform: translateX(calc(-114% + 23.5% * var(--vp)));
}

/* Right: attention, the creativity */
.cd-venn-disc--notice {
  z-index: 1;
  transform: translateX(calc(14% - 24% * var(--vp)));
}

/* The only filled area in the section */
.cd-venn-lens {
  z-index: 2;
  background-color: var(--color-orange);
  transform: translateX(calc(14% - 24% * var(--vp)));
  clip-path: circle(50% at calc(50% - (128% - 47.5% * var(--vp))) 50%);
}

.cd-venn-tag {
  max-width: calc(var(--vd) * 0.5);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 3.2vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-align: center;
}

/* The subline, inside the circle, once the circles have met */
.cd-venn-tag em {
  display: block;
  margin-top: 0.55em;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(12px, 1.3vw, 18px);
  line-height: 1.35;
  letter-spacing: 0;
  color: rgb(255 255 255 / 72%);
  opacity: var(--vt, 1);
  transform: translateY(calc((1 - var(--vt, 1)) * 8px));
  text-wrap: balance;
}

/* Each label centred in the part of its disc the overlap doesn't take */
.cd-venn-disc--know .cd-venn-tag { transform: translateX(calc(var(--vd) * -0.18)); }
.cd-venn-disc--notice .cd-venn-tag { transform: translateX(calc(var(--vd) * 0.18)); }

.cd-venn-overlap-tag {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(13px, 2vw, 28px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--color-ink);
  opacity: var(--vo, 1);
  pointer-events: none;
}

/* The display line: the strongest line on the page. Large, in the
   display face, white. No orange. The quotation mark hangs in the
   margin so the words keep the edge. */
.cd-display-line {
  margin-top: var(--space-xl);
  max-width: 12em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 8vw, 128px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-indent: -0.40em;
  text-wrap: balance;
}

/* Long passages: hold the measure near 65 characters */
#the-role .cd-copy,
#drawer-of-wonder .cd-copy,
#friends .cd-copy {
  max-width: 62ch;
}

#drawer-of-wonder-h { margin-left: -0.010em; }
#friends-h { margin-left: -0.010em; } /* F, like E */

/* ── 3 · Who does what: scratchcards ──────────────────────────
   Each card is foil, printed with the job title. Under it, the need
   on the left with the title in brackets, what they do on the right,
   sharing a first baseline. With JS off there is no foil. */
.cd-roles {
  list-style: none;
  margin-top: var(--space-lg);
}

.cd-role {
  padding: var(--space-sm) 0;
}

.cd-card {
  position: relative;
  display: grid;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--sb-hairline);
}

.cd-need {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 14em;
  text-wrap: balance;
}

.cd-role-name {
  margin-top: 0.6em;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
  color: rgb(255 255 255 / 60%);
}

.cd-role-body {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  max-width: 54ch;
  color: rgb(255 255 255 / 72%);
}

.cd-ask {
  margin-top: 0.8em;
}

.cd-ask span {
  font-weight: 500;
  color: var(--color-white);
}

@media (min-width: 900px) {
  .cd-card {
    grid-template-columns: 5fr 7fr;
    align-items: baseline;
  }
}

/* The foil: over the whole card, a little past it all round */
.cd-scratch-surface {
  position: absolute;
  inset: calc(var(--space-xs) * -1);
  padding: var(--space-sm);
  border-radius: var(--radius-cta);
  cursor: pointer;
  touch-action: pan-y;
  transition: opacity 0.5s var(--ease-out);
  z-index: 2;
}

.cd-scratch-surface canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.cd-scratch-surface.is-done {
  opacity: 0;
  pointer-events: none;
}

/* Under the foil, the card's content waits unseen by the eye only */
.cd-role.is-locked .cd-role-head,
.cd-role.is-locked .cd-role-body {
  user-select: none;
}


/* ── 4 · Where each one sits ────────────────────────────────── */
.cd-line {
  --dot: 12px;
  margin-top: var(--space-lg);
  font-family: var(--font-body);
}

.cd-line-end {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.01em;
  line-height: 1;
}

.cd-line-track {
  position: relative;
  list-style: none;
}

/* The line */
.cd-line-track::before {
  content: "";
  position: absolute;
  background-color: rgb(255 255 255 / 85%);
}

.cd-dot {
  position: absolute;
}

.cd-dot a {
  position: absolute;
  display: block;
  color: var(--color-white);
  text-decoration: none;
}

.cd-page main .cd-dot a {
  color: var(--color-white);
}

.cd-dot-mark {
  position: absolute;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background-color: var(--color-white);
  transition: transform 0.2s var(--ease-snap);
}

/* The one orange dot */
.cd-dot--cd .cd-dot-mark {
  --dot: 16px;
  background-color: var(--color-orange);
}

.cd-dot-label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.cd-dot a:hover .cd-dot-label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cd-dot a:hover .cd-dot-mark,
.cd-dot a:focus-visible .cd-dot-mark {
  transform: scale(1.35);
}

/* Narrow: the line stands up, labels to the right */
@media (max-width: 767px) {
  .cd-line {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .cd-line-track {
    height: 42rem;
    margin-left: 8px;
  }

  .cd-line-track::before {
    left: 0;
    top: 0;
    bottom: 0;
    width: 1.5px;
  }

  .cd-dot {
    left: 0;
    top: calc(var(--pos) * 1%);
  }

  .cd-dot a {
    left: 0;
    top: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    min-height: 44px;
    width: max-content;
    max-width: calc(100vw - var(--pad-h) * 2 - 20px);
    padding-left: 20px;
  }

  .cd-dot-mark {
    left: calc(var(--dot) / -2 + 0.75px);
    top: 50%;
    margin-top: calc(var(--dot) / -2);
  }
}

/* Wide: one line across, business to creativity. Labels alternate above
   and below, near and far, on a thin stem, so neighbours never collide */
@media (min-width: 768px) {
  .cd-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-sm);
  }

  .cd-line-track {
    height: 22em;
  }

  .cd-line-track::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1.5px;
    margin-top: -0.75px;
  }

  .cd-dot {
    --near: 2.2em;
    --far: 6.8em;
    left: calc(var(--pos) * 1%);
    top: 50%;
  }

  /* Stem from the dot to its label */
  .cd-dot::before {
    content: "";
    position: absolute;
    left: -0.5px;
    width: 1px;
    background-color: rgb(255 255 255 / 30%);
  }

  .cd-dot a {
    left: 0;
    width: 9.5em;
    margin-left: -4.75em;
    text-align: center;
  }

  .cd-dot-mark {
    left: 50%;
    margin-left: calc(var(--dot) / -2);
  }

  /* Above, near */
  .cd-dot:nth-child(4n+1)::before { bottom: 0; height: var(--near); }
  .cd-dot:nth-child(4n+1) a { bottom: calc(var(--dot) / -2); padding-bottom: calc(var(--near) + var(--dot) / 2 + 6px); }
  /* Below, near */
  .cd-dot:nth-child(4n+2)::before { top: 0; height: var(--near); }
  .cd-dot:nth-child(4n+2) a { top: calc(var(--dot) / -2); padding-top: calc(var(--near) + var(--dot) / 2 + 6px); }
  /* Above, far */
  .cd-dot:nth-child(4n+3)::before { bottom: 0; height: var(--far); }
  .cd-dot:nth-child(4n+3) a { bottom: calc(var(--dot) / -2); padding-bottom: calc(var(--far) + var(--dot) / 2 + 6px); }
  /* Below, far */
  .cd-dot:nth-child(4n+4)::before { top: 0; height: var(--far); }
  .cd-dot:nth-child(4n+4) a { top: calc(var(--dot) / -2); padding-top: calc(var(--far) + var(--dot) / 2 + 6px); }

  .cd-dot:nth-child(4n+1) .cd-dot-mark,
  .cd-dot:nth-child(4n+3) .cd-dot-mark { bottom: 0; }

  .cd-dot:nth-child(4n+2) .cd-dot-mark,
  .cd-dot:nth-child(4n+4) .cd-dot-mark { top: 0; }
}

.cd-line-note {
  margin-top: var(--space-md);
}

/* ── 5 · The glossary ───────────────────────────────────────── */
.cd-glossary {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--sb-hairline);
}

.cd-term {
  display: grid;
  gap: 0.4em var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--sb-hairline);
}

.cd-term dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.cd-term dd {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  max-width: 58ch;
  color: rgb(255 255 255 / 72%);
}

@media (min-width: 768px) {
  .cd-term {
    grid-template-columns: 5fr 7fr;
    align-items: baseline;
  }
}

/* ── 7 · The close ──────────────────────────────────────────── */
.cd-close-lead {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 6vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 13em;
  margin-left: -0.004em; /* opens on A */
  text-wrap: balance;
}

/* The one button on the page: the site's primary .cta, layout only */
.cd-close-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-md);
}

/* .cta's look comes from base.css; the page's link colour mustn't win */
.cd-page main a.cta {
  color: var(--color-orange);
}

.cd-page main a.cta:hover {
  color: var(--color-ink);
}

/* ── 6 · Who's telling you all this (parked: not on the page) ──
   Kept for the jump-cut portrait version. See the note in the page.

   The portrait sits still at the foot; the brands sit in a loose arc
   over his head, at rest opacity. Positions are set here for the seven
   brands, so the arc draws without JS; the script recomputes them for
   any count. */
.cd-who {
  padding-bottom: var(--space-xl);
}

.cd-think {
  position: relative;
  width: min(100%, 900px);
  aspect-ratio: 900 / 660;
  margin: var(--space-lg) auto var(--space-md);
}

.cd-portrait {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 52%;
  transform: translateX(-50%);
}

.cd-portrait-img {
  width: 100%;
}

.cd-brands {
  list-style: none;
}

.cd-brand {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: 2;
  /* 40% white on ink is 3.7:1, which passes for large type (the names
     are 20px and up, at 800) and for graphics */
  opacity: 0.4;
  color: var(--color-white);
  white-space: nowrap;
  transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));
  transition:
    opacity 0.3s var(--ease-out),
    color 0.3s var(--ease-out),
    transform 0.4s var(--ease-out);
}

.cd-brand:hover,
.cd-brand.is-near {
  opacity: 1;
  color: var(--color-orange);
}

.cd-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  line-height: 1;
}

/* A supplied SVG, drawn in the current colour whatever its own fill */
.cd-brand-mark {
  display: block;
  height: clamp(24px, 2.8vw, 38px);
  background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

.cd-brand:nth-child(1) { --x: 10;  --y: 47; }
.cd-brand:nth-child(2) { --x: 16;  --y: 24; }
.cd-brand:nth-child(3) { --x: 31;  --y: 11; }
.cd-brand:nth-child(4) { --x: 50;  --y: 5;  }
.cd-brand:nth-child(5) { --x: 69;  --y: 12; }
.cd-brand:nth-child(6) { --x: 84;  --y: 25; }
.cd-brand:nth-child(7) { --x: 90;  --y: 46; }

/* Level 2: nine photos stacked, one shown. Built by the script only when
   all nine exist. */
.cd-gaze {
  position: absolute;
  inset: 0;
}

.cd-gaze img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.12s linear;
}

.cd-gaze img.on {
  opacity: 1;
}

.cd-portrait.has-gaze .cd-portrait-img {
  visibility: hidden;
}

/* Touch, or too narrow for the arc: a tidy grid under the portrait, at
   full opacity */
@media (hover: none), (max-width: 599px) {
  .cd-think {
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: auto;
  }

  .cd-portrait {
    position: relative;
    left: auto;
    width: min(80%, 420px);
    transform: none;
  }

  .cd-brands {
    order: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
    gap: var(--space-sm) var(--space-xs);
    width: 100%;
    margin-top: var(--space-md);
    text-align: center;
  }

  .cd-brand {
    position: static;
    opacity: 1;
    transform: none;
    white-space: normal;
  }

  .cd-brand-mark {
    margin: 0 auto;
  }

  .cd-brand:hover {
    color: var(--color-white);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd-brand {
    transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) and ((hover: none) or (max-width: 599px)) {
  .cd-brand {
    transform: none;
  }
}