/* ==========================================================================
   Components — navigation, footer, buttons, language switcher, cursor.
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-fg: var(--fg);
  --btn-bg: transparent;
  --btn-border: var(--rule-interactive);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  min-height: 3rem;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--border-w) solid var(--btn-border);
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--d-base) var(--ease-out-quart),
    border-color var(--d-base) var(--ease-out-quart);
}

/* Fill wipes up from the bottom on hover. Transform-only, so it never
   triggers layout. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--d-base) var(--ease-out-expo);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleY(1);
}

.btn:hover,
.btn:focus-visible {
  color: var(--btn-primary-fg);
  border-color: var(--accent);
}

.btn__arrow {
  transition: transform var(--d-base) var(--ease-out-expo);
  flex: none;
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(0.35rem);
}

/* Primary — solid blue, wipes to white-on-black */
.btn--primary {
  --btn-bg: var(--accent);
  --btn-border: var(--accent);
  /* Pure white, not --c-white: #F5F5F5 on #2563FF is 4.47:1 and misses AA. */
  --btn-fg: var(--btn-primary-fg);
}

.btn--primary::before {
  background: var(--fg);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--bg);
  border-color: var(--fg);
}

/* Ghost — text only, underline grows from the left */
.btn--ghost {
  padding-inline: 0;
  border: none;
  min-height: auto;
}

.btn--ghost::before {
  content: '';
  inset: auto 0 0 0;
  height: var(--border-w);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease-out-expo);
}

.btn--ghost:hover::before,
.btn--ghost:focus-visible::before {
  transform: scaleX(1);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--accent-text);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition:
    transform var(--d-base) var(--ease-out-quart),
    background-color var(--d-base) linear,
    border-color var(--d-base) linear;
  border-bottom: var(--border-w) solid transparent;
}

/* Solid once scrolled past the hero so links stay legible over content.

   Opaque on purpose: a backdrop-filter here re-blurs everything behind the
   bar on every scroll frame, which was a steady source of jank. A solid
   surface is faster and reads cleaner against the editorial layout. */
.nav[data-scrolled] {
  background: var(--bg);
  border-bottom-color: var(--rule-faint);
}

/* Hidden while the intro is running. */
.nav[data-hidden] {
  transform: translateY(-100%);
  pointer-events: none;
}

/* While the mobile menu is open the nav floats over it, carrying only the
   brand and the close button. Its own chrome and language switcher step
   aside so the menu's controls (which are inside the focus trap) are the
   single set on screen. */
body[data-menu-open] .nav {
  background: transparent;
  border-bottom-color: transparent;
}

body[data-menu-open] .nav .lang {
  display: none;
}

.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

/* --- Brand -------------------------------------------------------------- */
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  color: var(--fg);
  /* The mark is wide and short (100:51.66), so the row is only ~16px tall on
     mobile once the "STUDIO" line is hidden. Padding lifts the hit area past
     the 24px minimum target size (WCAG 2.5.8). */
  padding-block: var(--s-3);
}

.nav__brand-mark {
  width: clamp(1.9rem, 2.6vw, 2.4rem);
  height: auto;
  color: var(--fg);
  transition: color var(--d-base) var(--ease-out-quart);
}

.nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 0.18em;
}

.nav__brand-name {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav__brand-sub {
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 0.7vw, 0.6rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.nav__brand:hover .nav__brand-mark,
.nav__brand:focus-visible .nav__brand-mark {
  color: var(--accent);
}

/* --- Links -------------------------------------------------------------- */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 2.2vw, var(--s-7));
  list-style: none;
}

.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-block: var(--s-2);
  transition: color var(--d-base) var(--ease-out-quart);
}

/* Underline grows from the left on hover, stays put when current. */
.nav__link::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: var(--border-w);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease-out-expo);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--fg);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
}

.nav__link[aria-current='page'] {
  color: var(--fg);
}

.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

/* --- Right cluster ------------------------------------------------------ */
.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 2vw, var(--s-6));
  flex: none;
}

.nav__cta {
  padding: var(--s-3) var(--s-5);
  min-height: 2.75rem;
}

/* ==========================================================================
   Language switcher
   ========================================================================== */
.lang {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
}

.lang__btn {
  position: relative;
  padding: var(--s-2) var(--s-2);
  color: var(--fg-faint);
  text-transform: uppercase;
  transition: color var(--d-fast) var(--ease-out-quart);
  /* Touch target — visually small, physically 44px (WCAG 2.5.8). */
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lang__btn:hover,
.lang__btn:focus-visible {
  color: var(--fg);
}

/* Current language: white + blue underscore. Not colour alone — the
   underline and aria-pressed both carry the state. */
.lang__btn[aria-pressed='true'] {
  color: var(--fg);
}

.lang__btn[aria-pressed='true']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.55rem;
  width: 1.1rem;
  height: var(--border-w);
  background: var(--accent-text);
  transform: translateX(-50%);
}

.lang__sep {
  color: var(--rule);
  user-select: none;
}

/* ==========================================================================
   Theme toggle

   One button that flips light/dark. Its accessible label describes the
   ACTION ("Switch to dark"), which is what a screen-reader user needs before
   activating it; the icon shows the state. Sits beside the language switcher,
   separated by a hairline so the two controls read as one utility cluster.
   ========================================================================== */
.theme-toggle {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-faint);
  transition: color var(--d-fast) var(--ease-out-quart);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--fg);
}

.theme-toggle__icon {
  width: 1.15rem;
  height: 1.15rem;
  position: absolute;
  transition:
    opacity var(--d-base) var(--ease-out-quart),
    transform var(--d-base) var(--ease-out-expo);
}

/* Sun shows in dark mode (click → go light); moon shows in light mode. */
.theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.theme-toggle[data-theme-state='dark'] .theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.theme-toggle[data-theme-state='dark'] .theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

/* Divider between the language switcher and the theme toggle. */
.utility {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.utility__sep {
  width: var(--border-w);
  height: 1.25rem;
  background: var(--rule);
  flex: none;
  margin-inline: var(--s-2);
}

/* ==========================================================================
   Mobile menu
   ========================================================================== */
.nav__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--fg);
}

.nav__toggle-box {
  position: relative;
  width: 1.5rem;
  height: 0.75rem;
}

.nav__toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--d-base) var(--ease-out-expo);
}

.nav__toggle-bar:first-child {
  top: 0;
}

.nav__toggle-bar:last-child {
  bottom: 0;
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bar:first-child {
  transform: translateY(0.37rem) rotate(45deg);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bar:last-child {
  transform: translateY(-0.37rem) rotate(-45deg);
}

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--gutter) var(--s-8);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-slow) var(--ease-in-out-quart);
  visibility: hidden;
}

.menu[data-open] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

.menu__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.menu__item {
  overflow: hidden;
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(2rem, 11vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--fg);
  transform: translateY(105%);
  transition: transform var(--d-slow) var(--ease-out-expo);
  transition-delay: var(--i-delay, 0ms);
}

.menu[data-open] .menu__link {
  transform: translateY(0);
}

.menu__link .index {
  font-size: var(--t-xs);
  color: var(--accent-text);
}

.menu__link[aria-current='page'] {
  color: var(--accent-text);
}

.menu__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--border-w) solid var(--rule-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out-quart) 320ms;
}

.menu[data-open] .menu__foot {
  opacity: 1;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  border-top: var(--border-w) solid var(--rule-faint);
  padding-block: var(--s-8) var(--s-6);
  margin-top: auto;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-7) var(--s-6);
  align-items: start;
}

.footer__brand-mark {
  width: 3rem;
  color: var(--fg);
  margin-bottom: var(--s-4);
}

.footer__tagline {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  max-width: 22ch;
  text-wrap: balance;
}

/* Sits under the tagline as a quieter second line — same column, body face,
   muted, so it reads as a caption rather than competing with the statement. */
.footer__location {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--fg-muted);
  max-width: 26ch;
}

.footer__col-title {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-4);
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  /* Padding on the links supplies most of the rhythm — see below. */
  gap: var(--s-1);
}

.footer__link {
  position: relative;
  display: inline-block;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  transition: color var(--d-fast) var(--ease-out-quart);
  width: fit-content;
  /* Text is ~17px tall; the padding brings the hit area past the 24px
     minimum target size (WCAG 2.5.8) without changing the visual rhythm. */
  padding-block: var(--s-2);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--fg);
}

/* Icon + label. The icon is sized in em so it tracks the label, and drawn in
   currentColor so it inherits the same theme-aware colour — including the
   hover shift above. */
.footer__link--icon {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.footer__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.footer__bar {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--border-w) solid var(--rule-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--fg-faint);
}

/* ==========================================================================
   Custom cursor — desktop pointer devices only, purely decorative.
   ========================================================================== */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-skip);
  width: 1.75rem;
  height: 1.75rem;
  border: var(--border-w) solid var(--fg-faint);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition:
    opacity var(--d-base) linear,
    width var(--d-base) var(--ease-out-expo),
    height var(--d-base) var(--ease-out-expo),
    background-color var(--d-base) var(--ease-out-expo),
    border-color var(--d-base) var(--ease-out-expo);
  will-change: transform;
}

.cursor[data-active] {
  opacity: 1;
}

.cursor[data-hover] {
  width: 3.5rem;
  height: 3.5rem;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor {
    display: none;
  }
}