/* Marina Redkina portfolio — built on the Repka Studio design system tokens (css/ds). */

:root {
  --accent: #7f4bf5;
  --accent-on-dark: #a78bfa;
  --lilac: #7c87d9;
  --lilac-soft: #b7bdea;
  --lilac-on-accent: #dfe2f8;
  --muted: #717070;
  --page-tint: #faf7f9;
  --gutter: 60px;
}

body { background: var(--bg-page); }

.page { min-height: 100vh; background-color: var(--page-tint); display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); margin: 0 auto; }

/* ---------- Type helpers ---------- */
.t-menu { font-family: var(--font-family); font-size: var(--fs-menu); font-weight: var(--fw-menu); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink); }
.t-h1 { font-family: var(--font-family); font-size: var(--fs-headline-1); line-height: var(--lh-headline-1); font-weight: var(--fw-headline-1); }
.t-h2 { font-family: var(--font-family); font-size: var(--fs-headline-2); line-height: var(--lh-headline-2); font-weight: var(--fw-headline-2); }
.t-title { font-family: var(--font-family); font-size: var(--fs-title); font-weight: var(--fw-title); }
.t-text { font-family: var(--font-family); font-size: var(--fs-text); font-weight: var(--fw-text); letter-spacing: var(--tracking-wide); color: var(--ink); }
.t-tag { font-family: var(--font-family); font-size: var(--fs-tag); font-weight: var(--fw-tag); }
.muted { color: var(--muted); }

/* ---------- Header ---------- */
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gutter); flex-wrap: wrap; gap: 12px; }
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.nav-item { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; background: none; border: 0; padding: 0; transition: color .2s ease; }
.nav-item:hover { color: var(--accent); }
a.nav-item:hover { color: var(--accent); }

/* ---------- Animated headline words ---------- */
.hero-word { display: inline-block; transition: color .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.hero-word:hover { color: var(--accent); transform: translateY(-12px); }
.hw-contact:hover { color: var(--paper); }

@keyframes morph {
  0%, 100% { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; }
  33% { border-radius: 40% 60% 42% 58% / 60% 38% 62% 40%; }
  66% { border-radius: 52% 48% 64% 36% / 40% 55% 45% 60%; }
}

/* ---------- CTA blob ---------- */
.cta-blob {
  display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer;
  background: var(--accent); color: var(--paper); border: 0;
  font-family: var(--font-family); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  animation: morph 7s ease-in-out infinite;
  transition: background .3s ease, color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.cta-blob:hover { background: var(--ink); color: var(--paper); transform: scale(1.06); }
.cta-blob--small { width: 160px; height: 148px; font-size: var(--fs-menu); line-height: 1.4; }
.cta-blob--large { width: 300px; height: 150px; font-size: var(--fs-title); }
.cta-blob--on-dark:hover { background: var(--paper); color: var(--ink); }

.cta-band { background: var(--bg-inverse); }
.cta-band .wrap { padding-top: 71px; padding-bottom: 71px; display: flex; justify-content: center; }

/* ---------- Home hero ---------- */
.hero { padding-top: 70px; padding-bottom: 70px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: start; }
.hero-copy { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.hero-hello { color: var(--lilac); }
.hero-lead { color: var(--ink); margin-bottom: 20px; }
.hero-meta { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.hero-meta .hero-word { align-self: flex-start; cursor: default; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 7px 12px; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--font-family); font-size: var(--fs-tag); color: var(--ink); }

/* ---------- Work grid (masonry) ---------- */
.work { padding-top: 42px; padding-bottom: 120px; }
.section-label { display: block; color: var(--ink); margin-bottom: 38px; }
.masonry { display: flex; gap: 10px; align-items: flex-start; }
.masonry-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.work-card { display: block; width: 100%; cursor: pointer; color: inherit; }
.work-card:hover { color: inherit; }
.work-cover { position: relative; width: 100%; overflow: hidden; background: var(--surface-placeholder); }
.work-cover img { width: 100%; height: auto; }
.work-cover::after { content: ""; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: multiply; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.work-card:hover .work-cover::after,
.work-card:focus-visible .work-cover::after { opacity: 1; }
.work-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; color: var(--paper); opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.work-card:hover .work-info,
.work-card:focus-visible .work-info { opacity: 1; transform: none; }
.work-info .eyebrow { font-family: var(--font-family); font-size: var(--fs-client); font-weight: var(--fw-client); }

/* ---------- Contacts ---------- */
.contacts-dark { background: var(--bg-inverse); }
.contacts-dark .wrap { padding-top: 42px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 45px; }
.contacts-dark .closing { color: var(--paper); max-width: 1465px; margin-top: 90px; }
.on-dark { color: var(--paper); }

.contact-list { display: flex; flex-wrap: wrap; gap: 24px 40px; }
.contact-pair { display: flex; flex-direction: column; gap: 6px; }
.contact-kicker { font-family: var(--font-family); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); transition: color .2s ease; }
.contact-chip { display: inline-flex; align-self: flex-start; padding: 7px 14px; border: 1px solid var(--paper); border-radius: 999px; font-family: var(--font-family); font-size: var(--fs-tag); letter-spacing: var(--tracking-wide); color: var(--paper); transition: background .2s ease, color .2s ease, border-color .2s ease; }
a.contact-chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.contact-pair:hover .contact-kicker { text-decoration: underline; text-underline-offset: 3px; }
.contacts-dark a.contact-chip:hover { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--ink); }
.contacts-dark .contact-pair:hover .contact-kicker { color: var(--accent-on-dark); text-decoration: none; }
.contacts-dark .hero-word:hover { color: var(--accent-on-dark); }
.contact-chip--static { border-color: rgba(255,255,250,.6); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

.contact-page { background: var(--accent); min-height: calc(100vh - 88px); }
.contact-page .wrap { padding-top: 70px; padding-bottom: 70px; display: flex; flex-direction: column; gap: 99px; }
.contact-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 48px; }
.local-time { color: var(--paper); text-align: right; text-wrap: balance; }
.local-time .clock { font-variant-numeric: tabular-nums; color: var(--lilac-on-accent); }

/* ---------- About ---------- */
.about { padding-top: 42px; padding-bottom: 60px; }
.about-lead { display: block; line-height: calc(var(--lh-headline-1) * 1.15); color: var(--lilac); margin-bottom: 110px; }
.about-lead .ink { color: var(--ink); }
.about-rows { border-bottom: 1px solid var(--ink); }
.about-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 16px 40px; padding: 28px 0; border-top: 1px solid var(--ink); }
.about-row-head { display: flex; gap: 12px; align-items: baseline; }
.about-num { font-family: var(--font-family); font-size: var(--fs-text); font-weight: 700; color: var(--accent); }
.about-row-body { display: flex; flex-direction: column; gap: 12px; }
.about + .cta-band { margin-top: 60px; }

/* Inline portrait blob inside the about headline */
.ib { position: relative; display: inline-block; vertical-align: middle; width: 1.8em; height: .95em; margin: 0 .12em; }
.ib-in { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); background: url(../assets/marina-portrait.webp) 51% 20% / cover, var(--lilac-soft); animation: morph 7s ease-in-out infinite; transition: width .55s cubic-bezier(.34,1.3,.64,1), height .55s cubic-bezier(.34,1.3,.64,1); z-index: 1; cursor: pointer; }
.ib:hover .ib-in { width: 340px; height: 400px; z-index: 5; }

/* ---------- Case page ---------- */
.case { padding-top: 42px; padding-bottom: 90px; }
.case-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 38px; }
.case-pager { display: flex; align-items: baseline; gap: 14px; }
.case-pager .nav-item { padding: 4px 6px; font: inherit; color: inherit; }
.case-pager .count { font-variant-numeric: tabular-nums; }
.case-pager .current { color: var(--accent); }

.case-eyebrow { display: block; font-family: var(--font-family); font-size: var(--fs-tag); color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: 8px; }
.case-title { display: block; color: var(--accent); margin: 0 0 11px; }
.case-meta { display: block; font-family: var(--font-family); font-size: var(--fs-tag); color: var(--muted); margin-bottom: 38px; }

.case-grid { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,6fr); gap: 19px; align-items: start; }
.case-grid--split { grid-template-columns: repeat(3, minmax(0,1fr)); }
.gallery { display: flex; flex-direction: column; gap: 18px; }
.gallery img { width: 100%; height: auto; }

.subproject { margin-top: 71px; padding-top: 38px; border-top: 1px solid var(--border-divider); }
.subproject-title { display: block; color: var(--accent); margin: 0 0 20px; }
.subproject-about { display: block; margin-bottom: 20px; }

/* Accordion */
.acc-group { border-bottom: 1px solid var(--border-divider); }
.acc { border-top: 1px solid var(--border-divider); }
.acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; background: none; border: 0; text-align: left; }
.acc-label { font-family: var(--font-family); font-size: var(--fs-tag); font-weight: var(--fw-tag); color: var(--muted); transition: color .2s ease; }
.acc-icon { display: inline-block; font-family: var(--font-family); font-size: 20px; line-height: 1; color: var(--ink); transition: transform .3s ease, color .2s ease; }
.acc-head:hover .acc-icon, .acc-head:hover .acc-label { color: var(--accent); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.acc-body > div { overflow: hidden; }
.acc-inner { padding-bottom: 20px; }
.acc[data-open="true"] .acc-body { grid-template-rows: 1fr; }
.acc[data-open="true"] .acc-icon { transform: rotate(45deg); }
.acc-text { display: block; }
.step { display: flex; gap: 10px; margin-bottom: 16px; }
.step-n { flex-shrink: 0; width: 26px; font-family: var(--font-family); font-size: var(--fs-text); font-weight: var(--fw-text-bold); color: var(--accent); }
.step-body { font-family: var(--font-family); font-size: var(--fs-text); color: var(--ink); }

.case + .cta-band { margin-top: 71px; }

/* ---------- Legal ---------- */
.legal { padding-top: 42px; padding-bottom: 120px; }
.legal .section-label { margin-bottom: 71px; }
.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 71px 80px; max-width: 1300px; }
.legal-col { display: flex; flex-direction: column; gap: 29px; }
.legal-col p { margin: 0; line-height: 1.6; text-wrap: pretty; }
.legal-block { display: flex; flex-direction: column; gap: 10px; }
.legal-facts { display: flex; flex-direction: column; gap: 6px; }
.contact-link { color: var(--ink); transition: color .2s ease; }
.contact-link:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { margin-top: auto; background: var(--bg-inverse); padding: 12px var(--gutter); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 40px; font-family: var(--font-family); font-size: var(--fs-tag); letter-spacing: var(--tracking-wide); color: var(--paper); }
.site-footer--accent { background: var(--accent); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.footer-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); transition: color .2s ease; }
.footer-link:hover { color: var(--accent-on-dark); }
.site-footer--accent .footer-link:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Focus ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-footer :focus-visible, .contacts-dark :focus-visible, .cta-band :focus-visible { outline-color: var(--accent-on-dark); }
.contact-page :focus-visible, .site-footer--accent :focus-visible { outline-color: var(--paper); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --fs-headline-1: 64px; --lh-headline-1: 68px; }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .hero { grid-template-columns: minmax(0,1fr); }
  .case-grid, .case-grid--split { grid-template-columns: minmax(0,1fr); }
  .case-grid--split { gap: 0; }
  .case-grid--split > .acc-group + .acc-group { border-top: 0; }
}
@media (max-width: 700px) {
  :root { --fs-headline-1: 40px; --lh-headline-1: 46px; --fs-headline-2: 24px; --lh-headline-2: 30px; }
  .about-row { grid-template-columns: minmax(0,1fr); }
  .masonry { flex-direction: column; }
  .masonry-col { width: 100%; }
  .work-info { opacity: 1; transform: none; background: linear-gradient(to top, rgba(45,45,45,.75), rgba(45,45,45,0)); }
  .about-lead { margin-bottom: 60px; }
  .contact-page .wrap { gap: 60px; }
  .local-time { text-align: left; }
  .contacts-dark .closing { margin-top: 40px; }
  .ib:hover .ib-in { width: 200px; height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-blob, .ib-in { animation: none; }
  .hero-word:hover { transform: none; }
}