/* 
    ________________________________________________________
    > 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;

}

* {
  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(--body-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);
}

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


/* ———————————————————————————————————————————————————————
   -- 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:                100%;
  height:               auto;
  object-fit:           contain;
  image-rendering:      pixelated;
}

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


/* =========================================================
   PIXEL PORTFOLIO
   Uses the variables from iframe.css
   ========================================================= */

.portfolio-page {
    width: 100%;
    padding: 10px 5px 40px;
}


/* =========================================================
   HEADER
   ========================================================= */

.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
   ========================================================= */

.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);
}


/* =========================================================
   BACK LINK
   ========================================================= */

.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
   Uses ONLY the Space theme variables from iframe.css
   ========================================================= */

.artwork-page {
    width: 100%;
    padding: 5px 5px 40px;
}


/* =========================================================
   TITLE
   ========================================================= */

.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(--titlefont);
    font-size: 42px;
    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 + PALETTE
   ========================================================= */

.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;

    border: 1px solid var(--border);

    background: var(--container);

    box-shadow:
        0 0 18px rgba(155,122,199,.12);
}


/* =========================================================
   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;
}


/* =========================================================
   CLICK NOTE
   ========================================================= */

.artwork-click {
    margin: 14px 0 25px;

    text-align: center;

    color: var(--space-blue);

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}


/* =========================================================
   INFORMATION
   ========================================================= */

.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
   ========================================================= */

.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);
}


/* =========================================================
   LIGHTBOX VIEWER
   ========================================================= */

#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;
}