/* PAAK v3 — /work index.
   Structure referred from https://omnerat-template.webflow.io/work (probed 2026-08-13):
   a full-height hero whose headline is one giant word-pair with the mark set as a
   character, a supporting line bottom-left, a mono meta stamp bottom-right, then the
   projects in a TWO-COLUMN grid.

   Ours differs in two deliberate places:
     - the caption sits UNDER its card with no hairline, matching the homepage roll
       (works-v3.css reasoned that choice; the index must not contradict it)
     - the hero uses its own .pkw-* classes. The template's .logo-big / .h2._02 are
       visibility:hidden until the homepage GSAP reveal runs, so reusing them here
       would render an empty hero.

   Type follows type-system.css: display 400, meta mono, one tracking ladder.
*/

/* .main-content is the dark ground the homepage's chapters sit on. This page is a
   light chapter end to end, so both sections paint their own background — without
   this the copy is 26,26,26 on 26,26,26. */
.pkw-hero,
.pkw-grid {
  background: var(--colors--second-color, #fff);
  color: var(--colors--first-color, #1a1a1a);
}

/* Two rows: the word takes the free space and centres in it, the foot sits on the
   baseline of the section. The top pad clears the fixed nav — without it the ® in
   the wordmark collides with the nav links.

   Height and the foot's bottom offset are the reference's, measured off the live
   template at 1512x900: its hero is a full 100vh and its foot block is pinned
   40px off the section's bottom edge (position:absolute; bottom:40px). We were
   at 92vh with a 76px bottom pad, which left the closing line floating ~148px
   clear of the fold instead of sitting on it. The top pad comes down with the
   height so the word keeps its optical position rather than sliding to dead
   centre — it still clears the fixed nav on short viewports. */
.pkw-hero {
  min-height: 100vh;
  padding: clamp(72px, 7vh, 120px) var(--section--padding-left-right, 2%) 0;
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
}

.pkw-hero__word {
  /* Was sized to span 92.6% of the viewport, matching omnerat's edge-to-edge word.
     At our string length that read as shouting rather than as a masthead, so the word
     now fills ~68% of the viewport: 25.9vw x 0.68 = 17.6vw, cap 392 x 0.68 = 266px.
     Still the largest thing on the page, no longer the only thing. */
  font-size: clamp(48px, 17.6vw, 266px);
  font-weight: var(--pk-w-display, 400);
  letter-spacing: var(--pk-tr-xxl, -0.03em);
  line-height: 0.86;
  text-align: center;
  margin: 0 auto;
  align-self: center;
  white-space: nowrap;
}

/* The mark is a character in the word, not a superscript: same size, own tracking. */
.pkw-hero__mark { letter-spacing: 0; }

.pkw-hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  /* The reference's flat 40px off the bottom edge — not a vw clamp. */
  padding-bottom: 40px;
}

.pkw-hero__line {
  font-size: clamp(24px, 3.05vw, 46px);
  /* Sub tier, not display: in the reference this line sits a notch HEAVIER than
     the masthead above it (its .h2 runs 600 against the word's 500). */
  font-weight: var(--pk-w-sub, 600);
  letter-spacing: var(--pk-tr-l, -0.025em);
  line-height: var(--pk-lh-l, 1.08);
  /* The break is authored in the markup now, so no ch cap — a cap on top of the <br>
     is what would push this to three lines on a narrow desktop. */
  max-width: none;
  margin: 0;
  /* styles.css puts every <p> at 0.7 — this line is a statement, not support copy. */
  opacity: 1;
}

/* Mono = labels and data, per the site's type rule. */
.pkw-stamp {
  font-family: var(--font--second-font, "IBM Plex Mono", monospace);
  font-size: var(--pk-text-label, 12px);
  font-weight: 400;
  letter-spacing: var(--pk-tr-label, 0.08em);
  line-height: var(--pk-lh-meta, 1.3);
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
}

/* The nav is transparent and the grid's artwork is mostly dark, so dark nav text
   scrolls over dark images. The template's .blur-effect bar is masked to near-nothing
   here, so the scrim goes on the navbar itself: a white fade that dies out well before
   the first card, keeping the links readable without drawing a hard bar. */
.pkw-page .navbar {
  background-image: linear-gradient(rgba(255, 255, 255, 0.94) 45%, rgba(255, 255, 255, 0));
  background-color: transparent;
}

/* ---------- the grid ---------- */

.pkw-grid {
  /* works-v3.css declares --pk-work-radius on .pk-works, the homepage roll's own
     wrapper. These cards live in .pkw-grid instead, so the var resolved to nothing
     and every card rendered square. Re-declare it here — a touch larger than the
     homepage value because these cards are smaller and read harder-edged at 22px. */
  --pk-work-radius: clamp(14px, 1.7vw, 26px);

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(48px, 6vw, 104px) clamp(24px, 2.6vw, 40px);
  padding: clamp(40px, 5.5vw, 96px) var(--section--padding-left-right, 2%) clamp(96px, 12vw, 200px);
  align-items: start;
}

/* The homepage block is a 3D perspective host sized to one big centred card.
   In the grid it is a plain cell. */
.pkw-grid .pk-work__block {
  perspective: none;
  width: 100%;
}

/* No roll animation on this page, so the caption must sit flush with the artwork. */
.pkw-grid .pk-work__meta {
  width: 100%;
  margin-top: clamp(14px, 1.2vw, 22px);
}

.pkw-grid .pk-work__title { font-size: clamp(22px, 1.75vw, 32px); }

.pkw-grid .pk-work__card {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pkw-grid .pk-work__card:hover { transform: translateY(-6px); }
.pkw-grid .pk-work__card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.pkw-grid .pk-work__media {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pkw-grid .pk-work__card:hover .pk-work__media { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .pkw-grid .pk-work__card,
  .pkw-grid .pk-work__media { transition: none; }
  .pkw-grid .pk-work__card:hover { transform: none; }
  .pkw-grid .pk-work__card:hover .pk-work__media { transform: none; }
}

@media screen and (max-width: 767px) {
  .pkw-hero { min-height: 76vh; }
  .pkw-hero__foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pkw-hero__line { max-width: none; }
  .pkw-grid { grid-template-columns: 1fr; gap: 44px; }
  .pkw-grid .pk-work__title { font-size: 26px; }
}

/* ---------- the Services hub ----------
   Same grid, different caption. On /work/ the right-hand caption is a tag list —
   "Product Design + Web Development", two or three words that fit beside the
   project's name. A service's caption is a SENTENCE ("Sites that do the selling
   when you're not in the room."), which is long enough to steal width from the
   title, wrap it to two lines, and then wrap itself ragged against a right edge.
   Measured at 1440: two of the four titles broke, and the meta row read as two
   competing blocks instead of one caption.

   So on this page only the row stacks: name, then the promise under it, both on
   the same left edge as the artwork. Nothing on /work/ moves — .svc-hub is only
   ever on this page's body. */
body.svc-hub .pkw-grid .pk-work__meta {
  display: block;
}

body.svc-hub .pkw-grid .pk-work__tags {
  display: block;
  text-align: left;
  padding-top: 0;
  margin-top: 0.42em;
  max-width: 34ch;
}