/* Public House — v1: faithful rebuild of the Cargo layout, in the PH house
   style (style guide Rev 01): Helvetica Neue, ink #000, grey #727272,
   PH green #428C5C for PH Explore, hand-lettered names as drawn.
   All sizes are in rem. As on Cargo, 1rem = 1.44% of the window HEIGHT
   (measured: 900 px tall -> 12.96 px, 1200 px -> 17.28 px). */

html { font-size: 1.44vh; }
@media (max-width: 767px) { html { font-size: 15px; } }

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 2rem 4.6rem 4.6rem;
  font: 1rem/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
  background: #fff;
}
a { color: inherit; text-decoration: none; }
a:active { opacity: .7; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
p { margin: 0 0 1.2em; }
ul { margin: 0 0 1.2em; padding-left: 2em; }
hr { border: 0; border-top: 1px solid #000; margin: .4rem 0 .5rem; }
h2 { font-size: 1.1rem; font-weight: bold; margin: 0 0 1.2em; }

/* ---------- header: as Cargo builds it — inline images on text lines, sized
   as a share of their column (mail 6%, logo 60%, PH Explore 30%, nav 60%) ---------- */
.top img { display: inline; vertical-align: baseline; height: auto; }
.top .right { text-align: right; }
.top .r2 { column-gap: 2rem; margin-top: 1.85rem; }
.top { margin-bottom: -0.26rem; }
.mail img { width: 6%; }
.logo img { width: 60%; }
.explore-logo img { width: 30%; }
nav ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12rem; list-style: none; margin: 0; padding: 0; }
nav ul.n4 { grid-template-columns: repeat(4, 1fr); }
.top nav li img { height: .59rem; width: auto; max-width: 100%; }   /* hand-lettered labels, one cap height */

/* ---------- 12 column grid (Cargo column-set) ---------- */
.cols { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1rem; align-items: start; }
.cols > .col { grid-column: span var(--span, 4); min-width: 0; }
/* Cargo column-set: width = span/12 x (row + gutter) - gutter, for any gutter */
.xentry { display: flex; gap: var(--g, 1rem); }
.xentry > .col { flex: 0 0 calc(var(--span) / 12 * (100% + var(--g, 1rem)) - var(--g, 1rem)); }
.cols:not(:has(> .col[style])) > .col { grid-column: auto; }
.cols:not(:has(> .col[style])) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.center { text-align: center; }
.center figure, .center picture { margin-left: auto; margin-right: auto; }

/* ---------- galleries ---------- */
.gallery { display: grid; gap: 2rem; align-items: start; margin-bottom: 2rem; }
.gallery figure { margin: 0; }
.gallery.grid { grid-template-columns: repeat(var(--cols, 3), 1fr); }
.gallery.c2 { --cols: 2; }
.gallery.c3 { --cols: 3; gap: 1rem; }
.gallery.crop { gap: 1.4rem; }
.gallery.crop img { object-fit: cover; width: 100%; }
.gallery figure.span2 { grid-column: span 2; }
.gallery.justify { display: flex; gap: 1rem; align-items: flex-start; }
.gallery.justify figure { flex: var(--ar, 1) 1 0; min-width: 0; }
.gallery.slideshow { grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; }
.gallery.slideshow figure { scroll-snap-align: start; }
.x-talks .gallery.slideshow img { max-height: 30rem; width: auto; margin: 0 auto; }
.gallery.columns { columns: 2; display: block; }
figcaption { font-size: .7rem; margin-top: .5em; color: #727272; }
.captions figcaption { font-size: 1rem; text-align: center; color: #000; }

/* ---------- home ---------- */
.home .intro { margin-bottom: 3.6rem; }

/* ---------- project pages ---------- */
.titles { list-style: none; margin: 0; padding: 0; color: #727272; }
.titles li { margin-bottom: 1.2em; }
.titles li.current > a { color: #000; }
.titles .desc { color: #000; margin-top: 1.2em; margin-bottom: 2.4em; }

/* ---------- PH Explore (green) ---------- */
.explore main { color: #428c5c; font-size: .9rem; }
.explore main a { color: #428c5c; text-decoration: underline; text-decoration-color: #7fae8c; }
.explore h2 { color: #428c5c; }
.xindex { list-style: none; margin: 0; padding: 0; }
.xindex li { margin-bottom: 1.2em; }
.xindex li.current a { color: #428c5c; font-weight: bold; font-size: 1.1rem; text-decoration: none; }
.xindex .more { color: #7fae8c; }
.big { display: block; font-size: 3.2rem; color: #428c5c; text-align: center; line-height: 1.2; }
.article figcaption { color: #7fae8c; }

/* ---------- small screens: single column ---------- */
@media (max-width: 767px) {
  body { padding: 1.2rem 1rem 3rem; }
  .top .cols { display: grid; } .mail img { width: 1.4rem; }
  nav ul, nav ul.n4 { column-gap: 1rem; }
  nav li img { width: 100%; }
  .cols, .xentry { display: block; }
  .cols > .col:empty { display: none; }
  .gallery.grid, .gallery.c3 { grid-template-columns: 1fr; }
  .gallery figure.span2 { grid-column: auto; }
  .gallery.justify { flex-direction: column; }
}

/* 3D structural model under the gallery (same viewer as v2) */
.project figure.model{margin:2.6rem 0 0}
.project figure.model canvas{display:block;width:100%;aspect-ratio:16/10;cursor:grab}
.project figure.model figcaption{font-size:.86rem;color:#727272;margin-top:.4rem}
.project figure.model a{color:inherit}