/* ============================================================
   Jonathan Hammond — portfolio
   Apple-marketing-web system · Newsroom editorial + Bento
   ============================================================ */

:root{
  --text:#1d1d1f; --text2:#6e6e73; --text3:#86868b;
  --bg:#ffffff; --bg2:#f5f5f7; --bg3:#ececee;
  --hair:#d2d2d7; --hair2:#e3e3e6;
  --blue:#0066cc; --blue-d:#2997ff; --btn:#0071e3; --btn-h:#0077ed;
  --ink:#0a0a0c;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1180px;
  --r-card:24px; --r-pill:980px;
  --ease:cubic-bezier(.32,.72,0,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sf); color:var(--text); background:var(--bg);
  font-size:17px; line-height:1.47; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }
::selection{ background:rgba(0,102,204,.16); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:32px; }
.section{ padding-block:96px; }
.section--tight{ padding-block:64px; }
.bg2{ background:var(--bg2); }
.bg-dark{ background:var(--ink); color:#f5f5f7; }

/* ---------- type helpers ---------- */
.kicker{ font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text3); }
.h-display{ font-size:clamp(40px,5.4vw,68px); line-height:1.06; font-weight:600; letter-spacing:-.022em; }
.h1{ font-size:clamp(34px,4.2vw,52px); line-height:1.08; font-weight:600; letter-spacing:-.02em; }
.h2{ font-size:clamp(28px,3.2vw,40px); line-height:1.1; font-weight:600; letter-spacing:-.018em; }
.lede{ font-size:clamp(20px,2.1vw,26px); line-height:1.38; font-weight:400; color:var(--text2); letter-spacing:-.012em; }
.muted{ color:var(--text2); }
.faint{ color:var(--text3); }
.measure{ max-width:680px; }
.center{ text-align:center; }

/* ---------- buttons / links ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 24px;
  border-radius:var(--r-pill); background:var(--btn); color:#fff; font-size:16px; font-weight:400;
  cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease); }
.btn:hover{ background:var(--btn-h); }
.btn:active{ transform:scale(.98); }
.btn--ghost{ background:transparent; color:var(--blue); box-shadow:inset 0 0 0 1px var(--hair); }
.btn--ghost:hover{ background:rgba(0,0,0,.03); }
.bg-dark .btn--ghost{ color:var(--blue-d); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); }
.bg-dark .btn--ghost:hover{ background:rgba(255,255,255,.06); }

.lm{ display:inline-flex; align-items:center; gap:3px; color:var(--blue); font-size:inherit; cursor:pointer; }
.lm .chev{ width:.7em; height:.7em; margin-top:.08em; transition:transform .25s var(--ease); }
.lm:hover{ text-decoration:underline; text-underline-offset:3px; }
.lm:hover .chev{ transform:translateX(3px); }
.bg-dark .lm{ color:var(--blue-d); }
.lm--lg{ font-size:19px; }

/* ---------- frosted nav ---------- */
.nav{ position:sticky; top:0; z-index:100; height:52px;
  background:rgba(255,255,255,.7); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s; }
.nav.is-scrolled{ border-bottom-color:rgba(0,0,0,.1); }
.nav-in{ max-width:var(--wrap); height:100%; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; }
.nav-name{ font-size:16px; font-weight:600; letter-spacing:-.01em; justify-self:start; }
.nav-role{ font-weight:400; color:var(--text3); font-size:13px; margin-left:11px; padding-left:11px; border-left:1px solid var(--hair); letter-spacing:0; }
@media (max-width:520px){ .nav-role{ display:none; } }
.nav-links{ display:flex; gap:34px; justify-self:center; }
.nav-links a{ font-size:13px; color:rgba(0,0,0,.76); transition:color .2s; }
.nav-links a:hover{ color:var(--text); }
.nav-links a.is-active{ color:var(--text); font-weight:500; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }
.nav-cta{ font-size:13px; color:var(--blue); justify-self:end; }
.nav-burger{ display:none; }

/* ---------- newsroom page header ---------- */
.lede-head{ padding-block:72px 8px; }
.lede-head .kicker{ margin-bottom:20px; }
.lede-head .h-display{ max-width:22ch; }
.lede-head .lede{ margin-top:24px; max-width:640px; }
.lede-head .head-actions{ display:flex; align-items:center; gap:26px; margin-top:32px; flex-wrap:wrap; }

/* ---------- video / media slot ---------- */
.av{ position:relative; overflow:hidden; isolation:isolate; background:#e9ecf1; border-radius:var(--r-card); }
.av video{ width:100%; height:100%; object-fit:cover; }
.av-poster{ position:absolute; inset:0; }
.av--light .av-poster{ background:
  radial-gradient(110% 80% at 76% 6%, rgba(41,151,255,.12) 0%, rgba(41,151,255,0) 52%),
  linear-gradient(134deg, #f5f7fa 0%, #e9ecf1 56%, #dfe3ea 100%); }
.av--dark{ background:#0b0b0d; }
.av--dark .av-poster{ background:
  radial-gradient(110% 90% at 50% -12%, rgba(41,151,255,.2) 0%, rgba(41,151,255,0) 56%),
  linear-gradient(134deg, #24242a 0%, #161618 56%, #0b0b0d 100%); }
.av-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  padding-left:3px; border:none; transition:transform .25s var(--ease), background .25s; }
.av--light .av-play{ background:rgba(255,255,255,.62); color:#1d1d1f;
  box-shadow:0 1px 6px rgba(0,0,0,.14), inset 0 0 0 .5px rgba(0,0,0,.06); backdrop-filter:blur(6px); }
.av--dark .av-play{ background:rgba(255,255,255,.16); color:#fff;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3); backdrop-filter:blur(6px); }
.av:hover .av-play{ transform:translate(-50%,-50%) scale(1.06); }
.av-cap{ position:absolute; left:18px; bottom:14px; font-size:12px; letter-spacing:-.01em; color:#86868b; }
.av--dark .av-cap{ color:rgba(255,255,255,.6); }
.av--16x9{ aspect-ratio:16/9; }
.av--4x3{ aspect-ratio:4/3; }
.av--wide{ aspect-ratio:21/9; }
.media-frame{ border-radius:var(--r-card); overflow:hidden; box-shadow:0 30px 80px -44px rgba(0,0,0,.3); }

/* ---------- bento ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.b-card{ position:relative; background:#fff; border-radius:var(--r-card); padding:36px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.025);
  display:flex; flex-direction:column; min-height:240px; }
.b-card--pad0{ padding:0; }
.b-card--gray{ background:var(--bg2); box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
.b-card--dark{ background:var(--ink); color:#f5f5f7; box-shadow:none; }
.span-2{ grid-column:span 2; } .span-3{ grid-column:span 3; }
.span-4{ grid-column:span 4; } .span-6{ grid-column:span 6; }
.row-2{ grid-row:span 2; }
.b-eyebrow{ font-size:14px; font-weight:500; color:var(--text2); }
.b-title{ font-size:26px; font-weight:600; letter-spacing:-.018em; line-height:1.1; }
.b-card--dark .b-title{ color:#fff; }
.b-text{ font-size:17px; color:var(--text2); line-height:1.45; }
.b-stat{ font-size:80px; font-weight:600; letter-spacing:-.03em; line-height:.95; }
.b-stat small{ font-size:.34em; color:var(--text2); font-weight:500; margin-left:8px; letter-spacing:-.01em; }
.b-spacer{ margin-top:auto; }
.b-card .lm{ font-size:16px; }

/* clickable card */
a.b-card, a.proj{ color:inherit; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
a.b-card:hover, a.proj:hover{ transform:translateY(-3px);
  box-shadow:0 18px 50px -28px rgba(0,0,0,.32), inset 0 0 0 1px rgba(0,0,0,.04); }

/* ---------- project card ---------- */
.proj{ display:flex; flex-direction:column; background:#fff; border-radius:var(--r-card); overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.025); }
.proj .av{ border-radius:0; }
.proj-body{ padding:28px 30px 30px; display:flex; flex-direction:column; gap:8px; flex:1; }
.proj-meta{ display:flex; gap:10px; align-items:center; font-size:13px; color:var(--text3); }
.proj-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--hair); }
.proj-title{ font-size:23px; font-weight:600; letter-spacing:-.015em; }
.proj-desc{ font-size:16px; color:var(--text2); line-height:1.45; }
.proj-foot{ margin-top:auto; padding-top:14px; }

/* ---------- tag chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:13px; color:var(--text2); border:1px solid var(--hair); border-radius:var(--r-pill); padding:6px 14px; white-space:nowrap; }
button.chip{ font-family:inherit; cursor:pointer; background:#fff; line-height:1; transition:background .2s, color .2s, border-color .2s; }
button.chip:hover{ border-color:var(--text3); }
.chip.is-on{ background:var(--text); color:#fff; border-color:var(--text); }
.b-card--dark .chip{ border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.8); }

/* ---------- logos row ---------- */
.logos{ display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; }
.logos span{ font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--text); opacity:.55; }

/* ---------- contact strip ---------- */
.cta{ text-align:center; }
.cta .h1{ max-width:18ch; margin:0 auto; }
.cta-actions{ display:flex; gap:18px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.social{ display:flex; gap:14px; flex-wrap:wrap; }
.social a{ display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 20px;
  border-radius:var(--r-pill); background:#fff; box-shadow:inset 0 0 0 1px var(--hair);
  font-size:15px; transition:transform .2s var(--ease), box-shadow .2s; }
.social a:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--text3); }
.social svg{ width:18px; height:18px; }

/* ---------- footer ---------- */
.foot{ background:var(--bg2); border-top:1px solid var(--hair); font-size:12px; color:var(--text3); }
.foot-top{ display:flex; justify-content:space-between; gap:40px; padding:40px 0 28px; flex-wrap:wrap; }
.foot-col h4{ font-size:12px; color:var(--text); font-weight:600; margin-bottom:12px; }
.foot-col a{ display:block; color:var(--text2); margin-bottom:9px; font-size:13px; }
.foot-col a:hover{ color:var(--text); }
.foot-name{ font-size:19px; font-weight:600; color:var(--text); letter-spacing:-.01em; max-width:240px; }
.foot-name span{ display:block; font-size:13px; font-weight:400; color:var(--text2); margin-top:8px; }
.foot-bottom{ border-top:1px solid var(--hair); padding:20px 0 40px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; line-height:1.5; }

/* ---------- timeline ---------- */
.tl{ position:relative; margin-top:8px; }
.tl-item{ position:relative; display:grid; grid-template-columns:152px 1fr; gap:44px;
  padding:36px 0; border-top:1px solid var(--hair); }
.tl-item:first-child{ border-top:0; padding-top:8px; }
.tl-era{ font-size:15px; font-weight:600; color:var(--text3); padding-top:5px; letter-spacing:-.01em; white-space:nowrap; }
.tl-era b{ display:block; font-size:30px; font-weight:600; color:var(--text); letter-spacing:-.02em; line-height:1; margin-bottom:6px; }
.tl-role{ font-size:24px; font-weight:600; letter-spacing:-.016em; line-height:1.15; }
.tl-org{ color:var(--blue); }
.tl-desc{ font-size:17px; color:var(--text2); margin-top:10px; max-width:62ch; line-height:1.5; }
.tl-tags{ margin-top:16px; }
.tl-media{ margin-top:18px; border-radius:16px; overflow:hidden; max-width:520px; }
.tl-now{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--blue);
  background:rgba(0,102,204,.08); border-radius:var(--r-pill); padding:5px 12px; margin-bottom:12px; }
.tl-now .pulse{ width:7px; height:7px; border-radius:50%; background:#1db954; box-shadow:0 0 0 0 rgba(29,185,84,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(29,185,84,.5);} 70%{ box-shadow:0 0 0 7px rgba(29,185,84,0);} 100%{ box-shadow:0 0 0 0 rgba(29,185,84,0);} }
@media (prefers-reduced-motion:reduce){ .tl-now .pulse{ animation:none; } }
@media (max-width:760px){
  .tl-item{ grid-template-columns:1fr; gap:10px; }
  .tl-era{ padding-top:0; }
  .tl-era b{ font-size:24px; display:inline; margin:0 8px 0 0; }
}

/* ---------- scroll reveal ---------- */
/* Visible by default; only hidden+animated once JS adds .anim to <html>,
   so content never gets stuck invisible if JS/observer/transitions misbehave. */
.reveal{ opacity:1; }
html.anim .reveal{ opacity:0; }
html.anim .reveal.in{ animation:revIn .7s var(--ease) both; }
@keyframes revIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  html.anim .reveal{ opacity:1; }
  html.anim .reveal.in{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .bento{ grid-template-columns:repeat(4,1fr); }
  .span-3{ grid-column:span 2; } .span-4{ grid-column:span 4; } .span-2{ grid-column:span 2; }
  .section{ padding-block:80px; }
}
@media (max-width:760px){
  .wrap{ padding-inline:22px; }
  .nav-in{ padding:0 22px; }
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    border:none; background:transparent; cursor:pointer; }
  .nav-burger span{ display:block; width:18px; height:1.5px; background:var(--text); position:relative; }
  .nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--text); }
  .nav-burger span::before{ top:-5px; } .nav-burger span::after{ top:5px; }
  .bento{ grid-template-columns:1fr; gap:16px; }
  .span-2,.span-3,.span-4,.span-6{ grid-column:span 1; }
  .b-card{ min-height:0; padding:30px; }
  .section{ padding-block:64px; }
  .foot-top{ gap:28px; }
  .b-stat{ font-size:64px; }
}

/* simple mobile menu sheet */
.msheet{ position:fixed; inset:52px 0 auto 0; z-index:99; background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px); border-bottom:1px solid var(--hair); transform:translateY(-8px); opacity:0;
  pointer-events:none; transition:opacity .25s, transform .25s; padding:14px 22px 26px; }
.msheet.open{ opacity:1; transform:none; pointer-events:auto; }
.msheet a{ display:block; font-size:22px; font-weight:500; padding:14px 0; border-bottom:1px solid var(--hair2); }

/* sound toggle on hero films */
.sndbtn{position:absolute;right:14px;bottom:14px;z-index:5;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:0;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:inherit;font-size:13px;font-weight:500;letter-spacing:-.01em;cursor:pointer;backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);transition:background .18s,transform .18s}
.sndbtn:hover{background:rgba(0,0,0,.72);transform:translateY(-1px)}
.sndbtn.is-on{background:rgba(255,255,255,.92);color:#1d1d1f}