/* Our approach (B5, DIRECTION_2): Working with Atlas as time in type, on the page's paper chapter. Tokens and the six type roles only. */
@property --apf{syntax:'<percentage>';inherits:false;initial-value:0%}
.ap-work .head{margin-bottom:clamp(40px,4.4vw,64px)}
.ap-time{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.ap-ph{position:relative}
/* each phase word in its own state: drawn in outline (Define), half filled (Integrate), solid (Deploy) */
.ap-w{display:block;font:600 var(--s-h1)/1 var(--f);letter-spacing:-.038em;padding-bottom:30px;
  color:transparent;-webkit-text-stroke:1.4px var(--ink);
  background:linear-gradient(0deg,var(--ink) var(--apf),transparent var(--apf));-webkit-background-clip:text;background-clip:text;transition:--apf 1.4s var(--ease-io)}
.ap-ph1 .ap-w{--apf:0%}
.ap-ph2 .ap-w{--apf:50%}
.ap-ph3 .ap-w{--apf:100%}
.js .ap-time.ap-pre .ap-ph2 .ap-w,.js .ap-time.ap-pre .ap-ph3 .ap-w{--apf:0%}
.ap-ph3 .ap-w{transition-delay:1.1s}
/* one ruled scale under the three words: time, running on past the edge of the page */
.ap-ph::before{content:'';position:absolute;left:0;top:calc(var(--s-h1) + 6px);width:calc(100% + var(--gap));height:10px;
  background:linear-gradient(rgba(14,15,15,.45),rgba(14,15,15,.45)) 0 100% / 100% 1px no-repeat,repeating-linear-gradient(90deg,rgba(14,15,15,.32) 0 1px,transparent 1px 12px) 0 100% / 100% 6px no-repeat}
.ap-ph3::before{width:calc(100% + 50vw);-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 80%);mask-image:linear-gradient(90deg,#000 40%,transparent 80%)}
.ap-ph::after{content:'';position:absolute;left:0;top:calc(var(--s-h1) - 8px);width:1px;height:24px;background:var(--ink)}
.ap-ph h3{color:var(--ink);margin-top:6px}
.ap-ph p{margin-top:12px;color:rgba(14,15,15,.52);max-width:24em}
.ap-ph p b{font-weight:560;color:var(--ink)}
.ap-work{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .ap-w{transition:none} }
@media (max-width:760px){
  .ap-time{display:block}
  .ap-ph+.ap-ph{margin-top:48px}
  .ap-ph::before{width:100%}
  .ap-ph3::before{width:calc(100% + var(--m))}
}

/* r17 (client, 324: "make this section like 10:32"): this section only keeps the heading measure and weights it had at 22:32
   (later site-wide changes widened section headings to 8 columns and lightened heading weights) */
@media (min-width:761px){ .ap-work .head-main{grid-column:1 / 8} }
.ap-work .h2{font-weight:580}
.ap-work .ap-ph h3{font-weight:560}

/* r17 (client: "this one was fine" / "this one is fine" of the 10:32 PM page): inside main this page is as at 22:32.
   Undone here only, inside main: the later site-wide heading weights, the short rule and full colour on section labels,
   and the section-head layout (heading over 7 columns, aligned to the foot). Nav, footer and the closing email field stay as now. */
main{--w-giant:700;--w-h1:600;--w-h2:580;--w-h3:560}
main .eyebrow{color:var(--fg2)}
main .paper .eyebrow{color:var(--ink2)}
main .eyebrow::before{content:none}
@media (min-width:761px){
  main .head{align-items:end}
  main .head-main{grid-column:1 / 8}
  main .head-side{grid-column:9 / 13}
}