:root{
  --bg: #FFFFFF;
  --bg-alt: #F6F6F4;
  --ink: #1A1A1A;
  --ink-dim: #6E6E6B;
  --line: #E4E4E1;
  --line-strong: #8C8C89;
  --maxw: 1100px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo', sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
::selection{background:var(--ink); color:var(--bg);}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}

/* Archivo's condensed width, uppercase — the "game program" look for nav, buttons, headings and captions */
.nav-links a, .btn, .tile-cap, .lightbox-cap, .lightbox-close, label, .foot-small{font-stretch:75%; text-transform:uppercase; letter-spacing:0.06em;}
.about-heading, .contact-section h1{font-stretch:75%; text-transform:uppercase; letter-spacing:0.02em;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  max-width:var(--maxw); margin:0 auto;
}
/* Text wordmark in the site font: bold condensed name */
.wordmark{display:flex; align-items:baseline; line-height:1; color:var(--ink); text-transform:uppercase;}
.wordmark-name{font-size:26px; font-weight:800; font-stretch:62%; letter-spacing:0.01em;}
.nav-links{display:flex; gap:30px; align-items:center;}
.nav-links a{font-size:14px; color:var(--ink-dim); transition:color 0.15s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active:not(.btn){color:var(--ink); font-weight:600;}
.nav-links a.btn-solid, .nav-links a.btn-solid:hover{color:var(--bg);}
.btn{
  display:inline-flex; align-items:center;
  padding:10px 20px;
  font-size:13px; font-weight:600;
  border:1px solid var(--ink);
  transition:background 0.15s ease, color 0.15s ease;
}
.btn-solid{background:var(--ink); color:var(--bg);}
.btn-solid:hover{background:#3a3a38;}
.btn-outline{color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--bg);}

section{padding:64px 0;}

.gallery-section{padding:16px 0 40px;}
.gallery-kicker{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.gallery{
  max-width:1400px;
  margin:0 auto;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:17vw;
  grid-auto-flow:dense;
  gap:4px;
}
.tile{
  position:relative;
  grid-column:span 2;
  grid-row:span 1;
  background:var(--bg-alt);
  overflow:hidden;
  cursor:zoom-in;
}
.tile.g-large{grid-column:span 4; grid-row:span 2;}
.tile.g-wide{grid-column:span 4; grid-row:span 1;}
.tile.g-tall{grid-column:span 2; grid-row:span 2;}
.tile.g-normal{grid-column:span 2; grid-row:span 1;}
.tile.g-portrait{grid-column:span 2; grid-row:span 3;}
.tile.g-full{grid-column:span 6; grid-row:span 3;}
.tile-ph{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-dim); font-size:12px; text-align:center; padding:16px;
}
.tile img{width:100%; height:100%; object-fit:cover;}
.tile img.obj-low{object-position:center 61%;}
.tile img.obj-high{object-position:center 40%;}
.tile img.obj-left{object-position:60% center;}
.tile img.obj-left-slight{object-position:43% center;}
.tile-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px;
  background:linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  font-size:12px; color:#fff;
  opacity:0; transition:opacity 0.15s ease;
}
.tile:hover .tile-cap, .tile:focus-visible .tile-cap{opacity:1;}

/* ---------- ABOUT ---------- */
section.wrap{padding-top:64px; padding-bottom:64px;}
.about-grid{display:grid; grid-template-columns:420px 1fr; gap:44px; align-items:center;}
.about-frame{
  aspect-ratio:2/3;
  overflow:hidden;
}
.about-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.about-heading{font-size:22px; font-weight:700; margin:0 0 14px;}
.about-text p{font-size:15px; color:var(--ink-dim); margin-bottom:14px;}
.about-text p:last-of-type{margin-bottom:0;}
.about-text strong{color:var(--ink);}
.about-ctas{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap;}

/* ---------- CONTACT ---------- */
.contact-section h1{font-size:26px; font-weight:700; text-align:center; margin:0 0 10px;}
.contact-section > p.lede{color:var(--ink-dim); font-size:15px; text-align:center; margin-bottom:40px;}

form{display:flex; flex-direction:column; gap:18px; max-width:560px; margin:0 auto;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
label{font-size:12px; font-weight:600; color:var(--ink-dim); margin-bottom:6px; display:block;}
input, textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line-strong);
  padding:11px 12px;
  color:var(--ink);
  font-family:inherit; font-size:14px;
  transition:border-color 0.15s ease;
}
input:focus, textarea:focus{border-color:var(--ink); outline:none;}
textarea{resize:vertical; min-height:90px;}
.submit-row{margin-top:4px; text-align:center;}
.submit-row .btn{width:100%; justify-content:center; padding:13px 20px;}

.contact-alt{margin-top:28px; text-align:center; font-size:13px; color:var(--ink-dim);}
.contact-alt a{border-bottom:1px solid var(--ink); color:var(--ink); padding-bottom:1px;}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(20,20,18,0.92);
  display:none; align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:800px; width:100%; text-align:center;}
.lightbox-ph{
  display:inline-flex; align-items:center; justify-content:center;
  max-width:100%;
  color:#B8B8B4; font-size:13px;
}
.lightbox-ph:empty, .lightbox-ph:not(:has(img)){
  width:100%; aspect-ratio:3/2;
  background:#2A2A28;
  border:1px solid #3a3a38;
}
.lightbox-ph img{display:block; max-width:100%; max-height:80vh; width:auto; height:auto; object-fit:contain;}
.lightbox-cap{margin-top:16px; font-size:13px; color:#D8D8D4;}
.lightbox-close{
  position:absolute; top:26px; right:32px;
  font-size:13px; color:#D8D8D4; background:none; border:none; cursor:pointer;
  font-family:inherit;
}
.lightbox-close:hover{color:#fff;}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:36px; line-height:1; color:#D8D8D4; background:none; border:none;
  cursor:pointer; padding:12px; font-family:inherit;
}
.lightbox-nav:hover{color:#fff;}
.lightbox-prev{left:12px;}
.lightbox-next{right:12px;}
@media (max-width:640px){
  .lightbox-nav{font-size:28px; padding:8px;}
  .lightbox-prev{left:2px;}
  .lightbox-next{right:2px;}
}

/* ---------- FOOTER ---------- */
footer{margin-top:40px; padding:40px 0; border-top:1px solid var(--line);}
.foot-grid{display:flex; justify-content:space-between; align-items:center;}
.foot-small{font-size:12px; color:var(--ink-dim);}
.foot-instagram img{height:22px; width:auto; display:block;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px){
  .nav-links{gap:16px;}
  .nav-links a{font-size:13px;}
  .wordmark-name{font-size:21px;}
  .gallery{grid-template-columns:repeat(2, 1fr); grid-auto-rows:60vw;}
  .tile, .tile.g-large, .tile.g-wide, .tile.g-normal, .tile.g-full{grid-column:span 2; grid-row:span 1;}
  .tile.g-tall{grid-column:span 2; grid-row:span 3;}
  .about-grid{
    grid-template-columns:1fr;
    gap:16px;
    text-align:center;
    justify-items:center;
  }
  .about-copy{display:contents;}
  .about-heading{order:1;}
  .about-frame{order:2; margin-bottom:16px;}
  .about-text{order:3;}
  .about-ctas{order:4;}
  .about-ctas{justify-content:center;}
  .field-row{grid-template-columns:1fr;}
  .wrap{padding:0 20px;}
  .nav{padding:14px 20px;}
  section{padding:48px 0;}
}