/* ===== Jasim CP — shared inner-page layer (loads after each page's inline CSS) ===== */
html{ scroll-padding-top:92px; }
::selection{ background:rgba(242,193,78,.35); color:#fff; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }
picture{ display:contents; }

/* ---- header ---- */
header.site-head{ transition:background .3s ease, box-shadow .3s ease; }
header.site-head.scrolled{ background:rgba(12,10,9,.94); box-shadow:0 12px 30px -22px rgba(0,0,0,.7); }
header.site-head nav.wrap{ max-width:1120px; gap:1.4rem; }
.navlinks{ display:flex; gap:1.7rem; font-size:.9rem; margin-left:auto; margin-right:.4rem; }
.navlinks a{ position:relative; color:var(--text-dim); text-decoration:none; padding:4px 0; transition:color .25s; }
.navlinks a:hover, .navlinks a[aria-current="page"]{ color:var(--text); }
.navlinks a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.navlinks a:hover::after, .navlinks a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-cta{ flex:none; background:var(--accent); color:#0c0a09 !important; font-weight:700; font-size:.84rem; padding:.55rem 1.1rem; border-radius:999px; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease; }
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(242,193,78,.7); }
@media (max-width:820px){ .navlinks{ display:none; } header.site-head nav.wrap{ justify-content:space-between; } }

/* ---- article typography ---- */
article > p:first-of-type{ font-size:1.14rem; line-height:1.7; color:var(--text); }
article > p:first-of-type strong{ font-weight:600; }
article h2{ scroll-margin-top:96px; line-height:1.3; }
article a{ text-decoration-thickness:1px; }
article table.compare-table{ border-radius:12px; overflow:hidden; border-collapse:separate; border-spacing:0; }
article table.compare-table th, article table.compare-table td{ border-width:0 0 1px 0; }
article table.compare-table tr:last-child td{ border-bottom:0; }
.meta .updated{ color:var(--teal); flex-basis:100%; }
.brand{ color:var(--text); text-decoration:none; }
.brand span{ color:var(--accent); }

/* ---- table of contents ---- */
.toc{ margin-top:2rem; padding:1.1rem 1.3rem 1.2rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.toc-title{ font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--text); }
.toc ol{ list-style:none; margin-top:.7rem; display:grid; gap:.1rem; counter-reset:t; }
.toc li{ counter-increment:t; }
.toc a{ display:flex; gap:.7rem; padding:.28rem 0; font-size:.9rem; line-height:1.4; color:var(--text-dim); text-decoration:none; transition:color .2s ease; }
.toc a::before{ content:counter(t,decimal-leading-zero); font-family:var(--display); font-size:.74rem; font-weight:600; color:var(--teal); padding-top:.12rem; min-width:1.4rem; }
.toc a:hover, .toc a.active{ color:var(--accent); }
@media (min-width:1440px){
  .toc{ position:fixed; top:112px; left:calc(50% - 380px - 285px); width:250px; margin:0; max-height:calc(100vh - 150px); overflow:auto; background:rgba(26,22,19,.55); backdrop-filter:blur(8px); z-index:20; transition:opacity .3s ease; }
  .toc.hide{ opacity:0; pointer-events:none; }
}

/* ---- author card ---- */
.author-card{ margin-top:2.6rem; display:flex; gap:1.2rem; align-items:center; padding:1.3rem 1.4rem; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg, rgba(26,22,19,.9), rgba(19,16,14,.9)); }
.author-card img{ flex:none; width:84px; height:84px; border-radius:50%; object-fit:cover; object-position:50% 14%; border:2px solid var(--accent); }
.ac-name{ font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--text); }
.ac-bio{ margin-top:.35rem; font-size:.9rem; line-height:1.55; color:var(--text-dim); }
.ac-links{ margin-top:.55rem; font-size:.85rem; display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width:560px){ .author-card{ flex-direction:column; align-items:flex-start; } }

/* ---- related cards ---- */
.related-cards{ margin-top:2.6rem; }
.related-cards h2{ font-family:var(--display); font-size:1.15rem; font-weight:700; }
.rc-grid{ margin-top:1rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; }
.rc{ display:flex; flex-direction:column; gap:.5rem; padding:1.1rem 1.15rem 1.2rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
.rc:hover{ transform:translateY(-4px); border-color:rgba(242,193,78,.45); }
.rc-tag{ font-family:var(--display); font-size:.72rem; font-weight:700; color:var(--teal); }
.rc-title{ font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.3; color:var(--text); }
.rc-desc{ font-size:.84rem; line-height:1.5; color:var(--text-dim); }
@media (max-width:760px){ .rc-grid{ grid-template-columns:1fr; } }

/* ---- footer ---- */
footer.site-foot{ text-align:left; margin-top:0; padding:2.6rem 0 0; background:var(--bg-alt); }
.foot-grid{ max-width:1120px; margin:0 auto; padding:0 clamp(22px,5vw,60px) 2rem; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.foot-brand{ font-family:var(--display); font-weight:700; font-size:1.2rem; color:var(--text); }
.foot-brand span{ color:var(--accent); }
.foot-tag{ margin-top:.7rem; font-size:.88rem; line-height:1.6; color:var(--text-dim); max-width:300px; }
.foot-col .fh{ font-family:var(--display); font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:.8rem; }
.foot-col a{ display:block; margin-bottom:.55rem; font-size:.88rem; color:var(--text-dim); text-decoration:none; transition:color .2s ease, transform .2s ease; }
.foot-col a:hover{ color:var(--accent); transform:translateX(3px); }
.foot-bottom{ border-top:1px solid var(--line); padding:1.1rem 0; text-align:center; font-size:.82rem; color:var(--text-dim); }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ---- About page ---- */
.path{ margin-top:1.6rem; display:grid; gap:0; border-left:2px solid var(--line); margin-left:.4rem; }
.path-item{ position:relative; padding:0 0 1.6rem 1.5rem; }
.path-item::before{ content:''; position:absolute; left:-7px; top:.45rem; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); }
.path-item:last-child{ padding-bottom:0; }
.path-year{ font-family:var(--display); font-weight:700; color:var(--accent); font-size:.95rem; }
.path-role{ font-family:var(--display); font-weight:700; color:var(--text); font-size:1.05rem; margin-top:.15rem; }
.path-item p{ margin-top:.35rem !important; font-size:.96rem; }
.photo-strip{ margin-top:1.6rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.photo-strip figure{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); aspect-ratio:3/4; background:var(--surface); }
.photo-strip img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.photo-strip figure:hover img{ transform:scale(1.06); }
.photo-strip figcaption{ position:absolute; inset:auto 0 0 0; padding:1.4rem .7rem .6rem; font-size:.72rem; line-height:1.35; color:#fff; background:linear-gradient(transparent, rgba(6,5,4,.88)); }
@media (max-width:700px){ .photo-strip{ grid-template-columns:repeat(2,1fr); } }
.chips{ margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.55rem; }
.chips a, .chips span{ padding:.45rem .9rem; border:1px solid var(--line); border-radius:999px; font-size:.86rem; color:var(--text-dim); text-decoration:none; background:var(--surface); transition:border-color .25s, color .25s; }
.chips a:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- Contact page ---- */
.ct-grid{ margin-top:1.6rem; display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.ct-card{ display:flex; flex-direction:column; gap:.3rem; padding:1.15rem 1.2rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.ct-card:hover{ transform:translateY(-3px); border-color:rgba(242,193,78,.5); }
.ct-label{ font-family:var(--display); font-size:.74rem; font-weight:700; color:var(--teal); }
.ct-value{ font-family:var(--display); font-weight:700; color:var(--text); font-size:1rem; word-break:break-word; }
.ct-note{ font-size:.82rem; color:var(--text-dim); line-height:1.45; }
@media (max-width:620px){ .ct-grid{ grid-template-columns:1fr; } }
.composer{ margin-top:1.6rem; padding:1.5rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); display:grid; gap:1rem; }
.composer label{ display:grid; gap:.4rem; font-family:var(--display); font-weight:600; font-size:.86rem; color:var(--text); }
.composer input, .composer select, .composer textarea{ width:100%; font:inherit; font-family:var(--sans); font-size:.95rem; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:.75rem .9rem; transition:border-color .25s; }
.composer input:focus, .composer select:focus, .composer textarea:focus{ outline:none; border-color:var(--teal); }
.composer input, .composer select{ height:48px; }
.composer textarea{ min-height:120px; resize:vertical; }
.composer .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:620px){ .composer .row{ grid-template-columns:1fr; } }
.composer button{ justify-self:start; cursor:pointer; border:0; background:var(--accent); color:#0c0a09; font-weight:700; font-size:.92rem; padding:.8rem 1.4rem; border-radius:10px; font-family:var(--sans); transition:transform .25s ease, box-shadow .25s ease; }
.composer button:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(242,193,78,.8); }
.composer .hint{ font-size:.8rem; color:var(--text-dim); }

/* ---- mobile polish ---- */
.composer input, .composer select, .composer textarea{ font-size:16px; }
.breadcrumb a{ display:inline-block; padding:.55rem .15rem; }
.brand{ display:inline-flex; align-items:center; gap:.26em; min-height:44px; }
.foot-col a{ padding:.45rem 0; margin-bottom:0; }
.share-btn{ min-height:44px; }
.ac-links a, .chips a, .chips span{ min-height:40px; display:inline-flex; align-items:center; }
.rc{ min-height:44px; }
.menu-btn{ display:none; width:44px; height:44px; border-radius:50%; background:var(--surface); border:1px solid var(--line); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex:none; }
.menu-btn span{ display:block; width:18px; height:2px; background:var(--text); transition:transform .3s, opacity .3s; }
.menu-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .menu-btn.open span:nth-child(2){ opacity:0; } .menu-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.m-drawer{ position:fixed; inset:0; z-index:90; background:rgba(8,6,5,.9); backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); display:none; flex-direction:column; justify-content:center; padding:5.5rem clamp(24px,8vw,60px) 3rem; }
.m-drawer.open{ display:flex; }
.m-drawer a{ font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,7vw,2.4rem); letter-spacing:-.03em; padding:.55rem 0; border-bottom:1px solid var(--line); color:var(--text); text-decoration:none; }
@media (max-width:820px){ .menu-btn{ display:flex; } .nav-cta{ display:none; } header.site-head nav.wrap{ justify-content:space-between; } }
@media (max-width:560px){ .toc{ padding:1rem 1.1rem; } .meta{ gap:.35rem; } }
/* ---- liquid glass ---- */
.glass{ position:relative; background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); backdrop-filter:blur(18px) saturate(1.7); -webkit-backdrop-filter:blur(18px) saturate(1.7); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.05), 0 24px 50px -26px rgba(0,0,0,.85); }
header.site-head.scrolled{ background:rgba(12,10,9,.62); backdrop-filter:blur(18px) saturate(1.7); -webkit-backdrop-filter:blur(18px) saturate(1.7); }
.toc{ background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6); border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }
.author-card{ background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }

/* v8 */
header.site-head.scrolled{ background:linear-gradient(135deg, rgba(255,246,226,.1), rgba(12,10,9,.78)); -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6); border-bottom:1px solid rgba(255,240,210,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px -26px rgba(0,0,0,.9); }
.toc{ -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); background:linear-gradient(135deg, rgba(255,246,226,.09), rgba(255,246,226,.025)); border:1px solid rgba(255,240,210,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.author-card, .cta-box{ border:1px solid rgba(255,240,210,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.rc-tag, .ct-label{ font-size:max(.74rem,12.5px); }
.photo-strip figcaption{ font-size:max(.74rem,12.5px); }
.foot-col a{ display:flex; align-items:center; min-height:44px; margin-bottom:0; }
.foot-bottom a{ display:inline-flex; align-items:center; min-height:44px; }
.ac-links a, .breadcrumb a{ display:inline-flex; align-items:center; min-height:40px; }
.share-btn{ min-height:44px; }
.toc a{ min-height:40px; align-items:center; }
.faq-q{ min-height:56px; }
@media (max-width:820px){
  header.site-head nav.wrap{ gap:.8rem; }
}
.meta a{ display:inline-block; padding:.5rem .15rem; margin:-.5rem 0; }
.breadcrumb a{ padding-inline:.35rem; margin-inline:-.35rem; }
@media (max-width:640px){
  .composer input, .composer select, .composer textarea{ font-size:16px; }
  .composer button{ width:100%; justify-self:stretch; min-height:50px; }
  .ct-card{ min-height:92px; }
  main{ padding-top:36px; }
  article{ font-size:1.02rem; }
  .compare-table{ font-size:.9rem; }
}
.js-ready .content-el{ will-change:transform, opacity; }
@media (prefers-reduced-motion: reduce){ header.site-head.scrolled{ transition:none; } }