/* Deft Digital Media — People page (Daniel, October 18, 2026). design-system/DECISIONS.md: studio light, Sunflower as a
   fill on light and text only on obsidian, Geist, contour light, the white 1px glowing rim on dark. Uses home.css tokens,
   people.css (minis + topic chips), light.css (contour, portal) and Home's .ddm-obsidian chapter. Page: pages/about.html. */

/* ---------- Opening: light backdrop with the minis ---------- */
.ddm-x .ddm-pp-top { position:relative; padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) 0 clamp(88px,10vw,150px); }
.ddm-x .ddm-pp-digits { opacity:.85; -webkit-mask:radial-gradient(70% 80% at 100% 30%,#000 20%,transparent 100%); mask:radial-gradient(70% 80% at 100% 30%,#000 20%,transparent 100%); }
.ddm-x .ddm-pp-top > .ddm-grain { -webkit-mask:linear-gradient(180deg,#000 70%,transparent); mask:linear-gradient(180deg,#000 70%,transparent); }
.ddm-x .ddm-pp-title { font-size:clamp(2.8rem,5.6vw,5.4rem); line-height:.9; letter-spacing:-.058em; margin-bottom:28px; }
.ddm-x .ddm-pp-title > span:not(.ddm-in-w) { display:block; }
.ddm-x .ddm-pp-title .ddm-mark { white-space:nowrap; background-image:linear-gradient(transparent 20%,var(--sun) 20%,var(--sun) 90%,transparent 90%); }
.ddm-x .ddm-pp-head > p:not(.ddm-eyebrow) { font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ink-2); max-width:42ch; }
/* The figure captions are h2s here (the page's h1 is the heading); sized like Home's h3 */
.ddm-x .ddm-pp-mini-name { font-size:1.25rem; line-height:1.1; letter-spacing:-.02em; }

/* ---------- Story: one obsidian chapter ---------- */
.ddm-x .ddm-pp-story .ddm-digits { -webkit-mask:radial-gradient(ellipse 60% 70% at 85% 35%,#000 15%,transparent 70%); mask:radial-gradient(ellipse 60% 70% at 85% 35%,#000 15%,transparent 70%); }
.ddm-x .ddm-pp-story-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:end; }
.ddm-x .ddm-pp-story .ddm-head { margin-bottom:0; }
.ddm-x .ddm-pp-story h2 > span:not(.ddm-in-w) { display:block; }
.ddm-x .ddm-pp-story .ddm-head > p:not(.ddm-eyebrow) { max-width:48ch; }
.ddm-x .ddm-pp-facts { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0; }
/* Fact tiles wear the Services rim: one crisp white 1px line with a soft white glow */
.ddm-x .ddm-pp-fact { padding:26px 24px 24px; border-radius:var(--radius); border:1px solid rgb(255 255 255/.92); background:rgb(255 255 255/.03);
  box-shadow:0 0 1.5px #fff, 0 0 8px rgb(255 255 255/.45), inset 0 0 14px rgb(255 255 255/.1); }
.ddm-x .ddm-pp-fact dt { display:flex; align-items:baseline; gap:10px; }
.ddm-x .ddm-pp-fact b { font-size:clamp(3.6rem,6vw,5.4rem); line-height:.85; font-weight:600; letter-spacing:-.06em; color:var(--sun); font-variant-numeric:tabular-nums; }
.ddm-x .ddm-pp-fact dt span { font:500 .75rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-2); }
.ddm-x .ddm-pp-fact dd { margin:16px 0 0; color:var(--on-dark-2); font-size:.95rem; line-height:1.45; }
.ddm-x .ddm-pp-means { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,48px); list-style:none; margin-top:clamp(64px,8vw,112px); padding:0; }
.ddm-x .ddm-pp-means li { padding-top:22px; border-top:1px solid var(--line-dark); }
.ddm-x .ddm-pp-means h3 { color:#fff; font-size:1.3rem; }
.ddm-x .ddm-pp-means p { margin:12px 0 0; color:var(--on-dark-2); max-width:36ch; }

/* ---------- Direct line: one compact row per founder (Daniel, Oct 18; the tall cards are in source/archive/people-cards-pre-photo-2026-10-18/) ---------- */
.ddm-x .ddm-pp-direct { background:var(--canvas); }
.ddm-x .ddm-pp-direct h2 > span:not(.ddm-in-w) { display:block; }
.ddm-x .ddm-pp-rows { display:grid; gap:clamp(12px,1.6vw,20px); }
.ddm-x .ddm-pp-row { display:grid; grid-template-columns:clamp(160px,14vw,200px) minmax(0,1fr); gap:16px clamp(20px,3vw,40px); align-items:start; padding:clamp(18px,2vw,26px); border-radius:var(--radius); background:var(--paper); scroll-margin-top:calc(var(--nav-h) + 24px);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.07), 0 24px 48px -32px rgb(0 0 0/.3); }
.ddm-x .ddm-pp-row:target::before { opacity:1; animation:ddm-rim-trace 2.1s cubic-bezier(.5,.05,.3,1) .2s 1 both; }
.ddm-x .ddm-pp-who { display:flex; align-items:center; gap:18px; min-width:0; }
/* Tall rounded portrait down the row's left side (Daniel, 2026-10-19: round crops were too close; --fy = vertical focus) */
.ddm-x .ddm-pp-face { grid-row:1 / span 3; position:relative; overflow:hidden; aspect-ratio:4 / 5; border-radius:18px; background:#D9D9D6; box-shadow:inset 0 0 0 1px rgb(17 17 17/.06), 0 14px 28px -18px rgb(0 0 0/.45); }
.ddm-x .ddm-pp-face img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% var(--fy, 15%); }
.ddm-x .ddm-pp-row h3 { font-size:clamp(1.3rem,1.9vw,1.6rem); }
.ddm-x .ddm-pp-role { margin:5px 0 0; font:500 .68rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-pp-reach { display:grid; grid-template-columns:auto minmax(0,1.4fr) auto auto; gap:8px; margin:0; padding:0; list-style:none; }
.ddm-x .ddm-pp-reach a { display:flex; align-items:center; gap:12px; height:100%; min-height:56px; padding:8px 14px; border-radius:14px; background:#fff;
  box-shadow:inset 0 0 0 1px rgb(17 17 17/.08), 0 6px 14px -10px rgb(0 0 0/.25); transition:transform .45s var(--ease), box-shadow .3s var(--ease); }
.ddm-x .ddm-pp-reach a.ddm-contour::before { inset:-1px; padding:2px; }
.ddm-x .ddm-pp-reach a:hover, .ddm-x .ddm-pp-reach a:focus-visible { transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgb(17 17 17/.14), 0 14px 24px -14px rgb(0 0 0/.35); }
.ddm-x .ddm-pp-reach svg { flex:none; width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.ddm-x .ddm-pp-reach span { display:grid; min-width:0; font-size:.95rem; font-weight:500; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-pp-reach small { font:500 .6rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
/* More about: native disclosure, a quiet link under the row */
.ddm-x .ddm-pp-more { position:relative; grid-column:2; border-top:1px solid var(--line); padding-top:12px; }
.ddm-x .ddm-pp-more summary { display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none; font-weight:500; font-size:.92rem; padding-bottom:4px; background:linear-gradient(var(--sun),var(--sun)) left bottom / 100% 3px no-repeat; } /* one underline under the label and the + */
.ddm-x .ddm-pp-more summary::-webkit-details-marker { display:none; }
.ddm-x .ddm-pp-more summary::after { content:"+"; font:500 1rem/1 var(--mono); transition:rotate .3s var(--ease); }
.ddm-x .ddm-pp-more[open] summary::after { rotate:45deg; }
.ddm-x .ddm-pp-more-in { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,48px); padding:14px 0 4px; }
.ddm-x .ddm-pp-bio { margin:0; color:var(--ink-2); font-size:.96rem; line-height:1.55; }

/* ---------- Save contact: same row as email and phone, quieter ---------- */
.ddm-x .ddm-pp-reach a.ddm-pp-save { min-height:48px; background:transparent; box-shadow:inset 0 0 0 1px rgb(17 17 17/.14); }
.ddm-x .ddm-pp-reach a.ddm-pp-save:hover, .ddm-x .ddm-pp-reach a.ddm-pp-save:focus-visible { background:#fff; }

/* ---------- Count-in (scripts/people-page.js): the numbers roll out of digits, then land with a small settle ---------- */
.ddm-x .ddm-pp-fact b { display:inline-block; min-width:.62em; transition:opacity .3s, scale .5s cubic-bezier(.34,1.45,.64,1); }
.ddm-x .ddm-pp-fact b.is-waiting { opacity:0; }
.ddm-x .ddm-pp-fact b.is-rolling { color:rgb(255 255 255/.55); }
.ddm-x .ddm-pp-fact b.is-landed { scale:1.08; }

/* Languages and the personal line on each card (Daniel, Oct 18) */
.ddm-x .ddm-pp-lang { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }
.ddm-x .ddm-pp-lang span { padding:4px 8px; border-radius:6px; font:500 .62rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); background:rgb(17 17 17/.05); }
.ddm-x .ddm-pp-off { margin:0; color:var(--ink-2); font-size:.92rem; line-height:1.5; }
/* Off the clock label sits level with "More about" so both paragraphs start together (Daniel, 2026-10-19); stacked again on phones */
.ddm-x .ddm-pp-off b { position:absolute; top:16px; display:inline; white-space:nowrap; font:500 .62rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-pp-direct .ddm-head > p a.ddm-link { display:inline; color:var(--ink); }

/* Dark contact cards with their own number field, on the light section (Daniel, 2026-10-19) */
.ddm-x .ddm-pp-row { overflow:hidden; background:var(--obsidian); color:var(--on-dark); box-shadow:inset 0 0 0 1px rgb(255 255 255/.08), 0 30px 60px -34px rgb(0 0 0/.55); }
.ddm-x .ddm-pp-row > :not(.ddm-digits) { position:relative; z-index:1; }
.ddm-x .ddm-pp-row .ddm-digits { opacity:.6; -webkit-mask:radial-gradient(ellipse 50% 85% at 92% 30%,#000 10%,transparent 72%); mask:radial-gradient(ellipse 50% 85% at 92% 30%,#000 10%,transparent 72%); }
.ddm-x .ddm-pp-row h3 { color:#fff; }
.ddm-x .ddm-pp-row :is(.ddm-pp-role,.ddm-pp-off b,.ddm-pp-reach small) { color:var(--on-dark-2); }
.ddm-x .ddm-pp-row .ddm-pp-lang span { color:var(--on-dark); background:rgb(255 255 255/.08); }
.ddm-x .ddm-pp-row .ddm-pp-reach a { color:#fff; background:rgb(255 255 255/.06); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgb(255 255 255/.12); }
.ddm-x .ddm-pp-row .ddm-pp-reach a:is(:hover,:focus-visible) { background:rgb(255 255 255/.11); box-shadow:inset 0 0 0 1px rgb(255 255 255/.22), 0 14px 24px -14px rgb(0 0 0/.6); }
.ddm-x .ddm-pp-row .ddm-pp-reach a.ddm-pp-save { background:transparent; box-shadow:inset 0 0 0 1px rgb(255 255 255/.2); }
.ddm-x .ddm-pp-row .ddm-pp-reach a.ddm-pp-save:is(:hover,:focus-visible) { background:rgb(255 255 255/.08); }
.ddm-x .ddm-pp-row .ddm-pp-reach svg { stroke:#fff; }
/* Sunflower accents (Daniel, 2026-10-19): the "Text (best)" label, and Save to my phone filled like the raised Sunflower buttons */
.ddm-x .ddm-pp-row .ddm-pp-reach li:first-child small { color:var(--sun); }
.ddm-x .ddm-pp-row .ddm-pp-reach a.ddm-pp-save { color:var(--ink); background:var(--sun-sheen), var(--sun); box-shadow:var(--sun-depth); }
.ddm-x .ddm-pp-row .ddm-pp-reach a.ddm-pp-save:is(:hover,:focus-visible) { background:var(--sun-sheen), #FFD233; box-shadow:var(--sun-depth), 0 14px 26px -14px rgb(255 199 0/.6); }
.ddm-x .ddm-pp-row .ddm-pp-reach a.ddm-pp-save small { color:rgb(17 17 17/.62); }
.ddm-x .ddm-pp-row .ddm-pp-reach a.ddm-pp-save svg { stroke:var(--ink); }
.ddm-x .ddm-pp-row .ddm-pp-more { border-top-color:var(--line-dark); }
.ddm-x .ddm-pp-row .ddm-pp-more summary { color:#fff; }
.ddm-x .ddm-pp-row :is(.ddm-pp-bio,.ddm-pp-off) { color:var(--on-dark-2); }
.ddm-x .ddm-pp-row :is(a,summary):focus-visible { outline-color:#fff; }

/* Portrait hover: the photo eases in a touch and brightens, the frame lifts (Daniel, 2026-10-19) */
.ddm-x .ddm-pp-face { transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.ddm-x .ddm-pp-face img { transition:scale 1.1s var(--ease), filter .6s var(--ease); transform-origin:50% 25%; }
.ddm-x .ddm-pp-face::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgb(255 255 255/.18); opacity:0; transition:opacity .6s var(--ease); }
.ddm-x .ddm-pp-face:hover { transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgb(17 17 17/.06), 0 26px 40px -22px rgb(0 0 0/.75), 0 0 0 1px rgb(255 199 0/.35); }
.ddm-x .ddm-pp-face:hover img { scale:1.06; filter:brightness(1.05) saturate(1.05); }
.ddm-x .ddm-pp-face:hover::after { opacity:1; }
/* More about: the panel grows open and closed instead of snapping (Chrome's ::details-content; elsewhere it just opens), text fades in (opacity only: a transform would move the Off the clock label) */
.ddm-x .ddm-pp-more { interpolate-size:allow-keywords; }
.ddm-x .ddm-pp-more::details-content { block-size:0; overflow:clip; transition:block-size .7s var(--ease), content-visibility .7s allow-discrete; }
.ddm-x .ddm-pp-more[open]::details-content { block-size:auto; }
.ddm-x .ddm-pp-more-in > * { opacity:0; transition:opacity .5s var(--ease) .1s; }
.ddm-x .ddm-pp-more[open] .ddm-pp-more-in > * { opacity:1; }
.ddm-x .ddm-pp-more[open] .ddm-pp-more-in > :nth-child(2) { transition-delay:.18s; }
@starting-style { .ddm-x .ddm-pp-more[open] .ddm-pp-more-in > * { opacity:0; } }

/* ---------- Who you'll meet, and when: four stages, one lane per founder ---------- */
.ddm-x .ddm-pp-path { padding-bottom:clamp(40px,5vw,72px); }
.ddm-x .ddm-pp-path h2 > span:not(.ddm-in-w) { display:block; }
.ddm-x .ddm-pp-lanes { display:grid; gap:0; }
.ddm-x .ddm-pp-lanes-head, .ddm-x .ddm-pp-stage { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) minmax(0,1.6fr); gap:clamp(16px,3vw,48px); }
.ddm-x .ddm-pp-lanes-head { padding-bottom:14px; font:500 .7rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-pp-lanes-head i { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; vertical-align:1px; }
.ddm-x .ddm-pp-lanes-head i.is-camila { background:var(--ink); }
.ddm-x .ddm-pp-lanes-head i.is-daniel { background:var(--sun); box-shadow:inset 0 0 0 1px rgb(17 17 17/.2); }
.ddm-x .ddm-pp-stage { padding:26px 0; border-top:1px solid var(--line); align-items:start; }
.ddm-x .ddm-pp-stage:last-child { border-bottom:1px solid var(--line); }
.ddm-x .ddm-pp-stage h3 { font-size:clamp(1.3rem,2vw,1.7rem); }
.ddm-x .ddm-pp-stage p { margin:0; color:var(--ink-2); line-height:1.5; }
.ddm-x .ddm-pp-stage p b { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* the lane heads name them on wide screens */

/* ---------- Smaller screens ---------- */
@media (max-width:1080px) {
  .ddm-x .ddm-pp-row { grid-template-columns:clamp(130px,20vw,170px) minmax(0,1fr); }
  .ddm-x .ddm-pp-reach { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .ddm-x .ddm-pp-lanes-head { display:none; }
  .ddm-x .ddm-pp-stage { grid-template-columns:1fr; gap:10px; }
  .ddm-x .ddm-pp-stage p b { position:static; width:auto; height:auto; clip-path:none; display:block; font:500 .62rem/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
  .ddm-x .ddm-pp-story-grid { grid-template-columns:1fr; align-items:start; }
  .ddm-x .ddm-pp-means { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .ddm-x .ddm-pp-top .ddm-topics { display:none; } /* Daniel, 2026-10-19: no topic chips under the intro on phones */
  .ddm-x .ddm-pp-row { grid-template-columns:104px minmax(0,1fr); }
  .ddm-x .ddm-pp-face { grid-row:1; }
  .ddm-x :is(.ddm-pp-reach,.ddm-pp-more) { grid-column:1 / -1; }
  .ddm-x .ddm-pp-more-in { grid-template-columns:1fr; }
  .ddm-x .ddm-pp-off b { position:static; display:block; margin-bottom:4px; }
  /* Phone: Text and Call side by side, email and Save full width */
  .ddm-x .ddm-pp-reach { grid-template-columns:1fr 1fr; }
  .ddm-x .ddm-pp-reach li:nth-child(2) { order:3; grid-column:1 / -1; }
  .ddm-x .ddm-pp-reach li:nth-child(3) { order:2; }
  .ddm-x .ddm-pp-reach li:nth-child(4) { order:4; grid-column:1 / -1; }
  .ddm-x .ddm-pp-reach a { padding:8px 12px; gap:10px; }
  .ddm-x .ddm-pp-reach span { font-size:.9rem; }
  .ddm-x .ddm-pp-facts { gap:10px; }
  .ddm-x .ddm-pp-fact { padding:20px 16px 18px; }
}
@media (prefers-reduced-motion:reduce) { .ddm-x .ddm-pp-reach a { transition:none; } .ddm-x .ddm-pp-reach a:is(:hover,:focus-visible) { transform:none; } .ddm-x .ddm-pp-row:target::before { animation:none; } .ddm-x :is(.ddm-pp-face,.ddm-pp-face img,.ddm-pp-more::details-content,.ddm-pp-more-in > *) { transition:none; } .ddm-x .ddm-pp-face:hover { transform:none; } .ddm-x .ddm-pp-face:hover img { scale:1; } }
@media (forced-colors:active) { .ddm-x :is(.ddm-pp-row,.ddm-pp-fact,.ddm-pp-reach a) { border:1px solid CanvasText; } .ddm-x .ddm-pp-reach svg { stroke:CanvasText; } }