:root{
  --bg:#050505;
  --text:#f4f4f0;
  --soft:#d7d7d2;
  --muted:rgba(244,244,240,0.62);
  --faint:rgba(244,244,240,0.12);
  --green:#cbff0c;
  --page:1120px;
  --copy:720px;
  --edge:clamp(20px,4vw,48px);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  background:var(--bg);
}

body{
  margin:0;
  min-width:280px;
  background:var(--bg);
  color:var(--text);
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{
  max-width:100%;
}

a{
  color:inherit;
}

::selection{
  background:var(--green);
  color:#000;
}

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:999;
  padding:10px 14px;
  background:var(--green);
  color:#000;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:translateY(-160%);
}

.skip-link:focus{
  transform:translateY(0);
}

a:focus-visible,
summary:focus-visible{
  outline:2px solid var(--green);
  outline-offset:4px;
}

/* -------------------------------------------------
   CURSOR — POINTER DEVICES ONLY
   ------------------------------------------------- */

@media (hover:hover) and (pointer:fine){
  body{
    cursor:url("cursor.png") 4 4, auto;
  }

  a,
  button,
  summary{
    cursor:url("cursor.png") 4 4, pointer;
  }
}

/* -------------------------------------------------
   HOMEPAGE
   ------------------------------------------------- */

.home-page{
  overflow:hidden;
}

.hero{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:100svh;
  padding:var(--edge);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}

.hero-header{
  position:absolute;
  inset:var(--edge) var(--edge) auto var(--edge);
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
}

.title h1{
  margin:0;
  font-weight:400;
  font-size:clamp(34px,4vw,52px);
  line-height:.95;
  letter-spacing:clamp(2px,.28vw,4px);
  text-transform:uppercase;
}

.tagline,
.site-tagline{
  margin-top:8px;
  font-size:12px;
  line-height:1;
  letter-spacing:1.35px;
  text-transform:uppercase;
  opacity:.7;
}

.hero-nav,
.site-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero-nav a,
.site-nav a{
  min-height:44px;
  padding:10px 18px;
  border:1px solid var(--green);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  text-decoration:none;
  font-size:12px;
  line-height:1;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}

.hero-nav a:hover,
.site-nav a:hover,
.site-nav a.active{
  background:var(--green);
  color:#000;
}

.hero-content{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  position:relative;
  z-index:1;
}

.hero-image-link{
  display:flex;
  justify-content:center;
  width:100%;
}

.hero img{
  display:block;
  width:min(860px,88vw);
  max-height:72dvh;
  height:auto;
  object-fit:contain;
  margin:0 auto;
  transition:opacity .18s ease,transform .18s ease;
}

.hero-image-link:hover img{
  opacity:.92;
  transform:scale(1.008);
}

/* -------------------------------------------------
   SHARED SUBPAGE SHELL
   ------------------------------------------------- */

.page{
  width:min(100%,var(--page));
  margin:0 auto;
  padding:var(--edge) var(--edge) clamp(68px,9vw,110px);
}

.site-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:28px;
  margin-bottom:clamp(48px,7vw,82px);
}

.site-brand{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.site-brand a{
  color:var(--text);
  text-decoration:none;
}

.site-name{
  display:block;
  font-weight:400;
  font-size:clamp(28px,3vw,38px);
  line-height:.95;
  letter-spacing:clamp(2px,.25vw,3px);
  text-transform:uppercase;
}

.page-title{
  margin:0 0 24px;
  color:var(--green);
  font-size:12px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

/* -------------------------------------------------
   BIO
   ------------------------------------------------- */

.bio-text{
  max-width:var(--copy);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--soft);
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.72;
  letter-spacing:.1px;
}

.bio-text p{
  margin:0 0 1.45em;
}

.highlight{
  color:var(--green);
  font-weight:500;
}

.inline-link{
  color:inherit;
  text-decoration-color:rgba(203,255,12,.55);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.inline-link:hover{
  color:var(--green);
}

/* -------------------------------------------------
   WORKS — EDITORIAL DISCLOSURE INDEX
   ------------------------------------------------- */

.works-intro{
  max-width:var(--copy);
  margin-bottom:clamp(38px,5vw,58px);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.works-intro p{
  margin:0;
  color:var(--soft);
  font-size:clamp(15px,1.35vw,17px);
  line-height:1.55;
}

.works-index{
  border-top:1px solid rgba(203,255,12,.36);
}

.work-group{
  border-bottom:1px solid rgba(203,255,12,.28);
}

.works-summary{
  min-height:64px;
  padding:18px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 22px;
  align-items:center;
  gap:18px;
  list-style:none;
  color:var(--green);
  user-select:none;
}

.works-summary::-webkit-details-marker{
  display:none;
}

.works-summary::marker{
  display:none;
  content:"";
}

.works-summary h2{
  margin:0;
  min-width:0;
  font-size:clamp(12px,1.15vw,14px);
  line-height:1.25;
  font-weight:500;
  letter-spacing:1px;
  text-transform:uppercase;
}

.summary-count{
  color:var(--muted);
  font-size:11px;
  line-height:1;
  letter-spacing:1px;
}

.summary-symbol{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  font-size:20px;
  line-height:1;
  font-weight:300;
}

.summary-symbol::before{
  content:"+";
}

.work-group[open] .summary-symbol::before{
  content:"−";
}

.work-group[open] .works-summary{
  border-bottom:1px solid var(--faint);
}

@media (hover:hover){
  .works-summary:hover{
    color:#fff;
  }

  .works-summary:hover .summary-count{
    color:var(--green);
  }
}

.works-entries{
  padding:8px 0 34px clamp(120px,18vw,215px);
}

.entry{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:22px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.entry:last-of-type{
  border-bottom:0;
}

.year{
  padding-top:2px;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
  letter-spacing:1px;
  text-transform:uppercase;
}

.entry-main{
  min-width:0;
}

.entry-main h3{
  margin:0 0 5px;
  color:var(--text);
  font-size:14px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:.75px;
  text-transform:uppercase;
}

.entry-main p{
  margin:2px 0 0;
  color:rgba(244,244,240,.72);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:13px;
  line-height:1.45;
}

.no-year .entry-main{
  grid-column:2;
}

.section-cta{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.section-cta a{
  color:var(--green);
  text-decoration:none;
}

.section-cta a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* -------------------------------------------------
   CONTACT
   ------------------------------------------------- */

.contact-intro{
  max-width:var(--copy);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.contact-intro p{
  margin:0;
  color:var(--soft);
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.62;
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,6vw,70px);
  margin-top:clamp(48px,7vw,72px);
  border-top:1px solid rgba(203,255,12,.32);
}

.contact-panel{
  padding-top:20px;
}

.label{
  margin:0 0 9px;
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
  font-weight:400;
  letter-spacing:1.15px;
  text-transform:uppercase;
}

.email{
  margin:0;
  overflow-wrap:anywhere;
  font-size:clamp(12px,1.15vw,14px);
  line-height:1.35;
  letter-spacing:.55px;
  text-transform:uppercase;
}

.email a{
  color:var(--green);
  text-decoration:none;
}

.email a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.contact-copy{
  margin:16px 0 0;
  max-width:460px;
  color:rgba(244,244,240,.72);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:13px;
  line-height:1.55;
}

.social-links{
  margin-top:clamp(54px,8vw,86px);
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
}

.social-links a{
  color:var(--green);
  text-decoration:none;
  font-size:11px;
  line-height:1.3;
  letter-spacing:.75px;
  text-transform:uppercase;
}

.social-links a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* -------------------------------------------------
   TABLET / MOBILE
   ------------------------------------------------- */

@media (max-width:760px){

  .site-header{
    flex-direction:column;
    gap:24px;
    margin-bottom:48px;
  }

  .site-nav{
    width:100%;
  }

  .site-nav a{
    flex:0 0 auto;
  }

  .works-entries{
    padding-left:0;
  }

  .entry{
    grid-template-columns:82px minmax(0,1fr);
    gap:16px;
  }

  .contact-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

  .contact-panel + .contact-panel{
    padding-top:0;
  }
}

@media (max-width:560px){

  .hero{
    padding:22px 20px 26px;
  }

  .hero-header{
    inset:22px 20px auto 20px;
    display:block;
  }

  .title h1{
    max-width:290px;
    font-size:clamp(28px,8.3vw,38px);
  }

  .hero-nav{
    margin-top:24px;
    gap:8px;
  }

  .hero-nav a,
  .site-nav a{
    min-height:44px;
    padding:10px 14px;
    font-size:11px;
  }

  .hero img{
    width:min(100%,680px);
    max-height:58dvh;
  }

  .page{
    padding:24px 20px 66px;
  }

  .site-name{
    font-size:24px;
    line-height:1;
  }

  .site-nav{
    gap:8px;
  }

  .bio-text{
    font-size:15px;
    line-height:1.68;
  }

  .works-summary{
    min-height:60px;
    padding:17px 0;
    grid-template-columns:minmax(0,1fr) auto 20px;
    gap:10px;
  }

  .works-summary h2{
    font-size:11px;
    letter-spacing:.85px;
  }

  .summary-count{
    font-size:10px;
  }

  .works-entries{
    padding:4px 0 26px;
  }

  .entry{
    display:block;
    padding:15px 0;
  }

  .year{
    display:block;
    margin-bottom:6px;
  }

  .entry-main h3{
    font-size:13px;
  }

  .entry-main p{
    font-size:12.5px;
  }

  .social-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Allow very short landscape screens to scroll rather than clip content. */
@media (max-height:520px){
  .home-page{
    overflow:auto;
  }

  .hero{
    height:auto;
    min-height:520px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}