/* Dharma Apps — головна сторінка: стос печа.
   Шрифти, бібліотека руху й картинки лежать у цій теці; з чужих серверів нічого не вантажиться. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/CormorantGaramond-italic-cyrillic-0.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/CormorantGaramond-italic-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/CormorantGaramond-normal-cyrillic-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/CormorantGaramond-normal-latin-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Geologica-normal-cyrillic-4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Geologica-normal-latin-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Geologica-normal-cyrillic-4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Geologica-normal-latin-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root { --bg: #201819; --cream: #EFE9DD; --soft: #C9B7AA; --saffron: #D89247;
        --sans: Geologica, system-ui, sans-serif; --serif: "Cormorant Garamond", Georgia, serif; }
* { box-sizing: border-box; }
/* сторінка темна: смуга прокручування теж темна; на телефоні посилання під пальцем не спалахують сірим прямокутником */
html { color-scheme: dark; -webkit-tap-highlight-color: transparent; }
h1 { margin: 0; font: inherit; }   /* заголовок сторінки — назва студії в шапці, вигляд їй дає .brand */
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--cream); font: 300 15px/1.5 var(--sans); }
a { color: inherit; text-decoration: none; }
/* перший екран — стос на всю висоту вікна; під ним лежить аркуш (.info), до якого веде знак «?» */
.first { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

header, footer { display: flex; justify-content: space-between; gap: 8px 20px; padding: 22px clamp(16px, 3vw, 34px); }
.brand { display: flex; align-items: center; gap: 13px; font: 500 22px/1.12 var(--serif); }
.brand img { width: 44px; }
.brand i { display: block; color: var(--soft); }
footer { align-items: flex-end; }

/* знак «?» у куті веде до аркуша під стосом */
.qb { padding: 4px 12px 4px 2px; font: 500 30px/1 var(--serif); }

/* ── аркуш під стосом: про студію, застосунки, «написати повідомлення»; під ним мова, пошта, © ── */
html[data-open] { overflow: hidden; }
[data-open] .info { visibility: hidden; }   /* коли печа відкрито, сторінка — лише він */
.info { position: relative; padding: clamp(20px, 5vh, 60px) clamp(14px, 6vw, 110px) 26px; color: var(--soft); }
.info p { margin: 0; }
.info a:hover { opacity: .65; }
.info :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* сам аркуш: той самий старий папір, що й аркуш під обкладинкою печа (assets/page.webp, див. .leaf); знизу краї аркушів.
   Папір лежить у ::before, краї аркушів у ::after під ним, щоб рваний край паперу лягав поверх них.
   Краї картинки (border-image) мають ширину в cqw, тобто в частках ширини аркуша: так картинка збільшується однаково вшир і
   вгору й не розмазується. Аркуш вищий за картинку, тож її середина повторюється згори вниз (round) */
.sheet { --rule: rgba(58, 34, 24, .3); --b: clamp(12px, 2.4vw, 32px); position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 120px);
  max-width: 1300px; margin: 0 auto; padding: calc(clamp(30px, 4vw, 60px) + var(--b)) calc(clamp(16px, 5vw, 90px) + var(--b)); color: #3A2218;
  container-type: inline-size; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(assets/page.webp) 0 0 / 100% 100% border-box;
  border: solid var(--b); border-image: url(assets/page.webp) 48 fill / 2.44cqw / 0 stretch round; }   /* 2.44 = 48 / 1968 (ширина картинки) */
.sheet::after { content: ""; position: absolute; z-index: -2; left: calc(var(--b) * .5); right: calc(var(--b) * .5); top: calc(100% - var(--b)); height: calc(var(--b) + clamp(16px, 2vw, 28px));
  background: linear-gradient(rgba(0, 0, 0, .3), transparent 25%, transparent 65%, rgba(0, 0, 0, .5)), url(assets/leaves.webp) 60% 0 / 120% 100%; }
.sheet { color-scheme: light; }   /* аркуш світлий: поля й смуга прокручування в полі листа теж світлі */
.lead { font: 500 clamp(27px, 2.7vw, 40px)/1.18 var(--serif); text-wrap: balance; }
.say > p + p { margin-top: .75em; font: 500 clamp(19px, 1.5vw, 23px)/1.4 var(--serif); }
/* застосунки рядками: назва веде на адресу застосунку тут, іконки праворуч — у Google Play і до вебзастосунку */
.apps { list-style: none; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0; }
.apps li { display: flex; align-items: center; border-top: 1px solid var(--rule); }
.apps li:last-child { border-bottom: 1px solid var(--rule); }
/* Назва завжди в один рядок, тихий рядок завжди під нею: так коротка й довга назви виглядають однаково.
   Розмір назви рахується від ширини рядка: 10.1 — це ширина найдовшої назви («Ngondro Yutok Nyingtik», 9.82 em) із запасом.
   Якщо з'явиться довша назва, збільшити це число; коли місця зовсім мало, назва переноситься на два рівні рядки */
.app { flex: 1; min-width: 0; container-type: inline-size; padding: 15px 0 16px; }
.app b { display: block; font: 500 clamp(17px, 100cqi / 10.1, 27px)/1.12 var(--serif); text-wrap: balance; }
.app span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.3; opacity: .72; }
.at { flex: none; width: 40px; height: 40px; background: currentColor; -webkit-mask: center / 21px no-repeat; mask: center / 21px no-repeat; }
.at.play { -webkit-mask-image: url(assets/icon-play.svg); mask-image: url(assets/icon-play.svg); }
.at.web { -webkit-mask-image: url(assets/icon-web.svg); mask-image: url(assets/icon-web.svg); -webkit-mask-size: 23px; mask-size: 23px; }
.at.soon { opacity: .32; }   /* застосунку там ще немає: іконка бліда й не натискається */
.at:last-child { margin-right: -9px; }   /* щоб сама іконка стояла врівень із кінцем лінії */
/* форма: повідомлення і пошта для відповіді */
/* два окремі поля в тонкій рамці, підпис над кожним (власник обрав 14.11.2026) */
.write { --line: rgba(58, 34, 24, .42); display: grid; align-content: start; gap: 18px; }
.write label { display: grid; gap: 7px; }
.write label > span { font-size: 13.5px; letter-spacing: .01em; }
.write textarea, .write input { display: block; width: 100%; padding: 12px 16px 14px; border: 1px solid var(--line); border-radius: 0; resize: vertical;
                                color: inherit; background: rgba(255, 250, 236, .4); font: 500 21px/1.4 var(--serif); }
.write ::placeholder { color: transparent; }   /* підпис уже стоїть над полем */
.write button { justify-self: start; padding: 11px 30px 13px; border: 0; cursor: pointer; font: 500 21px/1 var(--serif); background: #3A2218; color: #EDE2C3; }   /* кнопка тим самим чорнилом, що й текст на аркуші, напис кольору паперу */
.fine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 30px; max-width: 1300px;
        margin: clamp(60px, 7vw, 96px) auto 0; font-size: 13px; }
.fine > span { display: flex; flex-wrap: wrap; gap: 8px 30px; }
/* мов може бути скільки завгодно: це звичайний випадний список, англійська в ньому перша */
.langsel { font: inherit; color: inherit; background: var(--bg); border: 0; padding: 0; margin-left: -4px; cursor: pointer; color-scheme: dark; }
.langsel option { color: var(--cream); background: #14070A; }

main { display: grid; place-items: center; align-content: center; padding: 20px 16px 50px; perspective: 2400px; perspective-origin: 50% 20%; }

/* ── стос: три печа сходинками. Кожен печа має обкладинку (.cover: лице .face і зворот .verso), аркуш під нею (.leaf)
   і краї аркушів спереду (.edge). Колір середини знято з тла орнаменту на картинці рамки ── */
.dm { --c: #3A1608; --a: #E8C68A; --ink: #3A2218; --img: url(assets/leaf-dorjemala.webp); --mk: url(assets/mark-dorjemala.webp); }
.ng { --c: #1E2B55; --a: #EBC35C; --ink: #14275F; --img: url(assets/leaf-ngondro.webp); --mk: url(assets/mark-ngondro.webp);
      --ep: 100% 0 / 130% 100%; --tp: 100% 100% / 125% 140%; }   /* --ep, --tp: свій шматок країв аркушів і потертої фактури */
.da { --c: #C97327; --a: #3A0B15; --ink: #5A1422;   /* --a темніший за бордо логотипа: дрібний рядок на помаранчевому має читатися */ --img: url(assets/leaf-studio.webp); --mk: url(assets/mark-studio.svg);
      --ep: 35% 0 / 116% 100%; --tp: 30% 0 / 140% 120%; }

/* ширина стосу: на великому екрані до 1300 px, але так, щоб стос із шапкою й підвалом уміщався по висоті.
   80vw, а не більше: нижній печа ближче до глядача, тож на екрані він ширший за стос приблизно на 13 % */
.scene { --w: min(1300px, 80vw, calc((100vh - 230px) / .81)); --l: calc(var(--w) * .25); --t: calc(var(--w) * .07); --sh: 1;
         position: relative; width: var(--w); height: calc(var(--l) * 3); margin-block: calc(var(--w) * .1) calc(var(--w) * -.04);
         transform: rotateX(48deg); transform-style: preserve-3d; }
.scene::before { content: ""; position: absolute; inset: 0; opacity: var(--sh);   /* тінь під стосом */
                 box-shadow: 0 calc(var(--w) * .03) calc(var(--w) * .06) calc(var(--w) * .012) rgba(0, 0, 0, .8); }
.pecha { --fs: calc(var(--w) * .052); position: absolute; left: 0; width: 100%; height: var(--l); display: block; color: var(--a);
         transform: translateZ(var(--z)); transform-style: preserve-3d; }
.pecha:nth-child(1) { top: 0; --z: calc(var(--t) * 3); }
.pecha:nth-child(2) { top: var(--l); --z: calc(var(--t) * 2); }
.pecha:nth-child(3) { top: calc(var(--l) * 2); --z: var(--t); }
.pecha:focus-visible { outline: 2px solid var(--saffron); outline-offset: 8px; }
.body, .cover { position: absolute; inset: 0; transform-style: preserve-3d; }   /* .body рухає app.js */
.body > *, .cover > * { position: absolute; }
.cover { transform-origin: 50% 0; }

/* обкладинка: орнаментна рамка з картинки, розрізана на кути й боки (кути як є, верх і низ тягнуться, бокові смужки повторюються);
   середина — колір рамки з потертою фактурою з тих самих картинок (age.webp лягає множенням) */
.face, .verso { inset: 0; backface-visibility: hidden; border-style: solid; border-width: calc(var(--w) * .0448) calc(var(--w) * .0635);
  border-image: var(--img) 72 102 68 102 stretch round;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .2)), url(assets/age.webp) var(--tp, 0 0 / 100% 100%), var(--c);
  background-blend-mode: normal, multiply, normal; background-clip: padding-box; }
.verso { transform: rotateX(180deg); }   /* зворот: лише рамка й колір, без напису */
.face { --cast: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.face::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--cast);   /* тінь від печа, що лежить вище */
                background: linear-gradient(rgba(0, 0, 0, .3), transparent 30%); }
.pecha:first-child .face::before { display: none; }
.t { position: relative; }
.name { font: 500 var(--fs)/1 var(--serif); white-space: nowrap; }
.line { display: block; margin-top: .5em; font: 300 calc(var(--fs) * .36)/1.2 var(--sans); letter-spacing: .02em; white-space: nowrap; }
.mark { position: absolute; left: 3%; height: 46%; }
.mark + .mark { left: auto; right: 3%; }

/* аркуш під обкладинкою: світлий папір, назва чорнилом, знак з обох боків */
/* папір — старий аркуш із картинки власника (assets/page.webp). Через border-image кути й рвані краї лишаються як є,
   а середина тягнеться; та сама картинка ще й фоном, бо без нього між шматками рамки просвічують тонкі шви */
.leaf { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; color: var(--ink); transform: translateZ(-1px);
  background: url(assets/page.webp) 0 0 / 100% 100% border-box;
  border: solid calc(var(--w) * .025); border-image: url(assets/page.webp) 48 / 1 stretch; }
.leaf::after { content: ""; position: absolute; inset: calc(var(--w) * -.025); pointer-events: none; background: #000; opacity: var(--shade, .5);
  -webkit-mask: url(assets/page.webp) 0 0 / 100% 100%; mask: url(assets/page.webp) 0 0 / 100% 100%; }   /* тінь від обкладинки, обрізана по рваних краях */
.leaf b { font: 500 var(--fs)/1 var(--serif); white-space: nowrap; }
.leaf span { margin-top: .5em; font: 300 calc(var(--fs) * .36)/1.2 var(--sans); letter-spacing: .02em; }
.lmark { position: absolute; left: 7%; top: 27%; height: 46%; aspect-ratio: 1; background: var(--mk) center / contain no-repeat; }
.lmark + .lmark { left: auto; right: 7%; }
/* золотий дордже на світлому папері не видно, тож його фарбовано чорнилом */
.dm .lmark { background: var(--ink); -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat; }

/* краї аркушів: смуга зі справжнього печа */
.edge { top: 100%; left: 0; right: 0; height: var(--t); transform-origin: top; transform: rotateX(-90deg);
  background: linear-gradient(rgba(0, 0, 0, .25), transparent 22%, transparent 70%, rgba(0, 0, 0, .35)), url(assets/leaves.webp) var(--ep, 0 0 / 100% 100%); }

/* доки стос не «зібрався», печа не видно (клас .js ставить сторінка, знімає app.js, якщо бібліотека руху не завантажилась) */
.js .face, .js .edge, .js header, .js footer { opacity: 0; }

/* ── те, що відкривається після натискання. Сторінок застосунків ще немає, тож тут заглушка ── */
.dest { position: fixed; inset: 0; z-index: 3; padding: 0 24px; text-align: center; color: var(--da); pointer-events: none; }
[data-open] .dest { pointer-events: auto; }
.dest > * { visibility: hidden; }
.dest p { margin: 0 auto; }
.about { max-width: 26em; font: 500 clamp(21px, 2.5vw, 32px)/1.3 var(--serif); }
.dest .stub { margin-top: 1.6em; font-size: 14px; }
.back { position: fixed; left: clamp(16px, 3vw, 34px); top: 20px; padding: 4px 12px 4px 0; border: 0; background: none; cursor: pointer;
        font: 500 32px/1 var(--serif); color: inherit; }

@media (max-width: 900px) { .sheet { grid-template-columns: 1fr; } }   /* вужче двом колонкам тісно: назви застосунків дрібнішають */
/* в одну колонку аркуш стоїть сторчма, тож і картинка та сама, повернута стоячи; 12.34 = 48 / 389 (її ширина).
   Ширші за 56 px краї вже грубі й розмиті (картинка мала), тому на планшеті вони тонші, а середина трохи тягнеться */
@media (max-width: 900px) { .sheet::before { background-image: url(assets/page-tall.webp); border-image-source: url(assets/page-tall.webp);
  border-image-width: min(12.34cqw, 56px); border-image-repeat: stretch; } }
@media (max-width: 640px) {
  .brand { font-size: 19px; } .brand img { width: 38px; }
  .scene { --l: calc(var(--w) * .34); --t: calc(var(--w) * .1); }
  .pecha { --fs: calc(var(--w) * .074); }
  .line { font-size: calc(var(--fs) * .46); }
  .mark, .lmark { display: none; }   /* на телефоні знакам бракує місця */
}