/* ==========================================================================
   Layout — pairs with js/layout.js. Loaded after site.css on every page.
   Ruled project rows with uniform crops and large numbered titles on the home
   page; on project pages the disciplines / credits sit level with the bottom
   of the lead image. Desktop only: small screens keep the site.css layout.
   ========================================================================== */

@media (min-width: 721px) {

  :root { --sidebar-width: 22%; }

  /* home: even, ruled rows instead of stacked line breaks */
  :root [data-page="home"] main > .bodycopy > br { display: none; }
  :root .t-row { padding-block: 3rem; border-top: 1px solid var(--rule); }
  :root .t-row:first-child { padding-top: 0; border-top: 0; }

  /* image top lines up with the title; every thumbnail gets the same crop */
  :root .t-media > br { display: none; }
  :root .t-media .media { aspect-ratio: 16 / 10; overflow: hidden; }
  :root .t-media .media img { height: 100%; object-fit: cover; }

  /* project pages: the text stays in view while its images scroll past */
  :root body:not([data-page="home"]) main .cols > .col[style*="--span: 4"] {
    position: sticky;
    top: var(--page-padding);
    align-self: start;
  }

  /* ---- Numbered serif titles, bottom-anchored sidebar nav ---- */
  :root { --text-size: 1.1rem; }   /* body copy; baseline is 1.2rem */
  :root [data-page="home"] main > .bodycopy { counter-reset: project; }
  /* sidebar: the nav / contact block sits at the bottom of the window. The
     gap above it stretches; on a short window the sidebar scrolls instead
     of overlapping. */
  :root .sidebar { height: 100dvh; overflow-y: auto; scrollbar-width: none; }
  :root .sidebar > .bodycopy { display: flex; flex-direction: column; min-height: 100%; }
  :root .sidebar-gap { flex: 1 0 auto; height: auto; min-height: calc(2 * var(--line-height) * 1em); }


  :root .t-row { counter-increment: project; }
  :root .t-title {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 400;
    text-decoration: none;
  }
  :root .t-title::before {
    content: counter(project, decimal-leading-zero);
    margin-right: 0.7rem;
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--text-muted);
  }
  :root .t-title .project-title,
  :root .t-title .project-title u {
    display: inline;
    font-size: 1.8rem;
    line-height: 1.1;
    text-decoration: none;
  }

  /* disciplines (and credits / the link) sit at the bottom of the text column,
     last line level with the bottom of the image beside it */
  :root .t-text { display: flex; flex-direction: column; }
  :root .t-text > br { display: none; }
  :root .t-text > .t-title { margin-bottom: 1.4rem; }
  :root .t-text > .t-tags { margin-top: auto; padding-top: 2rem; }
  :root .t-text > .t-link { align-self: flex-start; margin-top: 1.2rem; }
  :root .t-text > :last-child { margin-bottom: -0.2em; }

  :root body:not([data-page="home"]) main .cols.t-lead > .col.t-lead-text[style*="--span: 4"] {
    position: static;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  :root .t-meta { margin-top: auto; padding-top: 1rem; margin-bottom: -0.2em; }
  :root .t-trim { display: none; }
  /* when the text is taller than the image, the image drops so the two still
     end on the same line (project pages keep their three blank lines as a minimum) */
  :root .t-media,
  :root .t-lead > .col:last-child { display: flex; flex-direction: column; }
  :root .t-media > .media,
  :root .t-lead > .col:last-child > .media { margin-top: auto; }
  :root .t-lead > .col:last-child > br { display: none; }
  :root .t-lead > .col:last-child > hr { flex: none; margin-bottom: calc(3 * var(--line-height) * 1em); }
}