/* The Seam. Homepage only. Loaded by index.html after lg-home.css.
   The hairline between the EN and ES headlines (the ES column's border) becomes a control:
   slide along it to compare a literal rendering of the English line with the line we wrote.
   At rest the block is pixel-identical to the version without this file.
   Tokens come from lg.css and lg-type.css. No new colors. */

.home .duo-faces > [lang="es"]{position:relative;transition:border-color .6s ease}
.home .duo-faces > [lang="es"].is-seam-hot,
.home .duo-faces:has(.seam:hover) > [lang="es"]{border-color:var(--acc-on-ivory)}

/* Stack: the adapted line stays in flow, the literal line sits on top of it. */
.home .seam-stack{position:relative;display:flow-root;transition:min-height .6s ease}
.home .seam-stack .duo-es{margin-top:22px}
.home .duo-faces .seam-lit{
  position:absolute;
  top:0;left:0;right:0;
  color:var(--stone);
  opacity:0;
  pointer-events:none;
}

/* The control: a 44px hit area centered on the hairline. */
.home .seam{
  position:absolute;
  z-index:2;
  touch-action:pan-y;
  cursor:ew-resize;
  outline:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.home .seam-nc{
  position:absolute;
  background:var(--acc-on-ivory);
  opacity:0;
  transition:opacity .6s ease;
}
.home .seam.is-hot .seam-nc,
.home .seam:hover .seam-nc,
.home .seam:focus-visible .seam-nc{opacity:1}
.home .seam:focus-visible{outline:1px solid var(--acc-on-ivory);outline-offset:2px}

/* Stacked layout (<=1100px): the seam is the horizontal hairline above the ES block. */
@media (max-width:1100px){
  .home .seam{left:0;right:0;top:-23px;height:44px}
  .home .seam-nc{top:50%;width:2px;height:16px;transform:translate(-50%,-50%)}
}
/* Two-column layout: the seam is the vertical hairline between the columns. */
@media (min-width:1101px){
  .home .seam{
    left:-23px;
    top:0;
    width:44px;
    height:var(--seam-h,100%);
    cursor:ns-resize;
    touch-action:pan-x;
  }
  .home .seam-nc{left:50%;width:16px;height:2px;transform:translate(-50%,-50%)}
}

/* Caption and invitation, under the ES headline. Collapsed at rest, so the block is unchanged. */
.home .seam-below{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .6s ease;
}
.home .seam-below.is-on{grid-template-rows:1fr}
.home .seam-below > div{min-height:0;overflow:hidden}
.home .seam-cap{
  display:block;
  margin-top:14px;
  color:var(--stone);
  opacity:0;
  transition:opacity .5s ease;
}
.home .seam-cap.is-on{opacity:1}
.home .seam-cap[data-state="adapted"]{color:var(--acc-on-ivory-sm)}

.home .seam-go{
  appearance:none;
  background:none;
  border:0;
  border-bottom:1px solid var(--acc-on-ivory-sm);
  padding:0 0 4px;
  margin:18px 0 6px;
  cursor:pointer;
  font-family:var(--font-structural);
  font-weight:500;
  font-size:clamp(1rem,1.25vw,1.15rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acc-on-ivory-sm);
  opacity:0;
  visibility:hidden;
  transition:opacity .7s ease,visibility 0s linear .7s;
}
.home .seam-go.is-on{opacity:1;visibility:visible;transition:opacity .7s ease}
.home .seam-go:focus-visible{outline:1px solid var(--acc-on-ivory);outline-offset:4px}

/* The reveal: mirrors the two-column structure above it. */
.home .seam-reveal{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .9s ease;
  visibility:hidden;
}
.home .seam-reveal.is-open{grid-template-rows:1fr;visibility:visible}
.home .seam-reveal > .seam-reveal-in{min-height:0;overflow:hidden}
.home .seam-reveal .duo-faces{padding-top:clamp(36px,4vw,64px)}
.home .seam-reveal .lab{margin-bottom:18px}
.home .seam-blank{
  display:block;
  width:100%;
  height:0;
  border-top:1px dashed var(--rule);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.3s ease .1s;
}
.home .seam-reveal.is-open .seam-blank{transform:scaleX(1)}
.home .seam-quote{
  display:block;
  font-family:var(--font-editorial);
  font-weight:400;
  font-size:clamp(1.3rem,2.1vw,1.9rem);
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--acc-on-ivory);
  max-width:30ch;
}
.home .seam-quote[hidden]{display:none}
.home .seam-blank[hidden]{display:none}
/* The line written first sits back in stone; the adapted line carries the accent. The changed phrase is underlined in both. */
.home .seam-quote.is-src{color:var(--stone)}
.home .seam-quote .mk{
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:.1em;
  margin-right:.26em;
  transition:background-size .8s ease;
}
.home .seam-reveal.is-open .seam-quote .mk{background-size:100% 1px}
.home .seam-quote .mk > .w{margin-right:0}
.home .seam-quote .w{
  display:inline-block;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .7s ease,transform .7s ease;
  margin-right:.26em;
}
.home .seam-reveal.is-open .seam-quote .w{opacity:1;transform:none}
.home .seam-after{
  margin-top:22px;
  opacity:0;
  transition:opacity 1s ease;
}
.home .seam-reveal.is-open .seam-after{opacity:1}
.home .seam-note{
  font-size:var(--home-body);
  line-height:1.55;
  color:var(--mute);
  max-width:38ch;
}
.home .seam-src{
  display:inline-block;
  margin-top:16px;
  font-family:var(--font-structural);
  font-weight:500;
  font-size:clamp(1rem,1.25vw,1.15rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:4px;
}
.home .seam-src-by{
  display:block;
  margin-top:10px;
  color:var(--stone);
}

.home .seam-sr{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

@media (max-width:1100px){
  .home .seam-reveal .duo-faces > [lang="es"]{padding-top:28px;margin-top:4px}
  .home .seam-quote{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .home .seam-stack,
  .home .seam-nc,
  .home .seam-cap,
  .home .seam-below,
  .home .seam-go,
  .home .seam-reveal,
  .home .seam-blank,
  .home .seam-quote .w,
  .home .seam-after,
  .home .duo-faces > [lang="es"]{transition:none}
  .home .seam-quote .mk{transition:none;background-size:100% 1px}
  .home .seam-quote .w{opacity:1;transform:none}
}