/* plates.css — the picture plates and the panel one grows into.
 * The section name is set on the photograph, the way the lockup sits on the
 * header; the words underneath only explain it. Depends on kit.css for the
 * palette and the type system.
 */

main{padding:clamp(2.5rem,7vh,5rem) 0 0}

.intro{
  font:400 clamp(1.25rem,2.4vw,1.9rem)/1.32 var(--font);
  color:var(--ink);letter-spacing:-.02em;text-wrap:balance;
  /* centred over the plates, and given the full width of them: at this size the
     sentence sets as two balanced lines rather than a narrow stack */
  margin:0 auto clamp(.9rem,2.2vh,1.4rem);text-align:center;
}

/* A nudge, not a second sentence. Set at label size so it reads as an
   instruction about the grid below rather than as a trailing clause of the
   intro above it, and it carries the gap down to the plates. */
.hint{
  margin:0 auto clamp(2.2rem,6vh,3.6rem);text-align:center;
  font:600 clamp(12px,1.05vw,13.5px)/1.5 var(--font);
  letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb, var(--green) 50%, #cfd8c8);
}

.plates{
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4.5vw,4rem) clamp(1.5rem,3.5vw,3rem);
}

.card{
  display:block;width:100%;text-align:left;color:inherit;font:inherit;
  background:none;border:0;padding:0;cursor:pointer;
}
.card[hidden-by-expand]{visibility:hidden}

.card{transition:transform .3s cubic-bezier(.2,0,.2,1)}
.card:hover,.card.is-hover,.card:focus-visible{transform:translateY(-5px)}

.plate{
  position:relative;aspect-ratio:5/4;overflow:hidden;
  background:#0a0f07;border:1px solid var(--line);
  transition:border-color .25s ease, box-shadow .3s ease;
}
.card:hover .plate,.card.is-hover .plate,.card:focus-visible .plate{
  border-color:rgba(27,142,27,.44);
  box-shadow:0 22px 55px -26px #000, 0 0 0 3px rgba(27,142,27,.05);
}
.card:focus-visible{outline:none}
.plate img,.plate canvas{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);
  transition:transform .6s cubic-bezier(.2,0,.2,1), filter .35s ease;
}
.card:hover .plate img,.card.is-hover .plate img,.card:focus-visible .plate img{
  transform:scale(1.07);filter:brightness(1.05) saturate(1.03);
}
/* the globe is drawn, not photographed: it sits at true scale so its pixels
   stay square, and only leans in a little on hover */
.plate canvas{transform:none}
.card:hover .plate canvas,.card.is-hover .plate canvas,.card:focus-visible .plate canvas{
  transform:scale(1.04);filter:brightness(1.04);
}
/* the picture warms a shade toward the poster green as you come onto it — the
   only colour that moves on this page, so it reads as "this one is live".
   Kept light: past about .15 the wash stops being a warming and starts being
   a green filter over the photograph, so it sits well under that. */
.plate::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(27,142,27,.07),rgba(27,142,27,.015) 55%,transparent 80%);
  opacity:0;transition:opacity .3s ease;
}
.card:hover .plate::after,.card.is-hover .plate::after,.card:focus-visible .plate::after{opacity:1}

/* a frame that says out loud which photograph belongs here */
.plate.empty{
  background:repeating-linear-gradient(135deg,#080e05 0 12px,#0b1207 12px 24px);
  transition:background .3s ease;
}
.card:hover .plate.empty,.card.is-hover .plate.empty,.card:focus-visible .plate.empty{
  background:repeating-linear-gradient(135deg,#0d1608 0 12px,#121c0c 12px 24px);
}
.plate .want{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:0 2rem;font:600 10.5px/1.7 var(--font);letter-spacing:.2em;
  text-transform:uppercase;color:var(--line-hi);
}

/* The veil covers only the band the type sits in, so it never greys the photo.
   It is also the whole reason a plate looks darker than the same picture does in
   the opened panel, where cards.js drops the veil from the clone — so it is kept
   only as heavy as the title actually needs. */
.plate .veil{
  position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;
  transition:height .3s ease;
  background:linear-gradient(to top,rgba(2,5,1,.88) 6%,rgba(2,5,1,.36) 42%,transparent 100%);
}
.card:hover .veil,.card.is-hover .veil,.card:focus-visible .veil{height:72%}
.plate .over{
  position:absolute;left:0;bottom:0;z-index:2;padding:clamp(1.1rem,2.4vw,1.8rem);
  transition:transform .3s cubic-bezier(.2,0,.2,1);
}
.card:hover .over,.card.is-hover .over,.card:focus-visible .over{transform:translateY(-4px)}
.plate .over .h2{color:#fff;text-shadow:0 1px 24px rgba(0,0,0,.5)}

/* balance evens out every line, so a five-line paragraph never reaches the
   right edge — pretty only guards the last line against a widow */
.card .lede{margin:1.2rem 0 .7rem;max-width:none;text-wrap:wrap;text-wrap:pretty}
.card .teaser{max-width:none;font-size:16px;color:var(--dim);line-height:1.6}

@media (max-width:760px){
  .plates{grid-template-columns:1fr;gap:2.5rem}
  .plate{aspect-ratio:4/3}
}

/* ── the panel a plate grows into ───────────────────────── */
#scrim{
  position:fixed;inset:0;z-index:18;background:rgba(2,5,1,.78);
  opacity:0;pointer-events:none;transition:opacity .14s ease;
}
#scrim.on{opacity:1;pointer-events:auto;transition:opacity .2s ease}

#expander{
  position:fixed;z-index:20;background:var(--panel);
  border:1px solid var(--line-hi);overflow:hidden;
  display:flex;flex-direction:column;
}
#expander[hidden]{display:none}
#expander .expInner{
  flex:1;overflow-y:auto;padding:clamp(1.6rem,4vw,3.5rem);
  opacity:0;transition:opacity .1s ease;       /* closing: gone at once */
}
#expander.open .expInner{opacity:1;transition:opacity .18s ease .06s}
#expander .num{
  font:600 10.5px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--green);
}
#expander h2{
  font:600 clamp(1.82rem,4.28vw,3.21rem)/1.08 var(--font);letter-spacing:-.03em;
  margin:.9rem 0 1.6rem;max-width:20ch;
}
/* the panel is read, not scanned: its body sets a step above the page's 18px,
   and the measure stays in ch so the line length is unchanged by the bump */
#expander .expBody{max-width:62ch;color:var(--ink);font-size:clamp(18px,1.3vw,20px)}
#expander .expBody p{margin-bottom:1rem;line-height:1.7}
#expander .expBody p:last-child{margin-bottom:0}

/* Plain text in the corner: the pill it used to sit in was the loudest thing
   in a panel whose job is the photograph and the words. Escape and the scrim
   close it too, so this only has to be findable, not prominent. */
.backBtn{
  position:absolute;top:clamp(.9rem,2vw,1.5rem);right:clamp(.9rem,2vw,1.5rem);z-index:2;
  background:none;border:0;padding:.4rem;
  color:var(--dim);cursor:pointer;
  font:600 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transition:opacity .1s ease, color .16s ease;
}
#expander.open .backBtn{opacity:1;transition:opacity .16s ease .07s, color .16s ease}
.backBtn:hover{color:var(--ink)}
.backBtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  #expander{transition:none !important}
  .card,.plate,.plate img,.plate canvas,.plate .veil,.plate .over{transition:none}
  .card:hover,.card.is-hover,.card:focus-visible{transform:none}
}

/* the opened panel keeps the picture: photograph on one side, words on the
   other, both filling the height of the window */
#expander .expInner{padding:0}
.expGrid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  min-height:100%;
}
.expPic{position:relative;overflow:hidden;background:#0a0f07}
/* The picture is pinned to the column rather than sitting in it. A canvas or an
   image at height:100% inside an auto-height row has no percentage to resolve
   against, so it falls back to its own measured size — which the globe's
   ResizeObserver then writes back — and every pass ratchets the row taller,
   leaving a screenful of dead scroll under the words. Out of flow, the row is
   sized by the text and the picture simply fills whatever that comes to. */
.expPic .plate{
  position:absolute;inset:0;aspect-ratio:auto;height:auto;
  border:0;border-right:1px solid var(--line);
}
.expPic .plate img,.expPic .plate canvas{transform:none}
.expText{
  padding:clamp(1.6rem,3.5vw,3.5rem);
  display:flex;flex-direction:column;justify-content:center;
}
@media (max-width:820px){
  .expGrid{grid-template-columns:1fr;grid-template-rows:32vh auto}
  .expPic .plate{border-right:0;border-bottom:1px solid var(--line)}
  .expText{justify-content:flex-start}
}

/* About Us carries two photographs instead of one. A grid rather than a
   collage: a single seam down the middle, each half keeping the plate's full
   height, so the pair still reads as one plate at a glance. The images inherit
   the .plate img rules above, so they crop, scale and warm on hover like every
   other picture on the page — only object-position is set per photograph,
   inline, because it belongs to the picture and not to the layout. */
.plate.split{display:grid;grid-template-columns:1fr 1fr}
.plate.split figure{position:relative;overflow:hidden;margin:0;min-width:0}
.plate.split figure + figure{box-shadow:inset 1px 0 0 rgba(2,5,1,.55)}

/* Opened, the pair of photographs turns a quarter: side by side on the card,
   where the plate is wide, and stacked in the panel, where the picture column
   is tall. Greyson stays first either way, so the order matches the ballot. */
.expPic .plate.split{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.expPic .plate.split figure + figure{box-shadow:inset 0 1px 0 rgba(2,5,1,.55)}

/* Two people share the panel's one column of words, so each gets a name and a
   rule above it rather than a picture: the photographs are already alongside. */
.expBody .bio + .bio{
  margin-top:clamp(1.6rem,4vh,2.6rem);
  padding-top:clamp(1.4rem,3.5vh,2.2rem);
  border-top:1px solid var(--line);
}
.expBody .bio .h3{margin:.4rem 0 .8rem}
.expBody .bio p{color:var(--ink);line-height:1.7}
.expBody .bio p + p{margin-top:.9rem}

/* Two sections carry more than prose: named sub-projects, and a run of
   activities. Both are set as part of the body rather than as new components —
   the name takes the label's weight inline, and the list keeps the paragraph
   measure, so an opened panel still reads as one column of writing. */
#expander .expBody .lead-in{margin-bottom:.6rem}
#expander .expBody .proj{
  margin:0 0 .9rem;padding-left:1rem;border-left:1px solid var(--line-hi);
}
#expander .expBody .proj b{color:var(--green);font-weight:600}
#expander .expBody .bits{
  list-style:none;margin:0 0 1rem;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.15rem 1.5rem;
}
#expander .expBody .bits li{position:relative;padding-left:1rem;line-height:1.7}
#expander .expBody .bits li::before{
  content:"";position:absolute;left:0;top:.85em;
  width:5px;height:5px;border-radius:999px;background:var(--green);
}

/* where someone is writing from, set under the name in the label's voice */
.expBody .bio .from{
  margin:-.4rem 0 .8rem;font-size:14px;color:var(--dim);letter-spacing:.01em;
}

/* A name in the prose that is also a place you can go. The poster's green
   marks it the way .proj b marks a sub-project; the rule under it is dim until
   the pointer arrives, so the paragraph stays prose and not a list of links. */
.expBody .bio .exLink{
  color:var(--green);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--green-lo);
  transition:border-color .2s;
}
.expBody .bio .exLink:hover,.expBody .bio .exLink:focus-visible{
  border-bottom-color:var(--green);
}