/* ═══════════════════════════════════════════════════════════════════
   /repository: the Projects page (templates/repository.html,
   static/js/projects.js). Approved design "page-projects-r2" (Tassy,
   2026-10-08): hero option 1 "Desk", review option 1 "Deck".
   1. hero on the brand gradient: "Projects, demos and papers", the lede,
      Apply / Join the waitlist, and three drawn artefacts (paper, live demo
      window, code repository); one comes to the front every ~3 s;
   2. while nothing is public: ONE empty state, "Still in review", with a
      face-down deck sized by the approved-proposal count; one card flips
      every ~3 s (type chip, redaction bars, "In review");
      once something is public: the listing (its rules are inline in the
      template and unchanged).

   Scoped to .dfpj. Every colour is a token from df-tokens.css or a
   color-mix of tokens (tests/test_theme_tokens.py forbids raw values).
   Flat: no outline borders on cards, no hard offset shadows.
   ═══════════════════════════════════════════════════════════════════ */

.dfpj {
    --pj-ease: cubic-bezier(.23, 1, .32, 1);
    --pj-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --pj-on: var(--df-on-navy);
    --pj-on-2: color-mix(in srgb, var(--df-on-navy) 86%, transparent);
    --pj-grid-on: color-mix(in srgb, var(--df-on-navy) 4.5%, transparent);
    --pj-gridc: color-mix(in srgb, var(--df-ink) 4%, transparent);
    /* the artefacts: window/repo surface, their inner panel, the paper sheet */
    --pj-art: var(--df-surface);
    --pj-artp: var(--df-public-panel);
    --pj-sheet: var(--df-surface);
    --pj-sheet-ink: var(--df-ink);
    --pj-sha: 0 30px 60px -28px color-mix(in srgb, var(--df-navy) 55%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--df-navy) 12%, transparent);
    --pj-sh: var(--df-shadow);
    --pj-mvp: var(--df-achieve);
    --pj-mvp-soft: color-mix(in srgb, var(--df-achieve-fill) 16%, var(--df-surface));
    max-width: 1304px; margin: 0 auto; padding: 12px 12px clamp(24px, 5vh, 48px);
    display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 20px);
    font-family: var(--df-font-text); color: var(--df-ink);
    overflow-x: clip;
}
[data-theme="dark"] .dfpj {
    --pj-art: color-mix(in srgb, var(--df-ink) 5%, var(--df-surface));
    --pj-artp: var(--df-line);
    /* the paper stays a light sheet in dark, like a printed page */
    --pj-sheet: var(--df-ink);
    --pj-sheet-ink: var(--df-surface);
    --pj-gridc: color-mix(in srgb, var(--df-ink) 3.5%, transparent);
    --pj-sha: 0 30px 60px -28px color-mix(in srgb, var(--df-paper) 85%, transparent);
    --pj-mvp-soft: color-mix(in srgb, var(--df-achieve-fill) 18%, var(--df-surface));
}
.dfpj *, .dfpj *::before, .dfpj *::after { box-sizing: border-box; }
.dfpj :focus-visible { outline: 3px solid var(--df-accent); outline-offset: 3px; border-radius: 8px; }

/* Display recipe and sizes come from the shared type system (df-tokens.css). */
body.public .dfpj .pj-disp {
    font-family: var(--df-font-display); font-stretch: var(--df-display-stretch); font-variation-settings: var(--df-display-wdth); font-weight: var(--df-display-weight);
    text-transform: uppercase; line-height: var(--df-display-lh); letter-spacing: var(--df-display-ls); margin: 0; max-width: none; text-wrap: balance;
}
body.public .dfpj .pj-h1 { font-size: var(--df-type-hero); color: var(--pj-on); }
body.public .dfpj .pj-h2 { font-size: var(--df-type-h2); color: var(--df-ink); }
.dfpj .pj-lede { font-family: var(--df-font-text); font-size: var(--df-type-lede); line-height: var(--df-type-lede-lh); margin: 0; max-width: 42ch; color: var(--df-ink-2); text-wrap: pretty; }
.dfpj .pj-ar { display: inline-block; transition: transform .2s var(--pj-ease); }

/* buttons and links */
.dfpj .pj-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dfpj .pj-b1 { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font: 650 16px var(--df-font-text); text-decoration: none; white-space: nowrap; background: var(--df-on-navy); color: var(--df-navy); transition: transform .2s var(--pj-ease); }
.dfpj .pj-b1:hover { transform: translateY(-1px); color: var(--df-navy); }
.dfpj .pj-b1:active { transform: scale(.97); }
.dfpj .pj-b1:hover .pj-ar, .dfpj .pj-lnk:hover .pj-ar { transform: translateX(3px); }
.dfpj .pj-lnk { font: 650 1.0625rem var(--df-font-text); color: var(--df-accent); text-decoration: none; text-underline-offset: 4px; }
.dfpj .pj-lnk:hover { text-decoration: underline; color: var(--df-accent-deep); }

/* type chips */
.dfpj .pj-chip { display: inline-flex; align-items: center; gap: .5em; padding: .4em .8em .4em .6em; border-radius: 999px; font-weight: 650; white-space: nowrap; line-height: 1; align-self: flex-start; }
.dfpj .pj-chip svg { width: 1.15em; height: 1.15em; flex: none; }
.dfpj .pj-k-r { background: var(--df-accent-soft); color: var(--df-accent); }
.dfpj .pj-k-m { background: var(--pj-mvp-soft); color: var(--pj-mvp); }
.dfpj .pj-k-c { background: color-mix(in srgb, var(--df-ink) 8%, var(--pj-art)); color: var(--df-ink); }

/* redaction bars: one bar per word */
.dfpj .pj-wb { display: flex; flex-wrap: wrap; gap: .45em .35em; align-content: flex-start; }
.dfpj .pj-wb i { height: .72em; border-radius: .36em; background: currentColor; opacity: .16; width: calc(var(--l) * .42em + .3em); }

/* ── 1. Hero ──────────────────────────────────────────────────────── */
.dfpj .pj-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(24px, 4.5vw, 64px); align-items: center;
    min-height: min(720px, calc(100svh - var(--df-nav-h) - 24px));
    padding: clamp(28px, 5svh, 56px) clamp(20px, 4vw, 56px); border-radius: 28px;
    color: var(--pj-on);
    background: linear-gradient(var(--pj-grid-on) 1px, transparent 1px) 0 0 / 48px 48px,
                linear-gradient(90deg, var(--pj-grid-on) 1px, transparent 1px) 0 0 / 48px 48px,
                var(--df-brand-gradient);
}
.dfpj .pj-hero :focus-visible { outline-color: var(--df-on-navy); }
.dfpj .pj-hero .pj-lede { color: var(--pj-on-2); margin: 18px 0 26px; }

/* the desk: three artefacts, sized from their own width */
.dfpj .pj-desk { position: relative; height: clamp(340px, calc(100svh - 300px), 480px); }
.dfpj .pj-slot { position: absolute; z-index: var(--z); transform: translateY(var(--y, 0)) scale(var(--s, 1)); transition: transform .7s var(--pj-ease), filter .5s; }
.dfpj .pj-s-demo { left: 31%; top: 2%; width: 69%; }
.dfpj .pj-s-paper { left: 0; top: 12%; width: 37%; }
.dfpj .pj-s-repo { left: 47%; top: 50%; width: 47%; }
.dfpj .pj-slot.is-back { --s: .96; filter: brightness(.94) saturate(.9); }
[data-theme="dark"] .dfpj .pj-slot.is-back { filter: brightness(.8); }
.dfpj .pj-slot.is-front { --y: -8px; --s: 1.02; }
.dfpj .pj-ar-box { container-type: inline-size; position: relative; color: var(--df-ink); }

/* paper page */
.dfpj .pj-ap { background: var(--pj-sheet); color: var(--pj-sheet-ink); border-radius: 2.4cqi; padding: 7cqi 7.5cqi; aspect-ratio: 1 / 1.3; display: flex; flex-direction: column; gap: 2.6cqi; overflow: hidden; box-shadow: var(--pj-sha); }
.dfpj .pj-ap .pj-chip { font-size: 4cqi; }
[data-theme="dark"] .dfpj .pj-ap .pj-k-r { background: color-mix(in srgb, var(--df-brand-cyan) 16%, var(--pj-sheet)); color: color-mix(in srgb, var(--df-brand-cyan) 70%, var(--df-navy)); }
.dfpj .pj-ap-t { font-size: 8cqi; margin-top: 1cqi; }
.dfpj .pj-ap-t .pj-wb i { opacity: .7; }
.dfpj .pj-ap-h { font: 700 3.3cqi var(--df-font-text); text-transform: uppercase; letter-spacing: .06em; margin-top: 1cqi; opacity: .8; }
.dfpj .pj-ap-l { display: block; height: 1.9cqi; border-radius: 1cqi; background: currentColor; opacity: .14; flex: none; }
.dfpj .pj-ap-l.pj-s { width: 64%; }
.dfpj .pj-ap-f { margin: 1.6cqi 0 0; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.6cqi; }
.dfpj .pj-ap-f svg { flex: 1; min-height: 0; width: 100%; background: color-mix(in srgb, var(--df-brand-cyan) 8%, transparent); border-radius: 2cqi; padding: 3cqi; }
.dfpj .pj-ap-f .pj-acc { color: var(--df-brand-cyan); stroke: var(--df-brand-cyan); }
.dfpj .pj-ap-f .pj-dot { fill: var(--df-brand-cyan); }
.dfpj .pj-ap-f figcaption { font: italic 500 3.1cqi var(--df-font-text); opacity: .6; }

/* browser window running a demo */
.dfpj .pj-aw { background: var(--pj-art); border-radius: 2.6cqi; overflow: hidden; box-shadow: var(--pj-sha); }
.dfpj .pj-aw-bar { display: flex; align-items: center; gap: 1.3cqi; padding: 2.1cqi 2.6cqi; background: var(--pj-artp); }
.dfpj .pj-aw-bar > i { width: 1.7cqi; height: 1.7cqi; border-radius: 50%; background: var(--df-line-strong); opacity: .5; flex: none; }
.dfpj .pj-aw-url { flex: 1; min-width: 0; margin-left: 1.6cqi; display: flex; align-items: center; gap: 1.2cqi; background: var(--pj-art); border-radius: 999px; padding: 1.5cqi 2.6cqi; color: var(--df-ink-3); }
.dfpj .pj-aw-url svg { width: 2.4cqi; height: 2.4cqi; flex: none; }
.dfpj .pj-aw-url em { height: 1.5cqi; width: 46%; border-radius: 1cqi; background: currentColor; opacity: .35; }
.dfpj .pj-app { padding: 3.4cqi 3.6cqi 3.8cqi; display: grid; gap: 2.4cqi; }
.dfpj .pj-app-h { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; min-width: 0; }
.dfpj .pj-app-h .pj-chip { font-size: 2.9cqi; }
.dfpj .pj-app-t { font-size: 4.6cqi; }
.dfpj .pj-app-t .pj-wb i { opacity: .55; }
.dfpj .pj-live { display: inline-flex; align-items: center; gap: 1cqi; padding: .9cqi 2cqi; border-radius: 999px; background: var(--df-ok-soft); color: var(--df-ok); font: 650 2.5cqi var(--df-font-text); flex: none; }
.dfpj .pj-live::before { content: ""; width: 1.4cqi; height: 1.4cqi; border-radius: 50%; background: currentColor; animation: pj-blink 1.6s ease-in-out infinite; }
@keyframes pj-blink { 50% { opacity: .3; } }
.dfpj .pj-app-f { display: flex; gap: 1.2cqi; }
.dfpj .pj-app-f span { padding: 1cqi 2.4cqi; border-radius: 999px; background: var(--pj-artp); font: 600 2.5cqi var(--df-font-text); color: var(--df-ink-2); transition: background .3s, color .3s; }
.dfpj .pj-app-f span.on { background: var(--df-ink); color: var(--pj-art); }
.dfpj .pj-app-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqi; }
.dfpj .pj-app-k span { display: grid; gap: 1.4cqi; padding: 2.2cqi; border-radius: 2cqi; background: var(--pj-artp); }
.dfpj .pj-app-k span::before { content: ""; height: 1.5cqi; width: 55%; border-radius: 1cqi; background: var(--df-ink-3); opacity: .35; }
.dfpj .pj-app-k span::after { content: ""; height: 3.2cqi; width: var(--w, 60%); border-radius: 1cqi; background: var(--c, var(--df-ink)); opacity: .8; transition: width .6s var(--pj-ease); }
.dfpj .pj-app-c { position: relative; display: flex; align-items: flex-end; gap: 1.3cqi; height: 22cqi; padding-bottom: .6cqi; box-shadow: inset 0 -1px 0 var(--df-line); }
.dfpj .pj-app-c i { flex: 1; height: var(--h); border-radius: 1cqi 1cqi 0 0; background: var(--df-cell); transition: height .6s var(--pj-ease); }
.dfpj .pj-app-c i.hi { background: var(--df-accent); }
.dfpj .pj-app-c i.fc { background: repeating-linear-gradient(135deg, var(--df-accent) 0 1.2cqi, transparent 1.2cqi 2.4cqi); opacity: .7; }

/* code repository */
.dfpj .pj-rp { background: var(--pj-art); border-radius: 2.8cqi; padding: 4.4cqi; display: grid; gap: 3.2cqi; box-shadow: var(--pj-sha); }
.dfpj .pj-rp-h { display: flex; align-items: center; gap: 2cqi; color: var(--df-ink-3); min-width: 0; font: 500 3.6cqi var(--pj-mono); }
.dfpj .pj-rp-h > svg { width: 4.4cqi; height: 4.4cqi; flex: none; }
.dfpj .pj-rp-h em { height: 2cqi; width: var(--w); border-radius: 1cqi; background: currentColor; opacity: .4; flex: none; }
.dfpj .pj-rp-h em.pj-strong { background: var(--df-ink); opacity: .55; }
.dfpj .pj-rp-h .pj-chip { margin-left: auto; font-size: 3cqi; }
.dfpj .pj-rp ul { list-style: none; margin: 0; padding: 0; border-radius: 2cqi; overflow: hidden; background: var(--pj-artp); }
.dfpj .pj-rp li { display: flex; align-items: center; gap: 2.2cqi; padding: 1.9cqi 3cqi; font: 500 3.3cqi var(--pj-mono); color: var(--df-ink-2); }
.dfpj .pj-rp li + li { box-shadow: 0 -1px 0 var(--df-line); }
.dfpj .pj-rp li svg { width: 3.8cqi; height: 3.8cqi; flex: none; }
.dfpj .pj-rp li .pj-dir { color: var(--df-accent); }
.dfpj .pj-rp li .pj-fil { color: var(--df-ink-3); }
.dfpj .pj-rp li em { margin-left: auto; height: 1.6cqi; width: var(--w); border-radius: 1cqi; background: var(--df-ink-3); opacity: .25; }
.dfpj .pj-pills { display: flex; gap: 1.8cqi; flex-wrap: wrap; }
.dfpj .pj-pills span { display: inline-flex; align-items: center; padding: 1.8cqi 3.4cqi; border-radius: 999px; font: 650 3.3cqi var(--df-font-text); white-space: nowrap; }
.dfpj .pj-p1 { background: var(--df-ink); color: var(--pj-art); }
.dfpj .pj-p2 { background: var(--pj-artp); color: var(--df-ink); }

/* ── 2. Still in review ───────────────────────────────────────────── */
.dfpj .pj-review {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4.5vw, 64px); align-items: center;
    min-height: min(640px, calc(100svh - 24px));
    padding: clamp(28px, 5svh, 56px) clamp(20px, 4vw, 56px); border-radius: 28px;
    background: linear-gradient(var(--pj-gridc) 1px, transparent 1px) 0 0 / 22px 22px,
                linear-gradient(90deg, var(--pj-gridc) 1px, transparent 1px) 0 0 / 22px 22px,
                var(--df-public-panel);
}
.dfpj .pj-es .pj-lede { margin: 18px 0 22px; }
.dfpj .pj-rv { position: relative; height: clamp(330px, calc(100svh - 220px), 480px); container-type: inline-size; }
.dfpj .pj-r1 { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 6cqi, 64px); height: 100%; }
.dfpj .pj-deck { --px: 1.15px; position: relative; width: clamp(104px, 23cqi, 160px); flex: none; }
.dfpj .pj-cb { aspect-ratio: 3 / 4; border-radius: 14px; position: relative; overflow: hidden; z-index: 2; margin-bottom: -6px; background: var(--df-brand-gradient); }
.dfpj .pj-cb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--pj-grid-on) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, var(--pj-grid-on) 1px, transparent 1px) 0 0 / 14px 14px; }
.dfpj .pj-cb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url("../images/dataraflow-logo.svg") center / contain no-repeat; opacity: .9; }
[data-theme="dark"] .dfpj .pj-cb { background: color-mix(in srgb, var(--df-ink) 7%, var(--df-surface)); }
/* the deck's edge: one line per `per` proposals (the template caps it at
   200 lines), so the drawn height stays bounded however many there are;
   the stripes are a fixed period so they stay crisp at any line height */
.dfpj .pj-deck-e { height: calc(var(--lines) * var(--px)); margin: 0 3px; border-radius: 0 0 12px 12px; background: repeating-linear-gradient(180deg, var(--df-surface) 0 1.6px, color-mix(in srgb, var(--df-line-strong) 55%, var(--df-surface)) 1.6px 2.6px); }
.dfpj .pj-deck-n { position: absolute; right: calc(100% + 10px); bottom: 0; height: calc(var(--lines) * var(--px) + 6px); display: flex; align-items: center; font: 600 12px var(--pj-mono); color: var(--df-ink-3); font-variant-numeric: tabular-nums; }
.dfpj .pj-deck-n::after { content: ""; position: absolute; right: -6px; top: 6px; bottom: 0; width: 2px; border-radius: 2px; background: var(--df-line); }
.dfpj .pj-face { width: clamp(160px, 38cqi, 260px); aspect-ratio: 3 / 4; flex: none; position: relative; }
.dfpj .pj-face-in { position: absolute; inset: 0; }
.dfpj .pj-slotg { position: absolute; inset: 0; border-radius: 16px; background: color-mix(in srgb, var(--df-ink) 4%, transparent); }
.dfpj .pj-fcard { position: absolute; inset: 0; border-radius: 16px; background: var(--df-surface); color: var(--df-ink); box-shadow: var(--pj-sh); padding: clamp(14px, 4cqi, 24px); display: flex; flex-direction: column; gap: clamp(10px, 2.4cqi, 16px); font-size: clamp(11px, 2.5cqi, 15px); transform-origin: left center; }
.dfpj .pj-fcard .pj-chip { font-size: inherit; }
.dfpj .pj-fcard .pj-wb { font-size: clamp(17px, 5.6cqi, 26px); margin-top: 4px; }
.dfpj .pj-ft { margin-top: auto; display: flex; align-items: center; }
.dfpj .pj-st { display: inline-flex; align-items: center; gap: .45em; padding: .38em .75em; border-radius: 999px; background: var(--df-warn-soft); color: var(--df-warn-deep); font-weight: 650; white-space: nowrap; line-height: 1; }
.dfpj .pj-st::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--df-foot-closed); animation: pj-blink 1.8s ease-in-out infinite; }
[data-theme="dark"] .dfpj .pj-st { color: var(--df-warn); }
/* the card back that flies from the deck to the face (projects.js) */
.dfpj .pj-cb.pj-fly { position: fixed; z-index: 20; margin: 0; pointer-events: none; transform-origin: top left; }

/* ── 2b. The listing (once work is public) ────────────────────────── */
.dfpj .pj-list { padding: clamp(28px, 5svh, 48px) 0 0; }
.dfpj .pj-list .df-wrap > .pj-h2 { margin-bottom: 4px; }
.dfpj .pj-list .df-section-tight { padding-top: 24px; }

/* ── 3. On the Articles page (blog.html; Tassy 2026-10-09, moved there
   from the home page): heading and lede beside the same Desk, on the
   review panel's gridded ground. No count, no link. One viewport tall at
   most. ── */
/* in the Articles page's column (.dfb), edge to edge like its other panels */
.df-section.df-projects { padding: 0; scroll-margin-top: calc(var(--df-nav-h) + 8px); }
.dfpj.pj-home { max-width: none; padding: 0; }
.dfpj .pj-hm {
    display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(24px, 4.5vw, 64px); align-items: center;
    min-height: min(640px, calc(100svh - 48px));
    padding: clamp(28px, 5svh, 56px) clamp(20px, 4vw, 56px); border-radius: 28px;
    background: linear-gradient(var(--pj-gridc) 1px, transparent 1px) 0 0 / 22px 22px,
                linear-gradient(90deg, var(--pj-gridc) 1px, transparent 1px) 0 0 / 22px 22px,
                var(--df-public-panel);
}
.dfpj .pj-hm .pj-lede { margin: 18px 0 0; }
.dfpj .pj-hm .pj-desk { height: clamp(320px, calc(100svh - 260px), 460px); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .dfpj { padding: 8px 8px 24px; }
    .dfpj .pj-hero, .dfpj .pj-review { grid-template-columns: minmax(0, 1fr); gap: 18px; border-radius: 22px; align-content: start; min-height: 0; }
    .dfpj .pj-hero { padding: 24px 16px 20px; }
    .dfpj .pj-hero .pj-lede { margin: 10px 0 16px; }
    .dfpj .pj-b1 { padding: 11px 18px; min-height: 44px; font-size: 15px; }
    .dfpj .pj-desk { height: clamp(260px, calc(100svh - 470px), 380px); }
    .dfpj .pj-review { padding: 28px 16px 12px; }
    .dfpj .pj-es .pj-lede { margin: 10px 0 12px; }
    .dfpj .pj-rv { height: clamp(290px, calc(100svh - 440px), 360px); }
    .dfpj .pj-deck { --px: .7px; }
    .dfpj .pj-fcard { border-radius: 12px; }
    .dfpj.pj-home { padding: 0; }
    .dfpj .pj-hm { grid-template-columns: minmax(0, 1fr); gap: 18px; border-radius: 22px; align-content: start; min-height: 0; padding: 24px 16px 20px; }
    .dfpj .pj-hm .pj-lede { margin: 10px 0 0; }
    .dfpj .pj-hm .pj-desk { height: clamp(240px, calc(100svh - 500px), 340px); }
}
@media (max-width: 420px) {
    .dfpj .pj-deck { width: 96px; }
    .dfpj .pj-face { width: min(190px, calc(100cqi - 160px)); }
    .dfpj .pj-r1 { gap: 22px; padding-left: 34px; }
}
@media (hover: none) { .dfpj .pj-b1:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .dfpj *, .dfpj *::before, .dfpj *::after { animation: none !important; transition: none !important; }
}

/* "Check back after Cohort 2 graduates": plain text on the page, no card (Tassy, 2026-10-09). */
.dfpj .pj-later { max-width: 720px; margin: 0 auto; padding: 120px 24px 140px; text-align: center; }
.dfpj .pj-later-eb { margin: 0 0 14px; font: 600 var(--df-type-eyebrow)/1.3 var(--df-font-text); letter-spacing: var(--df-type-eyebrow-ls); text-transform: uppercase; color: var(--df-ink-3); }
.dfpj .pj-later .pj-lede { margin: 20px auto 28px; }
@media (max-width: 600px) { .dfpj .pj-later { padding: 72px 16px 88px; } }