@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lato:wght@400;700;900&family=Muli:wght@900&display=swap');

/* Shared across every public, protected and access page. */
:root {
  --layout-gutter: clamp(24px, 6.56vw, 84px);
  --layout-max: 1300px;
  --layout-ink: #111;
  --layout-muted: #606060;
  --layout-line: #e3e3e3;
  --layout-accent: #c5c0e7;
  --layout-ui: 'Lato', Arial, sans-serif;
  --layout-display: 'Abril Fatface', Georgia, serif;
}
.portfolio-shell {
  box-sizing: border-box;
  width: min(calc(100% - 2 * var(--layout-gutter)), var(--layout-max));
  margin-inline: auto;
}
.portfolio-header.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  margin: 0;
  padding: 10px 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--layout-ink);
  transition: transform 260ms ease, opacity 200ms ease, background-color 200ms ease, top 200ms ease;
}
.home-page .portfolio-header:not(.nav-scrolled) { top: 24px; }
.portfolio-header.nav-scrolled {
  background: rgb(255 255 255 / 90%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.portfolio-header .portfolio-shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.portfolio-header a { color: var(--layout-ink); text-decoration: none; }
.portfolio-header .portfolio-logo { font: 900 20px/1.3 'Muli', Arial, sans-serif; letter-spacing: -.04em; }
.portfolio-nav { display: flex; align-items: center; gap: 28px; }
.portfolio-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 700 15px/1.3 var(--layout-ui); }
.portfolio-nav a.current { background: linear-gradient(var(--layout-accent),var(--layout-accent)) left 68% / 100% 5px no-repeat; }
.portfolio-nav a:hover { background: linear-gradient(var(--layout-accent),var(--layout-accent)) left 66% / 100% 11px no-repeat; }
.portfolio-header.nav-hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.portfolio-header:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.portfolio-header a:focus-visible, .portfolio-footer a:focus-visible, .project-pagination a:focus-visible { outline: 2px solid #7351bd; outline-offset: 5px; }
.site-footer.portfolio-footer { display: block; clear: both; margin: 0; padding: 0; border: 0; background: #fff; color: var(--layout-muted); font: 400 13px/1.6 var(--layout-ui); }
.portfolio-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--layout-line); padding-block: 32px 40px; }
.portfolio-footer a { padding-block: 10px; color: var(--layout-muted); font-weight: 400; text-decoration: none; overflow-wrap: anywhere; }
.portfolio-footer a:hover, .portfolio-footer a:focus-visible { color: var(--layout-ink); text-decoration: underline; text-underline-offset: 4px; }
.project-pagination { display: flex; justify-content: space-between; gap: 32px; border-top: 1px solid var(--layout-line); padding-block: 48px; }
.project-pagination a { max-width: 48%; color: var(--layout-ink); font: 700 18px/1.5 var(--layout-ui); text-decoration: none; }
.project-pagination a:last-child { text-align: right; }
.project-pagination a span { display: block; margin-bottom: 8px; color: var(--layout-muted); font: 400 11px/1.5 var(--layout-ui); letter-spacing: .12em; text-transform: uppercase; }
.project-pagination a:hover { text-decoration: underline; text-decoration-color: var(--layout-accent); text-underline-offset: 6px; }
.access-page { display: flex; flex-direction: column; padding-top: 100px; }
.access-main { flex: 1; }
@media (max-width: 991px) {
  .home-page .portfolio-header:not(.nav-scrolled) { top: 16px; }
}
@media (max-width: 620px) {
  .portfolio-header.navbar { padding-block: 6px; }
  .portfolio-header .portfolio-shell { gap: 12px; }
  .portfolio-nav { gap: 20px; }
  .portfolio-nav a { font-size: 14px; }
  .portfolio-header .portfolio-logo { font-size: 19px; }
  .portfolio-footer-inner { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 24px; }
  .project-pagination { flex-direction: column; gap: 24px; padding-block: 32px; }
  .project-pagination a { max-width: 100%; font-size: 17px; }
  .project-pagination a:last-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .portfolio-header.navbar { transition: none; } }