/* Workflow pages: chalkthis.io/workflows and /workflows/<name> (Oct 23, 2026). Written by hand, not by the canvas,
   so scripts/import-kit.mjs leaves it alone. Loaded after chalkthis-web.css and home.css, and reuses their pieces:
   the sky and the blurred neighborhood, the clay stands, the dotted path, the dusk form and the night footer.
   The homepage loads it too, for the clickable workflow pictures. */

/* ---------- the homepage's workflow cards: the clay picture and the title open the workflow's page ---------- */
.home a.home-stand { color: inherit; text-decoration: none; cursor: pointer; }
.home a.home-stand img { transition: transform .22s ease-out, filter .22s ease-out; transform-origin: 30% 100%; }
.home a.home-stand:hover img { transform: translateY(-6px) scale(1.03); filter: drop-shadow(0 18px 18px var(--ground-shadow)); }
.home-service h3 a { color: var(--ink); text-decoration: none; }
.home-service h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold-trim); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.home-service h3 a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }
.home .home-all { align-self: flex-start; margin-left: calc(var(--space-2) * -1); }

/* ---------- hero: the same sky as the homepage, shorter, with the workflow's clay piece standing on the ground ---------- */
.wf-hero { position: relative; padding: 148px 0 var(--space-12); isolation: isolate; overflow: hidden; }
.wf-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(238, 232, 226, 0) 0%, rgba(238, 232, 226, 0) 60%, var(--ground) 96%); }
.wf-hero .home-backdrop img { object-position: center 70%; }
.wf-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: end; }
.wf-hero-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.wf-hero h1 { color: var(--mist); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); text-wrap: balance; }
.wf-new { font-size: 14px; }
.wf-kicker { color: var(--mist); opacity: .86; }
.wf-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; color: var(--mist); }
.wf-crumbs li { opacity: .9; }
.wf-crumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: .55; }
.wf-crumbs a { color: var(--mist); text-decoration: underline; text-decoration-color: rgba(242, 243, 244, .45); text-underline-offset: 3px; }
.wf-crumbs a:hover { text-decoration-color: var(--gold); }
.wf-crumbs a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-sm); }
.wf-hero-card { margin-top: var(--space-2); max-width: 640px; border-radius: var(--radius-xl); padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); color: var(--ink); }
.wf-lead { color: var(--ink); }
.wf-hero-art { position: relative; margin: 0; }
.wf-hero-art .home-stand { height: 460px; justify-content: center; margin-bottom: var(--space-4); }
.wf-hero-art .home-stand::after { left: 16%; width: 68%; }
.wf-hero-art .home-stand img { max-width: 100%; object-position: center bottom; filter: drop-shadow(0 26px 26px var(--ground-shadow)); }
.wf-hero--hub .wf-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.wf-hero--hub .wf-hero-art .home-stand { height: 420px; }
.wf-example { position: absolute; z-index: 3; left: -40px; bottom: 36px; width: 268px; border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); }
.wf-example-tag { color: var(--ink-muted); font-size: 12px; line-height: 16px; letter-spacing: .04em; }
.wf-example-line { color: var(--ink); }
.wf-example-done { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 600; color: var(--ink); }
.wf-example-done img { width: 18px; height: auto; flex: none; margin-top: 1px; }

/* ---------- sections ---------- */
.wf-eyebrow { color: var(--sapphire-ink); }
.wf-muted { color: var(--ink-muted); }
.wf-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; }
.wf-prose { display: flex; flex-direction: column; gap: var(--space-4); }
.wf-prose > p.body-l { color: var(--ink); max-width: 680px; }
.wf-prose .home-list { margin-top: var(--space-2); }
.wf-byline { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); margin-top: var(--space-2); }
.wf-byline a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-trim); text-underline-offset: 3px; }
.wf-fit { border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.wf-fit .home-list { gap: var(--space-4); }
.wf-what { padding-top: var(--space-12); }

.wf-control-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; padding-top: var(--space-12); border-top: 1px solid var(--line); }
.wf-control-grid .home-list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.wf-control-grid .home-list li:last-child { border-bottom: 0; }
.wf-side { display: flex; flex-direction: column; gap: var(--space-6); }
.wf-fact, .wf-numbers { margin: 0; border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); color: var(--ink); }
.wf-fact-text { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.4; font-weight: 500; font-variation-settings: 'opsz' 36; color: var(--ink); }
.wf-fact-text p { margin: 0; }
.wf-fact figcaption { color: var(--ink-muted); }
.wf-fact cite { font-style: normal; }
.wf-fact a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-trim); text-underline-offset: 3px; }
.wf-math { color: var(--ink-muted); }
.wf-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.wf-result .heading-1 { color: var(--ink); }
.wf-numbers .ck-btn { align-self: flex-start; margin-top: var(--space-2); }

.wf-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-16); margin-top: var(--space-12); }
.wf-qa { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.wf-qa h3 { color: var(--ink); }
.wf-qa p { color: var(--ink-muted); }

.wf-more { padding-top: var(--space-16); }
.wf-picker { list-style: none; padding: 0; margin-top: var(--space-12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.wf-pick { height: 100%; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: transform .16s ease-out; }
.wf-pick:hover { transform: translateY(-2px); }
.wf-pick:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.wf-pick-to { color: var(--sapphire-ink); }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .wf-hero-grid, .wf-hero--hub .wf-hero-grid, .wf-split, .wf-control-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .wf-hero-art { max-width: 560px; width: 100%; margin: 0 auto; }
  .wf-hero-art .home-stand { height: 380px; }
  .wf-example { left: 0; }
  .wf-faq { column-gap: var(--space-8); }
}

/* ---------- phone ---------- */
@media (max-width: 720px) {
  .wf-hero { padding-top: 116px; }
  .wf-hero h1.display-xl { font-size: 44px; }
  .wf-hero-card { padding: var(--space-6) var(--space-4); }
  .wf-hero-art .home-stand, .wf-hero--hub .wf-hero-art .home-stand { height: 260px; }
  .wf-example { position: relative; left: auto; bottom: auto; width: auto; margin: 0 var(--space-2); }
  .wf-fit, .wf-fact, .wf-numbers { padding: var(--space-6) var(--space-4); }
  .wf-fact-text { font-size: 19px; }
  .wf-faq, .wf-picker { grid-template-columns: minmax(0, 1fr); }
  .home .home-cta-row .ck-btn--lg { padding: var(--space-3) var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .home a.home-stand img, .wf-pick { transition: none; }
  .home a.home-stand:hover img, .wf-pick:hover { transform: none; }
}