/* Jalal Sela Research Journal — Full-width Forest Edition / Design preview v0.3
   A presentation layer on top of site.css. Historic article content is unchanged.
   The palette is purposefully restrained: deep forest, fresh green, and paper.
*/
:root {
  --ink: #1b3025;
  --muted: #5b7163;
  --line: #dbe5dc;
  --paper: #0b1812;
  --white: #fafcf8;
  --dark: #0d2116;
  --accent: #83e4a3;
  --cyan: #b7ebc9;
  --soft: #edf4ec;
  --max: 1240px;
}

body {
  color: #dceadf;
  background: radial-gradient(ellipse 700px 520px at 92% 36%, rgba(42, 100, 56, .18), transparent 72%),
              radial-gradient(ellipse 650px 580px at -18% 75%, rgba(46, 107, 69, .15), transparent 68%),
              #0b1812;
}
a { color: #177544; }
a:hover { color: #0e5f37; }
:focus-visible { outline: 3px solid #65d78d; outline-offset: 4px; }
::selection { background: #8ce5a5; color: #082116; }

/* Navigation */
.site-header { background: #0a1610; border-bottom-color: #2a4934; }
.nav { min-height: 82px; }
.brand { color: #f2f8f0; }
.brand-mark { background: #244b30; border: 1px solid #487854; color: #c2f6ce; }
.brand-sub { color: #8aaa96; }
.nav-links a { color: #bed2c3; }
.nav-links a.current, .nav-links a:hover { color: #91ecae; }
.header-status { border-left-color: #2b4936; color: #9abc9f; }
.live-dot { background: #7ae5a1; box-shadow: 0 0 0 4px rgba(122,229,161,.10); }

/* Header and title: subtle botanical light, no geometric patterns or stripes */
.hero {
  background: radial-gradient(ellipse 650px 500px at 91% 8%, rgba(49,110,67,.34), transparent 65%),
              radial-gradient(ellipse 490px 460px at 20% 110%, rgba(25,84,48,.23), transparent 70%),
              linear-gradient(110deg, #0d1f14, #10281c);
  border-bottom: 1px solid #31583b;
  padding: 81px 0 77px;
  position: relative;
}
.hero .eyebrow, .eyebrow { color: #83e4a3; }
.hero h1 { letter-spacing: -3.2px; }
.hero h1 em { color: #96e7ae; }
.hero p { color: #b9d1bf; }
.stat-pill { border-color: #446b4b; background: rgba(10,38,20,.33); color: #c2e2c9; }

/* The page has a bounded editorial workspace instead of a blank white field */
#research {
  padding-left: 46px;
  padding-right: 46px;
  border-left: 1px solid #24422c;
  border-right: 1px solid #24422c;
  background: linear-gradient(180deg, rgba(21,48,29,.44), rgba(9,25,16,.08) 57%);
}
.intro-bar { border-bottom-color: #33533b; padding-top: 49px; padding-bottom: 24px; }
.intro-bar h2 { color: #f1f8f0; font-size: 30px; }
.sort-note { color: #92b49b; }
.post-grid { gap: 24px; margin-top: 28px; margin-bottom: 60px; }

/* Quiet image panels; the actual research screenshots are the focal point */
.post-card {
  background: #fafcf8;
  border-color: #607a66;
  border-radius: 11px;
  box-shadow: 0 18px 35px rgba(0,0,0,.16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  border-color: #8fdca3;
  box-shadow: 0 22px 40px rgba(0,0,0,.25);
}
.card-visual {
  height: 210px;
  background: radial-gradient(ellipse at 70% 50%, #1b3b28, transparent 70%), #102217;
  border-bottom: 1px solid #31583d;
}
.card-visual img {
  height: 100%; width: 100%; object-fit: contain; padding: 26px 30px;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.25));
}
.card-visual::before {
  content: 'RESEARCH  /  ARCHIVE';
  position: absolute; top: 14px; left: 19px; z-index: 1;
  color: #acd7b5; font: 600 9px/1.4 'IBM Plex Mono', Consolas, monospace;
  letter-spacing: 1.2px; opacity: .86;
}
.card-visual::after { box-shadow: inset 0 -15px 32px rgba(0,0,0,.15); }
.card-code { color: #a5eac0; text-shadow: 0 3px 30px rgba(74,184,114,.25); }
.card-content { padding: 26px 29px 26px; }
.card-content h3 { color: #193124; margin-top: 15px; }
.card-content h3 a:hover { color: #137946; }
.card-top { color: #748577; }
.category { color: #167443; }
.card-content p { color: #627265; }
.card-foot { border-top-color: #dbe4db; color: #375441; }
.card-foot a { color: #176e40; }
.card-foot a:hover { color: #0c492b; }

/* Context banner */
.archive-note {
  background: linear-gradient(105deg, #183e28, #123020);
  border: 1px solid #366849; color: #e8f9e9;
  border-radius: 10px;
  margin-bottom: 78px;
}
.archive-icon { border-color: #6dba82; color: #9ce5ae; }
.archive-note h3 { color: #f3f9ef; }
.archive-note p { color: #bad7c1; }

/* Article templates: preserve a bright, readable page for long technical reading */
.article-banner {
  background: radial-gradient(ellipse at 80% 20%, rgba(47,116,65,.32), transparent 55%),
              linear-gradient(110deg, #0c1d13, #163a26);
  border-bottom: 1px solid #33563a;
}
.article-banner h1 { color: #f4f8ef; }
.back-link { color: #a2e8b3; }
.back-link:hover { color: #d4f8dc; }
.article-meta { color: #b4d1ba; }
.article-layout {
  grid-template-columns: minmax(0, 810px) minmax(180px, 1fr);
  gap: 50px;
  background: #fafcf8;
  border: 1px solid #2b4832;
  border-radius: 12px;
  padding: 52px;
  margin-top: 42px;
  margin-bottom: 78px;
  box-shadow: 0 28px 55px rgba(0,0,0,.12);
}
.article-body { color: #2c3e32; }
.article-body > p:first-child { color: #577061; }
.article-body h2,.article-body h3,.article-body h4 { color: #183525; }
.article-body pre { background: #0f2519; border-color: #294f37; color: #e7f6e9; }
.article-body :not(pre)>code { background: #e5efe7; }
.article-body blockquote { border-left-color: #3cae62; background: #eef5ed; }
.side-panel { border-top-color: #2d9754; }
.side-heading { color: #247e45; }
.side-links a { color: #3c694e; }
.side-links a:hover { color: #15693b; }
.article-disclaimer { background: #eaf2e9; }
.article-end a { color: #167943; }
.comment-meta strong { color: #204a30; }

/* About + 404 */
.about-section {
  max-width: 950px;
  margin-top: 48px;
  margin-bottom: 85px;
  padding: 54px 60px 66px;
  background: #fafcf8;
  border: 1px solid #30533a;
  border-radius: 12px;
  box-shadow: 0 25px 50px rgba(0,0,0,.12);
}
.about-section .eyebrow { color: #247f48; }
.about-section h1 { color: #183525; }
.about-section p { color: #546b5b; }
.about-section a { color: #176e40; }

.site-footer { background: #07120c; border-top: 1px solid #294a33; }
.footer-inner { color: #9bb8a3; }
.footer-inner strong { color: #e1f2e5; }

@media (max-width: 900px) {
  #research { padding-left: 28px; padding-right: 28px; }
  .article-layout { padding: 36px; margin-top: 28px; }
  .card-visual { height: 180px; }
}
@media (max-width: 620px) {
  .hero { padding: 57px 0; }
  .hero h1 { letter-spacing: -2px; }
  #research { padding-left: 19px; padding-right: 19px; border-left: 0; border-right: 0; }
  .intro-bar { padding-top: 36px; }
  .post-grid { gap: 20px; }
  .card-visual { height: 195px; }
  .card-content { padding: 22px; }
  .archive-note { margin-bottom: 46px; }
  .article-layout { padding: 28px 21px; margin-top: 18px; margin-bottom: 45px; border-radius: 8px; }
  .about-section { margin-top: 24px; margin-bottom: 48px; padding: 33px 25px 39px; }
}


/* v0.3 — full-bleed, single-canvas layout
   Remove the boxed middle column and let the research grid fill the viewport.
   Article prose remains bounded for comfortable reading.
*/
:root { --page-gutter: clamp(22px, 3.7vw, 82px); }
.site-wrap {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--page-gutter);
}
/* The archive is part of the same uninterrupted page, not an inset workspace. */
#research {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-inline: var(--page-gutter);
  border: none;
  background: linear-gradient(180deg, #0e2519 0%, #0b1b13 100%);
}
.hero {
  background: radial-gradient(ellipse 850px 550px at 83% 15%, rgba(45,107,63,.28), transparent 72%),
              linear-gradient(105deg, #0d2117, #0f2a1b);
}
.hero .site-wrap { width: 100%; }
.post-grid { gap: clamp(20px, 2vw, 32px); }
.card-visual { height: clamp(218px, 16vw, 288px); }
.card-visual img { padding: 24px 32px; }
.card-content { padding: 28px 32px; }
/* Long form pages use the whole dark canvas, but limit line length. */
.article-layout.site-wrap {
  width: calc(100% - 2 * var(--page-gutter));
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(26px, 4vw, 58px);
}
.article-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: clamp(30px, 4vw, 58px); }
.about-section.site-wrap { max-width: 950px; margin-inline: auto; }
@media (max-width: 900px) {
  .article-layout.site-wrap { width: calc(100% - 2 * var(--page-gutter)); }
  .article-layout { display:block; }
  .card-visual { height: 195px; }
  .card-content { padding: 24px; }
}
@media (max-width: 620px) {
  :root { --page-gutter: 19px; }
  .post-grid { grid-template-columns: 1fr; gap: 20px; }
  .card-visual { height: 195px; }
  .card-content { padding: 22px; }
  .article-layout.site-wrap { width: calc(100% - 2 * var(--page-gutter)); padding: 28px 21px; }
  .about-section.site-wrap { width: calc(100% - 2 * var(--page-gutter)); padding: 33px 25px 39px; }
}

/* With five archival posts, the final card fills the row instead of
   leaving a conspicuous blank half-page. Future even-numbered grids
   automatically revert to regular two-column cards. */
@media (min-width: 901px) {
  .post-grid > .post-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 292px;
  }
  .post-grid > .post-card:last-child:nth-child(odd) .card-visual {
    height: 100%;
    min-height: 292px;
    border-bottom: none;
    border-right: 1px solid #31583d;
  }
  .post-grid > .post-card:last-child:nth-child(odd) .card-content {
    min-width: 0;
  }
}