/*
  Work page only (/assets/site-20261025/work.css). Loads after site.css.
  The title, one shelf per app, DD Skills on the ink field, the earlier tools as lanes, one line
  pointing to the résumé, and the contact block.

  APPS     article.app[style="--tint:#…"] > header.app-head (icon, .app-text with the name, line and note,
           .app-links) + .app-field (the tinted field) > ul.shots[data-rail] > li.shot > a.shot-link >
           (.shot-pic > img) + .shot-cap. Every screenshot shows at once on a rail that scrolls sideways
           and snaps to each picture: swipe on phones, trackpad or keyboard elsewhere. Each picture links
           to its full-size PNG. work.js adds the round prev/next buttons (fine pointers only, shown while
           the field is pointed at or holds focus, hidden at either end) and arrow-key moves between shots.
           --shot-w sets the picture width, --pad the field padding. Without JS the rail still scrolls.
  BACKGROUND .bg-note > .bg-line + .links: the career lives on the résumé; this only points there.
  CONTACT  .contact-grid, .contact-text, .contact-form are copied from home.css (candidates for site.css).
*/

/* ---------- Title ---------- */
.w-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: end; padding: clamp(20px, 3vw, 44px) 0 0; }
.w-hero h1 { grid-column: 1 / span 8; font-size: clamp(40px, 7vw, 104px); }
.w-hero-side { grid-column: 9 / span 4; padding-bottom: 0.3em; }
.w-hero-side p { margin: 0; max-width: 44ch; }
.w-hero-side p + p { margin-top: 14px; }

/* ---------- Apps: a header row over a rail of every screenshot ---------- */
.apps-all { padding-top: clamp(64px, 7vw, 112px); }
.app { --shot-w: clamp(180px, 15.6vw, 240px); --shot-gap: clamp(16px, 1.5vw, 24px); --pad: clamp(28px, 3vw, 44px); }
.app + .app { margin-top: clamp(72px, 7.6vw, 120px); }

.app-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; column-gap: 20px; }
.app-icon { width: 64px; height: 64px; border-radius: 15px; }
.app-text h2 { font-size: clamp(28px, 2.5vw, 38px); line-height: 1.05; letter-spacing: -0.03em; }
.app-text h2 a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; text-decoration-color: transparent; transition: text-decoration-color 180ms ease; }
.app-line { margin: 6px 0 0; max-width: 64ch; }
.app-note { margin: 2px 0 0; font-size: 15.5px; color: var(--ink-2); }
.app-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 28px; margin: 0; }
.app-links a { padding-block: 10px; }

.app-field { position: relative; margin-top: clamp(18px, 1.8vw, 26px); background: var(--tint); }
.shots { display: flex; gap: var(--shot-gap); margin: 0; padding: var(--pad); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shot { flex: none; width: var(--shot-w); scroll-snap-align: start; }
.shot-link { display: block; color: #0B0D12; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 140ms var(--ease-out); }
.shot-link:active { transform: scale(0.97); }
.shot-link:focus-visible { outline-offset: 6px; }
.shot-pic { display: block; overflow: hidden; border-radius: calc(var(--shot-w) * 0.075); box-shadow: 0 24px 48px -20px rgb(16 18 30 / 0.42); }
.shot-pic img { width: 100%; height: auto; aspect-ratio: 1320 / 2868; }
.shot-cap { display: block; margin-top: 14px; font: 600 15px/1.3 var(--sans); text-wrap: balance; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; text-decoration-color: transparent; transition: text-decoration-color 180ms ease; }

/* Prev/next (added by work.js): round ink buttons centred on the pictures, at the field's edges. */
.rail-btn { position: absolute; top: calc(var(--pad) + var(--shot-w) * 1.0864 - 24px); z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); cursor: pointer; opacity: 0; transform: scale(0.9); pointer-events: none; transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s linear 180ms; visibility: hidden; }
.rail-btn[data-dir="prev"] { left: 16px; }
.rail-btn[data-dir="next"] { right: 16px; }
.rail-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.app-field:is(:hover, :focus-within) .rail-btn:not(:disabled) { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s; }
.app-field:is(:hover, :focus-within) .rail-btn:not(:disabled):active { transform: scale(0.95); }
@media (hover: none), (pointer: coarse) {
  .rail-btn { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .app-text h2 a:hover { text-decoration-color: currentColor; }
  .shot-link { cursor: zoom-in; }
  .shot-link:hover .shot-cap { text-decoration-color: currentColor; }
}

/* ---------- AI workflows and DD Skills (the ink field) ---------- */
.tools-head { margin-bottom: clamp(64px, 7vw, 112px); }
.tools-head .lead { max-width: 44ch; }
.dd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 56px; align-items: start; }
.dd-intro { grid-column: 1 / span 4; position: sticky; top: calc(var(--head-h) + 32px); display: grid; justify-items: start; gap: 14px; }
.dd-intro h3 { font-size: clamp(36px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.03em; }
.dd-intro p { margin: 0; }
.dd-intro .dd-status { margin-top: -4px; font-weight: 600; color: var(--verify); }
.dd-groups { grid-column: 6 / -1; display: grid; gap: clamp(52px, 5vw, 72px); }
.dd-group h4 { margin: 0; font: 640 var(--t-item)/1.12 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.dd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gutter); margin: 22px 0 0; padding: 0; list-style: none; }
.dd-list a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; text-decoration-color: var(--line-2); transition: text-decoration-color 180ms ease; }
.dd-list > li > a:first-child { font: 640 20px/1.25 var(--display); letter-spacing: -0.01em; }
.dd-list span { display: block; max-width: 40ch; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.dd-list .dd-sub { display: inline-block; margin-top: 10px; font: 600 15px/1.4 var(--sans); }
@media (hover: hover) and (pointer: fine) {
  .dd-list a:hover { text-decoration-color: currentColor; }
}

/* ---------- Earlier tools: one lane per plugin, its stages as bars ---------- */
.earlier { margin-top: 0; }
.earlier-head { align-items: end; }
.earlier-head .lead { max-width: 46ch; }
.lanes { margin: clamp(48px, 5vw, 76px) 0 0; }
.lanes-body { display: grid; gap: 6px; }
.lane-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 12px; background: var(--tone); }
.lane-name { font: 600 15.5px/1.2 var(--sans); color: var(--ink); }
.lane-bars { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lane-bars li { flex: 1 1 0; min-width: 0; height: 34px; display: flex; align-items: center; padding: 0 12px; border-radius: 7px; background: var(--c); color: var(--on-bar); font: 600 14px/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lanes figcaption { max-width: 92ch; margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.earlier-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gutter); margin-top: clamp(56px, 6vw, 96px); }
.old p { margin: 0; max-width: 40ch; }
.old .old-status { margin: 8px 0 16px; font-size: 15.5px; color: var(--ink-2); }
.old p + p:not(.old-status) { margin-top: 16px; }

/* ---------- Background: one line pointing to the résumé ---------- */
.bg-line { max-width: 34em; margin: 0; font: 500 clamp(22px, 2vw, 30px)/1.32 var(--display); letter-spacing: -0.015em; text-wrap: pretty; }
.bg-note .links { margin-top: clamp(20px, 2vw, 28px); }

/* ---------- Contact (copied from home.css) ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; }
.contact-text { grid-column: 1 / span 5; }
.contact-text .lead { margin-top: 24px; }
.contact-text p + p { margin: 16px 0 0; }
.contact-text a { font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 0.24em; }
.contact-form { grid-column: 7 / span 6; min-width: 0; }

/* ---------- Entrances (page-specific; the shared [data-in] covers the rest) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Lanes: each bar grows from the left, lane by lane. */
  .js .earlier .lane-bars li { clip-path: inset(0 100% 0 0 round 7px); transition: clip-path 460ms var(--ease-out); transition-delay: calc(320ms + var(--l, 0) * 140ms + var(--k, 0) * 80ms); }
  .js .earlier.is-in .lane-bars li { clip-path: inset(0 0 0 0 round 7px); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .w-hero h1 { grid-column: 1 / -1; }
  .w-hero-side { grid-column: 1 / span 9; padding: 6px 0 0; }
  .w-hero-side p { max-width: 62ch; }
  .app { --shot-w: clamp(176px, 23vw, 240px); }
  .dd-intro { grid-column: 1 / span 5; }
  .dd-groups { grid-column: 7 / -1; }
  .dd-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app-head { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; }
  .app-icon { width: 56px; height: 56px; border-radius: 13px; }
  .app-links { grid-column: 2; justify-content: flex-start; margin-top: 2px; }
  .dd-intro, .dd-groups { grid-column: 1 / -1; }
  .dd-intro { position: static; max-width: 60ch; }
  .dd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earlier-list { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .contact-text, .contact-form { grid-column: 1 / -1; }
  .contact-text .lead { max-width: 52ch; }
}
/* Tablets: each earlier tool is a row, its name on the left and what it does on the right. */
@media (min-width: 641px) and (max-width: 900px) {
  .old { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr auto; column-gap: var(--gutter); align-items: start; }
  .old h3, .old .old-status { grid-column: 1; }
  .old h3 { grid-row: 1; }
  .old .old-status { grid-row: 2; margin: 8px 0 0; }
  .old p:not(.old-status) { grid-column: 2; }
  .old p:not(.old-status):nth-of-type(2) { grid-row: 1 / span 2; }
  .old p + p:not(.old-status) { margin-top: 16px; }
}
@media (max-width: 640px) {
  .w-hero { padding-top: 16px; }
  .w-hero h1 { font-size: clamp(38px, 10.4vw, 46px); }
  .w-hero-side { grid-column: 1 / -1; }
  /* Apps: the field runs to the screen edges and the rail is swiped; the next picture peeks in. */
  .apps-all { padding-top: 56px; }
  .app { --shot-w: 54vw; --pad: 20px; }
  .app-head { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .app-icon { width: 48px; height: 48px; border-radius: 11px; margin-top: 2px; }
  .app-text h2 { font-size: 28px; }
  .app-line { font-size: 16.5px; line-height: 1.5; }
  .app-links { grid-column: 1 / -1; margin-top: 6px; }
  .app-field { margin-inline: calc(-1 * var(--margin)); }
  .shots { padding-inline: var(--margin); scroll-padding-inline: var(--margin); }
  .shot-cap { font-size: 14.5px; }
  .dd-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dd-list > li > a:first-child { font-size: 19px; }
  .dd-group h4 { font-size: 26px; }
  /* Lanes turn: one column per plugin, its stages stacked top to bottom. */
  .lanes-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lane-row { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 12px 6px 6px; }
  .lane-name { padding-left: 4px; font-size: 14px; }
  .lane-bars { flex-direction: column; }
  .lane-bars li { flex: none; height: 32px; padding: 0 8px; font-size: 12.5px; }
  .lanes figcaption { font-size: 14.5px; }
  .bg-line { font-size: 21px; line-height: 1.38; }
}

@media (prefers-reduced-motion: reduce) {
  .shot-link, .rail-btn { transition: none; }
  .shot-link:active, .app-field:is(:hover, :focus-within) .rail-btn:not(:disabled):active { transform: none; }
}

@media print {
  .app-field, .lanes { display: none !important; }
  .dd-intro { position: static; }
  .js .earlier .lane-bars li { clip-path: none !important; }
}