/* darrenphoffman.com — a faithful, responsive rebuild of the Cargo layout */
:root {
  --ink: #000;
  --ink-2: #333;
  --ink-3: #666;
  --dim: rgba(0, 0, 0, .45);
  --rule: rgba(0, 0, 0, .1);
  --accent: #cc33ff;
  --gutter: 20px;
  --max: 1100px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }

/* header */
.site-header { text-align: center; padding: 40px var(--gutter) 24px; }
.brand { font-size: 30px; color: var(--ink-2); display: inline-block; letter-spacing: .01em; }
.site-nav { margin-top: 24px; display: flex; justify-content: center; gap: 24px; }
.site-nav a { color: var(--dim); font-size: 16px; position: relative; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav a[aria-current] { color: var(--ink); }

/* grid */
main { max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter) 60px; }
.grid { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 40px; max-width: 1160px; }
.thumb { width: 200px; }
.thumb a { display: block; text-align: center; }
.thumb-img { display: block; width: 200px; height: 133px; margin: 0 auto; overflow: hidden; }
.thumb-img img { width: 200px; height: 133px; object-fit: contain; transition: transform .6s var(--ease), opacity .3s var(--ease); }
.thumb a:hover .thumb-img img { transform: scale(1.04); }
.thumb-title { display: block; margin-top: 20px; font-size: 18px; line-height: 1.5; color: var(--ink); transition: color .25s var(--ease); }
.thumb a:hover .thumb-title { color: var(--accent); }
.filter-title { text-align: center; font-weight: 400; font-size: 20px; margin: 0 0 40px; color: var(--ink-3); }

/* project page */
.project { max-width: 1040px; }
.project-title { text-align: center; font-size: 20px; font-weight: 700; margin: 8px 0 44px; }
.project-content { max-width: 1000px; margin: 0 auto; text-align: center; line-height: 1.6; }
.project-content img { margin: 0 auto 8px; max-height: 78vh; width: auto; max-width: 100%; object-fit: contain; }
.project-content iframe { width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; margin: 0 auto 8px; background: #000; }
.project-content iframe.bar { aspect-ratio: auto; height: 360px; max-width: 640px; background: transparent; }
.project-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, .3); }
.project-content a:hover { text-decoration-color: var(--accent); }
.project-content a > img { margin-bottom: 0; }
.project-content > img + img, .project-content > a + a > img { margin-top: 8px; }
.tags { text-align: center; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--dim); margin: 56px 0 0; }
.tags a { color: var(--dim); }
.tags a:hover { color: var(--accent); }
.pager { display: flex; justify-content: center; gap: 28px; margin-top: 40px; font-size: 22px; color: var(--dim); }
.pager a { color: var(--dim); }
.pager a:hover { color: var(--accent); }
.pager .all { font-size: 20px; }
.center { text-align: center; }

/* footer */
.site-footer { text-align: center; padding: 24px var(--gutter) 40px; font-size: 12px; color: var(--dim); display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.site-footer a { color: var(--dim); }
.site-footer a:hover { color: var(--accent); }

/* responsive */
@media (max-width: 720px) {
  .grid { gap: 32px 24px; }
  .thumb { width: calc(50% - 12px); }
  .thumb-img, .thumb-img img { width: 100%; height: auto; aspect-ratio: 200 / 133; }
  .thumb-title { font-size: 16px; margin-top: 12px; }
  .site-header { padding-top: 28px; }
  .brand { font-size: 26px; }
  .project-title { margin-bottom: 28px; }
  .project-content { font-size: 15px; }
  .project-content img { max-height: none; }
  .pager { gap: 36px; }
  .tags { font-size: 12px; }
}
@media (max-width: 420px) { .grid { gap: 24px 16px; } .thumb { width: calc(50% - 8px); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }