/* ============================================================
   Demian Blok — portfolio
   Palette sampled from the ICARUS enemy design board.
   Minimal: thick white section rules, outlined content panels,
   white bold headings, blue reserved for emphasis and links.
   ============================================================ */

:root {
  --bg:        #24221f;   /* warm dark graphite */
  --panel:     #2e2b28;   /* content box, one step lighter */
  --panel-2:   #37332f;
  --line:      #413c3610;
  --edge:      #4a453f;   /* panel outline */

  --text:      #f3f0ec;   /* warm off-white */
  --dim:       #aaa49c;
  --dimmer:    #9c958b;

  /* One accent. Three levels of emphasis, all amber:
       .hot     amber bold          the few things that must be read
       strong   white bold + rule   the key sentence in a block
       .term    white bold          named systems, frequent, quiet */
  --amber:      #e8a13c;
  --amber-hi:   #f2bb6a;
  --amber-deep: #8a6530;   /* heading rules, table rules */
  --amber-wash: rgba(232, 161, 60, .12);
  --amber-ink:  #1d1712;   /* text on an amber fill */

  --hover:     rgba(255,255,255,.08);

  --sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --edge-pad: clamp(1.25rem, 3vw, 2.75rem);
  --nav-h: 5.375rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1.25rem); }
/* Everything is sized in rem, so shrinking the root shrinks the whole layout
   together — the same effect as viewing at 90% zoom. Phones stay at 100%,
   where the layout is single column and 16px is already right. */
@media (min-width: 48rem) { html { font-size: 90%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }   /* never let the HTML height attribute distort a scaled image */
a { color: var(--amber); font-weight: 500; text-underline-offset: .2em; }
a:hover { color: var(--amber-hi); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
code { font: 500 .9em/1 var(--mono); color: var(--text); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
/* wider container, used for the featured project card on the home page so the
   text column runs out of copy at roughly the same height as the video column */
.wrap--wide  { max-width: 1460px; }
.wrap--cards { max-width: 1290px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 200;
  background: var(--amber); color: var(--amber-ink); padding: .7rem 1.1rem; font-weight: 700;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
h1 { font-size: clamp(2.125rem, 4.6vw, 3.125rem); line-height: 1.06; }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.875rem); line-height: 1.14; }
h3 { font-size: clamp(1.125rem, 1.7vw, 1.3rem); line-height: 1.22; }
h4 { font-size: 1rem; }

p { margin: 0 0 .9em; max-width: 74ch; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }

.lede { font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.58; }
.dim { color: var(--dim); }
/* level 1: the few things that must be read */
.hot { color: var(--amber); font-weight: 700; }
/* level 3: named systems. Frequent, so it stays white. */
.term { color: var(--text); font-weight: 700; }
/* key sentence: white bold with a blue rule under it, so a scanner catches it */
strong {
  font-weight: 700; color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: .24em;
  text-decoration-skip-ink: none;
}

/* ============================================================
   TOP BAR — brand hard left, tabs hard right, no boxes
   ============================================================ */

.topbar {
  position: sticky; top: 0; z-index: 90;
  /* opaque on purpose: over the hero video a translucent bar reads thinner
     and lower-contrast than the same bar on a dark page */
  background: var(--bg);
  border-bottom: 1px solid var(--edge);
}
.topbar__inner {
  display: flex; align-items: center; gap: 1.75rem;
  min-width: 0;
  height: var(--nav-h);          /* fixed, so no page can render it taller or shorter */
  padding-inline: var(--edge-pad);
}
/* a build marker: paste the one-liner from the README into the console to
   confirm a page is running the current stylesheet */
.topbar::after { content: "v7"; display: none; }
.brand {
  margin-right: auto;
  font-size: clamp(1.3125rem, 2.3vw, 1.6875rem); font-weight: 700;
  text-decoration: none; color: var(--text); letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand i { font-style: normal; color: var(--dimmer); font-weight: 400; padding-inline: .45rem; }

@media (max-width: 34rem) {
  .brand { font-size: 1.0625rem; line-height: 1.18; white-space: normal; }
  .brand i { display: none; }
  .brand em { display: block; font-size: .8125rem; font-weight: 500; }
}
.brand em { font-style: normal; color: var(--amber); font-weight: 700; }

.tabs { display: flex; align-items: center; gap: .25rem; }
.tabs a {
  padding: .8rem 1.2rem; border-radius: 3px;
  font: 500 clamp(1rem, 1.3vw, 1.1875rem)/1 var(--sans);
  color: var(--dim); text-decoration: none; white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.tabs a:hover { background: var(--hover); color: var(--text); }
.tabs a[aria-current="page"] { color: var(--amber); font-weight: 700; }

/* hamburger: the word "Menu" is hidden and three bars are drawn instead,
   so the button stays small on a narrow screen */
.navtoggle {
  display: none; background: none; border: 1px solid var(--edge);
  color: var(--text); border-radius: 4px; cursor: pointer;
  width: 2.9rem; height: 2.6rem; flex: none; padding: 0;
  font-size: 0;
  background-image:
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0);
  background-size: 1.25rem 2px;
  background-repeat: no-repeat;
  background-position: center 30%, center 50%, center 70%;
}
.navtoggle:hover { border-color: var(--amber); color: var(--amber); }
@media (max-width: 56rem) {
  .navtoggle { display: block; }
  .topbar__inner { gap: 1rem; }
  .tabs {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--edge);
    padding: .5rem var(--edge-pad) 1rem;
  }
  .topbar[data-open="true"] .tabs { display: flex; }
  .tabs a { padding: .9rem .5rem; border-top: 1px solid var(--line); }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 3px;
  font: 700 1rem/1 var(--sans);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.btn--primary:hover { background: var(--amber-hi); border-color: var(--amber-hi); color: var(--amber-ink); }
.btn--ghost { background: transparent; border-color: var(--edge); color: var(--text); font-weight: 500; }
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-wash); }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.125rem; }

/* ============================================================
   HOME HERO — video does the work, one card at the bottom
   ============================================================ */

.vhero {
  position: relative;
  height: calc(100vh - var(--nav-h));
  min-height: 30rem;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.vhero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #1c1a17;
}
.vhero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(26,26,25,.92) 0%, rgba(26,26,25,.35) 26%, transparent 55%);
}
.vhero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(1.5rem, 4vh, 3rem); }

.introcard {
  display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); align-items: center;
  background: rgba(46,43,40,.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  max-width: 70rem;
}
@media (min-width: 48rem) { .introcard { grid-template-columns: auto minmax(0,1fr) auto; } }

/* phone: the card sits over the hero, so keep it as short as possible.
   Photo, heading, the ask and a one-line description, then the button. */
@media (max-width: 48rem) {
  .vhero__inner { padding-bottom: .85rem; }
  .introcard {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem .75rem;
    padding: .7rem .8rem .8rem;
    border-radius: 4px;
    border-left-width: 2px;
  }
  .introcard__photo { width: 2.9rem; border-radius: 3px; }
  .introcard h2 { font-size: .9375rem; margin-bottom: .1rem; }
  .seeking { font-size: .875rem !important; margin-bottom: 0 !important; line-height: 1.25; }
  .introcard p:not(.seeking) { font-size: .8125rem; line-height: 1.4; margin-bottom: 0; max-width: none; }
  .introcard .btn {
    grid-column: 1 / -1; justify-content: center;
    padding: .65rem 1rem; font-size: .9375rem; margin-top: .15rem;
  }

  /* On a phone the hero box is tall and narrow, so the whole frame height
     fits and the top of the gameplay screen shows. Oversizing the video and
     anchoring it low crops the top the way the desktop framing does, and
     brings the player further up the screen.
     height = how much to zoom, bottom = how far to push the crop down. */
  .vhero__bg { height: 112%; top: auto; bottom: -4%; }
}

.introcard__photo {
  width: clamp(5.5rem, 9vw, 8rem); aspect-ratio: 1;
  object-fit: cover; border-radius: 3px;
  border: 1px solid var(--edge); background: var(--panel-2);
}
.introcard h2 { font-size: clamp(1.4rem, 2vw, 1.6rem); margin-bottom: .55rem; }
.seeking {
  font: 700 clamp(1.0625rem, 1.65vw, 1.3125rem)/1.4 var(--sans);
  color: var(--amber); margin-bottom: .65rem !important;
}
.introcard p { font-size: clamp(1rem, 1.25vw, 1.0938rem); line-height: 1.6; margin-bottom: .65rem; max-width: 62ch; }
.introcard__facts {
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
  font: 400 .8125rem/1.5 var(--mono); color: var(--dim);
}
.introcard__facts b { color: var(--amber); font-weight: 700; }

/* ============================================================
   PROJECT-PAGE HERO — full screen video, nav row along the bottom
   ============================================================ */

/* Project hero. Deliberately NOT full height: a self-contained full-screen
   hero reads as the end of the page and people never scroll. At ~62vh the
   About panel below is already visible, which is the thing that actually
   tells someone there is more. */
.phero {
  position: relative;
  height: clamp(24rem, 62vh, 42rem);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #1c1a17; }
.phero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(26,24,21,.94) 0%, rgba(26,24,21,.62) 34%, transparent 72%);
}
.phero__inner {
  position: relative; z-index: 3; width: 100%;
  padding-bottom: clamp(3.4rem, 7vh, 4.6rem);   /* clear of the section row */
}

/* title card over the video */
.pherocard { max-width: 54rem; }
.pherocard .titleblock { margin-bottom: .5rem; }
.pherocard h1 { text-shadow: 0 2px 18px rgba(20,18,16,.75); }
.pherocard .pcard__role { margin-top: .15rem; }
.pherocard .metarow { margin-top: .9rem; }
.pherocard .actions { margin-top: 1.25rem; }
@media (max-width: 40rem) {
  .pherocard .enginemark { display: none; }
  .pherocard .metarow { font-size: .8125rem; gap: .3rem 1rem; }
}

/* the section row: sits at the foot of the hero and scrolls away with it */
.secnav { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--edge); background: rgba(36,34,31,.88); backdrop-filter: blur(10px); }
.secnav ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .3rem;
  list-style: none; margin: 0 auto; padding: .55rem var(--edge-pad);
  max-width: 1100px;
}
.secnav a { font-size: .9375rem; }
.secnav ul::-webkit-scrollbar { display: none; }
.secnav li { flex: none; }
.secnav a {
  display: block; padding: .6rem .9rem; border-radius: 3px;
  font: 500 .875rem/1 var(--sans); color: var(--dim);
  text-decoration: none; white-space: nowrap;
}
.secnav a:hover { background: var(--hover); color: var(--text); }

/* ============================================================
   SECTIONS — thick white rule, outlined lighter panel
   ============================================================ */

.sec { padding-block: clamp(1.75rem, 3.6vw, 2.75rem); }

.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: clamp(1.2rem, 2.6vw, 2.125rem);
}
.panel > h2 {
  padding-bottom: .7rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--amber-deep);
}
.panel > h2:not(:first-child) { margin-top: 2.25rem; }

/* sub-block heading inside a panel */
.sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); font-weight: 700;
  margin: 1.85rem 0 .85rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--amber-deep);
}

/* What / How / Why / Retrospective label */
.qlabel { font-weight: 700; color: var(--amber); margin: 1.3rem 0 .3rem; font-size: 1rem; }
.qlabel:first-child { margin-top: 0; }

/* ---------------- title block ---------------- */

.titleblock { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.6rem; }
.titleblock h1 span { color: var(--dim); font-weight: 400; }
/* engine logo, sat top-right of a title or card head */
.enginemark { flex: none; width: clamp(140px, 14vw, 196px); height: auto; opacity: .95; }
.metarow {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.1rem;
  font: 400 .9375rem/1.4 var(--mono); color: var(--dim);
}
.metarow span { display: inline-flex; align-items: center; gap: .5rem; }
.metarow svg { flex: none; color: var(--dim); }

/* ---------------- two-column: text + media beside it ---------------- */

.duo { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
@media (min-width: 58rem) {
  .duo { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .duo--narrow-media { grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); }
  .duo--wide-text { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); }
  .duo--wide-media { grid-template-columns: minmax(0,1fr) minmax(0,1.75fr); }
  /* when the media is moved to the left, the column widths swap with it */
  .duo--media-left.duo--narrow-media { grid-template-columns: minmax(0,1fr) minmax(0,1.45fr); }
  .duo--media-left.duo--wide-media   { grid-template-columns: minmax(0,1.75fr) minmax(0,1fr); }
  .duo--media-left > .duo__media { order: -1; }
}

/* ---------------- media ---------------- */

figure { margin: 1.3rem 0 0; }
figure:first-child { margin-top: 0; }
/* media box. --ar overrides the shape for a clip that is not 16:9;
   --zoom nudges the picture out past the frame to hide edge rows. */
.ratio {
  position: relative; aspect-ratio: var(--ar, 16/9);
  background: #1c1a17; border: 1px solid var(--edge);
  border-radius: 3px; overflow: hidden;
}
.ratio > * {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; object-fit: cover;
  transform: scale(var(--zoom, 1));
}
figure img { width: 100%; height: auto; border: 1px solid var(--edge); border-radius: 3px; background: #1c1a17; }
/* tall Unreal details panels: keep the real aspect ratio, cap the height, fade the cut */
.dashot { max-width: 320px; margin-inline: auto; margin-top: 2rem; }
/* a full-width diagram needs space before the text that follows it */
.page-project > .wrap > .panel > figure,
.page-project figure + .duo { margin-top: 2.25rem; }
.page-project .duo + .qlabel { margin-top: 2rem; }
.dashot .clip {
  max-height: 520px; overflow: hidden; border: 1px solid var(--edge);
  border-radius: 3px; background: #1c1a17;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.dashot .clip img { width: 100%; height: auto; border: 0; border-radius: 0; display: block; }
figcaption { margin-top: .55rem; font: 400 .8125rem/1.55 var(--mono); color: var(--dimmer); }

/* the one big showcase video per section */
.showcase { margin: 0 auto 1.6rem; max-width: min(100%, 780px); }

.pair { display: grid; gap: 1.25rem; }
@media (min-width: 34rem) { .pair { grid-template-columns: 1fr 1fr; } }
/* full-width comparison pair, used for the JetBoost before/after */
.pair--big { margin-top: 0; gap: clamp(.9rem, 2vw, 1.4rem); }
.vlabel {
  margin: 0 0 .6rem; font: 700 1.0625rem/1.3 var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text);
  min-height: 2.6em;          /* equal label height, so both videos start level */
  display: flex; align-items: flex-end;
}
.pair--big figure { display: flex; flex-direction: column; margin: 0; }
.pair--big .ratio { width: 100%; }
.vlabel span { color: var(--amber); }

/* ---------------- lists ---------------- */

.bullets { margin: 1rem 0 0; padding: 0; list-style: none; }
.bullets li { position: relative; padding-left: 1.3rem; margin-bottom: .55rem; max-width: 74ch; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 6px; height: 6px; background: var(--amber-deep); border-radius: 1px;
}
.bullets ul { margin: .6rem 0 .85rem; padding: 0; list-style: none; }
.bullets ul li { padding-left: 1.35rem; margin-bottom: .4rem; color: var(--dim); }
.bullets ul li::before { background: none; border: 1px solid var(--dimmer); }

/* moveset list, tighter */
.moves { margin: 1rem 0 0; padding: 0; list-style: none; }
.moves li { padding: .45rem 0; border-top: 1px solid var(--line); max-width: 74ch; font-size: .9375rem; }
.moves b { color: var(--text); font-weight: 700; }

/* ---------------- reception stats ---------------- */

.stats { display: grid; gap: 1.5rem 2.5rem; text-align: center; }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stats div { padding: .5rem 0; }
.stats dt { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; }
.stats dd { margin: .35rem 0 0; font: 400 .9375rem/1.5 var(--mono); color: var(--dim); }

/* ---------------- roster table ---------------- */

.tscroll { margin-top: 1.5rem; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 36rem; }
thead th {
  text-align: left; padding: .65rem .9rem .65rem 0;
  font: 700 .75rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); border-bottom: 2px solid var(--amber-deep); white-space: nowrap;
}
tbody th, tbody td { text-align: left; padding: .6rem .9rem .6rem 0; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.45; }
tbody th { font-weight: 700; white-space: nowrap; }
tbody td { color: var(--dim); }
tbody td:last-child { font: 400 .875rem/1.5 var(--mono); color: var(--text); white-space: nowrap; }

/* ============================================================
   PROJECT CARDS (home + archive)
   ============================================================ */

.pcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.6rem; margin-bottom: 1.5rem; }
.pcard__titles { min-width: 0; }
.pcard__head h3 span { color: var(--dim); font-weight: 400; }
.pcard__role { font: 700 clamp(1rem, 1.5vw, 1.1875rem)/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); margin: .5rem 0 0; }
.pcard__cols { display: grid; gap: clamp(1.1rem, 2.5vw, 2rem); margin-top: 1.5rem; }
@media (min-width: 34rem) { .pcard__cols { grid-template-columns: auto minmax(0,1fr); } }
/* in the wide home-page card, give the highlights room to run two abreast */
@media (min-width: 78rem) {
  .duo--wide-text .pcard__cols { grid-template-columns: auto minmax(0,1fr) minmax(0,1fr); }
  .duo--wide-text .pcard__cols > .hl-span { grid-column: 2 / -1; }
}
.pcard__cols h4 { padding-bottom: .5rem; margin-bottom: .8rem; border-bottom: 1px solid var(--amber-deep); }
.info { margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.info li { margin-bottom: .5rem; color: var(--dim); white-space: nowrap; display: flex; align-items: center; gap: .55rem; }
.info svg { flex: none; color: var(--dim); }
.info b { color: var(--text); font: 500 .875rem/1 var(--mono); }
.reception { margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: .9375rem; }
.reception li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; }
.reception li::before { content: "\2605"; position: absolute; left: 0; top: 0; color: var(--amber); font-size: .8125rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* ============================================================
   STRIP + FOOTER
   ============================================================ */

.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 2rem; }
.strip p { margin: 0; max-width: 58ch; }
.strip > p, .strip > div { margin-right: auto; }
.strip h2 { margin-bottom: .35rem; }
.strip h2 + p { color: var(--dim); }

.foot { border-top: 1px solid var(--edge); background: #1e1c19; padding-block: clamp(2.5rem, 5vw, 3.75rem); margin-top: clamp(2rem, 4vw, 3rem); }
.foot h2 { margin-bottom: .9rem; }
.foot__meta { margin-top: 2rem; padding-top: 1.35rem; border-top: 1px solid var(--edge); font: 400 .8125rem/1.6 var(--mono); color: var(--dimmer); }

/* ---------------- about page ---------------- */

/* archive: two cards per row, and the two in a row must be identical in
   height, video position and logo position regardless of how long the title
   or the pitch is. min-heights on the head and the pitch reserve the space. */
.archivehead { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

/* full-width project cards, stacked down the page.
   Every card is the same width and the same height, with the video, the logo
   and the buttons landing in the same place on each one. */
.cardstack { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.cardstack > .panel {
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 2.8vw, 2.6rem);
}
.cardstack .duo { flex: 1; }

/* logo anchored top-right, space reserved for a two-line title */
.cardstack .pcard__head { align-items: flex-start; min-height: 4.6rem; margin-bottom: 1.1rem; }
.cardstack .enginemark { margin-top: .2rem; }

/* reserve three lines of pitch so the columns below always start level */
.cardstack .pitch { min-height: calc(1.62em * 3); }

/* buttons pin to the foot of the media column */
.cardstack .duo__media { display: flex; flex-direction: column; }
.cardstack .duo__media .actions { margin-top: auto; padding-top: 1rem; }

@media (min-width: 58rem) {
  /* a wider media column, so the video carries the card's height */
  .cardstack .duo--wide-text { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
  /* a floor, not a fixed height: the shorter cards sit at their natural size
     instead of padding out to match I.C.A.R.U.S. */
  .cardstack > .panel { min-height: 30rem; }
}

.cardgrid {
  --gap: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid; gap: var(--gap);
}
@media (min-width: 62rem) {
  .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* odd number of cards: centre the last one at a single column's width */
  .cardgrid > article:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - var(--gap)) / 2);
    margin-inline: auto;
  }
}

.cardgrid > .panel { display: flex; flex-direction: column; }

/* head: logo anchored top-right, space reserved for a two-line title */
.cardgrid .pcard__head {
  align-items: flex-start;
  min-height: 5rem;
  margin-bottom: .9rem;
}
.cardgrid .enginemark { margin-top: .15rem; }

.cardgrid figure { margin: 0 0 1rem; }

/* pitch: reserve three lines so the columns below always start level */
.cardgrid .pitch { min-height: calc(1.58em * 3); }

.cardgrid .pcard__cols { margin-top: 0; }
.cardgrid .actions { margin-top: auto; padding-top: 1rem; }

/* copy runs smaller here, since the cards are narrow */
.page-archive p, .page-archive li { font-size: .9375rem; line-height: 1.58; }
.page-archive p { margin-bottom: .75em; }
.page-archive h3 { font-size: clamp(1.125rem, 1.8vw, 1.375rem); }
.page-archive .pcard__role { font-size: clamp(.9375rem, 1.3vw, 1.0625rem); }
.page-archive .info li { font-size: .875rem; margin-bottom: .4rem; }
.page-archive .info b { font-size: .8125rem; }
.page-archive .pcard__cols h4 { font-size: .9375rem; padding-bottom: .42rem; margin-bottom: .65rem; }
.page-archive .bullets li { margin-bottom: .42rem; }
.page-archive .pcard__head { margin-bottom: 1.15rem; }
.page-archive .enginemark { width: clamp(104px, 9vw, 132px); }
.page-archive .pcard__head { gap: .5rem 1rem; }
.page-archive .pcard__cols { gap: .9rem 1.15rem; }

/* the project breakdown is the longest page on the site, so it runs
   a step smaller and tighter than the cards do */
.page-project h1 { font-size: clamp(1.875rem, 3.8vw, 2.625rem); }
.page-project h2 { font-size: clamp(1.3rem, 2.2vw, 1.6875rem); }
.page-project p, .page-project li { font-size: .9375rem; line-height: 1.6; }
.page-project p { margin-bottom: .8em; }
.page-project .lede { font-size: 1rem; line-height: 1.56; }
.page-project .metarow { font-size: .875rem; gap: .45rem 1.5rem; }
.page-project .sub { font-size: clamp(1rem, 1.4vw, 1.125rem); margin: 1.6rem 0 .75rem; }
.page-project .qlabel { font-size: .9375rem; margin: 1.15rem 0 .28rem; }
.page-project .bullets li { margin-bottom: .48rem; }
.page-project .moves li { font-size: .9rem; padding: .4rem 0; }
.page-project figcaption { font-size: .75rem; margin-top: .5rem; }
.page-project table { font-size: .8125rem; }
.page-project tbody th, .page-project tbody td { padding: .55rem .8rem .55rem 0; }
.page-project .panel > h2:not(:first-child) { margin-top: 2rem; }

/* the about page carries a lot of copy, so it runs a step smaller
   and a step tighter than the project pages */
.page-about p { font-size: 1.0625rem; line-height: 1.68; }
.page-about li { font-size: .9375rem; line-height: 1.6; }
.page-about p { margin-bottom: .95em; }
.page-about h2 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); }
.page-about .lede { font-size: 1.125rem; line-height: 1.6; }
.page-about .about { gap: clamp(1.5rem, 3vw, 2.5rem); }
.page-about .skills { gap: 1.5rem clamp(1.75rem, 4vw, 3rem); }
.page-about .skillgroup h3 { font-size: 1.0625rem; margin-bottom: .6rem; }
.page-about .skillgroup h3 svg { width: 17px; height: 17px; }
.page-about .skillgroup li { font-size: .875rem; margin-bottom: .26rem; }
.page-about .contact li { font-size: .9375rem; padding: .3rem 0; }
/* five groups fit two rows instead of three on a wide screen */
@media (min-width: 68rem) { .page-about .skills { grid-template-columns: repeat(3, 1fr); } }

/* contact rows under the portrait */
.contact { margin: 1.6rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--edge); padding-top: 1.1rem; }
.contact li { display: flex; align-items: center; gap: .65rem; padding: .35rem 0; font-size: .9375rem; }
.contact svg { flex: none; color: var(--amber); }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.contact .plain { color: var(--dim); }

/* skills, grouped under an icon heading */
.skills { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem); margin-top: 1.5rem; }
@media (min-width: 46rem) { .skills { grid-template-columns: 1fr 1fr; } }
.skillgroup h3 {
  display: flex; align-items: center; gap: .7rem;
  font-size: 1.1875rem; margin-bottom: .8rem;
}
.skillgroup h3 svg { flex: none; color: var(--amber); }
.skillgroup p { font-size: .875rem; color: var(--dim); margin: -.4rem 0 .7rem; }
.skillgroup ul { margin: 0; padding: 0; list-style: none; }
.skillgroup li {
  position: relative; padding-left: 1.1rem; margin-bottom: .4rem; font-size: .9375rem;
}
.skillgroup li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--amber-deep); border-radius: 1px;
}

.about { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 62rem) { .about { grid-template-columns: 20rem minmax(0,1fr); } }
.about__side img { width: 100%; height: auto; border: 1px solid var(--edge); border-radius: 3px; }
.stack h4 { color: var(--amber); font-size: .9375rem; margin: 1.6rem 0 .55rem; }
.stack ul { margin: 0; padding: 0; list-style: none; font: 400 .9375rem/1.85 var(--mono); color: var(--dim); }
.timeline { margin: 0; padding: 0; }
.timeline > div { padding: 1rem 0; border-top: 1px solid var(--line); display: grid; gap: .3rem; }
@media (min-width: 40rem) { .timeline > div { grid-template-columns: 8.5rem minmax(0,1fr); gap: 1.5rem; } }
.timeline dt { font: 700 .875rem/1.7 var(--mono); color: var(--amber); }
.timeline dd { margin: 0; }