/*
Theme Name: Recaliu
Theme URI: https://recaliu.fr/
Author: Trio Recaliu
Description: Thème dédié du trio de cant occitan RECALIU (Quercy / Aveyron). Page unique bilingue occitan/français, style N&B « letterpress », fond de hero en vidéo, lecteur audio, agenda par shortcode (GigPress / The Events Calendar).
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: recaliu
*/
:root{
  /* two-ink letterpress, pulled from the brick-red linocut on cream paper */
  --paper:#e7dcc3;
  --paper-2:#ddcfb0;
  --paper-3:#d2c19d;
  --ink:#211b14;          /* warm near-black ink */
  --ink-soft:#4f4434;
  --brick:#8d2d1a;        /* the linocut red — second ink */
  --brick-2:#a8482b;
  --night:#191510;        /* ink-black for the veillée / listening room */
  --night-2:#221b14;
  --on-night:#e7dcc3;
  --on-night-soft:#a8967a;
  --rule:rgba(33,27,20,.26);
  --rule-soft:rgba(33,27,20,.14);
  --rule-night:rgba(231,220,195,.2);
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
  --disp:"Fraunces",Georgia,serif;
  --read:"Spectral",Georgia,serif;
  --ui:"Hanken Grotesk",system-ui,sans-serif;
  --duo:grayscale(1) sepia(.34) contrast(1.06) brightness(1.02); /* warm printed-plate B&W */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--read);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
/* paper grain + edge */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.05;margin:0;letter-spacing:-.005em}
p{margin:0 0 1.1em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:2}

/* language swap */
[data-lang="oc"] [data-l="fr"]{display:none}
[data-lang="fr"] [data-l="oc"]{display:none}

/* type helpers */
.eyebrow{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brick);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--brick);display:inline-block}
.oc-accent{font-family:var(--disp);font-style:italic;color:var(--brick)}
.lead{font-size:1.2rem;line-height:1.6}
.serifnum{font-variant-numeric:tabular-nums}

/* printed double rule */
.rule2{border:0;height:0;margin:0;border-top:2px solid var(--ink);position:relative}
.rule2::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:1px solid var(--ink);opacity:.5}
.brickrule{border:0;height:2px;margin:0;background:var(--brick);opacity:.85}

/* ---------- top bar ---------- */
header.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:22px;padding:13px var(--pad);transition:background .35s,box-shadow .35s,padding .35s;
  border-bottom:1px solid transparent}
header.bar.solid{background:rgba(231,220,195,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(141,45,26,.25)}
.brand{font-family:var(--disp);font-weight:900;font-size:1.3rem;letter-spacing:.06em;color:var(--ink);text-transform:uppercase}
.brand .c{color:var(--brick)}
nav.main{display:flex;gap:24px;align-items:center;font-family:var(--ui);font-size:.84rem;font-weight:600}
nav.main a{color:var(--ink-soft);position:relative;padding:3px 0}
nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--brick);transition:width .3s}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after{width:100%}
.langtog{display:flex;border:1.5px solid var(--ink);border-radius:2px;overflow:hidden;font-family:var(--ui);font-weight:700;font-size:.72rem}
.langtog button{background:none;border:0;padding:6px 10px;cursor:pointer;color:var(--ink-soft);letter-spacing:.08em}
.langtog button.on{background:var(--ink);color:var(--paper)}
.menu-btn{display:none;background:none;border:1.5px solid var(--ink);color:var(--ink);width:42px;height:38px;cursor:pointer;font-size:1.1rem}
/* legible bar over the dark hero (transparent state) */
header.bar:not(.solid) .brand{color:var(--paper)}
header.bar:not(.solid) .brand .c{color:var(--brick-2)}
header.bar:not(.solid) nav.main a{color:rgba(231,220,195,.85)}
header.bar:not(.solid) nav.main a:hover{color:var(--paper)}
header.bar:not(.solid) .langtog{border-color:rgba(231,220,195,.7)}
header.bar:not(.solid) .langtog button{color:rgba(231,220,195,.85)}
header.bar:not(.solid) .langtog button.on{background:var(--paper);color:var(--ink)}
header.bar:not(.solid) .menu-btn{border-color:rgba(231,220,195,.7);color:var(--paper)}
header.bar:not(.solid) nav.main.open a{color:var(--ink-soft)}
header.bar:not(.solid) nav.main.open a:hover{color:var(--ink)}
@media(max-width:1040px){
  nav.main{display:none}
  nav.main.open{display:flex;position:absolute;top:100%;right:0;left:0;flex-direction:column;align-items:flex-start;
    gap:0;background:var(--paper);padding:8px var(--pad) 20px;border-bottom:1px solid var(--rule)}
  nav.main.open a{padding:11px 0;font-size:1rem;width:100%;border-bottom:1px solid var(--rule-soft)}
  .menu-btn{display:block}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(46px,8vh,92px);
  overflow:hidden;isolation:isolate;border-bottom:3px solid var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:-3;background:var(--paper-3)}
.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--duo) brightness(.92)}
/* the fire / braise video keeps its ember warmth, toned to the paper-ink palette */
.hero-video{filter:sepia(.42) saturate(1.4) contrast(1.07) brightness(.82) grayscale(.12)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(to top,rgba(20,16,11,.88) 2%,rgba(20,16,11,.34) 42%,rgba(20,16,11,.28) 100%)}
/* brick ink wash bottom — the ember */
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 130% at 50% 130%, rgba(141,45,26,.42), transparent 62%);mix-blend-mode:multiply}
.hero-inner{width:100%}
.hero .eyebrow{color:#e6b9a2;margin-bottom:20px}
.hero .eyebrow::before{background:var(--brick-2)}
.hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(4.6rem,18vw,16rem);line-height:.82;
  letter-spacing:-.02em;color:var(--paper);text-transform:uppercase;margin:0;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.hero h1 .c{color:var(--brick-2)}
.hero-tag{font-family:var(--disp);font-style:italic;font-weight:500;font-size:clamp(1.15rem,2.4vw,1.7rem);
  color:#ecd9bf;max-width:30ch;margin:26px 0 8px;line-height:1.32}
.hero-sub{font-family:var(--ui);font-size:.96rem;color:#d6c6ab;max-width:48ch;margin-bottom:32px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.btn{font-family:var(--ui);font-weight:700;font-size:.86rem;letter-spacing:.04em;padding:13px 24px;cursor:pointer;
  border:2px solid transparent;display:inline-flex;align-items:center;gap:9px;transition:transform .2s,background .2s,color .2s,border-color .2s;text-transform:uppercase}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brick);color:var(--paper);border-color:var(--brick)}
.btn-primary:hover{background:var(--brick-2);border-color:var(--brick-2)}
.btn-ghost{border-color:rgba(231,220,195,.6);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(231,220,195,.1)}
.hero-play{width:50px;height:50px;border-radius:50%;border:2px solid var(--paper);background:rgba(231,220,195,.12);
  color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:.2s}
.hero-play:hover{background:var(--brick);border-color:var(--brick)}
.hero-play svg{width:18px;height:18px;fill:currentColor;margin-left:2px}
.hero-play.playing svg{margin-left:0}

/* ---------- sections ---------- */
section{padding-block:clamp(72px,11vh,138px);position:relative}
.section-head{max-width:64ch;margin-bottom:52px}
.section-head h2{font-size:clamp(2.2rem,5vw,3.7rem);margin:16px 0 0;font-weight:600}
.night{background:var(--night);color:var(--on-night)}
.night h1,.night h2,.night h3{color:var(--paper)}
.night .eyebrow{color:#e6b9a2}
.night .eyebrow::before{background:var(--brick-2)}
.night p{color:#cdbc9f}
.night .lead{color:var(--paper)}
.night .rule2{border-color:var(--on-night-soft)}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* duotone images everywhere */
.duo{filter:var(--duo)}
figure{margin:0}

/* ---------- trio ---------- */
.trio-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,68px);align-items:center}
@media(max-width:860px){.trio-grid{grid-template-columns:1fr}}
.framed{border:1px solid var(--ink);padding:10px;background:var(--paper-2)}
.framed img{filter:var(--duo)}
.figcap{font-family:var(--ui);font-size:.74rem;letter-spacing:.03em;color:var(--ink-soft);margin-top:10px}
.members{list-style:none;padding:0;margin:28px 0 0}
.members li{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-top:1px solid var(--rule)}
.members li:last-child{border-bottom:1px solid var(--rule)}
.members .name{font-family:var(--disp);font-size:1.35rem;font-weight:600}
.members .role{font-family:var(--ui);font-size:.76rem;color:var(--ink-soft);margin-left:auto;text-align:right}

/* ---------- concert ---------- */
.concert-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:860px){.concert-grid{grid-template-columns:1fr}}
.cd-stack{position:relative}
.cd-stack img{border:1px solid var(--ink);box-shadow:14px 14px 0 var(--paper-3)}
.cd-badge{position:absolute;top:-14px;left:-10px;background:var(--brick);color:var(--paper);font-family:var(--ui);
  font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:8px 13px}
.instruments{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.chip{font-family:var(--ui);font-size:.78rem;font-weight:600;color:var(--ink);border:1.5px solid var(--ink);padding:6px 13px;background:transparent}
.meta-row{display:flex;flex-wrap:wrap;gap:30px;margin-top:28px;font-family:var(--ui);font-size:.84rem}
.meta-row .k{display:block;color:var(--brick);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;margin-bottom:3px}

/* pull quote (Bobin, from the CD) */
.pullquote{max-width:760px;margin:0 auto;text-align:center}
.pullquote q{font-family:var(--disp);font-style:italic;font-weight:500;font-size:clamp(1.5rem,4vw,2.5rem);line-height:1.25;quotes:none}
.pullquote q::before,.pullquote q::after{content:""}
.pullquote .by{font-family:var(--ui);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brick);margin-top:22px;display:block}

/* ---------- 1946 ---------- */
.show-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:start}
@media(max-width:860px){.show-grid{grid-template-columns:1fr}}
.tag-1946{font-family:var(--disp);font-weight:900;font-size:clamp(3.4rem,9vw,6.5rem);color:var(--brick-2);line-height:.86;margin-bottom:6px}
.show-fig img{border:1px solid var(--rule-night);filter:var(--duo)}
.show-fig .figcap{color:var(--on-night-soft)}

/* ---------- player ---------- */
.player{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,54px);align-items:start}
@media(max-width:880px){.player{grid-template-columns:1fr}}
.np{border:1px solid var(--rule-night);padding:clamp(22px,3vw,34px);position:relative;background:var(--night-2)}
.np-title{font-family:var(--disp);font-size:clamp(1.7rem,3.2vw,2.3rem);color:var(--paper);min-height:1.1em;font-weight:600}
.np-sub{font-family:var(--ui);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#e6b9a2;margin:4px 0 26px}
.np-bar{display:flex;align-items:center;gap:12px;font-family:var(--ui);font-size:.74rem;color:var(--on-night-soft)}
.seek{flex:1;height:4px;background:rgba(231,220,195,.16);position:relative;cursor:pointer}
.seek-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--brick-2)}
.seek-knob{position:absolute;top:50%;left:100%;width:11px;height:11px;border-radius:50%;background:var(--paper);transform:translate(-50%,-50%)}
.np-ctrl{display:flex;align-items:center;gap:18px;margin-top:24px}
.ctrl{background:none;border:0;color:var(--paper);cursor:pointer;display:grid;place-items:center;padding:6px;transition:.2s}
.ctrl:hover{color:var(--brick-2);transform:scale(1.08)}
.ctrl svg{width:22px;height:22px;fill:currentColor}
.play-big{width:58px;height:58px;border-radius:50%;background:var(--brick);color:var(--paper)}
.play-big:hover{background:var(--brick-2);color:var(--paper)}
.play-big svg{width:23px;height:23px}
.playlist{list-style:none;margin:0;padding:0}
.playlist li{display:flex;align-items:center;gap:15px;padding:14px 10px;border-bottom:1px solid var(--rule-night);cursor:pointer;font-family:var(--ui);transition:background .2s,padding-left .2s}
.playlist li:hover{background:rgba(231,220,195,.05);padding-left:16px}
.playlist li.active{background:rgba(141,45,26,.16)}
.playlist .num{font-family:var(--disp);font-size:1rem;color:var(--on-night-soft);width:26px;font-variant-numeric:tabular-nums}
.playlist li.active .num{color:var(--brick-2)}
.playlist .eq{width:15px;display:flex;gap:2px;align-items:flex-end;height:15px}
.playlist .eq span{width:3px;background:var(--brick-2);height:30%}
.playlist li.active.playing .eq span{animation:eq .9s ease-in-out infinite}
.playlist li.active.playing .eq span:nth-child(2){animation-delay:.25s}
.playlist li.active.playing .eq span:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:22%}50%{height:96%}}
.playlist .t-name{font-size:.98rem;color:var(--paper);font-weight:600}
.playlist .t-sub{font-size:.7rem;color:var(--on-night-soft);display:block}
.playlist .t-dur{margin-left:auto;font-size:.76rem;color:var(--on-night-soft);font-variant-numeric:tabular-nums}
.colophon{margin-top:30px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;font-family:var(--ui);font-size:.8rem;color:var(--on-night-soft);line-height:1.6}
.colophon img{width:92px;border:1px solid var(--rule-night);filter:var(--duo)}
.colophon a{color:#e6b9a2}

/* ---------- lyrics ---------- */
.lyric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.lyric-grid{grid-template-columns:1fr}}
.lyric{border:1px solid var(--ink)}
.lyric summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.lyric summary::-webkit-details-marker{display:none}
.lyric summary .ttl{display:flex;align-items:baseline;gap:14px}
.lyric summary .no{font-family:var(--disp);font-weight:900;color:var(--brick);font-size:1.1rem}
.lyric summary h3{font-size:1.3rem;font-weight:600}
.lyric .plus{color:var(--brick);font-size:1.4rem;transition:transform .3s}
.lyric[open] .plus{transform:rotate(45deg)}
.lyric .body{padding:0 22px 22px;font-family:var(--read);font-size:.95rem;color:var(--ink-soft);white-space:pre-line;line-height:1.9}
.lyric .src{font-family:var(--ui);font-size:.68rem;letter-spacing:.04em;color:var(--brick);margin-top:14px;text-transform:uppercase}

/* ---------- agenda ---------- */
.agenda{max-width:860px}
.gig{display:grid;grid-template-columns:135px 1fr auto;gap:22px;align-items:baseline;padding:19px 0;border-top:1px solid var(--rule-night)}
.gig:last-child{border-bottom:1px solid var(--rule-night)}
.gig .date{font-family:var(--ui);font-weight:700;font-size:.82rem;color:#e6b9a2;letter-spacing:.03em}
.gig .ev{font-family:var(--read);color:var(--paper)}
.gig .place{font-family:var(--ui);font-size:.8rem;color:var(--on-night-soft);text-align:right}
.gig.tbd .ev{color:var(--on-night-soft)}
.gig.spot{border-left:3px solid var(--brick);padding-left:18px;margin-left:-21px}
@media(max-width:640px){.gig{grid-template-columns:1fr;gap:3px}.gig .place{text-align:left}}
.past{margin-top:48px;border-top:1px solid var(--rule-night);padding-top:36px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
@media(max-width:760px){.past{grid-template-columns:1fr}}
.past img{border:1px solid var(--rule-night);filter:var(--duo)}

/* ---------- press ---------- */
.press-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.press-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.press a{display:block;border:1px solid var(--ink);background:var(--paper-2);overflow:hidden;position:relative;transition:transform .3s}
.press a:hover{transform:translateY(-5px)}
.press img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:var(--duo)}
.press .cap{font-family:var(--ui);font-size:.74rem;color:var(--ink-soft);margin-top:9px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:start}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
.contact h2{font-size:clamp(2.4rem,6vw,4rem)}
.c-links{font-family:var(--ui);margin-top:10px}
.c-links a{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule-night);font-size:1.05rem;color:var(--paper);transition:.2s}
.c-links a:hover{color:#e6b9a2;padding-left:8px}
.c-links a .lab{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-soft);width:104px;flex:none}
footer{padding:28px var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--ui);font-size:.76rem;color:var(--on-night-soft);border-top:1px solid var(--rule-night)}
footer .brand{font-size:1rem;color:var(--paper)}
footer a:hover{color:#e6b9a2}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(16,12,8,.95);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:90vh;border:3px solid var(--paper)}
.lb .x{position:absolute;top:18px;right:24px;color:var(--paper);font-size:2rem;cursor:pointer;font-family:var(--ui)}