/*
IRAN Sharp fonts are considered a proprietary software. To gain
information about the laws regarding the use of these fonts, please
visit www.fontiran.com
---------------------------------------------------------------------
This set of fonts are used in this project under the license: (PIKEL5V)
---------------------------------------------------------------------
The required FontLicense.txt file is placed next to the font files in /Fonts.
*/
@font-face{
font-family:"IRANSharp";
font-style:normal;
font-weight:300;
src:url("Fonts/eot/iransharp_light_web.eot");
src:url("Fonts/eot/iransharp_light_web.eot?#iefix") format("embedded-opentype"),
url("Fonts/woff2/iransharp_light_web.woff2") format("woff2"),
url("Fonts/woff/iransharp_light_web.woff") format("woff"),
url("Fonts/ttf/iransharp_light_web.ttf") format("truetype");
font-display:swap;
}

@font-face{
font-family:"IRANSharp";
font-style:normal;
font-weight:400;
src:url("Fonts/eot/iransharp_regular_web.eot");
src:url("Fonts/eot/iransharp_regular_web.eot?#iefix") format("embedded-opentype"),
url("Fonts/woff2/iransharp_regular_web.woff2") format("woff2"),
url("Fonts/woff/iransharp_regular_web.woff") format("woff"),
url("Fonts/ttf/iransharp_regular_web.ttf") format("truetype");
font-display:swap;
}

@font-face{
font-family:"IRANSharp";
font-style:normal;
font-weight:700;
src:url("Fonts/eot/iransharp_bold_web.eot");
src:url("Fonts/eot/iransharp_bold_web.eot?#iefix") format("embedded-opentype"),
url("Fonts/woff2/iransharp_bold_web.woff2") format("woff2"),
url("Fonts/woff/iransharp_bold_web.woff") format("woff"),
url("Fonts/ttf/iransharp_bold_web.ttf") format("truetype");
font-display:swap;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#0d0d0d;
font-family:tahoma,sans-serif;
height:100vh;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
color:white;
}

.fa,
body[data-lang="fa"] .lang-toggle button{
font-family:"IRANSharp", tahoma, sans-serif;
}

.lang-toggle{
position:fixed;
top:30px;
z-index:999;
}

body[data-lang="fa"] .lang-toggle{
left:30px;
right:auto;
}

body[data-lang="en"] .lang-toggle{
left:auto;
right:30px;
}

.lang-toggle button{
background:none;
border:1px solid white;
color:white;
padding:10px 18px;
cursor:pointer;
letter-spacing:.15em;
}

.page-nav{
position:fixed;
left:50%;
bottom:24px;
transform:translateX(-50%);
z-index:10000;
display:flex;
gap:14px;
align-items:center;
justify-content:center;
pointer-events:none;
}

.page-nav-button{
width:46px;
height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.5);
border-radius:999px;
background:rgba(0,0,0,.42);
color:white;
font-size:1.35rem;
line-height:1;
cursor:pointer;
backdrop-filter:blur(10px);
box-shadow:0 10px 28px rgba(0,0,0,.28);
pointer-events:auto;
transition:background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}

.page-nav-button:hover{
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.75);
transform:translateY(-2px);
}

.page-nav-button:disabled{
opacity:.28;
cursor:not-allowed;
transform:none;
}

.page-progress{
position:fixed;
top:24px;
left:50%;
transform:translateX(-50%);
z-index:9998;
padding:5px 11px;
border:1px solid rgba(255,255,255,.1);
border-radius:999px;
background:rgba(0,0,0,.18);
color:rgba(255,255,255,.42);
font-size:11px;
letter-spacing:.12em;
backdrop-filter:blur(6px);
pointer-events:none;
}

.page-progress:empty,
.page-progress[hidden]{
display:none;
}

.zine-wrapper{
width:95vw;
max-width:1400px;
height:90vh;
position:relative;
display:flex;
justify-content:center;
align-items:center;
perspective:2500px;
padding:34px;
background:
radial-gradient(circle at top, rgba(255,255,255,.08), transparent 42%),
linear-gradient(145deg, #1a1a1a, #050505 70%);
border:1px solid rgba(255,255,255,.08);
box-shadow:
0 30px 90px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(255,255,255,.03),
inset 0 0 40px rgba(255,255,255,.02);
}

.cover,
.back-cover{
width:min(34vw, 460px);
max-width:88vw;
height:min(82vh, 680px);
aspect-ratio:2 / 3;
background:#111;
border:2px solid rgba(255,255,255,.85);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%) rotateY(0deg);
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.cover{
z-index:20;
transition:transform .8s ease, opacity .8s ease;
transform-origin:left center;
backface-visibility:hidden;
}

.back-cover{
z-index:18;
transition:transform .8s ease, opacity .8s ease;
transform-origin:right center;
backface-visibility:hidden;
}

.cover > img,
.back-cover > img{
width:100%;
height:100%;
object-fit:contain;
position:absolute;
inset:0;
z-index:0;
}

.progressive-image{
opacity:.55;
image-rendering:pixelated;
transform:scale(1.03);
transition:opacity .9s ease, filter .9s ease, transform .9s ease;
}

.progressive-image.image-loading{
filter:blur(16px) contrast(92%);
}

.progressive-image.image-loaded{
opacity:1;
filter:none;
image-rendering:auto;
transform:scale(1);
}

.cover::after,
.back-cover::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.1) 45%, rgba(0,0,0,.3));
z-index:1;
}

.cover-overlay{
position:relative;
z-index:2;
text-align:center;
padding:36px 28px;
text-shadow:0 2px 20px rgba(0,0,0,.65);
}

.cover-subtitle{
font-size:.78rem;
letter-spacing:.35em;
text-transform:uppercase;
opacity:.82;
margin:-2px 0 34px;
}

.cover h1{
font-size:4.4rem;
letter-spacing:.18em;
margin-bottom:18px;
}

.cover p{
opacity:.8;
letter-spacing:.08em;
}

.cover-instruction{
font-size:.78rem;
}

.back-cover-overlay{
position:absolute;
top:62%;
left:50%;
transform:translate(-50%, -50%);
z-index:3;
width:72%;
padding:0;
background:none;
}

.back-credit{
display:flex;
flex-direction:column;
gap:6px;
font-size:.78rem;
letter-spacing:.08em;
opacity:.92;
text-align:center;
}

.back-social-links{
position:absolute;
top:74%;
left:50%;
transform:translate(-50%, -50%);
z-index:3;
display:flex;
align-items:center;
justify-content:center;
gap:14px;
}

.back-social-link{
width:40px;
height:40px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.2);
border-radius:999px;
background:rgba(0,0,0,.36);
backdrop-filter:blur(8px);
box-shadow:0 10px 24px rgba(0,0,0,.24);
transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.back-social-link:hover{
transform:translateY(-2px);
border-color:rgba(255,255,255,.68);
background:rgba(255,255,255,.1);
}

.back-social-link img{
width:22px;
height:22px;
display:block;
object-fit:contain;
filter:invert(1);
opacity:.9;
}

.back-cover #backCoverImage{
top:13%;
left:50%;
transform:translateX(-50%);
bottom:auto;
width:50%;
height:auto;
max-height:34%;
object-fit:contain;
z-index:2;
}

.back-cover-links{
position:absolute;
bottom:38px;
left:50%;
transform:translateX(-50%);
z-index:3;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
width:78%;
}

.back-cover-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
max-width:82%;
padding:10px 14px;
border:1px solid rgba(255,255,255,.18);
color:rgba(255,255,255,.84);
font-size:.72rem;
letter-spacing:.06em;
line-height:1.35;
text-decoration:none;
text-align:center;
backdrop-filter:blur(8px);
}

button.back-cover-link{
font-family:inherit;
cursor:pointer;
appearance:none;
-webkit-appearance:none;
}

.back-cover-link:hover{
border-color:rgba(255,255,255,.68);
transform:translateY(-2px);
}

.donation-link{
background:
linear-gradient(135deg, rgba(5,10,8,.96), rgba(18,78,50,.42) 58%, rgba(75,137,82,.18)),
rgba(0,0,0,.42);
box-shadow:0 12px 30px rgba(0,0,0,.28);
}

.donation-link:hover{
background:
linear-gradient(135deg, rgba(5,10,8,.98), rgba(23,96,61,.5) 58%, rgba(95,160,98,.22)),
rgba(0,0,0,.38);
}

.digital-zine-link{
background:
linear-gradient(135deg, rgba(4,7,13,.96), rgba(20,59,116,.45) 58%, rgba(64,130,176,.2)),
rgba(0,0,0,.44);
box-shadow:0 12px 30px rgba(0,0,0,.3);
}

.digital-zine-link:hover{
background:
linear-gradient(135deg, rgba(4,7,13,.98), rgba(26,72,136,.52) 58%, rgba(74,145,195,.24)),
rgba(0,0,0,.4);
}

.donation-icon{
font-size:.82rem;
line-height:1;
opacity:.78;
}

.crypto-donation-overlay{
position:absolute;
inset:0;
z-index:40;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(0,0,0,.72);
backdrop-filter:blur(6px);
}

.crypto-donation-overlay[hidden]{
display:none;
}

.crypto-donation-modal{
position:relative;
width:min(92vw, 420px);
max-height:min(86vh, 560px);
overflow:auto;
padding:18px 16px 16px;
border:1px solid rgba(255,255,255,.14);
background:
linear-gradient(160deg, rgba(8,12,10,.98), rgba(18,52,36,.35) 55%, rgba(0,0,0,.92)),
#0a0a0a;
box-shadow:0 18px 48px rgba(0,0,0,.55);
}

.crypto-donation-close{
position:absolute;
top:10px;
right:10px;
width:28px;
height:28px;
border:1px solid rgba(255,255,255,.16);
background:rgba(0,0,0,.35);
color:rgba(255,255,255,.82);
font-size:1.1rem;
line-height:1;
cursor:pointer;
}

body[data-lang="fa"] .crypto-donation-close{
right:auto;
left:10px;
}

.crypto-donation-title{
margin:0 28px 6px;
font-size:.86rem;
letter-spacing:.06em;
text-align:center;
font-weight:400;
}

.crypto-donation-note{
margin:0 0 14px;
font-size:.66rem;
letter-spacing:.05em;
text-align:center;
opacity:.72;
}

.crypto-address-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}

.crypto-address-item{
display:grid;
grid-template-columns:32px minmax(0, 1fr) auto;
align-items:center;
gap:10px;
padding:10px;
border:1px solid rgba(255,255,255,.1);
background:rgba(0,0,0,.28);
}

.crypto-icon{
width:32px;
height:32px;
flex-shrink:0;
}

.crypto-address-meta{
min-width:0;
display:flex;
flex-direction:column;
gap:4px;
}

.crypto-label{
font-size:.62rem;
letter-spacing:.05em;
opacity:.86;
}

.crypto-address{
display:block;
font-size:.54rem;
line-height:1.4;
word-break:break-all;
color:rgba(255,255,255,.78);
font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
cursor:pointer;
}

.crypto-address:hover{
color:rgba(255,255,255,.95);
}

.crypto-copy-btn{
flex-shrink:0;
padding:6px 10px;
border:1px solid rgba(255,255,255,.18);
background:rgba(18,78,50,.35);
color:rgba(255,255,255,.88);
font-family:inherit;
font-size:.58rem;
letter-spacing:.05em;
cursor:pointer;
white-space:nowrap;
}

.crypto-copy-btn:hover{
border-color:rgba(255,255,255,.5);
}

.crypto-copy-btn.is-copied{
background:rgba(95,160,98,.42);
}

.crypto-copy-feedback{
min-height:1.2em;
margin:12px 0 0;
font-size:.62rem;
letter-spacing:.05em;
text-align:center;
opacity:.9;
color:rgba(143,214,154,.95);
}

body.crypto-modal-open{
overflow:hidden;
}

body.crypto-modal-open .lang-toggle,
body.crypto-modal-open .page-nav{
opacity:0;
pointer-events:none;
}

.hidden-text{
display:none !important;
}

.portrait-lock-message{
display:none;
}

.book{
width:100%;
height:100%;
display:none;
position:relative;
direction:ltr;
padding:18px;
background:
linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
linear-gradient(180deg, #141414, #090909);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.04),
inset 0 0 28px rgba(0,0,0,.45);
}

.spread{
width:100%;
height:100%;
display:none;
position:absolute;
top:18px;
left:18px;
width:calc(100% - 36px);
height:calc(100% - 36px);
}

.spread.active{
display:flex;
}

.paper{
width:50%;
height:100%;
background:#000;
position:relative;
overflow:hidden;
box-shadow:0 0 40px rgba(0,0,0,.45), inset 0 0 60px rgba(0,0,0,.05);
}

.photo-loader{
position:absolute;
inset:0;
z-index:2;
display:none;
align-items:center;
justify-content:center;
background:
radial-gradient(circle, rgba(0,0,0,.08), rgba(0,0,0,.58)),
rgba(0,0,0,.18);
pointer-events:none;
}

.photo-loader::before{
content:"";
width:48px;
height:48px;
background:url("Photos/photo-loading.gif") center / contain no-repeat;
filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
}

.paper.is-loading-photo .photo-loader{
display:flex;
}

.paper.has-photo-error .photo-loader{
display:none;
}

.paper.left{
border-right:1px solid rgba(0,0,0,.12);
}

.paper.right{
border-left:1px solid rgba(0,0,0,.12);
}

.paper img{
width:100%;
height:100%;
object-fit:contain;
filter:grayscale(100%) contrast(105%);
}

.paper img.progressive-image.image-loading{
filter:grayscale(100%) contrast(95%) blur(16px);
}

.paper img.progressive-image.image-loaded{
filter:grayscale(100%) contrast(105%);
}

.paper img.spread-fill{
width:200%;
height:100%;
max-width:none;
object-fit:contain;
position:absolute;
top:0;
}

.paper img.spread-fill.spread-left{
left:0;
}

.paper img.spread-fill.spread-right{
left:-100%;
}

.content{
padding:60px;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
text-align:left;
color:#111;
}

.intro-page{
background:
radial-gradient(circle at 20% 10%, rgba(255,255,255,.08), transparent 34%),
linear-gradient(145deg, #1f1f1f, #070707 78%);
}

.intro-content{
align-items:flex-start;
gap:16px;
max-width:78%;
color:#f4f4f4;
}

.intro-page.has-content{
display:flex;
}

.intro-page.has-content .intro-content{
width:100%;
}

body[data-lang="fa"] .cover-overlay{
direction:rtl;
text-align:center;
}

body[data-lang="fa"] .cover h1{
letter-spacing:0;
font-feature-settings:"kern" 1;
}

body[data-lang="fa"] .cover-subtitle.fa{
display:block;
text-align:left;
}

body[data-lang="fa"] .content{
direction:rtl;
text-align:right;
}

body[data-lang="fa"] .back-credit{
direction:rtl;
text-align:center;
}

body[data-lang="fa"] .back-cover-overlay{
left:50%;
right:auto;
}

body[data-lang="fa"] .back-cover #backCoverImage{
left:50%;
right:auto;
}

body[data-lang="fa"] .back-cover-link{
direction:rtl;
}

body[data-lang="en"] .cover-overlay{
direction:ltr;
text-align:center;
}

body[data-lang="en"] .content{
direction:ltr;
text-align:left;
}

body[data-lang="en"] .back-credit{
direction:ltr;
text-align:center;
}

body[data-lang="en"] .back-cover-overlay{
left:50%;
right:auto;
}

body[data-lang="en"] .back-cover #backCoverImage{
left:50%;
right:auto;
}

body[data-lang="en"] .back-cover-link{
direction:ltr;
}

.intro-page-blank{
background:
radial-gradient(circle at 80% 18%, rgba(255,255,255,.06), transparent 36%),
linear-gradient(180deg, #171717, #050505);
}

.small-label{
font-size:9px;
letter-spacing:.2em;
opacity:.6;
}

.title{
font-size:1.25rem;
line-height:2;
}

.text{
font-size:13px;
line-height:1.75;
opacity:.8;
max-width:90%;
}

.page-number{
position:absolute;
bottom:30px;
font-size:12px;
opacity:.5;
color:#111;
z-index:3;
}

.photo-copyright{
position:absolute;
left:50%;
bottom:7px;
transform:translateX(-50%);
z-index:4;
padding:4px 8px;
background:rgba(0,0,0,.18);
color:rgba(255,255,255,.42);
font-size:9px;
letter-spacing:.08em;
line-height:1;
text-transform:uppercase;
white-space:nowrap;
}

.left .page-number{
left:40px;
}

.right .page-number{
right:40px;
}

.back-cover{
display:none;
}

.back-cover.active{
display:flex;
}

@media (max-width:900px) and (orientation:portrait){
body{
width:100dvw;
height:100dvh;
overflow:hidden;
}

body.show-portrait-lock-message .zine-wrapper,
body.show-portrait-lock-message .lang-toggle,
body.show-portrait-lock-message .page-nav,
body.show-portrait-lock-message .page-progress{
filter:blur(10px);
transition:filter .35s ease;
}

body.show-portrait-lock-message .lang-toggle,
body.show-portrait-lock-message .page-nav,
body.show-portrait-lock-message .page-progress{
opacity:.35;
}

body.show-portrait-lock-message .portrait-lock-message{
display:flex;
}

.portrait-lock-message{
position:fixed;
inset:0;
z-index:20000;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(4,4,4,.28);
backdrop-filter:blur(2px);
}

.portrait-lock-card{
width:min(78vw, 280px);
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
padding:22px 20px 20px;
border:1px solid rgba(255,255,255,.24);
border-radius:24px;
background:#000;
box-shadow:0 22px 70px rgba(0,0,0,.44);
text-align:center;
}

.portrait-lock-card img{
width:76px;
height:76px;
object-fit:contain;
}

.portrait-lock-card p{
font-size:.9rem;
line-height:1.35;
letter-spacing:.02em;
}

.portrait-lock-card span{
color:rgba(255,255,255,.68);
font-size:.68rem;
line-height:1.45;
letter-spacing:.04em;
}

.lang-toggle{
left:50%;
right:auto;
transform:translateX(-50%) rotate(90deg);
}

body[data-lang="fa"] .lang-toggle{
top:30px;
bottom:auto;
left:50%;
right:auto;
}

body[data-lang="en"] .lang-toggle{
top:auto;
bottom:82px;
left:50%;
right:auto;
}

.page-nav{
top:calc(env(safe-area-inset-top, 0px) + 16px);
right:calc(env(safe-area-inset-right, 0px) + 12px);
bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
left:auto;
transform:none;
flex-direction:column;
justify-content:space-between;
gap:0;
}

.page-nav-button{
width:34px;
height:34px;
font-size:0;
background:rgba(0,0,0,.34);
border-color:rgba(255,255,255,.36);
color:rgba(255,255,255,.78);
box-shadow:0 6px 16px rgba(0,0,0,.18);
backdrop-filter:blur(6px);
}

.page-nav-button::before{
font-size:.95rem;
line-height:1;
}

.page-progress{
top:auto;
bottom:calc(env(safe-area-inset-bottom, 0px) + 24px);
left:auto;
right:calc(env(safe-area-inset-right, 0px) + 58px);
transform:rotate(90deg);
font-size:9px;
padding:4px 9px;
}

#prevBtn::before{
content:"↑";
}

#nextBtn::before{
content:"↓";
}

.zine-wrapper{
position:fixed;
top:50%;
left:50%;
width:100dvh;
max-width:none;
height:100dvw;
transform:translate(-50%, -50%) rotate(90deg);
transform-origin:center;
padding:0;
border:0;
}

.cover,
.back-cover{
width:auto;
max-width:none;
height:100%;
}

.back-cover-overlay{
top:61%;
left:50%;
width:70%;
}

.back-credit{
font-size:.58rem;
line-height:1.35;
gap:4px;
}

.back-social-links{
top:75%;
gap:9px;
}

.back-social-link{
width:30px;
height:30px;
}

.back-social-link img{
width:16px;
height:16px;
}

.back-cover #backCoverImage{
top:17%;
left:50%;
width:48%;
max-height:34%;
}

.back-cover-links{
bottom:20px;
width:76%;
gap:7px;
}

.back-cover-link{
padding:8px 11px;
font-size:.48rem;
}

body[data-lang="fa"] .back-cover-overlay{
left:50%;
right:auto;
}

body[data-lang="fa"] .back-cover #backCoverImage{
left:50%;
right:auto;
}

body[data-lang="en"] .back-cover-overlay{
left:50%;
right:auto;
}

body[data-lang="en"] .back-cover #backCoverImage{
left:50%;
right:auto;
}

.book{
padding:0;
}

.spread{
top:0;
left:0;
width:100%;
height:100%;
}

.spread.active{
display:flex;
flex-direction:row;
}

.paper{
width:50%;
height:100%;
}

.content{
padding:32px;
}

.intro-content{
gap:10px;
max-width:88%;
}

body[data-lang="en"] .intro-content{
gap:12px;
max-width:88%;
}

.small-label{
font-size:7px;
letter-spacing:.14em;
}

.title{
font-size:1.2rem;
}

body[data-lang="fa"] .title{
font-size:1.05rem;
line-height:1.85;
}

body[data-lang="en"] .title{
font-size:.95rem;
line-height:1.55;
max-width:100%;
overflow-wrap:anywhere;
}

.text{
font-size:10.5px;
line-height:1.65;
}

body[data-lang="en"] .text{
font-size:8.8px;
line-height:1.55;
max-width:100%;
overflow-wrap:anywhere;
}

.cover h1{
font-size:2.6rem;
}

.cover-instruction{
font-size:.52rem;
line-height:1.45;
}

.cover-subtitle{
font-size:.44rem;
letter-spacing:.18em;
margin-bottom:22px;
}

.crypto-donation-overlay{
padding:10px 8px;
}

.crypto-donation-modal{
width:min(94%, 380px);
max-height:min(92%, 520px);
padding:12px 10px 10px;
}

.crypto-donation-title{
margin:0 22px 4px;
font-size:.68rem;
}

.crypto-donation-note{
margin-bottom:8px;
font-size:.5rem;
}

.crypto-address-list{
gap:6px;
}

.crypto-address-item{
grid-template-columns:24px minmax(0, 1fr) auto;
gap:6px;
padding:7px;
align-items:start;
}

.crypto-icon{
width:24px;
height:24px;
}

.crypto-label{
font-size:.48rem;
}

.crypto-address{
font-size:.4rem;
line-height:1.35;
}

.crypto-copy-btn{
padding:4px 7px;
font-size:.44rem;
}

.crypto-copy-feedback{
margin-top:8px;
font-size:.48rem;
}
}

@media (max-width:900px) and (orientation:landscape){
.cover,
.back-cover{
width:min(34vw, 320px);
height:min(80vh, 480px);
}

.spread.active{
display:flex;
flex-direction:row;
}

.paper{
width:50%;
height:100%;
}

.title{
font-size:2rem;
}

.text{
font-size:13px;
}
}