/* The Marigold Ledger | Marigold Editorial
   palette: primary #1A1714  secondary #4A443B  accent #BC7A09  bg #F6F3EC  fg #1A1714 */
:root{
  --primary:#1A1714; --secondary:#4A443B; --accent:#BC7A09; --bg:#F6F3EC; --fg:#1A1714;
  --paper:#FBF9F3; --line:rgba(26,23,20,.12); --line-2:rgba(26,23,20,.07);
  --amber-soft:rgba(188,122,9,.10);
  --radius:4px;
  --maxw:1180px; --col:65ch;
  --shadow:0 1px 0 rgba(26,23,20,.05), 0 18px 50px -32px rgba(26,23,20,.5);
  --shadow-sm:0 1px 0 rgba(26,23,20,.05), 0 10px 28px -22px rgba(26,23,20,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --display:"Vidaloka",Georgia,serif;
  --body:"Tajawal",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"Lekton","Courier New",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:18px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1100px 520px at 82% -8%, rgba(188,122,9,.07), transparent 60%),
    radial-gradient(900px 600px at -10% 0%, rgba(74,68,59,.06), transparent 55%);
  background-attachment:fixed;
}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px}
.lekton{font-family:var(--mono)}
.amber{color:var(--accent)}
a{color:var(--primary); text-decoration:none}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{margin:0; line-height:1.12; font-weight:400}
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--primary);
  padding:10px 16px; z-index:200; border-radius:0 0 var(--radius) 0; font-family:var(--mono)}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:2px}

/* ---------- eyebrow / kicker / rule ---------- */
.kicker{font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em;
  font-size:12px; color:var(--secondary); margin:0 0 14px; font-weight:700}
.accent-rule{width:54px; height:3px; background:var(--accent); margin:18px 0 0; border-radius:0}
.sec-h{font-family:var(--display); font-size:clamp(28px,4vw,42px); letter-spacing:.2px; color:var(--primary)}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:100;
  background:rgba(246,243,236,.86); backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line)}
.head-inner{display:flex; align-items:center; gap:22px; height:72px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand-mark{display:grid; place-items:center; width:38px; height:38px; border-radius:var(--radius);
  background:var(--primary); color:var(--bg); font-family:var(--display); font-size:16px; letter-spacing:.5px}
.brand-name{font-family:var(--display); font-size:20px; color:var(--primary); letter-spacing:.3px}
.brand-name.big{font-size:26px}
.nav{display:flex; gap:6px; align-items:center}
.nav a{font-family:var(--body); font-weight:500; font-size:15.5px; color:var(--secondary);
  padding:8px 12px; position:relative}
.nav a:hover{color:var(--primary)}
.nav a.active{color:var(--primary)}
.nav a.active::after{content:""; position:absolute; left:12px; right:12px; bottom:2px;
  height:2px; background:var(--accent)}
.head-cta{font-family:var(--body); font-weight:700; font-size:14.5px; color:var(--primary);
  border:1.5px solid var(--primary); padding:9px 16px; border-radius:var(--radius); white-space:nowrap}
.head-cta:hover{background:var(--primary); color:var(--bg)}
@media(max-width:860px){ .nav a{padding:8px 9px; font-size:14px} .head-cta{display:none} .brand-name{font-size:18px} }
@media(max-width:520px){ .nav{gap:0} .nav a{padding:8px 7px; font-size:13px} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:700;
  font-size:15.5px; padding:13px 22px; border-radius:var(--radius); border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s var(--ease), background .2s, color .2s, box-shadow .2s; line-height:1}
.btn svg{flex:none}
.btn-fill{background:var(--accent); color:var(--primary); box-shadow:var(--shadow-sm)}
.btn-fill:hover{transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(188,122,9,.6)}
.btn-ghost{background:transparent; color:var(--primary); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--primary); transform:translateY(-2px)}
.btn-line{background:transparent; color:var(--primary); border-color:var(--primary)}
.btn-line:hover{background:var(--primary); color:var(--bg)}
.btn-lg{padding:16px 28px; font-size:16.5px}
.btn-block{width:100%; justify-content:center}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(246,243,236,0) 60%, rgba(246,243,236,.9) 100%),
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), var(--line-2) calc(100% / 12 - 1px) calc(100% / 12));
  opacity:.7}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:54px;
  align-items:center; padding:84px 0 78px}
.hero-eyebrow{text-transform:uppercase; letter-spacing:.24em; font-size:12px; color:var(--secondary); font-weight:700; margin:0 0 22px}
.hero-title{font-family:var(--display); font-size:clamp(40px,6.4vw,76px); line-height:1.02;
  letter-spacing:-.5px; color:var(--primary)}
.hero-sub{font-size:19px; color:var(--secondary); max-width:46ch; margin:22px 0 30px; line-height:1.6}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-card{margin:0; position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line)}
.hero-card img{width:100%; aspect-ratio:16/10; object-fit:cover}
.hero-card figcaption{position:absolute; left:0; bottom:0; right:0; padding:10px 14px;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--bg);
  background:linear-gradient(0deg, rgba(26,23,20,.78), transparent)}
@media(max-width:900px){ .hero-inner{grid-template-columns:1fr; gap:36px; padding:54px 0 50px}
  .hero-card{order:-1} }

/* ---------- stats ---------- */
.stats{background:var(--primary); color:var(--bg); border-bottom:1px solid var(--line)}
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:34px 28px}
.stat{display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  border-left:2px solid rgba(246,243,236,.18); padding-left:18px}
.stat-num{font-family:var(--display); font-size:clamp(30px,4vw,46px); color:var(--accent); line-height:1}
.stat-label{font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:rgba(246,243,236,.72)}
@media(max-width:740px){ .stat-strip{grid-template-columns:repeat(2,1fr); gap:22px 18px} }

/* ---------- section spacing ---------- */
.journal,.pillars,.resources,.about-story,.values,.team,.svc-section,.process,.testimonials,.contact-section,.related{
  padding:80px 0}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:46px}
.sec-note,.res-note{color:var(--secondary); max-width:42ch; font-size:16px; margin:0}
@media(max-width:820px){ .sec-head{flex-direction:column; align-items:flex-start; gap:18px} }

/* ---------- lead card (asymmetric) ---------- */
.lead-card{display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-bottom:34px}
.lead-media{display:block; overflow:hidden}
.lead-media img{width:100%; height:100%; min-height:320px; object-fit:cover; transition:transform .6s var(--ease)}
.lead-card:hover .lead-media img{transform:scale(1.035)}
.lead-body{padding:38px 40px; display:flex; flex-direction:column; justify-content:center}
.lead-flag{text-transform:uppercase; letter-spacing:.18em; font-size:11.5px; color:var(--accent); font-weight:700; margin-bottom:16px}
.lead-title{font-family:var(--display); font-size:clamp(26px,3.2vw,38px); line-height:1.1; margin-bottom:14px}
.lead-title a{color:var(--primary)} .lead-title a:hover{color:var(--accent)}
.lead-excerpt{color:var(--secondary); font-size:17px; margin:0 0 26px}
.lead-foot{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.lead-meta{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--secondary)}
.lead-meta svg{flex:none}
@media(max-width:820px){ .lead-card{grid-template-columns:1fr} .lead-media img{min-height:230px} .lead-body{padding:30px 26px} }

/* ---------- support grid (uneven 2-up) ---------- */
.support-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px}
.support-grid .post-card:nth-child(odd){margin-top:0}
.support-grid .post-card:nth-child(even){margin-top:38px}
.post-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.pc-media{display:block; overflow:hidden}
.pc-media img{width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .6s var(--ease)}
.post-card:hover .pc-media img{transform:scale(1.04)}
.pc-body{padding:24px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1}
.pc-pill{align-self:flex-start; text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700;
  color:var(--secondary); border:1px solid var(--line); padding:4px 10px; border-radius:var(--radius)}
.pc-title{font-family:var(--display); font-size:24px; line-height:1.15}
.pc-title a{color:var(--primary)} .pc-title a:hover{color:var(--accent)}
.pc-excerpt{color:var(--secondary); font-size:15.5px; margin:0; flex:1}
.pc-meta{display:flex; gap:16px; font-size:12.5px; color:var(--secondary); padding-top:8px; border-top:1px solid var(--line-2)}
.pc-meta span{display:inline-flex; align-items:center; gap:6px}
.pc-meta svg{flex:none}
@media(max-width:760px){ .support-grid{grid-template-columns:1fr; gap:24px}
  .support-grid .post-card:nth-child(even){margin-top:0} }

/* ---------- pillars / values ---------- */
.pillar-grid,.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.value-grid{grid-template-columns:repeat(4,1fr)}
.pillar,.value{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; box-shadow:var(--shadow-sm)}
.pillar-ico,.svc-ico{display:grid; place-items:center; width:48px; height:48px; border-radius:var(--radius);
  background:var(--amber-soft); color:var(--accent); margin-bottom:18px}
.pillar-ico svg,.svc-ico svg,.member svg{display:block}
.pillar h3,.value h3{font-family:var(--display); font-size:22px; margin-bottom:10px}
.pillar p,.value p{color:var(--secondary); font-size:15.5px; margin:0}
@media(max-width:880px){ .pillar-grid{grid-template-columns:1fr} .value-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .value-grid{grid-template-columns:1fr} }

/* ---------- resources blogroll ---------- */
.resources{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.res-inner{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start}
.res-grid{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.reslink{display:flex; flex-direction:column; gap:4px; background:var(--bg); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--radius); padding:16px 20px; transition:transform .2s var(--ease)}
.reslink:hover{transform:translateX(4px)}
.reslink a{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--primary)}
.reslink a:hover{color:var(--accent)}
.reslink a svg{flex:none; color:var(--accent)}
.reslink-from{font-size:12px; color:var(--secondary); padding-left:26px}
@media(max-width:820px){ .res-inner{grid-template-columns:1fr; gap:30px} }

/* ---------- cta band ---------- */
.cta-band{background:var(--primary); color:var(--bg)}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:34px; padding:60px 28px; flex-wrap:wrap}
.cta-h{font-family:var(--display); font-size:clamp(26px,3.6vw,40px); color:var(--bg)}
.cta-sub{color:rgba(246,243,236,.74); margin:12px 0 0; font-size:17px}
@media(max-width:680px){ .cta-inner{flex-direction:column; align-items:flex-start} }

/* ---------- page hero (inner) ---------- */
.page-hero{padding:74px 0 30px; border-bottom:1px solid var(--line-2)}
.page-title{font-family:var(--display); font-size:clamp(34px,5.4vw,64px); line-height:1.04; letter-spacing:-.4px; color:var(--primary)}
.page-lede{font-size:19px; color:var(--secondary); max-width:62ch; margin:26px 0 0; line-height:1.6}

/* ---------- about story ---------- */
.story-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center}
.story-fig{margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); position:relative}
.story-fig img{width:100%; aspect-ratio:16/9; object-fit:cover}
.story-fig figcaption{position:absolute; left:0; bottom:0; right:0; padding:10px 14px; font-size:11px;
  text-transform:uppercase; letter-spacing:.14em; color:var(--bg); background:linear-gradient(0deg, rgba(26,23,20,.78), transparent)}
.story-copy p{color:var(--secondary); margin:18px 0 0; max-width:62ch}
.story-copy .accent-rule{margin-bottom:8px}
@media(max-width:880px){ .story-grid{grid-template-columns:1fr; gap:30px} }

/* ---------- team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.member{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow-sm)}
.member-mono{display:block; text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--accent); font-weight:700; margin-bottom:14px}
.member h3{font-family:var(--display); font-size:24px; margin-bottom:10px}
.member p{color:var(--secondary); font-size:15.5px; margin:0}
@media(max-width:880px){ .team-grid{grid-template-columns:1fr} }

/* ---------- services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.svc{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow-sm)}
.svc-tag{display:inline-block; text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--secondary); font-weight:700; margin-bottom:8px}
.svc-h{font-family:var(--display); font-size:26px; margin-bottom:12px}
.svc-copy{color:var(--secondary); font-size:16px; margin:0 0 18px}
.svc-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.svc-list li{display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--primary)}
.svc-list li svg{flex:none; color:var(--accent); margin-top:3px}
@media(max-width:820px){ .svc-grid{grid-template-columns:1fr} }

/* ---------- process ---------- */
.step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px}
.step{border-top:3px solid var(--accent); padding:22px 4px 0}
.step-n{font-family:var(--mono); font-size:26px; color:var(--accent); font-weight:700; display:block; margin-bottom:10px}
.step h3{font-family:var(--display); font-size:21px; margin-bottom:8px}
.step p{color:var(--secondary); font-size:15px; margin:0}
@media(max-width:880px){ .step-grid{grid-template-columns:repeat(2,1fr); gap:28px 22px} }
@media(max-width:480px){ .step-grid{grid-template-columns:1fr} }

/* ---------- testimonials ---------- */
.testimonials{background:var(--paper); border-top:1px solid var(--line)}
.tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.tcard{margin:0; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; position:relative; box-shadow:var(--shadow-sm)}
.tquote{position:absolute; top:18px; right:20px; color:var(--amber-soft); color:rgba(188,122,9,.22)}
.tquote svg{display:block}
.tstars{display:flex; gap:3px; color:var(--accent); margin-bottom:14px}
.tcard blockquote{margin:0 0 20px; font-size:16.5px; line-height:1.6; color:var(--primary)}
.tcard figcaption{display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line-2); padding-top:14px}
.tname{font-family:var(--display); font-size:18px}
.trole{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--secondary)}
@media(max-width:880px){ .tgrid{grid-template-columns:1fr} }

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
.info-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:20px}
.info-list li{display:flex; gap:16px; align-items:flex-start}
.info-ico{display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:var(--radius); background:var(--amber-soft); color:var(--accent)}
.info-ico svg{display:block}
.info-label{display:block; text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--secondary); font-weight:700; margin-bottom:2px}
.info-list a{color:var(--primary); font-weight:500} .info-list a:hover{color:var(--accent)}
.info-note{margin-top:28px; color:var(--secondary); font-size:15px}
.info-note a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.contact-form-wrap{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:36px 36px 40px; box-shadow:var(--shadow)}
.form-intro{text-transform:uppercase; letter-spacing:.18em; font-size:11.5px; color:var(--secondary); font-weight:700; margin:0 0 20px}
.field{margin-bottom:20px}
.field label{display:block; font-weight:700; font-size:14.5px; margin-bottom:8px; color:var(--primary)}
.field input,.field textarea{width:100%; font-family:var(--body); font-size:16px; color:var(--primary);
  background:var(--bg); border:1.5px solid var(--line); border-radius:var(--radius); padding:13px 15px; transition:border-color .2s, box-shadow .2s}
.field textarea{resize:vertical; min-height:130px}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(188,122,9,.16)}
.field input::placeholder,.field textarea::placeholder{color:rgba(74,68,59,.55)}
.form-thanks{margin:18px 0 0; padding:14px 16px; background:var(--amber-soft); border:1px solid rgba(188,122,9,.3);
  border-radius:var(--radius); color:var(--primary); font-size:15px}
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:32px} .contact-form-wrap{padding:28px 24px 32px} }

/* ---------- article ---------- */
.article{padding:54px 0 30px}
.art-head{max-width:var(--col); margin:0 auto}
.back-link{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--secondary); margin-bottom:24px}
.back-link svg{transform:rotate(180deg)} .back-link:hover{color:var(--accent)}
.art-title{font-family:var(--display); font-size:clamp(32px,5vw,54px); line-height:1.06; letter-spacing:-.3px; color:var(--primary); margin-bottom:4px}
.art-dek{font-size:19px; color:var(--secondary); margin:22px 0 24px; line-height:1.6}
.art-meta{list-style:none; display:flex; flex-wrap:wrap; gap:22px; padding:18px 0 0; margin:0; border-top:1px solid var(--line)}
.art-meta li{display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.06em; color:var(--secondary); text-transform:uppercase}
.art-meta svg{flex:none; color:var(--accent)}
.art-figure-wrap{margin:40px auto}
.art-figure{margin:0; max-width:980px; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.art-figure img{width:100%; aspect-ratio:16/9; object-fit:cover}

.art-body-wrap{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:54px; align-items:start; max-width:1000px; margin:0 auto; padding-top:10px}
.art-body{max-width:var(--col); font-size:18px; line-height:1.78; color:var(--primary)}
.art-body > *{margin:0 0 1.25em}
.art-body p{color:#26221d}
.art-body h2{font-family:var(--display); font-size:clamp(26px,3.4vw,34px); line-height:1.16; margin:1.9em 0 .5em; padding-top:.2em; color:var(--primary)}
.art-body h2::after{content:""; display:block; width:44px; height:3px; background:var(--accent); margin-top:14px}
.art-body h3{font-family:var(--body); font-weight:700; font-size:21px; margin:1.6em 0 .4em; color:var(--primary)}
.art-body a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; font-weight:500}
.art-body a:hover{text-decoration-thickness:2px}
.art-body strong{font-weight:700; color:var(--primary)}
.art-body em{font-style:italic}
.art-body ul{padding-left:1.2em} .art-body li{margin:.4em 0}
.art-body img{border-radius:var(--radius); border:1px solid var(--line); margin:1.6em auto; box-shadow:var(--shadow-sm); width:100%; height:auto}
.art-body p:has(> img){margin-left:0; margin-right:0}
.art-body table{width:100%; border-collapse:collapse; font-size:15.5px; margin:1.6em 0; border:1px solid var(--line)}
.art-body th,.art-body td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.art-body th{background:var(--paper); font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; color:var(--secondary)}
.art-body section{margin:0}
.art-body section h2{margin-top:1.4em}
.art-body section h3{font-family:var(--display); font-weight:400; font-size:22px; margin:1.4em 0 .3em}
.art-body section[itemtype]{background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:6px 20px; margin:14px 0}
/* FAQ readability: the bare <section> answers after each h3 */
.art-body section:not([itemtype]):not(:has(h2)){color:#3a352e; font-size:16.5px; margin:.2em 0 1em; padding-left:2px}

.art-aside{position:sticky; top:96px; display:grid; gap:22px}
.aside-block{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px}
.aside-h{text-transform:uppercase; letter-spacing:.18em; font-size:11.5px; color:var(--secondary); font-weight:700; margin:0 0 14px}
.res-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.res-list li{display:flex; align-items:center; gap:9px; font-size:15px}
.res-list li svg{flex:none; color:var(--accent)}
.res-list a{color:var(--primary); font-weight:500; text-decoration:underline; text-underline-offset:3px}
.res-list a:hover{color:var(--accent)}
.aside-cta{background:var(--primary); color:var(--bg); border-color:var(--primary)}
.aside-tag{color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:700; margin:0 0 10px}
.aside-copy{color:rgba(246,243,236,.82); font-size:15px; margin:0 0 18px}
.aside-cta .btn-fill{width:100%; justify-content:center}
@media(max-width:920px){ .art-body-wrap{grid-template-columns:1fr; gap:36px}
  .art-aside{position:static; grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .art-aside{grid-template-columns:1fr} }

/* ---------- related ---------- */
.related{background:var(--paper); border-top:1px solid var(--line)}
.rel-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:40px}
.rel-card{display:flex; flex-direction:column; gap:12px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 28px; transition:transform .2s var(--ease), box-shadow .2s; box-shadow:var(--shadow-sm)}
.rel-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.rel-pill{text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--secondary); font-weight:700}
.rel-title{font-family:var(--display); font-size:24px; line-height:1.16; color:var(--primary)}
.rel-go{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--accent); margin-top:auto}
.rel-go svg{flex:none}
@media(max-width:760px){ .rel-grid{grid-template-columns:1fr} }

/* ---------- footer ---------- */
.site-foot{background:var(--primary); color:var(--bg); padding:60px 0 30px; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px}
.foot-brand .brand-name{color:var(--bg)}
.foot-tag{color:rgba(246,243,236,.66); font-size:15px; margin:14px 0 14px; max-width:42ch}
.foot-meta{font-size:12px; letter-spacing:.1em; color:rgba(246,243,236,.5); text-transform:uppercase}
.foot-h{text-transform:uppercase; letter-spacing:.18em; font-size:11.5px; color:var(--accent); font-weight:700; margin:0 0 16px}
.foot-col{display:flex; flex-direction:column; gap:10px}
.foot-col a,.foot-static{color:rgba(246,243,236,.78); font-size:15px}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:22px;
  border-top:1px solid rgba(246,243,236,.14); font-size:12px; letter-spacing:.08em; color:rgba(246,243,236,.55); text-transform:uppercase}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr; gap:30px} .foot-brand{grid-column:1/-1} .foot-bottom{flex-direction:column; gap:8px} }

/* ---------- reveal / motion ----------
   Hidden states are gated behind html.js so content is always visible
   before/without JS. JS adds .js synchronously, then animates in. */
.js .reveal{opacity:0; transform:translateY(24px)}
.js .is-in{opacity:1; transform:none}
.js [data-hero]{opacity:0; transform:translateY(18px)}
.js .hero-loaded [data-hero],
.hero-loaded [data-hero]{opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease)}
.hero-loaded [data-hero]:nth-child(2){transition-delay:.08s}
.hero-loaded [data-hero]:nth-child(3){transition-delay:.16s}
.hero-loaded [data-hero]:nth-child(4){transition-delay:.24s}
.hero-loaded .hero-card[data-hero]{transition-delay:.12s}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal,[data-hero]{opacity:1 !important; transform:none !important}
}
html{scroll-behavior:smooth}