/* Deft Digital Media — Our work and project posts (Daniel, October 18, 2026). design-system/DECISIONS.md: studio light,
   Sunflower as a fill only, Signal Blue as a trace, Geist, contour light. Uses home.css tokens, showcase.css browser frame
   and before/after, light.css contour. Content comes from source/projects/projects.json. */

/* ---------- Shared opening: the hero's light backdrop (grain + one digit layer) ---------- */
.ddm-x :is(.ddm-work,.ddm-post-top) { position:relative; padding-top:calc(var(--nav-h) + clamp(56px,8vw,110px)); }
.ddm-x .ddm-work-digits { height:100%; opacity:.85;
  /* Cleaned up (Daniel, Oct 18): the field sits beside the headline at top right, clears under the title, and only a faint layer
     stays behind the lenses (enough for their arrival ripple), fading out before the list */
  -webkit-mask:radial-gradient(62% 640px at 100% 18%,#000 25%,transparent 100%), linear-gradient(180deg,transparent 0,rgb(0 0 0/.28) 260px,rgb(0 0 0/.28) 65%,transparent) 0 620px/100% calc(100% - 620px) no-repeat;
  mask:radial-gradient(62% 640px at 100% 18%,#000 25%,transparent 100%), linear-gradient(180deg,transparent 0,rgb(0 0 0/.28) 260px,rgb(0 0 0/.28) 65%,transparent) 0 620px/100% calc(100% - 620px) no-repeat; }
.ddm-x .ddm-post-digits { height:min(100%,900px); -webkit-mask:linear-gradient(180deg,#000 30%,transparent 92%),linear-gradient(90deg,transparent 0 30%,#000 80%); -webkit-mask-composite:source-in; mask:linear-gradient(180deg,#000 30%,transparent 92%) intersect,linear-gradient(90deg,transparent 0 30%,#000 80%); opacity:.85; }
.ddm-x .ddm-work > .ddm-grain { -webkit-mask:linear-gradient(180deg,#000 75%,transparent); mask:linear-gradient(180deg,#000 75%,transparent); }
.ddm-x .ddm-post-top > .ddm-grain { height:min(100%,900px); -webkit-mask:linear-gradient(180deg,#000 40%,transparent); mask:linear-gradient(180deg,#000 40%,transparent); }

/* ---------- Our work: index ---------- */
.ddm-x .ddm-work { padding-bottom:clamp(80px,10vw,140px); }
.ddm-x .ddm-work-title, .ddm-x .ddm-post-title { font-size:clamp(3rem,8.2vw,7.4rem); line-height:.88; letter-spacing:-.058em; max-width:12ch; }
.ddm-x .ddm-work-title > span:not(.ddm-in-w) { display:block; color:var(--ink-3); }
/* "real sites" gets Home's Sunflower highlight band instead of gray (Daniel, Oct 18); it swipes in as the heading's words land */
.ddm-x .ddm-work-title > span.ddm-work-l2 { color:var(--ink); }
.ddm-x .ddm-work-title .ddm-mark { background-image:linear-gradient(transparent 20%,var(--sun) 20%,var(--sun) 90%,transparent 90%); background-repeat:no-repeat; background-size:100% 100%; transition:background-size .75s cubic-bezier(.65,0,.35,1); }
/* scripts/work.js holds the band back for a moment and lets it swipe as the words land (its own timer, not the intro's hand-back) */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference) { .ddm-x .ddm-work-title:not(.is-marked) .ddm-mark { background-size:0% 100%; } }
.ddm-x .ddm-work-sub { max-width:46ch; margin:28px 0 0; font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ink-2); }
.ddm-x .ddm-work-index { margin-top:clamp(56px,8vw,104px); }
.ddm-x .ddm-work-cols, .ddm-x .ddm-work-link { display:grid; grid-template-columns:minmax(0,2.4fr) minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,.9fr) 40px; gap:20px; align-items:center; }
.ddm-x .ddm-work-cols { padding:0 0 14px; border-bottom:1px solid var(--line); font:500 .7rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-work-list { list-style:none; margin:0; padding:0; }
.ddm-x .ddm-work-row { border-bottom:1px solid var(--line); }
.ddm-x .ddm-work-link { position:relative; padding:clamp(18px,2.4vw,30px) 0; color:var(--ink-2); transition:color .35s var(--ease); }
.ddm-x .ddm-work-name { font:600 clamp(1.6rem,3.6vw,3rem)/1 var(--sans); letter-spacing:-.045em; color:var(--ink); transition:transform .5s var(--ease); }
.ddm-x :is(.ddm-work-ind,.ddm-work-loc) { font-size:.95rem; }
.ddm-x .ddm-work-meta { font:500 .72rem/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-work-go { justify-self:end; font-size:1.3rem; color:var(--ink); transition:transform .5s var(--ease); }
.ddm-x .ddm-work-link:hover .ddm-work-go, .ddm-x .ddm-work-link:focus-visible .ddm-work-go { transform:translateX(6px); }
.ddm-x .ddm-work-link:focus-visible { outline-offset:6px; }
.ddm-x .ddm-work-thumb { display:none; }
@media (max-width:860px) {
  .ddm-x .ddm-work-cols { display:none; }
  .ddm-x .ddm-work-link { grid-template-columns:1fr auto; grid-template-areas:"thumb thumb" "name go" "ind go" "meta go"; gap:6px 16px; }
  .ddm-x .ddm-work-thumb { grid-area:thumb; display:block; margin-bottom:14px; border-radius:14px; overflow:hidden; box-shadow:0 18px 40px -26px rgb(0 0 0/.45); }
  .ddm-x .ddm-work-thumb img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
  .ddm-x .ddm-work-name { grid-area:name; }
  .ddm-x .ddm-work-ind { grid-area:ind; }
  .ddm-x .ddm-work-loc { display:none; }
  .ddm-x .ddm-work-meta { grid-area:meta; }
  .ddm-x .ddm-work-go { grid-area:go; align-self:center; }
}

/* ---------- Our work: featured windows in the number field (Daniel, Oct 18) ----------
   Screens of mixed sizes cut into the digits, staggered like windows on a wall. Pointing at one plays its site and the
   others soften (DECISIONS.md 5b blur and focus); a click grows it into the post through a lens (scripts/work.js). */
.ddm-x .ddm-feat { position:relative; margin-top:clamp(40px,5vw,72px); }
.ddm-x .ddm-wins { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(16px,2.4vw,36px); row-gap:clamp(48px,6vw,96px); align-items:start; }
.ddm-x .ddm-win:nth-child(8n+1) { grid-column:1 / 8; }
.ddm-x .ddm-win:nth-child(8n+2) { grid-column:9 / 13; margin-top:clamp(40px,9vw,140px); }
.ddm-x .ddm-win:nth-child(8n+3) { grid-column:2 / 6; }
.ddm-x .ddm-win:nth-child(8n+4) { grid-column:7 / 13; margin-top:clamp(-80px,-4vw,-20px); }
.ddm-x .ddm-win:nth-child(8n+5) { grid-column:1 / 7; }
.ddm-x .ddm-win:nth-child(8n+6) { grid-column:8 / 12; margin-top:clamp(30px,7vw,110px); }
.ddm-x .ddm-win:nth-child(8n+7) { grid-column:3 / 8; }
.ddm-x .ddm-win:nth-child(8n+8) { grid-column:9 / 13; margin-top:clamp(-60px,-3vw,-16px); }
.ddm-x .ddm-win-link { display:block; color:inherit; }
.ddm-x .ddm-win-frame { position:relative; display:block; border-radius:14px; overflow:hidden; background:#fff;
  /* backlit glass, light version: white inner rim, soft halo */
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.9), 0 0 0 1px rgb(17 17 17/.06), 0 1px 2px rgb(0 0 0/.06), 0 34px 70px -34px rgb(0 0 0/.42);
  transition:filter .6s var(--ease), transform .7s var(--ease), box-shadow .6s var(--ease); }
.ddm-x .ddm-win-bar { display:flex; align-items:center; gap:5px; height:26px; padding:0 12px; border-bottom:1px solid var(--line); background:var(--paper); font:500 10px var(--mono); color:var(--ink-3); white-space:nowrap; overflow:hidden; }
.ddm-x .ddm-win-bar i { flex:none; width:7px; height:7px; border-radius:50%; background:rgb(17 17 17/.16); }
.ddm-x .ddm-win-bar span { margin-left:8px; padding:2px 10px; border-radius:999px; background:var(--canvas); overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-win-screen { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#111; }
.ddm-x .ddm-win-screen :is(img,video) { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.ddm-x .ddm-win-screen video { opacity:0; transition:opacity .5s var(--ease); }
.ddm-x .ddm-win-screen video.is-playing { opacity:1; }
.ddm-x .ddm-win-cap { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-top:14px; transition:opacity .5s var(--ease); }
.ddm-x .ddm-win-cap b { font:600 clamp(1.05rem,1.5vw,1.3rem)/1.15 var(--sans); letter-spacing:-.03em; }
.ddm-x .ddm-win-cap small { font:500 .68rem/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-win-link:focus-visible { outline:none; }
.ddm-x .ddm-win-link:focus-visible .ddm-win-frame { outline:2px solid var(--blue-ink); outline-offset:4px; }
@media (hover:hover) and (pointer:fine) {
  .ddm-x .ddm-wins.has-focus .ddm-win:not(.is-focus) .ddm-win-frame { filter:blur(9px) brightness(.72) saturate(.7); transform:scale(.97); }
  .ddm-x .ddm-wins.has-focus .ddm-win:not(.is-focus) .ddm-win-cap { opacity:.35; }
  .ddm-x .ddm-win.is-focus .ddm-win-frame { transform:scale(1.035); box-shadow:inset 0 0 0 1px #fff, 0 0 0 1px rgb(17 17 17/.08), 0 0 26px rgb(255 255 255/.9), 0 26px 44px -26px rgb(0 0 0/.32); } /* shadow kept tight so it doesn't muddy the caption below (Daniel) */
  .ddm-x .ddm-win.is-focus .ddm-win-cap small { color:var(--ink-2); }
}

/* Floating lenses (Daniel's idea, Oct 18). scripts/work.js adds .is-lenses on pointer screens with motion: each window is clipped
   to a round lens (--r) centred on its screen, drifts gently around its spot (--dx/--dy) and, pointed at, grows into the full
   window in place while its rim runs one lap and fades. Same layout, so the windows' spots are the lenses' homes. */
.ddm-x .ddm-win-glass, .ddm-x .ddm-win-rim { display:none; }
.ddm-x .ddm-feat-switch { display:flex; align-items:center; gap:4px; width:fit-content; position:absolute; right:0; top:clamp(-60px,-4.3vw,-44px); z-index:5; margin:0; padding:6px; border-radius:999px; background:rgb(255 255 255/.6); box-shadow:inset 0 0 0 1px var(--line); font:500 .66rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-feat-switch button { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 12px 0 10px; border:0; border-radius:999px; font:500 .8rem/1 var(--sans); letter-spacing:0; text-transform:none; color:var(--ink-2); background:none; cursor:pointer; }
.ddm-x .ddm-feat-switch svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; }
.ddm-x .ddm-feat-switch button:focus-visible { outline:2px solid var(--blue-ink); outline-offset:2px; }
.ddm-x .ddm-feat-switch button[aria-pressed="true"] { color:var(--ink); background:var(--sun-sheen), var(--sun); box-shadow:var(--sun-depth); }
/* Lenses in three columns (Daniel, Oct 18): the middle column sits lower so the group still floats rather than reading as a grid;
   a short last row centres. The Windows comparison keeps the staggered layout. */
.ddm-x .ddm-wins.is-lenses { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:clamp(80px,8vw,120px); }
.ddm-x .ddm-wins.is-lenses .ddm-win { grid-column:auto; margin-top:0; }
.ddm-x .ddm-wins.is-lenses .ddm-win:nth-child(3n+2) { margin-top:clamp(40px,5vw,80px); }
.ddm-x .ddm-wins.is-lenses .ddm-win:nth-child(3n+1):nth-last-child(2) { grid-column:1 / span 1; translate:50% 0; }
.ddm-x .ddm-wins.is-lenses .ddm-win:nth-child(3n+2):nth-last-child(1) { translate:50% 0; margin-top:0; }
.ddm-x .ddm-wins.is-lenses .ddm-win:nth-child(3n+1):nth-last-child(1) { grid-column:2; }
.ddm-x .ddm-wins.is-lenses .ddm-win-link { position:relative; transform:translate3d(var(--dx,0px),var(--dy,0px),0); will-change:transform; }
.ddm-x .ddm-wins.is-lenses .ddm-win-frame {   clip-path:circle(calc(var(--r,140px) * var(--born,1)) at 50% var(--cy,50%)); transition:clip-path .5s cubic-bezier(.33,1,.68,1), filter .5s var(--ease), transform .5s cubic-bezier(.33,1,.68,1); }
.ddm-x .ddm-wins.is-lenses .ddm-win-bar { visibility:hidden; }
/* Without a logo (until Daniel sends one) the lens shows the centred site in the clear, no frost */
.ddm-x .ddm-wins.is-lenses .ddm-win:not(.has-logo) .ddm-win-glass { background:radial-gradient(calc(var(--r,140px) * 1.1) circle at calc(50% - var(--r,140px) * .35) calc(var(--cy,50%) - var(--r,140px) * .45),rgb(255 255 255/.28),transparent 60%); -webkit-backdrop-filter:none; backdrop-filter:none; }
.ddm-x .ddm-wins.is-lenses .ddm-win-glass { display:block; position:absolute; inset:0; z-index:2; pointer-events:none; transition:opacity .45s var(--ease);
  /* At rest: frosted glass over the site (its colours show through, blurred) with the logo in the middle (Daniel, Oct 18) */
  background:radial-gradient(calc(var(--r,140px) * 1.1) circle at calc(50% - var(--r,140px) * .3) calc(var(--cy,50%) - var(--r,140px) * .4),rgb(255 255 255/.75),rgb(255 255 255/.42) 55%,rgb(255 255 255/.3) 80%);
  -webkit-backdrop-filter:blur(22px) saturate(1.25); backdrop-filter:blur(22px) saturate(1.25); }
.ddm-x .ddm-wins.is-lenses .ddm-win-glass img { position:absolute; left:50%; top:var(--cy,50%); width:calc(var(--r,140px) * .82); height:auto; aspect-ratio:1; translate:-50% -50%; scale:var(--born,1); border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 0 0 1px rgb(17 17 17/.08), 0 14px 30px -16px rgb(17 17 17/.45); }
.ddm-x .ddm-wins.is-lenses .ddm-win-rim { display:block; position:absolute; left:50%; top:var(--cy,50%); z-index:3; width:calc(var(--r,140px) * 2); height:calc(var(--r,140px) * 2); margin:calc(var(--r,140px) * -1) 0 0 calc(var(--r,140px) * -1); border-radius:50%; pointer-events:none;
  scale:var(--born,1); box-shadow:0 30px 50px -28px rgb(17 17 17/.5), inset 0 0 0 1px rgb(255 255 255/.7); transition:opacity .35s var(--ease) .05s, scale .5s cubic-bezier(.33,1,.68,1); }
.ddm-x .ddm-wins.is-lenses .ddm-win-rim::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--la,0deg),transparent 0deg,rgb(59 91 255/.5) 30deg,rgb(59 91 255) 60deg,#fff 72deg,rgb(59 91 255/.9) 84deg,transparent 125deg 180deg,rgb(255 199 0/.5) 210deg,rgb(255 199 0) 240deg,#fff 252deg,rgb(255 199 0/.9) 264deg,transparent 305deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); filter:drop-shadow(0 0 2px rgb(255 255 255/.9)); opacity:.85; }
/* Entrance, like the hero lenses: each grows once from a dot with a slight overshoot; logo and caption come with it */
.ddm-x .ddm-wins.is-entering .ddm-win-frame, .ddm-x .ddm-wins.is-entering .ddm-win-rim { transition:none; }
.ddm-x .ddm-wins.is-lenses .ddm-win:not(.is-focus) .ddm-win-cap { opacity:clamp(0, calc(var(--born,1) * 1.6 - .6), 1); }
/* Caption: name centred under the lens, tag and location on the line below, still centred when the window opens (Daniel); when the window opens it moves back under the window */
.ddm-x .ddm-wins.is-lenses .ddm-win-cap { position:absolute; left:0; right:0; top:calc(var(--cy,50%) + var(--r,140px) + 16px); margin:0; flex-direction:column; align-items:center; gap:6px; text-align:center; transition:opacity .4s var(--ease), top .5s cubic-bezier(.33,1,.68,1); }
/* Open: the lens grows into the window where it sits */
.ddm-x .ddm-wins.is-lenses .ddm-win.is-focus .ddm-win-frame { clip-path:circle(var(--R,140%) at 50% var(--cy,50%)); transition:clip-path .75s cubic-bezier(.65,0,.25,1), filter .6s var(--ease), transform .7s var(--ease); }
/* Closing is quicker and eases out (Daniel, Oct 18): rim, glass and caption land with the circle */
.ddm-x .ddm-wins.is-lenses .ddm-win.is-focus .ddm-win-bar { visibility:visible; }
.ddm-x .ddm-wins.is-lenses .ddm-win.is-focus .ddm-win-glass { opacity:0; }
.ddm-x .ddm-wins.is-lenses .ddm-win.is-focus .ddm-win-rim { opacity:0; scale:1.25; transition:opacity .5s var(--ease) .1s, scale .75s cubic-bezier(.65,0,.25,1); }
.ddm-x .ddm-wins.is-lenses .ddm-win.is-focus .ddm-win-cap { transition:opacity .4s var(--ease), top .75s cubic-bezier(.65,0,.25,1); }
.ddm-x .ddm-wins.is-lenses .ddm-win.is-focus .ddm-win-cap { top:calc(var(--fh,100%) + 24px); }
.ddm-x .ddm-wins.is-lenses.has-focus .ddm-win:not(.is-focus) .ddm-win-frame { filter:blur(2px) saturate(.8); opacity:.75; transform:scale(.93); }
.ddm-x .ddm-wins.is-lenses.has-focus .ddm-win:not(.is-focus) .ddm-win-rim { opacity:.35; scale:.92; }
.ddm-x .ddm-wins.is-lenses .ddm-win.is-focus { z-index:3; position:relative; }
/* Only the round lens (clipped, so its hidden corners don't catch the pointer) and the caption respond */
.ddm-x .ddm-wins.is-lenses :is(.ddm-win,.ddm-win-link) { pointer-events:none; }
.ddm-x .ddm-wins.is-lenses :is(.ddm-win-frame,.ddm-win-cap) { pointer-events:auto; }

/* Every project */
.ddm-x .ddm-work-all { padding-block:clamp(40px,6vw,80px) clamp(40px,6vw,80px); }
.ddm-x .ddm-work-all-head h2 > span:not(.ddm-in-w) { display:block; }
.ddm-x .ddm-work-filters { display:flex; flex-wrap:wrap; gap:6px; margin:clamp(28px,4vw,44px) 0 clamp(28px,4vw,40px); }
.ddm-x .ddm-work-filters button { min-height:36px; padding:0 14px; border:0; border-radius:999px; font:500 .85rem/1 var(--sans); color:var(--ink-2); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:background .3s var(--ease); }
.ddm-x .ddm-work-filters button:hover { background:#fff; }
.ddm-x .ddm-work-filters button[aria-pressed="true"] { color:var(--ink); background:var(--sun-sheen), var(--sun); box-shadow:var(--sun-depth); }
.ddm-x .ddm-work-index { position:relative; }
.ddm-x .ddm-work-all-head + .ddm-work-cols, .ddm-x .ddm-work-filters[hidden] + .ddm-work-cols { margin-top:clamp(28px,4vw,44px); }
/* The glass lens that follows the pointer over the list, showing the site (rim light as on the hero lenses) */
.ddm-x .ddm-work-lens { position:absolute; left:0; top:0; z-index:4; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%; overflow:hidden; pointer-events:none; opacity:0; scale:.2;
  background:radial-gradient(circle at 32% 26%,rgb(255 255 255/.85),rgb(255 255 255/.4) 46%,rgb(255 255 255/.28) 70%,rgb(255 255 255/.5)); -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2); box-shadow:inset 0 1px 1px rgb(255 255 255/.95), inset 0 -14px 24px -14px rgb(17 17 17/.18), inset 0 0 0 1px rgb(255 255 255/.7), 0 26px 50px -24px rgb(17 17 17/.45); transition:opacity .35s var(--ease), scale .5s cubic-bezier(.34,1.45,.64,1); will-change:transform; }
.ddm-x .ddm-work-lens.is-on { opacity:1; scale:1; }
.ddm-x .ddm-work-lens img { position:absolute; left:50%; top:50%; width:54%; height:auto; aspect-ratio:1; translate:-50% -50%; border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 0 0 1px rgb(17 17 17/.08), 0 10px 22px -12px rgb(17 17 17/.4); display:none; }
.ddm-x .ddm-work-lens.has-logo img { display:block; }
.ddm-x .ddm-work-lens b { position:absolute; inset:0; display:grid; place-items:center; padding:18px; text-align:center; font:600 1rem/1.05 var(--sans); letter-spacing:-.035em; color:var(--ink); }
.ddm-x .ddm-work-lens.has-logo b { display:none; }
.ddm-x .ddm-work-lens::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; background:radial-gradient(circle at 30% 24%,rgb(255 255 255/.4),transparent 46%); }
.ddm-x .ddm-work-lens::after { content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--rim,0deg),transparent 0deg,rgb(59 91 255/.5) 30deg,rgb(59 91 255) 60deg,#fff 72deg,rgb(59 91 255/.9) 84deg,transparent 125deg 180deg,rgb(255 199 0/.5) 210deg,rgb(255 199 0) 240deg,#fff 252deg,rgb(255 199 0/.9) 264deg,transparent 305deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); filter:drop-shadow(0 0 2px rgb(255 255 255/.9)); }
.ddm-x .ddm-work-lens.is-on::after { animation:ddm-rim-orbit 5s linear infinite; }
.ddm-x .ddm-work-list.has-lens .ddm-work-row:not(.is-hot) .ddm-work-link { color:var(--ink-3); }
.ddm-x .ddm-work-list.has-lens .ddm-work-row:not(.is-hot) .ddm-work-name { color:var(--ink-3); }
.ddm-x .ddm-work-row.is-hot .ddm-work-name { transform:translateX(10px); }

/* Opening a project (Daniel, Oct 18): the clicked window grows to fill the screen with the post's light background; the page
   behind dims and blurs, and the window's rim glows white as it travels (the same luminous rim as Services' card) */
@view-transition { navigation:auto; }
.ddm-x .ddm-open-dim { position:fixed; inset:0; z-index:89; pointer-events:none; background:rgb(11 11 12/0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);
  transition:background-color .75s cubic-bezier(.4,0,.6,1), backdrop-filter .6s var(--ease), -webkit-backdrop-filter .6s var(--ease); }
/* Darkens gradually all the way to black as the window fills the screen (Daniel, Oct 18) */
.ddm-x .ddm-open-dim.is-on { background:rgb(11 11 12/.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ddm-x .ddm-open-win { position:fixed; z-index:90; pointer-events:none; background:var(--canvas);
  box-shadow:0 0 0 1px rgb(255 255 255/.95), 0 0 22px 3px rgb(255 255 255/.75), 0 0 70px 12px rgb(255 255 255/.32);
  transition:left .7s cubic-bezier(.65,0,.25,1), top .7s cubic-bezier(.65,0,.25,1), width .7s cubic-bezier(.65,0,.25,1), height .7s cubic-bezier(.65,0,.25,1), border-radius .7s cubic-bezier(.65,0,.25,1); overflow:hidden; isolation:isolate; }
.ddm-x .ddm-open-win.is-square { transition:border-radius .5s cubic-bezier(.45,0,.55,1); }
/* The post picks up where the gallery left off: a full light screen with the glowing rim at its edges, fading as the frame rises */
.ddm-x .ddm-arrive { position:fixed; inset:0; z-index:90; pointer-events:none; background:var(--canvas); box-shadow:inset 0 0 0 1px rgb(255 255 255/.95), inset 0 0 40px 6px rgb(255 255 255/.7); transition:opacity .6s var(--ease) .05s; isolation:isolate; }
.ddm-x .ddm-arrive.is-gone { opacity:0; }

@media (max-width:860px) {
  .ddm-x .ddm-wins { grid-template-columns:1fr; row-gap:40px; }
  .ddm-x .ddm-win:nth-child(n) { grid-column:1 / -1; margin-top:0; }
  .ddm-x .ddm-work-lens { display:none; }
}

/* ---------- Project post ---------- */
.ddm-x .ddm-post-crumb a { color:var(--blue-ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; }
.ddm-x .ddm-post-crumb a:hover { text-decoration-thickness:2px; }
.ddm-x .ddm-post-title { max-width:14ch; }
.ddm-x .ddm-post-lede { max-width:44ch; margin:28px 0 0; font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.5; color:var(--ink-2); }
.ddm-x .ddm-post-ctas { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.ddm-x .ddm-post-stage { margin-top:clamp(48px,6vw,84px); }
.ddm-x .ddm-post-frame { max-width:1180px; margin-inline:auto; border-radius:18px; box-shadow:0 1px 2px rgb(0 0 0/.06), 0 50px 100px -40px rgb(0 0 0/.5); }
.ddm-x .ddm-post-frame .ddm-sc-screen video { opacity:0; transition:opacity .6s var(--ease); }
.ddm-x .ddm-post-frame .ddm-sc-screen video.is-playing { opacity:1; }
/* Arriving from Our work: the frame opens out of the gallery lens (a circle that grows to the full frame) */
.ddm-x .ddm-post-frame.is-landing { opacity:0; transform:translateY(36px) scale(.97); }
.ddm-x .ddm-post-frame.is-landed { opacity:1; transform:none; transition:opacity .7s var(--ease) .15s, transform .9s cubic-bezier(.2,.7,.2,1) .15s; }

.ddm-x .ddm-post-grid { display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:clamp(40px,7vw,120px); padding-block:clamp(72px,9vw,132px) clamp(56px,7vw,96px); }
.ddm-x .ddm-post-facts dl { position:sticky; top:calc(var(--nav-h) + 32px); margin:0; display:grid; gap:22px; }
.ddm-x .ddm-post-facts dt { margin-bottom:6px; font:500 .7rem/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-post-facts dd { margin:0; font-size:.98rem; color:var(--ink); }
.ddm-x .ddm-post-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.ddm-x .ddm-post-chips li { padding:5px 11px; border-radius:999px; font-size:.82rem; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.ddm-x .ddm-post-url { color:var(--blue-ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; overflow-wrap:anywhere; }

.ddm-x .ddm-post-body { max-width:720px; display:grid; gap:clamp(48px,6vw,80px); }
.ddm-x .ddm-post-text h2 { margin-bottom:18px; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1; letter-spacing:-.045em; }
.ddm-x .ddm-post-text p { font-size:clamp(1.05rem,1.3vw,1.18rem); line-height:1.62; color:var(--ink-2); }
.ddm-x .ddm-post-built { list-style:none; margin:26px 0 0; padding:0; display:grid; gap:2px; }
.ddm-x .ddm-post-built li { position:relative; padding:18px 0 18px 30px; border-top:1px solid var(--line); color:var(--ink-2); line-height:1.55; }
.ddm-x .ddm-post-built li:last-child { border-bottom:1px solid var(--line); }
.ddm-x .ddm-post-built li::before { content:""; position:absolute; left:0; top:25px; width:12px; height:12px; border-radius:4px; background:var(--sun); box-shadow:var(--sun-depth); }
.ddm-x .ddm-post-built b { color:var(--ink); font-weight:600; }

.ddm-x .ddm-post-fig { margin:0; }
.ddm-x .ddm-post-fig > img { width:100%; border-radius:16px; box-shadow:0 30px 70px -36px rgb(0 0 0/.45); }
.ddm-x .ddm-post-fig figcaption { margin-top:14px; font:500 .76rem/1.5 var(--mono); letter-spacing:.02em; color:var(--ink-3); }
/* Elevated: before/after with its interior and exterior pairs */
.ddm-x .ddm-post-ba { padding:12px; border-radius:20px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line), 0 30px 70px -40px rgb(0 0 0/.4); }
.ddm-x .ddm-post-ba figcaption { padding:0 6px 4px; }
.ddm-x .ddm-post-ba-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 4px 12px; font:500 .7rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-post-pills { display:flex; gap:4px; padding:3px; border-radius:999px; background:var(--canvas); }
.ddm-x .ddm-post-pills button { min-height:30px; padding:0 12px; border:0; border-radius:999px; font:500 .8rem/1 var(--sans); color:var(--ink-2); background:none; cursor:pointer; }
.ddm-x .ddm-post-pills button[aria-pressed="true"] { background:var(--sun-sheen), var(--sun); box-shadow:var(--sun-depth); color:var(--ink); }
/* Cabrera's: shop categories */
.ddm-x .ddm-post-cats ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ddm-x .ddm-post-cats a { position:relative; display:block; border-radius:14px; overflow:hidden; background:#000; }
.ddm-x .ddm-post-cats img { width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .8s var(--ease), opacity .4s var(--ease); }
.ddm-x .ddm-post-cats a:hover img { transform:scale(1.05); }
.ddm-x .ddm-post-cats a > span { position:absolute; left:12px; bottom:12px; padding:6px 12px; border-radius:999px; font-size:.85rem; font-weight:500; color:#fff; background:rgb(17 17 17/.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* Next project: the name in display type; its screen slides up into view on hover */
.ddm-x .ddm-post-next { padding-bottom:clamp(40px,6vw,80px); }
.ddm-x .ddm-post-next-link { position:relative; display:grid; gap:10px; padding:clamp(28px,4vw,48px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.ddm-x .ddm-post-next .ddm-eyebrow { margin:0; }
.ddm-x .ddm-post-next-name { font:600 clamp(2.2rem,6vw,5.2rem)/.92 var(--sans); letter-spacing:-.055em; position:relative; z-index:1; max-width:60%; }
.ddm-x .ddm-post-next-link:hover .ddm-arrow { transform:translateX(8px); }
.ddm-x .ddm-post-next-ind { color:var(--ink-2); position:relative; z-index:1; }
.ddm-x .ddm-post-next-shot { position:absolute; right:0; top:50%; width:min(38%,440px); border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -30px rgb(0 0 0/.5); transform:translateY(-30%) rotate(2deg); opacity:.0; transition:transform .7s var(--ease), opacity .5s var(--ease); }
.ddm-x .ddm-post-next-shot img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.ddm-x .ddm-post-next-link:is(:hover,:focus-visible) .ddm-post-next-shot { opacity:1; transform:translateY(-50%) rotate(0deg); }
@media (hover:none) { .ddm-x .ddm-post-next-shot { opacity:1; transform:translateY(-50%); } }

/* Closing line, shared by Our work and posts */
.ddm-x .ddm-post-cta { padding-block:clamp(72px,10vw,140px); text-align:center; }
.ddm-x .ddm-post-cta h2 > span:not(.ddm-in-w) { display:block; }
.ddm-x .ddm-post-cta-links { margin-top:34px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

@media (max-width:860px) {
  .ddm-x .ddm-post-grid { grid-template-columns:1fr; }
  .ddm-x .ddm-post-facts dl { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ddm-x .ddm-post-next-name { max-width:none; }
  .ddm-x .ddm-post-next-shot { position:static; width:100%; transform:none; opacity:1; margin-top:12px; }
  .ddm-x .ddm-post-next-link:is(:hover,:focus-visible) .ddm-post-next-shot { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-post-frame.is-landing, .ddm-x .ddm-post-frame.is-landed { opacity:1; transform:none; transition:none; }
  .ddm-x :is(.ddm-work-name,.ddm-work-go,.ddm-post-next-shot,.ddm-post-cats img,.ddm-win-frame,.ddm-win-cap) { transition:none; }
  .ddm-x .ddm-work-lens, .ddm-x .ddm-open-win, .ddm-x .ddm-open-dim, .ddm-x .ddm-arrive { display:none; }
}
@media (forced-colors:active) {
  .ddm-x .ddm-work-lens::after { display:none; }
  .ddm-x .ddm-win-frame { border:1px solid CanvasText; }
  .ddm-x .ddm-post-built li::before { background:CanvasText; }
  .ddm-x .ddm-post-pills button[aria-pressed="true"] { outline:2px solid CanvasText; }
}
.ddm-x .ddm-nowrap { white-space:nowrap; }
@media (max-width:700px) {
  .ddm-x .ddm-post-digits { -webkit-mask:linear-gradient(180deg,#000 20%,transparent 70%),linear-gradient(90deg,transparent 0 55%,#000 100%); -webkit-mask-composite:source-in; mask:linear-gradient(180deg,#000 20%,transparent 70%) intersect,linear-gradient(90deg,transparent 0 55%,#000 100%); }
}

/* ---------- Our work: closing portal (Home's lens portal, Daniel Oct 18) ---------- */
/* Words around the oval: "You’re / next." at Home's size and colour (Daniel) */

/* ---------- Post: sticky story (Daniel picked it, Oct 18; partials/project-post-story.html) ----------
   Story on the left, live window pinned on the right. As each section reaches the middle of the screen the window scrubs
   its recording to that part of the site and the matching chip lights up under it. Phones: the plain stacked post. */
.ddm-x .ddm-story-top { padding-top:calc(var(--nav-h) + clamp(40px,6vw,88px)); }
.ddm-x .ddm-story-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,5vw,88px); align-items:start; padding-bottom:clamp(72px,9vw,132px); }
.ddm-x .ddm-story .ddm-post-title { font-size:clamp(2.8rem,5.4vw,5.6rem); max-width:11ch; }
.ddm-x .ddm-story .ddm-post-lede { max-width:36ch; }
.ddm-x .ddm-story-facts { margin:clamp(36px,4vw,56px) 0 0; padding:20px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
.ddm-x .ddm-story-facts dt { margin-bottom:6px; font:500 .7rem/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-story-facts dd { margin:0; font-size:.95rem; color:var(--ink); }
.ddm-x .ddm-story-facts > div:has(.ddm-post-chips), .ddm-x .ddm-story-facts > div:has(.ddm-post-url) { grid-column:1 / -1; }
.ddm-x .ddm-story-body { margin-top:clamp(72px,9vw,128px); max-width:none; gap:0; }
/* Each section gets most of a screen, so the window has time to move between them. */
.ddm-x .ddm-story-body > * { margin-block:clamp(40px,9vh,96px); }
.ddm-x .ddm-story-body > .ddm-post-text { min-height:62vh; display:flex; flex-direction:column; justify-content:center; transition:opacity .5s var(--ease); }
.ddm-x .ddm-story.is-live .ddm-story-body > .ddm-post-text:not(.is-on) { opacity:.42; }
.ddm-x .ddm-story-stage { align-self:stretch; }
.ddm-x .ddm-story-pin { position:sticky; top:calc(var(--nav-h) + 28px); }
.ddm-x .ddm-story .ddm-post-frame { max-width:none; }
.ddm-x .ddm-story .ddm-post-frame .ddm-sc-screen video { transition:opacity .35s var(--ease); }
.ddm-x .ddm-story .ddm-post-frame.is-jump .ddm-sc-screen video { opacity:.25; transition-duration:.12s; }
/* Plain screenshots repeat what the window already shows on wide screens. */
.ddm-x .ddm-story-body > .ddm-post-fig:not(.ddm-post-ba):not(.ddm-post-cats) { display:none; }
.ddm-x .ddm-story-index { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.ddm-x .ddm-story-index button { min-height:34px; padding:0 14px; border:0; border-radius:999px; font:500 .84rem/1 var(--sans); color:var(--ink-2); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.ddm-x .ddm-story-index button:hover { color:var(--ink); }
.ddm-x .ddm-story-index button[aria-current="true"] { color:var(--ink); background:var(--sun-sheen), var(--sun); box-shadow:var(--sun-depth); }
@media (max-width:900px) {
  .ddm-x .ddm-story-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  .ddm-x .ddm-story-stage { order:-1; }
  .ddm-x .ddm-story-intro { order:-2; }
  .ddm-x .ddm-story-text { display:contents; }
  .ddm-x .ddm-story-stage { display:block; margin-top:40px; }
  .ddm-x .ddm-story-pin { position:static; }
  .ddm-x .ddm-story-index { display:none; }
  .ddm-x .ddm-story-body { margin-top:56px; display:grid; gap:clamp(48px,8vw,72px); }
  .ddm-x .ddm-story-body > * { margin-block:0; }
  .ddm-x .ddm-story-body > .ddm-post-text { min-height:0; display:block; }
  .ddm-x .ddm-story-body > .ddm-post-fig:not(.ddm-post-ba):not(.ddm-post-cats) { display:block; }
}
@media (max-width:420px) { .ddm-x .ddm-story-facts { grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-story.is-live .ddm-story-body > .ddm-post-text:not(.is-on) { opacity:1; }
}