/* Models (Flow E2E v13, 019-021). Loads after flow.css and reuses its
   header, menu and nav. Desktop is measured on 1600×1200 and scales with
   --hd; the card contents scale with the card width (container units), so
   the same card works in 4, 3 or 2 columns. */

html.md-page,
html.md-page body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

html.md-page body { background: var(--paper); }

/* Header band: the page scrolls under it. It hides on scroll down and
   comes back on scroll up. */
.md-head {
  height: calc(175 * var(--hd));
  background: var(--paper);
  pointer-events: auto;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.md-head.is-hidden { transform: translateY(-100%); }
html.md-filters-open .md-head {
  transform: none;
  pointer-events: none;
  background: linear-gradient(to right, var(--paper) calc(100% - 427 * var(--hd)), transparent 0);
}

/* Isotipo, and ".agency" on hover (every page except Home). */
.md-home {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(300 * var(--hd));
  height: calc(110 * var(--hd));
  color: var(--ink);
  text-decoration: none;
  pointer-events: auto;
}

.md-home-word {
  position: absolute;
  left: calc(33 * var(--hd));
  top: calc(17.25 * var(--hd));
  font-weight: 500;
  font-size: calc(65.6 * var(--hd));
  line-height: 1;
  white-space: nowrap;
  visibility: hidden;
}

@media (hover: hover) {
  .md-home:hover .md-logo,
  .md-home:focus-visible .md-logo { visibility: hidden; }
  .md-home:hover .md-home-word,
  .md-home:focus-visible .md-home-word { visibility: visible; }
}

/* Section name sits on the ".agency" line and ends on the grid edge. */
.md-title {
  position: absolute;
  right: calc(151.5 * var(--hd));
  top: calc(17.25 * var(--hd));
  margin: 0;
  font-weight: 500;
  font-size: calc(65.6 * var(--hd));
  line-height: 1;
  white-space: nowrap;
}

.md-filter-btn,
.md-f-x {
  position: absolute;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.md-filter-btn {
  right: calc(50 * var(--hd));
  top: calc(130 * var(--hd));
  width: calc(32 * var(--hd));
  height: calc(32 * var(--hd));
}

html.md-filters-open .md-filter-btn { visibility: hidden; }

.md-filter-btn::before,
.md-f-x::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.md-filter-btn span,
.md-f-x span,
.md-card button span,
.md-f-row .md-f-ic span { display: block; width: 100%; height: 100%; }
[data-icon] svg { display: block; width: 100%; height: 100%; }

/* Grid: 4 × 282 with 56 / 64 gaps from x 151 and y 209. */
.md-main {
  padding: calc(209 * var(--hd)) calc(153 * var(--hd)) calc(140 * var(--hd)) calc(151 * var(--hd));
}

.md-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  column-gap: calc(56 * var(--hd));
  row-gap: calc(64 * var(--hd));
  transition: opacity 0.2s linear;
}

html.md-filters-open .md-main { padding-right: calc(493 * var(--hd)); }
html.md-filters-open .md-grid { --cols: 3; }
/* Main menu open: the grid makes room, as with filters. */
html.fp-nav-open .md-main { padding-right: calc(var(--nav-pw) + 66 * var(--hd)); }
html.fp-nav-open .md-grid { --cols: 3; }
html.fp-nav-open .md-head { transform: none; }
html.fp-nav-open .md-filter-btn { visibility: hidden; }

.md-empty {
  margin: 0 0 calc(40 * var(--hd));
  font-weight: 500;
  font-size: calc(26 * var(--hd));
  line-height: 1.3;
}

.md-empty button {
  margin: 0 0 0 0.4em;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* Card. 282 × 427, 18px radius. 1cqw = 2.82px at the mockup size. */
.md-card {
  position: relative;
  cursor: pointer;
  container-type: inline-size;
  aspect-ratio: 282 / 427;
  overflow: hidden;
  border-radius: calc(18 * var(--hd));
  background: #bcb8af;
  color: #fff;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.md-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%; /* heads never cut */
  transition: opacity 0.3s linear;
}

.md-card .md-card-alt { opacity: 0; }

/* Private model (only its author or an admin gets it from the API): a
   lock in the top-right corner, always visible. On hover the lock in the
   actions row takes over. The actions lock shows on private models only. */
.md-private {
  position: absolute;
  z-index: 2;
  top: 6cqw;
  right: 6cqw;
  display: grid;
  place-items: center;
  width: max(10.6cqw, 26px);
  height: max(10.6cqw, 26px);
  border-radius: 50%;
  background: rgba(8, 8, 9, 0.55);
  color: #fff;
  pointer-events: none;
  transition: opacity 0.25s linear;
}
.md-private [data-icon] { display: block; width: max(6.4cqw, 16px); height: max(6.4cqw, 16px); }
.md-private svg { display: block; width: 100%; height: 100%; }
.md-card.is-open .md-private,
.md-card:focus-within .md-private { opacity: 0; }
@media (hover: hover) { .md-card:hover .md-private { opacity: 0; } }

.md-info {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 9, 0.74);
  opacity: 0;
  transition: opacity 0.25s linear;
  pointer-events: none;
}

.md-card.is-open .md-info,
.md-card:focus-within .md-info { opacity: 1; pointer-events: auto; }
.md-card.is-open .md-card-alt,
.md-card:focus-within .md-card-alt { opacity: 1; }

@media (hover: hover) {
  .md-card:hover .md-info { opacity: 1; pointer-events: auto; }
  .md-card:hover .md-card-alt { opacity: 1; }
}

.md-info p { margin: 0; font-weight: 500; }

.md-gender {
  position: absolute;
  left: 5.7cqw;
  top: 14.9cqw;
  width: 6.4cqw;
  height: 6.4cqw;
}

.md-name {
  position: absolute;
  left: 17.7cqw;
  top: 11.1cqw;
  width: 62cqw;
  font-size: 9.68cqw;
  line-height: 9.04cqw;
}

.md-facts {
  position: absolute;
  left: 17.7cqw;
  top: 32.3cqw;
  font-size: 4.26cqw;
  line-height: 7.27cqw;
}

.md-stats {
  position: absolute;
  left: 0;
  top: 81.4cqw;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
  font-size: 4.26cqw;
  line-height: 9.22cqw;
}

.md-stats li { position: relative; padding-left: 17.7cqw; }

.md-stats [data-icon] {
  position: absolute;
  left: 6cqw;
  top: 50%;
  width: 6.4cqw;
  height: 6.4cqw;
  transform: translateY(-50%);
}

.md-actions {
  position: absolute;
  right: 8.5cqw;
  bottom: 10.1cqw;
  display: flex;
  gap: 3.5cqw;
}

.md-actions button {
  display: block;
  width: 10.6cqw;
  height: 10.6cqw;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.md-fav.is-on svg path { fill: currentColor; }

/* Filters panel: x 1173 to the edge, list right-aligned at x 1445,
   51.2px on an 80px line, icons centred on x 1524. */
.md-filters {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: calc(427 * var(--hd));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  color: var(--ink);
}

.md-filters[hidden] { display: none !important; }

/* The panel slides in from the right and folds away before the menu
   opens. */
.md-filters {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.md-filters.is-in { transform: none; }

.md-f-head {
  position: relative;
  height: calc(191.6 * var(--hd));
}

.md-f-title {
  position: absolute;
  right: calc(152 * var(--hd));
  top: calc(106.3 * var(--hd));
  margin: 0;
  color: #c9c9c9;
  font-weight: 500;
  font-size: calc(65.6 * var(--hd));
  line-height: 1;
}

.md-f-x {
  right: calc(55.5 * var(--hd));
  top: calc(130.5 * var(--hd));
  width: calc(34 * var(--hd));
  height: calc(34 * var(--hd));
}

.md-f-list { padding-bottom: calc(80 * var(--hd)); }

.md-f-group { position: relative; }

.md-f-group.is-open {
  margin-right: calc(30 * var(--hd));
  outline: 1px solid #1f1f1f;
  outline-offset: 0;
}

.md-f-row {
  position: relative;
  display: block;
  width: 100%;
  height: calc(80 * var(--hd));
  margin: 0;
  padding: 0 calc(154.5 * var(--hd)) 0 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-weight: 500;
  font-size: calc(51.2 * var(--hd));
  line-height: calc(80 * var(--hd));
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
}

.md-f-group.is-open .md-f-row { padding-right: calc(124.5 * var(--hd)); }
.md-f-group.is-open > .md-f-row { color: #cacaca; }

.md-f-ic {
  position: absolute;
  right: calc(61 * var(--hd));
  top: 50%;
  width: calc(30 * var(--hd));
  height: calc(30 * var(--hd));
  transform: translateY(-50%);
}

.md-f-group.is-open .md-f-ic { right: calc(31 * var(--hd)); }

/* A group with a choice shows a small dot left of its arrow. */
.md-f-group.has-value > .md-f-row::after {
  content: "";
  position: absolute;
  right: calc(98 * var(--hd));
  top: 50%;
  width: calc(8 * var(--hd));
  height: calc(8 * var(--hd));
  border-radius: 50%;
  background: var(--ink);
  transform: translateY(-50%);
}

.md-f-group.is-open.has-value > .md-f-row::after { display: none; }

.md-radio {
  position: absolute;
  right: calc(37.5 * var(--hd));
  top: 50%;
  width: calc(17 * var(--hd));
  height: calc(17 * var(--hd));
  border: max(1.5px, calc(1.8 * var(--hd))) solid var(--ink);
  border-radius: 50%;
  transform: translateY(-50%);
}

.md-opt[aria-checked="true"] .md-radio { background: var(--ink); box-shadow: inset 0 0 0 calc(3 * var(--hd)) var(--paper); }

.md-toggle[aria-pressed="true"] .md-f-ic svg path { fill: currentColor; }

.md-f-done { display: none; }

/* Tablet and phone. The phone scale stops growing at 1.35 so a portrait
   tablet does not get a giant header. */
@media (max-width: 800px) {
  html.md-page { --m: min(calc(100vw / 390), 1.35px); }

  .md-head { height: calc(150 * var(--m)); }

  .md-home { width: calc(120 * var(--m)); height: calc(100 * var(--m)); }

  .md-title {
    right: calc(110.7 * var(--m));
    top: calc(35.5 * var(--m));
    font-size: calc(49.2 * var(--m));
  }

  .md-filter-btn {
    right: calc(31 * var(--m));
    top: calc(98 * var(--m));
    width: calc(34 * var(--m));
    height: calc(34 * var(--m));
  }

  .md-main { padding: calc(158 * var(--m)) calc(28 * var(--m)) calc(60 * var(--m)); }

  .md-grid {
    --cols: 2;
    column-gap: calc(12 * var(--m));
    row-gap: calc(16 * var(--m));
  }

  html.md-filters-open .md-main { padding-right: calc(28 * var(--m)); }
  html.md-filters-open .md-grid { --cols: 2; }
  html.md-filters-open { overflow: hidden; }
  html.fp-nav-open .md-main { padding-right: calc(28 * var(--m)); }
  html.fp-nav-open .md-grid { --cols: var(--cols-m, 2); }
  html.fp-nav-open { overflow: hidden; }

  .md-card { border-radius: calc(14 * var(--m)); }

  .md-actions button { width: 13cqw; height: 13cqw; }

  .md-empty { font-size: calc(18 * var(--m)); margin-bottom: calc(20 * var(--m)); }

  /* Filters full screen, with a sticky "show" button. */
  .md-filters { left: 0; width: auto; z-index: 30; }

  .md-f-head { height: calc(120 * var(--m)); }

  .md-f-title {
    right: calc(110.7 * var(--m));
    top: calc(35.5 * var(--m));
    font-size: calc(49.2 * var(--m));
  }

  .md-f-x {
    right: calc(34 * var(--m));
    top: calc(46 * var(--m));
    width: calc(30 * var(--m));
    height: calc(30 * var(--m));
  }

  .md-f-row {
    height: calc(56 * var(--m));
    padding-right: calc(110.7 * var(--m));
    font-size: calc(34 * var(--m));
    line-height: calc(56 * var(--m));
  }

  .md-f-group.is-open { margin: 0 calc(16 * var(--m)); }
  .md-f-group.is-open .md-f-row { padding-right: calc(94.7 * var(--m)); }

  .md-f-ic {
    right: calc(34 * var(--m));
    width: calc(26 * var(--m));
    height: calc(26 * var(--m));
  }

  .md-f-group.is-open .md-f-ic { right: calc(18 * var(--m)); }
  .md-f-group.has-value > .md-f-row::after { right: calc(72 * var(--m)); width: 7px; height: 7px; }

  .md-radio { right: calc(23 * var(--m)); width: 16px; height: 16px; border-width: 1.5px; }

  .md-f-list { padding-bottom: calc(110 * var(--m)); }

  .md-f-done {
    position: sticky;
    bottom: 0;
    display: block;
    padding: calc(14 * var(--m)) calc(28 * var(--m)) calc(24 * var(--m));
    background: linear-gradient(rgba(255, 255, 255, 0), var(--paper) 30%);
  }

  .md-f-done button {
    display: block;
    width: 100%;
    height: calc(56 * var(--m));
    margin: 0;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-family: inherit;
    font-weight: 500;
    font-size: calc(20 * var(--m));
    cursor: pointer;
  }
}

@media (max-width: 800px) and (min-width: 561px) {
  .md-grid { --cols: 3; --cols-m: 3; }
  html.md-filters-open .md-grid { --cols: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .md-filters,
  .md-head,
  .md-card img,
  .md-info { transition: none; }
}

/* Drafts (Content): private Create Model candidates, grouped by session.
   Same cards as Models; captions under the card, 1px rules, B/W. */
html.md-drafts-mode .md-grid { display: block; }
html.md-drafts-mode .md-filter-btn,
.md-filter-btn[hidden] { display: none !important; }
html.md-detail-open { overflow: hidden; }

.dr-lead { margin: 0 0 calc(46 * var(--hd)); font-weight: 500; font-size: calc(26 * var(--hd)); line-height: 1.3; color: #707070; letter-spacing: -0.05em; }
.dr-group + .dr-group { margin-top: calc(72 * var(--hd)); }
.dr-head {
  display: flex; align-items: baseline; gap: calc(18 * var(--hd));
  padding-bottom: calc(16 * var(--hd)); margin-bottom: calc(28 * var(--hd));
  border-bottom: 1px solid #d5d5d5; letter-spacing: -0.05em;
}
.dr-head h2 { margin: 0; font-weight: 500; font-size: calc(36 * var(--hd)); line-height: 1; }
.dr-head .dr-link { margin-left: auto; }
.dr-mute { margin: 0; color: #707070; font-weight: 500; font-size: calc(17 * var(--hd)); letter-spacing: -0.05em; }

.dr-cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  column-gap: calc(56 * var(--hd));
  row-gap: calc(48 * var(--hd));
}
html.fp-nav-open .dr-cards { --cols: 3; }
.dr-item { margin: 0; min-width: 0; }
.dr-card { display: block; width: 100%; padding: 0; border: 0; font: inherit; text-align: left; }
.dr-card:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.dr-card img { transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1); }
@media (hover: hover) { .dr-card:hover img { transform: scale(1.03); } }
html.md-drafts-mode .dr-card .md-private { opacity: 1; }
.dr-letter {
  position: absolute; left: 7cqw; bottom: 5cqw; z-index: 2;
  color: #fff; font-weight: 500; font-size: 16cqw; line-height: 1; letter-spacing: -0.05em;
}
.dr-item figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: calc(14 * var(--hd)); font-weight: 500; font-size: calc(18 * var(--hd)); letter-spacing: -0.05em;
}
.dr-item figcaption .dr-mute { font-size: inherit; }
.dr-missing { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; background: #f2f2f2; color: #707070; font-size: 13px; text-align: center; }
.dr-ghost { display: block; aspect-ratio: 282 / 427; border-radius: calc(18 * var(--hd)); background: #f2f2f2; }

.dr-link {
  color: #000; font-weight: 500; font-size: calc(17 * var(--hd)); letter-spacing: -0.05em;
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;
}
.dr-empty { display: flex; flex-direction: column; align-items: flex-start; gap: calc(18 * var(--hd)); max-width: calc(760 * var(--hd)); letter-spacing: -0.05em; }
.dr-empty button { margin: 0; }
.dr-empty .dr-link { font-size: inherit; }

/* Detail: full screen, image left, facts right, ← → between drafts. */
.dr-detail { position: fixed; z-index: 100; inset: 0; display: grid; letter-spacing: -0.05em; }
.dr-scrim { position: absolute; inset: 0; border: 0; background: var(--paper, #fff); cursor: default; }
.dr-sheet { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) calc(440 * var(--hd)); height: 100dvh; }
.dr-media { position: relative; min-width: 0; background: #f2f2f2; }
.dr-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dr-nav {
  position: absolute; top: 50%; width: 48px; height: 48px; padding: 12px; margin-top: -24px;
  border: 1px solid #d5d5d5; border-radius: 50%; background: #fff; color: #000; cursor: pointer;
}
.dr-nav.is-prev { left: calc(28 * var(--hd)); }
.dr-nav.is-next { right: calc(28 * var(--hd)); }
.dr-nav [data-icon], .dr-x [data-icon] { display: block; width: 100%; height: 100%; }
.dr-info { position: relative; display: flex; flex-direction: column; padding: calc(150 * var(--hd)) calc(56 * var(--hd)) calc(56 * var(--hd)); border-left: 1px solid #d5d5d5; background: #fff; overflow-y: auto; }
.dr-x { position: absolute; top: calc(40 * var(--hd)); right: calc(48 * var(--hd)); width: 44px; height: 44px; padding: 11px; border: 0; background: none; color: #000; cursor: pointer; }
.dr-name { margin: calc(10 * var(--hd)) 0 calc(40 * var(--hd)); font-weight: 500; font-size: calc(56 * var(--hd)); line-height: 0.95; }
.dr-rows { margin: 0; border-top: 1px solid #d5d5d5; }
.dr-rows div { display: flex; justify-content: space-between; padding: calc(15 * var(--hd)) 0; border-bottom: 1px solid #d5d5d5; font-weight: 500; font-size: calc(17 * var(--hd)); }
.dr-rows dt { color: #707070; }
.dr-rows dd { margin: 0; }
.dr-acts { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--hd)); margin-top: calc(40 * var(--hd)); }
.dr-btn {
  display: inline-flex; align-items: center; gap: 0.6em; height: 48px; padding: 0 22px;
  border: 1px solid #000; border-radius: 0; background: #000; color: #fff;
  font: inherit; font-weight: 500; font-size: calc(17 * var(--hd)); letter-spacing: -0.05em; cursor: pointer;
}
.dr-btn.is-soon { opacity: 0.45; cursor: default; }
.dr-btn em { font-style: normal; font-size: 0.8em; opacity: 0.8; }
.dr-count { margin-top: auto; padding-top: calc(28 * var(--hd)); }
.dr-x:focus-visible, .dr-nav:focus-visible, .dr-link:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

@media (max-width: 800px) {
  .dr-lead { font-size: calc(17 * var(--m)); margin-bottom: calc(26 * var(--m)); }
  .dr-group + .dr-group { margin-top: calc(44 * var(--m)); }
  .dr-head { flex-wrap: wrap; gap: calc(6 * var(--m)) calc(12 * var(--m)); padding-bottom: calc(12 * var(--m)); margin-bottom: calc(16 * var(--m)); }
  .dr-head h2 { font-size: calc(26 * var(--m)); }
  .dr-mute, .dr-link { font-size: calc(14 * var(--m)); }
  .dr-cards, html.fp-nav-open .dr-cards { --cols: 2; column-gap: calc(12 * var(--m)); row-gap: calc(22 * var(--m)); }
  .dr-item figcaption { margin-top: calc(8 * var(--m)); font-size: calc(14 * var(--m)); }
  .dr-ghost { border-radius: calc(14 * var(--m)); }
  .dr-empty { gap: calc(14 * var(--m)); }
  .dr-sheet { grid-template-columns: 1fr; grid-template-rows: 62dvh auto; height: 100dvh; overflow-y: auto; }
  .dr-info { padding: calc(24 * var(--m)) calc(24 * var(--m)) calc(32 * var(--m) + env(safe-area-inset-bottom)); border-left: 0; overflow: visible; }
  .dr-x { position: fixed; top: calc(12 * var(--m)); right: calc(12 * var(--m)); z-index: 3; background: #fff; border-radius: 50%; }
  .dr-nav { width: 40px; height: 40px; padding: 10px; margin-top: -20px; }
  .dr-nav.is-prev { left: calc(12 * var(--m)); }
  .dr-nav.is-next { right: calc(12 * var(--m)); }
  .dr-name { font-size: calc(36 * var(--m)); margin: calc(6 * var(--m)) 0 calc(22 * var(--m)); }
  .dr-rows div { padding: calc(12 * var(--m)) 0; font-size: calc(14 * var(--m)); }
  .dr-acts { margin-top: calc(24 * var(--m)); gap: calc(14 * var(--m)); }
  .dr-btn { width: 100%; justify-content: center; font-size: calc(15 * var(--m)); }
  .dr-count { padding-top: calc(18 * var(--m)); }
}
@media (prefers-reduced-motion: reduce) { .dr-card img { transition: none; } }