/* Kristina Ivanovska — portfolio styles */
:root { --bg:#FAFAF7;--surf:#fff;--panel:#F0EFEA;--ink:#0E0E10;--soft:#3B3B40;--mute:#76767C;--line:#E4E3DD;--vio:#5B3DF5;--hl:#E6FF4F }
[data-theme=dark] { --bg:#0D0D10;--surf:#16161B;--panel:#1C1C22;--ink:#F4F4F0;--soft:#CFCFCA;--mute:#8C8C92;--line:#2A2A31;--vio:#9C8AFF }
* { box-sizing:border-box }
html,body { height:100%;margin:0 }
body { background:var(--bg);color:var(--soft);font:15px/1.6 Inter,system-ui,sans-serif;transition:background .2s,color .2s }
h1,h2,h3,h4 { font-family:'Bricolage Grotesque',Inter,sans-serif;color:var(--ink);margin:0;letter-spacing:-.02em }
mark { background:var(--hl);color:#0E0E10;padding:0 .14em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone }
a { color:inherit }
[hidden] { display:none!important }
nav { position:fixed;top:14px;left:0;right:0;z-index:30;padding:0 24px }
.bar { display:flex;align-items:center;gap:14px;max-width:1032px;margin:0 auto;padding:8px 10px 8px 16px;background:var(--surf);border:1px solid var(--line);border-radius:16px }
.mini { width:0;height:30px;opacity:0;border-radius:50%;object-fit:cover;filter:grayscale(1);transition:.3s;margin-right:-14px;flex-shrink:0 }
.bar.show .mini { width:30px;opacity:1;margin-right:0 }
.logo { font:800 18px 'Bricolage Grotesque',sans-serif;color:var(--ink);text-decoration:none;flex-shrink:0 }
.menu { display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none }
.menu button { font:500 12.5px Inter,sans-serif;color:var(--mute);background:none;border:0;padding:7px 12px;border-radius:11px;cursor:pointer;white-space:nowrap }
.menu button:hover { color:var(--ink) }
.menu button.on { background:var(--ink);color:var(--bg) }
#themeBtn { background:none;border:0;color:var(--ink);cursor:pointer;padding:6px 8px;border-radius:10px;display:flex }
#themeBtn:hover { background:var(--panel) }
.scroller { position:fixed;inset:0;overflow-y:auto }
#home { scroll-behavior:smooth }
.panel { min-height:100%;display:flex;padding:96px 24px 32px }
.in { width:100%;max-width:1032px;margin:auto }
.rail { position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:10px }
.rail button { width:8px;height:8px;border-radius:50%;border:1px solid var(--mute);background:none;padding:0;cursor:pointer }
.rail button.on { background:var(--vio);border-color:var(--vio);transform:scale(1.4) }
@media(max-width:700px) {
  .rail { display:none }
}
.btn { display:inline-block;padding:12px 18px;border-radius:12px;background:var(--vio);color:#fff;text-decoration:none;font:600 14px Inter,sans-serif;cursor:pointer;border:0 }
.btn.g { background:none;color:var(--ink);border:1px solid var(--line) }

/* hello */
.hello { display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center }
.hi { margin:0;font-size:16px;color:var(--ink) }
.pitch { font-size:clamp(34px,5.6vw,66px);line-height:1.03;font-weight:800;margin:20px 0 16px }
.collage { position:relative;height:430px;isolation:isolate;display:flex;align-items:center;justify-content:center;--d:280px;--mx:0;--my:0;cursor:pointer }
.blob { position:absolute;width:var(--d);height:var(--d);border-radius:50%;z-index:-1;transition:translate .7s cubic-bezier(.2,.8,.2,1),scale .5s }
.b1 { background:var(--hl);translate:calc(var(--d)*.26 + var(--mx)*38px) calc(var(--d)*-.22 + var(--my)*38px);animation:fl 7s ease-in-out infinite }
.b2 { background:var(--vio);opacity:.92;translate:calc(var(--d)*-.27 - var(--mx)*34px) calc(var(--d)*.24 - var(--my)*34px);animation:fl 9s ease-in-out infinite reverse }
.collage:hover .blob { scale:1.07 }
.portrait { position:relative;width:var(--d);height:var(--d);translate:calc(var(--mx)*10px) calc(var(--my)*10px);transition:translate .5s cubic-bezier(.2,.8,.2,1) }
.portrait img { width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;border:5px solid var(--bg);filter:grayscale(1) contrast(1.08);transition:filter .5s,scale .6s }
.collage:hover .portrait img { filter:none;scale:1.035 }
.ring { position:absolute;inset:-14px;border-radius:50%;border:2px dashed var(--ink);opacity:0;transition:opacity .4s;animation:spin 16s linear infinite;pointer-events:none }
.collage:hover .ring { opacity:.5 }
@keyframes fl { 0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)} }
@keyframes spin { to{transform:rotate(360deg)} }
@media(prefers-reduced-motion:reduce) {
  .blob,.ring { animation:none }
}
@media(max-width:860px) {
  .hello { grid-template-columns:1fr }
  .collage { height:320px;--d:220px }
}

/* work */
.h2 { font-size:clamp(28px,4vw,46px);font-weight:800;line-height:1.05 }
.sub0 { color:var(--mute);margin:8px 0 22px}
.sub1 { color:var(--mute);margin:8px 0 22px; max-width: 500px }
.cards { display:grid;grid-template-columns:repeat(6,1fr);gap:14px }
.card { grid-column:span 2;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surf);border-radius:20px;overflow:hidden;text-decoration:none;transition:.25s }
.card:hover { transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(0,0,0,.4) }
.cs { background:var(--ac);padding:18px 18px 0;display:flex;align-items:flex-end;aspect-ratio:16/10;overflow:hidden }
.cs img { width:100%;aspect-ratio:2/1;object-fit:cover;object-position:top;border-radius:10px 10px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.28);transform:translateY(8%) rotate(-1.5deg);transition:.3s }
.card:hover .cs img { transform:translateY(2%) rotate(0) }
.ct { padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1 }
.tag { font-size:12px;color:var(--mute) }
.card h3 { font-size:19px;line-height:1.22 }
.res { font-size:13.5px;margin:0;color:var(--soft) }
.more { font-size:13px;font-weight:600;color:var(--vio);margin-top:auto }
@media(max-width:860px) {
  .card { grid-column:span 6 }
}

/* lists */
.row { display:grid;grid-template-columns:160px 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--line) }
.row:first-of-type { border-top:0 }
.row .d { font-size:12.5px;color:var(--mute) }
.row h3 { font-size:16.5px }
.row .co { font-size:13px;color:var(--vio);margin:1px 0 4px;font-weight:600 }
.row p { margin:0;font-size:13.5px }
@media(max-width:600px) {
  .row { grid-template-columns:1fr;gap:2px }
}
.vals { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px }
.vals div { background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:18px }
.vals h3 { font-size:17px;margin-bottom:6px }
.vals p { margin:0;font-size:14px }
@media(max-width:700px) {
  .vals { grid-template-columns:1fr }
}
.cap { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:22px 0 }
.cap div { background:var(--surf);padding:18px 20px }
.cap small { color:var(--vio);font-weight:700;font-size:11.5px }
.cap h3 { font-size:16px;margin:5px 0 }
.cap p { margin:0 0 8px;font-size:13.5px }
.cap .pf { color:var(--mute);font-size:12.5px;border-top:1px solid var(--line);padding-top:8px;margin:0 }
@media(max-width:700px) {
  .cap { grid-template-columns:1fr }
}
.ct2 { display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:6px }
.ct2 a { color:var(--ink);text-decoration:none;border-bottom:2px solid var(--vio);font-weight:500 }

/* case page */
.cp { max-width:1032px;margin:0 auto;padding:96px 24px 80px }
.back { font-size:13px;color:var(--mute);text-decoration:none }
.back:hover { color:var(--ink) }
.chero { background:var(--ac);border-radius:24px;padding:40px clamp(20px,4vw,56px);margin:14px 0 }
.meta { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px }
.meta span { background:rgba(255,255,255,.18);color:#fff;padding:5px 12px;border-radius:99px;font-size:12.5px }
.chero h1 { color:#fff;font-size:clamp(34px,6.2vw,74px);font-weight:800;line-height:1.02;max-width:900px }
.chero p { color:rgba(255,255,255,.9);font-size:18px;max-width:640px;margin:18px 0 0 }
.glance,.stats { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px }
.glance div { background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:22px }
.glance h4 { font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:8px }
.glance h4:before { content:"";width:9px;height:9px;border-radius:50%;background:var(--ac) }
.glance p { margin:0;font-size:14.5px;color:var(--ink) }
.stats div { background:var(--panel);border-radius:18px;padding:20px 22px }
.stats b { display:block;font:800 clamp(30px,4.2vw,50px) 'Bricolage Grotesque',sans-serif;color:var(--ac);line-height:1;margin-bottom:6px }
.stats span { font-size:13px }
[data-theme=dark] .stats b { filter:brightness(1.35) }
.visual { background:var(--ac);border-radius:24px;padding:clamp(14px,3vw,38px) clamp(14px,3vw,38px) 0;margin:0 0 14px;overflow:hidden }
.visual img { display:block;width:100%;border-radius:12px 12px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25) }
.flow { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px }
.flow span { flex:1;min-width:150px;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:14px;font-weight:600;color:var(--ink) }
.flow i { font-style:normal;color:var(--ac);display:block;font-size:12px }
.gal { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px }
.gal figure { margin:0 }
.gal img { width:100%;display:block;border-radius:12px;border:1px solid var(--line) }
.gal figcaption { font-size:12.5px;color:var(--mute);margin-top:6px }
.deep h2 { font-size:28px;margin:38px 0 8px }
.it { display:grid;grid-template-columns:250px 1fr;gap:20px;padding:16px 0;border-top:1px solid var(--line) }
.it h3 { font-size:16px }
.it p { margin:0 }
.pn { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:48px }
.pb { display:block;text-decoration:none;border:1px solid var(--line);background:var(--surf);border-radius:18px;padding:20px 22px;transition:.2s }
.pb:hover { border-color:var(--ink) }
.pb small { display:block;color:var(--mute);font-size:12.5px;margin-bottom:6px }
.pb b { font:700 18px 'Bricolage Grotesque',sans-serif;color:var(--ink);line-height:1.2 }
.pb.nx { text-align:right;background:var(--ink) }
.pb.nx b { color:var(--bg) }
@media(max-width:820px) {
  .glance,.stats,.gal,.pn { grid-template-columns:1fr }
  .it { grid-template-columns:1fr;gap:4px }
}
.h2.sm { font-size:clamp(20px,2.4vw,26px);line-height:1.15 }
.blk { margin-top:52px }

/* hero buttons */
.cta { margin-top:44px }

/* accessibility */
a:focus-visible,button:focus-visible { outline:2px solid var(--vio);outline-offset:2px }
@media(prefers-reduced-motion:reduce) {
  #home { scroll-behavior:auto }
}