/* Layout: a black-and-gold cover with ivory pages inside, sitting on the salon's charcoal wall. Two pages side by side on a laptop, one full page on a phone. */
:root{
  --ink:#121318; --wall:#1d2026; --line:#2d3038; --cream:#f3ece1; --muted:#aaa397;
  --gold:#ca994f; --gold-hi:#f8d79f; --gold-lo:#9c7238;
  --paper:#f5efe3; --paper-2:#ece3d2; --type:#221d17; --type-2:#6b6153; --rule:#d9ccb4; --gold-ink:#8f6a33;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased;overflow:hidden;
  background-image:radial-gradient(1200px 700px at 50% 45%,rgba(202,153,79,.10),transparent 70%)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--ink)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
.app{height:100%;display:grid;grid-template-rows:auto 1fr auto}

/* top bar */
.bar{display:flex;align-items:center;gap:14px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.bar a{color:var(--muted);text-decoration:none;font-size:14px;display:inline-flex;gap:8px;align-items:center}
.bar a:hover{color:var(--cream)}
.bar .mark{width:34px;height:auto}
.bar .ttl{font-family:var(--display);font-size:18px;margin-right:auto;white-space:nowrap}
.bar .ttl small{font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-left:8px}
@media (max-width:520px){.bar .ttl small{display:none}}

/* stage */
.stage{position:relative;display:grid;place-items:center;min-height:0;padding:clamp(8px,2.5vh,28px) max(12px,env(safe-area-inset-right,0px)) clamp(8px,2vh,20px) max(12px,env(safe-area-inset-left,0px))}
.book-wrap{position:relative;width:100%;max-width:1180px;height:100%;display:grid;place-items:center}
#book{position:relative}
#book .page{background:var(--paper);color:var(--type);overflow:hidden;container-type:size}
.shadowed{filter:drop-shadow(0 28px 50px rgba(0,0,0,.55))}

/* ---------- pages ---------- */
.pg{position:absolute;inset:0;padding:7cqh 8cqw 9cqh;display:flex;flex-direction:column;gap:2.2cqh;
  background:linear-gradient(90deg,rgba(0,0,0,.07),transparent 7%) left/100% 100% no-repeat,var(--paper)}
.page.--right .pg,.pg.right{background:linear-gradient(270deg,rgba(0,0,0,.07),transparent 7%),var(--paper)}
.run{position:absolute;top:3.4cqh;left:8cqw;right:8cqw;display:flex;justify-content:space-between;font-size:max(9px,2.3cqw);letter-spacing:.22em;text-transform:uppercase;color:var(--type-2)}
.folio{position:absolute;bottom:3.6cqh;left:0;right:0;text-align:center;font-family:var(--display);font-size:max(11px,3cqw);color:var(--gold-ink)}
.eb{font-size:max(10px,2.6cqw);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);font-weight:400}
.h{font-family:var(--display);font-weight:400;line-height:1.02;font-size:max(26px,min(10.5cqw,7cqh));margin:0;color:var(--type)}
.h em{font-style:italic;color:var(--gold-ink)}
.txt{font-size:max(12.5px,min(3.7cqw,2.55cqh));line-height:1.55;color:var(--type-2);margin:0}
.orn{width:22cqw;height:auto;margin:.6cqh 0}
.prices{list-style:none;margin:0;padding:0;display:grid}
.prices li{display:flex;align-items:baseline;gap:2cqw;padding:.85cqh 0;border-bottom:1px solid var(--rule);font-size:max(12px,min(3.4cqw,2.3cqh))}
.prices .n{min-width:0}
.prices .d{flex:1;border-bottom:1px dotted #bfae92;transform:translateY(-.3em);min-width:12px}
.prices .p{color:var(--gold-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.prices .p small{font-size:.75em;letter-spacing:.08em;text-transform:uppercase;color:var(--type-2);margin-right:.3em}
.acts{display:flex;flex-wrap:wrap;gap:2cqw;margin-top:auto}
.b{display:inline-flex;align-items:center;justify-content:center;padding:max(9px,min(2.4cqw,1.6cqh)) max(14px,4cqw);border-radius:999px;font:500 max(12px,min(3.3cqw,2.2cqh))/1 var(--body);letter-spacing:.03em;text-decoration:none;border:1px solid var(--gold-ink);cursor:pointer;background:none;color:var(--type)}
.b.gold{background:linear-gradient(120deg,var(--gold) 0%,var(--gold-hi) 50%,var(--gold) 100%);border-color:transparent;color:#1a1408}
.note{font-size:max(11px,2.9cqw);color:var(--type-2);margin:0}

/* photo page */
.ph{position:absolute;inset:0}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,10,12,.72))}
.ph .cap{position:absolute;left:7cqw;right:7cqw;bottom:6cqh;z-index:1;color:#fff8ec;display:grid;gap:.6cqh}
.ph .num{font-family:var(--display);font-size:max(40px,18cqw);line-height:.9;color:var(--gold-hi)}
.ph .cap span{font-size:max(11px,2.8cqw);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.ph-frame{position:absolute;inset:3.2cqw;border:1px solid rgba(248,215,159,.55);pointer-events:none;z-index:1}

/* line-art page (services without photos yet) */
.art{display:grid;place-items:center;align-content:center;gap:3cqh;text-align:center;background:radial-gradient(circle at 50% 42%,#fffaf0,var(--paper) 60%,var(--paper-2))}
.art svg{width:56cqw;height:auto;overflow:visible}
.art path,.art circle{fill:none;stroke:var(--gold-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.art .dot{fill:var(--gold-ink);stroke:none}
.art .num{font-family:var(--display);font-size:max(36px,15cqw);color:var(--gold-ink);line-height:1}
.art p{font-size:max(12px,3.2cqw);color:var(--type-2);max-width:60cqw;margin:0}

/* cover */
.cover{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:4cqh;text-align:center;color:var(--cream);
  background-color:#17191e;background-size:16cqw 16cqw}
.cover::before{content:"";position:absolute;inset:3.5cqw;border:1px solid rgba(202,153,79,.6);pointer-events:none}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,transparent 20%,rgba(10,11,14,.82) 75%);pointer-events:none}
.cover > *{position:relative;z-index:1}
.cover svg{width:52cqw;height:auto}
.cover .t{font-family:var(--display);font-size:max(22px,8cqw);letter-spacing:.02em}
.cover .t em{color:var(--gold-hi)}
.cover .s{font-size:max(10px,2.6cqw);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* contents */
.toc{list-style:none;margin:0;padding:0;display:grid;counter-reset:t}
.toc li{border-bottom:1px solid var(--rule)}
.toc button{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:3cqw;width:100%;padding:1.3cqh 0;font-size:max(13px,min(4cqw,2.7cqh));color:var(--type)}
.toc button:hover .n,.toc button:focus-visible .n{color:var(--gold-ink)}
.toc .i{font-family:var(--display);font-style:italic;color:var(--gold-ink);min-width:7cqw}
.toc .d{flex:1;border-bottom:1px dotted #bfae92;transform:translateY(-.3em)}
.toc .pn{font-variant-numeric:tabular-nums;color:var(--type-2);font-size:.85em}
.toc button:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}

/* controls */
.ctl{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.ctl button{height:42px;min-width:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--cream);font:400 14px var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.ctl button:hover{border-color:var(--gold)}
.ctl .pos{min-width:92px;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.ctl svg{width:18px;height:18px}
@media (max-width:420px){.ctl .lbl{display:none}}

/* corner-lift hint (drawn by us only when the page-turn library's own corner can't be used) */
.hint{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}
.tip{position:absolute;z-index:6;white-space:nowrap;font-size:13px;color:var(--cream);background:rgba(18,19,24,.88);border:1px solid rgba(248,215,159,.45);padding:6px 11px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .35s;transform:translate(-100%,-100%)}

/* fallback when the page-turn library can't load: swipeable pages */
.fallback #book{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;width:100%;height:100%}
.fallback #book .page{flex:0 0 100%;height:100%;scroll-snap-align:center;position:relative}
@media (min-width:900px){.fallback #book .page{flex-basis:50%}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);opacity:0;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:999px;font-size:14px;z-index:60;transition:all .3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

html[lang="fa"]{--body:"Vazirmatn","Segoe UI",Tahoma,sans-serif;--display:"Bodoni Moda","Vazirmatn",Georgia,serif}
.sel{user-select:all}
.pg strong{color:var(--type);font-weight:400}