/* About page: the product rail system (txtcaster-page.css) applied to the company. The founder's
   portrait is the hero's one real object; the rest is quiet, factual and set on the rails. */

/* Hero: the brand line, then what Torkiv is in one sentence, with the softer focus line after it. */
.ab-lede{margin:0;max-width:34ch;font-size:clamp(1.15rem,1rem + .45vw,1.35rem);font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.ab-lede span{color:var(--muted)}
[dir=rtl] .ab-lede{letter-spacing:0;line-height:1.6}
.ab-intro-side{align-items:flex-start;gap:2rem}

/* Founder: a portrait plate with a hairline frame and a mono caption, like a credit on a print. */
.ab-founder{position:relative;display:grid;gap:1rem;margin:0;width:min(100%,22rem)}
.ab-founder img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid var(--rule);border-radius:16px;background:var(--surface);filter:grayscale(.35) contrast(1.04);transition:filter .6s var(--tc-ease)}
.ab-founder:hover img{filter:none}
.ab-founder::before{content:'';position:absolute;inset:-.6rem -.6rem auto auto;width:2.2rem;height:2.2rem;border-block-start:1px solid var(--tc-blue-hi);border-inline-end:1px solid var(--tc-blue-hi);border-start-end-radius:18px;pointer-events:none}
[dir=rtl] .ab-founder::before{inset:-.6rem auto auto -.6rem}
.ab-founder figcaption{display:grid;gap:.35rem}
.ab-founder figcaption span{font:500 .72rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ab-founder figcaption strong{font-size:1.15rem;font-weight:500;color:var(--ink)}
[dir=rtl] .ab-founder figcaption span{font-family:inherit;font-size:.85rem;letter-spacing:0}

/* Products: two whole-cell links on the rail; the mark lifts and the arrow travels on hover. */
.ab-products{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:0;list-style:none;border-block-start:1px solid var(--rule)}
.ab-products li+li{border-inline-start:1px solid var(--rule)}
.ab-product{position:relative;display:grid;align-content:start;gap:.9rem;height:100%;padding:2.4rem var(--tc-pad) 2.6rem;color:inherit;text-decoration:none;transition:background-color .5s var(--tc-ease)}
.ab-product::after{content:'';position:absolute;inset-inline:0;inset-block-start:-1px;height:2px;background:var(--tc-blue-hi);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--tc-ease)}
[dir=rtl] .ab-product::after{transform-origin:100% 50%}
.ab-product:is(:hover,:focus-visible){background:color-mix(in srgb,var(--tc-blue) 6%,transparent)}
.ab-product:is(:hover,:focus-visible)::after{transform:none}
.ab-product-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-block-end:1rem}
.ab-product-top img{transition:transform .5s var(--tc-ease)}
.ab-product:is(:hover,:focus-visible) .ab-product-top img{transform:translateY(-4px) rotate(-6deg)}
.ab-state{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border:1px solid var(--rule);border-radius:999px;font:500 .7rem/1 'Geist Mono',ui-monospace,monospace;color:var(--muted)}
.ab-state i{width:.4rem;height:.4rem;border-radius:50%;background:var(--tc-blue-hi)}
[dir=rtl] .ab-state{font-family:inherit;font-size:.8rem}
.ab-product strong{font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);font-weight:500;line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.ab-product-line{max-width:40ch;line-height:1.6;color:var(--text)}
.ab-product-go{display:inline-flex;align-items:center;gap:.5rem;margin-block-start:.6rem;font-weight:500;color:var(--ink)}
.ab-product .tc-link-arrow{transition:transform .4s var(--tc-ease)}
.ab-product:is(:hover,:focus-visible) .tc-link-arrow{transform:translateX(4px)}
[dir=rtl] .ab-product .tc-link-arrow{transform:scaleX(-1)}
[dir=rtl] .ab-product:is(:hover,:focus-visible) .tc-link-arrow{transform:scaleX(-1) translateX(4px)}

/* Facts: three headline facts set large, then the two longer statements beside each other. */
.ab-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 0 -1px;border-block-start:1px solid var(--rule);overflow:hidden}
.ab-facts>div{grid-column:span 3;display:grid;align-content:start;gap:.8rem;margin-inline-start:-1px;padding:2rem var(--tc-pad) 2.2rem;border-inline-start:1px solid var(--rule);border-block-end:1px solid var(--rule)}
.ab-facts>.ab-fact-big{grid-column:span 2;padding-block:2.4rem 2.6rem}
.ab-facts dt{font:500 .72rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--tc-blue-hi)}
[dir=rtl] .ab-facts dt{font-family:inherit;font-size:.85rem;letter-spacing:0}
.ab-facts dd{margin:0;max-width:44ch;line-height:1.6;color:var(--text)}
.ab-fact-big dd{font-size:clamp(1.35rem,1.05rem + .8vw,1.75rem);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
[dir=rtl] .ab-fact-big dd{letter-spacing:0;line-height:1.4}

/* Business model: the two promises as pills, and one closing line to reach Torkiv. */
.ab-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 0;padding:0;list-style:none}
.ab-pills li{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border:1px solid color-mix(in srgb,var(--tc-blue-hi) 40%,var(--rule));border-radius:999px;font-size:var(--t-xs);font-weight:500;color:var(--ink)}
.ab-pills li::before{content:'';width:.5rem;height:.28rem;border-inline-start:1.5px solid var(--tc-blue-hi);border-block-end:1.5px solid var(--tc-blue-hi);transform:rotate(-45deg) translateY(-1px)}
.ab-model .tc-link{justify-self:start;margin-block-start:.4rem}

/* Sections settle in like the product pages. */
.tc-sec :is(.ab-products,.ab-facts){transition:opacity .9s var(--tc-ease) .15s,translate 1.1s var(--tc-ease) .15s}
.tc-js .tc-sec:not(.is-in) :is(.ab-products,.ab-facts){opacity:0;translate:0 28px}

@media(max-width:899px){
  .ab-facts>div,.ab-facts>.ab-fact-big{grid-column:span 3}
  .ab-facts>div:last-child{grid-column:span 6}
}
@media(max-width:699px){
  .ab-products{grid-template-columns:1fr}
  .ab-products li+li{border-inline-start:0;border-block-start:1px solid var(--rule)}
  .ab-facts{grid-template-columns:1fr}
  .ab-facts>div,.ab-facts>.ab-fact-big,.ab-facts>div:last-child{grid-column:auto}
  .ab-founder{width:min(100%,16rem)}
}

/* Icons: thin line glyphs in a hairline tile; hovering the item redraws the line. */
.ab-icon{flex:none;width:2.6rem;height:2.6rem;padding:.6rem;border:1px solid var(--rule);border-radius:10px;background:var(--surface);fill:none;stroke:var(--tc-blue-hi);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:border-color .4s,background-color .4s}
.ab-icon path{stroke-dasharray:120;stroke-dashoffset:0}
:is(.ab-facts>div,.ab-model>div):hover .ab-icon{border-color:color-mix(in srgb,var(--tc-blue-hi) 50%,var(--rule));background:color-mix(in srgb,var(--tc-blue) 10%,var(--surface))}
:is(.ab-facts>div,.ab-model>div):hover .ab-icon path{animation:ab-draw 1.1s var(--tc-ease)}
@keyframes ab-draw{from{stroke-dashoffset:120}}
.ab-facts dt{display:grid;justify-items:start;gap:1.1rem}
.ab-model .ab-icon{margin-block-end:.3rem}

@media(prefers-reduced-motion:reduce){.ab-icon path{animation:none!important}}

/* Contact: the address set large on a hairline, the founder and accounts beside it. */
.ab-contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);border-block-start:1px solid var(--rule)}
.ab-contact-main{display:grid;align-content:start;gap:1rem;padding:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) var(--tc-pad)}
[dir=rtl] .ab-contact-main{padding-inline:var(--tc-pad) clamp(1.25rem,3vw,2.5rem)}
.ct-head{display:grid;gap:1.2rem;padding:clamp(3rem,7vw,6rem) var(--tc-pad) clamp(2.5rem,5vw,4rem)}
.ct-head .ab-lede{max-width:40ch}
.ab-contact-main p{margin:0;max-width:40ch;color:var(--muted)}
.ab-mail{justify-self:start;display:inline-flex;align-items:baseline;gap:.4em;font-size:clamp(1.5rem,1rem + 2.2vw,2.8rem);font-weight:500;letter-spacing:-.03em;color:var(--ink);text-decoration:none;background:linear-gradient(var(--tc-blue-hi),var(--tc-blue-hi)) no-repeat 0 100%/0 2px;transition:background-size .6s var(--tc-ease),color .3s}
[dir=rtl] .ab-mail{background-position:100% 100%}
.ab-mail:hover{background-size:100% 2px;color:var(--tc-blue-hi)}
.ab-mail span{font-size:.55em;transition:translate .4s var(--tc-ease)}
.ab-mail:hover span{translate:.12em -.12em}
.ab-contact-side{display:grid;align-content:start;gap:1.5rem;padding:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,3vw,2.5rem);border-inline-start:1px solid var(--rule)}
.ab-contact-who{display:flex;align-items:center;gap:.9rem}
.ab-contact-who img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid var(--rule)}
.ab-contact-who p{display:grid;gap:.2rem;margin:0}
.ab-contact-who strong{font-weight:500;color:var(--ink)}
.ab-contact-who span{font:500 .7rem/1.2 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .ab-contact-who span{font-family:inherit;font-size:.85rem;letter-spacing:0;text-transform:none}
.ab-social{display:grid;border-block-start:1px solid var(--rule)}
.ab-social a{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;border-block-end:1px solid var(--rule);color:var(--ink);text-decoration:none;transition:color .25s,padding .4s var(--tc-ease)}
.ab-social a:hover{color:var(--tc-blue-hi);padding-inline-start:.4rem}
@media(max-width:767px){
  .ab-contact-grid{grid-template-columns:1fr}
  .ab-contact-main,[dir=rtl] .ab-contact-main{padding-inline:var(--tc-pad)}
  .ab-contact-side{padding-inline:var(--tc-pad);border-inline-start:0;border-block-start:1px solid var(--rule)}
}