/* =========================================================
   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;}
}

/* =========================================================
   EASTER EGGS (triggered from js/main.js — see README.md)
   ========================================================= */

/* Konami code: books rain down the screen */
.egg-rain{position:fixed; inset:0; z-index:300; pointer-events:none; overflow:hidden;}
.egg-book{
  position:absolute; top:-80px; display:block; aspect-ratio:3/4; border-radius:2px 5px 5px 2px;
  box-shadow:inset 4px 0 0 rgba(0,0,0,.12), 0 10px 18px -12px rgba(87,83,79,.5);
  animation:egg-fall linear forwards;
}
.egg-book::before, .egg-book::after{display:none;} /* no spine bands */
@keyframes egg-fall{to{transform:translateY(calc(100vh + 160px)) rotate(var(--spin, 180deg));}}

/* message pill */
.egg-toast{
  position:fixed; bottom:26px; left:50%; z-index:10000; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 24px; border-radius:100px; font-weight:700; font-size:.95rem;
  box-shadow:0 16px 34px -18px rgba(87,83,79,.8); white-space:nowrap; max-width:calc(100vw - 32px);
  animation:egg-toast-in .45s cubic-bezier(.2,.8,.2,1);
  transition:opacity .5s ease, transform .5s ease;
}
.egg-toast.is-out{opacity:0; transform:translate(-50%, 12px);}
@keyframes egg-toast-in{from{opacity:0; transform:translate(-50%, 18px);}}

/* "1956": the page turns sepia for a moment (filter on the blocks, not on body, so fixed elements keep working) */
main, footer{transition:filter 1.2s ease;}
header{transition:box-shadow .3s ease, background-color .3s ease, filter 1.2s ease;}
html.egg-1956 header, html.egg-1956 main, html.egg-1956 footer{filter:sepia(.85) saturate(.8) contrast(1.05);}

/* top-bar bookshelf: spines hop one after another */
.nav-books{cursor:pointer;}
.nav-books.egg-hop i{animation:egg-hop .7s cubic-bezier(.3,1.7,.5,1) both; animation-delay:calc(var(--i) * 70ms);}
.nav-books.egg-hop i.lean{animation-name:egg-hop-lean;}
@keyframes egg-hop{40%{transform:translateY(-12px);}}
@keyframes egg-hop-lean{40%{transform:translateY(-12px) rotate(0deg);} 100%{transform:rotate(-16deg);}}

/* hero logo triple-click: floating books spin, logo wiggles */
.logo-orbit.egg-spin .fbook{animation:egg-spin 1.6s cubic-bezier(.3,.8,.3,1);}
.logo-orbit.egg-spin .edition-logo{animation:egg-wiggle .9s ease-in-out;}
@keyframes egg-spin{50%{transform:rotate(calc(var(--r, 0deg) + 360deg)) scale(1.25);} 100%{transform:rotate(calc(var(--r, 0deg) + 720deg));}}
@keyframes egg-wiggle{20%{transform:rotate(-4deg);} 40%{transform:rotate(4deg);} 60%{transform:rotate(-2deg);} 80%{transform:rotate(2deg);}}

/* 404 flip-book: faster pages */
.flipbook.egg-fast .fb-turn{animation-duration:1.3s;}

/* diamond burst (footer year ×7, history edition double-click) */
.egg-burst{position:fixed; width:0; height:0; z-index:300; pointer-events:none;}
.egg-burst i{
  position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:2px;
  animation:egg-burst .95s cubic-bezier(.2,.7,.2,1) forwards;
}
.egg-burst i::before, .egg-burst i::after{display:none;}
@keyframes egg-burst{
  from{transform:translate(0, 0) rotate(45deg) scale(1); opacity:1;}
  to{transform:translate(var(--dx), var(--dy)) rotate(225deg) scale(.4); opacity:0;}
}

/* typing "كتاب" / "book": a big book flips in the middle of the screen */
.egg-bigbook{
  position:fixed; inset:0; z-index:299; pointer-events:none; display:flex; align-items:center; justify-content:center;
  animation:egg-bigbook-in .5s cubic-bezier(.2,.8,.2,1); transition:opacity .5s ease, transform .5s ease;
}
.egg-bigbook .flipbook{transform:scale(1.35); margin:0;}
.egg-bigbook.is-out{opacity:0; transform:scale(.9);}
@keyframes egg-bigbook-in{from{opacity:0; transform:scale(.6) rotate(-6deg);}}

/* clicking «الكتاب»: letters float up */
.egg-letter{
  position:fixed; z-index:300; pointer-events:none; font-family:'Aref Ruqaa', serif; font-weight:700; font-size:2rem;
  color:var(--pink); transform:translate(-50%, -50%);
  animation:egg-letter 1.6s cubic-bezier(.2,.7,.2,1) both;
}
.egg-letter.is-ink{color:var(--ink);}
@keyframes egg-letter{
  from{opacity:0; transform:translate(-50%, -50%) scale(.6);}
  15%{opacity:1;}
  to{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% - 170px)) rotate(var(--rot)) scale(1.1);}
}

/* bookworm crawling along a shelf plank (right → left, like Arabic reading) */
.bookshelf{position:relative;}
.egg-worm{
  position:absolute; bottom:9px; right:0; font-size:22px; line-height:1; z-index:2; pointer-events:none; /* sits on the plank */
  animation:egg-worm 6s linear forwards;
}
@keyframes egg-worm{
  0%{right:0; transform:scaleX(1) translateY(0);}
  10%, 30%, 50%, 70%, 90%{transform:translateY(-3px);}
  20%, 40%, 60%, 80%{transform:translateY(0);}
  100%{right:calc(100% - 24px); transform:translateY(0);}
}

/* About "1956" counting to today: soft pink glow while it runs */
.about-figure .since.egg-glow{color:var(--pink); text-shadow:0 6px 24px rgba(217,79,150,.35); transition:color .3s ease;}

/* About booklet: pages shuffle like cards */
.booklet.egg-shuffle .booklet-page .sheet{
  transform:translateY(var(--lift, -10px)) rotate(var(--shuffle, 6deg));
  transition:transform .45s cubic-bezier(.3,1.5,.5,1);
  box-shadow:0 22px 36px -24px rgba(87,83,79,.55);
}

/* Program: a busy day's events shake like pages */
.event-row.egg-shake{animation:egg-shake .55s ease both; animation-delay:calc(var(--k, 0) * 55ms);}
@keyframes egg-shake{
  20%{transform:translateX(-6px) rotate(-1deg);}
  45%{transform:translateX(5px) rotate(.8deg);}
  70%{transform:translateX(-3px) rotate(-.4deg);}
}

/* News list: cards flip over one by one */
.post-card.egg-flip{animation:egg-flip .9s cubic-bezier(.3,.8,.3,1) both; animation-delay:calc(var(--k, 0) * 90ms);}
@keyframes egg-flip{
  from{transform:perspective(1000px) rotateY(0);}
  to{transform:perspective(1000px) rotateY(360deg);}
}

/* history card pops after the edition double-click */
.tl-card.egg-pop{animation:egg-pop .6s cubic-bezier(.3,1.6,.5,1);}
@keyframes egg-pop{40%{transform:scale(1.03);}}
.tl-edition{cursor:default; user-select:none;}

/* ----- the books themselves ----- */
/* floating hero books are clickable (the ring itself stays click-through) */
.hero-books .fbook{pointer-events:auto; cursor:pointer; transition:scale .25s ease;}
.hero-books .fbook:hover{scale:1.12;}
/* flies a loop, flapping its covers (scaleX squeeze) like wings */
.hero-books .fbook.egg-fly{animation:egg-fly 1.6s ease-in-out; z-index:3;}
@keyframes egg-fly{
  0%{transform:translate(0, 0) rotate(var(--r, 0deg)) scaleX(1);}
  10%{transform:translate(8px, -22px) rotate(-10deg) scaleX(.35);}
  20%{transform:translate(28px, -44px) rotate(0deg) scaleX(1);}
  30%{transform:translate(44px, -30px) rotate(15deg) scaleX(.35);}
  42%{transform:translate(40px, 0) rotate(30deg) scaleX(1);}
  54%{transform:translate(18px, 10px) rotate(10deg) scaleX(.35);}
  66%{transform:translate(-8px, -8px) rotate(-12deg) scaleX(1);}
  78%{transform:translate(-14px, -26px) rotate(-6deg) scaleX(.35);}
  90%{transform:translate(-4px, -10px) rotate(0deg) scaleX(1);}
  100%{transform:translate(0, 0) rotate(var(--r, 0deg)) scaleX(1);}
}

/* shelf spines lift on hover, get pulled off the shelf on click */
html.js .bookshelf .spine, html.js .bookshelf .lying{
  transition:transform .7s cubic-bezier(.2,.9,.25,1.15), opacity .4s ease, translate .2s ease;
  transition-delay:calc(var(--i) * 45ms), calc(var(--i) * 45ms), 0s;
}
.bookshelf .spine, .bookshelf .stack{cursor:pointer;}
.bookshelf .spine:hover{translate:0 -5px;}
.shelf-books:has(.egg-pull, .egg-topple, .egg-ding){overflow:visible;}
/* xylophone: the struck spine bounces */
.bookshelf .spine.egg-ding{animation:egg-ding .4s cubic-bezier(.3,1.6,.5,1);}
@keyframes egg-ding{
  0%, 100%{transform:translateY(0) rotate(var(--tilt, 0deg));}
  35%{transform:translateY(-12px) scaleY(1.04);}
}
.bookshelf .spine.egg-pull{animation:egg-pull 1.9s cubic-bezier(.3,.8,.3,1); z-index:2;}
@keyframes egg-pull{
  0%{transform:translateY(0) rotate(var(--tilt, 0deg));}
  25%, 70%{transform:translateY(-38px) rotate(0deg) scale(1.08); box-shadow:0 18px 26px -14px rgba(87,83,79,.55);}
  100%{transform:translateY(0) rotate(var(--tilt, 0deg));}
}
.bookshelf .stack.egg-topple .lying{animation:egg-topple 1.6s cubic-bezier(.3,.8,.3,1); animation-delay:calc(var(--k, 0) * 80ms);}
.bookshelf .stack.egg-topple .lying:nth-child(1){--k:0; --fall:-34px; --spin:-24deg;}
.bookshelf .stack.egg-topple .lying:nth-child(2){--k:1; --fall:22px; --spin:14deg;}
.bookshelf .stack.egg-topple .lying:nth-child(3){--k:2; --fall:-10px; --spin:-6deg;}
@keyframes egg-topple{
  0%, 100%{transform:translate(0, 0) rotate(0);}
  30%{transform:translate(var(--fall), -8px) rotate(var(--spin));}
  55%{transform:translate(var(--fall), 0) rotate(var(--spin));}
}

/* speech bubble naming a classic book */
.egg-bubble{
  position:fixed; z-index:9999; transform:translate(-50%, -100%); pointer-events:none;
  background:var(--paper); color:var(--ink); border:1px solid var(--stone); border-radius:14px;
  padding:10px 16px; text-align:center; max-width:220px; line-height:1.5;
  box-shadow:0 16px 30px -18px rgba(87,83,79,.55);
  animation:egg-bubble-in .35s cubic-bezier(.3,1.5,.5,1) both; transition:opacity .45s ease, translate .45s ease;
}
.egg-bubble::after{
  content:''; position:absolute; left:50%; bottom:-7px; width:12px; height:12px; margin-left:-6px;
  background:var(--paper); border-right:1px solid var(--stone); border-bottom:1px solid var(--stone); transform:rotate(45deg);
}
.egg-bubble b{display:block; color:var(--pink); font-size:15px;}
.egg-bubble.is-out{opacity:0; translate:0 -8px;}
@keyframes egg-bubble-in{from{opacity:0; scale:.85;}}

/* ----- haceb ----- */
/* typed "haceb": the logo is stamped in the middle of the screen */
.egg-haceb{
  position:fixed; inset:0; z-index:9998; display:grid; place-items:center; pointer-events:none;
  background:rgba(255,253,252,.55); transition:opacity .6s ease;
}
.egg-haceb.is-out{opacity:0;}
.egg-haceb-card{
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:34px 46px;
  background:#fff; border:1px solid var(--stone); border-radius:24px;
  box-shadow:0 30px 60px -30px rgba(87,83,79,.55), 0 0 0 0 rgba(217,79,150,.35);
  animation:egg-stamp .6s cubic-bezier(.3,1.6,.5,1) both, egg-ring 1.4s ease-out .5s;
}
.egg-haceb-card img{height:54px; width:auto; display:block;}
.egg-haceb-card span{font-family:'Montserrat',sans-serif; font-size:.85rem; font-weight:700; color:var(--gray-text); letter-spacing:.3px;}
@keyframes egg-stamp{
  from{opacity:0; transform:scale(2.2) rotate(-8deg);}
  to{opacity:1; transform:scale(1) rotate(0);}
}
@keyframes egg-ring{
  to{box-shadow:0 30px 60px -30px rgba(87,83,79,.55), 0 0 0 36px rgba(217,79,150,0);}
}

/* triple-clicked "Powered by haceb" badge: a light sweep and a spinning logo */
.powered{position:relative; overflow:hidden; cursor:default; user-select:none;}
.powered.egg-shine{border-color:var(--pink);}
.powered.egg-shine::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:50%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(217,79,150,.28), transparent);
  animation:egg-sweep 1.1s ease;
}
.powered.egg-shine img{animation:egg-logo-spin 1.1s cubic-bezier(.3,.8,.3,1);}
@keyframes egg-sweep{to{left:120%;}}
@keyframes egg-logo-spin{
  50%{transform:perspective(400px) rotateY(180deg) scale(1.1);}
  to{transform:perspective(400px) rotateY(360deg);}
}

/* haceb mode: the site borrows haceb's purple for a few seconds */
html.egg-haceb-mode{--pink:#8a4fe0; --pink-tint:#f6f1ff;}
html.egg-haceb-mode body{transition:background-color .6s ease;}
html.egg-haceb-mode .hero-title .accent{
  background:linear-gradient(90deg, #f0606a, #b04fd0, #5b3fd4); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* h·a·c·e·b letters floating out of the badge */
.egg-haceb-letter{
  font-family:'Montserrat', sans-serif; font-weight:900; font-size:2.2rem;
  background:linear-gradient(135deg, #f0606a, #b04fd0 55%, #5b3fd4); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.powered{-webkit-touch-callout:none;}

/* end credits rolling up the screen */
.egg-credits{
  position:fixed; inset:0; z-index:9999; overflow:hidden; cursor:pointer;
  background:rgba(37,33,30,.92); color:#fff; text-align:center;
  animation:egg-lamp-in .6s ease both; transition:opacity .6s ease;
}
.egg-credits.is-out{opacity:0;}
.egg-credits-reel{
  position:absolute; left:0; right:0; top:100%; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 16px;
  animation:egg-credits 10.5s linear forwards;
}
.egg-credits p{margin:0;}
.egg-credits .c-h{font-family:'Aref Ruqaa', serif; font-size:2.2rem; color:#fff; margin-bottom:4px;}
.egg-credits .c-s{color:rgba(255,255,255,.65); font-size:1rem; margin-bottom:40px;}
.egg-credits .c-t{color:var(--pink); font-size:.85rem; letter-spacing:.5px; margin-top:26px;}
.egg-credits .c-n{font-size:1.35rem; font-weight:700;}
.egg-credits .c-logo{height:46px; width:auto; margin:8px 0 48px; padding:10px 18px; background:#fff; border-radius:14px;}
.egg-credits .c-s:last-child{margin:0; font-size:1.1rem;}
@keyframes egg-credits{
  to{transform:translateY(calc(-100vh - 100%));}
}

/* "becah": the page mirrored */
body.egg-mirror{animation:egg-mirror 3.2s cubic-bezier(.5,0,.3,1);}
@keyframes egg-mirror{
  15%, 85%{transform:scaleX(-1);}
}

/* "//": the haceb mark's two slashes sweep across */
.egg-slashes{position:fixed; inset:0; z-index:9995; pointer-events:none; overflow:hidden;}
.egg-slashes span{
  position:absolute; top:-20vh; left:-30vw; width:14vw; height:140vh; border-radius:8vw;
  background:linear-gradient(180deg, #f0606a, #b04fd0 55%, #5b3fd4); opacity:.85;
  transform:skewX(-28deg); animation:egg-slash 1.1s cubic-bezier(.6,0,.3,1) forwards;
}
.egg-slashes span + span{animation-delay:.15s; opacity:.6;}
@keyframes egg-slash{to{left:130vw;}}

/* resting on the badge: a small card types itself out */
.egg-haceb-tip{
  position:fixed; z-index:9999; transform:translate(-50%, -100%); pointer-events:none; white-space:nowrap;
  background:#1d1b22; color:#fff; border-radius:10px; padding:8px 14px; min-height:34px;
  font-family:'Montserrat', sans-serif; font-size:.8rem; font-weight:600;
  box-shadow:0 16px 30px -16px rgba(37,33,30,.7); border-bottom:3px solid #b04fd0;
}
.egg-haceb-tip::after{content:'▌'; color:#b04fd0; margin-left:2px; animation:egg-caret .8s steps(1) infinite;}
@keyframes egg-caret{50%{opacity:0;}}

/* the haceb mark (the coloured slashes of the logo, cropped from the logo image) */
.haceb-mark{
  display:block; width:15px; height:14px; pointer-events:none;
  background:url(/images/haceb-logo.png) no-repeat left center / auto 100%;
}
/* hidden on one dark spine of each bookshelf */
.spine.s-haceb .haceb-mark{position:absolute; left:50%; top:46%; margin-left:-7px; opacity:.6; transition:opacity .2s ease;}
.spine.s-haceb:hover .haceb-mark{opacity:1;}

/* the secret haceb edition: a book opens in the middle of the screen */
.egg-secret{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center; cursor:pointer;
  background:rgba(37,33,30,.45); animation:egg-lamp-in .4s ease both; transition:opacity .6s ease;
}
.egg-secret.is-out{opacity:0;}
.egg-secret .sb-book{position:relative; width:230px; height:300px; perspective:1200px; animation:egg-stamp .6s cubic-bezier(.3,1.5,.5,1) both;}
.egg-secret .sb-page{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px;
  background:#fff repeating-linear-gradient(180deg, transparent 0 22px, var(--stone-light) 22px 23px);
  border-radius:4px 10px 10px 4px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6), inset 8px 0 12px -8px rgba(87,83,79,.35);
  text-align:center;
}
.egg-secret .sb-page img{width:150px; height:auto; background:#fff; padding:4px;}
.egg-secret .sb-page span{font-family:'Montserrat', sans-serif; font-size:.7rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#b04fd0; background:#fff; padding:0 4px;}
.egg-secret .sb-page b{font-size:1rem; color:var(--ink); background:#fff; padding:0 4px;}
.egg-secret .sb-cover{ /* Arabic books open from the right: the cover hinges on the right edge */
  position:absolute; inset:0; display:grid; place-items:center; border-radius:4px 10px 10px 4px;
  background:#1d1b22; border-right:6px solid #b04fd0; transform-origin:right center; backface-visibility:hidden;
  animation:egg-cover-open 1s cubic-bezier(.5,0,.3,1) .5s forwards;
}
.egg-secret .sb-cover .haceb-mark{width:62px; height:58px;}
@keyframes egg-cover-open{to{transform:rotateY(170deg);}}

/* third "haceb": haceb logos rain down */
.egg-haceb-rain{position:fixed; inset:0; z-index:9996; pointer-events:none; overflow:hidden;}
.egg-haceb-rain img{
  position:absolute; top:-60px; height:auto; opacity:.95; background:#fff; padding:6px 10px; border-radius:10px;
  box-shadow:0 10px 20px -12px rgba(37,33,30,.5); animation:egg-haceb-fall 3s cubic-bezier(.4,0,.8,1) both;
}
@keyframes egg-haceb-fall{
  from{transform:translateY(0) rotate(0);}
  to{transform:translateY(calc(100vh + 120px)) rotate(var(--spin));}
}

/* "hello": a chat bubble from haceb */
.egg-hello{
  position:fixed; left:20px; bottom:20px; z-index:9999; display:flex; align-items:center; gap:12px; max-width:calc(100vw - 40px);
  background:#fff; border:1px solid var(--stone); border-radius:18px 18px 18px 4px; padding:12px 16px;
  box-shadow:0 20px 40px -22px rgba(37,33,30,.6); border-left:4px solid #b04fd0;
  animation:egg-hello-in .6s cubic-bezier(.3,1.5,.5,1) both; transition:transform .6s ease, opacity .6s ease;
}
.egg-hello.is-out{transform:translateX(-120%); opacity:0;}
.egg-hello img{height:24px; width:auto;}
.egg-hello b{display:block; font-family:'Montserrat', sans-serif; font-size:.9rem; color:#1d1b22;}
.egg-hello em{display:block; font-style:normal; font-size:.82rem; color:var(--gray-text); direction:rtl; text-align:left;}
@keyframes egg-hello-in{from{transform:translateX(-120%) rotate(-4deg);}}

/* printing a page: a small signature at the end */
@media print{
  footer::after{
    content:'arabbookfair.org · Website designed & developed by haceb'; display:block; margin-top:18px;
    font:600 9pt 'Montserrat', sans-serif; color:#6f6a65; text-align:center; direction:ltr;
  }
}

/* ----- Beirut, Lebanon & friends ----- */
.egg-scene{position:fixed; inset:0; z-index:9995; pointer-events:none; overflow:hidden; transition:opacity .7s ease;}
.egg-scene.is-out{opacity:0;}

/* Beirut skyline at sunset */
.egg-beirut{background:linear-gradient(180deg, transparent 35%, rgba(255,245,250,.85) 70%, rgba(217,79,150,.25)); animation:egg-lamp-in .8s ease both;}
.egg-beirut .sb-sun{
  position:absolute; left:50%; bottom:90px; width:150px; height:150px; margin-left:-75px; border-radius:50%;
  background:radial-gradient(circle, #f58bbf, var(--pink)); opacity:.9; animation:egg-sunset 6s ease-in forwards;
}
@keyframes egg-sunset{from{transform:translateY(-120px);} to{transform:translateY(40px);}}
.egg-beirut .sb-city{position:absolute; left:0; right:0; bottom:60px; display:flex; justify-content:center; align-items:flex-end; gap:6px;}
.egg-beirut .sb-city i{
  display:block; width:clamp(18px, 4vw, 44px); height:var(--h); background:var(--ink); border-radius:3px 3px 0 0;
  background-image:repeating-linear-gradient(180deg, transparent 0 10px, rgba(255,245,250,.35) 10px 13px);
  background-size:40% 100%; background-repeat:no-repeat; background-position:center 8px;
  transform:translateY(110%); animation:egg-rise .9s cubic-bezier(.3,1.3,.5,1) forwards; animation-delay:calc(var(--i) * 50ms);
}
.egg-beirut .sb-sea{position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(180deg, #8c8680, var(--ink));}
.egg-beirut .sb-rock{ /* the Raouché rock with its arch */
  position:absolute; right:8%; bottom:30px; width:110px; height:110px; background:var(--ink);
  border-radius:40% 55% 10% 10%; transform:translateY(120%); animation:egg-rise 1s cubic-bezier(.3,1.3,.5,1) .6s forwards;
  -webkit-mask:radial-gradient(ellipse 22px 34px at 50% 100%, transparent 98%, #000 100%);
  mask:radial-gradient(ellipse 22px 34px at 50% 100%, transparent 98%, #000 100%);
}
@keyframes egg-rise{to{transform:translateY(0);}}

/* a cedar grows */
.egg-cedar svg{position:absolute; left:50%; bottom:0; margin-left:-110px; transform-origin:bottom center; animation:egg-grow 1.4s cubic-bezier(.3,1.3,.5,1) both;}
.egg-cedar .t{transform-box:fill-box; transform-origin:center bottom; animation:egg-tier .6s cubic-bezier(.3,1.6,.5,1) both;}
.egg-cedar .t4{animation-delay:.5s;} .egg-cedar .t3{animation-delay:.7s;} .egg-cedar .t2{animation-delay:.9s;} .egg-cedar .t1{animation-delay:1.1s;}
@keyframes egg-grow{from{transform:scale(.1);}}
@keyframes egg-tier{from{transform:scaleX(0);}}

/* coffee with steam */
.egg-coffee .cc-cup, .egg-coffee .cc-saucer, .egg-coffee .cc-steam{position:absolute; left:50%;}
.egg-coffee .cc-cup{
  bottom:46px; width:96px; height:72px; margin-left:-48px; background:var(--pink); border-radius:6px 6px 40px 40px;
  box-shadow:inset -10px 0 0 rgba(0,0,0,.1); animation:egg-rise .7s cubic-bezier(.3,1.4,.5,1) both; transform:translateY(200%);
}
.egg-coffee .cc-cup::after{ /* handle */
  content:''; position:absolute; right:-24px; top:12px; width:22px; height:30px; border:7px solid var(--pink); border-left:0; border-radius:0 16px 16px 0;
}
.egg-coffee .cc-saucer{
  bottom:36px; width:150px; height:14px; margin-left:-75px; background:var(--ink); border-radius:50%;
  animation:egg-rise .7s cubic-bezier(.3,1.4,.5,1) both; transform:translateY(300%);
}
.egg-coffee .cc-steam{bottom:126px; width:80px; margin-left:-40px; height:120px; display:flex; justify-content:space-around;}
.egg-coffee .cc-steam i{
  display:block; width:8px; height:60px; border-radius:8px; background:linear-gradient(180deg, transparent, var(--stone));
  opacity:0; animation:egg-steam 2s ease-in-out .7s infinite;
}
.egg-coffee .cc-steam i:nth-child(2){animation-delay:1.1s;}
.egg-coffee .cc-steam i:nth-child(3){animation-delay:1.5s;}
@keyframes egg-steam{
  0%{opacity:0; transform:translateY(40px) scaleY(.6);}
  40%{opacity:1;}
  100%{opacity:0; transform:translateY(-30px) translateX(8px) scaleY(1.2) skewX(12deg);}
}

/* gravity: things fall off the screen and float back */
.egg-fall{animation:egg-fall 3.4s cubic-bezier(.5,0,.5,1) var(--wait, 0s) both !important;}
@keyframes egg-fall{
  0%{transform:translateY(0) rotate(0);}
  30%{transform:translateY(var(--fall)) rotate(var(--tumble));}
  60%{transform:translateY(var(--fall)) rotate(var(--tumble));}
  100%{transform:translateY(0) rotate(0);}
}
body.egg-gravity{overflow-x:hidden;}

/* scrolling too fast: a slow turtle crosses the bottom of the screen */
.egg-turtle{
  position:fixed; bottom:14px; left:-40px; z-index:9995; font-size:30px; pointer-events:none;
  transform:scaleX(-1); animation:egg-turtle 7s linear forwards;
}
@keyframes egg-turtle{to{left:calc(100vw + 10px);}}

/* ----- more, anywhere on the site ----- */
/* reading lamp: the page dims except a warm circle around the pointer */
.egg-lamp{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(circle 170px at var(--mx) var(--my), rgba(255,236,200,.18) 0, rgba(255,236,200,.08) 60%, rgba(37,33,30,.78) 100%);
  animation:egg-lamp-in .6s ease both; transition:opacity .6s ease;
}
.egg-lamp.is-out{opacity:0;}
@keyframes egg-lamp-in{from{opacity:0;}}

/* idle: a little book peeks up from the bottom corner */
.egg-peek{
  position:fixed; bottom:0; left:28px; z-index:9996; display:flex; align-items:flex-end; gap:10px; pointer-events:none;
  animation:egg-peek-up .7s cubic-bezier(.3,1.5,.5,1) both; transition:transform .7s ease, opacity .7s ease;
}
.egg-peek.is-out{transform:translateY(110%); opacity:0;}
.egg-peek-book{
  display:block; width:46px; height:62px; margin-bottom:-14px; border-radius:3px 7px 0 0; background:var(--pink); position:relative;
  box-shadow:inset 5px 0 0 rgba(0,0,0,.12); animation:egg-peek-wave 1s ease-in-out .7s 3;
  transform-origin:bottom center;
}
.egg-peek-book::before{ /* two little eyes */
  content:''; position:absolute; top:16px; left:13px; width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:14px 0 0 #fff;
}
.egg-peek-say{
  margin-bottom:34px; background:var(--paper); color:var(--ink); border:1px solid var(--stone); border-radius:14px 14px 14px 4px;
  padding:8px 14px; font-size:.9rem; box-shadow:0 14px 26px -18px rgba(87,83,79,.55);
}
@keyframes egg-peek-up{from{transform:translateY(110%);}}
@keyframes egg-peek-wave{25%{transform:rotate(-8deg);} 75%{transform:rotate(8deg);}}

/* ----- animated extras ----- */
/* autumn: book pages drift down, swaying like leaves */
.egg-autumn{position:fixed; inset:0; z-index:9995; pointer-events:none; overflow:hidden;}
.egg-leaf{
  position:absolute; top:-60px; width:26px; height:34px; border-radius:2px 6px 6px 2px;
  background:#fff repeating-linear-gradient(180deg, transparent 0 6px, var(--stone) 6px 7px);
  border:1px solid var(--stone); box-shadow:0 6px 12px -8px rgba(87,83,79,.5);
  animation:egg-leaf 5s linear both;
}
.egg-leaf.is-tint{background-color:var(--pink-tint); border-color:rgba(217,79,150,.35);}
.egg-leaf.is-stone{background-color:var(--stone-light);}
@keyframes egg-leaf{
  0%{transform:translate(0, 0) rotate(0);}
  25%{transform:translate(var(--sway), 28vh) rotate(calc(var(--spin) * .25)) rotateX(40deg);}
  50%{transform:translate(calc(var(--sway) * -.6), 56vh) rotate(calc(var(--spin) * .5));}
  75%{transform:translate(var(--sway), 84vh) rotate(calc(var(--spin) * .75)) rotateX(-40deg);}
  100%{transform:translate(0, 115vh) rotate(var(--spin)); opacity:.6;}
}

/* ink trail */
.egg-ink{
  position:fixed; z-index:9995; pointer-events:none; width:var(--s); height:var(--s); border-radius:50%;
  background:var(--pink); transform:translate(-50%, -50%); animation:egg-ink 1.2s ease-out forwards;
}
@keyframes egg-ink{
  from{opacity:.85;}
  to{opacity:0; transform:translate(-50%, calc(-50% + 14px)) scale(.3);}
}
body.egg-inking{cursor:crosshair;}

/* little books gather into a heart, then scatter */
.egg-heart{position:fixed; left:50%; top:45%; z-index:9995; pointer-events:none;}
.egg-heart-book{
  position:absolute; left:-9px; top:-12px; width:18px; height:24px; border-radius:2px 4px 4px 2px; background:var(--pink);
  box-shadow:inset 3px 0 0 rgba(0,0,0,.12); animation:egg-heart 3.2s cubic-bezier(.3,.8,.3,1) both;
}
.egg-heart-book.is-ink{background:var(--ink);}
.egg-heart-book.is-stone{background:var(--stone);}
@keyframes egg-heart{
  0%{opacity:0; transform:translate(0, 0) scale(.2);}
  25%{opacity:1; transform:translate(var(--hx), var(--hy)) rotate(var(--rot)) scale(1);}
  45%{transform:translate(calc(var(--hx) * 1.12), calc(var(--hy) * 1.12)) rotate(var(--rot)) scale(1.1);}
  60%{transform:translate(var(--hx), var(--hy)) rotate(var(--rot)) scale(1);}
  75%{opacity:1; transform:translate(var(--hx), var(--hy)) rotate(var(--rot));}
  100%{opacity:0; transform:translate(var(--fx), var(--fy)) rotate(calc(var(--rot) * 6));}
}

/* barrel roll */
body.egg-roll{animation:egg-roll 1.5s cubic-bezier(.45,0,.2,1);}
@keyframes egg-roll{to{transform:rotate(360deg);}}

/* paper plane carrying the copied link */
.egg-plane{
  position:fixed; z-index:9995; pointer-events:none; transform:translate(-50%, -50%);
  animation:egg-plane 2.1s cubic-bezier(.5,0,.6,1) forwards;
}
@keyframes egg-plane{
  0%{transform:translate(-50%, -50%) scale(.4) rotate(0); opacity:0;}
  10%{transform:translate(-50%, -50%) scale(1) rotate(-10deg); opacity:1;}
  40%{transform:translate(calc(-50% - 120px), calc(-50% - 60px)) rotate(-30deg);}
  60%{transform:translate(calc(-50% - 60px), calc(-50% - 140px)) rotate(-200deg);}
  100%{transform:translate(calc(-50% - 60vw), calc(-50% - 80vh)) rotate(-235deg) scale(.6); opacity:0;}
}

/* statistic counted again */
.stat.egg-recount .n{color:var(--pink); transform:scale(1.08); transition:transform .3s cubic-bezier(.3,1.6,.5,1), color .3s ease;}

/* footer books: a Mexican wave */
.bookshelf.egg-wave .shelf-books{overflow:visible;}
.bookshelf.egg-wave .spine, .bookshelf.egg-wave .lying{animation:egg-ding .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--i, 0) * 70ms);}

/* 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;}
  .egg-toast, .egg-bubble, .egg-haceb, .egg-haceb-card, .egg-lamp{animation:none; transition:none;}
  .egg-credits-reel{animation:none; top:50%; transform:translateY(-50%);}
  .hero-books .fbook:hover{scale:none;}
  .bookshelf .spine:hover{translate:none;}
  header, main, footer{transition:none;}
  .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;}
}