/* ==========================================================================
   THE PRIVATE LIST — stylesheet.
   Ported from design/mock/listing.html. Role-named tokens; no component
   states a literal colour. Plaster and ink, one brass hairline.

   The register, not the carnival. Restraint is the luxury signal: few marks,
   much space, nothing decorative that is not load-bearing. The photographs
   carry the page; the record is a quiet mark near the money, not a monument.

   design-audit-ignore:radius — 3px is a deliberate severe choice. Sharp
   corners read expensive, and radius is not the only structural signal here:
   elevation, rules of two weights and a display/body ratio over 4:1 carry it.
   ========================================================================== */

:root{
  /* ground + ink -------------------------------------------------------- */
  --ground:#EDEAE4; --ground-raised:#F8F6F2; --ground-deep:#E4E0D8;
  --ink:#14110F; --ink-soft:#3A342F; --ink-quiet:#57514A; --ink-faint:#655E57;

  /* accents. Contrast measured against all three grounds, worst case shown. */
  --brass:#A8874E;        /* 2.80:1 — RULES AND ORNAMENT ONLY, never type    */
  --brass-text:#7A5F2E;   /* 4.55:1 — the type-safe brass                    */
  --sage:#3D5A4C;         /* 5.77:1 — verified / available                   */
  --sage-light:#A8C4B5;   /* the same green legible on a dark photo scrim    */
  --claret:#6B2434;       /* 8.28:1 — touring only                          */

  /* rules: two weights, and a heavier one for a dashed empty state -------- */
  --rule:#DCD6CB; --rule-soft:#E6E1D8; --rule-strong:#CFC6B6;

  /* photographic stand-ins for listings with no image yet ----------------- */
  --photo-a:#D9CFC0; --photo-b:#C9BCA9; --photo-c:#B9AB98; --photo-d:#CBBFAE;

  --shadow-plate:0 1px 2px rgba(20,17,15,.05), 0 10px 28px rgba(20,17,15,.08);
  --shadow-rail:0 1px 2px rgba(20,17,15,.04), 0 18px 44px rgba(20,17,15,.09);
  --shadow-lift:0 4px 10px rgba(20,17,15,.09), 0 26px 60px rgba(20,17,15,.15);
  --shadow-bar:0 -2px 24px rgba(20,17,15,.10);

  --radius-xs:2px; --radius-sm:3px; --radius-md:4px;

  /* three durations by role, two curves. Nothing else. */
  --dur-quick:160ms; --dur-settle:420ms; --dur-slow:900ms;
  --ease-out:cubic-bezier(.22,.72,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Jost",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --measure:62ch; --wrap:1240px; --gutter:28px;
}

/* ============================== BASE ==================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:16.5px;font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 70% at 50% -12%,rgba(255,255,255,.55),transparent 62%),
    radial-gradient(80% 50% at 100% 0,rgba(168,135,78,.07),transparent 60%);
  background-attachment:fixed}
figure{margin:0} img{max-width:100%;display:block}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--ink);color:var(--ground);
  padding:14px 18px;text-decoration:none}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:26px var(--gutter) 0}
/* pages with no breadcrumb start flush under the sticky header otherwise */
.wrap>h1.page:first-child{margin-top:30px}

/* the one repeated typographic device. Headings carry it too, so it has to
   defeat the UA heading defaults for size, weight and margin. */
.lbl{font-family:var(--body);font-weight:400;font-size:11px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet)}
h1.lbl,h2.lbl,h3.lbl,h4.lbl,h5.lbl,h6.lbl{margin:0;font-size:11px;font-weight:400;line-height:1}
.mono{font-family:var(--mono)}

/* ============================= HEADER =================================== */
.hdr{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--rule-soft)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter);
  display:flex;align-items:center;gap:16px}
/* NOT inline-flex: that makes the text nodes either side of <i> anonymous
   flex items and the whitespace between them is dropped ("THEPRIVATELIST").
   Padding gives the 44px target without touching the inline formatting. */
.brand{display:inline-block;padding:15px 0;min-height:44px;
  font-family:var(--body);font-weight:500;font-size:clamp(13px,3.4vw,15px);line-height:1;
  letter-spacing:.19em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  margin-right:auto;white-space:nowrap}
.brand i{font-style:normal;color:var(--brass-text)}

.nav-toggle{width:44px;height:44px;flex:none;display:grid;place-items:center;background:none;
  border:1px solid var(--rule);border-radius:var(--radius-xs);cursor:pointer;
  transition:border-color var(--dur-quick) var(--ease-out),background var(--dur-quick) var(--ease-out)}
.nav-toggle:hover{border-color:var(--ink-quiet);background:var(--ground-raised)}
.nav-toggle i{display:block;width:18px;height:1px;background:var(--ink);position:relative;
  transition:background var(--dur-quick) var(--ease-out)}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:18px;height:1px;
  background:var(--ink);transition:transform var(--dur-settle) var(--ease-out)}
.nav-toggle i::before{top:-5px}.nav-toggle i::after{top:5px}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}

.nav{display:none}
.nav[data-open="true"]{display:block;position:absolute;left:0;right:0;top:100%;
  background:var(--ground-raised);border-bottom:1px solid var(--rule);box-shadow:var(--shadow-rail);
  padding:6px var(--gutter) 18px}
.nav a{display:block;padding:14px 0;color:var(--ink);text-decoration:none;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--rule-soft)}
.nav a:last-child{border-bottom:0}

.hdr-cta{display:inline-flex;align-items:center;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:14px 20px;background:var(--ink);color:var(--ground);
  text-decoration:none;white-space:nowrap;border-radius:var(--radius-xs);
  transition:background var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out)}
.hdr-cta:hover{background:var(--ink-soft);transform:translateY(-1px)}

/* Hamburger below 900px. Above it the nav is a row; it must never wrap. */
@media(min-width:900px){
  .nav-toggle{display:none}
  .nav,.nav[data-open="false"],.nav[data-open="true"]{display:flex;gap:30px;align-items:center;
    position:static;background:none;border:0;box-shadow:none;padding:0;flex-wrap:nowrap}
  .nav a{border:0;padding:4px 0;font-size:13px;letter-spacing:.1em;color:var(--ink-soft);
    position:relative;white-space:nowrap;
    transition:color var(--dur-quick) var(--ease-out)}
  .nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--brass);
    transition:width var(--dur-settle) var(--ease-out)}
  /* 44px pointer target without moving the brass underline off the text */
  .nav a::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
    transform:translateY(-50%)}
  .nav a:hover{color:var(--ink)}
  .nav a:hover::after{width:100%}
}

/* ============================ PAGE HEAD ================================= */
/* Display-to-body ratio above 4:1. The head is the loudest thing on the page
   and everything under it is quiet — that contrast is the density signal. */
h1.page{font-family:var(--display);font-weight:500;font-size:clamp(42px,7vw,72px);
  line-height:1.0;letter-spacing:-.022em;margin:0 0 18px;font-variation-settings:"opsz" 72}
.page-lede{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.1vw,24px);
  line-height:1.5;color:var(--ink-soft);max-width:46ch;margin:0 0 34px;
  padding-bottom:32px;border-bottom:1px solid var(--rule-soft);
  font-variation-settings:"opsz" 24}
.page-lede a{text-decoration:none;border-bottom:1px solid var(--brass);
  transition:color var(--dur-quick) var(--ease-out)}
.page-lede a:hover{color:var(--brass-text)}

.crumb{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:0 0 8px}
.crumb a,.crumb>span{display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink-quiet);text-decoration:none}
.crumb a{transition:color var(--dur-quick) var(--ease-out)}
.crumb a:hover{color:var(--ink)}

/* the running count, set as a register line rather than a sentence */
/* a figure, so it is set in the ledger face — and so it does not read as a
   second copy of the small-caps section label that follows it */
.count{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-faint);
  margin:0 0 38px}

/* ========================== DIRECTORY GRID ==============================
   Photography-led, same as the profile gallery: the photograph is the object
   and carries the elevation. No filled tile, no border, no badge — the text
   sits on the plaster under a hairline. Row gap far exceeds column gap so the
   grid reads as ruled entries rather than a wall of product tiles.
   Deliberately uniform: ranking here is verification and freshness, so no
   card may be visually promoted or it reads as a bought position.
   ======================================================================== */
.grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:16px;row-gap:44px;
  list-style:none;margin:0;padding:0 0 56px}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr);column-gap:22px;row-gap:54px}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr);column-gap:26px;row-gap:64px}}
.sec .grid{padding-bottom:0}

.card{margin:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.card>a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}

.card-img{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-plate);
  background:linear-gradient(150deg,var(--photo-a),var(--photo-b) 60%,var(--photo-d));
  transition:transform var(--dur-settle) var(--ease-out),box-shadow var(--dur-settle) var(--ease-out)}
.card-img img{width:100%;height:100%;object-fit:cover}
/* one sheen, one footing scrim. The scrim is load-bearing: it is what makes
   the verification mark legible over an arbitrary photograph. */
.card-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.20),transparent 52%),
             linear-gradient(to top,rgba(20,17,15,.74) 0,rgba(20,17,15,.55) 7%,
                             rgba(20,17,15,.10) 18%,transparent 27%)}
.card>a:hover .card-img{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

/* Where the competitors put a gold VIP badge: a dated mark, set as a caption
   on the photograph. No fill, no pill, no colour block. */
.card-flag{position:absolute;left:12px;bottom:10px;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ground-raised);background:none;border:0;padding:0;border-radius:0;
  text-shadow:0 1px 3px rgba(20,17,15,.6)}
.card-flag::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--sage-light);flex:none}

.card-body{display:flex;flex-direction:column;gap:5px;flex:1;
  margin-top:16px;padding:14px 0 0;border-top:1px solid var(--rule-soft)}
.card-name{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.2;
  letter-spacing:-.012em;color:var(--ink);font-variation-settings:"opsz" 24}
.card-name span{font-family:var(--body);font-weight:300;font-size:12px;letter-spacing:.08em;
  color:var(--ink-quiet);margin-left:8px;vertical-align:.1em}
.card-meta{font-size:13px;line-height:1.45;color:var(--ink-quiet)}
/* both classes land on the agency "Unclaimed" line; without this the later
   .card-meta rule silently cancels the small-caps treatment. */
.card-meta.lbl{font-size:10px;letter-spacing:.16em;color:var(--ink-faint);line-height:1.4}
.card-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage)}
.pip{width:6px;height:6px;border-radius:50%;background:var(--sage);flex:none}
/* label first, then the figure — the way a register reads */
.card-rate{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;gap:9px;
  font-family:var(--display);font-size:19px;color:var(--ink);
  font-variation-settings:"opsz" 20}
.card-rate small{order:-1;font-family:var(--body);font-size:9.5px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

/* ============================ EMPTY STATE =============================== */
.empty{border:1px dashed var(--rule-strong);border-radius:var(--radius-sm);
  padding:56px 32px;text-align:center;color:var(--ink-quiet);background:var(--ground-raised)}
.empty h2{font-family:var(--display);font-weight:500;font-size:26px;margin:0 0 10px;color:var(--ink)}
.empty p{margin:0 0 22px;max-width:46ch;margin-inline:auto}

/* ========================== SECTIONS / PROSE ============================ */
/* The mock puts no rule under a section label. Space does the separating —
   a rule under every heading is what made these pages read as an admin panel. */
.sec{margin:0 0 52px}
.sec--wide{margin:0 0 72px}
.sec--tight{margin:0 0 34px}
.sec>.lbl{display:block;margin:0 0 20px;padding:0;border:0}
.prose{font-size:17px;line-height:1.78;max-width:var(--measure);color:var(--ink-soft)}
.prose p{margin:0 0 1.05em}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--ink);font-weight:500}

/* the brass hairline. This, the age dash and the record rule are the only
   three places brass touches the page. */
.note{border-left:1px solid var(--brass);padding:2px 0 2px 20px;margin:0;
  font-size:16px;line-height:1.72;color:var(--ink-soft);max-width:56ch}
.note b{color:var(--ink);font-weight:500}
.note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass)}
.note:has(>a:only-child){border-left:0;padding:0;max-width:none}
.note:has(>a:only-child) a{display:inline-flex;align-items:center;min-height:44px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:color var(--dur-quick) var(--ease-out)}
.note:has(>a:only-child) a:hover{color:var(--brass-text)}

.chips{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.chip{display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;padding:0 16px;border:1px solid var(--rule);border-radius:var(--radius-xs);
  color:var(--ink-soft);text-decoration:none;
  transition:border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out),
             background var(--dur-quick) var(--ease-out)}
.chip:hover{border-color:var(--ink-quiet);color:var(--ink);background:var(--ground-raised)}
.chip--ask{border-style:dashed;color:var(--ink-faint)}
/* the count inside a place chip is data, so it takes the type-safe brass */
.chip .lbl{color:var(--brass-text);margin-left:9px;font-size:10px;letter-spacing:.14em}

/* ============================== PAGER =================================== */
.pager{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:8px 0 64px}
.pager a,.pager span{display:inline-flex;align-items:center;min-height:44px;padding:0 17px;
  border:1px solid var(--rule);border-radius:var(--radius-xs);text-decoration:none;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  transition:border-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}
.pager a:hover{border-color:var(--ink-quiet);color:var(--ink)}
.pager .now{background:var(--ink);color:var(--ground);border-color:var(--ink)}

/* ============================= BUTTONS ================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;
  border:0;border-radius:var(--radius-xs);cursor:pointer;font-family:var(--body);font-size:12px;
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  background:var(--ink);color:var(--ground);
  transition:background var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out),
             box-shadow var(--dur-settle) var(--ease-out)}
.btn:hover{background:var(--ink-soft);transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn:active{transform:none}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule);box-shadow:none}
.btn-ghost:hover{background:transparent;border-color:var(--ink);transform:translateY(-1px);
  box-shadow:none}
.btn-primary{background:var(--ink);color:var(--ground)}
.btn-primary:hover{background:var(--ink-soft)}
.pcard .btn-primary{width:100%}
.btn-sm{min-height:40px;padding:0 16px;font-size:10.5px;letter-spacing:.16em}

/* ====================== FORMS (portal + admin) ========================== */
.form{max-width:640px}
.field{margin-bottom:22px}
.field label{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-quiet)}
.field input,.field textarea,.field select{width:100%;padding:14px;font-family:var(--body);
  font-size:16px;color:var(--ink);background:var(--ground-raised);border:1px solid var(--rule);
  border-radius:var(--radius-xs);transition:border-color var(--dur-quick) var(--ease-out)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink-quiet)}
.field textarea{min-height:150px;line-height:1.6;resize:vertical}
.field .hint{font-size:13px;color:var(--ink-faint);margin-top:7px}
.flash{padding:15px 18px;border-radius:var(--radius-xs);margin:0 0 26px;font-size:14.5px}
.flash-ok{background:color-mix(in srgb,var(--sage) 12%,var(--ground-raised));
  border:1px solid color-mix(in srgb,var(--sage) 34%,transparent);color:var(--sage)}
.flash-err{background:color-mix(in srgb,var(--claret) 10%,var(--ground-raised));
  border:1px solid color-mix(in srgb,var(--claret) 32%,transparent);color:var(--claret)}

/* ========================== TABLES (admin) ============================== */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-quiet);font-weight:400;padding:0 12px 12px 0;border-bottom:1px solid var(--rule)}
.tbl td{padding:14px 12px 14px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-soft);
  vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:color-mix(in srgb,var(--ground-deep) 40%,transparent)}
.tag{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--radius-xs);border:1px solid var(--rule);color:var(--ink-quiet)}
.tag-live{color:var(--sage);border-color:color-mix(in srgb,var(--sage) 40%,transparent)}
.tag-draft{color:var(--ink-faint)}

/* =========================== PORTAL SHELL =============================== */
.portal{display:grid;gap:34px;padding:8px 0 80px}
@media(min-width:900px){.portal{grid-template-columns:210px minmax(0,1fr);gap:52px;align-items:start}}
.pnav{display:flex;flex-direction:column;gap:2px}
.pnav a{display:flex;align-items:center;min-height:44px;padding:0 13px;text-decoration:none;
  color:var(--ink-soft);font-size:14.5px;border-radius:var(--radius-xs);
  transition:background var(--dur-quick) var(--ease-out)}
.pnav a:hover{background:var(--ground-deep)}
.pnav a[aria-current="page"]{background:var(--ink);color:var(--ground)}

/* ==========================================================================
   PROFILE PAGE
   Two columns, the record demoted to the foot of a sticky rail, a
   photography-led gallery, contact pinned to the bottom on a phone.
   ========================================================================== */
.profile .layout{display:grid;gap:48px;padding:14px 0 90px}
@media(min-width:960px){
  .profile .layout{grid-template-columns:minmax(0,1fr) 336px;gap:72px;align-items:start}
  .profile .rail{align-self:start}
}
/* Sticky ONLY where the rail actually fits. The previous rule pinned it with
   max-height + overflow-y, which sheared the Appearance card in half and hid
   the record entirely on a 900px-tall window. A rail that scrolls with the
   page is correct; a rail that eats its own content is a bug. */
/* Sticky only where the whole rail fits between the header and the fold. A
   rail that pins while taller than the viewport puts its own foot out of
   reach; below this height it simply scrolls with the page, which is fine. */
@media(min-width:960px) and (min-height:1240px){
  .profile .rail{position:sticky;top:96px}
}
/* the related grid sits in the narrow column: size it to the column, not the
   viewport, or it gets four tracks and can only fill three. */
@media(min-width:960px){
  .profile .col-main .grid{grid-template-columns:repeat(3,1fr);column-gap:20px;row-gap:44px}
}

/* "Mira — 35". The h1 and the age are separate elements now, so the flex row
   carries the baseline and the age carries the brass dash. */
.name-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:0;margin:0 0 16px}
.name{font-family:var(--display);font-weight:500;font-size:clamp(52px,9vw,88px);
  line-height:.98;letter-spacing:-.02em;margin:0;font-variation-settings:"opsz" 72}
.name-row .age{font-family:var(--body);font-weight:300;font-size:clamp(15px,1.7vw,20px);
  line-height:1;color:var(--ink-quiet);letter-spacing:.08em;margin:0 0 0 16px}
.name-row .age::before{content:"";display:inline-block;width:26px;height:1px;
  background:var(--brass);vertical-align:.34em;margin-right:.85em}

.tagline{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.3vw,25px);
  line-height:1.48;color:var(--ink-soft);max-width:33ch;margin:0 0 24px;
  font-variation-settings:"opsz" 24}

.marks{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;padding:0 0 30px;
  border-bottom:1px solid var(--rule-soft);margin-bottom:34px}
.mark{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-quiet)}
.mark::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sage);flex:none}
.mark--touring{color:var(--claret)}
.mark--touring::before{background:var(--claret)}
.mark--plain::before{background:var(--brass)}

/* ----------------------------- gallery --------------------------------- */
.plate{position:relative;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:var(--shadow-plate);margin-bottom:8px;
  background:linear-gradient(155deg,var(--photo-a),var(--photo-b) 38%,var(--photo-c) 70%,var(--photo-d));
  opacity:0;animation:plateIn var(--dur-slow) var(--ease-out) forwards}
.plate img{width:100%;height:100%;object-fit:cover}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 80% at 30% 20%,rgba(255,255,255,.26),transparent 58%),
             linear-gradient(to top,rgba(20,17,15,.20),transparent 42%)}
@keyframes plateIn{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}

.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.strip .shot{position:relative;aspect-ratio:3/4;border-radius:var(--radius-sm);overflow:hidden;
  box-shadow:var(--shadow-plate);opacity:0;
  background:linear-gradient(150deg,var(--photo-a),var(--photo-b) 60%,var(--photo-d));
  animation:shotIn var(--dur-settle) var(--ease-out) forwards;
  transition:transform var(--dur-settle) var(--ease-out),box-shadow var(--dur-settle) var(--ease-out)}
.strip .shot img{width:100%;height:100%;object-fit:cover}
.strip .shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.22),transparent 55%)}
.strip .shot:nth-child(1){animation-delay:120ms}
.strip .shot:nth-child(2){animation-delay:190ms}
.strip .shot:nth-child(3){animation-delay:260ms}
.strip .shot:nth-child(4){animation-delay:330ms}
.strip .shot:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
@keyframes shotIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.gal-note{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;
  padding-bottom:34px;border-bottom:1px solid var(--rule-soft);margin-bottom:48px}
.gal-note .lbl{margin:0}
.gal-more{display:inline-flex;align-items:center;min-height:44px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--brass);
  transition:color var(--dur-quick) var(--ease-out)}
.gal-more:hover{color:var(--brass-text)}
@media(max-width:620px){.strip{grid-template-columns:repeat(2,1fr)}.plate{aspect-ratio:5/4}}

/* ------------------------------ rates ---------------------------------- */
.rates{width:100%;border-collapse:collapse}
.rates caption{text-align:left;padding:0 0 14px}
.rates caption .lbl{margin:0}
.rates td{padding:15px 0;border-bottom:1px solid var(--rule-soft);font-size:16px;color:var(--ink-soft)}
.rates td:last-child{text-align:right;font-family:var(--display);font-size:19px;color:var(--ink);
  font-variation-settings:"opsz" 20}
.rates tr:last-child td{border-bottom:0}
.ask{font-family:var(--body)!important;font-size:12px!important;color:var(--ink-faint)!important;
  letter-spacing:.16em;text-transform:uppercase}
.cols{display:grid;gap:44px}
@media(min-width:560px){.cols{grid-template-columns:1fr 1fr;gap:56px}}

/* ------------------------------ hours ---------------------------------- */
.week{border-top:1px solid var(--rule-soft)}
.day{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--rule-soft);font-size:15px;color:var(--ink-soft)}
.day--now{color:var(--ink)}
.day--now .t{color:var(--sage)}
.day .t{font-size:14px;letter-spacing:.04em;color:var(--ink-quiet)}

/* ------------------------------- rail ---------------------------------- */
.pcard{background:var(--ground-raised);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:26px;box-shadow:var(--shadow-rail);margin-bottom:20px}
.pcard:last-child{margin-bottom:0}
.pcard>.lbl{display:block;margin:0}
.price{font-family:var(--display);font-weight:500;font-size:44px;line-height:1;letter-spacing:-.025em;
  margin:14px 0 0;font-variation-settings:"opsz" 44}
.price .per{font-family:var(--body);font-weight:300;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-quiet);display:block;margin-top:10px}
.pref{font-size:14.5px;line-height:1.6;color:var(--ink-quiet);margin:18px 0 22px;padding-top:18px;
  border-top:1px solid var(--rule-soft)}
.code{text-align:center;font-family:var(--mono);font-size:12px;color:var(--ink-quiet);margin:18px 0 0}
.code b{color:var(--ink);font-weight:500;letter-spacing:.12em;white-space:nowrap}
.terms{font-size:12.5px;line-height:1.6;color:var(--ink-faint);margin:20px 0 0;padding-top:18px;
  border-top:1px solid var(--rule-soft)}

.facts{display:grid;grid-template-columns:1fr 1fr;margin:16px 0 0}
.fact{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.fact:nth-child(odd){padding-right:16px}
.fact dt{margin:0 0 6px}
.fact dt.lbl{margin:0 0 6px}
.fact dd{margin:0;font-size:15px;line-height:1.35;color:var(--ink)}

/* the record: one brass hairline and four dated lines. Not a monument. */
.record{padding:22px 0 0;margin:0;border-top:1px solid var(--brass)}
.rec-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0}
.rec-row dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  white-space:nowrap}
.rec-row dd{margin:0;font-size:13px;color:var(--ink-soft);text-align:right}
.rec-row dd.ok{color:var(--sage)}
.live{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--rule-soft);font-size:13px;color:var(--ink)}
.live .pip{animation:pulse var(--dur-slow) var(--ease-soft) infinite alternate}
@keyframes pulse{from{opacity:.3}to{opacity:1}}

/* --------------------------- the contact block -------------------------
   The one transaction on the site. Everything else is evidence for this, so
   it gets the strongest surface in the main column — the same raised plate as
   the price card, so the two read as one object — and the thing you actually
   have to type is set in the ledger face and marked in brass.
   ----------------------------------------------------------------------- */
#contact{background:var(--ground-raised);border:1px solid var(--rule);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-rail);
  padding:34px 32px;margin:0 0 56px;scroll-margin-top:96px}
#contact>.lbl{display:block;margin:0 0 18px}
#contact .prose{font-size:16px;line-height:1.7;max-width:52ch;margin:0 0 26px}
#contact .terms{margin:26px 0 0}
@media(max-width:520px){#contact{padding:28px 22px}}

.contact-actions{display:flex;flex-direction:column;align-items:stretch;gap:20px;
  padding-top:24px;border-top:1px solid var(--rule-soft)}
.contact-actions .note{margin:0}
.contact-actions .btn{align-self:flex-start;width:auto;min-width:220px}
@media(max-width:520px){.contact-actions .btn{align-self:stretch;min-width:0}}

/* brass marks the two strings the client has to copy, and nothing else here */
.contact-code{font-family:var(--mono);font-size:clamp(17px,2.3vw,22px);line-height:1.55;
  letter-spacing:.01em;color:var(--ink-soft);margin:0;overflow-wrap:anywhere}
.contact-code b{color:var(--ink);font-weight:500;letter-spacing:.06em;white-space:nowrap;
  box-shadow:inset 0 -1px 0 var(--brass)}

/* [hidden] is an attribute, so a display rule on the class would defeat it */
.revealed{display:block;font-family:var(--mono);font-size:14px;line-height:1.6;
  color:var(--ink-soft);margin:0;padding-top:18px;max-width:56ch;
  border-top:1px solid var(--rule-soft)}
.revealed[hidden]{display:none}

/* ------------------------------- FAQ ----------------------------------- */
/* rendered visibly because FAQPage JSON-LD without visible content is a
   structured-data policy violation. Ruled rows, same rhythm as .week. */
.faq{margin:0;border-top:1px solid var(--rule-soft)}
.faq dt{margin:0;padding:22px 0 0}
.faq dt h3,.faq dt h4{font-family:var(--display);font-weight:500;font-size:19px;
  line-height:1.35;letter-spacing:-.01em;color:var(--ink);margin:0;text-transform:none;
  font-variation-settings:"opsz" 20}
.faq dd{margin:0;padding:9px 0 22px;border-bottom:1px solid var(--rule-soft);
  font-size:15.5px;line-height:1.7;color:var(--ink-soft);max-width:var(--measure)}
.faq dd:last-child{border-bottom:0}

/* ------------------------- mobile action bar --------------------------- */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:14px;align-items:center;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ground-raised) 92%,transparent);
  backdrop-filter:blur(16px) saturate(1.3);border-top:1px solid var(--rule);box-shadow:var(--shadow-bar)}
.actionbar .p{font-family:var(--display);font-size:22px;line-height:1;white-space:nowrap}
.actionbar .p span{display:block;font-family:var(--body);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-quiet);margin-top:5px}
.actionbar .btn{flex:1;min-height:50px;margin:0;width:auto}
body.profile{padding-bottom:88px}
@media(min-width:960px){.actionbar{display:none}body.profile{padding-bottom:0}}

/* ============================== FOOTER ================================== */
.foot{border-top:1px solid var(--rule-soft);margin-top:16px;padding:0;
  font-size:13px;color:var(--ink-faint)}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:52px var(--gutter) 68px}
.foot-cols{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:640px){.foot-cols{grid-template-columns:1.4fr 1fr 1fr;gap:0 40px}}
.foot-h{font-family:var(--body);font-weight:400;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px;padding-bottom:14px;
  border-bottom:1px solid var(--rule-soft)}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0;break-inside:avoid}
.foot-col a{display:block;padding:13px 0;line-height:1.4;text-decoration:none;
  color:var(--ink-soft);font-size:14px;
  transition:color var(--dur-quick) var(--ease-out)}
.foot-col a:hover{color:var(--ink)}
/* the city list is long; two columns keeps the three footer columns in balance */
.foot-col:first-child ul{columns:2;column-gap:32px}
.foot-note{max-width:64ch;margin:44px 0 0;padding-top:22px;
  border-top:1px solid var(--rule-soft);font-size:12.5px;line-height:1.65;color:var(--ink-faint)}

/* ==================== age gate: an overlay, so crawlers still
     receive the document ============================================== */
#agegate{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--ink) 58%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(.8);backdrop-filter:blur(14px) saturate(.8)}
#agegate.on{display:grid}
body:has(#agegate.on){overflow:hidden}
#agegate .box{width:min(100%,380px);padding:26px 26px 22px;text-align:center;
  background:var(--ground-raised);border:1px solid var(--rule);border-top:3px solid var(--brass);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lift)}
#agegate .lbl{display:block;margin:0 0 10px;color:var(--brass-text)}
#agegate h2{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.1;
  letter-spacing:-.012em;margin:0 0 12px;padding:0;border:0;font-variation-settings:"opsz" 28}
#agegate .prose{font-size:14.5px;line-height:1.6;margin:0 0 20px;text-align:center;color:var(--ink-quiet)}
#agegate .btn{width:100%;min-height:62px;font-size:13px;letter-spacing:.2em}
#agegate .leave{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.08em;
  color:var(--ink-faint);text-decoration:none;border-bottom:1px solid var(--rule)}
#agegate .leave:hover{color:var(--ink)}
@media(max-width:420px){#agegate .box{padding:22px 18px 18px}#agegate h2{font-size:24px}}

/* ========================== reduced motion ============================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .plate,.strip .shot{opacity:1;transform:none}
}
/* animated-in elements must never print blank */
@media print{.plate,.strip .shot{opacity:1;animation:none}}

/* ---------- SMS gate: the conversion element ---------- */
/* The code and the number are the two strings a client must carry into their
   messaging app, so they are the only copyable things on the page. */
.contact-code b[data-copy]{cursor:pointer;position:relative;white-space:nowrap;
  border-bottom:1px solid var(--brass);padding-bottom:1px;
  transition:color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}
.contact-code b[data-copy]:hover,.contact-code b[data-copy]:focus-visible{color:var(--brass-text);
  border-color:var(--brass-text)}
.contact-code b.is-copied{color:var(--sage);border-color:var(--sage)}
.contact-actions .sms-link{width:100%;margin-bottom:16px}
.pcard .sms-link{width:100%}

/* Signed-out portal pages (start, claim, sign in) have no nav, so they must not
   use the two-column .portal grid — a single child lands in the 210px nav
   column and the form renders at a fifth of its intended width. */
.portal-plain{max-width:34rem;margin:0 auto;padding:26px 0 90px}
.portal-plain .form{max-width:none}
.portal-plain h1.page{margin-top:0}

/* ---------- onboarding wizard ---------- */
/* The step list is a real ordered list and every step is a link: she can see the
   whole journey, how far in she is, and jump back to change something. */
.wz-steps{list-style:none;margin:0 0 30px;padding:0 0 22px;border-bottom:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:6px 18px}
.wz-steps a{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink-faint);
  min-height:44px;transition:color var(--dur-quick) var(--ease-out)}
.wz-steps a:hover{color:var(--ink)}
.wz-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;
  border:1px solid var(--rule);font-family:var(--mono);font-size:11px;line-height:1}
.wz-l{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.wz-now a{color:var(--ink)}
.wz-now .wz-n{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.wz-done a{color:var(--sage)}
.wz-done .wz-n{border-color:var(--sage);color:var(--sage)}
.wz-count{display:block;margin:0 0 10px}
@media(max-width:620px){ .wz-l{display:none} .wz-steps{gap:10px} }

/* ==========================================================================
   UPDATES AND SHORTS — appended block. Nothing above this line is modified.

   Two new kinds of listing content: short text posts ("updates") and short
   upright video ("shorts"). Both appear on the public profile, both have a
   portal page and both have an admin queue, so each selector below is written
   once and used in all three places.

   The shorts rail scrolls sideways rather than wrapping. Upright video in a
   grid forces every card to the height of a phone screen and pushes the rates
   below the fold on the one page that has to sell; a rail keeps the vertical
   budget fixed at one card no matter how many there are.
   ========================================================================== */

/* ---------- shorts: the public rail ---------- */
.shorts{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.shorts::-webkit-scrollbar{height:6px}
.shorts::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:99px}
.short{flex:0 0 auto;width:min(210px,52vw);scroll-snap-align:start}
.short video{width:100%;aspect-ratio:9/16;background:var(--photo-c);object-fit:cover;
  border-radius:var(--radius-sm);box-shadow:var(--shadow-plate);display:block}

/* ---------- updates: the public list ---------- */
.updates{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.update{border-left:1px solid var(--rule);padding:2px 0 2px 18px;max-width:var(--measure)}
.update-body{margin:0 0 8px;white-space:normal}
.update-photo{margin:12px 0 8px;border-radius:var(--radius-sm);max-width:320px;
  box-shadow:var(--shadow-plate)}
.update-time{display:block;margin:0;color:var(--ink-faint)}

/* ---------- portal: her own updates, pending ones included ---------- */
.upd-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:16px}
.upd{border:1px solid var(--rule-soft);border-radius:var(--radius-sm);padding:16px 18px;
  background:var(--ground-raised)}
.upd-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.upd-body{margin:0 0 8px}
.upd-photo{margin:10px 0;border-radius:var(--radius-sm);max-width:240px}
.upd-acts{margin-top:6px}
.upd-acts form{margin-bottom:0}

/* ---------- portal: her own videos ---------- */
.vid-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.vid{border:1px solid var(--rule-soft);border-radius:var(--radius-sm);overflow:hidden;
  background:var(--ground-raised);display:flex;flex-direction:column}
.vid-player{width:100%;aspect-ratio:9/16;background:var(--ink);object-fit:cover;display:block}
.vid-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.vid-acts{margin-top:auto;padding-top:8px}
.vid-acts form{margin-bottom:0}
/* The capture input is submitted but never seen: the browser fills it. */
#short-form input[name=poster]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#short-note:empty{display:none}

/* ---------- admin: the video queue and the post queue ---------- */
.vid-review{width:100%;aspect-ratio:9/16;background:var(--ink);object-fit:contain;display:block;
  border-bottom:1px solid var(--rule)}
.vid-queue .card{overflow:hidden}
.post-body{max-width:52ch;margin:0}
.post-thumb{display:flex;align-items:center;gap:10px;margin-top:10px}
.post-thumb img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius-xs);flex:none}

@media(max-width:620px){
  .short{width:min(168px,58vw)}
  .vid-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ---------------------------------------------------------- owner mode ---
   The listing page as its owner sees it at /portal/page. Same page, plus a
   draft banner, an Edit beside every part, dashed placeholders where a part is
   empty, and a badge on media a visitor cannot yet see. Nothing here changes
   the public rendering: every rule is scoped under body.owner or .own.       */
body.owner .draftbar{position:sticky;top:64px;z-index:20;margin:0 0 26px;
  background:color-mix(in srgb,var(--ground-raised) 92%,transparent);backdrop-filter:blur(10px);
  border:1px solid var(--rule);border-left:3px solid var(--brass);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-plate)}
.draftbar-in{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:16px 18px;flex-wrap:wrap}
.draftbar b{display:block;font-family:var(--display);font-weight:500;font-size:19px;margin:8px 0 4px;color:var(--ink)}
.draftbar .tag{vertical-align:middle}
.draftbar-note{display:block;font-size:14px;color:var(--ink-quiet);max-width:60ch;line-height:1.55}
.draftbar-list{margin:10px 0 0;padding:0 0 0 18px;font-size:13.5px;color:var(--claret);line-height:1.6}
.draftbar-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.draftbar-acts form{margin:0}

.own-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 20px;flex-wrap:wrap}
.own-head>.lbl{margin:0}
.sec.own>.own-head{margin-bottom:20px}
.pcard.own .own-head{margin-bottom:14px}

.edit{display:block}
.own-head .edit,.own-head .edit-btn{margin-left:auto}
.edit-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;cursor:pointer;
  font-family:var(--body);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-text);border:1px solid var(--rule);border-radius:999px;background:var(--ground-raised);
  text-decoration:none;transition:border-color var(--dur-quick) var(--ease-soft),color var(--dur-quick) var(--ease-soft);
  list-style:none;user-select:none}
.edit-btn::-webkit-details-marker{display:none}
.edit-btn:hover{border-color:var(--ink);color:var(--ink)}
.edit[open] .edit-btn{border-color:var(--ink);color:var(--ink)}
.edit-form{margin:14px 0 0;padding:18px;border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--ground-raised);max-width:var(--measure)}
.edit-form label.lbl{display:block;margin:0 0 8px}
.edit-form input,.edit-form textarea{width:100%;padding:13px 14px;font-family:var(--body);font-size:16px;
  color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:var(--radius-xs)}
.edit-form textarea{min-height:150px;line-height:1.6;resize:vertical}
.edit-form input:focus,.edit-form textarea:focus{outline:0;border-color:var(--ink-quiet)}
.edit-form .hint{font-size:13px;color:var(--ink-faint);margin:7px 0 0}
.edit-acts{margin-top:12px;display:flex;gap:10px}
.name-row.own{flex-wrap:wrap;align-items:center;gap:0 18px}
.name-row.own .edit{flex-basis:100%;margin-top:6px}
.name-row.own .edit-btn{margin-left:0}
.own-inline{margin:0 0 18px}
.own-inline .tagline{margin-bottom:8px}

.own-empty{margin:0;padding:22px 20px;border:1px dashed var(--rule-strong);border-radius:var(--radius-sm);
  color:var(--ink-faint);font-size:15px;line-height:1.6;max-width:var(--measure)}
.own-plate-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:20px;text-align:center;color:var(--ink-faint);font-family:var(--display);font-size:22px;
  border:1px dashed var(--rule-strong);border-radius:var(--radius-sm)}

.mod-badge{position:absolute;left:12px;top:12px;z-index:2;display:inline-block;padding:6px 10px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ground);
  background:color-mix(in srgb,var(--ink) 78%,transparent);border-radius:999px;pointer-events:none}
.mod-badge--no{background:color-mix(in srgb,var(--claret) 88%,transparent)}
.own-grid-meta .mod-badge,.update-time .mod-badge{position:static;color:var(--ink-faint);background:transparent;
  border:1px solid var(--rule);padding:4px 9px;margin-left:8px}

.own-tools{margin:22px 0 52px}
.own-upload{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.own-upload .hint{flex-basis:100%;font-size:13px;color:var(--ink-faint);margin:0}
.own-file{position:relative;overflow:hidden;cursor:pointer}
.own-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.own-manage{margin-top:14px}
.own-grid{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:560px){.own-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.own-grid{grid-template-columns:repeat(4,1fr)}}
.own-grid li{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--rule);
  border-radius:var(--radius-sm);background:var(--ground-raised)}
.own-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-xs)}
.own-grid-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px}
.own-grid-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.own-grid-acts form{margin:0}
.short .own-grid-meta{margin-top:8px}
body.owner .plate,body.owner .strip .shot{position:relative}
body.owner .actionbar{display:none}
body.owner #agegate{display:none}