@font-face{font-family:Catalog;src:local("Noto Sans Arabic");font-display:swap}
:root{color-scheme:light;--green:#365846;--ink:#252821;--paper:#f8f6ef;--line:#e5dfd2}
*{box-sizing:border-box}
body{margin:0;font-family:Catalog,Tahoma,Arial,sans-serif;color:var(--ink);background:var(--paper)}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid #986735;outline-offset:3px}
.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}
header{background:#fffdf8;border-bottom:1px solid var(--line)}
.bar{min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:clamp(14px,2.2vw,20px)}
.brand img{width:43px;height:43px;object-fit:contain;border-radius:10px}
.header-contact,.back{display:inline-flex;align-items:center;min-height:44px;padding:8px 15px;border:1px solid var(--line);border-radius:9px;font-weight:700}
.directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-block:26px 50px;border-top:1px solid var(--line)}
.directory h2{grid-column:1/-1;margin:0 0 8px;font-size:clamp(23px,4vw,33px)}
.directory a{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:72px;padding:12px 15px;border:1px solid var(--line);border-radius:10px;background:#fffdf8;font-weight:700;line-height:1.6}
.directory a span{color:var(--green);flex:none}
.directory a:hover,.header-contact:hover,.back:hover{background:#eee9de}
.directory .order-link{color:var(--green);border-color:#a8b4a6}
footer{border-top:1px solid var(--line)}
.contact{display:flex;gap:12px 25px;flex-wrap:wrap;padding-block:20px;font-size:14px}
.catalog{padding-block:48px}.section-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:24px}.section-head h1{margin:0;font-size:clamp(22px,4vw,39px)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:16px;align-items:start}.page{position:relative;display:block;width:100%;max-width:560px;margin-inline:auto;background:#f9f7ec;border:1px solid var(--line);overflow:hidden;border-radius:7px}.page img{display:block;width:100%;height:100%}.page button,.page a{position:absolute;background:transparent;border:0;padding:0}.open-page{inset:0}.page a:focus-visible,.page button:focus-visible{outline-offset:-3px}.cover{grid-column:1/-1}.viewer-controls{display:flex;align-items:center;justify-content:center;gap:15px;position:sticky;top:0;padding:10px;background:#fff;z-index:1}.viewer-controls button{border:1px solid var(--line);border-radius:4px;background:#eff5eb;color:var(--green);padding:6px 13px}.viewer-controls button:disabled{opacity:.35}dialog{border:0;border-radius:10px;background:var(--paper);color:var(--green);padding:0 0 10px;width:min(100% - 24px,660px);max-height:94dvh}dialog::backdrop{background:#091b16b8}#full-page{padding:8px}

@media(max-width:760px){
 .bar{min-height:65px}.brand img{width:36px;height:36px}.header-contact{font-size:13px;padding-inline:10px}
 .directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-top:19px}
 .directory a{font-size:14px;padding-inline:10px;min-height:65px}.directory .order-link{grid-column:1/-1}
 .section-head{align-items:flex-start;flex-direction:column}.catalog{padding-top:30px}
}

:root {
 --green: #375744;
 --ink: #262523;
 --paper: #f7f5f0;
 --line: #ded8cf;
 --surface: #fffefa;
 --accent: #74492d;
}
header { background: var(--surface); }
.bar { min-height: 74px; }
.brand img { width: 48px; height: 48px; }
.header-contact, .back { border-radius: 999px; background: var(--surface); }
.directory {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 12px;
 padding-block: 28px 44px;
}
.directory a {
 min-height: 82px;
 padding: 12px 16px;
 background: var(--surface);
 border-radius: 14px;
}
.directory a span { color: var(--accent); }
.directory .order-link {
 grid-column: 1 / -1;
 justify-content: center;
 min-height: 50px;
 color: var(--ink);
 border-color: #c4ab95;
 background: #eee3d7;
}
.directory .order-link:hover { background: #e8d8c9; }
.viewer-controls button { background: var(--surface); color: var(--ink); }
dialog { color: var(--ink); }
dialog::backdrop { background: #211e1bc2; }
.page { border-radius: 12px; }
footer { background: var(--surface); }

@media (max-width: 760px) {
 .wrap { width: calc(100% - 32px); }
 .bar { min-height: 62px; }
 .brand img { width: 38px; height: 38px; }
 .directory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-block: 18px 32px; }
 .directory a { min-height: 62px; padding-inline: 10px; }
 .viewer-controls { gap: 8px; }
}

.hero {
 margin-block: clamp(16px, 3vw, 34px);
 padding: clamp(30px, 7vw, 84px) clamp(18px, 5vw, 64px);
 text-align: center;
 background: #f2e9db;
 border: 1px solid #d8c7b2;
 border-radius: 22px;
}
.cover-brand {
 margin: 0 0 14px;
 color: var(--accent);
 font-size: clamp(14px, 2vw, 18px);
 font-weight: 700;
}
.hero h1 {
 margin: 0;
 font-size: clamp(34px, 7vw, 78px);
 line-height: 1.35;
}
.cover-description {
 margin: 12px 0 24px;
 color: #51483e;
 font-size: clamp(16px, 2.4vw, 22px);
 line-height: 1.7;
}
.browse-catalog {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 min-height: 46px;
 padding: 8px 20px;
 border-radius: 999px;
 background: var(--ink);
 color: var(--surface);
 font-weight: 700;
}
.browse-catalog:hover { background: var(--accent); }