/* 月老紅線 — inner pages (works / about / service / contact)
   shares tokens + thread with bold.css; only page-specific components here */

/* page hero */
.p-hero{padding:clamp(56px,9vw,140px) var(--g) clamp(56px,7vw,112px);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:end}
.p-hero .crumb{grid-column:1/-1;color:var(--mute-ink)}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--ver)}
.p-hero h1{font-weight:200;font-size:clamp(56px,10.5vw,196px);line-height:1.02;letter-spacing:-.01em}
.p-hero h1 em{font-style:normal;color:var(--ver)}
.p-hero .lead{font-size:19px;line-height:1.85;color:var(--paper);max-width:24em}
.p-hero__side{display:flex;flex-direction:column;gap:28px}
.p-dot{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--ver);vertical-align:middle}
.p-stats{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;border-top:1px solid var(--line-ink);padding-top:24px}
.p-stats b{display:block;font-weight:200;font-size:clamp(40px,4.4vw,72px);line-height:1;color:var(--ver)}
.p-stats span{font-size:14px;color:var(--mute-ink)}

/* ---------- works index ---------- */
.filters{position:sticky;top:59px;z-index:20;background:var(--paper);border-bottom:1px solid var(--line);padding:14px var(--g);display:flex;gap:16px;align-items:center;justify-content:space-between}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font:inherit;font-size:15px;font-weight:700;padding:.45em 1em;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;border-radius:999px;transition:background .25s var(--ease),color .25s var(--ease)}
.chip sup{font-weight:400;font-size:11px;margin-left:.3em;vertical-align:.5em}
.chip:hover{background:var(--paper-2)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.chip:active,.cta:active,.view button:active{transform:scale(.97)}
.view{display:flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;flex:none}
.view button{font:inherit;font-size:14px;font-weight:700;padding:.45em .9em;border:0;background:transparent;color:var(--ink);cursor:pointer}
.view button[aria-pressed=true]{background:var(--ver)}
.idx-wrap{padding:clamp(40px,5vw,72px) var(--g) clamp(80px,10vw,160px)}
.idx-note{color:var(--mute);margin-bottom:24px}
.idx{list-style:none;counter-reset:w}
.idx li[hidden]{display:none}
.idx a{display:grid;grid-template-columns:72px minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line);text-decoration:none;transition:padding .35s var(--ease),color .2s}
.idx li:last-child a{border-bottom:1px solid var(--line)}
.idx .no{font-weight:200;font-size:22px;color:var(--mute);font-variant-numeric:tabular-nums}
.idx h2{font-size:clamp(19px,1.6vw,24px);font-weight:700;line-height:1.45}
.idx .cl{font-size:15px;color:var(--mute)}
.idx .ct{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--mute);text-align:right}
.idx .th{display:none}
.idx a:hover{padding-left:20px}
.idx a:hover h2,.idx a:hover .no{color:var(--ver)}
/* grid view */
.idx.is-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 24px}
.idx.is-grid a{display:block;border:0;padding:0}
.idx.is-grid a:hover{padding:0}
.idx.is-grid .th{display:block;aspect-ratio:1;overflow:hidden;background:var(--paper-2);margin-bottom:14px}
.idx.is-grid .th img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.idx.is-grid a:hover .th img{transform:scale(1.04)}
.idx.is-grid .no{font-size:15px}
.idx.is-grid h2{font-size:18px;margin:4px 0 6px}
.idx.is-grid .ct{text-align:left}
/* hover peek (list view, fine pointer) */
.peek{position:fixed;left:0;top:0;width:300px;pointer-events:none;z-index:25;opacity:0;transform:translate(-50%,-50%) rotate(-2deg) scale(.9);transition:opacity .25s var(--ease),transform .35s var(--ease);background:var(--paper);padding:8px;box-shadow:0 30px 60px -24px rgba(21,17,14,.55)}
.peek.is-on{opacity:1;transform:translate(-50%,-50%) rotate(-2deg) scale(1)}
.peek img{width:100%;aspect-ratio:1;object-fit:cover}
.empty{padding:48px 0;color:var(--mute)}

/* ---------- about: ten chapters on one thread ---------- */
.letter{max-width:none}
.letter blockquote{font-weight:200;font-size:clamp(32px,4.2vw,72px);line-height:1.35;max-width:18em}
.letter blockquote b{font-weight:200;color:var(--ver)}
.letter__body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,72px);margin-top:clamp(40px,5vw,80px);color:var(--mute-ink);max-width:1100px}
.letter__sig{margin-top:32px;font-weight:700;color:var(--paper)}
.chapters{list-style:none}
.chapters li{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;padding:clamp(28px,3.4vw,56px) 0}
.chapters a{grid-column:2/9;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;text-decoration:none}
.chapters li:nth-child(even) a{grid-column:5/12}
.chapters .n{font-weight:200;font-size:clamp(72px,10vw,184px);line-height:.9;color:var(--ver);font-variant-numeric:tabular-nums;letter-spacing:-.03em;min-width:1.2em}
.chapters .k{color:var(--mute)}
.chapters h3{font-size:clamp(24px,2.6vw,40px);font-weight:700;line-height:1.35;margin:8px 0}
.chapters p{color:var(--mute);font-size:16px}
.chapters .quote-line{font-style:italic;color:var(--ink);margin-top:10px}
.chapters a:hover h3{color:var(--ver)}
.chapters a:hover .n{color:var(--ink)}
.creds{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-ink)}
.creds>div{padding:48px 32px 0 0}
.creds>div+div{border-left:1px solid var(--line-ink);padding-left:32px}
.creds b{display:block;font-weight:200;font-size:clamp(64px,8vw,140px);line-height:1;color:var(--ver)}
.creds h3{font-size:21px;font-weight:700;margin:24px 0 10px}
.creds p{color:var(--mute-ink);font-size:16px}
.strip{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(12px,1.6vw,24px);padding:0 var(--g) clamp(80px,10vw,160px)}
.strip figure:nth-child(2){margin-top:clamp(40px,8vw,140px)}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover}
.strip figure:first-child img{aspect-ratio:4/4.4}
.strip figcaption{font-size:14px;color:var(--mute);margin-top:10px}

/* ---------- service: staircase process ---------- */
.stair{list-style:none;display:grid;gap:0}
.stair>li{display:grid;grid-template-columns:repeat(12,1fr);padding:clamp(24px,3vw,44px) 0;border-top:1px solid var(--line)}
.stair>li:last-child{border-bottom:1px solid var(--line)}
.stair .in{grid-column:calc(1 + var(--i) * 1)/span 6;display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start}
.stair .n{font-weight:200;font-size:clamp(56px,6vw,104px);line-height:.9;color:var(--ver);font-variant-numeric:tabular-nums}
.stair h3{font-size:clamp(22px,2vw,30px);font-weight:700;line-height:1.4;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.tags li{display:inline-block;padding:.2em .8em;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--mute)}
.kit{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--paper);list-style:none;counter-reset:k}
.kit li{counter-increment:k;padding:28px 24px 32px 0;border-bottom:1px solid var(--line-ink);font-size:19px;font-weight:700}
.kit li::before{content:counter(k,decimal-leading-zero);display:block;font-weight:200;font-size:40px;color:var(--ver);line-height:1;margin-bottom:14px}
.p-works{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 24px}
.p-works a{text-decoration:none}
.p-works img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--paper-2);transition:transform .8s var(--ease)}
.p-works a:hover img{transform:translateY(-6px)}
.p-works .label{display:block;color:var(--mute);margin-top:16px}
.p-works h3{font-size:clamp(19px,1.6vw,24px);font-weight:700;line-height:1.45;margin-top:4px}
.p-works a:hover h3{color:var(--ver)}
.p-works .note{color:var(--mute);font-size:14px;margin-top:8px;line-height:1.6}
.tbl{overflow-x:auto;border-top:2px solid var(--ink)}
.dtable{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
.dtable th,.dtable td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--line);line-height:1.75}
.dtable thead th{font-size:13px;letter-spacing:.12em;color:var(--mute)}
.dtable tbody th{font-weight:700;width:22%;padding-right:24px}
.dtable td{color:var(--mute)}
.gcards .th{display:block;width:100%;aspect-ratio:1200/630;overflow:hidden;background:var(--paper-2);margin-bottom:16px}
.gcards .th img{width:100%;height:100%;object-fit:cover}
.steps-n .deliver{margin-top:14px}
.steps-n .deliver b{display:block;font-size:12px;letter-spacing:.06em;color:var(--mute);margin-bottom:8px;font-weight:700}
.rel{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.rel a{display:inline-block;padding:.5em 1.1em;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:700;font-size:15px}
.rel a:hover{background:var(--ink);color:var(--paper)}

/* ---------- contact ---------- */
.c-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:center;padding:clamp(48px,7vw,112px) var(--g)}
.c-top h1{font-weight:200;font-size:clamp(48px,7.4vw,136px);line-height:1.08}
.c-top h1 em{font-style:normal;color:var(--ver)}
.c-top .lead{font-size:19px;color:var(--paper);max-width:24em;margin-top:32px}
.promise{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;list-style:none}
.promise li{padding:.3em .9em;border:1px solid var(--line-ink);border-radius:999px;font-size:14px;color:var(--mute-ink)}
.c-map{max-width:440px;width:100%;justify-self:center}
.c-map .place{cursor:default;pointer-events:none}
.c-map .place:not(.hq){opacity:.35}
.c-map .hq text{font-size:22px}
.ways-big{list-style:none;border-top:2px solid var(--ink)}
.ways-big a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) 48px;gap:24px;align-items:center;padding:clamp(24px,3vw,44px) 12px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .35s var(--ease),padding .35s var(--ease)}
.ways-big .label{color:var(--mute)}
.ways-big b{font-weight:200;font-size:clamp(34px,5.4vw,96px);line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ways-big small{display:block;font-size:15px;color:var(--mute);margin-top:6px;font-weight:400}
.ways-big .ar{font-size:32px;justify-self:end;transition:transform .35s var(--ease)}
.ways-big a:hover{background:var(--ver);padding-left:28px}
.ways-big a:hover .label,.ways-big a:hover small{color:var(--ink)}
.ways-big a:hover .ar{transform:translateX(8px) rotate(-45deg)}
.ways-big li:first-child a{background:var(--ver)}
.ways-big li:first-child .label,.ways-big li:first-child small{color:var(--ink)}
.visit{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:clamp(48px,6vw,96px)}
.visit dt{font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--mute);margin-bottom:10px}
.visit dd{font-size:18px;line-height:1.7}
.visit a{text-underline-offset:4px}

@media (max-width:900px){
  .p-hero{grid-template-columns:1fr;align-items:start}
  .filters{top:53px;flex-wrap:wrap;padding:10px var(--g)}
  .view{display:none}
  .idx,.idx.is-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 14px}
  .idx a,.idx.is-grid a{display:block;border:0;padding:0}
  .idx a:hover{padding:0}
  .idx .th{display:block;aspect-ratio:1;overflow:hidden;background:var(--paper-2);margin-bottom:10px}
  .idx .th img{width:100%;height:100%;object-fit:cover}
  .idx .no{font-size:13px}.idx h2{font-size:16px;margin:2px 0 4px}.idx .cl{font-size:13px}.idx .ct{text-align:left;font-size:12px}
  .letter__body{grid-template-columns:1fr}
  .chapters li{display:block;padding:28px 0 28px 28px}
  .chapters a{grid-template-columns:1fr;gap:4px}
  .chapters .n{font-size:64px}
  .creds{grid-template-columns:1fr}
  .creds>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line-ink);margin-top:40px}
  .strip{grid-template-columns:1fr 1fr}.strip figure:first-child{grid-column:1/-1}.strip figure:nth-child(2){margin-top:0}
  .stair>li{display:block;padding:28px 0 28px 28px}
  .stair .in{gap:16px}
  .kit{grid-template-columns:1fr 1fr}
  .p-works{grid-template-columns:1fr 1fr;gap:32px 14px}
  .c-top{grid-template-columns:1fr}
  .c-map{max-width:300px}
  .ways-big a{grid-template-columns:1fr 32px;gap:4px 12px;padding:24px 8px}
  .ways-big b{grid-column:1}.ways-big .ar{grid-row:1/3;grid-column:2}
  .visit{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.peek,.idx a,.chip{transition:none}}

/* CJK headings: never orphan a single glyph — break only at our <br>/punctuation, emergency-wrap if it would overflow */
.p-hero h1,.c-top h1,.sec h2,.close h2{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.p-hero h1{font-size:clamp(48px,8vw,160px)}
.close h2{font-size:clamp(44px,8.4vw,168px)}
.faq h2{font-size:clamp(34px,4vw,64px)!important}
/* thread sentinel: an invisible anchor that keeps the thread in the gutter through dense content */
.t-end{display:block;height:1px}

@media (max-width:759px){.p-dot{margin-left:-20px}} /* thread hugs the left gutter on phones: start dot sits on it */
.idx.is-grid .cl{display:block}
@media (max-width:900px){.idx .cl{display:block}}
/* desktop: the thread drops from the start dot through a clear lane left of the hero copy */
@media (min-width:760px){.p-hero__side{padding-left:40px}.p-hero__side .p-dot{margin-left:-40px}}

/* ===== signature motion per page ===== */
/* works: 82-string harp */
.p-hero--harp{overflow:hidden;min-height:min(92svh,860px)}
.p-hero--harp>*:not(canvas):not(.harp-tip){position:relative;z-index:1;pointer-events:none}
.p-hero--harp a,.p-hero--harp .p-dot{pointer-events:auto}
#harp{position:absolute;inset:0;z-index:0;display:block;touch-action:pan-y}
.harp-tip{position:absolute;left:0;top:0;z-index:2;max-width:260px;background:var(--ver);color:var(--ink);padding:6px 10px;letter-spacing:.04em;text-transform:none;pointer-events:none;line-height:1.5}
.p-hero .hint{color:var(--mute-ink)}
@media (hover:none){.p-hero .hint{display:none}}
/* about: clothesline (JS adds .is-line on wide, motion-ok screens) */
#chapters.is-line{padding:0;z-index:6;background:var(--paper)}
.is-line .line-pin{position:sticky;top:var(--nav-h,75px);height:calc(100svh - var(--nav-h,75px));overflow:hidden;display:flex;flex-direction:column;padding:clamp(20px,4vh,48px) 0 clamp(16px,3vh,32px)}
.is-line .sec__head{flex:none;margin:0 var(--g) clamp(20px,4vh,48px);align-items:end}
.is-line .sec__head .label{margin-bottom:10px}
.is-line .sec__head h2{font-size:clamp(34px,min(4.4vw,7vh),76px)}
.is-line .line-track{flex:1;min-height:0;position:relative;padding:0 var(--g);will-change:transform;width:max-content}
.is-line .line-rope{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.is-line .line-rope path{fill:none;stroke:var(--ver);stroke-width:3;stroke-linecap:round}
.is-line .chapters{display:flex;gap:4vw;padding-top:24px;width:max-content}
.is-line .chapters li{display:block;padding:0;width:clamp(280px,min(26vw,44vh),400px);transform-origin:50% 0;transform:rotate(var(--sw,0deg));position:relative}
.is-line .chapters li::before{content:"";position:absolute;left:50%;top:-12px;width:14px;height:30px;margin-left:-7px;background:var(--ink);border-radius:3px;z-index:1}
.is-line .chapters li::after{content:"";position:absolute;left:50%;top:-8px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ver);z-index:2}
.is-line .chapters a{display:block;background:var(--paper-2);padding:clamp(24px,4.5vh,44px) clamp(22px,2vw,32px) clamp(20px,3.5vh,34px);margin-top:10px;box-shadow:0 30px 50px -34px rgba(21,17,14,.45);grid-column:auto}
.is-line .chapters li:nth-child(even) a{grid-column:auto;background:var(--ink);color:var(--paper)}
.is-line .chapters li:nth-child(even) p,.is-line .chapters li:nth-child(even) .k{color:var(--mute-ink)}
.is-line .chapters .n{display:block;font-size:clamp(56px,min(7vw,12vh),120px);margin-bottom:clamp(8px,1.6vh,18px)}
.is-line .chapters h3{font-size:clamp(20px,min(2vw,3.6vh),32px)}
.is-line .chapters a:hover .n{color:var(--ver)}
.is-line .chapters li:nth-child(even) a:hover h3{color:var(--ver)}
.is-line .line-count{position:absolute;right:var(--g);bottom:clamp(12px,2.4vh,28px);color:var(--mute);font-variant-numeric:tabular-nums}
/* service: identity being built (sticky panel, desktop) */
.build{display:none}
@media (min-width:901px){
  .proc.is-build .stair{grid-column:2}
  .proc.is-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,96px)}
  .proc.is-build .sec__head{grid-column:1/-1}
  .proc.is-build .build{display:block;grid-column:1;grid-row:2;position:sticky;top:calc(50svh - min(19vw,280px) + 30px);align-self:start;aspect-ratio:1;max-width:560px}
  .proc.is-build .stair{grid-row:2}
  .proc.is-build .stair>li{min-height:58vh;align-items:center;border:0;padding:0}
  .proc.is-build .stair>li:last-child{border:0}
  .proc.is-build .stair .in{grid-column:1/-1!important;opacity:.28;transition:opacity .5s var(--ease)}
  .proc.is-build .stair>li.is-on .in{opacity:1}
}
.build__svg{width:100%;height:auto;display:block;overflow:visible}
.build__svg *{vector-effect:non-scaling-stroke}
.build__svg line,.build__svg rect,.build__svg path,.build__svg circle{fill:none;stroke:var(--ink);stroke-width:1.5}
.build__svg text{fill:var(--mute);font-size:13px;font-weight:700;letter-spacing:.1em;stroke:none}
.build__svg .t-s{font-size:9px;font-weight:400}
.build__cap{margin-top:16px;color:var(--mute)}.build__cap b{color:var(--ver)}
.build .L{opacity:0;transition:opacity .6s var(--ease)}
.build .grid line{stroke:var(--line);stroke-width:1}
.build .scan{stroke-dasharray:6 8;transform-origin:200px 190px}
.build .dot{fill:var(--ink);stroke:none;transition:transform 1s var(--ease) calc(var(--i,0)*20ms),opacity .5s var(--ease),fill .5s}
.build .dot--me{fill:var(--ver);opacity:0}
.build .mark{transform-origin:200px 196px;transition:transform 1s var(--ease),opacity .6s var(--ease);opacity:0}
.build .mk-ring{stroke:var(--ink);stroke-width:2}
.build .mk-knot{stroke:var(--ver);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.build .mk-c{stroke:var(--ink);stroke-width:1.5}.build .mk-k{stroke:var(--ver);stroke-width:2.5}
.build .clear{stroke:var(--ver);stroke-dasharray:4 6}
.build .sw1{fill:var(--ink)}.build .sw2{fill:var(--paper)}.build .sw3{fill:var(--ver);stroke:var(--ver)}
.build .check{stroke:var(--ver);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease) .4s}
/* state machine */
.build[data-s="1"] .L1,.build[data-s="2"] .L2,.build[data-s="4"] .L4,.build[data-s="5"] .L5,.build[data-s="6"] .L6{opacity:1}
.build[data-s="2"] .dot{transform:translate(var(--dx),var(--dy))}
.build[data-s="2"] .dot--me{opacity:1}
.build[data-s="3"] .dot,.build[data-s="4"] .dot,.build[data-s="5"] .dot,.build[data-s="6"] .dot{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}
.build[data-s="3"] .mark{opacity:1}
.build[data-s="3"] .mk-knot,.build[data-s="5"] .mk-knot{stroke-dashoffset:0}
.build[data-s="5"] .mark{opacity:0;transform:scale(.3)}
.build[data-s="6"] .check{stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.build[data-s="1"] .scan{animation:scan 6s linear infinite}}
@keyframes scan{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.build *{transition:none!important}}
/* contact: the rope */
.rope{position:fixed;left:0;top:0;z-index:25;pointer-events:none}
.hint-rope{display:block;margin-top:8px;font-size:14px}
@media (hover:none),(prefers-reduced-motion:reduce){.hint-rope{display:none}}
.build__svg .mk-knot,.build__svg .check{vector-effect:none}
.build .spec-k{stroke:var(--ver);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.build .dim{stroke:var(--mute);stroke-width:1}
.build .L4 .sw1,.build .L4 .sw2,.build .L4 .sw3{stroke:var(--ink)}
/* service numbers: no thread, just a roll-up when the step becomes active */
.stair .n{display:inline-block;overflow:hidden;vertical-align:top}
.stair .n>span{display:block}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .proc.is-build .stair .n>span{transform:translateY(105%);transition:transform .8s var(--ease)}
  .proc.is-build .stair>li.is-on .n>span,.proc.is-build .stair>li.was-on .n>span{transform:none}
}
/* generic build layers for any service: .Ln = only at step n, .Cn = from step n onward, .draw = stroke draws on when its layer shows */
.build .C1,.build .C2,.build .C3,.build .C4,.build .C5,.build .C6,.build .L3{opacity:0;transition:opacity .6s var(--ease)}
.build[data-s="3"] .L3{opacity:1}
.build[data-s="1"] .C1{opacity:1}
.build[data-s="2"] .C1{opacity:1}
.build[data-s="2"] .C2{opacity:1}
.build[data-s="3"] .C1{opacity:1}
.build[data-s="3"] .C2{opacity:1}
.build[data-s="3"] .C3{opacity:1}
.build[data-s="4"] .C1{opacity:1}
.build[data-s="4"] .C2{opacity:1}
.build[data-s="4"] .C3{opacity:1}
.build[data-s="4"] .C4{opacity:1}
.build[data-s="5"] .C1{opacity:1}
.build[data-s="5"] .C2{opacity:1}
.build[data-s="5"] .C3{opacity:1}
.build[data-s="5"] .C4{opacity:1}
.build[data-s="5"] .C5{opacity:1}
.build[data-s="6"] .C1{opacity:1}
.build[data-s="6"] .C2{opacity:1}
.build[data-s="6"] .C3{opacity:1}
.build[data-s="6"] .C4{opacity:1}
.build[data-s="6"] .C5{opacity:1}
.build[data-s="6"] .C6{opacity:1}

.build .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .15s;vector-effect:none}
.build[data-s="1"] .C1 .draw,.build[data-s="2"] .C1 .draw,.build[data-s="2"] .C2 .draw,.build[data-s="3"] .C1 .draw,.build[data-s="3"] .C2 .draw,.build[data-s="3"] .C3 .draw,.build[data-s="4"] .C1 .draw,.build[data-s="4"] .C2 .draw,.build[data-s="4"] .C3 .draw,.build[data-s="4"] .C4 .draw,.build[data-s="5"] .C1 .draw,.build[data-s="5"] .C2 .draw,.build[data-s="5"] .C3 .draw,.build[data-s="5"] .C4 .draw,.build[data-s="5"] .C5 .draw,.build[data-s="6"] .C1 .draw,.build[data-s="6"] .C2 .draw,.build[data-s="6"] .C3 .draw,.build[data-s="6"] .C4 .draw,.build[data-s="6"] .C5 .draw,.build[data-s="6"] .C6 .draw,.build[data-s="1"] .L1 .draw,.build[data-s="2"] .L2 .draw,.build[data-s="3"] .L3 .draw,.build[data-s="4"] .L4 .draw,.build[data-s="5"] .L5 .draw,.build[data-s="6"] .L6 .draw{stroke-dashoffset:0}

.build .fill-ink{fill:var(--ink);stroke:none}.build .fill-ver{fill:var(--ver);stroke:none}.build .fill-p2{fill:var(--paper-2)}
.build .ver{stroke:var(--ver)}.build .thin{stroke-width:1}.build .dash{stroke-dasharray:4 6}
.build .move{transition:transform 1s var(--ease)}
/* step 7 (web has seven stages) */
.build .C7{opacity:0;transition:opacity .6s var(--ease)}
.build[data-s="7"] .L7,.build[data-s="7"] .C7{opacity:1}
.build[data-s="7"] .L7 .draw{stroke-dashoffset:0}
.build .rise{transform:translateY(0);transition:transform 1.2s var(--ease) .4s}
.build[data-s="5"] .rise{transform:translateY(-210px)}
.build .rise rect{opacity:.9}
@media (prefers-reduced-motion:no-preference){.build[data-s="5"] .walkers circle{animation:walk 3.2s var(--ease) infinite alternate}.build .walkers circle:nth-child(2n){animation-delay:-1.4s}}
@keyframes walk{to{transform:translate(12px,-8px)}}
/* ink-section variants */
.kit--4{grid-template-columns:repeat(4,1fr)}
.kit--4 li{font-size:17px;line-height:1.6;padding-right:32px}
.duo{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--paper)}
.duo>div{padding:40px 40px 0 0}.duo>div+div{border-left:1px solid var(--line-ink);padding-left:40px}
.duo b{display:block;font-weight:200;font-size:clamp(64px,8vw,140px);line-height:1;color:var(--ver)}
.duo h3{font-size:24px;font-weight:700;margin:20px 0 6px}.duo p{color:var(--mute-ink)}
.duo ul{list-style:none;margin-top:24px}.duo li{padding:12px 0;border-top:1px solid var(--line-ink)}
.bars{list-style:none;border-top:2px solid var(--paper)}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid var(--line-ink);position:relative}
.bars li::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;background:var(--ver);width:calc(var(--v)*1%*1.9);max-width:100%;transform-origin:left;transform:scaleX(var(--in,1));transition:transform 1.4s var(--ease)}
.bars span{font-size:20px;font-weight:700}.bars b{font-weight:200;font-size:clamp(40px,4.4vw,72px);line-height:1;color:var(--ver);font-variant-numeric:tabular-nums}
.lines4{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--paper)}
.lines4 a{display:flex;flex-direction:column;padding:36px 28px 32px 0;text-decoration:none;border-bottom:1px solid var(--line-ink)}
.lines4 a+a{border-left:1px solid var(--line-ink);padding-left:28px}
.lines4 b{font-weight:200;font-size:56px;line-height:1;color:var(--ver)}
.lines4 h3{font-size:21px;font-weight:700;margin:20px 0 12px}.lines4 p{color:var(--mute-ink);font-size:15px;flex:1}
.lines4 .go{margin-top:24px;font-weight:700}.lines4 a:hover h3{color:var(--ver)}
@media (max-width:900px){.kit--4,.lines4{grid-template-columns:1fr}.lines4 a+a{border-left:0;padding-left:0}.duo{grid-template-columns:1fr}.duo>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line-ink);margin-top:40px}}
/* hero stays put when the web font swaps in (CLS): a reserved height absorbs headline re-wrapping */
@media (min-width:901px){.p-hero{min-height:min(78svh,760px);grid-template-rows:auto 1fr;align-content:stretch}.p-hero h1,.p-hero__side{align-self:end}}
[data-tone=ink] .tags li{color:var(--mute-ink);border-color:var(--line-ink)}
/* about strip: photos at their own proportions */
.strip{align-items:start}.strip img,.strip figure:first-child img{aspect-ratio:auto;height:auto}
/* works list view: a small square thumbnail leads each row — images never float over the titles */
@media (min-width:901px){
  .idx:not(.is-grid) a{grid-template-columns:64px 72px minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1fr);align-items:center}
  .idx:not(.is-grid) .th{display:block;width:64px;aspect-ratio:1;overflow:hidden;background:var(--paper-2)}
  .idx:not(.is-grid) .th img{width:100%;height:100%;object-fit:cover}
}