@font-face {
  font-family: 'Financiere';
  src: url('fonts/1741 Financiere W00 Italic/1741 Financiere W00 Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:hidden; }
body { background:#ffffff; color:#000000; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }

/* HEADER */
.site-header { position:relative; width:100%; }
.site-header__image { width:100%; height:auto; display:block; }

/* NAV */
.site-nav { position:fixed; left:40px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; z-index:100; }
.site-nav__link { font-family:'Montserrat',sans-serif; font-weight:500; font-size:15px; letter-spacing:0.08em; color:#000; text-decoration:none; }
.site-nav__link:hover { opacity:0.6; }

/* PROJECTS */
.projects { padding:100px 0 100px; }
.projects__title { font-family:'Aguafina Script',cursive; font-style:normal; font-size:42px; font-weight:400; color:#000; margin-bottom:40px; text-align:center; }
.projects__grid { position:relative; max-width:1100px; height:1050px; margin:0 auto; }
.proj { position:absolute; display:block; cursor:pointer; text-decoration:none; overflow:hidden; }
.proj img { width:100%; height:100%; object-fit:contain; display:block; }
.proj--1 { left:5%;   top:0;     width:320px; height:290px; }
.proj--2 { right:18%; top:20px;  width:265px; height:250px; }
.proj--3 { left:4%;   top:510px; width:320px; height:405px; }
.proj--4 { left:50%;  top:310px; transform:translateX(-50%); width:420px; height:480px; }
.proj--5 { right:6%;  top:330px; width:300px; height:260px; }
.proj--6 { right:10%; top:720px; width:320px; height:310px; }

/* LIGHTBOX */
.lightbox { position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.3); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.lightbox--blue { background:rgba(115,197,227,0.5); }
.lightbox--dark { background:rgba(35,46,69,0.55); }
.lightbox--pink { background:rgba(255,0,149,0.35); }
.lightbox__close { position:fixed; top:22px; right:28px; background:none; border:none; cursor:pointer; font-size:26px; font-weight:200; color:#000; z-index:100000; line-height:1; }
.lightbox__close:hover { opacity:0.5; }
.lightbox--dark .lightbox__close { color:#fff; }
.lightbox__arrow { background:none; border:none; cursor:pointer; font-size:30px; font-weight:200; color:#000; padding:0 28px; line-height:1; user-select:none; flex-shrink:0; }
.lightbox__arrow:hover { opacity:0.5; }
.lightbox--dark .lightbox__arrow { color:#fff; }
.lightbox__stage { flex:1; height:100%; min-width:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lightbox__img { max-width:75vw; max-height:85vh; object-fit:contain; display:block; pointer-events:none; }

/* ABOUT */
.about { padding:100px 120px 120px; }
.about__title { font-family:'Aguafina Script',cursive; font-style:normal; font-size:42px; font-weight:400; color:#000; margin-bottom:40px; text-align:center; }
.about__inner { display:flex; flex-direction:row; align-items:center; gap:60px; max-width:1100px; margin:0 auto; }
.about__image-wrap { width:340px; flex-shrink:0; }
.about__image { width:100%; height:auto; display:block; }
.about__text-wrap { flex:1; }
.about__text { font-family:'Montserrat',sans-serif; font-size:15px; font-weight:400; line-height:1.75; color:#000; margin-bottom:28px; }
.about__text:last-child { margin-bottom:0; }

/* COLLAB */
.collab { position:relative; padding:100px 120px 120px; display:flex; flex-direction:column; align-items:center; }
.collab__img-side { position:absolute; right:-20px; bottom:120px; width:440px; height:420px; pointer-events:none; }
.collab__img-side img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
.collab__title { font-family:'Aguafina Script',cursive; font-style:normal; font-size:42px; font-weight:400; color:#000; margin-bottom:40px; text-align:center; }
.collab__inner { max-width:600px; width:100%; }
.collab__text { font-family:'Montserrat',sans-serif; font-size:14px; line-height:1.7; color:#000; margin-bottom:32px; }
.collab__form { display:flex; flex-direction:column; gap:20px; }
.collab__row { display:flex; flex-direction:column; }
.collab__input { font-family:'Montserrat',sans-serif; font-size:14px; background:transparent; border:none; outline:none; padding:8px 0; color:#000; width:100%; }
.collab__textarea { resize:none; min-height:100px; }
.collab__input::placeholder,.collab__textarea::placeholder { color:#aaa; }
body.night-mode .collab__input::placeholder,body.night-mode .collab__textarea::placeholder { color:#A0F8FF; }
.collab__btn { font-family:'Montserrat',sans-serif; font-size:15px; font-weight:500; letter-spacing:0.08em; background:transparent; border:none; padding:12px 40px; cursor:pointer; color:#000; align-self:center; margin-top:10px; }
.collab__btn:hover { opacity:0.6; }
.collab__btn:disabled { opacity:0.4; cursor:default; }
.collab__status { font-family:'Montserrat',sans-serif; font-size:13px; color:#000; text-align:center; margin-top:14px; }


/* ======= MOBILE ======= */
@media (max-width: 700px) {
  /* no hover on touch screens: never show the cursor-following cover */
  #cursor-cover { display:none !important; }

  .daynight-toggle { gap:20px !important; padding:10px 0 4px !important; }
  .daynight-btn { height:36px !important; }
  /* nav: horizontal bar on top */
  .site-nav { left:0; right:0; top:0; transform:none; flex-direction:row; justify-content:center; gap:22px; padding:14px 10px; background:rgba(255,255,255,0.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  body.night-mode .site-nav { background:rgba(115,197,227,0.92); }
  .site-nav__link { font-size:13px; }

  /* section titles */
  .projects__title, .about__title, .collab__title { font-size:34px; }

  /* projects: single column instead of absolute grid */
  .projects { padding:60px 0 60px; }
  .projects__grid { height:auto; max-width:none; display:flex; flex-direction:column; align-items:center; gap:56px; padding:0 24px; }
  .proj { position:static; transform:none; width:auto; height:auto; max-width:150px; max-height:150px; }
  .proj img { width:auto; height:auto; max-width:150px; max-height:150px; object-fit:contain; }
  .proj--4 { max-width:210px; max-height:210px; }
  .proj--4 img { max-width:210px; max-height:210px; }
  .proj--5 { max-width:110px; max-height:110px; }
  .proj--5 img { max-width:110px; max-height:110px; }

  /* about: one column */
  .about { padding:60px 24px 60px; }
  .about__inner { flex-direction:column; align-items:center; gap:32px; }
  .about__image-wrap { width:min(170px, 37.5vw); }
  .about__text { padding-top:0; }

  /* collab: flower peeks from bottom-right corner */
  .collab { padding:60px 24px 200px; }
  .collab__img-side { width:200px; right:-45px; bottom:-10px; }

  /* lightbox */
  .lightbox__arrow { padding:0 8px; font-size:26px; }
  .lightbox__img { max-width:76vw; max-height:75vh; }
  .lightbox__close { top:14px; right:16px; }
}