/*
Theme Name: Lyons Fine Art Appraisals
Theme URI: https://example.com/lyons-fine-art-appraisals
Author: Gloria Lyons + ChatGPT
Author URI: https://example.com
Description: A sleek, mobile-first magazine theme with a built-in soft paywall (headline + first paragraph free), subscription hooks, email opt-in area, and a mosaic gallery for Henry Ossawa Tanner artworks.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lfa
*/

/* ---------- CSS Variables ---------- */
:root{
  --bg: #FAFAF5;           /* Ivory */
  --text: #2E2E2E;         /* Charcoal */
  --accent: #BDA55D;       /* Gold */
  --deep: #5A2A2A;         /* Burgundy */
  --muted: #E9E6DC;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--deep);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px, 92vw);margin:0 auto}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:#fff; border-bottom:1px solid var(--muted);
}
.brand{
  display:flex;align-items:center;gap:12px;padding:12px 0;
}
.brand .title{
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  font-weight:700; font-size:clamp(18px, 2.2vw, 28px); letter-spacing:.3px;
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav{
  display:flex;gap:18px;flex-wrap:wrap
}
.nav a{padding:10px 8px;border-radius:12px}
.nav a.button{background:var(--deep);color:white;padding:10px 14px;box-shadow:0 2px 6px rgb(0 0 0 / 8%)}
.nav a.button:hover{opacity:.9;text-decoration:none}
.mobile-toggle{display:none;background:transparent;border:0;font-size:28px}

/* ---------- Hero ---------- */
.hero{
  display:grid;gap:18px;padding:24px 0;
  grid-template-columns:1.1fr .9fr;
}
.hero-text{
  background:linear-gradient(180deg, #fff, var(--muted));
  border-radius:20px;padding:24px 22px;
  box-shadow:0 8px 24px rgb(0 0 0 / 6%);
}
.hero h1{
  margin:0 0 8px 0;
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  font-size:clamp(28px, 5vw, 48px);
}
.kicker{color:#6c6458;text-transform:uppercase;letter-spacing:.14em;font-size:12px;margin-bottom:6px}

/* ---------- Mosaic Grid ---------- */
.mosaic{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows:10px;
}
.mosaic .tile{
  position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 6px 18px rgb(0 0 0 / 10%);
}
.mosaic .tile img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Staggered spans */
.mosaic .tile:nth-child(6n+1){grid-row:span 20}
.mosaic .tile:nth-child(6n+2){grid-row:span 28}
.mosaic .tile:nth-child(6n+3){grid-row:span 16}
.mosaic .tile:nth-child(6n+4){grid-row:span 24}
.mosaic .tile:nth-child(6n+5){grid-row:span 18}
.mosaic .tile:nth-child(6n+6){grid-row:span 22}

/* ---------- Cards / Posts ---------- */
.post-card{
  background:#fff;border:1px solid var(--muted);border-radius:16px;overflow:hidden;
  box-shadow:0 6px 18px rgb(0 0 0 / 5%);
}
.post-card .inner{padding:18px 18px 20px}
.post-card .meta{color:#7a7467;font-size:13px;margin:0 0 8px 0}
.post-card h2, .post-card h3{
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  margin:.1rem 0 .6rem 0;
}
.btn, .button{
  display:inline-block;background:var(--accent);color:#231f1a;border:0;border-radius:12px;
  padding:10px 14px;font-weight:600;cursor:pointer
}
.btn:hover{text-decoration:none;filter:brightness(.97)}

/* ---------- Paywall Banner ---------- */
.paywall-cta{
  background:linear-gradient(180deg, #fff, #f6f3ea);
  border:1px dashed var(--accent);
  padding:18px;border-radius:16px;margin:18px 0 0 0;text-align:center
}

/* ---------- Footer ---------- */
.site-footer{margin-top:48px;background:#fff;border-top:1px solid var(--muted);padding:28px 0;color:#6c6458}
.site-footer a{color:#6c6458}

/* ---------- Layout Utilities ---------- */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3, 1fr)}
.grid-2{grid-template-columns:repeat(2, 1fr)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;padding-bottom:12px}
  .mobile-toggle{display:inline-block}
}