@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Vazirmatn:wght@300;400;500;600;700&family=Markazi+Text:wght@400;600&display=swap');

:root{
  --wall:#EDE4D3;
  --wall-soft:#F5EFE1;
  --wall-deep:#2B3A2C;
  --wall-deep-2:#1E2A20;
  --ink:#241F1A;
  --ink-soft:#4A423A;
  --gold:#B08D57;
  --gold-bright:#CBA968;
  --burgundy:#7A2E2E;
  --line:rgba(36,31,26,0.15);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--wall);
  color:var(--ink);
  font-family:'Vazirmatn',sans-serif;
  line-height:1.9;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.05;
  background-image:repeating-linear-gradient(0deg, transparent, transparent 2px, #000 2px, #000 3px);
  z-index:1;
}
h1,h2,h3,.display{
  font-family:'Aref Ruqaa',serif;
  font-weight:700;
  color:var(--ink);
}
.cap{
  font-family:'Markazi Text',serif;
  letter-spacing:0.04em;
}
a{color:inherit;text-decoration:none;}

/* ===== NAV ===== */
nav.topnav{
  position:fixed;
  top:0; right:0; left:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 6vw;
  background:rgba(237,228,211,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  flex-wrap:nowrap;
}
nav.topnav .brand{
  font-family:'Aref Ruqaa',serif;
  font-size:clamp(1rem, 3vw, 1.3rem);
  color:var(--wall-deep);
  white-space:nowrap;
}
nav.topnav .menu-btn{
  font-family:'Markazi Text',serif;
  font-size:clamp(0.85rem, 2.2vw, 1.05rem);
  color:var(--burgundy);
  cursor:pointer;
  border:1px solid var(--gold);
  padding:7px clamp(10px,3vw,20px);
  border-radius:2px;
  background:transparent;
  white-space:nowrap;
  flex-shrink:0;
}
nav.topnav .search-box{
  flex:1 1 auto;
  max-width:280px;
  min-width:90px;
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:2px;
  padding:6px 12px;
  background:rgba(255,255,255,0.35);
}
nav.topnav .search-box input{
  border:none;
  background:transparent;
  outline:none;
  width:100%;
  font-family:'Vazirmatn',sans-serif;
  font-size:0.92rem;
  color:var(--ink);
}
nav.topnav .search-box input::placeholder{
  color:var(--ink-soft);
  opacity:0.6;
}
nav.topnav .search-box .icon{
  color:var(--gold);
  margin-left:8px;
  font-size:0.95rem;
  flex-shrink:0;
}
.index-card.hide{display:none;}
.index-grid .no-results{
  grid-column:1/-1;
  text-align:center;
  padding:40px 0;
  color:var(--ink-soft);
  font-family:'Markazi Text',serif;
  display:none;
}
.index-grid .no-results.show{display:block;}
@media(max-width:640px){
  nav.topnav .search-box{order:3; max-width:none; flex:1 1 100%;}
}
@media(max-width:420px){
  nav.topnav{padding:12px 5vw;}
}

/* room map overlay */
.room-map{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(30,42,32,0.97);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.room-map.open{opacity:1; pointer-events:auto;}
.room-map .close-btn{
  position:absolute;
  top:22px; left:6vw;
  font-family:'Markazi Text',serif;
  font-size:1.1rem;
  color:var(--gold-bright);
  border:1px solid var(--gold);
  padding:7px 20px;
  border-radius:2px;
  cursor:pointer;
  background:transparent;
}
.room-map .grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(180px,240px));
  gap:14px 28px;
  padding:0 6vw;
  max-width:900px;
}
.room-map a{
  display:block;
  padding:16px 10px;
  text-align:center;
  border:1px solid rgba(203,169,104,0.35);
  border-radius:2px;
  color:var(--wall-soft);
  transition:border-color .25s, background .25s;
}
.room-map a:hover, .room-map a:focus-visible{
  border-color:var(--gold-bright);
  background:rgba(203,169,104,0.08);
}
.room-map a .rn{
  display:block;
  font-family:'Markazi Text',serif;
  color:var(--gold-bright);
  font-size:0.95rem;
  margin-bottom:4px;
}
.room-map a .rt{
  font-family:'Aref Ruqaa',serif;
  font-size:1.25rem;
}
.room-map a.active{
  border-color:var(--burgundy);
  background:rgba(122,46,46,0.15);
}
@media(max-width:640px){
  .room-map .grid{grid-template-columns:repeat(2, minmax(140px,1fr));}
}

/* ===== HERO (index page) ===== */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 6vw;
  position:relative;
}
.hero .eyebrow{
  font-family:'Markazi Text',serif;
  font-size:1.3rem;
  color:var(--burgundy);
  letter-spacing:0.15em;
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.6rem, 7vw, 5.5rem);
  line-height:1.25;
  max-width:16em;
}
.hero .divider{
  width:120px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  margin:34px 0;
  position:relative;
}
.hero .divider::before{
  content:"◆";
  position:absolute;
  top:-9px; left:50%;
  transform:translateX(50%);
  color:var(--gold);
  font-size:0.85rem;
  background:var(--wall);
  padding:0 8px;
}
.hero p{
  max-width:34em;
  font-size:1.15rem;
  color:var(--ink-soft);
}
.hero .scroll-cue{
  position:absolute;
  bottom:40px;
  font-family:'Markazi Text',serif;
  font-size:1rem;
  color:var(--ink-soft);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.scroll-cue .line{
  width:1px; height:40px;
  background:var(--gold);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

.intro{
  max-width:760px;
  margin:0 auto;
  padding:80px 6vw 20px;
  text-align:center;
}
.intro h2{font-size:2.1rem;margin-bottom:22px;}
.intro p{color:var(--ink-soft);font-size:1.08rem;}

/* ===== INDEX room grid ===== */
.index-grid{
  max-width:1180px;
  margin:0 auto;
  padding:50px 6vw 100px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
}
.index-card{
  display:block;
  flex:0 1 320px;
  box-sizing:border-box;
  border:1px solid var(--line);
  background:var(--wall-soft);
  padding:26px 18px;
  text-align:center;
  border-radius:2px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.index-card:hover, .index-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 18px 34px -20px rgba(0,0,0,.35);
  border-color:var(--gold);
}
.index-card .rn{
  font-family:'Markazi Text',serif;
  color:var(--burgundy);
  font-size:1.05rem;
  display:block;
  margin-bottom:8px;
}
.index-card h3{font-size:1.5rem;margin-bottom:6px;}
.index-card .dates{
  font-family:'Markazi Text',serif;
  color:var(--ink-soft);
  font-size:0.95rem;
}
@media(max-width:900px){.index-card{flex-basis:calc(50% - 22px);}}
@media(max-width:520px){.index-card{flex-basis:100%;}}

/* ===== ROOM PAGE ===== */
.room-page{
  max-width:1180px;
  margin:0 auto;
  padding:calc(64px + 56px) 6vw 40px;
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:64px;
  align-items:center;
  min-height:100vh;
}
.room-page.reverse{direction:ltr;}
.room-page.reverse .room-text{direction:rtl;}

.frame-wrap{display:flex;flex-direction:column;align-items:center;}
.frame{
  width:100%;
  max-width:420px;
  aspect-ratio:4/5;
  background:
    linear-gradient(var(--wall-soft), var(--wall-soft)) padding-box,
    linear-gradient(135deg, var(--gold-bright), var(--gold) 40%, #8a6a3a 100%) border-box;
  border:14px solid transparent;
  border-radius:2px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.25);
  position:relative;
  overflow:hidden;
}
.frame::after{
  content:"";
  position:absolute; inset:8px;
  border:1px solid rgba(122,46,46,0.25);
  pointer-events:none;
}
.frame svg{width:100%;height:100%;display:block;}
.plaque{
  margin-top:16px;
  background:linear-gradient(180deg, #d9c290, var(--gold));
  color:var(--wall-deep-2);
  font-family:'Markazi Text',serif;
  font-size:1.05rem;
  padding:8px 26px;
  border-radius:2px;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.5);
  text-align:center;
  letter-spacing:0.03em;
}

.room-text .room-num{
  font-family:'Markazi Text',serif;
  color:var(--burgundy);
  font-size:1.4rem;
  letter-spacing:0.1em;
  display:block;
  margin-bottom:10px;
}
.room-text h1{font-size:2.6rem;margin-bottom:6px;}
.room-text .dates{
  font-family:'Markazi Text',serif;
  color:var(--ink-soft);
  font-size:1.15rem;
  margin-bottom:22px;
  display:block;
}
.room-text p{color:var(--ink-soft);font-size:1.06rem;margin-bottom:18px;}
.room-text .artists{
  font-size:0.95rem;
  color:var(--wall-deep);
  border-top:1px dashed var(--line);
  padding-top:14px;
}
.room-text .artists b{color:var(--burgundy);font-weight:600;}

.room-nav{
  max-width:1180px;
  margin:0 auto;
  padding:0 6vw 70px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:34px;
}
.room-nav a{
  font-family:'Markazi Text',serif;
  font-size:1.1rem;
  color:var(--ink-soft);
  display:flex;
  flex-direction:column;
  max-width:45%;
  transition:color .25s;
}
.room-nav a:hover{color:var(--burgundy);}
.room-nav a .lbl{font-size:0.85rem;color:var(--gold);margin-bottom:4px;}
.room-nav a.next{text-align:left;align-items:flex-start;}
.room-nav a.prev{text-align:right;align-items:flex-end;}

@media(max-width:820px){
  .room-page, .room-page.reverse{
    grid-template-columns:1fr;
    direction:rtl;
    gap:30px;
    padding:130px 6vw 20px;
  }
  .frame-wrap{max-width:340px;margin:0 auto;}
}

/* ===== EXPANDED ROOM (sub-civilizations + gallery) ===== */
.room-intro{
  max-width:1180px;
  margin:0 auto;
  padding:calc(64px + 56px) 6vw 10px;
}
.room-intro .room-num{
  font-family:'Markazi Text',serif;
  color:var(--burgundy);
  font-size:1.4rem;
  letter-spacing:0.1em;
  display:block;
  margin-bottom:10px;
}
.room-intro h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:6px;}
.room-intro .dates{
  font-family:'Markazi Text',serif;
  color:var(--ink-soft);
  font-size:1.15rem;
  display:block;
  margin-bottom:22px;
}
.room-intro p{color:var(--ink-soft);font-size:1.06rem;max-width:64em;margin-bottom:8px;}

.subnav{
  position:sticky;
  top:64px;
  z-index:40;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  max-width:1180px;
  margin:34px auto 0;
  padding:12px 6vw;
  background:rgba(237,228,211,0.96);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.subnav a{
  font-family:'Markazi Text',serif;
  font-size:1.05rem;
  color:var(--ink-soft);
  border:1px solid var(--line);
  padding:6px 18px;
  border-radius:20px;
  transition:border-color .25s, color .25s, background .25s;
}
.subnav a:hover, .subnav a:focus-visible{
  border-color:var(--gold);
  color:var(--burgundy);
  background:var(--wall-soft);
}

.civ{
  max-width:1180px;
  margin:0 auto;
  padding:64px 6vw 20px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:130px;
}
.civ:last-of-type{border-bottom:none;}
.civ-head{
  display:flex;
  align-items:baseline;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.civ-head h2{font-size:2rem;}
.civ-head .dates{
  font-family:'Markazi Text',serif;
  color:var(--burgundy);
  font-size:1.05rem;
}
.civ p{color:var(--ink-soft);font-size:1.04rem;max-width:70em;margin-bottom:14px;}
.civ h3{font-size:1.3rem;color:var(--burgundy);margin:26px 0 10px;}

.artwork-gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  margin-top:30px;
}
.artwork-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.artwork-card .mini-frame{
  width:100%;
  aspect-ratio:1/1;
  background:
    linear-gradient(var(--wall-soft), var(--wall-soft)) padding-box,
    linear-gradient(135deg, var(--gold-bright), var(--gold) 40%, #8a6a3a 100%) border-box;
  border:9px solid transparent;
  border-radius:2px;
  box-shadow:0 12px 26px -16px rgba(0,0,0,0.4);
  position:relative;
  overflow:hidden;
}
.artwork-card .mini-frame::after{
  content:"";
  position:absolute; inset:6px;
  border:1px solid rgba(122,46,46,0.25);
  pointer-events:none;
}
.artwork-card .mini-frame svg,
.artwork-card .mini-frame img{width:100%;height:100%;display:block;object-fit:cover;}
.artwork-card h4{
  font-family:'Aref Ruqaa',serif;
  font-size:1.3rem;
  margin-top:14px;
  margin-bottom:6px;
}
.artwork-card .desc{
  color:var(--ink-soft);
  font-size:0.92rem;
  line-height:1.8;
}
@media(max-width:900px){
  .artwork-gallery{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .artwork-gallery{grid-template-columns:1fr;}
  .subnav{position:static;}
}
.artwork-gallery.cols-2{
  grid-template-columns:repeat(2, 1fr);
  max-width:640px;
  margin-top:22px;
  margin-bottom:36px;
}
@media(max-width:560px){
  .artwork-gallery.cols-2{grid-template-columns:1fr; max-width:360px;}
}

/* ===== DECORATIVE GALLERY BORDERS (index page, wide screens) ===== */
.gallery-border{
  display:none;
  position:fixed;
  top:0;
  width:64px;
  height:100vh;
  z-index:5;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--wall-deep) 0%, var(--wall-deep-2) 100%);
  box-shadow:inset 0 0 24px rgba(0,0,0,0.45);
}
.gallery-border::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSIyNDAiPgogIDxsaW5lIHgxPSIyOCIgeTE9IjAiIHgyPSIyOCIgeTI9IjI0MCIgc3Ryb2tlPSIjQjA4RDU3IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1kYXNoYXJyYXk9IjMgNyIgb3BhY2l0eT0iMC41NSIvPgogIDxnIGZpbGw9IiNDQkE5NjgiPgogICAgPHBhdGggZD0iTTI4IDEwMCBMMzUgMTIwIEwyOCAxNDAgTDIxIDEyMCBaIi8+CiAgICA8cGF0aCBkPSJNMjggMTIwIG0wIC02IGE2IDYgMCAxIDEgMC4xIDAgWiIgb3BhY2l0eT0iMCIvPgogIDwvZz4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiNDQkE5NjgiIHN0cm9rZS13aWR0aD0iMS42Ij4KICAgIDxwYXRoIGQ9Ik0yOCAxMjAgQzE4IDEwOCA4IDExMiA0IDEyMiBDMTAgMTI2IDIwIDEyNiAyOCAxMjAgWiIvPgogICAgPHBhdGggZD0iTTI4IDEyMCBDMzggMTA4IDQ4IDExMiA1MiAxMjIgQzQ2IDEyNiAzNiAxMjYgMjggMTIwIFoiLz4KICAgIDxwYXRoIGQ9Ik0yOCA5NiBDMjAgODYgMTAgODggNiA5NiBDMTIgMTAwIDIwIDEwMCAyOCA5NiBaIi8+CiAgICA8cGF0aCBkPSJNMjggOTYgQzM2IDg2IDQ2IDg4IDUwIDk2IEM0NCAxMDAgMzYgMTAwIDI4IDk2IFoiLz4KICAgIDxwYXRoIGQ9Ik0yOCAxNDQgQzIwIDE1NCAxMCAxNTIgNiAxNDQgQzEyIDE0MCAyMCAxNDAgMjggMTQ0IFoiLz4KICAgIDxwYXRoIGQ9Ik0yOCAxNDQgQzM2IDE1NCA0NiAxNTIgNTAgMTQ0IEM0NCAxNDAgMzYgMTQwIDI4IDE0NCBaIi8+CiAgPC9nPgogIDxjaXJjbGUgY3g9IjI4IiBjeT0iMjAiIHI9IjMiIGZpbGw9IiM3QTJFMkUiLz4KICA8Y2lyY2xlIGN4PSIyOCIgY3k9IjIyMCIgcj0iMyIgZmlsbD0iIzdBMkUyRSIvPgo8L3N2Zz4=");
  background-repeat:repeat-y;
  background-position:center var(--shift, 0px);
  background-size:56px 240px;
}
.gallery-border.left{left:0;border-left:5px solid var(--gold);}
.gallery-border.right{right:0;border-right:5px solid var(--gold);}
@media(min-width:1400px){
  .gallery-border{display:block;}
}

/* ===== FOOTER ===== */
footer{
  background:var(--wall-deep);
  color:var(--wall-soft);
  text-align:center;
  padding:70px 6vw 50px;
}
footer .display{color:var(--wall-soft);font-size:1.8rem;margin-bottom:14px;}
footer p{color:rgba(245,239,225,0.7);max-width:520px;margin:0 auto 26px;font-size:0.98rem;}
footer .rule{width:60px;height:1px;background:var(--gold);margin:0 auto 26px;}
footer .small{font-family:'Markazi Text',serif;color:rgba(245,239,225,0.5);font-size:0.9rem;}
footer a.home-link{
  display:inline-block;
  margin-top:6px;
  border:1px solid var(--gold);
  padding:8px 22px;
  border-radius:2px;
  font-family:'Markazi Text',serif;
  color:var(--gold-bright);
}

:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}

.artwork-card .mini-frame{cursor:zoom-in;}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(20,15,10,0.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
  padding:5vw;
}
.lightbox.open{display:flex;}
.lightbox img{
  max-width:90vw;
  max-height:85vh;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 20px 60px -10px rgba(0,0,0,0.6);
  border:6px solid var(--wall-soft);
}
.lightbox .lightbox-caption{
  position:absolute;
  bottom:5vh;
  left:0; right:0;
  text-align:center;
  color:var(--wall-soft);
  font-family:'Aref Ruqaa',serif;
  font-size:1.2rem;
}
.lightbox .lightbox-close{
  position:absolute;
  top:24px;
  inset-inline-end:28px;
  background:none;
  border:1px solid var(--gold);
  color:var(--gold-bright);
  font-family:'Markazi Text',serif;
  font-size:1rem;
  padding:8px 18px;
  border-radius:2px;
  cursor:pointer;
}
.lightbox .lightbox-close:hover{background:rgba(255,255,255,0.08);}