/* ========== Theme Tokens ========== */
:root {
  --brand-crimson:#8a0c12;
  --brand-crimson-700:#6e0a0f;
  --brand-silver:#c0c0c0;
  --brand-black:#111;
  --brand-offwhite:#f8f9fa;
  --brand-dark-gray:#2b2b2b;
  --brandbar-h:68px;
}

/* ========== Base ========== */
html, body { margin:0; padding:0; background: var(--brand-offwhite); color: var(--brand-black); }
a { color: var(--brand-crimson); text-decoration: none; }
a:hover, a:focus { color: var(--brand-crimson-700); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--brand-crimson-700); outline-offset: 2px; text-decoration: none; }

/* Smooth scroll offset for sticky bar */
html { scroll-behavior: auto; scroll-padding-top: calc(var(--brandbar-h) - 8px); }
#posts, #calendar { scroll-margin-top: calc(var(--brandbar-h) - 8px); }

/* Breadcrumbs */
.breadcrumb a { color: var(--brand-crimson); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-crimson-700); text-decoration: none; }

/* ========== Brand Bar (top) ========== */
.brand-bar {
  position: sticky; top:0; z-index:1030;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.brand-inner { position: relative; display:flex; justify-content:center; align-items:center; gap:14px; padding:.5rem; }
.brand-inner::before,
.brand-inner::after { content:""; display:block; height:1px; flex:1 1 0; background: linear-gradient(to right, transparent, rgba(0,0,0,.18)); }
.brand-inner::after { background: linear-gradient(to left, transparent, rgba(0,0,0,.18)); }
.brand-logo { height:56px; }
@media (max-width: 576px){ .brand-logo{height:46px;} }

/* ========== Pills (DEV / PREVIEW) ========== */
.dev-badge {
  position: fixed; top: calc(var(--brandbar-h) / 2); left: 12px; transform: translateY(-50%);
  z-index: 2000; font-size: 12px; font-weight: 700; color:#fff;
  background: linear-gradient(135deg,#222,#444);
  border-radius:999px; padding:.35rem .6rem;
}
.preview-badge {
  position: fixed; top: calc(var(--brandbar-h) / 2); right: 12px; transform: translateY(-50%);
  z-index: 2000; font-size: 12px; font-weight: 800; color:#111;
  background: linear-gradient(135deg,#ffe680,#ffd54a);
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px; padding:.35rem .6rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  cursor: pointer;
}

/* ========== Social Media Rails ========== */
.social-rail {
  position: fixed; left: 18px; top: calc(var(--brandbar-h) + 18px);
  z-index: 1025; display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.social-rail::before {
  content:""; display:block; width:2px; height:80px; background: var(--brand-dark-gray);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
  border-radius: 2px; margin-bottom:.5rem;
}
.social-rail a { display:grid; place-items:center; width:38px; height:38px; border-radius:999px; background:#fff; color:var(--brand-crimson); }
.social-rail a:hover { background: var(--brand-crimson); color:#fff; }
@media (max-width: 991.98px){ .social-rail { display:none !important; } }

/* Mobile-only horizontal social bar (used on home hero) */
.social-bar-mobile { display:none; z-index: 3000; }
.social-bar-mobile a { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fff; color:var(--brand-crimson); box-shadow:0 2px 6px rgba(0,0,0,.1); }
.social-bar-mobile a:hover { background: var(--brand-crimson); color:#fff; }

/* ========== Hero (home) ========== */
.hero {
  position: relative; width: 100%;
  min-height: calc(100dvh - var(--brandbar-h));
  height: calc(100dvh - var(--brandbar-h));
  display: grid; place-items: center; overflow: hidden;
  border-radius: 0; color: #fff; padding-bottom: 20px;
  background-color: var(--brand-crimson);
}
@supports not (height: 100dvh) {
  .hero { min-height: calc(100vh - var(--brandbar-h)); height: calc(100vh - var(--brandbar-h)); }
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, #cf4f53 , #bf6c6e, #b47e7f, #a68c8d, #999999, #ffffff);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.0fr 1.25fr;
  grid-template-areas: "text image"; align-items: end; gap: 1.25rem;
  max-width: min(1600px, 96vw); width: 100%;
  padding-inline: clamp(16px, 4vw, 56px);
}
.hero-left { grid-area: text; text-align: left; align-self: center; position: relative; z-index: 4; }
.hero-right { grid-area: image; justify-self: end; }

.hero-people img {
  display: block; width: auto; max-width: min(80vw, 1400px);
  height: auto; max-height: clamp(480px, 66vh, 960px);
  aspect-ratio: 1600 / 1067;
  filter: brightness(.90) saturate(.88) contrast(.95)
    drop-shadow(0 10px 22px rgba(0,0,0,.25))
    drop-shadow(0 2px 6px rgba(0,0,0,.2));
  transform: translate(2vw, 12px);
  transition: transform 600ms ease;
}


/* Scrapbook-style hero card */
.hero-card {
  position: relative;
  background: url('../images/paper-texture.jpg') repeat;
  background-size: cover;
  border-radius: 6px;
  padding: 1rem;
  padding-bottom: 3.5rem;
  color: #222;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  transform: rotate(-1deg);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* Torn paper edge effect: mimic with shadow and border */
  /* Optional: torn bottom edge using clip-path or pseudo-element */
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 90%,
    95% 94%, 90% 88%, 85% 92%, 80% 88%,
    75% 92%, 70% 88%, 65% 92%, 60% 88%,
    55% 92%, 50% 88%, 45% 92%, 40% 88%,
    35% 92%, 30% 88%, 25% 92%, 20% 88%,
    15% 92%, 10% 88%, 5% 94%, 0% 90%
  );
}

/* Mobile hero adjustments */
@media (max-width: 991.98px) {
  .hero-inner {
    grid-template-columns: 1fr; grid-template-areas: "image" "text";
    text-align: center; padding-inline: 0 !important; row-gap: .75rem; justify-items: center;
    width: 100%; margin-left: 0 !important; margin-right: 0 !important;
  }
  .hero-left { text-align: center; margin-top: .25rem; margin-bottom: .5rem; padding: 0 clamp(6px, 2vw, 12px); }
  .hero-right { justify-self: center; }
  .hero-copy, .hero-actions { margin-inline: auto; max-width: 96vw; padding-inline: clamp(6px, 2vw, 12px); }
  .hero-actions { justify-content: center !important; }
  .hero-people img {
    width: 100vw; max-width: none; height: auto; max-height: clamp(380px, 64vh, 780px);
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); transform: none; object-fit: contain;
  }
  .hero-dots { background-size: 11px 11px; opacity: .5; }
  /* Show horizontal pill inside hero on mobile */
  .hero .social-bar-mobile {
    display:flex !important; position: fixed; left:50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%);
    gap:.75rem; z-index: 4000; pointer-events: auto;
    background: rgba(255,255,255,.88); backdrop-filter: blur(6px) saturate(120%);
    padding:.5rem .9rem; border-radius:999px; box-shadow: 0 8px 22px rgba(0,0,0,.22);
  }
  /* Ensure hero bottom spacing for the badge bar */
  .hero { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* Hero buttons */
.btn-hero {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: none; border-radius: 999px; padding: 0.7rem 1.15rem;
  font-weight: 600; font-size: 1rem; background: var(--brand-crimson);
  color: #fff !important; box-shadow: 0 3px 10px rgba(0,0,0,.15);
  text-decoration: none; transition: background 0.3s ease, transform 0.2s ease;
}
.btn-hero:hover { background: var(--brand-crimson-700); color: #fff; transform: translateY(-2px); }
.btn-hero-secondary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border-radius: 999px; padding: 0.7rem 1.15rem; font-weight: 600; font-size: 1rem;
  color: #fff !important; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.35);
  text-decoration: none; transition: background 0.3s ease, transform 0.2s ease;
}
.btn-hero-secondary:hover { background: rgba(255,255,255,0.25); color: #fff; transform: translateY(-2px); }

/* ========== Posts Grid ========== */
.section-title {
  text-align: center; font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  letter-spacing: .2px; margin: .25rem 0 1rem;
}
.section-divider { display:flex; align-items:center; gap:.75rem; margin: 28px 0 40px; }
.section-divider::before,
.section-divider::after { content:""; height:1px; flex:1 1 0; background: linear-gradient(to right, transparent, rgba(0,0,0,.14)); }
.section-divider::after { background: linear-gradient(to left, transparent, rgba(0,0,0,.14)); }
.section-divider--lg { margin: 36px 0 56px; }
.mark-logo { height: 18px; width:auto; display:inline-block; filter: drop-shadow(0 2px 8px rgba(0,0,0,.08)); opacity:.95; }

.posts-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
@media (min-width: 768px){ .posts-grid { gap: 1.25rem; } }
.post-card { grid-column: span 12; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:1rem; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
@media (min-width: 768px){ .post-card { grid-column: span 6; } }
@media (min-width: 1200px){ .post-card { grid-column: span 4; } }
@media (min-width: 1600px){ .post-card { grid-column: span 3; } } /* 4 across on xl+ (12/3) */
.post-card h3 { font-size: 1.05rem; font-weight:800; margin:0 0 .35rem; }
.post-meta { font-size:.85rem; color:#666; margin-bottom:.5rem; }
.post-thumb { position: relative; overflow: hidden; border-radius: 10px; background:#f2f2f2; margin-bottom:.65rem; }
.post-thumb::before { content:""; display:block; padding-top:56.25%; } /* 16:9 */
.post-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ========== Calendar ========== */
.cal-wrap { background:#fff; border-radius:14px; overflow:hidden; box-shadow: 0 12px 28px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06); }
.cal-iframe { width:100%; height:70vh; min-height:420px; border:0; display:block; }
@media (max-width: 991.98px){ .cal-iframe { height:60vh; min-height:360px; } }

/* ========== Footer ========== */
.site-footer {
  position: relative; color:#eaeaea;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.02)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,0) 2px 7px),
    #111;
}
.site-footer a { color:#eaeaea; text-decoration:none; }
.site-footer a:hover { color: var(--brand-silver); }
.site-footer .container {
  border-top: none; padding: .75rem 0;
  display:flex; align-items:center; justify-content:space-between;
}
@media (max-width: 767.98px){
  .site-footer .container{ flex-direction: column; align-items: center; text-align: center; gap:.4rem; row-gap:.25rem; }
  .site-footer .container .footer-links{ order: 0; justify-content: center; }
  .site-footer .container .footer-copy{ order: 1; display:block; width:100%; }
}

/* ========== About page – π login button ========== */
.pv-pi{
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #2b2b2b; border: 1px solid rgba(255,255,255,.10);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity .2s ease, transform .12s ease, background-color .2s ease;
  opacity: .9; color: rgba(255,255,255,.55); font-weight: 700; font-size: 12px; line-height: 1;
}
.pv-pi::before{ content: "\03C0"; } /* π */
.pv-pi:hover{ opacity: 1; transform: scale(1.06); background: #222; }

/* ========== Utility buttons ========== */
.back-to-top {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 2500; width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; background: rgba(0,0,0,.65); color: #fff;
  border: 1px solid rgba(255,255,255,.25); box-shadow: 0 10px 24px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.back-to-top:hover { background: rgba(0,0,0,.78); }
.back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 991.98px){ .back-to-top { right: 12px; bottom: calc(20px + env(safe-area-inset-bottom)); } }

/* Buttons – site specific */
.btn-crimson { background: var(--brand-crimson); border-color: var(--brand-crimson); color: #fff; }
.btn-crimson:hover, .btn-crimson:focus { background: var(--brand-crimson-700); border-color: var(--brand-crimson-700); color:#fff; }

/* ========== Post article (detail page) ========== */
.post-wrap { max-width: min(980px, 92vw); margin: 2rem auto; }
.post-title { font-weight: 800; letter-spacing: .2px; }
.post-meta { color:#666; font-size: .95rem; margin-top:.25rem; }

.post-content img { max-width: 100%; height: auto; border-radius: 8px; }
.post-content iframe { width: 100%; min-height: 420px; border: 0; }
.post-content figure { margin: 1rem 0; }
.post-content p { line-height: 1.7; margin: 1rem 0; }
.post-content h2, .post-content h3 { margin-top: 1.5rem; font-weight: 800; }
@media (max-width: 576px){ .post-content iframe { min-height: 300px; } }

.hero-smoke {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
}

@media (max-width: 991.98px) {
  .hero-smoke {
    height: 100%;
    object-fit: cover;
  }
}

.hero-card .btn-hero-secondary {
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  background: rgba(0, 0, 0, 0.07);
  color: #222 !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.hero-card .btn-hero-secondary:hover {
  background: rgba(0, 0, 0, 0.18);
  color: #000 !important;
}