/* ===========================================================
   Julian Faust — Portfolio
   Dark, image-forward, Apple-inspired polish. Tokens pulled
   from the designer's own brand marks: navy, mustard, cream.
   =========================================================== */

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

:root{
  --ink:        #08090d;
  --bg:         #0c0d12;
  --bg-alt:     #15161f;
  --card:       #1a1c28;
  --navy:       #1d2355;
  --mustard:    #e0d21f;
  --cream:      #fbfbf1;
  --lilac:      #9294ab;
  --line:       rgba(251,251,241,0.10);

  --display: 'Space Grotesk', sans-serif;
  --body:    'Inter', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --max: 1280px;
  --r-lg: 24px;
  --r-md: 16px;
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow: 0 30px 80px -20px rgba(0,0,0,0.55);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; font-weight:700; letter-spacing:-0.02em; }
p{ margin:0 0 1em; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 6vw; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- dot-grid signature mark ---------- */
.dots{
  display:inline-block; width:23px; height:23px; vertical-align:middle;
  background-image:radial-gradient(circle, var(--mustard) 2.3px, transparent 2.3px);
  background-size:9px 9px;
  background-position:0 0, 0 9px, 0 18px;
  background-repeat:repeat;
}
.dots span{ display:none; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(12,13,18,0.72);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-toggle{
  display:none; width:44px; height:44px; margin-right:-10px;
  align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--cream);
}
.nav-toggle .bars{ position:relative; display:block; width:22px; height:2px; background:currentColor; border-radius:2px; transition:background .2s var(--ease); }
.nav-toggle .bars::before,
.nav-toggle .bars::after{
  content:''; position:absolute; left:0; width:22px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle .bars::before{ top:-7px; }
.nav-toggle .bars::after{ top:7px; }
.nav-toggle[aria-expanded="true"] .bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .bars::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after{ top:0; transform:rotate(-45deg); }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:700; font-size:1.05rem; }
.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-links a{
  font-family:var(--mono); font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--lilac); transition:color .25s var(--ease);
}
.nav-links a:hover{ color:var(--mustard); }
.nav-links a.current{ color:var(--cream); }
.nav-cta{ border:1px solid var(--line); padding:0.55rem 1.1rem; border-radius:100px; transition:all .25s var(--ease); }
.nav-cta:hover{ border-color:var(--mustard); color:var(--mustard); }

/* ---------- buttons / eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--mono); font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--mustard); display:flex; align-items:center; gap:10px; margin-bottom:1.2rem;
}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:0.95rem 1.7rem; border-radius:100px; border:1px solid var(--cream);
  transition:all .3s var(--ease);
}
.btn:hover{ background:var(--cream); color:var(--ink); transform:translateY(-2px); }
.btn.solid{ background:var(--mustard); border-color:var(--mustard); color:var(--ink); font-weight:600; }
.btn.solid:hover{ background:var(--cream); border-color:var(--cream); }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:7.5rem 0 6rem;
  background:
    radial-gradient(ellipse 1000px 550px at 85% -15%, rgba(224,210,31,0.14), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:3rem; align-items:center; }
.hero h1{ font-size:clamp(2.9rem,6vw,5.4rem); line-height:0.98; text-transform:uppercase; }
/* z-index:1 is load-bearing — it makes .accent its own stacking context so the
   mustard ellipse below sits behind the text but IN FRONT of the hero
   background. Without it the ellipse drops behind the hero and "FAUST"
   renders near-black on a near-black background. */
.hero h1 .accent{ position:relative; z-index:1; color:var(--ink); }
.hero h1 .accent::before{ content:''; position:absolute; inset:-6% -10%; background:var(--mustard); border-radius:50%; z-index:-1; }
.hero .role{ font-size:1.08rem; color:var(--lilac); margin-top:1.5rem; max-width:38ch; }
.hero .role strong{ color:var(--cream); font-weight:600; }
.hero-ctas{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero-ctas .link-quiet{ font-family:var(--mono); font-size:0.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--lilac); align-self:center; }
.hero-ctas .link-quiet:hover{ color:var(--mustard); }

/* hero image collage */
/* Container is sized by ratio, not a fixed pixel height, so the collage keeps
   its proportions at every screen width instead of squashing. */
.hero-collage{ position:relative; aspect-ratio:4/3; }
.hero-collage .c{
  position:absolute; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid rgba(251,251,241,0.08);
}
.hero-collage .c img{ width:100%; height:100%; object-fit:cover; }
/* aspect-ratio + height:auto matches the source scans (1.414:1) so the images
   are shown whole. Insets leave room for the rotation to breathe — pinned to
   0 the rotated corners hit .hero's overflow:hidden and get clipped. */
.hero-collage .c1{ width:70%; aspect-ratio:2200/1556; top:6%; right:2%; transform:rotate(2deg); z-index:2; }
.hero-collage .c2{ width:52%; aspect-ratio:2200/1556; bottom:4%; left:2%; transform:rotate(-4deg); z-index:3; }
.hero-collage .c3{
  width:120px; height:120px; top:8%; left:4%; z-index:4; display:flex; align-items:center; justify-content:center;
  background:var(--mustard); transform:rotate(-6deg); box-shadow:var(--shadow);
}
.hero-collage .c3 span{ font-family:var(--mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); text-align:center; padding:0 12px; line-height:1.4; font-weight:500; }

/* ---------- section scaffolding ---------- */
section{ padding:6rem 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-bottom:3rem;
}
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); text-transform:uppercase; }
.section-head p{ font-family:var(--mono); font-size:0.82rem; color:var(--lilac); max-width:32ch; margin:0; }

/* ---------- about ---------- */
.about{ background:var(--bg-alt); }
.about-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:4.5rem; align-items:start; }
.about-photo{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:3/4; }
.about-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; filter:contrast(1.06) saturate(1.05); }
.about-photo .tag{
  position:absolute; bottom:1.1rem; left:1.1rem; background:var(--mustard); color:var(--ink);
  font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em;
  padding:0.5rem 0.9rem; border-radius:100px;
}
.about-copy p{ font-size:1.06rem; color:var(--cream); max-width:56ch; }
.about-copy p.lede{ font-size:1.4rem; font-family:var(--display); font-weight:600; color:var(--cream); letter-spacing:-0.01em; }

.spec-list{ margin-top:2.2rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
/* the right-to-work note runs full width so it doesn't sit as a lonely half-box */
.spec-list div:last-child:nth-child(odd){ grid-column:1 / -1; }
.spec-list div{ background:var(--card); border-radius:var(--r-md); padding:1.1rem 1.3rem; }
.spec-list .k{ font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--mustard); display:block; margin-bottom:0.4rem; }
.spec-list .v{ font-size:0.92rem; color:var(--lilac); }

/* ---------- capability strip ---------- */
.capabilities{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.capabilities .wrap{
  display:flex; flex-wrap:wrap; gap:0.8rem 3.2rem; padding:2.2rem 6vw;
  font-family:var(--mono); font-size:0.8rem; color:var(--lilac);
}
.capabilities strong{ color:var(--cream); font-weight:500; }

/* ---------- work grid (image-forward cards) ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem; }
.work-grid a.work-card:first-child{ grid-column:1 / -1; }
.work-card{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  background:var(--card); box-shadow:0 20px 50px -24px rgba(0,0,0,0.6);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.work-card:hover{ transform:translateY(-8px); box-shadow:0 34px 70px -20px rgba(0,0,0,0.7); }
/* Box matches the source scans exactly (2200x1556), so nothing is cropped at
   rest. The hover scale below is then the only zoom, which is the intent. */
.work-card .thumb{ width:100%; aspect-ratio:2200/1556; overflow:hidden; }
.work-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.work-card:hover .thumb img{ transform:scale(1.06); }
.work-card .card-body{ padding:1.5rem 1.7rem 1.8rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.work-card .num{ font-family:var(--mono); font-size:0.72rem; color:var(--mustard); letter-spacing:.05em; }
.work-card h3{ font-size:1.4rem; margin-top:0.3rem; }
.work-card .sub{ display:block; font-family:var(--mono); font-size:0.72rem; color:var(--lilac); font-weight:400; margin-top:0.4rem; text-transform:uppercase; letter-spacing:0.04em; }
.work-card .arrow{ font-size:1.3rem; color:var(--mustard); flex-shrink:0; transition:transform .3s var(--ease); }
.work-card:hover .arrow{ transform:translateX(5px) translateY(-5px); }

/* ---------- footer ---------- */
footer{ background:var(--ink); border-top:1px solid var(--line); padding:5rem 0 2.5rem; }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:3rem; flex-wrap:wrap; }
.footer-cta h2{ font-size:clamp(2.1rem,5vw,3.4rem); text-transform:uppercase; max-width:14ch; }
.footer-links{ display:flex; flex-direction:column; gap:0.7rem; font-family:var(--mono); font-size:0.9rem; }
.footer-links a{ color:var(--lilac); transition:color .25s var(--ease); }
.footer-links a:hover{ color:var(--mustard); }
.footer-bottom{
  margin-top:5rem; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; font-family:var(--mono); font-size:0.72rem; color:var(--lilac);
  flex-wrap:wrap; gap:0.6rem;
}

/* ---------- project detail page ---------- */
.proj-hero{
  padding:7.5rem 0 3.5rem; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(224,210,31,0.08), transparent 60%);
}
.proj-hero .eyebrow a{ color:var(--lilac); transition:color .25s var(--ease); }
.proj-hero .eyebrow a:hover{ color:var(--mustard); }
.proj-hero h1{ font-size:clamp(2.4rem,5.4vw,4.2rem); text-transform:uppercase; max-width:16ch; }
.proj-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.8rem; }
.proj-meta > div{ background:var(--card); border-radius:var(--r-md); padding:1.1rem 1.3rem; }
.proj-meta .k{ font-family:var(--mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--mustard); display:block; margin-bottom:0.5rem; }
.proj-meta .v{ font-family:var(--body); font-size:0.94rem; color:var(--cream); }

.proj-intro{ padding:4.5rem 0 1.5rem; }
.proj-intro p{ font-size:1.35rem; font-family:var(--display); font-weight:600; max-width:52ch; color:var(--cream); letter-spacing:-0.01em; }
.proj-body{ padding-bottom:2.5rem; }
.proj-body p{ max-width:64ch; color:var(--lilac); font-size:1.02rem; }
.proj-body p strong{ color:var(--cream); font-weight:600; }

.plate{ padding:1.5rem 0; }
/* The rounding and clipping live on the media, not the figure. Previously the
   figure carried border-radius + overflow:hidden with the figcaption inside it,
   so caption text was being shaved off by the rounded bottom corners. */
.plate figure{ margin:0; }
.plate figure > img,
.plate figure > video{
  display:block; width:100%; height:auto;
  margin-left:auto; margin-right:auto;
  border-radius:var(--r-lg); background:var(--card);
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.6);
}
/* Instagram renders its embed as a fixed-width white card. Centre it and give
   it room so it doesn't look like a stray box on the dark layout. */
.ig-plate figure{ background:transparent; box-shadow:none; border-radius:0; }
.ig-plate .instagram-media{ margin:0 auto !important; max-width:540px !important; }
.ig-plate figcaption{ text-align:center; }

.plate figure > video{ background:var(--ink); }
/* layout drawings don't need the full page width; they read fine smaller
   and stop a technical sheet dominating the section */
.plate.narrow figure{ max-width:60%; margin-left:auto; margin-right:auto; }
@media (max-width:760px){ .plate.narrow figure{ max-width:100%; } }

.plate figcaption{
  font-family:var(--mono); font-size:0.76rem; color:var(--lilac); text-transform:uppercase;
  letter-spacing:0.05em; padding:1.1rem 0.3rem 0;
}

/* ---------- detail crops -----------------------------------
   Pulls a single region out of a full-page portfolio scan so a
   project can show several distinct images from one source file.
   Set --l/--t/--w/--h as fractions (0–1) of the source image:
   l/t = top-left corner, w/h = size of the region.
   ----------------------------------------------------------- */
.detail-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.4rem; padding:1.5rem 0;
}
.detail-grid.two{ grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.detail figure{ margin:0; }
/* photos sit in the grid directly (no .crop wrapper) — match the crop styling */
.detail figure > img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-md); background:var(--card);
  box-shadow:0 20px 50px -28px rgba(0,0,0,0.65);
  border:1px solid rgba(251,251,241,0.07);
}
.crop{
  position:relative; overflow:hidden;
  border-radius:var(--r-md); background:var(--card);
  box-shadow:0 20px 50px -28px rgba(0,0,0,0.65);
  border:1px solid rgba(251,251,241,0.07);
  aspect-ratio: calc(var(--w) * 2200) / calc(var(--h) * 1556);
}
.crop img{
  position:absolute; max-width:none;
  width:calc(100% / var(--w));
  height:calc(100% / var(--h));
  left:calc(-100% * var(--l) / var(--w));
  top:calc(-100% * var(--t) / var(--h));
  transition:transform .6s var(--ease);
}
.detail figcaption{
  font-family:var(--mono); font-size:0.72rem; color:var(--lilac);
  text-transform:uppercase; letter-spacing:0.05em; padding:0.9rem 0.2rem 0;
}

/* ---------- sketch collage ---------- */
.collage{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
  gap:0.9rem; padding:1rem 0 0;
}
/* every tile the same shape: sources vary from 1.52 to 1.80, so cover-crop
   them all to 1.6 and let the grid read as one block */
.collage img{
  width:100%; height:100%; display:block;
  aspect-ratio:8/5; object-fit:cover; object-position:center;
  border-radius:var(--r-md); background:var(--card);
  border:1px solid rgba(251,251,241,0.07);
  transition:transform .4s var(--ease);
}
.collage a:hover img{ transform:translateY(-4px); }
@media (max-width:520px){ .collage{ grid-template-columns:repeat(2,1fr); gap:0.6rem; } }

.next-project{ border-top:1px solid var(--line); padding:5rem 0; text-align:center; }
.next-project .eyebrow{ justify-content:center; }
.next-project h2{ font-size:clamp(2.2rem,5.6vw,3.6rem); text-transform:uppercase; }
.next-project a.link-arrow{ display:inline-block; margin-top:1.5rem; }

/* ---------- reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .hero-collage{ margin-top:0.5rem; }
  .about-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }

  /* mobile menu */
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none;
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(12,13,18,0.97);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border-bottom:1px solid var(--line);
    padding:0.5rem 6vw 1.4rem;
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding:0.95rem 0; border-bottom:1px solid var(--line); font-size:0.86rem; }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-cta{ margin-top:1rem; text-align:center; border-radius:100px; }
  .proj-meta{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ flex-direction:column; }
}