/* =============================================================
   PROJECTS  ·  reworked grid / list views + cursor-follow circle
   Loaded AFTER styles.css so these rules win the !important wars
   over the older accumulated patches.
   ============================================================= */

/* ---- Section shell : clean full-viewport, grows for the list view ---- */
.projects-section {
  min-height: 100vh !important;
  height: auto !important;
  position: relative;
  overflow: hidden;
}
.pw-dirty-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 50;
  mix-blend-mode: color-burn;
  opacity: calc(0.15 * var(--grain-mult, 1));
  pointer-events: none;
}
.pw-logo { -webkit-text-stroke: 4px var(--accent); paint-order: stroke fill; }

.projects-content.pw {
  position: relative;
  width: 100%;
  min-height: 100vh !important;
  height: auto !important;
  background: var(--cream) !important;
  box-sizing: border-box;
  padding: clamp(40px, 5vh, 68px) clamp(24px, 3vw, 56px) clamp(28px, 4vh, 52px);
  display: flex;
  flex-direction: column;
  cursor: none;            /* custom circle takes over inside the section */
}

/* ===========================================================
   HEADER  ·  WORK wordmark + intro copy + deco disc
   =========================================================== */
.pw-head {
  position: relative;
  z-index: 5;
  margin-bottom: clamp(44px, 6vh, 84px);
  margin-top: clamp(20px, 3vh, 44px);
}

.pw-logo {
  position: relative;
  display: inline-block;
  margin: 0 0 clamp(20px, 2.6vh, 36px);
  font-family: "MebiyesDemo", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
/* seafoam sticker outline behind the black glyphs */
.pw-logo::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: #93efc4;
  -webkit-text-stroke: clamp(8px, 0.9vw, 13px) #93efc4;
          text-stroke: clamp(8px, 0.9vw, 13px) #93efc4;
  -webkit-text-fill-color: #93efc4;
}

.pw-desc { display: none; }
.pw-count { font-family: "MebiyesDemo", Arial, sans-serif; font-size: clamp(24px, 2.4vw, 34px); color: var(--ink); margin-right: clamp(14px, 1.6vw, 24px); }
.pw-sort { display: flex; align-items: center; gap: clamp(8px, 0.8vw, 14px); margin-left: auto; }
.pw-sort-label { font-family: Arial, Helvetica, sans-serif; font-size: clamp(14px, 1.1vw, 18px); font-weight: 700; color: var(--ink); }
.pw-sort-line { width: clamp(40px, 4vw, 64px); height: 1.5px; background: #8d8a6e; }
.pw-sort-btn { appearance: none; border: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; font-size: clamp(14px, 1.1vw, 18px); color: #8d8a6e; cursor: pointer; padding: 0; font-weight: 400; }
.pw-sort-btn.is-active { color: var(--ink); font-weight: 700; }

/* decorative yellow disc with mint ring, sitting to the right */
.pw-deco {
  position: absolute;
  right: clamp(2%, 6vw, 9%);
  bottom: clamp(-6px, -0.5vh, 0px);
  width: clamp(44px, 4vw, 64px);
  height: clamp(44px, 4vw, 64px);
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 4px #93efc4;
}

/* ===========================================================
   TOOLBAR  ·  grid / list toggle + the |||  bars mark
   =========================================================== */
.pw-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: clamp(14px, 2vh, 24px);
  z-index: 6;
}
.pw-toggle {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1vw, 18px);
  pointer-events: auto;
}

.pw-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #c2bf9f;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 200ms ease;
}
.pw-toggle-btn:hover { color: #8d8a6e; }
.pw-toggle-btn.is-active { color: var(--ink); }

/* ===========================================================
   ITEMS CONTAINER  ·  switches between grid + list
   =========================================================== */
.pw-items {
  flex: 1 1 auto;
  display: grid;
  gap: clamp(16px, 1.5vw, 26px);
  position: relative;        /* anchor for Flip's absolute morph */
}

/* GRID : 4 columns × 2 rows. Rows use a fixed, viewport-based height (NOT
   `1fr`) so card size never depends on the container height — otherwise the
   morph's height tween would visibly stretch/squash every card. */
.projects-content[data-view="grid"] .pw-items {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 300px;
  gap: 0;
}
.projects-content[data-view="list"] .pw-items {
  grid-template-columns: 1fr;
  grid-auto-rows: 300px;
  gap: 0;
}

/* ===========================================================
   ITEM CARD
   =========================================================== */
.pw-item {
  position: relative;
  overflow: hidden;
  background: var(--yellow);
  border: 0.5px solid var(--ink);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 1.7vw, 32px);
  box-sizing: border-box;
  cursor: none;
  transition: border-color 320ms ease;
}
.pw-item:hover { transform: none; border-color: var(--ink); outline: 5px solid var(--accent); outline-offset: 2px; z-index: 3; }
.pw-item:hover .pw-title { -webkit-text-stroke: 4px var(--accent); paint-order: stroke fill; }
/* titles align to the card's own padding in BOTH views so they never shift on toggle */
.pw-item .pw-title { left: clamp(20px, 1.7vw, 32px) !important; }
/* fluid title so text never runs under the render image on narrower cards */
.pw-item .pw-title { font-size: clamp(26px, 4.4vw, 60px) !important; max-width: 50%; }
.projects-content[data-view="list"] .pw-item .pw-title { max-width: 60%; }
.pw-render {
  position: absolute;
  right: -3%;
  bottom: -9%;
  width: 50%;
  height: 78%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.92;
  pointer-events: none;
}
.pw-tags {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, 0.85vw, 15px);
  color: #4b4a2a;
  position: relative;
  z-index: 2;
}
.projects-content[data-view="list"] .pw-item { justify-content: space-between; }

.projects-content[data-view="list"] .pw-render {
  position: absolute !important;
  left: auto !important;
  top: 50% !important;
  right: clamp(24px, 5vw, 90px) !important;
  bottom: auto !important;
  width: clamp(150px, 22%, 340px) !important;
  height: 74% !important;
  transform: translateY(-50%);
  background-position: center right !important;
}


/* while morphing grid<->list, GSAP Flip drives transforms frame-by-frame.
   Kill the CSS transition + entrance animation so they can't fight it. */
.pw-morphing .pw-item,
.pw-morphing .pw-item * {
  transition: none !important;
  animation: none !important;
}
.pw-morphing .pw-item:hover { transform: none; }

/* Once the layout has been toggled once, the entrance `pwRise` must never run
   again — otherwise toggling `.pw-morphing` off restarts it (the "fade-in
   replays after the morph" bug). */
.pw-toggled .pw-item,
.pw-toggled .pw-item * { animation: none !important; }

.pw-meta {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(11px, 0.82vw, 14px);
  letter-spacing: 0.02em;
  margin-bottom: clamp(8px, 0.9vw, 14px);
  position: relative;
  z-index: 2;
}

.pw-title {
  margin: 0;
  font-family: "MebiyesDemo", Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 2.6vw, 46px);
  position: relative;
  z-index: 2;
  margin-bottom: clamp(12px, 1.6vw, 24px);
}

/* list rows: a touch larger title, content stays bottom-left */
.projects-content[data-view="list"] .pw-title {
  font-size: clamp(24px, 2.3vw, 40px);
}
.projects-content[data-view="list"] .pw-meta {
  font-size: clamp(12px, 0.95vw, 16px);
}

/* ===========================================================
   MURAL CARD  (first item) — active, mint keyline.
   Looks like a plain yellow block by DEFAULT; the Haring art
   (figures + halftone dots) only fades in on HOVER.
   =========================================================== */
.pw-item--mural {
  box-shadow: 0 0 0 0 transparent;
  color: var(--ink);
}
.pw-item--mural .pw-meta,
.pw-item--mural .pw-title {
  color: var(--ink);
  transition: color 260ms ease;
}

.pw-item--mural:hover { transform: translateY(-6px); border-color: #b9f7c8; }
.pw-item--mural:hover .pw-meta,
.pw-item--mural:hover .pw-title { color: #ffffff; }

/* art wrap : hidden until hover, then crossfades in over the yellow */
.pw-mural {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #c3c1be url("../assets/haring-square.png") center bottom / cover no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
.projects-content[data-view="list"] .pw-mural {
  background-image: url("../assets/haring-wide.png");
}
.pw-item--mural:hover .pw-mural {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease;
}

/* halftone dot field across the top */
.pw-mural-dots {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 50%;
  background-image: radial-gradient(#2a2722 1.7px, transparent 1.8px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
  opacity: 0.9;
}
.projects-content[data-view="list"] .pw-mural-dots {
  left: auto; right: 14%;
  width: 42%;
  height: 64%;
}

/* darken the art slightly so the white label/title stays legible — hover only */
.pw-item--mural::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(20,18,16,0.46) 0%, rgba(20,18,16,0.06) 42%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}
.pw-item--mural:hover::after { opacity: 1; }

/* ===========================================================
   ART CARD  ·  generic image-on-hover (e.g. UPSTOE splash)
   =========================================================== */
.pw-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #1c1a17;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
.pw-item--art:hover .pw-art {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease;
}
.pw-item--art .pw-meta,
.pw-item--art .pw-title {
  position: relative;
  z-index: 2;
  transition: color 260ms ease;
}
.pw-item--art:hover .pw-meta,
.pw-item--art:hover .pw-title { color: #ffffff; }

/* ===========================================================
   CURSOR-FOLLOW CIRCLE
   =========================================================== */
.pw-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--yellow);
  border: 5px solid var(--ink);
  box-shadow: 0 0 0 4px var(--accent-mint);
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transition: opacity 220ms ease;
  will-change: transform;
}
.pw-cursor.is-on { opacity: 1; }
.pw-cursor.is-press { background: var(--accent-mint); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1100px) {
  .projects-content[data-view="grid"] .pw-items {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(220px, 30vh, 320px);
  }
  .projects-content.pw { min-height: 100vh !important; }
}

@media (max-width: 620px) {
  .projects-content[data-view="grid"] .pw-items {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(200px, 32vh);
  }
  .pw-toggle-btn { font-size: 20px; }
}

/* ===========================================================
   PROJECT DETAIL PANEL  ·  right-hand drawer opened on card click
   =========================================================== */
.pw-detail {
  position: fixed;
  inset: 0;
  z-index: 9700;
  visibility: hidden;
  pointer-events: none;
}
.pw-detail.is-shown {
  visibility: visible;
  pointer-events: auto;
}

/* olive-dark wash over the rest of the page */
.pw-detail-scrim {
  position: absolute;
  inset: 0;
  background: rgba(32, 34, 6, 0.62);
  opacity: 0;
  transition: opacity 360ms ease;
  cursor: pointer;
}
.pw-detail.is-open .pw-detail-scrim { opacity: 1; }

/* the cream sheet, anchored right, scrolls internally */
.pw-detail-sheet {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: clamp(340px, 60vw, 720px);
  background: var(--cream);
  box-sizing: border-box;
  padding: clamp(28px, 4vh, 52px) clamp(32px, 4vw, 64px) clamp(48px, 7vh, 90px);
  overflow-y: auto;
  overflow-x: hidden;
  cursor: auto;
  transform: translateX(100%);
  transition: transform 480ms cubic-bezier(.6,.02,.2,1);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.pw-detail.is-open .pw-detail-sheet { transform: translateX(0); }

/* staggered fade-in for the sheet's inner blocks once the panel slides open */
.pw-detail-thumb,
.pw-detail-meta,
.pw-detail-body,
.pw-detail-media {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.2,1);
}
.pw-detail.is-open .pw-detail-thumb,
.pw-detail.is-open .pw-detail-meta,
.pw-detail.is-open .pw-detail-body,
.pw-detail.is-open .pw-detail-media {
  opacity: 1;
  transform: translateY(0);
}
.pw-detail.is-open .pw-detail-thumb { transition-delay: 160ms; }
.pw-detail.is-open .pw-detail-meta  { transition-delay: 240ms; }
.pw-detail.is-open .pw-detail-body  { transition-delay: 320ms; }
.pw-detail.is-open .pw-detail-media { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .pw-detail-thumb,
  .pw-detail-meta,
  .pw-detail-body,
  .pw-detail-media {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* hide the corner navbar while the detail panel is open (the framed X
   takes over as the only control), and let the panel sit above it */
.blob-corner-navbar { transition: right 600ms cubic-bezier(.5,0,.2,1), opacity 320ms ease; }
body.pw-panel-open .blob-corner-navbar {
  opacity: 0;
  pointer-events: none;
  user-select: none;
  /* fully remove from rendering + selection once the fade finishes so it
     can't be drag-selected from behind the panel */
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}

/* framed X close button, top-right */
.pw-detail-close {
  position: absolute;
  top: clamp(20px, 3vh, 34px);
  right: clamp(24px, 3vw, 44px);
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pw-detail-close svg { width: 100%; height: 100%; display: block; }
.pw-detail-close:hover { color: #4b4a2a; }

/* dark thumbnail with thick yellow keyline, centered near the top */
.pw-detail-thumb {
  width: clamp(74px, 7vw, 96px);
  height: clamp(74px, 7vw, 96px);
  margin: clamp(10px, 2vh, 26px) auto clamp(28px, 4vh, 48px);
  background: #1c1a17;
  border: clamp(9px, 0.8vw, 13px) solid var(--yellow);
}

/* meta list — bubbly label left, mono value right, hairline divider */
.pw-detail-meta {
  margin: 0 0 clamp(28px, 4vh, 46px);
}
.pw-detail-row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(14px, 1.8vh, 22px) 0;
}
.pw-detail-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: rgba(35, 31, 32, 0.5);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 560ms cubic-bezier(.2,.7,.2,1);
}
.pw-detail.is-open .pw-detail-row::after { transform: scaleX(1); }
.pw-detail.is-open .pw-detail-row:nth-child(1)::after { transition-delay: 300ms; }
.pw-detail.is-open .pw-detail-row:nth-child(2)::after { transition-delay: 380ms; }
.pw-detail.is-open .pw-detail-row:nth-child(3)::after { transition-delay: 460ms; }
.pw-detail.is-open .pw-detail-row:nth-child(4)::after { transition-delay: 540ms; }
@media (prefers-reduced-motion: reduce) {
  .pw-detail-row::after { transform: scaleX(1); transition: none; }
}
.pw-detail-row dt {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pw-detail-row dd {
  margin: 0;
  font-family: "Courier New", ui-monospace, SFMono-Regular, monospace;
  font-size: clamp(15px, 1.25vw, 19px);
  letter-spacing: 0.01em;
  color: var(--ink);
}

.pw-detail-body {
  margin: 0 0 clamp(32px, 5vh, 56px);
  font-family: "Courier New", ui-monospace, SFMono-Regular, monospace;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.5;
  color: #1a1813;
  text-wrap: pretty;
}

/* stacked media — each fits its screenshot fully (no cropping) */
.pw-detail-media {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 48px);
}
.pw-detail-shot {
  width: 100%;
  min-height: clamp(180px, 26vh, 240px);
  background: #211f1b;
}
.pw-detail-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.pw-detail-shot.is-empty {
  min-height: 0;
  height: 0;
  margin: 0;
}

@media (max-width: 620px) {
  .pw-detail-sheet { width: 100vw; }
}

/* ===========================================================
   SCROLL-UP-TO-ABOUT PROGRESS  ·  fills while you scroll up at
   the top of Work; on full, hands back to the About section
   =========================================================== */

/* Firm top-lock: while filling the bar at the top of Work, pin the section to
   the viewport (just like the About lock) so nothing native-scrolls and the
   About section above can never tear into view. */
body.work-top-lock {
  position: fixed;
  top: var(--work-lock-top, 0);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.pa-progress {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translate(-50%, 10px);
  z-index: 200;
  width: min(280px, 70vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* invert against whatever colour the bar sits above */
  mix-blend-mode: difference;
  transition: opacity 300ms ease, transform 300ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 300ms;
}
.pa-progress.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(.2,.7,.2,1);
}
.pa-progress-label {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}
.pa-progress-track {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  overflow: hidden;
}
.pa-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
  .pa-progress { transition: opacity 120ms ease, visibility 0s linear 120ms; }
}

/* ===========================================================
   PATH VIEW  ·  full-screen sections (3rd toggle)
   Each section = one landscape screen with two projects (top-left
   + bottom-right) and the thick cream line running between them.
   The line is one continuous SVG traced from the reference, so it
   flows seamlessly from each section into the next.
   =========================================================== */
.projects-content { transition: background-color 460ms ease; }
.projects-content[data-view="path"] { background: var(--cream) !important; }
.projects-section:has(.projects-content[data-view="path"]) {
  background: var(--cream) !important;
}

/* show / hide the two layouts */
.pw-path { display: none; }
.projects-content[data-view="path"] .pw-items { display: none !important; }

.pw-path {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  /* sit INSIDE the content padding so the cream shows as a frame around the
     yellow path panel (matches the reference artboard) */
  margin: clamp(14px, 2.5vh, 30px) 0 0;
  background: var(--yellow);
}
.projects-content[data-view="path"] .pw-path {
  display: block;
  animation: pwPathIn 560ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes pwPathIn {
  from { transform: translateY(20px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .projects-content[data-view="path"] .pw-path { animation: none; }
}

/* retire the old single continuous line — the path is now built per-section */
.pw-path-line { display: none !important; }

/* stacked full-screen sections */
.pw-path-secs {
  position: relative;
  z-index: 1;
}
.pw-path-sec {
  position: relative;
  width: 100%;
  aspect-ratio: 1230 / 736;
  overflow: hidden;
}

/* the cream "puzzle piece" line for each section — stretched to fit the
   section exactly (aspect-ratio matches the viewBox so nothing distorts) */
.pw-sec-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.pw-sec-line path {
  fill: none;
  stroke: var(--cream);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* corner labels */
.pw-path-label {
  position: absolute;
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vw, 9px);
  padding: 0;
  margin: 0;
  cursor: none;
  color: var(--ink);
  max-width: 42%;
}
.pw-path-label--tl {
  top: clamp(30px, 5vw, 70px);
  left: clamp(30px, 4vw, 64px);
  align-items: flex-start;
  text-align: left;
}
.pw-path-label--br {
  bottom: clamp(30px, 5vw, 70px);
  right: clamp(30px, 4vw, 64px);
  align-items: flex-end;
  text-align: right;
}

.pw-path-title {
  margin: 0;
  font-family: "Michroma", Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(24px, 2.7vw, 50px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition: transform 380ms cubic-bezier(.2,.7,.2,1), color 220ms ease;
}
.pw-path-meta {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, 0.95vw, 16px);
  letter-spacing: 0.02em;
  color: #2a2722;
}

/* hover: nudge the title away from its corner (toward the line) */
.pw-path-label--tl:hover .pw-path-title { transform: translateX(12px); }
.pw-path-label--br:hover .pw-path-title { transform: translateX(-12px); }
.pw-path-label:hover .pw-path-title { color: #1c1a17; }

@media (max-width: 620px) {
  .pw-path-title { font-size: clamp(20px, 6vw, 34px); }
  .pw-path-label { max-width: 60%; }
}