:root{
  --header-height: 115px; /* updated by JS on load */
  --beige-1: #f5f0e6;
  --beige-2: #e0d4b7;
  --beige-dark: #c7b299;
}

/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; font-size: 1.1em;}
body {
  font-family: 'Roboto', sans-serif;
 margin: 0;
  padding-top: 90px; /* space for fixed header */
  
  background: linear-gradient(to bottom, #f5ebdc 0%, #e8d8bc 100%);
  background-repeat: no-repeat;       /* prevent tiling */
  background-attachment: fixed;       /* keep background static on scroll */
  background-size: cover;             /* stretch to cover full viewport */
  background-position: center;        /* center gradient if using image */
  color: #333;
  min-height: 100vh;
}

/* disable scroll when mobile nav open */
body.no-scroll { overflow: hidden; }



/* Header (fixed) using CSS Grid to keep center block centered while logo stays left */
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 18px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--beige-dark);
  z-index: 1000;
}

/* left column */

.logo { height: 115px; width: auto; display:block; }

/* center column - nav + title centered */
.header-center{
	position: absolute;
  display:flex;
  align-items:flex-end;
  bottom: 20px;
  justify-content:center;
  gap: 40px;
  width: 100%;
  vertical-align: bottom;
}

/* nav groups: two buttons group on each side of title */
.nav-group{ display:flex; gap:10px; align-items:center; }

/* transparent nav button style */
.nav-btn{
  background: transparent;
  border: 1px solid rgba(199,178,153,0.9);
  color: #2b2415;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: transform .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn:hover,
.nav-btn:focus{
  background: rgba(255,255,255,0.45);
  transform: translateY(-1px);
  outline: none;
}

/* title centered */
.site-title { 
font-size: 1.6rem; 
cursor: pointer; 
user-select: none; 
font-size: 2.2rem;
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  }

/* right column */
.header-right { display:flex; justify-content:flex-end; align-items:center; }
.hamburger{
  display:none; /* hidden on desktop */
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* MOBILE NAV - hidden by default, shown by toggling .open */
.mobile-nav{
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(6px);
  padding: 12px 16px 24px;
  z-index: 9998;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mobile-nav.open { display: flex; }
.mobile-close{
  position: absolute;
  right: 12px;
  top: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

/* CHAPTERS - centered content with left-aligned title */
.chapter{
  width: 55%;
  margin: 50px auto;
  
  padding: 30px 0px 30px 0;
}

.chapter-large{
  width: 75%;
  margin: 10px auto;
  
  padding: 20px 0px 20px 0;
}
.chapter-title{
  text-align: left;
  font-size: 2.2rem;
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 16px;
  color: #3b3220;
  font-weight: 700;
}

.chapter-subtitle{
  text-align: left;
  font-size: 1.8rem;
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 16px;
  color: #3b3220;
  font-weight: 700;
}

.chapter-title-right{
  text-align: right;
  font-size: 2.2rem;
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 16px;
  color: #3b3220;
  font-weight: 700;
}

/* inner content centered */
.chapter-inner { display:flex; gap:28px; justify-content:center; flex-wrap:nowrap; align-items: flex-start;}
.chapter-inner.single { justify-content:center; }
.chapter-text { flex: 1 1 480px; text-align: center; font-size: 1.05rem; line-height: 1.55; }
.chapter-right { flex: 0 0 480px; display:flex; justify-content:center; }


/* Chapter 1 layout */
#chapter1 .chapter-inner {
  display: flex;
  flex-direction: row;       /* text left, image right */
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

#chapter1 .chapter-text {
  flex: 1 1 100%;
  text-align: left;          /* text left-aligned */
  font-size: 1.1rem;
  line-height: 1.6;
}

#chapter1 .chapter-right {
  flex: 0 0 40%;
  display: flex;
  justify-content: flex-end;
}

#chapter1 .hero-img {
  width: 100%;
  max-width: 400px;          /* smaller image size */
  height: auto;
  border-radius: 12px;
/*  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);*/
}

.wip
{
  max-width:600px;
  display:flex;
  justify-content:center;
  vertical-align: bottom;
}

.card{
background: rgba(255,255,255,0.95);
border: 4px solid var(--outline);
border-radius: 18px;
padding: 18px;
box-shadow: 0 6px 0 rgba(0,0,0,0.06);
margin-bottom: 18px;
position: relative;
}

table{
      width: 100%;
      border-collapse: separate;
      border-spacing: 1;
      margin-top: 20px;
      border: 4px solid var(--outline);
      border-radius: 14px;
      overflow: hidden;
	  background:#fff;
    }
    table th, table td{
     /* border: 2px solid var(--outline);*/
      padding: 15px;
      text-align: left;
	   
    }
    table th{
     /* background: var(--accent);*/
	 background:#fff;
      color: #000;
    }
	tr:nth-child(even) {
  background-color: rgba(250, 245, 235, 0.7); /* alternating rows */
}
	
    table tr:first-child th:first-child { border-top-left-radius: 10px; }
    table tr:first-child th:last-child { border-top-right-radius: 10px; }
    table tr:last-child td:first-child { border-bottom-left-radius: 10px; }
    table tr:last-child td:last-child { border-bottom-right-radius: 10px; }

/* Hosts section */
.hosts-grid {
  display: flex;
 /* flex-wrap: nowrap;            prevents wrapping */
  justify-content: center;     /* centers both boxes horizontally */
  align-items: flex-start;
  gap: 40px;                   /* spacing between Tiffany and Nashi */
  margin-top: 20px;
}

.host {
  flex: 1 1 45%;               /* each host takes roughly half the width */
  max-width: 1000px;            /* prevent boxes from growing too large */
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 18px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.host h3 {
  text-align: center;
  margin-bottom: 10px;
}

.episode-icons{
	text-align:center;
	
}

.episode-icons img {
  width: 32px;          /* controls width */
  height: 32px;         /* controls height */
  object-fit: contain;  /* maintain aspect ratio */
  margin-right: 10px;   /* spacing between icons */
  vertical-align: middle;
  
  cursor: pointer;
  transition: transform 0.2s;
}

.episode-icons img:hover {
  transform: scale(1.1); /* slight zoom on hover */
}

.host-img {
  width: 140px;                 /* smaller, uniform size */
  height: 140px;                /* force square to make circle */
  border-radius: 50%;           /* makes it a perfect circle */
  border: 1px solid #c7b299;    /* thin beige border */
  object-fit: cover;            /* ensures image fills the circle nicely */
  display: block;
  margin: 10px auto 20px auto;  /* centers the image and adds spacing */
}
/* episodes table */
.episodes-table{ width:100%; border-collapse:collapse; margin-top:12px; }
.episodes-table th, .episodes-table td{ border:1px solid rgba(199,178,153,0.6); padding:10px; text-align:center; }
.pod-icon{ height:32px; width:auto; margin:0 8px; }

/* contact link style */
.chapter a { color: #3b3220; font-weight:700; }

/* responsive */
@media (max-width: 900px) {
  .chapter-inner { gap:18px; }
  .chapter-title { font-size: 1.9rem; }
}
@media (max-width: 768px) {
  /* show hamburger, hide centered header group */
  .header-center { display: none; }
  .hamburger { display: block; }
  .header { grid-template-columns: auto auto; padding: 0 12px; }
  .header-left { order: 1; }
  .header-right { order: 2; }

  /* mobile nav layout handled by mobile-nav */
  .chapter-text { text-align: center; }
  .chapter-title { text-align: left; font-size: 1.6rem; }
  .host{ text-align: center; }
  .host img { margin: 0 auto 12px auto; }
}


/* ==================== MOBILE RESPONSIVENESS FIXES ==================== */
@media (max-width: 768px) {

  /* General text layout */
  body, p, h1, h2, h3, h4, h5, h6 {
    text-align: left !important;
    margin: 0 auto;
    width: 100%;
    padding: 0 1rem;
  }

  
  .mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: rgba(245, 235, 220, 0.98);
    width: 100%;
    position: absolute;
    top: 80px;
    left: 0;
    padding: 1rem;
    gap: 10px;
    z-index: 999;
  }

  .mobile-nav.hidden {
    display: none !important;
  }

  .mobile-nav button {
    width: 100%;
    text-align: left;
    font-size: 1rem;
    padding: 10px;
    border: none;
    background: transparent;
    color: #333;
    border-bottom: 1px solid #c7b299;
  }

  /* Chapter 1 layout fix: move image below text */
  #chapter1 .chapter-inner {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start;
  }

  #chapter1 #imageASAP {
    order: 2; /* move image under text */
    max-width: 100%;
    margin-top: 1rem;
    align-self: center;
  }

  /* Host grid fix: stack vertically */
  .hosts-grid {
    display: flex;
    flex-direction: column !important;
    align-items: center;
    gap: 1.5rem;
  }

  .host-box, .host {
    width: 95%;
    max-width: 600px;
    text-align: left;
  }

  /* Adjust table readability */
  table {
    width: 100%;
    font-size: 0.95rem;
  }

  th, td {
    padding: 10px;
  }

  /* Improve general readability */
  .chapter, .chapter-content, .chapter-inner {
    padding: 1rem 1rem;
	
	
  }
  .chapter{
  margin: 10px;
  }

  .header-center, .header-title {
    text-align: center;
    justify-content: center;
  }
}


/* ==================== MOBILE HEADER REFINEMENT ==================== */
@media (max-width: 768px) {



  .chapter-title {
    margin-bottom: 0.25rem !important; /* tighter title-to-content spacing */
  }

  p, .chapter-content, .chapter-inner {
    margin-bottom: 0.25rem !important;
  }
  
  /* Make header scroll away instead of fixed */
  .header {
    position: relative !important;
    height: 60px !important;
    padding: 0 10px !important;
    justify-content: center;
    align-items: center;
  }

  /* Hide all header buttons */
  .header-center button {
    display: none !important;
  }

  /* Center only the title "ASAP" */
  .header-title {
    font-size: 1.6rem !important;
    text-align: center !important;
    width: 100%;
    margin: 0 auto !important;
  }

  /* Hide logo if desired for cleaner header */
  .logo {
    display: none !important;
  }

  body {
    padding-top: 0 !important; /* remove top padding since header is no longer fixed */
  }
  
  img[src*="wip.gif"], 
  #wip, 
  .wip {
    max-width: 50% !important;  /* scales down to 70% of container width */
    height: auto !important;    /* keeps aspect ratio */
    display: block;
    margin: 1rem auto;          /* centers image horizontally */
  }
}



/* Ensure on mobile the header only shows title "ASAP" and hides buttons + hamburger + mobile-nav */
@media (max-width: 768px) {
  .header { position: relative !important; height: 60px !important; padding: 8px 12px !important; }
  .logo { display: none !important; }
  .header-center { display: flex !important; justify-content: center !important; align-items: center !important; position: relative !important; left: auto !important; transform: none !important; bottom: auto !important; gap: 0 !important; }
  /* hide all nav buttons */
  .header-center .nav-btn, .mobile-nav-btn, .hamburger, .header-right { display: none !important; }
  
  
  /* show only the title */
  .site-title, .header-title { display: block !important; margin: 0 auto !important; font-size: 1.6rem !important; text-align: center !important; }
  .mobile-nav { display: none !important; }
  body { padding-top: 0 !important; }
}



/* ==================== MOBILE FONT RESIZING ==================== */
@media (max-width: 768px) {
  html, body {
    font-size: 0.9rem !important;  /* slightly smaller base font */
    line-height: 1.5 !important;
  }

  h1, .header-title {
    font-size: 1.6rem !important;
  }

  h2, .chapter-title {
    font-size: 1.6rem !important;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  p, li, td, th, button {
    font-size: 0.95rem !important;
  }

  .host-box p {
    font-size: 0.9rem !important;
  }

  table {
    font-size: 0.85rem !important;
  }

  .episode-icons img {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 768px) {
  body, section, .chapter, .chapter-content, .chapter-inner, p {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .chapter {
    width: 100% !important;  /* use full screen width */
    max-width: none !important;
  }

  .host-box, .hosts-grid, table {
    width: 100% !important;  /* allow full width for hosts and tables */
  }

  .chapter-title {
    padding-left: 0.5rem !important;
  }
}