/* ============================================================
   RAY'S PORTFOLIO — TWILIGHT SUNSET Y2K
   Handmade personal-web styling: late-2000s blog / Neocities.
   Mostly flat colors. Gradients are reserved for small UI buttons.
   ============================================================ */

:root{
  --night:#2b2138;
  --night-2:#352743;
  --plum:#49314f;
  --plum-2:#5c3b59;
  --panel:#533a55;
  --panel-2:#63445e;
  --inset:#3c2d48;
  --peach:#ffad66;
  --coral:#df6e73;
  --rose:#c85f7d;
  --gold:#ffd45f;
  --cream:#f0d0b0;
  --text:#f2d8c4;
  --muted:#d6a995;
  --faint:#ac7d82;
  --line:#9f6375;
  --line-soft:#775065;
  --topbar-h:72px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-top:var(--topbar-h);
  background-color:var(--night);
  color:var(--text);
  font-family:Verdana,Arial,sans-serif;
  font-size:15px;
  line-height:1.6;

  background-image:url("https://media1.tenor.com/m/xfsFj7A6lJMAAAAd/galaxy.gif");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:var(--gold);
  text-decoration:underline;
}

a:visited{
  color:#e5a0aa;
}

a:hover{
  color:var(--peach);
  text-decoration-style:wavy;
}

h1,
h2,
h3,
h4{
  font-family:"Trebuchet MS",Verdana,sans-serif;
  line-height:1.2;
}

p{
  margin:.45em 0 1em;
}

ul{
  margin:.4em 0 1em;
  padding-left:20px;
}

::selection{
  background:var(--coral);
  color:var(--night);
}


/* ============================================================
   FIXED TOP NAV
   ============================================================ */

.top-bar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;

  min-height:var(--topbar-h);

  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  padding:12px 16px;

  background:var(--inset);

  border-bottom:2px solid var(--coral);

  box-shadow:0 3px 0 var(--plum);
}

.top-logo{
  color:var(--peach);
  text-decoration:none;
  font-weight:bold;
  font-family:Georgia,serif;
  font-size:16px;
  white-space:nowrap;
}

.main-nav{
  display:flex;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
}

.main-nav::-webkit-scrollbar{
  display:none;
}

.main-nav a{
  display:inline-block;
  white-space:nowrap;

  color:var(--cream);
  text-decoration:none;
  font-weight:bold;
  font-size:13px;

  padding:9px 15px;

  border:1px solid #b56d76;
  border-top-color:#ffb36b;
  border-left-color:#ffb36b;
  border-right-color:#6c4058;
  border-bottom-color:#6c4058;

  background:linear-gradient(#87536b,#674057);
}

.main-nav a:hover,
.main-nav a.active{
  color:#fff0dc;
  background:linear-gradient(#f08a6e,#a8516c);
  text-decoration:none;
}


/* ============================================================
   PAGE
   ============================================================ */

.page-wrap{
  width:min(900px,calc(100% - 24px));
  margin:24px auto 0;
  padding:0 0 34px;

  flex:1 0 auto;
}


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

.site-header{
  position:relative;

  text-align:center;

  background:var(--plum);

  border:2px solid var(--line);
  border-top-color:var(--peach);
  border-left-color:var(--peach);

  padding:20px 16px 13px;
  margin-bottom:10px;

  box-shadow:5px 5px 0 #21192d;
}

.site-header::before,
.site-header::after{
  content:"✦";

  position:absolute;
  top:8px;

  color:var(--gold);
  font-size:12px;
}

.site-header::before{
  left:12px;
}

.site-header::after{
  right:12px;
}

.site-title{
  color:#ffb06d;

  font:
    700
    31px
    Georgia,
    "Times New Roman",
    serif;

  text-shadow:2px 2px 0 #6b3855;
  letter-spacing:.02em;
}

.twinkle{
  color:var(--gold);
}

.tagline{
  margin-top:5px;

  color:var(--muted);

  font:
    12px
    "Courier New",
    monospace;

  letter-spacing:.13em;
  text-transform:uppercase;
}

.welcome-marquee{
  display:block;

  margin:12px auto 0;
  padding:5px 8px;

  max-width:620px;

  background:var(--inset);
  color:var(--cream);

  border:1px dashed var(--coral);

  font-size:13px;
}


/* ============================================================
   Y2K BLOG LAYOUT
   ============================================================ */

.home-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 205px;
  gap:10px;
  align-items:start;
}

.home-main,
.home-side{
  min-width:0;
}

.sidebox{
  margin:0 0 10px;

  background:var(--panel);

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

  box-shadow:3px 3px 0 #261d31;
}

.sidebox-title{
  padding:5px 7px;

  background:var(--coral);
  color:#40283d;

  font-weight:bold;
  font-size:13px;

  text-transform:uppercase;
  letter-spacing:.06em;

  border-bottom:1px solid #9e4c61;
}

.sidebox-body{
  padding:8px;

  font-size:13px;
  color:var(--text);
}

.sidebox-body p:last-child{
  margin-bottom:0;
}

.status-table{
  width:100%;

  border-collapse:collapse;

  font-size:12px;
}

.status-table td{
  padding:3px 4px;

  border-bottom:1px dotted var(--line-soft);
}

.status-table td:first-child{
  width:40%;

  color:var(--peach);
  font-weight:bold;
}

.mini-links a{
  display:block;

  padding:4px 5px;

  border-bottom:1px dotted var(--line-soft);

  text-decoration:none;
}

.mini-links a:hover{
  background:var(--inset);
}


/* ============================================================
   CARDS
   ============================================================ */

.card{
  background:var(--panel);

  border:1px solid var(--line);
  border-top-color:#b77579;
  border-left-color:#b77579;

  padding:14px 16px;
  margin:0 0 10px;

  box-shadow:3px 3px 0 #261d31;
}

.card:nth-of-type(even){
  background:var(--panel-2);
}

.card h2{
  color:var(--gold);

  font-size:20px;

  margin:-4px 0 10px;
  padding-bottom:5px;

  border-bottom:1px dotted var(--line);
}

.card h3{
  color:var(--peach);

  font-size:17px;

  margin:14px 0 6px;
}

.card small{
  color:var(--muted);
}

.tag,
.chip{
  display:inline-block;

  background:var(--inset);
  color:var(--cream);

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

  padding:2px 6px;
  margin:2px;

  font:
    10px
    "Courier New",
    monospace;
}

.chip-row{
  margin-top:7px;
}


/* ============================================================
   BIO
   ============================================================ */

.bio-grid{
  display:grid;
  grid-template-columns:150px 1fr;

  gap:14px;

  align-items:start;
}

.bio-grid .art-frame{
  aspect-ratio:1 / 1;
}

.bio-grid img{
  width:100%;
  height:100%;

  object-fit:cover;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn-row{
  display:flex;
  flex-wrap:wrap;

  gap:6px;

  margin:10px 0 2px;
}

.btn,
.back-to-top{
  display:inline-block;

  padding:6px 10px;

  color:#fff2df !important;

  text-decoration:none !important;

  font-weight:bold;
  font-size:13px;

  border:1px solid #6d4055;
  border-top-color:#ffb36b;
  border-left-color:#ffb36b;

  background:linear-gradient(#f28a63,#a65067);

  box-shadow:1px 1px 0 #261d31;
}

.btn:hover,
.back-to-top:hover{
  filter:brightness(1.08);
}

.btn.red{
  background:linear-gradient(#cf6980,#96455f);
}

.btn.yellow{
  background:linear-gradient(#ffd45f,#e9a94f);

  color:#4a3044 !important;
}

.btn.ghost{
  background:linear-gradient(#72506c,#51374f);
}


/* ============================================================
   LISTS
   ============================================================ */

.simple-list{
  list-style:none;
  padding-left:0;
}

.simple-list li{
  position:relative;

  padding:4px 0 4px 18px;
}

.simple-list li::before{
  content:"★";

  position:absolute;

  left:1px;
  top:7px;

  color:var(--coral);

  font-size:9px;
}


/* ============================================================
   STAMPS
   ============================================================ */

.stamp-frame{
  background:var(--inset);

  border:1px dashed var(--line);

  padding:8px;

  max-height:330px;

  overflow:auto;
}

.stamp-grid{
  display:flex;
  flex-wrap:wrap;

  gap:3px;

  justify-content:center;
}

.stamp-grid img{
  height:50px;
  width:auto;

  border:0;

  background:transparent;
}


/* ============================================================
   ART / GALLERY
   ============================================================ */

.art-frame{
  position:relative;

  background:var(--inset);

  border:3px double var(--line);

  overflow:hidden;

  aspect-ratio:1 / 1;

  cursor:pointer;
}

.art-frame.no-click{
  cursor:default;
}

.art-frame img{
  width:100%;
  height:100%;

  object-fit:cover;

  opacity:0;

  transition:opacity .2s ease;
}

.art-frame img.is-loaded{
  opacity:1;
}

.frame-caption{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:3px 5px;

  background:rgba(53,39,67,.88);

  color:var(--cream);

  font-size:11px;
}

.art-frame.loading::before,
.art-frame.missing::before{
  position:absolute;

  inset:0;

  display:grid;
  place-items:center;

  text-align:center;

  padding:8px;

  color:var(--muted);

  font:
    12px
    "Courier New",
    monospace;
}

.art-frame.loading::before{
  content:"loading image...";
}

.art-frame.missing::before{
  content:"image file goes here ✦";

  color:var(--peach);
}

.art-frame.missing::after{
  content:attr(data-expect);

  position:absolute;

  left:5px;
  right:5px;
  bottom:5px;

  color:var(--faint);

  font:
    10px
    "Courier New",
    monospace;

  text-align:center;

  word-break:break-all;
}

.gallery-section{
  margin:0 0 22px;
}

.gallery-grid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(125px,1fr)
    );

  gap:7px;
}


/* ============================================================
   IMAGE HOVER
   ============================================================ */

.commissions-page .gallery-grid .art-frame,
.gallery-page .gallery-grid .art-frame{
  transition:transform .18s ease;

  transform-origin:center;
}

.commissions-page .gallery-grid .art-frame:hover,
.gallery-page .gallery-grid .art-frame:hover{
  transform:scale(1.045);

  z-index:2;
}


/* ============================================================
   LINKS PAGE
   ============================================================ */

.badge-grid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(135px,1fr)
    );

  gap:7px;
}

.badge-link{
  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  min-height:88px;

  padding:10px 8px;

  background:var(--inset);

  border:1px solid var(--line-soft);
  border-top-color:#a56a78;
  border-left-color:#a56a78;

  color:var(--gold);

  text-align:center;

  font-weight:bold;

  text-decoration:none;

  transition:
    transform .18s ease,
    background-color .18s ease,
    color .18s ease;

  transform-origin:center;
}

.badge-link span{
  display:block;

  width:100%;

  text-align:center;

  line-height:1.25;
}

.link-icon{
  display:block;

  width:100%;

  margin:0 0 8px;

  text-align:center;

  font-size:2em;
  line-height:1;

  transition:
    transform .18s ease,
    filter .18s ease;
}

.badge-link:hover{
  background:var(--plum);

  color:var(--peach);

  transform:scale(1.045);

  z-index:2;
}

.badge-link:hover .link-icon{
  transform:scale(1.15);
}


/* ============================================================
   LINK SERVICE COLORS
   ============================================================ */

.badge-link:nth-child(1) .link-icon{
  color:#ff6b35;
}

.badge-link:nth-child(2) .link-icon{
  color:#ff5e5b;
}

.badge-link:nth-child(3) .link-icon{
  color:#629aa9;
}

.badge-link:nth-child(4) .link-icon{
  color:#7aa8c2;
}

.badge-link:nth-child(5) .link-icon{
  color:#e1306c;
}

.badge-link:nth-child(6) .link-icon{
  color:#25f4ee;
}

.badge-link:nth-child(7) .link-icon{
  color:#1da1f2;
}

.badge-link:nth-child(8) .link-icon{
  color:#1185fe;
}

.badge-link:nth-child(9) .link-icon{
  color:#ff0033;
}

.badge-link:nth-child(10) .link-icon{
  color:#f5a623;
}

.badge-link:nth-child(11) .link-icon{
  color:#05cc47;
}

.badge-link:nth-child(12) .link-icon{
  color:#ef6c62;
}


/* ============================================================
   MISC CONTENT
   ============================================================ */

.cw-note{
  background:var(--inset);

  border:1px dashed var(--coral);

  color:#f2b1a0;

  padding:8px 10px;
}

.video-frame{
  position:relative;

  width:100%;

  padding-top:56.25%;

  background:var(--inset);

  border:3px double var(--line);

  overflow:hidden;
}

.video-frame iframe{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  border:0;
}

.widget-frame{
  background:var(--inset);

  border:1px dashed var(--line);

  padding:10px;
}


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

#lightbox{
  position:fixed;

  inset:0;

  z-index:200;

  background:rgba(43,33,56,.88);

  display:none;

  align-items:center;
  justify-content:center;

  padding:18px;
}

#lightbox.open{
  display:flex;
}

.lb-inner{
  max-width:min(850px,94vw);
  max-height:90vh;

  background:var(--panel);

  border:3px double var(--peach);

  box-shadow:8px 8px 0 #21192d;

  overflow:auto;
}

.lb-bar,
.lb-nav{
  display:flex;

  justify-content:space-between;
  align-items:center;

  padding:7px;

  background:var(--inset);

  color:var(--cream);

  font-size:12px;
}

.lb-inner img{
  max-height:72vh;

  margin:auto;

  object-fit:contain;
}

.lb-bar button,
.lb-nav button{
  background:var(--plum);

  color:var(--cream);

  border:1px outset var(--line);

  padding:4px 8px;

  cursor:pointer;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{
  width:100%;

  margin:auto 0 0;

  padding:12px 18px;

  flex-shrink:0;

  display:flex;

  justify-content:center;
  align-items:center;

  gap:12px;

  flex-wrap:wrap;

  background:var(--inset);

  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);

  text-align:center;

  color:var(--muted);

  font-size:12px;
}

.site-footer p{
  margin:0;
}


/* ============================================================
   PRICE SHEET
   ============================================================ */

#price-sheet-gallery{
  width:min(300px,100%);

  margin-left:auto;
  margin-right:auto;

  grid-template-columns:
    minmax(180px,300px) !important;
}


/* ============================================================
   HELPERS
   ============================================================ */

.center{
  text-align:center;
}

.mt-0{
  margin-top:0;
}

hr{
  border:0;

  border-top:1px dashed var(--line);

  margin:14px 0;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:720px){

  .top-bar{
    justify-content:flex-start;
  }

  .top-logo{
    display:none;
  }

  .main-nav{
    width:100%;
  }

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

  .home-side{
    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:8px;
  }

  .sidebox{
    margin:0;
  }

  .site-title{
    font-size:25px;
  }
}

@media(max-width:500px){

  body{
    font-size:14px;
  }

  .page-wrap{
    width:min(100% - 12px,900px);

    margin-top:12px;
  }

  .main-nav a{
    padding:8px 9px;

    font-size:12px;
  }

  .home-side{
    grid-template-columns:1fr;
  }

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

  .bio-grid .art-frame{
    max-width:180px;

    margin:auto;
  }

  .card{
    padding:12px;
  }

  .gallery-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .site-footer{
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

}