/* tech.css - the Technology page.

   Modelled on the reference board: a dark opening with the subject named in a
   small red label, the statement set in light panels under it, and a collage of
   the work banked down both edges of the screen. Then the capabilities, one per
   block, alternating a plate and a column of type: a name, a line of title case
   under it saying what the name means, the paragraph, and where it earns one, a
   list.

   Scoped to body.pg-tech. One face on the page, the display face the Defense
   page uses, prose included. The runs are short enough now that setting them in
   it is a decision rather than a legibility problem.

   No em dashes and no middle dots in rendered text. */

body.pg-tech{
  --tcpad:clamp(18px,3.4vw,58px);
  /* One ground and one ink. The steel blue went the way the red did: every
     run on this page is white, and the hierarchy is weight, size and tracking.
     The heading sits at 700, the label is tracked out a size below it, and the
     list is the quiet run under both. */
  --tcbase:#0A0A0A;
  --tcpanel:#C9CBCD;
  --tcease:cubic-bezier(.25,.1,0,1);
  background:var(--tcbase);color:#fff}
body.pg-tech main{display:block;background:var(--tcbase)}
body.pg-tech section{position:relative;background:var(--tcbase)}


/* ============================================================ THE OPENING
   Three bands across the screen: a collage, the statement, a collage. The
   collages are absolutely placed inside their own column and clipped by it, so
   they run off the top and the bottom of the opening the way a pinboard does
   rather than sitting in a neat grid. */
.tch{min-height:100svh;overflow:hidden;background:var(--tcbase);
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.6fr) minmax(0,.82fr);
  align-items:center}
.tch__mid{align-self:center}

/* taller than the frame, because the two banks counter scroll and a column
   sized to the viewport shows its own top and bottom edge as it travels */
.tchcol{position:relative;height:118%;top:-9%;overflow:hidden;will-change:transform}
.tchcol img{position:absolute;display:block;object-fit:cover;
  filter:grayscale(.55) contrast(1.12) brightness(.78);
  box-shadow:0 0 0 1px rgba(255,255,255,.07)}
/* every tile is placed by hand: a collage laid out on a grid is a contact
   sheet, and the overlap is the only thing that makes it read as a board */
.tchcol img:nth-child(1){top:-4%;left:2%;width:62%;aspect-ratio:4/3}
.tchcol img:nth-child(2){top:10%;left:38%;width:56%;aspect-ratio:3/4}
.tchcol img:nth-child(3){top:28%;left:-6%;width:52%;aspect-ratio:16/10}
.tchcol img:nth-child(4){top:42%;left:30%;width:66%;aspect-ratio:16/9}
.tchcol img:nth-child(5){top:60%;left:4%;width:48%;aspect-ratio:1/1}
.tchcol img:nth-child(6){top:72%;left:40%;width:58%;aspect-ratio:4/3}
.tchcol img:nth-child(7){top:88%;left:10%;width:54%;aspect-ratio:16/10}
/* the right bank is mirrored, so the two sides lean into the type rather than
   repeating the same stagger twice */
.tchcol--r img{transform:scaleX(-1)}
.tchcol--r img:nth-child(1){left:auto;right:2%}
.tchcol--r img:nth-child(2){left:auto;right:38%}
.tchcol--r img:nth-child(3){left:auto;right:-6%}
.tchcol--r img:nth-child(4){left:auto;right:30%}
.tchcol--r img:nth-child(5){left:auto;right:4%}
.tchcol--r img:nth-child(6){left:auto;right:40%}
.tchcol--r img:nth-child(7){left:auto;right:10%}

.tch__mid{position:relative;z-index:2;padding:clamp(40px,8vh,120px) clamp(10px,2vw,34px);
  text-align:center}
/* the statement sits in light panels, which is what the board does: the words
   are the only lit thing on a dark screen full of pictures */
.tch__h{margin:0;font-family:var(--angular);font-weight:600;line-height:1.04;
  letter-spacing:-.01em;text-transform:uppercase}
.tch__h span{display:table;margin:0 auto 10px;padding:.08em .32em;
  background:var(--tcpanel);color:var(--tcbase);white-space:nowrap;
  font-size:clamp(1.5rem,4.2vw,4.2rem)}
.tch__h span:last-child{margin-bottom:0}


/* ============================================================ AT A GLANCE */
.tch__mid{padding-top:clamp(40px,8vh,120px)}
/* The statement that stood between the collage and the first capability is
   gone. It was a headline and a paragraph restating what the three blocks under
   it say in full, and with it removed the first block has to come up to meet the
   collage rather than open on the padding the statement used to need. */
.tcap:first-of-type{padding-top:clamp(44px,6.5vh,96px)}

/* ============================================================ CAPABILITIES
   A plate and a column, alternating sides. The column is the reference's own
   order and it is the order that makes it readable: the name, then one line of
   title case telling you what the name means, then the paragraph, then the list
   if the block has one. */
/* The plate takes more of the measure and more height. At 1.15fr against a
   four by three it was the smaller half of the block, and the photograph is
   the thing carrying the register on this page. */
.tcap{padding:clamp(56px,9vh,130px) var(--tcpad);
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(28px,4.4vw,80px);align-items:center}
.tcap--flip .tcap__media{order:2}
.tcap__media{position:relative;overflow:hidden;background:#050505;aspect-ratio:5/4}
.tcap__media img,.tcap__media video{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.3) contrast(1.06)}


.tcap__h{margin:0;font-family:var(--angular);font-weight:600;
  font-weight:700;font-size:clamp(1.5rem,2.9vw,2.9rem);line-height:1.04;letter-spacing:-.022em}
.tcap__col{position:relative}
/* Each block is a name and the statements under it, and nothing else. It used
   to carry a tracked out line under the name, a drawn rule under the lede, and
   a plus mark and a second tracked out line below that. Four pieces of
   furniture around two pieces of content, and every one of them was a small
   grey line doing the job the white space already does. */

/* The objectives, written as one paragraph. They were a hyphen marked list
   under a lede, then a stack of one line statements, and a stack of short lines
   with nothing joining them reads as fragments floating on the black. The block
   is a name and a paragraph now, and the claims are the sentences in it. */
.tcbody{margin:clamp(18px,2.4vh,30px) 0 0;font-family:var(--angular);font-weight:500;
  font-size:clamp(1rem,1.14vw,1.14rem);line-height:1.54;
  color:#fff;max-width:54ch}
/* ---------- the bigger block ----------
   The middle capability keeps a side plate like the other two, so the page
   alternates all the way down, but it takes more of the measure than they do.
   Full width put it in the middle of the page and broke the rhythm the
   alternation is for. */
/* The block is flipped, so the plate sits in the SECOND column: widening the
   first one made it smaller, not larger. The ratio is written for the column
   the plate is actually in, and the aspect stays 4 by 3 so the extra width
   buys height with it rather than trading one for the other. */
.tcap--big{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)}

@media (max-width:900px){
  .tcap--big{grid-template-columns:1fr}
  .tcap--big .tcap__media{aspect-ratio:4/3}
}

/* ============================================================ THE CLOSE
   The close inverts: one white band under three dark blocks, carrying the last
   line on the page and nothing else. The selector has to name the body, because
   body.pg-tech section paints every section on this page the near black ground
   and a bare .tcend loses to it. The ground is pure white rather than the grey
   the opening panels are set on: a band the full width of the screen reads as a
   colour, where a plate behind a line reads as a highlight. */
body.pg-tech .tcend{background:#fff;color:var(--tcbase)}
.tcend{padding:clamp(70px,11vh,160px) var(--tcpad);text-align:center}
.tcend__h{margin:0 auto;font-family:var(--angular);font-weight:600;
  font-size:clamp(1.5rem,3.2vw,3.2rem);line-height:1.06;letter-spacing:-.02em;
  max-width:24ch}
.tcend .btn{margin-top:clamp(28px,4vh,52px)}


/* ============================================================ NARROW
   The collage comes off below the tablet band. Two banks of seven photographs
   either side of a column of type needs the width to be a board; at 700px it is
   a stack of pictures with the statement lost in the middle of it. */
@media (max-width:640px){
  .tch__h span{white-space:normal;font-size:clamp(1.5rem,8.4vw,2.6rem)}
}
@media (max-width:1024px){
  .tch{grid-template-columns:minmax(0,1fr);min-height:0;
    padding:clamp(60px,12vh,140px) var(--tcpad)}
  .tchcol{display:none}
  .tch__mid{padding-inline:0}
}
@media (max-width:900px){
  .tcap{grid-template-columns:1fr;gap:22px}
  .tcap--flip .tcap__media{order:0}
  .tcap__media{aspect-ratio:4/3}
  .tcend__h{max-width:none}
}