/* "Made by you" dish index (Vale, 2026-10-15, second pass) — rendered by homepage-gallery.js.
   Adapted from the library reference "typography-directional-index": list + moderate sticky stacked preview. */
.tcs-made{--ease:cubic-bezier(.22,1,.36,1);position:relative;padding:clamp(80px,9vw,140px) clamp(24px,4.2vw,60px);background:#f0eee7;color:var(--tcs-ink,#292d28);scroll-margin-top:80px}
.tcs-made__inner{max-width:1600px;margin:0 auto}
.tcs-made__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,120px);row-gap:28px;align-items:end;margin-bottom:clamp(40px,4.5vw,72px)}
.tcs-made__title{display:flex;flex-direction:column;gap:22px}
html :is(#content,body) .tcs-made .tcs-made__eyebrow{margin:0;display:flex;align-items:center;gap:14px;font:500 var(--tcs-label,12px)/1.6 var(--tcs-sans,Inter,sans-serif)!important;letter-spacing:.08em!important;text-transform:uppercase;color:var(--tcs-ink-2,#292d28)!important}
.tcs-made__eyebrow::before{content:"";width:32px;height:1px;background:currentColor;opacity:.45}
html :is(#content,body) .tcs-made .tcs-made__head h2{margin:0;font-family:var(--tcs-serif,Cardo,serif)!important;font-size:var(--tcs-display,clamp(42px,4.6vw,76px))!important;font-weight:400!important;line-height:1.04!important;letter-spacing:-.02em!important}
html[lang=ja] :is(#content,body) .tcs-made .tcs-made__head h2{line-height:1.25!important;letter-spacing:.02em!important;word-break:auto-phrase}
html :is(#content,body) .tcs-made .tcs-made__intro{justify-self:end;margin:0;max-width:36ch;padding-bottom:.4em;font:400 var(--tcs-lead,18px)/1.6 var(--tcs-sans,Inter,sans-serif)!important;letter-spacing:0!important;color:var(--tcs-ink-2,#292d28)!important;text-wrap:pretty}

/* body: list (7) + sticky photo (5) */
.tcs-made__body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,120px);align-items:start}
.tcs-made__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--tcs-ink,#292d28)}
.tcs-made__list li{border-bottom:1px solid var(--tcs-line,rgba(41,45,40,.14))}
.tcs-made__row{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto 36px;align-items:center;column-gap:20px;padding:26px 8px 26px 0;color:inherit;text-decoration:none;overflow:hidden;isolation:isolate}
.tcs-made__wash{position:absolute;inset:0;z-index:-1;background:rgba(41,45,40,.045);transform:translateY(100%);transition:transform .32s ease}
.tcs-made__num{align-self:start;padding-top:.7em;font:500 var(--tcs-label,12px)/1 var(--tcs-sans,Inter,sans-serif);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--tcs-ink-3,#292d28);transition:color .3s}
.tcs-made__thumb{display:none}
.tcs-made__main{display:flex;flex-direction:column;gap:8px;min-width:0}
.tcs-made__name{font:400 var(--tcs-item,clamp(22px,1.8vw,28px))/1.15 var(--tcs-serif,Cardo,serif);color:var(--tcs-ink,#292d28);transition:transform .5s var(--ease)}
.tcs-made__desc{max-width:52ch;font:400 15px/1.55 var(--tcs-sans,Inter,sans-serif);color:var(--tcs-ink-2,#292d28)}
.tcs-made__cls{font:500 var(--tcs-label,12px)/1.4 var(--tcs-sans,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--tcs-ink-3,#292d28);text-align:right;white-space:nowrap;transition:color .3s}
.tcs-made__go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--tcs-orange,#e37222);color:#fff;opacity:0;transform:translateX(-8px) scale(.85);transition:opacity .35s,transform .5s var(--ease),background .3s}
.tcs-made__go svg{width:15px;height:10px}
.tcs-made__row:is(.is-hover,:focus-visible) .tcs-made__name{transform:translateX(6px)}
.tcs-made__row:is(.is-hover,:focus-visible,.is-active) .tcs-made__num{color:var(--tcs-ink,#292d28)}
.tcs-made__row:is(.is-hover,:focus-visible) .tcs-made__cls{color:var(--tcs-orange,#e37222)}
.tcs-made__row:is(.is-hover,:focus-visible) .tcs-made__go{opacity:1;transform:none}
.tcs-made__row:focus-visible{outline:2px solid var(--tcs-ink,#292d28);outline-offset:-2px}
/* when the pointer is over the list, quiet the rows it isn't on */
/* no dimmed (grey) text, per Kotaro: hover emphasis comes from the wash, shift and arrow only */

.tcs-made__stage{position:sticky;top:120px}
.tcs-made__frame{position:relative;aspect-ratio:4/5;width:100%;max-width:440px;margin-left:auto;overflow:hidden;background:#e3e0d7;border-radius:2px}
.tcs-made__pic{position:absolute;inset:0;will-change:clip-path}
.tcs-made__pic img{display:block;width:100%;height:100%;object-fit:cover}
.tcs-made__caption{display:flex;justify-content:space-between;gap:16px;max-width:440px;margin:16px 0 0 auto;font:500 var(--tcs-label,12px)/1.4 var(--tcs-sans,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--tcs-ink-2,#292d28)}
.tcs-made__cap-num{font-variant-numeric:tabular-nums;color:var(--tcs-ink-3,#292d28)}

.tcs-made__reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.tcs-made__body .tcs-made__reveal:nth-child(2){transition-delay:.12s}
.tcs-made__reveal.is-in{opacity:1;transform:none}

@media(max-width:1000px){
 .tcs-made__head,.tcs-made__body{grid-template-columns:1fr}
 html :is(#content,body) .tcs-made .tcs-made__intro{justify-self:start;max-width:44ch;font-size:16px!important;padding-bottom:0}
 .tcs-made__stage{display:none}
 .tcs-made__row{grid-template-columns:76px minmax(0,1fr) 24px;column-gap:16px;padding:18px 0}
 .tcs-made__num{display:none}
 .tcs-made__thumb{display:block;width:76px;height:92px;object-fit:cover;border-radius:2px;align-self:start}
 .tcs-made__cls{display:none}
 .tcs-made__go{width:24px;height:24px;opacity:1;transform:none;background:none;color:var(--tcs-ink,#292d28)}
 .tcs-made__desc{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.tcs-made *,.tcs-made__reveal{transition:none!important}.tcs-made__reveal{opacity:1;transform:none}}