/* work-with-me.html: the offer in one screen (portrait, claim, email), the gated-phases diagram under it, recent work
   as plain rows, and the email again at the end. Tokens from site.css. */
.wm { padding-block: 56px 40px; }
.wm-work { padding-top: 32px; }
.wm .page { display: grid; gap: 0; }
.wm-hero { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px 40px; align-items: start; }
.wm-hero .me { width: 168px; height: auto; display: block; border: 1px solid var(--rule); }
.wm-hero h1 { font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 18ch; }
.wm-hero .sub { margin: 16px 0 0; font-size: var(--step-1); color: var(--ink-2); max-width: 48ch; line-height: 1.45; }
.wm-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 0; }
.wm-act .addr { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.wm-act .mailto { font-family: var(--font-data); font-size: var(--step--1); color: var(--ink); text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.ways { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--step-1); color: var(--ink-2); max-width: 52ch; }
.ways strong { color: var(--ink); font-weight: 500; }
.wm-where { margin: 12px 0 0; color: var(--ink-2); font-family: var(--font-data); font-size: var(--step--1); }
@media (max-width: 700px) {
  .wm-hero { grid-template-columns: 1fr; }
  .wm-hero .me { width: 112px; }
}

/* the gates: a beam (800 nm red) passes one gate per phase; pressing a gate stops the beam there */
.gates-wrap { margin-top: 56px; }
.gates-hint { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: var(--step-0); }
.gates-note { margin: 4px 0 10px; color: var(--ink-2); font-family: var(--font-data); font-size: var(--step--1); min-height: 1.5em; }
.gates { position: relative; display: grid; grid-template-columns: minmax(0, 0.7fr) repeat(3, minmax(0, 1fr)) minmax(0, 0.6fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gates .beam { position: absolute; left: 0; right: 0; top: 47px; height: 3px; background: var(--rule-2); pointer-events: none; }
.gates .beam i { position: absolute; inset: 0; background: var(--signal); transform-origin: left center; transform: scaleX(var(--reach, 1)); transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1); }
.gates li { position: relative; padding: 0 24px 24px 0; display: grid; align-content: start; gap: 6px; }
.gates li > :not(.gate) { transition: opacity 200ms ease; }
.gates li.off > :not(.gate) { opacity: 0.5; }
.gates .gate { position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 10px; padding: 0 12px 0 0; height: 58px; background: var(--bg); border: 0; color: var(--ink-2); font: 500 var(--step--1) / 1 var(--font-data); cursor: pointer; text-align: left; }
.gates .post { flex: none; width: 16px; height: 58px; border: 1px solid var(--ink-2); border-radius: 3px; background: var(--surface); display: grid; place-items: center; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; }
.gates .post::after { content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--ink-2); }
.gates .gate .t { padding: 6px 10px; border: 1px solid var(--muted); border-radius: 3px; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.gates .gate[aria-pressed="true"] .post { background: var(--ink); border-color: var(--ink); }
.gates .gate[aria-pressed="true"] .t { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.gates .gate:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .gates .gate:hover .t, .gates .gate:hover .post { border-color: var(--ink); } }
.gates .gate:active .post { transform: scale(0.96); }
.gates .n { font: 400 var(--step--2) / 1.2 var(--font-data); color: var(--muted); }
.gates h3 { font-size: var(--step-1); }
.gates p { margin: 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; max-width: 30ch; }
.gates .get { color: var(--ink); font-family: var(--font-data); font-size: var(--step--1); margin-top: 4px; }
.gates .mark { margin: 20px 0 10px; height: 58px; display: flex; align-items: center; }
.gates .mark span { width: 14px; height: 14px; border-radius: 999px; background: var(--ink); }
.gates .start .mark span { width: 12px; height: 20px; border-radius: 3px; background: var(--signal); }
@media (max-width: 700px) {
  .gates { grid-template-columns: 1fr; border-bottom: 0; }
  .gates .beam { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .gates .beam i { transform-origin: center top; transform: scaleY(var(--reach, 1)); }
  .gates li { padding: 0 0 18px 30px; gap: 4px; }
  .gates .gate, .gates .mark { margin: 14px 0 4px -30px; height: 44px; }
  .gates .post { height: 44px; }
  .gates .gate .t { padding: 12px 14px; }
  .gates .mark span { margin-left: 1px; }
  .gates .start .mark span { margin-left: 2px; }
}
@media (prefers-reduced-motion: reduce) { .gates .beam i, .gates li > * { transition: none; } }

/* recent work: one lead case, then plain rows, all on one measure */
.wm-work h2, .wm-end h2 { font-size: var(--step-2); }
.wm-work .page { gap: 0; max-width: 1120px; }
.wm-rows { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.wm-rows li > * { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 6px 40px; padding: 22px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.wm-rows .who { font-family: var(--font-data); font-size: var(--step--1); color: var(--ink-2); grid-column: 1 / -1; }
.wm-rows strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); line-height: 1.25; }
.wm-rows span.d { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.wm-rows .go { color: var(--ink); font-family: var(--font-data); font-size: var(--step--2); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .wm-rows a:hover strong { color: var(--accent); } }
@media (max-width: 700px) { .wm-rows li > * { grid-template-columns: 1fr; } }

.wm-end .page { gap: 0; }
.wm-end h2 { max-width: 24ch; }
.wm-end .wm-act { margin-bottom: 32px; }
.wm-end .links { display: inline-flex; gap: 20px; }
#copy-email { min-height: 46px; padding: 10px 18px; }
.wm-rows .t2 { display: grid; gap: 14px; align-content: start; }
.wm-rows .t2 img { width: min(100%, 320px); height: auto; display: block; border: 1px solid var(--rule); }