:root{--green:#043f32;--gold:#d5aa58;--cream:#f5f0e7;--ink:#15251f;--line:#ddd5c8;--navy:#142844}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fbfaf7;color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{text-decoration:none;color:inherit}.shell{width:min(1450px,94vw);margin:auto}
.topbar{height:84px;background:#043d31;color:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)}.navrow{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:14px;min-width:330px}.brand img{width:60px;height:60px;object-fit:contain}.brandname{font-family:Georgia,serif;color:#e1b35f;font-size:31px;letter-spacing:.055em}.brandsub{font-size:13px;letter-spacing:.12em;margin-top:6px}.topbar nav{display:flex;align-items:center;gap:33px;font-size:14px}.topbar nav a{height:84px;display:flex;align-items:center;border-bottom:2px solid transparent}.topbar nav a.active,.topbar nav a:hover{color:#f0c46f;border-color:#d3a957}.lang{border:1px solid #c99c4c;padding:10px 14px;border-radius:4px}.hamb{display:none;background:transparent;border:0;color:#fff;font-size:26px}
.hero{height:515px;position:relative;overflow:hidden;background:#0a4a3b}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,63,50,.99) 0%,rgba(4,63,50,.94) 27%,rgba(4,63,50,.53) 45%,rgba(4,63,50,.05) 65%),url("assets/hero.jpg") center right/cover no-repeat}.hero-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 45%,rgba(225,179,95,.09),transparent 25%),repeating-radial-gradient(circle at 18% 35%,transparent 0 23px,rgba(225,179,95,.10) 24px 25px,transparent 26px 46px);mask-image:linear-gradient(90deg,#000 0 33%,transparent 56%)}.hero-inner{position:relative;z-index:2;padding-top:48px;color:#fff}.hero-copy{width:590px;text-align:center}.eyebrow{color:#efc46b;letter-spacing:.14em;font-size:19px}.hero h1{font-family:Georgia,serif;font-size:73px;font-weight:400;letter-spacing:.04em;margin:6px 0 8px}.tag{color:#efc46b;line-height:1.45;font-size:18px;letter-spacing:.08em}.ornament{display:flex;align-items:center;gap:14px;width:300px;margin:18px auto;color:#d5aa58}.ornament:before,.ornament:after{content:"";height:1px;background:#bf9348;flex:1}.hero p{font-size:16px;line-height:1.52;margin:0 auto 24px;max-width:530px}.buttons{display:flex;gap:14px;justify-content:center}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 28px;border:1px solid #d7aa54;border-radius:4px;font-size:14px;letter-spacing:.06em}.btn.gold{background:#d7ab59;color:#213226}.btn.outline{color:#fff;background:rgba(0,0,0,.12)}
.floating{margin-top:-106px;position:relative;z-index:5}.facts{display:grid;grid-template-columns:repeat(5,1fr);background:#fbfaf7;padding:22px 26px;border-radius:5px 5px 0 0;box-shadow:0 9px 30px rgba(0,0,0,.13);border-bottom:1px solid var(--line)}.fact{display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:center;padding:0 20px;border-right:1px solid var(--line)}.fact:last-child{border-right:0}.round{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#064334;color:#e4b865;border:1px solid rgba(212,170,88,.28);font-size:23px}.fact small{font-size:12px;letter-spacing:.06em}.fact strong{display:block;font-size:15px;margin:4px 0 3px}.fact span{display:block;font-size:12px;color:#6b716d;line-height:1.25}
.quad{display:grid;grid-template-columns:1fr 1fr 1.2fr 1.3fr;background:#fbfaf7}.panel{padding:28px 25px;min-height:290px;border-right:1px solid var(--line)}.panel:last-child{border-right:0}.panel h3{font-family:Georgia,serif;font-size:18px;margin:0 0 18px}.panel p{font-size:14px;line-height:1.55}.smallbtn{display:inline-block;background:#064334;color:#fff;padding:10px 18px;border-radius:3px;font-size:12px;letter-spacing:.05em;margin-top:12px}.flag{width:100%;max-width:285px;display:block;margin:0 auto 17px;box-shadow:0 5px 16px rgba(0,0,0,.16)}.textlink{font-size:12px;letter-spacing:.04em}.player{border:1px solid #e3ddd3;border-radius:5px;padding:12px;background:#fff;display:grid;grid-template-columns:95px 1fr 40px 1fr auto;gap:10px;align-items:center}.player img{width:95px;height:95px;object-fit:cover;border-radius:4px;grid-row:1/3}.ptext{grid-column:2/6}.ptext strong{display:block;font-size:14px}.ptext span,.time{font-size:11px;color:#6f746f}.player button{width:38px;height:38px;border-radius:50%;border:0;background:#07513f;color:#fff}.track{height:4px;background:#d7d4cb;border-radius:3px;overflow:hidden}#progress{height:100%;width:0;background:#07513f}.news{display:grid;grid-template-columns:94px 1fr;gap:12px;align-items:center;margin-bottom:12px}.news img{width:94px;height:54px;object-fit:cover;border-radius:3px}.news strong{font-size:13px;line-height:1.22;display:block}.news span{font-size:11px;color:#717771}
.section{padding:78px 0}.pale{background:#f2eee5}.sectionhead{text-align:center;max-width:760px;margin:0 auto 35px}.sectionhead span{color:#a8792f;font-size:12px;letter-spacing:.15em}.sectionhead h2{font-family:Georgia,serif;color:#073f31;font-size:42px;font-weight:400;margin:8px 0 12px}.sectionhead p{line-height:1.6;color:#5d675f}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.cards article{background:#fff;border:1px solid #ded6c8;border-radius:7px;overflow:hidden;box-shadow:0 8px 24px rgba(26,43,36,.06)}.cards img{width:100%;height:235px;object-fit:cover}.cards img.contain{object-fit:contain}.cards img.dark{background:#073f31}.cards article>div{padding:20px}.cards h4{font-family:Georgia,serif;color:#073f31;font-size:22px;margin:0 0 7px}.cards p{font-size:14px;line-height:1.55;color:#5f6862;margin:0}
.passport{background:#064334;color:#fff;border-radius:10px;padding:35px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.passport h2{color:#efc26d;font-family:Georgia,serif;font-size:36px;font-weight:400}.passport>div>img{width:170px;margin-top:18px}.passport form{border:1px solid rgba(213,170,88,.55);border-radius:8px;padding:24px;background:linear-gradient(145deg,#0b4d3d,#06392f)}.passport label{display:block;font-size:12px;color:#e0bd73;margin:12px 0 6px}.passport input{width:100%;padding:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;border-radius:4px}.passport form .btn{margin-top:16px}#card{display:none;margin-top:17px;border:1px dashed #d8af5d;border-radius:6px;padding:17px;background:rgba(255,255,255,.05);line-height:1.5}
footer{background:#043d31;color:#fff;padding:25px 0 10px}.footgrid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.3fr 1.2fr;gap:26px}.fbrand{display:flex;gap:12px}.fbrand img{width:64px;height:64px}.fbrand b{font-family:Georgia,serif;color:#d8ac59;font-size:23px;display:block}.fbrand span{font-size:12px;line-height:1.5}.footgrid h5{color:#d8ac59;font-size:12px;margin:0 0 10px}.footgrid a{display:block;font-size:12px;line-height:1.65}.socials{display:flex;gap:10px}.socials i{font-style:normal;width:33px;height:33px;border:1px solid #c99e4e;border-radius:50%;display:grid;place-items:center;color:#d8ad59}.passcta{border:1px solid #b88d42;border-radius:4px;padding:14px}.goldish{background:transparent;border:1px solid #d1a553;color:#fff}.copy{text-align:center;border-top:1px solid rgba(255,255,255,.12);margin-top:17px;padding-top:12px;font-size:11px;color:#d5ddd9}
@media(max-width:1100px){.topbar nav{gap:18px}.brand{min-width:auto}.facts{grid-template-columns:repeat(2,1fr);gap:16px}.fact{border-right:0}.quad{grid-template-columns:1fr 1fr}.panel:nth-child(2){border-right:0}.footgrid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:780px){.topbar{height:72px}.brand img{width:48px;height:48px}.brandname{font-size:23px}.brandsub{display:none}.hamb{display:block}.lang{display:none}.topbar nav{display:none;position:absolute;top:72px;left:0;right:0;background:#043d31;padding:14px 22px 22px;flex-direction:column;align-items:flex-start}.topbar nav.open{display:flex}.topbar nav a{height:auto;padding:8px 0}.hero{height:640px}.hero-bg{background:linear-gradient(180deg,rgba(4,63,50,.96) 0%,rgba(4,63,50,.86) 55%,rgba(4,63,50,.35) 100%),url("assets/hero.jpg") 66% center/cover no-repeat}.hero-inner{padding-top:58px}.hero-copy{width:100%}.hero h1{font-size:50px}.tag{font-size:15px}.floating{margin-top:-75px}.facts,.quad,.cards,.passport,.footgrid{grid-template-columns:1fr}.panel{border-right:0;border-bottom:1px solid var(--line)}.player{grid-template-columns:80px 1fr 40px 1fr auto}.player img{width:80px;height:80px}.section{padding:58px 0}.sectionhead h2{font-size:34px}}

/* === URUKHOMBA ARCHIVES === */
.archive-section{background:#f8f4ec}
.archive-stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #ddd5c8;border-radius:8px;overflow:hidden;margin:0 0 26px;box-shadow:0 8px 22px rgba(20,45,35,.06)}
.archive-stats>div{padding:20px;border-right:1px solid #ddd5c8}.archive-stats>div:last-child{border-right:0}
.archive-stats small{display:block;color:#9b722d;letter-spacing:.08em;font-size:11px}.archive-stats strong{display:block;font:400 27px Georgia,serif;color:#073f31;margin:4px 0}.archive-stats span{font-size:12px;color:#66706a}
.archive-layout{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}.archive-sidebar{background:#fff;border:1px solid #ddd5c8;border-radius:8px;overflow:hidden;position:sticky;top:100px}
.archive-sidebar-title{background:#063f31;color:#fff;padding:18px;font:500 18px Georgia,serif}.archive-lang{width:100%;border:0;border-bottom:1px solid #eee7dc;background:#fff;padding:13px 15px;text-align:left;display:flex;justify-content:space-between;gap:10px;cursor:pointer}
.archive-lang:hover,.archive-lang.active{background:#f0e9dc;color:#073f31;font-weight:700}.archive-lang b{font-size:11px}.archive-more{padding:13px 15px;font-size:11px;line-height:1.45;color:#778078;background:#fbfaf7}
.archive-toolbar{display:flex;gap:10px;margin-bottom:18px}.archive-toolbar input{flex:1;padding:12px 13px;border:1px solid #ddd5c8;border-radius:5px;background:#fff}.archive-submit-btn{border:1px solid #c99d4f;background:#063f31;color:#fff;border-radius:4px;padding:12px 17px;cursor:pointer;font-size:12px;letter-spacing:.04em}.archive-submit-btn.gold{background:#d7aa59;color:#173126}
.archive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.archive-story{background:#fff;border:1px solid #ddd5c8;border-radius:8px;overflow:hidden;cursor:pointer;box-shadow:0 7px 18px rgba(30,45,37,.05);transition:.18s}.archive-story:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(30,45,37,.10)}
.archive-story-cover{min-height:148px;background:linear-gradient(135deg,#0a4d3d,#102e29);color:#fff;padding:18px;position:relative;overflow:hidden}.archive-story-cover span{display:inline-block;border:1px solid rgba(255,255,255,.35);padding:5px 7px;border-radius:3px;font-size:10px}.archive-story-cover h3{font:400 24px Georgia,serif;margin:20px 0 0;line-height:1.15}.archive-story-body{padding:16px}.archive-story-meta{font-size:11px;color:#9a712c;margin-bottom:8px}.archive-story-body p{font-size:14px;line-height:1.55;color:#5e6862;margin:0 0 11px}.archive-read{font-size:12px;color:#073f31;font-weight:700}
.archive-callout{margin-top:30px;background:#063f31;color:#fff;border-radius:10px;padding:34px;display:grid;grid-template-columns:1.25fr 1fr;gap:30px}.archive-callout>div>span{color:#efc46d;letter-spacing:.14em;font-size:11px}.archive-callout h3{font:400 34px Georgia,serif;color:#efc46d;margin:9px 0 12px}.archive-callout p{line-height:1.6;color:#e4e9e6;font-size:14px}.archive-process{border:1px solid rgba(215,170,89,.5);border-radius:8px;padding:20px}.archive-process b{color:#efc46d;display:block;margin-bottom:10px}.archive-process p{margin:7px 0;font-size:13px}
.archive-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}.archive-modal.show{display:flex}.archive-modal-card{background:#fff;width:min(780px,96vw);max-height:92vh;overflow:auto;border-radius:10px;padding:28px;position:relative}.archive-close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:27px;cursor:pointer}.archive-kicker{color:#9b722d;letter-spacing:.14em;font-size:11px}.archive-modal-card h2{font:400 35px Georgia,serif;color:#073f31;margin:7px 0}.archive-intro{color:#69726c;margin:0 0 20px}
.archive-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.archive-field{display:flex;flex-direction:column;gap:6px}.archive-field.full{grid-column:1/-1}.archive-field label{font-size:12px;color:#8b672c;font-weight:700}.archive-field label span{font-weight:400;color:#888}.archive-field input,.archive-field textarea{padding:12px;border:1px solid #ddd5c8;border-radius:5px;background:#fff}.archive-field textarea{min-height:220px;resize:vertical}.archive-note{background:#f2ece2;border-left:3px solid #d7aa59;padding:11px;margin:14px 0;font-size:12px;line-height:1.45}
.archive-reader-meta{font-size:12px;color:#9b722d;margin:0 0 18px}.archive-reader-text{white-space:pre-wrap;font:18px/1.8 Georgia,serif;color:#28332e}
@media(max-width:900px){.archive-stats{grid-template-columns:1fr 1fr}.archive-layout{grid-template-columns:1fr}.archive-sidebar{position:static}.archive-grid{grid-template-columns:1fr}.archive-callout{grid-template-columns:1fr}}
@media(max-width:560px){.archive-stats,.archive-form-grid{grid-template-columns:1fr}.archive-stats>div{border-right:0;border-bottom:1px solid #ddd5c8}.archive-field.full{grid-column:auto}.archive-toolbar{flex-direction:column}}


/* National Anthem Lyrics */
.anthem-lyrics-modal{
  position:fixed; inset:0; z-index:140;
  display:none; align-items:center; justify-content:center;
  padding:22px; background:rgba(1,24,19,.78);
  backdrop-filter:blur(4px);
}
.anthem-lyrics-modal.show{display:flex}
.anthem-lyrics-card{
  position:relative; width:min(820px,96vw); max-height:92vh;
  overflow:auto; padding:38px 42px 44px;
  background:#f8f4ea; border:1px solid #d6bf82; border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.anthem-lyrics-card:before{
  content:""; display:block; width:64px; height:2px;
  background:#d5a640; margin:0 auto 18px;
}
.anthem-lyrics-close{
  position:absolute; top:13px; right:17px;
  border:0; background:transparent; color:#073f31;
  font-size:30px; line-height:1; cursor:pointer;
}
.anthem-lyrics-kicker{
  text-align:center; color:#a36f1d; letter-spacing:.18em;
  font-size:11px; font-weight:700;
}
.anthem-lyrics-card h2{
  margin:8px 0 5px; text-align:center;
  font:400 38px Georgia,serif; color:#073f31;
}
.anthem-lyrics-subtitle{
  text-align:center; color:#647068; margin:0 auto 28px;
}
.lyrics-part{
  padding:25px 8px; border-top:1px solid #dfd4bd;
}
.lyrics-part:first-of-type{border-top:0}
.lyrics-label{
  color:#a36f1d; font-size:11px; font-weight:700;
  letter-spacing:.16em; margin-bottom:8px;
}
.lyrics-language{
  color:#073f31; font:600 16px Georgia,serif; margin-bottom:10px;
}
.lyrics-stage{
  color:#817663; font-style:italic; font-size:13px;
  margin:0 0 13px;
}
.lyrics-text{
  color:#24342e; font:17px/1.85 Georgia,serif;
}
.lyrics-text.centered{text-align:center}
.lyrics-text.rtl{
  text-align:right; font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  font-size:19px; line-height:2;
}
.lyrics-part.chorus{
  margin:8px 0; padding:28px 25px;
  background:#073f31; border:1px solid #ba913a; border-radius:8px;
}
.lyrics-part.chorus .lyrics-label{color:#e2b550}
.lyrics-part.chorus .lyrics-text{color:#f7f0df}
.lyrics-part.final-chorus{background:#063729}
.lyrics-part.outro{padding-bottom:5px}
body.anthem-lyrics-open{overflow:hidden}
@media(max-width:600px){
  .anthem-lyrics-card{padding:32px 22px 35px}
  .anthem-lyrics-card h2{font-size:31px}
  .lyrics-text{font-size:16px}
}


/* Clickable Urukhomba world folders */
.world-folder{
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.world-folder:hover,
.world-folder:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(10,55,43,.14);
  outline:none;
}
.world-folder h4::after{
  content:"  →";
  color:#b9872c;
  font-size:.82em;
}
.world-folder-modal{
  position:fixed;
  inset:0;
  z-index:135;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(1,24,19,.76);
  backdrop-filter:blur(4px);
}
.world-folder-modal.show{display:flex}
.world-folder-card{
  position:relative;
  width:min(760px,96vw);
  max-height:90vh;
  overflow:auto;
  background:#f8f4ea;
  color:#22352e;
  border:1px solid #d7bd7b;
  border-radius:12px;
  padding:42px 48px 46px;
  box-shadow:0 24px 80px rgba(0,0,0,.34);
}
.world-folder-close{
  position:absolute;
  top:14px;
  right:18px;
  border:0;
  background:transparent;
  color:#073f31;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}
.world-folder-eyebrow{
  color:#a87520;
  letter-spacing:.17em;
  font-size:11px;
  font-weight:700;
  text-align:center;
}
.world-folder-card h2{
  color:#073f31;
  text-align:center;
  font:400 38px/1.18 Georgia,serif;
  margin:9px 0 14px;
}
.world-folder-rule{
  width:58px;
  height:2px;
  margin:0 auto 28px;
  background:#d5a640;
}
.world-folder-body{
  white-space:pre-line;
  font:17px/1.85 Georgia,serif;
  color:#33453e;
}
body.world-folder-open{overflow:hidden}
@media(max-width:600px){
  .world-folder-card{padding:36px 24px 38px}
  .world-folder-card h2{font-size:31px}
  .world-folder-body{font-size:16px}
}


/* Dedicated Shifting Lands atlas */
.shifting-map-modal{
  position:fixed;
  inset:0;
  z-index:138;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(1,24,19,.82);
  backdrop-filter:blur(5px);
}
.shifting-map-modal.show{display:flex}
.shifting-map-card{
  position:relative;
  width:min(1500px,97vw);
  max-height:95vh;
  overflow:auto;
  background:#f7f2e8;
  border:1px solid #cfa84d;
  border-radius:12px;
  box-shadow:0 28px 90px rgba(0,0,0,.42);
  padding:24px 24px 26px;
}
.shifting-map-close{
  position:absolute;
  top:12px;
  right:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#efe6d3;
  color:#073f31;
  font-size:28px;
  line-height:34px;
  cursor:pointer;
  z-index:2;
}
.shifting-map-kicker{
  text-align:center;
  color:#a67522;
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:.18em;
}
.shifting-map-card h2{
  margin:7px 0 4px;
  text-align:center;
  color:#073f31;
  font:400 38px/1.1 Georgia,serif;
}
.shifting-map-subtitle{
  margin:0 0 18px;
  text-align:center;
  color:#657169;
  font-size:14px;
}
.shifting-map-frame{
  overflow:hidden;
  border-radius:9px;
  border:1px solid #c9aa67;
  background:#062b23;
}
.shifting-map-frame img{
  display:block;
  width:100%;
  height:auto;
}
body.shifting-map-open{overflow:hidden}
@media(max-width:700px){
  .shifting-map-card{padding:20px 12px 16px}
  .shifting-map-card h2{font-size:30px}
  .shifting-map-subtitle{font-size:13px}
}


/* Interactive Shifting Lands map */
.world-folder-shifting{
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.world-folder-shifting:hover,
.world-folder-shifting:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(7,63,49,.12);
  outline:none;
}
.interactive-map-card{
  width:min(1560px,98vw);
  max-height:96vh;
  padding:18px 18px 16px;
  overflow:hidden;
}
.shifting-map-topbar{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  padding:0 46px 12px 4px;
}
.shifting-map-topbar .shifting-map-kicker{text-align:left}
.shifting-map-topbar h2{
  text-align:left;
  margin:5px 0 0;
  font-size:34px;
}
.map-toolbar{
  display:flex;
  gap:7px;
  align-items:center;
}
.map-toolbar button{
  min-width:42px;
  height:38px;
  padding:0 12px;
  border:1px solid #cfa84d;
  border-radius:7px;
  background:#fffaf0;
  color:#073f31;
  font-weight:700;
  cursor:pointer;
}
.map-toolbar button:hover{background:#f0e5ce}
.interactive-map-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:14px;
  min-height:0;
}
.interactive-map-viewport{
  position:relative;
  height:min(76vh,820px);
  overflow:hidden;
  border:1px solid #c9aa67;
  border-radius:10px;
  background:#062b23;
  cursor:grab;
  touch-action:none;
}
.interactive-map-viewport.dragging{cursor:grabbing}
.interactive-map-stage{
  position:absolute;
  left:0;
  top:0;
  transform-origin:0 0;
  will-change:transform;
}
.interactive-map-stage > img{
  display:block;
  width:1400px;
  max-width:none;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.map-hotspot{
  position:absolute;
  width:20px;
  height:20px;
  margin:-10px 0 0 -10px;
  border:2px solid #f5d37a;
  border-radius:50%;
  background:#0a4b3b;
  box-shadow:0 0 0 5px rgba(10,75,59,.32),0 2px 10px rgba(0,0,0,.4);
  cursor:pointer;
}
.map-hotspot:hover,
.map-hotspot:focus-visible{
  transform:scale(1.35);
  outline:none;
}
.map-hotspot.capital{
  width:24px;
  height:24px;
  margin:-12px 0 0 -12px;
  background:#d7a62d;
  border-color:#fff0ba;
}
.map-place-panel{
  align-self:stretch;
  border:1px solid #d7c79e;
  border-radius:10px;
  background:#fffaf0;
  padding:22px 20px;
  overflow:auto;
}
.map-place-eyebrow{
  color:#a67522;
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:.16em;
}
.map-place-panel h3{
  margin:9px 0 10px;
  color:#073f31;
  font:400 28px/1.15 Georgia,serif;
}
.map-place-panel p{
  margin:0;
  color:#53615b;
  font-size:14px;
  line-height:1.6;
}
.map-place-meta{
  display:grid;
  gap:8px;
  margin-top:18px;
}
.map-meta-row{
  border-top:1px solid #e2d6bd;
  padding-top:9px;
}
.map-meta-row small{
  display:block;
  color:#a67522;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.map-meta-row strong{
  display:block;
  margin-top:3px;
  color:#073f31;
  font-family:Georgia,serif;
  font-size:15px;
}
.map-hint{
  padding:10px 4px 0;
  text-align:center;
  color:#7d786b;
  font-size:12px;
}
@media(max-width:900px){
  .interactive-map-shell{grid-template-columns:1fr}
  .interactive-map-viewport{height:62vh}
  .map-place-panel{max-height:220px}
  .shifting-map-topbar{align-items:flex-start;flex-direction:column}
}


/* Leaflet-powered Shifting Lands map */
.leaflet-shell{
  grid-template-columns:190px minmax(0,1fr) 280px !important;
  gap:12px;
}
.leaflet-map-frame{
  position:relative;
  height:min(76vh,820px);
  overflow:hidden;
  border:1px solid #c9aa67;
  border-radius:10px;
  background:#062d25;
}
.urukhomba-leaflet-map{
  width:100%;
  height:100%;
  background:#062d25;
}
.fixed-map-legend{
  align-self:stretch;
  border:1px solid #cba451;
  border-radius:10px;
  background:#073b30;
  padding:14px 10px;
  overflow:auto;
}
.fixed-map-legend-title{
  color:#e3b955;
  font:700 10px/1 Arial,sans-serif;
  letter-spacing:.16em;
  padding:2px 8px 11px;
}
.fixed-map-legend button{
  width:100%;
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:6px 8px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#f6efe1;
  text-align:left;
  font:600 11px/1.1 Arial,sans-serif;
  cursor:pointer;
}
.fixed-map-legend button span{
  color:#e8b83f;
  text-align:center;
  font-size:16px;
}
.fixed-map-legend button:hover,
.fixed-map-legend button:focus-visible{
  background:rgba(232,184,63,.15);
  outline:none;
}
.leaflet-control-zoom a{
  color:#073f31 !important;
  border-color:#cba451 !important;
}
.leaflet-control-zoom{
  border:1px solid #cba451 !important;
}
.invisible-label-hit{
  background:transparent !important;
  border:none !important;
}
.invisible-label-hit div{
  width:100%;
  height:100%;
  background:transparent;
}
.leaflet-interactive.region-hit{
  fill:transparent;
  stroke:transparent;
}
.leaflet-interactive.region-hit:hover{
  fill:rgba(231,184,63,.10);
  stroke:rgba(231,184,63,.65);
}
@media(max-width:1100px){
  .leaflet-shell{grid-template-columns:150px minmax(0,1fr)!important}
  .map-place-panel{grid-column:1/-1}
}
@media(max-width:760px){
  .leaflet-shell{grid-template-columns:1fr!important}
  .fixed-map-legend{max-height:180px}
  .leaflet-map-frame{height:60vh}
}


/* Real map labels layered above the clean terrain */
.urukhomba-leaflet-map{
  background:#083b4a !important;
}
.leaflet-container{
  background:#083b4a !important;
  font-family:Arial,sans-serif;
}
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-overlay-pane{
  background:transparent !important;
}

.map-region-label{
  background:transparent !important;
  border:0 !important;
}
.map-region-label div{
  display:inline-block;
  white-space:nowrap;
  padding:3px 7px;
  border-radius:5px;
  background:rgba(3,38,30,.72);
  color:#fff8e7;
  border:1px solid rgba(229,190,86,.38);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  font:700 12px/1.1 Georgia,serif;
  letter-spacing:.04em;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
}
.map-region-label div:hover{
  background:#d0a33b;
  color:#073f31;
}

.map-place-label{
  background:transparent !important;
  border:0 !important;
}
.map-place-label div{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  padding:4px 7px;
  border-radius:5px;
  background:rgba(247,242,232,.94);
  color:#073f31;
  border:1px solid rgba(201,161,65,.85);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  font:700 11px/1 Arial,sans-serif;
}
.map-place-label.capital div{
  background:#073f31;
  color:#fff4d3;
  border-color:#e0b143;
}
.map-place-label.lake div{
  background:rgba(217,242,248,.95);
  border-color:#61aeca;
}

.map-symbol-icon{
  background:transparent !important;
  border:0 !important;
}
.map-symbol-icon .symbol{
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#073f31;
  color:#f0bd3f;
  border:2px solid #ffe49c;
  box-shadow:0 2px 8px rgba(0,0,0,.32);
  font-weight:700;
  font-size:13px;
}
.map-symbol-icon.capital .symbol{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#d7a735;
  color:#073f31;
  border-color:#fff1b7;
  font-size:16px;
}
.map-symbol-icon.town .symbol{
  width:14px;
  height:14px;
  font-size:0;
  background:#e5b840;
  border-width:2px;
}

.leaflet-control-zoom{
  border:1px solid #cba451 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.15) !important;
}
.leaflet-control-zoom a{
  background:#fffaf0 !important;
  color:#073f31 !important;
}
.leaflet-control-zoom a:hover{
  background:#efe4cd !important;
}

.map-place-panel{
  background:#fffaf0;
}


/* === CINEMATIC SHIFTING LANDS ATLAS === */
.cinematic-atlas-modal{
  position:fixed;
  inset:0;
  z-index:180;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
  background:#061f1a;
}
.cinematic-atlas-modal.show{display:flex}

.cinematic-atlas-card{
  width:100vw;
  height:100vh;
  background:#062b26;
  color:#f4ead7;
  display:grid;
  grid-template-rows:84px 1fr 46px;
  overflow:hidden;
  border:1px solid #c99a34;
  box-shadow:inset 0 0 0 1px rgba(224,183,76,.25);
}
.atlas-header{
  display:grid;
  grid-template-columns:minmax(330px,1fr) auto minmax(330px,1fr);
  align-items:center;
  gap:24px;
  padding:0 26px;
  background:linear-gradient(180deg,#082f2b,#06241f);
  border-bottom:1px solid #c99a34;
  position:relative;
}
.atlas-brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.atlas-brand-mark{
  width:48px;height:48px;border:2px solid #d5aa45;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#d5aa45;font-size:28px;
}
.atlas-country{
  color:#e3b450;
  font:400 30px/1 Georgia,serif;
  letter-spacing:.12em;
}
.atlas-tagline{
  color:#f5e9d0;
  margin-top:6px;
  font:11px/1 Arial,sans-serif;
  letter-spacing:.18em;
}
.atlas-title{
  color:#e0b85e;
  font:400 22px/1 Georgia,serif;
  letter-spacing:.28em;
  white-space:nowrap;
}
.atlas-header-links{
  justify-self:end;
  padding-right:56px;
  color:#e8dcc8;
  font:11px/1 Arial,sans-serif;
  letter-spacing:.22em;
  white-space:nowrap;
}
.atlas-close{
  position:absolute;right:16px;top:16px;
  width:44px;height:44px;border-radius:50%;
  border:1px solid #d5aa45;background:transparent;color:#f2e7d1;
  font-size:28px;cursor:pointer;
}
.atlas-body{
  min-height:0;
  display:grid;
  grid-template-columns:205px minmax(0,1fr) 310px;
}
.atlas-legend{
  background:#062d28;
  border-right:1px solid #c99a34;
  padding:18px 12px;
  overflow:auto;
}
.atlas-section-title{
  color:#e6bc57;
  font:700 16px/1 Georgia,serif;
  margin:0 8px 14px;
}
.atlas-legend button{
  width:100%;
  min-height:34px;
  display:grid;
  grid-template-columns:32px 1fr;
  align-items:center;
  gap:6px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#f5ecdd;
  text-align:left;
  padding:5px 8px;
  cursor:pointer;
  font:13px/1.1 Georgia,serif;
}
.atlas-legend button span{
  color:#e3b23d;
  font-size:18px;
  text-align:center;
}
.atlas-legend button:hover,
.atlas-legend button.active{
  background:rgba(224,177,61,.13);
  color:#fff6df;
}
.atlas-map-wrap{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#082d37;
}
.cinematic-leaflet{
  width:100%;
  height:100%;
  background:#082d37 !important;
}
.atlas-info-panel{
  border-left:1px solid #c99a34;
  background:linear-gradient(180deg,#07302b,#052721);
  overflow:auto;
}
.atlas-place-image{
  height:205px;
  margin:16px 14px 0;
  border:1px solid #c99a34;
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(3,25,21,.08),rgba(3,25,21,.18)),
    url('assets/hero.jpg') center/cover no-repeat;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.atlas-info-content{
  padding:20px 22px 26px;
}
.atlas-place-kicker{
  color:#e1b64f;
  font:700 10px/1 Arial,sans-serif;
  letter-spacing:.16em;
}
.atlas-info-content h3{
  color:#fff0d4;
  margin:9px 0 2px;
  font:400 31px/1.1 Georgia,serif;
}
.atlas-place-subtitle{
  color:#e3b64d;
  font:400 20px/1.1 Georgia,serif;
  margin-bottom:14px;
}
.atlas-info-content p{
  margin:0;
  color:#f3eadb;
  font:15px/1.55 Georgia,serif;
}
.atlas-meta{
  margin-top:18px;
}
.atlas-meta .map-meta-row{
  border-top:1px solid rgba(209,171,82,.42);
  padding:10px 0 0;
}
.atlas-meta .map-meta-row small{
  color:#d8aa42;
}
.atlas-meta .map-meta-row strong{
  color:#fff3d7;
}
.atlas-learn-more{
  width:100%;
  margin-top:22px;
  height:44px;
  border:1px solid #d9ab45;
  border-radius:6px;
  background:linear-gradient(180deg,#9f762d,#7a5521);
  color:#fff3d5;
  font:14px Georgia,serif;
  cursor:pointer;
}
.atlas-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 24px;
  border-top:1px solid #c99a34;
  background:#06231f;
  color:#f2e9d8;
  font:11px/1 Georgia,serif;
  letter-spacing:.12em;
}
.atlas-compass{
  position:absolute;
  right:28px;
  top:22px;
  width:112px;
  height:112px;
  z-index:700;
  pointer-events:none;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.compass-ring{
  position:absolute;left:18px;top:18px;width:76px;height:76px;
  border:2px solid #e0b64e;border-radius:50%;
}
.compass-ring:before,.compass-ring:after{
  content:"";position:absolute;background:#e0b64e;
}
.compass-ring:before{left:37px;top:-10px;width:2px;height:96px}
.compass-ring:after{left:-10px;top:37px;width:96px;height:2px}
.compass-needle{
  position:absolute;left:47px;top:20px;width:18px;height:72px;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  background:linear-gradient(180deg,#f0c259 0 50%,#f5eee1 50% 100%);
  border:1px solid #e0b64e;
  transform-origin:50% 50%;
  transition:transform .2s ease;
}
.compass-n,.compass-e,.compass-s,.compass-w{
  position:absolute;color:#f2e8d2;font:700 13px Georgia,serif;
}
.compass-n{top:0;left:51px}
.compass-s{bottom:0;left:51px}
.compass-e{right:0;top:48px}
.compass-w{left:0;top:48px}
.atlas-scale{
  position:absolute;
  left:22px;
  bottom:18px;
  z-index:650;
  color:#f5ead7;
  text-shadow:0 1px 3px #000;
  pointer-events:none;
}
.scale-bar{
  width:245px;height:10px;display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:2px solid #f4ead7;
}
.scale-bar span{border-left:2px solid #f4ead7}
.scale-bar span:last-child{border-right:2px solid #f4ead7}
.scale-labels{
  width:265px;display:flex;justify-content:space-between;
  margin-top:4px;font:10px Arial,sans-serif;
}

/* Map labels in the cinematic theme */
.cinematic-leaflet .map-region-label div{
  background:rgba(4,38,32,.78);
  border:1px solid rgba(236,198,100,.4);
  color:#fff5df;
  padding:4px 8px;
  font:700 14px Georgia,serif;
}
.cinematic-leaflet .map-place-label div{
  background:rgba(5,42,36,.9);
  color:#fff5df;
  border:1px solid #dcb349;
}
.cinematic-leaflet .map-place-label.capital div{
  background:#0b5a4c;
  border-color:#f3c94f;
  color:#fff1bb;
}
.cinematic-leaflet .leaflet-control-zoom{
  margin-left:16px !important;
  margin-top:16px !important;
  border:1px solid #d6aa42 !important;
}
.cinematic-leaflet .leaflet-control-zoom a{
  background:#062a25 !important;
  color:#fff2cf !important;
  border-color:#d6aa42 !important;
}

/* Highlighted selected territory */
.selected-territory{
  stroke:#ffd95e !important;
  stroke-width:4 !important;
  fill:#45c9aa !important;
  fill-opacity:.28 !important;
  filter:drop-shadow(0 0 6px rgba(255,217,94,.85));
}

@media(max-width:1100px){
  .atlas-body{grid-template-columns:170px minmax(0,1fr)}
  .atlas-info-panel{display:none}
  .atlas-header-links{display:none}
}


/* === CLEAN PROTOTYPE FIXES === */

/* No ugly always-visible polygon/hex outlines. */
.cinematic-leaflet .leaflet-interactive{
  outline:none !important;
}
.cinematic-leaflet path.leaflet-interactive{
  stroke:transparent !important;
  fill:transparent !important;
}

/* Only the actively selected area is visible. */
.cinematic-leaflet path.selected-territory{
  stroke:#ffd65b !important;
  stroke-width:3 !important;
  fill:#32c4a2 !important;
  fill-opacity:.22 !important;
  filter:drop-shadow(0 0 5px rgba(255,214,91,.55));
}

/* Labels stay compact and aligned. */
.cinematic-leaflet .map-region-label div,
.cinematic-leaflet .map-place-label div{
  transform:translate(-50%,-50%);
  pointer-events:auto;
}

/* Hide any stray town dots from earlier versions. */
.cinematic-leaflet .map-symbol-icon.town{
  display:none !important;
}


/* Correct Urukhomba emblem in atlas header */
.atlas-brand-mark{
  overflow:hidden;
  background:#06372e !important;
}
.atlas-brand-mark img{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
}

/* Selection area should look like a proper mapped territory */
.cinematic-leaflet path.proto-selected-area{
  stroke:#ffd45a !important;
  stroke-width:3 !important;
  stroke-linejoin:round !important;
  fill:#31c4a3 !important;
  fill-opacity:.24 !important;
  filter:drop-shadow(0 0 5px rgba(255,212,90,.5));
}


/* Natural cartographic selection — no hexagon/octagon look */
.cinematic-leaflet path.proto-selected-area{
  stroke:#f2c94c !important;
  stroke-width:2.5 !important;
  stroke-linejoin:round !important;
  stroke-linecap:round !important;
  fill:#3fc5aa !important;
  fill-opacity:.16 !important;
  filter:drop-shadow(0 0 4px rgba(242,201,76,.35));
}

/* Softer, terrain-following selection */
.cinematic-leaflet path.proto-selected-area{
  stroke:#f2c94c !important;
  stroke-width:2.2 !important;
  fill:#31c4a3 !important;
  fill-opacity:.14 !important;
  filter:drop-shadow(0 0 3px rgba(242,201,76,.28));
}


/* Terrain mask selection: no geometric polygon outlines */
.cinematic-leaflet path.proto-selected-area,
.cinematic-leaflet path.selected-territory{
  stroke:transparent !important;
  fill:transparent !important;
  filter:none !important;
}


/* Fix the bottom of the full-screen atlas: no extra footer strip */
.cinematic-atlas-card{
  grid-template-rows:84px minmax(0,1fr) !important;
}
.atlas-footer{
  display:none !important;
}
.atlas-body{
  min-height:0;
  height:100%;
}

/* === NATIONAL SYMBOLS ARCHIVE === */

.national-symbols-archive{
  position:fixed;
  inset:0;
  z-index:99999;
  background:
    radial-gradient(circle at 50% 0%,rgba(218,168,88,.10),transparent 35%),
    linear-gradient(180deg,#071f1a 0%,#03130f 100%);
  color:#f5f0e7;
  overflow-y:auto;
  display:none;
}

.national-symbols-archive.open{
  display:block;
}

.national-symbols-shell{
  width:min(1400px,92%);
  margin:auto;
  padding:70px 0 90px;
  position:relative;
}

.national-symbols-close{
  position:fixed;
  top:24px;
  right:30px;
  z-index:10;
  width:46px;
  height:46px;
  border:1px solid rgba(218,168,88,.55);
  border-radius:50%;
  background:#08251e;
  color:#daa858;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

.national-symbols-header{
  text-align:center;
  max-width:820px;
  margin:0 auto 55px;
}

.national-symbols-header span{
  display:block;
  color:#daa858;
  font-size:12px;
  letter-spacing:.28em;
  margin-bottom:14px;
}

.national-symbols-header h2{
  margin:0;
  color:#f5f0e7;
  font-family:Georgia,serif;
  font-size:clamp(38px,5vw,68px);
  font-weight:400;
}

.national-symbols-header p{
  color:#b9c8c1;
  max-width:650px;
  margin:18px auto 0;
  line-height:1.8;
}

.national-symbols-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.national-symbol-card{
  position:relative;
  min-height:430px;
  border:1px solid rgba(218,168,88,.28);
  background:#09251f;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease,border-color .25s ease;
}

.national-symbol-card:hover{
  transform:translateY(-5px);
  border-color:#daa858;
}

.national-symbol-card img{
  width:100%;
  height:245px;
  object-fit:cover;
  display:block;
}

.national-symbol-card > div{
  padding:24px;
}

.national-symbol-card span{
  color:#daa858;
  font-size:10px;
  letter-spacing:.18em;
}

.national-symbol-card h3{
  font-family:Georgia,serif;
  font-weight:400;
  color:#fff8e8;
  font-size:25px;
  margin:10px 0;
}

.national-symbol-card p{
  color:#aebdb6;
  line-height:1.65;
  font-size:14px;
  margin:0;
}

.national-motto-card{
  justify-content:center;
  min-height:430px;
  background:
    radial-gradient(circle at center,rgba(218,168,88,.13),transparent 55%),
    #071c17;
}

.national-motto-card h3{
  font-size:31px;
  line-height:1.35;
  color:#e5bd75;
}

.national-colours-card{
  justify-content:center;
  background:#071c17;
}

.national-colour-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  height:110px;
  margin:24px 0;
  border:1px solid rgba(255,255,255,.15);
}

.national-colour-row i{
  display:block;
}

.colour-green{background:#043f32;}
.colour-ivory{background:#f5f0e7;}
.colour-navy{background:#142844;}
.colour-gold{background:#daa858;}

@media(max-width:1100px){
  .national-symbols-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:650px){
  .national-symbols-shell{
    width:90%;
    padding-top:80px;
  }

  .national-symbols-grid{
    grid-template-columns:1fr;
  }

  .national-symbol-card{
    min-height:0;
  }

  .national-symbols-header h2{
    font-size:38px;
  }
}

/* === END NATIONAL SYMBOLS ARCHIVE === */
/* === NATIONAL SYMBOL DETAIL VIEW === */

.national-symbol-detail{
  position:fixed;
  inset:0;
  z-index:100000;
  background:#031f18;
  color:#f5f0e7;
  overflow-y:auto;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:opacity .3s ease, visibility .3s ease;
}

.national-symbol-detail.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.national-symbol-detail-close{
  position:fixed;
  top:24px;
  right:30px;
  width:48px;
  height:48px;
  border:1px solid #daa858;
  border-radius:50%;
  background:#082b22;
  color:#daa858;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  z-index:10001;
}

.national-symbol-detail-inner{
  width:min(1000px,88%);
  margin:0 auto;
  padding:90px 0 100px;
}

.national-symbol-detail-number{
  display:block;
  text-align:center;
  color:#daa858;
  font-size:12px;
  font-weight:700;
  letter-spacing:4px;
  margin-bottom:18px;
}

.national-symbol-detail h2{
  margin:0 0 45px;
  text-align:center;
  font-family:Georgia,serif;
  font-size:64px;
  font-weight:400;
  line-height:1.05;
  color:#f5f0e7;
}

.national-symbol-detail-image{
  width:100%;
  max-width:820px;
  margin:0 auto 45px;
  border:1px solid rgba(218,168,88,.45);
  background:#082b22;
}

.national-symbol-detail-image img{
  display:block;
  width:100%;
  height:auto;
}

.national-symbol-detail-intro{
  max-width:760px;
  margin:0 auto 55px;
  text-align:center;
  font-size:18px;
  line-height:1.8;
  color:#d3d8d3;
}

.national-symbol-detail-section{
  max-width:760px;
  margin:0 auto;
  padding:26px 0;
  border-top:1px solid rgba(218,168,88,.25);
}

.national-symbol-detail-section h3{
  margin:0 0 9px;
  font-family:Georgia,serif;
  font-size:26px;
  font-weight:400;
  color:#daa858;
}

.national-symbol-detail-section p{
  margin:0;
  color:#c8d0cb;
  font-size:16px;
  line-height:1.7;
}

@media(max-width:650px){

  .national-symbol-detail-inner{
    width:88%;
    padding-top:85px;
  }

  .national-symbol-detail h2{
    font-size:42px;
  }

  .national-symbol-detail-close{
    width:42px;
    height:42px;
    top:18px;
    right:18px;
  }

}

/* === END NATIONAL SYMBOL DETAIL VIEW === */

/* === KHOMBASA CITY ARCHIVE === */

.khombasa-archive{
  position:fixed;
  inset:0;
  z-index:100001;
  background:#06131b;
  color:#f3ead6;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}

.khombasa-archive.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.khombasa-shell{
  width:min(1180px,94%);
  margin:0 auto;
  padding:34px 0 70px;
}

.khombasa-close{
  position:fixed;
  top:22px;
  right:28px;
  z-index:100002;
  border:1px solid rgba(205,170,98,.65);
  background:rgba(4,15,22,.82);
  color:#f1d9a8;
  width:46px;
  height:46px;
  font-size:26px;
  cursor:pointer;
}

.khombasa-hero{
  position:relative;
  min-height:560px;
  overflow:hidden;
  border:1px solid rgba(201,165,92,.45);
}

.khombasa-hero img{
  width:100%;
  height:560px;
  object-fit:cover;
  display:block;
}

.khombasa-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,rgba(3,15,22,.82),transparent 48%),
    linear-gradient(to right,rgba(3,15,22,.45),transparent 45%);
}

.khombasa-hero-text{
  position:absolute;
  z-index:2;
  left:50px;
  bottom:45px;
  max-width:620px;
}

.khombasa-hero-text span,
.khombasa-intro span,
.khombasa-place span{
  color:#c4a15f;
  letter-spacing:2.6px;
  font-size:10px;
}

.khombasa-hero-text h2{
  margin:8px 0 8px;
  font-family:Georgia,serif;
  font-size:clamp(48px,7vw,90px);
  font-weight:400;
  letter-spacing:4px;
  color:#f4e5c3;
}

.khombasa-hero-text p{
  margin:0;
  max-width:560px;
  font-family:Georgia,serif;
  font-size:20px;
  line-height:1.6;
  color:#e1d4bd;
}

.khombasa-intro{
  text-align:center;
  max-width:760px;
  margin:42px auto 32px;
}

.khombasa-intro h3{
  margin:8px 0 10px;
  font-family:Georgia,serif;
  font-size:38px;
  font-weight:400;
  color:#f0dfbb;
}

.khombasa-intro p{
  margin:0;
  color:#c9c1b2;
  line-height:1.8;
}

.khombasa-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.khombasa-place{
  position:relative;
  min-height:330px;
  overflow:hidden;
  border:1px solid rgba(194,157,88,.42);
  background:#081923;
  cursor:pointer;
}

.khombasa-place img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.khombasa-place:hover img{
  transform:scale(1.035);
}

.khombasa-place::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(3,15,22,.96),rgba(3,15,22,.12) 65%);
}

.khombasa-place > div{
  position:absolute;
  z-index:2;
  left:25px;
  right:25px;
  bottom:23px;
}

.khombasa-place h3{
  margin:7px 0 7px;
  font-family:Georgia,serif;
  font-size:28px;
  font-weight:400;
  color:#f2dfb7;
}

.khombasa-place p{
  margin:0;
  color:#cbc3b3;
  line-height:1.55;
}

.khombasa-explore{
  background:
    radial-gradient(circle at 70% 40%,rgba(191,151,75,.16),transparent 32%),
    linear-gradient(135deg,#0b2430,#06141b);
}

.khombasa-explore::after{
  background:
    linear-gradient(135deg,rgba(5,18,25,.2),rgba(5,18,25,.85)),
    repeating-linear-gradient(
      45deg,
      rgba(194,157,88,.04) 0,
      rgba(194,157,88,.04) 1px,
      transparent 1px,
      transparent 14px
    );
}

.khombasa-explore-inner{
  top:50%;
  bottom:auto!important;
  transform:translateY(-50%);
}

.khombasa-explore strong{
  display:inline-block;
  margin-top:18px;
  color:#d8b873;
  font-size:12px;
  letter-spacing:2px;
}

@media(max-width:800px){
  .khombasa-grid{
    grid-template-columns:1fr;
  }

  .khombasa-hero,
  .khombasa-hero img{
    min-height:430px;
    height:430px;
  }

  .khombasa-hero-text{
    left:25px;
    right:25px;
    bottom:30px;
  }

  .khombasa-place{
    min-height:300px;
  }
}

@media(max-width:520px){
  .khombasa-shell{
    width:95%;
    padding-top:18px;
  }

  .khombasa-close{
    top:12px;
    right:12px;
  }

  .khombasa-hero,
  .khombasa-hero img{
    min-height:380px;
    height:380px;
  }

  .khombasa-hero-text h2{
    font-size:46px;
  }

  .khombasa-hero-text p{
    font-size:16px;
  }

  .khombasa-intro h3{
    font-size:31px;
  }
}
/* === KHOMBASA PLACE DETAIL === */

.khombasa-detail{
  position:fixed;
  inset:0;
  z-index:100003;
  background:#06131b;
  color:#f3ead6;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}

.khombasa-detail.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.khombasa-detail-back,
.khombasa-detail-close{
  position:fixed;
  top:22px;
  z-index:100004;
  border:1px solid rgba(205,170,98,.65);
  background:rgba(4,15,22,.86);
  color:#f1d9a8;
  cursor:pointer;
}

.khombasa-detail-back{
  left:28px;
  padding:12px 16px;
  font-size:11px;
  letter-spacing:1.5px;
}

.khombasa-detail-close{
  right:28px;
  width:46px;
  height:46px;
  font-size:26px;
}

.khombasa-detail-shell{
  width:min(1100px,92%);
  margin:0 auto;
  padding:95px 0 70px;
}

.khombasa-detail-image{
  width:100%;
  max-height:620px;
  overflow:hidden;
  border:1px solid rgba(194,157,88,.42);
}

.khombasa-detail-image img{
  width:100%;
  height:620px;
  object-fit:cover;
  display:block;
}

.khombasa-detail-content{
  max-width:780px;
  margin:40px auto 0;
}

.khombasa-detail-content > span{
  color:#c4a15f;
  letter-spacing:2.5px;
  font-size:10px;
}

.khombasa-detail-content h2{
  margin:8px 0 16px;
  font-family:Georgia,serif;
  font-size:clamp(40px,6vw,64px);
  font-weight:400;
  color:#f2dfb7;
}

.khombasa-detail-content > p{
  font-family:Georgia,serif;
  font-size:20px;
  line-height:1.7;
  color:#d8cdb9;
}

#khombasaDetailText{
  margin-top:28px;
  color:#c6beae;
  line-height:1.8;
}

#khombasaDetailText p{
  margin:0 0 18px;
}

@media(max-width:700px){
  .khombasa-detail-shell{
    width:94%;
    padding-top:85px;
  }

  .khombasa-detail-image img{
    height:420px;
  }

  .khombasa-detail-back{
    left:14px;
    top:14px;
  }

  .khombasa-detail-close{
    right:14px;
    top:14px;
  }

  .khombasa-detail-content h2{
    font-size:42px;
  }
}

/* === END KHOMBASA PLACE DETAIL === */

/* === LAKE NAVAR ARCHIVE === */

.lake-navar-archive{
  position:fixed;
  inset:0;
  z-index:100001;
  background:#04121a;
  color:#f3ead6;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}

.lake-navar-archive.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.lake-navar-shell{
  width:min(1450px,95%);
  margin:0 auto;
  padding:28px 0 65px;
}

.lake-navar-close{
  position:fixed;
  top:22px;
  right:28px;
  z-index:100002;
  width:46px;
  height:46px;
  border:1px solid rgba(201,163,91,.7);
  background:rgba(3,14,21,.82);
  color:#e7c98e;
  font-size:26px;
  cursor:pointer;
}

.lake-navar-hero{
  position:relative;
  height:650px;
  overflow:hidden;
  border:1px solid rgba(190,151,79,.4);
  background:#061722;
}

.lake-navar-hero > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.lake-navar-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(2,13,19,.96) 0%,
      rgba(2,13,19,.78) 27%,
      rgba(2,13,19,.25) 53%,
      rgba(2,13,19,.08) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2,13,19,.65) 0%,
      transparent 45%
    );
}

.lake-navar-hero-overlay{
  position:absolute;
  z-index:2;
  left:55px;
  top:50%;
  transform:translateY(-50%);
  width:min(520px,80%);
}

.lake-navar-hero-overlay > span{
  color:#c8a468;
  font-size:10px;
  letter-spacing:4px;
}

.lake-navar-hero-overlay h2{
  margin:13px 0 5px;
  font-family:Georgia,serif;
  font-size:clamp(58px,7vw,96px);
  font-weight:400;
  line-height:.95;
  color:#e9c98f;
}

.lake-navar-subtitle{
  margin:18px 0 25px;
  color:#eee2ca;
  font-size:12px;
  letter-spacing:5px;
}

.lake-navar-hero-overlay p{
  margin:0;
  max-width:500px;
  color:#ddd5c5;
  font-family:Georgia,serif;
  font-size:18px;
  line-height:1.7;
}

.lake-navar-hero-overlay blockquote{
  margin:30px 0 0;
  padding-top:25px;
  border-top:1px solid rgba(194,157,88,.65);
  color:#dbb979;
  font-family:Georgia,serif;
  font-size:18px;
  font-style:italic;
}

.lake-navar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:20px;
}

.lake-navar-card{
  position:relative;
  min-height:470px;
  overflow:hidden;
  border:1px solid rgba(194,157,88,.45);
  background:#061720;
  cursor:pointer;
}

.lake-navar-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

.lake-navar-card:hover img{
  transform:scale(1.035);
}

.lake-navar-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(2,14,20,.98) 0%,
      rgba(2,14,20,.92) 27%,
      rgba(2,14,20,.18) 67%,
      transparent 100%
    );
}

.lake-navar-card > div{
  position:absolute;
  z-index:2;
  left:28px;
  right:28px;
  bottom:27px;
}

.lake-navar-card span{
  color:#c8a468;
  font-size:10px;
  letter-spacing:3px;
}

.lake-navar-card h3{
  margin:8px 0 9px;
  font-family:Georgia,serif;
  font-size:29px;
  font-weight:400;
  color:#f0dfbd;
}

.lake-navar-card p{
  margin:0;
  color:#cbc3b4;
  line-height:1.6;
}

.lake-navar-card strong{
  display:inline-block;
  margin-top:20px;
  padding:10px 13px;
  border:1px solid rgba(194,157,88,.6);
  color:#d7bb82;
  font-size:9px;
  font-weight:400;
  letter-spacing:2px;
}

@media(max-width:900px){

  .lake-navar-grid{
    grid-template-columns:1fr;
  }

  .lake-navar-card{
    min-height:420px;
  }

  .lake-navar-hero{
    height:570px;
  }
}

@media(max-width:560px){

  .lake-navar-shell{
    width:95%;
    padding-top:18px;
  }

  .lake-navar-close{
    top:12px;
    right:12px;
  }

  .lake-navar-hero{
    height:600px;
  }

  .lake-navar-hero::after{
    background:
      linear-gradient(
        to top,
        rgba(2,13,19,.96) 0%,
        rgba(2,13,19,.68) 55%,
        rgba(2,13,19,.15) 100%
      );
  }

  .lake-navar-hero-overlay{
    left:24px;
    right:24px;
    top:auto;
    bottom:35px;
    width:auto;
    transform:none;
  }

  .lake-navar-hero-overlay h2{
    font-size:54px;
  }

  .lake-navar-hero-overlay p{
    font-size:16px;
  }

  .lake-navar-card{
    min-height:390px;
  }
}

/* === END LAKE NAVAR ARCHIVE === */

/* === MYTHS & LEGENDS ARCHIVE === */

.myths-archive{
  position:fixed;
  inset:0;
  z-index:100005;
  background:rgba(2,12,17,.97);
  color:#f1e6d0;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}

.myths-archive.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.myths-shell{
  width:min(1400px,94%);
  margin:0 auto;
  padding:42px 0 60px;
}

.myths-close{
  position:fixed;
  top:22px;
  right:28px;
  z-index:100006;
  width:46px;
  height:46px;
  border:1px solid rgba(199,161,92,.7);
  background:rgba(3,15,20,.9);
  color:#e4c181;
  font-size:26px;
  cursor:pointer;
}

.myths-header{
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-end;
  padding:24px 10px 28px;
  border-bottom:1px solid rgba(193,153,81,.35);
}

.myths-header > div > span{
  display:block;
  margin-bottom:10px;
  color:#c8a468;
  font-size:10px;
  letter-spacing:4px;
}

.myths-header h2{
  margin:0;
  font-family:Georgia,serif;
  font-size:clamp(48px,6vw,78px);
  font-weight:400;
  line-height:1;
  color:#edcf99;
}

.myths-header p{
  margin:13px 0 0;
  color:#d7bd8b;
  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
}

.myths-header blockquote{
  width:min(390px,100%);
  margin:0;
  color:#cfc1aa;
  font-family:Georgia,serif;
  font-size:17px;
  font-style:italic;
  line-height:1.6;
  text-align:right;
}

.myths-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:26px;
}

.myth-card{
  position:relative;
  min-height:570px;
  overflow:hidden;
  border:1px solid rgba(199,160,87,.45);
  background:#07171d;
  cursor:pointer;
}

.myth-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

.myth-card:hover img{
  transform:scale(1.035);
}

.myth-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(2,13,18,.98) 0%,
      rgba(2,13,18,.92) 28%,
      rgba(2,13,18,.35) 55%,
      rgba(2,13,18,.05) 100%
    );
}

.myth-card-text{
  position:absolute;
  z-index:2;
  left:22px;
  right:22px;
  bottom:22px;
}

.myth-card-text span{
  color:#cda75f;
  font-size:11px;
  letter-spacing:3px;
}

.myth-card-text h3{
  margin:8px 0 8px;
  font-family:Georgia,serif;
  font-size:27px;
  font-weight:400;
  color:#f0dbb4;
}

.myth-card-text p{
  margin:0;
  min-height:44px;
  color:#d3c9b8;
  font-family:Georgia,serif;
  font-size:15px;
  line-height:1.5;
}

.myth-card-text strong{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-top:18px;
  border:1px solid rgba(202,162,89,.65);
  border-radius:50%;
  color:#d9ba7b;
  font-size:18px;
  font-weight:400;
}

.myths-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:30px;
}

.myths-footer span{
  display:block;
  width:150px;
  height:1px;
  background:rgba(196,156,83,.5);
}

.myths-footer p{
  margin:0;
  color:#d4b67f;
  font-family:Georgia,serif;
  font-size:16px;
  font-style:italic;
  text-align:center;
}

@media(max-width:1050px){
  .myths-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .myth-card{
    min-height:520px;
  }
}

@media(max-width:700px){
  .myths-header{
    display:block;
  }

  .myths-header blockquote{
    margin-top:24px;
    text-align:left;
  }

  .myths-grid{
    grid-template-columns:1fr;
  }

  .myth-card{
    min-height:500px;
  }

  .myths-footer span{
    width:55px;
  }
}

@media(max-width:500px){
  .myths-shell{
    width:94%;
    padding-top:24px;
  }

  .myths-close{
    top:12px;
    right:12px;
  }

  .myth-card{
    min-height:440px;
  }

  .myths-header h2{
    font-size:48px;
  }
}

/* === END MYTHS & LEGENDS ARCHIVE === */

/* === THE FIRST STORY ARCHIVE === */

.first-story-archive{
  position:fixed;
  inset:0;
  z-index:100007;
  background:#061218;
  color:#eee2cc;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}

.first-story-archive.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.first-story-shell{
  width:min(1450px,95%);
  margin:0 auto;
  padding:28px 0 70px;
}

.first-story-close{
  position:fixed;
  top:22px;
  right:28px;
  z-index:100008;
  width:46px;
  height:46px;
  border:1px solid rgba(198,158,84,.7);
  background:rgba(3,14,19,.88);
  color:#e4c07c;
  font-size:26px;
  cursor:pointer;
}

.first-story-hero{
  position:relative;
  min-height:720px;
  overflow:hidden;
  border:1px solid rgba(194,154,82,.42);
  background:#07171d;
}

.first-story-hero > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.first-story-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(2,12,17,.96) 0%,
      rgba(2,12,17,.82) 27%,
      rgba(2,12,17,.34) 55%,
      rgba(2,12,17,.08) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2,12,17,.72) 0%,
      transparent 48%
    );
}

.first-story-intro{
  position:absolute;
  z-index:2;
  left:60px;
  top:50%;
  transform:translateY(-50%);
  width:min(600px,80%);
}

.first-story-intro > span{
  display:block;
  color:#c8a15c;
  font-size:10px;
  letter-spacing:4px;
}

.first-story-intro h2{
  margin:13px 0 10px;
  font-family:Georgia,serif;
  font-size:clamp(58px,7vw,98px);
  font-weight:400;
  line-height:.96;
  color:#edcf98;
}

.first-story-subtitle{
  margin:20px 0 32px;
  color:#e5d3b3;
  font-size:11px;
  letter-spacing:5px;
}

.first-story-opening{
  margin:0;
  padding-left:25px;
  border-left:1px solid rgba(203,164,91,.75);
  color:#f0e5d2;
  font-family:Georgia,serif;
  font-size:21px;
  line-height:1.75;
}

.first-story-body{
  width:min(780px,90%);
  margin:0 auto;
  padding:85px 0 35px;
  text-align:center;
}

.first-story-body > span{
  display:block;
  margin-bottom:32px;
  color:#c8a15c;
  font-size:10px;
  letter-spacing:5px;
}

.first-story-body p{
  margin:0 auto 26px;
  color:#d7cdbc;
  font-family:Georgia,serif;
  font-size:18px;
  line-height:1.9;
}

.first-story-body blockquote{
  position:relative;
  margin:65px auto 10px;
  padding:38px 35px;
  border-top:1px solid rgba(195,155,82,.48);
  border-bottom:1px solid rgba(195,155,82,.48);
  color:#e1bd78;
  font-family:Georgia,serif;
  font-size:24px;
  font-style:italic;
  line-height:1.6;
}

.first-story-body blockquote::before{
  content:"✦";
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  padding:0 15px;
  background:#061218;
  color:#c89f59;
  font-size:17px;
}

@media(max-width:700px){

  .first-story-hero{
    min-height:700px;
  }

  .first-story-shade{
    background:
      linear-gradient(
        to top,
        rgba(2,12,17,.97) 0%,
        rgba(2,12,17,.76) 57%,
        rgba(2,12,17,.15) 100%
      );
  }

  .first-story-intro{
    left:25px;
    right:25px;
    top:auto;
    bottom:42px;
    width:auto;
    transform:none;
  }

  .first-story-intro h2{
    font-size:55px;
  }

  .first-story-opening{
    font-size:18px;
  }

  .first-story-body{
    padding-top:60px;
  }
}

@media(max-width:500px){

  .first-story-shell{
    width:95%;
    padding-top:18px;
  }

  .first-story-close{
    top:12px;
    right:12px;
  }

  .first-story-hero{
    min-height:650px;
  }

  .first-story-intro h2{
    font-size:48px;
  }

  .first-story-subtitle{
    letter-spacing:3px;
  }

  .first-story-body p{
    font-size:17px;
  }

  .first-story-body blockquote{
    padding-left:15px;
    padding-right:15px;
    font-size:21px;
  }
}

/* === END THE FIRST STORY ARCHIVE === */

/* === THE FLAG ARCHIVE === */

.flag-archive{
  position:fixed;
  inset:0;
  z-index:100009;
  background:#061218;
  color:#efe4d0;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}

.flag-archive.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.flag-archive-shell{
  width:min(1450px,95%);
  margin:0 auto;
  padding:28px 0 70px;
}

.flag-archive-close{
  position:fixed;
  top:22px;
  right:28px;
  z-index:100010;
  width:46px;
  height:46px;
  border:1px solid rgba(198,158,84,.7);
  background:rgba(3,14,19,.9);
  color:#e5c37d;
  font-size:26px;
  cursor:pointer;
}

.flag-archive-hero{
  position:relative;
  min-height:700px;
  overflow:hidden;
  border:1px solid rgba(194,154,82,.42);
  background:#07171d;
}

.flag-archive-hero > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.flag-archive-hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(2,12,17,.15) 0%,
      rgba(2,12,17,.05) 45%,
      rgba(2,12,17,.78) 78%,
      rgba(2,12,17,.95) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2,12,17,.62) 0%,
      transparent 45%
    );
}

.flag-archive-title{
  position:absolute;
  z-index:2;
  right:55px;
  top:50%;
  transform:translateY(-50%);
  width:min(470px,42%);
  text-align:center;
}

.flag-archive-title > span{
  display:block;
  color:#c8a15c;
  font-size:10px;
  letter-spacing:4px;
}

.flag-archive-title h2{
  margin:12px 0 4px;
  font-family:Georgia,serif;
  font-size:clamp(62px,7vw,100px);
  font-weight:400;
  line-height:.95;
  color:#efd09a;
}

.flag-archive-title > div{
  color:#ead7b5;
  font-size:12px;
  letter-spacing:7px;
}

.flag-archive-title blockquote{
  margin:34px 0 0;
  padding-top:28px;
  border-top:1px solid rgba(198,158,84,.55);
  color:#dfceb4;
  font-family:Georgia,serif;
  font-size:20px;
  font-style:italic;
  line-height:1.6;
}

.flag-archive-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}

.flag-official,
.flag-colours{
  border:1px solid rgba(194,154,82,.42);
  background:#08171d;
  padding:28px;
}

.flag-official > span,
.flag-colours > span{
  display:block;
  margin-bottom:22px;
  color:#d2ad69;
  font-size:11px;
  letter-spacing:4px;
  text-align:center;
}

.flag-official-image{
  border:1px solid rgba(199,160,86,.45);
  overflow:hidden;
  background:#031016;
}

.flag-official-image img{
  display:block;
  width:100%;
  height:auto;
}

.flag-official > p{
  margin:25px 0 0;
  color:#ddc28e;
  font-family:Georgia,serif;
  font-size:17px;
  font-style:italic;
  text-align:center;
  letter-spacing:1px;
}

.flag-colour-row{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:20px;
  align-items:center;
  padding:15px 0;
  border-top:1px solid rgba(184,148,80,.25);
}

.flag-colour-row:first-of-type{
  border-top:none;
}

.flag-colour{
  display:block;
  width:86px;
  height:58px;
  border:1px solid rgba(210,177,112,.42);
}

.flag-colour.green{
  background:#0b4b3c;
}

.flag-colour.cream{
  background:#eee8dc;
}

.flag-colour.navy{
  background:#173152;
}

.flag-colour.gold{
  background:#c99a3f;
}

.flag-colour-row h3{
  margin:0 0 5px;
  color:#edcf99;
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:400;
}

.flag-colour-row p{
  margin:0;
  color:#cec3b1;
  font-family:Georgia,serif;
  font-size:15px;
  line-height:1.6;
}

.flag-archive-ending{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:35px 0 5px;
}

.flag-archive-ending span{
  display:block;
  width:145px;
  height:1px;
  background:rgba(194,154,82,.48);
}

.flag-archive-ending p{
  margin:0;
  color:#d7b46f;
  font-family:Georgia,serif;
  font-size:16px;
  font-style:italic;
  text-align:center;
}

@media(max-width:900px){

  .flag-archive-info{
    grid-template-columns:1fr;
  }

  .flag-archive-hero{
    min-height:650px;
  }

  .flag-archive-title{
    right:30px;
    width:min(430px,55%);
  }
}

@media(max-width:650px){

  .flag-archive-shell{
    width:95%;
    padding-top:18px;
  }

  .flag-archive-close{
    top:12px;
    right:12px;
  }

  .flag-archive-hero{
    min-height:700px;
  }

  .flag-archive-hero-shade{
    background:
      linear-gradient(
        to top,
        rgba(2,12,17,.96) 0%,
        rgba(2,12,17,.72) 52%,
        rgba(2,12,17,.08) 100%
      );
  }

  .flag-archive-title{
    left:24px;
    right:24px;
    top:auto;
    bottom:40px;
    width:auto;
    transform:none;
  }

  .flag-archive-title h2{
    font-size:58px;
  }

  .flag-colour-row{
    grid-template-columns:65px 1fr;
    gap:14px;
  }

  .flag-colour{
    width:65px;
    height:48px;
  }

  .flag-archive-ending span{
    width:50px;
  }
}

/* === END THE FLAG ARCHIVE === */

/* === THE EMBLEM ARCHIVE === */

.emblem-archive{
  position:fixed;
  inset:0;
  z-index:100011;
  background:#061218;
  color:#efe4d0;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}

.emblem-archive.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.emblem-archive-shell{
  width:min(1450px,95%);
  margin:0 auto;
  padding:28px 0 70px;
}

.emblem-archive-close{
  position:fixed;
  top:22px;
  right:28px;
  z-index:100012;
  width:46px;
  height:46px;
  border:1px solid rgba(198,158,84,.7);
  background:rgba(3,14,19,.9);
  color:#e5c37d;
  font-size:26px;
  cursor:pointer;
}

.emblem-archive-hero{
  position:relative;
  min-height:700px;
  overflow:hidden;
  border:1px solid rgba(194,154,82,.42);
  background:#07171d;
}

.emblem-archive-hero > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.emblem-archive-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(2,12,17,.05) 0%,
      rgba(2,12,17,.08) 42%,
      rgba(2,12,17,.78) 73%,
      rgba(2,12,17,.96) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2,12,17,.55) 0%,
      transparent 45%
    );
}

.emblem-archive-title{
  position:absolute;
  z-index:2;
  right:55px;
  top:50%;
  transform:translateY(-50%);
  width:min(520px,44%);
  text-align:center;
}

.emblem-archive-title > span{
  display:block;
  color:#c8a15c;
  font-size:10px;
  letter-spacing:4px;
}

.emblem-archive-title h2{
  margin:12px 0 5px;
  font-family:Georgia,serif;
  font-size:clamp(58px,6.5vw,94px);
  font-weight:400;
  line-height:1;
  color:#efd09a;
}

.emblem-archive-title > div{
  color:#ead7b5;
  font-size:12px;
  letter-spacing:7px;
}

.emblem-archive-title blockquote{
  margin:34px 0 0;
  padding-top:28px;
  border-top:1px solid rgba(198,158,84,.55);
  color:#dfceb4;
  font-family:Georgia,serif;
  font-size:20px;
  font-style:italic;
  line-height:1.6;
}

.emblem-archive-info{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:20px;
  margin-top:20px;
}

.emblem-official,
.emblem-elements{
  border:1px solid rgba(194,154,82,.42);
  background:#08171d;
  padding:30px;
}

.emblem-official > span,
.emblem-elements > span{
  display:block;
  margin-bottom:25px;
  color:#d2ad69;
  font-size:11px;
  letter-spacing:4px;
  text-align:center;
}

.emblem-official-image{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:330px;
  padding:25px;
  border:1px solid rgba(199,160,86,.28);
  background:
    radial-gradient(
      circle at center,
      rgba(20,71,60,.42),
      rgba(3,16,22,.9) 70%
    );
}

.emblem-official-image img{
  display:block;
  max-width:100%;
  max-height:310px;
  object-fit:contain;
}

.emblem-official > p{
  margin:25px 0 0;
  color:#ddc28e;
  font-family:Georgia,serif;
  font-size:17px;
  font-style:italic;
  text-align:center;
}

.emblem-elements-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  min-height:390px;
}

.emblem-element{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
  text-align:center;
  border-left:1px solid rgba(194,154,82,.3);
}

.emblem-element:first-child{
  border-left:none;
}

.emblem-element strong{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:65px;
  margin-bottom:15px;
  color:#d7aa53;
  font-family:Georgia,serif;
  font-size:39px;
  font-weight:400;
  letter-spacing:4px;
}

.emblem-element h3{
  margin:0 0 16px;
  color:#edcf99;
  font-family:Georgia,serif;
  font-size:18px;
  font-weight:400;
}

.emblem-element h3::after{
  content:"";
  display:block;
  width:28px;
  height:1px;
  margin:13px auto 0;
  background:rgba(201,159,77,.75);
}

.emblem-element p{
  margin:0;
  color:#cec3b1;
  font-family:Georgia,serif;
  font-size:14px;
  line-height:1.7;
}

.emblem-archive-ending{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  padding:38px 0 5px;
}

.emblem-archive-ending span{
  display:block;
  width:180px;
  height:1px;
  background:rgba(194,154,82,.48);
}

.emblem-archive-ending p{
  margin:0;
  color:#d7b46f;
  font-family:Georgia,serif;
  font-size:18px;
  font-style:italic;
  letter-spacing:5px;
  text-align:center;
}

@media(max-width:1050px){

  .emblem-archive-info{
    grid-template-columns:1fr;
  }

  .emblem-elements-grid{
    min-height:auto;
  }
}

@media(max-width:800px){

  .emblem-archive-hero{
    min-height:650px;
  }

  .emblem-archive-title{
    right:30px;
    width:min(470px,55%);
  }

  .emblem-elements-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .emblem-element{
    border-top:1px solid rgba(194,154,82,.3);
  }

  .emblem-element:nth-child(odd){
    border-left:none;
  }
}

@media(max-width:650px){

  .emblem-archive-shell{
    width:95%;
    padding-top:18px;
  }

  .emblem-archive-close{
    top:12px;
    right:12px;
  }

  .emblem-archive-hero{
    min-height:700px;
  }

  .emblem-archive-shade{
    background:
      linear-gradient(
        to top,
        rgba(2,12,17,.97) 0%,
        rgba(2,12,17,.76) 52%,
        rgba(2,12,17,.08) 100%
      );
  }

  .emblem-archive-title{
    left:22px;
    right:22px;
    top:auto;
    bottom:38px;
    width:auto;
    transform:none;
  }

  .emblem-archive-title h2{
    font-size:53px;
  }

  .emblem-elements-grid{
    grid-template-columns:1fr;
  }

  .emblem-element{
    border-left:none;
    border-top:1px solid rgba(194,154,82,.3);
  }

  .emblem-element:first-child{
    border-top:none;
  }

  .emblem-archive-ending{
    gap:12px;
  }

  .emblem-archive-ending span{
    width:45px;
  }

  .emblem-archive-ending p{
    font-size:14px;
    letter-spacing:3px;
  }
}

/* === END THE EMBLEM ARCHIVE === */

/* =========================================================
   URUKHOMBA CITIZENSHIP OFFICE
   ========================================================= */

.citizenship-entry{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  align-items:center;
}

.citizenship-entry-copy h2{
  margin-top:8px;
}

.citizenship-kicker{
  display:block;
  font-size:11px;
  letter-spacing:3px;
  color:#b98d46;
  margin-bottom:8px;
}

.citizenship-population{
  margin:26px 0;
  padding:22px 24px;
  border:1px solid rgba(185,141,70,.35);
  background:rgba(6,25,30,.06);
}

.citizenship-population span{
  display:block;
  font-size:10px;
  letter-spacing:2.5px;
  color:#8d744b;
}

.citizenship-population strong{
  display:block;
  font-size:68px;
  line-height:1;
  margin:6px 0;
  color:#b98d46;
  font-weight:400;
}

.citizenship-population p{
  margin:0;
}

.citizenship-note{
  font-size:12px;
  opacity:.72;
}

.citizenship-entry-actions{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.citizenship-entry-actions img{
  width:120px;
  height:120px;
  object-fit:contain;
  margin-bottom:8px;
}

.citizenship-entry-actions .btn{
  width:min(320px,100%);
}

.citizenship-entry-actions small{
  max-width:330px;
  line-height:1.6;
  opacity:.68;
}

/* MAIN OVERLAY */

.citizenship-office{
  position:fixed;
  inset:0;
  z-index:100020;
  background:
    radial-gradient(circle at 78% 18%,rgba(212,173,104,.11),transparent 26%),
    rgba(3,15,20,.985);
  color:#f1e8d8;
  overflow-y:auto;
  display:none;
}

.citizenship-office.open{
  display:block;
}

.citizenship-office-shell{
  width:min(1180px,92%);
  margin:0 auto;
  padding:64px 0 90px;
}

.citizenship-office-close{
  position:fixed;
  top:22px;
  right:28px;
  z-index:100022;
  width:46px;
  height:46px;
  border:1px solid rgba(212,173,104,.5);
  background:#07191f;
  color:#efd39d;
  font-size:28px;
  cursor:pointer;
}

.citizenship-office-header{
  max-width:760px;
  margin:0 auto 42px;
  text-align:center;
}

.citizenship-office-header > span{
  font-size:10px;
  letter-spacing:4px;
  color:#d4ad68;
}

.citizenship-office-header h2{
  font-size:48px;
  font-weight:400;
  margin:12px 0 14px;
  color:#efd39d;
}

.citizenship-office-header p{
  color:#bcb3a5;
  line-height:1.7;
  margin:0;
}

.citizenship-office-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.citizenship-form-panel,
.citizenship-status-panel{
  border:1px solid rgba(212,173,104,.32);
  background:#091a20;
  padding:30px;
}

.citizenship-form-panel h3,
.citizenship-status-panel h3{
  color:#efd39d;
  font-weight:400;
  font-size:28px;
  margin:0 0 22px;
}

.citizenship-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:28px;
}

.citizenship-tab{
  border:1px solid rgba(212,173,104,.25);
  background:transparent;
  color:#c7bbaa;
  padding:12px 10px;
  cursor:pointer;
  font-size:11px;
  letter-spacing:1.5px;
}

.citizenship-tab.active{
  border-color:#d4ad68;
  background:rgba(212,173,104,.12);
  color:#efd39d;
}

.citizenship-form-panel label{
  display:block;
  margin:16px 0 7px;
  font-size:12px;
  color:#ddd4c7;
}

.citizenship-form-panel label span{
  opacity:.55;
}

.citizenship-form-panel input,
.citizenship-form-panel textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(212,173,104,.23);
  background:#0b2026;
  color:#f3eadc;
  padding:13px 14px;
  outline:none;
}

.citizenship-form-panel textarea{
  min-height:96px;
  resize:vertical;
}

.citizenship-form-panel input:focus,
.citizenship-form-panel textarea:focus{
  border-color:#d4ad68;
}

.citizenship-principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:9px;
}

.citizenship-principles button{
  border:1px solid rgba(212,173,104,.25);
  background:transparent;
  color:#c7bbaa;
  padding:12px 7px;
  cursor:pointer;
  font-size:11px;
}

.citizenship-principles button.active{
  border-color:#d4ad68;
  background:rgba(212,173,104,.13);
  color:#efd39d;
}

.citizenship-checkbox{
  display:flex !important;
  align-items:flex-start;
  gap:10px;
  margin-top:20px !important;
  line-height:1.55;
  font-size:11px !important;
  color:#bdb3a5 !important;
}

.citizenship-checkbox input{
  width:auto;
  margin-top:2px;
}

.citizenship-submit{
  margin-top:12px;
  width:100%;
}

.citizenship-key-warning{
  margin-top:18px;
  font-size:11px;
  line-height:1.6;
  color:#aaa093;
}

/* STATUS SIDE */

.citizenship-status-panel{
  text-align:center;
}

.citizenship-status-panel > span{
  font-size:10px;
  letter-spacing:3px;
  color:#d4ad68;
}

.citizenship-status-symbol{
  width:100px;
  height:100px;
  border-radius:50%;
  border:1px solid #d4ad68;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  font-size:42px;
  color:#efd39d;
  background:
    radial-gradient(circle,rgba(212,173,104,.12),transparent 70%);
}

.citizenship-status-panel > p{
  color:#bdb4a6;
  line-height:1.7;
}

.citizenship-profile{
  margin-top:28px;
  text-align:left;
  border:1px solid rgba(212,173,104,.24);
  background:#061419;
  padding:20px;
}

.citizenship-profile-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(255,255,255,.055);
  padding:9px 0;
}

.citizenship-profile-row:last-of-type{
  border-bottom:0;
}

.citizenship-profile-row span{
  font-size:11px;
  color:#9f978c;
}

.citizenship-profile-row strong{
  text-align:right;
  font-weight:400;
  color:#efe4d1;
}

.citizenship-key-box{
  margin-top:18px;
  border:1px dashed #d4ad68;
  background:rgba(212,173,104,.06);
  padding:17px;
  text-align:center;
}

.citizenship-key-box span{
  display:block;
  font-size:9px;
  letter-spacing:2px;
  color:#b8ac9d;
}

.citizenship-key-box strong{
  display:block;
  font-family:monospace;
  font-size:19px;
  letter-spacing:2px;
  margin:9px 0;
  color:#efd39d;
  overflow-wrap:anywhere;
}

.citizenship-key-box small{
  color:#a99f91;
  line-height:1.5;
}

.citizenship-profile-actions{
  display:flex;
  gap:9px;
  margin-top:17px;
}

.citizenship-profile-actions .btn{
  flex:1;
}

.citizenship-hidden{
  display:none !important;
}

@media(max-width:850px){

  .citizenship-entry{
    grid-template-columns:1fr;
  }

  .citizenship-office-grid{
    grid-template-columns:1fr;
  }

  .citizenship-office-shell{
    padding-top:78px;
  }

  .citizenship-office-header h2{
    font-size:38px;
  }

  .citizenship-principles{
    grid-template-columns:repeat(2,1fr);
  }

  .citizenship-profile-actions{
    flex-direction:column;
  }

}

/* =========================================================
   URUKHOMBA PASSPORT
   ========================================================= */

.urukhomba-passport{
  position:fixed;
  inset:0;
  z-index:100030;
  display:none;
  overflow-y:auto;
  background:
    radial-gradient(circle at 50% 15%,rgba(212,173,104,.12),transparent 30%),
    rgba(2,13,17,.985);
  color:#efe5d4;
}

.urukhomba-passport.open{
  display:block;
}

.urukhomba-passport-close{
  position:fixed;
  top:22px;
  right:28px;
  z-index:100032;
  width:46px;
  height:46px;
  border:1px solid rgba(212,173,104,.55);
  background:#07191f;
  color:#efd39d;
  font-size:28px;
  cursor:pointer;
}

.urukhomba-passport-shell{
  width:min(1120px,92%);
  margin:0 auto;
  padding:70px 0 90px;
}

.passport-document{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  max-width:1000px;
  margin:0 auto;
  border:1px solid rgba(212,173,104,.45);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}


/* PASSPORT COVER */

.passport-cover{
  min-height:650px;
  box-sizing:border-box;
  padding:65px 35px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-right:1px solid rgba(212,173,104,.4);
  background:
    linear-gradient(rgba(5,42,38,.96),rgba(3,29,29,.98)),
    radial-gradient(circle at center,rgba(212,173,104,.13),transparent 55%);
}

.passport-cover img{
  width:145px;
  height:145px;
  object-fit:contain;
  margin-bottom:45px;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.3));
}

.passport-cover > span{
  font-size:11px;
  letter-spacing:4px;
  color:#d4ad68;
}

.passport-cover h2{
  margin:22px 0 5px;
  font-family:Georgia,serif;
  font-size:48px;
  font-weight:400;
  letter-spacing:7px;
  color:#efd39d;
}

.passport-cover p{
  margin:0;
  font-size:11px;
  letter-spacing:3px;
  color:#d7c7aa;
}

.passport-cover small{
  margin-top:55px;
  font-size:9px;
  letter-spacing:2.5px;
  color:#a99472;
}


/* INSIDE PAGE */

.passport-page{
  position:relative;
  box-sizing:border-box;
  min-height:650px;
  padding:45px;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 10%,rgba(212,173,104,.08),transparent 25%),
    #efe6d3;
  color:#172a2c;
}

.passport-page::before{
  content:"URUKHOMBA";
  position:absolute;
  right:-80px;
  bottom:110px;
  font-family:Georgia,serif;
  font-size:82px;
  letter-spacing:12px;
  transform:rotate(-55deg);
  color:rgba(18,65,61,.035);
  pointer-events:none;
}

.passport-page-heading{
  position:relative;
  z-index:1;
  border-bottom:1px solid rgba(39,72,69,.25);
  padding-bottom:19px;
}

.passport-page-heading span{
  font-size:9px;
  letter-spacing:3px;
  color:#8d6a31;
}

.passport-page-heading h2{
  margin:7px 0 5px;
  font-family:Georgia,serif;
  font-weight:400;
  font-size:30px;
  color:#173a37;
}

.passport-page-heading p{
  margin:0;
  font-size:11px;
  color:#67716e;
}


/* IDENTITY */

.passport-identity{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:150px 1fr;
  gap:28px;
  margin-top:28px;
}

.passport-principle-mark{
  min-height:180px;
  border:1px solid rgba(32,74,69,.35);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:rgba(255,255,255,.24);
}

.passport-principle-mark div{
  width:72px;
  height:72px;
  border:1px solid #9a763a;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  font-size:35px;
  color:#8f6c31;
}

.passport-principle-mark span{
  font-size:8px;
  letter-spacing:2px;
  color:#7c837e;
}

.passport-principle-mark strong{
  margin-top:5px;
  font-family:Georgia,serif;
  font-size:15px;
  font-weight:400;
  color:#234b46;
}

.passport-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 22px;
}

.passport-details div{
  border-bottom:1px solid rgba(30,67,64,.2);
  padding-bottom:9px;
}

.passport-details span{
  display:block;
  margin-bottom:5px;
  font-size:8px;
  letter-spacing:1.5px;
  color:#7a817c;
}

.passport-details strong{
  font-family:Georgia,serif;
  font-size:15px;
  font-weight:400;
  color:#173a37;
}


/* QUOTE */

.passport-page blockquote{
  position:relative;
  z-index:1;
  margin:28px 0;
  padding:15px 20px;
  border-left:2px solid #a98243;
  background:rgba(22,66,61,.045);
  font-family:Georgia,serif;
  font-size:18px;
  font-style:italic;
  color:#35504d;
}


/* OATH */

.passport-oath{
  position:relative;
  z-index:1;
}

.passport-oath > span,
.passport-discovery > span{
  display:block;
  font-size:8px;
  letter-spacing:2.5px;
  color:#906e35;
}

.passport-oath p{
  margin:10px 0;
  font-family:Georgia,serif;
  font-size:13px;
  line-height:1.55;
  color:#465a57;
}


/* DISCOVERIES */

.passport-discovery{
  position:relative;
  z-index:1;
  margin-top:22px;
  padding:15px 17px;
  border:1px solid rgba(39,72,69,.22);
  background:rgba(255,255,255,.18);
}

.passport-discovery strong{
  display:block;
  margin:5px 0 2px;
  font-family:Georgia,serif;
  font-size:21px;
  font-weight:400;
  color:#173a37;
}

.passport-discovery p{
  margin:0;
  font-size:10px;
  color:#6b7470;
}


/* ACTIONS */

.passport-actions{
  position:relative;
  z-index:1;
  display:flex;
  gap:9px;
  margin-top:25px;
}

.passport-actions .btn{
  flex:1;
  font-size:9px;
}

.passport-fictional-notice{
  position:relative;
  z-index:1;
  display:block;
  margin-top:18px;
  text-align:center;
  font-size:7px;
  letter-spacing:1.4px;
  color:#8a8e88;
}


/* MOBILE */

@media(max-width:850px){

  .urukhomba-passport-shell{
    padding-top:80px;
  }

  .passport-document{
    grid-template-columns:1fr;
  }

  .passport-cover{
    min-height:430px;
    border-right:0;
    border-bottom:1px solid rgba(212,173,104,.4);
  }

  .passport-page{
    padding:30px 22px;
  }

  .passport-identity{
    grid-template-columns:1fr;
  }

  .passport-principle-mark{
    min-height:150px;
  }

  .passport-actions{
    flex-direction:column;
  }

}

@media(max-width:520px){

  .passport-details{
    grid-template-columns:1fr;
  }

  .passport-cover h2{
    font-size:38px;
  }

}