/* =========================================================
   Work / case-study pages (HomeScope, VendorHub, Cafcess, SFU TA)
   Shared pieces (header, nav, project card) come from styles.css so they
   match the home page exactly.

   Units: rem (1rem = 16px at the browser's default text size).
   Responsive sizing: every design px value is written as N × --u.
   --u equals 1px (0.0625rem) on a 1280px-wide screen and scales with the
   screen width (min 0.045rem, max 0.075rem), so font sizes, phones, cards
   and spacing all keep their proportions on any screen.
   px is kept only for the footer girl illustration (drawn in fixed px and
   scaled as one picture) and for media queries (they must match the JS).
   ========================================================= */

.work-page {
  --u: clamp(0.045rem, 0.078125vw, 0.075rem); /* 1/1280 of the screen width */
  --gray-card: #f8f8f8;
  --meta: #494a4a;
  --nav-idle: rgba(73, 74, 74, 0.6);

  /* Type scale (sizes at 1280 wide, all × --u so they follow the screen).
     Body 18 → roughly ×1.25 per step. Crimson Pro looks small next to Inter,
     so serif headings sit a step above the Inter text they introduce. */
  --fs-title: max(2.25rem, calc(52 * var(--u))); /* page title (h1)                    */
  --fs-key: max(1.625rem, calc(34 * var(--u))); /* key statement under a section label */
  --fs-label: max(1.25rem, calc(24 * var(--u))); /* section heading: Overview, Problem…  */
  --fs-caption: calc(
    var(--fs-body) * 20 / 17
  ); /* caption heading: 20 at 1280, always 20:17 to the body copy under it */
  --fs-sub: max(1rem, calc(20 * var(--u))); /* category line under the title        */
  --fs-body: max(
    1rem,
    calc(17 * var(--u))
  ); /* body copy: 17 at 1280, never under 16px */
  --fs-meta: max(0.9375rem, calc(16 * var(--u))); /* Role / Team / Time labels            */
  --fs-small: max(0.875rem, calc(15 * var(--u))); /* side nav, credits                    */
  /* the max(…rem, …) minimums keep text readable below 1280 and make the sizes
     continuous across the desktop / tablet / phone breakpoints (no jumps) */
  --lh-body: 1.5;
}

/* header: same markup as home, but in normal flow */
.work-header .site-header {
  position: relative;
}

/* ---------- layout: sticky side nav + 776-wide content column ---------- */
.work-layout {
  /* column 1 runs from the screen's left edge to where the centred 1280 frame
     puts the content (x 312); the content keeps its relative position while the
     side nav's left edge follows the screen size */
  display: grid;
  grid-template-columns:
    max(
      calc(240 * var(--u)),
      calc((100% - 1280 * var(--u)) / 2 + 312 * var(--u))
    )
    minmax(0, calc(776 * var(--u)))
    1fr;
  padding-top: calc(134 * var(--u)); /* content starts 224 from the page top */
}
.work-side {
  grid-column: 1;
  align-self: start;
  position: sticky;
  top: calc(120 * var(--u));
  margin-top: calc(31 * var(--u)); /* "back" sits at y 255 */
  padding-left: 2.42vw; /* arrow at x 31 of 1280 → follows the screen */
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: max(
    0.375rem,
    calc(2.66vw - 18 * var(--u))
  ); /* "back" text at x 65 of 1280 (= 5.08vw) */
  font-family: var(--font-type);
  font-size: var(--fs-small); /* same size as the section list */
  line-height: calc(18 * var(--u));
  color: #000;
  text-decoration: none;
}
.back-arrow {
  display: block;
  width: calc(18 * var(--u));
  height: auto;
  transition: transform 0.2s ease;
}
.back-link:hover .back-arrow {
  transform: translateX(-0.3125rem);
}
/* section words align with the "back" text (and with "selina" in the header) */
.section-nav {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  margin: calc(18 * var(--u)) 0 0 max(1.875rem, 2.66vw);
}
.section-nav a {
  font-weight: 300;
  font-size: var(--fs-small); /* 15px at 1280 wide, scales with the screen */
  line-height: calc(18 * var(--u));
  color: var(--nav-idle); /* rgba(73,74,74,.6) */
  text-decoration: none;
  transition: color 0.2s ease;
}
.section-nav a:hover {
  color: #000;
}
.section-nav a.is-active {
  color: #000;
} /* active section = black */

.work-main {
  grid-column: 2;
  min-width: 0;
}

/* ---------- spacing between blocks ---------- */
.w-block + .w-block {
  margin-top: calc(64 * var(--u));
}
.w-overview + .w-block {
  margin-top: calc(84 * var(--u));
}
.w-insight3 + .w-reflection {
  margin-top: calc(120 * var(--u));
}

/* ---------- typography ---------- */
.w-label {
  /* work page/section heading */
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: 1.2;
  margin: 0;
}
.w-key {
  /* key point */
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-key);
  line-height: 1.2;
  margin: calc(9 * var(--u)) 0 0;
}
.w-body {
  /* work page/section description */
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: calc(16 * var(--u)) 0 0;
}
.w-body + .w-body {
  margin-top: calc(24 * var(--u));
}

/* ---------- overview ---------- */
.w-title h1 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.15;
}
.w-title h1 b {
  font-weight: 600;
}
.w-category {
  font-weight: 300;
  font-size: var(--fs-sub);
  color: var(--meta);
  margin-top: calc(10 * var(--u));
}
.w-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(97 * var(--u));
  margin-top: calc(48 * var(--u));
}
.w-meta h3 {
  font-weight: 500;
  font-size: var(--fs-meta);
  line-height: 1.3;
}
.w-meta p {
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--meta);
  margin-top: calc(5 * var(--u));
}
.w-overview-text {
  margin-top: calc(44 * var(--u));
}
.w-overview-text p {
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-top: calc(9 * var(--u));
}

/* ---------- phone mockup (same frame + screen as the home HomeScope card) ---------- */
.phone {
  position: relative;
  flex: none;
  width: calc(181 * var(--u));
  height: calc(391 * var(--u));
}
.phone--md {
  width: calc(155.077 * var(--u));
  height: calc(335 * var(--u));
}
.phone-frame {
  position: absolute;
  left: -9.74%;
  top: -3.32%;
  width: 119.65%;
  height: 106.64%;
}
.phone-screen {
  position: absolute;
  left: calc(-9.74% + 119.65% * 0.08214);
  top: calc(-3.32% + 106.64% * 0.03111);
  width: calc(119.65% * 0.83571);
  height: calc(106.64% * 0.93778);
  object-fit: cover;
}

/* ---------- solution rows: phone + caption ---------- */
.features {
  margin-top: calc(61 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(107 * var(--u));
}
.feature {
  display: flex;
  align-items: center;
  gap: calc(75 * var(--u));
}
.feature-text {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  max-width: calc(508 * var(--u));
}
.feature-text h4 {
  /* work page/caption heading */
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.2;
}
.feature-text p {
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------- light grey showcase cards ---------- */
.shot-card {
  position: relative;
  margin-top: calc(15 * var(--u));
  height: calc(380 * var(--u));
  background: var(--gray-card);
  border-radius: calc(20 * var(--u));
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding-top: calc(23 * var(--u));
}
.w-insight .shot-card {
  margin-top: calc(30 * var(--u));
}
.shot-card--crop {
  height: calc(350 * var(--u));
  padding-top: calc(19 * var(--u));
}
.priority-shot {
  width: calc(197 * var(--u));
  height: calc(394 * var(--u));
  object-fit: cover;
  flex: none;
}

/* insight 3: 288×380 card + caption, rows 47 apart */
.features--cards {
  margin-top: calc(36 * var(--u));
  gap: calc(47 * var(--u));
}
.feature--card {
  justify-content: space-between;
  gap: calc(40 * var(--u));
}
.feature--card .feature-text {
  max-width: calc(480 * var(--u));
}
.shot-card--small {
  width: calc(288 * var(--u));
  flex: none;
  margin-top: 0;
}

/* insight 3: 325-wide screenshot cards + text, rows 808 wide */
.w-insight3 .features--cards { width: calc(808 * var(--u)); }   /* 32 wider than the column */
.w-insight3 .feature--card:nth-child(2) { margin-top: calc(30 * var(--u)); }   /* 77 after the first row, 47 after the second */
.w-insight3 .feature--card .feature-text { max-width: calc(423 * var(--u)); }
.insight-card {
  display: block; flex: none;
  width: calc(325 * var(--u)); height: auto;
  border-radius: calc(20 * var(--u));
}

/* design decision map */
.decision-map {
  display: block;
  width: 100%;
  max-width: calc(773 * var(--u));
  height: auto;
  margin-top: calc(23 * var(--u));
}

/* reflection */
.w-reflection .w-body:first-of-type {
  margin-top: calc(12 * var(--u));
}

/* ---------- image gallery pages (Cafcess, SFU TA) ---------- */
.work-main--gallery .w-overview + .w-block {
  /* overview → first section: same as the gap between sections (54) */
  margin-top: calc(54 * var(--u));
}
.w-gal + .w-gal {
  margin-top: calc(54 * var(--u));
}
#subscription.w-gal {
  margin-top: calc(99 * var(--u));
}
.w-gal > .w-label {
  margin-bottom: calc(25 * var(--u));
}
.w-shot {
  display: block;
  width: 100%;
  height: auto;
}
.w-cover {
  width: calc(447 * var(--u));
  max-width: 100%;
  box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}
.w-row--editorial {
  display: grid;
  grid-template-columns: 511.23fr 256fr;
  gap: calc(10 * var(--u));
  margin-top: calc(20 * var(--u));
}
.w-subs {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  width: calc(521 * var(--u));
  max-width: 100%;
}
.w-row--ads {
  display: flex;
  align-items: flex-start;
  gap: calc(45 * var(--u));
}
.w-ad-tall {
  width: calc(177 * var(--u));
  flex: none;
}
.w-ad-wide {
  width: calc(520 * var(--u));
  min-width: 0;
  flex: 0 1 auto;
}
.w-site {
  width: calc(800 * var(--u));
  max-width: none;
} /* 24 px wider than the column */

/* SFU TA: 3-column post grid, tall poster centred on the last row */
.work-main--gallery .w-overview + .w-posts-block {
  /* posts belong to the overview: same gap as meta → overview (44) */
  margin-top: calc(44 * var(--u));
}
.w-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(23.5 * var(--u));
  row-gap: calc(33 * var(--u));
  width: calc(778 * var(--u));
  max-width: 100%;
}
.w-posts li {
  aspect-ratio: 1;
  overflow: hidden;
}
.w-posts li.is-tall {
  grid-column: 2;
  aspect-ratio: 243.675 / 304.594;
}
.w-meta .w-nowrap {
  white-space: nowrap;
} /* text may run wider than its column */
.w-posts img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* VendorHub: overview shot + button, screen-recording flows */
.vh-hero {
  /* the shot belongs to the overview: same gap as meta → overview (44) */
  margin-top: calc(44 * var(--u));
}
.vh-try {
  display: block;
  width: max-content;
  margin: calc(60 * var(--u)) auto 0;
  padding: calc(11 * var(--u)) calc(15 * var(--u));
  border: 1.5px solid #0aa170;
  border-radius: calc(5 * var(--u));
  background: #0aa170;
  color: #fff;
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: normal;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.vh-try:hover,
.vh-try:focus-visible {
  background: #fff;
  color: #0aa170;
  outline: none;
}
.w-overview + .vh-flows-block {
  margin-top: calc(98 * var(--u));
}
.vh-flows {
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--u));
  margin-top: calc(27 * var(--u));
}
.vh-flow {
  margin: 0;
}
.vh-flow .feature-text {
  max-width: none;
  margin-top: calc(20 * var(--u));
}
.vh-shot {
  aspect-ratio: 2940 / 1452;   /* same shape as the screen recordings, so nothing is cropped */
  background: #e9e3da;
  overflow: hidden;
}
.vh-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vh-flows-block + .vh-decisions {
  margin-top: calc(120 * var(--u));
}
.vh-decisions > .w-label {
  margin-bottom: calc(36 * var(--u));
}
.vh-decisions .vh-flow + .vh-flow {
  margin-top: calc(80 * var(--u));
}
.vh-pair {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}
.vh-decisions + .w-reflection {
  margin-top: calc(120 * var(--u));
}

/* pause / play button on screen recordings: top-right corner, shown only on hover */
.has-video-btn { position: relative; }
.video-btn {
  position: absolute; z-index: 3;
  top: 0.625rem; right: 0.625rem;
  width: max(1.75rem, calc(30 * var(--u))); height: max(1.75rem, calc(30 * var(--u)));
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff;
  cursor: pointer;
  opacity: 0;                              /* hidden until the video is hovered */
  transition: opacity .25s ease, background-color .2s ease, scale .2s ease;
}
.video-btn svg { width: 45%; height: 45%; fill: currentColor; }
.has-video-btn:hover .video-btn,
.video-btn:focus-visible { opacity: .85; }   /* also appears for keyboard users */
.video-btn:hover, .video-btn:focus-visible { opacity: 1; background: rgba(0, 0, 0, .8); scale: 1.08; }
.video-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* touch screens can't hover: keep it faintly visible there */
@media (hover: none) { .video-btn { opacity: .7; } }
/* inside the phone: just under the status bar, inside the screen's right edge */
.phone .video-btn { top: 9%; right: 9%; width: max(1.5rem, calc(24 * var(--u))); height: max(1.5rem, calc(24 * var(--u))); }

/* ---------- next project: home-page card (scales by itself), not sticky here ----------
   Same gap on every work page: bigger than the largest gap inside the case study
   (120) so "Next Project" reads as the end of the story, but closer than the home
   page's section gap (213) so it still feels connected. */
.work-main .w-block + .w-next {
  margin-top: calc(160 * var(--u));
}
.w-next .w-label {
  margin-bottom: calc(18 * var(--u));
}
.next-card {
  position: relative;
  top: auto;
  box-shadow: none;
}

/* ---------- footer: sage band + cream panel + girl w/ pencil ---------- */
.work-footer {
  --gs: 0.6416; /* girl scale (JS keeps it responsive) */
  position: relative;
  margin-top: calc(
    20.625rem * var(--gs) / 0.6416
  ); /* room for the girl above the band */
  background: #8aa57a;
  overflow-x: clip;
  padding: calc(48 * var(--u)) calc(45 * var(--u)) 0 calc(43 * var(--u));
}
.wf-panel {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  min-height: calc(302 * var(--u));
  background: #f8f4ed;
  padding: calc(43 * var(--u)) 1.5rem calc(22 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(63 * var(--u));
  font-family: var(--font-type);
  text-align: center;
}
.wf-head {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
  max-width: calc(598 * var(--u));
}
.wf-head h2 {
  font-weight: 400;
  font-size: var(--fs-key);
  line-height: 1.2;
}
.wf-head p {
  font-size: var(--fs-body);
  line-height: 1.4;
}
/* "Send Messages" opens the visitor's own email app (mailto:) */
.send-btn--sm {
  margin-top: 0;
  gap: calc(4.503 * var(--u));
  padding: calc(4.503 * var(--u)) calc(10.507 * var(--u));
  font-size: calc(14.119 * var(--u));
  text-decoration: none;
}
.send-btn--sm span {
  width: calc(71.066 * var(--u));
}
.send-btn--sm img {
  width: calc(41.416 * var(--u));
  height: calc(41.416 * var(--u));
}
.wf-credit {
  font-size: var(--fs-small);
  line-height: normal;
}

/* girl: shoes' bottom edge on the footer's top edge, at x 884 of 1280 */
.girl-peek {
  position: absolute;
  z-index: 2;
  left: min(
    69.06%,
    calc(100% - 434.57px * var(--gs) - 12px)
  ); /* never off-screen */
  bottom: 100%;
  width: calc(434.57px * var(--gs)); /* 278.8 at full size */
  height: calc(463.76px * var(--gs)); /* 297.5 at full size */
  pointer-events: none;
}
.girl-peek-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 1187px;
  height: 905px;
  transform-origin: 0 0;
  /* map the About-me girl (feet at x 676, y 806) onto the footer's top edge */
  transform: translate(calc(-676px * var(--gs)), calc(-342.26px * var(--gs)))
    scale(var(--gs));
}
.girl-peek .girl {
  top: 0;
}

/* ---------- smaller screens ----------
   Same breakpoints as the home page (styles.css / js/main.js):
     Phone ≤ 37.4375rem (599px) · Tablet 37.5–63.9375rem (600–1023px) · Desktop ≥ 64rem */

/* Tablet + phone: one centred column; the sticky side nav becomes a plain "back" link */
@media (max-width: 63.9375rem) {
  .work-page {
    /* the 776-wide column fills the screen minus 2rem margins, never bigger than
       desktop at 1024 (0.8px) so sizes don't jump at the breakpoint */
    --u: max(0.045rem, min(calc((100vw - 4rem) / 776), 0.05rem));
  }
  .work-layout {
    display: block;
    padding: 1.5rem 2rem 0;
  }
  .work-side {
    position: static;
    margin: 0 auto 1.75rem;
    padding: 0;
    max-width: calc(776 * var(--u));
  }
  .work-side .section-nav {
    display: none;
  }
  .back-link {
    gap: 0.5rem;
    font-size: 0.9375rem;
  }
  .back-arrow {
    width: 1.125rem;
  }
  .work-main {
    max-width: calc(776 * var(--u));
    margin: 0 auto;
  }
  .w-site {
    max-width: 100%;
  }
  .w-insight3 .features--cards {
    width: 100%;
  }
  /* footer "Send Messages" button keeps a readable size */
  .send-btn--sm {
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.875rem;
  }
  .send-btn--sm span {
    width: 4.5rem;
  }
  .send-btn--sm img {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Tablet only: no back link (its space is kept so
   the title stays put) and a full-width next-project card — mockup centred near the top,
   text left-aligned under it with the mockup's left edge */
@media (min-width: 37.5rem) and (max-width: 63.9375rem) {
  .work-side {
    visibility: hidden;
  }
  .work-page .next-card {
    display: flex;
    flex-direction: column;
    max-width: none;
  }
  .work-page .next-card .project-text .desc {
    min-height: 0;
  }
  .work-page .next-card .project-visual {
    /* 620-wide card at 768: browser 468.5 wide (75.5%), 48 from the top, 326 tall picture area */
    --w: 976;
    --h: 512;
    --y: 0;
    --x: 389; /* phone / post mockups: centred */
  }
  .work-page .next-card:has(.browser) .project-visual {
    --x: 416;
    --w: 976;
    --h: 512;
  }
  .work-page .next-card:has(.magazine-wrap) .project-visual {
    --x: 374; /* centred on the (slightly bigger) magazine */
    --w: 976;
    --h: 512;
  }
  /* undo the home page's tablet nudge of the VendorHub browser inside this card */
  .work-page .next-card .browser {
    left: 536px;
    top: calc(50% - 0.39px);
    transform: translateY(-50%);
  }
  .work-page .next-card .project-text {
    position: static;
    width: auto;
    padding: 0.7rem 12.7% 2.4rem;
    gap: 0.625rem;
  }
  .work-page .next-card .project-text h3 {
    font-size: 1.5rem;
  }
  .work-page .next-card .project-text .desc,
  .work-page .next-card .project-text .tags {
    font-size: 0.9375rem;
  }
}

/* Phone: content stacks (picture above its caption) */
@media (max-width: 37.4375rem) {
  .work-page {
    --u: 0.053125rem; /* 0.85px: spacing + mockups stay readable on a phone */
    --fs-title: 1.875rem;
    --fs-key: 1.375rem;
    --fs-label: 1.25rem;
    --fs-caption: 1.125rem;
    --fs-sub: 1rem;
    --fs-meta: 0.9375rem;
    --fs-small: 0.875rem;
  }
  .work-layout {
    padding: 1.25rem 1.25rem 0;
  }
  .work-side {
    margin-bottom: 1.25rem;
    visibility: hidden; /* no "back" on phones either; its space is kept */
  }
  /* final design insight 3: same gap between every row */
  .w-insight3 .feature--card:nth-child(2) {
    margin-top: 0;
  }
  /* next project = the home page's phone card (same crop, text, corners and shadow) */
  .work-page .next-card {
    box-shadow: 0 -0.375rem 1.875rem rgba(84, 60, 35, 0.1);
  }
  .work-main {
    max-width: none;
  }
  .feature,
  .feature--card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .feature .phone {
    align-self: center;
  }
  .shot-card--small {
    width: 100%;
  }
  .insight-card {
    width: min(100%, 22rem);
    align-self: center;
  }
  .features {
    gap: 4rem;
  }
  /* Role / Team / Time stacked in one column */
  .w-meta {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
  /* overview → problem → solution: same gap (64u) */
  .w-overview + .w-block {
    margin-top: calc(64 * var(--u));
  }
  .w-site {
    width: 100%;
  }
  .w-row--ads {
    gap: 1rem;
  }
  .w-ad-tall {
    width: 26%;
  }
  .w-ad-wide {
    flex: 1 1 0;
  }
  /* SFU TA posts: 2 columns, Spring Picnic centred under them */
  .w-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.625rem;
    row-gap: 0.75rem;
  }
  .w-posts li.is-tall {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.3125rem);
  }
}

/* Cafcess: no Team, so the empty middle cell would add an extra gap in the one-column phone meta */
@media (max-width: 37.4375rem) {
  .w-meta > div:empty { display: none; }
}