/* Knitbot - Static archive CSS */

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

:root {
  --heading-font: Georgia, 'Times New Roman', serif;
  --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --text-color: #333;
  --link-color: #88AA3C;
  --link-hover-color: #6d882e;
  --bg-color: #fff;
  --border-color: #e0e0e0;
  --outer-padding: 100px;
  --page-padding: 52px;
  --top-padding: 100px;
  --max-width: 960px;
}

html {
  font-size: 16px;
  line-height: 1.6;
}

body {
  font-family: var(--body-font);
  color: var(--text-color);
  background: var(--bg-color);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== Layout ===== */
#canvas {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--outer-padding);
}

#header {
  padding-top: var(--top-padding);
  padding-bottom: var(--page-padding);
  text-align: center;
}

#upper-logo {
  margin-bottom: 20px;
}

.logo {
  font-family: var(--heading-font);
  font-size: 2.4em;
  font-weight: normal;
  letter-spacing: 0.05em;
}

.logo a {
  color: var(--text-color);
  text-decoration: none;
}

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

/* ===== Navigation ===== */
.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.main-nav a {
  font-family: var(--body-font);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-color);
}

.main-nav a:hover {
  color: var(--link-color);
}

/* ===== Page Content ===== */
#page {
  padding-bottom: var(--page-padding);
  min-height: 50vh;
}

/* ===== Squarespace Grid System ===== */
.sqs-layout {
  width: 100%;
}

.sqs-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.sqs-col-1 { flex: 0 0 8.333%; max-width: 8.333%; padding: 0 15px; }
.sqs-col-2 { flex: 0 0 16.666%; max-width: 16.666%; padding: 0 15px; }
.sqs-col-3 { flex: 0 0 25%; max-width: 25%; padding: 0 15px; }
.sqs-col-4 { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 15px; }
.sqs-col-5 { flex: 0 0 41.666%; max-width: 41.666%; padding: 0 15px; }
.sqs-col-6 { flex: 0 0 50%; max-width: 50%; padding: 0 15px; }
.sqs-col-7 { flex: 0 0 58.333%; max-width: 58.333%; padding: 0 15px; }
.sqs-col-8 { flex: 0 0 66.666%; max-width: 66.666%; padding: 0 15px; }
.sqs-col-9 { flex: 0 0 75%; max-width: 75%; padding: 0 15px; }
.sqs-col-10 { flex: 0 0 83.333%; max-width: 83.333%; padding: 0 15px; }
.sqs-col-11 { flex: 0 0 91.666%; max-width: 91.666%; padding: 0 15px; }
.sqs-col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }

/* Span classes (alias for col) */
.span-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.span-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.span-3 { flex: 0 0 25%; max-width: 25%; }
.span-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.span-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.span-6 { flex: 0 0 50%; max-width: 50%; }
.span-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.span-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.span-9 { flex: 0 0 75%; max-width: 75%; }
.span-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.span-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.span-12 { flex: 0 0 100%; max-width: 100%; }

/* ===== Block Types ===== */
.sqs-block {
  margin-bottom: 20px;
}

.sqs-block-html {
  line-height: 1.7;
}

.sqs-block-html h1,
.sqs-block-html h2,
.sqs-block-html h3 {
  font-family: var(--heading-font);
  font-weight: normal;
  margin: 1em 0 0.5em;
}

.sqs-block-html p {
  margin-bottom: 1em;
}

.sqs-block-html ul,
.sqs-block-html ol {
  margin: 0 0 1em 1.5em;
}

/* Image blocks */
.sqs-block-image {
  margin-bottom: 20px;
}

.image-block-wrapper {
  position: relative;
}

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

.image-block-outer-wrapper {
  margin-bottom: 20px;
}

.image-caption-wrapper {
  margin-top: 6px;
}

.image-caption {
  font-size: 0.8em;
  color: #999;
  line-height: 1.4;
}

.image-caption p {
  margin: 0;
}

/* ===== Blog Posts ===== */
article.hentry {
  margin-bottom: 40px;
}

h1.entry-title {
  font-family: var(--heading-font);
  font-size: 2em;
  font-weight: normal;
  margin-bottom: 0.3em;
}

.entry-title a {
  color: var(--text-color);
}

.entry-title a:hover {
  color: var(--link-color);
}

.entry-content,
.body.entry-content {
  line-height: 1.7;
}

.entry-content h2,
.entry-content h3 {
  font-family: var(--heading-font);
  font-weight: normal;
  margin: 1.5em 0 0.5em;
}

.entry-content p {
  margin-bottom: 1em;
}

.entry-content img {
  margin: 1em 0;
}

.entry-content blockquote {
  border-left: 3px solid var(--border-color);
  padding-left: 1em;
  margin: 1em 0;
  color: #666;
  font-style: italic;
}

/* Post metadata */
.meta,
.entry-meta {
  font-size: 0.85em;
  color: #999;
  margin-bottom: 1.5em;
}

.meta a {
  color: #999;
}

.meta time {
  display: inline;
}

/* Categories/tags */
.entry-tags,
.entry-categories {
  font-size: 0.85em;
  color: #999;
  margin-top: 2em;
}

/* Author */
.entry-author {
  font-size: 0.85em;
  color: #999;
}

/* ===== Blog Listing ===== */
.blog-listing h1 {
  font-family: var(--heading-font);
  font-size: 2em;
  font-weight: normal;
  margin-bottom: 1em;
}

.year-list {
  list-style: none;
  padding: 0;
}

.year-list li {
  margin-bottom: 0.5em;
  font-size: 1.1em;
}

.post-summary {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--border-color);
}

.post-summary time {
  font-size: 0.85em;
  color: #999;
  display: block;
  margin-bottom: 0.3em;
}

.post-summary h2 {
  font-family: var(--heading-font);
  font-size: 1.3em;
  font-weight: normal;
  margin-bottom: 0.3em;
}

.post-summary h2 a {
  color: var(--text-color);
}

.post-summary h2 a:hover {
  color: var(--link-color);
}

.post-summary .excerpt {
  color: #666;
  font-size: 0.95em;
}

/* ===== Products/Shop ===== */
.product-title {
  font-family: var(--heading-font);
  font-size: 1.8em;
  font-weight: normal;
  margin-bottom: 0.5em;
}

.product-price {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 1em;
}

.product-description {
  line-height: 1.7;
  margin-bottom: 2em;
}

.product-description p {
  margin-bottom: 1em;
}

.product-gallery img {
  margin-bottom: 15px;
}

/* Product listing grid */
.products-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}

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

.product-card img {
  margin-bottom: 10px;
}

.product-card h3 {
  font-family: var(--heading-font);
  font-weight: normal;
  font-size: 1.1em;
}

/* ===== Podcast ===== */
.podcast-episode {
  margin-bottom: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.podcast-episode h3 {
  font-family: var(--heading-font);
  font-weight: normal;
  font-size: 1.2em;
  margin-bottom: 10px;
}

.podcast-episode audio {
  width: 100%;
  margin-top: 5px;
}

/* ===== Footer ===== */
#footer {
  padding: var(--page-padding) 0;
  border-top: 1px solid var(--border-color);
  text-align: center;
  font-size: 0.85em;
  color: #999;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  :root {
    --outer-padding: 20px;
    --top-padding: 40px;
    --page-padding: 30px;
  }

  .sqs-row {
    flex-direction: column;
  }

  .sqs-col-1, .sqs-col-2, .sqs-col-3, .sqs-col-4,
  .sqs-col-5, .sqs-col-6, .sqs-col-7, .sqs-col-8,
  .sqs-col-9, .sqs-col-10, .sqs-col-11, .sqs-col-12,
  .span-1, .span-2, .span-3, .span-4,
  .span-5, .span-6, .span-7, .span-8,
  .span-9, .span-10, .span-11, .span-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .main-nav ul {
    flex-wrap: wrap;
    gap: 15px;
  }

  h1.entry-title {
    font-size: 1.5em;
  }

  .logo {
    font-size: 1.8em;
  }
}

@media (max-width: 480px) {
  :root {
    --outer-padding: 15px;
    --top-padding: 20px;
  }

  .main-nav ul {
    gap: 10px;
    font-size: 0.9em;
  }
}