/* ============================================
   藝洋視覺設計工作室 — Premium Design System
   Inspired by mentry.dev
   ============================================ */

/* ---- CSS Custom Properties ---- */
:root {
  color-scheme: dark;
  --bg: #0f0d10;
  --bg-soft: #171215;
  --panel: #21191c;
  --panel-2: #181f21;
  --text: #fff8ef;
  --muted: #cabcb0;
  --line: rgba(255, 248, 239, 0.12);
  --coral: #f1917d;
  --coral-dim: rgba(241, 145, 125, 0.15);
  --cyan: #7ad7cf;
  --lime: #f2c76f;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
  --radius: 0px;
  --font-heading: 'Fraunces', 'Noto Sans TC', serif;
  --font-body: 'Noto Sans TC', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Grotesk', 'JetBrains Mono', monospace;
  --container: 1200px;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
}

::selection {
  background: var(--coral);
  color: #160f10;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* Make <picture> wrappers transparent to layout so CSS targeting <img> inside
   containers (e.g. .avatar__core img, .work__img img) continues to work. */
picture { display: contents; }
ul, ol { list-style: none; }
h1, h2, h3, h4, p { margin-top: 0; }

/* ---- Skip Link ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 999;
  padding: 12px 24px;
  background: var(--coral);
  color: #160f10;
  font-weight: 700;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ---- Container ---- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}