/* Wren Ashby Photography — shared site styles */
:root {
  --black: #0c0c0c;
  --near-black: #141414;
  --white: #f4f2ee;
  --grey: #8f8b83;
  --line: rgba(244,242,238,.12);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Cormorant Garamond", Georgia, serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--sans); color:var(--white); background:var(--black); line-height:1.6; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
p { margin:0 0 1em; color:var(--grey); }
.wrap { max-width:1200px; margin:0 auto; padding:0 32px; }

header.site-header { position:sticky; top:0; z-index:500; background:rgba(12,12,12,.85); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.nav-row { display:flex; align-items:center; justify-content:space-between; padding:22px 32px; max-width:1200px; margin:0 auto; }
.logo { font-family:var(--display); font-size:20px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
nav.primary-nav { display:flex; gap:32px; align-items:center; }
nav.primary-nav a { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#c9c6bd; font-weight:500; }
nav.primary-nav a:hover, nav.primary-nav a.active { color:var(--white); }

.hero-home { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 32px; }
.hero-home .wordmark { font-family:var(--display); font-size:clamp(38px,7vw,72px); letter-spacing:.04em; margin-bottom:14px; }
.hero-home .tagline { font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--grey); }

section { padding:64px 0; }
.section-tight { padding:32px 0; }
.eyebrow { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); margin-bottom:14px; }
h1,h2 { font-family:var(--display); font-weight:600; line-height:1.2; margin:0 0 .5em; color:var(--white); }
h1 { font-size:clamp(28px,4vw,44px); }
h2 { font-size:22px; letter-spacing:.02em; }

.frame-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.frame-grid a { display:block; overflow:hidden; aspect-ratio:1/1; position:relative; }
.frame-grid img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.frame-grid a:hover img { transform:scale(1.04); }
.frame-cat { position:absolute; bottom:14px; left:14px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }

.center { text-align:center; }
.center .wrap { max-width:520px; margin:0 auto; }
.btn-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.btn { display:inline-block; padding:13px 28px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line); }
.btn:hover { border-color:var(--white); }
.btn-solid { background:var(--white); color:var(--black); border-color:var(--white); }
.btn-solid:hover { background:#e4e0d8; }

/* Work page */
.series-block { padding:56px 0; border-bottom:1px solid var(--line); }
.series-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.series-num { font-family:var(--display); font-size:13px; color:var(--grey); letter-spacing:.1em; }
.series-desc { max-width:420px; font-size:14px; }
.work-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.work-grid img { aspect-ratio:1/1; object-fit:cover; }

/* About */
.about-hero { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about-hero img { aspect-ratio:4/5; object-fit:cover; }
.about-hero p { color:#d8d5cc; font-size:15px; }
.pull-quote { font-family:var(--display); font-size:24px; font-style:italic; color:var(--white); border-left:2px solid var(--line); padding-left:20px; margin:20px 0; }
.panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:20px; }
.panel-grid dt { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:8px; }
.panel-grid dd { margin:0; font-size:14px; color:#d8d5cc; }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.contact-grid img { aspect-ratio:3/4; object-fit:cover; }
.email-link { font-family:var(--display); font-size:26px; color:var(--white); border-bottom:1px solid var(--line); padding-bottom:4px; }
.helpful-list { list-style:none; padding:0; margin:20px 0; }
.helpful-list li { padding-left:18px; position:relative; margin-bottom:10px; font-size:14px; color:#d8d5cc; }
.helpful-list li::before { content:"—"; position:absolute; left:0; color:var(--grey); }

/* Agent callout — subtle, editorial, not garish */
.agent-callout { border:1px solid var(--line); padding:36px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.agent-callout .badge { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:10px; }
.agent-callout h2 { margin-bottom:8px; }
.agent-callout p { max-width:440px; margin-bottom:0; }

.slate-fab { position:fixed; right:24px; bottom:24px; z-index:900; background:var(--white); color:var(--black); border:none; padding:13px 22px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; cursor:pointer; font-family:var(--sans); box-shadow:0 14px 34px rgba(0,0,0,.45); }
.slate-fab:hover { background:#e4e0d8; }

footer.site-footer { border-top:1px solid var(--line); padding:40px 0; }
footer.site-footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; }
footer.site-footer .brand { font-family:var(--display); font-size:15px; letter-spacing:.04em; }
footer.site-footer nav a { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-left:20px; }
footer.site-footer .disclaimer { font-size:11px; color:#6a675f; max-width:900px; margin-top:18px; }

@media (max-width:860px) {
  nav.primary-nav { display:none; }
  .frame-grid { grid-template-columns:repeat(2,1fr); }
  .work-grid { grid-template-columns:repeat(2,1fr); }
  .about-hero, .contact-grid, .panel-grid { grid-template-columns:1fr; }
  .agent-callout { flex-direction:column; align-items:flex-start; }
}