/* Site-wide light/dark colours and the lamp control. */
:root {
  --surface: #fff;
  --surface-raised: #f3f5f8;
  --header: #fff;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f141c;
  --desk: #131a24;
  --desk-deep: #242e3d;
  --surface: #191f2a;
  --surface-raised: #1d2633;
  --header: #191f2a;
  --line: #2a3443;
  --ink: #f0f3f9;
  --ink-2: #b4bfce;
  --ink-3: #9ba8bc;
  --blue: #86a2ff;
  --blue-deep: #b0c2ff;
  --blue-wash: #202e4b;
  --red: #f1687f;
  --red-wash: #36222e;
  --green: #86d9a8;
  --shadow-soft: 0 2px 6px #00000016, 0 12px 30px -18px #0008;
  --shadow-lift: 0 12px 40px -14px #0009;
}
html { scroll-padding-top: 122px; }
.site-head { background: var(--header); }
.stitched-mode .site-head .wrap { min-height: 104px; padding-block: 8px; gap: 12px; }
.site-head .brand { order: 0; }
.site-head .nav { order: 1; }
.site-head .menu-btn { order: 2; }
.site-head .head-right { order: 3; margin-left: 0; }
.site-head .brand-logo--felt { width: auto; align-items: center; }
.site-head .ws-eyes { width: 75px; }

/* Enlarge the original whites and moving pupils together, preserving the felt. */
.ws-eyes__gaze { position: absolute; inset: 0; transform: scale(1.15); transform-origin: 47.526041% 21.903323%; }
.ws-eyes__whites {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask: url("img/brand/felt-eyes/eye-whites-mask.svg") center / 100% 100% no-repeat;
  mask: url("img/brand/felt-eyes/eye-whites-mask.svg") center / 100% 100% no-repeat;
}

.theme-toggle {
  order: 4; display: inline-flex; align-items: center; justify-content: center; flex: none;
  margin-left: 12px; padding: 0; gap: 0; min-height: 44px; border: 0; background: none;
  color: var(--ink-2); cursor: pointer; border-radius: 22px;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle__state {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface-raised);
}
.theme-toggle__state svg { width: 18px; height: 18px; }
/* Offset the artwork's transparent gutter to group the circle with the lamp. */
.theme-toggle__lamp { display: block; position: relative; width: 72px; height: 86.4px; margin-left: -12px; }
.theme-toggle__lamp img { position: absolute; inset: 0; width: 100%; height: 100%; }
.theme-toggle__moon, .theme-toggle__on { display: none; }
[data-theme="dark"] .theme-toggle__sun, [data-theme="dark"] .theme-toggle__off { display: none; }
[data-theme="dark"] .theme-toggle__moon, [data-theme="dark"] .theme-toggle__on { display: block; }
[data-theme="dark"] .theme-toggle__state { color: #ffd48b; border-color: #596074; }
.theme-toggle:hover .theme-toggle__state { border-color: var(--blue); color: var(--blue-deep); }
.theme-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.theme-toggle:active .theme-toggle__state { transform: translateY(1px); }

/* Outlined, two-colour wordmarks follow the site's selected theme. */
.brand-logo--felt .brand-wordmark--dark { display: none; }
[data-theme="dark"] .brand-logo--felt .brand-wordmark--light { display: none; }
[data-theme="dark"] .brand-logo--felt .brand-wordmark--dark { display: block; }

/* The media and client logos keep their original artwork in both themes. */
/* A soft highlight follows the hero's transparent silhouette in dark mode. */
[data-theme="dark"] .hero :is(.portrait-img, .hero-float) {
  filter: drop-shadow(0 0 2px #c5d6ff4d) drop-shadow(0 8px 20px #86a2ff1a);
}
[data-theme="dark"] .proof { background: var(--desk); border-block: 1px solid var(--line); }
[data-theme="dark"] :is(.card, .stage-card, .kit-panel, .rail-btn, .ann-card, .viewer-dlg, .viewer-x) { background: var(--surface); }
[data-theme="dark"] .card:hover { border-color: var(--blue); }
[data-theme="dark"] .card--private { background: var(--surface-raised); border-color: var(--line); }
[data-theme="dark"] .ann-card { border: 1px solid var(--line); }
[data-theme="dark"] :is(.ann-num, .ann-pin) { background: #bd3453; }
[data-theme="dark"] .ann-hot { border-color: #bd3453; }
[data-theme="dark"] .ann-lines path { stroke: #bd3453; }
[data-theme="dark"] .rail { scrollbar-color: #46536b #202a39; }
[data-theme="dark"] .rail::-webkit-scrollbar-track { background: #202a39; }
[data-theme="dark"] .rail::-webkit-scrollbar-thumb { background: #46536b; }
[data-theme="dark"] .rail::-webkit-scrollbar-thumb:hover { background: #627596; }
[data-theme="dark"] .app { background: var(--surface-raised); }
[data-theme="dark"] .app img { background: #f5f7fb; border-radius: 4px; padding: 2px; }
[data-theme="dark"] :is(#pro-bono, .pb-hero) { background: #14291f; border-color: #294638; }
[data-theme="dark"] :is(.tag--give, #pro-bono .tag--give, .pb-hero .tag--give) { background: #244d35; color: #b5efcb; }
[data-theme="dark"] .pb-list svg { background: #254a35; color: #a8edc2; }
[data-theme="dark"] .closer { background-image: linear-gradient(#0e225688, #0e225688), url("img/felt-blue.webp"); border: 1px solid #334e91; }
[data-theme="dark"] .site-foot { background: var(--desk); }
[data-theme="dark"] .foot-col h4 { color: var(--ink); }
[data-theme="dark"] .stitched-mode .btn:focus-visible { outline-color: #b0c2ff; }
[data-theme="dark"] :is(input, select, textarea) { color: var(--ink); background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .wb-offer-box .wb-fields input { background: var(--surface); }
[data-theme="dark"] :is(.wd-q, .aa-msg--out, .compare td.me) { background: var(--blue-wash); }
[data-theme="dark"] :is(.mini, .mini--merge, .cyc-prev, .aa-chat) { background: var(--desk); }
[data-theme="dark"] :is(.mini-sm, .cyc-pri span, .cyc-tasks span, .aa-msg--in, .aa-task, .aa-step, .band--desk .fp) { background: var(--surface); }
[data-theme="dark"] .mini-bar, [data-theme="dark"] .cyc-pri b { background: var(--desk-deep); }
[data-theme="dark"] :is(.mini-grid b, .mini-hero b, .mini-sm b, .mini-sm > i, .mini-hero span i, .mini-row i) { background: #46536b; }
[data-theme="dark"] :is(.rail-btn:not(:disabled):last-child, .plan-flag, .flow li.is-you::before, .w-cal .grid .open, .wd-tree-root, .mini-cta, .cyc-pri .on b, .ads-steps li::before, .aa-fakebtn, .wb-modes button[aria-pressed="true"], .nf[aria-pressed="true"]) { color: #101c36; }
[data-theme="dark"] .nf[aria-pressed="true"] span { color: #263454; }
[data-theme="dark"] :is(.pill--job, .notice--ok, .wflow li:last-child, .wb-status) { color: #b5efcb; background: #244d35; border-color: #427657; }
[data-theme="dark"] .aa-step--ok { color: #b5efcb; }
[data-theme="dark"] :is(.pill--missed, .draft-note, .cyc-pri span.on, .wb-offer-box) { color: #ffe0a3; background: #362b1c; border-color: #8f703e; }
[data-theme="dark"] .wb-badge { color: #ffe0a3; background: #624619; }
[data-theme="dark"] :is(.ex1-copy .ex1-rec b, .feat-ex b, .wb-offer-box h4 svg) { color: #f5c375; }
[data-theme="dark"] :is(.ct-err, .ct-errsum-h, .ct-errsum a) { color: #ff9fae; }

/* Portfolio breakdowns use their own layout, with the same colour preference. */
[data-theme="dark"] .td-page { --td-blue: var(--blue); --td-ink: var(--ink); --td-line: var(--line); }
[data-theme="dark"] .td-grid-bg { background-color: var(--paper); background-image: linear-gradient(#86a2ff0a 1px, transparent 1px), linear-gradient(90deg, #86a2ff0a 1px, transparent 1px); }
[data-theme="dark"] :is(.td-meta, .td-card, .td-log) { background: var(--surface); }
[data-theme="dark"] :is(.td-browser, .td-log thead th) { background: var(--desk-deep); }
[data-theme="dark"] :is(.td-dek, .td-card p, .td-log td, .td-score ol) { color: var(--ink-2); }
[data-theme="dark"] :is(.td-meta dt, .td-exhibit-label, .td-log thead th) { color: var(--ink-3); }
[data-theme="dark"] .td-log tbody th { color: var(--ink); }
[data-theme="dark"] .td-number { color: var(--paper); }
[data-theme="dark"] .td-note { color: #b5a5ff; }
[data-theme="dark"] .td-next { background-image: linear-gradient(#0e225688, #0e225688), url("img/felt-blue.webp"); }
[data-theme="dark"] .td-next .btn { color: #163aa1; }

@media (max-width: 1180px) {
  .stitched-mode .site-head .menu-btn { order: 3; margin-left: 0; padding-inline: calc(var(--button-pad-x) + 12px); }
  .stitched-mode .site-head .head-right { order: 2; margin-left: auto; }
  .stitched-mode .site-head.open .nav { background: var(--surface); border-block: 1px solid var(--line); }
  .theme-toggle { margin-left: 0; min-width: 44px; }
  .theme-toggle__state { width: 44px; height: 44px; }
  .theme-toggle__state svg { width: 22px; height: 22px; }
  .theme-toggle__lamp { display: none; }
}
@media (max-width: 860px) {
  .site-head .ws-eyes { width: 60px; }
}
@media (max-width: 700px) {
  .stitched-mode .site-head .head-right { display: none; }
  .stitched-mode .site-head .menu-btn { margin-left: auto; }
}
@media (max-width: 560px) {
  .stitched-mode .site-head .wrap { min-height: 88px; gap: 8px; }
  /* Let the wordmark give up space on narrow phones, keeping both controls full size. */
  .stitched-mode .site-head .brand { min-width: 0; flex-shrink: 1; }
  .site-head .brand-logo--felt, .site-head .brand-wordmark { min-width: 0; }
  .stitched-mode .site-head .menu-btn { padding-inline: 22px; }
}
@media (max-width: 380px) {
  .stitched-mode .site-head .wrap { padding-inline: 8px; gap: 4px; }
  .stitched-mode .site-head .menu-btn { padding-inline: 18px; font-size: .85rem; }
}
@media (max-width: 360px) {
  .site-head .ws-eyes { width: 52.5px; }
}
@media (forced-colors: active) {
  .theme-toggle__state { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
}