/* About · LG Studio. Loaded only by /about/ and /about/es/ (after lg.css, lg-type.css, lg-home.css).
   One idea carries the page: the headline switches language word by word, the way a bilingual
   person does. Everything else stays quiet. Emphasis is colour, never italics. */

.about{
  --ab-chapter:clamp(32px,3.35vw,48px);
  --ab-lead:clamp(17px,1.25vw,19px);
  --ab-ease:cubic-bezier(.65,0,.35,1);
}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ------------------------------ HERO ------------------------------ */
.ab-hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.ab-hero-copy{padding-top:150px;padding-bottom:clamp(40px,7vh,84px)}
.about .hero-mark{margin-bottom:clamp(20px,3.4vh,34px)}

.about .ab-h1{
  font-family:var(--font-editorial);
  font-weight:400;
  font-size:clamp(2.9rem,10.4vw,9.4rem);
  line-height:.98;
  letter-spacing:-.04em;
  max-width:none;
  margin:0;
}
.ab-h1-vis{display:block}
.ab-h1 .ln{display:block}

/* One slot per word. Before the script measures, the page-language word sits in flow and the other waits offstage. */
.sw{position:relative;display:inline-block;vertical-align:bottom;white-space:nowrap;
  height:1em;padding:.08em .02em .22em;margin:-.08em -.02em -.22em;overflow:hidden;box-sizing:content-box}
.sw .l1{position:relative;display:inline-block;line-height:1em}
.sw .l2{position:absolute;left:.02em;top:.08em;line-height:1em;visibility:hidden}

.ab-h1.is-ready .sw{width:var(--w1);transition:width .8s var(--ab-ease)}
.ab-h1.is-ready .sw[data-s="2"]{width:var(--w2)}
.ab-h1.is-ready .sw .l1,
.ab-h1.is-ready .sw .l2{
  position:absolute;left:.02em;top:.08em;visibility:visible;
  transition:transform .8s var(--ab-ease),opacity .55s ease;
}
.ab-h1.is-ready .sw [data-p="center"]{transform:none;opacity:1}
.ab-h1.is-ready .sw [data-p="above"]{transform:translateY(-135%);opacity:0}
.ab-h1.is-ready .sw [data-p="below"]{transform:translateY(135%);opacity:0}
/* The word you point at takes the champagne accent while it speaks the other language. */
.ab-h1.is-ready .sw[data-s="2"] .l2{color:var(--acc-on-ink)}

.ab-deck{
  max-width:38ch;
  margin-top:clamp(22px,3.4vh,34px);
  font-size:var(--ab-lead);
  line-height:1.5;
  color:rgba(240,236,227,.66);
}

.ab-hero-foot .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  height:72px;border-top:1px solid var(--rule-k);
}
.ab-hint{font-family:var(--font-system);margin:0}
.ab-replay{all:unset;cursor:pointer;font-family:var(--font-system);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);opacity:.85;padding:10px 0;transition:opacity .2s,color .2s}
.ab-replay:hover{opacity:1;color:var(--ivory)}
.ab-replay:focus-visible{outline:1px solid var(--acc-on-ink);outline-offset:6px}

/* Language toggle is a pair of links on this page (each language has its own URL). */
.about .lang a{display:inline-block;padding:6px 10px;border-radius:999px;color:rgba(240,236,227,.6);transition:color .2s}
.about .lang a:hover{color:var(--ivory)}
.about .lang a.on{background:var(--ivory);color:var(--ink)}
.about .nav ul a[aria-current="page"]{opacity:1}

/* ------------------------------ SECTIONS ------------------------------ */
.ab-sec{padding-block:clamp(88px,10vw,148px)}
.about .home-kicker{margin-bottom:18px}

.about .ab-h2{
  font-family:var(--font-editorial);
  font-weight:400;
  font-size:var(--ab-chapter);
  line-height:.98;
  letter-spacing:-.035em;
  max-width:20ch;
  margin:0 0 clamp(36px,5vw,72px);
}
.ab-language .ab-h2{margin-bottom:clamp(20px,2.4vw,28px);max-width:16ch}

/* Method */
.ab-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.ab-step{padding:30px clamp(20px,3vw,56px) 0 0}
.ab-step + .ab-step{padding-left:clamp(20px,3vw,56px);border-left:1px solid var(--rule)}
.ab-step h3{
  font-family:var(--font-editorial);font-weight:400;
  font-size:clamp(30px,3vw,44px);line-height:1;letter-spacing:-.03em;
  margin:18px 0 18px;
}
.ab-step p:last-child{max-width:34ch;color:var(--mute);font-size:16px;line-height:1.55}

/* Method plate (drawn by about.js). Hairlines in the page ink, one accent for the doorway. */
#method .ab-h2{margin-bottom:clamp(28px,3vw,40px)}
.ab-plate{color:var(--ink);min-height:190px}
.ab-plate svg{display:block;overflow:visible;max-width:none}
.ab-plate .pl-div{stroke:var(--rule);stroke-width:1}
.ab-plate .pl-lines path{fill:none;stroke:url(#abp-fade);stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.9s var(--ab-ease) calc(var(--i) * 24ms)}
.ab-plate .pl-door{fill:var(--champ-d);opacity:0;transition:opacity 1s ease 2.4s}
.ab-plate.is-drawn .pl-lines path{stroke-dashoffset:0}
.ab-plate.is-drawn .pl-door{opacity:1}
@media (max-width:1100px){.ab-plate .pl-div{display:none}}
@media (prefers-reduced-motion:reduce){
  .ab-plate .pl-lines path{transition:none;stroke-dashoffset:0}
  .ab-plate .pl-door{transition:none;opacity:1}
}

/* Language */
.ab-lede{max-width:40ch;font-size:var(--ab-lead);line-height:1.5;color:var(--mute)}
.ab-pairs{margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--rule)}
.ab-pair{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:baseline;column-gap:clamp(16px,3vw,48px);row-gap:20px;
  padding-block:clamp(28px,3.6vw,52px);border-bottom:1px solid var(--rule);
}
.ab-term{
  font-family:var(--font-editorial);font-weight:400;
  font-size:clamp(2.1rem,5vw,4.4rem);line-height:1;letter-spacing:-.035em;
  display:flex;flex-direction:column;gap:14px;
}
.ab-tag{font-family:var(--font-structural);font-size:11px;letter-spacing:.18em;color:var(--num)}
.ab-term[lang="es"] span:last-child{color:var(--acc-on-ink)}
.ab-arrow{color:var(--stone-l);font-size:22px;align-self:end;padding-bottom:.5em}
.ab-why{grid-column:1 / -1;max-width:58ch;font-size:16px;line-height:1.55;color:var(--mute)}
.ab-src{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
.ab-src .link{font-size:13px}
.ab-close{
  margin-top:clamp(64px,8vw,120px);
  font-family:var(--font-editorial);font-weight:400;
  font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.08;letter-spacing:-.02em;max-width:24ch;
}

/* Studio */
.about .founder{gap:clamp(40px,6vw,96px)}
.about .founder .ph{aspect-ratio:4/5;filter:grayscale(1)}
.about .founder .ph img{color:transparent}
.about .founder .body{max-width:44ch;margin-top:0;margin-bottom:20px;font-size:var(--ab-lead);line-height:1.55}
.about .founder .ab-h2{max-width:20ch;margin-bottom:clamp(24px,2.6vw,36px)}
.about .founder .ab-thesis{font-family:var(--font-editorial);font-weight:400;font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.22;letter-spacing:-.015em;color:var(--ink);max-width:28ch;margin:0 0 clamp(24px,2.4vw,32px)}
.about .founder .who{margin-top:36px}
.about .founder-link{margin-top:28px;font-size:13px}

/* CTA */
.about .cta h2{font-size:var(--home-cta,clamp(32px,3.8vw,56px));line-height:.96;letter-spacing:-.035em}

/* Quiet entrance. Only when scripts run, never for reduced motion. */
.js .ab-rise{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s var(--ab-ease)}
.js .ab-rise.in{opacity:1;transform:none}

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width:1100px){
  .ab-steps{grid-template-columns:1fr}
  .ab-step{padding:28px 0 36px}
  .ab-step + .ab-step{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .about .founder{grid-template-columns:1fr}
  .about .founder .ph{max-width:460px}
}
@media (max-width:720px){
  .ab-hero-copy{padding-top:120px}
  .ab-pair{grid-template-columns:1fr;row-gap:14px}
  .ab-arrow{transform:rotate(90deg);justify-self:start;padding:0 0 0 4px;align-self:start;line-height:1}
  .ab-why{grid-column:auto}
  .ab-hero-foot .wrap{height:64px}
  .about .founder .who{flex-direction:column;gap:4px}
}

@media (prefers-reduced-motion:reduce){
  .ab-h1.is-ready .sw,
  .ab-h1.is-ready .sw .l1,
  .ab-h1.is-ready .sw .l2{transition:none}
  .js .ab-rise{opacity:1;transform:none;transition:none}
}