/* /about: the "About the team" page (2026-10-08). Own file so the shared
   stylesheets stay untouched. Built on the 2026-10 token layer in app.css
   (--r-*, --s-*, the --accent family, --elev-*, --focus-ring, --mono), the
   same layer /for-brands uses. Icons are Phosphor, painted through a CSS mask
   from a --i custom property. No images beyond the masthead wordmark, so
   nothing can shift the layout after first paint. */

.ab-page{padding-top:var(--s-5);padding-bottom:var(--s-7)}
.ab-ico{display:inline-block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ab-badge{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-md);background:color-mix(in srgb,var(--tone,var(--accent)) 13%,transparent);color:var(--tone,var(--accent))}
.ab-badge .ab-ico{width:22px;height:22px}
.ab-page a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}

/* ---- hero ---- */
.ab-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:var(--s-6);align-items:center;padding:var(--s-7) var(--s-7);border:1px solid var(--accent-line);border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 120% at 100% 0,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),radial-gradient(70% 90% at 0 100%,color-mix(in srgb,var(--blue) 7%,transparent),transparent 60%),var(--pane);box-shadow:var(--elev-2)}
/* A faint data grid, fading out toward the copy: the "techy" texture, no image. */
.ab-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px);
  background-size:28px 28px;-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 85%);mask-image:linear-gradient(100deg,transparent 35%,#000 85%)}
.ab-eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);padding:5px 12px 5px 10px;border:1px solid var(--accent-line);border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent) 8%,var(--pane));font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--accent)}
.ab-eyebrow .ab-ico{width:16px;height:16px}
.ab-hero h1{margin:0 0 var(--s-4);max-width:15ch;font-size:clamp(32px,4.6vw,52px);font-weight:800;line-height:1.06;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.ab-hero h1 em{font-style:normal;color:var(--accent)}
.ab-lede{margin:0 0 var(--s-5);max-width:54ch;font-size:17px;line-height:1.65;color:var(--ink-2)}
.ab-lede strong{color:var(--ink);font-weight:650}
.ab-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.ab-actions .btn{min-height:46px;padding:12px 20px;font-size:14px}
.ab-actions .btn .ab-ico{width:18px;height:18px}

/* The edition card: what goes into each day, as a small spec sheet. */
.ab-edition{margin:0;padding:var(--s-5);border:1px solid var(--accent-line);border-radius:var(--r-lg);background:color-mix(in srgb,var(--paper) 45%,var(--pane));box-shadow:var(--elev-3)}
:root:not([data-theme="light"]) .ab-edition{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),var(--elev-3)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .ab-edition{box-shadow:var(--elev-3)}}
.ab-edition-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-4);padding-bottom:var(--s-3);border-bottom:1px dashed var(--rule);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-3)}
.ab-edition-head strong{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:700}
.ab-live{width:8px;height:8px;border-radius:50%;background:var(--confirm);box-shadow:0 0 0 4px color-mix(in srgb,var(--confirm) 18%,transparent)}
.ab-edition ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.ab-edition li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--pane)}
.ab-edition li .ab-badge{width:38px;height:38px;border-radius:var(--r-sm)}
.ab-edition li .ab-badge .ab-ico{width:20px;height:20px}
.ab-edition li span:last-child{display:grid;gap:1px;min-width:0}
.ab-edition li strong{font-size:14px;font-weight:700;color:var(--ink)}
.ab-edition li small{font-size:13px;line-height:1.4;color:var(--ink-2)}
.ab-edition figcaption{margin:var(--s-4) 0 0;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink-3)}

/* ---- sections ---- */
.ab-section{margin:var(--s-8) 0 0;scroll-margin-top:calc(var(--mast-h) + var(--s-4))}
.ab-head{display:grid;gap:var(--s-2);max-width:720px;margin:0 0 var(--s-5)}
.ab-kicker{margin:0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--accent)}
.ab-section h2{margin:0;font-size:clamp(24px,2.6vw,30px);font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--ink)}
.ab-head p:not(.ab-kicker){margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.ab-section p a,.ab-section li a,.ab-note a{color:var(--accent);font-weight:600;text-underline-offset:3px}
.ab-card{position:relative;display:grid;align-content:start;gap:var(--s-3);padding:var(--s-5);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--pane);box-shadow:var(--elev-1)}
.ab-card h3{margin:0;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.ab-card p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.ab-card p+p{margin-top:calc(var(--s-1) * -1)}

/* Who's behind it: story on the left, independence statement on the right. */
.ab-team{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-6);align-items:start}
.ab-team .ab-head{margin:0}
.ab-team-copy p:not(.ab-kicker){font-size:17px;line-height:1.7;color:var(--ink-2)}
.ab-team-copy p strong{color:var(--ink);font-weight:650}
.ab-indep{border-color:var(--accent-line);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 9%,var(--pane)),var(--pane) 70%)}
.ab-indep h3{display:flex;align-items:center;gap:var(--s-3)}
.ab-indep .ab-fine{font-size:13px;color:var(--ink-3)}

/* Where the data comes from. */
.ab-sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.ab-source-tag{justify-self:start;padding:3px 10px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--tone,var(--accent)) 12%,transparent);font-family:var(--mono);font-size:12px;font-weight:600;color:color-mix(in srgb,var(--tone,var(--accent)) 72%,var(--ink))}
.ab-tone-pay{--tone:var(--tone-pay)}.ab-tone-video{--tone:var(--tone-posts)}.ab-tone-private{--tone:var(--tone-money)}.ab-tone-creators{--tone:var(--tone-creators)}
.ab-note{max-width:none;display:flex;align-items:flex-start;gap:var(--s-3);margin:var(--s-4) 0 0;padding:var(--s-4) var(--s-5);border:1px dashed var(--accent-line);border-radius:var(--r-md);font-size:15px;line-height:1.6;color:var(--ink-2)}
.ab-note .ab-ico{margin-top:2px;color:var(--accent)}
.ab-note strong{color:var(--ink);font-weight:650}

/* What we never do. */
.ab-never{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.ab-never li{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--pane);font-size:15px;line-height:1.55;color:var(--ink-2)}
.ab-never li strong{color:var(--ink);font-weight:650}
.ab-never .ab-no{display:grid;place-items:center;flex:none;width:26px;height:26px;margin-top:-1px;border-radius:50%;background:color-mix(in srgb,var(--strike) 13%,transparent);color:var(--strike)}
.ab-never .ab-no .ab-ico{width:14px;height:14px}
.ab-after{margin:var(--s-4) 0 0;font-size:15px;line-height:1.6;color:var(--ink-2)}

/* Principles. */
.ab-principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);counter-reset:pr}
.ab-principles .ab-card{counter-increment:pr}
.ab-principles .ab-card::after{content:"0" counter(pr);position:absolute;top:var(--s-5);right:var(--s-5);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-3)}

/* How to read the numbers: a compact two-column reference. */
.ab-method{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.ab-method .ab-card{scroll-margin-top:calc(var(--mast-h) + var(--s-4))}
.ab-method .ab-card:target{border-color:var(--accent);box-shadow:var(--focus-ring)}
.ab-method ul{margin:0;padding-left:20px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.ab-method li{margin:0 0 6px;padding-left:2px}
.ab-method li::marker{color:var(--accent)}
.ab-method .ab-wide{grid-column:1/-1}

/* Contact. */
.ab-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.ab-link-card{display:flex;align-items:flex-start;gap:var(--s-4);min-height:44px;padding:var(--s-5);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--pane);box-shadow:var(--elev-1);color:var(--ink);text-decoration:none;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s}
.ab-link-card>span:nth-child(2){display:grid;gap:4px;min-width:0;flex:1}
.ab-link-card strong{font-size:16px;font-weight:700;line-height:1.3}
.ab-link-card small{font-size:14px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.ab-link-card .ab-go{flex:none;align-self:center;width:18px;height:18px;color:var(--ink-3);transition:transform .2s var(--ease-out),color .2s}
.ab-tone-discord{--tone:#5865F2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ab-tone-discord{--tone:#8f98ff}}
:root[data-theme="dark"] .ab-tone-discord{--tone:#8f98ff}
@media (hover:hover) and (pointer:fine){
  .ab-link-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 35%,var(--rule));box-shadow:var(--glow)}
  .ab-link-card:hover .ab-go{transform:translateX(3px);color:var(--accent)}
}
.ab-more{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-5) 0 0;padding:0;list-style:none}
.ab-more a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border:1px solid var(--accent-line);border-radius:var(--r-pill);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.ab-more a .ab-ico{width:18px;height:18px;color:var(--accent)}
.ab-more a:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* ---- responsive ---- */
@media (max-width:1100px){
  .ab-principles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-contact{grid-template-columns:1fr}
}
@media (max-width:900px){
  .ab-hero{grid-template-columns:1fr;padding:var(--s-6) var(--s-5)}
  .ab-hero::before{-webkit-mask-image:linear-gradient(180deg,transparent 40%,#000 100%);mask-image:linear-gradient(180deg,transparent 40%,#000 100%)}
  .ab-team,.ab-sources,.ab-method{grid-template-columns:1fr}
  .ab-never{grid-template-columns:1fr}
  .ab-section{margin-top:var(--s-7)}
}
@media (max-width:560px){
  .ab-page{padding-top:var(--s-3)}
  .ab-hero{padding:var(--s-5) var(--s-4);border-radius:var(--r-md)}
  .ab-lede,.ab-team-copy p:not(.ab-kicker){font-size:16px}
  .ab-actions .btn{flex:1 1 100%}
  .ab-edition{padding:var(--s-4)}
  .ab-principles{grid-template-columns:1fr}
  .ab-card,.ab-link-card{padding:var(--s-4)}
  .ab-note{padding:var(--s-4)}
}
@media (prefers-reduced-motion:reduce){
  .ab-link-card,.ab-link-card .ab-go,.ab-more a{transition:none}
  .ab-link-card:hover,.ab-link-card:hover .ab-go{transform:none}
}