/* =============================================================
   SHARED STYLES — adamgascoine.com
   Edit the design tokens below to restyle the whole site at once.
   Page-specific settings live in each page's own <style> block.
   ============================================================= */


/* ---------------------------------------------------------------
   DESIGN TOKENS
   --------------------------------------------------------------- */
:root {

  /* Colours */
  --color-page-bg:          #0a0a0f;    /* page background */
  --color-text:             #e8e0d0;    /* primary text */
  --color-nav-inactive:     #6a6058;    /* inactive nav link colour */
  --color-discipline-label: #6a6058;    /* discipline/section label colour */
  --color-body-text:        #e8e0d0b8;  /* dimmed body paragraph text */
  --color-writing-accent:   #c8a76a;    /* gold  — writing scenes */
  --color-audio-accent:     #5ecfb8;    /* teal  — audio scenes */
  --color-art-accent:       #eeb496;    /* peach — art scene label */

  /* Typography */
  --font-main:          Georgia, 'Times New Roman', serif;
  --font-nav-link:      1.05rem;  /* nav bar links and site name */
  --font-body:          1.0rem;   /* paragraph and description text */
  --font-work-title:    1.15rem;  /* work/card titles in lists */
  --font-page-heading:  1.28rem;  /* page h1 and back link */
  --font-section-label: 1.28rem;  /* section labels within pages */

  /* Teaser card — Screenplay */
  --teaser-card-screenplay-title-font-family:    Georgia, 'Times New Roman', serif;
  --teaser-card-screenplay-title-font-size:      1.15rem;
  --teaser-card-screenplay-title-font-weight:    normal;
  --teaser-card-screenplay-title-text-align:     left;

  --teaser-card-screenplay-genre-font-family:    Georgia, 'Times New Roman', serif;
  --teaser-card-screenplay-genre-font-size:      0.78rem;
  --teaser-card-screenplay-genre-font-weight:    normal;
  --teaser-card-screenplay-genre-text-align:     left;

  --teaser-card-screenplay-logline-font-family:  Georgia, 'Times New Roman', serif;
  --teaser-card-screenplay-logline-font-size:    1.0rem;
  --teaser-card-screenplay-logline-font-weight:  normal;
  --teaser-card-screenplay-logline-text-align:   left;

  /* Teaser card — Play */
  --teaser-card-play-title-font-family:          Georgia, 'Times New Roman', serif;
  --teaser-card-play-title-font-size:            1.15rem;
  --teaser-card-play-title-font-weight:          normal;
  --teaser-card-play-title-text-align:           left;

  --teaser-card-play-genre-font-family:          Georgia, 'Times New Roman', serif;
  --teaser-card-play-genre-font-size:            0.78rem;
  --teaser-card-play-genre-font-weight:          normal;
  --teaser-card-play-genre-text-align:           left;

  --teaser-card-play-logline-font-family:        Georgia, 'Times New Roman', serif;
  --teaser-card-play-logline-font-size:          1.0rem;
  --teaser-card-play-logline-font-weight:        normal;
  --teaser-card-play-logline-text-align:         left;

  /* Teaser card — Narration */
  --teaser-card-narration-title-font-family:       Georgia, 'Times New Roman', serif;
  --teaser-card-narration-title-font-size:         1.15rem;
  --teaser-card-narration-title-font-weight:       normal;
  --teaser-card-narration-title-text-align:        left;

  --teaser-card-narration-description-font-family: Georgia, 'Times New Roman', serif;
  --teaser-card-narration-description-font-size:   1.0rem;
  --teaser-card-narration-description-font-weight: normal;
  --teaser-card-narration-description-text-align:  left;

  --teaser-card-narration-meta-line-font-family:   Georgia, 'Times New Roman', serif;
  --teaser-card-narration-meta-line-font-size:     0.78rem;
  --teaser-card-narration-meta-line-font-weight:   normal;
  --teaser-card-narration-meta-line-text-align:    left;

  /* Teaser card — Voiceover */
  --teaser-card-voiceover-title-font-family:       Georgia, 'Times New Roman', serif;
  --teaser-card-voiceover-title-font-size:         1.15rem;
  --teaser-card-voiceover-title-font-weight:       normal;
  --teaser-card-voiceover-title-text-align:        left;

  --teaser-card-voiceover-description-font-family: Georgia, 'Times New Roman', serif;
  --teaser-card-voiceover-description-font-size:   1.0rem;
  --teaser-card-voiceover-description-font-weight: normal;
  --teaser-card-voiceover-description-text-align:  left;

  --teaser-card-voiceover-meta-line-font-family:   Georgia, 'Times New Roman', serif;
  --teaser-card-voiceover-meta-line-font-size:     0.78rem;
  --teaser-card-voiceover-meta-line-font-weight:   normal;
  --teaser-card-voiceover-meta-line-text-align:    left;

  /* Writing overlay card — poetry, blog, commissions */
  --writing-overlay-card-background-color:        #0d0d14;
  --writing-overlay-card-border-color:            rgba(255,255,255,0.08);
  --writing-overlay-card-heading-color:           #e8e0d0;
  --writing-overlay-card-extract-border-color:    rgba(255,255,255,0.18);
  --writing-overlay-card-link-color:              #e8e0d0;

  /* Detail page — Back link (shared across all detail pages) */
  --detail-page-all-back-link-font-family:              Georgia, 'Times New Roman', serif;
  --detail-page-all-back-link-font-size:                1.28rem;
  --detail-page-all-back-link-font-weight:              normal;
  --detail-page-all-back-link-text-align:               left;

  /* Detail page — Meta line */
  --detail-page-screenplay-meta-line-font-family:       Georgia, 'Times New Roman', serif;
  --detail-page-screenplay-meta-line-font-size:         0.78rem;
  --detail-page-screenplay-meta-line-font-weight:       normal;
  --detail-page-screenplay-meta-line-text-align:        left;

  --detail-page-play-meta-line-font-family:             Georgia, 'Times New Roman', serif;
  --detail-page-play-meta-line-font-size:               0.78rem;
  --detail-page-play-meta-line-font-weight:             normal;
  --detail-page-play-meta-line-text-align:              left;

  /* Detail page — Title */
  --detail-page-screenplay-title-font-family:           Georgia, 'Times New Roman', serif;
  --detail-page-screenplay-title-font-size:             2rem;
  --detail-page-screenplay-title-font-weight:           normal;
  --detail-page-screenplay-title-text-align:            left;

  --detail-page-play-title-font-family:                 Georgia, 'Times New Roman', serif;
  --detail-page-play-title-font-size:                   2rem;
  --detail-page-play-title-font-weight:                 normal;
  --detail-page-play-title-text-align:                  left;

  /* Detail page — Information text */
  --detail-page-screenplay-information-font-family:     Georgia, 'Times New Roman', serif;
  --detail-page-screenplay-information-font-size:       1.0rem;
  --detail-page-screenplay-information-font-weight:     normal;
  --detail-page-screenplay-information-text-align:      left;

  --detail-page-play-information-font-family:           Georgia, 'Times New Roman', serif;
  --detail-page-play-information-font-size:             1.0rem;
  --detail-page-play-information-font-weight:           normal;
  --detail-page-play-information-text-align:            left;

  /* Detail page — Download button (shared across all detail pages) */
  --detail-page-all-download-button-font-family:        Georgia, 'Times New Roman', serif;
  --detail-page-all-download-button-font-size:          0.78rem;
  --detail-page-all-download-button-font-weight:        normal;
  --detail-page-all-download-button-text-align:         left;

  /* Detail page — Contact link (shared across all detail pages) */
  --detail-page-all-contact-link-font-family:           Georgia, 'Times New Roman', serif;
  --detail-page-all-contact-link-font-size:             0.78rem;
  --detail-page-all-contact-link-font-weight:           normal;
  --detail-page-all-contact-link-text-align:            left;

  /* Detail page — Excerpt label */
  --detail-page-screenplay-excerpt-label-font-family:   Georgia, 'Times New Roman', serif;
  --detail-page-screenplay-excerpt-label-font-size:     0.78rem;
  --detail-page-screenplay-excerpt-label-font-weight:   normal;
  --detail-page-screenplay-excerpt-label-text-align:    left;

  --detail-page-play-excerpt-label-font-family:         Georgia, 'Times New Roman', serif;
  --detail-page-play-excerpt-label-font-size:           0.78rem;
  --detail-page-play-excerpt-label-font-weight:         normal;
  --detail-page-play-excerpt-label-text-align:          left;

  /* Header */
  --header-height:    58px;        /* bar height — sub-pages use this for body padding */
  --color-header-bg:  #08080ce0;   /* frosted glass background */

  /* Detail panel — Poetry text */
  --detail-panel-poetry-text-font-family:  var(--font-main);
  --detail-panel-poetry-text-font-size:    var(--font-body);
  --detail-panel-poetry-text-font-weight:  normal;
  --detail-panel-poetry-text-font-style:   normal;
  --detail-panel-poetry-text-line-height:  1.85;

}


/* ---------------------------------------------------------------
   RESET
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-page-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  overflow-x: hidden;
}


/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 48px;
  height: var(--header-height);
  background: var(--color-header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #ffffff0f;
}
.site-name {
  font-size: var(--font-nav-link);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.site-name:hover { opacity: 1; }
header nav { display: flex; gap: 36px; }
header nav a {
  color: var(--color-nav-inactive);
  text-decoration: none;
  font-size: var(--font-nav-link);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.2s;
}
header nav a:hover, header nav a.active { color: var(--color-text); }

/* === BROWSE NAV LINK — remove with the browse overlay block to disable === */
.browse-nav-link {
  padding-left: 20px;
  border-left: 1px solid #ffffff14;
}

/* === HAMBURGER BUTTON — hidden on desktop === */
.hamburger {
  display: none;
}

@media (max-width: 768px) {
  /* Show hamburger, hide inline nav */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 201;
  }
  .hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* Animate to X when open */
  header.nav-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.nav-open .hamburger span:nth-child(2) { opacity: 0; }
  header.nav-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Nav hidden by default on mobile; drops down when open */
  header nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-header-bg);
    backdrop-filter: blur(12px);
    padding: 8px 0 16px;
    z-index: 195;
  }
  header.nav-open nav { display: flex; }

  /* Nav links in dropdown */
  header nav a {
    padding: 4px 24px;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-align: left;
    color: var(--color-text);
  }
  /* Remove the Browse separator line inside the dropdown */
  .browse-nav-link {
    padding-left: 24px;
    border-left: none;
  }
}