@charset "UTF-8";
/* CSS Document */




/* ======================================================
   DECK — HERO
   Scoped to .page--deck
====================================================== */

.page--deck .project-hero {
  padding-bottom: var(--space-1);
}

.page--deck .project-hero-media--deck {
  margin-top: var(--space-2);
}

.page--deck .project-hero-media--deck img {
  border: 1px solid var(--border-subtle);
  /* No radius. No shadow. Keep it sober. */
}

/* Optional: if the hero image is very wide and you want it to read more like a strip */
@media (min-width: 901px) {
  .page--deck .project-hero-media--deck {
    max-width: 1200px; /* or keep var(--max-width) if you prefer strict consistency */
  }
}



/* ======================================================
   DECK — TYPEFACE STRIP
   Scoped to .page--deck
====================================================== */

.page--deck .section--deck-typeface{
  padding-block: var(--space-3);
}

.page--deck .deck-typeface{
 margin-top: var(--space-3);

}

.page--deck .deck-typeface img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
}

@media (min-width: 1000px){
  .page--deck .deck-typeface{
    width: min(100%, calc(var(--max-width) * 0.92));
  }
}

.page--deck .section--deck-typeface .section-kicker{
  margin-bottom: var(--space-3);
}

.page--deck .deck-typeface{
  margin-top: 0;
  margin-left: 0;
  margin-right: auto;
}


/* ======================================================
   DECK — SYSTEM
   Scoped to .page--deck
====================================================== */

.page--deck .section--deck-system{
  padding-block: var(--space-3);
}

/* Media blocks */
.page--deck .deck-system-media{
  margin: 0;
  margin-top: var(--space-2); /* space from copy */
}

/* If you want a little more separation between comp + web */
.page--deck .deck-system-media + .deck-system-media{
  margin-top: var(--space-3);
}

.page--deck .deck-system-media img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
}

/* Make the system comp feel “bigger” without going full-bleed */
@media (min-width: 1000px){
  .page--deck .deck-system-media--comp{
    width: min(100%, calc(var(--max-width) * 0.98));
  }
}

//* ======================================================
   DECK — RESULT
====================================================== */

.page--deck .section--deck-result{
  padding-block: var(--space-4);
}

.page--deck .deck-result-media{
  margin-top: var(--space-3);
  margin-left: 0;                 /* hard left */
  margin-right: auto;             /* prevents accidental centering */
  width: 100%;                    /* keep wrapper aligned to content column */
  max-width: 100%;                /* no hidden caps */
}

.page--deck .deck-result-media img{
  display: block;
  width: 60%;
  height: auto;
  border: 1px solid var(--border-subtle);
  margin-left: 0;                 /* hard left (again, for safety) */
  margin-right: auto;
}

.page--deck .section--deck-system .deck-system-media:first-of-type {
  margin-top: var(--space-3);
}

.page--deck .deck-result-media {
  margin-top: var(--space-3);
}

/* Exit link spacing (Deck) */
.page--deck .section--deck-result .section-body:has(.link-arrow),
.page--deck .section--deck-result .section-body a {
  margin-top: var(--space-6);
}

/* Slight restraint on wide screens */
@media (min-width: 1000px){
  .page--deck .deck-result-media img{
    width: min(60%, 720px);       /* optional: keeps it from getting silly large */
  }
}