/* Shared stylesheet for all about/project-reflection pages */
@view-transition { navigation: auto; }

:root {
  color-scheme: dark light;
  --bg:        #6a1710;
  --bg-2:      #7c1e14;
  --bg-3:      #8e2218;
  --nav-bg:    rgba(28,6,4,.97);
  --border:    #4a0e0b;
  --border-hi: #8a2a1a;
  --text:      #f2e4c4;
  --text-2:    #d8c4a0;
  --text-3:    #b89c72;
  --coral:     #e06030;
  --coral-hi:  #f07848;
  --cpale:     rgba(224,96,48,.12);
  --olive:     #7a8840;
  --olive-hi:  #96aa52;
  --opale:     rgba(122,136,64,.15);
  --black:     #100c08;
}

[data-theme="light"] {
  --bg:        #e8d5b0;
  --bg-2:      #fdf6e8;
  --bg-3:      #e4d4b0;
  --nav-bg:    rgba(34,10,4,.96);
  --border:    #c8b890;
  --border-hi: #a89060;
  --text:      #28120c;
  --text-2:    #4a2e18;
  --text-3:    #5a3a18;
  --coral:     #b83818;
  --coral-hi:  #d04825;
  --cpale:     rgba(184,56,24,.1);
  --olive:     #4a6018;
  --olive-hi:  #5a7820;
  --opale:     rgba(74,96,24,.12);
  --black:     #faf4e4;
}

@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 22% 18%, rgba(210,180,100,.06) 0%, transparent 52%),
    radial-gradient(ellipse at 78% 82%, rgba(110,52,18,.08) 0%, transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 140px 140px;
  background-blend-mode: normal, normal, overlay;
  color: var(--text);
  font-family: 'Spectral', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
  animation: fadeIn .35s ease both;
}

a { color: var(--coral); text-decoration: none; transition: color .15s }
a:hover { color: var(--coral-hi) }
.container { max-width: 760px; margin: 0 auto; padding: 0 1.75rem }

/* Skip to content */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: .4rem .9rem;
  background: var(--coral);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .05em;
  z-index: 9999;
  transition: top .15s;
}
.skip-link:focus { top: .75rem; color: #fff }

/* Navigation */
nav {
  background: var(--nav-bg);
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(10px);
}
nav::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  height: 2px;
  background: var(--coral);
  width: calc(var(--scroll-progress, 0) * 100%);
  pointer-events: none;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; max-width: 760px; margin: 0 auto; padding: 0 1.75rem;
}
.nav-brand {
  font-family: 'IM Fell English', serif;
  font-size: 1.05rem; color: var(--coral); letter-spacing: .03em;
  display: flex; align-items: center; gap: .45rem;
  view-transition-name: site-brand;
}
.nav-brand svg { width: 20px; height: 20px; overflow: visible }
@media (prefers-reduced-motion: no-preference) {
  .nav-brand:hover svg, .nav-brand:focus-within svg { animation: heroWmSpin 3s linear infinite; transform-origin: center }
  @keyframes heroWmSpin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
}
.theme-toggle {
  background: none; border: 1px solid var(--border-hi); padding: .22rem .65rem;
  font-family: 'Spectral', serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; color: var(--text-3); cursor: pointer; transition: all .15s;
}
.theme-toggle:hover { border-color: var(--coral); color: var(--coral) }

/* Article header */
.article-header {
  view-transition-name: page-hero;
  padding: 4rem 0 2rem;
  border-bottom: 1px dashed var(--border-hi);
  margin-bottom: 2.5rem;
}
.back-link {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.5rem;
}
.back-link:hover { color: var(--coral) }
.project-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .6rem;
}
h1 {
  font-family: 'IM Fell English', serif;
  font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: .5rem;
}
[data-theme="light"] h1 { color: #0a0402 }
.project-subtitle {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-2);
}

/* Article body */
.article-body { padding-bottom: 4rem }
.article-body p { margin-bottom: 1.6rem; text-indent: 1.5rem }
.article-body p:first-of-type { text-indent: 0; font-size: 1.1rem; color: var(--text-2) }
.article-body em { font-style: italic; color: var(--text) }
.article-body strong { font-weight: 600; color: var(--text) }

h2, h3 {
  font-family: 'IM Fell English', serif;
  font-weight: 400;
  color: var(--coral);
  margin: 2.5rem 0 1rem;
  line-height: 1.2;
}
h2 { font-size: 1.6rem; border-bottom: 1px solid var(--border); padding-bottom: .3rem }
h3 { font-size: 1.25rem }

/* Structural callout */
.theological-reflection {
  background: var(--bg-2);
  border-left: 3px solid var(--olive);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.theological-reflection h3 { margin-top: 0; color: var(--olive-hi) }
.theological-reflection p { margin-bottom: 0; text-indent: 0; font-size: .95rem; color: var(--text-2) }

/* Decorative vine break */
.section-divider {
  display: block; width: 100%; max-width: 300px; margin: 3rem auto; opacity: .5;
}

/* Entrance animation */
.animate-text { animation: fadeInUp .5s ease both }

[data-theme="light"] body { background-blend-mode: multiply }

.vine-divider { margin-top: 2.5rem; overflow: visible; opacity: .75 }
.vine-divider svg { display: block; width: 100%; overflow: visible }

@media (max-width: 680px) {
  .article-header { padding-top: 2.5rem }
}