/* Yana Tarnovetska Portfolio — component styles.
   Every value comes from tokens.json (var(--…)). Motion lives here: the page has no motion family. */
:root {
  /* one curve: a quick start and a long soft stop, so things settle into place; no overshoot */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-feedback: 200ms; /* hover, press, chip, viewer, slider keys */
  --dur-enter: 600ms;    /* hero and scroll reveals, slider settling back */
  --dur-line: 800ms;     /* a line drawing across */
  --rise: 16px;          /* entrance travel */
  --stagger: 80ms;       /* beat between parts of one sequence; 3 beats at most */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* page loader only */
}

/* ---------- Base ---------- */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.4; font-weight: 400; -webkit-font-smoothing: antialiased; }
[data-theme="dark"] { background: var(--bg); color: var(--ink); }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
p + p { margin-top: var(--space-s); }
p, li, td { text-wrap: pretty; }

/* ---------- Fluid type: styles carry line height + tracking, size comes from --fs-* ---------- */
.contact { font-size: var(--fs-contact); }
.h1 { font-size: var(--fs-h1); }
.stat { font-size: var(--fs-stat); }
.h2 { font-size: var(--fs-h2); }
.step-num { font-size: var(--fs-step-num); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
.lead { font-size: var(--fs-lead); }
.body { font-size: var(--fs-body); }
.nav { font-size: var(--fs-nav); }
.small { font-size: var(--fs-small); }
.stat, .step-num, .num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.w500 { font-weight: 500; }
.measure { max-width: var(--measure); }
.measure-learnings { max-width: var(--measure-learnings); }

/* ---------- Page frame: content stays inside 1440px, centered; section backgrounds run full width.
   Fluid tokens cap at their 1440 value in tokens.css, so nothing grows past the frame. ---------- */

/* ---------- Grid ---------- */
.g { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gut); padding-inline: var(--m); max-width: var(--frame); margin-inline: auto; box-sizing: border-box; }
.s-full { grid-column: 1 / -1; }
.s-title { grid-column: 1 / 12; }   /* 1–11 */
.s-heading { grid-column: 1 / 10; } /* 1–9 */
.s-wide { grid-column: 1 / 10; }    /* KPI row, table, steps: 1–9 */
.s-lede { grid-column: 1 / 8; }     /* 1–7 */
.s-text { grid-column: 1 / 7; }     /* 1–6 */
.s-media { grid-column: 7 / 13; }   /* 7–12 */
.s-side { grid-column: 9 / 13; }    /* 9–12 */
.s-next { grid-column: 5 / 13; justify-self: end; text-align: right; } /* 5–12 */

/* ---------- Lines (only where the line rule allows) ---------- */
.rule { grid-column: 1 / -1; border-top: var(--line) solid var(--rule); }

/* ---------- Section ---------- */
.yt-section { padding-block: var(--section); }
/* dark sections: the background edge already marks the start, so no line; the heading sits --section from the top, matching the bottom */
.yt-section[data-theme="dark"] .g > .rule { display: none; }
.yt-section[data-theme="dark"] .g > .yt-head { margin-top: 0; }
.yt-head { margin-top: var(--space-m); }   /* line → h2 */
.yt-body { margin-top: var(--space-l); }   /* h2 → content */
.yt-group + .yt-group { margin-top: var(--space-l); }
.yt-sub + .yt-sub { margin-top: var(--space-2xl); }
.yt-decision + .yt-decision { margin-top: var(--space-xl); }

/* ---------- Header ---------- */
.yt-header { position: sticky; top: 0; z-index: 10; background: var(--bg); }
.yt-header-in { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--gut); min-height: var(--header-height); padding-inline: var(--m); max-width: var(--frame); margin-inline: auto; box-sizing: border-box; font-size: var(--fs-nav); line-height: 1.3; }
/* the page-frame line sits inside the margins, like the section lines, and draws in on load */
.yt-header-in::after { content: ""; position: absolute; left: var(--m); right: var(--m); bottom: 0; border-bottom: var(--line) solid var(--rule); transform-origin: left; animation: yt-draw var(--dur-line) var(--ease-settle) both; }
.yt-name { font-weight: 500; }
.yt-nav { display: flex; flex-wrap: wrap; column-gap: var(--nav-gap); }
.yt-link { display: inline-block; padding-block: var(--link-pad); }
.yt-link:hover { text-decoration: underline; text-decoration-thickness: var(--line); text-underline-offset: 0.2em; }

/* ---------- Hero ---------- */
.yt-hero { padding-top: var(--hero-top); padding-bottom: var(--section); }
.yt-case-hero { padding-top: var(--space-l); padding-bottom: var(--section); }
/* gaps by relationship: title and lede are one thought (m), the meta line tags the lede (s), every other part stands apart (l) */
.yt-hero > :not(.number-field) + *, .yt-case-hero > * + * { margin-top: var(--space-l); }
.yt-hero > .h1 + .lead, .yt-case-hero > .h1 + .lead { margin-top: var(--space-m); }
.yt-case-hero > .lead + .small, .yt-case-hero > .small + .yt-proto-top { margin-top: var(--space-s); }

/* ---------- Stat / KPI ---------- */
.yt-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--space-l); }
.yt-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yt-stat-label { margin-top: var(--space-xs); }

/* ---------- Image placeholder ---------- */
.yt-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--space-s); background: var(--box); color: var(--muted); text-align: center; border-radius: var(--radius-none); box-sizing: border-box; }
.yt-ph.r16x9 { aspect-ratio: 16 / 9; }
.yt-ph.r21x9 { aspect-ratio: 21 / 9; }
.yt-fig figcaption { margin-top: var(--space-xs); }

/* ---------- Work card ---------- */
.yt-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.yt-card { display: flex; flex-direction: column; }
.yt-card-media { overflow: hidden; }
.yt-card-media .yt-ph { transition: transform var(--dur-feedback) var(--ease-settle); }
.yt-card:hover .yt-card-media .yt-ph { transform: scale(0.975); }
.yt-card-meta { margin-top: var(--space-s); }   /* less than the gutter, so text binds to its own image */
.yt-card-title { margin-top: var(--space-xs); }
.yt-card-text { margin-top: var(--space-xs); }
.yt-card-cta { margin-top: auto; padding-top: var(--space-m); font-weight: 500; }

/* ---------- Arrow links ---------- */
.yt-arrow { display: inline-flex; align-items: baseline; gap: var(--arrow-gap); transition: gap var(--dur-feedback) var(--ease-settle); }
a:hover .yt-arrow, a.yt-arrow:hover { gap: var(--arrow-gap-hover); }

/* ---------- Table ---------- */
.yt-table-wrap { overflow-x: auto; }
.yt-table { width: 100%; border-collapse: collapse; font-size: var(--fs-nav); line-height: 1.3; }
.yt-table th { font-size: var(--fs-small); color: var(--muted); font-weight: 400; text-align: left; padding: var(--row-pad) var(--gut) var(--row-pad) 0; border-bottom: var(--line) solid var(--rule); }
.yt-table td { padding: var(--row-pad) var(--gut) var(--row-pad) 0; border-bottom: var(--line) solid var(--rule); vertical-align: top; }
.yt-table th:last-child, .yt-table td:last-child { padding-right: 0; }
.yt-table .num { width: var(--number-col); white-space: nowrap; font-variant-numeric: tabular-nums; }
.yt-table tbody tr:hover { background: var(--box); }

/* ---------- Two-column block ---------- */
.yt-two { align-items: start; }
.yt-two-text, .yt-steps > li > div { max-width: var(--measure); }
.yt-two-text p:first-of-type { margin-top: var(--space-xs); }
.yt-two-media { position: sticky; top: var(--sticky-top); }

/* ---------- Case summary ---------- */
.yt-summary { row-gap: var(--space-m); }
.yt-summary > :nth-child(2) { grid-column: 1 / 7; }   /* 6 columns */
.yt-summary > :nth-child(3) { grid-column: 7 / 11; }  /* 4 columns */
.yt-summary > :nth-child(4) { grid-column: 11 / 13; } /* 2 columns */
.yt-summary-value { margin-top: var(--space-xs); }

/* ---------- Steps ---------- */
.yt-steps { list-style: none; padding: 0; counter-reset: step; }
.yt-steps > li { counter-increment: step; display: grid; grid-template-columns: 1fr 5fr; column-gap: var(--gut); }
.yt-steps > li + li { margin-top: var(--space-l); }
.yt-steps > li::before { content: counter(step, decimal-leading-zero); font-size: var(--fs-step-num); line-height: 1; letter-spacing: -0.03em; color: var(--muted); font-variant-numeric: tabular-nums; }
.yt-steps h4 + p { margin-top: var(--space-xs); }

/* ---------- Impact vs effort chart ---------- */
.yt-chart { max-width: var(--chart-max); }
.yt-chart-plot { position: relative; aspect-ratio: 16 / 9; border-left: var(--line) solid var(--rule); border-bottom: var(--line) solid var(--rule); margin-left: var(--axis-gap); }
.yt-axis { position: absolute; font-size: var(--fs-axis); line-height: 1.2; color: var(--muted); white-space: nowrap; }
.yt-axis-y { left: calc(-1 * var(--axis-gap)); bottom: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.yt-axis-x { right: 0; bottom: calc(-1 * var(--axis-gap)); }
.yt-pt { position: absolute; transform: translate(-0.3em, 50%); font-size: var(--fs-small); line-height: 1.3; color: var(--muted); white-space: nowrap; }
.yt-pt.is-chosen, .yt-options .is-chosen { color: var(--ink); font-weight: 500; }
.yt-options { list-style: none; padding: 0; margin-top: calc(var(--axis-gap) + var(--space-s)); font-size: var(--fs-small); color: var(--muted); }
.yt-options li + li { margin-top: var(--space-s); }

/* ---------- Next case ---------- */
.yt-next { padding-block: var(--section); align-items: baseline; }
.yt-next-back { grid-column: 1 / 5; }

/* ---------- Contact ---------- */
.yt-contact { padding-block: var(--section); }
.yt-contact-links { display: flex; flex-wrap: wrap; column-gap: var(--space-l); row-gap: var(--space-s); }

/* ---------- Footer ---------- */
.yt-footer-in { position: relative; max-width: var(--frame); margin-inline: auto; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--gut); padding: var(--footer-top) var(--m) var(--footer-bottom); font-size: var(--fs-small); line-height: 1.3; color: var(--muted); }
.yt-footer-in::before { content: ""; position: absolute; left: var(--m); right: var(--m); top: 0; border-top: var(--line) solid var(--rule); }
.yt-footer-links { display: flex; flex-wrap: wrap; column-gap: var(--nav-gap); }

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .yt-cards { grid-template-columns: 1fr; row-gap: var(--space-l); }
  .s-text, .s-media { grid-column: 1 / -1; }
  .yt-two { row-gap: var(--space-l); }
  .yt-two-media { position: static; }
}
@media (max-width: 767px) {
  .g { grid-template-columns: repeat(var(--columns-mobile), minmax(0, 1fr)); column-gap: var(--gut-mobile); padding-inline: var(--m-mobile); }
  .g > * { grid-column: 1 / -1; }
  .yt-header-in { padding-inline: var(--m-mobile); }
  .yt-footer-in { padding-inline: var(--m-mobile); }
  .yt-header-in::after, .yt-footer-in::before { left: var(--m-mobile); right: var(--m-mobile); }
  .yt-stats, .yt-stats.is-3 { grid-template-columns: 1fr; }
  /* line → first label stays m; stacked cells stand apart (l) */
  .yt-summary > :not(.rule) + * { margin-top: calc(var(--space-l) - var(--space-m)); }
  .yt-steps > li { grid-template-columns: 1fr; row-gap: var(--space-xs); }
  .s-next { justify-self: start; text-align: left; }
}

/* ---------- Motion ---------- */
@keyframes yt-rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes yt-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.yt-load-line { transform-origin: left; animation: yt-draw var(--dur-line) var(--ease-settle) both; }
/* hero: consecutive .yt-load-rise siblings play as one sequence, a beat apart (title, lede, stats…) */
.yt-load-rise { animation: yt-rise var(--dur-enter) var(--ease-settle) calc(var(--i, 0) * var(--stagger)) both; }
.yt-load-rise + .yt-load-rise { --i: 1; }
.yt-load-rise + .yt-load-rise + .yt-load-rise { --i: 2; }
.yt-load-rise + .yt-load-rise + .yt-load-rise + .yt-load-rise { --i: 3; }
/* scroll reveal: motion.js adds .is-in once, the first time a block comes into view, and sets --d for its place in the sequence.
   Hidden only under html.yt-motion, which motion.js adds itself, so without the script everything shows. */
html.yt-motion .yt-reveal { transition: opacity var(--dur-enter) var(--ease-settle) var(--d, 0ms), transform var(--dur-enter) var(--ease-settle) var(--d, 0ms); }
html.yt-motion .yt-reveal:not(.is-in) { opacity: 0; transform: translateY(var(--rise)); }
html.yt-motion .rule.yt-reveal { transform-origin: left; transition-duration: var(--dur-line); }
html.yt-motion .rule.yt-reveal:not(.is-in) { opacity: 1; transform: scaleX(0); }
@media print { html.yt-motion .yt-reveal { opacity: 1; transform: none; } }
/* reduced motion: no travel. Reveals and lines fade in place; the hero shows with the page fade */
@media (prefers-reduced-motion: reduce) {
  .yt-load-line, .yt-load-rise, .yt-header-in::after { animation: none !important; }
  .yt-card-media .yt-ph, .yt-arrow { transition: none !important; }
  html.yt-motion .yt-reveal:not(.is-in), html.yt-motion .rule.yt-reveal:not(.is-in) { opacity: 0; transform: none; }
}