/*
Theme Name: Alsayed 2026
Theme URI: https://hishamelsayed.com/
Author: Hisham Alsayed
Description: Dark editorial theme for an executive personal site. Bodoni Moda display type against IBM Plex Sans and Mono, with first-class Arabic support. Career, Services and Projects are managed as post types in the WordPress admin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alsayed
*/

:root{
  --ground:#080C0E;
  --panel:#0F1518;
  --panel-2:#131C1F;
  --line:#1E2A2E;
  --line-soft:#162023;
  --brass:#C79A4E;
  --brass-dim:#8A6A34;
  --bone:#EDE8DF;
  --muted:#8B9A9C;
  --measure:64ch;
  --pad:clamp(1.25rem,5vw,4rem);
  --maxw:1180px;
  --fs-display:clamp(2.9rem,9vw,6.2rem);
  --fs-h2:clamp(1.6rem,3.4vw,2.6rem);
  --fs-h3:clamp(1.05rem,1.6vw,1.3rem);
  --fs-body:clamp(0.98rem,1.05vw,1.06rem);
  --fs-small:0.82rem;
  --fs-micro:0.7rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--bone);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs-body);font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--brass);color:#0A0E10}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:99;background:var(--brass);color:#0A0E10;padding:.6rem 1rem}

/* ---------- atoms ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:0}
.eyebrow.dim{color:var(--muted)}
.lede{max-width:var(--measure);color:#CFCCC4;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.7}
.prose{max-width:var(--measure);color:#C6C3BB}
.prose p{margin:0 0 1.1rem}
.prose a{color:var(--brass)}
.prose ul,.prose ol{padding-left:1.15rem}
.prose li::marker{color:var(--brass-dim)}
.prose blockquote{margin:1.5rem 0;padding-left:1.2rem;border-left:2px solid var(--brass-dim);color:var(--muted);font-style:italic}
.prose img{margin:1.5rem 0}
.prose h2,.prose h3{margin:2rem 0 .6rem}

h1,h2,h3,h4{text-wrap:balance;margin:0;font-weight:400}
h2.section-title{font-family:"Bodoni Moda",Georgia,serif;font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.01em}
h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.01em}

.section{padding-block:clamp(3rem,7vw,5.5rem)}
.section-head{display:flex;flex-direction:column;gap:.6rem;margin-bottom:clamp(1.6rem,3vw,2.6rem)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(8,12,14,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{font-family:"Bodoni Moda",Georgia,serif;font-size:1.05rem;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.brand em{font-style:normal;color:var(--brass)}
.nav ul{display:flex;gap:clamp(.9rem,2vw,1.9rem);align-items:center;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.nav ul::-webkit-scrollbar{display:none}
.nav a{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding-block:.4rem;white-space:nowrap;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease;display:inline-block}
.nav a:hover{color:var(--bone)}
.nav .current-menu-item>a,.nav .current_page_item>a,.nav .current-menu-parent>a{color:var(--bone);border-bottom-color:var(--brass)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.5rem,7vw,5rem) clamp(2rem,4vw,3rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.hero h1{font-family:"Bodoni Moda",Georgia,serif;font-size:var(--fs-display);line-height:.92;letter-spacing:-.02em;margin:.9rem 0 0}
.hero h1 span{display:block}
.hero h1 .last{color:var(--brass)}
.hero-sub{margin-top:1.4rem;max-width:52ch;color:#CFCCC4;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.6}
.roles{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.5rem;list-style:none;padding:0}
.roles li{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:.4rem .65rem}

.portrait{position:relative;width:clamp(190px,26vw,270px);aspect-ratio:4/5;flex:none;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;overflow:hidden}
/* A soft foot only, so the photo keeps its own colour and sits on the dark ground. */
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,12,14,0) 58%,rgba(8,12,14,.5) 100%)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.monogram{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(2.6rem,5vw,3.6rem);color:var(--brass);letter-spacing:.04em}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:1.35rem 0 1.4rem;border-left:1px solid var(--line-soft);padding-left:1.2rem}
.fact:first-child{border-left:0;padding-left:0}
.fact .n{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--bone);line-height:1.1}
.fact .n small{font-size:.55em;color:var(--brass);margin-left:.15em}
.fact .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.45rem}

/* ---------- capability list ---------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0}
.cap{padding:1.5rem 1.5rem 1.6rem 0;border-top:1px solid var(--line-soft);display:flex;gap:1rem;align-items:flex-start}
.cap .mark{width:7px;height:7px;background:var(--brass);margin-top:.62rem;flex:none;transform:rotate(45deg)}
.cap p{margin:.45rem 0 0;color:var(--muted);font-size:.92rem;line-height:1.6;max-width:46ch}

/* ---------- timeline ---------- */
.tl{border-top:1px solid var(--line)}
.tl-item{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--line-soft)}
.tl-when{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:.8rem;letter-spacing:.06em;color:var(--brass);padding-top:.35rem}
.tl-when .co{display:block;color:var(--muted);margin-top:.4rem;letter-spacing:.02em}
.tl-body p{margin:.6rem 0 0;color:#C0BDB6;max-width:var(--measure)}
.tl-body ul{margin:.9rem 0 0;padding-left:1.05rem;color:var(--muted);max-width:var(--measure)}
.tl-body li{margin-block:.3rem}
.tl-body li::marker{color:var(--brass-dim)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border-top:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{text-align:left;padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--line-soft);vertical-align:baseline}
th{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
td{font-size:.94rem;color:#C9C6BE}
td.val,th.val{text-align:right;padding-right:0}
td.val{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--brass);white-space:nowrap}
tfoot td{border-bottom:0;color:var(--bone);padding-top:1.1rem}

/* ---------- definition rows ---------- */
.dl{border-top:1px solid var(--line)}
.dl-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:clamp(1rem,3vw,2rem);padding-block:1.15rem;border-bottom:1px solid var(--line-soft)}
.dl-row .yr{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--brass);font-size:.82rem;padding-top:.15rem}
.dl-row .what strong{font-weight:500;color:var(--bone)}
.dl-row .what span{display:block;color:var(--muted);font-size:.88rem;margin-top:.25rem}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.chips li{border:1px solid var(--line);padding:.5rem .8rem;font-size:.84rem;color:#C4C1BA;background:var(--panel)}

/* ---------- projects ---------- */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.project{background:var(--panel);padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;transition:background .2s ease}
.project:hover{background:var(--panel-2)}
.project .tag{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.project p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.project .meta{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line-soft);font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--muted);letter-spacing:.06em}

/* ---------- writing ---------- */
.post-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);padding-block:2rem;border-bottom:1px solid var(--line-soft)}
.post-row:first-of-type{border-top:1px solid var(--line)}
.post-row .date{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--brass);padding-top:.4rem}
.post-row h3{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:400;line-height:1.25}
.post-row h3 a{text-decoration:none}
.post-row h3 a:hover{color:var(--brass)}
.post-row p{margin:.6rem 0 0;color:var(--muted);max-width:var(--measure)}

/* Arabic / RTL content */
[dir="rtl"],.is-rtl{direction:rtl;text-align:right}
.is-rtl h1,.is-rtl h2,.is-rtl h3,.is-rtl p,.is-rtl li{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;font-weight:400}
.is-rtl h3{line-height:1.6}
.is-rtl .date{direction:ltr;text-align:right}
.is-rtl.post-row{grid-template-columns:minmax(0,1fr) 120px}
.is-rtl .prose{margin-inline-start:auto}
.is-rtl .prose ul,.is-rtl .prose ol{padding-left:0;padding-right:1.15rem}

/* single post */
.entry-header{border-bottom:1px solid var(--line);padding-bottom:1.6rem;margin-bottom:2rem}
.entry-title{font-family:"Bodoni Moda",Georgia,serif;font-size:var(--fs-h2);line-height:1.1;margin-top:.7rem}
.is-rtl .entry-title{font-family:"IBM Plex Sans Arabic",sans-serif;line-height:1.5}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(2rem,5vw,4rem);align-items:start}
label{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.5rem}
input[type=text],input[type=email],input[type=tel],input[type=url],textarea,select{
  width:100%;background:var(--panel);border:1px solid var(--line);color:var(--bone);
  font-family:inherit;font-size:.95rem;padding:.8rem .9rem;border-radius:0;
}
input:focus,textarea:focus{border-color:var(--brass-dim);outline:none}
textarea{min-height:140px;resize:vertical}
.wpcf7 form>div,.wpcf7 p{margin:0 0 1.1rem}
.wpcf7 .wpcf7-response-output{border:1px solid var(--line);padding:.8rem 1rem;color:var(--muted);font-size:.88rem;margin:1rem 0 0}
.wpcf7-not-valid-tip{color:#E0946B;font-size:.8rem;margin-top:.35rem}
input[type=submit],.btn,button[type=submit]{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding:.85rem 1.5rem;border:1px solid var(--brass);color:var(--brass);background:transparent;
  cursor:pointer;transition:background .18s ease,color .18s ease;width:auto;
}
input[type=submit]:hover,.btn:hover,button[type=submit]:hover{background:var(--brass);color:#0A0E10}
.btn.solid{background:var(--brass);color:#0A0E10}
.btn.solid:hover{background:var(--bone);border-color:var(--bone)}
.btn.ghost{border-color:var(--line);color:var(--bone)}
.btn.ghost:hover{background:var(--panel-2)}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.detail-list{border-top:1px solid var(--line);margin:0}
.detail-list>div{padding-block:1rem;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.detail-list dt{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.detail-list dd{margin:0;font-size:.92rem}

/* ---------- pagination / footer ---------- */
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2.5rem;font-family:"IBM Plex Mono",monospace;font-size:.78rem}
.pagination .page-numbers{border:1px solid var(--line);padding:.5rem .8rem;text-decoration:none;color:var(--muted)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{color:var(--brass);border-color:var(--brass-dim)}
.site-footer{border-top:1px solid var(--line);margin-top:clamp(3rem,7vw,5rem)}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:2.2rem var(--pad) 3rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.foot-inner a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.foot-inner a:hover{color:var(--brass);border-color:var(--brass-dim)}

@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .portrait-block{order:-1}
  .tl-item,.dl-row,.post-row,.is-rtl.post-row{grid-template-columns:1fr;gap:.5rem}
  .fact{border-left:0;padding-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* admin bar offset */
body.admin-bar .topbar{top:32px}
@media screen and (max-width:782px){body.admin-bar .topbar{top:46px}}

/* ---------- language switcher ---------- */
.lang-switch{display:flex;align-items:center;gap:.5rem;flex:none;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.18em}
.lang-switch .lang{color:var(--muted);text-decoration:none;padding:.25rem .1rem;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.lang-switch a.lang:hover{color:var(--bone)}
.lang-switch .is-current{color:var(--brass);border-bottom-color:var(--brass-dim)}
.lang-switch .lang+.lang::before{content:"/";color:var(--line);margin-right:.5rem}
@media (max-width:760px){.topbar-inner{flex-wrap:wrap;gap:.6rem;padding-block:.6rem}}