/* IDATSUKA — "the newest is the main piece" (js/rows.js).
   One flat list per section; the script puts the newest in .feat-main and the
   rest in one sideways .feat-row. The same card elements are only moved, so
   this sheet decides what each shows in each place:
     main → picture left, then category, title, text, buttons
     row  → picture, title, one short line (and a price on the store)
   Works with the site's existing cards: simple links (.feat-pic / b),
   .work-card(-home), the store's .skill-item and the blog's .post-item. */

.feat { --feat-w: 168px; position: relative; }
@media (max-width: 700px) { .feat { --feat-w: 132px; } }

/* ── without script: the list as written, one under another ── */
.feat:not(.is-built) { display: grid; gap: 1.6rem; }
.feat:not(.is-built) > a.feat-item { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center; color: var(--fg); text-decoration: none; }
.feat:not(.is-built) > a.feat-item > img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; }

/* ── every card, when built: drop its own box so it sits in the layout ── */
.feat.is-built .feat-item {
  padding: 0 !important; background: none !important; border: 0 !important; min-height: 0 !important;
  margin: 0; box-shadow: none; color: var(--fg); text-decoration: none; opacity: 1; transform: none;
}
.feat.is-built .feat-item::before, .feat.is-built .feat-item::after { display: none !important; }
.feat-shelf { display: none !important; }
.feat .work-card-num, .feat .post-num, .feat .featured-badge { display: none !important; }

/* picture */
.feat .feat-pic, .feat .work-card-thumb, .feat .post-thumb {
  display: block; position: relative; overflow: hidden; margin: 0 !important; background-color: var(--bg2);
  border: 1px solid var(--border); aspect-ratio: 4 / 3;
}
.feat .feat-pic > img, .feat .work-card-thumb img, .feat .post-thumb img,
.feat .feat-pic > .feat-art { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out), filter .5s; }
.feat .feat-item:hover .feat-pic > img, .feat .feat-item:hover .work-card-thumb img, .feat .feat-item:hover .post-thumb img { transform: scale(1.04); }

/* ── main piece ── */
.feat-main > .feat-item {
  display: grid !important; grid-template-columns: minmax(150px, 420px) minmax(0, 1fr); grid-auto-rows: auto;
  column-gap: clamp(20px, 3vw, 44px); row-gap: .5rem; align-content: start; align-items: start; max-width: 960px;
}
.feat-main > .feat-item > .feat-pic, .feat-main > .feat-item > .work-card-thumb, .feat-main > .feat-item > .post-thumb {
  grid-column: 1; grid-row: 1 / span 12; aspect-ratio: 16 / 10; align-self: start; width: 100%;
}
.feat-main > .feat-item > *:not(.feat-pic):not(.work-card-thumb):not(.post-thumb) { grid-column: 2; min-width: 0; }
.feat-main .feat-title, .feat-main .work-card-title, .feat-main .skill-item-name, .feat-main .post-title {
  display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.3vw, 30px) !important;
  letter-spacing: .06em; line-height: 1.3; margin: 0;
}
.feat-main .feat-cat, .feat-main .work-card-cat, .feat-main .post-tag {
  display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.feat-main .feat-sub { display: none; }
.feat-main .feat-desc, .feat-main .work-card-desc, .feat-main .skill-item-tools, .feat-main .post-excerpt {
  display: block; color: var(--muted); font-size: 14px; line-height: 1.85; margin: .3rem 0 .6rem; flex: none !important;
}
/* the store's long notes: a few lines in the main piece, the rest on the product page */
.feat-main .skill-item-tools { display: -webkit-box !important; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.feat-main .feat-go { justify-self: start; margin-top: .6rem; }
.feat-main .work-card-meta, .feat-main .post-meta { display: flex; gap: 1rem; font-size: .75rem; color: var(--muted); }
.feat-main .post-body { display: grid; gap: .4rem; }
@media (max-width: 700px) {
  .feat-main > .feat-item { grid-template-columns: 1fr; }
  .feat-main > .feat-item > .feat-pic, .feat-main > .feat-item > .work-card-thumb, .feat-main > .feat-item > .post-thumb { grid-row: auto; aspect-ratio: 16 / 10; margin-bottom: .6rem !important; }
  .feat-main > .feat-item > *:not(.feat-pic):not(.work-card-thumb):not(.post-thumb) { grid-column: 1; }
  .feat-main .feat-desc, .feat-main .work-card-desc, .feat-main .skill-item-tools, .feat-main .post-excerpt { font-size: 13px; }
}

/* ── the row of the rest ── */
.feat-rowwrap { position: relative; margin-top: clamp(22px, 2.6vw, 32px); }
.feat-rowwrap[hidden] { display: none; }
.feat-row {
  display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 0 0 6px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
}
.feat-row::-webkit-scrollbar { display: none; }
.feat-row > .feat-item {
  flex: 0 0 var(--feat-w); width: var(--feat-w); scroll-snap-align: start;
  display: flex !important; flex-direction: column; gap: 6px; min-width: 0;
}
.feat-row > .feat-item > * { display: none !important; }
.feat-row > .feat-item > .feat-pic, .feat-row > .feat-item > .work-card-thumb, .feat-row > .feat-item > .post-thumb,
.feat-row > .feat-item > .feat-title, .feat-row > .feat-item > .work-card-title, .feat-row > .feat-item > .skill-item-name,
.feat-row > .feat-item > .feat-sub, .feat-row > .feat-item > .feat-price, .feat-row > .feat-item > .post-body,
.feat-row > .feat-item > .post-meta { display: block !important; }
.feat-row .post-body > :not(.post-title) { display: none !important; }
.feat-row .post-meta > :not(.post-date) { display: none !important; }
.feat-row .feat-title, .feat-row .work-card-title, .feat-row .skill-item-name, .feat-row .post-title {
  font-family: var(--serif); font-weight: 500; font-size: 15px !important; letter-spacing: .04em; line-height: 1.45; margin: 4px 0 0;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feat-row .feat-sub, .feat-row .post-date, .feat-row .feat-price {
  font-size: 11.5px !important; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; font-family: inherit;
}
.feat-row > .feat-item:hover .feat-title, .feat-row > .feat-item:hover .work-card-title,
.feat-row > .feat-item:hover .skill-item-name, .feat-row > .feat-item:hover .post-title { color: var(--accent); }

/* arrows (mouse only) */
.feat-btn { position: absolute; top: calc(var(--feat-w) * .375 - 18px); z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: rgba(var(--bg-rgb), .86); color: var(--fg); cursor: pointer; font-size: 15px; line-height: 1;
  display: none; align-items: center; justify-content: center; }
.feat-btn--prev { left: -12px; } .feat-btn--next { right: -12px; }
.feat-btn[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) { .feat-btn { display: flex; } }

:root[data-theme="light"] .feat .feat-pic, :root[data-theme="light"] .feat .work-card-thumb, :root[data-theme="light"] .feat .post-thumb { box-shadow: 0 0 0 1px var(--line); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .feat .feat-pic > img, .feat .work-card-thumb img, .feat .post-thumb img { transition: none; } }

/* 日記の札：絵の代わりに日付（tools/build-diary.mjs の .diary-art） */
.feat .diary-art {
  display: grid !important; place-content: center; gap: .3em; text-align: center; background: var(--bg2);
  background-image: radial-gradient(120% 90% at 30% 20%, rgba(var(--accent-rgb), .12), transparent 60%);
}
.feat .diary-art b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 4.2vw, 54px); letter-spacing: .08em; color: var(--fg); line-height: 1; }
.feat .diary-art i { font-family: var(--mono); font-style: normal; font-size: .55rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.feat-row .diary-art b { font-size: 26px; }
.feat-row .diary-art i { font-size: .45rem; }
/* トップの綴る：日記と記事への入口 */
.h-journal-more { display: flex; gap: 2rem; margin-top: 1.6rem; }

/* list pages (games, art, works): a little air under the page header */
.works-page-list > .feat { padding-top: clamp(2rem, 4vw, 3.2rem); }