/* Buicha.com: Monochrome theme, responsive card UX */
:root{
  --bg: #ffffff;
  --fg: #111827;
  --muted: #6b7280;
  --card: #ffffff;
  --accent: #111827;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(0,0,0,0.06);
  --card-width: 320px;
  --card-gap: 20px;
  --image-aspect: 16/9;
  --transition-fast: .12s;
  --transition-medium: .18s;
  --focus-ring: 3px solid rgba(37,99,235,.22);
}
*{box-sizing:border-box}
/* accessible skip link shown on focus */
.skiplink{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skiplink:focus{left:12px;top:12px;width:auto;height:auto;padding:8px 12px;background:var(--card);border-radius:8px;box-shadow:var(--shadow);color:var(--fg);z-index:9999}

/* screen-reader only utility */
.sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}
/* Animation: subtle appear-up for cards */
@keyframes appearUp {
  from { opacity: 0; transform: translateY(8px) scale(.998); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #050505;
    --fg: #f8fafc;
    --muted: #9ca3af;
    --card: #0f1724;
    --accent: #f8fafc;
    --shadow: 0 4px 16px rgba(0,0,0,0.5);
  }
}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", Meiryo, "Hiragino Kaku Gothic ProN";
  -webkit-font-smoothing:antialiased;
}
/* Wrap */
.wrap{display:flex;flex-direction:column;gap:20px;align-items:center;max-width:1200px;padding:28px;margin:0 auto;min-height:100vh;justify-content:center}
.header{text-align:center}
.header h1{font-size:20px;margin:0}
.header p{margin:8px 0 0;color:var(--muted);font-size:14px}

/* Grid */
.og-grid{display:flex;gap:var(--card-gap);flex-wrap:wrap;align-items:stretch;justify-content:center;width:100%;}
/* Card */
.og-card{background:var(--card);width:var(--card-width);display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(0,0,0,0.06);box-shadow:var(--shadow);transition:transform var(--transition-medium) cubic-bezier(.2,.8,.2,1), box-shadow var(--transition-medium) cubic-bezier(.2,.8,.2,1); text-decoration:none; animation: appearUp .42s ease both;}
.og-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 34px rgba(0,0,0,0.09)}
.og-card:focus{outline:var(--focus-ring); outline-offset:3px}
.og-card .og-img{width:100%;height:auto;aspect-ratio:var(--image-aspect);object-fit:cover;filter:grayscale(100%) contrast(.95);background:#f3f4f6;display:block;transition:filter var(--transition-medium) ease, opacity var(--transition-medium) ease}
/* image loading placeholder + shimmer */
.og-img.loading{filter:grayscale(100%) blur(2px) contrast(.9);opacity:0}
.og-img:not(.loading){opacity:1}
.og-img.skeleton{background: linear-gradient(90deg, #f3f4f6 0%, #e9eef5 30%, #f3f4f6 60%); background-size:200% 100%; animation: shimmer 1.6s linear infinite}
@keyframes shimmer { from { background-position: -140% 0; } to { background-position: 140% 0; }}
.og-card .og-body{padding:12px;display:flex;flex-direction:column;gap:6px}
.og-title{font-weight:600;font-size:16px;line-height:1.2}
.og-desc{font-size:13px;color:var(--muted);line-height:1.35;max-height:4.05em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.og-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.cta{background:var(--accent);color:var(--card);padding:8px 12px;border-radius:10px;border:0;cursor:pointer;font-weight:600}
.cta:hover{filter:brightness(.95);transform:translateY(-1px)}
.cta:focus-visible{outline:var(--focus-ring)}
.secondary{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--accent);padding:6px 10px;border-radius:10px}
.link{background:transparent;border:none;color:var(--accent);cursor:pointer;text-decoration:underline;padding:6px 8px;border-radius:8px}
.link:focus{outline:3px solid rgba(0,0,0,0.12)}

/* clickable card styling to remove default anchor decoration */
.card-link{display:block;color:inherit;cursor:pointer}
.card-link:focus-visible{outline:var(--focus-ring);border-radius:var(--radius)}

/* Responsive */
@media (max-width:900px){
  .og-card{width:calc(50% - var(--card-gap));min-width:240px}
}
@media (max-width:680px){
  .wrap{padding:18px}
  .og-card{width:100%;max-width:720px}
  .og-card .og-img{aspect-ratio:calc(var(--image-aspect));height:auto}
}

/* small message */
#msg{font-size:13px;color:var(--muted);text-align:center}

/* Reset minor defaults and keep everything monochrome */
a{color:inherit}
button.link{background:transparent}
/* utility */
.text-muted{color:var(--muted);}

/* accessibility enhancements */
.og-card[aria-label]:hover{cursor:pointer}

/* selected state for keyboard or preferred choice */
.og-card[data-selected="true"]{outline: 3px solid rgba(34,197,94,.14); box-shadow:0 10px 28px rgba(34,197,94,.06); transform: translateY(-2px)}

/* High contrast toggle support */
html.hc{
  --bg: #000000;
  --fg: #ffffff;
  --muted: #cfcfcf;
  --card: #000000;
  --accent: #fff200;
}
html.hc .og-img{filter: none; border-bottom: 4px solid var(--accent);} 
html.hc .og-card{background: #111; color: var(--fg);}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .og-card{transition:none; animation:none}
}