.portfolio-page { background: #050607; color: #fff; }
.portfolio-page main { position: relative; }
.portfolio-page .topbar { min-height: 88px; }
.portfolio-page .top-nav a[aria-current="page"] { color: #fff; }
.portfolio-page .top-nav a:focus-visible,
.portfolio-page .language-switch button:focus-visible,
.portfolio-page button:focus-visible,
.portfolio-page a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.portfolio-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.portfolio-hero-image,
.portfolio-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.portfolio-hero-image { display: block; object-fit: cover; object-position: center 52%; }
.portfolio-hero-shade { background: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 30%, transparent 62%), linear-gradient(to bottom, rgba(0,0,0,.58), transparent 27%); }
.portfolio-hero-content { position: absolute; z-index: 1; inset: auto var(--edge) 112px; }
.portfolio-eyebrow { margin: 0; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.portfolio-hero h1 { margin: 16px 0 0; font-size: clamp(44px, 8vw, 96px); font-weight: 520; letter-spacing: -.07em; line-height: .92; }
.portfolio-description { max-width: 384px; margin: 20px 0 0; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.45; }
.portfolio-hero-hint { position: absolute; z-index: 1; bottom: 32px; left: var(--edge); display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.portfolio-hero-hint i { display: block; width: 1px; height: 24px; background: linear-gradient(#fff, transparent); }
.portfolio-photo-credit { position: absolute; right: var(--edge); bottom: 24px; color: rgba(255,255,255,.42); font-size: 10px; }

.portfolio-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; width: min(100%, 1080px); margin: 0 auto; padding: 48px 16px 128px; }
.portfolio-sidebar { display: grid; align-content: start; gap: 24px; min-width: 0; }
.feed-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.feed-brand-mark { display: block; width: 22px; height: 24px; overflow: hidden; flex: none; }
.feed-brand-mark img { display: block; width: 136px; max-width: none; height: auto; }
.feed-brand div { display: grid; gap: 3px; }
.feed-brand strong { font-size: 14px; font-weight: 560; }
.feed-brand span:not(.feed-brand-mark) { color: rgba(255,255,255,.52); font-size: 12px; }
.instagram-follow { display: flex; min-height: 40px; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; background: #fff; color: #050607; font-size: 13px; font-weight: 560; transition: background-color 160ms ease, transform 160ms ease; }
.instagram-follow:hover { transform: translateY(-1px); background: rgba(255,255,255,.84); }
.filter-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filter-list::-webkit-scrollbar { display: none; }
.filter-button { flex: none; border: 1px solid transparent; border-radius: 999px; padding: 9px 13px; background: transparent; color: rgba(255,255,255,.56); cursor: pointer; font-size: 13px; text-align: left; transition: color 160ms ease, background-color 160ms ease; }
.filter-button:hover { color: #fff; }
.filter-button.is-active { background: #fff; color: #050607; }
.site-index { display: none; }
.feed-column { min-width: 0; }
.feed-list { display: grid; gap: 40px; }
.feed-card { overflow: hidden; border: 1px solid #1f1f1f; border-radius: 16px; background: #0b0b0b; }
.feed-card[hidden] { display: none; }
.feed-card-head { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; }
.feed-card-head strong { font-weight: 550; }
.feed-avatar { display: block; width: 32px; height: 32px; flex: none; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: #000; }
.feed-avatar img { display: block; width: 136px; max-width: none; height: auto; }
.post-date { color: rgba(255,255,255,.48); white-space: nowrap; }
.new-badge { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 3px 7px; color: #fff; font-size: 9px; font-weight: 650; letter-spacing: .1em; }
.post-kind { margin-left: auto; color: rgba(255,255,255,.52); font-size: 11px; white-space: nowrap; }
.post-media { position: relative; overflow: hidden; background: #111; aspect-ratio: 4 / 5; }
.post-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; top: 50%; left: 50%; display: grid; width: 56px; height: 56px; place-items: center; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(0,0,0,.34); color: #fff; font-size: 20px; cursor: pointer; backdrop-filter: blur(8px); }
.video-media.is-playing .video-play { opacity: 0; }
.video-media:hover .video-play, .video-media:focus-within .video-play { opacity: 1; }
.video-sound { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 0 10px; background: rgba(0,0,0,.48); color: #fff; font-size: 11px; cursor: pointer; backdrop-filter: blur(8px); }
.video-sound span:first-child { font-size: 15px; }
.carousel-media { touch-action: pan-y; }
.carousel-track { display: flex; width: 100%; height: 100%; transition: transform 320ms cubic-bezier(.2,.7,.2,1); }
.carousel-track img { display: block; width: 100%; height: 100%; flex: 0 0 100%; object-fit: cover; user-select: none; }
.carousel-arrow { position: absolute; top: 50%; display: grid; width: 36px; height: 36px; place-items: center; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.34); border-radius: 50%; background: rgba(0,0,0,.56); color: #fff; cursor: pointer; font-size: 24px; line-height: 1; backdrop-filter: blur(6px); }
.carousel-arrow:disabled { opacity: .32; cursor: default; }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-count { position: absolute; right: 12px; bottom: 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 5px 9px; background: rgba(0,0,0,.55); color: rgba(255,255,255,.88); font-size: 11px; }
.post-copy { margin: 0; padding: 14px 16px 16px; color: rgba(255,255,255,.9); font-size: 14px; line-height: 1.5; }
.post-copy span { color: #8fb3ff; }
.post-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0 16px 16px; font-size: 13px; font-weight: 540; }
.post-actions a { color: #fff; transition: color 160ms ease; }
.post-actions a:hover { color: rgba(255,255,255,.66); }
.site-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #111; }
.site-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.7,.2,1); }
.site-media:hover img { transform: scale(1.025); }
.site-media span { position: absolute; inset: auto 12px 12px auto; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: 6px 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; }
.feed-end { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 0; padding: 24px 0; color: rgba(255,255,255,.46); font-size: 13px; text-align: center; }
.feed-end a { color: #fff; font-weight: 520; }
.portfolio-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 32px; min-height: 128px; padding: 30px var(--edge) 24px; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 620; letter-spacing: .16em; text-transform: uppercase; }
.portfolio-footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.portfolio-footer a { transition: opacity 160ms ease; }
.portfolio-footer a:hover { opacity: .64; }

@media (min-width: 1024px) {
  .portfolio-layout { grid-template-columns: 260px minmax(0, 600px); justify-content: center; gap: 64px; padding-top: 72px; }
  .portfolio-sidebar { position: sticky; top: 24px; align-self: start; gap: 28px; }
  .instagram-follow { width: 100%; }
  .filter-list { display: grid; gap: 2px; overflow: visible; }
  .filter-button { border-radius: 8px; padding: 10px 12px; }
  .site-index { display: grid; gap: 10px; }
  .site-index-title { margin: 0 0 2px; color: rgba(255,255,255,.52); font-size: 10px; font-weight: 650; letter-spacing: .18em; }
  .site-index a { position: relative; display: grid; gap: 4px; padding: 9px 24px 9px 0; border-top: 1px solid rgba(255,255,255,.12); }
  .site-index a strong { font-size: 14px; font-weight: 540; }
  .site-index a span { color: rgba(255,255,255,.52); font-size: 12px; }
  .site-index a i { position: absolute; top: 12px; right: 0; color: rgba(255,255,255,.5); font-style: normal; }
  .portfolio-description { font-size: 14px; }
}

@media (max-width: 1023px) {
  .portfolio-hero-content { bottom: 112px; }
  .portfolio-sidebar { gap: 20px; }
  .feed-brand-mark { width: 22px; height: 24px; }
  .portfolio-layout { max-width: 720px; }
}

@media (max-width: 760px) {
  .portfolio-hero { min-height: 600px; }
  .portfolio-hero-content { inset: auto 24px 112px; }
  .portfolio-hero h1 { max-width: 620px; font-size: clamp(48px, 12vw, 68px); }
  .portfolio-description { max-width: 360px; font-size: 13px; }
  .portfolio-hero-hint { left: 24px; bottom: 32px; }
  .portfolio-photo-credit { right: 24px; bottom: 26px; font-size: 9px; }
  .portfolio-layout { gap: 28px; padding: 40px 16px 112px; }
  .feed-card-head { gap: 8px; padding-inline: 12px; font-size: 12px; }
  .post-copy { padding: 13px 14px 14px; font-size: 13px; }
  .post-actions { padding-inline: 14px; font-size: 12px; }
  .portfolio-footer { flex-direction: column; min-height: auto; padding: 28px 24px 36px; font-size: 9px; }
}

@media (max-width: 420px) {
  .portfolio-page .top-nav { gap: 14px; }
  .portfolio-hero h1 { font-size: 48px; }
  .filter-button { padding: 8px 11px; font-size: 12px; }
  .feed-brand span:not(.feed-brand-mark) { font-size: 11px; }
  .post-date { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track, .site-media img { transition: none; }
  .video-play, .video-sound, .instagram-follow { transition: none; }
}