@layer brand{
/* ============================================================
   КЛУБ GRANT — theme.css  ·  club.grantgold.shop
   Носитель на движке «Каркас». Тёмная тема: оксблад + шампань.
   ------------------------------------------------------------
   • Палитра НЕ зашита: локальные алиасы → токены темы движка.
     Литералы только как fallback в var() для автономного превью.
   • Шрифты — самохостинг woff2 (fontFaces), внешних CDN нет.
   • Стилизация только классами. Инлайн-стилей и data-атрибутов нет.
   • .reveal → .reveal.is-visible вешает движок.
   • Форму рисует движок; здесь стили .form-sample*.
   ============================================================ */
/* ---- Самохостинг шрифтов (woff2). Офлайн-безопасно. ---- */


/* ============================================================
   ТОКЕНЫ (правятся в админке, themeSchema)
   ============================================================ */
:root{--bg:          var(--c-bg,          #2a1116);--bg-warm:     var(--c-bg-warm,     #1f0c10);--bg-elev:     var(--c-bg-elev,     #35171d);--ink:         var(--c-text,        #f1e7dc);--ink-soft:    var(--c-ink-soft,    #d3c3b6);--muted:       var(--c-muted,       #9d8a80);--gold:        var(--c-accent,      #cfae72);--gold-deep:   var(--c-accent-deep, #b08f55);--on-accent:   var(--c-on-accent,   #1f0c10);--rule:        var(--c-line,        #4a262c);--rule-strong: var(--c-line-strong, #6a3b42);--ff-body:     var(--font,          "Jost", "Helvetica Neue", Arial, sans-serif);--ff-head:     var(--font-head,     "Cormorant Garamond", "Times New Roman", serif);--rad:         var(--radius,        2px);--maxw:1240px;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-body);font-size:16px;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--ff-head);font-weight:400;letter-spacing:.005em;margin:0}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- Иконки (mask) ---- */
.ico{display:inline-block;width:1em;height:1em;background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;vertical-align:-.12em}
.ico--arrow{-webkit-mask-image:url('/theme/arrow-right.svg');mask-image:url('/theme/arrow-right.svg')}
.ico--ext{-webkit-mask-image:url('/theme/arrow-up-right.svg');mask-image:url('/theme/arrow-up-right.svg')}
.ico--check{-webkit-mask-image:url('/theme/check.svg');mask-image:url('/theme/check.svg')}

/* ---- Общие ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.sec{padding:clamp(72px,9vw,132px) 0}
.sec__title{font-size:clamp(34px,4.4vw,60px);line-height:1.08;margin-top:22px;text-wrap:pretty}
.sec__title i{font-style:italic;font-weight:300;color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 28px;border:1px solid var(--gold);border-radius:var(--rad);background:transparent;color:var(--gold);font-size:12px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--gold);color:var(--on-accent)}
.btn--solid{background:var(--gold);color:var(--on-accent)}
.btn--solid:hover{background:var(--ink);border-color:var(--ink);color:var(--bg-warm)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- Топбар ---- */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:32px}
.nav a{color:var(--ink-soft);font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:14px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.is-active{color:var(--gold);border-color:var(--gold)}
.topbar .btn{min-height:44px;padding:0 20px}
@media (max-width:900px){.nav{display:none}}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;padding:clamp(72px,10vw,150px) 0 clamp(64px,8vw,120px);border-bottom:1px solid var(--rule)}
.hero::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;max-width:800px;max-height:800px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 14%,transparent),transparent 65%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(40px,6vw,96px);align-items:end;position:relative}
.hero__title{font-size:clamp(44px,7vw,104px);line-height:1;margin-top:28px;text-wrap:balance}
.hero__title i{font-style:italic;font-weight:300;color:var(--gold)}
.hero__lead{font-family:var(--ff-head);font-style:italic;font-weight:300;font-size:clamp(19px,2vw,25px);color:var(--ink-soft);max-width:34ch;margin-top:30px;line-height:1.45}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
/* Карта члена клуба (визуальный мотив) */
.mcard{border:1px solid var(--rule-strong);border-radius:calc(var(--rad) + 10px);background:linear-gradient(160deg,var(--bg-elev),var(--bg-warm));padding:32px 32px 28px;aspect-ratio:1.586;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 40px 80px -40px color-mix(in srgb,var(--bg-warm) 90%,transparent),inset 0 1px 0 color-mix(in srgb,var(--gold) 30%,transparent);position:relative;overflow:hidden}
.mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--gold) 9%,transparent) 50%,transparent 60%)}
.mcard__top{display:flex;justify-content:space-between;align-items:flex-start}
.mcard__top img{height:30px;width:auto}
.mcard__tag{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.mcard__name{font-family:var(--ff-head);font-size:clamp(26px,2.6vw,36px);line-height:1.1}
.mcard__name i{font-style:italic;font-weight:300;color:var(--gold)}
.mcard__row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.mcard__lbl{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.mcard__val{font-family:var(--ff-head);font-variant-numeric:lining-nums;font-size:18px;letter-spacing:.08em;margin-top:4px}
.mcard__qr{width:56px;height:56px;border:1px solid var(--rule-strong);border-radius:3px;background:repeating-conic-gradient(color-mix(in srgb,var(--gold) 55%,transparent) 0 25%,transparent 0 50%) 0 0/14px 14px;opacity:.8}
.hero__note{margin-top:18px;font-size:13px;color:var(--muted);max-width:44ch}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}.mcard{max-width:420px}}

/* ---- О заводе ---- */
.about{border-bottom:1px solid var(--rule)}
.about__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,6vw,96px);align-items:start}
.about__intro{font-family:var(--ff-head);font-weight:300;font-size:clamp(20px,2vw,26px);line-height:1.5;color:var(--ink)}
.about__intro::first-letter{font-size:3.2em;float:left;line-height:.8;padding:6px 12px 0 0;color:var(--gold);font-family:var(--ff-head)}
.about__list{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rule)}
.about__list li{display:grid;grid-template-columns:28px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule);color:var(--ink-soft);font-size:15.5px}
.about__list li::before{content:"◆";font-size:9px;color:var(--gold);line-height:2.6}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(48px,6vw,88px)}
.pillar{background:var(--bg-elev);padding:clamp(28px,3vw,44px)}
.pillar__n{font-family:var(--ff-head);font-style:italic;color:var(--gold);font-size:22px}
.pillar h3{font-size:13px;letter-spacing:.26em;text-transform:uppercase;font-family:var(--ff-body);font-weight:500;margin:14px 0 18px;line-height:1.5}
.pillar p{color:var(--ink-soft);font-size:15.5px;margin-bottom:12px;max-width:62ch}
@media (max-width:820px){.about__grid,.pillars{grid-template-columns:1fr}}

/* ---- Клуб: привилегии ---- */
.club{background:var(--bg-warm);border-bottom:1px solid var(--rule)}
.club__head{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.club__head p{color:var(--ink-soft);max-width:44ch;font-size:16px}
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(40px,5vw,72px)}
.perk{border:1px solid var(--rule);border-radius:var(--rad);background:var(--bg);padding:clamp(24px,2.6vw,36px) clamp(22px,2.4vw,30px);min-height:280px;display:flex;flex-direction:column;transition:border-color .25s,transform .25s}
.perk:hover{border-color:var(--gold);transform:translateY(-4px)}
.perk__n{font-family:var(--ff-head);font-style:italic;color:var(--gold);font-size:20px}
.perk__val{font-family:var(--ff-head);font-variant-numeric:lining-nums;font-size:clamp(40px,4vw,60px);line-height:1;margin:auto 0 16px;color:var(--ink)}
.perk__val small{font-size:.42em;color:var(--gold);letter-spacing:.02em;font-style:italic}
.perk h3{font-size:19px;line-height:1.3;margin-bottom:10px}
.perk p{color:var(--muted);font-size:14px}
.perk--hi{background:var(--gold);border-color:var(--gold);color:var(--on-accent)}
.perk--hi .perk__n,.perk--hi .perk__val,.perk--hi .perk__val small,.perk--hi h3{color:var(--on-accent)}
.perk--hi p{color:color-mix(in srgb,var(--on-accent) 75%,var(--gold))}
@media (max-width:1000px){.perks{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.perks{grid-template-columns:1fr}.perk{min-height:0}.perk__val{margin-top:24px}.club__head{grid-template-columns:1fr}}

/* ---- Регистрация (форму рисует движок) ---- */
.reg{border-bottom:1px solid var(--rule)}
.reg__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
.reg__copy p{color:var(--ink-soft);margin-top:20px;max-width:40ch}
.steps{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rule)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:baseline;color:var(--ink-soft);font-size:15px}
.steps b{font-family:var(--ff-head);font-style:italic;font-weight:400;color:var(--gold);font-size:19px}
.form-sample{background:var(--bg-elev);border:1px solid var(--rule);border-radius:var(--rad);padding:clamp(24px,3vw,44px)}
.form-sample__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.form-sample__field{display:flex;flex-direction:column;gap:8px}
.form-sample__field--wide{grid-column:1/-1}
.form-sample__label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.form-sample__input{min-height:48px;padding:0 14px;border:1px solid var(--rule-strong);border-radius:var(--rad);background:var(--bg);color:var(--ink);outline:0;transition:border-color .2s}
.form-sample__input::placeholder{color:var(--muted)}
.form-sample__input:focus{border-color:var(--gold)}
.form-sample__hint{font-size:12px;color:var(--muted)}
.form-sample__sep{grid-column:1/-1;height:1px;background:var(--rule);margin:8px 0}
.form-sample__check{grid-column:1/-1;display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:13.5px;color:var(--ink-soft);cursor:pointer;min-height:44px}
.form-sample__check input{appearance:none;width:20px;height:20px;margin:2px 0 0;border:1px solid var(--rule-strong);border-radius:var(--rad);background:var(--bg);cursor:pointer;display:grid;place-items:center}
.form-sample__check input:checked{background:var(--gold);border-color:var(--gold)}
.form-sample__check input:checked::after{content:"";width:12px;height:12px;background:var(--on-accent);-webkit-mask:url('/theme/check.svg') no-repeat center/contain;mask:url('/theme/check.svg') no-repeat center/contain}
.form-sample__submit{grid-column:1/-1;justify-content:center;margin-top:8px;min-height:56px}
.form-sample__legal{grid-column:1/-1;font-size:12px;color:var(--muted);text-align:center}
.form-sample__success{display:none;text-align:center;padding:40px 0}
.form-sample.is-sent .form-sample__grid{display:none}
.form-sample.is-sent .form-sample__success{display:block}
.ico-ring{width:64px;height:64px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;color:var(--gold);font-size:24px}
.form-sample__success h3{font-size:30px}
.form-sample__success p{color:var(--ink-soft);margin-top:12px;max-width:40ch;margin-inline:auto}
@media (max-width:900px){.reg__grid{grid-template-columns:1fr}}
@media (max-width:560px){.form-sample__grid{grid-template-columns:1fr}}

/* ---- Соцсети / где купить ---- */
.links{border-bottom:1px solid var(--rule)}
.links__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px)}
.links__col p{color:var(--ink-soft);margin-top:16px;max-width:42ch}
.links__col h2{font-size:clamp(28px,3vw,40px);line-height:1.15;margin-top:20px}
.chan{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rule)}
.chan a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule);color:var(--ink);min-height:56px}
.chan a:hover{color:var(--gold)}
.chan a small{display:block;font-size:12px;color:var(--muted);letter-spacing:.08em;margin-top:2px}
.chan .ico{color:var(--gold);font-size:16px}
.buy{margin-top:28px;border:1px solid var(--rule);border-radius:var(--rad);background:var(--bg-elev);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.buy p{margin:0}
@media (max-width:820px){.links__grid{grid-template-columns:1fr}}

/* ---- #507 Шапка и подвал ДВИЖКА в оформлении клуба ----
   С areas: engine шапку и подвал рисует движок (меню, логотип, кнопка — из админки);
   здесь только вид: тот же, что был у фирменной шапки (прописные с разрядкой, золото
   на активном пункте, блюр фона). Цвета — токенами темы. */
.site-header{background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:1px solid var(--rule)}
.site-header .header-in{min-height:80px}
.site-header .brand__logo{height:52px;max-height:none;width:auto}
.site-header nav.menu{gap:32px}
.site-header nav.menu a{color:var(--ink-soft);font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:14px 0;border-bottom:1px solid transparent;text-decoration:none}
.site-header nav.menu a:hover,.site-header nav.menu a.is-active{color:var(--gold);border-color:var(--gold)}
.site-header .btn{min-height:44px;padding:0 20px}
@media (max-width:640px){.site-header .brand__logo{height:44px}}
.footer{padding:48px 0 40px;background:var(--bg-warm);color:var(--muted)}
.footer .f-brand .brand__logo{height:44px;width:auto;opacity:.95}
.footer .f-col h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.footer a{color:var(--ink-soft);font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.footer a:hover{color:var(--gold)}
.footer .footer-bottom{font-size:13px;color:var(--muted)}

/* ---- Подвал (NAP из настроек) ---- */
.foot{padding:48px 0 40px;background:var(--bg-warm)}
.foot__in{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
.foot img{height:34px;width:auto;opacity:.85}
.foot__nav{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center}
.foot__nav a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);padding:8px 0}
.foot__nav a:hover{color:var(--gold)}
.foot__nap{font-size:13px;color:var(--muted);text-align:right;line-height:1.7}
.foot__nap a{color:var(--ink-soft)}
@media (max-width:820px){.foot__in{grid-template-columns:1fr;text-align:center}.foot__nap{text-align:center}}

/* ==== Движковая форма регистрации (engine .input/.checkbox/.btn) под «Клуб GRANT» ==== */
.form-sample{--s-2:8px;--s-4:18px;--s-6:40px}
.form-sample [data-form-fields]{grid-template-columns:1fr 1fr;gap:18px 20px}
.form-sample .modal__sub{grid-column:1/-1;font-size:13.5px;color:var(--ink-soft);margin:0}
.form-sample .modal__sub:empty{display:none}
.form-sample .input-shell{display:flex;flex-direction:column;gap:8px}
.form-sample .input-shell:has([name=name]),.form-sample .input-shell:has([name=email]),.form-sample .checkbox,.form-sample .btn,.form-sample [data-form-msg]{grid-column:1/-1}
.form-sample .input-shell:has([name=uin]){grid-column:1/-1;margin-top:8px;padding-top:18px;border-top:1px solid var(--rule)}
.form-sample .input-label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.form-sample .input-label__req{color:var(--gold);margin-left:4px}
.form-sample .input{min-height:48px;padding:0 14px;border:1px solid var(--rule-strong);border-radius:var(--rad);background:var(--bg);color:var(--ink);outline:0;transition:border-color .2s;font:inherit;width:100%}
.form-sample .input::placeholder{color:var(--muted)}
.form-sample .input:focus{border-color:var(--gold)}
.form-sample .input-help{font-size:12px;color:var(--muted)}
.form-sample .input-help:empty{display:none}
/* Чекбокс: движок (COMPONENT_CSS подмешивается и при bareLayout) прячет нативный input
   абсолютом и рисует галочку через .checkbox__box — одеваем ЕГО, не нативный input. */
.form-sample .checkbox{position:relative;display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-soft);cursor:pointer;min-height:44px}
.form-sample .checkbox:has([name=consent]){margin-top:8px;padding-top:18px;border-top:1px solid var(--rule)}
.form-sample .checkbox__box{flex:0 0 20px;width:20px;height:20px;margin-top:1px;border:1px solid var(--rule-strong);border-radius:var(--rad);background:var(--bg);display:inline-flex;align-items:center;justify-content:center}
.form-sample .checkbox__box svg{width:12px;height:12px;color:transparent}
.form-sample .checkbox__input:checked+.checkbox__box{background:var(--gold);border-color:var(--gold)}
.form-sample .checkbox__input:checked+.checkbox__box svg{color:var(--on-accent)}
.form-sample .checkbox__input:focus-visible+.checkbox__box{outline:2px solid var(--gold);outline-offset:3px}
.form-sample .checkbox>span:last-child{flex:1 1 auto;min-width:0}
.form-sample .checkbox a{color:var(--gold);text-decoration:underline}
.form-sample .btn{justify-content:center;min-height:56px;background:var(--gold);color:var(--on-accent);border-color:var(--gold)}
.form-sample .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg-warm)}
.form-sample .btn:disabled{opacity:.45;cursor:not-allowed}
.form-sample [data-form-msg]{font-size:13px;margin:0}
.form-sample .state-card{text-align:center}
.form-sample .state-card__icon{width:64px;height:64px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;margin:0 auto 18px;color:var(--gold)}
.form-sample .state-card__icon svg{width:26px;height:26px}
.form-sample .state-card__title{font-size:30px;margin:0 0 8px}
.form-sample .state-card__text{color:var(--muted);max-width:380px;margin:0 auto}
.form-sample__legal{margin-top:14px;text-align:center}
@media (max-width:640px){.form-sample [data-form-fields]{grid-template-columns:1fr}}

.brand img{height:52px}
.topbar__in{min-height:80px}
.foot img{height:44px;opacity:.95}
.mcard__top img{height:36px}
@media (max-width:640px){.brand img{height:44px}}

/* ============================================================
   #280 ПЕРЕЕЗД НА ШАБЛОНЫ: нумерация и выделение — из ПОРЯДКА
   ============================================================
   Номера привилегий и шагов больше не лежат в разметке: их ставит счётчик CSS.
   Так они не могут разойтись с порядком строк — владелец переставит привилегию
   стрелкой и получит верную нумерацию, а не 01, 03, 04. Поле «номер» в форме
   означало бы, что за нумерацией следит он, а не движок.
   Сами номера `aria-hidden`: это оформление порядка, а не содержание. У шагов
   порядок и без них несёт `<ol>`. */
.perks {
  counter-reset: perk;
}
.perk__n::before {
  counter-increment: perk;
  content: counter(perk, decimal-leading-zero);
}
/* Выделена ПЕРВАЯ карточка — та, куда владелец ставит главную привилегию.
   Раньше это был класс `perk--hi` в разметке; в шаблоне разметка одна на все
   строки, и «какая выделена» решает позиция. Подсказка поля об этом говорит. */
.perk:first-child {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}
.perk:first-child .perk__n,
.perk:first-child .perk__val,
.perk:first-child .perk__val small,
.perk:first-child h3,
.perk:first-child p {
  color: var(--on-accent);
}
.steps--roman {
  counter-reset: step;
}
.steps--roman b::before {
  counter-increment: step;
  content: counter(step, upper-roman) '.';
}

/* ============================================================
   #280 БЛОКИ ВЛАДЕЛЬЦА (шорткоды движка) — вид темы
   ============================================================
   Владелец вставляет блок в тело страницы, и он обязан выглядеть частью сайта, а
   не чужой вставкой. Тема одевала только свою разметку, поэтому до сдачи этого
   было не видно — теперь видно на /_showcase.

   Деление сознательное. Пять блоков переиспользуют существующий язык темы; четыре
   ([ages], [services], [afisha], [map]) для ювелирного клуба вряд ли понадобятся,
   но чужими выглядеть не должны — им дана общая сдержанная база на тех же токенах.
   Прорабатывать каждый значило бы потратить день на то, чего никто не вставит.

   Все цвета — токенами. Литерал здесь это место, куда не дотянется ни коррекция
   контраста, ни смена палитры владельцем из админки. */

/* ── Цитата ──────────────────────────────────────────────────────────────────
   Не карточка. У темы уже есть носитель «голоса» — курсивный Cormorant золотом
   (`.sec__title i`), и цитата берёт его. Карточка с рамкой спорила бы с .perk,
   который стоит выше на той же странице. */
.quote {
  margin: clamp(28px, 4vw, 48px) 0;
  padding-left: clamp(18px, 3vw, 32px);
  border-left: 1px solid var(--gold);
}
.quote blockquote {
  margin: 0;
  font-family: var(--ff-head);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.3;
  color: var(--gold);
  max-width: 34ch;
  text-wrap: pretty;
}
.quote figcaption {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Манифест ────────────────────────────────────────────────────────────────
   Крупный текст-заявление. Тот же курсивный Cormorant, но чернилами, а не
   золотом: два золотых крупных блока подряд на странице спорят друг с другом. */
.manifesto {
  margin: clamp(28px, 4vw, 48px) 0;
}
.manifesto p {
  margin: 0;
  font-family: var(--ff-head);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.35;
  color: var(--ink);
  max-width: 46ch;
  text-wrap: pretty;
}

/* ── Преимущества ────────────────────────────────────────────────────────────
   Язык .pillar (мелкий разряженный заголовок, мягкий абзац) на рамке .perk.
   Сетка СВОЯ и авто-подбором: .perks рассчитана ровно на четыре карточки с
   крупной цифрой у нижнего края, а блок владельца даёт от двух до восьми пунктов
   без цифр вовсе — на чужой сетке они развалятся. */
.features {
  list-style: none;
  margin: clamp(28px, 4vw, 48px) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.feature {
  border: 1px solid var(--rule);
  border-radius: var(--rad);
  background: var(--bg-elev);
  padding: clamp(22px, 2.4vw, 30px);
}
.feature h3 {
  margin: 0 0 14px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1.5;
}
.feature p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  max-width: 62ch;
}

/* ── Шаги ────────────────────────────────────────────────────────────────────
   У темы свои шаги (римские цифры в разделе регистрации), у движка — арабские.
   На одной странице «I. II. III.» и «1 2 3» читаются как недоделка, поэтому
   движковые приводятся к римским. Правила дописаны РЯДОМ с темиными, а не
   вместо: `.steps li` темы продолжает работать, здесь только `.step`. */
.steps .step {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas: 'n title' '. text';
  gap: 0 14px;
  align-items: baseline;
}
.steps .step__n {
  grid-area: n;
  font-family: var(--ff-head);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  font-size: 19px;
  /* Арабская цифра движка скрывается, римская приходит счётчиком. */
  font-size: 0;
}
.steps .step__n::before {
  font-size: 19px;
  counter-increment: engine-step;
  content: counter(engine-step, upper-roman) '.';
}
.steps:has(.step) {
  counter-reset: engine-step;
}
.steps .step h3 {
  grid-area: title;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.steps .step p {
  grid-area: text;
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 62ch;
}

/* ── Бегущая строка ──────────────────────────────────────────────────────────
   Движение здесь необязательное: строка обязана быть читаемой, даже если
   анимация не отработала или выключена в системе. Поэтому лента переносится, а
   не уезжает за край, и `prefers-reduced-motion` её останавливает. */
.ticker {
  margin: clamp(24px, 3vw, 40px) 0;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.ticker-in {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 3vw, 40px);
  animation: club-ticker 38s linear infinite;
}
.ticker-in span {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
@keyframes club-ticker {
  from {
    transform: none;
  }
  to {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-in {
    animation: none;
  }
}

/* ── Общая база для блоков, которые клубу вряд ли понадобятся ────────────────
   [ages], [services], [afisha], [map]. Вставит — увидит типографику и рамки
   темы, а не чужой вид. Это решение, а не заглушка: прорабатывать каждый
   означало бы день работы на блоки, которых на ювелирном сайте не будет. */
.ages,
.svc,
.afisha {
  list-style: none;
  margin: clamp(24px, 3vw, 40px) 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.age-tile,
.svc-row,
.afisha-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 15px;
}
.age-tile__n,
.afisha-row__when {
  font-family: var(--ff-head);
  font-style: italic;
  color: var(--gold);
  font-size: 19px;
}
.svc-row__name,
.afisha-row__title {
  color: var(--ink);
  flex: 1 1 14ch;
}
.svc-row__desc {
  color: var(--muted);
  font-size: 14px;
  flex: 1 1 100%;
  order: 3;
}
.svc-row__price,
.afisha-row__price {
  font-family: var(--ff-head);
  color: var(--gold);
  font-size: 18px;
  margin-left: auto;
}
.map-embed {
  position: relative;
  margin: clamp(24px, 3vw, 40px) 0;
  border: 1px solid var(--rule);
  border-radius: var(--rad);
  overflow: hidden;
}
/* Вуаль над картой: до клика карта не перехватывает прокрутку страницы. Подпись лежит
   поверх ЧУЖОГО содержимого (карта светлая, наша тема тёмная) — без собственной подложки
   она давала контраст 1.06, то есть была не видна вовсе. Подложка своя, из токенов. */
.map-embed__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.map-embed__veil span {
  padding: 12px 22px;
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: var(--rad);
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

}