/* ==========================================================================
   Portfolio — site styles
   Scale is driven by --base (≈0.81% of the viewport width, like the reference
   design), so typography and spacing keep their proportions on any screen.
   Colours come from the admin panel (theme) via :root variables injected in
   the page head: --bg, --fg, --accent, --radius-px.
   ========================================================================== */

:root {
  --base: clamp(9px, 0.81vw, 12px);
  --bg: #ffffff;
  --fg: #111111;
  --accent: #083aff;
  --radius-px: 15;

  --muted: rgba(0, 0, 0, 0.4);
  --muted: color-mix(in srgb, var(--fg) 40%, transparent);
  --soft: rgba(0, 0, 0, 0.05);
  --soft: color-mix(in srgb, var(--fg) 5%, transparent);
  --strong: color-mix(in srgb, var(--fg) 85%, transparent);

  --gutter: calc(1 * var(--base));
  --pad: calc(2 * var(--base));
  --line: calc(2.3 * var(--base)); /* one body line incl. leading */
  --radius: calc(var(--radius-px) * 1px);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-body: calc(1.8 * var(--base));
  --fs-h1: calc(4.5 * var(--base));
  --fs-h2: calc(3 * var(--base));
  --fs-caption: calc(1.1 * var(--base));
  --fs-marquee: calc(2.1 * var(--base));
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: var(--weight-body, 400);
  font-size: var(--fs-body);
  line-height: 1.2;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
b, strong { font-weight: var(--weight-bold, 700); }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Sidebar (desktop)
   -------------------------------------------------------------------------- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 22%;
  max-width: 340px;
  height: 100vh;
  height: 100dvh;
  padding: var(--pad) 0 calc(var(--pad) * 3) var(--pad);
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 5;
}
.sidebar::-webkit-scrollbar { display: none; }

.site-name {
  margin: 0 0 var(--line);
  font-size: var(--fs-h1);
  font-weight: var(--weight-name, 700);
  line-height: 1;
  letter-spacing: -0.015em;
}
.site-name a { display: inline-block; }

.nav-group { margin-bottom: var(--line); }
.nav-group-title { display: block; }
.nav-group-title { font-weight: var(--weight-nav, 700); }
.nav-link {
  display: block;
  transition: opacity 0.15s ease;
}
.nav-link:hover { opacity: 0.5; }
.nav-link.is-active {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.site-links { margin-top: var(--line); }

/* --------------------------------------------------------------------------
   Main column
   -------------------------------------------------------------------------- */

.main {
  margin-left: 30%;
  width: 70%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
}
.main-inner { flex: 1 0 auto; }

/* Marquee ---------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--fs-marquee);
  font-weight: var(--weight-marquee, 400);
  line-height: 1.3;
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
}
.marquee.is-ready .marquee-track { animation: marquee var(--duration, 30s) linear infinite; }
.marquee:hover .marquee-track,
.marquee.is-paused .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; flex: none; }
.marquee-part { display: inline-flex; align-items: center; gap: 0.4em; padding-right: 2.6em; }
.marquee-part b { font-weight: var(--weight-bold, 700); }
.marquee a { text-decoration: underline; text-underline-offset: 0.12em; }
.marquee--accent { color: var(--accent); }
.text-icon { display: inline-flex; flex: none; }
.text-icon svg { width: 1em; height: 1em; display: block; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

.home-marquee { margin-bottom: var(--line); }

/* Work sections ---------------------------------------------------------- */

.work-section { margin-top: calc(6.6 * var(--base)); }
.work-sections > .work-section:first-child { margin-top: 0; }
.section-title {
  margin: 0 0 calc(3.3 * var(--base));
  font-size: var(--fs-h2);
  font-weight: var(--weight-section, 500);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Galleries -------------------------------------------------------------- */

.gallery { display: flex; flex-wrap: wrap; gap: var(--gutter); }

.gallery--justified .thumb {
  flex-grow: var(--ar, 1.5);
  flex-shrink: 1;
  flex-basis: calc(var(--row-h, 33%) * var(--ar, 1.5));
}
.gallery--justified .thumb--featured { flex-basis: 100%; flex-grow: 1; }

.gallery--grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  align-items: start;
}
.gallery--grid .thumb--featured { grid-column: 1 / -1; }
.gallery--fixed-ratio .thumb:not(.thumb--featured) { --ar: var(--thumb-ar, 4/3); }

.thumb {
  position: relative;
  display: block;
  margin: 0;
  min-width: 0;
  aspect-ratio: var(--ar, 1.5);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--soft);
  transform: translateZ(0); /* keeps rounded corners crisp during transitions */
  transition: opacity 0.2s ease;
}
a.thumb:hover { opacity: 0.9; }
.thumb img,
.thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  color: var(--muted);
  text-align: center;
}
.thumb figcaption {
  position: absolute;
  left: 0.8em;
  bottom: 0.8em;
  max-width: calc(100% - 1.6em);
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
figure.zoomable { cursor: zoom-in; }

/* Project page ----------------------------------------------------------- */

.project-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--pad);
  align-items: start;
  margin-bottom: var(--line);
}
.project-title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--weight-project, 500);
  line-height: 1;
  letter-spacing: -0.015em;
}
.project-meta { line-height: 1.3; padding-top: 0.2em; }
.project-meta b { font-weight: var(--weight-bold, 700); }

.project-description {
  max-width: 92%;
  margin-bottom: var(--line);
}
.rich p { margin: 0 0 1.2em; }
.rich p:last-child { margin-bottom: 0; }
.rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.12em; }
.project-link { margin-top: 1.2em; }
.project-link a { text-decoration: none; }
.project-link a:hover { text-decoration: underline; }

.slideshow {
  position: relative;
  aspect-ratio: var(--ar, 1.5);
  margin: var(--line) 0;
  cursor: pointer;
  outline: none;
}
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.slide.is-active { opacity: 1; }
.slide img,
.slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  display: block;
}
.slideshow-counter {
  position: absolute;
  left: 0.9em;
  bottom: 0.9em;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  pointer-events: none;
}

.project-gallery { margin-top: var(--line); }
.project-gallery .thumb { border-radius: 0; background: none; }

/* Information page ------------------------------------------------------- */

.info-marquee { margin-bottom: var(--line); }
.info-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: var(--pad);
  row-gap: var(--line);
  align-items: end;
}
.info-heading { font-weight: var(--weight-information, 700); }
.info-heading-caption { padding-bottom: 0.15em; }
.info-about,
.info-details { align-self: start; }
.info-about { max-width: 92%; }
.detail-block { margin-bottom: var(--line); }
.detail-block:last-child { margin-bottom: 0; }
.detail-block-title { display: block; margin-bottom: 0.6em; }
.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-item { display: flex; flex-direction: column; gap: 0.15em; margin-bottom: 1.25em; }
.detail-item:last-child { margin-bottom: 0; }
.detail-title { color: var(--strong); }
.detail-sub { padding-left: 1.6em; }

/* Not found -------------------------------------------------------------- */

.not-found .project-title { margin-bottom: var(--line); }
.not-found a { color: var(--accent); }

/* Footer ----------------------------------------------------------------- */

.site-footer { margin-top: calc(6 * var(--base)); padding-top: var(--pad); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--pad);
}

/* Captions (mono) -------------------------------------------------------- */

.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 1.25;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Page nav (desktop, pinned bottom-left) --------------------------------- */

.page-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 6;
  padding: calc(var(--pad) * 0.75) var(--pad) var(--pad);
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  width: 22%;
  max-width: 340px;
}
.page-nav a:hover { opacity: 0.5; }

/* Mobile header + overlay nav ------------------------------------------- */

.mobile-header { display: none; padding: var(--pad) var(--pad) 0; }
.mobile-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pad);
}
.mobile-header .site-name,
.mobile-nav .site-name { margin-bottom: var(--line); }
.mobile-links .nav-link { display: block; }
.icon-button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}
.icon-button svg { width: calc(3 * var(--base)); height: calc(3 * var(--base)); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--bg);
  overflow-y: auto;
  padding: var(--pad);
}
.mobile-nav .nav-link { padding: 0.15em 0; }

/* Lightbox --------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  cursor: zoom-out;
  animation: fade-in 0.2s ease;
}
.lightbox img,
.lightbox video {
  max-width: calc(100% - var(--pad) * 2);
  max-height: calc(100% - var(--pad) * 2);
  object-fit: contain;
  cursor: default;
}
.lightbox-btn {
  position: absolute;
  z-index: 2;
  appearance: none;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
  padding: var(--pad);
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1;
}
.lightbox-btn:hover { opacity: 0.5; }
.lightbox-close { top: 0; right: 0; }
.lightbox-prev { left: 0; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 0; top: 50%; transform: translateY(-50%); }
.lightbox-counter { position: absolute; left: var(--pad); bottom: var(--pad); }
@keyframes fade-in { from { opacity: 0; } }

/* Focus ------------------------------------------------------------------ */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .info-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  :root { --base: clamp(10px, 2.7vw, 12px); }

  .sidebar,
  .page-nav { display: none; }

  .mobile-header { display: block; }
  .main { margin-left: 0; width: 100%; padding-top: var(--line); }
  .site-name { font-size: calc(3.6 * var(--base)); }

  .marquee { font-size: calc(1.9 * var(--base)); }
  .work-section { margin-top: calc(5 * var(--base)); }

  .gallery--justified { --row-h: 45% !important; }
  .gallery--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .project-header,
  .info-grid { grid-template-columns: 1fr; row-gap: calc(var(--line) * 0.6); }
  .project-description,
  .info-about { max-width: 100%; }
  .info-heading-caption { display: none; }
  .info-details { margin-top: var(--line); }

  .footer-cols { grid-template-columns: 1fr; row-gap: 0.4em; }
}

@media (max-width: 480px) {
  .gallery--grid { grid-template-columns: 1fr; }
  .gallery--justified .thumb { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee.is-ready .marquee-track { animation: none; }
  .slide { transition: none; }
  .lightbox { animation: none; }
}