/* Global Styles */
:root {
  --primary-color: #eaeaea;
  --secondary-color: #1a1a1a;
  --accent-color: #555555;
  --text-color: #a0a0a0;
  --background-color: #1a1a1a;
  --surface-color: #242424;
  --border-color: #333333;
  --font-primary: 'Courier New', Courier, monospace;
  --font-heading: 'Courier New', Courier, monospace;
}

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

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin-bottom: 1rem;
  color: var(--primary-color);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-top: 2rem;
}

h3 {
  font-size: 1.5rem;
  margin-top: 1.5rem;
}

p {
  margin-bottom: 1.5rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-color);
}

/* Header */
header {
  background-color: var(--background-color);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
}

.logo a {
  color: var(--primary-color);
}

/* Navigation */
nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-left: 2rem;
}

nav ul li a {
  font-weight: 600;
  position: relative;
}

nav ul li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

nav ul li a:hover::after,
nav ul li a.active::after {
  width: 100%;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background-color: var(--primary-color);
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* Hero Section */
.hero {
  display: flex;
  align-items: center;
  padding: 4rem 0;
  gap: 2rem;
}

.hero-content {
  flex: 1;
}

.hero-image {
  flex: 1;
  text-align: center;
  max-width: 250px; /* 限制最大宽度 */
}

.hero-image img {
  max-width: 100%;
  border-radius: 0;
  border: 1px solid var(--border-color);
  filter: grayscale(100%) contrast(1.2);
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* Hero title paragraph with special styling */
.hero-content > p[data-translate="hero-title"] {
  /* Frame removed - plain text style */
}

/* Sections */
section {
  padding: 4rem 0;
}

/* Less space above footer */
section:last-of-type {
  padding-bottom: 2rem;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
}

/* Articles */
.article {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.article-date {
  color: var(--accent-color);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.article-title {
  margin-bottom: 1rem;
}

.read-more {
  font-weight: 600;
  display: inline-block;
  margin-top: 1rem;
}

/* Article Layout */
.article-header {
    margin-bottom: 2rem;
}

/* Article Tags */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 0.9rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.tag:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/* Portfolio */
.portfolio-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 0;
  background-color: var(--surface-color);
}

.portfolio-image-container {
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 设置宽高比 3:2 */
  overflow: hidden;
}

.portfolio-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.portfolio-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background: rgba(26, 26, 26, 0.9);
  color: var(--primary-color);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  border-top: 1px solid var(--border-color);
}

.portfolio-item:hover .portfolio-caption {
  transform: translateY(0);
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.portfolio-caption h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: white;
}

.portfolio-caption p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Contact Page: contact-info and message-board same width */
.contact-container,
.message-board {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.contact-info {
  background: var(--surface-color);
  padding: 2rem;
  border: 1px solid var(--border-color);
  border-radius: 0;
}

.contact-method a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-method a:hover {
  color: var(--primary-color);
}

.contact-info h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-size: 1.5rem;
}

.contact-info > p {
  margin-bottom: 2rem;
  color: var(--text-color);
  line-height: 1.8;
}

.contact-method {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 0.8rem;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.contact-method:hover {
  transform: translateX(5px);
  border-color: var(--primary-color);
}

.contact-method i {
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-right: 1rem;
  min-width: 30px;
  text-align: center;
}

.contact-method span {
  color: var(--text-color);
  font-size: 1rem;
}

.message-board {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-color);
}

.message-board h2 {
  text-align: center;
  margin-bottom: 1rem;
}

.message-board > p {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem;
  color: var(--text-color);
  line-height: 1.8;
}

/* Responsive iframe wrapper: same width as .contact-info; clip to hide scrollbar area */
.message-board-iframe-wrap {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 0;
}

.message-board-iframe-wrap iframe {
  display: block;
  width: calc(100% + 20px);
  min-height: 480px;
  height: 75vh;
  max-height: 800px;
  border: none;
  border-radius: 0;
  margin-right: -20px;
  /* Scrollbar inside cross-origin iframe cannot be removed via CSS; clipping may hide edge scrollbar in some browsers */
}

/* Contact Form */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

/* Message Board */
.message-board-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
}

.message-board-intro {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--text-color);
}

.message-board-intro p {
  font-size: 1.1rem;
  line-height: 1.8;
}

.message-board-frame {
  width: 100%;
  min-height: 600px;
  border: 1px solid var(--border-color);
  border-radius: 0;
  background-color: var(--surface-color);
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

input,
textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid var(--border-color);
  background-color: var(--surface-color);
  color: var(--primary-color);
  border-radius: 0;
  font-family: var(--font-primary);
}

textarea {
  min-height: 150px;
  resize: vertical;
}

button {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--border-color);
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.3s ease;
}

button:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

/* Social Media */
.social-links {
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0.35rem;
}

.social-links a {
  margin: 0 1rem;
  font-size: 1.5rem;
}

/* Footer */
footer {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: 0.75rem 0;
  text-align: center;
}

footer .container > p {
  margin: 0;
  font-size: 0.85rem;
}

footer a {
  color: var(--secondary-color);
}

footer a:hover {
  color: #ccc;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .hero {
    flex-direction: column-reverse;
    text-align: center;
  }
  
  .hero-image {
    margin-bottom: 2rem;
  }
  
  nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 200px; /* Fixed width for cleaner look */
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.5s ease;
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
  }
  
  nav.active {
    right: 0;
  }
  
  nav ul {
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
  }
  
  nav ul li {
    margin: 1rem 0;
  }
  
  .hamburger {
    display: block;
    z-index: 101;
  }
  
  .hamburger.active div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }
  
  .hamburger.active div:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger.active div:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
  }
  
  .portfolio-gallery {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .notion-content {
    margin: 1rem -20px;
    border-radius: 0;
  }

  .notion-embed {
    min-height: 500px;
    border-radius: 0;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .container {
    width: 95%;
    padding: 0 10px;
  }
}

/* Language Switch */
.language-switch {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.language-switch button {
    background: transparent;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.language-switch button:hover {
    background: #f0f0f0;
}

.language-switch button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.language-switch button.loading {
    position: relative;
}

.language-switch button.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    right: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.language-switch i {
    font-size: 20px;
}

/* Notion Content */
.notion-content {
    margin: 2rem 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

.notion-embed {
    width: 100%;
    border: none;
    border-radius: 0;
    transition: all 0.3s ease;
}

/* 适配 Notion 的默认样式 */
.notion-frame {
    border: none !important;
    border-radius: 0;
    overflow: hidden;
}

.notion-page-content {
    padding: 0 !important;
}

/* Notion Integration Styles */
.notion-embed-wrapper {
    position: relative;
    width: 100%;
    min-height: 600px;
    background: var(--surface-color);
    border-radius: 0;
    overflow: hidden;
}

.notion-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.9);
    z-index: 1;
}

.notion-loader .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

.notion-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.notion-error p {
    margin-bottom: 15px;
    color: var(--text-color);
}

.notion-error button {
    padding: 8px 16px;
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-family: var(--font-primary);
}

.notion-error button:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.error-message {
    padding: 15px;
    margin: 10px 0;
    background: var(--surface-color);
    border: 1px solid #ff4444;
    border-radius: 0;
    color: #ff4444;
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Work Experience Section */
.work-experience {
    max-width: 800px;
    margin: 0 auto;
}

.work-item {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.work-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.work-item h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.work-meta {
    color: var(--accent-color);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.work-item ul {
    margin-top: 1rem;
    margin-left: 1.5rem;
}

.work-item li {
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.skill-category h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
}

.skill-category ul {
    list-style: none;
    padding: 0;
}

.skill-category li {
    margin-bottom: 0.8rem;
    padding-left: 1rem;
    position: relative;
}

.skill-category li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

/* Timeline Section */
.timeline-section {
    background-color: var(--background-color);
    padding: 3rem 0;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
}

.timeline {
    position: relative;
    display: flex;
    gap: 1.5rem;
    padding: 2.5rem 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(136, 136, 136, 0.2) transparent;
    min-height: 280px;
}

/* Custom scrollbar for webkit browsers - subtle styling */
.timeline::-webkit-scrollbar {
    height: 6px;
}

.timeline::-webkit-scrollbar-track {
    background: transparent;
}

.timeline::-webkit-scrollbar-thumb {
    background: rgba(136, 136, 136, 0.2);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.timeline::-webkit-scrollbar-thumb:hover {
    background: rgba(136, 136, 136, 0.4);
}

/* Timeline horizontal line - positioned in the middle */
.timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: calc((180px + 1.5rem) * 7 + 4rem);
    height: 2px;
    background: var(--accent-color);
    pointer-events: none;
}

.timeline-item {
    position: relative;
    flex-shrink: 0;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Alternate items above and below the line */
.timeline-item:nth-child(odd) {
    align-items: center;
    justify-content: flex-end;
    padding-bottom: calc(50% - 5px);
}

.timeline-item:nth-child(even) {
    align-items: center;
    justify-content: flex-start;
    padding-top: calc(50% - 5px);
}

.timeline-date {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-color);
    font-family: var(--font-heading);
    position: relative;
    z-index: 2;
}

/* Position dates */
.timeline-item:nth-child(odd) .timeline-date {
    order: 2;
    margin-top: 0.6rem;
}

.timeline-item:nth-child(even) .timeline-date {
    order: 1;
    margin-bottom: 0.6rem;
}

.timeline-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border: 3px solid var(--background-color);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--accent-color);
    z-index: 10;
    opacity: 1;
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-dot {
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(136, 136, 136, 0.2);
}

.timeline-content {
    background: var(--surface-color);
    padding: 1rem;
    border-radius: 0;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    width: 100%;
    min-height: 100px;
}

/* Symmetrical tilting - left cards tilt left, right cards tilt right */
.timeline-item:nth-child(1) .timeline-content,
.timeline-item:nth-child(2) .timeline-content,
.timeline-item:nth-child(3) .timeline-content {
    transform: rotate(-2deg);
}

.timeline-item:nth-child(4) .timeline-content {
    transform: rotate(0deg);
}

.timeline-item:nth-child(5) .timeline-content,
.timeline-item:nth-child(6) .timeline-content,
.timeline-item:nth-child(7) .timeline-content {
    transform: rotate(2deg);
}

/* Position cards */
.timeline-item:nth-child(odd) .timeline-content {
    order: 1;
}

.timeline-item:nth-child(even) .timeline-content {
    order: 2;
}

.timeline-content:hover {
    border-color: var(--primary-color);
    transform: rotate(0deg) translateY(-4px) scale(1.02) !important;
}

.timeline-content h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.timeline-content p {
    margin-bottom: 0;
    color: var(--text-color);
    line-height: 1.4;
    font-size: 0.82rem;
}

/* Print styles */
@media print {
  header, 
  footer, 
  .hamburger,
  button,
  .contact-form {
    display: none;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
  
  .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  p, blockquote, ul, ol, dl, table {
    page-break-inside: avoid;
  }
}


/* ==================================================================
   NOTION EMBED OVERRIDES (The Cinematic Treatment)
   ================================================================== */
/* 
  Since Notion content is loaded via an iframe or API, we need to ensure 
  the dark theme applies to images natively within your articles.
  
  Note: If you are using an iframe, these styles must be injected 
  by your Notion renderer (like Super.so or simple iframe wrapper).
  If you are using the Notion API to render HTML locally, this will apply instantly.
*/

.notion-page-content img {
    /* Apply the stark Wuthering Heights grayscale filter to all article images */
    filter: grayscale(100%) contrast(1.2) !important;
    border-radius: 0 !important;
    border: 1px solid var(--border-color) !important;
    transition: filter 0.5s ease;
}

/* Optional: Hover effect to reveal original colors of the movie snapshot */
.notion-page-content img:hover {
    filter: grayscale(0%) contrast(1.1) !important;
}

/* Make blockquotes look like cinematic subtitles/scripts */
.notion-quote {
    border-left: 2px solid var(--primary-color) !important;
    font-family: var(--font-primary) !important;
    font-style: italic;
    color: var(--text-color) !important;
    background: transparent !important;
    padding-left: 1.5rem !important;
}