/* トップページ: 1つの項目から左右へ広がるタグの網。タグと配線の見た目は article.css のもの */
.home main { display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 28px); }
.hero { flex: none; display: flex; align-items: flex-end; gap: clamp(24px, 4vw, 72px); padding-left: clamp(0px, 5.5vw, 96px); min-height: 0; }
.side { padding-bottom: clamp(6px, 1.2vw, 20px); min-width: 0; }
/* サイト名: 2行を同じ幅にそろえた、ひとかたまりの図形として組む(字間は home.js がそろえる) */
.hero #title { margin: 0; flex: none; font-family: "Times New Roman", Times, Tinos, serif; font-weight: 400; font-size: clamp(72px, 13.2vw, 230px); line-height: .8; white-space: nowrap; font-feature-settings: normal; }
.hero #title span { display: block; width: max-content; }
.hero #lead { margin: 0; max-width: 30em; }
/* いま中心にある項目 */
#now { flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 22px; margin: clamp(4px, 1.5vh, 18px) 0 0; text-align: center; }
#root { font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); }
#rootlead { font-size: 14px; font-weight: 300; color: #bdb9af; }
#read { font: 500 10.5px var(--sans); letter-spacing: .2em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
#read:not([href]) { color: var(--dim); border-bottom-color: transparent; }
#support { color: var(--dim); text-decoration: none; }
#shuffle { all: unset; cursor: pointer; color: var(--ink); letter-spacing: .14em; }
#shuffle:hover, .site:hover { opacity: .65; }

.home #tags { flex: 1; min-height: 0; align-self: stretch; max-width: 100%; justify-content: safe center; gap: clamp(22px, 2.6vw, 40px); overflow: auto hidden; }
.home .col { gap: 6px; }
.home .tag { font-size: 11px; cursor: pointer; animation: appear .55s both; animation-delay: var(--delay); }
.home #cables path { stroke-dasharray: 1; animation: grow .6s both; animation-delay: var(--delay); }
@keyframes appear { from { opacity: 0; } }
@keyframes grow { from { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: reduce) { .home .tag, .home #cables path { animation: none; } }

@media (max-width: 1080px) {
  .home main { gap: 20px; }
  .hero { display: block; padding-left: 0; } .side { padding: 20px 0 0; } #now { justify-content: flex-start; text-align: left; }
  .home #tags { min-height: 60vh; justify-content: flex-start; }
}