/* Sanctuar — design layer stylesheet.
   Converted from the Claude Design artboards in ___lucru/new design/.
   Dark only by design decision: the palette is the design, not a theme of it. */

/* ---------------------------------------------------------------- tokens */
:root{
    color-scheme: dark;

    --bg:         #0d0a07;  /* page ground */
    --bg-band:    #100c08;  /* raised band / card on ground */
    --bg-panel:   #14100b;  /* inputs, dropdowns, image wells */
    --bg-card:    #110d09;  /* bordered feature card */
    --bg-deep:    #0a0805;  /* deep band */
    --bg-foot:    #080604;  /* footer */

    --ink:        #e9e2d4;  /* body */
    --ink-bright: #f0e9da;  /* headings */
    --ink-2:      #d8cfba;
    --ink-3:      #cfc6b2;
    --ink-4:      #a99f8c;
    --ink-5:      #8b8270;
    /* The three dimmest inks carry real text (kickers, field hints, the footer's legal line), so
       each clears WCAG AA 4.5:1 on every ground above, the lightest (#14100b) included. They were
       #7d7462 / #7d735f / #6f6858 (3.4–4.4:1); the lift is a few percent of lightness. */
    --ink-6:      #877d6a;
    --ink-7:      #867c68;
    --ink-8:      #857b69;

    --gold:        #e5ba00;
    --gold-bright: #ffcf1a;
    --gold-hover:  #f6d34d;

    --line:        rgba(229,186,0,.18);
    --line-soft:   rgba(229,186,0,.14);
    --line-faint:  rgba(229,186,0,.10);
    --line-mid:    rgba(229,186,0,.20);
    --line-strong: rgba(229,186,0,.25);
    --line-input:  rgba(229,186,0,.30);
    --line-hair:   rgba(229,186,0,.08);
    --line-half:   rgba(229,186,0,.50);

    --serif: 'Cinzel', Georgia, 'Times New Roman', serif;
    --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --shell: 1320px;
    --gut:   clamp(16px, 4vw, 40px);
    --head-h: 76px;
    /* The shape of an event poster: the 1200x628 event cover nearly every Sanctuar poster is made
       in. Frames that must line up (grid cards, the calendar stage) use it, and show the poster
       inside with object-fit: contain — a poster in another shape gets a margin, never a crop. */
    --poster-ratio: 1200 / 628;

    --shadow-drop:  0 18px 40px rgba(0,0,0,.55);
    --shadow-lift:  0 24px 60px rgba(0,0,0,.50);
    --glow-text:    0 1px 3px rgba(13,10,7,.85), 0 0 16px rgba(13,10,7,.6);
    --glow-head:    0 2px 6px rgba(13,10,7,.7), 0 0 28px rgba(13,10,7,.55);
}

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

html{ scroll-behavior: smooth; }

body{
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a{ color: var(--gold); text-decoration: none; transition: color .25s ease; }
a:hover{ color: var(--gold-hover); }

img{ max-width: 100%; }

::selection{ background: var(--gold); color: var(--bg); }

summary::-webkit-details-marker{ display: none; }
summary{ list-style: none; }

:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.sr-only{
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- layout */
.shell{ max-width: var(--shell); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.shell-narrow{ max-width: 1080px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

.band{ border-top: 1px solid var(--line-soft); }
.band-deep{ background: var(--bg-deep); }
.band-raised{ background: var(--bg-band); }
.band-edged{ border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.pad-section{ padding-block: clamp(48px, 7vw, 88px); }
.pad-section-sm{ padding-block: clamp(40px, 5.5vw, 76px); }

main{ position: relative; z-index: 1; }

/* ----------------------------------------------------------- typography */
.kicker{
    font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
    color: var(--gold-bright);
}
.kicker-gold{ color: var(--gold); }
.kicker-sm{ font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.kicker-xs{ font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-7); }

.h-display{
    margin: 0;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(30px, 4.6vw, 54px); line-height: 1.12;
    color: var(--ink-bright);
    text-shadow: var(--glow-head);
}
.h-page{
    margin: 0;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(32px, 5.4vw, 62px); line-height: 1.12;
    color: var(--ink-bright);
}
.h-section{
    margin: 0;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(24px, 3vw, 34px); line-height: 1.2;
    color: var(--ink-bright);
}
.h-section-lg{
    margin: 0;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(26px, 3.6vw, 42px); line-height: 1.15;
    color: var(--ink-bright);
}
.h-block{
    margin: 0;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(21px, 2.4vw, 28px); line-height: 1.3;
    color: var(--ink-bright);
}
.h-card{
    margin: 0;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(18px, 1.9vw, 22px); line-height: 1.35;
    color: var(--ink-bright);
}
.h-mini{
    font-family: var(--serif); font-size: 15px; color: var(--ink-bright);
}

.h-display em, .h-page em, .h-section em, .h-section-lg em, .h-block em{
    font-style: italic; color: var(--gold);
}

.lede{
    margin: 0;
    font-size: clamp(14px, 1.5vw, 17px); line-height: 1.8;
    color: var(--ink-4); font-weight: 300;
}
.lede-center{ margin-inline: auto; max-width: 620px; text-align: center; }

.prose{ font-size: 16px; line-height: 1.75; color: var(--ink-3); font-weight: 300; }
.prose p{ margin: 0 0 14px; }
.prose p:last-child{ margin-bottom: 0; }
.prose strong, .prose b{ color: var(--ink-bright); font-weight: 500; }
.prose h3{
    margin: 26px 0 10px;
    font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 2vw, 23px);
    line-height: 1.3; color: var(--ink-bright);
}
.prose blockquote{
    margin: 18px 0; padding: 14px 18px;
    border-left: 2px solid var(--gold); background: rgba(229,186,0,.04);
    color: var(--ink-2); font-style: italic;
}
.prose ul, .prose ol{ margin: 0 0 14px; padding-left: 22px; }
.prose li{ margin-bottom: 7px; }
.prose img{ display: block; height: auto; margin: 22px 0; border: 1px solid var(--line-mid); }
.prose .note{ color: var(--ink-5); font-size: 14.5px; }
.prose-glow{ text-shadow: var(--glow-text); }

.text-dim{ color: var(--ink-5); }
.text-muted{ color: var(--ink-4); }

/* ------------------------------------------------------------- buttons */
.btn{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 30px;
    border: 1px solid var(--gold); background: none; color: var(--gold);
    font-family: var(--sans); font-size: 13px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease;
}
.btn:hover{ background: var(--gold); color: var(--bg); }

.btn-solid{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 34px;
    border: none; background: var(--gold); color: var(--bg);
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    letter-spacing: .20em; text-transform: uppercase;
    cursor: pointer; transition: background .3s ease, transform .3s ease;
}
.btn-solid:hover{ background: var(--gold-hover); color: var(--bg); transform: translateY(-2px); }

.btn-ghost{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 24px;
    border: 1px solid var(--line-half); background: none; color: var(--gold);
    font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    transition: background .3s ease, color .3s ease;
}
.btn-ghost:hover{ background: rgba(229,186,0,.1); color: var(--gold-hover); }

.btn-row{ display: flex; flex-wrap: wrap; gap: 14px; }

.link-rule{
    font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    border-bottom: 1px solid var(--line-half); padding-bottom: 2px;
}
.link-more{
    font-size: 11.5px; letter-spacing: .20em; text-transform: uppercase; color: var(--gold);
}

/* ------------------------------------------------------- page loader */
.loader{
    position: fixed; inset: 0; z-index: 1000;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .7s ease;
}
.loader img{
    width: 110px; height: 110px;
    filter: drop-shadow(0 0 10px rgba(217,186,129,.35));
    animation: loaderPulse 1.6s ease-in-out infinite;
}
.loader.is-fading{ opacity: 0; }
.loader.is-gone{ display: none; }

@keyframes loaderPulse{
    0%{ transform: scale(.92); opacity: .55; filter: drop-shadow(0 0 6px rgba(217,186,129,.25)); }
    50%{ transform: scale(1.04); opacity: 1; filter: drop-shadow(0 0 18px rgba(217,186,129,.55)); }
    100%{ transform: scale(.92); opacity: .55; filter: drop-shadow(0 0 6px rgba(217,186,129,.25)); }
}

/* ----------------------------------------------------------- hero goo */
.hero-goo{
    position: absolute; top: 0; left: 0; width: 100%; height: 115vh;
    z-index: 0; pointer-events: none; overflow: hidden;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.hero-goo canvas{
    width: 100%; height: 100%; display: block;
    filter: blur(14px) saturate(1.08);
    transform: scale(1.06); transform-origin: center;
}

/* -------------------------------------------------------------- header */
.site-header{
    position: sticky; top: 0; z-index: 900;
    background: rgba(13,10,7,.82);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner{
    max-width: var(--shell); margin: 0 auto;
    padding-inline: var(--gut);
    height: var(--head-h);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header__brand{ display: flex; align-items: center; flex-shrink: 0; }
.site-header__brand img{ height: 40px; width: auto; display: block; }

.nav{
    display: none; align-items: center;
    gap: clamp(2px, .65vw, 10px);
    font-size: 14px; letter-spacing: .10em; text-transform: uppercase;
}
/* The row is capped by --shell, so the links have to be trimmed to fit it:
   without this the only two-word label ("Despre BDSM") is shrunk past its
   text width and breaks onto a second line. nowrap makes that impossible. */
.nav__link{
    color: var(--ink); padding: 8px clamp(8px, .8vw, 12px);
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(229,186,0,0);
    transition: color .25s ease, box-shadow .35s cubic-bezier(.2,.7,.2,1),
                background .35s ease, letter-spacing .35s ease;
}
.nav__link:hover, .nav__link:focus-visible, .nav__item:hover > .nav__link{
    color: var(--gold-bright);
    box-shadow: inset 0 0 0 1px rgba(255,207,26,.45), 0 0 14px rgba(229,186,0,.10);
    background: rgba(229,186,0,.05);
    letter-spacing: .13em;
}
.nav__link--serif{ font-style: italic; font-family: var(--serif); }
.nav__link--parent{ display: inline-flex; align-items: center; gap: 6px; }
.nav__caret{ font-size: 9px; color: var(--gold); }
.nav__link:hover .nav__caret{ color: var(--gold-bright); }

.nav__item{ position: relative; }
.nav__panel{
    position: absolute; top: 100%; left: -16px;
    padding-top: 14px; min-width: 260px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.nav__panel--wide{ min-width: 300px; }
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel{ opacity: 1; visibility: visible; pointer-events: auto; }
.nav__panel-inner{
    display: flex; flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-drop);
    padding: 10px 0;
}
.nav__sub{ color: var(--ink-3); padding: 10px 20px; }
.nav__sub:hover{ color: var(--gold-bright); background: rgba(229,186,0,.06); }

.site-header__cta{ display: none; flex-shrink: 0; }
.site-header__cta.btn{ padding: 11px 22px; }

.burger{
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 10px;
}
.burger span{ width: 24px; height: 2px; background: var(--gold); display: block; }

/* 1280px, not 1080: below it the brand + nav + CTA cannot fit on one row
   at all, and the header silently overflowed (clipped by body overflow-x). */
@media (min-width: 1280px){
    .nav{ display: flex; }
    .site-header__cta{ display: inline-flex; }
    .burger{ display: none; }
}

/* --------------------------------------------------------- mobile menu */
.mobile-menu{
    position: fixed; top: var(--head-h); left: 0; right: 0; bottom: 0;
    z-index: 880; background: #100c08;
    border-top: 1px solid rgba(229,186,0,.15);
    display: none; flex-direction: column;
}
.mobile-menu.is-open{ display: flex; }
.mobile-menu__scroll{
    flex: 1; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 8px clamp(16px, 5vw, 32px) 24px;
    display: flex; flex-direction: column;
    font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
}
.mobile-menu__link{
    color: var(--ink); padding: 14px 0;
    border-bottom: 1px solid var(--line-hair);
}
.mobile-menu__link--serif{ font-style: italic; font-family: var(--serif); }
.mobile-menu__toggle{
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; border-bottom: 1px solid var(--line-hair);
    color: var(--ink); font: inherit; letter-spacing: .1em; text-transform: uppercase;
    padding: 14px 0; cursor: pointer; text-align: left;
}
.mobile-menu__caret{
    font-size: 11px; color: var(--gold-bright); display: inline-block;
    transition: transform .3s ease;
}
.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__caret{ transform: rotate(180deg); }
.mobile-menu__sub{
    display: none; flex-direction: column;
    padding: 4px 0 10px; border-bottom: 1px solid var(--line-hair);
}
.mobile-menu__sub.is-open{ display: flex; }
.mobile-menu__sub a{
    color: var(--ink-4); padding: 11px 0 11px 18px;
    font-size: 14px; letter-spacing: .08em;
}
.mobile-menu__foot{
    flex: 0 0 auto;
    padding: 14px clamp(16px, 5vw, 32px) calc(14px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line);
}
.mobile-menu__foot .btn{ display: block; width: 100%; padding: 15px 22px; font-size: 14px; }

body.is-locked{ overflow: hidden; }

/* ------------------------------------------------------ banner (20%) */
.banner{
    position: relative; z-index: 1;
    background: linear-gradient(90deg, rgba(13,10,7,.86), rgba(13,10,7,.80));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-mid);
}
.banner__inner{
    max-width: var(--shell); margin: 0 auto;
    padding: 14px var(--gut);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px 22px; text-align: center;
}
.banner__lead{
    font-family: var(--serif); font-size: 15px; color: var(--gold-bright);
    letter-spacing: .04em;
    text-shadow: 0 1px 2px rgba(13,10,7,.55), 0 0 10px rgba(13,10,7,.45);
}
.banner__text{ font-size: 14px; color: #cfc4ad; text-shadow: 0 1px 2px rgba(13,10,7,.6); }
.banner__link{
    font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    border-bottom: 1px solid var(--line-half); padding-bottom: 2px;
    color: var(--gold-bright);
    text-shadow: 0 1px 2px rgba(13,10,7,.55), 0 0 10px rgba(13,10,7,.45);
}

/* ---------------------------------------------------------- event block */
.events-head{ margin-bottom: clamp(36px, 5vw, 64px); }
.events-head .kicker{ margin-bottom: 14px; text-shadow: 0 1px 2px rgba(13,10,7,.92), 0 0 8px rgba(13,10,7,.85); }

.event{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    padding-bottom: clamp(48px, 6vw, 80px);
}
.event + .event{ border-top: 1px solid var(--line-soft); padding-top: clamp(48px, 6vw, 80px); }

.event__aside{ display: flex; flex-direction: column; gap: 18px; align-self: start; }
/* height:auto because the <img> carries the poster's real width/height, which reserve its space
   before it arrives — without it the height attribute would win and stretch the poster. */
.event__poster{
    width: 100%; height: auto; display: block; cursor: zoom-in;
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-lift);
}
.event__sticky-head{
    max-height: 0; opacity: 0; overflow: hidden; margin-bottom: -18px;
    transition: max-height .4s ease, opacity .3s ease, margin-bottom .4s ease;
}
.event__sticky-head > div{ padding-bottom: 4px; }
.event__sticky-head.is-on{ max-height: 200px; opacity: 1; margin-bottom: 0; }
.event__sticky-head .h-block{ font-size: clamp(19px, 2vw, 24px); }

.event__body{
    font-size: 16px; line-height: 1.75; color: var(--ink-3); font-weight: 300;
    text-shadow: var(--glow-text);
}
.event__body .h-block{ margin-bottom: 6px; text-shadow: var(--glow-text); }
.event__sub{
    font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 18px; text-shadow: var(--glow-text);
}
.event__body p{ margin: 0 0 14px; }
.event__body p:first-of-type{ color: var(--ink); }
/* The calendar modal renders the same two description fields inside `.prose`, which already styles
   the whole vocabulary. Kept deliberately identical here so one description cannot look like two
   different things depending on which surface it is read on. */
.event__body strong, .event__body b{ color: var(--ink-bright); font-weight: 500; }
.event__body h3{
    margin: 24px 0 10px;
    font-family: var(--serif); font-weight: 500; font-size: clamp(17px, 1.8vw, 21px);
    line-height: 1.3; color: var(--ink-bright);
}
.event__body h3:first-child{ margin-top: 0; }
.event__body ul, .event__body ol{ margin: 0 0 14px; padding-left: 22px; }
.event__body li{ margin-bottom: 7px; }
.event__body blockquote{
    margin: 18px 0; padding: 14px 18px;
    border-left: 2px solid var(--gold); background: rgba(229,186,0,.04);
    color: var(--ink-2); font-style: italic;
}
.event__body > *:last-child{ margin-bottom: 0; }
.event__more summary{
    cursor: pointer; color: var(--gold);
    font-size: 14px; letter-spacing: .08em; padding: 6px 0;
}
.event__more summary:hover{ color: var(--gold-hover); }
.event__more > *:first-child + *{ margin-top: 14px; }

/* teaser card (contact page) */
.event-card{
    border: 1px solid var(--line-mid); background: var(--bg-band);
    display: flex; gap: clamp(14px, 1.8vw, 22px);
    padding: clamp(14px, 1.6vw, 18px);
    color: inherit; align-items: center;
    transition: border-color .4s ease;
}
.event-card:hover{ border-color: rgba(229,186,0,.45); }
.event-card:hover .h-card{ color: var(--gold-bright); }
/* The whole poster, never a crop: its date, hour and address are printed on it. */
.event-card img{
    flex: 0 0 auto; width: clamp(150px, 22vw, 300px); height: auto;
    aspect-ratio: var(--poster-ratio); object-fit: contain; display: block;
    background: var(--bg-panel);
    border: 1px solid var(--line-mid);
}
/* Side by side, a phone would leave the poster too small to read; stacked, it gets the full width. */
@media (max-width: 560px){
    .event-card{ flex-direction: column; align-items: stretch; }
    .event-card img{ width: 100%; }
}
.event-card__text{ min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.event-card__text .h-card{ font-size: clamp(15px, 1.6vw, 19px); transition: color .3s ease; }
.event-card__go{
    font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-5);
}
.event-grid{ display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(16px, 2vw, 26px); }
@media (min-width: 900px){ .event-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* international event card */
.event-intl{ display: flex; flex-direction: column; animation: riseIn .7s ease both; }
/* Other organisers' posters come in every shape — portrait, square, landscape — so the frame is
   square (the fairest compromise between them) and the poster sits whole inside it. No hover zoom:
   growing the image inside an overflow:hidden frame cuts its edges, which is where the dates are. */
.event-intl__frame{
    position: relative; overflow: hidden; aspect-ratio: 1 / 1;
    background: var(--bg-band); border: 1px solid var(--line);
}
.event-intl__frame img{
    width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in;
    filter: saturate(.92);
    transition: filter .5s ease;
}
.event-intl__frame img:hover{ filter: saturate(1.05); }
.event-intl__text{ padding: 20px 2px 0; }
.event-intl__text .h-card{ margin-bottom: 14px; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.25; }
.event-intl__facts{
    display: grid; grid-template-columns: 74px minmax(0, 1fr);
    gap: 6px 12px; font-size: 14px; line-height: 1.6; font-weight: 300;
}
.event-intl__facts dt, .event-intl__facts .k{ color: var(--ink-7); letter-spacing: .08em; margin: 0; }
.event-intl__facts dd, .event-intl__facts .v{ color: var(--ink-2); margin: 0; }

.grid-intl{ display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(20px, 2.6vw, 38px); }
@media (min-width: 640px){ .grid-intl{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px){ .grid-intl{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

@keyframes riseIn{ from{ opacity: 0; transform: translateY(24px); } to{ opacity: 1; transform: none; } }

/* -------------------------------------------------------- reveal on scroll
   The hidden state is applied by JS (.is-armed), never by this stylesheet. If the script fails
   to load, or an observer is unavailable, every section stays visible — hiding content in CSS
   and relying on JS to reveal it would turn one failed request into a blank page. */
[data-reveal]{ opacity: 1; transform: none; }
[data-reveal].is-armed{
    opacity: 0; transform: translateY(26px);
    transition: opacity .85s ease, transform .85s cubic-bezier(.22,1,.36,1);
}
[data-reveal].is-armed.is-in{ opacity: 1; transform: none; }

/* ------------------------------------------------------- marquee gallery */
.marquee{ overflow: hidden; }
.marquee__track{
    display: flex; gap: 16px; width: max-content;
    animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
.marquee__track img{
    height: clamp(160px, 24vw, 260px); width: auto; display: block;
    border: 1px solid var(--line);
}
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
    .marquee__track{ animation: none; }
    .loader img{ animation: none; }
    .event-intl{ animation: none; }
}

/* -------------------------------------------------------- feature cards */
.feature-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(24px, 4vw, 48px);
}
.feature{
    border: 1px solid rgba(229,186,0,.22); background: var(--bg-card);
    padding: clamp(28px, 4vw, 48px);
    display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.feature .btn{ margin-top: auto; }

/* list of plain rows (play-uri) */
.row-list{ display: flex; flex-direction: column; gap: 14px; }
.row-item{
    border: 1px solid var(--line-soft); background: var(--bg-band);
    padding: 16px 20px; font-size: 15px; line-height: 1.7;
    color: var(--ink-3); font-weight: 300;
}
.row-item strong{ color: var(--ink-bright); font-weight: 500; }

/* ------------------------------------------------------- article cards */
.grid-posts{ display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(20px, 2.6vw, 36px); }
@media (min-width: 620px){ .grid-posts{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px){ .grid-posts{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.post-card{
    border: 1px solid var(--line-mid); background: var(--bg);
    display: flex; flex-direction: column; color: inherit;
    transition: border-color .4s ease;
}
.post-card:hover{ border-color: rgba(229,186,0,.45); }
.post-card:hover h2, .post-card:hover h3{ color: var(--gold-bright); }
.post-card__frame{ overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-panel); }
.post-card__frame img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.post-card:hover .post-card__frame img{ transform: scale(1.06); }
.post-card__body{
    padding: clamp(20px, 2.2vw, 30px);
    display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.post-card__meta{
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.post-card__meta .rule{ width: 18px; height: 1px; background: rgba(229,186,0,.4); }
.post-card__meta .date{ color: var(--ink-5); letter-spacing: .12em; }
.post-card__excerpt{ margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-4); font-weight: 300; }
.post-card__foot{
    margin-top: auto; padding-top: 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-top: 1px solid var(--line-faint);
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
.post-card__foot .time{ color: var(--ink-8); }
.post-card__foot .go{ color: var(--gold); }

/* -------------------------------------------------------- article detail */
.article-head{ text-align: center; }
.article-head__meta{
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
    margin-bottom: 18px;
}
.article-head__meta .date{ color: var(--ink-5); letter-spacing: .12em; }
.article-cover{
    display: block; width: 100%; height: auto;
    border: 1px solid var(--line-mid); margin-top: clamp(24px, 3vw, 40px);
}
.article-body{ max-width: 760px; margin-inline: auto; }
.article-tags{ display: flex; flex-wrap: wrap; gap: 10px; }
.article-tag{
    border: 1px solid var(--line-mid); padding: 6px 14px;
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4);
}
.article-tag:hover{ border-color: var(--gold); color: var(--gold); }
.article-source{
    border: 1px solid var(--line-mid); background: var(--bg-band);
    padding: 16px 20px; font-size: 14px; color: var(--ink-4);
}

/* --------------------------------------------------------------- slats */
.slats{ display: flex; width: 100%; overflow: hidden; }
.slat{
    flex: 1 1 0; min-width: 0; overflow: hidden; position: relative;
    background-size: cover; background-repeat: no-repeat;
}

/* ----------------------------------------------------------- timeline */
.timeline{ display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); }
.timeline__item{
    display: grid; grid-template-columns: minmax(0,1fr); gap: 10px 26px;
    padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line-soft);
}
.timeline__item:last-child{ border-bottom: none; padding-bottom: 0; }
.timeline__when{
    font-family: var(--serif); font-size: clamp(16px, 1.8vw, 20px);
    color: var(--gold); letter-spacing: .04em;
}
@media (min-width: 820px){
    .timeline__item{ grid-template-columns: 180px minmax(0,1fr); }
}

/* -------------------------------------------------------- glossary list */
.glossary-head{
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.6vw, 30px);
}
.glossary-count{
    font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-5);
}

/* Search + A-Z index stay pinned under the site header while the list scrolls.
   Its height is published by sanctuar.js as --glossary-bar-h, so the sticky
   letters and the anchor jumps land below it rather than behind it. */
.glossary-bar{
    position: sticky; top: var(--head-h); z-index: 20;
    background: var(--bg);
    padding-block: 14px;
    margin-bottom: clamp(16px, 2.2vw, 26px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.glossary-bar.is-stuck{
    border-bottom-color: var(--line);
    box-shadow: 0 14px 24px -18px rgba(0,0,0,.9);
}
.glossary-bar .alphabet{ margin-bottom: 0; }
@media (max-width: 759px){
    /* 26 letters wrap to four rows on a phone; one scrollable row keeps the bar short. */
    .glossary-bar .alphabet{
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .glossary-bar .alphabet::-webkit-scrollbar{ display: none; }
    .glossary-bar .alphabet a{ flex: 0 0 auto; }
}

.glossary-search{
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--line-input); background: var(--bg-panel);
    padding: 4px 4px 4px 16px; margin-bottom: 12px;
}
.glossary-search__mark{ color: var(--gold); font-size: 15px; flex: 0 0 auto; }
.glossary-search input{
    flex: 1; min-width: 0; background: none; border: none; outline: none;
    color: var(--ink); font-family: var(--sans); font-size: 15px; padding: 12px 0;
}
.glossary-search input::placeholder{ color: var(--ink-6); }
.glossary-search input::-webkit-search-cancel-button{ display: none; }
.glossary-search button{
    flex: 0 0 auto; background: none;
    border: 1px solid var(--line-mid); color: var(--ink-4);
    font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    padding: 10px 14px; cursor: pointer; transition: border-color .3s ease, color .3s ease;
}
.glossary-search button:hover{ border-color: var(--gold); color: var(--gold-bright); }
.glossary-search button[hidden]{ display: none; }

.alphabet{
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: clamp(24px, 3vw, 36px);
}
.alphabet a{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; padding: 7px 9px;
    border: 1px solid rgba(229,186,0,.24);
    font-size: 13px; letter-spacing: .08em; color: var(--gold);
    transition: border-color .3s ease, color .3s ease;
}
.alphabet a:hover{ border-color: var(--gold); color: var(--gold-bright); }
.alphabet a[aria-disabled="true"]{
    border-color: rgba(229,186,0,.06); color: #3a352c; pointer-events: none;
}

.glossary__group{
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 26px;
    margin-bottom: clamp(30px, 4vw, 48px);
    scroll-margin-top: calc(var(--head-h) + var(--glossary-bar-h, 0px) + 20px);
}
.glossary__group[hidden]{ display: none; }
@media (min-width: 760px){
    .glossary__group{ grid-template-columns: 110px minmax(0, 1fr); }
    .glossary__letter{ position: sticky; top: calc(var(--head-h) + var(--glossary-bar-h, 0px) + 24px); align-self: start; }
}
.glossary__letter{
    font-family: var(--serif); font-size: clamp(24px, 3vw, 34px);
    color: var(--gold); margin: 0;
}
.glossary__items{ display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.glossary__item{
    border: 1px solid var(--line-soft); background: var(--bg-band); padding: 18px 20px;
}
.glossary__item[hidden]{ display: none; }
.glossary__name{
    font-family: var(--serif); font-size: 16px; color: var(--ink-bright); margin: 0 0 7px;
}
.glossary__desc{ margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-4); font-weight: 300; }
.glossary-empty{
    border: 1px solid var(--line-soft); background: var(--bg-band);
    padding: clamp(24px, 3vw, 40px); text-align: center;
    color: var(--ink-5); font-weight: 300;
}
.glossary-empty[hidden]{ display: none; }

/* the SSC / RACK note strip */
.note-strip{ text-align: center; }
.note-strip__pair{
    display: flex; align-items: center; justify-content: center; gap: 18px;
    margin-bottom: 20px;
    font-family: var(--serif); font-size: clamp(16px, 2vw, 22px);
    letter-spacing: .2em; color: var(--gold);
}
.note-strip__pair .rule{ width: 48px; height: 1px; background: rgba(229,186,0,.4); }
.note-strip p{
    margin: 0 auto; max-width: 680px;
    font-size: 15px; line-height: 1.8; color: var(--ink-4); font-weight: 300;
}

/* ------------------------------------------------------- three columns */
.trio{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(20px, 2.6vw, 36px);
}
.trio__item{
    border: 1px solid var(--line-mid); background: var(--bg-band);
    padding: clamp(22px, 2.6vw, 32px);
}
.trio__item .h-card{ margin-bottom: 12px; }

/* ------------------------------------------------------------- carousel */
.carousel{ position: relative; overflow: hidden; }
.carousel__viewport{ display: flex; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.carousel__slide{ flex: 0 0 100%; min-width: 0; }
.carousel__slide img{ width: 100%; height: auto; display: block; }
/* Each dot is a 24px button (the WCAG minimum touch target) with the same 9px ring drawn in its
   middle, so the dots look as they did and are simply easier to hit. The margin keeps the row's
   outer edges where the 9px dots had them. */
.carousel__dots{ display: flex; justify-content: center; gap: 0; margin: 18px -7.5px 0; }
.carousel__dot{
    position: relative; width: 24px; height: 24px;
    border: 0; background: none; padding: 0; cursor: pointer;
}
.carousel__dot::before{
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
    border-radius: 50%; border: 1px solid var(--gold); box-sizing: border-box;
    transition: background .3s ease;
}
.carousel__dot.is-active::before{ background: var(--gold); }
.carousel__nav{
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(13,10,7,.7); border: 1px solid var(--line-mid); color: var(--gold);
    width: 44px; height: 44px; cursor: pointer; font-size: 18px; line-height: 1;
}
.carousel__nav--prev{ left: 10px; }
.carousel__nav--next{ right: 10px; }

/* -------------------------------------------------------------- forms */
.field{
    width: 100%; min-width: 0;
    background: var(--bg-panel); border: 1px solid var(--line-input);
    color: var(--ink); padding: 14px 16px;
    font-family: var(--sans); font-size: 15px; outline: none;
}
.field:focus{ border-color: var(--gold); }
.field::placeholder{ color: var(--ink-6); }
textarea.field{ resize: vertical; }
.field.is-error{ border-color: #c4553d; }

.form-stack{ display: flex; flex-direction: column; gap: 16px; }
.form-pair{ display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
@media (min-width: 640px){ .form-pair{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.form-captcha{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-captcha img{
    height: 48px; width: auto; display: block;
    border: 1px solid var(--line-input); background: var(--bg-panel);
}
.form-captcha button{
    background: none; border: none; color: var(--gold);
    font-family: var(--sans); font-size: 13px; letter-spacing: .08em; cursor: pointer;
}
.form-captcha button:hover{ color: var(--gold-hover); }

.form-note{ margin: 0; font-size: 13px; color: var(--ink-5); }
.form-msg{ margin: 0; font-size: 14px; }
.form-msg.is-error{ color: #e08b74; }
.form-msg.is-ok{ color: var(--gold); }
.form-msg[hidden]{ display: none; }

.form-done{
    border: 1px solid rgba(229,186,0,.4); padding: 20px 22px;
    font-size: 15px; color: var(--gold);
}

.contact-split{
    display: grid; grid-template-columns: minmax(0,1fr);
    gap: clamp(32px, 4vw, 64px); align-items: start;
}
@media (min-width: 860px){
    .contact-split{ grid-template-columns: minmax(0,1fr) minmax(0,1.6fr); }
}
.contact-facts{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(22px, 3vw, 40px);
}

/* -------------------------------------------------------------- footer */
.site-footer{ border-top: 1px solid var(--line); background: var(--bg-foot); }
.site-footer__inner{
    max-width: var(--shell); margin: 0 auto;
    padding: clamp(48px, 6vw, 72px) var(--gut) 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: clamp(28px, 4vw, 48px);
}
.site-footer__brand{ display: flex; flex-direction: column; gap: 14px; }
.site-footer__brand img{ height: 34px; width: auto; align-self: flex-start; }
/* logo and language picker share one row; the picker sits to the logo's right and is
   optically centred against it rather than baseline-aligned. */
.site-footer__brandtop{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-footer__brandtop img{ align-self: center; }

/* ------------------------------------------------------- language picker */
.langpick{ position: relative; }
.langpick > summary{
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--line-mid); background: var(--bg-band);
    color: var(--ink-3);
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    transition: border-color .3s ease, color .3s ease;
}
.langpick > summary::-webkit-details-marker{ display: none; }
.langpick > summary:hover{ border-color: rgba(229,186,0,.45); color: var(--gold); }
.langpick__btn img{ display: block; width: 18px; height: auto; }
.langpick__chev{ width: 11px; height: 11px; transition: transform .25s ease; }
.langpick[open] .langpick__chev{ transform: rotate(180deg); }

.langpick__menu{
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
    margin: 0; padding: 5px; list-style: none;
    min-width: 168px;
    border: 1px solid var(--line-mid); background: var(--bg-deep);
    box-shadow: var(--shadow-drop);
}
.langpick__item{
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    font-size: 14px; font-weight: 300; color: var(--ink-3);
    transition: background .25s ease, color .25s ease;
}
.langpick__item img{ display: block; width: 18px; height: auto; flex: 0 0 auto; }
.langpick__item:hover{ background: rgba(229,186,0,.08); color: var(--gold); }
.langpick__item.is-on{ color: var(--gold); }
/* The menu opens UPWARDS because this lives in the footer — at the very bottom of a long page
   a downward menu would open off-screen. Near the top of a short page there is room either way. */
@media (max-width: 640px){
    .langpick__menu{ bottom: auto; top: calc(100% + 6px); }
}
.site-footer__col-title{
    font-family: var(--serif); font-size: 15px; color: var(--ink-bright); margin-bottom: 14px;
}
.site-footer__col-title--tight{ margin-bottom: 6px; }
.site-footer__note{
    margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-4); font-weight: 300;
}
.site-footer__contact{ display: flex; flex-direction: column; gap: 18px; }
.site-footer__contact a{ font-size: 14px; color: var(--ink-3); }
.site-footer__contact a:hover{ color: var(--gold); }
.site-footer__rule{ border-top: 1px solid var(--line-faint); }
.site-footer__legal{
    max-width: var(--shell); margin: 0 auto;
    padding: 20px var(--gut);
    font-size: 13px; color: var(--ink-6);
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.site-footer__legal a{ color: var(--ink-4); }
.site-footer__legal a:hover{ color: var(--gold); }
/* Links inside the credit sentence need more than a colour to stand out from the words around
   them (WCAG 1.4.1), so they carry a quiet underline. */
.site-footer__credit a{
    text-decoration: underline; text-decoration-thickness: 1px;
    text-decoration-color: rgba(169,159,140,.5); text-underline-offset: 3px;
}
.site-footer__credit a:hover{ text-decoration-color: currentColor; }
.site-footer__tag{ letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }

.social{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 14px; font-size: 14px; }
.social a{ display: flex; align-items: center; gap: 9px; color: var(--ink-3); padding: 4px 0; }
.social a:hover{ color: var(--gold-bright); }
.social svg{ flex: 0 0 auto; }

.subscribe{ display: flex; gap: 0; }
.subscribe .field{ flex: 1; border-right: none; padding: 12px 14px; font-size: 14px; }
.subscribe button{
    background: var(--gold); color: var(--bg); border: none; padding: 12px 20px;
    font-family: var(--sans); font-size: 13px; letter-spacing: .12em;
    text-transform: uppercase; font-weight: 600; cursor: pointer;
    transition: background .3s ease;
}
.subscribe button:hover{ background: var(--gold-hover); }
.subscribe button[disabled]{ opacity: .6; cursor: default; }
.subscribe-done{
    border: 1px solid rgba(229,186,0,.4); padding: 14px 16px;
    font-size: 14px; color: var(--gold);
}

/* ------------------------------------------------------------ lightbox */
.lightbox{
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(6,4,3,.94);
    display: none; align-items: center; justify-content: center;
    padding: clamp(12px, 3vw, 40px);
}
.lightbox.is-open{ display: flex; }
.lightbox__stage{
    position: relative; max-width: 100%; max-height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.lightbox__stage img{ max-width: 100%; max-height: 86vh; display: block; }
.lightbox__close{
    position: absolute; top: clamp(8px, 2vw, 22px); right: clamp(8px, 2vw, 22px);
    background: none; border: 1px solid var(--line-mid); color: var(--gold);
    width: 44px; height: 44px; font-size: 20px; line-height: 1; cursor: pointer;
}
.lightbox__close:hover{ border-color: var(--gold); color: var(--gold-bright); }
.lightbox__caption{
    position: absolute; left: 0; right: 0; bottom: clamp(8px, 2vw, 20px);
    text-align: center; font-size: 13px; color: var(--ink-4);
}
.lightbox__facts{
    margin-top: 10px; font-size: 13px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gold);
}

/* ----------------------------------------------------------- pagination */
.pager{
    margin-top: clamp(32px, 4vw, 52px);
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
    font-size: 13px; letter-spacing: .1em;
}
.pager a, .pager span{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; padding: 9px 12px;
    border: 1px solid var(--line-mid); color: var(--ink-3);
}
.pager a:hover{ border-color: var(--gold); color: var(--gold-bright); }
.pager .is-current{ background: var(--gold); border-color: var(--gold); color: var(--bg); }

/* --------------------------------------------------------- empty state */
.empty{
    border: 1px solid var(--line-soft); background: var(--bg-band);
    padding: clamp(36px, 5vw, 64px); text-align: center;
    color: var(--ink-5); font-weight: 300;
}

/* ------------------------------------------------------------ accordion */
.accordion{ border: 1px solid rgba(229,186,0,.22); background: var(--bg-card); }
.accordion + .accordion{ margin-top: 14px; }
.accordion > summary{
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px clamp(18px, 3vw, 28px);
    font-family: var(--serif); font-size: 19px; color: var(--ink-bright);
    transition: color .25s ease;
}
.accordion > summary:hover{ color: var(--gold); }
.accordion__sign{ color: var(--gold); font-size: 14px; }
.accordion[open] .accordion__sign{ transform: rotate(45deg); }
.accordion__body{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 22px; align-items: start;
    padding: 0 clamp(18px, 3vw, 28px) 26px;
    font-size: 15px; line-height: 1.75; color: var(--ink-3); font-weight: 300;
}
.accordion__body p{ margin: 0 0 12px; }
.accordion__body p:last-child{ margin-bottom: 0; }
.accordion__body strong, .accordion__body .lead{ color: var(--ink-bright); }
.accordion__body img{
    width: 100%; max-width: 260px; height: auto; display: block;
    border: 1px solid var(--line-mid);
}

/* -------------------------------------------------------- stacked pairs */
.pair{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: clamp(24px, 4vw, 56px); align-items: start;
}
.pair--center{ align-items: center; }
.pair img{ width: 100%; height: auto; display: block; border: 1px solid var(--line-mid); }

/* the split CTA strip (Ai un articol interesant? / Contactează-ne) */
.cta-strip{
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: clamp(20px, 3vw, 48px);
}
.cta-strip__text{ flex: 1 1 420px; min-width: 0; }
.cta-strip__text .h-section{ margin-bottom: 12px; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.25; }
.cta-strip .btn{ flex: 0 0 auto; padding: 15px 30px; }

/* a head row with a title on the left and a small link on the right */
.head-row{
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: clamp(20px, 2.6vw, 32px);
}

/* boxed callout */
.callout{
    border: 1px solid var(--line-mid); background: var(--bg-band);
    padding: clamp(20px, 2.6vw, 30px);
    font-size: 15px; line-height: 1.75; color: var(--ink-4); font-weight: 300;
}
.callout p{ margin: 0 0 12px; }
.callout p:last-child{ margin-bottom: 0; }

/* definition rows: label left, value right */
.facts{
    display: grid; grid-template-columns: minmax(0,1fr); gap: 14px;
}
@media (min-width: 720px){ .facts{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.facts__item{ border-left: 2px solid var(--line-mid); padding-left: 16px; }
.facts__k{
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 6px;
}
.facts__v{ font-size: 15px; line-height: 1.7; color: var(--ink-4); font-weight: 300; }

/* ------------------------------------------------- article detail layout */
.article-top{
    max-width: 900px; margin: 0 auto;
    padding: clamp(34px, 5vw, 68px) var(--gut) clamp(22px, 3vw, 34px);
    text-align: center;
}
.article-back{
    display: inline-block; margin-bottom: 20px;
    font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-5);
}
.article-back:hover{ color: var(--gold-bright); }
.article-top .kicker{ letter-spacing: .3em; margin-bottom: 16px; }
.article-title{
    margin: 0 0 20px;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(26px, 3.8vw, 44px); line-height: 1.2;
    color: var(--ink-bright); text-wrap: pretty;
}
.article-byline{
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px 16px;
    font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-5);
}
.article-byline .rule{ width: 16px; height: 1px; background: rgba(229,186,0,.35); }

.article-layout{
    max-width: var(--shell); margin: 0 auto;
    padding: clamp(28px, 4vw, 56px) var(--gut) clamp(40px, 5vw, 76px);
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
}
@media (min-width: 1000px){
    .article-layout{ grid-template-columns: minmax(0, 1fr) 320px; }
}
.article-main{ min-width: 0; }
.article-cover-frame{
    border: 1px solid var(--line-mid); background: var(--bg); overflow: hidden;
    margin-bottom: clamp(26px, 3.5vw, 44px);
}
.article-cover-frame img{
    width: 100%; height: auto; max-height: 560px; object-fit: cover; display: block;
}
.article-source{
    margin-top: clamp(26px, 3.5vw, 40px);
    padding: 18px 22px;
    border: 1px solid var(--line-mid); background: rgba(229,186,0,.035);
    font-size: 13.5px; line-height: 1.7; color: var(--ink-4); font-weight: 300;
}
.article-tags{
    margin-top: clamp(28px, 3.5vw, 44px); padding-top: 22px;
    border-top: 1px solid var(--line-soft);
}
.article-tag{ padding: 7px 14px; }

.article-nav{
    margin-top: clamp(28px, 3.5vw, 44px);
    display: grid; grid-template-columns: minmax(0,1fr); gap: 14px;
}
@media (min-width: 620px){
    .article-nav.has-both{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.article-nav a{
    border: 1px solid var(--line); padding: 20px 22px; color: inherit; display: block;
    transition: border-color .3s ease;
}
.article-nav a:hover{ border-color: rgba(229,186,0,.45); }
.article-nav a.is-next{ text-align: right; }
.article-nav .dir{
    display: block; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--ink-5); margin-bottom: 8px;
}
.article-nav .name{
    display: block; font-family: var(--serif); font-size: 15px; line-height: 1.4; color: var(--ink);
}

.article-aside{
    min-width: 0; display: flex; flex-direction: column; gap: 28px; align-self: start;
}
@media (min-width: 1000px){
    .article-aside{ position: sticky; top: 100px; }
}
.side-card{ border: 1px solid var(--line); background: var(--bg); padding: 24px; }
.side-card__title{
    margin: 0 0 18px;
    font-family: var(--serif); font-weight: 500; font-size: 14px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.side-list{ display: flex; flex-direction: column; gap: 16px; }
.side-item{ display: flex; gap: 14px; align-items: flex-start; color: inherit; }
.side-item img{
    flex: 0 0 auto; width: 62px; height: 62px; object-fit: cover; display: block;
    border: 1px solid rgba(229,186,0,.16);
}
.side-item h4{
    margin: 0 0 6px;
    font-family: var(--serif); font-weight: 500; font-size: 14px; line-height: 1.4;
    color: var(--ink); transition: color .3s ease;
}
.side-item:hover h4{ color: var(--gold-bright); }
.side-item .when{
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-8);
}
.side-cat{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-top: 1px solid var(--line-faint);
    color: var(--ink-3); font-size: 14px;
}
.side-cat:hover{ color: var(--gold-bright); }
.side-cat span{ color: var(--ink-8); font-size: 12px; }
.side-promo{
    border: 1px solid var(--line-strong);
    background: linear-gradient(180deg, rgba(229,186,0,.06), rgba(229,186,0,0));
    padding: 26px;
}
.side-promo h3{
    margin: 0 0 12px;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(18px, 1.8vw, 21px); line-height: 1.3; color: var(--ink-bright);
}
.side-promo p{ margin: 0 0 20px; font-size: 14px; line-height: 1.75; color: var(--ink-4); font-weight: 300; }
.side-promo .btn{ padding: 12px 24px; font-size: 12px; }

/* ------------------------------------------------------- contact page */
.contact-cols{
    display: grid; grid-template-columns: minmax(0,1fr);
    gap: clamp(34px, 5vw, 96px); align-items: start;
}
@media (min-width: 900px){
    .contact-cols{ grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
}
.contact-info{ min-width: 0; display: flex; flex-direction: column; }
.contact-info__label{
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--ink-8); margin-bottom: 14px;
}
.contact-info__mail{
    font-family: var(--serif); font-size: clamp(21px, 2.6vw, 32px); line-height: 1.25;
    color: var(--ink-bright); word-break: break-word;
}
.contact-info__mail:hover{ color: var(--gold-bright); }
.contact-info__tel{
    font-family: var(--serif); font-size: clamp(19px, 2.2vw, 26px); color: var(--ink-bright);
}
.contact-info__tel:hover{ color: var(--gold-bright); }
.contact-info__hr{
    height: 1px; background: rgba(229,186,0,.16);
    margin-block: clamp(24px, 3vw, 34px); border: 0;
}
.contact-social{
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    font-size: 14px; letter-spacing: .1em;
}
.contact-social a{ color: var(--ink-3); }
.contact-social a:hover{ color: var(--gold-bright); }
.contact-info__note{
    margin: clamp(26px, 3.4vw, 40px) 0 0; max-width: 380px;
    padding-left: 20px; border-left: 1px solid rgba(229,186,0,.35);
    font-size: 14.5px; line-height: 1.8; color: var(--ink-5); font-weight: 300;
}

/* --------------------------------------------------------- slat image */
.slat-band{
    position: relative; width: 100%; background: transparent;
    /* The band is deliberately outside .shell so it reads as a full-bleed feature, but it must
       still stop growing: the source images are ~700px wide, so past the shell width they turn
       to mush, and an unbounded band leaves the picture several times wider than every other
       element on the page. Capping at --shell lets the media overhang the gutter-inset prose
       by exactly one gutter while staying in scale on ultrawide screens. */
    max-width: var(--shell); margin-inline: auto;
}

.slat{
    position: absolute; overflow: hidden;
    animation: slatRise .5s cubic-bezier(.16,.8,.24,1) both;
}
.slat__inner{
    position: absolute; inset: 0; overflow: hidden;
    transition: transform 1.15s cubic-bezier(.16,1.32,.32,1);
}
.slat__inner img{
    position: absolute; object-fit: cover; display: block;
    /* The slice works by laying one copy of the whole image, several hundred percent wide,
       inside each narrow slat window. The baseline img{max-width:100%} would clamp that back
       to the slat's own width and collapse the effect into one small picture. */
    max-width: none;
    filter: grayscale(1) contrast(1.05);
    transition: filter .55s ease;
}
.slat__inner:hover{ transform: translateY(var(--slat-nudge, 18px)); }
.slat__inner:hover img{ filter: grayscale(0) contrast(1); }

/* the colour variant inverts the pair: colour at rest, grey on hover */
.slat-band.is-colour .slat__inner img{ filter: none; }
.slat-band.is-colour .slat__inner:hover img{ filter: grayscale(1) contrast(1.05); }

@keyframes slatRise{
    from{ clip-path: inset(100% 0 0 0); transform: translateY(18px); opacity: 0; }
    to{ clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
    .slat{ animation: none; }
    .slat__inner{ transition: none; }
    .slat__inner:hover{ transform: none; }
}

/* ------------------------------------------- event-type page vocabulary
   Shared by clubbing, petreceri-private, munch-uri and workshop-uri, which the artboards
   build from the same five sections. */
.hero-black{ background: #000; padding: clamp(40px, 6vw, 80px) var(--gut) clamp(44px, 6vw, 80px); }
.hero-split{
    max-width: var(--shell); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px); align-items: center;
}
@media (min-width: 900px){
    .hero-split{ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.hero-split__title{
    margin: 0 0 16px;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(34px, 6vw, 66px); line-height: 1.05; color: var(--ink-bright);
}
.hero-sub{
    font-family: var(--serif); font-style: italic;
    font-size: clamp(17px, 2.2vw, 25px); color: var(--gold); margin-bottom: 26px;
}
.hero-lede{
    margin: 0 0 28px; padding-left: 22px;
    border-left: 1px solid rgba(229,186,0,.45);
    font-size: clamp(16px, 1.7vw, 19px); line-height: 1.85;
    color: var(--ink-2); font-weight: 300;
}
.hero-split img{ width: 100%; height: auto; display: block; }

/* numbered feature pairs (.01 / .02) */
.numbered{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(26px, 4vw, 56px);
}
.numbered__no{
    font-family: var(--serif); font-size: 13px; letter-spacing: .3em;
    color: var(--gold); margin-bottom: 14px;
}
.numbered__item .h-section{ margin-bottom: 14px; font-size: clamp(21px, 2.4vw, 28px); }
.numbered__item p{
    margin: 0; font-size: 16px; line-height: 1.8; color: var(--ink-3); font-weight: 300;
}

/* a question/answer block beside a stack of highlight boxes */
.qa-split{
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 56px); align-items: start;
}
@media (min-width: 900px){
    .qa-split{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.qa__q{
    margin: 0 0 14px;
    font-family: var(--serif); font-size: clamp(18px, 2vw, 23px); line-height: 1.35;
    color: var(--ink-bright);
}
.qa__a{ margin: 0; font-size: 16px; line-height: 1.8; color: var(--ink-3); font-weight: 300; }

.highlights{ display: flex; flex-direction: column; gap: 14px; }
.highlight{
    border: 1px solid var(--line-mid); background: var(--bg-band);
    padding: 18px 20px;
    font-size: 15px; line-height: 1.7; color: var(--ink-3); font-weight: 300;
}

/* numbered rules grid */
.rules{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(18px, 2.4vw, 30px);
}
.rule-item{ border-top: 1px solid var(--line-mid); padding-top: 18px; }
.rule-item__no{
    font-family: var(--serif); font-size: 13px; letter-spacing: .3em;
    color: var(--gold); margin-bottom: 12px;
}
.rule-item p{
    margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-3); font-weight: 300;
}

/* "Vă rugăm să citiți cu atenție: [Regulament]" */
.inline-cta{
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    margin-top: clamp(28px, 3.5vw, 44px);
}
.inline-cta span{ font-size: 15px; color: var(--ink-4); font-weight: 300; }

/* closing statement */
.closing{ max-width: 860px; margin: 0 auto; text-align: center; }
.closing p{
    margin: 0 0 16px;
    font-size: clamp(16px, 1.8vw, 20px); line-height: 1.85;
    color: var(--ink-3); font-weight: 300;
}
.closing p:last-child{ margin-bottom: 0; }

/* rules as a vertical stack with the number inline (the munch / workshop / private variant) */
.rule-rows{ display: flex; flex-direction: column; gap: 16px; }
.rule-row{ display: flex; gap: 16px; align-items: baseline; }
.rule-row__no{
    flex: 0 0 auto; font-family: var(--serif); font-size: 12px;
    letter-spacing: .24em; color: var(--gold); min-width: 34px;
}
.rule-row p{
    margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-3); font-weight: 300;
}
.rule-row strong{ color: var(--ink-bright); font-weight: 500; }

/* two-column split where the left side is wider (rules | dress code) */
.split-wide{
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 4vw, 64px); align-items: start;
}
@media (min-width: 900px){
    .split-wide{ grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}

/* hero with the poster first (reversed from clubbing) */
@media (min-width: 900px){
    .hero-split--poster-first{ grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}

.highlight strong{ color: var(--ink-bright); font-weight: 500; }
.closing strong{ color: var(--ink-bright); font-weight: 500; }
.numbered__item p strong{ color: var(--ink-bright); font-weight: 500; }
.hero-lede strong{ color: var(--ink-bright); font-weight: 500; }

/* -------------------------------------------- component trio with image */
.trio-cards{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(22px, 3vw, 40px);
}
.trio-card{
    border: 1px solid var(--line-mid); background: var(--bg-band);
    display: flex; flex-direction: column;
}
.trio-card img{
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
    cursor: zoom-in; filter: saturate(.94);
    transition: filter .5s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.trio-card img:hover{ filter: saturate(1.05); }
.trio-card__body{ padding: clamp(20px, 2.4vw, 28px); }
.trio-card__body .h-section{ margin-bottom: 14px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: .04em; }
.trio-card__body p{
    margin: 0 0 12px; font-size: 15px; line-height: 1.75; color: var(--ink-3); font-weight: 300;
}
.trio-card__body p:last-child{ margin-bottom: 0; }

/* -------------------------------------------------- numbered principles */
.principles{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(22px, 3vw, 38px);
}
.principle{ display: flex; flex-direction: column; gap: 10px; }
.principle__no{
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--gold); color: var(--gold);
    font-family: var(--serif); font-size: 16px;
}
.principle__name{
    font-family: var(--serif); font-size: clamp(16px, 1.8vw, 19px);
    color: var(--ink-bright); line-height: 1.35;
}
.principle p{
    margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-4); font-weight: 300;
}

/* two equal prose columns with their own subheads */
.prose-duo{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(26px, 3.5vw, 52px);
}
.prose-duo h3{
    margin: 0 0 14px;
    font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 2.1vw, 24px);
    color: var(--ink-bright); line-height: 1.3;
}
.prose-duo p{
    margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--ink-3); font-weight: 300;
}

/* ------------------------------------------- principle badge links (SSC…) */
.principle-links{ display: flex; flex-direction: column; gap: 12px; }
.principle-link{
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid var(--line-mid); background: var(--bg-band);
    padding: 18px 22px;
    font-family: var(--serif); font-size: clamp(18px, 2vw, 24px);
    letter-spacing: .22em; color: var(--gold);
    transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.principle-link:hover{
    border-color: var(--gold); background: rgba(229,186,0,.06); color: var(--gold-bright);
}
.principle-link::after{ content: '\2192'; font-family: var(--sans); letter-spacing: 0; font-size: 16px; }

/* -------------------------------------------------- numbered accordions */
.neg-list{ display: flex; flex-direction: column; gap: 12px; }
.neg-item{ border: 1px solid var(--line-mid); background: var(--bg-band); }
.neg-item > summary{
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px;
    transition: color .25s ease;
}
.neg-item > summary:hover .neg-item__name{ color: var(--gold); }
.neg-item__label{ display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.neg-item__no{
    font-family: var(--serif); font-size: 12px; letter-spacing: .24em;
    color: var(--gold); flex: 0 0 auto;
}
.neg-item__name{
    font-family: var(--serif); font-size: clamp(16px, 1.8vw, 19px);
    color: var(--ink-bright); transition: color .25s ease;
}
.neg-item__sign{ color: var(--gold); font-size: 14px; flex: 0 0 auto; transition: transform .3s ease; }
.neg-item[open] .neg-item__sign{ transform: rotate(45deg); }
.neg-item > p{
    margin: 0; padding: 0 22px 20px;
    font-size: 15px; line-height: 1.8; color: var(--ink-4); font-weight: 300;
}

/* image beside a stack of content, image second on narrow screens */
.media-split{
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (min-width: 900px){
    .media-split{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .media-split--wide-text{ grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}

/* ------------------------------------------------------------ eras page */
.eras{
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (min-width: 1000px){
    .eras{ grid-template-columns: 250px minmax(0, 1fr); }
    .eras__nav{ position: sticky; top: calc(var(--head-h) + 28px); }
}
.eras__nav{ display: flex; flex-direction: column; gap: 4px; align-self: start; }
.eras__nav-title{
    font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--ink-7); margin-bottom: 12px;
}
.era-link{
    display: flex; align-items: baseline; gap: 14px;
    padding: 12px 0; border-top: 1px solid var(--line-faint);
    font-size: 14.5px; line-height: 1.4; color: var(--ink-3);
}
.era-link:hover{ color: var(--gold-bright); }
.era-link span{
    flex: 0 0 auto; min-width: 26px;
    font-family: var(--serif); font-size: 13px; letter-spacing: .1em; color: var(--gold);
}

.era{
    position: relative;
    padding-bottom: clamp(34px, 4.5vw, 60px);
    margin-bottom: clamp(34px, 4.5vw, 60px);
    border-bottom: 1px solid var(--line-soft);
    scroll-margin-top: calc(var(--head-h) + 24px);
}
.era:last-child{ border-bottom: none; margin-bottom: 0; }
.era__no{
    font-family: var(--serif); font-size: clamp(30px, 4vw, 48px);
    color: rgba(229,186,0,.28); line-height: 1; margin-bottom: 12px;
}
.era > h2{
    margin: 0 0 16px;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(22px, 2.8vw, 34px); line-height: 1.25; color: var(--ink-bright);
}
.era > p{
    margin: 0 0 clamp(22px, 2.8vw, 32px);
    font-size: 16px; line-height: 1.8; color: var(--ink-3); font-weight: 300;
    max-width: 820px;
}
.era img{
    width: 100%; height: auto; display: block;
    border: 1px solid var(--line-mid); cursor: zoom-in;
}

/* a portrait card: picture left, name + dates + prose right */
.figure-card{
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 30px); align-items: start;
    border: 1px solid var(--line-soft); background: var(--bg-band);
    padding: clamp(18px, 2.2vw, 26px);
}
.figure-card + .figure-card{ margin-top: clamp(16px, 2vw, 24px); }
@media (min-width: 620px){
    .figure-card{ grid-template-columns: 180px minmax(0, 1fr); }
}
.figure-card__name{
    font-family: var(--serif); font-size: clamp(17px, 1.9vw, 21px);
    color: var(--ink-bright); margin-bottom: 4px;
}
.figure-card__dates{
    font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 12px;
}
.figure-card p{
    margin: 0; font-size: 15px; line-height: 1.78; color: var(--ink-4); font-weight: 300;
}

/* a row of dated period blocks */
.periods{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(20px, 2.6vw, 34px);
}
.period__when{
    font-family: var(--serif); font-size: 14px; letter-spacing: .18em;
    color: var(--gold); margin-bottom: 12px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line-mid);
}
.period p{
    margin: 0; font-size: 15px; line-height: 1.78; color: var(--ink-4); font-weight: 300;
}

/* --------------------------------------------------- media recommendations */
.rec-head{
    display: flex; align-items: center; gap: 18px;
    margin-bottom: clamp(18px, 2.4vw, 26px);
}
.rec-head .h-section-lg{ flex: 0 0 auto; }
.rec-head__rule{ flex: 1; height: 1px; background: var(--line-mid); }

.rec-grid{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(20px, 2.6vw, 34px);
}
.rec-card{
    border: 1px solid var(--line-mid); background: var(--bg-band);
    display: flex; flex-direction: column;
    transition: border-color .4s ease;
}
.rec-card:hover{ border-color: rgba(229,186,0,.45); }
.rec-card__frame{ overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-panel); }
.rec-card__frame img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.rec-card:hover .rec-card__frame img{ transform: scale(1.05); }
.rec-card__body{ padding: clamp(18px, 2.2vw, 26px); }
.rec-card__tag{
    display: block;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 10px;
}
.rec-card__title{
    margin: 0 0 8px;
    font-family: var(--serif); font-weight: 500; font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.35; color: var(--ink-bright);
}
.rec-card__by{
    margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-5); font-weight: 300;
}

/* ------------------------------------------------------ about page bits */
/* Symbols, not photos: each sits whole inside its square (contain + inset), never cropped. */
.thumb-strip{
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;
}
@media (min-width: 760px){ .thumb-strip{ grid-template-columns: repeat(6, minmax(0,1fr)); } }
.thumb-strip__cell{
    overflow: hidden; aspect-ratio: 1 / 1; padding: 14%;
    background: var(--bg-panel); border: 1px solid var(--line);
}
.thumb-strip__cell img{
    width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in;
    filter: saturate(.92);
    transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.thumb-strip__cell img:hover{ transform: scale(1.06); filter: saturate(1.05); }

.founders{
    display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(24px, 3vw, 44px);
}
@media (min-width: 560px){ .founders{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 860px){ .founders{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.founder{ text-align: center; }
.founder__frame{
    overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: 16px;
    border: 1px solid var(--line-mid); background: var(--bg-panel);
}
.founder__frame img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(1) contrast(1.04); transition: filter .55s ease;
}
.founder:hover .founder__frame img{ filter: grayscale(0) contrast(1); }
.founder__roles{
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 8px;
}
.founder__name{
    font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); color: var(--ink-bright);
}

/* testimonial carousel */
.quotes{ position: relative; }
.quote{
    border: 1px solid var(--line-mid); background: var(--bg-band);
    padding: clamp(26px, 4vw, 52px);
    text-align: center;
}
.quote__who{
    font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 18px;
}
.quote__mark{
    font-family: var(--serif); font-size: clamp(40px, 6vw, 72px);
    line-height: .6; color: rgba(229,186,0,.32); margin-bottom: 14px;
}
.quote p{
    margin: 0 auto; max-width: 760px;
    font-size: clamp(15px, 1.7vw, 18px); line-height: 1.85;
    color: var(--ink-3); font-weight: 300; font-style: italic;
}
.quotes__controls{
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: clamp(18px, 2.4vw, 28px);
}
.quotes__arrow{
    width: 42px; height: 42px; flex: 0 0 auto;
    background: none; border: 1px solid var(--line-mid); color: var(--gold);
    font-size: 20px; line-height: 1; cursor: pointer;
    transition: border-color .3s ease, color .3s ease;
}
.quotes__arrow:hover{ border-color: var(--gold); color: var(--gold-bright); }

/* the dots sit inline with the arrows here, not below the viewport */
.quotes__controls .carousel__dots{ margin-top: 0; }

/* ------------------------------------------------------------ cookie bar
   Styles the design's own override at designs/{active}/cookieconsent/templates/bar.php. */
.cookiebar{
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 14px 22px;
    padding: 16px clamp(16px, 4vw, 40px) calc(16px + env(safe-area-inset-bottom));
    background: rgba(8,6,4,.94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
}
.cookiebar[hidden]{ display: none; }
.cookiebar__text{
    margin: 0; font-size: 14px; line-height: 1.6;
    color: var(--ink-4); font-weight: 300;
}
.cookiebar__text a{ color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.cookiebar__text a:hover{ color: var(--gold-hover); }
.cookiebar__actions{ display: flex; gap: 10px; flex: 0 0 auto; }
.cookiebar__btn{ flex: 0 0 auto; padding: 10px 26px; }
.cookiebar__btn.btn-solid:hover{ transform: none; }
@media (max-width: 639px){
    .cookiebar{ justify-content: stretch; }
    .cookiebar__text{ text-align: left; }
    .cookiebar__actions{ width: 100%; }
    .cookiebar__actions .cookiebar__btn{ flex: 1 1 0; padding-inline: 12px; }
}

.site-footer__links{ display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* ------------------------------------------- cookie settings + policy pages
   /setari-cookie and /politica-cookie. Both render data/cookies.php through
   partials/cookie_table.php. */
.cookie-layout{
    display: grid; gap: clamp(28px, 4vw, 56px);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px){
    .cookie-layout{ grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
    .cookie-nav{ position: sticky; top: calc(var(--head-h) + 28px); }
}
.cookie-nav nav{ display: flex; flex-direction: column; border-left: 1px solid var(--line-mid); }
.cookie-nav nav a{
    padding: 9px 0 9px 16px; margin-left: -1px; border-left: 1px solid transparent;
    font-size: 15px; color: var(--ink-3);
}
.cookie-nav nav a:hover{ color: var(--gold); border-left-color: var(--gold); }
.cookie-nav__policy{ display: inline-block; margin-top: 22px; }
@media (max-width: 959px){
    .cookie-nav nav{ flex-direction: row; flex-wrap: wrap; gap: 8px; border-left: none; }
    .cookie-nav nav a{ margin: 0; padding: 7px 14px; border: 1px solid var(--line-mid); font-size: 14px; }
    .cookie-nav nav a:hover{ border-color: var(--gold); }
}

.cookie-actions{
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px 24px; padding: 20px clamp(18px, 2.4vw, 28px);
    border: 1px solid var(--line-mid); background: var(--bg-band);
    margin-bottom: clamp(26px, 3vw, 38px);
}
.cookie-status{ margin: 0; flex: 1 1 280px; font-size: 14.5px; line-height: 1.6; color: var(--ink-4); font-weight: 300; }

.cookie-cat{
    scroll-margin-top: calc(var(--head-h) + 24px);
    padding-block: clamp(26px, 3.4vw, 40px);
    border-top: 1px solid var(--line-soft);
}
.cookie-cat:first-of-type{ border-top: none; padding-top: 0; }
.cookie-cat__head{
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px 32px; margin-bottom: 22px;
}
.cookie-cat__text{ margin: 12px 0 0; max-width: 680px; font-size: 16px; line-height: 1.75; color: var(--ink-3); font-weight: 300; }
@media (max-width: 639px){
    .cookie-cat__head{ flex-direction: column; }
}

.cookie-required{
    flex: 0 0 auto; margin-top: 6px; padding: 7px 14px;
    border: 1px solid var(--line-mid); color: var(--ink-4);
    font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}

/* Switch — a real checkbox (role=switch), styled. Keyboard and screen readers get the native control. */
.switch{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; cursor: pointer; }
.switch input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track{
    position: relative; width: 52px; height: 28px; flex: 0 0 auto;
    border: 1px solid var(--line-input); background: var(--bg-panel);
    transition: background .2s ease, border-color .2s ease;
}
.switch__thumb{
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    background: var(--ink-6); transition: transform .2s ease, background .2s ease;
}
.switch input:checked + .switch__track{ background: rgba(229,186,0,.16); border-color: var(--gold); }
.switch input:checked + .switch__track .switch__thumb{ transform: translateX(24px); background: var(--gold); }
.switch input:focus-visible + .switch__track{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.switch:hover .switch__track{ border-color: var(--gold); }
.switch__label{ min-width: 48px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.switch input:checked ~ .switch__label{ color: var(--gold); }
@media (prefers-reduced-motion: reduce){
    .switch__track, .switch__thumb{ transition: none; }
}

.cookie-table-wrap{ border: 1px solid var(--line-mid); background: var(--bg-band); }
.cookie-table{ width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; }
.cookie-table th{
    padding: 12px 16px; text-align: left; vertical-align: bottom;
    font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-6); border-bottom: 1px solid var(--line-mid);
}
.cookie-table td{ padding: 14px 16px; vertical-align: top; color: var(--ink-3); font-weight: 300; border-top: 1px solid var(--line-hair); }
.cookie-table tbody tr:first-child td{ border-top: none; }
.cookie-table td:nth-child(1){ white-space: nowrap; }
.cookie-table td:nth-child(4){ white-space: nowrap; color: var(--ink-4); }
.cookie-table code{
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 13px;
    color: var(--gold); background: none;
}
@media (max-width: 759px){
    .cookie-table thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cookie-table, .cookie-table tbody, .cookie-table tr, .cookie-table td{ display: block; width: 100%; }
    .cookie-table tr{ padding: 14px 16px; border-top: 1px solid var(--line-soft); }
    .cookie-table tbody tr:first-child{ border-top: none; }
    .cookie-table td{ display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 12px; padding: 4px 0; border: none; white-space: normal !important; }
    .cookie-table td::before{
        content: attr(data-label); padding-top: 3px;
        font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-6);
    }
}
.cookie-empty{
    margin: 0; padding: 18px 20px; border: 1px dashed var(--line-mid);
    font-size: 15px; line-height: 1.7; color: var(--ink-4); font-weight: 300;
}

.provider-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 760px){ .provider-list{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.provider{ display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line-mid); background: var(--bg-card); }
.provider__top{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.provider__tag{ font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-6); white-space: nowrap; }
.provider__service{ margin-top: 4px; font-size: 13px; letter-spacing: .06em; color: var(--gold); }
.provider__text{ margin: 12px 0 16px; font-size: 14.5px; line-height: 1.7; color: var(--ink-3); font-weight: 300; }
.provider__links{ margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; }
.cookie-note{ margin: 22px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-5); font-weight: 300; }

.policy .h-section{ margin: clamp(34px, 4vw, 48px) 0 14px; }
.policy .h-section:first-child{ margin-top: 0; }
.policy .cookie-table-wrap, .policy .cookie-empty{ margin: 4px 0 22px; }
.policy a{ text-decoration: underline; text-underline-offset: 3px; }

/* rules pages (/regulament and the Vama Veche one): the chapters beside a picture that stays in view.
   Below 900px the picture drops under the rules at a modest size, never full width: it is a tall
   (1:2) figure, and a phone-wide copy would be over 800px of scrolling. The image's own ground is
   neutral grey, not the band's warm black, so the hairline frames it as a panel on purpose. */
.rules-doc{
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px); align-items: start;
}
.rules-doc__figure{ margin: 0; justify-self: center; width: min(100%, 280px); }
.rules-doc__figure img{ display: block; width: 100%; height: auto; border: 1px solid var(--line-mid); }
@media (min-width: 900px){
    .rules-doc{ grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
    .rules-doc__figure{ width: 100%; position: sticky; top: calc(var(--head-h) + 28px); }
    .rules-doc__figure img{
        width: auto; max-width: 100%; margin-inline: auto;
        max-height: calc(100vh - var(--head-h) - 56px);
    }
}

/* -------------------------------------------- platform modules on this page
   popnotifs renders three Tailwind-classed modals into website_footer, and it has no template
   cascade to override. This design ships no Tailwind, so `class="hidden"` styled nothing and all
   three rendered inline — a full-width warning icon and stray "Error / Confirm / OK" text at the
   bottom of every page.
   These rules restore the two things the utility classes were doing: keep them hidden, and make
   them legible in this design's palette if one is ever shown. Scoped to the module's own ids, so
   nothing here can leak into the design's markup. */
#info-popup-error[class~="hidden"],
#info-popup-success[class~="hidden"],
#info-popup-general[class~="hidden"]{ display: none !important; }

#info-popup-error,
#info-popup-success,
#info-popup-general{
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 40px);
    background: rgba(6,4,3,.82);
}
#info-popup-error > div,
#info-popup-success > div,
#info-popup-general > div{ width: 100%; max-width: 560px; }
#info-popup-error > div > div,
#info-popup-success > div > div,
#info-popup-general > div > div{
    background: var(--bg-panel); color: var(--ink);
    border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift);
    padding: clamp(22px, 3vw, 34px);
}
#info-popup-error svg,
#info-popup-success svg,
#info-popup-general svg{
    width: 20px; height: 20px; flex: 0 0 auto; margin-right: 8px;
}
#info-popup-error button,
#info-popup-success button,
#info-popup-general button{
    margin-top: 18px;
    background: var(--gold); color: var(--bg); border: none;
    padding: 11px 24px; cursor: pointer;
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
}
#info-popup-error button:hover,
#info-popup-success button:hover,
#info-popup-general button:hover{ background: var(--gold-hover); }

/* ---------------------------------------------------------- gallery page
   The grid markup comes from the galleries module (.ls-gal-*). Its own stylesheet loads from the
   website_header hook — i.e. AFTER this file — so every rule here is scoped under .gal-sanctuar to
   win on specificity rather than on order. */
.gal-head{
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: clamp(20px, 2.6vw, 30px);
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}

.gal-sanctuar .ls-gal{ margin: 0; }

.gal-sanctuar .ls-gal-grid{
    gap: 8px;
    /* The module drives the column count from --gal-cols; the artboard steps 2 / 3 / 4. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    counter-reset: galnum;
}
@media (min-width: 700px){
    .gal-sanctuar .ls-gal-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1024px){
    .gal-sanctuar .ls-gal-grid{ grid-template-columns: repeat(var(--gal-cols, 4), minmax(0, 1fr)); }
}

.gal-sanctuar .ls-gal-item{
    position: relative;
    border-radius: 0;                      /* the design has no rounded corners anywhere */
    border: 1px solid var(--line);
    background: var(--bg-panel);
    counter-increment: galnum;             /* survives Load more — appended items keep counting */
    transition: border-color .4s ease;
}
.gal-sanctuar .ls-gal-item:hover{ border-color: rgba(229,186,0,.45); }

.gal-sanctuar .ls-gal-item img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(.92);
    transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.gal-sanctuar .ls-gal-item:hover img{ transform: scale(1.06); filter: saturate(1.05); }

/* the artboard's numbered badge, from a CSS counter so the module's markup needs no change */
.gal-sanctuar .ls-gal-item::after{
    content: counter(galnum, decimal-leading-zero);
    position: absolute; left: 10px; bottom: 8px;
    font-family: var(--serif); font-size: 11px; letter-spacing: .18em;
    color: var(--ink-bright);
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
    opacity: .75; transition: opacity .3s ease, color .3s ease;
    pointer-events: none;
}
.gal-sanctuar .ls-gal-item:hover::after{ opacity: 1; color: var(--gold-bright); }

.gal-sanctuar .ls-gal-caption{
    font-family: var(--sans); font-size: 12.5px;
    background: linear-gradient(to top, rgba(8,6,4,.86), rgba(8,6,4,0));
}

.gal-sanctuar .ls-gal-more{ margin-top: clamp(24px, 3vw, 40px); }
.gal-sanctuar .ls-gal-more-btn{
    border: 1px solid var(--gold); border-radius: 0; background: none;
    color: var(--gold); padding: 13px 30px;
    font-family: var(--sans); font-size: 13px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    transition: background .3s ease, color .3s ease;
}
.gal-sanctuar .ls-gal-more-btn:hover{ background: var(--gold); color: var(--bg); }
.gal-sanctuar .ls-gal-more-btn[disabled]{ opacity: .5; }

/* ------------------------------------------------ galleryimage lightbox
   The galleryimage module's overlay is written entirely in Tailwind utilities, including the
   `hidden` class it toggles to open and close. With no Tailwind on the page that class styles
   nothing, so the overlay would sit permanently open across every page of the site — and it is
   injected on every page, not just the gallery.
   These rules restore the hidden state and dress the lightbox in the design's palette. Scoped to
   the module's own ids so nothing leaks. */
#gmlightboxOverlay{
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(12px, 3vw, 48px);
    background: rgba(6,4,3,.94);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    overflow-y: auto;
}
#gmlightboxOverlay[class~="hidden"]{ display: none !important; }

#gmlightboxOverlay figure{
    position: relative; margin: 0 auto; padding: 0;
    max-width: min(1200px, 92vw); max-height: 90vh; z-index: 10;
}
#gmlightboxImage{
    display: block; margin: 0 auto;
    max-width: 100%; max-height: 80vh; width: auto; height: auto;
    border: 1px solid var(--line-mid); border-radius: 0; box-shadow: var(--shadow-lift);
}
#gmlightboxCaption{
    margin-top: 14px; text-align: center;
    font-size: 13px; letter-spacing: .1em; color: var(--ink-4);
}

#gmlightboxOverlay button{
    position: absolute; z-index: 20;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(13,10,7,.72);
    border: 1px solid var(--line-mid); border-radius: 0;
    color: var(--gold); cursor: pointer;
    transition: border-color .3s ease, color .3s ease, background .3s ease;
}
#gmlightboxOverlay button:hover{
    border-color: var(--gold); color: var(--gold-bright); background: rgba(229,186,0,.08);
}
#gmlightboxOverlay button[class~="hidden"]{ display: none !important; }
#gmlightboxOverlay button svg{ width: 20px; height: 20px; }

#gmlightboxClose{ top: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px); width: 44px; height: 44px; }
#gmlightboxPrev{ left: clamp(8px, 2vw, 28px);  top: 50%; transform: translateY(-50%); width: 48px; height: 56px; }
#gmlightboxNext{ right: clamp(8px, 2vw, 28px); top: 50%; transform: translateY(-50%); width: 48px; height: 56px; }

/* the module's markup uses .sr-only for the button labels — the design already defines it */

/* the date line a past event carries in place of its ticket button */
.event__when{
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-4); margin-bottom: 10px;
    text-shadow: var(--glow-text);
}

/* The note under the "latest events" heading sits on the brightest part of the hero wash, where
   the plain .lede colour disappears. It gets the heading's own shadow and a lighter ink. */
.events-head__note{
    margin-top: 18px; max-width: 640px;
    color: var(--ink-2);
    text-shadow: var(--glow-head);
}

/* ============================================================ calendar page */

/* --------------------------------------------------------------- jump row
   Two selects used to sit here. They are gone: every month is on the strip now, so the only
   thing worth offering is a way back to today and a jump per year. Small, centred, quiet. */
.cal-jump{
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 6px 4px;
    padding-block: clamp(10px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
}
.cal-jump__btn{
    background: none; border: 1px solid transparent; border-radius: 0;
    color: var(--ink-6); cursor: pointer;
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
    padding: 8px 14px;
    transition: color .25s ease, border-color .25s ease;
}
.cal-jump__btn:hover{ color: var(--gold-bright); border-color: var(--line-soft); }
.cal-jump__btn.is-now{ color: var(--gold); border-color: var(--line-mid); }
.cal-jump__btn.is-now:hover{ color: var(--gold-bright); border-color: var(--line-input); }
.cal-jump__sep{ width: 1px; height: 14px; background: var(--line-soft); margin: 0 8px; }

/* ------------------------------------------------------------------- strip
   One horizontal row carrying every day between the first event and the last. It is a real
   scroll container, so it works with no script; the script adds drag and the opening jump.

   The ends fade rather than stop: the row runs out of sight in both directions, which is what
   makes the present read as the front of it and everything else as receding. */
.cal-strip{
    position: relative;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: 4px clamp(18px, 2.6vw, 30px);
    cursor: grab;
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.cal-strip::-webkit-scrollbar{ display: none; }
.cal-strip:focus{ outline: none; }
.cal-strip.is-dragging{ cursor: grabbing; }
/* While a drag is in flight nothing inside may take the pointer — otherwise the browser starts
   a text selection or a button press halfway through the gesture. */
.cal-strip.is-dragging *{ pointer-events: none; user-select: none; }

.cal-strip__track{
    position: relative;
    display: flex; align-items: flex-start;
    width: max-content;
    /* Just enough runway to lift the first and last day clear of the fades. Half a viewport
       (enough to centre either one) left the screen half empty whenever the focused day sat near
       the end of the range. */
    padding: 0 16vw;
}

/* The weekday initials sit at the same height in every cell, so one hairline drawn across the
   whole track turns them into a header band — the calendar's column headers, without a separate
   row that would have to stay in step while the strip scrolls. */
.cal-strip__track::before{
    content: '';
    position: absolute; left: 16vw; right: 16vw; top: 46px; height: 1px;
    background: var(--line-hair);
    pointer-events: none;
}

/* --------------------------------------------------------------- a month */
.cal-mo{
    flex: 0 0 auto;
    display: flex; flex-direction: column;
    padding-right: 20px; margin-right: 8px;
    border-right: 1px solid var(--line-hair);
}
.cal-mo:last-child{ border-right: none; margin-right: 0; }
.cal-mo.is-year-start{ border-left: 1px solid var(--line-mid); padding-left: 16px; margin-left: 10px; }
.cal-mo:first-child{ border-left: none; padding-left: 0; margin-left: 0; }

/* Sticky, or the label scrolls off with the first of the month and the days below it become
   anonymous numbers. It rides along at the front of the view and is pushed out by its own
   month's right edge exactly as the next month's label arrives. */
.cal-mo__head{
    position: sticky; left: 16vw; z-index: 1;
    align-self: flex-start; width: max-content;
    display: flex; align-items: baseline; gap: 10px;
    height: 24px; padding: 0 12px 0 2px; margin-bottom: 4px;
    white-space: nowrap;
    background: var(--bg);
}
.cal-mo__name{
    font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--ink-7);
}
.cal-mo__year{
    font-family: var(--serif); font-size: 15px; line-height: 1;
    color: var(--gold); letter-spacing: .06em;
}

.cal-mo__days{
    display: flex; align-items: flex-start;
    border-bottom: 1px solid var(--line-hair);
}

/* ----------------------------------------------------------------- a day
   Every day in the range is here. Most are placeholders — a weekday initial and a number, drawn
   just far enough above the ground to read as a grid and no further. */
.cal-day{
    flex: 0 0 auto;
    width: 34px; height: 74px;
    display: flex; flex-direction: column; align-items: center;
    background: none; border: 1px solid transparent; border-radius: 0;
    padding: 0; margin: 0;
    font: inherit; color: inherit;
    position: relative;
}
.cal-day__wd{
    height: 18px; line-height: 18px;
    font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-8); opacity: .45;
}
.cal-day.is-weekend .cal-day__wd{ color: var(--gold); opacity: .32; }
.cal-day__n{
    margin-top: 12px;
    font-family: var(--serif); font-size: 13px; line-height: 1;
    color: var(--ink-5); opacity: .28;
    transition: color .25s ease, opacity .25s ease;
}
.cal-day__marks{
    position: absolute; left: 0; right: 0; bottom: 14px;
    display: flex; align-items: center; justify-content: center; gap: 3px;
}
.cal-day__marks i{
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--gold); display: block;
}

.cal-day.is-wstart::before{
    content: '';
    position: absolute; left: -1px; top: 22px; bottom: 0; width: 1px;
    background: var(--line-hair);
}

/* today: a quiet ring, present whether or not anything is on */
.cal-day.is-today{ border-color: var(--line-mid); }
.cal-day.is-today .cal-day__n{ color: var(--ink-3); opacity: .8; }
.cal-day.is-today .cal-day__wd{ color: var(--ink-4); opacity: .7; }

/* a day with something on it */
.cal-day.is-event{
    cursor: pointer;
    background: linear-gradient(to bottom, rgba(229,186,0,.045), rgba(229,186,0,.10));
    border-color: var(--line-hair);
    transition: background .25s ease, border-color .25s ease;
}
.cal-day.is-event .cal-day__n{ font-size: 16px; opacity: 1; color: var(--gold); }
.cal-day.is-event .cal-day__wd{ opacity: .7; color: var(--ink-6); }
/* Something that has already happened is still worth seeing, just not as loudly as what is
   coming. Past days keep the shape and lose the light. */
.cal-day.is-event.is-past{ background: rgba(229,186,0,.035); }
.cal-day.is-event.is-past .cal-day__n{ color: var(--ink-4); opacity: .78; }
.cal-day.is-event.is-past .cal-day__marks i{ background: var(--ink-6); }

.cal-day.is-event:hover{ background: rgba(229,186,0,.14); border-color: var(--line-mid); }
.cal-day.is-event:hover .cal-day__n{ color: var(--gold-bright); opacity: 1; }
.cal-day.is-event:focus{ outline: none; }
.cal-day.is-event:focus-visible{ outline: 1px solid var(--gold-bright); outline-offset: 1px; }

.cal-day.is-event.is-active{ background: rgba(229,186,0,.18); border-color: var(--gold); }
.cal-day.is-event.is-active .cal-day__n{ color: var(--gold-bright); opacity: 1; }
.cal-day.is-event.is-active .cal-day__wd{ color: var(--gold); opacity: .9; }
.cal-day.is-event.is-active .cal-day__marks i{ background: var(--gold-bright); }
/* the one lit day gets a bar under it, so it stays findable across a year of cells */
.cal-day.is-event.is-active::after{
    content: '';
    position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
    background: var(--gold);
}

/* ------------------------------------------------------------------- stage */
.cal-stage{
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 3vw, 44px); align-items: center;
    padding-block: clamp(14px, 2vw, 26px) clamp(24px, 3vw, 40px);
}
@media (min-width: 900px){
    .cal-stage{ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
/* A fixed poster-shaped frame, so stepping along the strip from one poster to the next never makes
   the page below jump; a poster in a slightly different shape gets a thin margin, never a crop. */
.cal-stage__media{
    position: relative; overflow: hidden;
    aspect-ratio: var(--poster-ratio);
    border: 1px solid var(--line-mid); background: var(--bg-panel);
}
.cal-stage__media img{
    width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in;
}
.cal-stage__text{ min-width: 0; }
.cal-stage__text .kicker-sm{ margin-bottom: 10px; }
.cal-stage__text .h-block{ margin-bottom: 8px; }
.cal-stage__excerpt{
    margin: 14px 0 22px;
    font-size: 15.5px; line-height: 1.8; color: var(--ink-4); font-weight: 300;
}
.cal-stage__more{ padding: 12px 26px; }

/* ------------------------------------------------------------- grid paging */
.cal-more{
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    margin-top: clamp(24px, 3vw, 40px);
}
.cal-more[hidden]{ display: none; }
.cal-more__count{
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-6);
}
.cal-card[hidden]{ display: none; }

/* -------------------------------------------------------------- poster grid */
/* One column on a phone: two landscape posters side by side come out about 170px wide, too small
   to read the date printed on them. */
.cal-grid{
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: clamp(14px, 2vw, 26px);
}
@media (min-width: 560px){ .cal-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px){ .cal-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cal-card{
    border: 1px solid var(--line); background: var(--bg);
    transition: border-color .4s ease;
}
.cal-card:hover{ border-color: rgba(229,186,0,.45); }
.cal-card__open{
    display: block; width: 100%; text-align: left;
    background: none; border: none; padding: 0; cursor: pointer;
    color: inherit; font: inherit;
}
/* The whole poster, never a crop — the date, hour, address and dress code are printed on it, often
   right at the edge. No hover zoom for the same reason: it would push those edges out of the frame. */
.cal-card__frame{
    display: block; overflow: hidden; aspect-ratio: var(--poster-ratio); background: var(--bg-panel);
}
.cal-card__frame img{
    width: 100%; height: 100%; object-fit: contain; display: block;
    filter: saturate(.92);
    transition: filter .5s ease;
}
.cal-card:hover .cal-card__frame img{ filter: saturate(1.05); }
.cal-card__body{ display: block; padding: clamp(14px, 1.8vw, 20px); }
.cal-card__meta{
    display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 8px;
}
.cal-card__title{
    display: block; font-family: var(--serif); font-weight: 500;
    font-size: clamp(15px, 1.6vw, 18px); line-height: 1.35; color: var(--ink-bright);
    transition: color .3s ease;
}
.cal-card:hover .cal-card__title{ color: var(--gold-bright); }

/* Each card carries its full text once. The script moves it into the modal and adds .js-modal
   to <html>; without the script it simply stays on the page, readable and indexable. */
.js-modal .cal-card__full{ display: none; }
.cal-card__full{ padding: 0 clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 22px); }
.cal-full__head{ margin-bottom: 16px; }
.cal-full__poster{
    width: 100%; height: auto; display: block; cursor: zoom-in;
    border: 1px solid var(--line-mid); margin-bottom: 18px;
}
.cal-full__actions{ margin-top: clamp(18px, 2.4vw, 26px); }

/* ------------------------------------------------------------------- modal
   The dialog is fixed to the viewport and never taller than it. The panel is a column: a close
   button pinned to its frame, and ONE scroller under it holding everything else — poster
   included. The page behind it does not scroll, and neither does the dialog itself; only the
   content does, which is the difference between a modal and a very tall section. */
.cal-modal{
    position: fixed; inset: 0; z-index: 1150;
    height: 100dvh;                      /* ignored where unsupported; inset:0 covers that case */
    display: flex; align-items: center; justify-content: center;
    padding: clamp(10px, 3vw, 44px);
    background: rgba(6,4,3,.94);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}
.cal-modal[hidden]{ display: none; }
.cal-modal__panel{
    position: relative;
    display: flex; flex-direction: column;
    width: 100%; max-width: 860px;
    max-height: 100%; min-height: 0;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-lift);
    padding: 0;                          /* the padding lives inside the scroller */
    animation: calModalIn .35s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes calModalIn{
    from{ opacity: 0; transform: translateY(18px); }
    to{ opacity: 1; transform: none; }
}
.cal-modal__content{
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 56px clamp(20px, 3.4vw, 44px) clamp(24px, 3vw, 40px);
    scrollbar-width: thin;
    scrollbar-color: var(--line-input) transparent;
}
.cal-modal__content::-webkit-scrollbar{ width: 8px; }
.cal-modal__content::-webkit-scrollbar-thumb{ background: var(--line-input); }
.cal-modal__content::-webkit-scrollbar-track{ background: transparent; }
.cal-modal__content .cal-card__full{ display: block; padding: 0; }
/* The poster is a header, not the content: it never takes more than a third of the screen. It is
   SHRUNK to fit, not cropped — a poster that loses its bottom third loses the hour and the dress
   code — so it keeps its ratio and simply gets smaller, centred. Full size is one click away in
   the lightbox. */
.cal-modal__content .cal-full__poster{
    width: auto; max-width: 100%;
    height: auto;
    max-height: 30vh; max-height: 30dvh;
    object-fit: contain;
    margin-inline: auto;
}
.cal-modal__close{
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-panel); border: 1px solid var(--line-mid); border-radius: 0;
    color: var(--gold); font-size: 22px; line-height: 1; cursor: pointer;
    transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.cal-modal__close:hover{
    border-color: var(--gold); color: var(--gold-bright); background: rgba(229,186,0,.08);
}

@media (prefers-reduced-motion: reduce){
    .cal-modal__panel{ animation: none; }
    .cal-day, .cal-day__n{ transition: none; }
}

/* ------------------------------------------------- calendar on small screens
   A day cell is the one control the whole strip depends on, and 34px is under the 44px minimum
   once there is no cursor to hover with. On touch the cells get wider rather than more
   numerous — the strip simply takes longer to drag, which is the right trade. */
@media (max-width: 720px){
    .cal-day{ width: 40px; height: 78px; }
    .cal-day__n{ font-size: 12.5px; }
    .cal-day.is-event .cal-day__n{ font-size: 15px; }
    .cal-mo{ padding-right: 12px; margin-right: 6px; }
    .cal-mo.is-year-start{ padding-left: 10px; margin-left: 6px; }
    .cal-mo__head{ height: 22px; }
    .cal-mo__name{ font-size: 9.5px; letter-spacing: .18em; }
    .cal-mo__year{ font-size: 13px; }
    .cal-strip__track::before{ top: 42px; }

    .cal-jump{ gap: 4px 2px; }
    .cal-jump__btn{ padding: 9px 12px; font-size: 10.5px; letter-spacing: .16em; }

    .cal-stage{ padding-block: 4px 18px; gap: 18px; }
    .cal-stage__excerpt{ margin: 12px 0 18px; font-size: 15px; }
    .cal-stage__more{ width: 100%; padding: 13px 20px; }

    /* Full-bleed, but still a fixed frame with one scroller inside it. */
    .cal-modal{ padding: 0; }
    .cal-modal__panel{ max-width: none; max-height: 100%; border: none; }
    .cal-modal__content{ padding: 52px 18px 28px; }
    .cal-modal__close{ top: 8px; right: 8px; }
}

/* A coarse pointer is not always a narrow screen — a tablet gets the same tap targets. */
@media (hover: none) and (pointer: coarse){
    .cal-day{ min-width: 44px; }
}

@media (max-width: 420px){
    .cal-grid{ gap: 10px; }
    .cal-card__body{ padding: 12px; }
    .cal-card__meta{ font-size: 9.5px; letter-spacing: .16em; margin-bottom: 6px; }
}

/* ------------------------------------------------ Intră în Sanctuar + support forms */
.field-group{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-label{
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-5);
}
.field-label__opt{ margin-left: 6px; letter-spacing: .08em; text-transform: none; color: var(--ink-8); font-size: 12px; }
.field-check{
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
    font-size: 15px; line-height: 1.5; color: var(--ink-3);
}
.field-check input{ width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); flex: none; }

.help-cols{
    display: grid; grid-template-columns: minmax(0,1fr);
    gap: clamp(34px, 5vw, 96px); align-items: start;
}
@media (min-width: 900px){
    .help-cols{ grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
    .help-aside{ position: sticky; top: calc(var(--head-h) + 28px); }
}
.help-form{ max-width: 680px; }

.bank-card{
    margin: 0; padding: clamp(20px, 2.6vw, 30px);
    border: 1px solid var(--line-mid); background: var(--bg-band);
    display: grid; grid-template-columns: minmax(0,1fr); gap: 6px;
}
.bank-card dt{
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-8);
}
.bank-card dd{
    margin: 0 0 16px; font-family: var(--serif); font-size: clamp(18px, 2vw, 23px); color: var(--ink-bright);
}
.bank-card dd:last-child{ margin-bottom: 0; }
.bank-card__iban{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; word-break: break-all; }
.bank-card__iban span{ letter-spacing: .04em; }
.bank-card__copy{
    background: none; border: 1px solid var(--line-half); color: var(--gold);
    padding: 7px 14px; font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    cursor: pointer; transition: background .3s ease, color .3s ease;
}
.bank-card__copy:hover{ background: rgba(229,186,0,.1); color: var(--gold-hover); }

.join-hero{ align-items: start; }
.join-hero__figure{ margin: 0; }
.join-hero__figure img{ border: 1px solid var(--line-soft); }
.join-hero__figure figcaption{
    margin-top: 10px; font-size: 12px; letter-spacing: .08em; color: var(--ink-7); text-align: center;
}
@media (min-width: 900px){
    .join-hero__figure{ position: sticky; top: calc(var(--head-h) + 28px); }
    .join-hero__body{ padding-top: clamp(8px, 2vw, 32px); }
}
@media (max-width: 899px){
    /* On a phone the form is the point of the page: it comes first, the photo after it. */
    .join-hero__figure{ order: 2; max-width: 460px; margin-inline: auto; }
}

.members-box{ max-width: 520px; }
.members-box [hidden]{ display: none !important; }
.members-tabs{ display: flex; border-bottom: 1px solid var(--line-mid); margin-bottom: 26px; }
.members-tabs__btn{
    flex: 1; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 14px 10px; cursor: pointer;
    font-family: var(--sans); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-6);
    transition: color .25s ease, border-color .25s ease;
}
.members-tabs__btn:hover{ color: var(--ink-2); }
.members-tabs__btn.is-active{ color: var(--gold-bright); border-bottom-color: var(--gold); }
.members-box .btn-solid{ align-self: flex-start; }
.members-box__back{
    align-self: flex-start; background: none; border: none; padding: 4px 0; cursor: pointer;
    font-family: var(--sans); font-size: 13px; color: var(--ink-5);
    border-bottom: 1px solid var(--line-soft);
}
.members-box__back:hover{ color: var(--gold); }
.members-box__email{ color: var(--ink-bright); font-weight: 500; word-break: break-all; }
.members-code{ font-size: 24px; letter-spacing: .5em; max-width: 260px; font-variant-numeric: tabular-nums; }
.members-box__welcome{
    border: 1px solid var(--line-mid); background: rgba(16,12,8,.8); padding: clamp(24px, 3vw, 36px);
}
.members-box__soon, .welcome__soon{
    margin: 0; font-family: var(--serif); font-style: italic;
    font-size: clamp(17px, 2vw, 22px); line-height: 1.5; color: var(--gold);
}
.members-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Profile fields (members 1.1.0): the optional "more about you" section on the join form, the
   "Profilul meu" form, choice chips and the newsletter tick-box. The fields themselves are the
   admin's list (Members › Profile fields), so nothing here names one. */
.members-more{ border-top: 1px solid var(--line-soft); padding-top: 16px; }
.members-more > summary{
    display: inline-flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-4);
    transition: color .25s ease;
}
.members-more > summary::-webkit-details-marker{ display: none; }
.members-more > summary::before{ content: '+'; width: 10px; color: var(--gold); font-size: 15px; letter-spacing: 0; }
.members-more[open] > summary::before{ content: '\2212'; }
.members-more > summary:hover{ color: var(--ink-2); }
.members-more > summary:focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; }
.members-more__body{ display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.members-choices{ border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.members-choices > legend{ float: left; width: 100%; padding: 0; margin: 0 0 2px; }
.members-choice{ position: relative; cursor: pointer; }
.members-choice input{ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.members-choice span{
    display: inline-block; padding: 7px 12px; border: 1px solid var(--line-input); background: var(--bg-panel);
    font-size: 13px; line-height: 1.3; color: var(--ink-3);
    transition: border-color .2s ease, color .2s ease, background .2s ease, opacity .2s ease;
}
.members-choice:hover span{ border-color: var(--line-half); color: var(--ink-2); }
.members-choice input:checked + span{ border-color: var(--gold); color: var(--gold-bright); background: rgba(229,186,0,.08); }
.members-choice input:focus-visible + span{ outline: 2px solid var(--gold); outline-offset: 2px; }
.members-choices.is-full .members-choice input:not(:checked) + span{ opacity: .4; }
select.field{
    appearance: none; -webkit-appearance: none; color-scheme: dark; cursor: pointer; padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e5ba00' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
select.field option{ background: var(--bg-panel); color: var(--ink); }
.members-check-note{ display: block; margin-top: 2px; font-size: 13px; color: var(--ink-5); }
.members-profile{ margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-soft); }

.help-links{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(16px, 2vw, 24px);
}
.help-link{
    position: relative; display: flex; flex-direction: column; gap: 12px;
    padding: clamp(22px, 2.6vw, 32px); padding-bottom: 64px;
    border: 1px solid var(--line-mid); background: var(--bg-band); color: var(--ink);
    transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.help-link:hover{ border-color: var(--gold); background: #15100a; color: var(--ink); transform: translateY(-3px); }
.help-link__no{ font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: var(--gold); }
.help-link__title{ font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); line-height: 1.3; color: var(--ink-bright); }
.help-link__text{ font-size: 14.5px; line-height: 1.7; color: var(--ink-5); font-weight: 300; }
.help-link__arrow{
    position: absolute; left: clamp(22px, 2.6vw, 32px); bottom: 22px;
    color: var(--gold); font-size: 20px; transition: transform .3s ease;
}
.help-link:hover .help-link__arrow{ transform: translateX(6px); }

.welcome__mark{ height: 56px; width: auto; opacity: .9; }
.welcome__soon{ max-width: 620px; margin-inline: auto; }

@media (prefers-reduced-motion: reduce){
    .help-link, .help-link__arrow{ transition: none; }
    .help-link:hover{ transform: none; }
}