/* ==========================================================================
   Field & Forge — a workshop log
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@500;600&family=Source+Sans+3:wght@400;500;600&display=swap');

:root {
  --bg: #201811;
  --bg-alt: #2a2018;
  --bg-raised: #322619;
  --ink: #ece3cf;
  --ink-dim: #b3a586;
  --ink-faint: #7d735c;
  --brass: #b8923f;
  --brass-bright: #d9b565;
  --sage: #7c8a64;
  --rule: #453727;
  --rule-bright: #5a4832;
  --radius: 3px;
  --content-width: 720px;
}

* { box-sizing: border-box; }

html, body {
  position: relative;
}

html {
  scroll-behavior: smooth;
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(184, 146, 63, 0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(124, 138, 100, 0.05), transparent 55%);
  color: var(--ink);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brass-bright);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
}

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  margin: 0;
}

/* ---------- Layout shell ---------- */

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

header.site-head {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.12), transparent);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }

.badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--brass-bright);
  flex-shrink: 0;
  background: var(--bg-alt);
}

.brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

nav.site-nav {
  display: flex;
  gap: 22px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

nav.site-nav a {
  color: var(--ink-dim);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
nav.site-nav a:hover {
  color: var(--brass-bright);
  text-decoration: none;
  border-bottom-color: var(--brass);
}
nav.site-nav a.current {
  color: var(--brass-bright);
  border-bottom-color: var(--brass);
}

main { padding: 56px 0 40px; }

/* ---------- Hero ---------- */

.hero { padding-bottom: 12px; }

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  margin-top: 10px;
  letter-spacing: -0.01em;
}

.hero-line {
  margin-top: 18px;
  min-height: 1.6em;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem;
  color: var(--sage);
}

.hero-line .cursor {
  display: inline-block;
  width: 8px;
  background: var(--brass);
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-line .cursor { animation: none; opacity: 0; }
}
@keyframes blink { 50% { opacity: 0; } }

.intro {
  margin-top: 26px;
  max-width: 60ch;
  color: var(--ink-dim);
  font-size: 1.02rem;
}

/* ---------- Section headings ---------- */

.section { margin-top: 56px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 22px;
}

.section-head h2 {
  font-size: 1.4rem;
}

.section-head .see-all {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---------- Ledger (status list) ---------- */

.ledger { list-style: none; margin: 0; padding: 0; }

.ledger li {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.ledger li:first-child { padding-top: 0; }
.ledger li:last-child { border-bottom: none; }

.ledger a.entry-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--ink);
}
.ledger a.entry-link:hover { text-decoration: none; }
.ledger a.entry-link:hover .entry-title { border-bottom-color: var(--brass); }

.status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--radius);
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-active { color: var(--brass-bright); border-color: var(--brass); background: rgba(184,146,63,0.08); }
.status-paused { color: var(--ink-dim); border-color: var(--rule-bright); background: rgba(255,255,255,0.02); }
.status-done   { color: var(--sage); border-color: var(--sage); background: rgba(124,138,100,0.08); }

.entry-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  border-bottom: 1.5px solid transparent;
}

.entry-desc {
  display: block;
  margin-top: 4px;
  color: var(--ink-dim);
  font-size: 0.94rem;
  flex-basis: 100%;
}

/* ---------- Stitched cards (signature element) ---------- */

.card {
  position: relative;
  background: var(--bg-alt);
  border: 1.5px dashed var(--rule-bright);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  margin-bottom: 22px;
}

.card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px dashed var(--rule-bright);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0.55;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.card h3 {
  font-size: 1.2rem;
}

.card p { color: var(--ink-dim); margin: 10px 0 0; }

.card .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 12px;
}

/* ---------- Musings list ---------- */

.post {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.post:first-of-type { padding-top: 0; }
.post:last-of-type { border-bottom: none; }

.post-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.post h2 {
  font-size: 1.3rem;
  margin-top: 6px;
}

.post p { color: var(--ink-dim); margin-top: 10px; }

/* ---------- Page intro (non-home pages) ---------- */

.page-head { margin-bottom: 12px; }
.page-head h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin-top: 10px; }
.page-head .intro { margin-top: 16px; }

/* ---------- Footer ---------- */

footer.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 64px;
  padding: 28px 0 40px;
}

footer.site-foot .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.foot-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
}

.foot-mark .badge { width: 28px; height: 28px; font-size: 0.62rem; }

footer.site-foot .tagline {
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* ---------- Decorative vine ----------
   Two pieces: a garland that runs the full width of the top of the page,
   and a trailing piece that continues down the content column's left edge.
   Both sit above everything else and are given generous room in their own
   SVG canvases so rotated leaves never get clipped. */

.vine-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 84px;
  z-index: 50;
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

.vine-side {
  position: absolute;
  top: 58px;
  left: calc(50vw - (var(--content-width) / 2) - 52px);
  width: 130px;
  height: auto;
  z-index: 50;
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

@media (max-width: 960px) {
  .vine-side { display: none; }
}

@media (max-width: 640px) {
  .vine-top { height: 56px; }
}

@media print {
  .vine-top, .vine-side { display: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 620px) {
  main { padding-top: 40px; }
  .site-head .wrap { flex-direction: column; align-items: flex-start; }
  nav.site-nav { gap: 16px; flex-wrap: wrap; }
  .section { margin-top: 44px; }
}