/* Header controls. */
.header-actions{display:flex;align-items:center;gap:22px;flex-shrink:0}

/* Keep the English edition typographic and architectural, with a natural LTR flow. */
html[lang=en] body{font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.65}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3{font-family:Georgia,'Times New Roman',serif;font-weight:400}
html[lang=en] .site-header{gap:24px}
html[lang=en] .brand{font:25px/1.25 Georgia,'Times New Roman',serif;letter-spacing:-.6px}
html[lang=en] .brand small{font-size:8px;letter-spacing:1.8px;margin-top:7px}
html[lang=en] .site-header nav{font-size:14px;gap:26px;margin-left:0}
html[lang=en] .library-button{font-size:13px;gap:8px}
html[lang=en] .saved-count{font-size:11px}
html[lang=en] .hero-copy{text-align:left;min-width:0}
html[lang=en] .eyebrow{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;line-height:1.7}
html[lang=en] .hero .eyebrow{font-size:10px;gap:10px}
html[lang=en] .hero h1{font-size:clamp(43px,4.2vw,61px);line-height:1.18;letter-spacing:-1.9px;margin:25px 0 25px}
html[lang=en] .hero h1>span:first-of-type{font-size:clamp(49px,4.7vw,69px);line-height:1.2;margin:6px 0 0;letter-spacing:-2.7px}
html[lang=en] .title-flourish{margin:0 0 0 17px;top:-6px;font-size:28px}
html[lang=en] .hero-description{font-size:18px;line-height:1.85;max-width:490px}
html[lang=en] .hero-actions{gap:24px;flex-wrap:wrap}
html[lang=en] .hero-actions .button{font-size:14px;gap:24px;padding-block:14px}
html[lang=en] .hero-actions .text-button{font-size:12px;gap:8px}
html[lang=en] .hero-footnote{font-size:10px;gap:12px;line-height:1.6}
html[lang=en] .hero-art:before{inset:16px 15px 44px -15px}
html[lang=en] .arch-label{font-size:8px;letter-spacing:1.5px;text-transform:uppercase}
html[lang=en] .arch-poem{top:39%;width:56%;right:22%}
html[lang=en] .arch-divider{margin-top:18px}
html[lang=en] .arch-credit{font-size:11px}
html[lang=en] .art-caption{font-size:10px;gap:8px;line-height:1.5;min-height:43px}
html[lang=en] .art-caption>span:nth-child(2){max-width:210px}
html[lang=en] .art-caption button{margin-left:auto;margin-right:0;font-size:10px;gap:6px;white-space:nowrap}
html[lang=en] a svg:has(use[href="#icon-arrow"]),html[lang=en] button svg:has(use[href="#icon-arrow"]){transform:scaleX(-1)}
html[lang=en] .section-heading{gap:30px}
html[lang=en] .section-heading h2{font-size:37px;line-height:1.3;margin-top:12px;letter-spacing:-1px}
html[lang=en] .section-heading>p{font-size:14px;max-width:410px;line-height:1.7;padding-bottom:3px}
html[lang=en] .search-box{min-width:0}
html[lang=en] .search-box input{min-width:0;font-size:14px}
html[lang=en] .sort-button{font-size:12px;white-space:nowrap}
html[lang=en] .filter{font-size:12px;padding-block:9px;gap:9px}
html[lang=en] .filter small{font-size:10px}
html[lang=en] .results-line{font-size:12px;line-height:1.6}
html[lang=en] .results-line .text-button{font-size:11px}
html[lang=en] .collection-note{margin-left:auto;margin-right:0;font-size:11px}
html[lang=en] .poem-card:before{left:0;right:auto}
html[lang=en] .card-body{text-align:left}
html[lang=en] .card-eyebrow{padding-right:27px;padding-left:0;font-size:10px;line-height:1.6;letter-spacing:.4px}
html[lang=en] .card-save{right:16px;left:auto}
html[lang=en] .card-footer{font-size:11px;padding-block:15px}
html[lang=en] .load-more{font-size:14px;gap:22px;padding-block:13px}
html[lang=en] .empty-state h3{font-size:30px}
html[lang=en] .empty-state p{font-size:15px}
html[lang=en] .about-heading h2{font-size:36px;line-height:1.4;letter-spacing:-.8px;margin-top:18px}
html[lang=en] .about-name{font-size:13px;margin-top:18px}
html[lang=en] .about-copy p{font-size:16px;line-height:1.9;margin-bottom:18px}
html[lang=en] .text-link{font-size:13px;line-height:1.5}
html[lang=en] .about-ornament{right:-100px;left:auto}
html[lang=en] .source-book>span{font:25px/1.5 Georgia,'Times New Roman',serif;text-align:center;letter-spacing:-.6px}
html[lang=en] .source-copy h2{font-size:33px;line-height:1.3;letter-spacing:-.7px;margin:14px 0 19px}
html[lang=en] .source-copy>p{font-size:15px;line-height:1.9}
html[lang=en] .source-copy details{font-size:13px}
html[lang=en] .source-copy details p{font-size:14px;line-height:1.8}
html[lang=en] .source-copy summary{gap:15px;line-height:1.5}
html[lang=en] .source-size{margin-left:5px;margin-right:0;font-size:10px}
html[lang=en] .footer-content .brand{font-size:22px}
html[lang=en] .footer-content .brand small{font:11px Georgia,'Times New Roman',serif;letter-spacing:.3px;margin-top:10px}
html[lang=en] .footer-content>p{font:18px Georgia,'Times New Roman',serif}
html[lang=en] .reader-brand{font:21px Georgia,'Times New Roman',serif;letter-spacing:-.4px}
html[lang=en] .icon-button{font-family:Georgia,'Times New Roman',serif;font-size:16px}
html[lang=en] .reader-content{margin-inline:auto;text-align:center}
html[lang=en] .reader-meta{justify-content:center;flex-wrap:wrap;font-size:11px;gap:12px}
html[lang=en] .reader-decor{font-size:14px;letter-spacing:3px;margin-bottom:30px}
html[lang=en] .reader-attribution{font-size:10px;line-height:1.7;text-align:left}
html[lang=en] .reader-navigation button{font-size:12px;gap:9px}
html[lang=en] .reader-bottom .text-link{font-size:12px}
html[lang=en] .toast{font-size:13px;line-height:1.5;text-align:center}

@media(min-width:1500px){
  html[lang=en] .hero h1{font-size:65px}
  html[lang=en] .hero h1>span:first-of-type{font-size:73px}
  html[lang=en] .hero-description{font-size:19px}
}
@media(max-width:1100px){
  .header-actions{gap:16px}
  html[lang=en] .site-header{gap:18px}
  html[lang=en] .site-header nav{font-size:12px;gap:19px}
  html[lang=en] .brand{font-size:22px}
  html[lang=en] .brand small{font-size:7px}
  html[lang=en] .library-button{font-size:12px;gap:6px}
  html[lang=en] .hero h1{font-size:45px;letter-spacing:-1.5px}
  html[lang=en] .hero h1>span:first-of-type{font-size:54px;letter-spacing:-2px}
  html[lang=en] .hero-description{font-size:16px}
  html[lang=en] .hero-actions{gap:14px}
  html[lang=en] .hero-actions .button{font-size:13px;gap:15px}
  html[lang=en] .hero-actions .text-button{font-size:11px}
  html[lang=en] .arch-label{font-size:7px}
  html[lang=en] .arch-divider{margin-top:12px}
  html[lang=en] .about-heading h2{font-size:31px}
}
@media(max-width:900px){
  .site-header nav{gap:19px;margin-left:0}
  .header-actions{gap:13px}
  html[lang=en] .site-header nav{display:none}
}
@media(max-width:800px){
  html[lang=en] .hero h1{font-size:37px;line-height:1.25;letter-spacing:-1.2px}
  html[lang=en] .hero h1>span:first-of-type{font-size:44px;letter-spacing:-1.8px}
  html[lang=en] .hero .eyebrow{font-size:8px;letter-spacing:1.4px}
  html[lang=en] .hero-description{font-size:15px;line-height:1.8}
  html[lang=en] .hero-actions{gap:9px}
  html[lang=en] .hero-actions .button{font-size:12px;padding:12px 17px}
  html[lang=en] .hero-actions .text-button{font-size:11px}
  html[lang=en] .hero-footnote{font-size:9px}
  html[lang=en] .hero-art:before{inset:10px 8px 40px -8px}
  html[lang=en] .arch-label{font-size:6px;letter-spacing:1px}
  html[lang=en] .arch-credit{font-size:9px}
  html[lang=en] .arch-divider{margin-top:10px;font-size:20px}
  html[lang=en] .art-caption{font-size:9px;gap:5px}
  html[lang=en] .art-caption>span:nth-child(2){max-width:140px}
  html[lang=en] .art-caption button{font-size:9px;gap:4px}
  html[lang=en] .art-caption button svg{width:14px}
  html[lang=en] .section-heading h2{font-size:31px}
  html[lang=en] .section-heading>p{font-size:12px;max-width:285px}
  html[lang=en] .about-copy p{font-size:14px}
  html[lang=en] .about-heading h2{font-size:29px}
  html[lang=en] .source-book>span{font-size:21px}
  html[lang=en] .source-copy h2{font-size:28px}
  html[lang=en] .source-copy>p{font-size:14px}
  html[lang=en] .footer-content>p{font-size:15px}
}
@media(max-width:580px){
  .header-actions{gap:12px}
  .site-header{gap:12px}
  .site-header .brand{font-size:24px;gap:7px}
  .site-header .brand img{width:31px;height:31px}
  .site-header .brand small{font-size:6px;letter-spacing:1.4px}
  .library-button{gap:6px}
  .library-button>span:not(.saved-count){display:none}
  .library-button svg{width:20px}
  html[lang=en] .site-header .brand{font-size:18px;letter-spacing:-.6px}
  html[lang=en] .site-header .brand small{font-size:6px;letter-spacing:1.1px;margin-top:6px}
  html[lang=en] .header-actions{gap:10px}
  html[lang=en] .hero h1{font-size:38px;line-height:1.2;margin-block:20px 22px;letter-spacing:-1.3px}
  html[lang=en] .hero h1 br{display:block}
  html[lang=en] .hero h1>span:first-of-type{font-size:46px;line-height:1.2;margin:9px 0 0;letter-spacing:-1.9px}
  html[lang=en] .hero .eyebrow{font-size:9px;letter-spacing:1.5px}
  html[lang=en] .hero-description{font-size:16px;line-height:1.85}
  html[lang=en] .hero-actions{gap:17px;flex-wrap:wrap;margin-top:25px}
  html[lang=en] .hero-actions .button{font-size:13px;padding:13px 18px;gap:18px}
  html[lang=en] .hero-actions .text-button{font-size:11px}
  html[lang=en] .arch-label{font-size:6.5px;letter-spacing:1.2px}
  html[lang=en] .arch-credit{font-size:10px}
  html[lang=en] .arch-divider{font-size:23px;margin-top:12px}
  html[lang=en] .art-caption{font-size:10px;gap:6px;min-height:43px}
  html[lang=en] .art-caption>span:nth-child(2){max-width:175px}
  html[lang=en] .art-caption button{font-size:10px}
  html[lang=en] .section-heading h2{font-size:31px;line-height:1.35;margin-top:10px}
  html[lang=en] .section-heading>p{font-size:13px;max-width:none;margin-top:12px;line-height:1.8}
  html[lang=en] .search-box input{font-size:12px}
  html[lang=en] .search-box input::placeholder{font-size:12px}
  html[lang=en] .filter{font-size:11px;padding:8px 12px;gap:7px}
  html[lang=en] .results-line{font-size:11px;gap:10px}
  html[lang=en] .results-line .text-button{font-size:10px}
  html[lang=en] .card-eyebrow{font-size:10px}
  html[lang=en] .card-footer{font-size:11px;padding-block:14px}
  html[lang=en] .about-heading h2{font-size:34px;line-height:1.4}
  html[lang=en] .about-copy p{font-size:15px}
  html[lang=en] .about-name{font-size:12px}
  html[lang=en] .about-ornament{right:-90px;left:auto}
  html[lang=en] .source-book>span{font-size:19px}
  html[lang=en] .source-copy h2{font-size:30px;line-height:1.35}
  html[lang=en] .source-copy .eyebrow{font-size:10px}
  html[lang=en] .source-copy>p{font-size:14px}
  html[lang=en] .source-copy summary{font-size:12px}
  html[lang=en] .footer-content .brand{font-size:20px}
  html[lang=en] .footer-content>span{font-size:9px}
  html[lang=en] .reader-brand{font-size:18px;letter-spacing:-.5px}
  html[lang=en] .reader-content{padding:30px 23px 24px}
  html[lang=en] .reader-meta{font-size:10px;gap:10px}
  html[lang=en] .reader-bottom{gap:10px}
  html[lang=en] .reader-bottom .text-link{font-size:11px;gap:7px}
  html[lang=en] .reader-navigation button{font-size:11px;gap:7px}
  html[lang=en] .toast{white-space:normal;min-width:180px;max-width:90%;font-size:12px}
}
@media(max-width:360px){
  .header-actions{gap:8px}
  .site-header .brand{font-size:21px}
  .site-header .brand img{width:28px;height:28px}
  html[lang=en] .site-header .brand{font-size:16px}
  html[lang=en] .site-header .brand img{width:25px;height:25px}
  html[lang=en] .hero h1>span:first-of-type{font-size:42px}
}

/* Arabic text uses the same Naskh face throughout the English interface. */
html[lang=en] .arch-poem[lang=ar]{font-family:Naskh,serif}
html[lang=en] .art-caption>span[lang=ar]{font-family:Naskh,serif;font-size:15px;letter-spacing:normal}
html[lang=en] .filter[lang=ar]{font-family:Naskh,serif;font-size:15px;letter-spacing:normal;line-height:1.7;padding-block:5px}
html[lang=en] .poem-tag{font-family:Naskh,serif;font-size:13px;letter-spacing:normal;line-height:1.7;text-transform:none}
html[lang=en] .poem-card h3[lang=ar],html[lang=en] #reader-title[lang=ar]{font-family:Naskh,serif;letter-spacing:normal}
html[lang=en] .poem-card h3[lang=ar],html[lang=en] .card-preview[lang=ar]{text-align:right}
html[lang=en] .reader-note[lang=ar]{font-family:Naskh,serif}
.single-verse{grid-template-columns:1fr}
.single-verse:after{display:none}
.single-verse>span:first-child{padding-inline:0}
.attribution-tag{display:inline-block;font:12px/1.8 Naskh,serif;color:#796338}
.card-body>.attribution-tag{margin:-4px 0 8px}
html[lang=en] .source-download{display:flex;width:fit-content;margin-top:16px}

/* The title sits on the paper within an ornamental, open border. */
.hero-title-frame{position:relative;width:100%;max-width:540px;aspect-ratio:5/3;display:grid;place-items:center;container-type:inline-size}
.hero-title-frame>img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-title-copy{position:relative;width:68%;text-align:center;transform:translateY(-2.5cqw)}
.art-frame{container-type:inline-size}
html[lang=en] .hero h1[lang=ar]{font-family:Naskh,serif;font-size:clamp(17px,5.6cqw,31px);font-weight:400;letter-spacing:normal;line-height:1.2;text-align:center;width:auto;max-width:100%;margin:0}
html[lang=en] .hero h1[lang=ar]>span{display:block;font-family:inherit;font-size:inherit;line-height:1.2;letter-spacing:normal;margin:0;color:inherit}
html[lang=en] .hero h1[lang=ar]>span:last-child{font-size:clamp(34px,11.9cqw,64px);color:var(--blue)}
.hero-life-dates{position:absolute;right:17%;bottom:19%;font:clamp(9px,1.8cqw,11px)/1.45 Georgia,'Times New Roman',serif;text-align:right;color:#607273}
.hero-life-dates span{display:block;white-space:nowrap}
.hero-collection{margin-top:18px}
.hero-collection-stats{display:flex;gap:52px;margin:0;padding:20px 0;border-top:1px solid var(--line)}
.hero-collection-stats>div{display:flex;align-items:baseline;gap:12px}
.hero-collection-stats dt{font-size:12px;color:var(--muted)}
.hero-collection-stats dd{order:-1;margin:0;font:36px/1.1 Georgia,'Times New Roman',serif;color:var(--blue)}
.hero-browse-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 0;border-block:1px solid var(--line);font-size:14px;color:var(--blue)}
.hero-browse-link:hover{color:var(--teal)}
.hero-browse-link svg{width:19px;height:19px}
.hero-browse-count{display:none;margin-left:auto;font-size:11px;color:var(--muted)}
@media(min-width:801px){
  html[lang=en] .hero{grid-template-columns:1.15fr 1fr;gap:clamp(32px,3.4vw,52px);align-items:start;padding-block:40px 44px}
  .hero-title-frame{max-width:none}
  html[lang=en] .hero h1[lang=ar]{font-size:clamp(17px,5.6cqw,36px)}
  html[lang=en] .hero h1[lang=ar]>span:last-child{font-size:clamp(34px,11.9cqw,74px)}
}
@media(max-width:800px){
  .hero-collection{margin-top:12px}
  .hero-collection-stats{display:none}
  .hero-browse-link{padding-block:13px;font-size:12px}
  .hero-browse-count{display:inline}
}

/* Book-style Arabic text: regular weight, natural joins, and room for complete hemistichs. */
html[lang=en] .search-box input{font-family:Georgia,Naskh,serif}
html[lang=en] .arch-poem p{font-size:22px;line-height:2.05;white-space:normal}
html[lang=en] .poem-card h3[lang=ar]{font-size:27px;line-height:1.7;font-weight:400}
html[lang=en] .card-preview[lang=ar]{font-size:23px;line-height:1.95;min-height:90px}
html[lang=en] #reader-title[lang=ar]{font-size:36px;line-height:1.7;font-weight:400}
html[lang=en] .reader-dialog{width:min(1080px,calc(100% - 44px))}
html[lang=en] .reader-content{padding-inline:44px}
html[lang=en] .reader-verses{font-family:Naskh,serif;letter-spacing:normal;line-height:2.15}
html[lang=en] .verse{column-gap:40px;padding-block:9px}
html[lang=en] .reader-note[lang=ar]{font-size:16px;line-height:1.95}
html[lang=en] .attribution-tag{font-size:14px}
@media(min-width:801px){
  .hero-art{max-width:480px}
  html[lang=en] .arch-poem p{font-size:clamp(18px,5.9cqw,29px)}
  html[lang=en] .arch-credit{font-size:clamp(11px,3cqw,14px)}
}
@media(max-width:800px){
  html[lang=en] .arch-poem p{font-size:17px}
  html[lang=en] .reader-content{padding-inline:28px}
  html[lang=en] .reader-verses{font-size:var(--reader-size)}
}
@media(max-width:760px){
  html[lang=en] .verse{grid-template-columns:1fr;gap:0;margin-bottom:18px;line-height:1.95}
  html[lang=en] .verse:after{display:none}
  html[lang=en] .verse>span:first-child{padding-inline:0 16px}
  html[lang=en] .verse>span:nth-child(2){padding-inline:16px 0}
  html[lang=en] .single-verse>span:first-child{padding-inline:0}
}
@media(max-width:580px){
  html[lang=en] .arch-poem p{font-size:clamp(15px,5.9cqw,20px)}
  html[lang=en] .reader-dialog{width:100%;height:100dvh;max-height:100dvh}
  html[lang=en] .reader-content{padding-inline:24px}
  html[lang=en] #reader-title[lang=ar]{font-size:32px}
}
@media(max-width:360px){
  html[lang=en] .reader-content{padding-inline:18px}
  html[lang=en] .reader-verses{font-size:calc(var(--reader-size) - 2px)}
}