/**
 * GENERATED by tools/build-template-compose.mjs — do not edit by hand.
 * Table source: content/template-compose.mjs.
 *
 * Three nested grids, all spent from variables the table sets:
 *   card   portrait · body · links
 *   body   id · title · bio · meta
 *   links  links · socials · presence
 *
 * A template row only sets variables; the rules below spend them, so a row
 * cannot half-apply a skeleton.
 */

.profile-card .profile-card__layout {
  display: var(--tc-cdisplay, grid);
  grid-template-columns: var(--tc-cols, minmax(0, 1fr));
  grid-template-rows: var(--tc-rows, none);
  grid-template-areas: var(--tc-areas, "portrait" "body" "links");
  align-items: var(--tc-align, start);
  /* Regions always fill their column. An earlier contract centred them with
     justify-items: center, which shrink-to-fits each item — and the body is an
     inline-size query container, so its max-content size is zero by design and
     the whole identity column collapsed to 0px wide. Centring is a text
     decision (text-align) and a portrait decision (justify-self), never a
     grid decision. */
  justify-items: stretch;
  column-gap: var(--tc-colgap, 0);
  row-gap: var(--tc-rowgap, 0);
  text-align: var(--tc-text, inherit);
}
/* The portrait is always in flow. A template that pinned it absolutely put the
   disc outside the card as soon as the layout became a grid, because an
   absolutely positioned grid child resolves its insets against the grid area
   rather than the card. Position is a composition decision now, not a pin.

   Relative stays available because it is the only way a portrait can carry
   its own ornament: a ring drawn with ::before resolves its top offset against the
   nearest positioned ancestor, so a static portrait handed every ring to the
   card and mandala painted its rings 600px down the page. Relative keeps the
   box in flow and still anchors the decoration to it. */
.profile-card .profile-card__portrait {
  grid-area: portrait;
  position: var(--tc-portrait-pos, relative);
  align-self: var(--tc-portrait-align, start);
  justify-self: var(--tc-portrait-justify, stretch);
}
.profile-card .profile-card__body { grid-area: body; }
.profile-card .profile-card__links { grid-area: links; }

/* --- the identity column ------------------------------------------------
   The identity is a block by default and the four parts keep the vertical
   margins they were shipped with — that stack is the rhythm of the shipped
   seven, and replacing it with a grid gap silently rewrote every one of them.

   A row that asks for bdisplay "grid" gets a plate instead: then the four parts
   are one grid, the gap is the only rhythm, and order plus bplace can put a
   dateline beside the portrait or run the name across both columns.
   Order is a number per region, never DOM order, so the markup stays identical
   for every template and only the table decides the reading. */
.profile-card .profile-card__body {
  display: var(--tc-bdisplay, block);
  grid-template-columns: var(--tc-bcols, minmax(0, 1fr));
  grid-auto-flow: row dense;
  /* Same reason as the action column: the body is a block unless a row asks for
     a plate, and a block must not be aligned by grid properties it never opted
     into. */
  align-content: var(--tc-balign, normal);
  align-items: var(--tc-balign, normal);
  justify-items: var(--tc-bjustify, normal);
  column-gap: var(--tc-bcolgap, 0);
  /* Zero by default: the identity keeps the vertical margins it was shipped
     with, which is the rhythm of every one of the seven. A row that turns the
     body into a plate sets its own gap. */
  row-gap: var(--tc-browgap, 0);
  min-width: 0;
}
.profile-card .profile-card__id { order: var(--tc-b-id, 1); grid-column: var(--tc-bp-id, auto); }
.profile-card .profile-title { order: var(--tc-b-title, 2); grid-column: var(--tc-bp-title, auto); }
.profile-card .profile-bio { order: var(--tc-b-bio, 3); grid-column: var(--tc-bp-bio, auto); }
.profile-card .profile-meta { order: var(--tc-b-meta, 4); grid-column: var(--tc-bp-meta, auto); }

/* A body row that is empty must not leave a gap. The hidden attribute already
   collapses the element, but a template that sets its own row gap would still
   pay for the missing row, so the row itself is removed from the flow. */
.profile-card .profile-title[hidden],
.profile-card .profile-bio[hidden],
.profile-card .profile-meta[hidden] { display: none; }

/* --- the action column ---------------------------------------------------
   The action column is a *block* by default, because the shipped seven stack
   its three parts with their own top margins and those margins collapse
   through the column exactly as they were drawn. A row that needs the social
   row beside the stack instead of under it asks for wdisplay grid and then
   places the parts with wplace. */
.profile-card .profile-card__links {
  display: var(--tc-wdisplay, block);
  grid-template-columns: var(--tc-wcols, minmax(0, 1fr));
  grid-template-areas: var(--tc-wareas, none);
  /* Normal, not start. These three were written for a grid, but the column is a
     block by default, and Chrome honours align-content on a block container —
     so a plain stack was being offset by its own alignment, which is how
     poster's link block ended up 44px below the identity instead of flush. A
     block with normal aligns nothing and stacks as written, and a grid row that
     wants the tighter alignment sets walign itself. */
  align-content: var(--tc-walign, normal);
  align-items: var(--tc-walign, normal);
  justify-items: var(--tc-wjustify, normal);
  column-gap: var(--tc-wcolgap, 0);
  row-gap: var(--tc-wrowgap, 0);
  min-width: 0;
  width: 100%;
}
.profile-card .profile-card__links > .profile-links { order: var(--tc-w-links, 1); grid-column: var(--tc-wp-links, auto); }
.profile-card .profile-card__links > .profile-socials { order: var(--tc-w-socials, 2); grid-column: var(--tc-wp-socials, auto); }
.profile-card .profile-card__links > .pg-presence { order: var(--tc-w-presence, 3); grid-column: var(--tc-wp-presence, auto); }

.profile-card .profile-card__links > .profile-links {
  display: grid;
  grid-template-columns: var(--tc-lcols, minmax(0, 1fr));
  gap: var(--tc-lgap, 9px);
  margin-top: var(--tc-lmargin, clamp(20px, 3.5vw, 30px));
  width: 100%;
}
.profile-card .profile-card__links > .profile-links[hidden] { display: none; }

/* The social row and the live presence keep their own top margins: in a block
   column they collapse with the stack above them, which is the spacing every
   one of the seven was drawn with. Resetting them here is what made the action
   column collapse by 30px against its own skin.

/* Widgets always take the full measure, on their own row after the
   composition. They are tile cards, and a tile in a narrow side rail folds to
   one character per line. Auto-placement puts them after the last named area,
   so every row scheme above works without accounting for them. */
.profile-card .profile-card__widgets {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: var(--tc-widget-gap, clamp(18px, 3vw, 26px));
}


.profile-card .profile-card__body { container-type: inline-size; }
.profile-card .profile-name {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  font-size: min(
    var(--tc-name-size, var(--name-font-size, clamp(2rem, 4.6vw, 2.85rem))),
    12.4cqi
  );
}
@container (max-inline-size: 300px) {
  .profile-card .profile-name { letter-spacing: -0.01em; }
}


/* glass */
.profile-card.tpl-glass .profile-card__layout {
  --tc-cols: minmax(0, 1fr);
  --tc-areas: "portrait" "body" "links";
  --tc-text: center;
  --tc-lcols: minmax(0, 1fr);
  --tc-lmargin: clamp(22px, 4vw, 32px);
  --tc-b-id: 1;
  --tc-b-title: 2;
  --tc-b-bio: 3;
  --tc-b-meta: 4;
  --tc-w-links: 1;
  --tc-w-socials: 2;
  --tc-w-presence: 3;
}

/* editorial */
.profile-card.tpl-editorial .profile-card__layout {
  --tc-cols: minmax(0, 1fr);
  --tc-areas: "portrait" "body" "links";
  --tc-portrait-justify: center;
  --tc-text: center;
  --tc-lcols: minmax(0, 1fr);
  --tc-lmargin: clamp(26px, 5vw, 42px);
  --tc-b-id: 1;
  --tc-b-title: 2;
  --tc-b-bio: 3;
  --tc-b-meta: 4;
  --tc-w-links: 1;
  --tc-w-socials: 2;
  --tc-w-presence: 3;
}

/* split */
.profile-card.tpl-split .profile-card__layout {
  --tc-cols: 196px minmax(0, 1fr);
  --tc-areas: "portrait body" "links links";
  --tc-colgap: clamp(24px, 4vw, 40px);
  --tc-align: center;
  --tc-text: left;
  --tc-lcols: repeat(2, minmax(0, 1fr));
  --tc-lmargin: clamp(24px, 4vw, 34px);
  --tc-b-id: 1;
  --tc-b-title: 2;
  --tc-b-bio: 3;
  --tc-b-meta: 4;
  --tc-w-links: 1;
  --tc-w-socials: 2;
  --tc-w-presence: 3;
}

/* poster */
.profile-card.tpl-poster .profile-card__layout {
  --tc-cdisplay: block;
  --tc-cols: minmax(0, 1fr);
  --tc-areas: "portrait" "body" "links";
  --tc-text: left;
  --tc-lcols: minmax(0, 1fr);
  --tc-lmargin: clamp(28px, 5vw, 44px);
  --tc-b-id: 1;
  --tc-b-title: 2;
  --tc-b-bio: 3;
  --tc-b-meta: 4;
  --tc-w-links: 1;
  --tc-w-socials: 2;
  --tc-w-presence: 3;
}

/* terminal */
.profile-card.tpl-terminal .profile-card__layout {
  --tc-cdisplay: block;
  --tc-cols: minmax(0, 1fr);
  --tc-areas: "portrait" "body" "links";
  --tc-text: left;
  --tc-lcols: minmax(0, 1fr);
  --tc-lgap: 6px;
  --tc-lmargin: 24px;
  --tc-b-id: 1;
  --tc-b-title: 2;
  --tc-b-bio: 3;
  --tc-b-meta: 4;
  --tc-w-links: 1;
  --tc-w-socials: 2;
  --tc-w-presence: 3;
}

/* bento */
.profile-card.tpl-bento .profile-card__layout {
  --tc-cols: repeat(12, minmax(0, 1fr));
  --tc-areas: "portrait portrait portrait portrait body body body body body body body body" "links links links links links links links links links links links links";
  --tc-colgap: 14px;
  --tc-rowgap: 14px;
  --tc-align: start;
  --tc-text: left;
  --tc-lcols: repeat(2, minmax(0, 1fr));
  --tc-lgap: 10px;
  --tc-lmargin: 0px;
  --tc-b-id: 1;
  --tc-b-title: 2;
  --tc-b-bio: 3;
  --tc-b-meta: 4;
  --tc-w-links: 1;
  --tc-w-socials: 2;
  --tc-w-presence: 3;
}

/* solid */
.profile-card.tpl-solid .profile-card__layout {
  --tc-cols: minmax(0, 1fr);
  --tc-areas: "portrait" "body" "links";
  --tc-text: center;
  --tc-lcols: minmax(0, 1fr);
  --tc-lmargin: clamp(22px, 4vw, 32px);
  --tc-b-id: 1;
  --tc-b-title: 2;
  --tc-b-bio: 3;
  --tc-b-meta: 4;
  --tc-w-links: 1;
  --tc-w-socials: 2;
  --tc-w-presence: 3;
}

.profile-card { container-type: inline-size; container-name: card; }

@container card (max-inline-size: 470px) {
  .profile-card .profile-card__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "portrait" "body" "links";
    column-gap: 0;
    /* No gap: the identity's own margins are the rhythm of a one-column card,
       and adding a gap on top of them is what made every folded card taller
       than the same card drawn as a stack. */
    row-gap: var(--tc-fold-gap, 0);
    align-items: start;
    justify-items: stretch;
  }
  .profile-card .profile-card__body {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    justify-items: stretch;
  }
  .profile-card .profile-card__body > .profile-card__id,
  .profile-card .profile-card__body > .profile-title,
  .profile-card .profile-card__body > .profile-bio,
  .profile-card .profile-card__body > .profile-meta { grid-column: auto; }
  .profile-card .profile-card__links {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }
  .profile-card .profile-card__links > * { grid-column: auto; }
  .profile-card .profile-card__links > .profile-links { grid-template-columns: minmax(0, 1fr); }
  /* One narrow column has no room for a scaled or fluid disc: the skin's own
     fold rules (in catalog-templates.css) give the member's size back. */
}

/* --- the link staircase (generated) -------------------------------------
   One ladder per template, for the count that template declares. Emitted after
   the collapse so a card that has already folded to one column keeps that
   column: both rules match at a narrow width and the later one must be the
   simpler shape. */