/* =========================================================
   Swiss skin
   A second look for the whole site, switched on with the
   Classic / Swiss button in the header. Pure white, a fixed
   index down the left, hairline rules, no cards, one blue.
   Everything below is scoped to :root[data-skin="swiss"], so
   the classic design is untouched when it is off.
   ========================================================= */
:root[data-skin="swiss"] {
  --paper: #FFFFFF;
  --paper-2: #F7F8FA;
  --ink: #111113;
  --muted: #6C6F76;
  --line: #DFE1E4;
  --link: #1430E5;
  --cobalt: #1430E5;
  --note: #E8EBFF;
  --on-note: #111113;
  --band: #F7F8FA;
  --band-soft: rgba(17, 17, 19, 0.7);
  --band-line: rgba(17, 17, 19, 0.14);
  --focus: #1430E5;
  --f-display: "IBM Plex Sans", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --radius: 0px;
  --fs-base: 1.0625rem;
  --fs-md: 1.15rem;
  --fs-hero: clamp(2.5rem, 5vw, 4.2rem);
  --fs-xl: clamp(1.8rem, 3.2vw, 2.8rem);
  --fs-lg: clamp(1.2rem, 2vw, 1.5rem);
  --rail: 15rem;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="swiss"]:not([data-theme="light"]) {
    --paper: #0B0B0D;
    --paper-2: #131417;
    --ink: #F2F3F5;
    --muted: #9A9DA5;
    --line: #26282D;
    --link: #8DA0FF;
    --cobalt: #8DA0FF;
    --note: #1A1F3D;
    --on-note: #F2F3F5;
    --band: #131417;
  }
}
:root[data-skin="swiss"][data-theme="dark"] {
  --paper: #0B0B0D;
  --paper-2: #131417;
  --ink: #F2F3F5;
  --muted: #9A9DA5;
  --line: #26282D;
  --link: #8DA0FF;
  --cobalt: #8DA0FF;
  --note: #1A1F3D;
  --on-note: #F2F3F5;
  --band: #131417;
}

/* ---------- type: plain, tight, no expanded display face ---------- */
:root[data-skin="swiss"] body { -webkit-font-smoothing: antialiased; line-height: 1.65; }
:root[data-skin="swiss"] .display,
:root[data-skin="swiss"] .hero__title,
:root[data-skin="swiss"] .page-head__title,
:root[data-skin="swiss"] .subhead,
:root[data-skin="swiss"] .work__title,
:root[data-skin="swiss"] .about-story__title { font-stretch: normal; font-weight: 600; letter-spacing: -0.03em; }
:root[data-skin="swiss"] .hero__title mark,
:root[data-skin="swiss"] mark { background: none; color: var(--link); padding: 0; }
:root[data-skin="swiss"] .hero__title .soft { color: var(--muted); }
:root[data-skin="swiss"] .eyebrow { letter-spacing: 0.1em; color: var(--muted); }

/* ---------- the header becomes a fixed index on the left ---------- */
@media (min-width: 1000px) {
  :root[data-skin="swiss"] body { padding-left: var(--rail); }
  :root[data-skin="swiss"] .nav {
    position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 40;
    border-right: 1px solid var(--line); border-bottom: 0; background: var(--paper);
    display: flex; align-items: stretch;
  }
  :root[data-skin="swiss"] .nav__inner {
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 1.8rem; padding: 2.2rem 1.6rem; width: 100%;
  }
  :root[data-skin="swiss"] .brand { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  :root[data-skin="swiss"] .brand__mark { display: none; }
  :root[data-skin="swiss"] .brand__name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
  :root[data-skin="swiss"] .nav nav { width: 100%; }
  :root[data-skin="swiss"] .nav__links { flex-direction: column; align-items: stretch; gap: 0.45rem; counter-reset: navitem; }
  :root[data-skin="swiss"] .nav__links a { display: flex; gap: 0.7rem; font-size: 0.95rem; color: var(--muted); }
  :root[data-skin="swiss"] .nav__links a::before { counter-increment: navitem; content: "0" counter(navitem); color: var(--line); font-variant-numeric: tabular-nums; }
  :root[data-skin="swiss"] .nav__links a:hover { color: var(--ink); }
  :root[data-skin="swiss"] .nav__links a[aria-current="page"] { color: var(--ink); }
  :root[data-skin="swiss"] .nav__links a[aria-current="page"]::before { color: var(--link); }
  :root[data-skin="swiss"] .nav__cta { align-self: flex-start; }
  :root[data-skin="swiss"] .skin-toggle--bar, :root[data-skin="swiss"] .theme-toggle--bar { margin-top: auto; }
}

/* ---------- no cards: hairline rows instead ---------- */
:root[data-skin="swiss"] .work__item,
:root[data-skin="swiss"] .explore__card,
:root[data-skin="swiss"] .post,
:root[data-skin="swiss"] .pillar,
:root[data-skin="swiss"] .cert,
:root[data-skin="swiss"] .quote-card,
:root[data-skin="swiss"] .book,
:root[data-skin="swiss"] .contact-card,
:root[data-skin="swiss"] .linkedin-card,
:root[data-skin="swiss"] .form,
:root[data-skin="swiss"] .lane,
:root[data-skin="swiss"] .roots-card {
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  box-shadow: none; padding: 1.3rem 0 1.5rem;
}
:root[data-skin="swiss"] .work, :root[data-skin="swiss"] .work--three,
:root[data-skin="swiss"] .explore__grid, :root[data-skin="swiss"] .posts,
:root[data-skin="swiss"] .quote-grid, :root[data-skin="swiss"] .certs,
:root[data-skin="swiss"] .pillars { gap: 0 clamp(1.5rem, 4vw, 3rem); }
:root[data-skin="swiss"] .work__item--feature { grid-column: auto; }
:root[data-skin="swiss"] .tag { border: 0; background: none; padding: 0; color: var(--muted); letter-spacing: 0.1em; }
:root[data-skin="swiss"] .game__tags, :root[data-skin="swiss"] .chips { gap: 0.4rem 1.4rem; }
:root[data-skin="swiss"] .game__tags li + li::before, :root[data-skin="swiss"] .chips li + li::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--line); vertical-align: middle; margin-right: 1.4rem; }
:root[data-skin="swiss"] .tag--ai, :root[data-skin="swiss"] .tag--side, :root[data-skin="swiss"] .tag--live { background: none; color: var(--link); }

/* facts as a table, like a spec sheet */
:root[data-skin="swiss"] .glance { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
:root[data-skin="swiss"] .glance > div { padding: 1rem 1.2rem 1.1rem 0; border-left: 0; border-right: 1px solid var(--line); }
:root[data-skin="swiss"] .glance > div:last-child { border-right: 0; }
:root[data-skin="swiss"] .glance dd { font-family: var(--f-body); font-stretch: normal; font-weight: 500; }

/* ---------- buttons and bands: square, quiet ---------- */
:root[data-skin="swiss"] .btn { border-radius: 0; border: 1px solid var(--ink); font-weight: 500; }
:root[data-skin="swiss"] .btn--ink { background: var(--ink); color: var(--paper); }
:root[data-skin="swiss"] .btn--ink:hover { background: var(--link); border-color: var(--link); }
:root[data-skin="swiss"] .btn--line:hover { border-color: var(--link); color: var(--link); }
:root[data-skin="swiss"] .switch-band { background: var(--paper); color: var(--ink); border-block: 1px solid var(--ink); }
:root[data-skin="swiss"] .newsletter { background: var(--paper); border: 1px solid var(--ink); border-radius: 0; color: var(--ink); }
:root[data-skin="swiss"] .now { background: var(--paper); border-block: 1px solid var(--line); }
:root[data-skin="swiss"] .footer { background: var(--paper); border-top: 1px solid var(--ink); }
:root[data-skin="swiss"] .pagenav { border-top: 1px solid var(--line); }
:root[data-skin="swiss"] .pagenav a { border-bottom: 1px solid var(--line); }
:root[data-skin="swiss"] .pagenav a:hover { border-bottom-color: var(--link); }

/* ---------- pictures: plain, square, captioned ---------- */
:root[data-skin="swiss"] .hero__photo::before { display: none; }
:root[data-skin="swiss"] .hero__photo img,
:root[data-skin="swiss"] .about-story__photo img,
:root[data-skin="swiss"] .shot--phone,
:root[data-skin="swiss"] .shot--desk a { border-radius: 0; box-shadow: none; }
:root[data-skin="swiss"] .shot--phone { border-width: 1px; }
:root[data-skin="swiss"] .shot--desk a { border-width: 1px; }
:root[data-skin="swiss"] .shot__bar { display: none; }
:root[data-skin="swiss"] .shot--video video { border-radius: 0; border-width: 1px; box-shadow: none; }
:root[data-skin="swiss"] .game { border-top: 1px solid var(--ink); }

/* ---------- the switch itself ---------- */
.skin-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem;
  background: none; color: inherit; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--f-mono); font-size: var(--fs-label); cursor: pointer; white-space: nowrap;
}
.skin-toggle:hover { border-color: var(--ink); }
.skin-toggle__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
:root[data-skin="swiss"] .skin-toggle { border-radius: 0; }
:root[data-skin="swiss"] .skin-toggle__dot { background: var(--link); }
.skin-toggle--menu { margin-top: 0.8rem; }
@media (max-width: 960px) { .skin-toggle--bar { display: none; } }
@media (min-width: 961px) { .skin-toggle--menu { display: none; } }