/* ============================================================================
   craft/p-work.css · the Work page
   Loaded after the kit (scrollcraft.css, d-current.css, inner.css). Only what
   the kit does not cover: the pattern's four feeds, the case skeleton every
   case shares (head, the three part dl, the plate), and the signature stage
   where a dozen marks collapse into one. Colours, type and motion timings are
   D's tokens; nothing here restyles a kit class for other pages.
   ========================================================================== */

/* ---- the text link (hero, off the record) -----------------------------------
   A mono link with a hairline under it, sized to a 44px target. Ash on ink is
   5.3:1; on cream it takes the kit's small-moss ink (5.06:1). */
.w-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ash);
  border-bottom:1px solid var(--line-dim);transition:color .16s var(--e-io),border-color .16s var(--e-io)}
.w-link:hover{color:var(--lime);border-color:var(--lime)}
.paper .w-link{color:var(--moss-ink);border-color:var(--line-paper)}
.paper .w-link:hover{color:var(--ink);border-color:var(--ink)}
.phero .cta-row .w-link{margin-left:.6rem}

/* ============ THE PATTERN (cream): four items, four feeds, one desk ============ */
.w-pattern .sec-head{max-width:17ch}
.w-pat{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:2.6rem}
.w-pat li{position:relative;outline:1px solid var(--hl);padding:clamp(1.3rem,2.4vw,2rem) clamp(1.1rem,2vw,1.6rem) clamp(1.7rem,3vw,2.4rem)}
/* a moss corner tick, as the kit's lens */
.w-pat li::before{content:"";position:absolute;top:8px;left:8px;width:9px;height:9px;border-top:1px solid var(--moss-deep);border-left:1px solid var(--moss-deep)}
.w-pat__n{display:block;margin-top:.35rem;color:var(--moss-ink)}
.w-pat p{margin-top:.9rem;font-family:var(--font-display);font-weight:700;font-size:clamp(1.08rem,1.45vw,1.3rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
/* the wire hangs off the bottom edge of the four cells: its x positions are the
   cells' centres (12.5%, 37.5%, 62.5%, 87.5% of 1200) */
.w-pat__wire{margin-top:0}
.w-pat__end{margin:1.4rem auto 0;text-align:center;max-width:none}
.w-pat__end .mossword{display:block}
/* The rail: at 900px and below the four cells stack and the row wire goes
   (its feeds are drawn to the four columns), so the pen draws the same desk
   down a rail beside them, in book.html's route grammar. Each item carries a
   node on its top edge, with a tick into that edge, and a run down to the
   next node; the last run stops at the list's foot. The end line carries the
   rest: a run from the list's foot down to the desk, a larger ring beside
   its first line, and a tick in toward the words. Runs stretch with their
   item (preserveAspectRatio none on a 24 unit box drawn 24px wide and at
   least 24px tall, so a vertical stroke keeps its weight); nodes never
   stretch. Each svg is its own wire, drawn as it clears the bottom of the
   viewport (data-to="0": over a quarter of the section's travel). */
.w-rail{display:none}
@media(max-width:900px){
  .w-pat{grid-template-columns:minmax(0,1fr);padding-left:2.25rem}
  .w-pat__wire{display:none}
  /* balanced, so where the rail's gutter leaves "It always ends at" one
     word too long for a phone it breaks two and two, never leaving "at" alone */
  .w-pat__end{position:relative;text-align:left;margin:2.4rem 0 0 2.25rem;text-wrap:balance}
  /* it carries the rail's last run, which must meet the run above it: the
     line fades in without the reveal's 14px lift, so the join never opens */
  .w-pat__end.rv{transform:none}
  .w-pat .w-rail,.w-pat__end .w-rail{display:block;position:absolute;left:-30px;width:24px;margin:0;overflow:visible}
  .w-pat .w-rail--node{top:-12px;height:24px}
  /* from under this node (r6 plus its stroke) to just above the next: the
     item's padding box plus the 1px grid gap, less the two node radii */
  .w-pat .w-rail--run{top:8px;height:calc(100% - 15px)}
  .w-pat li:last-child .w-rail--run{height:calc(100% - 8px)}
  /* in the end line (the kicker, line-height .96): the first line's middle
     sits .48em down. The run starts at the list's foot (the line's 2.4rem
     margin above it) and stops at the ring's top (r9 plus its stroke). */
  .w-pat__end .w-rail--in{top:-2.4rem;height:calc(2.4rem + .48em - 11px)}
  .w-pat__end .w-rail--desk{top:calc(.48em - 12px);height:24px}
}

/* ============ THE CASE SKELETON ============ */
.w-case{border-top:1px solid var(--line-dim)}
.w-case__head .sec-head{max-width:19ch;margin:1.1rem 0 0}
.w-client{display:block;margin-top:1rem;color:var(--lime);line-height:1.7;max-width:62ch}
/* the three parts of every case: a real definition list, outline-drawn cells */
.w-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0}
.w-trio>div{position:relative;outline:1px solid var(--hl);padding:clamp(1.3rem,2.4vw,1.9rem)}
.w-trio>div::before{content:"";position:absolute;top:8px;left:8px;width:9px;height:9px;border-top:1px solid var(--lime);border-left:1px solid var(--lime);pointer-events:none}
.w-trio dt{margin-top:.35rem;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.w-trio dd{margin:.75rem 0 0;font-size:clamp(.98rem,1.2vw,1.06rem);line-height:1.55;color:var(--ash)}
/* the reading runs dim to bright: the interruption in ash, what we built in
   bone, what came back in the lime outcome face */
.w-trio>div:nth-child(2) dd{color:#F4F4F0}
/* the kit's .outcome is lime; the dd colour above outranks a bare class, so restate it */
.w-trio dd.outcome{margin-top:.75rem;line-height:1.12;color:var(--lime)}
.w-trio--stack{grid-template-columns:minmax(0,1fr)}
@media(max-width:820px){.w-trio{grid-template-columns:minmax(0,1fr)}}

/* case 01: the field holds the three parts; the plate and the quote below */
.w-field{margin-top:2.2rem}
/* the field's mono label (EVERY CASE · EVERY TIME · BY HAND) names the
   workbook, so it leaves with it (the kit fades it on --scr) and the settled
   panel ends on its content, with no band held for it. It sits as a tab
   across the frame's top edge, clear of the corner tick: the half inside the
   frame covers only the cells' top padding (the first line of type starts
   about 26px down on a phone, 36px on a wide screen), so it never prints
   over a line of the case while it fades, at any width; and at the top it is
   read at full strength as the picture arrives, where at the foot of a tall
   stacked field it had already faded before it came on screen. */
.w-field .field__lbl{top:-11px;bottom:auto;left:22px;line-height:1.3;white-space:nowrap}
.w-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center;margin-top:clamp(2rem,7vh,4.4rem)}
.w-quote{margin-top:0}
@media(max-width:820px){.w-row{grid-template-columns:minmax(0,1fr)}}

/* the plate: the kit's .case-visual (a D screen) carrying the numbers. Each
   fact, with the dot that follows it, is one unit (.w-u) and never splits, so
   a number always stays with its unit ("70 working days", "1 month") and a
   dot never starts a line; the lines break only after a dot, balanced. */
.w-plate .bignum small{max-width:42ch;text-wrap:balance}
.w-u{white-space:nowrap}
.w-plate__tag{position:absolute;top:14px;right:14px;z-index:2;color:var(--ash)}
.w-plate .tick{z-index:2}
/* Elsa's portrait sits in the plate's bottom corner, across from the numbers,
   and boots on entry. Low in the plate, it arrives last: the case's tiles
   (data-settle 0.56) have finished before 35% of it is on screen, so the two
   never run at once, and the plate and her words then sit still before the
   peak. */
.w-elsa{position:absolute;bottom:clamp(1rem,2.2vw,1.5rem);right:clamp(1rem,2.2vw,1.5rem);z-index:2;margin:0;
  width:clamp(88px,9vw,120px);height:clamp(88px,9vw,120px);background:var(--ink-2)}
/* a scene plate: the numbers keep the kit's scrim under them */
.w-plate--scene .cv-k{display:none}
.w-plate--scene .w-plate__tag{background:rgba(9,9,12,.62);padding:.24rem .5rem;color:var(--lime);font-size:.58rem}

/* cases 03 and 04: the three parts beside the plate */
.w-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:start;margin-top:2.2rem}
.w-split--flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media(max-width:900px){.w-split,.w-split--flip{grid-template-columns:minmax(0,1fr)}}
/* the plate holds beside the three parts while they are read (wide screens only) */
@media(min-width:901px){.w-hold{position:sticky;top:calc(var(--nav-h) + 1.6rem)}}
.w-note{margin-top:1.3rem;padding-left:1rem;border-left:1px solid var(--line-lime);color:var(--ash);font-size:.95rem;line-height:1.55;max-width:52ch}

/* case 04: Jill's words, written through the scan. D's big quote is set for a
   one-line maxim; this is a paragraph, so it keeps the display face at a
   reading size, in sentence case. */
.w-jill{margin-top:clamp(2.6rem,5vw,4rem);max-width:none}
.w-jill .q__scan{font-size:clamp(1.3rem,2.3vw,2.05rem);line-height:1.2;letter-spacing:-.01em;text-transform:none}
.w-jill .q__words{max-width:40ch;text-wrap:pretty}

/* ============ CASE 02 · THE SIGNATURE ============
   A pinned stage on desktop that holds the peak and nothing else: the case
   label, the headline at the page's largest size, twelve outline marks (the
   page's largest mark) and the count. The marks, skewed like the brand's own
   tile, collapse left into the first; it fills lime and takes a small hit,
   the second half of the headline lights, and a lime track runs out to 500+.
   craft/p-work.js drives it from the act's pinned p (or the row's own travel
   where the pin has become a section). The resting CSS is the opening frame.
   The three parts of the case follow the pin in flow (.w-sig__after). */
.w-qa{border-top:1px solid var(--line-lime)}
.w-sig,.w-sig__stage{background:var(--ink)}
.w-sig__stage .kanji{right:-3vw;top:-4%;font-size:min(34vw,420px);will-change:transform}
.w-sig__stage .wrap{position:relative;z-index:2}
/* 6.6rem (105.6px) is under the 110.7px at which "Now it takes one." stops
   fitting the 1144px wrap, so each half holds one line at every desktop size.
   Below the cap the vw term keeps the same margin (the wrap is 92% of the
   viewport, the longer half 77%). A half may still wrap, balanced, when a
   reader's own spacing widens the letters; that beats clipping it. */
.w-sig__h{font-size:clamp(2.4rem,min(7.4vw,12vh),6.6rem);line-height:.88;max-width:none;margin:1rem 0 0}
.w-sig__h span{display:block;text-wrap:balance}
.w-sig__b{color:var(--ash);transition:color .34s var(--e-io)}
.w-sig.is-one .w-sig__b{color:var(--lime)}
.w-marks{--w-gap:clamp(8px,1vw,14px);position:relative;display:flex;align-items:flex-end;gap:clamp(1.2rem,3vw,2.6rem);
  margin:clamp(1.4rem,4.2vh,2.8rem) 0 0}
.w-marks__row{--w-mh:clamp(64px,17vh,176px);position:relative;flex:1 1 auto;min-width:0;display:flex;gap:var(--w-gap);height:var(--w-mh)}
.w-marks__row i{position:relative;flex:1 1 0;min-width:0;max-width:64px;height:100%;border:1.5px solid var(--lime);
  transform:skewX(-8deg);transform-origin:50% 100%;will-change:transform,opacity}
/* the first mark fills as the others land in it */
.w-marks__row i:first-child::before{content:"";position:absolute;inset:0;background:var(--lime);opacity:var(--w-fill,0)}
/* the track runs from the one mark out to the count, in the accent at full
   weight so the collapse and the number read as one move. p-work.js sets its
   left edge from the first mark's measured width. */
.w-marks__track{position:absolute;left:60px;right:0;top:50%;height:2px;margin-top:-1px;background:var(--lime);
  transform:scaleX(var(--w-track,0));transform-origin:0 50%}
.w-marks__track::after{content:"";position:absolute;right:0;top:-6px;width:2px;height:14px;background:var(--lime)}
.w-marks__read{flex:0 0 auto;max-width:25rem;opacity:var(--w-read,1)}
.w-marks__n{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,min(6vw,11vh),5.6rem);line-height:.86;
  color:var(--lime);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.w-marks__cap{display:block;margin-top:.7rem;color:#F4F4F0;line-height:1.6;letter-spacing:.14em;text-wrap:balance}
/* the three parts, in flow right under the pin, on the same ink; no top
   padding, since the stage's own air above them is the beat after the peak */
.w-sig__after{padding:0 0 clamp(3.4rem,7vw,5.6rem)}
@media(max-width:900px){
  .w-marks{flex-direction:column;align-items:stretch}
  .w-marks__read{max-width:none}
  /* stacked, the row reaches the wrap's content edge, and skewX(-8deg) from
     the foot throws each mark's top right by tan(8deg) of its height (13px
     on a phone, 25px at the 176px cap). The row keeps that overhang as its
     own right padding, so the last mark's top corner lands on the content
     edge; the track (right:0, the padding box) still runs to the edge. */
  .w-marks__row{padding-right:calc(var(--w-mh) * .1406 + 1px)}
}
/* ============ OFF THE RECORD: the quiet section ============ */
.w-off .sec-head{max-width:18ch}
.w-off .lede{margin-top:.4rem;max-width:58ch}
.w-off .rv+.rv .w-link{margin-top:1.2rem}
.w-off{overflow:hidden}
.w-off .wrap{position:relative;z-index:2}
/* 非公開, "not public": set vertically down the right edge, furniture only */
.w-off__kj{right:2vw;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;white-space:nowrap;font-size:min(15vw,210px);line-height:1}
/* on a phone the column is full width and the glyphs would sit behind the
   small moss link; the telemetry line already carries 非公開 there */
@media(max-width:640px){.w-off__kj{display:none}}

/* ============ THE CLOSE ============ */
.cta-band .w-phil{max-width:30ch;margin:0 auto 1.4rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.15;letter-spacing:-.01em;color:var(--lime);text-wrap:balance}
.cta-band .reg{color:var(--ash)}

/* ============ PHONES ============ */
@media(max-width:640px){
  .phero .cta-row .w-link{margin-left:0;justify-content:center}
  .w-case__head .sec-head{font-size:clamp(2rem,9.6vw,3rem)}
  .w-sig__h{font-size:clamp(2.1rem,10.4vw,3.2rem)}
  .w-marks__row{--w-mh:clamp(64px,11vh,96px)}
  .w-jill .q__scan{font-size:clamp(1.15rem,5.2vw,1.45rem)}
  .w-plate .bignum small{font-size:.58rem}
}

/* ============ REDUCED MOTION: the finished state ============ */
@media(prefers-reduced-motion:reduce){
  .w-sig__b{transition:none}
  .w-marks__row i{will-change:auto}
  .w-link{transition:none}
}