/* ============================================================================
   pages.css : page headers, sub navs, articles, lists, plates, forms
   ========================================================================= */

/* ------------------------------------------------------- the page header */
.phead { padding-block: clamp(44px, 5.6vw, 80px) clamp(34px, 4vw, 54px); position: relative; }
.phead::after {
  content: ""; position: absolute; left: var(--gut); right: var(--gut); bottom: 0;
  height: 1px; background: var(--rule);
}
.phead__in {
  display: grid; grid-template-columns: 1.25fr .85fr;
  gap: clamp(26px, 4vw, 64px); align-items: center;
}
@media (max-width: 900px) { .phead__in { grid-template-columns: 1fr; } }
.phead h1 { margin-top: 4px; }
.phead .lede { margin-top: clamp(18px, 2vw, 26px); }

/* Sheet / Drawing / Scale / Revision */
.meta {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.meta div {
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 11px 13px;
}
.meta dt {
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px;
}
.meta dd { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.4; }
@media (max-width: 640px) { .meta { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------- sub nav */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 60;
  background: rgba(247, 244, 236, .93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.subnav__in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  display: flex; gap: clamp(14px, 2.4vw, 34px);
  overflow-x: auto; scrollbar-width: none;
  height: 56px; align-items: center;
}
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); text-decoration: none;
  white-space: nowrap; padding: 6px 0; position: relative;
  transition: color .18s var(--ease); display: inline-flex; gap: 8px;
}
.subnav a .n { color: var(--brass-text); }
.subnav a:hover, .subnav a.on { color: var(--ink); }
.subnav a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brass);
}

/* ------------------------------------------------------- service articles */
.svc { padding-block: clamp(40px, 5vw, 68px); border-top: 1px solid var(--rule); }
.svc:first-of-type { border-top: 0; }
.svc__in { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .svc__in { grid-template-columns: 1fr; } }
.svc__dwg {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-text); display: block; margin-bottom: 14px;
}
.svc__kick {
  font-family: var(--display); font-size: clamp(19px, 1.7vw, 25px);
  font-style: italic; font-weight: 300; color: var(--ink-2);
  margin-top: 14px; line-height: 1.35;
}
.svc__list { list-style: none; margin: 0; padding: 0; }
.svc__list li {
  padding: 15px 0 15px 34px; border-top: 1px solid var(--rule);
  position: relative; color: var(--ink-2); font-size: 15.5px;
}
.svc__list li:first-child { border-top: 0; padding-top: 0; }
.svc__list li:first-child::before { top: .34em; }
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: calc(15px + .34em);
  width: 18px; height: 1px; background: var(--brass);
}
.svc__list li strong { display: inline; }

/* numbered variant for pillar lists */
.numlist { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numlist li {
  counter-increment: n; position: relative;
  padding: clamp(18px, 2vw, 26px) 0 clamp(18px, 2vw, 26px) clamp(46px, 5vw, 72px);
  border-top: 1px solid var(--rule);
}
.numlist li::before {
  content: "0" counter(n);
  position: absolute; left: 0; top: clamp(18px, 2vw, 26px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--brass-text);
}
.numlist h3 { margin-bottom: 8px; }
.numlist p { color: var(--ink-2); font-size: 15.5px; max-width: 68ch; }

/* --------------------------------------------------------- inline notices */
.note {
  border-left: 2px solid var(--brass);
  padding: 4px 0 4px 18px;
  margin-block: clamp(24px, 3vw, 36px);
}
.note p {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.85;
  letter-spacing: .02em; color: var(--ink-2); text-transform: none;
  max-width: 80ch; margin: 0;
}
.note--legal p { color: var(--ink-3); font-size: 11px; }

/* ---------------------------------------------------------- plate figures */
/* the generated drafting plates. paper ground, hairline frame, corner ticks */
.plate {
  margin: 0; position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: clamp(10px, 1.4vw, 18px);
}
.plate img { width: 100%; height: auto; display: block; }
.plate figcaption {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
  padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--rule);
}
.plate figcaption .r { color: var(--brass-text); }
.plate--bare { background: transparent; border: 0; padding: 0; }

/* A true blueprint: white line on navy. The frame goes navy with it, so the
   plate reads as a sheet printed that way rather than as a dark picture in a
   cream mount. */
.plate--blue {
  background: #0b2245;
  border-color: rgba(247, 244, 236, .26);
}
.plate--blue figcaption {
  color: rgba(247, 244, 236, .74);
  border-top-color: rgba(247, 244, 236, .26);
}
.plate--blue figcaption .r { color: #c69e4e; }
/* inside a navy section the mount disappears and only the hairline remains */
.navy .plate--blue { background: transparent; }

/* --------------------------------------------------------------- the grid */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.card { background: var(--card); padding: clamp(22px, 2.6vw, 32px); }
.card__n { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--brass-text); display: block; margin-bottom: 14px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: 15px; margin: 0; }
.navy .cards { background: var(--rule); border-color: var(--rule); }
/* The cell keeps the section's own navy. A paper wash here lifted the
   background enough that the brass card number dropped to 2.3:1; the
   hairline grid is what separates the cells, not a lighter fill. */
.navy .card { background: #0b2245; }

/* stat grids */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.stats > div { background: var(--card); padding: clamp(18px, 2.2vw, 28px); }
.stats .v { font-family: var(--display); font-size: clamp(28px, 3.1vw, 44px); font-weight: 300; letter-spacing: -.02em; color: var(--brass-text); line-height: 1; }
.stats .l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; }
.navy .stats > div { background: rgba(247, 244, 236, .05); }
.navy .stats .v { color: var(--brass); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* Only while a figure is counting up. Tabular figures stop the number
   jittering in width as the digits change, and the settled value goes back
   to the display face's own proportional figures. */
.stats .v.counting {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* region chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--rule-2); padding: 7px 12px;
}
.navy .chips span { color: var(--ink-2); border-color: var(--rule-2); }

/* ------------------------------------------------------------------- faq */
.faqgrp { padding-block: clamp(34px, 4vw, 54px); }
.faqgrp__hd {
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--rule); padding-bottom: 14px; margin-bottom: 6px;
}
.faqgrp__hd h2 { font-size: clamp(24px, 2.4vw, 34px); }
.faqgrp__hd .annot { margin-left: auto; }

.qa { border-bottom: 1px solid var(--rule); }
.qa__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; gap: 18px;
  padding: 20px 0; color: var(--ink);
  font-family: var(--display); font-weight: 300;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.32; letter-spacing: -.01em;
  transition: color .18s var(--ease);
}
.qa__q:hover { color: var(--brass-text); }
.qa__n { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--brass-text); flex: 0 0 auto; padding-top: .45em; }
.qa__ic { margin-left: auto; flex: 0 0 14px; width: 14px; height: 14px; position: relative; margin-top: .5em; }
.qa__ic::before, .qa__ic::after {
  content: ""; position: absolute; background: var(--brass);
  transition: transform .24s var(--ease), opacity .24s var(--ease);
}
.qa__ic::before { left: 0; right: 0; top: 6.5px; height: 1px; }
.qa__ic::after { top: 0; bottom: 0; left: 6.5px; width: 1px; }
.qa.open .qa__ic::after { transform: scaleY(0); opacity: 0; }
.qa__a {
  overflow: hidden; max-height: 0;
  transition: max-height .34s var(--ease);
}
.qa.open .qa__a { max-height: 720px; }
.qa__a > div { padding: 0 0 24px clamp(0px, 3vw, 44px); }
.qa__a p { color: var(--ink-2); font-size: 15.5px; max-width: 74ch; }
html:not(.js) .qa__a { max-height: none; }

/* --------------------------------------------------------- the photo band */
/* A full bleed photograph carrying a navy wash, so it reads as one of the
   dark bands in the page rhythm rather than as a picture dropped in. The
   mono line and corner ticks keep it inside the drawing set. */
.photoband {
  position: relative;
  min-height: clamp(240px, 34vw, 430px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #0b2245;
  --ink: var(--paper);
  --ink-2: rgba(247, 244, 236, .82);
  --ink-3: rgba(247, 244, 236, .72);
  --rule-2: rgba(247, 244, 236, .38);
  --brass-text: var(--brass);
}
.photoband img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.72) contrast(1.02);
}
/* the wash: navy enough that paper type clears AA anywhere on the frame */
.photoband::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(11, 34, 69, .94) 0%, rgba(11, 34, 69, .74) 46%, rgba(11, 34, 69, .62) 100%);
}
.photoband__in {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding: clamp(26px, 4vw, 54px) var(--gut);
}
.photoband p {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(19px, 2.1vw, 31px); line-height: 1.26;
  letter-spacing: -.014em; color: var(--paper);
  max-width: 30ch; margin: 0;
}
.photoband .annot { color: rgba(247, 244, 236, .78); margin-top: 14px; }
.photoband .eyebrow { color: var(--brass); }

/* ------------------------------------------------------- the contact sheet */
/* Real photography mounted on the drafting sheet the way a drawing set
   carries site photographs: each frame is a numbered plate, hairline framed,
   with the mono caption under it. Full bleed, so the strip reads as a band
   across the page rather than as a gallery widget. */
.contact { position: relative; background: var(--paper-3); }
.contact__strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule-2);
  border-block: 1px solid var(--rule-2);
}
.contact figure { margin: 0; position: relative; background: var(--paper-3); overflow: hidden; }
.contact img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4 / 3;
  filter: saturate(.92) contrast(1.02);
  transition: filter .4s var(--ease), transform .6s var(--ease);
}
.contact figure:hover img { filter: saturate(1) contrast(1.04); transform: scale(1.02); }
/* A solid bar, not a gradient scrim. Over a bright frame a scrim leaves the
   top of the lettering sitting on the photograph itself, which drops the
   caption under AA. Solid also reads more like the numbering strip down the
   edge of a real contact sheet. */
.contact figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 10px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase;
  color: #f7f4ec;
  background: #0b2245;
}
.contact figcaption .r { color: #b08a3e; }
.contact__bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px;
  padding: 12px var(--gut);
  max-width: var(--wrap); margin-inline: auto;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-3);
}
.contact__bar .r { margin-left: auto; color: var(--brass-text); }
/* Five frames do not divide into three or two without leaving an empty cell,
   which reads as a hole punched in the strip. Below the full row the first
   frame becomes a wide lead plate, so the rows fill exactly: 1, then 2, 2. */
@media (max-width: 1100px) {
  .contact__strip { grid-template-columns: repeat(2, 1fr); }
  .contact figure:first-child { grid-column: 1 / -1; }
  .contact figure:first-child img { aspect-ratio: 16 / 7; }
}

/* ------------------------------------------------------------- spotlights */
.feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.feat article { background: var(--card); padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.feat .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-text); }
.feat h3 { font-size: clamp(19px, 1.7vw, 24px); }
.feat p { color: var(--ink-2); font-size: 14.5px; margin: 0; }
.feat .d { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.year { padding-block: clamp(26px, 3vw, 40px); }
.year__hd { display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.year__hd h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--brass-text); font-weight: 400; }
.year__hd .annot { margin-left: auto; }
/* The engagement log is title plus venue. The live site carries no dates on
   individual entries, only the year on the group heading, so there is no
   date column to leave room for. */
.log { list-style: none; margin: 0; padding: 0; }
.log li {
  display: grid; grid-template-columns: 1fr auto; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.log .ti { color: var(--ink); font-size: 15.5px; }
.log .vn {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); text-align: right;
}
@media (max-width: 720px) {
  .log li { grid-template-columns: 1fr; gap: 5px; }
  .log .vn { text-align: left; }
}

/* ---------------------------------------------------------------- careers */
.role { border-top: 1px solid var(--rule); padding-block: clamp(30px, 4vw, 52px); }
.role__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 20px; margin-bottom: 8px; }
.role__hd h2 { font-size: clamp(24px, 2.5vw, 36px); }
.tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--rule-2); padding: 6px 11px;
}
.tag--brass { color: var(--brass-text); border-color: var(--brass); }
.role__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 46px); margin-top: clamp(20px, 2.4vw, 30px); }
@media (max-width: 820px) { .role__grid { grid-template-columns: 1fr; } }
.role__lab { font-family: var(--mono); font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }

/* form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.f-full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form { grid-template-columns: 1fr; } }
.field label {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 8px;
}
.field label .req { color: var(--brass-text); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--card); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 0;
  padding: 12px 14px; font-family: var(--body); font-size: 15px;
  transition: border-color .18s var(--ease); appearance: none;
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 2.6 L4 5.6 L7 2.6' fill='none' stroke='%230b2245'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 10px;
  padding-right: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); outline: none; }
.field .hint { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--ink-3); margin-top: 7px; }
.field .err {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  color: #8d2c1e; margin-top: 7px; display: none;
}
.field.bad input, .field.bad select, .field.bad textarea { border-color: #8d2c1e; }
.field.bad .err { display: block; }

.drop-file {
  border: 1px dashed var(--rule-2); padding: 22px; text-align: center;
  cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease);
  display: block;
}
.drop-file:hover, .drop-file.over { border-color: var(--brass); background: var(--card); }
.drop-file .t { font-size: 14.5px; color: var(--ink); }
.drop-file .s { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.drop-file input[type=file] { display: none; }

.formdone {
  display: none; border: 1px solid var(--brass);
  padding: clamp(24px, 3vw, 38px); background: var(--card);
}
.formdone.on { display: block; }
.formdone h3 { margin-bottom: 10px; }
.formdone p { color: var(--ink-2); margin: 0; }
.form.off { display: none; }

/* ------------------------------------------------------------- our story */
.quote {
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: clamp(24px, 3vw, 42px); line-height: 1.3; letter-spacing: -.015em;
  margin: 0; color: var(--ink);
}
.quote__by { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-top: 20px; font-style: normal; }

.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.tl li { position: relative; padding: 0 0 clamp(24px, 3vw, 36px) 34px; }
.tl li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 11px; height: 11px; border: 1px solid var(--ink); background: var(--paper);
}
.tl li:last-child::before { border-color: var(--brass); background: var(--brass); }
.tl li:last-child { padding-bottom: 0; }
.tl h3 { font-size: clamp(18px, 1.6vw, 23px); margin-bottom: 8px; }
.tl p { color: var(--ink-2); font-size: 15.5px; margin: 0; }

/* ------------------------------------------------------------ prose block */
.prose p { color: var(--ink-2); max-width: 70ch; }
.prose p + p { margin-top: 1.05em; }
.prose h3 { margin-top: clamp(28px, 3vw, 40px); margin-bottom: 12px; }