/* JONES7 portfolio, v4. Dark editorial theme, after the TD Alexfolio layout. */
:root {
  --bg: #121111; --text: #ffffff; --muted: #a7a0a0; --rule: #403b3b; --accent: #f05038; --ground: #e3e3e1;
  --display: "Inter", system-ui, sans-serif; --mono: "DM Mono", ui-monospace, monospace;
  --gutter: 52px; --max: 1440px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--accent); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--accent); color: var(--text); font-family: var(--display); font-optical-sizing: auto; font-size: 18px; line-height: 1.4; letter-spacing: .01em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.muted { color: var(--muted); }
.content { position: relative; z-index: 2; }
.content > section, .content > header { background: var(--bg); }
.spacer { height: 100vh; background: transparent; pointer-events: none; }
/* let clicks fall through to the fixed footer under the spacer */
.content { pointer-events: none; }
.content > * { pointer-events: auto; }
.content > .spacer { pointer-events: none; }

/* page transition: wipe up to accent, then reveal top-down */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 1.4s; }
::view-transition-old(root) { animation: wipe-out .6s cubic-bezier(.83,.12,.28,.73) both; }
::view-transition-new(root) { animation: wipe-in .6s cubic-bezier(.67,.05,.18,.92) .8s both; }
@keyframes wipe-out { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes wipe-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* cursor follower */
.cursor { position: fixed; z-index: 50; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 500; pointer-events: none; transform: scale(0); transition: transform .35s cubic-bezier(.22,.8,.24,1); }
.cursor.on { transform: scale(1); }
@media (hover: none) { .cursor { display: none; } }

/* section label bar: sticky, the next one pushes it off */
.bar { position: sticky; top: 0; z-index: 6; height: 49px; display: flex; align-items: center; gap: 8px; padding: 0 20px; border-top: 1px solid var(--rule); background: var(--bg); color: var(--accent); font-size: 18px; font-weight: 600; }
.bar span { font-family: "Inter", sans-serif; }

/* ---------- hero ---------- */
.h4 { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: var(--ground) !important; color: #fff; isolation: isolate; }
.h4-photo { position: absolute; inset: 0; z-index: 0; display: flex; align-items: flex-end; justify-content: center; }
/* portrait: hair just under the top edge, head centred (head sits at 55.5% of the image width) */
.h4-photo img { position: absolute; top: 0; left: 50%; height: 125%; width: auto; max-width: none; transform: translateX(-55.5%); filter: grayscale(1) contrast(1.06); }
.h4-photo .silhouette { display: none; }
.h4-photo.empty .silhouette { display: block; height: 88%; width: auto; fill: #1d1d1d; }
.trail { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; mix-blend-mode: overlay; pointer-events: none; }
.h4-nav, .h4-mq, .h4-social, .h4-role { mix-blend-mode: exclusion; color: #fff; }
.h4-nav { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr 1fr auto; padding: 26px 28px; font-size: 18px; }
.h4-nav a { justify-self: start; position: relative; }
.h4-nav a:nth-child(2), .h4-nav a:nth-child(3) { justify-self: center; } .h4-nav a:last-child { justify-self: end; }
.h4-nav a::after, .f4 a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.h4-nav a:hover::after, .f4 a:hover::after { transform: scaleX(1); }
.mq { position: absolute; z-index: 2; left: 0; right: 0; white-space: nowrap; pointer-events: none; }
.mq-track { display: inline-flex; will-change: transform; }
.mq span { font-weight: 500; font-size: clamp(120px, 18.2vw, 280px); line-height: .79; letter-spacing: -0.04em; padding-bottom: .08em; }
.h4-mq { top: 50%; transform: translateY(-50%); }
.h4-social { position: absolute; z-index: 3; left: 24px; bottom: 30px; list-style: none; display: grid; gap: 14px; font-size: 20px; }
.h4-social a { display: flex; align-items: center; gap: 12px; transition: transform .4s cubic-bezier(.22,.8,.24,1); }
.h4-social a:hover { transform: translateX(6px); }
.h4-social svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.h4-role { position: absolute; z-index: 3; right: 30px; bottom: 26px; text-align: right; font-weight: 600; font-size: clamp(34px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.033em; }
.js .fadein { opacity: 0; animation: fade 1.6s linear .1s forwards; }
@keyframes fade { to { opacity: 1; } }
@media (max-width: 760px) {
  .h4-nav { grid-template-columns: 1fr auto auto auto; gap: 14px; padding: 18px 16px; font-size: 14px; }
  .h4-nav a:nth-child(2), .h4-nav a:nth-child(3) { justify-self: end; }
  .h4-social { display: flex; gap: 16px; left: 16px; bottom: 18px; font-size: 14px; }
  .h4-social svg { width: 18px; height: 18px; }
  .h4-role { right: 16px; bottom: 56px; font-size: 30px; }
}

/* ---------- intro ---------- */
.intro4 { padding: 160px var(--gutter) 180px; }
.in4 { max-width: var(--max); margin: 0 auto; }
.big { font-weight: 600; font-size: clamp(38px, 5vw, 72px); line-height: 1.03; letter-spacing: -0.04em; max-width: 19ch; }
.chars .c { color: #262424; transition: color .15s linear; }
.chars .c.on { color: var(--text); }
.chars .c.acc.on { color: var(--accent); }
.intro-side { margin-top: 72px; margin-left: auto; max-width: 520px; }
.body { color: var(--muted); font-size: 18px; line-height: 1.4; letter-spacing: .01em; }
.pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 65px; padding: 0 40px; margin-top: 36px; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); }
.pill b { position: absolute; width: 285px; height: 285px; border-radius: 50%; background: var(--accent); left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%) scale(0); transition: transform .45s cubic-bezier(.22,.8,.24,1); }
.pill:hover b { transform: translate(-50%, -50%) scale(1); }
.pill span { position: relative; display: block; overflow: hidden; height: 1.4em; line-height: 1.4em; font-weight: 500; }
.pill span::before, .pill span::after { content: attr(data-t); display: block; transition: transform .38s cubic-bezier(.22,.8,.24,1); }
.pill span { color: transparent; }
.pill span::before { color: var(--muted); position: absolute; inset: 0; }
.pill span::after { color: var(--bg); position: absolute; inset: 0; transform: translateY(35px); }
.pill:hover span::before { transform: translateY(-35px); }
.pill:hover span::after { transform: translateY(0); }
@media (max-width: 760px) { :root { --gutter: 16px; } .intro4 { padding: 96px var(--gutter) 110px; } }

/* ---------- services ---------- */
.svc-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 120px; }
.svc-num { position: relative; }
.svc-num .outline { position: sticky; top: 96px; display: inline-block; font-family: var(--mono); font-weight: 300; font-size: clamp(140px, 17vw, 252px); line-height: .87; color: var(--bg); -webkit-text-stroke: 1px #fff; transition: transform .22s ease-in; }
.svc-num .outline.flip { transform: scaleX(0); }
.svc { min-height: 82vh; padding-top: 40px; }
.svc h3 { font-weight: 600; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; color: #4a4545; transform: translateX(20px); transition: color .6s ease-out, transform .6s ease-out; }
.svc.seen h3 { color: #fff; transform: none; }
.svc p { margin-top: 26px; color: var(--muted); max-width: 52ch; }
.svc ul { list-style: none; margin-top: 40px; border-top: 1px solid var(--rule); }
.svc li { display: flex; justify-content: space-between; align-items: center; height: 52px; border-bottom: 1px solid var(--rule); font-weight: 600; }
.svc li .mono { color: var(--muted); font-weight: 400; }
@media (max-width: 860px) { .svc-wrap { grid-template-columns: 1fr; } .svc-num { display: none; } .svc { min-height: 0; padding: 40px 0; } .svc h3 { color: #fff; transform: none; } }

/* ---------- projects: stacking cards ---------- */
.stack-item { position: sticky; top: 0; height: 100vh; padding: 12px; background: transparent; }
.pcard { display: grid; grid-template-columns: 1fr 522px; gap: 10px; height: 100%; padding: 12px; background: var(--bg); border-radius: 20px; transform-origin: 50% 0; will-change: transform, opacity; }
.pimg { border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 24px; position: relative; }
.pimg.dark { background: radial-gradient(900px 700px at 70% 30%, #26201a, #0b0b0d 65%); }
.pimg.dark img { width: 26%; border-radius: 26px; border: 1px solid #2a2a2f; transition: transform .8s cubic-bezier(.22,.8,.24,1); }
.pimg.dark img:nth-child(2) { transform: translateY(-36px); }
.pcard:hover .pimg.dark img:nth-child(1) { transform: translateY(-10px) rotate(-3deg); }
.pcard:hover .pimg.dark img:nth-child(3) { transform: translateY(-10px) rotate(3deg); }
.pimg.paper { background: #f3f1ec; padding: 6%; color: #1d1b18; --paper:#f6f2ea; --paper-2:#efe8dc; --ink:#1d1b18; --ink-2:#57524a; --ink-3:#8a8378; --rule-p:#ddd4c4; --accent-soft:#fde3dc; --card:#fbf8f2; --ph-b:#ddd1bc; }
.pimg.paper svg { height: 100%; width: auto; max-width: 100%; transition: transform 1s cubic-bezier(.22,.8,.24,1); }
.pcard:hover .pimg.paper svg { transform: scale(1.04); }
.pimg.video video { width: 100%; height: 100%; object-fit: cover; }
.ppanel { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 12px; padding: 28px; }
.ppanel .mono { color: var(--muted); }
.ppanel h3 { margin-top: 18px; font-weight: 600; font-size: clamp(38px, 4.2vw, 72px); line-height: 1; letter-spacing: -0.035em; }
.ppanel p { margin-top: 22px; color: var(--muted); }
.ptags { list-style: none; margin-top: auto; border-top: 1px solid var(--rule); }
.ptags li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-weight: 600; }
/* diagram classes inside paper panels */
.pimg .d-box { fill: #fbf8f2; stroke: #8a8378; stroke-width: 1.25; }
.pimg .d-box-hi { fill: #fde3dc; stroke: var(--accent); stroke-width: 1.5; }
.pimg .d-box-mute { fill: #efe8dc; stroke: #ddd4c4; stroke-width: 1.25; stroke-dasharray: 4 4; }
.pimg .d-line { fill: none; stroke: #8a8378; stroke-width: 1.5; } .pimg .d-line-hi { fill: none; stroke: var(--accent); stroke-width: 1.75; }
.pimg .d-line-mute { fill: none; stroke: #8a8378; stroke-width: 1.25; stroke-dasharray: 4 4; }
.pimg .d-head { fill: #8a8378; } .pimg .d-head-hi { fill: var(--accent); }
.pimg .d-t { fill: #1d1b18; font-family: var(--display); font-size: 15px; } .pimg .d-t-s { fill: #57524a; font-family: var(--display); font-size: 13px; }
.pimg .d-t-hi { fill: var(--accent); font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pimg .d-t-serif { fill: #1d1b18; font-family: var(--display); font-size: 19px; font-weight: 600; } .pimg .d-cell { fill: #ddd1bc; }
@media (max-width: 900px) {
  .pcard { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .ppanel { padding: 20px; } .ppanel p { display: none; } .ptags { margin-top: 16px; display: flex; gap: 14px; flex-wrap: wrap; border: 0; } .ptags li { border: 0; padding: 0; color: var(--muted); }
  .pimg.dark img { width: 30%; border-radius: 14px; }
}

/* ---------- principles ---------- */
.pr-wrap { position: relative; max-width: var(--max); margin: 0 auto; padding: 120px var(--gutter) 140px; display: grid; grid-template-columns: 200px 1fr 80px; gap: 40px; }
.pr-count { color: var(--muted); font-size: 18px; } .pr-count b { color: var(--accent); font-weight: 400; }
.pr-stage { display: grid; }
.pq { grid-area: 1 / 1; opacity: 0; transition: opacity .28s ease; pointer-events: none; }
.pq.on { opacity: 1; pointer-events: auto; }
.pq blockquote { font-weight: 600; font-size: clamp(36px, 5vw, 72px); line-height: 1.03; letter-spacing: -0.04em; }
.pq figcaption { margin-top: 28px; color: var(--muted); }
.pr-dots { display: grid; gap: 12px; align-content: start; }
.pdot { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--rule); background: #1c1a1a; color: var(--muted); font-family: var(--mono); font-size: 16px; cursor: pointer; transition: box-shadow .2s, color .2s, opacity .2s; opacity: .55; }
.pdot.on { opacity: 1; color: #fff; box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 860px) { .pr-wrap { grid-template-columns: 1fr; } .pr-dots { display: flex; } .pdot { width: 48px; height: 48px; } }
.logos { height: 96px; border-top: 1px solid var(--rule); overflow: hidden; display: flex; align-items: center; }
.logos-track { display: inline-flex; align-items: center; gap: 44px; white-space: nowrap; will-change: transform; }
.logos span { font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: #7c7575; }
.logos i { color: var(--accent); font-style: normal; font-size: 14px; }

/* ---------- experience rows ---------- */
.xrows { list-style: none; max-width: var(--max); margin: 0 auto; padding: 60px var(--gutter) 160px; }
.xrows li { display: grid; grid-template-columns: 1.2fr 1.2fr 1.2fr 110px; align-items: center; min-height: 66px; padding: 0 16px; border-bottom: 1px solid var(--rule); font-weight: 600; transition: background .2s, color .2s; }
.xrows li:first-child { border-top: 1px solid var(--rule); }
.xrows .muted { font-weight: 400; }
.xrows .idx { justify-self: end; position: relative; color: var(--muted); }
.xrows .idx i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; font-style: normal; font-size: 22px; transition: opacity .2s; }
.xrows .idx b { font-weight: 400; transition: opacity .2s; }
.xrows li:hover { background: var(--accent); color: #fff; }
.xrows li:hover .muted, .xrows li:hover .idx { color: #fff; }
.xrows li:hover .idx b { opacity: 0; } .xrows li:hover .idx i { opacity: 1; }
@media (max-width: 760px) { .xrows li { grid-template-columns: 1fr auto; padding: 12px 8px; gap: 2px 12px; } .xrows li > span:nth-child(2) { grid-row: 2; color: var(--muted); font-weight: 400; } .xrows li > span:nth-child(3) { display: none; } .xrows .idx { grid-row: 1 / 3; grid-column: 2; } }

/* ---------- footer: fixed, uncovered by the spacer ---------- */
.f4 { position: fixed; z-index: 1; inset: 0; height: 100vh; overflow: hidden; background: #2a2828; color: #fff; isolation: isolate; }
.f4-photo { position: absolute; inset: 0; z-index: 0; background: radial-gradient(80% 90% at 60% 40%, #5a5555, #1a1818 70%); }
.f4-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: grayscale(1); }
.f4-dim { position: absolute; inset: 0; background: #000; opacity: var(--dim, .7); }
.f4-mq { top: 44%; transform: translateY(-50%); mix-blend-mode: exclusion; }
.f4-info { position: absolute; z-index: 3; left: 28px; right: 28px; bottom: 64px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.f4-info dl { display: grid; gap: 14px; }
.f4-info dt { font-size: 14px; color: #bdb6b6; }
.f4-info dd { font-size: 20px; font-weight: 500; }
.f4-info a, .f4-social a { position: relative; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; margin-right: 8px; }
.f4-social { list-style: none; display: flex; gap: 28px; font-size: 20px; font-weight: 500; }
.totop { position: absolute; z-index: 3; top: 28px; right: 28px; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #121111; display: grid; place-items: center; font-size: 16px; }
.f4-legal { position: absolute; z-index: 3; left: 28px; bottom: 22px; font-size: 13px; color: #a7a0a0; }

@media (prefers-reduced-motion: reduce) {
  .js .fadein { opacity: 1; animation: none; }
  .chars .c { color: inherit; } .chars .c.acc { color: var(--accent); }
  @view-transition { navigation: none; }
}
.pcard { grid-template-rows: minmax(0, 1fr); }
.ppanel { overflow: hidden; min-height: 0; }
.ppanel h3 { font-size: clamp(34px, 3.6vw, 64px); }
@media (max-width: 900px) { .pcard { grid-template-rows: minmax(0, 1fr) auto; } }

/* ---- motion values measured from the template's code ---- */
.h4 { background: var(--bg) !important; }
.h4-photo { background: var(--ground); will-change: transform; }
.js .h4-photo { opacity: 0; transform: scale(2.4); animation: photo-in 1s cubic-bezier(.82,.26,.4,.8) .4s forwards; }
@keyframes photo-in { to { opacity: 1; transform: scale(1); } }
.js .h4-nav.fadein { animation: fade 1.6s cubic-bezier(.44,0,.56,1) .4s forwards; }
.js .h4-social.fadein, .js .h4-role.fadein { animation: fade 1.6s cubic-bezier(.44,0,.56,1) 1.4s forwards; }
.h4-mq { opacity: 1 !important; animation: none !important; }
.h4-mq .mq-push { display: inline-block; will-change: transform; }
.js .h4-mq .mq-grow { display: inline-block; transform: scale(0); animation: grow .7s cubic-bezier(.76,.21,.41,.91) .9s forwards; }
@keyframes grow { to { transform: scale(1); } }
.f4-mq .mq-push { display: inline-block; will-change: transform; }

.intro4 { text-align: center; }
.big { max-width: 23ch; margin: 0 auto; font-size: clamp(36px, 5vw, 72px); line-height: 1.03; }
.chars .c { color: #141414; }
.intro-side { margin: 64px auto 0; max-width: 440px; }
.intro-side .body { font-size: 15px; }
.js .intro-side { opacity: 0; transition: opacity .4s cubic-bezier(.7,.06,.52,.89) .1s; }
.js .intro-side.vis { opacity: 1; }

.js .svc { opacity: 0; transform: scale(.9); transform-origin: 50% 0; transition: opacity .4s cubic-bezier(.2,.8,.3,1), transform .4s cubic-bezier(.2,.8,.3,1); }
.js .svc.seen { opacity: 1; transform: none; }
.js .svc.gone { opacity: .7; transform: scale(.9); transition: opacity .6s cubic-bezier(.34,1.3,.5,1), transform .6s cubic-bezier(.34,1.3,.5,1); }
.svc h3 { color: #fff; transform: none; }
.svc-num { perspective: 900px; }
.svc-num .outline { transition: transform .4s cubic-bezier(.34,1.3,.5,1); transform-origin: 50% 50%; }
.svc-num .outline.flip { transform: rotateY(90deg); transition: transform .2s ease-in; }

.f4-photo { background: #1a1818; }
.f4-photo img, .f4-photo .f4-ph { opacity: var(--fo, 0); transform: scale(var(--fs, 1.1)); }
.f4-ph { position: absolute; inset: 0; background: radial-gradient(70% 90% at 55% 45%, #6a6464, #1d1b1b 70%); }
@media (prefers-reduced-motion: reduce) { .js .h4-photo, .js .h4-mq .mq-grow, .js .svc, .js .intro-side { opacity: 1; transform: none; animation: none; } }
.f4-info, .f4-legal { mix-blend-mode: exclusion; color: #fff; }
.f4-info dt, .f4-legal { color: #fff; opacity: .75; }
.f4 .dot { background: #22c55e; }
.f4-photo { background: var(--ground); }

/* footer portrait: transparent cutout */
/* same framing as the hero: hair just under the top, head centred (43% of the image width).
   left is worked out in vh because transform is taken by the scroll-in scale. */
.f4-photo:has(img) .f4-ph { display: none; }
.f4-photo img { position: absolute; top: 0; left: calc(50% - 40.3vh); width: auto; height: 125%; max-width: none; transform-origin: 50% 0; }
/* phones: size by width so the whole head fits across the screen */
@media (max-width: 700px) {
  /* the max() keeps the image tall enough to reach the bottom on tall phones;
     the footer face is too wide to centre, so its nose (11.3% in) sits 16px from the left */
  .h4-photo img { width: max(150vw, 67vh); height: auto; }
  .f4-photo img { width: max(140vw, 76vh); height: auto; left: calc(16px - 0.113 * max(140vw, 76vh)); }
  /* the legal line wraps to three lines here, so lift the contact block clear of it */
  .f4-legal { right: 28px; }
  .f4-info { bottom: 104px; }
}