/* =========================================================
   KAELLYNXEN — commission site
   Token system:
   --bg        #0a1420  night-sky navy
   --bg2       #10233a  panel navy
   --gold      #c9a24b  brass trim
   --gold-hi   #f0d489  bright gold highlight
   --hex-green #4fd98a  energy green (signature accent)
   --hex-deep  #1b6b4a  deep green / shadow glow
   --cream     #eee3c8  parchment text on dark panels
   --ink       #1b1710  dark ink for on-cream text
   Display face: 'Cinzel'. Body face: 'Jost'.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Jost:wght@400;500;600&display=swap');

:root{
  --bg:#0a1712;
  --bg2:#0f231c;
  --gold:#c9a24b;
  --gold-hi:#f0d489;
  --hex-green:#4fd98a;
  --hex-deep:#1b6b4a;
  --hex-purple:#9b5de5;
  --hex-purple-deep:#3e2263;
  --cream:#eee3c8;
  --ink:#1b1710;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:
    radial-gradient(ellipse at top, rgba(79,217,138,0.10), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(201,162,75,0.05), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='104'><g stroke='%234fd98a' stroke-width='0.6' fill='none' opacity='0.05'><polygon points='45,2 87,26 87,78 45,102 3,78 3,26'/></g></svg>"),
    var(--bg);
  background-attachment:fixed;
  color:var(--cream);
  font-family:'Jost', sans-serif;
  font-size:17px;
  line-height:1.65;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}

h1,h2,h3{
  font-family:'Cinzel', serif;
  font-weight:700;
  letter-spacing:1px;
  color:var(--gold-hi);
}

a{color:var(--hex-green); text-decoration:none;}
a:hover, a:focus-visible{color:var(--gold-hi); text-decoration:underline;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--hex-green); outline-offset:3px;
}

/* ---------- hex circuit divider (signature motif) ---------- */
.circuit-divider{
  height:22px;
  background-repeat:repeat-x;
  background-size:64px 22px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='22'><g stroke='%23c9a24b' stroke-width='1' fill='none' opacity='0.55'><polygon points='16,3 22,7 22,15 16,19 10,15 10,7' /><line x1='0' y1='11' x2='10' y2='11'/><line x1='22' y1='11' x2='40' y2='11'/><circle cx='48' cy='11' r='3'/><line x1='51' y1='11' x2='64' y2='11'/></g></svg>");
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,23,18,0.94);
  border-bottom:2px solid var(--gold);
  box-shadow:0 2px 16px rgba(79,217,138,0.15);
}
.nav-inner{
  max-width:1040px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  padding:14px 24px; flex-wrap:wrap; gap:12px;
}
.brand{
  margin:0;
  font-family:'Jost', sans-serif;
  font-weight:500;
  font-size:1rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--hex-green);
  text-shadow:0 0 12px rgba(79,217,138,0.35);
}

/* keep old nav styles in case other pages still use them */
nav ul{list-style:none; display:flex; gap:26px; margin:0; padding:0; flex-wrap:wrap;}
nav a{
  font-size:0.95rem; text-transform:uppercase; letter-spacing:2px;
  color:var(--cream);
}
nav a:hover, nav a.active{color:var(--gold-hi);}
nav a.active{border-bottom:1px solid var(--gold-hi); padding-bottom:2px;}

/* ---------- layout ---------- */
main{max-width:1040px; margin:0 auto; padding:40px 24px 70px;}
section{margin-bottom:60px;}

.panel{
  background:linear-gradient(180deg, var(--bg2), rgba(16,35,58,0.5));
  border:1px solid var(--hex-deep);
  padding:28px;
  position:relative;
}
.panel::before, .panel::after{
  content:""; position:absolute; width:14px; height:14px;
  border:1px solid var(--gold); opacity:0.8;
}
.panel::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.panel::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}

/* ---------- hero ---------- */
.hero{text-align:center; padding:70px 20px 50px; position:relative;
  animation:hero-in 0.9s ease both;
}
@keyframes hero-in{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.hero .eyebrow{
  display:inline-block; letter-spacing:4px; text-transform:uppercase;
  font-size:0.8rem; color:var(--hex-green); margin-bottom:16px;
}
.hero h1{font-size:clamp(2.6rem, 7vw, 4.4rem); margin:0 0 16px;}
.hero .tagline{font-size:1.15rem; color:var(--cream); opacity:0.88; max-width:520px; margin:0 auto 30px;}

/* hex power-core glow — signature element */
.power-core{
  width:64px; height:64px; margin:0 auto 22px;
  position:relative;
}
.power-core svg{width:100%; height:100%; filter:drop-shadow(0 0 10px rgba(79,217,138,0.8));}
.power-core .core-ring{animation:core-spin 12s linear infinite; transform-origin:center;}
.power-core .core-glow{animation:core-pulse 2.6s ease-in-out infinite;}
@keyframes core-spin{ to{ transform:rotate(360deg); } }
@keyframes core-pulse{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }

.btn{
  display:inline-block;
  font-family:'Jost', sans-serif; font-weight:600;
  font-size:0.95rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink);
  background:linear-gradient(180deg, var(--gold-hi), var(--gold));
  border:1px solid var(--gold-hi);
  padding:12px 26px;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover, .btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 4px 18px rgba(240,212,137,0.4);
  text-decoration:none;
}
.btn.ghost{
  background:transparent; color:var(--hex-green); border:1px solid var(--hex-green);
}
.btn.ghost:hover, .btn.ghost:focus-visible{
  color:var(--gold-hi); border-color:var(--gold-hi);
  box-shadow:0 4px 18px rgba(240,212,137,0.25);
}

/* ---------- status sign ---------- */
.status-sign{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--hex-green);
  padding:9px 18px;
  font-family:'Cinzel', serif;
  font-size:1.05rem; letter-spacing:1px;
  color:var(--hex-green);
  box-shadow:0 0 14px rgba(79,217,138,0.25) inset;
  margin-bottom:22px;
}
.status-sign.closed{border-color:var(--gold); color:var(--gold);}
.status-sign .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--hex-green); box-shadow:0 0 8px var(--hex-green);
  animation:dot-pulse 2s ease-in-out infinite;
}
.status-sign.closed .dot{background:var(--gold); box-shadow:0 0 8px var(--gold); animation:none;}
@keyframes dot-pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* ---------- grid / cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:20px;}
.card{
  background:var(--bg2);
  border:1px solid var(--hex-deep);
  padding:18px;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover{border-color:var(--gold); box-shadow:0 0 16px rgba(201,162,75,0.2);}
.card h3{font-size:1.15rem; margin:12px 0 6px; letter-spacing:0.5px;}
.card p{margin:0; font-size:0.95rem; opacity:0.8;}

.thumb{
  width:100%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:'Jost',sans-serif; font-size:0.85rem; letter-spacing:1px;
  color:var(--hex-green); text-transform:uppercase;
  border:1px dashed var(--hex-deep);
  background:
    linear-gradient(135deg, rgba(79,217,138,0.06), rgba(201,162,75,0.08));
  overflow:hidden;
}
.thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- price tiers ---------- */
.tier{
  border:1px solid var(--hex-deep);
  background:var(--bg2);
  padding:22px;
  margin-bottom:18px;
}
.tier h3{
  margin:0 0 12px; font-size:1.3rem;
  border-bottom:1px solid var(--gold); padding-bottom:8px;
}
.tier ul{list-style:none; margin:0; padding:0;}
.tier li{
  display:flex; justify-content:space-between;
  padding:7px 0; border-bottom:1px solid rgba(79,217,138,0.15);
  font-size:1rem;
}
.tier li:last-child{border-bottom:none;}
.tier li span:last-child{color:var(--gold-hi); font-weight:600;}

/* ---------- do / don't lists ---------- */
.do-dont{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.do-dont .col{border:1px solid var(--hex-deep); padding:20px;}
.do-dont .col.do{border-color:var(--hex-green);}
.do-dont .col.dont{border-color:var(--gold);}
.do-dont h3{margin-top:0; font-size:1.1rem;}
.do-dont ul{margin:0; padding-left:20px;}
.do-dont li{margin-bottom:6px;}
@media (max-width:560px){ .do-dont{grid-template-columns:1fr;} }

/* ---------- misc ---------- */
.center{text-align:center;}
.small{font-size:0.88rem; opacity:0.75;}
.note{
  border-left:3px solid var(--gold);
  padding:12px 16px;
  background:rgba(201,162,75,0.06);
  font-size:0.95rem;
}
.contact-box{
  display:inline-flex; align-items:center; gap:12px;
  background:rgba(0,0,0,0.25); border:1px solid var(--hex-green);
  padding:10px 16px; font-size:1rem; letter-spacing:1px;
}

footer{
  border-top:2px solid var(--gold);
  padding:28px 20px 44px;
  text-align:center;
  font-size:0.9rem;
  color:var(--cream);
  opacity:0.75;
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(4,12,9,0.9);
  display:none; align-items:center; justify-content:center; z-index:200;
  padding:20px;
}
.lightbox.open{display:flex;}
.lightbox-inner{
  background:var(--bg2); border:1px solid var(--gold);
  padding:22px; max-width:480px; text-align:center;
}
.lightbox .thumb{height:220px; font-size:1rem;}
.lightbox button{margin-top:16px;}

@media (max-width:560px){
  .hero{padding:44px 14px 30px;}
}

/* =========================================================
   COMMISSIONS PAGE — alternating timeline
   ========================================================= */
.back-link{
  display:inline-block; margin-bottom:26px;
  font-family:'Cinzel', serif; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; font-size:0.85rem;
  color:var(--gold-hi);
}
.back-link:hover, .back-link:focus-visible{color:var(--hex-green);}

.page-head{text-align:center; padding:10px 20px 20px;}
.page-head h1{font-size:clamp(2rem, 6vw, 3rem); margin:0 0 10px;}
.page-head .tagline{opacity:0.85; max-width:560px; margin:0 auto;}

.timeline{position:relative; margin:50px 0;}
.timeline::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--gold), var(--hex-green));
  transform:translateX(-50%);
}
.timeline-item{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px;
  margin-bottom:80px;
}
.timeline-item .box-col{grid-column:1;}
.timeline-item .deco-col{grid-column:2; display:flex; align-items:center; justify-content:center;}
.timeline-item.reverse .box-col{grid-column:2;}
.timeline-item.reverse .deco-col{grid-column:1;}

.timeline-node{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid var(--gold);
  box-shadow:0 0 10px var(--hex-green);
}

.commission-box{
  display:block;
  background:var(--bg2);
  border:1px solid var(--hex-deep);
  padding:34px 28px;
  text-align:center;
  text-decoration:none;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position:relative;
}
.commission-box::before, .commission-box::after{
  content:""; position:absolute; width:14px; height:14px;
  border:1px solid var(--gold); opacity:0.8;
}
.commission-box::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.commission-box::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}
.commission-box:hover, .commission-box:focus-visible{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 0 24px rgba(201,162,75,0.25);
  text-decoration:none;
}
.commission-box h2{margin:0 0 10px; font-size:1.7rem;}
.commission-box p{margin:0; font-size:0.95rem; opacity:0.85; color:var(--cream);}

.hex-deco{width:110px; height:110px; opacity:0.65;}

@media (max-width:720px){
  .timeline::before{left:20px;}
  .timeline-item{grid-template-columns:1fr; gap:18px;}
  .timeline-item .box-col, .timeline-item.reverse .box-col{grid-column:1;}
  .timeline-item .deco-col, .timeline-item.reverse .deco-col{display:none;}
  .timeline-node{left:20px;}
}

/* =========================================================
   EXAMPLE SUB-PAGES — YCH (gold) / Price Sheet (green)
   ========================================================= */
.examples-list{display:flex; flex-direction:column; gap:22px; margin-top:10px;}
.example-card{
  border:1px solid var(--hex-deep);
  background:var(--bg2);
  padding:24px;
  opacity:0;
  animation:slide-in 0.5s ease forwards;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.example-card .thumb{
  width:100%;
  max-width:280px;
  aspect-ratio:1/1;
  overflow:hidden;
}
.example-card .thumb.thumb-lg{
  max-width:280px;
}
.example-card .example-body{width:100%; max-width:420px;}
.example-card h3{margin:0 0 8px; text-align:center;}
.example-card p{margin:0; opacity:0.85;}
@media (max-width:560px){
  .example-card .thumb, .example-card .thumb.thumb-lg{max-width:100%; height:auto;}
}
@keyframes slide-in{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
.example-card:nth-child(1){animation-delay:0.05s;}
.example-card:nth-child(2){animation-delay:0.15s;}
.example-card:nth-child(3){animation-delay:0.25s;}
.example-card:nth-child(4){animation-delay:0.35s;}
.example-card:nth-child(5){animation-delay:0.45s;}
.example-card:nth-child(6){animation-delay:0.55s;}

/* YCH page — gold-forward palette */
body.theme-gold{
  background:
    radial-gradient(ellipse at top, rgba(240,212,137,0.10), transparent 60%),
    var(--bg);
}
body.theme-gold .example-card{
  border-color:var(--gold);
  background:linear-gradient(180deg, var(--bg2), rgba(60,45,10,0.15));
}
body.theme-gold .example-card h3{color:var(--gold-hi);}
body.theme-gold .page-head h1{color:var(--gold-hi);}

/* Price Sheet page — emerald / tier layout */
body.theme-green .example-card{
  border-color:var(--hex-green);
  background:linear-gradient(180deg, var(--bg2), rgba(15,40,30,0.4));
}
body.theme-green .tier{border-color:var(--hex-green);}
body.theme-green .tier h3{border-bottom-color:var(--hex-green); color:var(--hex-green);}

/* =========================================================
   GALLERY PAGE — purple accent, button list
   ========================================================= */
body.theme-gallery{
  --bg:#160c26;
  --bg2:#1f1236;
  background:
    radial-gradient(ellipse at top, rgba(155,93,229,0.28), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(79,217,138,0.05), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='104'><g stroke='%239b5de5' stroke-width='0.6' fill='none' opacity='0.08'><polygon points='45,2 87,26 87,78 45,102 3,78 3,26'/></g></svg>"),
    var(--bg);
}
body.theme-gallery .page-head h1{color:var(--gold-hi); text-shadow:0 0 16px rgba(155,93,229,0.3);}
body.theme-gallery .back-link{color:var(--hex-green);}
body.theme-gallery .back-link:hover, body.theme-gallery .back-link:focus-visible{color:var(--gold-hi);}

.gallery-list{
  display:flex; flex-direction:column; gap:18px;
  max-width:440px; margin:40px auto 0;
}
.gallery-btn{
  display:block;
  text-align:center;
  padding:20px 26px;
  font-family:'Cinzel', serif;
  font-size:1.25rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--cream);
  background:linear-gradient(160deg, var(--hex-deep), #0c1f18 70%);
  border:1px solid var(--hex-green);
  text-decoration:none;
  position:relative;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.gallery-btn::before, .gallery-btn::after{
  content:""; position:absolute; width:12px; height:12px;
  border:1px solid var(--gold); opacity:0.8;
}
.gallery-btn::before{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.gallery-btn::after{bottom:-1px; right:-1px; border-left:none; border-top:none;}
.gallery-btn:hover, .gallery-btn:focus-visible{
  transform:translateY(-2px);
  border-color:var(--gold-hi);
  color:var(--gold-hi);
  background:linear-gradient(160deg, var(--hex-green), var(--hex-deep) 70%);
  box-shadow:0 0 22px rgba(79,217,138,0.45);
  text-decoration:none;
}