/* Base: one card = 21.75rem (348px at 16px). 3 cards + 2 gaps = 1100px. Cards never exceed this size.
   3 cols (980px+) -> 2 cols (640-979px) -> 1 col (639px or less)
   Inside each stage the root font size shrinks from 16px to about 13px, scaling everything together. */
:root {
  --bg:#151515; --ink:#f2f2f2; --accent:#ff6600; --muted:#9a9fa4; --thumb:#262626;
  --pad:clamp(16px,3.5vw,54px);
  --gap:1.75rem; --card-w:21.75rem;
  --cols:3; --grid-rem:68.75; --site-w:1100px;
  --logo-h:3.6563rem; --nav-gap:1.625rem;
  --title:3.125rem; --about-top:6rem; --mail-gap:6.875rem; --mail-fs:1.625rem; --intro-fs:1.125rem;
}
html { font-size:min(16px, calc((100vw - 2*var(--pad)) / var(--grid-rem))); color-scheme:dark; overflow-y:scroll; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font:1rem/1.5 Helvetica,Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.site-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; max-width:calc(var(--site-w) + 2*var(--pad)); margin:0 auto; padding:4.375rem var(--pad) 1.875rem; }
.nav { display:flex; gap:var(--nav-gap); font-size:.875rem; text-transform:uppercase; }
.nav a[aria-current] { font-weight:700; }
.nav a:hover { color:var(--accent); }
.logo img { display:block; height:var(--logo-h); width:auto; }
.social { justify-self:end; display:flex; align-items:center; gap:1rem; }
.social a { display:flex; }
.social svg { width:1.25rem; height:1.25rem; }
.social a[aria-label="Ko-fi"] svg { width:1.635rem; height:1.635rem; stroke-width:1.5; transform:translateY(-.125rem); }
.social a:hover { color:var(--accent); }

.grid { display:grid; grid-template-columns:repeat(var(--cols),minmax(0,var(--card-w))); justify-content:center; gap:var(--gap); max-width:calc(var(--grid-rem) * 1rem + 2*var(--pad)); margin:0 auto; padding:3rem var(--pad) 5rem; }
.card { display:flex; flex-direction:column; aspect-ratio:3/4; overflow:hidden; }
.card .thumb { display:block; flex:none; width:100%; aspect-ratio:1/1; overflow:hidden; isolation:isolate; background:var(--thumb); border-radius:.5rem; }
.card .thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease-out; will-change:transform; }
a.card:hover .thumb img, a.card:focus-visible .thumb img { transform:scale(1.06); }
.card .text { flex:1; min-height:0; overflow:hidden; padding:.625rem .125rem 0; }
.card h2 { margin:0 0 .25rem; font-size:1.25rem; line-height:1.25; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card p { margin:0; font-size:.8125rem; line-height:1.35; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
a.card:hover h2 { color:var(--accent); }
.card.soon { opacity:.55; }
.card:focus-visible { outline-offset:-2px; }
.empty { grid-column:1/-1; color:var(--muted); }

.page-hello, .page-detail { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.about { flex:1; display:flex; flex-direction:column; text-align:center; padding:var(--about-top) var(--pad) 0; }
.about-title { margin:0 0 .875rem; font-size:var(--title); line-height:1.1; font-weight:700; color:var(--ink); }
.about-intro { max-width:44em; margin:0 auto; font-size:var(--intro-fs); font-weight:400; line-height:1.45; color:#8e8e8e; }
.about-intro p { margin:0; }
.about-mail { margin-top:var(--mail-gap); font-size:var(--mail-fs); font-weight:700; }
.about-mail a { border-bottom:1px solid currentColor; }
.about-mail a:hover { color:var(--accent); }

/* Plugin detail page */
.detail { flex:1; width:100%; max-width:calc(var(--site-w) + 2*var(--pad)); margin:0 auto; padding:var(--about-top) var(--pad) 5rem; text-align:center; }
.detail h1 { margin:0 0 .875rem; font-size:var(--title); line-height:1.1; font-weight:700; }
.detail .lead { margin:0; font-size:var(--intro-fs); line-height:1.45; color:#8e8e8e; }
.note { margin:2.5rem 0 0; font-size:.9375rem; color:var(--muted); }
.btn { display:inline-block; margin-top:2.25rem; padding:1rem 2.5rem; background:var(--ink); color:var(--bg); font-size:.9375rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:0; }
.btn:hover { background:var(--accent); }
.support { margin-top:4.5rem; padding:2.5rem 1.5rem; border:1px solid #2e2e2e; border-radius:.5rem; }
.support p { margin:0 0 1.5rem; font-size:var(--intro-fs); line-height:1.45; color:var(--muted); }
.dl-note { margin:1.125rem 0 0; font-size:.8125rem; line-height:1.5; color:var(--muted); }
.btn.btn-line { margin-top:0; background:transparent; color:var(--ink); border:1px solid #5a5a5a; }
.btn.btn-line:hover { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.shots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; margin-top:4.5rem; }
.shots img, .shots video { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:.5rem; background:var(--thumb); }

/* Ko-fi support box */
dialog.kofi { padding:0; border:1px solid #2e2e2e; border-radius:.5rem; background:var(--bg); color:var(--ink); width:min(92vw,420px); height:min(88vh,740px); height:min(88dvh,740px); overflow:hidden; }
dialog.kofi[open] { display:flex; flex-direction:column; }
dialog.kofi::backdrop { background:rgba(0,0,0,.65); }
.kofi-bar { display:flex; align-items:center; justify-content:space-between; padding:.5rem .5rem .5rem 1rem; font-size:.875rem; font-weight:700; }
.kofi-close { width:2.25rem; height:2.25rem; border:0; background:none; color:inherit; font-size:1.5rem; line-height:1; cursor:pointer; }
.kofi-close:hover { color:var(--accent); }
dialog.kofi iframe { flex:1; width:100%; border:0; background:#f9f9f9; color-scheme:light; }
.kofi-open { padding:.625rem 1rem; font-size:.8125rem; text-align:center; color:var(--muted); }
.kofi-open:hover { color:var(--accent); }

.license { text-align:center; width:100%; max-width:56em; margin:0 auto; }
.site-footer { padding:1.5rem var(--pad); font-size:.75rem; color:var(--muted); }

/* 2 columns */
@media (max-width:979px) {
  :root { --cols:2; --grid-rem:45.25; --logo-h:2.5875rem; --nav-gap:1.25rem; --title:2.5rem; --about-top:4rem; --mail-gap:4.5rem; --mail-fs:1.375rem; --intro-fs:1rem; }
}

/* 1 column */
@media (max-width:639px) {
  :root { --cols:1; --grid-rem:21.75; --logo-h:2.025rem; --title:2rem; --about-top:2.5rem; --mail-gap:3.5rem; --mail-fs:1.25rem; --intro-fs:.9375rem; }
  .site-header { grid-template-areas:". logo social" "nav nav nav"; row-gap:1.25rem; padding-top:3.75rem; padding-bottom:0; }
  .logo { grid-area:logo; }
  .social { grid-area:social; }
  .shots { grid-template-columns:1fr; max-width:530px; margin-left:auto; margin-right:auto; gap:24px; }
  .nav { grid-area:nav; justify-content:center; padding-bottom:1.5rem; }
}