/* KM 1 · De que lado — a pista vista de cima: duas mãos, o sol da manhã acende uma */
.ld {
  --ld-p: .5;                                         /* progresso da rolagem (js/lado.js) */
  --ld-l: calc((var(--ld-p) - .08) * 3.45);          /* até onde o sol já chegou na mão de cá (0 a 1 e além) */
  --ld-luz: calc(var(--ld-l) * 100%);
  --ld-mao: clamp(96px, 14.5vw, 208px);               /* largura de cada mão */
  --ld-vao: clamp(48px, 6.5vw, 96px);                 /* ar entre o texto e a pista */
  --ld-borda: 46px;                                   /* acostamento */
  padding-bottom: clamp(64px, 8vw, 120px);
}

.ld-topo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 6vw, 96px); align-items: end; }
.ld-abre .texto { margin-top: clamp(16px, 1.8vw, 24px); max-width: 30em; }

/* anotações presas à pista por um fio, como cota de planta */
.ld-cota { position: relative; z-index: 2; max-width: 21em; padding-left: 18px; }
.ld-cota h3 { font-size: var(--t-mini); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ld-cota p { margin-top: 4px; color: var(--tinta-2); line-height: 1.45; }
.ld-cota::before { content: ""; position: absolute; left: 0; width: 2px; background: #c98a2b; }
.ld-cota::after { content: ""; position: absolute; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #e0a83c; box-shadow: 0 0 0 3px #16181d; }
.ld-cota--la::before { top: .2em; bottom: calc(-1 * (var(--ld-vao) + var(--ld-borda) + var(--ld-mao) * .3)); }
.ld-cota--la::after { bottom: calc(-1 * (var(--ld-vao) + var(--ld-borda) + var(--ld-mao) * .3) - 5px); }
.ld-cota--ca::before { bottom: calc(100% - 1.1em); top: calc(-1 * (var(--ld-vao) + var(--ld-borda) + var(--ld-mao) * .3)); }
.ld-cota--ca::after { top: calc(-1 * (var(--ld-vao) + var(--ld-borda) + var(--ld-mao) * .3) - 5px); }

/* a pista: sangra a página inteira, em leve diagonal */
.ld-pista { position: relative; z-index: 1; width: 100vw; margin: var(--ld-vao) 0 var(--ld-vao) calc(50% - 50vw); }
.ld-asfalto { position: relative; margin-inline: -8vw; padding: var(--ld-borda) 0; transform: rotate(-3.5deg); color: #f3eee6;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 -.24'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
    #16181d;
  box-shadow: 0 46px 70px -44px rgb(16 19 31 / .6), 0 2px 0 rgb(16 19 31 / .25); }
/* faixas de bordo */
.ld-asfalto::before, .ld-asfalto::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: rgb(243 238 230 / .8); }
.ld-asfalto::before { top: calc(var(--ld-borda) - 15px); } .ld-asfalto::after { bottom: calc(var(--ld-borda) - 15px); }
/* eixo: faixa dupla contínua amarela */
.ld-eixo { position: relative; z-index: 1; display: block; height: 20px;
  background: linear-gradient(#e0a83c, #e0a83c) top / 100% 5px no-repeat, linear-gradient(#e0a83c, #e0a83c) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, #ffe9b0 0 10px, transparent 10px 168px) center / 100% 4px no-repeat, #101116; }

.ld-mao { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--ld-mao); padding-inline: calc(8vw + max(var(--d-margem), (100vw - var(--largura)) / 2)); }
.ld-pintura { position: relative; font-weight: 800; font-size: min(calc(var(--ld-mao) * .58), 12vw); line-height: 1; letter-spacing: .03em; text-transform: uppercase; padding-top: .12em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.1 1.5'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.1 1.5'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23m)'/%3E%3C/svg%3E"); }
.ld-seta { position: relative; flex: none; width: auto; height: calc(var(--ld-mao) * .3); fill: #fbf4e6; opacity: clamp(.26, calc((var(--ld-l) - .78) * 3), .9); }

/* mão de lá: na sombra, lida ao contrário */
.ld-mao--la { justify-content: flex-end; background: rgb(9 10 15 / .58); }
.ld-mao--la .ld-pintura { color: rgb(243 238 230 / .13); transform: rotate(180deg); }

/* mão de cá: o sol avança com a rolagem e acende a tinta */
.ld-sol { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(var(--ld-luz) - 34%), rgb(240 201 143 / .12) calc(var(--ld-luz) - 5%), transparent calc(var(--ld-luz) + 5%)),
    linear-gradient(in oklab 90deg, rgb(243 238 230 / .1), rgb(243 238 230 / .13) 60%, rgb(244 214 170 / .17));
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--ld-luz) - 6%), transparent calc(var(--ld-luz) + 5%));
  mask-image: linear-gradient(90deg, #000 calc(var(--ld-luz) - 6%), transparent calc(var(--ld-luz) + 5%)); }
.ld-mao--ca .ld-pintura { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #fbf4e6 calc(var(--ld-luz) * 1.5 - 22%), rgb(243 238 230 / .3) calc(var(--ld-luz) * 1.5 + 4%)); }

/* embaixo da pista */
.ld-notas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ld-esq { display: grid; gap: clamp(32px, 3.6vw, 52px); }

.ld-cota--ca { margin-left: clamp(40px, 9vw, 132px); }

/* a monografia: folha de papel com o canto dobrado (a dobra do logo) */
.ld-ficha { max-width: 31em; rotate: 1.4deg; filter: drop-shadow(0 16px 16px rgb(16 19 31 / .13)) drop-shadow(0 1px 1px rgb(16 19 31 / .16)); }
.ld-ficha__papel { --ld-dobra: 40px; position: relative; padding: clamp(22px, 2.4vw, 32px); padding-right: clamp(34px, 3.4vw, 48px); background: #fcfbf8;
  clip-path: polygon(0 0, calc(100% - var(--ld-dobra)) 0, 100% var(--ld-dobra), 100% 100%, 0 100%); }
.ld-ficha__papel::after { content: ""; position: absolute; top: 0; right: 0; width: var(--ld-dobra); height: var(--ld-dobra);
  background: linear-gradient(in oklab 225deg, transparent 50%, #0c70a8 50%, #2b4089 100%); }
.ld-ficha__titulo { margin-top: 12px; font-size: var(--t-mini); font-weight: 600; line-height: 1.55; color: var(--tinta); }
.ld-ficha__texto { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--linha); color: var(--tinta-2); line-height: 1.45; }

.ld-fala blockquote { margin-top: 18px; }
.ld-fala blockquote p { font-weight: 600; font-size: clamp(1.65rem, 4vw, 3.7rem); line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; }
.ld-grifo { text-decoration: underline double #e0a83c; text-decoration-thickness: .055em; text-underline-offset: .16em; text-decoration-skip-ink: none; }
.ld-fala__fonte { margin-top: clamp(20px, 2.4vw, 30px); font-size: var(--t-mini); color: var(--tinta-2); }

@media (max-width: 860px) {
  .ld { --ld-borda: 30px; }
  .ld-topo, .ld-notas { grid-template-columns: minmax(0, 1fr); }
  .ld-topo { gap: 36px; }
  .ld-cota--la { justify-self: end; max-width: 15.5em; }
  .ld-asfalto { transform: rotate(-4deg); }
  .ld-seta { display: none; }
  .ld-ficha { rotate: 1deg; }
  .ld-pintura { font-size: min(calc(var(--ld-mao) * .58), 11.4vw); }
  .ld-esq { display: contents; }
  .ld-fala { order: 1; }
  .ld-ficha { order: 2; }
  .ld-notas { gap: 44px; }
  .ld-cota--ca { max-width: 17em; margin-left: 56px; }
}