/* Senses Atlas — "Description of Egypt" hub (Territory > Exploration, curated
   collection of 6 posts: overview + 5 volumes of La Description de l'Egypte).
   Adapted from mockup "Description de l'Egypte — Hub", validated by Pierre
   26/08/2026. Scoped under #sa-egypt-page. The theme's own header/footer are
   used, not the mockup's own chrome (same principle as territory.css).
*/
#sa-egypt-page{
  --ink:#1A1A18; --gray:#6B6B67; --gray-light:#A8A8A4;
  --hair:rgba(0,0,0,0.10); --hair-strong:rgba(0,0,0,0.14);
  --territory:#B9803C; --territory-tint:#F7EDE0;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  color:var(--ink);
  background:#FFFFFF;
}
#sa-egypt-page *{box-sizing:border-box}
#sa-egypt-page h1,#sa-egypt-page h2{font-family:'Catamaran',sans-serif;font-weight:800;letter-spacing:-0.01em;text-wrap:balance;margin:0}
#sa-egypt-page a{color:inherit;text-decoration:none}
#sa-egypt-page img{max-width:100%;display:block}

/* ---- breadcrumb ---- */
#sa-egypt-page .sa-crumb{max-width:900px;margin:1.6rem auto 0;padding:0 44px;font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--gray);display:flex;gap:0.4rem;flex-wrap:wrap}
#sa-egypt-page .sa-crumb a:hover{color:var(--territory)}
#sa-egypt-page .sa-crumb span{color:var(--gray-light)}

/* ---- hero ---- */
#sa-egypt-page .sa-hero{max-width:900px;margin:0 auto;padding:1.1rem 44px 2.2rem;border-bottom:0.5px solid var(--hair)}
#sa-egypt-page .sa-eyebrow{font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--territory);font-weight:700;margin-bottom:0.7rem}
#sa-egypt-page .sa-hero h1{font-size:2.5rem;line-height:1.08;margin-bottom:1.6rem}
#sa-egypt-page .sa-intro{font-size:1rem;line-height:1.75;color:#3A3A37;max-width:700px}
#sa-egypt-page .sa-intro p{margin:0 0 1.1rem}
#sa-egypt-page .sa-intro p:last-child{margin-bottom:0}
#sa-egypt-page .sa-intro em{font-style:italic}

/* ---- volumes ---- */
#sa-egypt-page .sa-vol-section{max-width:900px;margin:0 auto;padding:2.4rem 44px 0}
#sa-egypt-page .sa-section-title{display:flex;align-items:baseline;gap:0.7rem;margin-bottom:1.6rem}
#sa-egypt-page .sa-section-title h2{font-size:1.15rem;text-transform:uppercase;letter-spacing:0.04em}
#sa-egypt-page .sa-section-title .count{font-size:0.78rem;color:var(--gray-light);font-family:'Roboto',sans-serif;font-weight:300}
#sa-egypt-page .sa-vol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:0.5px solid var(--hair)}
#sa-egypt-page .sa-vol-card{background:#FFFFFF;display:flex;flex-direction:column;cursor:pointer;transition:background 0.15s ease}
#sa-egypt-page .sa-vol-card:hover{background:#FBF8F3}
#sa-egypt-page .sa-vol-figure{aspect-ratio:4/5;overflow:hidden;background:#EFEEEA}
#sa-egypt-page .sa-vol-figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(12%) contrast(1.02);transition:transform 0.4s ease}
#sa-egypt-page .sa-vol-card:hover .sa-vol-figure img{transform:scale(1.04)}
#sa-egypt-page .sa-vol-body{padding:1rem 1.1rem 1.3rem}
#sa-egypt-page .sa-vol-num{font-size:0.68rem;letter-spacing:0.08em;color:var(--territory);font-weight:700;margin-bottom:0.4rem;text-transform:uppercase}
#sa-egypt-page .sa-vol-title{font-family:'Catamaran',sans-serif;font-weight:700;font-size:0.98rem;line-height:1.3;margin-bottom:0.35rem}
#sa-egypt-page .sa-vol-sub{font-size:0.78rem;color:var(--gray);line-height:1.4}

/* ---- map ---- */
#sa-egypt-page .sa-map-section{max-width:900px;margin:0 auto;padding:2.8rem 44px 2.6rem}
#sa-egypt-page .sa-map-frame{border:0.5px solid var(--hair-strong);aspect-ratio:16/8;background:#EFEEEA;position:relative;overflow:hidden}
#sa-egypt-page .sa-map-frame iframe{width:100%;height:100%;border:0;filter:grayscale(35%) contrast(1.03)}
#sa-egypt-page .sa-map-caption{display:flex;justify-content:space-between;align-items:baseline;margin-top:0.6rem;font-size:0.76rem;color:var(--gray);flex-wrap:wrap;gap:6px}
#sa-egypt-page .sa-map-caption a:hover{color:var(--territory)}

@media(max-width:700px){
  #sa-egypt-page .sa-vol-grid{grid-template-columns:repeat(2,1fr)}
  #sa-egypt-page .sa-hero h1{font-size:1.8rem}
  #sa-egypt-page .sa-crumb,#sa-egypt-page .sa-hero,#sa-egypt-page .sa-vol-section,#sa-egypt-page .sa-map-section{padding-left:20px;padding-right:20px}
}