/* Воксхолл — лендинг ЖК. Арт-дирекшн «Ритм города»: чёрное, белое,
   сигнальный красный. Гротеск в капсе, жёсткая разрезка полос, круг из
   логотипа как маска. Палитра и шрифты взяты из презентации застройщика. */

:root{
  --ink:#0A0A0A;
  --graphite:#17171A;
  --concrete:#F2F2F0;
  --white:#fff;

  /* Красный даётся тремя оттенками намеренно. Фирменный #E4022D по бумаге даёт
     контраст 4.26 — этого хватает крупному тексту, но не мелкому. Поэтому:
     --red      фирменный, крупные акценты и заливки кнопок
     --red-ink  тёмный для мелкого текста ПО СВЕТЛОМУ (6.0)
     --red-lite светлый для мелкого текста ПО ТЁМНОМУ (6.5) */
  --red:#E4022D;
  --red-ink:#B80024;
  --red-lite:#FF5A6E;

  --text:#16161A;          /* по бумаге 15.6 */
  --text-2:#55555C;        /* по бумаге 6.5 */
  --text-inv:#FFFFFF;      /* по чёрному 19.9 */
  --text-inv-2:#B9BAC0;    /* по чёрному 9.9 */

  --line:rgba(10,10,10,.12);
  --line-inv:rgba(255,255,255,.16);
  --shadow:0 8px 30px rgba(0,0,0,.06);

  --r-card:14px;
  --r-btn:10px;
  --r-input:10px;

  --wrap:1280px;
  --pad-y:clamp(90px,13vh,150px);
  --pad-y-m:clamp(48px,7vh,72px);
  --gap:clamp(28px,4vw,56px);
  --head-h:88px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--concrete);
  color:var(--text);
  font-family:"Golos Text",system-ui,sans-serif;
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* height:auto обязателен. В разметке у картинок проставлены атрибуты width и
   height — они резервируют место и убирают скачки при загрузке, но браузер
   применяет их буквально: без height:auto картинка получает ширину из CSS и
   высоту из атрибута, то есть растягивается. На планировках это давало слот
   379×840 при пропорции файла 1.40. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
figure{margin:0}
ul{margin:0;padding:0;list-style:none}

h1,h2,h3,.num-val,.logo-word{
  font-family:"Unbounded",system-ui,sans-serif;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0;
}
h2{font-size:clamp(26px,3.6vw,52px);line-height:1.08}
h3{font-size:clamp(17px,1.5vw,21px);font-weight:400;letter-spacing:.09em}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.section{padding-block:var(--pad-y);position:relative}
.section-flush{padding-block:0}
.section-light{background:var(--concrete);color:var(--text)}
.section-dark{background:var(--ink);color:var(--text-inv)}
.section-dark h2,.section-dark h3{color:var(--text-inv)}

/* три красных штриха — рубрикатор из логотипа */
.bars{display:inline-flex;gap:3px;margin-right:12px;vertical-align:-1px}
.bars i{width:2px;height:12px;background:var(--red);display:block}
.bars i:nth-child(2){height:16px}
.bars i:nth-child(3){height:9px}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-ink);margin:0 0 18px;display:flex;align-items:center;
}
.eyebrow-light{color:var(--red-lite)}

.sec-head{max-width:900px;margin-bottom:clamp(34px,5vh,62px)}
.sec-lead{margin-top:20px;max-width:62ch;color:var(--text-2);font-size:clamp(16px,1.4vw,19px)}
.section-dark .sec-lead{color:var(--text-inv-2)}

/* Кнопки */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 28px;border:0;border-radius:var(--r-btn);
  font-family:"Golos Text",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:background .2s,color .2s,transform .15s;
}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:#c40126}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.section-dark .btn-ghost,.foot .btn-ghost{border-color:var(--line-inv);color:var(--text-inv)}
/* На фото у кнопки нет своего фона: и рамка, и текст только белые,
   иначе на светлом участке кадра она пропадает. */
.hero .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(2px)}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn-ghost:hover{border-color:var(--red)}
.btn-sm{min-height:44px;padding:0 24px;font-size:12.5px}
.btn-wide{width:100%}
.btn-inline{margin-top:26px}

/* Шапка */
.head{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--head-h);
  display:flex;align-items:center;
  background:rgba(10,10,10,0);transition:background .3s,backdrop-filter .3s;
}
.head.solid{background:rgba(10,10,10,.92);backdrop-filter:blur(10px)}
.head-in{display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px;color:#fff}
.logo-bars{display:inline-flex;gap:3px}
.logo-bars i{width:3px;height:19px;background:var(--red);display:block}
.logo-bars i:nth-child(2){height:24px}
.logo-bars i:nth-child(3){height:15px}
.logo-word{font-size:23px;font-weight:400;letter-spacing:.1em}
.head-nav{display:flex;gap:32px;margin-left:auto;font-size:15px;letter-spacing:.04em;color:#fff}
.head-nav a{opacity:.85;transition:opacity .2s,color .2s}
.head-nav a:hover{opacity:1;color:var(--red-lite)}
.head-cta{margin-left:8px}
.toc-toggle{
  display:none;width:44px;height:44px;background:transparent;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:4px;align-items:flex-end;
}
.toc-toggle i{display:block;width:22px;height:2px;background:#fff}
.toc-toggle i:nth-child(2){width:15px}

/* Оглавление */
.toc{
  position:fixed;top:0;right:0;z-index:70;width:300px;height:100dvh;
  background:var(--graphite);color:var(--text-inv);
  padding:26px 24px;transform:translateX(100%);transition:transform .35s ease;
  border-left:1px solid var(--line-inv);overflow-y:auto;
}
.toc.open{transform:none}
.toc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.toc-title{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-inv-2)}
.toc-close{background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.toc-list{display:flex;flex-direction:column;gap:2px}
.toc-list a{
  display:flex;gap:14px;padding:11px 12px;border-radius:10px;font-size:15px;
  color:var(--text-inv-2);transition:background .2s,color .2s;
}
.toc-list a b{color:var(--red-lite);font-weight:500;min-width:24px}
.toc-list a:hover,.toc-list a.active{background:rgba(255,255,255,.07);color:#fff}

/* Первый экран */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.18) 34%,rgba(10,10,10,.82) 100%);
}
.hero-in{position:relative;padding-bottom:clamp(60px,11vh,120px);padding-top:calc(var(--head-h) + 40px)}
.hero-title{font-size:clamp(44px,8.2vw,116px);font-weight:200;line-height:.98;letter-spacing:.05em}
.hero-sub{max-width:56ch;margin-top:22px;font-size:clamp(16px,1.5vw,19px);color:#EDEDF0}
.hero-sub b{color:#fff;font-weight:600}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-scroll{
  position:absolute;left:50%;bottom:26px;width:1px;height:46px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.75));
}

/* Цифры */
.nums-sec{padding-block:clamp(56px,8vh,96px)}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.num-val{
  font-size:clamp(40px,5.4vw,84px);font-weight:200;line-height:1;letter-spacing:0;
  color:var(--ink);
}
.num-val sup{font-size:.34em;font-weight:300;margin-left:.12em;vertical-align:super}
.num-word{font-size:clamp(30px,3.8vw,60px);color:var(--red-ink)}
.num-lbl{margin-top:14px;font-size:15px;color:var(--text-2);max-width:24ch}
.num{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.num::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--red)}

/* Сплиты */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.split-top{align-items:start}
.split-rev .split-text{order:2}
.split-media img{width:100%;height:auto;border-radius:var(--r-card);box-shadow:var(--shadow)}
.section-dark .split-media img{box-shadow:none;border:1px solid var(--line-inv)}
figcaption{margin-top:12px;font-size:13px;color:var(--text-2);letter-spacing:.02em}
.section-dark figcaption{color:var(--text-inv-2)}

/* Круглая маска — фирменный приём из логотипа */
.circle-media{position:relative;max-width:520px;margin-inline:auto}
.circle-media img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.circle-media::before{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px solid var(--line);pointer-events:none;
}
.circle-media figcaption{text-align:center}

/* Полоса во всю ширину. Высота подобрана под пропорцию кадра 4.83, иначе
   object-fit:cover срежет панораму по бокам. */
.band{margin-block:clamp(40px,6vh,80px);position:relative}
.band img{width:100%;height:clamp(190px,20.7vw,300px);object-fit:cover}
.band-cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 24px;
  background:linear-gradient(0deg,rgba(10,10,10,.72),transparent);color:#EDEDF0;
}

/* Расстояния */
.dist-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.dist-cap{font-size:12px;letter-spacing:.22em;color:var(--red-lite);margin:0 0 18px}
.dist li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line-inv);
}
.dist li span{color:var(--text-inv-2);font-size:16px}
.dist li b{
  font-family:"Unbounded",sans-serif;font-weight:300;font-size:clamp(17px,1.6vw,22px);
  white-space:nowrap;display:flex;align-items:baseline;gap:10px;
}
.dist li b i{font-style:normal;font-family:"Golos Text",sans-serif;font-size:13px;color:var(--red-lite)}

/* Теги окружения */
.tags{margin-top:28px;display:flex;flex-direction:column;gap:18px}
.tag-cap{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--red-ink);display:block;margin-bottom:6px}
.tag-group p{margin:0;font-size:16px;color:var(--text-2)}

/* Факты списком */
.facts li{padding:16px 0;border-bottom:1px solid var(--line-inv)}
.section-light .facts li{border-color:var(--line)}
.facts li b{display:block;font-weight:600;font-size:16px;margin-bottom:4px}
.facts li span{font-size:15px;color:var(--text-inv-2)}
.section-light .facts li span{color:var(--text-2)}
.facts-light li{border-color:var(--line-inv)}

.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.fact{padding-top:20px;border-top:1px solid var(--line-inv);position:relative}
.fact::before{content:"";position:absolute;top:-1px;left:0;width:28px;height:2px;background:var(--red)}
.fact b{display:block;font-size:17px;font-weight:600;margin-bottom:8px}
.fact span{font-size:15px;color:var(--text-inv-2)}

/* Цитата */
.quote{
  margin:0 0 clamp(34px,5vh,56px);padding:30px 34px;border-left:3px solid var(--red);
  background:#fff;border-radius:0 var(--r-card) var(--r-card) 0;box-shadow:var(--shadow);
  font-size:clamp(18px,2vw,26px);line-height:1.35;max-width:900px;
}
.quote cite{display:block;margin-top:16px;font-size:13px;font-style:normal;color:var(--text-2);letter-spacing:.04em}

/* Карточки */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-card);box-shadow:var(--shadow)}
.card-tall img{aspect-ratio:4/5}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,4vh,44px)}
.chips li{
  padding:9px 18px;border:1px solid var(--line);border-radius:999px;
  font-size:14px;color:var(--text-2);background:#fff;
}

/* Террасы */
.terr{display:grid;grid-template-columns:1fr 1fr;min-height:80vh;align-items:center}
.terr-text{padding:var(--pad-y) clamp(20px,4vw,70px)}
.terr-media img{width:100%;height:100%;object-fit:cover;min-height:60vh}
.terr-media figcaption{padding:12px 20px}

/* Планировки */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:clamp(40px,6vh,70px)}
.area-cap{font-size:12px;letter-spacing:.22em;color:var(--red-ink);margin:0 0 16px}
.area li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.area li span{color:var(--text-2);font-size:16px}
.area li b{font-family:"Unbounded",sans-serif;font-weight:300;font-size:17px;white-space:nowrap}
.area-note{margin-top:18px;font-size:14px;color:var(--text-2)}

/* Планировки на странице не публикуются: они и есть повод оставить заявку.
   Вместо галереи — блок запроса с перечнем того, что придёт в подборке. */
.ask{
  display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:start;background:var(--ink);color:var(--text-inv);
  border-radius:var(--r-card);padding:clamp(28px,3.4vw,52px);
}
.ask-title{font-size:clamp(20px,2.2vw,30px);color:var(--text-inv);margin-bottom:16px}
.ask-text p{color:var(--text-inv-2);max-width:52ch}
.ask-list{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.ask-list li{position:relative;padding-left:24px;font-size:16px}
.ask-list li::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--red);
}
.ask-side{display:flex;flex-direction:column;gap:20px}
.ask-hint{border-left:2px solid var(--red);padding-left:18px}
.ask-cap{
  display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-lite);margin-bottom:8px;
}
.ask-hint p{font-size:15px;color:var(--text-inv-2);margin:0}

.dev{max-width:820px;font-size:clamp(17px,1.5vw,20px)}

/* Вопросы. Число видимых вопросов обязано совпадать с числом в JSON-LD —
   разметка без соответствующего контента на странице ловится поисковиком
   как обман. Аккордеон на <details>, без единой строки JS. */
.faq{max-width:900px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-size:clamp(16px,1.5vw,19px);font-weight:500;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq-item[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq-item summary:hover{color:var(--red-ink)}
.faq-item p{padding:0 44px 22px 0;margin:0;color:var(--text-2);max-width:68ch}

/* Заявка */
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.lead-facts{display:flex;gap:38px;margin-top:34px;flex-wrap:wrap}
.lead-facts .n{font-family:"Unbounded",sans-serif;font-weight:200;font-size:clamp(28px,3vw,44px);line-height:1}
.lead-facts .n sup{font-size:.36em;vertical-align:super}
.lead-facts .l{font-size:13px;color:var(--text-inv-2);margin-top:8px}
.lead-card{background:#fff;border-radius:var(--r-card);padding:clamp(24px,3vw,38px);color:var(--text)}
.fld{display:block;margin-bottom:16px}
.fld span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px}
.fld input{
  width:100%;height:50px;padding:0 16px;border:1px solid var(--line);
  border-radius:var(--r-input);font:inherit;font-size:16px;background:#fff;color:var(--text);
}
.fld input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-note{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-2)}
.form-msg{margin:12px 0 0;font-size:14px;min-height:20px}
.form-msg.ok{color:#1B7A3D}
.form-msg.err{color:var(--red-ink)}

/* Футер */
.foot{background:var(--ink);color:var(--text-inv-2);padding-block:clamp(56px,8vh,90px) 40px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gap)}
.foot-top p{font-size:15px;max-width:44ch;margin-top:18px}
.logo-foot .logo-word{font-size:17px}
.foot-col h5{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  margin:0 0 16px;font-weight:600;
}
.foot-col a{display:block;padding:5px 0;font-size:15px;transition:color .2s}
.foot-col a:hover{color:var(--red-lite)}
.foot-col .btn{margin-top:16px}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line-inv)}
.foot-bottom p{font-size:12.5px;line-height:1.6;color:#8E8F96;max-width:100ch}

/* Виджет заявки */
.lead-fab{
  position:fixed;right:26px;bottom:26px;z-index:55;width:60px;height:60px;
  border:0;border-radius:50%;background:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.28);transition:transform .2s,opacity .25s;
}
.lead-fab::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  background:rgba(228,2,45,.16);z-index:-1;
}
.fab-ring{width:26px;height:26px;border:3px solid #fff;border-radius:50%;display:block}
.fab-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--red)}
.lead-fab:hover{transform:scale(1.06)}
.lead-fab.hide{opacity:0;pointer-events:none}

.lead-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:56;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:10px 16px;min-height:60px;background:rgba(10,10,10,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line-inv);
  transform:translateY(110%);transition:transform .3s;
}
.lead-bar.show{transform:none}
.lead-bar span{color:#fff;font-size:13px;line-height:1.3;max-width:56%}

.lw{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.lw[hidden]{display:none}
.lw-back{position:absolute;inset:0;background:rgba(10,10,10,.6);opacity:0;transition:opacity .3s}
.lw.open .lw-back{opacity:1}
.lw-panel{
  position:relative;width:min(100%,520px);background:#fff;color:var(--text);
  border-radius:20px 20px 0 0;padding:30px 24px calc(30px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .32s cubic-bezier(.22,.8,.3,1);
  max-height:92dvh;overflow-y:auto;
}
.lw.open .lw-panel{transform:none}
.lw-close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--text-2)}
.lw-panel h3{font-size:19px;margin-bottom:8px}
.lw-sub{font-size:14px;color:var(--text-2);margin-bottom:22px}

/* Прелоадер */
.preloader{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s,visibility .5s;
}
.preloader.done{opacity:0;visibility:hidden}
.pl-mark{
  display:flex;align-items:center;gap:10px;color:#fff;
  font-family:"Unbounded",sans-serif;font-weight:300;letter-spacing:.16em;font-size:18px;
}
.pl-mark i{width:3px;height:16px;background:var(--red);display:block}
.pl-mark i:nth-child(2){height:20px}
.pl-mark i:nth-child(3){height:13px;margin-right:8px}

/* Появление блоков. Полупрозрачного текста человек видеть не должен:
   старт заранее, страховка в main.js. */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.shown{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.3,1)}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- Телефон и планшет ---------- */
@media (max-width:1024px){
  .head-nav{display:none}
  .head-cta{display:none}
  .toc-toggle{display:flex;margin-left:auto}
  .facts-grid{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  :root{--pad-y:var(--pad-y-m);--gap:26px;--head-h:66px}
  body{font-size:16px}
  .wrap{width:min(100% - 32px,var(--wrap))}
  .nums{grid-template-columns:1fr 1fr;gap:24px}
  .split,.dist-grid,.areas,.terr,.lead-grid{grid-template-columns:1fr}
  .split-rev .split-text{order:0}
  .cards{grid-template-columns:1fr;gap:24px}
  .ask{grid-template-columns:1fr;gap:26px;padding:26px 20px}
  .card-tall img,.card img{aspect-ratio:4/3}
  .facts-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  /* Панорама 4.83 на телефоне превратилась бы в полоску 80px — прячем,
     секция и так держится на сплите с фасадом. */
  .band{display:none}
  .terr-text{padding:var(--pad-y) 16px}
  .terr-media img{min-height:auto;max-height:62vh}
  .hero-in{padding-bottom:96px}
  .hero-title{font-size:clamp(38px,12vw,64px)}
  .hero-actions .btn{width:100%}
  .lead-fab{display:none}
  .lead-bar{display:flex}
  .quote{padding:22px 20px;font-size:18px}
  .toc{width:min(88vw,320px)}
  .circle-media{max-width:340px}
}