/* ==========================================================================
   Phuong Nguyen — Portfolio (Revamp version)
   Source of truth: Figma "Portfolio - CV" › Revamp version (node 783:15902)
   Desktop frame: 1440px wide, 32px outer margin.
   ========================================================================== */

/* ---------- Tokens (from Figma variables) ---------- */
:root {
  /* Colour */
  --navy: #2e2d88;            /* Port/Navy */
  --text: #343434;            /* Port (body text) */
  --text-tertiary: #919191;   /* Port/Text/Tertiary */
  --bg: #fbfbfb;              /* Port/Background */
  --sky: #99cff1;             /* Port (accent: dashed rules, dot, link arrows) */
  --orange: #ff610b;          /* Landing bio highlights */

  /* Type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-accent: "Satoshi", "DM Sans", system-ui, sans-serif;

  /* Layout */
  --page-margin: 32px;
  --sidebar-w: 328px;
  --sidebar-gap: 21px;        /* 381 - 32 - 328 */
  --col-gap: 20px;            /* 561 + 20 + 446 = 1027 */
  --card-gap: 64px;           /* vertical gap between project cards */
  --rule: 1.5px dashed var(--sky);

  /* Motion: shared speed for synced loops (footer + MIMIR phones), in px/s.
     js/main.js turns this into each loop's duration. */
  --marquee-speed: 33.6;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==========================================================================
   Layout: sidebar + project grid (Landing, Archive)
   ========================================================================== */
.layout {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--page-margin) var(--page-margin) 0;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  column-gap: var(--sidebar-gap);
  align-items: start;
}

/* ---------- Sidebar (Frame 16894) ----------
   The column runs the full height of the page: intro + nav stick to the top,
   the live clock sits at the bottom (Figma: just above "Powered by"). */
.sidebar {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.sidebar__main {
  position: sticky;
  top: var(--page-margin);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Pinned to the bottom of the viewport; once the "Powered by" footer scrolls in,
   it rides up with the end of the sidebar column (sticky inside a full-height column). */
.sidebar__time {
  position: sticky;
  bottom: 0;
  padding: 24px 0;
  background: var(--bg);
  z-index: 1;
}

.intro { display: flex; flex-direction: column; gap: 24px; }
.intro__text { display: flex; flex-direction: column; gap: 24px; }

.intro__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: var(--navy);
}

.intro__bio {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}
.intro__bio em { font-style: normal; color: var(--orange); }

.side-nav { display: flex; flex-direction: column; gap: 28px; width: 96px; }

.side-nav__label {
  padding: 12px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--navy);
}

.side-nav__list { position: relative; display: flex; flex-direction: column; gap: 4px; }

.side-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  line-height: 16px;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.35s ease, font-weight 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.side-nav__link:hover { color: var(--sky); }   /* Nav Item / Hover */

/* Nav Item / Selected: label eases 16px right (8px dot + 8px gap) and to SemiBold */
.side-nav__link[aria-current="page"] { font-weight: 600; color: var(--text); transform: translateX(16px); }
.side-nav__link[aria-current="page"]:hover { color: var(--text); }

/* Active dot (8px, #99CFF1): one shared dot per list; JS sets --dot-y and slides it in from the previous page's item */
.side-nav__list:has([aria-current="page"])::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky);
  transform: translateY(var(--dot-y, 8px));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Entry state while arriving from another page (set before first paint, see inline script) */
.side-nav--instant, .side-nav--instant *, .side-nav--instant::before { transition: none !important; }
.side-nav__link.is-resting[aria-current="page"] { font-weight: 500; transform: none; }
.side-nav__link.is-leaving { font-weight: 600; transform: translateX(16px); }

.side-nav__link--external { justify-content: space-between; }
.side-nav__link--external img { width: 20px; height: 20px; }

/* ---------- Project grid (Frame 16906 / 16913) ---------- */
.projects {
  display: grid;
  grid-template-columns: minmax(0, 561fr) minmax(0, 446fr);
  column-gap: var(--col-gap);
  align-items: start;
  padding-bottom: 48px;
}

.projects__col { display: flex; flex-direction: column; gap: var(--card-gap); }

.project { display: flex; flex-direction: column; gap: 8px; }

.project__thumb {
  position: relative;
  overflow: hidden;
  /* width/height ratio per card set inline via --ratio (Figma frame size) */
  aspect-ratio: var(--ratio);
  background: #f1f2ed;
}
/* Frame outline (Figma: 1.5px #99CFF1 dashed stroke, inside, drawn above the content). */
.project__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px dashed var(--sky);
  pointer-events: none;
  z-index: 2;
}
.project__thumb > img,
.project__thumb > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.project:hover .project__thumb > img,
.project:hover .project__thumb > video { transform: scale(1.02); }
/* Device mockups keep the phone and its screen locked together: no hover zoom */
.project:hover .project__thumb--device > img { transform: none; }

/* Video playing inside an iPhone mockup (BÄRBAR).
   Positions are % of the 446×789 Figma frame: screen-here 256.67×546 at (95, 122),
   corner radius 33.33 (screen-frame 38.67 minus 5.33 inset). */
.project__thumb--device { container-type: inline-size; }
.device-screen {
  position: absolute;
  left: 21.300%;
  top: 15.463%;
  width: 57.549%;
  height: 69.202%;
  border-radius: 7.474cqw;          /* 33.33 / 446 */
  overflow: hidden;
  background: #fff;
}
.device-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dynamic island sits above the recording, at its Figma spot (phone 99.33,16 → 74×20.67) */
.device-screen__island {
  position: absolute;
  left: 35.837%;                    /* (99.33 - 8) / 256.67 */
  top: 1.465%;                      /* (16 - 8) / 546 */
  width: 28.831%;                   /* 74 / 256.67 */
  height: auto;
}

/* MIMIR: looping row of phone screens (Figma Frame 577).
   Units are cqw of the 561px-wide thumbnail so the row scales with the card.
   Phone 79.67 wide, pitch 90.19 → 16.076cqw; export incl. shadow 97px → 17.291cqw.
   Loop period = 7 phones × pitch = 112.534cqw. */
.project__thumb--mimir { container-type: inline-size; }
.mimir-screens {
  position: absolute;
  top: 18.837cqw;                  /* row y = 105.68 */
  left: -119.391cqw;               /* phone 1 lands at x = -29.80 (Figma), one period earlier */
  display: flex;
  width: max-content;
  animation: mimir-loop 19s linear infinite;   /* fallback; JS syncs to --marquee-speed */
  will-change: transform;
}
.mimir-screens ul { display: flex; }
.mimir-screens li { flex-shrink: 0; margin-right: -1.215cqw; }
.mimir-screens img { width: 17.291cqw; height: auto; }

@keyframes mimir-loop {
  to { transform: translateX(-112.534cqw); }
}

/* MIMIR page sneak peek (Figma 811:17364, 910×610): phones 129px wide on a 146.29px pitch, row at y=171.
   Images include the drop shadow (157×305, phone starts 13.92px in). Units are cqw of the panel width. */
.case-media.mimir-peek {
  position: relative;
  container-type: inline-size;
  width: 910px;
  aspect-ratio: 910 / 610;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(145 145 145 / 0.1);
}
.mimir-peek__track {
  position: absolute;
  top: 18.791cqw;                   /* 171 / 910 */
  left: -5.275cqw;                  /* first phone at x = -48 */
  display: flex;
  width: max-content;
  animation: mimir-peek-loop 40s linear infinite;   /* fallback; JS syncs to --marquee-speed */
  will-change: transform;
}
.mimir-peek__track ul { display: flex; }
.mimir-peek__track li { flex-shrink: 0; width: 16.076cqw; }          /* 146.29 pitch */
.mimir-peek__track img { width: 17.262cqw; max-width: none; height: auto; margin-left: -1.530cqw; }  /* 157.08 incl. shadow, 13.92 overhang */
@keyframes mimir-peek-loop { to { transform: translateX(-50%); } }

/* Yesterday Café: photo (561×318) + live marquee strip (46px) — Figma Thumbnail 783:15510.
   Sizes in cqw of the 561px card so the strip scales with it (16px → 2.852cqw). */
.project__thumb--yc {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: 1.5px;                   /* stroke sits outside the content here (561×367 frame) */
  background: #fcecc8;
}
.project__thumb--yc > img { height: auto; aspect-ratio: 561 / 318; flex-shrink: 0; }
.yc-marquee {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.yc-marquee__track {
  display: flex;
  gap: 2.852cqw;                    /* 16px */
  width: max-content;
  animation: marquee 30s linear infinite;   /* fallback; JS syncs to --marquee-speed */
}
.yc-marquee ul { display: flex; align-items: center; gap: 2.852cqw; }
.yc-marquee li {
  font-family: "Montserrat", var(--font-body);
  font-weight: 500;
  font-size: 2.852cqw;              /* 16px */
  line-height: 1;
  text-transform: uppercase;
  color: #2a1b0e;
  white-space: nowrap;
}
.yc-marquee li { flex-shrink: 0; }
.yc-marquee img { width: 3.743cqw; max-width: none; height: auto; display: block; }   /* 21×24 */

/* Caption (Nav Item / Resumé) */
.project__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}
.project__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  line-height: 16px;
  white-space: nowrap;
}
.project__title {
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
}
.project__date {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-tertiary);
}
.project__desc {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--text);
}
/* Single-line landing captions inherit the 16px row leading in Figma */
.project__desc--single { line-height: 16px; }
/* Archive captions use a fixed 24px line-height */
.projects--archive .project__desc { line-height: 24px; }

/* ==========================================================================
   Footer — "Powered by" (758:3847)
   ========================================================================== */
.powered-by {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px var(--page-margin);
  border-top: var(--rule);
  font-size: 16px;
  line-height: 19.2px;
  white-space: nowrap;
  overflow: hidden;
}
.powered-by__label {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
}
.powered-by__track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
          mask-image: linear-gradient(to right, #000 92%, transparent);
}
.powered-by__items {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee 40s linear infinite;     /* fallback; JS syncs to --marquee-speed */
}
.powered-by__items ul { display: flex; gap: 24px; }
.powered-by:hover .powered-by__items { animation-play-state: paused; }

@keyframes marquee {
  to { transform: translateX(calc(-50% - 12px)); }
}

/* ==========================================================================
   About page (783:12144)
   ========================================================================== */
.about-page { background: var(--bg); }

.topbar {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--page-margin) var(--page-margin) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.local-time {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: var(--navy);
  white-space: nowrap;
}
.local-time img { width: 20px; height: 20px; }
.topbar .local-time { margin-left: auto; }
.local-time__city { text-transform: uppercase; }

.about {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--page-margin);
  display: grid;
  /* copy column starts at x=265 (446px wide) */
  grid-template-columns: 233px 446px;
  align-items: start;
  flex: 1 0 auto;
}

.about__copy {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 64px 0;
}

.about__hello {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--navy);
  line-height: normal;
}
.about__hello h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
}
.about__hello p {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 20px;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 16px;
  line-height: 1.65;
}
.about__text .lead { line-height: 28px; }
.about__text strong { font-weight: 700; }
.about__text .highlight { color: var(--orange); }

.about__signoff {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--navy);
}
.about__signature { width: 64px; height: 64px; margin-top: -20px; }   /* navy hand-drawn signature (transparent WebP, 4× asset), 12px under the sign-off */

/* Inline contact links (About: LinkedIn / Email).
   Hover turns them orange + SemiBold; a hidden bold copy reserves the width so the line doesn't shift. */
.inline-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;              /* split the reserved bold width evenly */
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}
.inline-link::after {
  content: attr(data-text);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
  pointer-events: none;
}
.inline-link:hover,
.inline-link:focus-visible { color: var(--orange); font-weight: 600; }

/* Photo strip (Frame 16901) */
.photo-strip {
  flex-shrink: 0;
  border-top: var(--rule);
  padding: 36px 0;
  overflow: hidden;
}
.photo-strip__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.photo-strip ul { display: flex; gap: 16px; }

.photo {
  width: 264px;
  height: 264px;
  flex-shrink: 0;
  border: var(--rule);
  overflow: hidden;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}

/* ==========================================================================
   Case study pages (MIMIR 801:17056, Stack 804:17276)
   Top bar at y=32; content column starts at x=264 (16.67% + 24) and is 1143 wide.
   ========================================================================== */
.case-topbar .local-time { padding: 12px 0; }

.breadcrumb {
  display: flex;
  gap: 4px;
  padding: 12px 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
}
.breadcrumb a { font-weight: 500; color: var(--sky); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb__sep { color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--navy); }

.case {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--page-margin) 64px;   /* 64px above the footer */
  display: grid;
  grid-template-columns: 232px minmax(0, 1143px);   /* 32 + 232 = 264 */
  align-items: start;
  flex: 1 0 auto;
}

/* Jump links (TOC) glide instead of snapping */
@media (prefers-reduced-motion: no-preference) {
  html:has(.toc) { scroll-behavior: smooth; }
}

/* Table of contents (Stack)
   One sky dot slides to the active item (JS sets --dot-y); the active label eases right and to SemiBold. */
.toc {
  position: sticky;
  top: 0;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 171px;
  padding-top: 74px;                 /* first item centred on the title's first line (y 160) */
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  --toc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.toc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky);
  opacity: var(--dot-o, 0);
  transform: translateY(var(--dot-y, 0px));
  transition: transform 0.5s var(--toc-ease), opacity 0.3s ease;
}
.toc a {
  display: block;
  color: var(--text-tertiary);
  transition: color 0.35s ease, font-weight 0.35s ease, transform 0.5s var(--toc-ease);
}
.toc a:hover { color: var(--text); }   /* Case-study Nav Item / hover */
.toc a[aria-current="true"] {
  font-weight: 600;
  color: var(--orange);
  transform: translateX(16px);       /* 8px dot + 8px gap */
}

.case__body {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 55px;                 /* content frame y 87 + 40 padding, below the 72px top bar */
}

.case__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: normal;
  color: var(--navy);
}
/* MIMIR: two-line title on a 44px leading, starting at y=116 */
.case__body--two-line { padding-top: 44px; }
.case__body--two-line .case__title { line-height: 44px; }

.case-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 678px;
  max-width: 100%;
  scroll-margin-top: 32px;
}
.case-section__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: normal;
}
.case-section__eyebrow {
  font-weight: 400;
  font-size: 16px;
  color: var(--text-tertiary);
}
.case-section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: #1a1a1a;                    /* Port/Text/Primary */
}
.case-section__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}
.case-section__text strong { font-weight: 600; }   /* SemiBold emphasis, e.g. "Stack" in the overview */

/* Role / Company / Timeline / Team / Skills */
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 112px;
  margin: 0;
  padding: 24px 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
  font-size: 16px;
  line-height: normal;
}
.case-meta > div { display: flex; flex-direction: column; gap: 8px; }
.case-meta dt { font-weight: 400; color: #575757; }      /* Port/Text/Secondary */
.case-meta dd { margin: 0; color: var(--text); }

/* MIMIR (Figma 863:9676): facts in a grey panel, columns centred 72px apart */
.case-meta--panel {
  width: 910px;
  max-width: 100%;
  justify-content: center;
  gap: 24px 72px;
  padding: 24px 16px;                /* Figma: 24px top/bottom, columns centred (~19px each side) */
  border: 0;
  border-radius: 8px;
  background: rgb(145 145 145 / 0.1);
}

/* Large MIMIR preview: the landing thumbnail scaled up (908×608, same 561:376 frame) */
.case-media { width: 908px; max-width: 100%; }
.case-section + .case-media,
.case-section + .case-end { margin-top: -8px; }   /* 40px under "Sneak peak" copy */

/* Last row of a case study: content on the left, "Back to top" bottom-right (Figma 886:4943) */
.case-end {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.case-end > .case-section { width: auto; flex: 0 1 679px; }
.case-end > .case-media { flex: 0 0 auto; max-width: calc(100% - 159px); }   /* panel keeps its 910px; button gets the rest */
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--sky);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.back-to-top svg { flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.back-to-top:hover, .back-to-top:focus-visible { color: var(--navy); }
.back-to-top:hover svg, .back-to-top:focus-visible svg { transform: translateY(-2px); }
@media (max-width: 1200px) {
  .case-end { flex-direction: column; align-items: flex-end; }
  .case-end > .case-section, .case-end > .case-media { flex: none; align-self: stretch; max-width: 100%; }   /* flex-basis would otherwise become a height */
}

@media (max-width: 900px) {
  .case { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .case__body { grid-column: 1; padding-top: 32px; }
}

/* ---------- Stack case study (Figma 804:17276) ---------- */
.case__body--stack { gap: 112px; padding-top: 64px; }     /* title at y=140; 112px between the hero and Problem */
.stack-content { display: flex; flex-direction: column; gap: 96px; }
.case-section--wide { width: 100%; gap: 40px; }
.case-section--wide .case-section__head { max-width: none; }
.accent { color: var(--orange); }

/* Hero: intro + facts on the left, phone mockup on the right; the two grey panels form one L shape */
.stack-hero {
  display: grid;
  grid-template-columns: minmax(0, 698px) minmax(0, 445px);
  grid-template-rows: auto auto;
  row-gap: 57px;
}
.stack-hero__intro { grid-column: 1; display: flex; flex-direction: column; gap: 40px; padding-right: 20px; }
.stack-hero__intro .case-section__title { font-size: 20px; }
.stack-hero__meta {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  min-height: 160px;
  margin: 0;
  padding: 34px 24px;
  background: rgb(145 145 145 / 0.1);
  border-radius: 8px 0 0 8px;
  font-size: 16px;
  line-height: normal;
}
.stack-hero__meta > div { display: flex; flex-direction: column; gap: 8px; }
.stack-hero__meta dt { font-weight: 400; color: #575757; }
.stack-hero__meta dd { margin: 0; color: var(--text); }
.stack-hero__mockup {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  position: relative;
  height: 344px;
  background: rgb(145 145 145 / 0.1);
  border-radius: 8px 8px 8px 0;
}
.stack-hero__mockup img {
  position: absolute;
  left: calc(50% - 146px);          /* 293px render incl. 10px side buttons/shadow on the left */
  bottom: 14px;
  width: 293px;
  height: auto;
}

/* Problem */
.problem__body { display: flex; flex-direction: column; gap: 80px; }
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: var(--rule);
}
.stat__figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--navy);
}
.stat__text { flex: 1; font-size: 16px; line-height: 24px; color: #1a1a1a; }
.stat__source {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
}
.stat__source img { width: 16px; height: 16px; transition: transform 0.2s ease; }
.stat__source:hover { color: var(--text); }
.stat__source:hover img { transform: translate(1px, -1px); }

.pain-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.pain-points > div { display: flex; flex-direction: column; gap: 32px; }
.pain-points__title,
.persona__name,
.feature__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  color: #1a1a1a;
}
/* Orange chevron + grey pill */
.pills { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.pills li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  color: #1a1a1a;
}
.pills li::before {
  content: "";
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: url("../assets/icons/chevron-right.svg") center / contain no-repeat;
}
.pills span {
  padding: 12px;
  border-radius: 100px;
  background: rgb(145 145 145 / 0.1);
}

/* Personas: two columns split by a dashed rule */
.personas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.persona { display: flex; flex-direction: column; gap: 24px; }
.persona:first-child { border-right: var(--rule); }
.persona__head { display: flex; align-items: center; gap: 24px; }
.persona__art { flex-shrink: 0; height: auto; }
.persona__art--emmi { width: 160px; margin-left: 26px; }
.persona__art--jari { width: 212px; margin-left: 11px; }
.persona__id { display: flex; flex-direction: column; gap: 4px; line-height: normal; }
.persona__role {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--navy);
}
.persona__meta { font-weight: 400; font-size: 16px; color: #575757; }
.persona .bullets { padding: 24px 0; gap: 24px; max-width: 512px; }
.persona + .persona .bullets { gap: 16px; max-width: none; }

.bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}
.bullets li { position: relative; padding-left: 20px; }
.bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky);
}
.bullets em { font-style: normal; color: var(--orange); }

/* Solutions: heading + prototype button, then feature rows with a phone each */
.solutions { max-width: 1027px; }
.solutions__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 20px;
  border: 1px dashed var(--sky);
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  color: var(--navy);
  transition: background-color 0.2s ease;
}
.cta-button img { width: 20px; height: 20px; transition: transform 0.2s ease; }
.cta-button:hover { background: #eef6fc; }
.cta-button:hover img { transform: translate(2px, -2px); }

.features {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: feature;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.feature {
  counter-increment: feature;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feature__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 1 580px;                   /* 580 + 446 fill the 1027 row; shrinks on smaller screens */
  min-width: 0;
  padding: 24px 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}
.feature__copy::before {
  content: counter(feature, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--navy);
}
.feature__copy p { max-width: 444px; }
.feature__media {
  position: relative;
  flex-shrink: 0;
  width: 446px;
  height: 700px;
  background: rgb(145 145 145 / 0.1);
  border-radius: 8px;
}
.feature__media > img {
  position: absolute;
  left: calc(50% - 146px);
  top: 69px;
  width: 293px;
  height: auto;
}

/* Feature walkthrough: video in the screen of the still phone mockup (293×586 render, screen 257×546 at 18,8) */
.phone-demo {
  position: absolute;
  left: calc(50% - 146px);
  top: 69px;
  width: 293px;
  height: 586px;
}
.phone-demo > img { width: 100%; height: auto; }
.phone-demo__screen {
  position: absolute;
  left: 18px;
  top: 8px;
  width: 257px;
  height: 546px;
  object-fit: cover;
  object-position: top center;
  border-radius: 34.67px;
  background: #f8f8f8;
}
.phone-demo__island {
  position: absolute;
  left: 109px;
  top: 16px;
  width: 74px;
  height: 21px;
  border-radius: 10.5px;
  background: #000;
}

/* Reflection */
.reflection { max-width: 909px; gap: 48px; }
.reflection__intro { display: flex; flex-direction: column; gap: 40px; max-width: 677px; }
.reflection__intro .case-section__text { color: #1d1616; }
.reflection__media {
  width: 100%;
  height: auto;
  border-radius: 13px;
  background: rgb(145 145 145 / 0.1);
}

/* Next steps: plus-icon list split by dashed rules */
.next-steps__list { display: flex; flex-direction: column; max-width: 561px; }
.next-steps__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 78px 20px 0;          /* text column 439px, as in Figma */
  font-size: 16px;
  line-height: 24px;
  color: #1a1a1a;
}
.next-steps__list li + li { border-top: var(--rule); }
.next-steps__list li::before {
  content: "";
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: url("../assets/icons/plus.svg") center / contain no-repeat;
}

@media (max-width: 1200px) {
  .stack-hero { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .stack-hero__intro { padding-right: 0; }
  .stack-hero__meta { grid-row: auto; border-radius: 8px; flex-wrap: wrap; }
  .stack-hero__mockup { grid-column: 1; grid-row: auto; height: 400px; border-radius: 8px; overflow: hidden; }
  .stack-hero__mockup img { bottom: auto; top: 40px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .feature { flex-direction: column; align-items: stretch; gap: 24px; }
  .feature__copy { flex-basis: auto; }
  .feature__media { width: 100%; }
}
@media (max-width: 900px) {
  .pain-points, .personas { grid-template-columns: minmax(0, 1fr); }
  .persona:first-child { border-right: 0; border-bottom: var(--rule); }
  .solutions__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .persona__head { flex-direction: column; align-items: flex-start; }
  .persona__art--emmi, .persona__art--jari { margin-left: 0; }
}

/* ==========================================================================
   Custom cursor (Figma 824:20047)
   - default: 16px orange dot, 1px dashed #99CFF1 outline
   - hover (links/buttons without a label): 20px orange dot at 20% opacity
   - label pill over [data-cursor="…"]: 4px 12px padding, DM Sans 16/1.65, same outline
   JS moves .cursor (position only) every frame; .cursor__body morphs size/shape
   with explicit px sizes so width and height animate smoothly.
   Mouse/trackpad only; touch keeps the default.
   ========================================================================== */
.has-custom-cursor,
.has-custom-cursor * { cursor: none !important; }

.cursor {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform;
}
.cursor.is-visible { opacity: 1; }

.cursor__body {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px dashed var(--sky);
  border-radius: 100px;
  background: var(--orange);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--press, 1));
  transition:
    width 0.45s var(--ease),
    height 0.45s var(--ease),
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s var(--ease);
}

.cursor__label {
  padding: 0 12px;
  color: #fbfbfb;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.92);
  filter: blur(2px);
  transition: opacity 0.15s ease, transform 0.3s var(--ease), filter 0.2s ease;
}

/* Link/button hover: bigger, faded dot, no outline */
.cursor.is-link .cursor__body {
  width: 20px;
  height: 20px;
  border-color: transparent;
  background-color: rgb(255 97 11 / 0.2);
}

/* Label pill: width/height come from JS (measured text + padding + border) */
.cursor.has-label .cursor__body {
  width: var(--pill-w, 16px);
  height: var(--pill-h, 16px);
}
.cursor.has-label .cursor__label {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.25s ease 0.12s, transform 0.4s var(--ease) 0.08s, filter 0.3s ease 0.08s;
}

.cursor.is-pressed { --press: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .side-nav__link, .side-nav__list::before { transition: none; }
  .toc::before, .toc a { transition: none; }
  .cursor__body,
  .cursor__label { transition: none !important; }
}

/* ==========================================================================
   Responsive (design is desktop-only at 1440; these keep it intact below)
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --sidebar-w: 260px; }
  .intro__bio br { display: none; }
}

@media (max-width: 900px) {
  :root { --page-margin: 24px; --card-gap: 48px; }

  .layout { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .sidebar { gap: 48px; }
  .sidebar__main, .sidebar__time { position: static; }
  .side-nav { flex-direction: row; gap: 48px; width: auto; }
  .side-nav__list { min-width: 115px; }

  .about { grid-template-columns: minmax(0, 1fr); }
  .about__copy { grid-column: 1; padding-top: 16px; max-width: 446px; }
}

@media (max-width: 640px) {
  :root { --page-margin: 20px; }
  .projects { grid-template-columns: minmax(0, 1fr); row-gap: var(--card-gap); }
  .project__head { white-space: normal; }
  .photo { width: 200px; height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .powered-by__items,
  .photo-strip__track,
  .mimir-screens,
  .mimir-peek__track,
  .yc-marquee__track { animation: none; }
  .powered-by__track,
  .photo-strip { overflow-x: auto; }
  * { transition: none !important; }
}

/* Sidebar: hide the dot for the instant before main.js sets the arrival start state */
.nav-arriving .side-nav__list::before { visibility: hidden; }
.nav-arriving .side-nav__link[aria-current="page"] { font-weight: 500; transform: none; transition: none; }