/* THE CLEAN CARD (founder/835, 836, 2026-10-18): his screenshot of a Center card as its direction, "a clean design for the
   cards", "cards need to look different on simple vs popitmode", and "want to do banners on cards correctly". Drawn by
   OW.lcard (landing-cards.js) from the one renderer's parts (OW.cards), for the landing's decks and wherever the card is
   asked for. One anatomy in both modes:
     the banner   the account's own picture across the card's top, flush with its corners (none without a picture);
     the head     the face over the banner's lower edge, the name on one line, the handle small under it, a Center's
                  categories under that; with no banner, the face beside the name as Instagram sets it;
     the counts   one row, hairlines between, a number over its word;
     the about    the bio at the left with the platforms under it; a Center's details at the right, line by line, an icon
                  each, its place last;
     the acts     Follow filled in the account's hue and Message outlined, equal, at the card's foot.
   THE MATERIAL IS THE MODE'S. Pop-it: the card wears THE ONE POPIT SURFACE (oneway-popit.css, founder/822) through
   `.ow-popit::before`, nothing of it written here. Simple: the plain card, a flat ground and a hairline, no light.
   The shared tile's own rules are strong (projections, the header block), so the ones that must hold here say so. */
.lc.lc.lc{--lc-h:262;--lc-pad:18px;--lc-face:80px;
  --lc-ink:#fff;--lc-ink-2:rgba(255,255,255,.74);--lc-ink-3:rgba(255,255,255,.56);--lc-line:rgba(255,255,255,.13);
  --lc-ring:hsl(var(--lc-h) 34% 15%);
  box-sizing:border-box;width:100%;max-width:420px;margin:0 auto;padding:var(--lc-pad)!important;display:flex!important;flex-direction:column!important;
  border-radius:22px 19px 23px 20px!important;overflow:visible!important;color:var(--lc-ink);text-align:left;
  font-family:'ONEWAY Sans',system-ui,-apple-system,'Segoe UI',sans-serif;background:none!important;box-shadow:none!important;container-type:inline-size}
html[data-theme="light"] .lc.lc.lc{--lc-ink:#15131f;--lc-ink-2:rgba(21,19,31,.72);--lc-ink-3:rgba(21,19,31,.54);--lc-line:rgba(21,19,31,.11);--lc-ring:#f6f5fb}

/* THE BANNER: flush with the card's top and sides, its top corners the card's own */
.lc.lc.lc .lc-banner{display:block;position:relative;margin:calc(-1 * var(--lc-pad)) calc(-1 * var(--lc-pad)) 0;height:96px;height:max(96px,min(30cqw,140px));height:clamp(96px,30cqw,140px);border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden;background:hsl(var(--lc-h) 30% 22%)}
.lc.lc.lc .lc-banner img{display:block;width:100%;height:100%;object-fit:cover}
/* FADE (the account's choice for its profile, founder/824; "made sure we are supporting fading banners and they look good
   across all surfaces"): the picture melts into the card's own ground from its middle down, the face standing in the melt;
   Framed keeps its edge */
.lc.lc.lc[data-banner-style="fade"] .lc-banner{height:112px;height:max(112px,min(36cqw,160px));height:clamp(112px,36cqw,160px);background:none;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%)}

/* THE HEAD: the face beside the name block; over a banner the face rises half its height onto the banner's edge */
.lc.lc.lc .ow-ocard__top{display:grid!important;grid-template-columns:var(--lc-face) minmax(0,1fr)!important;grid-template-rows:none!important;
  grid-auto-rows:auto!important;column-gap:14px!important;row-gap:0!important;align-items:center!important;align-content:start!important;
  margin:0!important;padding:0!important;min-height:0!important;height:auto!important}
.lc.lc.lc .ow-ocard__top > .ow-ocard__face,.lc.lc.lc .ow-ocard__top > .ow-ocard__id{grid-row:1!important}
.lc.lc.lc .ow-ocard__face{width:var(--lc-face)!important;height:var(--lc-face)!important;margin:0!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;overflow:hidden!important;align-self:center!important;justify-self:start!important;transform:none!important;
  background:radial-gradient(75% 75% at 32% 22%,hsl(var(--lc-h) 85% 72%),hsl(var(--lc-h) 68% 42%))!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.16)!important;border:0!important}
.lc.lc.lc .ow-ocard__face i{font-style:normal!important;font-weight:800!important;font-size:27px!important;letter-spacing:-.02em!important;color:#fff!important;line-height:1!important}
.lc.lc.lc .ow-ocard__face img{width:100%;height:100%;object-fit:cover}
.lc.lc.lc .ow-ocard__face svg{display:none!important}
.lc.lc.lc[data-banner="1"] .ow-ocard__top{align-items:start!important}
/* THE TOP, GEOMETRIC: the face's centre on the banner's lower edge (Framed), its name beginning on that edge beside it; over a
   Fade the face rises further into the melt */
.lc.lc.lc[data-banner="1"]{--lc-face:84px}
.lc.lc.lc[data-banner="1"] .ow-ocard__face{margin-top:calc(var(--lc-face) / -2)!important;align-self:start!important;
  box-shadow:0 0 0 4px var(--lc-ring)!important}
.lc.lc.lc[data-banner="1"] .ow-ocard__id{padding-top:6px!important}
.lc.lc.lc[data-banner-style="fade"][data-banner="1"] .ow-ocard__face{margin-top:calc(var(--lc-face) * -.72)!important;box-shadow:0 0 0 1px rgba(255,255,255,.18)!important}
.lc.lc.lc[data-banner-style="fade"][data-banner="1"] .ow-ocard__id{padding-top:0!important;margin-top:calc(var(--lc-face) * -.22)!important}
.lc.lc.lc .ow-ocard__id{display:flex!important;flex-direction:column!important;min-width:0!important;align-items:flex-start!important;align-self:center!important;padding:0!important;min-height:0!important}
.lc.lc.lc .ow-ocard__id > *{align-self:auto!important;grid-area:auto!important;justify-self:auto!important}
.lc.lc.lc .ow-ocard__name{margin:0!important;padding:0!important;font-weight:750!important;font-size:19px!important;line-height:1.2!important;letter-spacing:-.01em!important;
  color:var(--lc-ink)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%;min-block-size:0!important;display:block!important}
.lc.lc.lc .ow-ocard__sub{font-weight:500!important;font-size:13.5px!important;line-height:1.35!important;color:var(--lc-ink-3)!important;margin-top:1px!important;opacity:1!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%}
.lc.lc.lc .lc-cat{display:block;margin-top:2px;font-size:13.5px;font-weight:550;line-height:1.3;color:var(--lc-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* THE COUNTS: one row, three equal cells, hairlines between, the number over its word */
.lc.lc.lc .lc-counts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:16px 0 0;padding:2px 0}
.lc.lc.lc .lc-counts .ow-ocard__count{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center;gap:1px;
  font-size:12.5px!important;font-weight:500!important;line-height:1.25!important;color:var(--lc-ink-3)!important;white-space:nowrap!important;letter-spacing:0!important;opacity:1!important}html.ow-nogap .lc.lc.lc .lc-counts .ow-ocard__count>*+*{margin-top:1px}
.lc.lc.lc .lc-counts .ow-ocard__count + .ow-ocard__count{border-left:1px solid var(--lc-line)}
.lc.lc.lc .lc-counts .ow-ocard__count b{font-weight:750!important;font-size:17px!important;line-height:1.2!important;color:var(--lc-ink)!important;letter-spacing:-.01em!important;font-variant-numeric:tabular-nums}

/* THE ABOUT ROW: the bio and the platforms at the left, a Center's details at the right, a hairline between */
.lc.lc.lc .lc-about{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px}
.lc.lc.lc .lc-about[data-cols="2"]{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:start}   /* the details the wider, so each line stays one */
.lc.lc.lc .lc-left{display:flex;flex-direction:column;gap:12px;min-width:0}html.ow-nogap .lc.lc.lc .lc-left>*+*{margin-top:12px}
.lc.lc.lc .ow-ocard__bio{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden!important;margin:0!important;width:auto!important;max-width:none!important;
  font-weight:500!important;font-size:14.5px!important;line-height:1.45!important;color:var(--lc-ink)!important;opacity:.94;text-wrap:pretty!important}
.lc.lc.lc .lc-about[data-cols="1"] .ow-ocard__bio{-webkit-line-clamp:3}
.lc.lc.lc .lc-about[data-cols="2"] .ow-ocard__bio{-webkit-line-clamp:6}   /* beside the details, as long as their column */
.lc.lc.lc .lc-facts{display:flex;flex-direction:column;gap:7px;min-width:0;padding-left:14px;border-left:1px solid var(--lc-line)}html.ow-nogap .lc.lc.lc .lc-facts>*+*{margin-top:7px}
.lc.lc.lc .lc-fact{display:flex;align-items:flex-start;gap:7px;min-width:0;font-size:12.5px;line-height:1.35;color:var(--lc-ink-2)}html.ow-nogap .lc.lc.lc .lc-fact>*+*{margin-left:7px}
.lc.lc.lc .lc-fact > span{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.lc.lc.lc .lc-fact > span > i{font-style:normal;font-weight:600;color:var(--lc-ink-3)}
.lc.lc.lc .lc-fact > span > b{font-weight:600;color:var(--lc-ink)}
.lc.lc.lc .lc-ic{flex:none;display:grid;place-items:center;width:15px;height:17px;font-style:normal;color:var(--lc-ink-3)}
.lc.lc.lc .lc-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lc.lc.lc .lc-fact--place .lc-ic{color:hsl(var(--lc-h) 80% 72%)}
html[data-theme="light"] .lc.lc.lc .lc-fact--place .lc-ic{color:hsl(var(--lc-h) 62% 42%)}
.lc.lc.lc .lc-where{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;line-height:1.35;color:var(--lc-ink-2)}html.ow-nogap .lc.lc.lc .lc-where>*+*{margin-left:6px}
/* the platforms: their own marks, in round outlined discs, one size, one gap */
.lc.lc.lc .ow-ocard__links{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:0!important;padding:0!important;width:auto!important;max-width:none!important}html.ow-nogap .lc.lc.lc .ow-ocard__links>*{margin-right:8px}html.ow-nogap .lc.lc.lc .ow-ocard__links>*{margin-bottom:8px}
.lc.lc.lc .ow-linkbar__i{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border-radius:50%!important;margin:0!important;
  background:transparent!important;box-shadow:inset 0 0 0 1px var(--lc-line)!important;pointer-events:none}
.lc.lc.lc .ow-linkbar__i svg,.lc.lc.lc .ow-linkbar__i[data-platform] svg{width:17px!important;height:17px!important}
/* THE PLATFORMS, ONE STRAIGHT LINE (the founder, 2026-10-19: "cards do not stop at 4 icons then go down to next row but should be
   straight clean line on profile and card"): never a second line. Past four the marks step down a size; past what the line
   holds it scrolls sideways, the edge fading only where there is more (OW.cards.lineMarks says data-n, data-overflow, data-at) */
.lc.lc.lc .ow-ocard__links{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;overscroll-behavior-x:contain;min-width:0}
.lc.lc.lc .ow-ocard__links::-webkit-scrollbar{display:none}
.lc.lc.lc .ow-ocard__links > .ow-linkbar__i{flex:none!important}
.lc.lc.lc .ow-ocard__links:not([data-n="1"]):not([data-n="2"]):not([data-n="3"]):not([data-n="4"]){gap:6px!important}
.lc.lc.lc .ow-ocard__links:not([data-n="1"]):not([data-n="2"]):not([data-n="3"]):not([data-n="4"]) > .ow-linkbar__i{width:28px!important;height:28px!important}
.lc.lc.lc .ow-ocard__links:not([data-n="1"]):not([data-n="2"]):not([data-n="3"]):not([data-n="4"]) > .ow-linkbar__i svg{width:15px!important;height:15px!important}
.lc.lc.lc .ow-ocard__links[data-at="start"]{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
.lc.lc.lc .ow-ocard__links[data-at="middle"]{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.lc.lc.lc .ow-ocard__links[data-at="end"]{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%)}
/* a phone's card gives its details the wider column and a step smaller type, so each stays one line where it can */
@container (max-width:380px){
  .lc.lc.lc .lc-about[data-cols="2"]{gap:12px}
  .lc.lc.lc .lc-facts{padding-left:12px}
  .lc.lc.lc .lc-fact{font-size:12px;gap:6px}
  .lc.lc.lc .ow-ocard__bio{font-size:14px!important}
}
/* a narrow card stacks its details under the bio */
@container (max-width:300px){
  .lc.lc.lc .lc-about[data-cols="2"]{grid-template-columns:minmax(0,1fr)}
  .lc.lc.lc .lc-facts{padding:12px 0 0;border-left:0;border-top:1px solid var(--lc-line)}
}

/* FOLLOW AND MESSAGE: the one button language (S20), equal, at the card's foot: Follow filled in the account's hue, Message
   outlined */
.lc.lc.lc .lc-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:18px}
.lc.lc.lc .lc-acts span{display:flex;align-items:center;justify-content:center;height:40px;border-radius:999px;font-weight:650;font-size:14px;line-height:1;cursor:default;user-select:none}
.lc.lc.lc .lc-acts .lc-follow{background:linear-gradient(135deg,hsl(var(--lc-h) 90% 66%),hsl(calc(var(--lc-h) - 24) 88% 58%));color:#0b0a12}
.lc.lc.lc[data-ink="light"] .lc-acts .lc-follow{background:linear-gradient(135deg,hsl(var(--lc-h) 74% 56%),hsl(calc(var(--lc-h) - 24) 72% 48%));color:#fff}
.lc.lc.lc .lc-acts .lc-msg{box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc-ink) 34%,transparent);color:var(--lc-ink);background:transparent}

/* TIKTOK'S LAYOUT: the picture over everything, every line centred */
.lc.lc.lc[data-layout="above"] .ow-ocard__top{grid-template-columns:1fr!important;justify-items:center!important;row-gap:10px!important;text-align:center!important}
.lc.lc.lc[data-layout="above"] .ow-ocard__top > .ow-ocard__id{grid-row:2!important;align-items:center!important}
.lc.lc.lc[data-layout="above"] .ow-ocard__face{justify-self:center!important}
.lc.lc.lc[data-layout="above"] .ow-ocard__id > *{align-self:center!important}
.lc.lc.lc[data-layout="above"][data-banner="1"] .ow-ocard__id{padding-top:0!important}

/* SIMPLE MODE: the plain card, Simple's own feed surface (oneway-popit.css "27 · SIMPLE MODE", .po-river): the ground with 3%
   of the account's own hue, a hairline edge, the feed's corners; no light, no grain, no grey (founder, 2026-10-19: "the darker
   tones might have to be a little bit blacker. I don't know if gray cards really work"). The same anatomy as Pop-it. */
html[data-simple="1"] .lc.lc.lc{--lc-ring:color-mix(in srgb,var(--ow-ground,#000) 97%,rgb(var(--h)) 3%);border-radius:24px!important;background:var(--ow-ground,#000)!important;background:color-mix(in srgb,var(--ow-ground,#000) 97%,rgb(var(--h)) 3%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ow-ink,#fff) 10%,transparent)!important}
html[data-simple="1"] .lc.lc.lc::before,html[data-simple="1"] .lc.lc.lc::after{display:none!important}
html[data-simple="1"] .lc.lc.lc .lc-banner{border-top-left-radius:24px;border-top-right-radius:24px}
html[data-simple="1"] .lc.lc.lc .ow-ocard__face{background:hsl(var(--lc-h) 58% 46%)!important}
html[data-simple="1"] .lc.lc.lc .lc-acts .lc-follow,html[data-simple="1"] .lc.lc.lc[data-ink="light"] .lc-acts .lc-follow{background:hsl(var(--lc-h) 70% 50%);color:#fff}

/* in a deck the cards stand behind each other (oneway-deck.css .pcard), never one after another */
.lc.lc.lc.pcard{position:absolute!important;left:0;right:0;top:0}
.lc.lc.lc:not(.pcard){position:relative}
/* A DECK THAT FITS ITS FRONT CARD (oneway-deck.js opts.fit): the cards behind fade out instead of peeking, since a taller
   card behind would show under a shorter one; the faces under the deck choose which stands in front */
.deck .lc.lc.lc.pcard:not([data-at="0"]){opacity:0!important;transform:none!important;filter:none!important;pointer-events:none}
.deck .lc.lc.lc.pcard{transition:opacity .35s ease!important}