/* Elephant · Figma Make homepage adapter · 2026-10-08
   Source: Figma Make 6Aubf4fKJz8cMzvSIH5bdd
   Scope: personalWebsite homepage; existing FastAPI/Jinja, Authorizer, SEO and live publications remain authoritative. */
:root[data-figma-homepage] {
  --max:1440px; --gutter:clamp(18px,3.25vw,72px); --anchor-offset:84px;
  --bronze:#a57945; --burgundy:#740d32; --rose:#edbfd0;
}
:root[data-figma-homepage][data-theme="dark"] {
  --paper:#211d20;--surface:#2b2428;--ink:#f5efe4;--muted:#cfc2b7;
  --line:rgba(245,239,228,.18);--accent:#edbfd0;--control-border:rgba(245,239,228,.22);
}
:root[data-figma-homepage][data-theme="light"] {
  --paper:#f5efe4;--surface:#fffdf8;--ink:#272727;--muted:#61584f;
  --line:rgba(39,39,39,.18);--accent:#740d32;--control-border:rgba(39,39,39,.22);
}
body { min-width:320px;font-size:15px;line-height:1.85; }
.site-header,main,.site-footer { width:min(calc(100% - 6.5vw),1440px);max-width:1440px; }
.site-header {
  height:86px;padding:0;column-gap:32px;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"brand nav tools";border-bottom:1px solid var(--line);
}
.header-brand-row { display:flex;grid-area:brand;align-items:center;min-width:0; }
.brand-link { gap:12px; }
.brand-symbol {
  width:42px;height:42px;flex:0 0 42px;padding:3px;
  display:grid;place-items:center;background:#f9f9fb;border:1px solid rgba(165,121,69,.58);
}
.brand-mark{width:34px;height:34px;object-fit:contain;}
:root[data-figma-homepage][data-theme="dark"] .mark-on-light{display:block;}
:root[data-figma-homepage][data-theme="dark"] .mark-on-dark{display:none;}
.site-header .brand-link b { font-size:13px;font-weight:600;line-height:1.4; }
.site-header .brand-link small { font-size:9px;line-height:1.55;max-width:36ch; }
.site-nav {
  grid-area:nav;grid-column:auto;grid-row:auto;display:flex;flex-wrap:nowrap;
  align-items:center;gap:clamp(18px,2.2vw,35px);
}
.site-nav a { min-height:40px;padding:6px 0;font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap; }
.site-nav a:hover { color:var(--ink);text-decoration:none; }
.header-tools { grid-area:tools;grid-column:auto;grid-row:auto;flex-wrap:nowrap;gap:8px;justify-self:end;justify-content:flex-end; }
.language-toggle,.theme-toggle {
  width:35px;height:35px;min-height:35px;min-width:35px;padding:0;border:1px solid var(--line);
  border-radius:0;color:var(--muted);background:transparent;
}
.theme-toggle-dot{width:15px;height:15px;}
.language-toggle-icon{display:none;}
[data-language-toggle-label]{font-size:0;}
:root[lang="ar"] [data-language-toggle-label]::after { content:"EN";font-size:10px;font-weight:600; }
:root[lang="en"] [data-language-toggle-label]::after { content:"ع";font-size:10px;font-weight:600; }
[data-theme-toggle-label]{font-size:0;}
.figma-contact-link {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:35px;padding:0 14px;margin-inline-start:5px;
  border:1px solid var(--bronze);font-size:10px;color:var(--ink);
}
.figma-contact-link:hover{background:var(--burgundy);color:#fff;}
.figma-contact-link span{color:var(--bronze);font-size:14px;}
.auth-sign-in,.auth-sign-out { min-height:35px;padding:0 10px;border:1px solid var(--line);border-radius:0;font-size:10px; }
.auth-account-label {font-size:10px;}
.section { padding:clamp(95px,11vw,165px) 0;border-bottom:0;border-top:1px solid var(--line);scroll-margin-top:84px; }
.hero {
  border:0;min-height:calc(100vh - 128px);padding:clamp(48px,7vh,82px) 0 70px;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);
  align-items:center;gap:clamp(55px,8vw,130px);
}
.hero-copy {max-width:735px;animation:figma-enter .75s ease-out both;}
.hero .eyebrow {
  max-width:unset;margin:0 0 23px;color:var(--accent);font-size:11px;
  display:flex;align-items:center;gap:12px;letter-spacing:.02em;
}
.hero .eyebrow::before{content:"";width:27px;min-width:27px;height:1px;background:var(--bronze);}
.hero h1,html[lang="en"] .hero h1 {
  font-size:clamp(53px,6.1vw,94px);line-height:1.17;font-weight:600;
  letter-spacing:-.025em;margin:0;color:var(--accent);
}
.hero-value {
  max-width:690px;margin:clamp(34px,5vh,55px) 0 0;
  font-size:clamp(20px,1.75vw,27px);line-height:1.75;font-weight:400;
}
.hero-support { max-width:620px;margin:19px 0 0;font-size:13px;line-height:2; }
.actions{margin-top:30px;gap:11px;flex-wrap:wrap;}
.button {
  min-height:50px;padding:0 20px;gap:15px;border-radius:0;
  font-size:11px;transition:transform .2s,border-color .2s,background .2s,color .2s;
}
.button:hover{transform:translateY(-2px);}
.button.primary {color:#740d32;background:#f5efe4;border-color:#f5efe4;}
.button.primary:hover{color:#fff;background:#740d32;border-color:#740d32;text-decoration:none;}
.tags {
  counter-reset:expertise;display:flex;flex-wrap:wrap;gap:12px 26px;
  margin:27px 0 0;padding:23px 0 0;border-top:1px solid var(--line);
}
.tags li{counter-increment:expertise;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9.5px;}
.tags li::before{content:"0" counter(expertise);position:static;min-width:0;height:auto;flex:none;background:none;color:var(--bronze);font-size:8px;letter-spacing:.08em;}
.hero-panel{padding:0;align-self:stretch;display:flex;min-width:0;}
.emblem-showcase{
  width:100%;min-height:min(71vh,650px);height:auto;margin:0;padding:34px 39px 28px;
  display:flex;flex-direction:column;align-items:stretch;
  position:relative;overflow:hidden;border-radius:0;color:#fff;background:#740d32;border:1px solid var(--bronze);
  animation:figma-panel .8s .12s ease-out both;
}
.emblem-showcase::before {content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.065);pointer-events:none;}
.emblem-showcase > .emblem-label,.emblem-showcase > .master-emblem,.emblem-showcase > figcaption {display:none;}
.panel-glow {position:absolute;width:320px;height:320px;inset-inline-end:-160px;top:-170px;border-radius:50%;background:rgba(255,255,255,.06);}
.panel-head{position:relative;z-index:1;min-height:37px;display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.38);font-size:8px;font-weight:600;letter-spacing:.08em;}
.panel-number{color:rgba(255,255,255,.55);}
.illustration-wrap{position:relative;flex:1;min-height:390px;display:grid;place-items:center;}
.philosophy-illustration{display:block;width:min(100%,475px);height:auto;overflow:visible;animation:figma-illustration 1s .35s ease-out both;}
.philosophy-illustration path,.philosophy-illustration circle{vector-effect:non-scaling-stroke;}
.illustration-framework{fill:none;stroke:rgba(245,239,228,.22);stroke-width:1;}
.illustration-context{fill:none;stroke:rgba(245,239,228,.75);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.illustration-context path:nth-child(n+3){stroke:rgba(245,239,228,.35);stroke-dasharray:2 5;}
.illustration-field-notes{fill:#a57945;stroke:rgba(245,239,228,.42);stroke-width:1;}
.illustration-lens{fill:none;stroke:rgba(245,239,228,.28);stroke-width:1;}
.illustration-lens circle:first-child{stroke-dasharray:2 8;}
.illustration-person{fill:#740d32;stroke:#f5efe4;stroke-width:2.2;stroke-linecap:round;}
.illustration-system{fill:#740d32;stroke:rgba(245,239,228,.9);stroke-width:1.4;stroke-linecap:round;}
.illustration-system circle{fill:#a57945;stroke:#740d32;stroke-width:5;}
.illustration-transformation{fill:none;stroke:rgba(245,239,228,.42);stroke-width:1;}
.illustration-thread{fill:none;stroke:#a57945;stroke-width:2.2;stroke-dasharray:2 7;stroke-linecap:round;animation:figma-thread 12s linear infinite;}
.illustration-index text{fill:rgba(245,239,228,.38);font-family:"IBM Plex Sans Arabic",sans-serif;font-size:9px;}
.illustration-labels text{fill:rgba(245,239,228,.75);font-family:"IBM Plex Sans Arabic",sans-serif;font-size:9px;text-anchor:end;}
.panel-caption{position:relative;z-index:2;display:flex;align-items:center;gap:15px;}
.panel-caption .caption-line{width:38px;height:1px;background:var(--bronze);flex:0 0 auto;}
.panel-caption p{max-width:240px;margin:0;color:rgba(255,255,255,.9);font-size:10.5px;line-height:1.9;}
:is(.about-header,.method-header,.selected-work-header,.inquiries-header,.latest-writing-header,.contact-header) {
  display:grid;grid-template-columns:minmax(180px,.55fr) minmax(300px,1.45fr);
  column-gap:clamp(30px,6vw,100px);align-items:start;margin-bottom:clamp(55px,7vw,100px);max-width:none;
}
:is(.about-header,.method-header,.selected-work-header,.inquiries-header,.latest-writing-header,.contact-header) > .eyebrow {
  grid-row:1/span 2;margin:8px 0 0;color:var(--accent);font-size:11px;
}
:is(.about-header,.method-header,.selected-work-header,.inquiries-header,.latest-writing-header,.contact-header) > h2 {
  max-width:850px;margin:0;font-size:clamp(34px,4.4vw,66px);font-weight:500;line-height:1.35;letter-spacing:-.02em;color:var(--ink);
}
:is(.about-lead,.method-introduction,.selected-work-introduction,.inquiries-introduction,.latest-writing-introduction,.contact-introduction) {
  grid-column:2;max-width:700px;margin:23px 0 0;color:var(--muted);font-size:15px;line-height:2;
}
.about,.latest-writing{display:block;}
.about-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(35px,5vw,80px);align-items:stretch;}
.about-story{display:block;}
.about-story>p{margin:0 0 20px;color:var(--muted);font-size:15px;line-height:2.15;}
.about-story>.about-highlight{margin:40px 0 0;padding:24px 27px;border-inline-start:2px solid var(--bronze);background:var(--surface);color:var(--ink);font-size:16px;}
.about-paths{display:block;align-self:start;margin:0;padding:0;border-top:1px solid var(--line);}
.about-paths li{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:22px 0;margin:0;border-bottom:1px solid var(--line);}
.about-path-number{font-size:9px;color:var(--bronze);}
.about-paths h3{margin:0 0 5px;font-size:15px;color:var(--ink);}
.about-paths p{font-size:11px;line-height:1.8;}
.method {
  margin:0;padding:clamp(95px,11vw,165px) clamp(18px,3.25vw,72px);
  border-radius:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 38%,transparent);
  color:var(--ink);
}
.method .eyebrow{color:var(--accent);}
.method h2,.method h3{color:var(--ink);}
.method-introduction{color:var(--muted);}
.method-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;border-block:1px solid var(--line);}
.method-steps li{min-height:325px;padding:32px clamp(25px,3vw,45px);border-top:0;border-inline-end:1px solid var(--line);}
.method-steps li:first-child{border-inline-start:1px solid var(--line);}
.method-number{font-size:11px;color:var(--bronze);margin-bottom:75px;}
.method-steps h3{font-size:21px;font-weight:500;}
.method-steps p{font-size:12px;line-height:2;color:var(--muted);}
.method-statement{border:0;margin:32px auto 0;text-align:center;color:var(--ink);font-size:15px;}
.selected-work-list{margin:0;border-top:1px solid var(--line);}
.selected-work-list>li{border-bottom:1px solid var(--line);}
.selected-work-item{display:grid;grid-template-columns:.45fr 1.15fr .7fr;gap:clamp(25px,4vw,65px);padding:40px 0;border:0;}
.selected-work-meta{display:flex;gap:18px;align-items:flex-start;}
.selected-work-number{font-size:10px;color:var(--bronze);}
.selected-work-type{margin:0;color:var(--muted);font-size:11px;}
.selected-work-main h3{max-width:600px;margin:0 0 15px;color:var(--ink);font-size:clamp(20px,2vw,28px);font-weight:500;line-height:1.5;}
.selected-work-main p,.selected-work-aside p{font-size:12px;line-height:2;color:var(--muted);}
.selected-work-aside{padding:0;border:0;gap:10px;}
.selected-work-contribution .selected-work-label{margin-bottom:8px;color:var(--bronze);font-size:9px;}
.selected-work-status{display:block;width:fit-content;padding:6px 9px;border:1px solid var(--line);color:var(--ink);font-size:9px;}
.selected-work-link{font-size:10px;color:var(--accent);text-decoration:none;min-height:35px;}
.inquiries-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;border:1px solid var(--line);background:var(--line);}
.inquiries-list li{min-width:0;background:var(--paper);}
.inquiry{min-height:335px;padding:30px;border:0;background:var(--paper);}
.inquiry-meta{display:flex;justify-content:space-between;font-size:9px;color:var(--bronze);}
.inquiry h3{margin:70px 0 17px;color:var(--ink);font-size:21px;line-height:1.65;font-weight:500;}
.inquiry-description{color:var(--muted);font-size:12px;line-height:2;}
.inquiries-statement{max-width:740px;margin:52px auto 0;text-align:center;color:var(--ink);font-size:21px;line-height:1.8;}
.latest-writing-content{width:100%;max-width:none;display:block;justify-self:stretch;}
.latest-writing-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;padding:0;border:1px solid var(--line);background:var(--line);}
.latest-writing-list>li{list-style:none;min-width:0;position:relative;display:block;}
.latest-writing-list>li::before{content:"";display:none;}
.latest-writing-item{
  width:100%;min-height:410px;padding:28px;display:flex;flex-direction:column;
  position:relative;background:var(--paper);border:0;transition:background .2s;
}
.latest-writing-item:hover{background:var(--surface);}
.latest-writing-item::before{
  content:attr(lang);display:inline-flex;align-items:center;justify-content:center;
  width:31px;height:23px;margin-bottom:38px;color:#fff;background:#740d32;
  font-size:9px;font-weight:600;text-transform:uppercase;
}
.latest-writing-meta{display:flex;flex-wrap:wrap;gap:15px;margin:0;color:var(--muted);font-size:9px;}
.latest-writing-type{color:var(--bronze);font-weight:600;}
.latest-writing-item h3{margin:18px 0 15px;font-size:clamp(18px,1.55vw,23px);font-weight:500;line-height:1.65;color:var(--ink);}
.latest-writing-item h3 a:hover{color:var(--accent);}
.latest-writing-summary{margin:0;color:var(--muted);font-size:11px;line-height:2;}
.latest-writing-all{margin:28px 0 0;color:var(--accent);font-size:11px;min-height:38px;text-decoration:none;}
.contact-layout{display:grid;grid-template-columns:1fr .75fr;gap:clamp(50px,8vw,130px);align-items:stretch;}
.contact-areas{margin:0;padding:0;}
.contact-areas li{display:block;position:relative;padding:27px 0;border-bottom:1px solid var(--line);}
.contact-area-heading{display:grid;grid-template-columns:45px 1fr;gap:14px;align-items:start;}
.contact-area-number{font-size:9px;color:var(--bronze);}
.contact-areas h3{margin:0 0 5px;color:var(--ink);font-size:15px;font-weight:600;}
.contact-areas li>p{margin:0;padding-inline-start:59px;color:var(--muted);font-size:11px;line-height:1.8;}
.contact-channel{
  margin:0;padding:clamp(28px,4vw,52px);border:1px solid var(--bronze);background:#740d32;color:#fff;
}
.contact-guidance{margin:0 0 70px;color:#fff;font-size:18px;line-height:1.9;}
.contact-channel-label{margin:0 0 7px;color:rgba(255,255,255,.65);font-size:9px;}
.contact-email{display:block;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.25);color:#fff;font-size:16px;direction:ltr;overflow-wrap:anywhere;}
.contact-action{width:fit-content;margin-top:28px;}
.site-footer{width:min(calc(100% - 6.5vw),1440px);max-width:1440px;min-height:145px;padding:30px 0;margin:0 auto;border-top:1px solid var(--line);}
.footer-upper{display:flex;align-items:center;justify-content:space-between;gap:30px;}
.footer-signature{align-items:center;}
.footer-name{font-size:12px;color:var(--ink);}
.footer-statement,.footer-copyright{font-size:9px;color:var(--muted);}
@keyframes figma-enter{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes figma-panel{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:translateX(0);}}
@keyframes figma-illustration{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes figma-thread{to{stroke-dashoffset:-90;}}
@media (max-width:1080px){
  .site-header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools";}
  .site-nav{display:none;position:absolute;top:73px;inset-inline:0;padding:25px;z-index:10;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border:1px solid var(--line);}
  .site-header.nav-open .site-nav,.site-header.menu-open .site-nav{display:flex;}
  .site-nav a{min-height:45px;}
  .menu-toggle{display:inline-flex;min-height:35px;height:35px;padding:0 10px;border-radius:0;}
  .hero{grid-template-columns:minmax(0,1fr) minmax(340px,.75fr);gap:45px;}
  .emblem-showcase{min-height:590px;}
  .about-layout{grid-template-columns:1fr 1fr;}
}
@media (max-width:790px){
  .site-header,main,.site-footer{width:calc(100% - 36px);}
  .site-header{height:74px;gap:10px;}
  .brand-link small,.figma-contact-link{display:none;}
  .auth-control { gap:3px; }
  .auth-sign-in,.auth-sign-out{font-size:9px;padding:0 6px;}
  .hero{min-height:0;padding:52px 0 70px;grid-template-columns:1fr;gap:50px;}
  .hero h1,html[lang="en"] .hero h1{font-size:clamp(49px,13vw,72px);line-height:1.2;}
  .hero-value{font-size:20px;margin-top:32px;}
  .actions{flex-direction:column;}
  .button{width:100%;}
  .tags{display:grid;grid-template-columns:1fr;}
  .emblem-showcase{min-height:570px;padding:27px 25px 24px;}
  .illustration-wrap{min-height:350px;}
  .section{padding-block:85px;}
  :is(.about-header,.method-header,.selected-work-header,.inquiries-header,.latest-writing-header,.contact-header){display:block;margin-bottom:50px;}
  :is(.about-header,.method-header,.selected-work-header,.inquiries-header,.latest-writing-header,.contact-header) >.eyebrow{margin-bottom:22px;}
  :is(.about-header,.method-header,.selected-work-header,.inquiries-header,.latest-writing-header,.contact-header) >h2{font-size:clamp(32px,10vw,49px);}
  :is(.about-lead,.method-introduction,.selected-work-introduction,.inquiries-introduction,.latest-writing-introduction,.contact-introduction){margin-top:23px;}
  .about-layout,.contact-layout{grid-template-columns:1fr;}
  .method{padding-inline:18px;}
  .method-steps,.inquiries-list{grid-template-columns:1fr;}
  .method-steps li{min-height:0;border-inline-start:1px solid var(--line);padding:28px;}
  .method-number{margin-bottom:35px;}
  .selected-work-item{grid-template-columns:1fr;gap:20px;}
  .inquiry{min-height:285px;}
  .latest-writing-list{grid-template-columns:1fr;}
  .latest-writing-item{min-height:320px;}
  .contact-areas li>p{padding-inline-start:59px;}
  .site-footer{padding-block:30px;}
  .footer-copyright{display:none;}
}
@media (max-width:430px){
  .brand-symbol{width:36px;height:36px;flex-basis:36px;}
  .brand-mark{width:30px;height:30px;}
  .site-header .brand-link b{font-size:12px;}
  .header-tools{gap:5px;}
  .theme-toggle,.language-toggle{width:32px;height:32px;min-width:32px;min-height:32px;}
  .hero{padding-top:42px;}
  .emblem-showcase{min-height:520px;}
}
@media(prefers-reduced-motion:reduce){.hero-copy,.emblem-showcase,.philosophy-illustration,.illustration-thread{animation:none!important;}}