/* Minimal stylesheet — modal removed. Keep only gallery cursor rules and basic helpers. */
:root{ --site-accent:#111 }

.project .item img{ cursor: default; transition: none; }
.project .item video{ cursor: pointer; transition: none; }

/* Add any site-wide styles here as needed (kept intentionally minimal). */
/* Core/utility styles (only modal-specific bits are necessary here) */
:root{
  --modal-bg: rgba(255,255,255,0.6);
  --modal-panel-bg: rgba(255,255,255,0.94);
  --modal-radius: 12px;
  --modal-max-width: 1100px;
}

/* Make clickable media evident */
.project .item img {
  /* images are not interactive anymore — don't show pointer */
  cursor: default;
  transition: none;
}
.project .item video {
  /* videos still open the modal -> show pointer */
  cursor: pointer;
  transition: none;
}

/* Modal overlay that blurs everything behind it and slightly brightens */
.project-modal{
  position:fixed;
  inset:0;
  display:none; /* shown when active */
  align-items:center;
  justify-content:center;
  z-index:9999;
  /* subtle bright veil + heavy blur behind */
  background: rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(18px) brightness(1.06);
  backdrop-filter: blur(18px) brightness(1.06);
}
.project-modal[aria-hidden="false"]{
  display:flex;
}

.project-modal__box{
  width: min(96%, var(--modal-max-width));
  max-height: min(92vh, 1100px);
  background: var(--modal-panel-bg);
  border-radius: var(--modal-radius);
  box-shadow: 0 40px 80px rgba(20,20,30,0.25);
  padding: clamp(18px, 2.2vw, 32px);
  position:relative;
  overflow:hidden;
}
.project-modal__close{
  position:absolute;
  right:12px;
  top:10px;
  font-size:20px;
  border:0;
  background:transparent;
  cursor:pointer;
  color:#222;
}
.project-modal__inner{
  display:grid;
  grid-template-columns: 1fr; /* single column — text-only modal */
  gap:12px;
  align-items:center;
}
.project-modal__left{
  padding:12px 6px;
}
.project-modal__left h2{
  margin:0 0 12px 0;
  font-size:clamp(18px, 2.2vw, 28px);
}
.project-modal__left p{ color:#223; opacity:.9; line-height:1.45 }

/* .project-modal__right removed: no longer needed after preview removal */

/* Responsive stack on smaller screens */
@media (max-width:800px){
  .project-modal__inner{ grid-template-columns: 1fr; }
  .project-modal__right{ order:-1; }
}

/* When the modal is open we prefer not to scroll the document */
body.modal-open{
  overflow:hidden;
}
/* Core/utility styles (only modal-specific bits are necessary here) */
:root{
  --modal-bg: rgba(255,255,255,0.6);
  --modal-panel-bg: rgba(255,255,255,0.94);
  --modal-radius: 12px;
  --modal-max-width: 1100px;
}

/* Make clickable media evident */
.project .item img,
.project .item video {
  cursor: pointer;
  /* no animation on hover as requested */
  transition: none;
}

/* Modal overlay that blurs everything behind it and slightly brightens */
.project-modal{
  position:fixed;
  inset:0;
  display:none; /* shown when active */
  align-items:center;
  justify-content:center;
  z-index:9999;
  /* base veil — will be amplified when visible */
  background: rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(10px) brightness(1.0);
  backdrop-filter: blur(10px) brightness(1.0);
}
.project-modal[aria-hidden="false"]{
  display:flex;
  /* stronger blur + more brightness while modal is open */
  background: rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(28px) brightness(1.36);
  backdrop-filter: blur(28px) brightness(1.36);
}

.project-modal__box{
  /* full-bleed and transparent: no border, no shadow, no rounding */
  width:100vw;
  max-width:100vw;
  height:100vh;
  max-height:100vh;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  position:relative;
  overflow:hidden;
}
.project-modal__close{
  position:absolute;
  right:12px;
  top:10px;
  font-size:20px;
  border:0;
  background:transparent;
  cursor:pointer;
  color:#222;
}
.project-modal__inner{
  display:grid;
  /* left: text overlay, right: large image (almost fullscreen) */
  grid-template-columns: 34% 66%;
  gap:0;
  align-items:stretch;
  min-height:100vh;
}
.project-modal__left{
  padding: 42px 48px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
}
.project-modal__left h2{
  margin:0 0 12px 0;
  font-size:clamp(20px, 2.6vw, 36px);
  color: #000;
}
.project-modal__left p{ color:#000; opacity:1; line-height:1.45; white-space:pre-line }

.project-modal__right{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background: transparent; /* keep only blurred backdrop visible */
}
.project-modal__right img{
  /* huge image — almost fullscreen while preserving aspect ratio */
  max-width:92vw;
  max-height:96vh;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* Responsive stack on smaller screens */
@media (max-width:900px){
  .project-modal__inner{ grid-template-columns: 1fr; }
  .project-modal__right{ order:-1; }
  .project-modal__left{ padding: 20px; }
  .project-modal__right img{ max-width:96vw; max-height:60vh }
}

/* When the modal is open we prefer not to scroll the document */
body.modal-open{
  overflow:hidden;
}
/* Extracted styles from test.html -- kept comments and grouping for clarity */
:root{
  --bg:#000;
  --accent:#F8E82E;
  --gap:8px; /* tightened */
  --side:8px; /* unified side padding */
  --header-h:78px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* FIXED HEADER */
.fixed-brand{position:fixed;left:20px;top:18px;z-index:200;color:#fff;font-weight:800;font-size:24px}
.fixed-plus{position:fixed;right:20px;top:12px;z-index:200;font-size:38px;background:none;border:0;color:#fff;cursor:pointer;padding:4px}

/* OVERLAY */
.overlay{position:fixed;top:0;right:0;width:50%;height:100%;background:#fff;color:#000;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.9,.3,1);z-index:220;padding:40px;overflow:auto}
.overlay.open{transform:translateX(0)}

/* MAIN */
main{padding-top:100px;width:100%;max-width:100%;margin:0 auto}
.projects{display:flex;flex-direction:column;gap:var(--gap);padding:0 var(--side) 80px}

/* each project */
.project{display:flex;gap:var(--gap);position:relative;width:100%}
.gallery-wrap{flex:1;position:relative;width:100%}

/* gallery */
.gallery{overflow:hidden;width:100%;background:#000;margin:0;padding:0}
.track{display:flex;gap:var(--gap);transition:transform .3s cubic-bezier(.2,.9,.3,1);will-change:transform}

/* image & video */
.item{position:relative;height:70vh;flex:0 0 auto;background:#000}
.item img, .item video{width:100%;height:100%;object-fit:cover;display:block;border:none;outline:none}

/* caption */
.caption{position:absolute;left:14px;bottom:14px;color:var(--accent);font-size:12px;font-weight:600;text-shadow:none}

/* arrows */
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:220px;height:220px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;padding:0;margin:0;z-index:50;outline:none}
.arrow::before{content:"";display:block;width:34px;height:34px;background:#fff;border-radius:50%;opacity:0;transform:scale(.8);transition:opacity .12s ease, transform .12s ease;pointer-events:none}
.arrow svg{display:none}
.arrow.left::before{transform:translateX(-44px) scale(.8)}
.arrow.right::before{transform:translateX(44px) scale(.8)}
.gallery:hover .arrow.left::before, .arrow.left:hover::before{opacity:1;transform:translateX(-44px) scale(1)}
.gallery:hover .arrow.right::before, .arrow.right:hover::before{opacity:1;transform:translateX(44px) scale(1)}
.arrow.left{left:0}
.arrow.right{right:0}
.arrow.hidden{opacity:0;pointer-events:none}

/* fixed overlay arrows (fallback) - top-level elements so mix-blend-mode reliably inverts whatever is beneath */
/* removed overlay-arrow fixed-position fallback to avoid jumping behavior */

@media(max-width:900px){.overlay{width:80%}.item{height:60vh}}

/* blur effect when overlay is open - applies to main content and fixed header */
body.overlay-open main, body.overlay-open .fixed-brand{filter:blur(6px);pointer-events:auto;transition:filter .18s ease}

@media(max-width:600px){.item{height:48vh}.fixed-brand{font-size:20px}.fixed-plus{font-size:30px}}

/* end extracted styles */

/* custom circular cursor that inverts the color underneath using mix-blend-mode */
/* disabled on touch devices by not applying hide-default-cursor on body */
.custom-cursor{
  position:fixed; left:0; top:0; width:18px; height:18px; border-radius:50%;
  background:#fff; mix-blend-mode:difference; z-index:9999; pointer-events:none;
  transform:translate(-50%,-50%) scale(1); transition:transform .08s ease, opacity .12s ease;
  opacity:0; will-change:transform, opacity;
}

/* hide the native cursor when class is set on body */
body.hide-default-cursor, body.hide-default-cursor * { cursor:none !important; }

/* slightly larger interactive pulse on pointer down */
.custom-cursor.down { transform: translate(-50%,-50%) scale(.8); }