/* ============================================================
   SUNNYRAY: BLOG STYLES (supplements system.css)
   ============================================================ */

.blog-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: color-mix(in oklch, var(--paper) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* site-wide home link: arrow + sunnyray.com, nothing else.
   Replaced the sun mark + SUNNY RAY wordmark + "all posts" link, 2026-08-04,
   so blog pages match every other page on the domain. */
.blog-nav .home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: color-mix(in oklch, var(--ink) 55%, transparent);
  text-decoration: none;
  transition: color 0.2s;
}
.blog-nav .home:hover {
  color: var(--ink);
}
.blog-nav .nav-cta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  transition: background .2s, color .2s;
}
.blog-nav .nav-cta:hover { background: var(--sun); color: var(--ink); }

/* ===== Blog index ===== */

.blog-index {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 10vw, 120px) var(--gutter) clamp(80px, 12vw, 160px);
}

.blog-index-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}
@media (max-width: 820px) { .blog-index-head { grid-template-columns: 1fr; gap: 30px; } }

.blog-index-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
.blog-index-title em { font-style: italic; color: var(--ink-3); }

.blog-index-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 44ch;
}

.blog-list {
  border-top: 1px solid var(--ink);
}
.blog-list a {
  display: grid;
  grid-template-columns: 160px 1fr 40px;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  cursor: pointer;
  transition: padding .25s ease, background .25s ease;
}
.blog-list a:hover {
  padding-left: 12px;
  padding-right: 12px;
  background: var(--paper);
}
@media (max-width: 720px) {
  .blog-list a { grid-template-columns: 1fr 28px; }
  .blog-list a .post-date { display: none; }
}
.blog-list .post-date {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.blog-list .post-title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.blog-list .post-arrow {
  justify-self: end;
  color: var(--ink-3);
  transition: transform .25s, color .25s;
  font-family: var(--mono);
}
.blog-list a:hover .post-arrow { transform: translateX(4px); color: var(--ink); }

.blog-year-break {
  padding: 36px 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}

/* ===== Single blog post ===== */

.blog-post {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(60px, 10vw, 120px) var(--gutter) 80px;
}

.blog-post-head { margin-bottom: 60px; }

.blog-post-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.blog-post-meta .cat {
  color: var(--sun-deep);
}

.blog-post h1 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.blog-post-lede {
  margin-top: 32px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 55ch;
}

.blog-share {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.blog-content + .blog-share {
  margin-top: 64px;
}
.blog-share-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-right: 4px;
}
.blog-share-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.blog-share-link:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.blog-share-copy { font: inherit; }


.blog-content {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--ink);
}
.blog-content p {
  margin-bottom: 1.2em;
}
.blog-content p[style*="pre-wrap"] {
  white-space: normal !important;
}
.blog-content h1,
.blog-content h2 {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 1.6em 0 0.5em;
}
.blog-content h3,
.blog-content h4 {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 1.4em 0 0.5em;
}
.blog-content a {
  color: var(--sun-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.blog-content a:hover { color: var(--ink); }
.blog-content blockquote {
  border-left: 2px solid var(--sun);
  padding-left: 20px;
  margin: 1.6em 0;
  font-style: italic;
  color: var(--ink-2);
}
.blog-content img {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  margin: 2em auto;
  border-radius: 4px;
}
.blog-content ul,
.blog-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}
.blog-content li { margin-bottom: 0.4em; }
.blog-content hr {
  margin: 2.4em auto;
  border: 0;
  border-top: 1px solid var(--line);
  width: 80px;
}
.blog-content .sqs-html-content { display: contents; }

.blog-post-foot {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) { .blog-post-foot { grid-template-columns: 1fr; } }
.blog-post-foot a {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blog-post-foot a:hover { color: var(--ink); }
.blog-post-foot .kicker { font-size: 10px; opacity: .6; }
.blog-post-foot .foot-title {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.blog-post-foot .next { text-align: right; align-items: flex-end; }

.blog-cta-band {
  padding: clamp(70px, 10vw, 120px) var(--gutter);
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
.blog-cta-band h3 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin: 0 auto 20px;
  text-wrap: balance;
}
.blog-cta-band h3 em { color: var(--sun); font-style: italic; }
.blog-cta-band p {
  margin: 0 auto 34px;
  max-width: 54ch;
  color: rgba(247, 245, 240, 0.72);
  font-size: 1.02rem;
  line-height: 1.55;
}
.blog-cta-band .btn {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
}
.blog-cta-band .btn:hover { background: var(--paper); border-color: var(--paper); }

/* ===== About page ===== */

.about-page {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(60px, 10vw, 120px) var(--gutter) 80px;
}
.about-page .blog-content h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-align: center;
  margin: 0 0 60px;
  text-wrap: balance;
}
.about-page .blog-content h1 strong { font-weight: 400; }
.about-page .blog-content p {
  font-size: 1.15rem;
  line-height: 1.6;
}
.about-page .blog-content p strong {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  color: var(--sun-deep);
  font-size: 1.25em;
}
/* Prose only, photo grid uses .about-ph-grid + about-gallery.css */
.about-page .blog-content p img {
  max-width: 100%;
  margin: 2.4em auto;
  border-radius: 6px;
}

/* ===== Footer (shared with homepage) ===== */

.footer {
  background: var(--paper-2);
  padding: 60px 0 40px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h6 {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--serif);
  font-size: 1.1rem;
  padding: 0;
  margin: 0;
}
.footer ul a { transition: color .2s; }
.footer ul a:hover { color: var(--sun-deep); font-style: italic; }
.footer .brand-big {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.footer-bot {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}

/* Related reading. Topical internal links between posts, added 2026-08-16.
   Before this the only path between posts was chronological prev/next. */
.blog-related{margin:44px 0 8px;padding-top:22px;border-top:1px solid rgba(0,0,0,.10)}
.blog-related-title{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;margin:0 0 14px;font-weight:600}
.blog-related ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.blog-related li{margin:0}
.blog-related a{display:block;font-weight:600;text-decoration:none;line-height:1.3}
.blog-related a:hover{text-decoration:underline}
.blog-related-note{display:block;font-weight:400;font-size:.86rem;opacity:.62;margin-top:3px}
@media(min-width:720px){.blog-related ul{grid-template-columns:repeat(3,1fr);gap:20px}}

/* Section subheadings, added 2026-08-16. Posts previously ran as unbroken
   paragraph sequences with no heading structure below the h1, which cost both
   scannability and machine extraction. Deliberately quiet so the page still
   reads as prose rather than documentation. */
.blog-content h2.blog-h2{
  font-size:1.06rem;line-height:1.35;font-weight:600;
  margin:2.1em 0 .75em;letter-spacing:-.005em;opacity:.9;
}
.blog-content h2.blog-h2:first-child{margin-top:1.2em}
@media(min-width:720px){.blog-content h2.blog-h2{font-size:1.14rem}}