/* ============================================================
   COGNIFORM — NOISE, RESOLVED.
   Ink + 1-bit dither foundation. Color enters only as signal:
   data pixels, glitch slices, accent labels. Primary: #F94721.
   ============================================================ */

@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62.5% 125%;
  font-display:swap;
}
@font-face{
  font-family:'JBMono';
  src:url('../fonts/jbmono-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}

:root{
  --ink:#0a0a0b;
  --ink-2:#121214;
  --bone:#e9e7e1;
  --mid:#8a887f;
  --dim:#55534d;
  --line:#232326;
  --accent:#f94721;       /* cogniform orange */
  --sig-red:#ff4053;
  --sig-blue:#2e3fe0;
  --sig-magenta:#e06bd6;
  --sig-lime:#d6e34f;
  --sig-cyan:#6fe3d9;
  --pad:clamp(20px, 4vw, 64px);
  --display:'Archivo', system-ui, sans-serif;
  --mono:'JBMono', ui-monospace, monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--display);
  font-weight:410;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--ink)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
sup{font-size:.45em;font-weight:500}

:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

#work,#about,#contact{scroll-margin-top:56px}

.mono-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mid);
}
.mono-label--accent{color:var(--accent)}

/* faint dot-matrix field (ref: scattered data grids) */
.caps,.about,.footer{
  background-image:radial-gradient(rgba(233,231,225,.045) 1px, transparent 1px);
  background-size:52px 52px;
}

/* ===================== NAV ===================== */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px var(--pad);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  mix-blend-mode:difference;
  color:#fff;
}
.nav a{position:relative}
.nav__brand{font-weight:400}
.nav__links{display:flex;gap:28px}
.nav__meta{display:flex;gap:18px;color:rgba(255,255,255,.55)}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 var(--pad) clamp(28px,5vh,56px);
  overflow:hidden;
}
.hero__canvas,
.hero__fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero__fallback{filter:grayscale(1) contrast(1.1);opacity:.5;display:none}
.no-canvas .hero__fallback{display:block}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.2) 35%, rgba(10,10,11,.38) 68%, rgba(10,10,11,.94) 100%),
    rgba(10,10,11,.42);
  pointer-events:none;
}
.hero__frame{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero__corner{
  position:absolute;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--mid);
}
.hero__corner--tl{top:64px;left:var(--pad)}
.hero__corner--tr{top:64px;right:var(--pad)}
.hero__corner--bl{bottom:24px;left:var(--pad)}
.hero__corner--br{bottom:24px;right:var(--pad);color:var(--accent)}

.hero__title{
  position:relative;
  z-index:3;
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(40px, 12.5vw, 198px);
  line-height:.88;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin-bottom:clamp(20px,3vh,36px);
}
.hero__line{display:block;overflow:hidden}
.hero__line--indent{padding-left:clamp(28px,8vw,160px)}
.hero__word{display:inline-block;will-change:transform}

.hero__sub{
  position:relative;
  z-index:3;
  max-width:48ch;
  color:#bdbbb2;
  text-shadow:0 1px 12px rgba(10,10,11,.85);
  font-size:clamp(14px,1.3vw,17px);
  margin-bottom:clamp(28px,5vh,52px);
  text-wrap:pretty;
}
.hero__scroll{
  position:relative;z-index:3;
  display:inline-flex;align-items:center;gap:12px;
  width:max-content;
}
.hero__scroll .mono-label{color:var(--bone);transition:color .25s}
.hero__scroll:hover .mono-label{color:var(--accent)}
.hero__scroll-arrow{
  font-size:13px;
  animation:nudge 1.8s ease-in-out infinite;
}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ===================== MARQUEE ===================== */
.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  padding:14px 0;
  background:var(--ink);
}
.marquee__track{
  display:flex;
  width:max-content;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--dim);
  white-space:nowrap;
}

/* ===================== SECTION HEAD ===================== */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:20px var(--pad);
  border-bottom:1px solid var(--line);
}

/* ===================== WORK INDEX ===================== */
.work{position:relative}
.work__row{border-bottom:1px solid var(--line)}
.work__link{
  position:relative;
  display:grid;
  grid-template-columns:minmax(76px,110px) 1.55fr minmax(0,.85fr) 28px;
  align-items:center;
  gap:clamp(12px,2vw,32px);
  padding:clamp(18px,2.6vw,30px) var(--pad);
  cursor:pointer;
  isolation:isolate;
}
.work__link::after{ /* invert wipe */
  content:'';
  position:absolute;inset:0;
  background:var(--bone);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .38s cubic-bezier(.76,0,.24,1);
  z-index:-1;
}
.work__link:hover::after,
.work__link:focus-visible::after{transform:scaleY(1)}
.work__link:hover,
.work__link:focus-visible{color:var(--ink)}
.work__link:hover .work__code,
.work__link:focus-visible .work__code{color:var(--p-accent,var(--accent))}
.work__link:hover .work__meta,
.work__link:hover .work__arrow,
.work__link:focus-visible .work__meta,
.work__link:focus-visible .work__arrow{color:var(--ink)}

.work__code{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);transition:color .2s;white-space:nowrap}
.work__title{
  font-stretch:118%;
  font-weight:600;
  font-size:clamp(24px,3vw,44px);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.work__meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work__arrow{font-size:18px;color:var(--dim);transition:color .2s,transform .3s}
.work__link:hover .work__arrow{transform:translate(3px,-3px)}

.work__thumb{display:none}

/* floating preview — sized by image aspect, cycles gallery */
.preview{
  position:fixed;
  z-index:40;
  pointer-events:none;
  opacity:0;
  top:0;left:0;
}
.preview__stage{
  position:relative;
  background:var(--ink-2);
  overflow:hidden;
  transition:width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1);
}
.preview img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.preview__dither{
  image-rendering:pixelated;
  filter:contrast(1.05);
}
.preview__counter{
  position:absolute;
  right:0;
  bottom:-22px;
  color:var(--bone);
  background:var(--ink);
  padding:3px 8px;
}
.preview.is-glitch .preview__color{
  animation:chromaflicker .18s steps(2) 2;
}
/* color-fringe flicker with zero movement */
@keyframes chromaflicker{
  0%,100%{filter:none}
  25%{filter:drop-shadow(-3px 0 var(--sig-red)) drop-shadow(3px 0 var(--sig-cyan))}
  75%{filter:drop-shadow(2px 0 var(--sig-magenta)) drop-shadow(-2px 0 var(--sig-lime))}
}
/* text glitch (footer / next-project) keeps its kick */
@keyframes rgbsplit{
  0%{transform:translate(0)}
  25%{transform:translate(3px,0);filter:drop-shadow(-4px 0 var(--sig-red)) drop-shadow(4px 0 var(--sig-cyan))}
  50%{transform:translate(-2px,1px)}
  75%{transform:translate(1px,-1px);filter:drop-shadow(3px 0 var(--sig-magenta)) drop-shadow(-3px 0 var(--sig-lime))}
  100%{transform:translate(0)}
}

/* ===================== CAPABILITIES ===================== */
.caps{border-top:1px solid var(--line)}
.caps__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);
  gap:clamp(32px,5vw,96px);
  padding:clamp(48px,7vw,110px) var(--pad);
}
.caps__statement{
  font-stretch:105%;
  font-weight:480;
  font-size:clamp(20px,2.2vw,30px);
  line-height:1.32;
  letter-spacing:-.005em;
  max-width:26ch;
  text-wrap:pretty;
}
.caps__cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);
}
.caps__col li{
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
  color:var(--bone);
}
.caps__col-head{
  border-bottom:1px solid var(--accent)!important;
  padding-bottom:12px!important;
  color:var(--bone);
}

/* ===================== ABOUT ===================== */
.about{border-top:1px solid var(--line)}
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,96px);
  padding:clamp(48px,7vw,110px) var(--pad);
  align-items:start;
}
.about__media{position:relative}
.about__img{width:100%;aspect-ratio:3/2;object-fit:cover}
.about__img--dither{
  position:absolute;inset:0;
  image-rendering:pixelated;
  height:100%;
}
.about__cap{display:block;margin-top:12px}
.about__lede{
  font-stretch:108%;
  font-weight:520;
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.3;
  letter-spacing:-.008em;
  margin-bottom:24px;
  text-wrap:pretty;
}
.about__text p+p{margin-top:16px;color:var(--mid);max-width:58ch}
.about__lists{
  margin-top:36px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.about__list-head{display:block;margin-bottom:10px;color:var(--accent)}
.about__plain li{
  font-size:13px;
  color:var(--mid);
  padding:5px 0;
  border-bottom:1px solid var(--line);
}

/* ===================== FOOTER ===================== */
.footer{border-top:1px solid var(--line)}
.footer__cta{
  display:block;
  position:relative;
  padding:clamp(40px,7vw,100px) var(--pad) clamp(24px,4vw,48px);
  font-stretch:125%;
  font-weight:660;
  font-size:clamp(36px,9.2vw,150px);
  line-height:.9;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.footer__cta-line{display:block}
.footer__cta-line--indent{padding-left:clamp(24px,7vw,140px)}
.footer__cursor{animation:blink 1.1s steps(1) infinite;color:var(--accent)}
@keyframes blink{50%{opacity:0}}

/* contact grid: info displayed, not mailto'd */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.contact-cell{
  padding:clamp(20px,2.6vw,34px) clamp(18px,2vw,32px);
  border-right:1px solid var(--line);
  min-width:0;
}
.contact-cell:last-child{border-right:0}
.contact-cell__head{display:block;margin-bottom:12px;color:var(--accent)}
.contact-cell__value{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  color:var(--bone);
  font-family:var(--display);
  cursor:pointer;
  padding:0;
}
.contact-cell__value--static{cursor:default}
.contact-cell__text{
  display:block;
  font-stretch:108%;
  font-weight:500;
  font-size:clamp(15px,1.35vw,19px);
  letter-spacing:-.005em;
  overflow-wrap:anywhere;
  transition:color .2s;
}
button.contact-cell__value:hover .contact-cell__text,
button.contact-cell__value:focus-visible .contact-cell__text{color:var(--accent)}
.contact-cell__hint{display:block;margin-top:8px;color:var(--dim);transition:color .2s}
button.contact-cell__value:hover .contact-cell__hint{color:var(--mid)}
.contact-cell.is-copied .contact-cell__hint{color:var(--accent)}
.contact-cell__links{display:flex;flex-direction:column;gap:8px}
.contact-cell__links a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--bone);
}
.contact-cell__links a:hover{color:var(--accent)}
.footer__bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:14px 28px;
  padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
}
.footer__bar a:hover{color:var(--accent)}
.footer__contact,.footer__social{display:flex;gap:24px;flex-wrap:wrap}

/* reveal default states (JS adds animation) */
.reveal{opacity:0;transform:translateY(28px)}

/* ============================================================
   PROJECT PAGES
   ============================================================ */
.proj-hero{
  position:relative;
  padding:clamp(120px,18vh,200px) var(--pad) clamp(36px,5vw,64px);
  border-bottom:1px solid var(--line);
  background-image:radial-gradient(rgba(233,231,225,.045) 1px, transparent 1px);
  background-size:52px 52px;
}
.proj-hero__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:clamp(20px,3vw,36px);
}
.proj-hero__code{color:var(--p-accent)}
.proj-hero__title{
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(40px,9vw,140px);
  line-height:.92;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin-bottom:14px;
  overflow-wrap:anywhere;
}
.proj-hero__sub{
  font-stretch:105%;
  font-weight:460;
  font-size:clamp(17px,2vw,26px);
  color:var(--mid);
  max-width:38ch;
  text-wrap:pretty;
}

.proj-cover{
  position:relative;
  overflow:hidden;
}
.proj-cover img{width:100%;height:auto;display:block}
.proj-cover__dither{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  image-rendering:pixelated;
}

.proj-body{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);
  gap:clamp(32px,5vw,96px);
  padding:clamp(48px,7vw,100px) var(--pad);
  border-bottom:1px solid var(--line);
}
.proj-meta{position:sticky;top:90px;align-self:start}
.proj-meta__block{margin-bottom:26px}
.proj-meta__head{display:block;margin-bottom:8px;color:var(--p-accent)}
.proj-meta__list li{
  font-size:13px;color:var(--mid);
  padding:5px 0;border-bottom:1px solid var(--line);
}
.proj-desc p{
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.65;
  color:var(--bone);
  max-width:62ch;
}
.proj-desc p+p{margin-top:22px;color:var(--mid)}

.proj-gallery{padding:clamp(28px,4vw,56px) var(--pad) clamp(48px,6vw,90px)}
.proj-gallery__item{
  position:relative;
  margin:0 auto clamp(28px,4vw,56px);
}
.proj-gallery__item img{width:100%;height:auto}
.proj-gallery__item--inset{max-width:74%}
.proj-gallery__item--portrait{max-width:56%}
.proj-gallery__count{
  position:absolute;
  left:0;
  bottom:-20px;
  color:var(--dim);
}
/* consecutive portraits sit side by side */
.proj-gallery__pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,36px);
  max-width:86%;
  margin:0 auto clamp(28px,4vw,56px);
}
.proj-gallery__pair .proj-gallery__item{
  margin:0;
  max-width:none;
}

.proj-next{
  display:block;
  padding:clamp(40px,7vw,90px) var(--pad);
  border-top:1px solid var(--line);
  background-image:radial-gradient(rgba(233,231,225,.045) 1px, transparent 1px);
  background-size:52px 52px;
}
.proj-next__label{display:block;margin-bottom:14px}
.proj-next__title{
  font-stretch:122%;
  font-weight:630;
  font-size:clamp(34px,7vw,100px);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:-.012em;
  transition:color .25s;
}
.proj-next:hover .proj-next__title{color:var(--p-accent)}
.proj-next:hover .proj-next__title{animation:rgbsplit .2s steps(2) 1}

/* ===================== MOBILE ===================== */
@media (max-width:860px){
  .nav__meta{display:none}
  .nav__links{gap:18px}
  .hero__corner--tr,.hero__corner--bl{display:none}
  .hero__title{font-size:11vw}
  .hero__line--indent{padding-left:6vw}

  .work__link{
    grid-template-columns:1fr 28px;
    grid-template-areas:
      "thumb thumb"
      "code  arrow"
      "title arrow"
      "meta  arrow";
    row-gap:6px;
  }
  .work__thumb{
    display:block;
    grid-area:thumb;
    width:100%;
    height:auto;
    margin-bottom:12px;
  }
  .work__code{grid-area:code}
  .work__title{grid-area:title;white-space:normal;font-size:clamp(26px,7.5vw,40px)}
  .work__meta{grid-area:meta;white-space:normal}
  .work__arrow{grid-area:arrow;align-self:center}
  .work__link::after{display:none}
  .work__link:hover,.work__link:focus-visible{color:var(--bone)}
  .work__link:hover .work__meta{color:var(--mid)}
  .preview{display:none}

  .caps__grid,.about__grid,.proj-body{grid-template-columns:1fr}
  .caps__cols{grid-template-columns:1fr;gap:28px}
  .caps__statement{max-width:none}
  .about__lists{grid-template-columns:1fr}
  .proj-meta{position:static}
  .proj-gallery__item--inset,.proj-gallery__item--portrait{max-width:100%}
  .footer__bar{flex-direction:column;align-items:flex-start}
  .contact-grid{grid-template-columns:1fr 1fr}
  .contact-cell{border-bottom:1px solid var(--line)}
  .contact-cell:nth-child(2n){border-right:0}
  .proj-gallery__pair{max-width:100%}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .marquee__track{transform:none!important}
}

/* project-page footer copy buttons */
.footer__copy{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--bone);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
}
.footer__copy:hover{color:var(--accent)}