/* ── Logofolio: archive of marks ─────────────────────────────── */
.logofolio{margin-top:var(--sp-9);padding-top:0}
.logofolio-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6);align-items:end;margin-bottom:calc(var(--sp-7) + 12px)}
.logofolio-eyebrow{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-3)}
.logofolio-title{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.2vw,44px);line-height:1.05;letter-spacing:-0.03em;margin:0}
.logofolio-note{font-size:14px;line-height:1.5;color:var(--fg-2);max-width:34ch;text-align:right}
.logofolio-bar{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;margin-bottom:calc(var(--sp-5) + 12px)}
.logofolio-filters{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.logofolio-readout{text-transform:lowercase;font-size:13px;letter-spacing:0.01em;color:var(--fg-2);min-height:1.4em;display:flex;gap:var(--sp-3);align-items:baseline}
.logofolio-readout strong{font-family:var(--font-display);font-weight:600;color:var(--fg-1);font-size:14px}
.logofolio-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1px solid var(--bb-line);border-left:1px solid var(--bb-line)}
.mark{position:relative;aspect-ratio:3/2;background:var(--bg-1);overflow:hidden;border:0;border-right:1px solid var(--bb-line);border-bottom:1px solid var(--bb-line);padding:0;margin:0;display:block;cursor:none;contain:layout paint;transition:background var(--dur-base) var(--ease-out)}html.touch .mark{cursor:auto}
.mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity var(--dur-base) var(--ease-out)}
.mark .mk-a{filter:grayscale(1) contrast(0.62) brightness(1.3065)}
.mark .mk-b{opacity:0}
@media (hover:hover) and (pointer:fine){html:not(.touch) .mark:hover{background:var(--bg-2)}html:not(.touch) .mark:hover .mk-b{opacity:1}html:not(.touch) .mark:hover .mk-a{opacity:0}}
.mark.mk-in{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),background var(--dur-base) var(--ease-out)}
.mark.mk-in.mk-vis{opacity:1;transform:none}
.mark:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.logofolio-more{margin-top:var(--sp-8);width:max-content;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.logofolio-more .section-cta{display:flex;align-items:center;justify-content:center;text-align:center}
.logofolio-count-line{margin:0;text-align:center;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-2)}
@media (max-width:1024px){.logofolio-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.logofolio-note{display:none}.logofolio-head{grid-template-columns:1fr}}
@media (max-width:600px){.logofolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.logofolio-readout{display:none}.logofolio-bar{gap:var(--sp-3)}.logofolio-more{width:100%;margin-top:var(--sp-6)}.logofolio-more .section-cta{width:100%;text-align:center}}
@media (hover:none){.logofolio-readout{display:none}}