/* Visual language after aritro.xyz: white page, Inter Display, grey text, dotted link underlines,
   pill buttons and thin dividers. Inter's optical size is pinned to its display cut at every size.
   Sizes are in rem and the root size follows the screen width, so the whole page scales with the device
   (16px at 1440px wide, up to 18px on large screens, 14px on phones). */
:root {
  --bg: #FFFFFF;
  --ink: #272D36;       /* headings, names, links */
  --body: #777777;      /* paragraphs */
  --faint: #999999;     /* secondary details */
  --dim: #C0C0C0;       /* separators */
  --line: #EFEFF1;
  --pill: #ECECEE;
  --pill-hover: #E0E0E2;
  --card: #F7F7F8;
  --card-line: #E6E6E9;
  --dark: #111111;

  --font: "Inter", system-ui, -apple-system, sans-serif;
  --wrap: 82.5rem;
  --gutter: 2.75rem;
  --bar-h: 4.4rem;
  --gap: 1.25rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* soft edge used by the portrait and the carousel: eased stops so the fade has no visible start or end */
  --fade-in: transparent 0%, rgba(0, 0, 0, .06) 2%, rgba(0, 0, 0, .2) 5%, rgba(0, 0, 0, .42) 8.5%, rgba(0, 0, 0, .68) 12.5%, rgba(0, 0, 0, .88) 16.5%, #000 21%;
  --fade-out: #000 79%, rgba(0, 0, 0, .88) 83.5%, rgba(0, 0, 0, .68) 87.5%, rgba(0, 0, 0, .42) 91.5%, rgba(0, 0, 0, .2) 95%, rgba(0, 0, 0, .06) 98%, transparent 100%;
}

* { box-sizing: border-box; }
html { background: var(--bg); font-size: clamp(14px, calc(10px + .42vw), 18px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-variation-settings: "opsz" 32; font-weight: 450; font-size: 1.09rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  /* the page fills the screen: the hero takes whatever room Selected work and the footer leave */
  min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1; display: flex; flex-direction: column; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
a:focus-visible, button:focus-visible, .rail:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* ---------- Type ---------- */
.h1 { font-weight: 500; font-size: 2.19rem; line-height: 1.15; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.label { font-weight: 500; font-size: 1.09rem; line-height: 1.5; color: var(--ink); }
.prose { display: grid; gap: .9rem; color: var(--body); }
/* links inside text: dotted underline, as on aritro.xyz */
.prose a { color: var(--ink); text-decoration: underline dotted; text-underline-offset: 2px; transition: color .2s; }
.prose a:hover { color: #555; }
.dot { color: var(--dim); }

/* small line icons, drawn at the text size */
.ico, .wx__icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; height: 2.8rem; padding: 0 1.55rem; border-radius: 999px;
  font-size: 1rem; font-weight: 500; line-height: 1; white-space: nowrap; background: var(--pill); color: var(--ink);
  transition: background-color .2s;
}
.pill:hover { background: var(--pill-hover); }
.pill--dark { background: var(--dark); color: #fff; }
.pill--dark:hover { background: #333; }
.round {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--pill); color: var(--ink); transition: background-color .2s, opacity .2s;
}
.round:hover { background: var(--pill-hover); }
.round:disabled { opacity: .35; pointer-events: none; }
.round svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Top bar ---------- */
.bar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.bar.is-scrolled { border-bottom-color: var(--line); }
.bar__inner { height: var(--bar-h); display: flex; align-items: center; gap: 2.2rem; }
.bar__name { display: flex; align-items: baseline; gap: .8rem; font-weight: 500; font-size: 1.17rem; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; }
.bar__name span { font-weight: 450; font-size: 1rem; color: var(--faint); letter-spacing: 0; }
.bar__place { display: flex; align-items: center; gap: .45rem; margin-left: auto; font-size: 1rem; color: var(--faint); white-space: nowrap; }
.wx { display: inline-flex; align-items: center; gap: .4rem; }
time { font-variant-numeric: tabular-nums; }
.social { display: flex; gap: .15rem; }
.social a { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--faint); transition: color .2s, background-color .2s; }
.social a:hover { color: var(--ink); background: var(--pill); }
.social svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* ---------- Hero ---------- */
/* the hero grows to fill the screen; its content sits in the middle of that space */
.hero { flex: 1; display: flex; align-items: center; padding: 1.5rem 0 2.5rem; }
/* the text column ends level with the bottom of the photo: the last experience line sits on the photo's bottom edge */
.hero__grid { display: grid; grid-template-columns: minmax(0, 44rem) auto; justify-content: space-between; gap: 4rem; align-items: end; }
.hero__copy { display: grid; justify-items: start; gap: var(--gap); }
.hero__copy .pill { margin-top: .3rem; }
.place-m { display: none; }

/* experience rows: organisation left, role / years right */
.xp { width: 100%; margin-top: 1.8rem; }
.xp .label { display: flex; align-items: center; min-height: 2.5rem; margin-bottom: .9rem; }
/* compact but still comfortable: never below 14px for names and 13px for details */
.xp li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: .34rem 0; line-height: 1.4; font-size: max(14px, .95rem); border-top: 1px solid var(--line); }
.xp li:last-child { padding-bottom: 0; }
.xp li span:first-child { color: var(--ink); white-space: nowrap; }
.xp li span:last-child { font-size: max(13px, .86rem); color: var(--faint); text-align: right; }

/* Portrait uses the React Bits Flip Card appearance and interaction. */
.portrait { height: 40rem; aspect-ratio: 3 / 4; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Work carousel ---------- */
.work { padding-bottom: 2rem; }
.work__head { display: flex; align-items: center; justify-content: space-between; }
.work__nav { display: flex; gap: .5rem; }
.rail-wrap { position: relative; margin-top: .9rem; }
/* the rail starts at the content edge and runs past the arrows; whatever is beyond the content edges
   fades and blurs out, the same way the portrait melts into the page */
.rail {
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  display: flex; gap: .9rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--edge); padding: 0 var(--edge) 4px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .35) calc(var(--edge) * .5), #000 var(--edge), #000 calc(100% - var(--edge)), rgba(0, 0, 0, .35) calc(100% - var(--edge) * .5), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .35) calc(var(--edge) * .5), #000 var(--edge), #000 calc(100% - var(--edge)), rgba(0, 0, 0, .35) calc(100% - var(--edge) * .5), transparent 100%);
}
.rail::-webkit-scrollbar { display: none; }
.rail-wrap::before, .rail-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  width: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rail-wrap::before { left: 0; -webkit-mask-image: linear-gradient(to left, transparent, #000); mask-image: linear-gradient(to left, transparent, #000); }
.rail-wrap::after { right: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000); mask-image: linear-gradient(to right, transparent, #000); }

.card {
  flex: none; width: 26.9rem; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .6rem; padding: 1.35rem 1.55rem; border-radius: 15px; background: var(--card);
  border: 1px solid var(--line); transition: background-color .2s;
}
.card:hover { background: #F2F2F4; }
.card__tag { padding-bottom: .65rem; margin-bottom: .15rem; border-bottom: 1px solid var(--card-line); font-size: 1rem; line-height: 1.5; color: var(--faint); }
.card__tag b { font-weight: 500; color: var(--ink); }
.card__title { font-weight: 500; font-size: 1.17rem; line-height: 1.4; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.card__text { font-size: 1rem; line-height: 1.5; color: var(--body); }
.quote__text { font-size: 1rem; line-height: 1.5; color: var(--body); }
/* every card ends in the same footer strip, so the dividers and bottom lines line up across the row */
.card__foot, .quote__who {
  margin-top: auto; height: 3.6rem; padding-top: .8rem; border-top: 1px solid var(--card-line);
  display: flex; align-items: center; gap: .65rem; font-size: 1rem; line-height: 1.35; color: var(--faint);
}
/* the figure (CRM, 3×) takes the same height as a person's avatar in the quote cards */
.card__foot b { flex: none; font-weight: 500; font-size: 1.95rem; line-height: 2.2rem; letter-spacing: -.035em; color: var(--ink); }
.quote__who img { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; flex: none; }
.quote__who b { display: block; font-weight: 500; color: var(--ink); }
.quote__who span { font-size: .94rem; }

/* Upwork record */
.stat__big { font-weight: 500; font-size: 3.1rem; line-height: 1; letter-spacing: -.035em; color: var(--ink); margin: .2rem 0 .3rem; }
.stat__list { margin-top: auto; }
.stat__list li { display: flex; justify-content: space-between; gap: .9rem; padding: .3rem 0; border-top: 1px solid var(--card-line); font-size: 1rem; line-height: 1.5; color: var(--faint); }
.stat__list b { font-weight: 450; color: var(--ink); }

/* ---------- Footer ---------- */
.foot { padding-top: .4rem; padding-bottom: 2rem; font-size: .94rem; line-height: 1.5; color: var(--faint); }
.foot__line { padding-top: .9rem; border-top: 1px solid var(--line); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .bar__place time, .bar__place .dot:nth-of-type(2) { display: none; }
  .hero__grid { gap: 2.5rem; }
}
@media (max-width: 900px) {
  :root { --gutter: 1.6rem; }
  .bar__place, .bar__name span { display: none; }
  .social { margin-left: auto; }
  .hero { padding-top: 1rem; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .portrait { order: -1; height: auto !important; width: min(100%, 30rem); justify-self: center; }
  .portrait img { border-radius: 2.5rem; }
  .place-m { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: 1rem; color: var(--faint); }
}
@media (max-width: 560px) {
  :root { --gutter: 1.15rem; --bar-h: 4rem; }
  .xp li { flex-direction: column; gap: 0; }
  .xp li span:last-child { text-align: left; }
  .card { width: 82vw; }
}

/* shorter laptop screens: card copy is trimmed to keep the cards compact (the page is fitted in main.js) */
@media (min-width: 901px) and (max-height: 960px) {
  .hero { padding: 1rem 0 1.75rem; }
  .work { padding-bottom: 1rem; }
  .foot { padding-bottom: .8rem; }
  .card { gap: .45rem; padding: 1.1rem 1.35rem; }
  .card__tag { padding-bottom: .5rem; }
  .foot__line { padding-top: .6rem; }
  .rail-wrap { margin-top: .9rem; }
  .card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .quote__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
}

@media (min-width: 901px) and (max-height: 860px) {
  .hero { padding: .6rem 0 1.25rem; }
  .hero__copy { gap: 1rem; }
  .xp li { padding: .28rem 0; }
  .card { gap: .45rem; padding: 1.1rem 1.35rem; }
  .card__text { -webkit-line-clamp: 2; line-clamp: 2; }
  .quote__text { -webkit-line-clamp: 3; line-clamp: 3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; }
}

/* Personal recommendations: full quotes, with the same type treatment as project headlines. */
.card--testimonial .quote__text { display: block; font-weight: 400; font-size: 1rem; line-height: 1.5; letter-spacing: normal; color: var(--body); -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.card--testimonial .quote__highlight { color: var(--ink); font-size: inherit; font-weight: inherit; }
.card--testimonial .quote__who { height: auto; min-height: 3.6rem; border-top: 1px solid var(--card-line); padding-top: 1rem; }

/* React Bits Flip Card — MIT + Commons Clause; see assets/react-bits-LICENSE.md. */
.flip-card {
  --fc-w: 300px;
  --fc-h: 400px;
  --fc-radius: 22px;
  --fc-bg: #27272a;
  --fc-ink: #f5f5f5;
  --fc-shadow: #000000;
  --fc-shadow-o: 0.45;
  --fc-glare: 0.22;

  position: relative;
  display: inline-block;
  width: var(--fc-w);
  max-width: 100%;
  height: var(--fc-h);
  border-radius: var(--fc-radius);
  outline: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.flip-card[data-axis='x'] {
  touch-action: pan-x;
}

.flip-card[data-draggable] {
  cursor: grab;
}

.flip-card[data-dragging] {
  cursor: grabbing;
}

.flip-card[data-disabled] {
  cursor: default;
  opacity: 0.6;
}

.flip-card__shadow {
  position: absolute;
  inset: 12% 9% -5%;
  border-radius: var(--fc-radius);
  background: color-mix(in srgb, var(--fc-shadow) calc(var(--fc-shadow-o) * 100%), transparent);
  filter: blur(22px);
  pointer-events: none;
}

.flip-card__rotor {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.flip-card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--fc-radius);
  background: var(--fc-bg);
  color: var(--fc-ink);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card__face img {
  -webkit-user-drag: none;
}

.flip-card__face--back {
  transform: rotateY(180deg);
}

.flip-card[data-axis='x'] .flip-card__face--back {
  transform: rotateX(180deg);
}

.flip-card__glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle farthest-side at var(--fc-gx, 50%) var(--fc-gy, 50%),
    rgba(255, 255, 255, var(--fc-glare)) 0%,
    rgba(255, 255, 255, calc(var(--fc-glare) * 0.76)) 12%,
    rgba(255, 255, 255, calc(var(--fc-glare) * 0.5)) 26%,
    rgba(255, 255, 255, calc(var(--fc-glare) * 0.28)) 42%,
    rgba(255, 255, 255, calc(var(--fc-glare) * 0.12)) 60%,
    rgba(255, 255, 255, calc(var(--fc-glare) * 0.04)) 78%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: var(--fc-sheen, 0);
  pointer-events: none;
}

.flip-card[data-fade] .flip-card__face {
  transform: none;
  opacity: 0;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transition: opacity 200ms ease;
}

.flip-card[data-fade='front'] .flip-card__face--front,
.flip-card[data-fade='back'] .flip-card__face--back {
  opacity: 1;
}

.portrait.flip-card { width: auto; height: 37.5rem; cursor: default; align-self: center; --fc-radius: 22px; --fc-shadow-o: .15; }
.flip-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
@media (max-width: 900px) { .portrait.flip-card { width: min(93.75%, 28.125rem); height: auto !important; } .portrait img { border-radius: 0; } }

/* Opacity-only entrances are applied by CSS before the first paint. */
@keyframes content-fade { from { opacity: 0; } to { opacity: 1; } }
html:not(.page-navigation) :is(.hero__copy > :not([hidden]), .portrait, .work__head, .card--testimonial, .cv__head, .cv__sec) {
  animation: content-fade 550ms ease-out both;
}
html:not(.page-navigation) .hero__copy > :nth-child(2) { animation-delay: 60ms; }
html:not(.page-navigation) .hero__copy > :nth-child(4) { animation-delay: 100ms; }
html:not(.page-navigation) .xp { animation-delay: 140ms; }
/* A single crossfade on navigation, without replaying element entrances. */
@view-transition { navigation: auto; }
.bar { view-transition-name: site-header; }
::view-transition-old(root) { animation: content-fade 250ms ease-out reverse both; }
::view-transition-new(root) { animation: content-fade 350ms ease-out both; }
::view-transition-group(site-header) { animation-duration: 350ms; }
@media (prefers-reduced-motion: reduce) {
  html:not(.page-navigation) :is(.hero__copy > *, .portrait, .work__head, .card--testimonial, .cv__head, .cv__sec),
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print { * { animation: none !important; } }

/* Match the visible bounds of the social marks, rather than their SVG padding. */
.bar .social svg { width: 1.15rem; height: 1.04rem; }
.bar .social .social__email { width: 1.38rem; height: 1.38rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
  .bar__inner { gap: .5rem; }
  .bar__name { font-size: 1rem; }
  .bar .social { gap: 0; }
  .bar .social a { width: 2.2rem; }
  .bar .pill { padding: 0 1rem; }
}

/* Hold the initial fade at its first frame until header content is ready. */
html.intro-pending:not(.page-navigation) :is(.hero__copy > :not([hidden]), .portrait, .work__head, .card--testimonial) {
  animation-play-state: paused;
}

/* Keyboard navigation and readable secondary text. */
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; padding: .6rem 1rem; background: #fff; color: #272d36; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
:root { --body: #6b6b6b; --faint: #707070; }