/* FOCAL ATL work index and project case studies */

/* Index bar and filters */
.f-index{padding-top:0}
.f-index__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.f-index__filters{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.f-tab{position:relative;padding:.6rem 0;font-family:var(--font-display);font-weight:400;font-size:var(--t-label);letter-spacing:.24em;text-transform:uppercase;color:var(--text-tertiary);transition:color var(--d-fast) var(--ease-out)}
.f-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--focal-bronze);transform:scaleX(0);transform-origin:left;transition:transform var(--d-base) var(--ease-out)}
.f-tab:hover,.f-tab.is-on{color:var(--text-primary)}
.f-tab.is-on::after{transform:scaleX(1)}
.f-index__count{color:var(--text-tertiary)}
.f-index__count span{color:var(--focal-bronze)}
.f-index__empty{padding:var(--s-6) 0}

/* The catalogue: a numbered text index */
.f-catalogue{margin-top:var(--s-4)}
.f-cat{border-bottom:1px solid var(--line-soft)}
.f-cat[hidden]{display:none}
.f-cat__row{display:grid;grid-template-columns:3rem 1fr auto;grid-template-areas:"num name go" "num meta go";gap:.35rem var(--s-4);align-items:baseline;padding:1.5rem 0;color:var(--text-primary)}
.f-cat__num{grid-area:num;color:var(--focal-bronze)}
.f-cat__name{grid-area:name;letter-spacing:.1em;font-size:clamp(1.25rem,2.2vw,1.9rem);transition:color var(--d-base) var(--ease-out)}
.f-cat__place,.f-cat__year,.f-cat__type{color:var(--text-tertiary);font-size:var(--t-small)}
.f-cat__place{grid-area:meta}
.f-cat__year,.f-cat__type{display:none}
.f-cat__go{grid-area:go;align-self:center;color:var(--focal-bronze);opacity:0;transform:translateX(-6px);transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out)}
.f-cat__go svg{width:1.1rem;height:1.1rem}
.f-cat__row:hover .f-cat__name,.f-cat__row:focus-visible .f-cat__name{color:var(--focal-bronze-light)}
.f-cat__row:hover .f-cat__go,.f-cat__row:focus-visible .f-cat__go{opacity:1;transform:none}
@media (min-width:768px){
  .f-cat__row{grid-template-columns:4rem 1.4fr 1fr 5rem 1fr 2rem;grid-template-areas:"num name place year type go";padding:1.75rem 0}
  .f-cat__place{grid-area:place}
  .f-cat__year{display:block;grid-area:year}
  .f-cat__type{display:block;grid-area:type}
}

/* Covers */
.f-gallery{padding-top:var(--s-9)}
.f-covers{display:grid;gap:var(--s-8) var(--s-6)}
.f-cover[hidden]{display:none}
.f-cover__link{display:grid;gap:1rem;color:var(--text-primary)}
.f-cover__meta{display:grid;gap:.4rem}
.f-cover__name{letter-spacing:.14em;transition:color var(--d-base) var(--ease-out)}
.f-cover__type{color:var(--text-tertiary);font-size:var(--t-micro)}
.f-cover__link:hover .f-cover__name{color:var(--focal-bronze-light)}
@media (min-width:600px){.f-covers{grid-template-columns:repeat(2,minmax(0,1fr))}.f-cover:nth-child(3n+2){margin-top:var(--s-9)}}
@media (min-width:1024px){.f-covers{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-9) var(--s-7)}.f-cover:nth-child(3n+2){margin-top:var(--s-10)}}

/* Case study */
.f-case__hero{padding-bottom:0}
.f-case__title{max-width:16ch}
.f-case__meta{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.f-case__scope{grid-column:1/-1}
.f-case__cover{margin-top:var(--s-7)}
.f-case__coverimg{aspect-ratio:16/9}
@media (min-width:1024px){.f-case__coverimg{aspect-ratio:21/9}.f-case__scope{grid-column:auto}.f-case__meta{grid-template-columns:repeat(5,minmax(0,1fr))}}
.f-case__split{display:grid;gap:var(--s-6)}
.f-case__h2{max-width:16ch;margin-top:var(--s-4)}
.f-case__text{padding-top:.5rem}
@media (min-width:1024px){.f-case__split{grid-template-columns:7fr 5fr;column-gap:var(--s-8);align-items:start}.f-case__text{padding-top:var(--s-5)}}
.f-case__stage{padding-block:calc(var(--section-y) * .6)}
.f-case__pair{display:grid;gap:var(--s-6);align-items:end}
.f-case__aside{display:grid;gap:var(--s-4);align-content:end}
.f-case__aside .f-h3{letter-spacing:.14em}
.f-case__materials{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.f-materials{display:grid;gap:.5rem;margin-top:.75rem}
.f-materials li{display:flex;gap:1rem;align-items:baseline;color:var(--text-secondary);font-size:var(--t-small)}
.f-materials .f-mono{color:var(--focal-bronze);font-size:var(--t-micro)}
@media (min-width:1024px){
  .f-case__pair{grid-template-columns:7fr 4fr;column-gap:var(--s-8)}
  .f-case__pair--flip{grid-template-columns:4fr 7fr}
  .f-case__pair--flip .f-case__aside{order:0}
  .f-case__pair--flip .f-case__figure{order:1}
}
.f-case__transform{padding-top:calc(var(--section-y) * .4)}
.f-case__compare{margin-top:var(--s-6)}
.f-case__finished{padding-top:calc(var(--section-y) * .6)}
.f-case__gallery{display:grid;gap:var(--s-6);margin-top:var(--s-6)}
@media (min-width:768px){.f-case__gallery{grid-template-columns:1fr 1fr}.f-case__gallery li:nth-child(2n){margin-top:var(--s-8)}}
.f-case__quote{padding-block:calc(var(--section-y) * .7)}
.f-case__quote .f-quote{position:relative;opacity:1;transform:none}
.f-case__nav{border-top:1px solid var(--line);padding:var(--s-7) 0}
.f-case__navgrid{display:grid;gap:var(--s-5);align-items:center}
.f-case__navlink{display:grid;gap:.4rem;color:var(--text-primary)}
.f-case__navlink .f-h4{transition:color var(--d-base) var(--ease-out)}
.f-case__navlink:hover .f-h4{color:var(--focal-bronze-light)}
@media (min-width:768px){.f-case__navgrid{grid-template-columns:1fr auto 1fr}.f-case__navlink--next{text-align:right;justify-items:end}}

/* Transformations rail */
.f-trail__list{display:grid;gap:var(--s-8)}
.f-trail__item{display:grid;gap:var(--s-4)}
.f-trail__meta{display:grid;gap:.4rem}
.f-trail__type{color:var(--text-tertiary);font-size:var(--t-micro)}
@media (min-width:1024px){.f-trail__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-7)}.f-trail__item:nth-child(2n){margin-top:var(--s-9)}}