/* Archives page. Figma: portfolio / Desktop - 12 (421:191); panel = Frame 440 (410:240).
   Positions use --u = one Figma pixel of the 1440 frame, so the layout scales with the window. */

@font-face { font-family: "Paper Mono"; src: url("content/fonts/PaperMono-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Paper Mono"; src: url("content/fonts/PaperMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --u: calc(100vw / 1440);
  --gutter: 20px;
  --ink: #000;
  --muted: #838383;
  --surface: #f5f5f5;
  --mono: "Paper Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-sheen: linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%);
  --glass-rim: rgba(255, 255, 255, 0.9);
  --glass-edge: rgba(0, 0, 0, 0.05);
  --glass-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.08);
  --bg: #fff;
  --panel-ink: #515151;
  --chip-bg: rgba(0, 0, 0, 0.04);
  --knob: rgba(255, 255, 255, 0.95);
  --plate: #d9d9d9;
  --menu-bg: rgba(250, 250, 250, 0.8);
}
/* night (the panel's switch; remembered under the same key as the sphere) */
html[data-theme="dark"] {
  --bg: #000; --ink: #ededed; --muted: #8f8f8f; --panel-ink: #ececec;
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-sheen: linear-gradient(140deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 45%);
  --glass-rim: rgba(255, 255, 255, 0.16); --glass-edge: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.4);
  --chip-bg: rgba(255, 255, 255, 0.07); --knob: rgba(255, 255, 255, 0.16);
  --plate: #222; --menu-bg: rgba(30, 30, 30, 0.8);
}
html[data-theme="dark"] site-navbar .nav-logo-img { filter: invert(1); }
html, body { transition: background-color 0.5s var(--ease), color 0.5s var(--ease); }
html { background: var(--bg); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.frame { padding: 0 var(--gutter); }
.js-motion [data-reveal]:not(.is-shown) { opacity: 0; }
/* fade-up when it comes on screen (archives.js adds .is-shown; --d staggers a row).
   It moves with `translate`, so the cards' own hover lifts (transform) are left alone. */
.js-motion [data-reveal].is-shown { animation: reveal 0.6s cubic-bezier(0.33, 1, 0.68, 1) var(--d, 0s) backwards; }
@keyframes reveal { from { opacity: 0; translate: 0 8px; } }

/* ---------- Hero: panel + three windows ---------- */
.hero { position: relative; height: calc(582 * var(--u)); min-height: 420px; }

.arc {
  position: absolute; top: 84px; left: 0; z-index: 5;
  /* ends 24px before the first window (its left edge is 50vw - 277u), so they never overlap */
  width: min(380px, calc(50vw - 277 * var(--u) - var(--gutter) - 24px));
  font-family: var(--mono); font-weight: 400; font-size: 11px; line-height: 1.5; letter-spacing: -0.02em;
  color: var(--panel-ink);
}
.arc__shape { position: absolute; inset: 0; width: 100%; height: calc(100% + 48px); overflow: visible; pointer-events: none; display: none; }
.arc.is-moving .arc__shape { display: block; }
.arc__shape path { fill: var(--glass-bg); filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.08)); }
.arc__glass {
  position: relative; overflow: hidden; border-radius: 20px;
  background: var(--glass-sheen), var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(2) brightness(1.04);
  backdrop-filter: blur(24px) saturate(2) brightness(1.04);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 0.5px var(--glass-edge), var(--glass-shadow);
}
.arc.is-moving .arc__glass { border-radius: 0; box-shadow: inset 0 1px 0 var(--glass-rim); }
.arc__inner { display: flex; flex-direction: column; gap: 32px; padding: 16px; }
.arc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mode { position: relative; display: flex; gap: 4px; padding: 2px; border-radius: 12px; background: var(--chip-bg); }
.mode__knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 10px; background: var(--knob); transition: transform 0.45s var(--ease), background-color 0.5s var(--ease); }
html[data-theme="dark"] .mode__knob { transform: translateX(28px); }
.mode button { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 10px; color: var(--panel-ink); opacity: 0.5; transition: opacity 0.3s var(--ease); }
.mode button[aria-pressed="true"], .mode button:hover { opacity: 1; }
.mode button:focus-visible, .arc__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mode__icon { display: block; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.mode__icon--day { width: 22px; height: 21.1625px; --icon: url("content/day.svg"); }
.mode__icon--night { width: 12px; height: 12px; --icon: url("content/night.svg"); }
.arc__title { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--panel-ink); }
.arc__body { display: flex; flex-direction: column; gap: 10px; max-width: 312px; }
.arc__body p { margin: 0; }
.arc__more { display: none; flex-direction: column; gap: 10px; }
.arc__tools-wrap { display: none; flex-direction: column; gap: 8px; max-width: 312px; }
.arc[data-open="true"] .arc__more,
.arc[data-open="true"] .arc__tools-wrap { display: flex; }
.arc__foot { display: flex; justify-content: flex-end; margin-top: -28px; }
.arc__toggle { border-radius: 4px; }
.arc__toggle::before { content: "..."; }
.arc[data-open="true"] .arc__toggle::before { content: ""; }
.arc__toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.arc__label { margin: 0; }
.arc__tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.arc__tools li { padding: 4px 6px; border-radius: 6px; background: var(--chip-bg); color: var(--panel-ink); white-space: nowrap; }

/* the cluster box spans the three Figma rectangles (x 443–957, y 158–493), centred like the frame */
.wins {
  position: absolute;
  left: calc(50% + (443 - 720) * var(--u)); top: calc(158 * var(--u));
  width: calc(514 * var(--u)); height: calc(335 * var(--u));
}
.win {
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 10px; background: #ececec; text-align: left;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.win:hover, .win:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 20px 44px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06); }
.win:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.win--1 { left: 0; top: calc(45 * var(--u)); width: calc(260 * var(--u)); height: calc(166 * var(--u)); }
.win--2 { left: calc(309 * var(--u)); top: 0; width: calc(205 * var(--u)); height: calc(148 * var(--u)); }
.win--3 { left: calc(284 * var(--u)); top: calc(187 * var(--u)); width: calc(205 * var(--u)); height: calc(148 * var(--u)); }
.win img { flex: 1; min-height: 0; width: 100%; height: auto; object-fit: cover; object-position: top; display: block; }

/* Safari title bar: frosted glass, traffic lights, title */
.bar, .ov__bar {
  display: flex; align-items: center; gap: 8px; flex: none;
  background: rgba(246, 246, 246, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.bar { height: 22px; padding: 0 8px; }
.bar__title { font-size: 10px; line-height: 13px; letter-spacing: -0.2px; color: #464646; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dots { display: flex; gap: 5px; flex: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.dot:nth-child(2) { background: #febc2e; }
.dot:nth-child(3) { background: #28c840; }

/* ---------- Grid: every project, always 4 columns (Figma tiles sit on the frame's quarter lines) ---------- */
.gal { padding: 0 0 168px; }
.gal__head { position: relative; z-index: 6; display: flex; justify-content: flex-end; height: 28px; }
.filter { display: flex; align-items: center; gap: 4px; height: 14px; font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--ink); }
.filter:hover .filter__label { text-decoration: underline; text-underline-offset: 3px; }
.filter__menu {
  position: absolute; top: 20px; right: 0; display: flex; flex-direction: column; padding: 4px; min-width: 150px;
  border-radius: 10px; background: var(--menu-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 28px rgba(0, 0, 0, 0.1);
  transform-origin: top right; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.filter__menu[hidden] { display: flex; visibility: hidden; opacity: 0; transform: scale(0.96) translateY(-4px); }
.filter__menu button { padding: 6px 8px; border-radius: 6px; text-align: left; font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--muted); }
.filter__menu button:hover { background: var(--chip-bg); }
.filter__menu button[aria-pressed="true"] { color: var(--ink); }
.filter__menu button[aria-pressed="true"]::after { content: " ✓"; }
.tile[hidden] { display: none; }
.grid {
  --tile: calc((100vw - 2 * var(--gutter)) * 110 / 1400);
  display: grid; grid-template-columns: repeat(4, var(--tile)); justify-content: space-between;
  /* never more than three rows on screen: a 4th row only appears as the 1st one leaves */
  row-gap: calc((100svh - var(--tile) - 34px) / 3);
}
.tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; -webkit-tap-highlight-color: transparent; }
.tile__img { position: relative; display: block; aspect-ratio: 129 / 126; overflow: hidden; border-radius: 2px; background: var(--plate); }
.tile__img img, .tile__img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__img img { transition: transform 0.8s var(--ease); }
.tile:hover .tile__img img { transform: scale(1.04); }
.tile__img video { opacity: 0; transition: opacity 0.4s; }
.tile__img video.is-on { opacity: 1; }
.tile__cap { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 10px; line-height: 13px; letter-spacing: -0.01em; text-transform: lowercase; color: var(--ink); white-space: nowrap; }
.tile__cap span { overflow: hidden; text-overflow: ellipsis; }
.tile__cap span + span { color: var(--muted); }
.tile:focus-visible { outline: 2px solid #000; outline-offset: 4px; }

/* the genie: strips of the picture on their way between a card and the window */
.genie { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.genie i { position: absolute; left: 0; top: 0; background-repeat: no-repeat; will-change: transform; }

/* ---------- The window a project opens in ---------- */
.ov {
  position: fixed; inset: auto; margin: 0; max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0);
  transition: box-shadow 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.ov.is-in { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 30px 80px rgba(0, 0, 0, 0.25); }
/* the title-bar controls ease in once the window has landed, and out before it leaves */
.ov__bar > * { opacity: 0; transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
.ov.is-in .ov__bar > * { opacity: 1; }
/* the card's picture, laid over the content while it becomes the content (archives.js) */
.ov__cover { position: absolute; z-index: 3; pointer-events: none; background: #f2f2f2 no-repeat 50% 0 / cover; }
.ov::backdrop { background: transparent; } /* the .veil does the blur, in step with the genie */
.veil {
  position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: 0;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(var(--blur, 0px)); backdrop-filter: blur(var(--blur, 0px));
}
/* the card stays put but empty while its picture is out as a window */
.is-out, .is-out > * { visibility: hidden; }
.ov.is-dragging iframe { pointer-events: none; }
.ov__bar { cursor: default; touch-action: none; background: #f2f2f2; }
/* the Mac resize corner: three short diagonal lines */
.ov__grip {
  position: absolute; right: 0; bottom: 0; z-index: 2; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 46%, rgba(0,0,0,.35) 46% 52%, transparent 52% 62%, rgba(0,0,0,.35) 62% 68%, transparent 68% 78%, rgba(0,0,0,.35) 78% 84%, transparent 84%);
}
.ov__win { position: relative; display: flex; flex-direction: column; height: 100%; }
.ov__bar { height: 40px; padding: 0 12px; }
.ov__bar .dots { gap: 7px; }
.ov__bar .dot { width: 12px; height: 12px; }
.ov__bar .dot { position: relative; cursor: pointer; }
/* Mac shows ×, −, + on the lights while the pointer is over them */
.ov__bar .dots:hover .dot::after { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; line-height: 1; color: rgba(0, 0, 0, 0.55); }
.ov__bar .dots:hover [data-close]::after { content: "×"; }
.ov__bar .dots:hover [data-min]::after { content: "−"; }
.ov__bar .dots:hover [data-zoom]::after { content: "+"; }
.ov__addr {
  flex: 1; min-width: 0; margin: 0 auto; max-width: 420px; padding: 4px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.05);
  font-size: 12px; line-height: 15px; letter-spacing: -0.24px; color: #464646; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov__actions { display: flex; gap: 4px; flex: none; }
.ov__btn { padding: 5px 8px; border-radius: 6px; font-size: 12px; line-height: 15px; letter-spacing: -0.24px; color: #000; text-decoration: none; white-space: nowrap; }
.ov__btn:hover { background: rgba(0, 0, 0, 0.06); }
.ov__btn[hidden] { display: none; }
.ov__body { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ov__body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
/* loader for live sites: a Safari-style bar under the title bar and a small glass pill over the picture */
.ov__load { position: absolute; inset: 40px 0 0; z-index: 4; display: grid; place-items: center; pointer-events: none; opacity: 1; transition: opacity 0.4s ease 0.15s; }
.ov__load[hidden] { display: none; }
.ov__load.is-done { opacity: 0; }
.ov__load-bar { position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: #0a84ff; transform-origin: 0 50%; transform: scaleX(0); }
.ov__load.is-on .ov__load-bar { transform: scaleX(0.85); transition: transform 8s cubic-bezier(0.1, 0.7, 0.2, 1); }
.ov__load.is-done .ov__load-bar { transform: scaleX(1); transition: transform 0.25s ease-out; }
.ov__load-pill {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  font-family: var(--mono); font-size: 11px; line-height: 14px; color: #464646;
}
.ov__load-spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, 0.15); border-top-color: #000; animation: ov-spin 0.8s linear infinite; }
@keyframes ov-spin { to { transform: rotate(360deg); } }

/* images / videos of a project */
.pj { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 40px; padding: 32px; }
.pj__info { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 12px; }
.pj__title { margin: 0; font-size: 28px; line-height: 35px; font-weight: 400; letter-spacing: -0.56px; }
.pj__tag { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 14px; text-transform: lowercase; color: var(--muted); }
.pj__text { margin: 0; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; color: #464646; }
.pj__media { display: flex; flex-direction: column; gap: 12px; }
.pj__media img, .pj__media video { width: 100%; height: auto; display: block; border-radius: 4px; background: var(--surface); }
.pj__media video { aspect-ratio: 16 / 9; object-fit: cover; }
/* each picture keeps its plate (right size from the first frame) and fades in once it has arrived */
.pj__media > * { opacity: 0; transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1); }
.pj__media > .is-ready { opacity: 1; }
.site-info { position: absolute; left: 12px; bottom: 12px; z-index: 1; max-width: 360px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.08);
  font-size: 12px; line-height: 15px; letter-spacing: -0.24px; color: #464646; transition: opacity 0.4s; }
.site-info.is-gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .win, .tile__img img { transition: none; }
  .pj__media > * { opacity: 1; transition: none; }
  .ov__load-bar, .ov__load-spin { animation: none; transition: none; }
}

/* ---------- iPad 768–1199 ---------- */
@media (max-width: 1199px) {
  :root { --gutter: 32px; --u: calc(100vw / 880); }
  /* panel on top, windows under it (no room side by side) */
  .hero { height: auto; min-height: 0; padding: 84px 0 64px; }
  .arc { position: relative; top: 0; width: min(380px, 100%); }
  .wins { position: relative; left: 50%; top: 0; margin: 48px 0 0 calc(-257 * var(--u)); }
  .grid { --tile: calc((100vw - 2 * var(--gutter)) * 0.16); }
}

/* ---------- iPhone ≤767 ---------- */
@media (max-width: 767px) {
  :root { --gutter: 16px; --u: calc(100vw / 560); }
  .hero { padding-bottom: 48px; }
  .arc { width: 100%; }
  .wins { margin-top: 40px; }
  .grid { --tile: calc((100vw - 2 * var(--gutter)) * 0.38); grid-template-columns: repeat(2, var(--tile)); row-gap: calc(100vw - 2 * var(--gutter) - 2 * var(--tile)); } /* 2 across, smaller tiles; row gap = the horizontal gap between them */
  .tile__cap span + span { display: none; } /* too narrow for the tag on phones */
  .gal { padding-bottom: 100px; }
  .ov { border-radius: 0; }
  .ov__grip { display: none; }
  .ov__addr { max-width: none; }
  .ov__btn { padding: 5px 6px; }
  .pj { grid-template-columns: 1fr; gap: 24px; padding: 16px; }
  .pj__info { position: static; }
  .site-info { right: 12px; }
}