/* ───────── Portfolio — after kaviengcreative.com/#archive ───────── */
html, body.archive { height: 100%; overflow: hidden; }
body.archive { background: var(--a-bg); color: var(--a-fg); --tw: clamp(180px, 19.5vw, 340px); --th: calc(var(--tw) * .62); --gap: clamp(10px, 1.2vw, 20px); }
.archive ::selection { background: var(--a-fg); color: var(--a-bg); }

/* Top bar */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-between; align-items: start; padding: 18px var(--gutter); pointer-events: none; opacity: 0; transition: opacity .8s .4s; }
.bar > * { pointer-events: auto; }
.is-entered .bar { opacity: 1; }
.bar__logo { display: flex; gap: 14px; align-items: start; }
.bar__logo b { font: 700 15px/.92 var(--f-body); letter-spacing: -.02em; }
.bar__logo span { font-size: 11px; line-height: 1.15; color: var(--a-mute); }
.bar__nav { display: flex; gap: clamp(12px, 1.6vw, 26px); font-size: 12px; }
.bar__nav a { color: var(--a-mute); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .25s; }
.bar__nav a:hover { color: var(--a-fg); }
.bar__theme { font-size: 12px; color: var(--a-mute); display: inline-flex; gap: 6px; padding-bottom: 4px; }
.bar__theme:hover { color: var(--a-fg); }
.bar__theme i { font-style: normal; }
.bar__nav a[aria-current] { color: var(--a-fg); border-color: var(--a-fg); }

/* Intro */
.intro { position: fixed; inset: 0; z-index: 30; background: var(--a-bg); overflow: hidden; transition: opacity 1s .35s, visibility 0s 1.4s; }
.is-entered .intro { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__float { position: absolute; inset: 0; }
.intro__float canvas { position: absolute; width: var(--w); aspect-ratio: 16 / 10; opacity: 0; transition: opacity 1.4s; will-change: transform; }
.intro.is-ready .intro__float canvas { opacity: .8; }
.intro__name { margin: 0; font: 400 clamp(64px, 11vw, 196px)/.9 var(--f-serif); letter-spacing: -.02em; color: var(--a-name); }
.intro__a, .intro__b { position: absolute; transition: transform 1.2s var(--ease), opacity 1s; }
.intro__a { left: 2vw; top: 33vh; }
.intro__b { right: 2vw; top: 47vh; }
.is-entered .intro__a { transform: translateX(-30vw); opacity: 0; }
.is-entered .intro__b { transform: translateX(30vw); opacity: 0; }
.intro__role { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font: italic 400 clamp(16px, 1.4vw, 22px) var(--f-serif); color: var(--a-mute-2); }
.intro__enter { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); color: var(--a-mute-2); letter-spacing: .14em; padding: 10px; animation: blink 2.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* The wall */
.wall { position: fixed; inset: 0; perspective: 1100px; perspective-origin: 50% 50%; overflow: hidden; cursor: grab; touch-action: none; }
.wall.is-drag { cursor: grabbing; }
.wall__stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: scale(.72); opacity: 0; transition: transform 1.6s var(--ease), opacity 1s; }
.is-entered .wall__stage { transform: none; opacity: 1; }
.wall__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(var(--a-vig),.75) 100%), linear-gradient(to bottom, rgba(var(--a-vig),.6), transparent 14%, transparent 80%, rgba(var(--a-vig),.9)); }

.tile { position: absolute; left: 50%; top: 50%; width: var(--tw); height: var(--th); margin: calc(var(--th) / -2) 0 0 calc(var(--tw) / -2); background: var(--a-tile); border-radius: 3px; overflow: hidden; will-change: transform; backface-visibility: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; filter: var(--a-tile-filter); transition: filter .5s, transform .8s var(--ease-out); pointer-events: none; user-select: none; -webkit-user-drag: none; }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 10px; color: var(--a-fg); opacity: 0; transition: opacity .3s; text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
.tile.is-hover img { filter: none; transform: scale(1.04); }
.tile.is-hover .tile__cap { opacity: 1; }

.cursor { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; padding: 7px 10px; background: var(--a-fg); color: var(--a-bg); border-radius: 30px; font-size: 10px; letter-spacing: .1em; transform: translate(-50%, -50%) scale(0); transition: transform .3s var(--ease-out); }
.cursor.on { transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .cursor { display: none; } }

/* HUD */
.hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding: 16px var(--gutter); pointer-events: none; opacity: 0; transition: opacity .8s .6s; }
.is-entered .hud { opacity: 1; }
.hud > * { pointer-events: auto; }
.hud .mono { color: var(--a-mute); font-size: 10px; margin: 0; }
.hud__count { justify-self: end; font-variant-numeric: tabular-nums; }
.hud__mid { text-align: center; }
.hud__now { margin: 0 0 10px; font-size: 12px; color: var(--a-fg); min-height: 1.3em; }
.hud__filters { display: flex; gap: clamp(10px, 1.3vw, 20px); justify-content: center; flex-wrap: wrap; }
.hud__filters button { font-size: 11px; color: var(--a-mute-2); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .25s; }
.hud__filters button:hover { color: var(--a-fg); }
.hud__filters button[aria-pressed="true"] { color: var(--a-fg); border-color: var(--a-fg); }

/* Panel */
.panel { position: fixed; inset: 0; z-index: 60; background: rgba(var(--a-vig),.97); display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(20px, 3vw, 56px); padding: 70px var(--gutter) var(--gutter); opacity: 0; transition: opacity .5s; }
.panel.is-open { opacity: 1; }
.panel[hidden] { display: none; }
.panel__close { position: absolute; top: 22px; right: var(--gutter); color: var(--a-mute); font-size: 11px; }
.panel__close:hover { color: var(--a-fg); }
.panel__media { position: relative; overflow-y: auto; display: grid; gap: 12px; align-content: start; scrollbar-width: thin; scrollbar-color: var(--a-line) transparent; }
.panel__media img { width: 100%; border-radius: 3px; opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .9s var(--ease-out); }
.panel.is-open .panel__media img { opacity: 1; transform: none; }
.panel__info { align-self: end; padding-bottom: 10px; }
.panel__kicker { color: var(--a-mute-2); margin: 0 0 14px; }
.panel__title { font: 400 clamp(44px, 5vw, 90px)/.95 var(--f-serif); letter-spacing: -.01em; margin: 0 0 26px; }
.panel__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 40px; margin: 0 0 26px; }
.panel__meta dt { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--a-mute-2); }
.panel__meta dd { margin: 0; font-size: 13px; grid-row: 2; }
.panel__text { font-size: 15px; line-height: 1.55; color: var(--a-text); max-width: 48ch; margin: 0 0 26px; }
.panel__link { display: inline-flex; gap: 12px; border: 1px solid var(--a-fg); padding: 11px 16px; font-size: 13px; margin-bottom: 34px; transition: background .25s, color .25s; }
.panel__link:hover { background: var(--a-fg); color: var(--a-bg); }
.panel__link[hidden] { display: none; }
.panel__nav { display: flex; gap: 24px; border-top: 1px solid var(--a-line); padding-top: 16px; }
.panel__nav button { color: var(--a-mute); font-size: 11px; }
.panel__nav button:hover { color: var(--a-fg); }

.list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 760px) {
  body.archive { --tw: 46vw; }
  .bar__nav a:nth-child(n+4) { display: none; }
  .bar__logo span { display: none; }
  .hud { grid-template-columns: 1fr; gap: 6px; }
  .hud__hint, .hud__count { display: none; }
  .hud__filters { flex-wrap: nowrap; overflow-x: auto; justify-content: start; padding-bottom: 4px; scrollbar-width: none; }
  .intro__a { top: 30vh; }
  .intro__b { top: 54vh; }
  .intro__role { top: 47vh; }
  .panel { grid-template-columns: 1fr; grid-template-rows: 45svh auto; overflow-y: auto; padding-top: 60px; }
  .panel__info { align-self: start; }
  .panel__meta { gap: 4px 22px; }
}