/*
Theme Name: Bharat Brief
Theme URI: https://bharatbrief.co
Author: Hiren H Dave
Author URI: https://hirenhdave.substack.com
Description: A single-page essay index for Bharat Brief. Add essays as posts — they appear in the grid automatically and link out to Substack. Cream + rust editorial system.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: bharat-brief
*/

:root{
  --cream:      #F5F1E8;
  --cream-card: #FBF9F4;
  --rust:       #B8541F;
  --rust-deep:  #9A4517;
  --ink:        #1C1B19;
  --ink-soft:   #4A453E;
  --grey-caps:  #6B655C;
  --line:       #D9D2C4;
  --shadow:     18px 22px 50px -28px rgba(28,27,25,.35);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--ink-soft);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(184,84,31,.03) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(184,84,31,.03) 0, transparent 45%);
}

.wrap{ width:min(1140px, 92vw); margin-inline:auto; }

/* ---------- top bar ---------- */
header.top{
  padding:34px 0 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--line);
}
.logo{
  font-family:'Playfair Display',serif; font-weight:800; font-size:23px;
  line-height:.94; letter-spacing:.02em; color:var(--rust);
  text-transform:uppercase; text-decoration:none;
}
.logo span{ display:block; }
.logo::after{ content:""; display:block; width:34px; height:3px; background:var(--rust); margin-top:9px; }
.nav-sub{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); background:var(--rust); padding:12px 22px; border-radius:2px;
  text-decoration:none; transition:background .2s ease, transform .2s ease;
}
.nav-sub:hover{ background:var(--rust-deep); transform:translateY(-1px); }

/* ---------- hero ---------- */
.hero{ padding:70px 0 26px; max-width:820px; }
.hero .eyebrow{
  display:flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rust); font-weight:600; margin-bottom:26px;
}
.hero .eyebrow::before{ content:""; width:38px; height:2px; background:var(--rust); }
.hero h1{
  font-family:'Playfair Display',serif; font-weight:800; color:var(--ink);
  font-size:clamp(38px, 6vw, 66px); line-height:1.04; letter-spacing:-.01em;
}
.hero h1 em{ color:var(--rust); font-style:italic; }
.hero .tagline{
  margin-top:26px; padding-top:24px; border-top:1px solid var(--line);
  font-size:clamp(15px,1.7vw,18px); color:var(--ink-soft); max-width:560px;
}
.hero .meta{ margin-top:18px; font-size:13px; letter-spacing:.04em; color:var(--grey-caps); }
.hero .meta b{ color:var(--ink); font-weight:600; }

/* ---------- section label ---------- */
.section-label{ display:flex; align-items:baseline; gap:16px; margin:64px 0 30px; }
.section-label h2{ font-family:'Playfair Display',serif; font-weight:700; font-size:22px; color:var(--ink); letter-spacing:.01em; }
.section-label .rule{ flex:1; height:1px; background:var(--line); }
.section-label .count{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-caps); font-weight:600; }

/* ---------- grid ---------- */
.grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:34px; padding-bottom:20px; }
.card{
  display:flex; flex-direction:column; background:var(--cream-card);
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:#C9BFAD; }
.card .thumb{ aspect-ratio:16 / 8.3; overflow:hidden; background:var(--cream); border-bottom:1px solid var(--line); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.card:hover .thumb img{ transform:scale(1.035); }
.card .thumb.placeholder{ display:flex; align-items:center; justify-content:center; color:var(--grey-caps); font-family:'Playfair Display',serif; font-size:20px; }
.card .body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.card .no{ display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--rust); font-weight:600; margin-bottom:14px; }
.card .no::before{ content:""; width:22px; height:2px; background:var(--rust); }
.card h3{ font-family:'Playfair Display',serif; font-weight:700; color:var(--ink); font-size:24px; line-height:1.16; letter-spacing:-.005em; }
.card h3 em{ color:var(--rust); font-style:italic; }
.card .sub{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-caps); line-height:1.7; }
.card .go{ margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--rust); font-weight:600; }
.card .go .arrow{ transition:transform .25s ease; }
.card:hover .go .arrow{ transform:translateX(4px); }
.card .no .pill{ margin-left:auto; letter-spacing:.12em; background:rgba(184,84,31,.1); color:var(--rust); padding:3px 9px; border-radius:999px; font-size:9.5px; }

.empty-note{ grid-column:1/-1; padding:40px; text-align:center; color:var(--grey-caps); border:1px dashed var(--line); border-radius:4px; }

/* ---------- subscribe band ---------- */
.band{ margin:74px 0 0; background:var(--ink); color:var(--cream); border-radius:6px; padding:clamp(38px,6vw,64px) clamp(28px,6vw,64px); display:grid; grid-template-columns:1.4fr auto; gap:34px; align-items:center; }
.band h2{ font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(26px,3.2vw,38px); line-height:1.12; color:var(--cream); }
.band h2 em{ color:#E8A06A; font-style:italic; }
.band p{ margin-top:14px; color:#C9C2B6; font-size:15px; max-width:420px; }
.band .cta{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; background:var(--rust); color:#fff; text-decoration:none; font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase; padding:17px 30px; border-radius:3px; transition:background .2s ease, transform .2s ease; }
.band .cta:hover{ background:var(--rust-deep); transform:translateY(-2px); }

/* ---------- footer ---------- */
footer.site{ margin-top:60px; padding:36px 0 54px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center; justify-content:space-between; font-size:13px; color:var(--grey-caps); }
footer.site .fl{ display:flex; align-items:center; gap:14px; }
footer.site .fname{ font-family:'Playfair Display',serif; color:var(--ink); font-weight:700; font-size:15px; }
footer.site a{ color:var(--rust); text-decoration:none; font-weight:600; }
footer.site a:hover{ text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .grid{ grid-template-columns:1fr; gap:26px; }
  .band{ grid-template-columns:1fr; }
  header.top{ padding:24px 0; }
  .hero{ padding:48px 0 10px; }
}

a:focus-visible{ outline:3px solid var(--rust); outline-offset:3px; border-radius:3px; }
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto; }
  .card:hover{ transform:none; }
}