/* Selected Works: three tabs (websites, social media, ads), each a one-row carousel of three
   projects followed by a "See more" card that opens the full work on antoneta-safta.com. */
.medusa-works { --mono: var(--_font-default); position: relative; padding: clamp(80px, 9vw, 140px) 3.2rem; color: #e0e5ef; }
.medusa-works > * { max-width: 1760px; margin-inline: auto; }
.medusa-works__label { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; font: 300 10px/1.4 var(--_font-default); letter-spacing: .14em; color: #aab6c8; }
.medusa-works__label span { width: 70px; height: 1px; background: #aab6c82b; }
.medusa-works__header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(24px, 2.6vw, 40px); }
.medusa-works h2 { margin: 0; font: 400 clamp(36px, 4.4vw, 78px)/1 var(--_font-default); letter-spacing: -.045em; color: inherit; }

/* Shared glass surface. */
.medusa-works__tab, .medusa-works__arrow, .medusa-works__stats, .medusa-works__see-all, .medusa-works__more {
  border: 1px solid #e0e5ef24; background: linear-gradient(145deg, #222c4a73, #0c122259);
  box-shadow: inset 1px 1px 0 #ffffff12; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.medusa-works__nav { display: flex; gap: 10px; }
.medusa-works__arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #e0e5ef; cursor: pointer; transition: border-color .3s, opacity .3s; }
.medusa-works__arrow svg { width: 18px; height: 18px; }
.medusa-works__arrow:hover { border-color: #e0e5ef66; }
.medusa-works__arrow:disabled { opacity: .35; cursor: default; }
.medusa-works__tabs, .medusa-works__tablist { display: flex; flex-wrap: wrap; gap: 10px; }
.medusa-works__tabs { margin-bottom: clamp(24px, 2.6vw, 40px); padding-top: 10px; }
/* Categories in preparation: visible,
0 10px 30px #7657f040; }

/* Carousel: native horizontal scrolling with snap; three cards per view on desktop. */
.medusa-works__panel[hidden] { display: none; }
.medusa-works__track { overscroll-behavior-x: contain; --per-view: 3; --gap: clamp(14px, 1.4vw, 24px); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view)); gap: var(--gap); margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.medusa-works__track::-webkit-scrollbar { display: none; }
.medusa-works__card { scroll-snap-align: start; min-width: 0; }

/* Website and social cards. Every screenshot wears a "cover" in the site's own night: a violet-navy tint
   multiplied into the picture (white pages turn to deep violet, the content stays readable), then a faint
   star field and the bottom shade for the caption. Hover lifts the cover so the project shows through.
   The bright side swaps the cover for warm ivory and gold dust (css/medusa-bright.css). */
.medusa-works__visual { position: relative; display: block; height: 100%; min-height: 380px; overflow: hidden; isolation: isolate; border-radius: 22px; border: 1px solid #e0e5ef1f; color: #fff; text-decoration: none; background: #151d33; }
.medusa-works__visual img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; filter: saturate(.7) brightness(1.08) contrast(1.02); transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .6s ease; }
.medusa-works__visual::before { /* the tint */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; opacity: .9; transition: opacity .6s ease;
  background: radial-gradient(ellipse 90% 70% at 85% 0%, #4c4a8c, transparent 70%), linear-gradient(160deg, #3a3c78 0%, #262b5a 48%, #12162f 100%);
}
.medusa-works__visual::after { /* stars, a violet haze, and the shade under the caption */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .6s ease;
  background:
    radial-gradient(1.2px 1.2px at 18px 26px, #ffffffd9 50%, transparent 52%),
    radial-gradient(1px 1px at 132px 74px, #c9b9ffb3 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 204px 158px, #ffffffbf 50%, transparent 52%),
    radial-gradient(1px 1px at 66px 190px, #8fe9ff99 50%, transparent 52%),
    radial-gradient(1px 1px at 176px 12px, #ffffff99 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 96px 128px, #ffffffa6 50%, transparent 52%),
    radial-gradient(ellipse 70% 50% at 20% 25%, #6d4fd833, transparent 70%),
    linear-gradient(180deg, transparent 42%, #070b14eb 100%);
  background-size: 230px 230px, 230px 230px, 230px 230px, 230px 230px, 230px 230px, 230px 230px, 100% 100%, 100% 100%;
}
.medusa-works__visual:hover img, .medusa-works__visual:focus-visible img { transform: scale(1.04); filter: saturate(1) contrast(1); }
.medusa-works__visual:hover::before, .medusa-works__visual:focus-visible::before { opacity: .38; }
.medusa-works__tags, .medusa-works__name { position: absolute; z-index: 2; left: 22px; right: 22px; }
.medusa-works__tags { bottom: 62px; font: 400 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #c9d2e2; }
.medusa-works__name { bottom: 22px; display: flex; align-items: center; gap: 10px; font: 400 clamp(20px, 1.7vw, 28px)/1.1 var(--_font-default); letter-spacing: -.03em; }
.medusa-works__name svg, .medusa-works__more svg, .medusa-works__see-icon svg { width: 16px; height: 16px; flex: none; }
.medusa-works__name svg { color: #c9b9ff; transition: transform .3s; }
.medusa-works__visual:hover .medusa-works__name svg { transform: translate(3px, -3px); }

/* Ads case-study boxes. */
.medusa-works__stats { display: flex; flex-direction: column; height: 100%; min-height: 380px; padding: clamp(20px, 1.8vw, 30px); border-radius: 22px; }
.medusa-works__eyebrow { margin: 0 0 12px; font: 400 10px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #a79ac8; }
.medusa-works__stats h3 { margin: 0 0 8px; font: 400 clamp(22px, 1.8vw, 30px)/1.1 var(--_font-default); letter-spacing: -.03em; color: #f1f3f9; }
.medusa-works__headline { margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid #e0e5ef1f; font: 300 clamp(13px, .95vw, 15px)/1.4 var(--_font-default); color: #afb9cc; }
.medusa-works__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 20px; border: 1px solid #e0e5ef1a; border-radius: 14px; overflow: hidden; background: #e0e5ef1a; }
.medusa-works__metrics div { padding: 12px 14px; background: #0d1426; }
.medusa-works__metrics dt { margin-bottom: 6px; font: 400 9px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8f9ab0; }
.medusa-works__metrics dd { margin: 0; }
.medusa-works__metrics strong { display: block; font: 400 clamp(20px, 1.6vw, 28px)/1.05 var(--_font-default); letter-spacing: -.03em; color: #f1f3f9; }
.medusa-works__delta { display: block; margin-top: 4px; font: 400 11px/1.2 var(--mono); color: #b9a8ff; }
.medusa-works__delta.is-cost { color: #8f9ab0; }
.medusa-works__flow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.medusa-works__flow div { flex: 1; padding: 12px 14px; border: 1px solid #e0e5ef1a; border-radius: 14px; background: #0d1426; }
.medusa-works__flow span { display: block; margin-bottom: 6px; font: 400 9px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8f9ab0; }
.medusa-works__flow strong { font: 400 clamp(20px, 1.6vw, 28px)/1 var(--_font-default); letter-spacing: -.03em; color: #f1f3f9; }
.medusa-works__flow-arrow { color: #b9a8ff; font-size: 18px; }
.medusa-works__more { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin-top: auto; padding: 11px 18px; border-radius: 20px; color: #f1f3f9; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: border-color .3s; }
.medusa-works__more:hover { border-color: #e0e5ef66; }

/* The fourth component: an invitation to the full portfolio. */
.medusa-works__see-all { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 380px; padding: clamp(20px, 1.8vw, 30px); border-radius: 22px; color: #f1f3f9; text-decoration: none; background: radial-gradient(ellipse at 25% 15%, #5b3fc44d, transparent 60%), linear-gradient(145deg, #222c4a73, #0c122259); transition: border-color .3s; }
.medusa-works__see-all strong { font: 400 clamp(32px, 3vw, 52px)/1 var(--_font-default); letter-spacing: -.045em; }
.medusa-works__see-text { max-width: 26ch; margin-top: 12px; font: 300 14px/1.45 var(--_font-default); color: #afb9cc; }
.medusa-works__see-icon { position: absolute; top: clamp(20px, 1.8vw, 30px); right: clamp(20px, 1.8vw, 30px); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #7657f0, #a58cff); box-shadow: 0 0 20px #7657f059; transition: transform .3s; }
.medusa-works__see-all:hover { border-color: #e0e5ef66; }
.medusa-works__see-all:hover .medusa-works__see-icon { transform: rotate(45deg); }
.medusa-works a:focus-visible, .medusa-works button:focus-visible { outline: 2px solid #a3b8d2; outline-offset: 3px; }
.medusa-works__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1199px) { .medusa-works__track { --per-view: 2; } }
@media (max-width: 767px) {
  .medusa-works { padding-inline: 2.2rem; }
  .medusa-works__track { --per-view: 1.12; }
  .medusa-works__arrow { width: 42px; height: 42px; }
  .medusa-works__tab { min-height: 44px; }
}

the category and the name sit under the picture.
   Posters without a photo are drawn in CSS from each brand's own colours (.medusa-brand__visual--<look>). */
.medusa-works__track--brand { --per-view: 2; }
.medusa-brand { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.medusa-brand__visual { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; border-radius: 28px; border: 1px solid #e0e5ef1f; background: #151d33; }
.medusa-brand__visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.medusa-brand:hover .medusa-brand__visual > img, .medusa-brand:focus-visible .medusa-brand__visual > img { transform: scale(1.04); }
.medusa-brand__mark { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.2vw, 20px); width: 100%; padding: 0 8%; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.medusa-brand__mark img { display: block; width: auto; height: clamp(54px, 6vw, 110px); }
.medusa-brand__meta { margin-top: clamp(18px, 1.8vw, 30px); font: 400 clamp(11px, .85vw, 14px)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
.medusa-brand__name { display: flex; align-items: center; gap: 14px; margin-top: 10px; font: 400 clamp(26px, 2.3vw, 42px)/1.05 var(--_font-default); letter-spacing: -.035em; }
.medusa-brand__name svg { width: clamp(20px, 1.6vw, 28px); height: auto; flex: none; color: #b9a8ff; transition: transform .3s; }
.medusa-brand:hover .medusa-brand__name svg, .medusa-brand:focus-visible .medusa-brand__name svg { transform: translate(4px, -4px); }
.medusa-brand.is-soon .medusa-brand__visual { filter: saturate(.85); }
.medusa-brand__soon { position: absolute; z-index: 2; top: 18px; right: 18px; padding: 7px 12px; border-radius: 20px; border: 1px solid #ffffff38; background: #0c1222a6; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #f1f3f9; }

/* Posters. Every one has a soft grain of light, like the mdx gradients. */
.medusa-brand__visual::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 60% 80% at 80% 10%, #ffffff55, transparent 60%), radial-gradient(ellipse 70% 60% at 10% 100%, #00000066, transparent 70%); }
.medusa-brand__visual--alisa::after, .medusa-brand__visual--medusa::after, .medusa-brand__visual--antoneta::after { opacity: 0; }
.medusa-brand__visual--alisa { background: radial-gradient(ellipse 65% 60% at 50% 50%, #ffffff, transparent 75%), radial-gradient(ellipse 50% 60% at 90% 90%, #a3b7b566, transparent 70%), linear-gradient(140deg, #f8f6f0 0%, #ece6d6 60%, #e0d1a3 100%); }
.medusa-brand__visual--alisa .medusa-brand__mark img { width: min(56%, 470px); height: auto; }
.medusa-brand__visual--ecofin { background: radial-gradient(ellipse 60% 80% at 22% 40%, #1f6f6a66, transparent 65%), radial-gradient(ellipse 50% 60% at 85% 15%, #b8932a26, transparent 70%), linear-gradient(135deg, #082125 0%, #0c2f30 50%, #051416 100%); }
.medusa-brand__visual--ecofin .medusa-brand__mark img { width: min(48%, 400px); height: auto; }
.medusa-brand__visual--medusa { background: radial-gradient(ellipse 65% 80% at 0% 100%, #4fe6ff, transparent 65%), radial-gradient(ellipse 65% 80% at 100% 0%, #c76bff, transparent 65%), radial-gradient(ellipse 50% 60% at 100% 100%, #6f7bff, transparent 70%), linear-gradient(135deg, #8fd8ff 0%, #a9a6ff 50%, #d79bff 100%); }
.medusa-brand__visual--medusa .medusa-brand__mark img { width: auto; height: clamp(84px, 9vw, 168px); }
.medusa-brand__visual--mihaela { background: radial-gradient(ellipse 65% 60% at 50% 50%, #fbf4e4, transparent 75%), linear-gradient(140deg, #efdcb5 0%, #dcbd85 55%, #c9a466 100%); }
.medusa-brand__visual--mihaela .medusa-brand__mark img { width: min(50%, 420px); height: auto; }
.medusa-brand__visual--antoneta { background: radial-gradient(ellipse 50% 60% at 50% 50%, #a3243e, transparent 75%), radial-gradient(ellipse 60% 75% at 0% 0%, #b8344f, transparent 65%), radial-gradient(ellipse 60% 75% at 100% 100%, #6e1228, transparent 70%), linear-gradient(135deg, #8c1d34 0%, #7a1730 50%, #651226 100%); }
.medusa-brand__visual--antoneta .medusa-brand__mark img { width: min(50%, 420px); height: auto; }
@font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@media (max-width: 767px) {
  .medusa-works__track--brand { --per-view: 1.08; }
  .medusa-brand__visual { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .medusa-brand__visual > img, .medusa-brand__name svg { transition: none; } }