/*
Stylesheet for homeownerspall.com
Design system reused verbatim (selectors, values, breakpoints) from the paired base's
theme stylesheet — only this header comment and brand-specific asset filenames changed.
*/
:root{--ink:#111b13;--paper:#f0f3ec;--accent:#78934f;--sky:#789eaa;--muted:#62706d;--line:rgba(20,32,28,.16);--white:#fff;--shadow:0 28px 80px rgba(0,0,0,.16)}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.shell{width:min(1210px,calc(100% - 36px));margin:auto}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:16px;top:16px;background:#fff;z-index:100;padding:10px}
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{height:82px;display:grid;grid-template-columns:250px 1fr auto;gap:26px;align-items:center}
.brand img{height:32px;width:auto}
.menu{display:flex;gap:18px;justify-content:center;font-size:13px;font-weight:850;color:#4c5d59;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 19px;border-radius:6px;background:var(--ink);color:#fff;font-weight:900;border:1px solid var(--ink)}
.button.light{background:#fff;color:var(--ink);border-color:#fff}
.button.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.mobile-toggle{display:none}
.hero-mag{position:relative;min-height:760px;background:var(--ink);color:#fff;overflow:hidden}
.hero-mag:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.36) 48%,rgba(0,0,0,.08))}
.hero-mag:after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(90deg,var(--accent),var(--sky))}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:end;min-height:760px;padding:132px 0 72px}
.hero-copy{max-width:820px}
.eyebrow,.kicker{margin:0 0 14px;color:var(--accent);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:950}
h1,h2,h3{font-family:Georgia,serif;line-height:.98;letter-spacing:-.045em;margin:0;font-weight:500}
h1{font-size:clamp(48px,7vw,96px)}
.hero-copy p{font-size:20px;color:rgba(255,255,255,.8);max-width:720px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.brief-card{background:rgba(255,255,255,.92);color:var(--ink);padding:24px;border-radius:8px;box-shadow:var(--shadow)}
.brief-card b{display:block;font-family:Georgia,serif;font-size:42px;line-height:1}
.brief-card span{display:block;color:var(--muted);font-weight:850;margin-top:8px}
.section{padding:80px 0}
.mag-intro{display:grid;grid-template-columns:.7fr 1.3fr;gap:36px;align-items:end}
.mag-intro h2,.editorial h2{font-size:clamp(38px,6vw,72px)}
.mag-intro p{font-size:18px;color:var(--muted)}
.lane-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.story-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.08)}
.story-card a{display:block;padding:24px}
.story-card .photo{height:210px;margin:-24px -24px 22px;overflow:hidden;display:block}
.story-card img{width:100%;height:100%;object-fit:cover}
.story-card h3{font-size:34px}
.story-card p{color:var(--muted)}
.story-card b{color:var(--accent)}
.dealroom{background:var(--ink);color:#fff}
.deal-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.deal-layout img{width:100%;height:100%;min-height:540px;object-fit:cover}
.deal-copy{padding:54px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03))}
.deal-copy p{color:rgba(255,255,255,.74)}
.lane{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0}
.lane span{padding:13px;border-radius:4px;background:rgba(255,255,255,.1);border:1px solid var(--line);font-weight:850}
.page-hero{position:relative;background:var(--ink);color:#fff;padding:92px 0 58px;overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.28))}
.page-hero .shell{position:relative;z-index:1}
.breadcrumbs{font-size:13px;color:rgba(255,255,255,.72);margin-bottom:20px}
.page-hero h1{font-size:clamp(42px,6vw,82px)}
.page-hero p{font-size:19px;color:rgba(255,255,255,.78);max-width:790px}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:34px;align-items:start}
.article{margin-top:-26px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:42px;box-shadow:var(--shadow)}
.article-image{border-radius:6px;overflow:hidden;margin:-16px -16px 30px}
.article .lead{font-size:22px;color:#2d3936}
.article h2{font-size:42px;margin-top:36px}
.aside{position:sticky;top:104px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px;box-shadow:0 18px 44px rgba(0,0,0,.08)}
.aside ul{padding-left:20px;color:var(--muted)}
.notice{margin-top:30px;padding:20px;border-left:5px solid var(--accent);background:#fff8ea}
.footer{background:#07100e;color:rgba(255,255,255,.72);padding:56px 0}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:26px}
.footer img{height:38px;width:auto}
.footer a{color:var(--accent)}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:18px;font-size:13px}

/* New component: season task grid (custom route, built from existing tokens — no shape
   in the base covers "N periods x independent task cards", see routes.md) */
.season-section{padding:48px 0;border-top:1px solid var(--line)}
.season-section:first-of-type{border-top:none;padding-top:0}
.season-section .season-intro{font-size:18px;color:var(--muted);margin:14px 0 30px}
.task-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.task-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px;box-shadow:0 18px 44px rgba(0,0,0,.08)}
.task-card h4{font-family:Georgia,serif;font-size:20px;line-height:1.15;letter-spacing:-.02em;margin:0 0 10px;font-weight:500}
.task-card p{margin:0;color:var(--muted);font-size:15px}

@media(max-width:1200px) and (min-width:1041px){
  /* Bug fix: at this width the 7-item text menu ("Services / Project Path / Seasonal
     Check / Home Systems / Renovation / Financing / Risk Memo") wraps to 2 rows inside
     the 82px header before the 1040px hamburger breakpoint kicks in. Base's documented
     breakpoint stays at 1040px (design-system.html) — instead of moving it, shrink the
     brand column and tighten menu gap/font-size just in this gap so all 7 links fit on
     one row without changing the mobile collapse behavior. */
  .nav{grid-template-columns:190px 1fr auto;gap:16px}
  .menu{gap:10px;font-size:12px}
}
@media(max-width:1040px){
  /* Base used a 2-column grid here, but this build's header keeps a ghost button
     alongside the toggle (brand + ghost button + toggle = 3 items), which wrapped
     the toggle onto its own row. Flexbox with the brand pushed left keeps all three
     on one line without inventing a new header component. */
  .nav{display:flex;align-items:center;gap:14px}
  .brand{margin-right:auto}
  .menu{display:none}
  .mobile-toggle{display:flex;width:42px;height:42px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center}
  .mobile-toggle:before{content:"☰"}
  .site-head.menu-open .menu{display:flex;position:absolute;left:18px;right:18px;top:76px;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px;box-shadow:var(--shadow)}
  .hero-layout,.mag-intro,.deal-layout,.content-grid,.footer-grid{grid-template-columns:1fr}
  .lane-grid{grid-template-columns:1fr 1fr}
  .aside{position:static}
  .task-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .shell{width:min(100% - 28px,1210px)}
  .nav{height:70px;grid-template-columns:1fr auto auto}
  .brand img{height:26px}
  .nav>.button{display:none}
  .hero-mag{min-height:auto}
  .hero-layout{min-height:auto;padding:98px 0 52px}
  h1{font-size:34px;line-height:1.05}
  .hero-copy p,.page-hero p{font-size:16px}
  .hero-actions .button{width:100%}
  .brief-card{display:none}
  .section{padding:58px 0}
  .lane-grid,.lane{grid-template-columns:1fr}
  .mag-intro h2,.dealroom h2,.page-hero h1{font-size:36px}
  .article,.deal-copy{padding:24px}
  .task-grid{grid-template-columns:1fr}
}