/* =====================================================================
   SPAN · Home
   The hero (the name as the root of the system) and the spans below it:
   02 capabilities, 03 selected work, 04 systems (night), 06 ProtoCode,
   07 about, 08 contact. Tokens come from tokens.css.
   ===================================================================== */
/* Span · first viewport.
   The name is the root of the system: its three diacritics (š, ž, ć) are the origins every request starts from.
   One neutral environment; cobalt = structure that is active; ember = the live request only; violet exists only
   inside the depth gradient (cobalt → violet → ember, interpolated by hop depth 0–6). */

/* ---------- frame ---------- */
.hero{
  --rail-x:clamp(20px,2.9vw,52px);
  --fs:min(16.6vw,30.5vh);
  --name-x:calc(var(--rail-x) + 5.4vw);
  --name-y:max(118px,15.5vh);
  --i1:0em; --i2:.64em;
  --axis-y:46px;
  position:relative;height:100%;min-height:560px;overflow:hidden;background:var(--bg);
}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background-image:var(--noise);opacity:var(--noise-op);mix-blend-mode:var(--noise-blend)}
#field,#marks{position:absolute;inset:0;width:100%;height:100%;display:block}
#field{z-index:1}
#marks{z-index:3;pointer-events:none}
.hero.near{cursor:pointer}
/* trace rail: the time axis of the whole site; it keeps going below the fold */
.rail{position:absolute;left:var(--rail-x);top:0;bottom:-2px;width:1px;background:var(--rule-2);z-index:2;transform-origin:top}
.rail::before{content:"";position:absolute;left:-3px;top:22px;width:7px;height:7px;border-radius:50%;background:var(--ember)}
.meta{position:absolute;left:calc(var(--rail-x) + 16px);top:17px;z-index:2;font-family:var(--f-mono);font-size:10.5px;line-height:1.6;letter-spacing:.02em;font-stretch:87.5%;color:var(--fg3);font-variant-numeric:tabular-nums;pointer-events:none}
.meta b{font-weight:400;color:var(--fg2)}
/* ---------- name: the root span ---------- */
.name{position:absolute;z-index:2;margin:0;left:var(--name-x);top:var(--name-y);
  font-family:var(--f-display);font-weight:620;font-stretch:75%;font-size:var(--fs);line-height:.94;letter-spacing:-.017em;
  color:var(--fg);white-space:nowrap;pointer-events:none;font-kerning:normal}
.name .l{display:block}
.name .l1{padding-left:var(--i1)}
.name .l2{padding-left:var(--i2)}
.bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.hero.pre .name{font-stretch:62%;letter-spacing:.02em}
.hero.pre .rail{transform:scaleY(0)}
.hero.boot .name{animation:settle 1150ms var(--ease) both}
@keyframes settle{from{font-stretch:62%;letter-spacing:.02em}to{font-stretch:75%;letter-spacing:-.017em}}
.hero.boot .rail{animation:drawY 900ms var(--ease) both}
@keyframes drawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.role{position:absolute;z-index:2;left:calc(var(--name-x) + .04em);top:calc(var(--name-y) - 40px);
  font-family:var(--f-display);font-stretch:118%;font-weight:450;font-size:clamp(15px,1.12vw,19px);letter-spacing:.012em;color:var(--fg);pointer-events:none}
.role i{font-style:normal;position:absolute;right:calc(100% + 12px);top:50%;width:calc(var(--name-x) - var(--rail-x) - 12px);height:1px;background:var(--fg)}
.role i::before{content:"";position:absolute;left:-2px;top:-2px;width:5px;height:5px;background:var(--fg);border-radius:50%}
.statement{position:absolute;z-index:2;left:calc(var(--name-x) + var(--fs) * .64);top:calc(var(--name-y) + var(--fs) * 1.92 + 3.4vh);
  max-width:24ch;margin:0;font-family:var(--f-read);font-weight:380;font-size:clamp(19px,1.62vw,27px);line-height:1.34;letter-spacing:-.004em;color:var(--fg);pointer-events:none;text-wrap:pretty}
.statement em{font-style:italic;color:var(--fg2)}
/* ---------- navigation: endpoints on the system's axis ---------- */
.nav{position:absolute;z-index:2;top:0;left:47%;right:0;height:calc(var(--axis-y) + 60px)}
.axis{position:absolute;left:0;right:-2px;top:var(--axis-y);height:1px;background:var(--rule-2)}
.nav a{position:absolute;top:var(--axis-y);display:block;padding:14px 10px 10px 0;transform:translateX(-3.5px)}
.nav a .dot{position:absolute;left:0;top:-3.5px;width:8px;height:8px;border-radius:50%;background:var(--bg);border:1px solid var(--fg2);transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.nav a .lbl{display:block;padding-left:0;font-family:var(--f-display);font-stretch:100%;font-weight:500;font-size:15px;letter-spacing:.005em;position:relative;color:var(--fg)}
.nav a .lbl::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--cobalt);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease) .1s}
.nav a .sub{display:block;margin-top:2px;font-family:var(--f-mono);font-size:10px;font-stretch:87.5%;letter-spacing:.02em;color:var(--fg3)}
.nav a:hover .dot,.nav a:focus-visible .dot,.nav a.reached .dot{background:var(--cobalt);border-color:var(--cobalt)}
.nav a.reached .lbl::after{transform:scaleX(1)}
.nav a.ping .dot{border-color:var(--ember);transform:scale(1.35)}
.n-about{left:0}.n-work{left:15%}.n-writing{left:30%}.n-pc{left:66%}
.boundary{position:absolute;z-index:1;top:-1px;right:-1px;left:calc(47% + 53% * .58);height:calc(var(--axis-y) + 74px);
  border-left:1px dashed var(--fg3);border-bottom:1px dashed var(--fg3);transition:border-color .5s var(--ease)}
.boundary.hit{border-color:var(--ember)}
.boundary span{position:absolute;right:16px;bottom:8px;font-family:var(--f-mono);font-size:10px;font-stretch:87.5%;color:var(--fg3);letter-spacing:.02em}
/* ---------- next span ---------- */
.cta{position:absolute;z-index:2;left:var(--rail-x);bottom:max(36px,5.6vh);display:flex;align-items:center;gap:14px;padding:6px 10px 6px 0;transform:translateX(-4px)}
.cta .dot{width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--fg);flex:none;transition:background .3s var(--ease)}
.cta .lbl{font-family:var(--f-display);font-stretch:100%;font-weight:500;font-size:15px}
.cta .sub{font-family:var(--f-mono);font-size:10px;font-stretch:87.5%;color:var(--fg3);margin-left:2px}
.cta:hover .dot,.cta:focus-visible .dot,.cta.reached .dot{background:var(--cobalt);border-color:var(--cobalt)}
/* ---------- depth scale: the only gradient, and it is a legend ---------- */
.scale{position:absolute;z-index:2;right:max(24px,3vw);bottom:max(38px,5.8vh);display:grid;gap:7px;pointer-events:none;
  font-family:var(--f-mono);font-size:10px;font-stretch:87.5%;color:var(--fg3);letter-spacing:.02em}
.scale i{display:block;width:132px;height:2px;background:linear-gradient(90deg,var(--cobalt),var(--violet) 55%,var(--ember))}
.scale div{display:flex;justify-content:space-between;width:132px;font-variant-numeric:tabular-nums}
/* ---------- tablet portrait ---------- */
@media (min-width:720px) and (max-width:1100px) and (orientation:portrait){.hero{--fs:18.5vw;--i2:.3em;--name-y:30vh}
.statement{left:calc(var(--name-x) + var(--fs) * .3)}
.nav{left:30%}.boundary{left:calc(30% + 70% * .58)}}
/* ---------- phone: the same system, turned on its axis ----------
   The field sits above; the name anchors the bottom with its diacritics facing up into it;
   navigation becomes the axis along the bottom edge. */
@media (max-width:719px){.hero{--rail-x:12px;--fs:22.4vw;--name-x:26px;--i1:.98em;--i2:0em;--axis-y:auto;min-height:620px}
.meta{left:26px;top:14px}
.rail::before{top:19px}
.role{left:26px;top:46px;font-size:15px}
.role i{display:none}
.statement{left:26px;right:20px;top:88px;max-width:22ch;font-size:clamp(19px,5.4vw,23px)}
.name{top:auto;bottom:96px}
.nav{top:auto;bottom:0;left:26px;height:96px}
.axis{top:auto;bottom:38px}
.nav a{top:auto;bottom:38px;padding:0 8px 14px 0}
.nav a .dot{top:auto;bottom:-4.5px}
.nav a .lbl{font-size:14px}
.nav a .sub{display:none}
.n-about{left:0}.n-work{left:22%}.n-writing{left:42%}.n-pc{left:70%}
.boundary{top:auto;bottom:-1px;left:calc(26px + (100% - 26px) * .655);height:84px;border-bottom:0;border-top:1px dashed var(--fg3)}
.boundary span{display:none}
.cta,.scale{display:none}}
@media (max-height:640px) and (min-width:720px){.scale{display:none}}
@media (prefers-reduced-motion: reduce){.hero.boot .name,.hero.boot .rail{animation:none}.hero.pre .name{font-stretch:75%;letter-spacing:-.017em}.hero.pre .rail{transform:none}}

/* =====================================================================
   SPAN · homepage continuation
   Two axes extracted from the hero govern everything below it:
   A1 = the name's left edge (rail + 5.4vw), A2 = the second line's indent (A1 + 0.64 × name size).
   ===================================================================== */

.hero{height:100svh}
/* ---------- the rail continues through every span ---------- */
.sec{position:relative}
.sec::before{content:"";position:absolute;left:var(--rail-x);top:0;bottom:0;width:1px;background:var(--rule-2);z-index:2}
.head{position:fixed;left:calc(var(--rail-x) - 3px);top:22px;width:7px;height:7px;border-radius:50%;background:var(--ember);z-index:40;pointer-events:none;will-change:transform}
/* span header: a leader from the rail, like the hero's role line */
.sh{position:relative;z-index:3;padding-left:var(--ax1);padding-right:var(--gut);font-family:var(--f-mono);font-size:10.5px;font-stretch:87.5%;letter-spacing:.02em;color:var(--fg3);display:flex;flex-wrap:wrap;gap:4px 14px;line-height:1.6;font-variant-numeric:tabular-nums}
.sh::before{content:"";position:absolute;left:var(--rail-x);top:.8em;width:calc(var(--ax1) - var(--rail-x) - 12px);height:1px;background:var(--fg)}
.sh::after{content:"";position:absolute;left:calc(var(--rail-x) - 2px);top:calc(.8em - 2px);width:5px;height:5px;border-radius:50%;background:var(--fg)}
.sh b{font-weight:400;color:var(--fg2)}
.sh .x{color:var(--ember)}
.t1{font-family:var(--f-display);font-weight:600;font-stretch:82%;font-size:clamp(40px,4.3vw,66px);line-height:1;letter-spacing:-.016em;margin:22px 0 0 var(--ax1);text-wrap:balance}
.lead{font-family:var(--f-read);font-weight:380;font-size:clamp(19px,1.55vw,24px);line-height:1.36;max-width:30ch;margin:18px 0 0 var(--ax1);color:var(--fg2);text-wrap:pretty}
.lbl-a{font-family:var(--f-display);font-stretch:100%;font-weight:500;font-size:15px;letter-spacing:.005em}
.mono{font-family:var(--f-mono);font-size:10.5px;font-stretch:87.5%;letter-spacing:.02em;font-variant-numeric:tabular-nums}
canvas.net{position:absolute;display:block;pointer-events:none;z-index:1}
/* ---------- 02 expertise: fan-out ---------- */
.xp{padding-block:var(--pad-m) var(--pad-s);overflow:hidden}
.xp .net{left:0;top:0;width:100%;height:100%}
.xmap{position:relative;z-index:2;margin-left:var(--ax2);margin-right:var(--gut);height:clamp(500px,40vw,640px);margin-top:clamp(56px,6vw,96px)}
.xn{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:12px;transform:translateY(-50%);cursor:default;background:none;border:0;padding:6px 8px 6px 0;color:var(--fg);text-align:left}
.xn .d{width:8px;height:8px;border-radius:50%;border:1px solid var(--fg2);background:var(--bg);flex:none;transition:background .3s var(--ease),border-color .3s var(--ease)}
.xn span:last-child{font-family:var(--f-display);font-weight:500;font-stretch:100%;font-size:clamp(16px,1.3vw,20px);white-space:nowrap}
.xn.root span:last-child{font-weight:600;font-stretch:75%;font-size:clamp(30px,3.1vw,48px);letter-spacing:-.015em}
.xn.root .d{width:10px;height:10px;border-color:var(--fg);background:var(--fg)}
.xn.on .d,.xn:focus-visible .d{background:var(--cobalt);border-color:var(--cobalt)}
.xmap.dim .xn:not(.on):not(.rel) span:last-child{color:var(--fg3)}
.xinspect{position:relative;z-index:2;margin:28px var(--gut) 0 var(--ax2);display:grid;grid-template-columns:minmax(120px,200px) minmax(0,46ch);gap:8px 24px;align-items:baseline;min-height:3.2em;border-top:1px solid var(--rule);padding-top:14px}
.xinspect p{margin:0;font-size:18px;line-height:1.45}
/* ---------- 03 selected work: spans you can open ---------- */
.wk{padding-block:var(--pad-s) var(--pad-l)}
.wk-list{position:relative;z-index:2;margin:clamp(48px,5vw,72px) var(--gut) 0 var(--ax1);border-bottom:1px solid var(--rule-2)}

.cr{display:grid;grid-template-columns:calc(var(--ax2) - var(--ax1)) minmax(0,1fr) 180px 200px 30px;gap:20px;align-items:baseline}

.diag{position:relative;background:var(--plate);height:clamp(300px,26vw,400px)}
.diag canvas{position:absolute;inset:0;width:100%;height:100%}
.diag .tog{position:absolute;left:18px;top:14px;display:flex;gap:18px;z-index:2}
.tog button{background:none;border:0;padding:4px 0;color:var(--fg2);display:flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--f-display);font-weight:500;font-size:13.5px}
.tog button .d{width:7px;height:7px;border-radius:50%;border:1px solid var(--fg2)}
.tog button[aria-pressed="true"]{color:var(--fg)}
.tog button[aria-pressed="true"] .d{background:var(--cobalt);border-color:var(--cobalt)}
.diag .lvl{position:absolute;right:16px;top:16px;color:var(--fg3)}
.phases{display:flex;margin-top:14px;gap:2px}
.phases div{flex:var(--f) 1 0;min-width:62px;border-top:1px solid var(--fg);padding-top:8px;display:grid;gap:2px}
.phases div:last-child{border-color:var(--ember)}
.phases b{font-family:var(--f-display);font-weight:500;font-size:13.5px}
.phases span{font-family:var(--f-mono);font-size:10px;font-stretch:87.5%;color:var(--fg3)}
.example{color:var(--ember)}
/* ---------- 04 systems: the night interval ---------- */
.night{--bg:var(--n-bg);--plate:var(--n-plate);--fg:var(--n-fg);--fg2:var(--n-fg2);--fg3:var(--n-fg3);--rule:var(--n-rule);--rule-2:var(--n-rule-2);--cobalt:var(--n-cobalt);--violet:var(--n-violet);--ember:var(--n-ember);background:var(--bg);color:var(--fg);color-scheme:dark}
.sy{min-height:max(100svh,780px);padding-block:var(--pad-s) 40px;overflow:hidden;display:flex;flex-direction:column}
.sy > canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.sy .d1{position:relative;z-index:3;margin:clamp(32px,4vw,56px) 0 0 var(--ax1);font-family:var(--f-display);font-weight:600;font-stretch:75%;font-size:clamp(52px,7.2vw,124px);line-height:.92;letter-spacing:-.02em;pointer-events:none}
.sy .d1 span{display:block;padding-left:.64em}
.sy-foot{position:relative;z-index:3;margin-top:auto;display:grid;grid-template-columns:calc(var(--ax2) - var(--rail-x)) minmax(0,34ch) 1fr;gap:20px 36px;align-items:end;padding:0 var(--gut) 0 var(--rail-x)}
.sy-foot p{grid-column:2;margin:0;font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--fg2);min-height:6em}
.lenses{grid-column:3;justify-self:end;position:relative;display:flex;gap:clamp(18px,2.4vw,40px);padding-bottom:4px}
.lenses::before{content:"";position:absolute;left:-20px;right:-200vw;top:0;height:1px;background:var(--rule-2)}
.lenses button{position:relative;background:none;border:0;color:var(--fg2);padding:14px 0 0;cursor:pointer;font-family:var(--f-display);font-weight:500;font-size:15px}
.lenses button .d{position:absolute;left:0;top:-3.5px;width:8px;height:8px;border-radius:50%;border:1px solid var(--fg2);background:var(--bg)}
.lenses button[aria-pressed="true"]{color:var(--fg)}
.lenses button[aria-pressed="true"] .d{background:var(--cobalt);border-color:var(--cobalt)}
/* ---------- 05 writing: lines at rest ---------- */

.more{display:inline-flex;align-items:center;gap:12px;margin:28px 0 0 calc(var(--ax2) - 4px);padding:4px 8px 4px 0}
.more .d{width:8px;height:8px;border-radius:50%;border:1px solid var(--fg)}
.more:hover .d{background:var(--cobalt);border-color:var(--cobalt)}
/* ---------- 06 protocode: the outbound call ---------- */
.pc{padding-block:var(--pad-s) var(--pad-m);overflow:hidden}
.pc .net{left:0;top:0;width:100%;height:100%}
.chain{position:relative;z-index:2;margin:clamp(56px,6vw,96px) 0 0 var(--ax1);height:clamp(280px,24vw,360px)}
.cn{position:absolute;left:var(--x);top:var(--y);transform:translateY(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap}
.cn .d{width:8px;height:8px;border-radius:50%;border:1px solid var(--fg);background:var(--bg);flex:none}
.cn.me span:last-child{font-family:var(--f-display);font-weight:600;font-stretch:75%;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.012em}
.cn.mid span:last-child{font-family:var(--f-display);font-weight:500;font-size:16px;color:var(--fg2)}
.bound{position:absolute;z-index:1;left:calc(var(--ax1) + (100% - var(--ax1)) * .5);right:-2px;top:clamp(16px,2vw,32px);bottom:clamp(24px,3vw,48px);border:1px dashed var(--fg3);border-right:0;background:var(--plate)}
.bound > .mono{position:absolute;left:16px;top:12px;color:var(--fg3)}
.pc-name{position:absolute;z-index:2;left:calc((100% - var(--ax1)) * .5 + 6%);top:50%;transform:translateY(-62%);display:grid;gap:14px}
.pc-name .d{position:absolute;left:-30px;top:calc(.5em - 4px);width:9px;height:9px;border-radius:50%;background:var(--ember)}
.pc-name strong{position:relative;font-family:var(--f-display);font-weight:600;font-stretch:125%;font-size:clamp(44px,6.4vw,104px);line-height:.95;letter-spacing:-.02em}
.pc-name p{margin:0;max-width:34ch;font-size:18px;line-height:1.45;color:var(--fg2)}
.pc-name .lk{font-family:var(--f-display);font-weight:500;font-size:15px;display:inline-flex;gap:14px;align-items:baseline}
.pc-name .lk .mono{color:var(--fg3)}
.pc-note{position:relative;z-index:2;margin:28px var(--gut) 0 var(--ax2);max-width:44ch;font-size:clamp(18px,1.4vw,21px);line-height:1.45}
/* ---------- 07 about: one quiet open span ---------- */
.ab{padding-block:var(--pad-l) var(--pad-m)}
.ab .big{position:relative;z-index:2;margin:28px var(--gut) 0 var(--ax1);max-width:23ch;font-family:var(--f-read);font-weight:330;font-size:clamp(28px,3vw,46px);line-height:1.22;letter-spacing:-.012em;text-wrap:pretty}
.ab .big em{color:var(--fg2)}
.ab .body{margin:28px var(--gut) 0 var(--ax2);max-width:54ch;font-size:18px;line-height:1.6;color:var(--fg2)}
.openspan{position:relative;height:60px;margin-top:56px}
.openspan::before{content:"";position:absolute;left:var(--rail-x);right:0;top:30px;height:1px;background:var(--fg)}
.openspan::after{content:"";position:absolute;left:calc(var(--rail-x) - 3px);top:27px;width:7px;height:7px;border-radius:50%;background:var(--fg)}
.openspan span{position:absolute;left:var(--ax2);top:8px;color:var(--fg3)}
.now{margin:8px var(--gut) 0 var(--ax2);display:grid;max-width:760px}
.now div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.now dt{font-family:var(--f-mono);font-size:10.5px;font-stretch:87.5%;color:var(--fg3)}
.now dd{margin:0;font-family:var(--f-display);font-weight:500;font-size:18px}
/* ---------- 08 contact: the response ---------- */
.ct{padding-block:var(--pad-m) 0;overflow:hidden}
.ct::before{bottom:auto;height:var(--term-y,60%)}
.ct .net{left:0;top:0;width:100%;height:100%}
.ends{position:relative;z-index:2;margin:clamp(48px,5vw,80px) var(--gut) 0 var(--ax2);display:grid;gap:clamp(10px,1.4vw,22px);padding-left:12%}
.ends a{display:flex;align-items:center;gap:16px;width:max-content;max-width:100%;padding:4px 8px 4px 0}
.ends .d{width:9px;height:9px;border-radius:50%;border:1px solid var(--fg);background:var(--bg);flex:none;transition:background .3s var(--ease)}
.ends strong{font-family:var(--f-display);font-weight:600;font-stretch:75%;font-size:clamp(34px,4vw,64px);line-height:1;letter-spacing:-.015em}
.ends .mono{color:var(--fg3);align-self:flex-end;padding-bottom:6px}
.ends a:hover .d,.ends a:focus-visible .d{background:var(--cobalt);border-color:var(--cobalt)}
.ends a:hover strong{color:var(--cobalt)}
.term{position:relative;z-index:2;height:120px}
.term .d{position:absolute;left:calc(var(--rail-x) - 5px);top:50px;width:11px;height:11px;border-radius:50%;background:var(--fg)}
.term .mono{position:absolute;left:var(--ax1);top:49px;color:var(--fg2)}

/* ---------- system notes (toggle) ---------- */

/* ---------- tablet ---------- */
@media (max-width:1100px) and (min-width:720px){.cr{grid-template-columns:70px minmax(0,1fr) 160px 26px}

.sy-foot{grid-template-columns:minmax(0,1fr);padding-left:var(--ax1)}.sy-foot p,.lenses{grid-column:1;justify-self:start}}
/* ---------- phone: each section re-composed, not stacked ---------- */
@media (max-width:719px){.xmap{margin-left:var(--ax1);height:auto;display:grid;gap:6px;margin-top:40px}
.xn{position:relative;left:auto;top:auto;transform:none;padding-left:34px}
.xn.root{padding-left:0;margin-top:22px}
.xn.root:first-child{margin-top:0}
.xinspect{margin-left:var(--ax1);grid-template-columns:1fr}
.cr{grid-template-columns:minmax(0,1fr) 26px;gap:6px 12px}

.diag{height:280px}
.sy{min-height:900px}
.sy .d1{font-size:clamp(46px,14vw,64px)}
.sy .d1 span{padding-left:0}
.sy-foot{grid-template-columns:minmax(0,1fr);padding-left:var(--ax1);padding-right:var(--gut)}
.sy-foot p{grid-column:1;min-height:7.5em}
.lenses{grid-column:1;justify-self:stretch;overflow-x:auto;gap:22px;padding-top:2px}
.lenses::before{left:0;right:0}
.lenses button{flex:none}

.more{margin-left:var(--ax1)}
.chain{height:auto;display:grid;gap:30px;margin-left:var(--ax1);padding-bottom:20px}
.cn{position:relative;left:auto;top:auto;transform:none;padding-left:0}
.bound{display:none}
.pc-name{position:relative;left:auto;top:auto;transform:none;margin:24px var(--gut) 0 var(--ax1);padding:24px 18px 26px 28px;border:1px dashed var(--fg3);border-right:0;margin-right:-2px;background:var(--plate)}
.pc-name .d{left:-5px;top:36px}
.pc-note{margin-left:var(--ax1)}
.ab .body,.now{margin-left:var(--ax1)}
.now div{grid-template-columns:110px minmax(0,1fr)}
.openspan span{left:var(--ax1)}
.ends{margin-left:var(--ax1);padding-left:0}
.ends strong{font-size:clamp(32px,10vw,44px)}
.ends .mono{display:none}}
/* ---------- v2: plain capability list (text for search engines and screen readers) ---------- */
.xlist{position:relative;z-index:2;list-style:none;margin:28px var(--gut) 0 var(--ax2);padding:0;display:grid;gap:10px;max-width:68ch}
.xlist li{font-size:16.5px;line-height:1.55;color:var(--fg2)}
.xlist b{font-family:var(--f-display);font-weight:600;color:var(--fg)}
/* ---------- v2: selected work as single lines ---------- */
.job{border-top:1px solid var(--rule-2)}
.job .cr{padding:24px 0 8px}
.job .ix{font-family:var(--f-mono);font-size:10.5px;font-stretch:87.5%;color:var(--fg3)}
.job .tt{margin:0;font-family:var(--f-display);font-weight:590;font-stretch:96%;font-size:clamp(24px,2.5vw,38px);line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
.job .rl{font-family:var(--f-display);font-stretch:118%;font-weight:450;font-size:13.5px;color:var(--fg2)}
.job .pd{font-family:var(--f-mono);font-size:10.5px;font-stretch:87.5%;color:var(--fg2);font-variant-numeric:tabular-nums}
.job .gl{font-size:12px;color:var(--fg2);justify-self:end}
.job-d{margin:0 0 24px calc(var(--ax2) - var(--ax1) + 20px);max-width:64ch;font-size:16.5px;line-height:1.55;color:var(--fg2)}
@media (max-width:1100px) and (min-width:720px){.job .cr{grid-template-columns:70px minmax(0,1fr) 150px 26px}.job .rl{display:none}.job-d{margin-left:90px}}
@media (max-width:719px){.job .cr{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}.job .ix,.job .gl{display:none}.job .rl{grid-column:1}.job .pd{grid-column:2;grid-row:2;justify-self:end}.job-d{margin-left:0}.xlist{margin-left:var(--ax1)}}

/* ---------- shared pieces placed on Home ---------- */
.hero .lang{top:22px;right:max(24px,3vw)}
@media (max-width:719px){.hero .lang{right:20px;top:14px}}