/* =========================================================================
   Rachot — Program hub (P2), "Fanzine" direction.
   All rules scoped under .rachot-program so the rest of the site is untouched.
   Fonts (Anton, Space Mono) are enqueued separately.
   ========================================================================= */

/* Sunset-coral accent for the Respect Festival sub-brand. Rachot stays indigo
   (--rachot); festival surfaces + festival-category cards (.rl-card.is-fest)
   swap to coral so the two are instantly distinguishable. Global so it reaches
   every card context. */
:root{ --fest:#F2542D; --fest-deep:#7A1E12; }

.rachot-program{
	--ink:#14130f;
	--paper:#e7e3d6;
	--rachot:#231A71;
	--danger:#c1271c;
	background:var(--paper);
	color:var(--ink);
	font-family:'Space Mono',monospace;
	position:relative;
	overflow:hidden;
	/* full-bleed: override the legacy main{max-width} cap so the Fanzine
	   ticker/hero/grid span edge-to-edge (festival pages already do). When used
	   as an inner wrapper (unified cards on legacy pages) this stays 100%. */
	width:100%;
	max-width:none;
	margin:0;
}
/* kill the legacy `main{padding:40px 0 0}` so the ticker/hero sits flush under
   the topbar (no paper gap) on the full-bleed program/festival surfaces */
main.rachot-program,main.rachot-festival,main:has(.rl-respect-home){padding-top:0}
.rachot-program *{box-sizing:border-box;border-radius:0}
.rachot-program a{text-decoration:none;color:inherit}
.rachot-program img{display:block;max-width:100%}

/* grain overlay */
.rachot-program::before{
	content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;mix-blend-mode:multiply;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rachot-program > *{position:relative;z-index:2}

/* ticker */
.rl-ticker{overflow:hidden;white-space:nowrap;background:var(--rachot);color:#fff;border-top:5px solid var(--ink);border-bottom:2px solid var(--ink)}
.rl-ticker__in{display:inline-block;padding:7px 0;animation:rl-tick 30s linear infinite;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.rl-ticker__in span{margin:0 22px}
.rl-ticker__in a{margin:0 22px;color:inherit;text-decoration:none}
.rl-ticker__in a:hover,.rl-ticker__in a:focus-visible{text-decoration:underline}
/* pause the marquee on hover so the moving links can be read + clicked */
.rl-ticker:hover .rl-ticker__in,.rl-ticker:focus-within .rl-ticker__in{animation-play-state:paused}
.rl-ticker__label{font-weight:700}
@keyframes rl-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rl-ticker__in{animation:none}}

/* masthead */
.rl-masthead{padding:34px 30px 32px;display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rl-masthead h1{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(64px,14vw,190px);line-height:.8;text-transform:uppercase;letter-spacing:-.01em;margin:0}
.rl-stamp{border:3px solid var(--rachot);color:var(--rachot);transform:rotate(-4deg);padding:6px 12px;font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.1em;margin-bottom:18px}
.rl-masthead p{max-width:340px;font-size:14px;line-height:1.5;margin:0 0 14px;border-left:3px solid var(--ink);padding-left:12px}

/* filters */
.rl-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 30px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin-top:18px;position:sticky;top:0;background:var(--paper)}
.rl-seg{display:flex;border:2px solid var(--ink)}
.rl-seg button{padding:8px 16px;font:700 12px/1 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.06em;border:0;border-right:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.rl-seg button:last-child{border-right:0}
.rl-seg button.is-on{background:var(--rachot);color:#fff}
.rl-chips{display:flex;flex-wrap:wrap;border-right:2px solid var(--ink)}
.rl-chip{border:2px solid var(--ink);border-right-width:0;padding:7px 13px;font:700 12px/1 'Space Mono',monospace;background:var(--paper);color:var(--ink);cursor:pointer;transition:.1s}
.rl-chip:hover{background:var(--ink);color:var(--paper)}
.rl-chip.is-on{background:var(--rachot);color:#fff}
.rl-count{margin-left:auto;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:#5a5546}

/* grid */
.rl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;padding:24px 30px 70px}
.rl-empty{padding:40px;font-size:14px;opacity:.7}

/* archive load-more (Archiv tab) */
.rl-archive{display:flex;justify-content:center;padding:0 30px 70px}
.rl-archive[hidden]{display:none}
.rl-archive__btn{font:700 13px/1 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.08em;padding:14px 34px;border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s,color .12s}
.rl-archive__btn:hover:not(:disabled){background:var(--ink);color:var(--paper);transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--rachot)}
.rl-archive__btn:disabled{cursor:default;opacity:.55}

/* card */
.rl-card{position:relative;border:2.5px solid var(--ink);background:var(--paper);display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s}
.rl-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--rachot)}
.rl-card__media{position:relative;aspect-ratio:310/300;border-bottom:2.5px solid var(--ink);overflow:hidden;display:block}
.rl-card__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.4) brightness(1.05);transition:filter .4s}
.rl-card:hover .rl-card__media img{filter:none}
.rl-card__cat{position:absolute;top:12px;left:-9px;background:var(--ink);color:var(--paper);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.12em;padding:5px 10px;transform:rotate(-2deg);z-index:3;box-shadow:3px 3px 0 rgba(20,18,12,.22)}
.rl-card__cat.respect{background:var(--fest)}
/* Festival-category cards wear the sunset-coral accent (ribbon, hover shadow,
   origin, buy hover) so they read as Respect Festival anywhere they appear,
   distinct from Rachot's indigo. Same layout — only the colour changes. */
.rl-card.is-fest:hover{box-shadow:8px 8px 0 var(--fest)}
.rl-card.is-fest .rl-card__origin{color:var(--fest-deep)}
.rl-card.is-fest .rl-card__title a:hover{color:var(--fest)}
.rl-card.is-fest .rl-btn-buy:hover{background:var(--fest)}
.rl-card__status{position:absolute;bottom:10px;right:10px;background:var(--danger);color:#fff;font-weight:700;font-size:11px;text-transform:uppercase;padding:4px 9px;transform:rotate(3deg);z-index:2}
.rl-card__origin--over{display:none}
/* body fills the card height so the meta's margin-top:auto pins the action row
   to the BOTTOM on every card regardless of title/desc length */
.rl-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.rl-card__origin{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--rachot);margin:14px 14px 6px}
.rl-card__title{font-family:'Anton',sans-serif;font-weight:400;font-size:23px;line-height:1;text-transform:uppercase;letter-spacing:.005em;margin:0 14px 8px;overflow-wrap:break-word;text-wrap:balance}
.rl-card__title a:hover{color:var(--rachot)}
.rl-card__desc{font-size:13px;line-height:1.45;margin:0 14px 12px;color:#3a362c;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rl-card__meta{margin:auto 14px 12px;padding-top:10px;border-top:2px dotted var(--ink);display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700}
.rl-card__venue{font-weight:400;text-align:right}
.rl-card__actions{display:flex;margin:0 14px 14px;border:2px solid var(--ink)}
.rl-btn-buy{flex:1;text-align:center;background:var(--ink);color:var(--paper);padding:10px;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.08em;transition:.12s}
.rl-btn-buy:hover{background:var(--rachot)}
.rl-btn-buy.is-info{background:var(--paper);color:var(--ink)}
.rl-btn-buy.is-info:hover{background:var(--ink);color:var(--paper)}
.rl-btn-fb{padding:10px 12px;border-left:2px solid var(--ink);font-size:12px;font-weight:700}
.rl-btn-fb:hover{background:var(--ink);color:var(--paper)}

/* `.rachot-program a{color:inherit}` (0,1,1) was overriding the button text
   colours (0,1,0) -> dark-on-dark, invisible. Re-assert with the actions
   ancestor so the labels are legible. */
.rl-card__actions .rl-btn-buy{color:var(--paper)}
.rl-card__actions .rl-btn-buy:hover{color:#fff}
.rl-card__actions .rl-btn-buy.is-info{color:var(--ink)}
.rl-card__actions .rl-btn-buy.is-info:hover{color:var(--paper)}
.rl-card__actions .rl-btn-fb{color:var(--ink)}
.rl-card__actions .rl-btn-fb:hover{color:var(--paper)}

.rl-card[hidden]{display:none}

@media(max-width:640px){
	.rl-masthead h1{font-size:19vw}
	.rl-filters{top:0}
}

/* =========================================================================
   Homepage (P3): festival banner, countdown, program section, newsletter
   ========================================================================= */
.rl-home{padding-bottom:0}
.rl-fest{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--fest) 0%,var(--fest-deep) 72%,var(--ink) 120%);color:#fff;border-bottom:2.5px solid var(--ink)}
.rl-fest__title a{color:#fff}
.rl-fest__title a:hover{opacity:.82}
.rl-fest[style*="--fest-img"]::before{content:"";position:absolute;inset:0;background:var(--fest-img) center/cover;opacity:.35;mix-blend-mode:luminosity}
.rl-fest__tag{position:absolute;top:0;left:0;background:#fff;color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px;padding:6px 12px;z-index:3}
.rl-fest__inner{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:flex-start;gap:128px;flex-wrap:wrap;padding:56px 30px 30px}
.rl-fest__kicker{text-transform:uppercase;letter-spacing:.18em;font-size:12px;opacity:.9;margin:0 0 8px}
.rl-fest__title{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(48px,9vw,124px);line-height:.8;text-transform:uppercase;margin:0;letter-spacing:-.01em}
.rl-fest__date{font-size:clamp(18px,3vw,30px);font-weight:700;margin:10px 0 0;letter-spacing:.03em}
.rl-fest__aside{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.rl-countdown{display:flex;gap:8px}
.rl-cd{background:#fff;color:var(--ink);border:2px solid var(--ink);min-width:64px;text-align:center;padding:8px 6px}
.rl-cd b{font-family:'Anton',sans-serif;font-weight:400;font-size:30px;display:block;line-height:1}
.rl-cd i{font-style:normal;text-transform:uppercase;font-size:10px;letter-spacing:.08em}
.rl-fest__cta{display:flex;gap:10px;flex-wrap:wrap}
.rl-fest .rl-btn-buy{display:inline-block;background:#fff;color:var(--ink);border:2px solid var(--ink);padding:12px 22px;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.06em;transition:.12s}
.rl-fest .rl-btn-buy:hover{background:var(--ink);color:#fff}
.rl-btn-ghost{display:inline-block;border:2px solid #fff;color:#fff;padding:12px 18px;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em;transition:.12s}
.rl-btn-ghost:hover{background:#fff;color:var(--fest)}

.rl-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:28px 30px 0}
.rl-section-head h2{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(34px,6vw,64px);text-transform:uppercase;margin:0;line-height:.9}
.rl-seeall{font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.06em;border-bottom:2px solid var(--ink)}
.rl-seeall:hover{color:var(--rachot);border-color:var(--rachot)}

.rl-news{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;background:var(--ink);color:var(--paper);padding:38px 30px;border-top:2.5px solid var(--ink)}
.rl-news__title{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(30px,5vw,54px);text-transform:uppercase;margin:0 0 6px;line-height:.9}
.rl-news__p{max-width:460px;font-size:13px;line-height:1.5;opacity:.85;margin:0}
.rl-news__form{display:flex;border:2px solid var(--paper)}
.rl-news__form input{background:transparent;border:0;color:var(--paper);padding:14px 16px;font:400 14px/1 'Space Mono',monospace;min-width:230px}
.rl-news__form input::placeholder{color:#a8a392}
.rl-news__form .rl-btn-buy{background:var(--paper);color:var(--ink);border:0;padding:14px 20px;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.06em;cursor:pointer;transition:.12s}
.rl-news__form .rl-btn-buy:hover{background:var(--rachot);color:#fff}
@media(max-width:640px){.rl-fest__inner{padding:48px 18px 22px}.rl-news__form{width:100%}.rl-news__form input{flex:1;min-width:0}}

/* =========================================================================
   Conservative content cap (June 2026, user pref): the Fanzine surfaces stay
   full-bleed for the COLOURED bands (ticker, festival banner/hero, ink
   newsletter), but the actual content — card grids, mastheads, filter bars,
   schedule — is pulled into a centred max-width column. --container = 1240px.
   ========================================================================= */
.rl-grid,
.rl-masthead,
.rl-filters,
.rl-section-head,
.rf-note,
.rf-days,
.rf-sched,
.rf-views{
	max-width:var(--container,1240px);
	margin-inline:auto;
}

/* The HOMEPAGE is an exact full-width replica of the program-hub mockup, so it
   opts OUT of the conservative content cap — masthead, filters and grid run
   edge-to-edge (the rest of the site stays capped at --container). The festival
   Lineup/Calendar/Schedule keep their coloured hero bands full-bleed but pull
   their content (filters, grid, calendar, timetable) into the centred column. */
.rl-home .rl-grid,
.rl-home .rl-masthead,
.rl-home .rl-filters{
	max-width:none;
	margin-inline:0;
}