/* 
    ________________________________________________________
    > 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;
  --lg:                     'Corinthia',cursive;
  --titlefont:              'Old Standard TT', serif;
  --tagline:                'Bebas Neue', sans-serif;
}

* {
  box-sizing:               border-box;
}

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

body {
  background:               var(--background);
  color:                    var(--text);
  font-family:              var(--font);
  font-size:                10px;
  line-height:              1.55;
}

a {
  color:                    inherit;
  text-decoration:          none;
}

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

::-webkit-scrollbar-track {
  background:               var(--background);
  box-shadow:               0 0 8px rgba(141,184,232,.35),
                            0 0 16px rgba(141,184,232,.12);
}

::-webkit-scrollbar-thumb {
  background:               var(--space-thistle);
  box-shadow:               0 0 8px rgba(141,184,232,.35),
                            0 0 16px rgba(141,184,232,.12);
}


/* ________________________________________________________
   -- Main wrapper -- 
   ________________________________________________________ */
.home {
  width:                    100%;
  padding:                  10px;
}

.hero {
  position:                 relative;
  overflow:                 hidden;
  min-height:               155px;
  padding:                  22px 20px 18px;
  border:                   1px solid var(--border);
  box-shadow:               inset 0 0 30px rgba(155, 122, 199, 0.08);
}

.hero::before,
.hero::after {
  position:                 absolute;
  content:                  ";
  font-size:                13px;
}

.hero::before {
  top:                      13px;
  right:                    24px;
  color:                    var(--space-gold);
}

.hero::after {
  bottom:                   18px;
  left:                     14px;
  color:                    rgba(244, 192, 86, 0.6);
}

.eyebrow {
  margin:                   0 0 3px;
  color:                    var(--space-blue);
  font-size:                9px;
  letter-spacing:           2px;
  text-transform:           uppercase;
}

.hero h1 {
  margin:                   0;
  color:                    var(--space-thistle);
  font-family:              var(--lg);
  font-size:                75px;
  line-height:              0.95;
}

.hero h1 span {
  color:                    var(--space-lilac);
  font-size:                19px;
  vertical-align:           13px;
  margin-left:              3px;
}

.tagline {
  margin:                   9px 0 0;
  color:                    var(--space-lilac);
  font-family:              var(--tagline);
  font-size:                14px;
  letter-spacing:           2px;
}

.hero-copy {
  max-width:                390px;
  margin:                   13px 0 0;
  color:                    var(--text);
  font:                     var(--font);
}

.section-label {
  display:                  flex;
  align-items:              center;
  gap:                      6px;
  margin-bottom:            8px;
  color:                    var(--accent-2);
  font-size:                9px;
  font-weight:              bold;
  letter-spacing:           1.3px;
  text-transform:           uppercase;
}

.section-label i {
  color:                    var(--accent);
}

/* ------------------------------------------------------------
   HOME GRID
   ------------------------------------------------------------ */
.home-grid {
  display:                  grid;
  grid-template-columns:    1.15fr 0.85fr;
  gap:                      8px;
  margin-top:               8px;
}

/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */
.home-card {
  min-width:                0;
  padding:                  13px;
  border:                   1px solid var(--border);
  background:               var(--panel);
}

.home-card h2 {
  margin:                   0 0 7px;
  color:                    var(--accent);
  font-family:              var(--tagline);
  font-size:                18px;
  font-weight:              normal;
}

.home-card p {
  margin:                   0 0 8px;
  color:                    #d4d0dc;
}

/* ------------------------------------------------------------
   UPDATE
   ------------------------------------------------------------ */
.update-date {
  display:                  block;
  margin-bottom:            2px;
  color:                    var(--space-blue);
  font-size:                9px;
  letter-spacing:           0.4px;
}

/* ------------------------------------------------------------
   LITTLE LIST
   ------------------------------------------------------------ */
.little-list {
  display:                  grid;
  gap:                      5px;
  margin:                   0;
  padding:                  0;
  list-style:               none;
}

.little-list li {
  display:                  flex;
  align-items:              center;
  gap:                      7px;
  padding:                  5px 7px;
  border-left:              2px solid var(--space-purple);
  background:               rgba(23, 16, 68, 0.55);
}

.little-list i {
  width:                    14px;
  color:                    var(--accent-2);
  text-align:               center;
}

/* ------------------------------------------------------------
   EXPLORE
   ------------------------------------------------------------ */
.explore {
  margin-top:               8px;
  padding:                  13px;
  border:                   1px solid var(--border);
  background:               var(--panel-light);
}

.explore-grid {
  display:                  grid;
  grid-template-columns:    repeat(4, 1fr);
  gap:                      6px;
}

.explore-item {
  min-height:               58px;
  padding:                  9px 7px;
  border:                   1px solid var(--border);
  background:               var(--panel-highlight);
  text-align:               center;
  transition:               border-color 0.15s ease, transform 0.15s ease;
}

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

.explore-item i {
  display:                  block;
  margin-bottom:            5px;
  color:                    #ffffff;
  font-size:                15px;
}

.explore-item strong {
  display:                  block;
  color:                    var(--text);
  font-family:              var(--tagline);
  font-size:                12px;
  font-weight:              normal;
}

.explore-item small {
  display:                  block;
  margin-top:               1px;  
  color:                    #a9a1b9;
  font-size:                8px;
}

/* ------------------------------------------------------------
   FEATURED ART
   ------------------------------------------------------------ */
.featured {
  margin-top:               8px;
  padding:                  13px;
  border:                   1px solid var(--border);
  background:               var(--panel);
}

.art-grid {
  display:                  grid;
  grid-template-columns:    repeat(3, 1fr);
  gap:                      7px;
}

.art-item {
  display:                  block;
  padding:                  6px;
  background:               var(--background);
  text-align:               center;
}

.art-item:hover {
  border-color:             var(--accent);
}

.art-item img {
  display:                  block;
  width:                    auto;
  height:                   auto;
  image-rendering:          pixelated;
}

.art-item span {
  display:                  block;
  padding-top:              5px;
  color:                    #bdb5ca;
  font-size:                8px;
}

/* =========================================================
   PIXEL PORTFOLIO
   ========================================================= */
.portfolio-page {
  width:                    100%;
  padding:                  10px 5px 40px;
}

.portfolio-header {
  text-align:               center;
  margin-bottom:            30px;
}

.portfolio-header .section-label {
  justify-content:          center;
}

.portfolio-header h1 {
  margin:                   8px 0 4px;
  font-family:              var(--lg);
  font-size:                55px;
  font-weight:              700;
  color:                    var(--accent);
  line-height:              1;
}

.portfolio-header .portfolio-subtitle {
  margin:                   0;
  color:                    var(--space-blue);
  font-size:                11px;
  text-transform:           uppercase;
  letter-spacing:           2px;
  font-family:              var(--tagline);
}

/* =========================================================
   GALLERY PANEL
   ========================================================= */
.gallery-panel {
  background:               var(--space-panel);
  border:                   1px solid var(--border);
  padding:                  22px;
  box-shadow:               0 0 0 1px rgba(254,171,197,.03),
                            0 8px 30px rgba(0,0,0,.18);
}

.gallery-intro {
  margin:                   0 0 22px;
  padding-bottom:           15px;
  border-bottom:            1px solid var(--space-line);
  color:                    var(--text);
  line-height:              1.7;
}

.gallery-intro strong {
  color:                    var(--accent);
}

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

.gallery-grid a {
  width:                    50px;
  height:                   50px;
  display:                  block;
  overflow:                 hidden;
  border-radius:            50%;
  border:                   1px solid var(--border);
  background:               var(--container);
  box-shadow:               0 0 0 2px rgba(155,122,199,.08);
  transition:               transform .25s ease,
                            border-color .25s ease,
                            box-shadow .25s ease;
}

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

.gallery-grid a:hover {
  transform:                scale(1.12);
  border-color:             var(--accent);
  box-shadow:               0 0 8px rgba(254,171,197,.35),
                            0 0 16px rgba(155,122,199,.22);
}

.gallery-grid a:hover img {
  transform:                scale(1.12);
}

.portfolio-back {
  margin-top:               25px;
  text-align:               center;
}

.portfolio-back a {
  color:                    var(--space-blue);
  font-size:                10px;
  letter-spacing:           2px;
}

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

/* =========================================================
   ARTWORK PAGE
   ========================================================= */
.artwork-page {
  width:                    100%;
  padding:                  5px 5px 40px;
}

.artwork-header {
  text-align:               center;
  margin-bottom:            25px;
}

.artwork-header .section-label {
  justify-content:          center;
}

.artwork-header h1 {
  margin:                   8px 0 3px;
  font-family:              var(--lg);
  font-size:                50px;
  font-weight:              700;
  color:                    var(--accent);
  line-height:              1;
}

.artwork-date {
  margin:                   0;
  color:                    var(--space-blue);
  font-size:                10px;
  text-transform:           uppercase;
  letter-spacing:           2px;
}

.artwork-panel {
  display:                  flex;
  justify-content:          center;
  align-items:              flex-start;
  gap:                      12px;
  padding:                  20px;
  background:               var(--space-panel);
  border:                   1px solid var(--border);
  box-shadow:               0 0 0 1px rgba(254,171,197,.03),
                            0 8px 30px rgba(0,0,0,.18);
}

.artwork-display {
  flex:                     0 1 auto;
  min-width:                0;
  text-align:               center;
}

.artwork-display img {
  display:                  block;
  max-width:                100%;
  width:                    auto;
  height:                   auto;
  margin:                   0 auto;
  image-rendering:          pixelated;
  image-rendering:          crisp-edges;
  cursor:                   zoom-in;
}

/* =========================================================
   PALETTE
   ========================================================= */
.palette-columns {
  display:                  flex;
  align-items:              flex-start;
  gap:                      3px;
  padding:                  4px;
  flex:                     0 0 auto;
}

.palette-column {
  display:                  flex;
  flex-direction:           column;
  gap:                      1px;
}

.palette-color {
  width:                    10px;
  height:                   10px;
  border:                   1px solid rgba(255,255,255,.08);
  box-sizing:               border-box;
}

.artwork-click {
  margin:                   14px 0 25px;
  text-align:               center;
  color:                    var(--space-blue);
  font-size:                9px;
  text-transform:           uppercase;
  letter-spacing:           1.5px;
}

.artwork-info {
  display:                  grid;
  grid-template-columns:    1fr 1fr;
  gap:                      15px;
  margin-top:               15px;
}

.info-card {
  background:               var(--space-panel-2);
  border:                   1px solid var(--space-line);
  padding:                  18px;
}

.info-card h2 {
  margin:                   0 0 12px;
  color:                    var(--accent);
  font-size:                11px;
  text-transform:           uppercase;
  letter-spacing:           2px;
}

.info-card p {
  margin:                   0;
  color:                    var(--text);
  line-height:              1.7;
}

.info-card em {
  color:                    var(--space-pink);
}

.details-list {
  list-style:               none;
  margin:                   0;
  padding:                  0;
}

.details-list li {
  margin-bottom:            7px;
  color:                    var(--text);
}

.details-list li::before {
  content:                  "";
  margin-right:             8px;
  color:                    var(--accent);
}

.details-list u {
  color:                    var(--space-blue);
  text-decoration:          none;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.artwork-navigation {
  display:                  grid;
  grid-template-columns:    1fr auto 1fr;
  align-items:              center;
  gap:                      10px;
  margin-top:               28px;
  padding-top:              18px;
  border-top:               1px solid var(--space-line);
}

.artwork-navigation a {
  color:                    var(--space-blue);
  font-size:                9px;
  letter-spacing:           1.5px;
}

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

.artwork-navigation .previous {
  text-align:               left;
}

.artwork-navigation .gallery-link {
  text-align:               center;
  color:                    var(--accent);
}

.artwork-navigation .next {
  text-align:               right;
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
#lightbox {
  position:                 fixed;
  inset:                    0;
  display:                  none;
  background:               rgba(5,3,18,.96);
  z-index:                  9999;
}

#lightbox.open {
  display:                  block;
}

.lightbox-toolbar {
  position:                 absolute;
  top:                      15px;
  left:                     50%;
  transform:                translateX(-50%);
  display:                  flex;
  gap:                      5px;
  z-index:                  100;
}

.lightbox-toolbar button {
  border:                   1px solid var(--border);
  background:               var(--space-panel-2);
  color:                    var(--text);
  padding:                  7px 10px;
  font-family:              var(--font);
  font-size:                9px;
  letter-spacing:           1px;
  text-transform:           uppercase;
  cursor:                   pointer;
  transition:               background .2s ease,
                            color .2s ease,
                            border-color .2s ease;
}

.lightbox-toolbar button:hover {
  background:               var(--accent);
  border-color:             var(--accent);
  color:                    var(--container);
}

#viewer {
  position:                 absolute;
  inset:                    0;
  overflow:                 auto;
  cursor:                   grab;
}

#viewer:active {
  cursor:                   grabbing;
}

#viewer img {
  display:                  block;
  margin:                   75px auto;
  image-rendering:          pixelated;
  image-rendering:          crisp-edges;
  max-width:                none;
}