/* Юля — стиль: классы слайдов. Все цвета и шрифты — из tokens.css. */
.y-row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; padding:12px; background:var(--surface-deep); }
.y-row > figure { margin:0; width:300px; display:grid; gap:6px; }
.y-row figcaption { font:600 12px/1.3 var(--font-text); color:var(--ink-muted); }
.y-slide { position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; container-type:inline-size;
  background:var(--surface); color:var(--ink); font-family:var(--font-text); --acc:var(--gold-text); --acc-soft:var(--surface-raised); }
.y-pad { position:absolute; inset:7.4cqw; display:flex; flex-direction:column; }
/* фоны */
.y-bg-paper { background-color:var(--surface); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/><feDiffuseLighting lighting-color='%23f2ece2' surfaceScale='2.4'><feDistantLight azimuth='35' elevation='58'/></feDiffuseLighting></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"); background-size:cover; }
.y-bg-graphite { background-color:var(--surface); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .93 0 0 0 0 .89 0 0 0 0 .83 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.y-bg-grid { background-color:var(--surface-deep);
  background-image:radial-gradient(color-mix(in srgb, var(--gold) 22%, transparent) 1px, transparent 1.4px),
   linear-gradient(color-mix(in srgb, var(--chalk) 7%, transparent) 1px, transparent 1px),
   linear-gradient(90deg, color-mix(in srgb, var(--chalk) 7%, transparent) 1px, transparent 1px);
  background-size:37px 53px, 24px 24px, 24px 24px; }
.y-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.y-shade { position:absolute; inset:auto 0 0; height:55%; background:linear-gradient(transparent, color-mix(in srgb, var(--surface-deep) 92%, transparent)); }
/* шрифтовые роли */
.y-hand { font-family:var(--font-hand); line-height:1.05; }
.y-caps { font-family:var(--font-head); font-weight:700; text-transform:uppercase; line-height:.92; }
.y-tall { display:inline-block; transform:scaleY(1.15); transform-origin:50% 100%; }
.y-num { font-family:var(--font-num); line-height:.85; }
.y-kicker { font:700 2.6cqw/1.2 var(--font-text); letter-spacing:.12em; text-transform:uppercase; color:var(--acc); }
.y-body { font:500 3.7cqw/1.35 var(--font-text); }
.y-cap { font:600 2.8cqw/1.3 var(--font-text); color:var(--ink-muted); }
/* золото: на тёмном — градиент, на бумаге — маркер под тёмным словом */
.y-gold { background:linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme="light"] .y-gold { background:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 94%, transparent 94%); -webkit-background-clip:border-box; background-clip:border-box; color:var(--ink); padding:0 .06em; }
.y-acc { color:var(--acc); }
.y-chalk-line { display:block; width:62%; height:auto; margin-top:3cqw; }
.y-chalk-line path { stroke:var(--chalk); }
[data-theme="light"] .y-chalk-line path { stroke:var(--ink); }
.y-pill { display:inline-block; font:700 3cqw/1 var(--font-text); padding:1.6cqw 3.4cqw; border-radius:var(--radius-pill); background:var(--gold-deep); color:var(--on-gold); }
/* настроения: акцент пенала */
.y-slide[data-acc="tomato"] { --acc:var(--tomato); --acc-soft:var(--tomato-soft); }
.y-slide[data-acc="peach"] { --acc:var(--peach); --acc-soft:var(--peach-soft); }
.y-slide[data-acc="ochre"] { --acc:var(--ochre); --acc-soft:var(--ochre-soft); }
.y-slide[data-acc="olive"] { --acc:var(--olive); --acc-soft:var(--olive-soft); }
.y-slide[data-acc="sage"] { --acc:var(--sage); --acc-soft:var(--sage-soft); }
.y-slide[data-acc="mint"] { --acc:var(--mint); --acc-soft:var(--mint-soft); }
.y-slide[data-acc="cinnamon"] { --acc:var(--cinnamon); --acc-soft:var(--cinnamon-soft); }
.y-slide[data-acc="wine"] { --acc:var(--wine); --acc-soft:var(--wine-soft); }
.y-slide[data-acc="lilac"] { --acc:var(--lilac); --acc-soft:var(--lilac-soft); }
@media (prefers-reduced-motion:no-preference) { .y-slide { transition:none; } }