/* ==========================================================
   JM Velez — portfolio
   Edit colours, type and spacing here; all pages use this file.
   ========================================================== */

:root{
  --paper:#FFFFFF;
  --wash:#F1F2F0;
  --ink:#000000;
  --mute:#5E625A;
  --rule:#D9DBD6;
  --mark:#FFE500;
  --measure:66ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
}

a{color:inherit}
img{max-width:100%;height:auto;display:block}
iframe{max-width:100%;border:0}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.shell{max-width:1080px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px;margin:0 auto;padding:0 28px}

/* ---------- masthead ---------- */

.masthead{
  position:sticky;top:0;z-index:10;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}

.masthead-inner{
  display:flex;flex-wrap:wrap;gap:16px 32px;
  align-items:baseline;justify-content:space-between;
  padding:18px 0;
}

.wordmark{font-weight:800;font-size:17px;letter-spacing:-0.02em;text-decoration:none}

.masthead nav{display:flex;flex-wrap:wrap;gap:22px;font-size:14px;font-weight:500}
.masthead nav a{
  text-decoration:none;color:var(--mute);
  padding-bottom:2px;border-bottom:2px solid transparent;
}
.masthead nav a:hover,.masthead nav a:focus-visible{color:var(--ink);border-bottom-color:var(--mark)}

/* ---------- hero ---------- */

.hero{padding:96px 0 72px}

.hero h1{
  margin:0;font-weight:800;
  font-size:clamp(2.3rem,6vw,4.4rem);
  line-height:1.03;letter-spacing:-0.035em;max-width:22ch;
}

.hero p{margin:28px 0 0;max-width:54ch;font-size:1.125rem;line-height:1.55;color:var(--mute)}

.hero-meta{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px;font-weight:500}
.hero-meta a{text-decoration:none;border-bottom:2px solid var(--mark)}

/* ---------- filter ---------- */

.filter{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:20px 0;display:flex;flex-wrap:wrap;gap:12px;
}

.filter button{
  font:inherit;font-size:14px;font-weight:500;
  background:none;border:1px solid var(--rule);color:var(--mute);
  padding:8px 16px;cursor:pointer;
}
.filter button:hover{color:var(--ink);border-color:var(--ink)}
.filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- work index ---------- */

.track{padding:72px 0 8px}
.track > h2{margin:0 0 8px;font-size:1.5rem;font-weight:800;letter-spacing:-0.02em}
.track > .track-note{margin:0 0 40px;max-width:var(--measure);color:var(--mute)}

.entry{
  display:grid;grid-template-columns:300px 1fr;gap:36px;
  padding:36px 0;border-top:1px solid var(--rule);
}
.entry:last-child{border-bottom:1px solid var(--rule)}
.entry.wide{grid-template-columns:1fr}

.entry figure{margin:0}
.entry figure img{width:100%;background:var(--wash)}
.entry figure figcaption{margin-top:10px;font-size:13px;color:var(--mute)}

/* Embedded video (YouTube/Vimeo). Fills the column and keeps 16:9,
   overriding the width/height attributes on the iframe itself. */
.entry figure iframe{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  display:block;
  background:var(--ink);
}

/* Video is 16:9, so a 300px column makes it tiny. Add class="entry media"
   alongside class="entry" to widen the figure column for that row. */
.entry.media{grid-template-columns:460px 1fr}

.entry h3{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-0.015em}
.entry .role{margin:6px 0 0;font-size:14px;font-weight:500;color:var(--mute)}
.entry .blurb{margin:16px 0 0;max-width:var(--measure)}

.entry .links{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;font-weight:500}
.entry .links a{text-decoration:none;border-bottom:2px solid var(--mark)}

.clips{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:14px;max-width:var(--measure)}
.clips li{padding-left:16px;border-left:3px solid var(--wash)}
.clips a{font-weight:500;text-decoration:none;border-bottom:2px solid var(--mark)}
.clips span{display:block;font-size:14px;color:var(--mute)}

/* ---------- about + contact ---------- */

.about{padding:96px 0}
.about h2,.contact h2{margin:0 0 24px;font-size:1.5rem;font-weight:800;letter-spacing:-0.02em}
.about p{margin:0 0 18px;max-width:var(--measure)}

.cred{margin:36px 0 0;padding:0;list-style:none;display:grid;gap:14px;max-width:var(--measure);font-size:15px}
.cred li{padding-left:16px;border-left:3px solid var(--wash)}

.contact{padding:72px 0 96px;border-top:1px solid var(--rule)}
.contact p{margin:0 0 28px;max-width:48ch;color:var(--mute)}
.contact-list{display:grid;gap:14px;font-size:1.0625rem;font-weight:500}
.contact-list a{text-decoration:none;border-bottom:2px solid var(--mark)}

footer{border-top:1px solid var(--rule);padding:28px 0 48px;font-size:13px;color:var(--mute)}

/* ---------- case study pages ---------- */

.case-hero{padding:80px 0 48px}
.case-hero .kicker{margin:0 0 14px;font-size:14px;font-weight:500;color:var(--mute)}
.case-hero h1{
  margin:0;font-weight:800;
  font-size:clamp(2.1rem,5.2vw,3.6rem);
  line-height:1.05;letter-spacing:-0.03em;
}
.case-hero .standfirst{margin:24px 0 0;font-size:1.1875rem;line-height:1.55;max-width:60ch}

.facts{
  margin:44px 0 0;padding:24px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;
}
.facts div{font-size:14px}
.facts dt{color:var(--mute);margin-bottom:4px}
.facts dd{margin:0;font-weight:500}

.case-body{padding:8px 0 40px}
.case-body h2{margin:64px 0 16px;font-size:1.5rem;font-weight:800;letter-spacing:-0.02em}
.case-body h3{margin:36px 0 10px;font-size:1.125rem;font-weight:600}
.case-body p{margin:0 0 18px}
.case-body ul{margin:0 0 18px;padding-left:20px}
.case-body li{margin-bottom:8px}
.case-body blockquote{
  margin:28px 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--mark);
  font-size:1.0625rem;
}

.plate{margin:40px 0}
.plate img{width:100%;background:var(--wash)}
.plate figcaption{margin-top:12px;font-size:14px;color:var(--mute)}

.gallery{
  margin:40px 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;
}
.gallery figure{margin:0}
.gallery img{width:100%;background:var(--wash)}
.gallery figcaption{margin-top:10px;font-size:13px;line-height:1.45;color:var(--mute)}
.gallery strong{color:var(--ink);font-weight:600;display:block}

.screens{
  margin:40px 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;align-items:start;
}
.screens figure{margin:0}
.screens figcaption{margin-top:10px;font-size:13px;line-height:1.45;color:var(--mute)}

.case-cta{
  margin:56px 0 0;padding:28px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:14px 28px;font-weight:500;
}
.case-cta a{text-decoration:none;border-bottom:2px solid var(--mark)}

.case-foot{padding:48px 0 96px;font-size:15px}
.case-foot a{text-decoration:none;border-bottom:2px solid var(--mark);font-weight:500}

/* ---------- responsive ---------- */

@media (max-width:720px){
  .entry{grid-template-columns:1fr;gap:22px}
  .entry.media{grid-template-columns:1fr}
  .entry figure{max-width:340px}
  .entry.media figure{max-width:none}
  .hero{padding:64px 0 48px}
  .track{padding:56px 0 8px}
  .case-hero{padding:56px 0 36px}
}

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