/* =========================================================
   Deryneia Youth — public site
   ========================================================= */
:root {
  --ink: #0E0B2B;
  --ink-2: #2A2650;
  --muted: #6B6889;
  --paper: #FFFCF7;
  --tint: #F4F1FF;
  --line: #E7E3F3;
  --primary: #FF5A36;
  --primary-2: #FF8A3D;
  --violet: #6C4BFF;
  --lime: #C6F432;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 10px 30px -12px rgba(14, 11, 43, .25);
  --shadow-lg: 0 30px 60px -20px rgba(14, 11, 43, .35);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink); background: var(--paper); line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 10px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 10px; }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .8em 1.4em; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; text-decoration: none; line-height: 1.1; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; box-shadow: 0 10px 24px -10px rgba(255, 90, 54, .8); }
.btn--primary:hover { box-shadow: 0 16px 30px -10px rgba(255, 90, 54, .9); }
.btn--ghost { border-color: currentColor; background: transparent; }
.btn--light { background: #fff; color: var(--ink); }
.btn--insta { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); color: #fff; }
.btn--sm { padding: .55em 1.1em; font-size: .9rem; }
.btn--lg { padding: 1em 1.8em; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 252, 247, .8); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.page-home .nav:not(.is-scrolled) { background: transparent; color: #fff; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; }
.brand__mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: conic-gradient(from 200deg, var(--primary), var(--violet), var(--primary)); color: #fff;
  font-size: 1rem; letter-spacing: -.04em; transform: rotate(-6deg); box-shadow: var(--shadow);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; font-size: 1.05rem; }
.brand__text small { font-weight: 600; font-size: .72rem; opacity: .7; }
.nav__menu { display: flex; align-items: center; gap: 28px; }
.nav__menu a:not(.btn) { text-decoration: none; font-weight: 600; position: relative; }
.nav__menu a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav__menu a:not(.btn):hover::after, .nav__menu a.is-active::after { transform: scaleX(1); }
.nav__toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; color: inherit; }
.nav__toggle span { display: block; height: 2px; background: currentColor; margin: 5px 0; border-radius: 2px; transition: transform .3s, opacity .3s; }

@media (max-width: 860px) {
  /* backdrop-filter would make the nav the containing block for the fixed menu */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 252, 247, .96); }
  .nav__toggle { display: block; z-index: 2; }
  .brand { position: relative; z-index: 2; }
  .nav__menu {
    position: fixed; inset: 0; height: 100vh; height: 100dvh; flex-direction: column; justify-content: center; gap: 22px; font-size: 1.4rem;
    background: var(--ink); color: #fff; transform: translateY(-100%); visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s .45s;
  }
  .nav.is-open .nav__menu { transform: none; visibility: visible; transition: transform .45s var(--ease); }
  .nav.is-open { color: #fff; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ink); color: #fff; margin-top: -72px; padding: 150px 0 0; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background: var(--ink); overflow: hidden; } /* solid colour so the logo's blend mode has something to blend with */
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; animation: float 16s ease-in-out infinite alternate; }
.blob--1 { width: 520px; height: 520px; background: var(--primary); top: -160px; right: -120px; }
.blob--2 { width: 460px; height: 460px; background: var(--violet); bottom: -200px; left: -140px; animation-delay: -5s; }
.blob--3 { width: 280px; height: 280px; background: #12B886; top: 40%; left: 45%; opacity: .35; animation-delay: -9s; }
.grain { position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes float { to { transform: translate(40px, 30px) scale(1.1); } }

/* Optional Deryneia Youth logo watermark (Admin → Settings → Homepage banner) */
.hero__logo {
  position: absolute; top: 50%; height: var(--hl-size, 85%); width: auto; max-width: 70%; object-fit: contain;
  opacity: var(--hl-opacity, .18); filter: var(--hl-filter, none); mix-blend-mode: var(--hl-blend, normal);
  transform: translateY(-50%); pointer-events: none; user-select: none;
}
/* Round badge: the logo keeps its white background, cropped to a circle */
.hero__logo--circle { aspect-ratio: 1 / 1; width: auto; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .25), 0 30px 80px -20px rgba(0, 0, 0, .6); }
.hero__logo--right { right: 2%; }
.hero__logo--left { left: 2%; }
.hero__logo--center { left: 50%; transform: translate(-50%, -50%); }
.hero__logo--float { animation: logo-drift 14s ease-in-out infinite alternate; }
.hero__logo--center.hero__logo--float { animation-name: logo-drift-center; }
@keyframes logo-drift { from { transform: translateY(-50%) rotate(-3deg); } to { transform: translateY(-53%) rotate(3deg) scale(1.03); } }
@keyframes logo-drift-center { from { transform: translate(-50%, -50%) rotate(-3deg); } to { transform: translate(-50%, -53%) rotate(3deg) scale(1.03); } }
/* On phones the text fills the width, so centre the logo and keep it subtle */
@media (max-width: 960px) {
  .hero__logo { height: auto; width: min(110%, 560px); max-width: none; left: 50%; right: auto; top: 38%; transform: translate(-50%, -50%); opacity: calc(var(--hl-opacity, .18) * .8); }
  .hero__logo--circle { width: min(90%, 420px); }
  .hero__logo--float { animation-name: logo-drift-center; }
}

.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding-bottom: 90px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-weight: 700; font-size: .85rem; }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(198, 244, 50, .25); }
.hero__title { font-size: clamp(2.6rem, 6.6vw, 5.4rem); margin: 22px 0 18px; letter-spacing: -.045em; line-height: .98; }
.hero__sub { font-size: 1.15rem; max-width: 36ch; opacity: .82; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.countdown-card {
  --cat: var(--primary);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-lg); position: relative;
}
.countdown-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--cat), transparent 50%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.countdown-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.countdown-card__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--lime); }
.countdown-card__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 10px; }
.countdown-card__title a { text-decoration: none; }
.countdown-card__meta { display: flex; flex-direction: column; gap: 2px; opacity: .85; font-size: .95rem; }
.countdown-card__actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.countdown-card--empty p { opacity: .8; }

.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 6px; }
.countdown div { background: rgba(0, 0, 0, .25); border-radius: 14px; padding: 14px 6px; text-align: center; }
.countdown strong { display: block; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.03em; }
.countdown span { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; opacity: .7; }
.countdown strong.tick { animation: tick .35s var(--ease); }
@keyframes tick { from { transform: translateY(-6px); opacity: .3; } }
.countdown--inline { max-width: 460px; }

.capacity { margin-top: 14px; }
.capacity__bar { height: 8px; background: rgba(255, 255, 255, .15); border-radius: 99px; overflow: hidden; margin-bottom: 6px; }
.capacity__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--lime), var(--primary)); border-radius: inherit; }
.capacity small { opacity: .8; }

.ticker { border-top: 1px solid rgba(255, 255, 255, .12); background: var(--primary); color: var(--ink); overflow: hidden; transform: rotate(-1.2deg) scale(1.03); margin-bottom: -6px; }
.ticker__track { display: flex; gap: 28px; padding: 14px 0; width: max-content; animation: marquee 30s linear infinite; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 960px) {
  .hero { padding-top: 120px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 60px; }
}

/* ---------- Stats ---------- */
.stats { background: var(--paper); padding: 56px 0 10px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; padding: 10px; }
.stat strong { display: block; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; background: linear-gradient(135deg, var(--primary), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; }
.stat span { color: var(--muted); font-weight: 600; }
@media (max-width: 700px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sections ---------- */
.section { padding: 90px 0; }
.section--tight { padding: 50px 0 90px; }
.section--tint { background: var(--tint); }
.section--dark { background: var(--ink); color: #fff; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.section__head h2 { margin: 0; }
.section__lead { color: var(--muted); max-width: 46ch; font-size: 1.08rem; margin: 0; }
.section--dark .section__lead, .section--dark .muted { color: rgba(255, 255, 255, .7); }
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.link-arrow { font-weight: 700; text-decoration: none; color: var(--violet); }
.link-arrow:hover { text-decoration: underline; }
.empty { text-align: center; padding: 60px 20px; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); }

/* ---------- Filters / chips ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.filter { --cat: var(--ink); border: 2px solid var(--line); background: #fff; color: var(--ink); padding: .5em 1em; border-radius: 999px; font-weight: 700; font-size: .92rem; text-decoration: none; transition: all .2s; }
.filter:hover { border-color: var(--cat); }
.filter.is-active { background: var(--cat); border-color: var(--cat); color: #fff; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cat, var(--primary)) 14%, transparent); color: var(--cat, var(--primary)); width: fit-content; }
.chip--solid { background: var(--cat, var(--primary)); color: #fff; }

/* ---------- Event cards ---------- */
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.event-card { --cat: var(--primary); display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; text-decoration: none; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.event-card.is-hidden { display: none; }
.event-card.is-past { opacity: .75; }
.event-card__media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--cat), color-mix(in srgb, var(--cat) 40%, var(--ink))); overflow: hidden; }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.event-card:hover .event-card__media img { transform: scale(1.06); }
/* Uploaded covers (often portrait posters) are shown whole, at their own shape, instead of cropped to 16:10 */
.event-card__media.has-cover { aspect-ratio: auto; }
.event-card__media.has-cover img { display: block; height: auto; max-height: 560px; object-fit: contain; }
.event-card:hover .event-card__media.has-cover img { transform: scale(1.03); }
.event-card__media.has-cover .date-badge { display: none; } /* would cover the poster; the date is in the card footer */
.event-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.5rem; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .25)); transition: transform .5s var(--ease); }
.event-card:hover .event-card__placeholder { transform: scale(1.15) rotate(-6deg); }
.date-badge { position: absolute; top: 14px; left: 14px; background: #fff; border-radius: 14px; padding: 6px 12px; text-align: center; font-weight: 800; font-size: .72rem; text-transform: uppercase; line-height: 1.1; box-shadow: var(--shadow); }
.date-badge b { display: block; font-size: 1.5rem; letter-spacing: -.03em; }
.flag { position: absolute; top: 14px; right: 14px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; }
.flag--hot { background: var(--lime); color: var(--ink); }
.flag--cancel { background: #E03131; }
.event-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.event-card__body h3 { font-size: 1.3rem; margin: 4px 0 0; }
.event-card__body p { color: var(--muted); font-size: .95rem; margin: 0; }
.event-card__meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; font-weight: 700; color: var(--ink-2); flex-wrap: wrap; }

/* ---------- Committees ---------- */
.committee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.committee { --cat: var(--primary); position: relative; background: #fff; border-radius: var(--radius-lg); padding: 30px 26px; text-decoration: none; overflow: hidden; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; display: flex; flex-direction: column; }
.committee::before { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: var(--cat); opacity: .12; top: -60px; right: -60px; transition: transform .5s var(--ease); }
.committee:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.committee:hover::before { transform: scale(2.8); }
.committee__icon { font-size: 2.4rem; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: color-mix(in srgb, var(--cat) 16%, #fff); margin-bottom: 18px; position: relative; }
.committee h3 { font-size: 1.5rem; position: relative; }
.committee p { color: var(--muted); position: relative; flex: 1; }
.committee__foot { font-weight: 800; color: var(--cat); position: relative; }
.committee__foot b { display: inline-block; transition: transform .3s; }
.committee:hover .committee__foot b { transform: translateX(6px); }

/* ---------- Sponsors ---------- */
.tier { margin-bottom: 34px; }
.tier__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; opacity: .7; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.tier__label::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .2; }
.tier__logos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tier--platinum .tier__logos { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tier--gold .tier__logos { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sponsor { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px; min-height: 110px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); text-decoration: none; transition: transform .25s var(--ease), background .25s; }
a.sponsor:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .12); }
.tier--platinum .sponsor { min-height: 150px; }
.tier--platinum .sponsor { background: linear-gradient(135deg, rgba(198, 244, 50, .14), rgba(108, 75, 255, .14)); border-color: rgba(198, 244, 50, .4); }
.sponsor img { max-height: 70px; max-width: 100%; object-fit: contain; filter: grayscale(1) brightness(2); opacity: .85; transition: filter .3s, opacity .3s; }
.sponsor:hover img { filter: none; opacity: 1; }
.sponsor__initials { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--violet)); color: #fff; font-weight: 800; flex-shrink: 0; }
.sponsor__name { font-weight: 800; }
.tier--light .sponsor { background: #fff; border-color: var(--line); }
.tier--light .sponsor img { filter: none; opacity: 1; }
.tier--light.tier--platinum .sponsor { background: linear-gradient(135deg, #F7FFE0, #EFEAFF); border-color: #D9F07A; }

.logo-marquee { overflow: hidden; margin-top: 30px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logo-marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 40s linear infinite; align-items: center; }
.logo-marquee__item { font-weight: 800; font-size: 1.2rem; opacity: .55; white-space: nowrap; }
.logo-marquee__item img { height: 44px; width: auto; filter: grayscale(1) brightness(2); }
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }

/* ---------- Instagram ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.ig-grid .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; }
.ig-cta { display: flex; align-items: center; gap: 30px; padding: 30px; border-radius: var(--radius-lg); text-decoration: none; background: linear-gradient(120deg, #FFF1E8, #FCE7F3 50%, #EFE9FF); border: 1px solid var(--line); flex-wrap: wrap; transition: transform .3s var(--ease); }
.ig-cta:hover { transform: translateY(-4px); }
.ig-cta__tiles { display: grid; grid-template-columns: repeat(3, 70px); gap: 8px; }
.ig-cta__tiles i { aspect-ratio: 1; border-radius: 14px; background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); opacity: .25; animation: pulse-tile 3s ease-in-out infinite; }
.ig-cta__tiles i:nth-child(2n) { animation-delay: -1s; } .ig-cta__tiles i:nth-child(3n) { animation-delay: -2s; }
@keyframes pulse-tile { 50% { opacity: .75; } }
.ig-cta__text { display: flex; flex-direction: column; gap: 4px; font-size: 1.3rem; }
.ig-cta__text span { font-size: 1rem; color: #DD2A7B; font-weight: 700; }

/* ---------- Join ---------- */
.join { padding: 0 0 20px; }
.join__inner { background: linear-gradient(120deg, var(--primary), var(--violet)); color: #fff; border-radius: var(--radius-lg); padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; position: relative; overflow: hidden; }
.join__inner::after { content: '✦'; position: absolute; right: 30%; top: -40px; font-size: 12rem; opacity: .12; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.join h2 { margin-bottom: 8px; }
.join p { max-width: 50ch; opacity: .9; margin: 0; }
@media (max-width: 600px) { .join__inner { padding: 36px 26px; } }

/* ---------- Contact & forms ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.contact__list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 10px; font-weight: 600; }
.contact__list li { display: flex; gap: 12px; align-items: center; }
.contact__list span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); }
.map { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); }
.map iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; align-content: start; }
.form em { font-weight: 500; color: var(--muted); font-style: normal; }
.join-form label > em { display: block; margin-top: 1px; font-size: .78rem; }
.join-form label { display: block; }
.join-form label > input { margin-top: 6px; }
.join-form .field-error { display: block; margin-top: 4px; }
.form input, .form select, .form textarea, .search input, .subscribe input {
  width: 100%; font: inherit; padding: 13px 16px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.form input:focus, .form select:focus, .form textarea:focus, .search input:focus, .subscribe input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(108, 75, 255, .15); }
.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; }
.alert p { margin: 0; }
.alert--error { background: #FFF0F0; color: #C92A2A; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 80; display: grid; gap: 10px; width: min(92vw, 460px); }
.toast { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 700; box-shadow: var(--shadow-lg); animation: toast-in .5s var(--ease); transition: opacity .3s; }
.toast--success { border-left: 5px solid var(--lime); }
.toast--error { border-left: 5px solid #FF6B6B; }
.toast__close { background: none; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; opacity: .6; }
@keyframes toast-in { from { transform: translateY(30px); opacity: 0; } }

/* ---------- Page hero (events list) ---------- */
.page-hero { --cat: var(--violet); background: var(--ink); color: #fff; padding: 70px 0 60px; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: var(--cat); filter: blur(90px); opacity: .5; right: -150px; top: -250px; }
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -.045em; }
.page-hero .eyebrow { color: var(--lime); }
.page-hero .section__lead { color: rgba(255, 255, 255, .75); }
.toolbar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs { display: inline-flex; background: var(--tint); padding: 5px; border-radius: 999px; }
.tab { padding: .55em 1.3em; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--muted); }
.tab.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.search input { border-radius: 999px; min-width: 260px; background: #fff; }

/* ---------- Single event ---------- */
.event-hero { --cat: var(--primary); position: relative; color: #fff; padding: 60px 0 70px; background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--cat) 55%, var(--ink))); overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; }
.event-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 11, 43, .95), rgba(14, 11, 43, .35)); }
.event-hero__inner { position: relative; }
/* With a cover: the image itself sits blurred behind, and the full poster is shown uncropped beside the title */
.event-hero.has-poster .event-hero__img { filter: blur(28px) saturate(1.2); transform: scale(1.15); }
.event-hero.has-poster .event-hero__shade { background: linear-gradient(to top, rgba(14, 11, 43, .9), rgba(14, 11, 43, .55)); }
.event-hero.has-poster .event-hero__inner { display: grid; grid-template-columns: 1fr minmax(220px, 340px); gap: 40px; align-items: end; width: 100%; }
.event-hero__poster { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); transition: transform .3s var(--ease); }
.event-hero__poster:hover { transform: translateY(-4px); }
.event-hero__poster img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
@media (max-width: 760px) {
  .event-hero.has-poster .event-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .event-hero__poster { max-width: 360px; }
}
.event-hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -.045em; margin: 16px 0 10px; max-width: 18ch; }
.event-hero__sub { font-size: 1.15rem; opacity: .85; max-width: 55ch; }
.back { display: table; margin-bottom: 20px; text-decoration: none; opacity: .75; font-weight: 700; }
.back:hover { opacity: 1; }
.banner { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; font-weight: 800; }
.banner--cancel { background: #E03131; }
.banner--live { background: var(--lime); color: var(--ink); }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: #E03131; animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 49, 49, .6); } 100% { box-shadow: 0 0 0 14px rgba(224, 49, 49, 0); } }

.event-layout { display: grid; grid-template-columns: 1fr 380px; gap: 50px; align-items: start; }
@media (max-width: 960px) { .event-layout { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 34px; }
.facts > div { background: var(--tint); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; }
.facts span { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; color: var(--muted); }
.facts strong { font-size: 1.08rem; }
.facts small { color: var(--muted); font-weight: 600; }
.facts a { color: var(--violet); }
.prose { font-size: 1.1rem; color: var(--ink-2); max-width: 65ch; }
.event-map { margin-top: 26px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.event-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 30px 0 40px; font-weight: 700; }
.share a, .share button { padding: .5em 1em; border-radius: 999px; border: 2px solid var(--line); background: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--ink); }
.share a:hover, .share button:hover { border-color: var(--ink); }
.event-sponsors { padding-top: 30px; border-top: 1px solid var(--line); }
.event-sponsors h2 { font-size: 1.6rem; margin-bottom: 20px; }
.sticky { position: sticky; top: 96px; }
.event-aside h2 { font-size: 1.6rem; margin-bottom: 4px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .8); padding: 70px 0 30px; margin-top: 90px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; gap: 40px; }
.footer h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a { text-decoration: none; }
.footer a:hover { color: #fff; }
.brand--light { color: #fff; }
.footer__tag { margin: 16px 0; }
.socials { display: flex; gap: 10px; }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); transition: background .2s, transform .2s; }
.socials a:hover { background: var(--primary); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
.subscribe { display: flex; gap: 8px; flex-wrap: wrap; }
.subscribe input { flex: 1; min-width: 180px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .15); color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 50px; padding-top: 24px; font-size: .9rem; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Uploaded logo ---------- */
.brand__mark--img { width: 46px; height: 46px; object-fit: contain; border-radius: 12px; background: transparent; box-shadow: none; transform: none; padding: 0; }

/* ---------- Join page ---------- */
.page-hero--join { --cat: var(--primary); }
.join-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
@media (max-width: 960px) { .join-layout { grid-template-columns: 1fr; } .join-card { order: -1; } }
.join-info { display: grid; gap: 24px; position: sticky; top: 100px; }
@media (max-width: 960px) { .join-info { position: static; } }
.perk-list { display: grid; gap: 14px; }
.perk { display: flex; gap: 14px; align-items: flex-start; }
.perk > span { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.4rem; border-radius: 14px; background: var(--tint); }
.perk strong { display: block; font-size: 1.05rem; }
.perk p { margin: 0; color: var(--muted); }
.fee-card { border-radius: var(--radius-lg); padding: 24px; color: #fff; background: linear-gradient(135deg, var(--ink), #2B1F6B); position: relative; overflow: hidden; }
.fee-card::after { content: '€'; position: absolute; right: -10px; bottom: -50px; font-size: 11rem; font-weight: 800; opacity: .08; }
.fee-card__label { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.fee-card__price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 8px; }
.fee-card__price strong { font-size: 3rem; letter-spacing: -.04em; line-height: 1; }
.fee-card__price span { opacity: .75; font-weight: 600; }
.fee-card__free { margin: 0; background: rgba(198, 244, 50, .15); border-radius: 10px; padding: 8px 12px; display: inline-block; }

.join-card { padding: 34px; }
@media (max-width: 520px) { .join-card { padding: 22px; } }
.stepper { margin-bottom: 24px; }
.stepper__bar { height: 6px; border-radius: 99px; background: var(--tint); overflow: hidden; }
.stepper__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--violet)); transition: width .5s var(--ease); }
.stepper__labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.stepper__labels .is-active { color: var(--ink); }

.join-step { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; min-width: 0; }
.js .join-form[data-step="1"] [data-panel="2"], .js .join-form[data-step="2"] [data-panel="1"] { display: none; }
.js .join-step { animation: step-in .45s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(16px); } }
.form [aria-invalid="true"] { border-color: #E03131; background: #FFF8F8; }
.field-error { color: #C92A2A; font-size: .82rem; font-weight: 600; }
.field { display: grid; gap: 8px; }
.field__label { font-weight: 700; font-size: .9rem; }

.committee-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; border-radius: 14px; }
.committee-picks.is-invalid { outline: 2px solid #E03131; outline-offset: 4px; }
.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pick { --cat: var(--violet); position: relative; cursor: pointer; display: block !important; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick__box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border: 2px solid var(--line); border-radius: 14px; font-weight: 800; background: #fff; transition: all .2s var(--ease); text-align: center; }
.pick__icon { font-size: 1.8rem; transition: transform .3s var(--ease); }
.pick:hover .pick__box { border-color: var(--cat); }
.pick input:checked + .pick__box { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 10%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 25%, transparent); }
.pick input:checked + .pick__box .pick__icon { transform: scale(1.2) rotate(-8deg); }
.pick input:checked + .pick__box::after { content: '✓'; position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--cat); color: #fff; font-size: .75rem; display: grid; place-items: center; }
.pick input:disabled + .pick__box { opacity: .45; cursor: not-allowed; }
.pick input:focus-visible + .pick__box { outline: 3px solid var(--violet); outline-offset: 2px; }

.fee-box { background: var(--tint); border-radius: var(--radius); padding: 22px; }
.fee-box h3 { font-size: 1.2rem; }
.fee-box p { margin: 0 0 .6em; color: var(--ink-2); }
.fee-box__you { font-weight: 800; padding: 10px 14px; border-radius: 10px; background: #fff; margin: 12px 0 0 !important; }
.fee-box__you.is-free { background: #F3FDD6; color: #3D5200; }
.check-line { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 600 !important; padding: 14px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; }
.check-line.is-invalid { border-color: #E03131; }
.check-line input { width: 22px !important; height: 22px; flex-shrink: 0; accent-color: var(--primary); margin-top: 2px; }
.check-line a { color: var(--violet); }
.join-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.join-done { text-align: center; padding: 20px 0; }
.join-done__icon { font-size: 4rem; animation: pop .6s var(--ease); }
@keyframes pop { from { transform: scale(0) rotate(-30deg); } }
.join-done p { color: var(--muted); }
.fee-note { background: var(--tint); border-radius: 12px; padding: 14px; color: var(--ink) !important; }
.fee-note--free { background: #F3FDD6; }
.join-done__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---------- Custom forms (form.php) ---------- */
.form-page { max-width: 760px; }
.alert--info { background: #EFEBFF; color: var(--ink); }
.req { color: var(--primary); }
.dyn-form em { display: block; font-weight: 500; font-size: .8rem; color: var(--muted); margin-top: 1px; }
.form-heading { padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.form-heading h3 { font-size: 1.25rem; margin: 10px 0 2px; }
.form-heading p { margin: 0; }
.choice-group { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choice-group legend { font-weight: 700; font-size: .9rem; margin-bottom: 8px; padding: 0; }
.choice-group.is-invalid .choice { border-color: #E03131; }
.choice { display: flex !important; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 600 !important; transition: border-color .2s, background .2s; }
.choice:hover { border-color: var(--violet); }
.choice:has(input:checked) { border-color: var(--violet); background: #F7F5FF; }
.choice input { width: 20px !important; height: 20px; margin: 0 !important; accent-color: var(--violet); flex-shrink: 0; }

/* ---------- Announcements ---------- */
.nav__menu { gap: 24px; }
@media (min-width: 861px) and (max-width: 1060px) { .nav__menu { gap: 16px; font-size: .92rem; } }
.page-hero--ann { --cat: #12B886; }
.section--ann { padding-bottom: 20px; }
.ann-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
@media (max-width: 960px) { .ann-layout { grid-template-columns: 1fr; } .ann-side { order: -1; } }
.ann-feed { display: grid; gap: 18px; }
.ann-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }

.ann-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ann-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ann-card.is-pinned { border-color: #FFC9B8; box-shadow: 0 0 0 3px rgba(255, 90, 54, .1); }
.ann-feed .ann-card.has-image { flex-direction: row; }
.ann-feed .ann-card.has-image .ann-card__media { flex: 0 0 38%; aspect-ratio: auto; }
@media (max-width: 640px) { .ann-feed .ann-card.has-image { flex-direction: column; } .ann-feed .ann-card.has-image .ann-card__media { aspect-ratio: 16 / 9; } }
.ann-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); }
.ann-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ann-card:hover .ann-card__media img { transform: scale(1.05); }
.ann-card__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ann-card__meta { display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.ann-card__emoji { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--tint); font-size: 1.3rem; }
.ann-card__pin { color: var(--primary); }
.ann-card h3 { font-size: 1.25rem; margin: 0; }
.ann-card h3 a { text-decoration: none; }
.ann-card h3 a:hover { color: var(--violet); }
.ann-card p, .ann-card__text { color: var(--ink-2); margin: 0; }
.ann-card__text p:last-child { margin-bottom: 0; }
.ann-card__actions { display: flex; gap: 14px; align-items: center; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }

.ann-side { position: sticky; top: 96px; display: grid; gap: 16px; }
@media (max-width: 960px) { .ann-side { position: static; } }
.ann-side__title { font-size: 1.2rem; margin: 0; }
.ann-side__cta { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 20px; }
.ann-side__cta p { opacity: .75; margin: 4px 0 12px; font-size: .92rem; }

.form-promo-list { display: grid; gap: 12px; }
.form-promo-list--row { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-bottom: 20px; }
.form-promo { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); text-decoration: none; color: var(--ink);
  background: linear-gradient(135deg, #FFF4EE, #F3EFFF); border: 1.5px solid #EDE6FF; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.form-promo:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: var(--shadow); }
.form-promo__icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: #fff; box-shadow: 0 4px 10px -6px rgba(14, 11, 43, .3); }
.form-promo__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.form-promo__tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #0CA678; }
.form-promo__text strong { font-size: 1.02rem; line-height: 1.25; }
.form-promo__text small { color: var(--muted); font-size: .85rem; }
.form-promo__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.form-promo__meta:empty { display: none; }
.form-promo__go { font-size: 1.3rem; font-weight: 800; color: var(--violet); transition: transform .25s; }
.form-promo:hover .form-promo__go { transform: translateX(4px); }

.ann-single { max-width: 760px; }
.ann-single__img { width: 100%; border-radius: var(--radius-lg); margin-bottom: 26px; max-height: 480px; object-fit: cover; }

/* ---------- Discover Deryneia ---------- */
.discover-hero { position: relative; background: var(--ink); color: #fff; padding: 80px 0 60px; overflow: hidden; isolation: isolate; }
.discover-hero__mosaic { position: absolute; inset: -10%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; transform: rotate(-6deg); opacity: .22; z-index: -1; }
.discover-hero__mosaic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; filter: grayscale(.4); }
.discover-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 11, 43, .55), var(--ink) 92%); }
.discover-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.045em; margin: 10px 0 12px; }
.discover-hero .eyebrow { color: var(--lime); }
.discover-hero .section__lead { color: rgba(255, 255, 255, .8); max-width: 56ch; }
.discover-search { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.discover-search input { flex: 1; min-width: 240px; max-width: 520px; font: inherit; font-size: 1.05rem; padding: 15px 20px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); color: #fff; }
.discover-search input::placeholder { color: rgba(255, 255, 255, .6); }
.discover-search input:focus { outline: none; border-color: var(--lime); background: rgba(255, 255, 255, .15); }
.discover-search__count { opacity: .75; font-weight: 600; }

.letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; position: sticky; top: 72px; z-index: 5; background: rgba(255, 252, 247, .94); backdrop-filter: blur(8px); padding: 10px 0; }
.letter { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 800; color: var(--ink); transition: all .15s; }
.letter:hover:not(:disabled) { border-color: var(--ink); }
.letter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.letter:disabled { opacity: .3; cursor: default; }

.street-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.street-grid--small { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.street-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; text-decoration: none; background: linear-gradient(135deg, #2B1F6B, var(--ink)); box-shadow: 0 6px 18px -12px rgba(14, 11, 43, .5); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.street-card[hidden] { display: none; }
.street-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.street-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; }
.street-card:hover img { transform: scale(1.07); filter: brightness(.55); }
.street-card__noimg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; opacity: .5; }
/* Blue-and-white Greek street-sign look */
.street-card__sign, .street-sign { display: inline-flex; flex-direction: column; background: #fff; color: #0D47A1; border: 3px solid #0D47A1; border-radius: 6px; box-shadow: 0 0 0 3px #fff, 0 8px 18px -6px rgba(0, 0, 0, .45); font-weight: 800; line-height: 1.1; }
.street-card__sign { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 5px 10px; font-size: .95rem; transition: transform .35s var(--ease); }
.street-card__sign small, .street-sign small { font-size: .6rem; letter-spacing: .25em; opacity: .75; }
.street-card__peek { position: absolute; left: 12px; right: 12px; top: 12px; color: #fff; font-size: .86rem; line-height: 1.4; opacity: 0; transform: translateY(-8px); transition: all .35s var(--ease); }
.street-card:hover .street-card__peek, .street-card:focus-visible .street-card__peek { opacity: 1; transform: none; }
@media (hover: none) { .street-card__peek { display: none; } }

.street-hero { position: relative; color: #fff; background: linear-gradient(135deg, #2B1F6B, var(--ink)); overflow: hidden; isolation: isolate; }
.street-hero--noimg { min-height: 320px; display: flex; align-items: flex-end; }
/* Blurred, darkened copy of the photo behind it, so any shape (portrait, square, wide) looks intentional */
.street-hero__backdrop { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center; filter: blur(28px) saturate(1.2) brightness(.45); transform: scale(1.1); }
.street-hero__photo { display: flex; justify-content: center; padding-top: 32px; }
.street-hero__photo a { display: block; line-height: 0; border-radius: var(--radius); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .7); overflow: hidden; cursor: zoom-in; }
.street-hero__img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(68vh, 640px); object-fit: contain; }
.street-hero__inner { position: relative; padding-top: 22px; padding-bottom: 34px; }
.street-hero__photo + .street-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.street-hero__photo + .street-hero__inner .back { order: 2; margin: 16px 0 0; }
@media (max-width: 600px) { .street-hero__photo { padding: 16px 12px 0; } .street-hero__img { max-height: 60vh; } }
.street-sign { padding: 10px 22px 12px; }
.street-sign h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 3.4rem); letter-spacing: -.02em; }
.street-body { max-width: 760px; padding-top: 44px; }
.prose--street { font-size: 1.18rem; line-height: 1.75; }
.prose--street p:first-child::first-letter { float: left; font-size: 3.4em; line-height: .9; font-weight: 800; margin: 6px 10px 0 0; color: #0D47A1; }
.street-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 60px; }
.street-nav__link { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--radius); text-decoration: none; background: #fff; transition: border-color .2s, transform .2s; }
.street-nav__link:hover { border-color: #0D47A1; transform: translateY(-2px); }
.street-nav__link small { color: var(--muted); font-weight: 700; }
.street-nav__link strong { color: #0D47A1; }
.street-nav__link--next { text-align: right; }

/* Homepage "Our actions" feature */
.action-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 30px; border-radius: var(--radius-lg); text-decoration: none; background: linear-gradient(135deg, #E8F1FF, #F3EFFF); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.action-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
@media (max-width: 860px) { .action-feature { grid-template-columns: 1fr; padding: 20px; } }
.action-feature__pics { position: relative; height: 320px; }
.action-feature__pic { position: absolute; width: 46%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 4px solid #fff; box-shadow: var(--shadow); transition: transform .5s var(--ease); }
.action-feature__pic img { width: 100%; height: 100%; object-fit: cover; }
.action-feature__pic em { position: absolute; left: 6px; bottom: 6px; background: #fff; color: #0D47A1; border: 2px solid #0D47A1; border-radius: 4px; padding: 1px 6px; font-style: normal; font-weight: 800; font-size: .72rem; }
.action-feature__pic--0 { left: 0; top: 6%; transform: rotate(-6deg); z-index: 2; }
.action-feature__pic--1 { left: 28%; top: 0; transform: rotate(4deg); z-index: 3; }
.action-feature__pic--2 { right: 0; top: 14%; transform: rotate(-3deg); z-index: 2; }
.action-feature__pic--3 { left: 10%; bottom: 0; transform: rotate(5deg); z-index: 4; }
.action-feature__pic--4 { right: 6%; bottom: 2%; transform: rotate(-5deg); z-index: 3; }
.action-feature:hover .action-feature__pic--0 { transform: rotate(-9deg) translate(-6px, -4px); }
.action-feature:hover .action-feature__pic--2 { transform: rotate(0) translate(6px, -6px); }
.action-feature:hover .action-feature__pic--3 { transform: rotate(8deg) translateY(4px); }
.action-feature__text h3 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 12px 0 10px; color: #0D47A1; }
.action-feature__text p { color: var(--ink-2); font-size: 1.08rem; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}