:root{
  --bg:#ffffff;
  --fg:#0b0b10;
  --muted:#5a5f71;
  --card:#f7f7fb;
  --brand:#caa64a;         /* warm gold */
  --brand2:#f0d889;        /* light gold */
}

/* subtle repeating magic circle watermark */
html {
  background-image: url("assets/magic-circle-tile.svg");
  background-repeat: repeat;
  background-size: 560px 560px; /* try 480 or 640 for different density */
}

/* keep your content panels readable on light themes */
.section.alt { background: rgba(250,250,252,0.92); }

/* base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* header */
.site-header{
  position:sticky;top:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid #e6e6ef;
  z-index:10
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;letter-spacing:.08em}
.nav{display:flex;gap:16px}
.nav a{color:var(--fg);opacity:.9}
.menu{display:none;background:transparent;border:1px solid #e0e0ea;color:var(--fg);border-radius:8px;padding:6px 10px}

@media (max-width: 760px){
  .nav{display:none;position:absolute;top:64px;right:0;background:#ffffff;padding:12px;border-left:1px solid #e6e6ef;border-bottom:1px solid #e6e6ef;border-radius:0 0 0 8px}
  .menu{display:block}
}

/* hero */
.hero{
  padding:72px 0;
  background:
    radial-gradient(1200px 500px at 80% 0%, rgba(202,166,74,.18), transparent 60%),
    radial-gradient(800px 400px at 20% 10%, rgba(240,216,137,.22), transparent 70%);
}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 20px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border:1px solid #e0e0ea;border-radius:10px;color:var(--fg);transition:.2s;background:#ffffff}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border:none;color:#1a1a1a;font-weight:700
}

.about-container {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.about-portrait img {
  max-width: 250px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.about-text {
  flex: 1;
  min-width: 280px;
}

/* sections */
.section{padding:56px 0}
.section.alt{background:#fafafc;border-top:1px solid #eee;border-bottom:1px solid #eee}
.section h2{font-size:28px;margin:0 0 12px}

/* features and media */
.feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:0;padding:0 0 0 18px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{background:var(--card);border:1px solid #e6e6ef;border-radius:12px;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.04)}
.card img{aspect-ratio:16/9;object-fit:cover}
.card.video{display:flex;align-items:center;justify-content:center;cursor:pointer}
.video-thumb{position:relative;width:100%}
.video-thumb .play{position:absolute;inset:auto auto 12px 12px;background:rgba(0,0,0,.55);color:#fff;padding:6px 10px;border-radius:999px}

/* form */
.form{display:flex;gap:8px;margin-top:10px}
.form input{
  flex:1;min-width:220px;padding:12px;
  border:1px solid #e0e0ea;border-radius:10px;background:#ffffff;color:var(--fg)
}
.form button{white-space:nowrap}

/* socials section you added earlier */
#socials .social-grid{
  display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;margin-top:16px
}
.social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:12px;
  background:linear-gradient(180deg, #ffffff, #f7f7fb);
  border:1px solid #e6e6ef;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .15s ease
}
.social-icon img{width:28px;height:28px;object-fit:contain;filter:brightness(.85) contrast(1.1)}
.social-icon:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.social-icon:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(202,166,74,.45)}

/* footer */
.site-footer{padding:28px 0;border-top:1px solid #e6e6ef;background:#ffffff}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px}
.socials{display:flex;gap:12px}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.show{display:flex}
.lightbox-inner{background:#ffffff;border:1px solid #e6e6ef;border-radius:12px;max-width:900px;width:100%;height:60vh;display:flex;flex-direction:column}
.lightbox .close{align-self:flex-end;margin:10px 10px 0 0;background:#ffffff;border:1px solid #e0e0ea;color:var(--fg);border-radius:8px;padding:6px 10px}
.lightbox-body{padding:12px;flex:1}
.video-embed{width:100%;height:100%}

/* responsive */
@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-list{grid-template-columns:1fr}
}

/* motion */
@media (prefers-reduced-motion: reduce){
  .btn:hover,.social-icon:hover{transform:none}
}

/* project cards */
.project-card img{aspect-ratio:16/9;object-fit:cover}
.project-meta{padding:12px}
.project-title{margin:4px 0 4px;font-size:20px}
.project-sub{color:var(--muted);font-size:14px;margin-bottom:6px}
.project-blurb{margin:6px 0 10px;color:var(--fg)}

/* tags and chips */
.tag-row{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  font-size:12px;padding:4px 8px;border:1px solid #e0e0ea;border-radius:999px;
  background:#fff;color:#333
}
.project-filters{display:flex;gap:8px;margin:12px 0 20px;flex-wrap:wrap}
.chip{
  padding:6px 10px;border:1px solid #e0e0ea;border-radius:999px;background:#fff;cursor:pointer
}
.chip.is-active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#1a1a1a;border:none}

/* dark theme fallback if you switch back later
.tag, .chip{background:#0a0a12;border:1px solid #2a2a3a;color:var(--fg)}
.chip.is-active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#0b0b10;border:none}
*/

/* buttons in cards */
.project-links { margin-top: 10px; display: flex; gap: 8px; }
.btn-small { padding: 8px 10px; font-size: 14px; }

/* focus mode effects */
body.focus-mode #projectGrid {
  filter: blur(2px) saturate(0.9);
  transform: scale(0.99);
  transition: filter .2s ease, transform .2s ease;
  pointer-events: none;
}

.project-focus {
  background: var(--card);
  border: 1px solid #e6e6ef;           /* if using white and gold theme */
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  overflow: hidden;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(12px) scale(0.99);
  transition: opacity .22s ease, transform .22s ease;
}
.section.alt .project-focus { border-color: #e6e6ef; }
.project-focus.show { opacity: 1; transform: translateY(0) scale(1); }
.project-focus.exit { opacity: 0; transform: translateY(8px) scale(0.99); }

.project-focus-inner { padding: 16px; }
.focus-head { display: block;}
.focus-cover { width: 100%; border-radius: 10px; border: 1px solid #e6e6ef; }
.focus-meta h3 { margin: 0 0 6px; font-size: 24px; }
.focus-meta .muted { color: var(--muted); margin: 0 0 10px; }
.focus-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.focus-back {
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #e0e0ea;
}

/* if you switch back to dark theme later, use this instead of light borders
.project-focus { border: 1px solid #202030; }
.focus-cover { border: 1px solid #202030; }
.focus-back { background: #0a0a12; border: 1px solid #2a2a3a; color: var(--fg); }
*/

@media (max-width: 920px){
  .focus-head { grid-template-columns: 1fr; }
}

.focus-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background .15s ease;
}
.focus-close:hover {
  background: rgba(0,0,0,0.06);
}
.project-focus-inner {
  position: relative; /* so the close button positions inside */
  padding: 24px 16px 16px;
}

/* carousel */
.carousel { position: relative; margin-top: 16px; border: 1px solid #e6e6ef; border-radius: 12px; overflow: hidden; background: var(--card); }
.carousel .track { display: flex; transition: transform .25s ease; will-change: transform; }
.carousel-slide {padding: 0; }
.carousel-slide img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.carousel .cnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 2;
}
.carousel .cnav.prev { left: 10px; }
.carousel .cnav.next { right: 10px; }
.carousel .cnav.nav:hover { filter: brightness(0.98); }

.carousel .dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 6px; justify-content: center; }
.carousel .dot {
  width: 8px; height: 8px; border-radius: 999px; border: 1px solid #e0e0ea; background: #fff; opacity: .7;
}
.carousel .dot.is-active { background: linear-gradient(135deg, var(--brand), var(--brand2)); border: none; opacity: 1; }

/* ensure small screens still show them */
@media (max-width: 760px){
  .carousel .cnav { display: flex; } /* overrides any global .nav rules */
}

/* dark theme fallback
.carousel { border: 1px solid #202030; background: #0a0a12; }
.carousel .nav { background: rgba(0,0,0,.55); color: #fff; border-color: #2a2a3a; }
.carousel .dot { border-color: #2a2a3a; background: #0a0a12; }
*/

/* Add to your stylesheet */
.fade-group {
  transition: opacity 0.3s ease, max-height 0.3s ease;
  opacity: 1;
  max-height: 200px; /* adjust if needed */
  overflow: hidden;
}

.fade-group.is-hidden {
  opacity: 0;
  max-height: 0;
  margin: 0
}

.focus-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  /* top and bottom are set in JS to avoid header and footer */
  background: rgba(0,0,0,.45);
  z-index: 1000;
}

/* make sure the focus panel sits above the backdrop */
.project-focus {
  position: relative;
  z-index: 1001;
}

/* optional: prevent clicks passing through when focused */
body.focus-mode {
  overscroll-behavior: contain;
}

/* carousel width relative to screen */
.project-focus .carousel {
  width: 90%;          /* 80 percent of the container width */
  max-width: 90vw;     /* never exceed 90 percent of viewport */
  margin: 2rem auto;
}

.grid .card {
  transition: all 0.4s ease;   /* smooth transition */
  opacity: 1;
  transform: scale(1);
}

.grid .card.hide {
  opacity: 0;
  transform: scale(0.9);   /* shrink a little when hiding */
  pointer-events: none;
}