:root{--ink:#0f172a;--teal:#0eb4a0;--dark:#007a74;--mint:#b2f5ea}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);font-family:Tajawal,sans-serif;background:radial-gradient(circle at 8% 12%,rgba(255,255,255,.8),transparent 25%),linear-gradient(145deg,#e9fffb 0%,#b2f5ea 44%,#35c8b7 100%);background-attachment:fixed}.page-wrapper{width:min(1220px,100%);margin:auto;padding:32px 22px}header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 26px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.8);border-radius:22px;box-shadow:0 14px 38px rgba(0,77,73,.1);backdrop-filter:blur(16px)}.nav-logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:900;text-decoration:none;white-space:nowrap}.nav-logo i{color:var(--teal)}.nav-links{display:flex;align-items:center;gap:22px;padding:0;margin:0;list-style:none}.nav-links a{color:#475569;font-weight:700;text-decoration:none;transition:.25s;white-space:nowrap}.nav-links a:hover,.nav-links a.active{color:var(--dark)}.hero{position:relative;display:flex;justify-content:space-between;align-items:center;min-height:280px;margin:34px 0 30px;padding:clamp(32px,5vw,60px);overflow:hidden;color:white;background:linear-gradient(125deg,rgba(15,23,42,.97),rgba(0,122,116,.91));border-radius:30px;box-shadow:0 24px 55px rgba(15,23,42,.2)}.hero-copy{position:relative;z-index:1;max-width:690px}.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--mint);font-weight:800}.hero h1{margin:10px 0 5px;font-size:clamp(3rem,7vw,5.8rem);line-height:1}.hero p{margin:18px 0 0;max-width:620px;color:rgba(255,255,255,.78);font-size:1.1rem;line-height:1.9}.hero-mark{display:grid;position:relative;z-index:1;width:170px;place-items:center;flex:0 0 auto}.hero-mark span{color:transparent;background:linear-gradient(145deg,#fff,var(--mint),var(--teal));background-clip:text;-webkit-background-clip:text;font:italic 700 9rem/.8 Georgia,serif;filter:drop-shadow(8px 9px 0 rgba(0,0,0,.15))}.hero-mark i{position:absolute;right:0;bottom:-4px;color:var(--mint);transform:rotate(-18deg)}.writings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;direction:ltr}.writing-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;background:rgba(255,255,255,.93);border:1px solid white;border-radius:25px;box-shadow:0 16px 40px rgba(15,23,42,.13);cursor:zoom-in;transition:.35s;direction:ltr}.writing-card:hover,.writing-card:focus-visible{transform:translateY(-7px);box-shadow:0 25px 55px rgba(0,91,84,.2);outline:2px solid var(--teal);outline-offset:3px}.image-wrap{display:grid;height:390px;place-items:center;padding:13px;overflow:hidden;background:linear-gradient(145deg,#fffdf7,#e5fbf7)}.writing-card.tall .image-wrap{height:680px}.image-wrap img{width:100%;height:100%;object-fit:contain;border-radius:15px;transition:.45s}.writing-card:hover img{transform:scale(1.015)}.card-info{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 22px;border-top:1px solid #e2e8f0}.card-info span{color:var(--dark);font:700 .78rem Urbanist,sans-serif;letter-spacing:.12em;text-transform:uppercase}.card-info h2{margin:4px 0 0;color:var(--ink);font:800 clamp(1.1rem,2vw,1.4rem) Urbanist,sans-serif}.card-info button{display:grid;width:43px;aspect-ratio:1;place-items:center;flex:0 0 auto;color:white;background:var(--dark);border:0;border-radius:50%;cursor:pointer}footer{margin-top:36px;padding:25px;text-align:center;color:#164e4a;font-weight:700}.lightbox{display:grid;position:fixed;inset:0;z-index:1000;place-items:start center;padding:75px 18px 35px;overflow:auto;visibility:hidden;opacity:0;background:rgba(3,12,18,.94);backdrop-filter:blur(14px);transition:.3s}.lightbox.open{visibility:visible;opacity:1}.lightbox figure{width:min(1100px,100%);margin:0;text-align:center}.lightbox img{display:block;width:100%;height:auto;background:white;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.55)}.lightbox figcaption{padding:17px;color:white;font:700 1.15rem Urbanist,sans-serif}.lightbox-close{position:fixed;top:18px;left:18px;z-index:2;display:grid;width:46px;aspect-ratio:1;place-items:center;color:var(--ink);background:white;border:0;border-radius:50%;font-size:1.2rem;cursor:pointer}@media(max-width:820px){header{flex-direction:column}.nav-links{width:100%;justify-content:center;gap:15px;flex-wrap:wrap}.hero-mark{width:110px}.hero-mark span{font-size:6.5rem}.writings-grid{grid-template-columns:1fr}.writing-card.tall .image-wrap{height:620px}}@media(max-width:520px){.page-wrapper{padding:13px}.hero{min-height:auto;padding:30px 22px}.hero-mark{display:none}.hero p{font-size:1rem}.image-wrap{height:280px}.writing-card.tall .image-wrap{height:480px}.nav-links{font-size:.9rem}.card-info{padding:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}