/* Deft Digital Media — Home "01 / Snapshots" (October 16, 2026; tabs October 18).
   Three recent projects: Galaxy Glass & Closets, Elevated Finishes & Painting, Cabrera's Jewelry.
   Base layout is a stacked, fully readable list (no JS). scripts/showcase.js adds .sc-tabbed: three project tabs over one
   panel, normal page scroll (the pinned stage confused visitors, Daniel, Oct 18). Each tab opens its project through a lens.
   Follows design-system/DECISIONS.md: Sunflower only as a fill or thick bar, Geist. */

.ddm-x .ddm-sc { --sc-ext:70vh; position:relative; padding-top:clamp(56px,7vw,96px); }
/* Oct 18 (seamless into Services): the grain and both digit layers run on 70vh below the section, under the Services
   card, so the card rises on the same ground with no seam. --sc-ext keeps the bottom strip's mask anchored to the section. */
.ddm-x .ddm-sc > .ddm-sc-digits, .ddm-x .ddm-sc > .ddm-grain { height:calc(100% + var(--sc-ext)); bottom:auto; }
/* Oct 18 (Snapshots): the hero's backdrop carries on: the same grain over the whole section, and the hero's two digit layers
   (same opacities) in a header band that fades out before the first project */
/* The field covers the whole section, shown where nothing sits on it: the header band (faint at the left, behind the title),
   the right margin and the strip under the projects, so the lens ripple can run through all of them (Daniel, Oct 18). */
.ddm-x .ddm-sc .ddm-sc-digits { opacity:.9;
  -webkit-mask:linear-gradient(90deg,transparent calc(100% - max(120px,(100% - 1320px) / 2 + 60px)),#000 100%),linear-gradient(0deg,#000 0,#000 var(--sc-ext),rgb(0 0 0/.85) calc(var(--sc-ext) + 150px),transparent calc(var(--sc-ext) + 330px)),linear-gradient(180deg,#000 0,transparent min(62vh,520px)),linear-gradient(90deg,rgb(0 0 0/.25) 0 20%,#000 75%);
  -webkit-mask-composite:source-over,source-over,source-in;
  mask:linear-gradient(90deg,transparent calc(100% - max(120px,(100% - 1320px) / 2 + 60px)),#000 100%),linear-gradient(0deg,#000 0,#000 var(--sc-ext),rgb(0 0 0/.85) calc(var(--sc-ext) + 150px),transparent calc(var(--sc-ext) + 330px)),linear-gradient(180deg,#000 0,transparent min(62vh,520px)),linear-gradient(90deg,rgb(0 0 0/.25) 0 20%,#000 75%);
  mask-composite:add,add,intersect; }
.ddm-x .ddm-sc-intro { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 28px; margin-bottom:clamp(28px,4vw,48px); }
.ddm-x .ddm-sc-intro h2 { margin:0; font-size:clamp(1.9rem,3.4vw,3.1rem); }

.ddm-x .ddm-sc-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Chapters (stacked base) */
.ddm-x .ddm-sc-chapters { display:grid; gap:clamp(72px,10vw,120px); width:var(--shell); margin-inline:auto; padding-bottom:clamp(72px,9vw,120px); }
.ddm-x .ddm-sc-ch { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4vw,64px); align-items:center; background:var(--canvas); }
.ddm-x .ddm-sc-idx { margin:0 0 18px; font:500 .75rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-sc-ch h3 { font-size:clamp(2.2rem,4.2vw,3.9rem); line-height:.92; letter-spacing:-.05em; margin-bottom:20px; }
.ddm-x .ddm-sc-lede { font-size:clamp(1.02rem,1.3vw,1.18rem); color:var(--ink-2); max-width:34em; }

/* Browser frame */
.ddm-x .ddm-sc-media { position:relative; min-width:0; }
.ddm-x .ddm-sc-frame { position:relative; display:block; color:inherit; cursor:pointer; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgb(0 0 0/.06), 0 30px 70px -28px rgb(0 0 0/.45); transform-style:preserve-3d; will-change:transform; }
.ddm-x .ddm-sc-bar { display:flex; align-items:center; gap:6px; height:32px; padding:0 14px; border-bottom:1px solid var(--line); background:var(--paper); font:500 11px var(--mono); color:var(--ink-3); white-space:nowrap; overflow:hidden; }
.ddm-x .ddm-sc-bar i { flex:none; width:8px; height:8px; border-radius:50%; background:rgb(17 17 17/.16); }
.ddm-x .ddm-sc-bar span { margin-left:10px; padding:3px 12px; border-radius:999px; background:var(--canvas); overflow:hidden; text-overflow:ellipsis; }
.ddm-x .ddm-sc-screen { position:relative; aspect-ratio:16/10; overflow:hidden; background:#111; }
.ddm-x .ddm-sc-screen :is(img,video) { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.ddm-x .ddm-sc-screen video[data-sc-video] { opacity:0; transition:opacity .6s var(--ease); }
.ddm-x .ddm-sc-screen video[data-sc-video].is-playing { opacity:1; }

.ddm-x .ddm-sc-open { margin-left:auto; display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; background:var(--ink); color:#fff; font:500 11px/1 var(--sans); letter-spacing:0; transition:background .3s var(--ease), color .3s var(--ease); }
.ddm-x .ddm-sc-frame:hover .ddm-sc-open, .ddm-x .ddm-sc-frame:focus-visible .ddm-sc-open { background:var(--sun); color:var(--ink); }
.ddm-x .ddm-sc-frame:focus-visible { outline:2px solid var(--blue-ink); outline-offset:4px; border-radius:16px; }
.ddm-x .ddm-sc-frame .ddm-sc-screen::after { content:""; position:absolute; inset:0; z-index:2; background:rgb(17 17 17/0); transition:background .4s var(--ease); }
.ddm-x .ddm-sc-frame:hover .ddm-sc-screen::after { background:rgb(17 17 17/.06); }

/* Floating cards that sit over the frame (glass recipe, 1 layer) */
.ddm-x .ddm-sc-card { position:absolute; z-index:4; border-radius:16px; padding:12px; background:rgb(247 247 245/.72);
  -webkit-backdrop-filter:blur(10px) saturate(130%); backdrop-filter:blur(10px) saturate(130%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9), inset 0 0 14px rgb(255 255 255/.45), 0 1px 2px rgb(0 0 0/.06), 0 24px 50px -18px rgb(0 0 0/.4); }
.ddm-x .ddm-sc-card-label { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:2px 4px 10px; font:500 11px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }

/* Elevated: before/after comparison */
.ddm-x .ddm-sc-ba { right:-4%; bottom:-10%; width:min(58%,420px); }
.ddm-x .ddm-ba { position:relative; aspect-ratio:3/2; border-radius:10px; overflow:hidden; background:#ddd; touch-action:pan-y; cursor:ew-resize; --pos:50%; }
.ddm-x .ddm-ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
.ddm-x .ddm-ba .ddm-ba-after { clip-path:inset(0 0 0 var(--pos)); }
.ddm-x .ddm-ba-handle { position:absolute; top:0; bottom:0; left:var(--pos); width:4px; margin-left:-2px; background:var(--sun); pointer-events:none; }
.ddm-x .ddm-ba-handle::after { content:"⟷"; position:absolute; top:50%; left:50%; display:grid; place-items:center; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; background:var(--sun); color:var(--ink); font:600 16px/1 var(--sans); box-shadow:0 6px 16px -6px rgb(0 0 0/.5); }
.ddm-x .ddm-ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ddm-x .ddm-ba-range:focus-visible + .ddm-ba-handle { outline:2px solid var(--blue-ink); outline-offset:2px; }
.ddm-x .ddm-ba-tags { position:absolute; inset:auto 8px 8px; display:flex; justify-content:space-between; pointer-events:none; }
.ddm-x .ddm-ba-tags span { padding:4px 8px; border-radius:999px; font:500 10px/1 var(--mono); text-transform:uppercase; letter-spacing:.06em; background:rgb(17 17 17/.72); color:#fff; }
.ddm-x .ddm-sc-pills { display:flex; gap:6px; }
.ddm-x .ddm-sc-pills button { min-height:30px; padding:0 12px; border:0; border-radius:999px; background:transparent; color:var(--ink-2); font:500 12px/1 var(--sans); cursor:pointer; box-shadow:inset 0 0 0 1px var(--line); transition:background .3s var(--ease), color .3s var(--ease); }
.ddm-x .ddm-sc-pills button[aria-pressed="true"] { background:var(--ink); color:#fff; box-shadow:none; }

/* Cabreras: shop card */
.ddm-x .ddm-sc-shop { right:-4%; bottom:-12%; width:min(46%,330px); }
.ddm-x .ddm-shop-img { position:relative; aspect-ratio:3/2; border-radius:10px; overflow:hidden; background:#000; }
.ddm-x .ddm-shop-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .6s var(--ease), transform 1.2s var(--ease); }
.ddm-x .ddm-shop-img img.is-on { opacity:1; transform:none; }
.ddm-x .ddm-shop-tabs { display:flex; flex-wrap:wrap; gap:4px; margin:10px 0 8px; }
.ddm-x .ddm-shop-tabs button { min-height:30px; padding:0 10px; border:0; border-radius:999px; background:transparent; color:var(--ink-2); font:500 12px/1 var(--sans); cursor:pointer; box-shadow:inset 0 0 0 1px var(--line); }
.ddm-x .ddm-shop-tabs button[aria-selected="true"] { background:var(--ink); color:#fff; box-shadow:none; }
.ddm-x .ddm-shop-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 2px; }
.ddm-x .ddm-shop-row small { font:500 10.5px/1.35 var(--mono); color:var(--ink-3); }
.ddm-x .ddm-shop-cart { display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:0 14px; border-radius:999px; background:var(--sun); color:var(--ink); font:500 12px/1 var(--sans); white-space:nowrap; transition:background .3s var(--ease), transform .3s var(--ease); }
.ddm-x .ddm-shop-cart:hover { background:var(--sun-hover); transform:translateY(-1px); }
.ddm-x .ddm-shop-cart:focus-visible { outline:2px solid var(--blue-ink); outline-offset:2px; }
.ddm-x .ddm-sc-qr { left:-5%; top:12%; display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px; font-size:13px; line-height:1.3; max-width:230px; }
.ddm-x .ddm-sc-qr svg { flex:none; width:44px; height:44px; color:var(--ink); }
.ddm-x .ddm-sc-qr b { display:block; font-weight:500; }
.ddm-x .ddm-sc-qr span { color:var(--ink-2); font-size:12px; }

.ddm-x .ddm-sc-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; }
/* Story and live-site buttons (Oct 18, Daniel): ink for the story, a light outlined pill for the live site */
.ddm-x .ddm-sc-links { gap:10px; margin-top:30px; }
.ddm-x .ddm-btn-line { background:rgb(255 255 255/.55); color:var(--ink); box-shadow:inset 0 0 0 1px rgb(17 17 17/.22); }
.ddm-x .ddm-btn-line:hover { background:#fff; box-shadow:inset 0 0 0 1px rgb(17 17 17/.5); }

/* ---------- Tabs (Oct 18, replacing the pinned stage): one project at a time, normal page scroll ---------- */
.ddm-x .ddm-sc-tabs { position:relative; z-index:1; display:flex; gap:10px; margin-bottom:clamp(24px,3vw,36px); overflow-x:auto; scrollbar-width:none; padding:4px 2px 8px; }
.ddm-x .ddm-sc-tabs::-webkit-scrollbar { display:none; }
.ddm-x .ddm-sc-tabs[hidden] { display:none; }
.ddm-x .ddm-sc-tabs button { flex:none; display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 20px 8px 8px; border:0; border-radius:999px; background:rgb(255 255 255/.4); color:var(--ink-2); text-align:left; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line); transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.ddm-x .ddm-sc-tabs img { width:40px; height:40px; border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 0 0 1px rgb(17 17 17/.08); }
.ddm-x .ddm-sc-tabs span { display:grid; gap:3px; }
.ddm-x .ddm-sc-tabs b { font:500 .98rem/1.1 var(--sans); letter-spacing:-.01em; }
.ddm-x .ddm-sc-tabs small { font:500 .66rem/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-sc-tabs button:hover { color:var(--ink); background:rgb(255 255 255/.75); }
.ddm-x .ddm-sc-tabs button[aria-selected="true"] { color:var(--ink); background:var(--sun-sheen), var(--sun); box-shadow:var(--sun-depth); } /* Daniel, Oct 18: Sunflower fill, no bar; later the same day it took the yellow buttons' depth */
.ddm-x .ddm-sc-tabs button[aria-selected="true"] small { color:rgb(17 17 17/.62); }
.ddm-x .ddm-sc-tabs button:focus-visible { outline:2px solid var(--blue-ink); outline-offset:3px; }

/* All three panels share one grid cell, so the section keeps the height of the tallest and never jumps */
.ddm-x .ddm-sc.sc-tabbed .ddm-sc-chapters { position:relative; grid-template-areas:"p"; gap:0; padding-bottom:clamp(128px,11vw,176px); }
.ddm-x .ddm-sc.sc-tabbed .ddm-sc-ch { grid-area:p; visibility:hidden; z-index:0; background:none; } /* transparent so the grain runs through; the leaving project is masked out where the lens has opened */
.ddm-x .ddm-sc.sc-tabbed .ddm-sc-ch.is-active { visibility:visible; z-index:2; }
.ddm-x .ddm-sc.sc-tabbed .ddm-sc-ch.is-leaving { visibility:visible; z-index:1; }
/* Lens handoff: the new project opens through a growing circle; this ring rides its edge with the floating lenses' blue and Sunflower rim */
.ddm-x .ddm-sc-iris { position:absolute; z-index:5; left:0; top:0; border-radius:50%; pointer-events:none; opacity:0; 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)); }
.ddm-x .ddm-sc:not(.sc-tabbed) .ddm-sc-iris { display:none; }

@media (max-width:900px) {
  .ddm-x .ddm-sc.sc-tabbed .ddm-sc-ch { align-content:start; }
  .ddm-x .ddm-sc.sc-tabbed .ddm-sc-ch:not(.is-active):not(.is-leaving) { display:none; } /* phones: no blank space under shorter projects */
  .ddm-x .ddm-sc-ch { grid-template-columns:1fr; }
  .ddm-x .ddm-sc-media { order:-1; margin-bottom:28px; }
  .ddm-x .ddm-sc-ba { right:8px; bottom:-34px; width:52%; }
  .ddm-x .ddm-sc-shop { right:8px; bottom:-40px; width:50%; }
  .ddm-x .ddm-sc-qr { left:8px; top:auto; bottom:-40px; max-width:46%; }
  .ddm-x .ddm-sc-ch .ddm-sc-copy { padding-top:24px; }
}
@media (max-width:560px) {
  /* Phones: the three tabs share the row, logo over a short name, so none hides off-screen */
  .ddm-x .ddm-sc-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; overflow:visible; }
  .ddm-x .ddm-sc-tabs button { flex-direction:column; justify-content:center; gap:6px; min-height:0; padding:10px 6px 12px; border-radius:18px; text-align:center; }
  .ddm-x .ddm-sc-tabs img { width:32px; height:32px; }
  .ddm-x .ddm-sc-tabs b { font-size:.8rem; line-height:1.15; }
  .ddm-x .ddm-sc-tabs small { display:none; }
    .ddm-x .ddm-sc-bar { height:26px; }
  .ddm-x .ddm-sc-ba, .ddm-x .ddm-sc-shop { position:relative; right:auto; bottom:auto; width:auto; margin:-28px 12px 0; }
  .ddm-x .ddm-sc-qr { position:relative; left:auto; bottom:auto; max-width:none; margin:12px 12px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-shop-img img { transition:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x .ddm-sc-card { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--paper); }
}
@media (forced-colors:active) {
  .ddm-x .ddm-ba-handle, .ddm-x .ddm-ba-handle::after { background:CanvasText; }
}