@import url('https://fonts.googleapis.com/css2?family=Meie+Script&family=Rajdhani:wght@500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

/* ============ TOKENS ============ */
:root{
  /* palette: F1EAEB (pale moonlight) · CD93C2 (starlight mauve) · 928BB1 (dusk lavender) · 373262 (twilight ink) · 201E34 (night sky) */
  --neutral-bg:#201e34;
  --neutral-surface:#373262;
  --neutral-text:#f1eaeb;
  --neutral-muted:#928bb1;
  --neutral-line:rgba(146,139,177,.28);

  --nerd-bg:#201e34;
  --nerd-surface:#373262;
  --nerd-surface-2:color-mix(in srgb, #373262 65%, #201e34);
  --nerd-accent:#cd93c2;
  --nerd-accent2:#928bb1;
  --nerd-text:#f1eaeb;
  --nerd-muted:color-mix(in srgb, #928bb1 70%, #f1eaeb);
  --nerd-line:rgba(146,139,177,.3);

  --ill-bg:#f1eaeb;
  --ill-surface:color-mix(in srgb, #f1eaeb 72%, #cd93c2);
  --ill-surface-2:color-mix(in srgb, #f1eaeb 52%, #cd93c2);
  --ill-accent:#373262;
  --ill-accent2:#928bb1;
  --ill-text:#201e34;
  --ill-muted:color-mix(in srgb, #373262 55%, #f1eaeb);
  --ill-line:rgba(55,50,98,.2);

  --font-display-nerd:'Rajdhani', sans-serif;
  --font-display-ill:'Fraunces', serif;
  --font-body:'Inter', sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--neutral-bg);
  color:var(--neutral-text);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px);}

/* ============ NAV ============ */
.site-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,48px);
  background:color-mix(in srgb, var(--neutral-bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--neutral-line);
}
.logo{
  font-family: "Meie Script", cursive;
  font-weight:400;
  font-size:1.3rem;
  letter-spacing:.06em;
  display:flex;align-items:baseline;gap:.35em;
}
.logo em {
  font-style: normal;
  font-family: var(--font-display-ill);
  font-weight: 600;
  color: var(--nerd-accent2);
}

.logo span{
  font-family: var(--font-display-ill);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45em;
  letter-spacing: 0;
}



.nav-links{display:flex;gap:clamp(16px,3vw,32px);align-items:center;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-size:.92rem;font-weight:500;letter-spacing:.02em;
  color:var(--neutral-muted);
  padding:.4em 0;position:relative;
  transition:color .25s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--neutral-text);}
.nav-links a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,var(--nerd-accent),var(--ill-accent2));
}
.nav-toggle{display:none;background:none;border:none;color:var(--neutral-text);font-size:1.4rem;padding:4px;}

/* theme overrides for nav on themed pages */
body[data-theme="nerd"] .site-nav{background:color-mix(in srgb, var(--nerd-bg) 85%, transparent);border-bottom-color:var(--nerd-line);}
body[data-theme="nerd"] .nav-links a{color:var(--nerd-muted);}
body[data-theme="nerd"] .nav-links a:hover,body[data-theme="nerd"] .nav-links a.active{color:var(--nerd-text);}

body[data-theme="illustrative"] .site-nav{background:color-mix(in srgb, var(--ill-bg) 88%, transparent);border-bottom-color:var(--ill-line);}
body[data-theme="illustrative"] .logo{color:var(--ill-text);}
body[data-theme="illustrative"] .logo em{color:var(--ill-accent);}
body[data-theme="illustrative"] .nav-links a{color:var(--ill-muted);}
body[data-theme="illustrative"] .nav-links a:hover,body[data-theme="illustrative"] .nav-links a.active{color:var(--ill-text);}
body[data-theme="illustrative"] .nav-links a.active::after{background:var(--ill-accent);}

/* ============ FOOTER ============ */
.site-footer{
  padding:56px clamp(20px,4vw,48px) 40px;
  border-top:1px solid var(--neutral-line);
  color:var(--neutral-muted);
  font-size:.88rem;
}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;}
.footer-links{display:flex;gap:20px;list-style:none;margin:0;padding:0;}
.footer-links a{color:var(--neutral-muted);transition:color .2s;}
.footer-links a:hover{color:var(--neutral-text);}
body[data-theme="illustrative"] .site-footer{border-top-color:var(--ill-line);color:var(--ill-muted);}
body[data-theme="illustrative"] .footer-links a{color:var(--ill-muted);}
body[data-theme="illustrative"] .footer-links a:hover{color:var(--ill-text);}

/* ============ HOME / SPLIT HERO ============ */
.split-hero{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 73px);min-height:calc(100dvh - 73px);overflow:visible;}

.world-panel{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,6vw,80px);isolation:isolate;align-items:center;}
.world-nerd{
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(241,234,235,.9), transparent),
    radial-gradient(1px 1px at 24% 42%, rgba(241,234,235,.7), transparent),
    radial-gradient(1.5px 1.5px at 38% 12%, rgba(205,147,194,.8), transparent),
    radial-gradient(1px 1px at 52% 55%, rgba(241,234,235,.6), transparent),
    radial-gradient(1.5px 1.5px at 18% 70%, rgba(146,139,177,.8), transparent),
    radial-gradient(1px 1px at 46% 80%, rgba(241,234,235,.55), transparent),
    radial-gradient(1.5px 1.5px at 8% 88%, rgba(205,147,194,.7), transparent),
    radial-gradient(1px 1px at 30% 30%, rgba(241,234,235,.5), transparent),
    radial-gradient(circle at 30% 20%, var(--nerd-surface-2), var(--nerd-bg) 65%);
  color:var(--nerd-text);
  /* smooth crescent-moon curve instead of a torn edge */
  /*clip-path:polygon(0 0,100% 0,93.2% 10%,87.1% 20%,82.2% 30%,79.1% 40%,78% 50%,79.1% 60%,82.2% 70%,87.1% 80%,93.2% 90%,100% 100%,0 100%);*/
}
.world-illustrative{
  background:
    radial-gradient(ellipse at 70% 10%, rgba(255,255,255,.15), transparent 55%),
    linear-gradient(160deg, var(--ill-bg), var(--ill-surface-2) 120%);
  color:var(--ill-text);
}
.world-eyebrow{
  font-family:var(--font-display-nerd);
  font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;
  margin:0 0 18px;opacity:.85;
}
.world-nerd .world-eyebrow{color:var(--nerd-accent2);}
.world-illustrative .world-eyebrow{font-family:var(--font-body);font-weight:600;letter-spacing:.22em;color:var(--ill-accent);}

.world-title{
  margin:0 0 18px;
  line-height:.96;
}
.world-nerd .world-title{
  font-family:var(--font-display-nerd);
  font-weight:700;
  font-size:clamp(2.6rem,6vw,4.4rem);
  letter-spacing:.01em;
  text-transform:uppercase;
}
.world-illustrative .world-title{
  font-family:var(--font-display-ill);
  font-weight:500;
  font-optical-sizing:auto;
  font-size:clamp(2.6rem,6vw,4.4rem);
  font-style:italic;
}
.world-desc{max-width:38ch;font-size:1.02rem;line-height:1.6;margin:0 0 32px;}
.world-nerd .world-desc{color:var(--nerd-muted);}
.world-illustrative .world-desc{color:var(--ill-muted);}

.world-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;
  font-weight:600;font-size:.95rem;
  width:fit-content;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.world-nerd .world-cta{
  background:linear-gradient(90deg,var(--nerd-accent),var(--nerd-accent2));
  color:#201e34;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.world-nerd .world-cta:hover{transform:translateX(4px);box-shadow:0 0 24px rgba(205,147,194,.4);}
.world-illustrative .world-cta{
  background:var(--ill-accent);color:var(--ill-bg);
  border-radius:2px 14px 2px 14px;
}
.world-illustrative .world-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(55,50,98,.3);}

.world-tiles{display:flex;gap:10px;margin-top:44px;justify-content:center;width:100%;}
.tile{
  flex:0 0 calc((100% - 20px) / 3);
  aspect-ratio:3/4;
  position:relative;
  overflow:hidden;
}
.world-nerd .tile{background:linear-gradient(135deg,var(--nerd-surface),var(--nerd-surface-2));border:1px solid var(--nerd-line);}
.world-nerd .tile::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 10px, rgba(205,147,194,.14) 10px 12px);
}
.world-nerd .tile-tag{
  position:absolute;left:8px;bottom:8px;font-family:var(--font-display-nerd);
  font-size:.68rem;letter-spacing:.1em;color:var(--nerd-accent2);
}
.world-illustrative .tile{background:var(--ill-surface);border-radius:2px 20px 2px 20px;box-shadow:inset 0 0 0 1px var(--ill-line);}
.world-illustrative .tile::before{
  content:'';position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 30% 30%, rgba(55,50,98,.22), transparent 60%),
             radial-gradient(circle at 70% 70%, rgba(205,147,194,.32), transparent 55%);
  filter:blur(2px);
}
.world-illustrative .tile-tag{
  position:absolute;left:8px;bottom:8px;font-family:var(--font-display-ill);font-style:italic;
  font-size:.72rem;color:var(--ill-accent);
}

.celestial-overlay{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:clamp(90px,11vw,170px);
  z-index:6;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.celestial-overlay svg{width:100%;height:100%;overflow:visible;}
.celestial-overlay .star{animation:twinkle 3.6s ease-in-out infinite;}
.celestial-overlay .star:nth-child(2n){animation-delay:.8s;}
.celestial-overlay .star:nth-child(3n){animation-delay:1.6s;}
.celestial-overlay .star:nth-child(5n){animation-delay:2.3s;}
@keyframes twinkle{
  0%,100%{opacity:.25;}
  50%{opacity:1;}
}

.seam-label{
  position:absolute;top:41%;left:50%;transform:translate(-50%,-50%);
  z-index:5;text-align:center;pointer-events:none;
  font-family:var(--font-display-nerd);
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  white-space:nowrap;
}
.seam-label .seam-light{color:var(--neutral-text);opacity:.9;}
.seam-label .seam-dark{color:var(--nerd-bg);opacity:.9;}
.seam-label .seam-sep{color:var(--neutral-muted);opacity:.75;}

.mini-moon{
  position:absolute;top:50%;left:calc(50% + 32px);z-index:6;
  transform:translateY(-50%) scaleX(-1);
  width:clamp(40px,5vw,64px);
  pointer-events:none;
}

@media (max-width:820px){
  .celestial-overlay{top:50%;left:50%;bottom:auto;width:130px;height:130px;transform:translate(-50%,-50%);z-index:6;}
  .seam-label{top:auto;bottom:56px;left:50%;transform:translateX(-50%);}
  .mini-moon{top:50%;left:calc(50% + 100px);width:36px;z-index:6;}
}


/* ============ GALLERY PAGES ============ */
.page-hero{padding:clamp(56px,10vw,110px) 0 48px;}
.page-hero .world-eyebrow{margin-bottom:14px;}
.page-title{
  font-size:clamp(2.4rem,5vw,3.6rem);
  margin:0 0 16px;line-height:1.02;
}
body[data-theme="nerd"] .page-title{font-family:var(--font-display-nerd);font-weight:700;text-transform:uppercase;}
body[data-theme="illustrative"] .page-title{font-family:var(--font-display-ill);font-weight:500;font-style:italic;}
.page-lede{max-width:56ch;font-size:1.05rem;line-height:1.65;}
body[data-theme="nerd"] .page-lede{color:var(--nerd-muted);}
body[data-theme="illustrative"] .page-lede{color:var(--ill-muted);}

.brush-rule{width:140px;height:14px;margin:22px 0 0;}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
  padding:20px 0 90px;

  justify-content:center;

}
.card{position:relative;display:flex;flex-direction:column;}
.card-art{aspect-ratio:4/5;position:relative;overflow:hidden;margin-bottom:12px;}
.card-caption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.card-title{font-size:.95rem;font-weight:600;}
.card-meta{font-size:.78rem;}

/* nerd card styling: HUD frame */
body[data-theme="nerd"] .card-art{
  background:linear-gradient(150deg,var(--nerd-surface),var(--nerd-surface-2));
  border:1px solid var(--nerd-line);
}
body[data-theme="nerd"] .card-art::before{
  content:'';position:absolute;inset:0;
  
}
body[data-theme="nerd"] .card-art::after{
  content:'';position:absolute;inset:10px;border:1px solid rgba(205,147,194,.4);
  clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
body[data-theme="nerd"] .card-index{
  position:absolute;top:14px;left:14px;font-family:var(--font-display-nerd);
  font-size:.7rem;letter-spacing:.12em;color:var(--nerd-accent2);z-index:2;
}
body[data-theme="nerd"] .card-status{
  position:absolute;bottom:14px;right:16px;font-family:var(--font-display-nerd);
  font-size:.66rem;letter-spacing:.14em;color:var(--nerd-accent);z-index:2;
}
body[data-theme="nerd"] .card-title{font-family:var(--font-display-nerd);letter-spacing:.02em;}
body[data-theme="nerd"] .card-meta{color:var(--nerd-muted);}

/* illustrative card styling: canvas + brush edge */
body[data-theme="illustrative"] .card-art{
  background:var(--ill-surface);
  border-radius:2px 26px 2px 26px;
  box-shadow:inset 0 0 0 1px var(--ill-line);
}
body[data-theme="illustrative"] .card-art::before{
  content:'';position:absolute;inset:0;opacity:.55;
  background:radial-gradient(circle at 25% 25%, rgba(55,50,98,.25), transparent 55%),
             radial-gradient(circle at 75% 70%, rgba(205,147,194,.34), transparent 55%);
  filter:blur(1.5px);
}
body[data-theme="illustrative"] .card-medium{
  position:absolute;bottom:14px;left:16px;font-family:var(--font-display-ill);
  font-style:italic;font-size:.78rem;color:var(--ill-accent);z-index:2;
}
body[data-theme="illustrative"] .card-title{font-family:var(--font-display-ill);font-style:italic;font-weight:500;}
body[data-theme="illustrative"] .card-meta{color:var(--ill-muted);}

.status-open{color:var(--nerd-accent2)!important;}
.status-closed{color:var(--nerd-muted)!important;}

/* commission / process note */
.info-band{padding:20px 0 90px;border-top:1px solid var(--neutral-line);margin-top:-40px;}
body[data-theme="nerd"] .info-band{border-top-color:var(--nerd-line);}
body[data-theme="illustrative"] .info-band{border-top-color:var(--ill-line);}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin-top:36px;}
.info-grid h3{margin:0 0 8px;font-size:1rem;}
body[data-theme="nerd"] .info-grid h3{font-family:var(--font-display-nerd);color:var(--nerd-accent2);}
body[data-theme="illustrative"] .info-grid h3{font-family:var(--font-display-ill);font-style:italic;color:var(--ill-accent);}
.info-grid p{margin:0;font-size:.92rem;line-height:1.55;}
body[data-theme="nerd"] .info-grid p{color:var(--nerd-muted);}
body[data-theme="illustrative"] .info-grid p{color:var(--ill-muted);}

.cta-band{padding:60px 0 100px;text-align:center;}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 16px;}
body[data-theme="nerd"] .cta-band h2{font-family:var(--font-display-nerd);text-transform:uppercase;}
body[data-theme="illustrative"] .cta-band h2{font-family:var(--font-display-ill);font-style:italic;font-weight:500;}

/* ============ CONTACT ============ */
.contact-hero{padding:clamp(56px,10vw,110px) 0 40px;text-align:center;}
.contact-hero h1{
  font-family:var(--font-display-ill);font-weight:500;font-style:italic;
  font-size:clamp(2.2rem,4.5vw,3.2rem);margin:0 0 14px;
}
.contact-hero p{color:var(--neutral-muted);max-width:50ch;margin:0 auto;line-height:1.6;}

.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px 0 60px;}
.contact-card{
  padding:32px;border:1px solid var(--neutral-line);
}
.contact-card.for-nerd{background:linear-gradient(160deg,var(--nerd-surface),var(--nerd-bg));border-color:var(--nerd-line);}
.contact-card.for-illustrative{background:linear-gradient(160deg,var(--ill-surface),var(--ill-bg));border-color:var(--ill-line);color:var(--ill-text);}
.contact-card h3{margin:0 0 8px;font-size:1.15rem;}
.contact-card.for-nerd h3{font-family:var(--font-display-nerd);color:var(--nerd-accent2);text-transform:uppercase;}
.contact-card.for-illustrative h3{font-family:var(--font-display-ill);font-style:italic;color:var(--ill-accent);}
.contact-card p{font-size:.9rem;line-height:1.55;margin:0 0 20px;}
.contact-card.for-nerd p{color:var(--nerd-muted);}
.contact-card.for-illustrative p{color:var(--ill-muted);}

.form-panel{
  max-width:640px;margin:0 auto 100px;
  padding:clamp(28px,4vw,44px);
  background:var(--neutral-surface);border:1px solid var(--neutral-line);
}
.form-row{margin-bottom:20px;display:flex;flex-direction:column;gap:8px;}
.form-row label{font-size:.85rem;font-weight:500;color:var(--neutral-muted);}
.form-row input,.form-row select,.form-row textarea{
  background:var(--neutral-bg);border:1px solid var(--neutral-line);
  color:var(--neutral-text);padding:12px 14px;font:inherit;font-size:.95rem;
  border-radius:2px;
}
.form-row textarea{resize:vertical;min-height:120px;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--nerd-accent2);}
.form-submit{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;font-weight:600;font-size:.95rem;border:none;
  background:linear-gradient(90deg,var(--nerd-accent),var(--ill-accent2));
  color:#201e34;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:transform .2s var(--ease);
}
.form-submit:hover{transform:translateX(4px);}
.form-note{font-size:.8rem;color:var(--neutral-muted);margin-top:14px;}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .split-hero{grid-template-columns:1fr;min-height:auto;}
  .world-nerd{clip-path:polygon(0 0,100% 0,100% 92%,85% 96%,70% 99%,50% 100%,30% 99%,15% 96%,0 92%);padding-bottom:64px;}
  .world-illustrative{padding-top:56px;}
  .nav-links{
    position:fixed;inset:64px 0 0 0;flex-direction:column;align-items:flex-start;
    padding:28px clamp(20px,4vw,48px);gap:22px;
    background:var(--neutral-bg);
    transform:translateX(100%);transition:transform .3s var(--ease);
  }
  body[data-theme="nerd"] .nav-links{background:var(--nerd-bg);}
  body[data-theme="illustrative"] .nav-links{background:var(--ill-bg);}
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .contact-options{grid-template-columns:1fr;}
}

.centrepiece{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  pointer-events:none;
}

.lens{
  display:block;
  width: 980px;x;
  height:auto;
}

.about-photo {
    width: 280px;
    display: block;
    margin: 2rem auto;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,0.15);
}

.about-hero {
  padding: clamp(56px, 8vw, 100px) 0 40px;
}

.about-hero h1 {
  font-family: var(--font-display-ill);
  font-style: italic;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  text-align: center;
  margin: 0 0 3rem;
}

.about-intro {
  display: grid;
  grid-template-columns: 280px minmax(0, 600px);
  gap: 3rem;
  justify-content: center;
  align-items: start;
}

.about-photo {
  width: 280px;
  margin: 0;
}

.about-text p {
  color: var(--neutral-muted);
  line-height: 1.75;
  margin: 0 0 1.25rem;
  text-align: left;
}

@media (max-width: 700px) {
  .about-intro {
    grid-template-columns: 1fr;
  }

  .about-photo {
    margin: 0 auto;
  }
}

/* ============ NIGHTFALL ARCHIVE HOME ============ */

.home-page {
  min-height: calc(100vh - 82px);
}

.home-hero {
  min-height: calc(100vh - 82px);
  display: grid;
  place-items: center;
  padding: 80px 24px;
  text-align: center;
  background:
  radial-gradient(
    circle at 50% 38%,
    rgba(205, 147, 194, 0.12),
    transparent 24%
  ),
  radial-gradient(
    circle at 50% 45%,
    rgba(123, 99, 161, 0.2),
    transparent 48%
  ),
  linear-gradient(
    180deg,
    #171526 0%,
    var(--neutral-bg) 55%,
    #1b1930 100%
  );
}

.home-hero-content {
  width: min(720px, 100%);
    transform: scale(1.12);
}

.home-eyebrow {
  margin: 0 0 1.5rem;
  color: var(--nerd-accent2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.home-hero h1 {
  margin: 0;
  line-height: 0.85;
}

.home-hero h1 span {
  display: block;
  font-family: var(--font-display-ill);
  font-size: clamp(4rem, 11vw, 8.5rem);
  font-style: italic;
  font-weight: 500;
  color: var(--neutral-text);
}

.home-hero h1 strong {
  display: block;
  margin-top: 0.2em;
  font-family: var(--font-display-nerd);
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nerd-accent2);
}

.home-byline {
  margin: 2rem 0 0;
  font-family: var(--font-display-ill);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--neutral-text);
}

.home-intro {
  max-width: 560px;
  margin: 1.5rem auto 0;
  color: var(--neutral-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.home-cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--nerd-accent2);
  color: var(--neutral-text);
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}

.home-cta:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.06);
}

.featured-works {
  padding: clamp(70px, 9vw, 120px) 24px;
  border-top: 1px solid var(--neutral-line);
}

.featured-works h2 {
  margin: 0 0 2.5rem;
  font-family: var(--font-display-ill);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-style: italic;
  font-weight: 500;
  text-align: center;
  color: var(--neutral-text);
}

.section-eyebrow {
  margin: 0 0 1rem;
  text-align: center;
  color: var(--nerd-accent2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.featured-piece {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--neutral-line);
}

.featured-piece img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 250ms ease;
}

.featured-piece:hover img {
  transform: scale(1.03);
}

.featured-link {
  display: block;
  width: fit-content;
  margin: 2.5rem auto 0;
  color: var(--neutral-text);
  text-decoration: none;
}

@media (max-width: 700px) {
  .featured-grid {
    grid-template-columns: 1fr;
  }

  .featured-piece {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
  }
}

.hero-frame {
    position: relative;
    display: inline-block;
    padding: 3rem 4rem;
}

.frame-line {
    position: absolute;
    background: rgba(181, 152, 92, 0.75);
    box-shadow: 0 0 8px rgba(181, 152, 92, 0.15);
}

/* Top */
.frame-top {
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
}

/* Bottom */
.frame-bottom {
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 2px;
}

/* Left */
.frame-left {
    top: 24px;
    bottom: 24px;
    left: 0;
    width: 2px;
}

/* Right */
.frame-right {
    top: 24px;
    bottom: 24px;
    right: 0;
    width: 2px;
  
}

.frame-star {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(205, 174, 107, 0.95);
    font-family: Georgia, serif;
    font-size: 1rem;
    line-height: 1;
    background: transparent;
    padding: 0;
    text-shadow: 0 0 8px rgba(205, 174, 107, 0.25);
    z-index: 2;
}

.frame-star-top {
    top: -0.5rem;
}

.frame-star-bottom {
    bottom: -0.5rem;
}

.starfield{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.starfield::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    border-radius:50%;
}

.stars-small::before{
    width:2px;
    height:2px;
    background:white;

    box-shadow:
        8vw 14vh rgba(255,255,255,.45),
        16vw 30vh rgba(255,255,255,.5),
        24vw 9vh rgba(255,255,255,.4),
        33vw 40vh rgba(255,255,255,.55),
        42vw 20vh rgba(255,255,255,.45),
        55vw 11vh rgba(255,255,255,.5),
        66vw 37vh rgba(255,255,255,.4),
        74vw 18vh rgba(255,255,255,.55),
        87vw 26vh rgba(255,255,255,.45),
        93vw 61vh rgba(255,255,255,.5),
        13vw 73vh rgba(255,255,255,.45),
        29vw 66vh rgba(255,255,255,.5),
        47vw 82vh rgba(255,255,255,.45),
        62vw 70vh rgba(255,255,255,.55),
        78vw 58vh rgba(255,255,255,.45),
        91vw 80vh rgba(255,255,255,.5);

    filter:blur(.25px);
}

.stars-medium::before{
    width:3px;
    height:3px;
    background:white;

    box-shadow:
        18vw 18vh white,
        36vw 28vh white,
        52vw 8vh white,
        68vw 46vh white,
        84vw 16vh white,
        25vw 74vh white,
        71vw 68vh white;

    filter:
        drop-shadow(0 0 5px rgba(255,255,255,.9))
        drop-shadow(0 0 10px rgba(255,255,255,.5));
}

.stars-large::before{
    width:5px;
    height:5px;
    background:white;

    box-shadow:
        12vw 22vh white,
        58vw 30vh white,
        82vw 72vh white;

    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.95))
        drop-shadow(0 0 18px rgba(255,255,255,.75))
        drop-shadow(0 0 30px rgba(255,255,255,.45));

    animation: twinkle 2s ease-in-out infinite;
}

@keyframes twinkle {

    0% {
        opacity: 0.2;
        filter:
            drop-shadow(0 0 2px rgba(255,255,255,.2))
            drop-shadow(0 0 6px rgba(255,255,255,.15));
    }

    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 14px rgba(255,255,255,1))
            drop-shadow(0 0 28px rgba(255,255,255,.9))
            drop-shadow(0 0 50px rgba(255,255,255,.6));
    }

    100% {
        opacity: 0.2;
        filter:
            drop-shadow(0 0 2px rgba(255,255,255,.2))
            drop-shadow(0 0 6px rgba(255,255,255,.15));
    }

}
.commission-panel {
    width: min(920px, 90%);
    margin: 3rem auto 2.5rem;
    padding: 2.2rem;
    border: 1px solid rgba(181, 152, 92, 0.28);
    background: rgba(58, 51, 94, 0.42);
}

.commission-status {
    padding-bottom: 1.8rem;
    margin-bottom: 1.8rem;
    border-bottom: 1px solid rgba(181, 152, 92, 0.28);
}

.commission-columns {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 3rem;
}

.commission-panel h2 {
    margin: 0 0 0.75rem;
    color: var(--light-text);
    font-size: 1.15rem;
}

.commission-panel p:not(.commission-label) {
    margin: 0 0 0.8rem;
    color: var(--muted-text);
    font-size: 0.9rem;
    line-height: 1.65;
}

.commission-list {
    margin: 0.6rem 0 0;
    padding-left: 1.25rem;
    color: var(--muted-text);
    font-size: 0.9rem;
    line-height: 1.65;
}

.commission-list li + li {
    margin-top: 0.4rem;
}

@media (max-width: 700px) {
    .commission-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
.commission-status {
    text-align: center;
}

.commission-label {
    margin: 0 0 0.7rem;
    color: rgba(205, 174, 107, 0.9);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.landscape-gallery {
    display: flex;
    justify-content: center;
    margin-top: -45px;
    padding-bottom: 90px;
}

.landscape-gallery .card {
    width: 50%;
    max-width: 520px;
}

.landscape-gallery .card-art {
    aspect-ratio: 4 / 3;
}

.card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.brand img {
    height: 100px;
    width: auto;
    display: block;
}