/* =========================================================================
   popupfronts.com — shared chassis (PUF-1555)
   =========================================================================
   Lifted verbatim from index.html's inline <style> as it stood at PUF-1369,
   so the nine persona pages inherit the page Gabriel already approved rather
   than an approximation of it. The measured decisions in the comments below
   are the originals; they were not re-derived and must not be re-guessed.

   THE GAVEL IS BACK, 20 Aug 2026, and its job has changed. Cut on 19 Aug
   pending a decision about where it belonged, it now sits at the top of EVERY
   page as the way home: "an easy to click thing that takes you home". The
   stage rules below are the originals, restored from the commit before
   PUF-1555, with two changes — the cursor is a pointer because it is a link
   now, and the tap-to-advance handler is gone for the same reason.

   ADDED IN THIS PASS: gate tiles as links, the 3x3 grid, the persona-page
   article, the multiselect, the hatch lines, the persona switcher, the bio
   line. Each is marked ADDED so a reader can tell the inherited system from
   the new work.
   ========================================================================= */

:root{
  --ground:#FFFFFF;
  --ink:#000000;
  --muted:#6b6b6b;
  --hairline:#e6e6e6;
  --maxw:1080px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--ground);color:var(--ink);}
body{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh;
  display:flex;flex-direction:column;
}

/* ---------- THE GAVEL (restored 20 Aug 2026) ----------
   Movement-driven: mouse movement on a fine pointer, gyroscope tilt where it
   is available without a permission prompt. Preserved verbatim from live
   popupfronts.com except where marked. It is wrapped in a link home, so the
   cursor is a pointer rather than the original crosshair, and the canvas keeps
   pointer-events:none so the anchor takes every click. */
.gavel-home{display:block;text-decoration:none;}
.gavel-stage{
  width:100%;max-width:760px;
  margin:0 auto 8px;
  cursor:pointer;user-select:none;-webkit-user-select:none;
  touch-action:pan-y;
  min-height:120px;
}
.gavel-stage img,
.gavel-stage canvas{
  width:100%;height:auto;display:block;
  -webkit-user-drag:none;user-drag:none;pointer-events:none;
}
.gavel-fallback{
  display:none;align-items:center;justify-content:center;
  min-height:240px;border:1px dashed var(--hairline);
  color:var(--muted);font-size:13px;letter-spacing:0.04em;
}

/* ---------- FORMAT TICKER (PUF-1369, option A3) ----------
   Sticky tape naming the formats producers make, so a visitor sees their own
   work on the page immediately. Type is the Notify Me button's treatment
   (700 / 13px / 0.08em / uppercase, below) because it is the site's only
   other ALL-CAPS tracked text at UI scale; the 14px vertical padding is that
   button's too, which makes the band exactly 41px.

   Colours are the IBM VGA high-intensity palette filtered to entries that
   clear WCAG 4.5:1 against #000000. Measured, not chosen by eye:
     yellow  #FFFF55  19.69:1
     cyan    #55FFFF  17.13:1
     green   #55FF55  15.82:1
     magenta #FF55FF   8.00:1
     red     #FF5555   6.68:1
     blue    #5555FF   4.13:1  <- FAILS, and is the only VGA bright colour
                                  excluded. Do not add it back without
                                  re-running the numbers.
   Five colours over ten formats, so each is used twice and no two neighbours
   repeat across the loop seam. */
.ticker{
  position:sticky;top:0;z-index:50;
  flex-shrink:0;
  width:100%;overflow:hidden;
  background:var(--ink);
  padding:14px 0;
  user-select:none;-webkit-user-select:none;
}
.ticker-track{display:flex;width:max-content;}
/* Animation is added by JS only after the run has been cloned. Without JS the
   tape renders as one static, legible run rather than scrolling into a gap. */
.ticker-track.is-looping{
  animation:ticker-scroll 44s linear infinite;
}
.ticker-run{
  display:flex;flex:0 0 auto;
  white-space:nowrap;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1;
}
/* No dividers: the 36px gap is the separator, matching the space the
   centre dots previously occupied (18px either side). */
.ticker-run span{padding-right:36px;}
.ticker-run .c1{color:#55FFFF;}  /* cyan    17.13:1 */
.ticker-run .c2{color:#FF55FF;}  /* magenta  8.00:1 */
.ticker-run .c3{color:#FFFF55;}  /* yellow  19.69:1 */
.ticker-run .c4{color:#55FF55;}  /* green   15.82:1 */
.ticker-run .c5{color:#FF5555;}  /* red      6.68:1 */

@keyframes ticker-scroll{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track.is-looping{animation:none;}
}

/* ---------- MAIN ---------- */
main{
  flex:1 0 auto;
  max-width:var(--maxw);width:100%;margin:0 auto;
  padding:56px 32px 64px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

.headline{
  font-weight:800;
  font-size:clamp(28px,5vw,52px);
  line-height:1.04;letter-spacing:-0.01em;
  margin-top:28px;
}
.subline{
  font-weight:400;
  font-size:clamp(15px,2vw,19px);
  color:var(--ink);
  margin-top:16px;
  max-width:540px;
}

/* ---------- HOME PAGE (ADDED 22 Aug 2026) ----------
   The gate became a page. The nine tiles are gone deliberately — the persona
   pages live on as unlisted permalinks for direct outreach — and the home page
   now argues one case to creators already working social-first, carrying the
   application form itself. */

/* The line above the headline, and the one above the question. .subline exists
   but is defined as FOLLOWING a headline; this is that treatment placed before
   one, which is why it is its own rule rather than a reuse. */
.preline{
  font-weight:400;
  font-size:clamp(15px,2vw,19px);
  color:var(--ink);
  max-width:640px;margin:0 auto;
}
/* The capture pages' closing line (PUF-1555 chassis, added 31 Aug 2026). Same
   type as .preline above, which is why it carries that class — this adds only
   the gap. The gate's preline needs none: a .headline-tight follows it there,
   whereas here the line follows a .beat paragraph block. */
.closing-line{margin-top:56px;}
/* Gabriel, 31 Aug 2026 — the /agents body is centred. `.beat p` is left-aligned
   everywhere else and that is unchanged: on a page of running prose the left
   edge is what makes it readable. /agents is not running prose — it is six
   one-line beats closing on a centred statement, and a left-aligned block under
   a centred headline read as a mistake rather than a composition. Scoped to the
   one page by `data-page` so the other twelve keep the shared behaviour. */
[data-page="agents"] .beat p{text-align:center;}
.headline-tight{margin-top:12px;}

.ask{width:100%;max-width:640px;margin-top:56px;text-align:center;}
.ask h2{
  font-weight:800;
  font-size:clamp(22px,3.6vw,32px);
  line-height:1.1;letter-spacing:-0.01em;
  margin-top:12px;
}

/* THE THREE-WAY ECONOMY. Shows, audiences and brands at the corners; the
   channels they meet through in the middle. Width matches .beat's reading
   column; the triangle itself is 322px so it sits inside that measure rather
   than filling it.

   THE STROKE. vector-effect:non-scaling-stroke renders exactly 1 CSS pixel at
   any size — the same hairline as every border here. Without it a stroke-width
   of 1 inside a 100-unit viewBox drawn at 322px renders about 3px, which read
   as a heavy outline rather than a diagram. */
.economy{
  width:100%;max-width:640px;
  margin:48px auto 0;
  /* The corner labels are absolutely positioned and hang below the box without
     adding height. This puts them back inside it, so the gap to whatever
     follows is the gap it claims to be. */
  padding-bottom:32px;
}
.tri{position:relative;width:100%;max-width:322px;aspect-ratio:1 / 0.866;margin:0 auto;}
.tri svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.tri-line{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;}
.tri-label{
  position:absolute;
  font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--ink);white-space:nowrap;
}
.tri-label.top{left:50%;top:0;transform:translate(-50%,-140%);}
.tri-label.left{left:0;bottom:0;transform:translate(-6%,150%);}
.tri-label.right{right:0;bottom:0;transform:translate(6%,150%);}
.tri-centre{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);text-align:center;}
.tri-centre .cap{
  font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}
.tri-centre .chans{
  font-size:13px;font-weight:600;color:var(--ink);
  display:flex;gap:10px;justify-content:center;
}

/* ---------- PERSONA TILES (PUF-1369 geometry, PUF-1555 content) ----------
   RETAINED BUT NOT RENDERED as of 22 Aug 2026: the home page no longer prints
   the nine-tile grid. Kept because the persona pages themselves live on and the
   grid may return; nothing below is reachable from any generated page today.
   PUF-1369 ruled eight squares naming who the site is for. PUF-1555 makes them
   nine, turns them into links, and replaces the persona NAME with that
   persona's hook — the visitor recognises the problem, not the job title, and
   never sees the word "Directors" at the gate.

   GEOMETRY, inherited. 215px squares, four across, 32px gap -> 4*215 + 3*32 =
   956px, which is why max-width is 956px. THREE across at that width gives
   (956 - 2*32) / 3 = 297px squares — larger than the four-up 215px, which is
   what the longer hook text needs.
   215px was set by measuring SHOWRUNNERS -- the longest word, which sets the
   floor -- at the 840px grid's 186px square, where it crowded its edges.

   COLOUR. Bright VGA grounds with BLACK type. White type was the original
   brief and was measured out: white on this palette runs 1.07:1 (yellow) to
   3.14:1 (red), failing nearly everywhere. Black on these eight grounds runs
   5.45:1 to 19.69:1, all clearing 4.5:1. The weakest is the violet; the blue
   it replaced was 4.13:1 and did not clear.
   Orange #FFAA00 and pink #FF00AA are NOT VGA entries -- the palette has no
   bright orange and no pink -- but are built from VGA's own channel levels
   (00/55/AA/FF) so they sit inside the same system. */
.personas{
  width:100%;max-width:956px;
  margin-top:80px;
  display:grid;
  /* minmax(0,1fr), NOT 1fr. A bare 1fr is minmax(auto,1fr), and that auto
     floor is the widest word's min-content, so the columns refuse to shrink
     and burst the page. Measured at PUF-1369: 837px of content in a 768px
     viewport before this was minmax(0,1fr). */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
}
.persona{
  aspect-ratio:1 / 1;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:10px;
}
/* ADDED (PUF-1555). The tile is now an <a>. Inherit, don't restyle: the tile's
   colour IS the affordance, so a link colour or underline here would fight it. */
a.persona{
  text-decoration:none;color:var(--ink);
  padding:22px 18px;
  transition:transform .12s ease;
}
a.persona:hover{transform:scale(1.02);}
@media (prefers-reduced-motion:reduce){
  a.persona{transition:none;}
  a.persona:hover{transform:none;}
}
/* ADDED (PUF-1555). The hook is a SENTENCE, not a one-word label, so it drops
   the uppercase/tracking treatment the names carried and takes sentence case at
   a smaller size. 17px ceiling rather than the names' 19px: measured against
   the longest hook ("Your project is too big for crowdfunding and too small for
   equity.", 74 characters) in a 297px square, where 19px ran to nine lines and
   crowded the padding. */
.persona .hook{
  font-size:clamp(14px,1.6vw,17px);
  font-weight:700;
  line-height:1.28;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  text-wrap:balance;
}
/* ADDED (PUF-1555), and it is PUF-1369's original treatment restored verbatim:
   when the tile carries a NAME rather than a hook, it takes the uppercase,
   tracked, 800-weight setting that band was designed around.
   Ruled at 19px, and it resolves to exactly 19px from a 1020px viewport up.
   Below that the squares shrink, so the type tracks them down rather than
   crowding SHOWRUNNERS, which is the longest word and sets the floor for the
   whole set. */
.persona .name{
  font-size:clamp(16px,1.9vw,19px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink);
}

/* The eight inherited grounds, unchanged from PUF-1369. */
.persona.p1{background:#FFFF55;}  /* yellow   19.69:1 */
.persona.p2{background:#55FFFF;}  /* cyan     17.13:1 */
.persona.p3{background:#FF55FF;}  /* magenta   8.00:1 */
.persona.p4{background:#55FF55;}  /* green    15.82:1 */
.persona.p5{background:#FF5555;}  /* red       6.68:1 */
.persona.p6{background:#AA55FF;}  /* violet    5.45:1 */
.persona.p7{background:#FFAA00;}  /* orange   11.00:1 */
.persona.p8{background:#FF00AA;}  /* pink      5.83:1 */
/* ADDED (PUF-1555). The ninth ground, needed because the axis went from eight
   personas to nine. Built from VGA's own channel levels (00/AA/FF) like the
   orange and the pink, so it stays inside the same system rather than
   introducing a colour from outside it.
   Contrast against BLACK type, computed the same way as the other eight:
     #00FFAA -> relative luminance 0.744 -> (0.744 + 0.05) / 0.05 = 15.9:1
   Clears 4.5:1 with room, and sits between the green (15.82) and the cyan
   (17.13) in the set, so the ninth tile does not read as brighter or duller
   than its neighbours. */
.persona.p9{background:#00FFAA;}  /* spring    15.90:1 */

/* ---------- CLOSING ANCHOR ---------- */
.closing{
  margin-top:80px;
  text-align:center;
  max-width:540px;
}
.closing h2{
  font-weight:800;
  font-size:clamp(22px,3.6vw,32px);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin-bottom:12px;
}
.closing p{
  font-size:clamp(14px,1.6vw,16px);
  color:var(--muted);
  line-height:1.6;
  /* Centred under the headline it belongs to, 20 Aug 2026. The consideration
     beat above stays left-aligned — that one is a body of reading, this is a
     single line finishing a centred statement. */
  text-align:center;
}

/* ---------- PERSONA PAGE ARTICLE (ADDED, PUF-1555) ----------
   The three beats the ticket rules: hook, consideration, conversion. Width and
   type are the inherited .sections values (640px / 17px / 1.65 / muted, body
   copy left-aligned under a centred heading) because the consideration beat is
   the same kind of reading as the copy sections it replaces. */
.beat{
  width:100%;max-width:640px;
  margin-top:48px;
  text-align:center;
}
.beat p{
  font-weight:400;
  font-size:clamp(15px,1.8vw,17px);
  line-height:1.65;
  color:var(--muted);
  text-align:left;
}
/* ADDED, 20 Aug 2026. Blank lines in content/copy.md become separate <p>, so
   consecutive paragraphs need the gap the global *{margin:0} reset removes.
   20px sits in the inherited spacing family (.subline 16, .closing h2 12) and
   reads clearly wider than the 1.65 leading it separates. */
.beat p + p,
.closing p + p{margin-top:20px;}

/* ---------- EMAIL CAPTURE (preserved from live, privacy-aligned, do not disturb) ---------- */
.capture{margin-top:72px;width:100%;max-width:460px;}
.form-row{display:flex;gap:0;}
.form-row input[type="email"]{
  flex:1;min-width:0;font-family:inherit;font-size:15px;
  padding:14px 16px;border:1px solid var(--ink);border-right:none;
  background:#fff;color:var(--ink);border-radius:0;
}
.form-row input::placeholder{color:#9a9a9a;}
.form-row button{
  font-family:inherit;font-size:13px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:14px 24px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;cursor:pointer;border-radius:0;white-space:nowrap;
}
.form-row button:hover{background:#222;}

/* ADDED, 20 Aug 2026. On a persona page the button sits BELOW the email field
   instead of joined to its right. /brands and /agencies keep the joined row —
   they have no picker, so their form is still one line of two things. */
.form-stack{display:flex;flex-direction:column;gap:10px;}
.form-stack input[type="email"]{
  width:100%;font-family:inherit;font-size:15px;
  padding:14px 16px;border:1px solid var(--ink);
  background:#fff;color:var(--ink);border-radius:0;
}
.form-stack input::placeholder{color:#9a9a9a;}
.form-stack button{
  width:100%;font-family:inherit;font-size:13px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:14px 24px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;cursor:pointer;border-radius:0;
}
.form-stack button:hover{background:#222;}
.form-stack button:disabled{opacity:0.6;cursor:default;}
/* The button is a separate act from filling the fields, so it gets the same
   18px the picker takes above the email field rather than sitting flush
   against the last profile input. (Gabriel, 20 Aug 2026.) */
.form-submit{margin-top:18px;}

/* ADDED, 20 Aug 2026. The three profile fields, between the email and the
   button. Same input treatment as .form-stack — this is one form, and a
   different-looking field would read as a different kind of question. */
.profiles{
  border:0;
  margin-top:10px;
  display:flex;flex-direction:column;gap:10px;
  text-align:left;
}
.profiles legend{
  font-size:12px;color:var(--muted);
  margin-bottom:10px;
}
.profiles input[type="text"]{
  width:100%;font-family:inherit;font-size:15px;
  padding:14px 16px;border:1px solid var(--ink);
  background:#fff;color:var(--ink);border-radius:0;
}
.profiles input::placeholder{color:#9a9a9a;}

/* Shown only when someone tries to submit without picking. */
.picker-error{
  display:none;
  font-size:12px;color:#8B1A1A;
  margin-top:10px;
}

.consent{font-size:12px;color:var(--muted);line-height:1.5;margin-top:12px;}
.consent a{color:var(--muted);}
.confirm{display:none;font-size:16px;font-weight:500;margin-top:8px;}
.capture.done .form-row,
.capture.done .form-stack,
.capture.done .consent,
.capture.done .profiles,
.capture.done .multiselect{display:none;}
.capture.done .confirm{display:block;}

/* ---------- PERSONA MULTISELECT (ADDED, PUF-1555) ----------
   Nine checkboxes, ALL UNTICKED, including the one matching the page. People in
   this business are legitimately several things at once, and the page's own
   persona is deliberately not pre-ticked: the mismatch between what the hook
   caught and what the visitor declares is the signal worth having, and
   pre-ticking would manufacture agreement. */
/* CHANGED, 20 Aug 2026: no stroke, and the picker sits ABOVE the email field
   rather than below it. A fieldset carries a border by default and the global
   reset only clears margin and padding, so the border is cleared here. */
.multiselect{
  border:0;
  margin-bottom:18px;
  text-align:left;
}
.multiselect legend{
  font-size:12px;color:var(--muted);
  margin-bottom:10px;
}
.multiselect .options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px 14px;
}
.multiselect label{
  display:flex;align-items:center;gap:7px;
  font-size:13px;line-height:1.3;
  cursor:pointer;
}
.multiselect input[type="checkbox"]{
  width:15px;height:15px;
  accent-color:var(--ink);
  flex-shrink:0;cursor:pointer;
}

/* ---------- HATCHES (ADDED, PUF-1555) ----------
   The two demand-side doors, sitting under the form. Wording is Gabriel's,
   ruled 19 Aug 2026, and is the same phrasing the v1/v2 wireframes used as
   cross-links. Deliberately quiet: a supply page must not sell to a buyer
   loudly enough to distract the person it was written for. */
/* CHANGED, 20 Aug 2026: the two hatches sit side by side rather than stacked.
   flex-wrap keeps them from overflowing a phone, where they fall back to the
   column this used to be. */
.hatches{
  margin-top:28px;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px 28px;
}
.hatches a{
  font-size:15px;color:var(--muted);text-decoration:none;
}
.hatches a:hover{color:var(--ink);text-decoration:underline;}

/* ---------- PERSONA SWITCHER (ADDED, PUF-1555) ----------
   "Persona is changeable and the other eight are browsable." Names, not hooks:
   the no-names rule belongs to the gate, where a name would let a visitor route
   by job title instead of recognising a problem. Past the gate the visitor has
   already chosen, and a list of hooks would be an unreadable way to navigate. */
.switcher{
  margin-top:64px;
  max-width:640px;
}
.switcher .label{
  font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.08em;
  margin-bottom:12px;
}
.switcher .links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;
}
.switcher a{
  font-size:14px;color:var(--muted);text-decoration:none;
}
.switcher a:hover{color:var(--ink);text-decoration:underline;}

/* ---------- FOOTER ---------- */
.site-footer{
  flex-shrink:0;
  max-width:var(--maxw);width:100%;margin:0 auto;
  padding:28px 32px 40px;text-align:center;
}
.footer-social{display:flex;justify-content:center;gap:18px;margin-bottom:16px;}
.footer-social a{color:var(--muted);display:inline-flex;transition:color .15s ease;}
.footer-social a:hover{color:var(--ink);}
.footer-social svg{width:20px;height:20px;display:block;}
.legal{font-size:12px;color:var(--muted);line-height:1.7;}
/* ADDED (PUF-1555). The per-persona one-liner about Gabriel, linking to the
   full bio. Sits above the social row so the bio reads as part of the page's
   closing rather than as legal furniture. */
/* CHANGED, 20 Aug 2026. The bio one-liner moved INTO the link row, so it takes
   that row's 12px and drops its own bottom margin. flex-wrap is new with it: a
   sentence plus three links overflows a phone, and wrapping beats a scrollbar. */
.footer-bio{color:var(--muted);}
.footer-bio a{color:var(--muted);}
.footer-bio a:hover{color:var(--ink);}
.footer-links{
  display:flex;justify-content:center;align-items:baseline;
  flex-wrap:wrap;gap:16px;
  font-size:12px;margin-bottom:16px;
}
.footer-links a{color:var(--muted);text-decoration:none;}
.footer-links a:hover{color:var(--ink);text-decoration:underline;}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* Two columns from 900px down. Four columns below that would leave squares
   too small for SHOWRUNNERS at a readable size; two large squares read better
   on a tablet or phone than four cramped ones, and give a bigger touch target.
   PUF-1555: the grid is three-up above this breakpoint rather than four, and
   the same argument applies unchanged below it. */
@media (max-width:900px){
  .personas{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  .persona .hook{font-size:clamp(13px,2.6vw,17px);}
  /* 13px floor rather than 15px: it engages only below ~325px, where a 130px
     square left SHOWRUNNERS 2.9px of clearance. (PUF-1369, measured.) */
  .persona .name{font-size:clamp(13px,4vw,19px);}
  .multiselect .options{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  main{padding:36px 20px 48px;}
  .form-row{flex-direction:column;gap:10px;}
  .form-row input[type="email"]{border-right:1px solid var(--ink);}
  /* One column, and the square is dropped: a hook is a sentence, and forcing a
     sentence into a 1:1 box on a narrow phone either shrinks the type below the
     13px floor or overflows it. */
  .personas{grid-template-columns:minmax(0,1fr);}
  .persona{aspect-ratio:auto;min-height:132px;}
}