/* ============================================================
   PORTFOLIO — Vladyslava Vysotskaya
   Chrome-gothic Behance ribbon. Dark → light gradient scroll.
   ============================================================ */

:root{
  --font-display: 'Cormorant', 'Playfair Display', Georgia, serif;
  --font-roman:   'Forum', 'Cormorant', serif;          /* bilingual caps */
  --font-body:    'Manrope', system-ui, sans-serif;     /* bilingual body */

  --maxw: 1500px;
  --gutter: clamp(22px, 5vw, 96px);

  /* per-section overridable */
  --ink:   #f2f0f2;
  --muted: rgba(242,240,242,.52);
  --hair:  rgba(242,240,242,.22);

  --chrome-intensity: 1;       /* tweakable */
  --motion: 1;                 /* tweakable 0..1 multiplier */
  --accent: 178;               /* hue for sparkle tint (oklch) */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:#020200;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---- the dark spine: uniform near-black #020200, like slide 1, grain on top ---- */
.spine{
  position:relative;
  background:#020200;
}

/* ---- soft light field: organic rounded glows scattered down the page,
        less intense than the cover dome — grain layer adds the noise on top ---- */
.bg-field{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.glow{
  position:absolute;
  background:radial-gradient(circle at 50% 42%,
      rgba(255,255,255,.085), rgba(255,255,255,.028) 42%, transparent 70%);
  filter:blur(34px);
  will-change:transform;
  animation:glowDrift calc(22s / var(--motion,1)) ease-in-out infinite;
}
/* accent-tinted glows pick up the sparkle hue, kept low-chroma */
.glow.accent{
  background:radial-gradient(circle at 50% 42%,
      color-mix(in oklch, var(--spark,#fff) 55%, transparent),
      color-mix(in oklch, var(--spark,#fff) 16%, transparent) 44%, transparent 72%);
  opacity:.5;
}
@keyframes glowDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(calc(18px * var(--motion,1)), calc(-22px * var(--motion,1))) scale(1.06); }
}
body.no-shimmer .glow{ animation:none; }
@media (prefers-reduced-motion: reduce){ .glow{ animation:none; } }

/* fine film grain over everything — matches the cover's texture */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:var(--grain-strength,.85); mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
/* second, finer pass for sparkle in the grain */
.grain::after{
  content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.chrome{
  background:linear-gradient(174deg,
     #ffffff 0%, #dadce0 16%, #8c8f97 31%, #f6f7f9 44%,
     #b7b9c0 54%, #6c6e76 67%, #ededf1 82%, #a9abb2 100%);
  background-size:100% 220%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.35))
    drop-shadow(0 3px 10px rgba(0,0,0,.55));
  animation:chromeFlow calc(11s / var(--motion, 1)) ease-in-out infinite;
}
/* graphite chrome for light backgrounds */
.chrome--ink{
  background:linear-gradient(174deg,
     #6f6a73 0%, #2a2630 16%, #59545f 33%, #8d8893 46%,
     #3c3742 56%, #1c1922 68%, #767079 82%, #36323c 100%);
  background-size:100% 220%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.6))
    drop-shadow(0 4px 14px rgba(40,30,45,.28));
  animation:chromeFlow calc(13s / var(--motion, 1)) ease-in-out infinite;
}
@keyframes chromeFlow{
  0%,100%{ background-position:50% 0%; }
  50%{ background-position:50% 100%; }
}

.eyebrow{
  font-family:var(--font-roman);
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:clamp(11px,1vw,15px);
  color:var(--muted);
  display:flex; align-items:center; gap:.9em;
}
.eyebrow .ix{ color:var(--ink); opacity:.8; font-variant-numeric:tabular-nums; }
.eyebrow .ln{ height:1px; flex:1; max-width:120px; background:var(--hair); }

.display{
  font-family:var(--font-display);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.01em;
  margin:0;
}
.display.italic{ font-style:italic; font-weight:500; }

.lede{
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.5;
  color:var(--ink);
  max-width:46ch;
}
.lede .ru{ color:var(--muted); }
.serif-it{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
}

/* ============================================================
   PILL TAGS (the floating plaques)
   ============================================================ */
.pills{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(10px,1.4vw,20px); }
.pill{
  font-family:var(--font-roman);
  text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(10px,.92vw,13px);
  padding:.85em 1.5em;
  border:1px solid var(--hair);
  border-radius:999px;
  color:var(--ink);
  white-space:nowrap;
  position:relative;
  backdrop-filter:blur(2px);
  animation:pillFloat calc(7s / var(--motion,1)) ease-in-out infinite;
}
.pill:nth-child(3n){ animation-delay:-1.5s; }
.pill:nth-child(3n+1){ animation-delay:-3s; }
@keyframes pillFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(calc(-6px * var(--motion,1))); }
}
.pill-sep{ color:var(--ink); opacity:.6; }

/* ============================================================
   SPARKLE (4-point star) — generated by JS, twinkles
   ============================================================ */
.spark{
  position:absolute; pointer-events:none;
  fill:currentColor; color:var(--spark,#fff);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.4));
  animation:twinkle var(--tw,3.5s) ease-in-out infinite;
  opacity:.0;
}
@keyframes twinkle{
  0%,100%{ opacity:.12; transform:scale(.62) rotate(0deg); }
  50%{ opacity:.9; transform:scale(1) rotate(45deg); }
}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.board{
  position:relative;
  width:100%;
  padding-block:clamp(90px,12vh,170px);
  overflow:clip;
}
.board > .inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw);
  margin:0 auto; padding-inline:var(--gutter);
}
.board[data-theme="light"]{
  --ink:#1b181d; --muted:rgba(27,24,29,.55); --hair:rgba(27,24,29,.2);
}

/* full-bleed cover image boards */
.cover{ padding:0; line-height:0; background:#020200; }
.cover img{ width:100%; height:auto; display:block; }

/* halo glow behind a heading */
.halo{
  position:absolute; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 65%);
  filter:blur(10px); pointer-events:none;
}

/* ============================================================
   MARQUEE BAND (drifting chrome words between sections)
   ============================================================ */
.marquee{
  position:relative; z-index:2;
  overflow:hidden; padding-block:clamp(20px,3vh,40px);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee .track{
  display:inline-flex; gap:1.2em; white-space:nowrap;
  will-change:transform;
  animation:slide calc(38s / var(--motion,1)) linear infinite;
}
.marquee:hover .track{ animation-play-state:paused; }
.marquee .item{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(26px,4vw,58px); font-weight:500;
}
.marquee .dot{ font-size:.5em; vertical-align:middle; opacity:.6; }
@keyframes slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============================================================
   IMAGE SLOTS / WORK CARDS
   ============================================================ */
image-slot{
  display:block; width:100%; height:auto;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 12px, rgba(255,255,255,.02) 12px 24px);
  border:1px solid var(--hair);
  color:var(--muted);
  position:relative;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s;
}
.board[data-theme="light"] image-slot{
  background:repeating-linear-gradient(135deg, rgba(20,16,24,.05) 0 12px, rgba(20,16,24,.02) 12px 24px);
}
.work:hover image-slot{ transform:translateY(-8px); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.work .cap{
  margin-top:.9em; display:flex; justify-content:space-between; align-items:baseline; gap:1em;
}
.work .cap .t{ font-family:var(--font-roman); text-transform:uppercase; letter-spacing:.18em; font-size:clamp(11px,1vw,14px); }
.work .cap .n{ font-family:var(--font-display); font-style:italic; color:var(--muted); font-size:clamp(13px,1.1vw,17px); }

/* image works (real shots) */
.shot{ width:100%; display:block; overflow:hidden; border:1px solid var(--hair);
  background:#0a0a0e; transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.work:hover .shot{ transform:translateY(-8px); box-shadow:0 36px 70px -34px rgba(0,0,0,.75); }
.bleed{ margin-block:clamp(22px,3.4vw,52px); }
.bleed .shot{ border-left:none; border-right:none; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,30px); }
.proj-name{ font-size:clamp(24px,3.3vw,48px); line-height:1; margin:.55em 0 .35em; }
.sign-shot{ max-width:62%; margin-top:clamp(20px,2.6vw,40px); }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr; } .sign-shot{ max-width:100%; } }

/* magazine spreads — shown whole, no crop */
.spread{ display:block; width:100%; border:1px solid var(--hair); background:#0a0a0e;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s; }
.spread img{ width:100%; height:auto; display:block; }
.work:hover .spread{ transform:translateY(-8px); box-shadow:0 36px 70px -34px rgba(0,0,0,.8); }

/* ===== MY LADY — editorial / open-magazine spreads ===== */
.mag-brand{ height:clamp(28px,4vw,52px); width:auto; display:block;
  margin-top:clamp(14px,2vw,22px); filter:drop-shadow(0 2px 12px rgba(0,0,0,.5)); }
.mag-cover-row{ display:grid; grid-template-columns:minmax(0,330px) 1fr;
  gap:clamp(28px,5vw,72px); align-items:center; }
@media (max-width:760px){ .mag-cover-row{ grid-template-columns:1fr; } }
.mag-cover{ margin:0; position:relative; border-radius:5px; overflow:hidden; max-width:330px;
  box-shadow:0 42px 84px -34px rgba(0,0,0,.9), 0 8px 22px -12px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.06); }
.mag-cover img{ width:100%; height:auto; display:block; }
.mag-cover::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:16px; z-index:2;
  pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.4), transparent); }
.mag-cover::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, rgba(255,255,255,.16), transparent 32%); }

.mag-wrap{ display:flex; flex-direction:column; gap:clamp(40px,5.5vw,84px);
  margin-top:clamp(24px,3vw,44px); }
.mag-spread{ margin:0; }
.mag-photo img{ width:100%; height:auto; display:block; border-radius:10px; }

/* ===== photographic open-magazine scene ===== */
.mag-scene{ position:relative; border-radius:16px; overflow:hidden;
  display:grid; place-items:center;
  padding:clamp(46px,7vw,120px) clamp(24px,5vw,90px);
  background:
    radial-gradient(120% 78% at 66% 20%, rgba(255,255,255,.12), transparent 48%),
    radial-gradient(150% 130% at 50% 122%, #15110f, #0a0907 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 70px 130px rgba(0,0,0,.5); }
.mag-spread:nth-child(even) .mag-scene{
  background:
    radial-gradient(120% 78% at 34% 20%, rgba(255,255,255,.11), transparent 48%),
    radial-gradient(150% 130% at 50% 122%, #121317, #08090b 72%); }
/* surface grain */
.mag-scene::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:150px 150px; }

.mag-3d{ perspective:2600px; perspective-origin:56% 16%; width:min(780px,94%);
  filter:drop-shadow(0 40px 36px rgba(0,0,0,.6)) drop-shadow(0 12px 16px rgba(0,0,0,.4)); }
.mag-open{ position:relative; width:100%; aspect-ratio:5551/3543; transform-style:preserve-3d;
  transform:rotateX(39deg) rotateZ(-14deg);
  transition:transform .85s cubic-bezier(.2,.7,.2,1); }
.mag-spread:nth-child(even) .mag-3d{ perspective-origin:44% 16%; }
.mag-spread:nth-child(even) .mag-open{ transform:rotateX(39deg) rotateZ(14deg); }
.mag-spread:hover .mag-open{ transform:rotateX(28deg) rotateZ(-8deg); }
.mag-spread:nth-child(even):hover .mag-open{ transform:rotateX(28deg) rotateZ(8deg); }

/* two pages forming a valley at the spine */
.mag-open .pg{ position:absolute; top:0; height:100%; width:50.2%;
  background-image:var(--img); background-size:200% 100%; background-repeat:no-repeat;
  backface-visibility:hidden; }
.mag-open .pg-l{ left:0; background-position:left center; transform-origin:right center;
  transform:rotateY(23deg); border-radius:3px 1px 1px 3px; }
.mag-open .pg-r{ right:0; background-position:right center; transform-origin:left center;
  transform:rotateY(-23deg); border-radius:1px 3px 3px 1px; }
/* gutter shading toward the spine */
.mag-open .pg::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.mag-open .pg-l::after{ background:linear-gradient(90deg, transparent 58%, rgba(0,0,0,.16) 82%, rgba(0,0,0,.5)); }
.mag-open .pg-r::after{ background:linear-gradient(270deg, transparent 58%, rgba(0,0,0,.16) 82%, rgba(0,0,0,.5)); }
/* paper sheen — light from upper right */
.mag-open .pg::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; }
.mag-open .pg-r::before{ background:linear-gradient(155deg, rgba(255,255,255,.24), transparent 42%); }
.mag-open .pg-l::before{ background:linear-gradient(155deg, rgba(255,255,255,.10), transparent 52%); }
.stat{ display:flex; align-items:baseline; gap:.5em; }
.stat .num{ font-family:var(--font-display); font-weight:600; font-size:clamp(34px,4vw,60px); line-height:1; }
.stat .lab{ font-family:var(--font-roman); text-transform:uppercase; letter-spacing:.24em; font-size:clamp(10px,.9vw,13px); color:var(--muted); }
.meta-row{ display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,64px); align-items:baseline; }

/* sub-label inside a case */
.sublabel{ font-family:var(--font-roman); text-transform:uppercase; letter-spacing:.34em;
  font-size:clamp(11px,1vw,14px); color:var(--muted); display:flex; align-items:center; gap:.8em;
  margin:clamp(40px,6vw,86px) 0 clamp(16px,2vw,26px); }
.sublabel::before{ content:""; width:26px; height:1px; background:var(--hair); }

/* process animation — GIF-like crossfade of hand-drawn stages */
.process{ position:relative; width:100%; aspect-ratio:1.85; overflow:hidden;
  border:1px solid var(--hair); background:#e9e8e4; }
.pframe{ position:absolute; inset:0; opacity:0; animation:procFade 13.5s infinite; }
.pframe:nth-child(2){ animation-delay:-4.5s; }
.pframe:nth-child(3){ animation-delay:-9s; }
.pframe img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes procFade{ 0%{opacity:0} 5%{opacity:1} 28%{opacity:1} 33%{opacity:0} 100%{opacity:0} }
body.no-shimmer .pframe{ animation:none; opacity:0; }
body.no-shimmer .pframe:last-child{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .pframe{ animation:none; opacity:0; } .pframe:last-child{ opacity:1; } }
.process-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:1em; gap:1em; flex-wrap:wrap; }
.proc-dots{ display:flex; gap:9px; align-items:center; }
.proc-dots i{ width:7px; height:7px; border-radius:50%; background:var(--hair); display:block; animation:procDot 13.5s infinite; }
.proc-dots i:nth-child(2){ animation-delay:-4.5s; } .proc-dots i:nth-child(3){ animation-delay:-9s; }
@keyframes procDot{ 0%,30%{background:var(--ink);transform:scale(1.25)} 34%,100%{background:var(--hair);transform:scale(1)} }

/* brand palette swatches */
.palette{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px); }
.swatch{ border:1px solid var(--hair); overflow:hidden; }
.swatch .chip{ aspect-ratio:3/2; }
.swatch .info{ padding:.8em .9em 1em; }
.swatch .hex{ font-family:var(--font-roman); letter-spacing:.14em; font-size:clamp(11px,1vw,15px); }
.swatch .rgb{ font-family:var(--font-body); color:var(--muted); font-size:clamp(9px,.78vw,11px); letter-spacing:.06em; margin-top:.45em; line-height:1.5; }

/* mockup grids */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px); }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } }

/* ============================================================
   INSTAGRAM PROFILE MOCKUP (Китайка)
   ============================================================ */
.ig{
  width:min(440px,92vw); margin-inline:auto;
  background:#000; color:#fff;
  border:1px solid rgba(255,255,255,.14); border-radius:30px; overflow:hidden;
  box-shadow:0 50px 110px -50px rgba(0,0,0,.9), 0 0 0 7px rgba(255,255,255,.03);
  font-family:'Manrope',system-ui,sans-serif;
}
.ig-top{ display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.ig-top .h{ font-weight:600; font-size:15px; letter-spacing:.2px; display:flex; align-items:center; gap:6px; }
.ig-top .lock{ font-size:12px; opacity:.85; }
.ig-top .chev{ opacity:.85; font-size:12px; }
.ig-top .dots{ margin-left:auto; letter-spacing:2px; opacity:.9; }
.ig-head{ display:flex; align-items:center; gap:clamp(16px,5vw,30px); padding:18px 16px 8px; }
.ig-ava{ width:84px; height:84px; flex:0 0 auto; border-radius:50%; padding:2.5px;
  background:conic-gradient(from 200deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888,#f09433); }
.ig-ava img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2.5px solid #000; background:#e8302a; }
.ig-stats{ display:flex; flex:1; justify-content:space-around; text-align:center; }
.ig-stats b{ display:block; font-size:17px; font-weight:700; }
.ig-stats span{ font-size:12.5px; opacity:.7; }
.ig-bio{ padding:2px 16px 14px; font-size:13.5px; line-height:1.45; }
.ig-bio .nm{ font-weight:700; }
.ig-bio .cat{ opacity:.6; }
.ig-bio .b{ margin-top:3px; }
.ig-bio .lnk{ color:#5a9bd8; }
.ig-bio .by{ color:#5a9bd8; }
.ig-actions{ display:flex; gap:7px; padding:0 16px 14px; }
.ig-actions a{ flex:1; text-align:center; font-size:13px; font-weight:600; padding:7px 0; border-radius:9px;
  background:#262626; color:#fff; text-decoration:none; }
.ig-actions a.pri{ background:#0095f6; }
.ig-hl{ display:flex; gap:16px; padding:4px 16px 16px; overflow-x:auto; }
.ig-hl .h{ text-align:center; flex:0 0 auto; }
.ig-hl .r{ width:58px; height:58px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:22px; background:#161616; overflow:hidden; }
.ig-hl .r img{ width:100%; height:100%; object-fit:cover; }
/* solid single-tone highlight covers (brand colours, no artwork) */
.ig-hl .r.tone{
  background:
    radial-gradient(circle at 34% 28%,
      color-mix(in srgb, var(--c) 72%, #fff 28%),
      var(--c) 52%,
      color-mix(in srgb, var(--c) 72%, #000 28%) 100%);
  border-color:color-mix(in srgb, var(--c) 55%, rgba(255,255,255,.35));
}

/* real chrome butterfly — STATIC (wings split, slight open pose, no motion) */
.butterfly{ perspective:1100px; }
.bfly{ position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.bfly .bw{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; display:block;
  backface-visibility:hidden; transform-origin:50% 50%;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.5)) drop-shadow(0 0 9px rgba(255,255,255,.2)); }
.bfly .bw-l{ transform:rotateY(9deg); }
.bfly .bw-r{ transform:rotateY(-9deg); }

/* featured best-posts beside the phone mockup — shown in full */
.featured{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(0,1fr); gap:clamp(10px,1vw,16px); margin:.5em 0 0; align-items:stretch; flex:1 1 0; min-height:0; overflow:hidden; }
.featured figure{ margin:0; }
.feat-shot{ height:100%; border-radius:10px; overflow:hidden; cursor:pointer;
  box-shadow:0 22px 46px -26px rgba(0,0,0,.7); border:1px solid var(--hair); }
.feat-shot img{ width:100%; height:100%; display:block; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.feat-shot:hover img{ transform:scale(1.05); }

/* IGGY event-poster row */
.afisha-row{ display:flex; flex-wrap:wrap; gap:clamp(16px,2.2vw,32px); align-items:flex-start; }
.afisha-row figure{ flex:1 1 240px; min-width:220px; margin:0; }
/* posters section: strict 3 per row */
#s-posters .afisha-row{ display:grid; grid-template-columns:repeat(3,1fr); }
#s-posters .afisha-row figure{ flex:none; min-width:0; }
@media (max-width:760px){ #s-posters .afisha-row{ grid-template-columns:repeat(2,1fr); } }

/* logos showcase */
.logo-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
@media(max-width:760px){ .logo-row{ grid-template-columns:1fr; } }
.logo-cell{ display:flex; align-items:center; justify-content:center;
  min-height:clamp(150px,16vw,230px); padding:clamp(26px,3vw,50px);
  border:1px solid var(--hair); border-radius:14px;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); }
.logo-cell img{ max-width:100%; max-height:clamp(80px,9vw,128px); object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.4)); }

/* standalone poster cards */
.poster-card{ flex:1 1 250px; min-width:230px; margin:0; }
.poster-card .pimg{ border-radius:8px; overflow:hidden; border:1px solid var(--hair);
  box-shadow:0 30px 64px -34px rgba(0,0,0,.8); }
.poster-card .pimg img{ width:100%; height:auto; display:block; }
.ig-hl .lb{ font-size:11px; margin-top:5px; opacity:.8; }
.ig-tabs{ display:flex; border-top:1px solid rgba(255,255,255,.12); }
.ig-tabs .t{ flex:1; display:flex; align-items:center; justify-content:center; padding:10px 0; opacity:.4; }
.ig-tabs .t.on{ opacity:1; border-top:1.5px solid #fff; margin-top:-1px; }
.ig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.ig-cell{ position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer; background:#111; }
.ig-cell image-slot{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ig-cell img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.ig-cell:hover img{ transform:scale(1.05); }
.ig-cell .ic{ position:absolute; top:7px; right:7px; pointer-events:none; z-index:3; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
/* per-tile zoom-to-view button (top-left, clears the carousel/reel icon at top-right) */
.ig-zoom{ position:absolute; top:6px; left:6px; z-index:4; width:30px; height:30px; padding:0;
  display:grid; place-items:center; border:none; border-radius:50%; cursor:pointer;
  background:rgba(10,10,10,.55); backdrop-filter:blur(6px);
  opacity:0; transform:scale(.85); transition:opacity .2s, transform .2s, background .2s; }
.ig-cell:hover .ig-zoom, .ig-zoom:focus-visible{ opacity:1; transform:scale(1); }
.ig-zoom:hover{ background:rgba(10,10,10,.85); }
@media (hover:none){ .ig-zoom{ opacity:1; transform:scale(1); } }

/* lightbox */
.ig-lb{ position:fixed; inset:0; z-index:200; background:rgba(4,4,6,.92); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:4vh 4vw; }
.ig-lb.on{ display:flex; }
.ig-lb.single .nav{ display:none; }
.ig-lb img{ max-width:min(560px,92vw); max-height:92vh; border-radius:14px; box-shadow:0 40px 90px -30px #000; }
.ig-lb .x{ position:absolute; top:20px; right:26px; font-size:34px; color:#fff; cursor:pointer; line-height:1; opacity:.8; }
.ig-lb .nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:46px; color:#fff; cursor:pointer; opacity:.6; user-select:none; padding:10px; }
.ig-lb .nav:hover{ opacity:1; }
.ig-lb .prev{ left:2vw; } .ig-lb .next{ right:2vw; }

/* SMM layout: profile + aside */
.smm-wrap{ display:grid; grid-template-columns:auto 1fr;
  gap:clamp(16px,2vw,26px) clamp(30px,5vw,72px); align-items:stretch;
  grid-template-areas:"phone aside" "note aside-b"; }
.ig{ grid-area:phone; align-self:start; }
.smm-aside{ grid-area:aside; padding-top:clamp(10px,3vw,40px);
  display:flex; flex-direction:column; }
.ig-tap-note{ grid-area:note; align-self:start; margin:0;
  font-size:clamp(13px,1.1vw,15px); color:var(--muted); line-height:1.55; max-width:440px; }
.ig-tap-note .ru{ opacity:.78; }
@media (max-width:900px){
  .smm-wrap{ grid-template-columns:1fr; justify-items:center;
    grid-template-areas:"phone" "note" "aside"; }
  .smm-aside{ justify-self:stretch; display:block; max-width:520px; }
  .ig-tap-note{ justify-self:stretch; max-width:520px; text-align:center; }
}

/* video frame */
.videoframe{ position:relative; background:#08080d; }
.videoframe video{ width:100%; height:100%; object-fit:cover; display:block; }
.videoframe .vtag{ position:absolute; left:12px; top:12px; z-index:2;
  font-family:var(--font-roman); text-transform:uppercase; letter-spacing:.2em; font-size:11px;
  padding:.32em .85em; border:1px solid var(--hair); border-radius:99px; background:rgba(0,0,0,.4); }

/* ABOUT ME (native) */
.about-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(30px,5vw,84px); align-items:start; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.about-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,48px); margin-top:clamp(30px,4vw,56px); }
@media (max-width:520px){ .about-cols{ grid-template-columns:1fr; } }
.flist{ list-style:none; padding:0; margin:.7em 0 0; display:flex; flex-direction:column; gap:.72em; }
.flist li{ font-family:var(--font-roman); text-transform:uppercase; letter-spacing:.13em;
  font-size:clamp(12px,1.05vw,15px); display:flex; gap:.7em; align-items:center; color:var(--ink); }
.flist li::before{ content:"✦"; color:var(--muted); font-size:.78em; }
.about-portrait{ position:relative; }
.about-portrait .shot{ aspect-ratio:64/82; border-radius:48% 48% 5px 5px / 30% 30% 1% 1%;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8); }
.about-portrait .archring{ position:absolute; left:50%; top:-16px; transform:translateX(-50%);
  width:calc(100% + 26px); aspect-ratio:64/82; border:1px solid var(--hair);
  border-radius:48% 48% 5px 5px / 30% 30% 1% 1%; pointer-events:none; z-index:0; }
.about-portrait figure{ position:relative; z-index:1; margin:0; }
.about-portrait .turn{ margin-top:1em; font-family:var(--font-display); font-style:italic;
  font-size:clamp(15px,1.5vw,22px); color:var(--muted); }
.about-portrait .turn b{ color:var(--ink); font-weight:600; }

/* editorial masonry */
.grid-edit{
  display:grid; gap:clamp(16px,2vw,30px);
  grid-template-columns:repeat(6,1fr);
}
.grid-edit .work.a{ grid-column:span 4; }
.grid-edit .work.b{ grid-column:span 2; }
.grid-edit .work.c{ grid-column:span 3; }
.grid-edit .work.d{ grid-column:span 3; }

/* smm: reel phones + square posts */
.smm-row{ display:flex; flex-wrap:wrap; gap:clamp(16px,2vw,28px); align-items:flex-start; }
.phone{
  width:clamp(180px,17vw,250px); flex:0 0 auto;
  border:1px solid var(--hair); border-radius:30px; padding:8px;
  background:rgba(255,255,255,.03);
  animation:phoneBob calc(8s / var(--motion,1)) ease-in-out infinite;
}
.phone:nth-child(even){ animation-delay:-2.4s; }
@keyframes phoneBob{ 0%,100%{transform:translateY(0) rotate(-.6deg);} 50%{transform:translateY(calc(-10px*var(--motion,1))) rotate(.6deg);} }
.phone image-slot{ border-radius:24px; aspect-ratio:9/16; }
.phone .reeltag{
  position:absolute; margin:10px; top:0; left:0;
  font-family:var(--font-roman); letter-spacing:.2em; font-size:11px;
  padding:.3em .8em; border:1px solid var(--hair); border-radius:99px;
  background:rgba(0,0,0,.35); text-transform:uppercase;
}
.posts{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,22px); flex:1 1 320px; min-width:280px; }
.posts image-slot{ aspect-ratio:1; }

/* aesthetic gallery — asymmetric, breathing */
.gallery{ display:grid; gap:clamp(18px,2.4vw,40px); grid-template-columns:repeat(12,1fr); align-items:start; }
.gallery .g1{ grid-column:span 7; }
.gallery .g2{ grid-column:span 5; margin-top:clamp(40px,8vw,120px); }
.gallery .g3{ grid-column:span 5; }
.gallery .g4{ grid-column:span 7; margin-top:clamp(-40px,-4vw,-10px); }

/* tarot cards */
.tarot-row{ display:flex; flex-wrap:wrap; gap:clamp(18px,2.4vw,40px); justify-content:center; perspective:1400px; }
.tcard{
  width:clamp(180px,16vw,250px); flex:0 0 auto;
  border:1px solid var(--hair); border-radius:14px; padding:12px;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  transition:transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .7s;
  transform-style:preserve-3d;
}
.tcard:nth-child(odd){ transform:rotate(-3deg); }
.tcard:nth-child(even){ transform:rotate(3deg) translateY(18px); }
.tcard:hover{ transform:rotate(0) translateY(-14px) scale(1.04); box-shadow:0 40px 70px -34px rgba(0,0,0,.5); z-index:3; }
.tcard image-slot{ aspect-ratio:5/8; border-radius:6px; }
.tcard .arcana{
  text-align:center; margin-top:.7em;
  font-family:var(--font-roman); text-transform:uppercase; letter-spacing:.3em; font-size:11px;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-links{ display:flex; flex-direction:column; gap:clamp(.5em,1.6vw,.85em); }
.clink{
  font-family:var(--font-display); font-size:clamp(34px,6vw,90px); line-height:1.0;
  text-decoration:none; color:var(--ink);
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:.18em .4em; width:max-content; max-width:100%;
  transition:letter-spacing .5s;
}
.clink .lbl{ display:inline-flex; align-items:center; gap:.3em; }
.clink:hover{ letter-spacing:.01em; }
.clink .arr{ font-size:.4em; opacity:.5; transition:transform .5s; }
.clink:hover .arr{ transform:translateX(12px); }
.clink .handle{ font-family:var(--font-display); font-style:normal; text-transform:none;
  font-size:clamp(18px,2.6vw,40px); line-height:1.0; color:var(--muted); max-width:100%; }

/* ============================================================
   SECTION-NUMBER PROGRESS RAIL
   ============================================================ */
.rail{
  position:fixed; right:clamp(14px,2vw,30px); top:50%; transform:translateY(-50%);
  z-index:50; display:flex; flex-direction:column; gap:14px; align-items:center;
}
.rail a{ position:relative; width:7px; height:7px; border-radius:50%; background:#fff; opacity:.32;
  box-shadow:0 0 0 1px rgba(0,0,0,.25); transition:opacity .4s, transform .4s; }
.rail a.on{ opacity:1; transform:scale(1.5); }
.rail a:hover{ opacity:1; }
/* hover tooltip with the section name */
.rail a::after{
  content:attr(data-label);
  position:absolute; right:18px; top:50%; transform:translateY(-50%) translateX(7px);
  white-space:nowrap;
  font-family:var(--font-roman); text-transform:uppercase; letter-spacing:.18em;
  font-size:11px; color:#f2f0f2;
  background:rgba(10,10,13,.85); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  padding:.5em .9em; border:1px solid rgba(255,255,255,.16); border-radius:99px;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.8);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.rail a:hover::after, .rail a:focus-visible::after{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
  animation:revealFailsafe .01s linear 4s forwards; }
.reveal.in{ opacity:1; transform:none; animation:none; }
/* failsafe: if the scroll-reveal observer never runs (slow/failed JS),
   force every section visible after 4s so the page can never stay blank */
@keyframes revealFailsafe{ to{ opacity:1; transform:none; } }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
.reveal.d5{ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .grid-edit{ grid-template-columns:repeat(2,1fr); }
  .grid-edit .work.a,.grid-edit .work.b,.grid-edit .work.c,.grid-edit .work.d{ grid-column:span 2; }
  .gallery{ grid-template-columns:1fr; }
  .gallery .g1,.gallery .g2,.gallery .g3,.gallery .g4{ grid-column:span 1; margin-top:0; }
  .rail{ display:none; }
}