/* ===== Claude Version A — Editorial Ink (晨霧墨韻) ===== */

:root {
  /* Primary — corrected contrast ratios */
  --ink-primary: #006B7A;
  --ink-primary-hover: #005A66;
  --ink-accent: #B8944A;
  --ink-accent-text: #8A6D2F;

  /* Surface */
  --ink-surface: #F0EDE6;
  --ink-surface-alt: #E8E4DC;
  --ink-surface-card: #F5F2EC;

  /* Text */
  --ink-text: #1A1B1E;
  --ink-text-muted: #5A5A60;
  --ink-text-caption: #7A7A80;

  /* Semantic */
  --ink-success: #2D7D4F;
  --ink-warning: #8A6D2F;
  --ink-error: #A63D32;

  /* Decorative */
  --ink-splash-opacity: 0.06;
  --ink-noise-opacity: 0.03;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --space-32: 128px;
  --section-gap: clamp(64px, 10vh, 128px);

  /* Typography */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Satoshi', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-hero: clamp(3rem, 2rem + 5vw, 7rem);
  --text-h2: clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
  --text-h3: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  --text-body: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);

  /* Radius & Border */
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-subtle: 0.5px solid rgba(90, 90, 96, 0.15);
  --border-section: 1px solid rgba(90, 90, 96, 0.1);

  --shadow-card-hover: 0 8px 30px rgba(26, 27, 30, 0.12);
}

[data-theme="dark"] {
  --ink-primary: #4EC9D9;
  --ink-primary-hover: #3DB3C3;
  --ink-accent: #D4B06A;
  --ink-accent-text: #D4B06A;
  --ink-surface: #1A1A2A;
  --ink-surface-alt: #22223A;
  --ink-surface-card: #25253A;
  --ink-text: #E8E6E0;
  --ink-text-muted: #9A9AA0;
  --ink-text-caption: #7A7A88;
  --ink-splash-opacity: 0.08;
  --border-subtle: 0.5px solid rgba(200, 200, 210, 0.1);
  --border-section: 1px solid rgba(200, 200, 210, 0.08);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--ink-surface);
  color: var(--ink-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.4s, color 0.4s;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--ink-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 1000;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.skip-link:focus {
  top: var(--space-4);
}

/* Noise Overlay */
.noise-overlay {
  position: fixed; top:0; left:0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--ink-noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* Ink Splash */
.ink-splash {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.ink-splash--hero {
  top: -10%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 107, 122, var(--ink-splash-opacity)) 0%, transparent 60%);
}
.ink-splash--corner {
  bottom: -20%;
  left: -5%;
  width: 40%;
  height: 60%;
  background: radial-gradient(circle at 50% 50%, rgba(184, 148, 74, var(--ink-splash-opacity)) 0%, transparent 60%);
}

/* Header */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-8) clamp(16px, 5vw, 80px);
  position: sticky; top: 0;
  background: rgba(240, 237, 230, 0.85);
  backdrop-filter: blur(12px);
  z-index: 100;
  border-bottom: var(--border-subtle);
  transition: background 0.4s;
}
[data-theme="dark"] .site-header {
  background: rgba(26, 26, 42, 0.85);
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--ink-text);
  text-decoration: none;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav-desktop a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--ink-text-muted);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.2s;
}
.nav-desktop a::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--ink-primary);
  transition: width 0.2s ease;
  border-radius: 1px;
}
.nav-desktop a:hover { color: var(--ink-primary); }
.nav-desktop a:hover::after { width: 100%; }
.nav-desktop a:focus-visible {
  outline: 2px solid var(--ink-primary);
  outline-offset: 4px;
}

.theme-toggle {
  background: none; border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--ink-text);
  transition: transform 0.3s;
  line-height: 1;
}
.theme-toggle:hover { transform: rotate(15deg); }
.theme-toggle:active { transform: rotate(180deg); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--ink-primary);
  outline-offset: 4px;
}

/* Mobile Nav */
.nav-mobile {
  display: none;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 80px);
}

/* Hero */
.hero-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: var(--space-32) 0;
}
.hero-inner { position: relative; z-index: 1; }

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  line-height: 0.95;
  color: var(--ink-text);
}
.hero-rule {
  height: 2px;
  width: 200px;
  background: var(--ink-primary);
  margin: var(--space-6) 0;
}
.hero-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  line-height: 1.3;
  color: var(--ink-text);
  margin-bottom: var(--space-4);
}
.hero-tagline {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-text-muted);
}

/* Sections */
.section {
  margin-bottom: var(--section-gap);
}
.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
.section-number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-accent-text);
}
.section-rule {
  flex-grow: 1;
  height: 0.5px;
  background: var(--ink-text-muted);
  opacity: 0.3;
}
.section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--ink-text-muted);
  text-transform: uppercase;
}

/* Works Grid (Asymmetric) */
.works-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-6);
}
.project-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.project-card:focus-visible {
  outline: 2px solid var(--ink-primary);
  outline-offset: 4px;
}
.project-card--hero {
  grid-row: 1 / -1;
}
.project-image {
  overflow: hidden;
  aspect-ratio: 16/9;
}
.project-card--hero .project-image {
  aspect-ratio: auto;
  height: 100%;
}
.project-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.project-card:hover .project-image img {
  transform: scale(1.02);
}
.project-meta {
  padding: var(--space-4);
  background: var(--ink-surface-card);
}
.project-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-accent-text);
}
.project-name {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  margin-top: var(--space-2);
}
.project-desc {
  font-size: var(--text-sm);
  color: var(--ink-text-muted);
  margin-top: var(--space-1);
}

/* View All */
.view-all {
  margin-top: var(--space-8);
  border-top: var(--border-subtle);
  padding-top: var(--space-6);
  text-align: right;
}
.view-all-link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color 0.2s;
}
.view-all-link:hover { color: var(--ink-primary); }

/* Blog Section */
.post-card { cursor: pointer; }
.post-card--featured {
  margin-bottom: var(--space-8);
}
.post-featured-image {
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 21/9;
  margin-bottom: var(--space-6);
}
.post-featured-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s;
}
.post-card--featured:hover .post-featured-image img {
  transform: scale(1.02);
}

.post-title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  margin-bottom: var(--space-2);
  position: relative;
  display: inline-block;
}
.post-card:hover .post-title {
  color: var(--ink-primary);
}
.post-meta-line {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-text-muted);
  margin-bottom: var(--space-2);
}
.post-excerpt {
  font-size: var(--text-body);
  color: var(--ink-text-muted);
  line-height: 1.8;
}

.posts-compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.post-card--compact {
  border-top: var(--border-subtle);
  padding-top: var(--space-6);
}

/* Footer */
.site-footer {
  border-top: var(--border-section);
  padding: var(--space-12) 0;
  margin-top: var(--section-gap);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-text-muted);
}
.footer-links {
  display: flex;
  gap: var(--space-4);
}
.footer-links a {
  color: var(--ink-text-muted);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--ink-primary); }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .works-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .project-card--hero {
    grid-row: auto;
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .nav-desktop { display: none; }
  .nav-mobile {
    display: flex;
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    background: rgba(240, 237, 230, 0.92);
    backdrop-filter: blur(10px);
    justify-content: space-around;
    padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom));
    z-index: 100;
    border-top: var(--border-subtle);
  }
  [data-theme="dark"] .nav-mobile {
    background: rgba(26, 26, 42, 0.92);
  }
  .nav-mobile a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--ink-text-muted);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.2s;
  }
  .nav-mobile a.active, .nav-mobile a:hover {
    opacity: 1;
    color: var(--ink-primary);
  }

  .hero-section { min-height: 60vh; padding: var(--space-16) 0; }
  .works-grid {
    grid-template-columns: 1fr;
  }
  .project-card--hero { grid-column: span 1; }
  .posts-compact-grid { grid-template-columns: 1fr; }
  body { padding-bottom: 80px; }
}

/* Animations — respect reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .hero-title, .hero-subtitle, .hero-tagline,
  .section-header, .project-card, .post-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.5s ease forwards;
  }
  .hero-subtitle { animation-delay: 0.15s; }
  .hero-tagline { animation-delay: 0.3s; }
  .section-header { animation-delay: 0.1s; }
  .project-card:nth-child(1) { animation-delay: 0.2s; }
  .project-card:nth-child(2) { animation-delay: 0.3s; }
  .project-card:nth-child(3) { animation-delay: 0.4s; }
  .post-card--featured { animation-delay: 0.2s; }
  .post-card--compact:nth-child(1) { animation-delay: 0.3s; }
  .post-card--compact:nth-child(2) { animation-delay: 0.4s; }

  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
}