/* Highlights carousel: flat cards that snap one at a time, a 1px progress
   line instead of a scrollbar, and border-colour feedback in place of lift or shadow.
   Motion values are tokens so they can be tuned without touching the script.
   One easing curve (--lf-ease) is shared with the Engineering light field. */
.marketing-page{--ctl-in:400ms;--ctl-out:600ms;--link-line:#7d7364;--land-delay:350ms}
.work-section{--rail-gap:24px;--rail-drift-speed:32;--rail-resume-delay:6000ms;--rail-momentum:180ms}
.rail-tools{display:flex;align-items:center;gap:8px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;padding:0;background:none;border:1px solid var(--link-line);color:var(--ink);transition:border-color var(--ctl-out) var(--lf-ease)}
.icon-btn:hover:not(:disabled){border-color:var(--muted);transition-duration:var(--ctl-in)}
.icon-btn svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.icon-btn .icon-play path{fill:currentColor;stroke:none}
/* Pause and play share one cell and swap by opacity: 200ms in, 400ms out. */
.icon-btn .icon-pause,.icon-btn .icon-play{grid-area:1/1;transition:opacity var(--ctl-out) var(--lf-ease)}
.icon-btn .icon-pause,.icon-btn[data-paused=true] .icon-play{transition-duration:var(--ctl-in)}
.icon-btn .icon-play,.icon-btn[data-paused=true] .icon-pause{opacity:0;transition-duration:var(--ctl-out)}
.icon-btn[data-paused=true] .icon-play{opacity:1;transition-duration:var(--ctl-in)}
.rail{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.rail.is-dragging a{pointer-events:none}
.rail-track{list-style:none;margin:0;padding:0;display:flex;gap:var(--rail-gap)}
.work-card{flex:0 0 calc((100% - 2 * var(--rail-gap)) / 3);min-width:260px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);transition:border-color var(--lf-out) var(--lf-ease)}
.project-link{height:100%;padding:24px;display:flex;flex-direction:column}
.card-top{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.card-top img{position:relative;display:block;width:88px;height:64px;object-fit:cover;border:1px solid var(--line)}
/* Light field: a still pixel glow behind the illustration, 16px bleed on every
   side. Dim and lit stills stack; only the lit layer's opacity moves. */
.card-top::before,.card-top::after{content:'';position:absolute;z-index:-1;left:-16px;top:50%;width:120px;height:96px;margin-top:-48px;background:no-repeat 0 0/100% 100%;pointer-events:none}
.card-top::before{background-image:var(--lf-dim)}
.card-top::after{background-image:var(--lf-lit);opacity:0;transition:opacity var(--lf-out) var(--lf-ease)}
.lf-social-growth{--card-edge:#996b52;--lf-dim:url(/assets/light-field/social-growth-dim.svg);--lf-lit:url(/assets/light-field/social-growth-lit.svg)}
.lf-product-education{--card-edge:#737d4d;--lf-dim:url(/assets/light-field/product-education-dim.svg);--lf-lit:url(/assets/light-field/product-education-lit.svg)}
.lf-product-marketing{--card-edge:#8a7446;--lf-dim:url(/assets/light-field/product-marketing-dim.svg);--lf-lit:url(/assets/light-field/product-marketing-lit.svg)}
.lf-ads-launches{--card-edge:#9b6672;--lf-dim:url(/assets/light-field/ads-launches-dim.svg);--lf-lit:url(/assets/light-field/ads-launches-lit.svg)}
.lf-seo-aeo{--card-edge:#537c9e;--lf-dim:url(/assets/light-field/seo-aeo-dim.svg);--lf-lit:url(/assets/light-field/seo-aeo-lit.svg)}
.lf-web3-defi{--card-edge:#478575;--lf-dim:url(/assets/light-field/web3-defi-dim.svg);--lf-lit:url(/assets/light-field/web3-defi-lit.svg)}
@media(hover:hover){
  .work-card:hover{border-color:var(--card-edge,var(--muted));transition-duration:var(--lf-in)}
  .work-card:hover .card-top::after{opacity:1;transition-duration:var(--lf-in)}
}
.work-card:is(:focus-visible,:has(:focus-visible)) .card-top::after{opacity:1;transition-duration:var(--lf-in)}
.work-card:is(:focus-visible,:has(:focus-visible)){border-color:var(--accent);transition:none}
.work-card:focus-visible{outline-offset:-3px}
/* Drag dims at the 600ms out time; the extra .marketing-page beats the hover and focus rules. */
.marketing-page .rail.is-dragging .work-card{border-color:var(--line);transition-duration:var(--lf-out)}
.marketing-page .rail.is-dragging .card-top::after{opacity:0;transition-duration:var(--lf-out)}
@media(hover:none){.card-top::after{opacity:1;transition:none}.work-card{transition:none}}
/* Card ring: four quarter arcs in the card colour ink in over the art when the card wakes, 280ms each at 0, 40, 80 and 120ms
   (in ends by 400ms), then fade out together over 600ms. Opacity only; nothing rotates, moves or loops. */
.card-ring{position:absolute;left:0;top:0;width:88px;height:64px;pointer-events:none;color:var(--card-edge,var(--muted));fill:none;stroke:currentColor;stroke-width:1.5}
.card-ring path{opacity:0;transition:opacity var(--lf-out) var(--lf-ease)}
.card-ring path:nth-child(2){--i:1}.card-ring path:nth-child(3){--i:2}.card-ring path:nth-child(4){--i:3}
@media(hover:hover){.work-card:hover .card-ring path{opacity:1;transition-duration:280ms;transition-delay:calc(var(--i,0) * 40ms)}}
.work-card:is(:focus-visible,:has(:focus-visible)) .card-ring path{opacity:1;transition-duration:280ms;transition-delay:calc(var(--i,0) * 40ms)}
@media(hover:none){.card-ring path{opacity:1;transition:none}}
.marketing-page .rail.is-dragging .card-ring path{opacity:0;transition-duration:var(--lf-out);transition-delay:0s}
html[data-paused=true] .card-ring path{transition:none!important}
@media(prefers-reduced-motion:reduce){:root:not([data-motion="playing"]) .card-ring path{transition:none}}
@media(forced-colors:active){.card-ring{display:none}}
.marketing-page .section-dek{margin:4px 0 0;max-width:62ch;color:var(--muted);font-size:var(--t-body)}
.marketing-page .section-head h2{font-weight:600}
.marketing-page .work-card h3{margin:0 0 8px;font-weight:500}
.work-card p{margin:0 0 12px}
.rail-note{display:block;color:var(--muted);margin:0 0 16px}
.card-links{margin-top:auto;display:flex;flex-wrap:wrap;column-gap:20px;border-top:1px solid var(--line);font-size:14px}
.card-action{display:inline-flex;align-items:center;min-height:44px}
.card-action:focus-visible{outline-offset:2px}
/* Links: dim line at rest that inks in on hover. Colour only, never position or size. */
.marketing-page :is(.text-link,.card-action,.footer a){color:var(--muted);text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:var(--link-line);text-underline-offset:5px;transition:color var(--lf-out) var(--lf-ease),text-decoration-color var(--lf-out) var(--lf-ease)}
.marketing-page .story h3 a{text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color var(--lf-out) var(--lf-ease)}
@media(hover:hover){
  .marketing-page :is(.text-link,.card-action,.footer a):hover{color:var(--ink);text-decoration-color:var(--ink);transition-duration:var(--lf-in)}
  .marketing-page .story h3 a:hover{text-decoration-color:var(--ink);transition-duration:var(--lf-in)}
}
/* A Writing row is one target: the title link covers it, so the whole row opens the post and inks the title line. */
.marketing-page .story{position:relative}
.marketing-page .story h3 a::after{content:'';position:absolute;inset:0}
/* Focus shows the inked state at once and never transitions. */
.marketing-page :is(.text-link,.card-action,.story h3 a,.footer a,.icon-btn):focus-visible{transition:none}
.marketing-page :is(.text-link,.card-action,.footer a):focus-visible{color:var(--ink);text-decoration-color:var(--ink)}
.marketing-page .story h3 a:focus-visible{text-decoration-color:var(--ink)}
.rail-progress{position:relative;height:1px;margin-top:24px;background:var(--line);overflow:hidden}
.rail-progress span{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--rail-progress,0));transition:none}
@media(max-width:1024px){.work-card{flex-basis:calc((100% - var(--rail-gap)) / 2)}}
@media(max-width:440px){.work-card{flex-basis:88%;min-width:0}.project-link{padding:20px}}
/* Landing mark: after a #hash jump the target heading settles from muted to its own colour once.
   The delay is when the smooth scroll brings the heading into view (measured in tests/marketing-micro-motion.mjs). */
@keyframes land{from{color:var(--muted)}}
.marketing-page :is(.section:target .section-head h2,.faq-item:target summary){animation:land var(--lf-out) var(--lf-ease) var(--land-delay) 1 backwards}
html[data-paused=true] :is(.section:target .section-head h2,.faq-item:target summary){animation:none!important}
/* Pause motion (and reduced motion, which sets it) swaps states instantly; it
   must beat the hover duration rules above. */
html[data-paused=true] :is(.work-card,.icon-btn,.icon-btn svg,.text-link,.card-action,.story h3 a,.footer a),html[data-paused=true] .card-top::after{transition:none!important}
/* Reduced motion holds until the visitor picks "Enable motion". */
@media(prefers-reduced-motion:reduce){:root:not([data-motion="playing"]) .rail{scroll-behavior:auto}:root:not([data-motion="playing"]) :is(.work-card,.icon-btn,.rail-progress span),:root:not([data-motion="playing"]) .card-top::after{transition:none}}
@media(forced-colors:active){.card-top::before,.card-top::after{display:none}}
/* Hero: from 761px up the left column spans the film. The name starts level with the top of the film image
   (the figure's 1px border plus 12px padding is the 13px) and the craft lines end level with its bottom. Below that nothing changes.
   Muted lead-in over an ink lesson, three pairs; the hero is static. */
.marketing-page .crafts{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:20px}
.marketing-page .crafts .craft{display:block;font-size:var(--t-h);line-height:1.5;font-weight:400;color:var(--muted);text-wrap:pretty}
.marketing-page .crafts .lesson{display:block;margin-top:4px;font-size:var(--t-read);line-height:1.4;font-weight:500;color:var(--ink);text-wrap:balance}
@media(min-width:761px){
  .marketing-page .hero>div:first-child{align-self:stretch;display:flex;flex-direction:column;padding-block:13px}
  .marketing-page .hero h1{margin-bottom:0}
  .marketing-page .crafts{margin:auto 0 0;padding-top:24px;gap:clamp(28px,3.4vw,48px);max-width:600px}
  .marketing-page .crafts .lesson{font-size:var(--t-read-h);line-height:1.35}
}