/*
  Xie Spills – personal writing portfolio styles
  A modern, editorial layout inspired by boutique writer portfolios.
*/

/* Reset a few basic elements */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  background-color: var(--bg);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Colour palette */
:root {
  --bg: #fbf7f4;
  --primary: #204E4A;
  --accent: #c05780;
  --text-dark: #333;
  --text-light: #555;
  --container-width: 1000px;
}

.container {
  width: 90%;
  max-width: var(--container-width);
  margin: 0 auto;
}

/* Navbar */
/*
 * Navigation bar
 *
 * Reduce the overall height and padding so that the hero artwork
 * isn’t obscured by the header. The semi–transparent backdrop
 * remains for readability on top of the hero image.
 */
.navbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  padding: 0.75rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  background-color: rgba(251, 247, 244, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.navbar .logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  transition: color 0.2s ease;
}

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

/* Mobile nav toggle */
.nav-toggle {
  display: none;
}
.nav-toggle-label {
  display: none;
  cursor: pointer;
  width: 30px;
  height: 22px;
  position: relative;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  position: absolute;
  height: 3px;
  width: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: transform 0.3s ease;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
}
.nav-toggle-label span::before { top: -7px; }
.nav-toggle-label span::after { top: 7px; }

/* When checkbox checked – transform burger into X */
.nav-toggle:checked + .nav-toggle-label span {
  transform: rotate(45deg);
}
.nav-toggle:checked + .nav-toggle-label span::before {
  transform: rotate(90deg) translateX(-7px);
}
.nav-toggle:checked + .nav-toggle-label span::after {
  transform: rotate(90deg) translateX(7px);
}

/* Hide nav on mobile by default */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
  .nav-toggle-label {
    display: block;
  }
  .nav-links {
    position: fixed;
    top: 70px;
    right: 0;
    background-color: var(--bg);
    width: 200px;
    height: calc(100vh - 70px);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    gap: 1rem;
  }
  .nav-toggle:checked ~ .nav-links {
    transform: translateX(0);
  }
}

/* Hero */
.hero {
  position: relative;
  /*
   * Make the hero fill the full viewport height to showcase the
   * illustration without being cropped by the navigation bar. Extra
   * top padding shifts the content down to reveal the faces of
   * Daniel and Xie Xie below the header. The background is centred
   * horizontally and aligned near the top so the characters remain
   * visible on all screen sizes.
   */
  min-height: 100vh;
  background-image: url('../images/hero-bg.png');
  background-size: cover;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding-top: 7rem;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 2rem;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
}

/* On the Beat tagline under hero heading */
.on-the-beat {
  font-size: 0.9rem;
  color: #eaeaea;
  margin-top: 0.8rem;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--accent);
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

/* Slightly darken the button on hover by reducing opacity */
.btn:hover {
  background-color: #a84d6d;
}

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

section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--primary);
}

section p {
  margin-bottom: 1rem;
  color: var(--text-light);
  line-height: 1.6;
}

/* About */
.about p {
  font-size: 1rem;
}

/* Highlights */
.highlights .highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.highlight-card {
  background-color: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.highlight-card:hover {
  transform: translateY(-5px);
}

.highlight-card .icon {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.highlight-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  color: var(--primary);
}

.highlight-card ul {
  list-style: disc inside;
  color: var(--text-light);
  margin-left: 0.5rem;
}

/* About grid */
/* Editorial about layout: three columns */
.about-grid {
  display: grid;
  /* Allocate a bit more room to the central text column so the
     portraits don’t overpower the copy.  The left and right
     columns remain flexible but narrower. */
  grid-template-columns: 1fr 3fr 1fr;
  /* Reduce the gaps and vertically center the items so the portraits
     flank the text instead of stacking above/below it */
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.5rem;
}
.about-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  object-fit: cover;
}
.about-left {
  /* Center the left image vertically */
  align-self: center;
  margin: 0;
}
.about-right {
  /* Center the right image vertically */
  align-self: center;
  margin: 0;
}

/* Give each about portrait its own personality. The drag portrait
   is slightly larger and shifted downward, while the headshot is
   slightly smaller and lifted upward. These transforms create
   visual movement reminiscent of a magazine spread. */
.about-left img {
  /* Remove transforms and constrain the size so the image
     doesn’t overpower the text.  Reduce the maximum width to
     keep the portraits proportionate to the copy. */
  transform: none;
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
}
.about-right img {
  transform: none;
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
}
.about-text {
  max-width: 100%;
}

/* Featured logos */
/* Lay out the publication logos using flexbox so they can be
   horizontally centered in the row and wrap evenly across lines. */
.featured .logos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.logo-item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  padding: 0.75rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Give each logo a fixed basis so the grid looks neat when
     centered and wrapping */
  flex: 0 0 120px;
}
.logo-item img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

/* Travel gallery */
.travel-gallery {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
/* Override travel gallery for interactive thumbnails */
.travel-gallery .travel-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  /* Enforce a consistent aspect ratio on each travel thumbnail */
  aspect-ratio: 4 / 3;
}
.travel-gallery .travel-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}
.travel-gallery .travel-item .caption {
  position: absolute;
  /* Position caption at the top of the thumbnail.  Start hidden
     and fade in on hover. */
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  text-align: center;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Show the caption only on hover or focus */
.travel-gallery .travel-item:hover .caption,
.travel-gallery .travel-item:focus .caption {
  opacity: 1;
  transform: translateY(0);
}

/* Celebrity gallery */
.celeb-gallery {
  margin-top: 1rem;
  display: grid;
  /* Use a slightly wider minmax value so the placeholders have enough
     space to display nicely. auto-fit ensures responsive wrapping. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
}

.celeb-item {
  /* Stack the name above the photo and center them */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}

.celeb-item .celeb-name {
  display: block;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0;
  color: var(--primary);
  font-size: 0.8rem;
}

.celeb-item img {
  /* Set a fixed height to ensure images render consistently across
     browsers that do not support aspect-ratio.  The width is set
     to 100% of the grid cell and object-fit ensures the headshot
     fills the frame without distortion. */
  width: 100%;
  height: 220px;
  border-radius: 8px;
  object-fit: cover;
  background-color: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Writing Samples */
.samples .publication {
  margin-bottom: 2rem;
}

.samples .publication h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.samples .publication ul {
  list-style: none;
  padding-left: 1rem;
}

.samples .publication li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1rem;
}

.samples .publication li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
}

.samples .publication a {
  text-decoration: none;
  color: var(--text-dark);
  transition: color 0.2s ease;
}

.samples .publication a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Contact */
.contact p {
  text-align: center;
  margin-bottom: 1.5rem;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* Social links displayed as rounded pills instead of relying on
   external icon fonts. Each anchor resembles a small badge. */
.social-links {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.social-links a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background-color: var(--primary);
  color: #fff;
  border-radius: 20px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.social-links a:hover {
  background-color: var(--accent);
}
.social-icons a {
  color: var(--primary);
  font-size: 1.8rem;
  transition: color 0.2s ease;
}

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

/* Footer */
.footer {
  background-color: var(--primary);
  color: #fff;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.9rem;
}

/* Utility classes */
@media (max-width: 600px) {
  .hero h1 {
    font-size: 2.2rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
  section h2 {
    font-size: 1.6rem;
  }
}