/* ═══════════════════════════════════════════════════════════════
   PILLAR PAGES — Education · Curation · Legacy
   ───────────────────────────────────────────────────────────────
   One stylesheet for all three pages so they always match.
   Loaded after tokens.css and styles.css.

   Page order:  top bar · intro · project index · projects · footer
   Each project: meta line · title · video · stills ·
                 statement + reports/credits

   The pillar's color is --pillar, set from data-pillar below.
   ═══════════════════════════════════════════════════════════════ */

/* the landing page locks scrolling for its dissolve screens;
   pillar pages are ordinary scrolling pages */
html:has(.pillar-page),
body:has(.pillar-page){height:auto;overflow:visible}
body.pillar-body{height:auto;overflow:visible}   /* fallback, set by pillar.js */

.pillar-page{
  --pillar:var(--ink);
  --hair:rgba(26,55,96,.16);
  --slot-line:rgba(26,55,96,.24);
  padding-inline:24px;
  min-height:100vh;
}
.pillar-page[data-pillar="education"]{--pillar:var(--navy)}
.pillar-page[data-pillar="curation"]{--pillar:var(--pink)}
.pillar-page[data-pillar="legacy"]{--pillar:var(--burnt)}

/* ---------- top bar (built by pillar.js) ---------- */
.topbar{
  position:sticky;top:env(safe-area-inset-top, 0px);z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.8rem 2rem;
  margin-inline:-24px;
  padding:.85rem 24px;
  background:var(--bone);
  border-bottom:1px solid var(--hair);
}
.brand{
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.brand img{width:34px;height:auto;display:block}
.brand:hover,.brand:focus-visible{color:var(--pink);outline:none}
.pnav{display:flex;flex-wrap:wrap;gap:.5rem 1.7rem;list-style:none}
.pnav a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--rose);text-decoration:none;
  padding-bottom:.25em;border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.pnav a:hover,.pnav a:focus-visible{color:var(--pink);outline:none}
.pnav a[aria-current="page"]{color:var(--pillar);border-bottom-color:var(--orange)}

/* ---------- intro (same copy style as the old overlays) ---------- */
.pillar-intro{
  max-width:34em;margin:0 auto;
  padding-block:9vh 7vh;
  display:flex;flex-direction:column;align-items:center;gap:2.2rem;
  text-align:center;
}
.pillar-page h1{color:var(--pillar)}

/* ---------- project index ---------- */
.project-index{
  max-width:44rem;margin:0 auto;
  padding-block:2vh 9vh;
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  scroll-margin-top:5rem;
}
.project-index .events li{grid-template-columns:9.5em 1fr auto}
.project-index .t a::after{content:none}
.project-index .where{
  display:block;margin-top:.15em;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose);
}
.chip{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--orange);border:1px solid currentColor;
  padding:.3em .55em .25em .8em;white-space:nowrap;align-self:center;
}

/* ---------- a project ---------- */
.project{
  max-width:60rem;margin:0 auto;
  padding-block:8vh;
  border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:2.4rem;
  scroll-margin-top:4.5rem;
}
.project-head{display:flex;flex-direction:column;gap:.7rem}
.project-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rose);
}
.project-meta .star{color:var(--orange)}
.presenter{font-style:italic;color:var(--ink);opacity:.8}
.project h2{
  font-family:var(--black);font-weight:400;
  font-size:clamp(2.2rem,5.5vw,3.4rem);line-height:1.05;letter-spacing:.02em;
  color:var(--pillar);text-wrap:balance;
}

/* media slots — the same frame language as the landing page */
.project-media{display:flex;flex-direction:column;gap:1rem}
.stills{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}
.slot{
  position:relative;margin:0;
  max-width:100%;
  border:1px solid var(--slot-line);
  background:var(--bone-deep);
  overflow:hidden;
}
.slot-video{aspect-ratio:16/9}
.slot-still{aspect-ratio:3/2}
.slot::before{
  content:'\2726';
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--orange);opacity:.45;font-size:1.1rem;
}
.slot-name{
  position:absolute;left:0;right:0;bottom:.7rem;text-align:center;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--rose);
}
.slot img,.slot video{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.slot img{object-fit:cover}
.slot video{object-fit:contain;background:var(--deep)}
.slot.has-media .slot-name{display:none}
.slot.has-media{border-color:transparent}
.slot-still button{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:zoom-in;
}
.slot-still button:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.slot-still img{transition:transform .6s ease}
.slot-still button:hover img{transform:scale(1.025)}
.pillar-page.hide-empty .slot:not(.has-media){display:none}

/* Vimeo videos (one, or two side by side) */
.videos{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.videos-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.video-item{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--deep)}
.video-cap{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);
}
@media (max-width:760px){.videos-2{grid-template-columns:minmax(0,1fr)}}

/* statement + reports */
.project-body{
  display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:2.4rem 3.2rem;align-items:start;
}
.project-body section{display:flex;flex-direction:column;gap:1rem;min-width:0}
.label{
  font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--rose);
  padding-bottom:.7rem;border-bottom:1px solid var(--hair);
}
.statement p{max-width:65ch;line-height:1.7}
.pending{font-style:italic;color:var(--rose)}
.docs{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.docs a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(196,51,91,.35);
  transition:color .3s,border-color .3s;
}
.docs a::after{content:' \2197';color:var(--orange);font-size:.85em}
.docs a:hover,.docs a:focus-visible{color:var(--pink);border-color:var(--pink);outline:none}
.docs .kind{
  display:block;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);
}
.credits{white-space:pre-line;font-size:.95rem}

.totop{
  align-self:flex-start;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--rose);text-decoration:none;
}
.totop:hover,.totop:focus-visible{color:var(--pink);outline:none}

.empty-pillar{
  max-width:44rem;margin:0 auto;padding-block:2vh 10vh;
  text-align:center;font-style:italic;color:var(--rose);
}

/* ---------- footer ---------- */
.pillar-foot{
  max-width:60rem;margin:0 auto;
  padding-block:7vh 6vh;
  border-top:1px solid var(--hair);
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
}

/* ---------- lightbox for stills ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
  background:rgba(15,44,85,.94);
  color:var(--bone);
}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;display:grid;place-items:center;min-height:0}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.lb-bar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
}
.lightbox button{
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--bone);background:none;border:1px solid rgba(248,231,210,.4);
  padding:.7em 1.1em .65em 1.4em;cursor:pointer;
}
.lightbox button:hover,.lightbox button:focus-visible{border-color:var(--orange);color:var(--orange);outline:none}

/* ---------- small screens ---------- */
@media (max-width:760px){
  .project-body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .pillar-page{padding-inline:18px}
  .topbar{margin-inline:-18px;padding-inline:18px}
  .brand span{display:none}
  .pnav{gap:.5rem 1.1rem}
  .pnav a{letter-spacing:.18em}
  .project-index .events li{grid-template-columns:1fr auto}
  .project-index .events .d{grid-column:1 / -1}
  .stills{grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.5rem}
  .slot-name{font-size:.5rem;letter-spacing:.2em;bottom:.45rem}
}
@media (prefers-reduced-motion: reduce){
  .slot-still img{transition:none}
}

/* ---------- Oct 2026 additions ---------- */
.project-body.solo{grid-template-columns:minmax(0,1fr)}
.page-link{
  align-self:flex-start;margin-top:.4rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border:1px solid currentColor;padding:.8em 1.2em .75em 1.45em;
}
.page-link:hover,.page-link:focus-visible{color:var(--pillar);box-shadow:0 0 22px rgba(224,123,60,.3);outline:none}
/* film laurels / selections */
.laurels{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem 2.4rem;padding:1.4rem 0;border-block:1px solid var(--hair)}
.laurels li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;max-width:17rem;position:relative;padding-inline:1.6rem}
.laurels li::before,.laurels li::after{content:'\2767';position:absolute;top:50%;transform:translateY(-50%);color:var(--orange);font-size:1.3rem}
.laurels li::before{left:0;transform:translateY(-50%) scaleX(-1)}
.laurels li::after{right:0}
.laurels b{font-family:var(--serif);font-weight:500;font-size:1.15rem;letter-spacing:.04em;color:var(--pillar)}
.laurels span{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);line-height:1.6}
.vimeo-link{color:var(--pink);text-decoration:none;border-bottom:1px solid rgba(196,51,91,.35);white-space:nowrap}
.vimeo-link:hover,.vimeo-link:focus-visible{color:var(--orange);border-color:var(--orange);outline:none}
/* six laurels: 3 across, 2 rows */
.laurels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center}
.laurels li{max-width:none;width:100%}
.laurels li.has-img{padding:0}
.laurels li.has-img::before,.laurels li.has-img::after{content:none}
.laurels li img{max-width:100%;height:6.5rem;object-fit:contain;display:block}
@media (max-width:640px){.laurels{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Oct 19: curation list with small videos, compact cards ---------- */
#project-index .project-index{padding-block:0 6vh}
.project-index .events.project-list li{grid-template-columns:9.5em minmax(0,1fr) auto;row-gap:.8rem}
.project-list .mini{grid-column:1 / -1;display:block;width:100%;max-width:15rem;aspect-ratio:16/9;justify-self:start}
.project-list .mini iframe{pointer-events:none}
@media (min-width:761px){.project-list .mini{grid-column:2 / 3}}
.gathering{font-style:italic;color:var(--ink);opacity:.85;max-width:52ch}
.project.compact{gap:1rem;padding-block:6vh}
.compact-sum{max-width:60ch;line-height:1.7}
.curation-why{padding-top:0}
/* banner reel at the top of a pillar page */
.reel.reel-banner{min-height:0;height:min(62vh,56.25vw);margin-inline:-24px}
.reel.reel-banner .reel-cap{left:24px}
@media (max-width:560px){.reel.reel-banner{margin-inline:-18px}}

/* ---------- Oct 20: project list sneak peeks (still + clip on hover) ---------- */
.project-list .mini.peek img,.project-list .mini.peek video{object-fit:cover}
.project-list .mini.peek video{opacity:0;transition:opacity .35s ease;background:transparent}
.project-list .mini.peek.playing video{opacity:1}

/* ---------- Oct 21: any number of laurels, centered rows (4 across on desktop) ---------- */
.laurels{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem 2rem}
.laurels li{width:calc(25% - 1.5rem);min-width:9rem}
.laurels li img{height:6rem}
@media (max-width:640px){.laurels li{width:calc(50% - 1rem)}.laurels li img{height:5rem}}

/* ---------- Oct 21: Curation "ecosystem" projects list (after shed-project.com/ecosystem) ----------
   Numbered rows on a deep-blue band: number + arrow line, italic lowercase title, date · place,
   and a big clip that plays while it's on screen. Each row opens the project's own page. */
.project-index.eco-on{max-width:none;margin-inline:-24px;padding:12vh 24px 16vh;background:var(--deep);color:var(--bone);gap:clamp(4rem,10vh,7rem)}
#project-index .project-index.eco-on{padding-block:12vh 16vh}
.project-index.eco-on .eyebrow{color:var(--bone)}
.eco{list-style:none;width:100%;max-width:72rem;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:clamp(5rem,16vh,10rem)}
.eco-item{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.eco-item.in{opacity:1;transform:none}
.eco-link{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;color:inherit;text-decoration:none}
.eco-label{justify-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;min-width:min(15rem,100%)}
.eco-top{display:flex;align-items:center;gap:.75rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em}
.eco-line{position:relative;display:block;width:4.6rem;height:1px;background:currentColor;opacity:.75;transition:width .5s ease}
.eco-line::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.eco-title{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:lowercase;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.04;letter-spacing:.005em;text-wrap:balance;transition:color .35s}
.eco-meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(248,231,210,.72)}
.eco-label .chip{margin-top:.3rem}
.eco-media.slot{width:100%;aspect-ratio:16/9;border:0;background:rgba(0,0,0,.25)}
.eco-media.peek img,.eco-media.peek video{object-fit:cover}
.eco-media.peek video{opacity:0;transition:opacity .5s ease;background:transparent}
.eco-media.peek.playing video{opacity:1}
.eco-media iframe{pointer-events:none}
.eco-link:hover .eco-title,.eco-link:focus-visible .eco-title{color:var(--orange)}
.eco-link:hover .eco-line,.eco-link:focus-visible .eco-line{width:6.2rem}
.eco-link:focus-visible{outline:none}
.eco-link:focus-visible .eco-media{outline:2px solid var(--orange);outline-offset:4px}
@media (max-width:760px){
  .eco-link{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .eco-label{justify-self:start;min-width:0}
}
@media (max-width:560px){.project-index.eco-on{margin-inline:-18px;padding-inline:18px}}
@media (prefers-reduced-motion: reduce){.eco-item{opacity:1;transform:none;transition:none}}
/* a project on its own page */
.project-page .project{border-top:0;padding-top:6vh}
.eco-label{width:min(19rem,100%)}
@media (max-width:760px){.eco-label{width:100%}}
/* roman numerals + Nepantla's role (Oct 21) */
.eco-num{font-family:var(--serif);font-size:.95rem;letter-spacing:.08em}
.eco-role{display:flex;flex-direction:column;gap:.2rem;margin-top:.5rem;padding-top:.6rem;border-top:1px solid rgba(248,231,210,.22);width:100%}
.eco-role-k{font-family:var(--mono);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--orange)}
.eco-role-v{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.35;color:var(--bone)}
/* softer blue band + titles as written (Oct 21) */
.project-index.eco-on{background:#3D5A80}
.eco-title{text-transform:none}
.eco-media.slot{background:rgba(15,44,85,.25)}
.project-quote{margin:.6rem 0 0;padding-left:1.1rem;border-left:2px solid var(--orange);font-style:italic;font-size:1.15rem;line-height:1.5;color:var(--ink)}
.project-quote cite{display:block;margin-top:.5rem;font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose)}
/* laurels all the same size (Oct 21): each sits in the same box */
.laurels li.has-img img{width:100%;max-width:11rem;height:6.5rem;object-fit:contain;margin-inline:auto}
@media (max-width:640px){.laurels li.has-img img{height:5.2rem}}