/* Work pages — category index and project detail; reuses the main site's
   tokens, header, and footer. This file adds the work-index grid/filter
   and the project-detail layout. */

html,body.work-page,body.project-page{overflow-x:hidden}
.work-page main{padding-top:150px}
@media(max-width:800px){.work-page main{padding-top:72px}}

/* ---- Work index (category) page ---- */
/* Plain text hero, no photo — a background image here (Emmanuel Pierre
   Antoine Dance Studio, in three different treatments) was tried and
   rejected by Rodney; pending a decision on what belongs here, this is a
   simple light-background header matching the same eyebrow/h1/lede pattern
   used on the homepage hero. .work-page main carries top padding again so
   this sits cleanly below the header, same as the rest of the page. */
.work-hero{padding:34px 5.4% 40px;max-width:760px;margin:0 0 6px}
.work-hero .eyebrow{margin:0 0 14px}
.work-hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;font-size:50px;line-height:1.05;margin:14px 0 18px;color:var(--ink)}
.work-hero .lede{font-size:17px;line-height:1.55;color:#3a4f56;max-width:560px;margin:0}
@media(max-width:900px){
  .work-hero{padding:20px 7% 26px}
  .work-hero h1{font-size:38px}
}

.work-filter{display:flex;flex-wrap:wrap;gap:10px;padding:0 5.4% 30px;list-style:none;margin:0}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;font-size:11px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--ink);cursor:pointer;transition:.2s ease}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip.active{background:var(--ink);border-color:var(--ink);color:#fff}

.work-grid-section{padding:0 5% 20px}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.work-item{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.25s ease}
.work-item:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(16,47,58,.1)}
.work-item.is-hidden{display:none}
.work-item-media{aspect-ratio:4/3;overflow:hidden;background:#ececea}
.work-item-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.work-item:hover .work-item-media img{transform:scale(1.035)}
.work-item-body{padding:20px 22px 26px}
.work-item-cat{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin-bottom:9px}
.work-item h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.1;margin:0 0 8px;color:var(--ink)}
.work-item p{font-size:13px;line-height:1.5;color:#3a4f56;margin:0 0 16px}
.work-item-link{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink);display:inline-flex;align-items:center;gap:6px;transition:.2s ease}
.work-item:hover .work-item-link{color:var(--teal);gap:9px}
.work-item-static{cursor:default}
.work-item-static:hover{transform:none;box-shadow:none}
.work-item-static:hover .work-item-media img{transform:none}

.work-cta{margin-top:26px}

/* ---- Featured Work spotlights ---- */
.work-featured{padding:6px 5% 44px}
.work-featured-head{padding:0 .4% 26px;max-width:640px}
.work-featured-head .eyebrow{margin:0 0 10px}
.work-featured-head h2{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;font-size:32px;line-height:1.1;margin:0;color:var(--ink)}
.spotlight{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin-bottom:28px}
.spotlight-media{position:relative;min-height:340px;aspect-ratio:16/10;background:#0c1418}
.spotlight-media img{display:block;width:100%;height:100%;object-fit:cover;opacity:.92}
.spotlight-body{padding:34px 34px 28px;display:flex;flex-direction:column}
.spotlight-body .eyebrow{color:var(--teal)}
.spotlight-body h3{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;font-size:28px;line-height:1.12;margin:10px 0 12px;color:var(--ink)}
.spotlight-body p{font-size:14px;line-height:1.6;color:#3a4f56;margin:0 0 18px}
.spotlight-body .work-item-link{margin-top:20px}
.spotlight-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.spotlight-strip figure{margin:0;background:#fff;display:flex;flex-direction:column}
.spotlight-strip img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.spotlight-strip figcaption{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#5c7178;padding:9px 12px 12px;line-height:1.4}
.spotlight:nth-of-type(2){grid-template-columns:.85fr 1.15fr}
.spotlight:nth-of-type(2) .spotlight-media{order:2}
.spotlight:nth-of-type(2) .spotlight-body{order:1}
@media(max-width:900px){
  .spotlight,.spotlight:nth-of-type(2){grid-template-columns:1fr}
  .spotlight:nth-of-type(2) .spotlight-media{order:0}
  .spotlight:nth-of-type(2) .spotlight-body{order:0}
  .spotlight-media{min-height:240px}
}
.spotlight-strip.is-quad{grid-template-columns:repeat(4,1fr)}
@media(max-width:650px){.spotlight-strip,.spotlight-strip.is-quad{grid-template-columns:1fr 1fr}.spotlight-strip figure:nth-child(3){display:none}.spotlight-strip.is-quad figure:nth-child(4){display:none}}
@media(max-width:800px){.work-featured{padding:0 7% 30px}.work-featured-head{padding:0 0 20px}.spotlight-body{padding:26px 24px 22px}}

@media(max-width:900px){.work-grid{grid-template-columns:1fr 1fr}}
@media(max-width:800px){
  .work-filter{padding:0 7% 22px}
  .work-grid-section{padding:0 7% 14px}
}
@media(max-width:650px){.work-grid{grid-template-columns:1fr}}

/* ---- Project detail page ---- */
.project-hero{position:relative;height:64vh;min-height:420px;overflow:hidden;background:#0c1418}
.project-hero img{display:block;width:100%;height:100%;object-fit:cover;opacity:.86}
.project-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,24,.08) 0%,rgba(6,20,24,.82) 100%)}
.project-hero-copy{position:absolute;left:5.4%;right:5.4%;bottom:38px;z-index:1;color:#fff;max-width:640px}
.project-back{display:inline-block;margin-bottom:18px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.85);text-decoration:none}
.project-back:hover{color:#fff}
.project-hero .eyebrow{color:rgba(255,255,255,.78)}
.project-hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.045em;font-size:52px;line-height:.98;margin:14px 0 0;color:#fff}
@media(max-width:800px){.project-hero{margin-top:72px;height:48vh;min-height:320px}.project-hero h1{font-size:38px}}

.project-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:34px 5.4%;border-bottom:1px solid var(--line);background:#fff}
.project-meta .label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#5c7178;margin-bottom:6px}
.project-meta .value{display:block;font-family:var(--serif);font-size:18px;color:var(--ink)}
@media(max-width:650px){.project-meta{grid-template-columns:1fr 1fr;row-gap:24px;padding:28px 7%}}

.project-block{padding:44px 5.4% 6px;border-top:1px solid var(--line)}
.project-block:first-of-type{border-top:0}
.project-block-inner{max-width:720px}
.project-block .side-label{color:var(--teal);margin:0}
.project-block h2{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;font-size:32px;line-height:1.08;margin:12px 0 14px;color:var(--ink)}
.project-block p{font-size:15px;line-height:1.65;color:#33454d;margin:0}
@media(max-width:800px){.project-block{padding:34px 7% 4px}.project-block h2{font-size:26px}}

.project-gallery{padding:30px 5% 10px;display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.project-gallery img{display:block;width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:6px}
.project-gallery img:last-child:nth-child(odd){grid-column:1/-1;max-height:460px}
@media(max-width:800px){.project-gallery{grid-template-columns:1fr;padding:24px 7% 6px}.project-gallery img{max-height:none;aspect-ratio:4/3}.project-gallery img:last-child:nth-child(odd){max-height:none}}

.project-pullquote{padding:56px 5.4%;background:var(--paper);text-align:center}
.project-pullquote blockquote{margin:0 auto;max-width:760px;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.42;color:var(--ink)}
.project-pullquote cite{display:block;margin-top:20px;font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#5c7178}
@media(max-width:800px){.project-pullquote{padding:40px 7%}.project-pullquote blockquote{font-size:21px}}

.project-nextprev{display:flex;justify-content:space-between;gap:20px;padding:32px 5.4%;border-top:1px solid var(--line)}
.project-nextprev a{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink);text-decoration:none;transition:.2s ease}
.project-nextprev a:hover{color:var(--teal)}
@media(max-width:800px){.project-nextprev{padding:26px 7%}}

.project-cta{margin-top:8px}