@import url('https://fonts.googleapis.com/css2?family=Parastoo:wght@400;500;600;700&display=swap');

:root { --ink:#0a2854; --deep:#061d41; --paper:#f4f9fd; --line:#9cb5d0; --gold:#a4662c; --muted:#315273; --font:"Parastoo",Tahoma,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--deep); background:var(--paper); font:16px/1.9 var(--font); }
a { color:inherit; }
.shell { width:min(1120px,calc(100% - 48px)); margin:auto; }
.site-header { position:sticky; z-index:10; top:0; border-bottom:1px solid rgba(90,126,164,.32); background:rgba(248,252,255,.92); box-shadow:0 5px 18px rgba(10,40,84,.05); backdrop-filter:blur(14px); }
.header-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:27px; font-weight:600; text-decoration:none; }
.brand::before { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--gold); content:"م"; font-size:15px; font-weight:700; }
.back-link { min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 14px; border:1px solid rgba(156,181,208,.8); border-radius:999px; color:var(--ink); background:rgba(255,255,255,.66); font-size:13px; font-weight:600; text-decoration:none; transition:.2s ease; }
.back-link:hover { border-color:var(--gold); color:var(--gold); background:#fffaf4; transform:translateY(-1px); }
.journal-hero { padding:76px 0 84px; color:white; background:linear-gradient(90deg,rgba(6,29,65,.91),rgba(6,29,65,.44)),url('../assets/theory-of-music.webp') center/cover; }
.eyebrow { margin:0 0 10px; color:#f0c68e; font-size:11px; font-weight:700; letter-spacing:.12em; }
h1 { max-width:700px; margin:0; font-size:clamp(48px,8vw,88px); line-height:1.05; }
.journal-hero p:not(.eyebrow) { max-width:650px; margin:20px 0 0; color:#e4eef8; font-size:18px; }
.journal { padding:58px 0 80px; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.section-title h2 { margin:0; color:var(--ink); font-size:34px; }
.section-title p { margin:0; color:var(--gold); font-size:12px; font-weight:700; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.post-card { display:flex; flex-direction:column; min-height:350px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(233,243,251,.88)); box-shadow:0 10px 30px rgba(10,40,84,.08); text-decoration:none; transition:transform .2s,box-shadow .2s,border-color .2s; }
.post-cover { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; }
.post-body { display:flex; flex:1; flex-direction:column; padding:28px; }
.post-card:hover { transform:translateY(-5px); border-color:var(--gold); box-shadow:0 18px 36px rgba(10,40,84,.15); }
.post-number { color:var(--gold); font-size:12px; font-weight:700; }
.post-card h2 { margin:22px 0 10px; color:var(--ink); font-size:29px; line-height:1.3; }
.post-card p { margin:0; color:var(--muted); font-size:14px; }
.read-more { margin-top:auto; padding-top:22px; color:var(--ink); font-size:13px; font-weight:700; }
.article { padding:64px 0 88px; }
.article-head { max-width:800px; margin-bottom:28px; }
.article-head h1 { color:var(--ink); font-size:clamp(42px,7vw,72px); }
.article-head .meta { color:var(--gold); font-size:13px; font-weight:700; }
.article-cover { position:relative; width:min(100%,640px); aspect-ratio:16/9; margin:0 0 42px; padding:13px; overflow:hidden; border:1px solid #9cb5d0; border-radius:20px; background:linear-gradient(145deg,#eaf3fb,#fdfefe); box-shadow:0 18px 45px rgba(10,40,84,.13); }
.article-cover::before { position:absolute; inset:0; content:""; opacity:.42; background:repeating-linear-gradient(45deg,rgba(16,66,123,.04) 0 1px,transparent 1px 8px); pointer-events:none; }
.article-cover img { position:relative; display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:12px; box-shadow:0 8px 20px rgba(6,29,65,.16); }
.article-copy { max-width:760px; padding:clamp(26px,5vw,55px); border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.8); box-shadow:0 14px 40px rgba(10,40,84,.08); }
.article-copy h2 { margin-top:36px; color:var(--ink); font-size:29px; }
.article-copy p { margin:18px 0 0; color:#24476e; }
.article-copy blockquote { margin:32px 0; padding:18px 24px; border-right:3px solid var(--gold); color:var(--ink); background:#edf5fb; font-size:19px; }
.site-footer { padding:24px 0; color:#c7d8ea; background:var(--deep); font-size:12px; }
@media (max-width:760px) { .shell { width:calc(100% - 32px); } .header-inner { min-height:70px; gap:10px; } .brand { gap:7px; font-size:20px; } .brand::before { width:27px; height:27px; font-size:13px; } .back-link { min-height:40px; padding:0 11px; font-size:11px; white-space:nowrap; } .journal-hero { padding:48px 0 54px; } .journal-hero h1 { font-size:44px; } .journal-hero p:not(.eyebrow) { font-size:16px; } .journal { padding:36px 0 52px; } .section-title { align-items:flex-start; flex-direction:column; gap:3px; margin-bottom:18px; } .section-title h2 { font-size:29px; } .post-grid { grid-template-columns:1fr; gap:14px; } .post-card { display:grid; grid-template-columns:42% 58%; min-height:170px; border-radius:16px; } .post-cover { height:100%; min-height:170px; aspect-ratio:auto; object-position:center; } .post-body { padding:16px 17px; } .post-card h2 { margin:8px 0 6px; font-size:20px; line-height:1.45; } .post-card p { display:none; } .read-more { margin-top:auto; padding-top:8px; font-size:12px; } .article { padding:36px 0 56px; } .article-head { margin-bottom:20px; } .article-head h1 { font-size:38px; line-height:1.2; } .article-cover { width:100%; aspect-ratio:16/10; margin-bottom:26px; padding:8px; border-radius:16px; } .article-cover img { border-radius:10px; } .article-copy { padding:24px 20px; border-radius:14px; font-size:17px; line-height:2; } .article-copy h2 { margin-top:30px; font-size:25px; } .article-copy blockquote { margin:26px 0; padding:15px 18px; font-size:17px; } }