/* Arising — site stylesheet.
   Design language: paper #f4f3ea, ink #232823, jade #2e6b52,
   Spectral (text) + IBM Plex Mono (labels).
   The homepage and book page carry most of their styling inline (design
   components); this file holds (a) the shared interaction/grid classes those
   pages rely on, and (b) the full shell + typography for inner pages
   (articles, essays hub, about, 404). */

* { box-sizing: border-box; }

html { margin: 0; padding: 0; }

body {
  margin: 0;
  padding: 0;
  background: #f4f3ea;
  color: #232823;
  font-family: "Spectral", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #cde0d2; color: #1d3d2f; }

.page { background: #f4f3ea; overflow-x: hidden; }

/* ------------------------------------------------ shared interaction classes
   (base value of every property that changes on hover/focus lives HERE, not
   inline, so the pseudo-class rule can win) */

.navlink { color: #5a6157; text-decoration: none; }
.navlink:hover { color: #2e6b52; }
.navlink[aria-current="page"] { color: #2e6b52; }

.btn-jade { background: #2e6b52; }
.btn-jade:hover { background: #245640; }

.lnk-jade { color: #2e6b52; }
.lnk-jade:hover { color: #245640; }

.cell { background: #f4f3ea; }
.cell:hover { background: #eef1e7; }

.btn-mint { background: #8fd3ab; }
.btn-mint:hover { background: #a6e0bd; }

.fl { display: block; text-decoration: none; color: #cdddd0; font-size: 15.5px; margin-bottom: 12px; font-weight: 300; }
.fl:hover { color: #ffffff; }

.mint-lnk { color: #7fbf9c; }
.mint-lnk:hover { color: #a6e0bd; }

.book-input { border: 1px solid rgba(143, 211, 171, 0.28); }
.book-input:focus { border-color: #8fd3ab; }

/* honeypot — visually gone, present for bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------ responsive grid columns
   (kept out of inline styles so they can collapse on small screens) */

.feat { grid-template-columns: 1.1fr 1fr; }
.row3 { grid-template-columns: 130px 1fr auto; }
.about2 { grid-template-columns: 0.9fr 1.1fr; }
.bookco { grid-template-columns: 1fr auto; }
.foot4 { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
.bhero { grid-template-columns: 1.05fr 0.95fr; }

@media (max-width: 880px) {
  .feat, .row3, .about2, .bookco, .foot4, .bhero { grid-template-columns: 1fr; }
  .row3 { gap: 10px; }
}

/* ------------------------------------------------ announcement banner */

.banner { display: block; background: #183227; color: #e7efe6; }
.banner a {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  text-decoration: none; color: inherit; max-width: 1160px; margin: 0 auto; padding: 12px 32px;
}
.banner .chip {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: #8fc3a4; border: 1px solid rgba(143, 195, 164, 0.4);
  border-radius: 2px; padding: 3px 8px;
}
.banner .line { font-size: 15px; letter-spacing: 0.01em; color: #dbe8dc; }
.banner .line em { color: #fff; }
.banner .cta {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.14em;
  color: #8fc3a4; display: inline-flex; align-items: center; gap: 6px;
}

/* ------------------------------------------------ sticky header / nav */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 243, 234, 0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(30, 40, 32, 0.09);
}
.site-header nav {
  max-width: 1160px; margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #232823; }
.brand span { font-size: 20px; font-weight: 500; letter-spacing: 0.01em; }
.navlinks {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing: 0.04em;
}
.btn-nav { color: #f4f3ea; padding: 8px 16px; border-radius: 2px; letter-spacing: 0.06em; text-decoration: none; }

/* ------------------------------------------------ inner-page main */

.site-main { max-width: 1160px; margin: 0 auto; padding: 72px 32px 112px; }

.kicker {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #2e6b52; margin: 0 0 20px;
}

/* prose column: articles, about, 404 */
.prose { max-width: 72ch; }
.prose header { margin-bottom: 44px; }
.prose h1 {
  font-size: clamp(34px, 4.6vw, 56px); font-weight: 200; line-height: 1.1;
  letter-spacing: -0.02em; margin: 0 0 20px;
}
.prose h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 300; line-height: 1.2; letter-spacing: -0.015em; margin: 2.2em 0 0.6em; }
.prose h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 2em 0 0.5em; }
.prose p, .prose li { font-size: 19px; line-height: 1.7; color: #3f463c; font-weight: 300; }
.prose a { color: #2e6b52; }
.prose a:hover { color: #245640; }
.prose blockquote {
  margin: 2em 0; padding: 28px 34px; background: #ecefe5;
  border: 1px solid rgba(30, 40, 32, 0.1); border-radius: 4px;
  font-size: 21px; line-height: 1.55; font-weight: 300; font-style: italic;
}
.prose blockquote p { margin: 0; font-size: inherit; }
.prose code {
  font-family: "IBM Plex Mono", monospace; font-size: 0.85em;
  background: #ecefe5; padding: 1px 6px; border-radius: 2px;
}
.prose img { max-width: 100%; height: auto; }
.prose hr { border: none; border-top: 1px solid rgba(30, 40, 32, 0.12); margin: 2.5em 0; }

.byline {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8a9082; margin: 0;
}

.article-footer {
  margin-top: 64px; padding-top: 26px; border-top: 1px solid rgba(30, 40, 32, 0.12);
  font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 0.04em;
}
.article-footer a { color: #2e6b52; text-decoration: none; }
.article-footer a:hover { color: #245640; }
.tags { margin: 0 0 18px; }
.tags .tag {
  display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #2e6b52;
  border: 1px solid rgba(46, 107, 82, 0.35); border-radius: 2px;
  padding: 3px 8px; margin: 0 8px 8px 0;
}

/* essays hub rows container (design's list-card look) */
.rowsbox {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: rgba(30, 40, 32, 0.12); border: 1px solid rgba(30, 40, 32, 0.12);
  border-radius: 4px; overflow: hidden;
}

/* ------------------------------------------------ footer */

.site-footer { background: #183227; color: #cdddd0; }
.site-footer .cols {
  max-width: 1160px; margin: 0 auto; padding: 76px 32px 40px;
  display: grid; gap: 48px;
}
.fbrand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.fbrand span { font-size: 19px; font-weight: 500; color: #e7efe6; }
.foot-desc { font-size: 15.5px; line-height: 1.6; color: #9fbaa6; font-weight: 300; margin: 0; max-width: 34ch; }
.foot-head {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #6f9a80; margin: 0 0 18px;
}
.foot-sub { font-size: 15px; line-height: 1.55; color: #9fbaa6; font-weight: 300; margin: 0 0 16px; }
.subscribe { display: flex; gap: 8px; flex-wrap: wrap; }
.subscribe input[type="email"] {
  flex: 1; min-width: 150px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(143, 195, 164, 0.3); border-radius: 2px; padding: 11px 13px;
  color: #e7efe6; font-family: "IBM Plex Mono", monospace; font-size: 13px; outline: none;
}
.subscribe input[type="email"]:focus { border-color: #8fc3a4; }
.subscribe input::placeholder { color: #6f9a80; }
.subscribe button {
  background: #8fc3a4; color: #183227; border: none; border-radius: 2px; padding: 11px 18px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.04em; cursor: pointer;
}
.subscribe button:hover { background: #a6e0bd; }
.foot-bottom {
  max-width: 1160px; margin: 0 auto; padding: 26px 32px 44px;
  border-top: 1px solid rgba(143, 195, 164, 0.18);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.04em; color: #6f9a80;
}
.foot-bottom a { color: #6f9a80; }
.foot-bottom a:hover { color: #8fc3a4; }