/* ==========================================================================
   biagio bureau
   Ported from the original Cargo build. The type scale, colours and column
   widths below mirror the original settings — edit the tokens in :root
   rather than hunting through the file.
   ========================================================================== */

:root {
  --ink:        rgba(0, 0, 0, 0.85);
  --ink-strong: #000;
  --ink-mute:   rgba(0, 0, 0, 0.35);
  --paper:      #fff;

  --pad-page:   4rem;   /* page margin                       */
  --pad-head-t: 2rem;
  --pad-head-b: 1rem;

  --w-index:    50%;    /* projects index column width       */
  --w-project:  75%;    /* individual project column width   */

  --fs-body:    1.5rem;
  --fs-small:   1rem;
  --fs-nav:     1.2rem;
  --lh:         1.3;

  --gap-figure: 6rem;   /* vertical rhythm between images    */
}

/* Cargo's root scale: 1rem = 10.368px */
html { font-size: 64.8%; -webkit-text-size-adjust: 100%; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img    { border: 0; max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--ink-strong); text-decoration: none; }
a:active { opacity: .7; }
a:hover  { opacity: .6; }
a.is-active { opacity: .4; }

h1 { font-size: var(--fs-small); line-height: var(--lh); font-weight: 400; margin: 0; }

/* -------------------------------------------------------------- header ---- */

.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: var(--pad-head-t) var(--pad-page) var(--pad-head-b);
}

.site-header--overlay { position: fixed; inset: 0 0 auto 0; z-index: 10; }

.logo     { display: block; line-height: 0; }
.logo img { width: 13rem; height: auto; }

.nav { display: flex; gap: 1.6rem; font-size: var(--fs-nav); padding-top: .3rem; }
.site-header--overlay .nav a,
.site-header--overlay .nav a:hover { color: #fff; }

/* ---------------------------------------------- home: backdrop slideshow --- */

body.home { background: #000; overflow: hidden; }

.slideshow { position: fixed; inset: 0; background: #000; cursor: pointer; }
.slides    { list-style: none; margin: 0; padding: 0; height: 100%; }

.slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--fade, 500ms) ease-in-out;
}
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

/* ------------------------------------------------------------- content ---- */

.content {
  width: var(--w-project);
  margin: 0 auto;
  padding: 0 0 var(--pad-page);
}

/* projects index ----------------------------------------------------------- */

.index { width: var(--w-index); }

.project-list { list-style: none; margin: 0; padding: 0; }
.project-list li + li { margin-top: var(--gap-figure); }

.project-list a { display: block; text-align: center; }
.project-list a:hover { opacity: 1; }
.project-list a:hover img { opacity: .85; }

.project-list .t,
.project-list .p { display: block; font-size: var(--fs-small); line-height: 1.5; }
.project-list .t { color: var(--ink-strong); }
.project-list .p { color: var(--ink-mute); margin-bottom: 1.2rem; }
.project-list img { width: 100%; transition: opacity .2s ease; }

/* project pages ------------------------------------------------------------ */

.project-head { text-align: center; margin-bottom: 2.4rem; }
.project-head h1    { color: var(--ink-strong); }
.project-head .place { margin: 0; font-size: var(--fs-small); color: var(--ink-mute); }

.project figure + figure,
.project figure + .gallery,
.project .gallery + figure { margin-top: var(--gap-figure); }

.project img { width: 100%; }

.gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 2rem;
}

/* credits ------------------------------------------------------------------ */

.credits { margin-top: var(--gap-figure); font-size: var(--fs-small); }
.credits dl { margin: 0; }
.credits div { display: flex; gap: .5em; }
.credits dt { font-weight: 600; color: var(--ink-strong); }
.credits dt::after { content: ":"; }
.credits dd { margin: 0; color: var(--ink-strong); }

/* studio ------------------------------------------------------------------- */

.studio { width: 100%; padding-left: var(--pad-page); padding-right: var(--pad-page); }
.studio h1 { font-weight: 600; font-size: var(--fs-body); margin-bottom: 2.4rem; }

.contact { margin: 0; font-size: var(--fs-small); }
.contact div + div { margin-top: 1.8rem; }
.contact dt { color: var(--ink-strong); }
.contact dd { margin: 0; color: var(--ink-mute); }
.contact dd a { color: var(--ink-mute); }
.contact dd a:hover { color: var(--ink-strong); opacity: 1; }

/* -------------------------------------------------------------- mobile ---- */

@media (max-width: 700px) {
  html { font-size: 100%; }

  :root {
    --pad-page: 1.4rem;
    --fs-body: 1rem; --fs-small: .8rem; --fs-nav: .85rem;
    --gap-figure: 2.5rem;
  }

  .site-header { padding: 1.1rem var(--pad-page); align-items: center; }
  .logo img { width: 8.5rem; }

  .content { width: 100%; padding-left: var(--pad-page); padding-right: var(--pad-page); }
  .gallery { --cols: 2; gap: .8rem; }
}