/* The studio's theme on its home (phase 8, R-28): the same switch and the same stored choice as every
   new-flow page (<html data-theme> from localStorage 'ds-theme', dark when unset, set in the head before
   the first paint; the device's own dark-mode setting never decides it). Dark is the board as it was.
   Light is Chalk Panels' pattern at the pick's strength: the board, the header, the scene and the
   headlines stay on the dark ground, and the blocks a visitor reads (the three promises, the five
   offers, the closing ask) sit on chalk #E7EBF0 panels in Board ink. Nothing here moves anything. */

/* The switch: a chalk-edged square at the end of the header. The sun shows on the board (it offers
   light), the moon in light. */
.ds-switch {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; margin: 0;
  border: 2px dashed rgba(231, 235, 240, 0.4); border-radius: 10px 14px 9px 13px; background: transparent;
  color: var(--paper); cursor: pointer;
}
.ds-switch svg { width: 22px; height: 22px; display: block; }
.ds-switch svg path, .ds-switch svg circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-switch .ds-moon { display: none; }
html[data-theme="light"] .ds-switch .ds-sun { display: none; }
html[data-theme="light"] .ds-switch .ds-moon { display: block; }
@media (hover: hover) { .ds-switch:hover { border-style: solid; border-color: var(--paper); } }
@media (max-width: 767px) {
  /* On a phone the switch keeps its 44 px target and draws a 36 px square inside it. */
  .ds-switch { width: 36px; height: 36px; position: relative; }
  .ds-switch::after { content: ""; position: absolute; inset: -4px; }
  .ds-switch svg { width: 19px; height: 19px; }
}
/* Under 480 the name, "Work", the button and the switch need about 410 px and a 390 phone's header has
   358, so the name ran into "Work". "Work" goes there, as chalk.css already lets it go under 375 and
   "What we make" under 768: the work is the next thing down the page. */
@media (max-width: 479px) { .top nav a[href="#work"] { display: none; } }

/* ---------- Light: chalk panels on the board ---------- */
html[data-theme="light"] {
  --ds-panel: #e7ebf0; --ds-panel-ink: #0e1116; --ds-panel-ink-2: #3b424c;
  --ds-panel-dash: rgba(14, 17, 22, 0.26);
}

/* The three promises: one panel, dashed rows inside */
html[data-theme="light"] .proofs {
  background: var(--ds-panel); color: var(--ds-panel-ink); border-radius: 8px;
  padding: 0.3rem clamp(20px, 2.6vw, 34px);
}
html[data-theme="light"] .proofs li { color: var(--ds-panel-ink-2); border-top: 2px dashed var(--ds-panel-dash); }
html[data-theme="light"] .proofs li:first-child { border-top: 0; }
html[data-theme="light"] .proofs strong { color: var(--ds-panel-ink); }
html[data-theme="light"] .proofs .tick path { stroke: var(--ds-panel-ink); }

/* The five offers: each a chalk card under its hand-written kind */
html[data-theme="light"] .tier {
  background: var(--ds-panel); color: var(--ds-panel-ink); border: 0; border-radius: 8px;
  padding: 1.3rem clamp(20px, 2.4vw, 30px) 1.3rem;
}
html[data-theme="light"] .tier + .tier { margin-top: 16px; }
html[data-theme="light"] .tier h3 { color: var(--ds-panel-ink); }
html[data-theme="light"] .tier p { color: var(--ds-panel-ink-2); }
html[data-theme="light"] .tier .quote { color: var(--ds-panel-ink); text-decoration-color: #4a8fe0; text-decoration-thickness: 3px; }
html[data-theme="light"] .tier .quote:hover { color: var(--ds-panel-ink-2); text-decoration-color: var(--ds-panel-ink); }
html[data-theme="light"] .tier .quote:focus-visible { outline-color: var(--ds-panel-ink); }
/* The chalk line that writes across the offer crossing the middle draws on the board just above its card */
html.js:not(.rm)[data-theme="light"] .tier::before { top: -10px; }

/* The closing ask: one panel; its button keeps the lavender with a Board edge on chalk */
html[data-theme="light"] .ask {
  background: var(--ds-panel); color: var(--ds-panel-ink); border-radius: 8px;
  padding: clamp(22px, 3vw, 40px);
}
html[data-theme="light"] .ask h2, html[data-theme="light"] .ask p { color: var(--ds-panel-ink); }
html[data-theme="light"] .ask .cta { box-shadow: 0 0 0 2px var(--ds-panel-ink), 3px 4px 0 0 rgba(14, 17, 22, 0.22); }
html[data-theme="light"] .ask .cta:hover { box-shadow: 0 0 0 2px var(--ds-panel-ink), 4px 5px 0 0 rgba(14, 17, 22, 0.28); }
html[data-theme="light"] .ask :focus-visible { outline-color: var(--ds-panel-ink); }