/* 
    ________________________________________________________
    > website:      mrsginger.nl/
    > theme:        space
    > designed by:  ladyginger
    > please do NOT remove this credit!
    ________________________________________________________
*/

/* ———————————————————————————————————————————————————————
   -- ROOT SETTINGS -- 
   ——————————————————————————————————————————————————————— */
:root {
  --font-size:              10px;
  --background:             transparent;
  --container:              #130c36;
  --border:                 #2b1a55;
  --text:                   #eeeeee;
  --accent:                 #feabc5;
  --accent-2:               #f4c056;
  --space-blue:             #8db8e8;
  --space-purple:           #9b7ac7;
  --space-pink:             #c77b9d;
  --space-gold:             #f4c056;
  --space-lilac:            #E6E6FA;
  --space-thistle:          #E4C4E2;
  --space-panel:            #100a2c;
  --space-panel-2:          #130c36;
  --space-panel-3:          #171044;
  --space-line:             #2b1a55;
  --font:           		    'Open Sans', sans-serif, 'calibri', verdana, arial;  ;
  --lg:                     'Corinthia',cursive;
  --titlefont:              'Old Standard TT', serif;
  --tagline:                'Bebas Neue', sans-serif;


/* ———————————————————————————————————————————————————————
   -- GLOBAL RESET -- 
   ——————————————————————————————————————————————————————— */
* {
  box-sizing:             border-box;
}

html,body {
  margin:		              0;
  padding:   		          0;
  min-height:		          100%;
}

body {
  background-color:	      var(--background);
  background-image:	      url('https://ladyginger2.neocities.org//space/spacebackgroundrepeat.png');
  color:		              var(--text);
  font-family:	          var(--font);
  font-size:	          	var(--font-size);
  line-height:	          1.5em;
}

/* ———————————————————————————————————————————————————————
   -- LINKS -- 
   ——————————————————————————————————————————————————————— */
a {
  color:                  var(--text);
  text-decoration:        none;
}

a:hover {
  color:                var(--accent);
}

/* -- TEXT -- */
b,strong {
  color:                var(--accent);
  font-family:          var(--titlefont);
  text-shadow:          0 0 5px rgba(254,171,197,.7);
}

i,em {
  color:                var(--accent-2);
}

/* ———————————————————————————————————————————————————————
   -- HEADINGS -- 
   ——————————————————————————————————————————————————————— */
h3 {
  margin:               0 0 15px;
  color:                var(--accent);
  font-family:          var(--titlefont);
  font-size:            1.6em;
  text-shadow:          0 0 5px rgba(254,171,197,.5);
}

/* ———————————————————————————————————————————————————————
   -- SCROLLBAR -- 
   ——————————————————————————————————————————————————————— */
::-webkit-scrollbar {
  width:                3px;
  height:               3px;
}

::-webkit-scrollbar-track {
  background:           var(--background);
}

::-webkit-scrollbar-thumb {
  background:           var(--accent);
}

/* ———————————————————————————————————————————————————————
   -- MAIN CONTAINER -- 
   ——————————————————————————————————————————————————————— */
.container {
  position:             fixed;
  z-index:              400;
  top:                  50%;
  left:                 50%;
  width:                500px;
  height:               610px;
  transform:            translate(-50%, -50%);
  background:           var(--container);
  border:               1px solid var(--border);
  border-radius:        7px;
  box-shadow:           0 0 25px rgba(0,0,0,.65),
                        0 0 20px rgba(254,171,197,.08);
}

/* ———————————————————————————————————————————————————————
   -- SIDEBAR -- 
   ——————————————————————————————————————————————————————— */
.sidebar {
  position:             absolute;
  z-index:              10;
  top:                  0;
  left:                 0;
  width:                498px;
  height:               100%;
  background:           rgba(16,10,44,.95);
  border-radius:        7px 0 0 7px;
  overflow:             visible;
}

.sidebar-tall {
  position:             absolute;
  z-index:              20;
  top:                  15px;
  left:                 -242px;
  width:                210px;
  height:               540px;
  padding:              10px;
  background:           var(--container);
  border:               1px solid var(--border);
  border-radius:        7px 0 0 7px;
  box-shadow:           0 0 15px rgba(0,0,0,.4);
}

.sidebar-tall-img {
  width:                100%;
  height:               100%;
  background-size:      cover;
  background-position:  center;
  background-repeat:    no-repeat;
  border-radius:        5px;
}

/* ———————————————————————————————————————————————————————
   -- TOPBAR -- 
   ——————————————————————————————————————————————————————— */
.sidebar-top {
  position:             absolute;
  z-index:              30;
  top:                  0;
  left:                 0;
  width:                100%;
  height:               50px;
  display:              flex;
  align-items:          center;
  justify-content:      space-between;
  padding:              0 15px;
  background:           rgba(12,6,40,.75);
  border-bottom:        1px solid var(--border);
  border-radius:        7px 0 0 0;
}

/* ———————————————————————————————————————————————————————
   -- NEONSIGN -- 
   ——————————————————————————————————————————————————————— */
.neonsign {
  flex:                 1;
  display:              flex;
  align-items:          center;
  justify-content:      flex-start;
}

.neonsign img {
  display:              block;
  width:                190px;
  height:               auto;
}

.neonsign img:hover {
    transform:          scale(1.02);
}

/* ———————————————————————————————————————————————————————
   -- TOPSTATUS + WEATHER + CLOCK -- 
   ——————————————————————————————————————————————————————— */
.top-status {
  display:              flex;
  align-items:          center;
  gap:                  7px;
  font-size:            9px;
  opacity:              .8;
}

.top-status i {
  color:                var(--accent);
}

#currentTime {
  margin-left:          auto;
  color:                var(--accent);
  font-family:          var(--titlefont);
  font-size:            1.35em;
  font-weight:          700;
  line-height:          1;
  text-shadow:          0 0 7px var(--accent);
}


/* ———————————————————————————————————————————————————————
   -- MAINFRAME -- 
   ——————————————————————————————————————————————————————— */
.mainframe {
  position:             absolute;
  z-index:              2;
  top:                  55px;
  left:                 10px;
  width:                475px;
  height:               550px;
  overflow:             hidden;
  background:           rgba(12,6,40,.6);
  border-radius:        5px;
}

.mainframe iframe {
  display:              block;
  width:                100%;
  height:               100%;
  margin:               0;
  padding:              0;
  border:               none;
  background:           transparent;
}

/* ———————————————————————————————————————————————————————
   -- RIGHT SIDEBAR -- 
   ——————————————————————————————————————————————————————— */
.righttoggle {
  position:             absolute;
  z-index:              60;
  top:                  15px;
  left:                 498px;
  width:                220px;
  height:               540px;
  padding:              15px;
  background:           var(--container);
  border:               1px solid var(--border);
  border-radius:        0 7px 7px 0;
  box-shadow:           0 0 15px rgba(0,0,0,.5);
  opacity:              1;
  transform:            translateX(0);
  pointer-events:       auto;
  transition:           transform .4s ease, opacity .3s ease;
}

.righttoggle:not(.open) {
  opacity:              0;
  transform:            translateX(-100%);
  pointer-events:       none;
}

/* ———————————————————————————————————————————————————————
   -- RIGHT PROFILE -- 
   ——————————————————————————————————————————————————————— */
.sidebar-profile-icon {
  position:             absolute;
  top:                  20px;
  left:                 20px;
  width:                80px;
  height:               115px;
  background-size:      cover;
  background-position:  center;
  background-repeat:    no-repeat;
  border:               1px solid var(--border);
  border-radius:        50px;
}

.sidebar-profile {
  position:             absolute;
  top:                  20px;
  left:                 115px;
  height:               115px;
  display:              flex;
  flex-direction:       column;
  align-items:          flex-start;
  justify-content:      center;
  text-align:           left;
}

.sidebar-profile b {
  color:                var(--accent);
  font-family:          var(--lg);
  font-size:            35px;
  line-height:          1.2;
  text-shadow:          0 0 5px var(--accent);
}

.sidebar-profile i {
  margin-top:           3px;
  color:                var(--accent);
  font-family:          var(--font);
  font-size:            .75em;
  font-style:           normal;
  opacity:              .75;
}

.profile-header {
  position:             absolute;
  top:                  20px;
  left:                 20px;
  right:                20px;
  height:               115px;
  display:              flex;
  align-items:          center;
}

.profile-header .sidebar-profile-icon {
  position:             relative;
  top:                  auto;
  left:                 auto;
  right:                auto;
  flex:                 0 0 80px;
  width:                80px;
  height:               115px;
}

.profile-header .sidebar-profile {
  position:             relative;
  top:                  auto;
  left:                 auto;
  right:                auto;
  width:                auto;
  height:               auto;
  margin-left:          15px;
  display:              flex;
  flex-direction:       column;
  align-items:          flex-start;
  justify-content:      center;
  text-align:           left;
}

/* ———————————————————————————————————————————————————————
   -- SOCIAL LINKS -- 
   ——————————————————————————————————————————————————————— */
.social-links {
  position:             absolute;
  top:                  150px;
  left:                 20px;
  right:                20px;
  height:               25px;
  display:              flex;
  align-items:          center;
  justify-content:      flex-start;
  gap:                  7px;
  z-index:              20;
}

.social-link {
  width:                30px;
  height:               30px;
  display:              flex;
  align-items:          center;
  justify-content:      center;
  padding:              0;
  background:           var(--posts);
  color:                var(--text);
  border:               1px solid var(--border);
  border-radius:        5px;
  text-decoration:      none;
  font-size:            13px;
  transition:           color .25s ease,
                        background .25s ease,
                        border-color .25s ease,
                        box-shadow .25s ease,
                        transform .25s ease;
}

.social-link:hover {
  color:                var(--accent);
  background:           rgba(254,171,197,.08);
  border-color:         var(--accent);
  box-shadow:           0 0 8px rgba(254,171,197,.4);
  transform:            translateY(-2px);
}

.social-link i {
  color:                inherit;
  font-size:            13px;
}

/* ———————————————————————————————————————————————————————
   -- RIGHT CONTENT -- 
   ——————————————————————————————————————————————————————— */
.sidebar-desc {
  position:             absolute;
  z-index:              1;
  left:                 0;
  bottom:               0;
  width:                100%;
  height:               350px;
  padding:              15px 15px 15px 15px;
  overflow:             hidden;
  background:           rgba(12,6,40,.55);
  border-top:           1px solid var(--border);
  border-radius:        0 0 7px 0;
}

.sidebar-content {
  width:                100%;
  height:               100%;
  overflow:             auto;
}

/* ———————————————————————————————————————————————————————
   -- SIDEBAR NAVIGATION -- 
   ——————————————————————————————————————————————————————— */
.sidebar-nav {
  display:              flex;
  flex-direction:       column;
  gap:                  7px;
  width:                100%;
}

.nav-tab {
  position:             relative;
  width:                90%;
  height:               32px;
  display:              flex;
  align-items:          center;
  gap:                  12px;
  padding:              0 12px;
  background:           rgba(19,12,54,.75);
  color:                var(--text);
  border:               1px solid var(--border);
  border-radius:        5px;
  font-family:          var(--font);
  font-size:            9px;
  letter-spacing:       .5px;
  text-transform:       uppercase;
  transition:           color .25s ease,
                        background .25s ease,
                        border-color .25s ease,
                        transform .25s ease,
                        box-shadow .25s ease;
}

.nav-tab i {
  width:                16px;
  text-align:           center;
  color:                var(--accent);
  font-size:            12px;
}

.nav-tab:hover {
  color:                #ffffff;
  background:           rgba(141,184,232,.08);
  border-color:         var(--space-blue);
  transform:            translateX(3px);
  box-shadow:           0 0 8px rgba(141,184,232,.35),
                        0 0 16px rgba(141,184,232,.12);
}

.nav-tab:hover i {
  color:                #ffffff;
  text-shadow:          0 0 6px var(--space-blue),
                        0 0 12px rgba(141,184,232,.6);
}

.rside {
  position:             absolute;
  z-index:              300;
  top:                  0;
  right:                -1px;
  width:                50px;
  height:               100%;
  display:              flex;
  flex-direction:       column;
  align-items:          center;
  justify-content:      center;
  gap:                  8px;
  padding:              10px 5px;
  background:           rgba(12,6,40,.95);
  border-left:          1px solid var(--border);
  border-radius:        0 0 7px 0;
}

/* ———————————————————————————————————————————————————————
   -- POPUPS -- 
   ——————————————————————————————————————————————————————— */
.popup-tab {
  position:             relative;
  width:                35px;
  height:               35px;
  display:              flex;
  align-items:          center;
  justify-content:      center;
  flex-shrink:          0;
  padding:              0;
  background:           var(--posts);
  color:                var(--text);
  border:               1px solid var(--border);
  border-radius:        5px;
  cursor:               pointer;
  transition:           color .3s ease,
                        background-color .3s ease,
                        border-color .3s ease,
                        transform .3s ease,
                        box-shadow .3s ease;
}

.popup-tab:hover {
  color:                var(--accent);
  background:           var(--container);
  border-color:         var(--accent);
  transform:            translateX(-3px);
  box-shadow:           0 0 8px rgba(254,171,197,.4);
}

.popup-tab i {
  color:                inherit;
  font-size:            13px;
}

.popup-tab span {
  position:             absolute;
  z-index:              300;
  right:                40px;
  width:                125px;
  padding:              5px 8px;
  background:           var(--posts);
  color:                var(--text);
  border:               1px solid var(--border);
  font-family:          var(--font);
  font-size:            9px;
  line-height:          1.3em;
  letter-spacing:       .5px;
  text-transform:       uppercase;
  opacity:              0;
  visibility:           hidden;
  pointer-events:       none;
  transition:           opacity .2s ease,
                        visibility .2s ease;
}

.popup-tab:hover span {
  opacity:              1;
  visibility:           visible;
}

/* ———————————————————————————————————————————————————————
   -- POPUP WINDOWS -- 
   ——————————————————————————————————————————————————————— */
.popup-window {
  position:             absolute;
  z-index:              500;
  top:                  50%;
  right:                60px;
  width:                550px;
  min-height:           300px;
  max-height:           600px;
  overflow:             auto;
  padding:              20px;
  background:           var(--posts);
  border:               1px solid var(--accent);
  border-radius:        7px;
  box-shadow:           0 0 20px rgba(0,0,0,.7),
                        0 0 15px rgba(254,171,197,.12);
  transform:            translateY(-50%) translateX(20px);
  opacity:              0;
  visibility:           hidden;
  pointer-events:       none;
  transition:           opacity .3s ease,
                        transform .3s ease,
                        visibility .3s ease;
}

.popup-window.open {
  transform:            translateY(-50%) translateX(0);
  opacity:              1;
  visibility:           visible;
  pointer-events:       auto;
}

.popup-window h3 {
  color:                var(--accent);
}

.popup-window iframe {
  display:              block;
  width:                100%;
  height:               300px;
  border:               none;
}

.popup-close {
  position:             absolute;
  top:                  8px;
  right:                10px;
  width:                25px;
  height:               25px;
  padding:              0;
  background:           transparent;
  border:               none;
  color:                var(--text);
  font-size:            20px;
  cursor:               pointer;
}

.popup-close:hover {
  color:                var(--accent);
  text-shadow:          0 0 5px var(--accent);
}

.pop-text {
  line-height:          1.7em;
}

/* ———————————————————————————————————————————————————————
   -- CLOUDS -- 
   ——————————————————————————————————————————————————————— */
.clouds {
  position:             fixed;
  z-index:              100;
  left:                 0;
  bottom:               0;
  width:                100%;
  height:               155px;
  overflow:             hidden;
  background-image:     url("/space/clouds.png");
  background-repeat:    repeat-x;
  pointer-events:       none;
}

/* ———————————————————————————————————————————————————————
   -- UPDATES POPUP -- 
   ——————————————————————————————————————————————————————— */
.updates-popup {
  width:                400px;
  height:               400px;
  padding:              20px;
}

.updates-header {
  padding-right:        25px;
  margin-bottom:        15px;
  border-bottom:        1px dashed var(--border);
  padding-bottom:       10px;
}

.updates-header h3 {
  margin:               0 0 3px;
  font-family:          var(--titlefont);
  font-size:            2em;
  color:                var(--accent);
}

.updates-header p {
  margin:               0;
  color:                var(--text);
  font-size:            9px;
  opacity:              .65;
}

.updates-paper {
  background:           rgba(12,6,40,.35);
  border:               1px solid var(--border);
  border-radius:        6px;
  padding:              15px;
}

#update-body {
  min-height:           190px;
  line-height:          1.7em;
}

#update-body h4 {
  margin:               0 0 10px;
  padding-bottom:       6px;
  color:                var(--accent);
  font-family:          var(--font);
  font-size:            11px;
  letter-spacing:       1px;
  text-transform:       uppercase;
  border-bottom:        1px dashed var(--border);
}

#update-body h5 {
  margin:               12px 0 5px;
  color:                var(--accent-2);
  font-size:            10px;
}

#update-body p {
  margin:               8px 0;
}

#update-body a {
  color:                var(--accent);
  text-decoration:      underline;
  text-transform:       none;
}

#update-body a:hover {
  color:                var(--accent-2);
}

/* ———————————————————————————————————————————————————————
   -- JOURNAL NAVIGATION -- 
   ——————————————————————————————————————————————————————— */
.journal-nav {
  display:              flex;
  align-items:          center;
  justify-content:      space-between;
  gap:                  8px;
  margin-top:           18px;
  padding-top:          10px;
  border-top:           1px dashed var(--border);
}

.journal-nav button {
  appearance:           none;
  border:               1px solid var(--border);
  border-radius:        4px;
  background:           var(--container);
  color:                var(--text);
  cursor:               pointer;
  padding:              5px 8px;
  font-family:          var(--font);
  font-size:            8px;
  letter-spacing:       .4px;
  transition:           color .2s ease,
                        border-color .2s ease,
                        background .2s ease,
                        transform .2s ease;
}

.journal-nav button:hover:not(:disabled) {
  color:                var(--accent);
  border-color:         var(--accent);
  background:           rgba(254,171,197,.08);
  transform:            translateY(-1px);
}

.journal-nav button:disabled {
  opacity:              .3;
  cursor:               default;
}

#counter {
  flex:                 1;
  text-align:           center;
  color:                var(--text);
  font-size:            8px;
  opacity:              .6;
}

.update-date {
  display:              block;
  margin-bottom:        8px;
  color:                var(--accent-2);
  font-size:            8px;
  letter-spacing:       1px;
  text-transform:       uppercase;
}

.update-tag {
  display:              inline-block;
  margin-bottom:        10px;
  padding:              2px 7px;
  background:           rgba(254,171,197,.08);
  border:               1px solid var(--border);
  border-radius:        3px;
  color:                var(--accent);
  font-size:            8px;
  letter-spacing:       1px;
  text-transform:       uppercase;
}

.about-popup,
.faq-popup {
  overflow-y:           auto;
  scrollbar-width:      thin;
}

.about-popup-header,
.faq-popup-header {
  margin-bottom:        12px;
}

.about-popup-header h3,
.faq-popup-header h3 {
  margin-bottom:        2px;
}

.about-popup-header p,
.faq-popup-header p {
  margin:               0;
  font-size:            10px;
  opacity:              .7;
}

.about-popup-tabs {
  display:              flex;
  flex-wrap:            wrap;
  gap:                  5px;
  margin:               12px 0 0;
  border-bottom:        1px solid var(--space-line);
}

.about-popup-tab {
  appearance:           none;
  border:               1px solid var(--space-line);
  border-bottom:        none;
  background:           var(--space-panel-2);
  color:                var(--text);
  cursor:               pointer;
  font:                 inherit;
  padding:              7px 12px;
  transition:           .2s ease;
  border-radius:        7px 7px 0 0;
}

.about-popup-tab:hover {
  transform:            translateY(-1px);
  color:                var(--accent);
  background:           var(--space-panel-3);
  border-color:         var(--accent);
}

.about-popup-tab.active {
  background:           var(--space-panel-3);
  color:                var(--accent);
  border-color:         var(--accent);
  font-weight:          600;
  box-shadow:           0 -3px 10px rgba(254,171,197,.08);
}

.about-popup-content {
  background:           var(--space-panel);
  border:               1px solid var(--space-line);
  border-top:           none;
  border-radius:        0 10px 10px 10px;
  padding:              12px;
}

.about-popup-panel {
  display:              none;
  animation:            space3PopupFade .2s ease;
}

.about-popup-panel.active {
  display:              block;
}

@keyframes space3PopupFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ———————————————————————————————————————————————————————
   -- ABOUT POPUP -- 
   ——————————————————————————————————————————————————————— */
.about-intro-card {
  display:              grid;
  grid-template-columns: 90px 1fr;
  gap:                  12px;
  align-items:          center;
  background:           var(--space-panel-2);
  border:               1px solid var(--space-line);
  border-radius:        10px;
  padding:              10px;
  margin-bottom:        12px;
}

.about-intro-image {
  width:                90px;
  height:               110px;
  border-radius:        8px;
  overflow:             hidden;
  background:           var(--space-panel-3);
  border:               1px dashed var(--space-purple);
}

.about-intro-image img {
  width:                100%;
  height:               100%;
  object-fit:           cover;
  image-rendering:      auto;
}

.about-intro-card h4 {
  margin:               0 0 2px;
  font-size:            16px;
  color:                var(--accent);
  font-family:          var(--titlefont);
}

.about-tagline {
  font-size:            9px;
  font-style:           italic;
  text-align:           right;
  opacity:              .75;
  margin-bottom:        8px;
  color:                var(--space-blue);
}

.about-intro-card p {
  margin:               0;
  line-height:          1.7;
}

/* ———————————————————————————————————————————————————————
   -- ABOUT CARDS -- 
   ——————————————————————————————————————————————————————— */
.about-card-grid {
  display:              grid;
  grid-template-columns: 1fr 1fr;
  gap:                  10px;
}

.about-card {
  position:             relative;
  background:           var(--space-panel-2);
  border:               1px solid var(--space-line);
  border-radius:        10px;
  padding:              12px;
  font-size:            10px;
}

.about-card:hover {
  border-color:         var(--space-purple);
  box-shadow:           0 0 10px rgba(155,122,199,.08);
}

.about-card p {
  margin:               0 0 9px;
  line-height:          1.7;
}

.about-card p:last-child {
  margin-bottom:        0;
}

.about-label {
  display:              inline-block;
  background:           rgba(199,123,157,.16);
  border:               1px solid rgba(199,123,157,.35);
  color:                var(--accent);
  padding:              3px 9px;
  border-radius:        4px;
  font-size:            9px;
  letter-spacing:       1px;
  margin-bottom:        9px;
  transform:            rotate(-1deg);
  font-weight:          700;
}

.about-card:nth-child(2) .about-label {
  background:           rgba(155,122,199,.16);
  border-color:         rgba(155,122,199,.35);
  color:                #b99bdd;
}

.about-card:nth-child(3) .about-label {
  background:           rgba(244,192,86,.13);
  border-color:         rgba(244,192,86,.30);
  color:                var(--accent-2);
}

.about-card:nth-child(4) .about-label {
  background:           rgba(141,184,232,.13);
  border-color:         rgba(141,184,232,.30);
  color:                var(--space-blue);
}

.about-list {
  list-style:           none;
  padding:              0;
  margin:               2px 0 0;
}

.about-list li {
  margin-bottom:        5px;
  display:              flex;
  align-items:          flex-start;
  line-height:          1.6;
}

.about-list.likes li::before {
  content:              "✓";
  color:                #8bc99c;
  font-weight:          bold;
  margin-right:         8px;
}

.about-list.dislikes li::before {
  content:              "x";
  color:                #d88a9f;
  font-weight:          bold;
  margin-right:         8px;
}

/* ———————————————————————————————————————————————————————
   -- MUSIC TAB -- 
   ——————————————————————————————————————————————————————— */
.music-card {
  background:           var(--space-panel-2);
  border:               1px solid var(--space-line);
  border-radius:        10px;
  padding:              14px;
}

.music-card .about-label {
  background:           rgba(244,192,86,.13);
  border-color:         rgba(244,192,86,.30);
  color:                var(--accent-2);
}

.music-song {
  display:              flex;
  justify-content:      space-between;
  align-items:          center;
  gap:                  10px;
  padding:              9px 2px;
  border-top:           1px dashed var(--space-line);
  text-decoration:      none;
  color:                var(--accent);
  transition:           .2s ease;
}ab

.music-song:first-of-type {
  border-top:           none;
}

.music-song span {
  color:                inherit;
}

.music-song:hover {
  padding-left:         7px;
  color:                var(--space-gold);
  background:           rgba(254,171,197,.04);
}

.music-song small {
  color:                var(--space-blue);
  opacity:              .75;
}

/* ———————————————————————————————————————————————————————
   -- TRAVEL TAB -- 
   ——————————————————————————————————————————————————————— */
.travel-info {
  background:           var(--space-panel-2);
  border:               1px solid var(--space-line);
  border-radius:        10px;
  padding:              14px;
}

.travel-content {
  display:              grid;
  grid-template-columns: 1fr 1fr;
  gap:                  18px;
  margin-top:           10px;
}

.travel-section h4 {
  margin:               0 0 7px;
  font-size:            11px;
  letter-spacing:       1px;
}

.travel-section ul {
  margin:               0;
  padding-left:         17px;
  line-height:          1.8;
}

.travel-scroll {
  max-height:           150px;
  overflow-y:           auto;
  padding-right:        5px;
}

.travel-stats {
  display:              grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                  8px;
  margin-top:           14px;
}

.travel-stat {
  background:           var(--space-panel-3);
  border:               1px solid var(--space-line);
  border-radius:        9px;
  padding:              9px 5px;
  text-align:           center;
}

.travel-stat:hover {
  border-color:         var(--space-purple);
}

.travel-stat span {
  display:              block;
  font-size:            17px;
  margin-bottom:        3px;
}

.travel-stat strong {
  display:              block;
  font-size:            14px;
  margin-bottom:        2px;
  color:                var(--accent);
}

.travel-stat small {
  font-size:            8px;
  letter-spacing:       .7px;
  text-transform:       uppercase;
}

.travel-note {
  font-size:            9px;
  opacity:              .65;
  margin:               8px 2px 0;
}

/* ———————————————————————————————————————————————————————
   -- FAQ POPUP -- 
   ——————————————————————————————————————————————————————— */
.faq-popup .faq-grid {
  display:              grid;
  grid-template-columns: 1fr 1fr;
  gap:                  10px;
}

.faq-popup .faq-card {
  background:           var(--space-panel-2);
  border:               1px solid var(--space-line);
  border-radius:        10px;
  padding:              12px;
}

.faq-popup .faq-card:hover {
  border-color:         var(--space-purple);
  box-shadow:           0 0 10px rgba(155,122,199,.08);
}

.faq-popup .faq-question {
  border-top:           1px dashed var(--space-line);
  padding:              9px 0;
}

.faq-popup .faq-question:first-of-type {
  border-top:           none;
}

.faq-popup .faq-row {
  display:              flex;
  justify-content:      space-between;
  align-items:          center;
  gap:                  8px;
  cursor:               pointer;
  font-weight:          600;
  color:                var(--text);
}

.faq-popup .faq-row:hover {
  color: var(--accent);
}

.faq-popup .faq-arrow {
  transition:           .25s;
  color:                var(--space-purple);
  flex-shrink:          0;
}

.faq-popup .faq-answer {
  max-height:           0;
  overflow:             hidden;
  transition:           .3s ease;
  padding-left:         15px;
  color:                #c7c2d6;
  line-height:          1.7;
}

.faq-popup .faq-question.open .faq-answer {
  max-height:           220px;
  overflow-y:           auto;
  margin-top:           3px;
  color:                var(--accent);
}

.faq-popup .faq-question.open .faq-arrow {
  transform:            rotate(90deg);
}

.faq-popup .about-label {
  background:           rgba(141,184,232,.12);
  border-color:         rgba(141,184,232,.28);
  color:                var(--space-blue);
}

/* ———————————————————————————————————————————————————————
   -- GALLERY -- 
   ——————————————————————————————————————————————————————— */
.gallery-container{
	width:		            100%;
	padding:	            15px;
	box-sizing:	          border-box;	}

.gallery-title{
	margin:		            0 0 20px;
	font-size:	          14px;
	text-transform:	      uppercase;
	letter-spacing:	      2px;
	color:		            var(--accent);	}

.gallery-grid{
  display:              grid;
  grid-template-columns:repeat(auto-fill,50px);
  gap:                  15px;
}

.gallery-grid a{
  width:                50px;
  height:               50px;
  overflow:             hidden;
  display:              block;
  border-radius:        50%;
}

.gallery-grid a img{
  width:                100%;
  height:               100%;
  object-fit:           cover;
  object-position:      center;
  display:              block;
  border-radius:        50%;
  transition:           .25s ease;
}

.gallery-grid a:hover img{
  transform:            scale(1.50);
  box-shadow:           0 0 12px var(--accent2);
}

.art-page{
	padding:	            15px;	}

.art-image{
	display:	            block;
	max-width:	          100%;
	margin:	            	0 auto 20px;
	image-rendering:      pixelated;
	image-rendering:      crisp-edges;
}

.art-page h1{
	margin:		            0 0 15px;
	font-size:	          14px;
	text-transform:	      uppercase;
	letter-spacing:	      2px;
	color:		            var(--accent);	
}

.art-info p{
	margin:		            0 0 10px;
	line-height:	        1.5;	
}

.art-image{
	cursor:		            zoom-in;
}

#lightbox{
	position:	            fixed;
	inset:	            	0;
	display:	            none;
	justify-content:      center;
	align-items:	        center;
	background:	          rgba(0,0,0,.9);
	z-index:	            9999;	}

#lightbox.active{
	display:	            flex;	}

#lightbox-image{
	max-width:	          95vw;
	max-height:	          95vh;
	image-rendering:      pixelated;
	image-rendering:      crisp-edges;
	cursor:		            zoom-out;
}