/* ------------------------------------------------------------------
   TEEARCH - portfolio page

   Hand-written, loaded AFTER styles.css and only by portfolio.html. It
   is not generated by Tailwind and Tailwind never needs to run for it.

   The palette, the type and the voice are the home page's. The FORM is
   its own: this page is a CATALOGUE OF PLATES. Every other page on the
   site is led by type and uses photography to support it - the home
   page frames images in rounded tiles, the about page in portrait
   spreads, the services page in captioned bands, the PMC page in a
   single plate. This page is the work itself: six sector chapters of
   three plates each, hung on a twelve-column grid so that no two plates
   line up, every one of them captioned underneath in mono like a
   catalogue entry. Nothing here is a card, nothing is rounded, nothing
   lifts on hover, and no image is held in a frame or run to the edge -
   the plates sit on paper the way they would on a page.

   Every value below reads a brand token that styles.css already
   publishes on :root, so the pages cannot drift apart.
------------------------------------------------------------------ */

/* ------------------------------------------------------------- type */

/* The masthead h1 uses the home page's own `text-display` size from
   styles.css, so all five heroes set at the same scale. This is the
   size below it, used by the closing block. */
.head-md {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--color-ink);
}

/* The serif italic accent, same role as on the other four pages. */
.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-brass);
}

/* Mono caption type. Every label on this page is one of these. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}

/* ---------------------------------------------------------- masthead */

/* Deliberately short. The other pages hold you on type above the fold;
   this one says what the catalogue is and hands over to the work. */
.mast { padding-block: 8.5rem 3rem; }

@media (min-width: 768px) {
  .mast { padding-block: 11rem 4rem; }
}

/* The six sectors as one wrapped line of jump links, not a list - a
   catalogue's contents, set the way a caption is set. */
.index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 2.75rem;
  border-top: 1px solid var(--color-ink);
  padding-top: 1rem;
}
.index a {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.3s var(--ease-out-soft);
}
.index a:hover { color: var(--color-brass); }
.index a .n { color: var(--color-brass); margin-right: 0.4rem; }
.index .sep { color: var(--color-line); }

/* ---------------------------------------------------------- chapters */

/* A sector opens like a chapter of a catalogue: a rule to both edges,
   the sector set large, and the count of plates beside it. The number
   is the sector's, not the plate's - plates are numbered straight
   through 01 to 18 regardless of which sector they sit in. */
.chap { padding-block: 4.5rem 0; }
/* The first chapter follows the masthead's own rule, so it does not
   need the full gap the later ones open between sectors. Matched off
   the masthead rather than with :first-of-type - both are <section>s,
   so the masthead is the first of that type and the chapter is not. */
.mast + .chap { padding-top: 2rem; }

.chap-head {
  display: grid;
  gap: 0.75rem;
  border-top: 1px solid var(--color-ink);
  padding-top: 1.25rem;
}
.chap-head h2 {
  margin: 0;
  font-size: clamp(1.75rem, 4.2vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--color-ink);
}
.chap-head .no { color: var(--color-brass); }

@media (min-width: 768px) {
  .chap-head {
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 1.5rem;
  }
  .chap-head .count { text-align: right; }
}

/* ------------------------------------------------------------ plates */

/* Three plates to a sector on a twelve-column grid, each chapter set
   the opposite way round from the one above it. The offsets and the
   top margins are the point: on a wide screen no two plates share a
   left edge, a top edge or a proportion, so the page reads as a
   catalogue rather than a gallery of equal thumbnails. */
.set { display: grid; gap: 3rem; margin-top: 2.5rem; }

.pl { margin: 0; }
.pl-img {
  position: relative;
  overflow: hidden;
  background: var(--color-paper-3);
  aspect-ratio: 4 / 3;
}
.pl-img img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-soft);
}
.pl:hover .pl-img img { transform: scale(1.03); }

/* The caption is a catalogue entry: plate number, then the project,
   then where it is. Under the image on a hairline - the home page
   floats a pill label over the image instead, which is the thing this
   is not. */
.pl figcaption {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  column-gap: 1rem;
  border-top: 1px solid var(--color-line);
  padding-top: 0.85rem;
  margin-top: 0.85rem;
}
.pl .no {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  color: var(--color-brass);
  padding-top: 0.2em;
}
.pl h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.pl .where {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}

@media (min-width: 900px) {
  .set {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 2.5rem;
    row-gap: 0;
    margin-top: 3.5rem;
  }

  .set > *:nth-child(1) { grid-column: 1 / 8;  grid-row: 1; }
  .set > *:nth-child(2) { grid-column: 9 / 13; grid-row: 1; margin-top: 5.5rem; }
  .set > *:nth-child(3) { grid-column: 3 / 11; grid-row: 2; margin-top: 4rem; }

  /* Every second chapter mirrors the first, so the eye is thrown to
     the other side of the page as it comes down. */
  .set-flip > *:nth-child(1) { grid-column: 6 / 13; }
  .set-flip > *:nth-child(2) { grid-column: 1 / 5;  }
  .set-flip > *:nth-child(3) { grid-column: 3 / 11; }

  /* Three proportions, one per position: the wide plate, the upright
     beside it, the panorama beneath. */
  .set > *:nth-child(1) .pl-img { aspect-ratio: 4 / 3; }
  .set > *:nth-child(2) .pl-img { aspect-ratio: 3 / 4; }
  .set > *:nth-child(3) .pl-img { aspect-ratio: 21 / 9; }
}

/* ---------------------------------------------------------- gazetteer */

/* Where the work is. A gazetteer set in columns, the way an index at
   the back of a book is set - the one place on the site that uses CSS
   columns, and the only list of projects that is ordered by place
   rather than by sector or by size. */
.gaz {
  margin-top: 3rem;
  column-gap: 3rem;
}
.gaz > div {
  break-inside: avoid;
  border-top: 1px solid var(--color-line);
  padding: 1.1rem 0;
}
.gaz > div:first-child { border-top: 1px solid var(--color-ink); }
.gaz h3 {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}
.gaz h3 span {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  font-weight: 400;
  color: var(--color-muted-2);
}
.gaz ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.gaz li {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

@media (min-width: 700px) { .gaz { columns: 2; } }
@media (min-width: 1100px) { .gaz { columns: 3; } }

/* ---------------------------------------------------------- colophon */

/* The closing. The home page ends on a rounded ink panel, the about
   page on a full-bleed ink band, the services page on an amber one and
   the PMC page inside a drawing title block - so the catalogue ends
   the way a catalogue does, on a centred colophon between two rules.
   It is the only centred block on the page. */
.colophon {
  max-width: 44rem;
  margin: 0 auto;
  border-top: 1px solid var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  padding: 3.5rem 0;
  text-align: center;
}
.colophon h2 { margin: 1.5rem 0 0; }
.colophon p.txt {
  margin: 1.5rem auto 0;
  max-width: 32rem;
  font-size: var(--text-lede);
  line-height: 1.6;
  color: var(--color-muted);
}
.colophon .acts {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.colophon dl {
  display: grid;
  gap: 1.25rem;
  margin: 3rem 0 0;
  border-top: 1px solid var(--color-line);
  padding-top: 1.75rem;
}
.colophon dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.colophon dd {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
}
.colophon a.q {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  transition: color 0.3s var(--ease-out-soft), border-color 0.3s var(--ease-out-soft);
}
.colophon a.q:hover { color: var(--color-brass); border-bottom-color: var(--color-brass); }

@media (min-width: 640px) {
  .colophon dl { grid-template-columns: repeat(3, 1fr); }
}

/* Reveals reuse the home page's .reveal contract - app.js adds .is-in. */