/* カテゴリページ(category.html)のインライン<style>を抽出したもの。static build 用。 */
/* archive hero */
.archead{ position:relative; background:radial-gradient(110% 100% at 86% -10%, rgba(47,230,255,.12), transparent 55%), var(--blue); color:#fff; padding:40px 0 0; }
.archead::before{ content:""; position:absolute; inset:0; left:50%; transform:translateX(-50%); width:100vw; background:var(--blue); z-index:0; }
.archead > .wrap{ position:relative; z-index:1; }
.archead .crumb, .archead .crumb a{ color:rgba(255,255,255,.6); }
.archead .crumb .cur{ color:#fff; }
.archead .crumb .sep{ color:rgba(255,255,255,.32); }
.archead .kind{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--acid); margin:26px 0 14px; }
.archead h1{ font-family:var(--disp); font-weight:400; font-size:clamp(60px,11vw,150px); line-height:.86; letter-spacing:.01em; margin:0; color:#fff; }
.archead h1 .dot{ color:var(--acid); }
.archead .jp{ font-family:var(--head); font-weight:700; font-size:clamp(18px,2.4vw,26px); margin:14px 0 0; color:#fff; }
.archead .desc{ max-width:60ch; font-size:15.5px; line-height:1.95; color:rgba(255,255,255,.78); margin:16px 0 0; }
.archead .stat{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.6); display:flex; gap:24px; margin:24px 0 0; }
.archead .stat b{ color:var(--acid); font-weight:700; }

/* term switcher rail */
.terms{ position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap; padding:34px 0 38px; }
.terms a{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-decoration:none; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); border-radius:100px; padding:10px 18px; transition:.2s; display:flex; align-items:center; gap:9px; cursor:pointer; }
.terms a:hover{ border-color:#fff; color:#fff; }
.terms a.on{ background:var(--acid); border-color:var(--acid); color:#0b0b0d; font-weight:700; }
.terms a .n{ opacity:.6; font-size:11px; }
.terms a.on .n{ opacity:.7; }

/* sort bar */
.sortbar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sortbar .in{ max-width:var(--maxw); margin:0 auto; padding:14px 40px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.sortbar .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-3); }
.sortbar .lbl b{ color:var(--acid); }
.sortbar .sort{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }

/* grid (shared look with list) */
.listwrap{ padding:54px 0 96px; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:42px 34px; }
.card{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.card .thumb{ position:relative; margin-bottom:16px; }
.card .thumb .ph{ aspect-ratio:4/3; }
.card .thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); border:1px solid var(--line); }
.card .pin{ position:absolute; left:13px; top:13px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#0b0b0d; background:var(--acid); padding:6px 11px; border-radius:100px; }
.card .cat{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.card h3{ font-family:var(--head); font-weight:700; font-size:18px; line-height:1.5; margin:9px 0 10px; letter-spacing:0; }
.card:hover h3{ color:var(--gold); }
.card .ex{ font-size:13.5px; color:var(--ink-2); line-height:1.85; margin:0 0 14px; }
.card .meta{ margin-top:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); display:flex; gap:13px; padding-top:13px; border-top:1px solid var(--line); }

/* pagination */
.pager{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:70px; }
.pager a{ font-family:var(--mono); font-size:13px; min-width:42px; height:42px; padding:0 12px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; text-decoration:none; color:var(--ink-2); transition:.2s; }
.pager a:hover{ border-color:var(--ink); color:var(--ink); }
.pager a.on{ background:var(--acid); border-color:var(--acid); color:#0b0b0d; font-weight:700; }
.pager a.nav{ font-size:12px; letter-spacing:.06em; }
.pager .gap{ color:var(--ink-3); padding:0 4px; }

@media (max-width:860px){
  .grid{ grid-template-columns:1fr; gap:36px; }
  .archead{ padding-top:28px; }
  .archead h1{ font-size:clamp(22px,6.4vw,56px); line-height:1.02; white-space:normal; overflow-wrap:break-word; }
  .sortbar .in{ padding-left:22px; padding-right:22px; }
}