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

:root{
   --bg-top:#f2f2f2;
   --bg-mid:#cecece;
   --bg-edge:#979797;
   
  --line:#00000018;      /* EDIT: hairline dividers/grid gaps opacity  */
  --text:#121212;        /* EDIT: main text color */
  --muted:#5c5c5c;       /* EDIT: secondary/label text color */
  --muted-soft:#7a7a7a;  /* EDIT: HUD label text color */
  --accent:#c7601f;      /* EDIT: THE accent color — eyebrow text, dot, hover states, focus ring */
  --accent-dim:#c9a486;  /* EDIT: HUD corner-bracket color (usually a soft version of --accent) */
  --surface:#c7c7c5;     /* EDIT: card/plate background before an image or video loads */

  --display:'Archivo',sans-serif;              /* EDIT: headline font */
  --mono:'IBM Plex Mono',ui-monospace,monospace; /* EDIT: technical/label font */

  --pad:60px;  /* EDIT: outer page margin on desktop */
  --r:2px;
  --bg-lighten: 1%;  /* EDIT: 0% = no change, 100% = pure white. Raise this one number to brighten the whole gradient */

}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:radial-gradient(ellipse 120% 70% at 50% -10%,
    color-mix(in srgb, var(--bg-top) calc(100% - var(--bg-lighten)), white var(--bg-lighten)) 0%,
    color-mix(in srgb, var(--bg-mid) calc(100% - var(--bg-lighten)), white var(--bg-lighten)) 38%,
    color-mix(in srgb, var(--bg-edge) calc(100% - var(--bg-lighten)), white var(--bg-lighten)) 65%,
    color-mix(in srgb, #b0b0af calc(100% - var(--bg-lighten)), white var(--bg-lighten)) 100%);
  color:var(--text);font-family:'Inter',sans-serif;overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit}
img{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
::selection{background:var(--accent);color:#fff}
.mono{font-family:var(--mono);letter-spacing:.02em}

/* ---------- Ambient dust sim ---------- */
canvas#sim{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.6;pointer-events:none}

/* ---------- Nav ---------- */
nav.top{
  position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:32px var(--pad) 0;max-width:1400px;margin:0 auto;
}
.logo-mark{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.logo-mark span{color:var(--accent)}
.navlinks{display:flex;gap:40px;font-size:12px;color:var(--muted)}
.navlinks a{text-decoration:none;transition:color .2s;letter-spacing:.06em}
.navlinks a:hover,.navlinks a.active{color:var(--text)}
.menu-toggle{
  display:none;border:0;background:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--muted);
}
.mobile-nav{
  position:relative;z-index:9;max-width:1400px;margin:0 auto;
  padding:0 var(--pad);
}
.mobile-nav .mobile-nav-inner{
  display:none;flex-direction:column;gap:2px;margin-top:16px;
  background:#c7c7c5;border:1px solid var(--line);
}
.mobile-nav.open .mobile-nav-inner{display:flex}
.mobile-nav a{
  padding:16px 18px;font-size:13px;letter-spacing:.06em;text-decoration:none;
  border-bottom:1px solid var(--line);color:var(--muted);
}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav a.active{color:var(--text)}

/* ---------- Hero ---------- */
header.hero{position:relative;z-index:10;max-width:1400px;margin:0 auto;padding:100px var(--pad) 90px}
.eyebrow{
  font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:26px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--accent)}
h1.title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(52px,11vw,150px);line-height:.86;letter-spacing:-.01em;
  text-transform:uppercase;
}
h1.title .stroke{-webkit-text-stroke:1.5px var(--text);color:transparent}
.hero-sub{
  display:flex;justify-content:space-between;align-items:flex-end;margin-top:40px;
  gap:40px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px;
}
.hero-desc{max-width:460px;font-size:15px;line-height:1.6;color:var(--muted)}
.hero-meta{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;line-height:1.9}
.hero-meta b{color:var(--text);font-weight:500;font-family:'Inter',sans-serif}
.hero-link{
  display:inline-block;margin-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--text);border-bottom:1px solid var(--accent);padding-bottom:4px;
}
.hero-link:hover{color:var(--accent)}

/* ---------- Reel / grid section ---------- */
section.reel{position:relative;z-index:10;max-width:1400px;margin:0 auto;padding:0 var(--pad) 80px}
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px;
  border-bottom:1px solid var(--line);padding-bottom:16px;
}
.section-head h2{
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.section-head .count{font-family:var(--mono);font-size:12px;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.one{grid-template-columns:minmax(0,1fr);max-width:460px}
.grid.four{grid-template-columns:repeat(4,1fr);background:transparent}
.grid.three{grid-template-columns:repeat(3,1fr);background:transparent}
.card{
  background:var(--surface);position:relative;aspect-ratio:16/10;overflow:hidden;
  cursor:pointer;text-decoration:none;color:var(--text);display:block;
}
.card.featured{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:420px}
.card-plate{position:absolute;inset:0;transition:transform .5s ease}
.card-plate img{width:100%;height:100%;object-fit:cover;display:block}
.card-plate video{width:100%;height:100%;object-fit:cover;display:block}
.card-plate iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}

/* ---------- Drawings 01: transparent boxes for PNGs with transparency ---------- */
.card.drawing-box{background:transparent}
.card.drawing-box .card-plate{background:transparent}
.card.drawing-box .card-plate img{object-fit:contain}
body.drawings-page section.reel{max-width:1600px}

/* Plain Vimeo embed */
.vimeo-embed{position:relative;width:100%;padding-top:37.5%}
.vimeo-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.card:hover .card-plate{transform:scale(1.04)}
.card.is-fun .card-plate{background:repeating-linear-gradient(135deg,var(--surface) 0 14px,#bcbcba 14px 28px)}
.card-info{
  position:absolute;left:0;right:0;bottom:0;padding:18px 20px;display:flex;
  justify-content:space-between;align-items:flex-end;
}
.card-title{font-family:var(--display);font-weight:700;font-size:15px;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.5)}
.card.featured .card-title{font-size:22px}
.card-tag{font-family:var(--mono);font-size:10px;color:#f0efec;text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 8px rgba(0,0,0,.5)}
.card-slate{
  position:absolute;top:16px;left:20px;font-family:var(--mono);font-size:10px;
  color:var(--muted);display:flex;gap:10px;align-items:center;
}
.card-slate .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------- Project detail preview (images + description + videos) ---------- */
.preview-images{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  margin-bottom:44px;
}
.preview-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface)}
.preview-desc{
  max-width:640px;margin:0 auto 50px;text-align:center;
  font-size:15px;line-height:1.75;color:var(--muted);
}
.preview-media-row{
  display:grid;grid-template-columns:2fr 1fr;gap:2px;background:var(--line);
  max-width:760px;margin:0 auto;
}
.preview-media-row video,.preview-media-row .preview-img img{
  width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--surface);
}
@media(max-width:800px){
  .preview-images{grid-template-columns:1fr}
  .preview-media-row{grid-template-columns:1fr}
}

.preview-split{
  display:grid;grid-template-columns:1.3fr 1fr;gap:2px;background:var(--line);
  max-width:1100px;margin:60px auto 0;
}
.preview-split .preview-img img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--surface)}
.preview-split-videos{display:grid;grid-template-rows:1fr 1fr;gap:2px}
.preview-split-videos video{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--surface)}
@media(max-width:800px){
  .preview-split{grid-template-columns:1fr}
  .preview-split .preview-img img{aspect-ratio:4/3}
}

/* ---------- About page (bio, top-aligned) ---------- */
.about-centered{
  text-align:center;padding:110px var(--pad) 60px;max-width:640px;margin:0 auto;
}
.about-name{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,5vw,52px);letter-spacing:-.01em;margin-bottom:26px;
}
.about-bio{font-size:16px;line-height:1.75;color:var(--muted);margin-bottom:34px}
.about-links{
  display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:12px;letter-spacing:.08em;flex-wrap:wrap;
}
.about-links a{text-decoration:none;color:var(--text);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.about-links a:hover{color:var(--accent);border-color:var(--accent)}
.about-links span{color:var(--muted)}

/* ---------- Resume (About page) ---------- */
.resume{max-width:720px;margin:0 auto;padding:20px var(--pad) 100px;text-align:left}
.resume-title{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,3.6vw,36px);letter-spacing:-.01em;text-align:center;margin-bottom:44px;
}
.resume-group{margin-bottom:48px}
.resume-group:last-child{margin-bottom:0}
.resume-group-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:24px;display:flex;align-items:center;gap:10px;
}
.resume-group-label::before{content:'';width:26px;height:1px;background:var(--accent)}
.resume-entry{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.resume-entry:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.resume-entry-head{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  gap:8px;margin-bottom:6px;
}
.resume-entry-name{font-family:var(--display);font-weight:700;font-size:17px;text-transform:uppercase}
.resume-entry-meta{font-family:var(--mono);font-size:11px;color:var(--muted)}
.resume-entry-role{font-size:14px;color:var(--muted);font-style:italic;margin-bottom:10px}
.resume-entry-desc{font-size:14px;line-height:1.7;color:var(--muted)}
.resume-entry-list{margin:0;padding-left:18px;font-size:14px;line-height:1.7;color:var(--muted)}
.resume-entry-list li{margin-bottom:8px}
.resume-entry-list li:last-child{margin-bottom:0}

/* ---------- Gallery (photography) ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}

/* ---------- Footer ---------- */
footer.site-foot{
  position:relative;z-index:10;max-width:1400px;margin:0 auto;padding:50px var(--pad) 70px;
  display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);
}
footer.site-foot .foot-left{font-family:var(--mono);font-size:11px;color:var(--muted)}
footer.site-foot .foot-right{display:flex;gap:28px;font-family:var(--mono);font-size:11px}
footer.site-foot a{text-decoration:none;color:var(--muted)}
footer.site-foot a:hover{color:var(--accent)}

a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}

@media(max-width:800px){
  nav.top,header.hero,section.reel,footer.site-foot,.mobile-nav{padding-left:24px;padding-right:24px}
  .navlinks{display:none}
  .menu-toggle{display:block}
  .grid,.grid.two,.grid.one,.grid.four,.grid.three,.gallery-grid{grid-template-columns:1fr;max-width:none}
  .card.featured{grid-column:span 1;grid-row:span 1;aspect-ratio:16/10;min-height:0}
  .hero-sub{flex-direction:column;align-items:flex-start}
  .hero-meta{text-align:left}
}