/* Homepage sections: hero, featured signals and the projects grid.
   Requires hud.css. */

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  align-items: start;
  min-height: 1036px;
  padding-left: 70px;
}

.hero_frame {
  position: absolute;
  top: 28px;
  left: 23px;
  width: 533px;
  height: 913px;
  fill: none;
  stroke: #4a586b;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.hero_frame_hatch,
.hero_frame_blocks,
.hero_frame_dots,
.hero_frame_ruler,
.hero_frame_slashes,
.hero_frame_tick {
  position: absolute;
  pointer-events: none;
}

/* dim diagonal hatching sitting on the raised top edge of the frame */
.hero_frame_hatch {
  top: 31px;
  left: 330px;
  width: 86px;
  height: 15px;
  background: repeating-linear-gradient(108deg, transparent 0 6px, rgba(238, 30, 108, 0.45) 6px 8px);
}

/* solid magenta blocks that finish the hatch run */
.hero_frame_blocks {
  top: 31px;
  left: 423px;
  width: 52px;
  height: 15px;
  background: repeating-linear-gradient(108deg, transparent 0 4px, var(--pink) 4px 9px);
}

/* punched dot grids, top-right inside the frame and bottom-centre */
.hero_frame_dots {
  top: 60px;
  left: 476px;
  width: 66px;
  height: 78px;
  background-image: radial-gradient(rgba(238, 30, 108, 0.75) 1.2px, transparent 1.3px);
  background-size: 13px 13px;
}

.hero_frame_dots::after {
  content: '';
  position: absolute;
  top: 848px;
  left: -122px;
  width: 58px;
  height: 22px;
  background-image: radial-gradient(rgba(155, 168, 186, 0.75) 1.2px, transparent 1.3px);
  background-size: 13px 11px;
}

/* small measuring tick against the inside of the left rail */
.hero_frame_ruler {
  top: 33px;
  left: 40px;
  width: 9px;
  height: 38px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.hero_frame_ruler::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  border-left: 1px solid var(--rule);
}

.hero_frame_slashes {
  top: 911px;
  left: 51px;
  width: 48px;
  height: 13px;
  background: repeating-linear-gradient(108deg, transparent 0 3px, var(--pink) 3px 8px);
}

.hero_frame_tick {
  top: 853px;
  left: 24px;
  width: 2px;
  height: 46px;
  background: var(--pink);
}

.hero_copy {
  position: relative;
  z-index: 1;
  padding: 176px 0 30px;
}

.prompt {
  margin: 0;
  color: #c3c8d1;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.hero_title {
  margin: 32px 0 0;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.015em;
}

/* the reference sets this headline in an ultra-condensed display cut; Bebas is
   the closest libre face, squeezed to the reference's letter width */
.hero_title span {
  display: block;
  white-space: nowrap;
  transform: scaleX(0.735);
  transform-origin: left center;
}

.hero_title_intro {
  font-size: 110px;
  line-height: 1.1;
}

.hero_title_first {
  color: var(--pink);
}

.hero_title_first,
.hero_title_last {
  font-size: 143px;
  line-height: 0.875;
}

.roles {
  width: 460px;
  max-width: 100%;
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: #9aa4b2;
  font-size: 10.5px;
  letter-spacing: 0.16em;
}

.roles b {
  color: var(--pink);
  font-weight: 400;
}

.roles i {
  color: #5d6a7c;
  font-style: normal;
}

.lede {
  max-width: 470px;
  margin: 45px 0 0;
  color: var(--white);
  font-size: 13px;
  line-height: 2.25;
}

.pink {
  color: var(--pink);
}

.cyan {
  color: var(--cyan);
}

.gold {
  color: var(--gold);
}

.footnote {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

.cta_row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 44px 0 0;
}

/* gold corner brackets plus a full underline, as drawn in the reference */
.cta {
  padding: 19px 24px 16px;
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.17em;
  text-decoration: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(rgba(247, 176, 42, 0.18), rgba(247, 176, 42, 0.18));
  background-size: 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px, 100% 1px, 100% 0%;
  background-position: left top, left top, right top, right top, left bottom, right bottom, left bottom, left bottom;
  transition: background-size 220ms ease, color 180ms ease;
}

.cta:hover,
.cta:focus-visible {
  color: #ffd458;
  background-size: 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px, 100% 1px, 100% 100%;
}

.cta_hint {
  padding-bottom: 6px;
  color: #6f7a8a;
  font-size: 10px;
  letter-spacing: 0.16em;
}

/* --------------------------------------------------------- identity visual */

.hero_visual {
  container-type: inline-size;
  position: relative;
  margin: 13px -10px 0 0;
}

/* the render's own near-black ground is lighter-blended into the panel so the
   illustration sits in the page rather than in a visible box */
.hero_visual img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: lighten;
}

.id_head {
  position: absolute;
  top: 8.4%;
  left: 29%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  font-size: 1.9cqw;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.id_head b {
  color: var(--pink);
  font-weight: 400;
}

.id_head em {
  color: #cfd8e2;
  font-style: normal;
  font-size: 0.85em;
}

.id_bars {
  display: flex;
  gap: 0.5cqw;
}

.id_bars i {
  width: 0.75cqw;
  height: 2.2cqw;
  background: #2c4a63;
}

.id_bars i:nth-child(3) {
  background: #7ba7c4;
}

.id_bars i:nth-child(4) {
  background: #cfe3f0;
}

.id_bars i:nth-child(5) {
  background: #cfe3f0;
}

.id_details {
  position: absolute;
  top: 58.4%;
  left: 30.5%;
  width: 35%;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
}

.id_meta {
  margin: 0;
}

.id_meta dt {
  margin-top: 1.7cqw;
  color: #8fa3b6;
  font-size: 1.5cqw;
  letter-spacing: 0.16em;
}

.id_meta dt:first-child {
  margin-top: 0;
}

.id_meta dd {
  margin: 0.5cqw 0 0;
  color: var(--white);
  font-size: 2.35cqw;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.id_progress {
  display: block;
  width: 69%;
  height: 1.4cqw;
  border: 1px solid #5a6d80;
}

.id_progress i {
  display: block;
  width: 46%;
  height: 100%;
  background: var(--gold);
}

.id_qr {
  position: absolute;
  top: 60%;
  left: 68%;
  width: 10.5%;
  height: auto;
  fill: #a9e6f5;
  shape-rendering: crispEdges;
}

.id_signature {
  position: absolute;
  top: 70.5%;
  left: 70%;
  width: 13.5%;
  height: auto;
  fill: none;
  stroke: var(--pink);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ----------------------------------------------------------------- signals */

.signals {
  position: relative;
  margin: 0 45px 40px 25px;
  padding: 28px 14px 36px;
}

.signals_frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #4a586b;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.signals_hatch {
  position: absolute;
  width: 66px;
  height: 12px;
  background: repeating-linear-gradient(108deg, transparent 0 4px, #6d7c90 4px 6px);
  pointer-events: none;
}

.signals_hatch--tr {
  top: 13px;
  right: 25px;
}

.signals_hatch--bl {
  bottom: 8px;
  left: 25px;
}

.signals_title {
  position: relative;
  margin: 0 0 22px 10px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.21em;
}

.signal_grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* 1px HUD outline with chamfered corners: outer element is the stroke colour,
   the inner body paints the fill back on top */
.signal {
  --accent: var(--pink);
  background: #3a4a5f;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}

.signal--cyan {
  --accent: var(--cyan);
}

.signal--gold {
  --accent: var(--gold);
}

.signal_body {
  position: relative;
  display: flex;
  gap: 10px;
  min-height: 165px;
  margin: 1px;
  padding: 22px 16px;
  background: #050e1c;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}

.signal_num {
  flex: none;
  width: 46px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 71px;
  font-weight: 400;
  line-height: 0.7;
  transform: scaleX(0.78);
  transform-origin: left top;
}

.signal_text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--rule-soft);
}

.signal_text h3 {
  margin: 0 0 12px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 0.8;
  white-space: nowrap;
  transform: scaleX(0.9);
  transform-origin: left center;
}

.signal_text p {
  margin: 0;
  color: #aab3c0;
  font-size: 11px;
  line-height: 1.85;
}

.signal_tags {
  margin-top: auto;
  padding-top: 18px;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.signal_tags i {
  color: #4d5b6d;
  font-style: normal;
}

.signal_icon {
  position: absolute;
  top: 20px;
  right: 16px;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}

.signal_icon--solid {
  fill: var(--accent);
  stroke: none;
}

.signal_dot {
  position: absolute;
  right: 24px;
  bottom: 20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ------------------------------------------------------------- responsive */

/* Below the reference's 1070px composition the pixel-placed frame furniture no
   longer lines up, so the hero collapses to a single column instead. */
@media (max-width: 1069px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 40px;
    padding: 48px 32px 64px;
  }

  .hero_frame,
  .hero_frame_hatch,
  .hero_frame_blocks,
  .hero_frame_dots,
  .hero_frame_ruler,
  .hero_frame_slashes,
  .hero_frame_tick {
    display: none;
  }

  .hero_copy {
    padding: 0;
  }

  .hero_visual {
    order: -1;
    width: min(520px, 100%);
    margin: 0 auto;
  }

  .hero_title {
    margin-top: 34px;
  }

  .hero_title_intro {
    font-size: clamp(58px, 10vw, 110px);
  }

  .hero_title_first,
  .hero_title_last {
    font-size: clamp(75px, 13vw, 143px);
  }

  .signals {
    margin: 0 24px 32px;
  }

  .signal_grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .signals_hatch {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero {
    padding: 36px 20px 48px;
  }

  .lede {
    font-size: 14px;
    line-height: 1.9;
  }

  .cta_row {
    flex-wrap: wrap;
  }

  .signals {
    margin: 0 14px 24px;
    padding: 24px 14px 30px;
  }
}

/* ========================================================== skill matrix */

/* The periodic table of skills, redrawn in the HUD vocabulary: every element
   is the same chamfered 1px outline as the cards, and the eight flat colours
   of the old table collapse onto the three page accents plus steel. */

.stack {
  padding: 6px 27px 34px;
}

.stack_top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.stack_count {
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.stack_title {
  margin: 26px 0 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stack_text {
  max-width: 68ch;
  margin: 18px 0 0;
  color: var(--white);
  font-family: var(--font-prose);
  font-size: 13.5px;
  line-height: 1.95;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------ the legend */

.stack_legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 26px 0 18px;
  padding: 15px 0 0;
  border-top: 1px solid var(--rule-soft);
  list-style: none;
}

.stack_legend li {
  --accent: var(--cyan);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.stack_legend i {
  width: 11px;
  height: 11px;
  border: 1px solid var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

.stack_legend .lg--fw {
  --accent: var(--pink);
}

.stack_legend .lg--tool {
  --accent: var(--gold);
}

.stack_legend .lg--meta {
  --accent: #a78bfa;
}

.stack_legend .lg--rookie {
  --accent: #6d949c;
}

.lg--rookie i {
  border-style: dashed;
}

.lg--live i {
  width: 7px;
  height: 7px;
  margin: 0 2px;
  border: 0;
  border-radius: 50%;
  background: var(--pink);
  clip-path: none;
}

.stack_legend .lg--live {
  --accent: var(--pink);
}

/* ------------------------------------------------------------- the table */

.matrix {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the two indents that give the table its periodic-table silhouette; the rest
   of the elements auto-flow around them */
.el--indent-8 {
  grid-column: 8;
}

.el--indent-6 {
  grid-column: 6;
}

.el {
  --accent: var(--cyan);
  --edge: #1d8e9c;
  --tile-fill: #071d2a;
  position: relative;
  aspect-ratio: 1;
  background: var(--edge);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.el--fw {
  --accent: var(--pink);
  --edge: #a33365;
  --tile-fill: #240b1c;
}

.el--tool {
  --accent: var(--gold);
  --edge: #a77a23;
  --tile-fill: #261a06;
}

.el--meta {
  --accent: #a78bfa;
  --edge: #7151a4;
  --tile-fill: #18102a;
}

.el--rookie {
  --accent: #6d949c;
  --edge: #417f79;
  --tile-fill: #0c2223;
}

.el--featured .el_body {
  background: #0a2630;
}

.el--featured .el_name {
  color: var(--white);
}

.el--featured .el_num {
  color: #78a3ad;
}

.el_body {
  position: absolute;
  inset: 1px;
  display: flex;
  flex-direction: column;
  padding: 9px 9px 8px;
  border: 0;
  background: var(--tile-fill);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

button.el_body,
a.el_body {
  cursor: pointer;
}

.el_sym {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 0.8;
}

.el_name {
  margin-top: auto;
  overflow: hidden;
  color: #93a0b1;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el_num {
  position: absolute;
  top: 9px;
  right: 9px;
  color: #4e5c6f;
  font-size: 8px;
  letter-spacing: 0.06em;
}

/* marks the elements that open a log entry */
.el_dot {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.el_arrow {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: square;
}

/* hover lights the outline up to the full accent, the way the HUD cards do */
.el:has(.el_body:hover),
.el:has(.el_body:focus-visible) {
  background: var(--accent);
}

.el_body:hover,
.el_body:focus-visible {
  background: #0b1a2c;
  outline: 0;
}

.el_body:hover .el_name,
.el_body:focus-visible .el_name {
  color: var(--white);
}

/* --------------------------------------------------------- the log popup */

.story {
  width: min(900px, calc(100vw - 48px));
  max-height: min(780px, calc(100dvh - 48px));
  padding: 0;
  border: 0;
  background: #2c3a4d;
  overflow: auto;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.story--cyan {
  --accent: var(--cyan);
}

.story--meta {
  --accent: var(--gold);
}

.story::backdrop {
  background: rgba(1, 6, 14, 0.72);
}

.story_body {
  margin: 1px;
  padding: 32px 38px 42px;
  background: #050e1c;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.story_head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
}

.story_head b {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.story_tag {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.story_close {
  margin-left: auto;
  padding: 5px 12px 7px;
  border: 1px solid var(--rule);
  background: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.story_close:hover,
.story_close:focus-visible {
  border-color: var(--accent);
  color: var(--white);
}

.story p {
  margin: 0;
  color: #aab3c0;
  font-family: var(--font-prose);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.75;
}

@media (max-width: 640px) {
  .story {
    width: calc(100vw - 28px);
    max-height: calc(100dvh - 28px);
  }

  .story_body {
    padding: 24px 22px 30px;
  }

  .story_head b {
    font-size: 34px;
  }
}

/* -------------------------------------------------------------- responsive */

/* Off the reference width the periodic-table silhouette stops being readable,
   so the indents drop out and the elements reflow into a plain block. */
@media (max-width: 1069px) {
  .stack {
    padding: 6px 20px 30px;
  }

  .stack_title {
    font-size: clamp(46px, 7vw, 64px);
  }

  .matrix {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  .el--indent-6,
  .el--indent-8 {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .stack {
    padding: 6px 14px 24px;
  }

  .matrix {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stack_top {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================== projects */

.work {
  display: block;
  padding: 26px 27px 46px;
}

/* Row one carries the intro column plus three cards; every later row is a
   plain three-up. The intro's extra right margin makes the wider gutter the
   reference shows between the copy and the first card. */
.work_lead {
  display: grid;
  grid-template-columns: 224px repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 26px;
}

.work_lead .intro {
  margin-right: 23px;
}

.work_rest {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 23px;
}

/* ----------------------------------------------------------- intro column */

.intro_eyebrow {
  position: relative;
  margin: 0;
  padding: 13px 0 13px 16px;
  color: var(--white);
  font-size: 10px;
  letter-spacing: 0.18em;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule));
  background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
}

.intro_title {
  margin: 26px 0 0;
  color: var(--white);
  font-family: var(--font-condensed);
  font-weight: 700;
  line-height: 0.82;
}

/* the reference's wordmark is a narrower cut than Oswald; squeezing it to the
   reference's measured width keeps the weight while matching the width */
.intro_title span {
  display: block;
  transform: scaleX(0.82);
  transform-origin: left center;
  font-size: 74px;
}

.intro_meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
}

.intro_meter_track {
  display: block;
  width: 122px;
  height: 13px;
  background: repeating-linear-gradient(108deg, transparent 0 2px, #3d4658 2px 6px);
}

.intro_meter_track i {
  display: block;
  width: 62%;
  height: 100%;
  background: repeating-linear-gradient(108deg, transparent 0 2px, var(--gold) 2px 6px);
}

.intro_meter b {
  color: #6f7a8a;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.intro_text {
  margin: 26px 0 0;
  color: var(--white);
  font-family: var(--font-prose);
  font-size: 13.5px;
  line-height: 1.95;
  letter-spacing: 0.01em;
}

.intro_foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 0;
}

.intro_index {
  padding: 8px 12px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.intro_note {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.13em;
  white-space: nowrap;
}

/* ------------------------------------------------------------ project card */

/* Same 1px chamfered HUD outline as the homepage cards: the outer element is
   the stroke colour and the inner body paints the fill back over it. */
.proj {
  --accent: var(--pink);
  background: #2c3a4d;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.proj--cyan {
  --accent: var(--cyan);
}

.proj--gold {
  --accent: var(--gold);
}

.proj_body {
  display: flex;
  flex-direction: column;
  height: calc(100% - 2px);
  margin: 1px;
  padding: 12px 11px 16px;
  background: #030b16;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.proj_head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0 4px;
}

.proj_num {
  color: var(--accent);
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.proj_cat {
  padding-left: 12px;
  border-left: 1px solid var(--rule);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.19em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj_dash {
  flex: none;
  width: 22px;
  height: 2px;
  margin-left: auto;
  background: repeating-linear-gradient(90deg, var(--accent) 0 9px, transparent 9px 13px);
}

.proj_thumb {
  display: block;
  border: 1px solid #1d2c3f;
  background: #05101f;
}

.proj_thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.proj_title {
  margin: 16px 0 0;
  color: var(--white);
  font-family: var(--font-prose);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.proj_desc {
  margin: 10px 0 0;
  color: #97a3b2;
  font-family: var(--font-prose);
  font-size: 12.5px;
  line-height: 1.55;
  /* grows so the tag rows stay aligned across a row of cards */
  flex: 1 0 auto;
}

.proj_tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  padding-top: 4px;
}

.proj_tags span {
  padding: 5px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the reference draws a plain outlined north-east arrow in the accent colour */
.proj_arrow {
  flex: none;
  width: 17px;
  height: 17px;
  margin-left: auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: square;
}

/* -------------------------------------------------------------- responsive */

/* Below the reference's composition the two row structures collapse into one
   continuous grid, so the cards keep flowing instead of leaving a hole where
   the lead row ended. */
@media (max-width: 1069px) {
  .work {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 20px 20px 36px;
  }

  .work_lead,
  .work_rest {
    display: contents;
  }

  .work_lead .intro {
    grid-column: 1 / -1;
    margin: 0 0 6px;
  }

  .intro_title span {
    font-size: clamp(56px, 8vw, 74px);
  }

  .intro_text {
    max-width: 46ch;
  }
}

@media (max-width: 640px) {
  .work {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 14px 28px;
  }

  .proj_title {
    font-size: 21px;
  }
}