/* ===== Julian Hill — Portfolio ===== */

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --paper-soft:#f6f5f3;
  --line:#e2e0dc;
  --muted:#6b6b68;
  --teal:#12646c;
  --teal-dark:#0b464c;
  --teal-tint:#a9d2d6;
  --teal-tint-soft:#e4f0f1;
  --max:1180px;
  --serifgap:0.01em;
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.container{max-width:var(--max); margin:0 auto; padding:0 28px;}

/* Type system: Knile (display, one weight) for the few big brand-level
   statements only — nav mark, hero name, section titles. Everything else,
   including project/card headings, is Work Sans at three weights. */
h1,h2{
  font-family:'Knile', 'Work Sans', sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
  margin:0;
  text-transform:uppercase;
}
h3,h4{
  font-family:'Work Sans', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
}

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:transform .3s ease;
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav-logo{
  font-family:'Knile', sans-serif; font-weight:800; font-size:1.25rem;
  text-transform:uppercase; letter-spacing:0.02em;
}
.nav-links{display:flex; gap:2rem; list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none; font-size:0.88rem; text-transform:uppercase;
  letter-spacing:0.06em; font-weight:600; color:var(--ink);
  padding-bottom:4px; border-bottom:2px solid transparent;
  transition:border-color .2s ease;
}
.nav-links a:hover{border-color:var(--teal);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0;}

/* ===== Hero ===== */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 0 80px;
  position:relative;
}
.hero .eyebrow{
  font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--teal); font-weight:600; margin-bottom:1.25rem;
}
.hero h1{
  font-size:clamp(3.2rem, 9vw, 7.5rem);
  line-height:0.92;
  text-transform:none;
  margin-bottom:0.3em;
  display:inline-block;
}
/* the underline starts after the "J", not under it */
.hero h1 .name-rest{
  border-bottom:4px solid var(--ink);
  padding-bottom:0.15em;
}
.hero .subtitle{
  font-weight:400;
  font-size:clamp(1.25rem, 3.2vw, 1.9rem);
  color:var(--ink);
  max-width:40ch;
  margin-bottom:0.4rem;
}
.hero .subtitle.subtitle-sub{
  font-size:clamp(1rem, 2.2vw, 1.3rem);
  color:var(--muted);
  margin-bottom:0;
}
.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.scroll-cue .line{width:1px; height:32px; background:var(--muted); animation:scrollpulse 1.8s ease-in-out infinite;}
@keyframes scrollpulse{0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;}}

/* ===== Section basics ===== */
section{padding:6rem 0;}
.section-head{margin-bottom:3rem; max-width:760px;}
.section-head .kicker{
  font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--teal); font-weight:600; margin-bottom:0.75rem;
}
.section-head h2{font-size:clamp(2rem, 4.5vw, 3rem); line-height:1.05;}
.section-head p{color:var(--muted); margin-top:1rem; font-size:1.05rem; max-width:640px;}

/* ===== About ===== */
.about{background:var(--paper-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.about-grid{display:grid; grid-template-columns:280px 1fr; gap:3.5rem; align-items:start;}
.about-photo{position:sticky; top:100px;}
.about-photo img{border-radius:var(--radius); filter:grayscale(0.1);}
.about-photo .caption{margin-top:1rem; font-size:0.85rem; color:var(--muted);}
.about-copy p{margin:0 0 1.15rem; color:#2a2a28; max-width:66ch;}
.about-copy p:last-child{margin-bottom:0;}

.logos{margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--line);}
.logos .label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); margin-bottom:1.5rem;}
.logos-grid{
  display:flex; flex-wrap:wrap; gap:2.2rem 2.8rem; align-items:center;
}
.logo-link{
  display:inline-flex; align-items:center; cursor:default;
}
a.logo-link{cursor:pointer;}
.logos-grid img{
  max-height:42px; max-width:120px; width:auto; height:auto;
  object-fit:contain; filter:grayscale(1) contrast(0.9); opacity:0.72;
  transition:opacity .2s ease, filter .2s ease, transform .2s ease;
}
.logos-grid img:hover{filter:none; opacity:1;}
a.logo-link:hover img{transform:translateY(-2px);}

/* ===== Approach / process =====
   One connected timeline: each stage name sits ON the segment of track
   between the two nodes it happens between, and hovering either a segment
   or its matching service card highlights both — so the diagram and the
   services list read as one linked system, not two separate blocks. */
.approach{border-bottom:1px solid var(--line);}
.pipeline-v2{
  display:flex; align-items:flex-start; position:relative;
  margin:3rem 0 3rem;
}
.pipeline-v2::before{
  content:""; position:absolute; top:7px; left:60px; right:60px; height:2px;
  background:linear-gradient(90deg, var(--teal-tint), var(--teal) 33%, var(--teal) 66%, var(--teal-dark));
  z-index:0;
}
.p-node{
  flex:0 0 120px; display:flex; flex-direction:column; align-items:center;
  text-align:center; position:relative; z-index:2;
}
.p-node .dot{
  width:14px; height:14px; border-radius:50%; background:var(--teal);
  margin-bottom:0.7rem; box-shadow:0 0 0 5px var(--paper);
}
.p-node .node-label{font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;}
.p-node .node-quote{font-size:0.8rem; color:var(--muted); font-style:italic; margin-top:0.3rem;}

.p-segment{
  flex:1 1 auto; min-width:32px; align-self:stretch;
  position:relative; z-index:2;
}
.p-segment .segment-label{
  position:absolute; top:7px; left:50%; transform:translate(-50%,-50%);
  background:var(--paper); border:1.5px solid var(--teal); color:var(--teal-dark);
  font-weight:700; text-transform:uppercase; font-size:0.76rem; letter-spacing:0.02em;
  padding:0.45rem 1rem; border-radius:99px; white-space:nowrap; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.p-segment:hover .segment-label,
.p-segment.linked .segment-label{
  transform:translate(-50%,-50%) scale(1.15);
  background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(11,70,76,0.25);
}

.stage-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
.stage-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.stage-card.linked{
  border-color:var(--teal); background:var(--teal-tint-soft);
  box-shadow:0 8px 24px rgba(11,70,76,0.1);
}
.stage-card h4{font-size:1rem; margin:0; color:var(--teal-dark);}
.stage-card-toggle{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  width:100%; background:none; border:none; padding:0; margin-bottom:1rem;
  cursor:default; text-align:left; font:inherit; color:inherit;
}
.stage-chevron{display:none;}
.stage-card .grp{margin-bottom:1rem;}
.stage-card .grp:last-child{margin-bottom:0;}
.stage-card .grp-title{font-weight:700; font-size:0.85rem; margin-bottom:0.35rem;}
.stage-card ul{margin:0; padding-left:1.1rem; font-size:0.85rem; color:#3a3a38;}
.stage-card li{margin-bottom:0.25rem;}

/* ===== Filter bars: two independent groups (tag, region) that AND together ===== */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:0.9rem;
}
.filter-bar-region{margin-bottom:2.5rem; padding-top:0.9rem; border-top:1px dashed var(--line);}
.filter-btn{
  font-family:'Work Sans', sans-serif;
  font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  background:var(--paper); border:1px solid var(--teal); color:var(--teal-dark);
  padding:0.5rem 1.1rem; border-radius:99px; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.filter-btn:hover{background:var(--teal-tint-soft);}
.filter-btn.active{background:var(--teal); border-color:var(--teal); color:#fff;}
.filter-empty{color:var(--muted); font-style:italic; padding:2rem 0;}

/* ===== Projects ===== */
.work{background:var(--paper-soft);}
.project-list{display:flex; flex-direction:column; gap:1rem;}
.project.filtered-out{display:none;}
.project{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.project > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:120px 1fr auto;
  gap:1.5rem; align-items:center;
  padding:1.1rem 1.5rem;
}
.project > summary::-webkit-details-marker{display:none;}
.project .thumb{
  width:120px; height:80px; object-fit:cover; border-radius:2px; background:var(--line);
}
.project .card-info .loc{font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.25rem;}
.project .card-info h3{font-size:1.35rem; letter-spacing:0; line-height:1.15;}
.project .card-info .role{font-size:0.9rem; color:var(--teal-dark); font-style:italic; font-weight:400;}
.project .chevron{
  width:32px; height:32px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .25s ease, background .2s ease;
  font-size:1rem;
}
.project[open] .chevron{transform:rotate(45deg); background:var(--teal); border-color:var(--teal); color:#fff;}

.project-body{padding:0 1.5rem 2rem;}

/* Text panel (left, narrow) + media panel (right, majority of space) —
   a tight gutter so the text ends close to where the images begin, as in
   the PDF's two-column spreads, rather than floating with dead space between. */
.project-layout{
  display:grid; grid-template-columns:minmax(300px, 380px) 1fr; gap:1.25rem;
  align-items:start; padding-top:0.5rem;
}
.text-panel{display:flex; flex-direction:column; gap:1.5rem; min-width:0;}
.meta-box{
  background:var(--teal-tint-soft);
  border-left:4px solid var(--teal);
  padding:1.25rem 1.4rem;
}
.meta-box dl{margin:0; font-size:0.85rem;}
.meta-box dt{color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; font-size:0.72rem; margin-top:0.7rem;}
.meta-box dt:first-child{margin-top:0;}
.meta-box dd{margin:0.1rem 0 0; font-weight:600;}
.tags{display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1.1rem;}
.tag{
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em;
  border:1px solid var(--teal); color:var(--teal-dark);
  padding:0.28rem 0.65rem; border-radius:99px; font-weight:600;
}
.project-copy .lede{font-weight:600; font-size:1.02rem; margin-bottom:1rem;}
.project-copy p{color:#2a2a28; margin:0 0 1rem; font-size:0.94rem;}
.project-extra{display:flex; flex-direction:column; gap:1.5rem;}
.team h5{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--teal-dark);
  margin-bottom:0.75rem; font-weight:700;
}
/* Personal Highlights: a solid teal panel, as in the PDF, not plain text. */
.highlights{
  background:var(--teal); color:#fff;
  padding:1.25rem 1.4rem; border-radius:var(--radius);
}
.highlights h5{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:#fff;
  margin-bottom:0.75rem; font-weight:700;
}
.highlights ul{margin:0; padding:0; font-size:0.88rem; list-style:none;}
.highlights li{margin-bottom:0.55rem; padding-left:1.15rem; position:relative;}
.highlights li:last-child{margin-bottom:0;}
.highlights li::before{content:"\00bb"; position:absolute; left:0; color:var(--teal-tint);}
.team-row{display:flex; justify-content:space-between; gap:1rem; font-size:0.85rem; padding:0.3rem 0; border-bottom:1px dashed var(--line);}
.team-row .r{color:var(--muted);}
.team-row .n{font-weight:600; text-align:right;}
.produced-by{margin-top:0.9rem; font-size:0.85rem; color:var(--muted); font-style:italic;}

/* Media panel: a cropped, tiled collage (as in the PDF spreads), majority
   of the expanded view — each tile zooms in place on rollover; click for
   the full-screen lightbox. */
.media-panel{min-width:0;}
.gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:145px; grid-auto-flow:dense;
  gap:6px;
}
.gallery-tile{
  position:relative; overflow:hidden; border-radius:2px;
  background:#111; cursor:zoom-in;
}
.gallery-tile::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,0);
  transition:background .3s ease; pointer-events:none;
}
.gallery-tile:hover::after{background:rgba(0,0,0,0.06);}
.gallery-tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.gallery-tile:hover img{transform:scale(1.1);}
.gallery-tile.tile-feature{grid-column:span 2; grid-row:span 2;}
.gallery-tile.tile-wide{grid-column:span 2;}
.gallery-tile.tile-wide3{grid-column:span 3;}
.gallery-tile.tile-tall{grid-row:span 2;}
.gallery-tile.tile-tall2{grid-row:span 3;}

/* ===== Contact / footer ===== */
.contact{text-align:center; padding:8rem 0;}
.contact h2{font-size:clamp(2.2rem,6vw,4rem);}
.contact .email{
  display:inline-block; margin-top:1.5rem; font-size:1.1rem;
  border-bottom:1px solid var(--ink); padding-bottom:2px; text-decoration:none;
}
.contact .phone{display:block; margin-top:0.75rem; color:var(--muted);}
footer{
  border-top:1px solid var(--line); padding:2rem 0; text-align:center;
  font-size:0.8rem; color:var(--muted);
}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; background:rgba(10,10,10,0.94); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:4vh 4vw;
}
.lightbox.open{display:flex;}
.lightbox img{max-height:92vh; max-width:92vw; object-fit:contain; border-radius:2px;}
.lightbox .close{
  position:absolute; top:24px; right:32px; color:#fff; font-size:2rem;
  cursor:pointer; line-height:1; background:none; border:none;
}

/* ===== Responsive ===== */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;}
  .about-photo{position:static; max-width:220px;}
  .stage-cards{grid-template-columns:1fr;}
  .project-layout{grid-template-columns:1fr;}
  .media-panel{order:-1;}
  .gallery-grid{grid-auto-rows:100px;}
}
@media (max-width:760px){
  /* Vertical timeline: the connecting line runs down the centre behind the
     stacked dots and phase pills, top to bottom instead of left to right. */
  .pipeline-v2{flex-direction:column; align-items:stretch; gap:0; position:relative;}
  .pipeline-v2::before{
    display:block; top:14px; bottom:14px; left:50%; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, var(--teal-tint), var(--teal) 33%, var(--teal) 66%, var(--teal-dark));
    transform:translateX(-50%);
  }
  .p-node{flex:none; width:auto; padding:0.5rem 0;}
  .p-segment{flex:none; align-self:auto; display:flex; justify-content:center; padding:0.35rem 0;}
  .p-segment .segment-label{position:static; transform:none;}
  .p-segment:hover .segment-label, .p-segment.linked .segment-label{transform:scale(1.08);}

  /* Service details collapse behind a tap-to-expand header, so the phase
     summary is scannable without a wall of bullet lists. Tapping the
     matching phase pill above expands and scrolls to its card (see script.js). */
  .stage-card-toggle{cursor:pointer;}
  .stage-chevron{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:26px; height:26px; border:1px solid var(--line); border-radius:50%;
    font-size:1rem; transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  }
  .stage-card.expanded .stage-chevron{
    transform:rotate(45deg); background:var(--teal); border-color:var(--teal); color:#fff;
  }
  .stage-card-body{display:none;}
  .stage-card.expanded .stage-card-body{display:block;}
}
@media (max-width:640px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0; background:var(--paper);
    flex-direction:column; padding:1.5rem 28px; gap:1.25rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-150%); transition:transform .25s ease;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:block;}
  .project > summary{grid-template-columns:70px 1fr auto; padding:0.9rem 1rem;}
  .project .thumb{width:70px; height:56px;}
  .project-body{padding:0 1rem 1.5rem;}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:90px;}
  .filter-bar{gap:0.4rem;}
  .filter-btn{padding:0.4rem 0.85rem; font-size:0.72rem;}
}