/* Shaked Nahmany Zilberstein — portfolio
   Built from Shaked's own CV: soft grey paper, burgundy accents, blurred rose and sky light,
   an airy display face for headings, Montserrat for text, four-point stars on a thin timeline. */

:root {
  --ground: #EEEDF0;
  --ink: #18171C;
  --text: #3C3B42;
  --muted: #6E6C74;
  --accent: #7A2238;
  --accent-strong: #5E1528;
  --line: #A9A7AF;
  --frame: #FFFFFF;
  --btn-ink: #FFFFFF;
  --rose: 185, 120, 138;
  --sky: 150, 192, 235;

  --display: "Federo", "Bona Nova", Georgia, serif;   /* English CV: Federo + Montserrat */
  --font: "Montserrat", "Heebo", system-ui, sans-serif;

  --margin: clamp(1.25rem, 5vw, 6rem);
  --max: 82rem;
  --bar-h: 4.25rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 1rem); scrollbar-color: var(--accent) var(--ground); }
body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--font); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video { display: block; width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.nums { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; padding-inline: var(--margin); position: relative; }
section { position: relative; isolation: isolate; overflow-x: clip; }
html { overflow-x: clip; }

/* ---------- the CV's soft light ---------- */
.blob { position: absolute; z-index: -1; width: min(62vw, 54rem); aspect-ratio: 1; border-radius: 50%; pointer-events: none; filter: blur(30px); }
.blob-rose { background: radial-gradient(circle at 50% 50%, rgba(var(--rose), 0.62), rgba(var(--rose), 0.22) 42%, rgba(var(--rose), 0) 68%); }
.blob-sky { background: radial-gradient(circle at 50% 50%, rgba(var(--sky), 0.7), rgba(var(--sky), 0.25) 42%, rgba(var(--sky), 0) 68%); }
.hero .blob-rose { inset-inline-end: 4%; top: -8%; }
.hero .blob-sky { inset-inline-end: -16%; top: 18%; }
.blob-mid { inset-inline-start: -28%; top: 30%; opacity: 0.55; }
.blob-low { inset-inline-end: -22%; top: 10%; opacity: 0.8; }
.blob-end { inset-inline-start: -18%; bottom: -30%; }
.blob-end2 { inset-inline-start: 6%; bottom: -46%; }

/* ---------- header ---------- */
.bar { position: sticky; top: 0; z-index: 10; height: var(--bar-h); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding-inline: var(--margin); background: transparent; color: var(--ink); transition: background-color 300ms ease; }
.bar.is-scrolled { background: var(--ground); }
main { margin-top: calc(var(--bar-h) * -1); }
.hero { padding-top: calc(var(--bar-h) + clamp(2rem, 6vw, 5rem)) !important; }
.wordmark { font-family: var(--display); font-size: 1.45rem; letter-spacing: 0.04em; text-decoration: none; margin-inline-end: auto; }
.bar-links { display: flex; gap: clamp(1rem, 2.6vw, 2.25rem); font-size: 0.95rem; font-weight: 500; }
.lang { min-height: 2.6rem; padding-inline: 1.1rem; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 600; font-size: 0.9rem; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.lang:active { transform: scale(0.96); }
.skip { position: absolute; inset-inline-start: var(--margin); top: -4rem; z-index: 20; padding: 0.7rem 1rem; background: var(--ink); color: var(--ground); }
.skip:focus { top: 0.5rem; }

/* ---------- controls ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.8rem; border-radius: 999px; background: var(--accent); color: #fff; border: 1.5px solid var(--accent); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button-ghost { background: transparent; color: var(--accent); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
  .button-ghost:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  .link:hover { text-decoration-color: currentColor; }
  .lang:hover { background: var(--ink); color: var(--ground); }
}

/* ---------- type roles ---------- */
.section-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); line-height: 1.1; letter-spacing: 0.14em; color: var(--ink); margin-bottom: 1.75rem; }
[lang="he"] .section-title { letter-spacing: 0.02em; }

/* ---------- hero: the CV header ---------- */
.hero { padding-top: clamp(2rem, 6vw, 5rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(12rem, 21vw, 19rem); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.name { font-family: var(--display); font-weight: 400; color: var(--ink); line-height: 0.95; }
.name-first { font-size: clamp(4.5rem, 2rem + 10vw, 11rem); letter-spacing: -0.01em; }
.name-last { font-size: clamp(2.1rem, 1.1rem + 4.2vw, 5rem); letter-spacing: 0; margin-top: 0.15em; }
[lang="he"] .name-first { font-size: clamp(4rem, 2rem + 9vw, 10rem); }
.role { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; font-size: clamp(0.85rem, 0.75rem + 0.45vw, 1.15rem); letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); }
[lang="he"] .role { letter-spacing: 0.06em; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); }
.contact-grid { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 0.5rem clamp(2rem, 5vw, 4rem); }
.contact-grid div { display: grid; grid-template-columns: 5.75rem auto; gap: 1rem; align-items: baseline; }
.contact-grid dt { color: var(--accent); font-size: 0.92rem; font-weight: 500; }
.contact-grid dd { color: var(--ink); font-weight: 500; }
.hero .actions { margin-top: 2.25rem; }

.portrait { position: relative; justify-self: end; width: 100%; isolation: auto; }
.portrait img { aspect-ratio: 712 / 1000; object-fit: contain; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }   /* transparent cut-out: the page's coloured light sits behind her */
.spark { position: absolute; fill: var(--ink); pointer-events: none; }
.spark-a { width: 11%; aspect-ratio: 1; inset-inline-start: -14%; top: 6%; }
.spark-b { width: 8%; aspect-ratio: 1; inset-inline-end: 6%; top: 10%; fill: #fff; }
.spark-c { width: 4.5%; aspect-ratio: 1; inset-inline-end: 2%; top: 22%; fill: #fff; }
.spark-d { width: 13%; aspect-ratio: 1; inset-inline-end: -10%; bottom: 22%; }

.about-me { margin-top: clamp(4rem, 8vw, 6.5rem); }
.about-me p { max-width: 62ch; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); line-height: 1.65; color: var(--text); }

/* ---------- selected projects: grouped by kind of work, one card per project ---------- */
.projects { padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 9vw, 8rem); }
.group + .group { margin-top: clamp(4rem, 8vw, 6.5rem); }
.group-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem 3rem; align-items: end; padding-bottom: 1.25rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1.5px solid var(--line); }
.group-title { font-family: var(--font); font-weight: 700; color: var(--ink); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem); letter-spacing: -0.01em; line-height: 1.25; }
.group-desc { color: var(--muted); max-width: 46ch; justify-self: end; text-align: end; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); }
.card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-radius: clamp(16px, 1.6vw, 22px); }
.card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: clamp(16px, 1.6vw, 22px); background: var(--frame); box-shadow: 0 40px 70px -50px rgba(60, 30, 45, 0.5); }
.card-media img { height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.card-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.35rem 0.15rem 0; flex: 1; }
.card-title { font-weight: 700; color: var(--ink); font-size: clamp(1.15rem, 1rem + 0.55vw, 1.45rem); line-height: 1.3; letter-spacing: -0.01em; }
.card-desc { color: var(--text); max-width: 52ch; }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin-top: auto; padding-top: 0.6rem; }
.tag { color: var(--accent); font-weight: 500; font-size: 0.95rem; }
.card-cta { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.arrow { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-hover) var(--ease-out); }
[dir="rtl"] .arrow { transform: scaleX(-1); }
.card:active .card-media { transform: scale(0.99); }
.card-media { transition: transform var(--t-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-media img { transform: scale(1.035); }
  .card:hover .card-cta { color: var(--accent); }
  .card:hover .arrow { transform: translateX(4px); }
  [dir="rtl"] .card:hover .arrow { transform: scaleX(-1) translateX(4px); }
}
.marker { position: absolute; width: 1.7rem; height: 1.7rem; fill: var(--ink); background: var(--ground); }
:root { --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z'/%3E%3C/svg%3E"); }
[lang="he"] { --display: "Bona Nova", Georgia, serif; --font: "Heebo", "Montserrat", system-ui, sans-serif; }   /* Hebrew CV: Bona Nova + Heebo */

/* ---------- case study viewer ---------- */
.case { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ground); color: var(--text); overflow: hidden; }
.case::backdrop { background: rgba(24, 23, 28, 0.55); }
.case[open] { display: flex; flex-direction: column; }
.case-bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; height: var(--bar-h); padding-inline: var(--margin); background: var(--ground); border-bottom: 1.5px solid #DDDBE1; }
.case-bar-title { font-weight: 600; color: var(--ink); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.case-close, .case-next { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding-inline: 1rem; border-radius: 999px; font-weight: 600; font-size: 0.92rem; color: var(--ink); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.case-close { justify-self: start; border: 1.5px solid var(--ink); }
.case-next { justify-self: end; }
.case-close svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.case-close:active, .case-next:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .case-close:hover { background: var(--ink); color: var(--ground); } .case-next:hover { color: var(--accent); } }
.case-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.case-head { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2rem, 4vw, 3rem); max-width: calc(64rem + var(--margin) * 2); }
.case-title { margin-top: 0.75rem; font-family: var(--display); font-weight: 400; color: var(--ink); font-size: clamp(3rem, 1.6rem + 6vw, 7rem); line-height: 1; letter-spacing: 0.02em; }
.case-sub { margin-top: 0.6rem; font-weight: 600; color: var(--ink); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); }
.case-desc { margin-top: 1.1rem; max-width: 62ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); }
.case-meta { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem 2rem; padding-top: 1.5rem; border-top: 1.5px solid #DDDBE1; }
.case-meta dt { color: var(--accent); font-weight: 600; font-size: 0.88rem; }
.case-meta dd { color: var(--ink); font-weight: 500; margin-top: 0.2rem; }
.case-body { width: 100%; max-width: calc(76rem + var(--margin) * 2); margin-inline: auto; padding-inline: var(--margin); display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.case-body figure { border-radius: clamp(12px, 1.4vw, 20px); overflow: hidden; background: var(--frame); box-shadow: 0 40px 70px -55px rgba(60, 30, 45, 0.5); }
.case-body .boards { display: grid; gap: 0; border-radius: clamp(12px, 1.4vw, 20px); overflow: hidden; box-shadow: 0 40px 70px -55px rgba(60, 30, 45, 0.5); }
.case-body .boards figure { border-radius: 0; box-shadow: none; }
.case-body .row { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.case-body figcaption { padding: 0.85rem 1.1rem 1rem; font-size: 0.9rem; color: var(--muted); }
.case-end { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; padding-block: clamp(3rem, 6vw, 5rem); }
body.case-open { overflow: hidden; }

/* ---------- the CV body ---------- */
.cv { padding-block: clamp(4rem, 8vw, 7rem); }
.cv-grid { display: grid; grid-template-columns: minmax(16rem, 4fr) minmax(0, 8fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.cv-block + .cv-block { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.cv-side .section-title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 1.1rem; }
.plain li + li { margin-top: 1.1rem; }
.plain strong { display: block; color: var(--ink); font-weight: 600; line-height: 1.35; }
.plain .where { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 0.15rem; }
.plain .when { display: block; color: var(--accent); font-weight: 500; font-size: 0.95rem; }
.plain.list li + li { margin-top: 0.35rem; }
.plain.list li { color: var(--ink); }
.langs div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.3rem; }
.langs dt { font-weight: 700; color: var(--ink); }

.timeline { position: relative; padding-inline-start: 2.75rem; }
.timeline::before { content: ""; position: absolute; inset-inline-start: calc(0.7rem - 0.75px); top: 0.8rem; bottom: 0.4rem; width: 1.5px; background: var(--line); }
.timeline li { position: relative; }
.timeline li + li { margin-top: 1.9rem; }
.timeline .marker { width: 1.4rem; height: 1.4rem; inset-inline-start: -2.75rem; top: 0.1rem; }
.t-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1.5rem; }
.t-head h3 { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); font-weight: 700; color: var(--ink); line-height: 1.4; }
.t-head .at { font-weight: 400; color: var(--text); }
.t-head .when { color: var(--accent); font-weight: 500; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.timeline .where { color: var(--muted); }
.timeline p { margin-top: 0.3rem; max-width: 66ch; }
.section-title.later { margin-top: clamp(3rem, 5vw, 4.5rem); }
.plain .when { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .plain .when { text-align: right; }

/* ---------- contact ---------- */
.contact { padding-block: clamp(5rem, 10vw, 9rem) clamp(3rem, 5vw, 4rem); overflow: hidden; }
.contact-title { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: clamp(3.5rem, 1.6rem + 8vw, 9rem); line-height: 1; letter-spacing: 0.06em; }
[lang="he"] .contact-title { letter-spacing: 0; }
.contact-lead { margin-top: 1.5rem; max-width: 40ch; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; color: var(--text); }
.contact .actions { margin-top: 2.25rem; }
.foot { margin-top: clamp(4rem, 8vw, 7rem); font-size: 0.92rem; color: var(--muted); }
.spark-end { width: clamp(1.75rem, 3vw, 2.75rem); aspect-ratio: 1; inset-inline-end: var(--margin); bottom: clamp(2.5rem, 4vw, 3.5rem); }

/* ---------- tablet and phone ---------- */
@media (max-width: 62em) {
  .cv-grid { grid-template-columns: 1fr; }
  .cv-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
  .cv-block + .cv-block { margin-top: 0; }
}
@media (max-width: 48em) {
  .hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .portrait { grid-row: 1; justify-self: start; width: min(11rem, 46vw); margin-inline-start: 0.5rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .group-head { grid-template-columns: 1fr; }
  .group-desc { justify-self: start; text-align: start; }
  .case-body .row { grid-template-columns: 1fr; }
  .case-bar { grid-template-columns: auto 1fr; }
  .case-bar-title { display: none; }
  .hero .blob-rose { inset-inline-end: -30%; top: -4%; width: 110vw; }
  .hero .blob-sky { inset-inline-end: -50%; top: 6%; width: 110vw; }
}
@media (max-width: 36em) {
  :root { --bar-h: 3.75rem; }
  .bar-links { display: none; }
  .cv-side { grid-template-columns: 1fr; }
  .contact-grid div { grid-template-columns: 5.25rem minmax(0, 1fr); }
  .contact-grid dd { overflow-wrap: anywhere; }
  .actions .button { flex: 1 1 auto; }
}

/* ---------- motion: content is visible without script and under reduced motion ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(16px); animation: rise 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 100ms + 200ms); }
  .js .lines [data-line] { transform: translateY(105%); animation: line 1100ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 130ms + 100ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .facts[data-reveal] li { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
  .js .facts[data-reveal].is-in li { opacity: 1; transform: none; }
  .js .facts[data-reveal].is-in li:nth-child(2) { transition-delay: 80ms; }
  .js .facts[data-reveal].is-in li:nth-child(3) { transition-delay: 160ms; }
  .js .facts[data-reveal].is-in li:nth-child(4) { transition-delay: 240ms; }
  .js .marker { transition: transform 700ms var(--ease-out); }
  .spark-b, .spark-c { animation: twinkle 5s var(--ease-in-out) infinite alternate; }
  .spark-c { animation-delay: 1.6s; }
  .blob { animation: drift 18s var(--ease-in-out) infinite alternate; }
  .blob-sky { animation-duration: 22s; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes line { to { transform: none; } }
@keyframes twinkle { from { opacity: 1; transform: scale(1); } to { opacity: 0.55; transform: scale(0.8) rotate(12deg); } }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(3%, 4%, 0); } }

/* ---------- motion layer pieces (motion.js) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.w { display: inline-block; white-space: nowrap; }
.c { display: inline-block; }
.name .w { padding-bottom: 0.06em; }

.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 40; background: var(--accent); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
[dir="rtl"] .progress { transform-origin: right center; }

/* moving strip of skills */
.marquee { overflow: hidden; padding-block: clamp(1.1rem, 2vw, 1.6rem); border-block: 1.5px solid #DCDAE0; background: rgba(255, 255, 255, 0.35); }
.marquee-track { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); width: max-content; padding-inline-start: 2rem; }
.marquee-track li { font-family: var(--display); font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); line-height: 1.1; color: var(--ink); white-space: nowrap; letter-spacing: 0.04em; }
.marquee-track li:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.mq-star { width: clamp(1rem, 1.6vw, 1.5rem); height: clamp(1rem, 1.6vw, 1.5rem); fill: var(--accent); flex: none; }

/* the rule under each project group draws itself */
.group-head { position: relative; }
.rule { position: absolute; inset-inline: 0; bottom: -1.5px; height: 1.5px; background: var(--ink); transform-origin: left center; }
[dir="rtl"] .rule { transform-origin: right center; }

/* cursor */
.cursor { position: fixed; top: 0; left: 0; z-index: 50; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 300ms ease; }
.cursor.is-on { opacity: 1; }
.cursor::before { content: ""; position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); transition: transform 450ms var(--ease-out), background-color 300ms ease, opacity 300ms ease; }
.cursor.is-link::before { transform: scale(3.2); background: rgba(122, 34, 56, 0.16); }
.cursor.is-view::before { transform: scale(7); background: var(--accent); }
.cursor-label { position: absolute; transform: translate(-50%, -50%) scale(0.4); color: #fff; font-weight: 600; font-size: 0.85rem; opacity: 0; white-space: nowrap; transition: opacity 250ms ease, transform 450ms var(--ease-out); }
.cursor.is-view .cursor-label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
html.has-cursor .case { cursor: auto; }
html.has-cursor .case a, html.has-cursor .case button { cursor: pointer; }
.case[open] ~ .cursor, body.case-open .cursor { opacity: 0; }

/* GSAP takes over these from the CSS-only motion */
html.gsap .blob, html.gsap .spark-b, html.gsap .spark-c { animation: none; }
html.gsap .group-head { border-bottom-color: #D6D4DA; }
html.gsap .card:hover .card-media img { transform: none; }
html.gsap .card-media { will-change: clip-path; }
.timeline::before { transform: scaleY(var(--draw, 1)); transform-origin: top center; }
.timeline::before { background: var(--accent); }

@media (max-width: 48em) {
}

/* ---------- portfolio-first structure ---------- */
.hero-lead { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); max-width: 34ch; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); line-height: 1.45; color: var(--text); }
.nav-cv { color: var(--accent); font-weight: 600; }

.about { padding-block: clamp(4rem, 8vw, 7rem); }
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.about-grid .section-title { margin-bottom: 0; }
.about-me p { max-width: 58ch; font-size: clamp(1.2rem, 1rem + 0.9vw, 1.75rem); line-height: 1.5; color: var(--ink); }
.about-me .actions { margin-top: 2.25rem; }

.contact-links { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 3rem; max-width: 52rem; }
.contact-links li { display: grid; gap: 0.15rem; padding-top: 0.9rem; border-top: 1.5px solid #D6D4DA; }
.contact-links span { color: var(--accent); font-size: 0.9rem; font-weight: 500; }
.contact-links a { color: var(--ink); font-weight: 500; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); overflow-wrap: anywhere; justify-self: start; }

/* case study: story, process, then the work */
.case-story { max-width: calc(76rem + var(--margin) * 2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.case-story article { background: var(--frame); border-radius: clamp(14px, 1.4vw, 20px); padding: clamp(1.4rem, 2.6vw, 2.25rem); box-shadow: 0 40px 70px -55px rgba(60, 30, 45, 0.45); }
.case-story h3 { font-family: var(--display); font-weight: 400; color: var(--accent); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: 0.06em; margin-bottom: 0.8rem; }
[lang="he"] .case-story h3 { letter-spacing: 0; }
.case-story p { color: var(--ink); font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem); line-height: 1.65; }
.case-process { max-width: calc(76rem + var(--margin) * 2); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.case-process h3, .case-work-title { font-weight: 700; color: var(--ink); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); margin-bottom: 1rem; }
.case-work-title { max-width: calc(76rem + var(--margin) * 2); }
.case-process ol { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.case-process li { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1.05rem; border-radius: 999px; background: var(--frame); color: var(--ink); font-weight: 500; font-size: 0.95rem; box-shadow: 0 10px 25px -18px rgba(60, 30, 45, 0.5); }
.case-process li::before { content: ""; width: 0.8rem; height: 0.8rem; background: var(--accent); -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat; flex: none; }
.case-meta { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

@media (max-width: 48em) {
  .about-grid { grid-template-columns: 1fr; }
  .contact-links { grid-template-columns: 1fr; }
  .case-story { grid-template-columns: 1fr; }
}
@media (max-width: 36em) { .nav-cv { display: none; } }
.about-grid .about-me { margin-top: 0; }

/* colour glow that trails the pointer (fine pointers only, set up by motion.js) */
.glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 800ms ease; }
.glow.is-on { opacity: 1; }
.glow span { position: absolute; top: 0; left: 0; width: clamp(22rem, 34vw, 34rem); aspect-ratio: 1; margin: calc(clamp(22rem, 34vw, 34rem) / -2) 0 0 calc(clamp(22rem, 34vw, 34rem) / -2); border-radius: 50%; filter: blur(40px); }
.glow-rose { background: radial-gradient(circle, rgba(var(--rose), 0.55), rgba(var(--rose), 0.18) 45%, rgba(var(--rose), 0) 70%); }
.glow-sky { background: radial-gradient(circle, rgba(var(--sky), 0.6), rgba(var(--sky), 0.2) 45%, rgba(var(--sky), 0) 70%); }
main { position: relative; z-index: 1; }

/* a featured card across the whole row: picture beside the words */
.card-wide-item { grid-column: 1 / -1; }
.card-wide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.card-wide .card-body { padding: 0; }
.card-wide .card-title { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); }
@media (max-width: 48em) { .card-wide { grid-template-columns: 1fr; gap: 0; } .card-wide .card-body { padding-top: 1.35rem; } }

/* ---------- one row of projects that slides sideways while the section holds still ---------- */
.hs { position: relative; padding-top: clamp(1rem, 3vw, 2rem); }
.hs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 0.5rem 3rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hs-head .section-title { margin-bottom: 0; }
.hs-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 1rem 2rem; }
.hs-viewport::-webkit-scrollbar { display: none; }
.hs-track { display: flex; gap: clamp(1.25rem, 2.6vw, 2.5rem); width: max-content; padding-inline: var(--margin); }
.hs-track.cards { grid-template-columns: none; }
.hs-item { flex: none; width: clamp(19rem, 34vw, 33rem); scroll-snap-align: start; }
.hs-foot { margin-top: 0.5rem; }
.hs-bar { display: block; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .hs-bar { transform-origin: right center; }
html:not(.gsap) .hs-foot { display: none; }
html.gsap .hs-viewport { overflow: visible; scroll-snap-type: none; }
.group-rebrand { margin-top: clamp(4rem, 8vw, 7rem); }
@media (max-width: 48em) {
  .hs-head { grid-template-columns: 1fr; }
  .hs-head .group-desc { justify-self: start; text-align: start; }
  html.gsap .hs-track { flex-direction: column; width: auto; }
  html.gsap .hs-item { width: auto; }
  .hs-foot { display: none; }
}

/* ---------- centred composition for the key moments ---------- */
/* opening: photo, name, role, one line, two actions – all on one centre line */
.hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(1.25rem, 2.5vw, 2rem); }
.hero .portrait { grid-row: 1; justify-self: center; width: clamp(10rem, 15vw, 14rem); margin-inline: 0; }
.hero-text { display: flex; flex-direction: column; align-items: center; }
.hero-lead { margin-inline: auto; max-width: 36ch; }
.hero .actions { justify-content: center; }
.hero { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* section openers */
.hs-head, .group-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hs-head .group-desc, .group-head .group-desc { justify-self: center; text-align: center; max-width: 52ch; }

/* about: a short centred note with the CV */
.about-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: calc(48rem + var(--margin) * 2); }
.about-grid .section-title { margin-bottom: 0.5rem; }
.about-me p { margin-inline: auto; }
.about-me .actions { justify-content: center; }

/* contact */
.contact-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact-lead { margin-inline: auto; }
.contact .actions { justify-content: center; }
.contact-links { width: 100%; justify-items: center; }
.contact-links li { justify-items: center; width: 100%; }
.contact-links a { justify-self: center; }

/* case study opening */
.case-head { text-align: center; }
.case-desc { margin-inline: auto; }
.case-meta { text-align: center; }
.case-process, .case-work-title { text-align: center; }
.case-process ol { justify-content: center; }

@media (max-width: 48em) {
  .hero .portrait { width: min(11rem, 46vw); margin-inline: 0; justify-self: center; }
}

/* ---------- no lonely last words ---------- */
p, .card-desc, .card-title, .group-desc, figcaption, .case-sub { text-wrap: pretty; }
.section-title, .group-title, .contact-title, .case-title, .hero-lead, .contact-lead { text-wrap: balance; }
/* the whole opening fits the first screen */
.hero .portrait { width: clamp(8.5rem, 11vw, 11.5rem); }
.name-first { font-size: clamp(3.75rem, 1.4rem + 7.4vw, 8.25rem); }
.name-last { font-size: clamp(1.9rem, 1rem + 3.2vw, 3.9rem); }
[lang="he"] .name-first { font-size: clamp(3.5rem, 1.4rem + 7vw, 8rem); }
.hero { padding-top: calc(var(--bar-h) + clamp(1rem, 3vw, 2.5rem)) !important; }
.role { margin-top: clamp(1rem, 2vw, 1.5rem); }
.hero .actions { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }

/* ---------- calmer scale, more air (round 2) ---------- */
/* project row: cards sized by the screen's height too, so the whole card – including "View case study" – fits */
.hs { padding-top: clamp(0.5rem, 2vh, 1.5rem); }
.hs-head { margin-bottom: clamp(1rem, 2.5vh, 2rem); }
.hs-viewport { padding-block: 0.5rem 1.25rem; }
.hs-track { gap: clamp(2.5rem, 5.5vw, 6rem); }
.hs-item { width: clamp(15rem, min(25vw, (100vh - 19rem) * 1.15), 24rem); }
.hs-foot { margin-top: 0.25rem; }
.card-body { gap: 0.45rem; padding-top: 1.05rem; }
.card-title { font-size: clamp(1.02rem, 0.92rem + 0.4vw, 1.25rem); }
.card-desc { font-size: 0.95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tag, .card-cta { font-size: 0.88rem; }
.card-media { box-shadow: 0 30px 50px -40px rgba(60, 30, 45, 0.45); }

/* the rebrand card: same calmer size, centred */
.group-rebrand .cards { max-width: 60rem; margin-inline: auto; }
.card-wide .card-title { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); }
.card-wide .card-desc { -webkit-line-clamp: unset; display: block; }

/* type across the page, one notch down */
.section-title { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.4rem); }
.group-title { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); }
.marquee-track li { font-size: clamp(1.35rem, 1rem + 1.5vw, 2.3rem); }
.about-me p { font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.4rem); }
.contact-title { font-size: clamp(3rem, 1.6rem + 6vw, 7rem); }
.contact-lead { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); }
.case-title { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.5rem); }
.projects { padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 9vw, 8rem); }
.group-rebrand { margin-top: clamp(5rem, 10vw, 9rem); }

@media (max-width: 48em) {
  .hs-item { width: auto; }
  html.gsap .hs-track { gap: 3.5rem; }
}

/* ---------- case viewer: switch between the case study and the film ---------- */
.case-tabs { display: flex; justify-content: center; margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem); width: max-content; max-width: calc(100% - 2 * var(--margin)); padding: 0.3rem; gap: 0.25rem; border-radius: 999px; background: var(--frame); box-shadow: 0 16px 34px -24px rgba(60, 30, 45, 0.5); }
.case-tabs[hidden] { display: none; }
.case-tabs button { min-height: 2.75rem; padding-inline: 1.4rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; color: var(--ink); transition: background-color 250ms ease, color 250ms ease, transform var(--t-press) var(--ease-out); }
.case-tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.case-tabs button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .case-tabs button[aria-selected="false"]:hover { background: #EFE7EA; } }
.case-film { max-width: calc(68rem + var(--margin) * 2); padding-bottom: clamp(2rem, 4vw, 3rem); }
.case-film figure { border-radius: clamp(12px, 1.4vw, 20px); overflow: hidden; background: #000; box-shadow: 0 40px 70px -50px rgba(60, 30, 45, 0.55); }
.case-film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.case-film figcaption { padding: 0.9rem 1.2rem 1rem; background: var(--frame); color: var(--muted); font-size: 0.92rem; text-align: center; }
.case-work-title[hidden], .case-story[hidden], .case-process[hidden] { display: none; }

/* =====================================================================
   Layout system (final): every size follows both the width AND the height
   of the screen, so a 13" laptop, a 14" MacBook, a big monitor and a phone
   all get the same composition – never cramped, never empty.
   ===================================================================== */
:root {
  --section-y: clamp(4.5rem, 5vh + 4vw, 9rem);   /* one rhythm between every section */
  --stack: clamp(0.6rem, 1.6vh, 1.25rem);         /* space between items in a stack */
  --max: 76rem;
}

/* opening: exactly one screen, content centred in it */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--bar-h) + 2vh) !important; padding-bottom: 4vh; }
.hero-grid { gap: var(--stack); }
.hero .portrait { width: auto; height: clamp(8.5rem, 25vh, 15rem); aspect-ratio: 712 / 1000; margin: 0 auto; }
.hero .portrait img { height: 100%; width: auto; margin-inline: auto; }
.name-first { font-size: min(clamp(3.5rem, 1.4rem + 7vw, 8rem), 11.5vh); }
.name-last { font-size: min(clamp(1.75rem, 1rem + 3vw, 3.6rem), 5.4vh); }
[lang="he"] .name-first { font-size: min(clamp(3.3rem, 1.4rem + 6.6vw, 7.6rem), 11vh); }
.role { margin-top: calc(var(--stack) * 1.2); }
.hero-lead { margin-top: var(--stack); }
.hero .actions { margin-top: calc(var(--stack) * 1.6); }

/* the project row: when it holds still it fills the screen and sits centred in it */
.projects { padding-block: var(--section-y); }
.hs { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--bar-h) * 0.8); padding-bottom: 2vh; }
.hs-head { margin-bottom: clamp(1rem, 3vh, 2.25rem); }
.hs-item { width: clamp(15rem, min(24vw, (100svh - 20rem) * 1.12), 24rem); }
.group-rebrand { margin-top: var(--section-y); }
.group-rebrand .group-head { margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem); }

/* about and contact keep the same rhythm */
.about { padding-block: var(--section-y); }
.about-me .actions { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); }
.contact { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--section-y) clamp(2.5rem, 5vh, 4rem); }
.contact-lead { margin-top: clamp(1rem, 2.5vh, 1.5rem); }
.contact .actions { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); }
.contact-links { margin-top: clamp(2rem, 5vh, 3.5rem); max-width: 46rem; }
.foot { margin-top: clamp(2.5rem, 7vh, 5rem); }

/* phones: height-based sizes step aside, the width leads */
@media (max-width: 48em) {
  .hero { min-height: auto; padding-top: calc(var(--bar-h) + 1.5rem) !important; padding-bottom: 3rem; }
  .hero .portrait { height: min(15rem, 42vw); }
  .name-first, [lang="he"] .name-first { font-size: clamp(3.2rem, 15vw, 4.5rem); }
  .name-last { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hs { min-height: auto; padding-top: 0; }
  .contact { min-height: auto; }
}
/* very short screens (small laptops with toolbars) */
@media (min-width: 48.01em) and (max-height: 640px) {
  .hero .portrait { height: 20vh; }
  .hero-lead { font-size: 1rem; }
}

/* =====================================================================
   Type system (final)
   Two families only, both under the SIL Open Font License:
   · Display – Federo (English) / Bona Nova (Hebrew): ONLY for the big statements
     – the name, section titles, "Let's talk", the project name in a case study,
     the logo and the moving strip.
   · Text – Montserrat (English) / Heebo (Hebrew): every other heading and all text,
     told apart by size and weight alone.
   Scale (largest → smallest):
     display-xl  name in the opening
     display-l   "Let's talk", project name in a case study
     display-m   section titles
     h2  700     group titles ("Rebranding")
     h3  700     card titles, "The challenge", "The process"
     sub 600     project subtitle, buttons, tabs
     lead 400    the opening line, about, contact line
     body 400    running text
     meta 500    tags, labels, captions
     label 600   the role line (spaced capitals)
   ===================================================================== */
:root {
  --fs-display-l: clamp(2.75rem, 1.5rem + 4.4vw, 5.5rem);
  --fs-display-m: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  --fs-h2: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h3: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-meta: 0.9rem;
  --fs-label: clamp(0.8rem, 0.74rem + 0.3vw, 1rem);
}
body { font-size: var(--fs-body); font-weight: 400; }

/* display family: the big moments only */
.name, .section-title, .contact-title, .case-title, .wordmark, .marquee-track li { font-family: var(--display); font-weight: 400; }
.section-title { font-size: var(--fs-display-m); line-height: 1.1; }
.contact-title, .case-title { font-size: var(--fs-display-l); line-height: 1; }

/* text family: everything else, by size and weight */
.group-title { font-family: var(--font); font-size: var(--fs-h2); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.card-title, .card-wide .card-title { font-family: var(--font); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.case-story h3 { font-family: var(--font); font-size: var(--fs-h3); font-weight: 700; letter-spacing: 0; color: var(--accent); margin-bottom: 0.6rem; }
.case-process h3, .case-work-title { font-family: var(--font); font-size: var(--fs-h3); font-weight: 700; color: var(--ink); }
.case-sub { font-family: var(--font); font-size: var(--fs-lead); font-weight: 600; color: var(--ink); }
.hero-lead, .about-me p, .contact-lead, .case-desc { font-size: var(--fs-lead); font-weight: 400; line-height: 1.55; }
.card-desc, .case-story p, .group-desc, .timeline p { font-size: var(--fs-body); font-weight: 400; }
.tag, .card-cta, .case-meta dt, .contact-links span, .foot, figcaption, .case-film figcaption { font-size: var(--fs-meta); font-weight: 500; }
.card-cta { font-weight: 600; }
.case-meta dd, .contact-links a { font-size: var(--fs-body); font-weight: 500; }
.button, .case-tabs button, .lang, .case-close, .case-next { font-family: var(--font); font-weight: 600; }
.bar-links { font-weight: 500; }
.role { font-family: var(--font); font-size: var(--fs-label); font-weight: 600; }
.case-process li { font-size: var(--fs-meta); font-weight: 500; }

/* Rebranding opens like "Selected Projects": same section-title style */
.group-rebrand .group-head .section-title { margin-bottom: 0.35rem; }
/* buttons keep readable text when the finale turns the page dark */
.button { color: var(--btn-ink, #fff); }
.button-ghost { color: var(--accent); }
html { transition: none; }
/* About becomes a full-screen reading moment on desktop */
@media (min-width: 48.01em) {
  .about { min-height: 100svh; display: flex; align-items: center; }
  .about-grid { width: 100%; }
  .about-me p { font-size: clamp(1.35rem, 0.95rem + 1.45vw, 2.15rem); line-height: 1.45; max-width: 36ch; color: var(--ink); }
}

/* ---------- projects → rebranding: closer ---------- */
.hs { padding-bottom: 0; }
.group-rebrand { margin-top: clamp(1.25rem, 4vh, 3rem); }

/* ---------- "Let's talk": one column, one rhythm ---------- */
.contact-inner { width: 100%; max-width: calc(60rem + var(--margin) * 2); }
.contact-title { margin-bottom: 0; }
.contact-lead { max-width: 40ch; margin-top: clamp(0.9rem, 2.2vh, 1.4rem); }
.contact .actions { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); gap: 0.9rem; }
.contact .actions .button { min-width: 13.5rem; }
/* four equal cells with hairline dividers that hold at any column count */
.contact-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5px; width: 100%; max-width: none; margin-top: clamp(2.5rem, 6vh, 4rem); padding: 0; background: var(--line); border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; }
.contact-links li { display: grid; gap: 0.3rem; justify-items: center; align-content: center; padding: clamp(1rem, 2.4vh, 1.4rem) 0.75rem; border: 0; background: var(--ground); width: auto; }
.contact-links span { color: var(--accent); }
.contact-links a { justify-self: center; text-align: center; font-size: 0.95rem; overflow-wrap: anywhere; }
/* footer line across the same column */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; margin-top: clamp(2.5rem, 7vh, 4.5rem); padding-top: 1.1rem; border-top: 1.5px solid var(--line); color: var(--muted); }
.foot-star { width: 1rem; height: 1rem; fill: var(--accent); flex: none; }
.spark-end { display: none; }
@media (max-width: 62em) { .contact-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36em) {
  .contact-links { grid-template-columns: 1fr; }
  .contact .actions .button { min-width: 0; width: 100%; }
  .foot { flex-direction: column; gap: 0.5rem; text-align: center; }
}
.contact-links { justify-items: stretch; }
.contact-links li { width: 100%; justify-self: stretch; }
/* three contact details: email, phone, LinkedIn */
.contact-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62em) { .contact-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48em) { .contact-links { grid-template-columns: 1fr; } }

/* seamless film made of parts: two stacked players, only one shown */
.film-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.film-stage video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.film-stage video.is-on { opacity: 1; pointer-events: auto; }
.film-stage video { transition: opacity 180ms linear; }
/* the live, animated prototype opens in Figma */
.case-proto { margin-top: 1.5rem; }
.case-proto[hidden] { display: none; }

/* ---------- performance: soft light without live blur filters ---------- */
/* the gradients themselves are soft; a moving blur filter on huge layers costs every frame */
.blob { filter: none; will-change: transform; }
.blob-rose { background: radial-gradient(circle at 50% 50%, rgba(var(--rose), 0.5) 0%, rgba(var(--rose), 0.28) 25%, rgba(var(--rose), 0.1) 48%, rgba(var(--rose), 0) 70%); }
.blob-sky { background: radial-gradient(circle at 50% 50%, rgba(var(--sky), 0.58) 0%, rgba(var(--sky), 0.3) 25%, rgba(var(--sky), 0.1) 48%, rgba(var(--sky), 0) 70%); }
.glow span { filter: none; will-change: transform; }
.glow-rose { background: radial-gradient(circle, rgba(var(--rose), 0.42) 0%, rgba(var(--rose), 0.18) 30%, rgba(var(--rose), 0) 68%); }
.glow-sky { background: radial-gradient(circle, rgba(var(--sky), 0.48) 0%, rgba(var(--sky), 0.2) 30%, rgba(var(--sky), 0) 68%); }
/* smooth scrolling (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.film-status { margin: 0; padding: 0.75rem 1rem; background: var(--frame); color: var(--muted); font-size: var(--fs-meta); text-align: center; }
.film-status[hidden] { display: none; }

/* ---------- small usability touches ---------- */
/* copy the email */
.copy-btn { margin-top: 0.35rem; padding: 0.3rem 0.85rem; border-radius: 999px; border: 1.5px solid var(--line); font-size: 0.8rem; font-weight: 600; color: var(--ink); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform var(--t-press) var(--ease-out); }
.copy-btn:active { transform: scale(0.96); }
.copy-btn.is-done { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); }
@media (hover: hover) and (pointer: fine) { .copy-btn:hover { border-color: var(--accent); color: var(--accent); } .copy-btn.is-done:hover { color: var(--btn-ink); } }
/* footer: back to top */
.to-top { color: var(--ink); font-weight: 600; text-decoration-color: currentColor; }
/* case viewer: previous / next and a reading progress line */
.case-bar { position: relative; }
.case-nav { justify-self: end; display: flex; gap: 0.25rem; }
.case-prev, .case-next { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding-inline: 0.9rem; border-radius: 999px; font-weight: 600; font-size: 0.92rem; color: var(--ink); transition: color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.case-prev:active, .case-next:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .case-prev:hover, .case-next:hover { color: var(--accent); } }
[dir="rtl"] .arrow-back { transform: scaleX(-1); }
.case-progress { position: absolute; inset-inline: 0; bottom: -1.5px; height: 2px; overflow: hidden; }
.case-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .case-progress span { transform-origin: right center; }
.case-end .button { min-width: 12rem; }
@media (max-width: 36em) { .case-prev span, .case-next span { display: none; } .case-prev, .case-next { padding-inline: 0.7rem; } }