/* Dark theme, switched on by theme.js (html[data-theme="dark"]). Text that was navy turns
   white, the homepage sky turns to night, and the paper pages take a dark dot grid
   (after the postcard on carterogunsola.com/about). Cards, buttons and other components
   keep their own colours, so where they let the page colour through they are pinned
   back to navy here. */

[data-theme="dark"] {
  color-scheme: dark;
  /* The night paper: grey dots on charcoal with two faint layers of grain */
  --night-paper: #2b2b2b;
  --night-grid:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cg fill='%23808080' fill-opacity='0.04'%3E%3Ccircle cx='4' cy='4' r='1.05'/%3E%3Ccircle cx='0' cy='0' r='1.05'/%3E%3Ccircle cx='8' cy='0' r='1.05'/%3E%3Ccircle cx='0' cy='8' r='1.05'/%3E%3Ccircle cx='8' cy='8' r='1.05'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.028'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.034'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* The line waves on the service pages (read by wave.js) */
  --wave-ink: var(--white);
}

/* ---------- Everywhere ---------- */

[data-theme="dark"] body { background: #0b1517; color: var(--white); }
[data-theme="dark"] :focus-visible { outline-color: var(--white); }

/* The white logo, and a white scroll bar */
[data-theme="dark"] .logo .logo-light { opacity: 1; }
[data-theme="dark"] .logo .logo-dark { opacity: 0; }
[data-theme="dark"] .rail-line { --rail: 255, 255, 255; background: rgba(var(--rail), .4); }

/* The folded menu: names on a patch of night instead of paper */
@media (max-width: 1180px) {
  [data-theme="dark"] .menu-list::before {
    background: rgba(30, 32, 34, .92);
    box-shadow: 0 0 22px 16px rgba(30, 32, 34, .92);
  }
  [data-theme="dark"] .chrome .menu-list .pill { color: var(--white); }
}

/* ---------- Homepage ---------- */

[data-theme="dark"] .weighted,
[data-theme="dark"] .tagline,
[data-theme="dark"] .services,
[data-theme="dark"] .side,
[data-theme="dark"] .privacy-link { color: var(--white); }

/* The banner stays white, with navy words */
[data-theme="dark"] .human-band { color: var(--navy); }

/* Services list and wheel */
[data-theme="dark"] .service,
[data-theme="dark"] .svc-stage { border-top-color: var(--white); }
[data-theme="dark"] .service-icon { stroke: var(--white); }
[data-theme="dark"] .svc-item { color: rgba(255, 255, 255, .3); }
[data-theme="dark"] .svc-item:hover,
[data-theme="dark"] .svc-item.is-active { color: var(--white); }
[data-theme="dark"] .svc-item:focus-visible { outline-color: var(--white); }

/* Black metal would vanish into the night sky, so the plain metal turns silver
   (the lilac line keeps its own colours) */
[data-theme="dark"] .fill-title:not(.metal-lilac) .fl {
  --m1: 222, 226, 232;
  --m2: 196, 201, 209;
  --m3: 240, 242, 246;
  --m4: 182, 188, 197;
  --m5: 208, 212, 219;
  --m6: 170, 176, 186;
}

/* Highlights: a full white band that the letters turn navy inside, like the banners */
[data-theme="dark"] .side mark {
  background-position: 0 55%;
  background-size: 0 1.15em;
}
[data-theme="dark"] .side mark.is-lit { background-size: 100% 1.15em; }
[data-theme="dark"] .side mark.is-lit .mc {
  color: var(--navy);
  transition: -webkit-text-stroke-width .25s ease calc(var(--i) * 30ms), color .2s ease calc(var(--i) * 30ms);
}

/* ---------- Paper pages: the dark dot grid ---------- */

html.page[data-theme="dark"] body {
  background: var(--night-grid), var(--night-paper);
}
[data-theme="dark"] .paper {
  border-color: rgba(247, 247, 247, .06);
  background: var(--night-grid), var(--night-paper);
}
[data-theme="dark"] .chrome .pill,
[data-theme="dark"] .chrome .cta,
[data-theme="dark"] .chrome .theme-toggle { box-shadow: none; }

/* Service pages */
[data-theme="dark"] .svc-page { color: var(--white); }
[data-theme="dark"] .svc-head { border-bottom-color: var(--white); }
/* The bottom banner turns white, with navy words */
[data-theme="dark"] .story-banner { background: var(--white); color: var(--navy); }

/* Digital ads */
[data-theme="dark"] .shifts-grid {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .22);
}
[data-theme="dark"] .shift { background: var(--night-paper); color: var(--white); }
[data-theme="dark"] .flight-path path { stroke: var(--white); }
[data-theme="dark"] .flight-node { color: var(--navy); }
[data-theme="dark"] .flight-node::before { background: var(--white); box-shadow: 0 0 0 6px var(--night-paper); }
[data-theme="dark"] .quote-mark { stroke: var(--white); }
/* The yellow marker covers the whole line so the words can turn navy on it */
[data-theme="dark"] .quote mark { color: var(--navy); background-position: 0 55%; background-size: 0 1.15em; }
[data-theme="dark"] .is-in .quote mark { background-size: 100% 1.15em; }
@media (max-width: 760px) {
  [data-theme="dark"] .flight-steps { border-left-color: var(--white); }
}

/* Brand development */
[data-theme="dark"] .versus-b { -webkit-text-stroke-color: var(--white); }
[data-theme="dark"] .prism-hex { fill: var(--white); }
[data-theme="dark"] .pillar { border-color: var(--white); background: var(--night-paper); color: var(--white); }
[data-theme="dark"] .pillar:hover,
[data-theme="dark"] .pillar.is-active { background: var(--white); color: var(--navy); }
[data-theme="dark"] .prism-frame { color: var(--navy); }

/* Creative content */
[data-theme="dark"] .platform { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .platform-logo { fill: var(--white); }
[data-theme="dark"] .creative-note { color: var(--navy); }

/* Websites */
[data-theme="dark"] .flow { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .flow-head { border-bottom-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] .flow-row + .flow-row { border-top-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] .flow-lane { border-right-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] .flow-track {
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, .1) 0 1px, transparent 1px calc(100% / 8));
}
[data-theme="dark"] .flow-bar { color: var(--navy); }

/* Let's chat */
[data-theme="dark"] .contact-row + .contact-row { border-top-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .chip,
[data-theme="dark"] .segments { background-color: rgba(255, 255, 255, .94); }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field textarea:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
[data-theme="dark"] .chip:has(input:checked) { border-color: var(--white); }
[data-theme="dark"] .currency { border-color: rgba(255, 255, 255, .3); }
[data-theme="dark"] .currency button { color: var(--white); }
[data-theme="dark"] .group-error,
[data-theme="dark"] .send-error { color: #ff9a8f; }
[data-theme="dark"] .was-checked .field input:invalid,
[data-theme="dark"] .was-checked .field textarea:invalid { border-color: #ff9a8f; }

/* ---------- Who is Letamedia? and Are we a good match? ---------- */

/* The postcard takes the dark grid; its inked marks turn white */
[data-theme="dark"] .postcard {
  border-color: rgba(247, 247, 247, .06);
  background: var(--night-grid), var(--night-paper);
}
[data-theme="dark"] .postcard .field,
[data-theme="dark"] .linkedin { color: var(--white); }
[data-theme="dark"] .stamp-cap { color: rgba(255, 255, 255, .72); }
[data-theme="dark"] .cancel,
[data-theme="dark"] .postmark { stroke: var(--white); }
[data-theme="dark"] .postmark text { fill: var(--white); }
[data-theme="dark"] .postmark-logo { filter: brightness(0) invert(1); }
[data-theme="dark"] .links,
[data-theme="dark"] .foot { border-bottom-color: rgba(255, 255, 255, .28); }
[data-theme="dark"] .sheet { color: var(--white); }
[data-theme="dark"] .fold-btn { box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
[data-theme="dark"] .more-btn { box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
[data-theme="dark"] .step-num { color: var(--navy); }
[data-theme="dark"] .step-num::before { background: var(--white); }