@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500&family=Outfit:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --site-header: clamp(70px, 7.872vw, 136px);
  --paper: #dedede;
  --quiet: #929292;
  --gradient-blue: #707e97;
  --gradient-sand: #d1c2bb;
}
* { box-sizing: border-box; }
html { background: #000; }
body { margin: 0; background: #000; color: var(--paper); font-family: 'Inter', 'Noto Sans TC', sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #d1c2bb; outline-offset: 6px; }
.site-header { height: var(--site-header); position: fixed; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 3.4%; background: #000; }
.site-brand { font-family: 'Outfit', sans-serif; font-size: clamp(16px, 1.45vw, 25px); font-weight: 500; letter-spacing: .085em; text-decoration: none; white-space: nowrap; }
.site-brand sup { font-family: 'Inter', sans-serif; font-size: .48em; vertical-align: super; margin-left: .2em; }
.site-nav { display: flex; align-items: center; gap: clamp(24px, 3.6vw, 62px); }
.site-nav > a { font-family: 'Outfit', sans-serif; font-size: clamp(12px, 1.2vw, 20px); font-weight: 400; letter-spacing: .1em; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.site-nav > a:hover { color: #fff; }
.language-switch { display: flex; width: clamp(80px, 7.9vw, 136px); height: clamp(24px, 2.25vw, 39px); border: 1px solid #858585; border-radius: 99px; padding: 1px; }
.language-switch a { display: flex; align-items: center; justify-content: center; width: 50%; border-radius: 99px; font: 400 clamp(10px, .9vw, 15px) 'Outfit', sans-serif; text-decoration: none; letter-spacing: .04em; }
.language-switch a[aria-current='page'] { background: #fff; color: #111; }
.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 12px 18px; background: #fff; color: #000; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 680px) {
  :root { --site-header: 66px; }
  .site-header { padding: 0 22px; }
  .site-brand { font-size: 16px; }
  .site-nav { gap: 18px; }
  .site-nav > a { font-size: 12px; letter-spacing: .04em; }
  .site-nav { gap: 12px; }
  .language-switch { width: 62px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 360px) {
  .site-header { padding: 0 16px; }
  .site-brand { font-size: 14px; }
  .site-nav { gap: 10px; }
  .language-switch { width: 56px; }
}

/* Preserve the original brand image; never reconstruct it with a font. */
.site-brand img { display: block; width: clamp(108px, 8.91vw, 154px); height: auto; }
@media (max-width: 680px) { .site-brand img { width: 108px; } }
@media (max-width: 360px) { .site-brand img { width: 94px; } }