/* ==========================================================================
   CHALK — Chris Neal director portfolio (loaded only on chris.html)
   Depends on styles.css (tokens + shared components).
   Component classes shared with the homepage (.work-tile, .trusted,
   .section-mega, .case, .morework) are re-declared here because home.css is
   NOT loaded on this page. Do not edit styles.css / home.css.
   ========================================================================== */

/* ---------- Film grain overlay ------------------------------------------ */
#grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.5;mix-blend-mode:overlay}

/* ---------- Section mega heading (shared visual w/ homepage) ------------- */
.section-mega{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,9vw,8.5rem);line-height:.85;color:var(--ink);margin-bottom:clamp(1.5rem,4vw,3rem)}
.section-mega em{font-family:var(--font-accent);font-style:italic;font-weight:400;text-transform:none;color:var(--ink)}

/* ---------- HERO / ABOUT ------------------------------------------------- */
.chris-hero{background:var(--black);padding-top:clamp(8rem,14vw,11rem);padding-bottom:clamp(4rem,8vw,7rem);
  padding-inline:clamp(1.5rem,6vw,3.5rem);overflow:hidden;position:relative}
.chris-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:860px){.chris-hero__grid{grid-template-columns:1fr;gap:clamp(2rem,7vw,3rem)}}
.chris-hero__title{font-size:clamp(3rem,10vw,8rem);line-height:.86;margin:.4rem 0 1.75rem;letter-spacing:-.01em}
.chris-hero__title em{font-family:var(--font-accent);font-style:italic;font-weight:400;text-transform:none;padding-right:.06em}
.chris-hero__bio{max-width:46ch;margin-bottom:2.25rem}
.chris-hero__bio p{font-family:var(--font-ui);font-weight:400;color:var(--ink);
  font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;margin-bottom:.9rem}
.chris-hero__bio p:last-child{margin-bottom:0}
.chris-hero__roles{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:2.25rem}
.chris-hero__roles span{font-family:var(--font-ui);font-weight:600;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--hairline-strong);
  border-radius:var(--r-pill);padding:.5em 1.1em}
.chris-hero__cta{display:flex;flex-wrap:wrap;gap:1rem}
.chris-hero__media{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--card-dark);
  aspect-ratio:4/5;box-shadow:0 30px 80px #0009}
.chris-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.chris-hero__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,#0000 55%,#000000b3);pointer-events:none}
@media (max-width:860px){.chris-hero__media{max-width:440px;margin-inline:auto}}

/* ---------- Generic dark section wrapper -------------------------------- */
.chris-section{padding-block:clamp(4rem,8vw,7rem)}
.chris-section--raised{background:var(--black-raised)}
.chris-eyebrow-lg{margin-bottom:.75rem}

/* ---------- MY WORK (case studies) — light section, white cards --------- */
.chris-work{background:var(--light-4);padding-block:clamp(4rem,8vw,7rem)}
.chris-work .section-mega,.chris-work .section-mega em{color:var(--ink-on-light)}

/* Ported .case pattern (from home.css) — white card, dark text; on hover the
   card fills dark, text flips white, and a purple play button reveals. The
   whole <article> is the [data-vimeo] trigger. */
.case{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3.5vw,3.5rem);align-items:center;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);background:#fff;color:var(--ink-on-light);border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2.75rem);overflow:hidden;isolation:isolate;cursor:pointer;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),color .45s var(--ease-out)}
.case:last-child{margin-bottom:0}
.case::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ink-on-light);
  opacity:0;transition:opacity .45s var(--ease-out)}
.case:hover{transform:translateY(-6px);box-shadow:0 24px 60px #00000026;color:#fff}
.case:hover::before{opacity:1}
@media (max-width:860px){.case{grid-template-columns:1fr;gap:1.5rem}.case__media{order:-1}}
.case__project{display:inline-block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.12em;margin-bottom:.6rem;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.case__title{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1.1rem;line-height:.95;color:inherit;
  transition:color .45s var(--ease-out)}
.case__title em{font-family:var(--font-accent);font-style:italic;font-weight:400;text-transform:none;color:inherit}
.case__facts{margin-bottom:1.25rem;display:grid;gap:.4rem;
  font-family:var(--font-ui);font-size:clamp(.9rem,1vw,1rem);line-height:1.5;color:inherit;opacity:.9}
.case__facts b{display:inline;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:.7rem;letter-spacing:.08em;margin-right:.5rem;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.case__weeks{border-left:2px solid color-mix(in srgb,currentColor 28%,transparent);
  padding-left:1.15rem;margin-bottom:1.25rem;display:grid;gap:.7rem}
.case__weeks p{margin:0;font-family:var(--font-ui);font-size:clamp(.85rem,1vw,.96rem);line-height:1.55;color:inherit;opacity:.82}
.case__weeks b{color:inherit;opacity:1;font-weight:700}
.case__role{font-family:var(--font-accent);font-style:italic;font-size:clamp(1rem,1.3vw,1.18rem);
  line-height:1.4;color:inherit;margin-bottom:1.25rem;opacity:.95}
.case .checks{margin-bottom:1.25rem}
.case .check{color:inherit}
.case__more{display:inline-block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:.9rem;letter-spacing:.02em;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.case__media{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;background:var(--card-dark)}
.case__media video{width:100%;height:100%;object-fit:cover}
.case__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:2;
  width:64px;height:64px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);pointer-events:none}
.case__play::after{content:'';border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.case:hover .case__play{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- MORE WORK grid + awards (shared visual w/ homepage) --------- */
/* white bg so the press/awards logo images (white boxes) blend invisibly */
.morework{background:#fff;padding-block:clamp(4rem,8vw,7rem)}
.morework__head{display:grid;grid-template-columns:1fr auto;gap:2rem 3rem;align-items:center;margin-bottom:clamp(2rem,4vw,3.5rem)}
.morework__eyebrow{font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;margin-bottom:.5rem;
  background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;display:inline-block}
.morework__title{color:var(--ink-on-light);font-size:clamp(2.5rem,6vw,5.5rem);line-height:.9;margin:0}
.press-logos{display:flex;flex-direction:column;gap:1rem;align-items:flex-end}
.press-logos img{height:clamp(20px,2vw,30px);width:auto;filter:grayscale(1);opacity:.55}
.awards-row{margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center}
.awards-row img{max-width:min(760px,92%);height:auto;margin-inline:auto;filter:grayscale(1);opacity:.6}
@media (max-width:767px){
  .morework__head{grid-template-columns:1fr}
  .press-logos{align-items:flex-start}
}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.5vw,1.25rem)}
@media (max-width:991px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.work-grid{grid-template-columns:1fr}}

/* ---------- Landscape work tiles (shared visual w/ homepage) ------------ */
.work-tile{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:16/9;background:var(--card-dark);cursor:pointer}
.work-tile video,.work-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.work-tile:hover video,.work-tile:hover img{transform:scale(1.05)}
.work-tile::after{content:'';position:absolute;inset:0;
  background:linear-gradient(#0000 38%,#000000cc);pointer-events:none;z-index:1}
.work-tile__label{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(1rem,1.5vw,1.4rem)}
.work-tile__label h3{color:#fff;font-size:clamp(1rem,1.5vw,1.3rem);margin:0;line-height:1.02}
.work-tile__label .cat{font-family:var(--font-accent);font-style:italic;text-transform:none;
  color:var(--ink);font-size:.88rem;margin-top:.25rem;display:block}
.work-tile__label .role{font-family:var(--font-ui);font-weight:600;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#ffffffb3;margin-top:.4rem;display:block}

/* ---------- Trusted logo cloud (shared visual w/ homepage) -------------- */
.trusted{background:var(--light-1);text-align:center;padding-block:clamp(3rem,6vw,5rem)}
.trusted__title{color:#000;font-size:clamp(2rem,3.5vw,3.25rem);margin-bottom:2.5rem}
.trusted__title em{color:#000}
.trusted__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.5rem,3vw,3em);
  align-items:center;justify-items:center;max-width:1100px;margin-inline:auto}
.trusted__grid img{max-width:min(14vw,150px);height:auto;filter:saturate(0);opacity:.8;transition:opacity .3s,filter .3s}
.trusted__grid img:hover{filter:saturate(1);opacity:1}
@media (max-width:767px){.trusted__grid{grid-template-columns:repeat(3,1fr)}.trusted__grid img{max-width:28vw}}
@media (max-width:420px){.trusted__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Email CTA ("shoot me an email") ----------------------------- */
.chris-cta{background:var(--black);padding-block:clamp(5rem,10vw,9rem)}
/* eyebrow must be block so the big email link drops onto its own line below it */
.chris-cta .eyebrow{display:block;margin-bottom:1.25rem}
.chris-cta__link{display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.2rem,6.5vw,5.5rem);line-height:1.02;letter-spacing:.5px;
  background-image:var(--grad-brand-108);background-size:200% auto;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  transition:background-position 1.5s var(--ease-out);position:relative;padding-bottom:.14em}
.chris-cta__link:hover{background-position:100% 0}
.chris-cta__link::after{content:'';position:absolute;left:0;bottom:0;height:5px;width:100%;border-radius:2px;
  background-image:var(--grad-brand-108)}