/* ==========================================================================
   Joshua Sheridan — portfolio
   Brutalist redesign: raw structure, thick rules, no shadows, no radius.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg:        #F5F3EC;   /* paper */
  --mat:       #E4DECC;   /* mat / card fill, echoes the kraft-paper tone in the art */
  --ink:       #121212;   /* near-black ink */
  --blue:      #1B3BFF;   /* accent, pulled from the blue dot in the tower drawing */
  --coral:     #E64526;   /* accent, pulled from the heart mark in the figure drawing */
  --line:      3px;
  --line-thin: 1.5px;
  --max:       1180px;
}

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

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: 'Archivo Black', 'IBM Plex Mono', sans-serif;
  font-weight: 400;
  text-transform: none;
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.01em;
}

a{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--blue);
}
a:hover{ color: var(--blue); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

img{ max-width: 100%; display: block; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

/* -------------------------------------------------------------------- */
/* Skip link                                                            */
/* -------------------------------------------------------------------- */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus{ left: 12px; top: 12px; }

/* -------------------------------------------------------------------- */
/* Header / nav                                                         */
/* -------------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: var(--line) solid var(--ink);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover{ color: var(--ink); }
.wheel{
  width: 30px;
  height: 30px;
  flex: none;
  animation: spin-once 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@media (prefers-reduced-motion: reduce){
  .wheel{ animation: none; }
}
@keyframes spin-once{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.nav{
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a{
  display: inline-block;
  padding: 8px 14px;
  border: var(--line-thin) solid var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav a:hover{
  background: var(--ink);
  color: var(--bg);
}
.nav a[aria-current="page"]{
  background: var(--ink);
  color: var(--bg);
}
.nav li + li{ margin-left: -3px; }

@media (max-width: 480px){
  .site-header .wrap{
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
    row-gap: 10px;
  }
  .nav{ width: 100%; }
  .nav li{ flex: 1; }
  .nav li + li{ margin-left: -3px; }
  .nav a{
    display: block;
    text-align: center;
    padding: 8px 6px;
    font-size: 0.85rem;
  }
}

/* -------------------------------------------------------------------- */
/* Page header block                                                    */
/* -------------------------------------------------------------------- */
.page-head{
  border-bottom: var(--line) solid var(--ink);
}
.page-head .wrap{
  padding-top: 40px;
  padding-bottom: 28px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.page-head h1{
  font-size: clamp(2.6rem, 9vw, 5.5rem);
}
.page-head .tag{
  font-size: 0.95rem;
  max-width: 32ch;
  text-align: right;
}

/* -------------------------------------------------------------------- */
/* Art grid                                                              */
/* -------------------------------------------------------------------- */
.art-grid{
  columns: 4 260px;
  column-gap: 3px;
  padding: 3px 0 60px;
}
@media (max-width: 980px){ .art-grid{ columns: 3 220px; } }
@media (max-width: 640px){ .art-grid{ columns: 2 160px; } }
@media (max-width: 420px){ .art-grid{ columns: 1; } }

.art-item{
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 3px;
  border: var(--line-thin) solid var(--ink);
  background: var(--mat);
  cursor: zoom-in;
  padding: 0;
  overflow: hidden;
}
.art-item img{
  width: 100%;
  height: auto;
  display: block;
}
.art-item:hover img{ opacity: 0.85; }

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(18,18,18,0.96);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 40px 20px;
}
.lightbox.is-open{ display: flex; }
.lightbox img{
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  border: var(--line) solid var(--bg);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position: fixed;
  background: var(--bg);
  color: var(--ink);
  border: var(--line-thin) solid var(--bg);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 10px 14px;
  line-height: 1;
}
.lightbox-close{ top: 20px; right: 20px; }
.lightbox-prev{ left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-count{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--bg);
  font-size: 0.85rem;
}
@media (max-width: 640px){
  .lightbox-prev, .lightbox-next{ padding: 8px 11px; }
}

/* -------------------------------------------------------------------- */
/* Code page                                                             */
/* -------------------------------------------------------------------- */
.code-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  padding: 40px 0 70px;
}
@media (max-width: 720px){ .code-grid{ grid-template-columns: 1fr; } }

.code-card{
  border: var(--line-thin) solid var(--ink);
  background: var(--mat);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}
.code-card:hover{ background: var(--ink); color: var(--bg); }
.code-card:hover .code-card-desc{ color: var(--bg); }
.code-card-top{
  display: flex;
  align-items: center;
  gap: 16px;
}
.code-card img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: none;
}
.code-card h3{
  font-size: 1.5rem;
}
.code-card-desc{
  font-size: 0.95rem;
  color: #3a3a3a;
  max-width: 46ch;
}
.code-card-url{
  font-size: 0.8rem;
  word-break: break-all;
  opacity: 0.75;
}

/* -------------------------------------------------------------------- */
/* About page                                                            */
/* -------------------------------------------------------------------- */
.about-top{
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 3px;
  padding: 40px 0 3px;
  border-bottom: var(--line) solid var(--ink);
}
@media (max-width: 760px){ .about-top{ grid-template-columns: 1fr; } }

.about-photo{
  border: var(--line-thin) solid var(--ink);
  overflow: hidden;
  background: var(--mat);
}
.about-photo img{ width: 100%; height: 100%; object-fit: cover; }

.about-bio{
  border: var(--line-thin) solid var(--ink);
  background: var(--mat);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.about-bio h2{ font-size: 2.1rem; }
.about-bio .loves{ font-size: 0.95rem; }
.about-links{
  display: flex;
  gap: 3px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.about-links a{
  border: var(--line-thin) solid var(--ink);
  padding: 10px 18px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.about-links a:hover{ background: var(--ink); color: var(--bg); }

.about-cols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px 0 70px;
}
@media (max-width: 760px){ .about-cols{ grid-template-columns: 1fr; } }

.about-col{
  border: var(--line-thin) solid var(--ink);
  background: var(--mat);
  padding: 26px;
  text-align: left;
}
.about-col img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin-bottom: 16px;
}
.about-col h3{ font-size: 1.3rem; margin-bottom: 8px; }
.about-col p{ margin: 0; font-size: 0.95rem; }

/* -------------------------------------------------------------------- */
/* 404                                                                    */
/* -------------------------------------------------------------------- */
.not-found{
  padding: 90px 0;
  text-align: center;
}
.not-found h1{ font-size: clamp(2rem, 6vw, 3.2rem); }

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */
.site-footer{
  border-top: var(--line) solid var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.site-footer .wrap{
  padding: 34px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.site-footer h4{
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.1rem;
}
.site-footer a{
  color: var(--bg);
  text-decoration-color: var(--coral);
}
.contact-line{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------- */
/* Visually hidden util                                                  */
/* -------------------------------------------------------------------- */
.vh{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}