:root {
  --hx-bg: #000;
  --hx-surface: rgba(17, 24, 37, .78);
  --hx-fg: #edf1f5;
  --hx-muted: #b8c1ce;
  --hx-line: #394554;
  --hx-accent: #a6ceff;
  --hx-button: #283e59;
  --hx-cloud-image: url('/assets/clouds2.webp');
  --hx-width: 1080px;
  --hx-gutter: 24px;
  --hx-gap: 20px;
  --hx-tap: 44px;
  --hx-radius: 12px;
  --hx-small: 13px;
  --hx-body: 15px;
  --hx-lead: 20px;
  --hx-title: 24px;
  --hx-hero: clamp(36px, 5.8vw, 72px);
  --hx-time: 180ms;
  --hx-cloud-time: 200s;
  --hx-section-space: 72px;
  --hx-focus: 2px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--hx-fg); background: var(--hx-bg); font: 400 var(--hx-body)/1.8 -apple-system, "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; overflow-wrap: anywhere; }
a { color: var(--hx-accent); text-underline-offset: .24em; }
a:focus-visible { outline: var(--hx-focus) solid var(--hx-accent); outline-offset: 4px; }
img, svg, video { max-width: 100%; height: auto; }
.wrap { width: min(calc(100% - var(--hx-gutter) * 2), var(--hx-width)); margin-inline: auto; position: relative; }
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; background: #000 url('/assets/stars.webp') repeat top center; }
/* 元の yiorno.com の空: 星の上を、またたきが斜めに・雲が横に 200 秒で流れる。上に黒 40% とドットを重ねる */
.sky > div { position: absolute; inset: 0; }
.twinkling { background: transparent url('/assets/twinkling.webp') repeat top center; animation: move-twink-back var(--hx-cloud-time) linear infinite; }
.clouds { background: transparent var(--hx-cloud-image) repeat top center; animation: move-clouds-back var(--hx-cloud-time) linear infinite; }
.dots { background: rgba(0, 0, 0, .4) url('/assets/dot.svg'); }
@keyframes move-twink-back { from { background-position: 0 0; } to { background-position: -10000px 5000px; } }
@keyframes move-clouds-back { from { background-position: 0 0; } to { background-position: 10000px 0; } }
.cursor-light { position: fixed; width: 35px; height: 40px; background: url('/assets/pointer.png') center / contain no-repeat; pointer-events: none; z-index: 20; left: 0; top: 0; }
.cursor-light[hidden] { display: none; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: var(--hx-gap); min-height: 96px; border-bottom: 1px solid var(--hx-line); }
.brand { color: var(--hx-fg); font-weight: 700; font-size: 17px; text-decoration: none; display: flex; align-items: center; min-height: var(--hx-tap); }
.brand-dot { color: var(--hx-accent); }
.site-header nav, .site-footer nav { display: flex; gap: var(--hx-gap); flex-shrink: 0; }
.site-header nav a, .site-footer nav a { min-height: var(--hx-tap); display: flex; align-items: center; text-decoration: none; }
.hero { padding-block: 86px 80px; }
.hero h1 { font-size: var(--hx-hero); line-height: 1.2; letter-spacing: -.035em; max-width: 16ch; margin: 20px 0 24px; }
.eyebrow { color: var(--hx-muted); font-size: var(--hx-small); margin: 0; letter-spacing: .06em; }
.tagline { font-size: var(--hx-lead); max-width: 40em; margin-bottom: 28px; }
.primary { display: inline-flex; justify-content: space-between; align-items: center; gap: 36px; min-height: 48px; padding: 10px 20px; border-radius: 10px; text-decoration: none; background: var(--hx-button); color: var(--hx-accent); }
main > section:not(.hero) { border-top: 1px solid var(--hx-line); padding-block: 34px var(--hx-section-space); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--hx-gap); margin-bottom: 22px; }
h2 { font-size: var(--hx-title); line-height: 1.4; margin: 0; }
h3 { font-size: var(--hx-lead); line-height: 1.5; margin: 0; }
.more { min-height: var(--hx-tap); display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.link-button { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 14px 18px; border: 1px solid var(--hx-line); border-radius: 10px; text-decoration: none; background: var(--hx-surface); transition: border-color var(--hx-time); }
.link-button > span:nth-child(2) { flex: 1; min-width: 0; }
.link-icon { font-size: var(--hx-title); }
.link-button:hover, .work:hover { border-color: var(--hx-accent); }
.works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hx-gap); }
.work { display: block; border: 1px solid var(--hx-line); border-radius: var(--hx-radius); overflow: hidden; background: var(--hx-surface); text-decoration: none; transition: border-color var(--hx-time); min-width: 0; }
.work img { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; border-bottom: 1px solid var(--hx-line); }
.work-copy { padding: 20px; }
.work h3 { display: flex; justify-content: space-between; gap: 12px; }
.work p { color: var(--hx-muted); margin: 10px 0 0; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-preview { padding-block: 26px; border-bottom: 1px solid var(--hx-line); }
.post-preview:first-child { padding-top: 0; }
.post-preview:last-child { border-bottom: 0; }
time { color: var(--hx-muted); font-size: var(--hx-small); font-variant-numeric: tabular-nums; }
.post-preview h3 a { display: inline-flex; align-items: center; min-height: var(--hx-tap); text-decoration: none; }
.post-preview p { margin: 8px 0 0; max-width: 72ch; }
.tags { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tag { display: inline-flex; align-items: center; min-height: var(--hx-tap); font-size: var(--hx-small); text-decoration: none; }
.small-heading { font-size: 17px; margin-bottom: 8px; }
.page-heading { padding-block: 56px 32px; }
.page-heading h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.35; margin: 16px 0 18px; letter-spacing: -.025em; }
aside { margin-bottom: 28px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--hx-gap); margin-block: 32px; flex-wrap: wrap; }
.pagination a { display: inline-flex; min-height: var(--hx-tap); align-items: center; }
.article { max-width: 760px; margin-inline: auto; }
.prose { font-size: 17px; line-height: 1.95; }
.prose h2, .prose h3 { margin-top: 2em; }
.prose p { margin-block: 1.4em; }
.prose blockquote { margin: 24px 0; padding: 16px 24px; border: 1px solid var(--hx-line); border-radius: var(--hx-radius); color: var(--hx-muted); }
.prose pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 20px; border: 1px solid var(--hx-line); border-radius: var(--hx-radius); font-size: var(--hx-body); }
.prose code { font-family: ui-monospace, monospace; }
.prose ul, .prose ol { padding-left: 1.5em; }
.article-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hx-gap); border-top: 1px solid var(--hx-line); margin-top: 48px; padding-top: 24px; }
.article-nav a { min-height: var(--hx-tap); display: flex; flex-direction: column; text-decoration: none; }
.article-nav span { color: var(--hx-muted); font-size: var(--hx-small); }
.site-footer { border-top: 1px solid var(--hx-line); margin-top: 40px; padding-block: 26px 40px; color: var(--hx-muted); display: flex; align-items: center; justify-content: space-between; gap: var(--hx-gap); }
.skip { position: absolute; top: 0; left: 0; transform: translateY(-150%); min-height: var(--hx-tap); padding: 10px 20px; background: var(--hx-surface); z-index: 50; }
.skip:focus { transform: none; }
@media (max-width: 600px) {
  :root { --hx-gutter: 20px; --hx-gap: 16px; --hx-section-space: 48px; --hx-title: 20px; }
  .site-header { min-height: 80px; gap: 12px; }
  .brand { font-size: var(--hx-body); }
  .site-header nav { gap: 14px; }
  .hero { padding-block: 54px 52px; }
  .hero h1 { margin-top: 22px; }
  .tagline { font-size: 17px; }
  .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .link-button { padding: 12px; gap: 8px; min-height: 72px; font-size: var(--hx-small); }
  .link-icon { font-size: 20px; }
  .works-grid { grid-template-columns: minmax(0, 1fr); }
  .section-head { gap: 8px; }
  .more { font-size: var(--hx-small); }
  .site-footer { display: block; }
  .site-footer nav { justify-content: space-between; }
  .page-heading { padding-top: 40px; }
}
@media (hover: none) { .cursor-light { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .twinkling, .clouds { animation: none; }
  .cursor-light { display: none; }
  *, *::before, *::after { transition: none; }
}

/* 11-07 本人「背景以外がださい・白基調にして立体的に」: 空の上に白い札を浮かべる。影は下に落ちる影だけ(光らせない) */
:root { --hx-card: #ffffff; --hx-card-fg: #1d2430; --hx-card-muted: #5b6573; --hx-card-accent: #2f6fd6; --hx-lift: 0 1px 0 rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.45); --hx-lift-hover: 0 1px 0 rgba(0,0,0,.06), 0 16px 32px rgba(0,0,0,.55); }
.hobbies { color: var(--hx-muted); font-size: var(--hx-body); letter-spacing: .04em; margin: -12px 0 28px; }
.primary { background: var(--hx-card); color: var(--hx-card-fg); box-shadow: var(--hx-lift); font-weight: 700; }
.link-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.link-button, .work, .post-preview { background: var(--hx-card); color: var(--hx-card-fg); border: 0; box-shadow: var(--hx-lift); transition: transform var(--hx-time), box-shadow var(--hx-time); }
.link-button:hover, .work:hover { transform: translateY(-3px); box-shadow: var(--hx-lift-hover); border-color: transparent; }
.link-button { color: var(--hx-card-fg); font-weight: 700; }
.link-button > span:last-child { color: var(--hx-card-muted); }
.fa-ico { width: 1.3em; height: 1.3em; display: block; }
.link-icon { display: flex; color: var(--hx-card-fg); }
.work h3 { color: var(--hx-card-fg); }
.work p { color: var(--hx-card-muted); }
.work img { border-bottom: 0; }
.work-ico { object-fit: contain !important; padding: 72px; background: #eef2f7; }
.group-title { font-size: 15px; color: var(--hx-muted); letter-spacing: .08em; margin: 8px 0 14px; }
.group-title ~ .group-title { margin-top: 32px; }
.post-list { display: grid; gap: 14px; }
.post-preview, .post-preview:first-child { padding: 20px 22px; border-radius: var(--hx-radius); border-bottom: 0; }
.post-preview h3 a { color: var(--hx-card-fg); }
.post-preview p { color: var(--hx-card-muted); }
.post-preview .tag { color: var(--hx-card-accent); }
.post-preview time { color: var(--hx-card-muted); }
@media (max-width: 720px) { .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .work-ico { padding: 48px; } }
@media (prefers-reduced-motion: reduce) { .link-button:hover, .work:hover { transform: none; } }
.works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-ico { padding: 26% 30%; }
@media (max-width: 960px) { .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .works-grid { grid-template-columns: minmax(0, 1fr); } .work-ico { padding: 18% 34%; } }
.work-ico { padding: 16% 36%; }
@media (max-width: 720px) {
  .link-button { padding: 12px; gap: 8px; font-size: 13px; }
  .link-button > span:last-child { display: none; }
  .work-ico { padding: 14% 36%; }
}
/* 11-07 準備中の札（作品・ブログ）。押せない物なので浮き上がらせない */
.badge { display: inline-block; flex: none; align-self: center; padding: 2px 10px; border-radius: 999px; font-size: var(--hx-small); font-weight: 600; line-height: 1.6; letter-spacing: .04em; vertical-align: middle; background: #fff3d6; color: #7a4b00; }
h1 .badge, h2 .badge { margin-left: 8px; font-size: 13px; }
.work-wip, .work-wip:hover { transform: none; box-shadow: var(--hx-lift); cursor: default; }
.work-wip img { filter: saturate(.75); }
.wip-note { color: var(--hx-muted); margin: 0; }
/* 11-07 ひとこと（note）のあるリンクは横長の1枚: PC 4列・スマホ 2列のどちらでも1段を使う。名前の横（狭いと下）に小さい字 */
.link-wide { grid-column: 1 / -1; }
.link-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.link-note { font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--hx-card-muted); }
/* 11-07 リンクの無い作品は押せない札（準備中と同じく浮き上がらせない・↗ も札も無し） */
.work-plain, .work-plain:hover { transform: none; box-shadow: var(--hx-lift); cursor: default; }
/* 11-07 作品は group ごとに全部出す。960px 以上は min(枚数, 4) 列（cols-N）、720〜959px は2列、720px 未満は1列（上の決めのまま） */
@media (min-width: 960px) {
  .works-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
  .works-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .works-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 11-07 終わった作品の「終了」の札（準備中の札と同じ形・灰色寄りで控えめ）。リンクは生きているので、ほかの作品と同じく押せる */
.badge-ended { background: #e6e9ee; color: #4a5361; }
.work-ended h3 > span:first-child { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* 11-07 4列では札が細く、3行で説明が切れる（マイクラプラグイン）。4列の時だけ4行まで出す */
@media (min-width: 960px) { .works-grid.cols-4 .work p { -webkit-line-clamp: 4; line-clamp: 4; } }