/* Таро косметолога — стили. Шрифты лежат рядом, в /fonts (Forum и Golos Text, лицензия OFL). */
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/forum-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/forum-latin.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:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/golos-text-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/golos-text-latin.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{
  --ground:#0F1524; --deep:#070B15; --panel:#161D31; --line:#2B3450; --glow:#1C2540;
  --gold:#C9A24A; --gold-2:#EBDCAF; --ivory:#F2ECDF; --muted:#9AA3B8;
  --back-a:#1A2340; --back-b:#0B1020; --back-line:rgba(201,162,74,.16);
  --display:'Forum', 'Cormorant Garamond', Georgia, serif;
  --body:'Golos Text', 'Helvetica Neue', Arial, sans-serif;
  color-scheme:dark;
}
/* Вторая коробка: ?brand=piquar */
:root[data-brand="piquar"]{
  --ground:#22101A; --deep:#12080E; --panel:#2E1724; --line:#4A2A3A; --glow:#3A1A2B; --gold:#D4AF63;
  --back-a:#3A1728; --back-b:#170A11; --back-line:rgba(212,175,99,.16);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{background:var(--ground);color:var(--ivory)}
body{font-family:var(--body);font-size:16px;line-height:1.5;margin:0;
  padding-block:env(safe-area-inset-top,0px) calc(48px + env(safe-area-inset-bottom,0px));
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(1200px 600px at 50% -10%, var(--glow) 0%, var(--ground) 60%) fixed,var(--ground)}
a{color:var(--gold-2)}
a:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font-family:var(--display);font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-2)}
.logo small{display:block;font-family:var(--body);font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.toportal{font-size:13px;letter-spacing:.04em;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--gold-2)}
.toportal:hover{border-color:var(--gold)}
.lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--deep)}
.seg button{background:transparent;border:0;color:var(--muted);font:500 13px var(--body);padding:7px 14px;border-radius:999px;cursor:pointer;letter-spacing:.02em}
.seg button[aria-pressed="true"]{background:var(--gold);color:#1A1406}
.seg button:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding-block:48px 24px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1.02;margin:0 0 14px;text-wrap:balance;color:var(--gold-2);letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--ivory)}
.hero p{max-width:52ch;color:var(--muted);margin:0 0 22px;font-size:17px}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.fan{position:relative;height:300px;max-width:100%}
.fan .back{position:absolute;left:50%;top:50%;width:170px;aspect-ratio:7/12;transform-origin:50% 110%;box-shadow:0 20px 40px rgba(0,0,0,.45)}
.fan .back:nth-child(1){transform:translate(-50%,-50%) rotate(-16deg)}
.fan .back:nth-child(2){transform:translate(-50%,-50%) rotate(-2deg)}
.fan .back:nth-child(3){transform:translate(-50%,-50%) rotate(13deg)}

.controls{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding-block:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--ivory);font:500 13px var(--body);padding:8px 14px;border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--gold)}
.chip:focus-visible,.btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.btn{font:600 14px var(--body);padding:12px 22px;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:#1A1406;cursor:pointer;letter-spacing:.02em}
.btn.ghost{background:transparent;color:var(--gold-2)}
.btn:disabled{opacity:.5;cursor:default}

.table{padding-block:36px 12px;min-height:420px;scroll-margin-top:12px}
.table-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.table-head h2{font-family:var(--display);font-weight:400;font-size:28px;margin:0;color:var(--gold-2)}
.table-head p{margin:0;color:var(--muted);font-size:14px}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,220px));gap:22px;justify-content:center}
.slot{display:flex;flex-direction:column;align-items:center;gap:10px}
.slot .pos{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-align:center}
.slot .sub{font-size:12px;color:var(--muted);text-align:center;min-height:18px}
.flip{width:100%;max-width:220px;aspect-ratio:7/12;perspective:1200px;cursor:pointer;background:none;border:0;padding:0;border-radius:12px;color:inherit;font:inherit}
.flip:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}
.flip .inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip.open .inner{transform:rotateY(180deg)}
.flip .back,.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .face{transform:rotateY(180deg)}
@media (hover:hover){.flip:not(.open):hover .inner{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.flip .inner{transition:none}.flip:not(.open):hover .inner{transform:none}}

/* рубашка и лицо карты */
.back{border-radius:12px;background:
  repeating-linear-gradient(45deg, var(--back-line) 0 2px, transparent 2px 14px),
  repeating-linear-gradient(-45deg, var(--back-line) 0 2px, transparent 2px 14px),
  linear-gradient(160deg,var(--back-a),var(--back-b));
  border:1px solid var(--gold);box-shadow:inset 0 0 0 6px var(--deep),inset 0 0 0 7px var(--gold);display:grid;place-items:center}
.back .mono{font-family:var(--display);color:var(--gold-2);font-size:clamp(14px,2.4vw,22px);letter-spacing:.1em;text-transform:uppercase;background:var(--deep);padding:8px 12px;border:1px solid var(--gold);text-align:center;line-height:1.1}
.back .mono small{display:block;font-family:var(--body);font-size:9px;letter-spacing:.2em;color:var(--muted);margin-top:4px}
.face{border-radius:12px;background:linear-gradient(180deg,#F5EFDF,#E9E0C6);color:#1A1406;border:1px solid var(--gold);
  box-shadow:inset 0 0 0 5px #F5EFDF,inset 0 0 0 6px var(--gold);display:flex;flex-direction:column;padding:12px 10px 10px;overflow:hidden}
.face .rank{font-family:var(--display);font-size:16px;letter-spacing:.14em;text-align:center;color:#6A5420;text-transform:uppercase}
.face .art{flex:1;display:grid;place-items:center;min-height:0;padding:4px 0}
.face .art svg{width:82%;height:auto;max-height:100%}
.face .name{font-family:var(--display);font-size:15px;line-height:1.1;text-align:center;text-transform:uppercase;letter-spacing:.06em;color:#1A1406;min-height:2.2em;display:grid;place-items:center;padding:0 4px;text-wrap:balance}
.face .suitname{font-size:9px;letter-spacing:.2em;text-transform:uppercase;text-align:center;color:#6F5C2E;margin-top:4px}
.face[data-suit="major"] .rank{color:#8A6A18}
.face[data-suit="wands"]{background:linear-gradient(180deg,#F7EEDC,#EAD9BC)}
.face[data-suit="cups"]{background:linear-gradient(180deg,#F8EEEA,#EBD6D2)}
.face[data-suit="swords"]{background:linear-gradient(180deg,#F2F1EE,#DEE0E3)}
.face[data-suit="pents"]{background:linear-gradient(180deg,#F3F2E4,#E1E4C9)}
.face[data-suit="classic"]{background:linear-gradient(180deg,#EFE9F2,#D9D0E2)}

.result{margin-top:28px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:grid;gap:14px;scroll-margin-block:16px}
.result .title{font-family:var(--display);font-size:22px;color:var(--gold-2)}
.result .lines{display:grid;grid-template-columns:auto 1fr;gap:14px}
.result .line{display:grid;grid-template-columns:subgrid;grid-column:1/-1;column-gap:14px;align-items:baseline}
.result .line b{font-weight:600;color:var(--gold);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.result .line span{color:var(--ivory)}
.result .line small{display:block;color:var(--muted);font-size:13px}
.result .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;align-items:center}
.toast{font-size:13px;color:var(--gold-2)}

.gallery{padding-block:40px 0;border-top:1px solid var(--line);margin-top:28px}
.gallery h2{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 6px;color:var(--gold-2)}
.gallery p.lead{color:var(--muted);margin:0 0 18px;max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px;margin-top:18px}
.mini{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--ivory);font:inherit}
.mini .face{aspect-ratio:7/12;width:100%;padding:8px 6px 6px;font-size:10px}
.mini .face .rank{font-size:10px}.mini .face .name{font-size:9.5px;min-height:2.4em}.mini .face .suitname{display:none}
.mini .cap{font-size:11px;color:var(--muted);line-height:1.3}
.mini:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:8px}

dialog{background:var(--panel);color:var(--ivory);border:1px solid var(--gold);border-radius:16px;padding:0;max-width:min(92vw,720px);width:100%;max-height:92dvh;overflow:auto}
dialog::backdrop{background:rgba(3,5,12,.7)}
.modal{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:22px}
.modal .face{aspect-ratio:7/12;width:100%}
.modal h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;margin:0 0 6px;color:var(--gold-2)}
.modal .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:14px 0 4px}
.modal .classic{color:var(--muted);font-size:13px}
.modal .close{margin-top:16px}

footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;display:grid;gap:8px;max-width:80ch}
footer b{color:var(--gold-2);font-weight:500}
.noscript{margin:24px 0;padding:16px 18px;border:1px solid var(--gold);border-radius:12px;color:var(--gold-2)}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-block:32px 16px}
  .fan{height:240px}.fan .back{width:130px}
  .modal{grid-template-columns:1fr}.modal .face{max-width:160px;margin-inline:auto}
  .slots{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .slot{min-width:0}
}