/* ══════════════════════════════════════════════════════════════
   ATTIC GREEK — BLOG STYLESHEET
   ──────────────────────────────────────────────────────────────
   Shared by the blog index and every blog post, so all future
   posts stay consistent automatically. Tokens below are copied
   verbatim from index.html so the blog matches the main site.

   To add a new post you should NOT need to edit this file.
   See README.md in this folder.
══════════════════════════════════════════════════════════════ */

/* ── RESET & TOKENS (mirrors index.html) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --bg:       #0b1f38;
  --surface:  #132b4a;
  --surface2: #1a3d6b;
  --border:   #1e3d5e;
  --accent:   #5ca0de;
  --green:    #3dba6f;
  --gold:     #deb95c;
  --gold-dim: rgba(222,185,92,0.15);
  --dim:      rgba(255,255,255,0.5);
  --dim2:     rgba(255,255,255,0.25);
  /* Higher-contrast body text than the homepage's --dim.
     Long-form reading needs it; this passes WCAG AA comfortably. */
  --text:     rgba(255,255,255,0.82);
  --r-card:   18px;
  --r-btn:    100px;
  /* Serif with full polytonic Greek coverage (breathings, iota
     subscript, circumflex). Inter renders these inconsistently. */
  --greek: 'Noto Serif', 'GFS Didot', 'Palatino Linotype', Palatino, Georgia, serif;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: #fff;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Keyboard users must be able to see where they are. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link for screen-reader / keyboard users. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ══════════════════════════════════════════════
   NAV  (visually identical to index.html)
══════════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: rgba(11, 31, 56, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s;
}
nav.scrolled { box-shadow: 0 4px 40px rgba(0,0,0,0.4); }
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.05rem; letter-spacing: 0.05em;
  cursor: pointer;
}
.nav-logo .owl { font-size: 1.3rem; }
.nav-logo .ai { color: var(--accent); }
.nav-logo-img { height: 42px; width: auto; display: block; }
.nav-center { display: flex; align-items: center; gap: 32px; }
.nav-center a {
  font-size: 0.875rem; font-weight: 500; color: var(--dim);
  transition: color 0.2s; cursor: pointer;
}
.nav-center a:hover { color: #fff; }
.nav-center a.current { color: #fff; }
.nav-cta {
  background: var(--green); color: #fff;
  font-weight: 700; font-size: 0.85rem;
  padding: 10px 22px; border-radius: var(--r-btn);
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap; cursor: pointer;
}
.nav-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.mobile-nav {
  display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 199;
  background: #0b1f38; border-bottom: 1px solid var(--border);
  flex-direction: column; padding: 20px 28px; gap: 14px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { font-size: 1rem; font-weight: 500; color: var(--dim); padding: 4px 0; }

/* ══════════════════════════════════════════════
   SHARED PAGE FURNITURE
══════════════════════════════════════════════ */
.page-head {
  padding: 140px 32px 60px;
  max-width: 780px; margin: 0 auto;
  position: relative;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none; z-index: -1;
}
.orb-blue {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(92,160,222,0.16), transparent);
  left: -160px; top: -60px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.eyebrow.gold {
  color: var(--gold);
  background: rgba(222,185,92,0.1); border: 1px solid rgba(222,185,92,0.25);
  padding: 6px 16px; border-radius: 100px;
}

/* ══════════════════════════════════════════════
   BLOG INDEX — post cards
══════════════════════════════════════════════ */
.blog-title {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 900; letter-spacing: -0.035em; line-height: 1.08;
  margin-bottom: 16px;
}
.blog-title .accent { color: var(--accent); }
.blog-intro {
  font-size: 1.05rem; color: var(--dim); line-height: 1.75; max-width: 560px;
}
.post-list {
  max-width: 1120px; margin: 0 auto;
  padding: 20px 32px 100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.post-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-card);
  padding: 20px 20px 18px;
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(92,160,222,0.35);
  background: rgba(92,160,222,0.04);
}
.post-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dim2); margin-bottom: 8px;
}
.post-meta .dot { opacity: 0.5; }
.post-card h2 {
  font-size: 1.1rem;
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.3;
  margin-bottom: 8px;
}
.post-card:hover h2 { color: var(--accent); }
.post-excerpt {
  font-size: 0.85rem; color: var(--dim); line-height: 1.6; margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.read-more {
  font-size: 0.8rem; font-weight: 700; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
}
.post-card:hover .read-more { gap: 10px; }
.read-more span { transition: transform 0.2s; }

/* ── Featured / hero images ── */
.article-hero {
  margin: 0 0 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
}
.article-hero img { width: 100%; height: auto; }
.post-card-thumb {
  margin: -4px 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 1200 / 630;
}
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══════════════════════════════════════════════
   ARTICLE (blog post)
══════════════════════════════════════════════ */
.article-wrap { max-width: 720px; margin: 0 auto; padding: 0 32px 40px; }

.article-head { padding: 130px 32px 0; max-width: 720px; margin: 0 auto; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 0.875rem; font-weight: 600;
  margin-bottom: 28px;
}
.back-link:hover { text-decoration: underline; }

.article-head h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 900; letter-spacing: -0.035em; line-height: 1.1;
  margin-bottom: 18px;
}
.article-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim2);
  padding-bottom: 30px; margin-bottom: 36px;
  border-bottom: 1px solid var(--border);
}

article p {
  font-size: 1.0625rem; color: var(--text); line-height: 1.85;
  margin-bottom: 24px;
}
article p.lead {
  font-size: 1.2rem; line-height: 1.75; color: rgba(255,255,255,0.9);
  margin-bottom: 30px;
}
article h2 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.2;
  margin: 56px 0 20px;
  scroll-margin-top: 90px;
}
article h2 .qmark { color: var(--accent); }
article strong { color: #fff; font-weight: 700; }
article em { font-style: italic; }
/* Inline Greek inside a paragraph */
article .gk {
  font-family: var(--greek);
  color: var(--gold);
  font-size: 1.08em;
  font-style: normal;
}

/* ── Greek quote block ── */
.greek-quote {
  margin: 40px 0;
  padding: 34px 30px;
  background: linear-gradient(135deg, rgba(222,185,92,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(222,185,92,0.22);
  border-radius: var(--r-card);
  text-align: center;
}
.greek-quote .gk-text {
  font-family: var(--greek);
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  color: var(--gold);
  line-height: 1.85;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}
.greek-quote .gk-trans {
  font-size: 1rem; color: var(--text); font-style: italic;
  line-height: 1.7; margin-bottom: 12px;
}
.greek-quote cite {
  display: block;
  font-size: 0.78rem; font-style: normal; color: var(--dim2);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}

/* ── End-of-article CTA ── */
.article-cta {
  margin: 60px 0 20px;
  padding: 44px 38px;
  background: linear-gradient(135deg, rgba(61,186,111,0.08) 0%, rgba(255,255,255,0.025) 100%);
  border: 1px solid rgba(61,186,111,0.3);
  border-radius: var(--r-card);
  position: relative; overflow: hidden;
  text-align: center;
}
.article-cta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--green), var(--accent));
}
.article-cta h2 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.article-cta p {
  font-size: 1rem; color: var(--dim); margin-bottom: 26px;
  max-width: 460px; margin-left: auto; margin-right: auto;
}
.btn-green {
  display: inline-block;
  background: var(--green); color: #fff;
  font-weight: 700; font-size: 1rem;
  padding: 15px 34px; border-radius: var(--r-btn);
  transition: opacity 0.2s, transform 0.15s;
}
.btn-green:hover { opacity: 0.88; transform: translateY(-1px); }
.cta-note { margin-top: 16px; font-size: 0.78rem; color: var(--dim2); }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
footer {
  background: rgba(6, 14, 26, 0.8);
  border-top: 1px solid var(--border);
  padding: 44px 32px 36px;
  margin-top: 40px;
}
.footer-inner {
  max-width: 780px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer-copy { font-size: 0.75rem; color: var(--dim2); }
.footer-links-row { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links-row a { font-size: 0.75rem; color: var(--dim2); transition: color 0.2s; }
.footer-links-row a:hover { color: #fff; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 680px) {
  nav { padding: 0 20px; }
  .nav-logo-img { height: 34px; }
  .nav-center { display: none; }
  .nav-cta.desktop-only { display: none; }
  .hamburger { display: flex; }

  .page-head { padding: 110px 20px 40px; }
  .post-list { padding: 12px 20px 70px; grid-template-columns: 1fr; }
  .post-card { padding: 18px 18px 16px; }

  .article-head { padding: 104px 20px 0; }
  .article-wrap { padding: 0 20px 30px; }
  article p { font-size: 1rem; }
  article p.lead { font-size: 1.1rem; }
  .greek-quote { padding: 26px 20px; }
  .article-cta { padding: 34px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}