@font-face {
  font-family: 'Geist Mono';
  src: url('assets/fonts/geist-mono-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #111319;
  --foreground: #f3f4fa;
  --surface: #1c202b;
  --surface-hover: #2a3040;
  --muted: #b2b8c8;
  --button: #f3f4fa;
  --on-button: #111319;
  --brand: #2637c7;
  --focus: #a1adff;
  --rule: #383f52;
  --page-gutter: 5vw;
  --site-content-max: 1440px;
  --control-height: 44.8px;
  --wordmark-width: 74px;
  --wordmark-height: 84px;
  --wordmark-top: 50px;
  --menu-card: #1c212c;
  --menu-ink: #f3f4fa;
  --menu-field: #2b3140;
  --menu-placeholder: #a4adbf;
}

:root[data-theme="light"] {
  color-scheme: light;
  --background: #f3f4fa;
  --foreground: #17191f;
  --surface: #e6e8f0;
  --surface-hover: #d9dde8;
  --muted: #5d6370;
  --button: #292c37;
  --on-button: #f3f4fa;
  --focus: #2637c7;
  --rule: #d7dbe7;
  --menu-card: #fff;
  --menu-ink: #080a0e;
  --menu-field: #f0f1fa;
  --menu-placeholder: #bfc2ce;
}

* { box-sizing: border-box; }
.studio-cursor-effect { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
@media (forced-colors: active), print { .studio-cursor-effect { display: none; } }
/* Keep a real body backdrop inside its isolated blending group. */
html { background: var(--background); }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 240ms ease, color 240ms ease;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

.studio-header {
  display: grid;
  grid-template-columns: 23vw minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0;
  padding: 50px var(--page-gutter) 32px;
  min-height: 166px;
}
.wordmark {
  position: fixed;
  z-index: 90;
  top: var(--wordmark-top);
  left: var(--page-gutter);
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: var(--wordmark-width);
  height: var(--wordmark-height);
}
.block-logo { display: block; width: 100%; height: 100%; }
/* Blend only the live-type caption, outside the header/logo stacking contexts. */
.wordmark-caption {
  position: fixed;
  z-index: 90;
  top: calc(var(--wordmark-top) + var(--wordmark-height) * 550 / 630);
  left: var(--page-gutter);
  display: block;
  width: var(--wordmark-width);
  height: calc(var(--wordmark-height) * 80 / 630);
  overflow: visible;
  pointer-events: none;
  user-select: none;
  color: #fff;
  mix-blend-mode: difference;
}
.wordmark-caption text {
  fill: currentColor;
  font-family: 'Geist Mono', monospace;
  font-size: 76px;
  font-weight: 600;
}
@supports not (mix-blend-mode: difference) {
  .wordmark-caption { color: var(--foreground); }
}
.studio-intro {
  grid-column: 2;
  margin: 0;
  font-size: 2.5vw;
  line-height: 1.1;
  letter-spacing: normal;
  font-weight: 400;
}
.header-controls {
  position: fixed;
  z-index: 90;
  top: 50px;
  right: var(--page-gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}
.control {
  height: var(--control-height);
  border: 0;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  transition: background-color 200ms ease, color 200ms ease;
}
.theme-toggle { width: var(--control-height); --theme-angle: 0deg; --theme-hover-angle: 0deg; }
.theme-symbol {
  width: 21px;
  height: 21px;
  transform: rotate(calc(var(--theme-angle) + var(--theme-hover-angle)));
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
}
.contact-pill { width: 134.4px; gap: 14px; background: var(--button); color: var(--on-button); }
.contact-label { transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }
.contact-indicator { position: relative; display: block; width: 4px; height: 4px; flex-shrink: 0; }
.single-dot { transition: opacity 180ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1); }
.contact-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px;
  opacity: 0;
  transform: translate(-3px, 3px) scale(.5);
  transition: opacity 180ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1);
}
.menu-toggle { width: 102.4px; gap: 10px; }
.single-dot, .double-dot i { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.double-dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  transform: rotate(-90deg);
  transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
}
.double-dot i { position: absolute; top: 3px; left: 0; }
.double-dot i + i { left: 6px; }
.theme-toggle:focus-visible { --theme-hover-angle: 180deg; }
.menu-toggle:focus-visible .double-dot,
.menu-toggle[aria-expanded="true"] .double-dot { transform: rotate(0deg); }
.contact-pill:focus-visible .contact-label { transform: translateX(-2px); }
.contact-pill:focus-visible .single-dot { opacity: 0; transform: scale(.3); }
.contact-pill:focus-visible .contact-arrow { opacity: 1; transform: translate(0, 0) scale(1); }
@media (hover: hover) {
  .control:hover { background: var(--surface-hover); }
  .theme-toggle:hover { --theme-hover-angle: 180deg; }
  .menu-toggle:hover .double-dot { transform: rotate(0deg); }
  .contact-pill:hover { background: var(--brand); color: #fff; }
  .contact-pill:hover .contact-label { transform: translateX(-2px); }
  .contact-pill:hover .single-dot { opacity: 0; transform: scale(.3); }
  .contact-pill:hover .contact-arrow { opacity: 1; transform: translate(0, 0) scale(1); }
  .menu-primary a:hover span { transform: translateX(4px); }
  .menu-primary a:hover .menu-current-dot { opacity: 1; }
  .menu-feature:hover .menu-feature-arrow { transform: translate(2px, -2px); }
}

.menu-toggle[aria-expanded="true"] { background: var(--menu-card); color: var(--menu-ink); }
.menu-toggle[aria-expanded="true"] .double-dot { transform: rotate(-90deg); }

.studio-menu {
  position: fixed;
  z-index: 100;
  inset: var(--menu-top, 107px) var(--page-gutter) auto auto;
  margin: 0;
  padding: 0;
  width: 312px;
  max-width: calc(100vw - 2 * var(--page-gutter));
  max-height: calc(100dvh - var(--menu-top, 107px) - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  color: var(--menu-ink);
  background: transparent;
  border: 0;
  display: none;
}
.studio-menu[open] { display: grid; gap: 10px; }
.studio-menu::-webkit-scrollbar { display: none; }
.menu-panel { display: block; border-radius: 12px; background: var(--menu-card); }
.studio-menu[open] .menu-panel { animation: menu-panel-in 280ms cubic-bezier(.22, 1, .36, 1) both; }
.studio-menu[open] .menu-panel:nth-child(2) { animation-delay: 35ms; }
.studio-menu[open] .menu-panel:nth-child(3) { animation-delay: 70ms; }
.menu-primary { padding: 16px 30px; }
.menu-primary a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.045em;
}
.menu-primary a span { transition: transform 220ms ease; }
.menu-primary a:focus-visible { outline-offset: 1px; }
.menu-current-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity 180ms ease; }
.menu-primary a[aria-current="page"] .menu-current-dot,
.menu-primary a:focus-visible .menu-current-dot { opacity: 1; }
.menu-newsletter { padding: 32px 30px; }
.menu-newsletter h2 { margin: 0 0 28px; font-size: 36px; line-height: 1.18; font-weight: 400; letter-spacing: -.045em; }
.menu-newsletter-form { display: flex; align-items: center; height: 70px; border-radius: 18px; background: var(--menu-field); overflow: hidden; }
.menu-newsletter-form input { min-width: 0; width: 100%; padding: 0 0 0 24px; border: 0; background: transparent; color: var(--menu-placeholder); font: inherit; font-size: 18px; opacity: 1; -webkit-text-fill-color: var(--menu-placeholder); }
.menu-newsletter-form input::placeholder { color: var(--menu-placeholder); opacity: 1; }
.menu-newsletter-form button { display: grid; place-items: center; flex: 0 0 66px; height: 70px; padding: 0; border: 0; background: transparent; color: var(--menu-ink); opacity: 1; cursor: default; }
.menu-newsletter-form button svg { width: 28px; height: 28px; }
.menu-feature { display: flex; align-items: center; gap: 16px; min-height: 78px; padding: 20px 30px; color: #f3f4fa; background: #050608; }
.menu-feature span { font-size: 24px; line-height: 1; letter-spacing: -.04em; }
.menu-feature-mark { flex: 0 0 26px; width: 26px; height: 26px; }
.menu-feature-arrow { flex: 0 0 26px; width: 26px; height: 26px; margin-left: auto; transition: transform 220ms ease; }
.menu-feature:focus-visible { outline-offset: -5px; }
body:has(.studio-menu[open]) { overflow: hidden; }
@keyframes menu-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) {
  .studio-header { grid-template-columns: 1fr auto; grid-template-rows: 84px auto; row-gap: 48px; }
  .studio-intro { grid-column: 1 / -1; grid-row: 2; font-size: clamp(30px, 4.4vw, 46px); }
  .header-controls { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
  :root { --control-height: 46px; --page-gutter: 22px; --wordmark-top: 24px; --wordmark-width: 54px; --wordmark-height: 62px; }
  .studio-header { padding-top: 24px; grid-template-rows: 62px auto; column-gap: 12px; row-gap: 45px; }
  .header-controls { top: 24px; gap: 8px; }
  .theme-toggle { width: 44px; }
  .theme-symbol { width: 23px; height: 23px; }
  .contact-pill { display: none; }
  .menu-toggle { width: 90px; padding-inline: 17px; gap: 10px; font-size: 12px; }
  .double-dot i { width: 4px; height: 4px; }
  .studio-intro { font-size: clamp(25px, 6.9vw, 36px); line-height: 1.12; }
  .studio-menu { width: calc(100vw - 2 * var(--page-gutter)); }
  .menu-primary { padding: 14px 28px; }
  .menu-primary a { min-height: 56px; font-size: 28px; }
  .menu-newsletter { padding: 28px; }
  .menu-newsletter h2 { font-size: 34px; margin-bottom: 24px; }
  .menu-newsletter-form, .menu-newsletter-form button { height: 64px; }
  .menu-feature { padding-inline: 28px; }
}
@media (max-width: 359px) {
  :root { --page-gutter: 16px; }
  .menu-toggle { padding-inline: 14px; }
  .studio-intro { font-size: 25px; }
}
/* The same 1440px content frame on every editorial/catalogue page.
   Backgrounds and fixed effects keep the full viewport. */
@media (min-width: 1600px) {
  :root { --page-gutter: calc((100vw - var(--site-content-max)) / 2); }
  .studio-header { grid-template-columns: 368px minmax(0, 1fr) auto; }
  .studio-intro { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .theme-symbol, .contact-label, .single-dot { transform: none !important; }
  .double-dot { transform: rotate(0deg) !important; }
  .contact-arrow { transform: none !important; }
}