/* hazelclove.com — site shell. Tokens shared with Channel Papers. */
:root{
  --paper:#FCFAF5; --ink:#1C1B18; --ink-2:#5C574D; --ink-3:#8A8375;
  --clove:#1F5233; --clove-deep:#173F27; --chart:#2E7D4F; --hazel:#B4652A;
  --hairline:#E4DFD3; --rule:#D8D2C4; --band:#F3EFE5;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Archivo", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:var(--serif);
     font-size:17px; line-height:1.65}
img{max-width:100%; display:block}
a{color:var(--clove)}

.wrap{max-width:1040px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px}

/* ── header / nav ─────────────────────────── */
.topline{height:4px; background:var(--clove)}
header.site{border-bottom:1px solid var(--rule); background:var(--paper);
            position:sticky; top:0; z-index:50;
            box-shadow:0 1px 0 var(--rule), 0 6px 18px -12px rgba(28,27,24,.35)}
.site-bar{display:flex; justify-content:space-between; align-items:center;
          flex-wrap:wrap; gap:10px 28px; padding-top:18px; padding-bottom:18px}
.wordmark{font-family:var(--serif); font-weight:600; font-size:21px;
          letter-spacing:.01em; color:var(--ink); text-decoration:none}
.wordmark span{color:var(--hazel)}
nav.main{display:flex; flex-wrap:wrap; gap:4px 26px}
nav.main a{font-family:var(--sans); font-size:12.5px; font-weight:600;
           letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
           color:var(--ink-2); padding:4px 0; border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--clove); border-bottom-color:var(--clove)}

/* ── fact strip (signature) ───────────────── */
.factstrip{background:var(--clove-deep); border-top:1px solid #2C5B40; border-bottom:1px solid #2C5B40}
.factstrip .wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 0;
                 padding:18px 24px}
.factstrip span{font-family:var(--sans); font-size:12px; font-weight:500;
                letter-spacing:.14em; text-transform:uppercase; color:#A8BDA9;
                padding:2px 30px; border-left:1px solid rgba(255,255,255,.16);
                white-space:nowrap}
.factstrip span:first-child{border-left:0}
.factstrip b{font-weight:600; color:#fff; letter-spacing:.14em}

/* ── hero (full-bleed) ────────────────────── */
.hero-full{position:relative; min-height:76vh; display:flex; align-items:center;
           background:#10221A url(/assets/hero-aisle-v3.jpg) center/cover no-repeat}
.hero-full::before{content:""; position:absolute; inset:0;
  background:linear-gradient(98deg, rgba(13,26,19,.94) 0%, rgba(13,26,19,.78) 42%,
             rgba(13,26,19,.30) 78%, rgba(13,26,19,.12) 100%)}
.hero-full .wrap{position:relative; z-index:1; width:100%; padding-top:72px; padding-bottom:72px}
.hero-copy{max-width:640px}
.hero-full .eyebrow{color:#C9A227; margin-bottom:18px}
.hero-full h1{font-family:var(--serif); font-size:clamp(38px,5.6vw,60px); line-height:1.04;
         font-weight:500; letter-spacing:-.015em; color:#fff}
.hero-full .sub{font-family:var(--serif); font-size:22px; font-style:italic;
           color:#D9C99B; margin-top:16px}
.hero-full p.lead{margin-top:20px; font-size:18.5px; line-height:1.6; max-width:30em; color:#CDC7B8}
.btn.light{background:#fff; color:var(--clove-deep)}
.btn.light:hover{background:#EDE8DA}
.hero-media{position:relative; background:var(--band);
            box-shadow:14px 14px 0 0 var(--band), 14px 14px 0 1px var(--rule);
            margin:0 14px 14px 0}
.hero-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
                display:block; filter:saturate(1.04) contrast(1.03)}

/* ── shared pieces ────────────────────────── */
.eyebrow{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em;
         text-transform:uppercase; color:var(--hazel)}
.btn{display:inline-block; font-family:var(--sans); font-size:13.5px; font-weight:600;
     letter-spacing:.04em; color:#fff; background:var(--clove); padding:13px 24px;
     text-decoration:none; border-radius:3px; margin-top:26px}
.btn:hover{background:var(--clove-deep)}
.btn.ghost{color:var(--clove); background:none; border:1.5px solid var(--clove)}
section.block{padding:60px 0; border-top:1px solid var(--rule)}
section.block.band{background:var(--band)}
.block h2{font-family:var(--serif); font-size:31px; font-weight:500;
          letter-spacing:-.01em; line-height:1.2; margin:10px 0 18px; max-width:20em}
.block p{max-width:44em; margin-bottom:14px}
.block p.big{font-size:19px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:24px 56px; align-items:start}

/* category / channel lists */
.cat-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 72px;
          border-top:2px solid var(--ink); margin-top:22px; max-width:820px}
.cat-grid div{font-family:var(--serif); font-size:18px; padding:14px 0;
              border-bottom:1px solid var(--hairline)}
.chan-line{font-family:var(--sans); font-size:15px; font-weight:500;
           letter-spacing:.01em; margin-top:16px; max-width:none}
.chan-line b{color:var(--hazel); font-weight:700; font-size:1.3em;
             line-height:1; padding:0 7px}
.chan-line span{white-space:nowrap}

/* cards (insights / papers) */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
       gap:22px; margin-top:28px}
.card{border:1px solid var(--rule); background:var(--paper); padding:24px 24px 22px;
      display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--ink)}
.card:hover{border-color:var(--clove)}
.card .k{font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.14em;
         text-transform:uppercase; color:var(--hazel)}
.card h3{font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.3}
.card p{font-size:14.5px; color:var(--ink-2); margin:0}
.card .go{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em;
          text-transform:uppercase; color:var(--clove); margin-top:auto; padding-top:8px}

/* fact tables */
.tbl-wrap{overflow-x:auto; margin:26px 0}
table.facts{border-collapse:collapse; width:100%; font-family:var(--sans); font-size:14px}
table.facts th{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
     text-align:left; font-weight:600; border-bottom:2px solid var(--ink); padding:8px 14px 8px 0}
table.facts td{border-bottom:1px solid var(--hairline); padding:12px 14px 12px 0;
               vertical-align:top; line-height:1.5}
table.facts td:first-child{font-weight:600; white-space:nowrap; width:220px}

/* category run separators */
.cat-run b{color:var(--hazel); font-weight:700; font-size:1.3em; line-height:1; padding:0 2px}

/* policy list */
.policy-list{counter-reset:pol; max-width:46em}
.policy-list h3{font-family:var(--serif); font-size:20px; font-weight:600; margin:30px 0 8px}
.policy-list h3::before{counter-increment:pol; content:counter(pol) ". "; color:var(--hazel)}

/* page head (inner pages) */
.page-head{padding:56px 0 40px}
.page-head h1{font-family:var(--serif); font-size:clamp(32px,4.6vw,44px); font-weight:500;
              letter-spacing:-.015em; line-height:1.1; margin-top:12px; max-width:18em}
.page-head p.dek{margin-top:16px; font-size:19px; font-style:italic; color:var(--ink-2); max-width:34em}

/* closing cta */
.close-cta{padding:64px 0; border-top:1px solid var(--rule); background:var(--clove); color:#EDE8DA}
.close-cta h2{font-family:var(--serif); font-size:31px; font-weight:500; color:#fff; margin-bottom:12px}
.close-cta p{max-width:38em}
.close-cta a{color:#fff}
.close-cta .btn{background:#fff; color:var(--clove)}
.close-cta .contact-line{font-family:var(--sans); font-size:14px; margin-top:18px}

/* operating-terms quotes */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:26px 30px; margin-top:26px}
.quotes blockquote{font-family:var(--serif); font-style:italic; font-size:19px;
        line-height:1.5; color:var(--clove); border-top:2px solid var(--ink);
        padding-top:14px; margin:0}

/* contact form */
form.contact{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin-top:8px}
form.contact .full{grid-column:1/-1}
form.contact label{display:block; font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px}
form.contact input,form.contact select,form.contact textarea{width:100%; font-family:var(--sans);
  font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--rule);
  border-radius:3px; padding:11px 12px}
form.contact input:focus,form.contact select:focus,form.contact textarea:focus{
  outline:2px solid var(--clove); outline-offset:1px; border-color:var(--clove)}
form.contact textarea{min-height:130px; resize:vertical}
form.contact .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
form.contact button{justify-self:start}
.banner{font-family:var(--sans); font-size:14px; font-weight:600; padding:14px 18px;
  border-radius:3px; margin-bottom:22px; display:none}
.banner.ok{background:#E4EFE7; color:var(--clove-deep); border:1px solid var(--chart)}
.banner.bad{background:#F6E8DC; color:#8A4514; border:1px solid var(--hazel)}
@media (max-width:640px){form.contact{grid-template-columns:1fr}}

/* footer */
footer.site{border-top:2px solid var(--ink); padding:28px 0 48px; margin-top:0;
            font-family:var(--sans); font-size:12.5px; color:var(--ink-2)}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:8px 32px; justify-content:space-between}

/* logo in masthead */
.wordmark img{height:46px; width:auto; display:block}

@media (max-width:820px){
  .site-bar{padding-top:12px; padding-bottom:12px; gap:8px 20px}
  .wordmark img{height:34px}
  nav.main{width:100%; flex-wrap:nowrap; overflow-x:auto; gap:22px;
           scrollbar-width:none; -webkit-overflow-scrolling:touch}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{white-space:nowrap; padding:6px 0; flex:0 0 auto}
  .hero-full{min-height:64vh}
  .hero-full .wrap{padding-top:48px; padding-bottom:48px}
  .hero-media img{aspect-ratio:5/3}
  .two-col{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
  .cat-grid div{font-size:16px; padding:12px 0}
  section.block{padding:42px 0}
  .block h2{font-size:25px}
  .page-head{padding:38px 0 26px}
  .close-cta{padding:44px 0}
  .factstrip .wrap{padding:14px 12px; gap:10px 0}
  .factstrip span{padding:2px 14px; font-size:11px}
}