:root { --bg:#ffffff; --soft:#f5f6f8; --text:#101623; --dim:#5b6472;
        --line:#e6e8ee; --accent:#0d9488; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font:17px/1.65 -apple-system,
       BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
header { position:sticky; top:0; background:rgba(255,255,255,.92);
       backdrop-filter:blur(10px); border-bottom:1px solid var(--line); z-index:9; }
header .wrap { display:flex; align-items:center; justify-content:space-between;
       padding-top:16px; padding-bottom:16px; }
.logo { font-weight:800; letter-spacing:.16em; color:var(--text); font-size:15px; }
.logo span { color:var(--accent); }
nav a { color:var(--dim); margin-left:24px; font-size:15px; font-weight:500; }
nav a:hover { color:var(--text); text-decoration:none; }
.hero { text-align:center; padding:72px 0 30px; }
.hero h1 { font-size:clamp(30px,5vw,52px); line-height:1.12; font-weight:800;
       letter-spacing:-0.02em; }
.hero p.sub { color:var(--dim); max-width:600px; margin:20px auto 0; font-size:19px; }
.thumbrow { display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
       margin:40px 0 8px; }
.thumbrow img { width:76px; height:76px; transition:transform .2s; }
.thumbrow a:hover img { transform:scale(1.12); }
.newtag { display:inline-block; background:var(--accent); color:#fff;
       font-size:12.5px; font-weight:700; letter-spacing:.03em;
       padding:4px 11px; border-radius:999px; }
/* collections */
.coll { padding:44px 0 0; scroll-margin-top:78px; }
.coll h2 { font-size:26px; letter-spacing:-0.01em; }
.coll .banners { padding:16px 0 0; }
.coll.sibs { padding-top:40px; }
.coll.sibs h2 { font-size:22px; text-align:center; }
/* banner cards */
.banners { display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:36px 0 8px; }
.bcard { display:block; border-radius:22px; overflow:hidden; position:relative;
       box-shadow:0 6px 24px rgba(16,22,35,.10); transition:transform .25s,
       box-shadow .25s; background:#0b0e13; }
.bcard:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(16,22,35,.16);
       text-decoration:none; }
.bcard img { display:block; width:100%; aspect-ratio:2/1; object-fit:cover; }
.bcard .bmeta { position:absolute; right:0; bottom:0; padding:26px 20px 12px 40px;
       background:linear-gradient(to left, rgba(5,8,14,.55), transparent);
       font-size:15px; opacity:0; transition:opacity .25s; }
.bcard:hover .bmeta { opacity:1; }
.bcard .bmeta span { color:#fff; font-weight:600; white-space:nowrap; }
.trust { text-align:center; color:var(--dim); font-size:15px;
       background:var(--soft); border-radius:16px; padding:18px 26px;
       margin:34px 0; }
.olds { padding:14px 0 26px; }
.olds h3 { text-align:center; font-size:22px; letter-spacing:-0.01em; }
.olds > p { text-align:center; color:var(--dim); font-size:15px; max-width:560px;
       margin:10px auto 24px; }
.bcard .bname { position:absolute; left:0; bottom:0; padding:22px 18px 10px 18px;
       background:linear-gradient(to top, rgba(5,8,14,.6), transparent);
       color:#fff; font-weight:700; font-size:16px; right:0; }
.bcard .newtag { position:absolute; top:14px; left:14px;
       box-shadow:0 2px 8px rgba(5,8,14,.35); }
.bcard .freetag { position:absolute; top:12px; right:12px; background:#16a34a;
       color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.03em;
       padding:4px 11px; border-radius:999px;
       box-shadow:0 2px 8px rgba(5,8,14,.35); }
.oldgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
       gap:12px; }
.oldcard { display:block; background:var(--soft); border-radius:14px;
       padding:14px 16px; color:var(--text); font-size:14px;
       transition:background .15s; }
.oldcard:hover { background:#eceef2; text-decoration:none; }
.oldcard b { display:block; font-size:15px; }
.oldcard span { color:var(--dim); }
.signup { text-align:center; padding:26px 0 30px; }
.signup h3 { font-size:22px; margin-bottom:8px; letter-spacing:-0.01em; }
.signup p { color:var(--dim); font-size:15px; }
footer { color:var(--dim); font-size:14px; padding:30px 0 46px; text-align:center;
       border-top:1px solid var(--line); margin-top:26px; }
footer p { margin-top:6px; }
footer a { color:var(--dim); text-decoration:underline; }
/* face pages */
.back { display:inline-block; margin:24px 0 0; color:var(--dim); font-size:14px;
       font-weight:500; }
.facehero { border-radius:22px; overflow:hidden; margin-top:18px;
       box-shadow:0 10px 30px rgba(16,22,35,.14); }
.facehero img { display:block; width:100%; }
.face-head { text-align:center; padding:40px 0 6px; }
.face-head h1 { font-size:clamp(28px,4.5vw,42px); letter-spacing:-0.02em; }
.face-head p.tag { color:var(--dim); max-width:620px; margin:12px auto 0;
       font-size:18px; }
.shots { display:flex; justify-content:center; gap:26px; flex-wrap:wrap;
       padding:34px 0 4px; }
.shots figure { text-align:center; }
.shots img { width:190px; height:190px; border-radius:50%; object-fit:cover;
       box-shadow:0 8px 22px rgba(16,22,35,.18); background:#000; }
.shots.square img { width:auto; height:230px; border-radius:16px; background:none; }
.shots figcaption { color:var(--dim); font-size:13.5px; margin-top:12px; }
.body { max-width:660px; margin:0 auto; padding:26px 0 4px; }
.body p.intro { font-size:18.5px; }
.body ul { margin:22px 0 0 2px; list-style:none; }
.body li { margin-bottom:12px; padding-left:26px; position:relative; }
.body li::before { content:""; position:absolute; left:0; top:9px; width:9px;
       height:9px; border-radius:3px; background:var(--accent); }
.body li b { color:var(--accent); font-weight:650; }
.body h2 { font-size:22px; margin:10px 0 4px; letter-spacing:-0.01em; }
.body h3 { font-size:17.5px; margin:20px 0 6px; }
.body h3 + p { margin:0; }
.body p b { color:var(--accent); font-weight:650; }
.meta { color:var(--dim); font-size:15px; max-width:680px; margin:14px auto 0;
       text-align:center; }
.cta { text-align:center; padding:30px 0 14px; }
.cta .btn { display:inline-block; background:var(--accent); color:#fff;
       font-weight:700; padding:15px 34px; border-radius:14px; font-size:17px;
       box-shadow:0 6px 18px rgba(16,22,35,.18); transition:transform .15s; }
.cta a.btn:hover { text-decoration:none; transform:translateY(-2px);
       filter:brightness(1.06); }
.cta p { color:var(--dim); font-size:14px; margin-top:14px; }
.cta .btn.soon { background:var(--soft); color:var(--dim); box-shadow:none;
       border:1px solid var(--line); cursor:default; }
.coll.sibs { padding-top:34px; }
.coll.sibs h2 { font-size:22px; text-align:center; margin-bottom:20px; }
.minirow { display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
       padding:30px 0 44px; }
.minirow a img { width:58px; height:58px; transition:transform .2s; }
.minirow a:hover img { transform:scale(1.15); }
.video { text-align:center; padding:30px 0 10px; }
.video h2 { font-size:22px; margin-bottom:20px; letter-spacing:-0.01em; }
.vframe { width:min(420px,88vw); aspect-ratio:1/1; margin:0 auto;
       border-radius:20px; overflow:hidden;
       box-shadow:0 10px 28px rgba(16,22,35,.16); }
.vframe iframe { width:100%; height:100%; border:0; display:block; }
.quotes { padding:26px 0 6px; }
.quotes h2 { text-align:center; font-size:22px; margin-bottom:20px;
       letter-spacing:-0.01em; }
.qgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
       gap:18px; max-width:960px; margin:0 auto; }
.q { background:var(--soft); border-radius:16px; padding:20px 22px; }
.q blockquote { font-size:15.5px; }
.q blockquote::before { content:"“"; color:var(--accent); font-size:26px;
       line-height:0; margin-right:2px; }
.q figcaption { color:var(--dim); font-size:13px; margin-top:10px; }
.prose { max-width:720px; margin:0 auto; padding:30px 0 44px; }
.prose code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
       background:#f1f3f7; border:1px solid #e3e6ec; border-radius:4px; padding:1px 5px; }
.prose pre { margin:18px 0; padding:14px 18px; background:#1f2430; color:#e6e9ef; border-radius:6px;
       font-size:13.5px; line-height:1.55; overflow-x:auto; }
.prose pre code { font-size:inherit; background:none; border:0; padding:0; white-space:pre; }
.prose .tw pre { margin:0; }
.prose h1 { font-size:34px; margin:26px 0 12px; letter-spacing:-0.02em; }
.prose h2 { font-size:23px; margin:28px 0 8px; }
.prose p, .prose li { color:var(--text); margin-bottom:12px; }
.prose ul { margin-left:20px; }
.tw { overflow-x:auto; margin:16px 0; }
@media (min-width:1000px) { .prose .tw.wide { margin-left:-80px; margin-right:-80px; } }
.prose table { border-collapse:collapse; font-size:14.5px; font-variant-numeric:tabular-nums; width:100%; }
.prose .tw.wide table { min-width:860px; table-layout:fixed; }
.prose td code, .prose th code { white-space:normal; overflow-wrap:anywhere; }
.prose th, .prose td { border:1px solid #c9ceda; padding:6px 10px; text-align:left; vertical-align:top; line-height:1.35; }
.prose th { background:#f3f5f9; font-weight:600; }
.prose th.n, .prose td.n { text-align:right; }
@media (max-width:760px){
  .banners { grid-template-columns:1fr; }
  .coll h2 { font-size:21px; }
  .shots { gap:16px; }
  .shots img { width:150px; height:150px; }
  .shots.square img { height:180px; }
}