/* =====================================================================================================
   /work skin · D3 "Feature Stage" · assets/css/work-skin.css (PPB, Shah 10:01pm ET Oct 29 2026:
   "Build D3 but keep all cards the same size"). Linked from work/index.html only. Not bundled by build.py.
   Look only: the homepage's cobalt cover the work rises out of, porcelain page, type D, cobalt glass header.
   Rules: paint + page markup outside the deck. Never transform / opacity / position on .wd-* (EB's deck).
   No featured span: every card keeps today's size and grid (no deck geometry change).
   Card colour comes from each card's own vars (--tile-tint, --tile-hover-tint, --title-hover-color), which
   work-deck.js already copies onto its phone-deck copies, so the brand colour survives the deck.
   Tokens: design-system/tokens.css (--pub-*, cobalt, porcelain, gold). The --wf-c* hues are the cards'
   existing brand values (--title-hover-color in work/index.html), not new colours.
   ===================================================================================================== */

/* ---------- page + type D headline ---------- */
body.work-page { background: var(--wp-page-bg); --w-name: var(--wp-title-size); } /* 38 → 60, homepage name cap */
/* the page-wide 1px edge rules (work/index.html inline body::before/::after, shown at 1241px+) ran through the cover as
   thin white lines left and right of the grid (Shah, Oct 30 8:16am ET: "get rid of the white line on two sides"): off on /work */
body.work-page::before,
body.work-page::after { display: none; }
body.work-page .stripe-grid-line { display: none; }

/* ---------- the cover: homepage cobalt material, 32px panel, gold foot hairline ---------- */
body.work-page .gradient-art-hero {
  position: relative; isolation: isolate;                 /* EB hook spec: header relative + isolate */
  max-width: none; width: var(--wp-cover-width); margin: var(--wp-cover-inset) auto 0; padding-top: 0; min-height: 0;
  border-radius: var(--wp-cover-radius); overflow: hidden;
  background: var(--wp-cover-fill);
}
body.work-page .gradient-art-hero::after { background: var(--wp-cover-foot); opacity: var(--wp-cover-foot-opacity); }
body.work-page .gradient-art-canvas-wrapper { display: none; }   /* the old video art: off (one light, lighter on phones) */
body.work-page #work-header { z-index: var(--wp-header-z); }
body.work-page #work-header > .container { padding-top: var(--wp-header-pad-top) !important; padding-bottom: var(--wp-header-pad-bottom) !important; }

body.work-page .stripe-header-copy {
  font-family: var(--wp-title-face); font-weight: var(--wp-title-weight); letter-spacing: var(--wp-title-tracking);
  font-size: var(--w-name) !important; line-height: var(--wp-title-leading); max-width: var(--wp-title-measure); text-wrap: balance;
  color: var(--wp-title-color);   /* was --pub-inverse-muted #C8CCE9 (hue 233 lavender) → hue 220; flagged for PSB */
}
body.work-page .stripe-header-copy strong { font-family: inherit; font-size: 1em; font-weight: var(--wp-title-weight); color: var(--wp-title-strong-color); }
body.work-page .stripe-header-copy strong em {
  font-family: var(--wp-title-accent-face); font-style: italic; font-weight: var(--wp-title-accent-weight); letter-spacing: var(--wp-title-accent-tracking); font-synthesis: none;
  color: var(--gold-300);
  /* gold-300 + 8% white (#D9C6A8): the same gold, a touch lighter, so "work." clears 4.5:1 on the cover at 390 (was 4.40) */
  color: var(--wp-title-accent-color);
}

/* ---------- .work-flow · EB hook (static still here; motion by EB) ----------
   Empty first child of .gradient-art-hero. Absolute inset 0, z 0, overflow hidden, no pointer events.
   The still is a plain CSS background built from --wf-bg + --wf-c1..--wf-c4 (EB animates from these). */
body.work-page .work-flow {
  --wf-bg: transparent;
  --wf-c1: #2b7bc0;  /* Chase card brand */   --wf-c2: #5b21b6;  /* Schneps card brand */
  --wf-c3: #d14545;  /* TurboTax card brand */ --wf-c4: var(--gold-300);
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    linear-gradient(90deg, var(--cobalt-800) 0 22%, transparent 55%),
    repeating-linear-gradient(-14deg, rgb(255 255 255 / .13) 0 1px, transparent 1px 6px),
    linear-gradient(166deg, transparent 0 55%, var(--cobalt-700) 60%, var(--wf-c1) 64%, var(--wf-c2) 69%,
                    var(--wf-c3) 75%, var(--wf-c4) 80%, transparent 88%),
    var(--wf-bg);
}
/* the still band's stops match EB's motion handoff copy (work-flow.css ::after), so first paint / no JS clears 4.5:1 behind
   the headline's last line and nothing shifts when the motion takes over; phones run 5% lower, as in the motion */
@media (max-width: 767.98px) {
  body.work-page .work-flow {
    background-image:
      linear-gradient(90deg, var(--cobalt-800) 0 22%, transparent 55%),
      repeating-linear-gradient(-14deg, rgb(255 255 255 / .13) 0 1px, transparent 1px 6px),
      linear-gradient(166deg, transparent 0 60%, var(--cobalt-700) 65%, var(--wf-c1) 69%, var(--wf-c2) 74%,
                      var(--wf-c3) 79%, var(--wf-c4) 84%, transparent 91%);
    /* same mask as EB's phone motion (work-flow.css .wf-on): the diagonal hairlines stay off the headline from first paint */
    -webkit-mask-image: linear-gradient(180deg, transparent 0 34%, rgb(0 0 0 / .6) 52%, #000 70%);
            mask-image: linear-gradient(180deg, transparent 0 34%, rgb(0 0 0 / .6) 52%, #000 70%);
  }
}

/* ---------- the work rises over the cover (page layout; the deck measures the feed at runtime) ---------- */
body.work-page #case-studies { position: relative; z-index: var(--wp-section-z); margin-top: var(--wp-overlap) !important; overflow: visible; }
body.work-page #case-studies > .container { position: relative; z-index: 3; padding-top: 0; padding-bottom: var(--wp-section-pad-bottom); }
/* the deck's pickbar already carries its own bottom room (work-deck.css), so drop the container's 96px under it: halves the
   'Pick a random one' + dot → footer gap at desktop (216 → 120px, same as phone). No-JS (no pickbar) keeps the 96px. */
html:is(.wd-desk, .wd-phone, .wd-rm) body.work-page #case-studies > .container { padding-bottom: 0; }
body.work-page #portfolio-cards-container { gap: var(--wp-grid-gap); }
/* 2 columns from the tablet grid up to 1199px (PSB autopilot 6:21am ET). Measured: in 3 columns the 296-343px tiles clip
   titles/copy at 1024-1160px (metlife title still clips at 1160); 3 columns are clean from 1164px, so they start at 1200px.
   Every card keeps the same 389/480 tile, as at 768-1023px. Layout only, no motion; work-deck.js reads the grid as laid out. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  body.work-page #portfolio-cards-container { grid-template-columns: var(--wp-grid-cols-mid); }
}
body.work-page .wd-pickbar .btn { font: var(--wp-pick-weight) var(--wp-pick-size)/var(--wp-pick-leading) var(--wp-pick-face); padding: var(--wp-pick-pad); border-radius: var(--wp-pick-radius); color: var(--wp-pick-label); background: var(--wp-pick-fill); border: var(--wp-pick-border); box-shadow: var(--wp-pick-shadow); }   /* was white-on-navy; now on porcelain */
@media (hover: hover) and (pointer: fine) {
  body.work-page .wd-pickbar .btn:hover { color: var(--wp-pick-label-hover); background: var(--wp-pick-fill-hover); border-color: var(--wp-pick-border-hover); }
}
body.work-page .wd-pickbar .btn:focus-visible { outline: var(--wp-pick-focus-ring); outline-offset: var(--wp-pick-focus-offset); }

/* ---------- header: now the homepage nav itself, from assets/css/nav-public.css (linked after this file; Shah 3:20pm
   ET Oct 30: same nav bar on home and /work). This file's own copy of the cobalt glass + nav type was removed. ---------- */

/* ---------- phone ---------- */
@media (max-width: 767.98px) {
  body.work-page .gradient-art-hero { width: var(--wp-cover-width-phone); margin-top: var(--wp-cover-inset-phone); border-radius: var(--wp-cover-radius-phone); }
  body.work-page #work-header > .container { padding-top: var(--wp-header-pad-top-phone) !important; padding-bottom: var(--wp-header-pad-bottom-phone) !important; }
  body.work-page #case-studies { margin-top: var(--wp-overlap-phone) !important; }
}

/* ---------- EB's deck skin props (exp/work-deck 71c88d4 reads these with fallbacks; paint only).
   Never transform / opacity / position / size / z-index on .wd-* here. No JS style writes. ---------- */
:root {
  --wd-ghost-shadow: var(--wp-deck-ghost-shadow);
  --wd-dot-color: var(--wp-dot-color); --wd-dot-opacity: var(--wp-dot-opacity); --wd-dot-on-opacity: var(--wp-dot-on-opacity); --wd-dot-on-scale: var(--wp-dot-on-scale);
  --wd-scrim: var(--wp-scrim);
  --wd-focus-ring: var(--wp-pick-card-focus); --wd-focus-width: var(--wp-pick-card-focus-width); --wd-focus-offset: var(--wp-pick-card-focus-offset);
  --wd-step-opacity: var(--wp-step-opacity);
}
@media (max-width: 767.98px) { :root { --wd-ghost-shadow: var(--wp-deck-ghost-shadow-phone); } }

/* ── Footer palette (Shah 11:10/11:12pm ET via PSB): both public footers end identical. /work's stamped markup, copy and
   layout; the homepage footer's colours. The same block sits in work-skin.css (/work) and front-door.css (home): change both together.
   Paint only (backgrounds, text, accents, rings). No size, spacing, font or motion here. ── */
html #main-footer.footer {
  background: url("/assets/images/grain-soft.png") 0 0 / 64px 64px, var(--pub-light-bounce),
              linear-gradient(180deg, var(--cobalt-900), var(--cobalt-950));
  box-shadow: none; color: var(--pub-inverse-muted);
}
html #main-footer.footer::before { display: none; }
html #main-footer .footer-top-row { border-bottom-color: rgb(255 255 255 / .14); }
html #main-footer .footer-link { color: var(--pub-inverse-text); }
html #main-footer .copyright-text { color: var(--pub-inverse-muted); }
html #main-footer .social-icon-btn {
  color: var(--pub-inverse-text); background: var(--pub-glass-cobalt);
  box-shadow: var(--pub-hi-top-glass), inset 0 0 0 1px rgb(255 255 255 / .2);
}
@media (hover: hover) and (pointer: fine) { html #main-footer .footer-link:hover { color: var(--pub-inverse-gold); } }
html #main-footer :is(a, button):focus-visible { outline: var(--pub-focus-ring-inverse); outline-offset: var(--pub-focus-offset); }
html #main-footer ::selection { background: var(--pub-inverse-gold); color: var(--cobalt-950); }
/* footer type D (PSB autopilot 6:35am ET): links, Contact Me and the copyright line leave Poppins for the home faces.
   Family/weight/tracking only; sizes, colours and copy unchanged. Contact Me = the hero buttons' UI 500. */
html #main-footer .footer-link { font-family: var(--pub-font-ui); font-weight: 500; letter-spacing: 0; }
html #main-footer .btn { font-family: var(--pub-font-ui); font-weight: 500; letter-spacing: -.005em; }
html #main-footer :is(.copyright-text, .footer-legal-link) { font-family: var(--pub-font-ui); font-weight: 400; letter-spacing: 0; }