/* Coffee Festival Europe — the Über-uns family: hub, festival, team, press,
   media and the recap gallery. Loaded on those pages only. */

/* ---------- FESTIVAL: the three rules ----------------------------------- */
.rules{display:grid;gap:clamp(14px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.rule{position:relative;overflow:hidden;padding:clamp(20px,2.4vw,32px);
  border-radius:clamp(14px,1.4vw,22px);
  border:1px solid rgba(244,238,228,.1);background:rgba(244,238,228,.03);
  transition:border-color .5s var(--e-out-cubic),background-color .5s var(--e-out-cubic),
             transform .8s var(--e-out-expo)}
.rule:hover{border-color:rgba(226,85,30,.34);background:rgba(244,238,228,.05);transform:translateY(-4px)}
.rule__n{display:block;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;
  color:var(--ember)}
.rule__t{margin-top:.8em;font-family:var(--f-display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.14;letter-spacing:-.02em;color:var(--ivory)}
.rule__b{margin-top:.6em;font-size:clamp(.86rem,.96vw,.96rem);line-height:1.62;
  color:var(--bone);opacity:.8}

/* ---------- FESTIVAL: timeline ------------------------------------------ */
.tl{position:relative;list-style:none;margin:0;padding:0 0 0 clamp(22px,2.4vw,34px);
  display:grid;gap:clamp(18px,2.4vw,32px)}
.tl::before{content:'';position:absolute;left:clamp(5px,.6vw,9px);top:.55em;bottom:.55em;width:1px;
  background:linear-gradient(180deg,var(--ember),rgba(226,85,30,.12));
  transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--e-out-expo)}
.tl.is-in::before{transform:scaleY(1)}
.tl__item{position:relative;display:grid;
  grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:.4em clamp(14px,2vw,28px);
  align-items:baseline}
.tl__dot{position:absolute;left:calc(-1 * clamp(22px,2.4vw,34px) + clamp(2px,.3vw,5px));
  top:.5em;width:9px;height:9px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 4px rgba(226,85,30,.16)}
.tl__year{font-family:var(--f-mono);font-size:clamp(.86rem,1vw,1rem);letter-spacing:.1em;
  color:var(--ivory)}
.tl__b{font-size:clamp(.88rem,1vw,.98rem);line-height:1.62;color:var(--bone);opacity:.8}

/* ---------- TEAM --------------------------------------------------------- */
.people{display:grid;gap:clamp(14px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.person{padding:clamp(18px,2.2vw,28px);border-radius:clamp(14px,1.4vw,22px);
  border:1px solid rgba(244,238,228,.1);background:rgba(244,238,228,.03);
  transition:border-color .5s var(--e-out-cubic),transform .8s var(--e-out-expo)}
.person:hover{border-color:rgba(226,85,30,.3);transform:translateY(-3px)}
.person__avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  overflow:hidden;background:rgba(226,85,30,.1);border:1px solid rgba(226,85,30,.2)}
.person__avatar img{width:100%;height:100%;object-fit:cover}
.person__mono{font-family:var(--f-mono);font-size:.9rem;letter-spacing:.1em;color:var(--ember-lo)}
.person__role{margin-top:1rem}
.person__name{margin-top:.4em;font-family:var(--f-display);font-weight:700;font-stretch:104%;
  font-size:clamp(1rem,1.3vw,1.24rem);letter-spacing:-.02em;color:var(--ivory)}
.person__b{margin-top:.55em;font-size:clamp(.84rem,.94vw,.94rem);line-height:1.6;
  color:var(--bone);opacity:.78}

/* ---------- PRESS: boilerplate ------------------------------------------ */
.boiler{position:relative;margin:0;padding:clamp(22px,2.8vw,40px);
  border-radius:clamp(16px,1.6vw,24px);border-left:2px solid var(--ember);
  background:rgba(244,238,228,.035)}
.boiler p{margin:0;font-size:clamp(.98rem,1.2vw,1.16rem);line-height:1.68;color:var(--bone)}
.boiler.is-copied::after{content:attr(data-copied);position:absolute;right:clamp(16px,2vw,26px);
  top:clamp(16px,2vw,26px);padding:.28em .7em;border-radius:999px;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--ember)}

/* ---------- MEDIA: assets and swatches ---------------------------------- */
.assets{display:grid;gap:clamp(14px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.asset{display:flex;flex-direction:column;gap:.55rem;padding:clamp(18px,2.2vw,28px);
  border-radius:clamp(14px,1.4vw,22px);
  border:1px solid rgba(244,238,228,.1);background:rgba(244,238,228,.03)}
.asset__stage{display:grid;place-items:center;padding:clamp(20px,3vw,40px);border-radius:14px;
  background:rgba(11,8,6,.55);margin-bottom:.6rem}
.asset__stage img{width:clamp(72px,7vw,104px);height:auto}
.asset.is-line .asset__stage{background:var(--ivory)}
.asset.is-line .asset__stage img{filter:invert(1) brightness(.15)}
.asset.is-wide .asset__stage{background:var(--ivory)}
.asset.is-wide .asset__stage img{width:min(100%,220px);color:var(--ink)}
.asset__t{font-weight:650;color:var(--ivory);font-size:clamp(.96rem,1.1vw,1.08rem)}
.asset__b{font-size:clamp(.82rem,.92vw,.9rem);line-height:1.55;color:var(--bone);opacity:.76}
.asset__dl{margin-top:auto;padding-top:.7rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.12em;
  color:var(--ember-lo);transition:color .35s}
.asset__dl svg{width:13px;height:13px;transition:transform .5s var(--e-out-expo)}
.asset__dl:hover{color:var(--ivory)}
.asset__dl:hover svg{transform:translateY(2px)}

.sws{display:grid;gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
.sw{display:grid;gap:.35rem;padding:.9rem;border-radius:14px;
  border:1px solid rgba(244,238,228,.1);background:rgba(244,238,228,.03)}
.sw__chip{display:block;height:clamp(56px,6vw,84px);border-radius:10px;background:var(--c);
  border:1px solid rgba(244,238,228,.14)}
.sw__n{margin-top:.4rem;font-weight:640;color:var(--ivory);font-size:.92rem}
.sw__hex,.sw__var{font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.08em;
  color:var(--muted)}

.typespec{display:grid;gap:.2rem;margin:1.6em 0;padding:clamp(18px,2.2vw,30px);border-radius:16px;
  border:1px solid rgba(244,238,228,.1);background:rgba(244,238,228,.03)}
.typespec__display{font-family:var(--f-display);font-weight:800;font-stretch:112%;
  font-size:clamp(2.4rem,5vw,4rem);line-height:1;color:var(--ivory)}
.typespec__mono{margin-top:.6em;font-family:var(--f-mono);font-size:clamp(1.2rem,2.4vw,2rem);
  color:var(--ivory);letter-spacing:.02em}
.typespec__meta{color:var(--muted)}

/* ---------- RECAP GALLERY ------------------------------------------------ */
.gal{position:relative;padding-block:clamp(36px,6vh,80px)}
.gal__head{position:relative;display:flex;align-items:flex-end;gap:clamp(16px,3vw,44px);
  margin-bottom:clamp(20px,3vh,40px)}
.gal__year{position:absolute;right:0;bottom:-.18em;pointer-events:none;
  font-family:var(--f-display);font-weight:800;font-stretch:112%;
  font-size:clamp(4rem,13vw,11rem);line-height:.8;letter-spacing:-.05em;
  color:rgba(244,238,228,.045)}
.gal__title{font-family:var(--f-display);font-weight:750;font-stretch:108%;
  font-size:clamp(1.4rem,2.6vw,2.4rem);line-height:1.08;letter-spacing:-.025em;color:var(--ivory)}
.gal__b{max-width:58ch;margin-top:.7em;font-size:clamp(.9rem,1vw,1rem);line-height:1.6;
  color:var(--bone);opacity:.8}

/* a real masonry-feel grid: two row heights, three column spans, no library */
/* True masonry via CSS columns: no row grid means no holes at the end of an
   edition, whatever number of photographs that edition happens to have.     */
.gal__grid{columns:4;column-gap:clamp(10px,1.2vw,18px)}
.gal__cell{position:relative;display:block;width:100%;overflow:hidden;padding:0;border:0;
  cursor:pointer;break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:clamp(10px,1.2vw,18px);aspect-ratio:1;
  border-radius:clamp(12px,1.2vw,18px);background:rgba(244,238,228,.04);
  transition:transform .9s var(--e-out-expo),box-shadow .6s var(--e-out-cubic)}
.gal__cell--wide{aspect-ratio:4/3}
.gal__cell--tall{aspect-ratio:3/4}
.gal__frame{position:absolute;inset:0;display:block;overflow:hidden}
.gal__cell img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.04);
  transition:transform 1.2s var(--e-out-expo),filter .7s var(--e-out-cubic)}
.gal__cell::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,8,6,0) 44%,rgba(11,8,6,.78));
  opacity:.72;transition:opacity .6s var(--e-out-cubic)}
.gal__cell:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.45)}
.gal__cell:hover img{transform:scale(1.06);filter:saturate(1) contrast(1.02)}
.gal__cell:hover::after{opacity:.9}
.gal__cell:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.gal__cap{position:absolute;left:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);
  bottom:clamp(12px,1.2vw,18px);z-index:1;text-align:left;color:var(--ivory);
  letter-spacing:.1em;line-height:1.35;
  transform:translateY(6px);opacity:.82;
  transition:transform .6s var(--e-out-expo),opacity .5s var(--e-out-cubic)}
.gal__cell:hover .gal__cap{transform:none;opacity:1}

/* ---------- LIGHTBOX ----------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:260;display:grid;place-items:center;
  background:rgba(7,5,4,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .45s var(--e-out-cubic)}
.lb.is-on{opacity:1}
.lb__stage{margin:0;display:grid;gap:1rem;justify-items:center;
  max-width:min(92vw,1200px);max-height:82vh;
  transform:scale(.96);transition:transform .7s var(--e-out-expo)}
.lb.is-on .lb__stage{transform:none}
.lb__stage img{width:auto;height:min(74vh,720px);max-width:92vw;object-fit:contain;
  border-radius:12px;display:block;
  box-shadow:0 40px 110px rgba(0,0,0,.6)}
.lb__cap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;
  font-size:clamp(.82rem,.94vw,.94rem);color:var(--bone);opacity:.84;text-align:center}
.lb__cap .label{color:var(--ember-lo)}
.lb__close,.lb__nav{position:absolute;display:grid;place-items:center;
  width:clamp(40px,3.4vw,50px);height:clamp(40px,3.4vw,50px);border-radius:50%;
  color:var(--ivory);background:rgba(244,238,228,.08);border:1px solid rgba(244,238,228,.16);
  cursor:pointer;transition:background-color .35s,transform .5s var(--e-out-expo)}
.lb__close:hover,.lb__nav:hover{background:rgba(244,238,228,.18);transform:scale(1.06)}
.lb__close svg,.lb__nav svg{width:20px;height:20px}
.lb__close{top:clamp(14px,2.4vh,28px);right:clamp(14px,2vw,28px)}
.lb__nav--prev{left:clamp(10px,2vw,32px);top:50%;translate:0 -50%}
.lb__nav--next{right:clamp(10px,2vw,32px);top:50%;translate:0 -50%}
body.lb-open{overflow:hidden}

@media (max-width:1100px){ .gal__grid{columns:3} }
@media (max-width:820px){ .gal__grid{columns:2} }
@media (max-width:520px){ .gal__grid{columns:1} }
@media (max-width:700px){
  .lb__nav--prev{left:8px}
  .lb__nav--next{right:8px}
}
@media (prefers-reduced-motion:reduce){
  .gal__cell,.gal__cell img,.lb,.lb__stage{transition:none}
  .tl::before{transform:scaleY(1)}
}

/* ---------- ANCHORED CARDS ----------------------------------------------- */
/* Each card is also a menu destination, so it needs a scroll margin or the
   sticky top bar lands on top of the heading it just jumped to.           */
.cards--anchored > *{scroll-margin-top:calc(var(--nav-h) + 28px)}
.cards--anchored .card__meta .soon{margin-left:0}

/* ---------- UPDATES FEED -------------------------------------------------- */
.feed{list-style:none;margin:1.6em 0;padding:0;display:grid;gap:10px}
.feed li::before{content:none}
.feed__item{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:.4em clamp(14px,2vw,28px);padding:clamp(14px,1.6vw,20px);border-radius:14px;
  border:1px solid rgba(244,238,228,.09);background:rgba(244,238,228,.028)}
.feed__d{font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.1em;color:var(--ember)}
.feed__t{font-weight:640;color:var(--ivory)}
.feed__b{grid-column:2;font-size:.9rem;line-height:1.6;color:var(--bone);opacity:.8}
.feed__empty{padding:clamp(20px,3vw,34px);border-radius:14px;
  border:1px dashed rgba(244,238,228,.18);background:rgba(244,238,228,.03);
  color:var(--bone);opacity:.82;line-height:1.6}
@media (max-width:700px){ .feed__item{grid-template-columns:1fr} .feed__b{grid-column:1} }

/* ---------- EXAMPLE-CONTENT MARKER --------------------------------------
   Anything filled with placeholder copy says so, in the layout, in every
   language. A demo block that looks like a fact is how a wrong number ends up
   in a press release.                                                     */
.exnote{display:flex;align-items:flex-start;gap:.7rem;margin-top:clamp(18px,2.4vh,30px);
  padding:clamp(12px,1.4vw,18px);border-radius:13px;
  border:1px dashed rgba(226,85,30,.35);background:rgba(226,85,30,.05);
  font-size:.84rem;line-height:1.55;color:var(--bone);opacity:.86;max-width:78ch}
.exnote__badge{flex:none;margin-top:.1em}
.exnote__badge::before{animation:none;opacity:.85}

/* ---------- INTRO BAND ---------------------------------------------------- */
.psec--tight{padding-block:clamp(28px,4.5vh,64px)}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,64px);align-items:center}
.intro__fig{margin:0;position:relative;border-radius:clamp(16px,1.8vw,26px);overflow:hidden}
.intro__fig picture,.intro__fig img{display:block;width:100%;height:auto}
.intro__fig img{aspect-ratio:16/10;object-fit:cover;filter:saturate(.85) contrast(1.04);
  transition:transform 1.4s var(--e-out-expo)}
.intro__fig:hover img{transform:scale(1.04)}
.intro__fig figcaption{position:absolute;left:clamp(12px,1.4vw,20px);bottom:clamp(12px,1.4vw,20px);
  color:var(--ivory);letter-spacing:.12em;text-shadow:0 2px 16px rgba(11,8,6,.8)}
.intro__fig::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,8,6,0) 50%,rgba(11,8,6,.75))}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:1px;margin:clamp(24px,3.4vh,44px) 0 0;
  background:rgba(244,238,228,.12);border:1px solid rgba(244,238,228,.12);
  border-radius:6px;overflow:hidden}
.facts > div{background:var(--ink);padding:clamp(14px,1.6vw,22px);display:grid;gap:.35rem}
.facts dt{font-family:var(--f-mono);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted)}
.facts dd{margin:0;font-size:clamp(.94rem,1.1vw,1.06rem);font-weight:620;color:var(--ivory);
  line-height:1.35}

/* ---------- PICTURE BAND -------------------------------------------------
   NOT .band — that class is the top bar's menu pill, and naming this one the
   same turned the pill into a two-row grid on every subpage.             */
.figband{margin:0;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(10px,1.2vw,18px)}
.figband picture{display:block;border-radius:clamp(14px,1.4vw,22px);overflow:hidden}
.figband img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.04);transition:transform 1.4s var(--e-out-expo)}
.figband__a img{aspect-ratio:16/9}
.figband__b img{aspect-ratio:4/3}
.figband picture:hover img{transform:scale(1.05)}

/* ---------- FAQ ----------------------------------------------------------- */
.faq{display:grid;gap:8px}
.faq__item{border-radius:14px;overflow:hidden;
  border:1px solid rgba(244,238,228,.1);background:rgba(244,238,228,.028);
  transition:border-color .4s var(--e-out-cubic),background-color .4s var(--e-out-cubic)}
.faq__item[open]{border-color:rgba(226,85,30,.36);background:rgba(244,238,228,.05)}
.faq__item summary{display:flex;align-items:center;gap:1rem;cursor:pointer;list-style:none;
  padding:clamp(14px,1.6vw,20px) clamp(15px,1.7vw,22px);
  font-size:clamp(.95rem,1.1vw,1.08rem);font-weight:620;color:var(--ivory)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary span:first-child{flex:1}
.faq__x{position:relative;flex:none;width:16px;height:16px;color:var(--muted)}
.faq__x::before,.faq__x::after{content:'';position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:2px;
  transition:transform .5s var(--e-out-expo),opacity .35s var(--e-out-cubic)}
.faq__x::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.faq__x::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
.faq__item[open] .faq__x{color:var(--ember)}
.faq__item[open] .faq__x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__item p{margin:0;padding:0 clamp(15px,1.7vw,22px) clamp(15px,1.7vw,21px);
  max-width:74ch;font-size:clamp(.88rem,1vw,.98rem);line-height:1.65;
  color:var(--bone);opacity:.84}

/* ---------- FIGURES TABLE ------------------------------------------------- */
.ftable{overflow-x:auto;border-radius:14px;
  border:1px solid rgba(244,238,228,.1);background:rgba(244,238,228,.028)}
.ftable table{width:100%;border-collapse:collapse;min-width:520px}
.ftable th,.ftable td{text-align:left;padding:clamp(11px,1.2vw,16px) clamp(13px,1.4vw,20px);
  border-bottom:1px solid rgba(244,238,228,.08);font-size:clamp(.86rem,.98vw,.96rem)}
.ftable thead th{font-family:var(--f-mono);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted);white-space:nowrap}
.ftable tbody th{font-weight:620;color:var(--ivory)}
.ftable tbody tr:last-child th,.ftable tbody tr:last-child td{border-bottom:0}
.pend{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted-2);padding:.3em .65em;border-radius:999px;
  border:1px dashed rgba(244,238,228,.2)}

@media (max-width:860px){
  .intro{grid-template-columns:1fr}
  .figband{grid-template-columns:1fr}
}

/* ---------- the founder block -------------------------------------------
   The supplied mark sits in its own quiet panel and is never recoloured or
   redrawn — it is placed exactly as delivered, on a ground dark enough for
   its own white to carry. */
.abfound__box{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(24px,3.2vw,48px);border-radius:clamp(16px,1.8vw,26px);
  border:1px solid rgba(244,238,228,.12);
  background:linear-gradient(160deg,rgba(36,23,16,.7),rgba(16,14,12,.85))}
.abfound__links{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.3rem}
.abfound__links a{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ember-lo);
  transition:color .3s,transform .5s var(--e-out-expo)}
.abfound__links svg{width:11px;height:11px;transition:transform .5s var(--e-out-expo)}
.abfound__links a:hover{color:var(--ivory)}
.abfound__links a:hover svg{transform:translate3d(2px,-2px,0)}
.abfound__mark{flex:none;display:block;justify-self:end;
  padding:clamp(14px,1.6vw,22px) clamp(18px,2vw,28px);border-radius:16px;
  border:1px solid rgba(244,238,228,.1);background:rgba(11,8,6,.6);
  transition:border-color .4s,transform .6s var(--e-out-expo)}
.abfound__mark img{display:block;width:clamp(132px,12vw,180px);height:auto}
.abfound__mark:hover{border-color:rgba(226,85,30,.35);transform:translateY(-3px)}
.abfound__mark:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
@media (max-width:760px){
  .abfound__box{grid-template-columns:1fr}
  .abfound__mark{justify-self:start}
}