/* Screen-size and touch refinements. Keep the original desktop art direction. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.hero>*{min-width:0}
.font-title,.font-arabic,.style-row>div,.compare-row strong{min-width:0;overflow-wrap:anywhere}
.specimen-text{overflow:auto;scrollbar-width:thin;scrollbar-color:#a3b39a transparent}
.detail-text-sample{overflow-wrap:anywhere}
.glyph-grid{grid-template-columns:repeat(auto-fit,minmax(48px,1fr))}
dialog{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);scrollbar-width:thin}
/* Keep the close control reachable even on a long glyph or license view. */
dialog .dialog-close{position:sticky;top:12px;float:right;margin:12px 12px -56px 0;width:44px;height:44px;z-index:6;box-shadow:0 2px 8px #172d3610}
.detail-tabs{position:sticky;top:0;z-index:4;background:var(--surface);padding-right:72px}
.detail-tab{min-height:44px}
.detail-footer{position:sticky;bottom:0;z-index:4;padding-bottom:max(18px,env(safe-area-inset-bottom));box-shadow:0 -5px 15px #172d3605}
.detail-edit input,.detail-edit select,.compare-dialog>input,.compare-row select{font-size:16px;min-height:44px}
.detail-edit select{max-width:45%}
.detail-specimen{font-size:clamp(40px,6vw,66px)}
.compare-row select{max-width:45%;font-size:14px}
.compare-tray{bottom:max(20px,env(safe-area-inset-bottom));max-width:calc(100% - 32px)}
.toast{bottom:calc(112px + env(safe-area-inset-bottom));white-space:normal;text-align:center;overflow-wrap:anywhere}
body:has(.compare-tray:not([hidden])){padding-bottom:96px}

@media(max-width:1100px),(pointer:coarse){
  .icon-button,.save-button{min-width:44px;min-height:44px}
  .nav-link,.filter,.text-button,.compare-button,.download-link,.weight-select,.file-links a{min-height:44px}
  .primary-button{min-height:46px;font-size:13px}
  .nav-link{font-size:12px;display:inline-flex;align-items:center;justify-content:center}
  .nav-link span{font-size:11px}
  .filter{font-size:12px;padding:9px 13px}
  .filter span{font-size:10px}
  .search{min-height:48px;padding:10px 13px}
  .search input,.preview-input input{font-size:16px;min-height:32px}
  .preview-input input{padding-right:60px}
  .preview-input .text-button{font-size:12px;bottom:-5px;width:50px}
  .workbench label{font-size:10px;letter-spacing:1.2px}
  .size-input output{font-size:11px}
  input[type=range]{height:32px;margin-block:0}
  .size-input>div{margin-top:5px}
  .results-toolbar p,.results-toolbar select{font-size:12px}
  .results-toolbar select{min-height:44px;padding:8px 4px}
  .results-toolbar .icon-button{width:44px;height:44px}
  .results-toolbar svg{width:18px;height:18px}
  .toolbar-divider{margin-inline:6px}
  .card-info{padding:18px}
  .font-title{font-size:16px;min-height:44px;display:flex;align-items:center}
  .font-arabic{font-size:13px}
  .card-heading{align-items:center;gap:10px}
  .card-meta{font-size:11px;margin-top:1px;gap:8px}
  .card-bottom{gap:12px;margin-top:14px;padding-top:8px}
  .weight-select{font-size:13px;max-width:42%;padding:7px 0}
  .card-actions{gap:13px;flex-shrink:0}
  .compare-button,.download-link{font-size:12px;gap:5px}
  .compare-button svg,.download-link svg{width:16px;height:16px}
  .specimen{height:250px;padding:48px 18px 18px}
  .specimen-tag{font-size:9px;top:20px;left:18px}
  .save-button{top:5px;right:7px}
  .save-button svg{width:19px;height:19px}
  .specimen-text{max-height:100%;font-size:var(--preview-size);line-height:1.8}
  .list .specimen{height:180px}
  .file-links a{font-size:12px;padding:9px 12px}
  .detail-header p,.info-dialog p,.license-detail{font-size:14px}
  .glyph-note{font-size:12px}
  .detail-tab{font-size:13px}
  .detail-footer>div>span{font-size:11px}
  .closing p{font-size:12px}
  .footer,.footer p,.footer .text-button,.library-bottom{font-size:11px}
  .footer .text-button{display:flex;align-items:center}
  .library-bottom a{min-height:44px;display:flex;align-items:center}
  .compare-tray{gap:14px;padding:10px 12px}
  .compare-tray>div{font-size:12px}
  .compare-tray .primary-button{min-height:44px;font-size:12px;padding:10px 14px}
}

/* Two comfortable columns for iPad portrait, landscape, and smaller laptops. */
@media(min-width:701px) and (max-width:1100px){
  .section-wrap,.header,.hero,.collection-strip,.footer{padding-inline:clamp(24px,4vw,44px)}
  .header{height:96px;gap:18px}
  .header nav{gap:18px}
  .brand-en>span{font-size:7px;letter-spacing:1.1px}
  .brand{gap:12px}
  .brand-ar{font-size:35px}
  .brand-en{font-size:25px}
  .theme-toggle{margin:0}
  .hero{grid-template-columns:1.1fr 1fr;gap:28px;padding-block:48px}
  .hero h1{font-size:clamp(40px,5.3vw,57px);letter-spacing:-1.7px}
  .hero-copy>p{font-size:14px;line-height:1.8}
  .hero-art{height:clamp(310px,37vw,370px)}
  .art-letters>span:first-child{font-size:clamp(84px,10.5vw,112px)}
  .art-letters>span:last-child{font-size:clamp(31px,4vw,42px)}
  .star-one{left:21px;top:100px;font-size:26px}
  .star-two{right:18px;bottom:65px;font-size:21px}
  .hero-note{font-size:11px}
  .eyebrow{font-size:10px;letter-spacing:1.4px}
  .font-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .font-grid.list{grid-template-columns:1fr}
  .section-heading h2{font-size:36px}
  .section-heading>p{font-size:12px;max-width:240px}
  .library-toolbar{flex-wrap:wrap;gap:16px}
  .search{width:100%}
  .filters{gap:6px}
  .workbench{padding:20px;gap:20px}
  .size-input{width:190px;padding-left:20px}
  .collection-strip{font-size:11px}
  .collection-strip>span{display:none}
  .collection-strip>div{width:100%;justify-content:space-between;gap:16px}
  .collection-strip>div>span+span{padding-left:20px}
  .closing{gap:25px}
  .closing h2{font-size:32px}
  .closing-glyph{width:100px;height:100px;font-size:70px}
  .footer{flex-wrap:wrap;gap:20px}
  .footer>span{display:none}
}

/* Phone, large phone, and iPad split-view. All navigation stays available. */
@media(max-width:700px){
  .section-wrap,.header,.hero,.collection-strip,.footer{padding-inline:max(clamp(16px,4.8vw,28px),env(safe-area-inset-left));padding-right:max(clamp(16px,4.8vw,28px),env(safe-area-inset-right))}
  .header{height:auto;min-height:126px;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:0 12px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:5px}
  .header>.brand{grid-column:1;grid-row:1;justify-self:start;gap:10px;min-height:62px}
  .brand-ar{font-size:35px}
  .brand-divider{height:28px}
  .brand-en{font-size:24px}
  .brand-en>span{font-size:7px;letter-spacing:1.1px;margin-top:7px}
  .header nav{grid-column:1/-1;grid-row:2;width:100%;margin:0;gap:4px;justify-content:space-between;border-top:1px solid var(--line)}
  .header nav .nav-link{display:inline-flex;font-size:12px;padding:8px 0;line-height:1.4}
  .header nav .nav-link:first-child,.header nav .nav-link:last-child{display:inline-flex}
  .nav-link.active:after{width:4px;height:4px;margin-left:5px}
  .theme-toggle{grid-column:2;grid-row:1;justify-self:end;margin:0;width:44px;height:44px}
  .hero{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:34px;padding-bottom:32px}
  .hero h1{font-size:clamp(39px,8.8vw,61px);letter-spacing:-1.7px;margin:19px 0;line-height:1.12}
  .hero-copy>p{font-size:15px;line-height:1.8;max-width:440px;margin-bottom:23px}
  .eyebrow{font-size:9px;letter-spacing:1.3px;line-height:1.7}
  .hero-note{display:none}
  .hero-art{width:100%;max-width:490px;justify-self:center;height:clamp(264px,65vw,325px);border-radius:150px 150px 6px 6px}
  .art-top{top:25px;font-size:9px}
  .art-letters>span:first-child{font-size:clamp(90px,23vw,115px)}
  .art-letters>span:last-child{font-size:clamp(33px,8.4vw,44px)}
  .star-one{left:24px;top:110px;font-size:27px}
  .star-two{right:24px;bottom:65px;font-size:22px}
  .art-bottom{left:20px;right:20px;bottom:20px}
  .collection-strip{min-height:65px;font-size:10px}
  .collection-strip>span{display:none}
  .collection-strip>div{width:100%;justify-content:space-between;gap:8px}
  .collection-strip>div>span+span{padding-left:10px}
  .collection-strip>div>span{line-height:1.7}
  .collection-strip b{margin-right:3px}
  .collection-strip [lang=ar]{font-size:18px;margin-left:3px}
  .library{padding-top:35px}
  .section-heading{margin-bottom:24px}
  .section-heading h2{font-size:clamp(28px,6.5vw,38px);line-height:1.2;letter-spacing:-.9px}
  .section-heading>p{display:none}
  .workbench{flex-direction:column;gap:17px;padding:18px;margin-bottom:21px}
  .preview-input{min-width:0;gap:8px}
  .size-input{width:100%;border:0;border-top:1px solid var(--line);padding:12px 0 0;display:flex;gap:20px;align-items:center}
  .size-input>label{min-width:83px;gap:12px}
  .size-input>div{flex:1;margin:0;gap:12px;min-width:0}
  .size-input>div>span{font-size:12px}
  .size-input>div>span:last-child{font-size:18px}
  .library-toolbar{flex-direction:column;align-items:stretch;gap:14px}
  .filters{display:flex;gap:6px;flex-wrap:wrap}
  .filter{padding:8px 11px;font-size:12px}
  .search{width:100%}
  .results-toolbar{align-items:flex-start;flex-wrap:wrap;gap:5px 12px;margin:16px 0}
  .results-toolbar p{min-height:44px;display:flex;align-items:center;font-size:11px}
  .results-toolbar>div{margin-left:auto}
  .results-toolbar select{font-size:11px;max-width:135px}
  .font-grid,.font-grid.list{grid-template-columns:minmax(0,1fr);gap:20px}
  .font-grid.list .font-card{grid-template-columns:minmax(0,1fr)}
  .specimen{height:clamp(250px,48vw,285px)}
  .list .specimen{height:180px}
  .font-title{font-size:17px}
  .font-arabic{font-size:14px;max-width:48%}
  .card-heading{gap:12px;flex-wrap:wrap}
  .card-bottom{flex-wrap:wrap;gap:2px 12px}
  .weight-select{font-size:14px;flex:1 1 80px;max-width:none;min-width:0;width:80px}
  .card-actions{gap:14px;flex:0 0 auto}
  .compare-button,.download-link{font-size:13px}
  .library-bottom{font-size:11px;gap:14px;align-items:center;padding:18px 0 24px}
  .library-bottom>span{max-width:54%;line-height:1.8}
  .library-bottom a{text-align:right;justify-content:flex-end;line-height:1.8}
  .closing{padding-top:32px;padding-bottom:32px;gap:18px;align-items:flex-start}
  .closing-glyph{width:65px;height:65px;font-size:47px}
  .closing .eyebrow{font-size:9px}
  .closing h2{font-size:clamp(26px,5.8vw,32px);line-height:1.25}
  .closing p{font-size:13px}
  .closing p br{display:none}
  .round-link{display:none}
  .footer{gap:16px;flex-wrap:wrap;padding-block:20px;align-items:center;justify-content:space-between}
  .footer p{font-size:11px;margin:0;line-height:1.8;max-width:52%}
  .footer>span{display:none}
  .footer .text-button{font-size:12px;width:100%;text-align:left;border-top:1px solid var(--line);padding-top:12px}
  dialog{max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);border-radius:10px}
  .info-dialog,.compare-dialog{padding:28px 20px}
  .info-dialog h2,.compare-dialog h2{font-size:30px;line-height:1.15;padding-right:12px}
  .detail-header{padding:28px 20px 20px}
  .detail-header h2{font-size:30px;padding-right:28px;margin-right:0;overflow-wrap:anywhere}
  .detail-header h2>span{display:block;margin:10px 0 0;font-size:19px}
  .detail-header p{font-size:14px}
  .detail-tabs{padding-left:14px;padding-right:62px;gap:4px}
  .detail-tab{flex:1;font-size:12px;padding:12px 2px;min-width:0}
  .detail-panel{padding:20px}
  .detail-specimen{padding:24px 14px;min-height:150px;font-size:clamp(38px,9vw,52px)}
  .detail-edit{flex-direction:column;gap:12px}
  .detail-edit select{padding:10px;max-width:100%;width:100%}
  .detail-footer{padding:12px 20px max(12px,env(safe-area-inset-bottom));gap:12px;flex-wrap:wrap}
  .detail-footer>div{flex:1;min-width:120px}
  .detail-footer .primary-button{font-size:12px;padding:11px 13px;gap:9px}
  .detail-footer>div>span{font-size:10px}
  .style-row{align-items:flex-start;flex-direction:column;gap:12px}
  .style-row>div{width:100%}
  .style-row>div>strong{font-size:14px}
  .style-row>div>p{font-size:28px;line-height:1.8;overflow-wrap:anywhere}
  .file-links{gap:10px}
  .file-links a{font-size:13px;min-width:72px;justify-content:center}
  .glyph-grid{grid-template-columns:repeat(auto-fit,minmax(42px,1fr))}
  .glyph-cell{min-height:56px;font-size:28px}
  .glyph-note{font-size:13px}
  .compare-input-label{font-size:13px;line-height:1.7}
  .compare-row>div{gap:12px;font-size:14px}
  .compare-row strong{max-width:55%}
  .compare-specimen{font-size:clamp(36px,8.8vw,52px)}
  .compare-tray{width:calc(100% - 24px);max-width:480px;bottom:max(12px,env(safe-area-inset-bottom));gap:8px;padding:10px}
  .compare-tray>div{font-size:12px;gap:5px;white-space:normal}
  .compare-tray>div>svg{display:none}
  .compare-tray .primary-button{font-size:12px;padding:10px 12px;gap:8px}
  .compare-tray .primary-button svg{width:14px}
}

@media(max-width:359px){
  .header nav .nav-link{font-size:11px}
  .brand-en>span{font-size:6px;letter-spacing:.8px}
  .collection-strip{font-size:9px}
  .collection-strip>div>span+span{padding-left:6px}
  .closing-glyph{display:none}
  .detail-footer .primary-button{width:100%}
  .compare-tray{flex-wrap:wrap}
  .compare-tray>div{flex:1}
  .compare-tray .primary-button{order:3;width:100%}
  body:has(.compare-tray:not([hidden])){padding-bottom:144px}
  .toast{bottom:calc(155px + env(safe-area-inset-bottom))}
}

/* Keep dialogs usable in phone landscape and when the keyboard reduces height. */
@media(max-height:500px){
  dialog{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
  .detail-header{padding-top:20px;padding-bottom:15px}
  .detail-header h2{margin:10px 0;font-size:28px}
  .detail-specimen{min-height:100px;padding-block:18px}
  .detail-footer{position:static}
  .compare-dialog{padding-top:22px}
  .hero{padding-block:30px}
}
@media(hover:none){
  .font-card:hover{transform:none;box-shadow:none}
  .primary-button:hover{transform:none}
}