/* Estilos de página: trabalho (protótipo trabalho.html). */
/* Índice: título com contagem, alternância Grid/Lista. Lista com prévia da capa seguindo o cursor. */
.w-hero{padding-block:clamp(56px,8vw,112px) clamp(40px,5vw,64px)}
.w-hero h1{margin:0;font-weight:500;font-size:clamp(56px,11vw,184px);line-height:.88;letter-spacing:-.055em}
.w-hero h1 sup{font-family:var(--f-meta);font-weight:400;font-size:clamp(16px,1.6vw,22px);letter-spacing:.03em;color:var(--muted);vertical-align:top;margin-left:12px;position:relative;top:.6em}
.w-hero .sub{grid-column:1/7;margin:28px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.4;color:var(--text-2);max-width:40ch}
.w-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 73px);z-index:30;background:color-mix(in srgb,var(--ink-950) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-block:1px solid var(--border)}
.w-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:12px}
.seg{display:inline-flex;border:1px solid var(--border-strong)}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;color:var(--muted);transition:color .2s var(--ease),background .2s var(--ease)}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--ink-950)}
.seg button:not([aria-pressed="true"]):hover{color:var(--text)}
.seg button:focus-visible{outline:2px solid var(--state);outline-offset:2px}
.w-body{padding-block:clamp(48px,6vw,88px) clamp(96px,12vw,176px)}
.w-grid{row-gap:clamp(56px,8vw,112px)}
@media (max-width:860px){.w-grid > .work{grid-column:1/-1!important;margin-top:0!important}.w-grid .cover{aspect-ratio:4/3!important}}

.ilist{border-top:1px solid var(--border)}
.irow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:baseline;padding-block:clamp(18px,2.2vw,28px);border-bottom:1px solid var(--border);position:relative;color:var(--text)}
.i-n{grid-column:1/2}
.i-t{grid-column:2/7;font-size:clamp(22px,2.8vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.05;transition:transform .5s var(--ease-soft)}
.i-s{grid-column:7/11;color:var(--text-2);font-size:16px}
.i-y{grid-column:11/12}
.i-go{grid-column:12/13;justify-self:end;transition:transform .5s var(--ease-soft),color .2s var(--ease)}
.ilist:hover .irow{color:var(--muted)}
.ilist:hover .irow .i-s{color:var(--muted)}
.ilist .irow:hover{color:var(--text)}
.ilist .irow:hover .i-s{color:var(--text-2)}
.irow:hover .i-t{transform:translateX(12px)}
.irow:hover .i-go{color:var(--accent);transform:translateX(4px)}
.irow:focus-visible{outline:2px solid var(--state);outline-offset:-2px}
@media (max-width:860px){
  .irow{grid-template-columns:36px minmax(0,1fr) auto;row-gap:6px}
  .i-n{grid-column:1}.i-t{grid-column:2}.i-y{grid-column:3;justify-self:end}
  .i-s{grid-column:2/4;font-size:14px}.i-go{display:none}
}
.peek{position:fixed;left:0;top:0;z-index:65;width:min(34vw,420px);aspect-ratio:16/10;pointer-events:none;overflow:hidden;background:var(--pc);color:var(--pcf);opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .25s var(--ease),transform .5s var(--ease-soft),background .3s var(--ease);container-type:inline-size}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek strong{position:absolute;left:16px;bottom:10px;font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.82;font-size:18cqw;white-space:nowrap}
@media (hover:none){.peek{display:none}}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.peek:not(.has-img) img,.peek.has-img strong{display:none}
[hidden]{display:none!important}

@media (max-width:860px){.w-hero .sub{grid-column:1/-1;max-width:none}.w-bar .wrap,.fright{display:flex;justify-content:space-between;align-items:center;width:100%}.seg{margin-left:auto}}