/* famarc.css — clean docs/blog style, zero JS */
:root{
  --bg:#ffffff;
  --fg:#0b1320;
  --muted:#445266;
  --surface:#f5f7fa;
  --border:#e3e8ef;
  --link:#1b6ee0;
  --link-contrast:#ffffff;
  --radius:14px;
  --container:1120px;
  --fs-sm:clamp(14px, 1.6vw, 16px);
  --fs-md:clamp(17px, 1.9vw, 18px);
  --fs-lg:clamp(20px, 2.4vw, 24px);
  --fs-xl:clamp(28px, 4.3vw, 38px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif;
  line-height:1.65;font-size:var(--fs-md);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;
}












.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,2.5vw,22px)}
.card h2{margin:0 0 6px;font-size:var(--fs-lg)} .card p{margin:0 0 10px}
.list{margin:0;padding-left:20px} .list li{margin:4px 0}




a{color:var(--link)} a:focus{outline:3px solid var(--link);outline-offset:2px}


















.tile{
  margin:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.tile-link{
  display:block;
  line-height:0; /* remove gap under img inline-block */
}
.tile img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 16 / 10; /* helps layout while loading */
  object-fit: cover;
}
.tile-cap{
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cap-title{ font-weight:700; }
.cap-meta{ color:var(--muted); font-size:var(--fs-sm); }














































.tile{ width:320px; margin:0; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.tile-link{ display:block; line-height:0; text-decoration:none; color:inherit; }

.tile img{
  width:320px; height:240px; display:block; object-fit:cover; background:#000;
}




.tile{ width:320px; margin:0; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.tile-link{ display:block; line-height:0; text-decoration:none; color:inherit; }
.tile img{ width:320px; height:240px; display:block; object-fit:cover; background:#000; }