@font-face{font-family:'Zukhruf Brand';src:url('/assets/brand/wordmark.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* One owner for brand, header and collection geometry. Reader settings affect
   botanical content; the masthead deliberately uses fixed branding typography. */
.masthead{--brand-height:78px;display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr);align-items:center;gap:20px;position:relative;z-index:20;width:100%;max-width:none;height:var(--brand-height);min-height:var(--brand-height);margin:0;padding-block:0;padding-inline:max(var(--page-gutter),calc((100% - var(--layout-width))/2 + var(--page-gutter)));border:0;border-radius:0;background:var(--surface);box-shadow:none;direction:rtl}
.masthead .wordmark{display:flex;align-items:center;gap:12px;min-width:0;width:190px;height:78px;text-decoration:none;color:var(--ink);white-space:nowrap}
.masthead .wordmark>span{display:flex;align-items:center;justify-content:center;flex:none;width:96px;height:64px}.masthead .brand-words{width:100%}
.brand-artwork{display:block;object-fit:contain;flex:none;aspect-ratio:1;width:64px;height:64px}
.brand-words{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.masthead .brand-arabic,.brand-editorial .brand-arabic{font-family:'Zukhruf Brand',Amiri,serif!important;font-weight:400;font-style:normal;line-height:1.35;letter-spacing:normal}
.masthead .brand-arabic{font-size:31px}
.brand-latin{font-family:Georgia,'Times New Roman',serif!important;font-weight:400;font-style:normal;direction:ltr;unicode-bidi:isolate;letter-spacing:.23em;padding-inline-start:.23em;font-size:11px;line-height:1.4}
.masthead>nav{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;width:auto;margin:0;padding:0;height:100%;flex-wrap:nowrap}
.masthead nav a,.masthead .header-controls a,.masthead .header-controls button,.masthead .header-controls button span{font-family:'Noto Kufi Arabic',sans-serif!important;font-size:14px;font-weight:400;line-height:1.5;white-space:nowrap}
.masthead nav a,.masthead .header-controls a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;text-decoration:none;border-radius:8px}
.masthead nav a{width:78px}.masthead nav a[href="/browse/"]{width:144px}
.masthead nav a:hover,.masthead nav a[aria-current=page],.masthead .header-controls a:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.masthead .header-controls{display:flex;align-items:center;justify-content:flex-end;gap:6px;height:44px;direction:rtl;min-width:0;margin:0}
.masthead .header-controls #theme{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;min-width:44px;height:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.masthead .header-controls svg{width:21px;height:21px;flex:none}

/* The engraving and names remain a balanced horizontal editorial lockup. */
.atlas-intro{max-width:980px;margin-block:24px 30px;gap:12px}
.atlas-intro h1.brand-editorial{display:flex;align-items:center;justify-content:center;gap:32px;margin:0;padding:0;flex-wrap:nowrap;font-weight:400;line-height:1.35}
.brand-editorial .brand-artwork{width:208px;height:208px}
.brand-editorial .brand-arabic{display:flex;align-items:center;justify-content:center;font-size:66px;color:var(--accent)}
.brand-editorial .brand-latin{font-size:14px;letter-spacing:.28em;padding-inline-start:.28em;margin-top:4px}
.brand-editorial .brand-subtitle{font-family:'Zukhruf Brand',Amiri,serif!important;font-size:25px;line-height:1.5;margin-top:7px;color:var(--muted)}
.atlas-intro .lead{text-align:center}.atlas-intro .quran{margin-block:8px 14px}
.home-search{width:min(100%,640px)}.home-search>button{flex:none;min-width:62px;padding-inline:15px}
/* Genuine asynchronous work has a reserved status slot; no artificial delay. */
.loading-status{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:30px;vertical-align:middle;color:var(--accent)}
.loading-status .zukhruf-loading-star{visibility:hidden}
.zukhruf-loading-star{display:inline-block;width:26px;height:26px;font:26px/1 BotanicalSymbol,sans-serif;direction:ltr;unicode-bidi:isolate;text-align:center;transform-origin:center center}
.loading-status[aria-busy=true] .zukhruf-loading-star{visibility:visible}
.zukhruf-loading-star.is-loading{animation:zukhruf-star-rotate 2.2s linear infinite}
@keyframes zukhruf-star-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.zukhruf-loading-star.is-loading{animation:none}}
.search-status{display:flex;align-items:center;gap:8px;min-height:44px}.search-status>p{margin-block:8px}
.random-discovery{display:flex;align-items:center;justify-content:center;gap:4px;margin:18px auto 22px}
.text-random{background:transparent;color:var(--accent);border:1px solid var(--line);border-radius:7px;min-height:44px;padding:7px 18px;font:inherit;font-size:var(--type-ui);cursor:pointer}
.text-random:hover{border-color:var(--accent)}
/* Shared static and live-search cards: one image ratio and reserved name slots. */
.plant-grid{--card-title-size:clamp(16px,calc(var(--text-read)*.84),21px);--card-latin-size:clamp(14px,calc(var(--text-read)*.72),18px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plant-card{display:flex;min-width:0;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden;box-shadow:none}
.plant-card-link{display:flex;flex-direction:column;min-width:0;width:100%;height:100%;color:var(--ink);text-decoration:none}
.plant-card .card-photo{display:block;flex:none;order:0;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0;border:0;border-radius:0;background:var(--paper)}
.plant-card .card-placeholder{display:grid;place-items:center;font:42px/1 BotanicalSymbol,sans-serif;color:var(--muted)}
.plant-card .card-names{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:2px;min-width:0;padding:12px 11px 10px;text-align:center}
.plant-card h3.card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;min-height:0;height:3.2em;font-size:var(--card-title-size);line-height:1.6;font-weight:600;margin:0;text-align:center}
.plant-card p.scientific{display:block;min-height:0;height:1.55em;font:italic var(--card-latin-size)/1.55 Georgia,'Times New Roman',serif;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;direction:ltr}
.plant-card h3.scientific{font-family:Georgia,'Times New Roman',serif!important;font-weight:400;font-style:italic}
/* A Latin-only title still reserves the second name slot, matching Arabic cards. */
.plant-card .card-names:not(:has(p.scientific))::after{content:'';display:block;height:calc(var(--card-latin-size)*1.55)}
.plant-card:hover{border-color:var(--accent)}.plant-card:focus-within{outline:2px solid var(--accent);outline-offset:3px}.plant-card-link:focus-visible{outline-offset:-3px}
@media(min-width:1400px){.plant-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.species-section .plant-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px) and (min-width:980px){.masthead{grid-template-columns:minmax(176px,1fr) auto minmax(176px,1fr);gap:8px}.masthead .wordmark{width:176px;gap:9px}.masthead nav a,.masthead .header-controls a{padding-inline:8px}.masthead .header-controls #theme span{display:none}.masthead .header-controls #theme{width:44px;padding:0}}
@media(max-width:1023px){.plant-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}}
@media(max-width:979px){
 .masthead{--brand-height:66px;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-inline:var(--page-gutter)}
 .masthead .wordmark{width:max-content;max-width:100%;height:66px;gap:10px}.masthead .brand-artwork{width:52px;height:52px}.masthead .wordmark>span{width:80px;height:52px}.masthead .brand-arabic{font-size:29px}.masthead .brand-latin{display:none}
 .masthead .header-controls{gap:5px}.masthead .header-controls #theme{padding:0;width:44px}.masthead .header-controls #theme span,.masthead .header-controls .header-search{display:none}
 .masthead .header-controls .info-link{display:inline-flex;min-width:44px;padding-inline:8px}
 .masthead>nav{display:none}

}
@media(max-width:639px){
 :root{--page-gutter:16px}
 .atlas-intro{margin-block:18px 24px;gap:10px}.atlas-intro h1.brand-editorial{gap:23px}.brand-editorial .brand-artwork{width:120px;height:120px}.brand-editorial .brand-arabic{font-size:47px}.brand-editorial .brand-latin{font-size:11px;margin-top:2px}.brand-editorial .brand-subtitle{font-size:20px;margin-top:4px}
 .atlas-intro .lead{font-size:16px}.atlas-intro .quran{margin-block:8px 12px}.home-search input{font-size:16px}.home-plants .section-heading{gap:8px}.home-plants .text-link{white-space:nowrap}
 .plant-grid{grid-template-columns:minmax(0,1fr);gap:9px}
 .plant-card .card-names{padding:10px 8px 9px}
 /* The homepage and catalog share the same compact horizontal phone rows. */
 .plant-grid .plant-card-link{flex-direction:row;align-items:center;min-height:108px}
 .plant-grid .card-photo{width:96px;height:108px;aspect-ratio:auto;align-self:stretch;object-fit:cover}
 .plant-grid .card-names{flex:1;align-items:stretch;padding:10px 13px;text-align:right}
 .plant-grid h3.card-title,.plant-grid p.scientific{text-align:right}
 .species-heading h1{overflow-wrap:anywhere}.species-heading .scientific{overflow-wrap:anywhere;max-width:100%}
 .gallery-controls{width:100%;box-sizing:border-box}.viewer-toolbar{flex-wrap:wrap}.viewer-scroll{min-width:0}.botanical-table dd{overflow-wrap:anywhere}
 .discovery-list{grid-template-columns:minmax(0,1fr)}
 .home-plants{margin-block:22px 12px}
 .home-explore{margin-block:12px 16px;padding-top:12px}
 .home-explore .discovery-columns{margin-block:0 12px;gap:12px}
 .home-explore .discovery-columns>section{margin-block:0}
 .home-explore .discovery-columns h3{margin-bottom:6px}
 .home-explore .discovery-list a{padding-block:6px;min-height:44px}
}
@media(max-width:359px){.masthead{gap:5px;padding-inline:10px}.masthead .wordmark{gap:6px}.masthead .brand-arabic{font-size:28px}.masthead .wordmark>span{width:72px}.masthead .header-controls{gap:2px}.atlas-intro h1.brand-editorial{gap:17px}.brand-editorial .brand-artwork{width:112px;height:112px}.brand-editorial .brand-arabic{font-size:43px}.site-footer{column-gap:7px}.site-footer .footer-identity{white-space:normal}.site-footer .footer-hashasha{padding-inline:8px}}

/* The contact is a quiet, unmistakable text link, without a box or raw URL. */
.site-footer .footer-hashasha{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px;border:0;border-radius:0;background:none;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;line-height:1.5}
.site-footer .footer-link-name{font-size:var(--type-body);font-weight:500}
.site-footer .footer-hashasha:hover{text-decoration-thickness:2px;color:var(--ink)}

/* A white outer mat on Green preserves the artwork's original black border. */
:root[data-theme=pine] .brand-artwork{outline:1px solid #fff;outline-offset:0}
:root[data-theme=pine] .brand-editorial .brand-artwork{outline-width:2px}
.site-footer .footer-identity{justify-self:start}
@media(max-width:559px){.site-footer .footer-hashasha{grid-column:2;grid-row:1;justify-self:end}}

/* Mobile contact moves below the verse; the desktop footer stays unchanged. */
.mobile-home-contact{display:none}
@media(max-width:979px){
 .atlas-intro .mobile-home-contact{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 22px;margin:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent);font-size:17px;line-height:1.6;text-decoration:underline;text-underline-offset:4px}
 .atlas-intro .mobile-home-contact:hover{border-color:var(--accent)}
}

/* Preserve desktop text actions; compact screens use icons to the input's left. */
.atlas-intro .home-search .random-discovery{flex:none;margin:0}
.atlas-intro .home-search button{font-size:clamp(15px,var(--type-ui),19px);white-space:nowrap}
.atlas-intro .home-search .text-random{min-width:0;min-height:44px}
.home-action-icon{display:none}
@media(max-width:979px){
 .atlas-intro .home-search{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;align-items:center;gap:8px;direction:rtl}
 .atlas-intro .home-search input{width:100%;min-width:0;height:44px;min-height:44px;padding:8px 12px;font-size:16px;line-height:1.5}
 .atlas-intro .home-search button{display:inline-grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent)}
 .atlas-intro .home-search .home-action-label{display:none}
 .atlas-intro .home-search .home-action-icon{display:block;width:22px;height:22px;pointer-events:none}
 .atlas-intro .home-search .random-discovery{display:block;position:relative;width:44px;height:44px}
 .atlas-intro .home-search .random-discovery .loading-status{position:absolute;inset:0;width:44px;height:44px;pointer-events:none}
 .atlas-intro .home-search .random-discovery:has(.loading-status[aria-busy=true]) .home-action-icon{visibility:hidden}
}