:root{
    --ink:#1A1A18;
    --paper:#FFFFFF;
    --paper-2:#F7F6F2;
    --line:#E7E4DC;
    --text-sec:#6B6963;
    --gold:#9F1C3E;
    --gold-dark:#9F1C3E;
    --wa:#25D366;
  }
  .btn-outline{border:1px solid var(--ink);padding:10px 20px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:.15s;}
  .btn-outline:hover{background:var(--ink);color:var(--paper);}
  .btn-solid{background:var(--paper);color:#241C0C;padding:11px 22px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:.15s;}
  .btn-solid:hover{background:var(--gold-dark);}
  button{font-family:inherit;cursor:pointer;background:none;border:none;}
  
  .hero-1 {display: grid;grid-template-columns: 1.15fr .85fr;border: 1px solid var(--line);}
  .hero-1 .hero-img {position: relative;height: 460px;overflow: hidden;margin: inherit;max-width: 100%;}
  .hero-1 .hero-img img {display: block;width: 100%;height: 100%;object-fit: cover;}

  .hero-wrap{padding:24px 48px 0;}
  .hero{display:grid;grid-template-columns:1.15fr .85fr;border:1px solid var(--line);}
  .hero-img{max-width:1040px;margin:36px auto 0;height:500px;overflow:hidden;}
  .hero-tag{position:absolute;top:18px;left:18px;background:var(--paper-2);color:var(--gold-dark);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;font-weight:600;}
  .hero-copy{background:var(--gold);padding:48px 44px;display:flex;flex-direction:column;justify-content:center;}
  .hero-copy .eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);margin-bottom:16px;font-weight:600;}
  .hero-copy h1{font-size:32px;line-height:1.28;margin-bottom:16px; color:var(--paper)}
  .hero-copy p{font-size:14.5px;line-height:1.7;color:var(--paper);margin-bottom:24px;}
  .hero-copy .meta-row{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--paper-2);flex-wrap:wrap;}
  .meta-row{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text-sec);flex-wrap:wrap;}
  .meta-row .dot{width:3px;height:3px;background:var(--text-sec);border-radius:50%;}
  .know-more{margin-top:24px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--paper-2);border-bottom:2px solid var(--gold);padding-bottom:3px;width:fit-content;display:flex;align-items:center;gap:6px;}
  .know-more:hover{color:var(--paper);}

  .section-head{display:flex;align-items:baseline;justify-content:space-between;padding:56px 48px 22px;flex-wrap:wrap;gap:12px;}
  .section-head h2{font-size:23px; font-family:'Marcellus';}
  .section-head .count{font-size:12.5px;color:var(--text-sec);}
   
   .article-head{max-width:820px;margin:0 auto;padding:28px 48px 0;}
  .tag{display:inline-block;background:var(--paper-2);color:var(--gold-dark);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;font-weight:600;margin-bottom:20px;}
  .article-head h1{font-size:38px;line-height:1.22;margin-bottom:18px; font-family:'Lato', sans-serif;}
  .deck{font-size:16px;line-height:1.65;color:var(--text-sec);margin-bottom:26px;}
  .byline{display:flex;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap;}
  .avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;}
  .byline-name{font-size:13.5px;font-weight:600;}
  .byline-meta{font-size:12px;color:var(--text-sec);margin-top:2px;}
  .share-wrap{position: relative;display: inline-block;margin-left: auto;flex-shrink: 0;}

  /* Hidden checkbox drives the open/closed state */
  .share-toggle{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
    pointer-events:none;
  }

  /* Visible button — a <label> tied to the checkbox */
  .share-btn{
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    border:1px solid var(--line);
    padding:9px 16px;
    background:var(--paper);
    color:var(--ink);
    user-select:none;
    transition:border-color .15s;
  }
  .share-btn:hover{border-color:var(--gold);}
  .share-toggle:checked ~ .share-btn{border-color:var(--gold-dark);}

  /* Full-screen invisible overlay — only present while open.
     It's ALSO a <label for="shareToggle">, so any click on it
     (i.e. any click outside the button/panel) unchecks the box
     and closes the panel. This is what catches "click elsewhere
     to scroll to another section". */
  .share-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:40;
    cursor:default;
  }
  .share-toggle:checked ~ .share-overlay{
    display:block;
  }

  /* Dropdown panel — hidden by default, shown when checkbox is checked */
  .share-panel{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    background:var(--paper);
    border:1px solid var(--line);
    box-shadow:0 14px 34px rgba(0,0,0,.12);
    padding:8px;
    min-width:200px;
    z-index:50;
    animation:shareIn .15s ease;
  }
  .share-toggle:checked ~ .share-panel{
    display:block;
  }
  @keyframes shareIn{
    from{opacity:0; transform:translateY(-4px);}
    to{opacity:1; transform:translateY(0);}
  }

  .share-panel a{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 12px;
    font-size:13.5px;
    color:var(--ink);
    text-decoration:none;
  }
  .share-panel a:hover{background:var(--paper-2);}
  .share-ic{width:18px;text-align:center;font-size:14px;flex-shrink:0;}
  .filters{display:flex;gap:10px;padding:0 48px 30px;flex-wrap:wrap;}
  .pill{border:1px solid var(--line);padding:9px 18px;font-size:13px;font-weight:500;color:var(--text-sec);transition:.15s;cursor:pointer;}
  .pill:hover{border-color:var(--gold);color:var(--ink);}
  .pill.active{background:var(--ink);border-color:var(--ink);color:#F3F1E7;}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px;padding:0 48px;}
  .card{transition:.2s;}
  .card:hover{transform:translateY(-4px);}
  .card-img{height:210px;overflow:hidden;position:relative;}
  .card-img img{transition:transform .35s;display: block;width: 100%;height: 100%;object-fit: cover;}
  .card:hover .card-img img{transform:scale(1.05);}
  .card-tag{position:absolute;top:14px;left:14px;background:var(--paper);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;font-weight:600;color:var(--gold-dark);}
  .card h3{font-size:18px;line-height:1.36;margin:16px 0 10px;font-weight:600;}
  .card h4 {font-size:12px;line-height:1.36;margin:12px 0 10px;font-weight:400; color:#cccccc;}
  .card p{font-size:13.5px;line-height:1.65;color:var(--text-sec);margin-bottom:14px;}
  .card .meta-row{font-size:11.5px;padding-top:14px;border-top:1px solid var(--line);}
  .hidden-card{display:none;}

  .promo{margin:60px 48px;background:var(--paper-2);color:#F3F1E7;display:grid;grid-template-columns:1fr 1fr;align-items:center;}
  .promo-copy{padding:44px 48px;}
  .promo-copy .eyebrow{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:600;}
  .promo-copy h3{font-size:25px;margin-bottom:12px; color:var(--ink); font-family:'Marcellus';}
  .promo-copy p{font-size:13.5px;color:var(--text-sec);line-height:1.7;margin-bottom:22px;}
  .promo-img{height:280px;overflow:hidden;}

  .loadmore-wrap{display:flex;justify-content:center;padding:50px 0 70px;}
  .loadmore{border:1px solid var(--ink);padding:13px 42px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:.15s;}
  .loadmore:hover{background:var(--ink);color:#fff;}
  .loadmore:disabled{opacity:.4;cursor:default;}
   .caption{max-width:1040px;margin:0 auto;padding:12px 48px 0;font-size:12.5px;color:var(--text-sec);}

  .body-wrap{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 260px;gap:60px;padding:48px 48px 0;}
  .article-body p{font-size:16px;line-height:1.85;margin-bottom:24px;color:#33322E;}
  .article-body h2{font-size:24px;margin:42px 0 16px;scroll-margin-top:100px;}
  .pullquote{border-left:3px solid var(--gold);padding:6px 0 6px 26px;margin:34px 0;}
  .pullquote p{font-size:21px;font-weight:500;line-height:1.45;color:var(--ink);margin:0;font-family:'Marcellus';}
  .pullquote span{display:block;font-size:12px;color:var(--text-sec);margin-top:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
  .inline-img{margin:34px 0;height:330px;overflow:hidden;}
  .inline-img img {display: block; width: 100%;height: 100%;object-fit: cover;}
  .inline-caption{font-size:12.5px;color:var(--text-sec);margin-top:10px;}

  .rail{position:sticky;top:88px;align-self:start;}
  .rail-card{border:1px solid var(--line);padding:22px;margin-bottom:20px;}
  .rail-card h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-sec);margin-bottom:14px;}
  .toc a{display:block;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--text-sec);}
  .toc a:last-child{border-bottom:none;}
  .toc a.active{color:var(--gold-dark);font-weight:600;}

  .project-card{border:1px solid var(--line);overflow:hidden;}
  .project-card .pimg{height:150px;overflow:hidden;}
  .project-card .pcopy{padding:18px;}
  .project-card .peyebrow{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px;font-weight:600;}
  .project-card h5{font-size:16px;margin-bottom:8px; font-family:'Marcellus';}
  .project-card p{font-size:12.5px;color:var(--text-sec);line-height:1.6;margin-bottom:14px;}
  .project-card .btn-outline{display:block;text-align:center;font-size:11.5px;padding:10px;}

  .tags-row{max-width:1040px;margin:46px auto 0;padding:0 48px;display:flex;gap:10px;flex-wrap:wrap;}
  .chip{border:1px solid var(--line);padding:7px 16px;font-size:12px;color:var(--text-sec);}

  .author-box{max-width:1040px;margin:40px auto 0;padding:26px 48px;background:var(--paper-2);display:flex;gap:18px;align-items:flex-start;}
  .author-box .avatar{width:52px;height:52px;}
  .author-box h5{font-size:14.5px;margin-bottom:6px;}
  .author-box p{font-size:13px;color:var(--text-sec);line-height:1.65;}

  .cta-banner{max-width:1040px;margin:54px auto 0;padding:48px 56px;background:var(--gold);color:#F3F1E7;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
  .cta-banner h3{font-size:24px;max-width:420px;font-family:'Marcellus';}
  .cta-banner p{font-size:13px;color:#C9C6BB;margin-top:8px;}

  .related{max-width:1040px;margin:0 auto;padding:48px;}
  .related-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;}
  .related-head h2{font-size:22px;font-family:'Marcellus';}
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  
  .rcard-img{height:170px;overflow:hidden;position:relative;}
  .rcard-img img {display: block; width: 100%;height: 100%;object-fit: cover;}
  .rcard-tag{position:absolute;top:12px;left:12px;background:var(--paper);font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;font-weight:600;color:var(--gold-dark);}
  .rcard h4{font-size:15.5px;line-height:1.35;margin:14px 0 8px;font-weight:600;}
  .rcard .meta{font-size:11.5px;color:var(--text-sec);}
  @media (max-width:1100px){
    .body-wrap{grid-template-columns:1fr;}
    .rail{position:static;display:grid;grid-template-columns:1fr 1fr;gap:20px;}

  }
  @media (max-width:1024px){
    .hero-wrap,.section-head,.filters,.grid,.promo,.newsletter,footer,.loadmore-wrap{padding-left:28px;padding-right:28px;}
    .promo{margin-left:28px;margin-right:28px;}
    .grid{grid-template-columns:repeat(2,1fr);}
    .cta-banner{margin-left:28px;margin-right:28px;}
    .hero-1 .hero-img {position: relative;height: 100%;overflow: hidden;margin: inherit;max-width: 100%;}
   
  }
  @media (max-width:860px){
    .hero, .hero-1{grid-template-columns:1fr;}
    .hero-img{height:280px;}
	.article-head h1{font-size:28px;}
    .rail{grid-template-columns:1fr;}
    .related-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:640px){
    .hero-wrap,.section-head,.filters,.grid,.promo,.newsletter,footer,.loadmore-wrap{padding-left:18px;padding-right:18px;}
    .promo{margin-left:18px;margin-right:18px;grid-template-columns:1fr;}
    .promo-img{height:200px;order:-1;}
    .grid{grid-template-columns:1fr;}
    .hero-copy h1{font-size:24px;}
	.article-head,.caption,.body-wrap,.tags-row,.author-box,.related,footer{padding-left:18px;padding-right:18px;}
    .cta-banner{margin-left:18px;margin-right:18px;padding:34px 24px;flex-direction:column;align-items:flex-start;}
    .article-head h1{font-size:23px;}
    .hero-img{height:220px;}
    .related-grid{grid-template-columns:1fr;}
    .author-box{flex-direction:column;}
  }