@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,ital@9..144,300..700,0,1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

@font-face{
  font-family:"Wonderland";
  src: url("assets/fonts/Wonderland-Regular.ttf") format("truetype"),
       url("assets/fonts/Wonderland-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Locks native form controls, scrollbars, etc. to dark rendering —
     "Deep Ink" is the permanent theme, not a mode that should ever flip. */
  color-scheme: dark;

  /* "Deep Ink" palette — gallery-dark, accents used as signal only */
  --deep-bg:    #0F0E14;
  --core-text:  #F4F2ED;
  --accent-blue:#9BD3F8;
  --accent-pink:#FF6EF5;

  --bg:        var(--deep-bg);
  --bg-panel:  #1B1A22; /* neutral dark elevation, no accent tint — art brings the color */
  --bg-raised: #242230; /* one step lighter still, for nested/raised boxes */
  --text:      var(--core-text);
  --text-dim:  #A8A5A0;
  --text-faint:#807D78;
  --gold:      var(--accent-pink); /* raw pink is ~8:1 on Deep BG — safe as text now — links/hover/active-nav */
  --gold-dim:  var(--accent-blue); /* raw blue is ~12:1 on Deep BG — secondary accent */
  --rose:      var(--accent-blue); /* decorative borders only, never a filled surface */
  --line:      rgba(244,242,237,0.16);
  --line-soft: rgba(244,242,237,0.08);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --display: "Wonderland", "Fraunces", cursive, serif;

  --max:1400px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }

/* Readable sans headings by default. The decorative Wonderland font is
   reserved for the brand mark and short page-title h1s only (see their
   own rules below), since it's illegible for longer heading text. */
h1, h2, h3, h4, h5, h6{
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-0.01em;
  text-transform:capitalize;
}

::selection{ background:var(--gold); color:var(--bg); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

/* faint paper-grain / gallery-wall texture */
/* Faint color wash + halftone dot texture, fixed behind all page content. */
/* Neutral halftone texture only — accent colors stay out of the background
   per "signal, not surface"; the artwork is what brings color to the page. */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image: radial-gradient(circle, rgba(244,242,237,0.05) 1px, transparent 1.2px);
    background-size: 20px 20px;
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(15,14,20,0.90); /* Deep Background, slightly translucent over the blur */
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.nav-mark{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display);
  font-weight:600;
  font-size:1.5rem;
  letter-spacing:0.02em;
  text-transform:capitalize;
}
.nav-mark span{ color:var(--gold); }
.nav-logo{
  max-height:50px;
  width:auto;
  display:block;
}

.nav-links{ display:flex; gap:36px; }
.nav-links a{
  font-size:0.92rem;
  color:var(--text-dim);
  position:relative;
  padding:4px 0;
}
.nav-links a:hover,
.nav-links a.active,
.link-tile:hover .link-tile-value{
    color:var(--gold);
}

.nav-toggle{ display:none; }

@media (max-width: 760px) {
  /* Prevent backdrop-filter from trapping fixed children on mobile */
  .site-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #0F0E14; /* Solid opaque deep background */
  }

  .nav-links {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100dvh - 76px);
    background-color: #0F0E14; /* Opaque solid background */
    flex-direction: column;
    gap: 0;
    padding: 20px 28px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    overflow-y: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .nav-links.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-links a {
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.1rem;
    color: var(--text); /* Fully opaque high-contrast white text */
    font-weight: 500;
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: var(--gold);
  }

  .nav-toggle {
    display: block;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }
}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative;
  padding:120px 0 90px;
  border-bottom:1px solid var(--line-soft);
}
.hero-kicker{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--gold);
  letter-spacing:0.04em;
  margin-bottom:22px;
}
.hero h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem, 7.5vw, 5rem);
  line-height:1.15;
  letter-spacing:0.01em;
}
.hero h1 em{
  font-style:italic;
}
.hero-role{
  margin-top:26px;
  font-size:1.05rem;
  color:var(--text-dim);
  max-width:460px;
}
.hero-quote{
    border-left:2px solid var(--gold-dim);
}
.hero-actions{
  margin-top:44px;
  display:flex; gap:18px; flex-wrap:wrap;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  font-size:0.92rem;
  font-weight:500;
  border-radius:2px;
  border:1px solid var(--line);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
/* Solid button stays neutral (off-white fill) — accent color is reserved
   for the border/text signal on hover, never a large colored surface. */
.btn-solid{
    background:var(--text);
    border-color:var(--text);
    color:var(--bg);
}
.btn-solid:hover{
    background:var(--bg-raised);
    border-color:var(--gold);
    color:var(--text);
}
.btn-ghost{ color:var(--text); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{ position:relative; z-index:1; }
.section{
  padding:96px 0;
  border-bottom:1px solid var(--line-soft);
}
.section:last-of-type{ border-bottom:none; }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:52px;
  flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--display);
  font-weight:400;
  font-size:2.3rem;
  letter-spacing:0.015em;
}
.section-num{
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--text-faint);
}

/* ============================================================
   CATEGORY GRID (home categories) — image-backed, "Chaotic Art" energy
   ============================================================ */
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
  gap:22px;
}
.category-card{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:3px;
  border:1px solid var(--line-soft);
  background-color:var(--bg-panel);
  transition:border-color .4s ease, box-shadow .4s ease;
}
.category-card-image{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .6s cubic-bezier(.19,1,.22,1);
}
.category-card-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,14,20,0.96) 0%, rgba(15,14,20,0.88) 48%, rgba(15,14,20,0.85) 100%);
  transition:opacity .45s ease;
}
.category-card-content{
  position:absolute; inset:0;
  z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px;
}
.category-card-icon{
  display:block;
  font-size:1.6rem;
  opacity:0.45;
  margin-bottom:10px;
  transition:opacity .3s ease;
}
.category-card:hover .category-card-icon{ opacity:0.7; }
.category-card-title{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-0.01em;
  text-transform:capitalize;
  color:var(--text);
  text-shadow:0 2px 6px rgba(0,0,0,0.9);
}
.category-card-link{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:10px;
  font-family:var(--sans);
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--text-dim);
  text-shadow:0 2px 6px rgba(0,0,0,0.9);
  transition:color .3s ease;
}
.category-card-link::after{
  content:"→";
  transition:transform .3s ease;
}

.category-card:hover .category-card-image{ transform:scale(1.03); }
.category-card:hover .category-card-overlay{ opacity:0.62; }
.category-card:hover .category-card-link{ transform:translateX(2px); }
.category-card:hover .category-card-link::after{ transform:translateX(3px); }

/* Alternate the neon signal between pink and blue so the grid doesn't
   feel uniform — small chaotic-energy touch. */
.category-card:nth-child(odd):hover{
  border-color:var(--accent-pink);
  box-shadow:0 0 0 1px var(--accent-pink), 0 0 28px 2px rgba(255,110,245,0.35);
}
.category-card:nth-child(odd):hover .category-card-link{ color:var(--accent-pink); }
.category-card:nth-child(even):hover{
  border-color:var(--accent-blue);
  box-shadow:0 0 0 1px var(--accent-blue), 0 0 28px 2px rgba(155,211,248,0.35);
}
.category-card:nth-child(even):hover .category-card-link{ color:var(--accent-blue); }

/* ============================================================
   GALLERY GRID (category pages)
   ============================================================ */
.gallery-header{
  padding:80px 0 56px;
  border-bottom:1px solid var(--line-soft);
}
.gallery-eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--gold);
  margin-bottom:16px;
}
.gallery-header h1{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing:0.015em;
}
.gallery-header p{
  margin-top:18px;
  max-width:540px;
  color:var(--text-dim);
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
/* full-bleed outer wrapper: the ambient gradient spans the entire
   viewport width so it can reach the true left/right edges, while the
   actual content stays inside the normal `.wrap` max-width below. */
.about-section{
  position:relative;
  width:100%;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(circle at left center, rgba(255,110,245,0.18), transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(155,211,248,0.16), transparent 45%);
}

.about-hero{
  position:relative;
  z-index:1;
  padding:120px 0 90px;
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:90px;
  align-items:center;
}
@media (max-width:820px){
  .about-hero{ grid-template-columns:1fr; padding:90px 0 60px; gap:56px; }
}

.about-portrait-frame{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  margin:0 auto;
}
.about-portrait-frame::before{
  content:"";
  position:absolute;
  top:-16px; right:-16px;
  width:100%; height:100%;
  border:1px solid var(--accent-pink);
  border-radius:4px;
  z-index:-1;
}
.about-portrait{
  position:relative;
  aspect-ratio:3/4;
  background:var(--bg-panel);
  overflow:hidden;
  border-radius:4px;
  border:1px solid var(--line-soft);
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
}
.about-portrait img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05);
}
.about-portrait-tag{
  position:absolute;
  left:22px; bottom:-18px;
  z-index:2;
  background:var(--bg);
  border:1px solid var(--line);
  padding:9px 18px;
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.03em;
  color:var(--text);
  border-radius:2px;
  white-space:nowrap;
}
.about-portrait-tag span{ color:var(--accent-pink); }

.about-copy{ position:relative; z-index:1; }
.about-copy .gallery-eyebrow{ margin-bottom:14px; }
.about-copy h1{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing:0.015em;
  margin-bottom:22px;
}
.about-roles{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:26px;
}
.about-role-tag{
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:20px;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.03em;
  color:var(--text-dim);
}
.about-copy p{
  color:var(--text-dim);
  margin-bottom:18px;
  max-width:480px;
}
.about-copy p:last-child{ margin-bottom:0; }
.about-copy p em{
  font-style:normal;
  color:var(--text);
  border-bottom:1px solid var(--accent-blue);
}

.links-grid{
  padding:80px 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.link-tile{
  background:var(--bg);
  padding:30px 28px;
  display:flex; flex-direction:column; gap:8px;
}
.link-tile:hover{ background:var(--bg-panel); }
.link-tile-label{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--text-faint);
  letter-spacing:0.04em;
}
.link-tile-value{
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--text);
}
.link-tile:hover .link-tile-value{ color:var(--gold); }

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact-cta{
  padding:100px 0;
  text-align:left;
}
.contact-cta h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem, 5vw, 3.2rem);
  line-height:1.2;
  letter-spacing:0.015em;
  max-width:680px;
}
.contact-cta .btn{ margin-top:38px; }

.site-footer{
  padding:40px 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}
.site-footer p{ font-size:0.85rem; color:var(--text-faint); }
.footer-links{ display:flex; gap:22px; }
.footer-links a{ font-size:0.85rem; color:var(--text-dim); }
.footer-links a:hover{ color:var(--gold); }


/* ============================================================
   BACK LINK
   ============================================================ */
.back-link{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--text-dim);
  margin-bottom:22px;
  transition:color .15s ease, transform .15s ease;
}
.back-link:hover{ color:var(--gold); transform:translateX(-3px); }

/* Placeholder copy block for project write-ups — sits between the title
   and the image grid on every dedicated project page. */
.project-description{
  max-width:640px;
  margin:56px 0 8px;
  padding-bottom:36px;
  border-bottom:1px solid var(--line-soft);
}
.project-description p{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  color:var(--text);
}

/* ============================================================
   MASONRY COLLAGE (project detail galleries)
   ============================================================ */
.masonry-grid{
  padding:64px 0 100px;
  column-count:3;
  column-gap:20px;
}
.masonry-grid img{
  width:100%;
  height:auto;
  display:block;
  margin-bottom:20px;
  break-inside:avoid;
  background:var(--bg-panel);
}
@media (max-width:900px){
  .masonry-grid{ column-count:2; }
}
@media (max-width:600px){
  .masonry-grid{ column-count:1; padding:44px 0 70px; }
}
/* ============================================================
   VIDEO PLACEHOLDER (Vimeo embed to be dropped in later)
   ============================================================ */
.video-placeholder{
  aspect-ratio:16/9;
  background:var(--bg-panel);
  border:1px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:16px;
  padding:40px;
}
.video-placeholder .video-placeholder-icon{ font-size:1.8rem; opacity:0.55; }
.video-placeholder p{ color:var(--text-dim); font-size:0.9rem; max-width:420px; }
.video-placeholder code{
  font-family:var(--mono); font-size:0.7rem; color:var(--text-faint);
  background:var(--bg-raised); padding:8px 12px; display:inline-block; max-width:100%;
  overflow-x:auto; white-space:pre; text-align:left;
}
.video-embed{ aspect-ratio:16/9; background:#000; }
.video-embed iframe{ width:100%; height:100%; border:0; display:block; }
.video-section {
  padding-top: 48px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}