/* CH 03 · ЖУРНАЛ — 2000s pop magazine, issue №1. The light take on the brand palette. */
.ch3{
  --paper:#FFF4F9; --pink:#F9AADB; --pink-l:#FFD0EB; --mint:#96F2B0;
  --ink:#210014; --ink-2:#5E3E50; --pink-ink:#B3266F;
  --f-cond:'Fira Sans Extra Condensed','Arial Narrow',sans-serif;
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --logo-color:var(--ink);
  background:var(--paper);color:var(--ink);color-scheme:light;
}
.c3-wrap{max-width:1240px;margin-inline:auto;padding-inline:max(16px,4vw)}
.c3-kicker{font:600 italic 20px/1.2 var(--f-serif);color:var(--pink-ink)}

.c3-strip{display:flex;justify-content:space-between;gap:16px;padding-block:16px;
  font:800 12px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;box-shadow:inset 0 -2px 0 var(--ink)}

/* ---------- hero: cover + editor's letter ---------- */
.c3-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,96px);align-items:center;padding-block:clamp(40px,6vw,84px)}

.c3-cover{position:relative;width:100%;max-width:540px;justify-self:center;aspect-ratio:864/1184;overflow:hidden;
  container-type:inline-size;background:var(--pink-l);transform:rotate(-1.6deg);
  box-shadow:0 2px 0 rgba(33,0,20,.06),0 46px 80px -34px rgba(33,0,20,.5)}
.c3-cover__media{position:absolute;left:0;right:0;top:17%;bottom:0;background:#120310}
.c3-cover__media video{width:100%;height:100%;object-fit:cover}
.c3-live{position:absolute;left:4%;top:19.5%;display:inline-flex;align-items:center;gap:1.4cqw;padding:1.2cqw 2cqw;background:var(--ink);color:var(--pink-l);
  font:800 max(8px,2.1cqw)/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.c3-live i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#ff3b6b;animation:c3-blink 1.2s steps(1) infinite}
@keyframes c3-blink{50%{opacity:.2}}
.c3-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.38),rgba(255,255,255,0) 26%,rgba(255,255,255,0) 72%,rgba(255,255,255,.14))}
.c3-mast{position:absolute;left:5%;right:5%;top:2.4%;margin:0}
.c3-cover__issue{position:absolute;left:5%;right:5%;top:13.2%;display:flex;justify-content:space-between;
  font:800 max(8px,2.2cqw)/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase}
.c3-cl{position:absolute}
.c3-cl--test{right:4%;top:19.5%;max-width:36%;padding:2cqw 2.4cqw 2.2cqw;background:var(--pink-l);display:grid;justify-items:end;gap:1.2cqw;text-align:right}
.c3-cl--test .chip{padding:1cqw 2.2cqw;background:var(--ink);color:var(--pink-l);font:900 italic 4cqw/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase}
.c3-cl--test b{font:900 italic 6.4cqw/.92 var(--f-cond);text-transform:uppercase}
.c3-cl--test i{font:600 italic 4.6cqw/1 var(--f-serif)}
.c3-cl--moves{left:4%;bottom:13.5%;max-width:62%;padding:2cqw 2.6cqw;background:#fff;display:grid;gap:.8cqw}
.c3-cl--moves i{font:600 italic 4.8cqw/1 var(--f-serif)}
.c3-cl--moves b{font:900 italic 5.4cqw/.95 var(--f-cond);text-transform:uppercase}
.c3-sticker{position:absolute;left:25%;top:50%;width:21cqw;aspect-ratio:1;display:grid;place-items:center;text-align:center;
  background:var(--mint);color:var(--ink);transform:rotate(12deg);
  clip-path:polygon(50.0% 0.0%,59.6% 8.1%,71.7% 5.0%,76.8% 16.4%,89.1% 18.8%,88.7% 31.3%,98.7% 38.9%,93.0% 50.0%,98.7% 61.1%,88.7% 68.7%,89.1% 81.2%,76.8% 83.6%,71.7% 95.0%,59.6% 91.9%,50.0% 100.0%,40.4% 91.9%,28.3% 95.0%,23.2% 83.6%,10.9% 81.2%,11.3% 68.7%,1.3% 61.1%,7.0% 50.0%,1.3% 38.9%,11.3% 31.3%,10.9% 18.8%,23.2% 16.4%,28.3% 5.0%,40.4% 8.1%);
  font:900 italic 4.3cqw/.92 var(--f-cond);text-transform:uppercase}
.c3-cl--band{left:0;bottom:5%;padding:2cqw 4cqw 2cqw 5cqw;background:var(--ink);color:var(--pink-l);white-space:nowrap;
  font:800 italic 4.1cqw/1 var(--f-cond);letter-spacing:.03em;text-transform:uppercase}
.c3-barcode{position:absolute;right:4.5%;bottom:4%;width:20cqw;padding:1.6cqw 2cqw 1.2cqw;background:#fff;display:grid;gap:.8cqw}
.c3-barcode i{display:block;height:8cqw;background:linear-gradient(90deg,
  #000 0 3%,transparent 3% 5%,#000 5% 6%,transparent 6% 9%,#000 9% 13%,transparent 13% 15%,#000 15% 16%,transparent 16% 19%,
  #000 19% 21%,transparent 21% 24%,#000 24% 25%,transparent 25% 27%,#000 27% 31%,transparent 31% 33%,#000 33% 34%,transparent 34% 37%,
  #000 37% 38%,transparent 38% 41%,#000 41% 44%,transparent 44% 46%,#000 46% 47%,transparent 47% 50%,#000 50% 52%,transparent 52% 54%,
  #000 54% 55%,transparent 55% 58%,#000 58% 62%,transparent 62% 64%,#000 64% 65%,transparent 65% 68%,#000 68% 69%,transparent 69% 72%,
  #000 72% 75%,transparent 75% 77%,#000 77% 78%,transparent 78% 81%,#000 81% 83%,transparent 83% 86%,#000 86% 87%,transparent 87% 89%,
  #000 89% 93%,transparent 93% 95%,#000 95% 96%,transparent 96% 98%,#000 98% 100%)}
.c3-barcode span{font:600 max(6px,1.6cqw)/1 var(--f-mono);text-align:center;white-space:nowrap}

.c3-intro h2{margin:14px 0 26px;font:900 italic clamp(46px,6.4vw,92px)/.9 var(--f-cond);text-transform:uppercase}
.c3-intro h2 em{display:block;margin-top:12px;font:600 italic clamp(36px,4.8vw,68px)/1 var(--f-serif);text-transform:none;color:var(--pink-ink)}
.c3-intro p{color:var(--ink-2);max-width:54ch}
.c3-dropcap::first-letter{float:left;padding:.06em .1em 0 0;font:700 italic 4.6em/.8 var(--f-serif);color:var(--pink-ink)}
.c3-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin-top:34px}
.c3-btn{display:inline-flex;align-items:center;gap:10px;padding:18px 26px;text-decoration:none;
  background:var(--ink);color:var(--pink-l);font:800 14px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:6px 6px 0 var(--pink);transition:transform .15s,box-shadow .15s}
.c3-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--pink)}
.c3-btn:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--pink)}
.c3-link{font:600 italic 22px/1 var(--f-serif);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.c3-link:hover{color:var(--pink-ink)}
.c3-sign{margin-top:30px;font:600 italic 20px/1 var(--f-serif)}

/* ---------- contents ---------- */
.c3-toc{padding-block:clamp(48px,6vw,84px)}
.c3-toc h2{margin-bottom:28px;padding-top:18px;box-shadow:inset 0 2px 0 var(--ink);font:900 italic clamp(40px,5vw,64px)/1 var(--f-cond);text-transform:uppercase}
.c3-toc ol{list-style:none;margin:0;padding:1px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ink)}
.c3-toc li{background:var(--paper)}
.c3-toc a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:baseline;height:100%;padding:22px;text-decoration:none;transition:background .15s}
.c3-toc b{grid-row:span 2;font:900 italic clamp(48px,5vw,72px)/.85 var(--f-cond);color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .15s}
.c3-toc span{font:800 21px/1.15 var(--f-cond);text-transform:uppercase;letter-spacing:.02em}
.c3-toc i{font:500 italic 19px/1.25 var(--f-serif);color:var(--ink-2)}
.c3-toc a:hover{background:var(--pink-l)}
.c3-toc a:hover b{color:var(--ink)}

/* ---------- generic section ---------- */
.c3-sec{padding-block:clamp(64px,8vw,112px)}
.c3-head{display:grid;gap:10px;margin-bottom:clamp(32px,4vw,52px);padding-top:18px;box-shadow:inset 0 2px 0 var(--ink)}
.c3-head h2,.c3-feature h2,.c3-quiz h2{font:900 italic clamp(42px,5.6vw,80px)/.92 var(--f-cond);text-transform:uppercase}

/* feature */
.c3-feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.c3-feature__photo{margin:0}
.c3-feature__photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.c3-feature__photo figcaption{margin-top:12px;padding-left:14px;border-left:2px solid var(--pink);font:500 italic 18px/1.4 var(--f-serif);color:var(--ink-2)}
.c3-feature__text h2{margin:10px 0 18px}
.c3-feature__text>p{color:var(--ink-2)}
.c3-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.c3-facts li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:baseline}
.c3-facts b{font:900 italic 34px/1 var(--f-cond);color:var(--pink-ink)}
.c3-facts span{color:var(--ink-2)}
.c3-facts strong{color:var(--ink)}
.c3-pull{grid-column:1/-1;margin:clamp(24px,4vw,52px) 0 0;font:600 italic clamp(36px,5vw,72px)/1.04 var(--f-serif);letter-spacing:-.01em}
.c3-pull::before{content:"“";display:block;height:.42em;font:700 1.8em/1 var(--f-serif);color:var(--pink)}
.c3-pull span{display:block;color:var(--pink-ink)}

/* quiz */
.c3-quiz{background:var(--pink-l);box-shadow:inset 0 2px 0 var(--ink),inset 0 -2px 0 var(--ink)}
.c3-quiz__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.c3-quiz__head h2{margin:10px 0 16px}
.c3-quiz__head p{color:var(--ink-2);max-width:36ch}
.c3-quiz__card{min-height:440px;padding:clamp(22px,3vw,40px);background:#fff;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.qz-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;font:800 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
.qz-dots{display:flex;gap:6px}
.qz-dots i{width:22px;height:6px;background:var(--pink-l);box-shadow:inset 0 0 0 1px var(--ink)}
.qz-dots i.on{background:var(--ink)}
.qz-q{margin-bottom:22px;font:700 italic clamp(26px,2.6vw,34px)/1.15 var(--f-serif)}
.qz-opts{display:grid;gap:10px}
.qz-opt{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:stretch;width:100%;text-align:left;border:1.5px solid var(--ink);background:#fff;transition:background .12s,transform .12s}
.qz-opt b{display:grid;place-items:center;background:var(--ink);color:var(--pink-l);font:900 italic 20px/1 var(--f-cond)}
.qz-opt span{padding:13px 16px;font:500 17px/1.35 var(--f-body)}
.qz-opt:hover{background:var(--mint);transform:translateX(4px)}
.qz-res small{font:800 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
.qz-res h3{margin:14px 0 8px;font:900 italic clamp(44px,5.4vw,78px)/.9 var(--f-cond);text-transform:uppercase}
.qz-res .by{font:600 italic 22px/1.2 var(--f-serif);color:var(--pink-ink)}
.qz-res p{margin:18px 0 28px;color:var(--ink-2)}
.qz-again{margin-left:18px;font:600 italic 19px/1 var(--f-serif);text-decoration:underline;text-underline-offset:4px}

/* backstage: polaroids with real clips */
.c3-strip-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);padding-top:14px}
.c3-strip-photos figure{position:relative;margin:0;padding:12px 12px 16px;background:#fff;box-shadow:0 20px 40px -24px rgba(33,0,20,.5)}
.c3-strip-photos figure:nth-child(1){transform:rotate(-2deg)}
.c3-strip-photos figure:nth-child(2){transform:rotate(1.4deg) translateY(18px)}
.c3-strip-photos figure:nth-child(3){transform:rotate(-.8deg)}
.c3-strip-photos figure::before{content:"";position:absolute;z-index:1;top:-12px;left:50%;width:92px;height:24px;background:rgba(150,242,176,.8);transform:translateX(-50%) rotate(-3deg)}
.c3-strip-photos video{width:100%;aspect-ratio:4/3;object-fit:cover;background:#1a0712}
.c3-strip-photos figcaption{margin-top:12px;text-align:center;font:600 italic 20px/1 var(--f-serif)}

/* chart */
.c3-chart__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.c3-chart__list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--ink)}
.c3-chart__list b{grid-row:span 2;font:900 italic clamp(44px,4.4vw,64px)/.85 var(--f-cond);color:var(--pink);-webkit-text-stroke:1.5px var(--ink)}
.c3-chart__list span{font:800 clamp(20px,2vw,26px)/1.1 var(--f-cond);text-transform:uppercase}
.c3-chart__list i{font:500 italic 19px/1.3 var(--f-serif);color:var(--ink-2)}
.c3-note{margin-top:20px;font:500 italic 18px/1.4 var(--f-serif);color:var(--ink-2)}

/* what to bring */
.c3-bag__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.c3-bag__img{position:relative;margin:0;background:#fff;box-shadow:0 30px 60px -36px rgba(33,0,20,.5)}
.c3-bag__img img{width:100%}
.c3-bag__img .dot,.c3-bag__list b{display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--pink-l);font:900 italic 17px/1 var(--f-cond)}
.c3-bag__img .dot{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--ink)}
.c3-bag__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.c3-bag__list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:16px 0;border-bottom:1px solid var(--ink)}
.c3-bag__list b{width:30px;height:30px;font-size:16px}
.c3-bag__list span{color:var(--ink-2)}
.c3-bag__list strong{color:var(--ink);font-weight:800}

/* faq */
.c3-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3vw,40px) clamp(28px,5vw,72px);margin:0}
.c3-qa div{padding-top:16px;border-top:1px solid var(--ink)}
.c3-qa dt{margin-bottom:10px;font:700 italic clamp(23px,2vw,28px)/1.15 var(--f-serif)}
.c3-qa dd{margin:0;color:var(--ink-2)}

/* coupon */
.c3-coupon{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:end;
  padding:clamp(28px,4vw,56px);background:#fff;border:2px dashed var(--ink)}
.c3-coupon__cut{position:absolute;top:-15px;left:40px;width:28px;height:28px;padding:2px;fill:var(--ink);background:var(--paper)}
.c3-coupon .c3-coupon__label{font:900 italic clamp(70px,10vw,140px)/.8 var(--f-cond);text-transform:uppercase;color:var(--pink);-webkit-text-stroke:2px var(--ink)}
.c3-coupon h2{margin:16px 0 14px;font:700 italic clamp(28px,3.4vw,46px)/1.05 var(--f-serif)}
.c3-coupon p{color:var(--ink-2);max-width:48ch}
.c3-coupon__lines{display:grid;gap:24px;margin-bottom:30px}
.c3-coupon__lines span{display:flex;align-items:flex-end;gap:12px;font:800 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.c3-coupon__lines span::after{content:"";flex:1;border-bottom:1px solid var(--ink)}

.c3-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding-block:36px;box-shadow:inset 0 2px 0 var(--ink);font-size:15px}
.c3-foot .logo{width:140px}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .c3-toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .c3-hero,.c3-feature,.c3-quiz__grid,.c3-bag__grid,.c3-coupon{grid-template-columns:minmax(0,1fr)}
  .c3-chart__list,.c3-qa{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .c3-strip span:nth-child(2){display:none}
  .c3-toc ol{grid-template-columns:minmax(0,1fr)}
  .c3-strip-photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:16px 4px 28px;margin-inline:-4px}
  .c3-strip-photos figure{flex:0 0 68%;scroll-snap-align:center}
  .c3-strip-photos figure:nth-child(2){transform:rotate(1.4deg)}
  .c3-quiz__card{box-shadow:6px 6px 0 var(--ink)}
}