/* ============================================================
   Oregon Wills & Trust Planning — Article Template
   Locked vocabulary: Playfair display + italic gold accents,
   teal section starters, off-white body, JetBrains Mono micro-meta.
   ============================================================ */

:root{
  --teal:#1E3517;
  --teal-2:#3C4D35;
  --teal-3:#112617;
  --gold:#D1B36C;
  --gold-2:#B89548;
  --skin:#F4E8DC;
  --skin-2:#EAD9C4;
  --off:#FAF6F0;
  --off-2:#F4EFE6;
  --ink:#1d1612;
  --ink-2:#3a2f25;
  --ink-3:#6b5a4a;
  --rule:rgba(29,22,18,.12);
  --rule-soft:rgba(29,22,18,.08);
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --max:1240px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--off);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   Header
   ============================================================ */
.hd{
  position:sticky;top:0;z-index:50;
  background:var(--teal);
  color:#fff;
  border-bottom:1px solid rgba(209,179,108,.18);
}
.hd-inner{
  max-width:var(--max);margin:0 auto;
  padding:18px 32px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;
}
.hd-brand{
  font-family:var(--serif);font-size:22px;letter-spacing:.01em;text-decoration:none;color:#fff;
}
.hd-nav{display:flex;justify-content:center;gap:36px}
.hd-nav a{
  color:rgba(255,255,255,.85);text-decoration:none;
  font-size:13px;letter-spacing:.04em;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.hd-nav a:hover{color:#fff;border-color:rgba(209,179,108,.6)}
.hd-nav a.active{color:var(--gold);border-color:var(--gold)}
.hd-cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  padding:11px 22px;border:1px solid rgba(209,179,108,.55);border-radius:999px;
  transition:background .2s,border-color .2s;
}
.hd-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--teal-3)}

@media (max-width:880px){
  .hd-nav{display:none}
  .hd-inner{grid-template-columns:auto auto;gap:16px}
}

/* ============================================================
   Masthead
   ============================================================ */
.mast{
  background:var(--teal);
  color:#fff;
  padding:36px 32px 88px;
  position:relative;
  overflow:hidden;
}
.mast::before{
  /* faint gold rule top */
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(209,179,108,.4) 30%,rgba(209,179,108,.4) 70%,transparent);
}
.mast::after{
  /* paper grain hint */
  content:"";position:absolute;inset:0;
  background:radial-gradient(900px 600px at 80% -10%,rgba(209,179,108,.08),transparent 60%);
  pointer-events:none;
}
.mast-inner{max-width:var(--max);margin:0 auto;position:relative}

.crumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
  display:flex;align-items:center;gap:14px;
  margin-bottom:42px;
}
.crumb a{color:rgba(255,255,255,.75);text-decoration:none}
.crumb a:hover{color:var(--gold)}
.crumb .sep{width:18px;height:1px;background:rgba(255,255,255,.3)}
.crumb .here{color:var(--gold)}

.mast-flag{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;
  border-top:1px solid rgba(209,179,108,.3);
  border-bottom:1px solid rgba(209,179,108,.3);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  margin-bottom:54px;
}
.mast-flag .pipe{margin:0 8px;color:var(--gold)}

.mast-cat{
  display:flex;align-items:center;gap:14px;margin-bottom:28px;
}
.mast-cat .line{width:48px;height:1px;background:var(--gold)}
.mast-cat .ey{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}

.mast h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(40px,5.5vw,72px);
  line-height:1.04;letter-spacing:-.01em;
  margin:0 0 28px;
  max-width:18ch;
  color:#fff;
}
.mast h1 em{font-style:italic;color:var(--gold);font-weight:500}

.mast-dek{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.7vw,24px);line-height:1.5;
  color:rgba(255,255,255,.85);
  max-width:60ch;margin:0 0 38px;
}

.mast-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.mast-meta strong{color:var(--gold);font-weight:500;letter-spacing:.16em}
.mast-meta .dot{width:3px;height:3px;background:rgba(209,179,108,.6);border-radius:50%}

/* ============================================================
   Body — sidebar + main
   ============================================================ */
.art-body{
  background:var(--off);
  padding:80px 32px 100px;
}
.art-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:240px 1fr;gap:80px;
  align-items:start;
}

/* sidebar */
.art-side{
  position:sticky;top:120px;
  display:flex;flex-direction:column;gap:32px;
}
.side-block{
  border-top:1px solid var(--rule);padding-top:18px;
}
.side-lbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);
  display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
}
.side-lbl .num{color:var(--gold-2)}

.side-cap{
  display:block;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:140px;line-height:.9;
  color:var(--teal);
  margin:8px 0 6px;
  letter-spacing:-.02em;
}
.side-cap-foot{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);
  border-top:1px solid var(--rule-soft);
  padding-top:10px;
}

.share-row{display:flex;flex-direction:column;gap:10px}
.share-row a{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink-2);text-decoration:none;
  padding:8px 0;border-bottom:1px solid var(--rule-soft);
  transition:color .2s,border-color .2s;
}
.share-row a:hover{color:var(--teal);border-color:var(--teal)}
.share-row a .ar{color:var(--gold-2);transition:transform .25s}
.share-row a:hover .ar{transform:translateX(3px)}

/* main */
.art-main{max-width:680px}

.art-main .lead{
  font-family:var(--serif);
  font-size:clamp(22px,2.2vw,28px);
  line-height:1.45;
  color:var(--ink);
  margin:0 0 50px;
  padding-bottom:32px;
  border-bottom:1px solid var(--rule);
  /* drop cap */
}
.art-main .lead::first-letter{
  font-family:var(--serif);font-style:italic;font-weight:500;
  color:var(--teal);
  font-size:5.4em;
  line-height:.85;
  float:left;
  margin:6px 14px -4px 0;
}

.art-main h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(28px,3vw,36px);
  line-height:1.2;letter-spacing:-.01em;
  color:var(--ink);
  margin:60px 0 22px;
  position:relative;
}
.art-main h2 em{font-style:italic;color:var(--teal);font-weight:500}
.art-main h2::before{
  content:attr(data-num);
  display:block;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);
  margin-bottom:12px;
  font-weight:500;
}

.art-main p{
  font-size:17px;line-height:1.75;color:var(--ink-2);
  margin:0 0 22px;
}
.art-main p strong{color:var(--ink);font-weight:600}

.art-main ul{
  list-style:none;padding:0;margin:0 0 30px;
  border-top:1px solid var(--rule);
}
.art-main ul li{
  padding:18px 0;
  border-bottom:1px solid var(--rule-soft);
  font-size:16px;line-height:1.65;color:var(--ink-2);
  position:relative;padding-left:34px;
}
.art-main ul li::before{
  content:"";position:absolute;left:0;top:30px;
  width:18px;height:1px;background:var(--gold);
}
.art-main ul li strong{
  color:var(--teal);font-weight:600;
  font-family:var(--serif);font-size:18px;letter-spacing:.005em;
}

/* callout */
.callout{
  background:var(--skin);
  border-left:3px solid var(--gold);
  padding:32px 36px;
  margin:50px 0;
  position:relative;
}
.callout-lbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);
  margin-bottom:14px;
}
.callout h4{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:22px;line-height:1.35;
  color:var(--teal);
  margin:0 0 14px;
}
.callout p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0}

/* tag area */
.tag-area{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  border-top:1px solid var(--rule);
  padding-top:30px;margin-top:60px;
}
.tag-area .lbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);
  margin-right:8px;
}
.tag-area .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 14px;border:1px solid var(--rule);border-radius:999px;
  color:var(--ink-2);
  transition:all .2s;
}
.tag-area .tag.gold{border-color:var(--gold);color:var(--gold-2)}

@media (max-width:980px){
  .art-inner{grid-template-columns:1fr;gap:48px}
  .art-side{position:static;flex-direction:row;flex-wrap:wrap;gap:20px}
  .side-block{flex:1;min-width:200px}
  .side-cap{font-size:96px}
}

/* ============================================================
   Related
   ============================================================ */
.rel{
  background:var(--skin);
  padding:90px 32px 100px;
}
.rel-inner{max-width:var(--max);margin:0 auto}

.rel-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:1px solid rgba(29,22,18,.18);
  padding-bottom:22px;margin-bottom:48px;gap:24px;
}
.rel-head h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,3.6vw,46px);line-height:1.1;
  color:var(--ink);margin:0;
}
.rel-head h2 em{font-style:italic;color:var(--teal);font-weight:500}
.rel-head .right{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);
}

.rel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(29,22,18,.12);
}
.rel-card{
  display:block;
  padding:32px 28px 32px 0;
  border-right:1px solid rgba(29,22,18,.12);
  border-bottom:1px solid rgba(29,22,18,.12);
  text-decoration:none;color:inherit;
  transition:background .25s;
  position:relative;
}
.rel-card:nth-child(3n){border-right:none}
.rel-card:hover{background:rgba(255,255,255,.4)}
.rel-card{padding-left:28px}

.rel-cap{
  display:block;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:64px;line-height:1;color:var(--teal);
  margin-bottom:18px;letter-spacing:-.02em;
}
.rel-cat{
  display:inline-block;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);
  margin-bottom:14px;
}
.rel-card h3{
  font-family:var(--serif);font-weight:500;
  font-size:22px;line-height:1.25;letter-spacing:-.005em;
  color:var(--ink);
  margin:0 0 12px;
}
.rel-card h3 em{font-style:italic;color:var(--teal);font-weight:500}
.rel-card p{
  font-size:14.5px;line-height:1.6;color:var(--ink-2);
  margin:0 0 18px;
}
.rel-card .lk{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);
  display:inline-flex;align-items:center;gap:8px;
}
.rel-card .lk .a{color:var(--gold-2);transition:transform .25s}
.rel-card:hover .lk .a{transform:translateX(4px)}

@media (max-width:880px){
  .rel-grid{grid-template-columns:1fr}
  .rel-card{border-right:none}
}

/* ============================================================
   CTA band (skin)
   ============================================================ */
.cta{
  background:var(--off);
  padding:100px 32px;
  text-align:center;
}
.cta-inner{max-width:760px;margin:0 auto}

.eyrow{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:24px;
}
.eyrow .eyline{flex:0 0 48px;height:1px;background:var(--gold)}
.eyrow .ey{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);
}
.cta h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(34px,4vw,52px);line-height:1.12;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 22px;
}
.cta h2 em{font-style:italic;color:var(--teal);font-weight:500}
.cta p{
  font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;
  color:var(--ink-2);margin:0 auto 36px;max-width:60ch;
}
.cta-btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  background:var(--teal);
  padding:18px 32px;border-radius:999px;
  transition:background .25s,transform .25s;
}
.cta-btn:hover{background:var(--teal-3);transform:translateY(-1px)}
.cta-btn .a{color:var(--gold);transition:transform .25s}
.cta-btn:hover .a{transform:translateX(4px)}

/* ============================================================
   Footer
   ============================================================ */
.ft{
  background:var(--teal);
  color:rgba(255,255,255,.78);
  padding:80px 32px 28px;
  border-top:1px solid rgba(209,179,108,.2);
}
.ft-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:56px;
}
.ft h3{
  font-family:var(--serif);font-weight:500;
  font-size:26px;line-height:1.2;color:#fff;margin:0 0 16px;
}
.ft h3 em{font-style:italic;color:var(--gold);font-weight:500}
.ft-blurb{font-size:13.5px;line-height:1.65;max-width:32ch;margin:0}
.ft h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;font-weight:500;
}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ft ul a{color:rgba(255,255,255,.75);font-size:13.5px;text-decoration:none;transition:color .2s}
.ft ul a:hover{color:var(--gold)}
.ft-contact{display:flex;flex-direction:column;gap:14px;font-size:13.5px;line-height:1.55}
.ft-contact a{color:rgba(255,255,255,.78);text-decoration:none;transition:color .2s}
.ft-contact a:hover{color:var(--gold)}
.ft-bottom{
  max-width:var(--max);margin:60px auto 0;padding-top:22px;
  border-top:1px solid rgba(209,179,108,.2);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:rgba(255,255,255,.55);
}
.ft-bottom strong{color:var(--gold);font-weight:500;letter-spacing:.06em}
.ft-bottom .links{display:flex;gap:24px}
.ft-bottom a{color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s}
.ft-bottom a:hover{color:var(--gold)}

@media (max-width:880px){
  .ft-inner{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:580px){
  .ft-inner{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;align-items:flex-start}
}