/* ═══════════════════════════════════════════════════════════════
   TULSA HOME INSIDER — Warm Consumer Magazine
   Design: Wirecutter meets lifestyle magazine. Warm, trustworthy.
   Layout: Split heroes, amber accents, quiz cards, generous whitespace
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Nunito Sans';src:url(/fonts/nunito-sans-latin.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Bitter';src:url(/fonts/bitter-latin.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --forest:#1A5632;--forest-light:#22803E;--forest-dark:#134225;
  --amber:#D97706;--amber-light:#FBBF24;--amber-pale:#FEF3C7;--amber-glow:rgba(217,119,6,0.12);
  --cream:#FFFBEB;--warm-white:#FFFEF7;--hi-white:#FFFFFF;
  --bark:#1C1917;--bark-soft:#292524;--bark-muted:#78716C;--bark-light:#A8A29E;
  --hi-border:#E7E5E4;--hi-border-warm:#D6D3D1;
  --hi-font:'Nunito Sans',-apple-system,sans-serif;
  --hi-display:'Bitter',Georgia,serif;
  --hi-max-w:1180px;--hi-content-w:780px;
  --hi-radius:16px;--hi-radius-sm:10px;--hi-radius-xs:6px;
  --hi-shadow-sm:0 2px 8px rgba(28,25,23,0.06);
  --hi-shadow:0 8px 24px rgba(28,25,23,0.08);
  --hi-shadow-lg:0 16px 48px rgba(28,25,23,0.12);
  --hi-ease:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--hi-font);color:var(--bark);background:var(--warm-white);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--hi-display);font-weight:700;line-height:1.2;color:var(--bark);letter-spacing:-0.01em}
h1{font-size:clamp(2.25rem,4.5vw,3.5rem)}
h2{font-size:clamp(1.65rem,3vw,2.35rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}

.insider-wrap{max-width:var(--hi-max-w);margin:0 auto;padding:0 2rem}
.home-narrow{max-width:var(--hi-content-w);margin:0 auto}

/* Scroll Reveal */
.animate-in{opacity:0;transform:translateY(35px);transition:opacity 0.7s ease-out,transform 0.7s ease-out}
.animate-in[data-shown]{opacity:1;transform:none}
.home-stagger-1{transition-delay:0.1s}.home-stagger-2{transition-delay:0.2s}.home-stagger-3{transition-delay:0.3s}.home-stagger-4{transition-delay:0.4s}
@media(prefers-reduced-motion:reduce){.animate-in{opacity:1;transform:none;transition:none}}

/* Announcement Bar */
.announce{background:var(--forest);color:rgba(255,255,255,0.8);text-align:center;padding:8px 0;font-size:0.75rem;letter-spacing:0.08em;font-weight:600}

/* Header */
.home-header{background:var(--hi-white);border-bottom:3px solid var(--amber);position:sticky;top:0;z-index:100;transition:box-shadow 0.4s}
.home-header.home-compact{box-shadow:0 4px 20px rgba(28,25,23,0.08)}
.home-bar{max-width:var(--hi-max-w);margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:70px}
.insider-logo{font-family:var(--hi-display);font-size:1.2rem;font-weight:800;color:var(--bark);display:flex;align-items:center;gap:0.6rem}
.insider-logo-icon{width:32px;height:32px;background:var(--forest);border-radius:var(--hi-radius-xs);display:flex;align-items:center;justify-content:center}
.insider-logo-icon svg{width:18px;height:18px}
.insider-logo span{color:var(--forest)}
.insider-nav{display:flex;align-items:center;gap:2rem}
.insider-nav a{font-size:0.85rem;font-weight:700;color:var(--bark-muted);transition:color 0.3s}
.insider-nav a:hover,.insider-nav a.home-active{color:var(--forest)}

/* Hero - Split Layout */
.home-hero{padding:0;background:var(--cream);overflow:hidden}
.home-hero-split{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.home-hero-text{padding:5rem 4rem 5rem 2rem;display:flex;flex-direction:column;justify-content:center;max-width:600px;margin-left:auto}
.home-hero-badge{display:inline-flex;align-items:center;gap:0.4rem;background:var(--amber-pale);color:var(--amber);font-size:0.72rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:0.4rem 0.9rem;border-radius:2rem;margin-bottom:1.25rem;width:fit-content}
.home-hero h1{margin-bottom:1rem}
.home-hero-sub{color:var(--bark-muted);font-size:1.1rem;line-height:1.8;margin-bottom:2rem}
.home-hero-actions{display:flex;gap:0.75rem;flex-wrap:wrap}
.insider-btn-forest{display:inline-flex;align-items:center;gap:0.5rem;background:var(--forest);color:white;padding:0.9rem 1.75rem;border-radius:var(--hi-radius-sm);font-weight:700;font-size:0.88rem;border:none;cursor:pointer;font-family:var(--hi-font);transition:all 0.3s var(--hi-ease)}
.insider-btn-forest:hover{background:var(--forest-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,86,50,0.25)}
.insider-btn-outline{display:inline-flex;align-items:center;gap:0.5rem;background:transparent;color:var(--forest);padding:0.9rem 1.75rem;border-radius:var(--hi-radius-sm);font-weight:700;font-size:0.88rem;border:2px solid var(--forest);cursor:pointer;font-family:var(--hi-font);transition:all 0.3s var(--hi-ease)}
.insider-btn-outline:hover{background:var(--forest);color:white}
.home-hero-img{overflow:hidden;position:relative}
.home-hero-img img{width:100%;height:100%;object-fit:cover}
.home-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--cream) 0%,transparent 15%)}

/* Quick Start Cards */
.quick-start{padding:4.5rem 0;border-bottom:1px solid var(--hi-border)}
.quick-start .insider-label{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);font-weight:800;margin-bottom:0.75rem;text-align:center}
.quick-start h2{text-align:center;margin-bottom:2.5rem}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.quick-card{background:var(--hi-white);border:2px solid var(--hi-border);border-radius:var(--hi-radius);padding:1.75rem;text-align:center;transition:all 0.4s var(--hi-ease);cursor:pointer;text-decoration:none;display:block}
.quick-card:hover{border-color:var(--amber);box-shadow:var(--hi-shadow);transform:translateY(-4px)}
.quick-card-icon{font-size:2rem;margin-bottom:0.75rem}
.quick-card h3{font-size:1.05rem;margin-bottom:0.35rem;color:var(--forest)}
.quick-card p{font-size:0.82rem;color:var(--bark-muted);line-height:1.5}

/* Section Defaults */
.guide-section{padding:5rem 0}
.guide-section-cream{background:var(--cream)}
.guide-section .insider-label{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);font-weight:800;margin-bottom:0.75rem;text-align:center}
.guide-section h2{text-align:center;margin-bottom:0.5rem}
.guide-section-sub{text-align:center;color:var(--bark-muted);margin-bottom:3rem;max-width:560px;margin-left:auto;margin-right:auto}

/* Guide Cards */
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.guide-card{background:var(--hi-white);border:2px solid var(--hi-border);border-radius:var(--hi-radius);overflow:hidden;transition:all 0.4s var(--hi-ease);display:block;text-decoration:none}
.guide-card:hover{border-color:var(--amber);box-shadow:var(--hi-shadow-lg);transform:translateY(-4px)}
.guide-card-img{height:220px;overflow:hidden}
.guide-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s var(--hi-ease)}
.guide-card:hover .guide-card-img img{transform:scale(1.05)}
.guide-card-body{padding:1.5rem}
.guide-card .home-tag{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber);font-weight:800}
.guide-card h3{margin:0.4rem 0;color:var(--bark)}
.guide-card p{color:var(--bark-muted);font-size:0.88rem;line-height:1.6}
.guide-card .home-read-link{display:inline-flex;align-items:center;gap:0.35rem;color:var(--forest);font-weight:700;font-size:0.82rem;margin-top:0.75rem;transition:gap 0.3s var(--hi-ease)}
.guide-card .home-read-link:hover{gap:0.6rem}

/* Neighborhood Matchmaker */
.matchmaker{padding:5rem 0;background:var(--forest);color:white;position:relative;overflow:hidden}
.matchmaker::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(217,119,6,0.15) 0%,transparent 70%);pointer-events:none}
.matchmaker .insider-label{color:var(--amber-light)}
.matchmaker h2{color:white;text-align:center;margin-bottom:0.5rem}
.matchmaker .guide-section-sub{color:rgba(255,255,255,0.7)}
.match-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.match-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:var(--hi-radius-sm);padding:1.5rem;transition:all 0.3s var(--hi-ease)}
.match-card:hover{background:rgba(255,255,255,0.12);border-color:var(--amber);transform:translateY(-2px)}
.match-q{font-family:var(--hi-display);font-size:1rem;color:var(--amber-light);margin-bottom:0.5rem}
.match-a{color:rgba(255,255,255,0.75);font-size:0.88rem;line-height:1.65}
.match-a strong{color:white}

/* Article Cards */
.home-article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.home-article-card{background:var(--hi-white);border:2px solid var(--hi-border);border-radius:var(--hi-radius);overflow:hidden;transition:all 0.4s var(--hi-ease);display:block;text-decoration:none}
.home-article-card:hover{border-color:var(--amber);box-shadow:var(--hi-shadow-lg);transform:translateY(-4px)}
.home-article-card-img{height:180px;overflow:hidden}
.home-article-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s var(--hi-ease)}
.home-article-card:hover .home-article-card-img img{transform:scale(1.05)}
.home-article-card-body{padding:1.25rem}
.home-article-card .home-tag{font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber);font-weight:800}
.home-article-card h3{margin:0.35rem 0;font-size:1.1rem;color:var(--bark)}
.home-article-card p{color:var(--bark-muted);font-size:0.82rem;line-height:1.6}

/* FAQ */
.home-faq{padding:5rem 0;background:var(--cream)}
.home-faq .insider-label{text-align:center}
.home-faq h2{text-align:center;margin-bottom:2.5rem}
.home-faq-list{max-width:var(--hi-content-w);margin:0 auto}
.home-faq-entry{border-bottom:1px solid var(--hi-border-warm);padding:1.25rem 0}
.home-faq-toggle{display:none}
.home-faq-label{font-family:var(--hi-display);font-weight:600;font-size:1.05rem;color:var(--bark);display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer}
.home-faq-label::after{content:'+';font-size:1.5rem;color:var(--amber);transition:transform 0.3s;flex-shrink:0;font-weight:400}
.home-faq-toggle:checked+.home-faq-label::after{transform:rotate(45deg)}
.home-faq-body{color:var(--bark-muted);font-size:0.92rem;line-height:1.75;max-height:0;overflow:hidden;transition:max-height 0.5s var(--hi-ease),padding 0.5s var(--hi-ease);padding-top:0}
.home-faq-toggle:checked~.home-faq-body{max-height:300px;padding-top:0.75rem}

/* CTA */
.home-cta{padding:5rem 0;background:var(--amber);text-align:center}
.home-cta h2{color:var(--bark);margin-bottom:0.5rem}
.home-cta p{color:var(--bark-soft);margin-bottom:2rem;font-size:1.05rem}
.home-cta-form{display:flex;gap:0;max-width:480px;margin:0 auto}
.home-cta-form input{flex:1;padding:0.9rem 1.25rem;border:2px solid rgba(28,25,23,0.15);border-right:none;border-radius:var(--hi-radius-sm) 0 0 var(--hi-radius-sm);background:var(--hi-white);color:var(--bark);font-family:var(--hi-font);font-size:0.9rem;outline:none;transition:border-color 0.3s}
.home-cta-form input:focus{border-color:var(--forest)}
.home-cta-form input::placeholder{color:var(--bark-light)}
.home-cta-form button{padding:0.9rem 1.75rem;border-radius:0 var(--hi-radius-sm) var(--hi-radius-sm) 0;background:var(--forest);color:white;font-weight:700;font-size:0.85rem;letter-spacing:0.04em;text-transform:uppercase;border:none;cursor:pointer;font-family:var(--hi-font);transition:all 0.3s}
.home-cta-form button:hover{background:var(--forest-dark)}

/* Footer */
.home-footer{background:var(--bark);color:rgba(255,255,255,0.5);padding:4rem 0 2.5rem}
.home-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.home-footer-brand{font-family:var(--hi-display);font-size:1.05rem;font-weight:700;color:white;margin-bottom:0.5rem}
.home-footer-desc{font-size:0.82rem;line-height:1.7;color:rgba(255,255,255,0.4)}
.home-footer-heading{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:0.75rem;font-weight:700}
.home-footer-links{display:flex;flex-direction:column;gap:0.5rem}
.home-footer-links a{font-size:0.85rem;color:rgba(255,255,255,0.45);transition:color 0.3s}
.home-footer-links a:hover{color:var(--amber-light)}
.home-footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:2rem;font-size:0.75rem;color:rgba(255,255,255,0.3);text-align:center;line-height:1.7}

/* Inner Pages */
.home-page-hero{position:relative;overflow:hidden;min-height:320px;display:flex;align-items:flex-end;background:var(--forest)}
.home-page-hero-img{position:absolute;inset:0;z-index:0}
.home-page-hero-img img{width:100%;height:100%;object-fit:cover;opacity:0.3}
.home-page-hero-content{position:relative;z-index:2;padding:3rem 0;width:100%}
.home-page-hero h1{color:white;margin-bottom:0.35rem}
.home-page-hero .insider-label{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber-light);font-weight:800;margin-bottom:0.75rem}
.home-page-hero p{color:rgba(255,255,255,0.7);font-size:1.05rem}
.home-page-content{padding:4rem 0}
.home-page-content .home-narrow{max-width:var(--hi-content-w);margin:0 auto}

.home-prose{line-height:1.85;color:var(--bark-soft)}
.home-prose p{margin-bottom:1.5rem}
.home-prose h2{margin-top:3rem;margin-bottom:1rem;color:var(--bark)}
.home-prose h3{margin-top:2.25rem;margin-bottom:0.75rem;color:var(--bark)}
.home-prose ul,.home-prose ol{margin:0 0 1.5rem 1.75rem;list-style:disc;color:var(--bark-muted)}
.home-prose ol{list-style:decimal}
.home-prose li{margin-bottom:0.4rem}
.home-prose a{color:var(--forest);text-decoration:underline;text-decoration-color:var(--forest-light);text-underline-offset:3px;transition:text-decoration-color 0.3s}
.home-prose a:hover{text-decoration-color:var(--forest)}
.home-prose strong{color:var(--bark)}
.home-prose blockquote{border-left:4px solid var(--amber);background:var(--cream);padding:1.25rem 1.5rem;margin:1.5rem 0;border-radius:0 var(--hi-radius-xs) var(--hi-radius-xs) 0}

/* Takeaway box */
.home-takeaway{background:var(--amber-pale);border-left:4px solid var(--amber);padding:1.25rem 1.5rem;margin:1.5rem 0;border-radius:0 var(--hi-radius-xs) var(--hi-radius-xs) 0}
.home-takeaway h4{font-family:var(--hi-font);font-weight:800;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--amber);margin-bottom:0.4rem}

.home-breadcrumbs{font-size:0.8rem;color:var(--bark-muted);margin-bottom:2rem}
.home-breadcrumbs a{color:var(--forest)}

.home-blog-list{display:flex;flex-direction:column;gap:1.5rem}
.home-blog-item{background:var(--hi-white);border:2px solid var(--hi-border);border-radius:var(--hi-radius);padding:2rem;transition:all 0.4s var(--hi-ease)}
.home-blog-item:hover{border-color:var(--amber);box-shadow:var(--hi-shadow)}
.home-blog-meta{font-size:0.7rem;color:var(--amber);font-weight:800;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.5rem}
.home-blog-meta span{margin-right:1.5rem}
.home-blog-item h3 a{color:var(--bark);transition:color 0.3s}
.home-blog-item h3 a:hover{color:var(--forest)}
.home-blog-item p{color:var(--bark-muted);font-size:0.9rem}

.home-field{margin-bottom:1.5rem}
.home-field label{display:block;font-size:0.82rem;font-weight:700;color:var(--bark-muted);margin-bottom:0.4rem}
.home-field input,.home-field textarea{width:100%;padding:0.85rem 1.25rem;border:2px solid var(--hi-border);border-radius:var(--hi-radius-sm);background:var(--hi-white);font-family:var(--hi-font);font-size:0.92rem;color:var(--bark);outline:none;transition:border-color 0.3s}
.home-field input:focus,.home-field textarea:focus{border-color:var(--forest)}
.home-field textarea{resize:vertical;min-height:140px}
.insider-btn{display:inline-flex;align-items:center;gap:0.5rem;background:var(--forest);color:white;padding:0.85rem 2rem;border-radius:var(--hi-radius-sm);font-weight:700;font-size:0.85rem;border:none;cursor:pointer;font-family:var(--hi-font);transition:all 0.3s var(--hi-ease)}
.insider-btn:hover{background:var(--forest-dark);transform:translateY(-2px)}

/* Responsive */
@media(max-width:960px){.home-hero-split{grid-template-columns:1fr}.home-hero-img{height:350px}.home-hero-text{padding:3rem 2rem}.guide-grid{grid-template-columns:1fr}.home-article-grid{grid-template-columns:1fr 1fr}.home-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.quick-grid{grid-template-columns:1fr 1fr}.match-grid{grid-template-columns:1fr}.home-article-grid{grid-template-columns:1fr}.home-footer-grid{grid-template-columns:1fr}.insider-nav{display:none}.home-cta-form{flex-direction:column}.home-cta-form input{border-right:2px solid rgba(28,25,23,0.15);border-radius:var(--hi-radius-sm) var(--hi-radius-sm) 0 0;border-bottom:none}.home-cta-form button{border-radius:0 0 var(--hi-radius-sm) var(--hi-radius-sm)}}
@media(max-width:480px){.quick-grid{grid-template-columns:1fr}.home-hero-text{padding:2.5rem 1.5rem}}

/* ═══ RELATED ARTICLES ═══ */
.home-related{padding:3rem 0;border-top:2px solid var(--hi-border);margin-top:3rem}
.home-related h2{font-size:1.3rem;margin-bottom:1.25rem}
.home-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.home-related-card{background:var(--cream);border:2px solid var(--hi-border);border-radius:var(--hi-radius-sm);padding:1.25rem;transition:all 0.3s var(--hi-ease)}
.home-related-card:hover{border-color:var(--amber);transform:translateY(-2px)}
.home-related-card .home-tag{font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber);font-weight:800}
.home-related-card h3{font-size:1rem;margin:0.3rem 0 0}
.home-related-card h3 a{color:var(--bark);transition:color 0.3s}
.home-related-card h3 a:hover{color:var(--forest)}

/* Magazine Layout */
.magazine-layout{display:grid;grid-template-columns:1fr 320px;gap:2.5rem;max-width:var(--hi-max-w);margin:0 auto;padding:3rem 2rem}
.magazine-content{min-width:0}
.magazine-sidebar{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;gap:2rem}
@media(max-width:960px){.magazine-layout{grid-template-columns:1fr}.magazine-sidebar{position:static}}