/* Home: Tools I think with. An editorial tools index, not a skills list.
   Marks are monochrome by default; a tool's own colour appears only on the one being hovered or focused,
   so the navy/gold system stays dominant. Brand colours are passed per item as --b (accent) and --bd (tile). */

.tl{position:relative;background:#091A30;padding:var(--sec) 0;border-top:1px solid var(--line);overflow:hidden}
.tl-mono{font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);line-height:1.3}
.tl :where(ul,ol){list-style:none;margin:0;padding:0}
.tl-hov{outline:none}
.tl-hov:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ---------- head ---------- */
.tl-slug{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.tl-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-top:clamp(40px,5vw,72px)}
.tl-title{grid-column:1/span 8;font-size:clamp(64px,11.4vw,188px);line-height:.86;letter-spacing:-.06em;font-weight:500;color:var(--fg)}
.tl-intro{grid-column:9/span 4;padding-bottom:.6vw}
.tl-tag{font-size:clamp(24px,2.3vw,34px);line-height:1.08;letter-spacing:-.03em;font-weight:500;color:var(--fg)}
.tl-tag span{color:var(--gold-2)}
.tl-lede{margin-top:22px;font-size:var(--t-md);line-height:1.45;color:var(--fg-2);max-width:36ch}

/* line-by-line reveal for display type */
.tl-lines.rv{opacity:1;transform:none}
.tl-lines .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.tl-lines .ln>span{display:block;transform:translateY(106%);transition:transform 1.25s var(--e2)}
.tl-lines .ln:nth-child(2)>span{transition-delay:.1s}
.tl-lines.in .ln>span{transform:none}

/* ---------- group shell ---------- */
.tl-g{position:relative;padding-top:22px;margin-top:clamp(88px,10vw,152px)}
.tl-g::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e2) .1s}
.tl-g.in::before{transform:scaleX(1)}
.tl-gh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:baseline}
.tl-n{font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-size:13px;color:var(--gold);letter-spacing:.02em}
.tl-gh .tl-n{grid-column:1/span 1}
.tl-gh h3,.tl-gl h3{font-size:clamp(20px,1.8vw,26px);line-height:1;letter-spacing:.01em;text-transform:uppercase;font-weight:500;color:var(--fg)}
.tl-gh h3{grid-column:2/span 6}
.tl-gh p{grid-column:8/span 5;font-size:16px;line-height:1.5;color:var(--fg-2);max-width:42ch}

/* staggered entrance for items inside a group */
.tl-it{opacity:0;transform:translateY(18px);transition:opacity .9s var(--e) calc(var(--i,0) * .09s + .25s),transform 1s var(--e) calc(var(--i,0) * .09s + .25s)}
.tl-g.in .tl-it{opacity:1;transform:none}

/* ---------- 01 Adobe: one wide row, the problem word leads, the app sits under it ---------- */
.tl-ad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.tl-app{position:relative;padding:28px clamp(18px,2vw,32px) 32px;border-left:1px solid var(--line);isolation:isolate}
.tl-app:first-child{border-left:0;padding-left:0}
.tl-app::after{content:"";position:absolute;inset:0;background:rgba(214,224,238,.025);z-index:-1;opacity:0;transition:opacity .5s var(--e)}
.tl-app:first-child::after{left:calc(var(--gut) * -1)}
.tl-ic{display:block;width:44px;height:44px;transition:transform .6s var(--e)}
.tl-ic .tile{fill:transparent;stroke:var(--fg-3);stroke-width:1.2;transition:fill .5s var(--e),stroke .5s var(--e)}
.tl-ic text{font-family:var(--f);font-size:17px;font-weight:500;letter-spacing:-.01em;fill:var(--fg-2);transition:fill .5s var(--e)}
.tl-w{display:block;margin-top:clamp(48px,6vw,104px);font-size:clamp(40px,5.4vw,88px);line-height:.9;letter-spacing:-.055em;font-weight:500;color:var(--fg);transition:transform .7s var(--e)}
.tl-sw{position:relative;display:grid;margin-top:24px;padding-top:14px;border-top:1px solid var(--line)}
.tl-sw::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--b,var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e2)}
.tl-sw>span{grid-area:1/1;transition:opacity .45s var(--e),transform .6s var(--e)}
.tl-sw .a{font-size:16px;color:var(--fg-2)}
.tl-sw .b{display:grid;gap:6px;font-size:15px;line-height:1.35;color:var(--fg-2);opacity:0;transform:translateY(12px)}
.tl-sw .b .tl-mono{color:var(--fg)}
.tl-app:is(:hover,:focus-visible)::after{opacity:1}
.tl-app:is(:hover,:focus-visible) .tl-ic{transform:scale(1.06)}
.tl-app:is(:hover,:focus-visible) .tile{fill:var(--bd);stroke:var(--b)}
.tl-app:is(:hover,:focus-visible) text{fill:var(--b)}
.tl-app:is(:hover,:focus-visible) .tl-w{transform:translateX(8px)}
.tl-app:is(:hover,:focus-visible) .tl-sw::before{transform:scaleX(1)}
.tl-app:is(:hover,:focus-visible) .tl-sw .a{opacity:0;transform:translateY(-12px)}
.tl-app:is(:hover,:focus-visible) .tl-sw .b{opacity:1;transform:none;transition-delay:.08s}

/* ---------- 02 Figma (featured) + 03 Canva (quiet) ---------- */
.tl-pair{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(88px,10vw,152px)}
.tl-pair>.tl-g{margin-top:0}
.tl-gl{display:flex;align-items:baseline;gap:clamp(20px,2.4vw,40px)}
.tl-fig{grid-column:1/span 8;isolation:isolate;padding-bottom:6px}
.tl-guides{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:24px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .7s var(--e)}
.tl-guides i{background:rgba(242,78,30,.035)}
.tl-flogo{position:absolute;right:0;top:30px;width:clamp(44px,4.4vw,64px);height:auto;overflow:visible}
.tl-flogo>*{fill:transparent;stroke:var(--fg-3);stroke-width:1.2;transition:fill .5s var(--e),stroke .5s var(--e)}
.tl-flogo>:nth-child(2){transition-delay:.05s}.tl-flogo>:nth-child(3){transition-delay:.1s}.tl-flogo>:nth-child(4){transition-delay:.15s}.tl-flogo>:nth-child(5){transition-delay:.2s}
.tl-big{margin-top:clamp(56px,7vw,116px);font-size:clamp(44px,6.4vw,104px);line-height:.92;letter-spacing:-.055em;font-weight:500;color:var(--fg)}
.tl-sel{position:relative;display:inline-block}
.tl-sel::after{content:"";position:absolute;inset:-6px -14px -4px;border:1px solid #0D99FF;clip-path:inset(0 100% 100% 0);transition:clip-path .9s var(--e2)}
.tl-sel .hd{position:absolute;width:8px;height:8px;background:var(--fg);border:1px solid #0D99FF;opacity:0;transform:scale(.3);transition:opacity .3s var(--e),transform .5s var(--e)}
.tl-sel .h1{left:-18px;top:-10px}.tl-sel .h2{right:-18px;top:-10px}.tl-sel .h3{left:-18px;bottom:-8px}.tl-sel .h4{right:-18px;bottom:-8px}
.tl-sel-tag{position:absolute;left:-14px;bottom:calc(100% + 8px);padding:3px 7px;background:#0D99FF;color:#fff;font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-size:11px;line-height:1.2;letter-spacing:.02em;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .35s var(--e),transform .5s var(--e)}
.tl-ffoot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-top:clamp(40px,4.4vw,64px)}
.tl-ffoot p{font-size:16px;line-height:1.5;color:var(--fg-2);max-width:34ch}
.tl-tags{display:flex;flex-wrap:wrap;gap:6px 0;justify-content:flex-end}
.tl-tags li{font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);transition:color .45s var(--e) calc(var(--j) * .06s)}
.tl-tags li+li::before{content:"/";margin:0 10px;color:var(--line-2)}
.tl-fig:is(:hover,:focus-visible) .tl-guides{opacity:1}
.tl-fig:is(:hover,:focus-visible) .tl-flogo>:nth-child(1){fill:#F24E1E;stroke:#F24E1E}
.tl-fig:is(:hover,:focus-visible) .tl-flogo>:nth-child(2){fill:#FF7262;stroke:#FF7262}
.tl-fig:is(:hover,:focus-visible) .tl-flogo>:nth-child(3){fill:#A259FF;stroke:#A259FF}
.tl-fig:is(:hover,:focus-visible) .tl-flogo>:nth-child(4){fill:#1ABCFE;stroke:#1ABCFE}
.tl-fig:is(:hover,:focus-visible) .tl-flogo>:nth-child(5){fill:#0ACF83;stroke:#0ACF83}
.tl-fig:is(:hover,:focus-visible) .tl-sel::after{clip-path:inset(0 0 0 0)}
.tl-fig:is(:hover,:focus-visible) .tl-sel .hd{opacity:1;transform:none;transition-delay:.55s}
.tl-fig:is(:hover,:focus-visible) .tl-sel-tag{opacity:1;transform:none;transition-delay:.4s}
.tl-fig:is(:hover,:focus-visible) .tl-tags li{color:var(--fg)}

.tl-cv{grid-column:10/span 3;display:flex;flex-direction:column}
.tl-cv .tl-gl{justify-content:space-between}
.tl-cv .tl-gl>div{display:flex;align-items:baseline;gap:clamp(20px,2.4vw,40px)}
.tl-clogo{width:30px;height:30px;flex:none;align-self:center}
.tl-clogo circle{fill:transparent;stroke:var(--fg-3);stroke-width:1.2;transition:fill .5s var(--e),stroke .5s var(--e)}
.tl-clogo text{font-family:var(--f);font-size:15px;font-weight:500;fill:var(--fg-2);transition:fill .5s var(--e)}
.tl-mid{margin-top:clamp(56px,7vw,116px);font-size:clamp(26px,2.5vw,36px);line-height:1;letter-spacing:-.035em;font-weight:500;color:var(--fg)}
.tl-cv p.cp{margin-top:18px;font-size:16px;line-height:1.5;color:var(--fg-2);max-width:30ch}
.tl-speed{position:relative;display:block;height:1px;margin-top:auto;background:var(--line);overflow:hidden}
.tl-speed::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform .9s var(--e2)}
.tl-cv:is(:hover,:focus-visible) .tl-speed::after{transform:none;transition-duration:.32s}
.tl-cv:is(:hover,:focus-visible) circle{fill:#00C4CC;stroke:#00C4CC}
.tl-cv:is(:hover,:focus-visible) .tl-clogo text{fill:#fff}

/* ---------- 04 AI: judgment line on top, tools as one strip underneath ---------- */
.tl-aiq{margin-top:clamp(40px,5vw,72px);font-size:clamp(36px,4.8vw,76px);line-height:.96;letter-spacing:-.05em;font-weight:500;color:var(--fg-3)}
.tl-aiq .ln:last-child{color:var(--fg)}
.tl-judge{display:flex;align-items:center;gap:16px;margin-top:clamp(44px,5vw,72px)}
.tl-judge .tl-mono{color:var(--gold-2);white-space:nowrap}
.tl-judge i{flex:1;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--e2) .35s}
.tl-g.in .tl-judge i{transform:scaleX(1)}
.tl-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.tl-ai{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;align-items:center;padding:28px clamp(16px,2vw,28px);border-left:1px solid var(--line)}
.tl-ai:first-child{border-left:0;padding-left:0}
.tl-ai::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--b);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e2)}
.tl-ai .ai-ic{grid-row:1/span 2;width:32px;height:32px;color:var(--fg-3);transition:color .5s var(--e),transform .6s var(--e)}
.tl-ai b{font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--fg);transition:transform .6s var(--e)}
.tl-ai .tl-mono{transition:color .45s var(--e)}
.tl-ai:is(:hover,:focus-visible)::before{transform:scaleX(1)}
.tl-ai:is(:hover,:focus-visible) .ai-ic{color:var(--b);transform:scale(1.06)}
.tl-ai:is(:hover,:focus-visible) b{transform:translateX(4px)}
.tl-ai:is(:hover,:focus-visible) .tl-mono{color:var(--fg-2)}

/* ---------- 05 Presentation & Interactive: set like source code ---------- */
.tl-code{margin-top:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.tl-cl{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,.62fr);gap:24px;align-items:center;padding:clamp(22px,2.4vw,34px) 0;border-top:1px solid var(--line);isolation:isolate}
.tl-cl::before{content:"";position:absolute;inset:0 calc(var(--gut) * -1);background:var(--navy-2);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--e2)}
.tl-cl .no{font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-size:13px;color:var(--fg-3);transition:color .4s}
.tl-cl code{font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-size:clamp(30px,4.3vw,66px);font-weight:400;line-height:1;letter-spacing:-.045em;color:var(--fg);white-space:nowrap}
.tl-cl code .p{color:var(--fg-3);transition:color .45s var(--e)}
.tl-cl code::after{content:"";display:inline-block;width:2px;height:.82em;margin-left:.14em;vertical-align:-.06em;background:var(--gold);opacity:0}
.tl-cl .ds{display:grid;gap:6px;font-size:16px;line-height:1.4;color:var(--fg-3);transition:color .45s var(--e)}
.tl-cl:is(:hover,:focus-visible)::before{transform:scaleY(1);transform-origin:top}
.tl-cl:is(:hover,:focus-visible) .no{color:var(--gold)}
.tl-cl:is(:hover,:focus-visible) code .p{color:var(--b)}
.tl-cl:is(:hover,:focus-visible) code::after{animation:tl-caret 1.05s steps(1) infinite}
.tl-cl:is(:hover,:focus-visible) .ds{color:var(--fg-2)}
.tl-cl .ds .tl-mono{color:var(--fg-2)}
@keyframes tl-caret{0%{opacity:1}50%{opacity:0}}

/* ---------- close ---------- */
.tl-end{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-top:clamp(112px,13vw,200px)}
.tl-endh{grid-column:1/span 9;font-size:clamp(44px,7vw,112px);line-height:.9;letter-spacing:-.055em;font-weight:500;color:var(--fg)}
.tl-endh .ln:first-child{color:var(--fg-3)}
.tl-ends{grid-column:10/span 3;display:grid;border-top:1px solid var(--line-2)}
.tl-ends li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:500;color:var(--fg)}
.tl-ends li span{font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;font-weight:400;color:var(--gold);padding-top:3px}
.tl-ends li:last-child{color:var(--fg-3)}

/* ---------- responsive ---------- */
/* nav gained a sixth link (Tools): keep the logo on one line before the burger takes over at 820 */
.nav .logo{white-space:nowrap}
@media (min-width:821px) and (max-width:1180px){.nav .wrap{gap:28px}.nav nav{gap:clamp(16px,2vw,28px)}}
@media (max-width:1024px){
  .tl-title{grid-column:1/-1}
  .tl-intro{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:12px;padding:0}
  .tl-lede{margin-top:0}
  .tl-gh .tl-n{grid-column:1/span 2}
  .tl-gh h3{grid-column:3/-1}
  .tl-gh p{grid-column:3/-1;margin-top:6px}
  .tl-ad,.tl-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-app:nth-child(odd),.tl-ai:nth-child(odd){border-left:0;padding-left:0}
  .tl-app:nth-child(n+3),.tl-ai:nth-child(n+3){border-top:1px solid var(--line)}
  .tl-app:nth-child(odd)::after{left:calc(var(--gut) * -1)}
  .tl-fig,.tl-cv{grid-column:1/-1}
  .tl-cv{margin-top:clamp(72px,9vw,112px)!important}
  .tl-cv .tl-mid{margin-top:40px}
  .tl-cv .tl-speed{margin-top:32px}
  .tl-endh,.tl-ends{grid-column:1/-1}
  .tl-ends{margin-top:24px;max-width:420px}
}
@media (max-width:700px){
  .tl-sw .a{display:none}
  .tl-sw .b{opacity:1;transform:none}
  .tl-intro{grid-template-columns:1fr}
  .tl-ffoot{grid-template-columns:1fr}
  .tl-tags{justify-content:flex-start}
  .tl-cl{grid-template-columns:32px minmax(0,1fr);row-gap:12px}
  .tl-cl .ds{grid-column:2}
}
@media (max-width:560px){
  .tl-slug .tl-mono:last-child{display:none}
  .tl-gh .tl-n{grid-column:1/-1}
  .tl-gh h3,.tl-gh p{grid-column:1/-1}
  .tl-ad,.tl-strip{grid-template-columns:1fr}
  .tl-app,.tl-ai{border-left:0!important;padding-left:0;padding-right:0}
  .tl-app+.tl-app,.tl-ai+.tl-ai{border-top:1px solid var(--line)}
  .tl-app{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;padding:24px 0 26px}
  .tl-w{margin-top:0;font-size:40px}
  .tl-sw{grid-column:1/-1}
  .tl-flogo{top:22px}
}
/* touch: no hover, so the detail layer is simply shown */
@media (hover:none){
  .tl-sw .a{display:none}
  .tl-sw .b{opacity:1;transform:none}
  .tl-tags li{color:var(--fg-2)}
  .tl-ai .tl-mono,.tl-cl .ds{color:var(--fg-2)}
}
@media (prefers-reduced-motion:reduce){
  .tl-lines .ln>span,.tl-it{transform:none!important;opacity:1!important;transition:none!important}
  .tl-g::before,.tl-judge i{transform:none!important;transition:none!important}
  .tl-cl code::after{animation:none!important}
  .tl *{transition-duration:.01ms!important}
}