/* =========================================================
   Beirut Arab International Book Fair — shared stylesheet
   Sections 1–10 are carried over verbatim from the homepage
   design file; "EXTENSIONS" below adds components for the
   inner pages using only the same tokens.
   ========================================================= */

:root{
  --ink:#57534f;
  --pink:#d94f96;
  --pink-tint:#fff5fa;
  --stone:#e6e5e1;
  --stone-light:#f1f0ee;
  --gray-text:#6f6a65; /* was #9c9894 (2.8:1 on paper); darkened to pass WCAG AA: 5.3:1 on paper, 4.7:1 on stone-light */
  --paper:#fffdfc;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth;}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);}
body{font-family:'Cairo',sans-serif; overflow-x:hidden;}
[lang="en"], .latin{font-family:'Montserrat',sans-serif; direction:ltr; unicode-bidi:isolate;} /* isolate: keeps "3:00 – 4:30" in order inside RTL text */
img{max-width:100%;}
a{color:inherit;}

.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}

/* ===== NAV ===== */
header{
  position:sticky; top:0; top:env(safe-area-inset-top,0px);
  z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--stone-light);
}
nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1120px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem;}
.brand .badge{
  background:var(--pink); color:#fff; width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-family:'Archivo Black',sans-serif;
  font-size:.85rem; transform:rotate(-6deg);
}
nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0; font-size:.92rem; font-weight:600;}
nav ul a{text-decoration:none; transition:color .15s;}
nav ul a:hover{color:var(--pink);}
.nav-cta{
  background:var(--pink); color:#fff; padding:10px 20px; border-radius:100px;
  font-size:.85rem; font-weight:700; text-decoration:none; white-space:nowrap;
}
.nav-toggle{display:none;}

/* ===== HERO ===== */
.hero{position:relative; overflow:hidden; padding:64px 0 80px;}
.blob{position:absolute; background:var(--stone); opacity:.7; border-radius:52% 48% 61% 39% / 44% 40% 60% 56%;}
.blob-1{width:420px; height:420px; top:-180px; inset-inline-start:-160px;}
.blob-2{width:520px; height:520px; bottom:-260px; inset-inline-end:-200px;}

.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;}
.patron{font-size:.82rem; color:var(--gray-text); margin-bottom:22px; line-height:1.9;}
.patron .name{color:var(--ink); font-weight:800; font-size:1rem; display:block; margin-top:2px;}

.hero-title{
  font-family:'Aref Ruqaa', serif;
  font-weight:700;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.25;
  margin:0 0 26px;
}
.hero-title .accent{color:var(--pink);}

.hero-sub{max-width:46ch; color:var(--gray-text); font-size:1.02rem; line-height:1.9; margin-bottom:34px;}

.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary{
  background:var(--pink); color:#fff; padding:15px 30px; border-radius:100px;
  text-decoration:none; font-weight:800; font-size:.95rem; box-shadow:0 10px 24px -10px rgba(217,79,150,.4);
}
.btn-ghost{
  border:1.5px solid var(--ink); color:var(--ink); padding:14px 28px; border-radius:100px;
  text-decoration:none; font-weight:700; font-size:.95rem;
}

.edition-card{
  justify-self:center; position:relative; width:min(320px, 92%);
}
.diamond{
  width:220px; height:220px; margin:0 auto;
  background:var(--pink); transform:rotate(45deg);
  display:flex; align-items:center; justify-content:center;
  border-radius:28px;
  box-shadow:0 20px 40px -20px rgba(217,79,150,.45);
}
.diamond .num{
  transform:rotate(-45deg); color:#fff; font-family:'Archivo Black',sans-serif;
  font-size:4.2rem; line-height:1;
}
.edition-meta{text-align:center; margin-top:22px; font-family:'Montserrat',sans-serif;}
.edition-meta .en{font-weight:800; font-size:1.15rem; letter-spacing:.2px;}
.edition-meta .fr{color:var(--gray-text); font-weight:700; font-size:.95rem; margin-top:4px;}

/* ===== INFO STRIP ===== */
.info-strip{border-top:1px solid var(--stone-light); border-bottom:1px solid var(--stone-light); background:var(--stone-light);}
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.info-item{padding:30px 28px; text-align:center; border-inline-start:1px solid rgba(0,0,0,.06);}
.info-item:first-child{border-inline-start:none;}
.info-item .label{font-size:.78rem; color:var(--gray-text); font-weight:600; margin-bottom:8px;}
.info-item .value{font-weight:800; font-size:1.08rem;}

/* ===== SECTION HEADINGS ===== */
section{padding:88px 0;}
.section-head{max-width:60ch; margin-bottom:52px;}
.section-head h2{
  font-family:'Aref Ruqaa', serif; font-weight:700;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem); margin:0 0 14px; line-height:1.3;
}
.section-head p{color:var(--gray-text); font-size:1rem; line-height:1.85; margin:0;}

/* ===== ABOUT ===== */
.about{background:var(--paper);}
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start;}
.about-figure{
  background:var(--stone-light); border:1px solid var(--stone-light); border-radius:18px; padding:44px 32px; color:var(--ink);
  position:relative; overflow:hidden;
}
.about-figure .since{font-family:'Archivo Black',sans-serif; font-size:3.4rem; color:var(--ink); line-height:1;}
.about-figure p{margin-top:16px; color:var(--gray-text); line-height:1.9; font-size:.95rem;}
.stat-list{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:28px;}
.stat{border-top:2px solid var(--stone); padding-top:10px;}
.stat .n{font-family:'Archivo Black',sans-serif; font-size:1.7rem; color:var(--ink);}
.stat .l{color:var(--gray-text); font-size:.85rem; margin-top:4px;}
.about-text p{line-height:1.95; font-size:1.02rem; margin-bottom:18px;}

/* ===== HIGHLIGHTS ===== */
.highlights{background:var(--stone-light);}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.card{background:#fff; border-radius:16px; padding:32px 26px; border:1px solid rgba(0,0,0,.06);}
.card .mark{width:44px; height:44px; background:var(--ink); border-radius:11px; transform:rotate(-6deg); margin-bottom:22px;}
/* icon tile (replaces the plain black square): pink icon on a tinted, slightly tilted tile */
.card .mark.has-icon{
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  background:var(--pink-tint); border:1.5px solid rgba(217,79,150,.3); border-radius:16px;
  transition:transform .3s cubic-bezier(.3,1.5,.5,1), background-color .3s ease;
}
.card .mark.has-icon svg{width:28px; height:28px; transform:rotate(6deg); stroke:var(--pink); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.card:hover .mark.has-icon{transform:rotate(0deg) scale(1.06); background:var(--pink);}
.card:hover .mark.has-icon svg{stroke:#fff; transform:none;}
.card h3{font-size:1.12rem; margin:0 0 10px;}
.card p{color:var(--gray-text); font-size:.92rem; line-height:1.8; margin:0;}

/* ===== SCHEDULE ===== */
.day-row{
  display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:baseline;
  padding:22px 0; border-top:1px solid var(--stone-light);
}
.day-row:last-child{border-bottom:1px solid var(--stone-light);}
.day-row .day{font-family:'Archivo Black',sans-serif; font-size:1rem; color:var(--ink);}
.day-row .desc{color:var(--gray-text); font-size:.95rem; line-height:1.8;}
.day-row .desc b{color:var(--ink);}

/* ===== CTA ===== */
.cta-band{background:var(--stone-light); border:1px solid var(--stone-light); color:var(--ink); text-align:center; border-radius:22px; margin:0 auto; max-width:1120px; padding:64px 40px;}
.cta-band h2{font-family:'Aref Ruqaa', serif; font-size:clamp(1.9rem,3.6vw,2.7rem); margin:0 0 16px;}
.cta-band p{color:var(--gray-text); max-width:48ch; margin:0 auto 30px; line-height:1.85;}

/* ===== FOOTER ===== */
footer{padding:64px 0 40px;}
.foot-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:28px; padding-bottom:36px; border-bottom:1px solid var(--stone-light);}
.foot-brand{font-weight:800; font-size:1.05rem;}
.foot-brand .fr{display:block; color:var(--gray-text); font-size:.85rem; font-weight:700; margin-top:2px;}
.foot-links{display:flex; gap:26px; list-style:none; padding:0; margin:0; font-size:.9rem; font-weight:600;}
.foot-links a{text-decoration:none;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:28px; font-size:.82rem; color:var(--gray-text);}

/* ===== THEME =====
   Light mode only, by request — no dark-mode override,
   so the page looks the same regardless of the visitor's system setting. */


/* =========================================================
   EXTENSIONS — inner pages (same tokens, same radii/spacing)
   ========================================================= */

/* ----- Nav: active page + mobile menu ----- */
.brand{text-decoration:none;}
nav ul a[aria-current="page"]{color:var(--pink);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.nav-toggle{
  width:40px; height:40px; border-radius:11px; border:1.5px solid var(--ink);
  background:transparent; color:var(--ink); cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-toggle span{display:block; width:16px; height:1.5px; background:var(--ink); border-radius:2px;}

/* ----- Edition logo (replaces .badge / .diamond when set in content) ----- */
.brand-logo{height:58px; width:auto; display:block;}
nav.wrap:has(.brand-logo){padding-top:8px; padding-bottom:8px;}
.edition-card.has-logo{width:min(340px, 74%);} /* leaves room for the ring of floating books */
.edition-logo{width:100%; height:auto; display:block;}

/* ----- Inner-page hero (smaller version of .hero) ----- */
.page-hero{padding:64px 0 56px;}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero .section-head{margin-bottom:0;}
.page-hero .section-head h1{
  font-family:'Aref Ruqaa', serif; font-weight:700;
  font-size:clamp(2.2rem, 4.6vw, 3.4rem); margin:0 0 14px; line-height:1.3;
}
.page-hero .section-head h1 .accent{color:var(--pink);}
.eyebrow{font-size:.82rem; color:var(--gray-text); font-weight:600; margin-bottom:14px; display:flex; gap:10px; flex-wrap:wrap;}
.eyebrow a{text-decoration:none;}
.eyebrow a:hover{color:var(--pink);}

/* ----- Let aspect-ratio win over <img width/height> attributes ----- */
.gallery img, .photo-card img, .tl-card img{height:auto;}

/* ----- Inner-page hero photo collage: three tilted prints beside the title ----- */
.page-hero.has-collage .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;}
.page-hero.has-collage{padding-bottom:72px;}
.hero-collage{position:relative; height:280px;}
.print{
  position:absolute; width:62%; aspect-ratio:3/2; padding:8px; background:#fff; border-radius:10px;
  box-shadow:0 22px 40px -24px rgba(87,83,79,.55); animation:book-float var(--t) ease-in-out var(--d) infinite;
}
.print img{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; border-radius:5px; background:var(--stone);}
.print-1{top:6%;  inset-inline-start:2%;  --r:-5deg; --t:9s;  --d:0s;   z-index:2;}
.print-2{top:0;   inset-inline-end:0;     --r:6deg;  --t:10s; --d:-3s;  z-index:1;}
.print-3{bottom:0; inset-inline-start:26%; --r:-2deg; --t:8s;  --d:-5s;  z-index:3;}
.is-archive .print img{filter:grayscale(1) sepia(.35) contrast(1.05);}
/* a pink corner tab on the front print, like a bookmark */
.print-3::after{content:''; position:absolute; top:-6px; inset-inline-end:18px; width:14px; height:26px; background:var(--pink); border-radius:2px 2px 0 0; clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);}

/* ----- Program page: day tabs, type filter, event rows ----- */
.day-tabs{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 14px; scrollbar-width:thin;}
.day-tab{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:86px; padding:12px 14px;
  border:1.5px solid var(--stone); border-radius:18px; background:#fff; text-decoration:none;
  transition:border-color .2s, background-color .2s, transform .2s, box-shadow .2s;
}
.day-tab:hover{border-color:var(--pink); transform:translateY(-2px);}
.dt-name{font-size:.82rem; font-weight:700;}
.dt-num{font-family:'Archivo Black',sans-serif; font-size:1.7rem; line-height:1.1;}
.dt-count{font-size:.72rem; color:var(--gray-text);}
.day-tab[aria-selected="true"]{background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:0 12px 24px -14px rgba(217,79,150,.7);}
.day-tab[aria-selected="true"] .dt-count{color:rgba(255,255,255,.85);}
.day-tabs{margin-bottom:26px;}
/* small diamond per activity type (palette colours only) */
.chip-dot{display:inline-block; width:9px; height:9px; border-radius:2px; transform:rotate(45deg); flex:none;}
.t-seminar{background:var(--ink);}
.t-talk{background:var(--pink);}
.t-lecture{background:var(--gray-text);}
.t-evening{background:var(--pink-tint); box-shadow:inset 0 0 0 1.5px var(--pink);}
.t-tribute{background:var(--stone); box-shadow:inset 0 0 0 1.5px var(--ink);}
.t-children{background:#fff; box-shadow:inset 0 0 0 1.5px var(--pink);}
.program-day{margin-bottom:56px;}
.program-day-title{font-family:'Aref Ruqaa', serif; font-weight:700; font-size:clamp(1.5rem, 2.6vw, 2rem); margin:0 0 8px;}
.program.is-tabbed .program-day-title{display:none;} /* the selected tab already names the day */
.program.is-tabbed .program-day{margin-bottom:0;}
.program-day.is-entering{animation:day-in .45s cubic-bezier(.2,.7,.2,1);}
@keyframes day-in{from{opacity:0; transform:translateY(12px);}}
.event-row{grid-template-columns:170px 1fr; align-items:start; transition:background-color .2s;}
.event-row:hover{background:linear-gradient(90deg, transparent, var(--pink-tint) 30%, var(--pink-tint) 70%, transparent);}
.event-time{display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
.event-time .latin{font-family:'Archivo Black',sans-serif; font-size:1rem;}
.hall-badge{font-family:'Cairo',sans-serif; font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:100px; background:var(--stone-light); border:1px solid var(--stone); line-height:1.6;}
.hall-B{background:#fff;}
.hall-AUB{background:var(--pink-tint); border-color:rgba(217,79,150,.35); color:var(--pink);}
.event-kind{display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:var(--gray-text); margin-bottom:4px;}
.event-title{font-size:1.1rem; font-weight:800; color:var(--ink); line-height:1.6;}
.event-sub{font-size:.95rem; color:var(--pink); font-weight:600; margin-top:2px;}
.event-people{font-size:.9rem; color:var(--gray-text); line-height:1.85; margin-top:6px;}
.program-source{margin-top:36px; font-size:.85rem; color:var(--gray-text);}
.program-source a, .inline-link{color:var(--pink); text-decoration:none; font-weight:700;}

/* ----- Countdown (home hero) ----- */
.countdown{margin-top:34px; max-width:260px;}
.cd-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-bottom:12px;}
.cd-status{font-size:.82rem; color:var(--gray-text);}
.cd-head:has(.cd-status:empty){display:none;} /* no empty gap above the boxes while counting down */
.countdown.is-live .cd-status{color:var(--pink); font-weight:700;}
.cd-boxes{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;}
.cd-box{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 6px 12px; border-radius:16px;
  background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 14px 28px -24px rgba(87,83,79,.5); overflow:hidden;
}
.cd-num{font-family:'Archivo Black',sans-serif; font-size:1.9rem; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums;}
.cd-box:first-child .cd-num{color:var(--pink);}
.cd-label{font-size:.76rem; color:var(--gray-text); font-weight:600;}
.cd-num.tick{animation:cd-flip .45s cubic-bezier(.2,.7,.2,1);}
@keyframes cd-flip{from{transform:translateY(-60%); opacity:0;}}

/* ----- Article: reading-progress line + share buttons ----- */
.read-progress{position:absolute; left:0; right:0; bottom:-1px; height:3px; pointer-events:none;}
.read-progress span{display:block; height:100%; background:var(--pink); transform:scaleX(0); transform-origin:right center; border-radius:0 0 0 3px;}
.share{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:28px; padding-top:22px; border-top:1px solid var(--stone-light);}
.share-label{font-weight:700; font-size:.92rem; margin-inline-end:6px;}
.share-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:100px; border:1.5px solid var(--stone); background:#fff; color:var(--ink); cursor:pointer; padding:0;
  transition:border-color .2s, background-color .2s, color .2s, transform .2s;
}
.share-btn svg{width:19px; height:19px; fill:currentColor;}
.share-btn:hover{border-color:var(--pink); background:var(--pink); color:#fff; transform:translateY(-2px);}
.share-copied{position:absolute; bottom:calc(100% + 8px); white-space:nowrap; background:var(--ink); color:#fff; font-size:.75rem; padding:4px 10px; border-radius:100px;}

/* ----- Tight top spacing when a section follows a page hero ----- */
.section-tight{padding-top:24px;}

/* ----- News cards (.post-card = .card with an image) ----- */
.post-card{
  background:#fff; border-radius:16px; border:1px solid rgba(0,0,0,.06);
  overflow:hidden; display:flex; flex-direction:column; text-decoration:none;
  transition:transform .15s, box-shadow .15s;
}
.post-card:hover{transform:translateY(-3px); box-shadow:0 18px 36px -24px rgba(87,83,79,.35);}
.post-card:hover h3{color:var(--pink);}
.post-card .thumb{aspect-ratio:16/10; background:var(--stone); overflow:hidden;}
.post-card .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.post-card .body{padding:24px 26px 30px; display:flex; flex-direction:column; flex:1;}
.post-card .date{font-size:.78rem; color:var(--gray-text); font-weight:600; margin-bottom:10px;}
.post-card h3{font-size:1.08rem; line-height:1.6; margin:0 0 10px; transition:color .15s;}
.post-card p{color:var(--gray-text); font-size:.92rem; line-height:1.8; margin:0;}

/* ----- Pagination (pills from .btn-ghost) ----- */
.pagination{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; margin-top:56px;}
.pagination .btn-ghost{padding:10px 20px; font-size:.88rem; min-width:46px; text-align:center;}
.pagination .btn-ghost[aria-current="page"]{border-color:var(--pink); color:var(--pink); background:var(--pink-tint);}
.pagination .is-disabled{opacity:.35; pointer-events:none;}

/* ----- Buttons: shared interaction states ----- */
.btn-primary, .btn-ghost{display:inline-block; transition:transform .15s, border-color .15s, color .15s;}
.btn-primary:hover{transform:translateY(-1px);}
.btn-ghost:hover{border-color:var(--pink); color:var(--pink);}

/* ----- Single article ----- */
.article-meta{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.85rem; color:var(--gray-text); font-weight:600;}
.article-figure{margin:0 0 48px; border-radius:18px; overflow:hidden; background:var(--stone); aspect-ratio:1170/650;}
.article-figure img{width:100%; height:100%; object-fit:cover; display:block;}
.article-body{max-width:none;} /* text runs the full width of the photo above it */
.article-body p{line-height:1.95; font-size:1.02rem; margin:0 0 18px;}
.gallery-head{display:flex; align-items:baseline; gap:12px; margin-top:64px;}
.gallery-head h2{font-family:'Aref Ruqaa', serif; font-weight:700; font-size:clamp(1.6rem, 2.8vw, 2.1rem); margin:0;}
.gallery-head span{font-family:'Archivo Black',sans-serif; color:var(--pink); font-size:1rem;}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px;}
.gallery a{display:block; border-radius:16px; overflow:hidden; background:var(--stone);}
.gallery img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 25%; display:block; transition:transform .25s;}
.gallery a:hover img{transform:scale(1.04);}

/* ----- Lightbox for galleries ----- */
.lightbox{border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh;}
.lightbox::backdrop{background:rgba(87,83,79,.92);}
.lightbox .frame{width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:56px 72px;}
.lightbox img{max-width:100%; max-height:100%; border-radius:12px; display:block;}
.lightbox button{
  position:absolute; width:46px; height:46px; border-radius:100px; border:1.5px solid #fff;
  background:transparent; color:#fff; font-size:1.3rem; cursor:pointer; line-height:1;
}
.lightbox button:hover{border-color:var(--pink); background:var(--pink);}
.lightbox .lb-close{top:16px; inset-inline-end:16px;}
.lightbox .lb-prev{top:50%; inset-inline-start:14px; transform:translateY(-50%);}
.lightbox .lb-next{top:50%; inset-inline-end:14px; transform:translateY(-50%);}
.lightbox .lb-count{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#fff; font-size:.9rem; display:flex; justify-content:center; gap:14px;}
.lightbox .lb-caption{font-weight:600;}
.lightbox .lb-caption:empty{display:none;}
.lightbox .lb-num{font-size:.85rem; opacity:.8;}

/* ----- Home photo mosaic ----- */
.mosaic{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:190px; grid-auto-flow:dense; gap:14px;}
.mosaic-section{overflow-x:clip;}
.tile{position:relative; display:block; overflow:hidden; border-radius:16px; background:var(--stone); text-decoration:none;}
.tile-big{grid-column:span 2; grid-row:span 2;}
.tile-wide{grid-column:span 2;}
.tile-tall{grid-row:span 2;}
.tile img{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.tile::after{ /* soft ink gradient under the caption */
  content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(87,83,79,.75), rgba(87,83,79,0) 55%);
  opacity:0; transition:opacity .35s ease;
}
.tile-caption{
  position:absolute; z-index:1; inset-inline:18px; bottom:16px; color:#fff; font-weight:700; font-size:.95rem;
  transform:translateY(12px); opacity:0; transition:transform .35s ease, opacity .35s ease;
}
.tile:hover img, .tile:focus-visible img{transform:scale(1.06);}
.tile:hover::after, .tile:focus-visible::after{opacity:1;}
.tile:hover .tile-caption, .tile:focus-visible .tile-caption{transform:none; opacity:1;}
.tile-big .tile-caption{font-size:1.15rem;}
/* tiles fade up in a stagger when the section scrolls into view */
html.js .mosaic .tile{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
html.js .mosaic.is-visible .tile{opacity:1; transform:none;}
html.js .mosaic .tile:nth-child(2){transition-delay:.06s;}
html.js .mosaic .tile:nth-child(3){transition-delay:.12s;}
html.js .mosaic .tile:nth-child(4){transition-delay:.18s;}
html.js .mosaic .tile:nth-child(5){transition-delay:.24s;}
html.js .mosaic .tile:nth-child(6){transition-delay:.30s;}
html.js .mosaic .tile:nth-child(7){transition-delay:.36s;}
html.js .mosaic .tile:nth-child(8){transition-delay:.42s;}
html.js .mosaic .tile:nth-child(9){transition-delay:.48s;}
html.js .mosaic .tile:nth-child(10){transition-delay:.54s;}
html.js .mosaic .tile:nth-child(11){transition-delay:.60s;}
html.js .mosaic .tile:nth-child(12){transition-delay:.66s;}

/* ----- Program booklet pages (About) ----- */
.booklet{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.booklet-page{text-decoration:none; display:flex; flex-direction:column; gap:12px;}
.booklet-page .sheet{
  display:flex; align-items:center; justify-content:center; aspect-ratio:4/5; padding:14px;
  background:var(--stone-light); border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden;
  transition:transform .15s, box-shadow .15s;
}
.booklet-page img{max-width:100%; max-height:100%; object-fit:contain; display:block; box-shadow:0 8px 20px -12px rgba(87,83,79,.4);}
.booklet-page:hover .sheet{transform:translateY(-3px); box-shadow:0 18px 36px -24px rgba(87,83,79,.35);}
.booklet-page .caption{font-size:.9rem; font-weight:600; text-align:center;}
.booklet-page:hover .caption{color:var(--pink);}
a.photo-card{text-decoration:none; transition:transform .15s, box-shadow .15s;}
a.photo-card:hover{transform:translateY(-3px); box-shadow:0 18px 36px -24px rgba(87,83,79,.35);}
a.photo-card:hover h3{color:var(--pink);}
.photo-card img{object-position:center 30%;}
.post-nav{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:64px; padding-top:32px; border-top:1px solid var(--stone-light);}
.post-nav .btn-ghost{max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.post-nav .btn-ghost small{display:block; font-size:.75rem; color:var(--gray-text); font-weight:600;}
.post-nav .spacer{flex:1;}

/* ----- About: second stat block + program photos ----- */
.about-figure + .about-figure{margin-top:24px;}
.section-head-spaced{margin-top:52px;}
.stat .n.is-empty{color:var(--stone);}
.photo-card{padding:0; overflow:hidden;}
.photo-card img{width:100%; aspect-ratio:10/7; object-fit:cover; display:block; background:var(--stone);}
.photo-card .body{padding:22px 26px 28px;}

/* ----- History timeline: centre line, cards alternating sides ----- */
/* overflow-x:clip hides cards while they slide in from outside, without breaking the sticky header */
.timeline{list-style:none; margin:0; padding:24px 0 8px; position:relative; overflow-x:clip;}
.timeline::before{ /* the line */
  content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  background:linear-gradient(180deg, transparent, var(--stone) 40px, var(--stone) calc(100% - 40px), transparent);
}
.tl-item{position:relative; width:50%; padding-bottom:40px;}
.tl-item:nth-child(odd){margin-inline-end:50%; padding-inline-end:48px;}   /* first side (right in RTL) */
.tl-item:nth-child(even){margin-inline-start:50%; padding-inline-start:48px;}
.tl-item:nth-child(n+2){margin-top:-120px;}  /* interleave the two columns so they don't leave gaps */
.tl-dot{ /* diamond marker on the line, echoing the edition badge */
  position:absolute; top:34px; width:16px; height:16px; border-radius:4px;
  background:var(--pink); transform:rotate(45deg); box-shadow:0 0 0 6px var(--paper), 0 6px 14px -6px rgba(217,79,150,.6);
}
.tl-item:nth-child(odd) .tl-dot{inset-inline-end:-8px;}
.tl-item:nth-child(even) .tl-dot{inset-inline-start:-8px;}
.tl-item::after{ /* connector from line to card */
  content:''; position:absolute; top:41px; width:36px; height:2px; background:var(--stone);
}
.tl-item:nth-child(odd)::after{inset-inline-end:10px;}
.tl-item:nth-child(even)::after{inset-inline-start:10px;}
.tl-card{background:#fff; border-radius:16px; border:1px solid rgba(0,0,0,.06); overflow:hidden; box-shadow:0 18px 36px -30px rgba(87,83,79,.35);}
.tl-card img{width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center 25%; display:block; background:var(--stone);}
.tl-body{padding:20px 24px 24px;}
.tl-edition{font-family:'Archivo Black',sans-serif; color:var(--pink); font-size:1.35rem; line-height:1; margin-bottom:10px;}
.tl-body p{margin:0; color:var(--ink); font-size:.98rem; line-height:1.85;}

/* ----- Footer copyright + "Powered by haceb" ----- */
.foot-legal{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--stone-light); font-size:.8rem; color:var(--gray-text);
}
.powered{
  display:inline-flex; align-items:center; gap:12px; padding:10px 18px 10px 20px;
  background:#fff; border:1px solid var(--stone); border-radius:100px;
  box-shadow:0 10px 24px -16px rgba(87,83,79,.45);
  font-family:'Montserrat',sans-serif; font-size:.82rem; font-weight:700; color:var(--ink); letter-spacing:.2px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.powered:hover{transform:translateY(-2px); border-color:var(--pink); box-shadow:0 16px 30px -16px rgba(217,79,150,.45);}
.powered img{height:28px; width:auto; display:block;}
@media (max-width: 880px){
  .foot-legal{flex-direction:column-reverse; align-items:center; text-align:center; gap:16px;}
}

/* ----- Footer contact ----- */
.foot-contact{display:flex; flex-direction:column; gap:4px; line-height:1.8;}
.foot-contact a{text-decoration:none;}
.foot-contact a:hover, .foot-links a:hover{color:var(--pink);}
.foot-social{display:flex; gap:18px; margin-top:6px;}

/* ----- 404 ----- */
.not-found .hero-actions{margin-top:30px;}


/* =========================================================
   BOOK ANIMATIONS (pure CSS; switched off for reduced motion)
   ========================================================= */

/* ----- 1. Floating books in a ring around the hero logo ----- */
.logo-orbit{position:relative;}
.logo-orbit .edition-logo{position:relative; z-index:1;}
.hero-books{position:absolute; inset:0; z-index:0; pointer-events:none;}
.fbook{
  position:absolute; left:var(--x); top:var(--y);
  animation:book-float var(--t, 8s) ease-in-out var(--d, 0s) infinite;
}
.fbook{
  width:44px; height:60px; border-radius:3px 7px 7px 3px; background:var(--pink);
  box-shadow:inset 5px 0 0 rgba(0,0,0,.12), 0 12px 20px -12px rgba(87,83,79,.5);
}
.fbook::before{ /* cover band */
  content:''; position:absolute; left:11px; right:8px; top:14px; height:5px; border-radius:2px;
  background:rgba(255,255,255,.4); box-shadow:0 9px 0 -1px rgba(255,255,255,.25);
}
.fbook::after{ /* page edges */
  content:''; position:absolute; top:3px; bottom:3px; right:-4px; width:4px; border-radius:0 2px 2px 0;
  background:repeating-linear-gradient(180deg, #fff 0 2px, var(--stone) 2px 3px);
}
.fb-ink{background:var(--ink);}
.fb-stone{background:var(--stone);}
.fb-stone::before{background:rgba(87,83,79,.18); box-shadow:0 9px 0 -1px rgba(87,83,79,.12);}
.fb-sm{width:32px; height:44px;}
.fb-sm::before{top:10px; left:8px; right:6px; height:4px;}

@keyframes book-float{
  0%, 100%{transform:translateY(0) rotate(var(--r, 0deg));}
  50%{transform:translateY(-16px) rotate(calc(var(--r, 0deg) + 5deg));}
}

/* ----- 2. Bookshelf (spines rise when scrolled into view) ----- */
.bookshelf{margin:0 auto 36px; max-width:1120px;}
.shelf-books{
  display:flex; align-items:flex-end; justify-content:center; gap:3px;
  height:124px; overflow:hidden; padding:0 12px;
}
.spine{
  flex:none; width:var(--w); height:var(--h); border-radius:3px 3px 1px 1px; position:relative;
  box-shadow:inset -3px 0 0 rgba(0,0,0,.08);
}
.spine::before, .spine::after{ /* title bands */
  content:''; position:absolute; left:4px; right:4px; height:3px; border-radius:2px; background:rgba(255,255,255,.4);
}
.spine::before{top:14%;}
.spine::after{bottom:16%;}
.s-pink{background:var(--pink);}
.s-ink{background:var(--ink);}
.s-stone{background:var(--stone);}
.s-light{background:var(--stone-light); border:1px solid var(--stone);}
.s-tint{background:var(--pink-tint); border:1px solid rgba(217,79,150,.35);}
.s-stone::before, .s-stone::after, .s-light::before, .s-light::after{background:rgba(87,83,79,.18);}
.s-tint::before, .s-tint::after{background:rgba(217,79,150,.35);}
.spine.leaning{--tilt:-14deg; transform-origin:bottom left; margin-inline:8px 2px;}
.stack{display:flex; flex-direction:column; align-items:center; gap:2px; margin-inline-end:10px; flex:none;}
.lying{display:block; height:12px; border-radius:2px 4px 4px 2px; position:relative;}
.lying.s-ink{width:74px;}
.lying.s-pink{width:84px;}
.lying.s-stone{width:66px;}
.shelf-plank{height:10px; border-radius:5px; background:var(--stone); box-shadow:0 10px 18px -12px rgba(87,83,79,.45);}

/* Hidden until revealed — only when JS is available to reveal them */
html.js .bookshelf .spine, html.js .bookshelf .lying{
  transform:translateY(130%); opacity:0;
  transition:transform .7s cubic-bezier(.2,.9,.25,1.15), opacity .4s ease;
  transition-delay:calc(var(--i) * 45ms);
}
html.js .bookshelf.is-visible .spine, html.js .bookshelf.is-visible .lying{transform:translateY(0) rotate(var(--tilt, 0deg)); opacity:1;}
footer .bookshelf{margin-bottom:44px;}

/* ----- 3. News cards: photo opens like a book cover ----- */
.post-card .thumb{
  perspective:1100px; position:relative;
  /* the "pages" revealed behind the opening cover */
  background-color:var(--paper);
  background-image:repeating-linear-gradient(90deg, var(--stone) 0 1px, transparent 1px 5px);
  background-size:26px 100%; background-repeat:no-repeat; background-position:left center;
}
.post-card .thumb img{
  transform-origin:right center; transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s;
  backface-visibility:hidden;
}
.post-card:hover .thumb img{transform:rotateY(24deg); box-shadow:-18px 0 28px -16px rgba(87,83,79,.55);}

/* ----- 4. History timeline: cards slide in from their side, marker pops ----- */
html.js .tl-card{opacity:0; transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .6s ease;}
html.js .tl-item:nth-child(odd) .tl-card{transform:translateX(48px);}   /* RTL: odd cards sit on the right */
html.js .tl-item:nth-child(even) .tl-card{transform:translateX(-48px);}
html.js .tl-dot{transform:rotate(45deg) scale(0); transition:transform .5s cubic-bezier(.3,1.6,.5,1) .15s;}
html.js .tl-item::after{opacity:0; transition:opacity .4s ease .3s;}
html.js .tl-item.is-visible .tl-card{opacity:1; transform:none;}
html.js .tl-item.is-visible .tl-dot{transform:rotate(45deg) scale(1);}
html.js .tl-item.is-visible::after{opacity:1;}

/* ----- Top bar ----- */
header{animation:header-in .7s cubic-bezier(.2,.8,.2,1) both; transition:box-shadow .3s ease, background-color .3s ease;}
@keyframes header-in{from{transform:translateY(-100%); opacity:0;}}
/* menu links drop in one after another */
nav ul li{animation:nav-item-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.25s + var(--n, 0) * .07s);}
@keyframes nav-item-in{from{opacity:0; transform:translateY(-10px);}}
/* pink underline grows from the centre on hover; stays under the current page */
nav ul a{position:relative; display:inline-block; padding:6px 0;}
nav ul a::after{
  content:''; position:absolute; bottom:0; left:50%; right:50%; height:2px; border-radius:2px;
  background:var(--pink); transition:left .3s cubic-bezier(.2,.8,.2,1), right .3s cubic-bezier(.2,.8,.2,1);
}
nav ul a:hover::after, nav ul a[aria-current="page"]::after{left:0; right:0;}
/* logo tilts on hover */
.brand-logo{transition:transform .35s cubic-bezier(.3,1.5,.5,1), height .3s ease;}
.brand:hover .brand-logo{transform:rotate(-6deg) scale(1.06);}
/* light sweeps across the CTA every few seconds */
.nav-cta{position:relative; overflow:hidden; transition:transform .15s, box-shadow .2s;}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(217,79,150,.55);}
.nav-cta::after{
  content:''; position:absolute; top:0; bottom:0; width:40%; left:-60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); animation:cta-shine 4.5s ease-in-out 1.2s infinite;
}
@keyframes cta-shine{0%{left:-60%;} 30%, 100%{left:130%;}}
/* compact bar with a soft shadow once the page is scrolled */
header.is-scrolled{background:rgba(255,255,255,.97); box-shadow:0 10px 26px -20px rgba(87,83,79,.5);}
header.is-scrolled .brand-logo{height:44px;}
nav.wrap:has(.brand-logo){transition:padding .3s ease;}
header.is-scrolled nav.wrap:has(.brand-logo){padding-top:4px; padding-bottom:4px;}

/* mini bookshelf beside the logo: spines lift one after another */
.nav-books{display:flex; align-items:flex-end; gap:2px; height:26px; padding:0 4px 2px; border-bottom:2px solid var(--stone); animation:nav-item-in .5s cubic-bezier(.2,.8,.2,1) .7s both;}
.nav-books i{
  display:block; width:7px; height:var(--h); border-radius:2px 2px 1px 1px;
  animation:spine-wave 4s ease-in-out infinite; animation-delay:calc(1.2s + var(--i) * .12s);
}
.nav-books i.s-light, .nav-books i.s-tint{width:6px;}
.nav-books i.lean{transform-origin:bottom left; transform:rotate(-16deg); margin-inline-end:5px; animation:none;} /* leans in against its neighbour */
.nav-books i::before, .nav-books i::after{display:none;} /* no title bands at this size */
@keyframes spine-wave{0%, 20%, 100%{transform:translateY(0);} 8%{transform:translateY(-6px);}}

/* ----- Number count-up (main.js) ----- */
.count{display:inline-block; font-variant-numeric:tabular-nums; transition:color .6s ease;}
.count.is-counting{color:var(--pink);}
/* pink bar grows along the top of each stat as its number counts */
.stat{position:relative;}
.stat::before{
  content:''; position:absolute; top:-2px; inset-inline-start:0; height:2px; width:0;
  background:var(--pink); transition:width 1.4s cubic-bezier(.2,.7,.2,1);
}
.stat.is-counted::before{width:44px;}
.card h3 .count{color:var(--pink);}

/* ----- 5. 404: book flipping its pages ----- */
.flipbook{position:relative; width:240px; height:160px; margin:20px auto 0; perspective:1200px; transform-style:preserve-3d;}
.fb-cover{
  position:absolute; inset:-10px -12px -14px; border-radius:14px; background:var(--pink);
  box-shadow:0 22px 40px -20px rgba(217,79,150,.55); transform:translateZ(-2px);
}
.fb-page{
  position:absolute; top:0; width:50%; height:100%; background-color:#fff; border:1px solid var(--stone);
  background-image:repeating-linear-gradient(180deg, transparent 0 13px, var(--stone-light) 13px 15px);
  background-clip:content-box; padding:18px 14px;
}
.fb-base-l{left:0; border-radius:8px 0 0 8px;}
.fb-base-r{right:0; border-radius:0 8px 8px 0;}
.fb-turn{
  left:0; border-radius:8px 0 0 8px; transform-origin:right center;
  animation:flip-page 4.2s cubic-bezier(.45,.05,.35,1) var(--d) infinite;
}
@keyframes flip-page{
  0%, 10%{transform:rotateY(0);}
  50%, 100%{transform:rotateY(180deg);}
}
.flipbook-code{text-align:center; margin-top:34px; font-family:'Archivo Black',sans-serif; font-size:2.4rem; color:var(--pink);}


@media (max-width: 880px){
  .hero-inner, .about-grid{grid-template-columns:1fr;}
  .edition-card{order:-1;}
  .info-grid{grid-template-columns:1fr;}
  .info-item{border-inline-start:none; border-top:1px solid rgba(0,0,0,.06);}
  .info-item:first-child{border-top:none;}
  .cards{grid-template-columns:1fr;}
  nav ul{display:none;}
  .nav-cta{padding:9px 16px; font-size:.78rem;}

  /* extensions */
  nav.wrap{position:relative; flex-wrap:wrap; padding:12px 16px; gap:8px;}
  .brand{font-size:.95rem; white-space:nowrap;}
  .brand .badge{width:30px; height:30px; font-size:.78rem;}
  .nav-actions{gap:8px;}
  .brand-logo{height:44px;}
  nav.wrap:has(.brand-logo){padding-top:8px; padding-bottom:8px;}
  .edition-card.has-logo{width:min(230px, 62%);}
  .nav-toggle{width:36px; height:36px;}
  .nav-toggle{display:flex;}
  nav.is-open ul{
    display:flex; flex-direction:column; gap:0; order:3; width:100%;
    margin-top:14px; border-top:1px solid var(--stone-light);
  }
  nav.is-open ul a{display:block; padding:14px 0; border-bottom:1px solid var(--stone-light);}
  nav.is-open ul a::after{display:none;}
  .nav-books{display:none;}
  .mosaic{grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px; gap:10px;}
  .page-hero.has-collage .wrap{grid-template-columns:1fr; gap:24px;}
  .event-row{grid-template-columns:1fr; gap:10px;}
  .event-time{flex-direction:row; align-items:center; gap:12px;}
  .day-tab{min-width:74px; padding:10px 10px;}
  .countdown{margin-inline:auto;}
  .cd-num{font-size:1.5rem;}
  .hero-collage{height:200px; max-width:420px; width:100%; margin:0 auto;}
  .tile-caption{opacity:1; transform:none; font-size:.82rem; inset-inline:12px; bottom:10px;}
  .tile::after{opacity:1;} /* no hover on touch screens: always show captions */
  header.is-scrolled .brand-logo{height:38px;}
  .gallery{grid-template-columns:1fr 1fr; gap:12px;}
  .booklet{grid-template-columns:1fr 1fr; gap:16px;}
  .lightbox .frame{padding:64px 12px;}
  .lightbox .lb-prev, .lightbox .lb-next{top:auto; bottom:10px; transform:none;}
  .post-nav .btn-ghost{max-width:100%; width:100%;}
}

@media (max-width: 880px){
  /* hero books: smaller on phones */
  .fbook{width:32px; height:44px;}
  .fb-sm{width:24px; height:33px;}
  .fb-sm::before{top:8px; left:6px; right:5px; height:3px;}
  .shelf-books{height:100px; justify-content:flex-start;}
  .spine{height:calc(var(--h) * .8);}

  /* timeline: single column, line on the start (right) edge */
  .timeline::before{left:auto; right:11px; margin-left:0;}
  .tl-item, .tl-item:nth-child(odd), .tl-item:nth-child(even){
    width:auto; margin:0; padding:0 44px 28px 0;
  }
  .tl-item .tl-dot, .tl-item:nth-child(odd) .tl-dot, .tl-item:nth-child(even) .tl-dot{inset-inline-end:auto; inset-inline-start:4px; top:28px;}
  .tl-item::after, .tl-item:nth-child(odd)::after, .tl-item:nth-child(even)::after{inset-inline-end:auto; inset-inline-start:20px; top:35px; width:22px;}
  html.js .tl-item:nth-child(n) .tl-card{transform:translateX(-32px);}
  html.js .tl-item.is-visible .tl-card{transform:none;}
}

/* Respect the visitor's "reduce motion" setting: show everything, animate nothing */
@media (prefers-reduced-motion: reduce){
  .fbook, .fb-turn, header, nav ul li, .nav-cta::after, .nav-books, .nav-books i{animation:none !important;}
  .print{animation:none !important; transform:rotate(var(--r));}
  .cd-num.tick, .program-day.is-entering{animation:none !important;}
  .stat::before{transition:none;}
  html.js .bookshelf .spine, html.js .bookshelf .lying,
  html.js .tl-card, html.js .tl-dot, html.js .tl-item::after, html.js .mosaic .tile{
    transition:none !important; opacity:1 !important;
  }
  html.js .bookshelf .spine, html.js .bookshelf .lying, html.js .tl-card, html.js .mosaic .tile{transform:none !important;}
  html.js .tl-dot{transform:rotate(45deg) !important;}
  .spine.leaning{transform:rotate(var(--tilt)) !important;}
  .post-card .thumb img{transition:none;}
  .post-card:hover .thumb img{transform:none; box-shadow:none;}
}

/* Narrow phones: the calligraphy logo already carries the name, so drop the text beside it */
@media (max-width: 420px){
  .brand-logo ~ .brand-name{display:none;}
}