/* V3.1 internal pages: size the composition to the available window.
   Keep the landing page, artwork, colors and content unchanged. */
#main > [data-personal-page]:not([data-personal-page="/"]) {
  --page-title: clamp(30px, min(3.2vw, 5.2dvh), 44px);
  --page-space: clamp(20px, 3.2dvh, 34px);
  padding-block: var(--page-space);
  flex-shrink: 0;
}

#main > [data-personal-page="/career"],
#main > [data-personal-page="/work"],
#main > [data-personal-page="/writing"],
#main > [data-personal-page="/contact"] { flex-grow: 1; }

#main > [data-personal-page]:not([data-personal-page="/"]) .section-topline {
  margin-bottom: 12px;
}

#main > [data-personal-page]:not([data-personal-page="/"]) .section-title {
  font-size: var(--page-title);
  line-height: 1.4;
  margin-block: 4px 12px;
}

#main > [data-personal-page]:not([data-personal-page="/"]) .section-intro {
  font-size: 14px;
  line-height: 1.9;
  margin-block: 8px 0;
}

body[dir="ltr"] #main > [data-personal-page]:not([data-personal-page="/"]) .section-title {
  line-height: 1.2;
}

/* The biography remains a reading page, with its second section below it. */
#about .about-head { gap: 6%; margin-bottom: 32px; }
#about .about-head .lead { font-size: clamp(22px, 2.15vw, 30px); line-height: 1.8; }
#about .about-detail { padding-inline-start: 26px; }
#about .about-detail p { font-size: 14px; line-height: 2; }
#about .stat { padding-block: 20px; }
#about .stat strong { font-size: clamp(40px, 4.5vw, 62px); }
#about .stat span { font-size: 12px; line-height: 1.8; margin-top: 8px; }
#human .human-cards { margin-top: 24px; gap: 18px; }
#human .human-card { padding: 26px; min-height: 0; }
#human .human-card h3 { font-size: 21px; margin-bottom: 14px; }
#human .mini-list li { font-size: 13px; line-height: 1.9; padding-block: 12px; }
#human .language-chip { font-size: 12px; line-height: 1.8; padding: 9px 12px; }

#experience .career-top, #workspace .workspace-head {
  align-items: center;
  gap: 28px;
  margin-bottom: 20px;
}
#experience .career-top .section-title, #workspace .workspace-head .section-title { margin-bottom: 0; }
#experience .exp-card { min-height: 0; padding: 18px; }
#experience .exp-meta { flex-wrap: wrap; gap: 6px 10px; line-height: 1.5; letter-spacing: .025em; }
#experience .exp-company { font-size: 17px; line-height: 1.65; margin-block: 13px 6px; }
#experience .exp-role { font-size: 12px; line-height: 1.8; margin-bottom: 12px; }
#experience .exp-description { font-size: 12px; line-height: 1.8; margin-bottom: 0; }
#experience .career-expand { margin-top: 16px; }
#experience .career-expand .btn { padding: 11px 22px; }
#experience .more-career { margin-top: 24px; padding: 24px; }
#experience .additional-role b { font-size: 13px; }
#experience .additional-role small { font-size: 12px; line-height: 1.8; }

#workspace .workspace-grid { gap: 16px; }
#workspace .work-card { min-height: 0; padding: 24px; }
#workspace .work-card-main { margin-top: 24px; margin-bottom: 20px; }
#workspace .work-card h3 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; margin-bottom: 12px; }
#workspace .work-card p { font-size: 13px; line-height: 1.85; }
#workspace .work-card.studies h3 { font-size: clamp(32px, 3vw, 40px); }
#workspace .work-card.studies .work-card-main { margin-top: 24px; }
#workspace .work-link { font-size: 12px; padding-top: 13px; margin-top: auto; }

#writing .writing-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 64px); }
#writing .book-stage { min-height: 0; margin-top: 0; }
#writing .novel-poster-button { width: min(100%, 350px, calc((100dvh - 210px) * .8)); }
#writing .novel-frame { padding: 6px; }
#writing .novel-badge { font-size: 12px; padding: 6px 11px; margin-bottom: 4px; }
#writing .novel-copy .section-title { margin-block: 6px 10px; }
#writing .novel-ornament { margin-bottom: 10px; }
#writing .novel-teaser { font-size: clamp(17px, 1.55vw, 21px); line-height: 1.85; margin-bottom: 10px; max-width: 630px; }
#writing .novel-copy .section-intro { font-size: 13px; line-height: 1.9; max-width: 650px; }
#writing .writing-subnote { font-size: 12px; line-height: 1.85; margin-block: 14px 4px; padding-top: 12px; }
#writing .novel-cta { font-size: 12px; padding-block: 10px; }
#writing .novel-image-footer { margin-top: 10px; letter-spacing: .07em; }

#contact .section-intro { max-width: 760px; }
#contact .contact-actions { margin-top: 26px; align-items: center; }
#contact .email-link { font-size: clamp(28px, 3vw, 42px); padding-bottom: 8px; }
#contact .email-note { font-size: 12px; line-height: 1.9; }
#contact .contact-socials { margin-top: 20px; }

@media (min-width: 901px) {
  #experience .experience-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  #workspace .workspace-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #workspace .work-card.studies { grid-column: auto; min-height: 0; }
}

/* Short desktop windows use tighter spacing, while text keeps its reading size. */
@media (min-width: 901px) and (max-height: 700px) {
  #main > [data-personal-page]:not([data-personal-page="/"]) { padding-block: 18px; }
  #main > [data-personal-page]:not([data-personal-page="/"]) .section-topline { margin-bottom: 8px; }
  #experience .career-top, #workspace .workspace-head { margin-bottom: 14px; }
  #experience .exp-card { padding: 15px; }
  #experience .exp-company { margin-top: 10px; }
  #experience .exp-role { margin-bottom: 8px; }
  #experience .career-expand { margin-top: 12px; }
  #workspace .work-card { padding: 20px; }
  #workspace .work-card-main, #workspace .work-card.studies .work-card-main { margin-top: 18px; margin-bottom: 16px; }
  #writing .novel-copy .section-title { font-size: 30px; line-height: 1.35; }
  #writing .novel-teaser { font-size: 17px; line-height: 1.75; }
  #writing .novel-ornament { margin-bottom: 6px; }
  #writing .writing-subnote { margin-top: 10px; padding-top: 9px; }
}

@media (max-width: 900px) {
  #experience .career-top, #workspace .workspace-head { display: block; }
  #experience .career-top .section-intro, #workspace .workspace-head .section-intro { max-width: 100%; }
  #experience .exp-card { padding: 20px; }
  #workspace .work-card.studies { min-height: 0; }
  #writing .writing-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; }
  #writing .novel-poster-button { width: min(100%, 300px); }
}

@media (max-width: 600px) {
  #main > [data-personal-page]:not([data-personal-page="/"]) { --page-title: 30px; padding-block: 28px; }
  #about .about-head { gap: 22px; }
  #about .about-detail { padding-inline-start: 18px; }
  #about .stat strong { font-size: 38px; }
  #about .stat span { font-size: 11px; }
  #human .human-cards { gap: 12px; }
  #human .human-card { padding: 22px; }
  #workspace .work-card { padding: 24px; }
  #workspace .work-card-main, #workspace .work-card.studies .work-card-main { margin-top: 24px; }
  #writing .writing-grid { grid-template-columns: 1fr; gap: 28px; }
  #writing .novel-poster-button { width: min(100%, 300px); }
  #writing .novel-teaser { font-size: 18px; }
  #contact .email-link { font-size: clamp(22px, 6.8vw, 29px); }
  #contact .contact-actions { gap: 18px; margin-top: 22px; }
}

/* The two directions have independent physical placement; reading order stays semantic. */
@font-face{font-family:AlkendiContactNaskh;src:url('/fonts/naskh-bold.ttf') format('truetype');font-weight:700;font-display:swap}
body:has(#contact:not([hidden])) .footer .personal-socials{display:none}
#contact .contact-composition{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"art copy";gap:clamp(28px,5vw,70px);align-items:center;direction:ltr}
html[lang="ar"] #contact .contact-composition{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"copy art"}
#contact .contact-copy{grid-area:copy;min-width:0;direction:rtl;text-align:right}
body[dir="ltr"] #contact .contact-copy{direction:ltr;text-align:left}
#contact .contact-actions{display:block;margin-top:22px}
#contact .email-link{font-size:clamp(24px,3vw,42px);max-width:100%;overflow-wrap:anywhere}
#contact .email-note{display:block;margin-top:12px}

/* A gold ink journey, an unfilled drop and a last unfinished flourish. */
.contact-art{grid-area:art;position:relative;isolation:isolate;display:grid;place-items:center;width:min(100%,440px);aspect-ratio:1.24;max-height:calc(100dvh - 250px);margin:0 auto;color:#ddc18a}
.contact-art-ink{position:absolute;inset:-3% -5%;width:110%;height:106%;overflow:visible;pointer-events:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.art-wash{fill:currentColor;fill-opacity:.065;stroke:none}
.art-ribbon{fill:currentColor;fill-opacity:.16;stroke:none}
.art-ribbon-edge{stroke-width:1.1;opacity:.36}
.art-journey{stroke-width:.85;opacity:.5}
.art-echo{stroke-width:.55;opacity:.2}
.art-flourish{stroke-width:2;opacity:.8}
.art-drop{stroke-width:.9;fill:currentColor;fill-opacity:.06;opacity:.64}
.art-ripple{stroke-width:.65;opacity:.4}
.art-nib{fill:currentColor;stroke:none;opacity:.7}
.contact-art blockquote{position:relative;z-index:1;display:grid;gap:0;width:100%;margin:0;padding:14px 4px 30px;font-family:AlkendiContactNaskh,'Noto Naskh Arabic',serif;font-weight:700;font-size:clamp(38px,min(5.2vw,8dvh),78px);line-height:1.4;text-align:center;transform:rotate(-6deg);text-shadow:0 3px 24px #d9c18e12}
.contact-art blockquote span{display:block;width:90%;margin-inline:auto;white-space:nowrap}
.contact-art blockquote span:first-child{width:86%;font-size:.8em;transform:translateX(7%)}
.contact-art blockquote span:last-child{font-size:1.08em;transform:translateX(-4%)}
.contact-art-signature{pointer-events:none;position:absolute;left:25%;bottom:9%;width:23px;height:23px;opacity:.56;transform:rotate(-12deg)}
.contact-art:not([lang="ar"]) blockquote{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(24px,min(2.3vw,4.2dvh),36px);line-height:1.65}
.contact-art:not([lang="ar"]) blockquote span{white-space:normal;text-wrap:balance}
.contact-art:not([lang="ar"]) blockquote span:first-child{width:90%;font-size:1em;transform:translateX(-2%)}
.contact-art:not([lang="ar"]) blockquote span:last-child{font-size:.94em;transform:translateX(2%)}
:root[data-theme="light"] .contact-art,:root[data-theme="sage"] .contact-art{color:#89652f}
#contact:not([hidden]) .art-journey,#contact:not([hidden]) .art-flourish{animation:contactInkReveal 1.8s ease-out both}
#contact:not([hidden]) .art-flourish{animation-delay:.18s}
@keyframes contactInkReveal{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@media(max-width:820px){
  #contact .contact-composition,html[lang="ar"] #contact .contact-composition{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "art";gap:14px}
  .contact-art{width:min(86%,360px);height:clamp(190px,25dvh,260px);max-height:none;aspect-ratio:auto}
  .contact-art blockquote{font-size:clamp(36px,7vw,56px);padding-bottom:20px;line-height:1.35}
  .contact-art:not([lang="ar"]) blockquote{font-size:clamp(22px,4.6vw,32px);line-height:1.5}
  .contact-art-ink{inset:-3% 0;width:100%;height:106%}
  .contact-art-signature{width:20px;height:20px;bottom:4%}
}
@media(max-width:600px){
  #contact .contact-socials{gap:10px}
  #contact .contact-socials .personal-socials{gap:7px}
  #contact .contact-socials .personal-social-link{width:32px;height:32px}
  .contact-art{width:94%;height:195px}
}
@media(prefers-reduced-motion:reduce){#contact:not([hidden]) .art-journey,#contact:not([hidden]) .art-flourish{animation:none}}