/**
 * MASTERKA — Archive (highlights bento, index, closing interlude). Built by explorations/case-study/projects/build-archive.js
 * Brand Book 08: Paper and one spark of orange · Instrument Serif speaks, Manrope explains, Victor Mono labels ·
 * every preview = a brand ground + a ghost of the project + one key piece of the work · cards radius 40 px.
 */
.ar { --paper: #F4F4F0; --void: #0A0A0A; --acc: #FF4400; --peach: #FF9A76; --blush: #FFD3BE; --grey: #6B6B66;
    --fg: var(--void); --fg2: var(--grey); --line: rgba(10,10,10,.09); --ease: cubic-bezier(.33,1,.68,1); --spring: cubic-bezier(.34,1.56,.64,1);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    position: relative; background: var(--paper); color: var(--fg); font-family: 'Manrope', sans-serif; }
.ar *, .ar *::before, .ar *::after { box-sizing: border-box; }
.ar :where(h2, h3, p) { margin: 0; }
.ar :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: none; }
.ar a { color: inherit; text-decoration: none; }
.ar-w { width: 100%; max-width: 92rem; margin-inline: auto; padding-inline: clamp(1.5rem, 4vw, 3.5rem); }
.ar-mono { font-family: 'Victor Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.ar-kicker { display: inline-flex; align-items: center; gap: .7rem; font-family: 'Victor Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--fg2); }
.ar-kicker i { display: inline-flex; width: 10px; height: 10px; color: var(--acc); transition: transform .7s var(--spring); }
.ar-kicker i svg { width: 100%; height: 100%; }
.ar-head:hover .ar-kicker i { transform: rotate(90deg); }
.ar-pill { display: inline-flex; align-items: center; padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--line); color: var(--fg2); transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }

/* ── Chapters ── */
.ar-ch { padding: clamp(5.5rem, 9vw, 8rem) 0 clamp(2rem, 4vw, 3rem); }
.ar-ch + .ar-ch { padding-top: clamp(5rem, 9vw, 8rem); }
.ar-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.ar-head h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: .92; letter-spacing: -.025em; margin-top: 1.4rem; max-width: 14ch; }
.ar-head h2 em { color: var(--acc); font-style: italic; }
.ar-head > p { color: var(--fg2); font-size: 1rem; line-height: 1.65; max-width: 40ch; }

/* ── Tile — one frame for every preview: 40 px radius, a brand ground, analogue grain, the ghost and the piece ── */
.ar-tile { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: clamp(1.75rem, 2.8vw, 2.5rem); overflow: hidden; isolation: isolate; container-type: size; background: var(--paper); transform: translateZ(0); }
.ar-tile::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: var(--grain); opacity: .07; mix-blend-mode: multiply; border-radius: inherit; }

/* Grounds */
.ar-g-aura { background: #F6EFE9; }
.ar-g-blush { background: #FBE7DC; }
.ar-g-white { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.ar-g-grid { background-color: var(--paper); background-image: linear-gradient(rgba(10,10,10,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,.07) 1px, transparent 1px); background-size: 40px 40px; background-position: center; }
.ar-g-dots { background-color: #EFEEE8; background-image: radial-gradient(rgba(10,10,10,.2) 1px, transparent 1.3px); background-size: 20px 20px; background-position: center; }
.ar-g-ring { background: var(--paper); }
.ar-g-sunrise { background: linear-gradient(160deg, #FF4400 0%, #FF6B2B 42%, #FFB48F 100%); }
.ar-g-sunrise::after { mix-blend-mode: overlay; opacity: .12; }

/* Aura — radial blobs that drift on a 12 s loop, only while the tile is on screen */
.ar-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ar-aura i { position: absolute; width: var(--s); aspect-ratio: 1; border-radius: 50%; will-change: transform; animation: ar-drift 12s ease-in-out infinite alternate paused; transition: translate 1.4s var(--ease); }
.is-live > .ar-aura i { animation-play-state: running; }
@keyframes ar-drift { to { transform: translate3d(var(--dx), var(--dy), 0) scale(1.06); } }
.ar-aura__o { background: radial-gradient(circle, rgba(255,68,0,.36), rgba(255,68,0,0) 68%); }
.ar-aura__p { background: radial-gradient(circle, rgba(255,154,118,.58), rgba(255,154,118,0) 68%); }
.ar-aura__c { background: radial-gradient(circle, rgba(255,211,190,.95), rgba(255,211,190,0) 68%); }
.ar-g-grid .ar-aura i, .ar-g-dots .ar-aura i, .ar-g-white .ar-aura i { opacity: .7; }

/* Ring ground — a large fluid ring drifting behind the work (Brand Book 04.6 rule 06: big rings live in the background) */
.ar-ringbg { position: absolute; z-index: -1; width: 92%; aspect-ratio: 1; pointer-events: none; animation: ar-turn 24s ease-in-out infinite alternate paused; }
.is-live > .ar-ringbg { animation-play-state: running; }
.ar-ringbg svg { width: 100%; height: 100%; overflow: visible; }
.ar-ringbg path { fill: none; stroke: var(--acc); stroke-opacity: .4; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
@keyframes ar-turn { to { transform: rotate(14deg) scale(1.04); } }

/* Ghost — the project's world behind the piece: a second picture, cropped large, greyscale, multiplied into the ground */
.ar-ghost { position: absolute; inset: -6%; z-index: 0; pointer-events: none; overflow: hidden; transition: translate 1.4s var(--ease); }
.ar-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: var(--go, .14); transform: scale(1.12); transition: transform 1.6s var(--ease), opacity 1s var(--ease); }
a:hover .ar-ghost img { transform: scale(1.04); opacity: calc(var(--go, .14) * 1.4); }

/* Piece — one key part of the work, uncropped in its own ratio, lying on the ground like a print with a soft shadow */
.ar-piece { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(calc(72cqh * var(--r)), 60cqw); aspect-ratio: var(--r); translate: -50% -50%; rotate: var(--rot, 0deg);
    border-radius: clamp(3px, .6cqw, 6px); overflow: hidden; background: #fff;
    box-shadow: 0 1px 2px rgba(40,12,0,.08), 0 14px 28px -12px rgba(60,18,0,.22), 0 42px 70px -28px rgba(80,20,0,.3);
    transition: rotate 1s var(--spring), transform 1.1s var(--ease), box-shadow 1.1s var(--ease); will-change: transform; }
.ar-piece--screen, .ar-piece--photo { border-radius: clamp(6px, 1.2cqw, 12px); }
.ar-piece--photo { width: min(calc(70cqh * var(--r)), 66cqw); }
.ar-piece--cutout { width: min(calc(66cqh * var(--r)), 56cqw); overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.ar-piece--cutout > img, .ar-piece--cutout > video { object-fit: contain; filter: drop-shadow(0 2px 2px rgba(40,12,0,.12)) drop-shadow(0 22px 26px rgba(60,18,0,.24)); }
a:hover .ar-piece--cutout { box-shadow: none; }
.ar-piece > img, .ar-piece > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .8s var(--ease); }
.ar-piece__motion { opacity: 0; }
.ar-piece__motion.is-ready { opacity: 1; }
a:hover .ar-piece { rotate: 0deg; box-shadow: 0 1px 2px rgba(40,12,0,.08), 0 20px 36px -14px rgba(60,18,0,.26), 0 60px 90px -30px rgba(80,20,0,.36); }

/* ── Selected work — the homepage selection: full-bleed covers, two columns, the right one set lower ── */
.ar-feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem); }
.ar-ft { display: block; }
.ar-feat { padding-bottom: clamp(4rem, 8vw, 8rem); }
.ar-ft:nth-child(even) { translate: 0 clamp(4rem, 8vw, 8rem); }
.ar-ft__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: clamp(1.75rem, 2.8vw, 2.5rem); overflow: hidden; background: #ECEBE6; isolation: isolate; }
.ar-ft__img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.4s var(--ease); }
.ar-ft:hover .ar-ft__img img { transform: scale(1); }
.ar-ft__img--video video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.4s var(--ease); }
.ar-ft:hover .ar-ft__img--video video { transform: scale(1); }
.ar-ft__badge { position: absolute; top: 1.1rem; left: 1.1rem; padding: .45rem .8rem; border-radius: 999px; background: var(--acc); color: #fff; font-weight: 700; }
.ar-ft:hover h3 { color: var(--acc); }
.ar-ft:hover .ar-pill { background: var(--void); border-color: var(--void); color: var(--paper); }
@media (max-width: 760px) { .ar-feat { grid-template-columns: 1fr; padding-bottom: 0; } .ar-ft:nth-child(n) { translate: none; } }

/* ── Tools ── */
.ar-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.ar-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.ar-chip { padding: .7rem 1.05rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-family: 'Victor Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg2); transition: all .45s var(--ease); }
.ar-chip sup { margin-left: .35rem; font-size: 8px; color: rgba(10,10,10,.35); }
.ar-chip:hover { border-color: var(--void); color: var(--void); }
.ar-chip.is-on { background: var(--void); border-color: var(--void); color: var(--paper); }
.ar-chip.is-on sup { color: var(--acc); }

/* ── Grid — two columns, the right one set lower (asymmetry & harmony) ── */
.ar-grid { display: grid; grid-template-columns: 1fr; }
.ar-grid.is-cols { grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 3vw, 3rem); align-items: start; }
.ar-grid.is-cols .ar-col:nth-child(2) { padding-top: clamp(4rem, 8vw, 8rem); }
.ar-card { margin-bottom: clamp(3rem, 5.5vw, 5rem); }
.ar-card.is-out { display: none; }
.ar-card > a { display: block; }
.ar-card__m, .ar-ft .ar-card__m { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; padding: 1.25rem .3rem 0; }
.ar-card__m > span:first-child { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.ar-card__m > span:first-child .ar-mono { color: var(--fg2); }
/* card meta is shared by the index cards and the selected work */
.ar-card h3, .ar-ft h3 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(1.75rem, 2.4vw, 2.3rem); line-height: 1; letter-spacing: -.015em; transition: color .5s var(--ease); }
.ar-card a:hover h3 { color: var(--acc); }
.ar-card a:hover .ar-pill { background: var(--void); border-color: var(--void); color: var(--paper); }
@media (max-width: 760px) { .ar-head { grid-template-columns: 1fr; } .ar-tools { align-items: flex-start; } .ar-filters { justify-content: flex-start; } }

/* ── End of the archive — a large fluid ring drifting in the background, between the index and the footer ── */
.ar-end { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(26rem, 62vh, 40rem); display: flex; align-items: center; padding: clamp(4rem, 8vw, 6rem) 0 clamp(6rem, 10vw, 8rem); }
.ar-end__ring { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(118vw, 74rem); aspect-ratio: 1; translate: -50% -46%; pointer-events: none; animation: ar-turn 24s ease-in-out infinite alternate; }
.ar-end__ring svg { width: 100%; height: 100%; overflow: visible; }
.ar-end__ring path { fill: none; stroke: var(--acc); stroke-opacity: .5; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.ar-end__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.6rem; }
.ar-end__line { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .92; letter-spacing: -.025em; }
.ar-end__line em { color: var(--acc); font-style: italic; }
.ar-end__top { background: rgba(255,255,255,.6); color: var(--fg); }
.ar-end__top:hover { background: var(--void); border-color: var(--void); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
    .ar-aura i, .ar-ringbg, .ar-end__ring { animation: none; }
    .ar-piece__motion { display: none; }
    .ar-piece { rotate: 0deg; }
}

/* Case studies in progress (launch 2026-10): thumbnail kept as a soft ghost, label on top, no link */
.ar-soon { display: block; cursor: default; }
.ar-soon__l { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.1rem; border-radius: 100px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); color: #111; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.ar-soon__l i { width: 7px; height: 7px; border-radius: 50%; background: #FF4400; animation: arSoon 1.6s ease-in-out infinite; }
@keyframes arSoon { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ar-soon__l i { animation: none; } }
.ar-soon .ar-ghost img { opacity: calc(var(--go, .14) * 1.5); }