/* ============================================================
   Kira Andriiaki-Kostina portfolio
   Mobile-first. Warm editorial. One accent.
   ============================================================ */

:root{
  --ink:        #17140f;
  --ink-soft:   #4a443b;
  --paper:      #faf7f2;
  --paper-2:    #f1ebe1;
  --card:       #ffffff;
  --line:       #e3dbcd;
  --accent:     #c8553d;
  --accent-ink: #a9402c;
  --radius:     18px;
  --radius-sm:  12px;
  --maxw:       1120px;
  --shadow:     0 1px 2px rgba(23,20,15,.04), 0 10px 30px rgba(23,20,15,.06);
  --shadow-lg:  0 20px 60px rgba(23,20,15,.10);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:0 0 10px 0; z-index:100;
}
.skip-link:focus{ left:0; }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.site-header.is-stuck{ border-bottom-color:var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--maxw); margin-inline:auto; padding:14px 22px; }
.nav__brand{ font-family:var(--serif); font-weight:600; font-size:1.06rem;
  text-decoration:none; letter-spacing:-.01em; white-space:nowrap; }
.nav__brand span{ color:var(--ink-soft); }
.nav__links{ list-style:none; display:flex; align-items:center; gap:8px; margin:0; padding:0; }
.nav__links a{ text-decoration:none; color:var(--ink-soft); font-size:.92rem; font-weight:500;
  padding:8px 10px; border-radius:9px; transition:color .2s, background .2s; }
.nav__links a:hover{ color:var(--ink); background:var(--paper-2); }
.nav__links li:not(:last-child){ display:none; }      /* mobile: show only Contact */
.nav__cta{ color:var(--paper) !important; background:var(--accent);
  padding:8px 16px !important; }
.nav__cta:hover{ background:var(--accent-ink) !important; }

@media (min-width:720px){
  .nav__links li{ display:list-item !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:500; font-size:.96rem; text-decoration:none;
  padding:13px 22px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
  box-shadow:var(--shadow);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.btn--ghost{ background:transparent; box-shadow:none; }
.btn--ghost:hover{ background:var(--paper-2); box-shadow:none; }

/* ---------- Shared ---------- */
.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 .6em;
}
h1,h2,h3{ font-family:var(--serif); font-weight:500; letter-spacing:-.018em; line-height:1.12; margin:0; }
em{ font-style:italic; }

.section-head{ max-width:40ch; margin-bottom:38px; }
.section-head h2{ font-size:clamp(1.7rem, 5.2vw, 2.5rem); margin-bottom:.5em; }
.section-head__note{ color:var(--ink-soft); font-size:1rem; margin:0; max-width:52ch; }

/* ---------- Hero ---------- */
.hero{ padding:clamp(48px, 11vw, 104px) 0 clamp(40px,8vw,72px); }
.hero__title{
  font-size:clamp(2.1rem, 8.5vw, 4.1rem);
  margin:.1em 0 .5em; max-width:16ch;
}
.hero__title em{ color:var(--accent); }
.hero__lede{
  font-size:clamp(1.05rem, 2.6vw, 1.25rem);
  color:var(--ink-soft); max-width:52ch; margin:0 0 2em;
}
.hero__lede em{ color:var(--ink); font-style:normal; font-weight:500; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:2.4em; }
.hero__avail{ display:flex; align-items:center; gap:12px; margin:0;
  font-size:.92rem; color:var(--ink-soft); }
.hero__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover;
  border:2px solid var(--card); box-shadow:var(--shadow); flex:none; }

/* ---------- Approach (pillars) ---------- */
.approach{ padding:clamp(28px,6vw,56px) 0 clamp(36px,6vw,60px); }
.approach__grid{ display:grid; gap:18px; }
.pillar{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow);
}
.pillar__no{ font-family:var(--serif); color:var(--accent); font-size:1.1rem; font-weight:600; }
.pillar h3{ font-size:1.25rem; margin:.3em 0 .45em; }
.pillar p{ margin:0; color:var(--ink-soft); font-size:.98rem; }
@media (min-width:700px){ .approach__grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Flagship work ---------- */
.work{ padding:clamp(48px,9vw,88px) 0; }
.case{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,5vw,44px); margin-bottom:22px; box-shadow:var(--shadow);
}
.case__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.tag{ font-size:.76rem; font-weight:600; letter-spacing:.04em;
  background:var(--paper-2); color:var(--ink-soft); padding:6px 12px; border-radius:999px; }
.tag--muted{ background:transparent; border:1px solid var(--line); }
.case__title{ font-size:clamp(1.4rem,4.4vw,2rem); max-width:22ch; margin-bottom:.7em; }
.case__body{ display:grid; gap:26px; }
.case__text p{ margin:0 0 1em; color:var(--ink-soft); }
.case__text p:last-child{ margin-bottom:0; }
.case__text em{ color:var(--ink); font-style:normal; font-weight:600; }
.case__points{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.case__points li{ color:var(--ink-soft); padding-left:22px; position:relative; }
.case__points li::before{ content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--accent); }
.case__points strong{ color:var(--ink); font-weight:600; }
.case__points em{ color:var(--ink); font-style:normal; font-weight:600; }
.case__stat{
  border-top:1px solid var(--line); padding-top:22px;
  display:flex; flex-direction:column; gap:6px;
}
.stat__num{ font-family:var(--serif); font-weight:600; color:var(--accent);
  font-size:clamp(2.6rem,11vw,3.6rem); line-height:1; }
.stat__label{ color:var(--ink-soft); font-size:.95rem; max-width:34ch; }
.case__stat em{ color:var(--ink); font-style:normal; font-weight:600; }
@media (min-width:820px){
  .case__body{ grid-template-columns:1.4fr 1fr; align-items:center; gap:40px; }
  .case__stat{ border-top:0; border-left:1px solid var(--line); padding:4px 0 4px 40px; }
}

/* Research engine */
.engine{
  background:var(--ink); color:var(--paper); border-radius:var(--radius);
  padding:clamp(28px,5vw,46px); box-shadow:var(--shadow-lg);
}
.engine__title{ font-size:clamp(1.4rem,4.4vw,1.9rem); margin-bottom:.9em; color:#fff; }
.engine__list{ list-style:none; margin:0; padding:0; }
.engine__list li{ padding-left:28px; position:relative; color:#e8e0d3; font-size:1rem;
  margin-bottom:16px; break-inside:avoid; -webkit-column-break-inside:avoid; }
.engine__list li:last-child{ margin-bottom:0; }
.engine__list li::before{ content:"→"; position:absolute; left:0; color:var(--accent);
  font-weight:600; }
.engine__list strong{ color:#fff; font-weight:600; }
@media (min-width:820px){ .engine__list{ column-count:2; column-gap:44px; } }

/* ---------- Earlier work (nested in Work) ---------- */
.work__sub{ margin:clamp(34px,6vw,56px) 0 22px; padding-top:clamp(30px,5vw,44px);
  border-top:1px solid var(--line); }
.work__sub-title{ font-size:clamp(1.4rem,4.4vw,1.9rem); margin-bottom:.35em; }
.work__sub-note{ margin:0; color:var(--ink-soft); max-width:54ch; }

/* gallery (masonry) */
.gallery{ column-count:1; column-gap:18px; }
@media (min-width:560px){ .gallery{ column-count:2; } }
@media (min-width:960px){ .gallery{ column-count:3; } }
.gallery__item{
  break-inside:avoid; margin:0 0 18px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .25s ease;
}
.gallery__item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.gallery__item a{ display:block; text-decoration:none; }
.gallery__item img{ width:100%; height:auto; }
.gallery__item figcaption{ padding:13px 16px 15px; font-size:.86rem; color:var(--ink-soft); }

/* ---------- About ---------- */
.about{ padding:clamp(48px,9vw,88px) 0; }
.about__grid{ display:grid; gap:34px; }
.about__intro{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.about__photo{ width:140px; height:140px; border-radius:28px; object-fit:cover; flex:none;
  border:3px solid var(--card); box-shadow:var(--shadow-lg); }
.about__intro-text h2{ font-size:clamp(1.7rem,5.2vw,2.4rem); margin-bottom:.4em; }
.about__intro-text p{ color:var(--ink-soft); margin:0 0 .9em; max-width:50ch; }
.about__intro-text p:last-child{ margin-bottom:0; }
.about__intro-text em{ color:var(--ink); font-style:normal; font-weight:600; }
@media (min-width:560px){ .about__photo{ width:200px; height:200px; } }
.about__facts dl{ margin:0; display:grid; gap:18px; }
.about__facts dt{ font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:3px; }
.about__facts dd{ margin:0; color:var(--ink); }
@media (min-width:840px){
  .about__grid{ grid-template-columns:1.3fr 1fr; gap:60px; align-items:start; }
  .about__facts{ background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
}

/* ---------- Contact ---------- */
.contact{ padding:clamp(56px,10vw,110px) 0; }
.contact__inner{ max-width:40ch; }
.contact h2{ font-size:clamp(1.8rem,6vw,2.8rem); margin-bottom:.4em; }
.contact__note{ color:var(--ink-soft); margin:0 0 1.8em; }
.contact__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:26px 0; }
.site-footer__inner{ display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; font-size:.86rem; color:var(--ink-soft); }
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ color:var(--ink); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- Focus ---------- */
a:focus-visible, .btn:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }