:root{
    --bg:#070707;
    --bg-2:#0d0d0c;
    --ink:#f1f0ea;
    --ink-dim:#8b8b84;
    --accent:#d0fb04;
    --line:rgba(241,240,234,.14);
    --display:'Archivo',sans-serif;
    --serif:'Fraunces',serif;
    --mono:'Space Mono',monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--serif);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
  ::selection{background:var(--accent);color:#000}

  /* ============ THREE.JS BACKGROUND ============ */
  #gl{position:fixed;inset:0;z-index:0;pointer-events:none}

  /* ============ LOADER ============ */
  #loader{
    user-select:none;-webkit-user-select:none;
    position:fixed;inset:0;z-index:200;background:var(--bg);
    display:flex;flex-direction:column;justify-content:center;align-items:center;
  }
  .loader-name{
    font-family:var(--display);font-stretch:118%;font-weight:840;
    font-size:clamp(2.6rem,11vw,9.5rem);
    line-height:.92;letter-spacing:-.015em;text-align:center;
    text-transform:uppercase;
  }
  .loader-name .ln{display:block;overflow:hidden}
  .loader-sub{
    margin-top:1.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;
    color:var(--ink-dim);text-transform:uppercase;
  }
  #loader-count{
    position:absolute;bottom:2rem;right:2rem;
    font-family:var(--mono);font-size:.86rem;color:var(--accent);
  }
  #loader-bar{
    position:absolute;bottom:0;left:0;height:2px;width:0%;
    background:var(--accent);
  }

  /* ============ HEADER (giant name, Macari style) ============ */
  header{
    position:fixed;top:0;left:0;right:0;z-index:60;
    pointer-events:none;
    user-select:none;-webkit-user-select:none;
  }
  #big-name{display:block;width:100%;height:auto;margin-top:-.4vw}
  #big-name text{
    font-family:var(--display);font-stretch:125%;font-weight:900;
    fill:var(--accent);letter-spacing:-.01em;
  }
  .header-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:.5rem clamp(1.2rem,3vw,2.4rem) 0;
    font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;
    text-transform:uppercase;color:var(--ink-dim);
  }
  .menu-btn{
    pointer-events:auto;
    font-family:var(--display);font-stretch:115%;font-weight:740;
    font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);transition:color .25s;
  }
  .menu-btn:hover{color:var(--accent)}
  .wordmark span,.menu-btn span,.nav-item span,.filter-btn span,.detail-close span{display:inline-block;white-space:pre}

  /* ============ MENU OVERLAY (green, 50/50, iris shutter) ============ */
  #menu{
    user-select:none;-webkit-user-select:none;
    position:fixed;inset:0;z-index:100;background:var(--accent);
    display:grid;grid-template-columns:1fr 1fr;
    visibility:hidden;
    will-change:clip-path;
  }
  .menu-photo{position:relative;overflow:hidden;background:#0a0a0a}
  .menu-photo img{
    width:100%;height:100%;object-fit:cover;
    filter:grayscale(1) contrast(1.08);
  }
  .menu-photo::after{
    content:"";position:absolute;inset:0;
    background:var(--accent);mix-blend-mode:multiply;opacity:.28;
  }
  .menu-photo .mp-tag{
    position:absolute;left:1.4rem;bottom:1.4rem;z-index:2;
    font-family:var(--mono);font-size:.74rem;letter-spacing:.28em;
    text-transform:uppercase;color:var(--accent);
  }
  .menu-links{
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(1.5rem,5vw,5rem);gap:.4rem;position:relative;
  }
  .nav-item{
    font-family:var(--display);font-stretch:122%;font-weight:880;
    font-size:clamp(2.4rem,7.5vw,6.4rem);line-height:1.02;
    letter-spacing:-.01em;text-transform:uppercase;
    color:#0a0a0a;text-align:left;
    transition:color .25s,transform .35s cubic-bezier(.22,1,.36,1);
  }
  .nav-item:hover{color:#3a3a33;transform:translateX(.35em)}
  .menu-foot{
    position:absolute;bottom:1.6rem;left:clamp(1.5rem,5vw,5rem);right:clamp(1.5rem,5vw,5rem);
    display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
    text-transform:uppercase;color:#0a0a0a;
  }
  .menu-foot a:hover{text-decoration:underline}
  #menu-close{color:#0a0a0a;z-index:5}
  #menu-close i{color:#0a0a0a}

  /* ============ GRID / WORK ============ */
  #stage{
    position:fixed;inset:0;z-index:10;overflow:hidden;
    touch-action:none;cursor:grab;
    user-select:none;-webkit-user-select:none;
  }
  #stage.dragging{cursor:grabbing}
  #world{position:absolute;inset:0;will-change:transform}
  .tile{
    position:absolute;top:0;left:0;visibility:hidden;
    will-change:transform;
  }
  .tile-inner{position:relative;overflow:hidden;background:var(--bg-2)}
  .tile img{
    width:100%;height:100%;object-fit:cover;
    transform:scale(1.04);
    transition:transform .7s cubic-bezier(.22,1,.36,1),filter .7s;
    filter:saturate(.92);
    user-select:none;-webkit-user-drag:none;pointer-events:none;
  }
  .tile:hover img{transform:scale(1.12);filter:saturate(1.05)}
  .tile figcaption{
    position:absolute;left:0;bottom:-1.5rem;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--ink-dim);
    display:flex;gap:.8rem;align-items:baseline;
    transition:color .3s;
  }
  .tile:hover figcaption{color:var(--ink)}
  .tile figcaption b{color:var(--accent);font-weight:400}

  .empty-note{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    text-align:center;font-family:var(--display);font-stretch:118%;font-weight:820;
    font-size:clamp(1.4rem,4vw,2.6rem);text-transform:uppercase;letter-spacing:.02em;
    color:var(--ink-dim);
  }
  .empty-note span{
    display:block;margin-top:.9rem;font-family:var(--mono);font-weight:400;
    font-size:.72rem;letter-spacing:.24em;color:var(--accent);text-transform:uppercase;
  }

  /* ============ HUD (filters + hints) ============ */
  #hud{
    user-select:none;-webkit-user-select:none;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
    padding:1.3rem clamp(1.2rem,3vw,2.4rem);
    pointer-events:none;
  }
  .hud-left,.hud-right{
    font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;
  }
  .hud-left b{color:var(--accent);font-weight:400}
  #filters{
    pointer-events:auto;display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;
    max-width:70vw;
  }
  .filter-btn{
    font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-dim);
    border:1px solid var(--line);border-radius:99px;
    padding:.5rem .9rem;transition:all .25s;background:rgba(7,7,7,.55);
    backdrop-filter:blur(8px);
  }
  .filter-btn:hover{color:var(--ink);border-color:var(--ink-dim)}
  .filter-btn.active{color:#000;background:var(--accent);border-color:var(--accent)}
  .filter-btn i{font-style:normal;opacity:.55;letter-spacing:.05em}
  .filter-btn.active i{opacity:.75}

  /* ============ DETAIL OVERLAY ============ */
  .panel{
    position:fixed;inset:0;z-index:90;background:var(--bg-2);
    transform:translateY(100%);visibility:hidden;
    overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .panel::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(241,240,234,.055) 1px,transparent 1px);
    background-size:24px 24px;
  }
  .panel-inner{position:relative;z-index:1;padding:0 clamp(1.2rem,4vw,4rem) 6rem}
  .detail-close{
    position:fixed;top:1.4rem;right:clamp(1.2rem,3vw,2.4rem);z-index:95;
    font-family:var(--display);font-stretch:115%;font-weight:740;font-size:.82rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
    display:flex;align-items:center;gap:.6rem;
  }
  .detail-close i{
    font-style:normal;color:var(--accent);font-size:1rem;line-height:1;
    transition:transform .3s;
  }
  .detail-close:hover i{transform:rotate(90deg)}

  .d-eyebrow{
    padding-top:clamp(5.5rem,12vh,8rem);
    font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;
    text-transform:uppercase;color:var(--accent);
    display:flex;gap:1.4rem;flex-wrap:wrap;
  }
  .d-eyebrow span{color:var(--ink-dim)}
  .d-title{
    font-family:var(--display);font-stretch:122%;font-weight:860;
    font-size:clamp(2.6rem,9.5vw,8.6rem);line-height:.92;letter-spacing:-.015em;
    text-transform:uppercase;margin:.9rem 0 2.6rem;
    overflow-wrap:anywhere;
  }
  .d-title .word{display:inline-block;overflow:hidden;vertical-align:top}
  .d-title .word>span{display:inline-block}
  .d-hero{
    margin:0;padding:0 5vw;
    position:relative;background:transparent;
    display:flex;justify-content:center;
  }
  .d-hero img{
    width:auto;max-width:100%;
    max-height:150vh;height:auto;
    object-fit:contain;
    transition:filter .5s ease;
  }
  .d-hero img:not(.is-full){filter:blur(7px)}
  .d-hero img.is-full{filter:none}
  .d-hero .credit{
    position:absolute;bottom:1rem;right:6vw;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:rgba(241,240,234,.7);
    text-transform:uppercase;mix-blend-mode:difference;
  }

  .d-quote{
    max-width:62rem;margin:clamp(4rem,10vh,7rem) auto;
    font-family:var(--serif);font-weight:340;font-style:italic;
    font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.32;
    text-align:center;font-optical-sizing:auto;
  }
  .d-quote b{color:var(--accent);font-weight:340}
  .d-quote .q-src{
    display:block;margin-top:1.4rem;font-family:var(--mono);font-style:normal;
    font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);
  }

  .d-cols{
    display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,6vw,6rem);
    max-width:78rem;margin:0 auto;align-items:start;
  }
  .d-statement{
    font-family:var(--display);font-stretch:110%;font-weight:620;
    font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.3;text-transform:uppercase;
    letter-spacing:.01em;margin-bottom:1.6rem;
  }
  .d-statement b{color:var(--accent);font-weight:620}
  .d-body{
    font-family:var(--serif);font-weight:360;font-size:1.04rem;line-height:1.75;
    color:#cfcec6;max-width:42rem;
  }
  .d-body p+p{margin-top:1.1em}
  .d-facts{
    border-top:1px solid var(--line);
    font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;width:100%;
    border-collapse:collapse;
  }
  .d-facts caption{
    text-align:left;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
    color:var(--accent);padding:0 0 1rem;caption-side:top;
  }
  .d-facts th,.d-facts td{
    text-align:left;padding:.85rem 0;border-bottom:1px solid var(--line);
    vertical-align:top;
  }
  .d-facts th{color:var(--ink-dim);font-weight:400;text-transform:uppercase;width:42%}
  .d-facts td{color:var(--ink)}

  .d-more-label{
    max-width:78rem;margin:clamp(4.5rem,11vh,7.5rem) auto 1.4rem;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;
    text-transform:uppercase;color:var(--ink-dim);
    display:flex;justify-content:space-between;align-items:baseline;
  }
  .d-more-label b{color:var(--accent);font-weight:400}
  .d-masonry{max-width:78rem;margin:0 auto;columns:3;column-gap:1rem}
  .d-masonry figure{break-inside:avoid;margin:0 0 1rem;overflow:hidden;background:var(--bg);cursor:pointer}
  .d-masonry img{width:100%;transform:scale(1.02);transition:transform .7s cubic-bezier(.22,1,.36,1);filter:saturate(.92)}
  .d-masonry figure:hover img{transform:scale(1.08);filter:saturate(1.05)}

  .d-next{
    max-width:78rem;margin:5rem auto 0;padding-top:2.5rem;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;
  }
  .d-next .nx-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}
  .d-next .nx-title{
    font-family:var(--display);font-stretch:118%;font-weight:820;text-transform:uppercase;
    font-size:clamp(1.4rem,4.5vw,3rem);line-height:1;transition:color .3s;text-align:right;
  }
  .d-next:hover .nx-title{color:var(--accent)}

  /* ============ ABOUT / CONTACT PANELS ============ */
  .page-title{
    font-family:var(--display);font-stretch:122%;font-weight:860;
    font-size:clamp(3rem,12vw,10rem);line-height:.9;letter-spacing:-.015em;
    text-transform:uppercase;padding-top:clamp(5.5rem,14vh,9rem);
  }
  .page-title em{font-style:normal;color:var(--accent)}
  .about-grid{
    display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,6rem);
    max-width:78rem;margin:clamp(2.5rem,6vh,4rem) auto 0;align-items:start;
  }
  .about-lede{
    font-family:var(--serif);font-style:italic;font-weight:340;
    font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.4;margin-bottom:1.6rem;
  }
  .svc{border-top:1px solid var(--line)}
  .svc li{
    list-style:none;display:flex;justify-content:space-between;align-items:baseline;
    padding:1rem 0;border-bottom:1px solid var(--line);
    font-family:var(--display);font-stretch:112%;font-weight:600;text-transform:uppercase;
    font-size:clamp(.95rem,1.6vw,1.2rem);letter-spacing:.04em;
  }
  .svc li span{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;color:var(--ink-dim);font-weight:400}
  .contact-big{
    display:block;margin:clamp(2.5rem,7vh,4.5rem) 0 1rem;
    font-family:var(--display);font-stretch:115%;font-weight:800;text-transform:uppercase;
    font-size:clamp(1.5rem,5.6vw,4.6rem);line-height:1.05;letter-spacing:-.01em;
    color:var(--accent);overflow-wrap:anywhere;
  }
  .contact-big:hover{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
  .contact-meta{
    display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:2.5rem;
    font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
  }
  .contact-meta a:hover{color:var(--accent)}
  .contact-meta .cm b{display:block;color:var(--ink);font-weight:400;margin-top:.4rem}

  /* ============ RESPONSIVE ============ */
  @media(max-width:860px){
    #menu{grid-template-columns:1fr;grid-template-rows:38% 62%}
    .menu-links{justify-content:flex-start;padding-top:2.5rem}
    .d-cols,.about-grid{grid-template-columns:1fr}
    .d-masonry{columns:2}
    #hud{flex-direction:column;align-items:stretch;gap:.7rem}
    .hud-left,.hud-right{display:flex;justify-content:space-between}
    .hud-right{display:none}
    #filters{max-width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;
      padding-bottom:.2rem;scrollbar-width:none}
    #filters::-webkit-scrollbar{display:none}
    .filter-btn{flex:0 0 auto}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  }