:root{--desk:#eee8dc;--paper:#fcf9f0;--ink:#3b3b38;--blue:#345c9c;--pink:#ebbacb;--line:#3b3b3825}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--desk);color:var(--ink);font-family:'IBM Plex Sans Arabic',sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}button{background:none;border:0;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:4px}h1,h2,h3,p,figure,blockquote{margin:0}h1,h2{font-family:'Noto Naskh Arabic';font-weight:400;line-height:1.3}p{line-height:1.9}img,video{display:block;width:100%;height:100%;object-fit:cover}header{display:flex;justify-content:space-between;align-items:center;max-width:1500px;margin:auto;padding:22px 4vw}.identity{display:flex;align-items:center;gap:15px}.identity img{width:54px;height:54px;transform:rotate(-7deg);border-radius:4px}.identity>span{font-size:18px}.identity small{display:block;font-size:10px;margin-top:5px;color:#6b6b63}header nav{display:flex;gap:30px;font-size:12px}header nav a:last-child{color:var(--blue);border-bottom:1px dashed var(--blue)}.desktop{padding:10px 5vw 60px;max-width:1500px;margin:auto}.desk-heading{display:flex;justify-content:space-between;align-items:center;padding:10px 10px 30px}.desk-heading p{font:22px/1.5 'Noto Naskh Arabic';transform:rotate(-3deg)}.desk-heading p span{color:var(--blue)}.desk-heading button{font-size:10px}.bookmarks{display:flex;gap:8px;margin:0 35px}.bookmarks button{background:#e8adc3;border-radius:6px 6px 0 0;padding:13px 25px 18px;transform:translateY(5px);font-size:12px;transition:transform .2s}.bookmarks button:nth-child(2){background:#cad9c2}.bookmarks button:nth-child(3){background:#d8cee2}.bookmarks button:nth-child(4){background:#d5deec}.bookmarks button[aria-pressed=true]{transform:translateY(0);padding-top:16px}.book{position:relative;background:var(--paper);box-shadow:0 5px 0 #d9d2c6,0 9px 0 #f8f4e8,0 13px 0 #d0c8b9,0 28px 50px #5f574528;border-radius:6px 3px 3px 6px;perspective:1500px}.binding{position:absolute;width:35px;top:15px;bottom:15px;right:calc(50% - 17px);background:linear-gradient(90deg,#0000,#55452a16 45%,#55452a35 50%,#fff6 55%,#0000);z-index:2;pointer-events:none}.book-spread{display:grid;grid-template-columns:1fr 1fr;min-height:660px}.book-spread.turning{animation:turn .55s ease both}@keyframes turn{from{opacity:.25;transform:rotateY(-7deg);transform-origin:right}to{opacity:1;transform:rotateY(0)}}.paper{position:relative;padding:50px 45px 60px;min-width:0}.words{background:repeating-linear-gradient(0deg,transparent,transparent 31px,#887f6210 32px);border-left:1px solid #80705318}.drawing{background:#f5f0e3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px 35px 60px}.page-number{position:absolute;bottom:18px;left:30px;color:#7a776c;font:17px 'Noto Naskh Arabic'}.words .page-number{right:30px;left:auto}.small-note{font:21px/1.6 'Noto Naskh Arabic';color:var(--blue)}.cover-words h1{font-size:88px;margin:18px 0 0;letter-spacing:-2px}.cover-words h1 span{color:var(--blue)}.blue-line{width:160px;border-bottom:3px solid var(--blue);transform:rotate(-4deg);border-radius:50%;margin:5px 0 35px}.cover-line{font:30px/1.55 'Noto Naskh Arabic';margin-bottom:20px}.cover-line em,h2 em{font-style:normal;color:var(--blue)}.body-note{font-size:14px;line-height:2.1;margin-top:18px;max-width:400px}.hand-link{font:21px/1.7 'Noto Naskh Arabic';color:var(--blue);display:inline-block;margin-top:22px;padding:0;border-bottom:1px dashed var(--blue)}.heart{font:55px 'Noto Naskh Arabic';position:absolute;bottom:35px;left:40px;transform:rotate(-12deg);color:#c47b95}.taped-art{position:relative;padding:12px;background:#fffdf8;width:100%;height:515px;transform:rotate(2deg);box-shadow:0 4px 12px #4c46381b}.taped-art video,.taped-art img{object-position:27% center}.cover-drawing .taped-art{transform:rotate(-3deg)}.tape{position:absolute;top:-15px;left:calc(50% - 43px);width:86px;height:30px;background:#e3d6b6b0;transform:rotate(6deg);clip-path:polygon(2% 0,98% 3%,100% 95%,0 100%)}.pencil-note{font:20px 'Noto Naskh Arabic';color:var(--blue);margin-top:22px;transform:rotate(-3deg);text-align:center}.words h2{font-size:64px;margin:15px 0 25px}.reference{display:block;position:relative;width:160px;margin:30px 35px 10px 0;padding:7px 7px 15px;background:white;box-shadow:0 4px 10px #4c463815;transform:rotate(-8deg)}.reference img{height:170px}.reference span{display:block;text-align:center;font:13px 'Noto Naskh Arabic';margin-top:8px}.tiny-note{font-size:10px;color:#777465;margin-top:25px}.art-zoom{position:absolute;left:20px;bottom:20px;background:var(--paper);width:35px;height:35px;display:grid;place-items:center;font-size:22px}blockquote{font:36px/1.5 'Noto Naskh Arabic';color:var(--blue);margin:30px 0;transform:rotate(-3deg)}.scribble{display:block;font:80px/1 'Bodoni Moda';color:#7373674f;letter-spacing:-6px;margin-top:25px;transform:rotate(-10deg)}.artist-words .signature{width:110px;height:110px;margin-top:20px;transform:rotate(-8deg)}.portrait-print{position:relative;background:#fffdf8;padding:12px 12px 28px;transform:rotate(4deg);box-shadow:0 5px 15px #3b3b3819;width:100%}.portrait-print img{height:420px}.portrait-print figcaption{text-align:center;font:26px 'Noto Naskh Arabic';color:var(--blue);margin-top:20px}.artist-drawing{background:#efd5dd}.book-controls{display:flex;justify-content:space-between;align-items:center;margin-top:35px;padding:0 10px;font-size:12px}.book-controls span{font:20px 'Noto Naskh Arabic';color:#777363}.book-controls button:disabled{opacity:.35;cursor:default}.memory-wall{padding:75px 5vw 100px;background:#dfdfd1;position:relative}.wall-heading{margin:auto;text-align:center;position:relative;max-width:480px;background:#f9f7ee;padding:30px 20px;transform:rotate(-2deg);box-shadow:0 5px 15px #3b3b3810}.pin{position:absolute;top:-8px;left:50%;width:15px;height:15px;background:#b77888;border-radius:50%;box-shadow:1px 3px 3px #0003}.wall-heading h2{font-size:44px}.wall-heading p{font-size:12px;margin-top:10px}.pinned-works{max-width:1400px;margin:65px auto 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:25px;align-items:start;direction:ltr}.pinned-works a{padding:10px 10px 20px;background:#fbf9f1;transform:rotate(-5deg);box-shadow:0 6px 14px #37392f20;position:relative;transition:transform .3s}.pinned-works a:before{content:'';position:absolute;top:-11px;left:38%;width:50px;height:23px;background:#e3c4c8a0;transform:rotate(-8deg)}.pinned-works a:nth-child(even){transform:rotate(5deg);margin-top:45px}.pinned-works a:hover{transform:rotate(0) translateY(-7px)}.pinned-works img{height:260px}.pinned-works span{display:block;text-align:center;font:19px 'Noto Naskh Arabic';color:var(--blue);margin-top:15px;direction:rtl}.letter-section{text-align:center;padding:85px 5vw 50px;background:#f2e1e3}.letter-section>h2{font-size:53px;margin:12px 0 45px}.envelope{max-width:840px;margin:auto;background:#e6c3c9;box-shadow:0 15px 35px #8350571c;position:relative}.envelope:before{content:'';position:absolute;inset:8px;border:1px dashed #9f6c7545;pointer-events:none}.envelope>button{position:relative;min-height:330px;width:100%;text-align:right;padding:70px 60px;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(145deg,transparent 49.8%,#d4a8b12e 50%,transparent 50.5%)}.postage{position:absolute;left:35px;top:30px;border:4px dotted #f2dedf;padding:10px;color:#8b5267;font:22px/1.2 'Bodoni Moda';text-align:center;transform:rotate(-8deg)}.address{font:29px/1.8 'Noto Naskh Arabic';margin-top:20px}.address b{font-weight:400}.seal{border:1px solid #9c667a;border-radius:50%;padding:16px 20px;font:17px 'Noto Naskh Arabic';color:#8b5267;align-self:flex-end;transform:rotate(5deg)}.letter-paper{text-align:right;background:var(--paper);margin:0 25px;position:relative;padding:55px 65px;box-shadow:0 3px 20px #83505715;animation:unfold .5s ease both}@keyframes unfold{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}#close-letter{position:absolute;left:20px;top:20px;font-size:11px}.letter-salutation{font:30px 'Noto Naskh Arabic';color:var(--blue);margin-bottom:30px}form{display:grid;gap:22px}form label{display:grid;gap:9px;font-size:14px}input,select,textarea{width:100%;padding:12px;border:0;border-bottom:1px solid #345c9c60;background:transparent;border-radius:0;font-size:14px;min-width:0}textarea{resize:vertical}.letter-row{display:grid;grid-template-columns:1fr 1fr;gap:30px}.send-letter{display:block;text-align:center;border:1px solid var(--blue);color:var(--blue);padding:15px 20px;font-size:14px;background:#345c9c08}.form-note{font-size:11px;line-height:1.9;color:#777365}#message-review>p:first-child{font-size:14px}pre{font:14px/2 'IBM Plex Sans Arabic';white-space:pre-wrap;background:#efeade;padding:20px}#edit-letter{font-size:13px;padding:15px 0;color:var(--blue)}.notes{max-width:900px;margin:0 auto;padding:60px 5vw}.notes h2{font-size:35px;margin-bottom:20px}.notes details{border-bottom:1px dashed #3b3b3840;padding:20px 0}.notes summary{cursor:pointer;font-size:14px}.notes details p{font-size:13px;margin-top:15px;color:#696659}footer{display:flex;gap:30px;justify-content:center;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding:30px 5vw;font-size:11px}footer a:last-child{margin-right:auto}dialog{background:var(--paper);border:0;max-width:calc(100vw - 25px);max-height:92svh;width:850px;padding:50px 25px 25px;position:fixed;color:var(--ink)}dialog::backdrop{background:#3b3b3870;backdrop-filter:blur(5px)}dialog>button{position:absolute;top:15px;left:15px}dialog img{height:68svh;object-fit:contain}dialog>a{display:block;text-align:center;margin-top:20px;font-size:12px}body:has(dialog[open]){overflow:hidden}[hidden]{display:none!important}
@media(max-width:1000px){.desktop{padding:10px 4vw 50px}.paper{padding:35px 30px 55px}.drawing{padding:40px 25px 55px}.book-spread{min-height:650px}.cover-words h1{font-size:72px}.words h2{font-size:52px}.body-note{font-size:12px}.taped-art{height:490px}.pinned-works{gap:18px}.pinned-works img{height:210px}.pinned-works span{font-size:15px}.portrait-print img{height:340px}}
@media(max-width:700px){header{padding:20px 5vw;gap:12px}.identity{gap:9px}.identity img{width:43px;height:43px}.identity>span{font-size:14px}.identity small{font-size:8px}header nav{gap:14px;font-size:10px}.desktop{padding:0 5vw 40px}.desk-heading{padding:10px 0 25px}.desk-heading p{font-size:18px}.desk-heading button{font-size:9px}.bookmarks{gap:5px;margin:0 8px}.bookmarks button{font-size:10px;padding:12px 11px 14px}.bookmarks button[aria-pressed=true]{padding-top:12px}.book-spread{grid-template-columns:1fr;min-height:0}.binding{display:none}.paper{padding:35px 30px 45px}.words{border:0;border-bottom:1px solid #80705318}.cover-words h1{font-size:70px;margin:12px 0 0}.cover-words h1 br{display:none}.cover-words h1 span{display:block}.blue-line{margin:3px 0 25px;width:120px}.cover-line{font-size:26px;margin-bottom:15px}.body-note{font-size:13px;margin-top:15px}.cover-words .body-note br{display:none}.small-note{font-size:18px}.hand-link{font-size:19px;margin-top:18px}.heart{font-size:40px;bottom:20px;left:25px}.drawing{padding:35px 25px 50px}.taped-art{height:430px;padding:9px}.pencil-note{font-size:18px;margin-top:20px}.page-number{font-size:15px;bottom:12px}.book-controls{font-size:11px;margin-top:30px;padding:0}.book-controls span{font-size:17px}.words h2{font-size:55px;margin:12px 0 20px}.words h2 br{display:none}.words h2 em{display:block}.reference{margin:25px auto 0;width:140px}.reference img{height:155px}.tiny-note{text-align:center;margin-top:25px}.graphite-words blockquote{font-size:31px;margin:20px 0}.scribble{position:absolute;left:25px;bottom:20px;font-size:48px;opacity:.4}.portrait-print img{height:330px}.portrait-print figcaption{font-size:23px}.artist-words .signature{width:85px;height:85px}.memory-wall{padding:60px 6vw 65px}.wall-heading h2{font-size:36px}.wall-heading p{font-size:11px}.pinned-works{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;margin-top:45px}.pinned-works a{padding:7px 7px 16px}.pinned-works a:nth-child(even){margin-top:25px}.pinned-works a:last-child{grid-column:1/-1;justify-self:center;width:55%;margin-top:5px}.pinned-works img{height:200px}.pinned-works span{font-size:16px;margin-top:12px}.letter-section{padding:60px 5vw 40px}.letter-section>h2{font-size:39px;margin-bottom:35px}.envelope>button{padding:75px 25px 30px;min-height:310px}.address{font-size:24px;margin-top:15px}.postage{font-size:17px;left:20px;top:20px;padding:8px}.seal{font-size:15px;padding:13px 16px;margin-top:20px}.letter-paper{margin:0 10px;padding:55px 22px 30px}.letter-row{grid-template-columns:1fr;gap:22px}form label{font-size:13px}input,select,textarea{font-size:13px;padding:10px 0}.send-letter{font-size:12px}.letter-salutation{font-size:27px}.form-note{font-size:10px}.notes{padding:45px 6vw}.notes h2{font-size:31px}.notes summary{font-size:13px}.notes details p{font-size:12px}footer{gap:18px;font-size:10px}footer a:last-child{width:100%;margin:0;text-align:center}pre{font-size:12px;padding:15px}}@media(max-width:360px){header nav a:first-child{display:none}.bookmarks button{font-size:9px;padding:12px 9px 14px}.cover-words h1{font-size:61px}.paper{padding-right:25px;padding-left:25px}.taped-art{height:360px}.pinned-works img{height:170px}.pinned-works span{font-size:14px}.book-controls{font-size:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media(max-width:700px){.cover-drawing{grid-row:1}.cover-drawing .taped-art{height:370px}.cover-drawing{padding-top:30px;padding-bottom:45px}.cover-words{border-top:1px solid #80705318}.book-controls{position:relative}}@media(max-width:360px){.cover-drawing .taped-art{height:320px}}