:root{
  --bg:#EDEBEF;--field:#F8F7F9;--ink:#2A1A25;--muted:#5D4C58;--line:rgba(42,26,37,.14);
  --accent:#5E2A4C;--accent-h:#4C203D;--on-accent:#F8F2F6;--coral:#B04A37;--ok:#2F6B4F;--bad:#A3392B;
  --gut:clamp(16px,5vw,64px);
  --display:'Amiri',serif;--body:'Vazirmatn',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:#B9AFB7 var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-size:18px;line-height:1.8;background:var(--bg);color:var(--ink);font-family:var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2{font-family:var(--display);font-weight:700;text-wrap:balance}
h2{font-size:35px;line-height:1.4}
[lang=en] h1,[lang=en] h2,html[lang=en] h1,html[lang=en] h2{line-height:1.25}

/* header */
.top{display:flex;align-items:center;gap:32px;padding:24px var(--gut);max-width:1280px;margin:0 auto}
.mark{font-family:var(--display);font-size:28px;text-decoration:none;line-height:1}
.top .wide{display:flex;gap:26px;margin-inline-start:auto;font-size:16px}
.top nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.top nav a:hover{color:var(--ink)}
.lang{font-size:14px;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;min-height:36px;display:inline-flex;align-items:center}
.lang:hover{border-color:var(--muted)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font-size:15px;border:1px solid var(--line);border-radius:999px;padding:6px 16px;min-height:40px;display:flex;align-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:var(--field);border-radius:16px;padding:10px;display:grid;min-width:200px;box-shadow:0 18px 40px -20px rgba(42,26,37,.45);z-index:20}
.menu nav a{padding:10px 12px;border-radius:10px;color:var(--ink)}
.menu nav a:hover{background:var(--bg)}

/* hero */
.hero{max-width:880px;margin:0 auto;padding:56px var(--gut) 72px;text-align:center;display:grid;gap:26px;justify-items:center}
.hero h1{font-size:clamp(38px,5vw,64px);line-height:1.45}
html[lang=en] .hero h1{line-height:1.2}
.lead{color:var(--muted);max-width:34em}
.honest{font-size:15px;color:var(--muted)}
.acts{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;border:0;font:inherit;font-size:17px;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--accent-h)}
.btn[disabled]{opacity:.6;cursor:progress}
.link{color:var(--ink);text-underline-offset:9px;text-decoration-thickness:1px}
.portrait{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.portrait img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 30%;border-radius:20px}
figcaption{font-size:13px;color:var(--muted);margin-top:12px}
.portrait figcaption{text-align:center}

/* work */
.work{max-width:760px;margin:0 auto;padding:104px var(--gut) 0}
.work h2{text-align:center;margin-bottom:32px}
.rows{list-style:none}
.rows li{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows b{font-family:var(--display);font-weight:700;font-size:22px}
.rows span{color:var(--muted)}

/* wall */
.wallzone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1280px;margin:104px auto 0;padding:0 var(--gut);gap:64px;align-items:start}
.wallzone .side{position:sticky;top:24px}
.wallzone .side img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:20px}
.wall-p{color:var(--muted);margin-top:8px}
.say{display:grid;gap:10px;margin-top:32px;background:var(--field);padding:28px;border-radius:20px;box-shadow:0 18px 40px -24px rgba(42,26,37,.35)}
.say label{font-size:15px;color:var(--muted)}
.say label i{font-style:normal;opacity:.8;font-size:13px;margin-inline-start:6px}
.say textarea,.say input{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--bg);border:1px solid transparent;border-radius:14px;padding:14px 16px;resize:none}
.say textarea::placeholder,.say input::placeholder{color:var(--muted);opacity:.85}
.say textarea:focus,.say input:focus{outline:2px solid var(--accent);outline-offset:1px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.pair div{display:grid;gap:8px;align-content:start}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.send{display:flex;align-items:center;gap:20px;margin-top:8px;flex-wrap:wrap}
.send small,.privacy{color:var(--muted);font-size:14px}
.status{font-size:15px;min-height:0}
.status:empty{display:none}
.status.ok{color:var(--ok)}
.status.bad{color:var(--bad)}
.entries{margin-top:48px}
.quiet{color:var(--muted);font-size:15px}
.entry{background:var(--field);border-radius:16px;padding:24px 26px;margin-top:16px;box-shadow:0 10px 30px -22px rgba(42,26,37,.4)}
.said{font-family:var(--display);font-size:23px;line-height:1.7;overflow-wrap:anywhere}
.who{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:8px}
.who .name{color:var(--ink)}
.who .sl{direction:ltr;unicode-bidi:isolate}
.reply{display:flex;gap:14px;align-items:flex-start;margin-top:18px}
.reply img{width:36px;height:36px;border-radius:50%;flex:none;margin-top:4px}
.reply p{font-size:17px;overflow-wrap:anywhere}
.rname{font-family:var(--display);font-weight:700;color:var(--coral);margin-inline-end:6px}

/* footer */
.foot{max-width:760px;margin:0 auto;padding:104px var(--gut) 96px;text-align:center;display:grid;justify-items:center;gap:28px}
.foot>div{display:grid;justify-items:center}
.foot p{color:var(--muted);margin:8px 0 22px}
.mail{color:var(--muted);font-size:15px;text-underline-offset:6px}

/* coming soon */
.soon{max-width:760px;margin:0 auto;padding:96px var(--gut) 24px;text-align:center;display:grid;gap:24px;justify-items:center}
.soon h1{font-size:clamp(40px,6vw,64px);line-height:1.4}

.rk-title{width:100%;font:inherit;font-size:20px;font-weight:500;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--field);margin:6px 0}

/* diary */
.diary{max-width:720px;margin:0 auto;padding:80px var(--gut) 32px;display:grid;gap:22px}
.diary>h1{font-size:clamp(40px,6vw,64px);line-height:1.4;text-align:center}
.diary>.lead{margin:0 auto;text-align:center}
.posts{display:grid;gap:56px;margin:28px 0 12px}
.post{display:grid;gap:12px;padding-top:28px;border-top:1px solid var(--line)}
.post h2{font-size:clamp(26px,3.4vw,34px);line-height:1.45}
.post p{max-width:36em}
.post-day{font-size:14px;color:var(--muted);letter-spacing:.02em}
.diary>.link{justify-self:center}

@media (max-width:960px){
  .wallzone{grid-template-columns:1fr;gap:28px;margin-top:72px}
  .wallzone .side{position:relative;top:0}
  .wallzone .side img{aspect-ratio:1/1;object-position:50% 14%}
}
@media (max-width:860px){
  .top .wide{display:none}
  .menu{display:block;margin-inline-start:auto}
}
@media (max-width:760px){
  body{font-size:17px}
  .top{gap:12px;padding:18px var(--gut)}
  h2{font-size:28px}
  .hero{padding-top:28px}
  .portrait img{aspect-ratio:4/3;object-position:50% 22%}
  .work,.foot{padding-top:72px}
  .rows li{grid-template-columns:1fr;gap:4px;padding:18px 0}
  .pair{grid-template-columns:1fr}
  .say{padding:20px}
  .entry{padding:20px}
  .said{font-size:21px}
}

/* Roky's review page */
.rk-main{max-width:760px;margin:0 auto;padding:48px var(--gut) 80px}
.rk-main h1{font-size:40px;margin-bottom:8px}
.rk-main h2{font-size:26px;margin-top:40px}
.rk-small{font-size:14px;color:var(--muted)}
.rk-bar{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.rk-bar p{margin-inline-end:auto}
.rk-link{background:none;border:0;font:inherit;font-size:15px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;padding:0 6px}
.rk-bad{color:var(--bad)}
.rk-text{font-size:19px;margin-bottom:6px;white-space:pre-wrap}
.rk-reply{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--bg);border:1px solid transparent;border-radius:14px;padding:12px 14px;margin:6px 0 12px;resize:vertical}
.rk-reply:focus{outline:2px solid var(--accent);outline-offset:1px}
.rk-acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.rk-empty{margin-top:12px}

/* English: Noto Serif Italic for the name and the headings (Roky 2026-11-15) */
html[lang=en]{--display:'Noto Serif',Georgia,serif}
html[lang=en] h1,html[lang=en] h2,html[lang=en] .mark{font-style:italic;font-weight:500}