/*
Theme Name: Studies on Stories
Theme URI: https://studiesonstories.com
Author: Studies on Stories
Author URI: https://studiesonstories.com
Description: A literary theme devoted to the deep, unhurried exploration of books, writing, and the stories that shape how we see the world. Custom design with Manuskript Gothisch display font, warm paper texture, and alternating decorative side panels.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studiesonstories
Tags: literary, one-column, custom-menu, featured-images
*/

/* ============================================================
   Studies on Stories — Master Stylesheet
   ============================================================ */

/* --- Font Loading --- */
@font-face {
  font-family: 'Manuskript Gothisch';
  src: url('fonts/Manuskript_Gothisch_UNZ1A.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- CSS Custom Properties --- */
:root {
  --bg: #F7F5F2;
  --text: #1C1714;
  --accent: #5C3D2E;
  --panel-width: 90px;
  --nav-height: 60px;
  --content-max: 780px;
  --font-display: 'Manuskript Gothisch', 'Georgia', serif;
  --font-body: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text);
  background-color: var(--bg);
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Paper / linen texture overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* --- Links --- */
a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.75;
}

/* --- Display Font (Fraktur) --- */
.fraktur {
  font-family: var(--font-display);
  font-weight: normal;
}

h1 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 3rem;
  line-height: 1.2;
  color: #1C1714;
  margin-bottom: 0.25em;
}

/* --- Body Headings (Cormorant) --- */
h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1.3rem;
  margin-bottom: 0.4em;
}

p {
  margin-bottom: 1em;
}

/* --- Divider Line --- */
.divider {
  border: none;
  border-top: 1px solid var(--accent);
  margin: 1.5rem 0 2rem 0;
}

/* --- Navigation --- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 2.5rem;
  border-bottom: 1px solid var(--accent);
  background-color: var(--bg);
  position: relative;
  z-index: 100;
}

.site-nav .brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #1C1714;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav .brand:hover {
  opacity: 0.75;
}

.nav-links {
  display: flex;
  gap: 1.8rem;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

.nav-links a.active,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a {
  color: var(--accent);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
}

/* --- Page Layout with Side Panel --- */
.page-wrapper {
  display: flex;
  min-height: calc(100vh - var(--nav-height));
}

/* Left panel variant */
.page-wrapper.panel-left {
  flex-direction: row;
}

/* Right panel variant */
.page-wrapper.panel-right {
  flex-direction: row-reverse;
}

/* The painting panel */
.side-panel {
  width: var(--panel-width);
  min-width: var(--panel-width);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  flex-shrink: 0;
}

.side-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Main content area */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 3rem 4rem;
  max-width: 100%;
}

.main-content > .content-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 0.55em 1.6em;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
  text-decoration: none;
  line-height: 1.5;
}

.btn:hover {
  background-color: var(--accent);
  color: var(--bg);
  opacity: 1;
}

.btn::before {
  content: '\2726 ';
  font-size: 0.7em;
  position: relative;
  top: -0.05em;
}

/* --- Hero Section (Home) --- */
.hero {
  text-align: center;
  padding: 5rem 1rem 4rem 1rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: normal;
  color: #1C1714;
  line-height: 1.15;
  margin-bottom: 0.3em;
  color: var(--text);
}

.hero-tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: var(--text);
  opacity: 0.8;
}

/* --- Preview Cards (Home) --- */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.preview-card {
  text-align: center;
}

.preview-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
}

.preview-card h3 {
  margin-bottom: 0.3em;
}

.preview-card p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  opacity: 0.85;
}

/* --- About Page --- */
.about-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.about-image {
  width: 260px;
  min-width: 260px;
  flex-shrink: 0;
}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
}

.about-text {
  flex: 1;
}

/* --- Video Grid (YouTube) --- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}

.video-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  margin-bottom: 0.8rem;
}

.video-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.3em;
}

.video-card p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  opacity: 0.85;
}

/* --- Newsletter Signup --- */
.signup-form {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  max-width: 480px;
}

.signup-form input[type="email"] {
  flex: 1;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent);
  padding: 0.5em 0.2em;
  outline: none;
  transition: border-color 0.2s ease;
}

.signup-form input[type="email"]::placeholder {
  color: var(--accent);
  opacity: 0.5;
  font-style: italic;
}

.signup-form input[type="email"]:focus {
  border-bottom-width: 2px;
}

/* --- Books Page --- */
.coming-soon {
  text-align: center;
  padding: 6rem 1rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--text);
  letter-spacing: 0.05em;
}

/* --- Contact Page --- */
.contact-layout {
  display: flex;
  gap: 3rem;
  margin-top: 1rem;
}

.contact-info {
  flex: 1;
}

.contact-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  margin-bottom: 0.3em;
  color: var(--accent);
}

.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent);
  padding: 0.5em 0.2em;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  border-bottom-width: 2px;
}

.form-field textarea {
  min-height: 120px;
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--accent);
  text-align: center;
  padding: 1.5rem 2rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text);
  opacity: 0.7;
}

.site-footer a {
  color: var(--accent);
  margin: 0 0.5em;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767px) {
  .side-panel {
    display: none;
  }

  .main-content {
    padding: 2rem 1.5rem;
  }

  .site-nav {
    flex-wrap: wrap;
    padding: 0.8rem 1.2rem;
    gap: 0.5rem;
  }

  .nav-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
    padding-top: 0.8rem;
  }

  .nav-links.open {
    display: flex;
  }

  h1 {
    font-size: 2.2rem;
  }

  .hero-title {
    font-size: 2.8rem;
  }

  .hero {
    padding: 3rem 0.5rem 2.5rem 0.5rem;
  }

  .preview-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-layout {
    flex-direction: column;
  }

  .about-image {
    width: 100%;
    min-width: 0;
    max-width: 300px;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .signup-form {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-layout {
    flex-direction: column;
    gap: 2rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .main-content {
    padding: 2.5rem 2.5rem;
  }

  .preview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-title {
    font-size: 3.5rem;
  }
}