@import url('./fonts/space-grotesk.css');
@import url('./fonts/jetbrains-mono.css');
@import url('./project-palettes.css');

/* Shared foundations. Light and dark foundations support the project palettes in case-study-components.css. */
body.pf-system {
  --pf-edge: max(var(--pf-gutter), calc((100% - var(--pf-width)) / 2));
  margin: 0;
  font: 400 var(--pf-type-body)/1.65 var(--pf-font);
  background: var(--pf-canvas) !important;
  color: var(--pf-ink);
  -webkit-font-smoothing: antialiased;
}
body.pf-system, body.pf-system [data-ds-tone='light'] {
  --pf-canvas: #f7f7f5;
  --pf-surface: #ffffff;
  --pf-soft: #eef0ed;
  --pf-ink: #252b28;
  --pf-muted: #616b65;
  --pf-border: #d8ded9;
  --pf-accent: #252b28;
}
body.pf-system[data-ds-tone='dark'], body.pf-system [data-ds-tone='dark'] {
  --pf-canvas: #0c0c0e;
  --pf-surface: #15171a;
  --pf-soft: #1d2024;
  --pf-ink: #f2f3ef;
  --pf-muted: #b1b8b1;
  --pf-border: #353a3f;
  --pf-accent: #f2f3ef;
}

/* Same title, copy, and artwork positions; original images stay intact. */
body.pf-unified .pf-project-hero {
  display: grid !important; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
  grid-template-areas: 'copy media'; align-items: center !important; gap: 64px !important;
  position: relative !important; width: calc(100% - 2 * var(--pf-gutter)) !important;
  max-width: var(--pf-width) !important; height: auto !important; min-height: 580px !important;
  padding: 72px 0 !important; margin: 0 auto !important;
  background: transparent !important; border: 0 !important; overflow: visible !important;
}
body.pf-unified .pf-project-hero::after { display: none !important; }
body.pf-unified .pf-project-copy {
  grid-area: copy; width: auto !important; max-width: none !important; padding: 0 !important;
  margin: 0 !important; position: static !important; transform: none !important;
  align-self: start; padding-top: 64px !important;
}
body.pf-unified .pf-project-hero h1 {
  font: 500 clamp(44px,5vw,72px)/1.05 var(--pf-font) !important;
  letter-spacing: -.055em !important; color: var(--pf-ink) !important;
  margin: 20px 0 24px !important; max-width: none !important; transform: none !important;
  text-shadow: none !important; text-wrap: balance; font-style: normal !important;
}
body.pf-unified .pf-project-hero .pf-label { margin: 0 !important; }
body.pf-unified .pf-project-hero .pf-hero-description {
  font: 400 20px/1.65 var(--pf-font) !important; color: var(--pf-muted) !important;
  max-width: 42ch !important; margin: 0 0 28px !important;
}
body.pf-unified .pf-project-media {
  grid-area: media; display: flex; align-items: center; justify-content: center;
  width: 100% !important; max-width: none !important; height: 400px !important; min-height: 0 !important;
  aspect-ratio: auto !important; margin: 0 !important; padding: 24px !important;
  position: relative !important; inset: auto !important; transform: none !important;
  border: 1px solid var(--pf-border) !important; border-radius: var(--pf-radius) !important;
  background: var(--pf-soft) !important; box-shadow: none !important; overflow: hidden !important;
}
body.pf-unified .pf-project-media > img {
  display: block; width: 100% !important; height: 100% !important; max-width: 100% !important;
  max-height: 100% !important; object-fit: contain !important; position: static !important;
  transform: none !important; filter: none !important; mask-image: none !important;
}
body.pf-unified .pf-project-media :is(.hero-aura,.hero-orbit,.art-spark,.hero-halo) { display: none !important; }
body.pf-unified .pf-project-media .screen { width: 100%; box-shadow: none; transform: none; border: 1px solid var(--pf-border); border-radius: 4px; overflow: hidden; }
body.pf-unified .hero-composition.pf-project-media { display: grid; grid-template-columns: 1.6fr .8fr; gap: 20px; }
body.pf-unified .hero-composition.pf-project-media figure { position: static !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; transform: none !important; box-shadow: none !important; }
body.pf-unified .hero-composition.pf-project-media img { max-height: 304px; object-fit: contain; box-shadow: none !important; }
body.pf-unified .hero-composition.pf-project-media figcaption { font: 400 13px/1.5 var(--pf-mono) !important; letter-spacing: .03em; margin-top: 12px; color: var(--pf-muted); }
body.pf-unified .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px !important; margin: 0 !important; }
body.pf-unified .scope { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 !important; }
body.pf-unified .scope span { padding: 0 !important; border: 0 !important; border-radius: 0 !important; font: 400 15px/1.5 var(--pf-font); color: var(--pf-muted); }
body.pf-unified .platform-note { font: 400 15px/1.5 var(--pf-font); color: var(--pf-muted); margin-top: 24px; }

/* Flat section framing and a single left-aligned heading structure. */
body.pf-unified .pf-chapter {
  width: 100% !important; max-width: none !important; margin: 0 !important;
  padding: var(--pf-section) var(--pf-edge) !important;
  border: 0 !important; border-top: 1px solid var(--pf-border) !important;
  border-radius: 0 !important; background: var(--pf-canvas) !important; box-shadow: none !important;
}
body.pf-unified .pf-chapter > :is(.wrap,.container,.collection),
body.pf-unified #character > .section {
  width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}
body.pf-unified .pf-section-intro {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  justify-content: flex-start !important; gap: 0 !important;
  width: 100% !important; max-width: none !important; padding: 0 !important;
  margin: 0 0 32px !important; border: 0 !important; background: transparent !important;
}
body.pf-unified .pf-section-intro > :is(.pf-heading-copy,.chapter-emblem,.chapter-number,.pill) { display: none !important; }
body.pf-unified .pf-section-intro > div:empty { display: none; }
body.pf-unified .pf-section-intro > .pf-label { order: 0; }
body.pf-unified .pf-section-intro > :is(.pf-title,.pf-subtitle) { order: 1; }
body.pf-unified .pf-section-intro > .pf-description { order: 2; }
body.pf-unified .pf-section-intro > :is(.scan-cues,.motion-note) { order: 3; margin-top: 24px !important; }
body.pf-unified .pf-label { color: var(--pf-muted) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }
body.pf-unified .pf-label::before { display: none !important; }
body.pf-unified .pf-title { font-size: clamp(30px,2.8vw,40px) !important; font-weight: 500 !important; }
body.pf-unified .pf-subtitle { font: 500 clamp(20px,1.67vw,24px)/1.3 var(--pf-font) !important; color: var(--pf-ink) !important; }
body.pf-unified .pf-caption { font: 400 16px/1.65 var(--pf-font) !important; letter-spacing: 0 !important; color: var(--pf-muted) !important; }
body.pf-unified :is(.micro-heading,.example-heading,.comparison-heading,.ux-flow-heading) { align-items: start; margin-bottom: 24px; gap: 16px; }
body.pf-unified :is(.chapter-label > span,.chapter-index-label)::before { display: none; }

/* Shared frames for presentation, leaving the contents of diagrams and game screens alone. */
body.pf-unified .pf-panel {
  border: 1px solid var(--pf-border) !important; border-radius: var(--pf-radius) !important;
  box-shadow: none !important; background: var(--pf-surface) !important; transform: none !important;
  color: var(--pf-ink);
}
body.pf-unified .pf-panel::before,
body.pf-unified .pf-panel::after { box-shadow: none !important; }
body.pf-unified :is(.reason,.ss-block) { padding: 24px !important; }
body.pf-unified :is(.feature-video,.ui-stage,.clip-frame,.image-wrap,.map-screen,.flow-artifact,.wireframes,.wire-comparison,.compact-motion-board) { border-radius: var(--pf-radius) !important; box-shadow: none !important; }
body.pf-unified :is(.shot,.story-shot) { overflow: hidden; }
body.pf-unified :is(.shot,.story-shot) > figcaption {
  padding: 16px 20px !important; border-top: 0;
  background: var(--pf-surface) !important; color: var(--pf-muted); font-family: var(--pf-font);
}
body.pf-unified :is(.ui-shot,.gameplay-card) { padding: 0 !important; overflow: hidden; }
body.pf-unified :is(.ui-shot > figcaption,.gameplay-copy) { padding: 20px 24px !important; background: var(--pf-surface) !important; }
body.pf-unified .ui-shot > figcaption h3 { margin: 8px 0 !important; }
body.pf-unified :is(.ui-note,.image-title,.reason-label > span,.spec-label,.module-label,.screen-comparison-note,.screen-card-size,.screen-card-index) { font-family: var(--pf-mono) !important; font-size: 14px; line-height: 1.6; color: var(--pf-muted); }
body.pf-unified .reason-label { border: 0 !important; background: transparent !important; padding: 0 !important; margin-bottom: 24px !important; }
body.pf-unified .reason-label > span { font-size: 14px !important; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; }
body.pf-unified .screen-card figcaption b { font: 500 25px/1.3 var(--pf-font); color: var(--pf-ink); }
body.pf-unified .analyst-brief { padding: 24px; }
body.pf-unified .analyst-brief :is(h3,span,small,i) { color: var(--pf-ink) !important; font-family: var(--pf-font); }
body.pf-unified .analyst-route > span { border-color: var(--pf-border); border-radius: 4px; }
body.pf-unified .image-title { background: var(--pf-surface) !important; padding: 16px 20px !important; border-bottom: 0; }

/* Project-specific adapters remove the old page chrome rather than restyling source UI. */
body.pf-unified[data-portfolio='pawsitive'] #overview { display: block; }
body.pf-unified[data-portfolio='pawsitive'] #overview .overview-detail { max-width: 800px; }
body.pf-unified[data-portfolio='pawsitive'] #overview .pf-description { margin-top: 12px !important; }
body.pf-unified[data-portfolio='pawsitive'] #interaction-design > :is(#ux,#final-result) { margin: 0 !important; padding: 56px 0 !important; background: transparent !important; }
body.pf-unified[data-portfolio='pawsitive'] #interaction-design :is(#ux,#final-result) > .wrap { width: 100% !important; max-width: none !important; }
body.pf-unified[data-portfolio='pawsitive'] #interaction-design .chapter-number { display: none !important; }
body.pf-unified[data-portfolio='pawsitive'] :is(.world-section,.gameplay-section,.bestiary-section) { color: var(--pf-ink); }
body.pf-unified[data-portfolio='pawsitive'] .gameplay-copy h3 { color: var(--pf-ink) !important; }
body.pf-unified[data-portfolio='pawsitive'] .chapter-copy h3 { margin-top: 16px !important; }
body.pf-unified[data-portfolio='pawsitive'] .world-card { box-shadow: none !important; }
body.pf-unified[data-portfolio='gexplore'] .chapter-emblem { display: none !important; }
body.pf-unified[data-portfolio='servicedesk'] .takeaway { padding: 0; }
body.pf-unified[data-portfolio='wecare'] .premise { width: calc(100% - 2 * var(--pf-gutter)); max-width: var(--pf-width); margin-inline: auto; border-color: var(--pf-border); }
body.pf-unified[data-portfolio='wecare'] :is(.hero-desktop img,.hero-phone img,.annotated-overview img) { box-shadow: none !important; }
body.pf-unified[data-portfolio='wecare'] .scan-cues { gap: 32px; font: 400 15px/1.5 var(--pf-font); color: var(--pf-muted); }
body.pf-unified[data-portfolio='wecare'] .scan-cues svg { width: 20px; height: 20px; color: var(--pf-muted); }

@media (max-width: 1000px) {
  
  
  
  body.pf-unified .pf-project-hero { gap: 32px !important; min-height: 480px !important; }
  body.pf-unified .pf-project-media { height: 340px !important; }
}
@media (max-width: 700px) {
  body.pf-unified .pf-project-copy { padding-top: 0 !important; }
  body.pf-unified .pf-project-hero { grid-template-columns: minmax(0,1fr) !important; grid-template-areas: 'copy' 'media'; padding-block: 48px !important; gap: 32px !important; min-height: 0 !important; }
  body.pf-unified .pf-project-hero h1 { font-size: 48px !important; margin: 16px 0 20px !important; }
  body.pf-unified .pf-project-hero .pf-hero-description { font-size: 18px !important; margin-bottom: 24px !important; }
  body.pf-unified .pf-project-media { height: 280px !important; padding: 16px !important; }
  body.pf-unified .hero-composition.pf-project-media { gap: 12px; }
  body.pf-unified .hero-composition.pf-project-media img { max-height: 204px; }
  body.pf-unified .hero-composition.pf-project-media figcaption { font-size: 8px; }
  body.pf-unified .pf-section-intro { margin-bottom: 24px !important; }
  body.pf-unified :is(.reason,.ss-block) { padding: 20px !important; }
  body.pf-unified :is(.ui-shot > figcaption,.gameplay-copy) { padding: 20px !important; }
}

/* Complete editorial reset: nested cards, research artifacts and captions all
   use this scale. Explicit source specimens and media are the only exceptions. */
body.pf-system *:not(:where([data-design-evidence],[data-design-evidence] *)) {
  font-family: var(--pf-font) !important;
  color: var(--pf-ink) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  border-color: var(--pf-border);
}
body.pf-system :is(p,li,dd):not(:where([data-design-evidence] *)) {
  font-size: var(--pf-type-body) !important; font-weight: 400 !important; line-height: 1.65 !important;
}
body.pf-system p:not(:where([data-design-evidence] *)) { margin: 0 0 16px; }
body.pf-system :is(h1,h2,h3,h4,h5,h6):not(:where([data-design-evidence] *)) {
  font-family: var(--pf-font) !important; font-style: normal !important;
  font-weight: 500 !important; line-height: 1.25 !important;
  letter-spacing: -.025em !important; color: var(--pf-ink) !important;
  margin: 0 0 12px !important; text-wrap: pretty;
}
body.pf-system .pf-project-hero [data-ds-type='hero-title'] { font-size: 64px !important; line-height: 1.05 !important; letter-spacing: -.045em !important; margin: 20px 0 24px !important; }
body.pf-system main [data-ds-type='section-title'] { font-size: var(--pf-type-chapter) !important; line-height: 1.15 !important; letter-spacing: -.035em !important; }
body.pf-system main [data-ds-type='subsection-title'] { font-size: var(--pf-type-module) !important; line-height: 1.3 !important; }
body.pf-system main [data-ds-type='card-title'] { font-size: var(--pf-type-card) !important; line-height: 1.3 !important; }
body.pf-system [data-ds-type='body'], body.pf-system .pf-description {
  font: 400 var(--pf-type-body)/1.65 var(--pf-font) !important; color: var(--pf-muted) !important;
  letter-spacing: 0 !important; max-width: 60ch !important; margin: 12px 0 0 !important;
}
body.pf-system .pf-project-hero [data-ds-type='intro'] {
  font: 400 20px/1.65 var(--pf-font) !important; color: var(--pf-muted) !important;
  max-width: 44ch !important; margin: 0 0 24px !important;
}
body.pf-system [data-ds-type='caption'],
body.pf-system [data-ds-type='caption'] :is(p,span,small):not(:where([data-design-evidence] *)) {
  font: 400 var(--pf-type-caption)/1.6 var(--pf-font) !important; letter-spacing: 0 !important;
  color: var(--pf-muted) !important;
}
body.pf-system [data-ds-type='label'],
body.pf-system main [data-ds-type='label'] :is(span,small):not(:where([data-design-evidence] *)),
body.pf-system :is(code,kbd):not(:where([data-design-evidence] *)) {
  font: 400 var(--pf-type-label)/1.5 var(--pf-mono) !important; color: var(--pf-muted) !important;
  letter-spacing: .06em !important; text-transform: uppercase;
}
body.pf-system [data-ds-type='control'] {
  font: 500 var(--pf-type-control)/1.5 var(--pf-font) !important; letter-spacing: 0 !important;
}
body.pf-system :is(strong,b):not(:where([data-design-evidence] *)) { font-family: var(--pf-font) !important; font-weight: 500 !important; }
body.pf-system :is(span,div,a):not(:where([data-design-evidence],[data-design-evidence] *)) { line-height: 1.6; }
body.pf-system [data-ds-surface]:not(.pf-chapter):not(.pf-project-hero) {
  background-color: var(--pf-surface) !important; background-image: none !important;
  color: var(--pf-ink) !important;
}
body.pf-system [data-ds-rounded='box'] { border-radius: var(--pf-radius) !important; }
body.pf-system [data-ds-shadow] { box-shadow: none !important; }
body.pf-system [data-ds-gap='regular'] { gap: 24px !important; }
body.pf-system [data-ds-gap='small'] { gap: 12px !important; }
body.pf-system [data-ds-module] { margin-top: var(--pf-module) !important; }
body.pf-system :is(.reading-thread,.nav-thread,.reading-progress,.chapter-number,.chapter-emblem) { display: none !important; }
body.pf-system section[id], body.pf-system [id] { scroll-margin-top: 24px !important; }
body:has(> main).pf-system { padding-top: 0 !important; }

/* One section rhythm and one content edge, including nested collections. */
body.pf-system .pf-chapter {
  padding: var(--pf-section) var(--pf-edge) !important;
  border-top: 1px solid var(--pf-border) !important;
  background: var(--pf-canvas) !important;
}
body.pf-system .pf-section-intro {
  gap: 0 !important; margin: 0 0 var(--pf-heading-gap) !important; padding: 0 !important;
}
body.pf-system .pf-section-intro > [data-ds-type='label'] { margin: 0 0 16px !important; }
body.pf-system .pf-section-intro > :is(h2,h3) { margin: 0 !important; }
body.pf-system .pf-section-intro > .pf-description { margin: 12px 0 0 !important; }
body.pf-system :is(.micro-heading,.example-heading,.system-heading,.comparison-heading,.ux-flow-heading,.ss-components-heading) {
  padding: 0 !important; gap: 12px 24px !important; margin-bottom: 24px !important;
  border: 0 !important; align-items: baseline;
}
body.pf-system .pf-panel {
  padding: var(--pf-panel-padding) !important; border: 1px solid var(--pf-border) !important;
  border-radius: 8px !important; box-shadow: none !important;
  background: var(--pf-surface) !important;
}
body.pf-system :is(.ui-shot,.gameplay-card,.shot,.story-shot,.world-chapter).pf-panel { padding: 0 !important; overflow: hidden; }
body.pf-system :is(.ui-shot > figcaption,.gameplay-copy,.shot > figcaption,.story-shot > figcaption) {
  padding: 20px 24px !important; margin: 0 !important;
  border-top: 0 !important;
  background: var(--pf-surface) !important; color: var(--pf-muted) !important;
}
body.pf-system :is(.ui-shot > figcaption,.gameplay-copy) h3 { margin: 8px 0 !important; }
body.pf-system .reason-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px !important; margin-bottom: 24px !important; max-width: none; }
body.pf-system .reason-label > span { padding: 0 !important; background: none !important; border: 0 !important; font: 400 var(--pf-type-label)/1.5 var(--pf-mono) !important; color: var(--pf-muted) !important; }
body.pf-system .pf-project-hero { gap: 64px !important; padding-block: 72px !important; min-height: 580px !important; }
body.pf-system .pf-project-copy { padding-top: 48px !important; }
body.pf-system .pf-project-media { background: var(--pf-soft) !important; }

/* Control geometry and interaction states are owned by button-hierarchy.css. */
body.pf-system a:not(:where([data-design-evidence] *)) { color: var(--pf-ink); }

/* Layout adapters: preserve the existing evidence arrangements while making
   their surrounding spacing and labels follow the same rules. */
body.pf-system.pf-unified[data-portfolio='pawsitive'] #interaction-design :is(#ux,#final-result) { padding: var(--pf-module) 0 !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #interaction-design .pf-section-intro { margin-bottom: var(--pf-heading-gap) !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #interaction-design #ux { padding-top: 0 !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] #ux-flow { margin-top: 0 !important; }
body.pf-system .flow-artifact .flow-subtitle { margin-top: var(--pf-module) !important; margin-bottom: 24px !important; }
body.pf-system #design-system #selection-motion { padding-top: var(--pf-module) !important; }
body.pf-system .screen-card figcaption b { font: 500 21px/1.3 var(--pf-font) !important; color: var(--pf-ink); }
body.pf-system .chapter-copy { padding-top: 20px; }
body.pf-system .cat-label { font-family: var(--pf-font); }
body.pf-system .cat-stage { border: 1px solid var(--pf-border); border-radius: 8px !important; }
body.pf-system .cat-stage .cat-label { background: var(--pf-surface) !important; }
body.pf-system .viewport-picker h3 { font: 500 25px/1.3 var(--pf-font) !important; }
body.pf-system :is(.phase-copy > span,.analyst-brief > div > span,.scope,.platform-note) { font: 400 var(--pf-type-label)/1.5 var(--pf-mono) !important; color: var(--pf-muted) !important; }
body.pf-system .scope { gap: 12px 16px !important; }
body.pf-system .scope span { font: inherit !important; color: inherit !important; }
body.pf-system :is(.journey-strip,.compact-journey,.sitemap-board,.compact-flow,.compact-task,.service-drawing) :is(p,span,small,li,div) { font-family: var(--pf-font) !important; font-size: 16px !important; line-height: 1.5 !important; }
body.pf-system .hero-composition.pf-project-media figcaption { font: 400 var(--pf-type-label)/1.5 var(--pf-mono) !important; }
body.pf-system .premise { padding-block: 32px; }
body.pf-system .premise > span, body.pf-system .premise > div > span { font: 400 var(--pf-type-label)/1.5 var(--pf-mono) !important; color: var(--pf-muted); }

/* Small annotations and nested text use the same explicit scale. */
body.pf-system main [data-ds-type='detail'] { font: 400 15px/1.5 var(--pf-font) !important; letter-spacing: 0 !important; }
body.pf-system main [data-ds-type='text'] { font: 400 var(--pf-type-body)/1.65 var(--pf-font) !important; letter-spacing: 0 !important; }
body.pf-system main [data-ds-type='value'] { font: 500 32px/1.2 var(--pf-font) !important; letter-spacing: -.025em !important; }
body.pf-system .pf-section-intro + * { margin-top: 0 !important; }
body.pf-system .screen-tab-label { font: 500 var(--pf-type-control)/1.5 var(--pf-font) !important; }
body.pf-system .source-hud-tabs button strong { font: 500 var(--pf-type-control)/1.5 var(--pf-font) !important; }
body.pf-system .option-name b { font: 500 15px/1.5 var(--pf-font) !important; }

/* Homepage: retain the artwork and gallery while sharing the editorial scale. */
html:has(body[data-portfolio='home']) { overflow-x: clip; }
body[data-portfolio='home'] { font-family: var(--pf-font); --mono: var(--pf-mono); }
body[data-portfolio='home'] .lead { font: 400 20px/1.65 var(--pf-font); }
body[data-portfolio='home'] :is(.nav,.work-head,.panel-kind,.panel-n,.social) { font: 400 15px/1.5 var(--pf-mono); letter-spacing: .06em; }
body[data-portfolio='home'] .panel-title { font: 500 40px/1.15 var(--pf-font); letter-spacing: -.035em; margin: 12px 0; }
body[data-portfolio='home'] .panel-roles { font: 400 16px/1.6 var(--pf-font); letter-spacing: 0; }
body[data-portfolio='home'] .contact .cta { font: 500 40px/1.15 var(--pf-font); letter-spacing: -.035em; }
body[data-portfolio='home'] .hero { padding-bottom: var(--pf-section); }
body[data-portfolio='home'] .contact { padding-top: var(--pf-section); padding-bottom: 64px; }

@media (max-width: 700px) {
  body[data-portfolio='home'] .work-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  body[data-portfolio='home'] .lead { font-size: 18px; }
  body[data-portfolio='home'] :is(.panel-title,.contact .cta) { font-size: 30px; }
  /* Responsive foundation values live in tokens.css. */
  body.pf-system main [data-ds-type='section-title'] { font-size: var(--pf-type-chapter) !important; }
  body.pf-system main [data-ds-type='subsection-title'] { font-size: var(--pf-type-module) !important; }
  body.pf-system .pf-project-hero [data-ds-type='hero-title'] { font-size: 48px !important; }
  body.pf-system .pf-project-hero [data-ds-type='intro'] { font-size: 18px !important; }
  body.pf-system .pf-project-hero { padding-block: 40px !important; gap: 32px !important; min-height: 0 !important; }
  body.pf-system .pf-project-copy { padding-top: 0 !important; }
  body.pf-system .pf-panel { padding: 20px !important; }
  body.pf-system .pf-section-intro { margin-bottom: 32px !important; }
  body.pf-system.pf-unified[data-portfolio='pawsitive'] #interaction-design .pf-section-intro { margin-bottom: 32px !important; }
  body.pf-system :is(.ui-shot > figcaption,.gameplay-copy,.shot > figcaption,.story-shot > figcaption) { padding: 16px 20px !important; }
  body.pf-system [data-ds-gap='regular'] { gap: 20px !important; }
  body.pf-system .pf-project-hero[data-ds-gap='regular'] { gap: 32px !important; }
  body.pf-system :is(.micro-heading,.example-heading) { flex-wrap: wrap; }
}

/* Text selection takes the project's accent behind dark ink, as the original Femme Fatale page did with gold on black. */
body.pf-system ::selection { background: var(--project-selection, var(--project-bright, #d0ad72)); color: #0b0b0b !important; -webkit-text-fill-color: #0b0b0b; text-shadow: none; }
body.pf-system ::-moz-selection { background: var(--project-selection, var(--project-bright, #d0ad72)); color: #0b0b0b !important; text-shadow: none; }