/* Works index and work detail pages. Uses the tokens from styles.css. */
.works-head{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);padding:110px 7% 72px}
.works-head:before{content:'';position:absolute;inset:0;background:radial-gradient(60% 90% at 88% 0%,#25133f 0%,transparent 70%);pointer-events:none}
.works-label{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 18px;border-top:1px solid #ffffff29;padding-top:19px;font-size:11px;letter-spacing:.15em;color:var(--lavender)}
.works-head h1{position:relative;font-family:var(--english);font-weight:500;font-size:clamp(64px,11vw,148px);line-height:1;letter-spacing:-.01em;margin-top:48px}
.works-intro{position:relative;max-width:640px;margin-top:28px;font-size:15px;line-height:2;color:#d5c9e1}
.works-list{background:var(--paper);color:var(--ink);padding:88px 7% 104px}
.portfolio-grid{list-style:none;margin:0;padding:0;display:grid;gap:88px}
.portfolio-card{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center}
.portfolio-grid li:nth-child(even) .portfolio-card{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.portfolio-grid li:nth-child(even) .portfolio-card-image{order:2}
.portfolio-card-image{margin:0;position:relative;overflow:hidden;background:var(--ink)}
.portfolio-card-image img{aspect-ratio:16/9;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.portfolio-card:hover .portfolio-card-image img,.portfolio-card:focus-visible .portfolio-card-image img{transform:scale(1.03)}
.portfolio-card-image figcaption{position:absolute;left:16px;bottom:12px;font-size:11px;letter-spacing:.14em;color:#f5f1ffd9;text-shadow:0 1px 8px #050408}
.portfolio-card-meta{font-size:11px;letter-spacing:.15em;color:var(--muted)}
.portfolio-card-body h2{font-size:clamp(24px,2.6vw,34px);line-height:1.45;letter-spacing:.06em;margin-top:16px;text-wrap:balance}
.portfolio-card-display{font-family:var(--english);font-style:italic;font-size:22px;color:var(--purple);margin-top:8px}
.portfolio-card-body p:not(.portfolio-card-display){margin-top:18px;font-size:15px;line-height:2;color:#3f334c}
.portfolio-card-more{display:inline-flex;gap:10px;margin-top:24px;font-size:12px;letter-spacing:.12em;border-bottom:1px solid currentColor;padding-bottom:4px}
.works-footnote{margin-top:80px;font-size:13px;color:var(--muted)}

.work-hero{background:var(--ink);color:var(--paper);padding:56px 7% 72px}
.work-crumbs{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;letter-spacing:.15em;color:var(--lavender)}
.work-crumbs a{border-bottom:1px solid #a99acf80}
.work-display{font-family:var(--english);font-style:italic;font-size:clamp(26px,3.4vw,44px);color:#b79bef;margin-top:44px}
.work-hero h1{font-size:clamp(30px,4.6vw,60px);line-height:1.3;letter-spacing:.06em;margin-top:10px;text-wrap:balance}
.work-frame{margin:44px 0 0}
.work-frame img{aspect-ratio:16/9;height:auto}
.work-frame figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:11px;letter-spacing:.14em;color:var(--lavender)}
.work-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;margin:40px 0 0}
.work-meta>div{padding:18px 0;border-top:1px solid #ffffff29;border-bottom:1px solid #ffffff29}
.work-meta dt{font-size:11px;letter-spacing:.15em;color:var(--lavender)}
.work-meta dd{margin:6px 0 0;font-size:15px}
.work-note{margin-top:24px;font-size:13px;color:#cfc6e3}
.work-body{background:var(--paper);color:var(--ink);padding:96px 7% 104px;display:grid;gap:72px}
.work-section{display:grid;grid-template-columns:200px minmax(0,660px);column-gap:56px;row-gap:16px}
.work-section-label{grid-row:span 3;font-size:11px;letter-spacing:.15em;color:var(--muted);padding-top:10px}
.work-section h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:.06em;line-height:1.5}
.work-section p{font-size:15px;line-height:2.05;color:#3f334c}
.work-tags{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.work-tags li{font-size:12px;padding:5px 12px;border:1px solid var(--line);color:#5a4b6b}
.work-actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;padding-left:256px}
.work-actions .button{width:auto;margin:0;gap:40px}
.work-back{font-size:13px;letter-spacing:.06em;border-bottom:1px solid currentColor}
.work-next{display:block;position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.work-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;transition:opacity .5s,transform .8s cubic-bezier(.2,.7,.2,1)}
.work-next:hover img,.work-next:focus-visible img{opacity:.6;transform:scale(1.03)}
.work-next>span{position:relative;display:block;padding:0 7%}
.work-next-label{padding-top:96px!important;font-size:11px;letter-spacing:.15em;color:var(--lavender)}
.work-next-title{font-family:var(--serif);font-size:clamp(24px,3.4vw,44px);letter-spacing:.06em;margin-top:14px}
.work-next-display{font-family:var(--english);font-style:italic;font-size:22px;color:#b79bef;margin-top:6px;padding-bottom:88px!important}

@media(max-width:820px){
  .works-head{padding:80px 6% 52px}.works-list{padding:60px 6% 76px}.portfolio-grid{gap:60px}
  .portfolio-card,.portfolio-grid li:nth-child(even) .portfolio-card{grid-template-columns:1fr;gap:24px}
  .portfolio-grid li:nth-child(even) .portfolio-card-image{order:0}
  .work-hero{padding:40px 6% 56px}.work-meta{grid-template-columns:1fr}.work-meta>div{border-bottom:0}.work-meta>div:last-child{border-bottom:1px solid #ffffff29}
  .work-body{padding:64px 6% 76px;gap:56px}.work-section{grid-template-columns:1fr}.work-section-label{grid-row:auto;padding:0}
  .work-actions{padding-left:0}.work-actions .button{width:100%}.work-next>span{padding:0 6%}
}
@media(prefers-reduced-motion:reduce){.portfolio-card-image img,.work-next img{transition:none}}