/* Approved studio homepage styling. */
:root {
  color-scheme: light;
  --study-background: #d2d1cf;
  --studio-image: url('assets/silver-studio-background.webp?v=fe817b25c4e6');
  --studio-size: max(100vw, 266.53vh) auto;
  --background: #f5f1e8;
  --ink: #302d29;
  --muted: var(--ink);
  --sans: var(--headline-font);
  --serif: var(--headline-font);
  --headline-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --detail-muted: #3b3a38;
  --menu-font: 400 16px/1.4 var(--headline-font);
  --control-surface: linear-gradient(160deg, #53606be8, #35414ce8);
  --control-hover: #5c6c7a;
  --control-active: #263440;
  --control-active-shadow: inset 0 1px 2px #17253270;
  --control-border: #e5eef35c;
  --control-divider: #ffffff29;
  --control-radius: 999px;
  --control-height: 28px;
  --control-font: 400 12px/1.2 var(--headline-font);
  --control-ink: #f6f7f8;
  --control-shadow: inset 0 1px 0 #ffffff36, 0 3px 6px #24323f21;
}
@supports (height: 100dvh) {
  :root { --studio-size: max(100vw, 266.53dvh) auto; }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { color: var(--ink); background-color: var(--study-background); background-image: var(--studio-image); background-repeat: no-repeat; background-position: center bottom; background-size: var(--studio-size); font: 400 16px/1.5 var(--sans); overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
/* Focus remains functional without extra frames around the interactive hit area. */
:where(a[href], button, [role="button"], [tabindex], dialog):focus { outline: none; }
:where(a[href], button, [role="button"], [tabindex]) { -webkit-tap-highlight-color: transparent; }
button::-moz-focus-inner { border: 0; }
a[href]:focus-visible { background-color: #c7dbe9; }

/* Smoked capsules: compact translucent faces inside comfortable hit areas. */
.cv-close, .visits-action, .viewer-close, .viewer-arrow, .map-geometry-error button,
.work-image-viewer .work-image-control { isolation: isolate; }
.visits-action, .map-geometry-error button, .work-image-viewer .work-image-control { position: relative; }
.cv-close { position: relative; }
.cv-close::before, .visits-action::before, .viewer-close::before, .viewer-arrow::before,
.map-geometry-error button::before, .work-image-viewer .work-image-control::before {
  content: ''; position: absolute; z-index: -1; top: 50%;
  left: var(--control-inline-inset, 0px); right: var(--control-inline-inset, 0px);
  height: var(--control-height); transform: translateY(-50%); pointer-events: none;
  border: 1px solid var(--control-border); border-radius: var(--control-radius);
  background: var(--control-surface); box-shadow: var(--control-shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cv-close, .viewer-close, .viewer-arrow, .work-image-viewer .work-image-close { --control-inline-inset: 8px; }
.cv-close:focus-visible::before,
.visits-action:focus-visible::before,
.viewer-close:focus-visible::before,
.viewer-arrow:not(:disabled):focus-visible::before,
.map-geometry-error button:focus-visible::before,
.work-image-viewer .work-image-control:focus-visible::before { background: var(--control-active); }


[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.study-toolbar { position: fixed; top: max(22px, env(safe-area-inset-top)); left: max(clamp(20px, 3.3vw, 56px), env(safe-area-inset-left)); right: max(clamp(20px, 3.3vw, 56px), env(safe-area-inset-right)); z-index: 40; display: grid; align-items: center; gap: 24px; }

.language-switcher { display: flex; align-items: center; justify-self: end; gap: 2px; }
.language-switcher button { display: grid; place-items: center; position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font: var(--menu-font); opacity: 1; }
.language-switcher button:hover, .language-switcher button[aria-pressed="true"] { opacity: 1; }
.language-switcher button[aria-pressed="true"]::after { content: ''; position: absolute; width: 3px; height: 3px; border-radius: 50%; bottom: 3px; background: currentColor; }

.mixer-study { position: relative; display: grid; place-items: center; width: 100%; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; padding: max(72px, var(--toolbar-clearance, 72px)) max(28px, env(safe-area-inset-right)) 72px max(28px, env(safe-area-inset-left)); margin-left: 0; transition: width 420ms cubic-bezier(.22,.75,.24,1), margin-left 420ms cubic-bezier(.22,.75,.24,1); }

.study-destinations { font: 600 12px/1.2 var(--headline-font); color: #252628; }
.study-destinations ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 12px; width: min(286px, 100%); list-style: none; margin: 0 auto; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 23px; background: rgba(255, 255, 255, .78); box-shadow: 0 8px 24px rgba(35, 50, 62, .12), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.study-destinations a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 64px; min-width: 44px; padding: 2px 0; white-space: nowrap; border-radius: 10px; }
.study-destinations a:hover { background: rgba(224, 236, 245, .45); }
.study-destinations a:focus-visible { background: #c7dbe9; }
.dock-folder { display: block; width: 44px; height: 40px; flex: none; }
.dock-label { display: block; }
.study-socials { justify-self: center; color: var(--ink); font: var(--menu-font); }
.study-socials ul { display: flex; align-items: center; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.study-socials a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.study-socials a:hover { opacity: .65; }
.study-socials a:focus-visible,
.language-switcher button:focus-visible,
.studio-brand:focus-visible,
.destination-link:focus-visible { background: #c7dbe9; border-radius: 8px; }
.study-socials svg { display: block; width: 18px; height: 18px; }
.headline-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(210px, 30vw, 400px) minmax(0, 1fr); align-items: center; gap: clamp(14px, 2vw, 36px); width: min(100%, 1520px); position: relative; transform: translateY(-32px); }
.hero-intro { position: relative; z-index: 1; justify-self: end; width: max-content; min-width: min(100%, 272px); max-width: 100%; text-align: left; }
.hero-name { white-space: nowrap; }
.hero-qualification { display: block; }

.hero-copy { margin: 0; font: 400 clamp(40px, 5.4vw, 112px)/1.06 var(--headline-font); letter-spacing: -.045em; white-space: nowrap; }
.hero-copy-left { text-align: left; }
.hero-copy-right { position: relative; z-index: 1; justify-self: start; text-align: left; font-style: italic; }
html:not([lang="en"]) .hero-copy { font-size: clamp(25px, 4vw, 84px); white-space: normal; }
.mixer-figure { display: grid; place-items: center; min-width: 0; margin: 0; height: min(48dvh, 440px); position: relative; }
/* Keep the extracted mixer, shadow and light together; soften canvas-edge fades. */
.mixer-image { position: absolute; left: 50%; top: 50%; display: block; width: 234%; height: auto; max-width: none; transform: translate(-48%, -52.5%); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 95%, transparent); }
/* Use the same viewport-sized studio slice, rather than fitting it to the drawer. */
.cv-drawer, .cv-document { --muted: var(--ink); --cv-separator: #89939b; isolation: isolate; }
.cv-drawer { background: var(--study-background); border-right-color: var(--cv-separator); }
.cv-drawer::before, .cv-document::before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100vw; height: 100vh; height: 100dvh; background-image: var(--studio-image); background-size: var(--studio-size); background-position: center bottom; background-repeat: no-repeat; pointer-events: none; }
.cv-drawer::backdrop { background: transparent; }
.cv-header h2 { font: var(--menu-font); letter-spacing: normal; }
.cv-document .cv-page > h1 { font-family: var(--headline-font); font-weight: 400; letter-spacing: -.045em; }
.cv-header, .cv-document-header { border-bottom-color: var(--cv-separator); }
.cv-section > h2, .cv-section > h3, .cv-entry:not(:last-child) .cv-role-title::after { border-color: var(--cv-separator); }
.cv-entry .cv-role-title::before { background: #737e87; }
/* Native CV scrolling with one plain black line and no glass effects. */
.cv-drawer .cv-scroll { scrollbar-width: thin; scrollbar-color: #000 transparent; }
@supports selector(::-webkit-scrollbar) {
  .cv-drawer .cv-scroll { scrollbar-width: auto; scrollbar-color: auto; }
  .cv-drawer .cv-scroll::-webkit-scrollbar { width: 4px; background: transparent; }
  .cv-drawer .cv-scroll::-webkit-scrollbar-track,
  .cv-drawer .cv-scroll::-webkit-scrollbar-track-piece,
  .cv-drawer .cv-scroll::-webkit-scrollbar-corner { background: transparent; }
  .cv-drawer .cv-scroll::-webkit-scrollbar-track { margin: 12px 0; }
  .cv-drawer .cv-scroll::-webkit-scrollbar-button { display: none; }
  .cv-drawer .cv-scroll::-webkit-scrollbar-thumb { min-height: 28px; border: 0; border-radius: 0; background: #000; box-shadow: none; }
}
@media (forced-colors: active) {
  :root { --control-surface: ButtonFace; --control-hover: ButtonFace; --control-border: ButtonText; --control-divider: ButtonText; --control-ink: ButtonText; --control-shadow: none; --control-active: ButtonFace; --control-active-shadow: none; }
  .cv-close::before, .visits-action::before, .viewer-close::before, .viewer-arrow::before,
  .map-geometry-error button::before, .work-image-viewer .work-image-control::before { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .study-destinations ul { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .study-destinations a { color: LinkText; }
  .cv-drawer .cv-scroll { scrollbar-width: auto; scrollbar-color: auto; }
  .cv-drawer .cv-scroll::-webkit-scrollbar { width: 16px; background: Canvas; }
  .cv-drawer .cv-scroll::-webkit-scrollbar-track,
  .cv-drawer .cv-scroll::-webkit-scrollbar-track-piece,
  .cv-drawer .cv-scroll::-webkit-scrollbar-corner { background: Canvas; }
  .cv-drawer .cv-scroll::-webkit-scrollbar-thumb,
  .cv-drawer .cv-scroll::-webkit-scrollbar-thumb:hover,
  .cv-drawer .cv-scroll::-webkit-scrollbar-thumb:active { background: CanvasText; border-color: Canvas; box-shadow: none; }
}
.cv-document { height: auto; min-height: 100%; overflow: auto; background: var(--study-background); }
.cv-document::before { position: fixed; }
@media (min-width: 721px) {
  html:not([data-mobile-pages]) .cv-is-open .mixer-study { width: calc(200% / 3); margin-left: calc(100% / 3); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  html:not([data-mobile-pages]) .cv-is-open .headline-stage { grid-template-columns: minmax(0, 1fr) clamp(160px, 20vw, 280px) minmax(0, 1fr); gap: 16px; }
  html:not([data-mobile-pages]) .cv-is-open .headline-stage .hero-copy { font-size: clamp(25px, 3.3vw, 74px); }
  /* Size the introduction from its content, keeping both headline gaps balanced. */
  html:not([data-mobile-pages]) .cv-is-open .hero-intro { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); min-width: 0; width: max-content; height: 100%; }
  html:not([data-mobile-pages]) .cv-is-open .hero-details { position: static; grid-row: 1; align-self: end; margin-bottom: 20px; }
  html:not([data-mobile-pages]) .cv-is-open .hero-copy-left { grid-row: 2; }
  html:not([data-mobile-pages]) .cv-is-open .hero-name { white-space: normal; }
  html:not([data-mobile-pages]) .cv-is-open .hero-qualification { white-space: normal; }
}
@media (max-width: 720px) {
  .study-toolbar { top: max(12px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); gap: 8px; }
  .mixer-study { padding: max(64px, var(--toolbar-clearance, 64px)) max(14px, env(safe-area-inset-right)) 64px max(14px, env(safe-area-inset-left)); }
  .headline-stage { grid-template-columns: minmax(0, 1fr) clamp(98px, 32vw, 180px) minmax(0, 1fr); gap: 8px; }
  .hero-intro { position: static; min-width: 0; }
  .hero-copy { font-size: clamp(17px, 5.6vw, 38px); letter-spacing: -.045em; }
  html:not([lang="en"]) .hero-copy { font-size: clamp(15px, 4.4vw, 30px); }
  .mixer-figure { height: auto; aspect-ratio: 1226 / 1283; }
}
@media (max-width: 560px) {
  .study-socials ul { gap: 0; }

}
@media (prefers-reduced-motion: reduce) { .mixer-study { transition: none; } }

/* Unified headline family, grouped introduction and studio header. */
.study-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
.studio-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; }
.studio-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; font: var(--menu-font); }
.studio-logo { display: block; flex: none; width: 32px; height: 40px; object-fit: contain; }
.studio-links .study-socials { flex: none; }
.hero-details { position: absolute; left: 0; bottom: calc(100% + 20px); display: flex; flex-direction: column; gap: 9px; width: max-content; max-width: 100%; }
.hero-name { position: static; width: auto; margin: 0; color: var(--ink); font: 400 clamp(20px, 1.65vw, 26px)/1.25 var(--headline-font); letter-spacing: .01em; }
.hero-credentials { position: static; width: auto; max-width: 100%; margin: 0; color: var(--detail-muted); font: 400 clamp(12px, .95vw, 14px)/1.55 var(--headline-font); letter-spacing: .015em; text-align: left; }
@media (max-width: 720px) {
  .studio-links { gap: 0 4px; }
  .studio-brand { gap: 8px; }
  .studio-logo { width: 28px; height: 36px; }
  .headline-stage { padding-block: 116px 16px; transform: translateY(-22px); }
  .hero-details { top: 0; bottom: auto; left: 0; right: 0; width: 100%; text-align: center; gap: 9px; }
  .hero-name { width: auto; text-align: center; font-size: 19px; }
  .hero-credentials { text-align: center; font-size: 12px; line-height: 1.5; }
}
@media (max-width: 380px) {
  .studio-links { row-gap: 0; }
  .language-switcher { align-self: start; }
}

/* Direct-link/error fallbacks remain usable without JavaScript enhancement. */
a.route-fallback, .not-found .destination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }


@media (forced-colors: active) {
  .cv-close:focus-visible, .visits-action:focus-visible,
  .viewer-close:focus-visible, .viewer-arrow:focus-visible,
  .map-geometry-error button:focus-visible,
  .work-image-viewer .work-image-control:focus-visible { color: HighlightText; forced-color-adjust: none; }
  .cv-close:focus-visible::before, .visits-action:focus-visible::before,
  .viewer-close:focus-visible::before, .viewer-arrow:not(:disabled):focus-visible::before,
  .map-geometry-error button:focus-visible::before,
  .work-image-viewer .work-image-control:focus-visible::before { background: Highlight; border-color: Highlight; }
  .study-destinations a:focus-visible, .study-socials a:focus-visible,
  .language-switcher button:focus-visible, .studio-brand:focus-visible,
  .destination-link:focus-visible { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}

/* A rotated phone keeps the introduction together beside the mixer.  The
   measured header/dock gutters remain the same in either orientation. */
@media (min-width: 441px) and (max-height: 540px) and (orientation: landscape) {
  .mixer-study { align-items: center; }
  .headline-stage {
    grid-template-columns: minmax(0, 1fr) clamp(130px, 30vw, 260px) minmax(0, 1fr);
    gap: clamp(8px, 2vw, 20px);
    height: min(40dvh, 160px);
    padding-block: 0;
    transform: translateY(12px);
  }
  .hero-intro { position: relative; min-width: min(100%, 160px); width: max-content; max-width: 100%; }
  .hero-details { top: auto; right: auto; bottom: calc(100% + 10px); left: 0; width: max-content; max-width: 100%; gap: 5px; text-align: left; }
  .hero-name { width: auto; font-size: clamp(16px, 2.2vw, 18px); text-align: left; }
  .hero-credentials { font-size: 11px; line-height: 1.35; text-align: left; }
  .hero-copy { font-size: clamp(24px, 4.5vw, 42px); }
  html:not([lang="en"]) .hero-copy { font-size: clamp(20px, 3.5vw, 36px); }
  .mixer-figure { height: 100%; aspect-ratio: auto; }
  .mixer-image { width: auto; height: 112%; }
  html:not([data-mobile-pages]) .cv-is-open .headline-stage { grid-template-columns: minmax(0, 1fr) clamp(110px, 20vw, 200px) minmax(0, 1fr); gap: 8px; }
  html:not([data-mobile-pages]) .cv-is-open .hero-intro { display: block; min-width: min(100%, 150px); height: auto; }
  html:not([data-mobile-pages]) .cv-is-open .hero-details { position: absolute; margin: 0; }
  html:not([data-mobile-pages]) .cv-is-open .headline-stage .hero-copy { font-size: clamp(20px, 3.3vw, 36px); }
  html:not([data-mobile-pages]):not([lang="en"]) .cv-is-open .headline-stage .hero-copy { font-size: clamp(16px, 2.4vw, 28px); }
}

@media (min-width: 441px) and (max-width: 560px) and (max-height: 540px) and (orientation: landscape) {
  .hero-credentials { font-size: 10px; }
}

@media (min-width: 441px) and (max-height: 360px) and (orientation: landscape) {
  .study-toolbar { top: max(12px, env(safe-area-inset-top)); }
  .hero-name { font-size: 16px; }
  .hero-credentials { font-size: 10px; }
}

/* Portrait phones keep all header controls on one shared 44px row. */
@media (max-width: 720px) and (orientation: portrait) {
  .study-toolbar {
    grid-template-columns: auto minmax(132px, 1fr) 132px;
    gap: clamp(2px, calc((100vw - 340px) / 2), 4px);
    left: max(clamp(4px, calc((100vw - 312px) / 2), 16px), env(safe-area-inset-left));
    right: max(clamp(4px, calc((100vw - 312px) / 2), 16px), env(safe-area-inset-right));
    align-items: center;
  }
  .studio-links { display: contents; }
  .studio-brand { align-self: center; }
  .study-toolbar .study-socials { justify-self: start; }
  .study-toolbar .study-socials ul, .study-toolbar .language-switcher { gap: 0; }
  .study-toolbar .language-switcher { align-self: center; }
}
@media (max-width: 440px) and (orientation: portrait) {
  .studio-brand { justify-content: center; width: 44px; gap: 0; }
  .studio-brand > span { display: none; }
}