@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Montserrat:wght@400;500;600&family=Playfair+Display:wght@500;600&display=swap');
:root{--ground:#f1f0ee;--ink:#063f47;--accent:#91855a;--soft:#e6e4db;--display:'Playfair Display',Georgia,serif;--text:'Montserrat',system-ui,sans-serif;--gutter:clamp(22px,4vw,72px)}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--ground);color:var(--ink);font:16px/1.6 var(--text)}
button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
header{padding:28px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0}header img{display:block;width:138px;height:42px;object-fit:contain}nav button{background:var(--soft);border:0;border-radius:999px;color:var(--ink);padding:10px 20px;min-height:44px;font-size:14px;font-weight:600}
main{display:flex;flex:1}.hero{width:100%;max-width:1720px;margin-inline:auto;padding:28px var(--gutter) 64px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(32px,5vw,80px)}.hero-content{min-width:0;padding-bottom:8px}
h1,p{margin:0}h1{font-family:var(--display);font-weight:500;letter-spacing:-.045em;line-height:1.02;font-size:clamp(72px,8.2vw,120px);text-wrap:balance}.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.75;max-width:40ch;margin-top:30px;text-wrap:pretty}.detail{font-size:13px;line-height:1.7;margin-top:22px;max-width:42ch}
.entry-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}form{margin:0}button.primary,button.secondary{display:flex;align-items:center;justify-content:center;gap:18px;padding:17px 24px;border:0;border-radius:999px;min-height:56px;background:var(--ink);color:var(--ground);font-size:14px;font-weight:600;transition:transform .2s,background-color .2s}button.secondary{background:var(--soft);color:var(--ink)}button:hover{transform:translateY(-2px)}button:active{transform:translateY(1px)}button:disabled{opacity:.65;cursor:wait}.primary:hover{background:#0b5058}.secondary:hover{background:#dddbce}#entry-error{margin-top:20px;font-size:14px;font-weight:600}
.hero-art{margin:0;overflow:hidden}.hero-art img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;animation:art-arrive .8s backwards;transition:transform .5s}.hero-art:hover img{transform:scale(1.025)}
[dir=rtl]{--display:'Cairo',sans-serif;--text:'Cairo',sans-serif}[dir=rtl] h1{letter-spacing:0;line-height:1.2;font-size:clamp(58px,6.1vw,94px)}[dir=rtl] .lead{line-height:1.8}[dir=rtl] .primary>span[aria-hidden]{transform:scaleX(-1)}
@media(max-width:900px){header{padding-block:22px}.hero{grid-template-columns:1fr;gap:32px;padding-block:20px 36px;align-content:center}.hero-content{max-width:660px;width:100%;margin-inline:auto;padding:0}h1{font-size:clamp(54px,8vw,72px)}h1 br{display:none}.lead{margin-top:22px;max-width:48ch}.entry-actions{margin-top:24px}.detail{max-width:none;margin-top:18px}.hero-art{width:min(100%,580px);margin-inline:auto}[dir=rtl] h1{font-size:clamp(46px,6vw,64px)}}
@media(max-width:600px){header{padding-block:18px}header img{width:112px;height:36px}nav button{padding:9px 16px;font-size:13px}.hero{gap:24px;padding-block:16px 24px}h1{font-size:clamp(42px,13.5vw,58px)}.lead{font-size:16px;line-height:1.65;margin-top:18px}.entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.entry-actions button{width:100%;padding:14px 12px;min-height:50px;font-size:13px;gap:10px;white-space:nowrap}.detail{font-size:13px;margin-top:16px}.hero-art{max-width:380px}[dir=rtl] h1{font-size:clamp(40px,11vw,48px)}[dir=rtl] .entry-actions button{font-size:14px}}
@media(max-width:900px) and (max-height:740px){.hero-art{display:none}.hero{padding-block:12px 28px;gap:0}header{padding-block:14px}h1,[dir=rtl] h1{font-size:clamp(42px,8vw,64px)}.lead{font-size:16px;margin-top:20px}.detail{font-size:13px}}
@media(min-width:901px) and (max-height:700px){header{padding-block:18px}.hero{padding-block:16px 32px}h1{font-size:clamp(64px,7vw,92px)}.lead{margin-top:22px;font-size:17px}.entry-actions{margin-top:24px}.detail{margin-top:18px}}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes art-arrive{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
header>a,nav>button,h1,.lead,.detail,.entry-actions form{animation:arrive .5s both}.lead{animation-delay:.06s}.entry-actions form{animation-delay:.12s}.entry-actions form+form{animation-delay:.18s}.detail{animation-delay:.22s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}